/* getleva.app v2 · everything below the first viewport.
   Critical CSS (tokens, nav, hero, the phone component) is inline in index.html.
   Static chapter layout = the permanent layout for reduced motion, ?noanim=1, save-data and no-JS.
   Widths are in em/rem, never ch: ch follows the active font's zero glyph, so it reflows when web fonts swap in. */

.wrap{width:var(--cw);margin:0 auto}
h2{font:600 clamp(2.25rem,1.2rem + 3.6vw,4rem)/1.04 var(--f-display);letter-spacing:-.03em;color:var(--ink);text-wrap:balance}
h2 .tone-3{display:block;color:var(--ink-3)}

/* ================= THE WEEK: static chapters ================= */
.week{position:relative;z-index:2;--colw:calc(100vw - 2*var(--g))}
.beats{display:grid;grid-template-columns:minmax(0,1fr);row-gap:clamp(96px,13vw,184px)}
.beat{position:relative}
.beat-copy{position:relative;z-index:2}
/* day words stay at or under the hero H1 */
.dayword{font:600 min(4.75rem,calc(var(--colw)/8))/1 var(--f-display);letter-spacing:-.035em;color:var(--ink);white-space:nowrap}
.wrail{position:relative;display:inline-grid;grid-template-columns:repeat(6,28px);margin-top:20px;padding-bottom:12px;font:600 .75rem/1 var(--f-text);letter-spacing:.12em;color:var(--ink-3)}
.wrail::before,.wrail::after{content:"";position:absolute;left:0;bottom:0;width:160px;height:2px;border-radius:2px;background:var(--hairline)}
.wrail::after{background:var(--ink);transform-origin:0 50%;transform:scaleX(calc((var(--day) + .28)/5.28))}
.wrail .on{color:var(--ink)}
.cap{margin-top:28px;max-width:15.7em;font:500 clamp(1.25rem,.9rem + 1.2vw,1.875rem)/1.25 var(--f-display);letter-spacing:-.015em;color:var(--ink-3);text-wrap:balance}
.cap .lit{color:var(--ink)}
.cap + .cap{margin-top:.6em}
/* One phone, one column, five states. --ps follows the hero's steps; .phone is laid out at that size (zoom). */
.beat-visual{position:relative;display:flex;justify-content:center;margin-top:48px;--ps:.74}
@media (min-width:360px){.beat-visual{--ps:.79}}
@media (min-width:372px){.beat-visual{--ps:.8213}}
@media (min-width:414px){.beat-visual{--ps:.92}}
@media (min-width:446px){.beat-visual{--ps:1}}

/* night band: Sunday night + the counter-move */
.night{position:relative;z-index:1;margin:0 clamp(0px,1vw,12px);padding:clamp(88px,11vw,168px) 0 clamp(72px,9vw,136px);border-radius:clamp(28px,3.6vw,48px);overflow:hidden;overflow:clip;
  background:radial-gradient(120% 46% at 70% 9%,#201E1A 0%,#141311 52%,#0E0D0B 100%) #141311;color:var(--n-ink-2)}
.night :focus-visible{outline-color:var(--jade)}
.night .beats{row-gap:clamp(72px,9vw,128px)}
.night .dayword{color:var(--n-ink)}
.night .wrail{color:var(--n-ink-3)}
.night .wrail::before{background:rgba(255,255,255,.12)}
.night .wrail::after{background:var(--n-ink)}
.night .wrail .on{color:var(--n-ink)}
.night .cap{color:var(--n-ink-3)}
.night .cap .lit{color:var(--n-ink)}
.quote{margin-top:36px;padding-top:24px;max-width:30em;border-top:1px solid rgba(255,255,255,.1);font:400 1.0625rem/1.5 var(--f-text);color:var(--n-ink-2)}
.quote p{text-wrap:pretty}
.quote footer{margin-top:8px;font:500 .875rem/1.45 var(--f-text);color:var(--n-ink-3)}
/* Sunday: the phone sinks into the dark (the fade is invisible on night). The crop box keeps 48px of headroom so the shadow is never cut. */
.b-sun .device-crop{--cx:clamp(0px,calc((100vw - 414px*var(--ps))/2),140px);position:relative;height:calc(868px*var(--ps)*var(--crop,.68) + 48px);padding:48px var(--cx) 0;margin:-48px calc(-1*var(--cx)) 0;
  -webkit-mask-image:linear-gradient(#000 0,#000 calc(100% - 140px),transparent 100%);mask-image:linear-gradient(#000 0,#000 calc(100% - 140px),transparent 100%)}
.lamp{position:absolute;z-index:0;left:50%;top:-84px;width:min(560px,170%);height:540px;transform:translateX(-50%);filter:blur(18px);pointer-events:none}
.lamp::before{content:"";position:absolute;inset:0;clip-path:polygon(45% 0,55% 0,100% 100%,0 100%);background:linear-gradient(180deg,rgba(255,228,190,.38) 0%,rgba(255,228,190,.12) 40%,rgba(255,228,190,0) 70%)}
.lamp::after{content:"";position:absolute;left:50%;top:-20px;width:200px;height:90px;margin-left:-100px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,232,200,.34),rgba(255,232,200,0))}
.b-sun .beat-visual{margin-top:96px}
.b-sun .device-mount{z-index:1}
.b-sun .phone .body{box-shadow:inset 2px 2px 2px -1px rgba(255,236,208,.3),inset 0 0 0 1px #7a756c,inset 0 0 0 2.5px #2b2b2f,inset 0 0 0 4px #0b0b0d,0 -1px 0 1px rgba(255,236,208,.14),0 -20px 60px rgba(255,222,178,.08),0 40px 100px rgba(0,0,0,.6)}

/* the counter-move: day words, the maths under them, the card beside them, the week strip below */
.b-move{margin-top:clamp(8px,2vw,32px)}
.dayword.pair{display:grid;justify-items:start;row-gap:.02em}
.dw-old{position:relative;color:var(--n-ink-3);opacity:.6}
.dw-old::after{content:"";position:absolute;left:-.03em;right:-.01em;top:54%;height:.062em;border-radius:.03em;background:var(--n-ink-2);transform-origin:0 50%;transform:scaleX(var(--s,1))}
.dw-new{color:var(--n-ink)}
/* The three stops are a stage-2 hook. In the static chapter their wording already sits on the strip markers and under the maths. */
.stops{display:none;gap:14px;margin-top:32px;max-width:30em;font:400 1.0625rem/1.45 var(--f-text);color:var(--n-ink-2)}
html.live .stops{display:grid}
.stops li{position:relative;padding-left:30px}
.stops b{font-weight:600;color:var(--n-ink)}
.stops li::before{content:"";position:absolute;left:0;top:.28em;width:14px;height:14px;border-radius:50%}
.stops [data-stop="thu"]::before{border:1.5px dashed rgba(241,239,232,.5)}
.stops [data-stop="tue"]::before{width:10px;height:10px;margin:2px;border:2px solid var(--jade)}
.stops [data-stop="mon"]::before{background:var(--jade);box-shadow:0 0 0 3px rgba(79,184,156,.22)}
.move-stage{display:grid;grid-template-columns:minmax(0,1fr);row-gap:40px;margin-top:36px}

/* task card as a callout (same recipe as the in-phone card, laid out in flow).
   Story text under 18px uses a darker muted than the app (AA): #6F6A60 on light, #9A9589 on dark. */
.task.co{position:relative;left:auto;right:auto;transform:none;height:auto;opacity:1;width:min(420px,100%);font:400 15px/1.6 var(--f-ui);letter-spacing:-.006em;color:var(--k);text-align:left;font-variant-numeric:tabular-nums}
.ui[data-theme="light"] .task.co{--mut:#6F6A60}
.ui[data-theme="dark"] .task.co{--mut:#9A9589}
.task.co .startby{opacity:1;transform:none}
.task.co .t-title{white-space:normal}
.why{margin:0 0 12px;font-size:13px;line-height:1.5;color:var(--k2)}
.move-stage .task.co{--rail:var(--fnt);box-shadow:var(--sh),inset 0 1px 0 rgba(255,236,208,.1),0 0 0 1px rgba(79,184,156,.3),0 0 60px rgba(79,184,156,.1)}
.co .t-foot{height:auto;min-height:22px}

.maths{display:flex;align-items:flex-start;gap:20px clamp(18px,3.2vw,48px)}
.m-term{min-width:0}
.m-term b{display:block;font:600 clamp(2.5rem,1.6rem + 3.2vw,4.25rem)/1 var(--f-display);letter-spacing:-.035em;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--n-ink)}
.m-term small{display:block;margin-top:12px;max-width:13em;font:500 .875rem/1.4 var(--f-text);color:var(--n-ink-3);text-wrap:balance}
.m-term small span{font-variant-numeric:tabular-nums;white-space:nowrap}
.m-est b{color:var(--jade)}
.m-buf b{color:var(--ochre-d)}
@media (max-width:599px){
  /* one line of maths: three numbers on a row, each caption wrapping under its own term */
  .maths{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.1fr) minmax(0,1.18fr);column-gap:12px}
  .m-term b{font-size:min(2.25rem,9.4vw)}
  .m-term small{max-width:none;margin-top:8px;font-size:.75rem}
}

/* week strip (runway + markers). Themeable: night by default, .wk-day for paper.
   One axis for everything: day centres sit at 10% + n*20%, and the runway runs Monday centre to Friday centre. */
.wk{position:relative;--wk-ink:var(--n-ink);--wk-mut:var(--n-ink-3);--wk-line:rgba(255,255,255,.16);--wk-start:var(--jade);--wk-due:var(--coral);--wk-buf:var(--ochre-d);--wk-on:#0F1412;font-family:var(--f-ui);font-variant-numeric:tabular-nums}
.wk-days{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));text-align:center}
.wk-days li{position:relative}
.wk-days b{display:block;font:700 .6875rem/1 var(--f-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--wk-mut)}
.wk-days .d{display:block;min-height:1em;margin-top:9px;font:700 clamp(1.25rem,1rem + 1vw,2rem)/1 var(--f-ui);letter-spacing:-.02em;color:var(--wk-ink)}
html:not(.js) .wk-days .d{display:none}
.wk-days .due b,.wk-days .due .d{color:var(--wk-due)}
.wk-days em{position:absolute;left:50%;top:calc(100% + 8px);transform:translateX(-50%);padding:2px 7px;border-radius:6px;font:700 .65625rem/1.5 var(--f-ui);font-style:normal;letter-spacing:.1em;text-transform:uppercase;
  color:var(--wk-due);background:rgba(224,112,95,.14);background:color-mix(in srgb,var(--wk-due) 14%,transparent);border:1px solid rgba(224,112,95,.26);border-color:color-mix(in srgb,var(--wk-due) 26%,transparent)}
.wk-run{display:flex;gap:3px;width:80%;height:30px;margin:48px 0 0 10%}
.wk-run>span{position:relative;display:flex;align-items:center;min-width:0;padding:0 8px;overflow:hidden;white-space:nowrap;font:600 .75rem/1 var(--f-text);letter-spacing:0;color:var(--wk-on)}
.run-buf{flex:0 0 calc(25% - 1.5px);border-radius:10px 3px 3px 10px;background:var(--wk-buf)}   /* Mon to Tue: the one day the buffer adds */
.run-est{flex:1;border-radius:3px 10px 10px 3px;background:var(--wk-start)}                    /* Tue to Fri: the estimate alone */
.wk-run .lg,.wk-run .md{display:none}
.wk-track{position:relative;height:52px;margin-top:20px}
.wk-line{position:absolute;left:10%;right:10%;top:7px;height:1px;background:var(--wk-line)}
.wk-mark{position:absolute;left:calc(10% + var(--at)*20%);top:0;width:0;display:flex;flex-direction:column;align-items:center}
.wk-mark i{flex:none;width:14px;height:14px;border-radius:50%}
.wk-mark em{margin-top:9px;font:600 .6875rem/1.25 var(--f-ui);font-style:normal;white-space:nowrap;color:var(--wk-mut)}
.m-start i{background:var(--wk-start);box-shadow:0 0 0 3px rgba(79,184,156,.22);box-shadow:0 0 0 3px color-mix(in srgb,var(--wk-start) 22%,transparent)}
.m-start em{color:var(--wk-start)}
.m-tue i{width:10px;height:10px;margin:2px 0;border:2px solid var(--wk-start);background:var(--night)}
.m-ghost i{border:1.5px dashed rgba(160,155,145,.7);border-color:color-mix(in srgb,var(--wk-ink) 50%,transparent)}
.m-due i{width:8px;height:8px;margin:3px 0;background:var(--wk-due)}
.wk-mark .lg{display:none}
.checkline{display:flex;align-items:center;gap:10px;margin-top:28px;font:500 1rem/1.4 var(--f-text);color:var(--n-ink-2)}
.checkline i{flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--jade)}
.checkline svg{width:12px;height:12px;fill:none;stroke:#0F1412;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.footnote{margin-top:10px;font:400 .8125rem/1.5 var(--f-text);color:var(--n-ink-3)}
@media (min-width:600px){.wk-run>span{padding:0 12px}.wk-run .md{display:inline}}
@media (max-width:359px){.wk-mark em{font-size:.625rem}}

/* daylight chapters: the same phone, in the same column, set in a studio tile and cropped by the tile's edge */
.days{position:relative;z-index:0;padding:clamp(88px,11vw,160px) 0 clamp(96px,12vw,176px)}
.dawn{position:absolute;left:calc(50% - 50vw);top:calc(-1*clamp(28px,3.6vw,48px));width:100vw;height:min(560px,70vh);pointer-events:none;
  background:radial-gradient(90% 100% at 50% 0%,rgba(255,190,130,.4) 0%,rgba(255,214,170,.2) 38%,rgba(255,214,170,0) 72%)}
.days .beat-visual{display:block}
.days .device-mount{width:100%;max-width:520px;margin-left:auto;margin-right:auto}
.days .device-crop{position:relative;overflow:hidden;height:calc(632px*var(--ps) + 28px);padding-top:28px;margin:0 -8px;border-radius:28px;
  background:linear-gradient(180deg,var(--studio) 0%,#ECE8DF 100%);box-shadow:inset 0 0 0 1px rgba(33,31,26,.035)}
@media (max-width:359px){.days .beat-visual{--ps:.7}}
@media (min-width:414px) and (max-width:469px){.days .beat-visual{--ps:.9}}
@media (min-width:446px) and (max-width:469px){.days .phone{--up:1}}
@media (min-width:600px){.days .device-crop{margin:0;height:calc(632px*var(--ps) + 40px);padding-top:40px}}
.callout{position:relative;z-index:3}
/* Wednesday: no start-by pill next to START TODAY (the card closes up) */
.b-wed .t-deck{height:129px}
.b-wed .startby{display:none}

/* morning brief card */
.brief{width:384px;padding:24px;border-radius:28px;background:#FDFCF9;border:1px solid rgba(33,31,26,.07);text-align:left;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 1px 3px rgba(33,31,26,.06),0 10px 24px rgba(33,31,26,.08),0 28px 64px rgba(33,31,26,.12);
  font:400 15px/1.5 var(--f-ui);letter-spacing:-.006em;color:#211F1A;font-variant-numeric:tabular-nums}
.b-date{font-size:13px;color:#6F6A60}
.b-hi{margin:2px 0 20px;font:700 32px/1.1 var(--f-serif);letter-spacing:-.03em;white-space:nowrap}
.b-eye{margin-bottom:12px;font:600 10px/1.2 var(--f-ui);letter-spacing:.2em;text-transform:uppercase;color:#6F6A60}
.b-row{display:flex;align-items:center;padding:15px 16px;margin-bottom:10px;border-radius:16px;background:rgba(255,255,255,.72);border:1px solid rgba(33,31,26,.07);box-shadow:0 1px 2px rgba(33,31,26,.04)}
.b-row .n{flex:none;width:26px;font:700 18px/1 var(--f-ui);color:#2C8270}
.b-row .t{min-width:0;overflow:hidden;text-overflow:ellipsis;font:600 15px/1.3 var(--f-ui);letter-spacing:-.01em;white-space:nowrap}
.b-row .h{margin:0 auto 0 8px;font-size:11px;color:#6F6A60}
.b-row .bd{font:700 10px/1.4 var(--f-ui);text-transform:uppercase;letter-spacing:.07em;padding:4px 10px;border-radius:999px;color:#1F6B5A;background:rgba(31,107,90,.12);border:1px solid rgba(31,107,90,.24);white-space:nowrap}
.b-spark{display:flex;gap:10px;margin-top:14px;padding:14px 16px;border-radius:16px;background:#E5EEEB;border:1px solid rgba(31,107,90,.18);font-size:13px;line-height:1.5}
.b-spark svg{flex:none;width:14px;height:14px;margin-top:3px;fill:none;stroke:#1F6B5A;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.b-go{margin-top:18px;padding:16px;border-radius:16px;text-align:center;font:700 15px/1 var(--f-ui);color:#fff;background:linear-gradient(135deg,#B0771E,#94621A);box-shadow:0 8px 24px rgba(176,119,30,.3)}
.sheet .brief{width:auto;padding:20px}
/* on the page the card ends at the sparkle line; the app's ochre button stays in the in-phone sheet only */
.callout .b-go{display:none}
.callout .b-row .h{white-space:nowrap}
.callout .b-row{padding:15px 14px}
.callout .b-row .n{width:24px}
.callout .b-row .t{white-space:normal;line-height:1.2}   /* a long task name wraps, it is never cut */
.callout .b-row .bd{margin-left:8px}
.callout .b-hi{font-size:min(32px,8.2vw)}
@media (max-width:420px){.callout .brief{padding:20px 16px}.callout .b-row{padding:14px 12px}.callout .b-row .t{font-size:14px}.callout .b-row .h{margin-left:6px}.callout .b-row .bd{padding:3px 8px}}

.duo{position:relative;display:flex;flex-direction:column;align-items:center}
.b-mon .callout{width:min(384px,100%);margin-top:calc(-316px*var(--ps))}
.b-mon .callout .brief{width:100%}
.b-fri .cta-row{align-items:flex-start;margin-top:32px}

/* Thursday payoff */
.b-thu{text-align:center}
.b-thu h3{font:600 clamp(2rem,1.1rem + 3.4vw,4rem)/1.06 var(--f-display);letter-spacing:-.03em;color:var(--ink);text-wrap:balance}
.b-thu h3 span{display:block}
.wk.wk-day{--wk-ink:var(--ink);--wk-mut:var(--ink-3);--wk-line:rgba(33,31,26,.16);--wk-start:var(--pine);--wk-due:var(--clay);max-width:720px;margin:clamp(40px,6vw,72px) auto 0}
.wk-day .wk-days em{background:rgba(178,58,46,.1);border-color:rgba(178,58,46,.24)}
.wk-day .m-start i{box-shadow:0 0 0 3px rgba(31,107,90,.2)}
.wk-day .m-ghost i{border-color:rgba(33,31,26,.5)}
.wk-day .wk-track{margin-top:44px}

@media (min-width:1024px){
  .week{--colw:calc(var(--cw)*.5 - 12px)}
  /* every chapter: copy in columns 1-6, the phone in columns 8-12, phone top 96px above the day word */
  .beat{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start}
  .beat-copy{grid-column:1/span 6;padding-top:96px}
  .beat-visual{grid-column:8/span 5;margin-top:0;--ps:.9}
  .days .beat-visual{--ps:.82}
  .days .phone{--up:1}
  .b-sun .device-crop{--crop:.74}
  .b-move{align-items:start}
  .move-head{grid-column:1/span 7;grid-row:1}
  .move-stage{display:contents}
  .maths{grid-column:1/span 7;grid-row:2;margin-top:40px}
  .m-res small{max-width:none;white-space:nowrap}
  .move-stage>.ui{grid-column:8/span 5;grid-row:1/span 2;align-self:end;justify-self:end;width:min(420px,100%)}
  .wk{grid-column:1/-1;grid-row:3;margin-top:72px}
  .wk.wk-day{margin-top:clamp(40px,6vw,72px)}
  .wk-run .lg,.wk-mark .lg{display:inline}
  .wk-run .sm,.wk-mark .sm{display:none}
  .move-foot{grid-column:1/-1;grid-row:4;display:flex;justify-content:space-between;align-items:baseline;gap:24px;margin-top:36px}
  .move-foot .checkline,.move-foot .footnote{margin-top:0}
  .b-mon .callout{transform:translateX(-96px)}
  .lamp{top:calc(-1*clamp(88px,11vw,168px) - 40px);width:560px;height:calc(clamp(88px,11vw,168px) + 560px)}
  .lamp::after{top:-30px;width:220px;height:120px;margin-left:-110px;background:radial-gradient(closest-side,rgba(255,232,200,.5),rgba(255,232,200,0))}
  .b-sun .beat-visual{margin-top:0}
  .b-thu{display:block}
}
@media (min-width:1200px){.beat-visual,.days .beat-visual{--ps:1}.days .phone{--up:0}}

/* ================= static: hooks that only the live stage uses ================= */
.dw-x,.lcap,.fld,.legend,.dawnline,.mf{display:none}

/* ================= LIVE MODE (html.live): the night stage =================
   html.live is set by the head script before first paint (never under reduced motion, ?noanim=1 or save-data) and is
   removed again if the engine does not report ready. Everything below is keyed on it, so the static chapters above stay
   exactly as they are. The hero phone (#device, critical CSS) is sticky through the whole night; .night is its runway and
   .night > .wrap is the sticky stage that holds the type, the minutes-field canvas and the week strip.
   main.js sets --pz (phone zone, stacked layout), --tw (type column, split layout) and the shade box on #device. */
html.live .week{margin-top:calc(-1*var(--run))}
html.live .night{height:var(--run);margin:0;padding:0;border-radius:0;background:none;overflow:visible;pointer-events:none;
  --tt:calc(var(--pz,270px) + 14px);--tw:100%;--sb:max(8px,env(safe-area-inset-bottom));
  --dw:min(2.25rem,calc(var(--colw)/8.9));--cf:1.0625rem;--cg:8px;--mf:1.375rem;--df:1.125rem;--gr:18px;--gl:.75rem;
  --p1:clamp(5px,1.1svh - 2.2px,7px);--py:clamp(4.4px,.9svh - 1.6px,6px);--g1:clamp(7px,1.9svh - 5px,18px);--g2:clamp(7px,1.5svh - 3px,12px)}
html.live .night>.wrap{position:sticky;top:0;height:100svh}
/* until the engine reports ready there is no stage to show: a visitor who scrolls in that window sees the phone on paper, not half a stage */
html.live:not(.ready) .night>.wrap{visibility:hidden}
/* The minutes field is the first child of the counter-move beat, under the type: it draws over the strip and the hour blocks,
   and the day word, the caption and the maths always win. main.js sets its box: only where the dots can be.
   Outside live mode the canvas is display:none, so a halted engine leaves no block behind. */
html.live .night .mf{display:block;position:absolute;z-index:1;left:0;top:0;pointer-events:none}
html.live .night :is(.move-head,.maths){position:relative;z-index:2}
html.live .night .beats{display:block;position:relative;height:100%}
html.live:not([data-film]) .night .mf{display:none}
/* the stage lets the pointer through, but the line that is on screen can still be selected and copied (main.js names the beat whose day word is showing) */
html.live .night .beats:not([data-out]) :is(.stops li[data-on],.lcap[data-on],.b-sun .beat-copy[data-on] :is(.cap,.quote)),
html.live .night .beats[data-beat="sun"]:not([data-out]) .b-sun .dayword,html.live .night .beats[data-beat="move"]:not([data-out]) .b-move .dayword{pointer-events:auto}
html.live .night .beat{position:absolute;inset:0;display:block;margin:0}
html.live .night .beat-visual,html.live .night .wrail,html.live .move-stage>.ui{display:none}

/* day words: one masked line, the words roll through it. main.js scrubs each word's transform from the shown position
   (the eased scroll position), so there is no transition on the transform: every track shares one clock. */
html.live .night .dayword{font-size:var(--dw);line-height:1.14;height:1.26em;overflow:hidden;overflow:clip}
html.live .night .dayword>span:not(.sr-only){display:block;transform:translateY(112%);transition:color 300ms var(--ease-io),opacity 300ms var(--ease-io)}
html.live #dw-sun{transform:none}
html.live .dayword.pair{display:grid;grid-template-columns:auto auto minmax(0,1fr);column-gap:.26em;row-gap:0;justify-items:start}
html.live .dayword.pair>.dw-x{grid-area:1/1/2/4;color:var(--n-ink);white-space:nowrap}
/* the counter is the buffer beat's headline: 4h 00 runs to 6h 30 at day-word size */
html.live #dw-took{display:inline-block;margin-left:.12em;color:var(--ochre-d);font-variant-numeric:tabular-nums;transform:translateY(112%)}
html.live #dw-thu{grid-area:1/1;color:var(--n-ink);opacity:1}
html.live #dw-thu[data-struck]{color:var(--n-ink-3);opacity:.7}
html.live #dw-thu::after{transform:scaleX(var(--s,0))}
html.live #dw-mon{grid-area:1/2}

/* Sunday night: the caption, then the scroll-lit quote (same slot on phones, stacked on desktop) */
html.live .b-sun .beat-copy{position:absolute;left:0;top:var(--tt);width:var(--tw);padding:0;display:grid;grid-template-columns:minmax(0,1fr)}
/* one text at a time in the shared slot: main.js scrubs both (the caption is gone before the quote starts, at any scroll speed) */
html.live .b-sun .cap,html.live .b-sun .quote{grid-area:2/1;margin-top:var(--cg)}
html.live .b-sun .quote{opacity:0}
html.live .b-sun .cap{max-width:25em;font-size:var(--cf);line-height:1.28}
html.live .b-sun .cap .dim{display:block;opacity:.34;transition:opacity 400ms var(--ease-io)}
html.live .b-sun .cap .dim[data-lit]{opacity:1}
html.live .b-sun .quote{padding-top:0;border-top:0;max-width:none;font:500 var(--cf)/1.3 var(--f-display);letter-spacing:-.012em;color:var(--n-ink)}
html.live .b-sun .quote .w{opacity:var(--o,.5)}
html.live .b-sun .quote footer{margin-top:8px;font-size:.8125rem;letter-spacing:0;opacity:0;transition:opacity 400ms var(--ease-io)}
html.live .b-sun .quote footer[data-on]{opacity:1}

/* the counter-move: day words + one caption at a time, the maths, the hour blocks (canvas over #fld), the strip, one foot line */
html.live .night .b-move{display:flex;flex-direction:column;align-items:stretch;padding:var(--tt) 0 var(--sb)}
html.live .move-head{display:grid;grid-template-columns:minmax(0,1fr);width:var(--tw)}
html.live .stops{display:grid;grid-area:2/1;gap:0;margin-top:var(--cg);max-width:none;font:500 var(--cf)/1.28 var(--f-display);letter-spacing:-.012em}
html.live .stops li{grid-area:1/1;max-width:27em;padding-left:28px}
html.live .stops li::before{top:.36em}
html.live .lcap{display:block;grid-area:2/1;margin-top:var(--cg);max-width:27em}
/* captions are scrubbed by main.js (opacity and a short rise), in windows that never overlap: no two lines ever share the slot */
html.live .stops li,html.live .lcap{opacity:0}
/* "So Leva says Monday." keeps its place in the line but waits until Monday rises */
html.live .stops .then{opacity:0;transition:opacity 300ms var(--ease-out)}
html.live .stops .then[data-on]{opacity:1}
/* the why-line: a scrubbed wipe where it is one line (main.js sets data-wipe), a scrubbed fade-up where it wraps */
html.live #lwhy{font:400 .9375rem/1.5 var(--f-ui);letter-spacing:-.006em;color:var(--n-ink-2);font-variant-numeric:tabular-nums}
html.live #lwhy[data-wipe]{clip-path:inset(0 calc((1 - var(--w,0))*100%) 0 0)}
/* the claim is a statement, not a caption: a third larger, two lines */
html.live #lclaim{max-width:24em;font:500 calc(var(--cf)*var(--ck,1.35))/1.22 var(--f-display);letter-spacing:-.018em;color:var(--n-ink);text-wrap:balance}
html.live #lclaim .dim{display:none;color:var(--n-ink-3)}
/* each sentence lights along its length as the visitor scrolls (main.js scrubs --cl on both spans); without background-clip they are simply lit */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  html.live #lclaim :is(.dim,.lit){--on:var(--n-ink);color:transparent;-webkit-background-clip:text;background-clip:text;
    background-image:linear-gradient(90deg,var(--on) calc(var(--cl,0)*108% - 8%),var(--n-ink-3) calc(var(--cl,0)*108%))}
  html.live #lclaim .dim{--on:var(--n-ink-2)}
  @media (forced-colors:active){html.live #lclaim :is(.dim,.lit){color:CanvasText;background:none}}
}
html.live .move-stage{display:contents}

html.live .maths{display:grid;grid-template-columns:repeat(3,auto) minmax(0,1fr);column-gap:16px;row-gap:3px;align-items:baseline;margin-top:auto}
html.live .m-term{display:contents}
html.live .m-term b{grid-row:1;font-size:var(--mf);opacity:0;transform:translateY(8px);transition:opacity 260ms var(--ease-out),transform 260ms var(--ease-out),color 240ms var(--ease-io),scale 450ms var(--spring-sheet)}
html.live .m-term[data-on] b{opacity:1;transform:none;transition-duration:450ms,450ms,240ms,450ms}
html.live .m-buf b{color:var(--n-ink-2);transform-origin:0 70%;scale:.94}
html.live .m-buf[data-land] b{color:var(--ochre-d);scale:1}
html.live .m-term small{grid-area:2/1/3/-1;margin:0;max-width:none;font-size:.75rem;line-height:1.3;white-space:nowrap;opacity:0;transition:opacity 240ms var(--ease-io)}
html.live .maths[data-cur="est"] .m-est small,html.live .maths[data-cur="buf"] .m-buf small,html.live .maths[data-cur="res"] .m-res small{opacity:1}
html.live #took{display:inline-block;min-width:2.9em}
html.live .m-res b{transform-origin:0 70%;scale:.94}
html.live .m-res[data-on] b{scale:1}
html.live .fld{display:block;flex:none;width:var(--tw);height:calc(10*var(--p1) + 16px);margin-top:var(--g1)}

html.live .night .wk{flex:none;margin-top:var(--g1)}
html.live .night .wk-days b{font-size:.625rem}
html.live .night .wk-days .d{margin-top:5px;font-size:var(--df)}
html.live .night .wk-days em{z-index:1;top:calc(100% + 4px);padding:1px 6px;font-size:.59375rem}
/* day guides: a hairline from every date down to the track, so the lattice the dots land on is visible */
html.live .night .wk-days li::after{content:"";position:absolute;left:50%;top:calc(100% + 6px);width:1px;height:calc(9*var(--py) + 2*var(--g2) + 1px);background:linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.05))}
html.live .night .wk-days li.due::after{top:calc(100% + 30px);height:calc(9*var(--py) + 2*var(--g2) - 23px)}
html.live .night .wk-run{align-items:flex-start;gap:4px 12px;height:calc(9*var(--py));margin:var(--g2) 0 0 10%;padding:0 0 0 calc(25% + 10px);width:80%}
html.live .night .wk-run>span{flex:none;display:inline-flex;align-items:center;gap:5px;height:auto;padding:0;border-radius:0;background:none;overflow:visible;font:600 .6875rem/1.1 var(--f-ui);opacity:0;transition:opacity 400ms var(--ease-out)}
html.live .night .wk-run>span{position:relative;z-index:1;background:var(--night);box-shadow:0 0 0 4px var(--night)}
html.live .night .wk-run>span::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
html.live .night .run-buf{color:var(--ochre-d)}
html.live .night .run-est{color:var(--jade)}
html.live .night .wk[data-band] .wk-run>span{opacity:1}
html.live .night .wk-track{height:36px;margin-top:var(--g2)}
html.live .night .wk-mark em{margin-top:6px}
/* Due Friday: the week line runs from Monday to the due date (scrubbed), the clay dot rides its tip, then Friday takes its colour and its tag */
html.live .night .wk-line{transform:scaleX(0);transform-origin:0 50%}
html.live .night .m-due{opacity:0}
html.live .night .wk-days .due :is(b,.d){transition:color 240ms var(--ease-io)}
html.live .night .wk-days .due em{transition:opacity 220ms var(--ease-out),scale 320ms var(--spring-sheet)}
html.live .night .wk:not([data-due]) .wk-days .due b{color:var(--wk-mut)}
html.live .night .wk:not([data-due]) .wk-days .due .d{color:var(--wk-ink)}
html.live .night .wk:not([data-due]) .wk-days .due em{opacity:0;scale:.9}
/* the Thursday ghost: a ring big enough to hold the marker, scrubbed in */
html.live .night .m-ghost{opacity:var(--gh,0)}
html.live .night .m-ghost i{width:var(--gr);height:var(--gr);margin:calc((14px - var(--gr))/2) 0;transform:scale(calc(.6 + .4*var(--gh,0)))}
html.live .night #mk-start{left:10%;transform:translateX(var(--mx,0px));opacity:0;transition:opacity 240ms var(--ease-io)}
html.live .night .wk[data-mk] #mk-start{opacity:1}
html.live .night #mk-start i{background:var(--ochre-d);box-shadow:0 0 0 3px rgba(224,169,59,.2);transition:background-color 270ms var(--ease-in-out),box-shadow 270ms var(--ease-in-out)}
html.live .night .wk[data-mk="land"] #mk-start i{background:var(--jade);box-shadow:0 0 0 3px rgba(79,184,156,.22)}
html.live .night .wk-mark em{font-size:.75rem}
html.live .night #mk-start em{font-size:.8125rem;font-weight:700;color:var(--jade);opacity:0;transition:opacity 240ms var(--ease-io)}   /* the answer is the largest label on the strip */
html.live .night .wk[data-mk="land"] #mk-start em{opacity:1}
html.live .night .m-tue{opacity:0;transition:opacity 320ms var(--ease-io)}
html.live .night .wk[data-tue] .m-tue{opacity:1}

html.live .move-foot{display:grid;grid-template-columns:minmax(0,1fr);align-items:start;min-height:2.1rem;margin-top:var(--g2)}
html.live .move-foot>p{grid-area:1/1;margin:0;opacity:0;transition:opacity 300ms var(--ease-io)}
html.live .legend{display:block;font:400 .75rem/1.35 var(--f-text);color:var(--n-ink-3)}
html.live .footnote{font-size:.75rem;line-height:1.35}
html.live .checkline{font-size:.875rem}
html.live .move-foot[data-foot="leg"] .legend,html.live .move-foot[data-foot="note"] .footnote,html.live .move-foot[data-foot="check"] .checkline{opacity:1}

/* dawn: the night's answer, set like the hero headline, as the lights come up */
html.live .dawnline{display:block;position:absolute;z-index:1;left:0;right:0;top:var(--dl,64%);text-align:center;
  font:600 var(--dlf,1.875rem)/var(--dll,1.06) var(--f-display);letter-spacing:-.035em;color:var(--ink)}   /* main.js sets whole-pixel --dl / --dlf / --dll */
html.live .dawnline .ln{display:block;overflow:hidden;overflow:clip;padding:2px 0 8px;margin-bottom:-8px;white-space:nowrap}
html.live .dawnline .ln>span{display:block;transform:translateY(150%)}   /* scrubbed by main.js; parked well below the clip box until it rises */
/* the daylight half rides in as a sheet of paper over the sticky stage: a real edge, so it reads as a sheet and not as a cut */
html.live .days{z-index:1;padding-top:clamp(56px,6.5vw,96px);background:var(--paper);border-radius:clamp(28px,3.6vw,48px) clamp(28px,3.6vw,48px) 0 0;box-shadow:0 -1px 0 rgba(33,31,26,.1),0 -30px 80px -12px rgba(70,45,15,.24)}
html.live .dawn{display:none}
html.live #late{scroll-margin-top:-120px}
@media (max-width:1023px) and (max-height:719px),(min-width:414px) and (max-width:599px) and (max-height:739px){html.live .night{--cf:1rem;--cg:6px}}
@media (max-width:359px){html.live .night .wk-mark em{font-size:.6875rem}html.live .night #mk-start em{font-size:.75rem}html.live .night .wk-run{gap:4px 8px;padding-left:calc(25% + 6px)}html.live .night .wk-run>span{font-size:.625rem;gap:4px}}
/* tablets in the stacked layout: the same stage, larger type and dots */
@media (min-width:600px) and (max-width:1023px){
  html.live .night{--dw:min(3.25rem,calc(var(--colw)/8.9),6.2svh);--cf:clamp(1.0625rem,2.5svh,1.3125rem);--cg:clamp(6px,1.1svh,10px);--mf:clamp(1.375rem,3.3svh,1.75rem);--df:clamp(1.125rem,2.6svh,1.375rem);--gr:20px;--gl:.8125rem;
    --p1:clamp(5px,1.5svh - 6px,11px);--py:clamp(5px,1.5svh - 6px,11px);--g1:clamp(5px,1.5svh - 3px,20px);--g2:clamp(5px,1.4svh - 2px,16px)}
  html.live .move-foot{min-height:1.4rem}
  html.live .m-term small,html.live .legend,html.live .footnote{font-size:.8125rem}
  html.live .checkline{font-size:1rem}
  html.live #lwhy{font-size:1.0625rem}
}

@media (min-width:1024px){
  html.live .night{--tt:clamp(78px,14svh - 12px,128px);--sb:clamp(14px,3.4svh,40px);--tw:calc(var(--cw) - 444px);
    --dw:min(6rem,calc(var(--tw)/8.9),10.5svh);--cf:clamp(1.125rem,2.5svh + 4px,1.625rem);--cg:clamp(10px,2svh,20px);--mf:clamp(1.75rem,4.4svh,2.75rem);--df:clamp(1.125rem,2.6svh,1.75rem);--gr:22px;--gl:.8125rem;
    --p1:clamp(10px,2.2svh - 4px,16px);--py:clamp(8.5px,1.8svh - 3.2px,15px);--g1:clamp(8px,1.8svh,20px);--g2:clamp(8px,2svh - 2px,18px)}
  /* tall windows: the stage is a band of at most 1040px in the middle of the window, so the type, the hour blocks and the strip stay one composition */
  html.live .night .beats{height:min(100svh,1040px);top:calc((100svh - min(100svh,1040px))/2)}
  html.live .night #mk-start em{font-size:.875rem}
  html.live .dawnline{top:var(--dl,40%);right:auto;width:var(--tw);text-align:left}
  html.live .dawnline .ln{padding:3px 0 14px;margin-bottom:-14px}
  html.live .b-sun .cap,html.live .b-sun .quote{grid-area:auto}
  html.live .b-sun .quote{margin-top:clamp(14px,3.2svh,34px);padding-top:clamp(12px,2.6svh,26px);border-top:1px solid rgba(255,255,255,.1);max-width:none;font-size:clamp(1.375rem,3.2svh + 5px,2.125rem);line-height:1.22;letter-spacing:-.018em}
  html.live #lclaim .dim{display:inline}
  html.live #lwhy{font-size:1.0625rem;max-width:40em}
  html.live .night .wk-days b{font-size:.6875rem}
  html.live .night .wk-days em{top:calc(100% + 8px);padding:2px 7px;font-size:.65625rem}
  /* the buffer names itself under the track, between the two markers it spans; the Tuesday marker already says "4h estimate" */
  html.live .night .wk-run .run-est{display:none}
  html.live .night .wk-run .run-buf{position:absolute;z-index:1;left:20%;bottom:4px;translate:-50% 0;background:none;box-shadow:none;font:600 .6875rem/1.25 var(--f-ui)}
  html.live .night .wk-run .run-buf::before{content:none}
  html.live .night .wk-track{height:40px}
  html.live .night .wk-mark em{margin-top:8px}
  html.live .move-foot{grid-template-columns:auto minmax(0,1fr);column-gap:24px;align-items:baseline;min-height:1.4rem}
  html.live .move-foot>.footnote{grid-area:1/2;justify-self:end;text-align:right;font-size:.8125rem}
  html.live .legend{font-size:.8125rem}
  html.live .checkline{font-size:1rem}
  html.live .move-foot[data-foot="note"] .legend,html.live .move-foot[data-foot="check"] .footnote{opacity:1}
}
/* short desktop windows, and tablets under 800px of height: the hour blocks take the room of the maths captions (the counter and the caption carry the story) */
@media (min-width:1024px) and (max-height:699px),(min-width:600px) and (max-width:1023px) and (max-height:799px){html.live .m-term small{display:none}}
/* narrow desktop: the short label, so it fits between the Monday and Tuesday marker labels */
@media (min-width:1024px) and (max-width:1279px){html.live .night .wk-run .run-buf .lg{display:none}html.live .night .wk-run .run-buf .sm{display:inline}}
/* roomy desktop: every maths term keeps its own caption underneath */
@media (min-width:1024px) and (min-height:700px){
  html.live .maths{display:flex;align-items:flex-start;gap:0 clamp(20px,3vw,44px)}
  html.live .m-term{display:block}
  html.live .m-term small{margin-top:6px;font-size:.8125rem}
  html.live .m-term[data-on] small{opacity:1}
}

/* ================= LIVE MODE: play-once daylight sequences (html.seq is added by the engine once it is ready) ================= */
.b-wed .scr[data-state="wed2"] .sh-coming{--y:416px}.b-wed .scr[data-state="wed2"] .t-memo{--y:441px}.b-wed .scr[data-state="wed2"] .t-inv{--y:584px}
html.seq .b-mon .callout{transition:opacity 300ms var(--ease-io),translate var(--d-ui) var(--ease-sheet)}
html.seq .b-mon .callout :is(.b-row,.b-spark){transition:opacity 450ms var(--ease-out),translate 450ms var(--ease-out)}
html.seq .b-mon .callout .b-eye+.b-row{transition-delay:260ms}
html.seq .b-mon .callout .b-eye+.b-row+.b-row{transition-delay:340ms}
html.seq .b-mon .callout .b-eye+.b-row+.b-row+.b-row{transition-delay:420ms}
html.seq .b-mon .callout .b-spark{transition-delay:700ms}
html.seq .b-mon:not([data-play]) .callout{opacity:0;translate:0 34px;transition:none}
html.seq .b-mon:not([data-play]) .callout :is(.b-row,.b-spark){opacity:0;translate:0 20px;transition:none}
html.seq .scr.anim[data-chk="prop"] .t-prop .check,html.seq .scr.anim[data-chk="deck"] .t-deck .check{animation:chk 320ms var(--ease-out)}
@keyframes chk{from{transform:scale(.8)}}
html.seq .b-thu .m-ghost{transition:opacity 400ms var(--ease-out) 520ms}
html.seq .b-thu .m-ghost i{transition:scale 520ms var(--ease-out) 520ms}
html.seq .b-thu:not(.in) .m-ghost{opacity:0;transition:none}
html.seq .b-thu:not(.in) .m-ghost i{scale:.6;transition:none}
/* the in-story button shows when it comes on screen (its own trigger, not the phone's sequence), so it is there at any scroll speed */
html.seq .b-fri .cta-row{transition:opacity 200ms var(--ease-out),translate 200ms var(--ease-out)}
html.seq .b-fri:not([data-cta]) .cta-row:not(:focus-within){opacity:0;translate:0 8px;transition:none;pointer-events:none}   /* still in the tab order: focus shows it */
/* subtle magnet on the primary buttons (fine pointer only; main.js sets --mx / --my) */
@media (hover:hover) and (pointer:fine){html.motion-ok .cta-row .btn{translate:var(--bx,0px) var(--by,0px);transition:transform var(--d-press) var(--ease-out),box-shadow var(--d-hover) ease,background-color var(--d-hover) ease,translate 320ms var(--ease-out)}}

/* ================= depth: bento ================= */
.depth{position:relative;z-index:2;background:var(--studio);padding:clamp(88px,11vw,160px) 0}
.bento{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin-top:clamp(40px,5vw,64px)}
.tile{position:relative;display:flex;flex-direction:column;min-width:0;padding:24px;border-radius:28px;background:var(--tile);border:1px solid var(--hairline);overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 1px 2px rgba(33,31,26,.04),0 8px 24px rgba(33,31,26,.05)}
.tile h3{font:600 1.375rem/1.15 var(--f-display);letter-spacing:-.02em;color:var(--ink)}
.tile>p{margin-top:10px;max-width:30em;text-wrap:pretty}
.tile-vis{margin-top:auto;padding-top:32px}
@media (hover:hover) and (pointer:fine){.tile::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(220px 200px at 8% 0%,rgba(255,255,255,.9),rgba(255,255,255,0) 70%)}}
.tile>*{position:relative}

/* T1 sources: three type tiles (no drawn brand marks), connectors into one task */
.srcs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:min(396px,100%);margin:0 auto}
.src-tile{display:grid;place-items:center;min-height:44px;padding:6px 10px;border-radius:14px;background:#fff;border:1px solid #ECE8DE;box-shadow:0 1px 2px rgba(33,31,26,.05),0 8px 18px rgba(33,31,26,.07);font:600 .8125rem/1.15 var(--f-display);text-align:center;color:var(--ink)}
.conn{width:min(396px,100%);height:auto;margin:6px auto 0;fill:none;stroke:#B9C9C3;stroke-width:1.5;stroke-linecap:round}
.t1 .task.co{margin:0 auto;width:min(396px,100%);--rail:var(--fnt)}
/* T2 states */
.t2 .task.co{width:100%;transition:opacity var(--d-state) var(--ease-io),--rail 300ms var(--ease-out)}
.t2 .task.co[data-st="distant"]{opacity:.78;--rail:var(--fnt)}
.t2 .task.co[data-st="active"]{--rail:var(--acc);--st:var(--acc)}
.t2 .task.co[data-st="behind"]{--rail:var(--och);--st:var(--och)}
.t2 .task.co[data-st="critical"]{--rail:var(--cly);--st:var(--cly)}
.t2 .badge,.t2 .due span{transition:opacity var(--d-state) var(--ease-io)}
.t2 .t-foot{flex-wrap:wrap;gap:8px 12px}     /* the badge drops to its own row when the tile is narrow, never past the card edge */
.t2 .badges{margin-left:auto}
.t2 .due{display:inline-grid}
.t2 .due span{grid-area:1/1;opacity:0}
.t2 [data-st="distant"] .dl-a,.t2 [data-st="active"] .dl-a,.t2 [data-st="behind"] .dl-a,.t2 [data-st="critical"] .dl-c{opacity:1}
.t2 [data-st="active"] .bg-a,.t2 [data-st="behind"] .bg-b,.t2 [data-st="critical"] .bg-c{opacity:1}
/* four in a row when they fit (container wider than 24.5rem), otherwise two by two; never three and one */
.seg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-columns:repeat(auto-fit,minmax(clamp(25% - 4px,(24.5rem - 100%)*999,50% - 4px),1fr));gap:4px;margin-top:14px;padding:4px;border-radius:16px;background:rgba(33,31,26,.05)}
.seg button{min-height:44px;padding:.5rem .4rem;border:0;border-radius:12px;background:transparent;cursor:pointer;font:500 .875rem/1.15 var(--f-text);color:var(--ink-2);
  transition:background-color var(--d-hover) ease,color var(--d-hover) ease,box-shadow var(--d-hover) ease,transform var(--d-press) var(--ease-out)}
.seg button:active{transform:scale(.97)}
.seg button[aria-pressed="true"]{background:var(--tile);color:var(--ink);font-weight:600;box-shadow:0 0 0 .5px rgba(33,31,26,.1),0 1px 2px rgba(33,31,26,.08),0 4px 10px rgba(33,31,26,.06)}
/* T3 notification */
.notif{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:22px;background:rgba(250,249,245,.86);border:1px solid rgba(33,31,26,.07);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 1px 2px rgba(33,31,26,.05),0 14px 34px rgba(33,31,26,.1);font:400 14px/1.4 var(--f-ui);letter-spacing:-.006em;color:#211F1A}
.notif .app{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:linear-gradient(160deg,#2B2A27,#141311)}
.notif .app .orb{--s:18px}
.notif>div{min-width:0}
.notif .hd{display:flex;justify-content:space-between;font:600 12px/1.3 var(--f-ui);letter-spacing:.04em;color:#6F6A60}
.notif .hd span:last-child{font-weight:400;letter-spacing:0}
.notif p{margin-top:2px}
.t3 .tile-vis{padding:36px 0 8px}
.lock{position:relative;padding:22px 16px 18px;border-radius:26px;background:radial-gradient(120% 90% at 30% 0%,#EAE6DB,#DDD8CB);border:1px solid rgba(33,31,26,.06);overflow:hidden}
.lock-time{margin-bottom:14px;text-align:center;font:500 2.5rem/1 var(--f-display);letter-spacing:-.03em;color:rgba(33,31,26,.72);font-variant-numeric:tabular-nums}
.lock-time small{display:block;margin-bottom:4px;font:500 .8125rem/1.3 var(--f-text);letter-spacing:0;color:rgba(33,31,26,.6)}
/* T4: two definition rows (term left, statement right), both under the tile heading in size */
.never{flex:1;display:grid;grid-auto-rows:1fr;margin-top:28px}
.never div{display:grid;align-content:center;row-gap:4px;padding:18px 0;border-top:1px solid var(--hairline)}
.never div:last-child{padding-bottom:0}
.never dt{font:500 1.0625rem/1.4 var(--f-text);color:var(--ink-3)}
.never dd{font:600 1.25rem/1.25 var(--f-display);letter-spacing:-.015em;color:var(--ink);text-wrap:balance}
@media (min-width:600px) and (max-width:767px),(min-width:1024px){   /* only where the tile is wide enough for two columns */
  .never div{grid-template-columns:160px minmax(0,1fr);column-gap:24px;align-items:baseline}
  .never dd{font-size:1.375rem}
}
@media (min-width:768px){
  .bento{grid-template-columns:repeat(12,minmax(0,1fr));gap:20px;grid-auto-rows:minmax(320px,auto)}
  .tile{padding:32px}.tile h3{font-size:1.625rem}
  .t1,.t2,.t3,.t4{grid-column:span 6}
}
@media (min-width:1024px){.t1,.t4{grid-column:span 7}.t2,.t3{grid-column:span 5}}

/* ================= research ================= */
.research{position:relative;z-index:2;background:var(--paper);padding:clamp(88px,11vw,160px) 0}
.res-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:40px}
.res-rows>div{padding:28px 0;border-top:1px solid var(--hairline)}
.res-rows>div:last-child{border-bottom:1px solid var(--hairline)}
.res-rows dt{font:600 1.375rem/1.2 var(--f-display);letter-spacing:-.02em;color:var(--ink)}
.res-rows dd{margin-top:6px;max-width:38em}
.res-note{margin-top:20px;font:400 .875rem/1.5 var(--f-text);color:var(--ink-3);max-width:39em}
.creds{display:flex;flex-wrap:wrap;gap:10px 32px;margin-top:clamp(48px,6vw,72px);font:500 .9375rem/1.4 var(--f-text);color:var(--ink-2)}
@media (min-width:900px){.res-grid{grid-template-columns:5fr 7fr;column-gap:48px;align-items:start}.res-grid h2{position:sticky;top:120px}}

/* ================= close: two doors ================= */
.close{position:relative;z-index:2;background:var(--studio);padding:clamp(88px,11vw,160px) 0}
.doors{display:grid;grid-template-columns:minmax(0,1fr);gap:56px;align-items:center}
#free h2{font-size:clamp(2.25rem,1.3rem + 2.6vw,3.25rem)}
#free p{margin-top:20px;max-width:22.3em;font-size:1.125rem}
#free .cta-row{align-items:flex-start;margin-top:28px}
.panel{position:relative;padding:28px 22px;border-radius:28px;background:var(--tile);border:1px solid var(--hairline);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 1px 2px rgba(33,31,26,.04),0 12px 32px rgba(33,31,26,.07)}
.panel h2{font-size:clamp(1.625rem,1.3rem + 1vw,2rem);line-height:1.12;letter-spacing:-.025em;margin-top:22px}
.panel>p{margin-top:10px}
.orbs{position:relative;width:64px;height:64px}
.orbs .orb{position:absolute;inset:0;--s:64px;transition:opacity 400ms var(--ease-io)}
.orbs .orb.g{--c:var(--green);opacity:0}
.panel.ok .orbs .orb.g{opacity:1}
.orbs .ring{position:absolute;inset:0;border-radius:50%;border:1.2px solid var(--powder);opacity:0;pointer-events:none}
.panel.ok .orbs .ring{border-color:var(--green)}
form{margin-top:26px}
.fields{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.fg label{display:block;margin-bottom:6px;font:500 .875rem/1.4 var(--f-text);color:var(--ink)}
.fg .op{font-weight:400;color:var(--ink-3)}
.fg input,.fg select{display:block;width:100%;height:52px;padding:0 14px;border:1px solid var(--field-line);border-radius:12px;background:var(--tile);color:var(--ink);font:400 1.0625rem/1.2 var(--f-text);
  -webkit-appearance:none;appearance:none;transition:border-color var(--d-hover) ease,box-shadow var(--d-hover) ease}
.fg select{padding-right:40px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%2357534A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center;cursor:pointer}
.fg select:invalid{color:var(--ink-3)}
.fg select:has(option[value=""]:checked){color:var(--ink-3)}
.fg input::placeholder{color:var(--ink-3);opacity:1}
/* focus = a real outline (it survives forced-colors and an errored field) plus the soft ring */
.fg input:focus,.fg select:focus{border-color:var(--pine);box-shadow:0 0 0 3px rgba(31,107,90,.18)}
.fg input:focus-visible,.fg select:focus-visible{outline:2px solid var(--pine);outline-offset:2px;border-radius:12px}
.fg.err input,.fg.err select{border-color:var(--clay);box-shadow:0 0 0 3px rgba(178,58,46,.12)}
.fg.err input:focus-visible,.fg.err select:focus-visible{outline-color:var(--clay)}
.sr{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.f-err{display:none;margin:0 0 16px;font:500 .9375rem/1.4 var(--f-text);color:var(--clay)}
.f-err.show{display:block}
.sub-btn{width:100%;margin-top:22px}
.sub-btn:disabled{opacity:.7;cursor:default}
.f-n{margin-top:14px;font:400 .875rem/1.5 var(--f-text);color:var(--ink-3)}
#nojs{margin:0 0 16px}
.f-n a,#suc a{color:var(--pine);text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}
.panel.ok>h2,.panel.ok>h2+p{display:none}
#suc{margin-top:22px}
#suc h3{font:600 clamp(1.625rem,1.3rem + 1vw,2rem)/1.12 var(--f-display);letter-spacing:-.025em;color:var(--ink);outline:0}
#suc p{margin-top:10px}
[hidden]{display:none!important}
@media (min-width:600px){.panel{padding:40px}.fields{grid-template-columns:1fr 1fr}.fg.wide{grid-column:1/-1}}
@media (min-width:1024px){.doors{grid-template-columns:5fr 7fr;column-gap:72px}}

/* ================= footer ================= */
.foot{position:relative;z-index:2;background:var(--paper);border-top:1px solid var(--hairline);padding:40px 0 48px;font:500 .9375rem/1.4 var(--f-text)}
.foot-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px}
.foot .brand{margin:0;color:var(--ink)}
.foot .tagline{margin-left:14px;font:500 .9375rem/1 var(--f-text);letter-spacing:0;color:var(--ink-2)}
.foot-links{display:flex;flex-wrap:wrap;gap:0 24px}
.foot-links a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink-2)}
.foot-links a:hover{color:var(--ink)}
.foot-fine{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 24px;margin-top:20px;font:400 .875rem/1.5 var(--f-text);color:var(--ink-3)}

/* ================= reveal-once (armed by main.js; content is visible without it) ================= */
html.arm .t1 .conn path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 500ms var(--ease-out)}
html.arm .t1 .conn path:nth-child(2){transition-delay:40ms}
html.arm .t1 .conn path:nth-child(3){transition-delay:80ms}
html.arm .t1.in .conn path{stroke-dashoffset:0}
html.arm .t1 .task.co{translate:0 10px;scale:.975;transition:translate 420ms var(--ease-out) 220ms,scale 420ms var(--ease-out) 220ms}   /* never empty and never faint: the card is there at full contrast, it only settles into place */
html.arm .t1.in .task.co{translate:none;scale:1}
html.arm .t3 .notif{opacity:0;transform:translateY(-12px);transition:opacity 500ms var(--ease-sheet),transform 500ms var(--ease-sheet)}
html.arm .t3.in .notif{opacity:1;transform:none}
html.arm .b-thu h3 span{clip-path:inset(0 0 100% 0);transform:translateY(.35em);transition:clip-path 760ms var(--ease-out),transform 760ms var(--ease-out)}
html.arm .b-thu h3 span:nth-child(2){transition-delay:70ms}
html.arm .b-thu.in h3 span{clip-path:inset(-.1em 0 -.2em 0);transform:none}
html.arm .panel.in .ring,html.arm .panel.ok .ring{animation:ring 1s var(--ease-out) both}
.orbs .ring:nth-of-type(2){--to:2.2;--a:.22;animation-delay:200ms!important}
.orbs .ring:nth-of-type(3){--to:2.8;--a:.12;animation-delay:400ms!important}
@keyframes ring{from{opacity:var(--a,.35);transform:scale(1)}to{opacity:0;transform:scale(var(--to,1.6))}}
html.arm .panel.ok .ring{animation-name:ring2}
@keyframes ring2{from{opacity:var(--a,.35);transform:scale(1)}to{opacity:0;transform:scale(var(--to,1.6))}}

@media (prefers-contrast:more){.tile,.panel,.brief,.notif{border-color:var(--ink-3)}}
@media (forced-colors:active){.days .device-crop{border:1px solid CanvasText}}
@media print{.nav{position:absolute}}