/* howmuchisgoldbythepound.com — site-specific additions over style-navygold.css.
   Forked from silverbythepound's sbtp.css, WITHOUT its silver token overrides: this
   site keeps the Navy/Gold palette exactly as goldbullionpricechart ships it (user
   request: "same look and feel as the Gold Bullion Price Chart build"). */

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

/* Pound cards on the homepage: the label is a sentence ("1 lb of 14k (jewelry)"). */
.cards .card__label{line-height:1.35}

/* Augusta fact block on the pillar sits in an article panel. */
.panel--article .pt-rec{margin:1.2em 0 1.6em}

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

/* Two columns for the Augusta fact grid on wider screens (silver's fix, kept). */
@media (min-width:640px){.panel--article .pt-rec .review-facts{grid-template-columns:repeat(2,1fr)}}

/* ---------------------------------------------------------------------------
   "Where to Buy Gold By The Pound" — its own panel DIRECTLY ABOVE the live chart
   (user requirement 2026-09-29). A white card with a gold top rule on the light
   alt panel. Small gold-toned text uses --gold-ink (#7A5A1E, 6.35:1 on white). */
.panel--where{padding:36px 0}
.where-buy{max-width:860px;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(--navy)}
.where-buy__body,.where-buy__fit{color:var(--ink-soft);max-width:64ch;margin:0 auto .9em;text-align:left}
.where-buy__fit{font-size:.94rem;max-width:68ch}
.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(--navy)}
.where-buy .cta-row{justify-content:center;margin-top:10px}
@media (max-width:600px){.where-buy{padding:22px 18px}}

/* The chart panel, now standalone under Where to Buy rather than inside the hero. */
.panel--chart{padding:8px 0 0}
.panel--chart .pc-section{padding:30px 0 22px}
.panel--chart h2{margin-top:0}

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

/* Hero: the sponsored BUY button and the internal calculator link share a row;
   the one-line disclosure sits directly under them. */
.hero-buy{gap:12px;flex-wrap:wrap}
.hero__sponsored{margin-top:.9em}

/* ---------------------------------------------------------------------------
   Affiliate (Augusta) buttons are GREEN (user request, carried from
   silverbythepound): every "BUY GOLD BY THE POUND" button, including the exit
   popup. 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 navy panels. */
.btn.affiliate-cta,.btn--gold.affiliate-cta{background:#15803D;color:#fff;border:1px solid #34C26A;
  letter-spacing:.06em;font-weight:800;text-transform:uppercase}
.btn.affiliate-cta:hover,.btn--gold.affiliate-cta:hover,.btn.affiliate-cta:focus-visible{background:#166534;color:#fff}

/* ---------------------------------------------------------------------------
   Exit popup: "WAIT… Want to Buy Gold By the Pound?" (user requirement). */
.exit-popup__card{text-align:center;max-width:440px}
.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.5rem,4.5vw,2rem);line-height:1.2;margin:.1em 0 .5em}
.exit-popup__card h2 .accent{color:var(--gold-dark)}
.exit-popup__body p{margin:0 0 .9em}
.exit-popup__cta{display:flex;justify-content:center;width:100%}