/* ==========================================================================
   Publisher in a Box  |  brand.css  |  v1.0 (sitewide redesign, staging)
   ONE import per page:  <link rel="stylesheet" href="/brand/brand.css">
   Owns the VISUAL layer only (tokens, type, color, components).
   Page layout and grids are owned by UI/UX Designer.
   Canonical source of values: /styles/home-v2.css (homepage). Where the
   brand doc and the homepage differ, the homepage value wins and is noted.
   Fonts are self-hosted (OFL). Do NOT load Google Fonts alongside this file.
   ========================================================================== */

/* ---------- 1. Fonts (self-hosted woff2, latin subset, swap) ---------- */
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/Inter-400.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2190-2199,U+2212,U+2215;}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/Inter-500.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2190-2199,U+2212,U+2215;}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/Inter-600.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2190-2199,U+2212,U+2215;}
@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/Inter-700.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2190-2199,U+2212,U+2215;}
@font-face{font-family:"Inter";font-style:normal;font-weight:800;font-display:swap;src:url("fonts/Inter-800.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2190-2199,U+2212,U+2215;}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/InterTight-400.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2190-2199,U+2212,U+2215;}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/InterTight-600.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2190-2199,U+2212,U+2215;}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/InterTight-700.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2190-2199,U+2212,U+2215;}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:800;font-display:swap;src:url("fonts/InterTight-800.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2190-2199,U+2212,U+2215;}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:900;font-display:swap;src:url("fonts/InterTight-900.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2190-2199,U+2212,U+2215;}
@font-face{font-family:"Inter Tight";font-style:italic;font-weight:600;font-display:swap;src:url("fonts/InterTight-600-italic.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2190-2199,U+2212,U+2215;}
@font-face{font-family:"Inter Tight";font-style:italic;font-weight:700;font-display:swap;src:url("fonts/InterTight-700-italic.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2190-2199,U+2212,U+2215;}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/JetBrainsMono-500.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2190-2199,U+2212,U+2215;}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/JetBrainsMono-600.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2190-2199,U+2212,U+2215;}

/* ---------- 2. Tokens (the ONLY :root on the site) ---------- */
:root{
  /* Surfaces */
  --cocoa:#0a0a0a;          /* page background */
  --cocoa-deep:#000;
  --cocoa-rise:#181818;     /* cards, raised surfaces */
  --cocoa-soft:#262220;     /* chips, muted bars, inputs */
  --cocoa-foot:#080707;     /* footer band (homepage value) */
  --card-glass:rgba(18,14,11,.55);
  --card-grad:linear-gradient(180deg,#171310,#0e0c0a); /* homepage feature cards */

  /* Light family */
  --cream:#f5ecd6;          /* primary text on dark */
  --cream-warm:#ede0c2;
  --cream-deep:#e3d4ad;
  --paper:#fdf8ec;          /* light surfaces (PubScore, legal option) */
  --ink:#0a0a0a;            /* text on paper */
  --ink-soft:#2a2520;
  --ink-mute:#5a564f;

  /* Brand accent */
  --amber:#e89b2a;
  --amber-deep:#c47a12;
  --amber-soft:#f7d89a;
  --amber-rgb:232,155,42;
  --on-amber:#120a00;       /* text on amber fill */
  --signal-blue:#2c63c4;    /* links on paper, info, logo outline family */

  /* Status ONLY (never decoration) */
  --green:#16a34a;
  --red:#dc2626;

  /* Text tiers on dark */
  --t1:var(--cream);
  --t2:rgba(245,236,214,.72);
  --t3:rgba(245,236,214,.60);
  --t4:rgba(245,236,214,.34);

  /* Rules / borders */
  --rule:rgba(245,236,214,.18);
  --rule-faint:rgba(245,236,214,.09);
  --line:rgba(245,236,214,.08);
  --rule-ink:rgba(10,10,10,.12);   /* on paper */

  /* Scoped colors: use ONLY inside chips, icons, charts */
  --ch-fb:#1877f2;          /* Facebook */
  --ch-gd:#4285f4;          /* Google Discover & News */
  --ch-syn:#16a34a;         /* Syndication */
  --niche-politics:#7aa7ff;
  --niche-creators:#ff8a6a;
  --niche-spirituality:#d9b8ff;
  --sub-newsbomb:#3ccf6e;
  --sub-consulting:#d6b480;
  --sub-pm:#c97440;         /* Publisher Market */

  /* Type families */
  --display:"Inter Tight","Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* Type scale */
  --fs-h1-home:clamp(44px,5.9vw,84px);
  --fs-h1:clamp(40px,5vw,72px);
  --fs-h2:clamp(38px,5vw,72px);
  --fs-h2-sm:clamp(30px,3.6vw,48px);
  --fs-h3:clamp(22px,2vw,28px);
  --fs-h4:18px;
  --fs-lead:clamp(17px,1.5vw,21px);
  --fs-body:16px;
  --fs-article:18px;
  --fs-small:14px;
  --fs-micro:12px;
  --fs-eyebrow:11px;
  --fs-kicker:15px;
  --fs-stat:clamp(48px,6vw,88px);
  --fs-stat-sm:clamp(36px,4vw,56px);
  --fs-btn:15px;

  /* Spacing scale (4/8/12/16/24/32/48/64/96) */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:132px;
  --wrap:1240px;
  --gutter:40px;            /* 20px under 720px */
  --section:96px;           /* brand doc. Homepage uses 132px */
  --section-m:64px;         /* brand doc. Homepage uses 84px */

  /* Radii */
  --r-xs:6px; --r-sm:10px; --r-md:14px; --r-card:20px; --r-card-lg:22px;
  --r-bar:8px; --r-pill:999px;

  /* Elevation (cards have NO shadow; only the primary button glows) */
  --glow-amber:0 16px 36px -14px rgba(232,155,42,.8);
  --focus:0 0 0 3px rgba(232,155,42,.45);

  /* Motion */
  --ease:cubic-bezier(.2,.8,.2,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --dur:.22s;

  /* Logo (the real live PIB logo, see brand/logo/) */
  --logo-ar:2.14;           /* 214 x 100 */
  --logo-h-nav:31px;        /* 66 x 31 in the header (homepage value) */
  --logo-h-foot:45px;       /* 96 x 45 in the footer (homepage value) */
  --logo-h-mobile-menu:36px;
  --logo-min-w:120px;       /* print / standalone minimum; nav is a documented exception */

  /* Chart tokens (mirrored in chart-tokens.css / chart-tokens.json) */
  --chart-plate:#0a0a0a;
  --chart-plate-rise:#181818;
  --chart-grid:rgba(245,236,214,.08);
  --chart-axis:rgba(245,236,214,.60);
  --chart-s1:#e89b2a;                    /* primary series, always amber */
  --chart-s2:rgba(245,236,214,.60);      /* comparison series */
  --chart-s3:#5a564f;                    /* baseline / other */
  --chart-muted:#262220;                 /* non-highlight bars */
  --chart-hi:linear-gradient(180deg,#f7d89a,#e89b2a); /* highlight bar */
  --chart-area:linear-gradient(180deg,rgba(232,155,42,.35),rgba(232,155,42,0));
  --chart-line-w:2.5px;
  --chart-bar-r:8px;
  --chart-up:#16a34a;                    /* status deltas only */
  --chart-down:#dc2626;
}

/* ---------- 3. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--cocoa);color:var(--t1);font-family:var(--sans);font-size:var(--fs-body);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit}
::selection{background:var(--amber);color:var(--on-amber)}
:focus-visible{outline:none;box-shadow:var(--focus);border-radius:var(--r-xs)}
.surface-paper{background:var(--paper);color:var(--ink)}
.surface-cream{background:var(--cream);color:var(--ink)}
.surface-rise{background:var(--cocoa-rise)}

/* Wrap + section rhythm (visual defaults; layout is UI/UX owned) */
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section)}
.section--home{padding-block:var(--s-10)}  /* homepage 132px */
.section--tight{padding-block:var(--s-8)}
.rule{height:1px;border:0;background:var(--line);margin:0}

/* ---------- 4. Type ---------- */
.h1,.h1-home,.h2,.h2-sm,.h3,.h4{font-family:var(--display);color:var(--t1);margin:0;text-wrap:balance}
.h1-home{font-size:var(--fs-h1-home);font-weight:800;line-height:.94;letter-spacing:-.045em}
.h1{font-size:var(--fs-h1);font-weight:800;line-height:.96;letter-spacing:-.04em}
.h2{font-size:var(--fs-h2);font-weight:800;line-height:.98;letter-spacing:-.04em}
.h2-sm{font-size:var(--fs-h2-sm);font-weight:800;line-height:1.02;letter-spacing:-.035em}
.h3{font-size:var(--fs-h3);font-weight:700;line-height:1.15;letter-spacing:-.02em}
.h4{font-size:var(--fs-h4);font-weight:700;line-height:1.3;letter-spacing:-.01em}
/* Emphasis inside headlines: amber gradient italic (homepage .h2 em).
   background-clip:text only paints inside the em box, so italic overhangs and descenders get padding with a matching
   negative margin (net layout unchanged: the old .04em right padding is kept) and each wrapped fragment gets the same room. */
.h1 em,.h1-home em,.h2 em,.h2-sm em{font-style:italic;font-weight:700;background:linear-gradient(180deg,var(--amber-soft),var(--amber));-webkit-background-clip:text;background-clip:text;color:transparent;padding:0 .14em .12em;margin:0 -.1em -.12em -.14em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.lead{font-family:var(--sans);font-size:var(--fs-lead);font-weight:500;line-height:1.45;color:var(--t2);margin:0;max-width:60ch}
.body{font-size:var(--fs-body);line-height:1.6;color:var(--t2)}
.small{font-size:var(--fs-small);line-height:1.5;color:var(--t3)}
.micro{font-size:var(--fs-micro);line-height:1.4;color:var(--t3)}
.mono{font-family:var(--mono)}
.t2{color:var(--t2)} .t3{color:var(--t3)} .t4{color:var(--t4)} .amber{color:var(--amber)}
.surface-paper .h1,.surface-paper .h2,.surface-paper .h2-sm,.surface-paper .h3,.surface-paper .h4{color:var(--ink)}
.surface-paper .lead,.surface-paper .body{color:var(--ink-soft)}
.surface-paper .small,.surface-paper .micro{color:var(--ink-mute)}

/* Article prose (T5) */
.prose{font-size:var(--fs-article);line-height:1.7;color:var(--t2);max-width:68ch}
.prose h2{font-family:var(--display);font-size:clamp(28px,3vw,36px);font-weight:800;letter-spacing:-.03em;line-height:1.1;color:var(--t1);margin:2em 0 .6em}
.prose h3{font-family:var(--display);font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1.2;color:var(--t1);margin:1.6em 0 .5em}
.prose p,.prose ul,.prose ol{margin:0 0 1.1em}
.prose li{margin:.3em 0}
.prose li::marker{color:var(--amber)}
.prose a{color:var(--t1);text-decoration:underline;text-decoration-color:var(--amber);text-decoration-thickness:1.5px;text-underline-offset:3px}
.prose a:hover{color:var(--amber)}
.prose strong{color:var(--t1);font-weight:600}
.prose blockquote{margin:1.6em 0;padding:4px 0 4px 20px;border-left:3px solid var(--amber);color:var(--t1);font-size:20px;line-height:1.5}
.prose code{font-family:var(--mono);font-size:.88em;background:var(--cocoa-soft);padding:.1em .4em;border-radius:var(--r-xs)}
.prose table{width:100%;border-collapse:collapse;font-size:15px;margin:1.4em 0}
.prose th,.prose td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)}
.prose th{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--t3);font-weight:600}
.surface-paper .prose,.prose--paper{color:var(--ink-soft)}
.surface-paper .prose h2,.surface-paper .prose h3,.surface-paper .prose strong,.prose--paper h2,.prose--paper h3,.prose--paper strong{color:var(--ink)}
.surface-paper .prose a,.prose--paper a{color:var(--signal-blue);text-decoration-color:currentColor}

/* Eyebrow: mono, tiny, tracked, 6px amber dot with glow (homepage .kick) */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:var(--fs-eyebrow);font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--t3);line-height:1}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--amber);box-shadow:0 0 10px rgba(232,155,42,.7);flex:none}
.eyebrow--amber{color:var(--amber)}
.surface-paper .eyebrow{color:var(--ink-mute)}

/* Kicker: Inter 600 amber, 36px rule before */
.kicker{display:inline-flex;align-items:center;gap:14px;font-family:var(--sans);font-size:var(--fs-kicker);font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--amber);line-height:1.2}
.kicker::before{content:"";width:36px;height:1.5px;background:var(--amber);flex:none}
.surface-paper .kicker{color:var(--amber-deep)}
.surface-paper .kicker::before{background:var(--amber-deep)}

/* Text link (homepage .tlink) */
.tlink{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--t1);text-decoration:none;border-bottom:1.5px solid var(--amber);padding-bottom:2px;transition:color var(--dur) var(--ease)}
.tlink:hover{color:var(--amber)}
.tlink .arr{transition:transform var(--dur) var(--ease)}
.tlink:hover .arr{transform:translateX(3px)}

/* ---------- 5. Buttons (pill only, 50px, one filled amber per screen) ---------- */
.btn{--h:50px;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:var(--h);padding:0 24px;border-radius:var(--r-pill);border:0;font-family:var(--sans);font-size:var(--fs-btn);font-weight:800;letter-spacing:-.005em;line-height:1;white-space:nowrap;text-decoration:none;cursor:pointer;background:var(--amber);color:var(--on-amber);box-shadow:var(--glow-amber);transition:transform var(--dur) var(--ease),background-color var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
/* Homepage value: hover lifts 2px. Brand doc: hover darkens to amber-deep. Both applied. */
.btn:hover{transform:translateY(-2px);background:var(--amber-deep)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{box-shadow:var(--glow-amber),var(--focus);border-radius:var(--r-pill)}
.btn[disabled],.btn.is-disabled{opacity:.45;pointer-events:none;box-shadow:none}
.btn .arr{transition:transform var(--dur) var(--ease)}
.btn:hover .arr{transform:translateX(3px)}
/* .btn--primary is accepted as an alias: it adds nothing to .btn */
/* Secondary: cream fill, ink text. For a second strong action on the same screen */
.btn--secondary{background:var(--cream);color:var(--ink);box-shadow:none}
.btn--secondary:hover{background:var(--cream-warm)}
/* Ghost: outline only */
.btn--ghost{background:transparent;color:var(--t1);border:1.5px solid var(--rule);box-shadow:none}
.btn--ghost:hover{background:transparent;border-color:var(--amber);color:var(--t1)}
.surface-paper .btn--ghost{color:var(--ink);border-color:rgba(10,10,10,.22)}
.surface-paper .btn--ghost:hover{border-color:var(--amber-deep)}
.surface-paper .btn--secondary{background:var(--ink);color:var(--cream)}
.btn--sm{--h:40px;padding:0 18px;font-size:14px}
.btn--block{display:flex;width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
@media (max-width:720px){.btn{--h:48px}}

/* ---------- 6. Cards (radius 20, no shadow) ---------- */
.card{background:var(--cocoa-rise);border:1px solid var(--line);border-radius:var(--r-card);padding:var(--s-6);color:var(--t1)}
.card--glass{background:var(--card-glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.card--feature{background:var(--card-grad);border-radius:var(--r-card-lg)}
.card--link{display:block;text-decoration:none;transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.card--link:hover{border-color:rgba(232,155,42,.45);transform:translateY(-2px)}
.card--paper{background:#fff;border-color:var(--rule-ink);color:var(--ink)}
.card__eyebrow{margin-bottom:var(--s-4)}
.card__title{font-family:var(--display);font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1.2;margin:0 0 var(--s-3)}
.card__body{font-size:15px;line-height:1.55;color:var(--t2);margin:0}
.card--paper .card__body{color:var(--ink-soft)}
.card__foot{margin-top:var(--s-5);padding-top:var(--s-4);border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px;color:var(--t3)}
/* Case card (chart-led proof card used in T1/T2) */
.case-card{display:grid;gap:var(--s-5)}
.case-card__chart{background:var(--chart-plate);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s-5)}
.case-card__source{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--t4);text-transform:uppercase}
/* Price tag (T2/T3) */
.price{display:inline-flex;align-items:baseline;gap:8px;font-family:var(--display)}
.price__from{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--t3)}
.price__num{font-size:clamp(32px,3.4vw,44px);font-weight:900;letter-spacing:-.04em;color:var(--t1)}
@media (max-width:720px){.card{padding:var(--s-5)}}

/* ---------- 7. Chips (32px; platform + niche colors live ONLY here) ---------- */
.chip{--c:var(--amber);display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 14px;border-radius:var(--r-pill);background:var(--cocoa-soft);border:1px solid transparent;font-family:var(--sans);font-size:13px;font-weight:600;line-height:1;color:var(--t1);white-space:nowrap;text-decoration:none}
.chip--outline{background:transparent;border-color:var(--amber);color:var(--amber)}
.chip svg,.chip img{width:16px;height:16px;flex:none}
a.chip:hover,button.chip:hover{border-color:var(--rule)}
.chip.is-active{background:var(--amber);color:var(--on-amber)}
/* Platform chips: glyph tinted, chip fill stays neutral */
.chip--fb{--c:var(--ch-fb)} .chip--gd{--c:var(--ch-gd)} .chip--syn{--c:var(--ch-syn)}
.chip--fb svg,.chip--gd svg,.chip--syn svg{color:var(--c);fill:currentColor}
.chip--fb::before,.chip--gd::before,.chip--syn::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c);flex:none}
.chip--fb:has(svg)::before,.chip--gd:has(svg)::before,.chip--syn:has(svg)::before{display:none}
/* Niche chips: tint at 15% fill + dot */
.chip--niche{background:color-mix(in srgb,var(--c) 15%,transparent);color:var(--t1)}
.chip--niche::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c);flex:none}
.chip--politics{--c:var(--niche-politics)}
.chip--creators{--c:var(--niche-creators)}
.chip--spirituality{--c:var(--niche-spirituality)}
.chip--amber{--c:var(--amber)}
/* Status chips (status meaning only) */
.chip--ok{background:rgba(22,163,74,.14);color:#4ade80}
.chip--bad{background:rgba(220,38,38,.14);color:#f87171}
.surface-paper .chip{background:var(--cream-warm);color:var(--ink)}
.chip-row{display:flex;flex-wrap:wrap;gap:8px}

/* ---------- 8. Stat blocks (approved stats only) ---------- */
.stat{display:flex;flex-direction:column;gap:8px}
.stat__num{font-family:var(--display);font-size:var(--fs-stat);font-weight:900;line-height:.9;letter-spacing:-.05em;color:var(--t1);font-variant-numeric:tabular-nums}
.stat__num .u{color:var(--amber)}
.stat__label{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--t3);line-height:1.4}
.stat--sm .stat__num{font-size:var(--fs-stat-sm)}
.stat--word .stat__num{font-size:var(--fs-stat-sm);letter-spacing:-.04em}
.stat-row{display:flex;flex-wrap:wrap;gap:var(--s-7);align-items:flex-end}
.stat-row--ruled>.stat{padding-left:var(--s-5);border-left:1px solid var(--rule)}
.surface-paper .stat__num{color:var(--ink)}
.surface-paper .stat__label{color:var(--ink-mute)}

/* ---------- 9. Logo strip (partner logos, monochrome cream) ---------- */
.logo-strip{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--s-6) var(--s-7);padding-block:var(--s-6);border-block:1px solid var(--line)}
.logo-strip__label{flex-basis:100%;text-align:center;margin-bottom:var(--s-2)}
.logo-strip__label--stack{display:flex;flex-direction:column;align-items:center;gap:4px}
.logo-strip__sub{font-size:13px;line-height:1.4;color:var(--t3)}
.logo-strip img{height:26px;width:auto;opacity:.62;filter:grayscale(1) brightness(1.6);transition:opacity var(--dur) var(--ease)}
.logo-strip img:hover{opacity:1}
/* Mask variant (homepage .lgm): tints any logo file to cream */
.lgm{display:inline-block;height:26px;aspect-ratio:var(--ar,3);background:var(--t3);-webkit-mask:var(--src) center/contain no-repeat;mask:var(--src) center/contain no-repeat}
@media (max-width:720px){.logo-strip{gap:var(--s-5) var(--s-6)}.logo-strip img,.lgm{height:22px}}

/* ---------- 10. PIB logo (the REAL live logo; never retype the wordmark) ---------- */
/* <a class="pib-logo" href="/"><img src="/brand/logo/pib-logo.png"
      srcset="/brand/logo/pib-logo@2x.png 2x, /brand/logo/pib-logo@3x.png 3x"
      width="214" height="100" alt="Publisher in a Box"></a>                     */
.pib-logo{display:inline-flex;align-items:center;line-height:0;text-decoration:none;flex:none}
.pib-logo img,.pib-logo svg{height:var(--logo-h,var(--logo-h-nav));width:auto;aspect-ratio:214/100}
.pib-logo--nav{--logo-h:var(--logo-h-nav)}
.pib-logo--foot{--logo-h:var(--logo-h-foot)}
.pib-logo--menu{--logo-h:var(--logo-h-mobile-menu)}
.pib-logo--lg{--logo-h:64px}
/* Clear space: 0.5x icon height on every side. Logo has its own black + blue outline: dark backgrounds only. */
.pib-logo--clear{padding:calc(var(--logo-h,var(--logo-h-nav)) * .5)}

/* ---------- 11. Header + footer visual layer ---------- */
.site-head{position:sticky;top:0;z-index:50;background:rgba(10,10,10,.82);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line)}
.site-head__bar{height:68px;display:flex;align-items:center;gap:var(--s-5)}
.site-nav a{font-size:14px;font-weight:600;color:var(--t2);text-decoration:none;transition:color var(--dur) var(--ease)}
.site-nav a:hover,.site-nav a[aria-current="page"]{color:var(--t1)}
.site-head .btn{--h:40px;padding:0 18px;font-size:14px}
@media (max-width:720px){.site-head__bar{height:60px}}
.site-foot{background:var(--cocoa-foot);border-top:1px solid var(--line);padding-block:var(--s-8) var(--s-6);color:var(--t3);font-size:14px}
.site-foot__head{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--t4);margin:0 0 var(--s-4)}
.site-foot a{color:var(--t2);text-decoration:none}
.site-foot a:hover{color:var(--amber)}
.site-foot__legal{margin-top:var(--s-7);padding-top:var(--s-5);border-top:1px solid var(--line);font-size:12px;color:var(--t4)}

/* ---------- 12. Section furniture ---------- */
.sec-head{display:grid;gap:var(--s-4);max-width:820px;margin-bottom:var(--s-7)}
.sec-head--center{margin-inline:auto;text-align:center;justify-items:center}
.cta-band{background:radial-gradient(120% 140% at 50% 0%,rgba(232,155,42,.16),transparent 60%),var(--cocoa-rise);border:1px solid var(--line);border-radius:var(--r-card-lg);padding:var(--s-8) var(--s-6);text-align:center;display:grid;justify-items:center;gap:var(--s-4)}
.step{display:grid;gap:var(--s-3)}
.step__n{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.2em;color:var(--amber)}
.check-list{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.check-list li{position:relative;padding-left:28px;color:var(--t2)}
.check-list li::before{content:"";position:absolute;left:0;top:.42em;width:14px;height:8px;border-left:2px solid var(--amber);border-bottom:2px solid var(--amber);transform:rotate(-45deg)}
/* FAQ (visual only; keep existing FAQ markup + schema) */
.faq details{border-bottom:1px solid var(--line);padding:var(--s-5) 0}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:var(--s-4);font-family:var(--display);font-size:19px;font-weight:700;letter-spacing:-.015em;line-height:1.3;color:var(--t1);transition:color var(--dur) var(--ease)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:0 0 30px;width:30px;height:30px;border-radius:50%;border:1px solid rgba(var(--amber-rgb),.45);background:linear-gradient(var(--amber),var(--amber)) center/12px 2px no-repeat,linear-gradient(var(--amber),var(--amber)) center/2px 12px no-repeat;transition:background-size var(--dur) var(--ease),background-color var(--dur) var(--ease)}
.faq details[open] summary::after{background-size:12px 2px,2px 0;background-color:rgba(var(--amber-rgb),.12)}
.faq summary:hover::after{background-color:rgba(var(--amber-rgb),.12)}
.faq summary:focus-visible{border-radius:var(--r-xs)}
.faq details>*:not(summary){margin:var(--s-3) 0 0;color:var(--t2);max-width:68ch;font-size:17px;line-height:1.65}
/* Forms (T7) */
.field{display:grid;gap:8px}
.field label{font-size:13px;font-weight:600;color:var(--t2)}
.input,.select,.textarea{width:100%;height:50px;padding:0 16px;border-radius:var(--r-md);border:1px solid var(--rule);background:var(--cocoa-soft);color:var(--t1);font:500 16px/1.4 var(--sans);transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.textarea{height:auto;min-height:120px;padding:14px 16px;resize:vertical}
.input::placeholder,.textarea::placeholder{color:var(--t4)}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--amber);box-shadow:var(--focus)}
.field.is-error .input,.field.is-error .textarea{border-color:var(--red)}
.field__msg{font-size:13px;color:var(--t3)}
.field.is-error .field__msg{color:#f87171}
/* Mobile sticky buy bar (T3) */
.buy-bar{position:fixed;inset:auto 0 0 0;z-index:60;display:none;align-items:center;justify-content:space-between;gap:12px;padding:12px 20px calc(12px + env(safe-area-inset-bottom));background:rgba(10,10,10,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line)}
@media (max-width:720px){.buy-bar{display:flex}}
/* TOC (T9 legal, long articles) */
.toc{font-size:14px;display:grid;gap:8px;border-left:1px solid var(--line);padding-left:var(--s-4)}
.toc a{color:var(--t3);text-decoration:none}
.toc a:hover,.toc a.is-active{color:var(--amber)}
/* Search (T4, T10) */
.search{display:flex;align-items:center;gap:10px;height:56px;padding:0 8px 0 20px;border-radius:var(--r-pill);background:var(--cocoa-rise);border:1px solid var(--rule)}
.search:focus-within{border-color:var(--amber);box-shadow:var(--focus)}
.search input{flex:1;min-width:0;height:100%;background:none;border:0;color:var(--t1);font:500 16px var(--sans);outline:none}
.search .btn{--h:42px}

/* ---------- 13. Chart components ---------- */
.chart{background:var(--chart-plate);border:1px solid var(--line);border-radius:var(--r-card);padding:var(--s-5)}
.chart--rise{background:var(--chart-plate-rise)}
.chart__title{font-family:var(--display);font-size:18px;font-weight:700;letter-spacing:-.015em;margin:0 0 4px}
.chart__axis,.chart text{font-family:var(--mono);font-size:11px;letter-spacing:.14em;fill:var(--chart-axis);color:var(--chart-axis)}
.chart__grid{stroke:var(--chart-grid);stroke-width:1}
.chart__line{fill:none;stroke:var(--chart-s1);stroke-width:var(--chart-line-w);stroke-linecap:round;stroke-linejoin:round}
.chart__line--2{stroke:var(--chart-s2)}
.chart__line--3{stroke:var(--chart-s3)}
.chart__bar{fill:var(--chart-muted)}
.chart__bar--hi{fill:var(--chart-s1)}
.chart__source{display:block;margin-top:var(--s-4);font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--t4)}
.chart__legend{display:flex;flex-wrap:wrap;gap:16px;font-size:12px;color:var(--t3)}
.chart__legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px;background:var(--c,var(--chart-s1))}
/* HTML bar chart helper (no SVG needed) */
.bars{display:flex;align-items:flex-end;gap:10px;height:180px;border-bottom:1px solid var(--chart-grid)}
.bars>span{flex:1;height:var(--v,50%);background:var(--chart-muted);border-radius:var(--chart-bar-r) var(--chart-bar-r) 0 0}
.bars>span.is-hi{background:var(--chart-hi)}

/* ---------- 14. Utilities ---------- */
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.center{text-align:center}
.stack>*+*{margin-top:var(--stack,var(--s-4))}
@media (max-width:720px){.wrap{padding-inline:20px}.section{padding-block:var(--section-m)}.section--home{padding-block:84px}.section--tight{padding-block:48px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;scroll-behavior:auto!important}}