/* Decktrace home. The page is a deck; every visual is HTML and CSS.
   Shared tokens, base, type, buttons, the mark, header, footer, reveal and
   pausing live in /assets/site/site.css, which loads first. */

.defs{position:absolute;width:0;height:0;overflow:hidden}

/* ---------- Page rail ---------- */
.rail{position:fixed;right:6px;top:50%;z-index:30;display:none;transform:translateY(-50%)}
.rail ol{list-style:none;margin:0;padding:0}
.rail a{position:relative;display:flex;align-items:center;justify-content:flex-end;width:30px;height:24px;text-decoration:none;border-radius:6px}
.rail a::after{content:"";width:6px;height:6px;margin-right:12px;border-radius:50%;background:var(--lav);opacity:.28;transition:opacity .4s}
.rail a.is-seen::after{opacity:.62}
.rail-label{position:absolute;right:36px;padding:7px 10px;border-radius:8px;background:var(--night-2);border:1px solid var(--line);font:500 13px/1 var(--sans);color:var(--paper);white-space:nowrap;opacity:0;transform:translateX(6px);transition:opacity .2s,transform .25s var(--ease);pointer-events:none}
.rail a:hover .rail-label,.rail a:focus-visible .rail-label{opacity:1;transform:none}
.rail-ind{position:absolute;right:12px;top:3px;width:6px;height:18px;border-radius:3px;background:var(--lav);transform:translateY(calc(var(--at,0) * 24px));transition:transform .55s var(--ease);pointer-events:none}
@media (min-width:1100px){.rail{display:block}}

/* ---------- Your visit pill ---------- */
.you-pill{display:inline-flex;align-items:center;gap:9px;height:34px;padding:0 13px 0 11px;border-radius:999px;background:rgba(18,15,46,.6);border:1px solid rgba(183,168,255,.22);color:var(--paper);font:500 13px/1 var(--sans);font-variant-numeric:tabular-nums;white-space:nowrap;text-decoration:none;transition:opacity .45s}
.you-pill.is-off{opacity:0;pointer-events:none}

/* ---------- Pages ---------- */
.page{position:relative;padding:128px 0}
.folio{position:absolute;right:max(24px,calc((100% - 1180px) / 2));bottom:40px;font:500 13px/1 var(--sans);letter-spacing:.1em;color:var(--muted);font-variant-numeric:tabular-nums;opacity:.75}
.folio::before{content:"";display:inline-block;width:28px;height:1px;margin-right:12px;vertical-align:middle;background:var(--line)}
.head-row{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:end}
.head-row .body{margin-top:0}
/* Hub links: every page ends its copy with a quiet link to its product page */
.hub{display:flex;flex-wrap:wrap;gap:0 28px;margin-top:14px}
.pts + .hub{margin-top:20px}

@keyframes dt-toast{0%{opacity:0;transform:translateY(8px)}4%,27%{opacity:1;transform:none}31%,100%{opacity:0;transform:translateY(-4px)}}

/* ---------- Hero ---------- */
.hero{display:flex;flex-direction:column;justify-content:center;min-height:100vh;min-height:100svh;padding-top:128px}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(48% 52% at 74% 46%,rgba(123,92,255,.2),transparent 70%),
  radial-gradient(36% 40% at 8% 4%,rgba(183,168,255,.07),transparent 70%)}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(183,168,255,.13) 1px,transparent 1.6px);background-size:28px 28px;-webkit-mask-image:radial-gradient(60% 60% at 70% 45%,#000,transparent 75%);mask-image:radial-gradient(60% 60% at 70% 45%,#000,transparent 75%)}
/* Two columns down to 820px. The copy column is a little wider than the deck so the h1
   always breaks into two balanced lines ("Decks that" / "read the room."); the em cap
   keeps the same two lines when the hero stacks. */
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:clamp(32px,4vw,56px);align-items:center}
.hero h1{max-width:9.5em}
.hero .lede{max-width:34em}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.proof{margin-top:22px;font-size:14px;line-height:1.5;color:var(--muted)}
.proof .sep{color:var(--lav)}
.hint{display:flex;align-items:center;gap:7px;margin-top:26px;font-size:13px;color:var(--muted)}
kbd{position:relative;display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 6px;border-radius:7px;border:1px solid rgba(183,168,255,.26);border-bottom-width:2px;background:var(--night-2);font:500 13px/1 var(--sans);color:var(--paper);transition:transform .12s}
kbd::after{content:"";position:absolute;inset:-1px;border-radius:inherit;background:rgba(183,168,255,.28);opacity:0;transition:opacity .3s}
kbd.is-down{transform:translateY(1px)}
kbd.is-down::after{opacity:1;transition:none}

/* The large deck. One design unit (--q) is 1/600 of the visual's width. */
.hero-visual{position:relative;container-type:inline-size;--T:9.6s}
.hero-visual > *{--q:calc(100cqw / 600)}
.hero-visual::before{content:"";position:absolute;inset:-8% -6% -4% -6%;z-index:-1;background:radial-gradient(closest-side,rgba(123,92,255,.26),transparent);pointer-events:none}
.deck{width:100%;aspect-ratio:600 / 424;perspective:calc(var(--q) * 1600);perspective-origin:50% 22%;
  --pw:calc(var(--q) * 520);--ph:calc(var(--q) * 325);--pr:calc(var(--q) * 14);
  --fx:0px;--fy:calc(var(--q) * 56);
  --mx:calc(var(--q) * 40);--my:calc(var(--q) * 28);
  --bx:calc(var(--q) * 80);--by:0px;
  --ly:calc(var(--q) * 22)}
.deck .dt-paper{box-shadow:0 calc(var(--q) * 34) calc(var(--q) * 64) calc(var(--q) * -26) rgba(4,2,18,.85),inset 0 0 0 1px rgba(255,255,255,.5)}
.deck .dt-tint{box-shadow:inset 0 0 0 1px rgba(183,168,255,.35)}
.deck .dt-dots{position:absolute;left:calc(var(--q) * 236);top:calc(var(--q) * 404);display:flex;gap:calc(var(--q) * 12)}
.deck .dt-dots i{width:calc(var(--q) * 8);height:calc(var(--q) * 8)}

/* Slide content, shared by the hero deck and the device frames.
   Small slide text has a pixel floor so it stays readable at 390px. */
.s-panel{position:absolute;left:0;top:0;bottom:0;width:40%;overflow:hidden;background:var(--violet);border-radius:var(--pr,0) 0 0 var(--pr,0);color:var(--paper)}
.s-art{position:absolute;left:0;top:0;width:100%;height:100%}
.s-mono{position:absolute;width:calc(var(--q) * 22);height:calc(var(--q) * 22)}
.s-panel .s-mono{left:calc(var(--q) * 22);top:calc(var(--q) * 22)}
.sl-num{position:absolute;right:calc(var(--q) * 26);top:calc(var(--q) * 36);font:500 max(7.5px,calc(var(--q) * 11))/1 var(--sans);letter-spacing:.12em;color:rgba(18,15,46,.5);font-variant-numeric:tabular-nums}
.s-copy{position:absolute;left:calc(40% + var(--q) * 30);right:calc(var(--q) * 20);top:0;bottom:0;display:flex;flex-direction:column;justify-content:center}
/* Eyebrows break between their groups ("BRIGHTLANE ·" / "SALES PROPOSAL"); a group that
   is still too long ends in an ellipsis inside its own padding, never cut by the frame. */
.s-eyebrow{display:block;font:500 max(7.5px,calc(var(--q) * 11))/1.25 var(--sans);letter-spacing:.1em;color:var(--violet)}
.s-eyebrow .g{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:top}
.s-sub .g{display:inline-block}
.s-title{display:block;margin-top:calc(var(--q) * 12);font:600 calc(var(--q) * 30)/1.08 var(--display);letter-spacing:-.03em;color:var(--ink);text-wrap:balance}
.s-title em,.s-big em{font-style:normal;color:var(--violet)}
.s-sub{display:block;margin-top:calc(var(--q) * 14);font:400 max(8.5px,calc(var(--q) * 13.5))/1.45 var(--sans);color:var(--ink-2)}
.s-kicker{display:block;width:calc(var(--q) * 30);height:calc(var(--q) * 4);border-radius:9px;background:var(--violet)}

/* Hero page 1: cover */
.s-cover .s-panel{width:36%}
.s-cover .s-copy{left:calc(36% + var(--q) * 26);right:calc(var(--q) * 24)}
.s-cover .s-title{margin-top:calc(var(--q) * 14);font-size:calc(var(--q) * 32);line-height:1.06}
.s-cover .s-sub{margin-top:calc(var(--q) * 16);font-size:max(9px,calc(var(--q) * 14))}

/* Hero pages 2 and 3 share the eyebrow, monogram and folio positions */
.s-trac .s-eyebrow,.s-ask .s-eyebrow{position:absolute;left:calc(var(--q) * 40);top:calc(var(--q) * 34)}
.s-trac .s-mono,.s-ask .s-mono{left:calc(var(--q) * 40);bottom:calc(var(--q) * 28);width:calc(var(--q) * 20);height:calc(var(--q) * 20);color:var(--violet)}

/* Hero page 2: traction */
.s-big{position:absolute;left:calc(var(--q) * 34);top:calc(var(--q) * 70);font:600 calc(var(--q) * 124)/.9 var(--display);letter-spacing:-.05em;color:var(--ink);white-space:nowrap}
.s-big em{margin-left:calc(var(--q) * 4)}
.s-big-l{position:absolute;left:calc(var(--q) * 41);top:calc(var(--q) * 196);max-width:calc(var(--q) * 250);font:500 max(9px,calc(var(--q) * 15))/1.4 var(--sans);color:var(--ink-2)}
.s-stats{position:absolute;left:calc(var(--q) * 318);top:calc(var(--q) * 82);width:calc(var(--q) * 164);display:grid;gap:calc(var(--q) * 18)}
.s-stat{display:block;padding-top:calc(var(--q) * 12);border-top:1px solid rgba(18,15,46,.14);font:400 max(8.5px,calc(var(--q) * 13))/1.35 var(--sans);color:var(--ink-2)}
.s-stat b{display:block;margin-bottom:calc(var(--q) * 5);font:600 calc(var(--q) * 34)/1 var(--display);letter-spacing:-.03em;color:var(--ink)}

/* Hero page 3: the ask */
.s-ask .s-title{position:absolute;left:calc(var(--q) * 40);top:calc(var(--q) * 66);margin:0;font-size:calc(var(--q) * 38);line-height:1.04;white-space:nowrap}
.s-time{position:absolute;left:calc(var(--q) * 40);right:calc(var(--q) * 40);top:calc(var(--q) * 176);display:grid;grid-template-columns:repeat(3,1fr)}
.s-line{position:absolute;left:calc(var(--q) * 6);right:calc(var(--q) * 2);top:calc(var(--q) * 11);height:calc(var(--q) * 3);border-radius:9px;background:var(--lav)}
.s-line::after{content:"";position:absolute;right:0;top:50%;width:calc(var(--q) * 10);height:calc(var(--q) * 10);margin-top:calc(var(--q) * -5);border-top:calc(var(--q) * 3) solid var(--lav);border-right:calc(var(--q) * 3) solid var(--lav);border-radius:0 calc(var(--q) * 2) 0 0;transform:rotate(45deg)}
.s-step{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:calc(var(--q) * 14);font:600 calc(var(--q) * 19)/1.1 var(--display);letter-spacing:-.02em;color:var(--ink)}
.s-step b{display:flex;align-items:center;height:calc(var(--q) * 25)}
.s-step b::before{content:"";width:var(--nd);height:var(--nd);border-radius:50%;background:var(--violet);box-shadow:0 0 0 calc(var(--q) * 4) var(--paper)}
.s-step:nth-child(2) b{--nd:calc(var(--q) * 13)}
.s-step:nth-child(3) b{--nd:calc(var(--q) * 18)}
.s-step:nth-child(4) b{--nd:calc(var(--q) * 24)}

/* Trace toasts. On a deck 520px and wider they sit on the empty bottom margin of the
   front page, right of the dots; on a smaller deck they drop under it, so they never
   cover slide content. */
.toasts{position:relative;z-index:5;display:grid;justify-items:end;margin-top:14px;pointer-events:none}
@container (min-width:520px){
  .toasts{position:absolute;right:0;top:calc(var(--q) * 362);margin-top:0}
}
.toast{grid-area:1 / 1;display:inline-flex;align-items:center;gap:10px;padding:11px 16px 11px 13px;border-radius:12px;background:var(--night-2);border:1px solid rgba(183,168,255,.24);box-shadow:0 18px 40px -16px rgba(0,0,0,.75);font:500 14px/1.25 var(--sans);color:var(--paper);white-space:nowrap;opacity:0}
.toast:nth-child(1){--d:0s;opacity:1}
.toast:nth-child(2){--d:calc(var(--T) * -.6667)}
.toast:nth-child(3){--d:calc(var(--T) * -.3333)}

/* ---------- Mocks: every slide and device sizes its insides in container units ----------
   Each visual is a size container and sets --q, one design unit = 1/600 of its width.
   Device screens and slides are containers too and redefine --q for their insides, so
   text scales with the mock it sits in and cannot overflow it at any width. */
.mod-visual,.scr-visual,.lang-visual{position:relative;container-type:inline-size}
.mod-visual{container-name:mod}
.scr-visual{container-name:scr}
.mod-visual > *,.scr-visual > *,.lang-visual > *{--q:calc(100cqw / 600)}
.mod-visual::before,.scr-visual::before,.lang-visual::before{content:"";position:absolute;inset:-6% -8%;z-index:-1;background:radial-gradient(closest-side,rgba(123,92,255,.2),transparent);pointer-events:none}

.chips{position:relative;display:flex;justify-content:center;gap:8px;margin-top:22px}
.chip{position:relative;z-index:1;display:inline-grid;place-items:center;width:92px;height:36px;border-radius:999px;font:500 14px/1 var(--sans);color:var(--paper)}
.chip-b{opacity:.55}
.mod-soon{display:flex;justify-content:center;margin-top:12px}
.mod-soon .soon,.sg-top .soon{margin-left:0}
.chip-hl{position:absolute;left:50%;top:0;width:92px;height:36px;margin-left:-96px;border-radius:999px;background:rgba(183,168,255,.13);border:1px solid rgba(183,168,255,.42)}

/* ---------- Modernize: a dated slide is scanned and rebuilt ----------
   Geometry in stage units (x, y, width); the stage swaps to a taller layout under 440px
   so both slides stay large. --morph carries the old 4:3 frame onto the new 16:10 one. */
.mod-stage{position:relative;width:100%;aspect-ratio:600 / 410;
  --ox:100;--oy:74;--ow:400;--nx:20;--ny:30;--nw:560;--fx:100;--fy:26;
  --morph:translateY(calc(var(--q) * -19)) scale(1.4,1.167);
  --o-still:translate(calc(var(--q) * -150),calc(var(--q) * -80)) scale(.56);
  --n-still:translate(calc(var(--q) * 60),calc(var(--q) * 45)) scale(.72);
  --f-still:translateX(calc(var(--q) * -62))}
@container mod (max-width:439px){
  .mod-stage{aspect-ratio:600 / 480;
    --ox:60;--oy:96;--ow:480;--nx:0;--ny:52;--nw:600;--fx:60;--fy:34;
    --morph:translateY(calc(var(--q) * -36)) scale(1.25,1.04);
    --o-still:translate(calc(var(--q) * -150),calc(var(--q) * -100)) scale(.5);
    --n-still:translate(calc(var(--q) * 80),calc(var(--q) * 70)) scale(.7);
    --f-still:translateX(calc(var(--q) * -30))}
}
.mod-file{position:absolute;left:calc(var(--q) * var(--fx));top:calc(var(--q) * var(--fy));z-index:3;display:inline-flex;align-items:center;gap:max(6px,calc(var(--q) * 8));max-width:calc(var(--q) * var(--ow));padding:max(6px,calc(var(--q) * 8)) max(11px,calc(var(--q) * 14)) max(6px,calc(var(--q) * 8)) max(9px,calc(var(--q) * 11));border-radius:max(9px,calc(var(--q) * 12));background:var(--night-2);border:1px solid rgba(183,168,255,.26);box-shadow:0 14px 30px -16px rgba(0,0,0,.8);font:500 max(12px,calc(var(--q) * 13))/1.2 var(--sans);color:var(--paper);white-space:nowrap}
.mod-file svg{flex:none;width:max(14px,calc(var(--q) * 16));height:max(14px,calc(var(--q) * 16))}
.mod-file span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.mod-in{position:absolute;inset:0;overflow:hidden}

/* Before: the one off-palette object on the page, on purpose. A default-blue title bar,
   system serif, six cramped low-contrast bullets and a clip-art chart. 400 x 300 units. */
.mod-old{position:absolute;left:calc(var(--q) * var(--ox));top:calc(var(--q) * var(--oy));width:calc(var(--q) * var(--ow));aspect-ratio:4 / 3;container-type:inline-size;background:#FAFAF7;border:1px solid #CFCFCA;box-shadow:calc(var(--q) * 8) calc(var(--q) * 8) 0 rgba(4,2,18,.42)}
.old-in{--q:calc(100cqw / 400);font-family:Georgia,"Times New Roman",Times,serif}
.ol-bar{position:absolute;left:0;right:0;top:0;height:calc(var(--q) * 56);display:flex;align-items:center;padding:0 calc(var(--q) * 18);background:#4F6EB0;border-bottom:calc(var(--q) * 3) solid #C7D2EA}
.ol-bar span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700;font-size:calc(var(--q) * 17);line-height:1.2;color:rgba(255,255,255,.84)}
.ol-list{position:absolute;left:calc(var(--q) * 18);top:calc(var(--q) * 100);width:calc(var(--q) * 238);margin:0;padding:0;list-style:none;display:grid;gap:calc(var(--q) * 6)}
.ol-list li{position:relative;padding-left:calc(var(--q) * 13);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:calc(var(--q) * 11.5);line-height:1.3;color:#92928E}
.ol-list li::before{content:"";position:absolute;left:0;top:calc(var(--q) * 5);width:calc(var(--q) * 5);height:calc(var(--q) * 5);background:#4F6EB0;opacity:.8}
.ol-art{position:absolute;left:calc(var(--q) * 268);top:calc(var(--q) * 104);width:calc(var(--q) * 116);height:calc(var(--q) * 116);background:#fff;border:1px solid #C4C4BE}
.ol-art svg{width:100%;height:100%}
.ol-foot{position:absolute;left:calc(var(--q) * 18);right:calc(var(--q) * 18);bottom:calc(var(--q) * 22);height:calc(var(--q) * 2);background:#4F6EB0;opacity:.55}
.ol-tint{position:absolute;inset:0;background:rgba(183,168,255,.2);transform-origin:50% 0;transform:scaleY(0)}
.mod-scan{position:absolute;left:0;right:0;top:0;height:calc(var(--q) * 2.5);background:var(--lav);opacity:0}
.mod-scan::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:calc(var(--q) * 44);background:linear-gradient(rgba(183,168,255,0),rgba(183,168,255,.38))}

/* After: the house style. 560 x 350 units. */
.mod-new{position:absolute;left:calc(var(--q) * var(--nx));top:calc(var(--q) * var(--ny));width:calc(var(--q) * var(--nw));aspect-ratio:16 / 10;container-type:inline-size;overflow:hidden;border-radius:calc(var(--q) * 16);background:var(--paper);box-shadow:0 calc(var(--q) * 40) calc(var(--q) * 70) calc(var(--q) * -30) rgba(0,0,0,.85)}
.new-in{--q:calc(100cqw / 560)}
.new-in .s-copy{left:calc(40% + var(--q) * 30);right:calc(var(--q) * 28)}
.new-in .s-title{margin-top:calc(var(--q) * 14);font-size:calc(var(--q) * 34);line-height:1.06}
.new-in .sl-num{top:calc(var(--q) * 24);right:calc(var(--q) * 26)}
.mn-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(var(--q) * 16);margin-top:calc(var(--q) * 22)}
.mn-stats .s-stat b{font-size:calc(var(--q) * 26)}

@keyframes mod-old{0%,40%{opacity:1;transform:none}48%,90%{opacity:0;transform:var(--morph)}90.1%{opacity:0;transform:scale(.95)}98%,100%{opacity:1;transform:none}}
@keyframes mod-file{0%,38%{opacity:1;transform:none}44%,90%{opacity:0;transform:translateY(calc(var(--q) * -10))}97%,100%{opacity:1;transform:none}}
@keyframes mod-scan{0%,6%{opacity:0;transform:translateY(0)}9%{opacity:1}34%{opacity:1;transform:translateY(calc(var(--q) * 300))}38%,100%{opacity:0;transform:translateY(calc(var(--q) * 300))}}
@keyframes mod-tint{0%,6%{opacity:1;transform:scaleY(0)}34%,44%{opacity:1;transform:scaleY(1)}48%,100%{opacity:0;transform:scaleY(1)}}
@keyframes mod-new{0%,42%{opacity:0;transform:scale(.94)}50%,90%{opacity:1;transform:none}96%,100%{opacity:0;transform:scale(.98)}}
/* parts assemble with a stagger: each one lags the frame by --s x 0.18s */
@keyframes mod-part{0%,45%{opacity:0;transform:translateY(calc(var(--q) * 16))}53%,100%{opacity:1;transform:none}}
@keyframes mod-panel{0%,43%{opacity:0;transform:translateX(-30%)}52%,100%{opacity:1;transform:none}}
@keyframes chip-hl{0%,44%{transform:none}50%,90%{transform:translateX(100px)}96%,100%{transform:none}}
@keyframes chip-a{0%,44%{opacity:1}50%,90%{opacity:.55}96%,100%{opacity:1}}
@keyframes chip-b{0%,44%{opacity:.55}50%,90%{opacity:1}96%,100%{opacity:.55}}

/* ---------- Screens: laptop, portrait tablet, phone ----------
   Devices share one spot and take turns. Each is placed by --x, --y, --w (--h) in stage
   units; the stage swaps to a tall layout under 440px so the phone stays over 200px wide. */
.stage{position:relative;width:100%;aspect-ratio:600 / 500}
.dv{position:absolute;left:calc(var(--q) * var(--x));top:calc(var(--q) * var(--y));width:calc(var(--q) * var(--w))}
.dv-lap{--x:30;--y:66;--w:540;--still:translate(calc(var(--q) * -70),calc(var(--q) * -40)) scale(.74)}
.dv-tab{--x:125;--y:17;--w:350;--h:466;--still:translate(calc(var(--q) * 150),calc(var(--q) * 40)) scale(.5)}
.dv-ph{--x:182;--y:12;--w:236;--h:476;--still:translate(calc(var(--q) * 222),calc(var(--q) * 80)) scale(.44)}
@container scr (max-width:439px){
  .stage{aspect-ratio:600 / 780}
  .dv-lap{--y:206;--still:translate(calc(var(--q) * -60),calc(var(--q) * -200)) scale(.8)}
  .dv-tab{--x:60;--y:70;--w:480;--h:640;--still:translate(calc(var(--q) * -80),calc(var(--q) * 170)) scale(.5)}
  .dv-ph{--x:115;--y:20;--w:370;--h:740;--still:translate(calc(var(--q) * 140),calc(var(--q) * 190)) scale(.4)}
}
.dv-view{position:relative;height:100%;overflow:hidden;background:var(--paper);container-type:inline-size}
.dv-page{position:relative;height:100%}

.lap-screen{aspect-ratio:540 / 352;padding:calc(var(--q) * var(--w) * .0185);border-radius:calc(var(--q) * var(--w) * .033) calc(var(--q) * var(--w) * .033) calc(var(--q) * var(--w) * .011) calc(var(--q) * var(--w) * .011);background:#1B1744;border:1px solid rgba(183,168,255,.24);box-shadow:0 calc(var(--q) * 40) calc(var(--q) * 70) calc(var(--q) * -30) rgba(0,0,0,.8)}
.lap-screen .dv-view{border-radius:calc(var(--q) * var(--w) * .015)}
.lap-base{position:relative;margin:0 -5.556%;aspect-ratio:600 / 16;border-radius:calc(var(--q) * 2) calc(var(--q) * 2) calc(var(--q) * 16) calc(var(--q) * 16);background:linear-gradient(180deg,#2C2768,#191540);border:1px solid rgba(183,168,255,.2)}
.lap-base::before{content:"";position:absolute;left:50%;top:0;width:15%;height:38%;margin-left:-7.5%;border-radius:0 0 calc(var(--q) * 6) calc(var(--q) * 6);background:rgba(8,6,24,.55)}
.dv-tab,.dv-ph{height:calc(var(--q) * var(--h));background:#1B1744;border:1px solid rgba(183,168,255,.28);box-shadow:0 calc(var(--q) * 40) calc(var(--q) * 70) calc(var(--q) * -30) rgba(0,0,0,.85);opacity:0}
.dv-tab{padding:calc(var(--q) * var(--w) * .04);border-radius:calc(var(--q) * var(--w) * .085)}
.dv-tab .dv-view{border-radius:calc(var(--q) * var(--w) * .045)}
.dv-tab::before{content:"";position:absolute;left:50%;top:calc(var(--q) * var(--w) * .013);width:calc(var(--q) * var(--w) * .014);height:calc(var(--q) * var(--w) * .014);margin-left:calc(var(--q) * var(--w) * -.007);border-radius:50%;background:rgba(183,168,255,.3)}
.dv-ph{padding:calc(var(--q) * var(--w) * .036);border-radius:calc(var(--q) * var(--w) * .17)}
.dv-ph .dv-view{border-radius:calc(var(--q) * var(--w) * .135)}

/* Laptop page: browser bar and the full slide. 520 units wide. */
.lap-page{--q:calc(100cqw / 520)}
.lap-bar{position:absolute;left:0;right:0;top:0;height:calc(var(--q) * 26);display:flex;align-items:center;gap:calc(var(--q) * 6);padding:0 calc(var(--q) * 12);background:#E4DEFB}
.lap-bar i{width:calc(var(--q) * 7);height:calc(var(--q) * 7);border-radius:50%;background:rgba(18,15,46,.2)}
.lap-bar span{width:calc(var(--q) * 170);height:calc(var(--q) * 12);margin:0 auto;border-radius:99px;background:rgba(255,255,255,.85);box-shadow:inset 0 0 0 1px rgba(18,15,46,.08)}
.lap-slide{position:absolute;left:0;right:0;top:calc(var(--q) * 26);bottom:0}
.lap-slide .s-panel .s-mono{left:calc(var(--q) * 20);top:calc(var(--q) * 20);width:calc(var(--q) * 20);height:calc(var(--q) * 20)}
.lap-slide .s-copy{left:calc(40% + var(--q) * 26);right:calc(var(--q) * 22)}
.lap-slide .s-title{font-size:calc(var(--q) * 27)}
.lap-slide .sl-num{top:calc(var(--q) * 22);right:calc(var(--q) * 22)}

/* Tablet and phone pages reflow like a web page: a status bar (the phone's island lives
   in it, the tablet camera sits on the bezel), then the cover, then the next page peeking.
   Tablet 300 units wide, phone 204. */
.tab-page{--q:calc(100cqw / 300)}
.ph-page{--q:calc(100cqw / 204)}
.dv-status{position:relative;display:flex;align-items:center;justify-content:space-between;height:calc(var(--q) * 30);padding:0 calc(var(--q) * 18) 0 calc(var(--q) * 20)}
.dv-time{font:600 calc(var(--q) * 9.5)/1 var(--sans);color:var(--ink);font-variant-numeric:tabular-nums}
.dv-bat{width:calc(var(--q) * 17);height:calc(var(--q) * 8);border-radius:calc(var(--q) * 2.5);background:rgba(18,15,46,.62)}
.dv-island{position:absolute;left:50%;top:calc(var(--q) * 7);width:calc(var(--q) * 58);height:calc(var(--q) * 17);margin-left:calc(var(--q) * -29);border-radius:99px;background:var(--night)}
.tab-page .dv-status{height:calc(var(--q) * 24);padding:0 calc(var(--q) * 18)}
.tab-page .dv-time{font-size:calc(var(--q) * 8.5)}
.tab-page .dv-bat{width:calc(var(--q) * 15);height:calc(var(--q) * 7)}
.pg{padding:calc(var(--q) * 2) calc(var(--q) * 10) 0}
.tab-page .pg{padding:calc(var(--q) * 4) calc(var(--q) * 16) 0}
.pg-panel{position:relative;height:calc(var(--q) * 124);overflow:hidden;border-radius:calc(var(--q) * 14);background:var(--violet);color:var(--paper)}
.tab-page .pg-panel{height:calc(var(--q) * 150)}
.pg-panel .s-mono{left:calc(var(--q) * 12);top:calc(var(--q) * 12);width:calc(var(--q) * 16);height:calc(var(--q) * 16)}
.pg-copy{padding:calc(var(--q) * 14) calc(var(--q) * 6) 0}
.pg-copy .s-eyebrow{font-size:max(7.5px,calc(var(--q) * 9.5));line-height:1.4}
.ph-page .s-eyebrow .g{display:block}
.ph-page .s-eyebrow .dot{display:none}
.pg-copy .s-title{margin-top:calc(var(--q) * 7);font-size:calc(var(--q) * 19);line-height:1.1}
.pg-copy .s-sub{margin-top:calc(var(--q) * 8);font-size:max(8.5px,calc(var(--q) * 10.5))}
.tab-page .pg-copy{padding:calc(var(--q) * 18) calc(var(--q) * 4) 0}
.tab-page .pg-copy .s-title{margin-top:calc(var(--q) * 9);font-size:calc(var(--q) * 24)}
.tab-page .pg-copy .s-sub{margin-top:calc(var(--q) * 10);font-size:max(8.5px,calc(var(--q) * 11.5))}
.pg-next{margin:calc(var(--q) * 16) calc(var(--q) * 6) 0;padding-top:calc(var(--q) * 14);border-top:1px solid rgba(18,15,46,.1)}
.tab-page .pg-next{margin:calc(var(--q) * 20) calc(var(--q) * 4) 0;padding-top:calc(var(--q) * 16)}
.pg-h{display:block;margin:calc(var(--q) * 9) 0 calc(var(--q) * 11);font:600 calc(var(--q) * 15)/1.2 var(--display);letter-spacing:-.02em;color:var(--ink)}
.tab-page .pg-h{font-size:calc(var(--q) * 16)}
.pg-row{display:flex;align-items:center;gap:calc(var(--q) * 9);height:calc(var(--q) * 14);margin-bottom:calc(var(--q) * 10)}
.pg-row b{flex:none;width:calc(var(--q) * 12);height:calc(var(--q) * 12);border-radius:50%;background:var(--violet)}
.pg-row i{height:calc(var(--q) * 6);border-radius:9px;background:rgba(18,15,46,.22)}
.pg-weeks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(var(--q) * 8)}
.pg-weeks span{display:grid;gap:calc(var(--q) * 7);padding:calc(var(--q) * 11);border-radius:calc(var(--q) * 10);background:rgba(123,92,255,.08)}
.pg-weeks b{width:calc(var(--q) * 10);height:calc(var(--q) * 10);border-radius:50%;background:var(--violet)}
.pg-weeks i{height:calc(var(--q) * 5);border-radius:9px;background:rgba(18,15,46,.2)}
.pg-weeks i + i{width:62%}

/* Three points under the visual; the chip of the device on screen is highlighted */
.dev-pts{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.dev-pt{display:grid;justify-items:start;align-content:start;gap:10px}
.dev-chip{position:relative;isolation:isolate;display:inline-grid;place-items:center;min-width:84px;height:34px;padding:0 16px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(183,168,255,.2);font:500 14px/1 var(--sans);color:var(--paper)}
.dev-chip::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:rgba(183,168,255,.14);box-shadow:inset 0 0 0 1px rgba(183,168,255,.55);opacity:0}
.dev-pt:first-child .dev-chip::before{opacity:1}
.dev-line{font-size:15px;line-height:1.5;color:var(--muted)}
@container scr (max-width:519px){
  .dev-pts{grid-template-columns:minmax(0,1fr);gap:12px}
  .dev-pt{grid-template-columns:88px minmax(0,1fr);align-items:center;gap:14px}
  .dev-chip{justify-self:stretch}
}

/* 9s loop, 3s per device; the chips use the same clock with a 3s lag each */
@keyframes dv-lap{0%,27.8%{opacity:1;transform:none}33.3%,94.4%{opacity:0;transform:scale(.9)}100%{opacity:1;transform:none}}
@keyframes dv-tab{0%,27.8%{opacity:0;transform:translateY(calc(var(--q) * 24)) scale(.96)}33.3%,61.1%{opacity:1;transform:none}66.7%,100%{opacity:0;transform:scale(.9)}}
@keyframes dv-ph{0%,61.1%{opacity:0;transform:translateY(calc(var(--q) * 24)) scale(.96)}66.7%,94.4%{opacity:1;transform:none}100%{opacity:0;transform:scale(.9)}}
@keyframes dev-on{0%,30%{opacity:1}31.5%,96.5%{opacity:0}98%,100%{opacity:1}}

/* ---------- Languages ---------- */
.lang-chips{position:relative;display:flex;justify-content:center;gap:6px;margin-bottom:22px}
.lang-chip{position:relative;z-index:1;display:inline-grid;place-items:center;width:48px;height:36px;border-radius:999px;font:500 13px/1 var(--sans);letter-spacing:.08em;color:var(--paper);opacity:.5}
.lang-hl + .lang-chip{opacity:1}
.lang-hl{position:absolute;left:50%;top:0;width:48px;height:36px;margin-left:-159px;border-radius:999px;background:rgba(183,168,255,.14);border:1px solid rgba(183,168,255,.45)}
.lang-hl::after{content:"";position:absolute;left:50%;bottom:-9px;width:14px;height:2px;margin-left:-7px;border-radius:2px;background:var(--lav)}
.lang-slide{position:relative;width:100%;aspect-ratio:16 / 10;overflow:hidden;border-radius:calc(var(--q) * 16);background:var(--paper);box-shadow:0 calc(var(--q) * 44) calc(var(--q) * 80) calc(var(--q) * -36) rgba(0,0,0,.85)}
.ls-band{position:absolute;left:0;right:0;top:0;height:calc(var(--q) * 128);overflow:hidden;background:var(--violet);color:var(--paper)}
.ls-band .s-mono{left:calc(var(--q) * 40);top:calc(var(--q) * 24)}
.ls-titles{position:absolute;left:calc(var(--q) * 40);right:calc(var(--q) * 40);top:calc(var(--q) * 160);height:calc(var(--q) * 72)}
.ls-subs{position:absolute;left:calc(var(--q) * 40);right:calc(var(--q) * 40);top:calc(var(--q) * 246);height:calc(var(--q) * 24)}
.ls-t,.ls-s{position:absolute;left:0;right:0;opacity:0}
.ls-t{bottom:0;font:600 calc(var(--q) * 30)/1.12 var(--display);letter-spacing:-.03em;color:var(--ink)}
.ls-s{top:0;overflow:hidden;text-overflow:ellipsis;font:400 max(9px,calc(var(--q) * 15))/1.5 var(--sans);color:var(--ink-2);white-space:nowrap}
.ls-t:nth-child(1),.ls-s:nth-child(1){opacity:1}
[lang="ja"]{font-family:var(--display),"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","Noto Sans JP",sans-serif;letter-spacing:0}
.ls-foot{position:absolute;left:calc(var(--q) * 40);right:calc(var(--q) * 40);bottom:calc(var(--q) * 30);display:flex;justify-content:flex-end;padding-top:calc(var(--q) * 14);border-top:1px solid rgba(18,15,46,.1)}
.ls-foot .sl-num{position:static}

/* Six languages, 2.4s each, one 14.4s loop. Negative delays keep every item in phase. */
@keyframes lang-roll{0%,1.9%{opacity:0;transform:translateY(calc(var(--q) * 18))}5%,16.667%{opacity:1;transform:none}18.6%,100%{opacity:0;transform:translateY(calc(var(--q) * -18))}}
@keyframes lang-hl{0%,13.667%{transform:none}16.667%,30.333%{transform:translateX(54px)}33.333%,47%{transform:translateX(108px)}50%,63.667%{transform:translateX(162px)}66.667%,80.333%{transform:translateX(216px)}83.333%,97%{transform:translateX(270px)}100%{transform:none}}
@keyframes lang-chip{0%,13.667%{opacity:1}16.667%,97%{opacity:.5}100%{opacity:1}}

/* ---------- Trace ---------- */
.trace-grid{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:20px;align-items:stretch;margin-top:64px}
.panel{display:flex;flex-direction:column;padding:6px;border-radius:22px;background:var(--night-2);border:1px solid var(--line);box-shadow:0 50px 90px -50px rgba(0,0,0,.85)}
.panel-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;padding:16px 20px 18px;border-bottom:1px solid var(--line)}
.panel-deck{display:flex;align-items:center;gap:14px;font:600 17px/1.3 var(--display);letter-spacing:-.02em;color:var(--paper)}
.readers{flex:1;display:flex;flex-direction:column;list-style:none;margin:0;padding:0}
.reader{flex:1 0 auto;display:grid;grid-template-columns:40px minmax(0,1fr) auto;grid-template-areas:"av who tiles" "av who st";align-items:center;gap:8px 20px;padding:18px 20px;border-bottom:1px solid var(--line)}
.reader:last-child{border-bottom:0}
.reader.is-sel{background:linear-gradient(90deg,rgba(183,168,255,.09),rgba(183,168,255,0) 75%);box-shadow:inset 2px 0 0 var(--lav)}
.reader .av{grid-area:av}
.who{grid-area:who}
.tiles{grid-area:tiles;align-self:end}
.status{grid-area:st;align-self:start}
.who strong{display:block;font-weight:500;font-size:16px;line-height:1.35;color:var(--paper)}
.who span{display:block;font-size:14px;line-height:1.4;color:var(--muted)}
.tiles{display:flex;gap:5px}
.tiles i{position:relative;width:32px;height:22px;overflow:hidden;border-radius:5px;background:rgba(183,168,255,.06);box-shadow:inset 0 0 0 1px var(--line)}
.tiles i.empty{background:none;box-shadow:none;border:1px dashed rgba(183,168,255,.22)}
.tiles b{position:absolute;inset:0;background:var(--lav);opacity:var(--a);transform-origin:50% 100%}
.tiles i.is-now{box-shadow:inset 0 0 0 1px var(--lav)}
.tiles i.is-now::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--lav);opacity:0}
@keyframes tile-now{0%,100%{opacity:0}50%{opacity:.5}}
.status{font-size:14px;line-height:1.4;text-align:right;white-space:nowrap}
.st-1{color:var(--paper)}
.st-2{color:var(--muted)}
.st-3{color:var(--lav)}
.js .reader{opacity:0;transform:translateY(10px);transition:opacity .55s var(--ease),transform .55s var(--ease);transition-delay:calc(200ms + var(--r) * 420ms)}
.js .tiles b{transform:scaleY(0);transition:transform .5s var(--ease);transition-delay:calc(380ms + var(--r) * 420ms + var(--t) * 70ms)}
.js .panel.is-in .reader{opacity:1;transform:none}
.js .panel.is-in .tiles b{transform:none}

/* Sarah's page-by-page card, attached to her row */
.pbp{position:relative;display:flex;flex-direction:column;padding:20px 22px;border-radius:22px;background:var(--night-2);border:1px solid var(--line);box-shadow:0 50px 90px -50px rgba(0,0,0,.85)}
.pbp-head{display:flex;align-items:center;gap:12px;padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--line)}
.pbp-head .av{width:32px;height:32px;font-size:14px}
.pbp-title{margin:0;font:600 17px/1.3 var(--display);letter-spacing:-.02em;color:var(--paper)}
.pbp-rows{flex:1;list-style:none;margin:0;padding:0;display:grid;gap:8px;align-content:space-between}
.pbp-rows li{display:grid;grid-template-columns:16px minmax(0,1fr) auto;align-items:center;gap:5px 10px;font-size:14px;line-height:1.3}
.pbp-n{color:var(--muted);font-variant-numeric:tabular-nums}
.pbp-name{display:flex;align-items:center;gap:8px;min-width:0;color:var(--paper)}
.pbp-time{color:var(--muted);font-variant-numeric:tabular-nums}
.pbp-tag{display:inline-flex;align-items:center;height:19px;padding:0 8px;border-radius:999px;background:var(--lav);font:500 13px/1 var(--sans);color:var(--night);white-space:nowrap}
.pbp-bar{grid-column:2 / -1;height:5px;overflow:hidden;border-radius:3px;background:rgba(183,168,255,.1)}
.pbp-bar i{display:block;height:100%;border-radius:inherit;background:var(--lav);transform:scaleX(var(--w));transform-origin:0 50%}
.pbp-rows .is-top .pbp-bar i{background:linear-gradient(90deg,var(--violet),var(--lav))}
.js .pbp-bar i{transition:transform .9s var(--ease);transition-delay:calc(650ms + var(--p) * 90ms)}
.js .pbp:not(.is-in) .pbp-bar i{transform:scaleX(0)}

/* Six things a sender learns */
.feats{list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 40px}
.feat{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:16px;align-content:start}
/* Modernize uses the same points, stacked under its copy */
.pts{list-style:none;margin:36px 0 0;padding:0;display:grid;gap:22px}
.feat-ic{grid-row:span 2;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:rgba(183,168,255,.08);box-shadow:inset 0 0 0 1px rgba(183,168,255,.2)}
.feat-ic svg{width:24px;height:24px;fill:none;stroke:var(--lav);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.feat-ic .fill{fill:var(--violet);stroke:none}
.feat-ic .fill-soft{fill:var(--lav);stroke:none;opacity:.5}
.feat-ic .accent{stroke:var(--violet);stroke-width:2.2}
.feat-ic .cut{stroke:var(--paper);stroke-width:1.1;opacity:.9}
.feat h3{margin:1px 0 0;font:600 17px/1.3 var(--display);letter-spacing:-.02em;color:var(--paper)}
.feat p{margin-top:6px;font-size:15px;line-height:1.5;color:var(--muted)}

/* ---------- Suggestions: a feed that thinks, then speaks ----------
   Cards arrive one per second when the feed enters; each shows a shimmering skeleton
   while it "thinks", then its title, reason and action fade in. */
.sg-feed{list-style:none;margin:0;padding:0;display:grid;gap:12px;container:sg / inline-size}
.sg-card{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr);gap:16px;align-items:start;padding:18px 20px;border-radius:18px;background:var(--night-2);border:1px solid var(--line);box-shadow:0 30px 60px -40px rgba(0,0,0,.8)}
.sg-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:rgba(183,168,255,.08);box-shadow:inset 0 0 0 1px rgba(183,168,255,.2)}
.sg-ic svg{width:22px;height:22px}
.sg-ic .fill{fill:var(--lav)}
.sg-ic .soft{fill:var(--violet)}
.sg-body{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px 20px;min-height:40px}
.sg-top{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.sg-title{display:block;font:600 16px/1.35 var(--display);letter-spacing:-.02em;color:var(--paper)}
.sg-tag{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;background:rgba(183,168,255,.14);font:500 13px/1 var(--sans);color:var(--lav);white-space:nowrap}
.sg-tag.is-version{background:none;box-shadow:inset 0 0 0 1px rgba(183,168,255,.45);color:var(--paper)}
.sg-why{display:block;margin-top:4px;font-size:14.5px;line-height:1.5;color:var(--muted)}
.sg-quote{color:var(--paper)}
/* The reader's question leads the feed */
.sg-card.is-q{border-color:rgba(183,168,255,.3);background:linear-gradient(180deg,rgba(123,92,255,.13),rgba(123,92,255,.03)),var(--night-2)}
.sg-card.is-q .sg-ic{color:var(--lav)}
.sg-card.is-q .sg-ic svg{fill:none;stroke:var(--lav);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sg-act{display:inline-flex;align-items:center;height:34px;padding:0 14px;border-radius:999px;background:rgba(183,168,255,.1);box-shadow:inset 0 0 0 1px rgba(183,168,255,.32);font:500 13.5px/1 var(--sans);color:var(--paper);white-space:nowrap}
@container sg (max-width:519px){
  .sg-body{grid-template-columns:minmax(0,1fr)}
  .sg-act{justify-self:start}
}
.sg-skel{position:absolute;left:0;right:0;top:3px;display:grid;gap:10px;pointer-events:none;opacity:0}
.sg-skel i{position:relative;display:block;height:10px;overflow:hidden;border-radius:5px;background:rgba(183,168,255,.12)}
.sg-skel i:first-child{width:42%;height:12px}
.sg-skel i:last-child{width:78%}
.sg-skel i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(183,168,255,0),rgba(183,168,255,.38),rgba(183,168,255,0));transform:translateX(-100%)}
.js .sg-card{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease);transition-delay:calc(var(--k) * 1s + .1s)}
.js .sg-c{opacity:0;transition:opacity .5s var(--ease);transition-delay:calc(var(--k) * 1s + 1.05s)}
.js .sg-skel{opacity:1;transition:opacity .3s linear;transition-delay:calc(var(--k) * 1s + 1s)}
.js .sg-feed.is-in .sg-card{opacity:1;transform:none}
.js .sg-feed.is-in .sg-c{opacity:1}
.js .sg-feed.is-in .sg-skel{opacity:0}
@keyframes sg-shim{to{transform:translateX(100%)}}
@keyframes sg-think{0%{opacity:.3;transform:scale(.6) rotate(-30deg)}60%{opacity:1;transform:scale(1.12) rotate(8deg)}100%{opacity:1;transform:none}}

/* ---------- Templates: the gallery is mounted into #tpl-gallery ----------
   On home the gallery shows its first twelve decks; the full set lives on
   /templates/, so the gallery's own "Show all" button gives way to that link. */
.tpl-gallery{margin-top:64px}
#tpl-gallery .tg-more{display:none}
.tpl-more{display:flex;justify-content:center;margin-top:44px}
/* Built for: four solution links under the gallery */
.built{margin-top:64px;padding-top:40px;border-top:1px solid var(--line)}
.built-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.built-card{display:flex;align-items:center;gap:14px;height:100%;min-height:68px;padding:14px 18px 14px 14px;border-radius:16px;background:var(--night-2);border:1px solid var(--line);font:500 16px/1.35 var(--sans);color:var(--paper);text-decoration:none;transition:transform .3s var(--ease),border-color .3s}
.built-card:hover{transform:translateY(-2px);border-color:rgba(183,168,255,.32)}
.built-t{min-width:0}

/* ---------- Your visit ---------- */
.report{position:relative;padding:24px 24px 26px;border-radius:22px;background:var(--night-2);border:1px solid var(--line);box-shadow:0 50px 90px -50px rgba(0,0,0,.85)}
.report{--c2:56px;--c3:76px}
.rep-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 16px}
.rep-who{display:flex;align-items:center;gap:12px;font-size:16px;color:var(--paper)}
.rep-who strong{font-weight:500}
.av-you{width:36px;height:36px;font-size:15px;background:linear-gradient(135deg,var(--violet),#9A83FF)}
/* What a browser can tell without storage: first visit, screen, language */
.rep-facts{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.rep-stats{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:22px 0 20px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.rep-num{display:block;font:600 52px/1 var(--display);letter-spacing:-.03em;color:var(--paper);font-variant-numeric:tabular-nums}
.rep-lbl{display:block;margin-top:10px;font-size:13px;line-height:1.2;color:var(--muted)}
.rep-reach{font-size:14px;line-height:1.3;text-align:right;color:var(--paper)}
.reach-dots{display:flex;justify-content:flex-end;gap:5px;margin-top:10px}
.reach-dots i{width:16px;height:6px;border-radius:3px;background:var(--lav);opacity:.2;transition:opacity .4s}
.reach-dots i.is-on{opacity:1}
.rep-cols{display:grid;grid-template-columns:minmax(0,1fr) var(--c2) var(--c3);gap:0 12px;margin-bottom:12px;font-size:13px;line-height:1.2;color:var(--muted)}
.rep-cols span + span{text-align:right}
.rep-rows{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.rep-row{display:grid;grid-template-columns:minmax(0,1fr) var(--c2) var(--c3);align-items:center;gap:7px 12px;font-size:14px;line-height:1.4}
.rep-name{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;min-height:22px;color:var(--paper)}
.rep-sec,.rep-depth{color:var(--muted);font-variant-numeric:tabular-nums;text-align:right}
.rep-depth b{font-weight:400}
.rep-bar{grid-column:1 / -1;height:6px;overflow:hidden;border-radius:3px;background:rgba(183,168,255,.1)}
.rep-bar i{display:block;height:100%;border-radius:inherit;background:var(--lav);transform:scaleX(0);transform-origin:0 50%}
.report.is-filled .rep-bar i{transition:transform .9s var(--ease) calc(var(--i) * 70ms)}
.report.is-live .rep-bar i{transition:transform .6s var(--ease)}
.rep-row.is-top .rep-bar i{background:linear-gradient(90deg,var(--violet),var(--lav))}
.rep-tag{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;background:var(--lav);font:500 13px/1 var(--sans);color:var(--night)}
.rep-tag[hidden]{display:none}
.nudge{display:flex;align-items:flex-start;gap:12px;margin-top:20px;padding:0 6px;font-size:15px;line-height:1.5;color:var(--muted)}
.nudge-dot{flex:none;width:8px;height:8px;margin-top:8px;border-radius:50%;background:var(--lav);box-shadow:0 0 0 4px rgba(183,168,255,.15)}

/* ---------- Launch: the close of Your visit, the Start free block ---------- */
.access{display:flex;flex-direction:column;align-items:center;margin-top:128px;text-align:center;scroll-margin-top:96px}
.access .body{margin-inline:auto}
.access-title{margin:0;font:600 clamp(28px,3.4vw,44px)/1.08 var(--display);letter-spacing:-.03em;color:var(--paper);text-wrap:balance}
.access-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;margin-top:28px}
.launch{position:relative;isolation:isolate;display:grid;place-items:center;width:96px;height:96px;margin-bottom:40px;--T:4.8s}
.ripple{position:absolute;inset:0;pointer-events:none}
.launch::before{content:"";position:absolute;inset:-72px;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,rgba(123,92,255,.3),transparent);pointer-events:none}
.ripple i{position:absolute;left:50%;top:50%;width:256px;height:256px;margin:-128px 0 0 -128px;border-radius:50%;border:1px solid rgba(183,168,255,.5);opacity:0;transform:scale(.375);pointer-events:none}
.ripple i:nth-child(1){--d:calc(var(--T) * -.72)}
.ripple i:nth-child(2){--d:calc(var(--T) * -.3867)}
.ripple i:nth-child(3){--d:calc(var(--T) * -.0533)}
@keyframes ripple{0%{opacity:0;transform:scale(.375)}6%{opacity:.45}48%,100%{opacity:0;transform:scale(1)}}
.back{display:inline-flex;align-items:center;min-height:44px;margin-top:28px;padding:0 4px;font-weight:500;font-size:16px;color:var(--lav);text-decoration:none;background-image:linear-gradient(currentColor,currentColor);background-size:0 1px;background-position:0 calc(100% - 10px);background-repeat:no-repeat;transition:background-size .35s var(--ease)}
.back:hover{background-size:100% 1px}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion:no-preference){
  .toast{animation:dt-toast var(--T) var(--ease) var(--d) infinite}

  .mod-old{animation:mod-old 7s var(--flip) infinite}
  .mod-file{animation:mod-file 7s var(--flip) infinite}
  .mod-scan{animation:mod-scan 7s linear infinite}
  .ol-tint{animation:mod-tint 7s linear infinite}
  .mod-new{animation:mod-new 7s var(--flip) infinite}
  .mod-p{animation:mod-part 7s var(--ease) infinite;animation-delay:calc(var(--s) * .18s - 7s)}
  .mod-pl{animation-name:mod-panel}
  .chip-hl{animation:chip-hl 7s var(--flip) infinite}
  .chip-a{animation:chip-a 7s var(--flip) infinite}
  .chip-b{animation:chip-b 7s var(--flip) infinite}

  .dv-lap{animation:dv-lap 9s var(--flip) infinite}
  .dv-tab{animation:dv-tab 9s var(--flip) infinite}
  .dv-ph{animation:dv-ph 9s var(--flip) infinite}
  .dev-chip::before{animation:dev-on 9s var(--flip) infinite;animation-delay:calc(var(--k) * 3s - 9s)}

  .ls-t,.ls-s{animation:lang-roll 14.4s var(--ease) infinite;animation-delay:calc(var(--k) * 2.4s - 14.4s)}
  .ls-s{animation-delay:calc(var(--k) * 2.4s - 14.32s)}
  .lang-hl{animation:lang-hl 14.4s var(--flip) infinite}
  .lang-chip{animation:lang-chip 14.4s var(--flip) infinite;animation-delay:calc(var(--k) * 2.4s - 14.4s)}

  .sg-feed.is-in .sg-skel i::after{animation:sg-shim .85s var(--ease) both;animation-delay:calc(var(--k) * 1s + .2s)}
  .sg-feed.is-in .sg-ic svg{animation:sg-think .9s var(--ease) both;animation-delay:calc(var(--k) * 1s + .1s)}

  .ripple i{animation:ripple var(--T) var(--ease) var(--d) infinite}
  .tiles i.is-now::after{animation:tile-now 2.4s ease-in-out infinite}
  .you-pill.is-off .live::after{animation-play-state:paused}
}

/* ---------- Layout by width ----------
   Checked at 390, 768, 1024, 1280 and 1440. Hero: two columns down to 820px. Header
   links from 1024px. Split pages and two-column headers: one column under 900px. */
@media (min-width:900px){
  .page{display:flex;flex-direction:column;justify-content:center;min-height:100vh;min-height:100svh}
}
@media (min-width:1024px){
  /* the card points at Sarah's row */
  .pbp::before{content:"";position:absolute;left:-7px;top:109px;width:12px;height:12px;background:var(--night-2);border-left:1px solid var(--line);border-bottom:1px solid var(--line);transform:rotate(45deg)}
}
@media (min-width:820px) and (max-width:1099px){
  .hero .lede{font-size:17px}
}
@media (max-width:1099px){
  .built-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1023px){
  .trace-grid{grid-template-columns:minmax(0,1fr)}
  .feats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:959px){
  .reader{grid-template-columns:40px minmax(0,1fr);grid-template-areas:"av who" "tiles tiles" "st st";gap:14px}
  .tiles,.status{align-self:auto}
  .tiles i{flex:1 1 0;width:auto;height:26px}
  .status{text-align:left;white-space:normal}
}
@media (max-width:899px){
  .page{padding:80px 0}
  .hero{min-height:0;padding-top:120px}
  .head-row{grid-template-columns:minmax(0,1fr);gap:24px}
  .mod-visual,.scr-visual,.lang-visual,.you-visual,.sg-feed{width:100%;max-width:620px;justify-self:center}
  .trace-grid,.tpl-gallery{margin-top:40px}
  .built{margin-top:48px;padding-top:32px}
  .feats{margin-top:44px;gap:30px 28px}
  .access{margin-top:96px}
  .folio{bottom:26px}
}
@media (max-width:819px){
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:48px}
  .hero .lede{max-width:36em}
  .hero-visual{width:100%;max-width:620px;justify-self:center}
  .toasts{justify-items:center}
}
@media (max-width:599px){
  .folio{right:16px}
  .hint{display:none}
  .panel-head{padding:14px 14px 16px}
  .reader{padding:16px 14px}
  .pbp{padding:18px 16px 20px}
  .feats{grid-template-columns:minmax(0,1fr);gap:26px}
  .sg-card{padding:16px;gap:14px}
  .report{padding:20px 18px 22px;--c2:50px;--c3:64px}
  .rep-num{font-size:44px}
  .tpl-more{margin-top:32px}
  .built-list{grid-template-columns:minmax(0,1fr);gap:10px}
  .launch{margin-bottom:32px}
  .access-actions{flex-direction:column;align-items:stretch;width:100%;max-width:360px}
  .access-actions .btn{width:100%}
}
@media (hover:none) and (pointer:coarse){
  .hint{display:none}
}

/* ---------- Reduced motion: a calm, static deck (the shared rules are in site.css) ---------- */
@media (prefers-reduced-motion:reduce){
  .js .reader,.js .sg-card,.js .sg-c{opacity:1;transform:none}
  .js .tiles b{transform:none}
  .sg-skel{display:none}
  /* Modernize: the old slide peeks out behind the rebuilt one */
  .mod-old{transform:var(--o-still)}
  .mod-new{transform:var(--n-still)}
  .mod-file{transform:var(--f-still)}
  .chip-b{opacity:1}
  .chip-hl{display:none}
  /* Screens: all three devices side by side */
  .dv{opacity:1;transform:var(--still)}
  .dev-chip::before{opacity:1}
}

/* Home header: the visit pill sits left of Sign in and Start free.
   From 1024px the right column grows with its content, so the pill and the buttons
   never run into the nav (the pill is 102px wide under 1280px, 179px from 1280px).
   Measured: Sign in needs 1230px or more; from 1024px to 1229px it hides.
   Under 600px the pill takes the buttons' place (the cover has its own Start free). */
@media (min-width:1024px){
  .site-header-in{grid-template-columns:minmax(0,1fr) auto minmax(max-content,1fr)}
}
@media (min-width:1024px) and (max-width:1229px){
  .site-header .site-signin{display:none}
}
@media (max-width:599px){
  .site-header .site-cta{display:none}
  .you-pill{padding:0 10px;gap:0}
  .you-pill .live{display:none}
}