/* ==========================================================================
   C-Lion, c-lion.ai v5. Built by maker, 28 Sep 2026.
   Palette source, 28 Sep 2026 refresh: Website/_dashboard_refresh_28sep/
   refresh.src.css section 2, the dashboard's neutral charcoal dark
   (--bg #151314, --surface #1E1B1D/#262325, --ink #E8E2DF/#FAF5F2), and
   section 1's light values, replacing the original build's near black
   #0B120E under saturated Forest #1E4231, confirmed against
   Clients/C-Lion + C-Lion/03_visual/C-Lion_Design_Bible.md ruling 5/6 for
   everything the refresh does not touch (the mint accent itself, the
   fixed brand hues).
   Type: Bricolage Grotesque (display, headlines only), Hanken Grotesk
   (body, labels, every number, tabular figures), Instrument Serif
   (italic accent), Comfortaa (wordmark only, local woff2). Celine ruled
   rounded type "baby" for headlines, so Comfortaa never moves past the
   wordmark even though the dashboard itself uses it for room titles.
   ========================================================================== */

@font-face {
  font-family: "Comfortaa";
  src: url("../fonts/Comfortaa-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Comfortaa";
  src: url("../fonts/Comfortaa-300.woff2") format("woff2");
  font-weight: 300;
  font-display: swap;
}

:root {
  /* ---- dark ground, the default. Replaced 28 Sep 2026 with the dashboard
     refresh's own neutral charcoal (Website/_dashboard_refresh_28sep/
     refresh.src.css section 2), after the NavAIgate round called the old
     near black #0B120E under saturated Forest #1E4231 with bright green
     edges "a funny green with black". No surface or edge here is green
     any more; green is kept for the mint accent only, never a card. ---- */
  --bg: #151314;
  --surface: #1E1B1D;
  --surface-2: #262325;
  --surface-3: #2E2A2C;
  --ink: #E8E2DF;
  --ink-strong: #FAF5F2;
  --ink-muted: #B8AFAB;
  --border: #37312F;
  --card-edge: #423B3A;
  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 10px 26px rgba(0,0,0,.55);
  --shadow-3: 0 30px 80px rgba(0,0,0,.5);

  /* ---- fixed brand ---- */
  --forest: #1B4332;
  --growth: #2D6A4F;
  --mid-green: #52B788;
  --sage: #95B39C;
  --ivory: #F3EEE7;
  --charcoal: #4A4A4A;
  --mist: #D9DDD8;
  --mint: #CDEBDD;

  /* fixed, theme independent: pastel and always dark backgrounds (the
     mint CTA panel, chips, dark pills) need the same ink whichever theme
     the rest of the page is in, per the Design Bible contrast rule, text
     on a pastel is Forest or Charcoal, never white. Every one of these
     replaces a hex literal that used to be typed out again at its own
     call site; a dashboard palette swap now only ever touches this block. */
  --cream: #F8F5F1;
  /* was its own fixed #12291F; the refresh gives text on the mint accent
     as Forest in both modes (refresh.src.css --accent-ink), so this now
     just points at the one token instead of carrying a second dark green
     that happened to be close to it */
  --ink-on-pastel: var(--forest);
  --ink-on-pastel-soft: #244235;
  --ink-on-pastel-softer: #CFE3D6;
  /* the same near black the refresh gives the sample strip in dark mode
     (refresh.src.css, .cl-fixture), reused here so the phone bezel reads
     as part of the same neutral family instead of the old near black
     that had a green cast to it */
  --device-shell-dark: #0F0D0E;
  --device-shell-light: var(--ink-on-pastel);
  --hero-glow-dark: #163527;
  --hero-glow-light: #EAF3EC;
  /* the hero phone stack's own bezel: near black in dark mode, a plain
     white frame in light mode (it reuses --surface there, since light
     mode's --surface already is #FFFFFF, one value, never typed twice) */
  --phone-bezel-dark: var(--device-shell-dark);
  --phone-bezel-light: var(--surface);
  /* mint used AS TEXT (the accent serif word, the rotating word slot, the
     footer tagline): mint itself is a pale pastel, fine as a small fill
     on a dark ground, unreadable as text on the light theme's cream
     ground. Growth is the same accent family, dark enough to read there. */
  --mint-text-dark: var(--mint);
  --mint-text-light: var(--growth);

  --accent: var(--mint);
  --accent-ink: var(--ink-on-pastel);
  --on-accent: var(--ink-on-pastel);

  /* theme switching aliases, dark default; overridden in the light
     blocks below, never redeclared as a literal anywhere else in this
     file */
  --device-shell: var(--device-shell-dark);
  --hero-glow: var(--hero-glow-dark);
  --phone-bezel: var(--phone-bezel-dark);
  --mint-text: var(--mint-text-dark);

  /* type, 28 Sep 2026: body, labels, small caps and every number now match
     the dashboard refresh's own Hanken Grotesk with tabular figures.
     Celine's ruling stands regardless: the display face stays for the
     big headlines (she called rounded type "baby"), and Comfortaa never
     moves past the wordmark. */
  --font-display: "Bricolage Grotesque", "Comfortaa", sans-serif;
  --font-body: "Hanken Grotesk", "Raleway", sans-serif;
  --font-data: "Hanken Grotesk", "Raleway", sans-serif;
  --font-serif: "Instrument Serif", serif;
  --font-word: "Comfortaa", sans-serif;

  --container: 1280px;
  --gutter: clamp(20px, 5vw, 64px);
  --radius-s: 10px;
  --radius-m: 18px;
  --radius-l: 28px;

  /* ---- motion tokens, Material 3 sourced, see MOTION_CONTRACT.md ---- */
  --dur-micro: 140ms;
  --dur-entrance: 450ms;
  --dur-band: 400ms;
  --dur-hero: 600ms;
  --ease-standard: cubic-bezier(0.2, 0.0, 0, 1.0);
  --ease-emph-dec: cubic-bezier(0.05, 0.7, 0.1, 1.0);
  --ease-emph-acc: cubic-bezier(0.3, 0.0, 0.8, 0.15);
  --ease-press: cubic-bezier(0.32, 0.72, 0, 1.0);

  color-scheme: dark;
}

/* light mode: prefers-color-scheme, overridden by explicit data-theme */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    /* the refresh's own light values, 28 Sep 2026 (refresh.src.css section
       1 / Lily's handoff): title, body and muted are three different
       weights, not two, and body reads as neutral charcoal, not Forest,
       which was too heavy for running text. */
    --bg: #F8F5F1;
    --surface: #FFFFFF;
    --surface-2: #FAF9F7;
    --surface-3: #F3EEE7;
    --ink: #4A4A4A;
    --ink-strong: #1B4332;
    --ink-muted: #6B6563;
    --border: #E7E1D6;
    --card-edge: #E7E1D6;
    --shadow-1: 0 1px 2px rgba(27,67,50,.08);
    --shadow-2: 0 10px 26px rgba(27,67,50,.10);
    --shadow-3: 0 30px 80px rgba(27,67,50,.14);
    --accent-ink: var(--forest);
    --device-shell: var(--device-shell-light);
    --hero-glow: var(--hero-glow-light);
    --phone-bezel: var(--phone-bezel-light);
    --mint-text: var(--mint-text-light);
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --bg: #F8F5F1;
  --surface: #FFFFFF;
  --surface-2: #FAF9F7;
  --surface-3: #F3EEE7;
  --ink: #4A4A4A;
  --ink-strong: #1B4332;
  --ink-muted: #6B6563;
  --border: #E7E1D6;
  --card-edge: #E7E1D6;
  --shadow-1: 0 1px 2px rgba(27,67,50,.08);
  --shadow-2: 0 10px 26px rgba(27,67,50,.10);
  --shadow-3: 0 30px 80px rgba(27,67,50,.14);
  --accent-ink: var(--forest);
  --device-shell: var(--device-shell-light);
  --hero-glow: var(--hero-glow-light);
  --phone-bezel: var(--phone-bezel-light);
  --mint-text: var(--mint-text-light);
  color-scheme: light;
}
:root[data-theme="dark"] { color-scheme: dark; }

* { box-sizing: border-box; }
html { scroll-behavior: auto; }
html, body { background: var(--bg); }
body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background var(--dur-band) var(--ease-standard), color var(--dur-band) var(--ease-standard);
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; margin: 0; color: var(--ink-strong); letter-spacing: -0.01em; }
p { margin: 0; line-height: 1.6; }
em.accent-serif { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--mint-text); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

::selection { background: var(--mid-green); color: var(--ink-on-pastel); }

/* film grain, fixed, extremely subtle, decorative texture only, never carries
   content. A tiled PNG, not an SVG feTurbulence filter: the filter version
   was measured to force a full noise recompute across the entire fixed
   layer on every paint, which is imperceptible at one viewport but turns
   catastrophic the moment anything (a full page screenshot, a tall phone
   capture) asks Chrome to paint the whole document height at once. */
.grain {
  position: fixed; inset: 0; z-index: 3; pointer-events: none;
  opacity: .35; mix-blend-mode: overlay;
  background-image: url("../img/brand/grain.png");
  background-size: 128px 128px;
}

/* cursor spotlight, dark ground only, pointer devices only */
.cursor-spot {
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
  opacity: 0; transition: opacity .3s ease;
  background: radial-gradient(480px circle at var(--mx,50%) var(--my,50%), rgba(205,235,221,.08), transparent 70%);
}
@media (hover: hover) and (pointer: fine) {
  :root:not([data-theme="light"]) .cursor-spot { opacity: 1; }
  @media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .cursor-spot { opacity: 0; }
  }
}

/* scroll progress bar */
.progress-bar { position: fixed; top: 0; left: 0; width: 100%; height: 2px; z-index: 60; background: transparent; pointer-events: none; }
.progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--mid-green), var(--mint)); transform-origin: left; }

/* ==========================================================================
   Nav
   ========================================================================== */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; justify-content: center; padding: 18px var(--gutter) 0; }
.nav-inner {
  width: 100%; max-width: var(--container);
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 10px 10px 10px 18px;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  border: 1px solid color-mix(in srgb, var(--card-edge) 55%, transparent);
  border-radius: 999px;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: var(--shadow-2);
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand img { height: 26px; width: auto; }
.brand .wordmark { font-family: var(--font-word); font-weight: 700; font-size: 17px; color: var(--ink-strong); letter-spacing: .01em; white-space: nowrap; }
.nav-links { display: flex; gap: 28px; }
.nav-links a { font-size: 14px; color: var(--ink-muted); transition: color var(--dur-micro) var(--ease-standard); }
.nav-links a:hover { color: var(--ink-strong); }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.nav-cta .cta-short { display: none; }
.theme-toggle {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--ink); display: grid; place-items: center;
  cursor: pointer; transition: transform var(--dur-micro) var(--ease-press), background var(--dur-micro);
}
.theme-toggle:hover { background: var(--surface-3); }
.theme-toggle svg { width: 17px; height: 17px; }
.icon-sun { display: none; }
:root[data-theme="light"] .icon-moon { display: none; }
:root[data-theme="light"] .icon-sun { display: block; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .icon-moon { display: none; }
  :root:not([data-theme="dark"]) .icon-sun { display: block; }
}
/* the lioness mark: cream on dark backgrounds, dark green on light, per
   the standing logo rule. Same swap pattern as the theme icon above. */
.mark-light { display: none; }
:root[data-theme="light"] .mark-dark { display: none; }
:root[data-theme="light"] .mark-light { display: block; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .mark-dark { display: none; }
  :root:not([data-theme="dark"]) .mark-light { display: block; }
}

@media (max-width: 760px) {
  .nav-links { display: none; }
  .nav-inner { padding: 8px 8px 8px 14px; }
  .brand .wordmark { font-size: 15px; }
}
@media (max-width: 600px) {
  /* the long CTA label was squeezing the wordmark onto two lines at 360
     to 390px; the wordmark must never wrap, so the button shortens
     instead, never the brand name. */
  .nav-cta .cta-full { display: none; }
  .nav-cta .cta-short { display: inline; }
  .nav-actions { gap: 6px; }
  .nav-inner { padding: 6px 6px 6px 12px; }
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  padding: 13px 24px; border-radius: 999px; font-size: 14px; font-weight: 600;
  white-space: nowrap; border: 1px solid transparent; cursor: pointer;
  transition: transform var(--dur-micro) var(--ease-press), box-shadow var(--dur-micro) var(--ease-press), background var(--dur-micro);
}
.btn-primary { background: var(--mint); color: var(--accent-ink); }
.btn-primary:hover { box-shadow: var(--shadow-2); }
.btn-ghost { background: transparent; color: var(--ink-strong); border-color: var(--border); }
.btn-ghost:hover { border-color: var(--card-edge); background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
.btn-dark { background: var(--forest); color: var(--cream); }
.btn svg { width: 15px; height: 15px; }

/* magnetic buttons: JS sets --mx/--my translate via transform, base is static (works with no JS) */
.magnetic { transform: translate(var(--mgx, 0px), var(--mgy, 0px)); }

/* ==========================================================================
   Section shell
   ========================================================================== */
section { position: relative; }
.wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-muted); margin: 0 0 18px;
}
.eyebrow .bullet { width: 7px; height: 7px; background: var(--mid-green); flex: none; }
.section-head { max-width: 760px; margin: 0 0 48px; }
.section-head h2 { font-size: clamp(30px, 4.4vw, 52px); line-height: 1.08; }
.section-head p { margin-top: 16px; font-size: 17px; color: var(--ink-muted); max-width: 56ch; }

/* reveal mechanism: default fully visible; JS arms [data-reveal-armed] only after
   the observer constructs. Never hidden by a bare CSS rule (MOTION_CONTRACT 4). */
[data-reveal] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  [data-reveal-armed] [data-reveal] {
    opacity: 0; transform: translateY(14px);
    transition: opacity var(--dur-entrance) var(--ease-standard), transform var(--dur-entrance) var(--ease-standard);
  }
  [data-reveal-armed] [data-reveal].is-revealed { opacity: 1; transform: none; }
  [data-reveal-armed] [data-reveal="hero"] { transform: translateY(20px); transition-duration: var(--dur-hero); }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  min-height: 100svh; display: flex; flex-direction: column; justify-content: center;
  padding: 150px var(--gutter) 90px; overflow: hidden;
  /* --hero-glow and --bg already switch with the theme on their own, so
     one rule now covers both, where this used to be three. */
  background: radial-gradient(120% 90% at 18% -10%, var(--hero-glow) 0%, var(--bg) 58%), var(--bg);
}
.hero-gl { position: absolute; inset: 0; z-index: 0; opacity: .55; }
.hero-mark-glow {
  position: absolute; top: 8%; right: 6%; width: 46vw; max-width: 620px; aspect-ratio: 1;
  background: radial-gradient(circle, color-mix(in srgb, var(--mid-green) 55%, transparent) 0%, transparent 68%);
  filter: blur(10px); z-index: 0; pointer-events: none;
}
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; max-width: var(--container); margin: 0 auto; width: 100%; }
.hero-headline {
  font-size: clamp(40px, 6.1vw, 84px); line-height: .98; letter-spacing: -0.02em;
  color: var(--ink-strong);
}
.hero-headline .dim { color: var(--ink-muted); }
.hero-headline .split-line { display: block; padding-bottom: .06em; }
.split-mask { overflow: hidden; }
.split-inner { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .kinetic-armed .split-inner {
    transform: translateY(0); opacity: 1;
  }
  .hero-headline:not(.kinetic-armed) .split-inner { transform: translateY(0); opacity: 1; }
  .kinetic-armed .split-inner { animation: riseWord .75s var(--ease-emph-dec) both; animation-delay: calc(var(--i, 0) * 45ms); }
}
@keyframes riseWord { from { transform: translateY(110%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
/* Fixed 28 Sep 2026 (Celine, on her phone: "a bit down and you can't read it properly"): the slot was
   1.02em tall and bottom aligned, so the italic serif sat low and was clipped. Now it is tall enough
   for the serif's ascenders and descenders, and aligned to the text baseline. */
.rotate-slot { position: relative; display: inline-grid; vertical-align: baseline; overflow: hidden; height: 1.72em; line-height: 1.5em; font-size: 1.3em; padding: 0 .14em 0 .04em; margin-bottom: -0.57em; }
.rotate-slot span {
  grid-area: 1/1; font-family: var(--font-serif); font-style: italic; font-weight: 400;
  color: var(--mint-text); opacity: 0; transform: translateY(100%);
}
.rotate-slot span.is-active { opacity: 1; transform: translateY(0); transition: transform .55s var(--ease-emph-dec), opacity .4s ease; }
.rotate-slot span.is-leaving { opacity: 0; transform: translateY(-100%); transition: transform .55s var(--ease-emph-acc), opacity .4s ease; }
@media (prefers-reduced-motion: reduce) { .rotate-slot span { position: static; opacity: 1; transform: none; display: none; } .rotate-slot span:first-child { display: inline; } }

.hero-sub { margin-top: 26px; font-size: 18px; color: var(--ink-muted); max-width: 46ch; line-height: 1.65; }
.hero-ctas { margin-top: 36px; display: flex; gap: 14px; flex-wrap: wrap; }
.hero-note { margin-top: 22px; font-size: 13px; color: var(--ink-muted); }
.hero-note b { color: var(--ink); font-weight: 600; }

/* live product visual: tilted stacked phone cards */
.hero-visual { position: relative; height: clamp(420px, 52vw, 620px); perspective: 1400px; }
.phone-stack { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.phone-card {
  /* 4:5, the exact frame Tétique's own posts are shot in, so the real
     image covers the card with zero crop on the glass image and only a
     safe, checked, symmetric side crop on the tiles image, never touching
     either one's headline or logo. */
  position: absolute; width: clamp(180px, 21vw, 240px); aspect-ratio: 4/5;
  border-radius: 26px; overflow: hidden; border: 6px solid var(--phone-bezel);
  box-shadow: var(--shadow-3);
  transform: rotate(var(--r)) translate(var(--tx), var(--ty)) rotateY(var(--ry, 0deg));
  transition: transform .5s var(--ease-emph-dec), border-color var(--dur-band) var(--ease-standard);
}
.phone-card img { width: 100%; height: 100%; object-fit: cover; }
.phone-card:nth-child(1) { --r: -9deg; --tx: -6%; --ty: 12%; z-index: 1; }
.phone-card:nth-child(2) { --r: 5deg; --tx: 34%; --ty: -4%; z-index: 2; }
.phone-card:nth-child(3) { --r: -3deg; --tx: 12%; --ty: 46%; z-index: 3; }

/* two real client images: bigger, more deliberate, the showpiece of the hero */
.phone-stack.count-2 .phone-card { width: clamp(215px, 25vw, 290px); }
.phone-stack.count-2 .phone-card:nth-child(1) { --r: -8deg; --tx: 2%; --ty: 10%; }
.phone-stack.count-2 .phone-card:nth-child(2) { --r: 6deg; --tx: 46%; --ty: 22%; }

@media (max-width: 980px) {
  .phone-stack:not(.count-2) .phone-card:nth-child(1) { display: none; }
}

.scroll-cue {
  position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); z-index: 2;
}
.scroll-cue .wheel { width: 22px; height: 34px; border: 1.5px solid var(--border); border-radius: 12px; position: relative; }
.scroll-cue .wheel::after { content: ""; position: absolute; top: 6px; left: 50%; width: 3px; height: 7px; background: var(--mid-green); border-radius: 2px; transform: translateX(-50%); }
@media (prefers-reduced-motion: no-preference) { .scroll-cue .wheel::after { animation: cue 1.8s ease-in-out infinite; } }
@keyframes cue { 0%,100% { transform: translate(-50%,0); opacity: 1; } 60% { transform: translate(-50%,10px); opacity: 0; } }

@media (max-width: 980px) {
  .hero { padding-top: 120px; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { height: 380px; margin-top: 20px; }
}

/* ==========================================================================
   Marquee
   ========================================================================== */
.marquee-section { padding: 64px 0 70px; background: var(--bg); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); overflow: hidden; }
.marquee { overflow: hidden; }
.marquee-track { display: flex; gap: 18px; width: max-content; }
/* 28 Sep 2026: will-change only where there is a fine pointer. On iPhone it pinned the whole strip as one giant layer and helped crash Safari. */
@media (hover: hover) and (pointer: fine) { .marquee-track { will-change: transform; } }
.marquee-track img { height: clamp(150px, 20vw, 230px); width: auto; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--radius-m); border: 1px solid var(--border); flex: none; }
.marquee-label { text-align: center; margin-top: 30px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); }
@media (prefers-reduced-motion: reduce) { .marquee { overflow-x: auto; } }

/* ==========================================================================
   Statement panel, full width
   ========================================================================== */
.statement { padding: 110px 0; background: var(--surface); color: var(--ink-strong); }
.statement-inner { max-width: 960px; }
.statement h2 { font-size: clamp(30px, 4.6vw, 54px); line-height: 1.15; }
.statement-facts { margin-top: 52px; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 26px 40px; border-top: 1px solid var(--border); padding-top: 32px; }
.statement-facts .fact-label { display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 8px; }
.statement-facts .fact-value { font-family: var(--font-display); font-size: 20px; color: var(--ink-strong); }

/* ==========================================================================
   Bento grid
   ========================================================================== */
.bento { padding: 130px 0; }
.bento-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.bento-card {
  grid-column: span 3; border: 1px solid var(--border); border-radius: var(--radius-l);
  background: var(--surface); padding: 28px; min-height: 260px; display: flex; flex-direction: column;
  transition: transform var(--dur-band) var(--ease-emph-dec), border-color var(--dur-band);
}
.bento-card:hover { transform: translateY(-4px); border-color: var(--card-edge); }
.bento-card.span-2 { grid-column: span 2; }
.bento-card.span-4 { grid-column: span 4; }
.bento-anim { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 130px; margin-bottom: 18px; }
.bento-card h3 { font-size: 19px; margin-bottom: 8px; }
.bento-card p { font-size: 14.5px; color: var(--ink-muted); }
@media (max-width: 900px) {
  .bento-grid { grid-template-columns: repeat(2, 1fr); }
  .bento-card, .bento-card.span-2, .bento-card.span-4 { grid-column: span 2; }
}

/* caption typing card */
.type-card { width: 100%; background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; font-size: 13.5px; color: var(--ink); min-height: 76px; }
.type-card .typed { }
.type-card .caret { display: inline-block; width: 2px; height: 1em; background: var(--mid-green); vertical-align: -2px; margin-left: 2px; }
@media (prefers-reduced-motion: no-preference) { .type-card .caret { animation: blink 1s step-end infinite; } }
@keyframes blink { 50% { opacity: 0; } }

/* chip row, cycling: the four rotating words, reused verbatim from the hero */
.chip-row { display: flex; gap: 10px; flex-wrap: wrap; }
.chip-row .chip-word {
  padding: 11px 20px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface-2); font-size: 14px; color: var(--ink-muted); opacity: .4;
  transition: opacity .5s var(--ease-standard), background .5s var(--ease-standard), border-color .5s var(--ease-standard), transform .5s var(--ease-standard);
}
.chip-row .chip-word.is-active { opacity: 1; color: var(--ink-strong); transform: translateY(-2px); background: color-mix(in srgb, var(--mint) 20%, var(--surface-2)); border-color: var(--card-edge); }
.bento-card.wide { grid-column: span 6; flex-direction: row; align-items: center; justify-content: space-between; gap: 30px; min-height: auto; padding: 26px 30px; }
.bento-card.wide .bento-anim { flex: none; margin: 0; width: auto; justify-content: flex-start; }
.bento-card.wide .bento-copy { flex: 1; }
.bento-card.wide h3 { margin-bottom: 4px; }
@media (max-width: 900px) { .bento-card.wide { grid-column: span 2; flex-direction: column; align-items: flex-start; } }

/* calendar filling card */
.cal-card { width: 100%; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-grid .cell { aspect-ratio: 1; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--border); }
.cal-grid .cell.is-filled { background: var(--mid-green); border-color: var(--mid-green); }
@media (prefers-reduced-motion: no-preference) { .cal-grid .cell { transition: background .4s var(--ease-standard), border-color .4s var(--ease-standard); } }

/* clock card, time back, no invented number */
.clock-card { width: 90px; height: 90px; border-radius: 50%; border: 2px solid var(--border); position: relative; }
.clock-card .hand { position: absolute; background: var(--mint); border-radius: 2px; transform-origin: bottom center; bottom: 50%; left: 50%; }
.clock-card .hand.h { width: 3px; height: 22px; margin-left: -1.5px; }
.clock-card .hand.m { width: 2px; height: 32px; margin-left: -1px; background: var(--ink-muted); }
.clock-card .pin { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--mint); top: 50%; left: 50%; transform: translate(-50%,-50%); }
@media (prefers-reduced-motion: no-preference) {
  .clock-card .hand.h { animation: rot 8s linear infinite; }
  .clock-card .hand.m { animation: rot 3s linear infinite; }
}
@keyframes rot { to { transform: rotate(360deg); } }

/* ==========================================================================
   Pinned scroll story, how it works
   ========================================================================== */
.story { padding: 130px 0 40px; background: var(--surface); }
.story .section-head { margin: 0 auto 70px; text-align: center; max-width: 640px; }
.story-pin { display: grid; grid-template-columns: .95fr 1.05fr; gap: 60px; align-items: start; }
.story-device-col { display: flex; justify-content: center; position: sticky; top: 110px; }
.device-frame {
  width: min(340px, 78vw); aspect-ratio: 9/18; border-radius: 42px; background: var(--device-shell);
  border: 10px solid var(--device-shell); box-shadow: var(--shadow-3); position: relative; overflow: hidden;
  transition: background var(--dur-band) var(--ease-standard), border-color var(--dur-band) var(--ease-standard);
}
.device-notch { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 84px; height: 18px; background: var(--device-shell); border-radius: 10px; z-index: 5; transition: background var(--dur-band) var(--ease-standard); }
.device-screen { position: absolute; inset: 0; border-radius: 32px; overflow: hidden; background: var(--surface-2); }
/* Clip reveal, not a crossfade: the outgoing screen snaps to hidden the
   instant a new step activates (opacity has no transition, so it is an
   immediate cut, never a fade), and the incoming screen wipes into view
   over its own clip-path. At every frame exactly one screen is at full
   opacity, so no frame ever shows two screens blended on top of each
   other, and the wipe still gives the step a real, visible motion beat,
   under 250ms, well clear of the 450ms entrance duration elsewhere. */
.device-screen .screen-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left top; opacity: 0; }
.device-screen .screen-shot.is-active { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .device-screen .screen-shot.is-active { animation: screenWipe .22s var(--ease-emph-dec); }
}
@keyframes screenWipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.device-overlay { position: absolute; inset: auto 0 0 0; padding: 16px; }
.device-overlay .chip { display: inline-block; background: var(--mint); color: var(--ink-on-pastel); font-size: 11px; font-weight: 700; padding: 7px 12px; border-radius: 999px; opacity: 0; transform: translateY(8px); transition: all .4s var(--ease-emph-dec); }
.device-overlay .chip.is-active { opacity: 1; transform: translateY(0); }

.story-steps { display: flex; flex-direction: column; gap: 6px; }
/* .75, not the .4 first tried: measured against the section's own forest
   surface, .4 puts the dimmest child (the muted body line) at a 2.28:1
   contrast ratio, under the 3:1 floor. .75 clears 3:1 on every child
   colour in the block, including the num badge's green, the lowest of
   the three. */
.story-step { padding: 26px 8px; border-top: 1px solid var(--border); opacity: .75; transition: opacity .4s var(--ease-standard); }
.story-step:last-child { border-bottom: 1px solid var(--border); }
.story-step.is-active { opacity: 1; }
.story-step .num { font-family: var(--font-data); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 15px; color: var(--mid-green); letter-spacing: .06em; }
.story-step h3 { font-size: 22px; margin: 10px 0 8px; }
.story-step p { font-size: 14.5px; color: var(--ink-muted); max-width: 44ch; }

@media (max-width: 900px) {
  .story-pin { grid-template-columns: 1fr; }
  /* Fixed 28 Sep 2026 (Celine, on her phone: "The phone covers everything and I can't read what's behind"):
     on small screens the phone is no longer pinned over the steps; it sits above them, smaller. */
  .story-device-col { position: static; top: auto; z-index: auto; margin: 0 auto 28px; }
  .story-device-col .device-frame { width: min(250px, 62vw); }
}

/* ==========================================================================
   Capability, sticky left + stacked right cards
   ========================================================================== */
.capability { padding: 130px 0; }
.capability-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: 60px; }
.capability-sticky { position: sticky; top: 130px; align-self: start; height: fit-content; }
.capability-sticky .section-head { margin-bottom: 30px; }
.capability-list { border-top: 1px solid var(--border); }
.capability-list li { list-style: none; display: flex; align-items: center; gap: 10px; padding: 16px 0; border-bottom: 1px solid var(--border); font-size: 15px; color: var(--ink-muted); transition: color .3s ease; }
.capability-list li.is-current { color: var(--ink-strong); }
.capability-list li .dot { width: 6px; height: 6px; background: var(--border); flex: none; border-radius: 1px; }
.capability-list li.is-current .dot { background: var(--mid-green); }
.capability-cards { display: flex; flex-direction: column; gap: 26px; }
.cap-card { border: 1px solid var(--border); border-radius: var(--radius-l); overflow: hidden; background: var(--surface); }
.cap-card .cap-media { aspect-ratio: 16/10; overflow: hidden; background: var(--surface-2); }
.cap-card .cap-media img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* live HTML stand ins, used only where no sample studio screen genuinely
   matches the card's own label (never the roadmap room, never Flora) */
.cap-media.cap-live { display: flex; align-items: center; justify-content: center; }
.identity-mock { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.identity-swatches { display: flex; gap: 8px; }
.identity-swatches span { width: 32px; height: 32px; border-radius: 8px; border: 1px solid rgba(0,0,0,.12); }
.identity-type { font-family: var(--font-display); font-size: 40px; font-weight: 700; color: var(--ink-strong); line-height: 1; }
.cap-card .cap-media.cap-live .identity-mark { width: 30px; height: 30px; opacity: .8; object-fit: contain; }
.idea-bank { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 82%; }
.idea-bank .idea-chip { padding: 9px 16px; border-radius: 999px; border: 1px solid var(--card-edge); background: var(--surface); color: var(--ink-muted); font-size: 13px; }
.cap-card .cap-body { padding: 22px 26px; display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
.cap-card h3 { font-size: 18px; margin-bottom: 6px; }
.cap-card p { font-size: 13.5px; color: var(--ink-muted); max-width: 38ch; }
.cap-card .cap-stat { text-align: right; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); flex: none; }
.cap-card .cap-stat b { display: block; font-family: var(--font-display); font-size: 15px; color: var(--ink-strong); text-transform: none; letter-spacing: 0; margin-top: 4px; }

@media (max-width: 900px) {
  .capability-grid { grid-template-columns: 1fr; }
  .capability-sticky { position: static; }
}

/* ==========================================================================
   Proof band: real client work, a feed grid assembling itself.
   Wrapped as its own removable section (id="proof-band") per Lily's 28 Sep
   note: this ships only once Markus's written yes is recorded, and until
   then it comes out in one cut. No before/after framing, no numbers.
   ========================================================================== */
.proof { padding: 130px 0; background: var(--surface); }
.proof .section-head { text-align: center; margin: 0 auto 50px; }
/* a spectacular pair, not a grid: two real posts, given room */
.proof-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; max-width: 1040px; margin: 0 auto; }
.proof-grid figure { margin: 0; }
.proof-grid figure:nth-child(2) { margin-top: 56px; }
.proof-grid img {
  width: 100%; display: block; aspect-ratio: 1080/1350; object-fit: cover;
  border-radius: var(--radius-l); overflow: hidden; border: 1px solid var(--border);
  box-shadow: var(--shadow-3); transition: transform .6s var(--ease-emph-dec);
}
.proof-grid figure:hover img { transform: translateY(-6px) scale(1.015); }
.proof-caption { text-align: center; margin-top: 34px; font-size: 13.5px; color: var(--ink-muted); max-width: 56ch; margin-left: auto; margin-right: auto; }
@media (max-width: 760px) {
  .proof-grid { grid-template-columns: 1fr; max-width: 420px; gap: 22px; }
  .proof-grid figure:nth-child(2) { margin-top: 0; }
}

/* ==========================================================================
   Pricing
   ========================================================================== */
.pricing { padding: 130px 0; }
.pricing .section-head { text-align: center; margin: 0 auto 56px; }
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.price-card { position: relative; border: 1px solid var(--border); border-radius: var(--radius-l); padding: 34px 28px; display: flex; flex-direction: column; background: var(--surface); }
.price-card.is-featured { background: var(--forest); border-color: var(--mid-green); color: var(--cream); }
.price-card.is-featured h3, .price-card.is-featured .price-num { color: var(--cream); }
.price-card.is-featured .price-note, .price-card.is-featured .price-list li { color: var(--ink-on-pastel-softer); }
.price-flag { position: absolute; top: -13px; left: 28px; background: var(--mint); color: var(--ink-on-pastel); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; }
.price-card h3 { font-size: 15px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-muted); }
.price-card.is-featured h3 { color: var(--ink-on-pastel-softer); }
.price-num { font-family: var(--font-data); font-weight: 700; font-variant-numeric: tabular-nums; font-size: clamp(40px, 4.4vw, 54px); margin-top: 14px; letter-spacing: -0.02em; }
.price-num span { font-size: 15px; font-weight: 600; color: var(--ink-muted); margin-left: 4px; }
.price-note { font-size: 13px; color: var(--ink-muted); margin-top: 8px; min-height: 34px; }
.price-list { list-style: none; margin: 26px 0 30px; padding: 0; border-top: 1px solid var(--border); flex: 1; }
.price-card.is-featured .price-list { border-color: rgba(255,255,255,.18); }
.price-list li { padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 14px; color: var(--ink-muted); display: flex; gap: 10px; }
.price-card.is-featured .price-list li { border-color: rgba(255,255,255,.18); }
.price-list li svg { flex: none; width: 15px; height: 15px; margin-top: 2px; color: var(--mid-green); }
.price-card .btn { width: 100%; }

@media (max-width: 900px) { .pricing-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   CTA panel, full width accent
   ========================================================================== */
.cta-panel { padding: 100px 0; background: var(--mint); color: var(--ink-on-pastel); }
.cta-inner { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap; }
.cta-panel h2 { color: var(--ink-on-pastel); font-size: clamp(28px, 4vw, 46px); line-height: 1.1; max-width: 640px; }
.cta-panel p { color: var(--ink-on-pastel-soft); margin-top: 14px; font-size: 15px; }
.cta-side { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.cta-facts { display: flex; gap: 32px; }
.cta-facts div { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-on-pastel-soft); }
.cta-facts b { display: block; font-family: var(--font-display); font-size: 17px; color: var(--ink-on-pastel); margin-top: 4px; text-transform: none; letter-spacing: 0; }
.cta-panel .btn-dark { background: var(--ink-on-pastel); color: var(--cream); }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer { background: var(--bg); padding-top: 90px; overflow: hidden; border-top: 1px solid var(--border); }
.footer-top { display: grid; grid-template-columns: 1.3fr repeat(3, .8fr); gap: 40px; padding-bottom: 60px; }
.footer-tag { font-family: var(--font-display); font-size: 22px; color: var(--mint-text); }
.footer-tag .lockup { font-family: var(--font-word); }
.footer-lede { margin-top: 16px; font-size: 14px; color: var(--ink-muted); max-width: 34ch; }
.footer-contact { margin-top: 20px; font-size: 14px; }
.footer-contact a { color: var(--ink-strong); border-bottom: 1px solid var(--border); }
.footer-col h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-muted); margin-bottom: 16px; font-family: var(--font-body); font-weight: 700; }
.footer-col a { display: block; padding: 6px 0; font-size: 14px; color: var(--ink); }
.footer-col a:hover { color: var(--mint-text); }
.footer-bottom { border-top: 1px solid var(--border); padding: 22px var(--gutter); display: flex; justify-content: space-between; font-size: 12.5px; color: var(--ink-muted); max-width: var(--container); margin: 0 auto; }
.footer-word { text-align: center; line-height: .78; font-family: var(--font-word); font-weight: 700; color: var(--ink-strong); font-size: clamp(70px, 17vw, 230px); padding: 10px 0 0; letter-spacing: -0.01em; opacity: .92; }
@media (max-width: 900px) { .footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-top { grid-template-columns: 1fr; } .footer-bottom { flex-direction: column; gap: 8px; } }

/* ==========================================================================
   Utility reveal groups / misc
   ========================================================================== */
.hide-reduced { }
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none !important; transform: none !important; }
}