/* ═══════════════════════════════════════════════════════════
   SPY · STONK PORTFOLIO YIELD
   A serious financial institution, run by a duck.
   ═══════════════════════════════════════════════════════════ */

:root{
  /* Ink & paper */
  --cream:      #F2EFE6;
  --cream-2:    #EAE6DA;
  --paper-line: #D9D3C3;

  /* Forest */
  --ink:        #08120E;
  --forest:     #0D211A;
  --forest-2:   #10291F;
  --forest-3:   #17362A;

  /* Accents */
  --gold:       #C6A86A;
  --gold-lt:    #E2CB94;
  --mint:       #5EE084;
  --mint-dk:    #38B45F;
  --rose:       #E4746A;

  /* Text */
  --tx-dark:    #10201A;
  --tx-mute:    #5D6B63;
  --tx-light:   #F4F2EA;
  --tx-lmute:   #A8B5AC;

  /* Type */
  --serif: 'Playfair Display', 'Didot', 'Bodoni 72', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono:  'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Metrics */
  --wrap: 1320px;
  --pad: clamp(20px, 5vw, 64px);
  --hdr-h: 76px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ── Reset ───────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr-h) + 28px)}
body{
  margin:0;background:var(--cream);color:var(--tx-dark);
  font-family:var(--sans);font-size:16px;line-height:1.62;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{list-style:none;padding:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
table{border-collapse:collapse;width:100%}
svg{display:block}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--forest);
  color:var(--tx-light);padding:12px 20px;font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.skip-link:focus{left:12px;top:12px}
:focus-visible{outline:2px solid var(--mint);outline-offset:3px;border-radius:2px}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}

/* ── Shared type ─────────────────────────────────────────── */
.eyebrow{
  font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--tx-mute);margin:0 0 18px;
}
.eyebrow--light{color:var(--gold)}

.h2{
  font-family:var(--serif);font-weight:700;
  font-size:clamp(34px,4.4vw,58px);line-height:1.05;letter-spacing:-.015em;
  color:var(--tx-dark);margin:0 0 22px;
}
.h2 em{font-style:italic;font-weight:500}
.h2--light{color:var(--tx-light)}
.h2--light em{color:var(--gold-lt)}
.h2--sm{font-size:clamp(30px,3.4vw,44px)}

.lede{font-size:clamp(16px,1.25vw,18px);line-height:1.68;color:var(--tx-mute);max-width:46ch;margin:0 0 26px}
.lede--light{color:var(--tx-lmute);max-width:62ch}

.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.up{color:var(--mint-dk)}

.arw{display:inline-block;transition:transform .35s var(--ease)}
a:hover .arw,button:hover .arw{transform:translateX(5px)}

/* ── Buttons ─────────────────────────────────────────────── */
.btn{
  --bg:var(--forest);--fg:var(--tx-light);--bd:var(--forest);
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 26px;background:var(--bg);color:var(--fg);
  border:1px solid var(--bd);border-radius:2px;
  font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn--dark:hover{--bg:var(--forest-3)}
.btn--gold{--bg:transparent;--fg:var(--gold-lt);--bd:rgba(198,168,106,.55)}
.btn--gold:hover{--bg:var(--gold);--fg:var(--ink);--bd:var(--gold)}
.btn--mint{--bg:var(--mint);--fg:#06251A;--bd:var(--mint)}
.btn--mint:hover{--bg:#7DEB9E;--bd:#7DEB9E}
.btn--ghost{--bg:transparent;--fg:rgba(244,242,234,.8);--bd:rgba(244,242,234,.28)}
.btn--ghost:hover{--bg:rgba(244,242,234,.08);--fg:var(--tx-light)}
.btn--lg{padding:19px 38px;font-size:12.5px}

.link{
  display:inline-flex;align-items:center;gap:9px;
  font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--tx-dark);padding-bottom:4px;border-bottom:1px solid currentColor;
}
.link--sm{font-size:10.5px;color:var(--tx-mute)}
.link--mint{color:var(--mint);border-color:rgba(94,224,132,.4)}
.link--mint:hover{border-color:var(--mint)}

/* ── Icons ───────────────────────────────────────────────── */
.ico{display:grid;place-items:center;width:32px;height:32px;color:var(--forest);flex:none}
.ico svg{width:100%;height:100%}
.ico--mint{color:var(--mint)}
.ico--sm{width:22px;height:22px}

/* ═══════════ ANNOUNCEMENT ═══════════ */
.announce{
  background:var(--ink);color:var(--gold);overflow:hidden;
  border-bottom:1px solid rgba(198,168,106,.16);
}
.announce__track{display:flex;width:max-content;animation:slide 46s linear infinite}
.announce__set{display:flex;align-items:center;padding:9px 0}
.announce__set b{font-size:10px;font-weight:600;letter-spacing:.22em;white-space:nowrap}
.announce__set i{font-style:normal;opacity:.4;margin:0 26px;font-size:8px}
@keyframes slide{to{transform:translateX(-50%)}}
.announce:hover .announce__track{animation-play-state:paused}

/* ═══════════ HEADER ═══════════ */
.hdr{
  position:sticky;top:0;z-index:100;background:var(--cream);
  border-bottom:1px solid transparent;
  transition:border-color .35s var(--ease),box-shadow .35s var(--ease),background .35s var(--ease);
}
.hdr.is-stuck{border-color:var(--paper-line);box-shadow:0 1px 22px rgba(8,18,14,.07)}
.hdr__in{
  max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad);
  height:var(--hdr-h);display:flex;align-items:center;gap:clamp(16px,3vw,42px);
}

.brand{display:flex;align-items:center;gap:12px;flex:none}
.brand__shield{width:34px;height:37px;color:var(--forest);flex:none}
.brand__shield svg{width:100%;height:100%}
.brand__word{
  font-family:var(--serif);font-weight:900;font-size:33px;letter-spacing:-.01em;
  line-height:1;color:var(--tx-dark);
}
.brand__rule{width:1px;height:30px;background:var(--paper-line);margin-left:4px}
.brand__meta{display:flex;flex-direction:column;gap:3px}
.brand__meta b{font-size:10.5px;font-weight:600;letter-spacing:.19em;text-transform:uppercase;color:var(--tx-dark)}
.brand__meta i{font-style:normal;font-size:9px;letter-spacing:.16em;color:var(--tx-mute)}

.nav{display:flex;gap:clamp(14px,2.2vw,34px);margin-left:auto}
.nav a{
  position:relative;font-size:11px;font-weight:600;letter-spacing:.17em;
  text-transform:uppercase;color:var(--tx-mute);padding:6px 0;
  transition:color .25s var(--ease);white-space:nowrap;
}
.nav a::after{
  content:'';position:absolute;left:0;bottom:0;width:0;height:1.5px;
  background:var(--forest);transition:width .35s var(--ease);
}
.nav a:hover{color:var(--tx-dark)}
.nav a:hover::after,.nav a.is-active::after{width:100%}
.nav a.is-active{color:var(--tx-dark)}

.hdr__act{display:flex;align-items:center;gap:14px;margin-left:auto}
.nav + .hdr__act{margin-left:0}

.burger{display:none;width:40px;height:40px;padding:9px;flex-direction:column;justify-content:space-between}
.burger span{display:block;height:1.5px;background:var(--tx-dark);transition:transform .3s var(--ease),opacity .25s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(9.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-9.5px) rotate(-45deg)}

/* ═══════════ HERO ═══════════ */
.hero{position:relative;background:var(--ink);isolation:isolate;overflow:hidden}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:58% 42%}
.hero__scrim{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(100deg, rgba(5,12,9,.97) 0%, rgba(5,12,9,.9) 22%, rgba(5,12,9,.58) 40%, rgba(5,12,9,.14) 58%, transparent 70%),
    linear-gradient(to top, rgba(5,12,9,.78) 0%, transparent 38%),
    linear-gradient(to bottom, rgba(5,12,9,.42) 0%, transparent 22%);
}
.hero__in{
  max-width:var(--wrap);margin-inline:auto;padding:clamp(64px,8vw,110px) var(--pad) clamp(56px,7vw,96px);
  display:grid;grid-template-columns:minmax(0,1fr) 326px;gap:clamp(28px,4vw,56px);
  align-items:center;min-height:clamp(560px,74vh,760px);
}

.hero__h1{
  font-family:var(--serif);font-weight:700;color:var(--tx-light);
  text-transform:uppercase;
  font-size:clamp(44px,7vw,98px);line-height:.94;letter-spacing:-.012em;
  margin:0 0 26px;text-shadow:0 2px 46px rgba(0,0,0,.6);
}
.hero__h1 span,.hero__h1 em{display:block}
.hero__h1 em{font-style:italic;font-weight:500;color:var(--gold-lt)}
.hero__sub{
  font-size:clamp(16px,1.5vw,20px);line-height:1.55;color:rgba(244,242,234,.9);
  margin:0 0 34px;text-shadow:0 1px 20px rgba(0,0,0,.55);
}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:42px}

.hero__trust{display:flex;gap:clamp(22px,3.5vw,46px);flex-wrap:wrap}
.hero__trust li{display:flex;flex-direction:column;gap:2px;
  border-left:1px solid rgba(198,168,106,.3);padding-left:16px}
.hero__trust b{font-family:var(--mono);font-size:19px;font-weight:500;color:var(--gold-lt);font-variant-numeric:tabular-nums}
.hero__trust span{font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgba(244,242,234,.5)}

/* Performance card */
.perf{
  background:rgba(8,18,14,.72);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(198,168,106,.3);padding:26px 26px 22px;
  box-shadow:0 30px 70px rgba(0,0,0,.5);
}
.perf__hd{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:20px}
.perf__tic{font-family:var(--serif);font-size:29px;font-weight:700;color:var(--tx-light);line-height:1;margin:0 0 5px}
.perf__name{font-size:11px;letter-spacing:.06em;color:var(--tx-lmute);margin:0}
.perf__live{
  display:inline-flex;align-items:center;gap:6px;font-size:8.5px;font-weight:700;
  letter-spacing:.2em;color:var(--mint);border:1px solid rgba(94,224,132,.32);
  padding:4px 8px;border-radius:2px;
}
.perf__live i{width:5px;height:5px;border-radius:50%;background:var(--mint);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}

.perf__big{
  font-family:var(--mono);font-size:clamp(32px,3.2vw,40px);font-weight:700;
  color:var(--mint);line-height:1;margin:0 0 7px;display:flex;align-items:baseline;gap:7px;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
.perf__caret{font-size:.5em}
.perf__since{font-size:10px;letter-spacing:.05em;color:rgba(168,181,172,.72);margin:0 0 16px}

.perf__chart{height:84px;margin-bottom:18px}
.perf__chart svg{width:100%;height:100%;overflow:visible}
#sparkLine{stroke-dasharray:1000;stroke-dashoffset:1000;transition:stroke-dashoffset 2.4s var(--ease)}
#sparkLine.is-drawn{stroke-dashoffset:0}
#sparkArea,#sparkDot{opacity:0;transition:opacity .7s ease .9s}
#sparkArea.is-drawn,#sparkDot.is-drawn{opacity:1}

.perf__tbl th,.perf__tbl td{
  padding:9px 0;border-top:1px solid rgba(244,242,234,.09);
  font-family:var(--mono);font-size:13px;font-variant-numeric:tabular-nums;
}
.perf__tbl th{text-align:left;font-weight:400;color:var(--tx-lmute);letter-spacing:.06em}
.perf__tbl td{text-align:right;font-weight:500;color:var(--mint)}
.perf__tbl .up{color:var(--mint)}
.perf__fine{font-size:9.5px;color:rgba(168,181,172,.5);margin:14px 0 0;line-height:1.5}

/* ═══════════ TICKER TAPE ═══════════ */
.tape{
  display:flex;align-items:stretch;background:var(--forest);
  border-block:1px solid rgba(198,168,106,.15);overflow:hidden;
}
.tape__tag{
  display:flex;align-items:center;padding:0 22px;flex:none;
  font-size:9.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);border-right:1px solid rgba(198,168,106,.2);background:var(--ink);
}
.tape__win{flex:1;overflow:hidden;position:relative;min-width:0}
.tape__win::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,var(--forest) 0%,transparent 5%,transparent 95%,var(--forest) 100%);
}
.tape__track{display:flex;width:max-content;animation:slide 58s linear infinite;padding:14px 0}
.tape:hover .tape__track{animation-play-state:paused}
.tape__item{display:flex;align-items:center;gap:9px;padding:0 24px;white-space:nowrap;
  border-right:1px solid rgba(244,242,234,.08)}
.tape__sym{width:17px;height:17px;flex:none;border-radius:3px;display:grid;place-items:center;
  font-size:9px;font-weight:700;font-family:var(--sans);color:#fff;letter-spacing:-.02em}
.tape__nm{font-size:11.5px;font-weight:600;letter-spacing:.1em;color:rgba(244,242,234,.92)}
.tape__pc{font-family:var(--mono);font-size:11.5px;font-weight:500;font-variant-numeric:tabular-nums;
  transition:color .3s,opacity .25s}
.tape__pc.up{color:var(--mint)}
.tape__pc.dn{color:var(--rose)}
.tape__pc.flash{animation:flash .55s ease}
@keyframes flash{0%{opacity:.25}100%{opacity:1}}

/* ═══════════ OUR EDGE ═══════════ */
.edge{background:var(--cream);padding:clamp(56px,7vw,94px) 0}
.edge__grid{
  display:grid;grid-template-columns:1.02fr .92fr 1.02fr 1.05fr;
  gap:clamp(26px,3vw,44px);align-items:start;
}
.edge__lede{border-right:1px solid var(--paper-line);padding-right:clamp(20px,2.4vw,40px)}
.edge__lede .h2{font-size:clamp(28px,2.8vw,40px);margin-bottom:18px}
.edge__lede .lede{font-size:15px;line-height:1.62}

.edge__list{display:flex;flex-direction:column;gap:26px;padding-right:clamp(20px,2.4vw,40px)}
.edge__list li{display:flex;gap:15px;align-items:flex-start}
.edge__list h3{font-size:11px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  color:var(--tx-dark);margin:4px 0 5px}
.edge__list p{font-size:14px;color:var(--tx-mute);margin:0;line-height:1.5}

.edge__moon{position:relative;overflow:hidden;background:var(--forest);aspect-ratio:4/5}
.edge__moon img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.edge__moon:hover img{transform:scale(1.05)}
.edge__moon figcaption{
  position:absolute;inset:auto 0 0 0;padding:22px 24px 26px;
  background:linear-gradient(to top,rgba(6,14,11,.88),transparent);
  display:flex;flex-direction:column;gap:4px;
}
.edge__moonTitle{font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:clamp(26px,2.4vw,34px);line-height:1.02;color:var(--tx-light)}
.edge__moonSub{font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}

.edge__newsHd{display:flex;justify-content:space-between;align-items:baseline;
  border-bottom:1px solid var(--paper-line);padding-bottom:12px;margin-bottom:4px}
.edge__newsHd .eyebrow{margin:0}
.news li{border-bottom:1px solid var(--paper-line)}
.news a{display:grid;grid-template-columns:1fr auto;align-items:center;padding:15px 0;
  transition:padding-left .3s var(--ease)}
.news a::after{content:'›';font-size:20px;color:var(--tx-mute);line-height:1;
  transition:transform .3s var(--ease),color .3s}
.news a:hover{padding-left:7px}
.news a:hover::after{transform:translateX(4px);color:var(--tx-dark)}
.news time{display:block;font-family:var(--mono);font-size:10px;color:var(--tx-mute);
  margin-bottom:4px;letter-spacing:.04em}
.news b{display:block;font-size:14px;font-weight:600;line-height:1.35;color:var(--tx-dark);margin-bottom:3px}
.news span{display:block;font-size:12.5px;color:var(--tx-mute)}
.news a > *{grid-column:1}
.news time{grid-row:1}

/* ═══════════ YIELD ═══════════ */
.yield{
  background:
    radial-gradient(120% 90% at 50% 0%, var(--forest-2) 0%, var(--forest) 46%, var(--ink) 100%);
  padding:clamp(64px,8vw,110px) 0;position:relative;overflow:hidden;
}
.yield::before{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.35;
  background-image:linear-gradient(rgba(198,168,106,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(198,168,106,.05) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(70% 60% at 50% 40%,#000 0%,transparent 100%);
  -webkit-mask-image:radial-gradient(70% 60% at 50% 40%,#000 0%,transparent 100%);
}
.yield > .wrap{position:relative}
.yield__hd{max-width:720px;margin-bottom:clamp(42px,5vw,66px)}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.2vw,30px);
  margin-bottom:clamp(40px,5vw,64px)}
.step{
  border:1px solid rgba(198,168,106,.22);background:rgba(8,18,14,.4);
  padding:clamp(24px,2.6vw,36px);position:relative;
  transition:border-color .4s var(--ease),transform .4s var(--ease),background .4s var(--ease);
}
.step:hover{border-color:rgba(198,168,106,.5);transform:translateY(-4px);background:rgba(8,18,14,.62)}
.step__n{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.18em;
  color:var(--gold);display:block;margin-bottom:20px}
.step h3{font-family:var(--serif);font-size:clamp(21px,2vw,27px);font-weight:700;
  color:var(--tx-light);margin:0 0 11px;line-height:1.16}
.step p{font-size:14.5px;color:var(--tx-lmute);margin:0;line-height:1.6}

.dist{
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;
  border:1px solid rgba(198,168,106,.22);background:rgba(8,18,14,.5);
}
.dist__cell{padding:clamp(20px,2.4vw,30px);border-right:1px solid rgba(198,168,106,.16)}
.dist__cell:last-child{border-right:0}
.dist__lbl{font-size:9.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);margin:0 0 14px}
.dist__val{font-family:var(--mono);font-size:clamp(24px,2.6vw,33px);font-weight:500;
  color:var(--tx-light);margin:0;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.dist__val.up{color:var(--mint)}
.dist__clock{display:flex;gap:clamp(10px,1.4vw,18px);margin:0}
.dist__clock span{display:flex;flex-direction:column;gap:5px;position:relative}
.dist__clock span + span::before{
  content:':';position:absolute;left:calc(-1 * clamp(10px,1.4vw,18px) / 2);top:0;
  transform:translateX(-50%);font-family:var(--mono);
  font-size:clamp(20px,2.1vw,26px);color:rgba(198,168,106,.45);line-height:1.25;
}
.dist__clock b{font-family:var(--mono);font-size:clamp(24px,2.6vw,33px);font-weight:500;
  color:var(--tx-light);line-height:1;font-variant-numeric:tabular-nums}
.dist__clock i{font-style:normal;font-size:8.5px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(168,181,172,.6)}

/* ═══════════ 500 FINEST ═══════════ */
.finest{
  background:radial-gradient(90% 70% at 50% 0%,var(--forest) 0%,var(--ink) 72%);
  padding:clamp(56px,7vw,96px) 0;text-align:center;
  border-top:1px solid rgba(198,168,106,.14);
}
.finest__in{max-width:1180px;margin-inline:auto;padding-inline:var(--pad)}
.finest__plate{
  position:relative;margin:0 0 clamp(30px,3.6vw,46px);overflow:hidden;
  border:1px solid rgba(198,168,106,.34);
  box-shadow:0 34px 90px rgba(0,0,0,.6);
}
.finest__plate img{width:100%;display:block}
.finest__plate::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(85% 85% at 50% 45%,transparent 44%,rgba(6,14,11,.62) 100%);
}
.finest__foot{display:flex;flex-direction:column;align-items:center;gap:26px}
.finest__p{font-size:clamp(15px,1.3vw,17.5px);line-height:1.66;color:rgba(244,242,234,.78);
  margin:0;max-width:56ch}

/* ═══════════ FEATURES + CARDS ═══════════ */
.feat{background:var(--forest);padding:clamp(52px,6vw,80px) 0 0}
.feat__row{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(22px,3vw,44px);
  text-align:center;padding-bottom:clamp(52px,6vw,80px)}
.feat__row li{display:flex;flex-direction:column;align-items:center;gap:10px}
.feat__row .ico{width:38px;height:38px;margin-bottom:6px}
.feat__row h3{font-size:12.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--tx-light);margin:0}
.feat__row p{font-size:14px;color:var(--tx-lmute);margin:0;line-height:1.55;max-width:26ch}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(198,168,106,.18)}
.card{position:relative;background:var(--ink);overflow:hidden;isolation:isolate;
  min-height:clamp(400px,42vw,530px);display:flex;align-items:flex-end}
.card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  transition:transform 1.3s var(--ease)}
.card::after{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(6,16,12,.97) 12%,rgba(6,16,12,.72) 42%,rgba(6,16,12,.18) 72%,transparent 100%)}
.card:hover img{transform:scale(1.06)}
.card__body{padding:clamp(24px,2.6vw,36px);width:100%}
.card__kick{font-size:10px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--mint);margin:0 0 12px}
.card h3{font-family:var(--serif);font-size:clamp(24px,2.5vw,33px);font-weight:700;
  color:var(--tx-light);line-height:1.1;margin:0 0 12px;max-width:16ch}
.card__body p{font-size:14.5px;color:rgba(244,242,234,.76);margin:0 0 20px;max-width:34ch;line-height:1.55}

/* ═══════════ PROSPECTUS ═══════════ */
.facts{background:var(--cream);padding:clamp(56px,7vw,100px) 0}
.facts__grid{display:grid;grid-template-columns:.88fr 1.12fr;gap:clamp(32px,4.5vw,74px);align-items:start}

.facts__art{position:relative;background:var(--forest);overflow:hidden}
.facts__art img{width:100%;display:block}
.facts__art figcaption{
  display:flex;align-items:center;gap:14px;padding:20px 24px;
  background:var(--ink);border-top:1px solid rgba(198,168,106,.2);
}
.facts__art figcaption span:last-child{display:flex;flex-direction:column;gap:2px}
.facts__art b{font-size:13px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--tx-light)}
.facts__art i{font-style:normal;font-size:13px;color:var(--tx-lmute)}

.sheet{border-top:1px solid var(--tx-dark);margin-top:6px}
.sheet > div{display:grid;grid-template-columns:minmax(130px,.75fr) 1.25fr;gap:18px;
  padding:13px 0;border-bottom:1px solid var(--paper-line);align-items:center}
.sheet dt{font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--tx-mute)}
.sheet dd{margin:0;font-size:15px;font-weight:500;color:var(--tx-dark);display:flex;align-items:center;gap:10px}
.sheet dd.mono{font-family:var(--mono);font-size:14px}
.risk{display:inline-flex;gap:3px}
.risk i{width:16px;height:5px;background:var(--paper-line);border-radius:1px}
.risk i.on{background:var(--forest)}

/* ═══════════ BUY ═══════════ */
.buy{background:var(--ink);padding:clamp(56px,7vw,100px) 0;
  border-top:1px solid rgba(198,168,106,.14)}
.buy__hd{margin-bottom:clamp(34px,4vw,54px)}
.buy__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,4vw,64px);align-items:start}

.buy__steps{display:flex;flex-direction:column}
.buy__steps li{display:flex;gap:22px;padding:22px 0;border-bottom:1px solid rgba(244,242,234,.09)}
.buy__steps li:first-child{border-top:1px solid rgba(244,242,234,.09)}
.buy__steps b{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.16em;
  color:var(--gold);padding-top:4px;flex:none}
.buy__steps h3{font-family:var(--serif);font-size:21px;font-weight:700;color:var(--tx-light);margin:0 0 6px}
.buy__steps p{font-size:14.5px;color:var(--tx-lmute);margin:0;line-height:1.55}

.ca{border:1px solid rgba(198,168,106,.28);background:rgba(13,33,26,.6);padding:clamp(24px,2.8vw,34px)}
.ca__lbl{font-size:9.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);margin:0 0 14px}
.ca__box{display:flex;align-items:stretch;gap:10px;border:1px solid rgba(244,242,234,.16);
  background:rgba(6,14,11,.6);padding:5px 5px 5px 15px;margin-bottom:14px}
.ca__box code{flex:1;min-width:0;font-family:var(--mono);font-size:12.5px;color:var(--tx-light);
  display:flex;align-items:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:.02em}
.ca__btn{padding:11px 18px;background:var(--gold);color:var(--ink);flex:none;border-radius:2px;
  font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  transition:background .25s,opacity .25s}
.ca__btn:hover:not(:disabled){background:var(--gold-lt)}
.ca__btn:disabled{background:rgba(244,242,234,.13);color:rgba(244,242,234,.4);cursor:not-allowed}
.ca__btn.is-done{background:var(--mint)}
.ca__note{font-size:12.5px;color:var(--tx-lmute);margin:0 0 22px;line-height:1.55}
.ca__social{display:flex;gap:10px;flex-wrap:wrap}
.soc{display:inline-flex;align-items:center;gap:9px;padding:11px 16px;
  border:1px solid rgba(244,242,234,.16);color:rgba(244,242,234,.82);border-radius:2px;
  font-size:10px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  transition:border-color .25s,color .25s,background .25s}
.soc svg{width:15px;height:15px}
.soc:hover{border-color:rgba(198,168,106,.55);color:var(--gold-lt);background:rgba(198,168,106,.07)}

/* ═══════════ FAQ ═══════════ */
.faq{background:var(--cream-2);padding:clamp(56px,7vw,100px) 0}
.faq__grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(30px,4.5vw,74px);align-items:start}
.faq__hd{position:sticky;top:calc(var(--hdr-h) + 34px)}

.qa{border-bottom:1px solid var(--paper-line)}
.qa:first-child{border-top:1px solid var(--tx-dark)}
.qa summary{
  display:flex;justify-content:space-between;align-items:center;gap:22px;
  padding:21px 0;cursor:pointer;list-style:none;
  font-size:clamp(16px,1.45vw,19px);font-weight:600;color:var(--tx-dark);
  transition:color .25s;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--mint-dk)}
.qa summary i{position:relative;width:15px;height:15px;flex:none}
.qa summary i::before,.qa summary i::after{
  content:'';position:absolute;background:var(--tx-dark);transition:transform .35s var(--ease),background .25s;
}
.qa summary i::before{inset:7px 0 auto 0;height:1.5px}
.qa summary i::after{inset:0 7px auto 7px;width:1.5px;height:15px}
.qa[open] summary i::after{transform:scaleY(0)}
.qa[open] summary{color:var(--mint-dk)}
.qa[open] summary i::before,.qa[open] summary i::after{background:var(--mint-dk)}
.qa__a{overflow:hidden}
.qa__a p{font-size:15.5px;line-height:1.68;color:var(--tx-mute);margin:0;
  padding:0 60px 26px 0;max-width:66ch}
.qa[open] .qa__a{animation:unfold .42s var(--ease)}
@keyframes unfold{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}

/* ═══════════ CTA ═══════════ */
.cta{
  background:linear-gradient(160deg,var(--forest-2) 0%,var(--ink) 70%);
  padding:clamp(64px,8vw,116px) 0;text-align:center;position:relative;overflow:hidden;
}
.cta::before{
  content:'';position:absolute;inset:0;opacity:.4;
  background:radial-gradient(60% 70% at 50% 100%,rgba(94,224,132,.13),transparent 70%);
}
.cta__in{position:relative}
.cta__h{
  font-family:var(--serif);font-weight:700;color:var(--tx-light);
  font-size:clamp(38px,5.6vw,76px);line-height:1.02;letter-spacing:-.022em;margin:0 0 34px;
}
.cta__h em{font-style:italic;font-weight:500;color:var(--gold-lt)}
.cta__fine{font-size:11.5px;color:rgba(168,181,172,.62);margin:22px 0 0;letter-spacing:.04em}

/* ═══════════ FOOTER ═══════════ */
.ftr{background:var(--ink);color:var(--tx-lmute);
  padding:clamp(44px,5vw,64px) 0 34px;border-top:1px solid rgba(198,168,106,.18)}
.ftr__top{display:flex;justify-content:space-between;align-items:center;gap:26px;flex-wrap:wrap;
  padding-bottom:30px;border-bottom:1px solid rgba(244,242,234,.1)}
.brand--ftr .brand__shield{color:var(--gold);width:30px;height:33px}
.brand--ftr .brand__word{color:var(--tx-light);font-size:29px}
.ftr__nav{display:flex;gap:clamp(14px,2vw,28px);flex-wrap:wrap}
.ftr__nav a{font-size:10.5px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;
  color:var(--tx-lmute);transition:color .25s}
.ftr__nav a:hover{color:var(--gold-lt)}

.ftr__disc{padding:30px 0;border-bottom:1px solid rgba(244,242,234,.1);max-width:98ch}
.ftr__discHd{font-size:9.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);margin:0 0 14px}
.ftr__disc p + p{margin-top:12px}
.ftr__disc p{font-size:11.5px;line-height:1.72;color:rgba(168,181,172,.72);margin:0}

.ftr__base{display:flex;justify-content:space-between;align-items:center;gap:20px;
  flex-wrap:wrap;padding-top:24px}
.ftr__base p{font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(168,181,172,.6);margin:0}
.ftr__base i{font-style:normal;opacity:.4;margin:0 7px}
.ftr__tag{color:var(--gold) !important}

/* ═══════════ REVEAL ═══════════ */
.reveal{opacity:0;transform:translateY(22px);
  transition:opacity .85s var(--ease),transform .85s var(--ease)}
.reveal.is-in{opacity:1;transform:none}

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width:1180px){
  .edge__grid{grid-template-columns:1fr 1fr;row-gap:44px}
  .edge__lede{border-right:0;padding-right:0}
  .edge__list{padding-right:0}
  .hero__in{grid-template-columns:minmax(0,1fr) 300px}
}
@media (max-width:1024px){
  :root{--hdr-h:68px}
  .nav{
    position:fixed;inset:var(--hdr-h) 0 auto 0;background:var(--cream);
    flex-direction:column;gap:0;padding:10px var(--pad) 26px;
    border-bottom:1px solid var(--paper-line);box-shadow:0 20px 40px rgba(8,18,14,.12);
    transform:translateY(-130%);transition:transform .45s var(--ease);z-index:99;
  }
  .nav.is-open{transform:none}
  .nav a{padding:15px 0;font-size:13px;border-bottom:1px solid var(--paper-line)}
  .nav a::after{display:none}
  .burger{display:flex}
  .brand__rule,.brand__meta{display:none}
  .hdr__act{margin-left:auto}

  .hero__in{grid-template-columns:1fr;padding-top:clamp(48px,7vw,72px)}
  .perf{max-width:420px}
  .steps{grid-template-columns:1fr}
  .dist{grid-template-columns:1fr 1fr}
  .dist__cell:nth-child(2n){border-right:0}
  .dist__cell:nth-child(-n+2){border-bottom:1px solid rgba(198,168,106,.16)}
  .feat__row{grid-template-columns:1fr 1fr;gap:36px}
  .cards{grid-template-columns:1fr}
  .card{min-height:400px}
  .facts__grid,.buy__grid,.faq__grid{grid-template-columns:1fr}
  .faq__hd{position:static}
  .qa__a p{padding-right:0}
}
@media (max-width:720px){
  :root{--pad:20px;--band:clamp(236px,42vh,330px)}
  .edge__grid{grid-template-columns:1fr}

  /* Give the duck his own frame, then set type on solid ink below it. */
  .hero{background:var(--ink)}
  .hero__media{inset:0 0 auto 0;height:var(--band)}
  .hero__media img{object-position:46% 26%}
  .hero__scrim{
    inset:0 0 auto 0;height:var(--band);
    background:linear-gradient(to bottom,
      rgba(5,12,9,.3) 0%, rgba(5,12,9,0) 34%,
      rgba(8,18,14,.88) 84%, var(--ink) 100%);
  }
  .hero__in{min-height:0;padding-top:calc(var(--band) - 20px);padding-bottom:44px}
  .hero__h1{font-size:clamp(44px,13vw,68px);text-shadow:none}
  .hero__sub{text-shadow:none}
  .hero__trust{gap:18px}
  .hero__trust li{padding-left:12px}
  .hero__cta{flex-direction:column;align-items:stretch}
  .hero__cta .btn{justify-content:center}
  .perf{max-width:none}
  .feat__row{grid-template-columns:1fr;gap:32px}
  .dist{grid-template-columns:1fr}
  .dist__cell{border-right:0;border-bottom:1px solid rgba(198,168,106,.16)}
  .dist__cell:last-child{border-bottom:0}
  .sheet > div{grid-template-columns:1fr;gap:5px;padding:12px 0}
  .buy__steps li{gap:14px}
  .tape__tag{display:none}
  .ftr__base{flex-direction:column;align-items:flex-start;gap:10px}
  .announce__set b{font-size:9px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal{opacity:1;transform:none}
  #sparkLine{stroke-dashoffset:0}
  #sparkArea,#sparkDot{opacity:1}
}

@media print{
  .announce,.hdr,.tape,.cta{display:none}
  body{background:#fff;color:#000}
}
