/* Landing page and lead-capture gate. Uses the tokens from report.css (navy theme, Geist, pills). */

/* Gate states, set on <html> by gate-state.js before first paint. */
html[data-gate=locked] :is(main,.footer-utilities,.share-dock,#chapter-nav,.nav-toggle){display:none!important}
html[data-gate=open] .landing{display:none}
/* Same load-in contract as the report: hidden until data, layout and fonts are ready (report.js), with
   the 4s failsafe if scripts never run. */
body.v3[data-load=loading] .landing{visibility:hidden;opacity:0;animation:v3-failsafe 0s 4s forwards}
body.v3[data-load=ready] .landing{transition:opacity .32s ease}

/* No glow in the hero: navy and the dot grid only. */
.landing{position:relative;overflow:hidden;background:linear-gradient(180deg,#1f2363 0%,#0b1e44 42%,#001a32 100%);padding:96px 0 120px}
.landing-bg{position:absolute;inset:0;pointer-events:none}
.landing-bg::before{content:"";position:absolute;inset:0;background-image:radial-gradient(#ffffff1f 1px,transparent 1.2px);background-size:14px 14px;-webkit-mask-image:radial-gradient(ellipse 60% 60% at 30% 25%,#000 10%,transparent 75%);mask-image:radial-gradient(ellipse 60% 60% at 30% 25%,#000 10%,transparent 75%)}

.landing-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(340px,.85fr);grid-template-areas:"head form" "stats form" "inside inside";column-gap:64px;row-gap:56px;align-items:start}
.landing-head{grid-area:head}
.landing-form{grid-area:form}
.landing-stats{grid-area:stats}
.landing-inside{grid-area:inside;padding-top:40px;border-top:1px solid var(--line)}

/* "Virtual Care 2026" never breaks, so the year stays on the line beside the form. The heading's size
   follows its own column (cqi), and "Virtual Care 2026" is about 7.5em wide, so 13cqi always fits. */
.landing-head{container-type:inline-size}
.landing-title{font-size:clamp(40px,6.2vw,96px);font-size:clamp(36px,13cqi,96px);line-height:.98;letter-spacing:-.045em}
.landing-title .title-line{display:block;white-space:nowrap}
.landing-title .title-line>span{color:var(--lavender);font-variant-numeric:lining-nums tabular-nums}
.landing-lede{max-width:560px;margin-top:28px;font-size:20px;line-height:1.4;color:#fff}
.landing-sub{max-width:560px;margin-top:14px;font-size:15px;color:var(--muted)}
.landing-sub strong{color:#fff;font-weight:500}

/* Split headings: SplitText wraps each line in a mask so words rise from below their own baseline. */
[data-split] .split-line{padding-bottom:.06em;margin-bottom:-.06em}

.landing-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid var(--line-strong);border-radius:14px;background:#00122899;overflow:hidden}
.lstat{margin:0;padding:22px 22px 24px;border-top:1px solid var(--line-strong);border-left:1px solid var(--line-strong);display:flex;flex-direction:column;gap:14px;min-height:150px;justify-content:space-between}
.lstat:nth-child(-n+2){border-top:0}
.lstat:nth-child(odd){border-left:0}
.lstat-num{font-size:clamp(40px,4.4vw,60px);letter-spacing:-.04em;font-weight:500;line-height:1;font-variant-numeric:tabular-nums}
.lstat figcaption{font-size:13px;color:var(--muted);max-width:26ch}

.form-card{position:relative;padding:28px 26px 22px;border:1px solid var(--line-strong);border-radius:18px;background:linear-gradient(180deg,#14284bf2,#0b1f3bf2);box-shadow:0 30px 80px -30px #000c,0 0 0 1px #ffffff08 inset}
.form-card::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:linear-gradient(160deg,#b493ff99,transparent 40%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.form-title{font-size:28px;letter-spacing:-.025em;line-height:1.1}
.form-help{margin-top:8px;font-size:14px;color:var(--muted)}
.form-shared{display:flex;flex-direction:column;gap:6px;margin:-4px 0 20px;padding:14px 16px;border-radius:12px;background:#823ffe24;border:1px solid #b493ff40}
.form-shared .eyebrow{margin:0;color:var(--lilac)}
.form-shared strong{font-size:15px;font-weight:500;line-height:1.35}
.form-slot{position:relative;margin-top:20px;min-height:320px}
.form-slot[hidden],.lead-form[hidden]{display:none}
/* On-brand lead form with floating labels. The placeholder is a single space, so :placeholder-shown
   tells an empty field from a filled one and the label rises once there's a value or focus. */
.lead-form{display:flex;flex-direction:column;gap:12px;margin-top:22px}
.field-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.field{position:relative}
.field input{width:100%;height:56px;padding:24px 16px 8px;border:1px solid var(--line-strong);border-radius:12px;background:#00122880;color:#fff;font:inherit;font-size:15px;line-height:1.2;transition:border-color .2s,background .2s,box-shadow .2s;-webkit-appearance:none;appearance:none}
.field input:hover{border-color:#ffffff4d}
.field input:focus{outline:none;border-color:var(--lilac);background:#0012289e;box-shadow:0 0 0 3px #9b65fe40}
.field label{position:absolute;left:17px;top:18px;font-size:15px;line-height:20px;color:var(--soft);pointer-events:none;transform-origin:0 0;transition:transform .2s var(--ease),color .2s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 34px)}
.field input:focus+label,.field input:not(:placeholder-shown)+label{transform:translateY(-10px) scale(.76);color:var(--muted)}
.field input:focus+label{color:var(--lilac)}
.field input:-webkit-autofill{-webkit-text-fill-color:#fff;-webkit-box-shadow:0 0 0 40px #13284a inset;caret-color:#fff}
.field input:-webkit-autofill+label{transform:translateY(-10px) scale(.76)}
.field.invalid input{border-color:#ff8a8a;box-shadow:none}
.field.invalid input:focus{box-shadow:0 0 0 3px #ff8a8a33}
.field.invalid label{color:#ffb4b4}
.field-error{margin:6px 2px 0;font-size:12px;color:#ffb4b4}
.lead-submit{justify-content:center;width:100%;min-height:52px;margin-top:6px;font-size:15px;background:var(--violet);border:1px solid #ffffff1f;box-shadow:0 10px 30px -12px #823ffecc}
.lead-submit:hover{background:#8f52ff}
.lead-submit svg{transition:transform .2s var(--ease)}
.lead-submit:hover svg{transform:translateX(3px)}
.lead-submit:disabled{opacity:.7;cursor:progress;transform:none}
.lead-consent{font-size:11px;line-height:1.5;color:var(--soft)}
.form-fallback{margin-top:20px;font-size:13px;color:var(--muted)}
/* Fallback only: HubSpot renders its own form here if an API submission is refused. */
.form-slot .hs-form-frame{width:100%}
.form-slot iframe{width:100%!important;color-scheme:normal}
.form-loading{position:absolute;inset:0;display:grid;place-items:center;padding:24px;text-align:center;font-size:13px;color:var(--soft);border:1px dashed var(--line-strong);border-radius:12px}
.form-slot[aria-busy=false] .form-loading{display:none}
.form-done{margin-top:20px;padding:18px;border-radius:12px;background:#5fc27522;border:1px solid #86e09a55;color:#d9f6de;font-size:15px}
.form-note{margin-top:16px;font-size:11px;color:var(--soft)}
.form-loading a,.form-note a{text-decoration:underline;text-underline-offset:2px}

.landing-h2{font-size:clamp(30px,3.2vw,44px);letter-spacing:-.03em;line-height:1.05;margin-bottom:28px}
.inside-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.inside-list li{display:flex;flex-direction:column;gap:8px;padding:18px 18px 20px;border:1px solid var(--line-strong);border-radius:14px;background:#0e244299;min-height:170px}
.inside-list small{font-family:'Geist Mono',monospace;font-size:10px;color:var(--lilac)}
.inside-list strong{font-size:16px;font-weight:500}
.inside-list span{font-size:13px;color:var(--muted)}
.landing-foot{margin-top:20px;font-size:11px;color:var(--soft)}

@media (max-width:1080px){
  .inside-list{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
  .landing{padding:56px 0 88px}
  .landing-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "form" "stats" "inside";row-gap:40px}
  .landing-form{position:static}
  .landing-lede{font-size:18px}
  .inside-list{grid-template-columns:minmax(0,1fr)}
  .inside-list li{min-height:0}
}
@media (max-width:480px){
  .form-card{padding:22px 18px 18px}
  .field-row{grid-template-columns:minmax(0,1fr)}
  .lstat{padding:16px 16px 18px;min-height:128px}
}
@media (prefers-reduced-motion:reduce){
  body.v3[data-load=loading] .landing{animation:v3-failsafe 0s 4s forwards!important}
}
@media print{
  html[data-gate=locked] .landing{display:block}
}

/* ---- Client review round, Nov 4 2026 (#32, #33) ---- */
/* The stats sit higher so some show before scrolling, and the dots fade out behind them. */
@media screen{
  .landing{padding-top:64px}
  .landing-grid{row-gap:36px}
  .landing-sub.landing-more{margin-top:10px}
  .landing-stats{background:#001228f0;box-shadow:0 0 80px 50px #0b1d4599}
  .lstat{padding:18px 20px 20px;gap:10px}
  .lstat-num{font-size:clamp(36px,3.8vw,52px)}
}
@media screen and (max-width:760px){.landing{padding-top:56px}}

/* ---- Client review round, Nov 5 2026 (#39) ---- */
/* The dot grid fades out behind the "What's inside" cards too, as it does behind the stats: the list
   (cards and the gaps between them) sits on solid navy with a soft halo. */
@media screen{
  .inside-list{border-radius:14px;background:#001a32f2;box-shadow:0 0 70px 40px #001a32bf}
  .inside-list li{background:#0e2442}
}