:root {
    --paper: #f5f2e9;
    --paper-raised: #ffffff;
    --paper-sunk: #efeadd;
    --ink: #172a34;
    --muted: #5c6f79;
    --line: #ddd5c1;
    --line-soft: #e8e1d1;
    --accent: #1a7fa6;
    --accent-ink: #ffffff;
    --signal: #a76a18;
    --shadow-sm: 0 1px 2px rgba(23, 42, 52, .05);
    --shadow-md: 0 4px 16px -6px rgba(23, 42, 52, .12), 0 1px 3px rgba(23, 42, 52, .05);
    --shadow-lg: 0 18px 40px -20px rgba(23, 42, 52, .28), 0 2px 6px rgba(23, 42, 52, .05);
    --radius: 10px;
    --radius-sm: 6px;
    --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --mono: "JetBrains Mono", ui-monospace, "Cascadia Code", "SF Mono", Consolas, monospace;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --paper: #0b1a22;
      --paper-raised: #12242e;
      --paper-sunk: #0e1f28;
      --ink: #e8f1f5;
      --muted: #90a8b4;
      --line: #24404e;
      --line-soft: #1b323d;
      --accent: #52c4ea;
      --accent-ink: #05202c;
      --signal: #e5aa57;
      --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
      --shadow-md: 0 4px 16px -6px rgba(0, 0, 0, .5), 0 1px 3px rgba(0, 0, 0, .3);
      --shadow-lg: 0 18px 40px -20px rgba(0, 0, 0, .7), 0 2px 6px rgba(0, 0, 0, .35);
    }
  }
  :root[data-theme="light"] {
    --paper: #f5f2e9; --paper-raised: #ffffff; --paper-sunk: #efeadd;
    --ink: #172a34; --muted: #5c6f79; --line: #ddd5c1; --line-soft: #e8e1d1;
    --accent: #1a7fa6; --accent-ink: #ffffff; --signal: #a76a18;
  }
  :root[data-theme="dark"] {
    --paper: #0b1a22; --paper-raised: #12242e; --paper-sunk: #0e1f28;
    --ink: #e8f1f5; --muted: #90a8b4; --line: #24404e; --line-soft: #1b323d;
    --accent: #52c4ea; --accent-ink: #05202c; --signal: #e5aa57;
  }

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "cv05" 1, "ss01" 1;
  }
  .wrap { max-width: 1100px; margin: 0 auto; padding: 0 28px; }
  a { color: inherit; }
  ::selection { background: color-mix(in srgb, var(--accent) 28%, transparent); }

  .skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 100;
    background: var(--accent); color: var(--accent-ink);
    padding: 10px 16px; border-radius: 0 0 var(--radius-sm) 0; font-weight: 600;
  }
  .skip-link:focus { left: 0; }

  /* ---- header ---- */
  header.site {
    position: sticky; top: 0; z-index: 20;
    background: color-mix(in srgb, var(--paper) 82%, transparent);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid transparent;
    transition: border-color .2s ease, box-shadow .2s ease;
  }
  header.site.scrolled { border-bottom-color: var(--line); box-shadow: var(--shadow-sm); }
  header.site .wrap {
    display: flex; align-items: center; justify-content: space-between;
    height: 68px; gap: 16px;
  }
  .wordmark {
    display: flex; align-items: center; gap: 11px;
    font-weight: 800; font-size: 1rem; letter-spacing: .08em;
    text-decoration: none; text-transform: uppercase; line-height: 1.1;
  }
  .logo-mark { width: 34px; height: 34px; border-radius: 50%; display: block; flex: none; }
  .wordmark small {
    display: block; font-weight: 500; font-size: .56rem; letter-spacing: .2em;
    color: var(--muted); text-transform: uppercase; margin-top: 3px;
  }
  .header-right { display: flex; align-items: center; gap: 20px; }
  nav.site { display: flex; gap: 4px; font-size: .89rem; font-weight: 500; }
  nav.site a {
    text-decoration: none; color: var(--muted);
    padding: 7px 12px; border-radius: var(--radius-sm);
    transition: color .15s ease, background .15s ease;
  }
  nav.site a:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
  nav.site a[aria-current="page"] {
    color: var(--ink); font-weight: 600;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
  }
  :is(nav.site a, .wordmark, .btn, .lang-toggle button, .faq summary):focus-visible {
    outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--radius-sm);
  }
  .nav-sep { width: 1px; height: 22px; background: var(--line); flex: none; }

  /* ---- mobile nav toggle (hidden on desktop, shown under 860px) ---- */
  .nav-toggle {
    display: none; align-items: center; justify-content: center;
    width: 44px; height: 44px; flex: none;
    background: none; border: 1px solid var(--line); border-radius: var(--radius-sm);
    color: var(--ink); cursor: pointer; padding: 0;
  }
  .nav-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
  .nav-toggle .bars { display: block; width: 18px; height: 12px; position: relative; }
  .nav-toggle .bars::before, .nav-toggle .bars::after, .nav-toggle .bars span {
    content: ""; position: absolute; left: 0; right: 0; height: 2px;
    background: currentColor; border-radius: 2px; transition: transform .18s ease, opacity .18s ease;
  }
  .nav-toggle .bars::before { top: 0; }
  .nav-toggle .bars span { top: 5px; }
  .nav-toggle .bars::after { bottom: 0; }
  header.site.nav-open .nav-toggle .bars::before { transform: translateY(5px) rotate(45deg); }
  header.site.nav-open .nav-toggle .bars span { opacity: 0; }
  header.site.nav-open .nav-toggle .bars::after { transform: translateY(-5px) rotate(-45deg); }

  /* ---- products dropdown ----
     Built on <details> so it opens without JS; site.js only adds
     click-outside and Escape-to-close on top. */
  .nav-dd { position: relative; }
  .nav-dd summary {
    list-style: none; cursor: pointer; user-select: none;
    padding: 7px 12px; border-radius: var(--radius-sm);
    color: var(--muted); font-size: .89rem; font-weight: 500;
    display: inline-flex; align-items: center; gap: 7px;
    transition: color .15s ease, background .15s ease;
  }
  .nav-dd summary::-webkit-details-marker { display: none; }
  .nav-dd summary::after {
    content: "▾"; font-size: .85em; opacity: .65; transition: transform .18s ease;
  }
  .nav-dd[open] summary::after { transform: rotate(180deg); }
  .nav-dd summary:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
  .nav-dd summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
  .nav-dd.active summary {
    color: var(--ink); font-weight: 600;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
  }
  .nav-dd-menu {
    position: absolute; top: calc(100% + 10px); left: 0; z-index: 30;
    min-width: 215px; padding: 6px;
    background: var(--paper-raised); border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--shadow-lg);
    display: grid; gap: 2px;
  }
  .nav-dd-menu a {
    display: flex; align-items: center; gap: 9px;
    padding: 9px 12px; border-radius: var(--radius-sm);
    text-decoration: none; color: var(--ink); font-size: .88rem;
  }
  .nav-dd-menu a:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); }
  .nav-dd-menu .divider { height: 1px; background: var(--line-soft); margin: 4px 2px; }

  /* ---- language toggle ---- */
  /* Flags kept, but each button is a full 44px tap target: the visible flag is
     34px wide and the padding carries it the rest of the way. */
  .lang-toggle { display: flex; gap: 2px; align-items: center; }
  .lang-toggle button {
    padding: 10px 5px; border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer;
    background: none; line-height: 0; opacity: .45;
    min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: opacity .15s ease, border-color .15s ease, background .15s ease;
  }
  .lang-toggle button img {
    width: 34px; height: 24px; display: block; border-radius: 3px;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 14%, transparent);
  }
  .lang-toggle button:hover { opacity: .9; }
  .lang-toggle button.active {
    opacity: 1; border-color: color-mix(in srgb, var(--accent) 55%, transparent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
  }

  /* ---- hero ---- */
  .hero-shell { position: relative; overflow: hidden; }
  .hero-shell::before {
    content: ""; position: absolute; inset: -40% 0 auto; height: 620px; pointer-events: none;
    background: radial-gradient(ellipse 60% 50% at 22% 55%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 70%);
  }
  .hero {
    position: relative;
    padding-top: 92px; padding-bottom: 88px;
    display: grid; grid-template-columns: 1.08fr .92fr; gap: 64px; align-items: center;
  }
  .eyebrow {
    display: inline-flex; align-items: center; gap: 9px;
    font-family: var(--mono);
    font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--muted); margin: 0 0 20px;
    border: 1px solid var(--line); border-radius: 100px;
    padding: 5px 13px 5px 10px; background: var(--paper-raised);
    box-shadow: var(--shadow-sm);
  }
  .eyebrow::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: var(--signal); flex: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 22%, transparent);
  }
  h1 {
    font-size: clamp(2.25rem, 4.6vw, 3.4rem);
    font-weight: 800; letter-spacing: -.028em; line-height: 1.06;
    margin: 0 0 22px; text-wrap: balance;
  }
  .lede {
    font-size: 1.1rem; color: var(--muted); max-width: 48ch; margin: 0 0 34px;
    line-height: 1.62;
  }
  .cta-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
  .btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 22px; border-radius: var(--radius-sm);
    font-size: .93rem; font-weight: 600; letter-spacing: -.005em;
    text-decoration: none; border: 1px solid transparent; cursor: pointer;
    transition: background .16s ease, border-color .16s ease, color .16s ease,
                transform .16s ease, box-shadow .16s ease;
  }
  .btn.primary {
    background: var(--accent); color: var(--accent-ink);
    box-shadow: var(--shadow-md);
  }
  .btn.primary:hover {
    background: color-mix(in srgb, var(--accent) 88%, var(--ink) 12%);
    transform: translateY(-1px); box-shadow: var(--shadow-lg);
  }
  .btn.ghost {
    border-color: var(--line); color: var(--ink); background: var(--paper-raised);
    box-shadow: var(--shadow-sm);
  }
  .btn.ghost:hover {
    border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
    color: var(--accent); transform: translateY(-1px); box-shadow: var(--shadow-md);
  }
  .btn:active { transform: translateY(0); }

  .trust-row {
    display: flex; gap: 20px; flex-wrap: wrap; margin: 30px 0 0;
    font-family: var(--mono); font-size: .72rem; letter-spacing: .04em; color: var(--muted);
  }
  .trust-row span { display: inline-flex; align-items: center; gap: 7px; }
  .trust-row span::before {
    content: ""; width: 5px; height: 5px; border-radius: 1px; background: var(--accent); flex: none;
  }

  /* ---- hero crest ---- */
  /* The homepage hero shows the studio's own mark rather than any one product,
     so it stays correct no matter how many products exist. The crest carries its
     own light field, so it's clipped to a circle and reads as a minted medallion
     in both themes rather than a pale rectangle on the dark one. */
  .crest { display: flex; justify-content: center; }
  .crest img {
    width: min(100%, 300px); height: auto; display: block;
    border-radius: 50%;
    box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 9%, transparent),
                var(--shadow-lg);
  }


  /* ---- sections ---- */
  section { padding: 84px 0; border-top: 1px solid var(--line-soft); }
  .section-head { max-width: 62ch; margin-bottom: 44px; }
  .tag {
    display: inline-block; font-family: var(--mono);
    font-size: .68rem; letter-spacing: .13em; text-transform: uppercase; color: var(--signal);
    border: 1px solid color-mix(in srgb, var(--signal) 40%, var(--line));
    background: color-mix(in srgb, var(--signal) 8%, transparent);
    border-radius: 100px; padding: 4px 11px; margin-bottom: 15px;
  }
  h2 {
    font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 800;
    letter-spacing: -.024em; line-height: 1.18; margin: 0; text-wrap: balance;
  }
  .section-sub { color: var(--muted); margin: 14px 0 0; font-size: 1rem; max-width: 56ch; }

  /* ---- cards ---- */
  .card {
    background: var(--paper-raised); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 26px 24px;
    box-shadow: var(--shadow-sm);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
  .card:hover {
    transform: translateY(-2px); box-shadow: var(--shadow-md);
    border-color: color-mix(in srgb, var(--accent) 32%, var(--line));
  }

  /* ---- how it works ---- */
  .how-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: 22px;
  }
  .step-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: var(--radius-sm); margin-bottom: 16px;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
    color: var(--accent); font-family: var(--mono); font-size: .85rem; font-weight: 700;
  }
  .how-steps h3 { font-size: 1.02rem; font-weight: 700; margin: 0 0 8px; letter-spacing: -.012em; }
  .how-steps p { margin: 0; color: var(--muted); font-size: .92rem; }

  /* ---- products overview cards ---- */
  /* auto-fit, so the same markup lays out 1, 2, 3, 5 … cards without touching CSS.
     min(100%, 300px) keeps a card from overflowing a viewport narrower than 300px. */
  .product-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 22px;
  }
  .product-card { display: flex; flex-direction: column; text-decoration: none; }
  .pc-num {
    font-family: var(--mono); font-size: .68rem; letter-spacing: .14em;
    color: var(--muted); display: block; margin-bottom: 10px;
  }
  .product-card h3 {
    font-size: 1.32rem; font-weight: 800; letter-spacing: -.022em; margin: 0 0 10px;
    display: flex; align-items: center; gap: 9px;
  }
  .product-card > p { margin: 0 0 18px; color: var(--muted); font-size: .95rem; }
  .chips { list-style: none; display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 22px; padding: 0; }
  .chips li {
    font-family: var(--mono); font-size: .66rem; letter-spacing: .06em;
    color: var(--muted); border: 1px solid var(--line); border-radius: 100px;
    padding: 4px 10px; background: var(--paper-sunk);
  }
  .pc-link {
    margin-top: auto; font-size: .89rem; font-weight: 600; color: var(--accent);
    display: inline-flex; align-items: center; gap: 6px;
  }
  .product-card:hover .pc-link { gap: 10px; }
  .pc-link { transition: gap .16s ease; }
  /* A lone card (e.g. the cross-link on a product page while there are only two
     products) shouldn't stretch the full content width. Detected rather than
     hand-classed, so it stops applying by itself once a third product exists. */
  .product-cards:has(> :only-child) { grid-template-columns: minmax(0, 520px); }

  /* ---- product page hero ---- */
  .page-hero { position: relative; padding: 64px 0 56px; max-width: 62ch; }
  .breadcrumb {
    font-family: var(--mono); font-size: .7rem; letter-spacing: .06em;
    color: var(--muted); margin: 0 0 22px;
  }
  .breadcrumb a { color: var(--muted); text-decoration: none; }
  .breadcrumb a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
  .breadcrumb .sep { margin: 0 8px; opacity: .6; }
  .breadcrumb .here { color: var(--ink); }
  .page-hero h1 {
    font-size: clamp(2rem, 4vw, 2.9rem); margin: 14px 0 18px;
    display: flex; align-items: center; gap: 12px;
  }
  .page-hero .lede { margin-bottom: 28px; }
  /* the product page's own body section carries no top rule — the hero already
     separates it — but keeps normal section padding below */
  .product-body { border-top: none; padding-top: 8px; }

  /* ---- product panel ---- */
  .product { display: grid; grid-template-columns: 1fr .92fr; gap: 48px; align-items: start; }
  .product h3 {
    font-size: 1.6rem; margin: 0 0 8px; letter-spacing: -.022em; font-weight: 800;
    display: flex; align-items: center; gap: 10px;
  }
  .product .tagline { color: var(--muted); margin: 0 0 26px; font-size: 1rem; max-width: 46ch; }
  .spec-list { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 14px; }
  .spec-list li { position: relative; padding-left: 26px; font-size: .93rem; line-height: 1.58; }
  .spec-list li::before {
    content: ""; position: absolute; left: 0; top: .3em;
    width: 16px; height: 16px; border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 15%, transparent);
  }
  .spec-list li::after {
    content: ""; position: absolute; left: 5px; top: .62em;
    width: 6px; height: 3px; border-left: 1.6px solid var(--accent); border-bottom: 1.6px solid var(--accent);
    transform: rotate(-45deg);
  }
  .spec-list b { font-weight: 600; }

  /* ---- data flow strip ---- */
  .flow {
    display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
    margin: 0 0 24px; padding: 0;
    font-family: var(--mono); font-size: .68rem; letter-spacing: .08em;
  }
  .flow .node {
    border: 1px solid var(--line); background: var(--paper-raised);
    border-radius: 100px; padding: 6px 13px; box-shadow: var(--shadow-sm);
    white-space: nowrap;
  }
  .flow .node.mid {
    border-color: color-mix(in srgb, var(--accent) 50%, var(--line));
    background: color-mix(in srgb, var(--accent) 10%, var(--paper-raised));
    color: var(--accent); font-weight: 700;
  }
  .flow .arrow { color: var(--muted); }

  .spec-sheet {
    background: var(--paper-raised); border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--shadow-md); overflow: hidden;
  }
  .spec-sheet .sheet-head {
    font-family: var(--mono); font-size: .66rem; letter-spacing: .15em; text-transform: uppercase;
    color: var(--muted); background: var(--paper-sunk);
    padding: 12px 22px; border-bottom: 1px solid var(--line);
  }
  .spec-sheet .rows { padding: 6px 22px 12px; font-family: var(--mono); font-size: .8rem; }
  .spec-sheet .row {
    display: flex; justify-content: space-between; gap: 14px; align-items: baseline;
    padding: 11px 0; border-bottom: 1px solid var(--line-soft);
  }
  .spec-sheet .row:last-child { border-bottom: none; }
  .spec-sheet .k { color: var(--muted); }
  .spec-sheet .v { text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; }
  .spec-sheet .row.highlight .v { color: var(--accent); font-weight: 700; }

  /* ---- approach ---- */
  .approach {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 22px;
  }
  .approach h3 {
    font-family: var(--mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
    color: var(--accent); margin: 0 0 12px; font-weight: 700;
  }
  .approach p { margin: 0; color: var(--muted); font-size: .93rem; }

  /* ---- contact ---- */
  .contact-panel {
    background: var(--paper-raised); border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--shadow-md);
    padding: 44px; display: grid; grid-template-columns: 1.15fr .85fr;
    gap: 44px; align-items: center; position: relative; overflow: hidden;
  }
  .contact-panel::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse 55% 90% at 88% 50%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 72%);
  }
  .contact-copy { position: relative; }
  .contact-copy h2 { margin-bottom: 12px; }
  .contact-copy p { color: var(--muted); margin: 0; max-width: 42ch; }
  .contact-actions { position: relative; display: grid; gap: 14px; justify-items: stretch; }
  .contact-actions .btn { justify-content: center; }
  .contact-meta {
    font-family: var(--mono); font-size: .72rem; color: var(--muted);
    text-align: center; margin: 2px 0 0; letter-spacing: .03em;
  }

  /* ---- enquiry form ---- */
  .form-panel {
    background: var(--paper-raised); border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--shadow-md);
    padding: 34px; max-width: 640px;
  }
  .field { display: grid; gap: 7px; margin-bottom: 20px; }
  .field label { font-size: .87rem; font-weight: 600; letter-spacing: -.005em; }
  .field .hint { font-size: .78rem; color: var(--muted); }
  .field .req { color: var(--signal); font-weight: 700; }
  .field :is(input, select, textarea) {
    font-family: var(--sans); font-size: .95rem; color: var(--ink);
    background: var(--paper); border: 1px solid var(--line);
    border-radius: var(--radius-sm); padding: 11px 13px; width: 100%;
    transition: border-color .15s ease, box-shadow .15s ease;
  }
  .field textarea { min-height: 130px; resize: vertical; line-height: 1.55; }
  .field :is(input, select, textarea):focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
  }
  .field :is(input, textarea):user-invalid {
    border-color: color-mix(in srgb, #d94f4f 70%, var(--line));
  }
  .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
  /* honeypot — off-screen rather than display:none, which some bots skip */
  .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
  .form-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
  .form-note { font-size: .78rem; color: var(--muted); margin: 18px 0 0; }
  .form-status {
    margin: 18px 0 0; padding: 13px 15px; border-radius: var(--radius-sm);
    font-size: .89rem; display: none;
  }
  .form-status.show { display: block; }
  .form-status.ok {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  }
  .form-status.err {
    background: color-mix(in srgb, #d94f4f 12%, transparent);
    border: 1px solid color-mix(in srgb, #d94f4f 45%, transparent);
  }
  button.btn[disabled] { opacity: .6; cursor: default; transform: none; }

  /* ---- footer ---- */
  footer.site { border-top: 1px solid var(--line); padding: 44px 0 52px; background: var(--paper-sunk); }
  footer.site .wrap {
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 18px;
  }
  .footer-links { display: flex; gap: 22px; font-size: .85rem; }
  .footer-links a { color: var(--muted); text-decoration: none; }
  .footer-links a:hover { color: var(--ink); }
  footer.site .fine { color: var(--muted); font-size: .8rem; margin: 0; width: 100%; }
  footer.site .fine a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
  footer.site .fine a:hover { color: var(--ink); }

  /* ---- proof band ----
     Every value in here comes from the FACTS block at the top of site.js. A fact
     left null removes its whole tile, so the band never shows an empty promise. */
  .facts {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
    gap: 1px; background: var(--line);
    border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  }
  .facts > div { background: var(--paper-raised); padding: 24px 22px; }
  .facts .fv {
    display: block; font-size: 1.55rem; font-weight: 800; letter-spacing: -.028em;
    line-height: 1.1; margin-bottom: 7px; font-variant-numeric: tabular-nums;
  }
  .facts .fk {
    display: block; font-family: var(--mono); font-size: .68rem; letter-spacing: .11em;
    text-transform: uppercase; color: var(--muted);
  }

  /* ---- price line ---- */
  .price-row {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px;
    margin: 26px 0 0;
  }
  .price-row .amount {
    font-size: 1.7rem; font-weight: 800; letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
  }
  .price-row .from {
    font-family: var(--mono); font-size: .68rem; letter-spacing: .13em;
    text-transform: uppercase; color: var(--muted);
  }
  .price-row .qual { font-size: .84rem; color: var(--muted); }
  .card-price {
    font-family: var(--mono); font-size: .72rem; letter-spacing: .06em;
    color: var(--ink); margin: -8px 0 16px;
  }
  .card-price b { font-weight: 700; }

  /* ---- photo slots ----
     The figure carries a striped placeholder and a caption naming what belongs
     there; site.js drops the <img> if the file isn't in assets/ yet, so an
     unfilled slot reads as a labelled gap rather than a broken image. */
  .shot {
    position: relative; margin: 0; border-radius: var(--radius); overflow: hidden;
    border: 1px solid var(--line); background: var(--paper-sunk);
    background-image: repeating-linear-gradient(
      135deg, transparent 0 9px, color-mix(in srgb, var(--ink) 4%, transparent) 9px 18px);
    min-height: 220px; display: grid; place-items: center;
  }
  .shot img { width: 100%; height: 100%; object-fit: cover; display: block; grid-area: 1/1; }
  .shot figcaption {
    grid-area: 1/1; z-index: 1; padding: 18px; text-align: center;
    font-family: var(--mono); font-size: .72rem; letter-spacing: .06em;
    color: var(--muted); max-width: 34ch;
  }
  .shot:has(img) figcaption { display: none; }
  .shot-row {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 18px;
  }
  .shot-wide { min-height: 340px; }
  .shot + .shot-row { margin-top: 18px; }

  /* ---- long-form prose (about, docs) ---- */
  .prose { max-width: 66ch; }
  .prose h2 { margin: 46px 0 14px; font-size: clamp(1.3rem, 2.2vw, 1.6rem); }
  .prose h2:first-child { margin-top: 0; }
  .prose p { color: var(--muted); margin: 0 0 16px; }
  .prose ul { color: var(--muted); margin: 0 0 16px; padding-left: 22px; }
  .prose li { margin-bottom: 8px; }
  .prose strong { color: var(--ink); font-weight: 600; }
  .prose code {
    font-family: var(--mono); font-size: .86em; background: var(--paper-sunk);
    border: 1px solid var(--line-soft); border-radius: 4px; padding: 1px 5px;
  }
  .prose a { color: var(--accent); text-underline-offset: 3px; }

  .callout {
    border-left: 3px solid var(--accent); background: var(--paper-raised);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    padding: 18px 22px; margin: 0 0 24px;
  }
  .callout p { margin: 0; font-size: .93rem; }

  /* ---- FAQ / docs accordion ---- */
  .faq { display: grid; gap: 10px; }
  .faq details {
    background: var(--paper-raised); border: 1px solid var(--line);
    border-radius: var(--radius); overflow: hidden;
  }
  .faq summary {
    list-style: none; cursor: pointer; padding: 18px 22px;
    font-weight: 600; font-size: .98rem; letter-spacing: -.01em;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
  }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after { content: "+"; font-family: var(--mono); color: var(--accent); font-size: 1.15rem; }
  .faq details[open] summary::after { content: "–"; }
  .faq details[open] summary { border-bottom: 1px solid var(--line-soft); }
  .faq .answer { padding: 16px 22px 22px; color: var(--muted); font-size: .93rem; }
  .faq .answer p { margin: 0 0 12px; }
  .faq .answer p:last-child { margin: 0; }

  /* ---- reveal ---- */
  @media (prefers-reduced-motion: no-preference) {
    .reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
    .reveal.in { opacity: 1; transform: none; }
    .fill-anim { animation: rise 1.4s cubic-bezier(.16,1,.3,1) both; }
  }
  @keyframes rise {
    from { transform: translateY(10px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }

  @media (max-width: 900px) {
    .hero { grid-template-columns: 1fr; gap: 44px; padding-top: 64px; padding-bottom: 64px; }
    .product { grid-template-columns: 1fr; gap: 34px; }
    .contact-panel { grid-template-columns: 1fr; gap: 30px; padding: 34px; }
  }
  @media (max-width: 860px) {
    .wrap { padding: 0 20px; }
    section { padding: 60px 0; }
    .approach, .how-steps, .product-cards { grid-template-columns: 1fr; }
    .wordmark small { display: none; }
    footer.site .wrap { justify-content: center; text-align: center; }
    .footer-links { justify-content: center; flex-wrap: wrap; }
    footer.site .fine { text-align: center; }

    /* ---- mobile navigation ----
       The desktop nav used to be display:none below this width with nothing in
       its place, which left phone visitors with no way to reach Products,
       Contact or the dashboard. It now collapses into a panel behind the
       toggle button instead. */
    .nav-toggle { display: inline-flex; }
    .nav-sep { display: none; }
    nav.site {
      position: absolute; top: 100%; left: 0; right: 0; z-index: 25;
      display: none; flex-direction: column; gap: 2px;
      padding: 10px 20px 18px;
      background: var(--paper-raised);
      border-bottom: 1px solid var(--line);
      box-shadow: var(--shadow-lg);
      font-size: 1rem;
    }
    header.site.nav-open nav.site { display: flex; }
    nav.site > a {
      padding: 13px 12px; border-radius: var(--radius-sm); color: var(--ink);
      border-bottom: 1px solid var(--line-soft);
    }
    nav.site > a:last-child { border-bottom: none; }
    .nav-dd { border-bottom: 1px solid var(--line-soft); }
    .nav-dd summary { padding: 13px 12px; font-size: 1rem; color: var(--ink); justify-content: space-between; }
    .nav-dd-menu {
      position: static; box-shadow: none; border: none; background: none;
      padding: 0 0 8px 12px; min-width: 0;
    }
    .nav-dd-menu a { padding: 11px 12px; }
  }

  @media (max-width: 520px) {
    .facts { grid-template-columns: repeat(2, 1fr); }
    .field-row { grid-template-columns: 1fr; }
    .price-row { flex-direction: column; align-items: flex-start; }
  }