/* ============================================================
   PRETTY FOCUSSED — the Plan
   Tokens verbatim from design-system/design-tokens.md.
   Components read semantic vars, never --pf-* primitives directly,
   except the atmosphere plates on the Plan map (brand surface).
   Plaster (Bone) only: this page commits to one world.
   ============================================================ */
:root{
  color-scheme:light;
  --pf-bone:#F4F2EE; --pf-paper:#EAE7E1; --pf-stone:#D6D1C7; --pf-ash:#9A968E;
  --pf-slate-400:#6B675F; --pf-slate-600:#55534E; --pf-ink:#14150F;
  --pf-sage-100:#E2E7DA; --pf-sage-200:#C6D0B8; --pf-sage-400:#98A886;
  --pf-sage-600:#6E7F5E; --pf-sage-800:#3E4936;
  --pf-sky:#A6C1D8; --pf-mist:#CBD9E4; --pf-sand:#D8CDBD;
  --pf-shell:#EFE3D8; --pf-flush:#E0B8A4;

  --ground-s0:#F4F2EE; --ground-s1:#E4EBF3;
  --color-surface-default:color-mix(in srgb, var(--ground-s0) 86%, var(--pf-stone) 14%);
  --color-surface-glass:rgb(255 255 255 / .72);
  --color-text-primary:var(--pf-ink);
  --color-text-secondary:var(--pf-slate-600);
  --color-text-muted:var(--pf-slate-400);
  --color-text-disabled:var(--pf-ash);
  --color-action-primary:var(--pf-ink);
  --color-action-primary-text:var(--pf-bone);
  --color-border-default:var(--pf-stone);
  --color-border-focus:rgb(20 21 15 / .40);
  --color-feedback-error-bg:var(--pf-shell);

  --font-display:'Aeonik','Instrument Sans',system-ui,sans-serif;
  --font-body:'Aeonik','Instrument Sans',system-ui,sans-serif;
  --font-mono:'Aeonik Mono','JetBrains Mono',ui-monospace,monospace;

  --type-display:clamp(2.75rem,1.2rem + 6.4vw,6rem);
  --type-h1:clamp(2.125rem,1.1rem + 4.3vw,4rem);
  --type-h2:clamp(1.6875rem,1.1rem + 2.5vw,2.75rem);
  --type-h3:clamp(1.375rem,1.05rem + 1vw,1.875rem);
  --type-body-lg:clamp(1.0625rem,1rem + .3vw,1.1875rem);
  --type-caption:.6875rem; --type-overline:.625rem;
  --type-numeric-xl:clamp(3rem,1.6rem + 4vw,4.5rem);
  --track-display:-.035em; --track-h1:-.03em; --track-h2:-.025em; --track-h3:-.02em;
  --track-caption:.06em; --track-overline:.14em;

  --space-bound:8px; --space-related:16px; --space-grouped:28px;
  --space-separated:72px; --space-chaptered:160px;

  --radius-pill:999px; --radius-input:14px; --radius-card:20px; --radius-panel:24px; --radius-sheet:32px;

  --shadow-sm:0 1px 2px rgb(62 73 54 / .04);
  --shadow-md:0 4px 16px rgb(62 73 54 / .06);
  --shadow-lg:0 8px 32px rgb(62 73 54 / .08);
  --shadow-xl:0 16px 56px rgb(62 73 54 / .10);
  --shadow-glass:inset 0 1px 0 rgb(255 255 255 / .45), 0 8px 32px rgb(62 73 54 / .08);

  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --ease-sheet:cubic-bezier(.32,.72,0,1);
  --duration-press:120ms; --duration-fast:160ms; --duration-base:200ms; --duration-slow:260ms;
  --blur-peripheral:3px; --opacity-peripheral:.55;

  /* the room: 0 while she works, 1 once the plan is hers */
  --room:0;
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");

  /* the three atmosphere plates on the map, all validated in brand/air-system.md.
     Three different lights of equal weight, so no block reads as the important one. */
  --plate-1:linear-gradient(155deg, #A6C1D8 0%, #A6C1D8 18%, #CBD9E4 52%, #F4F2EE 100%);   /* High Air */
  --plate-2:linear-gradient(155deg, #CBD9E4 0%, #F4F2EE 55%, #EFE3D8 100%);                /* Overcast */
  --plate-3:linear-gradient(155deg, #CBD9E4 0%, #EFE3D8 48%, #D8CDBD 88%, #EFE3D8 100%);   /* Last Light */
}

/* ============================================================ base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; min-height:100svh;
  font:400 16px/1.625 var(--font-body);
  color:var(--color-text-primary);
  background-color:var(--ground-s0);
  background-color:color-mix(in oklab, var(--ground-s0) calc((1 - var(--room)) * 100%), var(--ground-s1));
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
/* the one moment the room is allowed to be felt: the plan becomes hers */
body.is-settling{transition:background-color 900ms var(--ease-out)}
body::after{content:''; position:fixed; inset:0; z-index:60; pointer-events:none;
  background-image:var(--noise); opacity:.03; mix-blend-mode:multiply}
img,svg{display:block; max-width:100%}
button{font:inherit; color:inherit; border:0; background:none; cursor:pointer; padding:0}
input{font:inherit; color:inherit}
a{color:inherit}
::selection{background:var(--pf-sage-200); color:var(--pf-ink)}
:focus-visible{outline:2px solid var(--color-border-focus); outline-offset:3px; border-radius:var(--radius-input)}
/* headings take focus only so screen readers land on them; no ring */
[tabindex="-1"]:focus{outline:none}
.sr{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
[hidden]{display:none !important}

/* whitespace is occupied atmosphere, never a flat void */
.atmos{position:fixed; inset:-20%; z-index:0; pointer-events:none; opacity:.62;
  transition:transform 1200ms var(--ease-out), opacity 1200ms var(--ease-out)}
.atmos i{position:absolute; display:block; border-radius:50%; filter:blur(90px)}
.atmos i:nth-child(1){width:62vmax; height:62vmax; left:-18vmax; top:-16vmax;
  background:radial-gradient(circle at 40% 40%, rgb(226 231 218 / .95), rgb(226 231 218 / 0) 68%)}
.atmos i:nth-child(2){width:54vmax; height:54vmax; right:-20vmax; bottom:-22vmax;
  background:radial-gradient(circle, rgb(239 227 216 / .9), rgb(239 227 216 / 0) 66%)}
.atmos i:nth-child(3){width:40vmax; height:40vmax; right:6vmax; top:-14vmax;
  background:radial-gradient(circle, rgb(203 217 228 / .7), rgb(203 217 228 / 0) 64%)}
body[data-view="areas"] .atmos,body[data-view="focus"] .atmos,body[data-view="time"] .atmos{transform:translate3d(0,-4vmax,0) scale(1.06); opacity:.52}
body[data-view="plan"] .atmos{transform:translate3d(0,-8vmax,0) scale(1.12); opacity:.46}

/* ============================================================ type */
.overline{font-size:var(--type-overline); letter-spacing:var(--track-overline); text-transform:uppercase; color:var(--color-text-muted); font-weight:500; line-height:1.4; margin:0}
.caption{font-size:var(--type-caption); letter-spacing:var(--track-caption); color:var(--color-text-muted); line-height:1.6; margin:0}
.display{font-family:var(--font-display); font-size:var(--type-display); line-height:.94; letter-spacing:var(--track-display); font-weight:400; margin:0; text-wrap:balance}
.h1{font-family:var(--font-display); font-size:var(--type-h1); line-height:1.02; letter-spacing:var(--track-h1); font-weight:400; margin:0; text-wrap:balance}
.h2{font-family:var(--font-display); font-size:var(--type-h2); line-height:1.09; letter-spacing:var(--track-h2); font-weight:400; margin:0; text-wrap:balance}
.h3{font-family:var(--font-display); font-size:var(--type-h3); line-height:1.2; letter-spacing:var(--track-h3); font-weight:400; margin:0; text-wrap:balance}
.lede{font-size:var(--type-body-lg); line-height:1.55; color:var(--color-text-secondary); margin:0; text-wrap:pretty}
.num{font-family:var(--font-display); font-variant-numeric:tabular-nums; letter-spacing:-.04em; font-weight:500}
.unit{font-family:var(--font-mono); font-size:.35em; color:var(--color-text-muted); margin-left:.35em; letter-spacing:.02em; font-weight:400}

/* ============================================================ controls */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; border-radius:var(--radius-pill);
  padding:17px 32px; min-height:52px; background:var(--color-action-primary); color:var(--color-action-primary-text);
  font-weight:500; font-size:.9375rem; letter-spacing:.005em; line-height:1; text-decoration:none;
  box-shadow:var(--shadow-md);
  transition:transform var(--duration-press) var(--ease-out), opacity var(--duration-fast) var(--ease-out)}
.btn:active{transform:scale(.97)}
.btn[aria-disabled="true"]{opacity:.28; cursor:default; box-shadow:none}
.btn[aria-disabled="true"]:active{transform:none}
@media (hover:hover) and (pointer:fine){.btn:not([aria-disabled="true"]):hover{opacity:.88}}
.btn .spin{display:none; width:18px; height:18px}
.btn[data-busy="true"] .btn-label{opacity:0}
.btn[data-busy="true"] .spin{display:block; position:absolute}
.btn{position:relative}
.spin circle{fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-dasharray:.28 1; transform-origin:center;
  animation:turn 900ms linear infinite}
@keyframes turn{to{transform:rotate(360deg)}}

.ghost{display:inline-flex; align-items:center; min-height:44px; font-size:.875rem; color:var(--color-text-secondary);
  text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1px;
  text-decoration-color:var(--color-border-default);
  transition:transform var(--duration-press) var(--ease-out), color var(--duration-fast) var(--ease-out), text-decoration-color var(--duration-fast) var(--ease-out)}
.ghost:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.ghost:hover{color:var(--color-text-primary); text-decoration-color:currentColor}}

/* the second action: glass, never a second filled button */
.btn-glass{display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:17px 28px; border-radius:var(--radius-pill);
  background:var(--color-surface-glass); -webkit-backdrop-filter:blur(32px) saturate(1.2); backdrop-filter:blur(32px) saturate(1.2);
  box-shadow:var(--shadow-glass), 0 0 0 1px rgb(20 21 15 / .08);
  color:var(--pf-ink); font-weight:500; font-size:.9375rem; line-height:1; letter-spacing:.005em; text-decoration:none; white-space:nowrap;
  transition:transform var(--duration-press) var(--ease-out), background-color var(--duration-fast) var(--ease-out)}
.btn-glass:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.btn-glass:hover{background:rgb(255 255 255 / .92)}}

/* ============================================================ header */
.top{position:fixed; z-index:40; top:0; left:0; right:0; display:flex; align-items:center; gap:14px;
  padding:max(16px, env(safe-area-inset-top)) clamp(16px,4vw,40px) 16px; pointer-events:none}
.top::before{content:''; position:absolute; inset:-1px 0 -26px; z-index:-1; pointer-events:none;
  background:linear-gradient(to bottom, color-mix(in oklab, var(--ground-s0) calc((1 - var(--room)) * 100%), var(--ground-s1)) 40%, transparent);
  -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px);
  -webkit-mask-image:linear-gradient(to bottom,#000 60%,transparent); mask-image:linear-gradient(to bottom,#000 60%,transparent)}
.top > *{pointer-events:auto}
.mark{display:inline-flex; align-items:center; gap:10px; text-decoration:none; font-weight:500; font-size:.9375rem; letter-spacing:-.01em;
  min-height:44px; transition:transform var(--duration-press) var(--ease-out)}
.mark:active{transform:scale(.97)}
.mark svg{width:22px; height:22px}
.logo-arc{stroke-dasharray:1; stroke-dashoffset:0}
/* the signature, once per visit: the arc sweeps, and at 720ms the dot arrives. It does not ease. */
.is-first .logo-arc{animation:sweep 900ms var(--ease-out) both}
.is-first .logo-dot{animation:arrive 80ms linear 720ms both}
@keyframes sweep{from{stroke-dashoffset:1}}
@keyframes arrive{from{opacity:0}to{opacity:1}}

.steps{display:none; align-items:center; gap:12px; margin-left:auto}
.top-cta{margin-left:auto; min-height:44px; padding:12px 20px; font-size:.875rem}
/* during the 3 questions the corner belongs to her progress */
body[data-view="areas"] .top-cta,body[data-view="focus"] .top-cta,body[data-view="time"] .top-cta{display:none}
body[data-view="areas"] .steps,body[data-view="focus"] .steps,body[data-view="time"] .steps{display:flex}
.steps .count{font-family:var(--font-mono); font-size:11px; letter-spacing:.02em; color:var(--color-text-muted); font-variant-numeric:tabular-nums}
.ring{width:30px; height:30px; transform:rotate(-90deg)}
.ring .track{fill:none; stroke:var(--color-border-default); stroke-width:1.6; stroke-linecap:round; stroke-dasharray:.006 .024}
.ring .value{fill:none; stroke:var(--pf-sage-600); stroke-width:2.2; stroke-linecap:round;
  transition:stroke-dasharray var(--duration-slow) var(--ease-out)}
.ring .dot{fill:var(--pf-ink)}
.back{display:inline-flex; align-items:center; min-height:44px; padding:0 4px; font-size:.875rem; color:var(--color-text-muted);
  transition:transform var(--duration-press) var(--ease-out), color var(--duration-fast) var(--ease-out)}
.back:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.back:hover{color:var(--color-text-primary)}}

/* ============================================================ views
   The focal plane between screens. Exits are faster than enters. */
main{position:relative; z-index:10}
.view{min-height:100svh}
.view[data-state="out"]{opacity:0; filter:blur(6px); transform:translate3d(0,-8px,0);
  transition:opacity 150ms var(--ease-out), filter 150ms var(--ease-out), transform 150ms var(--ease-out); pointer-events:none}
.view[data-state="pre"]{opacity:0; filter:blur(8px); transform:translate3d(0,12px,0) scale(.985)}
.view[data-state="in"]{opacity:1; filter:none; transform:none;
  transition:opacity 260ms var(--ease-out), filter 260ms var(--ease-out), transform 260ms var(--ease-out)}

.wrap{width:100%; max-width:1180px; margin:0 auto; padding:0 clamp(16px,4vw,40px)}
.q{max-width:640px; margin:0 auto; padding:clamp(120px,18vh,180px) 16px max(48px, calc(env(safe-area-inset-bottom) + 32px));
  display:grid; gap:var(--space-grouped)}
.ask{display:grid; gap:14px}
.ask .lede{max-width:44ch; font-size:1rem}
.ask .h2{max-width:18ch}

/* ============================================================ LANDING */
.hero{min-height:100svh; display:grid; align-items:center; padding:112px 0 64px}
.hero-grid{display:grid; gap:56px; align-items:center}
@media (min-width:920px){ .hero-grid{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:clamp(48px,6vw,96px)} }
.hero-copy{display:grid; gap:var(--space-grouped); padding-top:clamp(24px,8vh,96px)}
.hero-copy .display{max-width:11ch}
.hero-copy .lede{max-width:34ch}
.hero-act{display:flex; flex-wrap:wrap; align-items:center; gap:10px 28px; margin-top:6px}
.hero-copy .caption{margin-top:-8px}
.specimen{position:relative; width:min(100%,480px); justify-self:center}
.specimen .tag{position:absolute; z-index:3; top:-14px; left:22px}

/* the field resolves on arrival: brand clock */
.resolve{animation:resolve 700ms var(--ease-out) both}
.resolve.d1{animation-delay:80ms}.resolve.d2{animation-delay:160ms}.resolve.d3{animation-delay:260ms}.resolve.d4{animation-delay:380ms}
@keyframes resolve{from{opacity:0; filter:blur(8px); transform:translate3d(0,10px,0)}}

.how{padding-top:var(--space-separated); padding-bottom:var(--space-chaptered)}
.how ol{list-style:none; margin:0; padding:0; display:grid; gap:0; max-width:760px}
.how li{display:grid; grid-template-columns:56px 1fr; gap:16px; align-items:baseline; padding:22px 0; border-top:1px dotted var(--color-border-default)}
.how li .n{font-family:var(--font-mono); font-size:11px; color:var(--color-text-muted)}
.how .h3{max-width:26ch}
.how-head{display:grid; gap:14px; margin-bottom:var(--space-grouped)}

.foot{padding:40px 0 max(40px, env(safe-area-inset-bottom)); display:flex; flex-wrap:wrap; gap:8px 24px; align-items:center}
.foot .caption a{text-decoration:none}
@media (hover:hover) and (pointer:fine){.foot .caption a:hover{color:var(--color-text-primary)}}

/* ============================================================ LANDING on the sky
   The same world as the questions: Air plate, glass, numbered tiles. */
body[data-view="landing"] .overline{color:var(--color-text-secondary)}
/* the example plan sits in a glass frame, like a screen from the app */
.specimen .map{padding:10px; border-radius:32px; gap:6px;
  background:rgb(255 255 255 / .28); -webkit-backdrop-filter:blur(24px) saturate(1.15); backdrop-filter:blur(24px) saturate(1.15);
  box-shadow:inset 0 0 0 1px rgb(255 255 255 / .65), inset 0 1px 0 rgb(255 255 255 / .8), 0 24px 64px rgb(62 73 54 / .10)}
.specimen .blk{border-radius:24px}
/* how it works: 3 numbered glass tiles, the same family as question 1 */
.how ol{max-width:none; display:grid; gap:12px; grid-template-columns:1fr}
@media (min-width:760px){ .how ol{grid-template-columns:repeat(3, minmax(0, 1fr))} }
.how li{display:flex; flex-direction:column; justify-content:space-between; gap:40px; min-height:200px; padding:20px 22px 24px; border:0;
  border-radius:28px; background:rgb(255 255 255 / .26); -webkit-backdrop-filter:blur(20px) saturate(1.15); backdrop-filter:blur(20px) saturate(1.15);
  box-shadow:inset 0 0 0 1px rgb(255 255 255 / .6), inset 0 1px 0 rgb(255 255 255 / .75)}
.how li .n{color:var(--color-text-secondary)}
.how li .h3{font-size:clamp(1.25rem, 1rem + .8vw, 1.625rem); max-width:18ch}
@media (max-width:759px){ .how li{min-height:0; gap:24px} }
.how .h2{max-width:20ch}

/* ============================================================ glass pill */
.glass{display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:var(--radius-pill);
  background:var(--color-surface-glass); -webkit-backdrop-filter:blur(32px) saturate(1.2); backdrop-filter:blur(32px) saturate(1.2);
  box-shadow:var(--shadow-glass); font-size:var(--type-overline); letter-spacing:var(--track-overline); text-transform:uppercase; font-weight:500; color:var(--color-text-secondary)}
.glass .pip{width:6px; height:6px; border-radius:50%; background:var(--pf-ink)}

/* ============================================================ Q1 — the areas
   Glass tiles on the Air plate (brand/air-system.md), numbered like instruments. */
.sky{position:fixed; inset:0; z-index:1; pointer-events:none; opacity:0;
  background:linear-gradient(170deg, #B7CDE0 0%, #CBD9E4 30%, #E6ECEF 62%, #EFE3D8 100%);
  transition:opacity 500ms var(--ease-out)}
.sky::after{content:''; position:absolute; inset:0; background-image:var(--noise); opacity:.05; mix-blend-mode:multiply}
body[data-view="landing"] .sky,body[data-view="areas"] .sky,body[data-view="focus"] .sky,body[data-view="time"] .sky{opacity:1}
/* on the sky the header keeps a frosted band, so content scrolls softly under it */
body[data-view="landing"] .top::before,body[data-view="areas"] .top::before,body[data-view="focus"] .top::before,body[data-view="time"] .top::before{
  background:linear-gradient(to bottom, rgb(214 225 234 / .72) 45%, rgb(214 225 234 / 0))}
body[data-view="focus"] .overline,body[data-view="time"] .overline{color:var(--color-text-secondary)}
/* on the sky, the backings go clear so nothing sits as a beige patch */
body[data-view="focus"] .preview{background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none}
body[data-view="focus"] .dock{background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none}
body[data-view="time"] .dock{background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none}
/* on a phone the pinned map keeps a frosted backing, so the sliders read clearly as they scroll under it */
body[data-view="time"] .preview{background:rgb(255 255 255 / .3); box-shadow:inset 0 0 0 1px rgb(255 255 255 / .5)}
@media (min-width:760px){ body[data-view="time"] .preview{background:transparent; box-shadow:none} }
/* the slider rows become glass, the same family as the tiles */
body[data-view="time"] .row{background:rgb(255 255 255 / .3); -webkit-backdrop-filter:blur(20px) saturate(1.15); backdrop-filter:blur(20px) saturate(1.15);
  box-shadow:inset 0 0 0 1px rgb(255 255 255 / .6), inset 0 1px 0 rgb(255 255 255 / .75)}
body[data-view="time"] .row .meta .who p{color:var(--pf-ink)}
body[data-view="time"] .scale{color:var(--color-text-secondary)}
.q-areas{max-width:920px}
.q-areas .overline{color:var(--color-text-secondary)}
.q-areas .h2{max-width:17ch}
.chips{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px}
@media (min-width:600px){ .chips{grid-template-columns:repeat(3, minmax(0, 1fr))} }
@media (min-width:900px){ .chips{grid-template-columns:repeat(4, minmax(0, 1fr)); gap:12px} }
.chip{position:relative; display:flex; flex-direction:column; justify-content:space-between; gap:18px; min-height:96px;
  padding:14px 16px 16px 18px; border-radius:28px; text-align:left; color:var(--pf-ink);
  background:rgb(255 255 255 / .22); -webkit-backdrop-filter:blur(20px) saturate(1.15); backdrop-filter:blur(20px) saturate(1.15);
  /* the bright hairline on the edge of the glass */
  box-shadow:inset 0 0 0 1px rgb(255 255 255 / .6), inset 0 1px 0 rgb(255 255 255 / .7);
  font-size:1.0625rem; line-height:1.2; letter-spacing:-.01em;
  transition:transform var(--duration-press) var(--ease-out), background-color var(--duration-fast) var(--ease-out),
             box-shadow var(--duration-base) var(--ease-out), opacity var(--duration-base) var(--ease-out),
             filter var(--duration-base) var(--ease-out)}
.chip:active{transform:scale(.97)}
.chip .n{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.02em; color:var(--color-text-secondary)}
.chip .name{font-weight:400}
/* her order, top right: the full stop, only once she has chosen it */
.chip .slot{position:absolute; top:12px; right:12px; width:24px; height:24px}
.chip .slot b{position:absolute; inset:0; border-radius:50%; background:var(--pf-ink); color:var(--pf-bone);
  font:400 10px/24px var(--font-mono); text-align:center; opacity:0; transform:scale(.6);
  transition:opacity var(--duration-fast) var(--ease-out), transform var(--duration-base) var(--ease-out)}
/* chosen: frosted, brighter, lit from behind */
.chip[aria-pressed="true"]{background:rgb(255 255 255 / .74);
  box-shadow:inset 0 0 0 1px rgb(255 255 255 / .9), inset 0 1px 0 #fff, 0 10px 36px rgb(62 73 54 / .10), 0 0 44px rgb(255 255 255 / .55)}
.chip[aria-pressed="true"] .name{font-weight:500}
.chip[aria-pressed="true"] .slot b{opacity:1; transform:none}
/* 3 chosen: the rest of the list recedes. Still there, still reachable. */
.chips[data-full="true"] .chip[aria-pressed="false"]{opacity:.5; filter:blur(1.5px)}
.chips[data-full="true"] .chip[aria-pressed="false"]:focus-visible{opacity:1; filter:none}
@media (hover:hover) and (pointer:fine){
  .chip[aria-pressed="false"]:hover{background:rgb(255 255 255 / .4)}
  .chips[data-full="true"] .chip[aria-pressed="false"]:hover{opacity:.85; filter:none}
}
@media (max-width:420px){ .chip{min-height:84px; padding:12px 14px 14px 16px; font-size:1rem; border-radius:24px} }
.tally{display:flex; align-items:center; gap:12px; min-height:30px; min-width:0}
.tally .ring{width:26px; height:26px; flex:none}
.tally p{margin:0; font-size:.9375rem; line-height:1.35; color:var(--color-text-secondary)}
.tally[data-full="true"] p{color:var(--color-text-primary)}
/* the bar: glass across the bottom, count on the left, the action on the right */
.dock.bar{justify-self:stretch; justify-content:space-between; flex-wrap:nowrap; margin:0 -10px; padding:8px 8px 8px 18px;
  background:rgb(255 255 255 / .5); box-shadow:inset 0 0 0 1px rgb(255 255 255 / .7), 0 8px 32px rgb(62 73 54 / .08)}
.dock.bar .tally{flex:1 1 auto}
.dock.bar .btn{flex:none}
@media (max-width:420px){ .dock.bar .tally p{font-size:.8125rem} .dock.bar .btn{padding:15px 22px} }
.note{margin:0; font-size:var(--type-caption); letter-spacing:var(--track-caption); color:var(--color-text-primary);
  background:var(--color-feedback-error-bg); padding:9px 14px; border-radius:var(--radius-input); justify-self:start;
  opacity:0; transform:translateY(-3px); transition:opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out)}
.note[data-show="true"]{opacity:1; transform:none}
.note:empty{display:none}

/* the action rides the bottom of the viewport when a screen is taller than it */
.dock{position:sticky; bottom:max(12px, env(safe-area-inset-bottom)); z-index:5; display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  justify-self:start; padding:10px; margin:0 -10px; border-radius:var(--radius-pill);
  background:rgb(244 242 238 / .66); -webkit-backdrop-filter:blur(18px) saturate(1.1); backdrop-filter:blur(18px) saturate(1.1)}
.dock .caption{flex:1 1 140px}

/* ============================================================ Q2 — the one thing
   One area per screen, as a sentence with a blank. Tiles fill the blank. */
.q-one .ask{gap:10px}
.q[data-state="out"]{opacity:0; filter:blur(6px); transform:translate3d(-10px,0,0);
  transition:opacity 150ms var(--ease-out), filter 150ms var(--ease-out), transform 150ms var(--ease-out)}
.q[data-state="pre"]{opacity:0; filter:blur(6px); transform:translate3d(14px,0,0)}
.q[data-state="in"]{transition:opacity 220ms var(--ease-out), filter 220ms var(--ease-out), transform 220ms var(--ease-out)}
/* the answer: a glass field in body type, so her words never compete with the area name */
.blank{width:100%; min-height:56px; padding:15px 22px; border:0; border-radius:var(--radius-pill); outline:none;
  font-family:var(--font-body); font-size:1.125rem; line-height:1.3; letter-spacing:-.01em; color:var(--pf-ink);
  background:rgb(255 255 255 / .42); -webkit-backdrop-filter:blur(20px) saturate(1.15); backdrop-filter:blur(20px) saturate(1.15);
  box-shadow:inset 0 0 0 1px rgb(255 255 255 / .65), inset 0 1px 0 rgb(255 255 255 / .8);
  transition:background-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out)}
.blank::placeholder{color:var(--color-text-muted)}
.blank:focus,.blank.is-filled{background:rgb(255 255 255 / .78); box-shadow:inset 0 0 0 1px rgb(255 255 255 / .95), inset 0 1px 0 #fff, 0 8px 28px rgb(62 73 54 / .08)}
.blank:focus-visible{box-shadow:inset 0 0 0 1px rgb(255 255 255 / .95), 0 0 0 2px var(--color-border-focus)}
.q-one .ask{gap:14px}
.q-one .ask .h1{margin-bottom:6px}
/* suggestions: small glass tiles, the same family as question 1 */
.tiles{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px}
.tile{position:relative; display:flex; align-items:center; gap:12px; min-height:56px; padding:12px 34px 12px 16px;
  border-radius:20px; text-align:left; color:var(--pf-ink);
  background:rgb(255 255 255 / .22); -webkit-backdrop-filter:blur(20px) saturate(1.15); backdrop-filter:blur(20px) saturate(1.15);
  box-shadow:inset 0 0 0 1px rgb(255 255 255 / .6), inset 0 1px 0 rgb(255 255 255 / .7);
  transition:transform var(--duration-press) var(--ease-out), background-color var(--duration-fast) var(--ease-out),
             box-shadow var(--duration-base) var(--ease-out), opacity var(--duration-base) var(--ease-out)}
.tile:active{transform:scale(.97)}
.tile .n{flex:none; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.02em; color:var(--color-text-secondary)}
.tile .t{font-size:.9375rem; line-height:1.25; letter-spacing:-.005em; overflow-wrap:anywhere}
.tile[aria-pressed="true"]{background:rgb(255 255 255 / .74);
  box-shadow:inset 0 0 0 1px rgb(255 255 255 / .9), inset 0 1px 0 #fff, 0 8px 28px rgb(62 73 54 / .09), 0 0 36px rgb(255 255 255 / .5)}
.tile[aria-pressed="true"] .t{font-weight:500}
.tile[aria-pressed="true"]::after{content:''; position:absolute; top:50%; right:14px; width:7px; height:7px; margin-top:-3.5px; border-radius:50%; background:var(--pf-ink)}
.tiles:has([aria-pressed="true"]) .tile[aria-pressed="false"]{opacity:.62}
@media (hover:hover) and (pointer:fine){ .tile[aria-pressed="false"]:hover{background:rgb(255 255 255 / .4); opacity:1} }
@media (max-width:420px){ .tile{padding:10px 30px 10px 14px; min-height:52px} .tile .t{font-size:.875rem} .tile .n{display:none} }

/* the focus map: no numbers yet, only names and her words */
.map[data-mode="focus"] .b-pct,.map[data-mode="focus"] .b-hrs{display:none}
.map[data-mode="focus"] .b-focus{font-size:clamp(1rem, 7cqmin, 1.75rem); line-height:1.2}
.map[data-mode="focus"] .blk{opacity:.6; filter:blur(2px)}
.map[data-mode="focus"] .blk[data-sharp]{opacity:1; filter:none}
.one-main{display:grid; gap:var(--space-grouped); align-content:start}
@media (min-width:760px){ .q-one .preview .map{aspect-ratio:4 / 5} }

/* ============================================================ Q3 — the time */
.time-grid{display:grid; gap:var(--space-grouped)}
@media (min-width:760px){
  .q.q-time{max-width:1080px}
  .time-grid{grid-template-columns:minmax(0,1fr) minmax(0,.86fr); gap:clamp(40px,5vw,72px); align-items:start}
  .time-grid .preview{position:sticky; top:120px}
}
.rows{display:grid; gap:10px}
.row{display:grid; gap:6px; padding:18px 22px 12px; border-radius:var(--radius-card); background:var(--color-surface-default)}
.row .meta{display:flex; justify-content:space-between; align-items:flex-start; gap:16px}
.row .meta .who{display:grid; gap:4px; min-width:0}
.row .meta .who p{margin:0; color:var(--color-text-secondary); font-size:.9375rem; line-height:1.4; overflow-wrap:anywhere}
.row .val{margin:0; font-size:clamp(2.25rem,1.6rem + 2vw,3rem); line-height:.9; white-space:nowrap}
.row .val .unit{font-size:.3em}

input[type=range]{--p:.2; -webkit-appearance:none; appearance:none; width:100%; height:44px; margin:0; cursor:grab; border-radius:0;
  /* solid hairline = her actual value, dotted = the scaffold still open */
  background:
    linear-gradient(90deg, var(--pf-ink) 0 calc(14px + var(--p) * (100% - 28px)), transparent 0) center / 100% 2px no-repeat,
    radial-gradient(circle, var(--pf-ash) .9px, transparent 1.3px) 0 50% / 7px 7px repeat-x}
input[type=range]:active{cursor:grabbing}
input[type=range]::-webkit-slider-runnable-track{height:44px; background:transparent}
input[type=range]::-moz-range-track{height:44px; background:transparent}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:28px; height:28px; margin-top:8px; border-radius:50%;
  background:radial-gradient(circle, var(--pf-ink) 0 3px, transparent 3.5px), rgb(255 255 255 / .94);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .6), 0 0 0 1px rgb(62 73 54 / .08), var(--shadow-md);
  transition:transform var(--duration-press) var(--ease-out)}
input[type=range]::-moz-range-thumb{width:28px; height:28px; border:0; border-radius:50%;
  background:radial-gradient(circle, var(--pf-ink) 0 3px, transparent 3.5px), rgb(255 255 255 / .94);
  box-shadow:0 0 0 1px rgb(62 73 54 / .08), var(--shadow-md); transition:transform var(--duration-press) var(--ease-out)}
input[type=range]:active::-webkit-slider-thumb{transform:scale(.94)}
input[type=range]:active::-moz-range-thumb{transform:scale(.94)}
input[type=range]:focus-visible{outline-offset:0}
.scale{display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:10px; color:var(--color-text-disabled); letter-spacing:.02em; margin-top:-4px}
.preview{display:grid; gap:14px}
.preview .map{aspect-ratio:1 / 1}
/* small screens: the map rides above the sliders, so she sees it answer every drag */
@media (max-width:759px){
  .preview{order:-1; position:sticky; top:calc(max(16px, env(safe-area-inset-top)) + 52px); z-index:3; gap:8px;
    margin:0 -10px; padding:8px 10px 10px; border-radius:var(--radius-panel);
    background:rgb(244 242 238 / .8); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px)}
  .preview .map{aspect-ratio:auto; height:clamp(176px, 26svh, 232px)}
  /* on a phone the focus map sits above the question and scrolls away, so it never
     covers the field while the keyboard is open */
  .q-one .preview{position:relative; top:auto}
  .preview .total .overline{display:none}
  .preview .total{justify-content:flex-end; margin-top:-4px}
  .preview .total .num{font-size:1.125rem}
}
.total{display:flex; align-items:baseline; justify-content:space-between; gap:12px}
.total .num{font-size:1.75rem; line-height:1}

/* ============================================================ THE MAP
   A proportional composition, not a chart. Area is exactly proportional
   to time: the first block takes its share of one axis across the whole
   of the other, the remaining two split what is left. Wide containers
   split left/right, narrow ones top/bottom. */
.map{position:relative; container-type:inline-size; display:grid; gap:6px; width:100%;
  grid-template-columns:var(--tall-cols); grid-template-rows:var(--tall-rows); aspect-ratio:4 / 5}
.map .blk{grid-column:auto; grid-row:auto}
.map .blk:nth-of-type(1){grid-column:1 / -1}
.map.is-wide{grid-template-columns:var(--wide-cols); grid-template-rows:var(--wide-rows); aspect-ratio:16 / 9}
.map.is-wide .blk:nth-of-type(1){grid-column:1; grid-row:1 / -1}
.map.is-wide .blk:nth-of-type(2){grid-column:2; grid-row:1}
.map.is-wide .blk:nth-of-type(3){grid-column:2; grid-row:2}

.blk{position:relative; overflow:hidden; border-radius:var(--radius-card); container-type:size;
  display:flex; flex-direction:column; justify-content:space-between; gap:8px; padding:clamp(14px,5cqmin,26px);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .55), var(--shadow-sm); isolation:isolate;
  transition:opacity var(--duration-base) var(--ease-out), filter var(--duration-base) var(--ease-out)}
.blk::before{content:''; position:absolute; inset:0; z-index:-2; background:var(--plate); background-size:180% 180%; background-position:var(--pos, 0 0)}
.blk::after{content:''; position:absolute; inset:0; z-index:-1; background-image:var(--noise); opacity:.05; mix-blend-mode:multiply}
.blk[data-plate="1"]{--plate:var(--plate-1); --pos:30% 20%}
.blk[data-plate="2"]{--plate:var(--plate-2); --pos:10% 40%}
.blk[data-plate="3"]{--plate:var(--plate-3); --pos:60% 30%}
.blk .b-top{display:flex; justify-content:space-between; align-items:flex-start; gap:8px}
.blk .b-name{font-size:var(--type-overline); letter-spacing:var(--track-overline); text-transform:uppercase; font-weight:500; color:var(--pf-ink); margin:0}
.blk .b-hrs{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.02em; color:var(--color-text-secondary); white-space:nowrap; margin:0}
.blk .b-bot{display:grid; gap:6px; min-width:0}
.blk .b-pct{margin:0; font-size:clamp(2rem, 24cqmin, 5.5rem); line-height:.86; color:var(--pf-ink)}
.blk .b-pct .unit{font-size:.35em; color:var(--color-text-secondary)}
.blk .b-focus{margin:0; font-size:clamp(.875rem, 5.2cqmin, 1.5rem); line-height:1.22; letter-spacing:-.015em; color:var(--pf-ink);
  max-width:22ch; overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden}
/* a block too small for everything keeps the number and the name */
@container (max-height:150px){ .blk .b-focus{-webkit-line-clamp:1} }
@container (max-height:118px){
  .blk{flex-direction:row; align-items:flex-end; justify-content:space-between; gap:10px}
  .blk .b-top{align-self:flex-start; min-width:0}
  .blk .b-hrs,.blk .b-focus{display:none}
  .blk .b-bot{justify-items:end}
  .blk .b-pct{font-size:clamp(1.5rem, 40cqh, 2.5rem)}
  .map[data-mode="focus"] .blk .b-focus{display:-webkit-box; -webkit-line-clamp:2; font-size:.9375rem; text-align:right; max-width:16ch}
}
@container (max-width:150px){ .blk .b-hrs{display:none} }

/* hero specimen: one plane sharp, the others held soft. Hover moves the focus. */
.map[data-dof] .blk{opacity:var(--opacity-peripheral); filter:blur(var(--blur-peripheral))}
.map[data-dof] .blk[data-sharp]{opacity:1; filter:none}
@media (hover:hover) and (pointer:fine){
  .map[data-dof]:hover .blk{opacity:var(--opacity-peripheral); filter:blur(var(--blur-peripheral))}
  .map[data-dof]:hover .blk:hover{opacity:1; filter:none}
}

/* locked: the proportions and percentages exist; the words wait for her */
.map .veil{transition:filter 700ms var(--ease-out), opacity 700ms var(--ease-out)}
.map[data-locked="true"] .veil{filter:blur(7px); opacity:.62; user-select:none}
.map[data-locked="false"] .blk:nth-of-type(1) .veil{transition-delay:0ms}
.map[data-locked="false"] .blk:nth-of-type(2) .veil{transition-delay:120ms}
.map[data-locked="false"] .blk:nth-of-type(3) .veil{transition-delay:240ms}
.map[data-map="plan"][data-locked="true"]{aspect-ratio:1 / 1}
.map .lockpill{position:absolute; z-index:4; left:50%; top:50%; transform:translate(-50%,-50%); white-space:nowrap;
  transition:opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out)}
.map[data-locked="false"] .lockpill{opacity:0; transform:translate(-50%,-50%) scale(.96); pointer-events:none}

/* ============================================================ THE PLAN */
.plan{padding-top:clamp(112px,16vh,168px)}
.plan-head{display:grid; gap:14px; max-width:760px; margin-bottom:var(--space-grouped)}
.plan-head .lede{max-width:40ch}
.headswap{display:grid}
.headswap > *{grid-area:1 / 1; transition:opacity 400ms var(--ease-out), filter 400ms var(--ease-out), transform 400ms var(--ease-out)}
.headswap [data-on="false"]{opacity:0; filter:blur(6px); transform:translate3d(0,6px,0); pointer-events:none}
.plan-body{display:grid; gap:var(--space-grouped)}
@media (min-width:980px){
  .plan-body[data-locked="true"]{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); align-items:center; gap:clamp(40px,5vw,72px)}
}
.plan-foot{display:flex; flex-wrap:wrap; gap:8px 28px; align-items:center; justify-content:space-between}
.plan-foot .caption{max-width:56ch}
.plan-note{font-size:.9375rem; color:var(--color-text-secondary); margin:0; max-width:52ch}
.share{display:flex; gap:20px; flex-wrap:wrap}

.unlock{display:grid; gap:14px; align-content:start}
.unlock .row2{display:grid; gap:10px}
.input{width:100%; min-height:54px; padding:15px 20px; border-radius:var(--radius-input); border:0;
  background:var(--color-surface-default); color:var(--color-text-primary); font-size:1.0625rem; letter-spacing:-.01em;
  transition:background-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out)}
.input::placeholder{color:var(--color-text-disabled)}
.input:focus{outline:none; background:rgb(255 255 255 / .86); box-shadow:var(--shadow-glass)}
.input:focus-visible{outline:2px solid var(--color-border-focus); outline-offset:2px}
.input[aria-invalid="true"]{background:var(--color-feedback-error-bg)}
.lbl{font-size:var(--type-overline); letter-spacing:var(--track-overline); text-transform:uppercase; color:var(--color-text-muted); font-weight:500}
.unlock .btn{width:100%}
.unlock-out{transition:opacity 150ms var(--ease-out), filter 150ms var(--ease-out), transform 150ms var(--ease-out)}
.unlock-out[data-gone="true"]{opacity:0; filter:blur(6px); transform:translate3d(0,-6px,0); pointer-events:none}
.shared{justify-self:start}

/* after the plan: the chapters arrive in their own time */
.after{transition:opacity 700ms var(--ease-out) 500ms, transform 700ms var(--ease-out) 500ms}
.after[data-on="false"]{opacity:0; transform:translate3d(0,16px,0); pointer-events:none; visibility:hidden}

.less{padding:var(--space-chaptered) 0 calc(var(--space-chaptered) * .75); display:grid; gap:var(--space-grouped); max-width:860px}
.less .lede{max-width:46ch}
.less .display{max-width:13ch; padding-top:var(--space-separated)}

.founder{position:relative; padding:var(--space-separated) 0 var(--space-chaptered)}
.founder::before{content:''; position:absolute; inset:0 calc(50% - 50vw); z-index:-1;
  background:linear-gradient(180deg, transparent, rgb(234 231 225 / .7) 18%, rgb(234 231 225 / .7) 82%, transparent)}
.founder-grid{display:grid; gap:var(--space-grouped)}
@media (min-width:980px){ .founder-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(48px,7vw,120px)} .founder-side{position:sticky; top:120px; align-self:start} }
.founder-side{display:grid; gap:14px}
/* the open plan: title, then the week, then the percentages, then the rest */
.plan.is-open{display:flex; flex-direction:column}
.plan.is-open > .plan-head{order:0}
.plan.is-open > .sched{order:1; padding-top:clamp(28px,5vw,56px)}
.plan.is-open > .plan-body{order:2; margin-top:var(--space-separated)}
.plan.is-open > .less{order:3}
.plan.is-open > .founder{order:4; padding-bottom:var(--space-separated)}
.plan.is-open > .deal{order:5}
.plan.is-open > .foot{order:6}
.plan.is-open .less .display{padding-top:0; max-width:13ch}
.founder-media{margin:8px 0 0; border-radius:var(--radius-card); overflow:hidden; max-width:420px; box-shadow:var(--shadow-xl)}
.founder-media img,.founder-media video{display:block; width:100%; height:auto; aspect-ratio:4 / 5; object-fit:cover; object-position:50% 30%}
.story{display:grid; gap:22px; max-width:36em}
.story p{margin:0; font-size:var(--type-body-lg); line-height:1.6; color:var(--color-text-secondary); text-wrap:pretty}
.story p.lead{font-family:var(--font-display); font-size:var(--type-h3); line-height:1.25; letter-spacing:var(--track-h3); color:var(--color-text-primary)}
.story p.close{color:var(--color-text-primary)}
.sign{display:flex; align-items:center; gap:12px; padding-top:12px; border-top:1px dotted var(--color-border-default)}
.sign svg{width:18px; height:18px}

.next{padding:var(--space-separated) 0 var(--space-chaptered); display:grid; gap:var(--space-grouped); max-width:720px}
.next .lede{max-width:44ch}
.next .act{display:flex; flex-wrap:wrap; gap:14px 28px; align-items:center}

/* ============================================================ THE WEEK */
.sched{padding:var(--space-separated) 0 0; display:grid; gap:var(--space-grouped)}
.sched-head{display:grid; gap:14px; max-width:680px}
.sched-head .lede{max-width:44ch}
.week{position:relative; overflow:hidden; border-radius:var(--radius-sheet); padding:clamp(18px,3vw,32px);
  background:linear-gradient(170deg, #D5E0EA 0%, #E8ECEE 50%, #F1E7DE 100%);
  box-shadow:inset 0 0 0 1px rgb(255 255 255 / .6), var(--shadow-lg); display:grid; gap:18px; max-width:880px}
.week::after{content:''; position:absolute; inset:0; background-image:var(--noise); opacity:.04; mix-blend-mode:multiply; pointer-events:none}
.week > *{position:relative; z-index:1}
.week-top{display:flex; justify-content:space-between; align-items:baseline; gap:12px}
.days{display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:clamp(4px,1vw,10px)}
.day{display:grid; justify-items:center; gap:6px; padding:12px 0 12px; border-radius:18px;
  background:rgb(255 255 255 / .75); box-shadow:inset 0 0 0 1px rgb(255 255 255 / .9), 0 2px 8px rgb(62 73 54 / .05); color:var(--pf-ink);
  transition:transform var(--duration-press) var(--ease-out), background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out)}
.day:active{transform:scale(.97)}
.day .dn{font-family:var(--font-mono); font-size:10px; letter-spacing:.02em; color:var(--color-text-secondary)}
.day .dd{font-family:var(--font-display); font-size:clamp(1.125rem, .9rem + 1vw, 1.5rem); font-weight:500; letter-spacing:-.02em; line-height:1}
.day .dots{display:flex; gap:3px; min-height:6px}
.day .dots i{display:block; width:6px; height:6px; border-radius:50%; background:var(--plate); background-size:400% 400%}
.day.is-free{background:rgb(255 255 255 / .32)}
.day.is-free .dd{color:var(--color-text-secondary)}
/* the chosen day: the full stop, like a dark date on a calendar */
.day[aria-selected="true"]{background:var(--pf-ink); color:var(--pf-bone); box-shadow:0 8px 24px rgb(62 73 54 / .14)}
.day[aria-selected="true"] .dn,.day[aria-selected="true"] .dd{color:var(--pf-bone)}
.day[aria-selected="true"] .dots i{box-shadow:0 0 0 1px rgb(244 242 238 / .5)}
[data-plate="1"]{--plate:linear-gradient(155deg, #A6C1D8, #CBD9E4)}
[data-plate="2"]{--plate:linear-gradient(155deg, #CBD9E4, #F4F2EE)}
[data-plate="3"]{--plate:linear-gradient(155deg, #EFE3D8, #D8CDBD)}
.dayplan{display:grid; gap:8px; min-height:120px; padding:18px; border-radius:24px; background:rgb(255 255 255 / .78);
  box-shadow:inset 0 0 0 1px rgb(255 255 255 / .95), 0 8px 28px rgb(62 73 54 / .06)}
.dayplan .overline{margin-bottom:4px}
.dayplan .free{margin:0; font-size:1.0625rem; color:var(--color-text-secondary)}
.slot-row{position:relative; display:grid; grid-template-columns:auto 1fr auto; gap:16px; align-items:center; padding:14px 16px 14px 20px;
  border-radius:18px; background:var(--plate); background-size:180% 180%}
.slot-time{margin:0; font-size:clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem); line-height:1; color:var(--pf-ink)}
.slot-body{min-width:0}
.slot-area{margin:0 0 3px; font-size:var(--type-overline); letter-spacing:var(--track-overline); text-transform:uppercase; font-weight:500; color:var(--pf-ink)}
.slot-focus{margin:0; font-size:1rem; line-height:1.3; color:var(--pf-ink); overflow-wrap:anywhere}
.slot-len{margin:0; font-family:var(--font-mono); font-size:11px; color:var(--color-text-secondary); white-space:nowrap}
.sched-act{display:flex; flex-wrap:wrap; gap:12px; align-items:center}
.gcal{display:grid; gap:12px; max-width:880px}
.gcal-links{display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:8px}
.gcal-link{display:grid; gap:4px; padding:14px 18px; border-radius:18px; text-decoration:none; color:var(--pf-ink);
  background:var(--plate); background-size:180% 180%; box-shadow:inset 0 0 0 1px rgb(255 255 255 / .6);
  transition:transform var(--duration-press) var(--ease-out)}
.gcal-link:active{transform:scale(.97)}
.gl-area{font-size:var(--type-overline); letter-spacing:var(--track-overline); text-transform:uppercase; font-weight:500}
.gl-when{font-family:var(--font-mono); font-size:11px; color:var(--color-text-secondary)}
.gcal .ghost{justify-self:start}
.sched-note{max-width:52ch}
@media (max-width:480px){
  .day{padding:10px 0; border-radius:14px}
  .day .dots i{width:5px; height:5px}
  .slot-row{grid-template-columns:auto 1fr; padding:12px 14px}
  .slot-len{grid-column:2}
  .sched-act .btn,.sched-act .btn-glass{flex:1 1 100%}
}

/* ============================================================ THE OFFER (as on the founding page) */
.deal{padding:var(--space-separated) 0}
.deal-stage{position:relative; overflow:hidden; border-radius:var(--radius-sheet); padding:clamp(24px,5vw,88px);
  background:linear-gradient(155deg,#A6C1D8 0%,#CBD9E4 45%,#EFE3D8 100%); background-size:140% 160%; background-position:30% 0;
  box-shadow:var(--shadow-xl)}
.deal-stage::after{content:''; position:absolute; inset:0; background-image:var(--noise); opacity:.04; mix-blend-mode:multiply; pointer-events:none}
.deal-grid{position:relative; z-index:1; display:grid; gap:clamp(40px,5vw,80px); align-items:start}
@media (min-width:960px){ .deal-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)} .deal-card{position:sticky; top:110px} }
.deal-what .overline{margin:0 0 var(--space-grouped); color:var(--color-text-secondary)}
.deal-title{max-width:18ch}
.deal-list{list-style:none; margin:var(--space-separated) 0 0; padding:0}
.deal-list li{display:grid; grid-template-columns:44px 1fr; gap:14px; align-items:baseline; padding:20px 0;
  border-top:1px dotted rgb(20 21 15 / .22); transition:opacity var(--duration-base) var(--ease-out), filter var(--duration-base) var(--ease-out)}
.deal-list li:last-child{border-bottom:1px dotted rgb(20 21 15 / .22)}
.deal-list .n{font-family:var(--font-mono); font-size:11px; letter-spacing:.02em; color:var(--color-text-secondary)}
.deal-list .h3{display:block; font-family:var(--font-display); font-size:var(--type-h3); line-height:1.2; letter-spacing:var(--track-h3); color:var(--pf-ink)}
@media (hover:hover) and (pointer:fine){ .deal-list:hover li{opacity:.5; filter:blur(1.5px)} .deal-list:hover li:hover{opacity:1; filter:none} }
.deal-we{margin:var(--space-grouped) 0 0; max-width:40ch; font-size:var(--type-body-lg); line-height:1.55; color:var(--pf-ink)}
.deal-card{display:flex; flex-direction:column; gap:var(--space-related); container-type:inline-size; border-radius:var(--radius-panel); padding:clamp(22px,3.4vw,44px);
  background:rgb(255 255 255 / .72); -webkit-backdrop-filter:blur(32px) saturate(1.2); backdrop-filter:blur(32px) saturate(1.2);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .45), 0 8px 32px rgb(62 73 54 / .08)}
.deal-pill{display:inline-flex; align-self:flex-start; align-items:center; gap:8px; padding:8px 14px; border-radius:var(--radius-pill);
  background:var(--pf-bone); box-shadow:inset 0 1px 0 rgb(255 255 255 / .6), 0 4px 16px rgb(62 73 54 / .06);
  font-size:var(--type-overline); letter-spacing:var(--track-overline); text-transform:uppercase; font-weight:500; color:var(--pf-ink)}
.deal-pill .pip{width:6px; height:6px; border-radius:50%; background:var(--pf-ink)}
.deal-price{display:flex; align-items:baseline; margin:4px 0 0; font-size:clamp(2.5rem, 18cqi, 5rem); line-height:.9; white-space:nowrap;
  transition:opacity 120ms var(--ease-out), filter 120ms var(--ease-out)}
.deal-price.is-swapping{opacity:0; filter:blur(3px)}
/* monthly / yearly: a pill with a sliding glass thumb */
.period{position:relative; display:grid; grid-template-columns:1fr 1fr; align-self:stretch; padding:4px; border-radius:var(--radius-pill);
  background:rgb(20 21 15 / .06); box-shadow:inset 0 1px 2px rgb(62 73 54 / .06)}
.period::before{content:''; position:absolute; top:4px; bottom:4px; left:4px; width:calc(50% - 4px); border-radius:var(--radius-pill);
  background:#fff; box-shadow:0 2px 10px rgb(62 73 54 / .10), inset 0 1px 0 #fff; transition:transform 220ms var(--ease-out)}
.period[data-value="yearly"]::before{transform:translateX(100%)}
.period button{position:relative; z-index:1; min-height:40px; border-radius:var(--radius-pill); font-size:.875rem; color:var(--color-text-secondary);
  transition:color var(--duration-fast) var(--ease-out), transform var(--duration-press) var(--ease-out)}
.period button:active{transform:scale(.97)}
.period button[aria-checked="true"]{color:var(--pf-ink); font-weight:500}
.deal-anchor{margin:0; font-size:15px; line-height:1.55; color:var(--color-text-secondary); max-width:34ch}
.deal-btn{width:100%; min-height:58px; font-size:1rem; margin-top:var(--space-related)}
.deal-fine{max-width:38ch}

/* ============================================================ small screens */
@media (max-width:640px){
  .hero{padding-top:96px; align-items:start}
  .hero-copy{padding-top:24px}
  .chip{font-size:.9375rem; padding-right:16px}
  .row{padding:16px 18px 10px}
  .less .display{padding-top:var(--space-grouped)}
  .founder{padding-bottom:var(--space-separated)}
}

/* ============================================================ reduced motion
   Movement goes. Opacity stays, because it still explains what changed. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; animation-delay:0ms !important}
  .spin circle{animation:none; stroke-dasharray:.7 1}
  .view[data-state],.headswap > *,.after,.unlock-out,.map .veil,.blk,.chip,.tile,.q,.atmos{transform:none !important}
  .view[data-state="out"],.view[data-state="pre"],.headswap [data-on="false"],.unlock-out[data-gone="true"]{filter:none}
  .map .veil{transition-duration:200ms; transition-delay:0ms !important}
  .after{transition-duration:200ms; transition-delay:0ms}
  body.is-settling{transition:none}
  .period::before{transition:none}
}