/* built by _src/build.py — edit index.html <style> or _src/pages.css */

  :root {
    --ground: #07060a; --panel: #141007; --panel-2: #1c160a; --line: #33280f;
    --ink: #f8f4ec; --ink-soft: #b5a985; --ink-dim: #8d835f;
    --gold: #f2b01e; --gold-soft: #ffe08a; --gold-deep: #7a4a03;
  }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0; background: var(--ground); color: var(--ink);
    font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
    font-size: 16.5px; line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }
  a { color: var(--gold); text-decoration: none; }
  .wrap { max-width: 76rem; margin: 0 auto; padding: 0 1.5rem; }
  section { scroll-margin-top: 5rem; }

  /* ---------- wordmark ---------- */
  .word { display: inline-flex; align-items: center; font-weight: 800; letter-spacing: 0.045em; line-height: 1; white-space: nowrap; color: var(--ink); }
  .word svg { display: block; }
  .word .m { display: flex; margin: 0 -0.22em 0 -0.19em; }
  .word .erp { display: inline-flex; align-items: center; gap: 0.38em; margin-left: 0.42em; color: var(--gold); letter-spacing: 0.18em; font-weight: 700; }
  .word .erp i { width: 0.09em; min-width: 1.5px; align-self: stretch; background: currentColor; opacity: 0.5; }

  /* ---------- buttons ---------- */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
    background: var(--gold); color: #1a1204; font-weight: 700;
    padding: 0.7rem 1.5rem; border-radius: 999px; border: 0; cursor: pointer;
    font-size: 1rem; white-space: nowrap; transition: filter 0.15s, transform 0.15s;
  }
  .btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
  .btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
  .btn.ghost:hover { border-color: var(--gold-deep); filter: none; }
  .btn.sm { padding: 0.5rem 1.15rem; font-size: 0.92rem; }

  /* ---------- top nav ---------- */
  .top {
    position: sticky; top: 0; z-index: 50;
    background: rgba(7,6,10,0.92); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
  }
  .top .wrap { display: flex; align-items: center; gap: 2rem; height: 68px; }
  .top .brand-link { display: flex; align-items: center; }
  .navlinks { display: flex; align-items: center; gap: 0.25rem; flex: 1; }
  .navlinks > .navitem { position: relative; }
  .navlinks a.navlink, .navlinks span.navlink {
    display: inline-flex; align-items: center; gap: 0.35em; cursor: pointer;
    color: var(--ink-soft); font-size: 0.95rem; font-weight: 600;
    padding: 0.55rem 0.85rem; border-radius: 8px;
  }
  .navlinks .navitem:hover > .navlink, .navlinks .navitem:focus-within > .navlink,
  .navlinks a.navlink:hover { color: var(--ink); background: var(--panel); }
  .caret { width: 9px; height: 9px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: 0.65; }

  .panel {
    position: absolute; top: calc(100% + 10px); left: 0; min-width: 25rem;
    background: #100d06; border: 1px solid var(--line); border-radius: 14px;
    padding: 0.6rem; box-shadow: 0 24px 60px rgba(0,0,0,0.6);
    opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
  }
  .navitem:hover > .panel, .navitem:focus-within > .panel { opacity: 1; visibility: visible; transform: translateY(0); }
  .panel::before { content: ''; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
  .panel a { display: flex; gap: 0.85rem; align-items: flex-start; padding: 0.7rem 0.8rem; border-radius: 10px; }
  .panel a:hover { background: var(--panel-2); }
  .panel .pi {
    flex: none; width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
    background: rgba(242,176,30,0.09); border: 1px solid rgba(242,176,30,0.22);
  }
  .panel .pi svg { width: 20px; height: 20px; stroke: var(--gold); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .panel .pt { color: var(--ink); font-weight: 700; font-size: 0.94rem; line-height: 1.3; }
  .panel .pd { color: var(--ink-soft); font-size: 0.84rem; line-height: 1.45; margin-top: 0.1rem; }
  .top .actions { display: flex; align-items: center; gap: 1.1rem; }

  .navtoggle { display: none; }
  .hamburger { display: none; }
  @media (max-width: 980px) {
    .navlinks { display: none; }
    .hamburger {
      display: flex; flex-direction: column; gap: 5px; margin-left: auto;
      background: none; border: 0; cursor: pointer; padding: 8px;
    }
    .hamburger span { display: block; width: 22px; height: 2px; background: var(--ink); border-radius: 2px; }
    .top .actions { margin-left: 0; }
    .mobilemenu { display: none; border-top: 1px solid var(--line); background: #0c0a05; }
    .mobilemenu a { display: block; padding: 0.9rem 1.5rem; color: var(--ink); font-weight: 600; border-bottom: 1px solid var(--line); }
    .navtoggle:checked ~ .mobilemenu { display: block; }
  }
  @media (min-width: 981px) { .mobilemenu { display: none !important; } }

  /* ---------- hero ---------- */
  .hero {
    padding: 5rem 0 4.5rem; position: relative; overflow: hidden;
    background:
      radial-gradient(56rem 38rem at 82% -10%, #2a1e07 0%, transparent 60%),
      radial-gradient(50rem 34rem at 8% 110%, #1a1305 0%, transparent 55%),
      var(--ground);
  }
  .hero::before {
    content: ''; position: absolute; inset: 0;
    background: url(img/hero-dusk.jpg) center 38%/cover no-repeat;
    opacity: 0.5;
  }
  .hero::after {
    content: ''; position: absolute; inset: 0;
    background:
      linear-gradient(90deg, rgba(7,6,10,0.92) 0%, rgba(7,6,10,0.62) 45%, rgba(7,6,10,0.22) 100%),
      linear-gradient(180deg, rgba(7,6,10,0.5) 0%, rgba(7,6,10,0.1) 45%, rgba(7,6,10,0.9) 100%);
  }
  .hero .wrap { position: relative; z-index: 1; }
  .hero .wrap { display: grid; grid-template-columns: 1.02fr 1fr; gap: 3.5rem; align-items: center; }
  @media (max-width: 980px) { .hero .wrap { grid-template-columns: 1fr; } .hero { padding-top: 3.5rem; } }
  .hero .lockup { margin-bottom: 1.4rem; }
  .hero .lockup .word { font-size: clamp(1.5rem, 3vw, 1.9rem); }
  .hero h1 {
    font-size: clamp(2rem, 4.4vw, 3.1rem); line-height: 1.12; letter-spacing: -0.015em;
    margin: 0 0 1.1rem; text-wrap: balance; font-weight: 800;
  }
  .hero h1 em { font-style: normal; color: var(--gold); }
  .hero p.sub { color: var(--ink-soft); max-width: 34rem; margin: 0 0 1.9rem; font-size: 1.13rem; }
  .hero .ctas { display: flex; gap: 0.9rem; flex-wrap: wrap; margin-bottom: 1.8rem; }
  .hero .proof { display: flex; gap: 1.4rem; flex-wrap: wrap; color: var(--ink-dim); font-size: 0.88rem; }
  .hero .proof span { display: inline-flex; align-items: center; gap: 0.45em; }
  .hero .proof b { color: var(--gold); font-weight: 800; }

  /* ---------- hero product mockup ----------
     This is the workspace, not an impression of it: the light surfaces, the
     86px labelled icon rail, the quote rail, the panel head and the unit
     configurator are the app's own structure at the app's own measurements
     (apps/web/src/styles.css). Sizing rule: 1em here == 1rem there (15px),
     scaled to the container — so every number below is the app's number, and
     the frame reads as a ~1130px browser window. The elevation is verbatim
     engine output (buildDrawing → toSvg) for a 36" x 60" double-hung with a
     Colonial 3x2 grid: light-blue glass, black frame/sash, dimension strings.
     If the app's palette or layout changes, change it here too. */
  .shot { position: relative; container-type: inline-size; }
  .shot .glow { position: absolute; inset: -8% -6%; background: radial-gradient(50% 50% at 50% 50%, rgba(242,176,30,0.13) 0%, transparent 70%); pointer-events: none; }
  .browser {
    position: relative; border-radius: 14px; overflow: hidden;
    border: 1px solid #3d3212; background: #0e0b05;
    box-shadow: 0 40px 90px rgba(0,0,0,0.65), 0 8px 24px rgba(0,0,0,0.5);
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 6.6px;                 /* fallback for no container queries */
    font-size: 1.18cqw;
    line-height: 1.45;
  }
  .browser .chrome { display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0.9rem; background: #171208; border-bottom: 1px solid var(--line); }
  .browser .dots { display: flex; gap: 5px; }
  .browser .dots i { width: 9px; height: 9px; border-radius: 50%; background: #3a2f12; }
  .browser .addr { flex: 1; max-width: 22rem; margin: 0 auto; background: #0d0a04; border: 1px solid var(--line); border-radius: 999px; padding: 0.2rem 0.9rem; color: var(--ink-dim); text-align: center; font-size: 10.5px; }

  /* the workspace itself — palette lifted from :root in the app's stylesheet */
  .ux {
    --w-bg: #f3f0e9; --w-surface: #fff; --w-ink: #1c1608; --w-soft: #6d6454;
    --w-line: #e1dbcc; --w-accent: #8a5d00; --w-gold: #f2b01e;
    --w-ok: #2e7d4f; --w-draft: #8a6d1a; --w-warn: #b3261e;
    display: grid; grid-template-columns: 5.73em 1fr; height: 73.5em;
    background: var(--w-bg); color: var(--w-ink); overflow: hidden; text-align: left;
  }
  .ux .muted { color: var(--w-soft); }
  .ux b { font-weight: 600; }
  .ux .btn0 { border: 1px solid var(--w-line); border-radius: 0.27em; background: var(--w-surface); padding: 0.4em 0.9em; white-space: nowrap; }
  .ux .btn0.primary { background: var(--w-accent); border-color: var(--w-accent); color: #fff; }
  .ux .btn0.ghost { border-color: transparent; background: transparent; color: var(--w-soft); }
  .ux .btn0.danger { color: var(--w-warn); }
  .ux .pill { font-size: 0.66em; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.1em 0.45em; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; }
  .ux .pill.draft { color: var(--w-draft); }
  .ux .pill.ordered { color: var(--w-ok); }
  .ux .pill.submitted { color: var(--w-accent); }

  /* icon rail — 86px, every icon carries its module name */
  .ux .nrail { background: linear-gradient(180deg, #221a0b, #141007 60%); display: flex; flex-direction: column; align-items: center; gap: 0.25em; padding: 0.55em 0; overflow: hidden; }
  .ux .nrail-logo { color: var(--w-gold); margin-bottom: 0.5em; display: flex; }
  .ux .nmod { position: relative; width: 5.07em; border-radius: 0.67em; color: #a2967b; display: flex; flex-direction: column; align-items: center; gap: 0.18em; padding: 0.4em 0.2em; }
  .ux .nmod.search { background: rgba(255,255,255,0.06); margin-bottom: 0.4em; }
  .ux .nmod.on { color: var(--w-gold); }
  .ux .nmod.on::before { content: ''; position: absolute; left: -0.35em; top: 50%; transform: translateY(-50%); width: 0.2em; height: 1.33em; border-radius: 0.13em; background: var(--w-gold); }
  .ux .nmod svg { width: 1.2em; height: 1.2em; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .ux .nmod span { font-size: 0.62em; line-height: 1.1; }

  /* app bar */
  .ux .mainarea { min-width: 0; display: flex; flex-direction: column; }
  .ux .appbar { display: flex; align-items: center; gap: 0.8em; height: 3.07em; flex-shrink: 0; padding: 0 1em; background: var(--w-surface); border-bottom: 1px solid var(--w-line); }
  .ux .wm { display: inline-flex; align-items: center; font-weight: 800; letter-spacing: 0.045em; font-size: 0.93em; color: var(--w-accent); }
  .ux .wm svg { margin: 0 -0.21em 0 -0.18em; }
  .ux .tenant { color: var(--w-soft); font-size: 0.9em; }
  .ux .sp { flex: 1; }
  .ux .asearch { display: flex; align-items: center; gap: 0.5em; background: var(--w-bg); border: 1px solid var(--w-line); border-radius: 0.53em; color: var(--w-soft); padding: 0.32em 0.7em; font-size: 0.85em; min-width: 13em; }
  .ux .asearch kbd { margin-left: auto; background: var(--w-surface); border: 1px solid var(--w-line); border-radius: 0.27em; padding: 0 0.3em; font-size: 0.75em; font-family: inherit; }

  /* documents view: quote rail + panel */
  .ux .wbody { display: flex; flex: 1; min-height: 0; }
  .ux .drail { width: 20.67em; flex-shrink: 0; background: var(--w-surface); border-right: 1px solid var(--w-line); padding: 0.9em; display: flex; flex-direction: column; gap: 0.6em; }
  .ux .chips { display: flex; gap: 0.6em; }
  .ux .chip { flex: 1; border-radius: 0.33em; padding: 0.5em 0.7em; display: flex; flex-direction: column; gap: 0.15em; color: #fff; font-size: 0.75em; text-transform: uppercase; letter-spacing: 0.06em; }
  .ux .chip strong { font-size: 1.05em; letter-spacing: 0; }
  .ux .chip.draft { background: #7a6210; }
  .ux .chip.ordered { background: var(--w-ok); }
  .ux .finput { border: 1px solid var(--w-line); border-radius: 0.27em; background: var(--w-surface); color: var(--w-soft); padding: 0.35em 0.5em; }
  .ux .rail-head { display: flex; align-items: center; justify-content: space-between; margin-top: 0.5em; }
  .ux .rail-head .h3 { margin: 0; font-size: 0.75em; text-transform: uppercase; letter-spacing: 0.1em; color: var(--w-soft); font-weight: 600; }
  .ux .doclist { list-style: none; margin: 0; padding: 0; }
  .ux .doclist li { display: flex; align-items: center; gap: 0.5em; padding: 0.45em 0.5em; border-radius: 0.27em; font-size: 0.88em; }
  .ux .doclist li.active { background: #e3ebf3; }
  .ux .doc-no { font-weight: 600; }
  .ux .doc-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ux .doc-amt { margin-left: auto; color: var(--w-soft); }

  .ux .content { flex: 1; min-width: 0; padding: 1.1em; }
  /* named .wpanel, not .panel — the site's own .panel is the nav dropdown */
  .ux .wpanel { background: var(--w-surface); border: 1px solid var(--w-line); border-radius: 0.4em; padding: 1.1em; display: flex; flex-direction: column; gap: 0.9em; }
  .ux .wpanel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1em; }
  .ux .wpanel-head .h2 { margin: 0; font-size: 1.15em; display: flex; align-items: center; gap: 0.6em; font-weight: 700; letter-spacing: 0; }
  .ux .wpanel-head p { margin: 0.2em 0 0; }
  .ux .wpanel-actions { display: flex; flex-wrap: wrap; gap: 0.5em; }

  .ux .editor-card { background: var(--w-surface); border: 1px solid var(--w-line); border-radius: 0.4em; padding: 1em 1.1em; display: flex; flex-direction: column; gap: 0.7em; }
  .ux .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.67em, 1fr)); gap: 0.6em; }
  .ux .field { display: flex; flex-direction: column; gap: 0.25em; font-size: 0.85em; }
  .ux .field > span { color: var(--w-soft); font-size: 0.72em; text-transform: uppercase; letter-spacing: 0.07em; }
  .ux .field i { font-style: normal; border: 1px solid var(--w-line); border-radius: 0.27em; padding: 0.35em 0.5em; background: var(--w-surface); }
  .ux .field i.sel::after { content: '\25be'; float: right; color: var(--w-soft); }

  /* unit configurator: options left, live elevation right */
  .ux .cfg { display: grid; grid-template-columns: minmax(20em, 25.33em) 1fr; gap: 1.1em; border: 1px solid var(--w-line); border-radius: 0.4em; padding: 1em; background: #fafbfc; }
  .ux .cfg-options { display: flex; flex-direction: column; gap: 0.7em; }
  .ux .tabs { display: flex; flex-wrap: wrap; gap: 0.5em; }
  .ux .dims { display: grid; grid-template-columns: 1fr 1fr 0.6fr; gap: 0.6em; }
  .ux .dims.two { grid-template-columns: 1fr 1fr; }
  .ux .option-grid { width: 100%; border-collapse: collapse; font-size: 0.85em; }
  .ux .option-grid th, .ux .option-grid td { padding: 0.35em 0.5em; border: 1px solid var(--w-line); text-align: left; }
  .ux .option-grid th { background: var(--w-bg); font-size: 0.7em; text-transform: uppercase; letter-spacing: 0.08em; color: var(--w-soft); font-weight: 600; }
  .ux .option-grid td.ans { background: var(--w-surface); }
  .ux .option-grid td.ans::after { content: '\25be'; float: right; color: var(--w-soft); }
  .ux .req { color: var(--w-warn); margin-left: 0.15em; }
  .ux .price-strip { border: 1px solid var(--w-line); border-radius: 0.27em; background: var(--w-surface); }
  .ux .price-lines { padding: 0.5em 0.8em; display: flex; flex-direction: column; gap: 0.2em; }
  .ux .price-line { display: flex; justify-content: space-between; font-size: 0.83em; color: var(--w-soft); }
  .ux .price-total { display: flex; justify-content: space-between; align-items: baseline; padding: 0.55em 0.8em; border-top: 1px solid var(--w-line); }
  .ux .price-total span { font-size: 0.75em; text-transform: uppercase; letter-spacing: 0.08em; color: var(--w-soft); }
  .ux .price-total strong { font-size: 1.25em; }
  .ux .cfg-drawing { display: grid; place-items: center; background: var(--w-surface); border: 1px solid var(--w-line); border-radius: 0.27em; padding: 1em; }
  .ux .cfg-drawing svg { width: 100%; height: auto; display: block; }

  /* lines grid — the quote's units, each row live-editable in place */
  .ux .lines { width: 100%; border-collapse: collapse; font-size: 0.88em; }
  .ux .lines th, .ux .lines td { padding: 0.45em 0.6em; border-bottom: 1px solid var(--w-line); text-align: left; }
  .ux .lines th { font-size: 0.7em; text-transform: uppercase; letter-spacing: 0.08em; color: var(--w-soft); font-weight: 600; }
  .ux .lines .num { text-align: right; }
  .ux .line-cell { display: flex; align-items: center; gap: 0.7em; }
  .ux .line-thumb { width: 6.4em; height: 6.4em; flex: 0 0 6.4em; display: flex; align-items: center; justify-content: center; border: 1px solid var(--w-line); border-radius: 0.4em; background: var(--w-surface); padding: 0.4em; }
  .ux .line-thumb svg { max-width: 100%; max-height: 5.6em; width: auto; height: auto; display: block; }
  .ux .opts-cell { font-size: 0.78em; }
  /* no mobile special-case: the frame is sized in cqw, so it scales down whole
     — a screenshot that shrinks, never a different screen than the app's */

  /* ---------- surfaces bar ---------- */
  .surfaces { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #0b0904; }
  .surfaces .wrap { display: flex; align-items: center; justify-content: center; gap: 2.6rem; flex-wrap: wrap; padding: 1rem 1.5rem; color: var(--ink-dim); font-size: 0.88rem; font-weight: 600; letter-spacing: 0.04em; }
  .surfaces svg { width: 17px; height: 17px; stroke: var(--gold-deep); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; margin-right: 0.45em; }

  /* ---------- stats strip ---------- */
  .strip { background: var(--panel); border-bottom: 1px solid var(--line); }
  .strip .wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
  .strip .cell { padding: 1.7rem 1.2rem; text-align: center; }
  .strip .cell + .cell { border-left: 1px solid var(--line); }
  @media (max-width: 720px) { .strip .cell + .cell { border-left: 0; border-top: 1px solid var(--line); } }
  .strip .n { font-size: 1.75rem; font-weight: 800; color: var(--gold); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
  .strip .l { color: var(--ink-soft); font-size: 0.88rem; max-width: 17rem; margin: 0.15rem auto 0; }

  /* ---------- sections ---------- */
  section { padding: 5.5rem 0; }
  .eyebrow { color: var(--gold); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; margin: 0 0 0.7rem; }
  h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); margin: 0 0 0.8rem; text-wrap: balance; letter-spacing: -0.01em; }
  .lead { color: var(--ink-soft); max-width: 47rem; margin: 0 0 2.6rem; font-size: 1.06rem; }
  .center { text-align: center; }
  .center .lead { margin-left: auto; margin-right: auto; }

  .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 1.1rem; }
  .grid.four { grid-template-columns: repeat(4, 1fr); }
  @media (max-width: 1080px) { .grid.four { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 560px) { .grid.four { grid-template-columns: 1fr; } }
  .card {
    background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
    padding: 1.6rem 1.5rem 1.4rem; transition: border-color 0.2s, transform 0.2s;
  }
  .card:hover { border-color: #4a3a14; transform: translateY(-2px); }
  .card h3 { margin: 0 0 0.5rem; font-size: 1.08rem; }
  .card p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }
  .card .ic {
    width: 42px; height: 42px; border-radius: 11px; margin-bottom: 1rem;
    display: flex; align-items: center; justify-content: center;
    background: rgba(242,176,30,0.09); border: 1px solid rgba(242,176,30,0.22);
  }
  .card .ic svg { width: 22px; height: 22px; stroke: var(--gold); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .card .tag { display: inline-block; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); border: 1px solid var(--gold-deep); border-radius: 999px; padding: 0.12rem 0.6rem; margin-bottom: 0.8rem; }

  .flow { display: flex; flex-wrap: wrap; gap: 0.55rem; align-items: center; margin: 0; }
  .flow .step { background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 0.5rem 1.15rem; font-weight: 600; font-size: 0.95rem; }
  .flow .step b { color: var(--gold); font-weight: 800; margin-right: 0.4em; }
  .flow .arrow { color: var(--gold-deep); font-weight: 700; }

  .split { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center; }
  @media (max-width: 860px) { .split { grid-template-columns: 1fr; gap: 2rem; } }
  .photo { margin: 0; }
  .photo img { display: block; width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(0,0,0,0.45); }
  .quote-card { background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: 12px; padding: 1.5rem 1.7rem; font-size: 1.06rem; }
  .quote-card .who { color: var(--ink-soft); font-size: 0.88rem; margin-top: 0.7rem; }

  .check { list-style: none; padding: 0; margin: 0; }
  .check li { padding: 0.5rem 0 0.5rem 2rem; position: relative; color: var(--ink-soft); }
  .check li::before {
    content: ''; position: absolute; left: 0; top: 0.72rem; width: 17px; height: 17px; border-radius: 50%;
    background: rgba(242,176,30,0.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f2b01e' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5 10-11'/%3E%3C/svg%3E") center/10px no-repeat;
    border: 1px solid rgba(242,176,30,0.3);
  }
  .check li strong { color: var(--ink); }

  .band { background: var(--panel-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

  /* ---------- final CTA ---------- */
  .cta-final {
    text-align: center; position: relative; overflow: hidden;
    background: radial-gradient(46rem 26rem at 50% 120%, #2a1e07 0%, var(--ground) 70%);
    border-top: 1px solid var(--line);
  }
  .cta-final .ctas { display: flex; gap: 0.9rem; justify-content: center; flex-wrap: wrap; }

  /* ---------- demo request form ---------- */
  .demo-form { max-width: 34rem; margin: 0 auto; text-align: left; }
  .demo-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
  @media (max-width: 560px) { .demo-form .row { grid-template-columns: 1fr; } }
  .demo-form label { display: block; margin-bottom: 0.75rem; }
  .demo-form span.lbl {
    display: block; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--ink-dim); margin-bottom: 0.3rem;
  }
  .demo-form input, .demo-form textarea {
    width: 100%; background: #100d06; border: 1px solid var(--line); border-radius: 9px;
    padding: 0.65rem 0.8rem; color: var(--ink); font: inherit;
  }
  .demo-form input:focus, .demo-form textarea:focus { outline: 2px solid var(--gold-deep); border-color: transparent; }
  .demo-form textarea { min-height: 5.5rem; resize: vertical; }
  /* The honeypot: off-screen rather than display:none, because some bots skip
     hidden inputs but happily fill a field they can still measure. */
  .demo-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  .demo-form .actions { display: flex; gap: 0.9rem; align-items: center; flex-wrap: wrap; margin-top: 0.3rem; }
  .demo-form .note { color: var(--ink-dim); font-size: 0.85rem; margin: 0.9rem 0 0; }
  .demo-form .said { color: var(--gold); font-weight: 700; }
  .demo-form .failed { color: #ff9b8a; }

  /* ---------- footer ---------- */
  footer { border-top: 1px solid var(--line); background: #0a0804; padding: 3.5rem 0 0; color: var(--ink-soft); font-size: 0.92rem; }
  .fcols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2.5rem; padding-bottom: 2.8rem; }
  @media (max-width: 860px) { .fcols { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 520px) { .fcols { grid-template-columns: 1fr; } }
  .fcols h4 { color: var(--ink); font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 0.9rem; }
  .fcols ul { list-style: none; margin: 0; padding: 0; }
  .fcols li { margin: 0.45rem 0; }
  .fcols a { color: var(--ink-soft); }
  .fcols a:hover { color: var(--gold); }
  .fcols .blurb { max-width: 20rem; margin: 0.9rem 0 0; font-size: 0.88rem; }
  .legal { border-top: 1px solid var(--line); padding: 1.3rem 0; }
  .legal .wrap { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; color: var(--ink-dim); font-size: 0.84rem; }

  /* ==========================================================================
     SUITE LAYER — added 2026-09-02, when the site moved from selling "an ERP"
     to selling the Extrusia Software Suite (Dealer Connect / ERP / Link /
     Josie). Everything above this line is the original platform page and is
     still in use — nothing here overrides it, so the workspace mockup keeps
     rendering at the app's own measurements.
     ========================================================================== */

  /* ---------- scroll reveal ---------- */
  .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.8s cubic-bezier(0.2,0.7,0.3,1), transform 0.8s cubic-bezier(0.2,0.7,0.3,1); }
  .reveal.in { opacity: 1; transform: none; }
  .reveal.d1 { transition-delay: 0.08s; } .reveal.d2 { transition-delay: 0.16s; }
  .reveal.d3 { transition-delay: 0.24s; } .reveal.d4 { transition-delay: 0.32s; }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal { opacity: 1; transform: none; transition: none; }
    .livedot, .caretblink, .floatcard { animation: none !important; }
  }

  /* ---------- shared type helpers ---------- */
  .say { font-size: clamp(1.15rem, 2.1vw, 1.5rem); font-weight: 700; line-height: 1.35; text-wrap: balance; margin: 2rem 0 0; }
  .say em { font-style: normal; color: var(--gold); }
  .mb0 { margin-bottom: 0; }
  .narrow { max-width: 44rem; }

  /* ---------- hero, suite edition ---------- */
  .hero .roles { display: grid; grid-template-columns: 1fr 1fr; gap: 0.65rem 1.6rem; margin: 0 0 1.9rem; max-width: 34rem; }
  .hero .roles div { color: var(--ink-soft); font-size: 0.97rem; }
  .hero .roles b { display: block; color: var(--gold); font-weight: 800; font-size: 0.76rem; letter-spacing: 0.13em; text-transform: uppercase; margin-bottom: 0.1rem; }
  @media (max-width: 520px) { .hero .roles { grid-template-columns: 1fr; } }
  @media (max-width: 760px) {
    .hero .lockup .word { flex-wrap: wrap; white-space: normal; row-gap: 0.3rem; font-size: clamp(1.15rem, 5.2vw, 1.9rem); }
    .hero .lockup .word .erp { margin-left: 0; }
  }

  .shotwrap { position: relative; }
  .floatcard {
    position: absolute; z-index: 3; background: rgba(14,11,5,0.93); backdrop-filter: blur(10px);
    border: 1px solid #3d3012; border-radius: 14px; padding: 0.8rem 1rem;
    box-shadow: 0 26px 60px rgba(0,0,0,0.7); font-size: 0.84rem; line-height: 1.35;
    animation: floatin 0.9s cubic-bezier(0.2,0.7,0.3,1) both;
  }
  @keyframes floatin { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: none; } }
  .floatcard .fc-lbl { color: var(--ink-dim); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; }
  .floatcard .fc-val { color: var(--ink); font-weight: 800; font-size: 1.05rem; }
  .floatcard .fc-val i { font-style: normal; color: var(--gold); }
  .floatcard.a { left: 0.7rem; bottom: 30%; animation-delay: 0.5s; }
  .floatcard.b { right: 0.7rem; top: 9%; animation-delay: 0.72s; }
  .floatcard.c { right: 1.2rem; bottom: 3%; max-width: 17rem; display: flex; align-items: center; gap: 0.6rem; animation-delay: 0.95s; }
  .floatcard.c .jdot { width: 22px; height: 22px; border-radius: 50%; flex: none; background: radial-gradient(circle at 32% 30%, #fff2cd, var(--gold) 45%, var(--gold-deep)); }
  @media (max-width: 1180px) { .floatcard, .floatcard.c { display: none; } }
  .livedot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #45d17f; margin-right: 0.45em; animation: pulse 2.2s ease-in-out infinite; }
  @keyframes pulse { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(69,209,127,0.45); } 50% { opacity: 0.75; box-shadow: 0 0 0 5px rgba(69,209,127,0); } }

  /* ---------- suite bar (directly under the hero) ---------- */
  .suitebar { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #0b0904; }
  .suitebar .wrap { display: grid; grid-template-columns: repeat(4, 1fr); padding: 0 1.5rem; }
  .suitebar a { display: flex; gap: 0.85rem; align-items: flex-start; padding: 1.4rem 1.3rem; color: var(--ink-soft); border-right: 1px solid var(--line); transition: background 0.2s; }
  .suitebar a:first-child { border-left: 1px solid var(--line); }
  .suitebar a:hover { background: var(--panel); }
  .suitebar .sbi { flex: none; width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: rgba(242,176,30,0.09); border: 1px solid rgba(242,176,30,0.22); }
  .suitebar .sbi svg { width: 18px; height: 18px; stroke: var(--gold); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .suitebar .sbn { color: var(--ink); font-weight: 700; font-size: 0.95rem; display: block; }
  .suitebar .sbd { font-size: 0.83rem; color: var(--ink-dim); display: block; margin-top: 0.05rem; }
  @media (max-width: 980px) { .suitebar .wrap { grid-template-columns: 1fr 1fr; } .suitebar a { border-bottom: 1px solid var(--line); } .suitebar a:first-child { border-left: 0; } }
  @media (max-width: 560px) { .suitebar .wrap { grid-template-columns: 1fr; } .suitebar a { border-right: 0; } }

  /* ---------- suite product cards ---------- */
  .prodgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; }
  @media (max-width: 900px) { .prodgrid { grid-template-columns: 1fr; } }
  .prodcard {
    position: relative; overflow: hidden; display: flex; flex-direction: column;
    background: linear-gradient(165deg, #171106 0%, #0f0b05 62%);
    border: 1px solid var(--line); border-radius: 18px; padding: 1.9rem 1.8rem 1.6rem;
    transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
  }
  .prodcard::before {
    content: ''; position: absolute; top: -40%; right: -20%; width: 26rem; height: 26rem; pointer-events: none;
    background: radial-gradient(circle, rgba(242,176,30,0.11) 0%, transparent 62%);
  }
  .prodcard:hover { border-color: #52400f; transform: translateY(-3px); box-shadow: 0 26px 60px rgba(0,0,0,0.45); }
  .prodcard > * { position: relative; }
  .prodcard .pnum { color: var(--gold-deep); font-weight: 800; font-size: 0.74rem; letter-spacing: 0.22em; }
  .prodcard h3 { margin: 0.7rem 0 0.15rem; font-size: 1.5rem; letter-spacing: -0.01em; }
  .prodcard .prole { color: var(--gold); font-weight: 700; font-size: 0.95rem; margin: 0 0 0.8rem; }
  .prodcard p { color: var(--ink-soft); margin: 0 0 1.1rem; font-size: 0.97rem; }
  .prodcard ul { list-style: none; margin: 0 0 1.4rem; padding: 0; color: var(--ink-soft); font-size: 0.92rem; }
  .prodcard li { padding: 0.22rem 0 0.22rem 1.1rem; position: relative; }
  .prodcard li::before { content: ''; position: absolute; left: 0; top: 0.85em; width: 5px; height: 5px; border-radius: 50%; background: var(--gold-deep); }
  .prodcard .go { margin-top: auto; font-weight: 700; font-size: 0.94rem; display: inline-flex; align-items: center; gap: 0.4em; }
  .prodcard .go span { transition: transform 0.2s; }
  .prodcard:hover .go span { transform: translateX(4px); }

  /* ---------- product section headers ---------- */
  .prodhead { display: flex; align-items: center; gap: 0.9rem; margin: 0 0 0.6rem; }
  .prodhead .pmark { width: 40px; height: 40px; flex: none; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: rgba(242,176,30,0.1); border: 1px solid rgba(242,176,30,0.26); }
  .prodhead .pmark svg { width: 21px; height: 21px; stroke: var(--gold); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .prodhead .pname { font-size: 0.8rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
  .prodhead .ptag { display: block; color: var(--ink-dim); font-size: 0.82rem; letter-spacing: 0.04em; text-transform: none; font-weight: 600; margin-top: 0.1rem; }

  /* ---------- two-column feature lists ---------- */
  .cols2 { columns: 2; column-gap: 2.4rem; }
  @media (max-width: 700px) { .cols2 { columns: 1; } }
  .cols2 li { break-inside: avoid; }

  /* ---------- chip cloud ---------- */
  .chipcloud { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
  .chipcloud li {
    background: var(--panel); border: 1px solid var(--line); border-radius: 999px;
    padding: 0.42rem 1rem; font-size: 0.92rem; color: var(--ink-soft); transition: border-color 0.2s, color 0.2s;
  }
  .chipcloud li:hover { border-color: var(--gold-deep); color: var(--ink); }
  .chipcloud.big li { font-size: 0.98rem; padding: 0.5rem 1.15rem; }

  /* ---------- Link: the leadership board ---------- */
  .board { background: linear-gradient(180deg, #14100a, #0d0a05); border: 1px solid #34290f; border-radius: 18px; padding: 1.2rem 1.2rem 1.4rem; box-shadow: 0 34px 80px rgba(0,0,0,0.55); }
  .board-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 0.9rem; border-bottom: 1px solid var(--line); }
  .board-head b { font-size: 0.95rem; }
  .board-head .when { color: var(--ink-dim); font-size: 0.8rem; }
  .kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; margin: 1rem 0; }
  .kpi { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 0.85rem 0.95rem; }
  .kpi .k { color: var(--ink-dim); font-size: 0.7rem; letter-spacing: 0.11em; text-transform: uppercase; }
  .kpi .v { font-size: 1.5rem; font-weight: 800; color: var(--gold); font-variant-numeric: tabular-nums; line-height: 1.2; margin-top: 0.15rem; }
  .kpi .d { color: var(--ink-soft); font-size: 0.8rem; }
  .kpi .d.warn { color: #ff9b8a; }
  .kpi .d.ok { color: #6fd39b; }
  .bars { display: flex; flex-direction: column; gap: 0.6rem; }
  .bar { display: grid; grid-template-columns: 6.5rem 1fr 2.8rem; align-items: center; gap: 0.7rem; font-size: 0.83rem; color: var(--ink-soft); }
  .bar .track { height: 8px; border-radius: 999px; background: #2a2110; border: 1px solid #382c12; overflow: hidden; }
  .bar .fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #b5760a, var(--gold)); }
  .bar .fill.low { background: linear-gradient(90deg, #8d3222, #e0654a); }
  .bar .pct { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 700; }

  /* ---------- Link: the four questions ---------- */
  .quad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; margin-top: 2.8rem; }
  @media (max-width: 900px) { .quad { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 480px) { .quad { grid-template-columns: 1fr; } }
  .quad div { border-top: 2px solid var(--gold-deep); padding-top: 1rem; font-size: 1.12rem; font-weight: 700; color: var(--ink); }
  .quad div span { display: block; color: var(--ink-dim); font-size: 0.87rem; font-weight: 400; margin-top: 0.4rem; }

  /* ---------- Josie: the film ---------- */
  .film { margin: 2.6rem auto 0; max-width: 960px; }
  .film video { display: block; width: 100%; aspect-ratio: 16/9; border-radius: 16px;
    border: 1px solid #3a2d10; background: #000; box-shadow: 0 34px 90px rgba(0,0,0,0.6); }
  .film figcaption { margin-top: 0.7rem; text-align: center; color: var(--ink-dim);
    font-size: 0.85rem; }

  /* ---------- Josie ---------- */
  .josie { position: relative; overflow: hidden; background: radial-gradient(52rem 32rem at 78% 6%, #2b1f08 0%, transparent 62%), #0a0804; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .josie-orb { width: 56px; height: 56px; border-radius: 50%; margin-bottom: 1.2rem; background: radial-gradient(circle at 32% 28%, #fff2cd, var(--gold) 42%, var(--gold-deep) 100%); box-shadow: 0 0 46px rgba(242,176,30,0.35); }
  .ask { background: linear-gradient(180deg, #171105, #0d0a04); border: 1px solid #3a2d10; border-radius: 20px; padding: 1.3rem; box-shadow: 0 34px 90px rgba(0,0,0,0.6); display: flex; flex-direction: column; gap: 0.75rem; }
  .bubble { max-width: 88%; padding: 0.7rem 1rem; border-radius: 14px; font-size: 0.95rem; line-height: 1.5; }
  .bubble.you { align-self: flex-end; background: var(--panel-2); border: 1px solid var(--line); border-bottom-right-radius: 4px; color: var(--ink); }
  .bubble.her { align-self: flex-start; background: rgba(242,176,30,0.07); border: 1px solid rgba(242,176,30,0.2); border-bottom-left-radius: 4px; color: var(--ink-soft); }
  .bubble.her b { color: var(--ink); }
  .bubble.her .did { display: block; margin-top: 0.55rem; padding-top: 0.55rem; border-top: 1px dashed rgba(242,176,30,0.25); color: var(--gold); font-size: 0.86rem; font-weight: 700; }
  .askbar { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.35rem; background: #0b0803; border: 1px solid var(--line); border-radius: 999px; padding: 0.6rem 0.7rem 0.6rem 1.05rem; }
  .askbar .txt { flex: 1; color: var(--ink-soft); font-size: 0.94rem; min-height: 1.45em; }
  .caretblink { display: inline-block; width: 1.5px; height: 1em; background: var(--gold); vertical-align: -2px; margin-left: 1px; animation: blink 1s step-end infinite; }
  @keyframes blink { 50% { opacity: 0; } }
  .askbar .send { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--gold); display: flex; align-items: center; justify-content: center; }
  .askbar .send svg { width: 16px; height: 16px; stroke: #1a1204; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
  .taskchips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
  @media (max-width: 900px) { .taskchips { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 560px) { .taskchips { grid-template-columns: 1fr; } }
  .taskchips li { display: flex; align-items: center; gap: 0.65rem; background: var(--panel); border: 1px solid var(--line); border-radius: 11px; padding: 0.7rem 0.9rem; font-size: 0.9rem; color: var(--ink-soft); }
  .taskchips li::before {
    content: ''; flex: none; width: 17px; height: 17px; border-radius: 5px;
    background: rgba(242,176,30,0.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f2b01e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2L4 14h7l-1 8 9-12h-7z'/%3E%3C/svg%3E") center/11px no-repeat;
    border: 1px solid rgba(242,176,30,0.24);
  }

  /* ---------- one source of truth ---------- */
  .pipe { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; justify-content: center; margin: 0 0 2.6rem; }
  .pipe .node { background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 0.6rem 1.35rem; font-weight: 700; font-size: 0.97rem; }
  .pipe .node.hi { border-color: var(--gold-deep); color: var(--gold); }
  .pipe .arw { color: var(--gold-deep); font-weight: 800; }
  .morph { display: grid; gap: 0.7rem; }
  .morph-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1.5rem; padding: 1rem 1.3rem; background: var(--panel); border: 1px solid var(--line); border-radius: 13px; }
  .morph-row p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }
  .morph-row .chain { font-weight: 800; font-size: 0.9rem; letter-spacing: 0.04em; color: var(--gold); white-space: nowrap; }
  @media (max-width: 700px) { .morph-row { grid-template-columns: 1fr; gap: 0.5rem; } .morph-row .chain { white-space: normal; } }

  /* ---------- designed for every level ---------- */
  .levels { display: grid; gap: 0.7rem; }
  .level { display: grid; grid-template-columns: 11rem 13rem 1fr; align-items: center; gap: 1.6rem; padding: 1.2rem 1.5rem; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; transition: border-color 0.2s; }
  .level:hover { border-color: #4a3a14; }
  .level .who { font-weight: 800; font-size: 1.08rem; }
  .level .what { color: var(--gold); font-weight: 700; font-size: 0.88rem; letter-spacing: 0.06em; text-transform: uppercase; }
  .level p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }
  @media (max-width: 860px) { .level { grid-template-columns: 1fr; gap: 0.35rem; } }

  /* ---------- numbered cards ---------- */
  .card .num { display: block; color: var(--gold-deep); font-weight: 800; font-size: 0.74rem; letter-spacing: 0.2em; margin-bottom: 0.55rem; }

  /* ---------- closing recap ---------- */
  .recap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; margin: 2.4rem auto 2.6rem; max-width: 62rem; text-align: left; }
  @media (max-width: 860px) { .recap { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 480px) { .recap { grid-template-columns: 1fr; } }
  .recap div { border-top: 2px solid var(--gold-deep); padding-top: 0.9rem; }
  .recap .rl { color: var(--ink); font-weight: 700; font-size: 1.02rem; }
  .recap .rp { color: var(--gold); font-weight: 800; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; margin-top: 0.3rem; }

  /* ---------- misc ---------- */
  .grid.five { grid-template-columns: repeat(5, 1fr); }
  @media (max-width: 1180px) { .grid.five { grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 760px) { .grid.five { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 480px) { .grid.five { grid-template-columns: 1fr; } }
  .grid.tight { gap: 0.85rem; }
  .grid.tight .card { padding: 1.35rem 1.35rem 1.2rem; }
  .grid.tight .card h3 { font-size: 1rem; }
  .grid.tight .card p { font-size: 0.91rem; }
  /* 13 core functions never fill the last row evenly — let the final card own it */
  .grid.tight .card:last-child { grid-column: 1 / -1; }
  :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

  /* ---------- guides & free tools (homepage) ---------- */
  .learn .grid { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
  .learn a.card { display: block; color: inherit; }
  .learn a.card h3 { color: var(--ink); }
  .learn .card .tag { margin-bottom: 0.6rem; }
  .learn .more { text-align: center; margin: 1.8rem 0 0; }

  /* ==========================================================================
     INNER PAGES — added 2026-10-19 with the product, comparison and guide
     pages. Built into /assets/site.css after the homepage's own <style> block
     by _src/build.py, so nothing here can override the homepage.
     ========================================================================== */

  .page-hero {
    padding: 4.2rem 0 3.4rem; position: relative; overflow: hidden;
    background:
      radial-gradient(50rem 30rem at 85% -20%, #2a1e07 0%, transparent 60%),
      radial-gradient(40rem 26rem at 5% 120%, #1a1305 0%, transparent 55%),
      var(--ground);
    border-bottom: 1px solid var(--line);
  }
  .page-hero h1 {
    font-size: clamp(1.9rem, 4vw, 2.8rem); line-height: 1.14; letter-spacing: -0.015em;
    margin: 0 0 1rem; text-wrap: balance; font-weight: 800; max-width: 52rem;
  }
  .page-hero h1 em { font-style: normal; color: var(--gold); }
  .page-hero .lead { margin-bottom: 1.8rem; max-width: 46rem; font-size: 1.12rem; }
  .page-hero .ctas { display: flex; gap: 0.9rem; flex-wrap: wrap; }
  .page-hero .meta { color: var(--ink-dim); font-size: 0.88rem; margin: 0 0 1.2rem; }

  .crumbs { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0; margin: 0 0 1.4rem; font-size: 0.85rem; color: var(--ink-dim); }
  .crumbs li + li::before { content: '›'; margin-right: 0.4rem; color: var(--gold-deep); }
  .crumbs a { color: var(--ink-soft); }
  .crumbs a:hover { color: var(--gold); }

  section.tight { padding: 4rem 0; }

  /* long-form reading column */
  .prose { max-width: 46rem; color: var(--ink-soft); font-size: 1.04rem; }
  .prose.wide { max-width: 60rem; }
  .prose h2 { color: var(--ink); font-size: clamp(1.4rem, 2.6vw, 1.85rem); margin: 2.8rem 0 0.8rem; }
  .prose h2:first-child { margin-top: 0; }
  .prose h3 { color: var(--ink); font-size: 1.15rem; margin: 2rem 0 0.5rem; }
  .prose p { margin: 0 0 1.1rem; }
  .prose strong { color: var(--ink); }
  .prose a { text-decoration: underline; text-decoration-color: var(--gold-deep); text-underline-offset: 3px; }
  .prose ul, .prose ol { margin: 0 0 1.2rem; padding-left: 1.3rem; }
  .prose li { margin: 0.35rem 0; }
  .prose li::marker { color: var(--gold-deep); }
  .prose code { background: var(--panel); border: 1px solid var(--line); border-radius: 5px; padding: 0.05rem 0.35rem; font-size: 0.92em; color: var(--ink); }
  .prose blockquote { margin: 1.4rem 0; padding: 1rem 1.3rem; background: var(--panel); border-left: 3px solid var(--gold); border-radius: 0 10px 10px 0; color: var(--ink); }
  .prose .note { background: rgba(242,176,30,0.06); border: 1px solid rgba(242,176,30,0.22); border-radius: 12px; padding: 1rem 1.2rem; margin: 1.4rem 0; color: var(--ink-soft); font-size: 0.97rem; }
  .prose .note b { color: var(--gold); }

  .tablewrap { overflow-x: auto; margin: 0 0 1.4rem; border: 1px solid var(--line); border-radius: 12px; }
  .tablewrap table { width: 100%; border-collapse: collapse; font-size: 0.94rem; min-width: 34rem; }
  .tablewrap th, .tablewrap td { padding: 0.7rem 0.9rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
  .tablewrap th { background: var(--panel); color: var(--ink); font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; }
  .tablewrap tr:last-child td { border-bottom: 0; }
  .tablewrap td.num { text-align: right; font-variant-numeric: tabular-nums; }

  /* two-column body: article + side card */
  .withside { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: 3.5rem; align-items: start; }
  /* minmax(0, …), not 1fr: a wide table must scroll inside .tablewrap rather
     than stretch the column (1fr's minimum is the content's, so it did) */
  @media (max-width: 980px) { .withside { grid-template-columns: minmax(0, 1fr); gap: 2.2rem; } }
  .withside > * { min-width: 0; }
  .sidecard { position: sticky; top: 6rem; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 1.4rem 1.3rem; }
  .sidecard h3 { margin: 0 0 0.6rem; font-size: 1rem; }
  .sidecard p { color: var(--ink-soft); font-size: 0.92rem; margin: 0 0 1rem; }
  .sidecard ul { list-style: none; padding: 0; margin: 0 0 1.1rem; font-size: 0.92rem; }
  .sidecard li { padding: 0.3rem 0; border-bottom: 1px solid var(--line); }
  .sidecard li:last-child { border-bottom: 0; }

  /* questions and answers */
  .faq { display: grid; gap: 0.7rem; max-width: 52rem; }
  .faq details { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 0; }
  .faq summary { cursor: pointer; list-style: none; padding: 1rem 1.2rem; font-weight: 700; color: var(--ink); display: flex; justify-content: space-between; gap: 1rem; }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after { content: '+'; color: var(--gold); font-weight: 800; }
  .faq details[open] summary::after { content: '–'; }
  .faq .a { padding: 0 1.2rem 1.1rem; color: var(--ink-soft); }
  .faq .a p { margin: 0 0 0.7rem; }
  .faq .a p:last-child { margin: 0; }

  /* numbered steps */
  .steps { counter-reset: s; display: grid; gap: 0.8rem; }
  .steps > div { counter-increment: s; position: relative; padding: 1.1rem 1.3rem 1.1rem 4rem; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; }
  .steps > div::before { content: counter(s); position: absolute; left: 1.2rem; top: 1rem; width: 1.9rem; height: 1.9rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; color: #1a1204; background: var(--gold); }
  .steps h3 { margin: 0 0 0.3rem; font-size: 1.04rem; }
  .steps p { margin: 0; color: var(--ink-soft); font-size: 0.96rem; }

  /* big figures */
  .figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0.9rem; margin: 0 0 2rem; }
  .fig { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 1.2rem 1.2rem 1.1rem; }
  .fig .n { font-size: 1.7rem; font-weight: 800; color: var(--gold); font-variant-numeric: tabular-nums; line-height: 1.15; }
  .fig .l { color: var(--ink-soft); font-size: 0.88rem; margin-top: 0.3rem; }

  /* related links */
  .related { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0.9rem; }
  .related a { display: block; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 1.1rem 1.2rem; color: var(--ink-soft); transition: border-color 0.2s, transform 0.2s; }
  .related a:hover { border-color: #4a3a14; transform: translateY(-2px); }
  .related a b { display: block; color: var(--ink); margin-bottom: 0.25rem; }
  .related a span { font-size: 0.9rem; }

  /* the closing call to action on every inner page */
  .cta-band { text-align: center; background: radial-gradient(46rem 26rem at 50% 120%, #2a1e07 0%, var(--ground) 70%); border-top: 1px solid var(--line); }
  .cta-band .ctas { display: flex; gap: 0.9rem; justify-content: center; flex-wrap: wrap; }
  .cta-band .lead { margin-left: auto; margin-right: auto; }

  /* ---------- calculators (/tools/*) ---------- */
  .mc { display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: 2.4rem; align-items: start; }
  @media (max-width: 900px) { .mc { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; } }
  .mc-form { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 1.3rem 1.3rem 0.6rem; }
  .mc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
  .mc-field { display: block; margin: 0 0 0.9rem; }
  .mc-field .lbl { display: block; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 0.3rem; }
  .mc-field input, .mc-field select { width: 100%; background: #100d06; border: 1px solid var(--line); border-radius: 9px; padding: 0.6rem 0.75rem; color: var(--ink); font: inherit; }
  .mc-field input:focus, .mc-field select:focus { outline: 2px solid var(--gold-deep); border-color: transparent; }
  .mc-hint { color: var(--ink-dim); font-size: 0.85rem; margin: 0 0 0.8rem; }
  .mc-out .tablewrap table { min-width: 30rem; }
  .mc-out td strong { color: var(--gold); font-variant-numeric: tabular-nums; }
  .mc-dec { display: block; color: var(--ink-dim); font-size: 0.82rem; font-variant-numeric: tabular-nums; }
  .mc-check { color: var(--ink-soft); font-size: 0.92rem; margin: 0; }
  .mc-error { color: #ff9b8a; font-weight: 600; margin: 0; }
  .mc-out .tablewrap table td:first-child { color: var(--ink-soft); }
  .tg-flags { border: 1px solid var(--line); border-radius: 12px; padding: 0.7rem 0.9rem 0.4rem; margin: 0 0 0.9rem; }
  .tg-flags legend { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-dim); padding: 0 0.3rem; }
  .tg-flags label { display: flex; gap: 0.55rem; align-items: flex-start; color: var(--ink-soft); font-size: 0.92rem; margin: 0 0 0.5rem; cursor: pointer; }
  .tg-flags input { margin-top: 0.3rem; accent-color: var(--gold); }
  .tg-verdict { font-weight: 800; font-size: 1.15rem; margin: 0 0 0.8rem; padding: 0.7rem 1rem; border-radius: 12px; }
  .tg-yes { color: #1a1204; background: var(--gold); }
  .tg-no { color: var(--ink); background: var(--panel); border: 1px solid var(--line); }
  .tg-list { margin: 0 0 1rem; padding-left: 1.2rem; color: var(--ink); }
  .tg-list li { margin: 0.35rem 0; }
  .tg-sub { color: var(--ink); font-weight: 700; margin: 1rem 0 0.4rem; font-size: 0.95rem; }
  .tg-conds { list-style: none; padding: 0; margin: 0 0 0.8rem; font-size: 0.92rem; }
  .tg-conds li { padding: 0.25rem 0; }
  .tg-conds .met { color: var(--gold); }
  .tg-conds .unmet { color: var(--ink-dim); }
  .sc-cuts { margin-bottom: 0.6rem; }
  .sc-cuts table { min-width: 0; }
  .sc-cuts th, .sc-cuts td { padding: 0.45rem 0.5rem; }
  .sc-cuts input { width: 100%; background: #100d06; border: 1px solid var(--line); border-radius: 8px; padding: 0.45rem 0.55rem; color: var(--ink); font: inherit; }
  .sc-cuts td:nth-child(2) { width: 5.5rem; }
  .sc-cuts td:nth-child(3) { width: 2.2rem; }
  .sc-del { background: none; border: 0; color: var(--ink-dim); font-size: 1.2rem; cursor: pointer; padding: 0.2rem 0.4rem; }
  .sc-del:hover { color: #ff9b8a; }
  .sc-bars { margin: 0; padding-left: 1.4rem; color: var(--ink-soft); font-size: 0.92rem; font-variant-numeric: tabular-nums; }
  .sc-bars li { margin: 0.25rem 0; }

  /* ---------- glossary ---------- */
  .gl-jump { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.4rem 0 0; }
  .gl-jump a { display: inline-flex; width: 2.1rem; height: 2.1rem; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 8px; color: var(--ink-soft); font-weight: 700; font-size: 0.9rem; }
  .gl-jump a:hover { border-color: var(--gold-deep); color: var(--gold); }
  .gl h2 { color: var(--gold); font-size: 1.3rem; border-bottom: 1px solid var(--line); padding-bottom: 0.3rem; margin-top: 2.2rem; scroll-margin-top: 5.5rem; }
  .gl h3 { margin-top: 1.2rem; scroll-margin-top: 5.5rem; }
  .gl p { margin-bottom: 0.6rem; }