/* ============================================================
   ENTHUSIAST EXCHANGE — HOW IT WORKS, VISUAL (scan, don't read)
   ============================================================ */
.chero{ background:var(--ocean-900); color:#fff; padding:40px 0 30px; text-align:center; }
.chero__kick{ font-family:var(--f-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--lime); margin-bottom:10px; }
.chero h1{ font-family:var(--f-head); font-weight:800; text-transform:uppercase; font-size:clamp(1.9rem,5.2vw,3.2rem); line-height:.95; }
.chero h1 .hl{ color:var(--lime); }
/* trust trio — icons, 3 words each */
.trio{ background:var(--ocean-900); padding-bottom:34px; }
.trio .wrap{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; max-width:760px; }
.tri{ text-align:center; }
.tri__ic{ width:54px; height:54px; margin:0 auto 8px; border-radius:50%; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); display:grid; place-items:center; color:var(--lime); }
.tri__ic svg{ width:26px; height:26px; }
.tri b{ display:block; font-family:var(--f-head); font-weight:800; text-transform:uppercase; font-size:clamp(.75rem,1.8vw,1rem); color:#fff; line-height:1.1; }
/* track sections */
.trk{ padding-block:34px 10px; }
.trk--buy{ background:var(--bone); }
.trk--sell{ background:var(--paper); }
.trk__head{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:18px; }
.trk__head h2{ font-family:var(--f-head); font-weight:800; text-transform:uppercase; font-size:clamp(1.6rem,4vw,2.4rem); line-height:1; color:var(--ink); }
.trk--buy .trk__head h2 span{ color:#101214; }
.trk--sell .trk__head h2 span{ color:#CE202F; }
.trk__head .sub{ font-family:var(--f-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--carbon); }
.steps4{ display:grid; grid-template-columns:1fr; gap:26px; }
@media (min-width:640px){ .steps4{ grid-template-columns:1fr 1fr; } }
@media (min-width:1060px){ .steps4{ grid-template-columns:repeat(4,1fr); gap:18px; } }
.vstep{ position:relative; text-align:center; }
@media (min-width:1060px){
  .vstep:not(:last-child)::after{ content:"→"; position:absolute; right:-15px; top:44%; font-size:22px; color:#CE202F; font-weight:800; }
}
.vstep__n{ font-family:var(--f-head); font-weight:800; font-size:15px; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; margin:0 auto 10px; background:#101214; color:#fff; }
.trk--sell .vstep__n{ background:#CE202F; }
.vstep h3{ font-family:var(--f-head); font-weight:800; text-transform:uppercase; font-size:17px; line-height:1.05; color:var(--ink); margin-bottom:3px; }
.vstep .cap{ font-family:var(--f-mono); font-size:9px; letter-spacing:.06em; text-transform:uppercase; color:var(--carbon); margin-bottom:12px; display:block; }
/* mini UI snapshot frames */
.snap{ margin:0 auto; max-width:230px; background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:0 10px 24px rgba(16,18,20,.10); overflow:hidden; text-align:left; transition:transform .15s ease; }
a.vstep__link{ text-decoration:none; display:block; }
a.vstep__link:hover .snap{ transform:translateY(-4px); }
.snap__bar{ height:22px; background:#101214; display:flex; align-items:center; gap:4px; padding:0 10px; }
.snap__bar i{ width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.35); display:block; }
.snap__body{ padding:11px; }
.sline{ height:9px; border-radius:5px; background:var(--bone-2); margin-bottom:7px; }
.sline--w60{ width:60%; } .sline--w80{ width:80%; }
.sfield{ display:flex; align-items:center; justify-content:space-between; border:1px solid var(--line-input); border-radius:7px; padding:7px 9px; margin-bottom:6px; font-family:var(--f-mono); font-size:9.5px; color:var(--ink); }
.sfield span{ color:var(--carbon); }
.schip{ display:inline-flex; align-items:center; gap:5px; background:rgba(34,166,81,.12); color:#15803d; font-family:var(--f-mono); font-size:8.5px; letter-spacing:.04em; text-transform:uppercase; border-radius:999px; padding:5px 9px; font-weight:500; }
.schip--dark{ background:#101214; color:#fff; }
.schip--red{ background:rgba(206,32,47,.1); color:#CE202F; }
.sbtn{ display:block; text-align:center; background:#CE202F; color:#fff; font-family:var(--f-head); font-weight:800; text-transform:uppercase; font-size:11px; border-radius:8px; padding:9px; margin-top:8px; }
.sbtn--dark{ background:#101214; }
.sbtn--ghost{ background:none; border:1.5px solid var(--line-input); color:var(--ink); }
.simg{ width:100%; height:74px; object-fit:cover; border-radius:9px; display:block; margin-bottom:8px; }
.simg--contain{ object-fit:contain; background:#fff; border:1px solid var(--line-2); }
.srow{ display:flex; gap:7px; align-items:center; margin-bottom:6px; font-size:10.5px; color:var(--ink); }
.srow svg{ width:13px; height:13px; flex:none; color:#15803d; }
.sgrid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:5px; margin-bottom:8px; }
.sgrid img{ width:100%; height:44px; object-fit:cover; border-radius:6px; }
.sgrid .add{ height:44px; border:1.5px dashed var(--line-input); border-radius:6px; display:grid; place-items:center; color:#CE202F; font-size:16px; font-weight:800; }
.strk{ display:flex; align-items:center; gap:4px; margin:10px 0 8px; }
.strk i{ flex:1; height:5px; border-radius:3px; background:#15803d; display:block; }
.strk i.off{ background:var(--bone-2); }
.sbig{ font-family:var(--f-head); font-weight:800; font-size:20px; color:var(--ink); line-height:1; }
.ssub{ font-family:var(--f-mono); font-size:8.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--carbon); }
/* meet-in-the-middle CTA */
.mid{ padding:38px 0 50px; background:var(--paper); }
.mid .wrap{ text-align:center; }
.mid h2{ font-family:var(--f-head); font-weight:800; text-transform:uppercase; font-size:clamp(1.4rem,3.6vw,2.1rem); color:var(--ink); }
.mid p{ font-family:var(--f-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--carbon); margin-top:6px; }
.mid__btns{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:18px; }

/* ==== utilities (extracted from inline style attributes) ==== */
.u45851bf{ font-family:var(--f-head) !important; font-size:12px !important; }
.u56fdee3{ justify-content:space-between !important; }
.u6039a3a{ margin-top:0 !important; }
.u6af6117{ text-align:center !important; margin-top:7px !important; }
.u989c36e{ color:#CE202F !important; }
.ua9582bd{ text-align:center !important; margin-top:6px !important; }
.uc54bed8{ background:#15803d !important; }
.uf4e3308{ margin-top:14px !important; }