@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
:root{
  /* ⛔ THE SITE IS DARK AND SAYS SO. Without this the browser treats a dark page as a LIGHT
     one: the scrollbars, the canvas beyond the page and every native form control render in
     the light palette, which is the white the operator saw down the right-hand side on 2
     September 2026 - measured live, no element on the page had a light background and
     documentElement reported color-scheme "normal". It is also what lets Chrome's Auto Dark
     Mode darken an already-dark page a second time; the same day that erased the black label
     off a gold button in the adviser portal, and the DOM looked perfect throughout. */
  color-scheme: dark;
  --gold:#E0B44A; --gold-dk:#C9992F; --ink:#12151A; --ink2:#1B1F26; --line:#2C323C;
  --txt:#E9ECF1; --mut:#A7B0BE;
  /* TYPEFACES — declared once, used everywhere (2026-07-28). Before this the site ran FIVE stacks,
     two of which resolved to system fallbacks: ~95% of the prose was Arial (Helvetica isn't on
     Windows) and the footer stacked Manrope on Segoe UI (Inter was never loaded).
     --font-sans     Manrope, a real loaded webfont, for all sans text and UI.
     --font-display  Georgia for big numerals and product headlines — kept deliberately; a serif
                     display face against a sans text face is a proper pairing and carries the
                     financial-document feel. Charts carry the same families as literals (SVG
                     presentation attributes can't take var()) — keep them in step. */
  --font-sans:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-display:Georgia,'Times New Roman',serif;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--font-sans);background:#0b0d11;color:var(--txt);
     -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-kerning:normal}
/* typographic pass: no widows on headings, no ragged orphan lines in body copy */
.h1,.h2,.card h3,.prod h4,.step h4,.who h4,.stat .l,.strip .l{text-wrap:balance}
p,.lede,.vizcap,.cc-cap,.disc,.faq p,.cmp td{text-wrap:pretty;hyphens:none}
img{max-width:100%}
a{text-decoration:none}

/* ---------- shared bits ---------- */
.wrap{max-width:1120px;margin:0 auto;padding:0 28px}
.eyebrow{color:var(--gold);letter-spacing:.22em;text-transform:uppercase;font-size:12px;font-weight:700}
.h1{font-size:clamp(32px,4.6vw,54px);font-weight:300;line-height:1.12;letter-spacing:-.01em}
.h1 b{color:var(--gold);font-weight:600}
.h2{font-size:clamp(24px,3vw,36px);font-weight:300;line-height:1.2}
.h2 b{color:var(--gold);font-weight:600}
.lede{color:var(--mut);font-size:clamp(15px,1.5vw,19px);line-height:1.7;max-width:760px}
.btn{display:inline-block;background:var(--gold);color:#15171c;font-weight:700;font-size:16px;
     padding:16px 34px;border-radius:3px;letter-spacing:.02em;transition:.18s}
.btn:hover{background:#f0c766;transform:translateY(-1px)}
.btn-ghost{display:inline-block;border:1px solid var(--line);color:var(--txt);font-size:15px;
     padding:15px 30px;border-radius:3px;transition:.18s}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
.sec{padding:88px 0}
.sec.alt{background:var(--ink2)}
.rule{width:56px;height:3px;background:var(--gold);margin:22px 0 28px}
.disc{color:#8b949e;font-size:12px;line-height:1.75;max-width:900px;margin:0 auto}

/* page separator for this preview only */
.pagemark{background:#000;color:var(--gold);font:700 12px/1 monospace;letter-spacing:.2em;
     padding:14px;text-align:center;border-top:1px solid #333;border-bottom:1px solid #333}

/* ---------- PAGE 1 : splash ---------- */
.splash{display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:62px 24px 72px;
  background:linear-gradient(rgba(6,8,11,.58),rgba(6,8,11,.78)),
    url('https://static.wixstatic.com/media/1bcf48_677032438776472e8882cf60bbb55b4c~mv2.jpg/v1/fill/w_1675,h_1168,al_c,q_85,usm_1.20_1.00_0.01,enc_avif,quality_auto/1bcf48_677032438776472e8882cf60bbb55b4c~mv2.jpg') center/cover no-repeat}
.splash .logo{width:400px;max-width:82vw;margin-bottom:26px;mix-blend-mode:lighten}
.splash .sub{color:var(--mut);font-size:17px;margin:18px 0 44px}
.cards{display:flex;gap:22px;flex-wrap:wrap;justify-content:center;width:100%;max-width:980px}
.cards{align-items:stretch}
.card{flex:1 1 380px;max-width:460px;background:rgba(20,24,30,.82);border:1px solid var(--line);
  border-radius:4px;padding:38px 34px;text-align:left;transition:.2s;display:flex;flex-direction:column}
.card:hover{border-color:var(--gold);transform:translateY(-3px)}
.card .tag{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--gold)}
.card .tag.q{color:var(--mut)}
.card h3{font-size:25px;font-weight:400;color:#fff;margin:14px 0 12px}
.card p{color:var(--mut);font-size:15px;line-height:1.65}
.card .go{color:var(--gold);font-size:14px;font-weight:600;margin-top:auto;padding-top:24px;display:inline-block}
/* The advanced-sleeve card links to an enquiry, not to a page that describes the program
   (2026-07-29 review, H5a): it promised an actively-managed options program that does not
   exist anywhere on this site. The card keeps its copy; this line says plainly that the
   detail is not here, so the CTA reads as an invitation rather than a broken promise.
   .gonote takes the margin-top:auto so the pair still sits at the foot of the card. */
.card .gonote{color:var(--mut);font-size:12.5px;margin-top:auto;padding-top:24px;display:block}
.card .gonote + .go{margin-top:0;padding-top:5px}
/* at-a-glance payoff visuals */
.viz{width:100%;height:auto;display:block;margin:20px 0 6px;border:1px solid #232830;border-radius:3px;
     background:#0E1116}
.vizcap{color:#98A1B0;font-size:13px;line-height:1.55;text-align:left;margin:12px 0 22px;
        padding-left:12px;border-left:2px solid var(--gold)}
.prod .viz{margin:16px 0 4px}
.vizlegend{display:flex;gap:20px;flex-wrap:wrap;margin-top:12px;font-size:12.5px;color:#98A1B0}
.vizlegend span{display:inline-flex;align-items:center}
.vizlegend i{display:inline-block;width:20px;border-top:3px solid var(--gold);margin-right:8px}
.vizlegend i.d{border-top:2px dashed #8A93A1}
.vizaxis{display:flex;justify-content:space-between;font-size:12px;color:#79818f;margin-top:7px}
.splash .fine{color:#79818f;font-size:11.5px;line-height:1.7;max-width:820px;margin-top:52px}

/* ---------- PAGE 2 : defined outcome ---------- */
.hero2{padding:104px 0 92px;
  background:linear-gradient(rgba(6,8,11,.80),rgba(6,8,11,.93)),
    url('https://static.wixstatic.com/media/1bcf48_677032438776472e8882cf60bbb55b4c~mv2.jpg/v1/fill/w_1675,h_1168,al_c,q_85,usm_1.20_1.00_0.01,enc_avif,quality_auto/1bcf48_677032438776472e8882cf60bbb55b4c~mv2.jpg') center 30%/cover no-repeat}
.hero2 .cta{margin-top:38px;display:flex;gap:14px;flex-wrap:wrap}

.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:26px;margin-top:46px}
.step{border-top:2px solid var(--gold);padding-top:20px}
.step .n{color:var(--gold);font-size:13px;font-weight:700;letter-spacing:.18em}
.step h4{font-size:20px;font-weight:500;color:#fff;margin:10px 0 10px}
.step p{color:var(--mut);font-size:15px;line-height:1.65}

/* Was repeat(2,1fr) - a fixed 2x2 built when there were FOUR products. With three, the
   last row held one card and a 543px empty cell beside it (measured at 1265px), and the
   'Design your outcome' button sat next to the gap. auto-fit fills the row instead:
   three across on a desktop, two on a tablet, one on a phone - and it stays right whether
   a product is retired or added back. */
.prods{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:44px}
/* 31 Aug 2026, lane PAGE item 24: was repeat(3,1fr). Income was retired (PART III 53.1) so
   preview_all.html - the ONLY page using .prods, checked, 1 grid, 2 cards - held two cards in
   a three-column grid: they sat in the left two thirds with a dead third on the right, which
   is the gap the operator's screenshot arrows at. Two columns fill the 1120px wrap. The two
   comments below are the record of the earlier 4-card and 3-card layouts and are left as
   written; they describe a card count the page no longer has. */
/* THREE ACROSS OR STACKED - never two-and-an-orphan. auto-fit was tried first and drops to
   two columns at tablet width, which puts the same 386px hole beside the last card that the
   old fixed 2x2 put beside it on a desktop (both measured). An explicit breakpoint is
   predictable at every width instead of nearly right at most of them. */
@media(max-width:980px){.prods{grid-template-columns:1fr}}
@media(max-width:700px){.prods{grid-template-columns:1fr}}
/* ⭐ THE THREE CARDS SHARE ONE GRID, at his instruction 26 August 2026: "the charts should line
   up across the top, and then the boxes down below should line up across the bottom, then the text
   in the middle should line up across the top... make everything kinda symmetrical."
   Each card is a COLUMN with one flexible row. The kick line is held at two lines' height so the
   charts start level even though Income's kick wraps and the other two do not; the paragraph is the
   only thing allowed to stretch, so the chips are pushed to the floor of every card and land in a
   row. The slack that used to sit UNDER the short cards now sits between their text and their
   chips, which is exactly the trade he asked for. */
.prod{background:#12151A;border:1px solid var(--line);border-radius:4px;padding:28px 24px;transition:.2s;
  display:flex;flex-direction:column}
.prod:hover{border-color:var(--gold)}
.prod h4{font-size:19px;font-weight:600;color:var(--gold);margin-bottom:6px}
/* Two lines' worth, always. Income's kick runs to two lines and the other two to one, which is what
   pushed its chart down a line and started the whole column out of step. 2.6em rather than a pixel
   figure so it follows the font if that ever changes. */
/* ⚠ line-height MUST BE PINNED for the min-height to mean two lines. Left at `normal` the browser
   gave ~17px a line, so two lines measured 34px against a 2.6em (31.2px) minimum and Income's chart
   still started 3px low - measured, not guessed. With the line-height fixed, 2.9em IS two lines, and
   a one-line kick is padded to exactly the same height. */
.prod .kick{font-size:12px;color:#8d95a3;letter-spacing:.1em;text-transform:uppercase;margin-bottom:14px;
  line-height:1.45;min-height:2.9em}
/* THE ONLY ROW THAT STRETCHES. Everything above it is fixed, so the paragraphs all start on the
   same line; this absorbs the difference in their length so the chips below start on the same line
   too. Without it the cards are ragged at BOTH ends and only look aligned at the top. */
.prod p{color:var(--mut);font-size:14.5px;line-height:1.62;flex:1 1 auto}
/* "ask your advisor" badge: hidden by default (RIA/Full see the card at full strength); shown and
   the card dimmed only in the Simple preset, so Floor/Buffer read as the two "start here" options
   without removing Tailored/Income from the page entirely. */
.advisor-badge{display:none}
body.granite-view-simple .hide-in-simple{display:none}
body.granite-view-simple .prod.advisor-only{opacity:.72}
body.granite-view-simple .advisor-badge{display:inline-block;font-size:10.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:#15171c;background:var(--gold);
  border-radius:20px;padding:4px 11px;margin-bottom:12px}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:24px;margin-top:40px}
.stat{text-align:center;padding:26px 16px;background:#12151A;border:1px solid var(--line);border-radius:4px}
.stat .v{font-size:34px;color:var(--gold);font-weight:300}
.stat .l{color:var(--mut);font-size:13.5px;margin-top:8px;line-height:1.5}

.who{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;margin-top:40px}
.who div{border-left:2px solid var(--line);padding-left:20px}
.who h4{color:#fff;font-size:17px;font-weight:500;margin-bottom:8px}
.who p{color:var(--mut);font-size:14.5px;line-height:1.62}

/* chart panel: dark, with the gold edge used by the product cards */
.chartcard{background:#0E1116;border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:4px;padding:22px 24px;margin-top:34px}
.chartcard img{width:100%;height:auto;display:block}
.chartcard .cc-cap{color:#98A1B0;font-size:12.5px;line-height:1.6;margin-top:14px;
  border-top:1px solid var(--line);padding-top:12px}
.chartcard .cc-cap b{color:#fff;font-weight:600}
.chartrow{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:820px){.chartrow{grid-template-columns:1fr}}
/* crash page: brochure layout — one lead chart beside its note, two smaller panels below */
.wrap.wide{max-width:1360px}
.crashtop{display:grid;grid-template-columns:1.5fr .82fr;gap:24px;align-items:stretch;margin-top:30px}
.crashtop .chartcard{margin-top:0;padding:16px 18px;display:flex;align-items:center}
.chartcard img.tall{width:100%;height:auto;margin:0}
.crashnote{background:#12151A;border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:4px;padding:26px 24px;display:flex;flex-direction:column;justify-content:center}
.crashnote .cn-h{color:var(--gold);font-size:15px;font-weight:600;letter-spacing:.04em;margin-bottom:12px}
.crashnote p{color:var(--mut);font-size:15px;line-height:1.65}
.crashnote p b{color:#fff;font-weight:600}
.cn-sub{color:#fff;font-size:17px;font-weight:500;margin:34px 0 -8px}
.crashrow{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.crashrow .chartcard{margin-top:22px;padding:16px 18px}
.crashrow .chartcard img{width:100%;height:auto;margin:0}
@media(max-width:820px){.crashtop,.crashrow{grid-template-columns:1fr}}
.hero-yes{font-size:clamp(64px,13vw,132px);line-height:.86;color:var(--gold);font-weight:600;
  display:block;margin:14px 0 6px;letter-spacing:-.02em}
/* hero stat strip */
.strip{display:flex;flex-wrap:wrap;gap:34px;margin-top:40px}
.strip div{min-width:150px}
.strip .k{font-size:30px;font-weight:300;color:var(--gold);line-height:1.1}
.strip .l{font-size:12.5px;color:var(--mut);margin-top:6px;line-height:1.4}
/* product chips */
/* margin-top:auto pins the chips to the bottom of their card even when the paragraph above them is
   short - belt and braces with `.prod p{flex:1}`, and the thing that actually guarantees the row
   lines up if a card ever has no paragraph at all. */
.chips{display:flex;gap:10px;margin-top:auto;padding-top:16px;flex-wrap:wrap}
.chip{background:#0E1116;border:1px solid var(--line);border-radius:3px;padding:9px 12px;flex:1;min-width:96px}
.chip .cl{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#79818f}
.chip .cv{font-size:19px;color:var(--gold);font-weight:400;margin-top:3px}
/* comparison table */
.tablewrap{overflow-x:auto;margin-top:34px}
.cmp{width:100%;border-collapse:collapse;font-size:14.5px;min-width:720px}
.cmp th,.cmp td{border:1px solid var(--line);padding:14px 16px;text-align:left;vertical-align:top;
  color:var(--mut);line-height:1.6}
.cmp th{background:#12151A;color:#fff;font-weight:500;font-size:15px}
.cmp td.rl{color:#fff;font-weight:500;white-space:nowrap;background:#12151A}
.cmp td.us{background:rgba(224,180,74,.07);color:#D9DEE6}
.cmp th.us{color:var(--gold)}
/* ---------- TAX EXPLAINER (home page section, added 2026-08-22) ----------
   The standalone explainer this came from was light grey on white with its own palette.
   Nothing below invents a colour: gold is the site's --gold, the "you pay" state is the
   site's own warn amber, and every surface/line is --ink2 / --line like the rest of the page. */
.taxviz{margin-top:38px}
/* Base vs Hedge, explained (added 2026-08-22 at the operator's request: "make it so that a
   ninety year old lady can understand it easily"). Two cards, each with a proportion bar showing
   what is actually IN the account. The bar is deliberately unlabelled by number - the split varies
   by client and term, and printing a percentage here would be inventing one. */
.bh{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:22px;margin-top:34px}
.bh-card{background:var(--ink2);border:1px solid var(--line);border-radius:4px;padding:26px 26px 22px}
.bh-tag{color:var(--gold);font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:700}
.bh-h{color:#fff;font-size:22px;font-weight:400;margin:10px 0 6px;font-family:var(--font-display)}
.bh-say{color:var(--gold);font-size:15.5px;line-height:1.5;margin-bottom:20px}
.bh-bar{display:flex;height:46px;border-radius:3px;overflow:hidden;border:1px solid var(--line)}
/* NO TEXT INSIDE THE SEGMENTS. The word "Hedge" was clipping to "Hedg/e" in the narrow one
   (operator, 22 Aug) - a label inside a box sized by ratio will always be at the mercy of the
   ratio. The legend below carries the words instead, so it cannot recur at any width. */
.bh-seg{min-width:0}
.bh-seg.base{background:rgba(224,180,74,.15)}
.bh-seg.hedge{background:var(--gold)}
.bh-seg.hedge.grow{background:#3E7D5A}
.bh-leg{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:12px;color:var(--mut);font-size:13px}
.bh-leg b{color:#fff;font-weight:600}
.bh-leg .sw{display:inline-block;width:11px;height:11px;border-radius:2px;margin-right:8px}
.bh-leg .sw.base{background:rgba(224,180,74,.15);border:1px solid var(--line)}
.bh-leg .sw.hedge{background:var(--gold)}
.bh-leg .sw.hedge.grow{background:#3E7D5A}
.bh-same{margin-top:26px;border-left:3px solid var(--line);padding:4px 0 4px 22px}
.bh-same-h{color:#fff;font-family:var(--font-display);font-size:20px;margin-bottom:8px}
.bh-same p{color:var(--mut);font-size:15px;line-height:1.7;max-width:820px}
.bh-rows{margin-top:20px}
.bh-rows>div{display:grid;grid-template-columns:118px 1fr;gap:14px;padding:13px 0;
  border-top:1px solid var(--line)}
.bh-k{color:#7E8797;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
  font-weight:700;padding-top:2px}
.bh-v{color:var(--mut);font-size:14.5px;line-height:1.62}
.bh-v b{color:#fff;font-weight:600}
@media(max-width:560px){
  .bh-rows>div{grid-template-columns:1fr;gap:4px}
}
/* the fifteen-year timeline: one row per route, one tick per year */
.tl-row{background:var(--ink2);border:1px solid var(--line);border-radius:4px;
  padding:18px 20px;margin-bottom:16px}
.tl-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  flex-wrap:wrap;margin-bottom:14px}
.tl-name{color:#fff;font-size:16px;font-weight:500}
.tl-sum{color:var(--mut);font-size:13.5px}
.years{display:flex;gap:3px;align-items:flex-end;height:44px}
.yr{flex:1 1 0;min-width:8px;border-radius:1px;height:13px;background:#2C323C}
.yr.free{background:rgba(224,180,74,.13)}
.yr.pay{background:var(--gold-dk);height:30px}
.yr.big{background:var(--gold);height:44px}
.tl-key{display:flex;gap:22px;flex-wrap:wrap;font-size:12.5px;color:var(--mut);margin-top:16px}
.tl-key .sw{display:inline-block;width:10px;height:10px;border-radius:1px;margin-right:7px}
/* the outcome bars: same money, different tax */
.bars{margin-top:34px;display:flex;flex-direction:column;gap:14px}
.bar-row{display:grid;grid-template-columns:minmax(150px,250px) 1fr auto;gap:18px;align-items:center}
.bar-lab{color:var(--mut);font-size:14.5px}
.bar-track{background:#12151A;border:1px solid var(--line);border-radius:2px;height:26px;overflow:hidden}
.bar-fill{display:block;height:100%;background:var(--gold)}
.bar-fill.dim{background:#3C4450}
.bar-fill.warn{background:var(--gold-dk)}
.bar-val{font-family:var(--font-display);font-size:18px;color:#fff;min-width:104px;text-align:right}
.cmp td.good{color:var(--gold);font-weight:600;white-space:nowrap}
.cmp td.bad{color:#E0A06A;font-weight:600;white-space:nowrap}
@media(max-width:620px){
  .bar-row{grid-template-columns:1fr;gap:6px}
  .bar-val{text-align:left;min-width:0}
}
/* proof callout */
.proof{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px;margin-top:38px}
.proof div{border-left:2px solid var(--gold);padding:4px 0 4px 18px}
.proof .pn{font-size:32px;font-weight:300;color:var(--gold);line-height:1.1}
.proof .pl{color:var(--mut);font-size:14.5px;margin-top:8px;line-height:1.6}
.faq{margin-top:40px;max-width:880px}
.faq details{border-bottom:1px solid var(--line);padding:20px 0}
.faq summary{cursor:pointer;color:#fff;font-size:17px;font-weight:500;list-style:none;position:relative;padding-right:34px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';position:absolute;right:6px;top:-2px;color:var(--gold);font-size:24px;font-weight:300}
.faq details[open] summary::after{content:''}
.faq p{color:var(--mut);font-size:15px;line-height:1.7;margin-top:14px}

.photoband{position:relative;background:linear-gradient(rgba(6,8,11,.80),rgba(6,8,11,.90)),
  url('https://static.wixstatic.com/media/1bcf48_677032438776472e8882cf60bbb55b4c~mv2.jpg/v1/fill/w_1675,h_1168,al_c,q_85,usm_1.20_1.00_0.01,enc_avif,quality_auto/1bcf48_677032438776472e8882cf60bbb55b4c~mv2.jpg') center 65%/cover no-repeat;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.close{text-align:center;padding:104px 24px;border-top:1px solid var(--line);
  background:linear-gradient(rgba(6,8,11,.72),rgba(6,8,11,.88)),
  url('https://static.wixstatic.com/media/1bcf48_677032438776472e8882cf60bbb55b4c~mv2.jpg/v1/fill/w_1675,h_1168,al_c,q_85,usm_1.20_1.00_0.01,enc_avif,quality_auto/1bcf48_677032438776472e8882cf60bbb55b4c~mv2.jpg') center 20%/cover no-repeat}
/* cityscape band for a mid-page section: dark gradient over the photo -- visible enough to read as a
   designed backdrop (matching the marketing pages), still dark enough to keep the content crisp.
   Selector uses .sec.scene (2 classes) so it beats .sec.alt's background on specificity, not just order. */
.sec.scene{background:linear-gradient(rgba(9,11,15,.80),rgba(9,11,15,.90)),
  url('https://static.wixstatic.com/media/1bcf48_677032438776472e8882cf60bbb55b4c~mv2.jpg/v1/fill/w_1675,h_1168,al_c,q_85,usm_1.20_1.00_0.01,enc_avif,quality_auto/1bcf48_677032438776472e8882cf60bbb55b4c~mv2.jpg') center 45%/cover no-repeat;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.footer{background:#07090c;padding:40px 24px;text-align:center;border-top:1px solid #1b1f26}

/* PREVIEW ONLY: section name + which editions it appears in. Stripped by build_pages.py. */
.audtag{position:absolute;top:0;right:0;z-index:9;display:flex;align-items:center;gap:12px;background:#000;border-left:1px solid #3a3a3a;border-bottom:1px solid #3a3a3a;padding:9px 16px;font:700 13px/1 monospace;letter-spacing:.12em}
.audtag .nm{color:#E0B44A}
.audtag .ed{color:#6b7280;font-size:12px}
.audtag .ed b{color:#35C08A;font-weight:700}
.audtag .pg{color:#fff;background:#E0B44A;color:#111;border-radius:2px;padding:3px 7px;font-size:13px}
section{position:relative}

/* ================= SITE NAV ================= */
.nav{position:sticky;top:0;z-index:60;background:rgba(8,10,14,.94);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line)}
.nav .ni{max-width:1360px;margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:6px;
  flex-wrap:wrap;min-height:56px}
/* nav links live in their own flex-wrap box so any overflow wraps WITHIN this box -- the wrapped
   line starts at the box's own left edge, under "Home" -- instead of .ni wrapping the whole link
   group down to the page's left margin. flex-basis:100% (not flex:1 1 0%) makes the box claim the
   FULL row width for itself rather than sharing a line with .ver/.audbar and getting squeezed down
   to a sliver -- operator: a squeezed box was wrapping into many narrow rows going down the page;
   it should flow left-to-right using the whole width and wrap into just two rows. */
.nav .nav-links{display:flex;align-items:center;gap:6px;flex-wrap:wrap;flex:1 1 auto;min-width:0}
.nav .brand{font-size:13px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  color:var(--gold);margin-right:20px;white-space:nowrap}
.nav a.t{color:var(--mut);font-size:13.5px;padding:9px 14px;border-radius:3px;white-space:nowrap;
  border:1px solid transparent;transition:.15s}
.nav a.t:hover{color:#fff;border-color:var(--line)}
.nav a.t.on{color:#15171c;background:var(--gold);font-weight:700}
.nav a.t.contact{border-color:var(--line);color:var(--gold)}
.nav a.t.contact:hover{background:var(--gold);color:#15171c;border-color:var(--gold)}
@media(max-width:700px){.nav .ni{min-height:0;padding:10px 16px}.nav .brand{width:100%;margin:0 0 6px}}

/* ================= PRODUCT PAGES (brochure layout) ================= */
/* ---- product page, built to mirror the brochure layout ---- */

.pband{background:var(--acc);padding:26px 32px 24px;border-radius:4px 4px 0 0;position:relative}
.pband-cta{position:absolute;top:22px;right:28px;background:#fff;color:#15171c;font-weight:700;
  font-size:13px;padding:9px 16px;border-radius:20px;text-decoration:none;display:inline-flex;
  align-items:center;gap:6px;box-shadow:0 2px 8px rgba(0,0,0,.22);transition:.15s}
.pband-cta:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.28)}
@media(max-width:640px){.pband-cta{position:static;margin-top:16px}}
/* live calculator dropped in from design.html via <iframe> (?embed=1&locktabs=1), same-origin so
   its height is synced by the tiny script at the bottom of the page -- never a fixed guess */
.calc-embed{margin-top:22px;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#0E1116}
.calc-embed iframe{width:100%;border:0;display:block;min-height:960px}
/* ⚠ 960px IS NOT A GUESS AND MUST NOT BE LOWERED (operator, 8 Aug: "the chart was shrunk up like
   this... look how short the chart is compared to a normal chart, and look how the performance box
   on the bottom right covers up the chart. Something is wrong with the height setting").
   design.html bakes the payoff chart's ASPECT RATIO from its own window height, once, at draw time:
       var W = 1060, H = max(400, min(560, (window.innerHeight || 900) * 0.60))   (design.html:1635)
   and the SVG is width:100%/height:auto, so the rendered height is width x H/1060 forever after.
   Inside this iframe, window.innerHeight IS the iframe's height. At the old 640 the inner page drew
   H=400 - the CLAMP FLOOR - so the chart came out 451px instead of 632px at the same width, and the
   draggable "growth a year" inset, which is placed against the chart's lower right, landed on top of
   the payoff line. Measured, not reasoned: viewport 640 -> viewBox "0 0 1060 400"; viewport 960 ->
   "0 0 1060 560", identical to the standalone page.
   560/0.60 = 933.3, so anything at or above ~934 pins H to its 560 cap. The height-sync script at
   the foot of each product page still GROWS the iframe to the real content height (~1254) after
   load; this floor only guarantees the first draw is full size. It cannot be fixed by that script
   alone - the sync runs after the chart has already been drawn, and nothing redraws it. */
.pband .peyebrow{color:rgba(255,255,255,.78);font-size:11.5px;letter-spacing:.2em;
  text-transform:uppercase;font-weight:700;margin-bottom:10px}
.pband h2{font-family:var(--font-display);font-size:clamp(28px,3.6vw,40px);
  font-weight:700;color:#fff;display:inline-block;vertical-align:middle;letter-spacing:-.01em}
.pflag{display:inline-block;vertical-align:middle;margin-left:14px;font-size:10.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:#fff;border:1.5px solid rgba(255,255,255,.7);
  border-radius:20px;padding:4px 13px}
.pcard{background:#12151A;border:1px solid var(--line);border-top:none;border-radius:0 0 4px 4px;
  padding:32px}
.pintro{color:var(--mut);font-size:16px;line-height:1.7;max-width:76ch}
.pintro b{color:#fff;font-weight:600}
.specs{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:4px;overflow:hidden;margin-top:26px}
.spec{background:#0E1116;padding:18px 20px}
.spec .sl{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#79818f;margin-bottom:8px}
.spec .sv{font-family:var(--font-display);font-size:25px;font-weight:700;color:var(--acc)}
/* Three-up variant.  The Floor and Buffer strips lost their Participation cell on 8 Aug 2026
   (no participation figure is published any more), and a 4-column grid with three children
   leaves a dead quarter.  The 430px rule below already anticipated this class. */
.specs-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:760px){.specs,.specs-3{grid-template-columns:repeat(2,1fr)}}
.callout{background:#1A1611;border-left:4px solid var(--gold);border-radius:0 6px 6px 0;
  padding:20px 24px;margin-top:26px}
.callout .big{display:block;font-family:var(--font-display);font-size:27px;font-weight:700;color:#fff;
  margin-bottom:5px}
.callout .sub{color:var(--mut);font-size:14.5px}
.block{margin-top:28px}
.block .bhead{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#8d95a3;
  font-weight:700;margin-bottom:7px}
.block .bnote{color:var(--mut);font-size:14px;line-height:1.6;margin-bottom:16px;max-width:76ch}
.block .bnote b{color:#fff;font-weight:600}
.crashsplit{display:grid;grid-template-columns:1.45fr .82fr;gap:0;
  border:1px solid var(--line);border-radius:4px;overflow:hidden;background:#0E1116}
@media(max-width:820px){.crashsplit{grid-template-columns:1fr}}
.crashsplit .cs-chart{padding:18px 20px}
.crashsplit .cs-note{background:#1A1611;border-left:4px solid var(--gold);padding:26px 26px;
  display:flex;flex-direction:column;justify-content:center}
.crashsplit .cs-note h4{font-family:var(--font-display);font-size:23px;font-weight:700;color:#fff;margin-bottom:12px}
.crashsplit .cs-note p{color:var(--mut);font-size:14.5px;line-height:1.65}
.crashsplit .cs-note b{color:#fff;font-weight:600}
.twopanel{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px}
@media(max-width:820px){.twopanel{grid-template-columns:1fr}}
.panel{background:#0E1116;border:1px solid var(--line);border-radius:4px;padding:18px 20px}
.panel .ph{font-family:var(--font-display);font-size:21px;font-weight:700;color:#fff;text-align:center}
.panel .ps{text-align:center;font-size:13px;margin:5px 0 12px}
.panel .ps .m{color:#E0655A;font-weight:600}
.panel .ps .y{color:var(--acc);font-weight:600}
.panel .ps .vs{color:#79818f;margin:0 6px}
.panel img{width:100%;height:auto;display:block}
.levels{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:24px}
@media(max-width:820px){.levels{grid-template-columns:1fr}}
.lev{background:#0E1116;border:1px solid var(--line);border-radius:4px;padding:22px 20px}
.lev.flag{border-color:var(--acc);box-shadow:0 0 0 1px rgba(47,163,107,.3)}
.lev .ln{font-family:var(--font-display);font-size:22px;font-weight:700;color:#fff}
.lev .lflag{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--acc);font-weight:700;margin-top:5px}
.lev .lc{color:var(--gold);font-size:13.5px;font-weight:600;margin:12px 0 10px}
.lev .ld{color:#8d95a3;font-size:13.5px;line-height:1.6}
.lev .lr{display:flex;justify-content:space-between;border-top:1px solid var(--line);
  padding-top:8px;margin-top:10px;font-size:13px;color:var(--mut)}
.lev .lr b{color:#fff;font-weight:600;font-variant-numeric:tabular-nums}
.statbar{display:flex;flex-wrap:wrap;gap:26px;background:#0E1116;border:1px solid var(--line);
  border-radius:4px;padding:20px 24px;margin-top:20px}
.statbar div{flex:1;min-width:150px}
.statbar .sn{font-size:13.5px;color:#fff;margin-bottom:6px}
.statbar .sv{font-family:var(--font-display);font-size:27px;font-weight:700;color:var(--mut)}
.statbar .us .sv{color:var(--acc)}
.statbar .sw{color:#79818f;font-size:12.5px;margin-top:5px;line-height:1.45}
.pfoot{color:#7E8797;font-size:11.5px;line-height:1.7;margin-top:22px}

/* the "all three levels" chart pair stacks full-width, so those wide charts aren't
   squeezed below their natural size and their type stays at the site standard */
.pcard .block .twopanel{grid-template-columns:1fr}

/* build stamp, far right of the nav -- so a refresh always says which build you're on */
.nav .ver{margin-left:auto;font:700 11.5px/1 monospace;letter-spacing:.1em;color:#6b7280;
  border:1px solid var(--line);border-radius:3px;padding:6px 10px;white-space:nowrap}
.nav .ver b{color:var(--gold);font-weight:700}
@media(max-width:700px){.nav .ver{margin-left:0}}

/* the three-across structure rows: give the charts every pixel the layout can spare
   while keeping all three on one row */
.wrap.xwide{max-width:1720px;padding:0 20px}
.xwide .pcard{padding:24px}
.xwide .trio{gap:14px}
.xwide .st{padding:14px 12px}
.xwide .shot{padding:3px}

/* page 2 hero: copy on the left, the payoff chart on the right */
.herogrid{display:grid;grid-template-columns:.70fr 1.30fr;gap:40px;align-items:center}
/* hero chart sits ON the photograph: no panel, no frame -- just the drawing */
.herogrid .hg-chart{padding-left:26px}
.herogrid .hg-chart .viz{background:transparent;border:none;max-width:600px;margin-left:auto;margin-right:auto}
.herogrid .hg-copy .h1{font-size:clamp(30px,3.4vw,46px)}
.herogrid .hg-chart .viz{margin-top:0}
.herogrid .hg-chart .vizcap{margin-bottom:0}
@media(max-width:980px){.herogrid{grid-template-columns:1fr;gap:30px}}

/* hero chart caption (2026-07-25b, operator): keep the in-chart callout labels (they were fine) --
   reclaim room by tightening the axis margins instead (done in the SVG coordinates) -- and centre
   the caption sentence under the chart instead of the usual left-aligned/accent-bar treatment. */
.herogrid .hg-chart .vizcap{text-align:center;border-left:0;padding-left:0;
  font-size:clamp(15px,1.5vw,19px);color:#c9d1d9}   /* match the left column's own body-text size */
.herogrid .hg-chart .vizcap b{color:#fff}

/* page 5: the 25-year grid beside its two headline figures */
.yeargrid{display:grid;grid-template-columns:auto 1fr;gap:34px;align-items:center;margin-top:40px}
.yeargrid .yg-chart img{width:300px;max-width:100%;height:auto;display:block}
.yeargrid .yg-side{display:grid;gap:18px}
@media(max-width:820px){.yeargrid{grid-template-columns:1fr}}
/* page 7: the answer-key charts stack full width so both can be large */
.chartstack{display:grid;grid-template-columns:1fr;gap:24px}
.chartstack .chartcard img{max-width:none;width:100%}

/* ================= SITE FOOTER + HEADER LOGO (match teamgranite.com) ================= */
.nav .ni{min-height:64px}
.nav .brandlogo{display:flex;align-items:center;margin-right:22px}
.nav .brandlogo img{height:46px;width:auto;display:block;mix-blend-mode:lighten}
@media(max-width:700px){.nav .brandlogo img{height:38px}}

.gc-foot{background:#0b0e13;border-top:1px solid #1b1f26;
  font-family:var(--font-sans)}
.gc-disc{max-width:1000px;margin:0 auto;padding:44px 24px 6px;text-align:center}
.gc-disc h3{color:#e8b54d;font-size:30px;font-weight:800;margin:0 0 16px;letter-spacing:.01em;
  text-transform:none}
.gc-disc p{color:#c9d1d9;font-size:14.5px;line-height:1.6;margin:5px 0}
.gc-disc a{color:#c9d1d9;text-decoration:underline}
.gc-flag{max-width:1120px;margin:0 auto;padding:30px 24px 12px;display:flex;align-items:center;
  justify-content:center;gap:12px;flex-wrap:wrap;text-align:center;font-size:16px;color:#e6edf3}
.gc-flag .fl{font-size:24px;line-height:1}
.gc-flag b{color:#e8b54d}
/* The build marker. Quiet on purpose - it exists so the operator can tell, while reviewing on the
   live site, WHICH build he is looking at. A client has no use for it and should barely notice it. */
/* ⚠ MEASURED, not eyeballed: the first colour (#4a515c) came out at 2.41:1 against the footer, which
   is quiet to the point of unreadable - and the OPERATOR is the reader here. #6f7885 is ~3.6:1: still
   plainly subordinate to the copyright line above it, but legible when he goes looking for it. */
.gc-build{max-width:1120px;margin:0 auto;padding:0 24px 26px;color:#6f7885;font-size:11.5px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.02em;
  text-align:center}
.gc-build.stale{color:#a3803f}

.gc-copy{border-top:1px solid #1b1f26;max-width:1120px;margin:0 auto;padding:20px 24px 36px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  color:#8b949e;font-size:13.5px}
.gc-copy a{color:#c9d1d9;text-decoration:underline}
@media(max-width:640px){.gc-copy{flex-direction:column;text-align:center;gap:10px}}


/* ==== header + footer refined to mirror teamgranite.com (2026-07-24) ==== */
.nav{background:#06080b}
.nav .ni{min-height:96px}
.nav .brandlogo{margin-right:26px}
.nav .brandlogo img{height:80px}
@media(max-width:700px){.nav .brandlogo img{height:52px}.nav .ni{min-height:0}}
.nav a.t{font-family:var(--font-sans);font-size:16px;font-weight:700;color:#e8ecf1;
  text-transform:none;letter-spacing:normal;border:0;padding:8px 14px}
.nav a.t:hover{color:#fff;background:transparent;border:0}
.nav a.t.on{color:#e8b54d;background:transparent;font-weight:700}
.gc-disc h3{font-family:var(--font-sans)}
.gc-flag{font-family:var(--font-sans)}
.gc-flag .flag{height:26px;width:auto;border-radius:2px;vertical-align:middle;margin-right:2px}
.gc-copy{justify-content:center;font-family:var(--font-sans)}
.gc-copy .sep{width:1px;height:15px;background:#30363d;display:inline-block}

/* ==== header/footer tweaks (2026-07-24b, operator) ==== */
.nav .ni{min-height:130px}
.nav .brandlogo img{height:112px}
@media(max-width:700px){.nav .brandlogo img{height:60px}.nav .ni{min-height:0}}
/* V15 (12 Sept 2026): a nav link is a 44px tap target on a phone - measured 38px at 390 */
@media(max-width:760px){.nav a.t,.nav .navdrop-t{min-height:44px;display:inline-flex;align-items:center}}
.gc-disc h3{font-size:23px}                       /* smaller Risk Disclaimer title */
.gc-flag{display:block;text-align:center;line-height:1.6;padding:30px 24px 12px}  /* not flex -> no gaps around Free/Brave */
.gc-flag .flag{height:24px;vertical-align:-5px;margin-right:8px}

/* ==== footer section separation (2026-07-24c, operator) ==== */
.gc-disc{max-width:920px;padding-bottom:30px;border-bottom:1px solid #1b1f26}
.gc-flag{padding-top:32px}

/* ==== footer reorder + resize (2026-07-25, operator): flag banner now comes FIRST, disclaimer
   second and narrower-looking (wider box -> fewer wrapped lines, smaller title). The separator
   border moves to the flag block since it's first now; the disclaimer's own border-bottom would
   double up against gc-copy's border-top right below it. ==== */
.gc-flag{line-height:1.85;letter-spacing:.012em;word-spacing:.06em;font-weight:500;
  border-bottom:1px solid #1b1f26;padding-bottom:28px;
  font-size:17.5px}                                  /* Land of the Free/Brave text, +10% (was 16px) */
.gc-flag .flag{height:29px}                           /* American flag image, +20% (was 24px) */
.gc-disc{border-bottom:0;max-width:1180px;padding-top:30px}   /* wider box -> each line wraps less, so it sits shorter */
.gc-disc h3{font-size:18px}                            /* Risk Disclaimer title, shrunk further (was 23px) */
.gc-disc p{margin:4px 0}                               /* tighter line spacing between the disclaimer paragraphs */

/* ==== audience toggle (2026-07-25, operator): a shared All/Public/RIA/Client switch in a bar
   under the nav on every page. Filters every [data-aud] section live via audience.js; state
   persists across page loads (localStorage) so the whole site stays in one audience view as you
   click around. Default = All, so nothing is ever hidden unless deliberately switched. ==== */
/* 2026-07-25b (operator): moved INTO the sticky .nav row itself (was a separate bar underneath,
   which scrolled out of view). display:contents makes .audbar invisible to layout -- its label +
   buttons become direct flex children of .nav .ni, so they sit inline with the nav links and stay
   pinned with the rest of the nav on scroll. audience.js is unaffected (DOM structure, hence its
   event listener and querySelectors, is unchanged by display:contents). */
.audbar{display:contents}
.audbar .al{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);
  font-weight:700;margin-left:auto;padding-left:14px;border-left:1px solid var(--line);
  font-family:var(--font-sans);white-space:nowrap}
.audbar button{cursor:pointer;background:#12151A;border:1px solid var(--line);border-radius:6px;
  color:var(--mut);font-size:12px;font-weight:700;padding:5px 11px;white-space:nowrap;
  font-family:var(--font-sans)}
.audbar button:hover{border-color:var(--gold);color:#fff}
.audbar button.on{color:#15171c}
.audbar button.on[data-v="ria"]{background:var(--gold);border-color:var(--gold)}
.audbar button.on[data-v="full"]{background:#5E8FC4;border-color:#5E8FC4;color:#fff}
.audbar button.on[data-v="simple"]{background:#35C08A;border-color:#35C08A;color:#0E1116}
@media(max-width:900px){.audbar .al{margin-left:0;padding-left:0;border-left:0}}

/* The flag line's two sentences were separated by literal &nbsp;&nbsp; in every page's markup.
   This gives them a real, consistent gap and lets the &nbsp; go (2026-07-28, operator: "looks
   too close together"). */
.gc-flag .sep{display:inline-block;width:1.6em}

/* ==== consolidated nav: 10 items -> 5 + Contact (2026-07-28) ============================
   The four products live under one "Our Strategies" dropdown. Fees and Design Your Outcome stay
   top-level on purpose: cost is the second thing anyone looks for, and the calculator is the
   highest-intent action on the site — neither belongs behind a hover. "Granite Home" was removed
   (it pointed at the splash being retired, and the logo already goes home).
   Opens on hover AND on click/focus, so it works on touch and by keyboard. */
.navdrop{position:relative}
/* The trigger is a <button>, so `.nav a.t` colour/size rules don't reach it — it rendered dimmer
   than its neighbours. Restate them here so it matches the links exactly. */
.navdrop-t{background:none;border:1px solid transparent;cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;
  color:#e8ecf1;font-family:var(--font-sans);font-size:16px;font-weight:700;
  padding:9px 14px;border-radius:3px;white-space:nowrap;transition:color .15s ease}
.navdrop-t:hover,.navdrop.open .navdrop-t{color:#fff;border-color:var(--line)}
.navdrop.on .navdrop-t{color:var(--gold)}
.navdrop-t:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.navdrop .ncar{width:6px;height:6px;border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-1px);
  transition:transform .18s ease}
.navdrop.open .ncar,.navdrop:hover .ncar{transform:rotate(225deg) translateY(-2px)}
/* The menu hangs 8px below the trigger. Without something occupying that gap the pointer leaves
   .navdrop on the way down and the menu closes -- which is why it only stayed open when CLICKED.
   This bridge exists only while hovering, so it never intercepts clicks meant for the page. */
.navdrop::after{content:"";position:absolute;left:0;right:0;top:100%;height:12px;display:none}
.navdrop:hover::after,.navdrop:focus-within::after{display:block}
.navmenu{position:absolute;top:calc(100% + 8px);left:0;min-width:322px;background:#0E1116;
  border:1px solid var(--line);border-radius:4px;padding:8px;display:none;z-index:80;
  box-shadow:0 18px 40px rgba(0,0,0,.55)}
.navdrop:hover .navmenu,.navdrop.open .navmenu,.navdrop:focus-within .navmenu{display:block}
.navmenu a{display:block;padding:11px 13px;border-radius:3px;text-decoration:none;
  transition:background .15s ease}
.navmenu a:hover,.navmenu a:focus-visible{background:#161b22}
.navmenu a b{display:block;font:600 15px/1.3 var(--font-sans);color:var(--txt)}
.navmenu a:hover b{color:var(--gold)}
.navmenu a span{display:block;font:400 12.5px/1.4 var(--font-sans);color:var(--mut);margin-top:2px}
.navsep{flex:1 1 auto}                       /* pushes For Advisors + Contact to the right */
.nav a.t.navadv{border:1px solid var(--line)}
.nav a.t.navadv:hover{border-color:var(--gold);color:#fff}
@media(max-width:900px){
  .navsep{display:none}
  .navmenu{position:static;min-width:0;display:none;box-shadow:none;border:0;padding:0 0 0 14px}
  .navdrop.open .navmenu{display:block}
  .navdrop:hover .navmenu{display:none}       /* no hover-open on touch */
  .navdrop.open:hover .navmenu{display:block}
}
@media(prefers-reduced-motion:reduce){.navdrop .ncar,.navmenu a{transition:none}}

/* ══════════════════════════════════════════════════════════════════════════════════════════
   CLIENT-FACING WORKING SITE (operator, 2026-07-29): "take off all of the notes for viewing
   as the RIA / client simple, all the page numbers, all the developmental notes -- make it
   look like a clean client-facing version."

   The BUILD badge, the "Viewing as" switcher, the page banner, the per-section audience tags
   and audience.js are now stripped from the pages themselves, so web/ and web/dist/ read the
   same. The data-aud ATTRIBUTES stay: they are invisible, and build_public.py still uses them
   to physically delete advisor-only sections from the public edition.

   With audience.js gone nothing hides an advisor-only section on the working copy, so this
   rule does it -- mirroring build_public.public_section() exactly (keep pub or cli, drop ria
   only), which is why it is written as ~= tests rather than a flat [data-aud="ria"]: a stray
   space or a re-ordered token must not silently reveal advisor material.
   THE ADVISOR PAGE IS EXEMPT, and must stay exempt: every one of its sections is ria-only, so an
   unscoped rule renders it completely blank. build_public.py already treats it that way
   (WHOLE_PAGE_GATED) -- it is not a mixed page, it is a whole gated surface. body.advisor-page is
   set in _source/advisors_master.html; if that class is ever dropped the page goes empty, so the
   test suite now checks for it.
   ══════════════════════════════════════════════════════════════════════════════════════════ */
body:not(.advisor-page) [data-aud~="ria"]:not([data-aud~="pub"]):not([data-aud~="cli"]){display:none}

/* ══════════════════════════════════════════════════════════════════════════════════════════
   PHONE PASS (operator, 2026-07-29): "I want the phone version to look good. Whatever it
   takes to make the phone version look good."

   The measured problem was not layout -- nothing overflowed or broke -- it was LEGIBILITY.
   These charts are authored on wide canvases (the home growth chart is 1360 units across, the
   advisor charts 900, the pricer payoff 1060). An SVG scales as one piece, so squeezing a
   1360-wide chart into a ~282px column scales its type by 0.21 and a 20px label lands at
   about 4px on the screen. Every number on the most important charts on the site was
   physically unreadable on a phone while looking perfectly fine on a desktop.

   Type cannot be enlarged independently inside a scaled SVG, so the fix is to stop shrinking
   the chart: below 760px each chart keeps a minimum width and its container scrolls
   sideways. That is the pattern the site already uses for the advisor year-by-year table
   (.tablewrap), so the gesture is consistent, and the page itself still never scrolls
   horizontally -- only the chart does.
   ══════════════════════════════════════════════════════════════════════════════════════════ */
@media(max-width:760px){
  /* the scroll surfaces. -webkit-overflow-scrolling keeps momentum scrolling on iOS. */
  /* max-width is load-bearing: overflow-x:auto alone lets the box GROW to fit a min-width
     child instead of scrolling it, which pushed the whole advisor page 330px wide. */
  /* ⚠ `.dyo-chartcard #chart`, NOT `.dyo-chartcard>#chart`. The pricer's #chart was wrapped in
     <div id="chartwrap"> on 8 September 2026 and the child selector stopped matching, so the
     560px chart pushed the whole calculator page to 595px at a 390px phone (measured 12 Sept
     2026, review lane VISUAL row V7). design.html's comment said this was fixed here the same
     day; it was not. The descendant selector holds whatever the wrapper is. */
  .chartcard,.cs-chart,.yg-chart,.panel,.hg-chart,.dyo-chartcard #chart{
    overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
    max-width:100%}

  /* Minimum legible widths, chosen per canvas so the SMALLEST label on each lands near 11px:
     640 on a 1360-wide canvas is ~0.47 scale (a 21px axis label -> ~10px), and the narrower
     advisor/pricer canvases need less to reach the same place. Deliberately not wider: every
     extra pixel here is another swipe for the reader. */
  .chartcard>img,.cs-chart>img,.yg-chart>img,.panel>img{min-width:640px}
  .chartcard>svg{min-width:820px}        /* the 1360-unit growth chart: its legend is the smallest type on it */
  /* The live pricer draws its own SVG on a ~1060-unit canvas with 10.5-13px labels, so at any
     phone width its numbers land near 6px. Its <text> carry font-size ATTRIBUTES, and CSS beats
     a presentation attribute, so the type can be corrected here without touching the chart's
     drawing code. 21 units at the 560px min-width works out around 11px on screen. */
  #chart>.dyo-svg{min-width:560px}
  #chart .dyo-svg text{font-size:21px}
  #chart .dyo-svg text[font-weight="600"],#chart .dyo-svg text[font-weight="700"]{font-size:23px}
  /* The advisor hero's story animation is NOT a data chart -- it is large-type motion that
     reads fine at any size, and forcing 640px on it blew its grid track out and scrolled the
     whole page 330px. min-width:0 on the grid children is the other half: a grid item defaults
     to min-width:auto, so it refuses to shrink below its content and overflows the track. */
  /* min-width:0 on the grid children is what makes the rest safe: a grid item defaults to
     min-width:auto, refuses to shrink below its content, and overflows its track -- that is
     what scrolled the whole advisor page 330px sideways on the first attempt. With that in
     place the story animation can scroll like any other chart; its own axis labels are 15
     units on a 900-unit canvas, so without it they land near 5px on a phone. */
  .advhero-row>*{min-width:0}
  #prv-card{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
  #prv-card>svg{min-width:640px}
  .prod>svg,.hg-chart>svg,.svfig>svg{min-width:0}      /* small inline diagrams already fit */

  /* the scrolled chart should look scrollable, not clipped */
  /* board 408 (13 Sept 2026): the sideways scroll above is invisible on a phone - iOS hides the
     scrollbar and the rising half of a payoff picture sits off the right edge with no clue it is
     there. A sticky hint rides the left edge of the scroller so it stays put while the picture
     moves. Tap targets and chart data untouched. */
  .chartcard::after,.cs-chart::after,.yg-chart::after,.panel::after{
    content:"Swipe sideways to see the whole picture \2192";display:block;position:sticky;left:0;
    width:260px;padding-top:8px;font-size:12px;line-height:1.3;color:#9AA3B2}
  /* the crash hero card is a row flex container, so its ::after would be laid out AFTER the
     640px image and start offscreen (Codex, 13 Sept). Stack it there. */
  .crashtop .chartcard{flex-wrap:wrap}
  .crashtop .chartcard::after{flex:0 0 100%}
  .chartcard::-webkit-scrollbar,.cs-chart::-webkit-scrollbar,.panel::-webkit-scrollbar{height:6px}
  .chartcard::-webkit-scrollbar-thumb,.cs-chart::-webkit-scrollbar-thumb,
  .panel::-webkit-scrollbar-thumb{background:#2C323C;border-radius:3px}

  /* ---- TAP TARGETS. Footer and inline links were 15-23px tall; 44px is the accepted
     minimum, and this audience is not made of precise tappers. Padding rather than font
     size, so nothing reflows. ---- */
  .gc-copy a,.gc-disc a{display:inline-block;padding:12px 2px;line-height:1.2}
  .ctrow a,.svcost a,.anbetter a,.pfoot a,.bnote a{display:inline-block;padding:6px 0}
  .navmenu a{padding-top:12px;padding-bottom:12px}
  #ct-ok,input[type=checkbox]{width:22px;height:22px}
  .ctform label[for=ct-ok]{padding:10px 0;display:inline-block}

  /* ---- SMALL LABELS. The uppercase eyebrows and spec labels sat at 8-11px, which is under
     the 12px floor this audience needs. Nudged up; the letter-spacing is what makes them read
     as labels, not the smallness. ---- */
  .spec .sl,.lev .lr span,.pflag,.lflag,.peyebrow,.svctag,.dn{font-size:12px}
  .pfoot,.bnote{font-size:12.5px;line-height:1.6}
  .drill .dt{font-size:17px}
}

/* The 4-up spec strip drops to TWO columns at 760px, but at 390px two columns of it are ~364px
   inside a ~334px card, so the right-hand cells were being clipped at the card edge (found by
   _audit_site.py on income_master). One column below 430px. */
@media(max-width:430px){.specs,.specs-3{grid-template-columns:1fr}}

/* ---- Risk Disclaimer: wide, small and grey (2026-08-08, operator, third pass) ----
   The narrow-and-balanced version fixed the ragged gaps but made the block TALL, which put a big
   slab of legal text at the bottom of every page. He wants the opposite trade: "font smaller, the
   text wider, more or less go all the way across the screen... make the whole thing skinnier so it
   doesn't take up such a big chunk of the screen, shrink the title too, and it should all be in a
   greyish tone so it doesn't stand out so much."
   So: a full-width measure (each paragraph now fits on ONE line, which is what removes the height),
   12.5px type, tight leading, and the gold heading dropped to the same muted grey as the body so
   nothing in the block competes with the page above it. Still centred. */
.gc-disc{max-width:1180px;text-align:center;padding-top:22px;padding-bottom:18px}
.gc-disc h3{text-align:center;font-size:13.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:#8b949e;margin:0 0 9px}
.gc-disc p{text-align:center;text-wrap:balance;hyphens:none;margin:3px auto;
  font-size:12.5px;line-height:1.5;color:#8b949e}
.gc-disc a{color:#8b949e}

/* ⛔ THE PURPLE, AND THE OVER-CORRECTION THAT FOLLOWED (operator, 11 Aug, twice).
   First he found visited links rendering the BROWSER's purple. I answered with
   `a:visited{color:inherit}`, which fixed the purple and broke the link: inherit takes the
   PARENT's colour, so a visited link became body text - no gold, no underline, nothing to say it
   was a link at all. His second report: "now it doesn't even show a link or a color on it."
   THE ACTUAL CAUSE, which the first fix never addressed: purple only ever appeared where NO author
   rule set a colour. An ordinary `a{color:...}` rule applies to visited links too - :link and
   :visited only matter once you name them - and any author rule beats the browser's default. So the
   fix is a BASE COLOUR for links, not a :visited override. Specific rules (.nav a, .gc-disc a and
   the rest) still win where they apply, for both states, because they are more specific.
   ⚠ Do not reintroduce an `a:visited` rule here. It is the wrong tool: it fights every future link
   style instead of giving links a default. */
a{color:#E0B44A}

/* ⭐ THE PRECISE VERSION — plain words on screen, the exact wording one click below (operator,
   5 September 2026). His problem, in his own words: *"I'd rather people be able to understand
   what the fuck they're reading."* And the honest objection he raised himself — that you cannot
   simply simplify a DENIAL, because a broader denial is a bigger promise, not a simpler sentence.
   This is the answer to both. The plain sentence is what everyone reads. The exact sentence is
   what governs, and it is one click away, in place — never a footnote, never on another page.

   ⛔ NATIVE <details>, NO SCRIPT, AND THAT IS NOT A STYLE CHOICE. The estate ships under a
   content-security policy that blocks inline script, so a JS disclosure fails SILENTLY — the
   reader would see the plain half and never learn the precise half existed. The browser's own
   element cannot fail that way.

   ⚠ DO NOT PUT ONE INSIDE A <p>. `details` is flow content and a paragraph may only hold phrasing,
   so the browser auto-closes the <p> and everything after it escapes the paragraph. Close the
   paragraph, place the details, open a new one. */
details.precise{margin:6px 0 10px}
details.precise>summary{display:inline-block;cursor:pointer;color:var(--mut);font-size:13px;
  border-bottom:1px dotted #4A525F;padding-bottom:1px;list-style:none}
details.precise>summary::-webkit-details-marker{display:none}
details.precise>summary::after{content:" \25BE";font-size:11px}
details[open].precise>summary::after{content:" \25B4"}
details.precise>summary:hover{color:var(--gold)}
details.precise>div{margin-top:9px;padding:11px 14px;background:#0E1116;border-left:2px solid #2C323C;
  border-radius:0 4px 4px 0;color:var(--mut);font-size:14.5px;line-height:1.6}

/* "Investing cash, or protecting shares you already own?" -- added 2026-09-08.
   The home page's two doors, folded to one line, so a visitor who lands on an inside page still
   learns that an already-invested client is served. Same words on every page, deliberately. */
.twoways{max-width:820px;margin:14px 0 0}
.twoways summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px;
  font:600 15px/1.4 inherit;color:#E0B44A;border-bottom:1px solid rgba(224,180,74,.45);
  padding-bottom:2px}
.twoways summary::-webkit-details-marker{display:none}
.twoways summary:after{content:"\25be";font-size:12px}
.twoways[open] summary:after{content:"\25b4"}
.twoways summary:focus-visible{outline:2px solid #E0B44A;outline-offset:3px}
.tw-body{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:16px;
  margin-top:14px;padding:16px 18px;border:1px solid rgba(224,180,74,.3);border-radius:12px;
  background:rgba(224,180,74,.045)}
.tw-body h4{margin:0 0 5px;font:600 16px/1.3 inherit;color:#E0B44A}
.tw-body p{margin:0;font-size:14.5px;line-height:1.6;color:#98A1B0}
.tw-body b{color:#E9ECF1;font-weight:600}
@media(max-width:640px){.tw-body{grid-template-columns:1fr}}

/* ---- HOW IT IS BUILT, PIECE BY PIECE (Floor/Buffer pages, 21 Sept 2026) ---- */
details.pieces>summary{cursor:pointer;list-style:none;position:relative;padding-right:40px}
details.pieces>summary::-webkit-details-marker{display:none}
details.pieces>summary::after{content:'+';position:absolute;right:6px;top:0;color:var(--gold);font-size:28px;font-weight:300}
details[open].pieces>summary::after{content:'\2013'}
.pieces-hint{display:block;color:var(--mut);font-size:14px;margin-top:6px}
.pgrp{border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin:18px 0;background:var(--ink2)}
.pgrp-t{color:#fff;font-size:17px;font-weight:500;margin-bottom:6px}
.prow{display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap;margin:8px 0 10px}
.pcell{width:190px}
.pcell svg{width:190px;height:100px;display:block}
.pcap{font-size:13px;line-height:1.45;color:var(--mut);margin-top:4px}
.pcap .pn{vertical-align:middle}
.pop{font-size:26px;color:var(--mut);width:24px;text-align:center;line-height:100px}
.pwhy{font-size:15px;line-height:1.65;color:#D3D1C7;margin:6px 0 0}
.pwhy b{color:#fff;font-weight:500}
.pn{display:inline-block;width:22px;height:22px;border-radius:11px;text-align:center;line-height:22px;font-size:12px;font-weight:500;margin-right:6px;vertical-align:1px}
.pn.own{background:#3a3110;color:var(--gold)}
.pn.buy{background:#0F3D31;color:#9FE1CB}
.pn.sell{background:#4A241B;color:#F5C4B3}
.pn.sum{background:#2C323C;color:#D3D1C7}
.pax{stroke:var(--line);stroke-width:1}
.pm{fill:var(--mut);font-size:10px}
@media (max-width:700px){.pop{line-height:1.2;width:100%;text-align:left;padding-left:6px}.pcell{width:100%}.pcell svg{width:100%;height:auto}}