:root {
      --bg: #f5f0e8;
      --bg2: #ede6d6;
      --bg3: #e4dbc8;
      --border: #c8b89a;
      --gold: #8b6914;
      --gold-dim: #b8922a;
      --gold-light: #d4aa50;
      --burgundy: #5c1a2a;
      --burgundy-dark: #3d1019;
      --burgundy-mid: #7a2535;
      --red: #8b1a1a;
      --green: #1a4d2a;
      --text: #1e0e08;
      --text-dim: #7a5c45;
      --chart-bg: #ffffff;
      --chart-grid: #ede6d6;
      --chart-tick: #9a7a60;
      --ingredient-bg: #ffffff;
      --stat-bg: #ede6d6;
      --hero-price-color: #3d1019;
    }

    [data-theme="dark"] {
      --bg: #0d0d0b;
      --bg2: #141410;
      --bg3: #1c1c17;
      --border: #2a2a22;
      --gold: #e8a020;
      --gold-dim: #a06c10;
      --gold-light: #e8a020;
      --burgundy: #2a2a22;
      --burgundy-dark: #0a0a08;
      --burgundy-mid: #1a1a14;
      --red: #d04040;
      --green: #4a9a5a;
      --text: #e8e0cc;
      --text-dim: #706860;
      --chart-bg: #141410;
      --chart-grid: #1c1c17;
      --chart-tick: #504840;
      --ingredient-bg: #141410;
      --stat-bg: #141410;
      --hero-price-color: #f0e6cc;
    }

    html { transition: background 0.3s, color 0.3s; }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      background: var(--bg);
      color: var(--text);
      font-family: 'IBM Plex Sans', sans-serif;
      min-height: 100vh;
      overflow-x: hidden;
      transition: background 0.3s, color 0.3s;
    }

    /* Faint paper texture overlay */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      opacity: 0.045;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='paper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23paper)'/%3E%3C/svg%3E");
      background-size: 400px 400px;
    }


    .container {
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 24px;
      position: relative;
      z-index: 1;
    }

    /* ── HEADER ── */
    header {
      background: var(--burgundy-dark);
      border-bottom: 4px solid var(--gold);
      padding: 0;
      transition: background 0.3s, border-color 0.3s;
    }

    .header-top {
      background: var(--burgundy);
      padding: 10px 0 8px;
      border-bottom: 1px solid var(--burgundy-mid);
    }

    .header-top-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .header-main {
      padding: 18px 0 14px;
    }

    .header-inner {
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      gap: 16px;
      flex-wrap: wrap;
    }

    .header-inner > div:first-child {
      text-align: center;
    }

    .header-inner > div:last-child {
      position: absolute;
      right: 0;
    }

    .header-right {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 6px;
    }

    .header-buttons {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .logo {
      font-family: 'Playfair Display', serif;
      font-size: 1.8rem;
      font-weight: 900;
      letter-spacing: 0.04em;
      color: #f0e8cc;
      text-transform: uppercase;
    }

    .logo span {
      color: var(--gold-light);
    }

    .logo-divider {
      width: 100%;
      height: 1px;
      background: linear-gradient(to right, transparent, var(--gold-light), transparent);
      margin: 4px 0 6px;
    }

    .logo-tagline {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.58rem;
      letter-spacing: 0.3em;
      text-transform: uppercase;
      color: var(--gold-dim);
      display: block;
      opacity: 0.8;
    }

    .header-date-weather {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.58rem;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.75);
      text-align: right;
    }

    .header-meta {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.7rem;
      color: rgba(240, 232, 204, 0.5);
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    /* ── HERO PRICE ── */
    .hero {
      padding: 28px 0 28px;
      border-bottom: 2px solid var(--border);
    }

    /* ── HERO BADGE CARD ── */
    .hero-badge {
      background: linear-gradient(
        145deg,
        #5c1a2a 0%,
        #3d1019 45%,
        #521525 100%
      );
      border-radius: 20px;
      padding: 36px 40px 32px;
      box-shadow:
        0 4px 6px rgba(0,0,0,0.07),
        0 12px 32px rgba(61,16,25,0.18),
        0 0 0 1px rgba(232,180,80,0.3),
        0 0 8px 2px rgba(212,170,80,0.1),
        inset 0 1px 0 rgba(255,255,255,0.1),
        inset 0 0 0 1px rgba(212,170,80,0.12),
        inset 0 -2px 0 rgba(212,170,80,0.2);
      position: relative;
      overflow: hidden;
      flex: 1;
      min-width: 280px;
      animation: hero-glow-pulse 4.5s ease-in-out infinite;
    }

    [data-theme="dark"] .hero-badge {
      background: linear-gradient(
        145deg,
        #2a1208 0%,
        #1a0f06 45%,
        #0f0804 100%
      );
      box-shadow:
        0 4px 6px rgba(0,0,0,0.3),
        0 12px 32px rgba(0,0,0,0.4),
        0 0 0 1px rgba(232,160,32,0.25),
        0 0 8px 2px rgba(212,170,80,0.12),
        inset 0 1px 0 rgba(255,255,255,0.04);
    }


    /* ── HERO BADGE SHINE ── */
    @keyframes badgeShine {
      0%   { left: -80%; }
      100% { left: 120%; }
    }

    .hero-shine {
      position: absolute;
      top: -10%;
      left: -80%;
      width: 45%;
      height: 120%;
      background: linear-gradient(
        105deg,
        transparent 20%,
        rgba(255,248,220,0.14) 50%,
        transparent 80%
      );
      transform: skewX(-15deg);
      pointer-events: none;
      z-index: 2;
      opacity: 0;
      border-radius: 2px;
    }

    .hero-badge:hover .hero-shine {
      opacity: 1;
      animation: badgeShine 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }

    /* ── SIDE CARD SHINE (shared) ── */
    .card-shine {
      position: absolute;
      top: -10%;
      left: -80%;
      width: 45%;
      height: 120%;
      background: linear-gradient(
        105deg,
        transparent 20%,
        rgba(255,248,220,0.1) 50%,
        transparent 80%
      );
      transform: skewX(-15deg);
      pointer-events: none;
      z-index: 2;
      opacity: 0;
      border-radius: 2px;
    }

    .afford-card:hover .card-shine,
    .since-card:hover .card-shine,
    .mover-card:hover .card-shine,
    .drop-card:hover .card-shine {
      opacity: 1;
      animation: badgeShine 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }

    /* Noise/texture overlay */
    .hero-badge::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 20px;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
      pointer-events: none;
      opacity: 0.5;
    }

/* Gold top border accent */
    .hero-badge::after {
      content: '';
      position: absolute;
      top: 0; left: 40px; right: 40px;
      height: 2px;
      background: linear-gradient(90deg, transparent, rgba(232,180,80,0.8), transparent);
      border-radius: 0 0 2px 2px;
    }

    .hero-label {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.62rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(240,232,204,0.55);
      margin-bottom: 6px;
    }

    .hero-price-row {
      display: flex;
      align-items: flex-end;
      gap: 16px;
      flex-wrap: wrap;
      margin-bottom: 0;
    }

    .hero-price {
      font-family: 'Playfair Display', serif;
      font-size: clamp(5rem, 12vw, 9.5rem);
      font-weight: 900;
      line-height: 1;
      color: #f0e8cc;
      letter-spacing: -0.02em;
      display: inline-block;
      cursor: default;
      position: relative;
      transition: transform 0.25s cubic-bezier(0.34, 1.4, 0.64, 1);
    }

    @keyframes priceBump {
      0%   { transform: scale(1); }
      40%  { transform: scale(1.055); }
      70%  { transform: scale(0.985); }
      100% { transform: scale(1); }
    }

    .hero-price.bump {
      animation: priceBump 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    }

    .hero-change {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.9rem;
      font-weight: 600;
      padding: 5px 11px;
      border-radius: 6px;
      margin-bottom: 10px;
    }

    @keyframes badge-pulse {
      0%   { transform: scale(1); }
      40%  { transform: scale(1.1); }
      70%  { transform: scale(0.96); }
      100% { transform: scale(1); }
    }

    .hero-change.pulse {
      animation: badge-pulse 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    }

    .hero-change.up {
      color: #fff;
      background: rgba(180,40,40,0.7);
      border: 1px solid rgba(255,100,100,0.2);
    }

    .hero-change.down {
      color: #fff;
      background: rgba(30,100,50,0.7);
      border: 1px solid rgba(80,200,100,0.2);
    }



    .hero-sub {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.58rem;
      letter-spacing: 0.06em;
      color: rgba(240,232,204,0.35);
      font-weight: 400;
      margin-bottom: 18px;
    }

    .hero-actions {
      display: flex;
      gap: 8px;
      margin-top: 12px;
      flex-wrap: wrap;
    }

    .hero-action-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.65rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 8px 16px;
      border-radius: 6px;
      border: none;
      background: #000;
      color: #fff;
      cursor: pointer;
      transition: background 0.18s, transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.18s;
      user-select: none;
      white-space: nowrap;
      font-weight: 600;
      box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    }

    .hero-action-btn:hover {
      background: #1a1a1a;
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    }

    .hero-action-btn:active {
      transform: scale(0.95) translateY(1px);
      box-shadow: 0 1px 3px rgba(0,0,0,0.3);
      transition: transform 0.08s, box-shadow 0.08s;
    }

    .hero-action-btn svg {
      width: 13px;
      height: 13px;
      fill: #fff;
      flex-shrink: 0;
    }

    /* ── CHART EVENT TOOLTIP ── */
    #chart-event-tooltip {
      position: absolute;
      z-index: 999;
      pointer-events: none;
      background: rgba(30, 8, 12, 0.96);
      border: 1px solid rgba(212,170,80,0.5);
      border-radius: 8px;
      padding: 10px 14px;
      max-width: 240px;
      transform: translate(-50%, -100%);
      margin-top: -10px;
      opacity: 0;
      transition: opacity 0.15s ease;
      box-shadow: 0 4px 20px rgba(0,0,0,0.4);
    }

    #chart-event-tooltip.visible {
      opacity: 1;
    }

    #chart-event-tooltip .cet-label {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.62rem;
      letter-spacing: 0.08em;
      color: rgba(212,170,80,0.9);
      margin-bottom: 5px;
      text-transform: uppercase;
    }

    #chart-event-tooltip .cet-detail {
      font-family: 'Playfair Display', serif;
      font-size: 0.82rem;
      color: rgba(240,232,204,0.92);
      line-height: 1.4;
    }

    /* SVG illustration watermark */
    /* ── S-CURVE STEAM above watermark ── */


    /* ── S-CURVE STEAM ── */
    .hero-steam {
      position: absolute;
      /* Container anchored so paths start exactly on the outer arc top */
      bottom: 136px;
      right: 8px;
      width: 220px;
      height: 180px;
      pointer-events: none;
      overflow: visible;
    }

    .hero-steam path {
      fill: none;
      stroke-linecap: round;
      stroke-dasharray: 200;
      stroke-dashoffset: 200;
      opacity: 0;
    }

    /* Blur on SVG element — Safari ignores filter on individual SVG paths */
    .hero-steam svg {
      filter: blur(3.5px);
      overflow: visible;
    }

    /* Draw from bottom upward, fade out at top — no pauses, pure continuous motion */
    @keyframes steamDraw {
      0%   { stroke-dashoffset: 200; opacity: 0; }
      20%  { opacity: 0.6; }
      45%  { stroke-dashoffset: 0;   opacity: 1; }
      65%  { stroke-dashoffset: -30; opacity: 0.25; }
      80%  { stroke-dashoffset: -50; opacity: 0.04; }
      100% { stroke-dashoffset: -60; opacity: 0; }
    }

    /* Line 1 starts first, line 2 at ~35% of cycle, line 3 at ~70% */
    .hero-steam path:nth-child(1) {
      stroke: rgba(240,232,204,0.22);
      stroke-width: 2;
      animation: steamDraw 4.5s cubic-bezier(0.4,0,0.2,1) 0s infinite;
    }
    .hero-steam path:nth-child(2) {
      stroke: rgba(240,232,204,0.18);
      stroke-width: 1.8;
      animation: steamDraw 4.5s cubic-bezier(0.4,0,0.2,1) 1.58s infinite;
    }
    .hero-steam path:nth-child(3) {
      stroke: rgba(240,232,204,0.16);
      stroke-width: 1.6;
      animation: steamDraw 4.5s cubic-bezier(0.4,0,0.2,1) 3.15s infinite;
    }

    .hero-badge-illustration {
      position: absolute;
      right: -50px;
      bottom: -50px;
      width: 320px;
      height: 320px;
      opacity: 0.07;
      pointer-events: none;
    }

    [data-theme="dark"] .hero-badge-illustration {
      opacity: 0.05;
    }

    /* ── STATS ROW ── */

    /* ── CHART ── */
    .chart-section {
      padding: 28px 0 28px;
      border-bottom: 2px solid var(--border);
    }

    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 24px;
      flex-wrap: wrap;
      gap: 12px;
    }

    .section-title {
      font-family: 'Playfair Display', serif;
      font-size: 1.15rem;
      font-weight: 700;
      color: var(--text);
      letter-spacing: 0.01em;
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .section-title::before {
      content: '';
      display: inline-block;
      width: 28px;
      height: 2px;
      background: linear-gradient(to right, transparent, var(--gold));
      flex-shrink: 0;
    }

    .section-title::after {
      content: '';
      display: inline-block;
      width: 28px;
      height: 2px;
      background: linear-gradient(to left, transparent, var(--gold));
      flex-shrink: 0;
    }

    .chart-controls-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .events-toggle {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.6rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 5px 10px;
      border: 1px solid var(--border);
      border-radius: 3px;
      background: transparent;
      color: var(--text-dim);
      cursor: pointer;
      transition: all 0.25s;
      white-space: nowrap;
    }

    .events-toggle:hover {
      border-color: rgba(212,170,80,0.4);
      color: var(--text-muted);
    }

    .events-toggle.active {
      background: linear-gradient(145deg, #5c1a2a 0%, #3d1019 60%, #521525 100%);
      border-color: rgba(212,170,80,0.55);
      color: rgba(240,232,204,0.92);
      box-shadow:
        0 0 0 1px rgba(212,170,80,0.2),
        0 0 8px 2px rgba(212,170,80,0.15),
        0 0 16px 4px rgba(139,26,26,0.25),
        inset 0 1px 0 rgba(255,255,255,0.06);
    }

    .events-toggle-globe {
      font-size: 0.85rem;
      opacity: 0.35;
      transition: opacity 0.2s;
      display: inline-block;
    }

    .events-toggle.active .events-toggle-globe {
      opacity: 1;
    }

    @keyframes globe-flip {
      0%   { transform: rotateY(0deg); }
      50%  { transform: rotateY(90deg); }
      100% { transform: rotateY(0deg); }
    }

    .events-toggle-globe.spinning {
      animation: globe-flip 0.35s ease-in-out;
    }

    .timeframe-tabs {
      display: flex;
      gap: 2px;
      position: relative;
    }

    .tab {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.68rem;
      letter-spacing: 0.08em;
      padding: 5px 10px;
      border: 1px solid var(--border);
      background: transparent;
      color: var(--text-dim);
      cursor: pointer;
      transition: color 0.2s, border-color 0.2s, background 0.2s, transform 0.1s;
      text-transform: uppercase;
      position: relative;
    }

    .tab:hover {
      border-color: var(--gold);
      color: var(--gold);
    }

    .tab:active {
      transform: scale(0.93);
      transition: transform 0.07s;
    }

    .tab.active {
      border-color: var(--gold);
      color: #fff;
      background: var(--burgundy);
    }

    .tab.active::after {
      content: '';
      position: absolute;
      bottom: -3px;
      left: 0;
      right: 0;
      height: 2px;
      background: var(--gold);
      border-radius: 1px;
      animation: tab-slide-in 0.22s cubic-bezier(0.34, 1.4, 0.64, 1) forwards;
    }

    @keyframes tab-slide-in {
      from { transform: scaleX(0); opacity: 0; }
      to   { transform: scaleX(1); opacity: 1; }
    }

    .chart-wrap {
      background: var(--chart-bg);
      border: 1px solid var(--border);
      border-top: 3px solid var(--burgundy);
      border-radius: 2px;
      padding: 20px 16px 52px;
      position: relative;
      overflow: visible;
      transition: background 0.3s, border-color 0.3s;
    }

    .chart-wrap canvas {
      width: 100% !important;
      overflow: visible;
    }

    /* ── INGREDIENTS ── */
    .ingredients-section {
      padding: 28px 0 28px;
      border-bottom: 2px solid var(--border);
      overflow: visible;
    }

    .ingredients-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 8px;
      background: transparent;
      border-top: 3px solid var(--gold);
      border-bottom: 1px solid var(--border);
      border-left: 1px solid var(--border);
      border-right: 1px solid var(--border);
      padding: 8px;
      margin-top: 20px;
      overflow: visible;
    }

    /* ── FLIP CARD WRAPPER ── */
    .ingredient-card {
      background: transparent;
      border: none;
      box-shadow: none;
      padding: 0;
      position: relative;
      -webkit-perspective: 900px;
      perspective: 900px;
      cursor: pointer;
      border-radius: 4px;
      transition: transform 0.25s ease-out;
    }

    /* Desktop: float on hover */
    @media (hover: hover) {
      .ingredient-card:hover {
        transform: translateY(-5px);
      }
    }

    .card-flipper {
      position: relative;
      width: 100%;
      -webkit-transform-style: preserve-3d;
      transform-style: preserve-3d;
      transition: transform 0.52s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s ease-out;
      border-radius: 4px;
    }

    /* Desktop: gold outer glow on hover */
    @media (hover: hover) {
      .ingredient-card:hover .card-flipper {
        box-shadow:
          0 8px 24px rgba(0,0,0,0.2),
          0 0 0 1px rgba(212,170,80,0.25),
          0 0 14px 2px rgba(212,170,80,0.12);
      }
    }

    /* Flip via JS-toggled class (all devices) */
    .ingredient-card.flipped .card-flipper {
      -webkit-transform: rotateY(180deg);
      transform: rotateY(180deg);
    }

    /* Flipped card still floats on hover */
    @media (hover: hover) {
      .ingredient-card.flipped:hover .card-flipper {
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
        box-shadow:
          0 8px 24px rgba(0,0,0,0.2),
          0 0 0 1px rgba(212,170,80,0.25),
          0 0 14px 2px rgba(212,170,80,0.12);
      }
    }

    /* Front & back shared */
    .card-front, .card-back {
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
      border-radius: 4px;
      padding: 18px 20px;
      border: 1px solid var(--border);
    }

    /* FRONT — sets the natural height of the card */
    .card-front {
      position: relative;
      background: var(--ingredient-bg);
      border: 1px solid var(--border);
    }

    .ingredient-top,
    .ingredient-name,
    .ingredient-qty,
    .ingredient-price,
    .card-front > div {
      position: relative;
      z-index: 1;
    }

    /* BACK — overlaid exactly on front */
    .card-back {
      position: absolute !important;
      inset: 0;
    }

    /* BACK */
    .card-back {
      background: #3d1019 !important;
      border: 1px solid rgba(212,170,80,0.3) !important;
      -webkit-transform: rotateY(180deg);
      transform: rotateY(180deg);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    [data-theme="dark"] .card-back {
      background: #070d14 !important;
      border: 1px solid rgba(212,170,80,0.35) !important;
    }

    .card-back-name {
      font-family: 'IBM Plex Mono', monospace;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(240,232,204,0.5);
      margin-bottom: 6px;
      display: flex;
      flex-direction: column;
      gap: 1px;
    }

    .card-back-ingname {
      font-size: 0.6rem;
      color: rgba(240,232,204,0.7);
    }

    .card-back-since {
      font-size: 0.52rem;
      color: rgba(240,232,204,0.4);
    }

    .card-back-chart {
      flex: 1;
      position: relative;
      min-height: 70px;
    }

    .card-back-chart canvas {
      width: 100% !important;
      height: 100% !important;
    }

    .card-back-footer {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      margin-top: 8px;
    }

    .card-back-label {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.58rem;
      color: rgba(240,232,204,0.4);
      line-height: 1.4;
    }

    .card-back-label span {
      display: block;
      font-size: 0.72rem;
      color: rgba(240,232,204,0.85);
    }

    .card-back-change {
      font-family: 'Playfair Display', serif;
      font-size: 1.3rem;
      font-weight: 700;
      line-height: 1;
    }

    .card-back-change.up   { color: #e05050; }
    .card-back-change.down { color: #50c050; }
    .card-back-change.flat { color: rgba(240,232,204,0.5); }

    /* front hover states removed — flip handles interaction now */
    .ingredient-card:hover .ingredient-price {
      color: var(--gold);
      transform: scale(1.08);
      transform-origin: left center;
    }



    /* Biggest mover badge */
    .ing-mover {
      display: inline-block;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.58rem;
      font-weight: 600;
      color: var(--red);
      letter-spacing: 0.04em;
      margin-left: 4px;
      opacity: 0.85;
    }

    /* ── ANIMATED GLOW BORDER FOR #1 ── */
    @keyframes glow-pulse {
      0%   { box-shadow: 0 0 4px 1px rgba(212,170,80,0.25), 0 0 0 1px rgba(212,170,80,0.35); }
      50%  { box-shadow: 0 0 12px 3px rgba(212,170,80,0.45), 0 0 0 1px rgba(240,210,100,0.7); }
      100% { box-shadow: 0 0 4px 1px rgba(212,170,80,0.25), 0 0 0 1px rgba(212,170,80,0.35); }
    }

    @keyframes hero-glow-pulse {
      0%   {
        box-shadow:
          0 4px 6px rgba(0,0,0,0.07),
          0 12px 32px rgba(61,16,25,0.18),
          0 0 0 1px rgba(212,170,80,0.3),
          0 0 8px 2px rgba(212,170,80,0.1),
          inset 0 1px 0 rgba(255,255,255,0.08);
      }
      50%  {
        box-shadow:
          0 4px 6px rgba(0,0,0,0.07),
          0 12px 40px rgba(61,16,25,0.22),
          0 0 0 1px rgba(212,170,80,0.6),
          0 0 22px 6px rgba(212,170,80,0.22),
          inset 0 1px 0 rgba(255,255,255,0.08);
      }
      100% {
        box-shadow:
          0 4px 6px rgba(0,0,0,0.07),
          0 12px 32px rgba(61,16,25,0.18),
          0 0 0 1px rgba(212,170,80,0.3),
          0 0 8px 2px rgba(212,170,80,0.1),
          inset 0 1px 0 rgba(255,255,255,0.08);
      }
    }



    .ingredient-top {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 10px;
    }

    @keyframes iconWiggle {
      0%   { transform: rotate(0deg); }
      25%  { transform: rotate(-8deg); }
      50%  { transform: rotate(6deg); }
      75%  { transform: rotate(-3deg); }
      100% { transform: rotate(0deg); }
    }

    .ingredient-icon {
      font-size: 2rem;
      line-height: 1;
      display: inline-block;
      transform-origin: center bottom;
    }

    @keyframes emojiWiggle {
      0%   { transform: rotate(0deg); }
      15%  { transform: rotate(-15deg); }
      30%  { transform: rotate(12deg); }
      45%  { transform: rotate(-10deg); }
      60%  { transform: rotate(8deg); }
      75%  { transform: rotate(-4deg); }
      90%  { transform: rotate(2deg); }
      100% { transform: rotate(0deg); }
    }

    .ingredient-icon.wiggling {
      animation: emojiWiggle 0.5s ease-in-out both;
    }



    .ingredient-delta {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.72rem;
      font-weight: 600;
    }

    .ingredient-delta.up { color: var(--red); }
    .ingredient-delta.down { color: var(--green); }
    .ingredient-delta.flat { color: var(--text-dim); }

    .ingredient-name {
      font-family: 'Playfair Display', serif;
      font-size: 1.05rem;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 3px;
    }

    .ingredient-qty {
      font-size: 0.72rem;
      color: var(--text-dim);
      margin-bottom: 14px;
      font-family: 'IBM Plex Mono', monospace;
      letter-spacing: 0.03em;
    }

    .ingredient-price {
      transition: color 0.2s, transform 0.2s cubic-bezier(0.34, 1.4, 0.64, 1);
      font-family: 'Playfair Display', serif;
      font-size: 1.6rem;
      font-weight: 700;
      color: var(--gold);
      line-height: 1;
      margin-bottom: 12px;
      display: inline-block;
    }



    /* ── FOOTER ── */
    footer {
      background: var(--burgundy-dark);
      border-top: none;
      padding: 0;
      transition: background 0.3s;
      position: relative;
    }

    .footer-rule {
      width: 100%;
      height: 1px;
      background: linear-gradient(to right, transparent 0%, rgba(212,170,80,0.6) 30%, rgba(240,200,80,0.85) 50%, rgba(212,170,80,0.6) 70%, transparent 100%);
    }

    .footer-meta {
      border-bottom: 1px solid rgba(212,170,80,0.08);
      padding: 10px 0;
    }

    .footer-meta-inner {
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 24px;
      display: flex;
      justify-content: center;
    }

    .footer-meta-text {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.58rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: rgba(212,170,80,0.4);
    }

    .footer-main {
      padding: 24px 0 28px;
    }

    .footer-main-inner {
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 24px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 12px;
    }

    .footer-note {
      font-size: 0.68rem;
      color: rgba(240, 232, 204, 0.45);
      font-family: 'IBM Plex Mono', monospace;
      line-height: 1.6;
    }

    .footer-note a {
      color: rgba(212,170,80,0.7);
      text-decoration: none;
      border-bottom: 1px solid rgba(212,170,80,0.0);
      transition: color 0.2s, border-color 0.2s;
    }

    .footer-note a:hover {
      color: rgba(212,170,80,1);
      border-bottom-color: rgba(212,170,80,0.4);
    }

    .footer-charm {
      font-size: 0.68rem;
      color: rgba(240,232,204,0.35);
      font-family: 'IBM Plex Mono', monospace;
      letter-spacing: 0.04em;
    }

    @media (max-width: 640px) {
      .footer-main-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 8px;
      }
    }

    /* ── TICKER TAPE ── */
    .ticker {
      background: var(--burgundy);
      border-top: 1px solid rgba(212,170,80,0.15);
      border-bottom: 2px solid var(--gold);
      overflow: hidden;
      white-space: nowrap;
      padding: 9px 0;
      margin: 0;
      transition: background 0.3s, border-color 0.3s;
      position: relative;
    }

    /* Fade edges */
    .ticker::before,
    .ticker::after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      width: 80px;
      z-index: 2;
      pointer-events: none;
    }
    .ticker::before {
      left: 0;
      background: linear-gradient(to right, var(--burgundy), transparent);
    }
    .ticker::after {
      right: 0;
      background: linear-gradient(to left, var(--burgundy), transparent);
    }

    .ticker-inner {
      display: inline-flex;
      align-items: center;
      gap: 0;
      animation: ticker 32s linear infinite;
    }
    .ticker:hover .ticker-inner { animation-play-state: paused; }

    .ticker-item {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.7rem;
      color: rgba(240, 232, 204, 0.65);
      padding: 0 0;
      letter-spacing: 0.05em;
      display: inline-flex;
      align-items: center;
      gap: 7px;
    }

    /* Separator dot between items */
    .ticker-item::after {
      content: '·';
      color: rgba(212,170,80,0.3);
      font-size: 1rem;
      margin: 0 18px;
      line-height: 1;
    }

    .ticker-item span.up { color: #e88a8a; }
    .ticker-item span.dn { color: #7acc8a; }
    .ticker-item span.nm { color: var(--gold-light); }

    /* Ingredient name slightly brighter */
    .ticker-item .ticker-name {
      color: rgba(240,232,204,0.85);
      font-weight: 600;
    }

    .ticker-item .ticker-price {
      color: var(--gold);
    }

    @keyframes ticker {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }

    /* ── ANIMATIONS ── */
    .fade-up {
      opacity: 0;
      transform: translateY(16px);
      animation: fadeUp 0.6s ease forwards;
    }

    @keyframes fadeUp {
      to { opacity: 1; transform: translateY(0); }
    }

    .fade-up:nth-child(1) { animation-delay: 0.05s; }
    .fade-up:nth-child(2) { animation-delay: 0.15s; }
    .fade-up:nth-child(3) { animation-delay: 0.25s; }
    .fade-up:nth-child(4) { animation-delay: 0.35s; }
    .fade-up:nth-child(5) { animation-delay: 0.45s; }
    .fade-up:nth-child(6) { animation-delay: 0.55s; }
    .fade-up:nth-child(7) { animation-delay: 0.65s; }
    .fade-up:nth-child(8) { animation-delay: 0.75s; }
    .fade-up:nth-child(9) { animation-delay: 0.85s; }
    /* ── DARK MODE TOGGLE ── */
    /* ── EGG TOGGLE ── */
    .theme-toggle {
      background: none;
      border: none;
      cursor: pointer;
      padding: 4px;
      display: flex;
      align-items: center;
      gap: 7px;
      user-select: none;
      color: rgba(240,232,204,0.7);
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.65rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      transition: color 0.2s;
    }

    .theme-toggle:hover { color: #f0e8cc; }

    .egg-toggle {
      width: 36px;
      height: 36px;
      position: relative;
      perspective: 200px;
    }

    .egg-inner {
      width: 100%;
      height: 100%;
      position: relative;
      transform-style: preserve-3d;
      transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .egg-inner.flipping {
      animation: eggFlip 0.28s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }

    @keyframes eggFlip {
      0%   { transform: rotateY(0deg) scale(1); }
      35%  { transform: rotateY(90deg) scale(1.12); }
      65%  { transform: rotateY(90deg) scale(1.12); }
      100% { transform: rotateY(0deg) scale(1); }
    }

    /* Splat lines container */
    .egg-splat {
      position: absolute;
      inset: -8px;
      pointer-events: none;
      opacity: 0;
    }

    .egg-splat.splatting {
      animation: splatFade 0.35s ease-out forwards;
    }

    @keyframes splatFade {
      0%   { opacity: 0; transform: scale(0.6); }
      25%  { opacity: 1; transform: scale(1.1); }
      100% { opacity: 0; transform: scale(1.3); }
    }

    .egg-splat line {
      stroke: rgba(212,170,80,0.7);
      stroke-width: 1.5;
      stroke-linecap: round;
    }

    [data-theme="dark"] .egg-splat line {
      stroke: rgba(160,110,40,0.6);
    }

    .egg-face {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Light mode egg — sunny side up, bright white, golden yolk */
    .egg-light svg .egg-white { fill: #f5f0e0; }
    .egg-light svg .egg-yolk  { fill: #e8a020; }
    .egg-light svg .egg-yolk-hi { fill: #f4c040; opacity: 0.7; }

    /* Dark mode egg — flipped, browned underside, hidden yolk */
    .egg-dark svg .egg-white  { fill: #c8a870; }
    .egg-dark svg .egg-yolk   { fill: #7a5010; }
    .egg-dark svg .egg-yolk-hi { fill: #9a6820; opacity: 0.5; }

    .egg-dark { display: none; }
    [data-theme="dark"] .egg-light { display: none; }
    [data-theme="dark"] .egg-dark  { display: flex; }

    /* ── DATA BADGE ── */
    .data-badge {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.62rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      padding: 3px 8px;
      border-radius: 2px;
      display: inline-flex;
      align-items: center;
      gap: 5px;
    }

    .data-badge.live {
      color: #4a9a5a;
      background: rgba(74, 154, 90, 0.12);
      border: 1px solid rgba(74, 154, 90, 0.3);
    }

    .data-badge.fallback {
      color: var(--text-dim);
      background: transparent;
      border: 1px solid var(--border);
    }

    @keyframes liveDotPulse {
      0%   { opacity: 1; box-shadow: 0 0 0px 0px rgba(74,200,100,0); }
      50%  { opacity: 0.6; box-shadow: 0 0 5px 2px rgba(74,200,100,0.6); }
      100% { opacity: 1; box-shadow: 0 0 0px 0px rgba(74,200,100,0); }
    }

    .live-dot {
      display: inline-block;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #4a9a5a;
      vertical-align: middle;
      margin-right: 4px;
      flex-shrink: 0;
      animation: liveDotPulse 2.2s ease-in-out infinite;
    }

    .hero-change.flat {
      color: var(--text-dim);
      background: rgba(128,128,128,0.1);
    }

    /* ── DID YOU KNOW ── */
    .hero-row {
      display: flex;
      flex-direction: row;
      gap: 24px;
      align-items: stretch;
    }

    .hero-side-cards {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      gap: 16px;
      flex: 1;
    }

    .since-card {
      border-radius: 16px;
      width: 100%;
      flex: 1;
      position: relative;
      overflow: hidden;
      padding: 24px 24px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      background: linear-gradient(145deg, #0f1520 0%, #0a1018 45%, #0f1520 100%);
      box-shadow:
        0 4px 6px rgba(0,0,0,0.1),
        0 12px 32px rgba(0,0,0,0.15),
        0 0 0 1px rgba(212,170,80,0.2),
        inset 0 1px 0 rgba(255,255,255,0.06);
    }

    [data-theme="dark"] .since-card {
      background: linear-gradient(145deg, #080e16 0%, #050a10 45%, #080e16 100%);
      box-shadow:
        0 4px 6px rgba(0,0,0,0.3),
        0 12px 32px rgba(0,0,0,0.4),
        0 0 0 1px rgba(212,170,80,0.45),
        inset 0 1px 0 rgba(212,170,80,0.08);
    }

    .since-watermark {
      position: absolute;
      right: -40px;
      bottom: -40px;
      width: 220px;
      height: 220px;
      opacity: 0.07;
      pointer-events: none;
    }

    [data-theme="dark"] .since-watermark { opacity: 0.05; }

    .since-label {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.58rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(212,170,80,0.7);
      position: relative;
      z-index: 1;
      margin-bottom: 8px;
    }

    .since-pct-row {
      display: flex;
      align-items: baseline;
      gap: 4px;
      position: relative;
      z-index: 1;
    }

    .since-pct {
      font-family: 'Playfair Display', serif;
      font-size: clamp(2.8rem, 7vw, 3.8rem);
      font-weight: 900;
      line-height: 1;
      color: #f0e8cc;
      letter-spacing: -0.02em;
    }

    .since-pct-sign {
      font-family: 'Playfair Display', serif;
      font-size: clamp(1.6rem, 4vw, 2.2rem);
      font-weight: 700;
      color: rgba(240,232,204,0.6);
      line-height: 1;
    }

    .since-sublabel {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.6rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: rgba(240,232,204,0.55);
      position: relative;
      z-index: 1;
    }

    @media (max-width: 700px) {
      .hero-row { flex-direction: column; }
      .hero-side-cards { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
    }

    @keyframes wiggle {
      0%   { transform: rotate(0deg); }
      20%  { transform: rotate(0.8deg); }
      40%  { transform: rotate(-0.6deg); }
      60%  { transform: rotate(0.4deg); }
      80%  { transform: rotate(-0.2deg); }
      100% { transform: rotate(0deg); }
    }

    .hero-badge:hover,
    .afford-card:hover,
    .since-card:hover,
    .mover-card:hover,
    .drop-card:hover {
      animation: wiggle 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
    }

    .afford-card {
      border-radius: 16px;
      width: 100%;
      flex: 1;
      position: relative;
      overflow: hidden;
      padding: 24px 24px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      background: linear-gradient(145deg, #1a2a1a 0%, #111d11 45%, #1a2a1a 100%);
      box-shadow:
        0 4px 6px rgba(0,0,0,0.1),
        0 12px 32px rgba(0,0,0,0.15),
        0 0 0 1px rgba(212,170,80,0.2),
        inset 0 1px 0 rgba(255,255,255,0.06);
    }

    [data-theme="dark"] .afford-card {
      background: linear-gradient(145deg, #0f1a0f 0%, #0a120a 45%, #0f1a0f 100%);
      box-shadow:
        0 4px 6px rgba(0,0,0,0.3),
        0 12px 32px rgba(0,0,0,0.4),
        0 0 0 1px rgba(212,170,80,0.45),
        inset 0 1px 0 rgba(212,170,80,0.08);
    }

    .afford-watermark {
      position: absolute;
      right: -40px;
      bottom: -40px;
      width: 220px;
      height: 220px;
      opacity: 0.07;
      pointer-events: none;
    }

    [data-theme="dark"] .afford-watermark {
      opacity: 0.05;
    }

    .afford-label {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.58rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(212,170,80,0.7);
      position: relative;
      z-index: 1;
      margin-bottom: 8px;
    }

    .afford-mins-row {
      position: relative;
      z-index: 1;
    }

    .afford-mins {
      font-family: 'Playfair Display', serif;
      font-size: clamp(2.8rem, 7vw, 3.8rem);
      font-weight: 900;
      line-height: 1;
      color: #f0e8cc;
      letter-spacing: -0.02em;
    }

    .afford-sublabel {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.6rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: rgba(240,232,204,0.55);
      position: relative;
      z-index: 1;
    }









    @media (max-width: 700px) {
      .afford-card { width: 100%; }
    }

    /* ── BIGGEST MOVER CARD ── */
    .mover-card {
      border-radius: 16px;
      width: 100%;
      flex: 1;
      position: relative;
      overflow: hidden;
      padding: 20px 20px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      background: linear-gradient(145deg, #2a1a08 0%, #1c1005 45%, #2a1a08 100%);
      box-shadow:
        0 4px 6px rgba(0,0,0,0.1),
        0 12px 32px rgba(0,0,0,0.15),
        0 0 0 1px rgba(212,170,80,0.2),
        inset 0 1px 0 rgba(255,255,255,0.06);
    }

    [data-theme="dark"] .mover-card {
      background: linear-gradient(145deg, #1a1005 0%, #110a03 45%, #1a1005 100%);
      box-shadow:
        0 4px 6px rgba(0,0,0,0.3),
        0 12px 32px rgba(0,0,0,0.4),
        0 0 0 1px rgba(212,170,80,0.45),
        inset 0 1px 0 rgba(212,170,80,0.08);
    }

    .mover-label {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.58rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(212,170,80,0.7);
      position: relative;
      z-index: 1;
      margin-bottom: 6px;
    }

    .mover-name {
      font-family: 'Playfair Display', serif;
      font-size: clamp(1.15rem, 2.8vw, 1.65rem);
      font-weight: 900;
      line-height: 1.1;
      color: #f0e8cc;
      letter-spacing: -0.01em;
      position: relative;
      z-index: 1;
    }

    .mover-pct {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.92rem;
      font-weight: 600;
      color: #e05050;
      position: relative;
      z-index: 1;
      margin-top: 4px;
    }

    .mover-pct.down { color: #50c050; }

    .mover-sublabel {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.6rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: rgba(240,232,204,0.55);
      position: relative;
      z-index: 1;
    }

    .mover-watermark {
      position: absolute;
      right: -110px;
      top: 50%;
      transform: translateY(-50%);
      width: 260px;
      height: 260px;
      opacity: 0.07;
      pointer-events: none;
    }

    /* ── PRICE DROP CARD ── */
    .drop-card {
      border-radius: 16px;
      width: 100%;
      flex: 1;
      position: relative;
      overflow: hidden;
      padding: 20px 20px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      background: linear-gradient(145deg, #0a1f1f 0%, #061414 45%, #0a1f1f 100%);
      box-shadow:
        0 4px 6px rgba(0,0,0,0.1),
        0 12px 32px rgba(0,0,0,0.15),
        0 0 0 1px rgba(80,192,120,0.2),
        inset 0 1px 0 rgba(255,255,255,0.06);
    }

    [data-theme="dark"] .drop-card {
      background: linear-gradient(145deg, #061414 0%, #030d0d 45%, #061414 100%);
      box-shadow:
        0 4px 6px rgba(0,0,0,0.3),
        0 12px 32px rgba(0,0,0,0.4),
        0 0 0 1px rgba(80,192,120,0.45),
        inset 0 1px 0 rgba(80,192,120,0.08);
    }

    .drop-label {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.58rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(80,192,120,0.8);
      position: relative;
      z-index: 1;
      margin-bottom: 6px;
    }

    .drop-name {
      font-family: 'Playfair Display', serif;
      font-size: clamp(1.15rem, 2.8vw, 1.65rem);
      font-weight: 900;
      line-height: 1.1;
      color: #f0e8cc;
      letter-spacing: -0.01em;
      position: relative;
      z-index: 1;
    }

    .drop-pct {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.92rem;
      font-weight: 600;
      color: #50c078;
      position: relative;
      z-index: 1;
      margin-top: 4px;
    }

    .drop-sublabel {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.6rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: rgba(240,232,204,0.55);
      position: relative;
      z-index: 1;
    }

    .drop-watermark {
      position: absolute;
      right: -80px;
      top: 50%;
      transform: translateY(-50%);
      width: 240px;
      height: 240px;
      opacity: 0.07;
      pointer-events: none;
    }

    [data-theme="dark"] .drop-watermark { opacity: 0.05; }



    .src-tag {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.58rem;
      letter-spacing: 0.08em;
      padding: 2px 6px;
      border-radius: 2px;
      display: inline-block;
    }

    .src-tag.live {
      color: #4a9a5a;
      background: rgba(74,154,90,0.1);
      border: 1px solid rgba(74,154,90,0.25);
      display: inline-flex;
      align-items: center;
    }

    .src-tag.live .live-dot {
      animation: liveDotPulse 2.2s ease-in-out infinite;
    }

    .src-tag.cpi {
      color: var(--gold);
      background: rgba(139,105,20,0.1);
      border: 1px solid rgba(139,105,20,0.25);
    }

    .src-tag.static {
      color: var(--text-dim);
      background: transparent;
      border: 1px solid var(--border);
    }

  



    /* ── DATA STORYTELLING ── */
    .data-headline {
      max-width: 780px;
      margin: 0 auto;
      padding: 20px 16px 6px;
      text-align: center;
    }

    .data-headline-text {
      font-family: 'Playfair Display', serif;
      font-size: clamp(1rem, 2.2vw, 1.25rem);
      font-weight: 400;
      font-style: italic;
      color: var(--text-dim);
      line-height: 1.5;
      letter-spacing: 0.01em;
      opacity: 0;
      transform: translateY(6px);
      transition: opacity 0.7s ease, transform 0.7s ease;
    }

    .data-headline-text.loaded {
      opacity: 1;
      transform: translateY(0);
    }

    .data-headline-text em {
      font-style: normal;
      color: var(--gold);
      font-weight: 600;
    }

    /* Chart caption */
    .chart-caption {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.7rem;
      color: var(--text-dim);
      margin-top: 14px;
      padding: 0 4px;
      opacity: 0;
      transition: opacity 0.7s ease 0.3s;
      text-align: center;
    }

    .chart-caption.loaded {
      opacity: 1;
    }

    .chart-caption em {
      font-style: normal;
      color: var(--gold);
    }


    /* ── DONATE ── */
    .donate-section {
      text-align: center;
      padding: 28px 16px 28px;
      max-width: 600px;
      margin: 0 auto;
    }

    .donate-text {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.72rem;
      color: var(--text-dim);
      margin-bottom: 14px;
      line-height: 1.6;
      white-space: nowrap;
    }

    .donate-addresses {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .donate-coin {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.62rem;
      color: var(--text-dim);
      opacity: 0.6;
    }

    .donate-addr {
      color: var(--gold);
      opacity: 0.7;
      letter-spacing: 0.02em;
      word-break: break-all;
    }


    /* ── X / TWITTER FOLLOW BUTTON ── */
    .x-follow {
      display: flex;
      align-items: center;
      gap: 7px;
      background: #000;
      color: #fff;
      border: none;
      border-radius: 2px;
      padding: 6px 12px;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.65rem;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      text-decoration: none;
      cursor: pointer;
      transition: background 0.2s, transform 0.15s;
      white-space: nowrap;
    }

    .x-follow:hover {
      background: #222;
      transform: translateY(-1px);
    }

    [data-theme="dark"] .x-follow {
      background: #fff;
      color: #000;
    }

    [data-theme="dark"] .x-follow:hover {
      background: #e0e0e0;
    }

    .x-follow svg {
      flex-shrink: 0;
    }

    /* ── FAQ ── */
    .faq-section {
      max-width: 780px;
      margin: 0 auto;
      padding: 28px 16px 28px;
    }
    .faq-title {
      font-family: 'Playfair Display', serif;
      font-size: 1.15rem;
      font-weight: 700;
      color: var(--text);
      letter-spacing: 0.01em;
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 20px;
    }

    .faq-title::before {
      content: '';
      display: inline-block;
      width: 28px;
      height: 2px;
      background: linear-gradient(to right, transparent, var(--gold));
      flex-shrink: 0;
    }

    .faq-title::after {
      content: '';
      display: inline-block;
      width: 28px;
      height: 2px;
      background: linear-gradient(to left, transparent, var(--gold));
      flex-shrink: 0;
    }
    .faq-item {
      border-top: 1px solid var(--border);
    }
    .faq-item:last-child { border-bottom: 1px solid var(--border); }
    .faq-q {
      width: 100%;
      background: none;
      border: none;
      text-align: left;
      padding: 14px 0;
      cursor: pointer;
      user-select: none;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 13px;
      color: var(--text);
      gap: 12px;
    }
    .faq-q:hover { color: var(--gold); }
    .faq-chevron {
      font-size: 10px;
      color: var(--gold);
      transition: transform 0.2s;
      flex-shrink: 0;
    }
    .faq-item.open .faq-chevron { transform: rotate(180deg); }
    .faq-a {
      font-size: 13px;
      color: var(--text-muted, #7a6a5a);
      line-height: 1.65;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease, padding 0.3s ease;
      padding: 0;
    }
    .faq-item.open .faq-a {
      max-height: 200px;
      padding-bottom: 14px;
    }

  
    /* ═══════════════════════════════════════════════════════════════
       MOBILE — max-width: 768px
    ═══════════════════════════════════════════════════════════════ */
    @media (max-width: 768px) {

      /* ── CONTAINER ── */
      .container { padding: 0 16px; }

      /* ── HEADER ── */
      .header-main { padding: 12px 0 10px; }

      .header-inner {
        flex-direction: column;
        align-items: center;
        gap: 10px;
      }

      .header-inner > div:first-child {
        width: 100%;
      }

      .header-inner > div:last-child {
        position: static;
        width: 100%;
      }

      .logo {
        max-width: 100%;
        height: auto;
      }

      .header-right {
        width: 100%;
        align-items: center;
      }

      .header-buttons {
        justify-content: center;
      }

      .header-date-weather {
        text-align: center;
      }

      .logo { font-size: 1.4rem; }

      .logo-tagline { font-size: 0.52rem; }

      /* ── HERO ── */
      .hero { padding: 32px 0 36px; }

      .hero-row {
        flex-direction: column;
        gap: 16px;
      }

      .hero-badge {
        padding: 28px 24px 24px;
        min-width: unset;
        width: 100%;
      }

      .hero-price {
        font-size: clamp(3rem, 14vw, 4.5rem);
      }

      .hero-price-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
      }

      .did-you-know {
        width: 100%;
        padding: 22px 22px 20px;
      }

      /* ── DATA HEADLINE ── */
      .data-headline { padding: 32px 16px 8px; }
      .data-headline-text { font-size: 0.95rem; }

      /* ── CHART ── */
      .chart-section { padding: 36px 0 32px; }

      .chart-wrap {
        padding-bottom: 8px !important;
      }

      .chart-wrap canvas {
        max-height: 260px;
      }

      .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 18px;
      }

      .chart-controls-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .events-toggle {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.6rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 5px 10px;
      border: 1px solid var(--border);
      border-radius: 3px;
      background: transparent;
      color: var(--text-dim);
      cursor: pointer;
      transition: all 0.25s;
      white-space: nowrap;
    }

    .events-toggle:hover {
      border-color: rgba(212,170,80,0.4);
      color: var(--text-muted);
    }

    .events-toggle.active {
      background: linear-gradient(145deg, #5c1a2a 0%, #3d1019 60%, #521525 100%);
      border-color: rgba(212,170,80,0.55);
      color: rgba(240,232,204,0.92);
      box-shadow:
        0 0 0 1px rgba(212,170,80,0.2),
        0 0 8px 2px rgba(212,170,80,0.15),
        0 0 16px 4px rgba(139,26,26,0.25),
        inset 0 1px 0 rgba(255,255,255,0.06);
    }

    .events-toggle-globe {
      font-size: 0.85rem;
      opacity: 0.35;
      transition: opacity 0.2s;
      display: inline-block;
    }

    .events-toggle.active .events-toggle-globe {
      opacity: 1;
    }

    @keyframes globe-flip {
      0%   { transform: rotateY(0deg); }
      50%  { transform: rotateY(90deg); }
      100% { transform: rotateY(0deg); }
    }

    .events-toggle-globe.spinning {
      animation: globe-flip 0.35s ease-in-out;
    }

    .timeframe-tabs { width: 100%; }

      .tab {
        flex: 1;
        text-align: center;
        padding: 7px 6px;
        font-size: 0.65rem;
      }

      .chart-caption { font-size: 0.65rem; text-align: center; }

      /* ── INGREDIENTS ── */
      .ingredients-section { padding: 36px 0 32px; }

      .ingredients-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 6px;
        padding: 6px;
      }

      .ingredient-card { padding: 14px 14px; }


      .ingredient-icon { font-size: 1.6rem; }

      .ingredient-name { font-size: 0.95rem; }

      .ingredient-price { font-size: 1.35rem; }

      .ingredient-delta { font-size: 0.66rem; }

      /* ── CARD BACK MOBILE ── */
      .card-back {
        padding: 12px 14px !important;
      }

      .card-back-name {
        margin-bottom: 4px;
        gap: 0;
      }

      .card-back-ingname { font-size: 0.5rem; }
      .card-back-since { font-size: 0.46rem; }

      .card-back-chart {
        min-height: 55px;
      }

      .card-back-footer {
        margin-top: 5px;
      }

      .card-back-label {
        font-size: 0.42rem;
      }

      .card-back-label span {
        font-size: 0.51rem;
      }

      .card-back-change {
        font-size: 1rem;
      }

      /* ── FAQ ── */
      .faq-section { padding: 36px 12px 36px; }

      .faq-q { font-size: 0.82rem; padding: 14px 0; }

      .faq-a { font-size: 0.82rem; }

      /* ── DONATE ── */
      .donate-section { padding: 36px 16px 36px; }

      .donate-text {
        font-size: 0.68rem;
        white-space: normal;
      }

      .donate-coin { font-size: 0.58rem; }

      .donate-addr {
        display: block;
        font-size: 0.55rem;
        margin-top: 2px;
        word-break: break-all;
      }

      /* ── FOOTER ── */
      .footer-meta-inner {
        text-align: center;
      }

      .footer-main-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
      }

      /* ── X FOLLOW BUTTON ── */
      .x-follow span { display: none; }
      .x-follow { padding: 7px 10px; }
    }

    /* ═══════════════════════════════════════════════════════════════
       SMALL PHONES — max-width: 400px
    ═══════════════════════════════════════════════════════════════ */
    @media (max-width: 400px) {
      .logo { font-size: 1.2rem; }
      .hero-badge { padding: 22px 18px 20px; }
      .ingredients-grid {
        grid-template-columns: 1fr 1fr;
      }
      .hero-price { font-size: clamp(3rem, 16vw, 4.2rem); }
    }