/* ============================================================
   indiagold — Design Foundations
   Colors + Typography + Spacing + Radius + Shadows
   Source of truth: "Indiagold Web Design System" Figma file
   ============================================================ */

/* ---------- Editorial display serif — Tiempos Headline (Klim) ----------
   Digital-Gold direction (v1.1): the editorial serif carries hero headlines,
   section openers and trust statements ONLY. Production face Tiempos Headline
   is now self-hosted (Regular 400). Source Serif 4 stays imported as a graceful
   fallback for the heavier/italic weights Tiempos Headline doesn't ship here. */
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;1,8..60,400&display=swap');

/* ---------- Fonts — Averta (self-hosted, full family) ----------
   Weight map: Extrathin 100 · Thin 200 · Light 300 · Regular 400 ·
   Semibold 600 · Bold 700 · ExtraBold 800 · Black 900 (+ italics) */
/* Tiempos Headline — editorial display serif (Regular 400, self-hosted) */
@font-face { font-family:"Tiempos Headline"; src:url("/fonts/digital-gold/TiemposHeadline-Regular.otf") format("opentype"); font-weight:400; font-style:normal; font-display:swap; }

@font-face { font-family:"Averta"; src:url("/fonts/digital-gold/Averta-Extrathin.otf") format("opentype"); font-weight:100; font-style:normal; font-display:swap; }
@font-face { font-family:"Averta"; src:url("/fonts/digital-gold/Averta-ExtrathinItalic.otf") format("opentype"); font-weight:100; font-style:italic; font-display:swap; }
@font-face { font-family:"Averta"; src:url("/fonts/digital-gold/Averta-Thin.otf") format("opentype"); font-weight:200; font-style:normal; font-display:swap; }
@font-face { font-family:"Averta"; src:url("/fonts/digital-gold/Averta-ThinItalic.otf") format("opentype"); font-weight:200; font-style:italic; font-display:swap; }
@font-face { font-family:"Averta"; src:url("/fonts/digital-gold/Averta-Light.otf") format("opentype"); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:"Averta"; src:url("/fonts/digital-gold/Averta-LightItalic.otf") format("opentype"); font-weight:300; font-style:italic; font-display:swap; }
@font-face { font-family:"Averta"; src:url("/fonts/digital-gold/Averta-Regular.otf") format("opentype"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Averta"; src:url("/fonts/digital-gold/Averta-RegularItalic.otf") format("opentype"); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:"Averta"; src:url("/fonts/digital-gold/Averta-Semibold.otf") format("opentype"); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:"Averta"; src:url("/fonts/digital-gold/Averta-SemiboldItalic.otf") format("opentype"); font-weight:600; font-style:italic; font-display:swap; }
@font-face { font-family:"Averta"; src:url("/fonts/digital-gold/Averta-Bold.otf") format("opentype"); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"Averta"; src:url("/fonts/digital-gold/Averta-BoldItalic.otf") format("opentype"); font-weight:700; font-style:italic; font-display:swap; }
@font-face { font-family:"Averta"; src:url("/fonts/digital-gold/Averta-ExtraBold.otf") format("opentype"); font-weight:800; font-style:normal; font-display:swap; }
@font-face { font-family:"Averta"; src:url("/fonts/digital-gold/Averta-ExtraBoldItalic.otf") format("opentype"); font-weight:800; font-style:italic; font-display:swap; }
@font-face { font-family:"Averta"; src:url("/fonts/digital-gold/Averta-Black.otf") format("opentype"); font-weight:900; font-style:normal; font-display:swap; }
@font-face { font-family:"Averta"; src:url("/fonts/digital-gold/Averta-BlackItalic.otf") format("opentype"); font-weight:900; font-style:italic; font-display:swap; }

:root {
  /* ===========================================================
     COLOR PRIMITIVES  (Tailwind-derived scales)
     =========================================================== */

  /* Orange — BRAND PRIMARY (the indiagold orange) */
  --orange-50:  #FFF7ED;
  --orange-100: #FFEDD5;
  --orange-200: #FED7AA;
  --orange-300: #FDBA74;
  --orange-400: #FB923C;
  --orange-500: #F97316;
  --orange-600: #EA580C;
  --orange-700: #C2410C;
  --orange-800: #9A3412;
  --orange-900: #7C2D12;
  --orange-950: #431407;

  /* Amber — gold / highlight */
  --amber-50:  #FFFBEB;
  --amber-100: #FEF3C7;
  --amber-200: #FDE68A;
  --amber-300: #FCD34D;
  --amber-400: #FBBF24;
  --amber-500: #F59E0B;
  --amber-600: #D97706;
  --amber-700: #B45309;
  --amber-800: #92400E;
  --amber-900: #78350F;
  --amber-950: #451A03;

  /* Stone — NEUTRALS (text, surfaces, borders) */
  --stone-50:  #FAFAF9;
  --stone-100: #F5F5F4;
  --stone-200: #E7E5E4;
  --stone-300: #D6D3D1;
  --stone-400: #A8A29E;
  --stone-500: #78716C;
  --stone-600: #57534E;
  --stone-700: #44403C;
  --stone-800: #292524;
  --stone-900: #1C1917;
  --stone-950: #0C0A09;

  /* Red — error / danger */
  --red-50:  #FEF2F2;
  --red-100: #FEE2E2;
  --red-200: #FECACA;
  --red-300: #FCA5A5;
  --red-400: #F87171;
  --red-500: #EF4444;
  --red-600: #DC2626;
  --red-700: #B91C1C;
  --red-800: #991B1B;
  --red-900: #7F1D1D;
  --red-950: #450A0A;

  /* Emerald — success */
  --emerald-50:  #ECFDF5;
  --emerald-100: #D1FAE5;
  --emerald-200: #A7F3D0;
  --emerald-300: #6EE7B7;
  --emerald-400: #34D399;
  --emerald-500: #10B981;
  --emerald-600: #059669;
  --emerald-700: #047857;
  --emerald-800: #065F46;
  --emerald-900: #064E3B;
  --emerald-950: #022C22;

  /* Teal — success */
  --teal-50:  #F0FDFA;
  --teal-100: #CCFBF1;
  --teal-200: #99F6E4;
  --teal-300: #5EEAD4;
  --teal-400: #2DD4BF;
  --teal-500: #14B8A6;
  --teal-600: #0D9488;
  --teal-700: #0F766E;
  --teal-800: #115E59;
  --teal-900: #134E4A;
  --teal-950: #042F2E;

  /* Lime — accent */
  --lime-50:  #F7FEE7;
  --lime-100: #ECFCCB;
  --lime-200: #D9F99D;
  --lime-300: #BEF264;
  --lime-400: #A3E635;
  --lime-500: #84CC16;
  --lime-600: #65A30D;
  --lime-700: #4D7C0F;
  --lime-800: #3F6212;
  --lime-900: #365314;
  --lime-950: #1A2E05;

  /* Base */
  --white: #FFFFFF;
  --black: #000000;
  --bg-white: #FFFFFF;    /* white — primary light canvas (default) */
  --bg-light: #FCF9F1;    /* warm cream canvas — alternate light band */

  /* Brand logo inks */
  --ink: #221B15;          /* near-black warm ink used for logo "india" + dark UI */
  --logo-orange: #F1711D;  /* the "gold" wordmark orange (on light bg) */

  /* ===========================================================
     WARM NEUTRALS  (Digital-Gold v1.1 — "white · ivory · sand · stone · charcoal")
     The premium canvas. Backgrounds are WHITE-first; warm cream (ivory)
     and sand bands add warmth in moderation. Slate charcoal anchors dark UI.
     =========================================================== */
  --ivory:    #FCF9F1;   /* warm cream band (use sparingly — white leads) */
  --ivory-2:  #F6F1E6;   /* faintly deeper cream for alternating bands */
  --sand:     #EFE7D7;   /* warm tonal block / quiet fills */
  --sand-2:   #E3D8C2;   /* sand hairline / deeper warm border */
  --charcoal: #23272F;   /* cool slate charcoal — dark-section base (brand banner) */

  /* ===========================================================
     DARK THEME  (Digital-Gold "emotional depth" surfaces)
     Cool slate (matches the indiagold brand banner), not warm brown.
     Used for hero, premium storytelling and product-ecosystem sections.
     Target ~40% of page area (60% light / 40% dark).
     =========================================================== */
  --dark-bg:        #23272F;   /* slate charcoal — dark-section page base */
  --dark-bg-2:      #1A1D24;   /* deepest band / footer */
  --dark-surface:   #2D323C;   /* raised card on dark */
  --dark-surface-2: #373D48;   /* hover / nested surface on dark */
  --dark-border:    rgba(244,244,247,0.12);   /* hairline on dark */
  --dark-border-strong: rgba(244,244,247,0.24);
  --fg-on-dark-1:   #F5F3EF;   /* primary text on dark (soft white) */
  --fg-on-dark-2:   #B6BAC2;   /* secondary text on dark (cool gray) */
  --fg-on-dark-3:   #80848D;   /* tertiary / captions on dark */

  /* ===========================================================
     WARM AMBER ACCENT  (the "gold" warmth — kept FLAT & typographic)
     NOT metallic, NOT a material. A warm amber used for serif headlines,
     eyebrows and small marks — the golden note of the brand without sheen.
     Orange still leads every action; amber is a quiet accent (≈ a few %).
     =========================================================== */
  --gold:        #E2913C;   /* warm amber — serif headline accent on light/slate */
  --gold-bright: #F0A94A;   /* lit amber */
  --gold-deep:   #B26E27;   /* deep amber (text on light) */
  --gold-soft:   #FBEBD4;   /* soft amber wash on light (tags / seals) */
  --gold-on-dark:#EFA959;   /* amber serif headline / eyebrow on dark (ref vibe) */
  --grad-gold-rich: linear-gradient(120deg, #F0A94A 0%, #E2913C 100%);  /* flat warm amber — no metallic sheen */

  /* Special gradients */
  --grad-orange:   linear-gradient(270deg, #FA9552 20%, #FFD859 100%);  /* signature brand Orange Gradient (gold→orange, L→R) */
  --grad-gold:     linear-gradient(297.59deg, #D5A152 -16.32%, #FFD859 129.62%);
  --grad-rust:     linear-gradient(322.84deg, #592D0D 26.3%, #361E07 72.28%);
  --grad-voilet:   linear-gradient(297.59deg, #A31A71 -16.32%, #5B2647 129.62%);
  --grad-midnight: linear-gradient(322.84deg, #484540 26.3%, #201913 72.28%);

  /* ===========================================================
     SEMANTIC COLOR TOKENS
     =========================================================== */
  --color-primary:        var(--orange-600);   /* #EA580C — links, accents, primary actions */
  --color-primary-hover:  var(--orange-700);
  --color-primary-soft:   var(--orange-100);    /* soft chip / pill backgrounds */
  --color-primary-soft-fg:var(--orange-700);

  --color-bg:             var(--bg-light);      /* page background (warm cream) */
  --color-surface:        var(--white);         /* cards, sheets */
  --color-surface-alt:    var(--stone-50);
  --color-header:         var(--stone-900);     /* dark headers / app bars */

  --fg-1: var(--stone-900);   /* primary text  #1C1917 */
  --fg-2: var(--stone-600);   /* secondary text #57534E */
  --fg-3: var(--stone-500);   /* tertiary / captions #78716C */
  --fg-4: var(--stone-400);   /* disabled / hints */
  --fg-on-dark: var(--white);

  --border:        var(--stone-200);  /* default hairline #E7E5E4 */
  --border-strong: var(--stone-300);

  --color-success: var(--teal-600);
  --color-success-soft: var(--teal-50);
  --color-warning: var(--amber-500);
  --color-warning-soft: var(--amber-50);
  --color-danger:  var(--red-600);
  --color-danger-soft: var(--red-50);

  /* CTA — the gold gradient button surface + its ink */
  --cta-gold-bg: var(--grad-gold);
  --cta-gold-fg: #422006;       /* rust-brown text on gold */

  /* ===========================================================
     TYPOGRAPHY
     Primary typeface: Averta (does all UI, body, tables, forms, CTAs and the
     bold ad display lockups). Editorial serif (Tiempos Headline) is display-only.
     =========================================================== */
  --font-sans: "Averta", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Averta", system-ui, -apple-system, sans-serif;  /* bold ad lockups — Averta Black/ExtraBold */
  --font-serif: "Tiempos Headline", "Source Serif 4", Georgia, "Times New Roman", serif;  /* editorial display — headlines & trust statements only */

  /* Editorial display ramp (serif) — large, confident, generous leading.
     Use weight 400–500 (premium serifs read best lighter at display size). */
  --t-editorial-xl-size: 76px;  --t-editorial-xl-lh: 1.04;  /* hero */
  --t-editorial-lg-size: 56px;  --t-editorial-lg-lh: 1.08;  /* section opener */
  --t-editorial-md-size: 40px;  --t-editorial-md-lh: 1.14;  /* trust statement */
  --t-editorial-sm-size: 28px;  --t-editorial-sm-lh: 1.22;  /* card / lead */

  /* Type ramp (size / line-height / weight) — names from Figma */
  --t-h1-size: 48px;   --t-h1-lh: 57px;   --t-h1-weight: 700;
  --t-h2-size: 40px;   --t-h2-lh: 50.5px; --t-h2-weight: 700;
  --t-h3-size: 36px;   --t-h3-lh: 44px;   --t-h3-weight: 700;
  --t-subtitle-lg-size: 32px; --t-subtitle-lg-lh: 44px; --t-subtitle-lg-weight: 700;
  --t-subtitle-md-size: 24px; --t-subtitle-md-lh: 28px; --t-subtitle-md-weight: 700;
  --t-subtitle-md-semi-weight: 600;
  --t-subtitle-sm-size: 18px; --t-subtitle-sm-lh: 24px; --t-subtitle-sm-weight: 700;
  --t-body-lg-size: 20px; --t-body-lg-lh: 24px;
  --t-body-size: 16px;    --t-body-lh: 22px;
  --t-body-sm-size: 14px; --t-body-sm-lh: 21px;
  --t-text-sm-size: 12px; --t-text-sm-lh: 20px;
  --t-pretitle-size: 16px; --t-pretitle-lh: 22px;  /* uppercase, 10% tracking */
  --t-button-size: 16px;  --t-button-sm-size: 14px; --t-button-tiny-size: 12px;

  /* ===========================================================
     RADIUS  (named radius-2 .. radius-6 + round)
     =========================================================== */
  --radius-2:  2px;
  --radius-3:  4px;
  --radius-4:  8px;
  --radius-5:  16px;
  --radius-6:  48px;
  --radius-round: 999px;

  /* Component conventions */
  --radius-button: 8px;   /* soft rectangle \u2014 one consistent button radius */
  --radius-card:   8px;
  --radius-chip:   2px;
  --radius-sheet:  16px;

  /* ===========================================================
     SPACING SCALE  (px)
     =========================================================== */
  --space-2:  2px;
  --space-4:  4px;
  --space-8:  8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;
  --space-80: 80px;
  --space-96: 96px;

  /* ===========================================================
     SHADOWS  (warm, brown-tinted, soft — 6 elevations)
     =========================================================== */
  --shadow-1: 0 1px 2px rgba(34,27,21,0.06), 0 1px 1px rgba(34,27,21,0.04);
  --shadow-2: 0 2px 6px rgba(34,27,21,0.08), 0 1px 2px rgba(34,27,21,0.05);
  --shadow-3: 0 4px 12px rgba(34,27,21,0.10), 0 2px 4px rgba(34,27,21,0.06);
  --shadow-4: 0 7px 13px rgba(34,27,21,0.12), 0 3px 6px rgba(34,27,21,0.08);
  --shadow-5: 0 12px 28px rgba(34,27,21,0.14), 0 6px 12px rgba(34,27,21,0.08);
  --shadow-6: 0 22px 60px rgba(34,27,21,0.18), 0 10px 24px rgba(34,27,21,0.10);
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   ============================================================ */
.t-h1 { font-family: var(--font-sans); font-weight: var(--t-h1-weight); font-size: var(--t-h1-size); line-height: var(--t-h1-lh); color: var(--fg-1); letter-spacing: 0; }
.t-h2 { font-family: var(--font-sans); font-weight: var(--t-h2-weight); font-size: var(--t-h2-size); line-height: var(--t-h2-lh); color: var(--fg-1); }
.t-h3 { font-family: var(--font-sans); font-weight: var(--t-h3-weight); font-size: var(--t-h3-size); line-height: var(--t-h3-lh); color: var(--fg-1); }
.t-subtitle-lg { font-family: var(--font-sans); font-weight: 700; font-size: var(--t-subtitle-lg-size); line-height: var(--t-subtitle-lg-lh); color: var(--fg-1); }
.t-subtitle-md { font-family: var(--font-sans); font-weight: 700; font-size: var(--t-subtitle-md-size); line-height: var(--t-subtitle-md-lh); color: var(--fg-1); }
.t-subtitle-sm { font-family: var(--font-sans); font-weight: 700; font-size: var(--t-subtitle-sm-size); line-height: var(--t-subtitle-sm-lh); color: var(--fg-1); }
.t-body-lg { font-family: var(--font-sans); font-weight: 400; font-size: var(--t-body-lg-size); line-height: var(--t-body-lg-lh); color: var(--fg-2); }
.t-body { font-family: var(--font-sans); font-weight: 400; font-size: var(--t-body-size); line-height: var(--t-body-lh); color: var(--fg-2); }
.t-body-bold { font-family: var(--font-sans); font-weight: 700; font-size: var(--t-body-size); line-height: 20px; color: var(--fg-1); }
.t-body-sm { font-family: var(--font-sans); font-weight: 400; font-size: var(--t-body-sm-size); line-height: var(--t-body-sm-lh); color: var(--fg-2); }
.t-text-sm { font-family: var(--font-sans); font-weight: 400; font-size: var(--t-text-sm-size); line-height: var(--t-text-sm-lh); color: var(--fg-3); }
.t-pretitle { font-family: var(--font-sans); font-weight: 700; font-size: var(--t-pretitle-size); line-height: var(--t-pretitle-lh); letter-spacing: 0.10em; text-transform: uppercase; color: var(--color-primary); }
.t-pretitle-sm { font-family: var(--font-sans); font-weight: 700; font-size: 12px; line-height: 22px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--color-primary); }
.t-display { font-family: var(--font-display); font-weight: 900; letter-spacing: -0.02em; text-transform: uppercase; }

/* ============================================================
   EDITORIAL DISPLAY (serif) — Digital-Gold direction.
   Hero headlines, section openers, trust statements & final CTAs ONLY.
   Everything else (body, UI, tables, forms) stays Averta.
   ============================================================ */
.t-editorial-xl { font-family: var(--font-serif); font-weight: 400; font-size: var(--t-editorial-xl-size); line-height: var(--t-editorial-xl-lh); letter-spacing: -0.015em; color: var(--fg-1); text-wrap: balance; }
.t-editorial-lg { font-family: var(--font-serif); font-weight: 400; font-size: var(--t-editorial-lg-size); line-height: var(--t-editorial-lg-lh); letter-spacing: -0.012em; color: var(--fg-1); text-wrap: balance; }
.t-editorial-md { font-family: var(--font-serif); font-weight: 400; font-size: var(--t-editorial-md-size); line-height: var(--t-editorial-md-lh); letter-spacing: -0.008em; color: var(--fg-1); text-wrap: balance; }
.t-editorial-sm { font-family: var(--font-serif); font-weight: 500; font-size: var(--t-editorial-sm-size); line-height: var(--t-editorial-sm-lh); letter-spacing: -0.005em; color: var(--fg-1); }
.t-editorial-italic { font-style: italic; }   /* for emphasised trust statements */
.t-editorial-accent { color: var(--gold); }   /* warm amber serif headline (brand-banner vibe) */
.on-dark .t-editorial-accent { color: var(--gold-on-dark); }

/* ============================================================
   DARK-SECTION HELPER — flip foreground tokens for charcoal blocks.
   Wrap a dark section in .on-dark so .t-* and body text invert.
   ============================================================ */
.on-dark { background: var(--dark-bg); color: var(--fg-on-dark-1); }
.on-dark .t-editorial-xl, .on-dark .t-editorial-lg, .on-dark .t-editorial-md, .on-dark .t-editorial-sm,
.on-dark .t-h1, .on-dark .t-h2, .on-dark .t-h3,
.on-dark .t-subtitle-lg, .on-dark .t-subtitle-md, .on-dark .t-subtitle-sm,
.on-dark .t-body-bold { color: var(--fg-on-dark-1); }
.on-dark .t-body-lg, .on-dark .t-body, .on-dark .t-body-sm { color: var(--fg-on-dark-2); }
.on-dark .t-text-sm { color: var(--fg-on-dark-3); }
.on-dark .t-pretitle, .on-dark .t-pretitle-sm { color: var(--gold-on-dark); }   /* gold eyebrows on dark */


/* ============================================================
   indiagold — Component styles (buttons, inputs, chips, cards,
   switches). Pairs with colors_and_type.css.
   ============================================================ */

/* ---------- Buttons ---------- */
.ig-btn {
  font-family: var(--font-sans);
  font-weight: 700;
  border: 0;
  cursor: pointer;
  border-radius: var(--radius-button);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background .15s ease, box-shadow .15s ease, border-color .15s ease, transform .08s ease, color .15s ease;
  white-space: nowrap;
  user-select: none;
}
.ig-btn:active { transform: translateY(1px); }

/* sizes — one consistent soft-rectangle radius across every button */
.ig-btn--lg { font-size: 14px; padding: 12px 28px; }
.ig-btn--md { font-size: 12px; padding: 12px 32px; letter-spacing: .1em; text-transform: uppercase; }
.ig-btn--sm { font-size: 12px; padding: 6px 14px; letter-spacing: .06em; text-transform: uppercase; }

/* PRIMARY — orange→gold gradient */
.ig-btn--primary { background: var(--grad-orange); color: var(--cta-gold-fg); box-shadow: var(--shadow-2); }
.ig-btn--primary:hover { background: linear-gradient(270deg, #F2823A 20%, #FFCE3F 100%); box-shadow: var(--shadow-3); }
.ig-btn--primary:active { box-shadow: var(--shadow-1) inset; }
.ig-btn--primary:disabled { background: var(--stone-200); color: var(--stone-400); box-shadow: none; cursor: not-allowed; transform: none; }

/* SECONDARY — orange chip */
.ig-btn--secondary { background: var(--orange-100); color: var(--orange-700); border: 1px solid transparent; }
.ig-btn--secondary:hover { border-color: var(--orange-600); }
.ig-btn--secondary:active { background: var(--orange-600); color: var(--orange-50); border-color: var(--orange-600); }
.ig-btn--secondary:disabled { background: var(--stone-100); color: var(--stone-400); border-color: transparent; cursor: not-allowed; }

/* OUTLINED — monochrome (neutral ink), the default outline button */
.ig-btn--outline { background: transparent; color: var(--fg-1); border: 1.5px solid var(--border-strong); }
.ig-btn--outline:hover { background: var(--stone-100); border-color: var(--stone-900); }
.ig-btn--outline:active { background: var(--stone-200); }

/* GHOST / LINK */
.ig-btn--ghost { background: transparent; color: var(--orange-600); }
.ig-btn--ghost:hover { background: var(--orange-50); }
.ig-btn--link { background: transparent; color: var(--orange-600); padding: 0; text-transform: none; letter-spacing: 0; text-decoration: underline; text-underline-offset: 3px; }

/* DARK / app-download */
.ig-btn--dark { background: var(--ink); color: #fff; border-radius: var(--radius-4); }
.ig-btn--dark:hover { background: #2e251d; box-shadow: var(--shadow-4); }

/* loading spinner */
.ig-spin { width: 15px; height: 15px; border-radius: 50%; border: 2px solid rgba(66,32,6,.25); border-top-color: var(--cta-gold-fg); animation: ig-rot .7s linear infinite; }
@keyframes ig-rot { to { transform: rotate(360deg); } }

/* ---------- Inputs ---------- */
.ig-field { display: flex; flex-direction: column; gap: 6px; font-family: var(--font-sans); }
.ig-label { font-size: 12px; font-weight: 700; color: var(--fg-2); letter-spacing: .02em; }
.ig-input {
  font-family: var(--font-sans); font-size: 15px; color: var(--fg-1);
  background: #fff; border: 1px solid var(--border-strong); border-radius: var(--radius-button);
  padding: 11px 14px; outline: none; transition: border-color .15s ease, box-shadow .15s ease; width: 100%; box-sizing: border-box;
}
.ig-input::placeholder { color: var(--fg-4); }
.ig-input:focus { border-color: var(--orange-600); box-shadow: 0 0 0 3px rgba(234,88,12,.15); }
.ig-input--error { border-color: var(--red-500); }
.ig-input--error:focus { box-shadow: 0 0 0 3px rgba(239,68,68,.15); }
.ig-hint { font-size: 12px; color: var(--fg-3); }
.ig-hint--error { color: var(--red-600); }

/* ---------- Chips / badges ---------- */
.ig-chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-sans); font-weight: 700; font-size: 12px; padding: 5px 10px; border-radius: 6px; }
.ig-chip--soft { background: var(--orange-100); color: var(--orange-700); }
.ig-chip--solid { background: var(--orange-600); color: #fff; }
.ig-badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-sans); font-weight: 700; font-size: 11px; padding: 3px 9px; border-radius: 999px; letter-spacing: .03em; }
.ig-badge--success { background: var(--teal-50); color: var(--teal-700); }
.ig-badge--warning { background: var(--amber-50); color: var(--amber-700); }
.ig-badge--danger { background: var(--red-50); color: var(--red-700); }
.ig-badge--neutral { background: var(--stone-100); color: var(--stone-600); }
.ig-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ---------- Card ---------- */
.ig-card { background: var(--color-surface); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-2); }

/* ---------- Switch ---------- */
.ig-switch { position: relative; display: inline-block; width: 44px; height: 24px; }
.ig-switch input { opacity: 0; width: 0; height: 0; }
.ig-switch .track { position: absolute; inset: 0; background: var(--stone-300); border-radius: 999px; transition: background .18s ease; cursor: pointer; }
.ig-switch .track::before { content: ""; position: absolute; height: 18px; width: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .18s ease; box-shadow: var(--shadow-2); }
.ig-switch input:checked + .track { background: var(--orange-600); }
.ig-switch input:checked + .track::before { transform: translateX(20px); }

/* ---------- Checkbox / radio ---------- */
.ig-check { width: 20px; height: 20px; border: 1.5px solid var(--border-strong); border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; background: #fff; }
.ig-check.on { background: var(--orange-600); border-color: var(--orange-600); }
.ig-radio { width: 20px; height: 20px; border: 1.5px solid var(--border-strong); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; background: #fff; }
.ig-radio.on { border-color: var(--orange-600); }
.ig-radio.on::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--orange-600); }

/* ============================================================
   PREMIUM / EDITORIAL components — Digital-Gold direction (v1.1)
   Motion law: slow, smooth, purposeful, elegant. No bounce, no scale-pop.
   Transitions 240–360ms ease; hovers lift/brighten gently.
   ============================================================ */

/* ---------- Buttons: editorial set ---------- */
/* SOLID ORANGE — the dominant action colour on premium light/dark pages.
   Soft-rectangle geometry + sentence-case label (not the uppercase ad button). */
.ig-btn--solid {
  background: var(--orange-600); color: #fff; border-radius: var(--radius-button);
  font-weight: 700; font-size: 15px; padding: 13px 26px; letter-spacing: 0; text-transform: none;
  box-shadow: 0 1px 2px rgba(34,27,21,.10);
  transition: background .28s ease, box-shadow .28s ease, transform .12s ease;
}
.ig-btn--solid:hover { background: var(--orange-500); box-shadow: var(--shadow-3); }
.ig-btn--solid:active { background: var(--orange-700); }
.ig-btn--solid:disabled { background: var(--stone-200); color: var(--stone-400); box-shadow: none; cursor: not-allowed; }

/* GOLD — amber accent moments only (flat, not metallic). Reserve narrowly. */
.ig-btn--gold {
  background: var(--grad-gold-rich); color: #3A2A07; border-radius: var(--radius-button);
  font-weight: 700; font-size: 15px; padding: 13px 26px; letter-spacing: 0; text-transform: none;
  box-shadow: 0 1px 2px rgba(34,27,21,.12);
  transition: filter .28s ease, box-shadow .28s ease;
}
.ig-btn--gold:hover { filter: brightness(1.05); box-shadow: var(--shadow-3); }

/* ON-DARK pill — for buttons sitting on charcoal sections */
.ig-btn--on-dark { background: var(--fg-on-dark-1); color: var(--charcoal); border-radius: var(--radius-button); font-weight: 700; font-size: 15px; padding: 13px 26px; text-transform: none; letter-spacing: 0; transition: background .28s ease; }
.ig-btn--on-dark:hover { background: #fff; }
.ig-btn--ghost-dark { background: transparent; color: var(--fg-on-dark-1); border: 1px solid var(--dark-border-strong); border-radius: var(--radius-button); font-weight: 700; font-size: 15px; padding: 12px 25px; text-transform: none; letter-spacing: 0; transition: background .28s ease, border-color .28s ease; }
.ig-btn--ghost-dark:hover { background: rgba(244,244,247,.08); border-color: var(--fg-on-dark-2); }

/* ORANGE-OUTLINE — the one deliberate orange-accent outline (soft rectangle,
   uppercase, tracked, with optional arrow). The default .ig-btn--outline is
   monochrome; reach for this when an outline needs the brand accent. */
.ig-btn--outline-orange { background: transparent; color: var(--orange-500); border: 1.5px solid var(--orange-600); border-radius: var(--radius-button); font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; padding: 13px 22px; transition: background .28s ease, color .28s ease; }
.ig-btn--outline-orange:hover { background: var(--orange-600); color: #fff; }

/* ---------- Nav pill (top bar control) ---------- */
.ig-navpill { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-sans); font-weight: 600; font-size: 14px; color: var(--fg-1); background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-round); padding: 8px 16px; cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease; }
.ig-navpill:hover { border-color: var(--border-strong); box-shadow: var(--shadow-1); }
.ig-navpill--dark { background: rgba(247,239,230,.06); border-color: var(--dark-border); color: var(--fg-on-dark-1); }
.ig-navpill--dark:hover { background: rgba(247,239,230,.12); border-color: var(--dark-border-strong); }

/* ---------- Trust card (Archetype C) — "every card should feel like proof" ----------
   Large, premium, restrained. Light variant on ivory; dark variant on charcoal. */
.ig-trustcard { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-5); padding: 32px; box-shadow: var(--shadow-1); transition: box-shadow .32s ease, transform .32s ease; }
.ig-trustcard:hover { box-shadow: var(--shadow-4); transform: translateY(-3px); }
.ig-trustcard .eyebrow { font-family: var(--font-sans); font-weight: 700; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--orange-600); margin: 0 0 14px; }
.ig-trustcard .ttl { font-family: var(--font-serif); font-weight: 500; font-size: 26px; line-height: 1.18; letter-spacing: -.005em; color: var(--fg-1); margin: 0 0 10px; }
.ig-trustcard .desc { font-family: var(--font-sans); font-weight: 400; font-size: 15px; line-height: 1.55; color: var(--fg-2); margin: 0; }
.ig-trustcard--dark { background: var(--dark-surface); border-color: var(--dark-border); box-shadow: none; }
.ig-trustcard--dark:hover { background: var(--dark-surface-2); box-shadow: 0 18px 40px rgba(0,0,0,.4); }
.ig-trustcard--dark .ttl { color: var(--fg-on-dark-1); }
.ig-trustcard--dark .desc { color: var(--fg-on-dark-2); }
.ig-trustcard--dark .eyebrow { color: var(--gold-on-dark); }

/* ---------- Comparison table (Archetype B) — objective, clean, financial-grade ---------- */
.ig-compare { width: 100%; border-collapse: collapse; font-family: var(--font-sans); background: var(--white); border-radius: var(--radius-5); overflow: hidden; box-shadow: var(--shadow-1); }
.ig-compare th, .ig-compare td { text-align: left; padding: 18px 22px; border-bottom: 1px solid var(--border); font-size: 15px; }
.ig-compare thead th { font-weight: 700; font-size: 13px; letter-spacing: .04em; color: var(--fg-3); text-transform: uppercase; background: var(--ivory-2); }
.ig-compare thead th.ig-compare__us { color: var(--orange-700); background: var(--orange-50); }
.ig-compare td.ig-compare__us { background: rgba(255,247,237,.5); font-weight: 700; color: var(--fg-1); }
.ig-compare tbody tr:last-child td { border-bottom: 0; }
.ig-compare .row-label { font-weight: 600; color: var(--fg-2); }
.ig-compare .yes { color: var(--teal-600); font-weight: 700; }
.ig-compare .no { color: var(--stone-400); }

/* ---------- Amber accent seal (flat — purity / proof mark) ---------- */
.ig-seal { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-weight: 700; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-deep); background: var(--gold-soft); border: 1px solid #F0D6A8; border-radius: var(--radius-round); padding: 6px 14px; }
.ig-seal .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }

/* ---------- Stat / social-proof figure (Archetype validation) ---------- */
.ig-stat .num { font-family: var(--font-serif); font-weight: 400; font-size: 52px; line-height: 1; letter-spacing: -.01em; color: var(--fg-1); }
.ig-stat .lbl { font-family: var(--font-sans); font-weight: 600; font-size: 14px; color: var(--fg-3); margin-top: 8px; }
.on-dark .ig-stat .num { color: var(--gold-on-dark); }
.on-dark .ig-stat .lbl { color: var(--fg-on-dark-2); }


/* ============================================================
   indiagold Digital Gold — landing page styles
   Builds on colors_and_type.css + ig-components.css.
   Light-first (white / ivory) with two dark anchor sections
   (Daily SIP + final CTA + footer). One locked accent: orange
   action, amber typographic warmth, teal success.
   ============================================================ */

:root {
  --dg-maxw: 1200px;
  --dg-gut: 40px;
  --dg-eyebrow: var(--orange-600);   /* accent-emphasis tweak retargets this */
  --dg-serif-accent: #C2410C;
  --dg-reveal-dur: .8s;              /* motion tweak retargets this */
  --dg-ease: cubic-bezier(.16,1,.3,1);
}

* { box-sizing: border-box; }
.dg-page-shell { scroll-behavior: smooth; }
.dg-page-shell {
  margin: 0; background: var(--bg-white); color: var(--fg-1);
  font-family: var(--font-sans); -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.dg-page-shell img { display: block; max-width: 100%; }
.dg-page-shell a { color: inherit; text-decoration: none; }

.dg-wrap { max-width: var(--dg-maxw); margin: 0 auto; padding: 0 var(--dg-gut); }
.dg-page-shell section { position: relative; }

/* shared section header */
.dg-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--dg-eyebrow); margin: 0 0 18px;
}
.dg-eyebrow::before { content: ""; width: 22px; height: 2px; background: currentColor; border-radius: 2px; }
.dg-h2 {
  font-family: var(--font-serif); font-weight: 400; letter-spacing: -.015em;
  font-size: clamp(34px, 4.4vw, 54px); line-height: 1.06; margin: 0; color: var(--fg-1);
  text-wrap: balance;
}
.dg-h2 .accent { color: var(--dg-serif-accent); }
.dg-lede { font-size: 19px; line-height: 1.6; color: var(--fg-2); max-width: 56ch; margin: 20px 0 0; }
.tick { color: var(--color-success); flex: none; }   /* teal check */

/* ============================================================ NAV */
.dg-nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.82); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.dg-nav__in { display: flex; align-items: center; gap: 28px; height: 70px; }
.dg-nav__logo { height: 26px; }
.dg-nav__links { display: flex; gap: 26px; margin-left: 6px; }
.dg-nav__links a { font-size: 15px; font-weight: 600; color: var(--fg-2); transition: color .2s ease; }
.dg-nav__links a:hover { color: var(--fg-1); }
.dg-nav__links a.nav--active { color: var(--orange-600); }
.dg-nav__right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.dg-nav__right .ig-btn svg { width: 17px; height: 17px; }
.dg-nav .ig-btn { padding-block: 10px; }
@media (max-width: 900px) {
  .dg-nav__links { display: none; }
  .dg-nav__cta-secondary { display: none; }
}

/* ============================================================ HERO */
.hero { position: relative; isolation: isolate; padding: clamp(48px, 7vw, 88px) 0 clamp(56px, 7vw, 96px); overflow: clip; }
.hero::before {  /* warm ambient gradient wash */
  content: ""; position: absolute; inset: -12% -6% 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(46% 54% at 80% 20%, rgba(240,169,74,.36), rgba(240,169,74,0) 62%),
    radial-gradient(38% 48% at 98% 58%, rgba(232,93,40,.17), transparent 64%),
    radial-gradient(54% 42% at 56% -4%, rgba(245,222,179,.20), transparent 72%);
}
.hero::after {  /* faint blueprint grid, lower-left */
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-image:
    linear-gradient(rgba(58,42,7,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(58,42,7,.05) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(58% 78% at 10% 94%, #000, transparent 62%);
  mask-image: radial-gradient(58% 78% at 10% 94%, #000, transparent 62%);
}
[data-hero="left"] .hero::before {
  background:
    radial-gradient(46% 54% at 20% 20%, rgba(240,169,74,.36), rgba(240,169,74,0) 62%),
    radial-gradient(38% 48% at 2% 58%, rgba(232,93,40,.17), transparent 64%),
    radial-gradient(54% 42% at 44% -4%, rgba(245,222,179,.20), transparent 72%);
}
.hero__grid {
  display: grid; grid-template-columns: 1.04fr .96fr; gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.hero__copy { max-width: 560px; }
.hero h1 {
  font-family: var(--font-serif); font-weight: 400; letter-spacing: -.018em;
  font-size: clamp(40px, 5.4vw, 68px); line-height: 1.02; margin: 0 0 22px; color: var(--fg-1);
  text-wrap: balance;
}
.hero h1 .accent { color: #C2410C; font-style: italic; }
.hero__sub { font-size: 20px; line-height: 1.55; color: var(--fg-2); margin: 0 0 24px; max-width: 30ch; }
.hero__benefits { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 0 0 30px; padding: 0; list-style: none; }
.hero__benefits li { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 600; color: var(--fg-1); }
.hero__benefits svg { width: 18px; height: 18px; }
.hero__cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.hero__cta .ig-btn--solid { font-size: 16px; padding: 15px 30px; }
.hero__link { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; color: var(--fg-1); font-size: 15px; }
.hero__link svg { width: 17px; height: 17px; transition: transform .25s var(--dg-ease); }
.hero__link:hover svg { transform: translateX(4px); }
.hero__trust { display: flex; align-items: center; gap: 16px; margin-top: 30px; color: var(--fg-3); font-size: 14px; }
.hero__trust .stars { color: var(--gold-bright); letter-spacing: 1px; font-size: 15px; }
.hero__trust b { color: var(--fg-1); }
.hero__trust .sep { width: 1px; height: 26px; background: var(--border-strong); }

/* hero right: composed stage (gold render behind, widget in front) */
.hero__stage { position: relative; }
.hero__render {
  width: 100%; height: 260px; border-radius: var(--radius-5);
  margin-left: auto; display: block;
}
.hero__render-wrap {
  position: relative; z-index: 0; width: 84%; margin: -64px auto 0;
}
.hero__render-wrap::after {  /* soft gold glow */
  content: ""; position: absolute; inset: -8% -6% -14% 6%; z-index: -1;
  background: radial-gradient(60% 60% at 70% 30%, rgba(240,169,74,.28), transparent 70%);
  filter: blur(8px);
}
.buy-widget {
  position: relative; z-index: 2; margin: 0 auto; width: min(440px, 100%);
  background: linear-gradient(158deg, rgba(255,255,255,.84), rgba(255,255,255,.62));
  border: 1px solid rgba(255,255,255,.72); border-radius: var(--radius-5);
  box-shadow: 0 34px 78px -30px rgba(58,42,7,.52), 0 3px 12px -5px rgba(58,42,7,.14), inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter: blur(24px) saturate(1.35); -webkit-backdrop-filter: blur(24px) saturate(1.35);
  padding: 24px;
}

/* hero floating glass chips + callout */
.hero__chip {
  position: absolute; z-index: 5; display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; color: var(--fg-1); white-space: nowrap;
  background: rgba(255,255,255,.58); border: 1px solid rgba(255,255,255,.85);
  border-radius: 999px; padding: 9px 15px;
  box-shadow: 0 16px 38px -18px rgba(58,42,7,.45), inset 0 1px 0 rgba(255,255,255,.8);
  backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
}
.hero__chip svg { width: 15px; height: 15px; color: var(--orange-600); }
.hero__chip-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal-500); }
.hero__chip--live { top: -40px; left: -12px; }
.hero__chip--insured { top: 96px; right: -24px; }
.hero__note {
  position: absolute; z-index: 5; bottom: 24px; right: -14px; max-width: 244px;
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 12.5px; line-height: 1.45; font-weight: 600; color: var(--fg-2);
  background: rgba(255,255,255,.6); border: 1px solid rgba(255,255,255,.85);
  border-radius: 16px; padding: 13px 15px;
  box-shadow: 0 20px 44px -20px rgba(58,42,7,.5), inset 0 1px 0 rgba(255,255,255,.8);
  backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
}
.hero__note svg { width: 16px; height: 16px; color: var(--orange-600); flex: none; margin-top: 1px; }
.hero__note b { color: var(--fg-1); font-weight: 800; }
@media (prefers-reduced-motion: no-preference) {
  .hero__chip-dot { animation: ph-pulse 2.4s var(--dg-ease) infinite; }
}

/* hero layout variants (data-hero) */
[data-hero="left"] .hero__grid { grid-template-columns: .96fr 1.04fr; }
[data-hero="left"] .hero__copy { order: 2; }
[data-hero="left"] .hero__stage { order: 1; }
[data-hero="left"] .hero__render-wrap { margin: -64px 0 0 auto; }
[data-hero="left"] .hero__render { margin-left: 0; }
[data-hero="center"] .hero__grid { grid-template-columns: 1fr; text-align: center; gap: 40px; }
[data-hero="center"] .hero__copy { max-width: 720px; margin: 0 auto; }
[data-hero="center"] .hero__sub { max-width: 46ch; margin-inline: auto; }
[data-hero="center"] .hero__benefits,
[data-hero="center"] .hero__cta,
[data-hero="center"] .hero__trust { justify-content: center; }
[data-hero="center"] .hero__render-wrap { margin-inline: auto; width: min(560px, 100%); }
[data-hero="center"] .buy-widget { margin-top: 0; }

/* ============================================================ BUY WIDGET */
.bw__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.bw__title { font-size: 17px; font-weight: 800; color: var(--fg-1); margin: 0; }
.bw__price { display: inline-flex; align-items: center; gap: 7px; background: var(--ivory); border: 1px solid var(--sand-2); border-radius: var(--radius-round); padding: 5px 11px; white-space: nowrap; flex: none; }
.bw__livedot { width: 6px; height: 6px; border-radius: 50%; background: var(--teal-500); box-shadow: 0 0 0 0 rgba(20,184,166,.45); }
.bw__price-v { font-size: 13px; font-weight: 800; color: var(--fg-1); letter-spacing: -.01em; }
.bw__price-v small { font-size: 10.5px; font-weight: 600; color: var(--fg-3); margin-left: 1px; }
.bw__price-chg { display: inline-flex; align-items: center; gap: 1px; font-size: 11px; font-weight: 700; color: var(--teal-600); }
.bw__price-chg svg { width: 12px; height: 12px; }
@media (prefers-reduced-motion: no-preference) {
  .bw__livedot { animation: ph-pulse 2.4s var(--dg-ease) infinite; }
}
.bw__toggle { display: inline-flex; background: var(--stone-100); border-radius: var(--radius-button); padding: 4px; gap: 4px; margin-bottom: 18px; }
.bw__toggle button {
  font-family: var(--font-sans); border: 0; cursor: pointer; background: transparent;
  font-size: 13px; font-weight: 700; color: var(--fg-3); padding: 8px 16px; border-radius: 6px;
  transition: background .2s ease, color .2s ease;
}
.bw__toggle button.on { background: #fff; color: var(--fg-1); box-shadow: var(--shadow-1); }
.bw__field { position: relative; margin-bottom: 8px; }
.bw__prefix { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); font-size: 28px; font-weight: 700; color: var(--fg-2); pointer-events: none; }
.bw__input {
  width: 100%; font-family: var(--font-sans); font-size: 32px; font-weight: 800; color: var(--fg-1);
  border: 1.5px solid var(--border-strong); border-radius: var(--radius-button);
  padding: 14px 16px 14px 40px; outline: none; transition: border-color .15s ease, box-shadow .15s ease;
}
.bw__input.unit-g { padding-left: 16px; }
.bw__input:focus { border-color: var(--orange-600); box-shadow: 0 0 0 3px rgba(234,88,12,.14); }
.bw__suffix { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 17px; font-weight: 700; color: var(--fg-3); pointer-events: none; }
.bw__minnote { font-size: 12.5px; color: var(--fg-3); margin: 0 0 16px; min-height: 18px; }
.bw__minnote.err { color: var(--red-600); font-weight: 600; }
.bw__chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 20px; }
.bw__chip {
  font-family: var(--font-sans); font-size: 13px; font-weight: 700; color: var(--fg-2);
  background: var(--stone-50); border: 1px solid var(--border); border-radius: var(--radius-button);
  padding: 9px 4px; cursor: pointer; transition: all .18s ease;
}
.bw__chip:hover { border-color: var(--border-strong); color: var(--fg-1); }
.bw__chip.on { background: var(--orange-50); border-color: var(--orange-300); color: var(--orange-700); }
.bw__chip--top { position: relative; }
.bw__chip-tag {
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
  font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--orange-700); background: var(--orange-100); border: 1px solid var(--orange-200);
  border-radius: 999px; padding: 1px 7px; white-space: nowrap; line-height: 1.4;
  pointer-events: none;
}
.bw__get {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  background: var(--ivory); border: 1px solid var(--sand-2); border-radius: var(--radius-button);
  padding: 14px 16px; margin-bottom: 8px;
}
.bw__get .lbl { font-size: 13px; font-weight: 600; color: var(--fg-3); }
.bw__get .val { font-family: var(--font-serif); font-weight: 500; font-size: 26px; color: var(--fg-1); letter-spacing: -.01em; }
.bw__get .val .u { font-size: 15px; font-family: var(--font-sans); font-weight: 700; color: var(--fg-3); margin-left: 2px; }
.bw__helper { font-family: var(--font-sans); font-size: 12px; font-weight: 400; color: var(--fg-3); margin: 0 0 16px; }
.bw__trust { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0 0 18px; padding: 0; list-style: none; }
.bw__trust li { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--fg-2); }
.bw__trust svg { width: 15px; height: 15px; }
.buy-widget .ig-btn--solid { width: 100%; font-size: 16px; padding: 15px; }
.bw__disclosure { font-family: var(--font-sans); font-size: 11.5px; line-height: 1.5; font-weight: 400; color: var(--fg-3); margin: 14px 0 0; text-align: center; }
.bw__disclosure a { color: var(--orange-700); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

.bw-breakdown { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 24px; }
.bw-breakdown__backdrop { position: absolute; inset: 0; border: 0; background: rgba(12,10,9,.48); cursor: pointer; }
.bw-breakdown__sheet {
  position: relative; z-index: 1; width: min(430px, 100%); background: #fff; border-radius: 18px;
  box-shadow: 0 28px 80px rgba(12,10,9,.28); padding: 24px;
}
.bw-breakdown__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.bw-breakdown__eyebrow { margin: 0 0 4px; font-family: var(--font-sans); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--orange-700); }
.bw-breakdown__head h3 { margin: 0; font-family: var(--font-sans); font-size: 19px; line-height: 1.25; font-weight: 800; color: var(--fg-1); }
.bw-breakdown__close { width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 50%; background: #fff; color: var(--fg-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.bw-breakdown__live {
  background: var(--ivory); border: 1px solid var(--sand-2); border-radius: 12px; padding: 18px 16px; margin-bottom: 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.bw-breakdown__live span { font-family: var(--font-sans); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-2); }
.bw-breakdown__live b { font-family: var(--font-sans); font-size: 22px; line-height: 1.1; font-weight: 800; color: var(--fg-1); }
.bw-breakdown__rows { margin: 0; display: flex; flex-direction: column; }
.bw-breakdown__rows div { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 13px 0; border-bottom: 1px solid var(--border); }
.bw-breakdown__rows dt { font-family: var(--font-sans); font-size: 13px; line-height: 1.4; font-weight: 600; color: var(--fg-2); text-transform: uppercase; letter-spacing: .03em; }
.bw-breakdown__rows dd { margin: 0; font-family: var(--font-sans); font-size: 15px; line-height: 1.3; font-weight: 700; color: var(--fg-1); text-align: right; }
.bw-breakdown__rows .total { border-bottom: 0; padding-top: 16px; }
.bw-breakdown__rows .total dt { color: var(--fg-1); font-weight: 800; }
.bw-breakdown__rows .total dd { font-size: 18px; font-weight: 800; }
.bw-breakdown__cta { width: 100%; margin-top: 18px; }

@media (max-width: 640px) {
  .bw-breakdown { align-items: flex-end; padding: 0; }
  .bw-breakdown__sheet { width: 100%; max-height: 88vh; overflow-y: auto; border-radius: 22px 22px 0 0; padding: 22px 20px calc(22px + env(safe-area-inset-bottom)); }
}

/* ============================================================ TRUST BAR */
.trustbar { background: var(--ivory); border-block: 1px solid var(--sand-2); padding: 26px 0; }
.trustbar__in { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.trustbar__item { display: flex; align-items: center; gap: 11px; }
.trustbar__item svg { width: 22px; height: 22px; color: var(--gold-deep); flex: none; }
.trustbar__item span { font-size: 14px; font-weight: 700; color: var(--fg-1); white-space: nowrap; }
.trustbar__item small { display: block; font-size: 11.5px; font-weight: 600; color: var(--fg-3); letter-spacing: .02em; }
@media (max-width: 760px) {
  .trustbar__in { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
}

/* ============================================================ WHY (bento) */
.why { padding: clamp(64px, 8vw, 104px) 0; }
.why__head { max-width: 900px; margin: 0 0 44px; }
.why__head .dg-lede { max-width: 86ch; text-wrap: balance; }
@media (min-width: 901px) {
  .why__head { max-width: 1000px; }
  .why__head h2 { white-space: nowrap; }
}
.why__bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.feat { border-radius: var(--radius-5); padding: 30px; border: 1px solid var(--border); background: #fff; transition: box-shadow .32s var(--dg-ease), transform .32s var(--dg-ease); }
.feat:hover { box-shadow: var(--shadow-4); transform: translateY(-3px); }
.feat__icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--orange-50); color: var(--orange-600); margin-bottom: 18px; }
.feat__icon svg { width: 22px; height: 22px; }
.feat h3 { font-family: var(--font-serif); font-weight: 500; font-size: 23px; line-height: 1.18; letter-spacing: -.005em; margin: 0 0 9px; color: var(--fg-1); }
.feat p { font-size: 15px; line-height: 1.55; color: var(--fg-2); margin: 0; }
.feat__render { width: 100%; height: 180px; border-radius: var(--radius-4); margin-top: 20px; }
.feat:not(.feat--lead) .feat__render {
  border: 0; overflow: hidden;
  background: var(--sand);
  --is-placeholder-color: var(--fg-3);
  color: var(--fg-3);
}

/* lead tile spans full width, dark, horizontal */
.feat--lead {
  grid-column: 1 / -1; background: var(--ink); border-color: var(--dark-border);
  display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: center; padding: 0; overflow: hidden;
}
.feat--lead .feat__body { padding: 40px clamp(24px, 4vw, 52px); }
.feat--lead .feat__icon { background: rgba(239,169,89,.14); color: var(--gold-on-dark); }
.feat--lead h3 { color: var(--fg-on-dark-1); font-size: clamp(26px, 3vw, 34px); }
.feat--lead p { color: var(--fg-on-dark-2); font-size: 16px; max-width: 42ch; }
.feat--lead .seal { margin-top: 22px; }
.feat--lead .feat__render { height: 100%; min-height: 300px; margin: 0; border-radius: 0; border: 0; }
.feat--lead:hover { transform: none; box-shadow: none; }
@media (max-width: 900px) {
  .why__bento { grid-template-columns: 1fr; }
  .feat--lead { grid-template-columns: 1fr; }
  .feat--lead .feat__render { min-height: 220px; order: -1; }
}

/* ============================================================ HOW IT WORKS (timeline) */
.how { padding: clamp(64px, 8vw, 104px) 0; background: var(--ivory); border-block: 1px solid var(--sand-2); }
.how__head { text-align: center; max-width: 640px; margin: 0 auto 56px; }
.how__head .dg-lede { margin-inline: auto; }
.how__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; position: relative; }
.step { position: relative; text-align: center; }
.step__num {
  width: 56px; height: 56px; margin: 0 auto 22px; border-radius: 50%;
  background: #fff; border: 1.5px solid var(--orange-200); color: var(--orange-600);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-size: 24px; font-weight: 500; position: relative; z-index: 1;
}
.step__render { width: 100%; height: 250px; border-radius: 16px; border: 0; overflow: hidden; margin-bottom: 20px; background: var(--sand); --is-placeholder-color: var(--fg-3); color: var(--fg-3); }
.step h3 { font-size: 19px; font-weight: 800; margin: 0 0 8px; color: var(--fg-1); }
.step p { font-size: 14.5px; line-height: 1.55; color: var(--fg-2); margin: 0; max-width: 30ch; margin-inline: auto; }
@media (max-width: 820px) {
  .how__steps { grid-template-columns: 1fr; gap: 40px; }
  .how__steps::before { display: none; }
}

/* ============================================================ DAILY SIP (dark flagship — gold accumulation tool) */
.sip { background: var(--dark-bg); color: var(--fg-on-dark-1); padding: clamp(72px, 9vw, 120px) 0; overflow: clip; }
.sip .dg-eyebrow { color: var(--gold-on-dark); }
.sip__head { max-width: 700px; margin: 0 0 clamp(34px, 4vw, 52px); }
.sip h2 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(34px, 4.6vw, 56px); line-height: 1.04; letter-spacing: -.015em; margin: 0 0 20px; color: var(--fg-on-dark-1); text-wrap: balance; }
.sip h2 .accent { color: var(--gold-on-dark); }
.sip__lede { font-size: 18px; line-height: 1.6; color: var(--fg-on-dark-2); margin: 0; max-width: 60ch; }

/* calculator shell */
.sipx { display: grid; grid-template-columns: 1.04fr .96fr; gap: 22px; align-items: stretch; }
.sipx__panel { background: var(--dark-surface); border: 1px solid var(--dark-border); border-radius: var(--radius-5); padding: clamp(24px, 3vw, 38px); }

/* --- control + outcome --- */
.sipx__save { display: flex; align-items: baseline; gap: 14px; }
.sipx__save-lbl { font-size: 14px; font-weight: 600; color: var(--fg-on-dark-2); }
.sipx__amt { font-family: var(--font-serif); font-weight: 500; color: var(--stone-50); line-height: 1; letter-spacing: -.01em; display: inline-flex; align-items: baseline; }
.sipx__amt .cur { font-size: 26px; margin-right: 2px; }
.sipx__day { font-family: inherit; font-size: 30px; font-weight: 500; letter-spacing: -.01em; }
.sipx__amt .per { font-family: var(--font-sans); font-size: 16px; font-weight: 700; color: var(--fg-on-dark-3); margin-left: 8px; }
.sipx__control input[type=range] { width: 100%; margin: 22px 0 6px; accent-color: var(--orange-500); height: 4px; cursor: pointer; }
.sipx__scale { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--fg-on-dark-3); }
.sipx__tabs { display: inline-flex; background: rgba(0,0,0,.24); border: 1px solid var(--dark-border); border-radius: var(--radius-button); padding: 4px; gap: 4px; margin-top: 24px; }
.sipx__tabs button { font-family: var(--font-sans); border: 0; cursor: pointer; background: transparent; font-size: 13px; font-weight: 700; color: var(--fg-on-dark-2); padding: 9px 18px; border-radius: 6px; transition: background .24s ease, color .24s ease; }
.sipx__tabs button:hover { color: var(--fg-on-dark-1); }
.sipx__tabs button.on { background: rgba(247,239,230,.12); color: var(--fg-on-dark-1); box-shadow: inset 0 0 0 1px rgba(247,239,230,.16); }
.sipx__outcome { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--dark-border); }
.sipx__o-lead { font-size: 14px; color: var(--fg-on-dark-2); margin: 0; }
.sipx__invest { font-family: var(--font-serif); font-weight: 500; font-size: 30px; color: var(--fg-on-dark-1); margin: 4px 0 0; letter-spacing: -.01em; }
.sipx__arrow { color: var(--fg-on-dark-3); margin: 8px 0 6px; }
.sipx__arrow svg { width: 18px; height: 18px; }
.sipx__gold { font-family: var(--font-serif); font-weight: 400; font-size: clamp(42px, 5.6vw, 60px); line-height: .92; color: var(--stone-50); margin: 2px 0 0; letter-spacing: -.02em; display: flex; align-items: baseline; gap: 4px; }
.sipx__grams { font-family: inherit; font-size: 52px; font-weight: inherit; letter-spacing: inherit; }
.sipx__gold .u { font-size: .4em; font-family: var(--font-sans); font-weight: 800; }
.sipx__gold-sub { font-size: 15px; font-weight: 700; color: var(--fg-on-dark-1); margin: 8px 0 0; }
.sipx__based { font-size: 12.5px; color: var(--fg-on-dark-3); margin: 10px 0 0; }
.sipx__cta { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; }
.sipx__cta .ig-btn { font-size: 15px; }
.sipx__trust { font-size: 11.5px; line-height: 1.55; color: var(--fg-on-dark-3); margin: 18px 0 0; max-width: 54ch; }

/* --- gold accumulation chart with milestone goals --- */
.sipx__viz { display: flex; flex-direction: column; background: linear-gradient(180deg, #3a2b1b 0%, #241b14 100%); }
.goalchart { display: flex; flex-direction: column; height: 100%; }
.goalchart__head { margin-bottom: 26px; }
.goalchart__cap { font-size: 15px; font-weight: 800; color: var(--fg-on-dark-1); }
.goalchart__sub { font-size: 12.5px; line-height: 1.5; color: var(--fg-on-dark-3); margin-top: 5px; }
.goalchart__sub span { color: var(--gold-on-dark); font-weight: 700; }

.goalchart__plot { position: relative; flex: 1; min-height: 300px; }
.goalchart__bars { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 3px; }
.gcbar { flex: 1; min-height: 3px; border-radius: 3px 3px 0 0; background: rgba(255,255,255,.055); transition: background .45s var(--dg-ease); }
.gcbar.past { background: linear-gradient(180deg, var(--gold-bright), var(--gold-deep)); box-shadow: 0 0 10px rgba(240,169,74,.16); }

/* "you are here at horizon" sweep line */
.goalchart__now { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1.5px dashed rgba(244,244,247,.32); transition: left .5s var(--dg-ease); z-index: 3; pointer-events: none; }
.goalchart__now-lbl { position: absolute; top: -9px; left: 0; transform: translateX(-50%); font-size: 10px; font-weight: 800; letter-spacing: .03em; color: var(--fg-on-dark-2); background: var(--dark-bg-2); border: 1px solid var(--dark-border-strong); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }

/* goal markers riding the accumulation ramp */
.goalchart__markers { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.gmark { position: absolute; transform: translateX(-50%); display: flex; flex-direction: column-reverse; align-items: center; gap: 5px; pointer-events: auto; }
.gmark__chip { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--dark-surface); border: 1.5px solid var(--dark-border-strong); color: var(--fg-on-dark-3); box-shadow: 0 0 0 3.5px rgba(13,15,19,.82), 0 4px 12px rgba(0,0,0,.5); transition: background .4s var(--dg-ease), border-color .4s var(--dg-ease), color .4s var(--dg-ease), transform .4s var(--dg-ease); }
.gmark__chip svg { width: 16px; height: 16px; }
.gmark__info { display: flex; flex-direction: column; align-items: center; line-height: 1.18; text-align: center; }
.gmark__t { font-size: 11px; font-weight: 700; color: var(--fg-on-dark-2); white-space: nowrap; }
.gmark__note { font-size: 9.5px; font-weight: 600; color: var(--fg-on-dark-3); white-space: nowrap; }
.gmark.reached .gmark__chip { background: var(--grad-gold-rich); border-color: rgba(0,0,0,.3); color: #3A2A07; transform: scale(1.06); box-shadow: 0 0 0 3.5px rgba(13,15,19,.82), 0 6px 16px rgba(240,169,74,.42); }
.gmark.reached .gmark__t { color: var(--gold-on-dark); }
.gmark.reached .gmark__note { color: var(--gold-on-dark); }

.goalchart__axis { display: flex; justify-content: space-between; font-size: 11px; font-weight: 600; color: var(--fg-on-dark-3); margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--dark-border); }
.goalchart__note { font-size: 11px; line-height: 1.5; color: var(--fg-on-dark-3); margin: 12px 0 0; }
.goalchart__note span { color: var(--fg-on-dark-2); font-weight: 700; }

/* SIP layout variant (data-sip) */
[data-sip="stacked"] .sipx { grid-template-columns: 1fr; max-width: 720px; margin: 0 auto; }
[data-sip="stacked"] .goalchart__plot { min-height: 260px; }

@media (max-width: 900px) {
  .sipx { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .sipx__panel { padding: 22px 20px; }
  .sipx__save { flex-wrap: wrap; gap: 8px; }
  .sipx__amt .sipx__day { font-size: 30px !important; }
  .sipx__tabs { display: grid; grid-template-columns: repeat(5, 1fr); width: 100%; gap: 2px; padding: 3px; }
  .sipx__tabs button { padding: 9px 4px; font-size: 11.5px; text-align: center; }
  .sipx__invest { font-size: 26px; }
  .sipx__gold .sipx__grams { font-size: 44px !important; }
  .sipx__cta { flex-direction: column; align-items: stretch; }
  .sipx__cta .ig-btn { width: 100%; justify-content: center; }
  .goalchart__sub { font-size: 12px; }
}

/* ============================================================ STATS BAND */
.stats { padding: clamp(56px, 7vw, 88px) 0; text-align: center; background: var(--bg-white); }
.stats__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.stat { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 92px; padding: 0 clamp(18px, 4vw, 56px); }
.stat .num {
  font-family: var(--font-serif) !important;
  font-weight: 400 !important;
  font-size: clamp(38px, 5vw, 60px) !important;
  line-height: 1 !important;
  letter-spacing: -.02em !important;
  color: #C2410C !important;
  white-space: nowrap;
}
.stat .num span,
.stat .num .accent { color: inherit !important; font: inherit; letter-spacing: inherit; }
.stat .lbl { font-family: var(--font-sans); font-size: 13px; line-height: 1.35; font-weight: 500; color: var(--fg-3); margin-top: 10px; }
.stat + .stat { border-left: 1px solid rgba(214, 211, 209, .8); }
@media (max-width: 760px) {
  .stats__grid { grid-template-columns: 1fr; gap: 36px; }
  .stat + .stat { border-left: 0; border-top: 1px solid var(--border); padding-top: 36px; }
}

/* ============================================================ FINAL CTA */
.finalcta { background: var(--dark-bg-2); color: var(--fg-on-dark-1); padding: clamp(72px, 9vw, 120px) 0; overflow: clip; }
.finalcta__in { position: relative; text-align: center; max-width: 760px; margin: 0 auto; }
.finalcta h2 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(36px, 5.2vw, 64px); line-height: 1.03; letter-spacing: -.018em; margin: 0 0 24px; color: var(--gold-on-dark); text-wrap: balance; }
.finalcta__copy { font-size: 19px; line-height: 1.5; color: var(--fg-on-dark-2); margin: 0 0 36px; }
.finalcta__copy b { color: var(--fg-on-dark-1); font-weight: 700; }
.finalcta__btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.finalcta__btns .ig-btn--solid { font-size: 16px; padding: 15px 32px; }
.finalcta__btns .ig-btn--on-dark { background: var(--fg-on-dark-1); color: var(--charcoal); border-color: var(--fg-on-dark-1); font-size: 16px; padding: 15px 32px; }
.finalcta__glow { position: absolute; inset: -30% 20% 40%; z-index: 0; background: radial-gradient(50% 50% at 50% 50%, rgba(240,169,74,.18), transparent 70%); filter: blur(20px); pointer-events: none; }
.finalcta__in > * { position: relative; z-index: 1; }

/* ============================================================ FOOTER */
.dg-footer { background: var(--ink); color: var(--stone-300); padding: 60px 0 28px; }
.dg-footer__cols { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 32px; }
.dg-footer__logo { height: 26px; margin-bottom: 16px; }
.dg-footer__blurb { font-size: 13.5px; line-height: 1.6; color: var(--stone-400); max-width: 280px; margin: 0; }
.dg-footer h4 { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--stone-500); margin: 0 0 16px; }
.dg-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; }
.dg-footer ul a { font-size: 14px; color: var(--stone-300); transition: color .15s; }
.dg-footer ul a:hover { color: var(--orange-400); }
.dg-footer__rule { border: 0; border-top: 1px solid rgba(255,255,255,.1); margin: 40px 0 20px; }
.dg-footer__legal { font-size: 12px; line-height: 1.7; color: var(--stone-500); }
.dg-footer__legal p { margin: 0 0 8px; max-width: 80ch; }
@media (max-width: 820px) { .dg-footer__cols { grid-template-columns: 1fr 1fr; gap: 28px; } }
@media (max-width: 520px) { .dg-footer__cols { grid-template-columns: 1fr; } }

/* ============================================================ COMPARISON (Archetype B) */
.compare { padding: clamp(64px, 8vw, 104px) 0; }
.compare__head { max-width: 760px; margin: 0 auto 48px; text-align: center; }
.compare__head .dg-lede { margin-inline: auto; }
.compare__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--sand-2); border-radius: var(--radius-5); }
.compare table.ig-compare { min-width: 760px; border: 0; border-radius: 0; box-shadow: none; }
.compare .ig-compare thead th { padding: 22px 24px; vertical-align: bottom; border-bottom: 2px solid var(--sand-2); }
.compare .ig-compare thead th:first-child { background: #fff; }
.compare .ig-compare th, .compare .ig-compare td { border-bottom: 1px solid var(--sand-2); border-right: 1px solid var(--sand-2); }
.compare .ig-compare th:last-child, .compare .ig-compare td:last-child { border-right: 0; }
.compare .col { display: flex; flex-direction: column; gap: 3px; }
.compare .col b { font-family: var(--font-sans); font-size: 15.5px; font-weight: 800; letter-spacing: 0; text-transform: none; color: var(--fg-1); }
.compare .col small { font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--fg-3); }

/* highlighted indiagold column */
.compare .ig-compare thead th.ig-compare__us { background: var(--orange-600); color: #fff; }
.compare .ig-compare__us .col b { color: #fff; }
.compare .ig-compare__us .col small { color: rgba(255,255,255,.85); }
.compare .ig-compare thead th.ig-compare__us .tag {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  background: rgba(255,255,255,.2); color: #fff; padding: 4px 10px; border-radius: 999px; margin-bottom: 9px;
}
.compare .ig-compare td.ig-compare__us { background: var(--orange-50); }
.compare .ig-compare .rl { font-weight: 700; color: var(--fg-1); font-size: 14px; }
.compare .ig-compare td { color: var(--fg-2); font-size: 14.5px; line-height: 1.4; }
.compare .ig-compare td.ig-compare__us { color: var(--fg-1); font-weight: 700; }
.compare .ig-compare .yes { display: inline-flex; align-items: center; gap: 7px; color: var(--teal-600); font-weight: 700; }
.compare .ig-compare td.ig-compare__us .yes { color: var(--orange-700); }
.compare .ig-compare .yes svg { width: 16px; height: 16px; flex: none; }
.compare .ig-compare .meh { display: inline-flex; align-items: center; gap: 7px; color: var(--fg-3); }
.compare .ig-compare .meh svg { width: 15px; height: 15px; flex: none; color: var(--stone-400); }
.compare__note { text-align: center; font-size: 12.5px; line-height: 1.6; color: var(--fg-3); margin: 22px auto 0; max-width: 72ch; }
@media (max-width: 760px) { .compare__head { margin-bottom: 32px; } }

/* ============================================================ FAQ (Archetype F) */
.faq { padding: clamp(64px, 8vw, 104px) 0; background: var(--ivory); border-top: 1px solid var(--sand-2); }
.faq__grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.faq__intro { position: sticky; top: 100px; }
.faq__intro .dg-lede { margin-top: 18px; max-width: 38ch; }
.faq__support { margin-top: 28px; font-family: var(--font-sans); font-size: 14.5px; font-weight: 400; line-height: 1.6; color: var(--fg-2); }
.faq__support a { color: var(--orange-700); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.faq__list { display: flex; flex-direction: column; }
.faq__item { border-top: 1px solid var(--sand-2); }
.faq__item:last-child { border-bottom: 1px solid var(--sand-2); }
.faq__item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 4px; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__q { font-family: var(--font-sans); font-size: clamp(17px, 1.5vw, 20px); font-weight: 700; color: var(--fg-1); }
.faq__ico { position: relative; width: 22px; height: 22px; flex: none; }
.faq__ico::before, .faq__ico::after { content: ""; position: absolute; background: var(--orange-600); border-radius: 2px; transition: transform .32s var(--dg-ease); }
.faq__ico::before { left: 2px; right: 2px; top: 10px; height: 2px; }
.faq__ico::after { top: 2px; bottom: 2px; left: 10px; width: 2px; }
.faq__item[open] .faq__ico::after { transform: scaleY(0); }
.faq__a p { margin: 0 0 26px; font-family: var(--font-sans); font-size: 16px; font-weight: 400; line-height: 1.62; color: var(--fg-2); max-width: 64ch; }
.faq__a p a { color: var(--orange-700); font-weight: 600; }
@media (prefers-reduced-motion: no-preference) {
  .faq__item[open] .faq__a p { animation: faq-in .42s var(--dg-ease); }
}
@keyframes faq-in { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
@media (max-width: 820px) {
  .faq__grid { grid-template-columns: 1fr; gap: 6px; }
  .faq__intro { position: static; margin-bottom: 16px; }
  .faq__intro .dg-lede { max-width: none; }
}

/* ============================================================ APP DOWNLOAD (product showcase) */
.appdl { padding: clamp(64px, 8vw, 112px) 0; background: var(--bg-white); overflow: clip; }
.appdl__grid { display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(40px, 6vw, 88px); align-items: start; }
[data-app="right"] .appdl__grid { grid-template-columns: 1.08fr .92fr; }
[data-app="right"] .appdl__showcase { order: 2; }
[data-app="right"] .appdl__copy { order: 1; }

/* --- left: showcase --- */
.appdl__showcase { display: flex; flex-direction: column; align-items: flex-end; gap: clamp(28px, 4vw, 44px); }
.appdl__phonewrap { position: relative; }
.appdl__phonewrap::after {
  content: ""; position: absolute; inset: -12% -16% -6%; z-index: -1;
  background: radial-gradient(54% 46% at 50% 42%, rgba(240,169,74,.30), transparent 70%);
  filter: blur(14px);
}

/* phone frame */
.phone {
  position: relative; width: 336px; padding: 11px;
  background: linear-gradient(155deg, #2a2e36 0%, #0d0f13 52%, #1c1f26 100%);
  border-radius: 50px; box-shadow: var(--shadow-6), inset 0 1px 1px rgba(255,255,255,.18), inset 0 0 0 1.5px rgba(0,0,0,.5);
}
.phone__island { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 96px; height: 26px; background: #000; border-radius: 999px; z-index: 5; }
.phone__home { display: block; width: 110px; height: 5px; border-radius: 999px; background: var(--stone-400); margin: 7px auto 3px; }
.phone__screen {
  position: relative; background: var(--ivory); border-radius: 40px; overflow: hidden;
  padding: 0 16px; color: var(--fg-1); font-family: var(--font-sans);
}
/* premium glass reflection over the screen */
.phone::before {
  content: ""; position: absolute; inset: 11px; border-radius: 40px; z-index: 6; pointer-events: none;
  background: linear-gradient(125deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 16%, rgba(255,255,255,0) 84%, rgba(255,255,255,.22) 100%);
}

/* status bar */
.ph-status { display: flex; align-items: center; justify-content: space-between; padding: 13px 6px 7px; }
.ph-time { font-size: 13px; font-weight: 700; color: var(--fg-1); letter-spacing: .02em; }
.ph-sys { display: flex; align-items: center; gap: 6px; color: var(--fg-1); }
.ph-sys svg { width: 15px; height: 15px; }
.ph-batt { width: 22px; height: 11px; border-radius: 3px; border: 1.4px solid var(--stone-400); position: relative; }
.ph-batt::before { content: ""; position: absolute; inset: 1.5px; width: 70%; background: var(--fg-1); border-radius: 1px; }
.ph-batt::after { content: ""; position: absolute; right: -3px; top: 3px; width: 2px; height: 4px; background: var(--stone-400); border-radius: 0 1px 1px 0; }

/* app top bar */
.ph-top { display: flex; align-items: center; justify-content: space-between; padding: 4px 2px 12px; }
.ph-logo { height: 19px; width: auto; }
.ph-top__r { display: flex; align-items: center; gap: 12px; }
.ph-icbtn { position: relative; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--border); color: var(--fg-2); }
.ph-icbtn svg { width: 16px; height: 16px; }
.ph-dot-red { position: absolute; top: 7px; right: 8px; width: 6px; height: 6px; border-radius: 50%; background: #EF4444; border: 1.5px solid #fff; }
.ph-avatar { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; color: #3A2A07; background: var(--grad-gold-rich); }

/* portfolio hero card */
.ph-port { position: relative; background: linear-gradient(158deg, #FFF7EC 0%, #FCF2E2 100%); border: 1px solid var(--sand-2); border-radius: 18px; padding: 14px 15px 0; overflow: hidden; box-shadow: var(--shadow-1); }
.ph-port__top { display: flex; align-items: center; justify-content: space-between; }
.ph-label { font-size: 12px; font-weight: 600; color: var(--fg-3); letter-spacing: .01em; }
.ph-live { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; color: var(--teal-700); }
.ph-livedot { width: 6px; height: 6px; border-radius: 50%; background: var(--teal-500); box-shadow: 0 0 0 0 rgba(20,184,166,.5); }
.ph-port__val { font-family: var(--font-serif); font-weight: 500; font-size: 28px; letter-spacing: -.01em; color: var(--fg-1); margin: 4px 0 2px; line-height: 1; }
.ph-port__chg { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 700; color: var(--teal-600); }
.ph-port__chg svg { width: 13px; height: 13px; }
.ph-spark { display: block; width: calc(100% + 30px); margin: 6px -15px -1px; height: 36px; }
.ph-port__foot { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; margin-top: 2px; border-top: 1px solid var(--sand-2); }
.ph-hold { display: flex; flex-direction: column; gap: 2px; }
.ph-hold .k { font-size: 11px; font-weight: 600; color: var(--fg-3); }
.ph-hold .v { font-size: 16px; font-weight: 800; color: var(--fg-1); }
.ph-hold .v small { font-size: 11px; font-weight: 700; color: var(--fg-2); margin-left: 1px; }
.ph-purity { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; letter-spacing: .03em; color: var(--gold-deep); background: var(--gold-soft); border: 1px solid #F0D6A8; border-radius: 999px; padding: 5px 10px; }
.ph-purity svg { width: 12px; height: 12px; }

/* generic light row (SIP) */
.ph-row { display: flex; align-items: center; gap: 11px; background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 10px 12px; margin-top: 9px; box-shadow: var(--shadow-1); }
.ph-row__ic { width: 36px; height: 36px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex: none; }
.ph-row__ic svg { width: 17px; height: 17px; }
.ph-row__ic--gold { background: var(--gold-soft); color: var(--gold-deep); }
.ph-row__main { flex: 1; min-width: 0; }
.ph-row__t { display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 700; color: var(--fg-1); }
.ph-row__s { font-size: 11.5px; color: var(--fg-3); margin-top: 1px; }
.ph-row__r { text-align: right; }
.ph-amt { font-size: 15px; font-weight: 800; color: var(--fg-1); white-space: nowrap; }
.ph-amt small { font-size: 11px; font-weight: 600; color: var(--fg-3); }
.ph-pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--teal-500); box-shadow: 0 0 0 0 rgba(20,184,166,.5); }

/* goal progress */
.ph-goal { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 12px 13px 11px; margin-top: 9px; box-shadow: var(--shadow-1); }
.ph-goal__top { display: flex; align-items: center; gap: 11px; }
.ph-goal__ic { width: 36px; height: 36px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex: none; background: #FCE7F3; color: #DB2777; }
.ph-goal__ic svg { width: 17px; height: 17px; }
.ph-goal__id { flex: 1; min-width: 0; }
.ph-goal__t { font-size: 13.5px; font-weight: 700; color: var(--fg-1); }
.ph-goal__s { font-size: 11.5px; color: var(--fg-3); margin-top: 1px; }
.ph-goal__pct { font-family: var(--font-serif); font-weight: 500; font-size: 21px; color: var(--gold-deep); }
.ph-bar { height: 6px; border-radius: 999px; background: var(--stone-200); margin: 9px 0 7px; overflow: hidden; }
.ph-bar span { display: block; height: 100%; border-radius: 999px; background: var(--grad-gold-rich); }
.ph-goal__foot { font-size: 11px; font-weight: 600; color: var(--fg-3); }

/* quick actions */
.ph-qa { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 11px; }
.ph-qa button { font-family: var(--font-sans); display: flex; flex-direction: column; align-items: center; gap: 7px; background: transparent; border: 0; cursor: pointer; font-size: 10px; font-weight: 700; color: var(--fg-2); padding: 0; }
.ph-qa__ic { width: 42px; height: 42px; border-radius: 13px; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--border); color: var(--orange-600); box-shadow: var(--shadow-1); transition: background .2s ease; }
.ph-qa__ic svg { width: 19px; height: 19px; }
.ph-qa button:hover .ph-qa__ic { background: var(--orange-50); }

/* recent activity */
.ph-recent { margin-top: 12px; }
.ph-sec-h { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; font-weight: 700; color: var(--fg-2); margin-bottom: 9px; }
.ph-sec-h svg { width: 15px; height: 15px; color: var(--fg-3); }
.ph-act { display: flex; align-items: center; gap: 11px; background: #fff; border: 1px solid var(--border); border-radius: 13px; padding: 9px 11px; box-shadow: var(--shadow-1); }
.ph-act__ic { width: 36px; height: 36px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex: none; background: var(--gold-soft); color: var(--gold-deep); }
.ph-act__ic svg { width: 17px; height: 17px; }
.ph-act__main { flex: 1; min-width: 0; }
.ph-act__t { font-size: 13px; font-weight: 700; color: var(--fg-1); }
.ph-act__s { font-size: 11px; color: var(--fg-3); margin-top: 1px; }
.ph-act__r { text-align: right; }
.ph-act__g { font-size: 13px; font-weight: 800; color: var(--teal-600); }
.ph-act__sub { font-size: 11px; color: var(--fg-3); margin-top: 1px; }

/* live pulse animation */
@media (prefers-reduced-motion: no-preference) {
  .ph-livedot, .ph-pulse { animation: ph-pulse 2.4s var(--dg-ease) infinite; }
  .ph-spark__line { stroke-dasharray: 600; stroke-dashoffset: 600; }
  [data-reveal].in .ph-spark__line { animation: ph-draw 1.6s var(--dg-ease) .25s forwards; }
}
@keyframes ph-pulse { 0% { box-shadow: 0 0 0 0 rgba(20,184,166,.45); } 70% { box-shadow: 0 0 0 7px rgba(20,184,166,0); } 100% { box-shadow: 0 0 0 0 rgba(20,184,166,0); } }
@keyframes ph-draw { to { stroke-dashoffset: 0; } }

/* --- download tray --- */
.appdl__tray { position: relative; display: flex; align-items: center; gap: 22px; margin-top: 30px; background: #E3D8C2; border: 1px solid var(--sand-2); border-radius: var(--radius-5); padding: 0; box-shadow: var(--shadow-1); overflow: hidden; }
.appdl__tray::after { content: ""; position: absolute; inset: 0; background: rgba(227,216,194,.12); pointer-events: none; }
.appdl__qr-banner { display: block; width: 100%; height: auto; object-fit: contain; filter: saturate(.9) brightness(1.02) contrast(1.08); }
.appdl__qrbox { flex: none; }
.qr { position: relative; width: 92px; height: 92px; padding: 7px; background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-1); display: grid; grid-template-columns: repeat(var(--qr-n, 21), 1fr); grid-template-rows: repeat(var(--qr-n, 21), 1fr); gap: 0; }
.qr i.qm { background: var(--ink); border-radius: 1px; }
.qr__mark { position: absolute; inset: 0; margin: auto; width: 26px; height: 26px; border-radius: 7px; background: var(--grad-orange); display: flex; align-items: center; justify-content: center; color: #fff; box-shadow: 0 0 0 3px #fff; }
.qr__mark svg { width: 14px; height: 14px; }
.appdl__get { min-width: 0; }
.appdl__scan { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--fg-1); margin: 0 0 12px; }
.appdl__scan svg { width: 16px; height: 16px; color: var(--orange-600); }
.appdl__badges { display: flex; gap: 10px; flex-wrap: wrap; }
.storebadge { display: inline-flex; align-items: center; gap: 9px; background: var(--ink); color: #fff; border-radius: 10px; padding: 8px 14px; transition: background .2s ease, transform .12s ease; }
.storebadge:hover { background: #2e251d; }
.storebadge:active { transform: translateY(1px); }
.storebadge__glyph { width: 21px; height: 21px; flex: none; }
.storebadge__txt { display: flex; flex-direction: column; line-height: 1.1; }
.storebadge__txt small { font-size: 9px; font-weight: 600; letter-spacing: .02em; color: rgba(255,255,255,.72); }
.storebadge__txt b { font-size: 14px; font-weight: 800; letter-spacing: -.01em; }

/* --- right: copy --- */
.appdl__copy { max-width: 520px; }
.appdl__benefits { list-style: none; padding: 0; margin: 30px 0 0; display: flex; flex-direction: column; gap: 18px; }
.appdl__benefits li { display: flex; gap: 14px; align-items: flex-start; }
.appdl__bic { width: 42px; height: 42px; border-radius: 12px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--orange-50); color: var(--orange-600); }
.appdl__bic svg { width: 20px; height: 20px; }
.appdl__benefits b { display: block; font-size: 16px; font-weight: 800; color: var(--fg-1); margin-bottom: 2px; }
.appdl__benefits li > div > span { display: block; font-size: 14.5px; line-height: 1.5; color: var(--fg-2); max-width: 42ch; }
.appdl__ratings { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--border); }
.appdl__rating { display: flex; flex-direction: column; gap: 3px; }
.appdl__stars { color: var(--gold-bright); font-size: 13px; letter-spacing: 1px; }
.appdl__rmeta { font-size: 13px; color: var(--fg-3); font-weight: 600; }
.appdl__rmeta b { color: var(--fg-1); font-weight: 800; }
.appdl__rsep { width: 1px; height: 34px; background: var(--border-strong); }

/* --- goal stories: see GOAL STORIES section below --- */

@media (max-width: 960px) {
  .appdl__grid { grid-template-columns: 1fr; gap: 48px; justify-items: center; text-align: center; }
  .appdl__showcase { align-items: center; }
  [data-app="right"] .appdl__showcase, [data-app="right"] .appdl__copy { order: initial; }
  .appdl__copy { max-width: 600px; }
  .appdl__benefits { text-align: left; max-width: 420px; margin-inline: auto; }
  .appdl__benefits li > div > span { max-width: none; }
  .dg-eyebrow { justify-content: center; }
  .appdl__ratings { justify-content: center; }
}
@media (max-width: 720px) {
  .appdl__tray { flex-direction: column; text-align: center; }
  .appdl__scan { justify-content: center; }
  .appdl__badges { justify-content: center; }
}
@media (max-width: 480px) {
  .appdl__benefits { text-align: left; }
}

/* ============================================================ GOAL STORIES (Archetype E) — dark editorial carousel */
.goals { position: relative; background: var(--dark-bg-2); color: var(--fg-on-dark-1); padding: clamp(64px, 8vw, 108px) 0 clamp(56px, 7vw, 96px); overflow: hidden; }
.goals__glow { position: absolute; inset: 0 0 auto; height: 60%; background: radial-gradient(60% 80% at 80% 0%, rgba(240,169,74,.10), transparent 70%); pointer-events: none; }
.goals .dg-wrap { position: relative; z-index: 1; }
.goals__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: clamp(32px, 4vw, 48px); }
.goals .dg-eyebrow { color: var(--gold-on-dark); }
.goals .dg-h2 { color: var(--fg-on-dark-1); }
.goals .dg-h2 .accent { color: var(--gold-on-dark); font-style: italic; }
.goals__sub { font-size: 18px; line-height: 1.5; color: var(--fg-on-dark-2); margin: 18px 0 0; max-width: 52ch; }
.goals__nav { display: flex; gap: 12px; flex: none; }
.goals__arrow { width: 46px; height: 46px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--dark-border-strong); color: var(--fg-on-dark-2); cursor: pointer; transition: background .24s ease, border-color .24s ease, color .24s ease, opacity .24s ease; }
.goals__arrow svg { width: 19px; height: 19px; }
.goals__arrow:hover { background: rgba(244,244,247,.08); border-color: var(--fg-on-dark-2); color: var(--fg-on-dark-1); }
.goals__arrow:disabled { opacity: .32; cursor: default; }
.goals__arrow:disabled:hover { background: transparent; border-color: var(--dark-border-strong); color: var(--fg-on-dark-2); }

/* rail — bleeds to the right edge, aligns left with .dg-wrap content */
.goals__rail {
  position: relative; z-index: 1; display: flex; gap: 22px; overflow-x: auto;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 6px max(var(--dg-gut), calc((100% - var(--dg-maxw)) / 2)) 10px;
  scroll-padding-left: max(var(--dg-gut), calc((100% - var(--dg-maxw)) / 2));
  -ms-overflow-style: none; scrollbar-width: none;
}
.goals__rail::-webkit-scrollbar { display: none; }

.gcard { flex: none; width: clamp(290px, 30vw, 392px); scroll-snap-align: start; }
.gcard__media { position: relative; aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden; transition: transform .4s var(--dg-ease), box-shadow .4s var(--dg-ease); }
.gcard__img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 16px; }
.gcard__media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(58% 78% at 50% 64%, rgba(240,169,74,.16), transparent 70%); }
.gcard:hover .gcard__media { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(0,0,0,.5); }
.gcard__meta { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--fg-on-dark-3); margin: 18px 0 10px; }
.gcard__cat { color: var(--orange-400); font-weight: 700; }
.gcard__sep { color: var(--fg-on-dark-3); }
.gcard__title { font-family: var(--font-sans); font-weight: 800; font-size: 21px; line-height: 1.22; letter-spacing: -.01em; color: var(--fg-on-dark-1); margin: 0 0 9px; }
.gcard__excerpt { font-size: 14.5px; line-height: 1.55; color: var(--fg-on-dark-2); margin: 0; max-width: 38ch; }

/* trailing CTA card */
.gcard--cta { display: flex; }
.gcard--cta__in { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px; width: 100%; aspect-ratio: auto; background: linear-gradient(158deg, var(--dark-surface) 0%, #20242c 100%); border: 1px solid var(--dark-border); border-radius: 16px; padding: 30px 28px; }
.gcard--cta .dg-eyebrow { color: var(--gold-on-dark); margin-bottom: 12px; }
.gcard--cta h3 { font-family: var(--font-serif); font-weight: 500; font-size: 26px; line-height: 1.15; letter-spacing: -.01em; color: var(--fg-on-dark-1); margin: 0 0 10px; }
.gcard--cta p { font-size: 14.5px; line-height: 1.55; color: var(--fg-on-dark-2); margin: 0 0 22px; }
.gcard--cta .ig-btn--solid { font-size: 15px; }

@media (max-width: 760px) {
  .goals__head { flex-direction: column; align-items: flex-start; gap: 20px; }
  .goals .dg-eyebrow { justify-content: flex-start; }
  .goals__nav { order: -1; }
  .gcard { width: 80vw; }
}

/* ============================================================ IMAGE SLOTS — premium charcoal placeholders */
image-slot {
  background:
    repeating-linear-gradient(135deg, rgba(239,169,89,.08) 0 9px, transparent 9px 18px),
    var(--dark-surface);
  --is-placeholder-color: var(--gold-on-dark);
  color: var(--gold-on-dark);
  border: 1px solid var(--dark-border);
}

/* ============================================================ MOTION / REVEAL */
[data-reveal] { opacity: 0; transform: translateY(26px); }
[data-reveal].in { opacity: 1; transform: none; transition: opacity var(--dg-reveal-dur) var(--dg-ease), transform var(--dg-reveal-dur) var(--dg-ease); transition-delay: var(--d, 0ms); }

[data-motion="off"] [data-reveal] { opacity: 1; transform: none; transition: none; }
[data-motion="lively"] { --dg-reveal-dur: .62s; }

/* light sweep on hero render (motion on) */
@media (prefers-reduced-motion: no-preference) {
  [data-motion="lively"] .hero__render-wrap::before,
  [data-motion="calm"] .hero__render-wrap::before {
    content: ""; position: absolute; inset: 0; z-index: 2; border-radius: var(--radius-5);
    background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.18) 48%, transparent 58%);
    background-size: 250% 100%; animation: dg-sweep 6.5s var(--dg-ease) infinite; pointer-events: none;
  }
}
@keyframes dg-sweep { 0%,18% { background-position: 130% 0; } 60%,100% { background-position: -60% 0; } }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ============================================================ RESPONSIVE HERO */
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; gap: 8px; }
  .hero__chip, .hero__note { display: none; }
  .hero__stage { margin-top: 8px; }
  .hero__render-wrap { width: 100%; margin-top: -52px; }
  .hero__render { height: 220px; }
  .buy-widget { margin-top: 0; }
}
@media (max-width: 480px) {
  :root { --dg-gut: 22px; }
  .hero__cta { width: 100%; }
  .hero__cta .ig-btn--solid { width: 100%; }
}


/* Production extraction helpers */
.dg-page-shell { min-height: 100vh; overflow-x: hidden; }
.dg-page-shell .image-slot { position: relative; display: block; overflow: hidden;  border: 1px solid var(--dark-border); color: var(--gold-on-dark); }
.dg-page-shell .image-slot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dg-page-shell .image-slot--contain img { object-fit: contain; padding: 16px; }
.dg-page-shell .image-slot--hidden { display: none; }
.dg-page-shell .dg-nav__logo, .dg-page-shell .dg-footer__logo, .dg-page-shell .ph-logo { width: auto; }

.dg-page-shell .feat--lead .feat__render.image-slot {
  border: 0;
  border-radius: 0;
  background: transparent;
}

/* Final brand accent override requested for Digital Gold headline/highlight text */
.dg-page-shell .hero h1 .accent,
.dg-page-shell .dg-h2 .accent {
  color: #C2410C !important;
}

/* How-it-works section exact visual lock */
.dg-page-shell .how {
  background: #FCF9F1;
}

.dg-page-shell .how .dg-h2 {
  font-family: var(--font-serif) !important;
  font-weight: 400;
  letter-spacing: -0.015em;
  color: #1C1917;
}

.dg-page-shell .how .dg-h2 span,
.dg-page-shell .how .dg-h2 .accent {
  color: #C2410C !important;
  font-family: inherit;
  font-weight: inherit;
}

.dg-page-shell .how .dg-lede {
  font-family: var(--font-sans) !important;
  font-size: 19px;
  line-height: 1.6;
  font-weight: 400;
  color: #57534E;
}

.dg-page-shell .how .step__render.image-slot {
  border: 0;
}

.dg-page-shell .how .step__render.image-slot img {
  object-fit: cover;
}

.dg-page-shell .how .step h3 {
  font-family: var(--font-sans) !important;
  font-size: 19px;
  line-height: 1.25;
  font-weight: 800;
  color: #1C1917;
}

.dg-page-shell .how .step p {
  font-family: var(--font-sans) !important;
  font-size: 14.5px;
  line-height: 1.55;
  font-weight: 400;
  color: #57534E;
}

/* Digital Gold typography lock — mirrors the Design System font rules. */
.dg-page-shell {
  font-family: var(--font-sans) !important;
  font-style: normal;
  font-weight: 400;
}

.dg-page-shell .hero h1 {
  font-family: var(--font-serif) !important;
  font-style: normal;
  font-weight: 400;
  letter-spacing: -0.018em;
  line-height: 1.02;
}

.dg-page-shell .hero h1 .accent {
  font-family: inherit;
  font-style: italic !important;
  font-weight: inherit;
}

.dg-page-shell .dg-h2 {
  font-family: var(--font-serif) !important;
  font-style: normal;
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.06;
}

.dg-page-shell .dg-h2 .accent,
.dg-page-shell .goals .dg-h2 .accent {
  font-family: inherit;
  font-style: normal;
  font-weight: inherit;
}

.dg-page-shell .goals .dg-h2 .accent {
  color: var(--gold-on-dark) !important;
  font-style: italic;
}

.dg-page-shell .feat h3,
.dg-page-shell .gcard--cta h3 {
  font-family: var(--font-serif) !important;
  font-style: normal;
  font-weight: 500;
  letter-spacing: -0.005em;
}

.dg-page-shell .sip h2,
.dg-page-shell .finalcta h2,
.dg-page-shell .ig-stat .num {
  font-family: var(--font-serif) !important;
  font-style: normal;
  font-weight: 400;
}

.dg-page-shell .sipx__amt,
.dg-page-shell .sipx__invest,
.dg-page-shell .sipx__gold,
.dg-page-shell .step__num {
  font-family: var(--font-serif) !important;
  font-style: normal;
}

.dg-page-shell .sip h2 .accent {
  color: var(--gold-on-dark) !important;
}

.dg-page-shell .sipx__gold,
.dg-page-shell .sipx__gold .sipx__grams {
  font-family: var(--font-serif) !important;
  font-style: normal;
  font-weight: 400;
  letter-spacing: -0.02em;
}

.dg-page-shell .bw__get .val {
  font-family: var(--font-serif) !important;
  font-style: normal;
  font-weight: 500;
  font-size: 26px;
  color: var(--fg-1);
  letter-spacing: -0.01em;
}

.dg-page-shell .bw__input {
  width: 100%;
  font-family: var(--font-sans) !important;
  font-size: 32px !important;
  font-weight: 800 !important;
  color: var(--fg-1) !important;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-button);
  padding: 14px 16px 14px 40px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.dg-page-shell .bw__input.unit-g {
  padding-left: 16px;
}

.dg-page-shell .bw__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.dg-page-shell .bw__title {
  font-family: var(--font-sans) !important;
  font-size: 17px;
  line-height: 1.25;
  font-weight: 800;
  color: var(--fg-1);
  margin: 0;
}

.dg-page-shell .ig-btn--solid,
.dg-page-shell .ig-btn--secondary,
.dg-page-shell .ig-btn--outline,
.dg-page-shell .ig-btn--outline-orange,
.dg-page-shell .ig-btn--on-dark,
.dg-page-shell .ig-btn--ghost-dark {
  background: #F45100;
  border-color: #F45100;
  color: #fff;
}

.dg-page-shell .ig-btn--solid:hover,
.dg-page-shell .ig-btn--secondary:hover,
.dg-page-shell .ig-btn--outline:hover,
.dg-page-shell .ig-btn--outline-orange:hover,
.dg-page-shell .ig-btn--on-dark:hover,
.dg-page-shell .ig-btn--ghost-dark:hover {
  background: #F45100;
  border-color: #F45100;
  color: #fff;
  box-shadow: var(--shadow-3);
}

.dg-page-shell .dg-nav__right .ig-btn--outline {
  background: #fff;
  border-color: var(--border);
  color: var(--fg-1);
  box-shadow: none;
}

.dg-page-shell .dg-nav__right .ig-btn--outline:hover {
  background: var(--stone-50);
  border-color: var(--border-strong);
  color: var(--fg-1);
  box-shadow: var(--shadow-1);
}

.dg-page-shell .dg-nav__right .ig-btn--secondary {
  background: #FFF7ED;
  border-color: #FFEDD5;
  color: #C2410C;
  box-shadow: none;
}

.dg-page-shell .dg-nav__right .ig-btn--secondary:hover {
  background: #FFEDD5;
  border-color: #FED7AA;
  color: #C2410C;
  box-shadow: var(--shadow-1);
}

.dg-page-shell .finalcta__btns .ig-btn--on-dark {
  background: var(--fg-on-dark-1);
  border-color: var(--fg-on-dark-1);
  color: var(--charcoal);
  box-shadow: none;
}

.dg-page-shell .finalcta__btns .ig-btn--on-dark:hover {
  background: #fff;
  border-color: #fff;
  color: var(--charcoal);
  box-shadow: var(--shadow-3);
}

.dg-page-shell .sipx__cta .ig-btn--ghost-dark {
  background: transparent;
  border-color: var(--dark-border-strong);
  color: var(--fg-on-dark-1);
  box-shadow: none;
}

.dg-page-shell .sipx__cta .ig-btn--ghost-dark:hover {
  background: rgba(244,244,247,.08);
  border-color: var(--fg-on-dark-2);
  color: var(--fg-on-dark-1);
  box-shadow: none;
}

.dg-page-shell .dg-eyebrow,
.dg-page-shell .dg-lede,
.dg-page-shell .faq__support,
.dg-page-shell .faq__a p,
.dg-page-shell .hero__sub,
.dg-page-shell .hero__link,
.dg-page-shell .trustbar__item span,
.dg-page-shell .trustbar__item small,
.dg-page-shell .step h3,
.dg-page-shell .step p,
.dg-page-shell .gcard__title,
.dg-page-shell .faq__q,
.dg-page-shell .ig-btn,
.dg-page-shell button,
.dg-page-shell input {
  font-family: var(--font-sans) !important;
}