/* ============================================================
   Yurofex — design system (evolved from the NONAME base)
   Dark editorial fintech. Ink canvas, ivory type, champagne signal.
   Type: Space Grotesk (display) · Hanken Grotesk (text) · IBM Plex Mono (data)
   ============================================================ */

:root{
  /* ink / surfaces */
  --ink:        #0A0D12;
  --ink-deep:   #070A0E;
  --surface:    #10141B;
  --surface-2:  #161B24;
  --surface-3:  #1C2230;
  --hair:       rgba(233,235,240,.10);
  --hair-soft:  rgba(233,235,240,.055);

  /* type */
  --ivory:      #ECEEF2;
  --ivory-dim:  #AEB4C0;
  --ivory-mute: #7C8494;   /* v7: lifted from #6C7484 to reach 4.5:1 on surfaces */

  /* signal — champagne */
  --gold:       #D8B884;
  --gold-bright:#EBD2A4;
  --gold-deep:  #B8965E;

  /* support */
  --pos:        #76C9A4;   /* affirmative */
  --neg:        #C97676;   /* caution     */

  --maxw: 1240px;
  --pad: clamp(20px, 5vw, 64px);

  --r-sm: 6px;
  --r:    10px;
  --r-lg: 16px;

  --ff-display: "Space Grotesk", system-ui, sans-serif;
  --ff-text: "Hanken Grotesk", system-ui, sans-serif;
  --ff-mono: "IBM Plex Mono", ui-monospace, monospace;

  --ease: cubic-bezier(.2,.7,.2,1);
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--ink);
  color:var(--ivory);
  font-family:var(--ff-text);
  font-size:17px;
  line-height:1.65;
  font-weight:380;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }

/* subtle page grain / vignette */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(216,184,132,.07), transparent 55%),
    radial-gradient(90% 60% at 90% 110%, rgba(48,70,110,.10), transparent 60%);
}

/* ---------- layout ---------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad); position:relative; z-index:1; }
.section{ padding-block:clamp(72px, 11vw, 150px); position:relative; z-index:1; }
.section.tight{ padding-block:clamp(54px, 8vw, 96px); }
.divider{ height:1px; background:var(--hair); border:0; margin:0; }

/* ---------- type ---------- */
h1,h2,h3,h4,h5{ font-family:var(--ff-display); font-weight:600; line-height:1.02; letter-spacing:-.02em; margin:0; color:var(--ivory); }
.display{
  font-size:clamp(2.7rem, 7vw, 5.4rem);
  font-weight:500;
  letter-spacing:-.035em;
  line-height:.98;
}
.display em{ font-style:normal; color:var(--gold); }
h2.head{ font-size:clamp(2rem, 4.4vw, 3.4rem); font-weight:500; letter-spacing:-.03em; }
.sub{ font-size:clamp(1.4rem,2.4vw,2rem); font-weight:500; letter-spacing:-.02em; }
p{ margin:0 0 1em; color:var(--ivory-dim); }
p:last-child{ margin-bottom:0; }
strong{ color:var(--ivory); font-weight:600; }
.lead{ font-size:clamp(1.05rem,1.6vw,1.3rem); color:var(--ivory-dim); line-height:1.6; max-width:60ch; }

/* eyebrow / mono label */
.eyebrow{
  font-family:var(--ff-mono); font-size:.72rem; font-weight:500;
  letter-spacing:.32em; text-transform:uppercase; color:var(--gold);
  display:inline-flex; align-items:center; gap:.8em;
}
.eyebrow::before{
  content:""; width:26px; height:1px; background:var(--gold); opacity:.7;
}
.eyebrow.no-rule::before{ display:none; }
.mono{ font-family:var(--ff-mono); }

.section-head{ max-width:64ch; }
.section-head .eyebrow{ margin-bottom:24px; }
.section-head p{ margin-top:18px; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.7em;
  font-family:var(--ff-mono); font-size:.82rem; font-weight:500;
  letter-spacing:.06em; text-transform:uppercase;
  padding:15px 26px; border-radius:var(--r-sm); cursor:pointer;
  border:1px solid transparent; transition:all .35s var(--ease);
  white-space:nowrap;
}
.btn svg{ width:15px; height:15px; transition:transform .35s var(--ease); }
.btn:hover svg{ transform:translate(3px,-3px); }
.btn-primary{ background:var(--ivory); color:var(--ink); }
.btn-primary:hover{ background:var(--gold-bright); }
.btn-gold{ background:var(--gold); color:#1A130A; }
.btn-gold:hover{ background:var(--gold-bright); }
.btn-ghost{ background:transparent; color:var(--ivory); border-color:var(--hair); }
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold-bright); }

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(10,13,18,.72);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid var(--hair-soft);
}
.nav-inner{ display:flex; align-items:center; gap:32px; height:74px; position:relative; }
.brand{ display:inline-flex; align-items:center; gap:11px; margin-right:8px; }
.brand .mark{ width:26px; height:26px; flex:0 0 auto; }
.brand .word{
  font-family:var(--ff-display); font-weight:600; font-size:1.18rem;
  letter-spacing:.18em; color:var(--ivory);
}
.nav-links{ display:flex; gap:6px; flex:1; justify-content:center; }
.nav-links > a{
  font-size:.94rem; color:var(--ivory-dim); padding:9px 14px; border-radius:var(--r-sm);
  transition:color .25s, background .25s;
}
.nav-links > a:hover{ color:var(--ivory); }
.nav-links > a.active{ color:var(--ivory); }
.nav-right{ margin-left:auto; display:flex; align-items:center; gap:18px; }
.nav-login{ font-family:var(--ff-mono); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ivory-dim); }
.nav-login:hover{ color:var(--gold); }
.lang{
  font-family:var(--ff-mono); font-size:.74rem; letter-spacing:.06em; color:var(--ivory-dim);
  background:transparent; border:1px solid var(--hair); border-radius:var(--r-sm);
  padding:8px 10px; cursor:pointer; text-transform:uppercase;
}
.lang:focus{ outline:1px solid var(--gold); }
.nav-toggle{ display:none; background:none; border:0; cursor:pointer; padding:8px; margin-left:auto; }
.nav-toggle span{ display:block; width:22px; height:2px; background:var(--ivory); margin:4px 0; transition:transform .3s var(--ease), opacity .2s var(--ease); transform-origin:center; }
.nav-toggle.is-open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
.mobile-menu{ display:none; }

/* ---------- hero ---------- */
.hero{ padding-top:clamp(48px,7vw,90px); padding-bottom:clamp(60px,9vw,120px); }
.hero-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(32px,5vw,72px); align-items:center; }
.hero h1{ margin-top:26px; }
.hero .lead{ margin-top:26px; }
.hero-cta{ margin-top:38px; display:flex; gap:14px; flex-wrap:wrap; }

/* ticker / market visual */
.viz{
  position:relative; aspect-ratio:5/6; min-height:380px;
}
.viz-grid{ position:absolute; inset:0;
  background-image:linear-gradient(var(--hair-soft) 1px, transparent 1px),
                   linear-gradient(90deg, var(--hair-soft) 1px, transparent 1px);
  background-size:38px 38px; opacity:.6;
  -webkit-mask-image:radial-gradient(120% 90% at 70% 30%, #000, transparent 78%);
          mask-image:radial-gradient(120% 90% at 70% 30%, #000, transparent 78%);
}
.viz-glow{ position:absolute; width:60%; height:60%; top:8%; right:-8%;
  background:radial-gradient(circle, rgba(216,184,132,.28), transparent 70%); filter:blur(20px); }
.viz-row{ position:absolute; left:0; right:0; display:flex; justify-content:space-between;
  padding:0 22px; font-family:var(--ff-mono); font-size:.74rem; color:var(--ivory-dim); }
.viz-row .up{ color:var(--pos); }
.viz-row .dn{ color:var(--neg); }
.viz-chart{ position:absolute; inset:auto 0 0 0; height:55%; }
.viz-tag{ position:absolute; bottom:20px; left:22px; font-family:var(--ff-mono);
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); }

/* ---------- stat band ---------- */
.statband{ border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); background:var(--ink-deep); }
.statband .wrap{ padding-block:clamp(40px,5vw,64px); }
.stat-head{ display:flex; align-items:baseline; gap:18px; margin-bottom:40px; flex-wrap:wrap; }
.stat-head h2{ font-size:clamp(1.5rem,2.6vw,2.1rem); font-weight:500; max-width:24ch; }
.stat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--hair); border:1px solid var(--hair); border-radius:var(--r); overflow:hidden; }
.stat{ background:var(--ink); padding:30px 28px; }
.stat .num{ font-family:var(--ff-display); font-size:clamp(2.1rem,3.6vw,3rem); font-weight:500; letter-spacing:-.03em; color:var(--ivory); line-height:1; }
.stat .num .u{ color:var(--gold); }
.stat .lbl{ margin-top:12px; font-size:.95rem; color:var(--ivory-dim); line-height:1.45; }

/* ---------- feature list ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,80px); align-items:center; }
.split.media-left{ direction:rtl; }
.split.media-left > *{ direction:ltr; }
.feature-list{ display:flex; flex-direction:column; }
.feature-row{ display:grid; grid-template-columns:auto 1fr; gap:18px; padding:20px 0; border-top:1px solid var(--hair); }
.feature-row:first-child{ border-top:0; }
.feature-row .ic{ width:34px; height:34px; border:1px solid var(--hair); border-radius:var(--r-sm); display:grid; place-items:center; color:var(--gold); flex:0 0 auto; }
.feature-row .ic svg{ width:17px; height:17px; }
.feature-row h4{ font-size:1.08rem; font-weight:500; letter-spacing:-.01em; margin-bottom:5px; }
.feature-row p{ font-size:.95rem; margin:0; color:var(--ivory-mute); }

/* simple checklist variant */
.checklist{ display:grid; gap:2px; }
.checklist .feature-row{ border-top:1px solid var(--hair-soft); padding:15px 0; align-items:center; }

/* media panel (abstract) */
.panel{
  position:relative; border:1px solid var(--hair); border-radius:var(--r-lg);
  background:linear-gradient(165deg, var(--surface-2), var(--ink-deep));
  overflow:hidden; min-height:420px;
}
.panel .viz-grid{ -webkit-mask-image:radial-gradient(100% 100% at 30% 20%, #000, transparent 80%); mask-image:radial-gradient(100% 100% at 30% 20%, #000, transparent 80%); }
.panel-label{ position:absolute; top:22px; left:24px; }
.panel-foot{ position:absolute; bottom:22px; left:24px; right:24px; display:flex; justify-content:space-between; align-items:end; font-family:var(--ff-mono); font-size:.74rem; color:var(--ivory-dim); }

/* ---------- comparison ---------- */
.compare{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.compare-col{ border:1px solid var(--hair); border-radius:var(--r-lg); padding:32px; background:var(--surface); }
.compare-col.us{ background:linear-gradient(165deg, rgba(216,184,132,.10), var(--surface)); border-color:rgba(216,184,132,.30); }
.compare-col h4{ display:flex; align-items:center; gap:12px; font-size:1.05rem; font-weight:500; margin-bottom:24px; }
.compare-col h4 .tag{ font-family:var(--ff-mono); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; padding:4px 9px; border-radius:100px; }
.compare-col.old .tag{ background:rgba(201,118,118,.14); color:var(--neg); }
.compare-col.us .tag{ background:rgba(118,201,164,.14); color:var(--pos); }
.compare-li{ display:grid; grid-template-columns:auto 1fr; gap:13px; padding:13px 0; border-top:1px solid var(--hair-soft); color:var(--ivory-dim); font-size:.97rem; }
.compare-li:first-of-type{ border-top:0; }
.compare-li .m{ color:var(--ivory-mute); margin-top:2px; }
.compare-col.us .compare-li .m{ color:var(--gold); }

/* ---------- asset class grid ---------- */
.assets{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--hair); border:1px solid var(--hair); border-radius:var(--r); overflow:hidden; }
.asset{ background:var(--ink); padding:30px 28px; transition:background .3s; }
.asset:hover{ background:var(--surface); }
.asset-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.asset-ic{ width:30px; height:30px; color:var(--gold); }
.asset-ic svg{ width:100%; height:100%; display:block; }
.asset .num{ font-family:var(--ff-mono); font-size:.74rem; color:var(--gold); letter-spacing:.1em; }
.asset h4{ font-size:1.2rem; font-weight:500; margin:14px 0 8px; }
.asset p{ font-size:.93rem; margin:0; color:var(--ivory-mute); }

/* ---------- FAQ ---------- */
.faq{ border-top:1px solid var(--hair); }
.faq-item{ border-bottom:1px solid var(--hair); padding:24px 0; display:grid; grid-template-columns:auto 1fr; gap:18px; }
.faq-item .q{ font-family:var(--ff-mono); color:var(--gold); font-size:.95rem; }
.faq-item h4{ font-size:1.12rem; font-weight:500; margin-bottom:8px; }
.faq-item p{ margin:0; font-size:.97rem; }

/* ---------- steps ---------- */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.step{ border:1px solid var(--hair); border-radius:var(--r-lg); padding:34px 30px; background:var(--surface); position:relative; }
.step .n{ font-family:var(--ff-mono); font-size:.8rem; color:var(--gold); letter-spacing:.2em; }
.step h4{ font-size:1.35rem; font-weight:500; margin:18px 0 12px; }
.step p{ font-size:.96rem; margin-bottom:24px; }
.step .btn{ width:100%; justify-content:space-between; }

/* ---------- testimonials ---------- */
.quotes{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.quote{ border:1px solid var(--hair); border-radius:var(--r-lg); padding:30px; background:var(--surface); display:flex; flex-direction:column; gap:24px; }
.quote .mk{ font-family:var(--ff-display); font-size:2.6rem; line-height:.5; color:var(--gold); height:.6em; }
.quote p{ font-size:1rem; color:var(--ivory-dim); margin:0; flex:1; }
.quote .who{ display:flex; align-items:center; gap:14px; padding-top:20px; border-top:1px solid var(--hair-soft); }
.quote .mono-avatar{ width:42px; height:42px; border-radius:50%; border:1px solid var(--hair); display:grid; place-items:center; font-family:var(--ff-mono); font-size:.85rem; color:var(--gold); flex:0 0 auto; }
.quote .who .nm{ font-size:.95rem; color:var(--ivory); font-weight:500; }
.quote .who .rl{ font-size:.84rem; color:var(--ivory-mute); }

/* ---------- CTA band ---------- */
.cta{ border:1px solid var(--hair); border-radius:var(--r-lg); overflow:hidden;
  background:linear-gradient(150deg, var(--surface-2), var(--ink-deep)); position:relative; }
.cta .viz-grid{ -webkit-mask-image:radial-gradient(120% 120% at 80% 0%, #000, transparent 70%); mask-image:radial-gradient(120% 120% at 80% 0%, #000, transparent 70%); }
.cta-inner{ position:relative; padding:clamp(40px,6vw,76px); display:grid; grid-template-columns:1.3fr .7fr; gap:40px; align-items:center; }
.cta-inner h2{ font-size:clamp(1.8rem,3.4vw,2.8rem); font-weight:500; }
.cta-inner p{ margin-top:16px; }
.cta-actions{ display:flex; flex-direction:column; gap:12px; align-items:stretch; }
.cta-actions .btn{ justify-content:space-between; }

/* ---------- plans ---------- */
.plan-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.plan{ border:1px solid var(--hair); border-radius:var(--r-lg); background:var(--surface); padding:32px; display:flex; flex-direction:column; transition:border-color .3s, transform .3s; }
.plan:hover{ border-color:rgba(216,184,132,.4); transform:translateY(-4px); }
.plan.featured{ border-color:rgba(216,184,132,.4); background:linear-gradient(170deg, rgba(216,184,132,.08), var(--surface)); }
.plan .tier-tag{ font-family:var(--ff-mono); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); }
.plan h3{ font-size:1.5rem; font-weight:500; margin:14px 0 8px; }
.plan .desc{ font-size:.92rem; color:var(--ivory-mute); min-height:42px; }
.plan .price{ font-family:var(--ff-display); font-size:2.3rem; font-weight:500; letter-spacing:-.03em; margin:22px 0 2px; }
.plan .price .cur{ color:var(--gold); }
.plan .price-sub{ font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ivory-mute); }
.plan .plan-feats{ margin:26px 0; display:grid; gap:1px; flex:1; }
.pf{ display:grid; grid-template-columns:auto 1fr; gap:12px; padding:9px 0; font-size:.9rem; color:var(--ivory-dim); align-items:start; border-top:1px solid var(--hair-soft); }
.pf:first-child{ border-top:0; }
.pf .pf-ic{ width:16px; height:16px; flex:0 0 auto; margin-top:3px; color:var(--gold); }
.pf.off{ color:var(--ivory-mute); opacity:.45; }
.pf.off .pf-ic{ color:var(--ivory-mute); }
.plan .btn{ width:100%; justify-content:space-between; margin-top:auto; }

.plan.vip{ grid-column:1/-1; flex-direction:row; gap:48px; align-items:stretch;
  background:linear-gradient(115deg, #15110A, #0B0D11 60%); border-color:rgba(216,184,132,.45); padding:44px; }
.vip-left{ flex:0 0 38%; display:flex; flex-direction:column; }
.vip-left .price{ font-size:3rem; }
.vip-feats{ flex:1; display:grid; grid-template-columns:1fr 1fr; gap:0 36px; align-content:start; }
.vip .pf{ border-color:rgba(216,184,132,.14); }

/* ---------- contact ---------- */
.contact-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(36px,5vw,72px); align-items:start; }
.form{ border:1px solid var(--hair); border-radius:var(--r-lg); background:var(--surface); padding:clamp(28px,3vw,40px); display:grid; gap:16px; }
.field{ display:grid; gap:7px; }
.field label{ font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ivory-mute); }
.field input, .field textarea{
  width:100%; background:var(--ink-deep); border:1px solid var(--hair); border-radius:var(--r-sm);
  color:var(--ivory); font-family:var(--ff-text); font-size:1rem; padding:13px 15px; transition:border-color .25s;
}
.field input::placeholder, .field textarea::placeholder{ color:var(--ivory-mute); }
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--gold); }
.field textarea{ resize:vertical; min-height:130px; }
.contact-points{ display:grid; gap:1px; margin-top:32px; border:1px solid var(--hair); border-radius:var(--r); overflow:hidden; }
.cp{ background:var(--surface); padding:22px 24px; display:flex; justify-content:space-between; gap:16px; align-items:center; }
.cp .k{ font-family:var(--ff-mono); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ivory-mute); }
.cp .v{ color:var(--ivory); }
.cp .v.gold{ color:var(--gold); }

/* ---------- footer ---------- */
.footer{ border-top:1px solid var(--hair); background:var(--ink-deep); padding-block:clamp(56px,7vw,88px); position:relative; z-index:1; }
.footer-top{ display:grid; grid-template-columns:1.4fr 1fr; gap:48px; padding-bottom:48px; border-bottom:1px solid var(--hair); }
.footer-brand .word{ font-family:var(--ff-display); font-weight:600; letter-spacing:.18em; font-size:1.4rem; }
.footer-brand p{ margin-top:18px; max-width:42ch; font-size:.95rem; }
.footer-links{ display:grid; grid-template-columns:1fr 1fr; gap:10px 30px; align-content:start; }
.footer-links .col-h{ font-family:var(--ff-mono); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ivory-mute); margin-bottom:6px; }
.footer-links a{ font-size:.92rem; color:var(--ivory-dim); padding:5px 0; transition:color .2s; }
.footer-links a:hover{ color:var(--gold); }
.legal{ padding-top:40px; display:grid; gap:26px; }
.legal h5{ font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); font-weight:500; margin-bottom:8px; }
.legal p{ font-size:.82rem; line-height:1.6; color:var(--ivory-mute); max-width:none; }
.legal-cols{ display:grid; grid-template-columns:repeat(2,1fr); gap:30px 48px; }
.footer-bottom{ margin-top:36px; padding-top:28px; border-top:1px solid var(--hair); display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; align-items:center; }
.footer-bottom .cr{ font-family:var(--ff-mono); font-size:.78rem; letter-spacing:.06em; color:var(--ivory-mute); }
.footer-social{ display:flex; gap:8px; }
.footer-social a{ width:38px; height:38px; border:1px solid var(--hair); border-radius:var(--r-sm); display:grid; place-items:center; color:var(--ivory-dim); transition:.25s; }
.footer-social a:hover{ color:var(--gold); border-color:var(--gold); }
.footer-social svg{ width:16px; height:16px; }

/* page hero (interior) */
.page-hero{ padding-top:clamp(48px,6vw,84px); }
.page-hero .display{ font-size:clamp(2.4rem,5.5vw,4.4rem); }

/* ===== reveal / motion ===== */
/* Base state is visible; only when JS adds .has-reveal do elements start hidden,
   so content is never stuck hidden if JS/observer is unavailable. */
.has-reveal .reveal:not(.stagger){ opacity:0; transform:translateY(26px); transition:opacity .75s var(--ease), transform .75s var(--ease); }
.has-reveal .reveal:not(.stagger).in{ opacity:1; transform:none; }
/* staggered children */
.has-reveal .stagger > *{ opacity:0; transform:translateY(20px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.has-reveal .stagger.in > *{ opacity:1; transform:none; }
.has-reveal .stagger.in > *:nth-child(1){ transition-delay:.04s; }
.has-reveal .stagger.in > *:nth-child(2){ transition-delay:.10s; }
.has-reveal .stagger.in > *:nth-child(3){ transition-delay:.16s; }
.has-reveal .stagger.in > *:nth-child(4){ transition-delay:.22s; }
.has-reveal .stagger.in > *:nth-child(5){ transition-delay:.28s; }
.has-reveal .stagger.in > *:nth-child(6){ transition-delay:.34s; }
.has-reveal .stagger.in > *:nth-child(7){ transition-delay:.40s; }
.has-reveal .stagger.in > *:nth-child(8){ transition-delay:.46s; }
@media (prefers-reduced-motion:reduce){
  .has-reveal .reveal, .has-reveal .reveal:not(.stagger), .has-reveal .stagger > *{ opacity:1!important; transform:none!important; transition:none!important; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:73.75em){
  .nav-links, .nav-login{ display:none; }
  /* CTA + login live only inside the drawer on mobile */
  .nav .nav-right > .btn{ display:none; }
  .nav-right{ gap:12px; margin-left:auto; }
  /* keep nav height stable so the drawer never overlaps content */
  .nav.scrolled .nav-inner{ height:74px; }

  /* clearly visible, high-contrast hamburger */
  .nav-toggle{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
    width:46px; height:46px; padding:0; border-radius:var(--r-sm);
    border:1px solid rgba(216,184,132,.45); background:rgba(216,184,132,.08); margin-left:0; }
  .nav-toggle:active{ background:rgba(216,184,132,.16); }
  .nav-toggle span{ width:22px; margin:0; background:var(--ivory); }
  .nav-toggle.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-toggle.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  .mobile-menu{ display:none; flex-direction:column; gap:4px; padding:18px var(--pad) 26px;
    border-bottom:1px solid var(--hair); background:rgba(10,13,18,.98);
    backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    position:sticky; top:74px; z-index:49; box-shadow:0 24px 40px -20px rgba(0,0,0,.8); }
  .mobile-menu.open{ display:flex; }
  .mobile-menu a:not(.btn){ padding:15px 4px; border-top:1px solid var(--hair-soft); color:var(--ivory); font-size:1.06rem; }
  .mobile-menu a:first-child{ border-top:0; }
  .mobile-menu .btn{ width:100%; justify-content:center; margin-top:16px; padding:16px 26px; }
}
@media (max-width:960px){
  .hero-grid{ grid-template-columns:1fr; gap:8px; }
  .viz{ aspect-ratio:4/5; min-height:0; height:auto; max-height:62vh; order:1; margin-inline:auto; width:100%; max-width:420px; }
  .split{ grid-template-columns:1fr; gap:36px; }
  .split.media-left{ direction:ltr; }
  .panel{ min-height:320px; }
  .stat-grid, .assets{ grid-template-columns:repeat(2,1fr); }
  .compare, .steps, .quotes, .plan-grid{ grid-template-columns:1fr; }
  .plan.vip{ flex-direction:column; gap:30px; }
  .vip-left{ flex:none; }
  .vip-feats{ grid-template-columns:1fr; }
  .cta-inner{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; }
  .footer-top{ grid-template-columns:1fr; gap:36px; }
  .legal-cols{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  body{ font-size:16px; }
  :root{ --pad:18px; }
  .section{ padding-block:clamp(48px,12vw,72px); }
  .section.tight{ padding-block:clamp(40px,10vw,60px); }
  h1,h2,h3,h4{ overflow-wrap:break-word; }
  .display{ font-size:clamp(2.3rem,11vw,3.2rem); }
  .hero{ padding-top:24px; padding-bottom:48px; }
  .hero .lead{ font-size:1.02rem; }
  .viz{ max-height:56vh; max-width:340px; }
  .stat-grid, .assets{ grid-template-columns:1fr; }
  .stat{ padding:24px 22px; }
  .asset{ padding:24px 22px; }
  .compare-col, .step, .quote, .plan{ padding:24px 22px; }
  .cta-inner{ padding:30px 22px; }
  .plan.vip{ padding:26px 22px; }
  .section-head .eyebrow{ margin-bottom:18px; }
  .footer-links{ grid-template-columns:1fr; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
  .btn{ width:100%; justify-content:center; }
  .hero-cta{ flex-direction:column; }
  .hero-cta .btn{ width:100%; }
  .nav-inner{ gap:14px; }
  .brand .word{ font-size:1.05rem; letter-spacing:.14em; }
}
@media (max-width:380px){
  .display{ font-size:clamp(2rem,10.5vw,2.6rem); }
  .viz{ max-width:290px; max-height:50vh; }
  .brand .word{ font-size:.98rem; }
}

/* ============================================================
   INTERACTION & AMBIENT MOTION
   ============================================================ */
/* nav condenses on scroll */
.nav{ transition:background .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease); }
.nav-inner{ transition:height .35s var(--ease); }
.nav.scrolled{ background:rgba(10,13,18,.9); box-shadow:0 14px 34px -16px rgba(0,0,0,.7); }
.nav.scrolled .nav-inner{ height:62px; }

/* animated underline on nav links */
.nav-links > a{ position:relative; }
.nav-links > a::after{ content:""; position:absolute; left:14px; right:14px; bottom:5px; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .32s var(--ease); }
.nav-links > a:hover::after, .nav-links > a.active::after{ transform:scaleX(1); }

/* buttons: gentle press + sheen already via color; add lift */
.btn{ transition:all .32s var(--ease), transform .15s var(--ease); }
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }

/* card hovers */
.quote, .step, .compare-col{ transition:border-color .35s var(--ease), transform .35s var(--ease), background .35s var(--ease); }
.quote:hover, .step:hover{ border-color:rgba(216,184,132,.32); transform:translateY(-5px); }
.compare-col:hover{ transform:translateY(-3px); }
.quote:hover .mono-avatar{ border-color:var(--gold); transition:border-color .35s var(--ease); }

/* asset cards */
.asset .asset-ic{ transition:transform .35s var(--ease); }
.asset:hover .asset-ic{ transform:translateY(-3px) scale(1.06); }
.asset h4{ transition:color .3s var(--ease); }
.asset:hover h4{ color:var(--gold-bright); }

/* feature rows */
.feature-row .ic{ transition:border-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease); }
.feature-row:hover .ic{ border-color:var(--gold); transform:translateY(-2px); }

/* faq rows */
.faq-item{ transition:padding-left .3s var(--ease); }
.faq-item:hover{ padding-left:8px; }
.faq-item h4{ transition:color .3s var(--ease); }
.faq-item:hover h4{ color:var(--gold-bright); }

/* footer links slide */
.footer-links a{ transition:color .25s var(--ease), padding-left .25s var(--ease); }
.footer-links a:hover{ padding-left:6px; }

/* brand mark spin-in on hover */
.brand .mark{ transition:transform .5s var(--ease); }
.brand:hover .mark{ transform:rotate(90deg); }

/* ambient: hero glow drift + live tag pulse */
@keyframes glowDrift{ 0%,100%{ transform:translate(0,0) scale(1); opacity:.85; } 50%{ transform:translate(-6%,4%) scale(1.08); opacity:1; } }
.viz-glow{ animation:glowDrift 9s ease-in-out infinite; }
@keyframes livePulse{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }
.viz-tag{ animation:livePulse 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion:reduce){
  .viz-glow, .viz-tag{ animation:none; }
  .btn:hover, .quote:hover, .step:hover, .compare-col:hover{ transform:none; }
}


/* ============================================================
   SITE EXTENSIONS — v3
   Navigation dropdowns, interior-page components, placeholders.
   Built only from the tokens above.
   ============================================================ */
a:not(.btn):not([class]):hover{ color:var(--gold-bright); }
p a:not(.btn), li a:not(.btn), td a:not(.btn), dd a:not(.btn), .ans a:not(.btn){ color:var(--gold); border-bottom:1px solid rgba(216,184,132,.35); transition:color .2s, border-color .2s; }
p a:not(.btn):hover, li a:not(.btn):hover, td a:not(.btn):hover, dd a:not(.btn):hover, .ans a:not(.btn):hover{ color:var(--gold-bright); border-color:var(--gold-bright); }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.btn:focus-visible{ outline-offset:4px; }
.sr{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link{ position:fixed; left:16px; top:-80px; z-index:200; background:var(--gold); color:#1A130A; font-family:var(--ff-mono); font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; padding:12px 18px; border-radius:var(--r-sm); transition:top .2s var(--ease); }
.skip-link:focus{ top:12px; }
[id]{ scroll-margin-top:96px; }
.btn-row{ display:flex; flex-wrap:wrap; gap:12px; }

/* ---------- nav: dropdowns ---------- */
.nav-inner{ gap:20px; }
.nav-links{ gap:2px; align-items:center; }
.nav-links > a{ font-size:.9rem; padding:9px 11px; }
.nav-links > a::after{ left:11px; right:11px; }
.nav-item{ position:relative; }
.nav-drop{ position:relative; display:inline-flex; align-items:center; gap:6px; background:none; border:0; color:var(--ivory-dim); font-family:var(--ff-text); font-size:.9rem; line-height:inherit; padding:9px 11px; border-radius:var(--r-sm); cursor:pointer; transition:color .25s; }
.nav-drop svg{ width:10px; height:10px; transition:transform .3s var(--ease); }
.nav-drop::after{ content:""; position:absolute; left:11px; right:27px; bottom:5px; height:1px; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .32s var(--ease); }
.nav-drop:hover, .nav-item.open .nav-drop, .nav-drop.active{ color:var(--ivory); }
.nav-drop.active::after{ transform:scaleX(1); }
.nav-item.open .nav-drop svg{ transform:rotate(180deg); }
.dropdown{ position:absolute; top:calc(100% + 14px); left:50%; min-width:330px; display:grid; gap:2px; padding:8px;
  background:rgba(16,20,27,.985); border:1px solid var(--hair); border-radius:var(--r-lg); box-shadow:0 30px 60px -22px rgba(0,0,0,.85);
  opacity:0; visibility:hidden; transform:translate(-50%,6px); transition:opacity .22s var(--ease), transform .22s var(--ease), visibility 0s .22s; }
.dropdown::before{ content:""; position:absolute; left:0; right:0; top:-16px; height:16px; }
.nav-item.open .dropdown{ opacity:1; visibility:visible; transform:translate(-50%,0); transition-delay:0s; }
.dropdown a{ display:grid; gap:2px; padding:12px 14px; border-radius:var(--r); transition:background .2s; }
.dropdown a:hover, .dropdown a:focus-visible{ background:var(--surface-2); }
.dropdown .dd-t{ font-size:.95rem; font-weight:500; color:var(--ivory); transition:color .2s; }
.dropdown .dd-d{ font-size:.82rem; line-height:1.4; color:var(--ivory-mute); }
.dropdown a:hover .dd-t, .dropdown a.active .dd-t{ color:var(--gold); }

/* ---------- mobile menu groups ---------- */
.mm-group{ border-top:1px solid var(--hair-soft); }
.mm-group summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; padding:15px 4px; color:var(--ivory); font-size:1.06rem; }
.mm-group summary::-webkit-details-marker{ display:none; }
.mm-group summary::after{ content:"+"; font-family:var(--ff-mono); color:var(--gold); font-size:1.1rem; transition:transform .25s var(--ease); }
.mm-group[open] summary::after{ transform:rotate(45deg); }
.mobile-menu .mm-sub{ display:grid; padding:0 0 8px; }
.mobile-menu .mm-sub a:not(.btn){ padding:12px 4px 12px 18px; font-size:.98rem; color:var(--ivory-dim); border-top:1px solid var(--hair-soft); }
.mobile-menu a.active, .mobile-menu .mm-sub a.active{ color:var(--gold)!important; }
.mm-actions{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px; }
.mobile-menu .mm-actions .btn{ margin-top:0; padding:15px 16px; }

/* ---------- placeholders & editorial notes ---------- */
.tbc{ font-family:var(--ff-mono); font-size:.78em; letter-spacing:.02em; line-height:1.5; color:var(--gold-bright); background:rgba(216,184,132,.07);
  border:1px dashed rgba(216,184,132,.5); border-radius:4px; padding:.12em .5em; -webkit-box-decoration-break:clone; box-decoration-break:clone; }
.ed-note{ display:flex; gap:14px; align-items:flex-start; border:1px dashed rgba(216,184,132,.4); border-radius:var(--r); padding:14px 18px; background:rgba(216,184,132,.035); font-size:.88rem; color:var(--ivory-dim); line-height:1.55; }
.ed-note b{ flex:0 0 auto; font-family:var(--ff-mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); font-weight:500; padding-top:3px; }

/* ---------- interior hero ---------- */
.center-head{ margin:0 auto; text-align:center; max-width:68ch; }
.center-head .eyebrow{ justify-content:center; }
.center-head .lead{ margin-left:auto; margin-right:auto; }
.center-head .hero-cta, .center-head .toc{ justify-content:center; }
.page-hero.center{ padding-bottom:clamp(40px,6vw,80px); }
.toc{ display:flex; flex-wrap:wrap; gap:8px; margin-top:34px; }
.toc a{ font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ivory-dim); border:1px solid var(--hair); border-radius:100px; padding:10px 16px; transition:border-color .25s, color .25s; }
.toc a:hover{ border-color:var(--gold); color:var(--gold-bright); }

/* ---------- editorial info rows ---------- */
.info-row{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(28px,5vw,80px); padding-block:clamp(44px,6vw,76px); border-top:1px solid var(--hair); }
.info-row:first-child{ border-top:0; }
.info-row h2{ font-size:clamp(1.6rem,3vw,2.35rem); font-weight:500; letter-spacing:-.025em; margin-top:20px; }
.info-row .aside-p{ margin-top:16px; font-size:.97rem; }
.info-body{ display:grid; gap:22px; align-content:start; }
.info-body > p{ margin:0; }
.info-body h3{ font-size:1.15rem; font-weight:500; letter-spacing:-.01em; }

.bullets{ list-style:none; padding:0; margin:0; display:grid; }
.bullets li{ position:relative; padding:12px 0 12px 26px; border-top:1px solid var(--hair-soft); color:var(--ivory-dim); font-size:.96rem; }
.bullets li:first-child{ border-top:0; }
.bullets li::before{ content:""; position:absolute; left:2px; top:24px; width:11px; height:1px; background:var(--gold); }

/* key/value list (extends .contact-points) */
.contact-points.flush{ margin-top:0; }
.cp .v{ text-align:right; }
.cp-head{ background:var(--ink-deep); padding:16px 24px; display:flex; justify-content:space-between; align-items:center; gap:12px; }

/* link cards (extends .asset) */
a.asset{ display:flex; flex-direction:column; }
.asset .more{ margin-top:auto; padding-top:24px; font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); display:inline-flex; align-items:center; gap:.6em; }
.asset .more svg{ width:13px; height:13px; transition:transform .3s var(--ease); }
a.asset:hover .more svg{ transform:translate(3px,-3px); }
.asset .cov{ margin-top:14px; font-family:var(--ff-mono); font-size:.76rem; letter-spacing:.04em; color:var(--gold); }
.assets.cols-2{ grid-template-columns:repeat(2,1fr); }
.assets.cols-4{ grid-template-columns:repeat(4,1fr); }

/* link rows (extends .feature-row) */
a.feature-row{ grid-template-columns:auto 1fr auto; align-items:center; }
a.feature-row .go{ width:15px; height:15px; color:var(--ivory-mute); transition:transform .3s var(--ease), color .3s; }
a.feature-row h4{ transition:color .3s var(--ease); }
a.feature-row:hover h4{ color:var(--gold-bright); }
a.feature-row:hover .go{ color:var(--gold); transform:translate(3px,-3px); }

.compare-col .tag.neutral{ background:rgba(216,184,132,.12); color:var(--gold); }
.compare-li a{ color:var(--gold); }

/* ---------- tables ---------- */
.table-wrap{ border:1px solid var(--hair); border-radius:var(--r); overflow-x:auto; background:var(--surface); -webkit-overflow-scrolling:touch; }
.data-table{ width:100%; border-collapse:collapse; font-size:.94rem; min-width:620px; }
.data-table.compact{ min-width:0; }
.data-table th, .data-table td{ padding:16px 20px; text-align:left; vertical-align:top; border-top:1px solid var(--hair-soft); }
.data-table thead th{ border-top:0; background:var(--ink-deep); font-family:var(--ff-mono); font-size:.68rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--ivory-mute); white-space:nowrap; }
.data-table tbody th{ font-family:var(--ff-display); font-weight:500; font-size:1rem; letter-spacing:-.01em; color:var(--ivory); }
.data-table td{ color:var(--ivory-dim); }
.data-table td.n{ font-family:var(--ff-mono); color:var(--ivory); white-space:nowrap; }
.table-note{ margin-top:14px; font-size:.86rem; color:var(--ivory-mute); }

/* plans comparison matrix */
.matrix{ min-width:940px; }
.matrix th, .matrix td{ text-align:center; padding:15px 12px; vertical-align:middle; }
.matrix thead th{ white-space:normal; }
.matrix thead th .tn{ display:block; margin-top:6px; font-family:var(--ff-display); font-size:1rem; letter-spacing:-.01em; text-transform:none; color:var(--ivory); font-weight:500; }
.matrix th[scope="row"], .matrix thead th:first-child{ position:sticky; left:0; z-index:1; text-align:left; min-width:220px; background:var(--surface); font-family:var(--ff-text); font-size:.94rem; font-weight:400; color:var(--ivory); }
.matrix thead th:first-child{ background:var(--ink-deep); font-family:var(--ff-mono); font-size:.68rem; color:var(--ivory-mute); }
.matrix .hl{ background:rgba(216,184,132,.05); }
.matrix thead th.hl{ background:rgba(216,184,132,.09); }
.matrix .yes{ display:inline-grid; place-items:center; color:var(--gold); }
.matrix .yes svg{ width:18px; height:18px; }
.matrix .no{ color:var(--ivory-mute); opacity:.55; font-family:var(--ff-mono); }
.matrix td.n{ font-size:.86rem; }
.compare-pick{ display:none; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:16px; }

/* ---------- accordion ---------- */
.acc{ border-top:1px solid var(--hair); }
.acc details{ border-bottom:1px solid var(--hair); }
.acc summary{ list-style:none; cursor:pointer; display:grid; grid-template-columns:auto 1fr auto; gap:18px; align-items:start; padding:22px 0; font-family:var(--ff-display); font-size:1.1rem; font-weight:500; line-height:1.35; letter-spacing:-.01em; color:var(--ivory); transition:color .25s; }
.acc summary::-webkit-details-marker{ display:none; }
.acc summary:hover{ color:var(--gold-bright); }
.acc summary .q{ font-family:var(--ff-mono); font-size:.95rem; color:var(--gold); }
.acc summary .pm{ position:relative; width:18px; height:18px; margin-top:3px; }
.acc summary .pm::before, .acc summary .pm::after{ content:""; position:absolute; left:2px; right:2px; top:50%; height:1.5px; margin-top:-.75px; background:var(--gold); transition:transform .3s var(--ease), opacity .3s; }
.acc summary .pm::after{ transform:rotate(90deg); }
.acc details[open] summary .pm::after{ transform:rotate(0); opacity:0; }
.acc .ans{ padding:0 40px 24px 36px; color:var(--ivory-dim); font-size:.97rem; }
.acc .ans p{ margin:0 0 .7em; }
.acc .ans p:last-child{ margin:0; }
.acc-more{ margin-top:26px; }

/* help center */
.search-box{ position:relative; max-width:620px; margin:36px auto 0; }
.search-box svg{ position:absolute; left:18px; top:50%; width:18px; height:18px; transform:translateY(-50%); color:var(--ivory-mute); pointer-events:none; }
.search-box input{ width:100%; background:var(--surface); border:1px solid var(--hair); border-radius:var(--r); color:var(--ivory); font-family:var(--ff-text); font-size:1.05rem; padding:17px 18px 17px 50px; transition:border-color .25s; }
.search-box input::placeholder{ color:var(--ivory-mute); }
.search-box input:focus{ outline:none; border-color:var(--gold); }
.chips{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:22px; }
.chip{ font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; background:transparent; color:var(--ivory-dim); border:1px solid var(--hair); border-radius:100px; padding:10px 16px; min-height:42px; cursor:pointer; transition:all .25s var(--ease); }
.chip:hover{ border-color:var(--gold); color:var(--gold-bright); }
.chip[aria-pressed="true"]{ background:var(--gold); border-color:var(--gold); color:#1A130A; }
.faq-body{ max-width:900px; margin:0 auto; }
.faq-group + .faq-group{ margin-top:clamp(44px,6vw,72px); }
.faq-group h2{ font-size:clamp(1.4rem,2.4vw,1.8rem); font-weight:500; letter-spacing:-.02em; margin:18px 0 14px; }
.faq-count{ font-family:var(--ff-mono); font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ivory-mute); text-align:center; margin-top:18px; }
.faq-empty{ text-align:center; padding:40px 0; color:var(--ivory-dim); }

/* ---------- notices ---------- */
.notice{ display:grid; grid-template-columns:auto 1fr; gap:22px; border:1px solid rgba(201,118,118,.28); border-radius:var(--r-lg); padding:clamp(26px,3vw,40px); background:linear-gradient(165deg, rgba(201,118,118,.06), var(--surface)); }
.notice .ic{ width:40px; height:40px; border:1px solid rgba(201,118,118,.4); border-radius:var(--r-sm); display:grid; place-items:center; color:var(--neg); }
.notice .ic svg{ width:19px; height:19px; }
.notice h2, .notice h3{ font-size:clamp(1.25rem,2vw,1.5rem); font-weight:500; margin-bottom:12px; }
.notice p{ font-size:.96rem; }
.notice.gold{ border-color:rgba(216,184,132,.3); background:linear-gradient(165deg, rgba(216,184,132,.07), var(--surface)); }
.notice.gold .ic{ border-color:rgba(216,184,132,.45); color:var(--gold); }

/* ---------- markets ---------- */
.mkt-list{ display:grid; gap:20px; }
.mkt{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,3.5vw,52px); border:1px solid var(--hair); border-radius:var(--r-lg); background:var(--surface); padding:clamp(26px,3vw,42px); transition:border-color .35s var(--ease); }
.mkt:hover{ border-color:rgba(216,184,132,.3); }
.mkt-top{ display:flex; align-items:center; justify-content:space-between; }
.mkt h2{ font-size:clamp(1.5rem,2.4vw,2rem); font-weight:500; letter-spacing:-.025em; margin:20px 0 12px; }
.mkt h3{ font-family:var(--ff-mono); font-size:.68rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--ivory-mute); margin-bottom:6px; }
.mkt p{ font-size:.96rem; }

.mkt-cov{ margin-top:16px; font-family:var(--ff-mono); font-size:.76rem; letter-spacing:.06em; color:var(--gold); }

/* ---------- glossary ---------- */
.gloss{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; margin:0; background:var(--hair); border:1px solid var(--hair); border-radius:var(--r); overflow:hidden; }
.gloss > div{ background:var(--ink); padding:24px 26px; }
.gloss dt{ font-family:var(--ff-display); font-size:1.1rem; font-weight:500; color:var(--ivory); margin-bottom:6px; }
.gloss dd{ margin:0; font-size:.94rem; color:var(--ivory-mute); }

/* ---------- expertise tier ladder ---------- */
.ladder{ border:1px solid var(--hair); border-radius:var(--r-lg); background:var(--surface); overflow:hidden; }
.ladder-row{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.5fr); gap:24px; align-items:center; padding:17px 26px; border-top:1px solid var(--hair-soft); }
.ladder-row:first-child{ border-top:0; background:var(--ink-deep); }
.ladder-row .lf{ color:var(--ivory); font-size:.97rem; }
.ladder-row .lf small{ display:block; font-family:var(--ff-mono); font-size:.7rem; letter-spacing:.08em; color:var(--gold); margin-top:2px; }
.ladder-bar{ display:grid; grid-template-columns:repeat(7,1fr); gap:5px; }
.ladder-bar span{ height:8px; border-radius:2px; background:var(--surface-3); }
.ladder-bar span.on{ background:linear-gradient(90deg, var(--gold-deep), var(--gold)); }
.ladder-bar.labels span{ height:auto; background:none; font-family:var(--ff-mono); font-size:.64rem; letter-spacing:.06em; color:var(--ivory-mute); text-align:center; text-transform:uppercase; }

/* ---------- conceptual workspace preview ---------- */
.concept{ position:relative; border:1px solid var(--hair); border-radius:var(--r-lg); background:linear-gradient(165deg, var(--surface-2), var(--ink-deep)); overflow:hidden; padding:clamp(12px,2vw,22px); box-shadow:0 40px 80px -40px rgba(0,0,0,.8); }
.concept-tag{ display:inline-flex; align-items:center; gap:8px; font-family:var(--ff-mono); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ivory-dim); border:1px dashed var(--hair); border-radius:100px; padding:6px 12px; }
.concept-cap{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; align-items:center; margin-top:14px; font-size:.84rem; color:var(--ivory-mute); }
.ws{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,2.4fr) minmax(0,.95fr); gap:10px; }
.ws-bar{ grid-column:1/-1; display:flex; align-items:center; gap:10px; padding:11px 14px; border:1px solid var(--hair-soft); border-radius:var(--r); background:rgba(7,10,14,.6); }
.ws-dot{ width:8px; height:8px; border-radius:50%; background:var(--surface-3); }
.ws-pill{ height:7px; width:56px; border-radius:4px; background:var(--surface-3); }
.ws-pill.on{ background:rgba(216,184,132,.55); }
.ws-sp{ flex:1; }
.ws-pane{ position:relative; overflow:hidden; display:flex; flex-direction:column; gap:8px; padding:14px; border:1px solid var(--hair-soft); border-radius:var(--r); background:rgba(7,10,14,.55); min-height:300px; }
.ws-lbl{ font-family:var(--ff-mono); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ivory-mute); }
.ws-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 0; border-top:1px solid var(--hair-soft); }
.ws-row i{ display:block; height:6px; border-radius:3px; background:var(--surface-3); }
.ws-row i.g{ background:rgba(118,201,164,.45); } .ws-row i.r{ background:rgba(201,118,118,.45); }
.ws-chart{ position:relative; flex:1; display:flex; align-items:flex-end; gap:4px; padding:16px 6px 6px; min-height:220px; }
.ws-chart .viz-grid{ -webkit-mask-image:none; mask-image:none; opacity:.5; background-size:30px 30px; }
.ws-chart b{ position:relative; flex:1; height:var(--h); min-height:8px; border-radius:2px; background:linear-gradient(var(--gold-bright), var(--gold-deep)); opacity:.9; }
.ws-chart b.d{ background:var(--surface-3); opacity:1; }
.ws-field{ height:30px; border-radius:var(--r-sm); border:1px solid var(--hair-soft); background:var(--ink); }
.ws-btns{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:auto; }
.ws-btn{ height:36px; border-radius:var(--r-sm); border:1px solid var(--hair); }
.ws-btn.buy{ background:rgba(118,201,164,.16); border-color:rgba(118,201,164,.35); }
.ws-btn.sell{ background:rgba(201,118,118,.14); border-color:rgba(201,118,118,.32); }
.ws-foot{ grid-column:1/-1; min-height:0; }

/* ---------- forms ---------- */
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field select{ width:100%; appearance:none; -webkit-appearance:none; background:var(--ink-deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%23D8B884' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center/12px;
  border:1px solid var(--hair); border-radius:var(--r-sm); color:var(--ivory); font-family:var(--ff-text); font-size:1rem; padding:13px 40px 13px 15px; transition:border-color .25s; }
.field select:focus{ outline:none; border-color:var(--gold); }
.field .err{ display:none; font-size:.84rem; color:var(--neg); }
.field.invalid input, .field.invalid textarea, .field.invalid select{ border-color:var(--neg); }
.field.invalid .err{ display:block; }
.form-hint{ font-size:.84rem; color:var(--ivory-mute); margin:0; }
.form-status{ display:none; font-size:.92rem; line-height:1.55; padding:14px 16px; border-radius:var(--r-sm); border:1px solid var(--hair); }
.form-status.show{ display:block; }
.form-status.ok{ border-color:rgba(118,201,164,.35); background:rgba(118,201,164,.07); color:var(--ivory); }
.form-status.bad{ border-color:rgba(201,118,118,.4); background:rgba(201,118,118,.07); color:var(--ivory); }
.form .btn{ justify-content:space-between; }

/* ---------- footer v3 ---------- */
.footer-top{ grid-template-columns:minmax(0,1fr) minmax(0,2.4fr); }
.footer-links.fl-4{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:30px 28px; }
.footer-links > div{ display:flex; flex-direction:column; align-items:flex-start; }
.footer-links .col-h{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.pending-tag{ font-size:.58rem; letter-spacing:.12em; color:var(--gold); border:1px dashed rgba(216,184,132,.45); border-radius:100px; padding:2px 7px; }
.footer-links a.pending, .legal a.pending{ color:var(--ivory-mute)!important; cursor:default; }
.footer-links a.pending:hover{ padding-left:0; }

.split > *, .hero-grid > *, .contact-grid > *{ min-width:0; }
.ws > *, .ws-pane, .ws-bar{ min-width:0; }
.ws-bar{ overflow:hidden; }
.ws-pill{ flex:0 1 auto; min-width:12px; }

/* ---------- single-level nav (v5) ---------- */
.nav-links > a{ white-space:nowrap; }
.footer-links.fl-3{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px 28px; }
.mm-actions{ grid-template-columns:1fr; }
.tz-now{ font-family:var(--ff-mono); color:var(--gold); }
@media (max-width:960px){ .footer-links.fl-3{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:380px){ .footer-links.fl-3{ grid-template-columns:1fr; } }

/* ---------- v6: conversion & content system ---------- */
[hidden]{ display:none!important; }
.nav-right{ gap:22px; }
.nav-login{ white-space:nowrap; }
.mm-actions{ grid-template-columns:1fr 1fr; }
.risk-line{ margin-top:18px; max-width:62ch; font-size:.84rem; line-height:1.55; color:var(--ivory-dim); }
.center-head .risk-line{ margin-left:auto; margin-right:auto; }
.cta-inner .risk-line{ margin-top:14px; }
.steps.cols-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.plan-grid.cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.band + .band{ margin-top:clamp(40px,5vw,60px); }
.band-head{ display:flex; flex-wrap:wrap; align-items:baseline; gap:10px 20px; margin-bottom:20px; padding-bottom:14px; border-bottom:1px solid var(--hair); }
.band-head h3{ font-size:1.35rem; font-weight:500; }
.band-head p{ margin:0; color:var(--ivory-dim); font-size:.96rem; }
.plan .desc{ margin:0; }
.data-table tr.band-row th{ background:var(--ink-deep); font-family:var(--ff-mono); font-size:.68rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); padding:12px 20px; }
.matrix thead th .bn{ display:block; font-size:.6rem; letter-spacing:.14em; color:var(--gold); margin-bottom:2px; }
[data-config].is-pending{ cursor:pointer; }
.toast{ position:fixed; left:50%; bottom:24px; z-index:300; max-width:min(520px,calc(100vw - 32px)); transform:translate(-50%,16px); opacity:0; pointer-events:none;
  background:var(--surface-2); border:1px solid rgba(216,184,132,.4); border-radius:var(--r); padding:14px 18px; color:var(--ivory); font-size:.92rem; line-height:1.5;
  box-shadow:0 24px 50px -20px rgba(0,0,0,.85); transition:opacity .25s var(--ease), transform .25s var(--ease); }
.toast.show{ opacity:1; transform:translate(-50%,0); }
.toast b{ display:block; font-family:var(--ff-mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); font-weight:500; margin-bottom:4px; }
@media (max-width:960px){
  .steps.cols-4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .plan-grid.cols-2{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .steps.cols-4{ grid-template-columns:1fr; }
  .nav-right{ gap:12px; }
}
@media (max-width:380px){ .mm-actions{ grid-template-columns:1fr; } }

/* ---------- Yurofex wordmark ---------- */
.brand .word{ text-transform:uppercase; font-size:1.1rem; letter-spacing:.17em; }
.footer-brand .word{ font-size:1.32rem; }
.brand:hover .mark{ transform:none; }
.brand .mark .mk-up{ transition:transform .45s var(--ease); }
.brand:hover .mark .mk-up{ transform:translate(1.2px,-1.2px); }

/* ---------- responsive ---------- */
@media (max-width:73.75em){
  .mobile-menu{ max-height:calc(100vh - 74px); max-height:calc(100dvh - 74px); overflow-y:auto; overscroll-behavior:contain; }
  .nav.scrolled .nav-inner{ height:74px; }
}
@media (max-width:960px){
  .assets.cols-4{ grid-template-columns:repeat(2,1fr); }
  .info-row{ grid-template-columns:1fr; gap:24px; }
  .mkt{ grid-template-columns:1fr; gap:22px; }
  .ladder-row{ grid-template-columns:1fr; gap:10px; }
  .ladder-row:first-child .lf{ display:none; }
  .footer-links.fl-4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ws{ grid-template-columns:minmax(0,1.8fr) minmax(0,1fr); }
  .ws-watch{ display:none; }
}
@media (max-width:760px){
  .compare-pick{ display:grid; }
  .matrix{ min-width:0; }
  .matrix [data-col]:not(.pick){ display:none; }
  .matrix th[scope="row"], .matrix thead th:first-child{ position:static; min-width:0; }
  .ws{ grid-template-columns:minmax(0,1fr); }
  .ws-ticket, .ws-foot{ display:none; }
  .ws-pane{ min-height:240px; }
}
@media (max-width:560px){
  .assets.cols-2, .assets.cols-4, .gloss{ grid-template-columns:1fr; }
  .form-row{ grid-template-columns:1fr; }
  .cp{ flex-direction:column; align-items:flex-start; gap:4px; }
  .cp .v{ text-align:left; }
  .notice{ grid-template-columns:1fr; gap:16px; }
  .acc .ans{ padding:0 0 22px 32px; }
  .acc summary{ font-size:1.02rem; gap:14px; }
  .footer-links.fl-4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .data-table th, .data-table td{ padding:14px 14px; }
  .mm-actions{ grid-template-columns:1fr; }
  .chip{ width:auto; }
  .toc a{ padding:9px 13px; }
  .ladder-row{ padding:16px 18px; }
}
@media (max-width:380px){
  .footer-links.fl-4{ grid-template-columns:1fr; }
}


/* ============================================================
   v7 — PHASE 3 UX/UI
   Same tokens and type; new layout primitives only where a
   composition problem needed one.
   ============================================================ */
:root{ --nav-h:62px; --subnav-h:0px; }
@media (max-width:73.75em){ :root{ --nav-h:74px; } }
[id]{ scroll-margin-top:calc(var(--nav-h) + var(--subnav-h) + 20px); }

/* honest affordances: only interactive things react to hover */
.step:hover, .compare-col:hover{ transform:none; border-color:var(--hair); }
div.asset:hover{ background:var(--ink); }
div.asset:hover h4{ color:var(--ivory); }
div.asset:hover .asset-ic{ transform:none; }
.feature-row:not(a):hover .ic{ transform:none; border-color:var(--hair); }

/* small button */
.btn-sm{ padding:11px 16px; font-size:.72rem; gap:.6em; }
.btn-sm svg{ width:13px; height:13px; }

/* alternate section ground — breaks long runs of identical sections */
.section.alt{ background:var(--ink-deep); border-top:1px solid var(--hair-soft); border-bottom:1px solid var(--hair-soft); }
.section.alt .asset, .section.alt .gloss > div{ background:var(--ink-deep); }
.section.alt a.asset:hover{ background:var(--surface); }

/* interior hero: tighter stack, one clear sub-line */
.page-hero.center{ padding-bottom:clamp(36px,5vw,64px); }
.hero-sub{ font-family:var(--ff-display); font-size:clamp(1.15rem,1.9vw,1.5rem); font-weight:400; letter-spacing:-.01em; line-height:1.45; color:var(--ivory-dim); margin:22px auto 0; max-width:44ch; }
.center-head .hero-cta{ margin-top:30px; }

/* ---------- home: key facts inline ---------- */
.facts{ display:grid; grid-template-columns:minmax(0,.7fr) minmax(0,2fr); gap:clamp(28px,4vw,56px); align-items:center; }
.facts .stat-head{ margin:0; flex-direction:column; align-items:flex-start; gap:14px; }
.facts .stat-head h2{ font-size:clamp(1.3rem,2vw,1.6rem); max-width:16ch; }
.facts .stat{ padding:26px 26px; }

/* ---------- home: account bands preview ---------- */
.bands3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; align-items:stretch; }
.bc{ border:1px solid var(--hair); border-radius:var(--r-lg); background:var(--surface); padding:clamp(24px,2.4vw,32px); display:flex; flex-direction:column; }
.bc-head{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.bc-head h3{ font-size:1.55rem; font-weight:500; letter-spacing:-.02em; }
.bc-range{ font-family:var(--ff-mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); white-space:nowrap; }
.bc-desc{ margin:10px 0 20px; font-size:.94rem; }
.bc-tiers{ list-style:none; margin:0; padding:0; display:grid; border-top:1px solid var(--hair); }
.bc-tiers li{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 16px; padding:15px 0; border-bottom:1px solid var(--hair-soft); }
.bc-tiers li:last-child{ border-bottom:0; padding-bottom:0; }
.bc-n{ font-family:var(--ff-display); font-weight:500; color:var(--ivory); font-size:1.02rem; }
.bc-p{ font-family:var(--ff-mono); color:var(--ivory); font-size:.9rem; }
.bc-a{ grid-column:1/-1; font-size:.86rem; color:var(--ivory-mute); line-height:1.45; }

/* ---------- home: opening steps as a timeline ---------- */
.timeline{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(20px,3vw,40px); position:relative; }
.timeline::before{ content:""; position:absolute; left:22px; right:12%; top:22px; height:1px; background:linear-gradient(90deg, var(--gold-deep), var(--hair) 90%); }
.tl-step{ position:relative; padding-top:68px; }
.tl-node{ position:absolute; top:0; left:0; width:45px; height:45px; border-radius:50%; border:1px solid rgba(216,184,132,.55); background:var(--ink-deep); display:grid; place-items:center; font-family:var(--ff-mono); font-size:.78rem; color:var(--gold); }
.tl-step h3{ font-size:1.25rem; font-weight:500; letter-spacing:-.01em; margin-bottom:10px; }
.tl-step p{ font-size:.95rem; margin:0; max-width:30ch; }
.open-cta{ margin-top:clamp(36px,4vw,52px); padding-top:28px; border-top:1px solid var(--hair-soft); display:flex; align-items:center; gap:28px; flex-wrap:wrap; }
.open-cta .risk-line{ margin:0; flex:1; min-width:260px; }

/* ---------- accounts: shared baseline ---------- */
.baseline{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:20px 36px; align-items:center; padding:22px clamp(20px,2.5vw,32px); border:1px solid rgba(216,184,132,.28); border-radius:var(--r-lg); background:linear-gradient(165deg, rgba(216,184,132,.06), var(--surface)); margin-bottom:28px; }
.baseline ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px 32px; }
.baseline li{ display:inline-flex; align-items:center; gap:10px; color:var(--ivory); font-size:.97rem; }
.baseline .pf-ic{ width:16px; height:16px; color:var(--gold); }

/* ---------- accounts: tier list ---------- */
.tiers{ --tcols:minmax(150px,.9fr) minmax(140px,.8fr) minmax(0,1.9fr) 262px; border:1px solid var(--hair); border-radius:var(--r-lg); background:var(--surface); overflow:hidden; }
.tiers-hd, .tier{ display:grid; grid-template-columns:var(--tcols); column-gap:clamp(18px,2.4vw,36px); align-items:center; padding:0 clamp(20px,2.5vw,32px); }
.tiers-hd{ background:var(--ink-deep); padding-block:14px; font-family:var(--ff-mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ivory-mute); border-bottom:1px solid var(--hair); }
.tiers-band{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 18px; padding:26px clamp(20px,2.5vw,32px) 14px; border-top:1px solid var(--hair); }
.tiers-hd + .tiers-band{ border-top:0; }
.tiers-band h3{ font-size:1.3rem; font-weight:500; letter-spacing:-.015em; }
.tiers-band p{ margin:0; font-size:.94rem; color:var(--ivory-dim); }
.tiers-band .tb-range{ margin-left:auto; font-family:var(--ff-mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); }
.tier{ padding-block:22px; border-top:1px solid var(--hair-soft); transition:background .25s var(--ease); }
.tiers-band + .tier{ border-top-color:transparent; }
.tier:hover{ background:rgba(236,238,242,.022); }
.t-badge{ display:inline-block; margin-top:8px; font-family:var(--ff-mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ivory-dim); border:1px solid var(--hair); border-radius:100px; padding:3px 9px; }
.tier .tier-tag{ font-family:var(--ff-mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); }
.tier h3{ font-size:1.35rem; font-weight:500; letter-spacing:-.015em; margin-top:6px; }
.t-price .price{ font-family:var(--ff-display); font-size:clamp(1.55rem,2.2vw,1.95rem); font-weight:500; letter-spacing:-.03em; line-height:1; color:var(--ivory); }
.t-price .price .cur{ color:var(--gold); }
.t-price .price-sub{ margin-top:7px; font-family:var(--ff-mono); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ivory-mute); }
.t-adds p{ margin:0; font-size:.96rem; color:var(--ivory-dim); line-height:1.5; }
.t-foot{ display:flex; align-items:center; gap:16px; margin-top:12px; flex-wrap:wrap; }
.t-cmp{ font-family:var(--ff-mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ivory-dim); border-bottom:1px solid var(--hair); padding:4px 0; transition:color .2s, border-color .2s; }
.t-cmp:hover{ color:var(--gold-bright); border-color:var(--gold); }
.t-cta .btn{ width:100%; justify-content:space-between; }
.tiers-note{ display:flex; justify-content:space-between; gap:12px 24px; flex-wrap:wrap; margin-top:16px; }
.tiers-note .table-note{ margin:0; }

/* ---------- accounts: comparison matrix ---------- */
.table-wrap{ overflow-y:hidden; position:relative; } /* contains .sr labels so they cannot widen the page */
.cmp-tools{ display:flex; justify-content:space-between; align-items:center; gap:14px 24px; flex-wrap:wrap; margin-bottom:16px; }
.cmp-tools .table-note{ margin:0; }
.switch{ display:inline-flex; align-items:center; gap:12px; cursor:pointer; font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ivory-dim); min-height:44px; user-select:none; }
.switch input{ position:absolute; opacity:0; width:1px; height:1px; }
.switch .sw{ position:relative; width:38px; height:22px; border-radius:20px; border:1px solid var(--hair); background:var(--ink-deep); transition:background .25s, border-color .25s; flex:0 0 auto; }
.switch .sw::after{ content:""; position:absolute; top:3px; left:3px; width:14px; height:14px; border-radius:50%; background:var(--ivory-mute); transition:transform .25s var(--ease), background .25s; }
.switch input:checked + .sw{ background:rgba(216,184,132,.18); border-color:var(--gold); }
.switch input:checked + .sw::after{ transform:translateX(16px); background:var(--gold); }
.switch input:focus-visible + .sw{ outline:2px solid var(--gold); outline-offset:3px; }
.switch:hover{ color:var(--ivory); }
.matrix [data-col="3"], .matrix [data-col="6"]{ border-left:1px solid var(--hair); }
.matrix th, .matrix td{ transition:background .15s; }
.matrix .colhov{ background:rgba(236,238,242,.03); }
.matrix thead th.colhov{ background:rgba(236,238,242,.05); }
.matrix .sel, .matrix thead th.sel{ background:rgba(216,184,132,.08); }
.matrix thead th.sel .tn{ color:var(--gold-bright); }
.matrix tfoot td, .matrix tfoot th{ border-top:1px solid var(--hair); padding:16px 8px; background:var(--ink-deep); }
.matrix tfoot th, .matrix tfoot th[scope="row"]{ background:var(--ink-deep); }
.mx-cta{ display:inline-flex; align-items:center; gap:6px; min-height:40px; padding:9px 12px; border:1px solid var(--hair); border-radius:var(--r-sm); font-family:var(--ff-mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ivory); white-space:nowrap; transition:border-color .2s, color .2s; }
.mx-cta svg{ width:12px; height:12px; }
.mx-cta:hover{ border-color:var(--gold); color:var(--gold-bright); }
.matrix tr.is-same th, .matrix tr.is-same td{ color:var(--ivory-mute); }

/* ---------- markets ---------- */
.mkt{ grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); }
.mkt-id .asset-ic{ width:46px; height:46px; padding:11px; border:1px solid rgba(216,184,132,.35); border-radius:var(--r); background:rgba(216,184,132,.05); }
.mkt-id h2{ margin:18px 0 10px; }
.mkt-meta{ margin:22px 0 0; display:grid; gap:0; border-top:1px solid var(--hair-soft); }
.mkt-meta > div{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:12px; padding:11px 0; border-bottom:1px solid var(--hair-soft); }
.mkt-meta dt{ font-family:var(--ff-mono); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ivory-mute); padding-top:3px; }
.mkt-meta dd{ margin:0; font-size:.9rem; color:var(--ivory); line-height:1.45; }
.mkt-col{ border-left:1px solid var(--hair-soft); padding-left:clamp(20px,2.6vw,40px); }
.mkt h3{ color:var(--gold); }

/* ---------- platforms ---------- */
.ws-pane{ transition:border-color .3s var(--ease), box-shadow .3s var(--ease); }
.ws-pane.hl{ border-color:rgba(216,184,132,.6); box-shadow:inset 0 0 0 1px rgba(216,184,132,.22), 0 0 24px -8px rgba(216,184,132,.35); }
.ws-lbl{ display:flex; align-items:center; gap:8px; }
.ws-step{ display:inline-grid; place-items:center; min-width:22px; height:18px; padding:0 5px; border-radius:9px; border:1px solid rgba(216,184,132,.45); color:var(--gold); font-size:.56rem; letter-spacing:.06em; }
.wf-head{ display:flex; align-items:baseline; justify-content:space-between; gap:14px 28px; flex-wrap:wrap; margin-bottom:28px; }
.wf-head .sub{ margin-top:14px; }
.wf{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--hair); border:1px solid var(--hair); border-radius:var(--r); overflow:hidden; }
.wf-step{ background:var(--ink); padding:26px 24px; transition:background .25s var(--ease); }
.wf-step:hover{ background:var(--surface); }
.wf-n{ display:inline-grid; place-items:center; min-width:30px; height:24px; padding:0 8px; border-radius:12px; border:1px solid rgba(216,184,132,.45); font-family:var(--ff-mono); font-size:.68rem; color:var(--gold); }
.wf-step h3{ font-size:1.12rem; font-weight:500; letter-spacing:-.01em; margin:16px 0 8px; }
.wf-step p{ font-size:.93rem; margin:0; color:var(--ivory-dim); }
.cap-grid{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(32px,5vw,72px); align-items:start; }
.cap-grid h3.cap-h{ font-family:var(--ff-mono); font-size:.7rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--ivory-mute); margin-bottom:12px; }
.cap-t{ font-size:1.3rem; font-weight:500; letter-spacing:-.015em; margin:0 0 10px; }
.ladder-row .lf small{ font-size:.66rem; }
.ladder-bar.labels span{ font-size:.6rem; }

/* ---------- trading hours ---------- */
.dst{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--hair); border:1px solid var(--hair); border-radius:var(--r); overflow:hidden; }
.dst-card{ background:var(--surface); padding:22px 24px; }
.dst-card h3{ font-size:1.05rem; font-weight:500; margin-bottom:14px; line-height:1.25; min-height:2.5em; }
.dst-card dl{ margin:0; display:grid; }
.dst-card dl > div{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px; align-items:baseline; padding:10px 0; border-top:1px solid var(--hair-soft); }
.dst-card dt{ font-family:var(--ff-mono); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); min-width:9ch; }
.dst-card dd{ margin:0; color:var(--ivory); font-size:.95rem; }

/* ---------- tables that become cards on small screens ---------- */
@media (max-width:760px){
  .stack-table{ min-width:0; }
  .stack-table thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .stack-table, .stack-table tbody{ display:block; }
  .stack-table tbody tr{ display:block; padding:18px 18px 14px; border-top:1px solid var(--hair-soft); }
  .stack-table tbody tr:first-child{ border-top:0; }
  .stack-table tbody th, .stack-table tbody td{ display:block; padding:0; border:0; }
  .stack-table tbody th{ font-size:1.08rem; margin-bottom:8px; }
  .stack-table tbody td{ display:grid; grid-template-columns:minmax(92px,.42fr) minmax(0,1fr); gap:12px; padding:7px 0; font-size:.93rem; border-top:1px solid var(--hair-soft); }
  .stack-table tbody td::before{ content:attr(data-label); font-family:var(--ff-mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ivory-mute); padding-top:4px; }
  .table-wrap:has(.stack-table){ overflow:visible; }
}

/* ---------- responsive (v7) ---------- */
@media (max-width:1100px){
  .tiers{ --tcols:minmax(130px,.9fr) minmax(120px,.8fr) minmax(0,1.6fr) 232px; }
  .t-cta .btn{ font-size:.66rem; padding-inline:13px; }
}
@media (max-width:960px){
  .facts{ grid-template-columns:1fr; gap:24px; }
  .bands3{ grid-template-columns:1fr; }
  .bc-tiers{ grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); column-gap:24px; }
  .bc-tiers li:last-child{ padding-bottom:15px; }
  .timeline{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:36px; }
  .timeline::before{ display:none; }
  .mkt{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .mkt-id{ grid-column:1/-1; }
  .mkt-col:nth-child(2){ border-left:0; padding-left:0; }
  .wf{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cap-grid{ grid-template-columns:1fr; }
}
@media (max-width:900px){
  .tiers{ border:0; background:none; overflow:visible; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
  .tiers-hd{ display:none; }
  .tiers-band{ grid-column:1/-1; padding:22px 0 0; border-top:0; }
  .tiers-band.first{ padding-top:0; }
  .tiers-band .tb-range{ order:-1; width:100%; margin:0 0 2px; }
  .tier, .tiers-band + .tier{ border:1px solid var(--hair); border-radius:var(--r-lg); background:var(--surface); padding:22px; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"id price" "adds adds" "cta cta"; row-gap:16px; align-items:start; }
  .t-id{ grid-area:id; } .t-price{ grid-area:price; text-align:right; } .t-adds{ grid-area:adds; } .t-cta{ grid-area:cta; align-self:end; }
  .tier{ align-content:start; }
  .t-cta .btn{ font-size:.72rem; }
}
@media (max-width:760px){
  .ws{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .ws > .ws-pane:not(.ws-watch):not(.ws-ticket):not(.ws-foot){ grid-column:1/-1; }
  .ws-ticket, .ws-foot{ display:flex; grid-column:auto; min-height:0; }
  .ws-ticket .ws-field:nth-of-type(3){ display:none; }
  .baseline{ grid-template-columns:1fr; gap:12px; }
  .baseline ul{ display:grid; gap:10px; }
  .dst{ grid-template-columns:1fr; }
  .dst-card h3{ min-height:0; }
}
@media (max-width:560px){
  .tiers{ grid-template-columns:1fr; }
  .tier{ padding:20px; }
  .tier h3{ font-size:1.25rem; }
  .bc-tiers{ grid-template-columns:1fr; }
  .bc-tiers li:last-child{ padding-bottom:0; }
  .timeline{ grid-template-columns:1fr; row-gap:0; }
  .timeline::before{ display:block; left:22px; right:auto; top:22px; bottom:22px; width:1px; height:auto; background:linear-gradient(180deg, var(--gold-deep), var(--hair)); }
  .tl-step{ padding:0 0 30px 68px; min-height:45px; }
  .tl-step:last-child{ padding-bottom:0; }
  .tl-step h3{ padding-top:9px; }
  .open-cta{ flex-direction:column; align-items:stretch; gap:16px; }
  .mkt{ grid-template-columns:1fr; gap:22px; }
  .mkt-col{ border-left:0; padding-left:0; }
  .wf{ grid-template-columns:1fr; }
  .wf-step{ display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:16px; padding:20px; }
  .wf-step .wf-n{ grid-row:span 2; margin-top:2px; }
  .wf-step h3{ margin:0 0 6px; }
  .toc a{ min-height:44px; display:inline-flex; align-items:center; }
  .footer-links a{ padding:9px 0; }
  .switch{ width:100%; justify-content:space-between; flex-direction:row-reverse; }
  .cmp-tools{ gap:6px; }
  .help-actions .btn{ width:100%; }
  .mx-cta{ padding:9px 10px; }
}

/* ============================================================
   v8 — PHASE 4 refinements
   ============================================================ */
/* home hero: static abstract composition (no product imagery, no motion) */
.hero-art{ position:relative; aspect-ratio:1/1; width:100%; max-width:560px; justify-self:end; }
.hero-art .viz-grid{ -webkit-mask-image:radial-gradient(60% 60% at 55% 45%, #000, transparent 75%); mask-image:radial-gradient(60% 60% at 55% 45%, #000, transparent 75%); opacity:.5; }
.hero-art svg{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.panel-art{ position:absolute; inset:56px 0 48px; width:100%; height:calc(100% - 104px); }
@media (max-width:960px){
  .hero-art{ order:1; justify-self:center; max-width:380px; margin-top:12px; }
}
@media (max-width:560px){
  .hero-art{ max-width:260px; margin-top:16px; }
}

/* trading hours: compact, retrieval-first */
.hours-head{ position:relative; z-index:1; padding-top:clamp(36px,4.5vw,64px); padding-bottom:clamp(24px,3vw,36px); border-bottom:1px solid var(--hair-soft); }
.hours-head-grid{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:clamp(24px,4vw,64px); align-items:end; }
.hours-head h1{ font-size:clamp(2rem,3.6vw,2.9rem); font-weight:500; letter-spacing:-.03em; margin-top:18px; }
.hours-head p{ margin:14px 0 0; max-width:56ch; font-size:1.02rem; color:var(--ivory-dim); }
.hours-meta{ border:1px solid var(--hair); border-radius:var(--r); background:var(--surface); padding:6px 20px 14px; }
.hm-row{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:11px 0; border-bottom:1px solid var(--hair-soft); }
.hm-k{ font-family:var(--ff-mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ivory-mute); }
.hm-v{ font-family:var(--ff-mono); font-size:.9rem; color:var(--gold); text-align:right; }
.hm-note{ margin:10px 0 0!important; font-size:.8rem!important; color:var(--ivory-mute)!important; }
.hours-scope{ display:flex; align-items:center; gap:10px 16px; flex-wrap:wrap; margin-bottom:20px; }
.hours-scope p{ margin:0; font-size:.92rem; color:var(--ivory-dim); }
.hs-tag{ font-family:var(--ff-mono); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); border:1px solid rgba(216,184,132,.4); border-radius:100px; padding:5px 11px; white-space:nowrap; }
.hgrid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--hair); border:1px solid var(--hair); border-radius:var(--r-lg); overflow:hidden; }
.hcard{ background:var(--surface); padding:24px 24px 20px; display:flex; flex-direction:column; }
.hcard-top{ display:flex; align-items:center; gap:12px; }
.hcard-top .asset-ic{ width:22px; height:22px; color:var(--gold); }
.hcard-top h3{ font-size:1.18rem; font-weight:500; letter-spacing:-.01em; }
.hcard-dl{ margin:16px 0 0; display:grid; }
.hcard-dl > div{ display:grid; grid-template-columns:minmax(96px,.42fr) minmax(0,1fr); gap:12px; padding:9px 0; border-top:1px solid var(--hair-soft); }
.hcard-dl dt{ font-family:var(--ff-mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ivory-mute); padding-top:3px; }
.hcard-dl dd{ margin:0; font-size:.93rem; color:var(--ivory); line-height:1.45; }
.hcard-dl > div:nth-child(3) dd{ color:var(--ivory-dim); }
.hcard-more{ margin-top:auto; padding-top:14px; display:inline-flex; align-items:center; gap:7px; min-height:36px; font-family:var(--ff-mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ivory-dim); transition:color .2s; }
.hcard-more svg{ width:12px; height:12px; }
.hcard-more:hover{ color:var(--gold-bright); }
.hours-risk{ margin:18px 0 0; max-width:none; font-size:.86rem; color:var(--ivory-dim); line-height:1.55; }
.hours-risk strong{ color:var(--ivory); font-weight:500; }
.acc .ans .dst{ margin:14px 0 4px; }
.acc .ans .table-note{ margin-top:10px; }

/* contact: one clear contact card */
.contact-hero .contact-grid{ align-items:center; }
.contact-card{ border:1px solid var(--hair); border-radius:var(--r-lg); background:linear-gradient(165deg, var(--surface-2), var(--surface)); overflow:hidden; }
.cc-block{ padding:clamp(22px,2.6vw,30px); }
.cc-block + .cc-block{ border-top:1px solid var(--hair); background:rgba(7,10,14,.35); }
.cc-k{ display:block; font-family:var(--ff-mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin-bottom:12px; }
.cc-email{ font-family:var(--ff-display); font-size:clamp(1.3rem,2vw,1.6rem); color:var(--ivory); border-bottom:1px solid rgba(216,184,132,.4); }
.cc-email:hover{ color:var(--gold-bright); }
.cc-status{ display:flex; align-items:center; gap:10px; margin:0 0 8px; font-family:var(--ff-display); font-size:1.25rem; color:var(--ivory); }
.cc-dot{ width:8px; height:8px; border-radius:50%; border:1px solid var(--gold); background:rgba(216,184,132,.25); }
.cc-p{ margin:0 0 14px; font-size:.95rem; }
.cc-block > .cc-p:last-child{ margin-bottom:0; }
.help-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:20px; }
.cc-h{ font-family:var(--ff-mono); font-size:.7rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--ivory-mute); margin-bottom:16px; }
.topics{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--hair); border:1px solid var(--hair); border-radius:var(--r-lg); overflow:hidden; }
.topic{ position:relative; display:flex; flex-direction:column; gap:6px; padding:24px 24px 22px; background:var(--ink); transition:background .25s var(--ease); }
.topic > svg:first-child{ width:22px; height:22px; color:var(--gold); margin-bottom:10px; }
.topic .go{ position:absolute; top:24px; right:22px; width:14px; height:14px; color:var(--ivory-mute); transition:transform .3s var(--ease), color .3s; }
.topic-t{ font-family:var(--ff-display); font-size:1.08rem; font-weight:500; color:var(--ivory); }
.topic-d{ font-size:.9rem; color:var(--ivory-mute); line-height:1.45; }
.topic:hover{ background:var(--surface); }
.topic:hover .go{ color:var(--gold); transform:translate(3px,-3px); }

@media (max-width:960px){
  .hours-head-grid{ grid-template-columns:1fr; align-items:start; }
  .hgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .topics{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:560px){
  .hgrid, .topics{ grid-template-columns:1fr; }
  .hcard{ padding:20px; }
  .hours-meta{ padding:4px 16px 12px; }
  .hm-row{ padding:9px 0; }
  .topic{ padding:18px 44px 18px 18px; display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:14px; row-gap:4px; }
  .topic > svg:first-child{ grid-row:span 2; margin:2px 0 0; }
  .topic .go{ top:20px; right:18px; }
  .help-actions .btn, .cc-block .btn{ width:100%; }
}


/* ============================================================
   v11 — Trading Hours: framed header + structured market list
   ============================================================ */
.hx-hero{ position:relative; z-index:1; overflow:hidden; padding-top:clamp(64px,8vw,112px); padding-bottom:clamp(48px,6vw,84px); border-bottom:1px solid var(--hair-soft); background:linear-gradient(180deg, rgba(22,27,36,.55), rgba(10,13,18,0)); }
.hx-hero .viz-grid{ -webkit-mask-image:radial-gradient(70% 90% at 85% 10%, #000, transparent 72%); mask-image:radial-gradient(70% 90% at 85% 10%, #000, transparent 72%); opacity:.55; }
.hx-hero-grid{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr); gap:clamp(32px,5vw,80px); align-items:end; }
.hx-hero h1{ font-size:clamp(2.4rem,4.6vw,3.7rem); font-weight:500; letter-spacing:-.035em; line-height:1; margin-top:24px; }
.hx-lede{ margin:20px 0 0; max-width:48ch; font-size:clamp(1.04rem,1.4vw,1.16rem); line-height:1.6; color:var(--ivory-dim); text-wrap:pretty; }
.hx-ref{ border:1px solid var(--hair); border-radius:var(--r-lg); background:linear-gradient(165deg, var(--surface-2), var(--surface)); overflow:hidden; }
.hx-ref-now{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:18px 22px; border-bottom:1px solid var(--hair-soft); }
.hx-ref-now .hm-k{ color:var(--gold); }
.hx-ref-clock{ font-family:var(--ff-mono); font-size:1.7rem; font-weight:500; color:var(--ivory); line-height:1; font-variant-numeric:tabular-nums; }
.hx-ref-dl{ margin:0; padding:6px 22px 10px; display:grid; }
.hx-ref-dl > div{ display:grid; grid-template-columns:96px minmax(0,1fr); gap:14px; padding:9px 0; border-top:1px solid var(--hair-soft); }
.hx-ref-dl > div:first-child{ border-top:0; }
.hx-ref-dl dt{ font-family:var(--ff-mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ivory-mute); padding-top:3px; }
.hx-ref-dl dd{ margin:0; font-size:.9rem; color:var(--ivory); }

.hx-sec{ position:relative; z-index:1; padding-top:clamp(40px,5vw,64px); padding-bottom:clamp(60px,8vw,104px); }
.hx-panel{ border:1px solid var(--hair); border-radius:var(--r-lg); background:var(--surface); overflow:hidden; }
.hx-bar{ display:flex; align-items:center; justify-content:space-between; gap:12px 28px; flex-wrap:wrap; padding:0 22px; border-bottom:1px solid var(--hair); background:var(--surface-2); }
.hx-tabs{ display:flex; gap:0 26px; flex-wrap:wrap; }
.hx-tab{ position:relative; background:none; border:0; padding:0; min-height:60px; cursor:pointer; font-family:var(--ff-text); font-size:.97rem; color:var(--ivory-mute); transition:color .2s; }
.hx-tab:hover, .hx-tab[aria-pressed="true"]{ color:var(--ivory); }
.hx-tab::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease); }
.hx-tab[aria-pressed="true"]::after{ transform:scaleX(1); }
.hx-tools{ display:flex; align-items:center; gap:12px; padding:10px 0; }
.hx-tz{ display:inline-flex; gap:2px; padding:3px; border:1px solid var(--hair); border-radius:var(--r-sm); background:var(--ink-deep); }
.hx-tz button{ background:none; border:0; border-radius:4px; min-height:32px; padding:0 11px; cursor:pointer; font-family:var(--ff-mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ivory-mute); transition:color .2s, background .2s; white-space:nowrap; }
.hx-tz button:hover{ color:var(--ivory); }
.hx-tz button[aria-pressed="true"]{ color:#1A130A; background:var(--gold); }
.hx-search{ position:relative; display:block; width:220px; }
.hx-search svg{ position:absolute; left:12px; top:50%; width:15px; height:15px; transform:translateY(-50%); color:var(--ivory-mute); pointer-events:none; }
.hx-search input{ width:100%; min-height:40px; background:var(--ink-deep); border:1px solid var(--hair); border-radius:var(--r-sm); color:var(--ivory); font-family:var(--ff-text); font-size:.92rem; padding:8px 12px 8px 34px; transition:border-color .25s; -webkit-appearance:none; appearance:none; }
.hx-search input::placeholder{ color:var(--ivory-mute); }
.hx-search input:focus{ outline:none; border-color:var(--gold); }
.hx-search input::-webkit-search-cancel-button{ -webkit-appearance:none; }

.hx-panel{ --hxcols:minmax(0,1.3fr) minmax(0,.95fr) minmax(0,1.6fr) 84px; }
.hx-zs{ display:none; }
.hx-cols, .hx-row{ display:grid; grid-template-columns:var(--hxcols); column-gap:clamp(18px,2.6vw,40px); align-items:center; padding:0 22px; }
.hx-cols{ padding-block:12px; font-family:var(--ff-mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ivory-mute); border-bottom:1px solid var(--hair-soft); }
.hx-cols-st, .hx-row .hx-st{ justify-self:end; }
.hx-gh{ display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 16px; padding:13px 22px; margin:0; background:var(--ink-deep); border-bottom:1px solid var(--hair-soft); font-family:var(--ff-mono); font-size:.68rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); line-height:1.4; }
.hx-group + .hx-group .hx-gh, .hx-rows + .hx-group .hx-gh{ border-top:1px solid var(--hair); }
.hx-gh span{ font-family:var(--ff-text); font-size:.84rem; letter-spacing:0; text-transform:none; color:var(--ivory-mute); font-weight:400; }
.hx-row{ padding-block:16px; border-bottom:1px solid var(--hair-soft); transition:background .2s; }
.hx-rows > .hx-row:last-child{ border-bottom:0; }
.hx-row:hover{ background:rgba(236,238,242,.022); }
.hx-m{ min-width:0; }
.hx-name{ font-size:1.04rem; font-weight:500; letter-spacing:-.01em; line-height:1.3; }
.hx-sub{ margin:3px 0 0; font-size:.86rem; color:var(--ivory-mute); line-height:1.4; }
.hx-time{ margin:0; font-family:var(--ff-mono); font-size:1.05rem; font-weight:500; color:var(--ivory); font-variant-numeric:tabular-nums; min-width:0; text-wrap:balance; }
.hx-time sup{ font-size:.6em; color:var(--gold); margin-left:3px; vertical-align:super; line-height:0; }
.hx-local{ margin:0; font-size:.88rem; color:var(--ivory-dim); line-height:1.45; }
.hx-st{ display:inline-flex; align-items:center; gap:8px; font-size:.84rem; color:var(--ivory-mute); white-space:nowrap; }
.hx-st i{ width:7px; height:7px; border-radius:50%; border:1px solid currentColor; }
.hx-st.is-open{ color:var(--ivory); }
.hx-st.is-open i{ border-color:var(--pos); background:var(--pos); box-shadow:0 0 0 3px rgba(118,201,164,.14); }
.hx-st.is-break i{ border-color:var(--gold); }

.hx-empty{ padding:clamp(40px,6vw,64px) 22px; display:grid; justify-items:center; gap:10px; text-align:center; }
.hx-empty p{ margin:0; font-family:var(--ff-display); font-size:1.2rem; color:var(--ivory); }
.hx-link{ background:none; border:0; padding:6px 0; cursor:pointer; font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); border-bottom:1px solid rgba(216,184,132,.4); }
.hx-link:hover{ color:var(--gold-bright); }
.hx-foot{ margin:20px 0 0; max-width:86ch; font-size:.84rem; line-height:1.6; color:var(--ivory-mute); }
.hx-foot strong{ color:var(--ivory-dim); font-weight:500; }
.acc .ans .dst{ margin:14px 0 4px; grid-template-columns:repeat(3,minmax(0,1fr)); }

@media (max-width:1100px){
  .hx-panel{ --hxcols:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1.4fr) 76px; }
  .hx-bar{ padding-top:8px; }
  .hx-tab{ min-height:48px; }
}
@media (max-width:960px){
  .hx-hero-grid{ grid-template-columns:1fr; align-items:start; gap:32px; }
  .hx-ref{ max-width:520px; }
  .acc .ans .dst{ grid-template-columns:1fr; }
}
@media (max-width:860px){
  .hx-cols{ display:none; }
  .hx-row{ grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"m st" "time time" "local local"; row-gap:6px; padding-block:18px; }
  .hx-m{ grid-area:m; } .hx-row .hx-st{ grid-area:st; align-self:start; padding-top:3px; } .hx-time{ grid-area:time; margin-top:8px; font-size:1.12rem; } .hx-local{ grid-area:local; }
  .hx-time{ white-space:normal; }
  .hx-zs{ display:inline; margin-left:10px; font-size:.6rem; font-weight:400; letter-spacing:.14em; text-transform:uppercase; color:var(--ivory-mute); }
}
@media (max-width:640px){
  .hx-hero{ padding-top:44px; padding-bottom:36px; }
  .hx-ref-now{ padding:16px 18px; }
  .hx-ref-dl{ padding:4px 18px 8px; }
  .hx-ref-dl > div{ grid-template-columns:88px minmax(0,1fr); }
  .hx-bar{ display:grid; grid-template-columns:minmax(0,1fr); padding:14px 18px 0; gap:12px; }
  .hx-tools{ order:-1; padding:0; }
  .hx-search{ flex:1 1 0; width:auto; min-width:0; }
  .hx-search input{ min-height:44px; font-size:1rem; }
  .hx-tz button{ min-height:36px; }
  .hx-tabs{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; gap:22px; margin:0 -18px; padding:0 18px; }
  .hx-tabs::-webkit-scrollbar{ display:none; }
  .hx-tab{ flex:0 0 auto; min-height:48px; }
  .hx-gh, .hx-row{ padding-inline:18px; }
  .hx-panel{ border-radius:var(--r); }
}


/* ============================================================
   v12 — responsive QA fixes (root causes, no page-level overflow clipping)
   ============================================================ */
/* safe areas (viewport-fit=cover) */
.wrap{ padding-left:max(var(--pad), env(safe-area-inset-left)); padding-right:max(var(--pad), env(safe-area-inset-right)); }
.toast{ bottom:calc(24px + env(safe-area-inset-bottom)); }
@media (max-width:73.75em){
  .mobile-menu{ padding-bottom:calc(26px + env(safe-area-inset-bottom)); }
  html.menu-open{ overflow:hidden; }
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ transition-duration:.01ms!important; animation-duration:.01ms!important; animation-iteration-count:1!important; }
}

/* touch targets: 44px minimum for primary controls */
.btn{ min-height:44px; }
.brand{ min-height:44px; }
.mx-cta{ min-height:44px; }
.hx-search input{ min-height:44px; }
.hx-tab::before{ content:""; position:absolute; top:0; bottom:0; left:-12px; right:-12px; }
.t-cmp{ display:inline-flex; align-items:center; min-height:44px; padding:0; border-bottom:0; text-decoration:underline; text-decoration-color:var(--hair); text-underline-offset:5px; text-decoration-thickness:1px; }
.t-cmp:hover{ text-decoration-color:var(--gold); }
.t-foot{ margin-top:4px; }
@media (max-width:73.75em){
  .hx-tz button{ min-height:42px; }
  .footer-links a{ display:inline-flex; align-items:center; min-height:44px; padding:0; }
  .footer-links a:hover{ padding-left:0; }
  .footer-links{ row-gap:4px; }
}

/* footer: the v3 two-column rule was overriding the 960px single-column rule */
@media (max-width:960px){
  .footer-top{ grid-template-columns:minmax(0,1fr); gap:32px; }
}
@media (max-width:560px){
  .footer-links.fl-3{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 20px; }
  .footer-links.fl-3 > div:nth-child(3){ grid-column:1/-1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:20px; align-items:start; }
  .footer-links.fl-3 > div:nth-child(3) .col-h{ grid-column:1/-1; }
  .footer-links a{ line-height:1.35; }
  .footer-top{ padding-bottom:36px; }
  .legal{ padding-top:32px; }
}

/* buttons may wrap on small screens instead of spilling past their box */
@media (max-width:560px){
  .btn{ white-space:normal; text-align:center; line-height:1.35; }
}

/* home: key facts */
@media (min-width:561px) and (max-width:960px){
  .facts .stat-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .facts .stat{ padding:22px 20px; }
}
@media (max-width:560px){
  .facts .stat{ display:grid; grid-template-columns:6.6rem minmax(0,1fr); align-items:center; column-gap:16px; padding:18px 20px; }
  .facts .stat .num{ font-size:1.85rem; }
  .facts .stat .lbl{ margin:0; font-size:.9rem; }
  .panel-foot{ flex-direction:column; align-items:flex-start; gap:2px; }
  .panel-art{ inset:56px 0 76px; height:calc(100% - 132px); }
}

/* accounts: leverage example fits a phone without sideways scrolling */
@media (max-width:560px){
  .data-table.compact th, .data-table.compact td{ padding:12px 10px; }
  .data-table.compact thead th{ white-space:normal; letter-spacing:.08em; line-height:1.3; }
  .data-table.compact td.n{ font-size:.84rem; }
  .data-table.compact tbody th{ font-size:.92rem; }
}
/* accounts: comparison matrix fits from ~1000px; below that it scrolls with a visible cue */
@media (min-width:761px){ .matrix{ min-width:900px; } }
@media (min-width:761px) and (max-width:1100px){ .matrix th[scope="row"], .matrix thead th:first-child{ min-width:190px; } }
.scroll-hint{ display:none; }
.cmp-tools:has(+ .table-wrap.is-scrollable) .scroll-hint{ display:block; }
.table-wrap.is-scrollable:not(.at-end), .hx-tabs.is-scrollable:not(.at-end){ -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent); }
.table-wrap:focus-visible{ outline-offset:2px; }

/* markets: denser lists on phones */
@media (max-width:560px){
  .mkt .bullets li{ padding:9px 0 9px 24px; font-size:.93rem; line-height:1.5; }
  .mkt .bullets li::before{ top:20px; }
  .mkt-meta > div{ padding:9px 0; }
}

/* trading hours: search gets a full row on narrow phones */
@media (max-width:440px){
  .hx-tools{ flex-wrap:wrap; }
  .hx-search{ flex:1 1 100%; order:-1; }
}

.toc a{ min-height:44px; display:inline-flex; align-items:center; }
@media (max-width:73.75em){
  .hx-tz button{ min-height:44px; }
  .footer-links a{ min-width:44px; }
}
@media (max-width:900px){
  .t-cta .btn{ white-space:normal; line-height:1.35; }
}
@media (min-width:35.0625em) and (max-width:47.5em){
  .tier, .tiers-band + .tier{ grid-template-columns:minmax(0,1fr); grid-template-areas:"id" "price" "adds" "cta"; row-gap:12px; }
  .t-price{ text-align:left; display:flex; align-items:baseline; gap:4px 12px; flex-wrap:wrap; }
  .t-price .price-sub{ margin-top:0; }
}

/* long words / enlarged text: let grid tracks shrink and headings break */
.feature-row{ grid-template-columns:auto minmax(0,1fr); }
a.feature-row{ grid-template-columns:auto minmax(0,1fr) auto; }
.bc-head{ flex-wrap:wrap; }
@media (max-width:560px){
  .mkt{ grid-template-columns:minmax(0,1fr); }
  h1,h2,h3,h4{ overflow-wrap:anywhere; }
}
.cap-grid > *, .info-row > *, .facts > *, .mkt > *{ min-width:0; }
@media (min-width:561px) and (max-width:960px){ .footer-links.fl-3{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.facts .stat-head{ display:grid; justify-items:start; gap:14px; }