/* ============================================================================
   site.css — the landing site's shared stylesheet.
   Lifted out of index.html's inline <style> on 2026-08-21, when the landing page
   was split into a short selling page plus pages that carry the detail. Five new
   pages needed these same rules, and five inline copies would have drifted the
   first time any of them was edited.
   ⚠️ The OLDER sub-pages (guides, install, terms, the SEO articles) still carry
   their own trimmed <style> blocks. That is the pattern they were written in;
   folding them in here is worth doing but is a separate change with its own
   before/after check.
   ============================================================================ */
  /* ==========================================================================
     PALETTE — the APP'S palette, verbatim (src/index.css :root).
     ⭐ Founder, 2026-08-21: "remove dark from the pad … remarket it."

     ⚠️ WHY THE VALUES MOVED. The app went COOL on 2026-08-20 and this site did
     not follow, so `docs/DESIGN-RULES.md` carried "web/landing/ is still on the old
     warm cream palette — until they follow, the app and the marketing site are not
     the same company" as an OWED item, and `src/index.css:11` said the same thing.
     Worse than warm-vs-cool: the site's --green was #12a37a while the brand shifted
     green → deep teal in June 2026. The site was advertising a colour the product
     had not worn for two months.

     ⭐ The token NAMES are unchanged on purpose. Re-pointing values fixes every
     call site at once (rule 11); renaming them would have meant touching ~200
     places and getting some wrong. --ink/--cream/--muted survive as ALIASES.
     ⛔ If you type a hex outside this block, make it a token instead. */
  :root{
    /* surfaces — two weights of the same material, white cards float above both */
    --paper:#f3f5f7; --paper-2:#e9edf1; --paper-card:#ffffff;
    --line:#e5eaee; --line-2:#d5dce3; --hairline:rgba(20,17,15,.07);
    /* type — warm-dark on cool paper is what stops this reading as cold */
    --text:#221d18; --text-soft:#6b625a; --text-faint:#6f6960;
    /* ⭐ HEADINGS are the rail's own hue taken deep (~208°, 26% L). Monochromatic
       with the app's sidebar, which is why it reads considered rather than
       decorative. ⛔ Deliberately NOT emerald: emerald means "act on this". */
    --heading:#2a4258; --heading-soft:#41586e;
    /* brand — two hues, and what they mean (rule 2): emerald = the PEOPLE side,
       gold = the STATE side. ⛔ No third hue on a significant surface. */
    --emerald:#0b6e66; --emerald-bright:#0fa295; --emerald-soft:#e0f2ef;
    --gold:#b8893a; --gold-deep:#8a6322; --gold-soft:#f4ecdc;
    --amethyst:#6b4e9e; --amethyst-soft:#f0ebf8; /* RESERVED: authorised/verified */
    /* ⚠️ --ink / --ink-2 / --cream are DELETED, not re-pointed, and that is the
       lesson from this conversion: they are DARK-PAGE names, and keeping them as
       aliases was a trap that fired the same hour. terms.html said
       `background:var(--ink)`, so pointing --ink at a text colour silently
       repainted that whole page near-black — a token alias cannot know whether a
       call site meant "the ink you write with" or "the ink you paint with".
       Only the two aliases still referenced anywhere survive. */
    --muted:#6b625a; --green:var(--emerald); --radius:16px;
    --shadow-sm:0 1px 1px rgba(20,17,15,.04), 0 2px 6px rgba(20,17,15,.05);
    --shadow:0 2px 6px rgba(20,17,15,.05), 0 12px 28px rgba(20,17,15,.08);
    --shadow-lg:0 28px 64px rgba(20,17,15,.16);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  /* ⭐ The sticky nav is 69px tall, so every in-page anchor — Features, Pricing,
     FAQ, all of them — landed with the section heading TUCKED UNDERNEATH IT.
     A reader clicking "Pricing" arrived at a page that looked like it had jumped
     to the wrong place. `scroll-padding-top` is the whole fix, and it applies to
     the smooth scroll this line asks for. */
  html{scroll-behavior:smooth;scroll-padding-top:88px}
  body{
    font-family:"Hanken Grotesk",system-ui,sans-serif;background:var(--paper);color:var(--text);
    line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;
  }
  h1,h2,h3,.display{font-family:"Bricolage Grotesque",sans-serif;line-height:1.05;letter-spacing:-.02em;color:var(--heading)}
  a{color:inherit;text-decoration:none}
  .wrap{max-width:1140px;margin:0 auto;padding:0 24px}
  .gold{color:var(--gold-deep)}
  .grad-text{background:linear-gradient(100deg,#ab7c2e,#8a6322 52%,#6d4a0e);-webkit-background-clip:text;background-clip:text;color:transparent}

  /* nav */
  nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px) saturate(1.4);box-shadow:0 1px 3px rgba(20,17,15,.05);background:rgba(243,245,247,.82);border-bottom:1px solid var(--line)}
  .nav-in{display:flex;align-items:center;justify-content:space-between;height:68px}
  .brand{display:flex;align-items:center;gap:11px;font-weight:700;font-size:19px;font-family:"Bricolage Grotesque"}
  .mark{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font-weight:800;color:#ffffff;
    background:linear-gradient(145deg,#109c6f,#0b6e4f);box-shadow:0 4px 14px rgba(16,110,79,.32)}
  /* ⭐ R9, "navigation must be visible without scrolling" (docs/DESIGN-RULES.md).
     Multi-word links were WRAPPING inside a 68px bar — "Sole trader", "Live demo"
     and "Challenge the maths" each rendered on two lines, which is the same failure
     the app's Returns tabs had the same day. `white-space:nowrap` keeps each label
     whole and the gap tightens so the row still fits; the 860px breakpoint below
     already hides the links entirely on phones, so this only has to hold on desktop. */
  .nav-links{display:flex;gap:18px;align-items:center;font-size:14.5px;color:var(--text-soft);white-space:nowrap}
  .nav-links a{white-space:nowrap}
  .nav-links a:hover{color:var(--emerald)}
  .btn{display:inline-flex;align-items:center;gap:9px;border-radius:11px;padding:12px 20px;font-weight:600;font-size:15px;
    cursor:pointer;border:1px solid transparent;transition:.2s;white-space:nowrap}
  .btn-gold{background:linear-gradient(145deg,#e3c074,#b8893a);color:#1a1407;box-shadow:0 6px 20px rgba(184,137,58,.3)}
  .btn-gold:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(184,137,58,.45)}
  .btn-ghost{border-color:var(--line-2);color:var(--heading);background:var(--paper-card)}
  .btn-ghost:hover{border-color:var(--gold);background:var(--gold-soft);color:var(--gold-deep)}
  .btn-wa{background:#177a42;color:#fff}.btn-wa:hover{background:#1f8a4c;transform:translateY(-2px)}
  .nav-links .btn{padding:9px 16px;font-size:14px}
  /* ⚠️ CORRECTION to the note above, measured 2026-08-21. `white-space:nowrap`
     did stop the wrapping, but with every label kept whole the row needs 1033px of
     viewport — so from 860px to 1033px the nav simply OVERFLOWED the page. The
     reasoning that missed it is in the comment above: "the 860px breakpoint already
     hides the links on phones, so this only has to hold on desktop." 860–1033px is
     neither a phone nor a comfortable desktop — it is tablets and small laptops.
     Through that band the three lowest-value links drop out (all still in the
     footer); below 860px they all go, as before. */
  @media(max-width:1160px){.nav-links a.nav-drop{display:none}.nav-links{gap:14px}}
  @media(max-width:900px){.nav-links a:not(.btn){display:none}.nav-links{gap:12px}}

  /* hero */
  .hero{position:relative;padding:96px 0 80px;overflow:hidden;
    background:linear-gradient(180deg,#ffffff 0%,#fbfcfd 42%,var(--paper) 100%)}
  .glow{position:absolute;border-radius:50%;filter:blur(90px);opacity:.75;pointer-events:none}
  .g1{width:560px;height:560px;background:radial-gradient(circle,rgba(184,137,58,.30),transparent 70%);top:-180px;right:-120px}
  .g2{width:420px;height:420px;background:radial-gradient(circle,rgba(15,162,149,.26),transparent 70%);bottom:-160px;left:-120px;opacity:.4}
  .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center;position:relative;z-index:2}
  .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
    color:var(--gold-deep);background:var(--gold-soft);border:1px solid rgba(184,137,58,.32);padding:7px 14px;border-radius:100px;margin-bottom:24px}
  .dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green)}
  h1.title{font-size:clamp(40px,6vw,68px);font-weight:700}
  .lead{font-size:19px;color:var(--text-soft);margin:22px 0 32px;max-width:520px}
  .cta-row{display:flex;gap:14px;flex-wrap:wrap}
  .micro{margin-top:20px;font-size:13.5px;color:var(--muted);display:flex;gap:18px;flex-wrap:wrap}
  .micro span{display:flex;align-items:center;gap:7px}
  .check{color:var(--gold-deep)}
  @media(max-width:860px){.hero-grid{grid-template-columns:1fr;gap:40px}}

  /* hero device mock */
  .mock{position:relative}
  .card{background:linear-gradient(180deg,#ffffff,#fbfcfd);border:1px solid var(--line);border-radius:20px;
    box-shadow:var(--shadow-lg);padding:22px;backdrop-filter:blur(8px)}
  .card-top{display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:16px;border-bottom:1px solid var(--line)}
  .co{font-family:"Bricolage Grotesque";font-weight:700;font-size:17px}
  .pill{font-size:11px;color:var(--gold-deep);border:1px solid rgba(184,137,58,.45);padding:3px 9px;border-radius:100px}
  .rows{margin-top:14px;display:flex;flex-direction:column;gap:10px}
  .r{display:flex;justify-content:space-between;font-size:14px}
  .r .l{color:var(--text-soft)}.r .v{font-weight:600;font-variant-numeric:tabular-nums}
  .net{margin-top:14px;padding:14px 16px;border-radius:12px;background:var(--emerald-soft);
    border:1px solid rgba(11,110,102,.28);display:flex;justify-content:space-between;align-items:center}
  .net .lbl{font-weight:700}.net .amt{font-family:"Bricolage Grotesque";font-weight:700;font-size:22px;color:var(--green)}
  /* interactive payslip: editable gross + PAYE-method toggle, computed live by Brawta's engine */
  .method{display:inline-flex;gap:4px;background:var(--paper-2);border:1px solid var(--line);border-radius:100px;padding:3px}
  .mbtn{font:inherit;font-size:11px;color:var(--text-soft);background:transparent;border:0;padding:4px 11px;border-radius:100px;cursor:pointer;transition:.15s;white-space:nowrap}
  .mbtn.is-on{background:var(--gold-soft);color:var(--gold-deep);font-weight:700}
  .gross-edit{display:inline-flex;align-items:center;gap:3px}
  .gross-edit .cur{color:var(--text-soft);font-weight:600}
  #pay-gross,#pay-bonus{width:108px;text-align:right;font:inherit;font-weight:600;font-variant-numeric:tabular-nums;color:var(--text);background:transparent;border:0;border-bottom:1px dashed rgba(199,154,74,.6);padding:1px 2px 3px;outline:none;transition:.15s}
  #pay-gross:hover,#pay-bonus:hover{border-bottom-color:rgba(199,154,74,.9)}
  #pay-gross:focus,#pay-bonus:focus{border-bottom-color:var(--gold-deep)}
  .gross-hint{font-size:10.5px;color:var(--gold-deep);opacity:.85;margin-left:7px;white-space:nowrap}
  .paynote{margin-top:12px;font-size:11.5px;line-height:1.55;color:var(--text-faint)}
  .paynote b{color:var(--text-soft);font-weight:600}
  .net.neg{background:linear-gradient(120deg,rgba(229,72,72,.16),rgba(229,72,72,.05));border-color:rgba(229,72,72,.4)}
  .net.neg .amt{color:#b3322a}
  .float{position:absolute;right:-26px;top:-40px;background:var(--paper-card);border:1px solid var(--line);border-radius:14px;padding:12px 16px;
    box-shadow:var(--shadow);display:flex;align-items:center;gap:11px}
  .float .ic{width:34px;height:34px;border-radius:9px;background:var(--gold-soft);display:grid;place-items:center;color:var(--gold-deep)}
  .float .t{font-size:12px;color:var(--muted)}.float .b{font-weight:700;font-size:14px}
  @media(max-width:520px){.float{display:none}}

  /* marquee strip */
  .strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper-2);padding:20px 0}
  .strip-in{display:flex;flex-wrap:wrap;gap:14px 30px;justify-content:center;align-items:center;color:var(--text-faint);font-weight:600;font-size:14px;letter-spacing:.04em}
  .strip-in b{color:var(--gold-deep);font-weight:700}
  /* The strip is a quiet band, so its links stay quiet: they inherit the
     surrounding colour and only announce themselves on hover or keyboard
     focus. Underline-on-hover rather than always-on keeps the row reading as
     one line of text instead of a second nav bar. */
  .strip-in a{color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .16s,color .16s}
  .strip-in a:hover,.strip-in a:focus-visible{color:var(--gold-deep);border-bottom-color:var(--gold-deep)}
  .strip-in a:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px;border-radius:3px}

  /* sections */
  /* ==========================================================================
     TEXT-TONE CLASSES — rule 11, "tokens, not hex" (docs/DESIGN-RULES.md).
     The page carried 39 INLINE style="color:#…" attributes. Inline colours cannot
     be overridden by any stylesheet rule, so when six sections went light, the text
     inside them could not follow — and no amount of CSS specificity could rescue it.
     That is what made the light conversion take six passes.
     Three tones replace them, each defined for BOTH grounds, so a section can change
     ground and its type follows automatically. If you find yourself typing a hex into
     the markup again, add a tone here instead.
     ========================================================================== */
  .c-body{color:var(--text)}
  .c-soft{color:var(--text-soft)}
  .c-faint{color:var(--text-faint)}

  /* ==========================================================================
     ONE LIGHT PAGE — founder, 2026-08-21: "remove dark from the pad."

     ⚠️ WHAT WAS HERE, AND WHY IT IS GONE. This file used to be dark-first with a
     93-line `section.lite` override layer bolted on for the six sections that went
     light on 2026-08-20 — a layer that existed ONLY because the base was dark. It
     had already shipped two bugs of its own (the comparison table and the savings
     calculator went dark-on-dark and read as EMPTY on the live site). Inverting the
     base deletes the entire layer rather than adding a third pass to it.

     ⭐ SO WHAT CARRIES THE RHYTHM NOW? Value, not hue — rule 4, the same answer the
     app's sidebar arrived at. Two weights of one material: --paper and --paper-2,
     alternating, with white cards floating above both. ⛔ Do NOT reach for a third
     ground colour; that is the tinted-black mistake wearing a light coat.
     ====================================================================== */
  section.pad{padding:92px 0;background:var(--paper)}
  section.pad.alt{background:var(--paper-2)}
  /* A hairline only where two SAME-ground bands meet, so the seam reads as
     intended rather than as a rendering artefact. Different grounds need none. */
  section.pad + section.pad{border-top:1px solid var(--line)}
  section.pad.alt + section.pad.alt{border-top:1px solid var(--line-2)}

  /* ==========================================================================
     THE UNBEATEN SHIELD — founder, 2026-08-20: "show an amethz sheild on the site
     until some one breaks challenge the math".

     ⭐ AMETHYST IS NOT A DECORATION HERE. It is this product's RESERVED colour for
     "authorised / secure / verified" (payslipPdf.ts, decided 2026-08-19), so a
     verification badge in amethyst speaks the vocabulary the product already uses
     rather than inventing a new one. Emerald and gold are the brand; amethyst
     means CHECKED.

     ⛔ THE CLAIM MUST STAY TRUE. It says "no challenge upheld", not "no errors" and
     not "unbreakable" — because the first is a fact about the record and the others
     are promises nobody can keep. It carries a DATE for the same reason: a claim
     with no date quietly becomes a lie as it ages.
     ⚠️ WHEN SOMEONE BREAKS IT: change this badge the same day. The honest move is
     to name the finder and the fix — that is worth more than the streak ever was,
     and a stale "unbeaten" after a public find costs the credibility the whole
     section is built to earn.
     ====================================================================== */
  .shield{display:inline-flex;align-items:center;gap:13px;margin:0 0 22px;
    background:var(--amethyst-soft);
    border:1px solid rgba(107,78,158,.30);border-radius:100px;padding:9px 20px 9px 13px}
  .shield svg{width:26px;height:26px;flex-shrink:0;color:var(--amethyst)}
  .shield .st{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:14px;
    letter-spacing:.13em;text-transform:uppercase;color:#5b4189;line-height:1.1}
  .shield .ss{display:block;font-family:"Hanken Grotesk",sans-serif;font-weight:500;font-size:12.5px;
    letter-spacing:0;text-transform:none;color:#63548a;margin-top:2px}
  section.lite .shield{background:linear-gradient(150deg,rgba(107,78,158,.10),rgba(107,78,158,.04));
    border-color:rgba(107,78,158,.30)}
  section.lite .shield svg{color:#6b4e9e}
  section.lite .shield .st{color:#5b4189}
  section.lite .shield .ss{color:#7b6aa0}
  .sec-head{text-align:center;max-width:660px;margin:0 auto 52px}
  /* ⭐ Founder, 2026-08-20: "heading is too small". It was clamped at 44px, which
     is fine on a laptop and undersized on anything wider — the ceiling bit before
     the viewport did, so the type stopped growing while the page kept growing.
     Ceiling raised and the vw factor with it, so a section title still reads as a
     TITLE on a big monitor. The 30px floor is untouched: phones were never the
     problem. */
  .sec-head .kicker{color:var(--gold-deep);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:14px}
  /* ⭐ "heading should be louder" — second pass. Size alone was not it: the face was
     sitting at 700 while Bricolage is LOADED up to 800, so the boldest weight the
     page already pays to download was going unused. Weight, size and tracking
     together — big display type wants tighter tracking, or the extra size just reads
     as spread out rather than as emphasis. */
  .sec-head h2{font-size:clamp(32px,6vw,68px);font-weight:800;letter-spacing:-.032em;margin:16px 0 18px}
  .sec-head p{color:var(--text-soft);font-size:17.5px}
  /* Panel sub-heads have no icon tile to lean on, so size and hue do the work. */
  .panel-h{font-size:30px;font-weight:700;letter-spacing:-.024em;color:var(--heading)}

  .feat{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  @media(max-width:860px){.feat{grid-template-columns:1fr}}

  /* ==========================================================================
     SECTION HIERARCHY — founder, 2026-08-21: "is the scrolling on landing page
     doing too much? it seems boxy as well."

     ✅ MEASURED, and the answer was not length. EVERY h2 on this page was exactly
     68px — thirteen sections at one size — and ELEVEN opened with the identical
     move: centred kicker, 68px h2, paragraph. Six were the same shape down to the
     3-column grid. With no hierarchy a reader braces for all thirteen equally,
     and THAT is what reads as "doing too much".

     ⛔ THE FIX IS NOT TO SHRINK THE HEADINGS. He asked for a LOUDER section
     heading twice on 2026-08-20 (44 → 68px, weight 700 → 800) and that call
     stands: the MAJOR beats — tracks, bureau, challenge, pricing, the close —
     keep it exactly. What changes is that supporting sections stop claiming the
     same volume, which is the only way the loud ones read as loud. Rule 1: the
     loudest thing must be the thing they came for; if everything is 68px,
     nothing is. */
  .sec-head.sub{text-align:left;max-width:none;margin:0 0 30px;
    border-top:1px solid var(--line-2);padding-top:22px}
  .sec-head.sub .kicker{font-size:12.5px;letter-spacing:.13em}
  /* ⚠️ The FLOOR carries the hierarchy on a phone, not the ceiling. At 375px both
     clamps bottom out, and 27px under a 32px major is a 1.19x step -- against
     1.79x on desktop, so the distinction this whole pass exists to create was
     quietly collapsing on the smallest screens. Measured, then dropped to 23px
     (1.39x). The ceiling is untouched. */
  .sec-head.sub h2{font-size:clamp(23px,3vw,38px);font-weight:700;letter-spacing:-.026em;margin:8px 0 10px}
  .sec-head.sub p{font-size:16.5px;max-width:680px}

  /* ⭐ Two more grid shapes, so six sections stop being the same picture. The
     CARDS are untouched — only the arrangement varies, which buys a new rhythm
     without spending a word of copy or a single type size. */
  .feat.two{grid-template-columns:repeat(2,1fr)}
  @media(max-width:860px){.feat.two{grid-template-columns:1fr}}
  /* A LIST, not a grid: icon left, text right, full width, hairline between.
     Reads as a run-through rather than a set of choices — which is what "here is
     everything that is covered" actually is. It also un-boxes six more cards. */
  .feat.stack{grid-template-columns:1fr;gap:0}
  .feat.stack .f{display:grid;grid-template-columns:46px 1fr;gap:20px;align-items:start;
    background:none;box-shadow:none;border:0;border-radius:0;padding:22px 4px;
    border-bottom:1px solid var(--line-2)}
  .feat.stack .f:last-child{border-bottom:0}
  .feat.stack .f:hover{transform:none;box-shadow:none}
  .feat.stack .fi{margin-bottom:0}
  .feat.stack .f h3{grid-column:2;margin-bottom:6px}
  .feat.stack .f p{grid-column:2}
  @media(max-width:620px){.feat.stack .f{grid-template-columns:1fr;gap:10px}
    .feat.stack .f h3,.feat.stack .f p{grid-column:1}}
  /* the calculator's own lead-in, now that it sits under the comparison table */
  .calc-lead{max-width:840px;margin:34px auto 14px;font-size:16.5px;color:var(--text-soft);
    border-top:1px solid var(--line-2);padding-top:22px}
  .f{background:linear-gradient(180deg,#ffffff,#fbfcfd);border:1px solid transparent;
    border-radius:var(--radius);padding:26px;transition:.25s;box-shadow:var(--shadow-sm)}
  .f:hover{border-color:rgba(184,137,58,.55);transform:translateY(-4px);box-shadow:var(--shadow)}
  .f .fi{width:46px;height:46px;border-radius:12px;background:var(--gold-soft);display:grid;place-items:center;color:var(--gold-deep);margin-bottom:16px}
  /* ==========================================================================
     ⭐ SUB-HEADERS, founder 2026-08-21: "sub headers should be pronounce."
     ✅ MEASURED, not eyeballed. The card sub-head was 19px sitting under a 68px
     section h2 and directly above 15px body — 4px of separation from the paragraph
     it was meant to title, and a 3.6× drop from the heading above it. A sub-head
     that is 4px larger than body text is not a sub-head; it is bold body text.
     ⛔ The fix is NOT to shrink the h2. He asked for a LOUDER section heading twice
     on 2026-08-20 (it went 44px → 68px, and 700 → 800 weight) — undoing that to
     close the gap would be answering yesterday's note with today's. The gap closes
     from BELOW: 19 → 25px, weight 700, and the heading hue so it reads as structure
     rather than as emphasis. Ratio to the h2 goes 3.6× → 2.7×; to body, 1.3× → 1.6×. */
  .f h3{font-size:25px;font-weight:700;letter-spacing:-.021em;margin-bottom:10px;color:var(--heading)}
  .f p{color:var(--text-soft);font-size:15.5px}

  /* ==========================================================================
     THE TWO TRACKS — founder, 2026-08-21: "we have compnay and burear and base on
     our capability now we under marketng ourself."

     ⭐ WHY THIS BAND EXISTS. The page sold a calculator. Everything that made 2026
     — a second seat, a sealed handoff, a locked month, ten companies on one key —
     lived in ONE panel buried inside Features and ONE bullet in the pricing table.
     `docs/strategy/MARKETING-MOTION.md` §4 records that the accounting practice is
     the ✅ PROVEN discovery channel (it produced the only customer this business
     has), so the practice deserves a door on the page, not a footnote.

     ⛔ BOTH RAILS ARE EMERALD, AND THAT IS DELIBERATE — do not "helpfully" make the
     bureau one gold. Rule 2 fixes the vocabulary: emerald = the PEOPLE side, gold =
     the STATE side. Neither track is the state, so colouring them differently would
     make one hue mean two things on one screen — the exact fault rule 2 was written
     after. They are told apart by icon, label and copy; the bureau card carries a
     TINT of the same hue, which is value, not a new colour (rule 4). */
  /* auto-fit so THREE tracks fall 3 -> 2 -> 1 on their own; the old fixed 2-col
     rule plus a 860px break skipped the 2-up stage entirely once a third card
     landed. min(290px,100%) is the guard that stops a 290px column overflowing a
     narrower phone. */
  .tracks{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr));gap:20px}
  /* PRESENTATION SLIDE — one idea, few words, a picture carrying the explaining.
     Founder, 2026-08-21: "make it look like a presentation but its selling
     something, a nice flow." Same auto-fit + min() guard as .tracks so it folds
     to one column without a media query. */
  .slide{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr));gap:clamp(28px,4vw,52px);align-items:center}
  .slide h2{font-size:clamp(34px,4.6vw,54px);line-height:1.04;letter-spacing:-.032em;margin:10px 0 16px}
  .slide-lead{font-size:17.5px;line-height:1.6;color:var(--text-soft);max-width:44ch;margin-bottom:24px}
  .slide-price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:22px}
  .slide-price .amt{font-size:42px;font-weight:800;letter-spacing:-.03em;color:var(--gold-deep)}
  .slide-shot{border-radius:16px;overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line)}
  .slide-shot img{display:block;width:100%;height:auto}
  .track{background:var(--paper-card);border:1px solid transparent;border-radius:20px;padding:32px 30px;
    box-shadow:var(--shadow-sm);display:flex;flex-direction:column;position:relative;overflow:hidden;transition:.25s}
  .track:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:rgba(11,110,102,.45)}
  .track::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--emerald)}
  .track.bu{background:linear-gradient(180deg,var(--emerald-soft),var(--paper-card) 34%)}
  .track .tk{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:700;letter-spacing:.11em;
    text-transform:uppercase;color:var(--emerald);margin-bottom:14px}
  .track h3{font-size:30px;font-weight:700;letter-spacing:-.024em;margin-bottom:10px}
  .track .tsub{color:var(--text-soft);font-size:15.5px;margin-bottom:18px}
  .track ul{list-style:none;display:flex;flex-direction:column;gap:10px;font-size:15px;color:var(--text-soft);margin-bottom:24px}
  .track li{position:relative;padding-left:27px}
  .track li svg{position:absolute;left:0;top:4px;color:var(--emerald)}
  .track li b{color:var(--text);font-weight:700}
  .track .btn{margin-top:auto;align-self:flex-start}
  .tracks-foot{text-align:center;margin-top:26px;font-size:14.5px;color:var(--text-soft)}

  /* pricing */
  .price-bg{background:linear-gradient(180deg,#f7f4ee,#fbf8f2 50%,#f7f4ee)}
  .prices{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:stretch}
  @media(max-width:980px){.prices{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:520px){.prices{grid-template-columns:1fr}}
  .p{background:linear-gradient(180deg,#ffffff,#fbfcfd);border:1px solid transparent;border-radius:18px;padding:26px;display:flex;flex-direction:column;position:relative;box-shadow:var(--shadow-sm)}
  .p.feat-card{border-color:var(--gold);box-shadow:0 18px 44px rgba(184,137,58,.20)}
  /* ⭐ Two deliberate exceptions to the no-border rule above, both because the
     border MEANS something rather than merely fencing the box in: the featured
     price card (its edge is the only thing saying "this one") and the FAQ rows,
     which are a LIST, not cards - rule 10, a different KIND of thing gets a
     different treatment. Rows take a hairline and no shadow; a stack of ten
     shadowed cards is the boxiest thing a page can do. */
  .tag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:linear-gradient(145deg,#e3c074,#b8893a);color:#1a1407;
    font-size:11.5px;font-weight:700;padding:5px 14px;border-radius:100px;letter-spacing:.04em}
  .p .pn{font-family:"Bricolage Grotesque";font-weight:700;font-size:26px;letter-spacing:-.02em;color:var(--heading)}
  .p .amt{font-size:34px;font-family:"Bricolage Grotesque";font-weight:700;margin:12px 0 2px}
  .p .amt small{font-size:14px;color:var(--muted);font-weight:500;font-family:"Hanken Grotesk"}
  .p .cap{color:var(--text-faint);font-size:13.5px;min-height:38px}
  .p ul{list-style:none;margin:18px 0 22px;display:flex;flex-direction:column;gap:10px;font-size:14.5px;color:var(--text-soft)}
  .p li{position:relative;padding-left:26px}.p li svg{position:absolute;left:0;top:3px;color:var(--gold-deep)}
  .p .btn{justify-content:center;width:100%;margin-top:auto}

  /* screens gallery */
  .screens{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  @media(max-width:860px){.screens{grid-template-columns:1fr}}
  .shot{background:linear-gradient(180deg,#ffffff,#fbfcfd);border:1px solid transparent;
    border-radius:var(--radius);overflow:hidden;transition:.25s;box-shadow:var(--shadow-sm)}
  .shot:hover{border-color:rgba(184,137,58,.55);transform:translateY(-4px);box-shadow:var(--shadow)}
  .shot img{display:block;width:100%;height:auto;border-bottom:1px solid var(--line)}
  .shot .cap{padding:14px 18px}
  .shot .cap b{display:block;font-size:18px;font-weight:700;letter-spacing:-.015em;color:var(--heading);margin-bottom:4px}
  .shot .cap span{font-size:13px;color:var(--text-soft)}

  /* FAQ */
  .faq{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
  .faq details{background:var(--paper-card);border:1px solid var(--line);border-radius:14px;padding:0 20px}
  .faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px;
    padding:19px 0;font-weight:700;font-size:17.5px;color:var(--heading)}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:"+";color:var(--gold-deep);font-size:20px;font-weight:600;transition:transform .2s}
  .faq details[open] summary::after{transform:rotate(45deg)}
  .faq details p{color:var(--text-soft);font-size:14.5px;padding:0 0 17px;max-width:660px}

  /* CTA band */
  .band{position:relative;border-radius:26px;overflow:hidden;box-shadow:var(--shadow-sm);background:linear-gradient(135deg,#ffffff,#eef3f6);border:1px solid transparent;padding:56px 40px;text-align:center}
  .band h2{font-size:clamp(28px,4vw,40px)}
  .band p{color:var(--text-soft);font-size:17px;margin:14px auto 28px;max-width:520px}
  .band .cta-row{justify-content:center}

  /* footer */
  footer{border-top:1px solid var(--line-2);background:var(--paper-2);padding:54px 0 34px;color:var(--text-soft);font-size:14px}
  .foot-grid{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;margin-bottom:34px}
  .foot-grid a{color:var(--text-soft)}.foot-grid a:hover{color:var(--emerald)}
  .foot-col h4{color:var(--heading);font-size:15.5px;font-weight:700;margin-bottom:12px;font-family:"Bricolage Grotesque"}
  .foot-col div{margin-bottom:8px}
  .foot-bottom{border-top:1px solid var(--line-2);padding-top:22px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--text-faint)}
  .ribbon{font-size:12.5px;color:var(--text-faint)}

  /* savings calculator */
  .calc{max-width:840px;margin:0 auto;background:linear-gradient(180deg,#ffffff,#fbfcfd);border:1px solid transparent;border-radius:20px;padding:30px 28px;box-shadow:var(--shadow-sm)}
  .calc .controls{display:flex;flex-direction:column;gap:16px;margin-bottom:24px}
  .calc .ctl{display:flex;align-items:center;gap:14px}
  .calc .ctl label{width:172px;font-size:14.5px;color:var(--text-soft)}
  .calc .ctl input[type=range]{flex:1;accent-color:var(--gold-deep)}
  .calc .ctl select{flex:1;background:var(--paper-card);border:1px solid var(--line);color:var(--text);border-radius:10px;padding:9px 12px;font:inherit;font-size:14px}
  .calc .ctl .out{min-width:78px;text-align:right;font-weight:700;font-variant-numeric:tabular-nums;color:var(--text)}
  .calc .results{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
  .calc .res{background:var(--gold-soft);border:1px solid rgba(184,137,58,.30);border-radius:14px;padding:16px 18px}
  .calc .res .lbl{font-size:13px;color:var(--text-soft)}
  .calc .res .val{font-family:"Bricolage Grotesque";font-weight:700;font-size:28px;margin-top:4px}
  .calc .res.money .val{color:var(--emerald)}
  .calc .foot{margin-top:18px;font-size:13px;color:var(--text-faint);line-height:1.6}
  @media(max-width:620px){.calc .results{grid-template-columns:1fr}.calc .ctl label{width:128px}}

  /* manual vs Brawta comparison */
  .cmp-wrap{max-width:840px;margin:0 auto;background:linear-gradient(180deg,#ffffff,#fbfcfd);border:1px solid transparent;border-radius:16px;overflow:hidden;box-shadow:var(--shadow-sm)}
  .cmp{width:100%;border-collapse:collapse}
  .cmp th,.cmp td{padding:14px 18px;text-align:left;font-size:15px;border-bottom:1px solid var(--line)}
  .cmp thead th{font-family:"Bricolage Grotesque";font-weight:700;font-size:15px;letter-spacing:-.01em;color:var(--heading);background:var(--paper-2)}
  .cmp td:first-child{color:var(--text)}
  .cmp td:nth-child(2){color:var(--text-soft);font-variant-numeric:tabular-nums}
  .cmp th:nth-child(3),.cmp td:nth-child(3){color:var(--emerald);font-weight:700;background:var(--emerald-soft);font-variant-numeric:tabular-nums}
  .cmp tr:last-child td{border-bottom:none}
  .cmp tr.total td{font-weight:700;color:var(--text);font-size:15.5px;border-top:2px solid var(--line)}
  .cmp tr.total td:nth-child(3){color:var(--green)}
  .cmp-foot{text-align:center;color:var(--text-soft);font-size:14.5px;margin-top:18px}
  .cmp-foot strong{color:var(--gold-deep)}
  @media(max-width:560px){.cmp th,.cmp td{padding:11px 12px;font-size:13px}}

  /* encrypted off-site backup opt-in — secondary, dashed = optional add-on, reinforces "your data stays yours" */
  .cloud-soon{display:inline-flex;align-items:center;gap:10px;margin-top:20px;padding:10px 16px;border:1px dashed rgba(184,137,58,.55);border-radius:100px;background:var(--gold-soft);font-size:13.5px;color:var(--text-soft);transition:.2s}
  .cloud-soon:hover{border-color:var(--gold);background:#f0e6d4;transform:translateY(-1px)}
  .cloud-soon .cs-ic{color:var(--gold-deep);display:grid;place-items:center;flex:none}
  .cloud-soon b{color:var(--text);font-weight:600}
  .cloud-soon .cs-link{color:var(--gold-deep);font-weight:600;white-space:nowrap}
  @media(max-width:520px){.cloud-soon{flex-wrap:wrap}}