/* ============================================================
   THE ENTHUSIAST EXCHANGE — marketplace browse / landing.
   Anatomy: hero → filter toolbar + listing grid → guarantee
   band → how selling works → gallery cross-band → FAQ copy.
   Marketplace mock only: listings are UNIQUE items (qty 1,
   condition-graded, seller-owned) — NOT catalog SKUs.
   Uses only fi-styles.css variables.
   ============================================================ */
.crumbs{ background:var(--paper); border-bottom:1px solid var(--line); }
.crumbs__inner{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:11px 0;
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; }
.crumbs a{ color:var(--carbon); } .crumbs a:hover{ color:var(--command); }
.crumbs .sep{ color:var(--line-input); } .crumbs .cur{ color:var(--ink); font-weight:500; }

/* hero */
.xhero{ position:relative; background:var(--ocean-900); color:#fff; overflow:hidden; }
.xhero__ghost{ position:absolute; right:-2%; top:50%; transform:translateY(-50%); font-family:var(--f-head); font-weight:900;
  font-size:clamp(80px,15vw,190px); line-height:1; color:transparent; -webkit-text-stroke:1.5px rgba(255,255,255,.07);
  pointer-events:none; user-select:none; white-space:nowrap; }
.xhero__inner{ position:relative; z-index:2; padding-block:44px 46px; }
.xhero__kicker{ font-family:var(--f-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--lime); }
.xhero h1{ font-family:var(--f-head); font-weight:800; text-transform:uppercase; font-size:clamp(1.9rem,5vw,3.2rem); line-height:.95; margin:12px 0 14px; }
.xhero h1 .lime{ color:var(--lime); }
.xhero__sub{ font-size:15px; line-height:1.65; color:rgba(255,255,255,.82); max-width:60ch; margin-bottom:20px; }
.xhero__cta{ display:flex; gap:10px; flex-wrap:wrap; }
.xhero__stats{ display:flex; gap:28px; flex-wrap:wrap; margin-top:26px; padding-top:20px; border-top:1px solid var(--line-dark); }
.xstat__num{ font-family:var(--f-head); font-weight:800; font-size:26px; line-height:1; color:var(--lime); }
.xstat__lbl{ font-family:var(--f-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--steel); margin-top:5px; }

/* hero background image — real FI banner; swap for the garage-shot when it exists */
.xhero__bg{ position:absolute; inset:0; z-index:0; }
.xhero__bg img{ width:100%; height:100%; object-fit:cover; object-position:center; }
.xhero__bg::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(16,18,20,.96) 30%, rgba(16,18,20,.82) 60%, rgba(16,18,20,.6)); }
.xhero__grid{ display:grid; grid-template-columns:1fr; gap:26px; }
@media (min-width:960px){ .xhero__grid{ grid-template-columns:1.15fr .85fr; align-items:center; } }
/* vehicle finder — YMM + plate + VIN */
.vfind{ background:rgba(12,14,16,.72); border:1px solid var(--line-dark); border-radius:var(--r);
  padding:18px 18px 16px; backdrop-filter:blur(5px); }
.vfind__lbl{ font-family:var(--f-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--lime); margin-bottom:4px; }
.vfind__sub{ font-size:12.5px; color:rgba(255,255,255,.7); line-height:1.5; margin-bottom:13px; }
.vfind__tabs{ display:flex; gap:4px; margin-bottom:13px; }
.vfind__tab{ flex:1; text-align:center; font-family:var(--f-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase;
  color:rgba(255,255,255,.6); padding:9px 6px; border:1px solid var(--line-dark); border-radius:var(--r-sm);
  background:transparent; cursor:pointer; transition:var(--t); }
.vfind__tab:hover{ color:#fff; }
.vfind__tab.is-active{ background:rgba(206,32,47,.08); border:1.5px solid var(--lime); color:var(--lime); font-weight:500; }
.vfind__panel{ display:none; }
.vfind__panel.is-active{ display:block; }
.vfind__row{ display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-bottom:9px; }
/* vehicle finder extra attributes (2026-08-31): the cascade renders one
   dropdown per model attribute (drive, body style…) into [data-ymm-extras];
   the select's own placeholder names it, so the label element hides */
.vfind__row:empty{ display:none; }
.vfind [data-ymm-extra-cell] label{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.vfind select,.vfind input{ width:100%; padding:11px 12px; background:rgba(255,255,255,.07);
  border:1px solid var(--line-input); border-radius:var(--r-sm); color:#fff; font-size:14px; }
.vfind select option{ color:var(--ink); }
.vfind input::placeholder{ color:rgba(255,255,255,.45); }
.vfind select:focus,.vfind input:focus{ outline:2px solid var(--lime); outline-offset:1px; }
.vfind__go{ margin-top:4px; background:#fff !important; border-color:#fff !important; color:#141619 !important; }
.vfind__go:hover{ background:var(--lime) !important; border-color:var(--lime) !important; color:#fff !important; }
.vfind__note{ margin-top:11px; font-family:var(--f-mono); font-size:9px; letter-spacing:.06em; text-transform:uppercase;
  color:rgba(255,255,255,.5); display:flex; align-items:center; gap:6px; }
.vfind__note svg{ width:12px; height:12px; color:var(--lime); flex:none; }

/* sections */
.xsec{ padding:44px 0; }
.xsec--bone{ background:var(--bone); }
.blocknum{ font-family:var(--f-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--command); }
.xsec h2{ font-family:var(--f-head); font-weight:800; text-transform:uppercase; font-size:26px; line-height:.95; color:var(--ink); margin:8px 0 10px; }
.xsec h2 .hl{ color:var(--command); }
.xsec__lead{ font-size:14.5px; line-height:1.65; color:var(--carbon); max-width:64ch; margin-bottom:22px; }

/* ----- first-time-user strip: how buying works, in one line ----- */
.howstrip{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:16px 18px;
  display:grid; grid-template-columns:1fr; gap:14px; margin-bottom:0; }
@media (min-width:960px){ .howstrip{ grid-template-columns:auto repeat(3,1fr) auto; align-items:center; } }
.howstrip__lbl{ font-family:var(--f-head); font-weight:800; text-transform:uppercase; font-size:15px; line-height:1.05; color:var(--ink); }
.howstrip__lbl span{ display:block; font-family:var(--f-mono); font-weight:500; font-size:8.5px; letter-spacing:.1em; color:var(--command); margin-top:4px; }
.hstep2{ display:flex; gap:10px; align-items:flex-start; }
.hstep2__n{ width:26px; height:26px; border-radius:50%; background:var(--ocean-900); color:var(--lime);
  font-family:var(--f-mono); font-size:11px; display:grid; place-items:center; flex:none; }
.hstep2 b{ display:block; font-family:var(--f-head); font-weight:800; text-transform:uppercase; font-size:13px; color:var(--ink); line-height:1.1; }
.hstep2 p{ font-size:11.5px; line-height:1.45; color:var(--carbon); margin-top:3px; }
.howstrip__go{ white-space:nowrap; }

/* ----- category tiles (FI/CO-style icon row) ----- */
.ctiles{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
@media (min-width:640px){ .ctiles{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1100px){ .ctiles{ grid-template-columns:repeat(4,1fr); } }
/* 7 tiles: Sell goes full-width below 1100px so no row ever orphans; one clean row above */
.ctile--sell{ grid-column:1 / -1; }
@media (min-width:1100px){ .ctile--sell{ grid-column:auto; } } /* 8 tiles = balanced 2×4 */
.ctile{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:18px 14px 16px;
  text-align:center; transition:var(--t); display:flex; flex-direction:column; align-items:center; gap:10px; }
.ctile:hover{ border-color:var(--command); transform:translateY(-3px); box-shadow:var(--sh); }
.ctile__ico{ width:74px; height:74px; display:grid; place-items:center; }
.ctile__ico img{ max-width:100%; max-height:100%; object-fit:contain; }
.ctile__name{ font-family:var(--f-head); font-weight:800; text-transform:uppercase; font-size:15px; line-height:1; color:var(--ink); }
.ctile__count{ font-family:var(--f-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--carbon); }
.ctile--sell{ background:var(--ocean-900); border-color:var(--ocean-900); }
.ctile--sell .ctile__name{ color:#fff; }
.ctile--sell .ctile__count{ color:var(--lime); }
.ctile--sell .ctile__ico{ color:var(--lime); }
.ctile--sell .ctile__ico svg{ width:52px; height:52px; }

/* ----- filter toolbar ----- */
.xbar{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:18px; }
.xchips{ display:flex; gap:8px; flex-wrap:wrap; }
.xchip{ font-family:var(--f-mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  padding:9px 14px; border:1px solid var(--line-input); border-radius:var(--pill); color:var(--carbon);
  background:var(--paper); transition:var(--t); }
.xchip:hover{ border-color:var(--command); color:var(--command); }
.xchip.is-active{ background:var(--ocean-900); border-color:var(--ocean-900); color:var(--lime); }
.xbar__right{ margin-left:auto; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.xfit-toggle{ display:inline-flex; align-items:center; gap:8px; font-family:var(--f-mono); font-size:11px;
  letter-spacing:.05em; text-transform:uppercase; color:var(--ink); padding:9px 14px;
  border:1px solid var(--line-input); border-radius:var(--pill); background:var(--paper); cursor:pointer; transition:var(--t); }
.xfit-toggle:hover{ border-color:var(--command); }
.xfit-toggle .dot{ width:9px; height:9px; border-radius:50%; background:var(--command); }
.xsort{ font-family:var(--f-mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  padding:9px 12px; border:1px solid var(--line-input); border-radius:var(--r-sm); background:var(--paper); color:var(--ink); }

/* ----- listing cards — UNIQUE used items, based on .prod ----- */
.lst-grid{ display:grid; grid-template-columns:1fr; gap:12px; }
@media (min-width:700px){ .lst-grid{ grid-template-columns:1fr 1fr; } }
.lst[hidden]{ display:none !important; }
@media (min-width:768px){ .lst-grid{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1100px){ .lst-grid{ grid-template-columns:repeat(4,1fr); } }
.lst{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r); display:flex;
  flex-direction:column; overflow:hidden; transition:var(--t); }
.lst:hover{ border-color:var(--command); box-shadow:var(--sh); transform:translateY(-2px); }
.lst__media{ position:relative; aspect-ratio:4/3; border-bottom:1px solid var(--line-2); overflow:hidden; }
/* real demo imagery — product shots contain on white, lifestyle shots cover */
.lst__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.lst__img--product{ object-fit:contain; background:#fff; padding:10px; }
img.lst__avatar{ object-fit:cover; }
.lst__fits{ display:inline-flex; align-items:center; gap:5px; font-family:var(--f-mono); font-size:9.5px;
  font-weight:500; letter-spacing:.04em; text-transform:uppercase; color:#15803d; margin-bottom:9px; }
.lst__fits::before{ content:"✓"; font-weight:700; }
.xg-tile__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* PLACEHOLDER fallback tile (unused slots) */
.lst__ph{ position:absolute; inset:0; background:linear-gradient(150deg,#26282c,#101214); display:grid; place-items:center; }
.lst__ph span{ font-family:var(--f-mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.32); text-align:center; padding:0 10px; }
.lst__flags{ position:absolute; top:9px; left:9px; display:flex; flex-direction:column; gap:5px; z-index:2; align-items:flex-start; }
.lst__shots{ position:absolute; bottom:9px; right:9px; z-index:2; font-family:var(--f-mono); font-size:9px;
  background:rgba(10,12,14,.78); color:#fff; padding:3px 7px; border-radius:var(--r-sm); display:inline-flex; align-items:center; gap:5px; }
.lst__shots svg{ width:11px; height:11px; }
.lst__fav{ position:absolute; top:9px; right:9px; width:34px; height:34px; background:rgba(255,255,255,.92);
  border-radius:var(--r-sm); display:grid; place-items:center; z-index:2; transition:var(--t); }
.lst__fav:hover{ background:var(--lime); }
.lst__fav svg{ width:16px; height:16px; }
.lst__body{ padding:13px 13px 15px; display:flex; flex-direction:column; flex:1; }
.lst__brand{ font-family:var(--f-mono); font-size:10px; font-weight:500; letter-spacing:.06em;
  text-transform:uppercase; color:var(--command); margin-bottom:5px; }
.lst__name{ font-family:var(--f-head); font-weight:700; text-transform:uppercase; font-size:16px; line-height:1; margin-bottom:6px; color:var(--ink); }
.lst__spec{ font-family:var(--f-mono); font-size:11px; color:var(--carbon); margin-bottom:10px; }
.lst__seller{ display:flex; align-items:center; gap:8px; margin-bottom:11px; }
.lst__avatar{ width:22px; height:22px; border-radius:50%; background:var(--bone-2); color:var(--ocean);
  font-family:var(--f-mono); font-size:9px; font-weight:500; display:grid; place-items:center; flex:none; }
.lst__who{ font-size:12px; color:var(--carbon); line-height:1.3; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lst__who b{ color:var(--ink); font-weight:700; }
.lst__who .st{ color:var(--star); }
.lst__foot{ margin-top:auto; padding-top:11px; border-top:1px solid var(--line-2); display:flex;
  align-items:flex-end; justify-content:space-between; gap:8px; }
.lst__price .now{ font-family:var(--f-head); font-weight:800; font-size:22px; line-height:1; color:var(--ink); }
.lst__price .obo{ font-family:var(--f-mono); font-size:10px; color:var(--carbon); margin-top:4px; }
.lst__price .obo b{ color:var(--ink); }
.lst__loc{ font-family:var(--f-mono); font-size:10px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--carbon); display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
.lst__loc svg{ width:12px; height:12px; flex:none; }
/* condition flags — grade drives the color */
.flag--new{ background:var(--lime); color:var(--on-lime); }
.flag--exc{ background:var(--command); color:#fff; }
.flag--good{ background:var(--ocean-900); color:#fff; }
.flag--fair{ background:var(--orange-deep); color:#fff; }
.flag--drop{ background:#15803d; color:#fff; }
.xmore{ display:flex; justify-content:center; margin-top:24px; }

/* ----- guarantee band (dark) ----- */
.xguar{ background:var(--ocean-900); color:#fff; position:relative; overflow:hidden; }
.xguar__inner{ padding-block:44px; position:relative; z-index:2; }
.xguar__head{ max-width:56ch; margin-bottom:26px; }
.xguar__head h2{ font-family:var(--f-head); font-weight:800; text-transform:uppercase; font-size:clamp(1.5rem,3.5vw,2.2rem); line-height:.95; }
.xguar__head h2 em{ color:var(--lime); font-style:normal; }
.xguar__head p{ font-size:14px; line-height:1.65; color:rgba(255,255,255,.72); margin-top:10px; }
.xguar__grid{ display:grid; grid-template-columns:1fr; gap:14px; }
@media (min-width:768px){ .xguar__grid{ grid-template-columns:repeat(3,1fr); } }
.gcard{ background:var(--ocean-deep); border:1px solid var(--line-dark); border-radius:var(--r); padding:20px 18px; }
.gcard__ico{ width:44px; height:44px; border-radius:var(--r-sm); background:rgba(206,32,47,.1); color:var(--lime);
  display:grid; place-items:center; margin-bottom:12px; }
.gcard__ico svg{ width:24px; height:24px; }
.gcard h3{ font-family:var(--f-head); font-weight:800; text-transform:uppercase; font-size:16px; line-height:1; margin-bottom:8px; }
.gcard p{ font-size:13px; line-height:1.6; color:rgba(255,255,255,.66); }

/* ----- how selling works ----- */
.xsteps{ display:grid; grid-template-columns:1fr; gap:14px; counter-reset:xstep; }
@media (min-width:768px){ .xsteps{ grid-template-columns:repeat(4,1fr); } }
.xstep{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:20px 18px; position:relative; transition:var(--t); }
.xstep:hover{ border-color:var(--command); transform:translateY(-3px); box-shadow:0 10px 24px rgba(16,18,20,.08); }
.xstep__num{ font-family:var(--f-head); font-weight:900; font-size:34px; line-height:1; color:transparent;
  -webkit-text-stroke:1.3px var(--command); margin-bottom:10px; }
.xstep h3{ font-family:var(--f-head); font-weight:800; text-transform:uppercase; font-size:16px; line-height:1; color:var(--ink); margin-bottom:8px; }
.xstep p{ font-size:13px; line-height:1.6; color:var(--carbon); }
.xstep p b{ color:var(--ink); }
.xsell-cta{ display:flex; gap:10px; flex-wrap:wrap; margin-top:22px; align-items:center; }
.xsell-note{ font-family:var(--f-mono); font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--carbon); }

/* ----- video row (process explainers) ----- */
.vids{ display:grid; grid-template-columns:1fr; gap:12px; margin-top:24px; }
@media (min-width:768px){ .vids{ grid-template-columns:repeat(3,1fr); } }
.vid{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; transition:var(--t); display:flex; flex-direction:column; }
.vid:hover{ border-color:var(--command); transform:translateY(-3px); box-shadow:var(--sh); }
.vid__media{ position:relative; aspect-ratio:16/9; overflow:hidden; }
.vid__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.vid__media::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(10,12,14,.45), transparent 55%); }
.vid__play{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:52px; height:52px; z-index:2;
  background:var(--lime); border-radius:50%; display:grid; place-items:center; transition:var(--t); }
.vid:hover .vid__play{ transform:translate(-50%,-50%) scale(1.1); }
.vid__play svg{ width:20px; height:20px; color:var(--on-lime); margin-left:3px; }
.vid__dur{ position:absolute; bottom:9px; right:9px; z-index:2; font-family:var(--f-mono); font-size:10px;
  background:rgba(10,12,14,.8); color:#fff; padding:3px 7px; border-radius:var(--r-sm); }
.vid__body{ padding:13px 14px 15px; }
.vid__series{ font-family:var(--f-mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--command); margin-bottom:6px; }
.vid__body h3{ font-family:var(--f-head); font-weight:800; text-transform:uppercase; font-size:16px; line-height:1.05; color:var(--ink); }

/* ----- gallery cross-band ----- */
.xgal{ background:var(--ocean-deep); color:#fff; }
.xgal__inner{ padding-block:40px; display:grid; gap:22px; }
@media (min-width:960px){ .xgal__inner{ grid-template-columns:1fr 1.2fr; align-items:center; } }
.xgal__copy h2{ font-family:var(--f-head); font-weight:800; text-transform:uppercase; font-size:clamp(1.4rem,3vw,2rem); line-height:.95; }
.xgal__copy h2 em{ color:var(--lime); font-style:normal; }
.xgal__copy p{ font-size:14px; line-height:1.65; color:rgba(255,255,255,.72); margin:12px 0 18px; max-width:52ch; }
.xgal__tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.xg-tile{ position:relative; aspect-ratio:4/5; border:1px solid var(--line-dark); border-radius:var(--r); overflow:hidden; }
/* PLACEHOLDER: gallery build photos — gradient tiles until real imagery lands */
.xg-tile__ph{ position:absolute; inset:0; background:linear-gradient(150deg,#26282c,#101214); display:grid; place-items:center; }
.xg-tile__ph span{ font-family:var(--f-mono); font-size:8.5px; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.3); text-align:center; padding:0 8px; }
.xg-tile__meta{ position:absolute; left:0; right:0; bottom:0; padding:10px; background:linear-gradient(to top,rgba(10,12,14,.88),transparent); z-index:2; }
.xg-tile__handle{ font-weight:700; font-size:12px; color:#fff; }
.xg-tile__tag{ font-family:var(--f-mono); font-size:8.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--lime); display:block; margin-top:2px; }

/* ----- FAQ two-column w/ sticky rail ----- */
.xfaq-grid{ display:grid; grid-template-columns:1fr; gap:26px; }
@media (min-width:1020px){ .xfaq-grid{ grid-template-columns:minmax(0,1.4fr) 340px; align-items:start; } }
.xfaq-rail{ display:flex; flex-direction:column; gap:14px; }
@media (min-width:1020px){ .xfaq-rail{ position:sticky; top:130px; } }
.rail-img{ position:relative; aspect-ratio:4/3; border-radius:var(--r); overflow:hidden; border:1px solid var(--line); }
.rail-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.rail-img__meta{ position:absolute; left:0; right:0; bottom:0; padding:12px; background:linear-gradient(to top,rgba(10,12,14,.85),transparent); }
.rail-img__meta b{ color:#fff; font-size:13px; }
.rail-img__meta span{ display:block; font-family:var(--f-mono); font-size:9px; letter-spacing:.06em; text-transform:uppercase; color:var(--lime); margin-top:2px; }
.rail-card{ background:var(--ocean-900); color:#fff; border-radius:var(--r); padding:19px 18px; }
.rail-card h3{ font-family:var(--f-head); font-weight:800; text-transform:uppercase; font-size:17px; line-height:1.05; margin-bottom:8px; }
.rail-card h3 em{ color:var(--lime); font-style:normal; }
.rail-card p{ font-size:12.5px; line-height:1.6; color:rgba(255,255,255,.7); margin-bottom:14px; }
.rail-card .btn{ width:100%; text-align:center; }
.rail-stats{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:15px 16px; display:flex; flex-direction:column; gap:10px; }
.rail-stat{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; border-bottom:1px solid var(--line-2); padding-bottom:9px; }
.rail-stat:last-child{ border-bottom:none; padding-bottom:0; }
.rail-stat .k{ font-family:var(--f-mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--carbon); }
.rail-stat .v{ font-family:var(--f-head); font-weight:800; font-size:17px; color:var(--ink); }

/* ----- FAQ copy ----- */
.xfaq{ max-width:820px; }
.xfaq h3{ font-family:var(--f-head); font-weight:800; text-transform:uppercase; font-size:16px; color:var(--ink); margin:18px 0 6px; }
.xfaq p{ font-size:14px; line-height:1.7; color:var(--carbon); margin-bottom:10px; }
.xfaq p b{ color:var(--ink); }
.xfaq a{ color:var(--command); text-decoration:underline; text-underline-offset:2px; }

/* ---- block ---- */

/* ----- 03 trust & reviews block ----- */
.xtrust{ background:var(--bone); padding-block:44px 46px; }
.xtrust__grid{ display:grid; grid-template-columns:1fr; gap:16px; margin-top:18px; }
@media (min-width:960px){ .xtrust__grid{ grid-template-columns:1.15fr 1fr; align-items:stretch; } }
.xtrust h2{ font-family:var(--f-head); font-weight:800; text-transform:uppercase; font-size:clamp(1.4rem,3.2vw,2rem); line-height:.98; color:var(--ink); margin:6px 0 8px; }
.xtrust h2 em{ font-style:normal; color:var(--command); }
.xtrust__lead{ font-size:13.5px; line-height:1.65; color:var(--carbon); max-width:70ch; }
.xtrust__lead b{ color:var(--ink); }
.trows{ display:flex; flex-direction:column; gap:10px; }
.trow{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:13px 15px; display:flex; gap:12px; align-items:flex-start; }
.trow svg{ width:20px; height:20px; color:#CE202F; flex:none; margin-top:1px; }
.trow b{ display:block; font-family:var(--f-head); font-weight:800; text-transform:uppercase; font-size:13px; color:var(--ink); margin-bottom:2px; }
.trow p{ font-size:12px; line-height:1.55; color:var(--carbon); }
.trec{ background:var(--ocean-900); border-radius:var(--r); padding:22px 22px; color:#fff; display:flex; flex-direction:column; }
.trec__kick{ font-family:var(--f-mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--lime); margin-bottom:10px; }
.trec__stars{ color:#F5A623; font-size:20px; letter-spacing:2px; }
.trec__big{ font-family:var(--f-head); font-weight:800; font-size:clamp(1.3rem,2.6vw,1.7rem); text-transform:uppercase; line-height:1.05; margin:6px 0 4px; }
.trec__sub{ font-size:12px; color:rgba(255,255,255,.7); line-height:1.6; }
.trec__stats{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px; }
.trec__stat{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:10px; padding:12px 13px; }
.trec__stat .v{ font-family:var(--f-head); font-weight:800; font-size:20px; color:var(--lime); line-height:1; }
.trec__stat .k{ font-family:var(--f-mono); font-size:8px; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.6); margin-top:5px; line-height:1.5; }
.trec__foot{ margin-top:auto; padding-top:14px; font-family:var(--f-mono); font-size:9px; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.5); }

/* ---- block ---- */

        @media (min-width:920px){ .sff{ grid-template-columns:1.05fr 1fr !important; } }
        @media (max-width:919px){
          .sffnum{ padding-bottom:0 !important; }
          .sffcard{ position:static !important; display:flex !important; width:min(230px,72%) !important;
            margin:18px auto 0 !important; transform:rotate(-4deg) !important; }
        }
      

/* ---- block ---- */

@media (min-width:1000px){ .pfy{ grid-template-columns:repeat(4,1fr) !important; } }

/* ==== utilities (extracted from inline style attributes) ==== */
.u03429c1{ font-family:var(--f-mono) !important; font-size:10px !important; letter-spacing:.08em !important; text-transform:uppercase !important; color:var(--carbon) !important; margin:16px 0 8px !important; }
.u0a4b2a5{ display:block !important; font-family:var(--f-mono) !important; font-size:8px !important; letter-spacing:.08em !important; text-transform:uppercase !important; color:#15803d !important; padding:8px 11px 0 !important; }
.u0b5055b{ display:block !important; font-family:var(--f-mono) !important; font-size:8px !important; letter-spacing:.08em !important; text-transform:uppercase !important; color:#CE202F !important; padding:8px 11px 0 !important; }
.u0c2dbf4{ font-family:var(--f-head) !important; font-weight:800 !important; text-transform:uppercase !important; font-size:clamp(1rem,2.2vw,1.3rem) !important; color:var(--ink) !important; line-height:1.25 !important; }
.u112be74{ background:#FDEEEF !important; border-radius:24px !important; padding:clamp(28px,4.5vw,44px) clamp(22px,4vw,52px) !important; }
.u12d857f{ position:relative !important; text-align:center !important; padding-bottom:64px !important; }
.u1b16add{ font-family:var(--f-head) !important; font-weight:800 !important; font-size:14px !important; color:var(--ink) !important; }
.u1f2b398{ margin-bottom:9px !important; }
.u2402665{ border:1.5px solid #CE202F !important; }
.u241a9a3{ padding-bottom:0 !important; }
.u244a7f3{ text-align:left !important; }
.u2578377{ display:flex !important; align-items:baseline !important; justify-content:space-between !important; gap:12px !important; flex-wrap:wrap !important; margin-bottom:12px !important; }
.u2a8b253{ font-family:var(--f-mono) !important; font-size:8px !important; letter-spacing:.1em !important; color:rgba(255,255,255,.4) !important; text-transform:uppercase !important; }
.u390d3a2{ display:block !important; font-family:var(--f-mono) !important; font-size:8px !important; letter-spacing:.08em !important; text-transform:uppercase !important; color:#15803d !important; padding:8px 12px 0 !important; }
.u3fd07a3{ display:flex !important; align-items:center !important; justify-content:space-between !important; }
.u43cb155{ display:grid !important; grid-template-columns:1fr !important; gap:30px !important; align-items:center !important; }
.u47c59e8{ width:74px !important; height:74px !important; object-fit:cover !important; border-radius:10px !important; }
.u485026c{ font-family:var(--f-mono) !important; font-size:9.5px !important; letter-spacing:.06em !important; text-transform:uppercase !important; color:#CE202F !important; }
.u48fd838{ padding:0 11px 11px !important; }
.u4e85d7d{ font-size:.44em !important; vertical-align:top !important; }
.u5236f29{ display:flex !important; gap:10px !important; flex-wrap:wrap !important; margin-top:22px !important; }
.u52fa256{ width:100% !important; height:120px !important; object-fit:contain !important; padding:8px !important; }
.u579e30d{ width:100% !important; height:104px !important; object-fit:contain !important; padding:8px !important; }
.u5807a7c{ display:inline !important; font-family:inherit !important; text-transform:none !important; font-size:inherit !important; }
.u58960dd{ font-size:14px !important; line-height:1.7 !important; color:var(--carbon) !important; }
.u5c8da36{ display:flex !important; align-items:center !important; gap:7px !important; }
.u6e234be{ font-family:var(--f-mono) !important; font-size:10px !important; letter-spacing:.16em !important; color:#E8505C !important; text-transform:uppercase !important; }
.u6e947d0{ display:grid !important; grid-template-columns:repeat(2,1fr) !important; gap:12px !important; }
.u6ec9c8d{ font-size:11px !important; color:var(--carbon) !important; }
.u737f771{ font-family:var(--f-head) !important; font-weight:800 !important; font-size:11px !important; color:#fff !important; text-transform:uppercase !important; line-height:1.05 !important; text-align:left !important; }
.u7c0aacb{ font-size:10px !important; color:var(--carbon) !important; }
.u7efc5af{ font-family:var(--f-head) !important; font-weight:800 !important; font-size:15px !important; color:var(--ink) !important; }
.u8202e94{ display:block !important; font-size:11.5px !important; color:var(--ink) !important; line-height:1.25 !important; }
.u83ab2f3{ display:block !important; font-size:12.5px !important; color:var(--ink) !important; }
.u86fda5e{ background:var(--paper) !important; border:1px solid var(--line) !important; border-radius:var(--r) !important; overflow:hidden !important; text-decoration:none !important; display:flex !important; flex-direction:column !important; }
.u879b0e8{ font-family:var(--f-mono) !important; font-size:8.5px !important; color:#15803d !important; }
.u8aaf71d{ display:flex !important; gap:9px !important; align-items:center !important; font-size:12.5px !important; color:var(--ink) !important; }
.u8e43810{ position:absolute !important; right:0 !important; bottom:-52px !important; width:min(235px,50%) !important; aspect-ratio:1.586/1 !important; background:linear-gradient(128deg,#26282c 0%,#141619 55%,#0c0d0f 100%) !important; border-radius:14px !important; transform:rotate(-7deg) !important; box-shadow:0 18px 38px rgba(16,18,20,.38), inset 0 1px 0 rgba(255,255,255,.14) !important; padding:5.5% 6.5% !important; display:flex !important; flex-direction:column !important; justify-content:space-between !important; overflow:hidden !important; }
.u9095642{ font-family:var(--f-head) !important; font-weight:800 !important; text-transform:uppercase !important; font-size:clamp(1.2rem,3vw,1.7rem) !important; color:var(--ink) !important; }
.u989c36e{ color:#CE202F !important; }
.u9e3d84f{ background:var(--bone) !important; padding-block:10px 30px !important; }
.ua372106{ color:var(--ink) !important; }
.ua8178ae{ display:block !important; font-family:var(--f-mono) !important; font-size:11px !important; letter-spacing:.3em !important; color:rgba(255,255,255,.55) !important; margin-bottom:6px !important; }
.uaed8e83{ font-family:var(--f-head) !important; font-weight:800 !important; text-transform:uppercase !important; font-size:clamp(1.6rem,4vw,2.6rem) !important; color:var(--ink) !important; line-height:1 !important; text-align:center !important; margin-bottom:clamp(14px,3vw,26px) !important; }
.ub30e2c0{ margin-bottom:8px !important; }
.uba4eb4a{ display:flex !important; flex-direction:column !important; gap:9px !important; margin-top:16px !important; background:rgba(255,255,255,.6) !important; border-radius:14px !important; padding:14px 16px !important; }
.ubb46b70{ width:100% !important; height:104px !important; object-fit:cover !important; }
.ubbd42c1{ color:#CE202F !important; font-weight:700 !important; }
.ube7b3e1{ display:block !important; font-family:var(--f-mono) !important; font-size:8px !important; letter-spacing:.08em !important; text-transform:uppercase !important; color:#CE202F !important; padding:8px 12px 0 !important; }
.uc6b294b{ padding:0 12px 12px !important; }
.uc8ef4b6{ display:flex !important; justify-content:space-between !important; align-items:baseline !important; }
.ucad8b1e{ width:30px !important; height:22px !important; border-radius:5px !important; background:linear-gradient(135deg,#E8505C,#CE202F) !important; opacity:.9 !important; }
.ucaf8652{ display:block !important; font-family:var(--f-mono) !important; font-size:8px !important; letter-spacing:.08em !important; text-transform:uppercase !important; color:var(--carbon) !important; padding:8px 12px 0 !important; }
.uda5f545{ margin-top:18px !important; display:inline-flex !important; align-items:center !important; gap:8px !important; }
.udec6f69{ color:var(--lime) !important; }
.ue38eccf{ background:var(--bone) !important; padding-block:0 34px !important; }
.ue83c21a{ position:absolute !important; inset:0 !important; background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.075) 44%,transparent 58%) !important; }
.uf420849{ font-family:var(--f-head) !important; font-weight:900 !important; font-size:clamp(6.5rem,17vw,12rem) !important; line-height:.82 !important; color:#101214 !important; letter-spacing:-.03em !important; }
.ufe5a88d{ object-position:center 42% !important; }

/* howstrip v2: icon dots, clickable steps, hover lift */
a.hstep2{ color:inherit; text-decoration:none; border-radius:var(--r-sm); transition:var(--t); padding:6px 8px; margin:-6px -8px; }
a.hstep2:hover{ background:var(--bone); }
a.hstep2:hover b{ color:var(--command); }
.hstep2__n svg{ width:17px; height:17px; }

/* guarantee band v2 — stat-forward cards + family proof strip (GX/Sweetwater weight) */
.gcard{ transition:var(--t); border-top:2px solid transparent; }
.gcard:hover{ transform:translateY(-3px); border-top-color:#CE202F; }
.gcard__stat{ font-family:var(--f-head); font-weight:800; font-size:30px; line-height:1; color:#fff; margin-bottom:10px; }
.gcard__stat span{ display:block; font-family:var(--f-mono); font-weight:500; font-size:8.5px; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.55); margin-top:6px; line-height:1.5; }
.xguar__proof{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin:18px 0 20px; font-family:var(--f-mono); font-size:9.5px; letter-spacing:.07em; text-transform:uppercase; color:rgba(255,255,255,.6); }
.gproof b{ color:#E8505C; font-size:12px; letter-spacing:0; }
.gproof__dot{ color:rgba(255,255,255,.3); }

/* guarantee v3 — SIVA: photo-topped, second-person, each card ends with a path */
.gcard__img{ width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:8px; margin-bottom:14px; display:block; }
.gcard__go{ display:inline-block; margin-top:11px; font-family:var(--f-mono); font-size:9.5px; letter-spacing:.07em; text-transform:uppercase; color:#E8505C; text-decoration:none; border-bottom:1px solid rgba(232,80,92,.4); padding-bottom:2px; }
.gcard__go:hover{ color:#fff; border-color:#fff; }

/* hero v3 — the market has a pulse (liquidity is the moat) */
.xpulse{ display:flex; align-items:center; gap:9px; margin-top:16px; font-family:var(--f-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.75); }
.xpulse__dot{ width:8px; height:8px; border-radius:50%; background:#2fbf5f; flex:none; animation:xpulse 1.6s ease-in-out infinite; }
.xpulse__txt{ transition:opacity .35s; }
.xpulse__txt.fade{ opacity:0; }
@keyframes xpulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(47,191,95,.5); } 50%{ box-shadow:0 0 0 6px rgba(47,191,95,0); } }
@media (prefers-reduced-motion: reduce){ .xpulse__dot{ animation:none; } }

/* mini UI vignettes — the interface itself proving "this easy" */
.mini{ background:var(--bone); border:1px solid var(--line); border-radius:8px; padding:11px; margin-bottom:13px; }
.mini__field{ background:var(--paper); border:1.5px solid var(--command); border-radius:6px; padding:8px 10px; font-size:12px; color:var(--ink); display:flex; align-items:center; }
.mini__cursor{ width:1.5px; height:13px; background:var(--command); margin-left:2px; animation:miniblink 1s steps(1) infinite; }
@keyframes miniblink{ 50%{ opacity:0; } }
@media (prefers-reduced-motion: reduce){ .mini__cursor{ animation:none; } }
.mini__match{ display:inline-block; margin-top:8px; font-family:var(--f-mono); font-size:8px; letter-spacing:.06em; text-transform:uppercase; background:rgba(21,128,61,.1); color:#15803d; border-radius:20px; padding:4px 9px; }
.mini__pills{ display:flex; gap:5px; flex-wrap:wrap; margin-top:8px; }
.mini__pills span{ font-family:var(--f-mono); font-size:8.5px; background:var(--paper); border:1px solid var(--line-input); border-radius:20px; padding:3px 8px; color:var(--carbon); }
.mini__chips{ display:flex; gap:5px; }
.mini__chips span{ flex:1; text-align:center; font-family:var(--f-mono); font-size:8px; letter-spacing:.04em; text-transform:uppercase; background:var(--paper); border:1px solid var(--line-input); border-radius:20px; padding:6px 4px; color:var(--carbon); }
.mini__chips .on{ border-color:var(--command); color:var(--command); box-shadow:inset 0 0 0 1px var(--command); }
.mini__shots{ display:flex; gap:6px; margin-top:9px; }
.mini__shots i{ flex:1; aspect-ratio:1; border-radius:5px; background:linear-gradient(140deg,#2a2d31,#17191c); }
.mini__shots i.add{ background:var(--paper); border:1.5px dashed var(--line-input); display:grid; place-items:center; color:var(--command); font-style:normal; font-weight:700; }
.mini__band{ font-family:var(--f-head); font-weight:800; font-size:17px; color:var(--ink); }
.mini__band span{ font-family:var(--f-mono); font-weight:500; font-size:8.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--carbon); }
.mini__pay{ display:flex; gap:6px; margin-top:9px; }
.mini__pay span{ flex:1; background:var(--paper); border:1px solid var(--line-input); border-radius:6px; padding:7px 9px; font-family:var(--f-head); font-weight:800; font-size:13px; color:var(--ink); }
.mini__pay i{ display:block; font-family:var(--f-mono); font-weight:500; font-style:normal; font-size:7.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--carbon); margin-top:2px; }
.mini__track{ display:flex; flex-direction:column; gap:7px; }
.mini__track span{ font-family:var(--f-mono); font-size:9px; letter-spacing:.05em; text-transform:uppercase; background:var(--paper); border:1px solid var(--line-input); border-radius:6px; padding:8px 10px; color:var(--carbon); }
.mini__track .ok{ color:#15803d; border-color:rgba(21,128,61,.4); }
.mini__track .pay{ color:#fff; background:#15803d; border-color:#15803d; font-weight:700; }

/* video rail heading */
.vids__head{ margin:26px 0 14px; }
.vids__kick{ font-family:var(--f-mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--command); margin-bottom:6px; }
.vids__title{ font-family:var(--f-head); font-weight:800; text-transform:uppercase; font-size:19px; color:var(--ink); }

/* gallery brand line over the tiles */
.xgal__brand{ grid-column:1/-1; width:100%; font-family:var(--f-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.65); margin-bottom:10px; }
.xgal__brand::before{ content:""; display:inline-block; width:18px; height:2px; background:#CE202F; vertical-align:middle; margin-right:9px; }