/* v2 studio (/), storytelling build, v4 (2026-10-11).
   Own design floor: no portfolio CSS. One world, the forest; one guide, the fox; its palette is the thread
   (one paint colour per chapter, a dab beside every heading, a rail on the right that fills as you read).
   Type: Cabinet Grotesk carries everything; Boska italic is the one serif touch, always a whole line. Both are
   Fontshare (ITF Free Font License), self-hosted as variable woff2 in ui/assets/fonts/. JetBrains Mono, for
   the small labels, sits beside them (SIL Open Font License, jetbrains-mono-OFL.txt), so no font comes from Google.
   Motion is scrubbed by agence-story.js and switched off under prefers-reduced-motion, where every scene
   shows its arrival state. The /<page> documents share this sheet (body.page). */

@font-face {
  font-family: 'Cabinet Grotesk';
  src: url('/assets/fonts/cabinet-grotesk-var.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Geist Serif';
  src: url('/assets/fonts/geist-serif-var.woff2') format('woff2');
  font-weight: 100 900; font-style: italic; font-display: block; /* Geist Serif has no italic: the upright file is declared as the italic face so the browser never slants it */
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/assets/fonts/jetbrains-mono-var.woff2') format('woff2');
  font-weight: 100 800; font-style: normal; font-display: swap;
}

@font-face {
  font-family: 'Space Grotesk';
  src: url('/assets/fonts/space-grotesk-latin.woff2') format('woff2');
  font-weight: 300 700; font-style: normal; font-display: swap;
}
:root {
  --night: #0d0c12;
  --moss: #14131b;
  --moss-2: #1c1b25;
  --deep: #0d0c14;
  --mist: #ebe9f1;
  --paper: #f4f3f7;
  --paper-2: #fbfafd;
  --ink: #16151d;
  --ink-2: rgba(22, 21, 29, .74);
  --ink-3: rgba(22, 21, 29, .66);
  --rule: rgba(22, 21, 29, .12);
  --cream: #f3f1f7;
  --cream-2: rgba(243, 241, 247, .78);
  --cream-3: rgba(243, 241, 247, .6);
  --rule-dark: rgba(243, 241, 247, .14);
  --edge: rgba(243, 241, 247, .09);

  /* The brand colour is one glacier ramp (2026-11-06, replacing the 2026-10-31 sunset ribbon the owner found too
     "vibe coded"): steel blue to ice, one hue family, low chroma, in step with the sea of the hero. Every gradient
     on the site is drawn from these five stops, with dark ink on top (--accent-ink, 5.5:1 or better on every stop).
     Stop 1 is the mid steel on purpose: used alone (rules, dots, gauges) it still reads on paper as well as on night.
     Fills paint the gradient: --holo, or --holo-loop drawn at 200% width so a hover can slide it along.
     --holo-deep is the same ramp dark enough for text and rules on paper.
     Anything that takes a single colour (focus ring, caret, selection, form controls, thin rules, icons) uses
     --accent, a light steel blue; --accent-deep is the steel blue dark enough for paper. */
  --holo-1: #6f8fc4;
  --holo-2: #85a3cc;
  --holo-3: #9fb9d7;
  --holo-4: #bcd0e2;
  --holo-5: #dbe6ee;
  --holo: linear-gradient(100deg, var(--holo-1), var(--holo-2) 25%, var(--holo-3) 50%, var(--holo-4) 75%, var(--holo-5));
  --holo-loop: linear-gradient(100deg, var(--holo-1) 0%, var(--holo-2) 20%, var(--holo-3) 38%, var(--holo-4) 56%, var(--holo-5) 74%, var(--holo-1) 100%);
  --holo-deep: linear-gradient(100deg, #22617a, #245a85 25%, #27528e 50%, #2b4b8f 75%, #2f4588);
  --accent: #a9c4e2;
  --accent-hi: #cfe0ef;
  --accent-deep: #2c5585;
  --accent-ink: #0d1520;

  /* One pigment per chapter (and per business type, check glyph, status dot), at mid strength so a fill reads on
     night and on paper alike. Text in a pigment on paper mixes it with --ink first.
     2026-11-06, sober set (the owner, after the glacier ramp): muted, low-chroma tones of stone, sea and slate, all
     near the same lightness, so each chapter keeps its own tone without any hue shouting. The names are the old
     slots, kept so nothing else changes: moss = the brand steel blue (--holo-1), yellow = sand, blue = denim,
     pink = dusty mauve, orange = clay, cyan = sea glass, purple = slate, sienna = warm grey, lime = sage. */
  --p-moss: #6f8fc4;
  --p-yellow: #b2a37e;
  --p-blue: #7393b5;
  --p-pink: #a6909f;
  --p-orange: #b38a70;
  --p-cyan: #6fa2ab;
  --p-purple: #8b8bb0;
  --p-sienna: #a29189;
  --p-lime: #87a593;
  --p-white: #f3f1f7;

  --f-sans: 'Cabinet Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-display: var(--f-sans);
  --f-serif: 'Geist Serif', Georgia, 'Times New Roman', serif;
  --f-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ease: cubic-bezier(.23, 1, .32, 1);
  --r-ctl: 10px;
  --r-card: 16px;
  --r-big: 22px;
  --e1: 0 1px 2px rgba(22, 21, 29, .05), 0 6px 16px rgba(22, 21, 29, .06);
  --e2: 0 12px 32px rgba(22, 21, 29, .1);
  --e3: 0 32px 80px rgba(13, 12, 18, .45);
  --gutter: clamp(16px, 4.2vw, 64px);
  --max: 1220px;
  --nav-h: 68px;
  --chapter: var(--p-moss);
  --section: clamp(88px, 13vh, 150px);
  /* One brush stroke, stretched under each of the 12 check titles */
  --brush: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 60' preserveAspectRatio='none'%3E%3Cpath d='M7 17C58 7 138 11 208 8s142-5 184 6c6 9 5 24-3 33-68 9-158 4-228 7S41 58 11 47C3 39 2 26 7 17z'/%3E%3C/svg%3E");
  interpolate-size: allow-keywords;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--nav-h) + 16px); -webkit-text-size-adjust: 100%; caret-color: var(--accent); scrollbar-width: thin; scrollbar-color: rgba(243, 241, 247, .28) transparent; }
/* French copy is swapped in by the deferred scripts; the first hero screen is written inline, so it never waits. */
html.i18n-pending [data-t]:not(.hero-beat--1 [data-t]), html.i18n-pending [data-th]:not(#hero-title) { visibility: hidden; }
/* Machine-translated languages have no inline first screen: the hero waits for agence-story.js too. */
html.i18n-mt.i18n-pending .hero-beat--1 [data-t], html.i18n-mt.i18n-pending #hero-title, html.i18n-mt.i18n-pending #hero-brands .hb-label { visibility: hidden; }
/* Right-to-left languages (Arabic, Hebrew, Persian): the layout stays as designed, each paragraph takes the
   direction of its own text. */
html.rtl-text :is(p, h1, h2, h3, h4, li, dt, dd, blockquote, figcaption, label, summary, legend, .btn, .lede, .label) { unicode-bidi: plaintext; text-align: start; }
body {
  margin: 0;
  background: var(--night);
  color: var(--cream);
  font-family: var(--f-sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: 1px; }
button { font: inherit; color: inherit; }
input, textarea, select { accent-color: var(--accent); }
h1, h2, h3, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
em { font-style: italic; }
p { text-wrap: pretty; }
::selection { background: var(--accent); color: var(--accent-ink); }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; left: 16px; top: -80px; z-index: 100;
  padding: 12px 18px; border-radius: var(--r-ctl); background: var(--cream); color: var(--ink);
  font-weight: 600; font-size: 14px; text-decoration: none; transition: top .2s var(--ease);
}
.skip:focus { top: 14px; }
main:focus { outline: none; }

a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
/* on paper the pale lilac would vanish: the deep one keeps the ring visible */
[data-tone='light'] :focus-visible, .work :focus-visible, .wd-intro :focus-visible, .wd-brief :focus-visible { outline-color: var(--accent-deep); }

/* ── Shared type ── */
.display {
  font-family: var(--f-sans);
  font-weight: 600;
  letter-spacing: -.022em; /* Cabinet Grotesk is tight by default */
  line-height: 1;
  text-wrap: balance;
}
.display em {
  display: block;
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.012em;
  font-size: 1.04em;
  line-height: 1.02;
  color: var(--c, var(--chapter));
}
[data-tone='light'] .display em { color: color-mix(in srgb, var(--c, var(--chapter)) 56%, var(--ink)); }
.h2 { font-size: clamp(36px, 4.4vw, 66px); }
.checks .h2, .process .h2, .faq .h2, .founder .h2 { font-size: clamp(32px, 3.5vw, 54px); }
.lede { font-size: clamp(17px, 1.3vw, 19px); line-height: 1.6; max-width: 56ch; }
.display + .lede { margin-top: 20px; }
[data-tone='light'] { color: var(--ink); }
.wrap { width: min(var(--max), calc(100% - 2 * var(--gutter))); margin: 0 auto; }
.sec-head { margin-bottom: clamp(36px, 6vh, 64px); }
.sec-head--split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: end; }
.label { font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; font-variant-numeric: tabular-nums; }

/* The thread, on the page: one paint dab above each heading, in the chapter's colour */
.dab {
  display: block; width: 14px; height: 14px; margin-bottom: 22px;
  background: var(--c, var(--chapter));
  border-radius: 48% 52% 46% 54% / 55% 45% 55% 45%;
  box-shadow: inset 0 -1px 1px rgba(0, 0, 0, .18), inset 1px 1px 1px rgba(255, 255, 255, .18);
}
.dab--inline { display: inline-block; width: 10px; height: 10px; margin: 0 8px 0 0; vertical-align: 0; }
/* 2026-10-18: the dabs above the headings are hidden on every page (the user found them noisy). The markup stays;
   the rail on the right and the dab transition between the forest and the fox are separate and unchanged. */
.dab, .wd-h .dab { display: none; }
/* Kept for the classic page and any fragment that still carries it: a quiet label, no mono. */
.chapter-mark { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px; font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; opacity: .8; }
.chapter-mark::before { content: ''; width: 12px; height: 12px; border-radius: 48% 52% 46% 54% / 55% 45% 55% 45%; background: var(--c, var(--chapter)); }

/* Headings rise word by word on entry (once) */
.rw { display: inline-block; }
[data-reveal].is-split:not(.is-in) .rw { opacity: 0; transform: translateY(.32em); }
[data-reveal].is-split .rw { transition: opacity .5s ease, transform .7s var(--ease); transition-delay: calc(var(--i) * 45ms); }
[data-reveal].is-in .rw { opacity: 1; transform: none; }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 11px 20px; border-radius: var(--r-ctl);
  font-size: 15px; font-weight: 600; letter-spacing: -.005em; text-decoration: none; cursor: pointer;
  border: 1px solid transparent; white-space: nowrap;
  transition: transform .16s var(--ease), background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
}
.btn:active { transform: translateY(1px) scale(.985); }
.btn:disabled, .btn[aria-disabled='true'] { opacity: .45; cursor: not-allowed; }
/* the brand gradient; hovering slides it along, like the "v2" of the logo */
.btn-primary {
  background: var(--holo-loop) 0 50% / 200% 100%; color: var(--accent-ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
  transition: transform .16s var(--ease), background-position .7s cubic-bezier(.4, 0, .2, 1), border-color .16s ease, color .16s ease, box-shadow .2s ease;
}
.btn-primary:hover { background-position: 100% 50%; }
@media (prefers-reduced-motion: reduce) { .btn-primary { transition: none; } }
.btn-ghost { border-color: color-mix(in srgb, currentColor 36%, transparent); background: transparent; }
.btn-ghost:hover { border-color: currentColor; background: color-mix(in srgb, currentColor 7%, transparent); }
/* Over the hero video the ghost button gets a frosted backing, so it reads on any frame */
.hero-actions .btn-ghost {
  background: rgba(243, 241, 247, .14); border-color: transparent;
  backdrop-filter: blur(28px) saturate(1.4); -webkit-backdrop-filter: blur(28px) saturate(1.4);
}
.hero-actions .btn-ghost:hover { background: rgba(243, 241, 247, .22); border-color: transparent; }
/* The dive CTA is a solid black pill. The opening one keeps the glass gradient. */
.hero-beat--4 .hero-actions .btn-primary {
  background: #111; color: var(--cream); box-shadow: none;
}
.hero-beat--4 .hero-actions .btn-primary:hover { background: #1c1c1c; }
.hero-beat--4 .hero-actions .btn-primary::after { display: none; }
.btn-ico { flex: none; margin-left: -2px; transition: transform .3s var(--ease); }
.btn-call:hover .btn-ico, .btn-call:focus-visible .btn-ico { transform: rotate(-8deg); }
@media (prefers-reduced-motion: reduce) { .btn-ico { transition: none; } }
.btn-ink { background: var(--ink); color: var(--cream); }
.btn-ink:hover { background: #24222f; }
.btn-line { border-color: color-mix(in srgb, var(--ink) 28%, transparent); color: var(--ink); background: transparent; }
.btn-line:hover { border-color: var(--ink); }
.btn-sm { min-height: 40px; padding: 8px 16px; font-size: 14px; }
@media (hover: hover) and (pointer: fine) { .btn:hover { transform: translateY(-1px); } }
.link-arrow {
  position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  font-weight: 600; font-size: 15px; text-decoration: none; cursor: pointer;
  background: none; border: 0; padding: 0;
}
.link-arrow::after {
  content: ''; position: absolute; left: 0; right: 22px; bottom: 9px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: 0 50%; transition: transform .28s var(--ease);
}
.link-arrow:hover::after, .link-arrow:focus-visible::after { transform: scaleX(1); }
.link-arrow span:last-child { transition: transform .22s var(--ease); }
.link-arrow:hover span:last-child, .link-arrow:focus-visible span:last-child { transform: translateX(3px); }
.text-link, .pricing-small a, .contact-else a, .bubble.assistant a, .day2-terms a {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); transition: text-decoration-color .2s ease;
}
.pricing-small a:hover, .contact-else a:hover, .bubble.assistant a:hover { text-decoration-color: currentColor; }

/* ── Nav ── */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--nav-h);
  display: flex; align-items: center; gap: 24px;
  padding: 0 var(--gutter);
  --cap-x: max(6px, calc(var(--gutter) - 14px));
  --cap-y: 8px;
  transition: transform .45s var(--ease);
}
/* The bar's surface. Over the hero it is invisible and spans the whole width; once the hero is behind
   (.is-solid), it pulls in from the edges into a floating capsule of frosted night. */
.nav::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border: 1px solid transparent; border-radius: 0; background: rgba(13, 12, 18, 0);
  transition: inset .55s var(--ease), border-radius .55s var(--ease), background-color .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.nav.is-solid::before {
  inset: var(--cap-y) var(--cap-x); border-radius: 18px;
  background: rgba(13, 12, 18, .74); border-color: var(--rule-dark);
  backdrop-filter: blur(14px) saturate(1.25); -webkit-backdrop-filter: blur(14px) saturate(1.25);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(243, 241, 247, .06);
}
.nav.is-solid.on-light::before { background: rgba(244, 243, 247, .86); border-color: var(--rule); box-shadow: 0 10px 28px rgba(22, 21, 29, .1), inset 0 1px 0 rgba(255, 255, 255, .6); }
/* Scrolling down past the hero tucks the bar away; any scroll up brings it back (agence-nav.js). */
.nav.is-hidden { transform: translateY(calc(-100% - 6px)); }
@media (prefers-reduced-motion: reduce) { .nav, .nav::before { transition: none; } }
.nav.on-light .wordmark, .nav.on-light .nav-links a { color: var(--ink); }
.nav.on-light .nav-links a { color: var(--ink-2); }
.nav.on-light .nav-links a[aria-current], .nav.on-light .nav-links a:hover { color: var(--ink); }
.nav.on-light .nav-burger { border-color: var(--rule); color: var(--ink); }
.nav.on-light.is-open .nav-links a { color: var(--cream-2); }
.wordmark {
  display: inline-flex; align-items: center; gap: 10px; flex: none;
  color: var(--cream); text-decoration: none; line-height: 1;
  -webkit-tap-highlight-color: transparent;
}
.wordmark:focus-visible { border-radius: 8px; }
/* The name: a black Boska italic "v2", then "studio" in the sans. */
.wordmark-name { display: inline-flex; align-items: baseline; gap: 5px; }
.wm-v2 {
  padding: 0 .12em 0 .02em; margin-right: -.08em;
  font-family: var(--f-serif); font-style: italic; font-weight: 700; font-size: 34px; line-height: 1.15;
  letter-spacing: -.03em; font-variant-numeric: lining-nums;
  background: none; color: #fff; -webkit-text-fill-color: #fff;
}
.nav.on-light .wm-v2 { background: none; color: #111; -webkit-text-fill-color: #111; }
.wm-studio { font-family: var(--f-sans); font-weight: 600; font-size: 17px; letter-spacing: -.01em; opacity: .86; }
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .wm-v2 { background: none; color: inherit; -webkit-text-fill-color: currentColor; }
}
@media (forced-colors: active) {
  .wm-v2 { background: none; -webkit-text-fill-color: currentColor; }
}

/* The mascot: a glossy ink sprite on a glacier tile (steel blue to ice, the site palette since 2026-11-06).
   The tuft is one clean tapered brush tip with a sharp point (2026-11-06: the rounded curl looked childish).
   Its tuft is a brush tip dipped in the chapter colour.
   Hover or focus: it tilts, winks (one eye closes), shakes its tuft, and a band of light crosses it. Press: it squashes.
   agence-mascot.js adds the rest: eyes that follow the pointer, a blink now and then, and .is-petted. */
.mascot { width: 36px; height: 36px; flex: none; overflow: visible; transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); }
/* fill-box only on the parts that scale or rotate: on an element with a transform attribute (the tilted face)
   it would move the rotation centre and push the face off the eyes. */
.m-body, .m-tuft, .m-eye, .m-heart { transform-box: fill-box; }
.m-paint { fill: var(--chapter); transition: fill .5s ease; }
/* a band of light crosses the tile on hover, focus and petting; it snaps back unseen, outside the tile */
.m-sheen { transition: none; }
.wordmark:hover .m-sheen, .wordmark:focus-visible .m-sheen, .mascot.is-petted .m-sheen {
  transform: translateX(130px); transition: transform 1s cubic-bezier(.4, 0, .2, 1);
}
.m-body { transform-origin: 50% 100%; transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.m-tuft { transform-origin: 30% 100%; }
.m-look { transform: translate(calc(var(--ex, 0) * 1px), calc(var(--ey, 0) * 1px)); transition: transform .3s var(--ease); }
.m-eye { transform-origin: 50% 50%; transition: transform .12s ease, opacity .12s ease; }
.m-shut { fill: none; stroke: #16151d; stroke-width: 1.9; stroke-linecap: round; opacity: 0; transition: opacity .12s ease; }
.m-cheeks { opacity: 0; transition: opacity .3s ease; }
.m-heart { opacity: 0; transform-origin: 50% 50%; }
.mascot.is-blink .m-eye { transform: scaleY(.12); transition-duration: .07s; }
@media (hover: hover) {
  .wordmark:hover .mascot { transform: rotate(-7deg) scale(1.06); }
  .wordmark:hover .m-tuft { animation: m-wiggle .7s var(--ease); }
}
.wordmark:focus-visible .mascot { transform: rotate(-7deg) scale(1.06); }
/* the clin d'oeil: the right eye closes into an arc */
.wordmark:hover .m-eye--r, .wordmark:focus-visible .m-eye--r { transform: scale(.3, .1); opacity: 0; }
.wordmark:hover .m-shut--r, .wordmark:focus-visible .m-shut--r { opacity: 1; }
.wordmark:active .mascot { transform: scale(.92); transition-duration: .12s; }
.wordmark:active .m-body { transform: scale(1.08, .9); transition-duration: .12s; }
/* Petted (rubbed, or tapped three times): both eyes close happily, it blushes, hops and sends three hearts. */
.mascot.is-petted .m-eye { transform: scale(.3, .1); opacity: 0; }
.mascot.is-petted .m-shut { opacity: 1; }
.mascot.is-petted .m-cheeks { opacity: .9; }
.mascot.is-petted .m-body { animation: m-hop .8s cubic-bezier(.34, 1.56, .64, 1) 2; }
.mascot.is-petted .m-heart { animation: m-heart 1.6s var(--ease) both; }
.mascot.is-petted g:nth-child(2) > .m-heart { animation-delay: .18s; }
.mascot.is-petted g:nth-child(3) > .m-heart { animation-delay: .36s; }
@keyframes m-wiggle { 0%, 100% { transform: none; } 25% { transform: rotate(-14deg); } 55% { transform: rotate(9deg); } 80% { transform: rotate(-4deg); } }
@keyframes m-hop { 0%, 100% { transform: none; } 30% { transform: translateY(-5px) scale(.96, 1.05); } 60% { transform: scale(1.06, .94); } }
@keyframes m-heart { 0% { opacity: 0; transform: translateY(2px) scale(.3); } 25% { opacity: 1; transform: translateY(-2px) scale(1); } 100% { opacity: 0; transform: translateY(-12px) scale(.9); } }
@media (prefers-reduced-motion: reduce) {
  .mascot, .m-body, .m-look, .m-eye, .wm-v2 { transition: none; }
  .wordmark:hover .mascot, .wordmark:focus-visible .mascot, .wordmark:active .mascot, .wordmark:active .m-body { transform: none; }
  .wordmark:hover .m-tuft, .mascot.is-petted .m-body, .mascot.is-petted .m-heart { animation: none; }
  .m-gleam { display: none; }
}

.nav-links { position: relative; display: flex; gap: 2px; margin-left: auto; }
.nav-links a {
  position: relative; z-index: 1; padding: 10px 12px;
  font-size: 14px; font-weight: 500; text-decoration: none; color: var(--cream-2);
  transition: color .2s ease;
}
/* Hover: one soft pill glides from link to link (agence-nav.js moves it with --x / --w) */
.nav-pill {
  position: absolute; left: 0; top: 50%; z-index: 0; height: 38px; width: var(--w, 0px);
  border-radius: 11px; background: rgba(243, 241, 247, .09); box-shadow: inset 0 0 0 1px rgba(243, 241, 247, .06);
  transform: translate(var(--x, 0px), -50%); opacity: 0; pointer-events: none;
  transition: transform .38s var(--ease), width .38s var(--ease), opacity .2s ease;
}
.nav-pill.is-on { opacity: 1; }
.nav.on-light .nav-pill { background: rgba(22, 21, 29, .06); box-shadow: inset 0 0 0 1px rgba(22, 21, 29, .05); }
.nav.is-open .nav-pill { display: none; }
@media (prefers-reduced-motion: reduce) { .nav-pill { transition: opacity .15s ease; } }
/* Current page: a short brush stroke in the logo's multicolour, painted from the left (deeper on light grounds) */
.nav-links a::after {
  content: ''; position: absolute; left: 10px; right: 10px; bottom: 3px; height: 6px;
  background: var(--holo);
  -webkit-mask: var(--brush) center / 100% 100% no-repeat;
          mask: var(--brush) center / 100% 100% no-repeat;
  clip-path: inset(0 100% 0 0); transition: clip-path .4s var(--ease);
}
.nav.on-light:not(.is-open) .nav-links a::after { background: var(--holo-deep); }
.nav-links a:hover { color: var(--cream); }
.nav-links a[aria-current] { color: var(--cream); }
.nav-links a[aria-current]::after { clip-path: inset(0 0 0 0); }
@media (prefers-reduced-motion: reduce) { .nav-links a::after { transition: none; } }
.nav-menu-cta { display: none; }
.nav-right { display: flex; align-items: center; gap: 10px; }

/* "Start a project": a white pill. The arrow leans forward, and the button pulls slightly toward the pointer (agence-nav.js sets --mx / --my). */
.nav-cta-arrow { flex: none; margin-right: -2px; transition: transform .3s var(--ease); }
.nav-cta:hover .nav-cta-arrow, .nav-cta:focus-visible .nav-cta-arrow { transform: translateX(3px); }
.nav .nav-cta, .nav .nav-cta:hover { transform: translate(var(--mx, 0px), var(--my, 0px)); }
.nav .nav-cta:active { transform: translate(var(--mx, 0px), var(--my, 0px)) scale(.97); }
.nav .nav-cta {
  background: #fff; color: var(--ink); border-radius: 999px;
  box-shadow: 0 1px 2px rgba(22, 21, 29, .08);
  transition: transform .4s var(--ease), background-color .16s ease, box-shadow .2s ease;
}
.nav .nav-cta::after { display: none; }
.nav .nav-cta:hover { background: #fff; box-shadow: 0 8px 22px rgba(22, 21, 29, .14); }
.nav .nav-cta:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; }
.nav.on-light .nav-cta { box-shadow: inset 0 0 0 1px rgba(22, 21, 29, .14); }
.nav.on-light .nav-cta:hover { box-shadow: inset 0 0 0 1px rgba(22, 21, 29, .22), 0 8px 22px rgba(22, 21, 29, .1); }
.nav.on-light .nav-cta:focus-visible { outline-color: var(--ink); }

/* Every mint button catches the light: one band crosses it on hover, like the logo's tile */
.btn-primary { position: relative; overflow: hidden; isolation: isolate; }
.btn-primary::after {
  content: ''; position: absolute; z-index: -1; top: -20%; bottom: -20%; left: 0; width: 40%; pointer-events: none;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .55), rgba(255, 255, 255, 0));
  transform: translateX(-140%) skewX(-18deg);
}
.btn-primary:not(:disabled):hover::after, .btn-primary:focus-visible::after { transform: translateX(290%) skewX(-18deg); transition: transform .85s cubic-bezier(.4, 0, .2, 1); }
@media (prefers-reduced-motion: reduce) { .btn-primary::after { display: none; } .nav-cta-arrow { transition: none; } }

.nav-burger { display: none; }

/* Page progress, in the logo's multicolour (clipped, so the colours stay put while it grows) */
.progress {
  position: fixed; left: 0; top: 0; z-index: 60; height: 2px; width: 100%;
  background: var(--holo); clip-path: inset(0 calc(100% - var(--read, 0) * 100%) 0 0);
  pointer-events: none;
}

/* ── The rail (2026-10-18, holo pass): a slim glass capsule like the nav's, one bead per chapter. The read part
   of the thread is revealed in the logo's holo gradient (clipped, so the colours stay put while it grows), read
   chapters turn solid, and the current one stretches into a holo pill. Over light sections the glass turns light
   and the gradient deepens (--holo-deep) so it still reads on cream. ── */
.rail {
  --rail-holo: linear-gradient(180deg, var(--holo-1), var(--holo-2) 25%, var(--holo-3) 50%, var(--holo-4) 75%, var(--holo-5));
  position: fixed; right: clamp(12px, 1.8vw, 26px); top: 50%; z-index: 45;
  transform: translate(calc(100% + 40px), -50%); opacity: 0; pointer-events: none;
  padding: 8px 3px; border-radius: 999px;
  background: rgba(13, 12, 18, .42); border: 1px solid var(--rule-dark);
  backdrop-filter: blur(12px) saturate(1.25); -webkit-backdrop-filter: blur(12px) saturate(1.25);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(243, 241, 247, .06);
  transition: background-color .35s ease, border-color .35s ease, box-shadow .35s ease, transform .6s var(--ease), opacity .45s ease;
}
.rail.is-in { transform: translateY(-50%); opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .rail { transition: none; } }
.rail.on-light {
  --rail-holo: linear-gradient(180deg, #22617a, #245a85 25%, #27528e 50%, #2b4b8f 75%, #2f4588);
  background: rgba(244, 243, 247, .74); border-color: var(--rule);
  box-shadow: 0 10px 24px rgba(22, 21, 29, .08), inset 0 1px 0 rgba(255, 255, 255, .6);
}
.rail-list { position: relative; z-index: 1; display: flex; flex-direction: column; }
.rail-line {
  position: absolute; left: 50%; top: 21px; bottom: 21px; width: 2px; margin-left: -1px; border-radius: 2px;
  background: rgba(243, 241, 247, .14); transition: background-color .3s ease;
}
.rail-fill {
  position: absolute; inset: 0; border-radius: inherit; background: var(--rail-holo);
  clip-path: inset(0 0 calc(100% - var(--fill, 0) * 100%) 0);
}
.rail-dot {
  display: grid; place-items: center; width: 24px; height: 26px; padding: 0; border: 0; background: transparent; cursor: pointer;
}
.rail-dot i {
  width: 6px; height: 6px; border-radius: 999px; background: rgba(243, 241, 247, .4);
  transition: height .35s var(--ease), transform .3s var(--ease), background-color .3s ease, box-shadow .3s ease;
}
.rail-list li:has(~ li > [aria-current]) .rail-dot i { background: rgba(243, 241, 247, .92); }
.rail.on-light .rail-line { background: rgba(22, 21, 29, .12); }
.rail.on-light .rail-dot i { background: rgba(22, 21, 29, .28); }
.rail.on-light .rail-list li:has(~ li > [aria-current]) .rail-dot i { background: rgba(22, 21, 29, .72); }
.rail-dot:hover i, .rail-dot:focus-visible i { transform: scale(1.35); background: var(--cream); }
.rail.on-light .rail-dot:hover i, .rail.on-light .rail-dot:focus-visible i { background: var(--ink); }
.rail-dot:active i { transform: scale(1.1); }
.rail-dot:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 999px; }
.rail .rail-dot[aria-current] i {
  height: 18px; transform: none; background: var(--rail-holo);
  box-shadow: 0 0 10px rgba(177, 141, 243, .55), inset 0 0 0 1px rgba(255, 255, 255, .35);
}
.rail.on-light .rail-dot[aria-current] i { box-shadow: 0 2px 8px rgba(44, 85, 133, .3), inset 0 0 0 1px rgba(255, 255, 255, .25); }
.rail.is-telling .rail-dot[aria-current] i { animation: rail-pop .55s var(--ease); }
@keyframes rail-pop { 0% { transform: scale(.6); } 55% { transform: scale(1.25); } 100% { transform: scale(1); } }
.rail-label {
  position: absolute; right: calc(100% + 10px); top: 50%; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px 7px 10px; border-radius: 999px; white-space: nowrap;
  background: rgba(13, 12, 18, .74); border: 1px solid var(--rule-dark);
  backdrop-filter: blur(14px) saturate(1.25); -webkit-backdrop-filter: blur(14px) saturate(1.25);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .24);
  font-size: 13px; font-weight: 600; letter-spacing: -.005em; color: var(--cream);
  pointer-events: none;
  opacity: 0; transform: translate(6px, -50%);
  transition: opacity .25s ease, transform .3s var(--ease);
}
.rail-label::before {
  content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: conic-gradient(from 200deg, var(--holo-1), var(--holo-2), var(--holo-3), var(--holo-4), var(--holo-5), var(--holo-1));
}
.rail.on-light .rail-label { background: rgba(244, 243, 247, .9); border-color: var(--rule); color: var(--ink); box-shadow: 0 10px 22px rgba(22, 21, 29, .1); }
.rail:hover .rail-label, .rail:focus-within .rail-label, .rail.is-telling .rail-label { opacity: 1; transform: translate(0, -50%); }
body.page .rail { display: none; }

/* ── Scenes: pinned stages ── */
.pin { position: relative; height: var(--pin, 220vh); }
.pin-stage {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  overflow: hidden;
}
.stage-media { position: absolute; inset: 0; overflow: hidden; background: var(--night); }
.stage-media video, .stage-poster {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; pointer-events: none;
}
.stage-poster { z-index: 2; transition: opacity .45s ease; }
.stage-poster.is-behind { opacity: 0; }

/* ── Transitions (2026-10-17): no more gradient seams. A change of ground is always a sheet laid over the last one.
   Pinned scenes hold their stage one more viewport (.has-cover) while the next section covers them (.covers):
   data-cover="sheet" → the next section slides over, the held stage sinks back (smaller, darker, rounded);
   data-cover="dab"   → the next stage stays put and opens through a paint dab grown from the finished site.
   Sections that are not pinned lap over the previous one with a rounded edge (.sheet). ── */
main > section { position: relative; }
.pin.has-cover { height: calc(var(--pin, 220vh) + 100vh); height: calc(var(--pin, 220vh) + 100svh); }
.covers { margin-top: -100vh; margin-top: -100svh; }
/* later grounds lie on top of earlier ones: every sheet overlaps the section before it */
main > .hero { z-index: 1; } main > .same { z-index: 2; } main > .fox { z-index: 3; } main > .proof { z-index: 4; } main > .services { z-index: 5; }
main > .checks { z-index: 6; } main > .pricing { z-index: 7; } main > .founder { z-index: 7; } main > .faq { z-index: 8; } main > .contact { z-index: 9; }
.has-cover[data-cover='sheet'] > .pin-stage {
  transform: scale(calc(1 - var(--out, 0) * .07)); transform-origin: 50% 38%;
  border-radius: calc(var(--out, 0) * 30px);
}
.has-cover[data-cover='sheet'] > .pin-stage::after {
  content: ''; position: absolute; inset: 0; z-index: 30; pointer-events: none;
  background: #050409; opacity: calc(var(--out, 0) * .62);
}
/* the covering sheet: rounded top while it slides, flat once it holds the screen */
.has-cover[data-cover='sheet'] + .covers.pin > .pin-stage,
.has-cover[data-cover='sheet'] + .covers:not(.pin) {
  border-top-left-radius: calc((1 - var(--in, 1)) * 30px); border-top-right-radius: calc((1 - var(--in, 1)) * 30px);
  box-shadow: 0 -26px 60px -18px rgba(0, 0, 0, calc((1 - var(--in, 1)) * .55)), inset 0 1px 0 rgba(255, 255, 255, calc((1 - var(--in, 1)) * .14));
}
/* the dab: the stage is masked by a growing paint dab (sized and placed by drawCovers), a pigment rim runs just ahead */
:root { --dab-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M104 9c22 1 41 9 56 23 13 12 25 26 30 44 6 21 2 41-6 60-8 18-20 33-37 44-17 10-37 14-57 12-21-2-40-11-55-26C21 152 10 133 9 111c-2-22 4-44 16-62 11-17 26-30 44-36 11-3 23-5 35-4z'/%3E%3C/svg%3E"); }
.has-cover[data-cover='dab'] + .covers { background: transparent; }
.covers.is-shut > .pin-stage { visibility: hidden; }
.covers.is-opening > .pin-stage, .covers > .dab-rim {
  -webkit-mask-image: var(--dab-mask); mask-image: var(--dab-mask);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  will-change: transform, mask-size;
}
.dab-rim {
  position: absolute; left: 0; right: 0; top: 0; z-index: 0; height: 100vh; height: 100svh; pointer-events: none; visibility: hidden;
  background:
    radial-gradient(closest-side, transparent 72%, rgba(255, 255, 255, .28) 92%, transparent),
    conic-gradient(from 200deg, var(--holo-1), var(--holo-2), var(--holo-3), var(--holo-4), var(--holo-5), var(--holo-3), var(--holo-2), var(--holo-1));
}
.covers.is-opening > .dab-rim { visibility: visible; }
/* While the dab opens, its section is still rising, so the stage and the rim are fixed to the screen. (They used
   to be lifted by a transform set from script on every frame; that lagged a frame behind the scroll, so the video
   jittered and the light section behind showed as a strip at the bottom.) Once open, the section has reached the
   top and the sticky stage takes over at the same place. */
.covers.is-opening > .pin-stage, .covers.is-opening > .dab-rim { position: fixed; top: 0; left: 0; right: 0; }
.covers > .pin-stage { z-index: 1; }
/* static sheets on the home (not the sub-pages): a rounded edge laid over the end of the previous ground */
body:not(.page) main > .sheet {
  margin-top: -30px; border-radius: 30px 30px 0 0;
  box-shadow: 0 -22px 48px -26px rgba(0, 0, 0, .45);
}
body:not(.page) main > .sheet:not([data-tone='light']) { box-shadow: 0 -22px 48px -26px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(243, 241, 247, .07); }

/* ── 0. HERO: the surface, then the dive ── */
.hero { --pin: 300vh; background: var(--deep); }
.hero-media { background: var(--deep); }
.hero-media video, .hero-media .stage-poster { filter: saturate(.8) brightness(.92); }
/* The sea at rest: a seamless loop over the poster and the scrubbed clip while the page is at the top (agence-story.js heroLoop).
   Same grade as the clip, so the hand-over to the scrub is a plain cross-fade. */
.hero-media .hero-loop { z-index: 3; opacity: 0; transition: opacity .9s ease; }
.hero-media .hero-loop.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hero-media .hero-loop { display: none; } }
.hero-motes { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }
.hero-scrim {
  position: absolute; inset: 0; pointer-events: none; z-index: 3; opacity: var(--scrim, .92);
  background:
    radial-gradient(80% 70% at 8% 100%, rgba(9, 8, 13, .84), transparent 62%),
    linear-gradient(0deg, rgba(9, 8, 13, .72) 0%, rgba(9, 8, 13, 0) 38%),
    linear-gradient(180deg, rgba(9, 8, 13, .5) 0%, rgba(9, 8, 13, 0) 16%);
}
.hero-scrim::after { content: ''; position: absolute; inset: 0; background: var(--deep); opacity: calc(var(--deep, 0) * .28); }
.hero-beat {
  position: absolute; left: var(--gutter); right: var(--gutter); z-index: 5;
  bottom: clamp(36px, 9vh, 104px);
  max-width: 920px;
  will-change: opacity, transform;
}
.hero h1 { font-size: clamp(42px, 6.6vw, 104px); color: var(--cream); max-width: 12ch; line-height: .9; }
.hero-beat--1 { bottom: clamp(84px, 16vh, 176px); }
/* The proof strip under the hero buttons (2026-11-06 layout): one framed glass bar, ruled into cells. Each cell is a
   button with a line icon in a small square and its objective beside it; the last cell is the entry price. Hover, tap or
   Enter opens the cell's second level in the panel that floats under the bar (the headline above never moves). */
.hero-proof { margin-top: 26px; min-height: 66px; } /* reserved so the bottom-anchored headline does not jump when the strip is drawn */
.hp-wrap { position: relative; width: fit-content; max-width: 100%; }
.hp-list {
  display: flex; margin: 0; padding: 0; list-style: none; overflow: hidden;
  border: 1px solid rgba(243, 241, 247, .14); border-radius: 14px; background: rgba(13, 12, 18, .36);
  -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1);
}
.hp-list li { position: relative; min-width: 0; }
.hp-list li + li::before {
  content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 1px; z-index: 1;
  background: rgba(243, 241, 247, .14); transform-origin: top;
}
.hp-item {
  position: relative; display: flex; align-items: center; gap: 12px; width: 100%; margin: 0; padding: 13px 22px 13px 14px;
  border: 0; border-radius: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: background-color .25s ease, opacity .35s ease;
}
.hp-item:hover, .hp-item[aria-expanded='true'] { background: rgba(243, 241, 247, .06); }
.hp-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.hp-mark {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px;
  border: 1px solid rgba(243, 241, 247, .16); background: rgba(243, 241, 247, .04); color: var(--cream-2);
  transition: color .25s ease, border-color .25s ease, background-color .25s ease;
}
.hp-mark svg { display: block; width: 17px; height: 17px; }
.hp-item:hover .hp-mark, .hp-item[aria-expanded='true'] .hp-mark { color: var(--cream); border-color: rgba(243, 241, 247, .3); background: rgba(243, 241, 247, .08); }
.hp-item strong {
  display: block; font-size: clamp(14.5px, 1.08vw, 16px); font-weight: 600; letter-spacing: -.01em; line-height: 1.2;
  color: var(--cream); white-space: nowrap;
}
.hp-from .hp-item strong { font-variant-numeric: tabular-nums; }
.hp-from .hp-item strong small { font-size: inherit; font-weight: 500; color: var(--cream-2); }
.hp-bar { position: absolute; left: 14px; right: 22px; bottom: 0; height: 1px; background: var(--cream); opacity: .6; transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.hp-item:hover .hp-bar, .hp-item[aria-expanded='true'] .hp-bar { transform: scaleX(1); }
.hero-proof.is-open .hp-item[aria-expanded='false'] { opacity: .6; }
/* the second level */
.hp-panel {
  position: absolute; left: 0; right: 0; top: calc(100% + 12px); z-index: 7; display: grid; box-sizing: border-box; padding: 14px 18px 15px;
  border: 1px solid rgba(243, 241, 247, .16); border-radius: 16px; background: rgba(13, 12, 18, .8);
  -webkit-backdrop-filter: blur(16px) saturate(1.15); backdrop-filter: blur(16px) saturate(1.15);
  box-shadow: 0 28px 64px -26px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .06); text-shadow: none;
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(8px) scale(.985); transform-origin: var(--ax, 24px) 0;
  transition: opacity .28s ease, transform .45s var(--ease), visibility 0s linear .45s;
}
.hero-proof.is-open .hp-panel { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: 0s; }
.hp-panel::before {
  content: ''; position: absolute; top: -6px; left: var(--ax, 24px); width: 11px; height: 11px; margin-left: -5px; rotate: 45deg;
  border-top: 1px solid rgba(243, 241, 247, .16); border-left: 1px solid rgba(243, 241, 247, .16); background: rgba(13, 12, 18, .94);
  transition: left .5s var(--ease);
}
.hpd { grid-area: 1 / 1; display: grid; align-content: start; gap: 8px; opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity .25s ease, transform .4s var(--ease); }
.hpd.is-on { opacity: 1; transform: none; pointer-events: auto; transition-delay: .05s; }
.hpd p, .hpd dl { margin: 0; }
.hpd-kick { font-size: 13px; color: var(--cream-3); }
.hpd-kick b { font-weight: 650; color: var(--cream); }
.hpd-do { max-width: 56ch; font-size: 14.5px; line-height: 1.5; color: var(--cream-2); }
.hpd-src { font-family: var(--f-mono); font-size: 11px; letter-spacing: .02em; color: var(--cream-3); }
.hpd-foot { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 2px; }
.hpd-foot .link-arrow { color: var(--cream); font-size: 13.5px; }
.hpd-facts { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 6px 26px; }
.hpd-facts dt { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--cream-3); }
.hpd-facts dd { margin: 2px 0 0; font-size: 14.5px; font-weight: 650; color: var(--cream); }
.hp-note { margin: 12px 0 0; max-width: 62ch; font-size: 11.5px; line-height: 1.45; color: var(--cream-3); text-shadow: 0 1px 12px rgba(5, 4, 9, .55); }
.hp-note span { color: var(--cream-2); }
@media (prefers-reduced-motion: no-preference) {
  .hp-list { animation: hp-fade .7s ease .8s backwards; }
  .hp-item { animation: hp-in .8s var(--ease) backwards; animation-delay: calc(.9s + var(--i, 0) * .1s); }
  .hp-list li + li::before { animation: hp-rule .8s var(--ease) backwards; animation-delay: calc(1s + var(--i, 0) * .1s); }
  .hp-note { animation: hp-fade .8s ease 1.6s backwards; }
}
@keyframes hp-in { from { opacity: 0; transform: translateY(8px); filter: blur(4px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes hp-rule { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes hp-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .hp-item, .hp-mark, .hp-bar, .hp-panel, .hp-panel::before, .hpd { transition: none; }
}
/* the strip adds height under the headline, which is anchored at the bottom: on short screens the headline steps down a size */
@media (min-width: 721px) and (max-height: 860px) {
  .hero h1 { font-size: clamp(42px, min(6.6vw, 10.5vh), 104px); }
  .hero-beat--1 { bottom: clamp(56px, 9vh, 120px); }
  .hero-proof { margin-top: 18px; }
  .hero-beat--1 .hero-brands { margin-top: 20px; }
}
/* Narrow screens: the bar becomes a 2 x 2 grid, ruled between the columns and the rows. */
@media (max-width: 900px) {
  .hero-proof { min-height: 124px; }
  .hp-wrap { width: 100%; max-width: 560px; }
  .hp-list { display: grid; grid-template-columns: 1fr 1fr; }
  .hp-list li:nth-child(odd)::before { display: none; }
  .hp-list li:nth-child(n + 3) { border-top: 1px solid rgba(243, 241, 247, .12); }
  .hp-item strong { white-space: normal; }
}
@media (max-width: 560px) {
  .hero-proof { margin-top: 20px; min-height: 116px; }
  .hp-item { gap: 10px; padding: 11px 12px; }
  .hp-mark { width: 30px; height: 30px; border-radius: 8px; }
  .hp-mark svg { width: 16px; height: 16px; }
  .hp-item strong { font-size: 13.5px; }
  .hp-bar { left: 12px; right: 12px; }
  .hp-panel { padding: 12px 14px 13px; }
  .hpd-do { font-size: 14px; }
  .hpd-facts { grid-template-columns: repeat(2, auto); }
}
/* The coloured words are lit glass: a translucent aurora drifts through the letters, a fine bright edge
   catches the light, and the shadow falls softly below instead of glowing all round. */
.hero h1 em, .beat-title em, .contact .h2 em,
.hero h1.is-split em .rw, .beat-title.is-split em .rw, .contact .h2.is-split em .rw {
  color: var(--holo-1);
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, 0) 46%, rgba(255, 255, 255, 0) 62%, rgba(255, 255, 255, .1) 100%),
    linear-gradient(112deg, rgba(91, 103, 233, .92) 0%, rgba(163, 191, 220, .92) 16%, rgba(125, 128, 244, .9) 28%, rgba(163, 191, 220, .92) 42%, rgba(186, 122, 226, .92) 50%, rgba(184, 208, 227, .92) 62%, rgba(207, 223, 233, .92) 76%, rgba(230, 237, 243, .92) 88%, rgba(91, 103, 233, .92) 100%);
  background-size: 100% 100%, 260% 200%;
  background-position: 0 0, 0% 80%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  -webkit-text-stroke: .9px rgba(255, 255, 255, .42);
  filter: drop-shadow(0 -1px 0 rgba(255, 255, 255, .34)) drop-shadow(0 1px 0 rgba(230, 225, 250, .16)) drop-shadow(0 10px 22px rgba(12, 6, 28, .55)) drop-shadow(0 0 18px rgba(177, 141, 243, .22));
  animation: aurora-ink 14s ease-in-out infinite, aurora-breathe 9s ease-in-out infinite;
}
/* The word reveal splits these ems into inline-block words (.rw) that move on their own. background-clip:text on
   the em then paints the glass apart from the words, which doubled "see first." on the home contact. When split,
   the em carries nothing and each word is its own piece of glass. */
.hero h1.is-split em, .beat-title.is-split em, .contact .h2.is-split em {
  background: none; -webkit-text-fill-color: currentColor; -webkit-text-stroke: 0; filter: none; animation: none;
}
/* The last line keeps the title's own face (Cabinet Grotesk, upright), a step bolder. It is drawn crisp: solid
   aurora colours inside the letters (no see-through glass, no white veil, no outline, no halo), and one low shadow
   so it still reads over the video. The colours drift slowly (aurora-ink-1, a single layer). */
.hero h1 em {
  width: fit-content; white-space: nowrap; line-height: .92; /* the box hugs the words, so the entrance wipe ends with them */
  font-family: var(--f-sans); font-style: normal; font-weight: 700; font-size: 1em; letter-spacing: -.022em;
  background-image: linear-gradient(112deg, #6585bd 0%, #6f8fc4 16%, #7a99c8 28%, #85a3cc 42%, #92aed2 50%, #9fb9d7 62%, #bcd0e2 76%, #dbe6ee 88%, #6585bd 100%);
  background-size: 260% 200%; background-position: 0% 80%;
  -webkit-text-stroke: 0;
  filter: drop-shadow(0 3px 12px rgba(12, 6, 28, .45));
  animation: aurora-ink-1 14s ease-in-out infinite;
}
@keyframes aurora-ink-1 { 0% { background-position: 0% 90%; } 45% { background-position: 100% 10%; } 100% { background-position: 0% 90%; } }
/* Machine-translated languages can run longer than "customers notice": let that line wrap. */
html.i18n-mt .hero h1 em { white-space: normal; }
/* Entrance of the last line: the glass is wiped in from the left while the words rise into place. It starts once
   the page's copy is in (.i18n-pending gone), so French and translated visitors see it too, in their words. */
@media (prefers-reduced-motion: no-preference) {
  html:not(.i18n-pending) .hero h1 em {
    animation: aurora-ink-1 14s ease-in-out infinite, hero-em-in 1.3s cubic-bezier(.2, .75, .15, 1) .35s backwards;
  }
}
@keyframes hero-em-in {
  0% { clip-path: inset(-25% 100% -25% -6%); transform: translateY(.28em) skewX(-6deg); opacity: .2; }
  45% { opacity: 1; }
  100% { clip-path: inset(-25% -8% -25% -6%); transform: none; opacity: 1; }
}
.hero .beat-title em { background-position: 0 0, 100% 10%; animation-delay: -6s, -3s; }
/* The italic line of a later beat uses the same transparent face as the first phrase ("customers notice"):
   upright, see-through, a fine light edge. The serif italic stays everywhere else. */
.hero .beat-title em,
.hero .beat-title.is-split em,
.hero .beat-title.is-split em .rw {
  font-family: 'Space Grotesk', var(--f-sans);
  font-style: normal;
  font-weight: 700;
  font-size: 1em;
  letter-spacing: -.012em;
  line-height: .92;
  color: transparent;
  background: none;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: .6px rgba(243, 241, 247, .72);
  filter: none;
  animation: none;
}
.hero .beat-title em.has-liquid-text,
.hero .beat-title.is-split em.has-liquid-text {
  -webkit-text-stroke: 0;
}
@keyframes aurora-ink { 0% { background-position: 0 0, 0% 90%; } 45% { background-position: 0 0, 100% 10%; } 100% { background-position: 0 0, 0% 90%; } }
@keyframes aurora-breathe {
  0%, 100% { filter: drop-shadow(0 -1px 0 rgba(255, 255, 255, .34)) drop-shadow(0 1px 0 rgba(230, 225, 250, .16)) drop-shadow(0 10px 22px rgba(12, 6, 28, .55)) drop-shadow(0 0 18px rgba(177, 141, 243, .22)); }
  50% { filter: drop-shadow(0 -1px 0 rgba(255, 255, 255, .46)) drop-shadow(0 1px 0 rgba(230, 225, 250, .22)) drop-shadow(0 12px 26px rgba(12, 6, 28, .5)) drop-shadow(0 0 26px rgba(177, 141, 243, .3)); }
}

/* ── Water lettering + hero wave (2026-10-25) ──
   The last line of the headline is liquid glass: simple-liquid-text refracts the live whale clip through the glyphs
   (ui/effects/src/hero-liquid*.ts, bundled locally). html.has-liquid is set only while that glass is painting, so the
   aurora gradient above stays for reduced motion, no WebGL, weak devices, machine-translated wraps and while loading. */
html.has-liquid .hero h1 em { background: none; filter: none; }
/* The glass lettering is set in Space Grotesk 700 (self-hosted, OFL); only this em, the rest of the h1 keeps Cabinet Grotesk. */
.hero h1 em { font-family: 'Space Grotesk', var(--f-sans); font-weight: 700; letter-spacing: -.012em; }
.hero h1 em .hl-host { display: inline; }
.hero h1 em .slgf-text { display: inline; }
.hero h1 em .slgf-letters { line-height: 1.24; }
.hero h1 em .slgf-layout { margin: -.16em 0; }
html.has-liquid .hero h1 em .slgf-layout { animation: hl-in .7s ease both; }
@keyframes hl-in { from { opacity: 0; } to { opacity: 1; } }
/* A barely-there swell along the bottom edge of the first screen: two translucent crests drifting on the
   compositor (transform only), behind the copy and logos, never catching a pointer. */
.hero-wave { position: absolute; left: 0; right: 0; bottom: 0; height: clamp(44px, 7vh, 84px); z-index: 4; pointer-events: none; overflow: hidden; contain: strict; }
.hero-wave .hw { position: absolute; left: 0; bottom: 0; width: 200%; height: 100%; display: block; will-change: transform; animation: hw-drift 58s linear infinite; }
.hero-wave .hw-b { animation-duration: 37s; animation-direction: reverse; opacity: .8; }
.hero-wave.is-off .hw { animation-play-state: paused; }
.hw-fill { fill: rgba(190, 232, 242, .05); }
.hw-b .hw-fill { fill: rgba(190, 232, 242, .035); }
.hw-crest { fill: none; stroke: rgba(214, 242, 250, .16); stroke-width: 1; vector-effect: non-scaling-stroke; }
@keyframes hw-drift { to { transform: translate3d(-50%, 0, 0); } }
@media (prefers-reduced-motion: reduce) { .hero-wave .hw { animation: none; } }

.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.beat-line { font-size: clamp(32px, 4.4vw, 68px); color: var(--cream); max-width: 15ch; }

/* ── 2. THE PAINTER: the fox arrives with the palette the whole page paints from ── */
.fox { --pin: 230vh; background: transparent; --c: var(--p-moss); }
.fox .pin-stage { background: var(--night); }
.fox-beat--1 { bottom: auto; top: calc(var(--nav-h) + clamp(28px, 9vh, 96px)); }
.fox-beat--1 .beat-line { text-shadow: 0 2px 24px rgba(5, 4, 9, .55); }
.fox-beat--2 .beat-sub { text-shadow: 0 1px 14px rgba(5, 4, 9, .7); }
.fox-scrim::after { display: none; }
.beat-title { font-size: clamp(36px, 5vw, 78px); color: var(--cream); max-width: 14ch; }
.beat-sub { margin-top: 18px; color: var(--cream-2); font-size: clamp(16px, 1.3vw, 18px); max-width: 40ch; }
/* Hero beat 3: six of the 12 checks under the line (2026-11-06). Each row rises after the one before it as the beat comes
   in (--b3 from drawHero, 0 to 1); at rest (reduced motion, no --b3) everything is in place. */
.beat-checks {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; max-width: 760px; margin: 26px 0 0; padding: 0;
  list-style: none; text-shadow: 0 1px 12px rgba(5, 4, 9, .55);
}
.beat-checks li {
  --k: clamp(0, calc((var(--b3, 1) - var(--i, 0) * .1) * 2.5), 1);
  display: flex; align-items: baseline; gap: 12px; min-width: 0; padding: 11px 0 10px; border-top: 1px solid rgba(243, 241, 247, .18);
  opacity: var(--k); transform: translateY(calc((1 - var(--k)) * 8px));
}
.bc-n { flex: none; font-family: var(--f-mono); font-size: 11px; letter-spacing: .02em; color: var(--cream-3); font-variant-numeric: tabular-nums; }
.bc-t { font-size: 15px; font-weight: 600; letter-spacing: -.005em; line-height: 1.25; color: var(--cream); }
.beat-checks-foot {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; margin: 12px 0 0; font-size: 13.5px; color: var(--cream-2);
  text-shadow: 0 1px 12px rgba(5, 4, 9, .55); opacity: clamp(0, calc((var(--b3, 1) - .6) * 3), 1);
}
.beat-checks-foot .link-arrow { color: var(--cream); }
@media (max-width: 720px) {
  .beat-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; margin-top: 18px; max-width: calc(100% - 64px); }
  .beat-checks li { padding: 9px 0 8px; gap: 8px; }
  .beat-checks li:nth-child(n + 5) { display: none; }
  .bc-t { font-size: 13.5px; }
  .beat-checks-foot { font-size: 12.5px; max-width: calc(100% - 64px); }
}
/* The scroll cue at the end of the hero: a hairline with a light falling through it, under a short word. Decorative; it fades
   in with the last beat (--cue from drawHero) and is gone under reduced motion. */
.hero-cue {
  position: absolute; left: 50%; bottom: clamp(18px, 3.4vh, 34px); z-index: 6; display: grid; justify-items: center; gap: 10px;
  pointer-events: none; color: var(--cream-2); font-size: 12px; font-weight: 500; letter-spacing: .06em;
  text-shadow: 0 1px 10px rgba(5, 4, 9, .6);
  opacity: var(--cue, 0); transform: translate(-50%, calc((1 - var(--cue, 0)) * 10px));
}
.hero-cue i { position: relative; display: block; width: 1px; height: 46px; overflow: hidden; background: rgba(243, 241, 247, .22); }
.hero-cue i::after {
  content: ''; position: absolute; left: 0; top: 0; width: 1px; height: 40%; background: var(--cream);
  transform: translateY(-100%); animation: cue-drop 1.9s cubic-bezier(.6, 0, .3, 1) infinite;
}
@keyframes cue-drop { to { transform: translateY(250%); } }
@media (max-width: 720px) { .hero-cue span { display: none; } .hero-cue { bottom: 6px; } .hero-cue i { height: 18px; } }
@media (prefers-reduced-motion: reduce) { .hero-cue { display: none; } }
.word { display: inline-block; opacity: var(--w, 1); transform: translateY(calc((1 - var(--w, 1)) * .35em)); }

/* ── 1. THE FOREST OF LOOKALIKES ── */
/* Its own ground, nothing like the water: a flat pale sheet, no dot grid. */
.same { --pin: 200vh; background: transparent; color: var(--ink); --c: var(--p-moss); }
.same .pin-stage {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: center; gap: clamp(28px, 4vw, 64px);
  padding: calc(var(--nav-h) + 24px) var(--gutter) 40px;
  background: #edecf2;
}
.same .pin-stage > * { position: relative; z-index: 1; }
.same .lede { color: var(--ink-2); }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 16px); align-content: center; position: relative; }
/* Tiles are miniatures of other people's sites: their own type, radii and indigo, scaled with container units. */
.tile {
  --g1: hsl(var(--h, 262) 84% 62%); --g2: hsl(calc(var(--h, 262) + 38) 90% 58%); --btn: hsl(calc(var(--h, 262) - 10) 78% 58%);
  position: relative; aspect-ratio: 16 / 11; border-radius: 8px; overflow: hidden; container-type: inline-size;
  background: #ffffff; border: 1px solid rgba(22, 21, 29, .1);
  box-shadow: var(--e1);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; color: #141225; letter-spacing: 0; line-height: 1.25;
  opacity: calc(1 - var(--fog, 0) * .62);
  transform: translateY(calc(var(--fog, 0) * 6px)) scale(calc(1 - var(--fog, 0) * .04));
}
.tile::after { content: ''; position: absolute; inset: 0; background: var(--mist); opacity: calc(var(--fog, 0) * .55); pointer-events: none; }
.tile { font-family: var(--tf, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif); --hf: var(--tf, system-ui, sans-serif); --hw: 800; --btn-bg: linear-gradient(90deg, var(--g1), var(--g2)); --btn-fg: #fff; --btn-r: 999px; }
.t-nav { display: flex; align-items: center; gap: 2.4cqw; padding: 2.2cqw 3.4cqw; font-size: 2cqw; }
.t-nav b { display: inline-flex; align-items: center; gap: 1.2cqw; font-family: var(--hf); font-weight: var(--hw); font-size: 2.6cqw; letter-spacing: -.02em; }
.t-logo { width: 3.2cqw; height: 3.2cqw; border-radius: .9cqw; background: linear-gradient(135deg, var(--g1), var(--g2)); }
.t-nav span { display: flex; gap: 2.4cqw; margin-left: auto; color: #6b6a7c; }
.t-nav u { text-decoration: none; font-weight: 600; color: #2b2a3d; }
.t-nav em, .t-cta em { font-style: normal; font-weight: 600; color: var(--btn-fg); background: var(--btn-bg); border-radius: var(--btn-r); padding: 1.1cqw 2.6cqw; white-space: nowrap; box-shadow: 0 .8cqw 2.4cqw color-mix(in srgb, var(--g1) 30%, transparent); }
.t-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 42%); gap: 3cqw; align-items: center; padding: 1.6cqw 3.4cqw 1cqw; }
.t-copy small { display: inline-block; font-size: 1.8cqw; font-weight: 600; color: var(--g1); background: color-mix(in srgb, var(--g1) 12%, #fff); border: 1px solid color-mix(in srgb, var(--g1) 25%, #fff); border-radius: 999px; padding: .5cqw 1.8cqw; margin-bottom: 1.4cqw; }
.t-copy h4 { font-family: var(--hf); font-size: 4.3cqw; font-weight: var(--hw); letter-spacing: -.025em; line-height: 1.06; margin: 0 0 1.2cqw; color: #141225; }
.t-copy h4 span { background: linear-gradient(90deg, var(--g1), var(--g2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.t-copy p { font-size: 2.1cqw; color: #5e5d70; margin: 0 0 1.8cqw; max-width: 36ch; }
.t-cta { display: flex; align-items: center; gap: 1.8cqw; font-size: 2cqw; }
.t-cta i { font-style: normal; font-weight: 600; color: #2b2a3d; border: 1px solid #e3e2ec; border-radius: var(--btn-r); padding: 1cqw 2.4cqw; white-space: nowrap; }
.t-social { display: flex; align-items: center; gap: 1.4cqw; margin-top: 2cqw; font-size: 1.8cqw; color: #6b6a7c; }
.t-social b { font-weight: 500; }
.t-avs { display: flex; padding-left: 1cqw; }
.t-avs i { width: 3cqw; height: 3cqw; border-radius: 50%; border: 1px solid #fff; margin-left: -1cqw; background: hsl(var(--h) 55% 72%); }
.t-avs i:nth-child(2) { background: hsl(calc(var(--h) + 60) 50% 68%); } .t-avs i:nth-child(3) { background: hsl(calc(var(--h) + 140) 45% 66%); } .t-avs i:nth-child(4) { background: hsl(calc(var(--h) - 40) 55% 70%); }
.t-stars { color: #f5a524; font-size: 1.9cqw; letter-spacing: -.06em; }
/* Dashboard mock (SaaS). */
.t-art { position: relative; aspect-ratio: 5 / 4; }
.t-blob { position: absolute; right: -14%; top: -12%; width: 78%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--g2) 55%, transparent), transparent 68%); filter: blur(3cqw); }
.t-app { position: absolute; inset: 8% 0 0 6%; display: grid; grid-template-columns: 22% minmax(0, 1fr); background: #fff; border: 1px solid #e9e8f1; border-right: 0; border-radius: 2cqw 0 0 2cqw; box-shadow: 0 2cqw 6cqw rgba(30, 20, 80, .18); overflow: hidden; }
.t-side { background: #f6f5fb; padding: 2cqw 1.4cqw; display: grid; gap: 1.5cqw; align-content: start; }
.t-side i { height: 1.4cqw; border-radius: 1cqw; background: #dedcea; }
.t-side i:first-child { background: var(--g1); width: 70%; }
.t-main { padding: 2cqw; display: grid; gap: 1.6cqw; align-content: start; }
.t-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2cqw; }
.t-kpis > div { border: 1px solid #ecebf3; border-radius: 1.4cqw; padding: 1cqw 1.1cqw; }
.t-kpis b { display: block; font-size: 2cqw; font-weight: 800; letter-spacing: -.02em; }
.t-kpis s { text-decoration: none; font-size: 1.4cqw; color: #1fa971; font-weight: 600; }
.t-chart { display: flex; align-items: flex-end; gap: .9cqw; height: 11cqw; }
.t-chart i { flex: 1; height: calc(var(--v, .5) * 100%); border-radius: .8cqw .8cqw 0 0; background: linear-gradient(180deg, var(--g1), var(--g2)); opacity: .85; }
/* Below the hero. */
.t-logos { display: flex; justify-content: space-between; padding: 1.6cqw 6cqw 0; font-size: 1.8cqw; font-weight: 800; color: #b9b8c7; letter-spacing: .02em; text-transform: uppercase; }
.t-feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2cqw; padding: 2cqw 3.4cqw 0; }
.t-feats > div { border: 1px solid #ececf2; border-radius: 2cqw; padding: 2cqw; background: #fff; }
.t-ico { position: relative; display: block; width: 4.2cqw; height: 4.2cqw; border-radius: 1.2cqw; background: linear-gradient(135deg, var(--g1), var(--g2)); margin-bottom: 1.4cqw; }
.t-ico::after { content: ''; position: absolute; inset: 30%; border-radius: 30%; background: rgba(255, 255, 255, .9); }
.t-feats b { display: block; font-size: 2.1cqw; font-weight: 700; margin-bottom: 1cqw; }
.t-feats s { display: block; height: .9cqw; border-radius: 1cqw; background: #e6e6ee; margin-top: .9cqw; text-decoration: none; }
.t-feats s + s { width: 70%; }
.t-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 2.2cqw 3.4cqw 2.6cqw; text-align: center; }
.t-stats b { display: block; font-family: var(--hf); font-size: 3.2cqw; font-weight: var(--hw); letter-spacing: -.03em; background: linear-gradient(90deg, var(--g1), var(--g2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.t-stats span { font-size: 1.7cqw; color: #8a899a; }
.t-quote { margin: 2cqw 3.4cqw 0; padding: 2.2cqw 2.6cqw; border-radius: 2cqw; background: #f7f6fb; font-size: 2.1cqw; line-height: 1.35; color: #2b2a3d; }
.t-quote p { margin: 0 0 1.2cqw; font-family: var(--hf); font-weight: 600; }
.t-quote span { display: flex; align-items: center; gap: 1.2cqw; font-size: 1.8cqw; color: #6b6a7c; }
.t-quote span i { width: 3cqw; height: 3cqw; border-radius: 50%; background: hsl(calc(var(--h) + 30) 50% 68%); }
.t-perks { display: flex; justify-content: center; gap: 4cqw; padding: 1.4cqw 3.4cqw 0; font-size: 1.8cqw; font-weight: 600; color: #4b4a5c; }
/* Kind: SaaS dashboard (indigo, Inter-like, heavy). */
.k-dash { --h: 262; }
/* Kind: shop (coral, serif headline, black pill, product cards). */
.k-shop { --hf: Georgia, 'Times New Roman', serif; --hw: 500; --btn-bg: #1a1a1a; --btn-fg: #fff; --btn-r: 999px; background: #fffaf6; color: #2a1f1a; }
.k-shop .t-nav b { font-family: var(--hf); font-weight: 600; letter-spacing: .02em; }
.k-shop .t-logo { border-radius: 50%; }
.k-shop .t-nav span { color: #7a6a62; }
.k-shop .t-cart { font-weight: 600; }
.k-shop .t-copy h4 { color: #2a1f1a; letter-spacing: -.01em; }
.k-shop .t-copy h4 span { background: none; -webkit-text-fill-color: #b9552d; color: #b9552d; font-style: italic; }
.k-shop .t-copy small { color: #b9552d; background: #fbe9df; border-color: #f3d2c1; }
.k-shop .t-cta i { border-color: #e9d9cf; color: #2a1f1a; }
.k-shop .t-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 50%); }
.k-shop .t-feats > div { background: #fff; border-color: #efe3da; }
.k-shop .t-ico { background: #f3d2c1; } .t-shop .t-ico::after { background: #b9552d; }
.k-shop { --g1: #d9733f; --g2: #e9a07a; }
.k-shop .t-avs i { background: #e7c7b6; } .t-shop .t-avs i:nth-child(2) { background: #cfa48f; } .t-shop .t-avs i:nth-child(3) { background: #b98b76; } .t-shop .t-avs i:nth-child(4) { background: #e3b7a2; }
.k-shop .t-stars { color: #d9733f; }
.k-shop .t-perks { color: #6f5c52; }
.k-shop .t-logos { display: none; }
.k-shop > .t-feats { padding-top: 1.6cqw; }
.k-shop .t-social { margin-top: 1.4cqw; }
.k-shop .t-copy p { color: #6f5c52; }
.k-shop .t-prod { background: #fff; border: 1px solid #efe3da; border-radius: 1.8cqw; padding: 1.2cqw; font-size: 1.8cqw; display: grid; gap: .5cqw; }
.k-shop .t-prod b { font-family: var(--hf); font-weight: 500; font-size: 2cqw; margin-top: .6cqw; }
.k-shop .t-prod span { color: #7a6a62; }
.k-shop .t-prod em { font-style: normal; font-weight: 600; font-size: 1.6cqw; color: #1a1a1a; border: 1px solid #1a1a1a; border-radius: 999px; padding: .5cqw 1.4cqw; justify-self: start; margin-top: .4cqw; }
.k-shop .t-img { display: block; aspect-ratio: 4 / 5; border-radius: 1.2cqw; background: linear-gradient(160deg, #f1dccd, #e2b9a1); position: relative; overflow: hidden; }
.k-shop .t-img::after { content: ''; position: absolute; left: 22%; right: 22%; top: 18%; bottom: 14%; border-radius: 40% 40% 32% 32% / 30% 30% 50% 50%; background: linear-gradient(180deg, #f8efe8, #d7b7a4); box-shadow: inset 0 -1cqw 2cqw rgba(120, 70, 40, .18); }
.k-shop .t-img.p1 { background: linear-gradient(160deg, #e8e4da, #c9c2b2); } .t-shop .t-img.p1::after { border-radius: 10% 10% 14% 14%; background: linear-gradient(180deg, #f2efe8, #bdb5a3); left: 24%; right: 24%; top: 26%; }
.k-shop .t-img.p2 { background: linear-gradient(160deg, #e5e0ef, #c0b6d6); } .t-shop .t-img.p2::after { border-radius: 50% 50% 46% 46% / 60% 60% 40% 40%; background: linear-gradient(180deg, #eee9f6, #a79bc0); top: 24%; bottom: 30%; }
.k-shop .t-shelf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4cqw; }
/* Kind: chatbot (teal, rounded type, centred hero with the chat window below). */
.k-chat { --hf: 'Trebuchet MS', 'Segoe UI', sans-serif; --hw: 700; --btn-bg: #0f8f7e; --btn-fg: #fff; --btn-r: 1.2cqw; --g1: #0f8f7e; --g2: #37c7a6; background: #f3fbf9; color: #10302b; }
.k-chat .t-nav span { color: #4f7a73; }
.k-chat .t-copy h4 { color: #10302b; }
.k-chat .t-copy h4 span { background: none; -webkit-text-fill-color: #0f8f7e; color: #0f8f7e; }
.k-chat .t-copy small { color: #0f8f7e; background: #dff5ef; border-color: #bfe9de; }
.k-chat .t-copy p { color: #4f7a73; }
.k-chat .t-cta i { border-color: #cfe6e0; color: #10302b; }
.k-chat .t-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 46%); }
.k-chat .t-convo { background: #fff; border: 1px solid #d6ebe6; border-radius: 2cqw; box-shadow: 0 2cqw 5cqw rgba(15, 143, 126, .16); overflow: hidden; font-size: 1.8cqw; }
.k-chat .t-chat-h { display: flex; align-items: center; gap: 1.2cqw; padding: 1.4cqw 1.8cqw; border-bottom: 1px solid #e6f2ef; }
.k-chat .t-chat-h i { width: 3cqw; height: 3cqw; border-radius: 50%; background: linear-gradient(135deg, #0f8f7e, #37c7a6); }
.k-chat .t-chat-h b { font-weight: 700; } .t-chat .t-chat-h s { text-decoration: none; margin-left: auto; color: #2fae63; font-size: 1.5cqw; }
.k-chat .t-chat-h s::before { content: ''; display: inline-block; width: 1cqw; height: 1cqw; border-radius: 50%; background: #2fae63; margin-right: .6cqw; }
.k-chat .t-msgs { display: grid; gap: 1cqw; padding: 1.6cqw 1.8cqw; }
.k-chat .t-msgs p { margin: 0; max-width: 78%; padding: 1cqw 1.5cqw; border-radius: 1.6cqw; line-height: 1.3; }
.k-chat .t-msgs .m0 { background: #eef5f3; color: #10302b; border-bottom-left-radius: .4cqw; }
.k-chat .t-msgs .m1 { background: #0f8f7e; color: #fff; justify-self: end; border-bottom-right-radius: .4cqw; }
.k-chat .typing { display: flex; gap: .6cqw; padding: 1.2cqw 1.5cqw; }
.k-chat .typing i { width: 1cqw; height: 1cqw; border-radius: 50%; background: #9bbdb6; }
.k-chat .t-input { display: flex; align-items: center; gap: 1cqw; margin: 0 1.8cqw 1.6cqw; padding: 1cqw 1.4cqw; border: 1px solid #d6ebe6; border-radius: 1.4cqw; color: #8aa9a3; }
.k-chat .t-input i { margin-left: auto; width: 3cqw; height: 3cqw; border-radius: .9cqw; background: #0f8f7e; }
.k-chat .t-feats > div { border-color: #d6ebe6; } .t-chat .t-ico { background: #dff5ef; } .t-chat .t-ico::after { background: #0f8f7e; }
.k-chat .t-stats b { background: none; -webkit-text-fill-color: #0f8f7e; color: #0f8f7e; }
/* Kind: analytics (dark navy, cyan, mono numbers, line chart). */
.k-chart { --hf: system-ui, -apple-system, 'Segoe UI', sans-serif; --hw: 700; --g1: #2f8cff; --g2: #4fd1e5; --btn-bg: #fff; --btn-fg: #0b1220; --btn-r: 1cqw; background: #0b1220; color: #e8eefc; }
.k-chart .t-nav span { color: #8a97b8; } .t-chart .t-nav u, .k-chart .t-cta i { color: #e8eefc; }
.k-chart .t-logo { border-radius: 50%; }
.k-chart .t-copy small { color: #7fd4ff; background: #122238; border-color: #1f3a5a; }
.k-chart .t-copy h4 { color: #fff; letter-spacing: -.02em; }
.k-chart .t-copy p, .k-chart .t-social { color: #8a97b8; }
.k-chart .t-cta i { border-color: #25334d; }
.k-chart .t-avs i { border-color: #0b1220; }
.k-chart .t-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 48%); }
.k-chart .t-chartbox { background: #111a2d; border: 1px solid #1f2b45; border-radius: 1.8cqw; padding: 1.6cqw 1.8cqw 1cqw; font-size: 1.7cqw; }
.k-chart .t-chart-h { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1cqw; }
.k-chart .t-chart-h small { display: block; color: #8a97b8; font-size: 1.5cqw; }
.k-chart .t-chart-h b { font-family: var(--f-mono); font-weight: 500; font-size: 2.6cqw; letter-spacing: -.02em; }
.k-chart .t-legend { display: grid; gap: .5cqw; color: #8a97b8; font-size: 1.5cqw; }
.k-chart .t-legend i { display: inline-block; width: 1.4cqw; height: 1.4cqw; border-radius: 50%; background: var(--g1); margin-right: .6cqw; }
.k-chart .t-legend i.b { background: #ff7a7a; }
.k-chart svg { display: block; width: 100%; height: 13cqw; }
.k-chart svg .line { fill: none; stroke: var(--g1); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.k-chart svg .line.b { stroke: #ff7a7a; stroke-dasharray: 3 2; }
.k-chart .t-stats { padding-top: 1.6cqw; } .t-chart .t-stats span { color: #8a97b8; }
.k-chart .t-feats > div { background: #111a2d; border-color: #1f2b45; } .t-chart .t-feats s { background: #1f2b45; }
/* Kind: finance app (pink, rounded type, phone mock). */
.k-phone { --hf: Verdana, 'Segoe UI', sans-serif; --hw: 700; --g1: #e2458a; --g2: #ff8f6b; --btn-bg: #e2458a; --btn-fg: #fff; --btn-r: 999px; background: #fff6f9; color: #2b1a24; }
.k-phone .t-nav span { color: #8a6a7c; }
.k-phone .t-copy h4 { color: #2b1a24; letter-spacing: -.02em; }
.k-phone .t-copy small { color: #c8306f; background: #fde4ee; border-color: #f7c5da; }
.k-phone .t-copy p { color: #7a5d6c; }
.k-phone .t-cta i { border-color: #f0d6e1; color: #2b1a24; }
.k-phone .t-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 34%); align-items: end; }
.k-phone .t-device { position: relative; margin: 1cqw 2cqw 0 0; aspect-ratio: 9 / 15; border-radius: 3.2cqw; background: #1b1620; padding: 1.1cqw; box-shadow: 0 2cqw 5cqw rgba(226, 69, 138, .22); }
.k-phone .t-notch { position: absolute; left: 50%; top: 1.1cqw; transform: translateX(-50%); width: 34%; height: 1.6cqw; border-radius: 0 0 1.2cqw 1.2cqw; background: #1b1620; z-index: 1; }
.k-phone .t-screen { height: 100%; border-radius: 2.4cqw; background: #fff; padding: 3cqw 1.6cqw 1.6cqw; font-size: 1.6cqw; display: grid; align-content: start; gap: .8cqw; }
.k-phone .t-screen small { color: #8a6a7c; font-size: 1.4cqw; }
.k-phone .t-screen > b { font-size: 2.6cqw; font-weight: 700; letter-spacing: -.03em; }
.k-phone .t-rows { display: grid; gap: .6cqw; margin-top: .6cqw; }
.k-phone .t-rows div { display: flex; align-items: center; gap: .8cqw; padding: .8cqw; border-radius: 1cqw; background: #fbf3f7; }
.k-phone .t-rows i { width: 2.2cqw; height: 2.2cqw; border-radius: .7cqw; background: linear-gradient(135deg, var(--g1), var(--g2)); }
.k-phone .t-rows s { text-decoration: none; margin-left: auto; font-weight: 700; }
.k-phone .t-screen em { margin-top: auto; font-style: normal; font-weight: 700; text-align: center; color: #fff; background: #e2458a; border-radius: 999px; padding: 1cqw; }
.k-phone .t-quote { background: #fff; border: 1px solid #f3dde7; }
.k-phone .t-stats b { background: none; -webkit-text-fill-color: #e2458a; color: #e2458a; }
.k-phone .t-logos { display: none; }
/* Kind: kanban tool (green, tight grotesk, centred hero with the board below). */
.k-kanban { --hf: Arial, Helvetica, sans-serif; --hw: 800; --g1: #1f9d55; --g2: #6fcf97; --btn-bg: #1f9d55; --btn-fg: #fff; --btn-r: 1cqw; background: #fff; color: #10251a; }
.k-kanban .t-nav span { color: #5d7367; }
.k-kanban .t-copy h4 { color: #10251a; letter-spacing: -.04em; }
.k-kanban .t-copy h4 span { background: none; -webkit-text-fill-color: #1f9d55; color: #1f9d55; }
.k-kanban .t-copy small { color: #1f9d55; background: #e6f6ec; border-color: #c4ead2; }
.k-kanban .t-copy p { color: #5d7367; }
.k-kanban .t-cta i { border-color: #d9e5dd; color: #10251a; }
.k-kanban .t-hero { grid-template-columns: 1fr; text-align: center; padding-top: 2.2cqw; }
.k-kanban .t-copy p { margin-left: auto; margin-right: auto; }
.k-kanban .t-cta, .k-kanban .t-social { justify-content: center; }
.k-kanban .t-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4cqw; margin: 1.6cqw 4cqw 0; padding: 1.4cqw; border-radius: 2cqw; background: #f4f7f5; border: 1px solid #e3ebe6; }
.k-kanban .t-col { display: grid; gap: .8cqw; align-content: start; font-size: 1.7cqw; }
.k-kanban .t-col b { display: flex; justify-content: space-between; font-weight: 700; color: #3b5244; padding: 0 .4cqw .4cqw; }
.k-kanban .t-col s { text-decoration: none; color: #8aa093; }
.k-kanban .t-col i { height: 4.2cqw; border-radius: 1cqw; background: #fff; border: 1px solid #e3ebe6; position: relative; }
.k-kanban .t-col i::before { content: ''; position: absolute; left: 1cqw; top: 1cqw; width: 45%; height: .9cqw; border-radius: 1cqw; background: #d7e2dc; }
.k-kanban .t-col i::after { content: ''; position: absolute; left: 1cqw; bottom: 1cqw; width: 3.6cqw; height: 1cqw; border-radius: 1cqw; background: #cfe9d9; }
.k-kanban .t-col i.c1::after { background: #f6dfc2; } .t-kanban .t-col i.c2::after { background: #d9dcf6; }
.k-kanban .t-feats > div { border-color: #e3ebe6; } .t-kanban .t-ico { background: #e6f6ec; } .t-kanban .t-ico::after { background: #1f9d55; }
.k-kanban .t-logos { color: #b7c4bc; }
/* once painted, the chosen site grows to be read: fitChosen (agence-story.js) sets the end scale --cs and the move --cx/--cy so it
   ends as wide as the grid, centred, its bottom on the grid's bottom (the caption stays clear). Without them: x1.72 in place. */
.tile.is-chosen { z-index: 2; transform-origin: 50% 50%; transform: translate(calc(var(--cx, 0px) * var(--paint, 0)), calc(var(--cy, 0px) * var(--paint, 0))) scale(calc(1 + (var(--cs, 1.72) - 1) * var(--paint, 0))); box-shadow: 0 calc(6px + var(--paint, 0) * 24px) calc(18px + var(--paint, 0) * 40px) rgba(22, 21, 29, calc(.07 + var(--paint, 0) * .2)); }
.tile.is-chosen::after { display: none; }
/* The one that went through the 12 checks: this page, in miniature, with its real hero poster, fox and checks. */
.tile-paint {
  /* z-index: above the generated site underneath (its phone notch is positioned with z-index 1) */
  position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column;
  clip-path: inset(0 calc((1 - var(--paint, 0)) * 100%) 0 0);
}
/* The redesign of the generated finance app. Art direction instead of the template: warm paper with grain,
   one deep-teal arch the hand reaches through, a serif italic on the words that matter over a marker stroke,
   a hand-written note in the margin, and a ledger of real figures instead of three icon tiles. */
.r-pocket {
  --paper: #f3eee4; --paper-2: #ebe3d4; --ink: #10201d; --ink-2: #56625e; --teal: #0f6b5f; --teal-2: #1f9d8a;
  --deep: #0c3f38; --mint: #bfeadf; --apricot: #f2ad62;
  background: url('/images/agence-pocket-sky.jpg') center / cover no-repeat, radial-gradient(120% 90% at 0% 0%, #f8f4ec, var(--paper) 60%); color: var(--ink); font-family: var(--f-sans); letter-spacing: -.012em;
}
.r-pocket::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .1; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.r-pocket > * { position: relative; z-index: 1; }
.r-nav { display: flex; align-items: center; gap: 2.6cqw; padding: 2.4cqw 3.8cqw; font-size: 2cqw; }
.r-logo { display: inline-flex; align-items: center; gap: .9cqw; font-size: 2.9cqw; font-weight: 700; letter-spacing: -.045em; }
.r-logo i { width: 2.7cqw; height: 2.7cqw; border-radius: 50%; background: radial-gradient(circle at 50% 50%, var(--paper) 0 32%, transparent 33%), conic-gradient(from 210deg, var(--teal-2), var(--deep)); box-shadow: inset 0 0 0 .3cqw rgba(255, 255, 255, .25); }
.r-links { display: flex; gap: 2.6cqw; margin-left: auto; color: var(--ink-2); font-weight: 500; }
.r-links i { font-style: normal; }
.r-nav em, .r-cta em { font-style: normal; font-weight: 600; color: #fff; background: var(--ink); border-radius: 999px; padding: 1.1cqw 2.6cqw; white-space: nowrap; box-shadow: 0 .6cqw 1.4cqw -.6cqw rgba(16, 32, 29, .5); }
.r-hero { position: relative; flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 50%); gap: 2cqw; padding: 1.2cqw 3.8cqw 0; align-items: center; overflow: hidden; }
.r-copy small { display: flex; align-items: center; gap: 1.2cqw; margin-bottom: 1.6cqw; font-family: var(--f-serif); font-style: italic; font-size: 2.3cqw; color: var(--teal); letter-spacing: 0; }
.r-copy small i { width: 3.4cqw; height: 1px; background: currentColor; opacity: .6; }
.r-copy h4 { margin: 0 0 1.6cqw; font-size: 5.3cqw; font-weight: 600; letter-spacing: -.045em; line-height: .98; color: var(--ink); }
.r-copy h4 em { position: relative; z-index: 0; display: inline-block; font-family: var(--f-serif); font-style: italic; font-weight: 400; font-size: 1.14em; letter-spacing: -.02em; color: var(--deep); }
.r-swash { position: absolute; z-index: -1; left: -4%; right: -4%; bottom: .02em; width: 108%; height: .5em; overflow: visible; }
.r-swash path { fill: none; stroke: var(--apricot); stroke-width: 1.5cqw; stroke-linecap: round; opacity: .7; vector-effect: non-scaling-stroke; stroke-dasharray: 130; stroke-dashoffset: 130; }
.r-copy p { margin: 0 0 2.2cqw; font-size: 2.05cqw; line-height: 1.45; color: var(--ink-2); max-width: 30ch; }
.r-cta { display: flex; align-items: center; gap: 2.4cqw; font-size: 2cqw; }
.r-cta i { display: inline-flex; align-items: center; gap: .8cqw; font-style: normal; font-weight: 600; color: var(--ink); white-space: nowrap; border-bottom: 1px solid rgba(16, 32, 29, .3); padding-bottom: .2cqw; }
.r-fact { display: flex; align-items: center; gap: 1.2cqw; margin-top: 2.4cqw; font-size: 1.75cqw; font-weight: 500; color: var(--ink-2); }
.r-fact i { width: 1.4cqw; height: 1.4cqw; border-radius: 50%; background: var(--teal-2); flex: none; }
/* The scene: a real hand holding the phone (photo, screen cut out), a card over it, a notification sliding in. */
.r-scene { position: relative; height: 100%; min-height: 34cqw; }
.r-arch {
  position: absolute; z-index: 0; left: 8%; right: 2%; top: 5%; bottom: 0; border-radius: 50% 50% 0 0 / 34% 34% 0 0; overflow: hidden;
  background: radial-gradient(70% 45% at 50% 16%, rgba(134, 227, 191, .38), transparent 70%), linear-gradient(180deg, #17665b 0%, var(--deep) 70%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.r-arch::before { content: ''; position: absolute; inset: 0; opacity: .35; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.r-arch::after { content: ''; position: absolute; inset: 4% 5% -10%; border-radius: inherit; border: 1px solid rgba(255, 255, 255, .16); }
/* Two cumulus in the arch's sky (2026-10-19): flat stacked ellipses in the pocket's own paper and mint, no filter,
   one very slow drift on transform. The second one goes on small screens. */
.r-cloud { position: absolute; z-index: 0; width: 44%; height: auto; overflow: visible; animation: r-drift 38s ease-in-out infinite alternate; }
.r-cloud--a { left: 6%; top: 8%; }
.r-cloud--b { right: 3%; top: 26%; width: 26%; opacity: .78; animation-duration: 46s; animation-direction: alternate-reverse; }
.r-cloud .rc-body { fill: #f7fbf9; }
.r-cloud .rc-shade { fill: var(--mint); opacity: .9; }
.r-cloud .rc-light { fill: #fff; opacity: .75; }
@keyframes r-drift { from { transform: translateX(-4%); } to { transform: translateX(4%); } }
@media (prefers-reduced-motion: reduce) { .r-cloud { animation: none; } }
@media (max-width: 720px) { .r-cloud--b { display: none; } }
/* The hand comes in from below: the arm leaves through the bottom of the hero, the cut wrist fades out. */
.r-device {
  position: absolute; left: 4%; top: 16%; width: 112%; aspect-ratio: 1000 / 931;
  transform: rotate(-32deg); transform-origin: 62% 42%; z-index: 2;
}
.r-hand-photo {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%); mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
  filter: drop-shadow(0 1.6cqw 2.4cqw rgba(6, 30, 26, .35));
}
.r-note { position: absolute; z-index: 3; left: -14%; top: 3%; display: flex; align-items: flex-start; gap: .4cqw; font-family: var(--f-serif); font-style: italic; font-size: 2.2cqw; line-height: 1.05; color: var(--teal); transform: rotate(-4deg); }
.r-note svg { width: 11cqw; height: 6cqw; margin-top: 1.6cqw; overflow: visible; }
.r-note path { fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
/* The screen is laid out on a 390x820 phone, mapped onto the photo's screen corners (1000-wide photo space),
   then scaled to the device box by --s (fitPocket). */
.r-device .r-screen {
  position: absolute; left: 0; top: 0; z-index: 1; width: 390px; height: 820px; transform-origin: 0 0;
  transform: scale(var(--s, .3)) matrix3d(0.7920127, 0.3935766, 0, -0.00002670795, -0.4680227, 0.7604285, 0, -0.00004043317, 0, 0, 1, 0, 680.6, -1, 0, 1);
  display: flex; flex-direction: column; gap: 18px; padding: 0 24px; overflow: hidden; border-radius: 56px;
  background: #fbfaf6; color: var(--ink); font-size: 15px; line-height: 1.25;
}
.r-device .r-screen::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(118deg, rgba(255, 255, 255, .22), transparent 38%); }
.r-status { display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 14px 10px 0; font-size: 16px; }
.r-status b { font-weight: 600; letter-spacing: -.01em; }
.r-sig { display: inline-flex; align-items: flex-end; gap: 2px; height: 11px; margin-left: auto; margin-right: 8px; }
.r-sig i { width: 3px; border-radius: 1px; background: var(--ink); }
.r-sig i:nth-child(1) { height: 4px; } .r-sig i:nth-child(2) { height: 6px; } .r-sig i:nth-child(3) { height: 8px; } .r-sig i:nth-child(4) { height: 11px; }
.r-batt { position: relative; width: 24px; height: 11px; border-radius: 3px; border: 1.5px solid rgba(16, 32, 29, .45); }
.r-batt::before { content: ''; position: absolute; inset: 1.5px; right: 5px; border-radius: 1.5px; background: var(--ink); }
.r-app { display: flex; align-items: center; justify-content: space-between; }
.r-app b { font-size: 24px; font-weight: 700; letter-spacing: -.04em; }
.r-app b i { font-style: normal; color: var(--teal-2); }
.r-app img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #fff, 0 2px 8px rgba(16, 32, 29, .18); }
.r-bal small { display: block; color: var(--ink-2); font-size: 14px; }
.r-bal b { display: block; margin-top: 2px; font-size: 40px; font-weight: 700; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.r-bal s { text-decoration: none; display: inline-block; margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--teal); background: var(--mint); border-radius: 999px; padding: 4px 11px; }
.r-chart { display: block; width: 100%; height: 118px; overflow: visible; }
.r-chart .a { fill: var(--mint); opacity: 0; }
.r-chart .l { fill: none; stroke: var(--teal); stroke-width: 2.4; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-dasharray: 160; stroke-dashoffset: 160; }
.r-chart .d { fill: var(--teal); opacity: 0; }
.r-cats { display: grid; gap: 8px; }
.r-cats span { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: 16px; background: #f0eee6; font-weight: 500; }
.r-cats i { width: 30px; height: 30px; border-radius: 9px; }
.r-cats .c0 { background: linear-gradient(135deg, #f0c86a, #e29b3b); } .r-cats .c1 { background: linear-gradient(135deg, #8fc7ff, #3f86e0); } .r-cats .c2 { background: linear-gradient(135deg, #ff9f8a, #e2553c); }
.r-cats b { margin-left: auto; font-variant-numeric: tabular-nums; }
.r-tabs { display: flex; justify-content: space-around; margin: auto -24px 0; padding: 16px 30px 34px; border-top: 1px solid rgba(16, 32, 29, .08); background: #fff; }
.r-tabs i { width: 26px; height: 26px; border-radius: 8px; background: #dedbd1; }
.r-tabs i.on { background: var(--teal); }
.r-card {
  /* tucked behind the phone, above it, where the hand does not reach (arch 0, card 1, device 2); real card ratio, scaled as a whole */
  position: absolute; z-index: 1; right: 14%; top: 3%; width: 62%; aspect-ratio: 1.586; transform-origin: 100% 0; border-radius: 2.2cqw; padding: 2cqw;
  background: linear-gradient(135deg, #0f6b5f 0%, #1f9d8a 55%, #35b89f 100%); color: #eaf7f3; font-size: 1.7cqw;
  box-shadow: 0 3cqw 6cqw rgba(16, 32, 29, .35), inset 0 1px 0 rgba(255, 255, 255, .35);
  transform: rotate(9deg) scale(.62); overflow: hidden;
}
.r-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 80% at 80% 0%, rgba(255, 255, 255, .28), transparent 60%); }
.r-card::after { content: ''; position: absolute; top: -60%; bottom: -60%; left: -40%; width: 30%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent); transform: rotate(12deg); opacity: 0; }
.r-chip { display: block; width: 6cqw; height: 4.4cqw; border-radius: 1cqw; background: linear-gradient(135deg, #f3d98a, #c9a24a); box-shadow: inset 0 0 0 1px rgba(90, 60, 0, .25); position: relative; }
.r-chip::after { content: ''; position: absolute; left: 25%; right: 25%; top: 45%; height: 1px; background: rgba(90, 60, 0, .35); box-shadow: 0 -1cqw 0 rgba(90, 60, 0, .35), 0 1cqw 0 rgba(90, 60, 0, .35); }
.r-nfc { position: absolute; right: 2cqw; top: 2cqw; width: 3.6cqw; height: 3.6cqw; opacity: .85; }
.r-card b { position: absolute; left: 2cqw; bottom: 4.4cqw; font-size: 2.3cqw; letter-spacing: .12em; font-weight: 500; }
.r-holder { position: absolute; left: 2cqw; bottom: 1.8cqw; font-size: 1.4cqw; letter-spacing: .14em; opacity: .85; }
.r-card em { position: absolute; right: 2cqw; bottom: 1.8cqw; font-style: normal; font-weight: 700; letter-spacing: -.04em; font-size: 2.2cqw; }
.r-toast { position: absolute; z-index: 3; left: -6%; bottom: 13%; display: flex; align-items: center; gap: 1.2cqw; padding: 1.2cqw 1.6cqw 1.2cqw 1.2cqw; border-radius: 1.6cqw; background: #fff; box-shadow: 0 2cqw 4cqw rgba(16, 32, 29, .2); font-size: 1.6cqw; opacity: 0; transform: translateY(30%); }
.r-toast i { display: grid; place-items: center; width: 3.6cqw; height: 3.6cqw; border-radius: 50%; background: var(--mint); color: var(--teal); }
.r-toast svg { width: 2.2cqw; height: 2.2cqw; }
.r-toast b { display: block; font-weight: 600; } .r-toast span { color: var(--ink-2); font-size: 1.4cqw; }
.r-ledger { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 1.7cqw 3.8cqw 2cqw; border-top: 1px solid rgba(16, 32, 29, .14); background: var(--paper-2); }
.r-ledger div { display: flex; align-items: baseline; gap: 1.2cqw; padding-left: 2.4cqw; border-left: 1px solid rgba(16, 32, 29, .14); }
.r-ledger div:first-child { padding-left: 0; border-left: 0; }
.r-ledger b { font-size: 3.3cqw; font-weight: 700; letter-spacing: -.05em; font-variant-numeric: tabular-nums; color: var(--deep); }
.r-ledger span { font-size: 1.6cqw; color: var(--ink-2); white-space: nowrap; }
.r-nav .r-tag { display: inline-flex; align-items: center; gap: .8cqw; margin-left: .2cqw; padding: .55cqw 1.4cqw; border-radius: 999px; background: #cfeee4; font-size: 1.55cqw; font-weight: 700; letter-spacing: .01em; color: #0b4f46; white-space: nowrap; }
.r-tag .r-dot { width: .9cqw; height: .9cqw; border-radius: 50%; background: var(--teal-2); box-shadow: 0 0 0 .5cqw rgba(31, 157, 138, .2); }
/* Life: the card floats and catches the light, the chart draws itself, the notification arrives. */
.is-live .r-card { animation: r-float 6s ease-in-out infinite; }
.is-live .r-card::after { animation: r-shine 5s ease-in-out 1.2s infinite; }
.is-live .r-chart .l { animation: r-draw 1.6s ease-out .3s forwards; }
.is-live .r-swash path { animation: r-draw 1s cubic-bezier(.6, 0, .2, 1) .2s forwards; }
.is-live .r-chart .a { animation: r-in .8s ease-out 1.6s forwards; }
.is-live .r-chart .d { animation: r-in .4s ease-out 1.8s forwards, r-pulse 2.4s ease-in-out 2.2s infinite; }
.is-live .r-toast { animation: r-toast .7s cubic-bezier(.2, .9, .3, 1.2) 1.1s forwards; }
.is-live .r-device { animation: r-float 7s ease-in-out -2s infinite; }
@keyframes r-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -2.5%; } }
@keyframes r-shine { 0% { left: -40%; opacity: 0; } 10% { opacity: 1; } 40% { left: 120%; opacity: 0; } 100% { left: 120%; opacity: 0; } }
@keyframes r-draw { to { stroke-dashoffset: 0; } }
@keyframes r-in { to { opacity: 1; } }
@keyframes r-pulse { 0%, 100% { r: 1.8; } 50% { r: 2.8; } }
@keyframes r-toast { to { opacity: 1; transform: translateY(0); } }

.same-caption {
  margin-top: 28px; font-size: 14px; color: var(--ink-2);
  display: flex; align-items: center; gap: 10px;
  opacity: var(--cap, 0); transform: translateY(calc((1 - var(--cap, 0)) * 8px));
}
.same-caption::before { content: ''; width: 22px; height: 2px; background: var(--holo); }
.same-copy { grid-column: 1; }
.same-visual { grid-column: 2; }

/* ── 2. PROOF (2026-10-26, second level 2026-10-27): the results first, then the actions and the methods behind them.
   No screenshots here: the animated interfaces and the logos follow. The figures keep the logo's multicolour; the
   rest is type and hairlines. Every figure, step and method is a button that opens its second level with a smooth
   height (grid rows 0fr to 1fr) and a plus that turns into a minus. Entrance: items rise one after the other as
   the section scrolls in, and each figure's colour slides through it once. ── */
.proof { background: var(--moss); padding: var(--section) 0; --c: var(--p-yellow); }
.pf { display: grid; gap: clamp(44px, 8vh, 84px); }
.pf-label { margin: 0; font-size: clamp(20px, 1.8vw, 26px); font-weight: 600; letter-spacing: -.015em; line-height: 1.2; color: var(--cream); }
.pf-lede { margin: 6px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--cream-3); }
.pf-q, .pf-rb { margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pf-q:focus-visible, .pf-rb:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; border-radius: 8px; }
/* the plus: a circle with two bars, the vertical one lies down when the item is open */
.pf-plus { position: relative; flex: none; display: block; width: 20px; height: 20px; border: 1px solid var(--rule-dark); border-radius: 50%; transition: transform .5s var(--ease), border-color .3s ease, background-color .3s ease; }
.pf-plus::before, .pf-plus::after { content: ''; position: absolute; left: 50%; top: 50%; width: 8px; height: 1.5px; margin: -.75px 0 0 -4px; border-radius: 1px; background: var(--cream-2); }
.pf-plus::after { rotate: 90deg; transition: rotate .5s var(--ease); }
[aria-expanded='true'] > .pf-plus, [aria-expanded='true'] .pf-plus { transform: rotate(180deg); border-color: var(--cream-3); background: rgba(243, 241, 247, .08); }
[aria-expanded='true'] > .pf-plus::after, [aria-expanded='true'] .pf-plus::after { rotate: 0deg; }
@media (hover: hover) and (pointer: fine) { .pf-q:hover .pf-plus, .pf-rb:hover .pf-plus { border-color: var(--cream-2); } }
/* the second level: height from 0 to its content, then the text fades in */
.pf-more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease); }
.pf-more-in { min-height: 0; overflow: hidden; visibility: hidden; opacity: 0; transition: opacity .3s ease, visibility 0s linear .55s; }
.is-open > .pf-more, .is-open > .pf-body > .pf-more { grid-template-rows: 1fr; }
.is-open > .pf-more > .pf-more-in, .is-open > .pf-body > .pf-more > .pf-more-in { visibility: visible; opacity: 1; transition: opacity .4s ease .12s, visibility 0s; }
.pf-more-in p { margin: 10px 0 0; max-width: 52ch; font-size: 14.5px; line-height: 1.55; color: var(--cream-2); }
.pf-more-in a { display: inline-flex; margin-top: 10px; color: var(--cream); font-size: 13.5px; }
/* results (2026-10-27, visual, second pass): a lead card with the strongest figure, two side cards. Each stage is a lit floor
   (a tinted spot, a faint dot grid, a vignette) with the project's own screen on it, a glass tag with its name, and a lean
   toward the pointer. Under it: the reported figure and the before/after dumbbell (a ruler axis ticked every 5 points, a muted
   dot for before, a mint dot and a 2px line to after, 2px surface rings, both ends labelled, the scale end in grey). One
   100 to 125 scale for the three cards. The line draws and the dot travels once as the card scrolls in (--in). */
.pf-res-list { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto auto; gap: clamp(14px, 1.6vw, 22px); margin: clamp(16px, 2.6vh, 26px) 0 0; padding: 0; list-style: none; }
.pf-res {
  position: relative; display: block; min-width: 0; overflow: hidden; border: 1px solid var(--rule-dark); border-radius: 26px;
  background: radial-gradient(70% 55% at 100% 0%, var(--tint, rgba(163, 191, 220, .24)), transparent 70%), radial-gradient(60% 50% at 0% 100%, var(--tint2, rgba(184, 208, 227, .14)), transparent 70%), var(--moss-2);
  opacity: var(--in, 1); transform: translateY(calc((1 - var(--in, 1)) * 18px));
  transition: opacity .7s var(--ease), transform .7s var(--ease), border-color .3s ease;
}
.pf-res.is-lead { grid-row: 1 / span 2; }
.pf-res:not(.is-lead) { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: 1fr auto; align-items: stretch; }
.pf-res:not(.is-lead) > .pf-more { grid-column: 1 / -1; }
.pf-shot { position: relative; margin: 0; overflow: hidden; background: radial-gradient(rgba(243, 241, 247, .13) 1px, transparent 1.3px) 0 0 / 18px 18px, rgba(8, 7, 12, .45); perspective: 900px; }
.pf-res.is-lead .pf-shot { aspect-ratio: 16 / 9.6; border-bottom: 1px solid var(--rule-dark); }
.pf-res:not(.is-lead) .pf-shot { min-height: 100%; border-right: 1px solid var(--rule-dark); }
.pf-shot::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(80% 80% at 50% 44%, transparent 38%, rgba(8, 7, 12, .72)); }
.pf-spot { position: absolute; left: 50%; top: 46%; width: 78%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, var(--tint, rgba(163, 191, 220, .3)) 0%, transparent 66%); filter: blur(8px); }
.pf-floor { position: absolute; left: 22%; right: 22%; bottom: 13%; height: 16px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .6), transparent); filter: blur(6px); }
.pf-shot.is-flat .pf-floor { display: none; }
.pf-shot img {
  position: absolute; left: 7%; top: 8%; z-index: 2; width: 86%; height: 82%; object-fit: contain; filter: drop-shadow(0 22px 26px rgba(0, 0, 0, .55));
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--sc, 1)); transition: transform .7s var(--ease);
}
.pf-shot.is-flat img { top: 50%; translate: 0 -50%; height: auto; border-radius: 10px; filter: none; box-shadow: 0 24px 38px -12px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .09); }
.pf-tag { position: absolute; left: 14px; top: 14px; z-index: 3; max-width: calc(100% - 28px); padding: 6px 12px; border: 1px solid rgba(243, 241, 247, .2); border-radius: 999px; background: rgba(13, 12, 18, .6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .02em; line-height: 1.3; color: var(--cream-3); }
.pf-tag b { font-weight: 500; color: var(--cream); }
.pf-tag { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 901px) {
  .pf-res:not(.is-lead) .pf-shot:not(.is-flat) img { scale: var(--zoom, 1); }
  .pf-res:not(.is-lead) .pf-tag .k { display: none; }
}
@media (hover: hover) and (pointer: fine) {
  .pf-res:hover { border-color: rgba(243, 241, 247, .3); }
  .pf-res:hover .pf-shot { --sc: 1.035; }
}
.pf-rb { display: grid; align-content: start; gap: 8px; width: 100%; padding: clamp(18px, 2vw, 28px); }
.pf-res > .pf-more > .pf-more-in { padding: 0 clamp(18px, 2vw, 28px); }
.pf-res > .pf-more > .pf-more-in > :last-child { margin-bottom: clamp(18px, 2vw, 28px); }
.pf-fig { display: block; }
.pf-fig strong {
  display: inline-block; padding-right: .06em;
  font-weight: 700; font-size: clamp(50px, 4.8vw, 78px); line-height: .9; letter-spacing: -.055em; font-variant-numeric: tabular-nums;
  /* solid, no gradient text (2026-11-06 professional pass): big gradient figures read as generated */
  color: var(--cream);
  transition: transform .6s var(--ease);
}
.pf-res.is-lead .pf-fig strong { font-size: clamp(76px, 9vw, 148px); }
@media (hover: hover) and (pointer: fine) { .pf-rb:hover .pf-fig strong { transform: translateY(-3px); } }
.pf-what { display: block; max-width: 26ch; font-size: clamp(15px, 1.2vw, 17px); line-height: 1.4; color: var(--cream); text-wrap: balance; }
.pf-res.is-lead .pf-what { font-size: clamp(17px, 1.5vw, 21px); }
.pf-dumb { position: relative; display: block; height: 62px; margin: 14px 6px 2px; }
.pd-base { position: absolute; left: 0; right: 0; top: 8px; height: 7px; border-right: 1px solid rgba(243, 241, 247, .34);
  background: linear-gradient(rgba(243, 241, 247, .2), rgba(243, 241, 247, .2)) 0 3px / 100% 1px no-repeat, repeating-linear-gradient(90deg, rgba(243, 241, 247, .34) 0 1px, transparent 1px 20%) 0 0 / 100% 7px no-repeat; }
.pd-line { position: absolute; left: 0; top: 10px; width: var(--x, 48%); height: 2px; border-radius: 2px; background: var(--holo-1); transform: scaleX(var(--in, 1)); transform-origin: left; transition: transform 1.2s var(--ease) .3s; }
.pd-a, .pd-b { position: absolute; border-radius: 50%; box-shadow: 0 0 0 2px var(--moss-2); }
.pd-a { left: 0; top: 11px; width: 10px; height: 10px; margin: -5px 0 0 -5px; background: var(--cream-3); }
.pd-b { left: calc(var(--x, 48%) * var(--in, 1)); top: 12px; width: 12px; height: 12px; margin: -6px 0 0 -6px; background: var(--holo-1); transition: left 1.2s var(--ease) .3s; }
.pd-la, .pd-lb, .pd-le { position: absolute; top: 28px; display: grid; gap: 1px; font-family: var(--f-mono); font-style: normal; font-size: 10.5px; letter-spacing: .04em; line-height: 1.2; text-transform: uppercase; color: var(--cream-3); }
.pd-la { left: -5px; }
.pd-lb { left: var(--x, 48%); transform: translateX(-50%); text-align: center; opacity: var(--in, 1); transition: opacity .6s ease .9s; }
.pd-le { right: 0; opacity: .55; }
.pd-la b, .pd-lb b { font-family: var(--f-sans); font-size: 15px; font-weight: 650; letter-spacing: -.01em; text-transform: none; color: var(--cream); font-variant-numeric: tabular-nums; }
.pf-rb > .pf-plus { margin-top: 4px; }
/* actions and methods: two ruled lists side by side */
.pf-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(36px, 6vw, 96px); }
.pf-list { margin: clamp(16px, 2.6vh, 24px) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--rule-dark); }
.pf-item {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 clamp(14px, 1.6vw, 22px); padding: 18px 0; border-bottom: 1px solid var(--rule-dark);
  opacity: var(--in, 1); transform: translateY(calc((1 - var(--in, 1)) * 14px)); transition: opacity .6s var(--ease), transform .7s var(--ease);
}
.pf-item--m { grid-template-columns: auto minmax(0, 1fr); }
.pf-no { font-family: var(--f-mono); font-size: 12px; letter-spacing: .06em; line-height: 1.9; color: var(--cream-3); font-variant-numeric: tabular-nums; transition: color .3s ease; }
.pf-item.is-open .pf-no { color: var(--c); }
.pf-body { min-width: 0; }
.pf-item h4 { margin: 0; font-size: clamp(16px, 1.3vw, 18.5px); font-weight: 600; letter-spacing: -.012em; line-height: 1.3; color: var(--cream); text-wrap: balance; }
.pf-q { display: flex; align-items: flex-start; gap: .7em; width: 100%; }
.pf-q .pf-qt { flex: 1; min-width: 0; transition: color .25s ease; }
.pf-q .pf-plus { margin-top: .1em; }
@media (hover: hover) and (pointer: fine) { .pf-q:hover .pf-qt { color: #fff; } }
.pf-day { flex: none; margin-top: -.05em; }
.pf-day { display: inline-flex; align-items: center; gap: .55em; }
.pf-gauge { display: inline-flex; gap: 3px; }
.pf-gauge i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: rgba(243, 241, 247, .07); font: 600 10.5px/1 var(--f-mono); font-style: normal; color: var(--cream-3); transition: background-color .3s ease, color .3s ease; }
.pf-gauge i.on { background: var(--holo-1); color: #0a1b15; }
/* methods: one drawn glyph each; its lines draw themselves as the row scrolls in (pathLength 1 in the markup) */
.pf-glyph { display: block; width: 54px; height: 54px; margin-top: 0; color: var(--cream-2); }
.pf-glyph svg { display: block; width: 100%; height: auto; overflow: visible; }
.pf-glyph .g-stroke { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pf-glyph .g-stroke > * { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--in, 1)); transition: stroke-dashoffset 1.3s var(--ease) .2s; }
.pf-glyph .g-acc { fill: var(--c); transform-box: fill-box; transform-origin: center; scale: calc(.2 + var(--in, 1) * .8); transition: scale .7s var(--ease) .8s; }
@media (prefers-reduced-motion: reduce) { .pf-shot img, .pd-line, .pd-b, .pd-lb, .pf-glyph .g-stroke > *, .pf-glyph .g-acc { transition: none; } }
.pf-item > .pf-body > p, .pf-item .pf-body > p { margin: 5px 0 0; max-width: 52ch; font-size: 14.5px; line-height: 1.55; color: var(--cream-2); }
/* where a method comes from: the project or rule it was proven on */
.pf-item .pf-body > .pf-from { margin-top: 10px; font-family: var(--f-mono); font-size: 12px; letter-spacing: .02em; color: var(--cream-3); }
.pf-from::before { content: ''; display: inline-block; width: 14px; height: 2px; margin-right: 8px; vertical-align: middle; background: var(--holo); }
@media (max-width: 900px) {
  .pf-res-list { grid-template-columns: 1fr; max-width: 560px; }
  .pf-res.is-lead { grid-row: auto; }
  .pf-res:not(.is-lead) { display: block; }
  .pf-res:not(.is-lead) .pf-shot { min-height: 0; aspect-ratio: 16 / 10; border-right: 0; border-bottom: 1px solid var(--rule-dark); }
  .pf-res.is-lead .pf-fig strong { font-size: clamp(64px, 20vw, 96px); }
  .pf-cols { grid-template-columns: 1fr; gap: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .pf-res, .pf-item, .pf-more, .pf-more-in, .pf-plus, .pf-plus::after, .pf-fig strong, .pf-no, .pf-q .pf-qt { transition: none; }
}
.proof-foot { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 40px; }
.proof-note { max-width: 62ch; font-size: 13px; line-height: 1.6; color: var(--cream-3); }
.proof .link-arrow { color: var(--cream); }

/* ── 3. SERVICES: the ways to work together, as a list (2026-10-19). One row per offer: the drawn scene on its
   night tile, the package name and price on one line, the promise, the proof. No tiles, no popovers, one link
   for the section (in its head). The home shows three rows, /services (.page-stack) all four with the
   deliverables open. ── */
.services { background: var(--paper); color: var(--ink); --c: var(--p-blue); }
.services .pin-stage { position: relative; top: auto; height: auto; overflow: visible; display: block; padding: clamp(72px, 11vh, 120px) 0; }
.services.page-stack { padding: calc(var(--nav-h) + clamp(36px, 6vh, 80px)) 0 clamp(72px, 10vh, 120px); }
.svc-head, .svc-rail { width: min(var(--max), calc(100% - 2 * var(--gutter))); margin: 0 auto; }
.svc-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(26px, 4vh, 48px); }
.services .h2 { font-size: clamp(34px, 3.6vw, 56px); }
.svc-cta { display: inline-flex; flex: none; margin: 0 0 8px; color: var(--ink); }
.ways { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.way {
  display: grid; grid-template-columns: 156px minmax(0, 1fr); gap: 16px clamp(24px, 4vw, 56px); align-items: start;
  padding: clamp(24px, 3.4vh, 40px) 0; border-bottom: 1px solid var(--rule);
}
/* Each offer keeps its pigment: --c deep for lines, --c2 light for the tile's glow */
.way[data-svc='1'] { --c: #22617a; --c2: #6f8fc4; }
.way[data-svc='2'] { --c: #245a85; --c2: #85a3cc; }
.way[data-svc='3'] { --c: #27528e; --c2: #9fb9d7; }
.way[data-svc='4'] { --c: #2b4b8f; --c2: #dbe6ee; }
.way-fig {
  margin: 0; aspect-ratio: 4 / 3; display: grid; place-items: center; padding: 14px 12px; border-radius: 14px; color: var(--cream);
  background:
    radial-gradient(90% 70% at 88% 6%, color-mix(in srgb, var(--c2) 42%, transparent), transparent 62%),
    linear-gradient(160deg, #1d1b2b, var(--deep) 70%);
}
.svc-ico { display: block; width: 100%; overflow: visible; }
.way-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0; }
.way-title { font-size: clamp(24px, 2.2vw, 32px); font-weight: 600; letter-spacing: -.025em; line-height: 1.05; }
.way-price { font-size: 17px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.way-scope { font-size: 14px; font-weight: 500; color: var(--ink-3); }
.way-head .soon { margin-left: 0; align-self: center; }
.way-promise { margin: 8px 0 0; max-width: 58ch; font-size: 16.5px; line-height: 1.55; color: var(--ink-2); }
.way-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 24px; margin: 14px 0 0; padding: 0; list-style: none; max-width: 64ch; }
.way-list li { position: relative; padding: 5px 0 5px 22px; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.way-list li::before { content: ''; position: absolute; left: 0; top: 10px; width: 12px; height: 12px; border-radius: 50%; background: color-mix(in srgb, var(--c2) 55%, transparent); }
.way-list li::after { content: ''; position: absolute; left: 4px; top: 12px; width: 3px; height: 6px; border: solid var(--c); border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); }
.way-proof { margin: 14px 0 0; max-width: 64ch; padding-left: 14px; border-left: 2px solid color-mix(in srgb, var(--c2) 80%, transparent); font-size: 13.5px; line-height: 1.55; color: var(--ink-3); }
@media (max-width: 720px) {
  .svc-head { flex-direction: column; align-items: flex-start; }
  .way { grid-template-columns: 1fr; gap: 14px; }
  .way-fig { width: 128px; }
  .way-list { grid-template-columns: 1fr; }
}
/* Offers not open yet */
.soon {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; margin-left: 8px; padding: 3px 7px 3px 6px;
  border-radius: 4px; border: 1px dashed color-mix(in srgb, var(--ink) 35%, transparent);
  background: color-mix(in srgb, var(--paper) 70%, transparent); color: var(--ink-2);
  font-family: var(--f-mono); font-size: 10.5px; font-weight: 500; line-height: 1.3; letter-spacing: .08em; text-transform: uppercase;
  vertical-align: middle; white-space: nowrap;
}
.soon::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--p-yellow); box-shadow: 0 0 0 3px color-mix(in srgb, var(--p-yellow) 25%, transparent); }
.pick-btn .soon { margin-left: 0; }
.price-name .soon { position: relative; top: -3px; margin-left: 10px; letter-spacing: .08em; }

/* Icon parts (stroke cream on the night tile, accent --c2). The scenes are still: each one shows its end state. */
.svc-ico .ico-frame, .svc-ico .ico-line, .svc-ico .ico-handle, .svc-ico .ico-ferrule, .svc-ico .ico-warn, .svc-ico .ico-check {
  fill: none; stroke: rgba(243, 241, 247, .86); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.svc-ico .ico-faint { stroke: rgba(243, 241, 247, .34); }
.svc-ico .ico-dash { stroke-dasharray: 3 4; }
.svc-ico .ico-warn { stroke: rgba(243, 241, 247, .5); stroke-width: 1.8; }
.svc-ico .ico-dot { fill: rgba(243, 241, 247, .86); }
.svc-ico .ico-old rect { fill: none; stroke: rgba(243, 241, 247, .32); stroke-width: 1.2; stroke-dasharray: 3 3; }
.svc-ico .ico-fill, .svc-ico .ico-spark, .svc-ico .ico-end { fill: var(--c2); }
.svc-ico .ico-soft { fill: rgba(243, 241, 247, .72); }
.svc-ico .ico-faintfill { fill: rgba(243, 241, 247, .3); }
.svc-ico .ico-card { fill: rgba(243, 241, 247, .07); stroke: rgba(243, 241, 247, .5); stroke-width: 1.2; }
.svc-ico .ico-card--solid { fill: #23213a; stroke: var(--c2); }
.svc-ico .ico-sun { fill: color-mix(in srgb, var(--c2) 50%, transparent); }
.svc-ico .ico-screen { fill: rgba(243, 241, 247, .05); }
.svc-ico .ico-path { fill: none; stroke: var(--c2); stroke-width: 2.4; stroke-linecap: round; }
.svc-ico .ico-node { fill: #1d1b2b; stroke: rgba(243, 241, 247, .86); stroke-width: 1.6; }
.svc-ico .ico-check { stroke: var(--deep); stroke-width: 2; }
.svc-ico .ico-caret { fill: var(--c2); }
.svc-ico .ico-pip { fill: color-mix(in srgb, var(--c) 70%, #1d1b2b); stroke: var(--c2); stroke-width: 1.2; }
.svc-ico .ico-annot { fill: none; stroke: var(--c2); stroke-width: 2; stroke-linecap: round; }
.svc-ico .ico-rec { fill: var(--c2); }
.svc-ico .ico-prog { fill: none; stroke: var(--c2); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 40; }
.svc-ico .ico-brush, .svc-ico .ico-runner { display: none; }

/* ── 5. THE 12 CHECKS (2026-10-19): a contact sheet. Twelve square cells on one paper sheet, each with a drawn
   glyph of the rule, its number and its name. The brush stamps the cells in reading order as the sheet comes up;
   hover, focus or a tap turns a cell over to read the rule. At 12/12 the stamp falls and the founder signs.
   Home and /secret-touch share it. ── */
.checks {
  position: relative; --c: var(--p-pink);
  padding: clamp(72px, 10vh, 112px) 0 clamp(80px, 11vh, 124px);
  background:
    radial-gradient(55% 45% at 88% 0%, color-mix(in srgb, var(--holo-4) 15%, transparent), transparent 70%),
    radial-gradient(45% 55% at 0% 100%, color-mix(in srgb, var(--holo-1) 14%, transparent), transparent 70%),
    var(--night);
}
.checks-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: 18px 48px; margin-bottom: clamp(24px, 4vh, 40px); }
.checks-intro p { max-width: 44ch; font-size: 16px; line-height: 1.6; color: var(--cream-2); }
/* Home #details: the pill under the title, on to the Secret touch page. The section pigment (--c, pink) tints it. */
.checks-secret {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; min-height: 44px; padding: 10px 18px;
  border: 1px solid color-mix(in srgb, var(--c) 45%, var(--rule-dark)); border-radius: 999px;
  background: color-mix(in srgb, var(--c) 12%, transparent); color: var(--cream);
  font-size: 14.5px; font-weight: 600; letter-spacing: -.005em; text-decoration: none;
  transition: background-color .25s ease, border-color .25s ease;
}
.checks-secret span:last-child { transition: transform .22s var(--ease); }
.checks-secret:hover { background: color-mix(in srgb, var(--c) 22%, transparent); border-color: color-mix(in srgb, var(--c) 75%, var(--rule-dark)); }
.checks-secret:hover span:last-child, .checks-secret:focus-visible span:last-child { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .checks-secret, .checks-secret span:last-child { transition: none; } }
.sheet12 {
  position: relative; isolation: isolate; color: var(--ink);
  padding: clamp(12px, 1.6vw, 20px); border-radius: 18px; background: var(--paper);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 44px 90px -34px rgba(0, 0, 0, .75), 0 12px 30px rgba(0, 0, 0, .28);
}
.sheet12 .checks-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.ck {
  position: relative; isolation: isolate; aspect-ratio: 1; border-radius: 12px; overflow: hidden; container: ck / inline-size;
  background: var(--paper-2); border: 1px solid var(--rule);
  transition: border-color .3s ease, box-shadow .3s ease;
}
.ck:hover, .ck:focus-within, .ck.is-open { border-color: color-mix(in srgb, var(--c) 60%, var(--rule)); box-shadow: 0 16px 34px -20px color-mix(in srgb, var(--c) 70%, transparent); }
.ck-btn {
  display: grid; grid-template-rows: minmax(0, 1fr) auto auto; width: 100%; height: 100%; margin: 0; padding: 14px;
  border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.ck-btn:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: -4px; border-radius: 10px; }
.ck-glyph { display: grid; place-items: center; min-height: 0; padding-bottom: 6px; }
.ck-glyph svg { width: clamp(42px, 4.6vw, 60px); height: auto; overflow: visible; color: var(--ink); transition: transform .45s var(--ease); }
.ck:hover .ck-glyph svg, .ck.is-open .ck-glyph svg { transform: translateY(-3px) scale(1.04); }
.ck-glyph .g-stroke { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ck-glyph .g-fill { fill: currentColor; }
.ck-glyph .g-acc { fill: var(--c); }
.ck-glyph .g-acc-stroke { stroke: var(--c); }
.ck-n { font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em; color: var(--ink-3); }
.ck-title { display: block; margin-top: 2px; font-size: clamp(13.5px, 1.05vw, 15.5px); font-weight: 600; line-height: 1.2; letter-spacing: -.012em; text-wrap: balance; }
/* the box the brush ticks, top right */
.ck-mark {
  position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 20px; height: 20px;
  border: 1.5px solid rgba(22, 21, 29, .3); border-radius: 6px; background: transparent;
  transition: background-color .4s ease, border-color .4s ease, border-radius .5s var(--ease), transform .5s var(--ease);
}
.ck-mark svg { width: 14px; height: 14px; overflow: visible; }
.ck-tick { fill: none; stroke: #fdfcff; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .45s var(--ease) .12s; }
.ck.is-painted .ck-mark { background: var(--c); border-color: var(--c); border-radius: 48% 52% 46% 54% / 55% 45% 55% 45%; transform: rotate(-6deg) scale(1.1); }
.ck.is-painted .ck-tick { stroke-dashoffset: 0; }
/* the rule, on the back of the cell */
.ck-desc {
  position: absolute; inset: 0; z-index: 2; display: grid; grid-template-rows: minmax(0, 1fr) auto; align-content: stretch; gap: 9px; margin: 0; padding: 12px;
  background: color-mix(in srgb, var(--c) 16%, var(--paper-2)); color: var(--ink);
  font-size: 13px; line-height: 1.45;
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity .25s ease, transform .35s var(--ease);
}
.ck-desc-n { font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em; color: color-mix(in srgb, var(--c) 55%, var(--ink)); }
.ck:hover .ck-desc, .ck:focus-within .ck-desc, .ck.is-open .ck-desc { opacity: 1; transform: none; }
/* the foot: the count, the stamp, the signature */
.sheet12-foot {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0 clamp(18px, 2.6vw, 40px);
  margin-top: 14px; padding: 14px 6px 4px; border-top: 1.5px solid var(--ink);
}
.sheet12-tally { display: flex; align-items: baseline; gap: 1px; margin: 0; }
.tally-n { font-size: 30px; font-weight: 600; line-height: 1; letter-spacing: -.04em; color: var(--ink); font-variant-numeric: tabular-nums; }
.tally-of { font-size: 15px; font-weight: 500; color: var(--ink-3); }
.ledger-stamp {
  --stamp: color-mix(in srgb, var(--p-pink) 60%, #5c1712);
  justify-self: center; display: inline-flex; flex-direction: column; align-items: center; gap: 1px; padding: 5px 12px 6px;
  border: 2px solid var(--stamp); border-radius: 9px; color: var(--stamp); mix-blend-mode: multiply;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  box-shadow: inset 0 0 0 2px var(--paper), inset 0 0 0 3px var(--stamp);
  rotate: -9deg; opacity: 0; scale: 1.7; transition: opacity .2s ease, scale .5s cubic-bezier(.2, 1.5, .4, 1);
}
.ledger-stamp b { font-family: var(--f-sans); font-size: 19px; font-weight: 700; letter-spacing: -.01em; line-height: 1.05; }
.sheet12.is-passed .ledger-stamp { opacity: .92; scale: 1; }
.ledger-sign { display: flex; flex-direction: column; align-items: flex-end; min-width: 178px; text-align: right; }
.sign-name {
  font-family: var(--f-serif); font-style: italic; font-weight: 500; font-size: 30px; line-height: 1.05; color: var(--accent-deep); letter-spacing: -.01em;
  clip-path: inset(-10% 100% -20% 0); transition: clip-path 1.3s cubic-bezier(.55, 0, .2, 1) .35s;
}
.sheet12.is-passed .sign-name { clip-path: inset(-10% -4% -20% 0); }
.sign-role { margin-top: 5px; padding-top: 6px; min-width: 100%; border-top: 1px dashed rgba(22, 21, 29, .32); font-family: var(--f-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
/* Home only (the section also carries .sheet there; /secret-touch keeps the paper ledger): the grid in dark,
   same markup and order. The tokens below re-point everything the sheet already reads; .ck gets --ink (0..1, the
   brush progress) from drawChecks, which also drives the soft rise of each cell. */
.checks.sheet .sheet12 {
  --paper: #15141b; --paper-2: #1c1b25; --ink: var(--cream); --ink-2: var(--cream-2); --ink-3: rgba(243, 241, 247, .7);
  --rule: var(--rule-dark); --accent-deep: var(--accent);
  padding: clamp(14px, 1.9vw, 26px); border-radius: 24px; border: 1px solid var(--rule-dark);
  background:
    radial-gradient(70% 50% at 100% 0%, color-mix(in srgb, var(--holo-4) 10%, transparent), transparent 70%),
    radial-gradient(60% 50% at 0% 100%, color-mix(in srgb, var(--holo-1) 10%, transparent), transparent 70%),
    var(--paper);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 50px 100px -40px rgba(0, 0, 0, .9), 0 14px 34px rgba(0, 0, 0, .4);
}
.checks.sheet .checks-head { grid-template-columns: 1fr; }
.checks.sheet .sheet12 .checks-list { gap: clamp(8px, 1vw, 14px); }
.checks.sheet .ck {
  border-radius: 16px; border-color: var(--rule-dark);
  background: linear-gradient(165deg, color-mix(in srgb, var(--c) 7%, var(--paper-2)) 0%, var(--paper-2) 55%, color-mix(in srgb, var(--paper-2) 80%, #000) 100%);
  opacity: calc(.35 + var(--ink) * .65); transform: translateY(calc((1 - var(--ink)) * 10px));
  transition: border-color .35s ease, box-shadow .35s ease, translate .4s var(--ease);
}
.checks.sheet .ck::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .55; transition: opacity .4s ease;
  background: radial-gradient(80% 70% at 85% 0%, color-mix(in srgb, var(--c) 20%, transparent), transparent 70%);
}
.checks.sheet .ck:hover, .checks.sheet .ck:focus-within, .checks.sheet .ck.is-open {
  translate: 0 -3px; border-color: color-mix(in srgb, var(--c) 55%, var(--rule-dark));
  box-shadow: 0 22px 40px -22px color-mix(in srgb, var(--c) 60%, transparent), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.checks.sheet .ck:hover::before, .checks.sheet .ck:focus-within::before, .checks.sheet .ck.is-open::before { opacity: 1; }
.checks.sheet .ck-btn { position: relative; z-index: 1; padding: 16px; }
.checks.sheet .ck-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -5px; border-radius: 14px; }
.checks.sheet .ck-glyph { position: relative; }
.checks.sheet .ck-glyph::before {
  content: ''; position: absolute; inset: 0; margin: auto; width: clamp(64px, 6.6vw, 90px); height: clamp(64px, 6.6vw, 90px); border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--c) 24%, transparent), transparent 68%);
}
.checks.sheet .ck-glyph svg { position: relative; color: var(--cream-2); transition: transform .45s var(--ease), color .3s ease; }
.checks.sheet .ck:hover .ck-glyph svg, .checks.sheet .ck.is-open .ck-glyph svg { color: var(--cream); }
.checks.sheet .ck-n { position: absolute; top: 16px; left: 16px; font-variant-numeric: tabular-nums; }
.checks.sheet .ck-title { color: var(--cream); font-size: clamp(14px, 1.12vw, 16px); letter-spacing: -.015em; }
.checks.sheet .ck-mark { top: 12px; right: 12px; width: 22px; height: 22px; border-color: rgba(243, 241, 247, .3); }
.checks.sheet .ck-tick { stroke: var(--night); }
.checks.sheet .ck.is-painted .ck-mark {
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 82%, #fff), var(--c));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 18%, transparent), 0 4px 14px color-mix(in srgb, var(--c) 42%, transparent);
}
.checks.sheet .ck-desc {
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 10%, var(--paper-2)), color-mix(in srgb, var(--c) 22%, var(--paper)));
  color: var(--cream); font-size: 13.5px; line-height: 1.5; padding: 12px; z-index: 2;
}
.checks.sheet .ck-desc-n { color: color-mix(in srgb, var(--c) 70%, #fff); }
@media (max-width: 900px) {
  .checks.sheet .ck-btn { padding: 12px; }
  .checks.sheet .ck-n { top: 13px; left: 13px; }
  .checks.sheet .ck-mark { top: 10px; right: 10px; }
  .checks.sheet .ck-desc { font-size: 12.5px; padding: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .checks.sheet .ck, .checks.sheet .ck::before, .checks.sheet .ck-glyph svg { transition: none; }
  .checks.sheet .ck:hover, .checks.sheet .ck:focus-within, .checks.sheet .ck.is-open { translate: none; }
}
@media (max-width: 900px) {
  .checks-head { grid-template-columns: 1fr; }
  .sheet12 .checks-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .ck-btn { padding: 12px; }
  .ck-title { font-size: 13.5px; }
  .ck-desc { font-size: 12.5px; padding: 12px; }
  .sheet12-foot { grid-template-columns: auto minmax(0, 1fr); row-gap: 12px; }
  .ledger-sign { grid-column: 1 / -1; align-items: flex-start; text-align: left; }
  .ledger-stamp { justify-self: end; }
}
@media (max-width: 560px) {
  .sheet12 .checks-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .ck, .ck-glyph svg, .ck-mark, .ck-tick, .ck-desc, .ledger-stamp, .sign-name { transition: none; }
}

/* ── The 12 checks, shown in an interface (2026-10-26, second pass). Hovering, focusing or tapping a cell turns it over:
   the top is a real-looking screen that applies the rule, cut off by the tile like a screenshot, and under it sit the
   title and the rule. The screens are decorative (aria-hidden): the title and the rule are the text. Everything inside
   is sized in em from the cell width (container query), so a screen scales with its cell; it is drawn for a cell about
   275 px wide, 1em = 14 px, 19.6em by 12em. A screen rests on its finished state; the motion (only for people who have
   not asked for reduced motion) plays the "before" turning into it. ── */
.ck-desc, .checks.sheet .ck-desc { padding: 0; gap: 0; }
.ck-demo { position: relative; display: block; min-height: 0; font-size: 11px; font-size: clamp(8px, 5.1cqw, 15px); line-height: 1.25; }
.ck-rule { box-sizing: border-box; margin: 0; padding: 9px 14px 12px; border-top: 1px solid color-mix(in srgb, var(--c) 32%, transparent); font-size: 12px; line-height: 1.38; }
.ck-rule-t { display: block; margin-bottom: 2px; font-size: 13.5px; font-weight: 650; letter-spacing: -.01em; }
.ck-rule-t .ck-desc-n { margin-right: 7px; font-weight: 500; }
.ck-rule-d { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; color: var(--ink-2); }
@container ck (max-width: 236px) { .ck-rule-d { display: none; } }
/* one caption height (title + four lines of rule) so the line under the screens sits at the same height on every tile */
@container ck (min-width: 237px) { .ck-rule { min-height: 109px; } }
/* the front of a tile says it opens: a small plus bottom right, under the title's reach */
.ck-btn { position: relative; }
.ck-btn::after {
  content: '+'; position: absolute; right: 12px; bottom: 12px; display: grid; place-items: center; width: 22px; height: 22px;
  border: 1px solid var(--rule); border-radius: 50%; color: var(--ink-3); font-size: 15px; font-weight: 500; line-height: 1;
}
.ck-btn .ck-title { padding-right: 28px; }

.d {
  --d-bg: #fbfafd; --d-ink: #16151d; --d-mute: #6b6977; --d-line: #e4e2ea; --d-soft: #ece9f4; --d-ok: #1c9a68; --d-bad: #c0283f; --d-focus: #5a45d6;
  position: absolute; inset: 0; display: grid; align-content: center; gap: .6em; box-sizing: border-box; padding: 1em 1.15em; overflow: hidden;
  background: var(--d-bg); color: var(--d-ink); font-family: var(--f-sans); font-weight: 500; text-align: left;
}
.d span, .d i, .d b, .d em, .d s, .d u { display: block; font-style: normal; font-weight: inherit; text-decoration: none; }
.d b { font-weight: 650; }
.d em { font-family: var(--f-mono); font-size: .7em; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; line-height: 1.2; color: var(--d-mute); }
.d .sm { font-size: .8em; line-height: 1.3; color: var(--d-mute); }
.d .bt { display: grid; place-items: center; padding: .55em .9em; border-radius: .6em; background: var(--d-ink); color: #fff; font-size: .88em; font-weight: 650; text-align: center; }
.d .sk { background: linear-gradient(90deg, #e9e7f0 30%, #f7f6fb 50%, #e9e7f0 70%) 0 0 / 220% 100%; }
.d .ln { height: .45em; border-radius: .25em; background: var(--d-line); }
.d .ln.s { width: 62%; }
.d .av { display: grid; place-items: center; flex: none; width: 1.9em; height: 1.9em; border-radius: 50%; background: var(--d-soft); font-size: .78em; font-weight: 700; letter-spacing: .02em; }

/* 1. every state: one list, four states, switched from the tabs */
.d1 { grid-template-rows: auto minmax(0, 1fr); align-content: stretch; gap: .8em; }
.d1 .hd { display: flex; align-items: center; justify-content: space-between; gap: .8em; }
.d1 .hd b { font-size: 1.1em; letter-spacing: -.015em; }
.d1 .seg { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); padding: .2em; border-radius: .65em; background: var(--d-soft); }
.d1 .seg span { position: relative; z-index: 1; padding: .3em .5em; font-size: .72em; font-weight: 650; text-align: center; color: #4a4857; }
.d1 .seg::before { content: ''; position: absolute; top: .2em; bottom: .2em; left: .2em; width: calc((100% - .4em) / 4); border-radius: .5em; background: #fff; box-shadow: 0 1px 3px rgba(22, 21, 29, .2); transform: translateX(300%); }
.d1 .bd { position: relative; min-height: 0; }
.d1 .st { position: absolute; inset: 0; display: grid; align-content: start; gap: .1em; }
.d1 .st:not(.st-o) { opacity: 0; }
.d1 .st-e, .d1 .st-x { justify-items: center; align-content: center; gap: .35em; text-align: center; }
.d1 .st-e b, .d1 .st-x b { font-size: .95em; }
.d1 .ic { display: grid; place-items: center; width: 2.1em; height: 2.1em; border-radius: .75em; border: .13em dashed color-mix(in srgb, var(--c) 75%, #16151d); font-size: 1em; }
.d1 .st-e .ic::after { content: '+'; font-size: 1.4em; font-weight: 500; line-height: 1; color: color-mix(in srgb, var(--c) 75%, #16151d); }
.d1 .st-x .ic { border: 0; background: var(--d-bad); color: #fff; border-radius: 50%; }
.d1 .st-x .ic::after { content: '!'; font-size: 1.3em; font-weight: 700; line-height: 1; }
.d1 .st-x .bt { background: var(--d-bad); }
.d1 .st .bt { padding: .35em .8em; font-size: .8em; }
.d1 .lr { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .65em; align-items: center; padding: .3em 0; }
.d1 .lr .sk { height: 1.5em; width: 1.5em; border-radius: 50%; }
.d1 .ls { display: grid; gap: .35em; }
.d1 .ls .sk { width: 100%; height: .55em; border-radius: .3em; }
.d1 .ls .sk + .sk { width: 58%; }
.d1 .rw { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: .7em; align-items: center; padding: .38em 0; border-bottom: 1px solid var(--d-line); }
.d1 .nm { font-size: .92em; }
.d1 .am { font-size: .92em; font-variant-numeric: tabular-nums; text-align: right; }
.d1 .pl { padding: .1em .6em; border-radius: 1em; background: color-mix(in srgb, var(--d-ok) 16%, #fff); color: #0e6b47; font-size: .68em; font-weight: 700; }
.d1 .pl.due { background: #fdeccb; color: #8a5a00; }

/* 2. buttons name the action: "Submit" becomes "Send my brief", and the next step appears under it */
.d2 { gap: .6em; }
.d2 .ti { font-size: 1.12em; letter-spacing: -.015em; }
.d2 .fld { display: grid; gap: .25em; }
.d2 .fld > span:first-child { font-size: .74em; font-weight: 650; }
.d2 .fl { padding: .6em .75em; border: 1px solid #d3d0dd; border-radius: .6em; background: #fff; font-size: .86em; }
.d2 .bt { position: relative; height: 2.6em; padding: 0; font-size: .95em; }
.d2 .bt span { position: absolute; inset: 0; display: grid; place-items: center; }
.d2 .was { opacity: 0; }
.d2 .bt::after { content: ''; position: absolute; inset: -.24em; border: .17em solid var(--c); border-radius: .9em; opacity: 0; }
.d2 .nt { display: flex; align-items: center; gap: .45em; font-size: .78em; color: var(--d-mute); }
.d2 .nt i { flex: none; width: 1.1em; height: 1.1em; border-radius: 50%; background: var(--d-ok); }

/* 3. your real content: the longest name and the longest price sit in the layout */
.d3 { gap: .3em; }
.d3 .r { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .7em; padding: .4em .55em; border-radius: .6em; }
.d3 .nm b { font-size: .9em; line-height: 1.18; }
.d3 .am { font-size: .9em; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.d3 .hot { background: color-mix(in srgb, var(--c) 24%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 70%, #16151d); }
.d3 .tg { justify-self: start; margin-top: .3em; padding: .25em .6em; border-radius: 1em; background: var(--d-ink); color: #fff; }

/* 4. checked by thumb: a phone cut by the tile, the reach of the thumb, a 44 px target */
.d4 { display: block; padding: 0; }
.d4 .ph { position: absolute; left: 2.4em; top: 1.1em; width: 7.6em; height: 13em; box-sizing: border-box; padding: .75em .65em; border: .18em solid var(--d-ink); border-radius: 1.2em; background: #fff; overflow: hidden; display: grid; align-content: start; gap: .5em; }
.d4 .zone { position: absolute; inset: 0; background: radial-gradient(circle at 96% 98%, rgba(28, 154, 104, .42) 0 38%, rgba(236, 170, 40, .36) 38% 66%, rgba(209, 67, 91, .24) 66% 92%, transparent 92%); }
.d4 .ph b { position: relative; font-size: .9em; }
.d4 .it { position: relative; display: flex; align-items: center; gap: .5em; }
.d4 .it i { flex: none; width: 1.5em; height: 1.5em; border-radius: .4em; background: var(--d-soft); }
.d4 .it .ln { flex: 1; }
.d4 .bt { position: absolute; left: .65em; right: .65em; top: 8.3em; height: 2.2em; padding: 0; font-size: .8em; }
.d4 .bt::after { content: ''; position: absolute; inset: 0; border: .2em solid var(--d-ink); border-radius: inherit; opacity: 0; }
.d4 .lg { position: absolute; left: 11.6em; top: 1.5em; display: grid; gap: .55em; font-size: .85em; font-weight: 600; }
.d4 .lg span { display: flex; align-items: center; gap: .55em; }
.d4 .lg i { flex: none; width: .9em; height: .9em; border-radius: .25em; }
.d4 .lg .g { background: rgba(28, 154, 104, .75); }
.d4 .lg .a { background: rgba(236, 170, 40, .8); }
.d4 .lg .r { background: rgba(209, 67, 91, .6); }
.d4 .br { position: absolute; left: 10.5em; top: 9.4em; width: .5em; height: 2.2em; border-left: .14em solid var(--d-ink); }
.d4 .br::before, .d4 .br::after { content: ''; position: absolute; left: 0; width: .5em; height: .14em; background: var(--d-ink); }
.d4 .br::before { top: 0; }
.d4 .br::after { bottom: 0; }
.d4 .br em { position: absolute; left: .9em; top: 50%; transform: translateY(-50%); white-space: nowrap; color: var(--d-ink); }

/* 5. keyboard and focus: the ring walks the form in order, the numbers are the tab order */
.d5 { gap: .75em; }
.d5 .hd { display: flex; align-items: center; justify-content: space-between; }
.d5 .hd b { font-size: 1.05em; letter-spacing: -.015em; }
.d5 .key { padding: .15em .6em .2em; border: 1px solid #d3d0dd; border-bottom-width: .2em; border-radius: .4em; font-family: var(--f-mono); font-size: .72em; font-weight: 600; color: var(--d-mute); }
.d5 .f, .d5 .bt { position: relative; }
.d5 .f { display: flex; align-items: center; padding: .6em .75em; border: 1px solid #d3d0dd; border-radius: .6em; background: #fff; font-size: .88em; }
.d5 .bt { padding-block: .6em; font-size: .92em; }
.d5 .n { position: absolute; left: -.6em; top: -.6em; z-index: 2; display: grid; place-items: center; width: 1.45em; height: 1.45em; border-radius: 50%; background: var(--d-ink); color: #fff; font-size: .72em; font-weight: 700; line-height: 1; }
.d5 .f::after, .d5 .bt::after { content: ''; position: absolute; inset: -.24em; border: .18em solid var(--d-focus); border-radius: .85em; opacity: 0; }
.d5 .i1::after { opacity: 1; }

/* 6. readable contrast: real ratios of the colours drawn */
.d6 { gap: .6em; }
.d6 .pr { display: grid; grid-template-columns: 1fr 1fr; gap: .6em; }
.d6 .sw { position: relative; padding: .45em .7em .55em; border: 1px solid var(--d-line); border-radius: .65em; background: #fff; }
.d6 .sw b { font-size: 2em; line-height: 1.05; }
.d6 .bad b { color: #a8a7b4; }
.d6 .good b { color: #4a4857; }
.d6 .sw::after { position: absolute; top: .45em; right: .6em; font-size: 1em; font-weight: 700; line-height: 1; }
.d6 .bad::after { content: '✕'; color: var(--d-bad); }
.d6 .good::after { content: '✓'; color: var(--d-ok); }
.d6 .photo { position: relative; display: grid; align-content: end; justify-items: start; gap: .45em; height: 4.6em; padding: .65em .8em; border-radius: .7em; overflow: hidden; background: linear-gradient(135deg, #4a56d8, #8a5cf0 55%, #f08a6a); }
.d6 .photo::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 10%, rgba(14, 13, 22, .66)); }
.d6 .photo b { position: relative; color: #fff; font-size: 1.05em; }
.d6 .photo .bt { position: relative; padding: .3em .8em; background: #5a45d6; font-size: .76em; }

/* 7. forms that help: label kept, error in plain words, typed text kept, the right keyboard */
.d7 { align-content: start; gap: .45em; padding-top: 1em; }
.d7 .lb { font-size: .78em; font-weight: 650; }
.d7 .in { display: flex; align-items: center; padding: .55em .75em; border: .13em solid var(--d-bad); border-radius: .6em; background: #fff; font-size: .9em; }
.d7 .cr { width: .1em; height: 1.15em; margin-left: .12em; background: var(--d-ink); }
.d7 .msg { display: flex; align-items: flex-start; gap: .5em; font-size: .78em; line-height: 1.3; color: var(--d-bad); }
.d7 .wn { flex: none; display: grid; place-items: center; width: 1.4em; height: 1.4em; border-radius: 50%; background: var(--d-bad); color: #fff; font-size: .9em; font-weight: 700; }
.d7 .kb { display: grid; gap: .3em; margin: .3em -1.15em 0; padding: .45em .6em .5em; background: #d9d6e3; }
.d7 .kr { display: flex; gap: .25em; }
.d7 .kr i { flex: 1; padding: .38em 0; border-radius: .3em; background: #fff; box-shadow: 0 1px 0 rgba(22, 21, 29, .28); font-size: .78em; font-weight: 600; text-align: center; }
.d7 .k2 i.hl { flex: 1.1; background: color-mix(in srgb, var(--c) 40%, #fff); }
.d7 .k2 i.sp { flex: 3; color: var(--d-mute); font-weight: 500; }

/* 8. one spacing and type scale: the steps, the ramp, the grid they sit on */
.d8 { grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 1.2em; }
.d8 .gr { position: absolute; inset: 0; pointer-events: none; opacity: .3; background: repeating-linear-gradient(0deg, color-mix(in srgb, var(--c) 65%, transparent) 0 1px, transparent 1px .8em); }
.d8 .sp { position: relative; display: grid; gap: .5em; justify-items: start; }
.d8 .bars { display: flex; align-items: flex-end; gap: .35em; }
.d8 .bars i { width: calc(var(--n) * .3em); aspect-ratio: 1; border-radius: .14em; background: color-mix(in srgb, var(--c) 75%, #16151d 14%); }
.d8 .ty { position: relative; display: grid; gap: .35em; }
.d8 .ty > em { margin-bottom: .1em; }
.d8 .ty span { display: flex; align-items: baseline; justify-content: space-between; gap: .8em; line-height: 1.1; }
.d8 .t1 { font-size: 1.45em; font-weight: 700; letter-spacing: -.02em; }
.d8 .t2 { font-size: 1.15em; font-weight: 650; }
.d8 .t3 { font-size: .9em; }
.d8 .t4 { font-size: .72em; color: var(--d-mute); }

/* 9. weight and stability: the picture's box is reserved, the text under it never moves */
.d9 { gap: .55em; }
.d9 .im { position: relative; height: 5em; border-radius: .65em; overflow: hidden; }
.d9 .im i { position: absolute; inset: 0; }
.d9 .pic { background: radial-gradient(55% 80% at 78% 30%, rgba(255, 255, 255, .55), transparent 70%), linear-gradient(135deg, #4a56d8, #9a68e6 52%, #f0889c); }
.d9 .sk { opacity: 0; }
.d9 .im::after { content: ''; position: absolute; inset: 0; border: .15em dashed color-mix(in srgb, var(--c) 70%, #16151d); border-radius: inherit; opacity: 0; }
.d9 .im em { position: absolute; left: .55em; bottom: .5em; z-index: 2; padding: .22em .5em; border-radius: .3em; background: rgba(22, 21, 29, .66); color: #fff; }
.d9 > b { font-size: 1.05em; letter-spacing: -.015em; }

/* 10. motion with care: the setting is on, the animation stops, the page still works */
.d10 { gap: .65em; }
.d10 .rw { display: flex; align-items: center; justify-content: space-between; font-size: .95em; }
.d10 .sw { position: relative; flex: none; width: 2.7em; height: 1.5em; border-radius: 1em; background: var(--d-ink); }
.d10 .kn { position: absolute; top: .18em; left: calc(100% - 1.32em); width: 1.14em; height: 1.14em; border-radius: 50%; background: #fff; }
.d10 .st { position: relative; height: 3.2em; border-radius: .65em; background: var(--d-soft); overflow: hidden; }
.d10 .ball { position: absolute; top: 50%; left: calc(50% - .7em); width: 1.4em; height: 1.4em; margin-top: -.7em; border-radius: 50%; background: color-mix(in srgb, var(--c) 85%, #fff); box-shadow: inset 0 0 0 .14em rgba(22, 21, 29, .5); }
.d10 .nt { display: flex; align-items: center; gap: .5em; font-size: .8em; color: var(--d-mute); }
.d10 .ok { display: grid; place-items: center; flex: none; width: 1.4em; height: 1.4em; border-radius: 50%; background: var(--d-ok); color: #fff; font-size: .85em; font-weight: 700; line-height: 1; }

/* 11. link preview checked: the link as it lands in a chat, and the three things that were ticked */
.d11 { align-content: start; gap: .6em; padding-top: .9em; background: linear-gradient(180deg, #f3f1f8, #fbfafd); }
.d11 .bub { justify-self: end; width: 90%; box-sizing: border-box; padding: .5em; border-radius: 1em 1em .3em 1em; background: #e2defa; }
.d11 .lk { margin: 0 .2em .4em; font-size: .78em; color: #4636b0; text-decoration: underline; }
.d11 .cd { overflow: hidden; border-radius: .65em; background: #fff; }
.d11 .im { position: relative; height: 2.7em; background: linear-gradient(120deg, color-mix(in srgb, var(--c) 55%, #fff), #b9a8f2 55%, #f7b49a); }
.d11 .sh { position: absolute; left: 50%; top: 50%; width: 1.5em; height: 1.5em; margin: -.75em 0 0 -.75em; border-radius: .45em; background: var(--d-ink); transform: rotate(12deg); }
.d11 .mt { display: grid; gap: .12em; padding: .45em .65em .5em; }
.d11 .mt b { font-size: .88em; line-height: 1.2; }
.d11 .mt span { font-size: .72em; line-height: 1.3; color: var(--d-mute); }
.d11 .chips { display: flex; flex-wrap: wrap; gap: .3em 1em; }
.d11 .chip { display: flex; align-items: center; gap: .4em; font-size: .78em; font-weight: 650; }
.d11 .chip i { position: relative; width: 1.3em; height: 1.3em; border-radius: 50%; background: var(--d-ok); }
.d11 .chip i::after { content: ''; position: absolute; left: .44em; top: .2em; width: .3em; height: .6em; border: solid #fff; border-width: 0 .15em .15em 0; transform: rotate(40deg); }

/* 12. generic AI defaults removed: the stock hero gives way to a page written for its brand */
.d12 { padding: 0; gap: 0; }
.d12 .ly { position: absolute; inset: 0; display: grid; align-content: start; gap: .5em; box-sizing: border-box; padding: 0 1.15em 1em; }
.d12 .nv { display: flex; align-items: center; gap: .7em; margin: 0 -1.15em .7em; padding: .6em 1.15em; border-bottom: 1px solid var(--d-line); font-size: .74em; font-weight: 650; }
.d12 .nv i { flex: none; width: 1.2em; height: 1.2em; border-radius: 50%; }
.d12 .nv span { color: var(--d-mute); font-weight: 500; }
.d12 .nv .bt { margin-left: auto; padding: .3em .8em; font-size: 1em; color: #fff; }
.d12 .a { justify-items: center; background: linear-gradient(135deg, #f1f0ff, #f6ecff); text-align: center; }
.d12 .a .nv { background: rgba(255, 255, 255, .6); }
.d12 .a .nv i { background: linear-gradient(135deg, #6a5cff, #b25cff); }
.d12 .a .nv .bt { background: linear-gradient(90deg, #6a5cff, #b25cff); }
.d12 .orb { width: 2em; height: 2em; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #fff, #8f7bff 40%, #4b6bff 70%, #b25cff); }
.d12 .a h5 { margin: 0; font-size: 1.05em; font-weight: 700; letter-spacing: -.01em; }
.d12 .a .bt { background: linear-gradient(90deg, #6a5cff, #b25cff); }
.d12 .b { justify-items: start; background: #fbf7ef; }
.d12 .b .nv i { background: #2f6b4f; }
.d12 .b .nv .bt { background: #2f6b4f; }
.d12 .b h5 { margin: 0; max-width: 11em; font-family: var(--f-serif); font-size: 1.55em; font-style: italic; font-weight: 500; line-height: 1.02; letter-spacing: -.01em; }
.d12 .b .sm { max-width: 11em; }
.d12 .b .bt { background: #2f6b4f; }
.d12 .plate { position: absolute; right: -2.2em; bottom: -2.2em; width: 9em; height: 9em; border-radius: 50%; background: radial-gradient(circle at 50% 50%, #e9a35c 0 22%, #f6e7c8 22% 34%, #fff 34% 62%, #e4dccb 62%); box-shadow: 0 .8em 1.4em -.8em rgba(22, 21, 29, .5); }
.d12 .wp { position: absolute; top: 0; bottom: 0; left: 100%; width: .16em; background: var(--c); box-shadow: 0 0 .8em var(--c); opacity: 0; }

/* the motion: only on hover, focus or tap, and only without a reduced-motion request */
@media (prefers-reduced-motion: no-preference) {
  .ck:is(:hover, :focus-within, .is-open) .d { animation: ckd-in .5s var(--ease) both; }
  .ck:is(:hover, :focus-within, .is-open) .d1 .seg::before { animation: ckd-1-pill 8s var(--ease) infinite; }
  .ck:is(:hover, :focus-within, .is-open) .d1 .st-e { animation: ckd-1-e 8s infinite; }
  .ck:is(:hover, :focus-within, .is-open) .d1 .st-l { animation: ckd-1-l 8s infinite; }
  .ck:is(:hover, :focus-within, .is-open) .d1 .st-x { animation: ckd-1-x 8s infinite; }
  .ck:is(:hover, :focus-within, .is-open) .d1 .st-o { animation: ckd-1-o 8s infinite; }
  .ck:is(:hover, :focus-within, .is-open) .d1 .sk { animation: ckd-shimmer 1.2s linear infinite; }
  .ck:is(:hover, :focus-within, .is-open) .d2 .was { animation: ckd-2-was 2.8s both; }
  .ck:is(:hover, :focus-within, .is-open) .d2 .now { animation: ckd-2-now 2.8s both; }
  .ck:is(:hover, :focus-within, .is-open) .d2 .bt::after { animation: ckd-2-ring 2.8s both; }
  .ck:is(:hover, :focus-within, .is-open) .d2 .nt { animation: ckd-2-nt 2.8s both; }
  .ck:is(:hover, :focus-within, .is-open) .d3 .hot { animation: ckd-3-hot 1.6s ease-in-out .35s 2 both; }
  .ck:is(:hover, :focus-within, .is-open) .d4 .zone { animation: ckd-4-zone 1.4s var(--ease) both; }
  .ck:is(:hover, :focus-within, .is-open) .d4 .lg span { animation: ckd-4-lg .5s var(--ease) both; }
  .ck:is(:hover, :focus-within, .is-open) .d4 .lg span:nth-child(2) { animation-delay: .2s; }
  .ck:is(:hover, :focus-within, .is-open) .d4 .lg span:nth-child(3) { animation-delay: .4s; }
  .ck:is(:hover, :focus-within, .is-open) .d4 .bt::after { animation: ckd-tap 2.4s .6s infinite; }
  .ck:is(:hover, :focus-within, .is-open) .d5 .i1::after { animation: ckd-5-1 3.6s infinite; }
  .ck:is(:hover, :focus-within, .is-open) .d5 .i2::after { animation: ckd-5-2 3.6s infinite; }
  .ck:is(:hover, :focus-within, .is-open) .d5 .i3::after { animation: ckd-5-3 3.6s infinite; }
  .ck:is(:hover, :focus-within, .is-open) .d5 .key { animation: ckd-5-key 3.6s infinite; }
  .ck:is(:hover, :focus-within, .is-open) .d6 .photo::before { animation: ckd-fade 1.4s ease both; }
  .ck:is(:hover, :focus-within, .is-open) .d7 .cr { animation: ckd-blink 1s steps(1) infinite; }
  .ck:is(:hover, :focus-within, .is-open) .d7 .msg { animation: ckd-7-msg .5s var(--ease) .4s both; }
  .ck:is(:hover, :focus-within, .is-open) .d8 .gr { animation: ckd-8-grid 1.8s ease both; }
  .ck:is(:hover, :focus-within, .is-open) .d9 .sk { animation: ckd-9-sk 2.8s both, ckd-shimmer 1.1s linear infinite; }
  .ck:is(:hover, :focus-within, .is-open) .d9 .pic { animation: ckd-9-pic 2.8s both; }
  .ck:is(:hover, :focus-within, .is-open) .d9 .im::after { animation: ckd-9-box 2.8s both; }
  .ck:is(:hover, :focus-within, .is-open) .d10 .sw { animation: ckd-10-sw 4s ease infinite; }
  .ck:is(:hover, :focus-within, .is-open) .d10 .kn { animation: ckd-10-kn 4s ease infinite; }
  .ck:is(:hover, :focus-within, .is-open) .d10 .ball { animation: ckd-10-ball 4s ease-in-out infinite; }
  .ck:is(:hover, :focus-within, .is-open) .d11 .bub { animation: ckd-11-bub .6s var(--ease) both; }
  .ck:is(:hover, :focus-within, .is-open) .d11 .chip i { animation: ckd-pop .45s var(--ease) both; }
  .ck:is(:hover, :focus-within, .is-open) .d11 .chip:nth-child(1) i { animation-delay: .6s; }
  .ck:is(:hover, :focus-within, .is-open) .d11 .chip:nth-child(2) i { animation-delay: 1s; }
  .ck:is(:hover, :focus-within, .is-open) .d11 .chip:nth-child(3) i { animation-delay: 1.4s; }
  .ck:is(:hover, :focus-within, .is-open) .d12 .b { animation: ckd-12-b 2.8s var(--ease) both; }
  .ck:is(:hover, :focus-within, .is-open) .d12 .wp { animation: ckd-12-wp 2.8s var(--ease) both; }
}
@keyframes ckd-in { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: none; } }
@keyframes ckd-shimmer { to { background-position: -120% 0; } }
@keyframes ckd-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes ckd-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ckd-blink { 50% { opacity: 0; } }
@keyframes ckd-1-pill { 0%, 20% { transform: translateX(0); } 25%, 45% { transform: translateX(100%); } 50%, 70% { transform: translateX(200%); } 75%, 92% { transform: translateX(300%); } 100% { transform: translateX(0); } }
@keyframes ckd-1-e { 0%, 20% { opacity: 1; } 25%, 92% { opacity: 0; } 100% { opacity: 1; } }
@keyframes ckd-1-l { 0%, 20% { opacity: 0; } 25%, 45% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes ckd-1-x { 0%, 45% { opacity: 0; } 50%, 70% { opacity: 1; } 75%, 100% { opacity: 0; } }
@keyframes ckd-1-o { 0%, 70% { opacity: 0; } 75%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ckd-2-was { 0%, 40% { opacity: 1; } 55%, 100% { opacity: 0; } }
@keyframes ckd-2-now { 0%, 40% { opacity: 0; transform: translateY(.5em); } 55%, 100% { opacity: 1; transform: none; } }
@keyframes ckd-2-ring { 0%, 50% { opacity: 0; transform: scale(.94); } 60% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(1.05); } }
@keyframes ckd-2-nt { 0%, 55% { opacity: 0; transform: translateY(-.3em); } 70%, 100% { opacity: 1; transform: none; } }
@keyframes ckd-3-hot { 0%, 100% { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 70%, #16151d); } 50% { box-shadow: inset 0 0 0 .2em color-mix(in srgb, var(--c) 85%, #16151d); } }
@keyframes ckd-4-zone { from { opacity: 0; transform: scale(.4); transform-origin: 96% 98%; } to { opacity: 1; transform: none; transform-origin: 96% 98%; } }
@keyframes ckd-4-lg { from { opacity: 0; transform: translateX(-.6em); } to { opacity: 1; transform: none; } }
@keyframes ckd-tap { 0%, 45% { opacity: 0; transform: scale(.88); } 55% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(1.14); } }
@keyframes ckd-5-1 { 0%, 28% { opacity: 1; } 34%, 100% { opacity: 0; } }
@keyframes ckd-5-2 { 0%, 28% { opacity: 0; } 34%, 62% { opacity: 1; } 68%, 100% { opacity: 0; } }
@keyframes ckd-5-3 { 0%, 62% { opacity: 0; } 68%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ckd-5-key { 0%, 100% { transform: none; } 30%, 64% { transform: translateY(.12em); } 33%, 67% { transform: none; } }
@keyframes ckd-7-msg { from { opacity: 0; transform: translateY(-.4em); } to { opacity: 1; transform: none; } }
@keyframes ckd-8-grid { 0% { opacity: 0; } 40% { opacity: .6; } 100% { opacity: .3; } }
@keyframes ckd-9-sk { 0%, 55% { opacity: 1; } 62%, 100% { opacity: 0; } }
@keyframes ckd-9-pic { 0%, 55% { opacity: 0; } 65%, 100% { opacity: 1; } }
@keyframes ckd-9-box { 0%, 55% { opacity: 1; } 65%, 100% { opacity: 0; } }
@keyframes ckd-10-sw { 0%, 52% { background: #cfcdd8; } 58%, 100% { background: var(--d-ink); } }
@keyframes ckd-10-kn { 0%, 52% { left: .18em; } 58%, 100% { left: calc(100% - 1.32em); } }
@keyframes ckd-10-ball { 0% { transform: translateX(-5.5em); } 13% { transform: translateX(5.5em); } 26% { transform: translateX(-5.5em); } 39% { transform: translateX(5.5em); } 52%, 100% { transform: none; } }
@keyframes ckd-11-bub { from { opacity: 0; transform: translateY(.8em) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes ckd-12-b { 0%, 18% { clip-path: inset(0 100% 0 0); } 62%, 100% { clip-path: inset(0); } }
@keyframes ckd-12-wp { 0%, 18% { left: 0; opacity: 1; } 62% { left: 100%; opacity: 1; } 63%, 100% { left: 100%; opacity: 0; } }

/* ── 6. PACKAGES (still, on purpose) ── */
.pricing { background: var(--paper); color: var(--ink); padding: var(--section) 0; --c: var(--p-cyan); }
.pricing .lede { color: var(--ink-2); }
.prices { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.price {
  position: relative; display: flex; flex-direction: column; gap: 16px;
  padding: 28px 22px 24px; border-radius: var(--r-big);
  background: var(--paper-2); border: 1px solid var(--rule);
  transition: opacity .3s ease, box-shadow .3s ease, transform .3s var(--ease);
}
.price.is-featured {
  background: var(--moss); color: var(--cream); border-color: transparent;
  box-shadow: var(--e2), inset 0 1px 0 var(--edge);
}
.price.is-featured::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(150deg, rgba(243, 241, 247, .5), rgba(243, 241, 247, .06) 30%, rgba(243, 241, 247, .04) 68%, rgba(217, 122, 60, .45));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.price-tag {
  position: absolute; top: 22px; right: 22px; padding: 5.5px 10px 4.5px; border-radius: 6px;
  background: var(--holo); color: var(--accent-ink); font-size: 11px; font-weight: 700; letter-spacing: .02em;
}
.price-name { font-weight: 600; font-size: 26px; line-height: 1; letter-spacing: -.025em; }
.price-for { font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.is-featured .price-for, .is-featured .price-cad, .is-featured .price-meta dt, .is-featured .price-excl summary { color: var(--cream-2); }
.price-amount { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.price-amount strong {
  font-weight: 600; font-size: clamp(48px, 4.4vw, 66px); line-height: .9; letter-spacing: -.045em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.price-cad { font-size: 14px; color: var(--ink-3); }
/* The facts row: up to three short cells side by side, label above value. */
.price-meta { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 12px; padding: 14px 0; border-block: 1px solid var(--rule); }
.price-meta > div { display: grid; align-content: start; gap: 5px; min-width: 0; }
.price-meta > div + div { padding-left: 12px; border-left: 1px solid var(--rule); }
.is-featured .price-meta > div + div { border-left-color: var(--rule-dark); }
.price-amount strong small { font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--ink-3); margin-right: 5px; }
.is-featured .price-amount strong small { color: var(--cream-2); }
.is-featured .price-meta { border-top-color: var(--rule-dark); }
.price-meta dt { font-size: 12px; line-height: 1.2; color: var(--ink-3); }
.price-meta dd { font-size: 14px; font-weight: 600; line-height: 1.3; text-wrap: balance; }
.price-meta dd small { display: block; margin-top: 3px; font-size: 12px; font-weight: 400; color: var(--ink-3); }
.price-incl li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; padding: 5px 0; font-size: 14px; line-height: 1.5; }
.price-incl li svg { width: 17px; height: 17px; margin-top: 2px; color: color-mix(in srgb, var(--c) 55%, var(--ink)); }
.is-featured .price-incl li svg { color: var(--accent); }
.price-excl summary {
  display: flex; align-items: center; justify-content: space-between; min-height: 44px; cursor: pointer;
  border-top: 1px solid var(--rule); font-size: 14px; font-weight: 600; color: var(--ink-2); list-style: none;
  transition: color .2s ease;
}
.price-excl summary:hover { color: var(--ink); }
.is-featured .price-excl summary { border-top-color: var(--rule-dark); }
.is-featured .price-excl summary:hover { color: var(--cream); }
.price-excl summary::-webkit-details-marker { display: none; }
.price-excl summary::after { content: '+'; font-size: 20px; font-weight: 400; transition: transform .25s var(--ease); }
.price-excl[open] summary::after { transform: rotate(45deg); }
.price-excl li { padding: 4px 0 4px 18px; position: relative; font-size: 13px; line-height: 1.5; color: var(--ink-3); }
.is-featured .price-excl li { color: var(--cream-3); }
.price-excl li::before { content: ''; position: absolute; left: 0; top: 12px; width: 9px; height: 1.5px; background: currentColor; }
.price-excl::details-content, .day2-terms::details-content { height: 0; overflow: clip; transition: height .4s var(--ease), content-visibility .4s allow-discrete; }
.price-excl[open]::details-content, .day2-terms[open]::details-content { height: auto; }
.price-cta { margin-top: auto; width: 100%; }
.price-note { font-size: 13px; line-height: 1.5; color: var(--ink); }
.is-featured .price-note { color: var(--cream); }
.extras { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 16px; }
.custom { padding: 24px 26px; border-radius: var(--r-big); border: 1px solid var(--rule); background: transparent; }
.addons { padding: 24px 0 6px; border-top: 1px solid var(--rule); }
.addons h3 { font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; }
.addons li { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; border-top: 1px solid var(--rule); font-size: 14px; }
.addons li strong { font-variant-numeric: tabular-nums; white-space: nowrap; }
.addons-note { margin-top: 10px; font-size: 12px; color: var(--ink-3); line-height: 1.5; }
.custom { display: flex; flex-direction: column; gap: 16px; justify-content: space-between; text-align: left; cursor: pointer; font-size: 16px; line-height: 1.55; color: var(--ink); text-decoration: none; transition: border-color .2s ease, background-color .2s ease; }
.custom:hover { border-color: var(--ink); background: var(--paper-2); }
.custom .link-arrow { color: var(--ink); }
.pricing-small { margin-top: 28px; display: grid; gap: 10px; font-size: 13px; color: var(--ink-3); }
.pricing-small a { color: var(--ink); display: inline-block; padding: 6px 0; }
.pricing-refund { display: inline-flex; align-items: center; font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none; }
.pricing-refund .dab--inline { --c: var(--p-purple); }
.pricing-refund:hover { text-decoration: underline; }

/* "Where are you starting from?" */
.pick { margin-bottom: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.pick-title { font-weight: 600; font-size: 17px; letter-spacing: -.01em; color: var(--ink); margin-right: 4px; }
.pick-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.pick-btn {
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 8px 16px 8px 12px;
  border-radius: var(--r-ctl); border: 1px solid var(--rule); background: var(--paper-2); color: var(--ink);
  font-size: 14px; font-weight: 600; cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease, transform .16s var(--ease);
}
.pick-btn i { width: 11px; height: 11px; border-radius: 48% 52% 46% 54% / 55% 45% 55% 45%; background: var(--c); transition: transform .3s var(--ease); }
.pick-btn:hover { border-color: var(--ink); }
.pick-btn:active { transform: scale(.98); }
.pick-btn[aria-pressed='true'] { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.pick-btn[aria-pressed='true'] i { transform: scale(1.3); }
.price.is-dim { --dim: .55; }
.price.is-picked { box-shadow: 0 0 0 2px var(--c), var(--e2); transform: translateY(-2px); }
.price.is-picked .price-cta { background: var(--holo-loop) 0 50% / 200% 100%; color: var(--accent-ink); }
.price.is-picked .price-cta:hover { background-position: 100% 50%; }
.price.is-featured.is-picked { box-shadow: 0 0 0 2px var(--accent), var(--e2); }

/* ── Pricing and founder, entrance and second level (2026-10-27). The cards, add-ons and order steps rise as they scroll in
   (--in from observeIn). A card keeps its own transform (picked) and its own dim: the entrance uses translate and a
   --dim factor, so they never fight. The info button under "Revisions" opens the written detail; the Build switch has a
   sliding thumb. In the founder block each fact opens one shared panel (career line, products, figures). Opacity and
   transform only; nothing moves under a reduced-motion request. ── */
.price { opacity: calc(var(--in, 1) * var(--dim, 1)); translate: 0 calc((1 - var(--in, 1)) * 24px); transition: opacity .7s ease, box-shadow .3s ease, transform .3s var(--ease), translate .8s var(--ease), border-color .3s ease; }
@media (hover: hover) and (pointer: fine) {
  .price:not(.is-picked):not(.is-featured):hover { border-color: color-mix(in srgb, var(--c) 45%, var(--rule)); box-shadow: 0 22px 46px -30px rgba(22, 21, 29, .45); }
  .price.is-featured:not(.is-picked):hover { box-shadow: var(--e2), 0 22px 46px -26px color-mix(in srgb, var(--accent) 40%, transparent), inset 0 1px 0 var(--edge); }
}
.price-info {
  display: inline-grid; place-items: center; width: 17px; height: 17px; margin-left: 7px; padding: 0; border: 1px solid color-mix(in srgb, currentColor 38%, transparent);
  border-radius: 50%; background: none; color: inherit; font-family: var(--f-serif); font-size: 11px; font-weight: 600; font-style: italic; line-height: 1;
  vertical-align: .1em; cursor: pointer; opacity: .85; -webkit-tap-highlight-color: transparent;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, opacity .25s ease;
}
.price-info i { font-style: italic; }
.price-info:hover, .price-info[aria-expanded='true'] { opacity: 1; border-color: var(--ink); background: var(--ink); color: var(--cream); }
.is-featured .price-info:hover, .is-featured .price-info[aria-expanded='true'] { border-color: var(--cream); background: var(--cream); color: var(--night); }
.price-info:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 3px; }
.px-more { display: grid; grid-template-rows: 0fr; margin-top: -14px; transition: grid-template-rows .5s var(--ease), margin-top .5s var(--ease); }
.px-more-in { min-height: 0; overflow: hidden; visibility: hidden; opacity: 0; transition: opacity .3s ease, visibility 0s linear .5s; }
.price.is-info .px-more { grid-template-rows: 1fr; margin-top: 0; }
.price.is-info .px-more-in { visibility: visible; opacity: 1; transition: opacity .4s ease .1s, visibility 0s; }
.px-more-in p { margin: 0; padding: 12px 14px; border-left: 2px solid var(--c); border-radius: 0 10px 10px 0; background: color-mix(in srgb, var(--c) 9%, transparent); font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.is-featured .px-more-in p { border-left-color: var(--accent); background: rgba(243, 241, 247, .07); color: var(--cream-2); }
@supports selector(:has(*)) {
  .price-tracks { position: relative; }
  .price-tracks::before { content: ''; position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 9px) / 2); border-radius: 8px; background: var(--ink); transition: transform .5s var(--ease); }
  .is-featured .price-tracks::before { background: var(--cream); }
  .price-tracks:has(.price-track:nth-child(2)[aria-checked='true'])::before { transform: translateX(calc(100% + 3px)); }
  .price-track { position: relative; z-index: 1; }
  .price-track[aria-checked='true'], .is-featured .price-track[aria-checked='true'] { background: transparent; }
}
@media (prefers-reduced-motion: no-preference) { .price-incl--track.is-swap { animation: px-swap .45s var(--ease); } }
@keyframes px-swap { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
.addons li { opacity: var(--in, 1); translate: 0 calc((1 - var(--in, 1)) * 10px); transition: opacity .55s ease, translate .6s var(--ease); }
.order-steps .os-list li { opacity: var(--in, 1); translate: 0 calc((1 - var(--in, 1)) * 14px); transition: opacity .6s ease, translate .7s var(--ease); }
.order-steps .os-list li::before { transform-origin: left; transform: scaleX(var(--in, 1)); transition: transform 1s var(--ease) .15s; }
.order-steps .os-list li::after { scale: calc(.3 + var(--in, 1) * .7); opacity: var(--in, 1); transition: scale .6s var(--ease) .1s, opacity .4s ease; }
/* the founder: the paragraphs, the facts and the buttons rise one after the other */
.founder-body > p, .facts li, .founder-actions { opacity: var(--in, 1); translate: 0 calc((1 - var(--in, 1)) * 16px); transition: opacity .7s ease, translate .8s var(--ease); }
.fx-btn { position: relative; display: block; width: 100%; margin: 0; padding: 0 28px 4px 0; border: 0; border-radius: 8px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.fx-btn:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 6px; }
.fx-btn strong { transition: color .3s ease, transform .5s var(--ease); }
.fx-btn[aria-expanded='true'] strong { color: var(--c); }
@media (hover: hover) and (pointer: fine) { .fx-btn:hover strong { transform: translateY(-2px); } .fx-btn:hover .fx-plus { border-color: var(--ink-2); } }
.fx-plus { position: absolute; top: 4px; right: 0; width: 20px; height: 20px; border: 1px solid var(--rule); border-radius: 50%; transition: transform .5s var(--ease), background-color .3s ease, border-color .3s ease; }
.fx-plus::before, .fx-plus::after { content: ''; position: absolute; left: 50%; top: 50%; width: 8px; height: 1.5px; margin: -.75px 0 0 -4px; border-radius: 1px; background: var(--ink-2); }
.fx-plus::after { rotate: 90deg; transition: rotate .5s var(--ease); }
.fx-btn[aria-expanded='true'] .fx-plus { transform: rotate(180deg); border-color: var(--ink-3); background: color-mix(in srgb, var(--c) 14%, transparent); }
.fx-btn[aria-expanded='true'] .fx-plus::after { rotate: 0deg; }
.fx-more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease); }
.fx-more.is-open { grid-template-rows: 1fr; }
.fx-more-in { min-height: 0; overflow: hidden; visibility: hidden; opacity: 0; transition: opacity .3s ease, height .45s var(--ease), visibility 0s linear .55s; }
.fx-more.is-open > .fx-more-in { visibility: visible; opacity: 1; transition: opacity .4s ease .1s, height .45s var(--ease), visibility 0s; }
.fx-body { padding: 22px 0 6px; }
.fx-body p { margin: 0; max-width: 58ch; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.fx-body .fx-lede { margin-bottom: 14px; font-size: 13px; color: var(--ink-3); }
.fx-line { display: grid; grid-auto-flow: column; grid-template-rows: repeat(5, auto); gap: 10px 32px; margin: 0; padding: 0; list-style: none; }
.fx-line li { display: grid; grid-template-columns: 5.6em minmax(0, 1fr); gap: 12px; align-items: baseline; padding-top: 9px; border-top: 1px solid var(--rule); }
.fx-y { font-family: var(--f-mono); font-size: 12px; letter-spacing: .02em; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.fx-c { display: grid; gap: 1px; min-width: 0; }
.fx-c b { font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.fx-c small { font-size: 12.5px; color: var(--ink-3); }
.fx-prod { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.fx-prod li { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border: 1px solid var(--rule); border-radius: 999px; background: var(--paper-2); font-size: 14.5px; }
.fx-prod b { font-weight: 600; color: var(--ink); }
.fx-prod span { font-size: 12.5px; color: var(--ink-3); }
@media (prefers-reduced-motion: no-preference) {
  .fx-body.is-on > p { animation: fx-in .55s var(--ease) .1s backwards; }
  .fx-body.is-on .fx-line li, .fx-body.is-on .fx-prod li { animation: fx-in .55s var(--ease) backwards; animation-delay: calc(var(--k, 0) * 55ms + .12s); }
}
@keyframes fx-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 720px) { .fx-line { grid-auto-flow: row; grid-template-rows: none; } }
@media (prefers-reduced-motion: reduce) {
  .price, .addons li, .order-steps .os-list li, .order-steps .os-list li::before, .order-steps .os-list li::after, .price-tracks::before, .px-more, .px-more-in, .price-info,
  .founder-body > p, .facts li, .founder-actions, .fx-btn strong, .fx-plus, .fx-plus::after, .fx-more, .fx-more-in { transition: none; }
}

/* ── 7. DAY 2 (iris on the fox's face) ── */
.day2 { --pin: 170vh; background: var(--night); --c: var(--p-purple); }
.iris { position: absolute; inset: 0; clip-path: circle(var(--iris, 18%) at 50% 42%); will-change: clip-path; }
.iris img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; transform-origin: 50% 42%; transform: scale(var(--iz, 1.32)); }
.iris::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(9, 8, 13, .84), rgba(9, 8, 13, .46) 48%, rgba(9, 8, 13, .08)); }
.day2-copy { position: absolute; left: var(--gutter); top: 50%; transform: translateY(-50%); max-width: 560px; }
.day2-more { opacity: var(--copy, 1); transform: translateY(calc((1 - var(--copy, 1)) * 18px)); visibility: var(--copy-vis, visible); }
.day2-body { margin-top: 22px; color: var(--cream); font-size: clamp(17px, 1.3vw, 19px); max-width: 44ch; }
.day2-date { margin-top: 12px; color: var(--cream-2); font-size: 15px; max-width: 44ch; }
.day2-stamp {
  position: absolute; right: clamp(24px, 9vw, 160px); bottom: clamp(56px, 12vh, 140px);
  width: clamp(150px, 15vw, 206px); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-content: center; text-align: center; gap: 2px;
  background: rgba(13, 12, 18, .62); border: 1.5px solid var(--c);
  opacity: var(--stamp, 1); transform: rotate(-7deg) scale(calc(.8 + var(--stamp, 1) * .2));
}
.day2-stamp strong { font-weight: 600; font-size: clamp(38px, 3.8vw, 54px); line-height: .9; letter-spacing: -.04em; color: var(--cream); }
.day2-stamp span { font-size: 13px; font-weight: 600; color: #cdc2d9; }
.day2-terms { margin-top: 20px; max-width: 560px; }
.day2-terms summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--cream); min-height: 44px; display: inline-flex; align-items: center; gap: 8px; list-style: none; }
.day2-terms summary::-webkit-details-marker { display: none; }
.day2-terms summary::before { content: '+'; font-size: 18px; font-weight: 400; width: 18px; transition: transform .25s var(--ease); }
.day2-terms[open] summary::before { transform: rotate(45deg); }
.day2-terms p { margin-top: 8px; font-size: 13px; line-height: 1.6; color: var(--cream-2); }

/* ── 8. PROCESS (progress timeline) ── */
.process { background: var(--mist); color: var(--ink); padding: var(--section) 0; --c: var(--p-lime); }
.process-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 72px); align-items: end; }
.process-head .lede { color: var(--ink-2); max-width: 40ch; }
.process-note { margin-top: 28px; font-size: 14px; line-height: 1.6; color: var(--ink-3); max-width: 60ch; }
/* The agenda: six business days on a ruler, the steps standing on their days, a cursor walking the week. */
.agenda { --days: 6; --gap: 14px; position: relative; margin-top: clamp(40px, 6vh, 72px); }
.agenda-ruler { position: relative; height: 44px; margin-bottom: 18px; }
.ruler-line, .ruler-fill { position: absolute; left: 0; right: 0; top: 7px; height: 2px; border-radius: 2px; background: var(--rule); }
.ruler-fill { background: var(--c); transform-origin: 0 50%; transform: scaleX(var(--cursor, 0)); }
.ruler-cursor {
  position: absolute; top: -5px; left: calc(var(--cursor, 0) * 100%); width: 26px; height: 26px; margin-left: -13px;
  border-radius: 48% 52% 46% 54% / 55% 45% 55% 45%; background: var(--c);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--c) 18%, transparent), var(--e1);
  transition: opacity .3s ease; opacity: calc(min(1, var(--cursor, 0) * 12));
}
.tick { position: absolute; top: 0; left: calc(var(--n) / (var(--days) - 1) * 100%); transform: translateX(-50%); display: grid; justify-items: center; gap: 8px; }
.tick:first-child, .tick:nth-child(4) { transform: translateX(0); justify-items: start; }
.tick:last-child { transform: translateX(-100%); justify-items: end; }
.tick i { width: 10px; height: 10px; margin-top: 3px; border-radius: 50%; background: var(--mist); border: 2px solid var(--rule); transition: background-color .35s ease, border-color .35s ease, transform .35s var(--ease); }
.tick b { font-family: var(--f-mono); font-weight: 500; font-size: 12px; letter-spacing: .02em; color: var(--ink-3); font-variant-numeric: tabular-nums; transition: color .35s ease; }
.tick.is-on i { background: var(--c); border-color: var(--c); transform: scale(1.15); }
.tick.is-on b { color: var(--ink); }
.steps { display: grid; grid-template-columns: repeat(var(--days), minmax(0, 1fr)); gap: var(--gap); align-items: stretch; }
.step {
  grid-column: calc(var(--d) + 1) / span var(--span, 1); position: relative;
  padding: 20px 20px 22px; border-radius: var(--r-card);
  background: var(--paper-2); border: 1px solid var(--rule);
  opacity: calc(.42 + var(--on, 0) * .58); transform: translateY(calc((1 - var(--on, 0)) * 10px));
  transition: opacity .45s ease, transform .5s var(--ease), border-color .45s ease, box-shadow .45s ease;
}
.step.is-on { --on: 1; border-color: color-mix(in srgb, var(--c) 55%, var(--rule)); box-shadow: var(--e1); }
.step::before { content: ''; position: absolute; left: 20px; right: 20px; top: -1px; height: 3px; border-radius: 0 0 3px 3px; background: var(--c); transform: scaleX(var(--on, 0)); transform-origin: 0 50%; transition: transform .5s var(--ease); }
.step-marker { font-family: var(--f-mono); font-size: 12px; letter-spacing: .02em; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.step.is-on .step-marker { color: var(--ink); }
.step-title { margin-top: 10px; font-weight: 600; font-size: clamp(19px, 1.5vw, 23px); line-height: 1.12; letter-spacing: -.02em; }
.step-body { margin-top: 10px; color: var(--ink-2); font-size: 14.5px; line-height: 1.5; }


/* ── 9. FOUNDER (on paper: the admin tail stays light until the dusk close) ── */
.founder { background: var(--paper); color: var(--ink); padding: var(--section) 0; --c: var(--p-sienna); }
.founder-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.portrait { position: relative; width: min(320px, 78%); margin-top: 40px; }
.portrait img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; filter: saturate(.92); }
.portrait-ring { position: absolute; left: -16px; top: -16px; width: calc(100% + 32px); height: auto; aspect-ratio: 1; overflow: visible; pointer-events: none; }
.portrait figcaption { margin-top: 14px; font-family: var(--f-serif); font-style: italic; font-weight: 400; font-size: 19px; color: var(--ink-2); }
.founder-body p { color: var(--ink-2); font-size: 17px; line-height: 1.65; max-width: 58ch; }
.founder-body p + p { margin-top: 16px; }
.founder-body strong { color: var(--ink); font-weight: 600; }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: clamp(36px, 6vh, 64px); padding-top: 26px; border-top: 1px solid var(--rule); }
.facts strong { display: block; font-weight: 600; font-size: clamp(34px, 3.2vw, 50px); line-height: 1; letter-spacing: -.04em; color: var(--ink); font-variant-numeric: tabular-nums; }
.facts span { display: block; margin-top: 8px; font-size: 13px; line-height: 1.45; color: var(--ink-3); max-width: 20ch; }
.founder-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.facts--head { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0; padding-top: 0; border-top: 0; }
.proof .facts strong { color: var(--cream); }
.proof .facts span { color: var(--cream-3); }

/* ── 10. FAQ ── */
.faq { background: var(--mist); color: var(--ink); padding: var(--section) 0; --c: var(--p-orange); }
.faq-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 96px); }
.faq-aside { position: sticky; top: calc(var(--nav-h) + 32px); align-self: start; }
.faq-aside .lede { color: var(--ink-2); }
.faq-aside .btn { margin-top: 24px; }
.qa { border-top: 1px solid var(--rule); }
.qa:last-child { border-bottom: 1px solid var(--rule); }
.qa-h { font-size: inherit; font-weight: inherit; }
.qa-q {
  display: grid; grid-template-columns: minmax(0, 1fr) 24px; gap: 16px; align-items: center; width: 100%;
  min-height: 64px; padding: 16px 0; cursor: pointer; text-align: left; background: none; border: 0;
  font-size: 18px; font-weight: 600; line-height: 1.35; letter-spacing: -.01em; color: var(--ink);
  transition: color .2s ease;
}
.qa-q:hover { color: var(--ink-2); }
.qa-ico { position: relative; width: 20px; height: 20px; justify-self: end; transition: transform .3s var(--ease); }
.qa-ico::before, .qa-ico::after { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; margin: -.75px 0 0 -7px; background: var(--ink); border-radius: 1px; }
.qa-ico::after { transform: rotate(90deg); }
.qa-q:hover .qa-ico::before, .qa-q:hover .qa-ico::after { background: var(--c); }
.qa.is-open .qa-ico { transform: rotate(45deg); }
.qa-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); }
.qa.is-open .qa-panel { grid-template-rows: 1fr; }
.qa-inner { min-height: 0; overflow: hidden; }
.qa-inner p { padding: 0 40px 22px 0; color: var(--ink-2); font-size: 16px; line-height: 1.65; max-width: 62ch; opacity: 0; transform: translateY(-4px); transition: opacity .3s ease .05s, transform .4s var(--ease); }
.qa.is-open .qa-inner p { opacity: 1; transform: none; }

/* ── 11. CONTACT (the fox, at dusk) ── */
.contact { position: relative; overflow: hidden; background: var(--night); padding: clamp(120px, 20vh, 220px) 0 0; --c: var(--p-white); }
.contact-bg { position: absolute; inset: -8% 0 0; }
.contact-bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%;
  filter: saturate(.72) brightness(.5); transform: translateY(var(--cy, 0));
  -webkit-mask-image: linear-gradient(90deg, transparent 0 22%, #000 62%);
          mask-image: linear-gradient(90deg, transparent 0 22%, #000 62%);
}
.contact-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, var(--night) 0%, rgba(13, 12, 18, .2) 30%, rgba(13, 12, 18, .4) 70%, var(--night) 100%); }
.contact .wrap { position: relative; }
.contact .h2 { font-size: clamp(40px, 5.4vw, 86px); }
.contact .h2 em { color: var(--holo-1); }
.contact-sub { margin-top: 24px; color: var(--cream-2); max-width: 48ch; }
.contact-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.contact-else { margin-top: 18px; font-size: 14px; color: var(--cream-3); }
.contact-else a { color: var(--cream); display: inline-block; padding: 6px 0; }
@media (pointer: coarse) { .contact-else a { padding: 13px 0; } }
.footer {
  position: relative; margin-top: clamp(96px, 16vh, 180px);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px;
  padding: 24px 0 32px; border-top: 1px solid var(--rule-dark);
  font-size: 13px; color: var(--cream-3);
}

/* ── Contact dialog ── */
.dlg {
  width: min(560px, calc(100% - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 0; border-radius: var(--r-big);
  background: var(--paper); color: var(--ink); box-shadow: var(--e3);
}
.dlg::backdrop { background: rgba(9, 8, 13, .66); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.dlg-inner { padding: clamp(22px, 4vw, 34px); }
.dlg-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.dlg h2 { font-weight: 600; font-size: 28px; line-height: 1.05; letter-spacing: -.025em; }
.dlg-sub { margin-top: 10px; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
/* Close: a ghost button, no ring; the drawn cross lights up on hover over a soft tint */
.dlg-x {
  flex-shrink: 0; display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: inherit; opacity: .62; cursor: pointer;
  transition: opacity .2s ease, background-color .2s ease, transform .16s var(--ease);
}
.dlg-x svg { width: 18px; height: 18px; }
.dlg-x:hover { opacity: 1; background: color-mix(in srgb, currentColor 8%, transparent); }
.dlg-x:active { transform: scale(.92); }
.dlg-x:focus-visible { opacity: 1; outline: 2px solid var(--accent); outline-offset: 2px; }
.field { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field label { font-size: 13px; font-weight: 600; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 46px; padding: 11px 14px; border-radius: var(--r-ctl); border: 1px solid var(--rule);
  background: var(--paper-2); color: var(--ink); font: inherit; font-size: 16px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
.dlg-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.dlg-status { margin-top: 12px; font-size: 13px; color: var(--ink-2); min-height: 1.4em; }

/* Contact sheet: mascot with the title, one hairline of the brand ribbon, then the packages
   as rows. Same 1px rule as the rest of the page. A chosen row stays on the paper; the price
   tile is what turns on, in that package's pigment. */
#contact-dialog { width: min(560px, calc(100% - 24px)); overflow: auto; }
#contact-dialog .dlg-inner { padding: 0; }
#contact-dialog .dlg-stage {
  position: sticky; top: 0; z-index: 2;
  display: grid; grid-template-columns: 52px minmax(0, 1fr) 36px; gap: 0 14px; align-items: center;
  padding: 18px 16px 0 20px;
  background:
    radial-gradient(80% 120% at 0% 100%, color-mix(in srgb, var(--holo-1) 16%, transparent), transparent 70%),
    var(--paper);
}
#contact-dialog .dlg-stage::after {
  content: ''; grid-column: 1 / -1; height: 1px; margin-top: 16px;
  background: var(--holo);
}
#contact-dialog .dlg-mascot {
  width: 52px; height: 52px; justify-self: center;
  transform: rotate(-6deg);
}
#contact-dialog .dlg-head { display: block; min-width: 0; }
#contact-dialog .dlg-sub { margin-top: 6px; }
#contact-dialog .dlg-stage .dlg-x { align-self: start; margin-top: -4px; }
#contact-dialog .dlg-body { padding: 0 20px 22px; }
#contact-dialog .field { margin-top: 18px; }
#contact-dialog .field-row { margin-top: 18px; }
#contact-dialog .field-row .field { margin-top: 0; }
#contact-dialog .field textarea { min-height: 96px; }
#contact-dialog .dlg-actions { margin-top: 20px; }
/* The dialog's one action: a full-width night bar, like the package tiles. No brand gradient,
   no sheen; Continue carries an arrow that leans forward. */
#contact-dialog .btn-primary {
  width: 100%; min-height: 52px; padding: 13px 20px;
  background: var(--night); border-color: var(--night); color: var(--cream);
  box-shadow: inset 0 1px 0 rgba(243, 241, 247, .14);
}
#contact-dialog .btn-primary:hover { background: #24222f; border-color: #24222f; }
#contact-dialog .btn-primary::after { display: none; }
#contact-dialog #f-next::after {
  content: '→'; display: block; position: static; width: auto; height: auto;
  background: none; transform: none;
  font-size: 17px; font-weight: 400; line-height: 1;
  transition: transform .25s var(--ease);
}
#contact-dialog #f-next:hover::after, #contact-dialog #f-next:focus-visible::after { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { #contact-dialog #f-next::after { transition: none; } }
#contact-dialog h2 { font-size: clamp(22px, 3vw, 26px); }
.field-pkgs { position: relative; margin-top: 0; gap: 0; }
.field-pkgs > label {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.pkgs { display: flex; flex-direction: column; }
.pkg {
  position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 14px; align-items: center;
  margin: 0; padding: 12px 2px; border: 0; border-radius: 0; border-bottom: 1px solid var(--rule);
  background: transparent; cursor: pointer;
  transition: background-color .16s ease;
}
.pkg:first-child { border-top: 1px solid var(--rule); }
.pkg-art {
  display: grid; place-items: center; width: 36px; height: 28px; border-radius: 7px;
  background: var(--night); color: var(--pig, var(--holo-3));
}
.pkg-art svg { display: block; width: 36px; height: 28px; }
.pkg-art svg:not(.oa):not(.oa-ico) :is(path, rect, circle, line) { stroke-width: 1.15; }
.pkg-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pkg-name { font-size: 15px; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; }
.pkg-line { font-size: 13px; line-height: 1.35; color: var(--ink-2); }
.pkg-price {
  display: inline-grid; place-items: center; height: 28px; min-width: 64px; padding: 0 10px; border-radius: 7px;
  background: var(--night); color: var(--pig, var(--holo-3));
  font-size: 13px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap;
  transition: background-color .16s ease, color .16s ease;
}
.pkg:has(input:checked) .pkg-price,
.pkg.pkg-recap .pkg-price { background: var(--pig, var(--holo-3)); color: var(--night); }
.pkg:not(:has(.pkg-price)):has(input:checked) .pkg-art,
.pkg.pkg-recap:not(:has(.pkg-price)) .pkg-art { box-shadow: inset 0 0 0 1.5px var(--pig, var(--holo-3)); }
.pkg input {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.pkg:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.pkg:has(input:focus-visible) { outline: 2px solid var(--accent-deep); outline-offset: -2px; }
.pkg .soon { margin-left: 8px; }
.field select.pkg-select {
  position: absolute; width: 1px; height: 1px; min-height: 0; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (max-width: 560px) {
  #contact-dialog .dlg-stage { grid-template-columns: 44px minmax(0, 1fr) 36px; gap: 0 12px; padding: 16px 14px 0 16px; }
  #contact-dialog .dlg-mascot { width: 44px; height: 44px; }
  #contact-dialog .dlg-body { padding: 0 16px 18px; }
}
@media (prefers-reduced-motion: reduce) { .pkg, .pkg-price { transition: none; } }
.dlg-steps {
  display: flex; align-items: center; gap: 0; margin: 16px 0 14px; padding: 0; list-style: none;
}
.dlg-step {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--ink-3);
}
.dlg-step + .dlg-step::before {
  content: ''; width: 20px; height: 1px; margin: 0 10px 0 0; background: var(--rule);
}
.dlg-num {
  font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.dlg-step[aria-current='step'] { color: var(--ink); }
.pkg-recap {
  width: 100%; margin-top: 2px; text-align: start; font: inherit; color: inherit;
}
.pkg-change {
  display: inline-block; margin-top: 3px; font-size: 13px; font-weight: 600; color: var(--ink-2);
  text-decoration: underline; text-underline-offset: .18em;
}
#contact-dialog .dlg-pane[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .r-chart .l, .r-swash path { stroke-dashoffset: 0; } .r-chart .a, .r-chart .d, .r-toast { opacity: 1; transform: none; }
  .is-live .r-card, .is-live .r-card::after, .is-live .r-device, .is-live .r-chart .l, .is-live .r-chart .a, .is-live .r-chart .d, .is-live .r-toast { animation: none; }
  .hero h1 em, .beat-title em, .contact .h2 em, .is-split em .rw { animation: none; } }

/* ── Assistant ── */
/* ── Contact dock: the mascot, bottom right. A press fans out four bubbles on a quarter circle (left to straight
   up): the assistant, a call, LinkedIn, the project form. Each bubble takes one colour of the logo's multicolour
   and pulses once it has landed. agence-dock.js opens and closes it. It shows only over the sections with a
   background video (agence-dock.js sets .is-over-video), and while it is open, the assistant is open or it has
   focus. The mascot is the nav logo's own drawing, copied in by agence-mascot.js. ── */
.dock {
  --fab: 60px; --orbit: 92px;
  position: fixed; z-index: 47; width: var(--fab); height: var(--fab);
  right: max(clamp(26px, 3.4vw, 48px), env(safe-area-inset-right));
  bottom: max(clamp(26px, 5vh, 48px), env(safe-area-inset-bottom));
  opacity: 0; transform: translateY(12px); pointer-events: none; visibility: hidden;
  transition: opacity .35s ease, transform .35s var(--ease), visibility 0s linear .35s;
}
.dock.is-over-video, .dock.is-open, .dock.is-chat, .dock:focus-within {
  opacity: 1; transform: none; pointer-events: auto; visibility: visible;
  transition: opacity .35s ease, transform .35s var(--ease), visibility 0s;
}
.dock-fab {
  position: absolute; inset: 0; z-index: 2; padding: 0; border: 0; border-radius: 30%; background: none; cursor: pointer;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .35)) drop-shadow(0 2px 6px rgba(0, 0, 0, .25));
  transition: transform .45s cubic-bezier(.34, 1.56, .64, 1);
  -webkit-tap-highlight-color: transparent;
}
.dock-fab img, .dock-fab .mascot { display: block; width: 100%; height: 100%; }
/* the logo's own states, on the copy: wink, tuft shake and band of light on hover or focus, squash on press
   (the button tilts, so the drawing does not) */
.dock-fab:hover .m-sheen, .dock-fab:focus-visible .m-sheen { transform: translateX(130px); transition: transform 1s cubic-bezier(.4, 0, .2, 1); }
@media (hover: hover) { .dock-fab:hover .m-tuft { animation: m-wiggle .7s var(--ease); } }
.dock-fab:hover .m-eye--r, .dock-fab:focus-visible .m-eye--r { transform: scale(.3, .1); opacity: 0; }
.dock-fab:hover .m-shut--r, .dock-fab:focus-visible .m-shut--r { opacity: 1; }
.dock-fab:active .m-body { transform: scale(1.08, .9); transition-duration: .12s; }
.dock-fab:focus-visible { outline-offset: 4px; }
@media (hover: hover) { .dock-fab:hover { transform: rotate(-8deg) scale(1.06); } }
.dock-fab:active { transform: scale(.92); transition-duration: .12s; }
.dock.is-open .dock-fab { transform: rotate(-12deg) scale(.94); }
/* while the assistant is open, the mascot carries a small cross: pressing it closes the chat */
.dock-fab::after {
  content: ''; position: absolute; top: -4px; right: -4px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--night) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23f4efe4' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M4.5 4.5l7 7M11.5 4.5l-7 7'/%3E%3C/svg%3E") center / 12px no-repeat;
  box-shadow: 0 0 0 2px var(--night); transform: scale(0); transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.dock.is-chat .dock-fab::after { transform: scale(1); }

.dock-menu { position: absolute; inset: 0; visibility: hidden; transition: visibility 0s linear .4s; }
.dock.is-open .dock-menu { visibility: visible; transition: visibility 0s; }
.dock-item {
  position: absolute; left: 50%; top: 50%; width: 50px; height: 50px; margin: -25px 0 0 -25px; padding: 0;
  display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer; text-decoration: none;
  background: var(--c); color: #16151d;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 8px 20px rgba(0, 0, 0, .3);
  opacity: 0;
  /* polar placement: turn to the bubble's angle, travel out along it, turn back so the icon stays upright */
  transform: rotate(var(--a)) translateX(0) rotate(calc(var(--a) * -1)) scale(.3);
  transition: transform .3s cubic-bezier(.5, 0, .75, 0), opacity .2s ease;
  transition-delay: calc((3 - var(--i)) * 25ms);
  -webkit-tap-highlight-color: transparent;
}
.dock.is-open .dock-item {
  opacity: 1;
  transform: rotate(var(--a)) translateX(var(--orbit)) rotate(calc(var(--a) * -1)) scale(1);
  transition: transform .55s cubic-bezier(.34, 1.56, .64, 1), opacity .25s ease;
  transition-delay: calc(var(--i) * 55ms);
}
.dock-item svg { position: relative; z-index: 1; }
@media (hover: hover) { .dock.is-open .dock-item:hover { filter: brightness(1.06) saturate(1.1); } }
.dock-item:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; }
/* the pulse: a ring of the bubble's colour swells and fades, one bubble after the other */
.dock-item::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 70%, transparent);
}
.dock.is-open .dock-item::after { animation: dock-pulse 2.2s ease-out infinite; animation-delay: calc(.45s + var(--i) * .18s); }
@keyframes dock-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 70%, transparent); }
  70%, 100% { box-shadow: 0 0 0 14px color-mix(in srgb, var(--c) 0%, transparent); }
}
/* labels: beside the bubble on hover or keyboard focus (the icon carries the meaning on touch screens) */
.dock-tip {
  position: absolute; right: calc(100% + 10px); top: 50%; transform: translate(4px, -50%);
  padding: 6px 10px; border-radius: 8px; white-space: nowrap;
  background: rgba(13, 12, 18, .9); color: var(--cream); border: 1px solid var(--rule-dark);
  font-size: 13px; font-weight: 600; line-height: 1.2; opacity: 0; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.dock-item:hover .dock-tip, .dock-item:focus-visible .dock-tip { opacity: 1; transform: translate(0, -50%); }
@media (prefers-reduced-motion: reduce) {
  .dock, .dock-fab, .dock-item, .dock-tip, .dock-fab::after { transition: none; }
  .dock.is-open .dock-item { transition: none; }
  .dock.is-open .dock-item::after { animation: none; }
  .dock { transform: none; }
  .dock-fab:hover .m-tuft, .dock-fab:active .m-body { animation: none; transform: none; }
}
@media (max-width: 720px) { .dock { --fab: 54px; --orbit: 84px; } .dock-item { width: 46px; height: 46px; margin: -23px 0 0 -23px; } }
/* the assistant opens above the dock, bottom right */
.chat {
  position: fixed; right: max(clamp(26px, 3.4vw, 48px), env(safe-area-inset-right)); bottom: calc(max(clamp(26px, 5vh, 48px), env(safe-area-inset-bottom)) + 72px); z-index: 46;
  width: min(380px, calc(100vw - 2 * max(clamp(26px, 3.4vw, 48px), env(safe-area-inset-right)))); max-height: min(560px, calc(100dvh - 140px));
  display: flex; flex-direction: column; border-radius: var(--r-big); overflow: hidden;
  background: var(--paper); color: var(--ink); box-shadow: var(--e3);
}
.chat[hidden] { display: none; }
.chat-head { padding: 16px 18px; border-bottom: 1px solid var(--rule); }
.chat-head strong { display: block; font-size: 15px; }
.chat-head span { font-size: 12px; color: var(--ink-3); }
.chat-msgs { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.bubble { max-width: 88%; padding: 10px 13px; border-radius: 14px; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.bubble.user { align-self: flex-end; background: var(--ink); color: var(--cream); border-bottom-right-radius: 4px; }
.bubble.assistant { align-self: flex-start; background: var(--paper-2); border: 1px solid var(--rule); border-bottom-left-radius: 4px; }
.bubble.assistant p + p { margin-top: 8px; }
.bubble.assistant a { color: var(--accent-deep); }
.bubble.typing { color: var(--ink-3); }
.chat-suggs { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 10px; }
.chat-suggs button { min-height: 40px; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--rule); background: transparent; font-size: 12px; cursor: pointer; transition: border-color .2s ease; }
.chat-suggs button:hover { border-color: var(--ink); }
.chat-form { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--rule); }
.chat-form textarea { flex: 1; min-height: 44px; max-height: 110px; padding: 11px 12px; border-radius: var(--r-ctl); border: 1px solid var(--rule); background: var(--paper-2); font: inherit; font-size: 15px; resize: none; }
.chat-form button { width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; border: 0; background: var(--ink); color: var(--cream); cursor: pointer; }
.chat-form button:disabled { opacity: .4; cursor: default; }

/* ═══ Second layer: line figures, notes on the fox, reveal-on-click text ═══ */
.hairline-fig {
  --hairline-hi: var(--ink);
  --hairline-edge: color-mix(in srgb, var(--c, var(--ink)) 70%, var(--ink));
  --hairline-mid: #8e8b9a;
  --hairline-lo: #d2d0db;
  --hairline-stroke: 1.05;
}

/* Reveal-on-click: the second reading level */
.more { margin-top: 12px; }
.more-btn {
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0;
  border: 0; background: none; cursor: pointer;
  font-size: 13px; font-weight: 600; letter-spacing: .01em; color: inherit;
}
.more-ico {
  position: relative; flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid currentColor; opacity: .8;
  transition: transform .35s var(--ease), background-color .2s ease;
}
.more-ico::before, .more-ico::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 8px; height: 1.5px; margin: -.75px 0 0 -4px;
  background: currentColor; border-radius: 1px;
}
.more-ico::after { transform: rotate(90deg); }
.more-btn:hover .more-ico { background: color-mix(in srgb, var(--c, currentColor) 30%, transparent); }
.more-btn:active .more-ico { transform: scale(.9); }
.more.is-open .more-ico { transform: rotate(45deg); }
.more-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
.more.is-open .more-panel { grid-template-rows: 1fr; }
.more-inner { min-height: 0; overflow: hidden; }
.more-inner > * { padding-top: 8px; opacity: 0; transform: translateY(-6px); transition: opacity .35s ease .05s, transform .45s var(--ease); }
.more.is-open .more-inner > * { opacity: 1; transform: none; }

/* Notes pinned on the fox, once it has arrived */
.hero-beat { pointer-events: none; }
.hero-beat a, .hero-beat button { pointer-events: auto; }
.hero-spots { position: absolute; inset: 0; z-index: 6; opacity: var(--arrive, 0); transition: opacity .3s ease; }
.fox:not(.is-arrived) .hero-spots { pointer-events: none; }
.fox:not(.is-arrived) .hero-spots .spot-btn { visibility: hidden; }
.spot { position: absolute; width: 0; height: 0; z-index: 2; }
.spot[hidden] { display: none; }
.spot-btn {
  position: absolute; left: -18px; top: -18px; width: 36px; height: 36px; padding: 0;
  border-radius: 50%; border: 1.5px solid rgba(243, 241, 247, .9);
  background: rgba(13, 12, 18, .35); cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, transform .3s var(--ease);
}
.spot-btn span { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--cream); transition: transform .3s var(--ease); }
.spot-btn::before {
  content: ''; position: absolute; inset: -8px; border-radius: 50%; border: 1px solid rgba(243, 241, 247, .55);
  animation: spot-pulse 2.6s var(--ease) infinite;
}
.spot[data-spot='palette'] .spot-btn::before { animation-delay: .7s; }
@keyframes spot-pulse { 0% { transform: scale(.7); opacity: .9; } 70%, 100% { transform: scale(1.5); opacity: 0; } }
.spot-btn:hover, .spot.is-open .spot-btn { background: var(--holo); border-color: transparent; }
.spot.is-open .spot-btn span { transform: scale(0); }
.spot-card {
  position: absolute; left: 28px; top: -22px; width: min(280px, 70vw);
  padding: 14px 16px 16px; border-radius: var(--r-card);
  background: rgba(13, 12, 18, .9); border: 1px solid var(--rule-dark); color: var(--cream);
  box-shadow: var(--e3);
  animation: spot-in .35s var(--ease);
}
.spot.opens-left .spot-card { left: auto; right: 28px; top: auto; bottom: 26px; }
.spot-card strong { display: block; font-weight: 600; font-size: 18px; line-height: 1.1; letter-spacing: -.015em; color: var(--holo-1); }
.spot-card p { margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--cream-2); }
@keyframes spot-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ── Subpages (/<page>): the homepage scroll stays pinned; these read as documents. ── */
body.page .proof, body.page .pricing, body.page .checks { padding-top: calc(var(--nav-h) + clamp(40px, 7vh, 88px)); }
.day2.is-open { height: auto; --iris: 94%; --iz: 1.08; --ring: 0; --ring-s: 4; --copy: 1; --stamp: 1; }
.day2.is-open .pin-stage { position: relative; top: auto; height: auto; min-height: 100svh; overflow: hidden; }

/* Showcase: every playground interface, name under the cover. */
.playground { background: var(--paper); color: var(--ink); padding: clamp(72px, 10vh, 120px) 0 clamp(48px, 8vh, 96px); --c: var(--p-blue); }
.playground .lede { max-width: 42ch; color: var(--ink-2); }
.playground-note { margin-top: 8px; color: var(--ink-3); font-size: 15px; }
.playground .ifaces-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 22px; margin-top: clamp(36px, 6vh, 64px); }
.playground .iface-card { display: flex; flex-direction: column; position: relative; cursor: pointer; background: transparent; border: 0; }
.playground .iface-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 14px; }
.playground .iface-card-thumb, .playground .iface-card-thumb--empty {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; border-radius: var(--r-card);
  border: 1px solid var(--rule); background: #f6f5f9; box-shadow: var(--e2);
}
.playground .iface-card-thumb--empty { display: flex; align-items: flex-end; padding: 16px; }
.playground .iface-card-initials { font-weight: 600; font-size: 32px; letter-spacing: -.03em; color: rgba(22, 21, 29, .28); }
.playground .iface-card { opacity: 0; transform: translateY(18px); transition: opacity .55s var(--ease), transform .55s var(--ease); transition-delay: calc(var(--i, 0) * 60ms); }
.playground .iface-card.is-in { opacity: 1; transform: translateY(0); }
.playground .iface-card.is-in:hover { transform: translateY(-6px); transition-delay: 0s; }
.playground .iface-card-thumb { transition: transform .5s var(--ease); }
.playground .iface-card:hover .iface-card-thumb { transform: scale(1.045); }
.playground .iface-card-overlay { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 8px 12px; align-items: center; padding: 12px 2px 0; }
.playground .iface-card-overlay .hairline-fig { grid-row: 1 / span 2; width: 76px; pointer-events: none; --hairline-plate: var(--paper); }
.playground .iface-card-name { grid-column: 2; font-weight: 600; font-size: 19px; letter-spacing: -.02em; line-height: 1.15; color: var(--ink); }
.playground .iface-card-tag { grid-column: 2; margin-top: 4px; font-size: 13px; color: var(--ink-3); }
.playground .iface-card-open {
  position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; background: var(--cream); color: var(--ink);
}
.playground .iface-card-badge { display: none; }
#iface-modal { position: fixed; inset: 0; z-index: 80; display: flex; background: rgba(9, 8, 13, .72); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s ease, visibility 0s linear .25s; }
#iface-modal.open { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.iface-modal-browser { flex: 1; margin: 16px; min-height: 0; display: flex; flex-direction: column; border-radius: var(--r-card); overflow: hidden; background: #1a1a1a; border: 1px solid rgba(255, 255, 255, .08); }
.iface-modal-chrome { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: #242424; }
.iface-modal-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.iface-modal-urlbar { flex: 1; min-width: 0; height: 32px; border-radius: 999px; background: #1a1a1a; display: flex; align-items: center; gap: 6px; padding: 0 12px; font-size: 12px; color: rgba(255, 255, 255, .45); overflow: hidden; }
.iface-modal-copy, .iface-modal-close { height: 32px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .1); background: #1a1a1a; color: rgba(255, 255, 255, .7); cursor: pointer; }
.iface-modal-copy { padding: 0 12px; font-size: 12px; font-weight: 600; }
.iface-modal-close { width: 32px; display: flex; align-items: center; justify-content: center; }
.iface-modal-frame { flex: 1; width: 100%; border: 0; background: #fff; min-height: 0; }
.iface-phones-row { display: none; }
#iface-modal.mobile .iface-modal-frame { display: none; }
#iface-modal.mobile .iface-phones-row { display: flex; flex: 1; gap: 24px; padding: 28px; overflow: auto; min-height: 0; }
.iface-phone { flex-shrink: 0; width: 320px; height: min(660px, calc(100vh - 120px)); border-radius: 36px; border: 8px solid #2a2a2a; overflow: hidden; background: #fff; display: flex; }
.iface-phone iframe { flex: 1; width: 100%; border: 0; }
.iface-phone-label { display: none; }

/* ── Responsive ── */
@media (max-width: 1080px) {
  .nav-links { display: none; }
  .nav-burger {
    display: inline-flex; align-items: center; justify-content: center; margin-left: auto;
    width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--rule-dark); background: transparent; cursor: pointer;
    color: var(--cream);
  }
  /* three lines that fold into a cross while the menu is open */
  .nav-burger span, .nav-burger span::before, .nav-burger span::after {
    display: block; width: 16px; height: 1.5px; border-radius: 1px; background: currentColor;
    transition: transform .3s var(--ease), background-color .2s ease;
  }
  .nav-burger span { position: relative; }
  .nav-burger span::before, .nav-burger span::after { content: ''; position: absolute; left: 0; top: 0; }
  .nav-burger span::before { transform: translateY(-5px); }
  .nav-burger span::after { transform: translateY(5px); }
  .nav.is-open .nav-burger span { background-color: transparent; }
  .nav.is-open .nav-burger span::before { transform: rotate(45deg); }
  .nav.is-open .nav-burger span::after { transform: rotate(-45deg); }
  .nav.is-open .nav-links {
    display: flex; flex-direction: column; position: absolute; left: var(--cap-x); right: var(--cap-x); top: calc(var(--nav-h) + 4px);
    padding: 8px; border-radius: var(--r-card); background: rgba(13, 12, 18, .96); border: 1px solid var(--rule-dark);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .38);
    transform-origin: 50% 0;
  }
  /* big rows, split by hairlines; a press lights the row */
  .nav.is-open .nav-links a {
    display: flex; align-items: center; padding: 15px 14px; border-radius: 10px;
    font-size: 19px; font-weight: 600; letter-spacing: -.01em; color: var(--cream);
    transition: background-color .15s ease;
  }
  .nav.is-open .nav-links a + a { box-shadow: inset 0 1px 0 var(--edge); }
  .nav.is-open .nav-links a:active { background: rgba(243, 241, 247, .07); }
  .nav.on-light.is-open .nav-links a { color: var(--cream); }
  .nav.is-open .nav-links a::after { display: none; }
  /* the current page carries a holo bead, like the chapter rail's label */
  .nav.is-open .nav-links a[aria-current]::before {
    content: ''; display: inline-block; width: 9px; height: 9px; margin-right: 10px; vertical-align: 1px; border-radius: 50%;
    background: conic-gradient(from 200deg, var(--holo-1), var(--holo-2), var(--holo-3), var(--holo-4), var(--holo-5), var(--holo-1));
  }
}
@media (max-width: 1080px) and (prefers-reduced-motion: no-preference) {
  .nav.is-open .nav-links { animation: nav-drop .3s var(--ease) both; }
  .nav.is-open .nav-links a { animation: nav-item .45s var(--ease) both; }
  .nav.is-open .nav-links a:nth-child(2) { animation-delay: 45ms; }
  .nav.is-open .nav-links a:nth-child(3) { animation-delay: 90ms; }
  .nav.is-open .nav-links a:nth-child(4) { animation-delay: 135ms; }
  .nav.is-open .nav-menu-cta { animation: nav-item .45s var(--ease) 180ms both; }
}
@keyframes nav-drop { from { opacity: 0; transform: translateY(-8px) scale(.98); } }
@keyframes nav-item { from { opacity: 0; transform: translateY(-6px); } }
@media (max-width: 1080px) {
  .nav-right { margin-left: 0; }
  .prices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* an odd last card (Custom) takes the whole row instead of sitting alone in half of it */
  .prices > .price:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  /* stacked layout: the tiles fill the width, so the chosen one only lifts a little, from its centre */
  .tile.is-chosen { transform-origin: 50% 50%; transform: scale(calc(1 + var(--paint, 0) * .18)); }
  .rail { display: none; }
  .prices { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
  .same .pin-stage { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); align-content: start; gap: 18px; padding-top: calc(var(--nav-h) + 12px); }
  .same-copy, .same-visual { grid-column: 1; }
  .same .h2 { font-size: clamp(28px, 7vw, 40px); }
  .same .lede { display: none; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sec-head--split, .founder-grid, .faq-grid, .extras { grid-template-columns: 1fr; }
  .faq-aside { position: static; }
  .day2 { --pin: 160vh; }
  .day2-copy { right: var(--gutter); top: calc(var(--nav-h) + 12px); transform: none; max-width: none; padding: 14px 16px; border-radius: var(--r-card); background: rgba(13, 12, 18, .7); }
  .day2 .h2 { font-size: clamp(34px, 9vw, 52px); }
  .day2-body { margin-top: 14px; font-size: 15px; line-height: 1.55; }
  .day2-date { font-size: 13px; }
  .day2-stamp { right: var(--gutter); bottom: 4vh; width: 118px; }
  .day2-stamp strong { font-size: 32px; }
  .iris { clip-path: circle(var(--iris, 18%) at 50% 62%); }
  .iris img { object-position: 50% 44%; transform-origin: 50% 62%; }
  .iris::after { background: linear-gradient(180deg, rgba(9, 8, 13, .78), rgba(9, 8, 13, .5) 50%, rgba(9, 8, 13, .25)); }
  .contact-bg img { -webkit-mask-image: linear-gradient(180deg, transparent 0 10%, #000 55%); mask-image: linear-gradient(180deg, transparent 0 10%, #000 55%); object-position: 50% 30%; }
  .playground .ifaces-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 14px; }
}
@media (max-width: 900px) and (max-height: 780px) {
  .day2-stamp { display: none; }
  .day2 .pin-stage { position: relative; height: auto; min-height: 100svh; padding-bottom: 24px; }
  .day2-copy { position: relative; top: auto; margin: calc(var(--nav-h) + 24px) var(--gutter) 0; }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  .nav .btn { display: none; }
  .nav { --cap-y: 6px; }
  /* the bar has no room for the call to action here: it moves into the open menu */
  .nav.is-open .nav-menu-cta { display: flex; width: 100%; min-height: 50px; margin-top: 8px; font-size: 16px; }
  .wordmark { gap: 8px; }
  .mascot { width: 32px; height: 32px; }
  .wm-v2 { font-size: 30px; }
  .wm-studio { font-size: 15px; }
  .hero h1 { font-size: clamp(36px, 10.4vw, 54px); }
  .hero-beat { bottom: 28px; }
  .hero-beat--1 { bottom: 72px; }
  /* the dock button sits bottom right over the video scenes: keep the lines of text clear of it */
  .hero-beat .beat-sub { max-width: calc(100% - 72px); }
  .beat-line { font-size: clamp(30px, 9vw, 44px); }
  .beat-title { font-size: clamp(32px, 9.5vw, 48px); }
  .hero-scrim {
    background:
      linear-gradient(0deg, rgba(9, 8, 13, .94) 0%, rgba(9, 8, 13, .78) 34%, rgba(9, 8, 13, .35) 58%, rgba(9, 8, 13, 0) 78%),
      linear-gradient(180deg, rgba(9, 8, 13, .6) 0%, rgba(9, 8, 13, 0) 20%);
  }
  .hero-actions .btn { flex: 1 1 auto; }
  .tiles .tile:nth-child(n+5) { display: none; }
  .qa-q { font-size: 16px; }
  .qa-inner p { padding-right: 0; }
  .facts strong { font-size: 34px; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .process-head { grid-template-columns: 1fr; align-items: start; }
  /* Narrow screens: the ruler stands on the left and the days stack. */
  .agenda { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 0 16px; }
  .agenda-ruler { height: auto; margin: 0; }
  .ruler-line { left: 7px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .ruler-fill, .ruler-cursor, .tick { display: none; }
  .steps { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .step { grid-column: 1; }
  /* Each card carries its own day dot on the line. */
  .step::after { content: ''; position: absolute; left: -57px; top: 22px; width: 10px; height: 10px; border-radius: 50%; background: var(--mist); border: 2px solid var(--rule); transition: background-color .35s ease, border-color .35s ease; }
  .step.is-on::after { background: var(--c); border-color: var(--c); }
}
@media (max-width: 640px) {
  .playground .ifaces-grid { grid-template-columns: 1fr; }
}

/* ── Reduced motion: every scene in its arrival state, nothing scrubbed ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pin { height: auto !important; }
  .covers { margin-top: 0; }
  .has-cover > .pin-stage { transform: none; border-radius: 0; }
  .has-cover > .pin-stage::after, .dab-rim { display: none; }
  .covers > .pin-stage { -webkit-mask: none; mask: none; visibility: visible; }
  .pin-stage { position: relative; height: auto; min-height: 100svh; }
  .stage-media video { display: none; }
  .hero-motes { display: none; }
  .hero-beat--1, .fox-beat--1 { position: relative; left: auto; right: auto; bottom: auto; padding: calc(var(--nav-h) + 18vh) var(--gutter) 24px; }
  .hero-beat--1 { padding-top: calc(var(--nav-h) + 12vh); }
  .hero-beat--3, .hero-beat--4, .fox-beat--2 { position: relative; left: auto; right: auto; bottom: auto; padding: 0 var(--gutter) 56px; }
  .hero .pin-stage, .fox .pin-stage { display: flex; flex-direction: column; justify-content: flex-end; }
  .hero-beat { opacity: 1 !important; transform: none !important; visibility: visible !important; }
  .fox-beat--1 { top: auto; }
  .word { --w: 1; }
  .hero-spots { opacity: 1; }
  .same .pin-stage { min-height: 0; padding-top: 96px; padding-bottom: 96px; }
  .day2 .pin-stage { min-height: 100svh; }
  .tile, .step, .price, .btn, .link-arrow::after, .qa-panel, .more-panel, .more-inner > *, .qa-inner p, .playground .iface-card { transition: none; }
  .rail, .rail-dot i, .rail-fill, .rail-label { transition: none; }
  .rail.is-telling .rail-dot[aria-current] i { animation: none; }
  [data-reveal].is-split .rw { transition: none; }
  .spot-btn::before { animation: none; opacity: 0; }
  .spot-card { animation: none; }
  .price-excl::details-content, .day2-terms::details-content { transition: none; }
  .playground .iface-card, .playground .iface-card.is-in, .playground .iface-card.is-in:hover { opacity: 1; transform: none; }
  .playground .iface-card:hover .iface-card-thumb { transform: none; }
}


/* ═══ 2026-10-15: fewer scroll notches ═══ */

/* ── Packages v3 (2026-10-17): an outcome line, folded lists, Build's two tracks, one order button with its price,
   how it is paid; "How ordering works" beside the add-ons; on phones the cards swipe instead of stacking. ── */
.price { gap: 14px; padding: 24px 22px 20px; }
.price-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 10px; }
.price-top .price-tag { position: static; flex: none; margin-top: 1px; }
.price-outcome { padding-left: 12px; border-left: 2px solid var(--c); font-size: 14.5px; font-weight: 500; line-height: 1.5; color: var(--ink); }
.is-featured .price-outcome { color: var(--cream); border-left-color: var(--accent); }
.price-tracks {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; padding: 3px;
  border-radius: 11px; border: 1px solid color-mix(in srgb, currentColor 16%, transparent); background: color-mix(in srgb, currentColor 5%, transparent);
}
.price-track {
  min-height: 40px; padding: 6px 10px; border: 0; border-radius: 8px; background: transparent; cursor: pointer;
  font-size: 13.5px; font-weight: 600; color: inherit; opacity: .72; transition: background-color .2s ease, color .2s ease, opacity .2s ease;
}
.price-track:hover { opacity: 1; }
.price-track[aria-checked='true'] { opacity: 1; background: var(--ink); color: var(--cream); }
.is-featured .price-track[aria-checked='true'] { background: var(--cream); color: var(--night); }
.price-incl--track { padding: 2px 0 0; }
.price-more summary, .price-excl summary {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; cursor: pointer; list-style: none;
  border-top: 1px solid var(--rule); font-size: 14px; font-weight: 600; color: var(--ink-2); transition: color .2s ease;
}
.price-more summary::-webkit-details-marker { display: none; }
.price-more summary::after { content: '+'; font-size: 20px; font-weight: 400; transition: transform .25s var(--ease); }
.price-more[open] summary::after { transform: rotate(45deg); }
.price-more summary:hover { color: var(--ink); }
.is-featured .price-more summary { border-top-color: var(--rule-dark); color: var(--cream-2); }
.is-featured .price-more summary:hover { color: var(--cream); }
.price-more::details-content { height: 0; overflow: clip; transition: height .4s var(--ease), content-visibility .4s allow-discrete; }
.price-more[open]::details-content { height: auto; }
.price-more .price-incl { padding-bottom: 6px; }
/* Inside the one fold: "Not included" and the payment line follow the rest of "Included". */
.price-more .price-excl { padding: 6px 0 4px; }
.price-sub { margin-bottom: 4px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.is-featured .price-sub { color: var(--cream-2); }
.price-more .price-pay { padding: 8px 0 10px; text-align: left; }
.price-meta + .price-incl, .price-meta + .price-tracks { margin-top: -2px; }
.price-excl + .price-act, .price-more + .price-act { margin-top: auto; }
.price-act { margin-top: auto; display: grid; gap: 6px; padding-top: 6px; }
.price-cta { width: 100%; justify-content: center; gap: 10px; margin-top: 0; }
.price-cta-amt { padding-left: 10px; border-left: 1px solid color-mix(in srgb, currentColor 30%, transparent); font-variant-numeric: tabular-nums; opacity: .78; }
.price-call {
  justify-self: center; display: inline-flex; align-items: center; min-height: 34px; font-size: 13px; color: var(--ink-2);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  transition: color .2s ease, text-decoration-color .2s ease;
}
.price-call:hover { color: var(--ink); text-decoration-color: currentColor; }
/* "from $2,500" / "à partir de 2 500 $": the word goes above the figure so the amount never leaves the card */
.price.is-quote .price-amount strong small { display: block; margin: 0 0 6px; }
.price-pay { font-size: 12px; line-height: 1.45; text-align: center; color: var(--ink-3); text-wrap: balance; }
.is-featured .price-call { color: var(--cream-2); }
.is-featured .price-call:hover { color: var(--cream); }
.is-featured .price-pay { color: var(--cream-3); }
.price.is-soon { background: transparent; border-style: dashed; border-color: color-mix(in srgb, var(--ink) 22%, transparent); }
.price.is-soon .price-amount strong { color: var(--ink-2); }
/* Under the packages, full width (2026-10-18): how ordering works, then the add-ons, then the coaching band. */
.extras { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 16px; }
.addons h3 { margin-bottom: 16px; font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }

/* How ordering works: a title column, then the three steps on one rail. A dab marks where each step starts;
   the rail runs on to the next step, and the last step ends on the delivery pigment. */
.order-steps {
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 24px 48px; align-items: start;
  padding: 34px 0 36px; border-top: 1px solid var(--rule);
}
.order-steps:empty { display: none; }
.order-steps .os-title {
  margin: 0; font-size: clamp(22px, 2.2vw, 28px); font-weight: 600; line-height: 1.08; letter-spacing: -.025em;
  text-transform: none; color: var(--ink); text-wrap: balance;
}
.order-steps .os-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 6px; }
.order-steps .os-list li { position: relative; display: grid; align-content: start; gap: 8px; padding: 30px 28px 0 0; }
.order-steps .os-list li::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; border-radius: 2px;
  background: color-mix(in srgb, var(--c) 34%, transparent);
}
.order-steps .os-list li:last-child::before { right: 28px; }
.order-steps .os-list li::after {
  content: ''; position: absolute; left: -1px; top: -6px; width: 14px; height: 14px;
  border-radius: 48% 52% 46% 54% / 55% 45% 55% 45%; background: color-mix(in srgb, var(--c) 75%, #000);
}
.order-steps .os-n {
  display: block; width: auto; height: auto; border-radius: 0; background: none;
  font-family: var(--f-mono); font-size: 12px; font-weight: 500; letter-spacing: .04em; color: var(--ink-3);
}
.order-steps .os-list b { font-size: 18px; font-weight: 600; line-height: 1.25; letter-spacing: -.015em; color: var(--ink); text-wrap: balance; }
.order-steps .os-body { display: block; max-width: 34ch; font-size: 14px; line-height: 1.55; color: var(--ink-2); }

.addons li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: baseline; gap: 14px; }
.ad-for { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.addons-note { margin-top: 12px; }
@media (min-width: 1081px) {
  /* five short rows: two columns read faster than one long list across the page */
  .addons ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
}

/* Coaching: a monthly subscription for teams who build themselves, so it is not a package card.
   One wide band in the coaching pigment (the services' pink), "who" on the left, the price and action on the right. */
.coach {
  --c: #b0457a;
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr); gap: 24px 40px; align-items: center;
  margin-top: 14px; padding: 30px 36px; border-radius: var(--r-big);
  background: color-mix(in srgb, #f28eb4 26%, var(--paper)); border: 1px dashed color-mix(in srgb, var(--c) 40%, transparent);
}
.coach[hidden] { display: none; }
.coach-kicker { font-size: 13px; font-weight: 600; color: color-mix(in srgb, var(--c) 45%, var(--ink)); }
.coach-name { margin-top: 6px; font-size: 26px; font-weight: 600; line-height: 1; letter-spacing: -.025em; }
.coach-name .soon { position: relative; top: -3px; margin-left: 10px; letter-spacing: .08em; }
.coach-for { margin-top: 12px; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.coach-incl { padding-left: 32px; border-left: 1px solid color-mix(in srgb, var(--c) 22%, transparent); }
.coach-incl li svg { color: color-mix(in srgb, var(--c) 55%, var(--ink)); }
.coach-act { display: grid; gap: 10px; justify-items: stretch; }
.coach-amount { display: flex; align-items: baseline; gap: 6px; }
.coach-amount strong { font-size: 40px; font-weight: 600; line-height: 1; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.coach-amount span { font-size: 14px; color: var(--ink-3); }
.coach-cta { width: 100%; justify-content: center; }
.coach-pay { font-size: 12px; line-height: 1.45; color: var(--ink-3); }
@media (max-width: 1180px) and (min-width: 901px) {
  .order-steps { grid-template-columns: minmax(0, 1fr); }
  .coach { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .coach-act { grid-column: 1 / -1; grid-template-columns: auto minmax(0, 260px) minmax(0, 1fr); align-items: center; gap: 10px 24px; }
}
@media (max-width: 900px) {
  .prices {
    display: flex; gap: 12px; max-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 4px var(--gutter) 18px;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter); scrollbar-width: none;
  }
  .prices::-webkit-scrollbar { display: none; }
  .prices > .price { flex: 0 0 min(84vw, 380px); scroll-snap-align: center; }
  .extras { grid-template-columns: minmax(0, 1fr); }
  .order-steps { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 26px 0 24px; }
  /* phones: the rail turns vertical, down the left edge */
  .order-steps .os-list { grid-template-columns: minmax(0, 1fr); margin-top: 0; }
  .order-steps .os-list li { padding: 0 0 22px 28px; }
  .order-steps .os-list li:last-child { padding-bottom: 0; }
  .order-steps .os-list li::before { left: 6px; right: auto; top: 10px; bottom: -4px; width: 2px; height: auto; }
  .order-steps .os-list li:last-child::before { display: none; }
  .order-steps .os-list li::after { left: 0; top: 2px; }
  .coach { grid-template-columns: minmax(0, 1fr); padding: 26px 22px; }
  .coach-incl { padding-left: 0; border-left: 0; }
  .addons li { grid-template-columns: minmax(0, 1fr) auto; }
  .ad-for { grid-column: 1; grid-row: 2; margin-top: -8px; }
  .addons li strong { grid-row: 1 / span 2; align-self: center; }
}
@media (prefers-reduced-motion: reduce) {
  .price-more::details-content { transition: none; }
}

/* ── Order dialog (agence-checkout.js, 2026-10-17): package, brief, review. Body scrolls, header and total stay. ── */
.dlg.order { width: min(640px, calc(100% - 24px)); overflow: hidden; }
.order-inner { display: flex; flex-direction: column; max-height: calc(100dvh - 24px); }
.order-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: clamp(20px, 3.4vw, 30px) clamp(20px, 3.4vw, 30px) 0; }
.order-kicker { font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.order h2 { margin-top: 4px; font-size: 28px; font-weight: 600; line-height: 1.05; letter-spacing: -.025em; }
.order-nav { display: flex; gap: 6px; padding: 16px clamp(20px, 3.4vw, 30px) 0; }
.order-nav li { flex: 1; display: flex; align-items: center; gap: 8px; padding-top: 10px; border-top: 2px solid var(--rule); font-size: 13px; font-weight: 600; color: var(--ink-3); }
.order-nav li span { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid currentColor; font-size: 11px; font-variant-numeric: tabular-nums; }
.order-nav li[aria-current] { color: var(--ink); border-top-color: var(--ink); }
.order-nav li.is-done { color: var(--ink-2); border-top-color: color-mix(in srgb, var(--p-cyan) 70%, var(--ink)); }
.order-nav li.is-done span { border-color: transparent; background: color-mix(in srgb, var(--p-cyan) 30%, var(--paper)); }
.order-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px clamp(20px, 3.4vw, 30px) 20px; }
.order-set { min-width: 0; margin: 18px 0 0; padding: 0; border: 0; }
.order-set legend { margin-bottom: 8px; padding: 0; font-size: 13px; font-weight: 600; }
.opts { display: grid; gap: 8px; }
.opts--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.opt {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 10px;
  padding: 12px 14px; border-radius: 12px; border: 1px solid var(--rule); background: var(--paper-2); cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt:hover { border-color: color-mix(in srgb, var(--ink) 45%, transparent); }
.opt.is-on, .opt:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: #fdfcff; }
.opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.opt-main b { display: block; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.opt-sub { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.4; color: var(--ink-2); }
.opt-price { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.opts--sm .opt { padding: 10px 12px; }
.order-outcome { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--p-cyan) 13%, var(--paper-2)); font-size: 14px; line-height: 1.5; }
.order-outcome span { display: block; margin-bottom: 3px; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.add-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--rule); }
.add-row:last-child { border-bottom: 1px solid var(--rule); }
.add-name { font-size: 14.5px; line-height: 1.35; }
.add-name small { display: block; font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.stepper { display: inline-flex; align-items: center; flex: none; border: 1px solid var(--rule); border-radius: 10px; background: var(--paper-2); transition: border-color .2s ease; }
.step-btn { width: 40px; height: 40px; border: 0; border-radius: 9px; background: transparent; font-size: 18px; line-height: 1; cursor: pointer; }
.step-btn:disabled { opacity: .3; cursor: default; }
.step-btn:not(:disabled):hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.stepper output { min-width: 24px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.add-row.is-on .stepper { border-color: var(--ink); }
.order-muted { font-size: 14px; color: var(--ink-3); }
.field-opt { font-weight: 400; color: var(--ink-3); }
.field-hint { font-size: 12.5px; line-height: 1.45; color: var(--ink-3); }
.order .field-row { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.order-set--inline { margin-top: 16px; }
.order-lines { margin-top: 16px; border-top: 1px solid var(--rule); }
.order-lines li { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--rule); font-size: 15px; }
.order-lines small { color: var(--ink-3); }
.order-lines b { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.order-facts { display: grid; gap: 8px; margin-top: 14px; }
.order-facts div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; font-size: 13.5px; line-height: 1.5; }
.order-facts dt { padding-top: 2px; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.order-nextline { margin-top: 14px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--rule); background: var(--paper-2); font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.order-checks { display: grid; gap: 10px; margin-top: 16px; }
.chk { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 13.5px; line-height: 1.5; cursor: pointer; }
.chk input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--ink); }
.chk a { text-decoration: underline; text-underline-offset: .18em; }
.order-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 14px; padding: 14px clamp(20px, 3.4vw, 30px); border-top: 1px solid var(--rule); background: var(--paper-2); }
.order-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.order-total span { font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.order-total b { font-size: 26px; font-weight: 600; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.order-total small { font-size: 12px; color: var(--ink-3); }
.order-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.order-status { padding: 0 clamp(20px, 3.4vw, 30px); background: var(--paper-2); font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.order-status:not(:empty) { padding-bottom: 14px; }
.order-status a { text-decoration: underline; }
@media (max-width: 560px) {
  .opts--2 { grid-template-columns: minmax(0, 1fr); }
  .order-btns { width: 100%; }
  .order-btns .btn { flex: 1 1 auto; }
  .order-nav li { font-size: 12px; }
}

/* ── /thanks: where Stripe brings a buyer back ── */
.thanks { min-height: 100svh; padding: calc(var(--nav-h) + clamp(56px, 10vh, 120px)) 0 var(--section); background: var(--paper); color: var(--ink); --c: var(--p-cyan); }
.thanks-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: 40px; }
.thanks-lede { color: var(--ink-2); }
/* After an order, the shell stops selling: no contact pitch, no dock, no nav button; the footer stays. */
body[data-page="thanks"] :is(#contact-title, .contact .dab, .contact-sub, .contact-actions, .contact-else, #dock, .nav-cta, .nav-menu-cta) { display: none; }
body[data-page="thanks"] .contact { padding-top: 48px; }
.thanks-card { min-height: 120px; padding: 22px 24px; border-radius: var(--r-big); border: 1px solid var(--rule); background: var(--paper-2); box-shadow: var(--e1); }
.thanks-state { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.thanks-state::before { content: ""; width: 9px; height: 9px; border-radius: 48% 52% 46% 54% / 55% 45% 55% 45%; background: var(--p-yellow); }
.thanks-state.is-paid::before { background: #4fc58f; } /* success stays green: the pigments no longer have one */
.thanks-pack { margin-top: 10px; font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.thanks-adds { margin-top: 6px; font-size: 14px; color: var(--ink-2); }
.thanks-total { margin-top: 10px; font-size: 34px; font-weight: 600; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.thanks-muted { margin-top: 8px; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.thanks-next { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: clamp(40px, 7vh, 72px); padding-top: 28px; border-top: 1px solid var(--rule); }
.thanks-next li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; }
.thanks-next b { display: block; font-size: 16px; font-weight: 600; }
.thanks-next li span:not(.os-n) { display: block; margin-top: 5px; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.thanks-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 36px; }
/* /coaching: the "coming soon" page for the coaching offer. No form, no price: a title, one line, a way back. */
.cs-page { min-height: 100svh; padding: calc(var(--nav-h) + clamp(56px, 10vh, 120px)) 0 var(--section); background: var(--paper); color: var(--ink); --c: var(--p-pink); }
.cs-lede { max-width: 46ch; margin-top: 18px; color: var(--ink-2); }
.cs-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
@media (max-width: 900px) {
  .thanks-grid, .thanks-next { grid-template-columns: minmax(0, 1fr); }
}

/* ── 12 checks, FAQ and contact: entrance and second level (2026-10-27). The glyphs of the 12 checks draw themselves
   when the brush stamps their cell; the FAQ has a search box, answers that point to what comes next and addresses
   that open them; the contact block has starter sentences that fill the brief form. Opacity, translate and scale only;
   a reduced-motion request switches every transition off. ── */
.ck-glyph.is-draw .g-stroke > :not([stroke-dasharray]) { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.2s var(--ease) .15s; }
.ck.is-painted .ck-glyph.is-draw .g-stroke > :not([stroke-dasharray]) { stroke-dashoffset: 0; }
.ck-glyph.is-draw .g-acc, .ck-glyph.is-draw .g-fill { transform-box: fill-box; transform-origin: center; scale: 0; transition: scale .6s var(--ease) .75s; }
.ck.is-painted .ck-glyph.is-draw .g-acc, .ck.is-painted .ck-glyph.is-draw .g-fill { scale: 1; }
/* sweeping the mouse over the sheet does not flash every cell's screen: it shows after a short intent delay */
.ck:hover:not(:focus-within):not(.is-open) .ck-desc { transition-delay: .1s; }
.qa { opacity: var(--in, 1); translate: 0 calc((1 - var(--in, 1)) * 12px); transition: opacity .55s ease, translate .6s var(--ease); }
.qa:last-of-type { border-bottom: 1px solid var(--rule); }
.qa-search { position: relative; display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.qa-search input {
  flex: 1; min-width: 0; height: 46px; padding: 0 16px 0 46px; border: 1px solid var(--rule); border-radius: 999px; font: inherit; font-size: 15px; color: var(--ink);
  background: var(--paper-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6977' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E") no-repeat 17px 50% / 18px;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.qa-search input::placeholder { color: var(--ink-3); }
.qa-search input:focus { outline: none; border-color: var(--ink-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 30%, transparent); }
.qa-count { flex: none; min-width: 6ch; font-family: var(--f-mono); font-size: 12px; color: var(--ink-3); text-align: right; }
.qa[hidden], .qa-empty[hidden] { display: none; }
.qa-empty { margin: 18px 0 0; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.qa-inner p.qa-next { margin: -10px 0 0; padding: 0 40px 22px 0; transition-delay: .14s, .14s; }
.qa-go { color: var(--ink); font-size: 14.5px; }
button.qa-go { padding: 0; border: 0; background: none; font: inherit; font-size: 14.5px; text-align: left; cursor: pointer; }
.contact .wrap > .contact-sub, .contact .wrap > .contact-actions, .contact .wrap > .contact-starters, .contact .wrap > .contact-founder, .contact .wrap > .contact-else {
  opacity: var(--in, 1); translate: 0 calc((1 - var(--in, 1)) * 16px); transition: opacity .7s ease, translate .8s var(--ease);
}
.contact-bg img { scale: calc(1.1 - var(--in, 1) * .1); transition: scale 2.8s var(--ease); }
.contact-starters { display: grid; gap: 10px; margin-top: 22px; }
.cs-label { font-size: 13px; color: var(--cream-3); }
.cs-list { display: flex; flex-wrap: wrap; gap: 8px; }
.cs-chip {
  padding: 9px 15px; border: 1px solid var(--rule-dark); border-radius: 999px; background: rgba(243, 241, 247, .05); color: var(--cream-2);
  font: inherit; font-size: 14px; line-height: 1.3; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
@media (hover: hover) and (pointer: fine) { .cs-chip:hover { border-color: rgba(243, 241, 247, .42); background: rgba(243, 241, 247, .12); color: var(--cream); } }
.cs-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .ck-glyph.is-draw .g-stroke > *, .ck-glyph.is-draw .g-acc, .ck-glyph.is-draw .g-fill, .qa, .qa-search input, .cs-chip, .contact-bg img,
  .contact .wrap > .contact-sub, .contact .wrap > .contact-actions, .contact .wrap > .contact-starters, .contact .wrap > .contact-founder, .contact .wrap > .contact-else { transition: none; }
}

/* ── Language switch (2026-10-27): a small globe with the current code, between the links and the call to action
   (before the burger on small screens). The menu is a dark glass sheet like the mobile menu; its rows are links. ── */
.nav-lang { position: relative; flex: none; }
.nav-lang-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 11px 0 9px; border: 1px solid rgba(243, 241, 247, .26); border-radius: 999px;
  background: transparent; color: var(--cream); font: inherit; font-size: 12px; font-weight: 600; letter-spacing: .06em; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.nav-lang-btn svg { flex: none; transition: transform .6s var(--ease); }
.nav-lang-btn:hover, .nav-lang.is-open .nav-lang-btn { background: rgba(243, 241, 247, .12); border-color: rgba(243, 241, 247, .5); }
.nav-lang-btn:hover svg, .nav-lang.is-open .nav-lang-btn svg { transform: rotate(60deg); }
.nav-lang-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.nav.on-light:not(.is-open) .nav-lang-btn { color: var(--ink); border-color: var(--rule); }
.nav.on-light:not(.is-open) .nav-lang-btn:hover, .nav.on-light:not(.is-open) .nav-lang.is-open .nav-lang-btn { background: rgba(22, 21, 29, .06); border-color: var(--ink-3); }
.nav-lang-menu {
  position: absolute; right: 0; top: calc(100% + 12px); z-index: 60; width: 232px; max-height: min(66vh, 420px); overflow-y: auto; overscroll-behavior: contain;
  padding: 6px; border: 1px solid var(--rule-dark); border-radius: 16px; background: rgba(13, 12, 18, .97); color: var(--cream);
  -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); box-shadow: 0 22px 54px -14px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .06);
  scrollbar-width: thin; scrollbar-color: rgba(243, 241, 247, .3) transparent; transform-origin: 100% 0;
}
.nav-lang-menu[hidden] { display: none; }
.nav-lang-menu a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; padding: 8px 12px; border-radius: 10px; color: var(--cream-2); font-size: 15px; font-weight: 500; text-decoration: none; transition: background-color .15s ease, color .15s ease; }
.nav-lang-menu a:hover, .nav-lang-menu a:focus-visible { background: rgba(243, 241, 247, .09); color: var(--cream); outline: none; }
.nav-lang-menu a:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.nav-lang-menu a[aria-current] { color: var(--cream); font-weight: 650; }
.nav-lang-menu a i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: conic-gradient(from 200deg, var(--holo-1), var(--holo-2), var(--holo-3), var(--holo-4), var(--holo-5), var(--holo-1)); }
.nav-lang-menu hr { height: 1px; margin: 6px 4px; border: 0; background: var(--rule-dark); }
@media (prefers-reduced-motion: no-preference) {
  .nav-lang.is-open .nav-lang-menu { animation: nav-lang-in .32s var(--ease) both; }
}
@keyframes nav-lang-in { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
@media (max-width: 1080px) {
  .nav-lang { margin-left: auto; margin-right: -10px; }
  .nav-burger { margin-left: 0; }
}
@media (max-width: 420px) { .nav-lang-menu { position: fixed; left: 12px; right: 12px; top: calc(var(--nav-h) + 8px); width: auto; } }
@media (prefers-reduced-motion: reduce) { .nav-lang-btn, .nav-lang-btn svg, .nav-lang-menu a { transition: none; } }

/* ── Small type, heavier (2026-10-18): thin text at small sizes was hard to read. Cabinet Grotesk and JetBrains Mono are variable,
   so text at 14px and below is set at 500 and text up to 15.5px at 450. Generated from scratch/small-type-audit.cjs;
   new small text should use these weights too. Placed last so it wins over the rules above. ── */
.ck-desc,
.day2-date,
.step-body,
.chat-form textarea,
.playground-note,
.day2-body,
.way-promise,
.add-name,
.order-lines li { font-weight: 450; }
.same-caption,
.proof-note,
.way-list li,
.way-proof,
.ck-n,
.price-for,
.price-cad,
.price-meta dt,
.price-meta dd small,
.price-incl li,
.price-excl li,
.price-note,
.addons li,
.addons-note,
.pricing-small,
.day2-terms p,
.process-note,
.step-marker,
.facts span,
.contact-else,
.footer,
.dlg-sub,
.dlg-status,
.chat-head span,
.bubble,
.chat-suggs button,
.spot-card p,
.playground .iface-card-tag,
.iface-modal-urlbar,
.day2-date,
.ledger-stamp,
.sign-role,
.price-call,
.price-pay,
.os-list li span:not(.os-n),
.ad-for,
.opt-sub,
.order-outcome,
.add-name small,
.order-muted,
.field-hint,
.order-facts div,
.order-nextline,
.chk,
.order-total small,
.order-status,
.thanks-adds,
.thanks-muted,
.thanks-next li span:not(.os-n) { font-weight: 500; }
/* Hero main CTA over the liquid glass (hero-liquid-core.tsx mountGlassButton). The <a> stays the real control; the glass
   span sits behind its label and the brand gradient is repainted as a translucent layer over it, so the hues show through.
   All of it is gated on html.has-liquid-btn, which JS sets only while the glass is painting: otherwise the plain gradient button. */
.hl-btn-glass { position: absolute; inset: 0; z-index: -2; border-radius: inherit; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .5s ease; }
html.has-liquid-btn .btn-glass .hl-btn-glass { opacity: 1; }
.btn-glass::before { content: none; }
html.has-liquid-btn .btn-glass::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background: linear-gradient(180deg, rgba(34, 32, 44, .5), rgba(14, 13, 20, .62)); opacity: 1; /* dark, one colour, see-through so the liquid glass shows */
  transition: opacity .2s ease;
}
html.has-liquid-btn .btn-glass:hover::before, html.has-liquid-btn .btn-glass:focus-visible::before { opacity: .8; }
html.has-liquid-btn .btn-glass:active::before { opacity: .7; }
html.has-liquid-btn .btn-glass { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 8px 22px -12px rgba(8, 20, 40, .6); }
@media (prefers-reduced-motion: reduce) { .hl-btn-glass { transition: none; } html.has-liquid-btn .btn-glass::before { transition: none; } }
/* The label stays a normal text span: white (with a soft dark shadow for legibility over the gradient) only while the glass
   button is live; the non-live fallback keeps the original dark label on the full gradient. */
html.has-liquid-btn .btn-glass .btn-label { color: #fff; text-shadow: 0 1px 2px rgba(6, 18, 40, .55), 0 0 12px rgba(6, 18, 40, .28); }
/* Tint deepened a touch (still multicolor) so white text keeps ~4.5:1 over the gradient: measured median 3.3:1 -> 5.1:1 at rest. */
html.has-liquid-btn .btn-glass::before { filter: none; }
/* Hero glass button: no edge. The 1px border let the ribbon gradient show round the dark tint, and the glass adds its own rim. */
html.has-liquid-btn .btn-glass { background: transparent; border-color: transparent; box-shadow: 0 8px 22px -12px rgba(8, 20, 40, .6); }
html.has-liquid-btn .btn-glass .liquid-glass-border { display: none; }
/* The library's frost layer paints a white inset highlight top and bottom (inline style): that read as a border too. */
html.has-liquid-btn .btn-glass [data-liquid-glass] > div { box-shadow: none !important; }
/* While the liquid glass is still starting (html.hl-wait, dropped after 2.6 s), the stand-in styles stay out of sight so the old look never flashes. */
html.hl-wait:not(.has-liquid) .hero h1 em { visibility: hidden; }
.btn-glass:not(.x) { background: linear-gradient(180deg, rgba(34, 32, 44, .62), rgba(14, 13, 20, .72)); border-color: transparent; box-shadow: 0 8px 22px -12px rgba(8, 20, 40, .6); }
.btn-glass .btn-label { color: #fff; }