/* ═══════════════════════════════════════════════════════════════════════════
   GOOD PRESENCE / DOSSIER — COOL STOCK
   One stylesheet for every page.

   The reference is a filed document held up to the light: a cool archival
   stock rather than warm cream, glass panels floating over a soft blue
   field, hairline rules doing the structural work.

   COLOUR HAS TWO JOBS AND THEY DO NOT OVERLAP.
   Blue is structure and action — the wordmark, the nav, buttons, links,
   section rules, the score figures. Oxblood is risk and nothing else. It
   appears on a page only when something is actually wrong. That split is
   the whole colour system; when oxblood starts marking structure it stops
   meaning danger, and the report loses the one signal it exists to send.

   The ∅ is the signature. It is the mark, and it is also the thesis: a
   privacy report is not a score to maximise, it is categories staying
   empty. Where a category is clear, the page says ∅ rather than "0".

   FLUIDITY IS THE RULE, NOT BREAKPOINTS.
   Type, spacing and gutters are all clamp()ed against the viewport, and
   every multi-column layout is auto-fit/minmax, so a half-width window or
   a 1/4-tile at 470px behaves like a designed size. Media queries appear
   only where a layout genuinely changes shape.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Tokens ──────────────────────────────────────────────────────────────── */
:root{
  /* Light only. Declaring "light dark" here would let the UA paint form
     controls dark on a page that has no dark theme, which is worse than
     having no dark mode at all. */
  color-scheme:light;

  /* Field and stock. --field is the ground the glass refracts; --paper is
     the sheet laid on it. */
  --field:#e4ebf4;
  --paper:#f4f7fb; --paper-2:#fbfdff; --paper-3:#dfe7f1;
  --wash-1:rgba(61,155,212,.30);
  --wash-2:rgba(36,120,181,.20);

  /* Rules and ink. Ink is navy, never black — black on a cool stock reads
     as a screenshot pasted onto the page. */
  --rule:#c2d1e0; --rule-strong:#153050;
  --ink:#0f2438; --ink-2:#3c5570; --ink-3:#556b85;

  /* Accents. Blue carries structure and action. Oxblood is risk only.
     Every value here clears WCAG AA on --paper. */
  --blue:#1a5b93; --blue-2:#123f66; --blue-bright:#2478b5;
  --blue-soft:#e2ecf6;
  --seal:#8a3230; --seal-soft:#f6e7e6;
  --flag:#7d5f1a; --flag-soft:#f5eeda;
  --clear:#3f6f5a; --clear-soft:#e6f0eb;

  /* Glass. --glass is for surfaces that sit above content (masthead,
     report); --glass-2 is the quieter fill for nested tiles. */
  --glass:rgba(255,255,255,.58);
  --glass-2:rgba(255,255,255,.40);
  --glass-line:rgba(255,255,255,.75);
  --glass-shadow:0 1px 0 rgba(255,255,255,.6) inset,
                 0 18px 40px -24px rgba(15,42,71,.45);
  --glass-blur:16px;

  /* Type scale: eight steps, all fluid. The pre-redesign site had 44
     distinct sizes, which is what "inconsistent" looks like in numbers. */
  --t-xs:  clamp(0.70rem, 0.68rem + 0.10vw, 0.75rem);
  --t-sm:  clamp(0.78rem, 0.76rem + 0.12vw, 0.84rem);
  --t-base:clamp(0.90rem, 0.87rem + 0.16vw, 0.98rem);
  --t-md:  clamp(1.00rem, 0.96rem + 0.22vw, 1.12rem);
  --t-lg:  clamp(1.15rem, 1.05rem + 0.45vw, 1.40rem);
  --t-xl:  clamp(1.45rem, 1.20rem + 1.15vw, 2.10rem);
  --t-2xl: clamp(1.75rem, 1.35rem + 1.95vw, 2.90rem);
  --t-3xl: clamp(2.15rem, 1.45rem + 3.20vw, 4.20rem);

  /* Space, also fluid, so vertical rhythm compresses on small screens
     without a breakpoint doing it in one jump. Deliberately generous —
     the first pass filed everything too tightly. */
  --s-1: clamp(0.28rem, 0.26rem + 0.06vw, 0.34rem);
  --s-2: clamp(0.6rem,  0.56rem + 0.18vw, 0.8rem);
  --s-3: clamp(0.95rem, 0.88rem + 0.34vw, 1.3rem);
  --s-4: clamp(1.3rem,  1.18rem + 0.55vw, 1.8rem);
  --s-5: clamp(1.95rem, 1.7rem  + 1.05vw, 2.9rem);
  --s-6: clamp(2.9rem,  2.4rem  + 2.0vw,  4.6rem);
  --s-7: clamp(4rem,    3.2rem  + 3.6vw,  7rem);

  /* Gutter tracks the viewport so a narrow window keeps proportion. */
  --pad: clamp(1.15rem, 0.6rem + 2.6vw, 3rem);
  --measure: 1180px;

  --mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans:'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif:'Newsreader', Georgia, 'Times New Roman', serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--field)}
body{
  background:var(--field); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.7;
  -webkit-font-smoothing:antialiased; position:relative;
  /* Belt and braces: nothing should ever overflow, but if a third-party
     embed tries, the page must not scroll sideways. */
  overflow-x:hidden;
}
/* The field: two soft washes, fixed, so the glass refracts a gradient that
   shifts underneath as the page scrolls. Costs no markup and never affects
   layout or scroll height. */
body::before{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(1100px 620px at 12% -8%, var(--wash-1), transparent 62%),
    radial-gradient(900px 700px at 96% 8%, var(--wash-2), transparent 58%),
    radial-gradient(800px 800px at 50% 108%, rgba(26,91,147,.10), transparent 60%);
}
img,svg,video{max-width:100%;height:auto}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.sheet{max-width:var(--measure);margin:0 auto;padding-inline:var(--pad);width:100%}

/* A reading-measure block that ALSO carries .sheet is a conflict: .prose and
   .legal set a narrow max-width, which wins over .sheet's, and .sheet's
   margin:0 auto then centres that narrow block on the viewport — so body copy
   floats to the middle of the screen while the section heading above it stays
   on the page's left grid line. Keep the sheet column, and move the reading
   measure onto the children so text starts on the same vertical as its
   heading. !important is needed only to beat inline max-width on two pages. */
.sheet.prose,.sheet.legal{max-width:var(--measure)!important}
.sheet.prose > *,.sheet.legal > *{max-width:70ch}

/* Long unbroken strings (URLs in findings) must never widen the page. */
.break{overflow-wrap:anywhere;word-break:break-word}

/* ── Glass ───────────────────────────────────────────────────────────────
   Reusable on anything that should float above the field. Never applied to
   long-form reading (.legal-sec, .prose) — text over a translucent surface
   over a gradient is a legibility tax with no payoff. */
.glass{background:var(--glass);border:1px solid var(--glass-line);
  box-shadow:var(--glass-shadow);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(150%);
  backdrop-filter:blur(var(--glass-blur)) saturate(150%)}
/* Firefox without backdrop-filter, and any browser that lacks it: fall back
   to opaque paper so the surface stays readable rather than muddy. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass,.masthead,.mobile-menu,.panel,.report{background:var(--paper)!important}
}

/* ── Masthead ────────────────────────────────────────────────────────────── */
.masthead{border-bottom:1px solid var(--rule);background:var(--glass);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  backdrop-filter:blur(18px) saturate(160%);
  position:sticky;top:0;z-index:60}
.mast-in{max-width:var(--measure);margin:0 auto;padding:var(--s-3) var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-4)}

/* The wordmark. Lowercase sans, the way the brand has always set it, with
   the ∅ carrying the colour. No slash, no serif — the serif is for reading
   type, and the mark is not reading type. */
.wordmark{font-family:var(--sans);
  font-size:clamp(0.98rem,0.92rem + 0.3vw,1.15rem);
  font-weight:600;letter-spacing:-0.005em;text-decoration:none;color:var(--ink);
  white-space:nowrap;flex-shrink:0;display:inline-flex;align-items:baseline;
  gap:0.34em}
.wordmark .mark{color:var(--blue-bright);font-weight:700;
  font-size:1.12em;line-height:1}
.wordmark:hover .mark{color:var(--blue)}

.mast-nav{display:flex;gap:clamp(0.9rem,0.4rem + 1.4vw,1.7rem);align-items:center;
  min-width:0}
.mast-nav a{font-size:var(--t-sm);color:var(--ink-2);text-decoration:none;
  white-space:nowrap}
.mast-nav a:hover{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.mast-cta{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:0.06em;
  text-transform:uppercase;color:#f4f9fd!important;background:var(--blue);
  padding:0.65rem 1rem;text-decoration:none!important;flex-shrink:0;
  box-shadow:0 6px 18px -10px rgba(26,91,147,.9)}
.mast-cta:hover{background:var(--blue-bright)}
.burger{display:none;width:44px;height:44px;border:0;background:none;cursor:pointer;
  place-items:center;flex-shrink:0;margin-right:calc(var(--s-2) * -1);
  color:var(--ink-2)}
.burger:hover{background:rgba(26,91,147,.10)}
.burger:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}

.docket{border-bottom:1px solid var(--rule);background:var(--glass-2);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.docket-in{max-width:var(--measure);margin:0 auto;padding:0.55rem var(--pad);
  display:flex;gap:clamp(0.9rem,0.4rem + 1.6vw,1.7rem);font-family:var(--mono);
  font-size:var(--t-xs);color:var(--ink-3);letter-spacing:0.04em;flex-wrap:wrap}

/* The mobile sheet. Not a dropdown: a panel, like the rest of the language.
 *
 * OPAQUE ON PURPOSE. This panel was glass, and glass failed here twice over.
 * First, a backdrop-filter is neutered when an ancestor has one: .masthead is
 * itself glass, which makes it both a stacking context and the containing
 * block for this fixed child, so the child's "backdrop" is the masthead
 * rather than the page — the blur silently did nothing. Second, even at 86%
 * white, #0f2438 body text underneath still reads through as grey. The result
 * was a menu you could read the hero straight through. A navigation panel's
 * only job is to be legible, so it gets a solid surface and the page behind
 * it gets a scrim. */
.mobile-menu{display:none;position:fixed;inset:auto var(--pad) auto var(--pad);
  top:calc(100% + 6px);z-index:59;background:var(--paper-2);
  border:1px solid var(--rule);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset,
             0 26px 50px -22px rgba(15,42,71,.55),
             0 2px 8px -2px rgba(15,42,71,.2);
  padding:var(--s-2);max-height:calc(100dvh - 100%);overflow-y:auto;
  overscroll-behavior:contain}

/* The scrim. A sibling of the masthead rather than a pseudo-element on it,
   because .masthead's backdrop-filter would contain a fixed pseudo-element to
   the masthead's own box instead of the viewport. */
.nav-scrim{position:fixed;inset:0;z-index:58;background:rgba(9,25,42,.42);
  opacity:0;pointer-events:none;transition:opacity .16s ease}
body.nav-open .nav-scrim{opacity:1;pointer-events:auto}
/* Holding the page still underneath means the menu never scrolls away from
   the burger that opened it. */
body.nav-open{overflow:hidden}
.masthead.open .mobile-menu{display:block}
.mobile-menu a{display:block;padding:0.8rem 0.9rem;font-size:var(--t-base);
  color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--rule)}
.mobile-menu a:last-child{border-bottom:0}
.mobile-menu a:hover{background:var(--blue-soft);color:var(--blue)}
.mobile-menu .mm-cta{background:var(--blue);color:#f4f9fd;
  text-align:center;font-family:var(--mono);font-size:var(--t-xs);
  letter-spacing:0.06em;text-transform:uppercase;margin-top:var(--s-2);border:0}
.mobile-menu .mm-cta:hover{background:var(--blue-bright);color:#f4f9fd}

/* The nav collapses on available room, not on a device guess. */
@media (max-width:860px){
  .mast-nav{display:none}
  .burger{display:grid}
  .masthead{position:relative}
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:0.07em;
  text-transform:uppercase;padding:0.9rem 1.6rem;text-decoration:none;
  display:inline-block;border:1px solid transparent;cursor:pointer;
  transition:background .14s,color .14s,box-shadow .14s;text-align:center}
.btn-solid{background:var(--blue);color:#f4f9fd;
  box-shadow:0 10px 26px -14px rgba(26,91,147,.95)}
.btn-solid:hover{background:var(--blue-2);color:#f4f9fd}
.btn-line{border-color:var(--blue);color:var(--blue);background:var(--glass-2);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.btn-line:hover{background:var(--blue);color:#f4f9fd}
.btn-sm{padding:0.58rem 1rem}
.btn:focus-visible{outline:2px solid var(--blue-bright);outline-offset:2px}
.btn-row{display:flex;gap:var(--s-3);flex-wrap:wrap;align-items:center}
/* Once the CTAs stack, differing label lengths make the secondary button
   wider than the primary and invert the visual hierarchy. Stacked means
   full width for both, so emphasis comes from fill alone. */
@media (max-width:520px){
  .hero-actions,.btn-row{flex-direction:column;align-items:stretch}
  .hero-actions .btn,.btn-row .btn{width:100%}
}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero{padding-block:var(--s-7) var(--s-6);border-bottom:1px solid var(--rule)}
.hero-grid{display:grid;gap:var(--s-6);align-items:end;
  grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}
/* Below this the marginal column has nowhere useful to sit, so it stacks. */
@media (max-width:840px){ .hero-grid{grid-template-columns:1fr} }
.hero h1{font-family:var(--serif);font-weight:400;font-size:var(--t-3xl);
  line-height:1.04;letter-spacing:-0.02em;max-width:16ch;text-wrap:balance}
.hero h1 em{font-style:italic;color:var(--blue)}
.hero-lede{margin-top:var(--s-4);font-size:var(--t-md);color:var(--ink-2);max-width:48ch}
.hero-tag{margin-top:var(--s-2);font-size:var(--t-sm);color:var(--ink-3);max-width:52ch}
.hero-actions{margin-top:var(--s-5);display:flex;gap:var(--s-3);flex-wrap:wrap;
  align-items:center}
.hero-privacy{margin-top:var(--s-4);font-size:var(--t-xs);color:var(--ink-3);
  letter-spacing:0.04em}
.hero-fine{margin-top:var(--s-3);font-family:var(--mono);font-size:var(--t-xs);
  color:var(--ink-3);letter-spacing:0.04em}

.margin-note{padding:var(--s-4) var(--s-4)}
.margin-note::before{content:'';display:block;width:34px;height:2px;
  background:var(--blue-bright);margin-bottom:var(--s-3)}
.margin-label{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:0.1em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:var(--s-2)}
.spec{font-family:var(--mono);font-size:var(--t-xs);line-height:2.05;color:var(--ink-2);
  font-variant-numeric:tabular-nums}
.spec b{color:var(--ink);font-weight:500}
.spec .neg{color:var(--seal)}
.spec-row{display:flex;justify-content:space-between;gap:var(--s-3)}

/* ── Sections ────────────────────────────────────────────────────────────── */
.sec{padding-block:var(--s-6);border-bottom:1px solid var(--rule)}
.sec:last-of-type{border-bottom:0}
.sec-head{display:grid;grid-template-columns:clamp(38px,5vw,64px) minmax(0,1fr);
  gap:var(--s-4);align-items:start;margin-bottom:var(--s-5)}
.sec-num{font-family:var(--mono);font-size:var(--t-xs);color:var(--blue);
  letter-spacing:0.08em;padding-top:0.7rem;border-top:1.5px solid var(--blue);
  white-space:nowrap}
.sec h2{font-family:var(--serif);font-weight:400;font-size:var(--t-2xl);
  line-height:1.12;letter-spacing:-0.015em;max-width:24ch;text-wrap:balance}
.sec-sub{margin-top:var(--s-2);color:var(--ink-2);max-width:58ch;font-size:var(--t-base)}
/* The numeral column is sized for "01". Pages that use a word here
   ("TIER 1", "FAQ", "SUMMARY") need the column to size to its content
   instead, or the label wraps mid-phrase. */
.sec-head:has(.sec-num){grid-template-columns:minmax(clamp(38px,5vw,64px),auto) minmax(0,1fr)}
@media (max-width:600px){
  .sec-head,.sec-head:has(.sec-num){grid-template-columns:1fr;gap:var(--s-2)}
  .sec-num{border-top:0;padding-top:0}
}

/* ── Prose ───────────────────────────────────────────────────────────────── */
.prose{max-width:68ch;font-size:var(--t-md);color:var(--ink-2)}
.prose > * + *{margin-top:1.15em}
.prose strong{color:var(--ink);font-weight:600}
.prose a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.prose a:hover{color:var(--blue-bright)}
.prose h3{font-family:var(--serif);font-weight:500;font-size:var(--t-lg);
  color:var(--ink);margin-top:1.8em;line-height:1.25}
.prose ul,.prose ol{padding-left:1.15em}
.prose li + li{margin-top:0.5em}
.pull{font-family:var(--serif);font-size:var(--t-xl);line-height:1.34;color:var(--ink);
  border-left:2px solid var(--blue-bright);padding-left:var(--s-4);
  margin-block:var(--s-5)}

/* ── Ledger: the house alternative to a card grid ────────────────────────── */
.ledger{border-top:1.5px solid var(--blue)}
.row{display:grid;grid-template-columns:clamp(34px,4.5vw,64px) minmax(0,1fr) auto;
  gap:var(--s-4);padding:var(--s-4) 0;border-bottom:1px solid var(--rule);
  align-items:baseline}
/* The last row's separator would double up with whatever rule closes the
   section, leaving an empty banded strip at the foot of every ledger. */
.ledger .row:last-child{border-bottom:0}
.row-n{font-family:var(--mono);font-size:var(--t-xs);color:var(--blue)}
/* These are <span>s in the markup, so they need to be told to stack —
   as inlines the title and description run together as one sentence and
   the margin-top below is silently discarded. */
.row-t{display:block;font-weight:500;font-size:var(--t-base)}
.row-d{display:block;font-size:var(--t-sm);color:var(--ink-2);margin-top:0.25rem;max-width:66ch}
@media (max-width:620px){
  .row{grid-template-columns:clamp(28px,7vw,40px) minmax(0,1fr);row-gap:var(--s-2)}
  /* Dropped onto their own line, trailing chips would otherwise stretch to
     the full column width and stop reading as chips. */
  .row > :last-child:not(.row-n):not(:nth-child(2)){grid-column:2;justify-self:start}
}

.tag{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:0.07em;
  text-transform:uppercase;padding:0.18rem 0.55rem;border:1px solid var(--rule);
  color:var(--ink-3);white-space:nowrap;display:inline-block}
.tag.act{background:var(--blue);border-color:var(--blue);color:#f4f9fd}
.tag.risk{border-color:var(--seal);color:var(--seal);background:rgba(138,50,48,.07)}
.tag.flag{border-color:var(--flag);color:var(--flag)}
.tag.ok{border-color:var(--clear);color:var(--clear)}
.tag.info{border-color:var(--blue);color:var(--blue)}
/* nowrap is right for a chip sitting inline among others, but a <p class="tag">
   is a block label on its own line and can be long enough to blow the page
   open at mid widths. Blocks wrap. */
p.tag{white-space:normal}

/* ── Panels and report blocks ────────────────────────────────────────────── */
.panel{background:var(--glass);border:1px solid var(--glass-line);
  box-shadow:var(--glass-shadow);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(150%);
  backdrop-filter:blur(var(--glass-blur)) saturate(150%)}
.panel-head{display:flex;justify-content:space-between;align-items:baseline;
  gap:var(--s-4);padding:var(--s-3) var(--s-4);
  border-bottom:1px solid var(--rule);flex-wrap:wrap}
.panel-title{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:0.08em;
  text-transform:uppercase;color:var(--ink-2)}
.panel-title b{color:var(--ink)}
.panel-body{padding:var(--s-4)}

/* Auto-fit means these never wedge at an awkward width; they reflow by room. */
.scores{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));
  border-bottom:1px solid var(--rule)}
/* Cells are separated by a right-hand rule while they sit side by side. Once
   auto-fit drops them to a single column that rule becomes a stray vertical
   line down the middle of nothing, so below the reflow point it swaps to a
   horizontal divider instead. 190px minmax + 2 gutters is where that happens. */
.score{padding:var(--s-4);border-right:1px solid var(--rule);background:var(--glass-2)}
.score:last-child{border-right:0}
@media (max-width:460px){
  .score{border-right:0;border-bottom:1px solid var(--rule)}
  .score:last-child{border-bottom:0}
}
.score .k{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:0.1em;
  text-transform:uppercase;color:var(--ink-3)}
.score .v{font-family:var(--serif);font-size:var(--t-xl);line-height:1.1;
  margin-top:0.2rem;color:var(--blue)}
.score .n{font-size:var(--t-xs);color:var(--ink-3);margin-top:0.1rem}
.score .v.med{color:var(--flag)} .score .v.high{color:var(--seal)}
.score .v.low{color:var(--clear)}

/* A score is a quantity, not just a number: a hairline meter under it. */
.meter{margin-top:0.55rem;height:3px;background:var(--rule);position:relative}
.meter::after{content:'';position:absolute;inset:0 38% 0 0;background:var(--blue-bright)}
.meter.med::after{inset:0 45% 0 0;background:var(--flag)}
.meter.full::after{inset:0 0 0 0;background:var(--ink-3)}

/* ── The scan report specimen ────────────────────────────────────────────
   A real report rendered as static markup, used on the marketing pages so a
   visitor sees the actual product rather than a mockup of it. */
.report{background:var(--glass);border:1px solid var(--glass-line);
  box-shadow:var(--glass-shadow);overflow:hidden;
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(150%);
  backdrop-filter:blur(var(--glass-blur)) saturate(150%)}
.rep-head{display:flex;justify-content:space-between;align-items:baseline;
  gap:var(--s-4);padding:var(--s-3) var(--s-4);
  border-bottom:1px solid var(--rule);flex-wrap:wrap;
  background:linear-gradient(180deg,rgba(36,120,181,.10),transparent)}
.rep-title{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:0.08em;
  text-transform:uppercase;color:var(--ink-2)}
.rep-title b{color:var(--ink)}
.rep-expiry{font-family:var(--mono);font-size:var(--t-xs);color:var(--ink-3)}

.rep-scores{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));
  border-bottom:1px solid var(--rule)}
.rep-scores .score{padding:var(--s-4)}

.finding{padding:var(--s-4);border-bottom:1px solid var(--rule)}
.finding:last-of-type{border-bottom:1px solid var(--rule)}
.f-top{display:flex;gap:var(--s-2);align-items:center;flex-wrap:wrap;margin-bottom:var(--s-2)}
.f-idx{font-family:var(--mono);font-size:var(--t-xs);color:var(--ink-3);
  letter-spacing:0.08em;text-transform:uppercase}
.f-title{font-family:var(--serif);font-size:var(--t-lg);line-height:1.28;
  letter-spacing:-0.01em;margin-bottom:0.3rem;text-wrap:balance}
/* The one line in the whole system most likely to be a long unbroken string,
   and the exact spot that overflowed a 320px screen before this rule existed. */
.f-url{font-family:var(--mono);font-size:var(--t-xs);color:var(--ink-3);
  overflow-wrap:anywhere;margin-bottom:var(--s-2)}
.f-body{font-size:var(--t-base);color:var(--ink-2);max-width:74ch}
.f-analysis{margin-top:var(--s-3);border-left:2px solid var(--blue);padding-left:var(--s-3)}
.f-analysis summary{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:0.08em;
  text-transform:uppercase;color:var(--ink-3);cursor:pointer;list-style:none}
.f-analysis summary::-webkit-details-marker{display:none}
.f-analysis summary::before{content:'+ ';color:var(--blue)}
.f-analysis[open] summary::before{content:'\2212 '}
.f-analysis summary:focus-visible{outline:2px solid var(--blue-bright);outline-offset:2px}
.f-analysis p{margin-top:var(--s-2);font-size:var(--t-sm);color:var(--ink-2);max-width:72ch}
.f-actions{margin-top:var(--s-3);display:flex;gap:var(--s-2);flex-wrap:wrap}
.f-btn{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:0.06em;
  text-transform:uppercase;padding:0.5rem 0.85rem;border:1px solid var(--rule);
  background:var(--glass-2);color:var(--ink);cursor:pointer;text-decoration:none;
  display:inline-block;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.f-btn:hover{background:var(--paper-3);border-color:var(--blue)}
.f-btn.primary{background:var(--blue);border-color:var(--blue);color:#f4f9fd}
.f-btn.primary:hover{background:var(--blue-2);border-color:var(--blue-2)}
.f-btn:focus-visible{outline:2px solid var(--blue-bright);outline-offset:2px}

.rep-more{padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--rule);
  display:flex;justify-content:space-between;gap:var(--s-4);flex-wrap:wrap;
  font-family:var(--mono);font-size:var(--t-xs);color:var(--ink-3)}
.rep-more a{color:var(--blue);text-decoration:none}
.rep-more a:hover{text-decoration:underline;text-underline-offset:3px}

.brokers{padding:var(--s-4);background:var(--glass-2)}
.brokers h3{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:0.1em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:0.2rem}
.brokers > p{font-size:var(--t-sm);color:var(--ink-2);margin-bottom:var(--s-3)}
.broker-row{display:flex;flex-wrap:wrap;gap:var(--s-3);justify-content:space-between;
  align-items:center;padding:var(--s-3) 0;border-top:1px solid var(--rule)}
.broker-name{font-size:var(--t-base);font-weight:500}
.broker-status{font-family:var(--mono);font-size:var(--t-xs);color:var(--ink-3)}

/* ── Forms ───────────────────────────────────────────────────────────────── */
.field{margin-bottom:var(--s-4)}
.field > label,.lbl{display:block;font-family:var(--mono);font-size:var(--t-xs);
  letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-3);
  margin-bottom:0.45rem}
input[type=text],input[type=email],input[type=tel],input[type=date],
input[type=number],input[type=search],select,textarea{
  width:100%;font-family:var(--sans);font-size:var(--t-base);color:var(--ink);
  background:rgba(255,255,255,.72);border:1px solid var(--rule);border-radius:0;
  padding:0.75rem 0.9rem;-webkit-appearance:none;appearance:none}
select{background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),
  linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:2.2rem}
input:focus,select:focus,textarea:focus{outline:2px solid var(--blue);
  outline-offset:-1px;border-color:var(--blue);background:#fff}
.hint{font-size:var(--t-xs);color:var(--ink-3);margin-top:0.4rem}
.grid-2{display:grid;gap:var(--s-4);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
/* A grid item defaults to min-width:auto and will not shrink below its content,
   which is how a form blows a 320px screen open. */
.grid-2 > *{min-width:0}
/* Exactly four short tiles. auto-fit lands 3-up inside a nested content
   column and orphans the fourth on its own row, so this is an explicit 2x2. */
.grid-quad{display:grid;gap:var(--s-4);grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-quad > *{min-width:0}
@media (max-width:560px){ .grid-quad{grid-template-columns:1fr} }

/* Tick lists reuse .row with a 1.1em marker column but inherit its --s-4
   gutter, stranding the glyph ~29px from its label. */
.ledger .row[style*="1.1em"]{column-gap:var(--s-2)}

/* ── Legal documents ─────────────────────────────────────────────────────── */
.legal-head{padding-block:var(--s-6) var(--s-5);border-bottom:1px solid var(--rule);
  text-align:center}
.legal-head h1{font-family:var(--serif);font-weight:400;font-size:var(--t-2xl);
  letter-spacing:-0.015em}
.legal-head .updated{margin-top:var(--s-2);font-family:var(--mono);font-size:var(--t-xs);
  color:var(--ink-3);letter-spacing:0.04em}
.legal-intro{max-width:70ch;margin:var(--s-5) auto 0;font-size:var(--t-base);
  color:var(--ink-2);text-align:center;line-height:1.8}
.legal-intro a{color:var(--blue)}
/* The global *{margin:0} reset strips paragraph spacing; multi-paragraph
   intros were running together as one centred blob. */
.legal-intro > * + *{margin-top:0.9em}

.legal{max-width:74ch;margin:0 auto}
.legal-sec{padding-block:var(--s-5);border-top:1px solid var(--rule)}
.legal-sec:first-child{border-top:0}
.legal-num{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:0.1em;
  text-transform:uppercase;color:var(--blue)}
.legal-sec h3{font-family:var(--serif);font-weight:500;font-size:var(--t-xl);
  color:var(--ink);margin:0.2rem 0 var(--s-3);line-height:1.2}
.legal-sec h4,.legal-sub{font-family:var(--mono);font-size:var(--t-xs);
  letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-3);
  margin:var(--s-4) 0 0.45rem;font-weight:500}
.legal-sec p{font-size:var(--t-base);color:var(--ink-2);line-height:1.8;margin-top:0.75em}
.legal-sec p:first-of-type{margin-top:0}
.legal-sec ul{padding-left:1.15em;margin-top:0.75em}
.legal-sec li{font-size:var(--t-base);color:var(--ink-2);line-height:1.75}
.legal-sec li + li{margin-top:0.45em}
.legal-sec a{color:var(--blue)}

/* --blue-soft is only two values off the field, so on a page with no white
   sheet behind it (the legal pages) the callout had no visible surface at
   all and read as a stray left border. It gets a real fill and a hairline. */
.callout{border:1px solid var(--rule);border-left:2px solid var(--blue);
  background:var(--paper-2);
  padding:var(--s-3) var(--s-4);margin-top:var(--s-3);font-size:var(--t-sm);
  color:var(--ink-2);line-height:1.75}
.callout a{color:var(--blue);font-weight:500}
.callout.plain{border-left-color:var(--rule-strong);background:var(--paper-3);
  color:var(--ink-2)}
/* Oxblood only where the callout is genuinely a warning. */
.callout.warn{border-left-color:var(--seal);background:var(--seal-soft)}
.callout .lbl{display:block;font-family:var(--mono);font-size:var(--t-xs);
  font-weight:600;color:var(--ink-2);text-transform:uppercase;letter-spacing:0.06em;
  margin-bottom:0.4rem}
.callout.center{text-align:center;max-width:44ch;margin-left:auto;margin-right:auto}
/* Left over from the pre-Dossier build and never defined, so the contact
   address block rendered as bare unstyled text on both legal pages. */
.privacy-callout,.terms-callout{border:1px solid var(--rule);
  border-left:2px solid var(--blue);background:var(--paper-2);
  padding:var(--s-3) var(--s-4);margin-top:var(--s-3);font-size:var(--t-sm);
  color:var(--ink-2);line-height:1.75;max-width:44ch;margin-inline:auto}
.callout p{margin:0}
.callout p + p{margin-top:0.45em}

/* ── Citations (research page) ────────────────────────────────────────────── */
.citation{font-size:var(--t-xs);color:var(--ink-3);margin-top:var(--s-3);
  padding-top:var(--s-3);border-top:1px solid var(--rule);line-height:1.65}
.citation a{color:var(--ink-3);text-decoration:underline;text-underline-offset:2px}
.citation a:hover{color:var(--blue)}
.case-block{border:1px solid var(--rule);background:var(--glass-2);
  padding:var(--s-3) var(--s-4);margin-top:var(--s-3)}
.case-block:first-child{margin-top:0}
.case-block .name{font-weight:600;color:var(--ink);font-size:var(--t-sm)}
.case-block p{font-size:var(--t-sm);color:var(--ink-2);margin-top:0.45em}
.stat-big{font-family:var(--serif);font-size:clamp(3rem,7vw,4.5rem);line-height:1;
  text-align:center;color:var(--blue)}
.abbr-col{display:flex;gap:var(--s-3);align-items:flex-start;margin-top:var(--s-3)}
.abbr-col:first-child{margin-top:0}
.abbr-col .ab{font-family:var(--mono);font-size:var(--t-lg);color:var(--blue);
  flex-shrink:0;width:2.2em}

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.qa{border-top:1.5px solid var(--blue)}
.qa details{border-bottom:1px solid var(--rule)}
/* Same as the ledger: the final separator would sit just above the section
   rule with nothing between them, reading as an empty band. */
.qa details:last-child{border-bottom:0}
.qa summary{padding:var(--s-4) 0;cursor:pointer;list-style:none;display:flex;
  justify-content:space-between;gap:var(--s-4);align-items:baseline;
  font-family:var(--serif);font-size:var(--t-lg);letter-spacing:-0.01em}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--blue)}
.qa summary:focus-visible{outline:2px solid var(--blue-bright);outline-offset:2px}
.qa summary::after{content:'+';font-family:var(--mono);color:var(--blue);
  font-size:var(--t-base);flex-shrink:0}
.qa details[open] summary::after{content:'\2212'}
.qa .a{padding-bottom:var(--s-4);font-size:var(--t-base);color:var(--ink-2);max-width:70ch}

/* ── Close and footer ────────────────────────────────────────────────────── */
.close{padding-block:var(--s-7)}
.close h2{font-family:var(--serif);font-weight:400;font-size:var(--t-2xl);
  line-height:1.08;max-width:20ch;text-wrap:balance}
.close p{margin-top:var(--s-3);font-size:var(--t-md);color:var(--ink-2)}
.stamp{display:inline-block;margin-top:var(--s-4);border:1.5px solid var(--blue);
  color:var(--blue);font-family:var(--mono);font-size:var(--t-xs);letter-spacing:0.14em;
  text-transform:uppercase;padding:0.45rem 0.85rem;transform:rotate(-1.4deg);
  background:var(--glass-2)}

footer{border-top:1px solid var(--rule);background:var(--glass-2);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);margin-top:auto}
.foot-in{max-width:var(--measure);margin:0 auto;padding:var(--s-4) var(--pad);
  display:flex;justify-content:space-between;gap:var(--s-4);flex-wrap:wrap;
  font-family:var(--mono);font-size:var(--t-xs);color:var(--ink-3);letter-spacing:0.04em}
.foot-links{display:flex;gap:var(--s-4);flex-wrap:wrap}
.foot-in a{color:var(--ink-2);text-decoration:none}
.foot-in a:hover{color:var(--blue);text-decoration:underline;text-underline-offset:3px}

/* ── Utility ─────────────────────────────────────────────────────────────── */
.hidden{display:none!important}
.muted{color:var(--ink-3)}
.center{text-align:center}
.stack > * + *{margin-top:var(--s-4)}
.page{min-height:100vh;display:flex;flex-direction:column}
/* Sticky footer. On a short page (settings, payment-success, a signed-out
   dashboard) the leftover space used to pile up as one dead void above the
   footer. "safe center" takes up that slack only when slack exists — once
   the content is taller than the space, it behaves as flex-start, so a long
   page can never have its top pushed up under the masthead. */
.page main{flex:1;display:flex;flex-direction:column;justify-content:safe center}
.page main > *{flex-shrink:0}
.lead-in{padding-block:var(--s-6) var(--s-5);border-bottom:1px solid var(--rule)}
.lead-in h1{font-family:var(--serif);font-weight:400;font-size:var(--t-2xl);
  line-height:1.08;letter-spacing:-0.02em;max-width:22ch;text-wrap:balance}
.lead-in h1 em{font-style:italic;color:var(--blue)}
.lead-in p{margin-top:var(--s-3);font-size:var(--t-md);color:var(--ink-2);max-width:56ch}
/* `.lead-in p` outranks `.hero-fine`, so the mono kickers were rendering at
   body size. Restore them to docket-label size at matching specificity. */
.lead-in p.hero-fine,.lead-in p.mono{font-size:var(--t-xs);max-width:none}
/* text-align:center only centres the text inside a box. These children carry
   a max-width, so without auto inline margins the box itself stays flush left
   and the "centred" line lands off-axis from the heading above it. */
.lead-in.center > *,.legal-head.center > *{margin-inline:auto}

::selection{background:var(--blue);color:#f4f9fd}
a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:2px solid var(--blue-bright);outline-offset:3px}

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