/* ============================================================ S2 — AI automation agency on warm paper Caldera's band rhythm + surface language · Duolingo's character-as-content + pressable lip · Kikin's type duet + patch badges · S2's own indigo. Every contrast figure below is MEASURED (tools/contrast.py, canvas #F6F4EF). ============================================================ */ :root{ /* ink + brand */ --ink:#111118; --ink-lip:#000005; --ink-soft:#26262F; --indigo:#5C33F6; --indigo-lip:#4322C9; /* white on indigo 6.44:1 · indigo on paper 5.86:1 */ /* --orange is a SURFACE/GRAPHIC value only — 2.58:1 on paper, fails even large-AA. Text uses --orange-ink: #B03A08 · 5.53:1 on paper, 5.11:1 on fold-2 — darkened from the live site's redline-ink #C2410C, which failed body-AA (4.35:1) on the fold-2 bands. */ --orange:#FF6B35; --orange-ink:#B03A08; --orange-lip:#D9541F; /* muted text 5.93:1 on paper; --line is chrome only, never text */ --muted:#5C5C70; --line:#B9B4C4; /* surfaces — warm paper, not the cold #FAFAFA the old site ran */ --paper:#F6F4EF; --card:#FFFEFA; --fold:#E6E1D6; --fold-2:#EFEBE2; --midnight:#111118; --display:'Anton','Plus Jakarta Sans',sans-serif; --sans:'Plus Jakarta Sans',system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace; --r:16px; --r-card:24px; --r-app:18px; --r-xs:6px; --r-pill:999px; --lip:4px; --lip-t:.1s; --paper-lip:#CDC8BC; --midnight-text:#E8E5F9; /* 15.22:1 on ink */ --nav-h:76px; --strip-h:64px; --container:1160px; --ease-soft:cubic-bezier(.22,1,.36,1); /* ---- compatibility aliases: the shell engine's original token names, remapped. These exist so every structural rule keeps working; the DS tab documents ONLY the real S2 tokens above. ---- */ --aizome:var(--indigo); --aizome-lip:var(--indigo-lip); --persimmon:var(--orange-ink); --persimmon-lip:#A33409; --slate:var(--line); --slate-soft:var(--line); --slate-text:var(--muted); --gold:#F2B01E; --ochre:var(--orange-ink); --ochre-lip:#A33409; --moss:#4A7A44; --moss-lip:#3A6335; --madder:#B33F3F; --madder-lip:#953232; --sky-1:#EDEAF9; --sky-2:#E2DDF4; --sel-fill:#EBE6FB; --sel-lip:#C9BCF0; --ok-fill:#EDF3E8; --ok-lip:#C4D6B8; --no-fill:#FAECEC; --no-lip:#E8C4C4; --locked-lip:#CFC8BA; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{font:600 17px/1.6 var(--sans);color:var(--ink-soft);background:var(--paper);-webkit-font-smoothing:antialiased} .wrap{width:100%;max-width:var(--container);margin:0 auto;padding:0 28px} img{max-width:100%;height:auto;display:block} /* ---------- type ---------- */ /* line 1 carries the page; line 2 drops back to a subline, with only the promise emboldened */ /* one voice, one size — the line carries itself without a second tier of type. The italic is a real cut (the ital axis is loaded), never a synthesised slant. */ h1.hero-h1{font:700 50px/1.16 var(--sans);color:var(--ink);letter-spacing:-.015em} /* the tail wraps as one unit so "to" never strands at the end of line one. The subject is set letter-by-letter in a four-hue cycle — every one of these clears 3:1 on paper, so the play never costs legibility. The h1 carries an aria-label and the split letters are hidden, or a screen reader spells it out. */ h1.hero-h1 .h1-tail{white-space:nowrap} h1.hero-h1 i{font-style:italic;font-synthesis:none} h1.hero-h1 i .c1{color:var(--aizome)} /* blue 5.44:1 */ h1.hero-h1 i .c2{color:var(--ochre-lip)} /* gold 3.11:1 */ h1.hero-h1 i .c3{color:var(--moss)} /* green 4.41:1 */ h1.hero-h1 i .c4{color:var(--madder)} /* red 5.17:1 */ .display{font-family:var(--display);font-weight:700;font-size:50px;line-height:1.1;letter-spacing:-.02em;color:var(--ink)} .display-xl{font-family:var(--display);font-weight:700;font-size:68px;line-height:1.05;letter-spacing:-.025em;color:var(--ink)} /* The eyebrow is a quiet label; the ACCENT lives on the heading, where it can actually be seen. Persimmon at 50px clears 3:1 for large text — at 13px it never did. */ .eyebrow{font:800 13px var(--sans);letter-spacing:1.6px;text-transform:uppercase;color:var(--slate-text)} .feature .copy .display{color:var(--persimmon)} .feature.flip .copy .display{color:var(--aizome)} .lede{font-size:18px;color:var(--slate-text);font-weight:600} .cite{font-size:14px;line-height:1.6;color:var(--slate-text);font-weight:600;padding-left:16px;border-left:3px solid var(--fold);margin-bottom:24px} .inline-link{color:var(--aizome);font-weight:800;text-decoration:none;border-bottom:2px solid rgba(62,98,168,.3);transition:border-color .2s} @media(hover:hover){.inline-link:hover{border-color:var(--aizome)}} /* ---------- buttons: the lip ---------- */ .btn{position:relative;z-index:0;display:inline-flex;align-items:center;justify-content:center;gap:10px; height:54px;padding:0 22px;border:none;background:none;cursor:pointer;border-radius:var(--br,var(--r)); font:800 15px/1 var(--sans);letter-spacing:.6px;text-transform:uppercase;color:var(--paper);text-decoration:none; transition:filter .2s,transform var(--lip-t)} .btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--bg,var(--ink)); border-radius:var(--br,var(--r));color:var(--lipc,var(--ink-lip));box-shadow:0 var(--lw,var(--lip)) 0; transition:box-shadow var(--lip-t)} .btn:active{transform:translateY(var(--lw,var(--lip)))} .btn:active::before{box-shadow:none} /* Hover lifts the button and GROWS the lip — on a system whose whole identity is a 4px hard lip, a brightness tweak that never touches the lip isn't a hover state. */ @media(hover:hover){ .btn:hover{filter:brightness(1.06);transform:translateY(-2px)} .btn:hover::before{box-shadow:0 calc(var(--lw,var(--lip)) + 2px) 0} .btn-ghost:hover{filter:none}.btn-ghost:hover::before{background:var(--fold-2)} } /* Press is asymmetric on purpose: instant down, eased release. Symmetric felt soft, not clicky. */ .btn:active,.btn:hover:active{transform:translateY(var(--lw,var(--lip)));transition-duration:0s;filter:none} .btn:active::before,.btn:hover:active::before{box-shadow:none;transition-duration:0s} .btn-sm{height:46px;padding:0 20px;font-size:14px} .btn-app{--br:var(--r-app)} .btn-accent{--bg:var(--persimmon);--lipc:var(--persimmon-lip)} .btn-ghost{--bg:var(--card);--lipc:var(--fold);--lw:2px;color:var(--ink)} .btn-ghost::before{border:2px solid var(--fold)} .btn-light{--bg:var(--paper);--lipc:var(--paper-lip);--lw:3px;color:var(--ink)} /* A disabled button reads as OFF, not as a faded accent. `opacity:.45` on persimmon put a dead salmon rectangle on screen as the page's only accent button. */ .btn.is-off{--bg:var(--fold);--lipc:var(--locked-lip);color:var(--slate-text);cursor:default; transition:background-color .2s,color .2s} .btn.is-off:hover{filter:none;transform:none} .btn.is-off:hover::before{box-shadow:0 var(--lw,var(--lip)) 0} :focus-visible{outline:3px solid var(--aizome);outline-offset:3px;border-radius:var(--r-xs)} .btn:focus-visible,.node:focus-visible,.opt:focus-visible{outline-offset:5px} /* ---------- nav ---------- */ .nav{position:sticky;top:0;z-index:100;height:var(--nav-h);background:rgba(247,244,237,.92); backdrop-filter:blur(10px);border-bottom:2px solid var(--fold)} .nav .wrap{height:100%;display:flex;align-items:center;justify-content:space-between} .logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)} .logo img{width:42px;height:42px} .logo .word{font-family:var(--display);font-weight:800;font-size:32px;color:var(--ink);letter-spacing:-.02em} .nav-right{font:800 14px var(--sans);letter-spacing:.6px;text-transform:uppercase;color:var(--slate-text);cursor:pointer;background:none;border:none;padding:6px} /* The two right-hand states crossfade in place. `display` cannot be transitioned, so swapping it teleported a button into existence at scrollY 300 — the cheapest moment on a 6,890px page. */ .nav{transition:height .3s var(--ease-soft),background-color .3s,border-color .3s,box-shadow .3s} .nav-swap{position:relative;display:flex;align-items:center;justify-content:flex-end;min-width:150px;height:46px} .nav-swap>*{position:absolute;right:0;transition:opacity .28s var(--ease-soft),translate .28s var(--ease-soft),scale .28s var(--ease-soft)} .nav .btn-sm{opacity:0;translate:0 8px;scale:.94;pointer-events:none} .nav.scrolled .nav-right{opacity:0;translate:0 -8px;pointer-events:none} .nav.scrolled .btn-sm{opacity:1;translate:none;scale:none;pointer-events:auto} /* the bar itself acknowledges the scroll: it compresses and its edge firms up */ .nav.scrolled{height:62px;border-color:var(--slate-soft)} .nav.scrolled .logo img{width:36px;height:36px} .nav.scrolled .logo .word{font-size:27px} .logo img,.logo .word{transition:width .3s var(--ease-soft),height .3s var(--ease-soft),font-size .3s var(--ease-soft)} /* ---------- motion primitives (bar.md: 2–4s, ease-in-out, pendulum) ---------- */ /* Rotation peaks at 30/70%, lift peaks at 50% — real buoyancy lags rotation behind the rise. Perfectly coupled Y+rotation is the tell that something is on a CSS loop. */ @keyframes bob{0%,100%{transform:translateY(0) rotate(0deg)}30%{transform:translateY(-9px) rotate(-1.2deg)} 50%{transform:translateY(-14px) rotate(-.7deg)}70%{transform:translateY(-9px) rotate(.4deg)}} @keyframes bob-alt{0%,100%{transform:translateY(0) rotate(0deg)}30%{transform:translateY(-7px) rotate(.9deg)} 50%{transform:translateY(-11px) rotate(.5deg)}70%{transform:translateY(-7px) rotate(-.3deg)}} @keyframes drift{0%,100%{transform:translateY(0) translateX(0)}50%{transform:translateY(-12px) translateX(6px)}} @keyframes sway{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}} @keyframes pulse-ring{0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(1.12);opacity:.15}} .float{animation:none} /* was 2.6s at ±18px — the largest amplitude on the shortest period, ~2.5x the linear velocity of everything else. Slowed and calmed so it sits in the same physical world. */ .float-alt{animation:none} .float-drift{animation:none} /* a hanging certificate pivots from where it hangs, not from its middle */ .float-sway{animation:none} /* stagger the phase so sections sharing a loop never beat in unison */ .ph1{animation-delay:-.7s}.ph2{animation-delay:-1.4s}.ph3{animation-delay:-2.1s}.ph4{animation-delay:-2.8s} /* ---------- layered scenes: SCROLL-DRIVEN ---------- Nothing here animates on its own. Each illustration is split into its separate objects (art/split_layers.py — alpha connected components, verified lossless: 0 pixels dropped), and every object carries a radial vector away from the scene's centre of mass. The page multiplies that vector by --a, how far the scene sits from the middle of the viewport. At --a:0 the objects are back in their exact original positions, so a centred scene IS the untouched artwork. Scroll stops, motion stops. */ .scene{position:relative;width:100%;aspect-ratio:var(--ar);pointer-events:none;--a:0;--r:0} .scene .pc{position:absolute;left:var(--l);top:var(--t);width:var(--w);height:auto; translate:calc(var(--ox) * var(--a)) calc(var(--oy) * var(--a)); rotate:calc(var(--rot) * var(--r)); will-change:translate,rotate} /* videos share the scroll clock — currentTime is scrubbed, never auto-played */ .scene-v{position:relative;width:100%;line-height:0} /* a single character is ONE object — splitting it shed the hero screen's bars and the owl's eye. Solos move as a whole on the same scroll clock. */ .solo{display:block;margin:0 auto;translate:0 calc(var(--solo,26px) * var(--sa,0)); rotate:calc(1.2deg * var(--sr,0));will-change:translate,rotate} .scene-v video{width:100%;height:auto;display:block} /* the mascot is on screen for the whole 6,890px scroll — it was the one thing that never moved */ @keyframes nod{0%,88%,100%{transform:translateY(0) rotate(0deg)}92%{transform:translateY(-3px) rotate(-4deg)}96%{transform:translateY(-1px) rotate(2deg)}} .logo img{animation:none} @media(hover:hover){.logo:hover img{animation-duration:1.4s}} /* scroll reveal — 600ms, resolves in one direction. Uses the standalone `translate`/`scale` properties, never `transform`, so a reveal can never overwrite a layout transform on the same element. */ .rise{transition:opacity .6s var(--ease-soft),translate .6s var(--ease-soft),scale .6s var(--ease-soft),clip-path .7s var(--ease-soft)} .js .rise:not(.in){opacity:0;translate:0 26px} .rise.in{opacity:1;translate:none;scale:none} /* reveal variants — the verb matches what is arriving */ .js .rise-l:not(.in){translate:-34px 0} /* copy entering from its own side */ .js .rise-r:not(.in){translate:34px 0} .js .rise-pop:not(.in){translate:0 18px;scale:.94} /* illustrations arrive with weight */ /* the mural grows up out of the bottom edge rather than floating in as a block */ .js .rise-wipe:not(.in){translate:0 14px;clip-path:inset(64% 0 0 0)} .rise-wipe.in{clip-path:inset(0 0 0 0)} .rise.d1{transition-delay:.09s}.rise.d2{transition-delay:.18s}.rise.d3{transition-delay:.27s} .rise.d4{transition-delay:.36s}.rise.d5{transition-delay:.45s} @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .float,.float-alt,.float-drift,.float-sway,.node.current .halo,.opt.ok,.opt.no,.scene .pc,.logo img,.stars svg{animation:none} .js .rise,.js .rise:not(.in){opacity:1;translate:none;scale:none;clip-path:none;transition:none;transition-delay:0s} .progress .fill,.sw,.badge,.lesson-toast{transition:none} .btn,.btn::before,.opt,.opt::before,.node,.node::before,.inline-link,.strip a,.switcher button,.field{transition:none} } /* ---------- hero ---------- */ .hero{min-height:calc(100vh - var(--nav-h) - var(--strip-h));display:flex;align-items:center;padding:40px 0} .hero .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center} .hero-art{position:relative;display:flex;justify-content:center} .hero-art .scene{max-width:600px;margin-right:-10px} .hero .wrap{grid-template-columns:1.05fr .95fr;gap:24px;max-width:1180px} .hero-copy{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:22px} .hero-copy h1{max-width:440px} .hero-cta{display:flex;flex-direction:column;gap:12px;width:320px} /* rating and marks share the CTA's 320px column and centre on it, so the whole block under the buttons reads as one centred stack rather than a ragged left edge */ .trust{display:flex;align-items:center;justify-content:center;gap:9px;width:320px} /* trusted-by row: aligned under the rating, greyscale so it never competes with the CTA */ /* no label — the marks sit straight under the rating and carry themselves */ .trust-co{display:flex;flex-direction:column;align-items:center;width:320px;margin-top:-8px} /* space-between pushes the marks out to the full column width instead of clustering them */ .trust-co .row{display:flex;align-items:center;justify-content:space-between;width:100%;gap:0} /* the marks sit back until you reach for one: colour returns and it lifts. Nothing dims — the neighbours hold their resting state rather than greying out. */ .trust-co .row img{height:25px;width:auto;opacity:.62;filter:grayscale(1); transition:opacity .22s var(--ease-soft),filter .22s var(--ease-soft),translate .22s var(--ease-soft)} @media(hover:hover){ .trust-co .row img:hover{opacity:1;filter:grayscale(0);translate:0 -3px} } @media(prefers-reduced-motion:reduce){.trust-co .row img{transition:none}} .trust-stars{display:inline-flex;gap:3px} .trust-stars svg{width:17px;height:17px;fill:var(--gold)} .trust b{font:800 15px var(--sans);color:var(--ink)} .trust-sub{font:600 14px var(--sans);color:var(--slate-text)} /* ---------- track strip ---------- */ .strip{height:var(--strip-h);border-top:2px solid var(--fold);border-bottom:2px solid var(--fold);display:flex;align-items:center;background:var(--card)} .strip .wrap{display:flex;align-items:center;gap:8px} .strip-scroll{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;flex:1} .strip-scroll::-webkit-scrollbar{display:none} .strip a{display:inline-flex;align-items:center;gap:10px;flex:none;padding:9px 15px;border-radius:var(--r); font:800 13.5px var(--sans);letter-spacing:.7px;text-transform:uppercase;color:var(--slate-text);text-decoration:none; transition:background .2s,color .2s} @media(hover:hover){.strip a:hover{background:var(--fold-2);color:var(--ink)}} /* the fade is the only cue that the row continues past the chevron */ .strip-scroll{mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%)} .strip .chev{background:none;border:none;color:var(--slate-text);font-size:22px;cursor:pointer;padding:4px 8px;line-height:1; border-radius:var(--r-xs);transition:background .2s,color .2s,transform .12s} .strip .chev:active{transform:scale(.86)} .strip .chev:disabled{opacity:.25;cursor:default;pointer-events:none} @media(hover:hover){.strip .chev:hover{background:var(--fold-2);color:var(--ink)}} .strip .tic{width:22px;height:22px;flex:none;display:block} @media(hover:hover){.strip a:hover .tic{transform:scale(1.12)}} .strip .tic{transition:transform .25s var(--ease-soft)} /* ---------- live lesson demo (real product surface, not an illustration) ---------- */ .lesson{position:relative;z-index:0;width:100%;max-width:430px;background:var(--card); border:2px solid var(--fold);border-radius:var(--r-app);padding:22px} .lesson::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:var(--r-app); background:var(--card);color:var(--fold);box-shadow:0 4px 0} .lesson-top{display:flex;align-items:center;gap:12px;margin-bottom:20px} .lesson-top .progress{flex:1;height:14px;--track-h:14px} .lesson-hearts{display:inline-flex;align-items:center;gap:5px;font:800 14px var(--sans);color:var(--madder)} .lesson-hearts svg{width:17px;height:17px} .lesson-q{font:800 18px/1.4 var(--sans);color:var(--ink);margin-bottom:6px} .lesson-sub{font:600 13.5px var(--sans);color:var(--slate-text);margin-bottom:16px} .lesson .opt{font-size:14.5px;padding:12px 14px} .lesson .opt .key{width:26px;height:26px;font-size:12px} .lesson-foot{display:flex;align-items:center;gap:12px;margin-top:18px;min-height:50px} .lesson-foot .btn{height:46px;font-size:13.5px} .lesson-toast{display:flex;align-items:center;gap:8px;font:800 14px var(--sans);color:var(--moss-lip); opacity:0;transform:translateY(6px);transition:opacity .4s var(--ease-soft),transform .4s var(--ease-soft)} .lesson-toast.show{opacity:1;transform:none} .lesson-toast.miss{color:var(--madder)} .lesson-chips{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap} .lesson-chips .chip{font-size:13.5px;padding:6px 11px} /* this band's heading is capped at two lines and its copy at a short measure — it was running long enough to unbalance the pair. .sync-in drops the sibling stagger so both halves land together. */ [data-sec="method"] .display{max-width:none;font-size:42px;line-height:1.12} [data-sec="method"] .lede{max-width:42ch} [data-sec="method"] .cite{max-width:44ch;font-size:13.5px} .sync-in .rise{transition-delay:0s !important} /* ---------- feature ---------- */ /* 640px, not a viewport: the real the category leader bands measure 640 and fill ~56%. At min(100vh,740px) ours resolved to a full 720 and sat 44% full — 405px of dead paper. */ .feature{min-height:640px;display:flex;align-items:center;padding:56px 0} .feature .wrap{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center} .feature .copy{max-width:500px} /* a real tier: label hugs the heading, heading breathes into body, body pushes the CTA away */ .feature .copy .eyebrow{margin-bottom:8px} .feature .copy .display{margin-bottom:24px} .feature .copy p{margin-bottom:32px} .feature .copy p:last-child{margin-bottom:0} .feature .art{display:flex;justify-content:center} .feature .art img{max-width:460px} .feature.flip .art{order:-1} /* two bands break the grid on purpose — art runs past the container and crops on the viewport edge, so the page isn't five sealed boxes in a row */ .feature.bleed-r .art{justify-content:flex-start;margin-right:min(-13vw,-120px)} .feature.bleed-r .art img{max-width:640px} .feature.bleed-l .art{justify-content:flex-end;margin-left:min(-13vw,-120px)} .feature.bleed-l .art img{max-width:640px} /* `clip`, not `hidden`: hidden turns body into a scroll container and kills the sticky nav */ html,body{overflow-x:visible} /* was clip; removed with the A1 fix — nothing overflows now, and a mask hides regressions */ /* ---------- sky band (showpiece) ---------- */ /* content sits in the upper half; the showpiece owns the bottom edge and is cropped by it */ .sky{position:relative;z-index:2;min-height:100vh;max-height:100vh;background:linear-gradient(180deg,var(--sky-1) 0%,var(--sky-2) 100%); display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:28px; padding:max(7vh,56px) 28px 0;text-align:center} /* wavy band separations — colour boundaries flow into each other instead of cutting straight, and the art is free to hang over them (the sky showpiece overlaps the midnight band below) */ .wave{position:absolute;left:0;right:0;width:100%;height:clamp(44px,7vh,84px);display:block;pointer-events:none} .wave-top{top:-1px} .wave-bot{bottom:-1px} .sky .display-xl{color:var(--ink)} .badges{display:flex;gap:16px;justify-content:center;flex-wrap:wrap} .badge{display:inline-flex;align-items:center;gap:11px;padding:11px 18px;background:var(--card); border:2px solid var(--fold);border-bottom-width:4px;border-radius:var(--r);color:var(--ink);text-decoration:none;text-align:left;transition:transform .3s var(--ease-soft)} @media(hover:hover){.badge:hover{transform:translateY(-3px)}} .badge small{display:block;font-size:11px;font-weight:700;color:var(--slate-text);line-height:1.1} .badge b{font-size:15px;font-weight:800;line-height:1.2} /* capped by WIDTH, not height, so the showpiece is actually the biggest thing on the page, and pinned to the bottom edge so the crop is a decision rather than a 53px near-miss */ .sky-art{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:center;pointer-events:none;line-height:0;z-index:1} .sky-art .scene{width:min(980px,74%);margin-bottom:min(-8vh,-56px)} .sky .display-xl,.sky .badges{position:relative;z-index:1} /* ---------- super band ---------- */ .super{min-height:100vh;max-height:100vh;background:var(--midnight);display:flex;align-items:center;padding:90px 0;position:relative;overflow:hidden} .super::before{content:"";position:absolute;width:760px;height:760px;border-radius:50%; background:radial-gradient(closest-side,rgba(201,162,39,.16),transparent 70%);left:6%;top:50%;transform:translateY(-50%)} .super .wrap{max-width:980px;display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:center;position:relative} .super-art .solo{max-width:330px} .super-copy{text-align:left} .super-eyebrow{font:800 14px var(--sans);letter-spacing:3px;text-transform:uppercase;color:var(--ochre);margin-bottom:14px} .super-word{font-family:var(--display);font-weight:800;font-size:62px;line-height:1;letter-spacing:-.02em;color:var(--paper);margin-bottom:18px} .super p{color:var(--midnight-text);margin-bottom:30px} /* ---------- final ---------- */ .final{position:relative;min-height:100vh;max-height:100vh;display:flex;flex-direction:column;align-items:center; justify-content:flex-start;gap:22px;text-align:center;overflow:hidden; /* the sticky nav is 72px and floats over this band — clear it, or the heading tucks under the bar as soon as the section reaches the top of the viewport */ padding:calc(var(--nav-h) + max(3vh,24px)) 28px 0} .final .display{font-size:58px} /* the mural bleeds off the bottom edge — cropped by the band, never a floating card. Centred with auto margins, NOT translateX: .rise.in sets transform:none and would delete it. */ /* the finale parade rises from BEHIND the ink wave: the artwork is composed with the cast cut at the waist along its bottom edge, and the curve (z above) hides that edge at every x. Scroll travel only ever sinks the bottom pieces (their spread vector points down), so the cut can never surface. */ .final-mural{position:absolute;left:0;right:0;bottom:0;margin-inline:auto;width:min(900px,72%); pointer-events:none;line-height:0;z-index:2} .final-mural .scene{width:100%;margin-bottom:0} .final .display,.final>.btn,.final>.lede,.stars{position:relative;z-index:3} /* The reward motif, not a review score — ochre is the system's rewards-only hue, and the caption names it as the in-product perfect-lesson star set. No rating is claimed. */ .stars{display:flex;align-items:center;justify-content:center;gap:6px} .stars svg{width:26px;height:26px;fill:var(--gold)} .stars svg:nth-child(2){animation-delay:.12s}.stars svg:nth-child(3){animation-delay:.24s} .stars svg:nth-child(4){animation-delay:.36s}.stars svg:nth-child(5){animation-delay:.48s} .stars b{margin-left:12px;font:800 13px var(--sans);letter-spacing:.4px;color:var(--ink-soft);text-transform:none} @keyframes star-pop{0%,72%,100%{transform:scale(1) rotate(0)}80%{transform:scale(1.22) rotate(-7deg)}88%{transform:scale(.97) rotate(3deg)}} /* the closing band flows into the footer instead of butting against it */ /* the wave sits BEHIND the parade now — the cast hangs over the ink rather than being sliced by it. The art's own hard bottom edge lands on the section boundary, where the navy footer takes over in the same ink, so the cut never shows. */ .final-curve{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:clamp(80px,13vh,160px);display:block;z-index:1} /* ---------- footer ---------- */ .footer{background:var(--ink);color:var(--paper);padding:72px 0 44px} .footer .cols{display:grid;grid-template-columns:repeat(5,1fr);gap:24px;max-width:var(--container);margin:0 auto;padding:0 28px 40px} .footer h5{font:800 16px var(--sans);margin-bottom:16px} .footer a{display:block;font:600 15px/2.1 var(--sans);color:rgba(247,244,237,.72);text-decoration:none} @media(hover:hover){.footer a:hover{color:var(--paper)}} .footer .lang-row{border-top:2px solid rgba(247,244,237,.18);max-width:var(--container);margin:0 auto;padding:28px 28px 0} .footer .lang-row .t{font:800 15px var(--sans);margin-bottom:12px} .footer .lang-row a{display:inline-block;margin-right:18px} /* the page used to end on a row of course links — it now signs off */ .foot-close{display:flex;align-items:center;gap:18px;flex-wrap:wrap;max-width:var(--container); margin:0 auto;padding:34px 28px 0;margin-top:28px;border-top:2px solid rgba(247,244,237,.18)} .foot-close .logo{color:var(--paper)} .foot-close .logo img{width:34px;height:34px} .foot-close .logo .word{font-size:26px;color:var(--paper)} .foot-close>span{font:600 14px var(--sans);color:rgba(247,244,237,.6)} @media(hover:hover){.footer a:hover{color:var(--paper);translate:2px 0}} .footer a{transition:color .2s,translate .2s var(--ease-soft)} /* ---------- view switcher ---------- */ /* the dock is the shell; the toggle on its right collapses the tabs away so the switcher never sits on top of the design it is there to show off */ .dock{position:fixed;bottom:24px;right:24px;z-index:500;display:flex;align-items:center;gap:4px; background:var(--card);border:2px solid var(--fold);border-bottom-width:4px;border-radius:var(--r-app);padding:4px} .switcher{display:flex;gap:4px;overflow:hidden;max-width:520px; transition:max-width .34s var(--ease-soft),opacity .22s ease} .dock.shut .switcher{max-width:0;opacity:0;pointer-events:none} .switcher button{border:none;background:none;cursor:pointer;padding:10px 16px;border-radius:var(--r);white-space:nowrap; font:800 12.5px var(--sans);letter-spacing:.6px;text-transform:uppercase;color:var(--slate-text);transition:background .15s,color .15s} .switcher button.on{background:var(--ink);color:var(--paper)} @media(hover:hover){.switcher button:not(.on):hover{background:var(--fold-2);color:var(--ink)}} .dock-toggle{flex:none;border:none;background:none;cursor:pointer;width:34px;height:34px;padding:0; border-radius:var(--r);color:var(--slate-text);display:grid;place-items:center;transition:background .15s,color .15s} .dock-toggle svg{width:18px;height:18px;transition:rotate .34s var(--ease-soft)} .dock.shut .dock-toggle svg{rotate:180deg} @media(hover:hover){.dock-toggle:hover{background:var(--fold-2);color:var(--ink)}} @media(prefers-reduced-motion:reduce){.switcher,.dock-toggle svg{transition:none}} [hidden]{display:none!important} .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* ---------- DS + graphics views ---------- */ .ds-hero{text-align:center;padding:90px 28px 46px} .ds-hero .display{font-size:50px} .ds-hero p{margin-top:12px} .ds-section{padding:0 0 90px} .ds-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:24px;max-width:var(--container);margin:0 auto;padding:0 28px} .panel{border:2px solid var(--fold);border-radius:var(--r);padding:28px;background:var(--card)} .panel.full{grid-column:1/-1} .panel h4{font:800 12.5px var(--sans);letter-spacing:1.2px;text-transform:uppercase;color:var(--slate-text);margin-bottom:22px} .note{font:600 13.5px/1.6 var(--sans);color:var(--slate-text)} .note code{background:var(--fold-2);border-radius:var(--r-xs);padding:1px 6px;font-size:12.5px;color:var(--ink)} .type-rows{border-top:2px solid var(--fold)} .type-row{display:grid;grid-template-columns:210px 1fr;gap:20px;padding:20px 0;border-bottom:2px solid var(--fold);align-items:baseline} .type-row .spec{font:700 13px/1.6 var(--sans);color:var(--slate-text)} .type-row .spec b{display:block;color:var(--ink)} .btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:16px} .swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px} .sw{border:2px solid var(--fold);border-radius:var(--r);overflow:hidden;cursor:pointer;background:var(--card);display:block;width:100%;text-align:left;font:inherit;padding:0; transition:border-color .3s,transform .4s var(--ease-soft)} @media(hover:hover){.sw:hover{border-color:var(--ink);transform:translateY(-3px)}} /* Grid items stretch to the tallest card, so a one-line caption used to leave dead space and the colour blocks stopped at different heights. Flex the block instead: it absorbs the slack, every swatch fills its card edge to edge, and every caption lands on the same baseline. */ .sw{display:flex;flex-direction:column} .sw i{display:block;flex:1;min-height:64px} .sw span{display:block;padding:9px 11px;font:700 11.5px/1.4 var(--sans);color:var(--slate-text)} .sw span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sw span b{display:block;font-weight:800;font-size:12.5px;color:var(--ink);letter-spacing:.2px} .sw span u{display:block;text-decoration:none;font-size:11px;color:var(--slate);letter-spacing:.3px} .rules{display:grid;grid-template-columns:1fr 1fr;gap:20px} .rule{border-radius:var(--r);padding:22px} .rule.do{border:2px solid var(--moss)}.rule.dont{border:2px solid var(--madder)} .rule h5{font:800 12.5px var(--sans);letter-spacing:1.2px;text-transform:uppercase;margin-bottom:14px} .rule.do h5{color:var(--moss)}.rule.dont h5{color:var(--madder)} .rule ul{list-style:none} .rule li{position:relative;padding-left:24px;margin-bottom:11px;font:600 14px/1.5 var(--sans);color:var(--ink-soft)} .rule li::before{position:absolute;left:0;font-weight:900} .rule.do li::before{content:"✓";color:var(--moss)} .rule.dont li::before{content:"✕";color:var(--madder)} /* ---------- copy view ---------- */ .proof{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .proof-card{position:relative;border:2px solid var(--fold);border-radius:var(--r);padding:22px 20px;background:var(--paper); transition:translate .18s var(--ease-soft),box-shadow .18s var(--ease-soft)} .proof-card:hover{translate:0 -3px;box-shadow:0 6px 0 var(--fold)} .proof-card.win{border-color:var(--moss)} .proof-card>b{display:flex;align-items:center;gap:7px;margin-top:15px;font:800 19px/1.15 var(--sans);color:var(--ink)} .proof-card.win>b{color:var(--moss)} .proof-card>span{display:block;margin-top:7px;font:600 12.5px/1.5 var(--sans);color:var(--slate-text)} .pmk{display:grid;place-items:center;width:44px;height:44px} .pmk img,.pmk svg{width:44px;height:44px;border-radius:11px;display:block} .pmk.ink{color:var(--ink)}.pmk.ink svg{border-radius:0;width:38px;height:38px} .pmk.stack{display:flex;width:auto;align-items:center} .pmk.stack img{width:36px;height:36px;border-radius:10px;border:2.5px solid var(--paper);margin-right:-13px} .pmk.stack img:last-child{margin-right:0} .pmk.lint{width:auto;justify-content:start} .pmk.lint s{font:800 17px var(--sans);color:var(--madder);background:var(--card);border:2px solid var(--fold); border-radius:9px;padding:7px 12px;text-decoration-thickness:2.5px} .pmk.score{border-radius:11px;background:var(--moss);color:var(--paper);font:800 19px var(--sans)} .pmk.score i{font-style:normal;font-size:11px;opacity:.75;margin-top:5px} .pf-star{width:19px;height:19px;flex:none;animation:star-pop 3.4s ease-in-out infinite} .meter{margin-top:13px} .mrow{display:flex;align-items:center;gap:9px;margin-top:7px} .mrow em{flex:none;width:42px;font:800 9.5px var(--sans);letter-spacing:1px;text-transform:uppercase;font-style:normal;color:var(--slate-soft)} .mtrack{flex:1;height:9px;border-radius:99px;background:var(--fold-2);overflow:hidden;display:block} .mfill{display:block;height:100%;border-radius:99px;background:var(--madder);width:var(--w);transition:width 1s var(--ease-soft) .4s} .mfill.good{background:var(--moss)} .js .rise:not(.in) .mfill{width:0} .pr-row{display:grid;grid-template-columns:repeat(5,1fr);gap:14px} .pr{border:2px solid var(--fold);border-radius:var(--r);padding:20px 16px 18px;background:var(--paper);text-align:center; transition:translate .18s var(--ease-soft),box-shadow .18s var(--ease-soft)} .pr:hover{translate:0 -3px;box-shadow:0 6px 0 var(--fold)} .pr-art{height:66px;display:grid;place-items:center;margin-bottom:14px} .pr-art svg{width:76px;height:60px} .pr b{display:block;font:700 15px/1.3 var(--sans);color:var(--ink)} .pr span{display:block;margin-top:6px;font:700 10px var(--sans);letter-spacing:.8px;text-transform:uppercase;color:var(--slate-soft)} .panel h4 em{float:right;font-style:normal;color:var(--slate-soft)} .sw-groups{columns:2;column-gap:16px} .sg{break-inside:avoid;border:2px solid var(--fold);border-radius:var(--r);padding:20px;background:var(--paper);margin-bottom:16px} .sg-head{display:flex;align-items:center;gap:11px;margin-bottom:6px} .sg-ic{flex:none;width:33px;height:33px;border-radius:10px;display:grid;place-items:center;background:var(--c);color:var(--paper)} .sg-ic svg{width:18px;height:18px} .sg-head b{font:800 12px var(--sans);letter-spacing:1.2px;text-transform:uppercase;color:var(--ink)} .sg-head em{margin-left:auto;font:800 10px var(--sans);letter-spacing:.8px;text-transform:uppercase;font-style:normal;color:var(--slate-soft)} .cw{background:var(--card);border:2px solid var(--fold-2);border-radius:14px;padding:14px 16px;margin-top:10px} .cw s{display:block;font:600 12.5px/1.5 var(--sans);color:var(--slate-soft);text-decoration-thickness:1px} .cw .cw-new{display:inline-block;font:800 9.5px var(--sans);letter-spacing:1px;text-transform:uppercase;font-style:normal; color:var(--moss);border:1.5px solid var(--moss);border-radius:99px;padding:2px 9px} .cw p{position:relative;padding-left:23px;margin-top:6px;font:700 15px/1.45 var(--sans);color:var(--ink)} .cw p::before{content:"\2192";position:absolute;left:0;top:0;color:var(--persimmon);font-weight:800} .rhythm{display:flex;gap:10px} .rhythm .screen{flex:1;border:2px solid var(--fold);border-radius:var(--r);aspect-ratio:3/4;display:grid;place-items:center; text-align:center;padding:12px;font:800 10.5px var(--sans);letter-spacing:.5px;text-transform:uppercase;color:var(--slate-text)} .rhythm .screen b{display:block;color:var(--ink);font-size:13px;margin-bottom:5px} /* login */ .login-card{display:flex;flex-direction:column;gap:12px} .login-title{font-family:var(--display);font-weight:700;font-size:32px;color:var(--ink);text-align:center;margin-bottom:6px} .field{display:flex;align-items:center;background:var(--paper);border:2px solid var(--fold);border-radius:var(--r);height:52px;transition:border-color .15s} .field:focus-within{border-color:var(--aizome)} .field input{flex:1;border:none;background:none;outline:none;font:600 17px var(--sans);color:var(--ink);padding:8px 16px;caret-color:var(--aizome)} .field input::placeholder{color:var(--slate-soft)} .field .aux{font:800 12px var(--sans);letter-spacing:.7px;text-transform:uppercase;color:var(--slate-soft);padding-right:16px;text-decoration:none} .or{display:flex;align-items:center;gap:12px;color:var(--slate-soft);font:800 12px var(--sans);letter-spacing:.7px;margin:6px 0} .or::before,.or::after{content:"";flex:1;height:2px;background:var(--fold)} /* path */ .path{display:flex;align-items:center;gap:20px;flex-wrap:wrap} .node{position:relative;width:66px;height:66px;border:none;background:none;cursor:pointer;z-index:0;transition:filter .2s,transform var(--lip-t)} .node::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:50%;background:var(--nbg,var(--aizome)); color:var(--nlip,var(--aizome-lip));box-shadow:0 6px 0;transition:box-shadow var(--lip-t)} .node:active{transform:translateY(6px)}.node:active::before{box-shadow:none} @media(hover:hover){.node:hover{filter:brightness(1.06)}} .node svg{width:30px;height:30px;position:relative;top:-2px} .node.done{--nbg:var(--ochre);--nlip:var(--ochre-lip)} .node.locked{--nbg:var(--fold);--nlip:var(--locked-lip);pointer-events:none} .node.current .halo{position:absolute;inset:-9px;border-radius:50%;border:3px solid rgba(62,98,168,.35);animation:pulse-ring 2s ease-in-out infinite} .connector{width:28px;height:5px;border-radius:var(--r-xs);background:var(--fold)} .connector.done{background:var(--ochre)} /* quiz */ .quiz{display:flex;flex-direction:column;gap:10px} .qq{font:800 19px var(--sans);color:var(--ink);margin-bottom:8px} .opt{position:relative;z-index:0;display:flex;align-items:center;gap:14px;padding:13px 16px;border:none;background:none; text-align:left;cursor:pointer;border-radius:var(--r);font:700 16px var(--sans);color:var(--ink-soft);transition:transform var(--lip-t),color .15s} .opt::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--card);border:2px solid var(--fold); border-radius:var(--r);color:var(--fold);box-shadow:0 2px 0;transition:box-shadow var(--lip-t),border-color .15s,background-color .15s} .opt:active{transform:translateY(2px)}.opt:active::before{box-shadow:none} @media(hover:hover){.opt:hover::before{background:var(--fold-2)}} .opt .key{display:grid;place-items:center;width:28px;height:28px;flex:none;border:2px solid var(--fold);border-radius:var(--r-xs);font:800 13px var(--sans);color:var(--slate-text)} .opt.sel{color:var(--aizome)}.opt.sel::before{border-color:var(--aizome);background:var(--sel-fill);color:var(--sel-lip)} .opt.ok{color:var(--moss-lip);animation:pop .4s ease-in-out}.opt.ok::before{border-color:var(--moss);background:var(--ok-fill);color:var(--ok-lip)} .opt.no{color:var(--madder);animation:shake .4s ease-in-out}.opt.no::before{border-color:var(--madder);background:var(--no-fill);color:var(--no-lip)} /* was scale(1.03) — 3% on a 340px row is invisible. Overshoot then settle. */ @keyframes pop{30%{transform:scale(1.045)}55%{transform:scale(.995)}100%{transform:scale(1)}} /* was two keyframes on ease-in-out, which is a sway, not a rejection. Four oscillations, near-linear. */ @keyframes shake{0%,100%{transform:translateX(0)}15%{transform:translateX(-8px)}35%{transform:translateX(7px)} 55%{transform:translateX(-5px)}75%{transform:translateX(3px)}} .opt.no{animation:shake .32s cubic-bezier(.36,.07,.19,.97) both} /* the two numbers that carry the whole reward were the only things changing as bare text swaps */ @keyframes tick{0%{transform:translateY(0);opacity:1}40%{transform:translateY(-9px);opacity:0} 41%{transform:translateY(7px)}100%{transform:translateY(0);opacity:1}} @keyframes heart-break{0%,100%{transform:scale(1) rotate(0)}25%{transform:scale(1.35) rotate(-9deg)} 50%{transform:scale(.82) rotate(6deg)}75%{transform:scale(1.08) rotate(-3deg)}} .lesson-chips .chip.bump{animation:tick .5s var(--ease-soft)} .lesson-hearts.lost svg{animation:heart-break .5s ease-in-out} .lesson-hearts.lost{animation:tick .5s var(--ease-soft)} /* the card is presented as the live product — it should respond to being touched */ .lesson{transition:border-color .3s,translate .3s var(--ease-soft)} .lesson:focus-within{border-color:var(--aizome)} @media(hover:hover){.lesson:hover{translate:0 -3px}} /* progress */ .progress{height:16px;background:var(--fold);border-radius:calc(var(--track-h,16px) + 8px);overflow:hidden} .progress .fill{position:relative;height:100%;width:0;background:var(--moss);border-radius:inherit;transition:width .8s var(--ease-soft)} .progress .fill::after{content:"";position:absolute;top:4px;left:8px;right:8px;height:4px;border-radius:var(--r-xs);background:rgba(255,255,255,.3)} .chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px} .chip{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border:2px solid var(--fold);border-radius:var(--r);font:800 15px var(--sans);background:var(--card)} .chip svg{width:19px;height:19px} /* graphics view */ .art-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px} .art-card{border:2px solid var(--fold);border-radius:var(--r);background:var(--paper);padding:16px;text-align:center} .art-card img{margin:0 auto;max-height:190px;width:auto} .art-card b{display:block;margin-top:12px;font:800 12px var(--sans);letter-spacing:.7px;text-transform:uppercase;color:var(--ink)} .art-card span{display:block;font:600 12px var(--sans);color:var(--slate-text);margin-top:3px} .motion-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px} .motion-demo{border:2px solid var(--fold);border-radius:var(--r);padding:22px;text-align:center;background:var(--paper)} .motion-demo .box{width:56px;height:56px;border-radius:var(--r);background:var(--aizome);margin:0 auto 14px} .motion-demo b{display:block;font:800 12px var(--sans);letter-spacing:.6px;text-transform:uppercase;color:var(--ink)} .motion-demo span{font:600 12px var(--sans);color:var(--slate-text)} /* the type set — ten specimens, each one live and selectable. --f/--w/--wb/--vf are set per card, so every line below renders in that card's own face. */ .type-set{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:18px} .spec-card{position:relative;border:2px solid var(--fold);border-radius:var(--r);background:var(--paper); padding:22px 22px 20px;transition:border-color .25s,translate .25s var(--ease-soft),box-shadow .25s; font-family:var(--f);font-variation-settings:var(--vf,normal);color:var(--ink)} @media(hover:hover){.spec-card:hover{translate:0 -3px;border-color:var(--slate-soft)}} .spec-card.on{border-color:var(--aizome);box-shadow:0 0 0 4px var(--sel-fill)} .spec-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:14px; font-family:var(--sans);font-weight:800;font-size:11.5px;letter-spacing:1.1px;text-transform:uppercase;color:var(--slate-text)} .spec-head .n{color:var(--persimmon)} /* the specimen block itself — sizes descend so you can read the face at four different scales */ .spec-aa{display:flex;align-items:baseline;gap:18px;line-height:.95;margin-bottom:6px} .spec-aa .tell{font-size:30px;font-weight:var(--w);color:var(--slate);letter-spacing:.04em} /* THE STACK — one word, one size, one left edge, ten faces. Everything that isn't the letterforms is set small and grey, because the moment two specimens sit in boxes with five lines of text each, the eye reads "ten grey cards" and stops. Scanning a single column is what makes the shapes read. */ .type-stack{list-style:none;border-top:2px solid var(--fold);margin-bottom:22px} .stack-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:20px; padding:6px 14px;border-bottom:2px solid var(--fold);cursor:pointer;position:relative; transition:background-color .2s,padding-left .25s var(--ease-soft)} .stack-row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:transparent;transition:background-color .2s} @media(hover:hover){.stack-row:hover{background:var(--fold-2);padding-left:22px}} .stack-row.on{background:var(--sel-fill)} .stack-row.on::before{background:var(--aizome)} .stack-word{font-family:var(--f);font-variation-settings:var(--vf,normal);font-weight:var(--w); font-size:68px;line-height:1.2;color:var(--ink);white-space:nowrap} .stack-meta{display:flex;align-items:center;gap:14px;text-align:right} .stack-meta .nm{font:800 12px var(--sans);letter-spacing:1px;text-transform:uppercase;color:var(--ink)} .stack-meta .cls{font:600 11.5px var(--sans);color:var(--slate-text);min-width:112px;text-align:right} .stack-meta .ix{font:800 12.5px var(--sans);color:var(--slate-text);min-width:30px;text-align:right} .stack-meta .it{font:800 10px var(--sans);letter-spacing:.6px;text-transform:uppercase; padding:3px 7px;border-radius:var(--r-xs);background:var(--fold-2);color:var(--slate-text)} .stack-row.on .stack-meta .nm{color:var(--aizome)} .rec{font:800 9.5px var(--sans);letter-spacing:.8px;text-transform:uppercase;padding:3px 8px; border-radius:var(--r-xs);background:var(--persimmon);color:var(--paper);white-space:nowrap; border:none;cursor:pointer;display:inline-flex;align-items:center;gap:5px; transition:filter .2s,translate .2s var(--ease-soft)} @media(hover:hover){.rec:hover{filter:brightness(1.08);translate:0 -1px}} .rec .cx{display:inline-block;transition:rotate .25s var(--ease-soft);font-size:11px;line-height:1} .rec[aria-expanded="true"] .cx{rotate:45deg} /* The ampersand is the glyph designers actually judge a face by — it is where a typeface stops solving a problem and starts having an opinion. Ten of them down the left edge, each set in its own face, is the most information per pixel available on this whole panel. */ .stack-amp{display:grid;place-items:center;width:52px;height:52px;flex:none; border:2px solid var(--fold);border-radius:12px;background:var(--card); font-family:var(--f);font-variation-settings:var(--vf,normal);font-weight:var(--w); font-size:30px;line-height:1;color:var(--aizome);transition:border-color .2s,background-color .2s,color .2s} .stack-lead{display:flex;align-items:center;gap:18px;min-width:0} .stack-row.on .stack-amp{border-color:var(--aizome);background:var(--card);color:var(--persimmon)} .type-stack.rev .stack-amp{border-color:#2c3757;background:rgba(255,255,255,.05);color:var(--sky-2)} .type-stack.rev .stack-row.on .stack-amp{border-color:var(--sky-2);color:var(--persimmon)} /* the why-drawer opened by the Recommended chip */ .why-row{padding:0 14px 20px;border-bottom:2px solid var(--fold)} .why-row .in{border-left:4px solid var(--persimmon);border-radius:var(--r-xs); background:var(--fold-2);padding:16px 18px} .why-row h6{font:800 11px var(--sans);letter-spacing:1.1px;text-transform:uppercase;color:var(--persimmon);margin-bottom:10px} .why-row p{font:600 13.5px/1.65 var(--sans);color:var(--slate-text)} .why-row p+p{margin-top:8px} .why-row b{color:var(--ink);font-weight:800} .type-stack.rev .why-row{border-bottom-color:#26304f} .type-stack.rev .why-row .in{background:rgba(255,255,255,.05)} .type-stack.rev .why-row p{color:var(--midnight-text)} .type-stack.rev .why-row b{color:var(--paper)} @media(max-width:820px){.stack-meta .cls,.stack-meta .it{display:none}.stack-word{font-size:44px}} /* Reverse-out test. This is the check that actually separates display faces in practice and it is not decoration here: Yourbrand has a real midnight band, and a face that holds together on warm paper can go thin and rattly knocked out of the dark. Three colour dots per row would have looked nice and told you nothing — they would be identical on all ten. */ .type-stack.rev{background:var(--midnight);border-top-color:#26304f;border-radius:var(--r);padding:4px 0} .type-stack.rev .stack-row{border-bottom-color:#26304f} .type-stack.rev .stack-word{color:var(--paper)} .type-stack.rev .stack-meta .nm{color:var(--sky-2)} .type-stack.rev .stack-meta .cls,.type-stack.rev .stack-meta .ix{color:var(--midnight-text)} .type-stack.rev .stack-meta .it{background:rgba(255,255,255,.09);color:var(--midnight-text)} .type-stack.rev .stack-row.on{background:rgba(255,255,255,.07)} @media(hover:hover){.type-stack.rev .stack-row:hover{background:rgba(255,255,255,.05)}} .pick-note{border:2px solid var(--fold);border-left:4px solid var(--persimmon);border-radius:var(--r); background:var(--card);padding:20px 22px;margin-bottom:22px} .pick-head{display:flex;align-items:center;gap:12px;margin-bottom:12px} .pick-head b{font-family:var(--display);font-weight:800;font-size:26px;color:var(--ink);letter-spacing:-.01em} .pick-note p{font:600 13.5px/1.65 var(--sans);color:var(--slate-text)} .pick-note p+p{margin-top:10px} .pick-note b{color:var(--ink);font-weight:800} .pick-note code{background:var(--fold-2);border-radius:var(--r-xs);padding:1px 6px;font-size:12.5px;color:var(--ink)} /* the ten full specimens are reference material now, not the thing you look at first */ .spec-more{border:2px solid var(--fold);border-radius:var(--r);background:var(--paper);padding:0 18px} .spec-more summary{cursor:pointer;padding:16px 4px;display:flex;flex-wrap:wrap;align-items:baseline;gap:12px} .spec-more summary::marker{color:var(--slate)} .spec-more .tw{font:800 12px var(--sans);letter-spacing:1.1px;text-transform:uppercase;color:var(--ink)} .spec-more .sub{font:600 12.5px var(--sans);color:var(--slate-text)} .spec-more[open]{padding-bottom:22px} .spec-more[open] summary{border-bottom:2px solid var(--fold);margin-bottom:22px} /* Comparing a grotesque to a high-contrast serif tells you nothing you didn't already know. Comparing four grotesques to each other is where the differences actually live. */ .set-head{grid-column:1/-1;display:flex;align-items:baseline;gap:12px;margin:12px 0 -2px} .set-head:first-child{margin-top:0} .set-head span{font:800 11.5px var(--sans);letter-spacing:1.3px;text-transform:uppercase;color:var(--ink)} .set-head i{font:600 12.5px var(--sans);font-style:normal;color:var(--slate-text);white-space:nowrap} .set-head::after{content:"";flex:1;height:2px;background:var(--fold);align-self:center} /* The diff: the candidate's glyph filled, the incumbent's SAME glyph outlined behind it at the same size and origin. Where the two outlines part company is the difference between the faces — which is a thing you can see in half a second and never get from two words side by side. */ .spec-glyph{position:relative;display:inline-block;line-height:.95;font-size:76px;font-weight:var(--wb)} .spec-glyph .ghost{position:absolute;left:0;top:0;font-family:'Bricolage Grotesque',sans-serif; font-weight:800;font-variation-settings:normal;color:transparent;-webkit-text-stroke:1.4px var(--slate-soft); pointer-events:none} /* the candidate sits ON TOP of the reference outline — the other way round the outline cuts through the filled glyph and both shapes turn to mud */ .spec-glyph .fill{position:relative;z-index:1} .spec-card[data-ref="1"] .spec-glyph .ghost{display:none} /* Set width, measured live from the real outlines at load — this is the number that explains why one face needs three lines for a headline another sets in two. */ .spec-w{display:flex;align-items:center;gap:11px;margin-top:15px; font:700 10.5px var(--sans);letter-spacing:.7px;text-transform:uppercase;color:var(--slate-text)} .spec-w .track{position:relative;flex:1;height:8px;border-radius:6px;background:var(--fold);overflow:visible} .spec-w .track i{position:absolute;top:0;bottom:0;left:0;border-radius:6px;background:var(--aizome);width:0; transition:width .5s var(--ease-soft)} .spec-w .track u{position:absolute;top:-5px;bottom:-5px;width:2px;background:var(--persimmon);text-decoration:none} .spec-w b{font-weight:800;font-size:12.5px;color:var(--ink);min-width:38px;text-align:right;letter-spacing:0} .spec-word{font-size:38px;font-weight:var(--w);line-height:1.1;letter-spacing:-.02em} .spec-ital{font-size:23px;font-weight:var(--w);font-style:italic;color:var(--ink-soft);line-height:1.35;margin-top:2px} .spec-card[data-ital="0"] .spec-ital{font-style:normal;letter-spacing:.02em} .spec-caps{font-size:13px;font-weight:var(--wb);letter-spacing:1.7px;text-transform:uppercase;color:var(--aizome);margin-top:10px} .spec-set{font-size:12.5px;font-weight:var(--w);letter-spacing:.06em;color:var(--slate-text); /* wrap at the spaces between the three runs only — break-all splits the alphabet mid-word, which is exactly the thing a charset line exists to let you read */ margin-top:14px;padding-top:14px;border-top:2px solid var(--fold);overflow-wrap:break-word;line-height:1.75} .spec-meta{font:600 12px/1.55 var(--sans);color:var(--slate-text);margin-top:12px} .spec-meta b{color:var(--ink);font-weight:800} .spec-pick{margin-top:16px;width:100%;height:46px;font-size:14px} .spec-card.on .spec-pick{--bg:var(--fold);--lipc:var(--locked-lip);color:var(--slate-text);cursor:default} .type-bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:18px; font:600 13.5px var(--sans);color:var(--slate-text)} .type-bar .now{font-family:var(--display);font-weight:800;font-size:20px;color:var(--ink);letter-spacing:-.01em} .type-bar .sep{flex:1} /* the stage — the cards prove the letterforms, the stage proves the face doing the actual job. --k scales the whole lockup so the ratios stay exact when two panes share the width. */ .stage{display:grid;grid-template-columns:1fr;gap:18px;margin-bottom:22px;--k:1} .stage.split{grid-template-columns:1fr 1fr;--k:.6} .stage-pane{position:relative;border:2px solid var(--fold);border-radius:var(--r);background:var(--card); padding:26px;overflow:hidden;font-family:var(--f);font-variation-settings:var(--vf,normal); transition:border-color .25s} .stage-pane[data-side="b"]{display:none} /* B gets a tinted BORDER and a blue tag dot, never a tinted ground — two faces judged on two different backgrounds is not a comparison, it is a lighting trick. */ .stage.split .stage-pane[data-side="b"]{display:block;border-color:var(--sel-lip)} .stage-tag{position:absolute;top:0;right:0;display:flex;align-items:center;gap:8px;padding:8px 15px; border-left:2px solid var(--fold);border-bottom:2px solid var(--fold);border-bottom-left-radius:var(--r); background:var(--paper);font:800 11px var(--sans);letter-spacing:1px;text-transform:uppercase;color:var(--slate-text)} .stage-tag .dot{width:8px;height:8px;border-radius:50%;background:var(--persimmon)} .stage-pane[data-side="b"] .stage-tag .dot{background:var(--aizome)} .stage-lock{display:flex;align-items:center;gap:calc(12px*var(--k));margin-bottom:calc(26px*var(--k))} .stage-lock img{width:calc(40px*var(--k));height:calc(40px*var(--k));animation:none} .stage-lock .w{font-size:calc(32px*var(--k));font-weight:var(--wb);color:var(--ink);line-height:1} .stage-h{font-size:calc(60px*var(--k));line-height:1.05;font-weight:var(--w);color:var(--ink); margin-bottom:calc(20px*var(--k))} .stage-lede{font:600 calc(17px*var(--k))/1.55 var(--sans);color:var(--slate-text);max-width:34em; margin-bottom:calc(24px*var(--k))} .stage-cta{display:inline-flex;align-items:center;height:calc(54px*var(--k));padding:0 calc(24px*var(--k)); border-radius:var(--r);background:var(--ink);box-shadow:0 4px 0 var(--ink-lip);color:var(--paper); font:800 calc(15px*var(--k))/1 var(--sans);letter-spacing:.6px;text-transform:uppercase} .stage-fall{display:flex;flex-wrap:wrap;align-items:flex-end;gap:calc(26px*var(--k)); margin-top:calc(28px*var(--k));padding-top:calc(20px*var(--k));border-top:2px solid var(--fold)} .stage-fall div{display:flex;flex-direction:column;gap:8px} .stage-fall b{font-weight:var(--w);color:var(--ink);line-height:.9} /* the ladder is the REAL scale at --k:1 — 68/50/32 — so the labels under it are true, not decorative */ .stage-fall .s1{font-size:calc(68px*var(--k))} .stage-fall .s2{font-size:calc(50px*var(--k))} .stage-fall .s3{font-size:calc(32px*var(--k))} .stage-fall i{font:800 10.5px var(--sans);font-style:normal;letter-spacing:.9px;text-transform:uppercase;color:var(--slate-text)} .stage-note{font:600 11.5px var(--sans);color:var(--slate);margin-top:14px} .stage.split .stage-note{display:none} @media(max-width:900px){ .hero .wrap,.feature .wrap,.super .wrap{max-width:1000px;grid-template-columns:1fr;gap:44px} .feature.flip .art{order:0} .display{font-size:38px}.display-xl{font-size:42px}.super-word{font-size:44px}.final .display{font-size:40px} .footer .cols{grid-template-columns:repeat(2,1fr)} .rules,.type-row{grid-template-columns:1fr} .rhythm{flex-wrap:wrap} } /* ============================================================ S2 OVERRIDES — the Caldera rhythm in S2's skin. Additive block: everything above is the shell engine; everything below is this brand. (Anton ships one weight — 400 — so every display rule is corrected to 400 + positive tracking; asking 700 of it would render a synthetic bold.) ============================================================ */ .display,.display-xl,.super-word,.final .display,.ds-hero .display,.logo .word,.login-title{ font-weight:400;letter-spacing:.01em;text-transform:uppercase} .display{font-size:56px;line-height:.96} .display-xl{font-size:76px;line-height:.92} h1.hero-h1{font:400 clamp(64px,7.2vw,104px)/0.92 var(--display);letter-spacing:.01em; text-transform:uppercase;color:var(--ink)} h1.hero-h1 .l2{display:block;color:var(--indigo)} /* Optical alignment. Anton's diagonal caps (Y, V, W) carry more left sidebearing than flat-stem caps (I, S, B), so a Y-initial line reads as indented against them even though the boxes align. Nudge the line, not the glyph — the eye aligns to the ink. */ h1.hero-h1 .ln{display:block} /* -0.03em measured, not guessed: raster-sampled the ink edge of every line. Untouched, the Y sat 2px right of the I lines; this lands it 1px left — the slight overhang a diagonal cap needs to read flush against a flat stem. */ h1.hero-h1 .oy{margin-left:-.03em} .eyebrow{font:600 12.5px var(--mono);letter-spacing:1.8px;text-transform:uppercase;color:var(--muted)} .eyebrow b{color:var(--orange-ink);font-weight:600} body{font-weight:500} /* nav: the floating pill (Caldera) */ .nav{background:none;border-bottom:none;height:auto;padding:14px 0;position:fixed;left:0;right:0} .nav .wrap{background:var(--card);border:2px solid var(--fold);border-radius:var(--r-pill); height:60px;padding:0 10px 0 20px;max-width:1080px;box-shadow:none; transition:border-color .3s,background-color .3s} .nav.scrolled{height:auto} .nav.scrolled .wrap{border-color:var(--line);background:rgba(255,254,250,.94);backdrop-filter:blur(10px)} .nav-links{display:flex;gap:2px;align-items:center} .nav-links a{font:700 13.5px var(--sans);letter-spacing:.4px;color:var(--muted);text-decoration:none; padding:9px 14px;border-radius:var(--r-pill);transition:background .2s,color .2s} @media(hover:hover){.nav-links a:hover{background:var(--fold-2);color:var(--ink)}} .logo img{width:auto;height:26px} .nav .btn-sm{--br:var(--r-pill);height:44px;opacity:1;translate:none;scale:none;pointer-events:auto;position:relative} .nav .logo{opacity:1} .nav-swap{min-width:0} body{padding-top:calc(var(--nav-h) + 14px)} /* hero */ .hero{min-height:calc(96vh - var(--nav-h));padding:34px 0 56px} /* A13 fix. This block sits AFTER the @media(max-width:900px) collapse above, and media queries add no specificity, so an unconditional `.hero .wrap` here silently won at every width and the hero never stacked: 126px of copy at 320, 163px at 390 under 40px display type. The two-column ratio is a desktop concern, so it is now guarded; gap and max-width stay unconditional. */ .hero .wrap{gap:44px;max-width:var(--container)} @media(min-width:901px){.hero .wrap{grid-template-columns:.94fr 1.06fr}} .hero-copy{gap:20px} .hero-copy h1{max-width:none} .hero-cta{width:340px} .hero-cta .btn{--br:var(--r-pill)} .micro-note{font:600 13px var(--mono);color:var(--muted);letter-spacing:.2px;width:340px;text-align:center} /* the magic-copy rewrite runs one line shorter here; the floor keeps the band from resizing when the toggle fires (3 lines × 1.6 × 18px) */ .hero-copy .lede{min-height:86px} /* placeholder art slots — Level 3's generation contract. Labeled, ratio-locked. */ .ph-art{position:relative;display:grid;place-items:center;width:100%; background:var(--fold-2);border:2px dashed var(--line);border-radius:var(--r-card); aspect-ratio:var(--ar,4/3);color:var(--muted);text-align:center;padding:20px} .ph-art .tag{font:600 11.5px var(--mono);letter-spacing:1.4px;text-transform:uppercase;line-height:2} .ph-art .tag b{display:block;font-size:13px;color:var(--ink-soft);letter-spacing:1.8px} .ph-art svg{width:34px;height:34px;opacity:.45;margin-bottom:10px} .ph-art.on-dark{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.25);color:var(--midnight-text)} .ph-art.on-dark .tag b{color:#fff} /* patch badge placeholders — the Kikin move, S2 mission patches */ .patch{position:absolute;display:grid;place-items:center;width:112px;height:112px;border-radius:50%; background:var(--card);border:2px dashed var(--line);rotate:6deg;z-index:3; font:600 10px var(--mono);letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);text-align:center;padding:10px} .patch.p-l{rotate:-7deg} .patch.sm{width:92px;height:92px} /* stats band (Caldera stat cards, S2 hues; the 60× card is the page's ONE orange moment) */ .stats-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;margin-bottom:44px} .stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .stat-card{border-radius:var(--r-card);padding:34px 32px;background:var(--indigo);color:#fff;min-height:210px; display:flex;flex-direction:column;justify-content:space-between;gap:18px} .stat-card .lbl{font:600 12.5px var(--mono);letter-spacing:1.2px;text-transform:uppercase;opacity:.92;line-height:1.7} .stat-card .num{font-family:var(--display);font-weight:400;font-size:84px;line-height:.9;letter-spacing:.01em} .stat-card.moment{background:var(--orange);color:var(--ink)} .stat-card.moment .lbl{opacity:.85} .stat-note{margin-top:22px;text-align:center;font:600 12.5px var(--mono);color:var(--muted);letter-spacing:.2px} .stat-note a{color:var(--indigo);text-decoration:none;border-bottom:1.5px solid rgba(92,51,246,.3)} /* bento band (Caldera 2×2: copy card + art card checkerboard) */ .bento{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:44px} .bento .cell{border-radius:var(--r-card);padding:40px;background:var(--card);border:2px solid var(--fold); display:flex;flex-direction:column;justify-content:flex-end;gap:10px;min-height:340px} .bento .cell h3{font:800 21px/1.25 var(--sans);color:var(--ink)} .bento .cell p{font:600 15.5px/1.55 var(--sans);color:var(--muted)} .bento .cell.art{padding:0;border:none;overflow:hidden;background:none} .bento .cell.art .ph-art{height:100%;border-radius:var(--r-card);--ar:auto} .bento-closer{margin-top:26px;font:700 17px var(--sans);color:var(--ink);max-width:56ch} /* selector band (Caldera's category selector → who it's for) */ .selector{display:grid;grid-template-columns:.9fr 1.1fr;gap:16px;margin-top:44px;align-items:start} .sel-list{display:flex;flex-direction:column;gap:10px} .sel-item{border:2px solid var(--fold);border-radius:var(--r-pill);padding:16px 24px;background:var(--card); font:800 15px var(--sans);color:var(--ink)} .sel-item.open{border-radius:var(--r-card);padding:28px;background:var(--card)} .sel-item.open .si-head{display:flex;align-items:center;gap:12px;font:800 18px var(--sans)} .sel-item.open p{margin-top:10px;font:600 14.5px/1.55 var(--sans);color:var(--muted)} .sel-ic{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--indigo);color:#fff;flex:none} .sel-ic svg{width:18px;height:18px} .sel-detail{position:relative;border-radius:var(--r-card);background:var(--indigo);color:#fff;padding:40px;min-height:420px; display:flex;flex-direction:column;gap:16px} .sel-detail p{font:600 16.5px/1.6 var(--sans);color:#EDE9FE} /* #E0D7FA measures 4.68:1 on indigo — the lighter #CBBDFB read better and failed body-AA at 3.75:1 */ .sel-detail .fit{font:600 13px var(--mono);letter-spacing:.4px;line-height:1.8;color:#E0D7FA; border-top:2px solid rgba(255,255,255,.18);padding-top:16px;margin-top:auto} /* steps band */ .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px} .step{border:2px solid var(--fold);border-radius:var(--r-card);background:var(--card);padding:34px 30px} .step .n{font-family:var(--display);font-size:58px;color:var(--indigo);letter-spacing:.01em;line-height:1} .step h3{font:800 19px var(--sans);color:var(--ink);margin:14px 0 8px} .step p{font:600 15px/1.55 var(--sans);color:var(--muted)} .step:nth-child(2) .n{color:var(--orange-ink)} /* showpiece (LearningLab) — art owns the bottom edge */ .show{position:relative;background:linear-gradient(180deg,var(--sky-1),var(--sky-2)); border-radius:0;padding:96px 0 0;overflow:hidden;text-align:center} .show .wrap{display:flex;flex-direction:column;align-items:center;gap:18px;max-width:880px} .show .lede{max-width:52ch} .show-art{width:min(1020px,88%);margin:44px auto 0} .show-art .ph-art{--ar:21/9;border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:none} /* dark band */ .super{min-height:0;max-height:none;padding:110px 0} .super::before{background:radial-gradient(closest-side,rgba(92,51,246,.28),transparent 70%)} .super-eyebrow{color:var(--orange);font-family:var(--mono);font-weight:600} .super-word{font-size:72px;color:#fff} .super p{color:var(--midnight-text)} .super .btn{--bg:var(--indigo);--lipc:var(--indigo-lip);--br:var(--r-pill)} /* final + footer-as-card (Caldera compact close) */ .final{min-height:0;max-height:none;padding:110px 28px 340px} .final .display{font-size:72px} .footer{background:var(--paper);color:var(--ink);padding:0 0 44px} .foot-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:16px;max-width:var(--container);margin:0 auto;padding:0 28px} .foot-card{background:var(--ink);color:var(--paper);border-radius:var(--r-card);padding:44px} .foot-card .word{font-family:var(--display);font-size:44px;line-height:1;letter-spacing:.01em;text-transform:uppercase;margin-bottom:10px} .foot-card p{font:600 15px/1.6 var(--sans);color:#B9B4C4;margin-bottom:26px;max-width:38ch} .foot-links{background:var(--card);border:2px solid var(--fold);border-radius:var(--r-card);padding:38px 44px; display:flex;flex-direction:column;justify-content:space-between;gap:22px} .foot-links .cols2{display:grid;grid-template-columns:1fr 1fr;gap:8px 24px} .foot-links a{font:700 14.5px/2.2 var(--sans);color:var(--muted);text-decoration:none;transition:color .2s} @media(hover:hover){.foot-links a:hover{color:var(--indigo)}} .foot-meta{font:600 12px var(--mono);color:var(--muted);letter-spacing:.4px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap} /* ---------- character loops ---------- Seedance 5s loops generated from the shipping stills, with start and end frame pinned to the same image so the cut is invisible. These are the ONE deliberate departure from the shell's "scroll is the only clock" law: the brief called for Duolingo-style living characters. They stay honest about it — muted, inline, no controls, and they only run while on screen (an observer pauses them otherwise), so nothing animates unseen and prefers-reduced-motion freezes them on their poster frame. */ .loop{display:block;width:100%;height:auto;background:transparent} .cell.art .loop{max-height:340px;width:auto;max-width:100%} .hero-art .loop{max-width:620px;margin-inline:auto} .super-art .loop{max-width:400px;margin-inline:auto} @media(prefers-reduced-motion:reduce){.loop{animation:none}} /* live art */ .note-licence{border-left:4px solid var(--orange-ink);padding-left:16px} .patch-img{position:absolute;top:-30px;right:-14px;width:124px;rotate:7deg;z-index:3; filter:drop-shadow(0 2px 0 rgba(17,17,24,.18))} .patch-img.p2{top:auto;right:auto;left:5%;bottom:8%;width:106px;rotate:-9deg} .cell.art{display:grid;place-items:center;padding:18px;background:none;border:none} .cell.art .solo{max-height:340px;width:auto;max-width:100%} .cell.art .scene{width:100%;max-width:360px} .sel-detail .solo{width:100%;height:auto;margin-bottom:4px} .show-art .solo{width:100%} .hero-art .scene{width:100%;max-width:620px} /* problem strip: chips ride the shared scroll clock via #strip */ .problem{padding:84px 0 8px;text-align:center} .problem .display{max-width:20ch;margin:14px auto 0} .problem .display em{font-style:normal;color:var(--orange-ink)} .strip{border:none;background:none;height:auto;margin-top:36px} .strip .wrap{max-width:var(--container)} .strip a{border:2px solid var(--fold);background:var(--card);border-radius:var(--r-pill); font:700 13.5px var(--sans);text-transform:none;letter-spacing:.2px;color:var(--muted);padding:12px 20px} .chip-x{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%; background:var(--no-fill);color:var(--madder);font:800 11px var(--sans)} @media(max-width:900px){ /* the rewrite runs one line longer at phone widths; reserving 6 lines (6 × 0.92 line-height) means the toggle can never move the band. Measured: 0px jump at 1440/1280/768/375. */ h1.hero-h1{font-size:clamp(44px,11vw,64px);min-height:5.52em} .hero-copy .lede{min-height:0} .stat-row,.steps,.bento,.selector,.foot-grid{grid-template-columns:1fr} .stat-card .num{font-size:64px} .display{font-size:42px}.display-xl{font-size:52px} .super-word,.final .display{font-size:48px} .nav-links{display:none} .hero-cta,.micro-note{width:100%} } /* ============================================================ SUB-PAGE COMPONENTS — LearningLab + ROI calculator. Same tokens, same rhythm; nothing new invented here. ============================================================ */ /* the product teaser: a real video with controls — NOT a character loop, so it is deliberately outside the .loop system and never autoplays */ .lab-video{max-width:940px;margin:0 auto;border-radius:var(--r-card);overflow:hidden; border:2px solid var(--fold);background:var(--ink);line-height:0} .lab-video video{width:100%;height:auto;display:block} .transcript{max-width:940px;margin:18px auto 0;border:2px solid var(--fold);border-radius:var(--r); background:var(--card);padding:0 20px} .transcript summary{cursor:pointer;padding:16px 4px;font:700 14.5px var(--sans);color:var(--ink)} .transcript[open]{padding-bottom:20px} .transcript p{font:600 15px/1.7 var(--sans);color:var(--muted);border-top:2px solid var(--fold);padding-top:16px} /* ---------- ROI calculator ---------- */ .calc{display:grid;grid-template-columns:1fr 1.05fr;gap:16px;margin-top:44px;align-items:start} .calc-panel{border:2px solid var(--fold);border-radius:var(--r-card);background:var(--card);padding:34px} .calc-panel h3{font:800 13px var(--mono);letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);margin-bottom:22px} .field-row{margin-bottom:24px} .field-row label{display:flex;justify-content:space-between;align-items:baseline;gap:12px; font:700 14.5px var(--sans);color:var(--ink);margin-bottom:10px} .field-row .val{font-family:var(--mono);font-weight:600;font-size:15px;color:var(--indigo); background:var(--fold-2);border-radius:var(--r-xs);padding:3px 10px;min-width:72px;text-align:center} .field-row input[type=range]{width:100%;height:6px;border-radius:99px;background:var(--fold); appearance:none;-webkit-appearance:none;outline:none;cursor:pointer} .field-row input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none; width:26px;height:26px;border-radius:50%;background:var(--indigo);border:3px solid var(--card); box-shadow:0 3px 0 var(--indigo-lip);cursor:grab} .field-row input[type=range]::-webkit-slider-thumb:active{cursor:grabbing;box-shadow:none} .field-row input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%; background:var(--indigo);border:3px solid var(--card);cursor:grab} .field-row input[type=range]:focus-visible{outline:3px solid var(--indigo);outline-offset:6px} .seg{display:flex;gap:6px;background:var(--fold-2);border-radius:var(--r-pill);padding:5px} .seg button{flex:1;border:none;background:none;cursor:pointer;padding:11px 12px;border-radius:var(--r-pill); font:800 13px var(--sans);letter-spacing:.3px;color:var(--muted);transition:background .18s,color .18s} .seg button[aria-pressed=true]{background:var(--ink);color:var(--paper)} @media(hover:hover){.seg button:not([aria-pressed=true]):hover{color:var(--ink)}} .rev-toggle{display:flex;align-items:center;gap:12px;font:700 14.5px var(--sans);color:var(--ink); cursor:pointer;padding-top:6px;border-top:2px solid var(--fold);margin-top:4px} .rev-toggle input{width:20px;height:20px;accent-color:var(--indigo);cursor:pointer} .rev-fields{display:none;margin-top:22px} .rev-fields.on{display:block} .calc-out{border-radius:var(--r-card);background:var(--indigo);color:#fff;padding:34px;position:sticky;top:104px} .calc-out h3{font:800 13px var(--mono);letter-spacing:1.4px;text-transform:uppercase;color:#E0D7FA;margin-bottom:8px} .calc-hero-num{font-family:var(--display);font-weight:400;font-size:76px;line-height:.92;letter-spacing:.01em; text-transform:uppercase;margin:6px 0 2px} .calc-hero-lbl{font:600 13px var(--mono);letter-spacing:1.2px;text-transform:uppercase;color:#E0D7FA} .calc-sub{display:flex;gap:10px;margin:22px 0 24px;flex-wrap:wrap} .calc-sub div{flex:1;min-width:130px;background:rgba(255,255,255,.12);border-radius:var(--r);padding:14px 16px} .calc-sub b{display:block;font-family:var(--display);font-weight:400;font-size:32px;line-height:1;letter-spacing:.01em} .calc-sub span{display:block;font:600 11.5px var(--mono);letter-spacing:.8px;text-transform:uppercase;color:#E0D7FA;margin-top:6px} .calc-rows{border-top:2px solid rgba(255,255,255,.2)} .calc-rows div{display:flex;justify-content:space-between;gap:14px;padding:12px 0; border-bottom:2px solid rgba(255,255,255,.12);font:600 14.5px var(--sans)} .calc-rows span{color:#E0D7FA} .calc-rows b{font-weight:800;font-variant-numeric:tabular-nums} .calc-out .btn{margin-top:24px;width:100%;--bg:var(--paper);--lipc:var(--paper-lip);color:var(--ink);--br:var(--r-pill)} .assump{margin-top:26px;border:2px solid var(--fold);border-radius:var(--r);background:var(--card);padding:0 20px} .assump summary{cursor:pointer;padding:16px 4px;font:700 14px var(--sans);color:var(--ink)} .assump[open]{padding-bottom:18px} .assump ul{list-style:none;border-top:2px solid var(--fold);padding-top:14px} .assump li{font:600 13.5px/1.9 var(--sans);color:var(--muted);display:flex;justify-content:space-between;gap:14px} .assump li b{color:var(--ink);font-family:var(--mono);font-weight:600;font-size:13px} .disclaim{margin-top:18px;font:600 12.5px/1.7 var(--mono);color:var(--muted);letter-spacing:.2px;max-width:74ch} @media(max-width:900px){ .calc{grid-template-columns:1fr} .calc-out{position:static} .calc-hero-num{font-size:54px} } /* A scene generated on the ink or indigo ground is a rectangle of colour, not a cut-out. On a paper band it must read as a deliberately framed card — never a stray black box. */ .loop.framed{border-radius:var(--r-card);overflow:hidden;border:2px solid var(--fold)} .hero-art .loop.framed{box-shadow:0 4px 0 var(--fold)} /* The bento is a checkerboard on two columns: copy · ART / ART · copy. Collapsed to one column it replays DOM order, which puts two graphics back to back and two copy cards back to back — the reading rhythm breaks and the page looks like an album of pictures. Reordering restores copy → art → copy → art on a single column, so every graphic still arrives attached to the idea it illustrates. */ @media(max-width:900px){ .bento > .cell:nth-child(3){order:4} .bento > .cell:nth-child(4){order:3} .bento > .cell:nth-child(7){order:8} .bento > .cell:nth-child(8){order:7} .bento > .cell:nth-child(1){order:1} .bento > .cell:nth-child(2){order:2} .bento > .cell:nth-child(5){order:5} .bento > .cell:nth-child(6){order:6} /* art cells lose their fixed height on one column so they never dominate the fold */ .cell.art .solo,.cell.art .loop{max-height:260px} } /* ============================================================ MOBILE NAV — the pill nav hid its links below 900px, which left a phone visitor with one destination: the CTA. A disclosure button now opens the same links as a sheet under the bar. ============================================================ */ .nav-burger{display:none;flex:none;width:46px;height:46px;padding:0;border:none;background:none; cursor:pointer;border-radius:var(--r-pill);color:var(--ink);align-items:center;justify-content:center} .nav-burger svg{width:22px;height:22px} .nav-burger .x{display:none} .nav[data-open="1"] .nav-burger .x{display:block} .nav[data-open="1"] .nav-burger .b{display:none} @media(max-width:900px){ .nav-burger{display:inline-flex} .nav .wrap{padding-right:6px} .nav .btn-sm{display:none} .nav-links{position:absolute;left:0;right:0;top:calc(100% + 8px);display:none;flex-direction:column; gap:2px;background:var(--card);border:2px solid var(--fold);border-bottom-width:4px; border-radius:var(--r-card);padding:10px;margin:0 14px} .nav[data-open="1"] .nav-links{display:flex} .nav-links a{padding:14px 16px;font-size:15.5px;border-radius:var(--r);color:var(--ink)} .nav-links a[aria-current="page"]{background:var(--fold-2);color:var(--indigo)} .nav-links .btn{margin-top:6px;width:100%;--br:var(--r-pill)} .nav .wrap{position:relative} } /* ============================================================ BENTO CELLS — the copy cards were a heading and one line inside a 340px box, which read as an unfinished slide. Each now opens with a numbered mono label and an icon, so the space above the text is structure rather than a void, and the box is shorter. ============================================================ */ .bento .cell{min-height:264px;justify-content:space-between;gap:0} .cell-top{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:auto} .cell-ic{display:grid;place-items:center;width:52px;height:52px;flex:none;border-radius:15px; background:var(--indigo);color:#fff} .cell-ic svg{width:26px;height:26px} .cell:nth-child(5) .cell-ic{background:var(--orange);color:var(--ink)} .cell-no{font:600 12px var(--mono);letter-spacing:1.4px;color:var(--muted)} .bento .cell h3{margin-top:26px} .bento .cell p{margin-top:8px} /* art cells: centre the artwork instead of letting it hug an edge */ .cell.art{place-items:center;justify-items:center} .cell.art .solo,.cell.art .loop{margin-inline:auto;display:block} /* ============================================================ SELECTOR — the rows looked tappable and did nothing. They are now a real accordion: one open at a time, keyboard reachable, and the detail panel swaps with the selection. ============================================================ */ .sel-item{cursor:pointer;border:2px solid var(--fold);background:var(--card);width:100%;text-align:left; font:800 15px var(--sans);color:var(--ink);transition:border-color .2s,background .2s} @media(hover:hover){.sel-item:not(.open):hover{border-color:var(--line);background:var(--fold-2)}} .sel-item:focus-visible{outline:3px solid var(--indigo);outline-offset:3px} .sel-item .si-head{display:flex;align-items:center;gap:12px;font:800 18px var(--sans)} .sel-item p{display:none} .sel-item.open p{display:block;margin-top:10px;font:600 14.5px/1.55 var(--sans);color:var(--muted)} .sel-item:not(.open) .sel-ic{display:none} .sel-ic .plus{transition:rotate .25s var(--ease-soft)} .sel-item.open .sel-ic .plus{rotate:45deg} /* ============================================================ HERO ON PHONES — reported from a real device: the patch sat on top of the cast, the artwork was too small to read, and the CTAs looked like two stray chips. All three are the same root cause: a two-column hero squeezed into one column without being re-thought for it. ============================================================ */ /* The patch is a sticker over ARTWORK, never over a face. Behind the art, and clear of it on small screens. */ .hero-art{position:relative} .hero-art .patch-img{z-index:0} .hero-art .loop,.hero-art .scene,.hero-art .solo{position:relative;z-index:1} @media(max-width:900px){ .hero{min-height:0;padding:18px 0 56px} .hero .wrap{gap:26px} /* art first: it explains the business faster than the subhead does */ .hero-art{order:-1;width:100%} .hero-art .loop,.hero-art .solo,.hero-art .scene{max-width:100%;width:100%} /* the patch tucks to a corner at a size that reads as a stamp, not a blocker */ .hero-art .patch-img{width:84px;top:auto;bottom:-10px;right:2px;rotate:8deg} .hero-copy{gap:16px} /* full-width stacked CTAs — two 340px chips in a 375px viewport read as debris */ .hero-cta{width:100%;gap:10px} .hero-cta .btn{width:100%} .micro-note{width:100%} h1.hero-h1{font-size:clamp(40px,10.4vw,58px)} } @media(max-width:520px){ .hero-art .patch-img{width:70px} } /* --- fixes from the device review, round 2 --- */ /* The sheet CTA belongs only to the sheet; above the breakpoint the bar has its own. */ .nav-links .btn{display:none} @media(max-width:900px){.nav-links .btn{display:inline-flex}} /* The art is a video, so its background is baked in and cannot be cut to alpha the way the stills are. Framing it as a card makes that ground deliberate — and matches the copy cards it sits beside, so a bento row reads as two cards, not a card and a photo. */ .cell.art{padding:0;background:none;border:none} .cell.art .loop,.cell.art .solo{border-radius:var(--r-card);border:2px solid var(--fold); background:var(--paper);width:100%;height:100%;object-fit:cover;max-height:none} /* Rows were as tall as the art, which stranded the copy cards' text at the bottom of a 340px box. Shorter rows close the gap without cramping either side. */ .bento{grid-auto-rows:minmax(0,236px)} .bento .cell{min-height:0} .bento .cell h3{margin-top:18px} @media(max-width:900px){ .bento{grid-auto-rows:auto} .cell.art .loop,.cell.art .solo{height:auto;max-height:250px;object-fit:contain} } /* cover cropped the cast's heads — never crop a character. Contain letterboxes onto the card's own paper ground, which is the same colour the art was generated on. */ .cell.art .loop,.cell.art .solo{object-fit:contain;padding:10px} .bento{grid-auto-rows:minmax(0,262px)} /* height:100% had no definite parent to resolve against, so the video rendered at its own 544px and the cell simply clipped it. Bound it by max-* instead and let it scale down. */ .cell.art{display:grid;place-items:center;overflow:hidden; border-radius:var(--r-card);border:2px solid var(--fold);background:var(--paper)} .cell.art .loop,.cell.art .solo{width:auto;height:auto;max-width:100%;max-height:100%; border:none;border-radius:calc(var(--r-card) - 4px);background:none;padding:0} @media(max-width:900px){ .cell.art{min-height:230px} .cell.art .loop,.cell.art .solo{max-height:230px} } /* max-height:100% needs a definite parent height and a stretched grid item does not provide one, so the video kept rendering at its intrinsic 544px. An explicit cap, matched to the row height, is the reliable form. */ .cell.art .loop,.cell.art .solo{max-height:248px} @media(max-width:900px){.cell.art .loop,.cell.art .solo{max-height:224px}} /* Measured: the art sat 148px left of its cell's centre — .bento .cell's flex-column with a default cross-axis alignment was winning. Stated explicitly instead of relying on place-items, which was being overridden. */ .cell.art{display:flex!important;align-items:center!important;justify-content:center!important; flex-direction:row!important} .cell.art > *{margin:auto!important} /* ============================================================ NAV CTA — one element, two labels. Two CTA elements meant two could ever show at once; a single button with a breakpoint-swapped label makes that structurally impossible, and keeps the primary action on screen at phone widths instead of hiding it behind the menu. ============================================================ */ .cta-sm{display:none} @media(max-width:900px){ .nav .btn-sm{display:inline-flex;height:42px;padding:0 16px;font-size:12.5px} .cta-lg{display:none} .cta-sm{display:inline} .nav .wrap{gap:8px;padding-left:14px} .logo img{height:22px} } /* ============================================================ BENTO ANCHOR — the icon chips were clip-art in a system that has a real illustrated world; they read as filler. The numeral the steps band already uses does the same job in the brand's own voice. ============================================================ */ .cell-top{display:block;margin-bottom:0} .cell-no{display:block;font-family:var(--display);font-weight:400;font-size:58px;line-height:.9; letter-spacing:.01em;color:var(--indigo);font-variant-numeric:normal} .bento .cell:nth-child(5) .cell-no{color:var(--orange-ink)} .bento .cell h3{margin-top:20px} @media(max-width:900px){.cell-no{font-size:46px}} /* ============================================================ LOGO ASPECT — the shell's scrolled-nav state shrank a square mascot with `width:36px;height:36px`. The S2 mark is 875×420, so that rule squashed it to a 1:1 box the moment the page scrolled past 300px. Height only; width always follows the artwork. ============================================================ */ .logo img,.nav.scrolled .logo img{width:auto;height:26px} .nav.scrolled .logo img{height:22px} @media(max-width:900px){ .logo img,.nav.scrolled .logo img{height:22px} .nav.scrolled .logo img{height:20px} } /* ═══ BLOG ═══ */ .blog-header{position:relative;padding:96px 0 82px;border-bottom:1px solid var(--line);overflow:hidden} .blog-header .wrap{position:relative} .blog-header .eyebrow{margin-bottom:16px} .blog-title{max-width:11ch;font:400 clamp(64px,8vw,104px)/.92 var(--display);letter-spacing:.01em;text-transform:uppercase;color:var(--ink)} .blog-lede{max-width:68ch;margin-top:24px;font:600 18px/1.65 var(--sans);color:var(--muted)} .blog-patch{position:absolute;right:42px;top:-24px;width:120px;rotate:7deg} .blog-list{padding:76px 0 96px} .blog-cards{display:grid;gap:22px} .blog-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,360px);gap:32px;align-items:center;padding:28px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);color:var(--ink);text-decoration:none;transition:translate var(--lip-t),border-color .2s} .blog-card:active{translate:0 2px} @media(hover:hover){.blog-card:hover{translate:0 -3px;border-color:var(--indigo)}} .blog-card-kicker,.blog-article-kicker,.blog-capture-label{font:600 12.5px/1.5 var(--mono);letter-spacing:1.3px;text-transform:uppercase;color:var(--muted)} .blog-card-title{margin-top:12px;font:400 clamp(34px,4vw,52px)/1 var(--display);letter-spacing:.01em;text-transform:uppercase;color:var(--ink)} .blog-card-excerpt{max-width:62ch;margin-top:14px;font:600 16px/1.6 var(--sans);color:var(--muted)} .blog-card-link{display:inline-block;margin-top:18px;font:800 14px var(--sans);color:var(--indigo);text-decoration:underline;text-underline-offset:4px} .blog-card img{width:100%;max-height:180px;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r)} .blog-capture{margin-top:52px;padding:32px;background:var(--fold-2);border-radius:var(--r-card)} .blog-capture-copy{margin-top:10px;font:700 17px/1.5 var(--sans);color:var(--ink)} .blog-form{display:flex;align-items:stretch;gap:12px;margin-top:20px} .blog-form input[type=email]{min-width:0;flex:1;padding:15px 17px;border:1px solid var(--line);border-radius:var(--r);background:var(--card);font:600 16px var(--sans);color:var(--ink)} .blog-form input[type=email]::placeholder{color:var(--muted)} .blog-form .btn{flex:none} .blog-honeypot{position:absolute;left:-9999px} .blog-form-message{margin-top:18px;font:700 15px/1.5 var(--sans);color:var(--ink)} .blog-form-message.blog-error{color:var(--orange-ink)} .blog-article-header{padding:82px 0 58px;border-bottom:1px solid var(--line)} .blog-article-header .wrap{max-width:920px} .blog-article-title{max-width:14ch;margin-top:18px;font:400 clamp(58px,7.6vw,96px)/.94 var(--display);letter-spacing:.01em;text-transform:uppercase;color:var(--ink)} .blog-article{padding:66px 0 96px} .blog-article-inner{max-width:68ch;margin:0 auto;padding:0 28px;font:600 18px/1.7 var(--sans);color:var(--ink)} .blog-article-inner p{margin:0 0 1.5em} .blog-article-inner strong{font-weight:700} .blog-article-inner a:not(.btn){color:var(--indigo);text-decoration:underline;text-underline-offset:3px} .blog-article-inner a:not(.btn):visited{color:var(--indigo)} .blog-scene{width:100%;margin:34px 0;border-radius:var(--r-card)} .blog-article-inner ol{margin:0 0 1.7em;list-style:none;counter-reset:blog-steps} .blog-article-inner li{position:relative;counter-increment:blog-steps;padding-left:44px;margin:0 0 14px} .blog-article-inner li::before{content:counter(blog-steps) ".";position:absolute;left:0;top:0;font:600 16px/1.9 var(--mono);color:var(--orange-ink)} .blog-article .blog-capture{margin-top:62px} .blog-pagination{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:34px} .blog-pagination .btn{width:100%;height:auto;min-height:54px;padding-block:14px;white-space:normal;text-align:center} .blog-pagination .blog-empty{display:block} .blog-all-notes{display:inline-block;margin-top:28px;font:800 14px var(--sans);color:var(--indigo);text-decoration:underline;text-underline-offset:4px} @media(max-width:720px){ .blog-header{padding:68px 0 62px} .blog-patch{right:22px;top:-12px;width:82px} .blog-title{max-width:8ch;font-size:clamp(52px,15vw,76px)} .blog-card{grid-template-columns:1fr;padding:22px} .blog-card img{grid-row:2;max-height:none} .blog-form{flex-direction:column} .blog-form .btn{width:100%} .blog-article-header{padding:58px 0 42px} .blog-article-title{font-size:clamp(50px,14vw,72px)} .blog-article{padding:48px 0 76px} .blog-article-inner{font-size:17px;padding:0 22px} .blog-capture{padding:24px} .blog-pagination{grid-template-columns:1fr} .blog-pagination .blog-empty{display:none} } /* --- from the desk: compact field-note slot under the flagship --- */ .desk{padding:88px 0;background:var(--paper)} .desk .blog-cards{margin-top:34px} @media (max-width:720px){.desk{padding:64px 0}} /* match .blog-card stacking */ /* ═══ FLIP ═══ */ /* 2026-09 LearningLab-first flip. Token-pure additions; every text pair is measured. */ .blog-article-inner .blog-cta-lead{margin:34px 0 14px;font:600 16px/1.6 var(--sans);color:var(--muted)} /* muted on paper 5.93:1 */ .blog-article-inner .blog-cta{margin:0} .foot-side{margin:0;font:600 13px/1.6 var(--mono);color:var(--muted);letter-spacing:.2px} /* muted on card 6.46:1 */ .foot-side a{display:inline;font:inherit;line-height:inherit;color:inherit;text-decoration:underline;text-underline-offset:3px} /* E6 fix. .calc-sub tiles are 12% white over indigo (#705FF7 composited). #E0D7FA on that tile measures 3.77:1, under body AA; the old E6 read the tile as opaque white and reported 1.38:1. White measures 5.19:1 on the tile. */ .calc-sub span{color:#fff} /* A1 fix. `.calc` already collapses to one column at 900px, but `1fr` carries an automatic minimum of min-content, so the track could not shrink below .calc-panel's 393px min-content (driven by .seg, the scenario control, at 321px). The calculator therefore overflowed the viewport at 390 and 320, and html,body{overflow-x:clip} was hiding it rather than fixing it. minmax(0,1fr) lets the track shrink; the .seg pair lets the control reflow instead of forcing the blowout. Measured: roi.html now fits at all nine widths. */ @media(max-width:900px){.calc{grid-template-columns:minmax(0,1fr)}} @media(max-width:520px){.seg{flex-wrap:wrap}.seg button{flex:1 1 96px;min-width:0}} /* Ported from an outside concept: the hero offer card and the procurement hand-off. Every figure here already appears elsewhere on the page; nothing commercial is invented. Contrast, measured from the token table: --paper on --indigo 5.86:1 · --midnight-text on --indigo 5.22:1. Both clear body AA. */ .offer{background:var(--indigo);color:var(--paper);border-radius:var(--r-card);padding:24px 26px;margin:4px 0 4px} .offer .offer-h{font:800 12px var(--mono);letter-spacing:1.3px;text-transform:uppercase;color:var(--midnight-text);margin:0 0 10px} .offer-price{font-family:var(--display);font-weight:400;font-size:clamp(44px,7vw,60px);line-height:1;margin:0} .offer-unit{font:600 12.5px var(--mono);letter-spacing:.3px;color:var(--midnight-text);margin:8px 0 0} .offer-specs{margin:18px 0 0;display:grid;gap:12px} .offer-specs dt{font:800 11px var(--mono);letter-spacing:1.1px;text-transform:uppercase;color:var(--midnight-text)} .offer-specs dd{margin:3px 0 0;font:600 15px/1.45 var(--sans)} .offer-link{margin:18px 0 0} .offer-link a{font:600 13px var(--mono);color:var(--paper);text-underline-offset:3px} .procurement .wrap{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start} .proc-list{list-style:none;margin:0;padding:0;display:grid;gap:16px} .proc-list li{font:400 16px/1.6 var(--sans);color:var(--ink-soft);padding-left:18px;border-left:2px solid var(--fold)} .proc-list b{font-weight:700;color:var(--ink)} @media(max-width:900px){.procurement .wrap{grid-template-columns:1fr;gap:28px}} .procurement .micro-note{text-align:left;margin-top:14px}