/* Tireless — the shared stylesheet: only rules every page uses (Phase 4B Task 1).
   Brand v2 "Violet glass". Self-hosted fonts, no CDN.
   Homepage-only rules live in index.html's inline <style> block, which loads
   AFTER this file — at equal specificity the homepage's copy of a rule wins by
   cascade order. Order here: @font-face -> :root tokens -> reset/base ->
   typography -> layout -> components -> page sections -> media queries ->
   reduced motion. SPECIFICITY LAW (Phase 4B): no selector may gain specificity
   — the ECHO widget's injected class-selector styles outrank the page's bare
   element rules only while those stay at (0,0,1). */

/* ============ @font-face ============ */
/* One variable file carries every sans weight 400-700 (Phase 4B Task 2) — the
   weight range is what makes 600 a REAL weight; the faux-bold era is over. */
@font-face{font-family:'Instrument Sans';font-weight:400 700;font-display:swap;src:url(fonts/instrument-sans-var.woff2) format('woff2')}
@font-face{font-family:'Ephesis';font-weight:400;font-display:swap;src:url(fonts/ephesis-400.woff2) format('woff2')}

/* ============ :root tokens ============ */
:root{
  --bg:#0b0710; --bg2:#140a1f; --violet:#7c3aed; --magenta:#e0219a;
  /* ink ramp (Phase 4B Task 2): display stays bright, emphasis softens */
  --tl-text-1:#f7f2fb;      /* display ink — headings and the brand mark stay bright */
  --tl-text-2:#e7dcf3;      /* high-emphasis ink — the softened near-white, 15.1:1 */
  --tl-action:#c9188a;      /* solid action fill — white text passes AA at 5.27:1 */
  /* small-text accent (Phase 6 Task 1). The brand magenta #e0219a is a 4.61:1
     colour on flat --bg and drops under the AA floor of 4.5 anywhere light
     falls behind it — measured under floor in six places on the live site
     (worst 3.51, the homepage eyebrow). This token is used ONLY where magenta
     is small text. Every border, glow, gradient, icon stroke and large accent
     keeps #e0219a, so the brand does not move.
     Measured worst reading with this value, all 13 pages, with the Phase 6
     chapter lighting in place: 5.73 against a 4.5 floor. Method: WCAG 2.1
     contrast against the worst pixel under a coverage-based glyph mask on a
     frozen page. If the lighting behind any of these elements is ever
     brightened, RE-MEASURE this token at that point — do not assume the
     margin survives. */
  --tl-text-accent:#f472b6;
  --ink:var(--tl-text-2);   /* every existing var(--ink) usage softens at once */
  --muted:#b9a9cf;
  /* --faint has now been raised twice for the same reason: its contrast was
     measured against a near-black page, and the page keeps getting lighter.
       #7d6f92 -> 4.33:1 against flat --bg  (FAILED AA)
       #8a7da0 -> 5.25:1 against flat --bg  (passed, but only 4.82:1 behind the
                 homepage card, and 3.56:1 once Phase 6 Task 2 lit that hero)
       #9589a9 -> 6.11:1 against flat --bg, 4.83:1 at the worst point on the lit
                 homepage (the 11.5px DEMO tag). AA needs 4.5:1.
     If the homepage background is ever brightened further, re-measure this
     token at that point before shipping — do not assume the margin survives. */
  --faint:#9589a9;
  --glass:rgba(255,255,255,.03); --glass-brd:rgba(255,255,255,.10); --mag-brd:rgba(224,33,154,.25);
  --grad:linear-gradient(90deg,var(--violet),var(--magenta));
  /* --fd stays a distinct variable although it now equals --fb: a serif display
     face is a logged Phase 6 art-direction option, and the two ROLES stay distinct */
  --fd:'Instrument Sans',system-ui,sans-serif; --fb:'Instrument Sans',system-ui,sans-serif; --fs:'Ephesis',cursive;

  /* ---- Phase 5: the fourteen tokens the motion engine consumes -------------
     Canonical definitions live in company/website/redesign/tokens.css; these
     are the deployed subset. motion-token-drift.mjs (scripts/) proves the two
     agree — if you change one, change both or the check fails.
     Aliases point at the live palette so there is one source per colour. Each
     was verified byte-identical before being written: --violet #7c3aed and
     --magenta #e0219a (line 19) against tokens.css:31/:36, --mag-brd
     rgba(224,33,154,.25) (line 26) against tokens.css:58, and --grad (line 27)
     against tokens.css:98. --tl-p-white-a06 is genuinely new: the live --glass
     is .03, which is tokens.css's surface-1, not surface-2. */
  --tl-p-violet-500: var(--violet);
  --tl-p-magenta-500: var(--magenta);
  --tl-p-magenta-a25: var(--mag-brd);
  --tl-p-white-a06: rgba(255,255,255,.06);
  --tl-surface-2: var(--tl-p-white-a06);
  --tl-border-accent: var(--tl-p-magenta-a25);
  --tl-grad-display: var(--grad);
  --tl-e-2: 0 16px 40px rgba(124,20,90,.28);
  --tl-r-sm: 12px;
  --tl-t-fast: 150ms;
  --tl-t-base: 300ms;
  --tl-t-slow: 700ms;
  --tl-ease-out: cubic-bezier(.16, 1, .3, 1);
  --tl-ease-in-out: cubic-bezier(.65, 0, .35, 1);
}

/* ============ reset / base ============ */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
/* gradient sits at 78% 12% here vs 78% 40% on the homepage — intentional per-layout variant (Task 3 row 1), not drift */
body{background:radial-gradient(1200px 700px at 78% 12%,#2a1140 0%,rgba(20,10,31,0) 55%),var(--bg);color:var(--ink);font-family:var(--fb);-webkit-font-smoothing:antialiased;overflow-x:hidden;line-height:1.5;min-height:100vh}
a{color:inherit}

/* ============ layout ============ */
.wrap{max-width:1280px;margin:0 auto;padding:0 56px}

/* ============ typography ============ */
.eyebrow{font-family:var(--fb);font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--tl-text-accent)}
h1.page{font-family:var(--fd);font-weight:700;font-size:clamp(38px,5vw,60px);line-height:1.04;letter-spacing:-.03em;text-wrap:balance;margin:14px 0;color:var(--tl-text-1)}
h1.page .scr{font-family:var(--fs);font-weight:400;color:var(--magenta);font-size:1.15em;line-height:.9;text-shadow:0 0 30px rgba(224,33,154,.4)}
h2{font-family:var(--fd);font-weight:700;font-size:clamp(30px,3.6vw,44px);line-height:1.08;letter-spacing:-.025em;text-wrap:balance;color:var(--tl-text-1)}
h3{font-family:var(--fd);font-weight:600;font-size:22px;letter-spacing:-.01em;color:var(--tl-text-1)}
.lead{color:var(--muted);font-size:clamp(17px,1.4vw,19px);line-height:1.6;max-width:62ch}
p{color:var(--muted)}

/* ============ components: buttons ============ */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--fb);font-weight:600;font-size:16px;border-radius:999px;text-decoration:none;cursor:pointer;border:0;transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s,border-color .3s}
.btn-grad{padding:16px 30px;color:#fff;background:var(--tl-action);box-shadow:0 12px 40px rgba(224,33,154,.32)} /* solid fill per Amendment 2; class name kept (renaming touches 13 files + SEO template for zero visual gain) — Task 3 may revisit */
.btn-grad:hover{transform:translateY(-2px);box-shadow:0 16px 48px rgba(224,33,154,.46)}
.btn-grad .ar{transition:transform .3s cubic-bezier(.16,1,.3,1)}
.btn-grad:hover .ar{transform:translateX(4px)}
.btn-glass{padding:15px 28px;color:var(--ink);border:1px solid var(--glass-brd);background:rgba(255,255,255,.03)}
.btn-glass:hover{border-color:rgba(255,255,255,.3)}
.btn:focus-visible{outline:3px solid var(--violet);outline-offset:3px}

/* ============ components: skip link (Phase 4B Task 3) ============ */
.skip-link{position:fixed;top:14px;left:14px;z-index:60;background:var(--tl-action);color:#fff;font-family:var(--fb);font-weight:600;font-size:15px;padding:12px 22px;border-radius:999px;text-decoration:none;transform:translateY(-250%);box-shadow:0 12px 40px rgba(224,33,154,.32)}
.skip-link:focus-visible{transform:none;outline:3px solid var(--violet);outline-offset:3px}

/* ============ components: nav (matches homepage) ============ */
.nav{position:sticky;top:0;z-index:40;transition:background .3s,border-color .3s,backdrop-filter .3s;border-bottom:1px solid transparent}
.nav.scrolled{background:rgba(11,7,16,.72);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--glass-brd)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:22px 0}
.logo{font-family:var(--fd);font-weight:700;font-size:26px;letter-spacing:-.02em;text-decoration:none;color:var(--tl-text-1)}
.logo b{color:var(--magenta)}
.nav-links{display:flex;gap:32px;align-items:center;color:var(--muted);font-size:16px}
.nav-links a{text-decoration:none;transition:color .2s}
.nav-links a:hover,.nav-links a[aria-current=page]{color:var(--ink)}
.nav-links a[aria-current=page]{color:var(--tl-text-accent)}
.btn-ghost{border:1px solid var(--glass-brd);border-radius:999px;padding:11px 22px;color:var(--ink);font-size:15px;background:rgba(255,255,255,.02);text-decoration:none}
.btn-ghost:hover{border-color:rgba(255,255,255,.3)}
.menu-btn{display:none;background:none;border:1px solid var(--glass-brd);border-radius:10px;width:44px;height:44px;color:var(--ink);cursor:pointer;align-items:center;justify-content:center}
.menu-btn svg{width:20px;height:20px}
.mobile-menu{display:none;flex-direction:column;gap:2px;padding:8px 0 20px}
.mobile-menu a{display:flex;align-items:center;min-height:48px;padding:12px 8px;color:var(--muted);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.05);transition:color .2s,background .2s}
.mobile-menu a:hover{color:var(--ink);background:var(--glass)}
.nav-links a:focus-visible,.foot-links a:focus-visible,.mobile-menu a:focus-visible,.logo:focus-visible{outline:2px solid var(--violet);outline-offset:3px;border-radius:3px}
/* drawer scrim + scroll lock while the mobile menu is open (nav.js toggles nav-open) */
html.nav-open{overflow:hidden}
html.nav-open body::after{content:"";position:fixed;inset:0;background:rgba(11,7,16,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:35}

/* ============ page rhythm & shared blocks ============ */
main{display:block}
.page-head{padding:60px 0 20px}
section{padding:64px 0}
.card{background:var(--glass);border:1px solid var(--glass-brd);border-radius:22px;padding:32px}
.card h3{margin-bottom:12px}
.card p{font-size:16px;line-height:1.6}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.list{list-style:none;display:flex;flex-direction:column;gap:12px;margin-top:16px}
.list li{display:flex;gap:11px;align-items:flex-start;color:var(--muted);font-size:16px;line-height:1.55}
.list li svg{flex:0 0 20px;width:20px;height:20px;stroke:var(--magenta);margin-top:2px}
.note{color:var(--faint);font-size:14px;line-height:1.6;max-width:70ch}
.cta-row{display:flex;gap:15px;align-items:center;flex-wrap:wrap;margin-top:32px}

/* ============ footer (matches homepage) ============ */
footer{border-top:1px solid var(--glass-brd);padding:44px 0 40px;margin-top:48px}
.foot-inner{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:center}
.foot-inner .muted{color:var(--faint);font-size:14px}
.foot-links{display:flex;gap:24px;font-size:14px;color:var(--muted);flex-wrap:wrap}
.foot-links a{text-decoration:none}
.foot-links a:hover{color:var(--ink)}

/* ============ blog index ============ */
.posts{display:flex;flex-direction:column;gap:18px;margin-top:8px}
.post-card{display:block;background:var(--glass);border:1px solid var(--glass-brd);border-radius:20px;padding:28px 30px;text-decoration:none;transition:transform .3s cubic-bezier(.16,1,.3,1),border-color .3s,box-shadow .3s}
.post-card:hover{transform:translateY(-3px);border-color:var(--mag-brd);box-shadow:0 16px 40px rgba(124,20,90,.28)}
.post-card:focus-visible{outline:3px solid var(--violet);outline-offset:3px}
.post-card .kicker{font-size:12.5px;letter-spacing:.06em;color:var(--faint);margin-bottom:10px;display:flex;gap:10px;flex-wrap:wrap}
.post-card h2{font-size:clamp(21px,2.4vw,27px);line-height:1.2;color:var(--tl-text-1)}
.post-card p{color:var(--muted);font-size:16px;line-height:1.55;margin-top:10px;max-width:70ch}
.post-card .more{color:var(--tl-text-accent);font-weight:600;font-size:15px;margin-top:14px;display:inline-flex;gap:7px;align-items:center}
.soon-mini{margin-top:44px}
.soon-mini h3{color:var(--faint);font-size:14px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;margin-bottom:16px}
.soon-mini ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px 24px}
.soon-mini li{color:var(--muted);font-size:15px;padding-left:16px;position:relative}
.soon-mini li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--glass-brd)}

/* ============ article ============ */
.breadcrumb{font-size:13px;color:var(--faint);padding:26px 0 0}
.breadcrumb a{color:var(--muted);text-decoration:none}
.breadcrumb a:hover{color:var(--ink)}
.article-head{padding:22px 0 8px;max-width:760px}
.article-head h1{font-family:var(--fd);font-weight:700;font-size:clamp(30px,4.2vw,48px);line-height:1.08;letter-spacing:-.03em;text-wrap:balance;margin:16px 0 14px;color:var(--tl-text-1)}
.post-meta{display:flex;gap:14px;flex-wrap:wrap;color:var(--faint);font-size:14px}
.post-meta b{color:var(--muted);font-weight:500}
.answer{background:linear-gradient(180deg,rgba(124,58,237,.10),rgba(224,33,154,.05));border:1px solid var(--mag-brd);border-radius:16px;padding:22px 26px;margin:30px 0 8px;max-width:760px}
.answer .lbl{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--tl-text-accent);font-weight:600;margin-bottom:8px}
.answer p{color:var(--ink);font-size:17.5px;line-height:1.55;margin:0}
.prose{max-width:760px;font-size:17px;line-height:1.72}
.prose h2{font-family:var(--fd);font-weight:700;font-size:clamp(24px,2.8vw,32px);letter-spacing:-.02em;line-height:1.2;margin:44px 0 14px;color:var(--tl-text-1);text-wrap:balance}
.prose h3{font-family:var(--fd);font-weight:600;font-size:21px;margin:28px 0 10px;color:var(--tl-text-1)}
.prose p{color:var(--muted);margin:0 0 18px}
.prose a{color:var(--tl-text-accent);text-decoration:none;border-bottom:1px solid var(--mag-brd)}
.prose a:hover{color:var(--ink);border-color:var(--ink)}
.prose ul,.prose ol{margin:0 0 18px 2px;padding-left:20px;color:var(--muted)}
.prose li{margin-bottom:9px;line-height:1.6}
.prose strong{color:var(--ink);font-weight:600}
.prose blockquote{border-left:3px solid var(--magenta);margin:22px 0;padding:4px 0 4px 20px;color:var(--ink);font-style:normal}
.prose table{width:100%;border-collapse:collapse;margin:20px 0;font-size:15.5px}
.prose th,.prose td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--glass-brd)}
.prose th{color:var(--ink);font-family:var(--fd);font-weight:600;font-size:14px}
.prose td{color:var(--muted)}
.tw{overflow-x:auto}
.article-cta{max-width:760px;background:linear-gradient(120deg,rgba(124,58,237,.14),rgba(224,33,154,.10));border:1px solid var(--mag-brd);border-radius:22px;padding:34px;margin:44px 0}
.article-cta h3{font-family:var(--fd);font-weight:700;font-size:24px;color:var(--tl-text-1);margin-bottom:10px}
.article-cta p{color:var(--muted);margin-bottom:20px}
.faq{max-width:760px;margin:44px 0}
.faq h2{margin-bottom:8px}
.faq details{border-bottom:1px solid var(--glass-brd);padding:18px 0}
.faq summary{font-family:var(--fd);font-weight:600;font-size:18px;color:var(--ink);cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--magenta);font-size:22px;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{color:var(--muted);margin:12px 0 0;line-height:1.65}
.next-read{max-width:760px;margin:36px 0}
.next-read a{display:block;border:1px solid var(--glass-brd);border-radius:16px;padding:20px 24px;text-decoration:none;transition:border-color .3s}
.next-read a:hover{border-color:var(--mag-brd)}
.next-read .k{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:6px}
.next-read .t{color:var(--ink);font-family:var(--fd);font-weight:600;font-size:18px}

/* ============ reviews (ready-to-fill; honest empty states, no fake stars) ============ */
.rev-empty{background:rgba(255,255,255,.02);border:1px dashed var(--glass-brd);border-radius:16px;padding:24px;color:var(--muted);font-size:15px;line-height:1.6}
.rev-empty p{color:var(--muted)}
.rev-featured-empty{text-align:center;padding:40px 28px;max-width:760px;margin:0 auto}
.rev-featured-empty h3{font-family:var(--fd);font-weight:600;font-size:20px;color:var(--tl-text-1);margin:6px 0 10px}
.rev-featured-empty p{max-width:56ch;margin:0 auto}
.rev-empty-mark{font-family:var(--fs);color:var(--magenta);font-size:70px;line-height:.4;height:34px;opacity:.55}
.featured-review{background:linear-gradient(180deg,rgba(124,58,237,.10),rgba(224,33,154,.06));border:1px solid var(--mag-brd);border-radius:22px;padding:40px 36px;max-width:820px;margin:0 auto;text-align:center}
.featured-review blockquote{font-family:var(--fd);font-weight:600;font-size:clamp(20px,2.4vw,26px);line-height:1.35;color:var(--tl-text-1);letter-spacing:-.01em}
.featured-review figcaption{margin-top:18px;color:var(--muted);font-size:15px}
.featured-review figcaption a{color:#e7dcf3;border-bottom:1px solid var(--mag-brd);text-decoration:none}
.rev-slot{display:flex;flex-direction:column;gap:16px}
.rev-slot-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.rev-slot-head h3{font-family:var(--fd);font-weight:600;font-size:20px;margin:0} /* margin:0 is NOT redundant (Task 3 row 16 verified false): it guards against .card h3 margin-bottom on slots inside cards */
.rev-verify{color:#e7dcf3;font-size:14px;font-weight:500;text-decoration:none;white-space:nowrap;border-bottom:1px solid var(--mag-brd)}
.rev-verify:hover{color:var(--ink)}
.rev-verify[data-pending="true"]{color:var(--faint);border-bottom-style:dashed;pointer-events:none;cursor:default}
.rev-widget{min-height:96px}
.rev-cta-card{background:linear-gradient(120deg,rgba(124,58,237,.14),rgba(224,33,154,.10));border:1px solid var(--mag-brd);border-radius:24px;padding:40px}
.rev-cta-card .lead{margin-top:6px}

/* ============ media queries ============ */
@media(max-width:900px){.grid2,.grid3{grid-template-columns:1fr}.soon-mini ul{grid-template-columns:1fr}}
@media(max-width:820px){
 .wrap{padding:0 22px}
 .nav-links{display:none}
 .menu-btn{display:flex}
 .nav.open .mobile-menu{display:flex}
 section{padding:48px 0}
}

/* ============ reduced motion ============ */
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}}

/* ============ Phase 6 — chapter system (subpages only) ============
   SCOPE, and why it is safe: every one of the twelve subpages marks its own
   nav link with aria-current="page"; index.html contains the string
   "aria-current" zero times (measured). So body:has(.nav-links a[aria-current=page])
   selects exactly the twelve and can never reach the homepage — the exclusion
   is structural, not a list someone has to remember to maintain.
   :has() is Baseline Widely Available since 2026-06-19.
   This block is APPENDED deliberately: .page-head is also declared earlier in
   this file (padding only). Same specificity, so source order decides and the
   later block wins. Do not merge the two — the earlier one is the homepage-era
   default and is still what a :has()-less browser falls back to. */
body:has(.nav-links a[aria-current=page]){
  --ch-n:"00";--ch-tint:rgba(124,58,237,.22);--ch-x:92%;
  background:
    radial-gradient(560px 380px at 8% 520px,rgba(224,33,154,.13) 0%,rgba(224,33,154,0) 66%),
    radial-gradient(820px 520px at var(--ch-x) 300px,var(--ch-tint) 0%,rgba(124,58,237,0) 68%),
    radial-gradient(1400px 620px at 50% 240px,#1a0c2a 0%,rgba(26,12,42,0) 72%),
    var(--bg);
  background-repeat:no-repeat,no-repeat,no-repeat,repeat}
body:has(.nav-links a[href="pricing.html"][aria-current=page]){--ch-n:"01";--ch-tint:rgba(124,58,237,.24);--ch-x:86%}
body:has(.nav-links a[href="work.html"][aria-current=page]){--ch-n:"02";--ch-tint:rgba(160,60,220,.22);--ch-x:96%}
body:has(.nav-links a[href="about.html"][aria-current=page]){--ch-n:"03";--ch-tint:rgba(196,50,190,.20);--ch-x:82%}
body:has(.nav-links a[href="reviews.html"][aria-current=page]){--ch-n:"04";--ch-tint:rgba(224,33,154,.18);--ch-x:94%}
body:has(.nav-links a[href="/blog/"][aria-current=page]){--ch-n:"05";--ch-tint:rgba(96,70,240,.24);--ch-x:88%}
.page-head,.article-head{position:relative}
/* The numeral spans all three rows (Task 3A) so it cannot set the height of the
   lead's row. Without this it was ~92px tall, the lead's row inherited that, and
   a short lead sank to the bottom of it — which made the gap under the heading a
   function of how long the sentence was: 24.1px on three pages, 52.8px on Blog,
   18px on Reviews. grid-row:1/-1 needs the explicit grid-template-rows above it
   to resolve; with implicit rows only, "-1" collapses to row 1 and the numeral
   lands in the eyebrow row instead. Both declarations are load-bearing. If a
   fourth element is ever added to .page-head, add a fourth "auto". */
.page-head{padding:74px 0 26px;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto auto;column-gap:32px;align-items:end}
.page-head::before{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,var(--mag-brd),rgba(255,255,255,.06) 42%,rgba(255,255,255,0))}
.page-head::after{content:var(--ch-n);grid-column:2;grid-row:1/-1;font-family:var(--fd);font-weight:700;font-size:clamp(56px,9vw,120px);line-height:.8;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1px rgba(224,33,154,.22);align-self:end;pointer-events:none;user-select:none}
.page-head .eyebrow,.page-head h1.page,.page-head .lead{grid-column:1}
.page-head h1.page{margin:12px 0 18px}
@media(max-width:820px){.page-head{grid-template-columns:1fr}.page-head::after{display:none}}

/* Instrument Serif (Phase 6 close, 2026-08-02, CEO ruling "B"). Display face for
   the big editorial moments only: h1/h2 mastheads, article titles, the featured
   quote and the chapter numerals. The face ships ONE weight (400) — every rule
   below must say font-weight:400 or the browser fakes a bold (font-gate fails
   the push). Logo, h3 and smaller headings deliberately stay Instrument Sans. */
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/instrument-serif-400.woff2) format('woff2')}
h1.page,h2,.article-head h1,.featured-review blockquote{font-family:'Instrument Serif',Georgia,serif;font-weight:400;letter-spacing:-.01em}
.page-head::after{font-family:'Instrument Serif',Georgia,serif;font-weight:400}

/* Article folio (Phase 7 Task 3, 2026-08-02, CEO ruling "A — chapter folio").
   Articles are reading surfaces: they join the chapter system through a small
   running head — the chapter numeral prefixed onto the existing eyebrow by CSS
   (content:var(--ch-n)) — and the same hairline keyline the section mastheads
   carry. No HTML changes: the eyebrow text stays exactly topic.eyebrow, so the
   SEO writer's template contract is untouched. The numeral prefix must NEVER be
   typed into the markup — see the EYEBROW TRAP note in seo-write.md. */
.article-head{padding:22px 0 20px}
.article-head::before{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,var(--mag-brd),rgba(255,255,255,.06) 42%,rgba(255,255,255,0))}
.article-head .eyebrow::before{content:var(--ch-n) " · ";color:var(--tl-text-accent);letter-spacing:.08em}

/* m5 (GATE fix list, 2026-08-02): the h1->h3 heading skips on about/pricing/reviews
   close by promoting the offending card headings to h2. These scoped rules pin the
   promoted h2s to the exact render their h3 selectors produced — Instrument Sans 600
   (the serif ships ONE weight, 400; 600 must ride the Sans or font-gate fails), the
   same sizes, margins and inherited line-heights, and no text-wrap:balance — so the
   change is semantic only. Three selectors, not one, because the h3s had three
   distinct renders: 22px in the grid2 cards, 20px/1.6 in the featured-empty slot,
   20px/margin:0 in the review-slot heads. Zero moved pixels, proven by 1280
   before/after screenshots in the Phase 8 fix-list report. */
.grid2 .card h2{font-family:var(--fd);font-weight:600;font-size:22px;line-height:1.5;letter-spacing:-.01em;text-wrap:wrap;color:var(--tl-text-1);margin:0 0 12px}
.rev-featured-empty h2{font-family:var(--fd);font-weight:600;font-size:20px;line-height:1.6;letter-spacing:-.01em;text-wrap:wrap;color:var(--tl-text-1);margin:6px 0 10px}
.card .rev-slot-head h2{font-family:var(--fd);font-weight:600;font-size:20px;line-height:1.5;letter-spacing:-.01em;text-wrap:wrap;color:var(--tl-text-1);margin:0} /* .card prefix: must out-rank .grid2 .card h2 above (the slots sit inside grid2 cards), mirroring how .rev-slot-head h3 out-ranked .card h3 by order */