/* =====================================================================
   Design tokens — extracted from Figma "OneGold Website (EU)" kit.
   Source variables: Gray 0–8, Accents, Secondary, Primary, Light Background.
   Section CSS must reference ONLY these tokens — no raw hex, no magic numbers.
   ===================================================================== */
:root {
  /* --- Color: grayscale --- */
  --gray-0: #ffffff;
  --gray-3: #dddddd;
  --gray-4: #cccccc;
  --gray-6: #999999;
  --gray-7: #666666;
  --gray-8: #000000;

  /* --- Color: brand --- */
  --charcoal:    #333333; /* Primary / Charcoal Gray */
  --dusty-blue:  #1f3954; /* Secondary / Dusty Blue  */
  --light-blue:  #f2f4f8; /* Secondary / Light Blue  */
  --light-bg:    #d9e0e6; /* Light Background        */
  --og-blue:     #0080f3; /* Primary / OneGold Blue  */
  --soft-blue:   #99ccfa; /* Primary / Soft Blue     */
  --pale-blue:   #f3f8ff; /* Secondary / Pale Blue   */
  --gold-underline: #f9d87f; /* active tab underline */
  --badge-gold:  #ffd78c; /* news category pill   */
  --source-dark: #373535; /* dark news logo tile  */
  --breakout-grad-dark: #071f39; /* breakout band navy stop */

  /* --- Color: accents --- */
  --green: #34c759; /* price up   */
  --red:   #ff383c; /* price down */

  /* --- Semantic aliases --- */
  --color-text:        var(--charcoal);
  --color-text-muted:  var(--gray-7);
  --color-bg:          var(--gray-0);
  --color-bar:         var(--dusty-blue);
  --color-footer-bg:   var(--light-blue);
  --color-footer-dark: var(--gray-8);
  --color-border:      var(--gray-3);
  --color-border-soft: var(--gray-4);

  /* --- Typography --- */
  /* Axiforma is a licensed font (not bundled). Drop the .woff2 files into
     assets/fonts/ and the @font-face in base.css will pick them up;
     until then the fallback stack renders. */
  --font-sans: "Axiforma", "Hanken Grotesk", system-ui, -apple-system,
               "Segoe UI", Roboto, Arial, sans-serif;

  --fs-12: 12px; /* mobile price bar            */
  --fs-14: 14px; /* nav, price bar, legal links */
  --fs-16: 16px; /* footer nav, "part of"       */
  --fs-18: 18px; /* news headline / bold lead   */
  --fs-20: 20px; /* OG Desktop H4 (content-block subheads) */
  --fs-22: 22px; /* OG 2.0 large-product-card name (Axiforma Bold 22) */
  --fs-24: 24px; /* tab text, OG Desktop H3     */
  --fs-28: 28px; /* tablet H2 / section headings */
  --fs-32: 32px; /* OG Desktop H2               */
  --fs-44: 44px; /* OG Desktop H1 (price)       */

  --lh-25: 25px; /* headline / bold lead lh     */
  --lh-45: 45px; /* OG Desktop H2 lh            */
  --lh-55: 55px; /* OG Desktop H1 lh            */

  --fw-regular: 400;
  --fw-medium: 500;   /* Axiforma Medium */
  --fw-semibold: 600; /* Axiforma SemiBold */
  --fw-bold: 700;

  /* --- Radii --- */
  --radius-4:  4px;  /* news category pill */
  --radius-8:  8px;  /* app-store badges */
  --radius-20: 20px; /* "part of" card   */

  /* --- Content-block component layout --- */
  --cb-text: var(--gray-8);
  --cb-gap: 20px;
  --cb-block-gap: 40px;
  --cb-section-pad-top: 56px;  /* top breathing room for the FIRST content-block under a preceding section */
  --cb-list-gap: 12px;
  --cb-bullet-pad: 20px;
  --cb-bullet-size: 5px;

  /* --- Layout --- */
  --container-max: 1240px;            /* locked content width @ 1440 frame */
  --gutter: 24px;                     /* min side gutter below container   */
  --container: min(var(--container-max), 100% - (var(--gutter) * 2));
  --pad-mobile: 20px;                 /* 390 frame side padding            */

  /* ---- Responsive breakpoints (see assets/css/responsive.md) ----
     Desktop-first. @media can't read custom props, so these are fixed constants:
       Tablet     @media (max-width: 1023.98px)   768–1023
       Large-mob  @media (max-width: 767.98px)    600–767  (foldables/large phones)
       Phone      @media (max-width: 599.98px)    ≤599
     Use ONLY these four. Do not add new one-off breakpoints. */

  /* --- Mobile type (M- frames) --- */
  --fs-10: 10px; --fs-11: 11px;       /* breakout mobile price panel */
  --fs-26: 26px; --lh-36: 36px;       /* OG Mobile H2 */
  --tb-title-mobile: 40px;            /* title-banner mobile title */
  --faq-chevron-glyph-h: 7.778px;     /* FAQ chevron glyph height (viewBox aspect of -glyph-w) */

  /* --- Page section tokens (merged from Figma section kits) --- */
  --title-banner-gradient: radial-gradient(187% 118% at 50% 100%, #14518b 0%, #1f3854 39.9%, #132c47 60.1%, #0a1623 80%, #050b12 90%, #020509 95%, #000000 100%);
  --tb-pad-block: 80px;
  --tb-pad-block-mobile: 48px;
  --tb-gap: 20px;
  --tb-gap-mobile: 16px;
  --tb-content-max: 900px;
  --tb-logo-h: 65px;
  --tb-logo-h-mobile: 44px;
  --ba-pad-y: 40px;
  --ba-stack-gap: 10px;
  --ba-lockup-gap: 20px;
  --ba-logo-w: 220px;
  --ba-logo-h: 77.941px;
  --ba-mark-w: 44.768px;
  --ba-mark-h: 71.809px;
  --ba-mark-top: 0.54px;
  --ba-word-w: 156.713px;
  --ba-word-h: 77.941px;
  --ba-word-left: 63.29px;
  --ba-body-max: 800px;
  --ba-link-gap: 10px;
  --ba-arrow-w: 16px;
  --ba-arrow-h: 15.556px;
  --brand-blue: #197eeb;
  --btn-gap: 8px;
  --btn-pad-x: 16px;
  --btn-pad-y: 8px;
  --btn-pad-x-lg: 24px;
  --btn-pad-y-lg: 12px;
  --btn-icon: 16px;
  --btn-shadow-color: rgba(30, 41, 59, 0.12);
  --gray-1: #f7f7f7;
  --gray-2: #eeeeee;
  --gray-5: #aaaaaa;
  --home-sec-pad-y: 80px;
  --home-bar-pad-y: 20px;
  --home-stack-gap: 20px;
  --home-steps-stack-gap: 40px;
  --home-hero-gap: 80px;
  --home-hero-phone-w: 275px;
  --home-hero-phone-h: 400px;
  --home-hero-getapp-gap: 15px;
  --home-hero-qr-size: 120px;
  --home-hero-qr-radius: 15px;
  --home-hero-endorsers-gap: 20px;
  --home-hero-endorsers-label-max: 160px;
  --home-hero-endorser-h: 90px;
  --home-stats-gap: 74px;
  --home-stats-value-fs: 45.2px;
  --home-stats-value-lh: 54.27px;
  --home-stats-label-fs: 22.6px;
  --home-stats-star-size: 32px;
  --home-stats-star-gap: 5px;
  --home-featured-gap: 60px;
  --home-featured-logo-h: 34px;
  --home-cm-thumb-w: 200px;
  --home-cm-thumb-h: 133px;
  --home-steps-gap: 40px;
  --home-steps-card-pad: 40px;
  --home-steps-card-gap: 10px;
  --home-steps-icon-size: 60px;
  --home-steps-arrow-size: 60px;
  --home-compare-pad: 20px;
  --home-compare-pad-mobile: 12px;
  --home-compare-cols: repeat(4, 1fr);
  --home-compare-cols-mobile: 1.2fr 1fr 1fr 1fr;
  --home-compare-min-w: 720px;
  --home-compare-row-h: 80px;
  --home-compare-cell-pad: 8px 12px;
  --home-compare-cell-pad-mobile: 8px 6px;
  --home-compare-oglogo-w: 140px;
  --home-compare-icon-lg: 40px;
  --home-compare-icon-sm: 24px;
  --home-trust-title-gap: 5px;
  --home-trust-shield-size: 90px;
  --home-trust-point-h: 200px;
  --home-trust-check-size: 40px;
  --home-trust-logos-h: 20px;
  --home-reviews-gap: 10px;
  --home-reviews-card-pad: 40px 25px;
  --home-reviews-card-min: 260px;
  --home-reviews-seal-h: 56px;
  --home-reviews-stars-h: 27px;
  --home-reviews-name-fs: 22.6px;
  --home-reviews-quote-fs: 20px;
  --home-reviews-quote-lh: 24.87px;
  --home-getapp-pad-top: 40px;
  --home-getapp-pad-top-mobile: 32px;
  --home-getapp-phone-w: 177px;
  --home-getapp-phone-h: 206px;
  --home-about-endorser-gap: 10px;
  --home-about-mark-h: 48px;
  --l2-bg: #eeeeee;
  --l3-bg: #f7f7f7;
  --radius-10: 10px;
  --redeem-band-pad-y: 60px;
  --redeem-stack-gap: 20px;
  --redeem-step-gap: 20px;
  --redeem-step-pad: 20px;
  --redeem-rule-w: 1px;
  --redeem-icon-size: 60px;
  --redeem-cta-pad-y: 40px;
  --redeem-cta-gap: 20px;
  --redeem-adv-stack-gap: 40px;
  --redeem-adv-grid-gap: 40px;
  --redeem-adv-card-gap: 20px;
  --redeem-adv-card-pad: 40px;
  --redeem-adv-content-gap: 10px;
  --education-cards-pad-block: 80px;
  --education-cards-gap: 20px;
  --education-cards-cap-gap: 20px;
  --education-cards-gap-mobile: 16px;
  --education-card-media-h: 175px;
  --education-card-glow: 0 0 4px rgba(153, 204, 250, 0.4);
  --education-guides-gap: 40px;
  --education-guides-pad-block: 40px;
  --education-guides-tab-gap: 80px;
  --education-guides-tab-gap-mobile: 24px;
  --education-guides-tab-pad: 6px;
  --education-guides-header-gap: 5px;
  --education-guides-icon-size: 50px;
  --education-guides-set-gap: 30px;
  --education-guides-subhead-pad: 10px;
  --education-guides-col-gap: 30px;
  --education-guides-link-gap: 20px;
  --education-guides-link-inner-gap: 10px;
  --education-guides-chevron-w: 13px;
  --education-guides-chevron-h: 8px;
  --education-guides-page-gap: 20px;
  --education-capsules-pad-block: 40px;
  --education-capsules-gap: 50px;
  --education-capsules-gap-mobile: 20px;
  --education-capsule-gap: 5px;
  --education-capsule-pad: 20px;
  --education-capsule-radius: 10px;
  --education-capsule-badge-pad: 4px 12px;
  --education-capsule-badge-radius: 160px;
  --education-capsule-meta-gap: 20px;
  --education-capsule-link-gap: 5px;
  --education-capsule-link-pad: 10px;
  --education-capsule-arrow-w: 12px;
  --education-capsule-arrow-h: 14px;
  --education-back-gap: 10px;
  --education-back-pad: 20px;
  --education-back-inner-gap: 6px;
  --education-share-gap: 20px;
  --education-share-pad: 4px;
  --education-share-icon-gap: 10px;
  --education-share-icon-size: 20px;
  --faq-acc-pad-y: 80px;
  --faq-set-gap: 20px;
  --faq-set-max: 900px;
  --faq-q-gap: 20px;
  --faq-chevron-w: 27.055px;
  --faq-chevron-h: 24px;
  --faq-chevron-glyph-w: 14.348px;
  --faq-answer-gap: 10px;
  --faq-answer-pad-b: 20px;
  --faq-facts-pad-y: 80px;
  --faq-facts-gap: 40px;
  --faq-facts-row-gap: 20px;
  --faq-card-gap: 20px;
  --faq-card-pad-x: 20px;
  --faq-icon-h: 40px;
  --light-border: #aaaaaa;
  --brand-light: #e1edff;
  --service-legal-col: 800px;
  --service-legal-gap: 40px;
  --service-legal-pad-y: 40px;
  --service-legal-pad-bottom: 100px;
  --service-legal-pad-y-mobile: 32px;
  --service-legal-pad-bottom-mobile: 60px;

  /* --- Redesigned homepage (hp-) section tokens --- */
  /* header-hero */
  --hp-header-hero-gradient: linear-gradient(to top, #000000 0%, var(--breakout-grad-dark) 77.27%);
  --hp-header-hero-pad-top: 100px;
  --hp-header-hero-pad-bottom: 80px;
  --hp-header-hero-pad-top-mobile: 60px;
  --hp-header-hero-pad-bottom-mobile: 50px;
  --hp-header-hero-row-gap: 105px;
  --hp-header-hero-phone-w: 525px;
  --hp-header-hero-phone-h: 500px;
  --hp-header-hero-phone-w-mobile: 360px;
  --hp-header-hero-phone-h-mobile: 343px;
  --hp-header-hero-lead-gap: 30px;
  --hp-header-hero-lead-gap-mobile: 35px;
  --hp-header-hero-copy-gap: 10px;
  --hp-header-hero-logo-w: 219px;
  --hp-header-hero-logo-h: 25px;
  --hp-header-hero-subtitle-max: 610px;
  --hp-header-hero-cta-w: 235px;
  --hp-header-hero-cta-h: 101px;
  --hp-header-hero-cta-gradient: linear-gradient(to left, #004e95 0%, var(--og-blue) 100%);
  --hp-header-hero-cta-shadow: 0 4px 2px rgba(0,0,0,0.25);
  --hp-header-hero-stars-w: 94px;
  --hp-header-hero-stars-h: 15px;
  --hp-header-hero-endorser-h: 78px;     /* +25% (was 62.4px) — row/divider height tracks the enlarged logos */
  --hp-header-hero-endorser-gap: 10px;
  --hp-header-hero-endorser-bottom: 40px; /* gap below the partner logos */
  --hp-header-hero-big-w: 75px;  /* +25% (was 60px) square slot for the MKS PAMP Group mark */
  --hp-header-hero-big-h: 75px;
  --hp-header-hero-companies-w: 122.268px; /* +25% (was 97.814px) */
  --hp-header-hero-companies-h: 46.778px;  /* +25% (was 37.422px) */
  --radius-5: 5px;
  --fs-36: 36px;
  --lh-40: 40px;
  /* stats */
  --hp-stats-gap: 75px;
  --hp-stats-item-gap: 5px;
  --hp-stats-star-size: 26px;
  --hp-stats-value-fs-mobile: 36px;
  --hp-stats-value-lh-mobile: 40px;
  --hp-stats-label-max-mobile: 150px;
  /* social-proof-banner */
  --hp-spb-gap-desktop: 80px;
  --hp-spb-gap-mobile: 10px;
  --hp-spb-logo-gap-mobile: 20px;
  --hp-spb-row-h: 24px;
  --hp-spb-logo-w: 100px;
  /* what-you-own */
  --wyo-intro-gap: 10px;
  --wyo-eyebrow-grad: linear-gradient(90deg, #004e95 0%, #0080f3 91.3%);
  --wyo-heading-color: #1a1a1a;
  --wyo-mobile-grad: linear-gradient(180deg, #f3f8ff 0%, #ffffff 100%);
  /* why-onegold */
  --hp-why-onegold-h2-color: #1a1a1a;
  --hp-why-onegold-grad-from: #0080f3;
  --hp-why-onegold-grad-to: #004e95;
  /* how-it-works */
  --hp-hiw-bg-grad: linear-gradient(to bottom, var(--gray-8) 0%, var(--breakout-grad-dark) 70.2%);
  --hp-hiw-bg-grad-mobile: linear-gradient(to bottom, var(--gray-8) 0%, var(--breakout-grad-dark) 100%);
  --hp-hiw-text-grad: linear-gradient(90.5deg, var(--soft-blue) 0%, var(--gray-0) 98.944%);
  --hp-hiw-title-gap: 10px;
  --hp-hiw-card-size: 360px;
  --hp-hiw-subhead-max: 780px;
  --hp-hiw-body-max: 280px;
  --hp-hiw-body-max-mobile: 261px;
  --hp-hiw-panel-gap: 30px;
  --hp-hiw-panel-pad: 30px var(--home-compare-pad);
  /* comparison */
  --hp-comparison-pad-top: 40px;
  --hp-comparison-pad-bottom: 80px;
  --hp-comparison-pad-mobile: 40px;
  --hp-comparison-stack-gap: 40px;
  --hp-comparison-stack-gap-mobile: 20px;
  --hp-comparison-intro-gap: 10px;
  --hp-comparison-eyebrow-grad: linear-gradient(-90deg, #0080f3 8.7%, #004e95 100%);
  --hp-comparison-heading-color: #1a1a1a;
  --hp-comparison-col-max: 288px;
  --hp-comparison-row-h: 77px;
  --hp-comparison-head-h: 86px;
  --hp-comparison-cell-pad-y: 25px;
  --hp-comparison-cell-pad-x: 36px;
  --hp-comparison-cell-pad-x-mobile: 6px;
  --hp-comparison-feature-pad-l: 37px;
  --hp-comparison-feature-pad-r: 36px;
  --hp-comparison-feature-pad-mobile: 6px;
  --hp-comparison-oglogo-w: 208px;
  --hp-comparison-oglogo-w-mobile: 70px;
  --hp-comparison-glyph-size: 16px;
  --hp-comparison-cta-w: 235px;
  --hp-comparison-cta-h: 101px;
  --hp-comparison-cta-pad-y: 10px;
  --hp-comparison-cta-pad-x: 5px;
  --hp-comparison-cta-gap: 15px;
  --hp-comparison-cta-qr-size: 80px;
  --hp-comparison-cta-tracking: 0.16px;
  --hp-comparison-cta-grad: linear-gradient(to left, #0080f3, #004e95);
  --hp-comparison-cta-shadow: 0 4px 2px rgba(0, 0, 0, 0.25);
  /* trust-security */
  --hp-trust-security-grad-to: #004e95;
  --hp-trust-security-phone-w: 359px;
  --hp-trust-security-phone-h: 460px;
  --hp-trust-security-phone-w-mobile: 300px;
  --hp-trust-security-phone-h-mobile: 385px;
  --hp-trust-security-icon-size: 25px;
  --hp-trust-security-points-gap: 30px;
  /* timeless-asset */
  --ta-band-grad: linear-gradient(to bottom, var(--gray-8) 0%, var(--breakout-grad-dark) 100%);
  --ta-pad-y: 120px;
  --ta-pad-y-mobile: 50px;
  --ta-heading-max: 548px;
  --ta-body-max: 780px;
  --ta-phone-w: 359px;
  --ta-phone-h: 460px;
  --ta-phone-w-mobile: 312px;
  --ta-phone-h-mobile: 400px;
  /* why-precious-metals (homepage; dark band below social proof) */
  --hp-wm-bg: var(--ta-band-grad);
  --hp-wm-pad-y: 120px;
  --hp-wm-pad-y-mobile: 50px;
  --hp-wm-col-gap: 64px;
  --hp-wm-text-max: 520px;
  --hp-wm-gold: #d4a24e;            /* eyebrow, headline accent, closing emphasis */
  --hp-wm-body: #c3ccd6;            /* body copy on dark navy */
  --hp-wm-muted: #8b97a5;           /* muted closing lead-in */
  --hp-wm-frame-bg: rgba(255, 255, 255, 0.03);
  --hp-wm-frame-border: rgba(255, 255, 255, 0.08);
  --hp-wm-frame-radius: 16px;
  --hp-wm-media-h: 360px;
  --hp-wm-media-h-mobile: 300px;
  /* reviews */
  --hp-reviews-section-gap: 40px;
  --hp-reviews-logos-h: 45px;
  --hp-reviews-card-w: 295px;
  --hp-reviews-card-w-mobile: 280px;
  --hp-reviews-card-h: 300px;
  --hp-reviews-card-pad: 40px 20px;
  --hp-reviews-stars-w: 127px;
  --hp-reviews-stars-h: 20px;
  /* cta-get-started */
  --cta-gs-grad-mid: #1f3854;
  --cta-gs-gap: 40px;
  --cta-gs-banner-h: 130px;
  --cta-gs-banner-pad-y: 40px;
  --cta-gs-banner-pad-x: 20px;
  --cta-gs-promo-w: 200px;
  --cta-gs-heading-w: 590px;
  --cta-gs-heading-fs: 28px;
  --cta-gs-qr-size: 95px;
  --cta-gs-qr-radius: 15px;
  --cta-gs-btn-h: 44px;
  --cta-gs-arrow-w: 16px;
  --cta-gs-arrow-h: 18px;
  /* faqs */
  --hp-faqs-pad-top: 40px;
  --hp-faqs-pad-bottom: 80px;
  --hp-faqs-stack-gap: 40px;
  --hp-faqs-stack-gap-mobile: 20px;
  --hp-faqs-col-gap: 40px;
  --hp-faqs-q-gap: 40px;
  --hp-faqs-q-gap-mobile: 30px;
  --hp-faqs-row-gap: 5px;
  --hp-faqs-row-h: 27px;
  --hp-faqs-chevron-box: 24px;
  --hp-faqs-chevron-glyph-w: 14.348px;
  --hp-faqs-chevron-glyph-h: 7.778px;
  /* about-onegold */
  --hp-about-onegold-col-gap: 40px;
  /* footer */
  --hp-footer-link: #52668e;

  /* =====================================================================
     OneGold 2.0 — Global Modules (Figma "OG Global Modules" 6190:23918).
     Reusable component library blocks. feature-carousel keeps its own
     component-scoped --fc-* tokens inside its CSS file.
     ===================================================================== */
  /* hero-banner (6190:23923) */
  --hero-banner-media-w: 600px; /* Figma media width   */
  --hero-banner-media-h: 400px; /* Figma media height  */
  --hero-banner-cta-w: 160px;   /* Figma CTA min-width */
  /* explainer-cards (6190:24450) */
  --explainer-cards-icon-grad: linear-gradient(to bottom, var(--gray-0) 37%, var(--soft-blue) 135%); /* icon-card backing */
  --explainer-cards-media-h: 360px; /* image-variant media panel height */
  --explainer-cards-title-grad: linear-gradient(90deg, #0080f3 0%, #004e95 100%); /* limit-orders blue title gradient (Figma "Text Gradient 3") */
  --explainer-cards-card-glow: 0 0 4px rgba(153, 204, 250, 0.4); /* soft-blue card glow (Figma) */
}