/* ============================================================
   Siavak Analytics · Organic AI Growth design system · oag.css
   Version 1.11.1 · 18 September 2026 (1.11.1: the radio and checkbox size rule no longer hits a text field inside .opts; 1.11: the follow up field a radio choice reveals is a field like the others, with a title label and a rule tying it to its option; 1.10: <br class="lb"> breaks a display statement where its sentence breaks, and the statement that carries one drops its ch based max-width; ledes, subs and paragraphs wrap with text-wrap:pretty, so a last line is not left with one word; 1.9: dark bands are ink from the first frame; the fade from paper to ink is gone, because it flickered as a band scrolled in; 1.8: display type at normal tracking, letter-spacing 0 on h1, h2, .stmt, .opener .stmt, .hero h1, the pull quote and the footer wordmark; the phone specimen with its verdict column, and the quote marks on .voices, promoted from the Organic AI Growth pages; 1.7: the founder block, .founder and .badges, promoted from the homepage; 1.6.1: dark bands fade their text with their ground, no white flash; 1.6: warm paper ground and a white .surface with a 3px edge, the numbered mono eyebrow, the split .opener, lighter display type, 3px box borders, the deep ink footer; 1.1 adds .rx redaction in Redacted Script and .units.c10; 1.2 sets h1 and h2 statements 10% smaller; 1.3 retires the word rise and variable font settle on headings: headings now light up word by word like the pull quote, .litup; 1.4 makes chart marks the same rose and teal as the text; 1.5 adds .finding .next as a dark centred panel, and .byline and .disclaimer for a signed report)

   Extracted from siavak-website/pages/organic-ai-growth/landing-page-2026-09-11.html so
   every page (landing, pre-research report, request form, and the
   siavak.com rebuild) shares one set of tokens, sections and parts.

   How to use
   1. Load the three Google font families (see README.md).
   2. Link this file, or inline it with build.py for a single-file page.
   3. Compose pages from <section class="plain"> and <section class="band">
      blocks, each holding one .wrap. Sections carry their own vertical
      rhythm; never add margins between them.
   4. Load oag.js for the reveal and band motion. Pages work without it.

   Contents
   01 tokens        02 base and type      03 sections and wrappers
   04 motion        05 masthead           06 buttons
   07 hero          08 figures and charts 09 grids of things
   10 report parts  11 forms              12 footer
   13 responsive    14 reduced motion
   ============================================================ */

/* ---------- 01 tokens ---------- */
:root{
  /* paper and ink */
  /* 1.6: the page ground is warm paper; boxes sit on it as white surfaces */
  --paper:#F4F2ED; --surface:#FFFFFF; --ink:#0D0D0D; --ink2:#4D4D4D; --mute:#6E6E6E; --rule:#D8D4CB; --faint:#EAE7DF;
  /* structural accent: Siavak gold. Never means good or bad. */
  --gold:#AA8844; --goldtx:#997733;
  /* editorial colour words used in headlines */
  --rose:#96384F; --teal:#1E5C5A;
  /* semantic, reserved for meaning: against and for. Since 1.4 the chart marks use the
     same rose and teal as the text, so a red bar and a red phrase are one colour; the
     alias means marks inside a dark band pick up the band's lighter pair automatically */
  --crimson:var(--rose); --mteal:var(--teal);
  /* grayscale data ramp */
  --g1:#141414; --g2:#58595B; --g3:#86888A; --g4:#B3B5B7; --g5:#D6D8D9; --g6:#EBECEC;
  /* type */
  --title:"Bricolage Grotesque",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --body:"Zen Kaku Gothic New",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"Spline Sans Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  /* measures */
  --maxw:1280px; --mid:960px; --read:760px;
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:light;
}

/* ---------- 02 base and type ---------- */
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:19px;line-height:1.62;-webkit-font-smoothing:antialiased}
h1,h2{font-family:var(--title);font-weight:700;letter-spacing:0;line-height:1.02;margin:0;text-wrap:balance}
h3,h4{font-family:var(--title);font-weight:600;letter-spacing:-.012em;line-height:1.2;margin:0;text-wrap:balance}
p{margin:0}
a{color:var(--goldtx)}
b,strong{font-weight:700}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.eb{font-family:var(--mono);font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--goldtx);margin:0 0 28px;display:flex;align-items:center;gap:14px;line-height:1}
/* 1.6: an optional section number in front of the label, <span class="no">01</span>, in ink, then a short gold rule */
.eb .no{color:var(--ink);display:inline-flex;align-items:center;gap:14px}
.eb .no:after{content:"";display:block;width:28px;height:1px;background:var(--goldtx)}
.band .eb .no{color:var(--fg)}
.mute{color:var(--mute)}
.rose{color:var(--rose)} .teal{color:var(--teal)} .gold{color:var(--goldtx)}
.stmt{letter-spacing:0;font-size:clamp(36px,5.4vw,76px);max-width:min(24ch,100%);margin-left:auto;margin-right:auto}
.stmt.sm{font-size:clamp(31px,4vw,50px)}
.lede{font-size:clamp(20px,2vw,25px);line-height:1.5;max-width:900px;margin:44px auto 0;color:var(--ink)}
.lede .mute,.p .mute{color:var(--mute)}
/* 1.6: the section opener. Eyebrow and statement left, lede right, aligned at the bottom. One column below 980px.
   A .stmt outside an .opener keeps its centred default. */
.opener{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:28px 72px;align-items:end}
.opener .stmt{margin:0;max-width:15ch;text-align:left;font-size:clamp(34px,4.4vw,62px);font-weight:600;letter-spacing:0;font-variation-settings:"opsz" 96;line-height:1.02}
.opener .lede{margin:0 0 8px;font-size:clamp(18px,1.55vw,21px);line-height:1.55;color:var(--ink2);max-width:40ch}
.band .opener .lede{color:var(--fg2)}
.opener .lede b{color:var(--ink);font-weight:500}
.band .opener .lede b{color:var(--fg)}
.p{font-size:19px;line-height:1.62;color:var(--mute)}
.p b,.lede b,figcaption b{font-weight:500;color:var(--ink)}
.subhead{font-family:var(--title);font-weight:600;font-size:22px;color:var(--goldtx);margin:0 0 6px}
.center{text-align:center;display:flex;flex-direction:column;align-items:center}

/* ---------- 03 sections and wrappers ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:24px;padding-right:24px}
.mid{max-width:var(--mid);margin-left:auto;margin-right:auto}
.read{max-width:var(--read);margin-left:auto;margin-right:auto}
section{padding-block:clamp(90px,12vw,150px)}
section.plain+section.plain{border-top:1px solid var(--rule)}
section.tight{padding-block:clamp(56px,7vw,90px)}

/* dark bands: ink, from the first frame.
   1.9 (18 September 2026): the band no longer fades from paper to ink as it reaches the lower third of the screen.
   The fade passed through a pale grey with grey text on it, which read as a flicker while scrolling (Siavash, 18 September).
   The band colours stay registered as colours (1.6.1) and the .on class stays, with the same values, so page rules and
   markup that carry .on keep working; nothing about a band animates now.
   Initial values are the light colours, so var(--fg, ...) fallbacks outside a band are unchanged. */
@property --bg{syntax:"<color>";inherits:true;initial-value:#F4F2ED}
@property --fg{syntax:"<color>";inherits:true;initial-value:#0D0D0D}
@property --fg2{syntax:"<color>";inherits:true;initial-value:#4D4D4D}
@property --mu{syntax:"<color>";inherits:true;initial-value:#6E6E6E}
@property --ln{syntax:"<color>";inherits:true;initial-value:#D8D4CB}
@property --goldtx{syntax:"<color>";inherits:true;initial-value:#997733}
@property --rose{syntax:"<color>";inherits:true;initial-value:#96384F}
@property --teal{syntax:"<color>";inherits:true;initial-value:#1E5C5A}
.band,.band.on{--bg:#0D0D0D;--fg:#F2F0EA;--fg2:#C8C4BA;--mu:#8E8A80;--ln:#3A3A3A;--goldtx:#D2AA5A;--rose:#D46A85;--teal:#5FB3AE;
  background:var(--bg);color:var(--fg)}
.band .mute{color:var(--mu)}
.band .eb{color:var(--goldtx)}
.band .rose{color:var(--rose)} .band .teal{color:var(--teal)} .band .gold{color:var(--goldtx)}
.band h1,.band h2,.band h3,.band h4{color:var(--fg)}
.band .lede{color:var(--fg)}
.band .p{color:var(--fg2)}
.band .p b,.band .lede b{color:var(--fg)}
.band .hl,.band .col,.band .case{border-color:var(--ln)}
.band .rv:not(.in) .c{color:inherit}

/* ---------- 04 motion (classes only; oag.js adds .in, .on and .lit) ----------
   The rule since 15 September 2026: in text, only colour animates. Nothing in a
   headline moves, fades or changes size or weight. Blocks (.rv) may still fade
   and rise 12px once as they enter the screen.
   - .litup (h1, h2.stmt, .stat .n, blockquote.pull p): words are present from the
     first frame in the muted grey and light to their colour one by one as the
     element moves up the screen. A coloured phrase lights straight into its colour.
     Inside .hero, where there is no scroll on open, the words light on a timer.
   - .rise and .rise.vf are retired. oag.js rewrites .rise.vf to .litup at load so
     older pages follow the new rule without markup changes. .rise stays for
     pages that run without the script and carry .static. */
.rv{opacity:0;transform:translateY(12px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--i,0)*80ms)}
.rv.in{opacity:1;transform:none}
.c{transition:color .7s ease .5s}
.rv:not(.in) .c{color:inherit}
.litup .w{color:var(--mu,var(--mute));transition:color .5s ease}
.litup .w.lit{color:inherit}
.litup .c{transition:none}
.rise .w{display:inline-block;opacity:0;transform:translateY(.18em);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--i,0)*70ms)}
.rise.in .w{opacity:1;transform:none}
.rise:not(.in) .c{color:inherit}
/* pages without oag.js, or with it disabled, show everything at rest */
.static .rv,.static .rise .w,.static .pop{opacity:1;transform:none}
.static .litup .w,.static .pull .w{color:inherit}
.static .bar{transform:none}
.static .band{--bg:#0D0D0D;--fg:#F2F0EA;--fg2:#C8C4BA;--mu:#8E8A80;--ln:#3A3A3A;--goldtx:#D2AA5A;--rose:#D46A85;--teal:#5FB3AE}

/* 1.10 (18 September 2026): line breaks in display type.
   Some statements broke mid phrase, because a ch based max-width made the line shorter than the column and text-wrap:balance
   then split wherever it could (Siavash, 18 September 2026: "some titles wrap in a less than perfect way"). A statement can now
   carry <br class="lb"> where its sentence breaks, and it takes the width of its column instead of the ch limit, so each phrase
   sits on its own line, at every width. A phrase longer than the line still wraps inside itself, so nothing overflows. */
.stmt:has(.lb),h1:has(.lb),.sub:has(.lb),.lede:has(.lb){max-width:none}
/* and paragraphs avoid a last line with one or two words on it, where the browser can do it */
.lede,.sub,.p{text-wrap:pretty}

/* ---------- 05 masthead ---------- */
.mast{border-bottom:1px solid var(--rule);padding-block:20px;position:sticky;top:0;background:var(--paper);z-index:40}
.mast .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.brand{font-family:var(--title);font-weight:700;font-size:20px;letter-spacing:-.01em;color:var(--ink);text-decoration:none}
.brand span{color:var(--gold)}
.mast nav{display:flex;align-items:center;gap:32px}
.mast nav a{font-size:18px;color:var(--ink2);text-decoration:none}
.mast nav a.btn{color:#fff}
.mast nav a.btn:hover{color:var(--ink)}
.mast .doc{font-family:var(--title);font-weight:600;font-size:17px;color:var(--mute)}

/* ---------- 06 buttons and links ---------- */
.btn{display:inline-block;background:var(--ink);color:#fff;font-family:var(--title);font-weight:600;font-size:19px;letter-spacing:-.01em;padding:19px 38px;border:1px solid var(--ink);text-decoration:none;transition:background .2s,color .2s,border-color .2s;cursor:pointer;line-height:1.3}
.btn:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.btn.sm{font-size:17px;padding:13px 24px}
.btn.inv{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.btn.inv:hover{background:#fff;border-color:#fff}
.band .btn.inv{background:var(--gold);border-color:var(--gold);color:#0D0D0D}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:#fff}
.tlink{font-family:var(--title);font-weight:600;font-size:19px;color:var(--ink);text-decoration:none;border-bottom:3px solid var(--gold);padding-bottom:2px}
.band .tlink{color:var(--fg);border-color:var(--gold)}
.cta-note{font-size:18px;line-height:1.55;color:var(--mute);margin-top:22px;max-width:46ch}
.band .cta-note{color:var(--mu)}
.ctarow{display:flex;align-items:center;gap:36px;flex-wrap:wrap;justify-content:center}

/* ---------- 07 hero ---------- */
.hero{padding-top:clamp(70px,9vw,140px);padding-bottom:0}
.hero h1{font-size:clamp(44px,6.3vw,90px);font-weight:600;letter-spacing:0;font-variation-settings:"opsz" 96;line-height:.98;max-width:1180px}
.hero.report h1{font-size:clamp(36px,5vw,72px);max-width:1100px}
.hero .lede{margin-top:44px}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px;margin-top:clamp(56px,7vw,90px);border-top:1px solid var(--rule);padding-top:30px;text-align:left;width:100%}
.fact{display:flex;flex-direction:column;gap:10px}
.fact .fk{font-family:var(--title);font-weight:600;font-size:18px;color:var(--goldtx)}
.fact .fv{font-size:18px;line-height:1.55;color:var(--ink2)}

/* ---------- 08 figures and charts ---------- */
figure{margin:0}
.fig{padding-top:36px;border-top:1px solid var(--rule)}
.fig .plot{overflow-x:auto;overflow-y:hidden}
.fig .plot svg{display:block;width:100%;max-width:100%;height:auto}
.fhead{display:block;margin-bottom:30px}
.ftitle{font-family:var(--title);font-weight:600;font-size:clamp(22px,2.2vw,28px);letter-spacing:-.012em;line-height:1.25;margin:0}
.ftitle em{font-style:normal;color:var(--goldtx)}
.fsub{font-size:18px;color:var(--mute);margin:10px 0 0;line-height:1.5;max-width:70ch}
figcaption{font-size:20px;color:var(--mute);line-height:1.6;margin-top:30px;max-width:70ch}
figcaption .lead{color:var(--ink)}
.srcline{font-size:17px;color:var(--mute);line-height:1.55;margin-top:14px;max-width:80ch}
.shint{display:none;font-size:17px;color:var(--mute);margin:8px 0 0}
.legend{display:flex;gap:34px;flex-wrap:wrap;font-size:17px;color:var(--ink2);margin-top:26px}
.legend span{display:flex;align-items:center;gap:10px}
.legend i{display:inline-block;width:16px;height:16px;border:1px solid transparent}
svg text{font-family:"Zen Kaku Gothic New",-apple-system,sans-serif}
svg .lbl{font-size:15px;fill:#0D0D0D}
svg .lbl2{font-size:14px;fill:#4D4D4D}
svg .val{font-family:"Spline Sans Mono",monospace;font-size:15px;font-weight:700;fill:#0D0D0D}
svg .cap{font-family:"Bricolage Grotesque",sans-serif;font-size:13px;font-weight:600;letter-spacing:.02em;fill:#6E6E6E}
svg .capd{font-family:"Bricolage Grotesque",sans-serif;font-size:13px;font-weight:600;letter-spacing:.02em;fill:#0D0D0D}
/* chart marks that animate in */
.bar{transform-box:fill-box;transform-origin:left center;transform:scaleX(0);transition:transform .8s var(--ease);transition-delay:calc(.25s + var(--i,0)*90ms)}
.bar.rt{transform-origin:right center}
.in .bar{transform:scaleX(1)}
.draw{transition:stroke-dashoffset 1.3s var(--ease);transition-delay:calc(.25s + var(--i,0)*120ms)}
.pop{opacity:0;transition:opacity .6s ease;transition-delay:calc(.25s + var(--i,0)*120ms)}
.in .pop{opacity:1}
/* unit grids: one square per answer. Always full width. */
.units{display:grid;gap:4px;width:100%;margin:4px 0 0}
.units i{display:block;aspect-ratio:1/1;background:var(--paper);border:1px solid var(--g5);transition:background-color .35s ease,border-color .35s ease}
.surface .units i{background:#fff}
.units i.fp{background:var(--mteal);border-color:var(--mteal)}
.units i.fn{background:var(--crimson);border-color:var(--crimson)}
.units i.ip{background:repeating-linear-gradient(135deg,var(--mteal) 0 2px,#fff 2px 5px);border-color:var(--mteal)}
.units i.in{background:repeating-linear-gradient(135deg,var(--crimson) 0 2px,#fff 2px 5px);border-color:var(--crimson)}
.units i.me{background:var(--gold);border-color:var(--gold)}
.units i.other{background:var(--g4);border-color:var(--g4)}
.units.c10{grid-template-columns:repeat(10,1fr);gap:8px}
.units.c20{grid-template-columns:repeat(20,1fr)}
.units.c45{grid-template-columns:repeat(45,1fr)}
.legend i.sw-no{background:#fff;border-color:var(--g4)}
.legend i.sw-fp{background:var(--mteal)}
.legend i.sw-fn{background:var(--crimson)}
.legend i.sw-ip{background:repeating-linear-gradient(135deg,var(--mteal) 0 2px,#fff 2px 5px);border-color:var(--mteal)}
.legend i.sw-in{background:repeating-linear-gradient(135deg,var(--crimson) 0 2px,#fff 2px 5px);border-color:var(--crimson)}
.legend i.sw-me{background:var(--gold)}
.legend i.sw-other{background:var(--g4)}
/* the accordion used to unfold a form or a figure */
.acc{display:grid;grid-template-rows:0fr;transition:grid-template-rows 1s var(--ease)}
.acc>div{overflow:hidden;min-height:0}
.acc.open{grid-template-rows:1fr}
.acc.open>div{overflow:visible}

/* ---------- 09 grids of things ---------- */
.cols3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:64px;margin-top:clamp(64px,8vw,110px)}
.col{border-top:1px solid var(--rule);padding-top:28px;display:flex;flex-direction:column;gap:18px}
.col h3{font-size:28px}
.col .p{margin:0}
.pull{margin:clamp(64px,8vw,120px) auto 0;max-width:1000px;text-align:center}
.pull p{font-family:var(--title);font-weight:600;font-size:clamp(26px,3.4vw,44px);line-height:1.25;letter-spacing:0;margin:0;text-wrap:balance}
.pull .w{color:var(--mu,var(--mute));transition:color .5s ease}
.pull .w.lit{color:var(--fg,var(--ink))}
.pull .w.gold.lit{color:var(--goldtx)}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 56px;border-top:2px solid var(--ink);margin-top:clamp(56px,7vw,100px)}
.tile{padding:36px 0 40px;border-bottom:1px solid var(--rule);display:flex;flex-direction:column;gap:14px}
.tile h3{font-size:28px}
.wrows{border-top:2px solid var(--ink);margin-top:20px}
.wrow{display:grid;grid-template-columns:minmax(200px,1fr) minmax(0,2fr);gap:14px 60px;padding:32px 0;border-bottom:1px solid var(--rule);align-items:start}
.wrow h3{font-size:26px}
.wrow .p{max-width:62ch}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px;margin-top:clamp(70px,9vw,120px);text-align:center}
.stat{display:flex;flex-direction:column;gap:12px;align-items:center}
.stat .n{font-family:var(--title);font-weight:700;font-size:clamp(40px,5vw,64px);line-height:1;letter-spacing:-.022em;white-space:nowrap}
.stat .n.num{font-family:var(--mono);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.stat .k{font-family:var(--title);font-weight:600;font-size:22px;max-width:18ch}
.stat .sd{font-size:17px;color:var(--mute);line-height:1.5;max-width:26ch}
.stat .n.neg{color:var(--crimson)} .stat .n.pos{color:var(--mteal)}
.phases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin-top:clamp(56px,7vw,100px)}
.phase{border-top:6px solid var(--ink);padding-top:30px;display:flex;flex-direction:column;gap:22px}
.phase.a{border-color:var(--ink)} .phase.b{border-color:var(--gold)} .phase.c{border-color:var(--teal)}
.phase .when{font-family:var(--mono);font-size:17px;font-weight:700;color:var(--goldtx);letter-spacing:.02em}
.phase h3{font-size:40px;font-weight:700}
.phase h4{font-size:22px;margin-top:6px}
.phase .step{display:flex;flex-direction:column;gap:10px}
.recv{border-left:4px solid var(--teal);padding:4px 0 4px 22px;margin-top:6px}
.recv .k{font-family:var(--title);font-weight:600;font-size:18px;color:var(--teal);margin-bottom:8px}
.recv p{font-size:19px;line-height:1.55}
.cases{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px;margin-top:clamp(56px,7vw,100px)}
.case{border-top:1px solid var(--rule);padding-top:28px;display:flex;flex-direction:column;gap:18px}
.case .who{font-family:var(--title);font-weight:600;font-size:18px;color:var(--goldtx)}
.case h3{font-size:30px}
.needles{border-top:2px solid var(--ink);margin-top:clamp(56px,7vw,100px)}
.needle{display:grid;grid-template-columns:minmax(240px,1fr) minmax(0,2fr);gap:14px 60px;padding:clamp(40px,5vw,68px) 0;border-bottom:1px solid var(--rule);align-items:start}
.needle h3{font-size:26px}
.needle .p{max-width:62ch}
.vs{margin-top:clamp(56px,7vw,90px);border-top:2px solid var(--ink)}
.vshead,.vsrow{display:grid;grid-template-columns:1fr 1fr;gap:48px;padding:22px 0;border-bottom:1px solid var(--rule)}
.vshead{font-family:var(--title);font-weight:600;font-size:22px}
.vshead span:first-child{color:var(--mute)}
.vsrow span{font-size:19px;line-height:1.5}
.vsrow span:first-child{color:var(--mute)}
.vsrow span:last-child{color:var(--ink);font-weight:500}
.relgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 48px;border-top:2px solid var(--ink);padding-top:34px}
.relgrid h4{font-size:21px;margin-bottom:10px}
.fit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px;margin-top:clamp(56px,7vw,100px)}
.panel{border-top:6px solid var(--teal);padding-top:30px;display:flex;flex-direction:column;gap:20px}
.panel.no{border-color:var(--rose)}
.panel .k{font-family:var(--title);font-weight:600;font-size:22px;color:var(--teal)}
.panel.no .k{color:var(--rose)}
.panel h3{font-size:clamp(28px,3vw,38px);font-weight:700;letter-spacing:-.018em;line-height:1.1}
.panel .p{max-width:48ch}
.dgroup{margin-top:clamp(56px,7vw,90px)}
.dghead{display:block;border-bottom:2px solid var(--ink);padding-bottom:18px}
.dghead h3{font-size:30px}
.dgsum{font-size:19px;line-height:1.55;color:var(--mute);margin:8px 0 0;max-width:70ch}
.d{display:grid;grid-template-columns:minmax(220px,1fr) minmax(0,1.8fr);gap:12px 60px;padding:clamp(52px,7vw,92px) 0;border-bottom:1px solid var(--rule);align-items:start}
.d .n{font-family:var(--title);font-weight:600;font-size:24px;line-height:1.25;letter-spacing:-.012em}
.d .n small{display:block;font-family:var(--title);font-weight:600;font-size:17px;color:var(--goldtx);margin-top:8px;letter-spacing:0}
.d .p{max-width:60ch}
.price{font-family:var(--mono);font-weight:700;font-size:clamp(56px,10vw,150px);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;white-space:nowrap;max-width:100%}
.faq{border-top:2px solid var(--ink);margin-top:52px}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{font-family:var(--title);font-weight:600;font-size:24px;line-height:1.3;padding:28px 48px 28px 0;cursor:pointer;list-style:none;position:relative;letter-spacing:-.012em}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";position:absolute;right:6px;top:24px;font-family:var(--mono);font-weight:700;color:var(--gold);font-size:28px}
.faq details[open] summary:after{content:"\2212"}
.faq .a{padding:4px 0 32px;font-size:19px;line-height:1.65;color:var(--ink2);max-width:64ch}
.faq .a p+p{margin-top:.9em}

/* ---------- 10 report parts (new in 1.0, for the pre-research report) ---------- */
/* a finding: number, verdict, evidence, quote, and what the research adds */
.finding{border-top:2px solid var(--ink);padding-top:30px;margin-top:clamp(64px,8vw,110px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:40px 72px;align-items:start}
.finding .fno{font-family:var(--mono);font-weight:700;font-size:17px;color:var(--goldtx);letter-spacing:.04em}
.finding h3{font-size:clamp(28px,3vw,40px);font-weight:700;letter-spacing:-.018em;line-height:1.1;margin-top:12px}
.finding .verdict{font-size:20px;line-height:1.55;color:var(--ink2);margin-top:22px;max-width:44ch}
.finding .verdict b{font-weight:500;color:var(--ink)}
.finding .evidence{display:flex;flex-direction:column;gap:30px}
.finding .fig{padding-top:0;border-top:0}
.finding .fig .fhead{margin-bottom:22px}
/* the big figure that belongs to a finding */
.big{font-family:var(--mono);font-weight:700;font-size:clamp(56px,7vw,96px);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--ink);margin-top:22px}
.big.neg{color:var(--crimson)} .big.pos{color:var(--mteal)}
.big small{display:block;font-family:var(--title);font-weight:600;font-size:19px;letter-spacing:0;color:var(--mute);margin-top:12px;max-width:26ch}
/* a direct quote from an AI assistant's answer. The decisive phrase is bold crimson. */
.quote{border-left:4px solid var(--rule);padding:6px 0 6px 26px;font-size:19px;line-height:1.6;color:var(--ink2)}
.quote p{margin:0}
.quote mark{background:transparent;color:var(--crimson);font-weight:700}
.quote mark.pos{color:var(--mteal)}
.quote .who{display:block;font-family:var(--title);font-weight:600;font-size:16px;color:var(--mute);margin-top:12px;letter-spacing:0}
.quotes{display:flex;flex-direction:column;gap:22px}
/* a redaction: a detail held back in a free report. Set in Redacted Script (Google Fonts) over
   nonsense letters, so the scribble reads as hidden words rather than as a chart bar, and nothing
   real is in the markup. Give the span role="img" and an aria-label. Load the font with the others. */
.rx{font-family:"Redacted Script",cursive;font-weight:700;font-style:normal;color:var(--ink);font-size:1.08em;letter-spacing:.03em;white-space:nowrap;user-select:none;-webkit-user-select:none;line-height:1}
.quote mark .rx{color:var(--crimson)}
.band .rx{color:var(--fg)}
.rate .rl .rx,.legend .rx{font-size:1.05em}
/* what the research adds: the honest locked line */
.next{border-top:1px solid var(--rule);padding-top:20px;display:flex;flex-direction:column;gap:8px}
.next .k{font-family:var(--title);font-weight:600;font-size:16px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.next p{font-size:18px;line-height:1.55;color:var(--ink2);max-width:60ch}
.next p b{font-weight:500;color:var(--ink)}
/* 1.5: inside a .finding, .next is the dark, centred panel that closes the observation. Place it as the last child of .finding. */
.finding .next{grid-column:1/-1;border-top:0;background:var(--ink);color:#F2F0EA;padding:clamp(34px,4vw,52px) clamp(24px,4vw,64px);align-items:center;text-align:center;gap:14px;margin-top:8px}
.finding .next .k{color:#D2AA5A}
.finding .next p{color:#C8C4BA;font-size:clamp(19px,1.8vw,22px);line-height:1.5;max-width:62ch}
.finding .next p b{color:#F2F0EA;font-weight:600}
/* 1.5: byline and disclaimer for a dated, signed report */
.byline{font-size:18px;color:var(--mute);margin:-16px 0 34px;line-height:1.5}
.byline b{font-weight:500;color:var(--ink)}
.disclaimer{border:3px solid var(--ink);padding:22px 26px;margin-top:clamp(40px,5vw,64px);margin-bottom:clamp(40px,5vw,64px);font-size:16px;line-height:1.6;color:var(--ink2);max-width:100%;text-align:left}
.disclaimer .k{font-family:var(--title);font-weight:600;font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);display:block;margin-bottom:8px}
/* two headline numbers: remembered against looked up */
.pair{display:grid;grid-template-columns:1fr 1fr;gap:56px;margin-top:clamp(56px,7vw,100px);border-top:2px solid var(--ink)}
.pair>div{padding-top:28px;display:flex;flex-direction:column;gap:10px}
.pair .k{font-family:var(--title);font-weight:600;font-size:22px}
.pair .k small{display:block;font-size:17px;color:var(--mute);font-weight:600;margin-top:4px}
.pair .big{margin-top:14px}
.pair .p{max-width:40ch}
/* horizontal rate bars in HTML, with the denominator track (template 001 rule B) */
.rates{display:flex;flex-direction:column;gap:14px;margin-top:8px}
.rate{display:grid;grid-template-columns:minmax(120px,190px) minmax(0,1fr) 64px;gap:16px;align-items:center;font-size:17px}
.rate .rl{color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rate .rl.me{color:var(--crimson);font-weight:700}
.rate .track{height:16px;background:var(--faint);position:relative}
.rate .track i{position:absolute;left:0;top:0;bottom:0;background:var(--g3);transform-origin:left center;transform:scaleX(0);transition:transform .8s var(--ease);transition-delay:calc(.25s + var(--i,0)*90ms)}
.in .rate .track i{transform:scaleX(1)}
.rate .track i.me{background:var(--crimson)}
.rate .track i.g1{background:var(--g1)} .rate .track i.g2{background:var(--g2)} .rate .track i.g4{background:var(--g4)}
.rate .rv2{font-family:var(--mono);font-weight:700;font-variant-numeric:tabular-nums;text-align:right;color:var(--ink)}
.rate .rv2.me{color:var(--crimson)}
/* a stepped segment bar for part to whole */
.seg{display:flex;height:22px;width:100%;margin-top:8px}
.seg i{display:block;height:100%}
.seg i.neg{background:var(--crimson)} .seg i.mid{background:var(--g4)} .seg i.pos{background:var(--mteal)} .seg i.none{background:var(--faint)}
/* rank strip: positions a brand held across comparison answers */
.rank{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:8px}
.rank div{border-top:4px solid var(--g5);padding-top:10px;font-size:16px;color:var(--mute);display:flex;flex-direction:column;gap:6px}
.rank div .n{font-family:var(--mono);font-weight:700;font-size:26px;color:var(--ink);letter-spacing:-.02em}
.rank div.me{border-color:var(--crimson)}
.rank div.me .n{color:var(--crimson)}
/* a caps label that names what a block is for (template 001 revision 16) */
.caps{font-family:var(--title);font-weight:600;font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.caps.cost{color:var(--crimson)} .caps.do{color:var(--mteal);font-weight:700}
/* the sample notice */
.notice{border:3px solid var(--gold);padding:14px 18px;font-size:16px;line-height:1.5;color:var(--ink2);max-width:60ch;margin:0 auto}
.notice b{color:var(--ink);font-weight:500}

/* ---------- 11 forms ---------- */
.form{margin-top:64px;border-top:2px solid var(--ink);padding-top:10px}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:32px 44px;margin-top:28px}
.field{display:flex;flex-direction:column;gap:10px}
.field.full{grid-column:1/-1}
.field .lab,.field label.lab{font-family:var(--title);font-weight:600;font-size:19px;letter-spacing:-.005em;display:block}
.field .hint{font-size:17px;color:var(--mute);line-height:1.5;margin:0}
.field input[type=text],.field input[type=email],.field input[type=url],.field select,.field textarea{font-family:var(--body);font-size:18px;padding:14px 16px;border:1px solid var(--g4);background:#fff;color:var(--ink);border-radius:0;width:100%}
.field textarea{min-height:96px;resize:vertical}
.field select{-webkit-appearance:none;appearance:none;padding-right:52px;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'><path d='M1 1l7 7 7-7' fill='none' stroke='%23AA8844' stroke-width='2'/></svg>");background-repeat:no-repeat;background-position:right 18px center;cursor:pointer;line-height:1.35}
.field select:invalid,.field select option[value=""]{color:var(--mute)}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--gold);outline-offset:1px;border-color:var(--gold)}
.opts{display:flex;flex-direction:column;gap:12px}
.opts label{display:flex;align-items:flex-start;gap:12px;font-family:var(--body);font-weight:400;font-size:18px;line-height:1.5;color:var(--ink2);cursor:pointer}
/* 1.11.1: the box itself, not every input in the group. `.opts input` also hit the text field a choice reveals,
   which took the 17px height and came out half the height of the other fields (Siavash, 18 September 2026). */
.opts input[type=radio],.opts input[type=checkbox]{margin-top:6px;accent-color:var(--gold);width:17px;height:17px;flex:0 0 auto}
.opts.row{flex-direction:row;flex-wrap:wrap;gap:12px 28px}
.fsubmit{margin-top:44px;display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.form .fcaps{font-family:var(--title);font-weight:600;font-size:22px;color:var(--goldtx);margin:34px 0 0}
/* a radio choice that reveals a follow-up input beneath it */
.choice{display:flex;flex-direction:column;gap:14px}
.choice .sub{margin:2px 0 6px 29px;padding-left:18px;border-left:2px solid var(--rule);display:flex;flex-direction:column;gap:10px}
/* 1.11: the revealed field is a field like any other, so it is not read as an afterthought. Its label is a field label,
   and the rule on the left ties it to the option that opened it (Siavash, 18 September 2026). */
.choice .sub .lab{font-family:var(--title);font-weight:600;font-size:19px;letter-spacing:-.005em;display:block;color:var(--ink)}
.choice .sub input[type=text]{font-family:var(--body);font-size:18px;padding:14px 16px;border:1px solid var(--g4);background:#fff;color:var(--ink);border-radius:0;width:100%;max-width:460px}
.choice .sub input:focus{outline:2px solid var(--gold);outline-offset:1px;border-color:var(--gold)}
.choice .sub .hint{font-size:16px}

/* ---------- 12 footer ---------- */
footer{border-top:1px solid var(--rule);padding-block:48px;font-size:17px;line-height:1.6;color:var(--mute)}
footer .inner{max-width:80ch}
footer .end{color:var(--gold)}
/* 1.6: the deep footer, on ink, with the wordmark large, four columns and the entity line */
footer.deep{background:var(--ink);color:#C8C4BA;border-top:0;padding-block:clamp(64px,8vw,110px) 40px}
footer.deep .wm{font-family:var(--title);font-weight:600;font-size:clamp(46px,9vw,136px);letter-spacing:0;line-height:.95;color:#F2F0EA;font-variation-settings:"opsz" 96;margin:0}
footer.deep .wm span{color:#D2AA5A}
footer.deep .fcols{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:32px;margin-top:clamp(48px,6vw,80px);border-top:1px solid #3A3A3A;padding-top:36px}
footer.deep .fk{font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#8E8A80;margin:0 0 18px}
footer.deep .fcols a{color:#F2F0EA;text-decoration:none;display:block;font-size:17px;line-height:1.4;margin-bottom:12px;font-weight:400}
footer.deep .fcols a:hover{color:#D2AA5A}
footer.deep .fabout{font-size:17px;line-height:1.6;color:#C8C4BA;max-width:34ch}
footer.deep .inner{margin-top:56px;border-top:1px solid #3A3A3A;padding-top:24px;font-size:15px;line-height:1.6;color:#8E8A80;max-width:none}
footer.deep .inner .end{color:#D2AA5A}

/* 1.6: a white surface on the paper. Square, a 3px edge that darkens to ink on hover when it is a link (or .hov).
   It comes after every part, so a part that is also a surface (a .form, a .quote) takes the surface edge.
   Every box border is 3px minimum; rules between rows and form inputs stay 1px. */
.surface{background:var(--surface);border:3px solid var(--rule);transition:border-color .3s ease}
a.surface:hover,.surface.hov:hover{border-color:var(--ink)}

/* ---------- 13 responsive ---------- */
@media (max-width:980px){
  .cols3,.tiles,.stats,.phases{grid-template-columns:1fr 1fr}
  .facts{grid-template-columns:1fr 1fr}
  .relgrid{grid-template-columns:1fr 1fr}
  .finding{grid-template-columns:1fr;gap:34px}
  .opener{grid-template-columns:1fr;gap:20px}
  .opener .stmt{max-width:100%}
  footer.deep .fcols{grid-template-columns:1fr 1fr}
}
@media (max-width:780px){
  .fig .plot svg{min-width:680px;max-width:none}
  .fig .plot{padding-bottom:6px}
  .shint{display:block}
  .cols3,.tiles,.stats,.phases,.cases,.fgrid,.fit,.relgrid,.pair{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr 1fr;gap:28px}
  .vshead,.vsrow{gap:20px}
  .wrow,.needle,.d{grid-template-columns:1fr;gap:6px}
  .units.c45{grid-template-columns:repeat(27,1fr);gap:2px}
  .units.c20{gap:3px}
  .units.c10{gap:5px}
  .stmt{max-width:100%}
  body{font-size:18px}
  .rate{grid-template-columns:minmax(96px,140px) minmax(0,1fr) 56px;gap:10px;font-size:16px}
  .mast nav a:not(.btn){display:none}
  footer.deep .fcols{grid-template-columns:1fr}
}
@media (max-width:760px){.mast nav a:not(.btn){display:none}}

/* ---------- 14 reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .rv,.rise .w,.pop{opacity:1!important;transform:none!important;transition:none!important}
  .bar,.rate .track i{transform:none!important;transition:none!important}
  .draw{stroke-dashoffset:0!important;transition:none!important}
  .band{transition:none!important}
  .c{transition:none!important}
  .pull .w,.litup .w{color:inherit!important}
}

/* ============================================================
   1.7 · The founder (16 September 2026). Promoted from the homepage page style when the
   Organic AI Growth landing page took the same block: portrait beside the words, badges as
   a ruled row. Used inside a .band; the black ground (#about.band{--bg:#000}) stays a page rule.
   ============================================================ */
.founder{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:64px;align-items:center}
.founder img{display:block;width:100%;height:auto;max-width:440px}
.founder .name{font-family:var(--title);font-weight:600;font-size:clamp(28px,2.8vw,38px);letter-spacing:-.025em;line-height:1.05;margin:0 0 10px}
.founder .role{font-family:var(--mono);font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--goldtx);margin:0 0 28px}
.founder .p+.p{margin-top:16px}
.founder .tlink{display:inline-block;margin-top:28px;font-size:18px}
.badges{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px;margin-top:clamp(48px,6vw,80px);border-top:1px solid var(--ln);padding-top:32px}
.badge{display:flex;flex-direction:column;gap:8px;border-left:1px solid var(--ln);padding-left:20px}
.badge:first-child{border-left:0;padding-left:0}
.badge svg{width:30px;height:30px;fill:none;stroke:var(--goldtx);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;margin-bottom:8px}
.badge .bn{font-family:var(--mono);font-weight:700;font-size:26px;letter-spacing:-.02em;line-height:1;color:var(--fg)}
.badge .bk{font-size:15px;line-height:1.45;color:var(--fg2)}

@media (max-width:980px){
  .founder{grid-template-columns:1fr}
  .badges{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:780px){
  .badges{grid-template-columns:1fr 1fr}
  .badge{border-left:0;padding-left:0}
}

/* ============================================================
   1.8 · Display type at normal tracking (17 September 2026). Siavash found the tightened
   letter spacing on large headings too tight; the rules above now set letter-spacing:0 on
   h1, h2, .stmt, .opener .stmt, .hero h1, .pull p and footer.deep .wm.

   1.8 · The phone specimen (17 September 2026). Promoted from the Organic AI Growth free
   report page and the study page, which use it identically: a drawn phone with a chat on
   its screen, and beside it the verdict column, what the answer did to each brand.
   Markup: .specimen > .phone (.screen > .sbar, .ttl, .msgs > .m.u and .m.a, .inp) and
   .specimen > .verdict (.tag, .for, .mk.pos / .neg / .none, .mk.you). The cycling script
   stays in each page after <!--@js-->; it shows the first conversation complete under
   body.static and reduced motion. The phone is an illustration of a device and keeps its
   rounded corners; nothing of the page's own chrome has a radius. .verdict is scoped to
   .specimen because .finding .verdict is a report part.
   ============================================================ */
.specimen{display:grid;grid-template-columns:300px minmax(0,1fr);gap:28px;align-items:end;justify-self:end;width:100%;max-width:560px}
.phone{background:#0D0D0D;padding:12px;border-radius:44px;box-shadow:0 30px 60px -30px rgba(13,13,13,.45)}
.phone .screen{background:#fff;border-radius:34px;overflow:hidden;height:560px;display:flex;flex-direction:column;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif}
.phone .sbar{display:flex;justify-content:space-between;align-items:center;padding:14px 22px 6px;font-size:13px;font-weight:600;color:#0D0D0D}
.phone .sbar i{display:inline-block;width:22px;height:11px;border:1.5px solid #0D0D0D;border-radius:3px;position:relative}
.phone .sbar i:after{content:"";position:absolute;left:1.5px;top:1.5px;bottom:1.5px;width:14px;background:#0D0D0D;border-radius:1px}
.phone .ttl{text-align:center;font-size:15px;font-weight:600;padding:2px 0 10px;border-bottom:1px solid #EAEAEA;color:#0D0D0D}
.phone .msgs{flex:1;padding:14px 12px 8px;display:flex;flex-direction:column;gap:12px;overflow:hidden;scroll-behavior:auto;font-size:14px;line-height:1.4;color:#0D0D0D}
.phone .m{max-width:88%;white-space:pre-wrap}
.phone .m.u{align-self:flex-end;background:#EFEFEF;padding:9px 13px;border-radius:18px 18px 4px 18px}
.phone .m.a{align-self:flex-start;padding:2px 4px;max-width:96%}
.phone .m.a b{font-weight:700}
.phone .m.a .cur{display:inline-block;width:2px;height:1em;background:#0D0D0D;vertical-align:-2px;margin-left:1px;animation:blink 1s steps(1) infinite}
.phone .m.a.done .cur{display:none}
@keyframes blink{50%{opacity:0}}
.phone .inp{margin:8px 12px 16px;border:1px solid #DADADA;border-radius:22px;padding:8px 8px 8px 14px;font-size:14px;color:#8A8A8A;display:flex;justify-content:space-between;align-items:center}
.phone .inp i{width:26px;height:26px;border-radius:50%;background:#0D0D0D;display:block;position:relative}
.phone .inp i:after{content:"";position:absolute;left:9px;top:9px;width:7px;height:7px;border-left:2px solid #fff;border-top:2px solid #fff;transform:rotate(45deg)}
.phone .msgs{transition:opacity .3s ease} .phone .msgs.clear{opacity:0}
.phone .m.u{transition:opacity .35s ease,transform .35s ease} .phone .m.u.in0{opacity:0;transform:translateY(6px)}
.specimen .verdict{display:flex;flex-direction:column;gap:14px;padding-bottom:18px}
.specimen .verdict .tag{font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-bottom:4px}
.specimen .verdict .mk{font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase;display:grid;grid-template-columns:11px minmax(0,1fr);gap:2px 10px;align-items:center;line-height:1.3}
.specimen .verdict .mk i{grid-row:1} .specimen .verdict .mk b{grid-column:2;grid-row:1} .specimen .verdict .mk>span{grid-column:2;grid-row:2}
.specimen .verdict .mk i{display:block;width:11px;height:11px;flex:0 0 11px}
.specimen .verdict .mk.pos{color:var(--teal)} .specimen .verdict .mk.pos i{background:var(--teal)}
.specimen .verdict .mk.neg{color:var(--rose)} .specimen .verdict .mk.neg i{background:var(--rose)}
.specimen .verdict .mk.you{background:#fff;border:3px solid var(--rule);padding:10px 12px;margin-top:6px}
.specimen .verdict .mk.none{color:var(--rose)} .specimen .verdict .mk.none i{border:1px solid var(--rose);background:#fff}
.specimen .verdict .for{font-family:var(--title);font-weight:600;font-size:15px;line-height:1.3;color:var(--ink);margin:-8px 0 2px}
.specimen .verdict .mk,.specimen .verdict .for{transition:opacity .35s ease}
.specimen .verdict.sw .mk,.specimen .verdict.sw .for{opacity:0}
.specimen .verdict .mk b{font-family:var(--title);font-weight:600;font-size:15px;letter-spacing:0;text-transform:none;color:var(--ink)}
@media (max-width:1180px){
  .specimen{grid-template-columns:270px minmax(0,1fr);gap:22px}
  .phone .screen{height:520px}
}
@media (max-width:980px){
  .specimen{justify-self:start}
}
@media (max-width:640px){
  .specimen{grid-template-columns:1fr;max-width:320px}
  .specimen .verdict{padding-bottom:0}
}

/* ============================================================
   1.8 · Quotes that read as quotes (17 September 2026). On .voices (two client quotes on
   surfaces, a page layout): a large gold opening mark top left, a closing mark bottom right,
   inside all four edges of the surface. The .voices grid itself stays a page rule.
   ============================================================ */
.voices .quote{position:relative;padding:56px 44px 52px 44px}
.voices .quote:before,.voices .quote:after{position:absolute;font-family:var(--title);font-weight:700;font-size:96px;line-height:1;color:var(--gold);opacity:.55}
.voices .quote:before{content:"\201C";top:14px;left:22px}
.voices .quote:after{content:"\201D";bottom:-2px;right:22px;line-height:.55}