/* ══════════════════════════════════════════════════════════════════════════════════════════════
   AegorIQ — the design system. ONE file. Hand-maintained, not generated.

   WHY THIS EXISTS (2026-10-17). Fifty-six of fifty-seven pages carried their own inline <style>:
   573KB of CSS, no shared stylesheet, and the same selectors defined differently page to page.
   `body` had thirteen definitions, `:root` twelve, `h1` thirteen. Three whole design systems were
   live at once, and the four legal documents were on a different one from the rest of the site.
   See SITE-CSS-AUDIT-2026-10-17.md for the measurements and for the two automated extractions
   that were tried and reverted.

   The tokens, type and components below are transcribed from the approved v4 design, not salvaged
   from the old pages. That is deliberate: there was no single system to salvage.

   HOW TO WORK ON IT
   · Change something shared HERE, never on a page. A rule that must be identical in fifty-six
     places is a rule that will not be.
   · A page keeps inline CSS only for what is genuinely its own, and that should be rare.
   · Before and after any change, run the render harness. It catches what reading cannot:
         node tools/render-pages.js /tmp/before
         ...change...
         node tools/render-pages.js /tmp/after
         node tools/compare-renders.js /tmp/before /tmp/after
   · The marketing components (hero, product cards, steps, reviews, CTA band) transcribe from the
     v4 mockup as each marketing page is converted. They are deliberately not here yet: an unused
     component is a component nobody checked.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── tokens ─────────────────────────────────────────────────────────────────────────────────── */
:root{
  --ink:#132631;        /* body text, and the darkest surface that still carries text */
  --deep:#101f29;       /* the dark band: hero, footer */
  --teal:#126d72;       /* the one action colour */
  --teal-dark:#095b60;  /* its hover */
  --aqua:#5ac8bb;
  --mint:#d9f0e9;
  --gold:#cda77b;--gold-line:#e5bf8b;       /* accent and focus ring, never an action */
  --gold-ink:#8a6228;   /* gold is too pale to carry text; this is its readable form */
  --warn:#a8453c;       /* the one caution colour, and only in the documents */
  --warn-soft:#fbf1ef;
  --gold-soft:#fcf6ee;
  --paper:#fbfaf7;      /* page */
  --soft:#f0f5f2;       /* raised panel on paper */
  --line:#dce5e1;
  /* 2% darker than the mockup's #65777d, which measured 4.48:1 on paper and missed AA by a
     hair. This carries the "last updated" line and every table heading in the documents. */
  --muted:#5b6d72 /* was #63757a; see note below */;

  --sans:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --display:Manrope,var(--sans)
/* ⚠️ --muted DARKENED 2026-10-18, from #63757a to #5b6d72, and it is an accessibility fix rather
   than a taste one. Secondary text is the single most-used colour on the site, and at #63757a it
   measured 4.37:1 against --soft and 4.04:1 against --mint: both below the 4.5:1 WCAG 2.2 AA
   minimum for normal text. We sell an accessibility check that names colour contrast as a
   finding, so failing it on our own pricing table is the one bug a sceptical reader would most
   enjoy pointing at. The new value is the SMALLEST darkening that clears 4.5:1 against every
   surface the palette puts it on: --soft 4.92, --paper 5.19, white 5.42, --mint 4.54.
   Changing the token rather than the places it is used means every page gets the fix at once,
   which is the whole reason the token exists. */;

  --wrap:1230px;
  --gutter:36px;
}

/* ── base ───────────────────────────────────────────────────────────────────────────────────── */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.65}

h1,h2,h3,h4{font-family:var(--display);letter-spacing:-.045em;line-height:1.14}
/* ⚠️ CAPPED 2026-10-18, from clamp(3rem,6.1vw,6.3rem). That upper bound was drawn for a hero
   headline and this is the DEFAULT, so it landed on every page with no rule of its own: 88px
   type inside a `.sec-head` capped at 52ch rendered "Australian businesses who decided to find
   out." on six lines, and did the same on featured, trust-playbook and four guides.
   Nothing loses its big headline: the homepage hero (.hb-copy h1), the advisory hero (.hero h1),
   the tier pages (.thero h1) and the trust wall (.tw-hero h1) all set their own size and are
   unaffected. This only changes pages that were never given one, which is exactly the set that
   was too big. Measured after the change: no page's headline wraps past three lines. */
h1{font-size:clamp(2.3rem,4.4vw,3.6rem);margin:19px 0 22px;max-width:790px}
h2{font-size:clamp(2.1rem,4vw,4rem);margin:12px 0 22px}
h3{font-size:1.3rem}
p{margin:0 0 18px}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
/* Gold, not teal: the focus ring must not read as a button. */
a:focus-visible,button:focus-visible{outline:3px solid var(--gold);outline-offset:4px}

.wrap{max-width:var(--wrap);margin:auto;padding:0 var(--gutter)}
.eyebrow{text-transform:uppercase;letter-spacing:.18em;font-size:.76rem;font-weight:800;color:var(--teal)}
.eyebrow.light{color:#a9ddd3}
.muted{color:var(--muted)}
.pill{display:inline-block;border:1px solid #b9d8cf;padding:5px 12px;border-radius:20px;
  font-size:.75rem;color:#276f6b;font-weight:700;margin-bottom:10px}

/* ── buttons ────────────────────────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:20px;justify-content:center;background:var(--teal);
  color:#fff;border-radius:8px;padding:15px 24px;font-weight:700;font-size:.91rem;
  transition:transform .2s,background .2s}
.btn:hover{transform:translateY(-2px);background:var(--teal-dark)}
.btn.gold{background:#d7b78b;color:#192c32}
.btn.gold:hover{background:#e9c79a}
.btn.outline{background:transparent;border:1px solid #9fb5b2;color:#fff}
.btn.ghost{background:#e5f0ec;color:#175d61}
@media(prefers-reduced-motion:reduce){.btn:hover{transform:none}}

/* ── header and footer ──────────────────────────────────────────────────────────────────────── */
.top-strip{background:#dceee7;color:#174c4e;text-align:center;font-size:.78rem;padding:9px 18px;font-weight:700}
.top-strip a{text-decoration:underline;text-underline-offset:3px}

.header{position:sticky;top:0;z-index:20;background:rgba(251,250,247,.95);
  backdrop-filter:blur(16px);border-bottom:1px solid #e4e9e5}
.header-in{display:flex;align-items:center;justify-content:space-between;gap:22px;min-height:78px}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
/* The identity is artwork, never rebuilt out of text. */
.brand-official{display:block;width:190px;max-width:100%;height:auto;object-fit:contain}
.footer .brand-official{width:205px}
.nav{display:flex;align-items:center;gap:26px;font-size:.87rem;font-weight:700}
.nav a:hover,.footer a:hover{color:var(--teal)}
.nav .btn{color:#fff}
/* ⚠️ THIS RULE EXISTED FOR MONTHS WITH NOTHING TO STYLE. The responsive block below hides .nav
   under 760px and reveals .menu-button, but no page carried a menu-button element and nothing
   toggled .nav.open, so on a phone the navigation was simply gone: eight links, none reachable,
   on all 47 pages. A rule that styles an element the markup never contains fails silently, which
   is why a gate now asserts the control exists on every page that has a nav.

   It is an <input type="checkbox"> rather than a <button> on purpose: this site has no shared
   JavaScript file, and the one control a visitor needs to move around the site must not be the
   thing that depends on adding one. Space toggles it, it is labelled for screen readers, and the
   sibling selector below opens the nav. */
.menu-button{display:none;appearance:none;-webkit-appearance:none;margin:0;flex:0 0 auto;
  width:44px;height:44px;border:0;background:transparent;cursor:pointer;position:relative}
.menu-button::before{content:"\2630";font-size:25px;line-height:44px;display:block;
  text-align:center;color:var(--ink)}
.menu-button:checked::before{content:"\2715";font-size:21px}
.menu-button:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:9px}

.footer{background:var(--deep);color:#e4ecea;padding:76px 0 28px}
.footer-grid{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:70px}
.footer-desc{color:#aabdc0;font-size:.85rem;max-width:380px;margin-top:25px}
.footer h4{color:#96aeb1;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;margin:5px 0 20px}
.footer-links{display:grid;gap:11px}
.footer-links a{font-size:.82rem;color:#e1e9e9}
.footer-links span{opacity:.4;font-size:.7rem}
.footer-bottom{border-top:1px solid #30424c;margin-top:65px;padding-top:25px;color:#91a3a8;font-size:.72rem}
.footer-bottom p{margin-bottom:10px}

/* ── the document pages ─────────────────────────────────────────────────────────────────────────
   Privacy policy, terms, client agreement, refund policy, badge terms.

   These are the pages that were on their own dark navy system with Playfair Display, so a customer
   clicking "Privacy Policy" in the footer landed on what looked like another company. They are
   long-form reading, not marketing: the display scale above is far too large for a numbered clause,
   so the document resets it rather than inheriting it. Measure is capped near 70 characters because
   these are the pages people actually have to read carefully. */
.doc{max-width:812px;margin:auto;padding:0 var(--gutter) 90px}
.doc-header{border-bottom:1px solid var(--line);padding:56px 0 30px;margin-bottom:44px}
.doc-tag{display:inline-block;background:var(--mint);color:#17605d;font-size:.7rem;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;padding:6px 12px;border-radius:100px}
.doc h1{font-size:clamp(2.1rem,4.6vw,3.1rem);margin:18px 0 10px;max-width:none}
.doc .updated{color:var(--muted);font-size:.84rem;margin:0}

.doc h2{font-size:1.42rem;margin:52px 0 14px;letter-spacing:-.025em}
.doc h3{font-size:1.06rem;margin:30px 0 10px;letter-spacing:-.02em}
.doc p,.doc li{font-size:.97rem;line-height:1.78;color:#27383f}
.doc ul,.doc ol{margin:0 0 18px;padding-left:22px}
.doc li{margin-bottom:9px}
.doc a{color:var(--teal);text-decoration:underline;text-underline-offset:3px}
.doc strong{font-weight:700;color:var(--ink)}

.doc .back{display:inline-block;margin:34px 0 0;font-size:.85rem;font-weight:700;color:var(--teal)}

/* A statement the reader must not skim past. Left rule rather than a filled box: a tinted block
   reads as an aside, and these are the opposite of an aside. */
.doc .highlight-box{background:var(--soft);border-left:3px solid var(--teal);
  padding:22px 26px;margin:30px 0;border-radius:0 8px 8px 0}
.doc .highlight-box p:last-child{margin-bottom:0}
.doc .label{display:block;font-family:var(--display);font-weight:800;font-size:.78rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--teal);margin-bottom:8px}

/* Two variants, used where the documents already called for them. The rule changes colour and the
   fill follows it; the shape never changes, so a reader learns one object rather than three.
   `warning` carries a limitation or an exclusion. `gold` carries a term that costs money. */
.doc .highlight-box.warning{background:var(--warn-soft);border-left-color:var(--warn)}
.doc .highlight-box.warning .label{color:var(--warn)}
.doc .highlight-box.gold{background:var(--gold-soft);border-left-color:var(--gold)}
/* Not --gold: at 4.5:1 against the tint it fails, and these labels are the ones that matter. */
.doc .highlight-box.gold .label{color:var(--gold-ink)}

/* Contents list, on the client agreement. A panel is right here where it is wrong for the
   highlight box: this genuinely is an aside, and the reader skips past it once. */
.doc .toc{background:var(--soft);border:1px solid var(--line);border-radius:10px;
  padding:24px 28px;margin:0 0 42px}
.doc .toc-label{display:block;font-family:var(--display);font-weight:800;font-size:.72rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--teal);margin-bottom:14px}
.doc .toc ol{margin:0;padding-left:20px}
.doc .toc li{margin-bottom:7px;font-size:.92rem}
.doc .toc a{color:#27383f;text-decoration:none}
.doc .toc a:hover{color:var(--teal);text-decoration:underline;text-underline-offset:3px}

/* The clause number in a heading. Tinted so the eye can run down the numbers alone. */
.doc .section-num{color:var(--teal);margin-right:7px}

/* Retention periods and the collection table. Left-aligned and ruled, not boxed: a grid of borders
   makes a legal table harder to read, not easier. */
.doc table{width:100%;border-collapse:collapse;margin:24px 0 30px;font-size:.92rem}
.doc th{text-align:left;font-family:var(--display);font-size:.74rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);font-weight:800;
  border-bottom:2px solid var(--line);padding:0 16px 10px 0}
.doc td{border-bottom:1px solid var(--line);padding:14px 16px 14px 0;vertical-align:top;
  line-height:1.65;color:#27383f}
.doc td:last-child,.doc th:last-child{padding-right:0}
.doc tr:last-child td{border-bottom:0}

/* The document pages carry a plain <nav> and <footer> rather than the marketing header and the
   four-column footer. That is right for them: a terms page does not need a sticky nav and a
   product menu competing with the clause the reader is trying to follow. Styled on the bare
   elements so these pages need no extra classes. */
body:has(.doc) > nav{display:flex;align-items:center;justify-content:space-between;gap:20px;
  max-width:var(--wrap);margin:auto;padding:22px var(--gutter);border-bottom:1px solid var(--line)}
body:has(.doc) > nav .back{font-size:.85rem;font-weight:700;color:var(--teal)}
body:has(.doc) > nav .back:hover{color:var(--teal-dark)}
/* The mark is artwork and carries its own height inline. These pages ask it to stay on the
   baseline and not shrink when the "Back to home" link is long. Worth noting why it changes
   at all: these pages served logo-dark.png, which is near-black, on a near-black navy nav. The
   asset was always right and the background was always wrong. */
body:has(.doc) > nav .logo{display:flex;align-items:center;flex-shrink:0}
body:has(.doc) > nav .logo img{display:block;width:auto}
body:has(.doc) > footer{background:var(--deep);color:#9fb3b6;font-size:.78rem;padding:34px 0;text-align:center}
body:has(.doc) > footer p{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
body:has(.doc) > footer a{color:#cfe0dd;text-decoration:none}
body:has(.doc) > footer a:hover{color:#fff;text-decoration:underline}


/* ══ THE MARKETING COMPONENTS ═══════════════════════════════════════════════════════════════════
   Transcribed 2026-10-17 from the approved v4 design, which turned out to be a full marketing
   page rather than the report its filename suggested. Values are v4's own; the exceptions are
   noted inline and are two contrast fixes and two merged duplicates.

   NOTHING ON THE SITE USES THESE YET. They are here because pricing.html is the next page to
   convert and these are the parts it needs. If a component below is still unused by the time the
   conversion finishes, delete it rather than leave it: an unused component is one nobody checked.

   WHAT v4 DOES NOT COVER, and will therefore be designed rather than copied: the pricing
   comparison table, the trust ladder and its badge tiers, and the FAQ. Those are not here yet.
   ═════════════════════════════════════════════════════════════════════════════════════════════ */
/* The hero. Dark teal band, gold second line, artwork to the right. */
/* ── THE DARK BANNER ─────────────────────────────────────────────────────────────────────────
   Melanie, 2026-10-18: "I like the font size and colour etc on the prototype banners, the gold
   and teal, the arrangements and format looks cleaner and more professional."

   So the banner is now her AegorIQ_Pricing_Page_Hover_Cards_v2 treatment, exactly: a teal glow
   dropped into the top-right of a navy gradient, a pale-aqua eyebrow, and the second line of the
   headline in gold. The flat `var(--deep)` fill it replaces was mine, not hers.

   ONE treatment for every dark banner, not one per page. Her prototypes each use a slightly
   different gradient (120deg on advisory, 125deg on the builder, a radial on the trust wall).
   Shipping four near-identical navies is what makes a site look assembled rather than designed,
   and the consistency is most of what reads as "more professional". This is the one she pointed
   at, so it is the one they all get. */
.hero{background:radial-gradient(circle at 87% 12%,#255b59 0,transparent 33%),
                linear-gradient(125deg,#11232e,#142f37);
      color:#fff;position:relative;overflow:hidden}

/* ⚠️ THE GLOW IS IN THE BACKGROUND NOW, so the old `:before` glow is gone rather than stacked on
   top of it: two radial teals over one another turned the right half of the banner muddy.
   The ring stays, but pushed mostly off-canvas, as in her prototypes. At `right:13%;top:12%` it
   sat across the middle of the headline and struck through the word it crossed. */
.hero:after{content:'';position:absolute;width:590px;height:590px;border:1px solid #ffffff1f;
  border-radius:50%;right:-190px;top:-210px;pointer-events:none}
/* Her banner's rhythm. Pages that use a plain `.wrap` inside the banner got no vertical padding
   at all, so the eyebrow sat hard against the top edge. */
.hero>.wrap{padding-block:83px 94px;position:relative;z-index:1}
.hero .breadcrumb{margin-bottom:26px;color:#9fc0c4;font-size:.84rem}
.hero .breadcrumb a{color:#c6d5d5}
/* ON A DARK BANNER THE SOLID TEAL BUTTON DISAPPEARS. `.btn` is --teal on --teal-ish navy, which
   measured barely above the background. The banner's primary action goes light, and the
   secondary becomes an outline, which is also what her prototypes show. */
.hero .btn{background:#eaf5f2;color:#0e3b40;border-color:#eaf5f2}
.hero .btn:hover{background:#fff;color:#0b2d31}
.hero .btn.gold{background:var(--gold);color:#192c32;border-color:var(--gold)}
.hero .btn.gold:hover{background:#e9c79a;color:#192c32;border-color:#e9c79a}
.hero .btn.ghost,.hero .btn-quiet,.hero .btn.outline{background:transparent;color:#fff;border:1px solid #ffffff5c}
.hero .btn.ghost:hover,.hero .btn-quiet:hover,.hero .btn.outline:hover{background:#ffffff1f;border-color:#fff}
/* v4 declared this twice, the second overriding the columns and gap. Merged: same result. */
/* HER ADVISORY HERO, single column (AegorIQ_Digital_Trust_Advisory_Invoice_Only, 2026-10-18).
   The headline cap is the whole point: without `.hero h1` the global clamp(3rem,6.1vw,6.3rem)
   applies, which is ~113px on a wide screen and wrapped this hero's sentence onto five lines.
   Her prototype caps it at 74px over a 920px measure. Values are hers; the accent is --aqua
   rather than her literal #91d5ce, which is the same colour the palette already names. */
.hero-inner{padding:96px 0;position:relative;z-index:1;max-width:var(--wrap);margin:0 auto}
/* Her banner headline: bigger than the page default on purpose, over an 880px measure. The
   global h1 stays at its capped size, so this does not undo last night's six-line-headline fix. */
.hero h1{font-size:clamp(2.9rem,5.6vw,5.6rem);letter-spacing:-.045em;line-height:1.06;margin:16px 0 22px;max-width:880px}
/* THE GOLD LINE. Her banners put the second line of the headline in gold against the navy. The
   value is her #e5bf8b, which is --gold lifted for a dark surface: --gold itself (#cda77b) is
   mixed for pale backgrounds and goes muddy here. */
.goldline{color:var(--gold-line)}
.hero h1 em{font-style:normal;color:var(--gold-line)}
.hero .lede,.hero>.wrap>p{max-width:700px;color:#c6d5d5;font-size:1.12rem}
@media(max-width:860px){
  .hero-inner{padding:66px 0 70px}
  .hero h1{font-size:clamp(2.1rem,8.6vw,2.9rem)}
}
.hero-grid{min-height:665px;display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
  gap:42px;align-items:center;position:relative;padding-top:75px;padding-bottom:85px}
.hero .lede{font-size:1.13rem;color:#d0dedb;max-width:560px}
.hero .accent{color:#d8b787}
.hero-actions{display:flex;flex-wrap:wrap;gap:13px;margin-top:31px}
.hero-note{font-size:.75rem;color:#aac1bf;margin-top:20px}
.visual{position:relative;min-height:440px;display:grid;place-items:center;overflow:visible}
.report-official{display:block;width:160px;height:auto;max-width:100%;margin-bottom:12px}
.actual-report-frame{position:relative;width:100%;max-width:680px;background:#fff;border:1px solid rgba(255,255,255,.3);border-radius:17px;padding:9px;box-shadow:0 32px 85px rgba(0,0,0,.4);transform:perspective(1300px) rotateY(-5deg) rotateZ(1deg);transition:transform .35s ease}
.actual-report-frame:hover{transform:perspective(1300px) rotateY(0) rotateZ(0)}
.actual-report-frame img{display:block;width:100%;height:auto;max-height:435px;object-fit:cover;object-position:top left;border-radius:10px}
.actual-report-caption{position:absolute;bottom:-18px;right:20px;background:#d8eee8;color:#145451;padding:9px 15px;border-radius:7px;font-size:.72rem;font-weight:800;box-shadow:0 10px 24px #0003}

/* The one-line strip under the hero that states the independence principle. */
.trust-band{background:#eaf1ed;padding:35px 0;border-top:1px solid #dbe8e1;border-bottom:1px solid #dbe8e1}
.trust-band .wrap{display:flex;align-items:center;justify-content:space-between;gap:30px}
.trust-band strong{font-family:var(--display);font-size:1.06rem}
/* #647674 in the mockup measured 4.17:1 here, just under AA. Darkened 4%. */
.trust-band p{margin:0;color:#5e6f6d;font-size:.84rem}

/* Section scaffolding: the eyebrow, the heading, the intro paragraph, a 2-up grid. */
.section{padding:105px 0}
.section-intro{max-width:700px;margin-bottom:44px}
.section-intro p{color:var(--muted);font-size:1.02rem}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
/* ⚠️ A PAGE TITLE IS NOT A SECTION INTRO. `.sec-head` is a reading measure, 46ch to 52ch, which
   is right for the paragraph under a section heading and wrong for the h1 it also wraps on
   several pages: an h1 inside it was being squeezed to ~420px, so "Australian businesses who
   decided to find out." set at 88px ran to six lines, and featured, trust-playbook and
   trust-badge did the same.
   `:has(h1)` targets only the ones that carry a page title and leaves every section intro alone.
   Two classes of specificity, so it beats the page-local `.sec-head{max-width:46ch}` that loads
   after this file. The h1's own max-width:790px still does the limiting. */
.sec-head:has(h1){max-width:none}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:30px}
.section-head h2{margin-bottom:0}
/* STACKED VARIANT. The flex default puts a heading and a line of text side by side, which is
   right for two children and wrong for three: eyebrow, heading and paragraph split into three
   columns and the heading ends up marooned in the middle. Melanie's prototypes stack this header
   wherever it carries all three. Written as a MODIFIER on the existing component rather than a
   new `.section-title`, because dashboard.html and sample-report.html already use that name for
   something of their own, and a third meaning for one class name is the collision that put a
   dark panel behind the website audit buttons. */
.section-head.stacked{display:block}
.section-head.stacked h2{margin:14px 0 0;max-width:22ch}
.section-head.stacked p{margin-top:16px;max-width:68ch;color:#3f5157}

/* The two service cards. `.alt` is the mint one. */
.product-card{background:#fff;border:1px solid var(--line);padding:39px;border-radius:15px;min-height:370px;display:flex;flex-direction:column;align-items:flex-start;box-shadow:0 12px 35px #13263108}
.product-card.alt{background:#eaf2ee}
.product-icon{width:58px;height:58px;border-radius:14px;background:#d7efe8;display:grid;place-items:center;color:#176f71;font-size:27px}
.product-card h3{font-size:1.8rem;margin:25px 0 13px}
.product-card p{color:#5b6c70}
.product-card .price{margin-top:auto;padding-top:24px;font-size:.8rem;font-weight:800;color:var(--teal)}
.product-card .btn{margin-top:18px}

/* The four-across numbered columns, each with a rule above it. */
.principles{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.principle{border-top:2px solid #9bbdb6;padding-top:24px}
.principle .number{font-size:.75rem;color:var(--teal);font-weight:800}
.principle h3{font-size:1.3rem}
.principle p{font-size:.91rem;color:var(--muted)}

/* Numbered cards, 01 / 02 / 03. Used on the dark band. */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:38px}
.step{background:#1a3640;padding:30px;border:1px solid #3b5a5d;border-radius:12px}
.step b{font-size:2.1rem;color:#8acfc2}
.step h3{margin:17px 0 10px}
.step p{color:#bed0cf;font-size:.9rem}

/* The dark band itself, and what it does to the eyebrow and muted text inside it. */
.dark-section{background:#122833;color:#fff}
.dark-section .muted{color:#b8c8c8}
.dark-section .eyebrow{color:#8bd6c6}

/* Customer reviews, with the attribution block and the disclaimer under them. */
.reviews-section{background:#f3f5f0}
.reviews{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.review-card{display:flex;flex-direction:column;background:#fff;border:1px solid #e1e7e1;border-radius:15px;padding:30px;box-shadow:0 9px 28px #10262a08}
.review-top{display:flex;align-items:center;gap:17px;min-height:68px}
.company-logo{width:68px;height:68px;flex-shrink:0;border:1px solid #dce8e4;background:#f0f6f3;border-radius:12px;display:grid;place-items:center;font-family:var(--display);font-size:1.25rem;font-weight:800;color:#22696a}
.review-top h3{font-size:1.03rem;letter-spacing:-.025em;margin:0 0 5px}
.business-line{font-size:.78rem;color:#738383;margin:0}
.quote-mark{font-family:Georgia,serif;font-size:4.3rem;line-height:.75;color:#b3d7cc;margin-top:25px}
.review-card blockquote{font-size:.91rem;line-height:1.8;margin:6px 0 25px;color:#34494e;flex:1}
.review-bottom{border-top:1px solid var(--line);padding-top:18px;display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:.77rem}
.review-bottom small{display:block;color:#849392}
.verified{color:#5b8b82;font-size:.7rem}
.reviews-disclaimer{font-size:.76rem;color:#65777d;margin-top:15px}

/* The closing call to action. */
/* A ROW OF BUTTONS. Not `.cta` — that is the dark panel below, and four pages used the same
   name for this, which put a 65px teal panel behind two buttons the moment they started sharing
   a stylesheet. A row of buttons and a call-to-action panel are different components; they get
   different names. */
.btn-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:28px}
.cta{background:#194f52;color:#fff;border-radius:20px;padding:65px 7%;display:flex;align-items:center;justify-content:space-between;gap:30px}
.cta h2{max-width:660px;margin-bottom:14px}
.cta p{color:#d0e6e0;max-width:600px}

/* Links out to guides and the sample report. */
.resource-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
.resource{padding:22px;background:#fff;border:1px solid var(--line);border-radius:10px;display:flex;align-items:center;justify-content:space-between;gap:15px;font-weight:700;font-size:.91rem;transition:border-color .2s,transform .2s}
.resource:hover{border-color:#78b5aa;transform:translateY(-2px)}
.resource span{color:var(--teal)}

/* A feature block with artwork beside it. */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.feature-visual{min-height:320px;background:linear-gradient(145deg,#d6eae3,#f6eee2);border-radius:18px;display:grid;place-items:center;padding:40px}

/* The trust badge artwork as it appears inline on a page. */
.badge-art{width:230px;height:230px;border:1px solid #93b7a9;border-radius:50%;background:#fff;display:flex;flex-direction:column;justify-content:center;align-items:center;box-shadow:0 20px 50px #244a4930;text-align:center}
.badge-art .check{color:#218077;font-size:45px}
.badge-art b{font-size:1.45rem}
.badge-art small{font-size:.65rem;color:#66847e;text-transform:uppercase;letter-spacing:.1em}

@media(max-width:1000px){
  .hero-grid{gap:10px}
  .principles{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .hero-grid,.grid2,.feature{grid-template-columns:1fr}
  .hero-grid{padding-top:55px;padding-bottom:60px}
  .hero h1{font-size:clamp(3.1rem,13vw,4.7rem)}
  .visual{min-height:390px}
  .section{padding:75px 0}
  .principles,.steps,.reviews,.resource-grid{grid-template-columns:1fr}
  .trust-band .wrap,.section-head,.cta{flex-direction:column;align-items:flex-start}
  .review-card{padding:24px}
  .cta{padding:40px 30px}
  .feature{gap:28px}
}
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .actual-report-frame{transform:none;max-width:720px}
  .hero .visual{min-height:auto;padding-bottom:25px}
  .actual-report-frame img{max-height:none}
}


/* ══ PRICING AND ARTICLE COMPONENTS ═════════════════════════════════════════════════════════════
   Transcribed 2026-10-17 from the designer's two templates, which extend v4 and share 44
   selectors with it without a single conflicting definition.

   The handoff note that came with them sets the contract and it is worth restating here, because
   the next person to touch these will be tempted to take the prototype's content too:
     · Visible text is COPY-LOCKED. The live page is the only authoritative source. The brackets
       in the prototypes are design placeholders and must never ship.
     · The three plan cards are SLOTS. The live tiers fill them, however many there are.
     · The whole live comparison table travels across: its rows, counts, footnotes and responsive
       behaviour. Only the presentation comes from the prototype.
     · The badge circles in the prototype are DECORATIVE STAND-INS. The real trust badge is the
       SVG already on the live pages.
     · The prototype footers are abbreviated. The complete live footer stays.
     · Routes, hrefs, query strings, schema.org, canonical/OG tags and feature flags all stay.

   `.devflag`, the prototype's "not approved copy" marker, is deliberately NOT transcribed.

   ⚠️ `.footnote` is styled for a DARK surface: it has a white-at-15% top rule and #94a9ab text,
   which is 6.8:1 on the deep footer and 2.5:1 on paper. The live pricing page carries a footnote
   on paper, so that one needs a light variant rather than this class.
   ═════════════════════════════════════════════════════════════════════════════════════════════ */
/* The three plan cards. v4 had no pricing component; this is the designer's.
   `.plan.featured` is the raised middle card. The three cards are SLOTS: the live tiers
   fill them, even if there are not three of them. */
.pricing-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:-50px;position:relative;z-index:2}
/* TWO TIERS, NOT THREE (2026-10-18). The website audit sells Essentials and Deep Scan; Expert
   became Advisory Level 1 and is invoiced after a call, so it is no longer a card in a row of
   things you can buy. Two cards stretched across the full 1230px wrap read as a page with
   something missing, so the pair is centred at the width three cards would have filled. */
.pricing-grid.two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:840px;margin-left:auto;margin-right:auto}
/* ⚠️ AND IT MUST STACK. `.pricing-grid.two` is two classes, so it outranks the one-class
   `.pricing-grid` inside the 860px media query that stacks the cards. Without this line the two
   cards stayed side by side all the way down, 164px wide each at phone width. A modifier that
   silently cancels the responsive rule it sits next to is worse than no modifier. */
@media(max-width:860px){.pricing-grid.two{grid-template-columns:1fr;max-width:none}}
.plan{padding:32px;display:flex;flex-direction:column;min-height:485px}
.plan.popular{border:2px solid var(--teal);box-shadow:0 20px 65px #126d7220;transform:translateY(-9px)}
.plan-top{display:flex;justify-content:space-between;align-items:center}
.tag{font-size:.66rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--teal);background:#e4f4ef;padding:6px 10px;border-radius:20px}
.plan h3{font-size:1.65rem;margin:16px 0 8px}
.plan .subtitle{color:var(--muted);min-height:65px}
.price{font:800 3.5rem Manrope,sans-serif;letter-spacing:-.06em;margin:8px 0}
.price small{font-size:.8rem;letter-spacing:0;color:var(--muted)}
.plan .btn{width:100%;margin:18px 0 20px}
.plan ul{padding:0;margin:0;list-style:none}
.plan li{padding:11px 0;border-top:1px solid var(--line);font-size:.89rem}
.plan li:before{content:'✓';color:var(--teal);font-weight:800;margin-right:10px}

/* ⚠️ THESE BELONG TO THE CARD, SO THEY LIVE WITH THE CARD (moved out of pricing.html 2026-10-18).
   The shared .price sets one display size for the whole block, but the real markup splits the
   price into a small "AUD $" and a large number. Those two rules sat in pricing.html inline
   style. The moment Melanie website-audit prototype put the same cards on a second page, that
   page rendered "AUD $79" all at 3.5rem, because the rules that made it right were on the other
   page. A component used by two pages cannot keep half its styling on one of them. */
.plan .price{display:flex;align-items:baseline;gap:5px}
.plan .price .c{font-size:1rem;color:var(--muted);font-weight:500;letter-spacing:0}
.plan .price .n{font-size:3.2rem;line-height:1;font-variant-numeric:tabular-nums}
.plan .price-note{font-size:.79rem;color:var(--muted);margin-top:-2px}
.plan .plan-blurb{margin-top:16px;font-size:.95rem;line-height:1.65;color:#3f5157}
.plan .plan-hi{list-style:none;margin:18px 0 0;padding:0}
.plan .plan-more{display:inline-block;margin-top:22px;font-size:.92rem;font-weight:700;color:var(--teal);text-decoration:underline;text-underline-offset:4px}
.plan .plan-more:hover{color:var(--ink)}


/* The trust ladder and its three badge tiers. This is the section the homepage was
   missing and why it carried a provisional placeholder.
   The prototype's badge circles are DECORATIVE STAND-INS, per the handoff note. The real
   badge artwork is the SVG already on the live pages and that is what ships. */
.ladder{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.badge-card{padding:35px 28px;text-align:center}
.badge-icon{width:112px;height:112px;border-radius:50%;border:6px double #c8a778;background:radial-gradient(circle,#fff,#e7f3ee);display:grid;place-items:center;margin:0 auto 24px;color:var(--teal);font-weight:800;box-shadow:0 9px 24px #0c3e3420}
.badge-card h3{margin:0 0 10px}
.badge-card p{color:var(--muted);font-size:.91rem}
.note{background:#e8f2ef;border-left:3px solid var(--teal);padding:22px 26px;border-radius:6px;color:#335258;font-size:.9rem;margin-top:24px}

/* The tier comparison table. The live table's rows, counts and footnotes travel with
   it unchanged; only the presentation comes from here. Horizontal scroll is allowed
   inside the table and nowhere else on the page. */
.footnote{border-top:1px solid #ffffff25;margin-top:45px;padding-top:22px;font-size:.77rem;color:#94a9ab}
.comparison{overflow-x:auto;border-radius:18px;border:1px solid var(--line);background:#fff}
.comparison table{width:100%;border-collapse:collapse;min-width:760px}
.comparison th{text-align:left;background:#eaf3ef;padding:21px 22px;font-size:.82rem;letter-spacing:.04em}
.comparison td{padding:17px 22px;border-top:1px solid #e5ece8;font-size:.89rem}
.comparison th:not(:first-child),.comparison td:not(:first-child){text-align:center}
.comparison tr:nth-child(even){background:#fafcfb}
.comparison td:first-child{font-weight:700}

/* The closing call-to-action band. */
.cta-band{background:var(--deep);color:white;padding:62px;border-radius:22px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.cta-band h2{font-size:2.25rem;margin:0}
.cta-band p{color:#bfd3d0;margin:12px 0 0}
@media(max-width:860px){
  .pricing-grid,.ladder{grid-template-columns:1fr}
  .plan.popular{transform:none}
  .plan{min-height:0}
  .cta-band{padding:30px;display:block}
  .cta-band .btn{margin-top:20px}
}
@media (min-width: 861px){
  .pricing-grid { gap: 24px; align-items: stretch; padding: 18px 14px 24px; }
  .pricing-grid .plan { min-height: 445px; padding: 25px 23px; transform: scale(.955); transform-origin: center center; transition: transform .26s ease, box-shadow .26s ease, border-color .26s ease; position: relative; z-index: 0; }
  .pricing-grid .plan.popular { transform: scale(.955); }
  .pricing-grid .plan:hover, .pricing-grid .plan:focus-within { transform: scale(1.035); z-index: 3; box-shadow: 0 24px 65px rgba(10,51,57,.19); }
}
@media (prefers-reduced-motion: reduce){
  .pricing-grid .plan { transition: none !important; }
}

/* The long-form article shell: a two-column body with a sticky sidebar.
   Used by the 17 guides and the six privacy-policy explainers. Per the handoff, check a
   page's structure before applying it, and never inject a contents list into a page that
   does not intend one. */
.article-shell{display:grid;grid-template-columns:minmax(0,1fr) 275px;gap:70px;align-items:start}
/* `overflow-wrap:anywhere` is the second half of the phone-overflow fix below: the grid can no
   longer be pushed wide, so a long unbreakable token has to break instead of spilling out of it.
   These pages quote URLs, file paths and registry keys constantly, so this is the normal case. */
.article-body{max-width:760px;overflow-wrap:anywhere}
.article-body p{font-size:1.07rem;line-height:1.92;color:#374d55;margin-bottom:25px}
.article-body h2{font-size:2.2rem;margin:50px 0 19px}
.article-body h3{margin:34px 0 15px}
.article-body ul{padding-left:22px;line-height:1.9}
.article-body blockquote{border-left:4px solid var(--teal);margin:36px 0;padding:20px 28px;background:#eef6f1;border-radius:0 12px 12px 0;font-size:1.05rem}
.article-body a{color:var(--teal);text-decoration:underline;text-underline-offset:3px}
.article-body a.btn{color:#fff;text-decoration:none}
.article-body a.btn.ghost{color:#175d61;text-decoration:none}
.article-body a.btn.gold{color:#192c32;text-decoration:none}
.article-meta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;color:#a8c7c4;font-size:.86rem}
.article-meta span{border:1px solid #ffffff30;padding:6px 11px;border-radius:40px}
.side{position:sticky;top:115px}
.side .card{padding:26px;margin-bottom:18px}
.side h3{margin:0 0 20px}
/* ⚠️ `:not(.btn)` IS LOAD-BEARING. Unscoped, this rule wins over `.btn` on specificity (0,2,0 vs
   0,1,0) and repaints any button in a sidebar card teal-on-teal, with a stray underline rule and a
   border-bottom across it. It is invisible until a sidebar contains a button, which no page did
   until the guide conversion put a Free Scorecard card in every one of them. */
.side a:not(.btn){display:block;padding:10px 0;border-bottom:1px solid var(--line);font-size:.89rem;color:#456066}
.side a:not(.btn):hover{color:var(--teal)}
.breadcrumb{font-size:.84rem;color:#d0e0de;margin-bottom:28px}
.breadcrumb a{text-decoration:underline;text-underline-offset:4px}
.article-tools{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}

/* Callout, numbered check card, tier chip, and the related-guides grid. */
.links{display:flex;align-items:center;gap:28px;font-size:.88rem;font-weight:700}
.links a:hover{color:var(--teal)}
.card{background:white;border:1px solid var(--line);border-radius:18px;box-shadow:0 15px 40px #152f2a08}
.article-callout{padding:25px 29px;border-radius:14px;background:#e6f3ed;border:1px solid #cde4d8;margin:38px 0}
.article-callout .eyebrow{margin-bottom:9px}
.related{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.related .card{padding:26px;min-height:185px}
.related .card p{color:var(--muted);font-size:.88rem}
.chip{background:#e7f1ec;border-radius:30px;padding:8px 13px;font-size:.8rem;color:#26645e;font-weight:700}
@media(max-width:820px){
  .links{gap:12px;flex-wrap:wrap;justify-content:flex-end}
  .links a{font-size:.75rem}
  .links a:nth-child(1),.links a:nth-child(4){display:none}
}
@media(max-width:480px){
  .links a:nth-child(2){display:none}
}
@media(max-width:900px){
  /* ⚠️ minmax(0,1fr), NOT 1fr. A bare `1fr` is `minmax(auto,1fr)`, so a single unbreakable token
     in the prose — a long URL, a file path, a registry key — sets the column's min-content width
     and pushes the whole grid wider than the phone. The desktop rule above already guards this;
     this override dropped the guard and reintroduced it at exactly the width where it is worst.
     Found by the guide conversion: 1 of 32 captures scrolled sideways, on wp2shell-check. */
  .article-shell{grid-template-columns:minmax(0,1fr);gap:40px}
  .side{position:static}
  .related{grid-template-columns:1fr}
}


/* ⚠️ `.faqs` IS LOAD-BEARING MARKUP, NOT A STYLE HOOK. build-faq-schema.js finds a page's Q&As
   with the literal regex /<section class="faqs">/ and rewrites that page's FAQPage JSON-LD from
   them. The match is exact: adding a second class, reordering, or even adding an id makes it miss,
   and then the schema silently stops matching the page rather than failing. Verified by running
   the regex against all four variants.

   So the element keeps `class="faqs"` alone, and the section treatment is attached to that class
   here instead. Put the anchor on a wrapper, never on this element. */
.faqs{padding:105px 0}
.faqs > .wrap{max-width:var(--wrap);margin:auto;padding:0 var(--gutter)}

/* ── responsive ─────────────────────────────────────────────────────────────────────────────── */
@media(max-width:1000px){
  .nav{gap:14px;font-size:.79rem}
  .footer-grid{gap:30px}
}
@media(max-width:760px){
  :root{--gutter:22px}
  .header-in{min-height:70px}
  .menu-button{display:block}
  .nav{display:none;position:absolute;left:0;right:0;top:70px;background:var(--paper);padding:25px;
    flex-direction:column;align-items:stretch;border-bottom:1px solid var(--line);box-shadow:0 15px 20px #0001}
  /* `.nav.open` was the JavaScript hook that never existed. The checkbox sibling is what
     actually opens the menu; the old class is kept so any future script still works. */
  .menu-button:checked ~ .nav,
  .nav.open{display:flex}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-grid>div:first-child{grid-column:1/-1}
  .doc-header{padding-top:38px}
  /* A legal table cannot shrink past readability; let it scroll instead of crushing the columns. */
  .doc table{display:block;overflow-x:auto;white-space:normal}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
}


/* ═══ CONTENT-PAGE COMPONENTS ═══════════════════════════════════════════════════════════════════
   The vocabulary the pre-redesign site built its content pages out of: a narrow reading column,
   grouped check lists, a price line, a dark closing band. These started life as a private block
   inside build-tier-pages.js, and were promoted here on 2026-10-17 once a survey showed the same
   class names in use across the tier pages, faq, about, pricing, website-audit, why-audit and
   charity. A component on seven pages is a system component; leaving it in one generator means
   the other six either copy it or drift from it, which is how this site ended up with 126
   selectors that disagree with themselves.

   These are written on the shared tokens, so they move when the palette moves. Page-specific
   one-offs still belong in that page's own block. */
/* ⚠️ `:not([class])` IS LOAD-BEARING. This arrived here as a bare `section{}` when the block was
   promoted out of build-tier-pages.js, where it was safe because that generator emits unclassed
   <section> elements and nothing else. In a stylesheet 28 pages load it also hit `.section`,
   `.dark-section` and `.faqs`, adding 88px of padding above and below every one of them: the FAQ
   hero came back with a hundred pixels of dead space over its breadcrumb. The old pages' bare
   sections still need the rule, so it is scoped to exactly those rather than removed. */
section:not([class]){padding:88px 0}
.narrow{max-width:860px;margin:0 auto;padding:0 var(--gutter)}
/* Scoped for the same reason: a bare `em` here would tint every emphasis on all 28 converted
   pages teal, including inside legal documents and article prose where italics mean "this is a
   title" rather than "this is the point". The teal em is a tier-page and content-page device. */
.thero em,.forwho em,.final em,.narrow em,.chk em{font-style:italic;color:var(--teal)}

.crumb{padding:26px 0 0;font-size:.86rem;color:var(--muted)}
.crumb a{color:var(--muted);border-bottom:1px solid var(--line)}
.crumb a:hover{color:var(--teal)}

.thero{padding:40px 0 62px;border-bottom:1px solid var(--line)}
.thero h1{font-size:clamp(2.3rem,4.6vw,3.6rem);margin:20px 0 0;max-width:22ch}
.thero .lede{margin-top:20px;max-width:60ch}
.priceline{display:flex;align-items:baseline;gap:14px;margin-top:30px;flex-wrap:wrap}
.priceline .amt{font-family:var(--display);font-size:2.8rem;font-weight:800;letter-spacing:-.04em;color:var(--ink);line-height:1}
.priceline .was{font-size:1.1rem;font-weight:700;color:var(--muted);text-decoration:line-through}
.priceline .tag{display:inline-block;background:var(--mint);color:var(--teal-dark);font-size:.6rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:5px 10px;border-radius:40px}
.pnote{margin-top:9px;font-size:.9rem;color:var(--muted)}
.count{margin-top:28px;padding:15px 20px;background:var(--soft);border-left:3px solid var(--teal);border-radius:0 10px 10px 0;font-size:.95rem;color:#3f5157}

/* Pads itself. It used to inherit the bare `section` rule above, which now correctly skips any
   section that carries a class — so this one lost its padding entirely and rendered flush to the
   edges of its own mint band. `.thero` and `.final` already set their own; this was the only one
   relying on the global. */
.forwho{background:var(--soft);border-bottom:1px solid var(--line);padding:88px 0}
.forwho h2{font-size:clamp(1.6rem,2.6vw,2.1rem);margin-bottom:14px}
.forwho p{max-width:64ch;font-size:1rem;line-height:1.75;color:#3f5157}

.grp{margin-bottom:48px}
.grp-h{font-family:var(--display);font-size:1.3rem;font-weight:800;letter-spacing:-.03em;color:var(--ink);padding-bottom:13px;border-bottom:1px solid var(--ink);margin-bottom:0}
.chk{padding:19px 0 19px 31px;border-bottom:1px solid var(--line);position:relative}
.chk::before{content:"";position:absolute;left:2px;top:27px;width:11px;height:6px;border-left:2px solid var(--teal);border-bottom:2px solid var(--teal);transform:rotate(-45deg)}
.chk b{display:block;color:var(--ink);font-weight:700;font-size:1rem;margin-bottom:5px}
.chk span{display:block;color:#3f5157;font-size:.94rem;line-height:1.7;max-width:76ch}
/* --gold-ink, not --gold: the pale gold is a surface colour and fails contrast as a 2px rule
   against paper. The ink variant is the readable form of the same hue. */
.chk .cav{display:block;margin-top:11px;padding:12px 15px;background:var(--gold-soft);border-left:2px solid var(--gold-ink);border-radius:0 8px 8px 0;font-size:.89rem;line-height:1.7;color:#3f5157}

.guar{margin-top:8px;padding:19px 21px;background:var(--soft);border-left:3px solid var(--teal);border-radius:0 10px 10px 0;font-size:.94rem;line-height:1.7;color:#3f5157}
.guar b{color:var(--ink)}
.guar a{color:var(--teal);text-decoration:underline;text-underline-offset:3px}
.scope{margin:0 0 10px;padding:21px 23px;border:1px solid var(--line);border-left:3px solid var(--ink);border-radius:0 12px 12px 0;background:#fff;color:#3f5157}
.scope b{color:var(--ink)}

.final{background:var(--deep);color:#fff;padding:92px 0;text-align:center}
/* `.final.light` is the same closing band on paper rather than deep. about-v2 defined its own
   light `.final` before the conversion; without this modifier the promoted dark rule would have
   silently repainted that page's closing section and left white-on-paper text on it. A second
   page wanting a variant is the moment to add a modifier, not the moment to fork the component. */
.final.light{background:var(--soft);color:var(--ink);border-top:1px solid var(--line)}
.final.light h2{color:var(--ink)}
.final.light p{color:#3f5157}
.final.light .eyebrow{color:var(--teal)}
.final h2{color:#fff;font-size:clamp(1.9rem,3.4vw,2.9rem);max-width:24ch;margin:18px auto 0}
.final p{color:#bfd3d0;margin:16px auto 0;max-width:56ch}
.final .eyebrow{color:#8bd6c6}
.final .btns{margin-top:32px;display:flex;gap:13px;justify-content:center;flex-wrap:wrap}
.others{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:660px;margin:38px auto 0}
@media(max-width:640px){.others{grid-template-columns:1fr}}
.others a{display:block;padding:17px 19px;border:1px solid #ffffff2e;border-radius:12px;text-align:left}
.others a:hover{border-color:var(--aqua)}
/* display:block is load-bearing (these are <span>s, so without it the price and the description
   render on the same line with no gap ("Expert): $30949 checks, deep scans…"). */
.others .on{display:block;font-family:var(--display);font-size:1.05rem;font-weight:800;letter-spacing:-.02em;color:#fff}
.others .od{display:block;font-size:.86rem;color:#a8c7c4;margin-top:5px;line-height:1.55}

/* ── SCAN COMPARISON ─────────────────────────────────────────────────────────────────────────
   Melanie's AegorIQ_Website_Audit_Assess_Only_v2 prototype, ported 2026-10-18.

   Her layout is kept exactly: sticky header row, horizontal scroll container, grouped sections
   with a count floated right, tabular check numbers, row hover. What is NOT kept is her literal
   hex values. The prototype hardcodes #087b72, #103448, #eaf4f1 and a dozen others, all near but
   not equal to the palette. Shipping those would put a second, slightly-wrong teal on the site,
   which is the bug that had 19 pages resolving --teal to #007C6B while passing every gate.
   Same design, drawn from the tokens.

   The `cmp-` prefix is deliberate. `.comparison` is already the pricing table and `.chk` is
   already a list component; reusing either name is how the website audit hero ended up inside a
   65px dark panel. A new component gets a new prefix. */
.cmp-intro{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0 28px}
.cmp-intro span{border:1px solid var(--line);background:#fff;border-radius:30px;padding:11px 18px;color:#37535a;font-size:.875rem}
.cmp-intro strong{color:var(--teal);font-size:1.19rem;margin-right:5px}
/* ⚠️ max-width:100% IS LOad-BEARING, NOT TIDINESS. Without it the 600px-min table escaped the
   overflow-x container and scrolled the whole PAGE on a phone: 187px of horizontal scroll at
   390px wide. Melanie's handoff draws the line exactly here, "horizontal scroll is allowed
   inside the comparison table, not on the page", and overflow-x:auto alone did not hold it.
   `contain:paint` is what actually holds it, measured rather than guessed: max-width:100% alone
   still left 187px, and so did overflow-x:clip, isolation and dropping the sticky header. Only
   paint containment stops the 600px table contributing to the page's scroll width. */
.cmp-scroll{overflow-x:auto;max-width:100%;contain:paint;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:0 14px 35px #0827340e}
.cmp-table{border-collapse:separate;border-spacing:0;width:100%;min-width:600px;color:var(--ink)}
.cmp-table th,.cmp-table td{padding:14px 20px;border-bottom:1px solid var(--line)}
.cmp-table thead th{position:sticky;top:0;z-index:2;background:var(--deep);color:#fff;font-weight:600;text-align:center}
.cmp-table thead th:first-child{text-align:left;width:64%}
.cmp-table thead th span{display:block;font-size:.875rem}
.cmp-table thead th strong{display:block;font-size:1.44rem;margin-top:3px}
.cmp-table thead th.cmp-highlight{background:var(--teal)}
.cmp-table tbody th{text-align:left;font-size:.875rem;font-weight:500;line-height:1.4}
.cmp-table tbody th small{display:block;color:var(--muted);font-weight:400;margin-top:4px;line-height:1.6}
.cmp-table tbody tr:not(.cmp-group):hover{background:#f2faf8}
.cmp-table tbody td{text-align:center;font-size:1.25rem;font-weight:700;color:var(--teal)}
.cmp-table .cmp-group th{background:var(--soft);color:var(--teal-dark);padding:16px 20px;font-size:.875rem;letter-spacing:.02em;font-weight:700}
.cmp-table .cmp-group span{float:right;font-weight:400;color:var(--muted)}
.cmp-no{font-variant-numeric:tabular-nums;color:var(--muted);font-size:.75rem;display:inline-block;width:35px}
.cmp-nope{color:#b9c3c7}
.cmp-notes{max-width:950px;margin:22px auto 0;color:#5b7078;font-size:.8125rem;line-height:1.7}
.cmp-notes p{margin:8px 0}
@media(max-width:600px){
  .cmp-table th,.cmp-table td{padding:12px 10px}
  .cmp-table .cmp-group th{padding:13px}
}

/* Visually hidden, still read aloud. Added 2026-10-18 for the scan comparison, where a cell's
   whole meaning was a tick or a dash: a screen reader announced 52 rows of "check" and "dash"
   with no way to tell included from not. We audit other sites for exactly this, so the table
   that lists our accessibility check cannot fail it. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ── PRIVACY POLICY BUILDER HERO ─────────────────────────────────────────────────────────────
   Melanie's AegorIQ_Privacy_Policy_Generator_Redesign_v4 prototype, ported 2026-10-18.

   ⚠️ `.split` EXISTS BECAUSE HER OWN TWO PROTOTYPES DISAGREE. The advisory prototype styles
   `.hero-inner` as a single column; this one styles the same class as a two-column grid with the
   document card beside the text. Porting both as `.hero-inner` would have meant whichever loaded
   last decided the layout of both pages. The advisory meaning keeps the bare class because it
   shipped first; this one is a modifier. Same lesson as `.cta`: one name, one component. */
/* ⚠️ KEEP THE HORIZONTAL GUTTER. `.wrap` supplies `padding:0 var(--gutter)`, and this rule used
   the padding shorthand with `0` on the sides, which silently cancelled it. On a phone the
   headline, the lede and the fine print all sat flush against the screen edge with no margin at
   all. The shorthand has to carry the gutter, not zero it. */
.hero-inner.split{display:grid;grid-template-columns:1.07fr .93fr;gap:70px;align-items:center;
  padding:91px var(--gutter) 105px}
/* The eyebrow is teal, which is right on paper and 2.76:1 on this hero's --deep: below the
   4.5:1 AA minimum, and introduced by darkening the hero rather than inherited. --aqua is the
   palette's own light teal and clears it comfortably. The trust wall hero does the same. */
.hero .eyebrow,.tw-hero .eyebrow{color:#91ddd0}
.hero .lede,.hero .pnote{color:#d6e6e8}
.hero .priceline .amt{color:#fff}
/* `.count` is a pale mint box with dark text, which is right on a paper page and unreadable on
   this one: pale text on a pale box floating in a dark hero, looking like an empty input. In the
   hero it becomes the plain small line her prototype uses. */
.hero .count{background:none;border:0;border-radius:0;padding:0;color:#b6d5d3;font-size:.78rem;line-height:1.7;margin-top:22px}
/* Same trap: `.btn.ghost` carries its own pale background, so setting only the text colour left
   near-white letters on near-white. The background has to be named too. */
.hero .btn.ghost{background:transparent;color:#fff;border:1px solid #ffffff60}
.hero .btn.ghost:hover{background:#ffffff19;border-color:#fff}
/* The split hero gives the headline a ~700px column, not the full page, so the advisory cap is
   still far too big here: it wrapped this sentence onto four lines beside the document card. */
.hero-inner.split h1{font-size:clamp(2.1rem,3.6vw,3.3rem);max-width:15ch}

/* The document preview. Illustrative, and labelled as such in the markup: it is a picture of the
   shape of a policy, not a generated one, and saying so is the same honesty rule that keeps
   "certified" off the badge pages. */
.hero-card{position:relative;background:#fdfefd;border-radius:17px;box-shadow:0 28px 90px #03182180;overflow:hidden;color:var(--ink);transform:rotate(2deg)}
.docbar{display:flex;align-items:center;justify-content:space-between;background:var(--soft);padding:16px 22px;font-size:.75rem;color:#477071;font-weight:700;letter-spacing:.04em}
.dots{display:flex;gap:5px}
.dots i{width:8px;height:8px;border-radius:50%;background:#c6d9d6;display:block}
.docbody{padding:31px 32px 35px}
.doc-kicker{font-size:.62rem;letter-spacing:.16em;font-weight:800;color:var(--teal);text-transform:uppercase}
.docbody h3{margin:12px 0 14px;font-size:1.5rem}
.docbody>p{color:var(--muted);font-size:.8rem;margin-bottom:6px}
.doc-row{border-top:1px solid var(--line);padding:16px 0;display:flex;gap:14px;align-items:center;font-size:.75rem;font-weight:600}
.doc-row .tick{color:var(--teal);font-weight:800}
.doc-row-upcoming{color:var(--muted)}
.doc-row-upcoming small{color:var(--muted);font-weight:400}
.docfoot{display:flex;gap:8px;margin-top:20px}
.pill{background:#e7f3f1;border-radius:5px;padding:7px 10px;font-size:.62rem;color:#276c69;font-weight:800;letter-spacing:.06em}
@media(max-width:900px){
  .hero-inner.split{grid-template-columns:1fr;gap:32px;padding:65px var(--gutter) 75px}
  .hero-card{transform:none}
}

/* ── ADVISORY PACKAGES ───────────────────────────────────────────────────────────────────────
   Melanie's AegorIQ_Digital_Trust_Advisory_Invoice_Only card design, 2026-10-18, at her
   instruction carrying THREE packages rather than the prototype's two.

   Her prototype puts Consultation and Strategy Advisory in a two-up grid and demotes
   Transformation to a callout strip underneath. Melanie: "instead of 2 packages, we have 3
   packages." So all three are equal cards in a three-up grid, which her stylesheet already
   anticipates with `.grid3`.

   ⚠️ ITS OWN NAME, not `.card.plan`. The pricing cards already own `.plan` (32px padding, a
   485px floor, the tick list), and an advisory package is a different object with a different
   rhythm. Reusing the name is how a dark panel ended up behind two buttons on the audit page.

   ⚠️ NO RIBBON TEXT ON THE FEATURED CARD. Her prototype's reads "Human-led advisory", which is
   true of all three and so says nothing here; the obvious alternative, a "most popular" flag, is
   the unevidenced popularity claim that came off the Expert card on 2026-10-06 and is not coming
   back without sales data behind it. The emphasis is the border alone. */
/* `stretch`, not `start`: the three lists are 7, 5 and 7 items long, so starting them left
   three cards with ragged bottoms and three buttons at three different heights. Equal height
   plus `margin-top:auto` on the button lines the actions up. */
.adv-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch;margin-top:34px}
.adv-card{border:1px solid var(--line);border-radius:17px;background:#fff;
  box-shadow:0 9px 30px #0c35410a;overflow:hidden;display:flex;flex-direction:column;
  transition:transform .24s ease,box-shadow .24s ease}
.adv-card:hover,.adv-card:focus-within{transform:translateY(-6px) scale(1.025);
  box-shadow:0 22px 55px #0b34402a;z-index:2}
.adv-card.featured{border:2px solid var(--teal)}
.adv-body{padding:29px;display:flex;flex-direction:column;flex:1}
.adv-card .label{color:var(--teal);font-size:.69rem;letter-spacing:.12em;font-weight:800;text-transform:uppercase}
.adv-card h3{font-family:var(--display);font-size:1.44rem;letter-spacing:-.035em;line-height:1.22;margin:11px 0}
.adv-card .blurb{color:var(--muted);font-size:.9rem;line-height:1.65;margin:0}
.adv-card .price{font-family:var(--display);font-size:2.5rem;font-weight:800;letter-spacing:-.055em;
  line-height:1.2;margin:22px 0 2px;color:var(--ink)}
.adv-card .price small{display:block;font-family:var(--sans);font-size:.78rem;font-weight:500;
  letter-spacing:0;color:var(--muted);margin-top:4px}
.adv-card ul{padding:0;list-style:none;margin:20px 0 26px}
.adv-card li{padding:10px 0 10px 24px;border-bottom:1px solid var(--line);font-size:.84rem;
  position:relative;line-height:1.62;color:#3f5157}
.adv-card li:last-child{border-bottom:0}
.adv-card li:before{content:'\2713';position:absolute;left:0;top:10px;color:var(--teal);font-weight:900}
.adv-card .btn{width:100%;margin-top:auto}
@media(max-width:980px){.adv-grid{grid-template-columns:1fr}.adv-card:hover{transform:none}}

/* ── FOUR PILLARS, FOUR PERSPECTIVES ─────────────────────────────────────────────────────────
   Melanie's advisory prototype, added 2026-10-18 at her request: "the four pillar and four
   perspective is important for advisory page". It is the method behind what Advisory charges
   for, so it belongs above the packages rather than after them.

   Class names are prefixed. Her prototype calls these `.stack`, `.soft` and `.fine`, and three
   more generic names than those would be hard to invent: `.soft` in particular shadows the
   `--soft` token, and a second meaning for a name that general is how `.cta` and `.hero` each
   ended up styling two different components. */
.pillar-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:34px}
.pillar-card{border:1px solid var(--line);border-radius:17px;background:#fff;padding:29px;
  box-shadow:0 9px 30px #0c35410a}
.pillar-card h3{font-family:var(--display);font-size:1.37rem;letter-spacing:-.03em;margin:10px 0 0}
.pillar-stack{display:grid;gap:15px;margin-top:22px}
.pillar-item{background:#f2f8f7;border-radius:16px;padding:22px 24px}
.pillar-item strong{font-family:var(--display);font-size:1.02rem;color:var(--ink)}
.pillar-item p{margin:4px 0 0;color:#3f5157;font-size:.9rem;line-height:1.65}
.pillar-fine{font-size:.78rem;color:var(--muted);margin-top:18px}
@media(max-width:860px){.pillar-pair{grid-template-columns:1fr}}

/* ── BUILDER: THE INTRO SPLIT AND THE COVERS GRID ────────────────────────────────────────────
   Melanie's AegorIQ_Privacy_Policy_Generator_Redesign_v4 prototype, 2026-10-18.

   Two things her layout does that a stacked band of prose does not: it pulls the "this is not
   the right product" line out as a quote so the honest warning is the thing the eye lands on,
   and it numbers the ten coverage items so a reader can see there are ten rather than scrolling
   a bullet list to find out. The copy underneath is unchanged in both. */
.intro-split{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:start}
.intro-split h2{margin-top:10px}
.intro-quote{padding:31px;border:1px solid var(--line);border-radius:13px;background:#fff;
  box-shadow:0 15px 40px #163f4810;align-self:start}
.intro-quote p{margin:0;font-size:1.02rem;line-height:1.7;color:var(--ink)}
.intro-quote cite{display:block;margin-top:14px;font-style:normal;font-size:.78rem;color:var(--muted)}
@media(max-width:900px){.intro-split{grid-template-columns:1fr;gap:25px}}

/* ⚠️ COLUMNS, NOT A GRID. Her prototype's coverage items are a sentence or two each, so a
   two-up grid sits them in neat rows. The live list is not like that: the credit-reporting item
   runs to about 300 words because section 21B is genuinely that fiddly, and in a grid it made a
   cell four times the height of the one beside it, with a column of white space alongside.
   A column flow lets the cards pack by height instead of lining up in rows. Reading order runs
   down the first column then the second, which is why the numbers earn their place. */
/* ⚠️ A GRID, NOT A COLUMN FLOW. `columns:2` packs cards by height, so the left column fills
   completely and then the right one starts. On a long list that reads as boxes scattered down
   the page at unrelated offsets rather than a grid, which is what Melanie saw on 2026-10-18.
   A real grid lines every card up in a row. `align-items:start` keeps each card its own height:
   the longest item here is 7.6x the shortest, so stretching a row to match would put a card
   with 115 characters in it at the height of one with 874. */
.covers-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;align-items:start;margin-top:28px}
.covers-item{display:flex;gap:19px;border:1px solid var(--line);border-radius:12px;background:#fff;
  padding:26px;transition:box-shadow .2s ease,translate .2s ease}
.covers-item:hover{box-shadow:0 14px 36px #0c35410f;translate:0 -2px}
.covers-num{color:var(--teal);font-size:.7rem;font-weight:800;padding-top:5px;letter-spacing:.06em;
  font-variant-numeric:tabular-nums;flex:0 0 auto}
.covers-item h3{font-family:var(--display);font-size:1.02rem;margin:0 0 7px;letter-spacing:-.015em}
.covers-item p{margin:0;color:#3f5157;font-size:.88rem;line-height:1.7}
@media(max-width:860px){.covers-grid{grid-template-columns:1fr}.covers-item:hover{translate:none}}

/* ── BUILDER: THE SIDE-BY-SIDE ───────────────────────────────────────────────────────────────
   Melanie's comparison table, approved by her 2026-10-18 after reading the comparative language.

   ⚠️ EVERY SELECTOR IS PREFIXED. Her prototype styles bare `table`, `th` and `td`, which in a
   shared stylesheet would restyle the 52-check comparison, the pricing table and every other
   table on the site. Nothing here is a bare element selector.

   ⚠️ `contain:paint` FOR THE SAME REASON AS THE SCAN COMPARISON: a 690px min-width table inside
   overflow-x:auto still contributed to the page's scroll width on a phone until paint
   containment was added. Measured, not assumed. */
/* Sits under the table at Melanie's instruction, 2026-10-18, so the spacing is above it now.
   It still ships with the table: the note is what keeps "illustrative" visible to a reader, and
   a comparative table without it is a different claim. */
.vs-note{border-left:3px solid var(--gold);padding:13px 18px;background:#f8f4eb;font-size:.78rem;
  color:#665e50;line-height:1.8;margin-top:20px;border-radius:0 8px 8px 0}
.vs-wrap{overflow-x:auto;max-width:100%;contain:paint;border:1px solid var(--line);
  border-radius:13px;background:#fff;box-shadow:0 18px 60px #173f4510}
.vs-table{width:100%;border-collapse:collapse;min-width:690px}
.vs-table th,.vs-table td{text-align:left;padding:19px 24px;border-bottom:1px solid var(--line);
  font-size:.82rem;line-height:1.7;vertical-align:top}
.vs-table thead th{font-size:.9rem;background:var(--soft);color:#264652;font-family:var(--display)}
.vs-table thead th:nth-child(2){background:var(--teal);color:#fff}
.vs-table tbody th{width:25%;font-weight:700;color:var(--ink)}
.vs-table td{width:37.5%;color:#3f5157}
.vs-table td.vs-mine{background:#eff8f6;color:#164e50;font-weight:600}
.vs-table tbody tr:last-child th,.vs-table tbody tr:last-child td{border-bottom:0}

/* ── WEBSITE AUDIT: PROCESS AND PILLARS ──────────────────────────────────────────────────────
   The three sections from Melanie's AegorIQ_Website_Audit_Assess_Only_v2 prototype, 2026-10-18.
   Built on the shared `.card` and `.grid2` rather than new box styles, because her prototype's
   cards ARE the shared card. Only the pieces that do not already exist are defined here. */
.step-label{color:var(--teal);font-size:.69rem;letter-spacing:.12em;font-weight:800;
  text-transform:uppercase;font-variant-numeric:tabular-nums}
.card .card-in{padding:29px}
.card .card-in h3{font-family:var(--display);font-size:1.3rem;letter-spacing:-.03em;margin:11px 0 8px}
.card .card-in p{margin:0;color:#3f5157;font-size:.9rem;line-height:1.7}
/* Four pillars sit four across on a wide screen, two on a tablet, one on a phone. `.grid2` is
   fixed at two, so this is its own grid rather than an override of it. */
.pillar-four{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:34px}
@media(max-width:1000px){.pillar-four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.pillar-four{grid-template-columns:1fr}}
.audit-actions{display:flex;flex-wrap:wrap;gap:13px;margin-top:30px}

/* ⚠️ PROSE LINKS NEED TO LOOK LIKE LINKS. The global rule is `a{color:inherit;text-decoration:none}`,
   which is right for nav and cards but makes a link inside a sentence invisible: same colour, no
   underline, nothing to click toward. Pages have been working around it with inline styles. The
   components below carry running text, so a link inside them gets the treatment `.article-body a`
   already uses. Scoped to those containers rather than applied to every `p a`, which would also
   catch the footer and the card decks. */
.section-head p a,.cmp-notes a,.note a,.legend a,.card .card-in p a,
.adv-card .blurb a,.pillar-item p a,.intro-quote a,.vs-note a{
  color:var(--teal);text-decoration:underline;text-underline-offset:3px}
.section-head p a:hover,.cmp-notes a:hover,.note a:hover,.legend a:hover,
.card .card-in p a:hover,.intro-quote a:hover,.vs-note a:hover{color:var(--ink)}

/* ── MOTION ─────────────────────────────────────────────────────────────────────────────────────
   Added 2026-10-18, after Melanie pointed at forcepoint.com and asked for the pinned top bar
   and "a light glow, movement".

   The pinned bar already existed: `.header` has been position:sticky since the redesign. What
   was missing is any sense that it is deliberate, so it now lifts off the page as you scroll.

   ⚠️ NO JAVASCRIPT, AND NO EDITS TO 56 PAGES. A scroll-reveal is normally an IntersectionObserver,
   which would mean adding a <script> to every page and inventing a shared JS file the site does
   not have. These use CSS scroll-driven animations instead, so the whole feature lives in this
   one file. Everything is wrapped in @supports: in a browser without them (Firefox today) every
   page renders exactly as it does now.

   ⚠️ CONTENT IS NEVER HIDDEN BY DEFAULT. The reveal only ever runs inside @supports, so there is
   no state where a stylesheet or a script failing leaves text at opacity 0. That is the failure
   that makes a page blank for a search engine, and it is designed out rather than tested for.

   ⚠️ EVERY ANIMATION SITS INSIDE prefers-reduced-motion: no-preference, rather than being added
   globally and switched off under `reduce`. A blanket `*{animation:none}` would also stop the
   homepage logo belt and the pre-flight spinner on check-site.html, which are page-local. Opting
   in means nothing else on the site is touched. */

/* The light in the dark banner. The element exists at every motion setting, because a soft
   gradient is not motion; only its drift is behind the query. Sits bottom-left so it never
   stacks with the radial already at 87% 12%, which is what went muddy the first time. */
.hero:before{content:'';position:absolute;pointer-events:none;z-index:0;
  width:720px;height:720px;left:-250px;bottom:-310px;border-radius:50%;
  background:radial-gradient(circle,rgba(90,200,187,.17) 0%,rgba(90,200,187,.06) 40%,transparent 67%)}

@keyframes aq-glow-drift{
  from{transform:translate3d(0,0,0) scale(1);opacity:.7}
  to  {transform:translate3d(150px,-80px,0) scale(1.2);opacity:1}}
@keyframes aq-ring-breathe{
  from{transform:scale(1);opacity:.55}
  to  {transform:scale(1.07);opacity:1}}
@keyframes aq-rise{
  from{opacity:0;transform:translateY(20px)}
  to  {opacity:1;transform:none}}
@keyframes aq-header-lift{
  from{background:rgba(251,250,247,.86);box-shadow:0 0 0 0 rgba(16,31,41,0)}
  to  {background:rgba(251,250,247,.97);box-shadow:0 10px 30px -14px rgba(16,31,41,.26)}}

@media (prefers-reduced-motion: no-preference){
  /* Transform and opacity only: both are compositor properties, so the drift costs no layout. */
  .hero:before{animation:aq-glow-drift 24s ease-in-out infinite alternate;will-change:transform}
  .hero:after {animation:aq-ring-breathe 18s ease-in-out infinite alternate}

  @supports (animation-timeline: scroll()){
    .header{animation:aq-header-lift linear both;
            animation-timeline:scroll(root);animation-range:0 120px}
  }

  @supports (animation-timeline: view()){
    /* ⚠️ RANGE IS MEASURED IN `cover`, NOT `entry`. The entry phase runs from an element first
       touching the viewport to it being fully inside, which for anything taller than the screen
       never completes, leaving it permanently part-faded. `cover` is defined for every element
       whatever its height, so a tall card on a phone finishes like everything else. */

    /* ⚠️ THE BIG WRAPPERS FADE, THEY DO NOT MOVE. A non-none `transform` makes an element the
       containing block for its descendants, which silently breaks `position:sticky` on anything
       inside. `.side` is a sticky sidebar on 23 guide pages and lives inside a `.section`, so a
       translate here would kill the one piece of stickiness the site already relied on. Opacity
       alone carries the reveal for these; only the small components move. */
    /* ⚠️ THE RANGE IS A FIXED PIXEL LENGTH, NOT A PERCENTAGE. A percentage of `cover` is a
       percentage of (element height + viewport height), so on a tall block it spans thousands
       of pixels. The website-audit comparison section is a 52-row table: at `cover 16%` it sat
       at 0.614 opacity for the entire stretch a reader spends reading it, and the page looked
       washed out. Measured on the live site, not predicted. A fixed 320px means every element
       reaches full opacity at the same scroll distance whatever its height.

       ⚠️ AND NO SECTION-LEVEL FADE. A <section> wrapper fading to 0.6 multiplies against every
       child that is also revealing, so the content inside washed out twice over. The reveal
       belongs on the components a reader actually looks at, never on the container around them. */
    .sec-head,.section-head,.card,.plan,.step,.adv-card,.pillar-item,.pillar-card,
    .covers-item,.tw-card,.intro-split,.vs-wrap,.read{
      animation:aq-rise linear both;
      animation-timeline:view();animation-range:cover 0px cover 320px}
  }
}

/* Hover lift uses the independent `translate` property, not `transform`.
   ⚠️ The reveal above finishes on `transform:none` with fill-mode both, which wins over a hover
   rule for the rest of the page's life. Using a separate property lets the two compose instead
   of the reveal silently disabling every card hover on the site. */
.card,.adv-card,.tw-card{transition:translate .25s ease,box-shadow .25s ease}
.card:hover,.adv-card:hover,.tw-card:hover{translate:0 -4px;box-shadow:0 18px 42px #152f2a17}

/* ── BUILDER: READ MORE ─────────────────────────────────────────────────────────────────────────
   ⚠️ THIS BLOCK WAS UNSTYLED. It carried `class="plan-hi"`, which is not defined anywhere in this
   stylesheet, so the browser fell back to the global `ul` rules and the section rendered as a
   plain bulleted list in body type while everything around it was cards. Melanie read it as a
   different design on the same page, correctly. The words are untouched: only presentation
   changes here, so nothing that asserts on this copy can be affected. */
.rm-grid{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;align-items:start;margin-top:24px;padding:0}
.rm-grid li{border:1px solid var(--line);border-radius:12px;background:#fff;padding:20px 22px;
  margin:0;font-size:.88rem;line-height:1.7;color:#3f5157;
  transition:box-shadow .2s ease,translate .2s ease}
.rm-grid li:hover{box-shadow:0 14px 36px #0c35410f;translate:0 -2px}
.rm-grid strong{font-family:var(--display);font-size:.99rem;color:var(--ink);letter-spacing:-.015em}
.rm-grid a{color:var(--teal);text-decoration:underline;text-underline-offset:3px}
.rm-grid a:hover strong{color:var(--teal)}
@media(max-width:720px){.rm-grid{grid-template-columns:1fr}.rm-grid li:hover{translate:none}}

/* ── BUILDER: ONE MINT BAND, NOT FOUR STACKED SECTIONS ──────────────────────────────────────────
   ⚠️ WHAT THIS FIXES. The builder page ends in a run of four consecutive mint sections
   (.forwho x3 then .cov). Each carried `.forwho`'s own `border-bottom` and three carried an
   inline `padding-top:0`, so the page drew three full-width rules through what is visually one
   block and jammed each heading against the rule above it. Melanie's words for it on 2026-10-18:
   "it look like its slapping another section onto the page and not properly and intentionally
   designed". She was reading the structure correctly.

   A run of same-coloured sections is one band: borders belong at its edges, not between its
   parts, and the parts need a smaller internal gap than the gap to the next band.

   ⚠️ `.cov` IS GENERATED by build-coverage.js and marked do-not-hand-edit, so its 1230px `.wrap`
   is narrowed here rather than in the markup. That width jump mid-band is what made the boxes
   look misaligned against the 860px sections either side of it. */
.forwho + .forwho,
.forwho + .cov{padding-top:52px}
.forwho:has(+ .forwho),
.forwho:has(+ .cov){border-bottom:0;padding-bottom:0}
.cov{background:var(--soft);padding:52px 0 88px;border-bottom:1px solid var(--line)}
.cov > .wrap{max-width:860px}

/* The surrounding sections used three different vertical rhythms (88, 105 and 62/70) and three
   content widths (1230, 860, 820). The comparison section is aligned to this page's dominant 88.
   ⚠️ The FAQ is NOT corrected here. Three pages carry their own `.faqs` block in a page-local
   <style>, which loads after this file and wins, and four other pages rely on the global 105px.
   Changing `.faqs` globally would silently restyle those four. The three are fixed in their own
   style blocks instead. */
.section#comparison{padding:88px 0}

/* ⚠️ ONE HEADING SCALE INSIDE THE MINT BAND. `.forwho h2` is clamp(1.6rem,2.6vw,2.1rem) but
   `.cov` fell through to the global h2, so "What the policy is built against" rendered far
   larger than "Read more" directly above it, in the same band, at the same indent. Two type
   scales stacked in one block is the other half of what read as unintentional design. */
.cov h2{font-size:clamp(1.6rem,2.6vw,2.1rem);margin-bottom:14px}
.cov > .wrap > p{max-width:64ch;font-size:1rem;line-height:1.75;color:#3f5157}
.cov-list{max-width:64ch}

/* ⚠️ THE NAV GREW FROM SEVEN ITEMS TO EIGHT on 2026-10-18 (Our Badge and Trust Wall arriving,
   Pricing leaving). Measured at twelve widths from 1600 down to 390: every one fits on a single
   line except the narrow band just above the 760px hamburger breakpoint, where the eighth item
   pushed the last link 4px past the viewport edge. This step closes that band. Tightening the
   whole scale instead would have shrunk the nav on laptops that had room to spare. */
@media(max-width:860px) and (min-width:761px){
  .nav{gap:9px;font-size:.74rem}
}

/* The alternating band on the pricing page. A named class rather than an inline style, because
   the last page that set section backgrounds inline ended up with four different rhythms. */
.price-band{background:var(--soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* ── THE PRICING PAGE ───────────────────────────────────────────────────────────────────────────
   Rebuilt 2026-10-18 as the one page listing every price: website audit, then advisory, then the
   builder, each with a short explanation before its numbers.

   ⚠️ ONE CENTRE AXIS. `.pricing-grid.two` is deliberately centred at 840px, because two cards
   stretched across the full 1230px wrap read as a row with something missing. Left-aligned
   section headings above a centred grid then look like a mistake, so the headings share the
   grid's axis rather than the wrap's. */
#audit-pricing .section-head,
#advisory-pricing .section-head,
#builder-pricing .section-head{text-align:center;max-width:70ch;margin-left:auto;margin-right:auto}
#audit-pricing .section-head .lede,
#advisory-pricing .section-head .lede,
#builder-pricing .section-head .lede{margin-left:auto;margin-right:auto}
/* The grid sits under a heading here rather than overlapping a banner, so the pull-up that the
   old layout needed would drag it into the paragraph above it. */
#audit-pricing .pricing-grid{margin-top:0}

/* The free tier. Not a card: it has no price to compare, and giving it one would put a $0 card
   beside two paid ones and invite the comparison the removed table used to make badly. */
.free-note{max-width:840px;margin:30px auto 0;display:flex;gap:26px;align-items:center;
  justify-content:space-between;flex-wrap:wrap;
  border:1px dashed var(--line);border-radius:14px;padding:24px 28px;background:var(--soft)}
.free-note h3{font-family:var(--display);font-size:1.12rem;margin:0 0 6px;letter-spacing:-.02em}
.free-note p{margin:0;color:#3f5157;font-size:.9rem;line-height:1.7;max-width:62ch}
.free-note .btn{flex:0 0 auto}

/* One product, one price: a single card in a two-column grid looked like a row that had lost a
   card, so the builder gets its own block rather than a lonely cell. */
.single-price{max-width:840px;margin:0 auto;border:1px solid var(--line);border-radius:17px;
  background:#fff;box-shadow:0 9px 30px #0c35410a;padding:32px}
.single-price-head{display:flex;gap:24px;align-items:flex-start;justify-content:space-between;
  flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:22px;margin-bottom:22px}
.single-price-head h3{font-family:var(--display);font-size:1.5rem;margin:0 0 6px;letter-spacing:-.025em}
.single-price-head .subtitle{margin:0;color:var(--muted);font-size:.95rem}
.single-price .price{text-align:right}
.single-price .price .c{font-size:.9rem;color:var(--muted);font-weight:700}
.single-price .price .n{font-size:3rem;line-height:1;font-variant-numeric:tabular-nums;font-weight:700}
.single-price .price-note{font-size:.79rem;color:var(--muted);margin-top:2px;text-align:right}
.single-price .btn{margin-top:24px}
@media(max-width:700px){
  .single-price-head{flex-direction:column}
  .single-price .price,.single-price .price-note{text-align:left}
  .free-note{flex-direction:column;align-items:flex-start}
}
/* The delivery footnote travels with the cards, so it shares their axis rather than the wrap's. */
#audit-pricing > .wrap > p{max-width:840px;margin-left:auto;margin-right:auto}
#builder-pricing > .wrap > p{max-width:840px;margin-left:auto;margin-right:auto}

/* ⚠️ `.chk` IS A BLOCK, NOT A LIST CLASS. It styles ONE element and draws ONE tick from its own
   ::before, so `<ul class="chk">` gave the whole list a single tick and left every <li> on the
   browser's default bullet. The builder block needs a list, so it has one of its own. */
.sp-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px}
.sp-list li{position:relative;padding:12px 0 12px 26px;border-bottom:1px solid var(--line);
  font-size:.91rem;line-height:1.6;color:#3f5157}
.sp-list li::before{content:"";position:absolute;left:2px;top:19px;width:10px;height:5px;
  border-left:2px solid var(--teal);border-bottom:2px solid var(--teal);transform:rotate(-45deg)}
@media(max-width:700px){.sp-list{grid-template-columns:1fr}}

/* The price was being squeezed by the flex row and wrapping into itself. It is a fixed lockup:
   it never shrinks and never wraps. */
.single-price .price{flex:0 0 auto;white-space:nowrap}
.single-price .price-note{white-space:nowrap}

/* ⚠️ em-BASED LETTER-SPACING INHERITS AS AN ABSOLUTE LENGTH. The shared `.price` sets
   `letter-spacing:-.06em` on a 56px lockup, which computes to -3.36px and is then inherited by
   every child AS -3.36px, whatever its own font-size. On the 12.6px price note that is a quarter
   of a character per character, and the words render on top of each other. Measured in the
   browser, not guessed: the computed value really was -3.36px at 12.64px.
   Tracking is therefore reset on the children and re-applied only to the big number. */
.single-price .price .c,
.single-price .price-note{letter-spacing:normal;font-family:var(--sans);font-weight:500}
.single-price .price .n{letter-spacing:-.045em}

/* ── HOMEPAGE HERO SHOT ─────────────────────────────────────────────────────────────────────────
   The report dashboard beside the headline, from Melanie's v4 prototype. Tilted and lifted so it
   reads as a screenshot of a real product rather than a flat image pasted into the banner. */
/* ⚠️ VALUES TAKEN FROM MELANIE'S PROTOTYPE, NOT APPROXIMATED. The shot is not a flat image: in
   her v4 it sits in a white frame, tilted, and STRAIGHTENS WHEN YOU POINT AT IT over .35s. My
   first pass had a static tilt and no movement at all, which is not the same design. These are
   her numbers: perspective 1300px, rotateY -5deg, rotateZ 1deg, 9px white frame, 17px radius.
   The reduced-motion block further up kills the transition for anyone who asks for that. */
.hero-shot{margin:0;position:relative;display:grid;place-items:center}
.shot-frame{position:relative;width:100%;max-width:680px;background:#fff;
  border:1px solid rgba(255,255,255,.3);border-radius:17px;padding:9px;
  box-shadow:0 32px 85px rgba(0,0,0,.4);
  transform:perspective(1300px) rotateY(-5deg) rotateZ(1deg);
  transition:transform .35s ease}
.shot-frame:hover{transform:perspective(1300px) rotateY(0) rotateZ(0)}
.hero-shot img{display:block;width:100%;height:auto;border-radius:10px}
.hero-shot figcaption{margin-top:20px;font-size:.8rem;color:#b7d2d2;letter-spacing:.01em;text-align:center}
/* Her prototype gives the image side more room than the copy side. */
.hero-inner.split:has(.hero-shot){grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);gap:42px}
/* The banner's decorative ring sits top-right, which is where the shot now is. Push it clear so it
   does not cut across the screenshot. */
.hero:has(.hero-shot):after{right:-320px;top:-300px}
@media(max-width:980px){
  .hero-inner.split:has(.hero-shot){grid-template-columns:1fr;gap:44px}
  /* Flat on a phone, as her prototype has it: a tilt you cannot hover is just a crooked picture. */
  .shot-frame{transform:none;max-width:720px}
  .shot-frame:hover{transform:none}
}
/* The fine print under the buttons. It was styled inside the old one-off homepage banner, which
   has been replaced, so it needs a home in the shared sheet. */
.hero .hero-note{margin-top:22px;font-size:.82rem;line-height:1.7;color:#a9c6c8;max-width:54ch}