/* goldbythepound.com — "Dark Gold" skin and site components, loaded after
   style-navygold.css. The theme is token-driven, so the skin is a set of token
   overrides: its variable NAMES are kept (--navy is now a warm near-black) and no
   component rule is forked. Every text/background pair was computed with the WCAG
   formula at Gate 3 (03-structure.md §3) and is re-checked by verify_site.py.

     white on #221A0E 17.18 · white on #15100A 18.91 · gold #C9A84C on #221A0E 7.52
     sand #CDBE9A on #221A0E 9.35 / on #15100A 10.29 / on #33270F 7.95
     ink-soft #4A4032 on white 10.14 / on cream #FAF6EC 9.40
     gold-ink #7A5A1E on white 6.35 / on cream 5.88
   Gold #C9A84C is never text on white or cream (2.29:1); --gold-ink is.            */
:root{
  --navy:#221A0E; --navy-dark:#15100A; --navy-light:#33270F;
  --steel:#CDBE9A; --steel-light:#E2D6B8;
  --ink:#221A0E; --ink-soft:#4A4032;
  --line:#E6DDC8; --bg-alt:#FAF6EC;
  --brand:#221A0E; --teal:#221A0E;
  --shadow:0 4px 24px rgba(34,26,14,.14);
  --pc-grid:#EDE6D6; --pt-accent:#221A0E;
}

/* The premium and budget calculators show three results; keep them in one tidy column. */
.pt-calc .pt-result + .pt-result{margin-top:8px}

/* Goldco fact block on the pillar sits in an article panel. */
.panel--article .pt-rec{margin:1.2em 0 1.6em}
@media (min-width:640px){.panel--article .pt-rec .review-facts{grid-template-columns:repeat(2,1fr)}}

/* Hero card on guide pages: secondary figure line under the main price. */
.pc-hero .pc-change{margin:.2em 0 .4em}

/* ---------------------------------------------------------------------------
   Hero: price card, green button row, sponsored line, then the $/lb chart. */
.hero-buy{gap:12px;flex-wrap:wrap;margin-top:4px}
.hero__sponsored{margin:.9em auto 1.6em}
.hero .hero-chart{margin-top:8px}

/* ---------------------------------------------------------------------------
   "A Pound of Gold, Three Ways" — the site's distinguishing section. Cream cards
   on a white panel; the piece diagrams are decorative (aria-hidden). */
.ways__intro{max-width:70ch}
.ways{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin:1.4em 0 .4em}
.ways__card{background:var(--bg-alt);border:1px solid var(--line);border-top:4px solid var(--gold);
  border-radius:var(--radius);padding:20px 20px 16px;display:flex;flex-direction:column;min-width:0}
.ways__art{width:124px;height:76px;margin:0 0 12px;fill:var(--gold);stroke:var(--gold-dark);stroke-width:1.5}
.ways__art .ways__ghost{fill:none;stroke:var(--gold-dark);stroke-dasharray:4 3}
.ways__card h3{font-family:var(--font-head);font-size:1.2rem;margin:0 0 .2em;color:var(--ink)}
.ways__weight{font-size:.82rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-ink);margin:0 0 .5em}
.ways__value{font-family:var(--font-head);font-size:1.7rem;font-weight:800;color:var(--ink);margin:0 0 .4em;line-height:1.15}
.ways__value span{font-family:var(--font-body);font-size:.82rem;font-weight:500;color:var(--ink-soft)}
.ways__value .lv{font-family:inherit;font-size:inherit;font-weight:inherit;color:inherit}
.ways__note{font-size:.95rem;margin:0 0 .8em;flex:1}
.ways__link{margin:0;font-weight:700;font-size:.95rem}

/* ---------------------------------------------------------------------------
   "Where to Get Gold by the Pound" — the Goldco block. A white card with a gold
   top rule on the cream alt panel. */
.panel--where{padding:36px 0}
.where-buy{max-width:880px;margin:0 auto;background:#fff;border-radius:var(--radius-lg);
  border-top:4px solid var(--gold);padding:28px 30px;text-align:center;box-shadow:var(--shadow)}
.where-buy .partner__eyebrow{color:var(--gold-ink);font-weight:700;letter-spacing:.14em;font-size:.78rem;
  text-transform:uppercase;margin:0}
.where-buy h2{margin:.25em 0 .5em;color:var(--ink)}
.where-buy__body,.where-buy__fit,.where-buy__offer{color:var(--ink-soft);max-width:66ch;margin:0 auto .9em;text-align:left}
.where-buy__fit{font-size:.94rem;max-width:68ch}
.where-buy__offer{background:#FFF8E8;border:1px solid #EAD9A6;border-left:4px solid var(--gold);border-radius:var(--radius);
  padding:12px 16px;color:var(--ink)}
.where-buy__facts{list-style:none;padding:0;margin:0 0 1em;display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.where-buy__facts li{background:#FFF8E8;border:1px solid #EAD9A6;border-radius:999px;padding:6px 14px;
  font-size:.88rem;font-weight:600;color:var(--ink)}
.where-buy .cta-row{justify-content:center;margin-top:10px}
@media (max-width:600px){.where-buy{padding:22px 18px}}

/* Buttons centered under the four steps. */
.steps-buy{justify-content:center;margin-top:26px}

/* ---------------------------------------------------------------------------
   Affiliate (Goldco) buttons are GREEN (the owner's standing choice on the gold
   builds). They all carry .affiliate-cta; site navigation buttons don't, and stay gold.
     white text on #15803D 5.02:1 · on hover #166534 7.13:1
     #34C26A edge so the button keeps its shape on dark panels.
   The label is long ("GET THE FREE GOLD & SILVER KIT"), so it may wrap on phones. */
.btn.affiliate-cta,.btn--gold.affiliate-cta{background:#15803D;color:#fff;border:1px solid #34C26A;
  letter-spacing:.05em;font-weight:800;text-transform:uppercase;white-space:normal;text-align:center;line-height:1.25}
.btn.affiliate-cta:hover,.btn--gold.affiliate-cta:hover,.btn.affiliate-cta:focus-visible{background:#166534;color:#fff}
.hero-buy .affiliate-cta{min-width:0}

/* The offer asterisk: a real link to the terms, big enough to tap. */
a.ast{font-weight:800;text-decoration:none;padding:0 .12em}
/* On the dark partner block the default link colour is the block's own background
   (1.00:1, found in the browser, not by a static check). Gold-light on #221A0E 9.81:1. */
.partner a.ast,.hero a.ast{color:var(--gold-light)}

/* ---------------------------------------------------------------------------
   Goldco's offer terms, verbatim, above the footer on every page. A quiet panel
   on the dark frame. */
.panel.offer-terms{background:var(--navy-light);box-shadow:none;padding:18px 0;margin-bottom:24px}
.offer-terms p{color:var(--steel);font-size:.8rem;line-height:1.55;margin:0 0 .5em}
.offer-terms p:last-child{margin-bottom:0}
.offer-terms strong{color:#fff}
.offer-terms:target{outline:2px solid var(--gold)}

/* ---------------------------------------------------------------------------
   Exit popup. */
.exit-popup__card{text-align:center;max-width:460px}
.exit-popup__stamp{font-size:.78rem;color:var(--ink-soft);margin:-.4em 0 .9em}
.exit-popup__eyebrow{font-family:var(--font-body);font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-ink);font-size:.8rem;margin:0 0 .2em}
.exit-popup__card h2{font-size:clamp(1.4rem,4.5vw,1.9rem);line-height:1.2;margin:.1em 0 .5em}
.exit-popup__card h2 .accent{color:var(--gold-ink)}
.exit-popup__body p{margin:0 0 .9em}
.exit-popup__cta{display:flex;justify-content:center;width:100%}
/* The shared backdrop is navy-tinted; match the warm frame. */
.exit-popup__backdrop{background:rgba(21,16,10,.74)}