/*
     _ __ ___   ___   ___  _ __  ___
    | '_ ` _ \ / _ \ / _ \| '_ \/ __|
    | | | | | | (_) | (_) | |_) \__ \
    |_| |_| |_|\___/ \___/| .__/|___/   d e s i g n
                          |_|

    Copyright (c) 2026 Moops Design. All rights reserved.
    Proprietary. No copying, reuse or redistribution without written permission.
*/

/* ==========================================================================
   moops — homepage mockup
   Hand-written CSS. Architecture:
   reset → tokens → base → layout → components → sections → utilities → motion
   Naming: BEM-ish (.block__element--modifier). State: .is-* / aria-* / data-*.
   ========================================================================== */

@layer reset, tokens, base, layout, components, sections, utilities, motion;

/* ==========================================================================
   FONTS — self-hosted variable WOFF2 (OFL; licences in public/assets/fonts).
   Subset to Latin + the symbols the site uses (₹, arrows, ✓ …); Devanagari and
   emoji fall back to system fonts. Files are cached for a year (.htaccess):
   give a changed font a new file name. Fraunces + Geist are preloaded in
   layouts.public.
   ========================================================================== */
@font-face { font-family: "Fraunces"; src: url("../fonts/fraunces.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("../fonts/fraunces-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Geist"; src: url("../fonts/geist.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("../fonts/geist-mono.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

/* Local fonts resized to the web fonts' proportions, so text barely moves when
   the web fonts swap in (less layout shift). Values measured with fontTools. */
@font-face { font-family: "Fraunces Fallback"; src: local("Georgia"); size-adjust: 97%; ascent-override: 100%; descent-override: 26%; line-gap-override: 0%; }
@font-face { font-family: "Geist Fallback"; src: local("Arial"); size-adjust: 105.24%; ascent-override: 95.5%; descent-override: 28.03%; line-gap-override: 0%; }
@font-face { font-family: "Geist Mono Fallback"; src: local("Consolas"), local("Menlo"); size-adjust: 109.13%; ascent-override: 92.09%; descent-override: 27.03%; line-gap-override: 0%; }

/* ==========================================================================
   RESET
   ========================================================================== */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: none; text-size-adjust: none; }
  body { min-block-size: 100dvh; }
  img, svg, picture { display: block; max-inline-size: 100%; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { background: none; border: 0; padding: 0; cursor: pointer; }
  ul[class], ol[class] { list-style: none; padding: 0; }
  a { color: inherit; }
  fieldset { border: 0; padding: 0; min-inline-size: 0; }
  :where(h1, h2, h3, h4, p) { overflow-wrap: break-word; }
  [hidden] { display: none !important; }
}

/* ==========================================================================
   TOKENS
   ========================================================================== */
@layer tokens {
  :root {
    color-scheme: light;

    /* Raw palette (from the art direction spec) */
    --cream: #F8F8F3; /* slightly cool off-white (was warm #FCF8EE) */
    --cream-2: #EFF0E8;
    --ink: #211F1B;
    --forest: #263821;
    --coral: #D96979;
    --blush: #FFDCE5;
    --blush-deep: #FFC4D2;
    --butter: #FFE58A;
    --sky: #C8E4FF;
    --sage: #E5F0CE;
    --olive: #556B2F;
    --olive-deep: #3E4A24;
    --pink: #F4A3B5;

    /* Semantic — light */
    --bg: var(--cream);
    --surface: #FDFDFA;
    --surface-2: var(--cream-2);
    --text: var(--ink);
    --text-muted: #57534A;
    --line: rgb(33 31 27 / 0.12);
    --line-strong: rgb(33 31 27 / 0.24);
    --card-line: rgb(33 31 27 / 0.08);
    --brand: #3F6B35;
    --brand-ink: #46723A; /* ≥ 4.5:1 on every pastel tint (was #4C7A3E) */
    --forest-ink: var(--forest);
    --sage-ink: #557F45;
    --butter-ink: #F2CF4E;
    --leaf-accent: #9CC283;
    --accent: var(--pink);
    --accent-ink: #C2566A;
    --highlight: var(--butter);
    --tint-olive: var(--sage);
    --tint-pink: #FFE9EE;
    --tint-butter: #FFF4CC;
    --tint-sky: #E3F1FF;
    --btn-bg: var(--forest);
    --btn-fg: var(--cream);
    --btn-bg-hover: #35502E;
    --featured-bg: var(--forest);
    --featured-fg: var(--cream);
    --terminal-bg: #171612;
    --toggle-track: #FFEFB0;
    --band-bg: #EFF0E7;

    /* Mascot */
    --moop-body: #5C7A38;
    --moop-limb: #3F5527;
    --moop-eye: #10130B;
    --moop-rim: transparent;

    /* Shadows (rgb triple so alpha can vary) */
    --shadow-rgb: 74 62 24;
    --shadow-1: 0 1px 2px rgb(var(--shadow-rgb) / 0.06), 0 4px 14px rgb(var(--shadow-rgb) / 0.06);
    --shadow-2: 0 2px 6px rgb(var(--shadow-rgb) / 0.06), 0 16px 40px rgb(var(--shadow-rgb) / 0.12);
    --shadow-3: 0 4px 10px rgb(var(--shadow-rgb) / 0.08), 0 30px 70px rgb(var(--shadow-rgb) / 0.18);

    /* Type */
    --font-display: "Fraunces", "Fraunces Fallback", "Iowan Old Style", Georgia, serif;
    --font-body: "Geist", "Geist Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: "Geist Mono", "Geist Mono Fallback", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

    --step--1: clamp(0.8rem, 0.78rem + 0.12vw, 0.875rem);
    --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
    --step-1: clamp(1.2rem, 1.1rem + 0.45vw, 1.45rem);
    --step-2: clamp(1.45rem, 1.25rem + 0.9vw, 2rem);
    --step-3: clamp(1.8rem, 1.4rem + 1.8vw, 2.9rem);
    --step-4: clamp(2.3rem, 1.6rem + 3.2vw, 4.25rem);
    --step-5: clamp(2.7rem, 1.6rem + 4.9vw, 5.5rem);
    --step-6: clamp(4.5rem, 1rem + 16vw, 15rem);

    /* Space */
    --s-1: 0.25rem;
    --s-2: 0.5rem;
    --s-3: 0.75rem;
    --s-4: 1rem;
    --s-5: 1.5rem;
    --s-6: 2rem;
    --s-7: 3rem;
    --s-8: 4rem;
    --s-9: 6rem;
    --gutter: clamp(1rem, 4vw, 2.5rem);
    --section-pad: clamp(2.5rem, 4.5vw, 4.5rem);
    --container: 1220px;

    /* Shape */
    --r-sm: 10px;
    --r-md: 16px;
    --r-lg: 24px;
    --r-xl: 34px;
    --r-2xl: 48px;
    --r-pill: 999px;

    /* Motion */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-squish: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-spring: linear(0, 0.009, 0.035 2.1%, 0.141, 0.281 6.7%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%, 0.997 69.8%, 1.003 76.9%, 1);
    --dur-1: 120ms;
    --dur-2: 240ms;
    --dur-3: 420ms;
    --dur-4: 700ms;

    /* Layers */
    --z-walker: 40;
    --z-nav: 50;
    --z-confetti: 90;
    --z-cursor: 100;
  }

  /* Dark — "moss night" */
  :root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0F130B;
    --surface: #222B1A;
    --surface-2: #2E3A25;
    --text: #FBF7EC;
    --text-muted: #D6D3C1;
    --line: rgb(251 247 236 / 0.18);
    --line-strong: rgb(251 247 236 / 0.34);
    --brand: #A9C06A;
    --brand-ink: #CFE38F;
    --accent: #F9AFC7;
    --accent-ink: #FBB8CD;
    --highlight: #EFD56A;
    --tint-olive: #33431F;
    --tint-pink: #422A35;
    --tint-butter: #3D3620;
    --btn-bg: #E2EDB4;
    --btn-fg: #0F130B;
    --btn-bg-hover: #FBF7EC;
    --featured-bg: #3E5226;
    --featured-fg: #FBF7EC;
    --terminal-bg: #070906;
    --toggle-track: #080A06;
    --band-bg: #1B2512;
    --card-line: rgb(251 247 236 / 0.16);
    --forest: #E2EDB4;
    --forest-ink: #FBF7EC;
    --sage-ink: #BADC98;
    --coral: #F79DAC;
    --blush: #4A2B3B;
    --blush-deep: #6A3A4E;
    --butter-ink: #F2D05A;
    --sky: #243749;
    --sage: #33431F;
    --tint-sky: #20303D;
    --leaf-accent: #8DBB72;

    --moop-body: #6F833F;
    --moop-limb: #B3C77A;
    --moop-eye: #080A06;
    --moop-rim: rgb(251 247 236 / 0.7);

    --shadow-rgb: 0 0 0;
    --shadow-1: 0 1px 2px rgb(0 0 0 / 0.3), 0 4px 14px rgb(0 0 0 / 0.25);
    --shadow-2: 0 2px 6px rgb(0 0 0 / 0.3), 0 16px 40px rgb(0 0 0 / 0.35);
    --shadow-3: 0 4px 10px rgb(0 0 0 / 0.35), 0 30px 70px rgb(0 0 0 / 0.45);
  }
}

/* ==========================================================================
   BASE
   ========================================================================== */
@layer base {
  /* overflow-x on html (not just body) so nothing can ever widen the mobile viewport */
  html { scroll-behavior: smooth; scroll-padding-block-start: 110px; overflow-x: hidden; }

  body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: var(--step-0);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
    transition: background-color var(--dur-3) var(--ease-out), color var(--dur-3) var(--ease-out);
  }

  h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.025em;
    font-variation-settings: "SOFT" 100, "WONK" 0;
    text-wrap: balance;
  }

  :where(h1, h2) em {
    font-style: italic;
    color: var(--brand-ink);
    font-variation-settings: "SOFT" 100, "WONK" 1;
  }

  p { text-wrap: pretty; }

  ::selection { background: var(--butter); color: var(--ink); }

  :focus-visible {
    outline: 3px solid var(--accent-ink);
    outline-offset: 3px;
    border-radius: 6px;
  }

  .mono { font-family: var(--font-mono); font-size: 0.86em; letter-spacing: -0.01em; }
}

/* ==========================================================================
   LAYOUT
   ========================================================================== */
@layer layout {
  .container {
    inline-size: min(100% - 2 * var(--gutter), var(--container));
    margin-inline: auto;
  }

  .section { padding-block: var(--section-pad); position: relative; }

  .section-head {
    display: grid;
    gap: var(--s-3);
    margin-block-end: clamp(1.75rem, 3vw, 2.75rem);
    max-inline-size: 46rem;
  }
  .section-head--center { margin-inline: auto; text-align: center; justify-items: center; }
  .section-head--split {
    max-inline-size: none;
    grid-template-columns: 1fr;
    align-items: end;
    gap: var(--s-5);
  }
  @media (min-width: 860px) {
    .section-head--split { grid-template-columns: 1fr auto; }
    .section-head--split .section-sub { max-inline-size: 26rem; text-align: end; }
  }
}

/* ==========================================================================
   COMPONENTS
   ========================================================================== */
@layer components {

  /* ---------- Typography helpers ---------- */
  .section-title { font-size: var(--step-4); }
  .section-sub { color: var(--text-muted); font-size: var(--step-0); max-inline-size: 38rem; }

  /* ---------- Icons ---------- */
  .icon {
    inline-size: 1.15em;
    block-size: 1.15em;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none;
  }

  /* ---------- Buttons ---------- */
  .btn {
    --btn-pad-y: 0.85rem;
    --btn-pad-x: 1.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: var(--btn-pad-y) var(--btn-pad-x);
    border-radius: var(--r-pill);
    font-weight: 600;
    font-size: var(--step-0);
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    user-select: none;
    transition:
      transform var(--dur-3) var(--ease-spring),
      background-color var(--dur-2) var(--ease-out),
      color var(--dur-2) var(--ease-out),
      box-shadow var(--dur-2) var(--ease-out);
  }
  .btn:hover { transform: translateY(-2px); }
  .btn:active { transform: scale(1.04, 0.9); transition-duration: var(--dur-1); }
  .btn .icon--arrow { transition: transform var(--dur-3) var(--ease-spring); }
  .btn:hover .icon--arrow { transform: translateX(4px); }

  .btn--primary { background: var(--btn-bg); color: var(--btn-fg); box-shadow: 0 6px 18px rgb(var(--shadow-rgb) / 0.18); }
  .btn--primary:hover { background: var(--btn-bg-hover); }
  .btn--ghost { box-shadow: inset 0 0 0 2px var(--line-strong); }
  .btn--ghost:hover { box-shadow: inset 0 0 0 2px var(--text); }
  .btn--outline { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1.75px var(--text); }
  .btn--outline:hover { background: var(--surface); }
  .btn--sm { --btn-pad-y: 0.65rem; --btn-pad-x: 1.05rem; font-size: 0.95rem; }
  .btn--lg { --btn-pad-y: 1.1rem; --btn-pad-x: 1.75rem; font-size: var(--step-1); }
  .btn--block { inline-size: 100%; }

  .link-arrow {
    font-weight: 600;
    text-decoration: none;
    background: linear-gradient(currentColor 0 0) 0 100% / 0% 2px no-repeat;
    padding-block: 4px;
    transition: background-size var(--dur-3) var(--ease-out);
  }
  .link-arrow:hover { background-size: 100% 2px; }
  .link-arrow span { display: inline-block; transition: transform var(--dur-3) var(--ease-spring); }
  .link-arrow:hover span { transform: translateY(4px); }

  /* ---------- Chips / pills / labels ---------- */
  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: 0.45rem 0.9rem;
    border-radius: var(--r-pill);
    background: var(--tint-pink);
    font-family: var(--font-mono);
    font-size: var(--step--1);
    letter-spacing: 0.04em;
    color: var(--text);
  }
  .eyebrow__dot {
    inline-size: 8px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--accent-ink);
    animation: pulse 2.4s var(--ease-in-out) infinite;
  }

  .chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.7rem 1.05rem;
    border-radius: var(--r-pill);
    background: var(--surface);
    box-shadow: inset 0 0 0 1.5px var(--line-strong);
    font-weight: 500;
    transition:
      transform var(--dur-3) var(--ease-spring),
      background-color var(--dur-2) var(--ease-out),
      color var(--dur-2) var(--ease-out),
      box-shadow var(--dur-2) var(--ease-out);
  }
  .chip:hover { transform: translateY(-2px) rotate(-1.5deg); box-shadow: inset 0 0 0 1.5px var(--text); }
  .chip:active { transform: scale(0.94); }
  .chip[aria-pressed="true"] { background: var(--btn-bg); color: var(--btn-fg); box-shadow: 0 8px 20px rgb(var(--shadow-rgb) / 0.2); }

  .sticker-label {
    position: absolute;
    inset-block-start: -14px;
    inset-inline-end: 18px;
    padding: 0.4rem 0.8rem;
    border-radius: var(--r-pill);
    background: var(--butter);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: var(--step--1);
    font-weight: 600;
    rotate: 4deg;
    box-shadow: 0 4px 0 rgb(var(--shadow-rgb) / 0.15);
    z-index: 2;
  }
  .sticker-label--pink { background: var(--pink); }

  .dots { display: inline-flex; gap: 5px; }
  .dots i { inline-size: 9px; aspect-ratio: 1; border-radius: 50%; background: var(--line-strong); }
  .dots i:nth-child(1) { background: #F48FB1; }
  .dots i:nth-child(2) { background: #FFE08A; }
  .dots i:nth-child(3) { background: #9DB25E; }

  .blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
    z-index: -1;
  }
  .blob--pink { background: color-mix(in oklab, var(--pink) 45%, transparent); }

  /* ---------- MOOP (mascot) ---------- */
  .moop {
    display: inline-block;
    inline-size: var(--moop-size, 120px);
    aspect-ratio: 200 / 230;
    line-height: 0;
    flex: none;
  }
  .moop__svg { inline-size: 100%; block-size: 100%; overflow: visible; }
  .moop__shadow { fill: rgb(var(--shadow-rgb) / 0.14); transform-box: fill-box; transform-origin: center; }
  .moop__body {
    fill: var(--moop-body);
    stroke: var(--moop-rim);
    stroke-width: 3;
    transition: fill var(--dur-3) var(--ease-out), stroke var(--dur-3) var(--ease-out);
  }
  .moop__shine { fill: #fff; opacity: 0.2; }
  .moop__belly { fill: #fff; opacity: 0.05; }
  .moop__stem { fill: none; stroke: var(--moop-limb); stroke-width: 4; stroke-linecap: round; }
  .moop__sprout-leaf { fill: #8CC063; }
  .moop__sprout-leaf--r { fill: #A3D17A; }
  .moop__sprout { transform-box: view-box; transform-origin: 100px 54px; animation: sprout-sway 4.5s var(--ease-in-out) infinite; }
  .moop:is(:hover, .is-hop, .is-jumping) .moop__sprout { animation: sprout-boing 0.6s var(--ease-squish); }
  .moop[data-mood="sleepy"] .moop__sprout { animation: none; rotate: 18deg; }
  .card-moop .moop[data-mood="sleepy"] .moop__sprout { opacity: 0; }
  .moop__leg path, .moop__arm path { fill: none; stroke: var(--moop-limb); stroke-width: 6; stroke-linecap: round; }
  .moop__leg ellipse, .moop__arm circle { fill: var(--moop-limb); }
  .moop__eyes--open ellipse { fill: var(--moop-eye); }
  .moop__glint { fill: #fff; }
  .moop__eyes path { fill: none; stroke: var(--moop-eye); stroke-width: 5; stroke-linecap: round; }
  .moop__eyes--dizzy path { stroke-width: 3; }
  .moop__blush { fill: #F7A1B4; opacity: 0.75; }
  .moop__mouth { fill: none; stroke: var(--moop-eye); stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; }
  .moop__mouth--grin { fill: var(--moop-eye); }
  .moop__mouth--o { fill: var(--moop-eye); stroke: none; transform-box: fill-box; transform-origin: center; }

  .moop__face { transform: translate(var(--look-x, 0px), var(--look-y, 0px)); transition: transform 0.35s var(--ease-out); }
  .moop__eyes--open { transform-box: fill-box; transform-origin: center; transition: transform 90ms ease; }
  .moop.is-blinking .moop__eyes--open { transform: scaleY(0.1); }

  .moop__bodygroup { transform-box: fill-box; transform-origin: 50% 100%; animation: breathe 3.4s var(--ease-in-out) infinite; }

  .moop__arm, .moop__leg { transition: transform var(--dur-4) var(--ease-spring); }
  .moop__arm--l { transform-box: view-box; transform-origin: 36px 130px; }
  .moop__arm--r { transform-box: view-box; transform-origin: 164px 130px; }
  .moop__leg--l { transform-box: view-box; transform-origin: 86px 186px; }
  .moop__leg--r { transform-box: view-box; transform-origin: 114px 186px; }

  .moop__nightcap { opacity: 0; transform: translateY(-24px) rotate(-8deg); transform-box: fill-box; transform-origin: 50% 100%; transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-4) var(--ease-spring); }
  .moop__cap { fill: var(--pink); }
  .moop__capband { fill: none; stroke: var(--cream); stroke-width: 9; stroke-linecap: round; }
  .moop__pom { fill: var(--cream); }

  .moop__zzz { opacity: 0; }
  .moop__zzz text { font-family: var(--font-mono); font-size: 22px; font-weight: 600; fill: var(--text); }

  /* Expression switching (default: open eyes + smile) */
  .moop__eyes:not(.moop__eyes--open),
  .moop__mouth:not(.moop__mouth--smile) { display: none; }

  .moop:is([data-mood="happy"], [data-mood="excited"], [data-mood="sleepy"], [data-mood="yawn"], [data-mood="dizzy"]) .moop__eyes--open { display: none; }
  .moop:is([data-mood="happy"], [data-mood="excited"]) .moop__eyes--happy { display: inline; }
  .moop:is([data-mood="sleepy"], [data-mood="yawn"]) .moop__eyes--sleepy { display: inline; }
  .moop[data-mood="dizzy"] .moop__eyes--dizzy { display: inline; }

  .moop:is([data-mood="excited"], [data-mood="shocked"], [data-mood="confused"], [data-mood="sleepy"], [data-mood="yawn"], [data-mood="dizzy"]) .moop__mouth--smile { display: none; }
  .moop[data-mood="excited"] .moop__mouth--grin { display: inline; }
  .moop:is([data-mood="shocked"], [data-mood="sleepy"], [data-mood="yawn"]) .moop__mouth--o { display: inline; }
  .moop:is([data-mood="confused"], [data-mood="dizzy"]) .moop__mouth--wavy { display: inline; }

  .moop[data-mood="sleepy"] .moop__mouth--o { transform: scale(0.55); }
  .moop[data-mood="yawn"] .moop__mouth--o { transform: scale(1.5, 1.7); }
  .moop[data-mood="shocked"] .moop__eyes--open { transform: scale(1.18); }
  .moop[data-mood="confused"] .moop__eyes--open ellipse:first-child { transform: scaleY(0.55); transform-box: fill-box; transform-origin: center; }

  .moop[data-mood="excited"] .moop__arm--l { transform: rotate(95deg); }
  .moop[data-mood="excited"] .moop__arm--r { transform: rotate(-95deg); }
  .moop[data-mood="shocked"] .moop__arm--l { transform: rotate(45deg); }
  .moop[data-mood="shocked"] .moop__arm--r { transform: rotate(-45deg); }
  .moop[data-mood="confused"] .moop__arm--r { transform: rotate(-150deg); }
  .moop[data-mood="excited"] .moop__svg { animation: bounce 0.6s var(--ease-in-out) infinite alternate; }
  .moop[data-mood="dizzy"] .moop__svg { animation: wobble 0.5s var(--ease-in-out) infinite alternate; }
  .moop[data-mood="sleepy"] .moop__zzz { animation: zzz 2.4s var(--ease-out) infinite; }

  .moop.is-waving .moop__arm--r { animation: wave 0.42s var(--ease-in-out) 6 alternate; }
  .moop.is-walking .moop__leg--l { animation: step 0.32s var(--ease-in-out) infinite alternate; }
  .moop.is-walking .moop__leg--r { animation: step 0.32s var(--ease-in-out) infinite alternate-reverse; }
  .moop.is-jumping .moop__svg { animation: jump 0.7s var(--ease-out) 2; }
  .moop.is-nod .moop__svg { animation: nod 0.36s var(--ease-out); transform-origin: 50% 90%; }

  /* ---------- Loader ---------- */
  .loader {
    position: fixed;
    inset: 0;
    z-index: 999;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 1.1rem;
    background: var(--bg);
    clip-path: circle(150% at 50% 50%);
  }
  html:not(.js) .loader { display: none; }
  .loader__stage { position: relative; display: grid; justify-items: center; }
  .loader__moop { inline-size: 84px; overflow: visible; }
  .loader__body { transform-box: fill-box; transform-origin: 50% 100%; animation: loader-bounce 0.72s cubic-bezier(0.5, 0, 0.5, 1) infinite; }
  .loader__legs { transform-box: fill-box; transform-origin: 50% 0; animation: loader-legs 0.72s cubic-bezier(0.5, 0, 0.5, 1) infinite; }
  .loader__legs path { fill: none; stroke: var(--moop-limb); stroke-width: 4.5; stroke-linecap: round; }
  .loader__legs ellipse { fill: var(--moop-limb); }
  .loader__skin { fill: var(--moop-body); stroke: var(--moop-rim); stroke-width: 2; }
  .loader__stem { fill: none; stroke: var(--moop-limb); stroke-width: 2.6; stroke-linecap: round; }
  .loader__leaf { fill: #8CC063; }
  .loader__leaf--r { fill: #A3D17A; }
  .loader__shine { fill: #fff; opacity: 0.2; }
  .loader__eyes { fill: var(--moop-eye); transform-box: fill-box; transform-origin: center; animation: blink 2.6s infinite; }
  .loader__glint { fill: #fff; }
  .loader__blush { fill: #F7A1B4; opacity: 0.75; }
  .loader__mouth { fill: none; stroke: var(--moop-eye); stroke-width: 2.2; stroke-linecap: round; }
  .loader__shadow {
    inline-size: 56px;
    block-size: 8px;
    margin-block-start: -4px;
    border-radius: 50%;
    background: rgb(var(--shadow-rgb) / 0.16);
    animation: loader-shadow 0.72s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  }
  .loader__brand {
    margin-block-start: 0.2rem;
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 1.5rem + 1.6vw, 2.6rem);
    font-weight: 850;
    line-height: 1;
    letter-spacing: -0.04em;
    font-variation-settings: "SOFT" 100, "opsz" 144;
    color: var(--text);
  }
  .loader__brand span { font-style: italic; color: var(--sage-ink); font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144; }
  .loader__text { margin-block-start: -0.35rem; font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-muted); letter-spacing: 0.02em; }
  .loader__text i { font-style: normal; animation: loader-dot 1.2s infinite; }
  .loader__text i:nth-child(2) { animation-delay: 0.2s; }
  .loader__text i:nth-child(3) { animation-delay: 0.4s; }

  /* Exit: Moop hops, then the curtain shrinks to a dot */
  .loader.is-done { animation: loader-out 0.7s var(--ease-in-out) 0.25s forwards; }
  .loader.is-done .loader__body, .loader.is-done .loader__legs { animation: loader-hop 0.45s var(--ease-out) forwards; }
  .loader.is-done .loader__shadow, .loader.is-done .loader__text, .loader.is-done .loader__brand { opacity: 0; transition: opacity 0.2s; }

  /* ---------- Nav ---------- */
  .nav {
    position: fixed;
    inset-inline: 0;
    inset-block-start: 14px;
    z-index: var(--z-nav);
    display: grid;
    justify-items: center;
    padding-inline: var(--gutter);
    pointer-events: none;
  }
  .nav__pill {
    pointer-events: auto;
    inline-size: min(100%, 1416px);
    display: flex;
    align-items: center;
    gap: var(--s-5);
    padding: 0.6rem 0.6rem 0.6rem 0.85rem;
    border-radius: var(--r-pill);
    background: color-mix(in oklab, var(--surface) 82%, transparent);
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--text) 70%, transparent), 0 8px 24px -16px rgb(var(--shadow-rgb) / 0.35);
    transition: inline-size var(--dur-4) var(--ease-spring), padding var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out);
  }
  /* Desktop: same width as page content (+ the pill's own padding) so the logo lines up
     with the content edge; equal side columns keep the links truly centred. */
  @media (min-width: 1120px) {
    .nav__pill {
      inline-size: min(100%, calc(var(--container) + 1.7rem));
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      column-gap: var(--s-4);
    }
    .nav__brand { justify-self: start; }
    .nav__links { margin-inline: 0; }
    .nav__actions { justify-self: end; margin-inline-start: 0; }
  }
  .nav.is-scrolled .nav__pill { padding-block: 0.45rem; box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--text) 70%, transparent), var(--shadow-2); }

  .nav__brand { display: inline-flex; align-items: center; gap: 0.55rem; text-decoration: none; }
  .logo-face { flex: none; inline-size: 38px; block-size: 38px; transition: transform var(--dur-4) var(--ease-spring); }
  /* the logo face uses the mascot's own colours: olive body, dark eyes */
  .logo-face circle { fill: var(--moop-body); }
  .logo-face__eye { fill: var(--moop-eye); transform-box: fill-box; transform-origin: center; animation: blink 5s infinite; }
  .nav__brand:hover .logo-face { transform: rotate(-12deg) scale(1.08); }
  .nav__wordmark { font-family: var(--font-display); font-weight: 850; font-size: 1.6rem; letter-spacing: -0.03em; font-variation-settings: "SOFT" 100; }

  .nav__links { display: none; gap: 0.25rem; margin-inline: auto; }
  .nav__links a {
    position: relative;
    padding: 0.5rem 0.85rem;
    border-radius: var(--r-pill);
    text-decoration: none;
    font-weight: 500;
    transition: background-color var(--dur-2) var(--ease-out);
  }
  .nav__links a:hover { background: var(--surface-2); }
  .nav__links a::after {
    content: "";
    position: absolute;
    inset-inline: 50%;
    inset-block-end: 4px;
    block-size: 2px;
    border-radius: 2px;
    background: var(--accent-ink);
    transition: inset-inline var(--dur-3) var(--ease-spring);
  }
  .nav__links a:hover::after { inset-inline: 0.85rem; }

  .nav__actions { display: flex; align-items: center; gap: 0.5rem; margin-inline-start: auto; }
  .nav__cta { display: none; }

  .nav__menu {
    inline-size: 46px;
    block-size: 46px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--btn-bg);
    color: var(--btn-fg);
    box-shadow: 0 6px 16px -6px rgb(var(--shadow-rgb) / 0.45);
    transition: transform var(--dur-3) var(--ease-spring), background-color var(--dur-2);
  }
  .nav__menu:hover { background: var(--btn-bg-hover); transform: scale(1.05); }
  .nav__menu:active { transform: scale(0.92); }
  .nav__menu-bars, .nav__menu-bars::before, .nav__menu-bars::after {
    display: block;
    inline-size: 18px;
    block-size: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform var(--dur-3) var(--ease-spring), opacity var(--dur-2);
  }
  .nav__menu-bars { position: relative; }
  .nav__menu-bars::before, .nav__menu-bars::after { content: ""; position: absolute; }
  .nav__menu-bars::before { transform: translateY(-6px); }
  .nav__menu-bars::after { transform: translateY(6px); }
  .nav__menu[aria-expanded="true"] .nav__menu-bars { background: transparent; }
  .nav__menu[aria-expanded="true"] .nav__menu-bars::before { transform: rotate(45deg); }
  .nav__menu[aria-expanded="true"] .nav__menu-bars::after { transform: rotate(-45deg); }

  .nav__sheet {
    pointer-events: auto;
    inline-size: min(100%, var(--container));
    margin-block-start: 0.5rem;
    padding: var(--s-4);
    display: grid;
    gap: 0.25rem;
    border-radius: var(--r-xl);
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line), var(--shadow-2);
    animation: sheet-in var(--dur-3) var(--ease-spring);
  }
  .nav__sheet a:not(.btn) { padding: 0.8rem 1rem; border-radius: var(--r-md); text-decoration: none; font-family: var(--font-display); font-size: var(--step-2); font-weight: 600; }
  .nav__sheet a:not(.btn):hover { background: var(--surface-2); }
  .nav__sheet .btn { margin-block-start: var(--s-2); }

  @media (min-width: 1120px) {
    .nav__links { display: flex; }
    .nav__menu, .nav__sheet { display: none !important; }
  }
  @media (min-width: 640px) {
    .nav__cta { display: inline-flex; }
  }

  /* ---------- SFX toggle ---------- */
  .sfx-toggle {
    display: none;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.5rem;
    border-radius: var(--r-pill);
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    opacity: 0.75;
    white-space: nowrap;
    flex: none;
    transition: color var(--dur-2), background-color var(--dur-2), transform var(--dur-3) var(--ease-spring);
  }
  @media (min-width: 1120px) and (max-width: 1299px) {
    .nav__links a { padding-inline: 0.55rem; }
    .sfx-toggle__label { display: none; }
  }
  .sfx-toggle:hover { background: var(--surface-2); color: var(--text); opacity: 1; }
  .sfx-toggle .icon { inline-size: 0.95rem; block-size: 0.95rem; }
  .sfx-toggle:active { transform: scale(0.92); }
  .sfx-toggle__waves { opacity: 0; transition: opacity var(--dur-2); }
  .sfx-toggle[aria-pressed="true"] { color: var(--accent-ink); }
  .sfx-toggle[aria-pressed="true"] .sfx-toggle__waves { opacity: 1; }
  .sfx-toggle[aria-pressed="true"] .sfx-toggle__mute { opacity: 0; }
  @media (min-width: 760px) { .sfx-toggle { display: inline-flex; } }

  /* ---------- Theme toggle (Moop face knob) ---------- */
  .theme-toggle {
    position: relative;
    inline-size: 46px;
    block-size: 26px;
    border-radius: var(--r-pill);
    flex: none;
    opacity: 0.85;
    transition: opacity var(--dur-2);
  }
  .theme-toggle:hover { opacity: 1; }
  .theme-toggle__track {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--toggle-track);
    box-shadow: inset 0 2px 4px rgb(0 0 0 / 0.12);
    overflow: hidden;
    transition: background-color var(--dur-3) var(--ease-out);
  }
  .theme-toggle__star {
    position: absolute;
    inset-inline-start: var(--x);
    inset-block-start: var(--y);
    inline-size: 3px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--cream);
    opacity: 0;
    transform: scale(0);
    transition: opacity var(--dur-3), transform var(--dur-4) var(--ease-spring);
  }
  .theme-toggle__knob {
    position: absolute;
    inset-block-start: 2px;
    inset-inline-start: 2px;
    inline-size: 22px;
    block-size: 22px;
    transition: transform var(--dur-4) var(--ease-spring);
  }
  .theme-toggle:active .theme-toggle__knob svg { transform: scale(1.15, 0.85); }
  .theme-toggle__knob svg { inline-size: 100%; block-size: 100%; transition: transform var(--dur-2) var(--ease-out); }
  .theme-toggle__face { fill: var(--moop-body); stroke: var(--moop-rim); stroke-width: 1.5; }
  .theme-toggle__eyes-open ellipse { fill: var(--moop-eye); }
  .theme-toggle__eyes-closed { display: none; }
  .theme-toggle__eyes-closed path { fill: none; stroke: var(--cream); stroke-width: 1.8; stroke-linecap: round; }
  .theme-toggle__blush { fill: var(--pink); opacity: 0.7; }
  .theme-toggle__z {
    position: absolute;
    inset-block-start: -9px;
    inset-inline-end: -3px;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--brand-ink);
    opacity: 0;
    pointer-events: none;
  }
  [data-theme="dark"] .theme-toggle__knob { transform: translateX(20px) rotate(360deg); }
  [data-theme="dark"] .theme-toggle__star { opacity: 1; transform: scale(1); }
  [data-theme="dark"] .theme-toggle__star:nth-child(1) { inset-inline-start: 18%; }
  [data-theme="dark"] .theme-toggle__star:nth-child(2) { inset-inline-start: 30%; }
  [data-theme="dark"] .theme-toggle__star:nth-child(3) { inset-inline-start: 12%; }
  [data-theme="dark"] .theme-toggle__eyes-open { display: none; }
  [data-theme="dark"] .theme-toggle__eyes-closed { display: inline; }
  [data-theme="dark"] .theme-toggle__z { animation: zzz 2.6s var(--ease-out) infinite; }

  /* ---------- Check lists ---------- */
  .checks { display: grid; gap: 0.65rem; }
  .checks li { display: flex; gap: 0.65rem; align-items: start; line-height: 1.4; }
  .check { inline-size: 20px; block-size: 20px; flex: none; margin-block-start: 1px; border-radius: 50%; background: var(--tint-olive); }
  .check path {
    fill: none;
    stroke: var(--brand-ink);
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 20;
    stroke-dashoffset: 20;
    transition: stroke-dashoffset 0.5s var(--ease-out) calc(var(--i, 0) * 110ms + 200ms);
  }
  .is-in .check path { stroke-dashoffset: 0; }

  /* ---------- Form controls ---------- */
  .field { display: grid; gap: 0.45rem; }
  .field > label, .field > legend {
    font-family: var(--font-mono);
    font-size: var(--step--1);
    color: var(--text-muted);
    display: flex;
    justify-content: space-between;
    padding: 0;
    margin-block-end: 0.15rem;
  }
  .field input[type="text"], .field input[type="email"] {
    inline-size: 100%;
    padding: 0.95rem 1.1rem;
    border-radius: var(--r-md);
    border: 0;
    background: var(--surface);
    box-shadow: inset 0 0 0 1.5px var(--line-strong);
    transition: box-shadow var(--dur-2) var(--ease-out), transform var(--dur-3) var(--ease-spring);
  }
  .field input::placeholder { color: color-mix(in oklab, var(--text-muted) 70%, transparent); }
  .field input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--text), 0 0 0 5px color-mix(in oklab, var(--pink) 40%, transparent); }
  .field input.is-invalid { box-shadow: inset 0 0 0 2px var(--accent-ink); animation: shake 0.4s var(--ease-out); }
  .field__hint { font-size: var(--step--1); color: var(--accent-ink); min-block-size: 1.2em; }
  .field__hint.is-ok { color: var(--brand-ink); }
  .field__value { color: var(--text); font-weight: 600; }

  .pills { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .pill { position: relative; }
  .pill input { position: absolute; opacity: 0; pointer-events: none; }
  .pill span {
    display: inline-block;
    padding: 0.6rem 1rem;
    border-radius: var(--r-pill);
    background: var(--surface);
    box-shadow: inset 0 0 0 1.5px var(--line-strong);
    cursor: pointer;
    font-weight: 500;
    transition: background-color var(--dur-2), color var(--dur-2), transform var(--dur-3) var(--ease-spring);
  }
  .pill span:hover { transform: translateY(-2px); }
  .pill input:checked + span { background: var(--btn-bg); color: var(--btn-fg); box-shadow: none; transform: scale(1.04); }
  .pill input:focus-visible + span { outline: 3px solid var(--accent-ink); outline-offset: 3px; }

  .range {
    --fill: 33.3%;
    appearance: none;
    inline-size: 100%;
    block-size: 12px;
    border-radius: var(--r-pill);
    background: linear-gradient(var(--brand) 0 0) 0 0 / var(--fill) 100% no-repeat, var(--surface);
    box-shadow: inset 0 0 0 1.5px var(--line-strong);
    cursor: pointer;
    margin-block: 0.6rem;
  }
  .range::-webkit-slider-thumb {
    appearance: none;
    inline-size: 30px;
    block-size: 30px;
    border-radius: 50%;
    background: var(--moop-body);
    border: 4px solid var(--cream);
    box-shadow: var(--shadow-2);
    transition: transform var(--dur-3) var(--ease-spring);
  }
  .range::-moz-range-thumb {
    inline-size: 24px;
    block-size: 24px;
    border-radius: 50%;
    background: var(--moop-body);
    border: 4px solid var(--cream);
    box-shadow: var(--shadow-2);
  }
  .range:active::-webkit-slider-thumb { transform: scale(1.25, 0.9); }
  .range__ticks { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--text-muted); }
}

/* ==========================================================================
   SECTIONS
   ========================================================================== */
@layer sections {

  /* ---------- HERO (art-directed to the reference) ---------- */
  .hero {
    position: relative;
    isolation: isolate;
    overflow: clip;
    padding-block: 7.5rem clamp(1rem, 1.5vw, 1.5rem);
  }
  .hero__container { inline-size: min(100% - 2 * var(--gutter), 88vw, 1520px); }
  .sprite { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }

  /* Background shapes — few, soft, deliberate */
  .hero__deco { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
  .deco { position: absolute; border-radius: 50%; }
  .deco--pink { inline-size: 27vw; aspect-ratio: 1; inset-block-start: -9vw; inset-inline-end: -8vw; background: var(--blush); }
  .deco--butter { inline-size: 15vw; aspect-ratio: 1; inset-block-start: 6vw; inset-inline-end: -5vw; background: var(--butter); opacity: 0.85; }
  .deco--arc-tr { inline-size: 36vw; aspect-ratio: 1; inset-block-start: -14vw; inset-inline-end: -13vw; border: 1.5px dashed color-mix(in oklab, var(--text) 35%, transparent); }
  .deco--sky { inline-size: 13vw; aspect-ratio: 1; inset-block-start: 34vw; inset-inline-start: -7vw; background: var(--sky); }
  .deco--arc-bl { inline-size: 22vw; aspect-ratio: 1; inset-block-start: 48vw; inset-inline-start: -12vw; border: 1.5px dashed color-mix(in oklab, var(--text) 30%, transparent); }

  .hero__grid { display: grid; gap: clamp(2.5rem, 4vw, 3rem); align-items: start; }
  @media (min-width: 1000px) {
    .hero__grid { grid-template-columns: minmax(0, 0.94fr) minmax(0, 1fr); gap: clamp(1.5rem, 2.6vw, 3rem); }
  }

  /* Left column */
  .hero__copy { display: flex; flex-direction: column; align-items: flex-start; padding-block-start: 0.2rem; }
  .hero .eyebrow {
    font-family: var(--font-body);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.6rem 1.15rem;
    background: var(--blush);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--coral) 22%, transparent);
  }
  .hero .eyebrow__dot { background: var(--coral); animation: none; }

  .hero__title {
    font-size: clamp(2.6rem, 6.35vw, 7.4rem);
    font-weight: 850;
    line-height: 0.93;
    letter-spacing: -0.045em;
    font-variation-settings: "SOFT" 100, "WONK" 0, "opsz" 144;
    color: var(--text);
  }
  .hero__line { display: block; white-space: nowrap; }

  .hl-apps { position: relative; display: inline-block; color: var(--coral); rotate: 4deg; transform-origin: 50% 60%; }
  .hl-cute, .hl-hard { position: relative; display: inline-block; font-style: italic; font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144; }
  .hl-cute { color: var(--forest-ink); isolation: isolate; padding-inline: 0.04em; rotate: -4deg; transform-origin: 50% 60%; }
  .hl-cute::before {
    content: "";
    position: absolute;
    inset: 34% -0.08em 4% -0.06em;
    z-index: -1;
    background: var(--highlight);
    border-radius: 0.12em 0.3em 0.16em 0.34em / 0.3em 0.14em 0.32em 0.16em;
    rotate: -1.5deg;
    transform-origin: left center;
    animation: highlight-in 0.8s var(--ease-out) 0.35s both;
  }
  .hl-hard { color: var(--sage-ink); }

  /* The same three colours for other pages' hero titles (App\Support\Html::heroTitle) */
  .tw-coral { display: inline-block; color: var(--coral); rotate: 2deg; transform-origin: 50% 60%; }
  .tw-mark, .tw-green { font-style: italic; font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144; }
  .tw-mark { position: relative; isolation: isolate; color: var(--forest-ink); padding-inline: 0.04em; }
  .tw-mark::before { content: ""; position: absolute; inset: 38% -0.06em 6% -0.05em; z-index: -1; background: var(--highlight); border-radius: 0.12em 0.3em 0.16em 0.34em / 0.3em 0.14em 0.32em 0.16em; rotate: -1.2deg; transform-origin: left center; animation: highlight-in 0.8s var(--ease-out) 0.35s both; }
  .tw-green { color: var(--sage-ink); text-decoration: underline wavy var(--butter-ink); text-decoration-thickness: 0.06em; text-underline-offset: 0.16em; text-decoration-skip-ink: none; }
  [data-theme="dark"] .tw-mark { color: #161C0E; }
  /* the marker is one box: a phrase broken across lines leaves a stray bar, so keep it whole */
  @media (min-width: 641px) { .tw-mark { white-space: nowrap; } }
  @media (prefers-reduced-motion: reduce) { .tw-mark::before { animation: none; } }

  .doodle { position: absolute; overflow: visible; pointer-events: none; }
  .doodle--apps { inline-size: 0.36em; inset-block-start: -0.12em; inset-inline-end: -0.36em; }
  .doodle--apps path { fill: none; stroke: var(--coral); stroke-width: 3.2; stroke-linecap: round; }
  .doodle--leaf path { fill: var(--leaf-accent); }
  .doodle--cute { inline-size: 0.2em; inset-block-start: -0.05em; inset-inline-end: -0.18em; rotate: 10deg; }
  .doodle--hard { inline-size: 0.2em; inset-block-start: 0.05em; inset-inline-end: -0.3em; rotate: 20deg; }
  .doodle--hard2 { inline-size: 0.13em; inset-block-start: 0.42em; inset-inline-end: -0.36em; rotate: -30deg; }
  .hard__underline { position: absolute; inset-inline: 0.02em 0.04em; inset-block-end: -0.1em; block-size: 0.13em; inline-size: 96%; overflow: visible; }
  .hard__underline path {
    fill: none;
    stroke: var(--butter-ink);
    stroke-width: 6;
    stroke-linecap: round;
    stroke-dasharray: 320;
    stroke-dashoffset: 320;
    animation: draw 0.9s var(--ease-out) 0.8s forwards;
  }

  .hero__lede {
    margin-block-start: clamp(1.25rem, 2vw, 1.75rem);
    font-size: clamp(1.05rem, 0.9rem + 0.5vw, 1.4rem);
    line-height: 1.45;
    color: var(--text-muted);
    max-inline-size: 35rem;
  }
  @media (max-width: 1279px) { .br-lg { display: none; } }
  .hero__ctas { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-block-start: clamp(1.5rem, 2.4vw, 2.25rem); }
  .hero .btn--lg { --btn-pad-y: 1.15rem; --btn-pad-x: 2rem; min-block-size: 3.8rem; font-size: clamp(1.05rem, 0.95rem + 0.35vw, 1.3rem); }
  .hero .btn--outline { min-inline-size: clamp(12rem, 15vw, 16rem); }

  .trust { margin-block-start: clamp(1.75rem, 2.6vw, 2.25rem); }
  .trust__label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-muted); }
  .trust__logos { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem clamp(1.5rem, 3vw, 3.25rem); margin-block-start: 0.9rem; }
  .trust__logos li { display: inline-flex; align-items: center; gap: 0.5rem; font-size: clamp(1rem, 0.9rem + 0.35vw, 1.3rem); font-weight: 600; letter-spacing: -0.01em; color: color-mix(in oklab, var(--text) 82%, transparent); }
  .trust__logos svg { inline-size: 1.45em; block-size: 1.45em; flex: none; }

  /* Right column: bento */
  .hero__bento {
    display: grid;
    gap: clamp(0.9rem, 1.2vw, 1.2rem);
    grid-template-columns: minmax(0, 1.68fr) minmax(0, 1fr);
    grid-template-rows: 1fr 1fr;
  }
  .case-card { grid-row: 1 / span 2; }

  .case-card, .mini-card, .feature {
    border-radius: clamp(24px, 2vw, 32px);
    box-shadow: inset 0 0 0 1px var(--card-line), 0 10px 30px -18px rgb(var(--shadow-rgb) / 0.35);
    transition: transform var(--dur-4) var(--ease-spring), box-shadow var(--dur-3) var(--ease-out);
  }
  .case-card:hover, .mini-card:hover, .feature:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--card-line), 0 22px 40px -20px rgb(var(--shadow-rgb) / 0.4); }

  /* Featured case study */
  .case-card {
    position: relative;
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    aspect-ratio: 453 / 625;
    padding: 7% 6% 5%;
    background: var(--sage);
    overflow: hidden;
  }
  .case-card__head { position: relative; z-index: 3; display: flex; align-items: flex-start; gap: 3.2cqi; }
  .case-card__logo { inline-size: 11cqi; block-size: 11cqi; color: #111110; flex: none; }
  .case-card__by { display: inline-block; vertical-align: middle; margin-inline-start: 0.4em; padding: 0.3em 0.55em; border: 2px solid var(--ink); border-radius: 6px; background: var(--butter); color: var(--ink); font-family: var(--font-mono); font-size: 0.26em; font-weight: 600; letter-spacing: 0; box-shadow: 2px 2px 0 var(--ink); translate: 0 -0.35em; }
  .case-card__brand { font-size: 10cqi; font-weight: 850; line-height: 0.9; letter-spacing: -0.04em; font-variation-settings: "SOFT" 60, "opsz" 144; }
  .case-card__kicker { margin-block-start: 1.6cqi; font-size: 2.85cqi; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; }

  .round-btn {
    display: grid;
    place-items: center;
    flex: none;
    inline-size: 48px;
    block-size: 48px;
    margin-inline-start: auto;
    border-radius: 50%;
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 4px 14px -6px rgb(var(--shadow-rgb) / 0.35);
    transition: transform var(--dur-3) var(--ease-spring), background-color var(--dur-2);
  }
  .round-btn--lg { inline-size: 12cqi; block-size: 12cqi; }
  .round-btn:hover { transform: scale(1.08); }
  .round-btn:hover .icon { transform: translateX(2px); }
  .round-btn:active { transform: scale(0.92); }
  .round-btn .icon { transition: transform var(--dur-3) var(--ease-spring); }

  .case-card__stage { position: relative; flex: 1; min-block-size: 0; margin-inline: -6cqi; }
  .case-card__shape { position: absolute; z-index: 0; border: 0.6cqi solid var(--ink); box-shadow: 1.2cqi 1.2cqi 0 var(--ink); }
  .case-card__shape--circle { inline-size: 20cqi; aspect-ratio: 1; border-radius: 50%; background: var(--butter); inset-block-end: 6%; inset-inline-start: -5cqi; }
  .case-card__shape--square { inline-size: 14cqi; aspect-ratio: 1; border-radius: 2.5cqi; background: var(--blush); inset-block-end: 16%; inset-inline-end: -3cqi; rotate: 14deg; }
  .case-card__ticks { position: absolute; z-index: 0; inline-size: 13cqi; inset-block-start: -2%; inset-inline-end: 9cqi; }
  .case-card__ticks path { fill: none; stroke: var(--forest); stroke-width: 3.6; stroke-linecap: round; }

  .phone {
    position: absolute;
    inline-size: var(--w);
    aspect-ratio: 1 / 1.98;
    padding: 1.5cqi;
    border-radius: 8.5cqi;
    background: #16150F;
    box-shadow: inset 0 0 0 0.5cqi #2C2A22, 0 24px 40px -18px rgb(0 0 0 / 0.45);
    animation: float 7s var(--ease-in-out) infinite;
  }
  .phone--front { --w: 57cqi; inset-inline-start: 11cqi; inset-block-start: 3%; rotate: -7deg; z-index: 2; }
  .phone--back { --w: 51cqi; inset-inline-end: 6cqi; inset-block-start: 8%; rotate: 9deg; z-index: 1; animation-delay: -3.5s; }
  .phone__screen {
    display: flex;
    flex-direction: column;
    block-size: 100%;
    padding: 2.4cqi 3cqi 2cqi;
    border-radius: 7.2cqi;
    background: #FDFBF5;
    color: #211F1B;
    font-family: var(--font-body);
    font-size: 2.95cqi;
    line-height: 1.25;
    overflow: hidden;
  }
  .phone__status { display: flex; align-items: center; justify-content: space-between; font-size: 0.72em; font-weight: 600; block-size: 2.2em; }
  .phone__notch { inline-size: 36%; block-size: 1.7em; border-radius: 99px; background: #16150F; }
  .phone__sig { inline-size: 1.9em; block-size: 0.7em; border-radius: 2px; background: linear-gradient(90deg, #211F1B 0 70%, transparent 70%); }
  /* real client screens inside the hero phones (Stems N Tales) */
  .phone__screen--shot { position: relative; padding: 0; background: #FDFBF5; }
  .phone__shot { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: top; border-radius: inherit; box-shadow: none; }
  .phone__notch--float { position: absolute; z-index: 1; inset-block-start: 1.6cqi; inset-inline-start: 50%; translate: -50% 0; inline-size: 36%; block-size: 4.2cqi; }
  .case-card__brand { text-wrap: balance; }

  .metric-pill {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 3cqi;
    padding: 3.2cqi 4.5cqi;
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
    font-weight: 600;
    font-size: clamp(0.82rem, 3.6cqi, 1.05rem);
    box-shadow: 0 6px 18px -10px rgb(var(--shadow-rgb) / 0.4);
  }
  .metric-pill span { flex: 1; }
  .metric-pill__trend { color: #2E8B45; inline-size: 1.4em; block-size: 1.4em; }
  .metric-pill:hover .icon--arrow { transform: translateX(4px); }
  .metric-pill .icon--arrow { transition: transform var(--dur-3) var(--ease-spring); }

  /* Supporting cards */
  .mini-card {
    position: relative;
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    padding: 11% 10% 9%;
    overflow: hidden;
  }
  .mini-card--pink { background: var(--blush); }
  .mini-card--sky { background: var(--sky); }
  .mini-card__icon { margin-block-end: 4cqi; inline-size: 17cqi; block-size: 17cqi; fill: none; stroke: var(--text); stroke-width: 1.8; stroke-linejoin: round; }
  .mini-card__icon--bars { fill: var(--text); stroke: none; inline-size: 13cqi; }
  .mini-card__doodle { position: absolute; inline-size: 13cqi; inset-block-start: 11cqi; inset-inline-end: 10cqi; }
  .mini-card__doodle path { fill: none; stroke: var(--coral); stroke-width: 3.4; stroke-linecap: round; }
  .mini-card__title {
    margin-block-start: 0;
    font-size: clamp(1.6rem, 20cqi, 3.2rem);
    font-weight: 850;
    line-height: 0.95;
    letter-spacing: -0.04em;
    font-variation-settings: "SOFT" 60, "opsz" 144;
  }
  /* Moop lives in the "cute by design" card */
  .card-moop {
    position: absolute;
    inset-block-end: 3cqi;
    inset-inline-start: 50%;
    translate: -50% 0;
    inline-size: min(64cqi, 175px);
    border-radius: 40%;
    cursor: pointer;
  }
  .card-moop .moop {
    inline-size: 100%;
    rotate: var(--lean, 0deg);
    transform-origin: 50% 92%;
    transition: rotate 0.7s var(--ease-spring);
  }
  .card-moop:active .moop__svg { transform: scale(1.06, 0.92); transition: transform 90ms ease-out; }
  .card-moop .moop[data-mood="sleepy"] .moop__nightcap { opacity: 1; transform: none; }
  .card-moop .moop[data-mood="sleepy"] .moop__bodygroup { animation-duration: 5.5s; }
  .card-moop .moop[data-mood="sleepy"] .moop__arm--l { transform: rotate(-8deg); }
  .card-moop .moop[data-mood="sleepy"] .moop__arm--r { transform: rotate(8deg); }
  .moop.is-hop .moop__svg { animation: hop 0.5s var(--ease-out); }
  .card-moop .moop.is-waving .moop__arm--r { animation-iteration-count: 4; }
  .moop.is-glance-l { --look-x: -7px !important; --look-y: 1px !important; }
  .moop.is-glance-r { --look-x: 7px !important; --look-y: -1px !important; }

  .card-moop__hearts { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
  .card-moop__hearts i {
    position: absolute;
    inset-block-start: 18%;
    inset-inline-start: var(--x, 50%);
    font-style: normal;
    font-size: var(--s, 14px);
    color: var(--coral);
    animation: heart-float 1.1s var(--ease-out) forwards;
  }

  /* "built to work hard" - a tiny live dashboard */
  .mini-card--sky { padding-block-start: 10%; }
  .live-chip {
    position: absolute;
    inset-block-start: 9%;
    inset-inline-end: 8%;
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    padding: 0.3em 0.65em;
    border-radius: 999px;
    background: var(--surface);
    font-family: var(--font-mono);
    font-size: clamp(0.62rem, 4.4cqi, 0.78rem);
    font-weight: 600;
    box-shadow: 0 4px 10px -6px rgb(var(--shadow-rgb) / 0.4);
  }
  .live-chip i { inline-size: 0.55em; block-size: 0.55em; border-radius: 50%; background: #2E8B45; animation: ping 1.8s var(--ease-out) infinite; }

  .stat-panel {
    margin-block-start: auto;
    padding: 5cqi 5.5cqi 4.5cqi;
    border-radius: clamp(14px, 6cqi, 20px);
    background: var(--surface);
    box-shadow: 0 8px 20px -14px rgb(var(--shadow-rgb) / 0.35);
  }
  .stat-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 2cqi; }
  .stat-panel__label { font-size: clamp(0.66rem, 4.6cqi, 0.85rem); color: var(--text-muted); }
  .stat-panel__value { display: flex; align-items: baseline; gap: 2.5cqi; margin-block-start: 1cqi; font-size: clamp(1.15rem, 10cqi, 1.75rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
  .stat-panel__value [data-stat-value] { display: inline-block; transition: transform var(--dur-3) var(--ease-spring), color var(--dur-3); }
  .stat-panel__value [data-stat-value].is-tick { transform: translateY(-2px) scale(1.04); color: #287A3C; }
  .stat-panel__delta { font-size: 0.5em; font-weight: 700; color: #287A3C; letter-spacing: 0; } /* text green: 4.5:1+ */

  .seg { --idx: 0; position: relative; display: grid; grid-template-columns: repeat(3, 1fr); padding: 2px; border-radius: 999px; background: var(--surface-2); }
  .seg button { position: relative; z-index: 1; padding: 0.2em 0.55em; border-radius: 999px; font-family: var(--font-mono); font-size: clamp(0.58rem, 4cqi, 0.72rem); font-weight: 600; color: var(--text-muted); transition: color var(--dur-2); }
  .seg button[aria-checked="true"] { color: var(--btn-fg); }
  .seg__thumb { position: absolute; inset-block: 2px; inset-inline-start: 2px; inline-size: calc((100% - 4px) / 3); border-radius: 999px; background: var(--btn-bg); transform: translateX(calc(var(--idx) * 100%)); transition: transform var(--dur-4) var(--ease-spring); }

  .chart { position: relative; block-size: 21cqi; margin-block: 2.5cqi 3cqi; cursor: crosshair; touch-action: pan-y; }
  .chart__svg { inline-size: 100%; block-size: 100%; overflow: visible; clip-path: inset(-10px 100% -10px -10px); animation: chart-reveal 1.5s var(--ease-out) 0.6s forwards; }
  .chart__grid path { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; }
  .chart__line { fill: none; stroke: #2E8B45; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
  .chart__dot { position: absolute; inline-size: 9px; block-size: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: #2E8B45; box-shadow: 0 0 0 2px var(--surface); pointer-events: none; }
  .chart__dot--end { animation: pop-in 0.5s var(--ease-squish) 2s both; }
  .chart__dot--end::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid #2E8B45; opacity: 0; }
  .chart__dot--end.is-ping::after { animation: dot-ping 0.9s var(--ease-out); }
  .chart__dot--scrub, .chart__scrub, .chart__tip { opacity: 0; transition: opacity var(--dur-2); }
  .chart__scrub { position: absolute; inset-block: -4px 0; inline-size: 1px; background: color-mix(in oklab, var(--text) 30%, transparent); pointer-events: none; }
  .chart__tip {
    position: absolute;
    inset-block-end: calc(100% + 6px);
    translate: -50% 0;
    padding: 0.25em 0.55em;
    border-radius: 6px;
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    white-space: nowrap;
    pointer-events: none;
  }
  .chart.is-scrubbing :is(.chart__dot--scrub, .chart__scrub, .chart__tip) { opacity: 1; }
  .chart.is-scrubbing .chart__dot--end { opacity: 0.35; }

  .micro-stats { display: flex; justify-content: space-between; gap: 2cqi; padding-block-start: 2.5cqi; border-block-start: 1px dashed var(--line-strong); font-size: clamp(0.56rem, 3.9cqi, 0.72rem); }
  .micro-stats li { display: inline-flex; align-items: center; gap: 0.3em; transition: transform var(--dur-3) var(--ease-spring); }
  .micro-stats li:hover { transform: translateY(-2px); }
  .micro-stats b { font-weight: 700; }
  .micro-stats span:last-child { color: var(--text-muted); }
  .ring-mini { inline-size: 1.25em; block-size: 1.25em; rotate: -90deg; }
  .ring-mini circle { fill: none; stroke: var(--surface-2); stroke-width: 2.6; }
  .ring-mini .ring-mini__bar { stroke: #2E8B45; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; animation: ring-mini 1.2s var(--ease-out) 1s forwards; }
  .mbars { display: inline-flex; align-items: flex-end; gap: 1.5px; block-size: 1.1em; }
  .mbars i { inline-size: 3px; border-radius: 1px; background: var(--coral); transform-origin: bottom; animation: grow-y 0.6s var(--ease-spring) both; }
  .mbars i:nth-child(1) { block-size: 40%; animation-delay: 1s; }
  .mbars i:nth-child(2) { block-size: 70%; animation-delay: 1.08s; }
  .mbars i:nth-child(3) { block-size: 55%; animation-delay: 1.16s; }
  .mbars i:nth-child(4) { block-size: 100%; animation-delay: 1.24s; }
  .micro-stats li:hover .mbars i { animation: bar-wiggle 0.5s var(--ease-squish); }
  .grade { display: grid; place-items: center; padding: 0.1em 0.35em; border-radius: 4px; background: var(--butter); color: var(--ink); font-weight: 800; }

  /* Feature row */
  .features { display: grid; gap: clamp(0.9rem, 1.4vw, 1.4rem); margin-block-start: clamp(1.25rem, 2vw, 1.75rem); }
  @media (min-width: 900px) { .features { grid-template-columns: repeat(3, 1fr); } }
  .feature {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 1.5vw, 1.4rem);
    padding: clamp(0.9rem, 1.2vw, 1.15rem) clamp(1rem, 1.5vw, 1.4rem);
  }
  .feature--pink { background: var(--tint-pink); --icon-bg: var(--blush-deep); --icon-fg: #E8455F; }
  .feature--butter { background: var(--tint-butter); --icon-bg: var(--butter); --icon-fg: var(--text); }
  .feature--sky { background: var(--tint-sky); --icon-bg: var(--sky); --icon-fg: var(--text); }
  .feature__icon {
    display: grid;
    place-items: center;
    flex: none;
    inline-size: clamp(56px, 4.6vw, 76px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--icon-bg);
    color: var(--icon-fg);
    transition: transform var(--dur-4) var(--ease-spring);
  }
  .feature:hover .feature__icon { transform: rotate(-8deg) scale(1.06); }
  .feature__icon svg { inline-size: 46%; block-size: 46%; }
  .feature__copy { flex: 1; min-inline-size: 0; }
  .feature__title { font-family: var(--font-body); font-size: clamp(1.05rem, 0.95rem + 0.3vw, 1.3rem); font-weight: 650; letter-spacing: -0.015em; line-height: 1.2; }
  .feature__copy p { margin-block-start: 0.2rem; font-size: clamp(0.88rem, 0.82rem + 0.15vw, 1rem); line-height: 1.35; color: var(--text-muted); max-inline-size: 15rem; }

  [data-theme="dark"] .deco--butter { opacity: 1; background: #3B3419; }
  [data-theme="dark"] .feature--butter { --icon-bg: #5A4E22; --icon-fg: #F6E7A8; }
  [data-theme="dark"] .deco--pink { opacity: 1; }

  /* Responsive */
  /* Landscape tablets / small laptops: same composition, scaled down */
  @media (min-width: 1000px) and (max-width: 1279px) {
    .hero .btn--lg { --btn-pad-y: 0.95rem; --btn-pad-x: 1.4rem; min-block-size: 3.2rem; font-size: 1rem; }
    .hero .btn--outline { min-inline-size: 0; }
    .hero__ctas { gap: 0.75rem; }
    .trust__logos { gap: 0.6rem 1.1rem; }
    .trust__logos li { font-size: 0.95rem; }
    .micro-stats li:last-child { display: none; }
    .mini-card { padding: 10% 9% 8%; }
  }
  @media (max-width: 999px) {
    .hero__copy { max-inline-size: 46rem; }
    .hero__title { font-size: clamp(2.4rem, 9vw, 6rem); }
    .hero__bento { max-inline-size: 860px; }
    .deco--sky, .deco--arc-bl { display: none; }
  }
  @media (max-width: 640px) {
    .hero__title { font-size: 10.9vw; letter-spacing: -0.04em; }
    .hero__ctas .btn { flex: 1 1 auto; }
    .trust__logos { gap: 0.6rem 1.05rem; }
    .trust__logos li { font-size: 0.92rem; gap: 0.35rem; }
    .hero__bento { grid-template-columns: 1fr; grid-template-rows: auto; }
    .case-card { grid-row: auto; }
    /* Moop first: a compact strip right under the CTAs */
    .mini-card--pink { order: -1; flex-direction: row; align-items: center; min-block-size: 0; padding: 1.1rem 1.25rem 0.6rem 1.5rem; }
    .mini-card--pink .mini-card__title { flex: 1; font-size: 2.1rem; }
    .mini-card--pink .mini-card__doodle { inset-block-start: 1rem; inset-inline-end: auto; inset-inline-start: 46%; inline-size: 26px; }
    .card-moop { position: relative; inset: auto; translate: none; flex: none; inline-size: 118px; }
    .mini-card--sky .mini-card__title { font-size: 2.1rem; margin-block-end: 1rem; }
    .deco--pink { inline-size: 60vw; inset-block-start: -30vw; inset-inline-end: -26vw; }
    .deco--butter { inline-size: 30vw; inset-block-start: 4vw; inset-inline-end: -16vw; }
    .deco--arc-tr { display: none; }
  }

  /* ---------- MARQUEE ---------- */
  .marquee { display: grid; gap: 0; padding-block: var(--s-3) var(--s-6); overflow: hidden; }
  .marquee__row {
    background: var(--btn-bg);
    color: var(--btn-fg);
    rotate: -1.6deg;
    padding-block: 1.05rem;
    inline-size: 104%;
    margin-inline-start: -2%;
    position: relative;
    z-index: 1;
  }
  .marquee__row--reverse { background: var(--butter); color: var(--ink); rotate: -0.7deg; z-index: 2; padding-block: 0.8rem; box-shadow: 0 6px 18px rgb(var(--shadow-rgb) / 0.15); }
  .marquee__track {
    display: flex;
    inline-size: max-content;
    animation: marquee 38s linear infinite;
  }
  .marquee__row--reverse .marquee__track { animation-direction: reverse; animation-duration: 46s; }
  .marquee__row:hover .marquee__track { animation-play-state: paused; }
  .marquee__track li {
    display: flex;
    align-items: center;
    white-space: nowrap;
    font-family: var(--font-display);
    font-style: italic;
    font-size: var(--step-2);
    font-weight: 600;
    font-variation-settings: "SOFT" 100, "WONK" 1;
  }
  .marquee__row--reverse .marquee__track li { font-family: var(--font-mono); font-style: normal; font-size: var(--step-0); font-weight: 500; }
  .marquee__track li::after { content: "✦"; margin-inline: 1.6rem; color: var(--pink); font-style: normal; font-size: 0.7em; }
  .marquee__row--reverse .marquee__track li::after { content: "●"; color: var(--olive); font-size: 0.5em; }

  /* ---------- PROBLEM ---------- */
  .problem__intro { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-5); margin-block-end: clamp(1.75rem, 3vw, 2.75rem); }
  .problem__intro .section-head { margin-block-end: 0; }
  .problem__moop { --moop-size: clamp(90px, 10vw, 130px); display: block; flex: none; margin-inline-end: clamp(0rem, 3vw, 2.5rem); }
  .fighters { display: grid; gap: var(--s-5); }
  @media (min-width: 900px) { .fighters { grid-template-columns: repeat(3, 1fr); gap: clamp(0.9rem, 2vw, 1.5rem); } }
  @media (min-width: 900px) and (max-width: 1099px) { .fighter { padding: var(--s-5); } }
  /* Tablet portrait: each fighter becomes a wide card — words left, visual right */
  @media (min-width: 640px) and (max-width: 899px) {
    .fighter { grid-template-columns: 1fr 1fr; grid-template-areas: "tag visual" "title visual" "text visual"; column-gap: var(--s-6); align-items: center; padding: var(--s-5) var(--s-6); }
    .fighter__tag { grid-area: tag; }
    .fighter__title { grid-area: title; }
    .fighter__visual, .fighter__checks { grid-area: visual; }
    .fighter > p:last-child { grid-area: text; }
  }
  .fighter {
    position: relative;
    display: grid;
    gap: var(--s-3);
    align-content: start;
    padding: var(--s-6);
    border-radius: var(--r-xl);
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line), var(--shadow-1);
    transition: transform var(--dur-4) var(--ease-spring), box-shadow var(--dur-3);
  }
  .fighter:hover, .fighter:focus-visible { transform: translateY(-6px) rotate(-0.6deg); box-shadow: inset 0 0 0 1px var(--line-strong), var(--shadow-2); }
  .fighter p:last-child { color: var(--text-muted); }
  .fighter__tag { color: var(--text-muted); }
  .fighter__title { font-size: var(--step-2); }
  .fighter__visual { display: grid; gap: 0.5rem; padding: var(--s-4); border-radius: var(--r-lg); background: var(--surface-2); }
  .quote-tag { font-family: var(--font-display); font-weight: 800; font-size: var(--step-3); line-height: 1; color: var(--accent-ink); }
  .fighter:hover .quote-tag { animation: shake 0.5s var(--ease-out); }
  .quote-meta { color: var(--text-muted); font-size: 0.78rem; }
  .ghost-bar { block-size: 12px; border-radius: var(--r-pill); background: var(--bg); overflow: hidden; }
  .ghost-bar i { display: block; block-size: 100%; inline-size: 80%; border-radius: inherit; background: linear-gradient(90deg, var(--line-strong), transparent); animation: flicker 2.6s steps(2) infinite; }
  .fighter--hero { background: var(--tint-olive); box-shadow: inset 0 0 0 2px var(--brand), var(--shadow-2); }
  .fighter__checks { display: grid; gap: 0.5rem; padding: var(--s-4); border-radius: var(--r-lg); background: var(--surface); }
  .fighter__checks li { display: flex; gap: 0.5rem; font-weight: 500; }
  .fighter__checks li::before { content: "✓"; color: var(--brand-ink); font-weight: 700; }

  /* ---------- PILLARS ---------- */
  /* Shared "band" treatment: three things + say hi */
  .pillars, .sayhi {
    margin-inline: clamp(0.5rem, 1.5vw, 1.5rem);
    border-radius: clamp(28px, 4vw, 56px);
    background:
      radial-gradient(rgb(var(--shadow-rgb) / 0.07) 1px, transparent 1.4px) 0 0 / 22px 22px,
      var(--band-bg);
  }
  .sayhi { position: relative; isolation: isolate; overflow: hidden; }

  .pillars__intro { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-6); margin-block-end: clamp(1.75rem, 3vw, 2.75rem); }
  .pillars__intro .section-head { margin-block-end: 0; text-align: end; justify-items: end; }

  /* Moop at work: typing on a tiny laptop, celebrating a ship now and then */
  .busy-moop { position: relative; flex: none; inline-size: clamp(110px, 11vw, 150px); margin-inline-start: clamp(0rem, 2vw, 1.5rem); }
  .busy-moop .moop { inline-size: 100%; }
  .busy-moop__laptop { position: absolute; inline-size: 76%; inset-inline-start: 12%; inset-block-end: 3%; overflow: visible; filter: drop-shadow(0 4px 6px rgb(var(--shadow-rgb) / 0.18)); transition: translate var(--dur-4) var(--ease-spring); }
  .busy-moop__lid { fill: #ECE6D6; stroke: #D6CDB8; stroke-width: 1.5; }
  .busy-moop__logo { fill: var(--moop-body); }
  .busy-moop__logo-eye { fill: var(--cream); }
  .busy-moop__base { fill: #2B2A26; }
  .busy-moop__bits { position: absolute; inset-inline: 20% 20%; inset-block-start: 42%; pointer-events: none; }
  .busy-moop__bits i {
    position: absolute;
    inset-inline-start: var(--x);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-style: normal;
    font-weight: 600;
    color: var(--brand-ink);
    opacity: 0;
  }
  .busy-moop__bits i:nth-child(1) { --x: 6%; }
  .busy-moop__bits i:nth-child(2) { --x: 48%; color: var(--coral); }
  .busy-moop__bits i:nth-child(3) { --x: 76%; }
  .busy-moop.is-typing .busy-moop__bits i { animation: bit-float 2.4s var(--ease-out) infinite; }
  .busy-moop.is-typing .busy-moop__bits i:nth-child(2) { animation-delay: 0.8s; }
  .busy-moop.is-typing .busy-moop__bits i:nth-child(3) { animation-delay: 1.6s; }
  .busy-moop__badge {
    position: absolute;
    inset-block-start: 4%;
    inset-inline-start: 62%;
    padding: 0.25em 0.6em;
    border-radius: 999px;
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(8px) scale(0.7);
    transition: opacity var(--dur-2), transform var(--dur-4) var(--ease-spring);
    z-index: 2;
  }
  .busy-moop.is-typing .moop { --look-x: 0px !important; --look-y: 5px !important; }
  .busy-moop.is-typing .moop__arm--l { animation: type-l 0.26s var(--ease-in-out) infinite alternate; }
  .busy-moop.is-typing .moop__arm--r { animation: type-r 0.26s var(--ease-in-out) infinite alternate-reverse; }
  .busy-moop.is-shipped .busy-moop__badge { opacity: 1; transform: none; }
  .busy-moop.is-shipped .busy-moop__laptop { translate: 0 6%; }
  .busy-moop:hover .busy-moop__laptop { translate: 0 4%; }
  @media (max-width: 640px) {
    .pillars__intro { gap: var(--s-3); }
    .busy-moop { inline-size: 92px; margin-inline-start: 0; }
    .busy-moop__badge { font-size: 0.62rem; inset-inline-start: 55%; }
  }
  .pillars__grid { display: grid; gap: var(--s-5); }
  @media (min-width: 960px) { .pillars__grid { grid-template-columns: repeat(3, 1fr); gap: clamp(0.9rem, 2vw, 1.5rem); } }
  @media (min-width: 960px) and (max-width: 1099px) { .pillar { padding: var(--s-5); } }
  /* Tablet portrait: wide cards — story left, live demo right */
  @media (min-width: 640px) and (max-width: 959px) {
    .pillars__grid .pillar { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "num demo" "title demo" "text demo"; column-gap: var(--s-6); row-gap: var(--s-3); align-items: center; padding: var(--s-6); }
    .pillars__grid .pillar__num { grid-area: num; }
    .pillars__grid .pillar__title { grid-area: title; }
    .pillars__grid .pillar__text { grid-area: text; }
    .pillars__grid .pillar .demo { grid-area: demo; }
  }
  .pillar {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
    padding: var(--s-6);
    border-radius: var(--r-2xl);
    box-shadow: inset 0 0 0 1px var(--line);
    transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
    transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3);
  }
  .pillar:hover { box-shadow: inset 0 0 0 1px var(--line-strong), var(--shadow-2); }
  .pillar--olive { background: var(--tint-olive); }
  .pillar--pink { background: var(--tint-pink); }
  .pillar--butter { background: var(--tint-butter); }
  .pillar__num { color: var(--text-muted); }
  .pillar__title { font-size: var(--step-3); }
  .pillar__text { color: var(--text-muted); }
  .pillar__text a { color: var(--brand-ink); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

  .demo { padding: var(--s-4); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-1); }

  .sprint__bar { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
  .sprint__bar i {
    block-size: 26px;
    border-radius: 8px;
    background: var(--surface-2);
    position: relative;
    overflow: hidden;
  }
  .sprint__bar i::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--brand);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s var(--ease-out) calc(var(--i) * 140ms);
  }
  .sprint__bar i:last-child::after { background: var(--accent); }
  .demo--sprint.is-in .sprint__bar i::after, .pillar:hover .sprint__bar i::after { transform: scaleX(1); }
  .sprint__labels { display: flex; justify-content: space-between; margin-block-start: 0.6rem; font-size: 0.72rem; color: var(--text-muted); }

  .sheet__file { position: relative; font-size: 0.75rem; color: var(--text-muted); block-size: 1.2em; margin-block-end: 0.6rem; }
  .sheet__file span { position: absolute; transition: opacity var(--dur-3), transform var(--dur-3) var(--ease-spring); }
  .sheet__name-b { opacity: 0; transform: translateY(6px); color: var(--accent-ink); font-weight: 600; }
  .pillar:hover .sheet__name-a { opacity: 0; transform: translateY(-6px); }
  .pillar:hover .sheet__name-b { opacity: 1; transform: none; }
  .sheet__cols { display: flex; align-items: end; gap: 4px; block-size: 96px; }
  .sheet__cols i {
    flex: 1;
    block-size: 100%;
    border-radius: 4px;
    background: repeating-linear-gradient(to bottom, var(--surface-2) 0 18px, var(--line-strong) 18px 19px);
    box-shadow: inset 0 0 0 1px var(--line);
    transition:
      block-size var(--dur-4) var(--ease-spring) calc(var(--i) * 50ms),
      background-color var(--dur-3) calc(var(--i) * 50ms),
      border-radius var(--dur-3);
  }
  .pillar:hover .sheet__cols i { block-size: var(--h); background: var(--accent); border-radius: 10px 10px 4px 4px; box-shadow: none; }

  .bundle__items { display: flex; flex-wrap: wrap; gap: 0.4rem; }
  .bundle__item {
    padding: 0.5rem 0.75rem;
    border-radius: var(--r-pill);
    box-shadow: inset 0 0 0 1.5px var(--line-strong);
    font-size: 0.88rem;
    font-weight: 500;
    transition: background-color var(--dur-2), color var(--dur-2), transform var(--dur-3) var(--ease-spring);
  }
  .bundle__item:hover { transform: translateY(-2px); }
  .bundle__item:active { transform: scale(0.9); }
  .bundle__item[aria-pressed="true"] { background: var(--butter); color: var(--ink); box-shadow: none; }
  .bundle__total { margin-block-start: 0.7rem; font-size: 0.85rem; display: flex; align-items: center; gap: 0.5rem; }
  .bundle__total strong { font-size: 1.1rem; display: inline-block; }
  .bundle__total strong.is-bump { animation: bump 0.4s var(--ease-squish); }
  .bundle__save {
    padding: 0.1rem 0.5rem;
    border-radius: var(--r-pill);
    background: var(--tint-olive);
    color: var(--brand-ink);
    font-size: 0.72rem;
    white-space: nowrap;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity var(--dur-2), transform var(--dur-4) var(--ease-spring);
  }
  .bundle__save.is-visible { opacity: 1; transform: none; }

  @container (max-width: 300px) {
    .pillar__title { font-size: var(--step-2); }
    .sprint__labels span:nth-child(2) { display: none; }
  }

  /* ---------- PICKER ---------- */
  .picker__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); align-items: start; }
  @media (min-width: 960px) { .picker__grid { grid-template-columns: 1fr 1fr; } }
  .picker__left .section-head { margin-block-end: clamp(1.25rem, 2.5vw, 2rem); }
  .picker__chips { display: flex; flex-wrap: wrap; gap: 0.6rem; }

  .system-card {
    display: grid;
    gap: var(--s-5);
    padding: var(--s-6);
    border-radius: var(--r-2xl);
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line), var(--shadow-2);
    position: relative;
    overflow: hidden;
  }
  @media (min-width: 560px) { .system-card { grid-template-columns: auto 1fr; align-items: center; } }
  .system-card::before {
    content: "";
    position: absolute;
    inset-block-start: -60px;
    inset-inline-end: -60px;
    inline-size: 200px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--blush);
    z-index: 0;
  }
  .system-card > * { position: relative; z-index: 1; }
  .picker__more { display: none; }
  .system-card__moop { position: relative; justify-self: center; }
  .system-card__moop .moop { --moop-size: 130px; }
  .system-card__sign {
    position: absolute;
    inset-block-end: 6%;
    inset-inline-start: 50%;
    translate: -50% 0;
    display: grid;
    place-items: center;
    inline-size: 44px;
    block-size: 38px;
    border-radius: 12px;
    background: var(--cream);
    box-shadow: 0 0 0 3px var(--moop-limb), var(--shadow-1);
    font-size: 1.5rem;
    rotate: -6deg;
  }
  .system-card__sign.is-flip { animation: sign-flip 0.55s var(--ease-squish); }
  .system-card__body { display: grid; gap: var(--s-3); }
  .system-card__body.is-swap { animation: swap-in 0.5s var(--ease-out); }
  .system-card__kicker { color: var(--text-muted); }
  .system-card__title { font-size: var(--step-3); }
  .system-card__list { display: grid; gap: 0.4rem; }
  .system-card__list li { display: flex; gap: 0.55rem; align-items: center; font-weight: 500; }
  .system-card__list li::before { content: ""; inline-size: 8px; block-size: 8px; border-radius: 3px; background: var(--brand); rotate: 45deg; flex: none; }
  .system-card__replaces { color: var(--text-muted); }
  .system-card__eta {
    justify-self: start;
    padding: 0.35rem 0.75rem;
    border-radius: var(--r-pill);
    background: var(--tint-olive);
    color: var(--brand-ink);
  }

  /* ---------- KIND WORDS (testimonials) ---------- */
  .kind__head { display: flex; align-items: center; gap: var(--s-4); margin-block-end: clamp(1.5rem, 3vw, 2.25rem); }
  .kind__moop { position: relative; flex: none; }
  .kind__moop .moop { --moop-size: 84px; }
  .kind__sign {
    position: absolute;
    inset-block-end: 24%;
    inset-inline-start: 50%;
    translate: -50% 0;
    padding: 0.15rem 0.45rem;
    border-radius: 8px;
    background: var(--butter);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 0 0 2.5px var(--moop-limb);
    rotate: -6deg;
  }
  .kind__meta { margin-block-start: 0.3rem; font-size: 0.78rem; color: var(--text-muted); }

  .kind__wall { columns: 3 280px; column-gap: clamp(1rem, 2vw, 1.5rem); }
  .quote {
    position: relative;
    display: grid;
    gap: 0.9rem;
    break-inside: avoid;
    margin-block-end: clamp(1rem, 2vw, 1.5rem);
    padding: clamp(1.25rem, 2vw, 1.6rem);
    border-radius: var(--r-xl);
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--card-line), 0 8px 24px -18px rgb(var(--shadow-rgb) / 0.4);
    rotate: var(--r, 0deg);
    transition: rotate 0.6s var(--ease-spring), transform 0.6s var(--ease-spring), box-shadow var(--dur-3);
  }
  .quote::before {
    content: "\201C";
    position: absolute;
    inset-block-start: -0.1em;
    inset-inline-end: 0.3em;
    font-family: var(--font-display);
    font-size: 5.5rem;
    line-height: 1;
    color: rgb(var(--shadow-rgb) / 0.09);
    transition: transform 0.6s var(--ease-spring), color var(--dur-3);
    pointer-events: none;
  }
  .quote:hover { rotate: 0deg; transform: translateY(-6px); box-shadow: inset 0 0 0 1px var(--card-line), 0 22px 40px -22px rgb(var(--shadow-rgb) / 0.45); }
  .quote:hover::before { transform: scale(1.15) rotate(-8deg); color: color-mix(in oklab, var(--coral) 35%, transparent); }
  .quote--sky { background: var(--tint-sky); }
  .quote--butter { background: var(--tint-butter); }
  .quote--sage { background: var(--tint-olive); }
  .quote--pink { background: var(--tint-pink); }
  .quote--featured { background: var(--btn-bg); color: var(--btn-fg); }
  .quote--featured::before { color: rgb(255 255 255 / 0.12); }
  .quote__stars { display: flex; gap: 2px; color: #E3A93C; font-size: 0.95rem; }
  .quote__stars i { display: inline-block; font-style: normal; }
  .quote:hover .quote__stars i { animation: star-pop 0.5s var(--ease-squish); }
  .quote:hover .quote__stars i:nth-child(2) { animation-delay: 60ms; }
  .quote:hover .quote__stars i:nth-child(3) { animation-delay: 120ms; }
  .quote:hover .quote__stars i:nth-child(4) { animation-delay: 180ms; }
  .quote:hover .quote__stars i:nth-child(5) { animation-delay: 240ms; }
  .quote__text { font-family: var(--font-display); font-size: var(--step-1); font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; font-variation-settings: "SOFT" 100; }
  .quote--featured .quote__text { font-size: var(--step-2); font-style: italic; font-variation-settings: "SOFT" 100, "WONK" 1; }
  .quote__who { display: flex; align-items: center; gap: 0.7rem; }
  .quote__who p { display: grid; line-height: 1.25; }
  .quote__who b { font-size: 0.95rem; }
  .quote__who small { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-muted); }
  .quote--featured .quote__who small { color: color-mix(in oklab, var(--btn-fg) 70%, transparent); }
  .quote__avatar {
    display: grid;
    place-items: center;
    flex: none;
    inline-size: 40px;
    block-size: 40px;
    border-radius: 50%;
    background: var(--c);
    color: var(--ink);
    font-size: 0.8rem;
    font-weight: 800;
    box-shadow: 0 0 0 2px var(--surface);
    transition: transform 0.5s var(--ease-spring);
  }
  .quote:hover .quote__avatar { transform: rotate(-10deg) scale(1.08); }

  /* ---------- PROCESS ---------- */
  .process__board { --p: 0; display: grid; gap: var(--s-5); }
  .process__track { position: relative; block-size: 120px; }
  .process__line {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 16px;
    block-size: 6px;
    border-radius: var(--r-pill);
    background: repeating-linear-gradient(90deg, var(--line-strong) 0 12px, transparent 12px 22px);
  }
  .process__line-fill {
    block-size: 100%;
    inline-size: calc(var(--p) * 100%);
    border-radius: inherit;
    background: var(--brand);
  }
  .process__moop {
    --moop-size: 86px;
    position: absolute;
    inset-block-end: 12px;
    inset-inline-start: calc(var(--p) * (100% - var(--moop-size)));
  }
  .process__moop.is-hopping .moop__svg { animation: hop 0.45s var(--ease-out); }
  .process__moop.is-back { transform: scaleX(-1); }
  .process__steps { display: grid; gap: var(--s-5); counter-reset: step; }
  @media (min-width: 860px) { .process__steps { grid-template-columns: repeat(4, 1fr); } }
  .step {
    display: grid;
    gap: var(--s-3);
    align-content: start;
    padding: var(--s-5);
    border-radius: var(--r-xl);
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line);
    opacity: 0.55;
    transform: translateY(8px);
    transition: opacity var(--dur-3), transform var(--dur-4) var(--ease-spring), box-shadow var(--dur-3);
  }
  .step.is-active { opacity: 1; transform: none; box-shadow: inset 0 0 0 2px var(--brand), var(--shadow-1); }
  .step p { color: var(--text-muted); font-size: 0.97rem; }
  .step__dot {
    display: grid;
    place-items: center;
    inline-size: 44px;
    block-size: 44px;
    border-radius: 50%;
    background: var(--surface-2);
    font-weight: 600;
    transition: background-color var(--dur-3), color var(--dur-3), transform var(--dur-4) var(--ease-spring);
  }
  .step.is-active .step__dot { background: var(--btn-bg); color: var(--btn-fg); transform: rotate(-8deg) scale(1.08); }
  .step__title { font-size: var(--step-1); }

  @media (max-width: 859px) {
    .process__board { grid-template-columns: 56px 1fr; }
    .process__track { block-size: auto; }
    .process__line {
      inset-inline: auto;
      inset-inline-start: 25px;
      inset-block: 0;
      inline-size: 6px;
      block-size: auto;
      background: repeating-linear-gradient(180deg, var(--line-strong) 0 12px, transparent 12px 22px);
    }
    .process__line-fill { inline-size: 100%; block-size: calc(var(--p) * 100%); }
    .process__moop {
      --moop-size: 56px;
      inset-block-end: auto;
      inset-inline-start: 0;
      inset-block-start: calc(var(--p) * (100% - 70px));
    }
  }

  /* ---------- PACKAGES ---------- */
  .currency {
    --idx: 0;
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 5px;
    border-radius: var(--r-pill);
    background: var(--surface);
    box-shadow: inset 0 0 0 1.5px var(--line-strong);
    justify-self: start;
  }
  .currency button {
    position: relative;
    z-index: 1;
    min-inline-size: 58px;
    padding: 0.55rem 0.9rem;
    border-radius: var(--r-pill);
    font-family: var(--font-mono);
    font-weight: 600;
    transition: color var(--dur-3);
  }
  .currency button[aria-checked="true"] { color: var(--btn-fg); }
  .currency__thumb {
    position: absolute;
    inset-block: 5px;
    inset-inline-start: 5px;
    inline-size: calc((100% - 10px) / 4);
    border-radius: var(--r-pill);
    background: var(--btn-bg);
    transform: translateX(calc(var(--idx) * 100%));
    transition: transform var(--dur-4) var(--ease-spring);
  }

  .packages__grid { display: grid; gap: var(--s-5); align-items: stretch; }
  @media (min-width: 960px) { .packages__grid { grid-template-columns: repeat(3, 1fr); align-items: center; } }
  .package {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
    padding: var(--s-6);
    border-radius: var(--r-2xl);
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line), var(--shadow-1);
    transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
    transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3);
  }
  .package:hover { box-shadow: inset 0 0 0 1px var(--line-strong), var(--shadow-2); }
  .package--featured { background: var(--featured-bg); color: var(--featured-fg); padding-block: var(--s-7); box-shadow: var(--shadow-3); }
  .package--featured .package__time, .package--featured .package__from { color: color-mix(in oklab, var(--featured-fg) 75%, transparent); }
  .package--featured .check { background: rgb(255 255 255 / 0.16); }
  .package--featured .check path { stroke: var(--butter); }
  .package--featured .btn--primary { background: var(--cream); color: var(--ink); }
  .package__name { font-family: var(--font-display); font-weight: 600; font-size: var(--step-2); font-variation-settings: "SOFT" 100; }
  .package__price { font-family: var(--font-display); font-weight: 800; font-size: var(--step-4); line-height: 1; letter-spacing: -0.03em; display: flex; align-items: baseline; gap: 0.4rem; font-variant-numeric: tabular-nums; }
  .package__price [data-inr] { display: inline-block; transition: filter var(--dur-2), transform var(--dur-3) var(--ease-spring); }
  .package__price [data-inr].is-rolling { filter: blur(1.5px); transform: translateY(-3px); }
  .package__from { font-size: 0.9rem; font-weight: 400; color: var(--text-muted); letter-spacing: 0; }
  .package__time { color: var(--text-muted); }
  .package .checks { margin-block: var(--s-3); }
  .package .btn { margin-block-start: auto; }
  .packages__note { margin-block-start: var(--s-6); text-align: center; color: var(--text-muted); }

  /* ---------- WHY ---------- */
  .why__grid { display: grid; gap: var(--s-7); align-items: center; }
  @media (min-width: 960px) { .why__grid { grid-template-columns: 0.9fr 1.1fr; } }
  .why__copy { display: grid; gap: var(--s-4); }
  .stack { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block-start: var(--s-3); }
  .stack li {
    padding: 0.45rem 0.85rem;
    border-radius: var(--r-pill);
    background: var(--surface);
    box-shadow: inset 0 0 0 1.5px var(--line-strong);
    font-family: var(--font-mono);
    font-size: var(--step--1);
    transition: transform var(--dur-3) var(--ease-spring), background-color var(--dur-2);
  }
  .stack li:hover { transform: translateY(-3px) rotate(-3deg); background: var(--butter); color: var(--ink); }

  .terminal {
    border-radius: var(--r-xl);
    background: var(--terminal-bg);
    color: #E9E5D6;
    box-shadow: var(--shadow-3), inset 0 0 0 1px rgb(255 255 255 / 0.06);
    overflow: hidden;
    rotate: 1deg;
  }
  .terminal__bar { display: flex; align-items: center; gap: var(--s-4); padding: 0.85rem 1.1rem; border-block-end: 1px solid rgb(255 255 255 / 0.08); font-size: 0.8rem; color: #8F927F; }
  .terminal__body {
    min-block-size: 330px;
    padding: 1.3rem 1.4rem 1.6rem;
    font-size: clamp(0.78rem, 0.72rem + 0.25vw, 0.92rem);
    line-height: 1.85;
    white-space: pre-wrap;
    overflow-x: auto;
  }
  .terminal__body .t-prompt { color: #F48FB1; }
  .terminal__body .t-ok { color: #A9C25E; }
  .terminal__body .t-dim { color: #7D8270; }
  .terminal__body .t-hi { color: #FFE08A; }
  .terminal__caret { display: inline-block; inline-size: 0.6em; block-size: 1.1em; vertical-align: text-bottom; background: #A9C25E; animation: caret 1s steps(1) infinite; }

  /* ---------- VIBES ---------- */
  .sticker-count { padding: 0.5rem 0.9rem; border-radius: var(--r-pill); background: var(--tint-butter); justify-self: start; }
  .sticker-count.is-done { background: var(--btn-bg); color: var(--btn-fg); }
  .vibes__grid { display: grid; gap: var(--s-6); align-items: start; }
  @media (min-width: 960px) { .vibes__grid { grid-template-columns: 1.45fr 1fr; } }
  .stickers { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-5); }
  @media (min-width: 600px) { .stickers { grid-template-columns: repeat(3, 1fr); } }
  .sticker {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 0.4rem;
    padding: var(--s-4) var(--s-3) var(--s-3);
    border-radius: var(--r-xl);
    background: var(--surface);
    border: 6px solid var(--surface);
    outline: 2px dashed var(--line-strong);
    outline-offset: -14px;
    box-shadow: var(--shadow-1);
    rotate: var(--r);
    transition: rotate var(--dur-4) var(--ease-spring), transform var(--dur-4) var(--ease-spring), box-shadow var(--dur-3), outline-color var(--dur-3);
  }
  .sticker .moop { --moop-size: 82px; filter: grayscale(0.7); opacity: 0.75; transition: filter var(--dur-3), opacity var(--dur-3); }
  .sticker:hover { rotate: 0deg; transform: translateY(-6px) scale(1.04); box-shadow: var(--shadow-2); }
  .sticker:active { transform: scale(0.94); }
  .sticker[aria-pressed="true"] { outline-color: transparent; box-shadow: 0 0 0 2px var(--brand), var(--shadow-2); }
  .sticker[aria-pressed="true"] .moop { filter: none; opacity: 1; }
  .sticker[aria-pressed="true"]::after {
    content: "✓";
    position: absolute;
    inset-block-start: -10px;
    inset-inline-end: -10px;
    display: grid;
    place-items: center;
    inline-size: 28px;
    block-size: 28px;
    border-radius: 50%;
    background: var(--pink);
    color: var(--ink);
    font-weight: 700;
    font-size: 0.85rem;
    animation: pop-in 0.5s var(--ease-squish);
  }
  .sticker.is-collecting { animation: sticker-peel 0.6s var(--ease-squish); }
  .sticker__cap { font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: var(--step-0); font-variation-settings: "SOFT" 100, "WONK" 1; }

  .vibes__side { display: grid; gap: var(--s-5); }
  .now { padding: var(--s-5); border-radius: var(--r-xl); background: var(--tint-olive); }
  .now__title { color: var(--text-muted); margin-block-end: var(--s-3); }
  .now__list { display: grid; gap: 0.6rem; }
  .now__list div { display: flex; justify-content: space-between; gap: var(--s-4); padding-block-end: 0.6rem; border-block-end: 1px dashed var(--line-strong); }
  .now__list div:last-child { border: 0; padding: 0; }
  .now__list dt { color: var(--text-muted); font-size: 0.92rem; }
  .now__list dd { font-weight: 600; text-align: end; }
  .values { display: grid; gap: var(--s-3); }
  .values li { font-family: var(--font-display); font-size: var(--step-2); line-height: 1.15; font-weight: 500; font-variation-settings: "SOFT" 100; }
  .values strong { font-weight: 800; color: var(--brand-ink); }

  /* ---------- FAQ ---------- */
  .faq__grid { display: grid; gap: var(--s-6); align-items: start; }
  @media (min-width: 960px) { .faq__grid { grid-template-columns: 0.8fr 1.2fr; } .faq__grid .section-head { position: sticky; inset-block-start: 120px; } }
  .faq__list { display: grid; gap: var(--s-3); }
  .faq__item {
    position: relative;
    border-radius: var(--r-xl);
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line);
    overflow: hidden;
    transition: box-shadow var(--dur-3), background-color var(--dur-3), transform var(--dur-4) var(--ease-spring);
  }
  /* Hover: the card lifts and the + spins */
  @media (hover: hover) {
    .faq__item:not([open]):hover {
      transform: translateY(-3px);
      box-shadow: inset 0 0 0 1px var(--line-strong), 0 14px 30px -18px rgb(var(--shadow-rgb) / 0.4);
    }
    .faq__item:not([open]):hover summary::after { transform: rotate(90deg); background: var(--butter); color: var(--ink); }
  }
  .faq__item[open] { background: var(--tint-olive); box-shadow: inset 0 0 0 1.5px var(--brand); }
  .faq__item.is-squish { animation: squish 0.5s var(--ease-squish); }
  .faq__item summary {
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--s-4);
    padding: 1.25rem 1.5rem;
    cursor: pointer;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--step-1);
    font-variation-settings: "SOFT" 100;
    transition: padding-inline-start var(--dur-4) var(--ease-spring);
  }
  .faq__item summary::-webkit-details-marker { display: none; }
  .faq__item summary::after {
    content: "+";
    display: grid;
    place-items: center;
    flex: none;
    inline-size: 36px;
    block-size: 36px;
    border-radius: 50%;
    background: var(--surface-2);
    font-family: var(--font-body);
    font-size: 1.3rem;
    font-weight: 400;
    transition: transform var(--dur-4) var(--ease-spring), background-color var(--dur-2);
  }
  .faq__item[open] summary::after { transform: rotate(135deg); background: var(--btn-bg); color: var(--btn-fg); }
  .faq__answer { padding: 0 1.5rem 1.4rem; color: var(--text-muted); max-inline-size: 60ch; }

  /* ---------- SAY HI ---------- */
  .sayhi__card {
    position: relative;
    isolation: isolate;
    display: grid;
    gap: var(--s-7);
  }
  @media (min-width: 960px) { .sayhi__card { grid-template-columns: 0.85fr 1.15fr; align-items: center; } }

  /* Soft layered shapes, echoing the hero */
  .sayhi__deco { position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; }
  .sayhi__deco--pink { inline-size: clamp(220px, 28vw, 380px); aspect-ratio: 1; inset-block-start: -18%; inset-inline-start: -8%; background: var(--blush); }
  .sayhi__deco--butter { inline-size: clamp(160px, 18vw, 260px); aspect-ratio: 1; inset-block-end: -16%; inset-inline-end: 34%; background: var(--butter); opacity: 0.75; }
  .sayhi__deco--arc { inline-size: clamp(300px, 40vw, 560px); aspect-ratio: 1; inset-block-start: -30%; inset-inline-end: -14%; border: 1.5px dashed color-mix(in oklab, var(--text) 25%, transparent); }
  [data-theme="dark"] .sayhi__deco--butter { opacity: 1; background: #3B3419; }

  .sayhi__intro { display: grid; gap: var(--s-5); justify-items: start; }
  .sayhi__mascot { display: flex; align-items: flex-start; gap: 0.25rem; }
  /* Smaller screens: Moop sits to the right of the heading + button */
  @media (max-width: 959px) {
    .sayhi__card { gap: var(--s-5); }
    .sayhi__intro {
      grid-template-columns: minmax(0, 1fr) auto;
      grid-template-areas: "title mascot" "cta mascot";
      column-gap: var(--s-3);
      row-gap: var(--s-4);
      align-items: center;
    }
    .sayhi__intro .section-title { grid-area: title; }
    .sayhi__intro .btn { grid-area: cta; }
    .sayhi__mascot { grid-area: mascot; flex-direction: column-reverse; align-items: center; gap: 0.2rem; }
    .sayhi__bubble { margin: 0; font-size: 0.78rem; padding: 0.4rem 0.7rem; border-radius: 14px 14px 4px 14px; }
  }
  @media (max-width: 640px) {
    .sayhi__intro .section-title { font-size: 2rem; }
    .sayhi__intro .btn--lg { --btn-pad-y: 0.85rem; --btn-pad-x: 1.2rem; font-size: 1rem; }
    .sayhi__moop { --moop-size: 88px; }
    .form { rotate: 0deg; }
  }
  .sayhi__moop { --moop-size: 120px; }
  .sayhi__bubble {
    position: relative;
    margin-block-start: 0.6rem;
    padding: 0.5rem 0.9rem;
    border-radius: 16px 16px 16px 4px;
    background: var(--surface);
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 8px 20px -12px rgb(var(--shadow-rgb) / 0.45);
    rotate: -3deg;
    animation: hint-bob 3s var(--ease-in-out) infinite;
  }
  .sayhi__cute { position: relative; isolation: isolate; }
  .sayhi__cute::before {
    content: "";
    position: absolute;
    inset: 40% -0.06em 4% -0.06em;
    z-index: -1;
    background: var(--highlight);
    border-radius: 0.12em 0.3em 0.16em 0.34em / 0.3em 0.14em 0.32em 0.16em;
    rotate: -1.5deg;
  }

  /* Shine sweep on primary buttons */
  .btn--shine { position: relative; overflow: hidden; isolation: isolate; }
  .btn--shine::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / 0.28) 50%, transparent 65%);
    transform: translateX(-120%);
    transition: transform 0.7s var(--ease-out);
  }
  .btn--shine:hover::after { transform: translateX(120%); }

  /* The form card: gradient border, gentle lift */
  .form {
    display: grid;
    gap: var(--s-5);
    padding: clamp(1.25rem, 3vw, 2.25rem);
    border: 2px solid transparent;
    border-radius: var(--r-2xl);
    background:
      linear-gradient(var(--surface), var(--surface)) padding-box,
      linear-gradient(135deg, var(--pink), var(--butter) 50%, #A9CB8A) border-box;
    box-shadow: 0 24px 50px -28px rgb(var(--shadow-rgb) / 0.5);
    rotate: 0.6deg;
    transition: rotate var(--dur-4) var(--ease-spring);
  }
  .form:focus-within { rotate: 0deg; }

  /* Stepper */
  .stepper { display: flex; align-items: center; gap: 0.6rem; padding: 0; list-style: none; }
  .stepper__item { display: inline-flex; align-items: center; gap: 0.45rem; font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-muted); white-space: nowrap; transition: color var(--dur-3); }
  .stepper__num {
    display: grid;
    place-items: center;
    inline-size: 28px;
    block-size: 28px;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--text-muted);
    font-weight: 700;
    transition: background-color var(--dur-3), color var(--dur-3), transform var(--dur-4) var(--ease-spring);
  }
  .stepper__item.is-on { color: var(--text); }
  .stepper__item.is-on .stepper__num { background: var(--btn-bg); color: var(--btn-fg); transform: scale(1.08); }
  .stepper__item.is-done .stepper__num { background: var(--sage); color: var(--brand-ink); font-size: 0; }
  .stepper__item.is-done .stepper__num::after { content: "✓"; font-size: 0.85rem; }
  .stepper__line { flex: 1; block-size: 4px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
  .stepper__line i { display: block; block-size: 100%; inline-size: 0; border-radius: inherit; background: var(--brand); transition: inline-size 0.6s var(--ease-spring); }
  .stepper__line.is-done i { inline-size: 100%; }

  /* Inputs with a little icon */
  .input-wrap { position: relative; display: block; }
  .input-wrap__icon { position: absolute; inset-block: 0; inset-inline-start: 0.9rem; display: grid; place-items: center; font-size: 1rem; pointer-events: none; transition: transform var(--dur-4) var(--ease-spring); }
  .input-wrap input { padding-inline-start: 2.6rem !important; }
  .input-wrap:focus-within .input-wrap__icon { transform: scale(1.2) rotate(-10deg); }

  /* Project type: sticker tiles */
  .tiles-pick { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.55rem; }
  .tile-pick { position: relative; }
  .tile-pick input { position: absolute; opacity: 0; pointer-events: none; }
  .tile-pick span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 0.85rem;
    border-radius: 16px;
    background: var(--tile-bg, var(--surface-2));
    box-shadow: inset 0 0 0 1.5px transparent;
    font-weight: 600;
    font-size: 0.92rem;
    cursor: pointer;
    transition: transform var(--dur-4) var(--ease-spring), box-shadow var(--dur-2);
  }
  .tile-pick i { font-style: normal; font-size: 1.15rem; transition: transform var(--dur-4) var(--ease-spring); }
  .tile-pick--sage { --tile-bg: var(--tint-olive); }
  .tile-pick--pink { --tile-bg: var(--tint-pink); }
  .tile-pick--butter { --tile-bg: var(--tint-butter); }
  .tile-pick--sky { --tile-bg: var(--tint-sky); }
  .tile-pick span:hover { transform: translateY(-2px) rotate(-1deg); }
  .tile-pick input:checked + span { box-shadow: inset 0 0 0 2px var(--text), 0 8px 16px -10px rgb(var(--shadow-rgb) / 0.5); transform: rotate(-1.5deg) scale(1.02); }
  .tile-pick input:checked + span i { transform: scale(1.25) rotate(-8deg); }
  .tile-pick input:focus-visible + span { outline: 3px solid var(--accent-ink); outline-offset: 3px; }

  /* Budget slider: a tiny Moop face for a thumb */
  .form .range::-webkit-slider-thumb {
    inline-size: 32px;
    block-size: 32px;
    background:
      radial-gradient(circle at 36% 46%, #10130B 0 2.2px, transparent 2.6px),
      radial-gradient(circle at 64% 46%, #10130B 0 2.2px, transparent 2.6px),
      radial-gradient(ellipse at 28% 62%, rgb(247 161 180 / 0.8) 0 3px, transparent 3.5px),
      radial-gradient(ellipse at 72% 62%, rgb(247 161 180 / 0.8) 0 3px, transparent 3.5px),
      var(--moop-body);
  }
  .form .range::-moz-range-thumb {
    background:
      radial-gradient(circle at 36% 46%, #10130B 0 2px, transparent 2.4px),
      radial-gradient(circle at 64% 46%, #10130B 0 2px, transparent 2.4px),
      var(--moop-body);
  }

  .form__steps { display: grid; gap: var(--s-6); }
  .form__part { display: flex; flex-direction: column; gap: var(--s-4); }
  /* Two-step slider only with JS; without it both steps show and the form posts normally */
  .js .form__steps { gap: 0; }
  .js .form__part {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    transform: translateX(28px);
    transition: opacity var(--dur-3), transform 0.55s var(--ease-spring), visibility 0s linear var(--dur-3);
  }
  .js .form__part.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity var(--dur-3) 80ms, transform 0.55s var(--ease-spring) 80ms, visibility 0s; }
  .js .form__part.is-past { transform: translateX(-28px); }
  html:not(.js) :is(.stepper, [data-next], [data-back]) { display: none; }
  .form__next { margin-block-start: auto; }
  .form__actions { display: flex; gap: 0.6rem; margin-block-start: auto; }
  .form__back { flex: none; }
  .form__send { flex: 1; }
  .form.is-sent [data-submit] { background: var(--brand); color: var(--cream); }

  /* ---------- FOOTER ---------- */
  /* A dark forest band with rounded top: CTA → brand + link columns → offices → meta.
     Own colour tokens (fixed values) because --forest flips to light green in dark mode. */
  .footer {
    --f-bg: #263821;
    --f-text: #FCF8EE;
    --f-muted: rgb(252 248 238 / 0.72);
    --f-line: rgb(252 248 238 / 0.16);
    --f-card: rgb(252 248 238 / 0.05);
    --f-accent: #FFE58A;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    margin-block-start: var(--s-8);
    padding-block: var(--s-8) calc(var(--s-6) + 20px);
    border-radius: clamp(28px, 5vw, 56px) clamp(28px, 5vw, 56px) 0 0;
    background: var(--f-bg);
    color: var(--f-text);
  }
  :root[data-theme="dark"] .footer { --f-bg: #1A2213; box-shadow: inset 0 1px 0 var(--f-line); }
  .footer a { color: inherit; text-decoration: none; }

  /* Soft brand shapes in the corners */
  .footer__deco span { position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; }
  .footer__deco span:first-child { inline-size: clamp(220px, 30vw, 420px); aspect-ratio: 1; inset-block-start: -12%; inset-inline-end: -8%; background: var(--f-accent); opacity: 0.1; }
  .footer__deco span:last-child { inline-size: clamp(160px, 20vw, 280px); aspect-ratio: 1; inset-block-end: -10%; inset-inline-start: -6%; background: #F7A1B4; opacity: 0.08; }

  /* Row 1: call to action */
  .footer__cta { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-5); padding-block-end: var(--s-7); border-block-end: 1px solid var(--f-line); }
  .footer__cta-title { font-family: var(--font-display); font-size: var(--step-4); font-weight: 700; line-height: 1; letter-spacing: -0.03em; font-variation-settings: "SOFT" 100; }
  .footer__cta-title em { color: var(--f-accent); font-style: italic; font-variation-settings: "SOFT" 100, "WONK" 1; }
  .footer__cta-sub { margin-block-start: var(--s-3); color: var(--f-muted); max-inline-size: 34rem; }
  .footer__ctas { display: flex; flex-wrap: wrap; gap: 0.6rem; }
  .footer .btn--primary { background: var(--f-accent); color: #211F1B; }
  .footer .btn--primary:hover { background: #FFD95C; }
  .footer .btn--outline { color: var(--f-text); box-shadow: inset 0 0 0 1.75px var(--f-line); }
  .footer .btn--outline:hover { background: var(--f-card); box-shadow: inset 0 0 0 1.75px var(--f-muted); }

  /* Row 2: brand + link columns */
  .footer__top { display: grid; gap: var(--s-7); padding-block: var(--s-7); }
  @media (min-width: 1024px) { .footer__top { grid-template-columns: minmax(16rem, 1fr) 2.4fr; gap: var(--s-8); } }

  .footer__brand { display: grid; gap: var(--s-4); align-content: start; max-inline-size: 26rem; }
  .footer__logo { justify-self: start; }
  .footer__tagline { color: var(--f-muted); line-height: 1.6; }
  .footer__reach { display: grid; gap: var(--s-3); margin: 0; }
  .footer__reach dt { font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--f-muted); }
  .footer__reach dd { margin: 0; font-weight: 500; }
  .footer__reach a:hover { color: var(--f-accent); }
  .footer__social { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
  .footer__social a { display: inline-block; padding: 0.3rem 0.8rem; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px rgb(252 248 238 / 0.22); font-family: var(--font-mono); font-size: 0.74rem; text-decoration: none; transition: background-color 0.2s, color 0.2s; }
  .footer__social a:hover { background: var(--f-accent); color: #1b1b16; box-shadow: none; }

  .footer__map { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-5); align-content: start; }
  @media (min-width: 640px) { .footer__map { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  @media (min-width: 1200px) { .footer__map { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); } }
  .footer__col h2 { margin-block-end: var(--s-3); font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--f-accent); }
  .footer__col h2 a:hover { text-decoration: underline; text-underline-offset: 3px; }
  .footer__col ul { display: grid; gap: 0.55rem; margin: 0; padding: 0; list-style: none; }
  .footer__col li a { font-size: var(--step--1); line-height: 1.35; color: var(--f-muted); transition: color var(--dur-2); }
  .footer__col li a:hover { color: var(--f-text); text-decoration: underline; text-underline-offset: 3px; }

  /* Row 3: offices */
  .footer__nap { display: grid; gap: var(--s-3); padding-block: var(--s-6); border-block: 1px solid var(--f-line); font-style: normal; font-size: 0.8rem; line-height: 1.6; color: var(--f-muted); }
  .footer__nap-name { font-size: 0.68rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--f-muted); }
  .footer__offices { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
  .footer__office { display: grid; gap: 0.35rem; align-content: start; padding: var(--s-4) var(--s-5); border-radius: var(--r-lg); background: var(--f-card); box-shadow: inset 0 0 0 1px var(--f-line); }
  .footer__office b { font-family: var(--font-display); font-size: var(--step-1); font-weight: 600; letter-spacing: -0.01em; color: var(--f-text); }
  .footer__office a { justify-self: start; margin-block-start: 0.25rem; color: var(--f-accent); }
  .footer__office a:hover { text-decoration: underline; text-underline-offset: 3px; }

  /* Row 4: meta */
  .footer__meta {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1.5rem;
    padding-block-start: var(--s-5);
    font-size: 0.75rem; color: var(--f-muted);
  }
  .footer__legal, .footer__reg { display: flex; flex-wrap: wrap; gap: 0.2rem 1rem; }
  .footer__meta a { text-decoration: underline; text-decoration-color: var(--f-line); text-underline-offset: 3px; }
  .footer__meta a:hover { color: var(--f-text); }
  .footer .heart { color: #F7A1B4; }
  @media (max-width: 639px) {
    .footer__cta { align-items: flex-start; }
    .footer__meta { flex-direction: column; align-items: flex-start; }
  }
  .heart { color: var(--accent-ink); display: inline-block; animation: heartbeat 1.6s var(--ease-in-out) infinite; }

  /* ---------- Global chrome: cursor, walker, confetti ---------- */
  .cursor-dot {
    position: fixed;
    inset-block-start: 0;
    inset-inline-start: 0;
    z-index: var(--z-cursor);
    inline-size: 14px;
    block-size: 14px;
    margin: -7px 0 0 -7px;
    border-radius: 50%;
    background: var(--pink);
    pointer-events: none;
    mix-blend-mode: multiply;
    opacity: 0;
    transform: translate3d(var(--cx, -100px), var(--cy, -100px), 0) scale(var(--cs, 1));
    transition: opacity var(--dur-2), scale var(--dur-3) var(--ease-spring);
  }
  [data-theme="dark"] .cursor-dot { mix-blend-mode: screen; }
  .cursor-dot.is-on { opacity: 0.85; }
  .cursor-dot.is-hover { --cs: 2.6; opacity: 0.35; }
  @media (pointer: coarse) { .cursor-dot { display: none; } }

  .walker {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: var(--z-walker);
    block-size: 30px;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--dur-3);
  }
  .walker.is-visible { opacity: 1; }
  .walker__line { position: absolute; inset-inline: 0; inset-block-end: 0; block-size: 3px; background: var(--line); }
  .walker__fill { block-size: 100%; inline-size: calc(var(--sp, 0) * 100%); background: linear-gradient(90deg, var(--brand), var(--accent)); }
  .walker__moop { --moop-size: 26px; position: absolute; inset-block-end: 2px; inset-inline-start: calc(var(--sp, 0) * (100% - 26px)); }
  .walker__moop.is-flipped .moop__svg { transform: scaleX(-1); }

  .confetti { position: fixed; inset: 0; pointer-events: none; z-index: var(--z-confetti); overflow: hidden; }
  .confetti i {
    position: absolute;
    inset-block-start: var(--y0, 50%);
    inset-inline-start: var(--x0, 50%);
    inline-size: 10px;
    block-size: 14px;
    border-radius: 3px;
    background: var(--c);
    animation: confetti 1.4s var(--ease-out) forwards;
  }
}

/* ==========================================================================
   UTILITIES
   ========================================================================== */
@layer utilities {
  /* main.js pauses animations in sections scrolled out of view (saves CPU on phones) */
  .is-offscreen, .is-offscreen * { animation-play-state: paused !important; }

  .sr-only {
    position: absolute !important;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
  .skip-link {
    position: fixed;
    inset-block-start: 10px;
    inset-inline-start: 10px;
    z-index: 200;
    padding: 0.7rem 1rem;
    border-radius: var(--r-md);
    background: var(--btn-bg);
    color: var(--btn-fg);
    transform: translateY(-150%);
    transition: transform var(--dur-3) var(--ease-spring);
  }
  .skip-link:focus { transform: none; }
}

/* ==========================================================================
   MOTION — keyframes, scroll reveals, reduced-motion
   ========================================================================== */
@layer motion {
  /* Scroll reveals (only when JS is running) */
  /* Stamp in from slightly SMALLER — never larger, or unrevealed headings widen the page on phones */
  .js [data-stamp] { opacity: 0; transform: scale(0.92) rotate(-2deg); transform-origin: left bottom; }
  .js .section-head--center [data-stamp] { transform-origin: center bottom; }
  .js [data-stamp].is-in { opacity: 1; transform: none; transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-4) var(--ease-spring); }

  .js .reveal { opacity: 0; translate: 0 28px; }
  .js .reveal.is-in { opacity: 1; translate: 0 0; transition: opacity var(--dur-4) var(--ease-out) var(--rd, 0ms), translate var(--dur-4) var(--ease-spring) var(--rd, 0ms); }

  @keyframes grow-x { from { transform: scaleX(0); } }
  @keyframes grow-y { from { transform: scaleY(0); } }
  @keyframes heart-float { 0% { opacity: 0; transform: translate(-50%, 0) scale(0.4); } 20% { opacity: 1; transform: translate(-50%, -8px) scale(1.1); } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), -56px) scale(0.9) rotate(var(--r, 0deg)); } }
  @keyframes sprout-sway { 0%, 100% { rotate: -5deg; } 50% { rotate: 6deg; } }
  @keyframes sprout-boing { 0% { scale: 1; } 30% { scale: 1.15 0.8; } 60% { scale: 0.92 1.12; } 100% { scale: 1; } }
  @keyframes loader-bounce {
    0%, 100% { transform: translateY(0) scale(1.12, 0.86); }
    35% { transform: translateY(-26px) scale(0.94, 1.07); }
    50% { transform: translateY(-30px) scale(1, 1); }
    65% { transform: translateY(-26px) scale(0.96, 1.05); }
  }
  @keyframes loader-legs { 0%, 100% { transform: translateY(0) scaleY(0.7); } 35%, 65% { transform: translateY(-26px) scaleY(1.1); } 50% { transform: translateY(-30px); } }
  @keyframes loader-shadow { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.55); opacity: 0.5; } }
  @keyframes loader-dot { 0%, 100% { opacity: 0.2; } 40% { opacity: 1; } }
  @keyframes loader-hop { to { transform: translateY(-46px) scale(1.06); } }
  @keyframes loader-out { to { clip-path: circle(0% at 50% 50%); visibility: hidden; } }
  @keyframes type-l { from { transform: rotate(-24deg); } to { transform: rotate(-36deg); } }
  @keyframes type-r { from { transform: rotate(24deg); } to { transform: rotate(36deg); } }
  @keyframes bit-float { 0% { opacity: 0; transform: translateY(0) scale(0.6); } 20% { opacity: 1; transform: translateY(-6px) scale(1); } 100% { opacity: 0; transform: translateY(-34px) rotate(-8deg); } }
  @keyframes print-line { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  @keyframes hint-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
  @keyframes star-pop { 0% { transform: scale(1); } 40% { transform: scale(1.45) rotate(-12deg); } 100% { transform: scale(1); } }
  @keyframes rail-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
  @keyframes chart-reveal { to { clip-path: inset(-10px -10px -10px -10px); } }
  @keyframes dot-ping { 0% { opacity: 0.8; transform: scale(1); } 100% { opacity: 0; transform: scale(2.6); } }
  @keyframes ring-mini { to { stroke-dashoffset: 0.1; } }
  @keyframes bar-wiggle { 0%, 100% { transform: scaleY(1); } 40% { transform: scaleY(0.5); } 70% { transform: scaleY(1.15); } }
  @keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
  @keyframes breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.025, 0.975); } }
  @keyframes wave { from { transform: rotate(-100deg); } to { transform: rotate(-140deg); } }
  @keyframes step { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }
  @keyframes bounce { from { transform: translateY(0); } to { transform: translateY(-8%); } }
  @keyframes wobble { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
  @keyframes jump { 0% { transform: translateY(0) scale(1, 1); } 20% { transform: translateY(0) scale(1.1, 0.88); } 50% { transform: translateY(-30%) scale(0.94, 1.08); } 80% { transform: translateY(0) scale(1.08, 0.92); } 100% { transform: none; } }
  @keyframes hop { 0% { transform: translateY(0); } 40% { transform: translateY(-22%) scale(0.96, 1.05); } 100% { transform: translateY(0); } }
  @keyframes zzz { 0% { opacity: 0; transform: translate(0, 6px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(8px, -14px); } }
  @keyframes blink { 0%, 94%, 100% { transform: scaleY(1); } 96% { transform: scaleY(0.1); } }
  @keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: 0.6; } }
  @keyframes ping { 0% { box-shadow: 0 0 0 0 rgb(123 192 67 / 0.55); } 100% { box-shadow: 0 0 0 10px rgb(123 192 67 / 0); } }
  @keyframes highlight-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes draw { to { stroke-dashoffset: 0; } }
  @keyframes letter-bounce { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-0.22em) rotate(-6deg) scale(1.08); } 70% { transform: translateY(0.04em) scale(1.04, 0.94); } }
  @keyframes marquee { to { transform: translateX(-50%); } }
  @keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-5px) rotate(-1deg); } 40% { transform: translateX(5px) rotate(1deg); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
  @keyframes flicker { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
  @keyframes bump { 0% { transform: scale(1); } 50% { transform: scale(1.3) rotate(-4deg); } 100% { transform: scale(1); } }
  @keyframes sign-flip { 0% { transform: rotateY(0) scale(1); } 50% { transform: rotateY(90deg) scale(0.9); } 100% { transform: rotateY(0) scale(1); } }
  @keyframes swap-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  @keyframes caret { 50% { opacity: 0; } }
  @keyframes pop-in { 0% { transform: scale(0) rotate(-30deg); } 100% { transform: scale(1) rotate(0); } }
  @keyframes sticker-peel { 0% { transform: scale(1); } 30% { transform: scale(1.12) rotate(-8deg); } 60% { transform: scale(0.96) rotate(4deg); } 100% { transform: scale(1); } }
  @keyframes squish { 0% { transform: scale(1); } 30% { transform: scale(1.015, 0.97); } 60% { transform: scale(0.995, 1.01); } 100% { transform: scale(1); } }
  @keyframes heartbeat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.3); } 30% { transform: scale(1); } 45% { transform: scale(1.18); } }
  @keyframes sheet-in { from { opacity: 0; transform: translateY(-10px) scale(0.97); } to { opacity: 1; transform: none; } }
  @keyframes confetti {
    0% { transform: translate(0, 0) rotate(0); opacity: 1; }
    35% { transform: translate(calc(var(--dx) * 0.5), var(--up)) rotate(calc(var(--rot) * 0.4)); opacity: 1; }
    100% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity: 0; }
  }
  @keyframes nod { 0%, 100% { transform: rotate(0); } 40% { transform: rotate(-5deg) translateY(2%); } 70% { transform: rotate(3deg); } }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      transition-delay: 0ms !important;
    }
    html { scroll-behavior: auto; }
    .marquee__track { animation: none; flex-wrap: wrap; inline-size: auto; }
    .js [data-stamp], .js .reveal { opacity: 1; transform: none; translate: none; }
    .cursor-dot { display: none; }
  }
}

/* Touch devices have no hover: play the ops-tool demo when it scrolls into view */
@layer sections {
  @media (hover: none) {
    .demo--sheet.is-in .sheet__cols i { block-size: var(--h); background: var(--accent); border-radius: 10px 10px 4px 4px; box-shadow: none; }
    .demo--sheet.is-in .sheet__name-a { opacity: 0; transform: translateY(-6px); }
    .demo--sheet.is-in .sheet__name-b { opacity: 1; transform: none; }
  }
}

/* ==========================================================================
   SMALL SCREENS — per-section patterns for tablet portrait & mobile
   ========================================================================== */
@layer sections {
  /* Swipe rows: bleed to the screen edges, snap card-by-card, peek the next one */
  @media (max-width: 639px) {
    .fighters {
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: 84%;
      grid-template-columns: none;
      gap: 0.9rem;
      overflow-x: auto;
      overscroll-behavior-x: contain;
      scroll-snap-type: x mandatory;
      scroll-padding-inline: var(--gutter);
      margin-inline: calc(-1 * var(--gutter));
      padding: 1.1rem var(--gutter) 1.25rem;
      scrollbar-width: none;
    }
    .fighters::-webkit-scrollbar { display: none; }
    .fighters > * { scroll-snap-align: start; }
    .fighter:hover, .fighter:focus-visible { transform: none; }

    /* Kind words: a compact 2×2 grid of the four strongest reviews */
    .kind__wall { columns: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 0.65rem; }
    .kind__wall .quote:nth-child(n + 5) { display: none; }
    .kind__wall .quote { margin: 0; align-content: start; gap: 0.55rem; padding: 0.9rem 0.85rem; border-radius: 20px; rotate: calc(var(--r, 0deg) * 0.5); }
    .kind__wall .quote::before { font-size: 3.2rem; }
    .kind__wall .quote__stars { font-size: 0.72rem; gap: 1px; }
    .kind__wall .quote__text, .kind__wall .quote--featured .quote__text { font-size: 0.92rem; line-height: 1.3; }
    .kind__wall .quote__who { gap: 0.45rem; align-items: flex-start; }
    .kind__wall .quote__avatar { inline-size: 28px; block-size: 28px; font-size: 0.62rem; }
    .kind__wall .quote__who b { font-size: 0.8rem; }
    .kind__wall .quote__who small { font-size: 0.6rem; line-height: 1.3; }

    /* Three things: stacked and compact */
    .pillars__grid { gap: 0.75rem; }
    .pillars__grid .pillar { gap: 0.55rem; padding: 1.1rem 1.25rem 1.25rem; border-radius: 26px; }
    .pillar__num { font-size: 0.72rem; }
    .pillar__title { font-size: 1.55rem; }
    .pillar__text { font-size: 0.92rem; line-height: 1.45; }
    .pillar .demo { padding: 0.7rem; margin-block-start: 0.2rem; }
    .sheet__cols { block-size: 64px; }
    .kind__moop .moop { --moop-size: 70px; }
  }
  @media (max-width: 959px) {
    .packages__grid {
      grid-auto-flow: column;
      grid-auto-columns: min(82%, 360px);
      grid-template-columns: none;
      gap: 1rem;
      overflow-x: auto;
      overscroll-behavior-x: contain;
      scroll-snap-type: x mandatory;
      scroll-padding-inline: var(--gutter);
      margin-inline: calc(-1 * var(--gutter));
      padding: 1.25rem var(--gutter) 1.5rem;
      scrollbar-width: none;
    }
    .packages__grid::-webkit-scrollbar { display: none; }
    .packages__grid > * { scroll-snap-align: start; }
    .package--featured { padding-block: var(--s-6); }
    .packages__note { margin-block-start: var(--s-3); }

    /* Rail controls: arrows beside the currency switch in the heading + progress dots */
    .rail__nav { display: flex; gap: 0.4rem; }
    .rail__btn {
      display: grid;
      place-items: center;
      inline-size: 46px;
      block-size: 46px;
      border-radius: 50%;
      background: var(--surface);
      color: var(--text);
      box-shadow: inset 0 0 0 1.5px var(--line-strong);
      transition: opacity var(--dur-3), scale var(--dur-4) var(--ease-spring), background-color var(--dur-2), color var(--dur-2), box-shadow var(--dur-2);
    }
    .rail__btn:hover { background: var(--btn-bg); color: var(--btn-fg); box-shadow: none; scale: 1.06; }
    .rail__btn:active { scale: 0.9; }
    .rail__btn .icon { transition: transform var(--dur-3) var(--ease-spring); }
    .rail__btn--next:hover .icon { transform: translateX(3px); }
    .rail__btn--prev:hover .icon { transform: translateX(-3px); }
    .rail__btn[disabled] { opacity: 0.35; pointer-events: none; }
    .rail__btn--next.is-hinting { background: var(--btn-bg); color: var(--btn-fg); box-shadow: none; }
    .rail__btn--next.is-hinting .icon { animation: rail-nudge 1.1s var(--ease-in-out) 2; }

    .rail__dots { display: flex; justify-content: center; gap: 6px; }
    .rail__dots i { inline-size: 7px; block-size: 7px; border-radius: 999px; background: var(--line-strong); transition: inline-size var(--dur-4) var(--ease-spring), background-color var(--dur-3); }
    .rail__dots i.is-on { inline-size: 22px; background: var(--brand); }
  }
  .packages__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; }
  @media (min-width: 960px) { .rail__nav, .rail__dots { display: none; } }

  @media (max-width: 640px) {
    /* Picker: two rows of chips, the rest behind "show more" */
    .picker__chips {
      --chip-h: 2.5rem;
      gap: 0.5rem;
      max-block-size: calc(var(--chip-h) * 2 + 0.5rem + 0.5rem);
      padding-block: 0.25rem;
      overflow: hidden;
      transition: max-block-size 0.5s var(--ease-out);
    }
    .picker__chips.is-expanded { max-block-size: 40rem; }
    .picker__chips .chip { block-size: var(--chip-h); padding: 0 0.85rem; font-size: 0.9rem; }
    .picker__more {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      margin-block-start: 0.5rem;
      padding: 0.4rem 0.8rem;
      border-radius: var(--r-pill);
      background: var(--surface-2);
      font-family: var(--font-mono);
      font-size: 0.78rem;
      font-weight: 600;
      transition: transform var(--dur-3) var(--ease-spring);
    }
    .picker__more:active { transform: scale(0.94); }
    .picker__more::after { content: "↓"; transition: rotate var(--dur-3) var(--ease-spring); }
    .picker__more[aria-expanded="true"]::after { rotate: 180deg; }

    /* System card: Moop moves into the pink corner, text starts at the top */
    .system-card { display: block; padding: var(--s-5); }
    .system-card::before { inline-size: 170px; inset-block-start: -48px; inset-inline-end: -48px; }
    .system-card__moop { position: absolute; inset-block-start: 0.6rem; inset-inline-end: 0.9rem; }
    .system-card__moop .moop { --moop-size: 84px; }
    .system-card__sign { inline-size: 36px; block-size: 32px; font-size: 1.1rem; border-radius: 9px; }
    .system-card__kicker, .system-card__title { padding-inline-end: 100px; }
    .system-card__title { font-size: 1.85rem; line-height: 1.05; }
    .system-card__body { gap: 0.6rem; }

    /* Problem: Moop sits beside a tighter heading */
    .problem__moop { --moop-size: 78px; margin-inline-end: 0; }

    /* Terminal: keep the promises, drop the wrapping comments */
    .terminal { rotate: 0deg; }
    .terminal__body { min-block-size: 0; font-size: 0.8rem; }
    .terminal__body .t-dim { display: none; }

    /* Stickers: three across, smaller */
    .stickers { grid-template-columns: repeat(3, 1fr); gap: 0.7rem; }
    .sticker { padding: 0.6rem 0.3rem 0.5rem; border-width: 4px; outline-offset: -10px; }
    .sticker .moop { --moop-size: 54px; }
    .sticker__cap { font-size: 0.78rem; text-align: center; line-height: 1.15; }

  }
}

/* ==========================================================================
   INDIA (moops.in) — additions on top of the global design system.
   Same palette, type and mascot; new sections reuse existing tokens.
   ========================================================================== */
@layer sections {
  /* ---------- Hero: one-line SEO lede + city list ---------- */
  /* "where good ideas" is the longest line, a touch longer than the global title's lines */
  .hero__title--long { font-size: clamp(2.4rem, 5.6vw, 6.6rem); }
  /* the 5.6vw above is sized for the two-column desktop hero; single column needs it much bigger */
  @media (max-width: 959.98px) { .hero__title--long { font-size: clamp(2.6rem, 8.6vw, 4.6rem); } }
  @media (max-width: 640px) { .hero__title--long { font-size: clamp(2.3rem, 10.6vw, 3.4rem); letter-spacing: -0.035em; } }
  .hero__lede--sm { font-size: clamp(0.98rem, 0.9rem + 0.3vw, 1.15rem); max-inline-size: 32rem; }
  .trust__logos--cities li + li::before { content: "·"; margin-inline-end: clamp(0.6rem, 1.5vw, 1.4rem); color: var(--text-muted); font-weight: 400; }
  .trust__logos--cities { gap: 0.6rem clamp(0.6rem, 1.5vw, 1.4rem); }
  .trust__logos--cities svg { color: var(--coral); inline-size: 1.15em; block-size: 1.15em; }

  /* ---------- Small chips (work filter) ---------- */
  .chip--sm { padding: 0.5rem 0.9rem; font-size: 0.92rem; }

  /* ---------- LOCATIONS ---------- */
  .locations__grid { display: grid; gap: clamp(1rem, 2.5vw, 2rem); align-items: start; }
  @media (min-width: 960px) { .locations__grid { grid-template-columns: 1.25fr 1fr; } }

  .map-card {
    position: relative;
    display: grid;
    gap: var(--s-4);
    padding: clamp(1rem, 2.5vw, 1.75rem);
    border-radius: var(--r-2xl);
    /* Mandana-style dot grid: a folk-art nod, drawn with the same dots as the bands */
    background:
      radial-gradient(color-mix(in oklab, var(--brand) 22%, transparent) 1.2px, transparent 1.6px) 0 0 / 18px 18px,
      var(--tint-olive);
    box-shadow: inset 0 0 0 1px var(--line);
  }
  .map-card__label { color: var(--text-muted); font-size: 0.78rem; }
  .map { position: relative; aspect-ratio: 2 / 1; }
  .map__svg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; overflow: visible; }
  .map__river { fill: none; stroke: var(--sky); stroke-width: 9; stroke-linecap: round; }
  [data-theme="dark"] .map__river { stroke: #35536E; }
  .map__river-label { font-family: var(--font-display); font-style: italic; font-size: 13px; fill: color-mix(in oklab, var(--text) 55%, transparent); }
  .map__route { fill: none; stroke: var(--brand); stroke-width: 2.5; stroke-dasharray: 2 9; stroke-linecap: round; }
  .map__route { stroke-dashoffset: 396; } /* a multiple of the 11-unit dash so the loop is seamless */
  .map-card.is-in .map__route { animation: route-march 14s linear infinite; }

  .pin {
    position: absolute;
    inset-inline-start: var(--x);
    inset-block-start: var(--y);
    translate: -50% -50%;
    display: grid;
    place-items: center;
    inline-size: 36px;
    block-size: 36px;
    border-radius: 50%;
    z-index: 2;
  }
  .pin i {
    position: relative;
    display: block;
    inline-size: 14px;
    block-size: 14px;
    border-radius: 50%;
    background: var(--surface);
    box-shadow: 0 0 0 3px var(--brand), var(--shadow-1);
    transition: transform var(--dur-4) var(--ease-spring), background-color var(--dur-2);
  }
  .pin span {
    position: absolute;
    inset-inline-start: 50%;
    translate: -50% 0;
    padding: 0.12rem 0.5rem;
    border-radius: var(--r-pill);
    background: var(--surface);
    box-shadow: var(--shadow-1);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
    transition: background-color var(--dur-2), color var(--dur-2);
  }
  .pin--below span { inset-block-start: 100%; }
  .pin--above span { inset-block-end: 100%; }
  .pin:hover i { transform: scale(1.3); }
  .pin.is-on i { background: var(--coral); transform: scale(1.25); }
  .pin.is-on span { background: var(--btn-bg); color: var(--btn-fg); }
  .pin--hq i { inline-size: 18px; block-size: 18px; background: var(--butter); box-shadow: 0 0 0 3px var(--forest-ink), var(--shadow-1); }
  .pin--hq i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; animation: ping 2.2s var(--ease-out) infinite; }
  .pin--hq span::after { content: " · hq"; color: var(--accent-ink); }
  .pin--hq.is-on span::after { color: var(--butter); }

  .map__moop {
    --moop-size: clamp(40px, 6vw, 58px);
    position: absolute;
    inset-inline-start: var(--x);
    inset-block-start: var(--y);
    translate: 6% -86%; /* stands just right of the pin, so it never hides Ujjain next door */
    z-index: 3;
    pointer-events: none;
    transition: inset-inline-start 0.9s var(--ease-in-out), inset-block-start 0.9s var(--ease-in-out);
  }
  .map__moop.is-flipped { scale: -1 1; }

  .map-card__legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; font-size: 0.72rem; color: var(--text-muted); }
  .map-card__legend li { display: inline-flex; align-items: center; gap: 0.4rem; }
  .map-card__legend i { display: inline-block; inline-size: 10px; block-size: 10px; border-radius: 50%; }
  .lg-hq { background: var(--butter); box-shadow: 0 0 0 2px var(--forest-ink); }
  .lg-city { background: var(--surface); box-shadow: 0 0 0 2px var(--brand); }
  .lg-river { inline-size: 18px !important; block-size: 5px !important; border-radius: 3px !important; background: var(--sky); }

  .cities { display: grid; gap: var(--s-4); }
  .cities__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.45rem; }
  .city-btn {
    display: grid;
    justify-items: center;
    gap: 0.1rem;
    padding: 0.7rem 0.3rem;
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: inset 0 0 0 1.5px var(--line-strong);
    text-align: center;
    transition: transform var(--dur-3) var(--ease-spring), background-color var(--dur-2), color var(--dur-2), box-shadow var(--dur-2);
  }
  .city-btn:hover { transform: translateY(-2px) rotate(-1.5deg); box-shadow: inset 0 0 0 1.5px var(--text); }
  .city-btn:active { transform: scale(0.94); }
  .city-btn b { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; font-variation-settings: "SOFT" 100; }
  .city-btn span { font-size: 0.8rem; color: var(--text-muted); }
  .city-btn small { font-family: var(--font-mono); font-size: 0.64rem; color: var(--text-muted); }
  .city-btn[aria-pressed="true"] { background: var(--btn-bg); color: var(--btn-fg); box-shadow: 0 8px 20px rgb(var(--shadow-rgb) / 0.2); }
  .city-btn[aria-pressed="true"] :is(span, small) { color: color-mix(in oklab, var(--btn-fg) 75%, transparent); }

  .city-panel {
    display: grid;
    gap: 0.75rem;
    justify-items: start;
    padding: var(--s-6);
    border-radius: var(--r-2xl);
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line), var(--shadow-2);
  }
  .city-panel.is-swap > * { animation: swap-in 0.5s var(--ease-out); }
  .city-panel__tag { padding: 0.25rem 0.7rem; border-radius: var(--r-pill); background: var(--tint-olive); color: var(--brand-ink); font-size: 0.76rem; }
  .city-panel__title { font-size: var(--step-3); text-transform: capitalize; }
  .city-panel__hi { font-family: var(--font-body); font-size: 0.5em; font-weight: 500; color: var(--text-muted); letter-spacing: 0; }
  .city-panel__note { color: var(--text-muted); }
  .city-panel__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; inline-size: 100%; }
  .city-panel__facts div { padding: 0.65rem 0.8rem; border-radius: var(--r-md); background: var(--surface-2); }
  .city-panel__facts dt { font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-muted); }
  .city-panel__facts dd { margin: 0; font-weight: 600; font-size: 0.95rem; }
  .city-panel__kicker { color: var(--text-muted); font-size: 0.74rem; margin-block-start: 0.2rem; }
  .city-panel__inds { display: flex; flex-wrap: wrap; gap: 0.4rem; }
  .city-panel__inds li { padding: 0.3rem 0.7rem; border-radius: var(--r-pill); background: var(--tint-butter); font-size: 0.85rem; font-weight: 500; }
  .city-panel .btn { margin-block-start: 0.4rem; }
  .cities__else { color: var(--text-muted); font-size: 0.92rem; }

  @media (max-width: 640px) {
    .cities__list { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.3rem; }
    .city-btn { padding: 0.55rem 0.15rem; border-radius: 14px; }
    .city-btn b { font-size: 0.8rem; }
    .city-btn span { font-size: 0.66rem; }
    .city-btn small { display: none; }
    .city-panel { padding: var(--s-5); }
    .pin { inline-size: 28px; block-size: 28px; }
    .pin span { font-size: 0.6rem; padding: 0.08rem 0.35rem; }
    .pin--hq span::after { content: ""; }
    .map__river-label { display: none; }
  }

  /* ---------- RECENT WORK (home): manifesto rows ---------- */
  .wrows { margin: 0; padding: 0; list-style: none; border-block-start: 2px dashed var(--line-strong); }
  .wrow {
    --hl: var(--butter);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "no main go";
    align-items: center;
    column-gap: clamp(1rem, 3vw, 2.5rem);
    padding-block: clamp(1.1rem, 2.5vw, 1.6rem);
    border-block-end: 2px dashed var(--line-strong);
    text-decoration: none;
  }
  .wrow--pink { --hl: var(--blush-deep); }
  .wrow--sky { --hl: var(--sky); }
  .wrow--sage { --hl: var(--sage); }
  .wrow__no { grid-area: no; font-family: var(--font-display); font-size: clamp(2.6rem, 1.6rem + 4vw, 5rem); font-weight: 800; line-height: 0.85; letter-spacing: -0.04em; color: transparent; -webkit-text-stroke: 2px var(--text); font-variation-settings: "SOFT" 100; transition: color var(--dur-3), transform var(--dur-4) var(--ease-spring); }
  .wrow:hover .wrow__no, .wrow:focus-visible .wrow__no { color: var(--hl); transform: rotate(-6deg); }
  .wrow__main { grid-area: main; display: grid; gap: 0.35rem; min-inline-size: 0; }
  .wrow__name { font-family: var(--font-display); font-size: clamp(1.6rem, 1.1rem + 2.2vw, 3rem); font-weight: 700; line-height: 1.05; letter-spacing: -0.03em; font-variation-settings: "SOFT" 100; }
  .wrow__hl { position: relative; isolation: isolate; }
  .wrow__hl::before { content: ""; position: absolute; inset: 44% -0.1em 4% -0.1em; z-index: -1; background: var(--hl); border-radius: 0.12em 0.3em 0.16em 0.34em / 0.3em 0.14em 0.32em 0.16em; rotate: -1.5deg; transition: scale var(--dur-4) var(--ease-spring); }
  .wrow:hover .wrow__hl::before { scale: 1.05 1.2; }
  [data-theme="dark"] .wrow__hl { color: var(--ink); }
  .wrow__text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; max-inline-size: 34rem; color: var(--text-muted); font-size: 0.95rem; line-height: 1.5; }
  .wrow__meta { color: var(--text-muted); font-size: 0.74rem; }
  .wrow__shot { grid-area: shot; display: none; }
  .wrow__shot .shot { aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: var(--r-md); box-shadow: var(--shadow-2); }
  .wrow__go { grid-area: go; display: grid; place-items: center; inline-size: 2.75rem; aspect-ratio: 1; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--text); transition: background-color var(--dur-2), color var(--dur-2), rotate var(--dur-4) var(--ease-spring); }
  .wrow:hover .wrow__go { background: var(--btn-bg); color: var(--btn-fg); rotate: -45deg; }
  /* tablet+: screenshot thumbnail in the row, tilted, straightens on hover */
  @media (min-width: 700px) {
    .wrow { grid-template-columns: auto minmax(0, 1fr) clamp(9rem, 18vw, 15rem) auto; grid-template-areas: "no main shot go"; }
    .wrow__shot { display: block; rotate: 3deg; transition: rotate var(--dur-4) var(--ease-spring), transform var(--dur-4) var(--ease-spring); }
    .wrow:hover .wrow__shot { rotate: 0deg; transform: scale(1.04); }
  }
  /* phones: a full-width screenshot leads each row */
  @media (max-width: 699.98px) {
    .wrow { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "shot shot shot" "no main go"; row-gap: 0.9rem; }
    .wrow__shot { display: block; }
    .wrow__no { -webkit-text-stroke-width: 1.5px; }
  }
  .wrows__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); margin-block-start: var(--s-5); }
  .wrows__all { color: var(--brand-ink); font-weight: 700; text-decoration: none; }
  .wrows__all:hover { text-decoration: underline; text-underline-offset: 3px; }
  @media (prefers-reduced-motion: reduce) { .wrow:hover .wrow__no, .wrow:hover .wrow__go, .wrow__shot, .wrow:hover .wrow__shot { transform: none; rotate: none; } .wrow:hover .wrow__hl::before { scale: none; } }

  /* ---------- /locations: cities side by side, one equal card each ---------- */
  .compare { display: grid; gap: clamp(0.9rem, 2vw, 1.25rem); margin: 0; padding: 0; list-style: none; }
  @media (min-width: 760px) { .compare { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .compare__card { --tint: var(--tint-butter); --strong: var(--butter); display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-xl); background: var(--surface); box-shadow: inset 0 0 0 1px var(--card-line), var(--shadow-1); }
  .compare__card--pink { --tint: var(--tint-pink); --strong: var(--blush-deep); }
  .compare__card--sky { --tint: var(--tint-sky); --strong: var(--sky); }
  .compare__head { padding: 1.15rem 1.35rem 1rem; background: var(--tint); }
  .compare__role { display: inline-block; margin-block-end: 0.4rem; padding: 0.15rem 0.6rem; border-radius: var(--r-pill); background: var(--strong); color: var(--ink); font-size: 0.68rem; font-weight: 600; }
  .compare__city { font-family: var(--font-display); font-size: var(--step-2); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; font-variation-settings: "SOFT" 100; }
  .compare__city span { color: var(--text-muted); font-family: var(--font-body); font-size: 0.6em; font-weight: 500; letter-spacing: 0; }
  .compare__facts { display: grid; margin: 0; padding: 0.4rem 1.35rem; }
  .compare__facts div { display: grid; gap: 0.15rem; padding-block: 0.75rem; border-block-end: 1px dashed var(--line); }
  .compare__facts div:last-child { border-block-end: 0; }
  .compare__facts dt { color: var(--text-muted); font-size: 0.66rem; }
  .compare__facts dd { margin: 0; font-weight: 600; line-height: 1.4; }
  .compare__price { margin-block-start: auto; padding: 0.95rem 1.35rem 1.15rem; border-block-start: 1px solid var(--line); font-family: var(--font-display); font-size: 1.35rem; font-weight: 800; }
  .compare__price small { display: block; color: var(--text-muted); font-size: 0.66rem; font-weight: 500; }

  /* ---------- Small-business rows: soft pastel rows in the house style ---------- */
  .brut { display: grid; gap: 0.7rem; margin: 0; padding: 0; list-style: none; }
  .brut__row {
    --fill: var(--tint-butter);
    --chip: var(--butter);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: clamp(0.75rem, 2.5vw, 1.5rem);
    padding: clamp(0.85rem, 2vw, 1.1rem) clamp(1rem, 2.5vw, 1.5rem);
    border-radius: var(--r-xl);
    background: var(--fill);
    box-shadow: inset 0 0 0 1px var(--card-line);
    text-decoration: none;
    transition: transform var(--dur-3) var(--ease-spring), box-shadow var(--dur-3);
  }
  .brut__row--pink { --fill: var(--tint-pink); --chip: var(--blush-deep); }
  .brut__row--sky { --fill: var(--tint-sky); --chip: var(--sky); }
  .brut__row--sage { --fill: var(--tint-olive); --chip: var(--sage); }
  .brut__row:hover, .brut__row:focus-visible { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--card-line), var(--shadow-2); }
  .brut__no { display: grid; place-items: center; inline-size: 2.4rem; aspect-ratio: 1; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 2px var(--chip); font-size: 0.78rem; font-weight: 700; }
  .brut__name { font-family: var(--font-display); font-size: clamp(1.2rem, 1rem + 1vw, 1.7rem); font-weight: 700; line-height: 1.12; letter-spacing: -0.02em; font-variation-settings: "SOFT" 100; }
  .brut__price { padding: 0.3rem 0.75rem; border-radius: var(--r-pill); background: var(--surface); box-shadow: inset 0 0 0 1px var(--card-line); color: var(--text-muted); font-size: 0.76rem; white-space: nowrap; }
  .brut__price b { color: var(--text); font-weight: 700; }
  .brut__go { display: grid; place-items: center; inline-size: 2.6rem; aspect-ratio: 1; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--text); transition: background-color var(--dur-2), color var(--dur-2), rotate var(--dur-4) var(--ease-spring); }
  .brut__row:hover .brut__go { background: var(--btn-bg); color: var(--btn-fg); rotate: -45deg; }
  @media (max-width: 640px) {
    .brut__row { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "no name go" "no price go"; row-gap: 0.4rem; }
    .brut__no { grid-area: no; }
    .brut__name { grid-area: name; }
    .brut__price { grid-area: price; justify-self: start; }
    .brut__go { grid-area: go; inline-size: 2.2rem; }
    .brut__time { display: none; }
  }
  @media (prefers-reduced-motion: reduce) { .brut__row:hover, .brut__row:hover .brut__go { transform: none; rotate: none; } }
  /* the same rows as plain points (about: how we work): title + note, no link, no lift */
  .brut--points { margin-block-start: var(--s-5); }
  .brut--points .brut__row { grid-template-columns: auto minmax(0, 3fr) minmax(0, 2fr); } /* title 60 / note 40 */
  .brut--points .brut__row:hover { transform: none; box-shadow: inset 0 0 0 1px var(--card-line); }
  .brut__note { color: var(--text-muted); font-size: 0.94rem; line-height: 1.5; }
  @media (max-width: 760px) {
    .brut--points .brut__row { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "no name" "no note"; row-gap: 0.3rem; align-items: start; }
    .brut--points .brut__no { grid-area: no; }
    .brut--points .brut__name { grid-area: name; }
    .brut--points .brut__note { grid-area: note; }
  }

  /* ---------- LOCATIONS (home): three main cities, photo-led ---------- */
  .home-cities { display: grid; gap: clamp(1rem, 2.5vw, 1.5rem); margin: 0; padding: 0; list-style: none; }
  @media (min-width: 860px) { .home-cities { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .home-city {
    --tint: var(--tint-butter);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--r-xl);
    background: var(--tint);
    box-shadow: inset 0 0 0 1px var(--card-line);
    transition: transform var(--dur-3) var(--ease-spring), box-shadow var(--dur-3);
  }
  .home-city--pink { --tint: var(--tint-pink); }
  .home-city--sky { --tint: var(--tint-sky); }
  .home-city:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--card-line), var(--shadow-2); }
  .home-city__photo { position: relative; margin: 0.6rem 0.6rem 0; overflow: hidden; border-radius: calc(var(--r-xl) - 0.5rem); }
  .home-city__photo img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 3 / 2; object-fit: cover; transition: scale var(--dur-4) var(--ease-out); }
  .home-city:hover .home-city__photo img { scale: 1.04; }
  .home-city__stamp { position: absolute; inset-block-start: 0.7rem; inset-inline-start: 0.7rem; padding: 0.25rem 0.7rem; border-radius: var(--r-pill); background: var(--surface); box-shadow: var(--shadow-1); font-size: 0.7rem; font-weight: 600; }
  .home-city__body { display: flex; flex: 1; flex-direction: column; gap: 0.6rem; padding: 1.2rem 1.35rem 1.35rem; }
  .home-city__name { font-family: var(--font-display); font-size: var(--step-2); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; font-variation-settings: "SOFT" 100; }
  .home-city__name span { color: var(--text-muted); font-family: var(--font-body); font-size: 0.6em; font-weight: 500; letter-spacing: 0; }
  .home-city__text { color: var(--text-muted); font-size: 0.94rem; line-height: 1.55; }
  .home-city__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin: 0.2rem 0 0; }
  .home-city__facts div { padding: 0.55rem 0.7rem; border-radius: var(--r-md); background: color-mix(in oklab, var(--surface) 70%, transparent); }
  .home-city__facts dt { color: var(--text-muted); font-size: 0.64rem; }
  .home-city__facts dd { margin: 0; font-size: 0.86rem; font-weight: 600; line-height: 1.3; }
  .home-city__links { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; margin-block-start: auto; padding-block-start: 0.5rem; }
  .home-city__more { color: var(--brand-ink); font-weight: 700; text-decoration: none; }
  .home-city__more:hover { text-decoration: underline; text-underline-offset: 3px; }
  .home-city__start { color: var(--text-muted); font-size: 0.74rem; }
  .home-cities__else { margin-block-start: var(--s-5); color: var(--text-muted); font-size: 0.92rem; text-align: center; }
  @media (prefers-reduced-motion: reduce) { .home-city:hover, .home-city:hover .home-city__photo img { transform: none; scale: none; } }

  /* ---------- PACKAGES: four plans, GST switch ---------- */
  .currency--gst { grid-template-columns: repeat(2, 1fr); }
  .currency--gst button { min-inline-size: 0; white-space: nowrap; font-size: 0.85rem; }
  .currency--gst .currency__thumb { inline-size: calc((100% - 10px) / 2); }
  @media (min-width: 960px) {
    .packages__grid--four { grid-template-columns: repeat(2, 1fr); align-items: stretch; }
  }
  @media (min-width: 1180px) {
    .packages__grid--four { grid-template-columns: repeat(4, 1fr); align-items: center; gap: 1rem; }
    .packages__grid--four .package { padding: var(--s-5); }
    .packages__grid--four .package--featured { padding-block: var(--s-6); }
    .packages__grid--four .package__price { font-size: var(--step-3); }
  }

  /* ---------- SAY HI: WhatsApp + studio line, phone & city fields ---------- */
  .sayhi__ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; }
  .btn--wa .icon { color: #25A244; }
  .sayhi__studio { color: var(--text-muted); font-size: 0.76rem; }
  @media (max-width: 959px) {
    .sayhi__intro { grid-template-areas: "title mascot" "cta mascot" "studio studio"; }
    .sayhi__ctas { grid-area: cta; }
    .sayhi__studio { grid-area: studio; }
  }
  @media (max-width: 640px) {
    .sayhi__ctas .btn--lg { --btn-pad-y: 0.85rem; --btn-pad-x: 1.2rem; font-size: 1rem; }
  }
  .field__opt { font-size: 0.85em; opacity: 0.7; }
  .field input[type="tel"] {
    inline-size: 100%;
    padding: 0.95rem 1.1rem;
    border-radius: var(--r-md);
    border: 0;
    background: var(--surface);
    box-shadow: inset 0 0 0 1.5px var(--line-strong);
    transition: box-shadow var(--dur-2) var(--ease-out);
  }
  .input-wrap--prefix input { padding-inline-start: 3.4rem !important; letter-spacing: 0.02em; }
  .input-wrap__icon--text { font-size: 0.85rem; font-weight: 600; color: var(--text-muted); }
  .pills--sm { gap: 0.4rem; }
  .pills--sm .pill span { padding: 0.45rem 0.8rem; font-size: 0.88rem; }
  [data-theme="dark"] .field input[type="tel"] { background: var(--bg); box-shadow: inset 0 0 0 1.5px rgb(251 247 236 / 0.28); }

  /* ---------- FOOTER: city line + global site link ---------- */

  /* Dark: same crisp card edges as the other sections */
  [data-theme="dark"] :is(.city-panel, .map-card) { box-shadow: inset 0 0 0 1px var(--card-line), 0 18px 40px -26px rgb(0 0 0 / 0.8); }
}

@layer motion {
  @keyframes route-march { to { stroke-dashoffset: 0; } }
}

/* ==========================================================================
   DARK THEME — contrast refinements (section by section)
   ========================================================================== */
@layer sections {
  /* Highlighted words: solid butter marker with dark ink, like the light theme */
  [data-theme="dark"] :is(.hl-cute, .sayhi__cute) { color: #161C0E; }

  /* Bands and cards: crisper edges so surfaces separate from the page */
  [data-theme="dark"] :is(.pillars, .sayhi) { box-shadow: inset 0 0 0 1px rgb(251 247 236 / 0.08); }
  [data-theme="dark"] :is(.pillar, .fighter, .package, .faq__item, .step, .system-card, .quote, .mini-card, .case-card, .feature) {
    box-shadow: inset 0 0 0 1px var(--card-line), 0 18px 40px -26px rgb(0 0 0 / 0.8);
  }
  [data-theme="dark"] .fighter--hero { box-shadow: inset 0 0 0 2px var(--brand), 0 18px 40px -26px rgb(0 0 0 / 0.8); }
  [data-theme="dark"] .step.is-active { box-shadow: inset 0 0 0 2px var(--brand); }
  [data-theme="dark"] .faq__item[open] { box-shadow: inset 0 0 0 1.5px var(--brand); }

  /* Featured package: the boldest card on the row, as in light */
  [data-theme="dark"] .package--featured { box-shadow: inset 0 0 0 2px var(--brand), 0 26px 50px -24px rgb(0 0 0 / 0.85); }
  [data-theme="dark"] .package--featured .btn--primary { background: var(--btn-bg); color: var(--btn-fg); }

  /* Terminal: lift it off the page */
  [data-theme="dark"] .terminal { box-shadow: inset 0 0 0 1px rgb(251 247 236 / 0.16), 0 30px 60px -30px rgb(0 0 0 / 0.9); }

  /* Uncollected stickers: still clearly "not yet", but not dead */
  [data-theme="dark"] .sticker .moop { filter: grayscale(0.45) brightness(1.15); opacity: 0.9; }
  [data-theme="dark"] .sticker { outline-color: rgb(251 247 236 / 0.3); }

  /* Tech strip: softer butter so it doesn't out-shout the content */
  [data-theme="dark"] .marquee__row--reverse { background: #DCC25C; color: #161C0E; box-shadow: 0 6px 18px rgb(0 0 0 / 0.5); }

  /* Featured testimonial: deep green like light theme, cream text */
  [data-theme="dark"] .quote--featured { background: var(--featured-bg); color: var(--featured-fg); box-shadow: inset 0 0 0 2px var(--brand), 0 18px 40px -26px rgb(0 0 0 / 0.8); }
  [data-theme="dark"] .quote--featured .quote__who small { color: rgb(251 247 236 / 0.75); }

  /* Form: inputs sit *into* the card, not flush with it */
  [data-theme="dark"] .field input[type="text"],
  [data-theme="dark"] .field input[type="email"] { background: var(--bg); box-shadow: inset 0 0 0 1.5px rgb(251 247 236 / 0.28); }
  [data-theme="dark"] .field input::placeholder { color: rgb(251 247 236 / 0.5); }
  [data-theme="dark"] .stepper__num { background: #3A4A2C; color: var(--text); }
  [data-theme="dark"] .stepper__line { background: #3A4A2C; }
  [data-theme="dark"] .range { background: linear-gradient(var(--brand) 0 0) 0 0 / var(--fill) 100% no-repeat, var(--bg); box-shadow: inset 0 0 0 1.5px rgb(251 247 236 / 0.28); }

  /* Sticker cards and the "currently" chip: separate from the page */
  [data-theme="dark"] .sticker { background: var(--surface); border-color: var(--surface); box-shadow: 0 0 0 1px var(--card-line), 0 14px 30px -20px rgb(0 0 0 / 0.8); }
  [data-theme="dark"] .sticker-count { background: #3D3620; color: #F6E7A8; }
}

/* ==========================================================================
   SITE PAGES — added after the mockup for inner pages
   (error pages, breadcrumbs, floating WhatsApp button)
   ========================================================================== */
@layer sections {
  /* ---------- Error pages ---------- */
  .error-page {
    position: relative;
    isolation: isolate;
    overflow: clip;
    min-block-size: 82dvh;
    display: grid;
    place-items: center;
    padding-block: 8.5rem var(--section-pad);
    text-align: center;
  }
  .error-page__moop { --moop-size: clamp(120px, 16vw, 170px); display: block; margin-inline: auto; }
  .error-page__code { margin-block-start: var(--s-4); color: var(--text-muted); }
  .error-page__title { font-size: var(--step-5); margin-block: var(--s-2) var(--s-4); }
  .error-page__text { color: var(--text-muted); max-inline-size: 34rem; margin-inline: auto; }
  .error-page__ctas { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; margin-block-start: var(--s-6); }
  .error-page__links { display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: center; margin-block-start: var(--s-6); }
  .error-page__links a {
    padding: 0.45rem 0.95rem;
    border-radius: var(--r-pill);
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--card-line);
    text-decoration: none;
    font-size: var(--step--1);
  }
  .error-page__links a:hover { background: var(--tint-butter); }
  .error-page .deco--pink { inline-size: 22vw; inset-block-start: -6vw; }
  .error-page .deco--sky { inset-block-start: auto; inset-block-end: -4vw; }

  /* ---------- Shared helpers for CMS pages ---------- */
  .container--narrow { inline-size: min(100% - 2 * var(--gutter), 52rem); }
  .section--tight { padding-block: clamp(1.25rem, 2.5vw, 2rem); }
  .panel-card { padding: clamp(1.25rem, 3vw, 2rem); border-radius: var(--r-xl); background: var(--surface); box-shadow: inset 0 0 0 1px var(--card-line), var(--shadow-1); }
  .checks--cols { display: grid; gap: 0.75rem 2rem; }
  @media (min-width: 760px) { .checks--cols { grid-template-columns: 1fr 1fr; } }

  /* ---------- Page hero (CMS pages) ---------- */
  .page-hero { position: relative; isolation: isolate; overflow: clip; padding-block: 8rem clamp(1.5rem, 3vw, 2.5rem); }
  .page-hero .deco--pink { inline-size: 22vw; inset-block-start: -8vw; }
  .page-hero .deco--butter { inline-size: 12vw; inset-block-start: 5vw; }
  .page-hero .deco--arc-tr { inline-size: 30vw; }
  .page-hero__grid { display: grid; gap: var(--s-6); align-items: center; }
  @media (min-width: 900px) { .page-hero__grid { grid-template-columns: minmax(0, 1fr) auto; } }
  .page-hero__title { font-size: var(--step-5); max-inline-size: 18ch; }
  .page-hero__lede { margin-block-start: var(--s-4); font-size: var(--step-1); color: var(--text-muted); max-inline-size: 40rem; }
  /* Builder hero (services, small business…): compact, in line with the homepage hero's copy */
  [data-hero="block"] { padding-block-start: 6.75rem; }
  [data-hero="block"] .page-hero__title { font-size: clamp(2.2rem, 1.2rem + 3.2vw, 4.2rem); line-height: 1.04; letter-spacing: -0.03em; max-inline-size: 22ch; }
  [data-hero="block"] .page-hero__lede { margin-block-start: var(--s-3); font-size: clamp(0.98rem, 0.9rem + 0.3vw, 1.15rem); max-inline-size: 34rem; }
  [data-hero="block"] .hero-facts { margin-block-start: var(--s-3); }
  [data-hero="block"] .hero__ctas { margin-block-start: var(--s-4); }
  [data-hero="block"] .hero__ctas .btn--lg { --btn-pad-y: 0.8rem; --btn-pad-x: 1.3rem; font-size: 1rem; }
  .page-hero__moop { --moop-size: clamp(130px, 16vw, 200px); justify-self: center; }
  /* one Moop per hero: beside the copy on wide screens, above the buttons on phones */
  .page-hero__moop--inline { display: none; }
  @media (max-width: 899.98px) {
    .page-hero__grid > .page-hero__moop { display: none; }
    .page-hero__moop--inline { display: block; --moop-size: 104px; margin-block-start: var(--s-4); }
  }
  .page-hero--plain { padding-block-end: 0; }

  /* ---------- Page builder (Phase 10) ---------- */
  /* Hero with a photo + at-a-glance facts */
  @media (min-width: 900px) { .page-hero--media .page-hero__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); } }
  .page-hero__media { margin: 0; justify-self: stretch; }
  .page-hero__img { inline-size: 100%; block-size: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-2xl); box-shadow: 10px 10px 0 var(--brand-ink), var(--shadow-2); rotate: 1.2deg; }
  .hero-facts { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: var(--s-4) 0 0; padding: 0; list-style: none; font-size: 0.78rem; }
  .hero-facts li { padding: 0.35rem 0.8rem; border-radius: var(--r-pill); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); }
  .hero-facts span { color: var(--text-muted); }
  .hero-facts b { color: var(--text); font-weight: 700; }

  /* Section bands (theme set per section). "dark" re-points the colour tokens so any block adapts. */
  .block--soft { background: var(--surface-2); }
  .block--sage { background: var(--tint-olive); }
  .block--butter { background: var(--tint-butter); }
  .block--dark {
    --bg: #18200F; --surface: #222B1A; --surface-2: #2E3A25; --text: #FBF7EC; --text-muted: #D6D3C1;
    --line: rgb(251 247 236 / 0.18); --line-strong: rgb(251 247 236 / 0.34); --brand: #A9C06A; --brand-ink: #CFE38F;
    --accent-ink: #FBB8CD; --tint-olive: #33431F; --tint-pink: #422A35; --tint-butter: #3D3620; --tint-sky: #20303D;
    --card-line: rgb(251 247 236 / 0.16); --btn-bg: #E2EDB4; --btn-fg: #0F130B; --btn-bg-hover: #FBF7EC;
    background: var(--bg); color: var(--text);
  }
  .block--soft, .block--sage, .block--butter, .block--dark { border-radius: clamp(24px, 4vw, 48px); margin-inline: clamp(0px, 1.5vw, 1.25rem); }

  /* Big statement */
  .statement__kicker { color: var(--text-muted); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; margin-block-end: var(--s-3); }
  .statement__text { font-family: var(--font-display); font-size: clamp(1.9rem, 1.2rem + 3vw, 3.6rem); font-weight: 700; line-height: 1.08; letter-spacing: -0.03em; max-inline-size: 24ch; font-variation-settings: "SOFT" 100; }
  .statement__text em { color: var(--brand-ink); font-style: italic; font-variation-settings: "SOFT" 100, "WONK" 1; }
  .statement__sub { margin-block-start: var(--s-4); max-inline-size: 46rem; color: var(--text-muted); font-size: var(--step-1); }
  .statement--center .container { display: grid; justify-items: center; text-align: center; }

  /* Card grid */
  .icards { display: grid; gap: clamp(0.9rem, 2vw, 1.25rem); margin: 0; padding: 0; list-style: none; }
  @media (min-width: 640px) { .icards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 1040px) {
    .icards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .icards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }
  .icard { display: flex; flex-direction: column; gap: 0.55rem; padding: var(--s-5); border-radius: var(--r-xl); background: var(--surface); box-shadow: inset 0 0 0 1px var(--card-line), var(--shadow-1); transition: transform var(--dur-3) var(--ease-spring); }
  .icard:hover { transform: translateY(-3px); }
  .icard__icon { display: grid; place-items: center; inline-size: 3rem; block-size: 3rem; border-radius: 14px; font-size: 1.5rem; line-height: 1; }
  .icard--pink .icard__icon { background: var(--tint-pink); }
  .icard--butter .icard__icon { background: var(--tint-butter); }
  .icard--sky .icard__icon { background: var(--tint-sky); }
  .icard--sage .icard__icon { background: var(--tint-olive); }
  .icard__title { font-family: var(--font-display); font-size: var(--step-1); font-weight: 700; line-height: 1.15; }
  .icard__text { color: var(--text-muted); font-size: 0.95rem; line-height: 1.55; }
  .icard__link { margin-block-start: auto; padding-block-start: var(--s-2); color: var(--brand-ink); font-size: 0.8rem; font-weight: 600; text-decoration: none; }
  .icard__link:hover { text-decoration: underline; text-underline-offset: 3px; }

  /* Image + paragraph */
  .mtext { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
  @media (min-width: 900px) {
    .mtext { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .mtext--left .mtext__media { order: -1; }
    .mtext--solo { grid-template-columns: minmax(0, 46rem); }
  }
  .mtext__kicker { color: var(--brand-ink); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; margin-block-end: var(--s-2); }
  .mtext__copy .section-head { margin-block-end: var(--s-4); }
  .mtext__body { margin-block-end: var(--s-4); }
  .mtext__cta { margin-block-start: var(--s-5); }
  .mtext__media { margin: 0; }
  .mtext__img { inline-size: 100%; block-size: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-2xl); box-shadow: var(--shadow-2); }
  .mtext__caption { margin-block-start: var(--s-2); color: var(--text-muted); font-size: 0.72rem; }

  /* Timeline */
  .timeline { display: grid; gap: var(--s-4); margin: 0; padding: 0; list-style: none; position: relative; }
  .timeline::before { content: ""; position: absolute; inset-block: 0.5rem; inset-inline-start: 0.55rem; inline-size: 2px; background: repeating-linear-gradient(to bottom, var(--line-strong) 0 6px, transparent 6px 12px); }
  .timeline__item { position: relative; display: grid; gap: 0.4rem; padding-inline-start: 2.25rem; }
  .timeline__item::before { content: ""; position: absolute; inset-inline-start: 0.1rem; inset-block-start: 0.3rem; inline-size: 1rem; block-size: 1rem; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px var(--bg); }
  .timeline__when { justify-self: start; padding: 0.15rem 0.6rem; border-radius: var(--r-pill); background: var(--tint-butter); font-size: 0.72rem; font-weight: 600; }
  .timeline__card { padding: var(--s-4) var(--s-5); border-radius: var(--r-lg); background: var(--surface); box-shadow: inset 0 0 0 1px var(--card-line); }
  .timeline__title { font-family: var(--font-display); font-size: var(--step-1); font-weight: 700; }
  .timeline__text { margin-block-start: 0.35rem; color: var(--text-muted); }
  @media (min-width: 760px) {
    .timeline__item { grid-template-columns: 7rem minmax(0, 1fr); align-items: start; gap: var(--s-4); }
    .timeline__when { margin-block-start: 0.9rem; }
  }

  /* Comparison table */
  .dtable-wrap { overflow-x: auto; padding: clamp(0.5rem, 1.5vw, 1rem); border-radius: var(--r-xl); background: var(--surface); box-shadow: inset 0 0 0 1px var(--card-line), var(--shadow-1); }
  .dtable-wrap:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 3px; }
  .dtable { inline-size: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.95rem; line-height: 1.45; }
  .dtable th, .dtable td { padding: 1rem 1.15rem; text-align: start; vertical-align: top; border-block-end: 1px dashed var(--line-strong); }
  .dtable thead th { vertical-align: bottom; padding-block: 1.1rem 0.9rem; border-block-end: 2px solid var(--text); font-family: var(--font-display); font-size: var(--step-1); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; }
  .dtable tbody th { inline-size: 22%; padding-block-start: 1.2rem; color: var(--text-muted); font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
  .dtable tbody tr:last-child > * { border-block-end: 0; }
  .dtable tbody tr:hover > :not(.is-featured) { background: color-mix(in oklab, var(--tint-butter) 60%, transparent); }
  /* "our pick" column: dark header tab over a tinted column */
  .dtable .is-featured { background: var(--tint-olive); font-weight: 600; }
  .dtable thead th.is-featured { border-start-start-radius: var(--r-lg); border-start-end-radius: var(--r-lg); border-block-end-color: transparent; background: var(--featured-bg); color: var(--featured-fg); }
  .dtable tbody tr:last-child td.is-featured { border-end-start-radius: var(--r-lg); border-end-end-radius: var(--r-lg); }
  .block--dark .dtable thead th.is-featured { background: var(--brand); color: var(--bg); }
  .dtable__badge { display: block; inline-size: fit-content; margin-block-end: 0.45rem; padding: 0.15rem 0.55rem; border-radius: var(--r-pill); background: var(--highlight); color: var(--ink); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
  .dtable__mark { display: inline-grid; place-items: center; inline-size: 1.3rem; block-size: 1.3rem; margin-inline-end: 0.45rem; border-radius: 50%; vertical-align: -0.3em; font-size: 0.72rem; font-weight: 700; line-height: 1; }
  .dtable__mark--yes { background: var(--brand); color: var(--bg); }
  .dtable__mark--yes::before { content: "✓"; }
  .dtable__mark--no { background: var(--tint-pink); color: var(--accent-ink); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent-ink) 35%, transparent); }
  .dtable__mark--no::before { content: "✕"; }
  /* two columns (label → value), e.g. a cost breakdown */
  .dtable-wrap:has(.dtable--simple) { max-inline-size: 46rem; }
  .dtable--simple thead th { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); border-block-end-width: 1px; }
  .dtable--simple thead th:last-child, .dtable--simple td { text-align: end; }
  .dtable--simple tbody th { inline-size: auto; padding-block-start: 1rem; color: var(--text); font-family: var(--font-body); font-size: inherit; font-weight: 500; letter-spacing: 0; text-transform: none; }
  .dtable--simple td { font-weight: 700; font-variant-numeric: tabular-nums; }
  @media (min-width: 720px) { .dtable--cards { min-inline-size: 38rem; } }
  /* phones: every row becomes a card, each value labelled with its column */
  @media (max-width: 719.98px) {
    .dtable-wrap:has(.dtable--cards) { overflow: visible; padding: 0; border-radius: 0; background: none; box-shadow: none; }
    .dtable--cards, .dtable--cards tbody, .dtable--cards tr, .dtable--cards th, .dtable--cards td { display: block; }
    .dtable--cards thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .dtable--cards tbody { display: grid; gap: var(--s-3); }
    .dtable--cards tr { overflow: hidden; border-radius: var(--r-lg); background: var(--surface); box-shadow: inset 0 0 0 1px var(--card-line), var(--shadow-1); }
    .dtable--cards tbody th { inline-size: auto; padding: 0.9rem 1rem 0.6rem; border: 0; color: var(--text); font-family: var(--font-display); font-size: var(--step-1); font-weight: 700; letter-spacing: -0.01em; text-transform: none; }
    .dtable--cards td { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--s-3); padding: 0.65rem 1rem; border-block-end: 0; border-block-start: 1px dashed var(--line-strong); }
    .dtable--cards td::before { content: attr(data-label); color: var(--text-muted); font-size: 0.8rem; font-weight: 500; }
    .dtable--cards tbody tr:last-child td.is-featured { border-radius: 0; }
    .dtable--cards td.is-featured::before { content: "★ " attr(data-label); color: var(--text); font-weight: 600; }
    .dtable--cards tbody tr:hover > :not(.is-featured) { background: none; }
  }
  .dtable-note { margin-block-start: var(--s-3); max-inline-size: 60rem; color: var(--text-muted); font-size: 0.85rem; }

  /* Chips */
  .chip-cloud { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
  .chip-cloud li { padding: 0.45rem 0.95rem; border-radius: var(--r-pill); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); font-weight: 500; }
  .chip-cloud__note { margin-block-start: var(--s-3); color: var(--text-muted); font-size: 0.9rem; }

  /* On-this-page links */
  .onpage .container { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; }
  .onpage__label { color: var(--text-muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; }
  .onpage__list { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0; padding: 0; list-style: none; }
  .onpage__list a { display: inline-block; padding: 0.35rem 0.85rem; border-radius: var(--r-pill); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); font-size: 0.85rem; text-decoration: none; }
  .onpage__list a:hover { box-shadow: inset 0 0 0 1.5px var(--text); }

  /* ---------- Prose (Markdown) ---------- */
  .prose { font-size: var(--step-0); line-height: 1.7; max-inline-size: 68ch; }
  .prose > * + * { margin-block-start: 1em; }
  .prose :is(h2, h3) { margin-block-start: 1.6em; }
  .prose h2 { font-size: var(--step-3); }
  .prose h3 { font-size: var(--step-2); }
  .prose :is(ul, ol) { padding-inline-start: 1.3em; }
  .prose li + li { margin-block-start: 0.35em; }
  .prose a { color: var(--brand-ink); text-underline-offset: 3px; }
  .prose blockquote { padding-inline-start: 1em; border-inline-start: 3px solid var(--butter); color: var(--text-muted); }
  .prose code { font-family: var(--font-mono); font-size: 0.88em; padding: 0.1em 0.35em; border-radius: 6px; background: var(--surface-2); }

  /* ---------- Pillars without demo widgets ---------- */
  @media (min-width: 640px) and (max-width: 959px) {
    .pillars__grid--plain .pillar { grid-template-columns: 1fr; grid-template-areas: "num" "title" "text"; }
  }

  /* ---------- Process with any number of steps ---------- */
  @media (min-width: 860px) { .process__steps[style*="--cols"] { grid-template-columns: repeat(var(--cols), 1fr); } }

  /* ---------- Local trust ---------- */
  .local-trust { display: grid; gap: var(--s-5); align-items: start; }
  @media (min-width: 900px) { .local-trust { grid-template-columns: 1.2fr 1fr; } }
  .local-trust__areas { position: relative; display: grid; gap: var(--s-3); padding: var(--s-6); border-radius: var(--r-2xl); background: var(--tint-sky); }
  .local-trust__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; }
  .local-trust__moop { --moop-size: 90px; justify-self: end; }

  /* ---------- Pain → solution ---------- */
  .pain { display: grid; gap: var(--s-5); }
  @media (min-width: 900px) { .pain { grid-template-columns: 1fr 1fr; } }
  .pain__card { position: relative; display: grid; gap: var(--s-3); align-content: start; padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: var(--r-2xl); }
  .pain__card--pain { background: var(--tint-pink); }
  .pain__card--fix { background: var(--tint-olive); }
  .pain__label { color: var(--text-muted); }
  .pain__text { font-family: var(--font-display); font-size: var(--step-2); line-height: 1.25; font-variation-settings: "SOFT" 100; }
  .pain__moop { --moop-size: 80px; justify-self: end; }

  /* ---------- Stats strip ---------- */
  .stats-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--s-4); list-style: none; padding: 0; }
  .stats-strip li { display: grid; gap: 0.2rem; padding: var(--s-5); border-radius: var(--r-xl); background: var(--surface); box-shadow: inset 0 0 0 1px var(--card-line); }
  .stats-strip b { font-family: var(--font-display); font-size: var(--step-3); font-weight: 800; line-height: 1; letter-spacing: -0.03em; }
  .stats-strip span { color: var(--text-muted); font-size: var(--step--1); }

  /* ---------- Image + text ---------- */
  .image-text { display: grid; gap: var(--s-6); align-items: center; }
  @media (min-width: 960px) {
    .image-text { grid-template-columns: 1fr 1fr; }
    .image-text--left .image-text__media { order: -1; }
  }
  .image-text__media img { inline-size: 100%; block-size: auto; border-radius: var(--r-xl); box-shadow: var(--shadow-2); }

  /* ---------- Page cards (hub listings, related pages) ---------- */
  /* Rows always fill: the partial picks two / three / featured (5 cards: wide + 1, then 3 on desktop;
     wide, then 2 + 2 on tablet). */
  .page-cards { display: grid; grid-template-columns: 1fr; gap: clamp(1rem, 2vw, 1.5rem); list-style: none; margin: 0; padding: 0; }
  @media (min-width: 700px) {
    .page-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .page-cards--three > li:last-child:nth-child(odd) { grid-column: 1 / -1; } /* odd count: last card spans */
    .page-cards--featured > li.is-featured { grid-column: 1 / -1; }
  }
  @media (min-width: 1040px) {
    .page-cards--three, .page-cards--featured { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .page-cards--three > li:last-child:nth-child(odd) { grid-column: auto; }
    .page-cards--featured > li.is-featured { grid-column: span 2; } /* 2 + 1, then 3: full rows */
  }
  .page-cards > li { display: flex; }

  .page-card {
    display: flex;
    flex-direction: column;
    inline-size: 100%;
    border-radius: var(--r-xl);
    text-decoration: none;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px var(--card-line);
    transition: transform var(--dur-3) var(--ease-spring), box-shadow var(--dur-2) var(--ease-out);
  }
  .page-card:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--card-line), var(--shadow-2); }
  .page-card--pink { background: var(--tint-pink); }
  .page-card--butter { background: var(--tint-butter); }
  .page-card--sky { background: var(--tint-sky); }
  .page-card--sage { background: var(--tint-olive); }

  .page-card__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-2); }
  .page-card__img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: scale var(--dur-4) var(--ease-out); }
  .page-card:hover .page-card__img { scale: 1.04; }

  .page-card__body { display: flex; flex: 1; flex-direction: column; gap: 0.55rem; padding: var(--s-5); }
  .page-card__tag { align-self: flex-start; padding: 0.15rem 0.6rem; border-radius: var(--r-pill); background: var(--surface); color: var(--text-muted); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; }
  .page-card__title { font-family: var(--font-display); font-size: var(--step-2); font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; font-variation-settings: "SOFT" 100; }
  .page-card__text { color: var(--text-muted); font-size: var(--step--1); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .page-card__more { display: inline-flex; align-items: center; gap: 0.4rem; margin-block-start: auto; padding-block-start: var(--s-2); color: var(--brand-ink); font-size: 0.8rem; font-weight: 600; }
  .page-card:hover .page-card__more .icon { translate: 3px 0; }
  .page-card__more .icon { transition: translate var(--dur-2) var(--ease-out); }

  /* Featured (first of five): image beside the text from tablet up */
  @media (min-width: 700px) {
    .is-featured .page-card--media { display: grid; grid-template-columns: 1.15fr 1fr; }
    .is-featured .page-card__media { aspect-ratio: auto; min-block-size: 100%; }
    .is-featured .page-card__body { justify-content: center; padding: clamp(1.5rem, 3vw, 2.5rem); }
    .is-featured .page-card__title { font-size: var(--step-3); }
    .is-featured .page-card__text { -webkit-line-clamp: 5; font-size: var(--step-0); }
  }

  /* ---------- CTA band ---------- */
  .cta-band {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    gap: var(--s-5);
    align-items: center;
    padding: clamp(1.75rem, 4vw, 3.25rem);
    border-radius: var(--r-2xl);
    background: var(--band-bg);
  }
  @media (min-width: 760px) { .cta-band { grid-template-columns: auto 1fr; } }
  .cta-band__moop { --moop-size: clamp(100px, 12vw, 150px); justify-self: center; }

  /* ---------- Guides ---------- */
  /* /guides hero: copy + three promises, topic filter as a pill bar */
  .guides-hero { padding-block: 6.5rem 0; }
  .guides-hero .crumbs { margin-block-end: var(--s-3); }
  .guides-hero__title { max-inline-size: none; font-size: clamp(2rem, 1.3rem + 2.4vw, 3.4rem); line-height: 1.04; }
  @media (min-width: 760px) { .guides-hero__title { white-space: nowrap; } }
  .guides-hero__lede { margin-block-start: var(--s-3); font-size: var(--step-0); max-inline-size: 38rem; }
  .guide-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block-start: var(--s-5); padding: 0.5rem; border-radius: var(--r-pill); background: var(--surface); box-shadow: inset 0 0 0 1px var(--card-line), var(--shadow-1); inline-size: fit-content; max-inline-size: 100%; }
  /* topic pills in the site's pastels, no underline; the current topic is dark */
  .guide-filter .chip { text-decoration: none; box-shadow: inset 0 0 0 1px var(--card-line); }
  .guide-filter .chip:nth-of-type(4n+1) { background: var(--tint-butter); }
  .guide-filter .chip:nth-of-type(4n+2) { background: var(--tint-pink); }
  .guide-filter .chip:nth-of-type(4n+3) { background: var(--tint-sky); }
  .guide-filter .chip:nth-of-type(4n+4) { background: var(--tint-olive); }
  .guide-filter .chip:hover { box-shadow: inset 0 0 0 1.5px var(--text); }
  .guide-filter .chip[aria-current="page"] { background: var(--btn-bg); color: var(--btn-fg); box-shadow: none; }

  /* simple colourful CTA before the footer (guides) */
  .soft-cta {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    gap: var(--s-4);
    padding: clamp(1.75rem, 4vw, 3rem);
    border-radius: var(--r-2xl);
    background: var(--tint-butter);
    box-shadow: inset 0 0 0 1px var(--card-line);
  }
  @media (min-width: 860px) { .soft-cta { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } }
  .soft-cta::before, .soft-cta::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; }
  .soft-cta::before { inline-size: clamp(180px, 22vw, 300px); aspect-ratio: 1; inset-block-start: -40%; inset-inline-end: 8%; background: var(--tint-pink); }
  .soft-cta::after { inline-size: clamp(140px, 16vw, 220px); aspect-ratio: 1; inset-block-end: -45%; inset-inline-end: -4%; background: var(--tint-sky); }
  .soft-cta__title { font-family: var(--font-display); font-size: var(--step-3); font-weight: 700; line-height: 1.05; letter-spacing: -0.025em; font-variation-settings: "SOFT" 100; }
  .soft-cta__title em { color: var(--brand-ink); font-variation-settings: "SOFT" 100, "WONK" 1; }
  .soft-cta__text { margin-block-start: var(--s-2); color: var(--text-muted); max-inline-size: 36rem; }
  .soft-cta__ctas { display: flex; flex-wrap: wrap; gap: 0.6rem; }

  /* ---------- Pricing page (business website packages): clean, pastel ---------- */
  .price-h2 { font-family: var(--font-display); font-size: var(--step-3); font-weight: 700; line-height: 1.05; letter-spacing: -0.025em; font-variation-settings: "SOFT" 100; }
  .price-h2 em { color: var(--brand-ink); font-variation-settings: "SOFT" 100, "WONK" 1; }
  .price-sub { margin-block: var(--s-2) var(--s-5); color: var(--text-muted); max-inline-size: 40rem; }
  .price-note { margin-block-start: var(--s-4); color: var(--text-muted); font-size: 0.86rem; max-inline-size: 46rem; }

  /* pricing hero: copy 70, Moop 30 */
  .price-hero { display: grid; gap: var(--s-4); align-items: center; }
  @media (min-width: 860px) { .price-hero { grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); } }
  .price-hero__title { max-inline-size: 20ch; }
  .price-hero__lede { max-inline-size: 44rem; }
  .price-hero__buddy { display: grid; justify-items: center; gap: 0.4rem; }
  .price-hero__moop { --moop-size: clamp(120px, 14vw, 190px); }
  @media (max-width: 859.98px) { .price-hero__buddy { display: none; } }

  /* three-year costs: copy left (40), table right (60) */
  .price-costs { display: grid; gap: clamp(1.25rem, 3vw, 2.5rem); align-items: center; }
  @media (min-width: 900px) { .price-costs { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } }
  .price-costs__copy .price-sub { margin-block-end: 0; }
  .price-costs .dtable-wrap.price-costs__table { max-inline-size: none; padding: clamp(0.75rem, 2vw, 1.25rem); border-radius: var(--r-2xl); background: var(--tint-sky); box-shadow: inset 0 0 0 1px var(--card-line); }
  .price-costs__table .dtable { max-inline-size: none; }
  .price-costs__table .dtable thead th { padding-block: 0.4rem 0.8rem; border-block-end: 0; }
  .price-costs__table .dtable tbody th, .price-costs__table .dtable td { padding-block: 0.95rem; border-block-end: 1px dashed color-mix(in oklab, var(--text) 18%, transparent); }
  .price-costs__table .dtable tbody tr:last-child > * { border-block-end: 0; }
  .price-costs__table .dtable tbody tr:hover > * { background: none; }
  .price-costs__table .dtable tbody tr:first-child > * { background: var(--surface); }
  .price-costs__table .dtable tbody tr:first-child th { border-start-start-radius: var(--r-md); border-end-start-radius: var(--r-md); }
  .price-costs__table .dtable tbody tr:first-child td { border-start-end-radius: var(--r-md); border-end-end-radius: var(--r-md); }
  .price-costs__table .dtable td { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; }

  .price-cards { display: grid; gap: clamp(0.9rem, 2vw, 1.25rem); margin: 0; padding: 0; list-style: none; }
  @media (min-width: 860px) { .price-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .price-card { display: flex; flex-direction: column; gap: 0.5rem; padding: clamp(1.5rem, 3vw, 2.1rem); border-radius: var(--r-xl); box-shadow: inset 0 0 0 1px var(--card-line); }
  .price-card--butter { background: var(--tint-butter); }
  .price-card--pink { background: var(--tint-pink); }
  .price-card--sky { background: var(--tint-sky); }
  .price-card__name { color: var(--text-muted); font-size: 0.76rem; }
  .price-card__price { font-family: var(--font-display); font-size: clamp(2rem, 1.5rem + 1.8vw, 2.8rem); font-weight: 800; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
  .price-card__price small { display: block; margin-block-end: 0.25rem; color: var(--text-muted); font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0; }
  .price-card__time { color: var(--text-muted); font-size: 0.9rem; }
  .price-card__list { display: grid; gap: 0.45rem; margin: var(--s-3) 0 0; padding: var(--s-4) 0 0; border-block-start: 1px dashed var(--line-strong); list-style: none; }
  .price-card__list li { position: relative; padding-inline-start: 1.4rem; font-size: 0.94rem; line-height: 1.45; }
  .price-card__list li::before { content: ""; position: absolute; inset-inline-start: 0.1rem; inset-block-start: 0.45em; inline-size: 0.55rem; block-size: 0.3rem; border-inline-start: 2px solid var(--brand-ink); border-block-end: 2px solid var(--brand-ink); rotate: -45deg; }

  .price-panel { display: grid; gap: var(--s-4); padding: clamp(1.5rem, 3.5vw, 2.5rem); border-radius: var(--r-2xl); background: var(--tint-olive); box-shadow: inset 0 0 0 1px var(--card-line); }
  @media (min-width: 900px) { .price-panel { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); align-items: start; } }
  .price-panel__list { display: grid; gap: 0.55rem 1.5rem; margin: 0; padding: 0; list-style: none; }
  @media (min-width: 560px) { .price-panel__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .price-panel__list li { position: relative; padding-inline-start: 1.4rem; font-weight: 500; line-height: 1.45; }
  .price-panel__list li::before { content: ""; position: absolute; inset-inline-start: 0.1rem; inset-block-start: 0.45em; inline-size: 0.55rem; block-size: 0.3rem; border-inline-start: 2px solid var(--brand-ink); border-block-end: 2px solid var(--brand-ink); rotate: -45deg; }

  /* "what does a website cost in …?": Moop + explainer on a butter panel */
  .price-explain { display: grid; gap: var(--s-5); align-items: center; padding: clamp(1.5rem, 4vw, 3rem); border-radius: var(--r-2xl); background: var(--tint-butter); box-shadow: inset 0 0 0 1px var(--card-line); }
  @media (min-width: 860px) { .price-explain { grid-template-columns: auto minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); } }
  .price-explain__buddy { display: grid; justify-items: center; gap: 0.4rem; }
  .price-explain__moop { --moop-size: clamp(110px, 12vw, 160px); }
  .price-explain__say { padding: 0.45rem 0.85rem; border-radius: 16px 16px 16px 4px; background: var(--surface); box-shadow: var(--shadow-1); font-size: 0.88rem; font-weight: 600; white-space: nowrap; rotate: -3deg; }
  .price-explain__copy { display: grid; gap: var(--s-3); max-inline-size: 46rem; }
  .price-explain__copy .price-h2 { margin-block-end: var(--s-1); }
  .price-explain__copy p { color: var(--text-muted); line-height: 1.65; }
  .price-explain__copy a { color: var(--brand-ink); font-weight: 600; }
  .price-explain__h3 { margin-block-start: var(--s-2); font-family: var(--font-display); font-size: var(--step-1); font-weight: 700; line-height: 1.2; }
  .price-city__title span { color: var(--text-muted); font-family: var(--font-body); font-size: 0.75em; font-weight: 500; }
  @media (max-width: 859.98px) { .price-explain__buddy { grid-auto-flow: column; justify-content: start; align-items: end; } .price-explain__moop { --moop-size: 88px; } }

  .price-cities { display: grid; gap: clamp(0.9rem, 2vw, 1.25rem); margin: var(--s-5) 0 0; padding: 0; list-style: none; }
  @media (min-width: 760px) { .price-cities { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .price-city { display: flex; flex-direction: column; gap: 0.5rem; padding: clamp(1.4rem, 3vw, 1.9rem); border-radius: var(--r-xl); box-shadow: inset 0 0 0 1px var(--card-line); }
  .price-city--butter { background: var(--tint-butter); }
  .price-city--pink { background: var(--tint-pink); }
  .price-city--sky { background: var(--tint-sky); }
  .price-city__title { font-family: var(--font-display); font-size: var(--step-1); font-weight: 700; line-height: 1.15; }
  .price-city__text { color: var(--text-muted); font-size: 0.94rem; line-height: 1.55; }
  .price-city__link { margin-block-start: auto; padding-block-start: var(--s-2); color: var(--brand-ink); font-size: 0.8rem; font-weight: 600; text-decoration: none; }
  .price-city__link:hover { text-decoration: underline; text-underline-offset: 3px; }

  /* ---------- About ---------- */
  .about-story { display: grid; gap: var(--s-5); }
  /* Title on its own row (one line on desktop), then photo + copy side by side */
  .about-story__row { display: grid; gap: var(--s-5); }
  @media (min-width: 960px) {
    .about-story { gap: var(--s-6); }
    .about-story__title { white-space: nowrap; }
    .about-story__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
  }
  .about-story__title { font-family: var(--font-display); font-size: clamp(2rem, 1.4rem + 2.2vw, 3.2rem); font-weight: 700; line-height: 1.04; letter-spacing: -0.03em; font-variation-settings: "SOFT" 100; }
  .about-story__title em { color: var(--brand-ink); font-variation-settings: "SOFT" 100, "WONK" 1; }
  .about-photo { margin: 0; display: grid; gap: 0.6rem; }
  .about-photo img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--r-2xl); background: var(--tint-butter); box-shadow: var(--shadow-2); }
  .about-photo figcaption { font-size: 0.74rem; color: var(--text-muted); }
  .about-story__copy { display: grid; gap: var(--s-4); font-size: var(--step-0); line-height: 1.7; color: var(--text-muted); max-inline-size: 40rem; }

  .team { display: grid; gap: clamp(0.9rem, 2vw, 1.25rem); margin: var(--s-5) 0 0; padding: 0; list-style: none; }
  @media (min-width: 760px) { .team { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .member { display: flex; flex-direction: column; gap: 0.45rem; padding: clamp(1.5rem, 3vw, 2.1rem); border-radius: var(--r-xl); box-shadow: inset 0 0 0 1px var(--card-line); }
  .member--butter { background: var(--tint-butter); --face: var(--butter); }
  .member--pink { background: var(--tint-pink); --face: var(--blush-deep); }
  .member--sky { background: var(--tint-sky); --face: var(--sky); }
  .member__face { display: grid; place-items: center; overflow: hidden; inline-size: clamp(88px, 9vw, 112px); aspect-ratio: 1; margin-block-end: var(--s-3); border-radius: 50%; background: var(--face); box-shadow: 0 0 0 4px var(--surface), var(--shadow-2); }
  .member__face img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: top; }
  .member__face .moop { --moop-size: 64%; margin-block-start: 14%; }
  .member__name { font-family: var(--font-display); font-size: var(--step-2); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; font-variation-settings: "SOFT" 100; }
  .member__role { color: var(--brand-ink); font-size: 0.76rem; font-weight: 600; }
  .member__bio { margin-block-start: var(--s-2); color: var(--text-muted); line-height: 1.6; }
  .member__links { display: flex; gap: 0.9rem; margin-block-start: auto; padding-block-start: var(--s-3); font-size: 0.86rem; font-weight: 600; }
  .member__links a { color: var(--brand-ink); text-decoration: none; }
  .member__links a:hover { text-decoration: underline; text-underline-offset: 3px; }

  .ways--four { margin-block-start: var(--s-5); }
  @media (min-width: 760px) { .ways--four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 1100px) { .ways--four { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  .way--sage { background: var(--tint-olive); --chip: var(--sage); }

  /* "how we work" as a manifesto: outlined numerals, highlighter swipes, dashed rules */
  .manifesto { margin: var(--s-5) 0 0; padding: 0; list-style: none; border-block-start: 2px dashed var(--line-strong); }
  .manifesto__item {
    --hl: var(--tint-butter);
    --hl-ink: var(--butter);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: clamp(1rem, 3vw, 2.5rem);
    row-gap: 0.4rem;
    align-items: baseline;
    padding-block: clamp(1.4rem, 3.5vw, 2.4rem);
    border-block-end: 2px dashed var(--line-strong);
  }
  .manifesto__item--pink { --hl: var(--tint-pink); --hl-ink: var(--blush-deep); }
  .manifesto__item--sky { --hl: var(--tint-sky); --hl-ink: var(--sky); }
  .manifesto__item--sage { --hl: var(--tint-olive); --hl-ink: var(--sage); }
  @media (min-width: 900px) {
    .manifesto__item { grid-template-columns: 7.5rem minmax(0, 1.4fr) minmax(0, 1fr); }
    .manifesto__text { grid-column: 3; }
  }
  .manifesto__no {
    grid-row: span 2;
    font-family: var(--font-display);
    font-size: clamp(3rem, 2rem + 4vw, 5.5rem);
    font-weight: 800;
    line-height: 0.85;
    letter-spacing: -0.04em;
    color: transparent;
    -webkit-text-stroke: 2px var(--text);
    font-variation-settings: "SOFT" 100;
    transition: color var(--dur-3), transform var(--dur-4) var(--ease-spring);
  }
  @media (min-width: 900px) { .manifesto__no { grid-row: auto; } }
  .manifesto__item:hover .manifesto__no { color: var(--hl-ink); transform: rotate(-6deg) scale(1.04); }
  .manifesto__title { font-family: var(--font-display); font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem); font-weight: 700; line-height: 1.12; letter-spacing: -0.025em; text-wrap: balance; font-variation-settings: "SOFT" 100; }
  .manifesto__hl { position: relative; isolation: isolate; white-space: nowrap; }
  .manifesto__hl::before {
    content: "";
    position: absolute;
    inset: 42% -0.12em 4% -0.12em;
    z-index: -1;
    background: var(--hl-ink);
    border-radius: 0.12em 0.3em 0.16em 0.34em / 0.3em 0.14em 0.32em 0.16em;
    rotate: -1.5deg;
    transform-origin: left center;
    transition: scale var(--dur-4) var(--ease-spring);
  }
  .manifesto__item:hover .manifesto__hl::before { scale: 1.04 1.15; }
  .manifesto__text { color: var(--text-muted); line-height: 1.6; max-inline-size: 30rem; }
  [data-theme="dark"] .manifesto__hl { color: var(--ink); }
  [data-theme="dark"] .manifesto__hl::before { background: var(--hl-ink); }
  @media (prefers-reduced-motion: reduce) { .manifesto__item:hover .manifesto__no { transform: none; } .manifesto__item:hover .manifesto__hl::before { scale: none; } }

  /* "work we're proud of" as a pinboard of taped polaroids */
  .pinboard {
    position: relative;
    margin-block-start: var(--s-5);
    padding: clamp(1.75rem, 4vw, 3.25rem) clamp(1rem, 3vw, 2.5rem) clamp(1.25rem, 3vw, 2rem);
    border-radius: var(--r-2xl);
    background:
      radial-gradient(color-mix(in oklab, var(--accent-ink) 22%, transparent) 1.2px, transparent 1.6px) 0 0 / 18px 18px,
      var(--tint-pink);
    box-shadow: inset 0 0 0 1px var(--card-line);
  }
  .pinboard__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2rem); margin: 0; padding: 0; list-style: none; }
  .polaroid { --tilt: -3deg; --lift: 0px; }
  .polaroid:nth-child(4n+2) { --tilt: 2.5deg; --lift: 1.5rem; }
  .polaroid:nth-child(4n+3) { --tilt: -1.5deg; --lift: 0.5rem; }
  .polaroid:nth-child(4n+4) { --tilt: 3.5deg; --lift: 2rem; }
  .polaroid__link {
    position: relative;
    display: grid;
    gap: 0.7rem;
    padding: 0.65rem 0.65rem 1rem;
    background: var(--surface);
    box-shadow: 0 1px 2px rgb(var(--shadow-rgb) / 0.12), 0 14px 30px -10px rgb(var(--shadow-rgb) / 0.35);
    text-decoration: none;
    transform: translateY(var(--lift)) rotate(var(--tilt));
    transition: transform var(--dur-4) var(--ease-spring), box-shadow var(--dur-3);
  }
  .polaroid__link:hover, .polaroid__link:focus-visible { transform: translateY(calc(var(--lift) - 8px)) rotate(0deg) scale(1.04); box-shadow: 0 2px 4px rgb(var(--shadow-rgb) / 0.12), 0 26px 50px -14px rgb(var(--shadow-rgb) / 0.45); z-index: 2; }
  .polaroid__tape { position: absolute; inset-block-start: -0.7rem; inset-inline-start: 50%; inline-size: 4.5rem; block-size: 1.4rem; translate: -50% 0; rotate: -4deg; background: color-mix(in oklab, var(--tape, var(--butter)) 80%, transparent); box-shadow: 0 1px 2px rgb(var(--shadow-rgb) / 0.15); }
  .polaroid--pink { --tape: var(--blush-deep); }
  .polaroid--butter { --tape: var(--butter); }
  .polaroid--sky { --tape: var(--sky); }
  .polaroid--sage { --tape: #C9DDA4; }
  .polaroid__img { inline-size: 100%; block-size: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: top; border-radius: 2px; box-shadow: none; }
  .polaroid__caption { display: grid; gap: 0.15rem; padding-inline: 0.2rem; text-align: center; }
  .polaroid__name { font-family: var(--font-display); font-size: 1.25rem; font-style: italic; font-weight: 600; line-height: 1.1; font-variation-settings: "SOFT" 100, "WONK" 1; }
  .polaroid__meta { color: var(--text-muted); font-size: 0.68rem; }
  .pinboard__all { display: inline-block; margin-block-start: clamp(2.25rem, 4vw, 3rem); color: var(--brand-ink); font-size: 0.82rem; font-weight: 600; text-decoration: none; }
  .pinboard__all:hover { text-decoration: underline; text-underline-offset: 3px; }
  /* tablet: two by two; phones: swipe strip */
  @media (max-width: 899.98px) { .pinboard__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.5rem; } .polaroid:nth-child(n) { --lift: 0px; } }
  @media (max-width: 559.98px) {
    .pinboard { padding-inline: 0; }
    .pinboard__list { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: 1rem 1.25rem 1.5rem; scrollbar-width: none; }
    .pinboard__list::-webkit-scrollbar { display: none; }
    .polaroid { flex: 0 0 72%; scroll-snap-align: center; }
    .pinboard__all { margin-inline-start: 1.25rem; margin-block-start: 0.5rem; }
  }
  @media (prefers-reduced-motion: reduce) { .polaroid__link, .polaroid__link:hover { transform: none; } }

  /* "the business": dark forest band, pastel fact tiles, a Moop */
  .biz-band {
    --text: #FBF7EC; --text-muted: #D6D3C1; --brand-ink: #CFE38F;
    position: relative;
    overflow: hidden;
    display: grid;
    gap: clamp(1.5rem, 4vw, 3rem);
    padding: clamp(1.75rem, 5vw, 3.75rem);
    border-radius: var(--r-2xl);
    background:
      radial-gradient(rgb(251 247 236 / 0.07) 1px, transparent 1.4px) 0 0 / 20px 20px,
      #1F2D19;
    color: var(--text);
  }
  @media (min-width: 900px) { .biz-band { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; } }
  .biz-band__intro { position: relative; display: grid; gap: var(--s-3); align-content: start; }
  .biz-band__kicker { justify-self: start; padding: 0.2rem 0.7rem; border-radius: var(--r-pill); background: rgb(251 247 236 / 0.1); color: var(--text-muted); font-size: 0.72rem; }
  .biz-band__title { font-family: var(--font-display); font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3rem); font-weight: 700; line-height: 1.05; letter-spacing: -0.03em; font-variation-settings: "SOFT" 100; }
  .biz-band__title em { color: var(--brand-ink); font-variation-settings: "SOFT" 100, "WONK" 1; }
  .biz-band__text { color: var(--text-muted); line-height: 1.65; max-inline-size: 30rem; }
  .biz-band__moop { --moop-size: clamp(84px, 9vw, 120px); margin-block-start: var(--s-3); }
  @media (max-width: 899.98px) { .biz-band__moop { position: absolute; inset-block-start: 0; inset-inline-end: 0; margin: 0; --moop-size: 64px; } .biz-band__title { padding-inline-end: 4.5rem; } }

  .biz-facts { display: grid; gap: 0.7rem; margin: 0; padding: 0; list-style: none; }
  @media (min-width: 560px) { .biz-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .biz-fact {
    --text: var(--ink); --text-muted: #57534A;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1.15rem 1.25rem;
    border-radius: var(--r-lg);
    color: var(--ink);
    transition: transform var(--dur-3) var(--ease-spring);
  }
  .biz-fact:hover { transform: translateY(-3px) rotate(-0.6deg); }
  .biz-fact--butter { background: var(--butter); }
  .biz-fact--pink { background: var(--blush); }
  .biz-fact--sky { background: var(--sky); }
  .biz-fact--sage { background: var(--sage); }
  .biz-fact__label { color: #57534A; font-size: 0.68rem; }
  .biz-fact__value { font-family: var(--font-display); font-size: 1.12rem; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
  .biz-fact__link { margin-block-start: auto; padding-block-start: 0.4rem; color: #2C4425; font-size: 0.74rem; font-weight: 700; text-decoration: none; }
  .biz-fact__link:hover { text-decoration: underline; text-underline-offset: 3px; }
  @media (prefers-reduced-motion: reduce) { .biz-fact:hover { transform: none; } }


  /* simple city cards (guides index) */
  .guide-cities__title { margin-block-end: var(--s-4); font-family: var(--font-display); font-size: var(--step-2); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; font-variation-settings: "SOFT" 100; }
  .guide-cities__title em { color: var(--brand-ink); }
  .guide-cities { display: grid; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
  @media (min-width: 640px) { .guide-cities { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .guide-city { position: relative; display: grid; gap: 0.25rem; padding: 1.1rem 3rem 1.1rem 1.25rem; border-radius: var(--r-lg); box-shadow: inset 0 0 0 1px var(--card-line); text-decoration: none; transition: transform var(--dur-3) var(--ease-spring); }
  .guide-city:hover { transform: translateY(-3px); }
  .guide-city--butter { background: var(--tint-butter); }
  .guide-city--pink { background: var(--tint-pink); }
  .guide-city--sky { background: var(--tint-sky); }
  .guide-city__name { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; line-height: 1.15; }
  .guide-city__name span { color: var(--text-muted); font-family: var(--font-body); font-size: 0.75em; font-weight: 500; }
  .guide-city__note { color: var(--text-muted); font-size: 0.86rem; }
  .guide-city__go { position: absolute; inset-block-start: 50%; inset-inline-end: 1.15rem; translate: 0 -50%; font-size: 1.1rem; transition: translate var(--dur-3) var(--ease-spring); }
  .guide-city:hover .guide-city__go { translate: 4px -50%; }
  @media (prefers-reduced-motion: reduce) { .guide-city:hover, .guide-city:hover .guide-city__go { transform: none; translate: 0 -50%; } }
  @media (max-width: 640px) { .guide-filter { border-radius: var(--r-lg); } }

  /* Guide cards */
  .guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: var(--s-5); }
  .guide-grid--list { margin-block-start: var(--s-6); }
  @media (min-width: 1040px) { .guide-grid--list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .guide-card {
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr;
    overflow: hidden;
    border-radius: var(--r-xl);
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--card-line), var(--shadow-1);
    transition: transform var(--dur-3) var(--ease-spring), box-shadow var(--dur-2);
  }
  .guide-card:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--card-line), var(--shadow-2); }
  .guide-card:focus-within { outline: 3px solid var(--accent-ink); outline-offset: 3px; }
  .guide-card__media { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: var(--tint-olive); }
  .guide-card__media picture, .guide-card__img { display: block; inline-size: 100%; block-size: 100%; }
  .guide-card__img { object-fit: cover; transition: scale var(--dur-4) var(--ease-out); }
  .guide-card:hover .guide-card__img { scale: 1.04; }
  .guide-card__placeholder { display: grid; place-items: center; block-size: 100%; --moop-size: 72px; background: radial-gradient(color-mix(in oklab, var(--brand) 22%, transparent) 1.2px, transparent 1.6px) 0 0 / 16px 16px, var(--tint-olive); }
  .guide-card__cat, .guide-card__time { position: absolute; inset-block-start: 0.75rem; padding: 0.22rem 0.65rem; border-radius: var(--r-pill); font-size: 0.68rem; font-weight: 600; box-shadow: var(--shadow-1); }
  .guide-card__cat { inset-inline-start: 0.75rem; background: var(--butter); color: var(--ink); }
  .guide-card__time { inset-inline-end: 0.75rem; background: var(--surface); color: var(--text); }
  .guide-card__body { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-5); }
  .guide-card__kicker { justify-self: start; inline-size: fit-content; padding: 0.15rem 0.6rem; border-radius: var(--r-pill); background: var(--tint-pink); font-size: 0.68rem; font-weight: 600; }
  .guide-card__meta { color: var(--text-muted); font-size: 0.74rem; }
  .guide-card__title { font-family: var(--font-display); font-size: var(--step-1); font-weight: 700; line-height: 1.18; letter-spacing: -0.015em; text-wrap: balance; font-variation-settings: "SOFT" 100; }
  .guide-card__title a { text-decoration: none; }
  .guide-card__title a::after { content: ""; position: absolute; inset: 0; } /* whole card clickable */
  .guide-card__title a:focus-visible { outline: none; }
  .guide-card__text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; color: var(--text-muted); font-size: 0.92rem; line-height: 1.55; }
  .guide-card__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-block-start: auto; padding-block-start: var(--s-3); border-block-start: 1px dashed var(--line); }
  .guide-card__author { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; font-weight: 600; }
  .guide-card__avatar { flex: none; inline-size: 2rem; block-size: 2rem; overflow: hidden; border-radius: 50%; box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--line-strong); }
  .guide-card__avatar img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: top; }
  .guide-card__more { margin-inline-start: auto; color: var(--brand-ink); font-size: 0.78rem; font-weight: 600; transition: translate var(--dur-3) var(--ease-spring); }
  .guide-card:hover .guide-card__more { translate: 4px 0; }

  /* Featured (newest) guide: image beside the copy */
  .guide-card--featured { border-radius: var(--r-2xl); box-shadow: inset 0 0 0 1px var(--card-line), var(--shadow-2); }
  @media (min-width: 900px) {
    .guide-card--featured { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: none; }
    .guide-card--featured .guide-card__media { aspect-ratio: auto; min-block-size: 22rem; }
    .guide-card--featured .guide-card__body { justify-content: center; gap: var(--s-3); padding: clamp(1.75rem, 3.5vw, 3rem); }
  }
  .guide-card--featured .guide-card__title { font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.4rem); line-height: 1.08; }
  .guide-card--featured .guide-card__text { -webkit-line-clamp: 4; font-size: var(--step-0); }
  .guide-card--featured .guide-card__cat, .guide-card--featured .guide-card__time { inset-block-start: 1rem; font-size: 0.72rem; }
  .guide-card--featured .guide-card__cat { inset-inline-start: 1rem; }
  .guide-card--featured .guide-card__time { inset-inline-end: 1rem; }

  /* Guide page top panel: copy + cover in a tilted frame */
  /* Compact: title, intro, byline and cover fit in one laptop screen with the first lines of the body below */
  /* The top panel sits on its own pale band (rounded at the bottom), so the article clearly starts below it */
  .guide-hero {
    padding-block: 6.5rem clamp(1.75rem, 3.5vw, 2.75rem);
    margin-inline: clamp(0px, 1.5vw, 1.25rem);
    border-end-start-radius: clamp(24px, 4vw, 48px);
    border-end-end-radius: clamp(24px, 4vw, 48px);
    background: var(--tint-olive);
  }
  .guide-hero__tags > *:not(.guide-hero__cat) { background: var(--surface); }
  .guide-hero__grid { display: grid; gap: clamp(1.25rem, 3vw, 2.5rem); align-items: center; }
  .guide-hero:not(.guide-hero--cover) .guide-hero__grid { max-inline-size: 52rem; }
  @media (min-width: 960px) { .guide-hero--cover .guide-hero__grid { grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.8fr); } }
  .guide-hero .crumbs { margin-block-end: var(--s-2); font-size: 0.78rem; }
  .guide-hero__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-block-end: var(--s-2); font-size: 0.7rem; }
  .guide-hero__tags > * { padding: 0.22rem 0.7rem; border-radius: var(--r-pill); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); }
  .guide-hero__tags .guide-hero__cat { background: var(--butter); color: var(--ink); box-shadow: none; font-weight: 600; text-decoration: none; }
  .guide-hero__tags .guide-hero__cat:hover { background: var(--btn-bg); color: var(--btn-fg); }
  .guide__title { max-inline-size: 30ch; font-size: clamp(1.7rem, 1.25rem + 1.6vw, 2.6rem); line-height: 1.08; text-wrap: balance; }
  .guide-hero__lede { margin-block-start: var(--s-3); font-size: var(--step-0); line-height: 1.55; max-inline-size: 44rem; }
  .guide-hero__byline { display: flex; align-items: center; gap: 0.7rem; margin-block-start: var(--s-4); }
  .guide-hero__avatar { flex: none; inline-size: 2.5rem; block-size: 2.5rem; overflow: hidden; border-radius: 50%; box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px var(--line-strong); }
  .guide-hero__avatar img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: top; }
  .guide__byline { display: grid; gap: 0.05rem; margin: 0; font-size: 0.86rem; }
  .guide-hero__who { font-weight: 600; }
  .guide-hero__who a { color: var(--brand-ink); }
  .guide-hero__role { color: var(--text-muted); font-weight: 400; }
  .guide-hero__when { color: var(--text-muted); font-size: 0.76rem; }
  .guide-hero__media { position: relative; margin: 0; }
  .guide-hero__media::before { content: ""; position: absolute; inset: 0; border-radius: var(--r-2xl); background: var(--tint-butter); rotate: 3deg; translate: 10px 10px; }
  .guide-hero__img { position: relative; display: block; inline-size: 100%; block-size: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--r-xl); box-shadow: var(--shadow-2); rotate: -1.2deg; }
  .guide-hero__media::before { border-radius: var(--r-xl); translate: 7px 7px; }
  @media (min-width: 960px) { .guide-hero__media { max-inline-size: 26rem; justify-self: end; } }
  @media (max-width: 959.98px) { .guide-hero__media { max-inline-size: 34rem; } }
  /* the body starts close under the panel */
  .guide-hero + .guide__layout { padding-block-start: clamp(2.25rem, 4.5vw, 3.5rem); }
  @media (prefers-reduced-motion: reduce) {
    .guide-hero__img, .guide-hero__media::before { rotate: none; }
    .guide-card:hover, .guide-card:hover .guide-card__img, .guide-card:hover .guide-card__more { transform: none; scale: none; translate: none; }
  }
  .guide__layout { display: grid; gap: var(--s-6); padding-block: var(--section-pad); justify-content: center; }
  /* "On this page": a quiet sidebar on the right (desktop), clearly navigation, not content */
  @media (min-width: 1100px) {
    .guide__layout:has(.guide__toc) { grid-template-columns: minmax(0, 68ch) 15rem; column-gap: clamp(2.5rem, 5vw, 4.5rem); }
    .guide__toc { order: 2; position: sticky; inset-block-start: 7rem; align-self: start; max-block-size: calc(100vh - 9rem); overflow-y: auto; }
  }
  .guide__toc { font-size: 0.84rem; }
  .guide__toc-title { margin-block-end: var(--s-3); color: var(--text-muted); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; }
  .guide__toc ol { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-inline-start: 2px solid var(--line); }
  .guide__toc li { position: relative; }
  .guide__toc li.is-sub a { padding-inline-start: 1.6rem; font-size: 0.78rem; }
  .guide__toc a { display: block; padding: 0.35rem 0 0.35rem 0.9rem; color: var(--text-muted); line-height: 1.4; text-decoration: none; transition: color var(--dur-2); }
  .guide__toc a::before { content: ""; position: absolute; inset-block: 0.25rem; inset-inline-start: -2px; inline-size: 2px; border-radius: 2px; background: transparent; transition: background-color var(--dur-2); }
  .guide__toc a:hover { color: var(--text); }
  .guide__toc a.is-current { color: var(--text); font-weight: 600; }
  .guide__toc a.is-current::before { background: var(--brand); }
  /* below desktop it sits above the article as a light, collapsible-looking box */
  @media (max-width: 1099.98px) { .guide__toc { padding: var(--s-4) var(--s-5); border-radius: var(--r-lg); box-shadow: inset 0 0 0 1px var(--card-line); } }
  .guide__body :is(h2, h3) { scroll-margin-block-start: 110px; }
  .guide__body img { border-radius: var(--r-lg); }
  .guide__body table { inline-size: 100%; border-collapse: collapse; font-size: var(--step--1); }
  .guide__body :is(th, td) { padding: 0.6rem 0.75rem; border-block-end: 1px solid var(--line); text-align: start; vertical-align: top; }
  .guide__body th { background: var(--surface-2); }

  /* Author card: portrait with an offset brand frame, then name, role pill, bio and link chips.
     Stacks on phones, side by side from 640px. */
  .author-box {
    position: relative;
    display: grid;
    gap: var(--s-5);
    margin-block-end: var(--section-pad);
    padding: clamp(1.25rem, 4vw, 2.25rem);
    border-radius: var(--r-xl);
    background: var(--tint-olive);
    box-shadow: inset 0 0 0 1px var(--card-line);
    overflow: hidden;
  }
  .author-box::after { /* soft butter blob in the corner */
    content: ""; position: absolute; z-index: 0; inset-block-start: -40px; inset-inline-end: -40px;
    inline-size: 160px; aspect-ratio: 1; border-radius: 50%; background: var(--butter); opacity: 0.45; pointer-events: none;
  }
  .author-box > * { position: relative; z-index: 1; }
  @media (min-width: 640px) { .author-box { grid-template-columns: auto 1fr; gap: var(--s-6); align-items: center; } }

  .author-box__media { justify-self: start; }
  .author-box__media picture { inline-size: clamp(112px, 22vw, 156px); }
  .author-box__photo {
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 1;               /* square crop whatever the upload's shape */
    object-fit: cover;
    object-position: 50% 20%;      /* keep faces in frame */
    border-radius: var(--r-lg);
    border: 3px solid var(--surface);
    box-shadow: 8px 8px 0 var(--brand-ink);
    rotate: -2deg;
    transition: rotate var(--dur-3) var(--ease-spring), box-shadow var(--dur-3) var(--ease-spring);
  }
  .author-box:hover .author-box__photo { rotate: 0deg; box-shadow: 4px 4px 0 var(--brand-ink); }
  .author-box__moop { --moop-size: 96px; }

  .author-box__body { display: grid; gap: 0.35rem; justify-items: start; min-inline-size: 0; }
  .author-box__label {
    padding: 0.2rem 0.6rem; border-radius: var(--r-pill);
    background: var(--surface); color: var(--text-muted);
    font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase;
  }
  .author-box__name { font-family: var(--font-display); font-size: var(--step-3); font-weight: 750; line-height: 1.05; letter-spacing: -0.02em; font-variation-settings: "SOFT" 100; }
  .author-box__role { padding: 0.15rem 0.6rem; border-radius: var(--r-pill); background: var(--brand-ink); color: var(--surface); font-size: 0.72rem; }
  .author-box__bio { margin-block-start: var(--s-2); max-inline-size: 60ch; line-height: 1.6; }
  .author-box__links { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block-start: var(--s-2); }
  .author-box__link {
    display: inline-flex; align-items: center; padding: 0.35rem 0.85rem; border-radius: var(--r-pill);
    background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong);
    font-size: var(--step--1); font-weight: 500; text-decoration: none;
    transition: transform var(--dur-2) var(--ease-spring), box-shadow var(--dur-2);
  }
  .author-box__link:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1.5px var(--text); }

  .empty-state { display: flex; gap: var(--s-5); align-items: center; }
  .empty-state__moop { --moop-size: 90px; flex: none; }

  .pager { display: flex; align-items: center; justify-content: center; gap: var(--s-4); margin-block-start: var(--s-7); }
  .pager__status { color: var(--text-muted); font-size: 0.82rem; }
  .btn.is-disabled { opacity: 0.4; pointer-events: none; }

  /* ---------- Case studies ---------- */
  .shot { display: block; inline-size: 100%; block-size: auto; border-radius: var(--r-lg); box-shadow: var(--shadow-2); background: var(--surface-2); }
  .shot--mobile { border-radius: 28px; box-shadow: 0 0 0 6px var(--ink), var(--shadow-3); }
  [data-theme="dark"] .shot--mobile { box-shadow: 0 0 0 6px #2E3A25, var(--shadow-3); }

  .cs-hero { padding-block-end: 0; }
  .cs-hero__client { color: var(--brand-ink); margin-block-end: var(--s-2); }
  .cs-hero__title { max-inline-size: 22ch; font-size: var(--step-4); }
  .cs-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--s-3); margin-block-start: var(--s-6); max-inline-size: 60rem; }
  .cs-facts div { padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--surface); box-shadow: inset 0 0 0 1px var(--card-line); }
  .cs-facts dt { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-muted); }
  .cs-facts dd { margin: 0; font-weight: 600; }

  /* Desktop screenshot with the phone overlapping its corner */
  .cs-devices { position: relative; margin-block: var(--s-7) 0; padding-inline-end: clamp(0rem, 8vw, 7rem); }
  .cs-devices__phone { position: absolute; inset-inline-end: 0; inset-block-end: -2rem; inline-size: clamp(110px, 18vw, 240px); }

  .cs-label { color: var(--text-muted); font-size: 0.78rem; margin-block-end: var(--s-3); }
  .cs-brief { padding-block-start: var(--s-7); }
  .cs-brief p:not(.cs-label) { font-size: var(--step-1); }

  .cs-feature__grid { display: grid; gap: var(--s-6); align-items: center; }
  @media (min-width: 960px) {
    .cs-feature__grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
    .cs-feature--flip .cs-feature__media { order: -1; }
    .cs-feature--flip .cs-feature__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
  }
  .cs-feature__title { font-size: var(--step-3); }
  .cs-feature__copy { display: grid; gap: var(--s-4); }
  .cs-feature__media--phone { justify-self: center; inline-size: min(100%, 320px); }

  .cs-outcome { display: grid; gap: var(--s-6); align-items: center; }
  @media (min-width: 900px) { .cs-outcome { grid-template-columns: 1fr 1.2fr; } }
  .cs-results { padding: var(--s-6); border-radius: var(--r-xl); background: var(--tint-olive); }
  .cs-quote { margin: 0; }
  .cs-stack { margin-block: var(--s-2) var(--s-4); }
  .cs-note { color: var(--text-muted); font-size: var(--step--1); }

  .cs-grid { display: grid; gap: var(--s-6); list-style: none; padding: 0; }
  @media (min-width: 900px) { .cs-grid { grid-template-columns: 1fr 1fr; } }
  .cs-card { display: grid; block-size: 100%; overflow: hidden; border-radius: var(--r-2xl); text-decoration: none; box-shadow: inset 0 0 0 1px var(--card-line); transition: transform var(--dur-3) var(--ease-spring); }
  .cs-card:hover { transform: translateY(-4px); }
  .cs-card--pink { background: var(--tint-pink); }
  .cs-card--butter { background: var(--tint-butter); }
  .cs-card--sky { background: var(--tint-sky); }
  .cs-card--sage { background: var(--tint-olive); }
  .cs-card__media { padding: var(--s-5) var(--s-5) 0; }
  .cs-card__media .shot { border-radius: var(--r-md) var(--r-md) 0 0; }
  .cs-card__body { display: grid; gap: var(--s-2); padding: var(--s-5) var(--s-6) var(--s-6); background: var(--surface); }
  .cs-card__meta { color: var(--text-muted); font-size: 0.78rem; }
  .cs-card__title { font-family: var(--font-display); font-size: var(--step-3); font-weight: 700; line-height: 1.05; }
  .cs-card__text { color: var(--text-muted); }
  .cs-card__more { color: var(--brand-ink); font-size: 0.82rem; }

  /* ---------- Enquiry form additions (server-backed) ---------- */
  .hp-field { position: absolute; inset-inline-start: -10000px; inline-size: 1px; block-size: 1px; overflow: hidden; }
  .form__error { padding: 0.7rem 1rem; margin-block-end: var(--s-4); border-radius: var(--r-md); background: var(--tint-pink); color: var(--accent-ink); font-size: var(--step--1); font-weight: 600; }
  .field__hint--error { color: var(--accent-ink); }
  .field input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--accent-ink); }
  .form__textarea {
    inline-size: 100%;
    padding: 0.8rem 1.1rem;
    border: 0;
    border-radius: var(--r-md);
    background: var(--surface);
    box-shadow: inset 0 0 0 1.5px var(--line-strong);
    resize: vertical;
    font: inherit;
  }
  .form__textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--text), 0 0 0 5px color-mix(in oklab, var(--pink) 40%, transparent); }
  [data-theme="dark"] .form__textarea { background: var(--bg); box-shadow: inset 0 0 0 1.5px rgb(251 247 236 / 0.28); }
  .form.is-sending [data-submit] { opacity: 0.7; pointer-events: none; }
  .cf-turnstile { min-block-size: 65px; }

  /* Hero "built to work hard" card: real weeks-to-launch per project */
  a.stat-panel { display: block; text-decoration: none; color: inherit; }
  .launch-bars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3cqi; align-items: end; block-size: clamp(64px, 34cqi, 120px); margin-block: 2cqi 2.5cqi; list-style: none; padding: 0; }
  .launch-bars li { display: grid; grid-template-rows: 1fr auto auto; justify-items: center; block-size: 100%; font-size: clamp(0.56rem, 3.6cqi, 0.72rem); }
  .launch-bars i { align-self: end; inline-size: 70%; block-size: var(--h); min-block-size: 8px; border-radius: 6px 6px 2px 2px; background: linear-gradient(#5FB06F, #2E8B45); transition: transform var(--dur-3) var(--ease-spring); transform-origin: bottom; }
  .launch-bars li:hover i { transform: scaleY(1.06); }
  .launch-bars b { margin-block-start: 0.2em; }
  .launch-bars span { color: var(--text-muted); white-space: nowrap; }

  .cs-spotlight { display: grid; gap: var(--s-6); align-items: center; }
  @media (min-width: 960px) { .cs-spotlight { grid-template-columns: 1.1fr 0.9fr; } }


  /* ---------- Footer sitemap links ---------- */

  /* ---------- Breadcrumbs ---------- */
  .crumbs { margin-block-end: var(--s-5); color: var(--text-muted); }
  .crumbs ol { display: flex; flex-wrap: wrap; gap: 0.35rem; list-style: none; padding: 0; }
  .crumbs li:not(:last-child)::after { content: "/"; margin-inline-start: 0.35rem; opacity: 0.5; }
  .crumbs a { text-decoration: none; }
  .crumbs a:hover { color: var(--brand-ink); text-decoration: underline; text-underline-offset: 3px; }
  .crumbs [aria-current="page"] { color: var(--text); }

  /* ---------- Floating WhatsApp button ---------- */
  .wa-float {
    position: fixed;
    z-index: calc(var(--z-walker) + 1);
    inset-inline-end: max(1rem, env(safe-area-inset-right));
    inset-block-end: max(1.25rem, env(safe-area-inset-bottom));
    display: grid;
    place-items: center;
    inline-size: 52px;
    block-size: 52px;
    border-radius: 50%;
    background: #25D366;
    color: #0B2E17;
    text-decoration: none;
    box-shadow: var(--shadow-2);
    transition: transform var(--dur-3) var(--ease-spring);
  }
  .wa-float .icon { inline-size: 1.6rem; block-size: 1.6rem; }
  .wa-float:hover { transform: translateY(-3px); }
  .wa-float:active { transform: scale(1.05, 0.92); }

  /* ---------- Hand-built city pages (/locations, /locations/{city}) ---------- */
  .city--butter, .postcard--butter, .city-card--butter { --city-tint: var(--tint-butter); }
  .city--sky, .postcard--sky, .city-card--sky { --city-tint: var(--tint-sky); }
  .city--pink, .postcard--pink, .city-card--pink { --city-tint: var(--tint-pink); }

  /* Compact hero: title, facts and buttons fit above the fold on a laptop; copy column wider than the card */
  .city-hero { padding-block: 6.75rem clamp(1.5rem, 3vw, 2.5rem); }
  .city-hero__grid { display: grid; gap: clamp(1.5rem, 3.5vw, 3rem); align-items: center; }
  @media (min-width: 960px) { .city-hero__grid { grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.85fr); } }
  .city-hero .crumbs { margin-block-end: var(--s-3); }
  .city-hero__kicker { display: inline-block; margin-block-end: var(--s-2); padding: 0.2rem 0.7rem; border-radius: var(--r-pill); background: var(--tint-olive); color: var(--brand-ink); font-size: 0.74rem; }
  .city-hero__title { font-size: clamp(2.1rem, 1.4rem + 2.4vw, 3.5rem); line-height: 1.04; max-inline-size: 22ch; }
  .city-hero .page-hero__lede { margin-block-start: var(--s-3); font-size: var(--step-0); max-inline-size: 40rem; }
  .city-hero .hero-facts { margin-block-start: var(--s-3); }
  .city-hero .hero__ctas { margin-block-start: var(--s-4); }

  /* Postcard: dashed inner border, stamp, mini map */
  .postcard {
    position: relative;
    display: grid;
    gap: var(--s-4);
    padding: clamp(1.4rem, 3vw, 2.1rem);
    border-radius: var(--r-2xl);
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line), var(--shadow-3);
    rotate: 1.2deg;
  }
  .postcard::before { content: ""; position: absolute; inset: 10px; border: 2px dashed var(--line-strong); border-radius: calc(var(--r-2xl) - 10px); pointer-events: none; }
  .postcard > * { position: relative; }
  .postcard__top { display: flex; justify-content: space-between; align-items: start; gap: var(--s-4); }
  .postcard__hi { font-size: clamp(2.6rem, 1.9rem + 3vw, 4.4rem); font-weight: 700; line-height: 1.05; color: var(--brand-ink); }
  .postcard__name { margin-block-start: 0.2rem; color: var(--text-muted); font-size: 0.74rem; letter-spacing: 0.04em; }
  .postcard__stamp {
    flex: none;
    display: grid;
    place-items: center;
    inline-size: 5.4rem;
    block-size: 5.4rem;
    padding: 0.6rem;
    border-radius: 50%;
    background: var(--city-tint, var(--tint-butter));
    box-shadow: inset 0 0 0 2px var(--surface), inset 0 0 0 4px var(--line-strong);
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    rotate: -12deg;
  }
  .postcard__map {
    position: relative;
    aspect-ratio: 2 / 1;
    border-radius: var(--r-lg);
    background:
      radial-gradient(color-mix(in oklab, var(--brand) 22%, transparent) 1.2px, transparent 1.6px) 0 0 / 16px 16px,
      var(--tint-olive);
  }
  .postcard__map .pin { pointer-events: none; }
  /* Hero postcard: tighter so it never outgrows the copy beside it */
  @media (min-width: 960px) {
    .city-hero .postcard { gap: var(--s-3); padding: 1.35rem 1.5rem; }
    .city-hero .postcard__hi { font-size: clamp(2rem, 1.2rem + 1.8vw, 2.9rem); }
    .city-hero .postcard__stamp { inline-size: 4.4rem; block-size: 4.4rem; font-size: 0.6rem; }
    .city-hero .postcard__note { font-size: 0.9rem; line-height: 1.5; }
    .city-hero .postcard__facts dd { font-size: 0.86rem; }
    .city-hero .postcard__addr { font-size: 0.84rem; }
  }
  .postcard__note { color: var(--text-muted); }
  .postcard__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
  .postcard__facts div { padding: 0.65rem 0.8rem; border-radius: var(--r-md); background: var(--surface-2); }
  .postcard__facts dt { font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-muted); }
  .postcard__facts dd { margin: 0; font-weight: 600; font-size: 0.92rem; }
  .postcard__addr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.6rem; font-size: 0.92rem; }
  .postcard__addr .mono { padding: 0.1rem 0.5rem; border-radius: var(--r-pill); background: var(--city-tint, var(--tint-butter)); font-size: 0.68rem; }
  .postcard__addr a { color: var(--brand-ink); font-weight: 600; }

  /* Numbers */
  .city-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); margin: 0; padding: 0; list-style: none; }
  @media (min-width: 900px) { .city-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); } }
  .city-stats__item { display: grid; align-content: start; gap: 0.35rem; padding: clamp(1rem, 2.5vw, 1.5rem); border-radius: var(--r-xl); box-shadow: inset 0 0 0 1px var(--card-line); }
  .city-stats__item--pink { background: var(--tint-pink); }
  .city-stats__item--butter { background: var(--tint-butter); }
  .city-stats__item--sky { background: var(--tint-sky); }
  .city-stats__item--sage { background: var(--tint-olive); }
  .city-stats__item b { font-family: var(--font-display); font-size: var(--step-3); font-weight: 800; line-height: 1; letter-spacing: -0.03em; font-variation-settings: "SOFT" 100; }
  .city-stats__item span { font-size: 0.88rem; line-height: 1.4; }
  .city-stats__src { margin-block-start: var(--s-3); font-size: 0.72rem; text-align: end; }
  .city-stats__src a { color: var(--text-muted); }

  /* Story: prose + a side card */
  .city-story__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
  @media (min-width: 960px) {
    .city-story__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); }
    .visit-card { position: sticky; inset-block-start: 110px; }
  }
  .city-story .prose { max-inline-size: 64ch; }
  /* Visit card: a ticket. Tinted head (title + Moop), perforated tear line, steps, facts, buttons. */
  .visit-card {
    --vc-pad: clamp(1.15rem, 3vw, 1.6rem);
    --vc-notch: 11px;
    border-radius: var(--r-2xl);
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--card-line), var(--shadow-2);
  }
  .visit-card__head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    padding: var(--vc-pad) var(--vc-pad) calc(var(--vc-pad) + 0.25rem);
    border-start-start-radius: var(--r-2xl);
    border-start-end-radius: var(--r-2xl);
    background: var(--city-tint, var(--tint-butter));
  }
  .visit-card__photo { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 16 / 9; object-fit: cover; border-start-start-radius: var(--r-2xl); border-start-end-radius: var(--r-2xl); background: var(--city-tint, var(--tint-butter)); }
  .visit-card__photo + .visit-card__head { border-radius: 0; }
  /* tear line with a notch on each side */
  .visit-card__head::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-end: calc(var(--vc-notch) * -1);
    block-size: calc(var(--vc-notch) * 2);
    background:
      radial-gradient(circle at 0 50%, var(--bg) var(--vc-notch), transparent calc(var(--vc-notch) + 0.5px)) left / 50% 100% no-repeat,
      radial-gradient(circle at 100% 50%, var(--bg) var(--vc-notch), transparent calc(var(--vc-notch) + 0.5px)) right / 50% 100% no-repeat,
      linear-gradient(90deg, var(--line-strong) 50%, transparent 0) center / 12px 2px repeat-x;
    pointer-events: none;
  }
  .visit-card__tag { display: inline-block; margin-block-end: 0.45rem; padding: 0.18rem 0.6rem; border-radius: var(--r-pill); background: var(--surface); font-size: 0.7rem; }
  .visit-card__title { font-family: var(--font-display); font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.65rem); font-weight: 700; line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance; font-variation-settings: "SOFT" 100; }
  .visit-card__title em { color: var(--brand-ink); font-variation-settings: "SOFT" 100, "WONK" 1; }
  .visit-card__moop { --moop-size: clamp(52px, 8vw, 68px); align-self: end; margin-block-end: -0.35rem; }
  .visit-card__body { display: grid; gap: var(--s-5); padding: calc(var(--vc-pad) + 0.5rem) var(--vc-pad) var(--vc-pad); }

  /* steps joined by a dashed line */
  .visit-card__steps { position: relative; display: grid; gap: var(--s-4); margin: 0; padding: 0; list-style: none; counter-reset: step; }
  .visit-card__steps::before { content: ""; position: absolute; inset-block: 1rem; inset-inline-start: calc(1rem - 1px); border-inline-start: 2px dashed var(--line-strong); }
  .visit-card__steps li { position: relative; counter-increment: step; display: grid; grid-template-columns: 2rem minmax(0, 1fr); column-gap: 0.75rem; row-gap: 0.15rem; }
  .visit-card__steps li::before {
    content: counter(step);
    grid-row: span 2;
    display: grid;
    place-items: center;
    inline-size: 2rem;
    block-size: 2rem;
    border-radius: 50%;
    background: var(--city-tint, var(--tint-butter));
    box-shadow: 0 0 0 4px var(--surface);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 700;
  }
  .visit-card__steps b { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.5rem; padding-block-start: 0.2rem; font-weight: 700; line-height: 1.3; }
  .visit-card__when { padding: 0.08rem 0.5rem; border-radius: var(--r-pill); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--text-muted); font-size: 0.66rem; font-weight: 600; line-height: 1.5; white-space: nowrap; }
  .visit-card__steps span { color: var(--text-muted); font-size: 0.92rem; line-height: 1.5; }

  /* facts as label/value rows */
  .visit-card__facts { display: grid; margin: 0; border-radius: var(--r-lg); background: var(--surface-2); }
  .visit-card__facts div { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--s-3); padding: 0.7rem 0.95rem; }
  .visit-card__facts div + div { border-block-start: 1px dashed var(--line-strong); }
  .visit-card__facts dt { padding-block-start: 0.15rem; font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-muted); }
  .visit-card__facts dd { margin: 0; font-weight: 600; font-size: 0.92rem; line-height: 1.45; }
  .visit-card__ctas { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: 0.5rem; }
  .visit-card__ctas .btn { justify-content: center; }

  /* tablet: the card spans the page, so steps and facts sit side by side */
  @media (min-width: 640px) and (max-width: 959.98px) {
    .visit-card__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
    .visit-card__steps::before { inset-block: auto; inset-block-start: calc(1rem - 1px); inset-inline: 1rem; border-inline-start: 0; border-block-start: 2px dashed var(--line-strong); }
    .visit-card__steps li { grid-template-columns: none; row-gap: 0.4rem; }
    .visit-card__steps li::before { grid-row: auto; }
    .visit-card__facts { grid-template-columns: 1fr 1fr; }
    .visit-card__facts div + div { border-block-start: 0; border-inline-start: 1px dashed var(--line-strong); }
    /* four steps: two rows of two, so each column keeps room for its text */
    .visit-card__steps--four { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s-5); }
    .visit-card__steps--four::before { display: none; }
  }

  /* Neighbourhoods: a bento of numbered cards */
  .areas { display: grid; gap: var(--s-4); margin: 0; padding: 0; list-style: none; }
  @media (min-width: 700px) { .areas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 1040px) {
    .areas { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .area { grid-column: span 2; }
    .area:nth-child(-n+2) { grid-column: span 3; }
  }
  .area {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: clamp(1.25rem, 2.5vw, 1.75rem);
    border-radius: var(--r-xl);
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--card-line), var(--shadow-1);
    transition: transform var(--dur-3) var(--ease-spring);
  }
  .area:hover { transform: translateY(-3px) rotate(-0.4deg); }
  .area__no { display: grid; place-items: center; inline-size: 2.4rem; block-size: 2.4rem; border-radius: 50%; font-size: 0.8rem; font-weight: 700; }
  .area--pink .area__no { background: var(--tint-pink); }
  .area--butter .area__no { background: var(--tint-butter); }
  .area--sky .area__no { background: var(--tint-sky); }
  .area--sage .area__no { background: var(--tint-olive); }
  .area__name { font-family: var(--font-display); font-size: var(--step-2); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; font-variation-settings: "SOFT" 100; }
  .area__here { color: var(--text-muted); line-height: 1.55; }
  .area__label { margin-block-start: auto; padding-block-start: var(--s-2); color: var(--text-muted); font-size: 0.68rem; }
  .area__build { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; padding: 0; list-style: none; }
  .area__build li { padding: 0.25rem 0.65rem; border-radius: var(--r-pill); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); font-size: 0.82rem; font-weight: 500; }

  /* Dark "why this city" band */
  .city-ready__title { max-inline-size: 26ch; font-family: var(--font-display); font-size: clamp(1.8rem, 1.2rem + 2.6vw, 3.2rem); font-weight: 700; line-height: 1.08; letter-spacing: -0.03em; font-variation-settings: "SOFT" 100; }
  .city-ready__title em { color: var(--brand-ink); font-variation-settings: "SOFT" 100, "WONK" 1; }
  .city-ready__sub { margin-block-start: var(--s-4); max-inline-size: 52rem; color: var(--text-muted); font-size: var(--step-1); }
  .city-ready .hero__ctas { margin-block-start: var(--s-6); }
  .city-facts { display: grid; gap: var(--s-3); margin: var(--s-6) 0 0; padding: 0; list-style: none; }
  @media (min-width: 640px) { .city-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 1040px) { .city-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  .city-facts li { display: grid; align-content: start; gap: 0.35rem; padding: var(--s-5); border-radius: var(--r-xl); background: var(--surface); box-shadow: inset 0 0 0 1px var(--card-line); }
  .city-facts b { font-family: var(--font-display); font-size: var(--step-2); font-weight: 800; line-height: 1.05; color: var(--brand-ink); }
  .city-facts span { color: var(--text-muted); font-size: 0.92rem; line-height: 1.45; }
  .towns { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: var(--s-6) 0 0; padding: 0; list-style: none; }
  .towns li { padding: 0.5rem 1.05rem; border-radius: var(--r-pill); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; }

  /* Prices */
  .city-prices { display: grid; gap: var(--s-4); margin: 0; padding: 0; list-style: none; }
  @media (min-width: 640px) { .city-prices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 1040px) { .city-prices { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  .city-price {
    display: grid;
    gap: 0.4rem;
    block-size: 100%;
    padding: var(--s-5);
    border-radius: var(--r-xl);
    background: var(--tint-butter);
    box-shadow: inset 0 0 0 1px var(--card-line);
    text-decoration: none;
    transition: transform var(--dur-3) var(--ease-spring), box-shadow var(--dur-2);
  }
  /* faded theme pastels, one per card, plain (no pattern) */
  .city-prices li:nth-child(4n+2) .city-price { background: var(--tint-pink); }
  .city-prices li:nth-child(4n+3) .city-price { background: var(--tint-sky); }
  .city-prices li:nth-child(4n+4) .city-price { background: var(--tint-olive); }
  .city-price:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--card-line), var(--shadow-2); }
  .city-price__go { color: var(--brand-ink); }
  .city-price__name { color: var(--text-muted); font-size: 0.74rem; text-transform: lowercase; }
  .city-price__amount { font-family: var(--font-display); font-size: var(--step-3); font-weight: 800; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
  .city-price__amount small { display: block; margin-block-end: 0.2rem; font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0; color: var(--text-muted); }
  .city-price__time { color: var(--text-muted); font-size: 0.9rem; }
  .city-price__go { margin-block-start: var(--s-2); font-size: 0.74rem; font-weight: 600; }

  /* Other cities, sources, elsewhere */
  .city-others .container { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; }
  .city-others__label { color: var(--text-muted); font-size: 0.74rem; }
  .city-others__list { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0; padding: 0; list-style: none; }
  .city-others__list a { display: inline-flex; gap: 0.4rem; align-items: baseline; padding: 0.45rem 0.95rem; border-radius: var(--r-pill); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); font-weight: 600; text-decoration: none; transition: transform var(--dur-3) var(--ease-spring); }
  .city-others__list a:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1.5px var(--text); }
  .city-others__list span { color: var(--text-muted); font-size: 0.82rem; font-weight: 500; }
  .city-sources { color: var(--text-muted); font-size: 0.8rem; }
  .city-sources ul { display: grid; gap: 0.25rem; margin: var(--s-2) 0 0; padding-inline-start: 1.1rem; }
  .city-sources a { color: inherit; }
  .elsewhere { display: grid; gap: var(--s-4); padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: var(--r-2xl); background: var(--tint-sky); box-shadow: inset 0 0 0 1px var(--line); }
  @media (min-width: 900px) { .elsewhere { grid-template-columns: 1.4fr 1fr; align-items: center; } }
  .elsewhere__title { font-family: var(--font-display); font-size: var(--step-3); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; margin-block-end: var(--s-3); font-variation-settings: "SOFT" 100; }
  .elsewhere__title em { color: var(--brand-ink); }

  /* /locations: map hero + city postcards */
  .city-map { rotate: -0.8deg; box-shadow: inset 0 0 0 1px var(--line), var(--shadow-2); }
  .city-map a.pin { text-decoration: none; color: var(--text); }
  .city-map a.pin:hover span, .city-map a.pin:focus-visible span { background: var(--btn-bg); color: var(--btn-fg); }
  .city-cards { display: grid; gap: var(--s-5); margin: 0; padding: 0; list-style: none; }
  @media (min-width: 900px) { .city-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .city-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    block-size: 100%;
    padding: clamp(1.5rem, 3vw, 2.1rem);
    border-radius: var(--r-2xl);
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--card-line), var(--shadow-2);
    text-decoration: none;
    transition: transform var(--dur-3) var(--ease-spring), box-shadow var(--dur-2);
  }
  .city-card::before { content: ""; position: absolute; inset: 9px; border: 2px dashed var(--line); border-radius: calc(var(--r-2xl) - 9px); pointer-events: none; }
  .city-card:hover { transform: translateY(-5px) rotate(-0.6deg); box-shadow: inset 0 0 0 1.5px var(--text), var(--shadow-3); }
  .city-card__stamp { position: absolute; inset-block-start: 1.4rem; inset-inline-end: 1.4rem; display: grid; place-items: center; inline-size: 4.6rem; block-size: 4.6rem; padding: 0.5rem; border-radius: 50%; background: var(--city-tint, var(--tint-butter)); box-shadow: inset 0 0 0 2px var(--surface), inset 0 0 0 4px var(--line-strong); font-size: 0.6rem; font-weight: 600; line-height: 1.2; text-align: center; text-transform: uppercase; letter-spacing: 0.06em; rotate: -12deg; }
  .city-card__hi { font-size: clamp(2.2rem, 1.8rem + 1.8vw, 3.2rem); font-weight: 700; line-height: 1.1; color: var(--brand-ink); }
  .city-card__name { font-family: var(--font-display); font-size: var(--step-2); font-weight: 700; line-height: 1; text-transform: lowercase; }
  .city-card__text { color: var(--text-muted); line-height: 1.55; }
  .city-card__stat { margin-block-start: var(--s-2); padding: 0.7rem 0.9rem; border-radius: var(--r-md); background: var(--city-tint, var(--tint-butter)); font-size: 0.86rem; line-height: 1.4; }
  .city-card__stat b { display: block; font-family: var(--font-display); font-size: var(--step-2); font-weight: 800; line-height: 1.05; }
  .city-card__facts { color: var(--text-muted); font-size: 0.72rem; }
  .city-card__go { margin-block-start: auto; padding-block-start: var(--s-3); color: var(--brand-ink); font-size: 0.8rem; font-weight: 600; }

  @media (prefers-reduced-motion: reduce) {
    .postcard, .city-map, .postcard__stamp, .city-card__stamp { rotate: none; }
    .area:hover, .city-card:hover, .city-price:hover, .city-others__list a:hover { transform: none; }
  }

  /* ---------- Ways to reach us (homepage "say hi" + /contact) ---------- */
  .reach { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; margin: 0; padding: 0; list-style: none; }
  .reach__item--main { grid-column: 1 / -1; }
  @media (max-width: 560px) { .reach { grid-template-columns: minmax(0, 1fr); } }
  .reach__link {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    block-size: 100%;
    padding: 0.9rem 1rem;
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--card-line), var(--shadow-1);
    text-decoration: none;
    transition: transform var(--dur-3) var(--ease-spring), box-shadow var(--dur-2);
  }
  .reach__link:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1.5px var(--text), var(--shadow-2); }
  .reach__link:active { transform: scale(0.98); }
  .reach__icon { flex: none; display: grid; place-items: center; inline-size: 2.6rem; block-size: 2.6rem; border-radius: 50%; background: var(--tint-butter); font-size: 1.15rem; line-height: 1; }
  .reach__item--wa .reach__icon { background: color-mix(in oklab, #25D366 22%, var(--surface)); color: #1C8C45; }
  .reach__item--wa .reach__icon .icon { inline-size: 1.3rem; block-size: 1.3rem; }
  .reach__item--call .reach__icon { background: var(--tint-sky); }
  .reach__item--mail .reach__icon { background: var(--tint-pink); }
  .reach__text { display: grid; gap: 0.1rem; min-inline-size: 0; }
  .reach__text b { font-weight: 700; line-height: 1.2; }
  .reach__text span { overflow: hidden; color: var(--text-muted); font-size: 0.82rem; text-overflow: ellipsis; white-space: nowrap; }
  .reach__item--main .reach__link { padding: 1.15rem 1.25rem; background: var(--featured-bg); color: var(--featured-fg); box-shadow: var(--shadow-2); }
  .reach__item--main .reach__icon { inline-size: 3rem; block-size: 3rem; background: var(--butter); font-size: 1.35rem; }
  .reach__item--main .reach__text b { font-family: var(--font-display); font-size: var(--step-1); font-weight: 700; letter-spacing: -0.01em; }
  .reach__item--main .reach__text span { color: color-mix(in oklab, var(--featured-fg) 75%, transparent); }
  .reach__go { margin-inline-start: auto; flex: none; inline-size: 1.4rem; block-size: 1.4rem; transition: translate var(--dur-3) var(--ease-spring); }
  .reach__link:hover .reach__go { translate: 4px 0; }

  /* Homepage "say hi": intro + reach tiles (the form moved to /contact) */
  .sayhi__card--reach { gap: clamp(1.5rem, 4vw, 3.5rem); }
  @media (min-width: 960px) { .sayhi__card--reach { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
  .sayhi__sub { color: var(--text-muted); font-size: var(--step-1); max-inline-size: 34rem; }
  @media (max-width: 959px) {
    .sayhi__card--reach .sayhi__intro { grid-template-areas: "title mascot" "sub sub" "studio studio"; }
    .sayhi__card--reach .sayhi__sub { grid-area: sub; font-size: var(--step-0); }
  }

  /* /contact: one narrow column — contacts strip → three-step form → addresses */
  /* same width as the rest of the site (the address cards); the form spreads its fields on wide screens */
  .contact-wrap { inline-size: min(100% - 2 * var(--gutter), var(--container)); }
  @media (min-width: 900px) {
    .contact-main .form__part[data-step="1"] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s-4); align-items: start; }
    .contact-main .form__part[data-step="1"] .form__actions { grid-column: 1 / -1; }
    .contact-main .tiles-pick { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .contact-main .form__part[data-step="3"] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); column-gap: var(--s-6); align-items: start; }
    .contact-main .form__part[data-step="3"] > :is(.cf-turnstile, .form__actions) { grid-column: 1 / -1; }
  }
  .contact-hero { padding-block: 6.5rem 0; }
  .contact-hero .crumbs { margin-block-end: var(--s-3); }
  .contact-hero__title { font-size: clamp(2.3rem, 4.4vw, 4.8rem); line-height: 1.04; letter-spacing: -0.035em; max-inline-size: none; }
  @media (min-width: 900px) { .contact-hero__title { white-space: nowrap; } }
  .contact-hero__lede { margin-block-start: var(--s-2); font-size: var(--step-0); max-inline-size: 36rem; }

  /* direct contacts: pastel cards like the homepage features, 2×2 */
  .contact-chips { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(0.6rem, 1.5vw, 0.9rem); margin: var(--s-5) 0 0; padding: 0; list-style: none; }
  @media (min-width: 560px) { .contact-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .contact-chip {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    block-size: 100%;
    padding: clamp(0.9rem, 2vw, 1.15rem) clamp(1rem, 2vw, 1.3rem);
    border-radius: var(--r-xl);
    box-shadow: inset 0 0 0 1px var(--card-line);
    text-decoration: none;
    transition: transform var(--dur-3) var(--ease-spring);
  }
  a.contact-chip:hover { transform: translateY(-3px); }
  .contact-chip--butter { background: var(--tint-butter); --icon-bg: var(--butter); }
  .contact-chip--sage { background: var(--tint-olive); --icon-bg: #25D366; }
  .contact-chip--pink { background: var(--tint-pink); --icon-bg: var(--blush-deep); }
  .contact-chip--sky { background: var(--tint-sky); --icon-bg: var(--sky); }
  .contact-chip__icon { flex: none; display: grid; place-items: center; inline-size: clamp(46px, 4vw, 54px); aspect-ratio: 1; border-radius: 50%; background: var(--icon-bg, var(--surface-2)); font-size: 1.35rem; line-height: 1; transition: transform var(--dur-4) var(--ease-spring); }
  a.contact-chip:hover .contact-chip__icon { transform: rotate(-8deg) scale(1.06); }
  .contact-chip__icon--wa { color: #0B2E17; }
  .contact-chip__icon--wa .icon { inline-size: 1.45rem; block-size: 1.45rem; }
  .contact-chip__text { display: grid; gap: 0.1rem; min-inline-size: 0; font-size: 1rem; font-weight: 650; line-height: 1.3; overflow-wrap: anywhere; }
  .contact-chip__text small { color: var(--text-muted); font-size: 0.7rem; font-weight: 500; }
  @media (prefers-reduced-motion: reduce) { a.contact-chip:hover, a.contact-chip:hover .contact-chip__icon { transform: none; } }

  .contact-main { padding-block-start: clamp(2rem, 4vw, 3rem); }
  .contact-title { font-family: var(--font-display); font-size: var(--step-2); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; font-variation-settings: "SOFT" 100; }
  .contact-title em { color: var(--brand-ink); font-variation-settings: "SOFT" 100, "WONK" 1; }
  .contact-sub { margin-block: 0.35rem var(--s-4); color: var(--text-muted); font-size: 0.92rem; }
  .contact-main .form { rotate: 0deg; }

  /* the form's Moop + speech bubble */
  .form--steps { gap: var(--s-4); padding: clamp(1.1rem, 3vw, 1.75rem); }
  .form__buddy { display: flex; align-items: center; gap: 0.75rem; }
  .form__moop { --moop-size: 58px; }
  .form__say {
    position: relative;
    padding: 0.45rem 0.8rem;
    border-radius: 14px 14px 14px 4px;
    background: var(--surface-2);
    box-shadow: inset 0 0 0 1px var(--line);
    font-size: 0.86rem;
    font-weight: 600;
  }
  .form__say::before { content: ""; position: absolute; inset-inline-start: -6px; inset-block-end: 8px; inline-size: 10px; block-size: 10px; background: inherit; box-shadow: inset 1px -1px 0 var(--line); clip-path: polygon(0 100%, 100% 0, 100% 100%); }
  .form__say.is-pop { animation: say-pop 0.42s var(--ease-squish); }
  @keyframes say-pop { 0% { transform: scale(0.85); opacity: 0.4; } 60% { transform: scale(1.05); } 100% { transform: none; opacity: 1; } }
  .moop.is-shake .moop__svg { animation: moop-shake 0.5s var(--ease-out); transform-origin: 50% 90%; }
  @keyframes moop-shake { 0%, 100% { transform: none; } 20% { transform: rotate(-9deg); } 40% { transform: rotate(8deg); } 60% { transform: rotate(-6deg); } 80% { transform: rotate(4deg); } }
  .form--steps .stepper { gap: 0.45rem; }
  .form--steps .stepper__item { font-size: 0.72rem; }
  .form--steps .btn { --btn-pad-y: 0.7rem; --btn-pad-x: 1.15rem; font-size: 0.95rem; }
  .form__actions--end { justify-content: flex-end; }
  .form--steps .form__next { margin-block-start: 0; }
  @media (max-width: 560px) {
    .form--steps .stepper__item:not(.is-on) .stepper__label { display: none; }
    .form__moop { --moop-size: 48px; }
  }
  @media (prefers-reduced-motion: reduce) { .form__say.is-pop, .moop.is-shake .moop__svg { animation: none; } }

  /* addresses */
  /* addresses: manifesto rows (shared with /about), plus a tag, the address and links */
  .contact-places { padding-block-start: 0; }
  .places { margin-block-start: var(--s-5); }
  .places__tag { display: block; margin-block-start: 0.45rem; color: var(--text-muted); font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0; }
  .places__detail { display: grid; gap: 0.5rem; }
  .places__detail address { font-style: normal; font-weight: 600; color: var(--text); line-height: 1.5; }
  .places__links { display: flex; flex-wrap: wrap; gap: 0.3rem 1.1rem; font-size: 0.86rem; font-weight: 600; }
  .places__links a { color: var(--brand-ink); text-decoration: none; }
  .places__links a:hover { text-decoration: underline; text-underline-offset: 3px; }
  @media (prefers-reduced-motion: reduce) {
    .reach__link:hover, .reach__link:hover .reach__go { transform: none; translate: none; }
  }

  /* ---------- /work showcase: alternating rows, devices on a tinted panel ---------- */
  .work-hero { padding-block-end: 0; }
  .work-hero__title { font-size: clamp(2.2rem, 1.4rem + 2.8vw, 3.6rem); }
  /* Two-tier H1 (/about, website prices): lead line, then the "… in Indore" line in forest, same size */
  .about-title__name, .about-title__what { display: block; }
  .about-title__what { color: var(--forest-ink); }
  .work-hero__lede { margin-block-start: var(--s-3); font-size: var(--step-0); max-inline-size: 38rem; }
  .work-list { padding-block-start: clamp(1.75rem, 4vw, 3rem); }

  .showcase { display: grid; gap: clamp(2.5rem, 7vw, 5.5rem); margin: 0; padding: 0; list-style: none; }
  .showcase__item { display: grid; gap: clamp(1.25rem, 3vw, 2rem); align-items: center; }
  @media (min-width: 960px) {
    .showcase__item { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(2rem, 5vw, 4.5rem); }
    .showcase__item--flip { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
    .showcase__item--flip .showcase__visual { order: 2; }
  }

  /* the tinted stage with a browser window and an overlapping phone */
  .showcase__visual {
    position: relative;
    display: block;
    padding: clamp(1.25rem, 4vw, 2.75rem) clamp(1.25rem, 4vw, 2.75rem) clamp(1.75rem, 5vw, 3.5rem);
    padding-inline-end: clamp(3.5rem, 12vw, 7.5rem);
    border-radius: var(--r-2xl);
    background:
      radial-gradient(color-mix(in oklab, var(--text) 10%, transparent) 1.1px, transparent 1.5px) 0 0 / 18px 18px,
      var(--stage, var(--tint-butter));
    box-shadow: inset 0 0 0 1px var(--card-line);
    text-decoration: none;
  }
  .showcase__item--pink { --stage: var(--tint-pink); }
  .showcase__item--butter { --stage: var(--tint-butter); }
  .showcase__item--sky { --stage: var(--tint-sky); }
  .showcase__item--sage { --stage: var(--tint-olive); }
  .showcase__browser {
    display: block;
    overflow: hidden;
    border-radius: var(--r-md);
    background: var(--surface);
    box-shadow: 0 0 0 1px var(--card-line), var(--shadow-3);
    transition: transform var(--dur-4) var(--ease-spring);
  }
  .showcase__bar { display: flex; align-items: center; gap: 0.3rem; padding: 0.5rem 0.75rem; background: var(--surface-2); border-block-end: 1px solid var(--line); }
  .showcase__bar i { inline-size: 0.55rem; block-size: 0.55rem; border-radius: 50%; background: var(--line-strong); }
  .showcase__bar i:nth-child(1) { background: #F2877C; }
  .showcase__bar i:nth-child(2) { background: #F5C451; }
  .showcase__bar i:nth-child(3) { background: #7FC46A; }
  .showcase__bar span { overflow: hidden; margin-inline: auto; padding: 0.1rem 0.8rem; border-radius: var(--r-pill); background: var(--surface); color: var(--text-muted); font-size: 0.66rem; text-overflow: ellipsis; white-space: nowrap; }
  .showcase__desktop { aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 0; box-shadow: none; }
  .showcase__phone {
    position: absolute;
    inset-block-end: clamp(0.9rem, 3vw, 1.75rem);
    inset-inline-end: clamp(0.9rem, 3vw, 1.75rem);
    inline-size: clamp(5.5rem, 18%, 9.5rem);
    aspect-ratio: 9 / 19;
    object-fit: cover;
    object-position: top;
    border-radius: 20px;
    box-shadow: 0 0 0 5px var(--ink), var(--shadow-3);
    transition: transform var(--dur-4) var(--ease-spring);
  }
  .showcase__visual:hover .showcase__browser { transform: translateY(-4px) rotate(-0.4deg); }
  .showcase__visual:hover .showcase__phone { transform: translateY(-8px) rotate(2deg); }

  .showcase__copy { display: grid; gap: var(--s-3); justify-items: start; }
  .showcase__no { color: var(--text-muted); font-size: 0.74rem; }
  .showcase__client { font-family: var(--font-display); font-size: clamp(1.9rem, 1.3rem + 2vw, 2.8rem); font-weight: 700; line-height: 1; letter-spacing: -0.03em; font-variation-settings: "SOFT" 100; }
  .showcase__client a { text-decoration: none; }
  .showcase__client a:hover { color: var(--brand-ink); }
  .showcase__headline { font-size: var(--step-1); line-height: 1.4; max-inline-size: 32rem; }
  .showcase__facts { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; list-style: none; font-size: 0.74rem; }
  .showcase__facts li { padding: 0.25rem 0.7rem; border-radius: var(--r-pill); background: var(--stage, var(--tint-butter)); }
  .showcase__built { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; padding: 0; list-style: none; }
  .showcase__built li { padding: 0.28rem 0.7rem; border-radius: var(--r-pill); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); font-size: 0.82rem; font-weight: 500; }
  .showcase__quote { margin: var(--s-2) 0 0; padding: 0.9rem 1.1rem; border-inline-start: 3px solid var(--brand); border-radius: 0 var(--r-md) var(--r-md) 0; background: var(--surface); color: var(--text); font-family: var(--font-display); font-size: 1rem; font-style: italic; line-height: 1.45; max-inline-size: 34rem; }
  .showcase__quote cite { display: block; margin-block-start: 0.4rem; color: var(--text-muted); font-family: var(--font-mono); font-size: 0.7rem; font-style: normal; }
  .showcase__ctas { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block-start: var(--s-2); }

  @media (max-width: 640px) {
    .showcase__visual { padding: 1rem 4.25rem 1.5rem 1rem; }
    .showcase__phone { inline-size: 4.75rem; border-radius: 14px; box-shadow: 0 0 0 4px var(--ink), var(--shadow-2); }
    .showcase__bar { padding: 0.4rem 0.6rem; }
  }
  [data-theme="dark"] .showcase__phone { box-shadow: 0 0 0 5px #2E3A25, var(--shadow-3); }

  /* /locations: the same rows with a landmark photo on the pastel stage */
  .city-shot { margin: 0; padding: clamp(1rem, 3vw, 2rem); padding-inline-end: clamp(1rem, 3vw, 2rem); }
  .city-shot__link { display: block; }
  .city-shot__img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-lg); box-shadow: var(--shadow-3); rotate: -0.8deg; transition: rotate var(--dur-4) var(--ease-spring), transform var(--dur-4) var(--ease-spring); }
  .showcase__item--flip .city-shot__img { rotate: 0.8deg; }
  .city-shot:hover .city-shot__img { rotate: 0deg; transform: translateY(-4px); }
  .city-shot__stamp {
    position: absolute;
    inset-block-start: clamp(0.4rem, 1.5vw, 0.9rem);
    inset-inline-end: clamp(0.4rem, 1.5vw, 0.9rem);
    display: grid;
    place-items: center;
    inline-size: clamp(4rem, 9vw, 5.2rem);
    aspect-ratio: 1;
    padding: 0.5rem;
    border-radius: 50%;
    background: var(--stage, var(--tint-butter));
    box-shadow: inset 0 0 0 2px var(--surface), inset 0 0 0 4px var(--line-strong), var(--shadow-2);
    font-size: 0.6rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    rotate: -12deg;
  }
  .city-shot__hi { position: absolute; inset-block-end: calc(clamp(1rem, 3vw, 2rem) + 2.2rem); inset-inline-start: calc(clamp(1rem, 3vw, 2rem) + 0.9rem); padding: 0.25rem 0.9rem; border-radius: var(--r-pill); background: var(--surface); box-shadow: var(--shadow-2); font-size: clamp(1.1rem, 0.9rem + 0.8vw, 1.5rem); font-weight: 700; color: var(--brand-ink); }
  .city-shot__credit { margin-block-start: 0.75rem; color: var(--text-muted); font-size: 0.68rem; line-height: 1.4; }
  .city-shot__credit a { color: inherit; }
  /* "however far…": three pastel cards, type only */
  .ways { display: grid; gap: clamp(0.9rem, 2vw, 1.25rem); margin: 0; padding: 0; list-style: none; }
  @media (min-width: 760px) { .ways { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .way {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: clamp(1.5rem, 3vw, 2.1rem);
    border-radius: var(--r-xl);
    box-shadow: inset 0 0 0 1px var(--card-line);
    transition: transform var(--dur-3) var(--ease-spring);
  }
  .way:hover { transform: translateY(-4px); }
  .way--butter { background: var(--tint-butter); --chip: var(--butter); }
  .way--pink { background: var(--tint-pink); --chip: var(--blush-deep); }
  .way--sky { background: var(--tint-sky); --chip: var(--sky); }
  .way__city { align-self: flex-start; padding: 0.22rem 0.7rem; border-radius: var(--r-pill); background: var(--chip); font-size: 0.72rem; font-weight: 600; }
  [data-theme="dark"] .way__city { color: var(--ink); }
  .way__title { font-family: var(--font-display); font-size: var(--step-2); font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; font-variation-settings: "SOFT" 100; }
  .way__text { color: var(--text-muted); line-height: 1.55; }
  .way__link { margin-block-start: auto; padding-block-start: var(--s-3); color: var(--brand-ink); font-size: 0.8rem; font-weight: 600; text-decoration: none; }
  .way__link:hover { text-decoration: underline; text-underline-offset: 3px; }
  @media (prefers-reduced-motion: reduce) { .way:hover { transform: none; } }
  .city-row__stat { padding: 0.6rem 0.85rem; border-radius: var(--r-md); background: var(--stage, var(--tint-butter)); font-size: 0.86rem; line-height: 1.4; }
  .city-row__stat b { font-family: var(--font-display); font-size: 1.15rem; font-weight: 800; margin-inline-end: 0.25rem; }
  @media (prefers-reduced-motion: reduce) { .city-shot__img, .showcase__item--flip .city-shot__img { rotate: none; } .city-shot:hover .city-shot__img { transform: none; } }
  @media (prefers-reduced-motion: reduce) {
    .showcase__visual:hover :is(.showcase__browser, .showcase__phone) { transform: none; }
  }

  /* ---------- App case study (Stride): phones in the app's own neo-brutalist frame ---------- */
  .case-card__logo--moop circle { fill: var(--olive, #5C7A38); }
  .case-card__logo--moop ellipse { fill: #10130B; }
  /* hero: the /about layout (copy 70, two small phones 30); phones hide on small screens like the about Moop */
  .app-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-4) 0 0; padding: 0; list-style: none; }
  .app-chips li { padding: 0.25rem 0.75rem; border-radius: var(--r-pill); background: var(--surface); box-shadow: inset 0 0 0 1px var(--card-line); font-size: 0.74rem; }
  .app-hero__ctas { margin-block-start: var(--s-5); }
  .app-hero__legal { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block-start: var(--s-3); color: var(--text-muted); font-size: 0.72rem; }
  .app-hero__legal a { color: var(--text-muted); text-decoration: underline; text-decoration-color: color-mix(in oklab, currentColor 40%, transparent); text-underline-offset: 3px; }
  .app-hero__legal a:hover { color: var(--text); text-decoration-color: currentColor; }
  .app-phones { position: relative; display: grid; grid-template-columns: 1fr; justify-items: center; inline-size: min(100%, 15rem); margin-inline: auto; padding-block: var(--s-3) var(--s-5); }
  .app-phones > * { grid-area: 1 / 1; }
  .app-phone { inline-size: 70%; border-radius: 18px; box-shadow: 0 0 0 3px var(--ink), 6px 6px 0 3px var(--ink); }
  .app-phone--back { transform: translate(-30%, -6%) rotate(-7deg); }
  .app-phone--front { position: relative; z-index: 2; transform: translate(22%, 6%) rotate(4deg); }
  @media (max-width: 859.98px) { .app-phones { display: none; } }
  .app-cs .cs-feature__media--phone .shot--mobile { box-shadow: 0 0 0 4px var(--ink), 8px 8px 0 4px var(--ink); }

  .app-design { display: grid; gap: var(--s-6); margin-block-start: var(--s-6); }
  @media (min-width: 960px) { .app-design { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: start; } }
  .app-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: var(--s-3); margin: 0; padding: 0; list-style: none; }
  .app-swatches li { display: grid; gap: 0.15rem; padding: var(--s-3); border-radius: var(--r-md); background: var(--surface); box-shadow: inset 0 0 0 1px var(--card-line); }
  .app-swatches .mono { font-size: 0.72rem; color: var(--text-muted); }
  .app-swatch { block-size: 3.2rem; margin-block-end: var(--s-2); border-radius: 12px; background: var(--sw); border: 2.5px solid #211F1B; box-shadow: 3px 3px 0 #211F1B; }
  .app-swatch__use { font-size: 0.78rem; color: var(--text-muted); }
  .app-type { display: grid; gap: var(--s-3); padding: var(--s-5); border-radius: var(--r-xl); background: var(--surface); box-shadow: inset 0 0 0 1px var(--card-line); }
  .app-type__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s-2) var(--s-4); padding-block-end: var(--s-3); border-block-end: 1px dashed var(--card-line); }
  .app-type__row .mono { font-size: 0.72rem; color: var(--text-muted); }
  .app-type__sample { font-size: 1.15rem; font-weight: 600; }
  .app-type__sample--display { font-family: var(--font-display); font-size: 1.9rem; font-weight: 800; letter-spacing: -0.02em; }
  .app-type__sample.mono { font-size: 0.95rem; letter-spacing: 0.08em; }
  .app-type__note { font-size: var(--step--1); color: var(--text-muted); }
  .app-brutal { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); padding-block: var(--s-2) var(--s-3); }
  .app-brutal__card { display: grid; gap: 0.2rem; padding: var(--s-4); border-radius: 20px; border: 2.5px solid #211F1B; box-shadow: 4px 4px 0 #211F1B; color: #211F1B; }
  .app-brutal__card b { font-family: var(--font-display); font-size: 2rem; line-height: 1; }
  .app-brutal__card i { font-style: normal; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; }
  .app-brutal__card--butter { background: #FFE58A; }
  .app-brutal__card--sky { background: #C8E4FF; }

  .app-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--s-4); margin: var(--s-6) 0; padding: 0; list-style: none; }
  .app-stats li { display: grid; padding: var(--s-4) var(--s-5); border-radius: var(--r-lg); background: var(--surface); box-shadow: inset 0 0 0 1px var(--card-line); }
  .app-stats b { font-family: var(--font-display); font-size: clamp(2rem, 1.5rem + 1.6vw, 2.8rem); font-weight: 700; line-height: 1; letter-spacing: -0.03em; }
  .app-stats span { color: var(--text-muted); font-size: 0.86rem; }
  /* "why we built it": title left, a them-vs-us comparison right, then the showroom strip */
  .app-why__grid { display: grid; gap: var(--s-6); align-items: center; }
  @media (min-width: 960px) { .app-why__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4rem); } }
  .app-why__lead .section-sub { margin-block-start: var(--s-3); }
  .app-vs { display: grid; overflow: hidden; border-radius: var(--r-xl); background: var(--surface); box-shadow: inset 0 0 0 1px var(--card-line); }
  .app-vs__row { display: grid; grid-template-columns: 1fr 1fr; }
  .app-vs__row > span { padding: 0.85rem 1.1rem; line-height: 1.4; }
  .app-vs__row + .app-vs__row > span { border-block-start: 1px dashed var(--card-line); }
  .app-vs__row--head > span { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
  .app-vs__row--head > span:last-child { color: var(--brand-ink); font-weight: 700; }
  .app-vs__them { color: var(--text-muted); text-decoration: line-through; text-decoration-color: color-mix(in oklab, var(--text-muted) 55%, transparent); text-decoration-thickness: 1.5px; }
  .app-vs__row > span:last-child { background: var(--tint-butter); font-weight: 600; }
  .app-vs__row--head > span:last-child { background: var(--butter); color: var(--ink); }
  @media (max-width: 520px) { .app-vs__row > span { padding: 0.7rem 0.8rem; font-size: 0.88rem; } }
  .app-showroom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-5); margin-block-start: var(--s-6); padding: var(--s-4) var(--s-5); border-radius: var(--r-xl); background: var(--tint-olive); }
  .app-showroom__text { flex: 1 1 22rem; max-inline-size: 40rem; line-height: 1.6; }
  .app-showroom__habits { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
  .app-showroom__habits li { padding: 0.25rem 0.75rem; border-radius: var(--r-pill); background: var(--surface); font-size: 0.74rem; }
  [data-theme="dark"] .app-vs__row--head > span:last-child { color: var(--ink); }

  /* "the app, screen by screen": portfolio rows. Copy one side, a pair of phones the other (alternating);
     the pair sits on a pastel panel and stays side by side on every screen size. */
  .app-show { display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); margin-block-start: var(--s-6); }
  .app-show__row { --panel: var(--tint-butter); display: grid; gap: var(--s-5); align-items: center; }
  .app-show__row--sky { --panel: var(--tint-sky); }
  .app-show__row--pink { --panel: var(--tint-pink); }
  @media (min-width: 960px) {
    .app-show__row { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(2.5rem, 5vw, 4.5rem); }
    .app-show__row--flip .app-show__pair { order: -1; }
  }
  .app-show__copy { display: grid; gap: var(--s-3); align-content: center; }
  .app-show__tag { justify-self: start; padding: 0.2rem 0.7rem; border-radius: var(--r-pill); background: var(--panel); font-size: 0.72rem; }
  .app-show__title { font-family: var(--font-display); font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.6rem); font-weight: 700; line-height: 1.08; letter-spacing: -0.03em; font-variation-settings: "SOFT" 100; }
  .app-show__title em { color: var(--brand-ink); font-variation-settings: "SOFT" 100, "WONK" 1; }
  .app-show__text { color: var(--text-muted); line-height: 1.65; max-inline-size: 34rem; }
  .app-show__pair {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(0.75rem, 3vw, 1.75rem); align-items: start;
    padding: clamp(1.25rem, 4vw, 2.5rem) clamp(1rem, 4vw, 2.75rem) clamp(1.75rem, 5vw, 3.25rem);
    border-radius: var(--r-2xl); background: var(--panel); box-shadow: inset 0 0 0 1px var(--card-line);
  }
  .app-show__phone { margin: 0; max-inline-size: 15rem; justify-self: center; inline-size: 100%; }
  .app-show__phone .shot { border-radius: clamp(14px, 3vw, 22px); box-shadow: 0 0 0 3px #211F1B, 6px 6px 0 3px #211F1B; }
  .app-show__phone--low { margin-block-start: clamp(1.5rem, 6vw, 3.5rem); }
  .app-show__moop { display: grid; place-items: center; align-self: center; --moop-size: clamp(110px, 18vw, 190px); }
  .app-show__row .checks { margin-block-start: var(--s-1); }
  .app-links { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-block-start: var(--s-4); font-size: 0.92rem; }
  .app-links a { color: var(--brand-ink); }

  /* ---------- App legal pages: privacy policy, account and data deletion ---------- */
  .legal__title { font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.4rem); max-inline-size: 18ch; }
  .legal__meta { margin-block-start: var(--s-4); color: var(--text-muted); font-size: 0.82rem; }
  .legal__body { padding-block: var(--s-6) var(--s-8); }
  .legal__body.prose h2 { font-family: var(--font-display); font-size: var(--step-2); }
  .legal__body.prose ul { padding-inline-start: 1.2rem; }
  .legal__body.prose li + li { margin-block-start: 0.45em; }
  .legal__h2 { margin-block: var(--s-6) var(--s-4); font-family: var(--font-display); font-size: var(--step-3); line-height: 1.1; }
  .legal__h2:first-child { margin-block-start: 0; }
  .legal__jump { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-block-start: var(--s-5); }
  .legal__jump a { padding: 0.4rem 0.9rem; border-radius: var(--r-pill); background: var(--surface); box-shadow: inset 0 0 0 1px var(--card-line); font-size: 0.78rem; text-decoration: none; }
  .legal__jump a:hover { background: var(--tint-butter); }
  .del-steps { display: grid; gap: var(--s-4); margin-block-end: var(--s-6); }
  @media (min-width: 760px) { .del-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .del-card { display: grid; gap: var(--s-3); align-content: start; padding: var(--s-5) var(--s-6); border-radius: var(--r-xl); }
  .del-card--butter { background: var(--tint-butter); }
  .del-card--sky { background: var(--tint-sky); }
  .del-card--sage { background: var(--tint-olive); }
  .del-card--pink { background: var(--tint-pink); }
  .del-card__tag { justify-self: start; padding: 0.15rem 0.65rem; border-radius: var(--r-pill); background: var(--surface); font-size: 0.7rem; }
  .del-card__title { font-family: var(--font-display); font-size: var(--step-2); font-weight: 700; line-height: 1.1; }
  .del-card__list { display: grid; gap: var(--s-2); padding-inline-start: 1.2rem; }
  .del-card__note { color: var(--text-muted); font-size: var(--step--1); }
  .del-card .btn { justify-self: start; }

  /* ---------- Hero titles on phones: one bold, consistent size on every top-level page ----------
     Kept last so it wins over each page's own clamp(). Long, keyword-heavy H1s (pricing, cities,
     guides, case studies) step down a little so they don't run to five lines. */
  @media (max-width: 640px) {
    :is(.page-hero__title, .work-hero__title, .contact-hero__title, .city-hero__title, .guides-hero__title, .price-hero__title) {
      font-size: clamp(2.3rem, 10vw, 3.1rem);
      line-height: 1.04;
      letter-spacing: -0.03em;
      max-inline-size: none;
    }
    :is(.price-hero__title, .city-hero__title, .guide__title, .cs-hero__title) {
      font-size: clamp(2rem, 8.6vw, 2.7rem);
    }
  }
}