/* AGC: Version 3 — clean, light, compact. One sans family, lifted surfaces, one travelling pill per picker, springs only. */
@font-face{font-family:Inter;src:url('./inter-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url('./inter-latin-500-normal.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Inter;src:url('./inter-latin-600-normal.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Inter;src:url('./inter-latin-700-normal.woff2') format('woff2');font-weight:700;font-display:swap}

/* ---------- Tokens (ramps generated in OKLCH from the logo: aqua H184 → blue H242) ---------- */
:root{
  color-scheme:light;
  --accent-50:#ECFAF9;--accent-100:#D7F4F3;--accent-200:#AFE7E7;--accent-300:#71D3D9;--accent-400:#00B6C7;
  --accent-500:#0093AA;--accent-600:#007596;--accent-700:#005E83;--accent-800:#00496E;--accent-900:#003354;--accent-950:#00223C;
  --neutral-0:#FFFFFF;--neutral-50:#F7FAFB;--neutral-100:#EFF3F6;--neutral-200:#E0E6EA;--neutral-300:#CDD5D9;--neutral-400:#A2ABB0;
  --neutral-500:#7D868C;--neutral-600:#606B71;--neutral-700:#49545B;--neutral-800:#2E3B43;--neutral-900:#10222B;--neutral-950:#051A24;
  --success-50:#EFFAF4;--success-600:#007F52;--success-700:#006842;
  --danger-50:#FFF4F3;--danger-600:#C31A26;--danger-700:#A50118;
  --info-100:#E3EEFF;--info-700:#1F4FA0;

  --bg-canvas:var(--accent-50);--bg-surface:var(--neutral-0);--bg-subtle:var(--neutral-100);--bg-pressed:var(--neutral-200);
  --border-subtle:var(--neutral-200);--border-control:var(--neutral-500);
  --text-primary:var(--neutral-950);--text-secondary:var(--neutral-700);--text-tertiary:var(--neutral-600);
  --text-link:var(--accent-700);--text-on-accent:var(--neutral-0);
  --accent-solid:var(--accent-600);--accent-hover:var(--accent-700);--accent-subtle:var(--accent-100);--accent-text:var(--accent-800);
  --hero-top:var(--accent-600);--hero-bottom:var(--accent-800);--focus-ring:var(--accent-600);

  --space-0-5:2px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;
  --space-10:40px;--space-12:48px;--space-16:64px;--space-20:80px;
  --gutter:16px;--section-pad:40px;--container:1120px;--control-height:48px;--cta-height:56px;--size-tap-min:48px;
  --radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:24px;--radius-full:9999px;

  --ink:11 43 56;
  --shadow-1:0 1px 2px 0 rgb(var(--ink)/.10),0 3px 8px -2px rgb(var(--ink)/.10);
  --shadow-2:0 2px 4px -1px rgb(var(--ink)/.10),0 10px 22px -6px rgb(var(--ink)/.18);
  --shadow-3:0 4px 8px -2px rgb(var(--ink)/.12),0 18px 36px -10px rgb(var(--ink)/.24);
  --shadow-4:0 8px 16px -4px rgb(var(--ink)/.14),0 28px 56px -12px rgb(var(--ink)/.30);
  --shadow-5:0 12px 24px -6px rgb(var(--ink)/.16),0 40px 80px -16px rgb(var(--ink)/.36);
  --shadow-glow:0 2px 5px -1px color-mix(in srgb,var(--accent-solid) 30%,transparent),0 10px 24px -6px color-mix(in srgb,var(--accent-solid) 45%,transparent);
  --shadow-glow-press:0 1px 2px 0 color-mix(in srgb,var(--accent-solid) 28%,transparent),0 4px 10px -4px color-mix(in srgb,var(--accent-solid) 36%,transparent);
  --shadow-bar-top:0 1px 0 0 rgb(var(--ink)/.06),0 10px 24px -12px rgb(var(--ink)/.24);
  --shadow-bar-bottom:0 -1px 0 0 rgb(var(--ink)/.06),0 -10px 28px -14px rgb(var(--ink)/.24);
  --shadow-highlight:inset 0 1px 0 0 rgb(255 255 255/.7);
  --shadow-inset:inset 0 1px 3px 0 rgb(var(--ink)/.10);

  --duration-fade:150ms;--ease-standard:cubic-bezier(.2,0,0,1);--ease-enter:cubic-bezier(.05,.7,.1,1);
  --scale-press:.97;--scale-enter:.96;--depth-enter:16px;--depth-lift:2px;--blur-glass:16px;--blur-swap:1.5px;--opacity-glass:.8;
  --stagger-step:40ms;--stagger-cap:8;
  --transition-state:150ms var(--ease-standard);
  --spring-snappy-duration:320ms;--spring-snappy-easing:linear(0,0.03,0.101,0.195,0.297,0.4,0.496,0.584,0.662,0.728,0.785,0.832,0.87,0.901,0.926,0.946,0.961,0.972,0.981,0.987,0.992,0.996,0.998,0.999,1,1.001,1.001,1.002,1.002,1.001,1.001,1.001,1.001,1.001,1.001,1.001,1,1,1,1);
  --spring-smooth-duration:450ms;--spring-smooth-easing:linear(0,0.024,0.082,0.159,0.245,0.331,0.415,0.493,0.564,0.628,0.684,0.733,0.776,0.812,0.843,0.869,0.891,0.91,0.926,0.939,0.95,0.959,0.966,0.972,0.977,0.981,0.985,0.988,0.99,0.992,0.993,0.995,0.996,0.996,0.997,0.998,0.998,0.998,0.999,1);
  --spring-morph-duration:560ms;--spring-morph-easing:linear(0,0.031,0.106,0.203,0.31,0.416,0.515,0.605,0.683,0.75,0.807,0.853,0.89,0.919,0.942,0.96,0.973,0.983,0.99,0.995,0.998,1.001,1.002,1.003,1.003,1.003,1.003,1.003,1.002,1.002,1.002,1.001,1.001,1.001,1.001,1.001,1,1,1,1);
  --spring-lead-duration:300ms;--spring-lead-easing:linear(0,0.031,0.106,0.203,0.31,0.416,0.515,0.605,0.683,0.75,0.807,0.853,0.89,0.919,0.942,0.96,0.973,0.983,0.99,0.995,0.998,1.001,1.002,1.003,1.003,1.003,1.003,1.003,1.002,1.002,1.002,1.001,1.001,1.001,1.001,1.001,1,1,1,1);
  --spring-trail-duration:480ms;--spring-trail-easing:linear(0,0.026,0.089,0.172,0.264,0.357,0.445,0.527,0.601,0.666,0.723,0.772,0.813,0.848,0.877,0.901,0.92,0.937,0.95,0.96,0.969,0.976,0.981,0.985,0.989,0.991,0.993,0.995,0.996,0.997,0.998,0.998,0.999,0.999,0.999,1,1,1,1,1);
}
@supports not (transition-timing-function:linear(0,1)){
  :root{--spring-snappy-easing:var(--ease-standard);--spring-smooth-easing:var(--ease-standard);--spring-morph-easing:var(--ease-standard);
    --spring-lead-easing:var(--ease-standard);--spring-trail-easing:var(--ease-standard)}
}
@media (min-width:768px){:root{--gutter:24px;--section-pad:56px}}
@media (min-width:1024px){:root{--gutter:32px;--section-pad:72px}}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:72px}
body{margin:0;background:var(--bg-canvas);color:var(--text-primary);font:400 1rem/1.5rem Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3,p,figure,ol{margin:0}
ol{padding:0;list-style:none}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer}
a,button,summary,input,label{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.icon-sprite{position:absolute;width:0;height:0;overflow:hidden}
.icon{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.wrap{width:100%;max-width:calc(var(--container) + var(--gutter) * 2);margin-inline:auto;padding-inline:var(--gutter)}
.skip-link{position:fixed;left:var(--gutter);top:-64px;z-index:80;background:var(--bg-surface);color:var(--text-primary);padding:12px 16px;border-radius:var(--radius-md);box-shadow:var(--shadow-3)}
.skip-link:focus{top:12px}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-block-size:var(--control-height);min-inline-size:var(--size-tap-min);
  padding:12px 20px;border:0;border-radius:var(--radius-md);font:600 1rem/1.5rem Inter,system-ui,sans-serif;text-align:center;overflow-wrap:anywhere;
  transition:background-color var(--transition-state),color var(--transition-state),
    box-shadow var(--spring-snappy-duration) var(--spring-snappy-easing),transform var(--spring-snappy-duration) var(--spring-snappy-easing)}
.btn:active{transform:scale(var(--scale-press))}
@media (hover:hover){.btn:hover:not(:active):not(:disabled){transform:translateY(calc(var(--depth-lift) * -1))}}
.btn-primary{background:var(--accent-solid);color:var(--text-on-accent);box-shadow:var(--shadow-glow),var(--shadow-highlight)}
.btn-primary:hover{background:var(--accent-hover)}
.btn-primary:active{box-shadow:var(--shadow-glow-press)}
.btn-light{background:var(--neutral-0);color:var(--accent-800);box-shadow:0 2px 5px -1px rgb(0 20 40/.25),0 12px 28px -8px rgb(0 20 40/.45)}
.btn-glass{background:rgb(255 255 255/.12);color:var(--text-on-accent);box-shadow:inset 0 0 0 1px rgb(255 255 255/.28)}
.btn-glass:hover{background:rgb(255 255 255/.2)}
.icon-btn{display:inline-grid;place-items:center;inline-size:var(--size-tap-min);block-size:var(--size-tap-min);border:0;border-radius:var(--radius-full);
  background:var(--bg-surface);color:var(--text-primary);box-shadow:var(--shadow-2),var(--shadow-highlight);
  transition:transform var(--spring-snappy-duration) var(--spring-snappy-easing)}
.icon-btn:active{transform:scale(.92)}

/* ---------- Top bar (glass deepens with scroll; brand ink morphs from white to navy) ---------- */
.top-bar{position:sticky;top:0;z-index:40;--td-scroll:0;
  background:color-mix(in srgb,color-mix(in srgb,var(--bg-surface) calc(var(--td-scroll) * 100%),var(--hero-top)) calc(var(--opacity-glass) * var(--td-scroll) * 100%),transparent);
  -webkit-backdrop-filter:blur(calc(var(--blur-glass) * var(--td-scroll)));backdrop-filter:blur(calc(var(--blur-glass) * var(--td-scroll)));
  color:color-mix(in srgb,var(--text-primary) calc(var(--td-scroll) * 100%),var(--text-on-accent))}
.top-bar::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:var(--shadow-bar-top);opacity:var(--td-scroll)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.top-bar{background:color-mix(in srgb,var(--bg-surface) calc(var(--td-scroll) * 100%),var(--hero-top))}}
.top-bar-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);block-size:64px}
.brand{display:inline-flex;align-items:center;gap:10px;min-block-size:var(--size-tap-min)}
.brand-symbol{inline-size:20px;block-size:36px}
.brand-wordmark{display:block;inline-size:104px;block-size:9px;background:currentColor;
  -webkit-mask:url('./skydiet-wordmark-white.svg') center/contain no-repeat;mask:url('./skydiet-wordmark-white.svg') center/contain no-repeat}
.top-nav{display:flex;align-items:center;gap:var(--space-1)}
.top-link{display:none;align-items:center;min-block-size:var(--size-tap-min);padding-inline:12px;border-radius:var(--radius-sm);font:500 .875rem/1.25rem Inter,sans-serif;opacity:.86}
.top-link:hover{opacity:1}
.btn-bar{min-block-size:44px;padding:8px 14px;font-size:.875rem;line-height:1.25rem;
  background:color-mix(in srgb,var(--accent-solid) calc(var(--td-scroll) * 100%),rgb(255 255 255/.16));color:var(--text-on-accent);
  box-shadow:inset 0 0 0 1px rgb(255 255 255/calc(.3 - var(--td-scroll) * .3))}
.btn-bar{white-space:nowrap}
@media (max-width:359px){.brand-wordmark{inline-size:84px;block-size:8px}.btn-bar{padding-inline:12px}}
@media (min-width:900px){.top-link{display:inline-flex}.btn-bar{margin-inline-start:var(--space-2)}}

/* ---------- Hero plane + overlapping lead card ---------- */
.hero{background:linear-gradient(to bottom,var(--hero-top),var(--hero-bottom));color:var(--text-on-accent);
  border-end-start-radius:var(--radius-xl);border-end-end-radius:var(--radius-xl);margin-block-start:-64px;
  padding-block:calc(64px + var(--space-8)) 120px;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 50% at 85% 0%,rgb(255 255 255/.06),transparent 70%)}
.hero-inner{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-4)}
.hero-chip{display:inline-flex;align-items:center;gap:var(--space-2);min-block-size:32px;padding:6px 12px;border-radius:var(--radius-full);
  background:rgb(255 255 255/.12);box-shadow:inset 0 0 0 1px rgb(255 255 255/.22);font:500 .8125rem/1.25rem Inter,sans-serif}
.hero-chip .icon{inline-size:16px;block-size:16px;stroke-width:2.25}
.hero-chip-dot{inline-size:8px;block-size:8px;border-radius:50%;background:var(--accent-200);box-shadow:0 0 0 3px rgb(175 231 231/.25)}
.hero h1{font:600 2.25rem/2.75rem Inter,sans-serif;letter-spacing:-.022em;max-inline-size:15ch;text-wrap:balance}
.hero-lead{font:400 1.125rem/1.75rem Inter,sans-serif;color:rgb(255 255 255/.86);max-inline-size:34ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-block-start:var(--space-2);inline-size:100%}
.hero-actions .btn{flex:1 1 220px;min-block-size:var(--cta-height)}
.over-hero{position:relative;z-index:1;margin-block-start:-88px}
.lead-card{position:relative;padding:var(--space-2);border-radius:var(--radius-xl);background:var(--bg-surface);box-shadow:var(--shadow-4),var(--shadow-highlight)}
.lead-screen{position:relative;aspect-ratio:1366/768;overflow:hidden;border-radius:var(--radius-lg);container-type:inline-size;background:var(--neutral-100)}
.lead-screen>img{inline-size:100%;block-size:100%;object-fit:cover}
.lead-screen .patient-chat-panel{pointer-events:none}
.lead-phone{position:absolute;inset-inline-end:-6px;inset-block-end:28px;inline-size:23%;max-inline-size:200px;aspect-ratio:750/1500;padding:3px;
  border-radius:18px;background:var(--neutral-900);box-shadow:var(--shadow-4);overflow:hidden}
.lead-phone img{inline-size:100%;block-size:100%;object-fit:cover;object-position:top;border-radius:15px}
.demo-note{padding:var(--space-2) var(--space-2) 0;font:500 .75rem/1rem Inter,sans-serif;letter-spacing:.01em;color:var(--text-tertiary)}
@media (min-width:768px){
  .hero h1{font-size:3rem;line-height:3.5rem}
  .hero-actions .btn{flex:0 0 auto}
  .lead-phone{inset-inline-end:-20px;inset-block-end:40px;padding:5px;border-radius:28px}
  .lead-phone img{border-radius:23px}
}
@media (min-width:1024px){
  .hero{padding-block-end:160px}
  .hero-inner{align-items:center;text-align:center}
  .hero h1{font-size:3.5rem;line-height:4rem;max-inline-size:18ch}
  .hero-actions{justify-content:center}
  .over-hero{margin-block-start:-128px;max-inline-size:1040px}
  .lead-card{padding:var(--space-3)}
  .lead-phone{inset-inline-end:-48px}
}

/* ---------- Sections ---------- */
.section{padding-block:var(--section-pad) 0}
#how{padding-block-start:var(--space-10)}
.section-head{display:flex;flex-direction:column;gap:var(--space-2);margin-block-end:var(--space-4)}
.kicker{display:inline-flex;align-items:center;gap:var(--space-2);font:600 .875rem/1.25rem Inter,sans-serif;color:var(--text-link)}
.kicker-num{display:inline-grid;place-items:center;inline-size:24px;block-size:24px;border-radius:var(--radius-full);
  background:var(--accent-solid);color:var(--text-on-accent);font-size:.75rem;font-variant-numeric:tabular-nums;box-shadow:var(--shadow-glow)}
.section h2,.cta-plane h2{font:600 1.75rem/2.25rem Inter,sans-serif;letter-spacing:-.02em;text-wrap:balance}
.lead{font:400 1.0625rem/1.625rem Inter,sans-serif;color:var(--text-secondary);max-inline-size:44ch}
.card{background:var(--bg-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-2),var(--shadow-highlight)}
@media (forced-colors:active){.card,.lead-card,.screen-dialog{border:1px solid CanvasText}}
@media (min-width:1024px){
  .section h2,.cta-plane h2{font-size:2.25rem;line-height:2.75rem}
  .feature{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--space-12);align-items:start}
  .feature .section-head{margin:0;position:sticky;top:112px;padding-block-start:var(--space-6)}
  #patient .feature{grid-template-columns:minmax(0,6fr) minmax(0,6fr)}
}

/* ---------- How it works: one grouped lifted list ---------- */
.step-list{overflow:hidden}
.step-list li+li{border-block-start:1px solid var(--border-subtle)}
.step-row{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4);min-block-size:72px;
  transition:background-color var(--transition-state),transform var(--spring-snappy-duration) var(--spring-snappy-easing)}
.step-row:hover{background:var(--neutral-50)}
.step-row:active{background:var(--bg-subtle);transform:scale(.99)}
.tile{display:grid;place-items:center;inline-size:44px;block-size:44px;border-radius:var(--radius-md);flex:none}
.tile .icon{inline-size:22px;block-size:22px}
.tile-accent{background:var(--accent-subtle);color:var(--accent-text)}
.tile-info{background:var(--info-100);color:var(--info-700)}
.tile-solid{background:var(--accent-solid);color:var(--text-on-accent);box-shadow:var(--shadow-glow)}
.step-text{display:flex;flex-direction:column;gap:2px;min-inline-size:0}
.step-text b{font:600 1.0625rem/1.5rem Inter,sans-serif}
.step-text span{font:400 .9375rem/1.375rem Inter,sans-serif;color:var(--text-secondary)}
.chevron{margin-inline-start:auto;color:var(--text-tertiary)}
@media (min-width:1024px){
  .step-list{display:grid;grid-template-columns:repeat(3,1fr)}
  .step-list li+li{border-block-start:0;border-inline-start:1px solid var(--border-subtle)}
  .step-row{flex-direction:column;align-items:flex-start;padding:var(--space-6);block-size:100%}
  .step-row .chevron{display:none}
}

/* ---------- Tour card: picker + screen + caption ---------- */
.tour{padding:var(--space-2);display:flex;flex-direction:column;gap:var(--space-2)}
.picker{position:relative;display:flex;flex-wrap:wrap;gap:var(--space-1);padding:var(--space-1);border-radius:var(--radius-md);
  background:var(--bg-subtle);box-shadow:var(--shadow-inset)}
.picker>button{position:relative;z-index:1;flex:1 1 var(--picker-basis);min-inline-size:min-content;min-block-size:44px;padding:8px 10px;border:0;border-radius:var(--radius-sm);
  background:transparent;color:var(--text-secondary);font:500 .875rem/1.25rem Inter,sans-serif;white-space:nowrap;
  transition:color var(--spring-snappy-duration) var(--spring-snappy-easing),font-weight var(--spring-snappy-duration) var(--spring-snappy-easing)}
.picker{--picker-basis:30%}
.picker[data-picker="site"]{--picker-basis:20%}
@media (max-width:359px){.picker,.picker[data-picker="site"]{--picker-basis:40%}}
@media (min-width:1024px){.picker[data-picker="work"]{--picker-basis:15%}}
.picker>button[aria-checked="true"]{color:var(--text-on-accent);font-weight:600}
.picker:not([data-measured])>button[aria-checked="true"]{background:var(--accent-solid)}
.picker{--td-left-d:var(--spring-trail-duration);--td-left-e:var(--spring-trail-easing);--td-right-d:var(--spring-lead-duration);--td-right-e:var(--spring-lead-easing);
  --td-top-d:var(--spring-trail-duration);--td-top-e:var(--spring-trail-easing);--td-bottom-d:var(--spring-lead-duration);--td-bottom-e:var(--spring-lead-easing)}
.picker[data-dir-x="left"]{--td-left-d:var(--spring-lead-duration);--td-left-e:var(--spring-lead-easing);--td-right-d:var(--spring-trail-duration);--td-right-e:var(--spring-trail-easing)}
.picker[data-dir-y="up"]{--td-top-d:var(--spring-lead-duration);--td-top-e:var(--spring-lead-easing);--td-bottom-d:var(--spring-trail-duration);--td-bottom-e:var(--spring-trail-easing)}
.picker-pill{position:absolute;z-index:0;visibility:hidden;pointer-events:none;border-radius:var(--radius-sm);background:var(--accent-solid);
  box-shadow:var(--shadow-glow),inset 0 1px 0 0 rgb(255 255 255/.22);
  left:var(--td-indicator-left,0);right:var(--td-indicator-right,0);top:var(--td-indicator-top,0);bottom:var(--td-indicator-bottom,0);
  transition:left var(--td-left-d) var(--td-left-e),right var(--td-right-d) var(--td-right-e),top var(--td-top-d) var(--td-top-e),bottom var(--td-bottom-d) var(--td-bottom-e)}
.picker[data-measured] .picker-pill{visibility:visible}
.picker[data-instant] .picker-pill{transition:none}

.screen-frame{position:relative;border-radius:var(--radius-md);overflow:hidden;background:var(--neutral-100);box-shadow:inset 0 0 0 1px var(--border-subtle)}
.expand-btn{position:absolute;inset-inline-end:var(--space-2);inset-block-end:var(--space-2);z-index:3}
.demo-canvas{position:relative;inline-size:100%;aspect-ratio:1366/768;container-type:inline-size;overflow:hidden;background:#edf5fc}
.demo-canvas>img{display:block;inline-size:100%;block-size:auto;max-inline-size:none}
.demo-canvas>.journey-screen{position:absolute;inset:0;inline-size:100%;block-size:100%;aspect-ratio:auto}
.demo-canvas .scene-cursor{display:none!important}
.demo-canvas .patient-form-phone{transform:none!important}
.demo-canvas .sf6-root,.demo-canvas .journey-screen{pointer-events:none}
.demo-canvas .journey-screen *{animation:none!important;transition:none!important}

.caption{position:relative;padding:var(--space-2) var(--space-2) var(--space-3);min-block-size:76px}
.caption h3{font:600 1.0625rem/1.5rem Inter,sans-serif}
.caption p{font:400 .9375rem/1.375rem Inter,sans-serif;color:var(--text-secondary);margin-block-start:2px}
.caption-center{text-align:center;min-block-size:64px}
.caption-count{font:600 .75rem/1rem Inter,sans-serif;letter-spacing:.01em;color:var(--text-link);font-variant-numeric:tabular-nums}
.caption-center p{color:var(--text-primary);font-weight:500;margin-block-start:var(--space-1)}
.swap-in{animation:swap-in var(--spring-snappy-duration) var(--spring-snappy-easing) calc(var(--duration-fade) / 2) backwards}
@keyframes swap-in{from{opacity:0;filter:blur(var(--blur-swap));transform:translateY(calc(var(--depth-enter) / 2))}}
.screen-in{animation:screen-in var(--spring-morph-duration) var(--spring-morph-easing) backwards}
@keyframes screen-in{from{opacity:0;transform:translateX(calc(var(--td-slide,1) * var(--depth-enter) * 1.5)) scale(.98)}}

/* Patient phone */
.patient-stage{display:grid;place-items:center;padding:var(--space-5) 0 var(--space-2);touch-action:pan-y pinch-zoom;user-select:none;-webkit-user-select:none;
  background:radial-gradient(70% 60% at 50% 55%,var(--accent-100),transparent 70%)}
.phone-shell{position:relative;inline-size:min(224px,62vw);aspect-ratio:387/824;padding:6px;border-radius:36px;background:var(--neutral-900);
  box-shadow:var(--shadow-4),inset 0 0 0 1px rgb(255 255 255/.12);overflow:hidden}
.patient-phone{position:absolute;top:6px;left:6px;inline-size:375px;block-size:812px;overflow:hidden;border-radius:30px;transform-origin:top left;
  transform:scale(var(--td-phone-scale,.63));background:#edf6fe;pointer-events:none}
.patient-phone .ps-screen *{animation:none!important;transition:none!important}
@media (min-width:1024px){.phone-shell{inline-size:270px}}

/* ---------- FAQ: one grouped surface ---------- */
.faq{overflow:hidden}
.faq details+details{border-block-start:1px solid var(--border-subtle)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);min-block-size:56px;padding:var(--space-4);
  list-style:none;cursor:pointer;font:600 1rem/1.5rem Inter,sans-serif;transition:background-color var(--transition-state)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{background:var(--neutral-50)}
.faq summary .icon{color:var(--text-link);transition:transform var(--spring-snappy-duration) var(--spring-snappy-easing)}
.faq details[open] summary .icon{transform:rotate(45deg)}
.faq details>p{padding:0 var(--space-4) var(--space-4);color:var(--text-secondary);font-size:.9375rem;line-height:1.5rem;
  animation:swap-in var(--spring-snappy-duration) var(--spring-snappy-easing) backwards}

/* ---------- Waitlist plane ---------- */
.cta-plane{margin-block-start:var(--section-pad);padding-block:var(--space-10) var(--space-8);color:var(--text-on-accent);
  background:linear-gradient(to bottom,var(--hero-top),var(--hero-bottom));border-start-start-radius:var(--radius-xl);border-start-end-radius:var(--radius-xl)}
.cta-inner{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);text-align:center}
.cta-plane h2{max-inline-size:18ch}
.form-card{inline-size:100%;max-inline-size:440px;padding:var(--space-5);text-align:start;color:var(--text-primary);box-shadow:var(--shadow-4),var(--shadow-highlight)}
.form-body{display:flex;flex-direction:column;gap:var(--space-2)}
.form-card label{font:500 .875rem/1.25rem Inter,sans-serif;color:var(--text-secondary)}
.form-card input[type=email]{block-size:var(--cta-height);padding:0 var(--space-4);border:1px solid var(--border-control);border-radius:var(--radius-md);
  background:var(--bg-surface);font-size:1rem;box-shadow:var(--shadow-inset);transition:border-color var(--transition-state)}
.form-card input[type=email]:focus-visible{outline-offset:0;border-color:var(--accent-solid)}
.form-card input[aria-invalid=true]{border-color:var(--danger-600)}
.form-card .btn-primary{min-block-size:var(--cta-height);margin-block-start:var(--space-1);position:relative}
.form-card .btn-primary:disabled{cursor:progress}
.spinner{position:absolute;inline-size:20px;block-size:20px;border-radius:50%;border:2px solid rgb(255 255 255/.35);border-top-color:#fff;opacity:0;animation:spin .8s linear infinite}
.is-loading .btn-label{opacity:0;transition:opacity var(--duration-fade) var(--ease-standard)}
.is-loading .spinner{opacity:1;transition:opacity var(--duration-fade) var(--ease-standard) calc(var(--duration-fade) / 2)}
@keyframes spin{to{transform:rotate(1turn)}}
.form-detail{font:400 .8125rem/1.25rem Inter,sans-serif;color:var(--text-tertiary);text-align:center}
.form-status{font:500 .9375rem/1.375rem Inter,sans-serif;text-align:center;margin-block-start:var(--space-3)}
.form-status:empty{display:none}
.form-status[data-tone=danger]{color:var(--danger-700)}
.form-status[data-tone=success]{color:var(--success-700)}
.form-status[data-tone=info]{color:var(--text-secondary)}
.honey-field{position:absolute;left:-9999px;inline-size:1px;block-size:1px;overflow:hidden}
.form-done{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);padding-block:var(--space-2)}
.form-done[hidden]{display:none}
.countdown{display:grid;grid-template-columns:repeat(4,minmax(0,72px));gap:var(--space-2);margin-block-start:var(--space-2)}
.countdown>div{display:flex;flex-direction:column;align-items:center;gap:2px;padding:var(--space-2) 0;border-radius:var(--radius-md);
  background:rgb(255 255 255/.1);box-shadow:inset 0 0 0 1px rgb(255 255 255/.16)}
.countdown b{font:600 1.5rem/2rem Inter,sans-serif;font-variant-numeric:tabular-nums}
.countdown span{font:500 .75rem/1rem Inter,sans-serif;color:rgb(255 255 255/.8)}

/* ---------- Success flourish (server-confirmed only) ---------- */
.check-wrap{position:relative;display:grid;place-items:center;inline-size:64px;block-size:64px}
.check-disc{display:grid;place-items:center;inline-size:64px;block-size:64px;border-radius:50%;background:var(--success-600);color:#fff;
  box-shadow:var(--shadow-2),var(--shadow-highlight);animation:pop var(--spring-morph-duration) var(--spring-morph-easing) backwards}
.check-disc svg{inline-size:60%;block-size:60%;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.check-disc path{stroke-dasharray:1;stroke-dashoffset:0;animation:draw var(--spring-smooth-duration) var(--spring-smooth-easing) calc(var(--spring-morph-duration) / 3) backwards}
@keyframes pop{from{opacity:0;transform:scale(.3)}}
@keyframes draw{from{stroke-dashoffset:1}}
.burst{position:absolute;inset:50% auto auto 50%;pointer-events:none}
.burst-ripple{position:absolute;left:-4px;top:-4px;inline-size:8px;block-size:8px;border-radius:50%;border:2px solid var(--success-600);opacity:0;
  animation:ripple calc(var(--spring-trail-duration) * 1.25) var(--ease-enter)}
.burst-spark{position:absolute;left:-3px;top:-3px;inline-size:6px;block-size:6px;border-radius:50%;background:var(--success-600);opacity:0;
  animation:spark calc(var(--spring-morph-duration) + var(--td-spark-i) * var(--stagger-step) / 2) var(--ease-enter)}
.burst-spark:nth-child(odd){background:var(--accent-400)}
@keyframes ripple{from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(9)}}
@keyframes spark{from{opacity:1;transform:translate(0,0) scale(1)}
  to{opacity:0;transform:translate(calc(var(--td-spark-x) * var(--depth-enter)),calc(var(--td-spark-y) * var(--depth-enter))) scale(.2)}}

/* ---------- Footer ---------- */
.site-footer{background:var(--bg-surface);padding-block:var(--space-6) calc(var(--space-6) + 88px)}
.footer-inner{display:grid;grid-template-columns:1fr auto;align-items:center;gap:var(--space-2) var(--space-4)}
.footer-inner p{grid-column:1;font:500 .875rem/1.25rem Inter,sans-serif;color:var(--text-secondary)}
.footer-inner small{grid-column:1 / -1;font:400 .75rem/1rem Inter,sans-serif;color:var(--text-tertiary)}
.brand-ink{color:var(--text-primary)}
.footer-link{grid-column:1 / -1;display:inline-flex;align-items:center;gap:var(--space-1);justify-self:start;min-block-size:var(--size-tap-min);font:500 .875rem/1.25rem Inter,sans-serif;color:var(--text-link)}
.footer-link .icon{inline-size:16px;block-size:16px;stroke-width:2.25}
.sound-switch{grid-column:2;grid-row:1 / span 2;display:inline-flex;align-items:center;gap:var(--space-2);min-block-size:var(--size-tap-min);cursor:pointer;
  font:500 .875rem/1.25rem Inter,sans-serif;color:var(--text-secondary)}
.sound-switch input{position:absolute;opacity:0;inline-size:1px;block-size:1px}
.switch-track{position:relative;inline-size:52px;block-size:32px;border-radius:var(--radius-full);background:var(--bg-pressed);box-shadow:var(--shadow-inset);
  transition:background-color var(--spring-snappy-duration) var(--spring-snappy-easing),transform var(--spring-snappy-duration) var(--spring-snappy-easing)}
.switch-knob{position:absolute;top:6px;bottom:6px;left:6px;right:26px;border-radius:var(--radius-full);background:#fff;box-shadow:var(--shadow-1);
  transition:left var(--spring-trail-duration) var(--spring-trail-easing),right var(--spring-lead-duration) var(--spring-lead-easing)}
.sound-switch input:checked+.switch-track{background:var(--accent-solid)}
.sound-switch input:checked+.switch-track .switch-knob{left:26px;right:6px;
  transition:left var(--spring-lead-duration) var(--spring-lead-easing),right var(--spring-trail-duration) var(--spring-trail-easing)}
.sound-switch:active .switch-track{transform:scale(.94)}
.sound-switch input:focus-visible+.switch-track{outline:2px solid var(--focus-ring);outline-offset:2px}
@media (min-width:1024px){.site-footer{padding-block-end:var(--space-6)}}

/* ---------- Mobile dock (glass, thumb zone) ---------- */
.mobile-dock{position:fixed;inset-inline:0;bottom:0;z-index:30;padding:var(--space-3) var(--gutter) max(var(--space-3),env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--bg-surface) calc(var(--opacity-glass) * 100%),transparent);
  -webkit-backdrop-filter:blur(var(--blur-glass));backdrop-filter:blur(var(--blur-glass));box-shadow:var(--shadow-bar-bottom),var(--shadow-highlight);
  transition:transform var(--spring-smooth-duration) var(--spring-smooth-easing),opacity var(--duration-fade) var(--ease-standard)}
.mobile-dock .btn{inline-size:100%;min-block-size:var(--cta-height)}
.mobile-dock[data-hidden]{transform:translateY(110%);opacity:0;pointer-events:none}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.mobile-dock{background:var(--bg-surface)}}
@media (min-width:1024px){.mobile-dock{display:none}}

/* ---------- Enlarged screen dialog ---------- */
.screen-dialog{inline-size:min(1180px,calc(100vw - 2 * var(--gutter)));max-inline-size:none;max-block-size:calc(100dvh - 2 * var(--gutter));padding:0;border:0;
  border-radius:var(--radius-xl);background:var(--bg-surface);color:var(--text-primary);box-shadow:var(--shadow-5);overflow:hidden}
.screen-dialog[open]{display:flex;flex-direction:column;animation:dialog-in var(--spring-morph-duration) var(--spring-morph-easing) backwards}
.screen-dialog::backdrop{background:rgb(5 26 36/.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
@keyframes dialog-in{from{opacity:0;transform:translateY(var(--depth-enter)) scale(var(--scale-enter))}}
.dialog-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-2) var(--space-2) var(--space-2) var(--space-5)}
.dialog-head h2{font:600 1.125rem/1.5rem Inter,sans-serif}
.dialog-head .icon-btn{box-shadow:none;background:var(--bg-subtle)}
.dialog-scroll{overflow:auto;margin-inline:var(--space-2);border-radius:var(--radius-md);touch-action:pan-x pan-y pinch-zoom}
.dialog-canvas{inline-size:max(860px,100%)}
.dialog-canvas .ps-screen{pointer-events:none}
.dialog-hint{padding:var(--space-2) var(--space-5) var(--space-4);font:400 .8125rem/1.25rem Inter,sans-serif;color:var(--text-tertiary)}
@media (min-width:1024px){.dialog-hint{display:none}.dialog-scroll{margin-block-end:var(--space-2)}}
body:has(dialog[open]){overflow:hidden}

/* ---------- Entrance (JS marks [data-reveal] pending; content is visible without JS) ---------- */
.js [data-reveal]:not(.is-in){opacity:0}
.js [data-reveal].is-in{animation:reveal var(--spring-smooth-duration) var(--spring-smooth-easing) backwards;
  animation-delay:calc(min(var(--td-reveal-index,0),var(--stagger-cap)) * var(--stagger-step))}
@keyframes reveal{from{opacity:0;transform:translateY(var(--depth-enter)) scale(var(--scale-enter))}}

@media (prefers-reduced-motion:reduce){
  :root{--spring-snappy-duration:1ms;--spring-smooth-duration:1ms;--spring-morph-duration:1ms;--spring-lead-duration:1ms;--spring-trail-duration:1ms}
  .js [data-reveal]:not(.is-in){opacity:1}
  .js [data-reveal].is-in,.swap-in,.screen-in,.screen-dialog[open],.faq details>p{animation:none}
  .burst{display:none}
}