/*
  SubIQ — shared stylesheet. Extracted from index.html 2026-10-12 when the
  privacy and FAQ pages were added.

  WHY A FILE AND NOT THREE COPIES: this folder has already paid once for two
  copies of the same logic drifting apart. Three copies of 190 lines of tokens
  would guarantee the utility pages slowly stop matching the homepage, which is
  the one thing "in the same theme" has to keep being true.

  CSP: vercel.json serves `style-src 'self' 'unsafe-inline'`, so a same-origin
  stylesheet is allowed and a hosted one still is not. Do not move this to a CDN
  — `default-src 'none'` is a sales asset, not housekeeping, and the page must
  break if anyone adds an external request.
*/
/*
@font-face { font-family:'Newsreader'; src:url('fonts/newsreader.woff2') format('woff2');
             font-weight:400; font-display:swap; }
*/
:root{
  --ink:#10263C;
  --ink-deep:#0B1B2B;
  --body:#2C3238;
  --paper:#FBFAF8;
  --band:#F3F0EA;
  --rule:#E6E2DB;
  --accent:#D9541F;
  --accent-dark:#FF8A4C;   /* the accent lifted for legibility on navy only */
  /* AA-safe variants added 2026-09-09 after an audit found 11 small-text pairs
     below 4.5:1. Same idea as --accent-dark: one token per context, computed as
     the SMALLEST change that clears the threshold, so the design barely moves.
     --accent itself is UNCHANGED: large orange headings only need 3:1 and pass. */
  --accent-ink:#B24517;    /* accent for text under 24px on light grounds. 4.91 on band */
  --muted:#5C6875;         /* small grey text on light grounds. 5.00 on band */
  --on-dark-mid:#8194A7;   /* small grey text on navy. 4.93 on ink, 5.58 on deep */
  --on-dark:#FBFAF8;
  --on-dark-mid:#B9C6D3;
  --on-dark-low:#8FA1B3;
  --serif: ui-serif, 'Iowan Old Style', Charter, 'Palatino Linotype', Palatino, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, system-ui, 'Helvetica Neue', Arial, sans-serif;
  --wrap: 74rem;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:no-preference){ html{ scroll-behavior:smooth; } }
body{
  margin:0; background:var(--paper); color:var(--body);
  font-family:var(--sans); font-size:1.0625rem; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.wrap{ max-width:var(--wrap); margin:0 auto; padding-left:clamp(1.25rem,4vw,2.5rem); padding-right:clamp(1.25rem,4vw,2.5rem); }
h1,h2,h3{ font-family:var(--serif); font-weight:400; color:var(--ink); letter-spacing:-.02em; margin:0; text-wrap:balance; }
p{ margin:0; text-wrap:pretty; }
strong{ font-weight:600; color:var(--ink); }

/* Micro-labels. Uppercase and widely tracked so a small line reads as a considered
   label rather than as shouting. Orange is spent here and on the hero ask only. */
.label{ font-size:.75rem; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); }
.label-dark{ color:var(--accent-dark); }
/* Two sections carry their question in the label slot rather than in an h2. They are
   still questions and must read at heading weight, not as a micro-label. */
.label:not(.sec-q):not(.label-dark){ color:var(--accent-ink); }
.sec-q{ margin-bottom:.6rem; font-family:var(--serif); font-style:italic; text-transform:none; letter-spacing:-.01em; font-size:clamp(1.5rem,2.6vw,1.875rem); line-height:1.2; }

/* ---------- masthead ----------
   Sticky, because the page is long and the brand should not scroll away. The mark is
   52px with generous clear space: the knocked-out S in the disc runs into the
   wordmark's own S, and at a tight gap the lockup reads as "SSubIQ". */
.bar{ position:sticky; top:0; z-index:20; background:rgba(251,250,248,.9); backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--rule); }
.bar .wrap{ display:flex; align-items:center; gap:1.25rem; flex-wrap:wrap; padding-top:.875rem; padding-bottom:.875rem; }
.lockup{ display:flex; align-items:center; gap:.75rem; }
.lockup img{ width:68px; height:68px; display:block; }
.wordmark{ font-family:var(--serif); font-size:clamp(2rem,3.6vw,2.625rem); color:var(--ink); line-height:1; letter-spacing:-.015em; }
.bar-tag{ font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); padding-left:1.25rem; border-left:1px solid var(--rule); max-width:22ch; line-height:1.4; }
.spacer{ flex:1; }
.bar nav{ display:flex; gap:1.5rem; white-space:nowrap; flex-wrap:wrap; font-size:.875rem; }
.bar nav a{ color:#40556B; text-decoration:none; display:inline-block; padding:.85rem 0; line-height:1.3; }
.bar nav a:hover{ color:var(--accent); }
.btn{ display:inline-block; background:var(--ink); color:var(--paper); text-decoration:none; font-weight:600; font-size:.9375rem; padding:.7rem 1.25rem; border-radius:2px; }
.btn:hover{ background:#1C3A57; color:var(--paper); }
.btn-light{ background:var(--paper); color:var(--ink); }
.btn-light:hover{ background:var(--accent); color:var(--paper); }

/* ---------- dark bands ---------- */
.dark{ background:var(--ink); color:var(--on-dark); }
.dark h1,.dark h2,.dark h3{ color:var(--on-dark); }
.dark strong{ color:var(--on-dark); }
.hero{ position:relative; overflow:hidden; }
/* A ruled ledger tint, 5% white. It reads as accounting paper rather than as a
   gradient, which is the register this page wants. */
.hero::before{ content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(251,250,248,.05) 1px, transparent 1px); background-size:100% 3.5rem; pointer-events:none; }
.hero .wrap{ position:relative; display:grid; grid-template-columns:repeat(auto-fit,minmax(21rem,1fr)); gap:3.5rem; align-items:start; padding-top:5.5rem; padding-bottom:5rem; }
.hero h1{ font-size:clamp(2.25rem,5.4vw,4rem); line-height:1.04; margin:1.5rem 0 1.5rem; max-width:16ch; }
.hero .dek{ font-size:clamp(1.0625rem,1.6vw,1.1875rem); line-height:1.6; color:var(--on-dark-mid); max-width:40ch; margin-bottom:1.25rem; }
.hero .sub{ font-size:1rem; line-height:1.65; color:var(--on-dark-low); max-width:46ch; margin-bottom:2.25rem; }
.asks{ display:flex; align-items:center; gap:1.25rem; flex-wrap:wrap; }
.addr{ font-size:.875rem; color:var(--on-dark-low); user-select:all; -webkit-user-select:all; }
.fineprint{ font-size:.8125rem; color:var(--on-dark-mid); margin-top:1.125rem; }

/* The hero panel. It states the shape of the deliverable — deliberately NOT sample
   findings, not a table of results and not a query. Nothing on this page shows the
   method; the script is sent by email on request. Do not "improve" this into a
   realistic terminal block. */
.panel{ background:var(--ink-deep); border:1px solid rgba(251,250,248,.14); border-radius:3px; padding:1.75rem; }
.panel h2{ font-size:1.375rem; line-height:1.3; margin:0 0 1rem; }
.panel-head{ display:flex; justify-content:space-between; gap:1rem; border-bottom:1px solid rgba(251,250,248,.12); padding-bottom:.875rem; margin-bottom:1.25rem; font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase; }
.panel-head .r{ color:var(--on-dark-mid); }
.panel ol{ margin:0; padding-left:1.15rem; color:var(--on-dark-mid); font-size:.9375rem; line-height:1.6; }
.panel li{ margin-bottom:.7rem; }
.panel li:last-child{ margin-bottom:0; }
.panel .foot{ font-size:.8125rem; color:var(--on-dark-mid); margin-top:1.25rem; line-height:1.5; padding-top:1rem; border-top:1px solid rgba(251,250,248,.12); }

/* ---------- the guarantee strip ---------- */
.strip{ border-top:1px solid rgba(251,250,248,.12); }
.strip .wrap{ display:grid; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)); }
.strip div{ padding:1.6rem 1.5rem 1.6rem 0; border-right:1px solid rgba(251,250,248,.12); }
.strip div:last-child{ border-right:none; }
.strip .label-dark{ margin-bottom:.4rem; }
.strip p{ font-size:.875rem; line-height:1.5; color:#9FB2C4; }

/* ---------- light sections ---------- */
.pad{ padding-top:5rem; padding-bottom:5rem; }
.split{ display:grid; grid-template-columns:repeat(auto-fit,minmax(20rem,1fr)); gap:3.5rem; align-items:start; }
h2.q{ font-family:var(--serif); font-style:italic; color:var(--accent); font-size:clamp(1.75rem,3.2vw,2.375rem); line-height:1.15; }
h2.q em{ font-style:normal; }
.section-top{ margin-bottom:2.75rem; display:flex; justify-content:space-between; align-items:baseline; gap:2rem; flex-wrap:wrap; }
.section-top .aside{ font-size:.8125rem; letter-spacing:.02em; color:var(--muted); max-width:46ch; line-height:1.5; }
.prose p{ font-size:1rem; line-height:1.7; margin-bottom:1rem; max-width:44ch; }
.prose p:last-child{ margin-bottom:0; }
.prose .close{ padding-top:1rem; border-top:1px solid var(--rule); color:var(--ink); }

/* Audience rows: hairline-separated, name and reason on one baseline. */
.rows{ border-top:1px solid var(--rule); }
.rows > div{ display:grid; grid-template-columns:repeat(auto-fit,minmax(11rem,1fr)); gap:1.25rem; align-items:baseline; padding:1.35rem 0; border-bottom:1px solid var(--rule); }
.rows .who{ font-weight:600; color:var(--ink); }
.rows .why{ font-size:.9375rem; line-height:1.6; }

/* Drift causes. Hairline blocks, no shadows — the page must not read as a SaaS
   marketing site made of floating cards. */
.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(18rem,1fr)); gap:1.75rem; }
.card{ background:#fff; border:1px solid var(--rule); border-radius:3px; padding:1.85rem; }
.card .num{ display:block; font-size:.75rem; letter-spacing:.16em; color:var(--accent-ink); margin-bottom:1.1rem; }
.card h3{ font-size:1.375rem; line-height:1.2; margin-bottom:.85rem; }
.card p{ font-size:.9375rem; line-height:1.65; margin-bottom:.85rem; }
.card .kicker{ font-size:.875rem; color:var(--muted); padding-top:.85rem; border-top:1px solid var(--rule); margin-bottom:0; }

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

/* Quarter bars: four hairline rules, the Q4 one solid navy. A picture of when the
   question arrives, not a chart of anything measured. */
.quarters{ display:grid; grid-template-columns:repeat(4,1fr); gap:.5rem; margin-bottom:1.5rem; }
.quarters .bar-q{ height:6px; border-radius:3px; background:rgba(16,38,60,.16); margin-bottom:.5rem; }
.quarters .q3 .bar-q{ background:var(--accent); }
.quarters .q4 .bar-q{ background:var(--ink); }
.quarters .qt{ font-size:.6875rem; letter-spacing:.1em; color:var(--muted); margin-bottom:.25rem; }
.quarters .qn{ font-size:.8125rem; line-height:1.45; }

/* ---------- the stage table ----------
   Hairline rules and type only. The point of the table is removing suspicion about
   what costs money — a pricing-card look would put the suspicion straight back, and
   no dollar figure goes here until one is actually decided. */
.tiers{ border:1px solid var(--rule); border-radius:3px; overflow-x:auto; }
.tiers table{ width:100%; min-width:44rem; border-collapse:collapse; }
.tiers th{ background:var(--ink); color:#A8B9C9; text-align:left; font-weight:400; font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase; padding:1rem 1.75rem; }
.tiers td{ vertical-align:top; background:#fff; padding:1.75rem; border-top:1px solid var(--rule); font-size:.9375rem; line-height:1.6; }
.tiers td:first-child{ width:13rem; }
.tiers td:last-child{ width:16rem; }
.tiers .stage{ font-family:var(--serif); font-size:1.3125rem; color:var(--ink); line-height:1.2; display:block; margin-bottom:.35rem; }
.tiers .focus{ font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink); }
.tiers .lead{ display:block; margin-bottom:.35rem; }
.notecol{ display:grid; gap:.9rem; align-content:start; font-size:.9375rem; line-height:1.6; }
.pull{ background:var(--band); border-radius:3px; padding:1.75rem; }

/* Limits list, on navy. */
.limits{ margin-top:1.75rem; border-top:1px solid rgba(251,250,248,.14); }
.limits > div{ padding:1.25rem 0; border-bottom:1px solid rgba(251,250,248,.14); }
.limits .t{ font-weight:600; margin-bottom:.35rem; }
.limits .b{ font-size:.9375rem; line-height:1.6; color:#93A6B8; }

/* ---------- closing ask ---------- */
.close-band{ background:var(--band); border-top:1px solid var(--rule); text-align:center; }
.close-band h2{ font-size:clamp(2rem,4.5vw,3.25rem); line-height:1.08; margin:0 auto 1.75rem; max-width:20ch; }
.close-band p.lead{ font-size:1.0625rem; line-height:1.65; margin:0 auto 2rem; max-width:52ch; }

/* ---------- footer ---------- */
footer.dark .wrap{ display:flex; align-items:center; gap:1.25rem; flex-wrap:wrap; padding-top:2.75rem; padding-bottom:2.75rem; font-size:.8125rem; color:var(--on-dark-low); }
footer img{ width:48px; height:48px; display:block; }
footer .wordmark{ font-size:2rem; color:var(--on-dark); }
/* Product Hunt badge. Served from this origin, not api.producthunt.com: the CSP is
   `img-src 'self'` so the hotlinked version renders broken — and that endpoint is an
   impression tracker, which would make the footer's own "no analytics" line false. */
img.ph-badge{ width:250px; height:54px; display:block; }
a.ph-link{ display:inline-block; line-height:0; border:0; }

a{ color:var(--ink); }
a:hover{ color:var(--accent); }
a:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }

@media (max-width:600px){
  .bar-tag{ display:none; }
  /* 28px clears WCAG 2.5.8 (AA, 24px) with margin. Full 44px (2.5.5, AAA) would
     add 23px to a sticky header that is already ~207px tall on a 375px viewport. */
  .bar nav a{ padding:.3rem 0; }
  .pad{ padding-top:3.25rem; padding-bottom:3.25rem; }
  .hero .wrap{ padding-top:3.25rem; padding-bottom:3rem; }
  .strip div{ border-right:none; border-bottom:1px solid rgba(251,250,248,.12); padding-right:0; }
  .quarters{ grid-template-columns:repeat(2,1fr); gap:1rem; }
}

/* ---------- document pages (privacy, FAQ) ----------
   Added 2026-10-12. These two pages are read, not scanned, so they get a single
   narrow measure instead of the homepage's two-column splits. No new colors and
   no new type sizes: every value below is an existing token or an existing size,
   because a utility page that invents its own scale is how a theme starts to
   drift. */
.doc{ max-width:46rem; }
.doc-head{ border-bottom:1px solid var(--rule); padding-bottom:2.25rem; margin-bottom:3rem; }
.doc-head h1{ font-size:clamp(2rem,4.2vw,3rem); line-height:1.08; margin:.9rem 0 1.1rem; }
.doc-head .dek{ font-size:1.0625rem; line-height:1.65; color:var(--body); max-width:42ch; }
.doc-head .stamp{ font-size:.8125rem; color:var(--muted); margin-top:1.25rem; }

/* Each entry is a hairline-separated block: question at heading weight, answer
   in body. Same device as .limits and .rows on the homepage. */
.qa > section{ padding:2.25rem 0; border-bottom:1px solid var(--rule); }
.qa > section:first-child{ padding-top:0; }
.qa h2{ font-family:var(--serif); font-style:italic; color:var(--accent); font-size:clamp(1.375rem,2.4vw,1.75rem); line-height:1.2; margin-bottom:1rem; }
.qa p{ font-size:1rem; line-height:1.7; margin-bottom:.9rem; }
.qa p:last-child{ margin-bottom:0; }
.qa ul{ margin:0 0 .9rem; padding-left:1.15rem; font-size:1rem; line-height:1.7; }
.qa li{ margin-bottom:.5rem; }
.qa li:last-child{ margin-bottom:0; }
.qa .note{ font-size:.9375rem; color:var(--muted); padding-top:.9rem; border-top:1px solid var(--rule); margin-bottom:0; }

/* The back-to-the-argument link at the foot of a document page. */
.doc-foot{ margin-top:3rem; padding-top:2rem; border-top:1px solid var(--rule); display:flex; gap:1.25rem; flex-wrap:wrap; align-items:center; }
.doc-foot .addr-light{ font-size:.9375rem; color:var(--muted); user-select:all; -webkit-user-select:all; }

/* Footer link row. The utility pages are reachable from every page's footer
   rather than from the masthead: the sticky header is already ~207px tall on a
   375px viewport and another nav row is the wrong thing to spend that on. */
footer.dark nav{ display:flex; gap:1.25rem; flex-wrap:wrap; }
footer.dark nav a{ color:var(--on-dark-mid); text-decoration:none; }
footer.dark nav a:hover{ color:var(--accent-dark); }

/* Inline code. Used only on the privacy page, to quote the actual CSP header —
   naming the mechanism is the point there, since "we enforce it" is checkable
   and "we promise" is not. Band ground rather than a box, to stay in register
   with the rest of the page. */
code{ font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:.875em; background:var(--band); border:1px solid var(--rule); border-radius:2px; padding:.1em .35em; color:var(--ink); }