/* ════════════════════════════════════════════════════════════════
       JPGold · FairGold Checker · Consumer landing
       Warm cream + gold palette shared with /for-jewelers.html so the
       two pages feel like the same family — but the layout here is
       tool-first: the FairGold checker IS the page.
       ════════════════════════════════════════════════════════════════ */

    :root {
      /* ── Tanishq-marble palette: marble bg + ivory cards + antique gold ── */
      --ivory:        #FAF6ED;
      --ivory-deep:   #F3EAD3;
      --cream:        #FBF7EE;
      --cream-soft:   #F5EFE0;
      --cream-deep:   #EDE4CC;
      --paper:        #FFFFFF;
      /* Card-on-marble surface: warm semi-translucent cream so the
         marble veining ghosts through subtly for the luxury feel,
         while keeping text contrast above 4.5:1 (WCAG AA). */
      --card:         rgba(252, 247, 232, 0.96);
      --card-strong:  rgba(255, 252, 242, 0.985);
      --marble-veil:  rgba(255, 252, 242, 0.55);
      /* Muted antique-gold instead of bright saturated yellow.
         Real gold jewellery in India reads warmer + browner; bright
         #D4AF37 was reading as plastic/web rather than metal. */
      --gold:         #B89752;  /* was #C9A84C — deeper, less yellow */
      --gold-warm:    #BD9956;  /* was #D4AF37 — warmer antique */
      --gold-dark:    #8B6914;
      --gold-deep:    #6B520F;
      --gold-soft:    #F0E5C2;
      --gold-tint:    rgba(184, 151, 82, 0.14);
      --gold-rose:    #B69274;  /* subtle rose-gold accent for hovers */
      --ink:          #2D1800;
      --ink-body:     #4A3320;
      --ink-soft:     #6B5B45;
      --ink-muted:    #8E7A5F;
      --line:         #E8DCC8;
      --line-deep:    #D5C6A8;
      --line-gold:    rgba(139, 105, 20, 0.22);
      --success:      #3F7D52;
      --warn:         #C98A2B;
      --bad:          #B8472F;
      /* Refined gradient: subtle highlight at top, deeper antique below.
         Reads as "polished metal" instead of "flat gold paint." */
      --gold-gradient: linear-gradient(180deg, #C8A463 0%, #A98441 100%);
      --gold-gradient-hover: linear-gradient(180deg, #BC9852 0%, #94733A 100%);
      --shadow-sm:    0 2px 8px rgba(45, 24, 0, 0.06);
      --shadow-md:    0 6px 20px rgba(45, 24, 0, 0.08);
      --shadow-lg:    0 24px 56px rgba(45, 24, 0, 0.14);
      --shadow-gold:  0 4px 14px rgba(139, 105, 20, 0.22),
                      inset 0 1px 0 rgba(255, 245, 210, 0.30);
      --radius:       14px;
      --radius-lg:    22px;
      --container:    640px;
      --font-body:    'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, sans-serif;
      --font-display: 'Playfair Display', 'Playfair Fallback', Georgia, serif;
    }

    /* Self-hosted Latin subsets of Inter (5 weights) + Playfair
       Display (2 weights), served from /fonts/ on the same origin
       as the rest of the assets. Eliminates the Google Fonts third-
       party round-trip (~150ms saving on first visit) and removes
       a privacy/third-party dependency. Each weight is ~24KB Latin-
       subset; unicode-range restricts each face to Basic Latin + a
       few extras so regional script text (Telugu / Hindi / Tamil /
       Kannada) falls through to system fonts instead of waiting on
       these files. font-display: swap is fine here because the
       size-adjust fallback declarations below eliminate the swap-
       time layout shift. */
    @font-face {
      font-family: 'Inter';
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url('fonts/Inter-400.woff2') format('woff2');
      unicode-range: U+0020-007F, U+00A0-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    @font-face {
      font-family: 'Inter';
      font-style: normal;
      font-weight: 500;
      font-display: swap;
      src: url('fonts/Inter-500.woff2') format('woff2');
      unicode-range: U+0020-007F, U+00A0-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    @font-face {
      font-family: 'Inter';
      font-style: normal;
      font-weight: 600;
      font-display: swap;
      src: url('fonts/Inter-600.woff2') format('woff2');
      unicode-range: U+0020-007F, U+00A0-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    @font-face {
      font-family: 'Inter';
      font-style: normal;
      font-weight: 700;
      font-display: swap;
      src: url('fonts/Inter-700.woff2') format('woff2');
      unicode-range: U+0020-007F, U+00A0-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    @font-face {
      font-family: 'Inter';
      font-style: normal;
      font-weight: 800;
      font-display: swap;
      src: url('fonts/Inter-800.woff2') format('woff2');
      unicode-range: U+0020-007F, U+00A0-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    @font-face {
      font-family: 'Playfair Display';
      font-style: normal;
      font-weight: 600;
      font-display: swap;
      src: url('fonts/PlayfairDisplay-600.woff2') format('woff2');
      unicode-range: U+0020-007F, U+00A0-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    @font-face {
      font-family: 'Playfair Display';
      font-style: normal;
      font-weight: 700;
      font-display: swap;
      src: url('fonts/PlayfairDisplay-700.woff2') format('woff2');
      unicode-range: U+0020-007F, U+00A0-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }

    /* Size-adjusted fallback fonts so that BEFORE Inter / Playfair
       finish loading, the system fallback occupies the same vertical
       space Inter / Playfair will eventually take. When the web font
       arrives and swaps in, there's no layout shift. Drops CLS from
       0.72 -> ~0.05 without changing the actual visual experience.
       Override values are Google's published Inter / Playfair recipes. */
    @font-face {
      font-family: 'Inter Fallback';
      src: local('Arial');
      ascent-override: 90.20%;
      descent-override: 22.48%;
      line-gap-override: 0%;
      size-adjust: 107.40%;
    }
    @font-face {
      font-family: 'Playfair Fallback';
      src: local('Georgia');
      ascent-override: 92.50%;
      descent-override: 25.00%;
      line-gap-override: 0%;
      size-adjust: 113.00%;
    }

    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
    /* Background — pure CSS gradient stack replacing the 72KB
       marble-bg.jpg. The original was already overlaid with a 55%
       cream veil that muted the veining almost out of perception;
       the gradient below preserves the same warm-cream-with-soft-
       top-highlight feel without the LCP cost, blocked paint, or
       per-scroll repaint. Layers:
         1. Soft warm radial glow at top-center (gold tint)
         2. Vertical cream -> ivory gradient base */
    body {
      margin: 0;
      background:
        radial-gradient(ellipse 80% 55% at 50% 0%, rgba(255, 245, 215, 0.55) 0%, transparent 70%),
        linear-gradient(180deg, var(--cream) 0%, var(--ivory) 100%);
      color: var(--ink);
      font-family: var(--font-body);
      font-size: 15px;
      line-height: 1.55;
      -webkit-font-smoothing: antialiased;
      padding-bottom: 32px;
      min-height: 100vh;
    }
    /* Reusable SVG icon helper — sized via CSS so colours inherit
       from the parent's text colour (works for line icons). */
    .icon {
      width: 1em;
      height: 1em;
      display: inline-block;
      vertical-align: -0.125em;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .icon-lg { width: 1.5em; height: 1.5em; }
    .icon-xl { width: 2em;   height: 2em; }
    button { font-family: inherit; cursor: pointer; }
    h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 600; }
    a { color: var(--gold-dark); }

    /* ── Beta banner ──────────────────────────────────────────────── */
    .beta-banner {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 6px 14px 7px;
      background: linear-gradient(180deg, #2D1800 0%, #1A0F00 100%);
      color: #F4EBD5;
      font-family: var(--font-body);
      font-size: 12.5px;
      font-weight: 500;
      text-align: center;
      flex-wrap: wrap;
    }
    .beta-banner.is-dismissed { display: none; }
    .beta-banner-text {
      font-weight: 700;
      color: var(--gold-warm);
    }
    .beta-banner-cta {
      color: #FFFFFF;
      text-decoration: none;
      font-weight: 600;
      border-bottom: 1px dotted rgba(255, 255, 255, 0.45);
      padding: 1px 0;
      transition: border-color 140ms ease;
    }
    .beta-banner-cta:hover { border-bottom-color: var(--gold-warm); }
    .beta-banner-x {
      appearance: none;
      border: 0;
      background: transparent;
      color: rgba(244, 235, 213, 0.55);
      font-size: 14px;
      cursor: pointer;
      padding: 2px 6px;
      margin-left: 4px;
      border-radius: 4px;
      transition: all 120ms ease;
      flex-shrink: 0;
    }
    .beta-banner-x:hover {
      color: #FFFFFF;
      background: rgba(255, 255, 255, 0.08);
    }
    @media (max-width: 480px) {
      .beta-banner { font-size: 11.5px; padding: 5px 10px 6px; }
    }

    /* ── HEADER (top nav) ───────────────────────────────────────────── */
    .top-nav {
      position: sticky; top: 0; z-index: 30;
      background: rgba(251, 247, 238, 0.92);
      backdrop-filter: saturate(140%) blur(8px);
      -webkit-backdrop-filter: saturate(140%) blur(8px);
      border-bottom: 1px solid var(--line);
    }
    .top-nav-inner {
      max-width: var(--container);
      margin: 0 auto;
      padding: 10px 16px;
      display: flex; align-items: center; gap: 10px;
    }
    .brand {
      display: inline-flex; align-items: center; gap: 8px;
      text-decoration: none; color: var(--ink);
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 17px;
    }
    .logo-mark {
      width: 36px;
      height: 36px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .logo-mark svg { width: 100%; height: 100%; display: block; }
    .brand b { color: var(--gold-dark); font-weight: 700; }
    .nav-spacer { flex: 1; }
    .for-jewelers-link {
      font-size: 13px;
      font-weight: 600;
      color: var(--ink-soft);
      text-decoration: none;
      padding: 6px 10px;
      border-radius: 999px;
      transition: background 140ms ease, color 140ms ease;
    }
    .for-jewelers-link:hover { background: var(--gold-tint); color: var(--gold-dark); }

    /* Language switcher (custom dropdown — same pattern as for-jewelers.html) */
    .lang-switch { position: relative; }
    .lang-trigger {
      appearance: none; border: 1px solid var(--line);
      background: var(--paper); color: var(--ink-body);
      padding: 6px 10px;
      border-radius: 999px;
      font-size: 12.5px; font-weight: 600;
      display: inline-flex; align-items: center; gap: 5px;
    }
    .lang-trigger:hover { border-color: var(--gold); }
    .lang-trigger-globe { font-size: 13px; line-height: 1; color: var(--gold-dark); display: inline-flex; align-items: center; }
    .lang-trigger-globe .icon { width: 14px; height: 14px; }
    /* Auto-suggest language banner — slim sticky strip above the nav.
       Visible only when the browser's preferred language matches a
       non-English locale we support and the user hasn't already
       picked a language. One-tap apply + dismiss. */
    /* Banner is hidden by default; an inline early-detect <script>
       at the top of <body> adds .show-lang-suggest to <html> if the
       visitor matches the India + non-English-pref + not-dismissed
       criteria, BEFORE first paint. That way the banner either
       renders at t=0 with the rest of the page, or never appears -
       no mid-render injection, no CLS contribution. */
    .lang-suggest {
      display: none;
      align-items: center;
      gap: 10px;
      padding: 8px 14px;
      background: linear-gradient(180deg, #fffbed 0%, #fff5cc 100%);
      border-bottom: 1px solid rgba(201, 168, 76, 0.30);
      font-family: var(--font-body);
      font-size: 12.5px;
      color: var(--ink);
    }
    html.show-lang-suggest .lang-suggest { display: flex; }
    .lang-suggest.hidden { display: none !important; }
    .lang-suggest-globe { font-size: 14px; flex-shrink: 0; color: var(--gold-dark); display: inline-flex; align-items: center; }
    .lang-suggest-globe .icon { width: 16px; height: 16px; }
    .lang-suggest-chips {
      display: flex;
      gap: 6px;
      flex: 1;
      flex-wrap: nowrap;
      min-width: 0;
      overflow-x: auto;
      scrollbar-width: none;
    }
    .lang-suggest-chips::-webkit-scrollbar { display: none; }
    .lang-suggest-chip {
      appearance: none;
      border: 1.5px solid var(--gold);
      background: #ffffff;
      color: var(--ink);
      padding: 4px 12px;
      border-radius: 999px;
      font-family: var(--font-body);
      font-size: 12.5px;
      font-weight: 700;
      cursor: pointer;
      transition: background 140ms ease, transform 140ms ease, border-color 140ms ease;
      flex-shrink: 0;
      white-space: nowrap;
    }
    .lang-suggest-chip:hover {
      background: var(--gold);
      color: #2d1800;
      border-color: var(--gold-dark);
      transform: translateY(-1px);
    }
    .lang-suggest-close {
      appearance: none;
      border: none;
      background: transparent;
      color: var(--ink-muted);
      cursor: pointer;
      font-size: 14px;
      padding: 4px 6px;
      line-height: 1;
      flex-shrink: 0;
    }
    .lang-suggest-close:hover { color: var(--ink); }
    @media (max-width: 480px) {
      .lang-suggest { padding: 6px 10px; gap: 8px; font-size: 11.5px; }
      .lang-suggest-chip { padding: 3px 9px; font-size: 11.5px; }
    }
    .lang-trigger::after {
      content: ''; width: 6px; height: 6px;
      border-right: 1.5px solid currentColor;
      border-bottom: 1.5px solid currentColor;
      transform: rotate(45deg) translateY(-1px);
      margin-left: 2px;
    }
    .lang-menu {
      position: absolute; top: calc(100% + 6px); right: 0;
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: 12px;
      box-shadow: var(--shadow-md);
      list-style: none; margin: 0; padding: 4px;
      min-width: 140px;
    }
    .lang-menu li {
      padding: 8px 10px;
      border-radius: 8px;
      font-size: 13px; font-weight: 500;
      color: var(--ink-body);
      cursor: pointer;
      display: flex; align-items: center; justify-content: space-between; gap: 8px;
    }
    .lang-menu li:hover { background: var(--gold-soft); color: var(--gold-dark); }
    .lang-menu li.active { color: var(--gold-dark); font-weight: 700; }
    .lang-menu li.active::after { content: '✓'; }

    /* ── HERO BAND ──────────────────────────────────────────────────── */
    .hero {
      max-width: var(--container);
      margin: 24px auto 0;
      padding: 0 16px;
      text-align: center;
    }
    .hero-eyebrow {
      display: inline-block;
      font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--gold-dark);
      background: var(--gold-soft);
      border: 1px solid var(--line-gold);
      padding: 4px 10px;
      border-radius: 999px;
      margin-bottom: 16px;
    }

    /* Hero headline — replaces the old stacked JPGold/Fair Gold Check
       wordmark. Same vertical rhythm + brand colors. Promoted to a CTA
       because Clarity showed users dead-clicking it expecting an
       action; on click we smooth-scroll to the form + focus weight. */
    /* Hero headline — bigger, gold-bronze coloured per the mockup so
       it reads as the page's premium centrepiece. Gold gradient text-
       fill catches the eye like polished metal lettering. */
    .hero-headline {
      font-family: var(--font-display);
      font-size: 40px;
      font-weight: 700;
      line-height: 1.1;
      letter-spacing: -0.4px;
      background: linear-gradient(180deg, #C9A35E 0%, #8B6914 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      color: var(--gold-dark); /* fallback for older browsers */
      margin: 0 0 10px;
      cursor: pointer;
      display: inline-flex;
      align-items: baseline;
      gap: 8px;
      transition: transform 180ms ease;
    }
    .hero-headline:hover .hero-headline-chev {
      opacity: 1;
      transform: translateY(2px);
    }
    .hero-headline:focus-visible {
      outline: 2px solid var(--gold-dark);
      outline-offset: 4px;
      border-radius: 4px;
    }
    .hero-headline-chev {
      font-size: 0.5em;
      font-weight: 800;
      color: var(--gold-deep);
      -webkit-text-fill-color: var(--gold-deep);
      opacity: 0.5;
      transition: opacity 200ms ease, transform 200ms ease;
    }
    @media (min-width: 600px) { .hero-headline { font-size: 48px; } }
    @media (max-width: 380px) { .hero-headline { font-size: 34px; } }

    /* Highlighted "gold" word in the headline — gold-gradient text-fill
       with an italic serif weight so the word literally looks made of
       gold. The solid color is the fallback for older browsers without
       background-clip: text support. */
    .headline-gold {
      color: var(--gold-dark);
      font-style: italic;
      font-weight: 700;
      background: linear-gradient(135deg, #D4AF37 0%, #8B6914 60%, #B8902C 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      padding: 0 1px;  /* keeps the gradient from clipping the descender */
    }
    .hero-sub {
      max-width: 520px;
      margin: 6px auto 0;
      color: var(--ink-soft);
      font-size: 14.5px;
      line-height: 1.6;
      font-style: italic;
    }
    /* Hero trust badge — small social-proof line that lives just below
       the subtitle. Visually low-weight (pill-shaped, faint background)
       so it doesn't compete with the headline, but distinct enough that
       a 2-second mobile scanner from a YouTube ad reads it. */
    .hero-trust {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin: 14px auto 0;
      padding: 6px 14px 6px 12px;
      background: var(--card);
      border: 1px solid var(--line-gold);
      border-radius: 999px;
      font-family: var(--font-body);
      font-size: 12px;
      font-weight: 600;
      color: var(--ink-soft);
      letter-spacing: 0.01em;
      box-shadow: 0 2px 8px rgba(139, 105, 20, 0.08);
    }
    .hero-trust-icon {
      width: 14px;
      height: 14px;
      color: var(--gold-dark);
      flex-shrink: 0;
    }
    .hero-trust strong {
      font-weight: 800;
      color: var(--gold-dark);
      font-variant-numeric: tabular-nums;
      font-feature-settings: 'tnum' 1, 'lnum' 1;
    }
    /* ── Live rate strip ───────────────────────────────────────────────
       Sits between the top nav and the hero. For the curious visitor
       who isn't here to use the calculator - they just want today's
       number. Three purities side-by-side (22K headlined since it's
       what 90% of Indian jewellery is), live-pulse dot, source +
       refresh time below. */
    .rate-strip {
      background:
        linear-gradient(180deg, rgba(255, 251, 236, 0.55) 0%, rgba(252, 247, 232, 0.40) 100%);
      border-bottom: 1px solid var(--line-gold);
      padding: 14px 10px 14px;
      animation: rateStripFade 400ms ease-out;
      cursor: pointer;
      transition: background 220ms ease, box-shadow 220ms ease;
    }
    .rate-strip:hover {
      background:
        linear-gradient(180deg, rgba(255, 248, 220, 0.98) 0%, rgba(240, 218, 150, 0.7) 100%);
      box-shadow: 0 4px 14px rgba(139, 105, 20, 0.12);
    }
    .rate-strip:focus-visible {
      outline: 2px solid var(--gold-dark);
      outline-offset: -2px;
    }
    .rate-strip-tap-hint {
      margin-left: auto;
      font-size: 14px;
      font-weight: 800;
      color: var(--gold-deep);
      opacity: 0.55;
      transition: opacity 200ms ease, transform 200ms ease;
    }
    .rate-strip:hover .rate-strip-tap-hint {
      opacity: 1;
      transform: translate(2px, -2px);
    }
    .rate-strip.hidden { display: none; }
    @keyframes rateStripFade {
      from { opacity: 0; transform: translateY(-4px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .rate-strip-inner {
      max-width: var(--container);
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
    }
    /* Rate-strip head — LIVE pulse badge + "Today's Gold Rate"
       title + ↗ tap hint, sits above the three karat cards. */
    .rate-strip-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      flex-wrap: nowrap;
    }
    .rate-strip-head-left {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      flex: 1 1 auto;
      min-width: 0;
    }
    .rate-strip-trend-top {
      flex: 0 0 auto;
      white-space: nowrap;
    }
    .rate-strip-trend-hidden { display: none !important; }
    .rate-strip-live {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-family: var(--font-body);
      font-size: 9.5px;
      font-weight: 800;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: #1B5E3A;
      padding: 2px 7px;
      background: rgba(46, 204, 113, 0.12);
      border-radius: 999px;
    }
    .rate-strip-live-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #2DA15E;
      box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.55);
      animation: rateStripPulse 1.8s ease-in-out infinite;
    }
    @keyframes rateStripPulse {
      0%   { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.55); }
      70%  { box-shadow: 0 0 0 7px rgba(46, 204, 113, 0); }
      100% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0); }
    }
    .rate-strip-title {
      font-family: var(--font-body);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--gold-deep);
    }
    /* Rate strip: each karat is now a mini card (label-on-top, value
       below) with breathing room between cards. Clarity feedback was
       that the old inline-baseline layout read as one cramped string
       of numbers; this version makes each karat a clear unit and lets
       the typography (Playfair on the numerals) carry the premium feel. */
    .rate-strip-rates {
      display: flex;
      align-items: stretch;
      gap: 14px;
      justify-content: stretch;
      flex-wrap: nowrap;
    }
    /* Rate cards — LIGHT cream cards with thin gold borders, matching
       the mockup's airy luxury feel. The mockup is 70% light cream
       and lets the marble breathe between cards; heavy gold backgrounds
       overwhelmed that. Now: warm ivory gradient, thin antique-gold
       border, soft drop shadow, dark text. */
    .rate-strip-rate {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      padding: 14px 18px 12px;
      background: linear-gradient(180deg, #FFFBED 0%, #FBF3DB 100%);
      border: 1.5px solid var(--gold);
      border-radius: 12px;
      box-shadow:
        0 4px 14px rgba(139, 105, 20, 0.12),
        inset 0 1px 0 rgba(255, 252, 242, 0.7);
      min-width: 0;
      flex: 1 1 0;
      transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
    }
    .rate-strip:hover .rate-strip-rate {
      border-color: var(--gold-dark);
      transform: translateY(-1px);
      box-shadow:
        0 6px 18px rgba(139, 105, 20, 0.18),
        inset 0 1px 0 rgba(255, 252, 242, 0.8);
    }
    /* Value + /g + arrow inline on one line, baseline-aligned. */
    .rate-strip-pair {
      display: inline-flex;
      align-items: baseline;
      gap: 2px;
      white-space: nowrap;
    }
    /* Direction arrow — day-over-day movement. Solid CSS triangles
       drawn via borders. Bigger + bolder to match the mockup's
       at-a-glance ticker feel. */
    .rate-strip-arrow {
      display: inline-block;
      width: 0;
      height: 0;
      margin-left: 6px;
      vertical-align: middle;
      transform: translateY(-2px);
    }
    .rate-strip-arrow.is-up {
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-bottom: 8px solid var(--success);
      filter: drop-shadow(0 1px 0 rgba(45, 106, 79, 0.25));
    }
    .rate-strip-arrow.is-down {
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-top: 8px solid var(--bad);
      filter: drop-shadow(0 1px 0 rgba(184, 71, 47, 0.25));
    }
    .rate-strip-arrow.is-flat {
      width: 10px;
      height: 2px;
      background: var(--ink-muted);
      border-radius: 2px;
      transform: translateY(-4px);
    }
    .rate-strip:hover .rate-strip-rate {
      border-color: var(--gold);
    }
    /* Karat label — dark ink uppercase tracked at top of card. */
    .rate-strip-karat {
      font-family: var(--font-body);
      font-size: 10.5px;
      font-weight: 800;
      letter-spacing: 0.14em;
      color: var(--ink);
      text-transform: uppercase;
      text-align: center;
    }
    /* Numbers use Inter Bold with tabular figures — Playfair on
       digits was reading as ornate; clean fintech-style sans gives
       the rate the immediate "live data" feel users expect. Size
       trimmed so the full "₹13,736/g" fits on one line on mobile. */
    .rate-strip-value {
      font-family: var(--font-body);
      font-size: 16px;
      font-weight: 800;
      color: var(--ink);
      font-variant-numeric: tabular-nums;
      font-feature-settings: 'tnum' 1, 'lnum' 1;
      letter-spacing: -0.02em;
      line-height: 1;
    }
    /* 22K headline: value in antique gold for emphasis (matches mockup) */
    .rate-strip-rate.is-22k .rate-strip-value {
      font-size: 17px;
      color: var(--gold-dark);
    }
    /* Silver card — cool platinum tint so the eye distinguishes it
       from the two warm gold karats without breaking the typographic
       rhythm. */
    /* SILVER card — light cool tones to distinguish from the warm
       gold cards. Same airy treatment, just slate-tinted. */
    .rate-strip-rate.is-silver {
      background: linear-gradient(180deg, #FAFBFC 0%, #ECEFF3 100%);
      border-color: #8a93a0;
    }
    .rate-strip-rate.is-silver .rate-strip-karat {
      color: #2c333d;
    }
    .rate-strip-rate.is-silver .rate-strip-value {
      color: #2c333d;
    }
    /* /g is the inline suffix right after the digits. */
    .rate-strip-unit {
      font-family: var(--font-body);
      font-size: 12px;
      font-weight: 600;
      color: var(--ink-muted);
      letter-spacing: 0.02em;
      margin-left: 1px;
    }
    .rate-strip-foot {
      font-family: var(--font-body);
      font-size: 10.5px;
      font-weight: 500;
      color: var(--ink-muted);
      letter-spacing: 0.01em;
    }
    .rate-strip-source { font-variant-numeric: tabular-nums; }
    .rate-strip-source:empty { display: none; }
    /* Stale badge — shown when the API's asOf timestamp is more than
       an hour old. Slim amber pill so it reads as a soft warning,
       not an error. */
    .rate-strip-stale {
      display: inline-block;
      margin-left: 6px;
      padding: 1px 7px;
      background: #FFF1DC;
      color: #8A5A12;
      border-radius: 999px;
      font-size: 9.5px;
      font-weight: 800;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }
    /* Pulse animation — flashes when a rate updates silently in the
       background. Subtle gold flash so the returning user notices new
       data without us interrupting them. */
    @keyframes rateStripPulseFlash {
      0%   { background: rgba(214, 171, 95, 0.0); }
      30%  { background: rgba(214, 171, 95, 0.45); }
      100% { background: rgba(214, 171, 95, 0.0); }
    }
    .rate-strip-pulse {
      animation: rateStripPulseFlash 1.4s ease-out;
      border-radius: 4px;
    }
    /* Mobile — tighten padding so 3 cards fit 360px without wrap. */
    @media (max-width: 480px) {
      .rate-strip { padding: 12px 10px 14px; }
      .rate-strip-inner { max-width: 100%; }
      .rate-strip-rates { gap: 10px; }
      .rate-strip-rate { min-width: 0; flex: 1 1 0; padding: 10px 10px 9px; gap: 5px; }
      .rate-strip-karat { font-size: 9.5px; letter-spacing: 0.12em; }
      .rate-strip-value { font-size: 14.5px; }
      .rate-strip-rate.is-22k .rate-strip-value { font-size: 15.5px; }
      .rate-strip-unit { font-size: 10px; }
      .rate-strip-arrow.is-up,
      .rate-strip-arrow.is-down { border-left-width: 4px; border-right-width: 4px; }
      .rate-strip-arrow.is-up { border-bottom-width: 7px; }
      .rate-strip-arrow.is-down { border-top-width: 7px; }
    }
    /* ── Daily-rate subscribe tile ─────────────────────────────────────
       Slim band under the rate strip. Renders only when the backend
       returns at least one channel link. Two side-by-side action
       buttons (Telegram + WhatsApp), each link populated dynamically
       so the admin can update them via the platform without a redeploy. */
    /* Primary tab bar — segmented control under the rate strip with
       four equal-width buttons. The active tab gets a gold-soft fill +
       gold underline. Icons sit above the label so a narrow phone still
       fits four tabs without text wrapping. */
    .tabbar {
      display: flex;
      gap: 6px;
      padding: 10px 12px 0;
      background: #FFFFFF;
      border-bottom: 1px solid var(--line);
      max-width: var(--container);
      margin: 0 auto;
    }
    .tab-btn {
      flex: 1 1 0;
      min-width: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      padding: 8px 4px 10px;
      background: transparent;
      border: 0;
      border-bottom: 3px solid transparent;
      cursor: pointer;
      font-family: var(--font-body);
      font-size: 12.5px;
      font-weight: 600;
      color: var(--ink-soft);
      transition: color 140ms ease, border-color 140ms ease, background 140ms ease;
    }
    .tab-btn:hover { color: var(--ink); }
    .tab-btn.is-active {
      color: var(--gold-dark);
      border-bottom-color: var(--gold-dark);
      font-weight: 800;
    }
    .tab-btn .tab-ico .icon {
      width: 22px;
      height: 22px;
      color: currentColor;
    }
    .tab-btn .tab-lbl {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;
    }
    .tab-btn:focus-visible {
      outline: 2px solid var(--gold-dark);
      outline-offset: -2px;
    }
    @media (max-width: 480px) {
      .tabbar { gap: 2px; padding: 8px 6px 0; }
      .tab-btn { padding: 6px 2px 8px; font-size: 11px; }
      .tab-btn .tab-ico .icon { width: 20px; height: 20px; }
    }
    /* Tab visibility — top-level sections carry data-tab="...". They
       stay visible while their tab is active and hide otherwise. The
       body.tab-* class is set on load + on every tab click. */
    body:not(.tab-fairCheck)   [data-tab="fairCheck"]   { display: none !important; }
    body:not(.tab-sellGold)    [data-tab="sellGold"]    { display: none !important; }
    body:not(.tab-goldLoan)    [data-tab="goldLoan"]    { display: none !important; }
    body:not(.tab-findDealers) [data-tab="findDealers"] { display: none !important; }

    .subscribe-strip {
      background: linear-gradient(180deg, #ffffff 0%, rgba(255,251,236,0.55) 100%);
      border-bottom: 1px solid rgba(201, 168, 76, 0.18);
      padding: 12px 16px 14px;
    }
    .subscribe-strip.hidden { display: none; }
    .subscribe-strip-inner {
      max-width: var(--container);
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 9px;
    }
    .subscribe-strip-head {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: var(--font-body);
    }
    .subscribe-strip-ico { font-size: 17px; line-height: 1; }
    .subscribe-strip-title {
      font-size: 11.5px;
      font-weight: 800;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--gold-deep);
    }
    .subscribe-strip-buttons {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      justify-content: center;
      width: 100%;
    }
    .subscribe-btn {
      flex: 1 1 220px;
      min-width: 180px;
      max-width: 280px;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 10px 14px;
      border: 1.5px solid var(--gold);
      border-radius: 11px;
      background: #ffffff;
      text-decoration: none;
      color: var(--ink);
      transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
      box-shadow: 0 2px 8px rgba(139, 105, 20, 0.06);
    }
    .subscribe-btn.hidden { display: none; }
    .subscribe-btn:hover {
      transform: translateY(-1px);
      border-color: var(--gold-dark);
      box-shadow: 0 4px 14px rgba(139, 105, 20, 0.16);
    }
    .subscribe-btn-ico {
      font-size: 22px;
      line-height: 1;
      flex-shrink: 0;
    }
    .subscribe-btn-lbl {
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 0;
    }
    .subscribe-btn-label {
      font-family: var(--font-body);
      font-size: 13.5px;
      font-weight: 800;
      color: var(--ink);
      letter-spacing: -0.005em;
      line-height: 1.2;
    }
    .subscribe-btn-sub {
      font-family: var(--font-body);
      font-size: 10.5px;
      font-weight: 500;
      color: var(--ink-soft);
    }
    .subscribe-btn-wa {
      background: linear-gradient(180deg, #f3fff7 0%, #d7f3df 100%);
      border-color: #25D366;
    }
    .subscribe-btn-wa:hover { border-color: #1FBA59; }
    .subscribe-btn-tg {
      background: linear-gradient(180deg, #f3fbff 0%, #d6ecfd 100%);
      border-color: #29B6F6;
    }
    .subscribe-btn-tg:hover { border-color: #0098da; }
    @media (max-width: 480px) {
      .subscribe-btn { padding: 10px 12px; }
      .subscribe-btn-label { font-size: 13px; }
      .subscribe-btn-sub { font-size: 10px; }
    }
    /* ── Old gold resale calculator ────────────────────────────────────
       Secondary tool, intentionally sized smaller than the main check
       tool so it reads as 'also available' rather than competing for
       primary attention. Three states live in the same card. */
    .resale-section {
      max-width: var(--container);
      margin: 14px auto 0;
      padding: 0 16px;
    }
    .resale-section.hidden { display: none; }
    .resale-card {
      background: #ffffff;
      border: 1px solid rgba(201, 168, 76, 0.30);
      border-radius: 14px;
      box-shadow: 0 1px 3px rgba(45,24,0,0.04), 0 4px 16px rgba(45,24,0,0.04);
      /* No overflow:hidden — the per-item purity dropdown opens
         absolutely-positioned BELOW its trigger and would otherwise
         get clipped by this card's rounded corners. The inner
         .resale-teaser carries its own border-radius so the gradient
         doesn't overflow. */
    }
    /* Collapsed teaser - one-tap CTA. */
    .resale-teaser {
      display: flex;
      align-items: center;
      gap: 12px;
      width: 100%;
      padding: 14px 16px;
      background: linear-gradient(180deg, #fffbe8 0%, #fff5cc 100%);
      border: none;
      border-radius: 14px;
      cursor: pointer;
      text-align: left;
      transition: background 160ms ease;
    }
    .resale-teaser:hover { background: linear-gradient(180deg, #fff5cc 0%, #ffeba1 100%); }
    .resale-teaser-ico { font-size: 24px; flex-shrink: 0; color: var(--gold-deep); display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; }
    .resale-teaser-ico .icon { width: 22px; height: 22px; }
    .resale-teaser-body { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .resale-teaser-title {
      font-family: var(--font-body);
      font-size: 14px;
      font-weight: 800;
      color: var(--ink);
      letter-spacing: -0.005em;
      line-height: 1.25;
    }
    .resale-teaser-sub {
      font-family: var(--font-body);
      font-size: 11.5px;
      font-weight: 500;
      color: var(--ink-soft);
      line-height: 1.35;
    }
    .resale-teaser-arrow {
      font-size: 16px;
      color: var(--gold-dark);
      flex-shrink: 0;
      font-weight: 800;
    }
    /* Expanded form. */
    .resale-form { padding: 18px 18px 20px; }
    .resale-form.hidden { display: none; }
    .resale-result { padding: 18px 18px 20px; }
    .resale-result.hidden { display: none; }
    .resale-head { margin-bottom: 14px; }
    .resale-title {
      font-family: var(--font-display);
      font-size: 19px;
      font-weight: 800;
      color: var(--ink);
      letter-spacing: -0.01em;
      margin: 0 0 4px;
      line-height: 1.2;
    }
    .resale-sub {
      font-family: var(--font-body);
      font-size: 12.5px;
      color: var(--ink-soft);
      margin: 0;
      line-height: 1.45;
    }
    /* Shared rate block — single rate field for the whole collection. */
    .resale-rate-block { margin: 18px 0 14px; }
    /* Sale Mode toggle (Cash Out vs Exchange) — segmented control
       at the top of the form. Cash Out is the conservative default
       (matches traditional 'I just want cash for old gold'); Exchange
       opt-in flips the entire downstream math + script + warning. */
    .resale-sale-mode {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      border: 0;
      padding: 0;
      margin: 16px 0 14px;
    }
    .resale-sale-mode legend {
      grid-column: 1 / -1;
      padding: 0;
      margin-bottom: 4px;
    }
    .resale-sale-mode-option {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      padding: 10px 12px;
      background: #FFFFFF;
      border: 1.5px solid var(--line-gold);
      border-radius: 10px;
      cursor: pointer;
      transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
    }
    .resale-sale-mode-option:hover { border-color: var(--gold); }
    .resale-sale-mode-option.is-selected {
      background: linear-gradient(180deg, #fffbed 0%, var(--gold-soft) 100%);
      border-color: var(--gold-dark);
      box-shadow: inset 0 1px 0 rgba(255, 245, 210, 0.4),
                  0 3px 8px rgba(139, 105, 20, 0.12);
    }
    .resale-sale-mode-option input[type="radio"] {
      margin-top: 2px;
      accent-color: var(--gold-dark);
      flex-shrink: 0;
    }
    .resale-sale-mode-text {
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 0;
    }
    .resale-sale-mode-text strong {
      font-family: var(--font-body);
      font-size: 13px;
      font-weight: 800;
      color: var(--ink);
      line-height: 1.2;
    }
    .resale-sale-mode-text small {
      font-family: var(--font-body);
      font-size: 11px;
      color: var(--ink-soft);
      line-height: 1.3;
    }
    @media (max-width: 460px) {
      .resale-sale-mode { grid-template-columns: 1fr; gap: 6px; }
      .resale-sale-mode-option { padding: 9px 10px; }
    }
    /* Items list — vertical stack of accordion cards. */
    .resale-items-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-bottom: 12px;
    }
    /* Each item card. Header is always visible (number + summary + ✕);
       body shows the per-item form when expanded. */
    .resale-item {
      background: #FFFFFF;
      border: 1.5px solid var(--line);
      border-radius: 12px;
      /* No overflow:hidden — would clip the purity dropdown menu
         that opens below its trigger. Header + body each round
         their own corners via the parent radius. */
      transition: border-color 140ms ease, box-shadow 140ms ease;
    }
    .resale-item.is-editing {
      border-color: var(--gold-dark);
      box-shadow: inset 0 1px 0 rgba(255, 245, 200, 0.4),
                  0 3px 10px rgba(139, 105, 20, 0.10);
    }
    .resale-item-header {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 14px;
      cursor: pointer;
      user-select: none;
    }
    .resale-item-num {
      font-family: var(--font-body);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--gold-deep);
      flex-shrink: 0;
    }
    .resale-item-summary {
      flex: 1;
      min-width: 0;
      font-family: var(--font-body);
      font-size: 13px;
      font-weight: 600;
      color: var(--ink);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .resale-item-summary .resale-item-name {
      font-weight: 800;
      margin-right: 6px;
    }
    .resale-item-summary .resale-item-stats { color: var(--ink-soft); }
    .resale-item-summary .resale-item-empty { color: var(--ink-muted); font-style: italic; font-weight: 500; }
    .resale-item-actions { display: flex; gap: 4px; flex-shrink: 0; }
    .resale-item-remove {
      appearance: none;
      border: 0;
      background: transparent;
      color: var(--ink-muted);
      cursor: pointer;
      padding: 4px 8px;
      font-size: 18px;
      line-height: 1;
      border-radius: 6px;
      transition: color 140ms ease, background 140ms ease;
    }
    .resale-item-remove:hover { color: #B8472F; background: rgba(184, 71, 47, 0.08); }
    .resale-item-body {
      padding: 0 14px 14px;
      border-top: 1px solid var(--line);
    }
    .resale-item-body.hidden { display: none; }
    .resale-item:not(.is-editing) .resale-item-body { display: none; }
    /* Compact 2-col item row — Name | Weight side-by-side */
    .resale-item-row {
      display: grid;
      grid-template-columns: 2fr 1fr;
      gap: 8px;
      margin-top: 8px;
      margin-bottom: 8px;
    }
    .resale-item-row-2col { grid-template-columns: 2fr 1fr; }
    .resale-item-cell { display: flex; flex-direction: column; min-width: 0; }
    /* Stones & dust safety note — soft amber stripe just under the
       weight input to keep the user honest about the net gold weight. */
    .resale-stones-warning {
      margin: 4px 0 12px;
      padding: 6px 10px;
      font-family: var(--font-body);
      font-size: 11px;
      line-height: 1.35;
      color: #6B4F0E;
      background: #FFF8E1;
      border-left: 3px solid #C8A24A;
      border-radius: 6px;
    }
    /* Per-item purity + condition chip rows — compact spacing so
       all 4 purity chips fit in a single line on mobile. */
    .resale-item-chip-row { margin-top: 4px; margin-bottom: 10px; gap: 6px; flex-wrap: wrap; }
    .resale-item-chip-row .rs-chip { padding: 7px 10px; font-size: 12px; }
    .rs-field-label-sm {
      display: block;
      font-family: var(--font-body);
      font-size: 9.5px;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--ink-soft);
      margin: 0 0 4px;
      line-height: 1.1;
    }
    .rs-input-sm {
      width: 100%;
      padding: 8px 10px;
      font-size: 13.5px;
      font-weight: 600;
      box-sizing: border-box;
    }
    /* Reusable custom dropdown — built so future dropdowns across the
       app inherit the same gold-themed open state (native <select>
       can't be styled in the option panel across OSes). Trigger looks
       like an .rs-input field with a gold chevron; the menu floats
       below it with the same gold border, gold-soft hover, and
       gold-dark selected option. */
    .jp-dropdown {
      position: relative;
      width: 100%;
    }
    .jp-dropdown-trigger {
      appearance: none;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      width: 100%;
      padding: 8px 10px 8px 12px;
      font-family: var(--font-body);
      font-size: 13.5px;
      font-weight: 700;
      color: var(--ink);
      background: var(--ivory);
      border: 1.5px solid var(--line-gold);
      border-radius: 9px;
      cursor: pointer;
      text-align: left;
      transition: border-color 140ms ease, background 140ms ease;
      box-sizing: border-box;
    }
    .jp-dropdown-trigger:hover { border-color: var(--gold); }
    .jp-dropdown.is-open .jp-dropdown-trigger {
      border-color: var(--gold-dark);
      background: #FFFFFF;
      box-shadow: inset 0 1px 0 rgba(255, 245, 210, 0.4),
                  0 0 0 3px rgba(214, 171, 95, 0.18);
    }
    .jp-dropdown-value {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .jp-dropdown-chev {
      width: 0; height: 0;
      border-left: 4px solid transparent;
      border-right: 4px solid transparent;
      border-top: 5px solid var(--gold-dark);
      flex-shrink: 0;
      transition: transform 160ms ease;
    }
    .jp-dropdown.is-open .jp-dropdown-chev {
      transform: rotate(180deg);
    }
    .jp-dropdown-menu {
      position: absolute;
      top: calc(100% + 4px);
      left: 0;
      right: 0;
      max-height: 240px;
      overflow-y: auto;
      background: #FFFFFF;
      border: 1.5px solid var(--gold-dark);
      border-radius: 10px;
      padding: 4px;
      box-shadow: 0 6px 20px rgba(45, 24, 0, 0.10);
      z-index: 50;
      display: none;
    }
    .jp-dropdown.is-open .jp-dropdown-menu { display: block; }
    .jp-dropdown-option {
      appearance: none;
      display: block;
      width: 100%;
      padding: 9px 12px;
      font-family: var(--font-body);
      font-size: 13.5px;
      font-weight: 600;
      color: var(--ink);
      background: transparent;
      border: 0;
      border-radius: 7px;
      cursor: pointer;
      text-align: left;
      transition: background 120ms ease, color 120ms ease;
    }
    .jp-dropdown-option:hover {
      background: var(--gold-soft);
      color: var(--gold-deep);
    }
    .jp-dropdown-option.is-selected {
      background: linear-gradient(180deg, #fffbed 0%, var(--gold-soft) 100%);
      color: var(--gold-dark);
      font-weight: 800;
    }
    .jp-dropdown-option.is-selected::after {
      content: '✓';
      float: right;
      color: var(--gold-dark);
      font-weight: 800;
    }
    @media (max-width: 420px) {
      .resale-item-row { grid-template-columns: 1.6fr 1fr 1fr; gap: 6px; }
      .rs-input-sm { padding: 7px 8px; font-size: 13px; }
      .resale-item-cond-row .rs-chip { padding: 7px 8px; font-size: 11.5px; }
    }
    /* Add-another button — dashed gold border, gold-soft hover. */
    .resale-add-item {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      padding: 11px 14px;
      margin-bottom: 14px;
      font-family: var(--font-body);
      font-size: 13.5px;
      font-weight: 700;
      color: var(--gold-deep);
      background: transparent;
      border: 1.5px dashed var(--gold-dark);
      border-radius: 10px;
      cursor: pointer;
      transition: background 140ms ease;
    }
    .resale-add-item:hover { background: var(--gold-soft); }
    .resale-add-item.hidden { display: none; }
    .resale-add-ico {
      width: 18px; height: 18px;
      display: inline-flex; align-items: center; justify-content: center;
      font-size: 16px; font-weight: 800;
      color: var(--gold-dark);
      background: var(--gold-soft);
      border-radius: 50%;
    }
    .resale-max-notice {
      margin: -8px 0 14px;
      font-family: var(--font-body);
      font-size: 11.5px;
      color: var(--ink-muted);
      text-align: center;
    }
    .resale-max-notice.hidden { display: none; }
    .rs-field-label {
      display: block;
      font-family: var(--font-body);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--ink-soft);
      margin: 14px 0 6px;
    }
    /* 2-col field grid for resale + loan forms, parallel to the
       Fair Check form's .field-grid. Pairs cells like:
         Weight | Rate
         Purity chips | Condition chips
       Each cell uses display:flex column so a 2-line label still
       lets its control bottom-align with the neighbour. */
    .rs-field-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-top: 14px;
    }
    .rs-field-grid > div { min-width: 0; display: flex; flex-direction: column; }
    /* Reserve 2 lines of vertical space for every label and bottom-anchor
       the text inside that space. Same trick the main .field-grid uses —
       a 1-line label ('బరువు') and a 2-line label ('ఈరోజు 22K బంగారం ధర
       (₹/గ్రా)') end at the same Y baseline so the inputs directly below
       them always start at the same Y, regardless of label length. */
    .rs-field-grid > div > .rs-field-label {
      display: flex;
      align-items: flex-end;
      min-height: 32px;
      line-height: 1.2;
      margin: 0 0 6px;
    }
    .rs-field-grid .rs-chip-row { margin-top: 0; }
    .rs-field-grid .rs-rate-row { margin: 0; }
    .rs-field-grid .rs-rate-hint {
      display: block;
      margin-top: 4px;
      font-size: 10.5px;
      color: var(--ink-muted);
    }
    @media (max-width: 460px) {
      .rs-field-grid { gap: 8px; }
      .rs-field-grid > div > .rs-field-label { min-height: 36px; line-height: 1.25; }
      .rs-field-grid .rs-chip { padding: 7px 10px; font-size: 11.5px; }
    }
    .rs-input {
      width: 100%;
      padding: 11px 14px;
      font-family: var(--font-body);
      font-size: 15px;
      font-weight: 600;
      color: var(--ink);
      border: 1.5px solid rgba(201, 168, 76, 0.30);
      border-radius: 9px;
      background: #fffdf6;
      box-sizing: border-box;
      transition: border-color 140ms ease;
    }
    .rs-input:focus {
      outline: none;
      border-color: var(--gold-dark);
      background: #ffffff;
    }
    /* Error state — parallel to .field.has-error .input on the main
       Fair Check form. Red border + soft red halo + inline error
       message rendered via the existing .field-error CSS. */
    .rs-input.has-error {
      border-color: var(--bad) !important;
      box-shadow: 0 0 0 3px rgba(184, 71, 47, 0.12) !important;
    }
    .rs-field-error {
      color: var(--bad);
      font-size: 12px;
      font-weight: 600;
      margin-top: 7px;
      padding: 0 2px;
      display: flex;
      align-items: center;
      gap: 5px;
    }
    .rs-field-error::before { content: '⚠'; font-size: 13px; flex-shrink: 0; }
    .rs-chip-row {
      display: flex;
      gap: 7px;
      flex-wrap: wrap;
    }
    /* Resale + loan chips — mirror Fair Check's .chip / .chip.is-on so
       the three calculator modules read as one consistent system. */
    .rs-chip {
      appearance: none;
      padding: 10px 14px;
      font-family: var(--font-body);
      font-size: 13px;
      font-weight: 700;
      color: var(--ink-soft);
      background: var(--ivory);
      border: 1.5px solid var(--line-gold);
      border-radius: 10px;
      cursor: pointer;
      transition: border-color 140ms ease, background 140ms ease,
                  color 140ms ease, box-shadow 140ms ease;
    }
    .rs-chip:hover { border-color: var(--gold); color: var(--ink); }
    .rs-chip.selected {
      border-color: var(--gold-dark);
      background: linear-gradient(180deg, #fffbed 0%, var(--gold-soft) 100%);
      color: var(--gold-deep);
      box-shadow: inset 0 1px 0 rgba(255, 245, 210, 0.4),
                  0 1px 4px rgba(139, 105, 20, 0.10);
    }
    .rs-chip:active { transform: scale(0.98); }
    .rs-rate-row { display: flex; align-items: center; gap: 10px; }
    .rs-rate-input { flex: 1; }
    .rs-rate-hint {
      font-family: var(--font-body);
      font-size: 11px;
      font-weight: 600;
      color: var(--ink-muted);
      white-space: nowrap;
    }
    /* Resale + loan submit — mirror .submit-btn's brushed-gold plate
       treatment (7-stop horizontal gradient + ::before sheen + ::after
       radial spotlight). Slightly tighter padding + smaller font than
       .submit-btn because the resale form sits in a narrower card. */
    .resale-submit {
      position: relative;
      overflow: hidden;
      appearance: none;
      display: block;
      width: 100%;
      margin-top: 18px;
      padding: 13px 16px;
      font-family: var(--font-body);
      font-size: 15px;
      font-weight: 800;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: #4d3700;
      background: linear-gradient(90deg,
        #bb8123 0%,
        #d8aa4c 18%,
        #f0d07c 45%,
        #f7e19b 52%,
        #efcd75 60%,
        #d7a145 82%,
        #bc8021 100%);
      border: 0;
      border-radius: 12px;
      cursor: pointer;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 -3px 4px rgba(121, 78, 0, 0.18),
        0 3px 8px rgba(0, 0, 0, 0.18);
      transition: filter 200ms ease, transform 200ms ease, box-shadow 200ms ease, background 200ms ease;
    }
    .resale-submit::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(to bottom,
        rgba(255, 255, 255, 0.35) 0%,
        rgba(255, 255, 255, 0.12) 15%,
        rgba(255, 255, 255, 0)    40%);
      pointer-events: none;
    }
    .resale-submit::after {
      content: "";
      position: absolute;
      top: 0; bottom: 0;
      width: 180px;
      left: 60%;
      background: radial-gradient(ellipse at center,
        rgba(255, 255, 255, 0.35) 0%,
        rgba(255, 255, 255, 0.18) 40%,
        transparent 75%);
      pointer-events: none;
    }
    .resale-submit:hover {
      filter: brightness(1.04);
      background: linear-gradient(90deg,
        #b97f1d 0%,
        #c89133 12%,
        #ddb05a 28%,
        #f0d07f 45%,
        #f8e59f 52%,
        #f0d17d 60%,
        #dca84f 78%,
        #c58b2b 90%,
        #b77d1b 100%);
      transform: translateY(-1px);
    }
    .resale-submit:active { transform: translateY(0); filter: brightness(0.97); }
    .resale-submit:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      transform: none;
      filter: none;
    }
    .resale-cancel {
      display: block;
      width: 100%;
      margin-top: 8px;
      padding: 9px 12px;
      font-family: var(--font-body);
      font-size: 12.5px;
      font-weight: 600;
      color: var(--ink-soft);
      background: transparent;
      border: none;
      cursor: pointer;
    }
    .resale-cancel:hover { color: var(--ink); }
    /* Result panel — 4 brackets stacked, color-coded best→worst. */
    .resale-result-head { margin-bottom: 14px; }
    .resale-result-title {
      font-family: var(--font-display);
      font-size: 19px;
      font-weight: 800;
      color: var(--ink);
      letter-spacing: -0.01em;
      margin: 0 0 4px;
      line-height: 1.2;
    }
    .resale-result-sub {
      font-family: var(--font-body);
      font-size: 12px;
      color: var(--ink-soft);
      margin: 0;
    }
    .resale-result-sub strong { color: var(--ink); font-weight: 700; }
    .resale-brackets {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-bottom: 16px;
    }
    .resale-bracket {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 14px;
      border-radius: 10px;
      border: 1.5px solid;
      background: #ffffff;
    }
    .resale-bracket-label { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
    .resale-bracket-tag {
      font-family: var(--font-body);
      font-size: 10.5px;
      font-weight: 900;
      letter-spacing: 0.08em;
    }
    .resale-bracket-desc {
      font-family: var(--font-body);
      font-size: 11.5px;
      color: var(--ink-soft);
      font-weight: 500;
      line-height: 1.35;
    }
    .resale-bracket-amount {
      font-family: var(--font-body);
      font-size: 18px;
      font-weight: 800;
      font-variant-numeric: tabular-nums;
      font-feature-settings: 'tnum' 1, 'lnum' 1;
      letter-spacing: -0.015em;
      white-space: nowrap;
    }
    .resale-bracket.is-best {
      background: linear-gradient(180deg, #f0fdf4 0%, #d8f3dd 100%);
      border-color: #2D6A4F;
    }
    .resale-bracket.is-best .resale-bracket-tag,
    .resale-bracket.is-best .resale-bracket-amount { color: #1B5E3A; }
    .resale-bracket.is-fair {
      background: linear-gradient(180deg, #f7fff5 0%, #e8f7e3 100%);
      border-color: #6FA75A;
    }
    .resale-bracket.is-fair .resale-bracket-tag,
    .resale-bracket.is-fair .resale-bracket-amount { color: #3F7A2F; }
    .resale-bracket.is-typical {
      background: linear-gradient(180deg, #fff7e6 0%, #ffe9b8 100%);
      border-color: #C99224;
    }
    .resale-bracket.is-typical .resale-bracket-tag,
    .resale-bracket.is-typical .resale-bracket-amount { color: #8A5A12; }
    .resale-bracket.is-walk {
      background: linear-gradient(180deg, #fff3ef 0%, #fdded4 100%);
      border-color: #B8472F;
    }
    .resale-bracket.is-walk .resale-bracket-tag,
    .resale-bracket.is-walk .resale-bracket-amount { color: #7C2E1F; }
    /* Exchange-mode hero collapse — when saleMode === 'exchange', user
       gets full 100% credit so the 4-tier gradient is noise. Hide tiers
       2-4 and re-grid tier 1 as a single massive card. Focus shifts to
       the invoice-audit warning box below. */
    .resale-brackets.is-exchange-hero .resale-bracket.is-fair,
    .resale-brackets.is-exchange-hero .resale-bracket.is-typical,
    .resale-brackets.is-exchange-hero .resale-bracket.is-walk { display: none; }
    .resale-brackets.is-exchange-hero .resale-bracket.is-best {
      display: grid;
      grid-template-columns: 1fr;
      grid-template-areas: "tag" "amount" "desc";
      row-gap: 8px;
      padding: 22px 22px;
      border-width: 2px;
      background: linear-gradient(180deg, #f0fdf4 0%, #c8ecd1 100%);
      box-shadow: 0 6px 18px rgba(45, 106, 79, 0.18);
    }
    .resale-brackets.is-exchange-hero .resale-bracket.is-best .resale-bracket-label { display: contents; }
    .resale-brackets.is-exchange-hero .resale-bracket.is-best .resale-bracket-tag {
      grid-area: tag;
      font-size: 11.5px;
    }
    .resale-brackets.is-exchange-hero .resale-bracket.is-best .resale-bracket-amount {
      grid-area: amount;
      font-size: 34px;
      letter-spacing: -0.025em;
      white-space: normal;
    }
    .resale-brackets.is-exchange-hero .resale-bracket.is-best .resale-bracket-desc {
      grid-area: desc;
      font-size: 13px;
      line-height: 1.5;
      color: var(--ink);
      font-weight: 500;
    }
    /* Flip-mode link — quick swap between Cash and Exchange on the
       result page without forcing a return to the form. */
    .resale-flip-mode {
      display: block;
      width: 100%;
      margin: 10px 0 0;
      padding: 9px 12px;
      font-family: var(--font-body);
      font-size: 12.5px;
      font-weight: 700;
      color: var(--gold-dark);
      background: transparent;
      border: 1px dashed var(--gold);
      border-radius: 8px;
      cursor: pointer;
      transition: background 140ms ease, border-color 140ms ease;
    }
    .resale-flip-mode:hover { background: var(--gold-soft); border-color: var(--gold-dark); }
    /* Post-melt alert — single green confirmation strip that appears
       above the tier cards when the user has applied a Live Purity
       Adjuster value. Tells them WHY the card numbers have shifted
       from the first-look chip estimate, with the exact tested % shown.
       Hidden by default; toggled by JS in runResaleEstimate. */
    .resale-post-melt-alert {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 0 0 12px 0;
      padding: 10px 14px;
      background: linear-gradient(180deg, #ECFDF3 0%, #D7F5E1 100%);
      border: 1px solid #6FAA7A;
      border-left: 4px solid #2D6A4F;
      border-radius: 10px;
      font-family: var(--font-body);
      font-size: 13px;
      line-height: 1.4;
      color: #1B5E3A;
      font-weight: 600;
    }
    .resale-post-melt-alert.hidden { display: none; }
    .resale-post-melt-check {
      flex: 0 0 auto;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: #2D6A4F;
      color: #fff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      font-size: 13px;
    }
    /* Before-melt snapshot — soft slate panel showing the original
       chip-based estimate so the user can compare it to the post-melt
       actuals below. Hidden unless the Live Purity Adjuster is on. */
    .resale-before-snapshot {
      margin: 14px 0;
      padding: 12px 14px;
      background: #F4F6F9;
      border: 1px solid #D8DEE6;
      border-radius: 10px;
    }
    .resale-before-snapshot.hidden { display: none; }
    .resale-before-head {
      display: flex;
      flex-direction: column;
      gap: 2px;
      margin-bottom: 8px;
    }
    .resale-before-label {
      font-family: var(--font-body);
      font-size: 10.5px;
      font-weight: 800;
      letter-spacing: 0.10em;
      text-transform: uppercase;
      color: #5B6470;
    }
    .resale-before-meta {
      font-family: var(--font-body);
      font-size: 11px;
      color: var(--ink-soft);
    }
    .resale-before-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px 12px;
    }
    .resale-before-grid > div {
      display: flex;
      justify-content: space-between;
      font-family: var(--font-body);
      font-size: 12.5px;
      color: var(--ink);
    }
    .resale-before-tag {
      font-weight: 600;
      color: var(--ink-soft);
    }
    .resale-before-grid strong {
      font-weight: 800;
      font-variant-numeric: tabular-nums;
    }
    .resale-after-label {
      margin: 10px 0 0;
      font-family: var(--font-body);
      font-size: 10.5px;
      font-weight: 800;
      letter-spacing: 0.10em;
      text-transform: uppercase;
      color: #2DA15E;
      text-align: center;
    }
    /* Live Post-Melting Purity Adjuster trigger — dashed outline,
       wrench icon, sits right below the Walk Away tier. */
    .resale-purity-adjust {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      padding: 11px 14px;
      margin-top: 14px;
      font-family: var(--font-body);
      font-size: 13px;
      font-weight: 700;
      color: var(--gold-deep);
      background: transparent;
      border: 1.5px dashed var(--gold-dark);
      border-radius: 10px;
      cursor: pointer;
      transition: background 140ms ease, border-color 140ms ease;
    }
    .resale-purity-adjust:hover { background: var(--gold-soft); }
    .resale-purity-adjust-ico { font-size: 16px; color: var(--gold-dark); }
    .resale-purity-applied {
      margin: 10px 0 0;
      padding: 8px 12px;
      font-family: var(--font-body);
      font-size: 12px;
      line-height: 1.4;
      color: #1B5E3A;
      background: rgba(46, 204, 113, 0.10);
      border-left: 3px solid #2DA15E;
      border-radius: 6px;
    }
    .resale-purity-applied b { font-weight: 800; }
    .resale-purity-applied.hidden { display: none; }
    .purity-adjust-card { max-width: 460px; }
    .purity-adjust-field { margin: 14px 0; }
    /* LPA mode toggle — XRF (default) vs combined-melt. */
    .lpa-mode-toggle {
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 10px 12px 12px;
      margin: 14px 0;
    }
    .lpa-mode-toggle legend {
      padding: 0 6px;
      font-size: 11px;
    }
    .lpa-mode-option {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      padding: 6px 0;
      cursor: pointer;
      font-family: var(--font-body);
      font-size: 13px;
      color: var(--ink);
    }
    .lpa-mode-option input[type="radio"] {
      margin-top: 3px;
      accent-color: var(--gold-dark);
    }
    .lpa-mode-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .lpa-mode-title { font-weight: 600; line-height: 1.35; }
    .lpa-mode-hint {
      font-size: 11.5px;
      color: var(--ink-soft);
      line-height: 1.35;
    }
    .lpa-helper {
      margin: 0 0 10px;
      font-family: var(--font-body);
      font-size: 12px;
      color: var(--ink-soft);
      line-height: 1.45;
    }
    .lpa-perpiece-block.hidden,
    .lpa-combined-block.hidden { display: none; }
    /* Per-piece row in the LPA modal. */
    .lpa-perpiece-row {
      display: grid;
      grid-template-columns: 1.4fr 1fr;
      grid-template-areas:
        "label input"
        "err   err";
      column-gap: 10px;
      row-gap: 4px;
      align-items: end;
      padding: 8px 0;
      border-bottom: 1px dashed rgba(201, 168, 76, 0.25);
    }
    .lpa-perpiece-row:last-child { border-bottom: 0; }
    .lpa-perpiece-row-label { grid-area: label; }
    .lpa-perpiece-row .rs-input { grid-area: input; }
    .lpa-perpiece-row-err {
      grid-area: err;
      display: flex;
      align-items: center;
      gap: 6px;
      font-family: var(--font-body);
      font-size: 11.5px;
      font-weight: 600;
      color: var(--bad);
      line-height: 1.3;
    }
    .lpa-perpiece-row-err:empty { display: none; }
    .lpa-perpiece-row-err::before { content: '⚠'; font-size: 12px; flex-shrink: 0; }
    .lpa-perpiece-row-label {
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 0;
    }
    .lpa-perpiece-name {
      font-family: var(--font-body);
      font-size: 12.5px;
      font-weight: 700;
      color: var(--ink);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .lpa-perpiece-meta {
      font-family: var(--font-body);
      font-size: 11px;
      color: var(--ink-soft);
    }
    .lpa-perpiece-row .rs-input {
      padding: 8px 10px;
      font-size: 13.5px;
    }
    .purity-adjust-err {
      margin: 8px 0 0;
      font-family: var(--font-body);
      font-size: 12px;
      font-weight: 600;
      color: var(--bad);
    }
    .purity-adjust-err.hidden { display: none; }
    /* Mixed-purity safety notice — soft amber card. Renders only when
       the user picked 'Mixed / unsure'. */
    .resale-mixed-notice {
      margin: 14px 0 0;
      padding: 12px 14px;
      background: #FFF8E6;
      border: 1px solid #F0D88F;
      border-left: 3px solid #C8A24A;
      border-radius: 8px;
      font-family: var(--font-body);
      font-size: 12.5px;
      line-height: 1.5;
      color: #5C4516;
    }
    .resale-mixed-notice b { color: #3F2F0A; font-weight: 800; }
    .resale-mixed-notice.hidden { display: none; }
    /* Bargain script box. */
    .resale-script-box {
      background: #fffbed;
      border: 1px solid rgba(201, 168, 76, 0.30);
      border-radius: 10px;
      padding: 14px 14px 12px;
      margin-bottom: 14px;
    }
    .resale-script-head {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;
    }
    .resale-script-ico { font-size: 16px; color: var(--gold-deep); display: inline-flex; align-items: center; }
    .resale-script-ico .icon { width: 18px; height: 18px; }
    .resale-script-title {
      font-family: var(--font-body);
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--gold-deep);
    }
    .resale-script-body {
      font-family: var(--font-body);
      font-size: 13px;
      font-weight: 500;
      color: var(--ink);
      line-height: 1.55;
      white-space: pre-wrap;
      padding: 10px 12px;
      background: #ffffff;
      border-radius: 7px;
      border: 1px dashed rgba(201, 168, 76, 0.45);
      margin-bottom: 10px;
    }
    .resale-script-actions { display: flex; gap: 8px; flex-wrap: wrap; }
    .resale-script-btn {
      flex: 1 1 120px;
      padding: 9px 12px;
      font-family: var(--font-body);
      font-size: 12.5px;
      font-weight: 700;
      color: var(--ink);
      background: #ffffff;
      border: 1.5px solid var(--gold);
      border-radius: 8px;
      cursor: pointer;
      transition: border-color 140ms ease, transform 140ms ease;
    }
    .resale-script-btn:hover { border-color: var(--gold-dark); transform: translateY(-1px); }
    .resale-script-note {
      font-family: var(--font-body);
      font-size: 11px;
      color: var(--ink-muted);
      font-weight: 500;
      margin: 10px 0 0;
      line-height: 1.45;
    }
    .resale-again {
      display: block;
      width: 100%;
      padding: 10px 12px;
      font-family: var(--font-body);
      font-size: 13px;
      font-weight: 700;
      color: var(--ink);
      background: transparent;
      border: 1.5px solid rgba(201, 168, 76, 0.30);
      border-radius: 9px;
      cursor: pointer;
      transition: border-color 140ms ease;
    }
    .resale-again:hover { border-color: var(--gold-dark); }
    @media (max-width: 480px) {
      .resale-form, .resale-result { padding: 14px 14px 16px; }
      .resale-title, .resale-result-title { font-size: 17px; }
      .resale-bracket { padding: 10px 12px; gap: 10px; }
      .resale-bracket-amount { font-size: 16px; }
      .resale-script-body { font-size: 12.5px; }
    }
    /* ── More-tools band header (groups resale + loan + compare) ──── */
    .more-tools-band { display: block; }
    .more-tools-band.hidden { display: none; }
    .more-tools-head {
      max-width: var(--container);
      margin: 22px auto 4px;
      padding: 0 16px;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .more-tools-line {
      flex: 1;
      height: 1px;
      background: linear-gradient(90deg, transparent 0%, rgba(201,168,76,0.45) 50%, transparent 100%);
    }
    .more-tools-label {
      font-family: var(--font-body);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--gold-deep);
      white-space: nowrap;
    }
    /* ── Gold loan estimator (mirrors resale-section structure) ──── */
    .loan-section { max-width: var(--container); margin: 12px auto 0; padding: 0 16px; }
    .loan-section.hidden { display: none; }
    .loan-card {
      background: #ffffff;
      border: 1px solid rgba(67, 122, 201, 0.30);
      border-radius: 14px;
      box-shadow: 0 1px 3px rgba(45,24,0,0.04), 0 4px 16px rgba(45,24,0,0.04);
      overflow: hidden;
    }
    .loan-teaser {
      display: flex;
      align-items: center;
      gap: 12px;
      width: 100%;
      padding: 14px 16px;
      background: linear-gradient(180deg, #eff5ff 0%, #d8e6fc 100%);
      border: none;
      border-radius: 14px;
      cursor: pointer;
      text-align: left;
      transition: background 160ms ease;
    }
    .loan-teaser:hover { background: linear-gradient(180deg, #d8e6fc 0%, #b8d0f8 100%); }
    .loan-teaser-ico { font-size: 24px; flex-shrink: 0; color: #1E4A8A; display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; }
    .loan-teaser-ico .icon { width: 22px; height: 22px; }
    .loan-teaser-body { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .loan-teaser-title {
      font-family: var(--font-body);
      font-size: 14px;
      font-weight: 800;
      color: var(--ink);
      letter-spacing: -0.005em;
      line-height: 1.25;
    }
    .loan-teaser-sub {
      font-family: var(--font-body);
      font-size: 11.5px;
      font-weight: 500;
      color: var(--ink-soft);
      line-height: 1.35;
    }
    .loan-teaser-arrow { font-size: 16px; color: #1e4a8a; flex-shrink: 0; font-weight: 800; }
    .loan-form { padding: 18px 18px 20px; }
    .loan-form.hidden { display: none; }
    .loan-result { padding: 18px 18px 20px; }
    .loan-result.hidden { display: none; }
    .loan-head { margin-bottom: 14px; }
    .loan-title {
      font-family: var(--font-display);
      font-size: 19px;
      font-weight: 800;
      color: var(--ink);
      letter-spacing: -0.01em;
      margin: 0 0 4px;
      line-height: 1.2;
    }
    .loan-sub {
      font-family: var(--font-body);
      font-size: 12.5px;
      color: var(--ink-soft);
      margin: 0;
      line-height: 1.45;
    }
    .loan-tiers { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
    .loan-tier {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 14px;
      border-radius: 10px;
      border: 1.5px solid;
      background: #ffffff;
    }
    .loan-tier-label { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
    .loan-tier-tag {
      font-family: var(--font-body);
      font-size: 10.5px;
      font-weight: 900;
      letter-spacing: 0.08em;
    }
    .loan-tier-desc {
      font-family: var(--font-body);
      font-size: 11.5px;
      color: var(--ink-soft);
      font-weight: 500;
      line-height: 1.35;
    }
    .loan-tier-amount {
      font-family: var(--font-body);
      font-size: 18px;
      font-weight: 800;
      font-variant-numeric: tabular-nums;
      font-feature-settings: 'tnum' 1, 'lnum' 1;
      letter-spacing: -0.015em;
      white-space: nowrap;
    }
    .loan-tier.is-bank {
      background: linear-gradient(180deg, #eef5ff 0%, #d6e6fc 100%);
      border-color: #2C6BAD;
    }
    .loan-tier.is-bank .loan-tier-tag,
    .loan-tier.is-bank .loan-tier-amount { color: #1E4A8A; }
    .loan-tier.is-standard {
      background: linear-gradient(180deg, #f0fdf4 0%, #d8f3dd 100%);
      border-color: #2D6A4F;
    }
    .loan-tier.is-standard .loan-tier-tag,
    .loan-tier.is-standard .loan-tier-amount { color: #1B5E3A; }
    .loan-tier.is-max {
      background: linear-gradient(180deg, #fff7e6 0%, #ffe9b8 100%);
      border-color: #C99224;
    }
    .loan-tier.is-max .loan-tier-tag,
    .loan-tier.is-max .loan-tier-amount { color: #8A5A12; }
    .loan-cost-box {
      background: #f7fbff;
      border: 1px solid rgba(67, 122, 201, 0.25);
      border-radius: 10px;
      padding: 12px 14px 10px;
      margin-bottom: 12px;
    }
    .loan-cost-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
    .loan-cost-ico { font-size: 16px; color: #1E4A8A; display: inline-flex; align-items: center; }
    .loan-cost-ico .icon { width: 18px; height: 18px; }
    .loan-cost-title {
      font-family: var(--font-body);
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: #1E4A8A;
    }
    .loan-cost-grid { display: flex; flex-direction: column; gap: 4px; }
    .loan-cost-row {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      padding: 5px 0;
      border-bottom: 1px dashed rgba(67,122,201,0.15);
    }
    .loan-cost-row:last-child { border-bottom: none; }
    .loan-cost-label {
      font-family: var(--font-body);
      font-size: 12.5px;
      color: var(--ink-soft);
    }
    .loan-cost-row strong {
      font-family: var(--font-body);
      font-size: 14px;
      font-weight: 800;
      font-variant-numeric: tabular-nums;
      font-feature-settings: 'tnum' 1, 'lnum' 1;
      letter-spacing: -0.015em;
      color: var(--ink);
    }
    .loan-cost-note {
      font-family: var(--font-body);
      font-size: 11px;
      color: var(--ink-muted);
      font-weight: 500;
      margin: 8px 0 0;
      line-height: 1.4;
    }
    .loan-cta {
      display: block;
      width: 100%;
      margin: 12px 0 8px;
      padding: 12px 14px;
      font-family: var(--font-body);
      font-size: 14px;
      font-weight: 800;
      letter-spacing: 0.01em;
      color: #1E4A8A;
      background: #ffffff;
      border: 1.5px solid #2C6BAD;
      border-radius: 10px;
      cursor: pointer;
      transition: background 140ms ease, transform 140ms ease;
    }
    .loan-cta:hover {
      background: linear-gradient(180deg, #eff5ff 0%, #d8e6fc 100%);
      transform: translateY(-1px);
    }
    /* ── Compare two quotes section ─────────────────────────────── */
    .compare-section { max-width: var(--container); margin: 12px auto 0; padding: 0 16px; }
    .compare-section.hidden { display: none; }
    .compare-card {
      background: #ffffff;
      border: 1px solid rgba(125, 60, 152, 0.30);
      border-radius: 14px;
      box-shadow: 0 1px 3px rgba(45,24,0,0.04), 0 4px 16px rgba(45,24,0,0.04);
      overflow: hidden;
    }
    .compare-teaser {
      display: flex;
      align-items: center;
      gap: 12px;
      width: 100%;
      padding: 14px 16px;
      background: linear-gradient(180deg, #f7eefd 0%, #ead0f4 100%);
      border: none;
      border-radius: 14px;
      cursor: pointer;
      text-align: left;
      transition: background 160ms ease;
    }
    .compare-teaser:hover { background: linear-gradient(180deg, #ead0f4 0%, #d8b0ee 100%); }
    .compare-teaser-ico { font-size: 24px; flex-shrink: 0; color: #6e2c8a; display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; }
    .compare-teaser-ico .icon { width: 22px; height: 22px; }
    .compare-teaser-body { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .compare-teaser-title {
      font-family: var(--font-body);
      font-size: 14px;
      font-weight: 800;
      color: var(--ink);
      letter-spacing: -0.005em;
      line-height: 1.25;
    }
    .compare-teaser-sub {
      font-family: var(--font-body);
      font-size: 11.5px;
      font-weight: 500;
      color: var(--ink-soft);
      line-height: 1.35;
    }
    .compare-teaser-arrow { font-size: 16px; color: #6e2c8a; flex-shrink: 0; font-weight: 800; }
    .compare-form { padding: 18px 18px 20px; }
    .compare-form.hidden { display: none; }
    .compare-result { padding: 18px 18px 20px; }
    .compare-result.hidden { display: none; }
    .cmp-quotes-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-top: 4px;
    }
    .cmp-quote-col { display: flex; flex-direction: column; }
    .cmp-quote-total { margin-top: 6px; }
    .cmp-cards-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-bottom: 14px;
    }
    .cmp-card {
      position: relative;
      padding: 12px 12px 10px;
      border: 1.5px solid rgba(125, 60, 152, 0.25);
      border-radius: 10px;
      background: #fbf7fd;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .cmp-card.is-winner {
      border-color: #2D6A4F;
      background: linear-gradient(180deg, #f0fdf4 0%, #d8f3dd 100%);
    }
    .cmp-card.is-loser { opacity: 0.7; }
    .cmp-card-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
    }
    .cmp-card-name {
      font-family: var(--font-body);
      font-size: 12.5px;
      font-weight: 800;
      color: var(--ink);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .cmp-card-winner {
      font-family: var(--font-body);
      font-size: 9.5px;
      font-weight: 900;
      letter-spacing: 0.08em;
      color: #1B5E3A;
      background: #ffffff;
      border: 1.5px solid #2D6A4F;
      border-radius: 999px;
      padding: 2px 7px;
      white-space: nowrap;
    }
    .cmp-card-winner.hidden { display: none; }
    .cmp-card-total {
      font-family: var(--font-body);
      font-size: 19px;
      font-weight: 900;
      color: var(--ink);
      font-variant-numeric: tabular-nums;
      font-feature-settings: 'tnum' 1, 'lnum' 1;
      letter-spacing: -0.015em;
    }
    .cmp-card-row {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      font-family: var(--font-body);
      font-size: 11.5px;
      color: var(--ink-soft);
    }
    .cmp-card-row strong {
      font-weight: 800;
      color: var(--ink);
      font-variant-numeric: tabular-nums;
    }
    .cmp-verdict {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 14px;
      margin-bottom: 12px;
      background: linear-gradient(180deg, #fffbed 0%, #ffeec8 100%);
      border: 1.5px solid var(--gold);
      border-radius: 10px;
    }
    .cmp-verdict-ico { font-size: 20px; flex-shrink: 0; color: #1B5E3A; display: inline-flex; align-items: center; }
    .cmp-verdict-ico .icon { width: 22px; height: 22px; }
    .cmp-verdict-text {
      font-family: var(--font-body);
      font-size: 13px;
      font-weight: 700;
      color: var(--ink);
      line-height: 1.4;
    }
    @media (max-width: 480px) {
      .loan-form, .loan-result, .compare-form, .compare-result { padding: 14px 14px 16px; }
      .loan-title, .compare-result .resale-result-title { font-size: 17px; }
      .loan-tier { padding: 10px 12px; gap: 10px; }
      .loan-tier-amount { font-size: 16px; }
      .cmp-card-total { font-size: 17px; }
    }
    /* ── Stolen-gold report section (3rd entry in More Tools band) ── */
    .stolen-section { max-width: var(--container); margin: 12px auto 0; padding: 0 16px; }
    .stolen-section.hidden { display: none; }
    .stolen-card {
      background: #ffffff;
      border: 1px solid rgba(184, 71, 47, 0.30);
      border-radius: 14px;
      box-shadow: 0 1px 3px rgba(45,24,0,0.04), 0 4px 16px rgba(45,24,0,0.04);
      overflow: hidden;
    }
    .stolen-teaser {
      display: flex;
      align-items: center;
      gap: 12px;
      width: 100%;
      padding: 14px 16px;
      background: linear-gradient(180deg, #fff5f0 0%, #fde0d4 100%);
      border: none;
      border-radius: 14px;
      cursor: pointer;
      text-align: left;
      transition: background 160ms ease;
    }
    .stolen-teaser:hover { background: linear-gradient(180deg, #fde0d4 0%, #fbc9b3 100%); }
    .stolen-teaser-ico { font-size: 24px; flex-shrink: 0; color: #B8472F; display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; }
    .stolen-teaser-ico .icon { width: 22px; height: 22px; }
    .stolen-teaser-body { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .stolen-teaser-title {
      font-family: var(--font-body);
      font-size: 14px;
      font-weight: 800;
      color: var(--ink);
      letter-spacing: -0.005em;
      line-height: 1.25;
    }
    .stolen-teaser-sub {
      font-family: var(--font-body);
      font-size: 11.5px;
      font-weight: 500;
      color: var(--ink-soft);
      line-height: 1.35;
    }
    .stolen-teaser-arrow { font-size: 16px; color: #B8472F; flex-shrink: 0; font-weight: 800; }
    /* ── Stolen-gold report modal ──────────────────────────────────── */
    .stolen-modal-card { max-width: 460px; max-height: 92vh; overflow-y: auto; }
    .stolen-progress {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 14px;
      padding: 4px 2px 0;
    }
    .stolen-step {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      background: #efeae0;
      color: var(--ink-muted);
      font-family: var(--font-body);
      font-size: 12px;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      border: 2px solid transparent;
    }
    .stolen-step.is-active {
      background: var(--gold);
      color: #2d1800;
      border-color: var(--gold-dark);
    }
    .stolen-step.is-done {
      background: #2D6A4F;
      color: #ffffff;
    }
    .stolen-step-line { flex: 1; height: 2px; background: #efeae0; }
    .stolen-textarea {
      resize: vertical;
      min-height: 60px;
      font-family: var(--font-body);
    }
    .stolen-photo-preview {
      margin-top: 6px;
      padding: 6px;
      border: 1px solid rgba(201, 168, 76, 0.30);
      border-radius: 8px;
      background: #fbf6ea;
    }
    .stolen-photo-preview.hidden { display: none; }
    .stolen-photo-preview img {
      width: 100%;
      max-height: 160px;
      object-fit: contain;
      border-radius: 5px;
    }
    .stolen-fir-row {
      display: flex !important;
      align-items: center;
      gap: 8px;
      margin: 14px 0 6px;
      text-transform: none !important;
      letter-spacing: 0 !important;
      font-size: 13px !important;
      font-weight: 600 !important;
      color: var(--ink) !important;
    }
    .stolen-checkbox {
      width: 16px;
      height: 16px;
      accent-color: var(--gold-dark);
      cursor: pointer;
    }
    .stolen-fir-input { margin-top: 4px; }
    .stolen-otp-row { margin-top: 6px; }
    .stolen-otp-row.hidden { display: none; }
    .stolen-error-line {
      margin: 8px 0 0;
      font-family: var(--font-body);
      font-size: 12.5px;
      font-weight: 600;
      color: #7C2E1F;
    }
    .stolen-error-line.hidden { display: none; }
    /* ── Rate-strip 'view trend' link ───────────────────────────── */
    .rate-strip-foot { display: flex; align-items: center; justify-content: center; gap: 10px; }
    .rate-strip-trend {
      font-family: var(--font-body);
      font-size: 10.5px;
      font-weight: 800;
      letter-spacing: 0.03em;
      color: var(--gold-deep);
      background: transparent;
      border: none;
      cursor: pointer;
      padding: 2px 0;
    }
    .rate-strip-trend:hover { color: var(--gold-dark); text-decoration: underline; }
    /* ── Trend chart modal ──────────────────────────────────────── */
    .trend-modal-card { max-width: 460px; }
    .trend-summary {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      margin: 12px 0 14px;
      padding: 12px 10px;
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: 10px;
    }
    .trend-summary-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
    }
    .trend-summary-label {
      font-family: var(--font-body);
      font-size: 9.5px;
      font-weight: 800;
      letter-spacing: 0.10em;
      text-transform: uppercase;
      color: var(--ink-muted);
    }
    .trend-summary-value {
      font-family: var(--font-body);
      font-size: 16px;
      font-weight: 800;
      font-variant-numeric: tabular-nums;
      font-feature-settings: 'tnum' 1, 'lnum' 1;
      color: var(--ink);
      font-variant-numeric: tabular-nums;
    }
    .trend-summary-value.is-up    { color: #2D6A4F; }
    .trend-summary-value.is-down  { color: #B8472F; }
    /* Today's full rate card — at-a-glance row of 22K / 24K / 18K
       rendered above the chart. Now uses Playfair Display for the
       numerals + a refined ivory-to-gold gradient that reads like
       parchment with a gold leaf inlay. Bigger type per Clarity
       feedback that the numbers looked cramped. */
    .trend-today-rates {
      margin: 14px 0 12px;
      padding: 14px 14px 12px;
      background: #FFFFFF;
      border: 1px solid var(--line);
      border-radius: 12px;
    }
    .trend-today-label {
      font-family: var(--font-body);
      font-size: 9.5px;
      font-weight: 800;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--gold-deep);
      margin-bottom: 10px;
      text-align: center;
    }
    .trend-today-row {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 8px;
    }
    /* Each cell is the merged "rate display + chart toggle." Inactive
       cells are pure-white info cards; active cells pick up the metal
       gradient that matches the karat — gold for 22K/24K, platinum
       for SILVER — so the selection is colour-coded at a glance. */
    .trend-today-cell {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      padding: 10px 8px;
      background: #FFFFFF;
      border: 1.5px solid var(--line-gold);
      border-radius: 10px;
      cursor: pointer;
      font: inherit;
      transition: all 160ms ease;
    }
    .trend-today-cell:hover {
      border-color: var(--gold);
      transform: translateY(-1px);
    }
    /* Active gold cell — bright gold gradient + gold-dark border. */
    .trend-today-cell.is-active {
      background: linear-gradient(180deg, #fff5d4 0%, #f3d278 100%);
      border-color: var(--gold-dark);
      box-shadow: inset 0 1px 0 rgba(255, 245, 210, 0.55),
                  0 3px 10px rgba(139, 105, 20, 0.22);
    }
    .trend-today-cell.is-active .trend-today-karat {
      color: var(--gold-dark);
    }
    /* Silver cell when active — clearly platinum-metal gradient so the
       user sees "you switched to silver" with the same visual weight
       as the gold cells get when active. Brighter than the previous
       subtle treatment that read as 'still inactive'. */
    .trend-today-cell.is-silver-cell.is-active {
      background: linear-gradient(180deg, #f4f7fa 0%, #c8cfd8 100%);
      border-color: #5b6470;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6),
                  0 3px 10px rgba(56, 65, 78, 0.22);
    }
    .trend-today-cell.is-silver-cell.is-active .trend-today-karat {
      color: #2c333d;
    }
    .trend-today-cell.is-silver-cell.is-active .trend-today-value {
      color: #1a2027;
    }
    .trend-today-cell:focus-visible {
      outline: 2px solid var(--gold-dark);
      outline-offset: 2px;
    }
    .trend-today-karat {
      font-family: var(--font-body);
      font-size: 10px;
      font-weight: 800;
      color: var(--gold-deep);
      letter-spacing: 0.10em;
      text-transform: uppercase;
    }
    .trend-today-value {
      font-family: var(--font-body);
      font-size: 18px;
      font-weight: 800;
      color: var(--ink);
      font-variant-numeric: tabular-nums;
      font-feature-settings: 'tnum' 1, 'lnum' 1;
      letter-spacing: -0.015em;
      line-height: 1.1;
    }
    .trend-chart-wrap {
      width: 100%;
      margin-bottom: 10px;
    }
    .trend-svg {
      width: 100%;
      height: 160px;
      display: block;
      background: #FFFFFF;
      border: 1px solid var(--line);
      border-radius: 8px;
    }
    /* X-axis labels — JS injects 4-5 spans for evenly-spaced dates
       (Jun 14, Jun 21, Jun 28, Jul 5…) instead of just first + last. */
    .trend-axis-row {
      display: flex;
      justify-content: space-between;
      margin-top: 4px;
      padding: 0 4px;
      font-family: var(--font-body);
      font-size: 10px;
      color: var(--ink-muted);
      font-weight: 600;
      font-variant-numeric: tabular-nums;
    }
    /* Time-range pills — sit just below the chart. Active pill picks
       up the gold-soft fill + gold-dark border, matching the karat tabs
       above so the whole modal reads as one consistent control surface. */
    .trend-range-pills {
      display: flex;
      gap: 6px;
      margin: 4px 0 12px;
      justify-content: center;
    }
    .trend-range-pill {
      appearance: none;
      flex: 1;
      max-width: 80px;
      padding: 7px 10px;
      font-family: var(--font-body);
      font-size: 11.5px;
      font-weight: 800;
      letter-spacing: 0.04em;
      color: var(--ink-soft);
      background: var(--paper);
      border: 1.5px solid var(--line);
      border-radius: 999px;
      cursor: pointer;
      transition: all 140ms ease;
    }
    .trend-range-pill:hover {
      border-color: var(--gold);
      color: var(--ink);
    }
    .trend-range-pill.is-active {
      background: var(--gold-soft);
      border-color: var(--gold-dark);
      color: var(--gold-dark);
      box-shadow: inset 0 1px 0 rgba(255, 245, 210, 0.4);
    }
    .trend-range-pill:focus-visible {
      outline: 2px solid var(--gold-dark);
      outline-offset: 2px;
    }
    .trend-note {
      font-family: var(--font-body);
      font-size: 11px;
      color: var(--ink-muted);
      margin: 0 0 12px;
      font-weight: 500;
    }
    /* Form OCR shortcut — slim Snap-Invoice-ish button at the top of
       the form. Inline SVG camera icon + refined ivory/gold styling. */
    .form-ocr-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      width: 100%;
      margin-bottom: 14px;
      padding: 11px 12px;
      font-family: var(--font-body);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.02em;
      color: var(--gold-deep);
      background: linear-gradient(180deg, var(--ivory) 0%, var(--gold-soft) 100%);
      border: 1px dashed var(--gold-dark);
      border-radius: 9px;
      cursor: pointer;
      transition: background 140ms ease, border-style 140ms ease;
    }
    .form-ocr-btn:hover {
      background: linear-gradient(180deg, #fffbed 0%, #ffeba1 100%);
      border-style: solid;
    }
    .form-ocr-btn .icon { font-size: 16px; color: var(--gold-dark); }
    .form-ocr-btn:hover { background: linear-gradient(180deg, #fff5cc 0%, #ffeba1 100%); }
    /* ── OCR modal ──────────────────────────────────────────────── */
    .ocr-modal-card { max-width: 420px; }
    .ocr-spinner {
      width: 40px;
      height: 40px;
      margin: 8px auto 12px;
      border: 4px solid rgba(201,168,76,0.25);
      border-top-color: var(--gold-dark);
      border-radius: 50%;
      animation: ocrSpin 800ms linear infinite;
    }
    @keyframes ocrSpin { to { transform: rotate(360deg); } }
    .ocr-fields {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin: 8px 0 14px;
      padding: 10px 12px;
      background: #fbf6ea;
      border: 1px solid rgba(201,168,76,0.30);
      border-radius: 8px;
    }
    .ocr-field-row {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      padding: 4px 0;
      border-bottom: 1px dashed rgba(201,168,76,0.25);
      font-family: var(--font-body);
      font-size: 12.5px;
    }
    .ocr-field-row:last-child { border-bottom: none; }
    .ocr-field-row .label { font-weight: 600; color: var(--ink-soft); }
    .ocr-field-row .value {
      font-weight: 800;
      color: var(--ink);
      font-variant-numeric: tabular-nums;
    }
    .ocr-field-row .value.is-missing { color: var(--ink-muted); font-weight: 500; font-style: italic; }
    /* About JPGold modal — opens when user taps the JP logo. Small,
       centred, ~360px wide. Three lines of body copy + a primary
       'Got it' close button. Diamond emoji at the top echoes the
       logo's diamond mark so the visual continuity is obvious. */
    .about-modal-card {
      max-width: 400px;
      text-align: center;
    }
    .about-modal-ico {
      font-size: 38px;
      margin-bottom: 4px;
      line-height: 1;
    }
    .about-modal-body {
      font-family: var(--font-body);
      font-size: 14px;
      line-height: 1.75;
      color: var(--ink-body);
      text-align: left;
      padding: 4px 4px 16px;
    }
    /* Make the brand link feel tappable on mobile so visitors who don't
       know 'JPGold' realise they can ask 'who is this?' by tapping it. */
    .brand { cursor: pointer; }
    .brand:hover .brand-name b { color: var(--gold-warm); }

    /* ── TOOL CARD (form + results live here) ───────────────────────── */
    .tool-wrap {
      max-width: var(--container);
      margin: 22px auto 0;
      padding: 0 16px;
    }
    /* Main tool card on marble — translucent cream surface with a
       refined gold border + soft drop shadow. Reads as a substantial
       parchment-on-marble object, not a flat web panel. The inset
       highlight at the top edge catches the light like polished
       paper / vellum. */
    .tool-card {
      background: var(--card-strong);
      border: 1px solid var(--line-gold);
      border-radius: var(--radius-lg);
      box-shadow:
        var(--shadow-md),
        inset 0 1px 0 rgba(255, 252, 242, 0.6);
      overflow: hidden;
      backdrop-filter: blur(2px);
    }

    /* ── FORM ───────────────────────────────────────────────────────── */
    .form {
      padding: 22px 22px 26px;
    }
    .field { margin-bottom: 18px; }
    .field-row { display: flex; gap: 10px; }
    .field-row .field { flex: 1; }
    /* 2-column form grid — Weight | Total; Tax | Asset Type. Per the
       mockup's compact layout. Stacks to single column on small
       screens so each input stays comfortably tappable. */
    .field-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-bottom: 18px;
      /* No align-items override — cells stretch to row height by default,
         so an error message in one column doesn't cause the OTHER column's
         control to move. Content inside each cell flows from the top. */
    }
    .field-grid .field {
      margin-bottom: 0;
      min-width: 0;
    }
    /* Reserve 2 lines of vertical space for every label and bottom-anchor
       the text inside that space. Result: a 1-line label and a 2-line
       label end at the same Y baseline, so the controls below them always
       start at the same Y regardless of label length. */
    .field-grid .label {
      display: flex;
      align-items: flex-end;
      min-height: 32px;
      line-height: 1.2;
      margin-bottom: 6px;
    }
    /* Match the chip-row height to the asset-type dropdown so the two
       cells in the second row of the grid end at the same Y baseline. */
    .field-grid .tax-inline-chips,
    .field-grid .asset-type-btn { min-height: 44px; }
    .field-grid .tax-inline-chips .chip { display: inline-flex; align-items: center; }
    /* Keep 2-col even on small phones — the design goal is to fit as
       much of the form as possible above the fold without scrolling.
       Labels/inputs tighten to compensate. */
    @media (max-width: 460px) {
      .field-grid { gap: 8px; }
      .field-grid .label { font-size: 10.5px; letter-spacing: 0.06em; min-height: 36px; line-height: 1.25; }
      .field-grid .input { padding: 10px 10px; }
      .field-grid .input-big { font-size: 17px; }
      .field-grid .chip-sm { padding: 7px 8px; font-size: 11px; }
      .field-grid .asset-type-btn { padding: 9px 10px; font-size: 12.5px; }
      .field-grid .tax-inline-chips,
      .field-grid .asset-type-btn { min-height: 40px; }
    }
    /* Asset Type "dropdown" — looks like a select but actually toggles
       the same .adv expander where the item/karat/rate/stones chips
       live. Embedded SVG icon at left + chevron on right matches the
       mockup's "Solid Chain (22K) ▾" affordance. */
    .asset-type-btn {
      appearance: none;
      width: 100%;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 14px 14px;
      background: var(--ivory);
      border: 1.5px solid var(--line-gold);
      border-radius: 11px;
      font-family: var(--font-body);
      font-size: 14.5px;
      font-weight: 700;
      color: var(--ink);
      cursor: pointer;
      text-align: left;
      transition: border-color 140ms ease, background 140ms ease;
    }
    .asset-type-btn:hover,
    .asset-type-btn[aria-expanded="true"] {
      border-color: var(--gold-dark);
      background: var(--paper);
    }
    .asset-type-ico {
      width: 18px;
      height: 18px;
      color: var(--gold-dark);
      flex-shrink: 0;
    }
    .asset-type-text {
      flex: 1;
      display: inline-flex;
      align-items: baseline;
      gap: 4px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .asset-type-karat {
      font-weight: 600;
      color: var(--ink-soft);
      font-size: 13px;
    }
    .asset-type-chev {
      width: 16px;
      height: 16px;
      color: var(--gold-dark);
      flex-shrink: 0;
      transition: transform 200ms ease;
    }
    .asset-type-btn[aria-expanded="true"] .asset-type-chev {
      transform: rotate(180deg);
    }
    .label {
      display: block;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--gold-deep);
      margin: 0 0 8px;
    }
    /* Item chips */
    .chips {
      display: flex; flex-wrap: wrap; gap: 8px;
    }
    .chip {
      appearance: none;
      border: 1.5px solid var(--line-gold);
      background: var(--ivory);
      color: var(--ink-soft);
      font-size: 13px; font-weight: 700;
      padding: 10px 14px;
      border-radius: 10px;
      transition: border-color 140ms ease, background 140ms ease,
                  color 140ms ease, box-shadow 140ms ease;
    }
    .chip.is-on {
      border-color: var(--gold-dark);
      background: linear-gradient(180deg, #fffbed 0%, var(--gold-soft) 100%);
      color: var(--gold-deep);
      box-shadow: inset 0 1px 0 rgba(255, 245, 210, 0.4),
                  0 1px 4px rgba(139, 105, 20, 0.10);
    }
    .chip:active { transform: scale(0.98); }
    .chip-item {
      flex: 1 1 calc(33.333% - 8px);
      min-width: 90px;
      display: flex; flex-direction: column; align-items: center; gap: 4px;
      padding: 12px 6px;
    }
    .chip-ico { font-size: 22px; line-height: 1; }
    .chip-lbl { font-size: 11.5px; }
    .chip-karat { flex: 1; padding: 11px 6px; }
    .chip-sm    { flex: 1; padding: 9px 10px; font-size: 12.5px; }

    .subpick {
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px dashed var(--line);
    }
    .subpick-lbl {
      display: block;
      font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--ink-soft);
      margin-bottom: 6px;
    }

    /* Inputs — soft cream surface (lighter than the card background)
       with a refined gold-tinted border. Focus state deepens the
       gold + adds a subtle ring for the institutional feel. */
    .input {
      position: relative;
      display: flex; align-items: center;
      background: var(--ivory);
      border: 1.5px solid var(--line-gold);
      border-radius: 11px;
      transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
    }
    .input:focus-within {
      border-color: var(--gold-dark);
      background: var(--paper);
      box-shadow: 0 0 0 3px rgba(184, 151, 82, 0.16);
    }
    .input input {
      flex: 1;
      border: 0; outline: 0;
      background: transparent;
      font-family: Georgia, serif;
      font-weight: 700;
      color: var(--ink);
      min-width: 0; width: 100%;
      text-align: left;
      -moz-appearance: textfield;
    }
    .input input::-webkit-outer-spin-button,
    .input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
    .input input::placeholder { color: #c4b894; font-weight: 400; }
    /* Input numerals — clean Inter with tabular figures. Readable,
       no fancy italic serif (which some users misread). Same family
       and size for prefix + digits so there's no baseline stagger. */
    .input input {
      font-family: var(--font-body);
      font-style: normal;
      font-weight: 600;
      font-variant-numeric: tabular-nums;
      font-feature-settings: 'tnum' 1, 'lnum' 1;
      letter-spacing: -0.01em;
      line-height: 1.2;
      color: var(--ink);
    }
    .input-big { padding: 15px 16px; }
    .input-big input { font-size: 22px; letter-spacing: -0.015em; }
    .input-mid { padding: 12px 14px; }
    .input-mid input { font-size: 18px; }
    .input-sm  { padding: 10px 12px; }
    .input-sm input  { font-size: 15px; }
    .input-cur .input-pre {
      font-family: var(--font-body);
      font-style: normal;
      font-weight: 600;
      color: var(--ink-soft);
      line-height: 1.2;
      margin-right: 6px;
    }
    .input-big.input-cur .input-pre { font-size: 22px; }
    .input-mid.input-cur .input-pre { font-size: 18px; }
    .input-sm.input-cur  .input-pre { font-size: 15px; }
    .input-unit {
      font-family: inherit; font-weight: 700;
      font-size: 13px; color: var(--ink-soft);
      margin-left: 8px; flex-shrink: 0;
    }

    /* Rate row */
    .rate-row { display: flex; gap: 8px; align-items: stretch; }
    .rate-row .input { flex: 1; }
    .rate-reset {
      appearance: none;
      border: 1.5px solid var(--gold);
      background: var(--gold-soft);
      color: var(--gold-dark);
      border-radius: 11px;
      padding: 0 14px;
      font-size: 12.5px; font-weight: 800;
      letter-spacing: 0.02em;
      display: inline-flex; align-items: center; gap: 5px;
      white-space: nowrap;
    }
    .rate-reset:active { background: #fdeecb; }
    .hint {
      margin-top: 7px;
      font-size: 11.5px;
      color: var(--ink-soft);
      min-height: 16px;
    }

    /* "+ Add details" expander */
    .more-btn {
      appearance: none;
      border: 0; background: transparent;
      font-family: inherit;
      font-size: 12.5px; font-weight: 700;
      color: var(--gold-dark);
      padding: 8px;
      text-align: center;
      width: 100%;
      display: inline-flex; align-items: center; justify-content: center; gap: 6px;
      margin-bottom: 6px;
    }

    /* ── "Click here to try a sample" button ───────────────────────────
       Premium-luxe styling: ivory-cream background with a thin gold
       inner border + a hairline outer gold rule, italic serif "Click
       here" word for editorial feel, generous padding so it doesn't
       feel like a chip. Inspired by high-end jewellery sites (Tanishq
       Mia, Bvlgari) which use cream + thin gold + serif italic for
       secondary CTAs. Sharp contrast from the bold green Check button
       below, so the visual hierarchy reads: primary action (Check) is
       the must-do, this is the "try it first" exploration path. */
    /* Random-sample CTA — slim italic link UNDER the primary submit
       button. Reads like a footnote, not a competing card. For the
       visitor without a bill (Clarity flagged this as the biggest
       bounce moment), one tap fills realistic numbers + triggers the
       verdict. Subtle, always available, doesn't dominate. */
    .random-sample-btn {
      appearance: none;
      width: 100%;
      display: block;
      padding: 10px 4px 0;
      margin: 0;
      background: transparent;
      border: 0;
      cursor: pointer;
      font-family: var(--font-body);
      font-size: 13px;
      font-weight: 500;
      font-style: italic;
      color: var(--ink-soft);
      text-align: center;
      letter-spacing: 0.005em;
      transition: color 160ms ease;
    }
    .random-sample-btn:hover {
      color: var(--gold-deep);
    }
    .random-sample-btn:hover .random-sample-em {
      color: var(--gold-dark);
      text-decoration-color: var(--gold-dark);
    }
    .random-sample-ico {
      font-size: 20px;
      line-height: 1;
      filter: drop-shadow(0 1px 1px rgba(139, 105, 20, 0.2));
      animation: dicePulse 2.4s ease-in-out infinite;
    }
    /* "Click here" stays in the same Inter family as the surrounding
       text — earlier italic-serif treatment was reading as a font
       glitch against the otherwise sans-serif page. Now it's just a
       bolder, underlined antique-gold word that pops without
       breaking typographic rhythm. */
    .random-sample-em {
      font-family: inherit;
      font-style: normal;
      font-weight: 800;
      color: var(--gold-dark);
      text-decoration: underline;
      text-decoration-thickness: 1.5px;
      text-underline-offset: 3px;
      text-decoration-color: rgba(139, 105, 20, 0.4);
    }
    .random-sample-arrow {
      font-family: var(--font-body);
      color: var(--gold-dark);
      font-weight: 400;
      margin-left: 2px;
      transition: transform 200ms ease;
    }
    .random-sample-btn:hover .random-sample-arrow { transform: translateX(3px); }
    @keyframes dicePulse {
      0%, 100% { transform: rotate(0deg) scale(1); }
      50%      { transform: rotate(8deg) scale(1.08); }
    }

    /* ── Smart-defaults summary line ───────────────────────────────────
       One-line readout of the four "advanced" inputs we hid from the
       hero: item · karat · GST · gold rate. Defaults are right for
       80%+ of users; the 20% who need to change something tap to
       expand and reveal full controls. */
    /* "For: Chain · 22K · ₹X/g ▾" summary line — restyled to read as
       a slim italic summary statement rather than a chunky button.
       Still clickable (toggles the advanced expander), still shows
       the live values, but visually understated so it doesn't compete
       with the primary inputs. */
    .defaults-summary {
      appearance: none;
      width: 100%;
      display: flex;
      align-items: baseline;
      gap: 6px;
      padding: 8px 4px;
      margin: 8px 0 14px;
      background: transparent;
      border: 0;
      border-bottom: 1px dashed var(--line-gold);
      font-family: var(--font-body);
      font-size: 12.5px;
      color: var(--ink-soft);
      cursor: pointer;
      transition: color 140ms ease, border-color 140ms ease;
      text-align: left;
      font-style: italic;
    }
    .defaults-summary:hover {
      border-bottom-color: var(--gold-dark);
      color: var(--ink);
    }
    .defaults-summary[aria-expanded="true"] .defaults-arrow {
      transform: rotate(180deg);
    }
    .defaults-lbl {
      font-size: 10.5px;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--gold-deep);
      font-style: normal;
      flex-shrink: 0;
    }
    .defaults-vals {
      flex: 1;
      min-width: 0;
      display: flex;
      align-items: baseline;
      gap: 4px;
      flex-wrap: wrap;
      font-weight: 600;
      color: var(--ink-body);
    }
    .defaults-sep {
      color: var(--ink-muted);
      font-weight: 400;
    }
    .defaults-arrow {
      font-size: 11px;
      color: var(--gold-dark);
      transition: transform 200ms ease;
      flex-shrink: 0;
      font-style: normal;
    }

    .adv {
      border: 1px dashed var(--line);
      border-radius: 11px;
      padding: 14px;
      margin-bottom: 18px;
      background: #FBF6EA;
    }
    .adv .field:last-child { margin-bottom: 0; }

    /* Submit — primary CTA. Pure CSS polished-gold plate: horizontal
       7-stop gradient for the brushed-metal sheen across the width,
       ::before for a soft top-edge highlight, ::after for an off-
       centre radial spotlight. No image dependency. */
    .submit-btn {
      position: relative;
      overflow: hidden;
      appearance: none;
      width: 100%;
      border: 0;
      background: linear-gradient(90deg,
        #bb8123 0%,
        #d8aa4c 18%,
        #f0d07c 45%,
        #f7e19b 52%,
        #efcd75 60%,
        #d7a145 82%,
        #bc8021 100%);
      color: #4d3700;
      border-radius: 12px;
      padding: 15px 16px;
      font-family: inherit;
      font-size: 15.5px; font-weight: 800;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 -3px 4px rgba(121, 78, 0, 0.18),
        0 3px 8px rgba(0, 0, 0, 0.18);
      margin-top: 4px;
      transition: filter 200ms ease, transform 200ms ease, box-shadow 200ms ease, background 200ms ease;
      cursor: pointer;
    }
    .submit-btn::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(to bottom,
        rgba(255, 255, 255, 0.35) 0%,
        rgba(255, 255, 255, 0.12) 15%,
        rgba(255, 255, 255, 0)    40%);
      pointer-events: none;
    }
    .submit-btn::after {
      content: "";
      position: absolute;
      top: 0; bottom: 0;
      width: 180px;
      left: 60%;
      background: radial-gradient(ellipse at center,
        rgba(255, 255, 255, 0.35) 0%,
        rgba(255, 255, 255, 0.18) 40%,
        transparent 75%);
      pointer-events: none;
    }
    .submit-btn:hover {
      filter: brightness(1.04);
      background: linear-gradient(90deg,
        #b97f1d 0%,
        #c89133 12%,
        #ddb05a 28%,
        #f0d07f 45%,
        #f8e59f 52%,
        #f0d17d 60%,
        #dca84f 78%,
        #c58b2b 90%,
        #b77d1b 100%);
      transform: translateY(-1px);
    }
    .submit-btn:active { transform: translateY(0); filter: brightness(0.97); }
    .err {
      color: var(--bad);
      font-size: 13px; font-weight: 700;
      text-align: center;
      margin-top: 12px;
    }
    .err:empty { display: none; }

    /* ── Inline field errors ──────────────────────────────────────────
       When the user submits with missing/invalid data, the error appears
       directly under the offending input (not at the bottom of the form
       where they can't see it). The .field wrapper gets .has-error
       which turns the input border red and adds a subtle red halo. */
    .field.has-error .input {
      border-color: var(--bad) !important;
      box-shadow: 0 0 0 3px rgba(184, 71, 47, 0.12) !important;
    }
    /* Attention pulse — fired on the empty field after Check is tapped
       while user has scrolled past the form. Quick shake + bright amber
       glow so the eye locks onto it immediately, even on mobile. The
       scroll alone wasn't enough; users were bouncing because nothing
       visually announced 'this is the thing you missed.' */
    .field-attention .input,
    .field-attention .label {
      animation: attentionShake 0.65s cubic-bezier(0.36, 0.07, 0.19, 0.97) 0s 1;
    }
    .field-attention .input {
      animation:
        attentionShake 0.65s cubic-bezier(0.36, 0.07, 0.19, 0.97) 0s 1,
        attentionGlow 1.8s ease-out 0.1s 1;
    }
    @keyframes attentionShake {
      10%, 90%  { transform: translateX(-1px); }
      20%, 80%  { transform: translateX(2px); }
      30%, 50%, 70% { transform: translateX(-4px); }
      40%, 60%  { transform: translateX(4px); }
    }
    @keyframes attentionGlow {
      0%   { box-shadow: 0 0 0 0    rgba(245, 158, 11, 0.55); border-color: #F59E0B; }
      50%  { box-shadow: 0 0 0 8px  rgba(245, 158, 11, 0.0);  border-color: #F59E0B; }
      100% { box-shadow: 0 0 0 0    rgba(245, 158, 11, 0.0);  border-color: var(--line); }
    }
    .field-error {
      color: var(--bad);
      font-size: 12px;
      font-weight: 600;
      margin-top: 7px;
      padding: 0 2px;
      display: flex;
      align-items: center;
      gap: 5px;
      animation: errorPop 200ms ease-out;
    }
    .field-error::before {
      content: '⚠';
      font-size: 13px;
      flex-shrink: 0;
    }
    @keyframes errorPop {
      from { opacity: 0; transform: translateY(-3px); }
      to   { opacity: 1; transform: none; }
    }

    /* Sample button — warm coral-red SOLID button. Sits below the gold
       primary CTA but is a different colour family entirely so the eye
       catches it without confusing it for the main "Check if it's fair"
       button. Warm enough to fit the cream+gold Indian palette, bold
       enough that no first-time visitor misses it. */
    .sample-btn {
      appearance: none;
      border: 0;
      background: linear-gradient(180deg, #E0664A 0%, #C04030 100%);
      color: #FFFFFF;
      font-family: var(--font-body);
      font-style: normal;
      font-size: 14.5px;
      font-weight: 700;
      padding: 14px 18px;
      margin: 14px 0 0;
      border-radius: 12px;
      display: block;
      cursor: pointer;
      text-align: center;
      width: 100%;
      letter-spacing: 0.2px;
      transition: all 180ms ease;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 2px 6px rgba(192, 64, 48, 0.28);
      /* Soft attention-pulse on first render so the eye lands on it
         after the page settles. Stops after 3 cycles so it doesn't
         distract from the rest of the form. */
      animation: samplePulse 1.6s ease-in-out 3;
    }
    @keyframes samplePulse {
      0%, 100% { box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 2px 6px rgba(192, 64, 48, 0.28); }
      50%      { box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.24),
        0 4px 18px rgba(192, 64, 48, 0.48); }
    }
    .sample-btn:hover {
      background: linear-gradient(180deg, #E87B5C 0%, #CC4838 100%);
      transform: translateY(-1px);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        0 4px 14px rgba(192, 64, 48, 0.40);
    }
    .sample-btn:active { transform: scale(0.99); }

    /* ── Back button (top of result panel) ─────────────────────────────
       Conventional left-arrow nav. Sits flush with the card padding so
       it visually reads as "navigation" rather than "content." Keeps
       all state intact so users can edit one number and re-check
       (vs. ↻ Check-another-piece at the bottom which is a full reset). */
    .back-btn {
      appearance: none;
      border: 0;
      background: transparent;
      color: var(--ink-soft);
      font-family: var(--font-body);
      font-size: 13px;
      font-weight: 600;
      padding: 4px 8px 14px;
      margin: 0 0 0 -4px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: color 140ms ease;
    }
    .back-btn:hover  { color: var(--gold-dark); }
    .back-btn:active { transform: translateX(-1px); }

    /* ── 3-row summary card — the new "headline answer" ────────────────
       Green for real gold value, Red for the markup (no physical
       asset), Gold for the total. Visually dominant on the result
       screen because it directly answers the headline question:
       "How much of this price is real gold?" */
    .summary-card {
      background: linear-gradient(180deg, var(--ivory) 0%, var(--paper) 100%);
      border: 1px solid var(--gold);
      border-radius: 16px;
      padding: 18px 18px 14px;
      margin: 16px 0 18px;
      box-shadow:
        inset 0 1px 0 rgba(255, 252, 242, 0.6),
        0 4px 14px rgba(139, 105, 20, 0.10);
    }
    .summary-row {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
      padding: 6px 0;
    }
    .summary-lbl {
      font-family: var(--font-body);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.04em;
      color: var(--ink-soft);
      text-transform: uppercase;
      flex: 1 1 auto;
      min-width: 0;
    }
    .summary-pct {
      display: inline-block;
      margin-left: 6px;
      font-size: 11px;
      font-weight: 600;
      text-transform: none;
      letter-spacing: 0;
      color: var(--ink-muted);
    }
    .summary-val {
      font-family: var(--font-body);
      font-weight: 700;
      font-size: 21px;
      font-variant-numeric: tabular-nums;
      letter-spacing: -0.015em;
      flex: 0 0 auto;
      white-space: nowrap;
    }
    .summary-real .summary-val {
      color: #2D6A4F;   /* forest — what you're actually getting */
    }
    .summary-extra .summary-val {
      color: var(--bad); /* burgundy — pure markup */
    }
    .summary-extra .summary-pct {
      color: var(--bad);
      font-weight: 700;
    }
    .summary-total .summary-val {
      color: var(--gold-dark);
      font-size: 24px;
    }
    .summary-divider {
      height: 1px;
      background: var(--line);
      margin: 8px 0 6px;
    }

    /* ── Collapsed depth (gauge + breakdown + targets) ──────────────────
       Customer can drill into the math if curious — but the summary card
       above already answered the headline question. */
    .details-expander {
      margin-top: 8px;
      border-top: 1px solid var(--line);
      padding-top: 6px;
    }
    .details-expander summary {
      list-style: none;
      cursor: pointer;
      font-family: var(--font-body);
      font-size: 13px;
      font-weight: 700;
      color: var(--gold-dark);
      padding: 12px 6px;
      display: flex;
      align-items: center;
      gap: 6px;
      user-select: none;
      transition: color 140ms ease;
    }
    .details-expander summary:hover { color: var(--gold-deep); }
    .details-expander summary::-webkit-details-marker { display: none; }
    .details-expander summary::before {
      content: '▸';
      display: inline-block;
      font-size: 10px;
      transition: transform 180ms ease;
      color: var(--gold);
    }
    .details-expander[open] summary::before {
      transform: rotate(90deg);
    }

    /* ── Proportional bar — visual answer to "how much is real gold?" */
    .prop-bar-wrap { margin: 14px 0 8px; }
    .prop-bar {
      display: flex;
      height: 38px;
      border-radius: 10px;
      overflow: hidden;
      background: var(--cream-soft);
      border: 1px solid var(--line);
      box-shadow: inset 0 1px 2px rgba(45, 24, 0, 0.04);
    }
    .prop-bar-seg {
      display: flex;
      align-items: center;
      justify-content: center;
      transition: width 800ms cubic-bezier(0.22, 1, 0.36, 1);
      overflow: hidden;
      white-space: nowrap;
      min-width: 0;
    }
    .prop-bar-gold {
      background: linear-gradient(180deg, #3F8A60, #2D6A4F);
    }
    .prop-bar-extra {
      background: linear-gradient(180deg, #C45B43, #9C3F2A);
    }
    .prop-bar-lbl {
      color: #FFFFFF;
      font-family: var(--font-body);
      font-size: 11.5px;
      font-weight: 700;
      letter-spacing: 0.3px;
      text-shadow: 0 1px 1px rgba(0,0,0,0.15);
      padding: 0 6px;
      display: inline-flex;
      gap: 4px;
      align-items: baseline;
    }
    .prop-bar-lbl > span:first-child {
      font-family: var(--font-body);
      font-weight: 700;
      font-size: 13px;
      font-variant-numeric: tabular-nums;
      letter-spacing: -0.01em;
    }
    /* Legend row under the bar — word labels live here so they never
       clip when one of the segments is small (e.g. 5–10% extra). */
    .prop-bar-legend {
      display: flex;
      justify-content: center;
      gap: 18px;
      margin-top: 8px;
      font-family: var(--font-body);
      font-size: 12px;
      font-weight: 600;
      color: var(--ink-soft);
      letter-spacing: 0.02em;
    }
    .prop-bar-legend-item {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .prop-bar-legend-dot {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      display: inline-block;
    }
    .prop-bar-legend-gold  { background: #2D6A4F; }
    .prop-bar-legend-extra { background: #9C3F2A; }

    /* ── Live rate freshness badge — under the rate input. Builds
         trust by showing the rate came from a live source recently. */
    .rate-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-top: 6px;
      padding: 3px 9px;
      background: rgba(45, 106, 79, 0.08);
      border: 1px solid rgba(45, 106, 79, 0.20);
      border-radius: 999px;
      font-family: var(--font-body);
      font-size: 10.5px;
      font-weight: 600;
      color: var(--success);
      letter-spacing: 0.02em;
    }
    .rate-badge.is-offline {
      background: rgba(184, 71, 47, 0.06);
      border-color: rgba(184, 71, 47, 0.18);
      color: var(--bad);
    }
    .rate-badge-dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--success);
      box-shadow: 0 0 0 0 rgba(45, 106, 79, 0.4);
      animation: ratePulse 2.4s ease-out infinite;
    }
    .rate-badge.is-offline .rate-badge-dot {
      background: var(--bad);
      animation: none;
    }
    @keyframes ratePulse {
      0%   { box-shadow: 0 0 0 0 rgba(45, 106, 79, 0.5); }
      80%  { box-shadow: 0 0 0 8px rgba(45, 106, 79, 0); }
      100% { box-shadow: 0 0 0 0 rgba(45, 106, 79, 0); }
    }

    /* ── Next-steps — action card after the bargain script */
    .next-steps {
      background: linear-gradient(180deg, #FBF6EA 0%, #FFFFFF 100%);
      border: 1px solid var(--line);
      border-left: 4px solid var(--gold);
      border-radius: 10px;
      padding: 14px 16px;
      margin-top: 14px;
    }
    .next-steps-title {
      font-family: var(--font-body) !important;
      font-size: 11px !important;
      font-weight: 700 !important;
      color: var(--gold-dark) !important;
      letter-spacing: 0.12em !important;
      text-transform: uppercase;
      border: 0 !important;
      padding: 0 0 6px !important;
      margin: 0 !important;
    }
    .next-steps-body {
      margin: 0;
      font-size: 13.5px;
      line-height: 1.55;
      color: var(--ink);
    }
    .next-steps-body b { color: var(--gold-dark); }

    /* ── Thumbs feedback row ────────────────────────────────────────── */
    .fb-row {
      margin: 16px 0 8px;
      padding: 12px 14px;
      background: #FFFFFF;
      border: 1px solid var(--line);
      border-radius: 11px;
      text-align: center;
    }
    .fb-question {
      margin: 0 0 8px;
      font-family: var(--font-body);
      font-size: 12.5px;
      font-weight: 700;
      color: var(--ink-soft);
      letter-spacing: 0.04em;
    }
    .fb-buttons {
      display: flex;
      gap: 8px;
      justify-content: center;
    }
    .fb-btn {
      appearance: none;
      border: 1.5px solid var(--line);
      background: #FFFFFF;
      color: var(--ink-body);
      font-family: var(--font-body);
      font-size: 13px;
      font-weight: 700;
      padding: 8px 18px;
      border-radius: 999px;
      cursor: pointer;
      transition: all 140ms ease;
      min-width: 84px;
    }
    .fb-btn:hover {
      border-color: var(--gold);
      background: var(--gold-soft);
    }
    .fb-btn:active { transform: scale(0.97); }
    .fb-btn.is-voted {
      pointer-events: none;
      opacity: 0.55;
    }
    .fb-btn.is-selected {
      opacity: 1;
      background: var(--gold-soft);
      border-color: var(--gold-dark);
      color: var(--gold-deep);
    }
    .fb-thanks {
      margin: 8px 0 0;
      font-family: var(--font-body);
      font-size: 12.5px;
      color: var(--success);
      font-weight: 600;
    }
    .fb-thanks.is-error { color: var(--bad); }

    /* ════════════════════════════════════════════════════════════════
       RESULT panel
       ════════════════════════════════════════════════════════════════ */
    .result {
      animation: fadeUp 0.35s ease;
      padding: 6px 22px 26px;
    }
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: none; }
    }
    /* ── Action-headline above the verdict ─────────────────────────────
       One-liner that tells a 3-second scanner what to do. Sits above
       the stamp + title so it's the first thing visible. Verdict-aware
       color: green for buy verdicts, amber for negotiate, red for walk-
       away. Bold sans for impact. */
    .action-headline {
      font-family: var(--font-body);
      font-size: 17px;
      font-weight: 800;
      line-height: 1.3;
      letter-spacing: -0.01em;
      padding: 12px 14px;
      margin: 8px 0 4px;
      border-radius: 10px;
      background: var(--cream);
      border-left: 4px solid var(--gold);
      animation: actionPop 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .action-headline:empty { display: none; }
    [data-verdict="steal"] .action-headline,
    [data-verdict="good"]  .action-headline,
    [data-verdict="fair"]  .action-headline {
      background: #EAF4ED;
      border-left-color: #2D6A4F;
      color: #1B5E3A;
    }
    [data-verdict="slightly-high"] .action-headline {
      background: #FFF1DC;
      border-left-color: #C7791A;
      color: #8A5A12;
    }
    [data-verdict="high"] .action-headline {
      background: #FBE3DC;
      border-left-color: #9C3F2A;
      color: #7C2E1F;
    }
    [data-verdict="check-stone"] .action-headline {
      background: #EEE8F8;
      border-left-color: #5A3FA0;
      color: #4A2F90;
    }
    @keyframes actionPop {
      0%   { opacity: 0; transform: translateY(-6px); }
      100% { opacity: 1; transform: translateY(0); }
    }

    /* ── "Extra = N grams more gold" comparison ────────────────────────
       Subtle italic line under the proportional bar. Translates the
       markup rupee figure into a concrete gold-grams quantity so the
       visitor can picture it. Faint accent color, not loud - we want
       it to read as a thought, not a callout. */
    .extra-compare {
      font-family: 'Playfair Display', Georgia, serif;
      font-style: italic;
      font-size: 14px;
      line-height: 1.5;
      color: var(--ink-soft);
      text-align: center;
      margin: 12px 0 4px;
      padding: 0 6px;
    }
    .extra-compare:empty { display: none; }
    .extra-compare strong {
      font-style: normal;
      font-weight: 700;
      color: var(--gold-dark);
      font-family: var(--font-body);
      font-variant-numeric: tabular-nums;
      letter-spacing: -0.01em;
    }
    [data-verdict="high"] .extra-compare strong,
    [data-verdict="slightly-high"] .extra-compare strong { color: var(--bad); }
    [data-verdict="steal"] .extra-compare strong,
    [data-verdict="good"]  .extra-compare strong,
    [data-verdict="fair"]  .extra-compare strong { color: #2D6A4F; }

    /* ── Confetti container ────────────────────────────────────────────
       Fixed-position overlay that holds 30 falling gold particles for
       1.5s when the verdict is STEAL/GOOD/FAIR. Pure CSS animation -
       no library. pointer-events: none so it never blocks UI. */
    .confetti-host {
      position: fixed;
      inset: 0;
      pointer-events: none;
      overflow: hidden;
      z-index: 9999;
    }
    .confetti-piece {
      position: absolute;
      top: -10px;
      width: 8px; height: 12px;
      border-radius: 2px;
      will-change: transform, opacity;
      animation: confettiFall 1.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }
    @keyframes confettiFall {
      0% {
        opacity: 0;
        transform: translateY(0) rotate(0deg);
      }
      10% { opacity: 1; }
      100% {
        opacity: 0;
        transform: translateY(110vh) rotate(720deg);
      }
    }

    .verdict {
      display: flex; align-items: center; gap: 16px;
      padding: 18px 0 20px;
      border-bottom: 1px solid var(--line);
      margin-bottom: 8px;
    }
    .stamp {
      flex: 0 0 auto;
      width: 96px; height: 96px;
      border-radius: 50%;
      border: 2.5px solid;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      transform: rotate(-8deg);
      text-align: center;
      padding: 0 8px;
      box-sizing: border-box;
      overflow: hidden;
    }
    /* Default text size — comfortable for 1-word stamps (STEAL/GOOD/FAIR/HIGH). */
    .stamp-big {
      font-size: 17px; font-weight: 800; line-height: 1.0;
      font-family: Georgia, serif;
      letter-spacing: -0.015em;
    }
    /* Multi-word stamps need a smaller size to fit inside the circle.
       Sized per-verdict against the WIDEST word in each label:
         SLIGHTLY = 8 chars, PAYING = 6 chars, CHECK/STONE = 5 chars. */
    [data-verdict="slightly-high"] .stamp-big { font-size: 13px; }
    [data-verdict="high"]          .stamp-big { font-size: 14.5px; }
    [data-verdict="check-stone"]   .stamp-big { font-size: 14.5px; }
    .stamp-sm {
      font-size: 8px; letter-spacing: 0.16em; text-transform: uppercase;
      margin-top: 5px;
    }
    .verdict[data-verdict="steal"]         .stamp { border-color: var(--gold-dark); color: var(--gold-dark); }
    .verdict[data-verdict="good"]          .stamp { border-color: var(--success); color: var(--success); }
    .verdict[data-verdict="fair"]          .stamp { border-color: var(--success); color: var(--success); }
    .verdict[data-verdict="slightly-high"] .stamp { border-color: var(--warn); color: var(--warn); }
    .verdict[data-verdict="high"]          .stamp { border-color: var(--bad); color: var(--bad); }
    .verdict[data-verdict="check-stone"]   .stamp { border-color: var(--warn); color: var(--warn); }

    .verdict-txt { flex: 1; min-width: 0; }
    .verdict-txt h2 {
      margin: 0 0 4px;
      font-size: 19px; line-height: 1.2;
      color: var(--ink);
    }
    .verdict-txt p {
      margin: 0;
      font-size: 13px; line-height: 1.7;
      color: var(--ink-soft);
    }
    /* Premium-over-gold callout inside the subtitle sentence. Promotes
       the "NN%" so users see at-a-glance how much extra they're paying.
       Color follows the parent verdict's data-verdict so HIGH reads red,
       STEAL/GOOD/FAIR reads green — instantly emotional. */
    .vsub-pct {
      display: inline-flex;
      align-items: baseline;
      font-family: var(--font-body);
      font-weight: 800;
      font-size: 24px;
      line-height: 1;
      color: var(--gold-deep);
      vertical-align: -3px;
      margin: 0 2px;
      font-variant-numeric: tabular-nums;
      letter-spacing: -0.02em;
      animation: vsubPctPop 700ms cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .vsub-pct-sym {
      font-size: 16px;
      font-weight: 700;
      margin-left: 1px;
      opacity: 0.85;
    }
    [data-verdict="steal"] .vsub-pct,
    [data-verdict="good"]  .vsub-pct,
    [data-verdict="fair"]  .vsub-pct { color: #2D6A4F; }
    [data-verdict="slightly-high"] .vsub-pct { color: #C7791A; }
    [data-verdict="high"]          .vsub-pct { color: #9C3F2A; }
    @keyframes vsubPctPop {
      0%   { transform: scale(0.55); opacity: 0; }
      60%  { transform: scale(1.18); opacity: 1; }
      100% { transform: scale(1); }
    }

    .sect-t {
      font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
      color: var(--gold-dark); font-weight: 700;
      margin: 14px 0 12px;
      padding-bottom: 7px;
      border-bottom: 1.5px solid var(--gold);
    }

    /* Gauge */
    .gauge {
      position: relative;
      height: 20px;
      border-radius: 10px;
      margin-top: 30px;
      background: linear-gradient(90deg,
        var(--success) 0 33%,
        var(--warn) 33% 66%,
        var(--bad) 66% 100%);
    }
    .fairzone {
      position: absolute; top: -8px;
      height: 36px;
      border-radius: 4px;
      background: rgba(63, 125, 82, 0.15);
      border: 1.5px dashed var(--success);
    }
    .fairzone::after {
      content: 'FAIR';
      position: absolute; bottom: -23px; left: 50%;
      transform: translateX(-50%);
      font-size: 9px; font-weight: 700; letter-spacing: 0.1em;
      color: var(--success);
    }
    .marker {
      position: absolute; top: -8px;
      width: 4px; height: 36px;
      background: #15110a; border-radius: 2px;
      box-shadow: 0 0 0 3px var(--cream);
      z-index: 2;
    }
    .marker::after {
      content: attr(data-lbl);
      position: absolute; top: -22px; left: 50%;
      transform: translateX(-50%);
      white-space: nowrap;
      font-size: 11.5px; font-weight: 800;
      color: #15110a;
      background: var(--cream);
      padding: 1px 5px;
      border-radius: 3px;
    }
    .scale {
      display: flex; justify-content: space-between;
      margin-top: 33px;
      font-size: 10.5px; color: var(--ink-soft);
      font-weight: 600;
    }
    .scale-mid { text-align: center; color: var(--success); }

    /* Breakdown table */
    .breakdown { width: 100%; border-collapse: collapse; }
    .breakdown td {
      padding: 9px 0;
      font-size: 14px;
      border-bottom: 1px solid #f0e9da;
    }
    .breakdown td.lab { color: var(--ink-soft); }
    .breakdown td.val {
      text-align: right;
      font-family: var(--font-body);
      font-weight: 700;
      font-variant-numeric: tabular-nums;
      letter-spacing: -0.01em;
    }
    .breakdown tr.row-tot td {
      border-bottom: none;
      padding-top: 12px;
      font-size: 15px;
    }
    .breakdown tr.row-tot td.lab { color: var(--ink); font-weight: 800; }
    .breakdown tr.row-tot td.val { color: var(--gold-dark); font-size: 17px; }

    /* Targets */
    .targets {
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: 11px;
      padding: 4px 14px;
    }
    .target-row {
      display: flex; justify-content: space-between;
      font-size: 13px;
      padding: 10px 0;
      border-bottom: 1px solid #f0e9da;
    }
    .target-row:last-child { border-bottom: none; }
    .target-row .v { font-weight: 700; font-variant-numeric: tabular-nums; }
    .target-row.you .v { color: var(--bad); }

    /* Reason + script */
    .reason {
      font-size: 13.5px; line-height: 1.6;
      color: var(--ink);
      background: #FBF6EA;
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 14px 16px;
    }
    .reason b { color: var(--gold-dark); }
    .script {
      margin-top: 12px;
      background: #17120b;
      color: #f4ead2;
      border-radius: 12px;
      padding: 18px 18px 16px;
      position: relative;
      font-size: 14px; line-height: 1.55;
    }
    .script-lbl {
      font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase;
      color: var(--gold); font-weight: 800;
      margin-bottom: 7px;
    }
    .script-say {
      font-family: var(--font-body);
      font-weight: 500;
      font-style: normal;
    }
    .copy-btn {
      appearance: none;
      position: absolute; top: 13px; right: 13px;
      background: rgba(201, 168, 76, 0.18);
      border: 1px solid rgba(201, 168, 76, 0.4);
      color: var(--gold);
      border-radius: 7px;
      font-family: inherit;
      font-size: 10.5px; font-weight: 700;
      padding: 5px 10px;
    }
    .copy-btn:active { background: rgba(201, 168, 76, 0.32); }

    .share-btn {
      appearance: none;
      width: 100%;
      margin-top: 12px;
      border: 1.5px solid #25D366;
      background: var(--paper);
      color: #1a8a47;
      border-radius: 11px;
      padding: 13px;
      font-family: inherit;
      font-size: 14px; font-weight: 700;
      display: inline-flex; align-items: center; justify-content: center;
      gap: 8px;
    }
    .share-btn:active { background: #f0faf3; }

    .foot-disclaimer {
      margin-top: 16px;
      font-size: 11.5px; line-height: 1.55;
      color: var(--ink-soft);
    }
    .foot-disclaimer b { color: var(--ink); }

    .again-btn {
      appearance: none;
      width: 100%;
      margin-top: 16px;
      border: 1.5px solid var(--line);
      background: var(--paper);
      color: var(--gold-dark);
      border-radius: 11px;
      padding: 14px;
      font-family: inherit;
      font-size: 14px; font-weight: 700;
      display: inline-flex; align-items: center; justify-content: center;
      gap: 6px;
    }
    .again-btn:active { background: var(--cream); }

    /* ── Front-page "Find Best Gold Jewellery Dealers" card ─────────────
       A parallel CTA to the FairGold check - same visibility, same
       prominence, so visitors who aren't here for a price check still
       have a clear action. Same .tool-wrap centring pattern (max-width
       + width: calc + margin auto) that the form card and trust block
       use, so it never falls into the 'pinned to left' alignment trap. */
    .home-dealers {
      max-width: var(--container);
      width: calc(100% - 32px);
      margin: 18px auto 0;
      box-sizing: border-box;
    }
    .home-dealers.hidden { display: none; }
    .home-dealers-divider {
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-body);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--ink-muted);
      margin: 0 0 14px;
      gap: 12px;
    }
    .home-dealers-divider::before,
    .home-dealers-divider::after {
      content: '';
      flex: 1;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--line-gold), transparent);
      max-width: 110px;
    }
    .home-dealers-card {
      appearance: none;
      width: 100%;
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 18px 20px;
      background: var(--card-strong);
      border: 1px solid var(--gold);
      border-radius: 14px;
      cursor: pointer;
      transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
      text-align: left;
      font-family: var(--font-body);
      box-shadow:
        inset 0 1px 0 rgba(255, 252, 242, 0.6),
        0 4px 14px rgba(139, 105, 20, 0.12);
    }
    .home-dealers-card:hover {
      transform: translateY(-2px);
      box-shadow:
        inset 0 1px 0 rgba(255, 252, 242, 0.7),
        0 8px 22px rgba(139, 105, 20, 0.18);
      border-color: var(--gold-dark);
    }
    .home-dealers-card:active { transform: scale(0.99); }
    .home-dealers-ico {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      flex-shrink: 0;
      background: linear-gradient(135deg, var(--gold-soft) 0%, #fffbed 100%);
      border: 1px solid var(--line-gold);
      border-radius: 10px;
    }
    .home-dealers-body {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 3px;
      min-width: 0;
    }
    .home-dealers-title {
      font-size: 15.5px;
      font-weight: 800;
      color: var(--ink);
      line-height: 1.3;
      letter-spacing: -0.005em;
    }
    .home-dealers-sub {
      font-size: 12.5px;
      font-weight: 500;
      color: var(--ink-soft);
      line-height: 1.45;
    }
    .home-dealers-arrow {
      flex-shrink: 0;
      font-size: 18px;
      color: var(--gold-dark);
      transition: transform 200ms ease;
      display: inline-flex;
      align-items: center;
    }
    .home-dealers-card:hover .home-dealers-arrow { transform: translateX(4px); }
    @media (max-width: 480px) {
      .home-dealers-card { padding: 16px 16px; gap: 12px; }
      .home-dealers-ico  { width: 36px; height: 36px; }
      .home-dealers-ico .icon { width: 22px; height: 22px; }
      .home-dealers-title { font-size: 14.5px; }
      .home-dealers-sub  { font-size: 11.5px; }
      .home-dealers-arrow { font-size: 16px; }
    }

    /* ── TRUST STRIP (cross-pollination to /for-jewelers) ────────────── */
    .trust {
      max-width: var(--container);
      width: calc(100% - 32px);
      margin: 28px auto 0;
      padding: 24px;
      background: var(--card-strong);
      border: 1px solid var(--line-gold);
      border-radius: var(--radius-lg);
      box-sizing: border-box;
      text-align: center;
      box-shadow:
        inset 0 1px 0 rgba(255, 252, 242, 0.6),
        0 4px 14px rgba(139, 105, 20, 0.10);
    }
    .trust h3 {
      font-size: 16px; line-height: 1.3;
      color: var(--ink);
      margin: 0 0 8px;
    }
    .trust p {
      margin: 0 0 14px;
      font-size: 13.5px; line-height: 1.55;
      color: var(--ink-soft);
    }
    .trust-cta {
      display: inline-block;
      background: var(--ink);
      color: var(--paper);
      text-decoration: none;
      padding: 10px 18px;
      border-radius: 999px;
      font-size: 13px; font-weight: 700;
      letter-spacing: 0.02em;
    }
    .trust-cta:hover { background: var(--gold-dark); }

    /* ── FOOTER MOTIF + FOOTER ───────────────────────────────────────── */
    /* Decorative repeating gold lozenge pattern that sits just above
       the footer. Gives the page a refined ornamental flourish without
       requiring an image asset. Tiles seamlessly via SVG pattern. */
    .footer-motif {
      max-width: var(--container);
      margin: 32px auto 0;
      padding: 0 16px;
      opacity: 0.65;
    }
    .footer-motif-svg {
      width: 100%;
      height: 16px;
      display: block;
    }
    footer {
      max-width: var(--container);
      margin: 14px auto 0;
      padding: 16px;
      text-align: center;
      font-size: 11.5px;
      color: var(--ink-soft);
    }
    footer .legal { display: block; margin-top: 4px; font-style: italic; }

    /* ── HELPERS ────────────────────────────────────────────────────── */
    .hidden { display: none !important; }

    /* ── Rate-confirmation modal (bottom-sheet on mobile, centred on desktop) */
    .rate-modal {
      position: fixed;
      inset: 0;
      background: rgba(15, 8, 0, 0.55);
      z-index: 100;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      padding: 0;
      animation: rateModalFade 220ms ease-out;
    }
    @media (min-width: 600px) {
      .rate-modal { align-items: center; padding: 24px; }
    }
    @keyframes rateModalFade {
      from { background: rgba(15, 8, 0, 0); }
      to   { background: rgba(15, 8, 0, 0.55); }
    }
    .rate-modal-card {
      width: 100%;
      max-width: 480px;
      background: var(--card-strong);
      border: 1px solid var(--line-gold);
      border-radius: 20px 20px 0 0;
      padding: 22px 22px 24px;
      box-shadow:
        inset 0 1px 0 rgba(255, 252, 242, 0.6),
        0 -8px 32px rgba(15, 8, 0, 0.22);
      animation: rateModalSlide 260ms cubic-bezier(0.22, 1, 0.36, 1);
      backdrop-filter: blur(2px);
    }
    @media (min-width: 600px) {
      .rate-modal-card { border-radius: 20px; padding: 26px 28px; }
    }
    @keyframes rateModalSlide {
      from { transform: translateY(40px); opacity: 0; }
      to   { transform: translateY(0); opacity: 1; }
    }
    .rate-modal-title {
      font-family: var(--font-display);
      font-size: 20px;
      font-weight: 700;
      color: var(--ink);
      margin: 0 0 10px;
    }
    /* Inline-number helper: drops a digit (or short numeric token) into
       a Playfair-serif title in clean Inter sans-serif. Keeps the
       editorial "voice" on the words while letting numbers read in the
       same bank-style typography as everywhere else on the page. */
    .num-inline {
      font-family: var(--font-body);
      font-weight: 800;
      font-variant-numeric: tabular-nums;
      font-feature-settings: 'tnum' 1, 'lnum' 1;
      letter-spacing: -0.02em;
    }
    .rate-modal-body {
      font-family: var(--font-body);
      font-size: 13.5px;
      line-height: 1.55;
      color: var(--ink-body);
      margin: 0 0 18px;
    }
    .rate-modal-body b {
      color: var(--gold-dark);
      font-weight: 700;
    }
    .rate-modal-yes { margin: 0 0 10px; }
    .rate-modal-change {
      appearance: none;
      width: 100%;
      border: 1.5px solid var(--line);
      background: transparent;
      color: var(--ink-soft);
      font-family: inherit;
      font-size: 13.5px;
      font-weight: 600;
      padding: 12px;
      border-radius: 11px;
      cursor: pointer;
      transition: all 140ms ease;
    }
    .rate-modal-change:hover {
      border-color: var(--gold);
      background: var(--gold-soft);
      color: var(--gold-deep);
    }

    /* ── Inline GST chips under the Total field ──────────────────── */
    .tax-inline {
      margin-top: 8px;
      padding: 8px 10px;
      background: var(--gold-soft);
      border: 1px solid var(--line-gold);
      border-radius: 10px;
    }
    .tax-inline-label {
      display: block;
      font-family: var(--font-body);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: var(--gold-deep);
      margin-bottom: 6px;
    }
    .tax-inline-chips { gap: 6px; }
    .tax-inline-chips .chip { padding: 8px 10px; font-size: 12px; }

    /* ── "What I'd do next" help modal ─────────────────────────────── */
    .help-modal-card { max-width: 460px; }
    .help-modal-verdict {
      display: inline-block;
      font-family: var(--font-body);
      font-size: 10.5px;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      padding: 4px 10px;
      border-radius: 999px;
      margin-bottom: 10px;
      background: var(--cream);
      color: var(--ink-soft);
    }
    .help-modal-verdict.is-good     { background: #E8F5EE; color: #1B5E3A; }
    .help-modal-verdict.is-fair     { background: #EAF4ED; color: #2D6A4F; }
    .help-modal-verdict.is-steal    { background: #DFF3E5; color: #14502E; }
    .help-modal-verdict.is-slightly { background: #FFF1DC; color: #8A5A12; }
    .help-modal-verdict.is-high     { background: #FBE3DC; color: #9C3F2A; }
    .help-modal-verdict.is-stone    { background: #EEE8F8; color: #5A3FA0; }
    /* Script callout — the actual negotiation line. Styled like the
       page's existing .script block so the modal and page feel
       consistent. */
    .help-script {
      background: #FFFBEC;
      border: 1px solid #E8D9A0;
      border-radius: 12px;
      padding: 14px 14px 12px;
      margin: 14px 0 14px;
    }
    .help-script-label {
      font-family: var(--font-body);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--gold-deep);
      margin-bottom: 8px;
    }
    .help-script-quote {
      font-family: var(--font-body);
      font-size: 15px;
      font-weight: 500;
      line-height: 1.55;
      color: var(--ink);
      margin-bottom: 12px;
    }
    .help-script-actions {
      display: flex;
      gap: 8px;
    }
    .help-script-btn {
      flex: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 9px 10px;
      background: #FFFFFF;
      border: 1.5px solid var(--gold);
      border-radius: 8px;
      color: var(--gold-deep);
      font-family: var(--font-body);
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      transition: all 140ms ease;
    }
    .help-script-btn:hover { background: var(--gold-soft); }
    .help-script-btn:active { transform: scale(0.97); }
    .help-script-btn-wa {
      background: #25D366;
      border-color: #25D366;
      color: #FFFFFF;
    }
    .help-script-btn-wa:hover { background: #1FBA59; }
    /* Dealers tile — coming-soon teaser inside the Negotiate modal */
    .help-dealers {
      display: flex;
      align-items: center;
      gap: 12px;
      width: 100%;
      padding: 12px 14px;
      margin-bottom: 10px;
      background: linear-gradient(135deg, #FAF3E0 0%, #F2E8C9 100%);
      border: 1.5px solid var(--gold);
      border-radius: 12px;
      cursor: pointer;
      transition: all 160ms ease;
      text-align: left;
    }
    .help-dealers:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(139, 105, 20, 0.18); }
    .help-dealers:active { transform: scale(0.99); }
    .help-dealers-ico { font-size: 22px; }
    .help-dealers-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
    .help-dealers-title {
      font-family: var(--font-body);
      font-size: 14px;
      font-weight: 700;
      color: var(--ink);
    }
    .help-dealers-sub {
      font-family: var(--font-body);
      font-size: 11.5px;
      color: var(--ink-soft);
    }
    .help-dealers-arrow {
      font-family: var(--font-body);
      font-size: 18px;
      font-weight: 700;
      color: var(--gold-deep);
    }
    /* On-page variant — promoted from inside the modal to the result
       page so every visitor sees it. Slightly bigger + a soft pulse on
       the icon to draw the eye without being obnoxious. */
    .help-dealers-inline {
      margin: 4px 0 12px;
      padding: 14px 16px;
    }
    .help-dealers-inline .help-dealers-ico {
      font-size: 26px;
      animation: dealerPulse 2.4s ease-in-out infinite;
    }
    .help-dealers-inline .help-dealers-title { font-size: 15px; }
    .help-dealers-inline .help-dealers-sub   { font-size: 12px; }
    @keyframes dealerPulse {
      0%, 100% { transform: scale(1); }
      50%      { transform: scale(1.08); }
    }
    /* Dealers waitlist mini card */
    .dealers-soon-card { max-width: 440px; text-align: center; }
    .dealers-soon-ico {
      font-size: 42px;
      margin-bottom: 4px;
    }
    .dealers-success-ico {
      font-size: 48px;
      margin-bottom: 6px;
    }
    .dealers-form {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-top: 14px;
      text-align: left;
    }
    .dealers-field { display: flex; flex-direction: column; gap: 4px; }
    .dealers-label {
      font-family: var(--font-body);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: var(--ink-soft);
    }
    .dealers-input {
      font-family: var(--font-body);
      font-size: 15px;
      font-weight: 500;
      color: var(--ink);
      padding: 10px 12px;
      background: var(--paper);
      border: 1.5px solid var(--line);
      border-radius: 9px;
      outline: 0;
      transition: border-color 140ms ease, box-shadow 140ms ease;
      font-variant-numeric: tabular-nums;
    }
    .dealers-input:focus {
      border-color: var(--gold);
      box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.14);
    }
    .dealers-input::placeholder { color: #c4b894; }
    .dealers-error {
      font-family: var(--font-body);
      font-size: 12.5px;
      color: var(--bad);
      padding: 8px 10px;
      background: rgba(156, 63, 42, 0.07);
      border-left: 3px solid var(--bad);
      border-radius: 6px;
      margin-top: -2px;
    }
    .dealers-form .submit-btn { margin-top: 4px; }
    .dealers-form .submit-btn:disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }

    /* ── Dealer search (State 3 inside the dealers modal) ─────────────── */
    .dealers-soon-card:has(#dealersSearchState:not(.hidden)) { max-width: 560px; }
    .dealers-search-sub { font-size: 13px; color: var(--ink-soft); margin-bottom: 14px; }
    .dealers-search-bar {
      display: flex;
      gap: 8px;
      margin-bottom: 10px;
    }
    .dealers-search-bar .dealers-input { flex: 1; }
    .dealers-search-go {
      flex-shrink: 0;
      padding: 0 18px;
      min-width: 0;
    }
    .dealers-search-status {
      font-family: var(--font-body);
      font-size: 12.5px;
      color: var(--ink-soft);
      min-height: 18px;
      margin: 4px 0 8px;
      text-align: center;
    }
    .dealers-results {
      max-height: 50vh;
      overflow-y: auto;
      margin: 6px 0 12px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      text-align: left;
    }
    .dealer-card {
      padding: 12px 14px;
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: 10px;
      transition: border-color 140ms ease, box-shadow 140ms ease;
    }
    .dealer-card:hover {
      border-color: var(--gold);
      box-shadow: 0 4px 12px rgba(139, 105, 20, 0.10);
    }
    .dealer-card-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 4px;
    }
    .dealer-card-name {
      font-family: var(--font-body);
      font-size: 14.5px;
      font-weight: 800;
      color: var(--ink);
      letter-spacing: -0.01em;
    }
    .dealer-card-verified {
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      gap: 3px;
      padding: 2px 7px;
      background: #E7F6ED;
      color: #1B5E3A;
      font-size: 9.5px;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      border-radius: 999px;
    }
    .dealer-card-tagline {
      font-family: var(--font-body);
      font-size: 12px;
      color: var(--ink-soft);
      font-style: italic;
      margin: 0 0 8px;
    }
    .dealer-card-meta {
      font-family: var(--font-body);
      font-size: 11.5px;
      color: var(--ink-muted);
      margin-bottom: 8px;
      line-height: 1.4;
    }
    .dealer-card-offers {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      margin-bottom: 10px;
    }
    .dealer-card-offer {
      font-family: var(--font-body);
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: 0.02em;
      color: var(--gold-deep);
      padding: 3px 8px;
      background: rgba(201, 168, 76, 0.14);
      border-radius: 999px;
    }
    .dealer-card-actions {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }
    .dealer-card-btn {
      flex: 1;
      min-width: 100px;
      appearance: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      padding: 8px 10px;
      font-family: var(--font-body);
      font-size: 12px;
      font-weight: 700;
      color: var(--ink);
      background: var(--paper);
      border: 1.5px solid var(--gold);
      border-radius: 8px;
      cursor: pointer;
      text-decoration: none;
      transition: all 140ms ease;
    }
    .dealer-card-btn-wa {
      background: #25D366;
      border-color: #25D366;
      color: #fff;
    }
    .dealer-card-btn:hover { transform: translateY(-1px); }
    .dealer-card-btn-wa:hover { background: #1FBA59; }

    /* ── Sanity-check modal hint list ──────────────────────────────── */
    .sanity-hints-title {
      font-family: var(--font-body);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: var(--ink-soft);
      margin: 14px 0 8px;
    }
    .sanity-hints {
      list-style: none;
      padding: 0;
      margin: 0 0 16px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .sanity-hints li {
      font-family: var(--font-body);
      font-size: 13px;
      line-height: 1.45;
      color: var(--ink-body);
      padding: 8px 12px;
      background: var(--cream);
      border-left: 3px solid var(--gold);
      border-radius: 6px;
    }

    /* ── Quick actions row (3 tiles) ───────────────────────────────── */
    .quick-actions {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      margin: 14px 0 8px;
    }
    .quick-btn {
      appearance: none;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      padding: 14px 6px;
      background: var(--paper);
      border: 1.5px solid var(--line);
      border-radius: 12px;
      cursor: pointer;
      transition: all 160ms ease;
      box-shadow: 0 1px 2px rgba(45, 24, 0, 0.04);
    }
    .quick-btn:hover {
      border-color: var(--gold);
      background: var(--gold-soft);
      transform: translateY(-1px);
      box-shadow: 0 3px 8px rgba(139, 105, 20, 0.12);
    }
    .quick-btn:active { transform: scale(0.97); }
    /* Primary tile — visually weighted so users notice it first.
       Used for the "Need help?" CTA which is the most useful action. */
    .quick-btn-primary {
      background: var(--gold-soft);
      border-color: var(--gold);
    }
    .quick-btn-primary:hover {
      background: #FAEFC8;
    }
    .quick-ico {
      font-size: 22px;
      line-height: 1;
    }
    .quick-lbl {
      font-family: var(--font-body);
      font-size: 11.5px;
      font-weight: 700;
      color: var(--ink-body);
      text-align: center;
      line-height: 1.2;
    }
    @media (max-width: 380px) {
      .quick-ico { font-size: 20px; }
      .quick-lbl { font-size: 10.5px; }
    }

    /* ── "More below" scroll hint (bouncing chevron) ───────────────── */
    .scroll-more {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      margin: 12px 0 4px;
      padding: 8px;
      color: var(--ink-muted);
      font-family: var(--font-body);
      font-size: 11.5px;
      font-weight: 600;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      cursor: pointer;
      transition: opacity 240ms ease;
      animation: scrollMoreBounce 1.6s ease-in-out infinite;
    }
    .scroll-more.is-hidden {
      opacity: 0;
      pointer-events: none;
      animation: none;
    }
    .scroll-more-chev {
      font-size: 18px;
      line-height: 1;
    }
    @keyframes scrollMoreBounce {
      0%, 100% { transform: translateY(0); }
      50%      { transform: translateY(4px); }
    }

    @media (max-width: 480px) {
      .top-nav-inner { padding: 10px 12px; }
      .for-jewelers-link { font-size: 12px; padding: 5px 8px; }
      .hero { padding: 0 12px; }
      .hero-headline { font-size: 26px; }
      .tool-wrap { padding: 0 12px; }
      .form { padding: 18px 16px 22px; }
      .result { padding: 6px 16px 22px; }
      .verdict { gap: 12px; }
      .stamp { width: 80px; height: 80px; }
    }