/* Landing pages. Method: portfolio-hq inputs/DESIGN-SYSTEM-WEBSITE.md sections 2-9.
   Brand accents live in theme-<brand>.css, generated by build.py from content/site.json.
   Two looks: data-look="modern" (default: motion, glow, bento) and data-look="classic" (calm, serif, still). */
@layer reset, tokens, base, layout, components, looks, motion;

/* ------------------------------------------------------------------ reset */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { min-height: 100vh; min-height: 100dvh; }
  img, svg { display: block; max-width: 100%; }
  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
  button, input, select { font: inherit; color: inherit; }
  button { cursor: pointer; background: none; border: 0; }
  table { border-collapse: collapse; }
  [hidden] { display: none !important; }
}

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

    --bg:          light-dark(oklch(.972 .009 85), oklch(.148 .026 265));
    --bg-sunk:     light-dark(oklch(.94  .011 85), oklch(.115 .022 265));
    --surface:     light-dark(oklch(.995 .004 85), oklch(.205 .03  265));
    --surface-2:   light-dark(oklch(.955 .01  85), oklch(.245 .034 265));
    --surface-3:   light-dark(oklch(.92  .012 85), oklch(.29  .038 265));
    --line:        light-dark(oklch(.2 .03 265 / .12), oklch(1 0 0 / .1));
    --line-strong: light-dark(oklch(.2 .03 265 / .24), oklch(1 0 0 / .2));
    --line-control: light-dark(oklch(.52 .02 265), oklch(.62 .02 265)); /* 3:1+ boundary for inputs */
    --ink:         light-dark(oklch(.2  .03 265), oklch(.968 .01 85));
    --ink-2:       light-dark(oklch(.36 .03 265), oklch(.83  .015 265));
    --muted:       light-dark(oklch(.46 .03 265), oklch(.72  .02  265));

    /* accent defaults = kit default; theme-<brand>.css overrides these */
    --accent:        light-dark(oklch(.88 .19 125), oklch(.88 .19 125));
    --accent-strong: light-dark(oklch(.915 .19 125), oklch(.915 .19 125));
    --accent-text:   light-dark(oklch(.45 .13 130), oklch(.88 .19 125));
    --accent-line:   light-dark(oklch(.55 .15 130), oklch(.88 .19 125));
    --on-accent:     oklch(.2 .04 265);
    --accent-soft:   color-mix(in oklab, var(--accent) 16%, transparent);
    --focus:         var(--accent-text);

    /* status: semantic only, never brand */
    --good:    light-dark(oklch(.45 .11 165), oklch(.79 .14 165));
    --good-bg: light-dark(oklch(.93 .05 165), oklch(.32 .06 165 / .55));
    --warn:    light-dark(oklch(.47 .11 70),  oklch(.83 .14 80));
    --warn-bg: light-dark(oklch(.94 .06 85),  oklch(.36 .07 80 / .5));
    --info:    light-dark(oklch(.46 .12 250), oklch(.77 .11 250));
    --info-bg: light-dark(oklch(.94 .03 250), oklch(.33 .06 250 / .55));

    --glass: light-dark(oklch(.985 .006 85 / .72), oklch(.16 .026 265 / .66));
    --shadow-1: 0 1px 1px light-dark(oklch(.2 .03 265 / .06), oklch(0 0 0 / .3)),
                0 6px 16px -6px light-dark(oklch(.2 .03 265 / .1), oklch(0 0 0 / .4));
    --shadow-2: 0 1px 1px light-dark(oklch(.2 .03 265 / .05), oklch(0 0 0 / .25)),
                0 10px 20px -8px light-dark(oklch(.2 .03 265 / .14), oklch(0 0 0 / .45)),
                0 34px 70px -24px light-dark(oklch(.2 .03 265 / .25), oklch(0 0 0 / .6));

    /* system font stacks only (no web fonts) */
    --f-display: "Avenir Next", "Segoe UI Variable Display", "Segoe UI", ui-sans-serif, system-ui, -apple-system, Roboto, "Helvetica Neue", sans-serif;
    --f-text: ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Kohinoor Devanagari", "Devanagari Sangam MN", "Nirmala UI", Roboto, sans-serif;
    --f-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    --f-serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;

    --r-s: 10px; --r-m: 16px; --r-l: 24px; --r-xl: 32px;
    --gutter: clamp(16px, 4vw, 44px);
    --max: 1280px; --max-wide: 1480px; --hdr: 68px;
    --ease: cubic-bezier(.22, 1, .36, 1);
    --ease-io: cubic-bezier(.65, 0, .35, 1);
  }
  :root[data-theme="light"] { color-scheme: light; }
  :root[data-theme="dark"]  { color-scheme: dark; }

  /* browsers without light-dark(): the same palette as explicit blocks (DESIGN-SYSTEM-DASHBOARD.md 3.1), so Auto
     follows the system and the theme button still switches. Light first, then dark twice: system dark unless the
     visitor chose Light, and the manual Dark choice. Keep the two dark blocks identical, and keep all three in step
     with the light-dark() pairs above. Brand accents come from theme-<brand>.css: accent, accent-strong and
     on-accent are the same in both themes; the dark blocks derive accent-text and accent-line from the accent. */
  @supports not (color: light-dark(#000, #fff)) {
    :root {
      --bg: oklch(.972 .009 85); --bg-sunk: oklch(.94 .011 85); --surface: oklch(.995 .004 85);
      --surface-2: oklch(.955 .01 85); --surface-3: oklch(.92 .012 85);
      --line: oklch(.2 .03 265 / .12); --line-strong: oklch(.2 .03 265 / .24); --line-control: oklch(.52 .02 265);
      --ink: oklch(.2 .03 265); --ink-2: oklch(.36 .03 265); --muted: oklch(.46 .03 265);
      --accent: oklch(.88 .19 125); --accent-strong: oklch(.915 .19 125); --accent-text: oklch(.45 .13 130);
      --accent-line: oklch(.55 .15 130);
      --good: oklch(.45 .11 165); --good-bg: oklch(.93 .05 165); --warn: oklch(.47 .11 70); --warn-bg: oklch(.94 .06 85);
      --info: oklch(.46 .12 250); --info-bg: oklch(.94 .03 250); --glass: oklch(.985 .006 85 / .9);
      --shadow-1: 0 1px 1px oklch(.2 .03 265 / .06), 0 6px 16px -6px oklch(.2 .03 265 / .1);
      --shadow-2: 0 10px 20px -8px oklch(.2 .03 265 / .14), 0 34px 70px -24px oklch(.2 .03 265 / .25);
    }
    @media (prefers-color-scheme: dark) {
      :root:not([data-theme="light"]) {
        --bg: oklch(.148 .026 265); --bg-sunk: oklch(.115 .022 265); --surface: oklch(.205 .03 265);
        --surface-2: oklch(.245 .034 265); --surface-3: oklch(.29 .038 265);
        --line: oklch(1 0 0 / .1); --line-strong: oklch(1 0 0 / .2); --line-control: oklch(.62 .02 265);
        --ink: oklch(.968 .01 85); --ink-2: oklch(.83 .015 265); --muted: oklch(.72 .02 265);
        --accent-text: color-mix(in oklab, var(--accent) 70%, #fff); --accent-line: var(--accent);
        --good: oklch(.79 .14 165); --good-bg: oklch(.32 .06 165 / .55); --warn: oklch(.83 .14 80); --warn-bg: oklch(.36 .07 80 / .5);
        --info: oklch(.77 .11 250); --info-bg: oklch(.33 .06 250 / .55); --glass: oklch(.16 .026 265 / .9);
        --shadow-1: 0 1px 1px oklch(0 0 0 / .3), 0 6px 16px -6px oklch(0 0 0 / .4);
        --shadow-2: 0 10px 20px -8px oklch(0 0 0 / .45), 0 34px 70px -24px oklch(0 0 0 / .6);
      }
    }
    :root[data-theme="dark"] {
      --bg: oklch(.148 .026 265); --bg-sunk: oklch(.115 .022 265); --surface: oklch(.205 .03 265);
      --surface-2: oklch(.245 .034 265); --surface-3: oklch(.29 .038 265);
      --line: oklch(1 0 0 / .1); --line-strong: oklch(1 0 0 / .2); --line-control: oklch(.62 .02 265);
      --ink: oklch(.968 .01 85); --ink-2: oklch(.83 .015 265); --muted: oklch(.72 .02 265);
      --accent-text: color-mix(in oklab, var(--accent) 70%, #fff); --accent-line: var(--accent);
      --good: oklch(.79 .14 165); --good-bg: oklch(.32 .06 165 / .55); --warn: oklch(.83 .14 80); --warn-bg: oklch(.36 .07 80 / .5);
      --info: oklch(.77 .11 250); --info-bg: oklch(.33 .06 250 / .55); --glass: oklch(.16 .026 265 / .9);
      --shadow-1: 0 1px 1px oklch(0 0 0 / .3), 0 6px 16px -6px oklch(0 0 0 / .4);
      --shadow-2: 0 10px 20px -8px oklch(0 0 0 / .45), 0 34px 70px -24px oklch(0 0 0 / .6);
    }
  }
  @media (min-width: 1900px) { :root { --max: 1560px; --max-wide: 1760px; } }
}

/* ------------------------------------------------------------------ base */
@layer base {
  html { scroll-padding-top: calc(var(--hdr) + 16px); }
  @media (min-width: 1900px) { html { font-size: 112.5%; } }
  @media (min-width: 2300px) { html { font-size: 125%; } }
  body {
    background: var(--bg); color: var(--ink);
    font: 400 1rem/1.6 var(--f-text);
    -webkit-font-smoothing: antialiased; overflow-x: clip;
  }
  h1, h2, h3 { font-family: var(--f-display); color: var(--ink); text-wrap: balance; overflow-wrap: break-word; }
  h1 { font-size: clamp(2.2rem, 1.2rem + 5.2vw, 5.6rem); font-weight: 750; letter-spacing: -.04em; line-height: 1.02; }
  h2 { font-size: clamp(1.9rem, 1.2rem + 2.9vw, 3.6rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.06; }
  h3 { font-size: clamp(1.15rem, 1.05rem + .5vw, 1.45rem); font-weight: 650; letter-spacing: -.02em; line-height: 1.15; }
  p, li, dd { text-wrap: pretty; }
  p { max-width: 70ch; }
  a { color: var(--accent-text); text-underline-offset: .2em; text-decoration-thickness: 1px; }
  a:hover { text-decoration-thickness: 2px; }
  :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
  :focus:not(:focus-visible) { outline: none; }
  ::selection { background: var(--accent); color: var(--on-accent); }
  .skip {
    position: absolute; left: 12px; top: -100px; z-index: 200; padding: .7em 1em; border-radius: var(--r-s);
    background: var(--ink); color: var(--bg); font-weight: 650; text-decoration: none;
  }
  .skip:focus { top: 12px; }
  /* text for screen readers only (status context, change announcements) */
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
  .eyebrow {
    display: inline-flex; align-items: center; gap: .7em; margin-bottom: 1rem;
    font: 600 .74rem/1.2 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text);
  }
  .eyebrow::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: currentColor; flex: none; }
  .lede { font-size: clamp(1.1rem, .98rem + .5vw, 1.4rem); line-height: 1.45; color: var(--ink-2); max-width: 46ch; }
}

/* ------------------------------------------------------------------ layout */
@layer layout {
  .wrap      { width: min(100% - 2 * var(--gutter), var(--max));      margin-inline: auto; }
  .wrap-wide { width: min(100% - 2 * var(--gutter), var(--max-wide)); margin-inline: auto; }
  .section       { padding-block: clamp(64px, 9vw, 130px); position: relative; }
  .section-tight { padding-block: clamp(40px, 5vw, 80px); }
  .section-alt   { background: color-mix(in oklab, var(--bg-sunk) 70%, var(--bg)); }
  .sec-head { margin-bottom: clamp(28px, 4vw, 56px); display: grid; gap: .4rem; }
  .sec-head .eyebrow { margin-bottom: .3rem; }
  .sec-note { color: var(--muted); font-size: .95rem; margin-top: .6rem; display: flex; flex-wrap: wrap; gap: .45em; align-items: center; }

  .bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); }
  .span-3 { grid-column: span 3; } .span-4 { grid-column: span 4; } .span-5 { grid-column: span 5; }
  .span-6 { grid-column: span 6; } .span-7 { grid-column: span 7; } .span-8 { grid-column: span 8; }
  .span-12 { grid-column: 1 / -1; }
  @media (max-width: 980px) {
    .bento > * { grid-column: span 12; }
    .bento > .span-3, .bento > .span-4, .bento > .span-5, .bento > .span-7 { grid-column: span 6; }
  }
  @media (max-width: 620px) { .bento > *, .bento > [class*="span-"] { grid-column: 1 / -1; } }

  .two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 6vw, 96px); }
  @media (max-width: 820px) { .two-col { grid-template-columns: 1fr; } }
}

/* ------------------------------------------------------------------ components */
@layer components {
  /* header */
  .site-header {
    position: sticky; top: 0; z-index: 100; view-transition-name: site-header;
    background: var(--glass); -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5);
    border-bottom: 1px solid var(--line);
  }
  .hdr { display: flex; align-items: center; gap: 12px; min-height: var(--hdr); }
  .wordmark {
    display: inline-flex; align-items: baseline; gap: .45em; min-width: 0; margin-right: auto;
    font: 750 1.08rem/1.1 var(--f-display); letter-spacing: -.02em; color: var(--ink); text-decoration: none;
  }
  .wordmark:hover { text-decoration: none; }
  .wm-brand { color: var(--accent-text); white-space: nowrap; }
  .wm-sep { color: var(--muted); font-weight: 400; }
  .wm-product { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hdr-panel { display: flex; align-items: center; gap: 14px; }
  .nav {
    display: flex; gap: 2px; padding: 4px; border: 1px solid var(--line); border-radius: 999px;
    background: color-mix(in oklab, var(--surface) 60%, transparent);
  }
  .nav a {
    padding: .5em .95em; border-radius: 999px; color: var(--ink-2); text-decoration: none;
    font-weight: 560; font-size: .92rem; line-height: 1.2; white-space: nowrap;
  }
  .nav a:hover { color: var(--ink); background: var(--surface-2); }
  .nav a[aria-current="page"] { color: var(--on-accent); background: var(--accent); }
  .prefs { display: flex; align-items: center; gap: 8px; }
  .seg { display: inline-flex; padding: 3px; border: 1px solid var(--line-strong); border-radius: 999px; }
  .seg button, .theme-btn {
    min-height: 34px; padding: .4em .85em; border-radius: 999px;
    font: 600 .8rem/1 var(--f-text); color: var(--ink-2);
  }
  .seg button:hover, .theme-btn:hover { color: var(--ink); background: var(--surface-2); }
  .seg button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
  .theme-btn { display: inline-flex; align-items: center; gap: .5em; border: 1px solid var(--line-strong); }
  .theme-ic {
    width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid currentColor; flex: none;
    background: linear-gradient(90deg, currentColor 50%, transparent 50%);
  }
  .menu-btn {
    display: none; align-items: center; gap: .55em; min-height: 40px; padding: .45em .9em;
    border: 1px solid var(--line-strong); border-radius: 999px; font-weight: 600; font-size: .9rem;
  }
  .menu-ic { width: 16px; height: 10px; border-block: 2px solid currentColor; position: relative; }
  .menu-ic::after { content: ""; position: absolute; left: 0; right: 0; top: 2px; height: 2px; background: currentColor; }
  html:not(.js) .prefs { display: none; }

  /* Drawer at 70em (1120px at the default text size; in em so it follows the visitor's text size). Measured on the
     built pages: inline, the nav and the display options take 715px, so at 941px a product name after the longest
     brand prefix kept 21px, and it needs about 1075px to show 12 characters. 70em leaves room for a classic
     scrollbar and slightly wider system fonts. */
  @media (max-width: 70em) {
    html.js .menu-btn { display: inline-flex; }
    html.js .hdr-panel {
      position: absolute; right: var(--gutter); top: calc(var(--hdr) + 8px); width: min(100% - 2 * var(--gutter), 26rem);
      /* never taller than the space under the sticky header: on a short or zoomed viewport the lower controls
         scroll inside the drawer, so a focused control is never left below the screen edge (WCAG 2.4.11) */
      max-height: calc(100vh - var(--hdr) - 16px); max-height: calc(100dvh - var(--hdr) - 16px);
      overflow-y: auto; overscroll-behavior: contain;
      flex-direction: column; align-items: stretch; gap: 12px; padding: 12px;
      border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); box-shadow: var(--shadow-2);
      opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.98); transform-origin: top right;
      transition: opacity .25s, transform .35s var(--ease), visibility 0s .3s;
    }
    html.js .hdr-panel[data-open="true"] {
      opacity: 1; visibility: visible; transform: none; transition: opacity .25s, transform .35s var(--ease);
    }
    html.js .nav { flex-direction: column; flex: none; padding: 0; border: 0; border-radius: 0; background: none; }
    html.js .nav a { padding: .8em 1em; border-radius: var(--r-s); font-size: 1rem; }
    html.js .prefs { flex: none; justify-content: space-between; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--line); }
  }
  /* without JS there is no drawer: the nav wraps under the wordmark (display options need JS and are hidden). The
     wrapped header is taller than --hdr, so it stops being sticky rather than cover focused content (WCAG 2.4.11). */
  @media (max-width: 940px) {
    html:not(.js) .site-header { position: relative; }
    html:not(.js) .hdr { flex-wrap: wrap; padding-block: 10px; }
    html:not(.js) .hdr-panel, html:not(.js) .nav { flex-wrap: wrap; }
  }

  /* buttons */
  .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 2rem; }
  .btn {
    --bx: 0px; --by: 0px;
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6em;
    min-height: 46px; padding: .85em 1.4em; border-radius: 999px; border: 1px solid transparent;
    font-weight: 650; font-size: .98rem; line-height: 1.1; text-decoration: none; text-align: center;
    transform: translate(var(--bx), var(--by));
    transition: transform .35s var(--ease), background .2s, box-shadow .3s, border-color .2s, color .2s;
  }
  .btn:hover { text-decoration: none; }
  .btn-primary {
    background: var(--accent); color: var(--on-accent);
    box-shadow: 0 1px 0 oklch(1 0 0 / .5) inset, 0 -2px 0 oklch(0 0 0 / .12) inset,
                0 10px 24px -10px var(--accent), 0 2px 4px oklch(0 0 0 / .15);
  }
  .btn-primary:hover {
    background: var(--accent-strong);
    box-shadow: 0 1px 0 oklch(1 0 0 / .5) inset, 0 -2px 0 oklch(0 0 0 / .12) inset,
                0 14px 32px -10px var(--accent), 0 2px 4px oklch(0 0 0 / .15);
  }
  .btn-primary:active { transform: translate(var(--bx), calc(var(--by) + 1px)); }
  .btn-ghost { border-color: var(--line-control); background: color-mix(in oklab, var(--surface) 50%, transparent); color: var(--ink); }
  .btn-ghost:hover { background: var(--surface); border-color: var(--ink-2); }

  /* hero */
  .hero { position: relative; isolation: isolate; padding-block: clamp(48px, 8vw, 120px) clamp(48px, 7vw, 100px); }
  .hero::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 100%; z-index: -1; pointer-events: none;
    background: radial-gradient(60% 70% at 8% -10%, var(--accent-soft), transparent 70%),
                radial-gradient(45% 55% at 100% 0%, color-mix(in oklab, var(--info) 10%, transparent), transparent 70%);
  }
  /* start, not end: the live details make the card taller than the copy, which must stay at the top */
  .hero-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
  @media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }
  .hero h1 { margin-bottom: 1.1rem; }
  .summary { margin-top: 1.4rem; color: var(--ink-2); max-width: 62ch; }
  .hero-fine { margin-top: 1rem; font-size: .9rem; color: var(--muted); }
  .status-row { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-top: 1.6rem; }
  .status-note { color: var(--ink-2); font-size: .95rem; max-width: 60ch; }

  /* status pill */
  .status {
    display: inline-flex; align-items: center; gap: .55em; padding: .55em .9em; border-radius: 999px;
    border: 1px solid var(--line-strong); background: var(--surface);
    font: 650 .76rem/1 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap;
  }
  .status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; }
  /* live data (assets/site.js): tones come from the status enum at run time (assets/portfolio.js STATUS_TONE),
     never from the HTML. The production-ready tone is "verified", so no file matches the host's deploy guard. */
  .status[data-state="verified"] { color: var(--good); background: var(--good-bg); border-color: transparent; }
  .status[data-state="verified"] .dot { background: var(--good); }
  .status[data-state="demo"] { color: var(--info); background: var(--info-bg); border-color: transparent; }
  .status[data-state="demo"] .dot { background: var(--info); }
  .status[data-state="beta"] { color: var(--info); background: var(--info-bg); border-color: transparent; }
  .status[data-state="beta"] .dot { background: var(--info); }
  .status[data-state="building"] { color: var(--warn); background: var(--warn-bg); border-color: transparent; }
  .status[data-state="building"] .dot { background: var(--warn); }
  .status[data-state="landing"], .status[data-state="offline"], .status[data-state="unknown"] { border-style: dashed; }
  .status a { color: inherit; }
  .live-health { display: inline-flex; align-items: center; gap: .45em; font: 600 .76rem/1 var(--f-mono); color: var(--ink-2); }
  .live-health .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; border: 2px solid var(--muted); }
  .live-health[data-h="up"] .dot { background: var(--good); border-color: var(--good); }
  .live-health[data-h="login"] .dot, .live-health[data-h="redirect"] .dot { background: var(--info); border-color: var(--info); }
  .live-health[data-h="degraded"] .dot, .live-health[data-h="down"] .dot { background: var(--warn); border-color: var(--warn); }
  .live-facts { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--line); }
  .live-src { margin-top: .8rem; font-size: .82rem; color: var(--muted); }
  .live-stale { color: var(--warn); font-weight: 650; }
  .unk { color: var(--muted); font-style: italic; }

  /* chips (feature and surface states) */
  .chip {
    display: inline-flex; align-items: center; gap: .4em; padding: .38em .7em; border-radius: 999px; width: fit-content;
    font: 650 .7rem/1 var(--f-mono); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
    border: 1px solid transparent;
  }
  .chip[data-chip="built"] { color: var(--good); background: var(--good-bg); }
  .chip[data-chip="partly"] { color: var(--warn); background: var(--warn-bg); }
  .chip[data-chip="planned"], .chip[data-chip="soon"], .chip[data-chip="internal"] { color: var(--muted); border: 1px dashed var(--line-control); }

  /* cards with cursor-following glow */
  .card {
    --mx: 50%; --my: 0%;
    position: relative; isolation: isolate; overflow: hidden;
    border-radius: var(--r-l); border: 1px solid var(--line); background: var(--surface);
    box-shadow: var(--shadow-1); padding: clamp(20px, 2.4vw, 34px);
    transition: border-color .3s, box-shadow .4s;
  }
  .card::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(420px circle at var(--mx) var(--my), color-mix(in oklab, var(--accent) 18%, transparent), transparent 65%);
    opacity: 0; transition: opacity .4s;
  }
  @media (hover: hover) and (pointer: fine) {
    .card:hover::before { opacity: 1; }
    .card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-2); }
  }

  .glance { padding: clamp(20px, 2.2vw, 30px); }
  .glance-h { font: 650 .74rem/1.2 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: .8rem; }
  .glance-list > div { display: grid; grid-template-columns: 9.5em 1fr; gap: 1rem; padding: .75rem 0; border-top: 1px solid var(--line); }
  .glance-list dt { color: var(--muted); font-size: .9rem; }
  .glance-list dd { font-weight: 600; }
  @media (max-width: 420px) { .glance-list > div { grid-template-columns: 1fr; gap: .15rem; } }

  .statement {
    font: 650 clamp(1.45rem, 1rem + 2vw, 2.6rem)/1.2 var(--f-display); letter-spacing: -.025em;
    color: var(--ink); max-width: 32ch; text-wrap: balance;
  }

  .feat { display: flex; flex-direction: column; gap: .75rem; min-height: 200px; }
  .feat h3 { margin-top: auto; padding-top: 1.4rem; }
  .feat p { color: var(--ink-2); }
  .feat[data-state="planned"] { background: color-mix(in oklab, var(--surface) 55%, transparent); border-style: dashed; border-color: var(--line-strong); }

  /* steps */
  .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: clamp(16px, 2vw, 28px); counter-reset: step; }
  .step { counter-increment: step; padding-top: 1.2rem; border-top: 2px solid var(--accent-line); }
  .step::before {
    content: counter(step, decimal-leading-zero); display: block; margin-bottom: .9rem;
    font: 650 .8rem/1 var(--f-mono); letter-spacing: .1em; color: var(--accent-text);
  }
  .step h3 { margin-bottom: .5rem; }
  .step p { color: var(--ink-2); }

  /* audience and surfaces */
  .audience { display: grid; gap: 10px; margin-top: 1.6rem; }
  .audience li {
    padding: .9rem 1.1rem; border-radius: var(--r-m); background: var(--surface); border: 1px solid var(--line);
    font-weight: 600; display: flex; gap: .7em; align-items: baseline;
  }
  .audience li::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--accent-line); flex: none; transform: translateY(-1px); }
  .surfaces { display: grid; gap: 10px; margin-top: 1.6rem; }
  .surfaces li {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
    padding: .9rem 1.1rem; border-radius: var(--r-m); background: var(--surface); border: 1px solid var(--line);
  }
  .surf-name { font-weight: 650; }
  .empty-note {
    margin-top: 1.6rem; padding: 1.2rem; border-radius: var(--r-m); border: 1.5px dashed var(--line-strong); color: var(--ink-2);
  }

  /* pricing */
  .plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: clamp(12px, 1.4vw, 20px); }
  .plan { display: flex; flex-direction: column; gap: .7rem; }
  .plan-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2em .5em; }
  .price { font: 750 clamp(1.8rem, 1.4rem + 1.4vw, 2.5rem)/1.05 var(--f-display); letter-spacing: -.03em; color: var(--ink); }
  .plan-period { color: var(--muted); font-size: .92rem; }
  .plan-notes { color: var(--ink-2); font-size: .95rem; }
  .plan-tbd { border-style: dashed; border-color: var(--line-strong); box-shadow: none; }
  .plan-tbd p { color: var(--ink-2); }
  .price-note { margin-top: 1.4rem; color: var(--muted); font-size: .95rem; }

  /* FAQ */
  .faq { border-top: 1px solid var(--line-strong); max-width: 900px; }
  .faq details { border-bottom: 1px solid var(--line-strong); }
  .faq summary {
    list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: 1.2rem;
    padding: 20px 0; font: 650 clamp(1.02rem, .98rem + .3vw, 1.2rem)/1.35 var(--f-display); color: var(--ink);
  }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after {
    content: "+"; flex: none; font: 500 1.5rem/1 var(--f-mono); color: var(--accent-text);
    transition: transform .35s var(--ease);
  }
  .faq details[open] summary::after { transform: rotate(45deg); }
  .faq-a { padding: 0 0 22px; color: var(--ink-2); }

  /* disclaimer */
  .disclaimer {
    padding: clamp(18px, 2vw, 26px); border-radius: var(--r-m); border: 1px solid var(--line-strong);
    border-left: 4px solid var(--warn); background: var(--warn-bg); color: var(--ink);
  }

  /* related */
  .related { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: clamp(12px, 1.4vw, 20px); }
  .rel { display: flex; flex-direction: column; gap: .5rem; height: 100%; text-decoration: none; color: var(--ink); }
  .rel:hover { text-decoration: none; }
  .rel-name { font: 700 1.2rem/1.2 var(--f-display); letter-spacing: -.02em; }
  .rel-name::after { content: " \2192"; color: var(--accent-text); }
  .rel-tag { color: var(--ink-2); font-size: .95rem; margin-bottom: .4rem; }

  /* directory (root index) */
  .dir { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(28px, 4vw, 56px); }
  .dir-group h2 { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.8rem); margin-bottom: 1rem; }
  .dir-list li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding: .7rem 0; border-top: 1px solid var(--line); }
  .dir-list a { font-weight: 650; }

  /* footer with watermark wordmark */
  .site-footer {
    position: relative; overflow: hidden; isolation: isolate; background: var(--bg-sunk);
    border-top: 1px solid var(--line); padding: clamp(48px, 6vw, 88px) 0 clamp(96px, 18vw, 260px);
  }
  .foot { position: relative; z-index: 1; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(28px, 4vw, 64px); }
  @media (max-width: 760px) { .foot { grid-template-columns: 1fr; } }
  .foot-title { font: 750 1.3rem/1.2 var(--f-display); letter-spacing: -.02em; }
  .foot-meta { margin-top: .6rem; color: var(--muted); font-size: .92rem; }
  .foot-h { font: 650 .74rem/1.2 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: .9rem; }
  .foot-list { display: grid; gap: .45rem; }
  .foot-mega {
    position: absolute; right: -1vw; bottom: -.2em; z-index: 0; white-space: nowrap;
    font: 800 clamp(5rem, 22vw, 24rem)/.8 var(--f-display); letter-spacing: -.06em;
    color: transparent; -webkit-text-stroke: 1px var(--line-strong); opacity: .8; pointer-events: none; user-select: none;
  }
  @supports not (-webkit-text-stroke: 1px black) { .foot-mega { color: var(--line); } }
}

/* ------------------------------------------------------------------ looks */
@layer looks {
  :root[data-look="classic"] {
    --f-display: var(--f-serif);
    --r-s: 4px; --r-m: 4px; --r-l: 6px; --r-xl: 8px;
    --shadow-1: none; --shadow-2: none;
  }
  [data-look="classic"] :is(h1, h2, h3):not(.glance-h, .foot-h, .eyebrow),
  [data-look="classic"] .statement, [data-look="classic"] .price, [data-look="classic"] .foot-title,
  [data-look="classic"] .rel-name, [data-look="classic"] .wordmark, [data-look="classic"] .faq summary {
    letter-spacing: 0; font-weight: 600;
  }
  [data-look="classic"] h1 { font-size: clamp(2.1rem, 1.4rem + 3.6vw, 4.2rem); line-height: 1.08; }
  [data-look="classic"] h2:not(.glance-h, .foot-h, .eyebrow) { font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.6rem); }
  [data-look="classic"] .dir-group h2 { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.8rem); }
  [data-look="classic"] .site-header { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: var(--line-strong); }
  [data-look="classic"] .nav, [data-look="classic"] .seg { border-radius: 4px; }
  [data-look="classic"] .nav a, [data-look="classic"] .seg button, [data-look="classic"] .theme-btn,
  [data-look="classic"] .menu-btn, [data-look="classic"] .btn, [data-look="classic"] .status { border-radius: 3px; }
  [data-look="classic"] .btn-primary, [data-look="classic"] .btn-primary:hover { box-shadow: none; }
  [data-look="classic"] .hero::before, [data-look="classic"] .card::before { display: none; }
  [data-look="classic"] .section-alt { background: var(--bg); }
  [data-look="classic"] .section + .section, [data-look="classic"] .section-tight { border-top: 1px solid var(--line-strong); }
  [data-look="classic"] .section { padding-block: clamp(48px, 6vw, 88px); }
  [data-look="classic"] .bento { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
  [data-look="classic"] .bento > * { grid-column: auto; }
  [data-look="classic"] .card { border-color: var(--line-strong); }
  [data-look="classic"] .feat { min-height: 0; }
  [data-look="classic"] .feat h3 { margin-top: 0; padding-top: .2rem; }
  [data-look="classic"] .eyebrow { font-family: var(--f-text); letter-spacing: .08em; }
  [data-look="classic"] .eyebrow::before { display: none; }
  [data-look="classic"] .chip { border-radius: 3px; }
  [data-look="classic"] .faq summary { font-family: var(--f-serif); }
  [data-look="classic"] .foot-mega { display: none; }
  [data-look="classic"] .site-footer { padding-bottom: clamp(48px, 6vw, 88px); }
}

/* ------------------------------------------------------------------ motion */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
@layer motion {
  .status[data-state="verified"] .dot { animation: ping 2.4s infinite; }
  @keyframes ping {
    0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--good) 55%, transparent); }
    70% { box-shadow: 0 0 0 7px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
  }

  /* scroll-driven reveals: CSS only; with no support (or no JS) the content is simply visible */
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      :root:not([data-look="classic"]) .rv {
        animation: rv-in linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 75%;
      }
    }
  }
  @keyframes rv-in { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }

  ::view-transition-old(root) { animation: 280ms var(--ease-io) both vt-out; }
  ::view-transition-new(root) { animation: 500ms var(--ease) both vt-in; }
  ::view-transition-group(site-header) { animation-duration: 0s; }
  @keyframes vt-out { to { opacity: 0; transform: translateY(-10px); } }
  @keyframes vt-in { from { opacity: 0; transform: translateY(16px); } }

  /* Classic look: no motion at all */
  :root[data-look="classic"] *, :root[data-look="classic"] *::before, :root[data-look="classic"] *::after {
    animation: none !important; transition: none !important;
  }
  :root[data-look="classic"]::view-transition-old(root), :root[data-look="classic"]::view-transition-new(root) { animation: none !important; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: .001ms !important; animation-iteration-count: 1 !important;
      transition-duration: .001ms !important; scroll-behavior: auto !important;
    }
    ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  }
}

/* Generator v2 page components (multi-page sites on their own domain). Method: portfolio-hq
   inputs/DESIGN-SYSTEM-WEBSITE.md; tokens and base components come from assets/site.css, which build.py puts first
   in the same file. Same cascade layers; the brand theme block is appended last. No colours are hand-written here:
   every colour is a token. */

@layer components {
  /* header extras */
  .btn-sm { padding: .5em .95em; font-size: .9rem; min-height: 40px; }
  .btn-text { background: none; border: 0; color: var(--accent-text); text-decoration: underline; text-underline-offset: .2em; padding-inline: .2em; }
  .btn-text:hover { text-decoration-thickness: 2px; }
  .hdr-cta { flex: none; }
  @media (max-width: 560px) { .hdr-cta { display: none; } }
  .wm-mark { width: 1.15em; height: 1.15em; border-radius: .3em; background: var(--accent); flex: none; align-self: center;
    box-shadow: inset 0 0 0 .2em var(--accent), inset 0 0 0 .32em var(--on-accent); }
  .lang { display: flex; gap: .4rem; font-size: .9rem; }
  .lang a { padding: .35em .6em; border-radius: var(--r-s); color: var(--ink-2); text-decoration: none; }
  .lang a[aria-current="true"] { color: var(--ink); background: var(--surface-2); }

  /* breadcrumb */
  .crumbs { padding-top: 1.1rem; font-size: .86rem; color: var(--muted); }
  .crumbs ol { display: flex; flex-wrap: wrap; gap: .25rem .5rem; }
  .crumbs li + li::before { content: "/"; margin-right: .5rem; color: var(--line-strong); }
  .crumbs a { color: var(--ink-2); text-decoration: none; }
  .crumbs a:hover { text-decoration: underline; }
  .crumbs [aria-current] { color: var(--ink); }

  /* hub product-section navigation */
  .subnav ul { display: flex; flex-wrap: wrap; gap: .4rem; padding-bottom: .4rem; border-bottom: 1px solid var(--line); }
  .subnav a { display: inline-flex; padding: .45em .9em; border-radius: var(--r-s); color: var(--ink-2); text-decoration: none; font-size: .92rem; }
  .subnav a:hover { background: var(--surface-2); color: var(--ink); }
  .subnav a[aria-current="page"] { background: var(--ink); color: var(--bg); }

  /* heroes */
  .hero-v2 .hero-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; }
  .hero-v2 h1 { font-size: clamp(2.2rem, 1.2rem + 3.6vw, 4.6rem); }
  .section .wrap > h2:not(.eyebrow), .section-tight .wrap > h2, .two-col > div > h2 { margin-bottom: 1rem; }
  .who-grid { align-items: start; }
  .who-grid .sub-h { margin-top: 1.6rem; }
  .status-panel { display: grid; gap: .8rem; padding: clamp(1.4rem, 2.5vw, 2rem); align-content: start; }
  .status-panel h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); }
  @media (max-width: 900px) { .hero-v2 .hero-grid { grid-template-columns: 1fr; } }
  .hero-visual { position: relative; display: grid; gap: 1rem; justify-items: end; }
  .hero-visual > .frame { width: 100%; }
  .page-hero { position: relative; padding-block: clamp(28px, 5vw, 72px) clamp(24px, 4vw, 56px); }
  .page-hero h1 { font-size: clamp(2rem, 1.1rem + 3.6vw, 4rem); margin-bottom: .9rem; }
  .ph-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(24px, 4vw, 64px); align-items: end; }
  @media (max-width: 760px) { .ph-grid { grid-template-columns: 1fr; } }
  .ph-side { display: grid; gap: 1rem; justify-items: end; }
  .actions { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; margin-top: 1.6rem; }
  .app-slot:empty { display: none; }
  .app-slot { display: contents; }

  /* the content frame (design system 7: one frame for every image) */
  .frame { margin: 0; border-radius: var(--r-l); overflow: hidden; border: 1px solid var(--line);
    background: var(--surface-3); box-shadow: var(--shadow-post, var(--shadow-2)); }
  .frame img, .frame video, .frame picture { display: block; width: 100%; height: auto; }
  .frame figcaption { padding: .7rem 1rem; font-size: .88rem; color: var(--muted); background: var(--surface); }
  .r-16x10 { aspect-ratio: 16 / 10; } .r-16x9 { aspect-ratio: 16 / 9; } .r-4x5 { aspect-ratio: 4 / 5; }
  .r-9x16 { aspect-ratio: 9 / 16; } .r-4x3 { aspect-ratio: 4 / 3; } .r-1x1 { aspect-ratio: 1 / 1; }
  .media:not(.slot) { aspect-ratio: auto; }

  /* reserved real-media slot (UNIVERSAL 30): designed, clearly pending, never a fake screenshot. The label is the
     element's data-media-label, drawn by CSS, so it is not page text. */
  .slot { position: relative; display: grid; place-items: center; isolation: isolate;
    background:
      radial-gradient(120% 80% at 85% 0%, var(--accent-soft), transparent 60%),
      repeating-linear-gradient(135deg, transparent 0 14px, color-mix(in oklab, var(--line) 60%, transparent) 14px 15px),
      var(--surface-2); }
  .slot::after { content: attr(data-media-label); position: absolute; left: 1rem; right: 1rem; bottom: 1rem;
    padding: .55em .8em; border-radius: var(--r-s); background: var(--glass); border: 1px dashed var(--line-control);
    font: 600 .72rem/1.35 var(--f-mono); letter-spacing: .06em; color: var(--ink-2); text-align: center; }
  .slot-ui { width: 62%; display: grid; gap: .55rem; opacity: .9; }
  .slot-ui span { display: block; height: .7rem; border-radius: 99px; background: color-mix(in oklab, var(--ink) 10%, transparent); }
  .slot-ui span:nth-child(1) { width: 46%; height: .95rem; background: color-mix(in oklab, var(--accent) 45%, transparent); }
  .slot-ui span:nth-child(2) { width: 88%; } .slot-ui span:nth-child(3) { width: 70%; }
  .slot-play { position: absolute; width: 64px; height: 64px; border-radius: 50%; background: var(--surface);
    border: 1px solid var(--line-strong); box-shadow: var(--shadow-1); }
  .slot-play::before { content: ""; position: absolute; left: 26px; top: 20px; border-style: solid;
    border-width: 12px 0 12px 18px; border-color: transparent transparent transparent var(--accent-text); }
  @media (max-width: 480px) { .slot::after { font-size: .62rem; left: .5rem; right: .5rem; bottom: .5rem; } }

  /* runtime status (space reserved: no layout shift when the data arrives) */
  .site-status { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .5rem; min-height: 34px; }
  .ss-health { font-size: .88rem; color: var(--ink-2); }
  .status-list { display: grid; gap: 1rem; }
  .status-card { display: grid; gap: .6rem; }
  .sc-h { font-size: 1.35rem; }

  /* sections */
  .statement { font: 650 clamp(1.4rem, 1rem + 1.8vw, 2.4rem)/1.25 var(--f-display); letter-spacing: -.02em; max-width: 34ch; }
  .statement-sm { font: 600 clamp(1.15rem, 1rem + .8vw, 1.6rem)/1.35 var(--f-display); max-width: 48ch; }
  .muted { color: var(--muted); }
  .more { margin-top: 1.4rem; font-weight: 600; }
  .more a { text-decoration: none; }
  .more a:hover { text-decoration: underline; }
  .sub-h { font-size: 1.1rem; margin-bottom: .8rem; }
  .sub-h2 { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.8rem); margin-bottom: 1rem; }
  .how-grid { align-items: start; }
  .teaser-col { display: grid; gap: .8rem; align-content: start; }
  .feat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: clamp(12px, 1.4vw, 20px); }
  .aud-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 12px; }
  .aud { padding: 1.2rem 1.3rem; }
  .aud h3 { font-size: 1.05rem; }
  .steps-page { gap: clamp(20px, 3vw, 36px); }
  .step-lg h2 { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.9rem); margin-bottom: .5rem; }
  .table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); }
  .table-wrap table { width: 100%; font-size: .95rem; }
  .table-wrap th, .table-wrap td { text-align: left; padding: .7rem 1rem; border-bottom: 1px solid var(--line); vertical-align: top; }
  .table-wrap tr:last-child th, .table-wrap tr:last-child td { border-bottom: 0; }
  .table-wrap thead th { font: 600 .75rem/1.2 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  .t-right { text-align: right !important; } .t-center { text-align: center !important; }
  .notes, .mod-list, .ask-list, .link-list { display: grid; gap: .6rem; }
  .notes li { padding-left: 1.2rem; position: relative; }
  .notes li::before { content: ""; position: absolute; left: 0; top: .65em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-line); }
  .mod-list li { display: flex; align-items: center; gap: .7rem; }
  .ask-list li { padding: .8rem 1rem; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); }
  .link-list { margin-top: 1.4rem; }
  .case-grid, .prod-grid, .post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: clamp(14px, 1.6vw, 24px); }
  .case { display: grid; gap: .5rem; padding: 1.5rem; text-decoration: none; color: inherit; height: 100%; }
  .case-h { font-size: 1.35rem; }
  .prod-card { display: grid; gap: .6rem; align-content: start; padding: 1.5rem; }
  .pcard-h { font-size: 1.4rem; }
  .pcard-h a { color: var(--ink); text-decoration: none; }
  .pcard-h a:hover { color: var(--accent-text); }
  .pcard-out { font-weight: 600; margin-top: .2rem; }
  .pcard-out a { text-decoration: none; }
  .people { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 12px; margin-top: 1rem; }
  .person { padding: 1.2rem 1.3rem; }
  .person h3 { font-size: 1.1rem; }

  /* contact (forms fallback, FRONTEND-MASTER 10) and brochure */
  .contact-card { display: grid; gap: .8rem; padding: clamp(1.4rem, 2.5vw, 2rem); }
  .contact-card h2, .contact-card h3 { font-size: 1.4rem; }
  .contact-list { display: grid; gap: .45rem; font-size: 1.05rem; }
  .contact-list a { font-weight: 600; }
  .c-name { font-weight: 650; }
  .c-company { color: var(--muted); }
  .form-note { font-size: .92rem; color: var(--ink-2); padding: .7rem .9rem; border-left: 3px solid var(--accent-line); background: var(--surface-2); border-radius: 0 var(--r-s) var(--r-s) 0; }
  .brochure { display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; align-items: center; padding: 1.4rem; margin-top: 1.2rem; }
  .brochure:not(:has(.brochure-cover)) { grid-template-columns: 1fr; }
  .brochure h2, .brochure h3 { font-size: 1.25rem; margin-bottom: .4rem; }
  .brochure-cover { width: 120px; height: auto; border-radius: var(--r-s); box-shadow: var(--shadow-1); }
  .cta-band { background: color-mix(in oklab, var(--accent) 12%, var(--bg)); border-block: 1px solid var(--line); }
  .cta-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem; }
  .cta-inner h2 { font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2.2rem); }

  /* live form (previews only until D-T3) */
  .lead-form { display: grid; gap: .5rem; padding: clamp(1.4rem, 2.5vw, 2rem); }
  .lead-form label { font-weight: 600; font-size: .95rem; margin-top: .4rem; }
  .lead-form input:not([type="checkbox"]), .lead-form textarea { width: 100%; min-height: 44px; padding: .6rem .8rem;
    border: 1px solid var(--line-control); border-radius: var(--r-s); background: var(--surface); color: var(--ink); font: inherit; }
  .lead-form .check { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; }
  .lead-form .check input { width: 22px; height: 22px; margin-top: .15rem; flex: none; }
  .lead-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  .form-status:empty { display: none; }
  .form-status { padding: .7rem .9rem; border-radius: var(--r-s); background: var(--surface-2); }
  .form-status[data-tone="error"] { color: var(--warn); background: var(--warn-bg); }
  .form-status[data-tone="ok"] { color: var(--good); background: var(--good-bg); }

  /* prose (approved Markdown pages and posts) */
  .prose { max-width: 72ch; }
  .prose > * + * { margin-top: 1.1em; }
  .prose h2 { font-size: clamp(1.45rem, 1.15rem + 1.3vw, 2.1rem); margin-top: 2em; }
  .prose h3 { margin-top: 1.6em; }
  .prose ul, .prose ol { padding-left: 1.3em; display: grid; gap: .45em; }
  .prose blockquote { border-left: 3px solid var(--accent-line); padding: .2em 0 .2em 1.1em; color: var(--ink-2); }
  .prose code { font: .9em var(--f-mono); background: var(--surface-2); padding: .1em .35em; border-radius: 5px; }
  .prose pre { overflow-x: auto; padding: 1rem 1.2rem; border-radius: var(--r-m); background: var(--bg-sunk); border: 1px solid var(--line); }
  .prose pre code { background: none; padding: 0; }
  .prose hr { border: 0; border-top: 1px solid var(--line); margin-block: 2em; }
  .md-fig { margin-block: 1.6em; }

  /* blog */
  .post-card { display: grid; grid-template-rows: auto 1fr; padding: 0; overflow: hidden; height: 100%; }
  .pc-img { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface-3); }
  .pc-img img { width: 100%; height: 100%; object-fit: cover; }
  .pc-body { display: grid; gap: .5rem; padding: 1.2rem 1.3rem 1.4rem; align-content: start; }
  .pc-meta { font-size: .82rem; color: var(--muted); }
  .pc-meta a { color: var(--accent-text); }
  .pc-title { font-size: 1.25rem; }
  .pc-title a { color: var(--ink); text-decoration: none; }
  .pc-title a:hover { color: var(--accent-text); }
  .cats ul { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.6rem; }
  .cats a { display: inline-flex; padding: .4em .85em; border-radius: 99px; border: 1px solid var(--line-strong); color: var(--ink-2); text-decoration: none; font-size: .9rem; }
  .cats a[aria-current="page"], .cats a:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
  .pager { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 2rem; }
  .post-head { padding-top: clamp(24px, 4vw, 56px); }
  .post-head h1 { font-size: clamp(2rem, 1.2rem + 3.2vw, 3.6rem); max-width: 22ch; margin-bottom: .9rem; }
  .byline { color: var(--muted); font-size: .95rem; }
  .post-hero { margin-block: clamp(20px, 3vw, 40px); }
  .post-layout { display: grid; gap: 1.6rem; max-width: 800px; padding-bottom: clamp(40px, 6vw, 80px); }
  .summary-box { padding: 1.1rem 1.3rem; font-size: 1.08rem; color: var(--ink-2); max-width: none; }
  .toc { padding: 1rem 1.3rem; }
  .toc-h { font: 600 .78rem/1.2 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: .6rem; }
  .toc ol { padding-left: 1.2em; display: grid; gap: .3em; }
  .takeaways { padding: 1.2rem 1.4rem; border-left: 4px solid var(--accent-line); }
  .takeaways ul { padding-left: 1.2em; display: grid; gap: .4em; margin-top: .6rem; }
  .author { padding: 1rem 1.3rem; }
  .author-name { font-weight: 650; }
  .sources ul { padding-left: 1.2em; display: grid; gap: .3em; font-size: .92rem; word-break: break-word; }
  .post-products { font-weight: 600; }

  /* mascot box (sizes per tier come from sitegen/mascot.py; the element itself is styled by assets/mascot/mascot.css) */
  .mk-slot { position: relative; width: var(--mk-w, 120px); flex: none; display: grid; justify-items: center; gap: .4rem; }
  .mk-slot site-mascot { display: block; width: 100%; }
  .mk-slot site-mascot img { width: 100%; height: auto; }
  .mk-at-hero { justify-self: start; margin-top: -1rem; }
  .mk-at-end { justify-self: end; }
  .mk-toggle { display: inline-flex; align-items: center; gap: .45em; min-height: 32px; padding: .3em .7em;
    border: 1px solid var(--line-strong); border-radius: 99px; font-size: .8rem; color: var(--ink-2); background: var(--surface); }
  .mk-toggle[aria-pressed="false"] { color: var(--muted); border-style: dashed; }
  .mk-toggle-ic { width: .7em; height: .7em; flex: none;
    background: linear-gradient(90deg, currentColor 0 35%, transparent 35% 65%, currentColor 65%); }
  .mk-toggle[aria-pressed="false"] .mk-toggle-ic { background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
  .mk-toggle-local { font-size: .72rem; min-height: 28px; }
  .prefs .mk-toggle { min-height: 36px; }

  .foot-preview { margin-top: .8rem; padding: .5rem .7rem; border: 1px dashed var(--warn); border-radius: var(--r-s); color: var(--warn); font-size: .85rem; }
  .empty-note { color: var(--muted); }
}

@layer looks {
  [data-look="classic"] .frame { box-shadow: none; }
  [data-look="classic"] .slot { background: var(--surface-2); }
  [data-look="classic"] .cta-band { background: var(--bg); }
  [data-look="classic"] .page-hero h1, [data-look="classic"] .post-head h1 { font-family: var(--f-serif); letter-spacing: -.01em; font-weight: 600; }
}

@layer motion {
  @media (prefers-reduced-motion: no-preference) {
    :root:not([data-look="classic"]) .mk-at-hero { animation: mk-in .7s var(--ease) both .2s; }
    @keyframes mk-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  }
  @media (prefers-reduced-motion: reduce) {
    .mk-slot, .mk-slot * { animation: none !important; transition: none !important; }
  }
}

/* Mascot boxes: generated by sitegen/mascot.py from TIER_MAX_360 / TIER_MAX_WIDE. Do not edit. */
@layer components {
  .mk-slot.mk-hero { --mk-w: 260px; }
  .mk-slot.mk-mid { --mk-w: 168px; }
  .mk-slot.mk-face { --mk-w: 96px; }
  .mk-slot.mk-peek { --mk-w: 84px; }
  @media (max-width: 480px) {
    .mk-slot.mk-hero { display: none; }
    .mk-slot.mk-mid { --mk-w: 88px; }
    .mk-slot.mk-face { --mk-w: 64px; }
    .mk-slot.mk-peek { --mk-w: 56px; }
  }
}

/* Generated by build.py from content/site.json brands.neutral. Do not edit. */
@layer tokens {
  :root {
    --accent: light-dark(oklch(0.88 0.19 125), oklch(0.88 0.19 125));
    --accent-strong: light-dark(oklch(0.915 0.19 125), oklch(0.915 0.19 125));
    --on-accent: light-dark(oklch(0.2 0.04 265), oklch(0.2 0.04 265));
    --accent-text: light-dark(oklch(0.45 0.13 130), oklch(0.88 0.19 125));
    --accent-line: light-dark(oklch(0.55 0.15 130), oklch(0.88 0.19 125));
  }
}
@supports not (color: light-dark(#000, #fff)) {
  @layer tokens {
  :root {
    --accent: oklch(0.88 0.19 125);
    --accent-strong: oklch(0.915 0.19 125);
    --on-accent: oklch(0.2 0.04 265);
    --accent-text: oklch(0.45 0.13 130);
    --accent-line: oklch(0.55 0.15 130);
  }
  }
}

/* lawstreet.si (AI Lawyer): "the annotated page". The site is set like a well-kept legal brief: serif headings, ruled
   paper, section marks, margin notes that carry the honest status next to each claim, and the neutral brand's lime
   accent used as what it looks like on paper, a highlighter. Built on the shared tokens (assets/site.css): no new
   colours, only mixes of existing tokens, so light, dark and the Classic look keep working. Appended by build.py after
   the brand theme, in the same cascade layers. Motion: hero assembly, highlighter sweeps and the walker on the street;
   all of it stops under reduced motion, in the Classic look and with the site-wide motion setting of the browser. */

/* ------------------------------------------------------------------ tokens */
@layer tokens {
  :root {
    --f-display: var(--f-serif);
    --r-l: 14px; --r-m: 10px; --r-xl: 18px;
    --ls-rule: color-mix(in oklab, var(--ink) 8%, transparent);
    --ls-rule-2: color-mix(in oklab, var(--ink) 14%, transparent);
    --ls-margin: color-mix(in oklab, var(--accent-line) 55%, transparent);
    --ls-hl: light-dark(color-mix(in oklab, var(--accent) 72%, transparent), color-mix(in oklab, var(--accent) 46%, transparent));
    --ls-hl-band: 40%;
    --ls-paper: var(--surface);
  }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ls-hl-band: 26%; } }
  :root[data-theme="dark"] { --ls-hl-band: 26%; }
  @supports not (color: light-dark(#000, #fff)) {
    :root { --ls-hl: color-mix(in oklab, var(--accent) 72%, transparent); }
    @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ls-hl: color-mix(in oklab, var(--accent) 46%, transparent); } }
    :root[data-theme="dark"] { --ls-hl: color-mix(in oklab, var(--accent) 46%, transparent); }
  }
}

/* ------------------------------------------------------------------ base type */
@layer base {
  h1, h2, h3 { font-weight: 600; letter-spacing: -.012em; }
  h1 { line-height: 1.05; }
  h2 { line-height: 1.1; }
  mark.hl {
    color: inherit; padding: 0 .06em; border-radius: .18em;
    background: linear-gradient(100deg, transparent .15em, var(--ls-hl) .28em, var(--ls-hl) calc(100% - .28em), transparent calc(100% - .15em))
                0 88% / 100% var(--ls-hl-band) no-repeat;
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
  }
}

/* ------------------------------------------------------------------ components */
@layer components {
  /* wordmark: a small sheet with a folded corner and one highlighted line */
  .wm-mark {
    position: relative; width: .92em; height: 1.16em; border-radius: 2px .32em 2px 2px; flex: none; align-self: center;
    background:
      linear-gradient(var(--accent), var(--accent)) .16em 64% / 62% .17em no-repeat,
      repeating-linear-gradient(180deg, transparent 0 .2em, var(--ls-rule-2) .2em calc(.2em + 1px)) .16em .3em / 62% 70% no-repeat,
      var(--surface);
    box-shadow: inset 0 0 0 1.5px var(--ink);
  }
  .wordmark { font-family: var(--f-serif); font-weight: 600; letter-spacing: 0; }

  /* the required disclaimer, near the top of the pages where it matters (brief section 2) */
  .ls-disclaimer {
    margin-top: 1.4rem; padding: .85rem 1.1rem; max-width: 64ch; border-radius: 8px;
    border: 1px solid var(--line-strong); border-left: 4px solid var(--warn);
    background: color-mix(in oklab, var(--surface) 82%, transparent); color: var(--ink-2); font-size: .9rem; line-height: 1.5;
  }
  .ls-disclaimer p { max-width: none; }
  .ls-dc-tag { font: 700 .68rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--warn); margin-right: .45em; }
  .ls-dc-top { margin: 0 0 clamp(8px, 2vw, 24px); max-width: 80ch; }
  .ls-dc-inline { margin-block: 1.2rem 0; }
  .ls-dc-post { margin-block: 0 .6rem; max-width: none; }
  .ls-post-note { font-size: .88rem; color: var(--muted); margin-bottom: .4rem; }
  .foot-disclaimer { padding: .6rem .8rem; border-left: 3px solid var(--warn); background: var(--surface); border-radius: 0 6px 6px 0; color: var(--ink-2); }

  /* hero: ruled paper with a margin line */
  .ls-hero { padding-block: clamp(28px, 5.5vw, 92px) clamp(40px, 6vw, 96px); }
  .ls-hero::before {
    background:
      linear-gradient(90deg, transparent 0 calc(var(--gutter) - 14px), var(--ls-margin) calc(var(--gutter) - 14px) calc(var(--gutter) - 12px), transparent calc(var(--gutter) - 12px) calc(var(--gutter) - 8px), var(--ls-margin) calc(var(--gutter) - 8px) calc(var(--gutter) - 7px), transparent calc(var(--gutter) - 7px)),
      repeating-linear-gradient(180deg, transparent 0 33px, var(--ls-rule) 33px 34px);
    -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent);
    mask-image: linear-gradient(180deg, #000 55%, transparent);
  }
  .ls-hero-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(28px, 5vw, 84px); align-items: center; }
  .ls-hero h1 { font-size: clamp(2.2rem, 1.1rem + 2.6vw, 4rem); margin-bottom: 1.1rem; max-width: 22ch; }
  .ls-hero .lede { max-width: 50ch; }
  .ls-hero .actions { margin-top: 1.8rem; }
  .ls-hero .status-row { margin-top: 1.4rem; }
  .ls-hero-visual { position: relative; display: grid; justify-items: center; }
  .ls-figure { margin: 0; width: min(100%, 560px); }
  .ls-figure figcaption { margin: .5rem auto 0; max-width: 44ch; text-align: center; font-size: .8rem; color: var(--muted); }
  .ls-hero-visual .mk-slot { position: absolute; left: 2%; bottom: 3.2rem; }
  @media (max-width: 900px) {
    .ls-hero-grid { grid-template-columns: 1fr; }
    .ls-figure { width: min(100%, 460px); }
    .ls-hero-visual .mk-slot { left: 1.2rem; top: -1.4rem; bottom: auto; }
  }

  /* the annotated page (concept illustration, inline SVG) */
  .ap { display: block; width: 100%; height: auto; overflow: visible; }
  .ap-sheet { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1.2; }
  .ap-sheet-back { fill: var(--surface-2); }
  .ap-back { transform-box: fill-box; transform-origin: 50% 100%; transform: rotate(-4deg) translate(-6px, 4px); }
  .ap-main { filter: drop-shadow(0 18px 24px color-mix(in oklab, var(--ink) 14%, transparent)); }
  .ap-fold { fill: var(--surface-3); stroke: var(--line-strong); stroke-width: 1.2; }
  .ap-margin { stroke: var(--ls-margin); stroke-width: 1.6; }
  .ap-ln { fill: color-mix(in oklab, var(--ink) 15%, transparent); transform-box: fill-box; transform-origin: 0 50%; }
  .ap-ln-head { fill: color-mix(in oklab, var(--ink) 34%, transparent); }
  .ap-ln-s { fill: color-mix(in oklab, var(--ink) 18%, transparent); }
  .ap-hl { fill: var(--ls-hl); transform-box: fill-box; transform-origin: 0 50%; }
  .ap-src-hl { fill: var(--ls-hl); }
  .ap-fn { transform-box: fill-box; transform-origin: 50% 50%; }
  .ap-fn circle { fill: var(--ink); }
  .ap-fn text { fill: var(--bg); font: 700 12px/1 var(--f-mono); }
  .ap-fn-src text { font-size: 10px; }
  .ap-thread { fill: none; stroke: var(--accent-text); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
  .ap-thread-2 { stroke: var(--ink-2); stroke-width: 1.6; stroke-dasharray: .012 .016; }
  .ap-src { transform-box: fill-box; transform-origin: 50% 50%; }
  .ap-src .ap-sheet-src { filter: drop-shadow(0 10px 14px color-mix(in oklab, var(--ink) 12%, transparent)); }
  .ap-door-ring { fill: color-mix(in oklab, var(--accent) 20%, transparent); stroke: var(--accent-line); stroke-width: 1.2; }
  .ap-door { fill: var(--surface); stroke: var(--ink); stroke-width: 1.8; }
  .ap-knob { fill: var(--ink); }

  /* sections: a section mark in the margin, like a numbered paragraph of a brief */
  .ls-sec-no {
    display: flex; align-items: center; gap: .8rem; margin-bottom: 1rem;
    font: 600 .82rem/1 var(--f-mono); letter-spacing: .1em; color: var(--accent-text);
  }
  .ls-sec-no::after { content: ""; flex: 1; max-width: 9rem; height: 1px; background: var(--ls-margin); }
  .ls-sec-head { margin-bottom: clamp(28px, 4vw, 52px); max-width: 66rem; }
  .ls-sec-head h2 { max-width: 22ch; }
  .ls-muted-lg { margin-top: 1rem; font-size: clamp(1.02rem, .96rem + .3vw, 1.18rem); color: var(--ink-2); max-width: 62ch; }
  .ls-split { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
  .ls-split-narrow { grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr); align-items: start; }
  .ls-split-copy h2, .ls-split > div > h2 { margin-bottom: 1.1rem; }
  .ls-sec .frame.media.slot { max-width: 1040px; margin-inline: auto; }
  .ls-slot-col .frame.media.slot { max-width: none; }
  .mk-slot { grid-template-columns: minmax(0, 1fr); }   /* the tier width holds; the Pause label may overhang */
  .mk-slot .mk-toggle-local { white-space: nowrap; justify-self: end; max-width: none; }   /* overhangs inward, never off screen */
  .ls-hero-visual .mk-slot .mk-toggle-local { justify-self: start; }
  .ls-split .statement { font-family: var(--f-serif); font-weight: 500; letter-spacing: -.01em; }
  @media (max-width: 860px) { .ls-split, .ls-split-narrow { grid-template-columns: 1fr; } }

  /* photographs (generated illustrations), mounted like prints */
  .ls-photo { margin: 0; padding: clamp(6px, .7vw, 10px); border-radius: 6px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-2); }
  .ls-photo picture, .ls-photo img { display: block; width: 100%; height: auto; border-radius: 3px; }
  .ls-photo figcaption { padding: .55rem .2rem 0; font-size: .78rem; color: var(--muted); }
  .ls-photo-tilt { rotate: 1.3deg; }
  .ls-photo-note { margin-top: 1.4rem; font-size: .85rem; color: var(--muted); }

  /* information or advice: the cases on ruled cards */
  .ls-cases { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: clamp(12px, 1.4vw, 18px); }
  .ls-case {
    position: relative; display: grid; gap: .85rem; align-content: start; padding: 1.25rem 1.3rem 1.3rem;
    border-radius: 10px; border: 1px solid var(--line); box-shadow: var(--shadow-1);
    background: repeating-linear-gradient(180deg, transparent 0 1.6rem, var(--ls-rule) 1.6rem calc(1.6rem + 1px)) 0 .9rem, var(--surface);
  }
  .ls-case::before { content: ""; position: absolute; left: 2.6rem; top: 0; bottom: 0; width: 1px; background: var(--ls-margin); }
  .ls-q { position: relative; padding-left: 2rem; font: 500 1.08rem/1.5 var(--f-serif); color: var(--ink); max-width: none; }
  .ls-q-no { position: absolute; left: -.2rem; top: .25rem; font: 600 .72rem/1 var(--f-mono); color: var(--muted); }
  .ls-pick { display: flex; flex-wrap: wrap; gap: .5rem; padding-left: 2rem; }
  .ls-pick-btn {
    min-height: 44px; padding: .5em 1.05em; border-radius: 999px; border: 1px solid var(--line-control);
    background: var(--surface); color: var(--ink); font-weight: 600; font-size: .92rem;
    transition: background .2s, color .2s, border-color .2s, transform .25s var(--ease);
  }
  .ls-pick-btn:hover { border-color: var(--ink-2); transform: translateY(-1px); }
  .ls-pick-btn[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
  .ls-a { margin-left: 2rem; padding-top: .7rem; border-top: 1px dashed var(--line-strong); color: var(--ink-2); font-size: .95rem; }
  .ls-a p { max-width: none; }
  .ls-a-k[data-kind="information"] { color: var(--accent-text); }
  .ls-a-k[data-kind="advice"] { color: var(--warn); }
  .ls-sorter.is-live .ls-case:not([data-picked]) .ls-a { display: none; }
  .ls-verdict { margin-left: 2rem; font-size: .88rem; font-weight: 650; color: var(--ink); }
  .ls-verdict:empty { display: none; }
  .ls-sorter-foot { margin-top: 1.2rem; font-size: .88rem; color: var(--muted); }

  /* what it plans to do: a table of contents with dotted leaders, and three mounted plates */
  .ls-index-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); gap: clamp(28px, 4.5vw, 72px); align-items: start; }
  .ls-index { border-top: 1px solid var(--line-strong); }
  .ix-item { padding: 1.05rem 0 1.15rem; border-bottom: 1px solid var(--line); }
  .ix-row { display: flex; align-items: baseline; gap: .8rem; max-width: none; }
  .ix-no { font: 600 .78rem/1 var(--f-mono); color: var(--muted); min-width: 1.4rem; }
  .ix-title { font: 600 clamp(1.15rem, 1rem + .6vw, 1.45rem)/1.2 var(--f-serif); }
  .ix-title a { color: var(--ink); text-decoration: none; }
  .ix-title a:hover { text-decoration: underline; text-decoration-color: var(--accent-line); }
  .ix-lead { flex: 1; min-width: 1rem; border-bottom: 2px dotted var(--line-strong); transform: translateY(-.28em); }
  .ix-body { margin-top: .35rem; padding-left: 2.2rem; color: var(--ink-2); }
  .ix-limit { margin-top: .3rem; padding-left: 2.2rem; font-size: .9rem; color: var(--muted); }
  .ix-limit span { margin-right: .35em; font: 650 .7rem/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); }
  .ls-plates { position: sticky; top: calc(var(--hdr) + 28px); display: grid; gap: 1.1rem; }
  .ls-plate-0 { rotate: -1.6deg; }
  .ls-plate-1 { rotate: 1.1deg; margin-left: 10%; }
  .ls-plate-2 { rotate: -.7deg; margin-right: 8%; }
  @media (max-width: 900px) {
    .ls-index-grid { grid-template-columns: 1fr; }
    .ls-plates { display: none; }
    .ix-body, .ix-limit { padding-left: 0; }
  }

  /* four stops on one street */
  .route-wrap { position: relative; }
  .route { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 36px); padding-top: 4.4rem; }
  .route::before {
    content: ""; position: absolute; left: .6rem; right: .6rem; top: 1.25rem; height: 12px; border-radius: 99px;
    background: var(--surface-3); border: 1px solid var(--line-strong);
  }
  .route::after {
    content: ""; position: absolute; left: 1.6rem; right: 5.5rem; top: calc(1.25rem + 5px); height: 2px;
    background: repeating-linear-gradient(90deg, var(--ink-2) 0 14px, transparent 14px 26px); opacity: .55;
  }
  .stop { position: relative; z-index: 1; }
  .route::before, .route::after { z-index: 0; }
  .stop-pin {
    position: absolute; left: 0; top: -4.4rem; z-index: 1; display: grid; place-items: center; width: 2.9rem; height: 2.9rem;
    border-radius: 50%; border: 2px solid var(--ink); background: var(--surface); box-shadow: var(--shadow-1);
    font: 700 .9rem/1 var(--f-mono); color: var(--ink);
  }
  .stop-door .stop-pin { border-radius: 1.45rem 1.45rem .35rem .35rem; height: 3.2rem; top: -4.7rem; background: var(--accent); color: var(--on-accent); }
  .stop-h { margin-bottom: .45rem; font: 600 clamp(1.1rem, 1rem + .4vw, 1.3rem)/1.2 var(--f-serif); }
  .stop p { color: var(--ink-2); }
  .stop-line { margin-top: .8rem; padding-left: .75rem; border-left: 2px solid var(--accent-line); font-size: .9rem; color: var(--muted) !important; }
  .route-big .stop-h { font-size: clamp(1.25rem, 1.05rem + .8vw, 1.7rem); }
  .route-walker { display: none; }
  @media (max-width: 860px) {
    .route { grid-template-columns: 1fr; padding-top: 0; gap: 1.8rem; }
    .route::before { left: 1.15rem; right: auto; top: .4rem; bottom: .4rem; width: 12px; height: auto; }
    .route::after { left: calc(1.15rem + 5px); right: auto; top: 1.4rem; bottom: 4rem; width: 2px; height: auto;
      background: repeating-linear-gradient(180deg, var(--ink-2) 0 12px, transparent 12px 22px); }
    .stop { padding-left: 4.2rem; min-height: 3rem; }
    .stop-pin, .stop-door .stop-pin { top: 0; }
  }

  /* the concept film */
  .ls-film-row { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, .75fr); gap: clamp(24px, 4vw, 64px); align-items: start; margin-top: clamp(44px, 6vw, 88px); }
  .ls-film { margin: 0; }
  .ls-film-frame { position: relative; overflow: hidden; border-radius: 12px; border: 8px solid var(--surface); outline: 1px solid var(--line-strong); background: var(--ink); box-shadow: var(--shadow-2); }
  .ls-film-frame video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--ink); }
  .ls-film figcaption { padding-top: 1rem; }
  .ls-film-h { font-size: 1.2rem; margin-bottom: .3rem; }
  .ls-film figcaption p { color: var(--muted); font-size: .9rem; }
  .ls-transcript { margin-top: .7rem; font-size: .92rem; }
  .ls-transcript summary { cursor: pointer; font-weight: 600; color: var(--accent-text); }
  .ls-transcript ol { margin-top: .6rem; padding-left: 1.3em; display: grid; gap: .3em; color: var(--ink-2); }
  .ls-film-side { padding-top: .4rem; }
  .ls-film-side p { color: var(--ink-2); }
  .ls-film-side .ls-slot-sm { margin-top: 1.2rem; box-shadow: var(--shadow-1); }
  .ls-film-side .ls-slot-sm::after { font-size: .62rem; }
  @media (max-width: 860px) { .ls-film-row { grid-template-columns: 1fr; } }

  /* who it is for: rooms of different sizes, not a card grid */
  .ls-rooms { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); }
  .ls-room { grid-column: span 6; display: grid; grid-template-rows: auto 1fr; overflow: hidden; border-radius: 12px;
    border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-1); }
  .ls-room-1, .ls-room-4 { grid-column: span 7; }
  .ls-room-2, .ls-room-3 { grid-column: span 5; }
  .ls-room .ls-photo { padding: 0; border: 0; border-radius: 0; box-shadow: none; }
  .ls-room .ls-photo img { border-radius: 0; aspect-ratio: 16 / 9; object-fit: cover; }
  .ls-room-body { display: grid; gap: .5rem; align-content: start; padding: 1.2rem 1.4rem 1.4rem; }
  .ls-room-body h3, .ls-room-body h2 { font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem); }
  .ls-room-body p { color: var(--ink-2); }
  .ls-room-link { font-weight: 600; text-decoration: none; margin-top: .2rem; }
  .ls-room-link:hover { text-decoration: underline; }
  .ls-rooms-3 .ls-room-1 { grid-column: 1 / -1; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); grid-template-rows: none; }
  .ls-rooms-3 .ls-room-1 .ls-room-body { align-content: center; padding: clamp(1.4rem, 3vw, 2.6rem); }
  .ls-rooms-3 .ls-room-2, .ls-rooms-3 .ls-room-3 { grid-column: span 6; }
  @media (max-width: 860px) {
    .ls-rooms > .ls-room { grid-column: 1 / -1; }
    .ls-rooms-3 .ls-room-1 { grid-template-columns: 1fr; }
  }

  /* honest status: a ledger */
  .ls-ledger { margin-top: 1.5rem; border-top: 1px solid var(--line-strong); }
  .ls-ledger li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding: .75rem 0; border-bottom: 1px solid var(--line); }
  .ls-ledger li > span:first-child { font: 650 .74rem/1.2 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  .ls-ledger li > span:last-child { font-weight: 600; text-align: right; }
  .ls-slot-col { display: grid; gap: .8rem; }
  .ls-slot-note { font-size: .86rem; color: var(--muted); }

  /* product: two columns, one line between them */
  .ls-ledger2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: hidden; border-radius: 14px; border: 1px solid var(--line-strong); background: var(--surface); box-shadow: var(--shadow-1); }
  .lg-col { padding: clamp(20px, 2.6vw, 38px); }
  .lg-wont { background: color-mix(in oklab, var(--surface-2) 70%, var(--surface)); border-left: 4px double var(--line-strong); }
  .lg-h { margin-bottom: .8rem; font: 650 .8rem/1.2 var(--f-mono) !important; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text); }
  .lg-wont .lg-h { color: var(--warn); }
  .lg-col li { display: grid; gap: .3rem; padding: .95rem 0; border-top: 1px solid var(--line); }
  .lg-k { font: 600 1.06rem/1.3 var(--f-serif); color: var(--ink); }
  .lg-v { font-size: .95rem; color: var(--ink-2); }
  .lg-col .chip { margin-top: .2rem; }
  @media (max-width: 820px) {
    .ls-ledger2 { grid-template-columns: 1fr; }
    .lg-wont { border-left: 0; border-top: 4px double var(--line-strong); }
  }
  .state-table td:last-child { color: var(--ink-2); min-width: 16rem; }
  @media (max-width: 600px) { .state-table td:last-child { min-width: 11rem; } }

  /* features: one dossier per planned feature, with a folder tab */
  .dossiers { display: grid; gap: clamp(36px, 4vw, 56px); padding-top: 1rem; }
  .dossier {
    position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(20px, 3.4vw, 56px); align-items: center;
    padding: clamp(22px, 3vw, 46px); border-radius: 2px 14px 14px 14px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-1);
    scroll-margin-top: calc(var(--hdr) + 48px);
  }
  .dossier:nth-child(even) { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
  .dossier:nth-child(even) .dossier-photo { order: -1; }
  .dossier-tab { position: absolute; left: -1px; top: -1.7rem; height: 1.7rem; padding: 0 1.1rem; border: 1px solid var(--line); border-bottom: 0;
    border-radius: 10px 10px 0 0; background: var(--surface); font: 650 .78rem/1.7rem var(--f-mono); letter-spacing: .08em; color: var(--accent-text); }
  .dossier h2 { margin: .7rem 0 .6rem; font-size: clamp(1.5rem, 1.15rem + 1.3vw, 2.3rem); }
  .dossier-what { font-size: 1.08rem; color: var(--ink-2); }
  .dossier-limit { display: grid; gap: .25rem; margin-top: 1.1rem; padding: .85rem 1rem; border-left: 3px solid var(--accent-line); border-radius: 0 8px 8px 0; background: var(--surface-2); color: var(--ink-2); max-width: 60ch; }
  .dossier-limit span { font: 650 .7rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); }
  .dossier-photo { box-shadow: var(--shadow-1); }
  @media (max-width: 820px) {
    .dossier, .dossier:nth-child(even) { grid-template-columns: 1fr; }
    .dossier:nth-child(even) .dossier-photo { order: 0; }
  }

  /* shared pages restyled: page hero on ruled paper, serif cards, calmer chips */
  .page-hero { border-bottom: 1px solid var(--line); background:
      repeating-linear-gradient(180deg, transparent 0 33px, var(--ls-rule) 33px 34px) 0 0 / 100% 100%; }
  .page-hero h1 { max-width: 24ch; }
  .page-hero .lede { max-width: 58ch; }
  .crumbs { font-family: var(--f-mono); font-size: .76rem; letter-spacing: .02em; }
  .card { border-radius: var(--r-l); }
  .chip[data-chip="planned"] { border-style: dashed; border-color: var(--line-control); color: var(--ink-2); }
  .faq summary { font-family: var(--f-serif); font-weight: 600; }
  .faq .faq-q { font: 600 clamp(1.08rem, 1rem + .45vw, 1.32rem)/1.35 var(--f-serif); letter-spacing: 0; max-width: 60ch; }
  .case-h { font-family: var(--f-serif); }
  .prose h2, .prose h3 { font-family: var(--f-serif); }
  .prose p, .prose li { font-size: 1.05rem; line-height: 1.7; }
  .prose table { font-size: .95rem; }
  .post-head h1 { font-weight: 600; }
  #tk-h, #pf-h, #src-h, #rp-h, #toc-h + ol, .toc-h { letter-spacing: 0; }
  #tk-h, #pf-h, #src-h { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); margin-bottom: .6rem; }
  #rp-h { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem); margin-bottom: 1.2rem; }
  .summary-box { font-family: var(--f-serif); font-size: 1.12rem; border-left: 4px solid var(--accent-line); border-radius: 4px 12px 12px 4px; }
  .cta-band { background:
      repeating-linear-gradient(180deg, transparent 0 33px, var(--ls-rule) 33px 34px),
      color-mix(in oklab, var(--accent) 12%, var(--bg)); }
  .cta-inner h2 { font-weight: 600; }
  .contact-card { border-left: 4px solid var(--accent-line); }
  .foot-mega { font-family: var(--f-serif); font-weight: 600; letter-spacing: -.03em; }
  .step { border-top-width: 1px; }
}

/* ------------------------------------------------------------------ looks */
@layer looks {
  [data-look="classic"] .ls-photo-tilt, [data-look="classic"] .ls-plate-0, [data-look="classic"] .ls-plate-1,
  [data-look="classic"] .ls-plate-2 { rotate: none; }
  [data-look="classic"] .ls-hero::before { display: none; }
  [data-look="classic"] .page-hero, [data-look="classic"] .cta-band { background: var(--bg); }
  [data-look="classic"] .ls-case { background: var(--surface); }
  [data-look="classic"] .dossier, [data-look="classic"] .ls-room, [data-look="classic"] .ls-ledger2 { box-shadow: none; border-color: var(--line-strong); }
}

/* ------------------------------------------------------------------ motion */
@layer motion {
  @media (prefers-reduced-motion: no-preference) {
    /* hero assembly: the sheet settles, its lines are written, one line is highlighted, the thread runs to the source
       in the margin, then the door to an advocate appears. About 3 seconds, once. */
    :root:not([data-look="classic"]) .ap-hero .ap-main { animation: ls-up .8s var(--ease) both; }
    :root:not([data-look="classic"]) .ap-hero .ap-back { animation: ls-back .9s var(--ease) both .1s; }
    :root:not([data-look="classic"]) .ap-hero .ap-ln { animation: ls-write .55s var(--ease) both; }
    :root:not([data-look="classic"]) .ap-hero .ap-ln-head { animation-delay: .35s; }
    :root:not([data-look="classic"]) .ap-hero .ap-lines .ap-ln:nth-child(1) { animation-delay: 0.53s; }
    :root:not([data-look="classic"]) .ap-hero .ap-lines .ap-ln:nth-child(2) { animation-delay: 0.61s; }
    :root:not([data-look="classic"]) .ap-hero .ap-lines .ap-ln:nth-child(3) { animation-delay: 0.69s; }
    :root:not([data-look="classic"]) .ap-hero .ap-lines .ap-ln:nth-child(4) { animation-delay: 0.77s; }
    :root:not([data-look="classic"]) .ap-hero .ap-lines .ap-ln:nth-child(5) { animation-delay: 0.85s; }
    :root:not([data-look="classic"]) .ap-hero .ap-lines .ap-ln:nth-child(6) { animation-delay: 0.93s; }
    :root:not([data-look="classic"]) .ap-hero .ap-lines .ap-ln:nth-child(7) { animation-delay: 1.01s; }
    :root:not([data-look="classic"]) .ap-hero .ap-lines .ap-ln:nth-child(8) { animation-delay: 1.09s; }
    :root:not([data-look="classic"]) .ap-hero .ap-lines .ap-ln:nth-child(9) { animation-delay: 1.17s; }
    :root:not([data-look="classic"]) .ap-hero .ap-hl { animation: ls-write .7s var(--ease-io) both 1.3s; }
    :root:not([data-look="classic"]) .ap-hero .ap-main .ap-fn { animation: ls-pop .45s var(--ease) both 1.85s; }
    :root:not([data-look="classic"]) .ap-hero .ap-thread { animation: ls-draw .9s var(--ease-io) both 2s; }
    :root:not([data-look="classic"]) .ap-hero .ap-src { animation: ls-in .6s var(--ease) both 2.35s, ls-float 9s ease-in-out 3.2s infinite; }
    :root:not([data-look="classic"]) .ap-hero .ap-hand { animation: ls-in .7s var(--ease) both 2.8s; }
    :root:not([data-look="classic"]) .ap-hero .ap-thread-2 { animation: none; }
    :root:not([data-look="classic"]) .ls-hero mark.hl { animation: ls-mark 1s var(--ease-io) both .5s; }

    /* highlighter on section headings as they come into view (scroll-driven where supported; visible otherwise) */
    @supports (animation-timeline: view()) {
      :root:not([data-look="classic"]) .ls-sec mark.hl { animation: ls-mark linear both; animation-timeline: view(); animation-range: entry 20% cover 40%; }
      :root:not([data-look="classic"]) .route-wrap .route-walker {
        display: block; position: absolute; z-index: 2; top: calc(1.25rem - 5px); left: .6rem; width: 22px; height: 22px; border-radius: 50%;
        background: var(--accent); border: 2px solid var(--ink); box-shadow: var(--shadow-1);
        animation: ls-walk linear both; animation-timeline: view(); animation-range: entry 40% cover 62%;
      }
    }
    :root:not([data-look="classic"]) .ls-pick-btn[aria-pressed="true"] { animation: ls-pop .3s var(--ease); }
    :root:not([data-look="classic"]) .ls-sorter.is-live .ls-case[data-picked] .ls-a { animation: ls-in .45s var(--ease) both; }
  }
  @media (max-width: 860px) { .route-wrap .route-walker { display: none !important; } }
  @keyframes ls-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  @keyframes ls-back { from { opacity: 0; transform: rotate(0deg); } to { opacity: 1; transform: rotate(-4deg) translate(-6px, 4px); } }
  @keyframes ls-write { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes ls-pop { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); } }
  @keyframes ls-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  @keyframes ls-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  @keyframes ls-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
  @keyframes ls-mark { from { background-size: 0% var(--ls-hl-band); } to { background-size: 100% var(--ls-hl-band); } }
  @keyframes ls-walk { from { left: .6rem; } to { left: calc(100% - 4.2rem); } }
}