/* casevigil.com showcase pages: Home and Platform (2026-10-02, the Apple-style redesign).
   Rajesh: "modern SaaS marketing website and yes, Apple design philosophy".
   One idea per screen; hand-built product scenes on the product's own tokens
   (casevigil/web/src/design/tokens.css), example firm only. Everything is
   scoped to .hv so the other pages keep site.css untouched. Loaded on
   Home and Platform only (_shell.py). */
.hv { font-family: var(--ui); color: var(--ink); line-height: 1.55; -webkit-font-smoothing: antialiased; }
.hv a { color: inherit; }
.hv *, .hv *::before, .hv *::after { box-sizing: border-box; }
.hv .btn:focus-visible, .hv a:focus-visible { outline: 3px solid #D9C193; outline-offset: 3px; }
/* Layout: one idea per screen. A huge centred headline, one sentence, then the
   product itself on a wide stage. White and stone alternate; one navy band. */
.hv {
  
  --ink: #1A222C;
  --ink-2: #4A5763;
  --muted: #5E6A75;
  --faint: #9AA3AB;
  --ground: #F7F5F4;
  --stone: #F1EEEA;        /* section ground */
  --stone-2: #E9E5DF;
  --line: #E4E0DA;
  --navy: #1B2A38;         /* path2immigration.com navy */
  --navy-deep: #131F2A;
  --navy-tint: #E6EAEE;
  --vigil: #C2A15B;        /* the firm's gold: wordmark and the one primary action */
  --vigil-hover: #D9C193;
  --ok: #3F8A62; --ok-tint: #CBE7D4;
  --amber: #a8720f; --amber-tint: #f7ecd2;
  --plum: #6b4a7a; --plum-tint: #ece2f0;
  --on-dark: #F7F5F4; --on-dark-2: #AAB4BD;
  --display: "Bricolage Grotesque", "Hanken Grotesk", system-ui, sans-serif;
  --ui: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --r-card: 14px; --r-stage: 22px; --r-pill: 999px;
  --shadow-stage: 0 1px 2px rgba(20,24,32,.06), 0 24px 60px -20px rgba(20,32,52,.28);
  --shadow-card: 0 1px 2px rgba(20,24,32,.05), 0 8px 24px -12px rgba(20,32,52,.18);
}
.hv * { box-sizing: border-box; }
.hv html { scroll-behavior: smooth; }
.hv body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--ui); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
.hv a { color: inherit; }
.hv .wrap { max-width: 1180px; margin: 0 auto; padding-inline: 24px; }
@media (max-width: 600px) { .hv .wrap { padding-inline: 16px; } }
.hv .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: var(--r-pill); font: 500 15px/1 var(--ui); text-decoration: none; border: 1px solid transparent; cursor: pointer; white-space: nowrap; }
.hv .btn--primary { background: var(--vigil); color: #1B2A38; }
.hv .btn--primary:hover { background: var(--vigil-hover); }
.hv .btn--ghost { color: var(--navy); }
.hv .btn--ghost:hover { text-decoration: underline; text-underline-offset: 4px; }
.hv .btn--lg { height: 48px; padding: 0 24px; font-size: 16px; }
/* ── Type ───────────────────────────────────────────────────── */
.hv .eyebrow { font: 500 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--vigil); }
.hv .h-hero { font-family: var(--display); font-weight: 500; font-size: clamp(44px, 7.4vw, 92px); line-height: .98; letter-spacing: -.025em; margin: 18px auto 0; max-width: 13ch; text-wrap: balance; }
.hv .h-hero i { font-style: italic; color: #D9C193; }
.hv .h-sec { font-family: var(--display); font-weight: 500; font-size: clamp(38px, 5.6vw, 68px); line-height: 1.02; letter-spacing: -.022em; margin: 14px auto 0; max-width: 16ch; text-wrap: balance; }
.hv .lede { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; color: var(--muted); max-width: 40ch; margin: 18px auto 0; text-wrap: pretty; }
.hv .center { text-align: center; }
/* ── Hero ───────────────────────────────────────────────────── */
.hv .hero { background: radial-gradient(120% 80% at 50% 0%, #2B3A47 0%, var(--navy) 38%, var(--navy-deep) 100%); color: var(--on-dark); padding-block: 88px 0; overflow: hidden; }
.hv .hero .eyebrow { color: #D9C193; }
.hv .hero__cta { display: flex; gap: 14px; justify-content: center; align-items: center; margin-top: 36px; flex-wrap: wrap; }
.hv .hero .btn--ghost { color: var(--on-dark); }
.hv .stage { margin-top: 64px; border-radius: var(--r-stage) var(--r-stage) 0 0; background: #fbfaf8; box-shadow: 0 -1px 0 rgba(255,255,255,.08), 0 40px 120px -30px rgba(0,0,0,.6); overflow: hidden; color: var(--ink); }
.hv .cred { display: flex; gap: 16px; align-items: center; justify-content: center; padding-block: 36px; color: var(--on-dark-2); font-size: 15px; max-width: 720px; margin: 0 auto; }
.hv .cred b { color: var(--on-dark); font-weight: 600; }
.hv .avatar { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: #34557f; color: #fff; font: 600 15px/1 var(--ui); }
/* The app replica: today's dashboard, made-up firm. */
.hv .app { display: grid; grid-template-columns: 196px minmax(0,1fr); font-size: 12.5px; min-height: 560px; }
.hv .app__rail { background: #f3f0eb; border-right: 1px solid var(--line); padding: 16px 12px; display: flex; flex-direction: column; gap: 2px; }
.hv .app__brand { font-family: var(--display); font-weight: 600; font-size: 16px; padding: 0 8px; }
.hv .app__brand em { font-style: normal; color: var(--vigil); }
.hv .app__firm { color: var(--muted); font-size: 11px; padding: 0 8px 14px; }
.hv .app__group { font: 600 10px/1 var(--ui); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); padding: 14px 8px 6px; }
.hv .app__nav { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 8px; color: var(--ink-2); }
.hv .app__nav i { width: 14px; height: 14px; border-radius: 4px; background: var(--c, #c9c1b5); flex: none; }
.hv .app__nav[data-on] { background: #fff; color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.hv .app__main { padding: 18px 22px 22px; min-width: 0; }
.hv .app__top { display: flex; align-items: center; gap: 12px; }
.hv .app__search { flex: 1; max-width: 320px; height: 30px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--faint); display: flex; align-items: center; padding: 0 10px; }
.hv .app__me { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.hv .app__me span:first-child { width: 26px; height: 26px; border-radius: 50%; background: #d8c9b5; }
.hv .app__hello { font-family: var(--display); font-size: 26px; font-weight: 500; text-align: center; margin: 22px 0 16px; letter-spacing: -.01em; }
.hv .tiles { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.hv .tile { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; min-width: 0; }
.hv .tile__h { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 10px; }
.hv .tile__h i { width: 18px; height: 18px; border-radius: 5px; background: var(--c); }
.hv .row { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid #ECE8E2; }
.hv .row:first-of-type { border-top: 0; }
.hv .row b { font-weight: 600; }
.hv .row small { display: block; color: var(--muted); font-size: 11.5px; }
.hv .row time { color: var(--faint); white-space: nowrap; font-size: 11.5px; }
.hv .num { font-variant-numeric: tabular-nums; font-weight: 600; }
.hv .tile__foot { color: var(--navy); font-weight: 500; margin-top: 6px; font-size: 12px; }
.hv .today { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.hv .today .eyebrow { color: var(--faint); font-size: 10px; }
.hv .today p { margin: 0; }
.hv .pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: var(--r-pill); font: 600 11px/1.4 var(--ui); background: var(--bg, var(--navy-tint)); color: var(--fg, var(--navy)); white-space: nowrap; }
.hv .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--amber)); flex: none; display: inline-block; }
@media (max-width: 900px) { .hv .app { grid-template-columns: 1fr; } .hv .app__rail { display: none; } .hv .tiles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .hv .tiles { grid-template-columns: 1fr; } .hv .tiles .tile:nth-child(n+4) { display: none; } }
/* ── Sections ───────────────────────────────────────────────── */
.hv .sec { padding-block: 128px; }
.hv .sec--stone { background: var(--stone); }
.hv .sec--dark { background: var(--navy-deep); color: var(--on-dark); }
.hv .sec--dark .lede { color: var(--on-dark-2); }
.hv .sec--dark .eyebrow { color: #D9C193; }
.hv .showcase { margin-top: 64px; }
@media (max-width: 600px) { .hv .sec { padding-block: 88px; } .hv .showcase { margin-top: 44px; } }
.hv .panel { background: #fff; border: 1px solid var(--line); border-radius: var(--r-stage); box-shadow: var(--shadow-stage); overflow: hidden; }
.hv .caption { text-align: center; color: var(--faint); font-size: 13px; margin-top: 16px; }
/* 1. Open a matter -- questions fold to their answers */
.hv .nm { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 28px; padding: 36px; }
@media (max-width: 860px) { .hv .nm { grid-template-columns: 1fr; padding: 22px; } }
.hv .q { display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 14px; padding: 13px 0; border-top: 1px solid #ECE8E2; align-items: baseline; }
.hv .q:first-child { border-top: 0; }
.hv .q__n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: #fff; font: 600 12px/1 var(--ui); }
.hv .q__line { display: flex; gap: 12px; align-items: baseline; min-width: 0; font-size: 15px; }
.hv .q__line span { color: var(--muted); flex: none; }
.hv .q__line b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.hv .q__line a { color: var(--navy); font-size: 14px; text-decoration: none; }
.hv .q--open .q__n { background: #fff; color: var(--navy); border: 1.5px solid var(--navy); }
.hv .q--open h4 { margin: 0 0 12px; font: 600 20px/1.2 var(--ui); }
.hv .choices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hv .choice { border: 1.5px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.hv .choice b { display: block; font-weight: 600; }
.hv .choice small { color: var(--muted); }
.hv .choice[data-on] { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
@media (max-width: 600px) { .hv .choices { grid-template-columns: 1fr; } }
.hv .summary { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; align-self: start; box-shadow: var(--shadow-card); }
.hv .summary__head { padding: 18px 20px; border-bottom: 1px solid var(--line); }
.hv .summary__head h5 { margin: 4px 0 0; font: 600 16px/1.3 var(--ui); }
.hv .summary dl { margin: 0; padding: 14px 20px; display: grid; grid-template-columns: auto minmax(0,1fr); gap: 8px 12px; font-size: 14px; }
.hv .summary dt { color: var(--muted); }
.hv .summary dd { margin: 0; text-align: right; font-weight: 600; }
.hv .summary__fee { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 20px; background: var(--stone); border-top: 1px solid var(--line); }
.hv .summary__fee b { font-size: 22px; font-variant-numeric: tabular-nums; }
.hv .summary__go { padding: 16px 20px 20px; }
.hv .summary__go span { display: flex; height: 44px; border-radius: 10px; background: var(--navy); color: #fff; align-items: center; justify-content: center; font-weight: 600; }
.hv .play .q--folds { animation: hv-fold .7s cubic-bezier(.2,.7,.2,1) both; }
.hv .play .q--folds:nth-child(2) { animation-delay: .15s; }
.hv .play .q--folds:nth-child(3) { animation-delay: .3s; }
.hv .play .q--folds:nth-child(4) { animation-delay: .45s; }
.hv .play .q--folds:nth-child(5) { animation-delay: .6s; }
@keyframes hv-fold { from { opacity: .2; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* 2. Ask once -- phone + forms */
.hv .duo { display: grid; grid-template-columns: 340px minmax(0,1fr); gap: 56px; align-items: center; max-width: 1000px; margin-inline: auto; }
@media (max-width: 860px) { .hv .duo { grid-template-columns: 1fr; gap: 40px; justify-items: center; } }
.hv .phone { width: 320px; max-width: 100%; border-radius: 44px; background: #111; padding: 12px; box-shadow: var(--shadow-stage); }
.hv .phone__screen { border-radius: 34px; background: #fff; overflow: hidden; min-height: 600px; }
.hv .phone__bar { height: 34px; display: flex; justify-content: center; align-items: flex-end; }
.hv .phone__bar span { width: 96px; height: 26px; border-radius: 14px; background: #111; }
.hv .portal { padding: 18px 20px 24px; font-size: 14px; }
.hv .portal__firm { color: var(--muted); font-size: 12px; }
.hv .portal h4 { font-family: var(--display); font-weight: 500; font-size: 26px; line-height: 1.1; margin: 6px 0 4px; }
.hv .portal .steps { display: flex; gap: 4px; margin: 14px 0 18px; }
.hv .portal .steps i { flex: 1; height: 4px; border-radius: 2px; background: var(--stone-2); }
.hv .portal .steps i[data-done] { background: var(--ok); }
.hv .portal .steps i[data-now] { background: var(--navy); }
.hv .portal .field { margin-bottom: 14px; }
.hv .portal .field label { display: block; color: var(--ink-2); font-size: 13px; margin-bottom: 6px; }
.hv .portal .field div { border: 1px solid #d9d2c7; border-radius: 10px; padding: 10px 12px; }
.hv .portal .field div.typing::after { content: ""; display: inline-block; width: 1.5px; height: 1em; background: var(--navy); vertical-align: -2px; margin-left: 1px; animation: hv-blink 1s steps(1) infinite; }
@keyframes hv-blink { 50% { opacity: 0; } }
.hv .portal__next { margin-top: 18px; height: 46px; border-radius: 12px; background: var(--navy); color: #fff; display: grid; place-items: center; font-weight: 600; }
.hv .forms { display: grid; gap: 12px; }
.hv .formrow { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; display: grid; grid-template-columns: 74px minmax(0,1fr) auto; gap: 14px; align-items: center; box-shadow: var(--shadow-card); }
.hv .formrow b { font-family: var(--display); font-weight: 600; font-size: 20px; }
.hv .formrow small { color: var(--muted); display: block; font-size: 13px; }
.hv .bar { height: 6px; border-radius: 3px; background: var(--stone-2); margin-top: 8px; overflow: hidden; }
.hv .bar span { display: block; height: 100%; border-radius: 3px; background: var(--ok); width: var(--w); }
.hv .play .bar span { animation: hv-fill 1.4s cubic-bezier(.2,.7,.2,1) both; }
@keyframes hv-fill { from { width: 0; } }
.hv .formrow .pill { --bg: var(--ok-tint); --fg: var(--ok); }
.hv .forms__note { color: var(--muted); font-size: 14px; text-align: center; margin-top: 6px; }
/* 3. The agreement writes itself */
.hv .doc { max-width: 860px; margin-inline: auto; display: grid; grid-template-columns: minmax(0,1fr); }
.hv .doc__bar { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-bottom: 1px solid var(--line); font-size: 14px; flex-wrap: wrap; }
.hv .doc__bar b { font-weight: 600; }
.hv .doc__bar .pill { --bg: var(--plum-tint); --fg: var(--plum); }
.hv .doc__bar .actions { margin-left: auto; display: flex; gap: 8px; }
.hv .mini { height: 32px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--line); display: inline-flex; align-items: center; font-weight: 500; font-size: 13px; }
.hv .mini--go { background: var(--navy); color: #fff; border-color: var(--navy); }
.hv .paper { padding: 56px clamp(24px, 7vw, 88px) 64px; font-family: var(--display); font-size: 17px; line-height: 1.65; color: #2a2620; }
.hv .paper h4 { text-align: center; font-size: 20px; font-weight: 600; letter-spacing: .02em; margin: 0 0 6px; }
.hv .paper .sub { text-align: center; color: var(--muted); font-family: var(--ui); font-size: 13px; margin-bottom: 30px; }
.hv .paper p { margin: 0 0 16px; }
.hv .fill { background: #f3ecf6; border-radius: 4px; padding: 0 4px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.hv .play .fill { animation: hv-hl 1.6s ease both; }
.hv .play .fill:nth-of-type(2) { animation-delay: .25s; }
.hv .play .fill:nth-of-type(3) { animation-delay: .5s; }
@keyframes hv-hl { from { background: transparent; color: transparent; } 40% { background: #e4d2ec; color: inherit; } to { background: #f3ecf6; } }
.hv .sign { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 36px; font-family: var(--ui); font-size: 13px; color: var(--muted); }
.hv .sign div { border-top: 1px solid #b9b1a5; padding-top: 8px; }
.hv .sign b { display: block; color: var(--ink); font-weight: 600; font-size: 14px; }
/* 4. Signed, in order */
.hv .env { max-width: 760px; margin-inline: auto; }
.hv .env__head { padding: 22px 26px; border-bottom: 1px solid var(--line); display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.hv .env__head b { font-weight: 600; font-size: 16px; }
.hv .env__head small { color: var(--muted); display: block; }
.hv .env__head .pill { margin-left: auto; --bg: var(--amber-tint); --fg: var(--amber); }
.hv .signer { display: grid; grid-template-columns: 34px 44px minmax(0,1fr) auto; gap: 14px; align-items: center; padding: 18px 26px; border-top: 1px solid #ECE8E2; }
.hv .signer:first-of-type { border-top: 0; }
.hv .signer__n { color: var(--faint); font: 600 13px/1 var(--ui); text-align: center; }
.hv .signer .avatar { width: 40px; height: 40px; font-size: 13px; background: var(--a, #34557f); }
.hv .signer b { font-weight: 600; display: block; }
.hv .signer small { color: var(--muted); }
.hv .signer .pill[data-s="done"] { --bg: var(--ok-tint); --fg: var(--ok); }
.hv .signer .pill[data-s="next"] { --bg: var(--amber-tint); --fg: var(--amber); }
.hv .signer .pill[data-s="later"] { --bg: var(--stone); --fg: var(--muted); }
.hv .env__foot { padding: 16px 26px; background: var(--stone); border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; display: flex; gap: 10px; align-items: center; }
@media (max-width: 600px) { .hv .signer { grid-template-columns: 40px minmax(0,1fr); } .hv .signer__n { display: none; } .hv .signer .pill { grid-column: 2; justify-self: start; } }
/* 5. Nothing slips (dark) */
.hv .slips { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: 20px; }
@media (max-width: 860px) { .hv .slips { grid-template-columns: 1fr; } }
.hv .glass { background: #22323F; border: 1px solid #384855; border-radius: var(--r-stage); padding: 26px 28px; min-width: 0; }
.hv .glass h5 { margin: 0 0 4px; font: 600 15px/1.3 var(--ui); color: var(--on-dark); }
.hv .glass > small { color: var(--on-dark-2); }
.hv .kd { display: grid; grid-template-columns: 92px minmax(0,1fr); gap: 14px; padding: 16px 0; border-top: 1px solid #384855; }
.hv .kd:first-of-type { margin-top: 14px; }
.hv .kd time { font-variant-numeric: tabular-nums; color: #D9C193; font-weight: 600; font-size: 14px; }
.hv .kd b { display: block; font-weight: 600; color: var(--on-dark); }
.hv .kd small { color: var(--on-dark-2); font-size: 13px; }
.hv .kd .sent { display: inline-flex; gap: 6px; align-items: center; margin-top: 6px; color: #9fd0aa; font-size: 12.5px; font-weight: 500; }
.hv .rc { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 6px 12px; padding: 14px 0; border-top: 1px solid #384855; align-items: center; }
.hv .rc:first-of-type { margin-top: 14px; }
.hv .rc code { font: 500 13px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--on-dark); letter-spacing: .02em; }
.hv .rc small { grid-column: 1; color: var(--on-dark-2); font-size: 13px; }
.hv .rc .pill { grid-row: 1 / span 2; grid-column: 2; }
.hv .pill--ok { --bg: #1e3b2a; --fg: #9fd0aa; }
.hv .pill--wait { --bg: #3b3020; --fg: #f0c987; }
.hv .pill--rfe { --bg: #3d2230; --fg: #f1a7b6; }
/* 6. Bento */
.hv .bento { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 16px; margin-top: 64px; }
.hv .b { background: #fff; border: 1px solid var(--line); border-radius: var(--r-stage); padding: 30px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.hv .b--4 { grid-column: span 4; }
.hv .b--3 { grid-column: span 3; }
.hv .b--2 { grid-column: span 2; }
.hv .b h5 { margin: 0; font-family: var(--display); font-weight: 500; font-size: 28px; line-height: 1.1; letter-spacing: -.01em; }
.hv .b p { margin: 0; color: var(--muted); }
.hv .b__art { margin-top: auto; padding-top: 18px; }
@media (max-width: 960px) { .hv .bento { grid-template-columns: 1fr 1fr; } .hv .b--4, .hv .b--3, .hv .b--2 { grid-column: span 2; } }
@media (max-width: 600px) { .hv .b { padding: 24px; } }
.hv .ledger { display: grid; gap: 8px; font-size: 14px; }
.hv .ledger div { display: flex; justify-content: space-between; padding: 10px 14px; background: var(--stone); border-radius: 10px; }
.hv .ledger span:last-child { font-variant-numeric: tabular-nums; font-weight: 600; }
.hv .ledger .tie { background: var(--ok-tint); color: var(--ok); font-weight: 600; }
.hv .cite { background: var(--stone); border-radius: 12px; padding: 14px 16px; font-size: 14px; color: var(--ink-2); }
.hv .cite b { color: var(--plum); font-weight: 600; }
.hv .doctag { display: flex; gap: 12px; align-items: center; background: var(--stone); border-radius: 12px; padding: 12px 14px; font-size: 14px; }
.hv .doctag i { width: 34px; height: 42px; border-radius: 4px; background: #fff; border: 1px solid var(--line); flex: none; }
.hv .doctag small { display: block; color: var(--muted); }
.hv .locks { display: flex; flex-wrap: wrap; gap: 8px; }
.hv .locks span { padding: 7px 12px; border-radius: var(--r-pill); background: var(--navy-tint); color: var(--navy); font-size: 13px; font-weight: 500; }
/* 7. Close */
.hv .close { text-align: center; padding-block: 140px; background: radial-gradient(90% 70% at 50% 100%, #f1e6d8 0%, var(--ground) 60%); }
.hv .close .hero__cta .btn--ghost { color: var(--navy); }
.hv .price-line { font-family: var(--display); font-size: clamp(22px, 2.4vw, 28px); color: var(--ink-2); margin-top: 18px; }
.hv .price-line b { color: var(--ink); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .hv *, .hv *::before, .hv *::after { animation: none !important; scroll-behavior: auto !important; } }
.hv .avatar--photo { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; }
.hv .cred .fn { color: #D9C193; }
/* site.css styles h1-h3, .hero, .eyebrow, .btn, .panel and .steps for the
   other pages; inside the homepage those defaults step aside. */
.hv h1, .hv h2, .hv h4, .hv h5 { color: inherit; }
.hv .eyebrow, .hv .hero .eyebrow { display: block; margin: 0; padding: 0; background: none; box-shadow: none; border-radius: 0; font-weight: 500; letter-spacing: .12em; }
.hv .btn--primary { box-shadow: none; }
.hv .btn--primary:hover { transform: none; box-shadow: none; }
.hv .panel:not(.nm) { padding: 0; }
.hv .portal .field { display: block; }
.hv .portal .field label { font-weight: 400; color: var(--ink-2); }
.hv .stage { text-align: left; }
.hv .app__search { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; line-height: 28px; }

/* ── Platform page (2026-10-02) ─────────────────────────────────────────── */
.hv .phero { padding-block: 96px 112px; background: linear-gradient(180deg, var(--ground) 0%, var(--stone) 100%); }
.hv .h-hero--ink { color: var(--ink); max-width: 14ch; }
.hv .phero .hero__cta .btn--ghost { color: var(--navy); }
/* A matter, as it opens */
.hv .mx { padding: 0; }
.hv .mx__title { padding: 22px 28px 0; }
.hv .mx__back { color: var(--muted); font-size: 13px; }
.hv .mx__title h3 { font: 500 26px/1.2 var(--display); letter-spacing: -.01em; margin: 6px 0 2px; color: var(--ink); }
.hv .mx__title small { color: var(--faint); font-size: 13px; }
.hv .mx__head { display: grid; grid-template-columns: minmax(0,1fr) 260px; gap: 16px; padding: 18px 28px; }
.hv .mx__card, .hv .mx__next { border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; min-width: 0; }
.hv .mx__card { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
.hv .mx__lbl { color: var(--faint); font-size: 11px; margin-bottom: 12px; }
.hv .mx__p { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; font-size: 14px; }
.hv .mx__p .avatar { width: 30px; height: 30px; font-size: 11px; background: var(--a); }
.hv .mx__p small { color: var(--muted); }
.hv .mx__kv { display: grid; grid-template-columns: 84px minmax(0,1fr); gap: 8px; font-size: 14px; padding: 3px 0; }
.hv .mx__kv span { color: var(--muted); }
.hv .mx__kv b { font-weight: 500; }
.hv .mx__ev { display: grid; gap: 2px; padding: 8px 0; border-top: 1px solid #ECE8E2; font-size: 14px; }
.hv .mx__ev:first-of-type { border-top: 0; }
.hv .mx__ev time { color: var(--amber); font-weight: 600; font-variant-numeric: tabular-nums; }
.hv .mx__tabs { display: flex; gap: 6px; padding: 0 28px 22px; flex-wrap: wrap; font-size: 15px; color: var(--muted); }
.hv .mx__tabs span { padding: 8px 14px; border-radius: 10px; }
.hv .mx__tabs span[data-on] { background: var(--navy-tint); color: var(--navy); font-weight: 600; }
@media (max-width: 900px) { .hv .mx__head { grid-template-columns: 1fr; } .hv .mx__card { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .hv .mx__card { grid-template-columns: 1fr; } .hv .mx__title, .hv .mx__head { padding-inline: 18px; } .hv .mx__tabs { padding-inline: 18px; } }

/* Text beside a scene; every other section flips */
.hv .split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: center; }
.hv .split--rev .split__copy { order: 2; }
.hv .split__copy p { color: var(--muted); font-size: 18px; margin: 16px 0 0; max-width: 42ch; }
.hv .h-split { font-family: var(--display); font-weight: 500; font-size: clamp(34px, 4.2vw, 52px); line-height: 1.04; letter-spacing: -.02em; margin: 12px 0 0; text-wrap: balance; }
@media (max-width: 900px) { .hv .split { grid-template-columns: 1fr; gap: 36px; } .hv .split--rev .split__copy { order: 0; } }

/* Docket */
.hv .dk { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); }
.hv .dk__col { padding: 22px 20px; border-left: 1px solid var(--line); min-width: 0; }
.hv .dk__col:first-child { border-left: 0; }
.hv .dk__h { display: flex; gap: 8px; align-items: center; font-weight: 600; font-size: 14px; margin-bottom: 12px; }
.hv .dk__m { padding: 12px 14px; border-radius: 12px; background: var(--stone); margin-top: 10px; font-size: 14px; }
.hv .dk__m b { display: block; font-weight: 600; }
.hv .dk__m small { color: var(--muted); }
@media (max-width: 600px) { .hv .dk { grid-template-columns: 1fr; } .hv .dk__col { border-left: 0; border-top: 1px solid var(--line); } .hv .dk__col:first-child { border-top: 0; } }

/* Form editor */
.hv .fe__bar { display: flex; gap: 10px; align-items: baseline; padding: 16px 22px; border-bottom: 1px solid var(--line); flex-wrap: wrap; font-size: 14px; }
.hv .fe__bar b { font: 600 22px/1 var(--display); }
.hv .fe__bar > span:nth-child(2) { color: var(--muted); font-family: var(--display); font-size: 16px; }
.hv .fe__gen { margin-left: auto; background: var(--navy); color: #fff; border-radius: 8px; padding: 6px 12px; font-weight: 500; font-size: 13px; }
.hv .fe__body { display: grid; grid-template-columns: 190px minmax(0,1fr); }
.hv .fe__rail { padding: 16px 12px; border-right: 1px solid var(--line); background: #fbfaf8; display: grid; gap: 4px; align-content: start; }
.hv .fe__part { display: flex; gap: 8px; align-items: center; padding: 7px 8px; border-radius: 8px; font-size: 13px; color: var(--ink-2); }
.hv .fe__part::before { content: ""; width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid #cfc8bd; flex: none; }
.hv .fe__part[data-done]::before { background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 7.2l2.3 2.3 4.7-5' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px; border-color: var(--ok); }
.hv .fe__part[data-on] { background: var(--navy-tint); color: var(--navy); font-weight: 600; }
.hv .fe__fields { padding: 20px 24px; display: grid; gap: 14px; }
.hv .fe__f span { display: block; color: var(--muted); font-size: 13px; margin-bottom: 4px; }
.hv .fe__f b { display: block; border: 1px solid #ddd6cb; border-radius: 9px; padding: 9px 12px; font-weight: 400; font-size: 14px; }
.hv .fe__f--seed b { border-color: var(--amber); background: var(--amber-tint); }
.hv .fe__f small { color: var(--amber); font-size: 12px; }
@media (max-width: 600px) { .hv .fe__body { grid-template-columns: 1fr; } .hv .fe__rail { display: none; } }

/* Filing */
.hv .fl__tabs { display: flex; gap: 6px; padding: 14px 18px; border-bottom: 1px solid var(--line); font-size: 14px; }
.hv .fl__tabs span { padding: 6px 12px; border-radius: 8px; color: var(--muted); }
.hv .fl__tabs span[data-on] { background: var(--navy-tint); color: var(--navy); font-weight: 600; }
.hv .fl__row { display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 12px; padding: 12px 20px; border-top: 1px solid #ECE8E2; font-size: 14px; }
.hv .fl__row:first-of-type { border-top: 0; }
.hv .fl__x { font-weight: 600; color: var(--vigil); text-align: center; }
.hv .fl__row b { font-weight: 600; display: block; }
.hv .fl__row small { color: var(--muted); }
.hv .fl__foot { padding: 14px 20px; border-top: 1px solid var(--line); background: var(--stone); }

/* Notices */
.hv .nt { padding: 8px 0; }
.hv .nt__h { padding: 14px 22px 6px; font: 600 12px/1 var(--ui); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.hv .nt__row { display: grid; grid-template-columns: 22px minmax(0,1fr) auto; gap: 14px; align-items: center; padding: 14px 22px; border-top: 1px solid #ECE8E2; font-size: 14px; }
.hv .nt__row:first-of-type { border-top: 0; }
.hv .nt__row b { display: block; font-weight: 600; }
.hv .nt__row small { color: var(--muted); }
.hv .nt__ck { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid #cfc8bd; }
.hv .nt__ck[data-done] { background: var(--navy); border-color: var(--navy); }
.hv .nt__act { color: var(--navy); font-weight: 500; }
.hv .nt__act--go { color: var(--vigil); }

/* Public Access File */
.hv .paf__row { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 14px 22px; border-top: 1px solid #ECE8E2; font-size: 14px; flex-wrap: wrap; }
.hv .paf__row:first-child { border-top: 0; }
.hv .paf__row b { font-weight: 600; }
.hv .pill--okl { --bg: var(--ok-tint); --fg: var(--ok); }
.hv .pill--no { --bg: var(--amber-tint); --fg: var(--amber); }

/* PERM */
.hv .pm { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; max-width: 1000px; margin-inline: auto; }
.hv .pm__col { background: #fff; border: 1px solid var(--line); border-radius: var(--r-stage); padding: 24px; box-shadow: var(--shadow-card); min-width: 0; }
.hv .pm__col h5 { margin: 0 0 12px; font: 500 24px/1.1 var(--display); color: var(--ink); }
.hv .pm__s { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; padding: 10px 0 10px 26px; border-top: 1px solid #ECE8E2; position: relative; font-size: 14px; }
.hv .pm__s::before { content: ""; position: absolute; left: 0; top: 12px; width: 15px; height: 15px; border-radius: 4px; border: 1.5px solid #cfc8bd; }
.hv .pm__s[data-done]::before { background: var(--ok); border-color: var(--ok); }
.hv .pm__s span { font-size: 12px; color: var(--plum); background: var(--plum-tint); border-radius: 6px; padding: 1px 6px; }
.hv .pm__s--note { color: var(--muted); }
.hv .pm__s--note::before { border-style: dashed; }
@media (max-width: 860px) { .hv .pm { grid-template-columns: 1fr; } }

/* Vigil */
.hv .vq { max-width: 820px; margin-inline: auto; display: grid; gap: 14px; }
.hv .vq__ask { justify-self: end; max-width: 80%; background: #2a4466; color: var(--on-dark); padding: 14px 18px; border-radius: 18px 18px 4px 18px; font-size: 16px; }
.hv .vq__ans { background: #22323F; border: 1px solid #384855; border-radius: 18px 18px 18px 4px; padding: 20px 22px; max-width: 88%; }
.hv .vq__ans p { margin: 0 0 14px; color: var(--on-dark); font-size: 16px; }
.hv .vq__src { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 0 0; border-top: 1px solid #384855; margin-top: 10px; font-size: 13px; }
.hv .vq__src span { color: #D9C193; font-weight: 600; }
.hv .vq__src small { color: var(--on-dark-2); }
.hv .vgrid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; margin-top: 56px; }
.hv .vgrid div { background: #22323F; border: 1px solid #384855; border-radius: 16px; padding: 22px; }
.hv .vgrid b { display: block; color: var(--on-dark); font-weight: 600; margin-bottom: 6px; }
.hv .vgrid span { color: var(--on-dark-2); font-size: 14px; }
.hv .vnote { max-width: 820px; margin: 48px auto 0; display: grid; gap: 14px; }
.hv .vnote p { margin: 0; color: var(--on-dark-2); font-size: 15px; }
.hv .vnote b { color: var(--on-dark); font-weight: 600; }
@media (max-width: 860px) { .hv .vgrid { grid-template-columns: 1fr; } .hv .vq__ask, .hv .vq__ans { max-width: 100%; } }

/* Bento: a full-width tile */
.hv .b--6 { grid-column: span 6; }
@media (max-width: 960px) { .hv .b--6 { grid-column: span 2; } }

/* Security */
.hv .sgrid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0; margin-top: 56px; border-top: 1px solid var(--line); }
.hv .sgrid div { padding: 24px 20px 24px 0; border-bottom: 1px solid var(--line); }
.hv .sgrid b { display: block; font-weight: 600; margin-bottom: 4px; }
.hv .sgrid span { color: var(--muted); font-size: 15px; }
@media (max-width: 860px) { .hv .sgrid { grid-template-columns: 1fr; } }
.hv .sec__more { margin-top: 32px; }
.hv .sec__more a { color: var(--navy); font-weight: 500; text-decoration: none; }
.hv .sec__note { color: var(--faint); font-size: 13px; margin-top: 12px; }
.hv .sec__note a { text-decoration: underline; }

/* Dusk grounds (2026-10-02): no pure white; light meets dark through a fade. */
.hv { --ground: #e9e4dc; --stone: #e0dad0; --stone-2: #d6cfc4; --line: #d9d2c7; }
/* ── Dark, animated hero desk (v2) ── the product's own dark tokens */
.hv .stage--dark { text-align: left; background: #171513; color: #f0ece6; box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 40px 120px -30px rgba(0,0,0,.7); position: relative; }
.hv .app--dark { position: relative; }
.hv .app--dark .app__rail { background: #1b1917; border-right-color: #2d2925; }
.hv .app--dark .app__firm, .hv .app--dark .app__group { color: #766e64; }
.hv .app--dark .app__nav { color: #bdb5a9; }
.hv .app--dark .app__nav[data-on] { background: #262220; color: #f0ece6; box-shadow: none; }
.hv .app--dark .app__search { background: #201d1a; border-color: #2d2925; color: #766e64; }
.hv .app--dark .app__me span:first-child { background: #4a443c; }
.hv .app--dark .tile, .hv .app--dark .today { background: #201d1a; border-color: #2d2925; }
.hv .app--dark .row { border-top-color: #2a2622; }
.hv .app--dark .row small, .hv .app--dark .today .eyebrow { color: #9a9186; }
.hv .app--dark .row time { color: #766e64; }
.hv .app--dark .tile__foot { color: #8fb3dd; }
.hv .app--dark .num--ok { color: #7fc08c; }
.hv .askv { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px 0 6px; border-radius: 999px; background: #22324a; color: #aecbe9; font-weight: 600; }
.hv .askv__mark { width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; background: #c96f1e; color: #fff; font: 600 12px/1 var(--display); }
.hv .sentchip { display: inline-flex; align-items: center; gap: 6px; margin-top: 5px; padding: 2px 8px; border-radius: 999px; background: #1b3122; color: #7fc08c; font-size: 11px; font-weight: 600; }
.hv .row--new { position: relative; }
.hv .toast { position: absolute; top: 58px; right: 22px; z-index: 3; background: #262220; border: 1px solid #3a352f; border-radius: 12px; padding: 10px 14px; display: grid; gap: 2px; font-size: 12.5px; box-shadow: 0 16px 40px -16px rgba(0,0,0,.7); max-width: 300px; }
.hv .toast b { color: #e0aa4e; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.hv .vscrim { position: absolute; inset: 0; background: rgba(10,9,8,.55); z-index: 4; }
.hv .vwin { position: absolute; z-index: 5; left: 50%; top: 56px; transform: translateX(-50%); width: min(580px, calc(100% - 32px)); background: #201d1a; border: 1px solid #3a352f; border-radius: 16px; box-shadow: 0 30px 80px -20px rgba(0,0,0,.8); display: flex; flex-direction: column; }
.hv .vwin__head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid #2d2925; font-size: 14px; }
.hv .vwin__on { color: #9a9186; font-size: 12.5px; }
.hv .vwin__x { margin-left: auto; color: #9a9186; font-size: 20px; line-height: 1; }
.hv .vwin__body { padding: 18px; display: grid; gap: 14px; }
.hv .vwin__q { justify-self: end; max-width: 85%; background: #22324a; color: #dce8f6; padding: 10px 14px; border-radius: 14px 14px 4px 14px; font-size: 14px; }
.hv .vwin__a { background: #262220; border-radius: 14px 14px 14px 4px; padding: 14px 16px; }
.hv .vwin__text { margin: 0; font-size: 14px; line-height: 1.6; color: #f0ece6; min-height: 1.6em; }
.hv .vwin__src { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 12px; padding-top: 10px; border-top: 1px solid #3a352f; font-size: 12.5px; }
.hv .vwin__src span { color: #D9C193; font-weight: 600; }
.hv .vwin__src small { color: #9a9186; }
.hv .vwin__ask { margin: 0 18px 18px; border: 1px solid #3a352f; border-radius: 10px; padding: 9px 12px; color: #766e64; font-size: 13px; }
.hv .deskbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 4px 0; color: #b8c2d0; font-size: 14px; text-align: left; }
.hv .deskbar b { color: #f3efe8; font-weight: 600; }
.hv .replay { height: 32px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.25); background: transparent; color: #f3efe8; font: 500 13px/1 var(--ui); cursor: pointer; }
.hv .replay:hover { background: rgba(255,255,255,.08); }
/* Motion: at rest every step is shown. While the scene plays, a step is
   hidden until its moment (data-step + .is-off). */
.hv .anim .is-off { opacity: 0; pointer-events: none; }
.hv .anim [data-step] { transition: opacity .45s ease, transform .45s ease; }
.hv .anim .toast.is-off { transform: translateY(-8px); }
.hv .anim .vwin.is-off { transform: translate(-50%, 12px); }
.hv .anim .row--new:not(.is-off) { animation: hv-rowin .6s ease both; }
@keyframes hv-rowin { from { background: rgba(143,179,221,.22); } to { background: transparent; } }
.hv .anim .askv.is-press { box-shadow: 0 0 0 3px rgba(143,179,221,.45); }
.hv .anim .askv.is-off { opacity: 1; }
@media (max-width: 900px) { .hv .vwin { top: 40px; } .hv .toast { right: 12px; } }
@media (max-width: 600px) { .hv .deskbar { flex-direction: column; align-items: flex-start; } }

/* ── Everything in CaseVigil: the feature index ── */
.hv .fx { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 56px 48px; margin-top: 64px; }
.hv .fx__g { min-width: 0; }
.hv .fx__h { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font: 500 26px/1.15 var(--display); letter-spacing: -.01em; color: var(--ink); }
.hv .fx__ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--c); flex: none; }
.hv .fx__ic svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hv .fx ul { list-style: none; margin: 0; padding: 0; }
.hv .fx li { padding: 12px 0; border-top: 1px solid var(--line); }
.hv .fx li b { display: block; font-weight: 600; font-size: 15px; }
.hv .fx li span { color: var(--muted); font-size: 14px; }
@media (max-width: 960px) { .hv .fx { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .hv .fx { grid-template-columns: 1fr; gap: 40px; } }
@media (prefers-reduced-motion: reduce) { .hv .anim .is-off { opacity: 1; } }

/* ── Dusk: dark and light meet through a fade, never a hard edge ── */
.hv .hero + .sec { background: linear-gradient(180deg, var(--navy-deep) 0, #3a4656 40px, var(--ground) 120px); }
.hv .sec--into-dark { background: linear-gradient(180deg, var(--stone) calc(100% - 140px), #5d6673 calc(100% - 60px), var(--navy-deep) 100%); }
.hv .sec--dark + .sec { background: linear-gradient(180deg, var(--navy-deep) 0, #4a5462 50px, var(--stone) 130px); }
.hv .panel, .hv .tile, .hv .formrow, .hv .b, .hv .pm__col { background: #fbfaf8; }

.hv .snap [data-step] { transition: none !important; }

/* ── Pricing and About (2026-10-02) ─────────────────────────────────────── */
.hv .phero--short { padding-block: 88px 104px; }
.hv .btn--ghost-line { color: var(--navy); border: 1px solid var(--line); background: #fbfaf8; }
.hv .btn--ghost-line:hover { border-color: var(--navy); }
/* plan cards; the featured one is the product's navy */
.hv .pcs { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
.hv .pc { background: #fbfaf8; border: 1px solid var(--line); border-radius: var(--r-stage); padding: 30px 26px; display: flex; flex-direction: column; gap: 6px; text-align: left; box-shadow: var(--shadow-card); min-width: 0; }
.hv .pc__name { margin: 0; font: 600 13px/1 var(--ui); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.hv .pc__price { margin: 14px 0 0; font: 500 52px/1 var(--display); letter-spacing: -.02em; color: var(--ink); }
.hv .pc__price span { font: 400 15px/1 var(--ui); color: var(--muted); letter-spacing: 0; margin-left: 4px; }
.hv .pc__billed { margin: 6px 0 0; color: var(--muted); font-size: 14px; }
.hv .pc__limit { margin: 18px 0 0; padding-top: 18px; border-top: 1px solid var(--line); font-weight: 600; }
.hv .pc__extra { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.hv .pc .btn { margin-top: auto; height: 44px; }
.hv .pc__limit + .btn, .hv .pc__extra + .btn { margin-top: 24px; }
.hv .pc--featured { background: var(--navy-deep); border-color: var(--navy-deep); color: var(--on-dark); box-shadow: var(--shadow-stage); }
.hv .pc--featured .pc__name, .hv .pc--featured .pc__billed, .hv .pc--featured .pc__price span { color: var(--on-dark-2); }
.hv .pc--featured .pc__price { color: #fff; }
.hv .pc--featured .pc__limit { border-top-color: rgba(255,255,255,.14); }
.hv .pc-notes { display: flex; gap: 12px 32px; justify-content: center; flex-wrap: wrap; margin-top: 28px; color: var(--muted); font-size: 15px; }
.hv .pc-notes b { color: var(--ink); font-weight: 600; }
@media (max-width: 1000px) { .hv .pcs { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .hv .pcs { grid-template-columns: 1fr; } }
/* the comparison table */
.hv .cmp { overflow-x: auto; }
.hv .cmp__t { width: 100%; border-collapse: collapse; min-width: 720px; font-size: 15px; }
.hv .cmp__t th, .hv .cmp__t td { padding: 16px 20px; text-align: left; border-top: 1px solid var(--line); vertical-align: top; }
.hv .cmp__t thead th { border-top: 0; font: 600 12px/1 var(--ui); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); padding-top: 20px; }
.hv .cmp__t tbody th { font-weight: 600; width: 34%; }
.hv .cmp__t th small { display: block; font-weight: 400; color: var(--muted); font-size: 13px; margin-top: 4px; }
.hv .cmp__t td.yes { color: var(--ok); font-weight: 600; }
.hv .cmp__t td.no { color: var(--faint); }
/* plan terms */
.hv .tgrid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0 40px; margin-top: 56px; border-top: 1px solid var(--line); }
.hv .tgrid div { padding: 24px 0; border-bottom: 1px solid var(--line); }
.hv .tgrid b { display: block; font-weight: 600; margin-bottom: 6px; }
.hv .tgrid span { color: var(--muted); font-size: 15px; }
@media (max-width: 860px) { .hv .tgrid { grid-template-columns: 1fr; } }
/* founders */
.hv .fd { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 1080px; margin-inline: auto; }
.hv .fd__card { background: #fbfaf8; border: 1px solid var(--line); border-radius: var(--r-stage); overflow: hidden; box-shadow: var(--shadow-card); display: flex; flex-direction: column; text-align: left; }
.hv .fd__photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 25%; display: block; }
.hv .fd__body { padding: 28px 30px 32px; }
.hv .fd__body h3 { margin: 0; font: 500 32px/1.1 var(--display); letter-spacing: -.01em; color: var(--ink); }
.hv .fd__cred { margin: 10px 0 0; color: var(--ink-2); font-size: 14px; }
.hv .fd__role { margin: 8px 0 16px; font: 600 12px/1.4 var(--ui); letter-spacing: .1em; text-transform: uppercase; color: var(--vigil); }
.hv .fd__body p:last-child { color: var(--muted); margin: 0; }
@media (max-width: 860px) { .hv .fd { grid-template-columns: 1fr; } }
/* the story, a real sequence on the dark band */
.hv .st { list-style: none; margin: 0 auto; padding: 0; max-width: 820px; display: grid; gap: 0; }
.hv .st__ch { display: grid; grid-template-columns: 56px minmax(0,1fr); gap: 20px; padding: 36px 0; border-top: 1px solid #384855; text-align: left; }
.hv .st__ch:first-child { border-top: 0; padding-top: 0; }
.hv .st__n { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid #D9C193; color: #D9C193; font: 500 20px/1 var(--display); }
.hv .st__lbl { font: 500 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #D9C193; }
.hv .st__ch h3 { margin: 10px 0 12px; font: 500 30px/1.15 var(--display); letter-spacing: -.01em; color: var(--on-dark); }
.hv .st__ch p { color: var(--on-dark-2); margin: 0 0 12px; font-size: 16px; }
.hv .st__ch a { color: #D9C193; }
.hv .st__disc { max-width: 820px; margin: 36px auto 0; color: #7f8ea3; font-size: 14px; text-align: center; }
.hv .sec--dark + .close { background: linear-gradient(180deg, var(--navy-deep) 0, #4a5462 50px, var(--ground) 130px) !important; }
.hv .phero--short .h-hero { font-size: clamp(40px, 5.6vw, 72px); max-width: 17ch; }
.hv .pc__price { font-size: 46px; white-space: nowrap; }
/* plan terms as a list: term left, explanation right; no row left half-empty */
.hv .tgrid { grid-template-columns: 1fr; gap: 0; max-width: 900px; margin-inline: auto; }
.hv .tgrid div { display: grid; grid-template-columns: 240px minmax(0,1fr); gap: 24px; }
.hv .tgrid b { margin: 0; }
@media (max-width: 700px) { .hv .tgrid div { grid-template-columns: 1fr; gap: 4px; } }
.hv #founders .h-sec { max-width: 22ch; }

/* ── Tools, Contact and the reference pages (2026-10-02) ────────────────── */
.hv .lede--wide { max-width: 64ch; font-size: 18px; }
.hv .jump--center { justify-content: center; margin-top: 28px; }
.hv .jump a { border-radius: 999px; background: #fbfaf8; border-color: var(--line); }
.hv .sec--tools, .hv .sec--contact, .hv .sec--ref { padding-block: 72px 112px; }
/* each tool, a card */
.hv .tools { gap: 24px; }
.hv .tool { background: #fbfaf8; border: 1px solid var(--line); border-radius: var(--r-stage); box-shadow: var(--shadow-card); }
.hv .tool__in { padding: 32px; border-right-color: var(--line); }
.hv .tool__out { padding: 32px; background: #f3efe8; }
.hv .tool h2 { font: 500 30px/1.1 var(--display); letter-spacing: -.01em; }
.hv .tool--tea .tool__incv { padding: 0 32px 26px; }
.hv .tools > .note { text-align: center; }
@media (max-width: 860px) { .hv .tool { grid-template-columns: 1fr; } .hv .tool__in { border-right: 0; border-bottom: 1px solid var(--line); } }
/* the demo request */
.hv .panel.cf { padding: 36px; box-shadow: var(--shadow-stage); }
.hv .cf h2 { font: 500 30px/1.1 var(--display); letter-spacing: -.01em; }
.hv .cf__next { margin: 4px 0 0; font: 500 30px/1.1 var(--display); letter-spacing: -.01em; }
.hv .demo aside { padding-top: 8px; }
.hv .nx { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 18px; counter-reset: nx; }
.hv .nx li { counter-increment: nx; position: relative; padding-left: 48px; color: var(--muted); font-size: 15px; }
.hv .nx li::before { content: counter(nx); position: absolute; left: 0; top: -2px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--navy-deep); color: #fff; font: 500 15px/1 var(--display); }
.hv .nx b { display: block; color: var(--ink); font-weight: 600; }
@media (max-width: 860px) { .hv .panel.cf { padding: 24px; } }
/* Privacy, Terms and Security: the text on a sheet */
.hv .phero--ref .updated { margin: 16px 0 0; color: var(--muted); font-size: 14px; }
.hv .phero--ref .h-hero { font-size: clamp(36px, 4.6vw, 60px); max-width: 20ch; }
.hv .sec--ref .legal { background: #fbfaf8; border: 1px solid var(--line); border-radius: var(--r-stage); box-shadow: var(--shadow-card); padding: 44px clamp(22px, 5vw, 64px) 52px; max-width: none; }
.hv .sec--ref .legal h2 { font: 500 26px/1.2 var(--display); letter-spacing: -.01em; }
.hv .toc { top: 92px; }
@media (max-width: 860px) { .hv .legal-wrap { grid-template-columns: 1fr; } .hv .toc { position: static; } }
/* the no-per-seat promise under the closing price line (2026-10-02) */
.hv .close-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 20px 0 0; }
.hv .close-pills span { padding: 8px 16px; border-radius: 999px; background: #fbfaf8; border: 1px solid var(--line); color: var(--ink-2); font-size: 14px; font-weight: 500; }


/* 10/08/2026: path2immigration.com colours site-wide (approved: "I like it ship it").
   Gold is too pale for small text on cream, so labels on light grounds take the
   deep gold; the display face is set heavier than Newsreader was. */
.hv .eyebrow { color: #8A6B2A; }
.hv .hero .eyebrow { color: #D9C193; }
.hv .h-hero, .hv .h-sec { font-weight: 650; letter-spacing: -.03em; }
.hv .h-hero i { font-style: normal; }
/* The product replica keeps CaseVigil's own look: it is the app, not the site. */
.hv .stage {
  --ink: #1a1714; --ink-2: #554e45; --muted: #776f64; --faint: #a89f93; --ground: #ffffff; --stone: #f6f4f0; --stone-2: #efebe4; --line: #e8e3db;
  --navy: #1f3a5f; --navy-deep: #0f1e31; --navy-tint: #eef2f7; --vigil: #c96f1e; --vigil-hover: #b05e14; --ok: #3f6b4a; --ok-tint: #e3eee5;
  --ui: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; font-family: var(--ui);
}
.hv .stage .btn--primary { color: #fff; }
/* Small capital labels in IBM Plex Mono, as on visavigilai.com (10/08/2026);
   the product replica keeps the app's own Inter labels. */
.hv .stage .eyebrow { font-family: var(--ui); font-weight: 600; }
