:root {
    /* Named so native widgets, scrollbars and form controls match the page
       even with the head script blocked, when no data-theme is set at all. */
    color-scheme: light;
    --bg: #f8f5ef;
    --surface: #ffffff;
    --border: #e3ded6;
    /* Form field edges: 3:1 against white and the cream demo panel (WCAG 1.4.11);
       --border stays the quiet hairline for cards and rules. */
    --control-border: #8f8a80;
    --ink: #1b1a18;
    --ink-soft: #55514b;
    /* Text gold is deliberately deeper than decorative gold. All text inks
       meet AA on bg, surface, accent-soft and gold-soft in both themes. */
    --ink-faint: #68635b;
    --accent: #125c43;
    --accent-soft: #edf5f0;
    --on-accent: #ffffff;
    --danger: #a5402f;
    --gold: #795318;
    --gold-ui: #a57119;
    --gold-soft: #fbf2df;
    --measure: 34rem;
    --num: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Menlo, monospace;
    /* Geist, self-hosted, already on the wire: it renders the default sketch
       and the body text. It is also the face the product itself ships
       as its default identity, which is the actual argument for using it here
       — a marketing page in a typeface the product never uses is a promise the
       first screenshot breaks. */
    --sans: "Geist Site", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;    /* Premium layer tokens (15 Oct 2026, docs/design/site-2026-10/DESIGN.md).
       --stage is the lit green the product and the ask sit on; --paper-2 the
       warm second paper the chapter scenes sit on. Non-colour tokens are not
       hex on purpose: the contrast test reads hex tokens only. */
    --serif: "Fraunces Display", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    --paper-2: #f1ece3;
    --stage: #0f3f2f;
    --on-stage: #f6f1e7;
    --stage-deep: #0a2b20;
    --on-stage-deep: #f6f1e7;
    --fanlight: rgb(255 136 62);
    --hair: rgb(27 26 24 / .1);
    --radius-xl: 28px;
    --shadow-lg: 0 1px 1px rgb(16 24 20 / .04), 0 8px 16px -8px rgb(16 24 20 / .1), 0 32px 64px -24px rgb(16 40 30 / .28);
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  /* The dark palette. It is reached by an explicit data-theme="dark" and by
     nothing else -- the OS preference used to gate this block, and no longer
     does, because a dark desktop is not a decision about this page. The
     @media wrapper stays as `all` so the block keeps its shape; the
     condition it used to carry is gone deliberately. */
  @media all {
    :root[data-theme="dark"] {
      color-scheme: dark;
      --bg: #14150f;
      --surface: #1c1e17;
      --border: #2f3229;
      --control-border: #75726a;
      --ink: #f2f0ea;
      --ink-soft: #b9b5ab;
      --ink-faint: #a4a096;
      --accent: #83d4af;
      --accent-soft: #1c2b23;
      --on-accent: #14150f;
      --danger: #e08876;
      --gold: #e4b96d;
      --gold-ui: #dfb35d;
      --gold-soft: #29251b;
      --paper-2: #1b1f18;
      --stage: #12352a;
      --on-stage: #f2f0ea;
      --stage-deep: #08170f;
      --on-stage-deep: #f2f0ea;
      --hair: rgb(242 240 234 / .1);
      --shadow-lg: 0 1px 1px rgb(0 0 0 / .3), 0 8px 16px -8px rgb(0 0 0 / .5), 0 32px 64px -24px rgb(0 0 0 / .7);
    }
  }
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font: 400 17px/1.62 var(--sans);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }
  /* Two containers, deliberately. `.wrap` is the reading column and it is what
     the four generated pages use, so its width is a legal-page decision as much
     as a landing-page one. `.shell` is wider and exists only on this page, for
     the three blocks that are structure rather than prose — the hero, the
     metric strip and the feature grid. Everything set in `.shell` still holds
     its own paragraphs to --measure, so widening the container never widens a
     line of text past the point it gets hard to track back. */
  .wrap { max-width: 46rem; margin: 0 auto; padding: 0 1.5rem; }
  .shell { max-width: 72rem; margin: 0 auto; padding: 0 1.5rem; }
  h1, h2, h3, .ui { font-family: var(--sans); }

  /* ---------- header and footer (site/site-chrome.mjs) ------------------
     One header and one footer on every public page, in one container that
     is the same width everywhere, so moving between pages never moves the
     wordmark or the menu. `.chrome` is that container; the page content
     below keeps its own column (.shell here, .wrap on the reading pages). */
  .chrome { width: 100%; max-width: 80rem; margin-inline: auto; padding-inline: 1.5rem; }
  .site-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1.5rem; min-height: 4.5rem; border-bottom: 1px solid var(--border);
  }
  .mark {
    font: 600 1.05rem/1 var(--sans);
    letter-spacing: -0.015em;
    display: inline-flex; align-items: center; gap: .55rem;
  }
  a.mark { min-height: 44px; padding: .6rem 0; text-decoration: none; color: inherit; }
  .mark .mark-region { color: var(--ink-faint); font-weight: 400; font-size: .8rem; letter-spacing: .02em; line-height: 1; padding-top: .45rem; }
  .mark > svg { width: 26px; height: 26px; border-radius: 6px; flex: none; }
  .mark .lb-mark { color: var(--ink); }
  /* The hero's living Fanlight: 160 px where the column allows it, and never
     wider than the column, so its letters always have their own room. */
  .hero-mark { container-type: inline-size; margin: 0 0 1.5rem; }
  .head-nav { display: flex; align-items: center; gap: 1.25rem; }
  .head-nav a {
    font: 500 .92rem/1 var(--sans); color: var(--ink-soft);
    text-decoration: none; padding: .8rem 0;
  }
  .head-nav a:hover, .head-nav a[aria-current="page"] { color: var(--ink); }
  .head-nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--gold-ui); }
  .nav-demo { background: var(--accent); color: var(--on-accent) !important; border-radius: 8px; font-weight: 600 !important; }
  .head-nav .nav-demo { padding: .8rem 1rem; margin-inline-start: .25rem; }
  .nav-demo:hover { border-color: var(--gold-ui); }
  /* Phones and small tablets: the wordmark and a Menu button, one row. */
  .head-menu { display: none; position: relative; }
  .head-menu summary {
    list-style: none; display: inline-flex; align-items: center; gap: .45rem;
    min-height: 44px; padding: 0 .9rem; cursor: pointer;
    font: 600 .92rem/1 var(--sans); color: var(--ink);
    background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  }
  .head-menu summary::-webkit-details-marker { display: none; }
  .head-menu summary svg { width: 18px; height: 18px; flex: none; }
  .head-menu[open] summary { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
  .head-menu summary:focus-visible { outline: 2px solid var(--gold-ui); outline-offset: 2px; }
  .head-menu-panel {
    position: absolute; right: 0; top: calc(100% + .5rem); z-index: 30;
    width: min(20rem, calc(100vw - 2.5rem)); padding: .5rem;
    display: grid; gap: .15rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
    box-shadow: 0 16px 40px rgb(0 0 0 / .14);
  }
  .head-menu-panel a {
    display: flex; align-items: center; min-height: 48px; padding: 0 .85rem;
    border-radius: 8px; font: 500 1rem/1.2 var(--sans); color: var(--ink); text-decoration: none;
  }
  .head-menu-panel a:hover, .head-menu-panel a[aria-current="page"] { background: var(--accent-soft); }
  .head-menu-panel .nav-demo { justify-content: center; margin-top: .35rem; }
  /* The demo call to action beside Menu while the nav is folded away: the
     one thing a phone visitor from an email should be able to press. */
  .head-actions { display: none; align-items: center; gap: .5rem; }
  .head-actions .head-demo {
    display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
    padding: 0 .85rem; font: 600 .92rem/1 var(--sans); white-space: nowrap; text-decoration: none;
  }
  @media (max-width: 60rem) {
    .head-nav { display: none; }
    .head-actions { display: flex; }
    .head-menu { display: block; }
  }
  @media (max-width: 30rem) {
    .chrome { padding-inline: 1.1rem; }
    .site-head { min-height: 4rem; gap: .75rem; }
    .head-actions { gap: .4rem; }
    .head-actions .head-demo { padding: 0 .7rem; font-size: .88rem; }
    .head-menu summary { padding: 0 .7rem; }
    .mark .mark-region { display: none; }
  }

  .site-foot {
    border-top: 1px solid var(--border);
    margin-top: 4rem; padding-block: 1.5rem 3rem;
    color: var(--ink-faint); font: 400 .85rem/1.7 var(--sans);
  }
  .site-foot nav { display: flex; flex-wrap: wrap; gap: 0 1.25rem; margin-bottom: .75rem; }
  /* 44px rows: on a phone these are the page's last set of targets. */
  .site-foot nav a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; color: var(--ink-soft); }
  .site-foot nav a[aria-current="page"] { color: var(--ink); }
  .footer-tools { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; }

  /* ---------- the theme switch ----------------------------------------
     Two labelled buttons rather than one icon that flips meaning: the
     visitor who wants a light page on a dark laptop has to be able to see
     what the control currently is, not deduce it. It lives in the footer on
     every page. */
  .mode-pick { display: inline-flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
  .mode-pick .mode-pick-label {
    font: 600 .72rem/1 var(--sans); text-transform: uppercase; letter-spacing: .09em;
    color: var(--ink-faint); margin-inline-end: .15rem;
  }
  .mode-pick button {
    min-height: 44px; padding: .42rem .9rem; cursor: pointer;
    font: 600 .8rem/1 var(--sans); color: var(--ink-soft);
    background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
    transition: border-color .15s ease, color .15s ease;
  }
  .mode-pick button:hover { border-color: var(--accent); color: var(--ink); }
  .mode-pick button[aria-pressed="true"] { border-color: var(--accent); color: var(--ink); box-shadow: inset 0 0 0 1px var(--accent); }
  .mode-pick button:focus-visible { outline: 2px solid var(--gold-ui); outline-offset: 2px; }

  /* ---------- hero ------------------------------------------------------ */
  /* Copy and the commissioned portrait share the first row; the readable
     Operations capture stays below them. Reserve 4:5 before the image loads. */
  .hero { padding: 2.75rem 0 0; }
  @media (min-width: 62rem) { .hero { padding-top: 3.5rem; } }
  .hero-copy { max-width: 48rem; }
  h1 {
    font-size: clamp(1.95rem, 3.1vw, 2.6rem);
    line-height: 1.13;
    letter-spacing: -0.03em;
    font-weight: 600;
    margin: 0;
    text-wrap: balance;
  }
  .lede {
    font-size: 1.12rem;
    line-height: 1.6;
    color: var(--ink-soft);
    margin: 1.15rem 0 0;
    max-width: var(--measure);
  }
  .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin: 1.75rem 0 0; }

  /* One shape system on this page: 8px on controls, 10px on panels, 12px on
     the sketch frame. Nothing is a pill and nothing is square. */
  .btn {
    display: inline-flex; align-items: center; gap: .5rem;
    min-block-size: 44px; padding: .72rem 1.15rem; border-radius: 8px;
    font: 600 .95rem/1.2 var(--sans); white-space: nowrap;
    text-decoration: none; border: 1px solid transparent; cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .12s ease;
  }
  .btn:active { transform: translateY(1px); }
  .btn-primary { background: var(--accent); color: var(--on-accent); }
  .btn-primary:hover { border-color: var(--gold-ui); }
  .btn-ghost { background: var(--surface); border-color: var(--border); color: var(--ink); }
  .btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
  .btn svg { width: 16px; height: 16px; flex: none; }

  /* ---------- sections -------------------------------------------------- */
  section { padding: 4.5rem 0 0; }
  h2 {
    font-size: clamp(1.4rem, 2.2vw, 1.75rem);
    line-height: 1.2;
    letter-spacing: -0.025em;
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 1.25rem;
    max-width: 22ch;
    /* Two even lines, not a long line and a stranded last word ("... your / bank"). */
    text-wrap: balance;
  }
  /* The small uppercase label. Two on the page, by count, because a page where
     every section wears one has no hierarchy left to spend — which is exactly
     what this page was before: seven identical 13px grey labels doing the job
     of seven headings. */
  .eyebrow {
    font: 600 .75rem/1 var(--sans);
    text-transform: uppercase; letter-spacing: .1em;
    color: var(--gold); margin: 0 0 .9rem;
  }
  p { max-width: var(--measure); }

  /* ---- metric strip: one bordered row divided by hairlines, no cards ---- */
  .metrics {
    display: grid; grid-template-columns: repeat(3, 1fr);
    border: 1px solid var(--border); border-radius: 10px;
    background: var(--surface); overflow: hidden;
  }
  .metric { padding: 1.4rem 1.5rem; border-inline-end: 1px solid var(--border); }
  .metric:last-child { border-inline-end: 0; }
  .metric b {
    display: block; font: 600 clamp(1.9rem, 4vw, 2.4rem)/1 var(--num); letter-spacing: -0.03em;
    color: var(--gold); margin-bottom: .45rem;
  }
  .metric span {
    display: block; font: 600 .72rem/1.3 var(--sans);
    text-transform: uppercase; letter-spacing: .07em; color: var(--ink-faint); margin-bottom: .55rem;
  }
  .metric p { margin: 0; font-size: .89rem; line-height: 1.55; color: var(--ink-soft); max-width: none; }
  @media (max-width: 46rem) {
    .metrics { grid-template-columns: 1fr; }
    .metric { border-inline-end: 0; border-block-end: 1px solid var(--border); }
    .metric:last-child { border-block-end: 0; }
  }
  .who {
    margin: 1.25rem 0 0;
    color: var(--ink-faint);
    font: 400 .92rem/1.6 var(--sans);
    max-width: var(--measure);
  }

  /* ---- icon token, shared by the worry rows and the "what it does" grid -- */
  .ico {
    flex: none; width: 34px; height: 34px; border-radius: 8px;
    background: var(--accent-soft); color: var(--accent);
    display: flex; align-items: center; justify-content: center;
  }
  .ico svg { width: 18px; height: 18px; }

  /* ---- the three worries: headline column beside a divided stack --------
     A different layout family from both the metric strip above it and the
     feature grid below it, and the one place on the page that is deliberately
     lopsided. Three equal columns of icon-heading-paragraph is the shape every
     landing page uses for exactly this content; the page already spends a
     three-up on the metrics, and spending it twice is what makes a page read
     as a template. */
  .split { display: grid; gap: 1.75rem; }
  @media (min-width: 58rem) {
    .split { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 3rem; align-items: start; }
    .split h2 { margin-bottom: 0; }
  }
  .fears { display: grid; gap: 0; border-top: 1px solid var(--border); }
  .fear { display: flex; gap: 1.1rem; align-items: flex-start; padding: 1.4rem 0; border-bottom: 1px solid var(--border); }
  .fear h3 { font-size: 1rem; font-weight: 600; margin: 0 0 .3rem; letter-spacing: -0.01em; }
  .fear > div { max-width: var(--measure); }
  .fear p { font-size: .96rem; color: var(--ink-soft); margin: 0; max-width: none; }

  figcaption {
    margin: .85rem .25rem 0; font: 400 .87rem/1.6 var(--sans);
    color: var(--ink-faint); max-width: var(--measure);
  }

  /* ---- what it does: a two-column grid, six items, six cells ------------ */
  .does { display: grid; gap: 0 2.5rem; border-top: 1px solid var(--border); }
  @media (min-width: 52rem) { .does { grid-template-columns: 1fr 1fr; } }
  .does-item {
    display: flex; gap: 1.1rem; align-items: flex-start;
    padding: 1.5rem 0; border-bottom: 1px solid var(--border);
  }
  .does-item h3 { font: 600 .98rem/1.5 var(--sans); letter-spacing: -0.01em; margin: 0 0 .3rem; }
  .does-item p { margin: 0; color: var(--ink-soft); font-size: .95rem; max-width: none; }

  .plain {
    max-width: 52rem;
    background: var(--accent-soft);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 2rem;
  }
  .plain h2 { margin-bottom: 1.25rem; }
  .plain ul { margin: 0; padding-left: 1.1rem; }
  .plain li { margin: 0 0 .8rem; color: var(--ink-soft); font-size: .99rem; max-width: var(--measure); }
  .plain li:last-child { margin-bottom: 0; }
  .plain strong { color: var(--ink); font-weight: 600; }

  /* What stays with the agency and its bank: three plain statements read from
     the capability source, no icons and no cards. */
  .trust-band { margin-top: 3rem; padding: 2rem 0; border-block: 1px solid var(--border); }
  .trust-band h2 { margin-bottom: 1.5rem; font-size: 1.3rem; }
  .trust-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
  .trust-list li { margin: 0; }
  .trust-list strong { display: block; margin-bottom: .35rem; font: 600 1rem/1.4 var(--sans); color: var(--ink); }
  .trust-list p { margin: 0; font-size: .95rem; color: var(--ink-soft); }
  .trust-close { margin: 1.5rem 0 0; font-weight: 600; color: var(--ink); max-width: none; }
  @media (min-width: 46rem) { .trust-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; } }

  .cta { padding: 4.5rem 0 4rem; }
  .cta p { font-size: 1.08rem; color: var(--ink-soft); }
  .cta .btn { margin-top: 1.5rem; }
  a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
  a:hover { text-decoration-thickness: 2px; }
  /* The bare address, kept beside the button for anyone who would rather copy
     it than have a mail client opened for them. A 17px-tall target before this
     padding: `/1` line-height on a link with nothing around it. */
  .mailto {
    display: inline-flex; align-items: center; min-height: 44px; min-width: 44px;
    font: 500 .95rem/1.5 var(--sans); color: var(--ink-soft);
  }
  /* Standalone public-site controls at desktop and phone widths. Links that
     sit within a sentence keep their prose line box (WCAG 2.5.8 exception). */
  .questions summary, .doc .back, .doc .doc-contents a {
    display: inline-flex; align-items: center; min-height: 44px; min-width: 44px;
  }
  .questions summary { display: flex; }
  @media (max-width: 639px) {
    a, button, summary { min-block-size: 44px; min-inline-size: 44px; }
    a:not(.mark):not(.btn) { padding-block: .75rem; }
    .site-foot nav a, .head-menu-panel a { display: flex; padding-block: 0; }
    .questions summary { display: flex; align-items: center; }
  }


  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; }
  }


  @font-face { font-family: "Geist Site"; src: url("/fonts/geist.woff2") format("woff2"); font-weight: 100 900; font-display: swap; font-style: normal; }




  .section-intro { color: var(--ink-soft); margin: 0; font-size: 1rem; }
  .questions details { border-bottom: 1px solid var(--border); padding: 1rem 0; }
  .questions details:first-child { padding-top: 0; }
  .questions summary { color: var(--ink); font-weight: 600; cursor: pointer; line-height: 1.5; padding: .25rem 0; }
  .questions p { font-size: .96rem; color: var(--ink-soft); margin: .75rem 0 0; }
  .questions summary:focus-visible { outline: 2px solid var(--gold-ui); outline-offset: 4px; }
  .cta .hero-actions .btn { margin-top: 0; }
  /* Sales-page composition. Shared reading-page styles above stay intact. */
  .sales-page .shell { max-width: 80rem; }
  /* A full sentence, not a slogan, so it gets a sentence's measure: at the old
     15ch the new eleven-word line broke into five. */
  .sales-page .hero h1 { font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.1; letter-spacing: -.035em; max-width: 26ch; }
  .sales-page .eyebrow { font-size: .8125rem; line-height: 1.5; }
  .sales-page .lede { font-size: 1.15rem; max-width: 46ch; }
  .sales-page .demo-note { font-size: .9375rem; color: var(--ink-soft); margin: 1rem 0 0; }
  /* The one secondary action is text weight, not a second button: two
     full-weight buttons plus the header's two links was four choices above
     the fold (site audit, 29 Sep). */
  .hero-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
  /* Two classes: .shot below resets figure margins and would otherwise win. */
  .shot.hero-shot { margin: 2.5rem 0 0; max-width: 68.125rem; }
  /* The living mark at about 90px here, not 160: the header already carries
     the wordmark, and the 70px this frees is the product's first queue row
     coming into the first screen. brand.mjs sizes it as 23.5% of this box. */
  .hero-copy .hero-mark { max-width: 20rem; }

  /* ---------- product screenshots, cropped in CSS -------------------------
     Each figure shows one region of a committed capture (desktop 1440x900,
     phone 390x844 at 2x), named in the capture's own CSS pixels: --x/--y is
     the region's corner, --w/--h its size, --iw the capture's width. Cropping
     here rather than in new files keeps the page on the captures the build
     already copies and tests/site-screens.test.ts already checks, in both
     themes, and lets a phone take a narrower region than a desktop. Every crop
     draws at or near 1:1, so the product's own text stays readable. */
  .shot { margin: 0; min-width: 0; }
  .shot-frame {
    position: relative; overflow: hidden; aspect-ratio: var(--w) / var(--h);
    border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
  }
  .shot-frame img {
    position: absolute; max-width: none; height: auto;
    width: calc(var(--iw, 1440) / var(--w) * 100%);
    left: calc(var(--x) / var(--w) * -100%);
    top: calc(var(--y) / var(--h) * -100%);
  }
  .shot-frame .shot-dark { display: none; }
  :root[data-theme="dark"] .shot-frame .shot-light { display: none; }
  :root[data-theme="dark"] .shot-frame .shot-dark { display: block; }
  .shot figcaption { margin: .7rem 0 0; font-size: .875rem; max-width: none; }
  /* Each crop ends on a row's own rule, never through a row or a button:
     the queue after the PSRA licence item (the bank-review item below it is
     cut by the capture's edge), the statement after its "Total rent received"
     line, and the RTB draft after its Record and Discard buttons. The queue
     starts below the stats strip's help icon. Row coordinates are recorded in
     site/screens/capture-manifest.json (9 Oct 2026); re-measure after a recapture. */
  .shot-queue { --x: 318; --y: 147; --w: 1090; --h: 679.53125; }
  .shot-statement { --x: 356; --y: 62; --w: 728; --h: 515.25; }
  .shot-rtb { --x: 262; --y: 62; --w: 916; --h: 730; }
  /* Stops above the PSRA licence item at the foot of the capture: that is
     agency law, and this figure illustrates the landlord section. */
  .shot-phone { --iw: 390; --x: 0; --y: 0; --w: 390; --h: 437.5625; width: 100%; max-width: 16rem; }
  .shot-phone .shot-frame { border-radius: 1.25rem; }
  @media (max-width: 46rem) {
    /* At 358px a whole desktop crop draws near 0.35x. Each narrows to the
       part that still reads at close to 1:1. */
    /* The tablet region begins above Needs attention, omitting the wide
       stats/filter strip, and ends on the registration-due-soon row's rule.
       Its right edge stops before the row actions, never through a button. */
    .shot-queue { --x: 334; --y: 450; --w: 466; --h: 301.140625; }
    .shot.hero-shot { max-width: 32rem; margin-inline: auto; }
    /* At this width the amounts column cannot fit near 1:1, so the phone
       shows the statement head through the column-header rule at y=309:
       number, issue date, client and period. */
    .shot-statement { --w: 364; --h: 247; }
    .shot-rtb { --x: 301; --y: 200; --w: 430; --h: 358.25; }
  }

  /* ---------- three sections: a heading, two sentences, one screenshot ----
     One layout for all three, copy beside image, so the page reads as one
     list and not as three designs. Then the page stops. */
  .feature { display: grid; gap: 1.5rem; padding-top: 5rem; }
  @media (min-width: 60rem) {
    .feature { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 3.5rem; align-items: start; }
    .feature .shot-phone { justify-self: center; }
  }
  .feature h2 { margin-bottom: .9rem; }
  .feature p { color: var(--ink-soft); margin: 0; }
  .feature-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: .75rem; font-weight: 600; }
  .feature .shot-phone { margin-inline: auto; }
  @media (min-width: 60rem) { .feature .shot-phone { margin-inline: 0; } }
  /* Section loops. The clip is rendered 1920x1080 and fills its slot; the
     rounding and border live here rather than being burned into the video, so
     no render resolution is spent on chrome CSS can draw for free. */
  /* Below 60rem the illustration carries the slot and the clip is not shown:
     a 1920-wide recording at 300px is 0.2x, where a 14px table row lands near
     6px and says nothing. Above it, the recording replaces the illustration.
     display:none also keeps the phone from autoplaying a file it cannot read;
     the player script skips anything with no offsetParent for the same reason. */
  /* Desktop is the BASE and the phone is the override, not the other way round.
     With `display:none` as the base rule, an autoplaying player is not being
     rendered at the moment the browser decides whether to autoplay it, and the
     decision is not revisited when a media query later reveals it — every clip
     stayed on its poster at full width. Inverted, the player is displayed from
     the first layout and autoplay fires normally. */
  .loop-figure { display: block; margin: 1.6rem 0 0; }
  .loop-fallback { display: none; }
  @media (max-width: 59.99rem) {
    .loop-figure { display: none; }
    .loop-fallback { display: block; }
  }
  .product-stage .loop-figure { margin: 0; }
  .loop-video { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--border); background: var(--accent-soft); }
  .loop-figure figcaption { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; margin-top: .7rem; font-size: .8125rem; line-height: 1.45; color: var(--ink-faint); }
  .loop-toggle { flex: none; font: inherit; color: var(--accent); background: none; border: 1px solid var(--border); border-radius: 999px; padding: .15rem .7rem; cursor: pointer; }
  .loop-toggle:hover { border-color: var(--accent); }
  /* A .split whose first column carries a clip. The default .split is
     .8fr/1.2fr, which measured 448px for that column at 1440 — 0.60x of the
     recorded UI, too small to read a table row — while the text above it ran
     out 338px before the list beside it, leaving a void. Putting the clip in
     that column fills the void, and widening the column lands it near 0.84x.
     Measured, not guessed: the clip's legibility is its displayed width over
     its crop width, and 745px crops need ~625px on the page. */
  @media (min-width: 60rem) {
    .split.split-media { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); }
  }
  .sales-page .cta { margin-top: 4.5rem; padding: 2.5rem; border: 1px solid var(--border); border-radius: 12px; background: var(--accent-soft); }
  .sales-page .cta h2 { max-width: 26ch; font-size: clamp(1.8rem, 3vw, 2.6rem); }
  .sales-page .cta p { max-width: 54ch; }
  .sales-page .skip-link { position: absolute; top: -6rem; left: 1rem; background: var(--surface); color: var(--ink); padding: .75rem 1rem; z-index: 2; }
  .sales-page .skip-link:focus { top: 1rem; }
  .sales-page :is(a, button, summary):focus-visible { outline: 2px solid var(--gold-ui); outline-offset: 4px; }
  /* The chapter media regions. Every region reserves its 16:9 box before any
     source is fetched, so pressing play cannot move the page around it. The
     button is the only way in and the source is attached on that press; with
     JavaScript blocked no button is rendered at all, and the poster, the
     chapter text and the noscript link still carry the point the chapter
     makes. The button is the page's existing accent pairing, so it keeps the
     contrast tests/site-contrast.test.ts already measures. */
  .sales-page .media-grid { display: grid; gap: 1.5rem; margin-top: 1.75rem; }
  .sales-page .media-region { margin: 0; }
  .sales-page .media-frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
  .sales-page .media-video { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--surface); }
  .sales-page .media-region:not([data-media-ready]) .media-play { display: none; }
  .sales-page .media-play { position: absolute; inset: auto auto 1rem 1rem; display: inline-flex; align-items: center; min-height: 44px; padding: .6rem 1.25rem; border: 0; border-radius: 999px; font: inherit; font-weight: 600; cursor: pointer; background: var(--accent); color: var(--on-accent); }
  .sales-page .media-region h3 { margin: .9rem 0 .3rem; font-size: 1.05rem; }
  .sales-page .media-region p { margin: .35rem 0 0; font-size: .96rem; color: var(--ink-soft); }
  /* One class more than the rule above, which otherwise wins the cascade:
     measured, the placeholder note was rendering at .media-region p's .96rem
     and --ink-soft, so the note's own softer treatment never applied. */
  .sales-page .media-region .media-note { color: var(--ink-faint); font-size: .92rem; }
  .sales-page .media-noscript { margin-top: .5rem; font-size: .95rem; color: var(--ink-soft); }
  @media (min-width: 52rem) { .sales-page .media-grid { grid-template-columns: 1fr 1fr; } }
  body.sales-page { background: var(--bg); }
  .sales-page .hero .eyebrow { color: var(--gold); }
  .sales-page .mark .mark-region { color: var(--ink-soft); }
  @media (max-width: 46rem) {
    .sales-page .shell { padding: 0 1.1rem; }
    .sales-page .cta { padding: 1.5rem; }
  }
  @media (max-width: 639px) {
    /* The compare table becomes a stack of rows. Give its caption the full
       table width before the rows, rather than a narrow table-caption slot. */
    .doc .comparison-page .capabilities caption { display: block; box-sizing: border-box; width: 100%; }
    .sales-page section { padding-top: 0; }
    /* One class more than the rule above: the three sections still need air
       between them on a phone, and /overview's sections still do not. */
    .sales-page section.feature, .sales-page section.feature + section { padding-top: 3rem; }
    .sales-page .cta { margin-top: 2rem; }
  }
  @media (forced-colors: active) {
    body.sales-page { background: Canvas; }
  }
  /* The demo panel, 2 Oct audit. At 1440 the form sat in the left 46rem of an
     80rem panel and left the right half empty; side by side, the reason to
     ask and the asking share one row, and the submit button rises ~250px. */
  @media (min-width: 62rem) {
    .sales-page .cta { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 0 3.5rem; align-items: start; }
    .sales-page .cta .lb-form { margin-top: .35rem; }
    .sales-page .cta .lb-form-alt { grid-column: 2; }
  }
  .sales-page .cta-intro h2 { margin-bottom: .9rem; }
  .sales-page .cta-intro p { margin: 0; }
  .sales-page .cta .cta-points { margin-top: 1rem; font-size: .95rem; color: var(--ink-faint); }

  /* Irish accents: one text gold, one non-text gold, no new motion. */
  :root :is(a, button, summary, input, select, textarea, [tabindex]):focus-visible,
  :root .lb-field :is(input, select, textarea):focus-visible {
    outline: 2px solid var(--gold-ui); outline-offset: 4px;
  }
  .head-nav a:not(.nav-demo), .head-menu-panel a:not(.nav-demo), .site-foot nav a { color: var(--accent); }
  .head-menu-panel a[aria-current="page"], .site-foot nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--gold-ui); }
  h2 { position: relative; }
  h2::after { content: ""; position: absolute; left: 0; bottom: -.4rem; width: 3rem; height: 1px; background: var(--gold-ui); }
  .site-icon { display: inline-block; flex: none; width: 24px; height: 24px; color: var(--accent); vertical-align: -.25em; margin-inline-end: .5rem; }
  .site-icon__detail { color: var(--gold-ui); stroke: currentColor; }
  .ico .site-icon { width: 22px; height: 22px; margin: 0; }
  /* One surface for every section, and one arch on the page (the hero's).
     Tints used to alternate by position and each section carried its own
     arch, which read as decoration rather than structure. */
  .feature, .product-section { position: relative; isolation: isolate; }
  .product-section::before { content: ""; position: absolute; inset: .5rem -.5rem; z-index: -1; background: var(--accent-soft); border-radius: 10px; }
  .product-refusals::before { display: none; }
  /* The fanlight arc sits ON the hairline between two product panels, centred
     in the gap, like a fanlight over a door. It used to straddle each panel's
     top-left corner, where it read as a rendering fault (site audit, 7 Oct). */
  .fanlight-divider { position: absolute; top: .5rem; left: 0; color: var(--gold-ui); pointer-events: none; }
  .product-section + .product-section { margin-top: 2rem; }
  .product-section > .fanlight-divider { display: none; }
  .hero-top { display: grid; gap: 2rem; align-items: start; }
  .hero-media { width: 100%; max-width: 22rem; aspect-ratio: 4 / 5; justify-self: center; }
  @media (min-width: 62rem) {
    /* The door is centred against the copy, not pinned to its top with an
       empty column below it. */
    .hero-top { grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); gap: 3rem; align-items: center; }
  }
  .sales-page .cta { background: var(--gold-soft); }
  :root .lb-form-done .lb-reference, .stat-number, .key-figure { color: var(--gold); }

  /* ---------- 7 Oct 2026 polish (site audit) -----------------------------
     Three features on one stage, alternating sides, instead of three tinted
     panels in two colours. The capture sits on a soft emerald stage with a
     shadow tinted to the page's own green; the copy sits on the page. */
  p { text-wrap: pretty; }
  .sales-page .feature { padding-top: 6rem; }
  .sales-page .feature .shot {
    padding: clamp(.85rem, 2.4vw, 1.75rem); border-radius: 14px; background: var(--accent-soft);
  }
  .sales-page .feature .shot figcaption { margin-top: .85rem; }
  .sales-page .shot-frame { box-shadow: 0 1px 2px rgb(18 32 27 / .06), 0 22px 44px -26px rgb(18 92 67 / .45); }
  :root[data-theme="dark"] .sales-page .shot-frame { box-shadow: 0 1px 2px rgb(0 0 0 / .3), 0 22px 44px -26px rgb(0 0 0 / .8); }
  @media (min-width: 60rem) {
    .sales-page .feature { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 4rem; align-items: center; }
    .sales-page .feature#landlords { grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); }
    .sales-page .feature#landlords > div { order: 2; }
  }
  /* The phone capture keeps its 16rem phone, centred on a full-width stage. */
  .sales-page #landlords .shot-phone { max-width: none; width: 100%; }
  .sales-page #landlords .shot-phone .shot-frame { max-width: 16rem; margin-inline: auto; }
  .sales-page #landlords .shot-phone figcaption { text-align: center; max-width: none; }

  .sales-page .about { padding-top: 6rem; }

  /* Phones. The hero shows the product's own phone layout rather than a
     cropped desktop (the <picture> swaps the capture at this same width), the
     door and the living mark take a third of the room they did, and the
     landlords figure -- the same phone queue -- is not shown twice. */
  @media (max-width: 40rem) {
    .hero-copy .hero-mark { max-width: 14rem; margin-bottom: 1.1rem; }
    .hero-media { max-width: 13rem; }
    .shot-queue { --iw: 390; --x: 0; --y: 0; --w: 390; --h: 437.5625; }
    .shot.hero-shot { max-width: 22rem; margin-inline: auto; }
    .shot.hero-shot .shot-frame { border-radius: 1.25rem; }
    .sales-page #landlords .shot { display: none; }
    .sales-page .feature, .sales-page .about { padding-top: 3.5rem; }
  }
  @media (forced-colors: active) {
    .site-icon, .site-icon__detail, .fanlight-divider { color: CanvasText; }
    h2::after { background: CanvasText; }
    :root :is(a, button, summary, input, select, textarea, [tabindex]):focus-visible { outline-color: Highlight; }
  }

  /* =====================================================================
     Premium layer (owner, 15 Oct 2026: "look like a $5 million website").
     Design direction, rules and the reasons behind them:
     docs/design/site-2026-10/DESIGN.md. Site-wide pieces first (type,
     header, buttons), then the home page, scoped under body.home.
     ===================================================================== */
  @font-face { font-family: "Fraunces Display"; src: url("/fonts/fraunces-display.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
  @font-face { font-family: "Fraunces Display"; src: url("/fonts/fraunces-display-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }

  /* ---- Site-wide type: the wordmark's face for headings, Geist for reading */
  h1, h2 {
    font-family: var(--serif); font-optical-sizing: auto;
    font-weight: 430; letter-spacing: -0.018em;
  }
  h2::after { display: none; }
  .doc h2 { font-family: var(--sans); font-weight: 600; letter-spacing: -0.01em; }

  /* ---- Header: quiet, sticky, frosted ------------------------------- */
  html { scroll-padding-top: 5.5rem; }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .site-head { background: var(--bg) !important; } }
  .site-head {
    position: sticky; top: 0; z-index: 40;
    min-height: 4.25rem;
    border-bottom: 1px solid var(--hair);
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px);
  }
  .site-head.chrome { max-width: none; padding-inline: max(1.5rem, calc((100vw - 80rem) / 2 + 1.5rem)); }
  .head-nav { gap: 1.6rem; }
  .head-nav a:not(.nav-demo) { color: var(--ink-soft); font-weight: 500; }
  .head-nav a:not(.nav-demo):hover { color: var(--ink); }
  .nav-demo, .btn-primary {
    background: var(--accent); color: var(--on-accent);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .14), 0 1px 2px rgb(10 30 22 / .22), 0 6px 16px -8px rgb(10 50 36 / .55);
  }
  .head-nav .nav-demo { padding: .7rem 1.05rem; border-radius: 10px; }
  .btn { border-radius: 10px; }
  .btn-lg { min-block-size: 52px; padding: .9rem 1.4rem; font-size: 1rem; }
  .btn-primary:hover { transform: translateY(-1px); border-color: transparent; box-shadow: inset 0 1px 0 rgb(255 255 255 / .16), 0 2px 4px rgb(10 30 22 / .22), 0 12px 24px -10px rgb(10 50 36 / .6); }
  .btn-primary svg { transition: transform .2s ease; }
  .btn-primary:hover svg { transform: translateX(3px); }

  /* ---- Footer: brand on the left, the links in columns ------------- */
  .site-foot { margin-top: 0; border-top: 1px solid var(--hair); padding-block: 3.5rem 2rem; }
  .foot-top { display: grid; gap: 1.5rem 3rem; margin-bottom: 2rem; }
  @media (min-width: 52rem) { .foot-top { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } }
  .foot-word { display: inline-flex; align-items: center; min-height: 44px; font: 450 1.6rem/1 var(--serif); letter-spacing: -0.02em; color: var(--ink); text-decoration: none; }
  .foot-brand p { margin: .5rem 0 0; max-width: 30ch; color: var(--ink-soft); font-size: .95rem; line-height: 1.6; }
  .site-foot .foot-top nav { display: block; columns: 2; column-gap: 2rem; margin: 0; }
  @media (min-width: 40rem) { .site-foot .foot-top nav { columns: 3; } }
  .site-foot .foot-top nav a { display: flex; align-items: center; min-height: 44px; break-inside: avoid; color: var(--ink-soft); text-decoration: none; font-size: .94rem; }
  .site-foot .foot-top nav a:hover { color: var(--ink); text-decoration: underline; }
  .footer-tools { border-top: 1px solid var(--hair); padding-top: 1.25rem; }

  /* =====================================================================
     Home
     ===================================================================== */
  body.home { background: var(--bg); }
  .home main { display: block; }
  .h-wrap { width: 100%; max-width: 80rem; margin-inline: auto; padding-inline: 1.5rem; }
  .home section { padding: 0; }
  .home p { max-width: none; }
  .home .eyebrow { color: var(--gold); font: 600 .78rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; margin: 0 0 1.1rem; }

  /* Hero */
  .home .h-hero { padding-block: clamp(2.25rem, 5.5vw, 5rem) clamp(2.5rem, 5vw, 4.5rem); position: relative; isolation: isolate; overflow: clip; }
  .h-hero::before {
    content: ""; position: absolute; inset: -20% -10% auto auto; width: 70vw; height: 70vw; z-index: -1;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--gold-soft) 90%, transparent), transparent 70%);
    pointer-events: none;
  }
  .h-hero-grid { display: grid; gap: 2.75rem; align-items: center; }
  @media (min-width: 62rem) { .h-hero-grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(3rem, 5vw, 5.5rem); } }
  .h-badge {
    display: inline-flex; align-items: center; gap: .6rem;
    padding: .5rem .85rem .5rem .6rem; border: 1px solid var(--hair); border-radius: 999px;
    background: var(--surface); letter-spacing: .12em; font-size: .72rem;
    box-shadow: 0 1px 2px rgb(16 24 20 / .05);
  }
  .h-badge-dot { width: .55rem; height: .55rem; border-radius: 50%; background: #ff883e; box-shadow: 0 0 0 4px rgb(255 136 62 / .22); }
  .home .h-hero h1 {
    font-size: clamp(2.5rem, 4.9vw, 4.5rem); line-height: 1.03; letter-spacing: -0.026em;
    font-weight: 400; max-width: 17ch; margin: 0; text-wrap: balance;
  }
  .home .h-hero h1 em { font-style: italic; font-weight: 380; color: var(--accent); }
  .home .h-hero .lede { font-size: clamp(1.08rem, 1.35vw, 1.24rem); line-height: 1.6; color: var(--ink-soft); max-width: 40ch; margin: 1.6rem 0 0; }
  .home .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.4rem; margin-top: 2.1rem; }
  .home .hero-link { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; color: var(--ink); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--hair); }
  .home .hero-link::after { content: "→"; transition: transform .2s ease; }
  .home .hero-link:hover { border-bottom-color: var(--ink); }
  .home .hero-link:hover::after { transform: translateX(3px); }
  .home .hero-actions .hero-link { padding-block: 0; }
  .home .demo-note { display: inline-flex; align-items: center; gap: .5rem; margin: 1.25rem 0 0; color: var(--ink-faint); font-size: .92rem; }
  .home .demo-note svg { width: 16px; height: 16px; flex: none; }

  .h-hero-photo { position: relative; margin: 0; }
  .h-photo {
    position: relative; overflow: hidden; border-radius: var(--radius-xl);
    aspect-ratio: 4 / 5; background: var(--stage);
    box-shadow: var(--shadow-lg);
  }
  .h-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .h-photo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08); pointer-events: none; }
  @media (min-width: 62rem) { .h-hero-photo .h-photo { max-height: 42rem; margin-inline-start: auto; } }

  /* Floating product cards: the product's own note, laid on the scene */
  .h-float {
    position: absolute; display: grid; gap: .2rem; width: min(19rem, 82%);
    padding: .95rem 1.05rem 1rem; border-radius: 16px;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
    border: 1px solid var(--hair); box-shadow: var(--shadow-lg);
    color: var(--ink); font-size: .86rem; line-height: 1.4;
  }
  .h-float strong { font-weight: 600; font-size: .95rem; letter-spacing: -0.005em; }
  .h-float-kicker { display: inline-flex; align-items: center; gap: .45rem; color: var(--ink-faint); font: 600 .68rem/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
  .h-float-kicker svg { width: 14px; height: 14px; color: var(--accent); }
  .h-float-meta { color: var(--ink-soft); font-size: .82rem; }
  .h-float-action { justify-self: start; margin-top: .45rem; padding: .35rem .65rem; border-radius: 8px; background: var(--accent-soft); color: var(--accent); font-weight: 600; font-size: .78rem; }
  .h-float-hero { left: -1.75rem; bottom: 2rem; }
  @media (max-width: 61.99rem) { .h-float-hero { left: 1rem; bottom: 1rem; } }
  .h-dot { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; flex: none; }
  .h-dot-now { background: #c84a35; }
  .h-dot-due { background: #d39b3a; }

  /* The stage: the product window on a lit green plinth */
  .home .h-stage-section { padding-block: 0; }
  .h-stage {
    position: relative; margin: 0; isolation: isolate;
    padding: clamp(1rem, 4vw, 3.5rem) clamp(.75rem, 4vw, 3.5rem) 0;
    border-radius: var(--radius-xl); overflow: hidden;
    background:
      radial-gradient(60% 80% at 50% 0%, color-mix(in srgb, var(--fanlight) 26%, transparent), transparent 60%),
      radial-gradient(80% 60% at 0% 100%, rgb(255 255 255 / .06), transparent 60%),
      linear-gradient(180deg, var(--stage) 0%, var(--stage-deep) 100%);
    color: var(--on-stage);
  }
  .h-stage::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .55; background-image: var(--grain); mix-blend-mode: overlay; pointer-events: none; }
  .h-stage figcaption { margin: 0; padding: 1.1rem 1rem 1.6rem; text-align: center; color: var(--on-stage); font-size: .9rem; max-width: none; opacity: .82; }
  .h-window {
    position: relative; border-radius: 14px 14px 0 0; overflow: hidden;
    background: var(--surface); color: var(--ink);
    box-shadow: 0 0 0 1px rgb(0 0 0 / .14), 0 40px 80px -30px rgb(0 0 0 / .55), 0 10px 30px -10px rgb(0 0 0 / .3);
    max-height: 36rem;
    -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent);
            mask-image: linear-gradient(180deg, #000 80%, transparent);
  }
  .h-window-bar { display: flex; align-items: center; gap: .4rem; height: 2.4rem; padding-inline: 1rem; border-bottom: 1px solid var(--border); background: var(--bg); }
  .h-window-bar span { width: .62rem; height: .62rem; border-radius: 50%; background: currentColor; color: var(--ink-faint); opacity: .4; }
  .h-window-bar b { margin-inline: auto; padding: .2rem 2.5rem; border-radius: 6px; background: var(--surface); border: 1px solid var(--border); color: var(--ink-faint); font: 500 .72rem/1.3 var(--sans); transform: translateX(-1rem); }

  .h-app { display: grid; grid-template-columns: 13.5rem minmax(0, 1fr); font-size: .82rem; line-height: 1.4; }
  .h-app-side { border-right: 1px solid var(--border); background: var(--bg); padding: 1rem .7rem; min-height: 36rem; }
  .h-app-brand { display: flex; align-items: center; gap: .55rem; font: 500 1.02rem/1 var(--serif); letter-spacing: -0.01em; padding: .2rem .3rem .9rem; }
  .h-app-tile { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: .38rem; background: #169b62; }
  .h-app-tile svg { width: 1.15rem; height: 1.15rem; }
  .h-app-org { display: flex; gap: .55rem; align-items: center; padding: .55rem .3rem .9rem; }
  .h-app-org b { display: block; font-weight: 600; font-size: .8rem; }
  .h-app-org small { color: var(--ink-faint); font-size: .72rem; }
  .h-app-av { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 6px; background: var(--paper-2); color: var(--ink-soft); font-weight: 700; font-size: .66rem; }
  .h-app-nav { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
  .h-app-nav li { display: flex; align-items: center; gap: .6rem; padding: .48rem .55rem; border-radius: 8px; color: var(--ink-soft); }
  .h-app-nav li.is-on { background: var(--accent-soft); color: var(--ink); font-weight: 600; }
  .h-app-main { padding: 1.1rem 1.5rem 2rem; min-width: 0; }
  .h-app-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: .9rem; border-bottom: 1px solid var(--border); }
  .h-app-top > b { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; }
  .h-app-search { display: inline-flex; align-items: center; gap: 2.5rem; padding: .4rem .55rem .4rem .8rem; border: 1px solid var(--border); border-radius: 8px; color: var(--ink-faint); font-size: .76rem; }
  .h-app-search kbd { font: 500 .65rem/1 var(--sans); padding: .2rem .35rem; border: 1px solid var(--border); border-radius: 4px; }
  .h-app-metrics { display: grid; grid-template-columns: .8fr 1fr 1.45fr 1fr 1.3fr; margin: 1rem 0 1.2rem; }
  .h-app-metrics > div { padding: .2rem 1rem; border-left: 1px solid var(--border); position: relative; }
  .h-app-metrics > div:first-child { padding-left: 0; border-left: 0; }
  .h-app-metrics small { display: block; color: var(--ink-soft); font-size: .74rem; }
  .h-app-metrics b { display: block; margin-top: .2rem; font-size: 1.32rem; font-weight: 600; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; }
  .h-spark { position: absolute; right: .9rem; bottom: .35rem; display: flex; align-items: flex-end; gap: 2px; height: 1.3rem; }
  .h-spark i { width: 4px; height: calc(var(--h) * 100%); background: var(--accent); border-radius: 1px; opacity: .85; }
  .h-app-cols { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 1.6rem; }
  .h-queue-head b { font-size: .98rem; font-weight: 600; }
  .h-queue-head span { color: var(--ink-faint); font-weight: 500; }
  .h-tabs { display: inline-flex; gap: .15rem; margin: .7rem 0 .5rem; padding: .2rem; border-radius: 8px; background: var(--paper-2); }
  .h-tabs span { padding: .32rem .6rem; border-radius: 6px; color: var(--ink-soft); font-size: .74rem; }
  .h-tabs .is-on { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgb(0 0 0 / .08); }
  .h-group { display: flex; align-items: center; gap: .45rem; margin: .7rem 0 .1rem; font-weight: 600; font-size: .76rem; color: var(--ink); }
  .h-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: .9rem; padding: .62rem .5rem; border-bottom: 1px solid var(--border); }
  .h-row b { display: block; font-weight: 500; font-size: .84rem; }
  .h-row small { display: block; color: var(--ink-soft); font-size: .74rem; margin-top: .12rem; }
  .h-act { font-weight: 600; font-size: .72rem; color: var(--ink); text-align: center; min-width: 6.5rem; }
  .h-assign { color: var(--accent); font-weight: 600; font-size: .72rem; }
  .h-aside-title { display: block; font-size: .92rem; font-weight: 600; margin-bottom: .35rem; }
  .h-aside-title.h-gap { margin-top: 1.2rem; }
  .h-line { display: flex; justify-content: space-between; gap: .75rem; padding: .55rem 0; border-bottom: 1px solid var(--border); }
  .h-line b { font-weight: 500; font-variant-numeric: tabular-nums; }
  .h-line-stack span b { display: block; font-size: .8rem; }
  .h-line-stack small { color: var(--ink-soft); font-size: .72rem; }

  /* Boundaries band (renderTrustBand) */
  .home .trust-band { margin: 0; padding: clamp(4.5rem, 9vw, 7.5rem) 0 clamp(1rem, 3vw, 2rem); border: 0; }
  .home .trust-band .h-wrap { display: grid; gap: 2.5rem; }
  @media (min-width: 62rem) { .home .trust-band .h-wrap { grid-template-columns: minmax(0, .9fr) minmax(0, 2.1fr); gap: 4rem; align-items: start; } }
  .home .trust-band h2 { font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: 1.08; letter-spacing: -0.022em; margin: 0; max-width: 14ch; }
  .home .trust-list { display: grid; gap: 0; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--hair); counter-reset: trust; }
  @media (min-width: 46rem) { .home .trust-list { grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 0; } }
  .home .trust-list li { counter-increment: trust; padding: 1.4rem 0; border-bottom: 1px solid var(--hair); }
  @media (min-width: 46rem) { .home .trust-list li { padding: 0 1.75rem; border-bottom: 0; border-left: 1px solid var(--hair); } .home .trust-list li:first-child { padding-left: 0; border-left: 0; } }
  .home .trust-list li::before { content: counter(trust, decimal-leading-zero); display: block; margin-bottom: .9rem; font: 400 1.05rem/1 var(--serif); color: var(--gold); }
  .home .trust-list strong { font-size: 1.04rem; margin-bottom: .45rem; }
  .home .trust-list p { color: var(--ink-soft); font-size: .95rem; line-height: 1.6; }
  .home .trust-close { grid-column: 1 / -1; margin: 1rem 0 0; padding-top: 2.5rem; border-top: 1px solid var(--hair);
    font: italic 400 clamp(1.35rem, 2.4vw, 2rem)/1.3 var(--serif); letter-spacing: -0.012em; color: var(--ink); text-wrap: balance; }

  /* Chapters */
  .h-chapter { padding-top: clamp(5rem, 10vw, 9rem) !important; }
  .h-chapter-grid { display: grid; gap: 2.5rem; align-items: center; }
  @media (min-width: 62rem) {
    .h-chapter-grid { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(3rem, 6vw, 6rem); }
    .h-chapter-flip .h-chapter-grid { grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); }
    .h-chapter-flip .h-chapter-copy { order: 2; }
  }
  .h-num { display: flex; align-items: baseline; gap: .8rem; margin: 0 0 1.2rem; color: var(--ink-faint); font: 600 .78rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
  .h-num span { font: 400 1rem/1 var(--serif); letter-spacing: 0; color: var(--gold); padding-right: .8rem; border-right: 1px solid var(--hair); }
  .home .h-chapter h2 { font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.06; letter-spacing: -0.024em; margin: 0 0 1.4rem; max-width: 17ch; }
  .home .h-chapter-copy > p:not(.h-num) { color: var(--ink-soft); font-size: 1.06rem; line-height: 1.68; max-width: 44ch; margin: 0; }
  .home .feature-link { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; margin-top: 1.1rem; color: var(--accent); font-weight: 600; text-decoration: none; }
  .home .feature-link::after { content: "→"; transition: transform .2s ease; }
  .home .feature-link:hover::after { transform: translateX(3px); }

  .h-scene {
    position: relative; margin: 0; isolation: isolate;
    padding: clamp(1.5rem, 5vw, 4rem) clamp(1rem, 4vw, 3.5rem) clamp(3.5rem, 6vw, 4.5rem);
    border-radius: var(--radius-xl); overflow: hidden;
    background:
      radial-gradient(70% 60% at 85% 0%, color-mix(in srgb, var(--fanlight) 14%, transparent), transparent 70%),
      radial-gradient(60% 70% at 0% 100%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%),
      var(--paper-2);
  }
  .h-scene::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5; background-image: var(--grain); mix-blend-mode: soft-light; pointer-events: none; }
  .h-scene figcaption { position: absolute; left: clamp(1rem, 4vw, 3.5rem); right: 1rem; bottom: 1.1rem; margin: 0; color: var(--ink-faint); font-size: .86rem; max-width: none; }

  .h-doc { position: relative; background: var(--surface); border-radius: 14px; padding: 1.4rem 1.5rem 1.2rem; box-shadow: 0 0 0 1px var(--hair), var(--shadow-lg); font-size: .84rem; line-height: 1.45; color: var(--ink); }
  .h-doc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); }
  .h-doc-head b { display: block; font: 500 1.25rem/1.15 var(--serif); letter-spacing: -0.01em; }
  .h-doc-head small { display: block; margin-top: .3rem; color: var(--ink-soft); font-size: .76rem; }
  .h-seal { width: 4.1rem; height: 4.1rem; flex: none; color: var(--gold); transform: rotate(-12deg); }
  .h-seal svg { width: 100%; height: 100%; overflow: visible; }
  .h-seal circle:first-of-type { fill: var(--gold-soft); stroke: currentColor; stroke-width: 1.2; }
  .h-seal circle + circle { stroke: currentColor; stroke-width: .6; stroke-dasharray: 1.5 2; }
  .h-seal text { font: 600 6.1px/1 var(--sans); letter-spacing: .14em; fill: currentColor; }
  .h-seal path:last-child { stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
  .h-doc-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin: 1rem 0; }
  .h-doc-meta dt { color: var(--ink-faint); font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
  .h-doc-meta dd { margin: .2rem 0 0; font-weight: 500; }
  .h-doc-group { margin: .4rem 0 .2rem; font-weight: 600; font-size: .76rem; color: var(--ink-soft); }
  .h-doc-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: .75rem; padding: .5rem 0; border-bottom: 1px solid var(--border); }
  .h-doc-row b { font-weight: 500; font-variant-numeric: tabular-nums; text-align: right; }
  .h-doc-prop { color: var(--ink-soft); }
  .h-doc-sub span:first-child { color: var(--ink-soft); }
  .h-doc-total { border-bottom: 0; padding-top: .8rem; font-weight: 600; }
  .h-doc-total b { font: 500 1.2rem/1 var(--serif); }
  .h-scene-statement .h-doc { max-width: 34rem; margin-inline: auto; }
  .h-float-match { position: relative; inset: auto; width: min(19rem, 88%); margin: -1.6rem clamp(.5rem, 3vw, 2.5rem) 0 auto; }

  .h-scene-phone { display: grid; place-items: center; }
  .h-phone { width: min(17.5rem, 100%); aspect-ratio: 9 / 18.5; padding: .6rem; border-radius: 2.6rem; background: #111410; box-shadow: 0 0 0 1px rgb(255 255 255 / .06) inset, var(--shadow-lg), 0 40px 70px -30px rgb(10 40 30 / .45); }
  .h-phone > div { height: 100%; border-radius: 2.05rem; overflow: hidden; background: var(--bg); padding: .7rem .8rem; display: flex; flex-direction: column; gap: .55rem; font-size: .76rem; color: var(--ink); }
  .h-phone-status { display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: .68rem; padding: 0 .4rem; }
  .h-phone-notch { width: 4.6rem; height: 1.25rem; border-radius: 1rem; background: #111410; }
  .h-phone-head { padding: .5rem .2rem .2rem; }
  .h-phone-head b { display: block; font: 500 1.45rem/1.1 var(--serif); letter-spacing: -0.015em; }
  .h-phone-head small { color: var(--ink-soft); }
  .h-pcard { display: grid; gap: .15rem; padding: .7rem .75rem; border-radius: 12px; background: var(--surface); box-shadow: 0 0 0 1px var(--hair), 0 4px 12px -6px rgb(0 0 0 / .12); }
  .h-pcard b { font-weight: 600; font-size: .82rem; }
  .h-pcard small { color: var(--ink-soft); }
  .h-pcard .h-float-action { margin-top: .3rem; }
  .h-phone-tabbar { margin-top: auto; display: flex; justify-content: space-around; padding: .6rem 0 .2rem; border-top: 1px solid var(--border); }
  .h-phone-tabbar i { width: 1.1rem; height: 1.1rem; border-radius: 5px; border: 1.5px solid var(--ink-faint); opacity: .5; }
  .h-phone-tabbar i.is-on { border-color: var(--accent); background: var(--accent-soft); opacity: 1; }

  .h-chip { flex: none; padding: .28rem .6rem; border-radius: 999px; background: var(--paper-2); color: var(--ink-soft); font-size: .7rem; font-weight: 600; }
  .h-fields { display: grid; margin-top: .6rem; }
  .h-fields > div { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) 5.2rem; gap: .75rem; align-items: center; padding: .48rem 0; border-bottom: 1px solid var(--border); }
  .h-fields span { color: var(--ink-soft); }
  .h-fields b { font-weight: 500; }
  .h-fields i { font-style: normal; justify-self: end; padding: .14rem .45rem; border-radius: 6px; background: var(--accent-soft); color: var(--accent); font-size: .68rem; font-weight: 600; }
  .h-fields .h-missing { font-style: italic; font-weight: 400; color: var(--ink-faint); }
  .h-form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-top: 1rem; }
  .h-form-foot small { color: var(--ink-faint); }
  .h-btn-mini { padding: .45rem .75rem; border-radius: 8px; background: var(--accent); color: var(--on-accent); font-weight: 600; font-size: .76rem; }
  .h-scene-rtb .h-doc { max-width: 36rem; margin-inline: auto; }

  /* Place */
  .h-about { padding-top: clamp(5rem, 10vw, 9rem) !important; }
  .h-about-grid { display: grid; gap: 2.5rem; align-items: center; }
  @media (min-width: 62rem) { .h-about-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(3rem, 6vw, 6rem); } }
  .h-about-photo { margin: 0; }
  .h-about-photo .h-photo { aspect-ratio: 3 / 2; border-radius: var(--radius-xl); }
  .home .h-about h2 { font-size: clamp(2.2rem, 3.8vw, 3.4rem); line-height: 1.02; margin: 0 0 1.2rem; }
  .home .h-about-copy > p:not(.eyebrow) { font-size: 1.12rem; line-height: 1.65; color: var(--ink-soft); margin: 0; max-width: 36ch; }
  .h-facts { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--hair); }
  .h-facts li { display: grid; gap: .2rem; padding: 1rem 0; border-bottom: 1px solid var(--hair); }
  .h-facts b { font-weight: 600; }
  .h-facts span { color: var(--ink-soft); font-size: .95rem; }

  /* Ask */
  .home .h-cta { margin: 0; padding: clamp(5rem, 10vw, 9rem) 0 clamp(4rem, 8vw, 6rem) !important; border: 0; background: none; display: block; }
  .h-cta-panel {
    position: relative; isolation: isolate; overflow: hidden;
    display: grid; gap: 2.5rem; padding: clamp(1.5rem, 5vw, 4.5rem);
    border-radius: var(--radius-xl); color: var(--on-stage);
    background:
      radial-gradient(50% 70% at 12% 0%, color-mix(in srgb, var(--fanlight) 30%, transparent), transparent 70%),
      linear-gradient(160deg, var(--stage) 0%, var(--stage-deep) 100%);
  }
  .h-cta-panel::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5; background-image: var(--grain); mix-blend-mode: overlay; pointer-events: none; }
  @media (min-width: 62rem) { .h-cta-panel { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(3rem, 6vw, 5rem); align-items: center; } }
  .home .h-cta .hero-mark { max-width: 12rem; margin: 0 0 2rem; }
  .home .h-cta h2 { color: var(--on-stage); font-size: clamp(2.3rem, 4.2vw, 3.6rem); line-height: 1.02; margin: 0 0 1.2rem; max-width: 12ch; }
  .home .h-cta .cta-intro p { color: var(--on-stage); opacity: .86; font-size: 1.08rem; line-height: 1.65; max-width: 40ch; margin: 0; }
  .home .h-cta .cta-intro .cta-points { margin-top: 1.25rem; opacity: .7; font-size: .95rem; }
  .h-cta-form { background: var(--surface); color: var(--ink); border-radius: 20px; padding: clamp(1.25rem, 3vw, 2.25rem); box-shadow: 0 30px 60px -30px rgb(0 0 0 / .5); }
  .home .h-cta .lb-form { margin-top: 0; }

  /* Reveal on scroll: only when script has marked the page, and never when
     a visitor has asked for less motion. With no script, nothing hides. */
  .js-reveal [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
  .js-reveal [data-reveal].is-in { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) { .js-reveal [data-reveal] { opacity: 1; transform: none; transition: none; } }

  /* Phone */
  @media (max-width: 61.99rem) {
    .h-app { grid-template-columns: minmax(0, 1fr); }
    .h-app-side, .h-aside, .h-metric-hide, .h-tab-hide { display: none; }
    .h-app-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: .8rem; }
    .h-app-metrics > div:nth-child(3) { padding-left: 0; border-left: 0; }
    .h-app-cols { grid-template-columns: minmax(0, 1fr); }
    .h-window { max-height: 32rem; }
  }
  @media (max-width: 40rem) {
    .h-wrap { padding-inline: 1.1rem; }
    .home .h-badge { font-size: .62rem; letter-spacing: .07em; padding-inline: .5rem .7rem; }
    .h-float-hero { position: relative; left: auto; bottom: auto; width: auto; margin: -2.75rem .9rem 0; }
    .h-hero-photo .h-photo { aspect-ratio: 5 / 4; }
    .h-hero-photo .h-photo img { object-position: 50% 28%; }
    .h-window { max-height: 30rem; }
    .h-app-main { padding: .9rem 1rem 1.5rem; }
    .h-app-search { display: none; }
    .h-row { grid-template-columns: minmax(0, 1fr) auto; }
    .h-row .h-assign { display: none; }
    .h-act { min-width: 0; }
    .h-window-bar b { padding-inline: 1rem; }
    .h-app-metrics b { font-size: 1.12rem; }
    .h-metric-wide .h-spark { display: none; }
    .h-doc { padding: 1.1rem 1rem 1rem; font-size: .8rem; }
    .h-doc-row { grid-template-columns: minmax(0, 1fr) auto; }
    .h-doc-prop { display: none; }
    .h-doc-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .h-doc-meta > div:last-child { display: none; }
    .h-fields > div { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .h-fields i { display: none; }
    .h-seal { width: 3.2rem; height: 3.2rem; }
  }
  @media (forced-colors: active) {
    .h-stage, .h-scene, .h-cta-panel { background: Canvas; border: 1px solid CanvasText; }
    .h-float { background: Canvas; }
  }

.lb-form { margin-top: 2rem; max-width: 46rem; text-align: left; }
.lb-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.25rem; }
.lb-field label { display: block; }
.lb-field { display: flex; flex-direction: column; justify-content: flex-end; gap: .4rem; min-width: 0; }
.lb-field-wide { grid-column: 1 / -1; }
.lb-field label { font-family: inherit; font-weight: 600; font-size: .9rem; line-height: 1.5; color: var(--ink); }
.lb-optional { font-weight: 400; color: var(--ink-faint); }
.lb-field input, .lb-field select, .lb-field textarea {
  width: 100%; padding: .7rem .8rem; border: 1px solid var(--control-border, var(--border)); border-radius: 8px;
  background: var(--surface, #fff); color: var(--ink); font: inherit; font-size: 1rem; line-height: 1.5;
}
.lb-field textarea { resize: vertical; min-height: 6.5rem; }
.lb-field input:focus-visible, .lb-field select:focus-visible, .lb-field textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}
.lb-field-error, .lb-form-error { margin: 0; font-size: .875rem; color: var(--danger, #a3261a); }
.lb-field[data-invalid] input, .lb-field[data-invalid] select, .lb-field[data-invalid] textarea { border-color: var(--danger, #a3261a); }
.lb-form-error { margin-top: 1rem; font-weight: 600; }
/* Off-screen rather than display:none: a bot reading the DOM sees a normal
   field, while nothing in the visual or tab order changes for a person. */
/* The success path hides the grid and the actions with the [hidden]
   attribute, and the display:grid/flex rules here outrank the browser's own
   [hidden] rule. Without this the filled form and a live submit button stayed
   on screen above the confirmation (2 Oct end-to-end run). */
.lb-form [hidden] { display: none !important; }
.lb-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lb-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin-top: 1.5rem; }
.lb-form-actions .btn { margin-top: 0; }
.lb-form-note, .lb-form-alt { margin: 0; font-size: .9rem; color: var(--ink-soft); }
.lb-form-alt { margin-top: 1rem; }
.lb-form[data-busy] .lb-form-grid, .lb-form[data-busy] .lb-form-actions { opacity: .55; }
.lb-form-done {
  margin-top: 1.25rem; padding: 1.1rem 1.25rem; border: 1px solid var(--border);
  border-radius: 10px; background: var(--accent-soft); color: var(--ink);
}
.lb-form-done h3 { margin: 0 0 .5rem; font-size: 1.05rem; }
.lb-form-done p { margin: 0 0 .5rem; color: var(--ink-soft); }
.lb-form-done p:last-child { margin-bottom: 0; }
.lb-form-done .lb-reference { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; color: var(--ink); }
@media (max-width: 620px) {
  .lb-form-grid { grid-template-columns: minmax(0, 1fr); }
  .lb-form-actions .btn { width: 100%; }
}

@media (max-width: 639px) {
  .sales-page .cta { padding-bottom: 2rem; }
}.lb-mark{--lb-s:24px;--lb-r:1;--lb-tile:#169B62;--lb-in-top:#FFF1E2;--lb-in-bot:#FFB477;--lb-halo:.55;position:relative;display:inline-flex;flex:none;align-items:center;padding:0;margin:0;border:0;background:none;color:inherit;font:inherit;line-height:0;cursor:pointer;border-radius:calc(var(--lb-s)*.21);-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button.lb-mark{padding-block:max(0px,calc((44px - var(--lb-s))/2))}
.lb-mark:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.lb-mark--static{cursor:default}
.lb-mark svg{display:block;height:var(--lb-s);width:calc(var(--lb-s)*var(--lb-r));overflow:visible;pointer-events:none}
.lb-mark__tile{fill:var(--lb-tile)}
.lb-mark__word{fill:currentColor}
.lb-mark__halo,.lb-mark__room,.lb-mark__spill,.lb-mark__shade,.lb-mark__lit,.lb-mark__rays,.lb-mark__glint,.lb-mark--hero .lb-mark__l{opacity:0}
.lb-mark__body,.lb-mark__front{transform-box:view-box;transform-origin:12px 20px}
.lb-mark__halo{transform-box:view-box;transform-origin:12px 10px}
.lb-mark__leaf{transform-box:fill-box;transform-origin:0 50%;clip-path:polygon(0 6.186%,100% 6.186%,100% 93.814%,0 93.814%)}
.lb-mark__ray{transform-box:view-box;transform-origin:12px 10px}
.lb-mark__l{transform-box:view-box;transform-origin:0 0}
.lb-mark__s{transform-box:fill-box;transform-origin:50% 60%}
@media (prefers-reduced-motion:reduce){.lb-mark--hero .lb-mark__l{opacity:1}}
:root[data-motion="reduce"] .lb-mark--hero .lb-mark__l{opacity:1}
:root[data-theme="dark"] .lb-mark{--lb-tile:#12201B;--lb-in-top:#F29A55;--lb-in-bot:#A94F1C;--lb-halo:.7}

.help-skip{position:absolute;left:0;top:-3rem;z-index:20;padding:.5rem 1rem;background:var(--accent,#0a6b3d);color:var(--on-accent,#fff);text-decoration:none;font:600 .95rem/1.4 var(--sans,ui-sans-serif,system-ui,sans-serif);}
.help-skip:focus{top:0;}
.help-body{margin:0;background:var(--bg,var(--paper,#fff));color:var(--ink,#111);font:400 17px/1.6 var(--sans,ui-sans-serif,system-ui,sans-serif);}
.help-skip,.help-contents a,.help-sources a,.help-mailto{display:inline-flex;align-items:center;min-height:44px;min-width:44px;}
.help-contents a,.help-sources a{padding-block:0;}
.help-main{max-width:46rem;margin:0 auto;padding:2.5rem 1.25rem 4rem;overflow-wrap:break-word;}
.help-main h1{font-size:clamp(1.6rem,4vw,2.1rem);margin:0 0 1rem;}
.help-intro{font-size:1.05rem;color:var(--muted,var(--ink-soft,#555));margin:0 0 2rem;}
.help-contents{background:var(--accent-soft);margin:0 0 2.5rem;padding:1rem 1.25rem;border:1px solid var(--border,var(--line,#ddd));border-radius:8px;}
.help-contents h2{font-size:14px;text-transform:none;letter-spacing:normal;margin:0 0 .75rem;color:var(--muted,var(--ink-faint,#777));}
.help-contents ul{margin:0;padding-left:1.1rem;}
.help-contents li{margin:0 0 .4rem;}
.help-contents a{color:var(--accent);}
section.help-term,section.help-answer{margin:0 0 2.75rem;padding-top:1.5rem;border-top:1px solid var(--border,var(--line,#ddd));}
section.help-term h2,section.help-answer h2{font-size:1.3rem;margin:0 0 .75rem;}
.help-classification{display:inline-block;font-size:14px;font-weight:600;padding:.15rem .6rem;border-radius:999px;background:var(--gold-soft);color:var(--gold);margin:0 0 .75rem;}
.help-also-called{font-size:.95rem;color:var(--muted,var(--ink-soft,#555));margin:0 0 .75rem;}
.help-also-called .help-label{font-weight:600;color:var(--ink,#111);}
.help-sources{list-style:none;margin:1rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem 1rem;}
.help-reviewed{font-size:14px;color:var(--muted,var(--ink-faint,#777));margin:1rem 0 0;}
.help-terms{margin:1rem 0 0;border:1px solid var(--border,var(--line,#ddd));border-radius:8px;padding:.75rem 1rem;}
.help-terms summary{cursor:pointer;font-weight:600;min-height:44px;display:list-item;}
.help-terms dl{margin:.75rem 0 0;}
.help-terms dt{font-weight:600;margin:.75rem 0 .25rem;}
.help-terms dt a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;}
.help-terms dt:first-child{margin-top:0;}
.help-terms dd{margin:0 0 .5rem;color:var(--muted,var(--ink-soft,#555));}
.help-guide-list{list-style:none;padding:0;margin:1rem 0 2rem;}
.help-guide-list li{border-bottom:1px solid var(--border,var(--line,#ddd));}
.help-guide-list a,.help-back a{display:inline-flex;align-items:center;min-height:44px;padding:.35rem 0;color:var(--accent);}
.help-search label{display:block;font-weight:600;margin-bottom:.5rem;}
.help-search input{box-sizing:border-box;width:100%;min-height:44px;padding:.65rem .75rem;border:1px solid var(--control-border,var(--border,#777));border-radius:4px;background:var(--bg,var(--paper,#fff));color:var(--ink);font:inherit;}
.help-back{display:flex;flex-wrap:wrap;gap:0 1.25rem;}
.help-guide-list [hidden]{display:none;}
.help-body :focus-visible{outline:2px solid var(--gold-ui);outline-offset:2px;}