@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════════════
   GOLD — dealer landing template
   A dark, warm-ink ground so metallic gold reads as metal, not yellow.
   Tokens first; components after. No framework, no build step.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. TOKENS ───────────────────────────────────────────────────── */
:root {
  /* Ground: near-black warmed toward brown so gold sits in the same
     family instead of vibrating against a cold grey. */
  --ink-000: #080705;
  --ink-050: #0B0A08;
  --ink-100: #12100C;
  --ink-200: #1A1710;
  --ink-300: #242017;

  /* Gold is a ramp, never one flat hex — that's the whole difference
     between "metal" and "mustard". */
  --gold-100: #FDF6DA;
  --gold-200: #F4E4AC;
  --gold-300: #E8C55F;
  --gold-400: #D4A73C;
  --gold-500: #B8862F;
  --gold-600: #8A5E1E;
  --gold-700: #5E3E12;

  --metal: linear-gradient(100deg, #8A5E1E 0%, #C9973F 14%, #F7E7AC 30%,
                                    #FFFDF2 40%, #E8C55F 52%, #B8862F 68%,
                                    #F4E4AC 84%, #C9973F 100%);

  /* Oxblood: inherited from the brand's red velvet, pushed deep so it
     works as shadow rather than as a competing accent. */
  --blood: #6E1520;

  --paper: #F7F3E9;
  --paper-dim: #CFC7B4;
  --paper-mute: #ADA595;   /* clears 7:1 on --ink-200 */

  --ok: #3FBF7F;
  --wa: #25D366;

  /* Fluid type — one scale, no magic numbers in components. */
  --t-xs:   clamp(0.75rem, 0.73rem + 0.10vw, 0.813rem);
  --t-sm:   clamp(0.875rem, 0.85rem + 0.12vw, 0.938rem);
  --t-base: clamp(1rem, 0.97rem + 0.16vw, 1.094rem);
  --t-md:   clamp(1.125rem, 1.06rem + 0.32vw, 1.313rem);
  --t-lg:   clamp(1.375rem, 1.25rem + 0.6vw, 1.75rem);
  --t-xl:   clamp(1.75rem, 1.5rem + 1.2vw, 2.5rem);
  --t-2xl:  clamp(2.125rem, 1.7rem + 2.1vw, 3.25rem);
  --t-3xl:  clamp(2.5rem, 1.95rem + 3.1vw, 4.5rem);

  --s-1: clamp(0.25rem, 0.24rem + 0.06vw, 0.313rem);
  --s-2: clamp(0.5rem, 0.47rem + 0.12vw, 0.625rem);
  --s-3: clamp(0.75rem, 0.7rem + 0.24vw, 0.938rem);
  --s-4: clamp(1rem, 0.94rem + 0.3vw, 1.25rem);
  --s-5: clamp(1.5rem, 1.38rem + 0.6vw, 2rem);
  --s-6: clamp(2rem, 1.8rem + 1vw, 2.75rem);
  --s-7: clamp(3rem, 2.6rem + 1.8vw, 4.25rem);
  --s-8: clamp(4rem, 3.2rem + 3.6vw, 7rem);
  --s-9: clamp(4.5rem, 3.6rem + 4.4vw, 7.5rem);

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* Elevation reads as light in a dark room: a lifted hairline on top,
     offset shadow with soft blur below. */
  --e-1: 0 1px 0 rgb(255 255 255 / .05) inset, 0 2px 10px rgb(0 0 0 / .35);
  --e-2: 0 1px 0 rgb(255 255 255 / .07) inset, 0 8px 28px rgb(0 0 0 / .45);
  --e-3: 0 1px 0 rgb(255 255 255 / .09) inset, 0 20px 56px rgb(0 0 0 / .55);
  --glow-gold: 0 8px 30px rgb(232 197 95 / .22);

  --line: rgb(232 197 95 / .16);
  --line-soft: rgb(247 243 233 / .085);

  --dur-1: 130ms;
  --dur-2: 240ms;
  --dur-3: 420ms;
  --dur-4: 700ms;
  /* Confident arrival — exponential deceleration, never bounce. */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease: cubic-bezier(.4, 0, .2, 1);

  --wrap: 1180px;
  --wrap-narrow: 760px;
  --dock-h: 0px;
}

/* ── 2. RESET ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  /* Firefox / standards scrollbar */
  scrollbar-color: var(--gold-600) var(--ink-100);
  scrollbar-width: thin;
}

body {
  background: var(--ink-050);
  color: var(--paper);
  font: 400 var(--t-base)/1.65 Archivo, ui-sans-serif, system-ui, sans-serif;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  padding-bottom: var(--dock-h);
  caret-color: var(--gold-300);
}

img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; text-underline-offset: .18em; text-decoration-thickness: 1px; }
ul, ol { list-style: none; padding: 0; }
summary::-webkit-details-marker { display: none; }
.sprite { position: absolute; }

/* Browser chrome belongs to the design system too. */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--ink-100); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--gold-500), var(--gold-700));
  border-radius: var(--r-pill);
  border: 2px solid var(--ink-050);
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--gold-400), var(--gold-600)); }
::-webkit-scrollbar-corner { background: var(--ink-100); }

:focus-visible {
  outline: 2px solid var(--gold-300);
  outline-offset: 3px;
  border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--gold-300); color: var(--ink-000); }

.skip-link {
  position: fixed; inset-block-start: 8px; inset-inline-start: 8px;
  z-index: 200; padding: .7em 1.1em;
  background: var(--gold-300); color: var(--ink-000);
  border-radius: var(--r-sm); font-weight: 700;
  transform: translateY(-160%);
  transition: transform var(--dur-2) var(--ease-out);
}
.skip-link:focus { transform: none; }

/* ── 3. PRIMITIVES ───────────────────────────────────────────────── */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(1.125rem, 4vw, 2.5rem);
}
.wrap--narrow { max-width: var(--wrap-narrow); }

/* Display type carries the identity. Bodoni Moda's optical-size axis is
   load-bearing here: hairline serifs that look engraved at 72px would
   vanish at 20px, so every use sets opsz to match its rendered size. */
.hero__title, .sect__title, .final__title, .dealer__name,
.calc__grams, .stat__n, .step__n, .ledger__name, .quote blockquote,
.foot__brand strong {
  font-family: "Bodoni Moda", "Times New Roman", serif;
  font-variation-settings: "opsz" 28;
}
.hero__title  { font-variation-settings: "opsz" 96; }
.calc__grams  { font-variation-settings: "opsz" 96; }
.sect__title,
.final__title { font-variation-settings: "opsz" 48; }
.dealer__name { font-variation-settings: "opsz" 40; }
.stat__n      { font-variation-settings: "opsz" 32; }
.ledger__name { font-variation-settings: "opsz" 22; }
.step__n,
.foot__brand strong { font-variation-settings: "opsz" 18; }
.quote blockquote   { font-variation-settings: "opsz" 14; }

.sect { padding-block: var(--s-9); position: relative; }
.sect--alt { background: linear-gradient(180deg, var(--ink-100), var(--ink-050) 94%); }
.sect--alt::before, .sect--alt::after {
  content: ""; position: absolute; inset-inline: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 28%, var(--line) 72%, transparent);
}
.sect--alt::before { top: 0; }
.sect--alt::after { bottom: 0; }

/* More space above a heading than below it. */
.sect__head { max-width: 60ch; margin-bottom: var(--s-7); }
.sect__head--row {
  max-width: none; display: flex; flex-wrap: wrap;
  align-items: flex-end; justify-content: space-between; gap: var(--s-4);
}
/* Didone descenders are long; 1.04 let "yang" collide with the line below. */
.sect__title {
  font-size: var(--t-2xl); font-weight: 600; line-height: 1.11;
  letter-spacing: -.02em; text-wrap: balance;
}
.sect__lede {
  margin-top: var(--s-4);
  font-size: var(--t-md);
  color: var(--paper-dim);
  max-width: 54ch;
  text-wrap: pretty;
}
.sect__hint { font-size: var(--t-sm); color: var(--paper-mute); white-space: nowrap; }

/* ── 4. THE METAL ────────────────────────────────────────────────────
   The one place gradient type is earned: this is a lit surface, not
   decoration. --lp is driven by pointer position (or scroll on touch),
   so the highlight travels across the letterforms like light on an ingot.
------------------------------------------------------------------------ */
.metal {
  background: var(--metal);
  background-size: 260% 100%;
  background-position: var(--lp, 34%) 0;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  transition: background-position 220ms linear;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .metal { color: var(--gold-300); -webkit-text-fill-color: currentColor; background: none; }
}
.lit { position: relative; display: inline-block; }
/* Specular streak: one pass, synchronised with the reveal, then gone. */
.lit::after {
  content: ""; position: absolute; inset: -.14em -.06em; pointer-events: none;
  background: linear-gradient(100deg, transparent 38%, rgb(255 255 255 / .55) 50%, transparent 62%);
  mix-blend-mode: overlay;
  transform: translateX(-130%);
  opacity: 0;
}

/* ── 5. BUTTONS ──────────────────────────────────────────────────── */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  gap: .6em;
  min-height: 48px;
  padding: .85em 1.5em;
  border: 0; border-radius: var(--r-pill);
  font-weight: 700; font-size: var(--t-sm);
  letter-spacing: -.005em;
  cursor: pointer;
  white-space: nowrap;
  isolation: isolate;
  transition: transform var(--dur-2) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out),
              background-color var(--dur-2) var(--ease-out),
              border-color var(--dur-2) var(--ease-out);
}
.btn svg { width: 1.15em; height: 1.15em; flex: none; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.985); }

.btn--gold {
  background: var(--metal);
  background-size: 210% 100%;
  background-position: 22% 0;
  color: #2A1B04;
  box-shadow: var(--glow-gold), 0 1px 0 rgb(255 255 255 / .5) inset;
  transition: transform var(--dur-2) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out),
              background-position var(--dur-4) var(--ease-out);
}
.btn--gold:hover {
  background-position: 78% 0;
  box-shadow: 0 12px 40px rgb(232 197 95 / .34), 0 1px 0 rgb(255 255 255 / .6) inset;
}

.btn--ghost {
  background: rgb(247 243 233 / .04);
  color: var(--paper);
  border: 1px solid var(--line-soft);
  backdrop-filter: blur(6px);
}
.btn--ghost:hover { background: rgb(247 243 233 / .09); border-color: var(--line); }

.btn--sm { min-height: 42px; padding: .6em 1.15em; font-size: var(--t-xs); }
.btn--lg { min-height: 58px; padding: 1em 2em; font-size: var(--t-base); }
.btn--block { width: 100%; }

/* ── 6. PROGRESS + HEADER ────────────────────────────────────────── */
.progress {
  position: fixed; inset: 0 0 auto; height: 2px; z-index: 120;
  pointer-events: none;
}
.progress span {
  display: block; height: 100%; width: 0;
  background: var(--metal); background-size: 200% 100%;
  box-shadow: 0 0 12px rgb(232 197 95 / .6);
}

.site-head {
  position: fixed; inset: 2px 0 auto; z-index: 110;
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur-3) var(--ease-out),
              backdrop-filter var(--dur-3) var(--ease-out),
              border-color var(--dur-3) var(--ease-out),
              transform var(--dur-3) var(--ease-out);
}
.site-head.is-stuck {
  background: rgb(11 10 8 / .78);
  backdrop-filter: blur(16px) saturate(150%);
  border-bottom-color: var(--line-soft);
}
.site-head.is-hidden { transform: translateY(-102%); }

.site-head__in { display: flex; align-items: center; gap: var(--s-5); min-height: 68px; }
.brand {
  display: flex; align-items: center; gap: .7rem;
  margin-inline-end: auto;
  padding-block: 8px;   /* lifts the logo link to a 48px target */
}
.brand__mark { width: 34px; height: 34px; flex: none; filter: drop-shadow(0 2px 6px rgb(232 197 95 / .3)); }
.brand__mark svg { width: 100%; height: 100%; }
.brand__txt { display: flex; flex-direction: column; line-height: 1.25; }
.brand__txt strong { font-size: var(--t-sm); font-weight: 700; letter-spacing: -.01em; }
.brand__txt small { font-size: 11px; color: var(--paper-mute); }

.site-nav { display: none; gap: var(--s-5); font-size: var(--t-sm); font-weight: 500; }
.site-nav a { color: var(--paper-dim); position: relative; padding-block: .35em; }
.site-nav a::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 1.5px;
  background: var(--gold-300); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-2) var(--ease-out);
}
.site-nav a:hover { color: var(--paper); }
.site-nav a:hover::after { transform: scaleX(1); }

@media (min-width: 900px) { .site-nav { display: flex; } }
@media (max-width: 559px) { .site-head__cta { display: none; } }

/* ── 7. HERO — the authored moment ───────────────────────────────────
   Line 1 and 3 rise; the metal line is *wiped in* by a travelling
   specular streak so the type reads as a surface catching light rather
   than text fading up. Pure CSS, so a failed script cannot hide it.
------------------------------------------------------------------------ */
.hero {
  position: relative;
  padding-block: calc(68px + var(--s-7)) var(--s-7);
  overflow: hidden;
  isolation: isolate;
}
.hero__glow {
  position: absolute; inset: -20% -10% auto; height: 130%; z-index: -2;
  background:
    radial-gradient(58% 46% at 74% 32%, rgb(232 197 95 / .20), transparent 68%),
    radial-gradient(48% 40% at 12% 8%,  rgb(110 21 32 / .38), transparent 70%),
    radial-gradient(70% 55% at 50% 120%, rgb(184 134 47 / .12), transparent 72%);
  animation: vaultLight 900ms var(--ease-out) both, drift 26s ease-in-out 1s infinite alternate;
}
@keyframes vaultLight { from { opacity: 0; transform: scale(1.08); } to { opacity: 1; transform: none; } }
@keyframes drift {
  from { transform: translate3d(0,0,0) scale(1); }
  to   { transform: translate3d(-2.5%, 1.5%, 0) scale(1.05); }
}
.hero__grain {
  position: absolute; inset: 0; z-index: -1; opacity: .3;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

.hero__in { display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 940px) {
  .hero__in { grid-template-columns: minmax(0,1.08fr) minmax(0,.92fr); }
}

.hero__title {
  font-size: var(--t-3xl); font-weight: 600; line-height: 1.07;
  letter-spacing: -.02em;
}
.ln { display: block; }
.ln--1, .ln--3 { animation: riseIn 640ms var(--ease-out) both; }
.ln--1 { animation-delay: 40ms; }
.ln--3 { animation-delay: 460ms; }
@keyframes riseIn { from { opacity: 0; transform: translateY(.18em); } to { opacity: 1; transform: none; } }

.ln--2 .metal { animation: wipeIn 900ms var(--ease-out) 200ms both; }
@keyframes wipeIn {
  from { clip-path: inset(0 100% 0 -2%); }
  to   { clip-path: inset(0 -3% 0 -2%); }
}
.ln--2::after { animation: streak 1000ms var(--ease-out) 200ms both; }
@keyframes streak {
  0%   { transform: translateX(-130%); opacity: 0; }
  18%  { opacity: 1; }
  82%  { opacity: 1; }
  100% { transform: translateX(130%); opacity: 0; }
}

.hero__lede,
.hero__cta,
.hero__note,
.hero__art,
.trust { animation: riseIn 700ms var(--ease-out) both; }
.hero__art  { animation-delay: 260ms; animation-duration: 900ms; }
.hero__lede { animation-delay: 620ms; }
.hero__cta  { animation-delay: 720ms; }
.hero__note { animation-delay: 800ms; }
.trust      { animation-delay: 860ms; }

.hero__lede {
  margin-top: var(--s-5);
  font-size: var(--t-md);
  color: var(--paper-dim);
  max-width: 46ch;
  text-wrap: pretty;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.hero__note { margin-top: var(--s-4); font-size: var(--t-xs); color: var(--paper-mute); }
.hero__note strong { color: var(--gold-200); font-weight: 700; }

.hero__art { display: flex; justify-content: center; }
.bars { position: relative; width: min(100%, 460px); }
.bars__svg { width: 100%; filter: drop-shadow(0 34px 60px rgb(0 0 0 / .6)); }
/* Pointer-tracked specular: cx follows the cursor across the ingots. */
.bars__spec {
  transform: translate(calc(var(--sx, 0) * 1px), calc(var(--sy, 0) * 1px));
  transition: transform 340ms var(--ease-out);
}

.chip {
  position: absolute; inset-block-end: 1%; inset-inline-start: -3%;
  display: grid; gap: 2px;
  padding: var(--s-3) var(--s-4);
  background: rgb(18 16 12 / .82);
  backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--e-3);
}
.chip__label { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--paper-mute); }
.chip__val {
  font-size: var(--t-lg); font-weight: 800; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--gold-200);
}
.chip__date { font-size: 10.5px; color: var(--paper-mute); }

.trust {
  display: grid; gap: var(--s-3);
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line-soft);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.trust li { display: flex; align-items: center; gap: .8rem; }
.trust svg { width: 26px; height: 26px; flex: none; color: var(--gold-300); }
.trust span { display: flex; flex-direction: column; font-size: var(--t-xs); color: var(--paper-mute); line-height: 1.45; }
.trust strong { font-size: var(--t-sm); font-weight: 700; color: var(--paper); }

/* ── 8. STAT BAND ────────────────────────────────────────────────── */
.band { background: var(--ink-100); border-block: 1px solid var(--line-soft); padding-block: var(--s-6); }
.band__grid { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.stat { text-align: center; position: relative; }
.stat + .stat::before {
  content: ""; position: absolute; inset-block: 12%; inset-inline-start: calc(var(--s-5) / -2);
  width: 1px; background: var(--line-soft);
}
/* Emphasis from weight and size, not another gradient. */
.stat__n {
  display: block;
  font-size: var(--t-xl); font-weight: 700; line-height: 1;
  letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
  color: var(--gold-200);
}
.stat__l { display: block; margin-top: var(--s-2); font-size: var(--t-xs); color: var(--paper-mute); line-height: 1.45; }
@media (max-width: 520px) { .stat + .stat::before { display: none; } }

/* ── 9. CALCULATOR ───────────────────────────────────────────────── */
.calc {
  display: grid; gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--e-3);
}
@media (min-width: 880px) { .calc { grid-template-columns: 1fr 1fr; } }

.calc__ctrl { display: grid; gap: var(--s-6); align-content: start; padding: var(--s-6); background: var(--ink-100); }
.calc__out {
  display: flex; flex-direction: column; gap: var(--s-5);
  padding: var(--s-6);
  background:
    radial-gradient(120% 90% at 100% 0%, rgb(232 197 95 / .10), transparent 62%),
    var(--ink-200);
}

.field { display: grid; grid-template-columns: 1fr auto; gap: var(--s-2) var(--s-3); }
.field label { font-size: var(--t-sm); font-weight: 600; color: var(--paper-dim); align-self: center; }
.field__out {
  font-weight: 800; font-size: var(--t-md);
  font-variant-numeric: tabular-nums;
  color: var(--gold-200); letter-spacing: -.01em;
}
.field input[type="range"] { grid-column: 1 / -1; }
.field__ends {
  grid-column: 1 / -1;
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--paper-mute);
  font-variant-numeric: tabular-nums;
}

input[type="range"] {
  -webkit-appearance: none; appearance: none;
  /* 44px so the whole strip is a comfortable touch target. */
  width: 100%; height: 44px; background: transparent; cursor: grab;
}
input[type="range"]:active { cursor: grabbing; }
input[type="range"]::-webkit-slider-runnable-track {
  height: 6px; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--gold-400) var(--fill, 30%), rgb(247 243 233 / .12) var(--fill, 30%));
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 24px; height: 24px; margin-top: -9px;
  border-radius: 50%; border: 3px solid var(--ink-100);
  background: var(--metal); background-size: 200% 100%;
  box-shadow: 0 2px 10px rgb(0 0 0 / .5), var(--glow-gold);
  transition: transform var(--dur-1) var(--ease-out);
}
input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.14); }
input[type="range"]::-moz-range-track { height: 6px; border-radius: var(--r-pill); background: rgb(247 243 233 / .12); }
input[type="range"]::-moz-range-progress { height: 6px; border-radius: var(--r-pill); background: var(--gold-400); }
input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px; border: 3px solid var(--ink-100);
  border-radius: 50%; background: var(--gold-300);
  box-shadow: 0 2px 10px rgb(0 0 0 / .5);
}

.calc__disc {
  font-size: var(--t-xs); color: var(--paper-mute); line-height: 1.65;
  max-width: 62ch;
  padding-top: var(--s-4);
  border-top: 1px solid var(--line-soft);
}
.calc__disc strong { color: var(--gold-200); font-weight: 700; }

.calc__result { display: grid; gap: var(--s-2); }
.calc__k { font-size: var(--t-sm); color: var(--paper-dim); font-weight: 600; }
.calc__grams {
  font-size: clamp(2.75rem, 2rem + 4vw, 4.25rem);
  font-weight: 700; line-height: .95; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.calc__sub { font-size: var(--t-sm); color: var(--paper-mute); line-height: 1.6; max-width: 40ch; }
.calc__sub span { color: var(--paper-dim); font-weight: 600; font-variant-numeric: tabular-nums; }

/* The tray: grams rendered as the bars you would actually hold. */
.tray { padding-top: var(--s-4); border-top: 1px solid var(--line-soft); }
.tray__bars {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  gap: var(--s-3) var(--s-4);
  min-height: 84px;
}
.tray__bars svg {
  filter: drop-shadow(0 6px 12px rgb(0 0 0 / .55));
  animation: settle 460ms var(--ease-out) both;
}
@keyframes settle {
  from { opacity: 0; transform: translateY(-9px) scale(.94); }
  to   { opacity: 1; transform: none; }
}
.tray__legend {
  margin-top: var(--s-3);
  font-size: var(--t-xs); color: var(--paper-mute); line-height: 1.6;
  font-variant-numeric: tabular-nums;
}
.calc__out .btn { margin-top: auto; }

/* ── 10. LEDGER (kelebihan) ──────────────────────────────────────────
   An assay-sheet rhythm rather than six identical boxes: hairline rows,
   the benefit set in the display face, the reasoning held to one measure.
------------------------------------------------------------------------ */
.ledger { border-top: 1px solid var(--line-soft); }
.ledger__row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: var(--s-2) var(--s-4);
  padding-block: var(--s-5);
  border-bottom: 1px solid var(--line-soft);
  transition: background-color var(--dur-3) var(--ease-out),
              border-color var(--dur-3) var(--ease-out);
}
.ledger__row:hover { background: rgb(232 197 95 / .035); border-bottom-color: var(--line); }
.ledger__ico { grid-row: span 2; color: var(--gold-400); padding-top: .18em; }
.ledger__ico svg { width: 24px; height: 24px; }
.ledger__name {
  font-size: var(--t-lg); font-weight: 600; line-height: 1.15;
  letter-spacing: -.02em; text-wrap: balance;
  transition: color var(--dur-2) var(--ease-out);
}
.ledger__row:hover .ledger__name { color: var(--gold-200); }
.ledger__note {
  font-size: var(--t-base); color: var(--paper-mute);
  line-height: 1.6; max-width: 60ch; text-wrap: pretty;
}

@media (min-width: 860px) {
  .ledger__row {
    grid-template-columns: 32px minmax(11ch, 19ch) minmax(0, 1fr);
    align-items: baseline;
    gap: var(--s-5);
  }
  .ledger__ico { grid-row: auto; }
}

/* ── 11. FEATURE GRID (kenapa PG) ────────────────────────────────── */
.feat {
  display: grid; gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  border-top: 1px solid var(--line-soft);
}
.feat__i {
  padding: var(--s-5) var(--s-5) var(--s-5) 0;
  border-bottom: 1px solid var(--line-soft);
  transition: background-color var(--dur-3) var(--ease-out);
}
.feat__i:hover { background: rgb(232 197 95 / .03); }
.feat__i h3 {
  font-size: var(--t-base); font-weight: 700; letter-spacing: -.012em;
  margin-bottom: var(--s-2); color: var(--gold-200);
}
.feat__i p { font-size: var(--t-sm); color: var(--paper-mute); max-width: 42ch; text-wrap: pretty; }
@media (min-width: 780px) { .feat__i { padding-inline-end: var(--s-6); } }

/* ── 12. PRODUCT RAIL ────────────────────────────────────────────── */
.rail {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x proximity;
  padding-block: var(--s-2) var(--s-5);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}
.rail__track {
  display: flex; gap: var(--s-5);
  padding-inline: max(1.125rem, calc((100vw - var(--wrap)) / 2 + 2.5rem));
}
/* No card chrome: the bars sit on the ground and the size does the talking. */
.prod {
  flex: 0 0 clamp(228px, 66vw, 282px);
  scroll-snap-align: center;
  display: flex; flex-direction: column; gap: var(--s-3);
}
.prod h3 { font-size: var(--t-base); font-weight: 700; letter-spacing: -.012em; }
.prod p { font-size: var(--t-xs); color: var(--paper-mute); }
.prod__art {
  position: relative; height: 150px;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: radial-gradient(64% 54% at 50% 102%, rgb(232 197 95 / .15), transparent 72%);
}
.prod__bar {
  width: var(--w, 60%);
  filter: drop-shadow(0 14px 20px rgb(0 0 0 / .6));
  transition: transform var(--dur-3) var(--ease-out);
}
.prod:hover .prod__bar { transform: translateY(-5px) scale(1.05); }

/* ── 13. STEPS ───────────────────────────────────────────────────────
   The rule draws left to right across the three steps in sequence: the
   motion is the progression, which is the information.
------------------------------------------------------------------------ */
.steps { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.step { position: relative; padding-top: var(--s-5); }
.step::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold-500), rgb(232 197 95 / .08));
  transform: scaleX(0); transform-origin: left;
  transition: transform 760ms var(--ease-out);
}
[data-steps].is-in .step::before { transform: scaleX(1); }
[data-steps].is-in .step:nth-child(2)::before { transition-delay: 200ms; }
[data-steps].is-in .step:nth-child(3)::before { transition-delay: 400ms; }
.step__n {
  display: grid; place-items: center;
  width: 42px; height: 42px; margin-bottom: var(--s-4);
  border-radius: 50%;
  font-weight: 700; font-size: var(--t-base);
  color: #2A1B04; background: var(--metal); background-size: 200% 100%;
  box-shadow: var(--glow-gold);
}
.step h3 { font-size: var(--t-md); font-weight: 700; letter-spacing: -.015em; margin-bottom: var(--s-2); }
.step p { font-size: var(--t-sm); color: var(--paper-mute); max-width: 40ch; text-wrap: pretty; }

/* ── 14. QUOTES ──────────────────────────────────────────────────── */
.quotes { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); }
.quote {
  display: flex; flex-direction: column; gap: var(--s-3);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}
.quote__stars { display: inline-flex; gap: 3px; color: var(--gold-300); }
.quote__stars svg { width: 15px; height: 15px; }
.quote blockquote {
  font-size: var(--t-md); font-weight: 400; line-height: 1.5;
  letter-spacing: -.008em; color: var(--paper);
  max-width: 34ch; text-wrap: pretty;
}
.quote__by {
  display: flex; flex-direction: column;
  margin-top: auto; padding-top: var(--s-3);
  font-size: var(--t-xs); color: var(--paper-mute); line-height: 1.5;
}
.quote__by strong { font-size: var(--t-sm); color: var(--paper); font-weight: 700; }

/* ── 15. FAQ ─────────────────────────────────────────────────────── */
.faq { border-top: 1px solid var(--line-soft); }
.faq__i { border-bottom: 1px solid var(--line-soft); }
.faq__i summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding-block: var(--s-4);
  font-size: var(--t-md); font-weight: 600; letter-spacing: -.014em;
  cursor: pointer; list-style: none;
  transition: color var(--dur-2) var(--ease-out);
}
.faq__i summary:hover { color: var(--gold-200); }
.faq__ico {
  position: relative; width: 20px; height: 20px; flex: none;
  border-radius: 50%; border: 1px solid var(--line);
  transition: transform var(--dur-3) var(--ease-out), background-color var(--dur-2) var(--ease-out);
}
.faq__ico::before, .faq__ico::after {
  content: ""; position: absolute; inset: 50% 25%; height: 1.5px; margin-top: -.75px;
  background: var(--gold-300); border-radius: 2px;
  transition: opacity var(--dur-2) var(--ease-out);
}
.faq__ico::after { transform: rotate(90deg); }
.faq__i[open] .faq__ico { transform: rotate(180deg); background: rgb(232 197 95 / .12); }
.faq__i[open] .faq__ico::after { opacity: 0; }
.faq__a { padding-bottom: var(--s-4); }
.faq__a p { font-size: var(--t-sm); color: var(--paper-mute); max-width: 68ch; text-wrap: pretty; }
.faq__i[open] .faq__a { animation: faqIn var(--dur-3) var(--ease-out) both; }
@keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ── 16. DEALER ──────────────────────────────────────────────────── */
.dealer {
  display: grid; gap: var(--s-6); align-items: center;
  padding: var(--s-6);
  background:
    radial-gradient(90% 120% at 0% 0%, rgb(110 21 32 / .32), transparent 62%),
    linear-gradient(150deg, var(--ink-300), var(--ink-100));
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--e-3);
}
@media (min-width: 760px) { .dealer { grid-template-columns: 240px 1fr; gap: var(--s-7); } }
/* A 4:5 portrait, not a circle: head-and-shoulders photography is shot in
   portrait, and a round crop throws away the shoulders that make it read as
   a person rather than an avatar. */
.dealer__pic {
  position: relative;
  width: min(248px, 88%);
  margin-inline: auto;
  padding: 3px;
  border-radius: 20px;
  /* The rim is struck from the same metal, lit by the same pointer light. */
  background: var(--metal);
  background-size: 220% 100%;
  background-position: var(--lp, 30%) 0;
  box-shadow: 0 20px 48px rgb(0 0 0 / .6), var(--glow-gold);
}
.dealer__pic img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: 17px;
  /* A daylight office portrait arrives cool and bright, which would punch a
     hole in this ground. Drop the fluorescent cast, push amber, and hold the
     face lighter than its surroundings so it still reads as the subject. */
  filter: saturate(.62) contrast(1.06) sepia(.22) brightness(.94);
}
/* A bottom-weighted scrim grounds the figure, folds the bright window light
   into the panel, and gives the status chip somewhere to sit. */
.dealer__pic::after {
  content: ""; position: absolute; inset: 3px; border-radius: 17px;
  pointer-events: none;
  background:
    linear-gradient(to top, rgb(12 11 8 / .94) 0%, rgb(12 11 8 / .5) 22%, transparent 52%),
    radial-gradient(120% 90% at 50% 32%, transparent 46%, rgb(12 11 8 / .5) 100%);
}
.dealer__badge {
  position: absolute; inset-block-end: 12px; inset-inline-start: 12px; z-index: 2;
  display: inline-flex; align-items: center; gap: .45em;
  padding: .4em .8em; border-radius: var(--r-pill);
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--paper);
  background: rgb(8 7 5 / .74);
  border: 1px solid var(--line);
  backdrop-filter: blur(8px);
}
/* Green survives as a live-status dot, not a slab that fights the palette. */
.dealer__badge::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--ok); box-shadow: 0 0 8px var(--ok);
}
.dealer__name { font-size: var(--t-xl); font-weight: 600; letter-spacing: -.024em; line-height: 1.05; }
/* Each half stays whole: uppercase tracking made the code break as
   "PG CODE / PG01387764" on narrow screens. */
.dealer__code {
  margin-top: var(--s-2);
  display: flex; flex-wrap: wrap; gap: .1em 1em;
  font-size: var(--t-xs); letter-spacing: .06em; text-transform: uppercase;
  color: var(--gold-200); font-weight: 700; font-variant-numeric: tabular-nums;
}
.dealer__code > span { white-space: nowrap; }
.dealer__bio { margin-top: var(--s-4); font-size: var(--t-base); color: var(--paper-dim); max-width: 52ch; text-wrap: pretty; }
.dealer__cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }

/* ── 17. FINAL CTA ───────────────────────────────────────────────── */
.final {
  position: relative; overflow: hidden; isolation: isolate;
  padding-block: var(--s-9);
  text-align: center;
  border-top: 1px solid var(--line-soft);
}
.final__glow {
  position: absolute; inset: -40% -10% auto; height: 180%; z-index: -1;
  background:
    radial-gradient(46% 40% at 50% 22%, rgb(232 197 95 / .18), transparent 68%),
    radial-gradient(60% 46% at 50% 100%, rgb(110 21 32 / .32), transparent 70%);
}
.final__in { display: grid; justify-items: center; gap: var(--s-4); }
.final__title {
  font-size: var(--t-2xl); font-weight: 600; line-height: 1.11;
  letter-spacing: -.02em; max-width: 24ch; text-wrap: balance;
}
.final__lede { font-size: var(--t-md); color: var(--paper-dim); max-width: 44ch; text-wrap: pretty; }
.final__note { font-size: var(--t-xs); color: var(--paper-mute); }

/* ── 18. FOOTER ──────────────────────────────────────────────────── */
.foot { background: var(--ink-000); border-top: 1px solid var(--line-soft); padding-block: var(--s-7) var(--s-6); }
.foot__in { display: grid; gap: var(--s-5); }
.foot__brand { display: flex; flex-direction: column; gap: 2px; }
.foot__brand strong { font-size: var(--t-md); font-weight: 600; letter-spacing: -.018em; }
.foot__brand span { font-size: var(--t-xs); color: var(--paper-mute); }
.foot__nav { display: flex; flex-wrap: wrap; gap: 0 var(--s-5); font-size: var(--t-sm); }
.foot__nav a {
  color: var(--paper-dim);
  display: inline-flex; align-items: center;
  min-height: 44px;   /* footer links are a common fat-finger miss */
}
.foot__nav a:hover { color: var(--gold-200); text-decoration: underline; }
.foot__disc {
  font-size: var(--t-xs); color: var(--paper-mute); line-height: 1.7;
  max-width: 72ch;
  padding-top: var(--s-4);
  border-top: 1px solid var(--line-soft);
}
.foot__copy { font-size: var(--t-xs); color: var(--paper-mute); font-variant-numeric: tabular-nums; }

/* ── 19. STICKY DOCK ─────────────────────────────────────────────── */
.dock {
  position: fixed; inset: auto 0 0; z-index: 100;
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) clamp(1.125rem, 4vw, 2.5rem)
           calc(var(--s-3) + env(safe-area-inset-bottom, 0px));
  background: rgb(8 7 5 / .86);
  backdrop-filter: blur(18px) saturate(160%);
  border-top: 1px solid var(--line-soft);
  transform: translateY(105%);
  transition: transform var(--dur-3) var(--ease-out);
}
.dock.is-on { transform: none; }
.dock__cta { flex: 1; }
.dock__wa {
  display: grid; place-items: center;
  width: 48px; height: 48px; flex: none;
  border-radius: 50%;
  color: var(--wa);
  background: rgb(37 211 102 / .12);
  border: 1px solid rgb(37 211 102 / .35);
  transition: background-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.dock__wa svg { width: 26px; height: 26px; }
.dock__wa:hover { background: rgb(37 211 102 / .22); transform: translateY(-2px); }

/* On desktop the dock becomes a single floating WhatsApp affordance —
   the header already carries the primary CTA there. */
@media (min-width: 720px) {
  .dock {
    inset: auto var(--s-5) var(--s-5) auto;
    padding: 0; gap: 0;
    background: none; border: 0; backdrop-filter: none;
  }
  .dock__cta { display: none; }
  .dock__wa {
    width: 56px; height: 56px;
    background: var(--wa); color: #06240F;
    border-color: transparent;
    box-shadow: 0 10px 30px rgb(37 211 102 / .35);
  }
  .dock__wa:hover { background: #2FE776; }
}

/* ── 20. LIST STAGGER ────────────────────────────────────────────────
   Only where a list genuinely appears as a list. Total delay capped at
   300ms so the last row never feels late.
------------------------------------------------------------------------ */
[data-stagger] > * {
  opacity: 0; transform: translateY(10px);
  transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out);
}
[data-stagger].is-in > * { opacity: 1; transform: none; }
[data-stagger].is-in > :nth-child(2) { transition-delay: 60ms; }
[data-stagger].is-in > :nth-child(3) { transition-delay: 120ms; }
[data-stagger].is-in > :nth-child(4) { transition-delay: 180ms; }
[data-stagger].is-in > :nth-child(5) { transition-delay: 240ms; }
[data-stagger].is-in > :nth-child(6) { transition-delay: 300ms; }

/* No-JS: nothing stays hidden. */
.no-js [data-stagger] > * { opacity: 1; transform: none; }
.no-js [data-steps] .step::before { transform: scaleX(1); }

/* ── 21. REDUCED MOTION ──────────────────────────────────────────────
   Fewer and gentler, not none: entrances become simple fades, the metal
   still arrives, movement and loops stop.
------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .hero__glow { animation: vaultLight 400ms linear both; }
  .ln--1, .ln--3,
  .hero__lede, .hero__cta, .hero__note, .hero__art, .trust {
    animation-name: fadeOnly; animation-duration: 300ms;
  }
  @keyframes fadeOnly { from { opacity: 0; } to { opacity: 1; } }

  .ln--2 .metal { animation: none; clip-path: none; }
  .ln--2::after { animation: none; opacity: 0; }
  .bars__spec { transition: none; }
  .tray__bars svg { animation-name: fadeOnly; animation-duration: 200ms; }

  [data-stagger] > * { transform: none; transition-duration: 260ms; }
  [data-steps] .step::before { transition-duration: 260ms; }

  .btn:hover, .prod:hover .prod__bar, .dock__wa:hover { transform: none; }
  .faq__i[open] .faq__a { animation-name: fadeOnly; }
}

/* ── 22. PRINT ───────────────────────────────────────────────────── */
@media print {
  .site-head, .dock, .progress, .hero__glow, .hero__grain, .final__glow { display: none !important; }
  body { background: #fff; color: #000; }
  .sect { padding-block: 1.5rem; }
  .metal { -webkit-text-fill-color: #8A5E1E; color: #8A5E1E; background: none; }
  [data-stagger] > * { opacity: 1; transform: none; }
}