:root{
      --gold: #D4A017;
      --gold-2: #c5a059;
      --navy: #1A2B3C;
      --navy-2: #0F172A;
      --cream: #F9F9F7;
      --ink: #1a202c;
      --muted: #4a5568;
    }

    html{ scroll-behavior:smooth; }
    body{
      font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
      background: var(--cream);
      color: var(--muted);
    }
    .logo-font{ font-family: "Playfair Display", serif; }
    .serif-title, h1, h2, h3{ font-family: "Playfair Display", serif; }

    /* Shared utility colors (kept to reduce repeated inline styles) */
    .bg-custom-gold{ background-color: var(--gold); }
    .text-custom-gold{ color: var(--gold); }
    .text-custom-navy{ color: var(--navy); }
    .accent-gold{ color: var(--gold-2); }
    .bg-dark-navy{ background-color: var(--navy-2); }

    /* Hero background (grid) */
    .hero-body{
      background-color:#fdfbf7;
      background-image:
        linear-gradient(to right, rgba(0,0,0,0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0,0,0,0.03) 1px, transparent 1px);
      background-size: 40px 40px;
    }

    /* Sub-sections base colors that were previously duplicated */
    .section2-body{ background-color:#0f172a; color:#f8fafc; }
    .section3-body{ background-color:#F9F7F2; color:#334155; }
    .section4-body{ background-color:#ffffff; color:#1a202c; }
    .section5-body{ background-color:#ffffff; color:#1a202c; }
    .footer-body{ background-color:#0a1128; color:#94a3b8; }

    /* Cards/visuals */
    .card-border{ border: 1px solid rgba(255,255,255,0.10); }
    .card-bg{ background-color:#f8f9f8; }
    .icon-bg{ background-color:#1e293b; }
    .card-shadow{ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); }

    /* Reveal animation (per section / element) */
    [data-reveal]{
      opacity: 0;
      transform: translate3d(0, 18px, 0);
      transition: opacity 650ms ease, transform 650ms ease;
      will-change: opacity, transform;
    }
    [data-reveal].is-visible{
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
    /* Optional stagger */
    [data-reveal][data-delay="1"]{ transition-delay: 90ms; }
    [data-reveal][data-delay="2"]{ transition-delay: 170ms; }
    [data-reveal][data-delay="3"]{ transition-delay: 250ms; }
    [data-reveal][data-delay="4"]{ transition-delay: 330ms; }

    /* Sticky header polish */
    .site-header{
      position: sticky;
      top: 0;
      z-index: 50;
      background: rgba(249,249,247,0.88);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border-bottom: 1px solid rgba(17,24,39,0.06);
      transition: box-shadow 220ms ease, background 220ms ease;
    }
    .site-header.is-scrolled{
      background: rgba(249,249,247,0.94);
      box-shadow: 0 12px 28px rgba(2,6,23,0.06);
    }

    .nav-link{ color:#4A5568; }
    .nav-link:hover{ color:#111827; }
    .nav-link.is-active{ color:#111827; }

    /* Reduced motion */
    @media (prefers-reduced-motion: reduce){
      html{ scroll-behavior:auto; }
      [data-reveal]{ opacity: 1; transform:none; transition:none; }
      .site-header{ transition:none; }
    }


    .custom-chart-body { font-family: 'Inter', sans-serif; background-color:#0f172a; }

    .panel { opacity: 0; transform: translateY(6px); pointer-events: none; position: absolute; width: 100%; }
    .panel.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; position: relative; }
    .panel { transition: opacity 250ms ease, transform 250ms ease; }

    .tip {
      position: absolute; z-index: 60;
      background: rgba(15, 23, 42, 0.95);
      border: 1px solid rgba(148, 163, 184, 0.25);
      color: #e2e8f0; padding: 10px 12px; border-radius: 12px;
      font-size: 12px; line-height: 1.25;
      box-shadow: 0 20px 40px rgba(0,0,0,0.35);
      pointer-events: none; transform: translate(-50%, -110%);
      white-space: nowrap; display: none;
    }
    .tip strong { color: #fbbf24; font-weight: 700; }

    .chart-wrap { position: relative; height: 280px; width: 100%; }
    @media (min-width: 768px) { .chart-wrap { height: 310px; } }

    /* Slider styling */
    input[type=range] {
      -webkit-appearance: none; appearance: none;
      width: 100%; height: 4px; border-radius: 4px;
      background: rgba(148,163,184,0.2); outline: none;
    }
    input[type=range]::-webkit-slider-thumb {
      -webkit-appearance: none; appearance: none;
      width: 16px; height: 16px; border-radius: 50%;
      background: #eab308; cursor: pointer;
      box-shadow: 0 0 0 3px rgba(234,179,8,0.2);
      transition: box-shadow 0.2s;
    }
    input[type=range]::-webkit-slider-thumb:hover {
      box-shadow: 0 0 0 6px rgba(234,179,8,0.25);
    }
    input[type=range]::-moz-range-thumb {
      width: 16px; height: 16px; border-radius: 50%;
      background: #eab308; cursor: pointer; border: none;
    }

    /* Number input */
    input[type=number] {
      background: rgba(15,18,36,0.6);
      border: 1px solid rgba(148,163,184,0.2);
      color: #e2e8f0; border-radius: 8px;
      padding: 6px 10px; font-size: 13px; width: 100%;
      outline: none; transition: border-color 0.2s;
    }
    input[type=number]:focus { border-color: rgba(234,179,8,0.6); }
    input[type=number]::-webkit-inner-spin-button { opacity: 0.4; }

    /* Tag pill */
    .pill {
      background: rgba(234,179,8,0.12);
      border: 1px solid rgba(234,179,8,0.25);
      color: #fbbf24; border-radius: 999px;
      padding: 2px 10px; font-size: 11px; font-weight: 600;
      white-space: nowrap;
    }

    /* Stat change indicator */
    .change-up { color: #4ade80; }
    .change-down { color: #f87171; }

    .panel-container { position: relative; min-height: 620px; }


    .faqs-body {
            background-color: #ffffff;
            font-family: 'Playfair Display', serif;
        }
        .faq-container {
            max-width: 900px;
            margin: 60px auto;
            padding: 0 20px;
        }
        .faq-item {
            background-color: #f9f8f6;
            border: 1px solid #e5e1da;
            border-radius: 12px;
            margin-bottom: 16px;
            padding: 28px 32px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            transition: background-color 0.2s ease;
        }
        .faq-item:hover {
            background-color: #f3f1ed;
        }
        .faq-question {
            font-size: 1.25rem;
            color: #1a2433;
            font-weight: 600;
            letter-spacing: -0.01em;
        }
        .faq-icon {
            color: #1a2433;
            font-size: 0.8rem;
        }