/* ═══════════════════════════════════════════════════════════════════════
   D9Commerce front page — 5th build (inc/pages/home.php, Nov 8 2026). Prefix `f5-`.
   Mobile-first: one column by default, two from 960px. Always light (body.site-light) with ink bands (.f5-ink);
   the shared night-glass header and footer come from home.css. No page script — the feature tabs are radios +
   labels, every mock is finished HTML; prefers-reduced-motion stops the little motion there is (end of file).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Tokens ─────────────────────────────────────────────────────────── */
html:has(body.site-light) { color-scheme: light; }
body.f5 {
  color-scheme: light;
  --bg: #FFFFFF; --bg-alt: #F5F6FB; --surface: #FFFFFF; --surface-2: #F8F9FD;
  --line: #E6E8F2; --line-2: #D5DAEA; --ink: #0B1020; --ink-2: #2A3350; --muted: #5B6584; --faint: #646E8A;
  --primary: #5B5CF0; --primary-ink: #4338CA; --focus: #6366F1;
  --good: #059669; --good-ink: #047857; --good-soft: #E7F8F1; --warn: #B45309; --danger: #DC2626;
  --grad-text: linear-gradient(120deg, #0891B2 0%, #4F46E5 48%, #9333EA 100%);
  --shadow-sm: 0 1px 2px rgba(16, 24, 64, .06);
  --shadow: 0 6px 16px -6px rgba(16, 24, 64, .12);
  --shadow-lg: 0 24px 48px -18px rgba(16, 24, 64, .25);
  --band: #0B1020; --band-2: #0F1630;
  --aurora: linear-gradient(135deg, #22D3EE 0%, #6366F1 52%, #A855F7 100%);
  --win-shadow: 0 40px 80px -36px rgba(2, 6, 23, .55), 0 14px 32px -22px rgba(2, 6, 23, .35);
  background: #fff; color: var(--ink-2);
}
.f5-ink {
  color-scheme: dark;
  --bg: var(--band); --bg-alt: var(--band-2); --surface: rgba(255, 255, 255, .05); --surface-2: rgba(255, 255, 255, .08);
  --line: rgba(148, 163, 184, .18); --line-2: rgba(148, 163, 184, .3);
  --ink: #F5F7FF; --ink-2: #CDD4EA; --muted: #A3ADCA; --faint: #8390B0;
  --primary: #A5B4FC; --focus: #67E8F9; --good: #34D399;
  position: relative; isolation: isolate; overflow: clip;
  color: var(--ink-2); background: var(--band);
}
.f5-ink :focus-visible { outline-color: #67E8F9; }

/* ── Header: the logo sized to the bar (home.css owns the rest) ─────── */
body.f5 .brand-full { width: auto; height: 36px; }
@media (min-width: 1100px) { body.f5 .brand-full { height: 42px; } }
/* Phones: logo + menu only — the sticky "Start your free trial" bar (landing.js) carries the call to action. */
@media (max-width: 479px) {
  body.f5 .head-cta { display: none; }
  body.f5 .brand-full { height: 34px; }
}
@media (max-width: 359px) { body.f5 .brand-full { display: block; height: 30px; } body.f5 .brand-mark { display: none; } }

/* ── Shared atoms ───────────────────────────────────────────────────── */
.f5 .wrap { padding-inline: max(18px, env(safe-area-inset-left)); }
.f5-label {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 14px;
  font-size: 14px; font-weight: 700; color: var(--primary-ink);
}
.f5-label::before { content: ''; width: 22px; height: 2px; border-radius: 2px; background: var(--aurora); }
.f5-ink .f5-label { color: #A5F3FC; }
.f5-head { max-width: 760px; margin-bottom: clamp(32px, 5vw, 56px); }
.f5-head.center { margin-inline: auto; text-align: center; }
.f5-head h2, .f5-copy h2 {
  margin: 0 0 14px; color: var(--ink); font-weight: 800; letter-spacing: -.04em; line-height: 1.06;
  font-size: clamp(1.9rem, 1.2rem + 2.8vw, 3.3rem); text-wrap: balance;
}
.f5-sub { margin: 0; font-size: clamp(1rem, .95rem + .3vw, 1.15rem); line-height: 1.6; color: var(--muted); text-wrap: pretty; }
.f5-head.center .f5-sub { margin-inline: auto; max-width: 60ch; }
.f5-muted { color: var(--muted); font-weight: 500; font-size: .85em; }
.f5-note { margin-top: 12px; font-size: 12.5px; color: var(--faint); }
.f5-sec { padding: clamp(64px, 9vw, 112px) 0; background: var(--bg); }
.f5-alt { background: var(--bg-alt); }
.f5-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.f5-cta.center { justify-content: center; }
.f5-checks { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.f5-checks li { display: flex; gap: 10px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.f5-checks i { flex: none; margin-top: 4px; font-size: 12px; color: var(--good); }

/* ── Hero ───────────────────────────────────────────────────────────── */
.f5-hero { padding: calc(var(--head-h, 64px) + clamp(28px, 6vw, 72px)) 0 clamp(48px, 7vw, 88px); }
.f5-hero-in { position: relative; z-index: 1; display: grid; gap: clamp(36px, 5vw, 56px); align-items: center; }
.f5-pill {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; padding: 7px 14px; border-radius: 999px;
  font-size: 13.5px; font-weight: 600; color: #DDE3F5; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12);
}
@media (max-width: 479px) { .f5-pill { font-size: 12px; padding: 6px 12px; gap: 7px; letter-spacing: -.01em; } }
.f5-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: #34D399; box-shadow: 0 0 0 4px rgba(52, 211, 153, .18); }
.f5-hero h1 {
  margin: 0 0 18px; color: #fff; font-weight: 850; letter-spacing: -.05em; line-height: 1;
  font-size: clamp(2.05rem, .85rem + 5.2vw, 4.9rem); text-wrap: balance;
}
.f5-grad { background: linear-gradient(110deg, #67E8F9 0%, #A5B4FC 45%, #D8B4FE 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.f5-lead { max-width: 58ch; margin: 0 0 26px; font-size: clamp(1.05rem, .98rem + .4vw, 1.25rem); line-height: 1.6; color: #C3CBE4; }
.f5-ticks { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 20px; font-size: 14.5px; font-weight: 550; color: #C3CBE4; }
.f5-ticks i { color: #34D399; margin-right: 4px; }
@media (max-width: 559px) {
  .f5-cta .btn { width: 100%; justify-content: center; }
}

/* The scene: phone shot · listing draft · live marketplaces. */
.f5-scene { position: relative; margin: 0; display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.f5-phone {
  position: relative; width: min(220px, 62%); margin-inline: auto; padding: 10px; border-radius: 32px;
  background: linear-gradient(160deg, #1B2238, #0A0E1C); border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: var(--win-shadow);
}
.f5-phone .notch { display: block; width: 64px; height: 6px; margin: 2px auto 8px; border-radius: 6px; background: rgba(255, 255, 255, .14); }
.f5-phone .shot { position: relative; overflow: hidden; aspect-ratio: 3 / 4; border-radius: 22px; background: radial-gradient(120% 80% at 50% 25%, #FFFFFF, #DCE2EE); }
.f5-phone .vz-item { position: absolute; inset: 12% 4% 8%; width: 92%; height: auto; }
.f5-phone .scan { position: absolute; left: 0; right: 0; height: 30%; top: -30%; background: linear-gradient(180deg, transparent, rgba(34, 211, 238, .28), transparent); animation: f5Scan 3.2s ease-in-out infinite; }
.f5-phone .tag { position: absolute; padding: 3px 8px; border-radius: 6px; font-size: 12px; font-weight: 700; color: #0B1020; background: #67E8F9; box-shadow: 0 6px 14px -6px rgba(8, 145, 178, .7); }
.f5-phone .t1 { top: 12%; left: 10%; }
.f5-phone .t2 { bottom: 18%; right: 10%; background: #C4B5FD; }
.f5-phone .shutter { display: grid; place-items: center; height: 46px; }
.f5-phone .shutter i { width: 30px; height: 30px; border-radius: 50%; border: 3px solid #fff; background: rgba(255, 255, 255, .25); }
@keyframes f5Scan { 0%, 10% { top: -30%; } 60%, 100% { top: 100%; } }

.f5-draft {
  position: relative; padding: 16px; border-radius: 18px; background: #fff; color: #0B1020;
  box-shadow: var(--win-shadow); border: 1px solid rgba(255, 255, 255, .6);
}
.f5-draft .hd { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px solid #EEF0F6; }
.f5-draft .hd b { display: block; font-size: 15px; }
.f5-draft .hd small { font-size: 12.5px; color: #5B6584; }
.f5-draft dl { margin: 0; display: grid; }
.f5-draft dl > div { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-bottom: 1px solid #F1F3F9; }
.f5-draft dl > div:last-child { border-bottom: 0; }
.f5-draft dt { font-size: 12.5px; font-weight: 600; color: #5B6584; }
.f5-draft dd { margin: 0; font-size: 13.5px; font-weight: 600; line-height: 1.4; color: #1B2240; }
.f5-draft .chips { display: flex; flex-wrap: wrap; gap: 5px; }
.f5-draft .chips span { padding: 2px 8px; border-radius: 6px; font-size: 12px; color: #4338CA; background: #EEF0FF; }
.f5-draft .price { font-size: 18px; letter-spacing: -.02em; }
.f5-draft .ok { font-size: 12px; font-weight: 600; color: #047857; }

.f5-live { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.f5-live li {
  display: flex; align-items: center; gap: 8px; min-width: 0; padding: 10px 12px; border-radius: 12px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(52, 211, 153, .28); color: #fff; font-size: 13.5px; font-weight: 650;
  animation: f5Pop .6s var(--ease, ease) calc(.6s + var(--i) * .15s) backwards;
}
.f5-live img { flex: none; width: 20px; height: 20px; border-radius: 5px; background: #fff; padding: 2px; }
.f5-live span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f5-live em { margin-left: auto; flex: none; font-style: normal; font-size: 12px; font-weight: 650; color: #34D399; }
@media (max-width: 479px) { .f5-live li { padding: 10px; } .f5-live em { font-size: 0; } .f5-live em i { font-size: 15px; } .f5-live span { white-space: normal; line-height: 1.2; } }
@keyframes f5Pop { from { opacity: 0; transform: translateY(8px) scale(.97); } }
.f5-scene .f5-note { margin: 0; text-align: center; color: #8390B0; }

@media (min-width: 560px) {
  .f5-scene { grid-template-columns: 200px minmax(0, 1fr); align-items: start; }
  .f5-phone { width: 100%; margin: 0; }
  .f5-live { grid-column: 1 / -1; }
  .f5-scene .f5-note { grid-column: 1 / -1; }
  .f5-draft { margin-top: 28px; }
}
@media (min-width: 1024px) {
  .f5-hero-in { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  .f5-hero h1 { font-size: clamp(2.6rem, 4.25vw, 4rem); }
  .f5-scene { grid-template-columns: 210px minmax(0, 1fr); }
}

/* ── Marketplaces strip ─────────────────────────────────────────────── */
.f5-mk { padding: 26px 0; background: #fff; border-bottom: 1px solid var(--line); }
.f5-mk p { margin: 0 0 14px; text-align: center; font-size: 13.5px; font-weight: 600; color: var(--muted); }
.f5-mk ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; }
.f5-mk li { display: inline-flex; align-items: center; gap: 9px; padding: 9px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); font-size: 15px; font-weight: 650; color: var(--ink); }
.f5-mk img { width: 26px; height: 26px; }

/* ── Film ───────────────────────────────────────────────────────────── */
.f5-film { padding: clamp(56px, 8vw, 96px) 0; }
.f5-film-stage { max-width: 1040px; margin: 0 auto; }

/* ── Steps ──────────────────────────────────────────────────────────── */
.f5-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); counter-reset: none; }
.f5-step {
  position: relative; padding: 24px 22px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow-sm); scroll-margin-top: calc(var(--head-h, 64px) + 16px);
}
.f5-step .n { position: absolute; top: 18px; right: 20px; font-size: 13px; font-weight: 800; color: var(--faint); }
.f5-step .ic { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 16px; border-radius: 14px; color: #fff; background: var(--aurora); box-shadow: 0 10px 20px -10px rgba(99, 102, 241, .8); font-size: 19px; }
.f5-step h3 { margin: 0 0 8px; font-size: 19px; font-weight: 750; letter-spacing: -.02em; color: var(--ink); }
.f5-step p { margin: 0 0 14px; font-size: 15px; line-height: 1.6; color: var(--muted); }
.f5-step ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.f5-step li { display: flex; gap: 8px; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.f5-step li i { flex: none; margin-top: 4px; font-size: 11px; color: var(--good); }
@media (min-width: 680px) { .f5-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .f5-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ── Feature tabs (radios + labels; no JS) ──────────────────────────── */
.f5-tab-r { position: absolute; width: 1px; height: 1px; margin: -1px; opacity: 0; pointer-events: none; }
.f5-tablist {
  display: flex; gap: 8px; margin: 0 -18px 22px; padding: 4px 18px 8px; overflow-x: auto; scroll-snap-type: x proximity;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.f5-tablist::-webkit-scrollbar { display: none; }
.f5-tab {
  flex: 0 0 auto; scroll-snap-align: start; display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 16px; border-radius: 999px; cursor: pointer; user-select: none;
  font-size: 15px; font-weight: 650; color: var(--ink-2); background: var(--surface); border: 1px solid var(--line-2);
  transition: background .2s, color .2s, border-color .2s, box-shadow .2s;
}
.f5-tab i { color: var(--primary); }
.f5-tab:hover { border-color: var(--primary); }
.f5-panel { display: none; }
#f5t-list:checked ~ .f5-panel-list,
#f5t-sell:checked ~ .f5-panel-sell,
#f5t-buyers:checked ~ .f5-panel-buyers,
#f5t-ship:checked ~ .f5-panel-ship,
#f5t-live:checked ~ .f5-panel-live,
#f5t-profit:checked ~ .f5-panel-profit { display: block; animation: f5Fade .35s ease; }
#f5t-list:checked ~ .f5-tablist .f5-tab-list,
#f5t-sell:checked ~ .f5-tablist .f5-tab-sell,
#f5t-buyers:checked ~ .f5-tablist .f5-tab-buyers,
#f5t-ship:checked ~ .f5-tablist .f5-tab-ship,
#f5t-live:checked ~ .f5-tablist .f5-tab-live,
#f5t-profit:checked ~ .f5-tablist .f5-tab-profit { color: #fff; background: var(--ink); border-color: var(--ink); box-shadow: 0 10px 20px -12px rgba(11, 16, 32, .6); }
#f5t-list:checked ~ .f5-tablist .f5-tab-list i,
#f5t-sell:checked ~ .f5-tablist .f5-tab-sell i,
#f5t-buyers:checked ~ .f5-tablist .f5-tab-buyers i,
#f5t-ship:checked ~ .f5-tablist .f5-tab-ship i,
#f5t-live:checked ~ .f5-tablist .f5-tab-live i,
#f5t-profit:checked ~ .f5-tablist .f5-tab-profit i { color: #67E8F9; }
#f5t-list:focus-visible ~ .f5-tablist .f5-tab-list,
#f5t-sell:focus-visible ~ .f5-tablist .f5-tab-sell,
#f5t-buyers:focus-visible ~ .f5-tablist .f5-tab-buyers,
#f5t-ship:focus-visible ~ .f5-tablist .f5-tab-ship,
#f5t-live:focus-visible ~ .f5-tablist .f5-tab-live,
#f5t-profit:focus-visible ~ .f5-tablist .f5-tab-profit { outline: 2px solid var(--focus); outline-offset: 2px; }
@keyframes f5Fade { from { opacity: 0; transform: translateY(6px); } }
.f5-panel-h { margin-bottom: 16px; }
.f5-panel-h h3 { margin: 0 0 4px; font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); font-weight: 800; letter-spacing: -.03em; color: var(--ink); }
.f5-panel-h p { margin: 0; font-size: 15.5px; color: var(--muted); }
.f5-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
.f5-card {
  display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.f5-card:hover { border-color: color-mix(in srgb, var(--primary) 35%, var(--line)); box-shadow: var(--shadow); transform: translateY(-2px); }
.f5-card .ic { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; font-size: 17px; color: var(--primary-ink); background: #EEF0FF; }
.f5-card h4 { margin: 2px 0 4px; font-size: 16px; font-weight: 750; letter-spacing: -.01em; color: var(--ink); }
.f5-card p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
@media (min-width: 640px) { .f5-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .f5-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .f5-tablist { margin-inline: 0; padding-inline: 0; flex-wrap: wrap; justify-content: center; overflow: visible; } }
.f5-base { list-style: none; margin: 28px 0 0; padding: 18px; display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); border-radius: 18px; background: var(--surface); border: 1px dashed var(--line-2); }
.f5-base li { display: flex; gap: 12px; align-items: flex-start; }
.f5-base i { flex: none; margin-top: 3px; width: 20px; text-align: center; color: var(--primary); }
.f5-base b { display: block; font-size: 14.5px; color: var(--ink); }
.f5-base span { font-size: 13.5px; color: var(--muted); }
@media (min-width: 640px) { .f5-base { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .f5-base { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ── Spotlights ─────────────────────────────────────────────────────── */
.f5-spot { padding: clamp(64px, 9vw, 112px) 0; background: var(--bg); scroll-margin-top: var(--head-h, 64px); }
.f5-spot.f5-alt { background: var(--bg-alt); }
.f5-split { display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; grid-template-columns: minmax(0, 1fr); }
.f5-copy > p:not(.f5-label) { margin: 0; font-size: clamp(1rem, .96rem + .25vw, 1.12rem); line-height: 1.65; color: var(--muted); }
.f5-win { margin: 0; min-width: 0; }
.f5-win > div:not(.f5-bar), .f5-win .f5-bar { max-width: 560px; margin-inline: auto; }
@media (min-width: 960px) {
  .f5-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .f5-split.rev .f5-copy { order: 2; }
}
/* a window: bar + body */
.f5-bar {
  display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 16px 16px 0 0;
  background: rgba(255, 255, 255, .07); border: 1px solid var(--line); border-bottom: 0;
}
.f5-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .22); }
.f5-bar span { margin-left: 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--faint); }
.f5-win > div:not(.f5-bar) {
  padding: 18px; border-radius: 0 0 16px 16px; border: 1px solid var(--line); background: rgba(255, 255, 255, .04); box-shadow: var(--win-shadow);
}
.f5-win.light .f5-bar { background: #EEF0F7; border-color: #E2E6F0; }
.f5-win.light .f5-bar i { background: #CBD2E2; }
.f5-win.light > div:not(.f5-bar) { background: #fff; border-color: #E2E6F0; }
.f5-win .f5-note { text-align: center; }
.f5 .pill { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line); white-space: nowrap; }
.f5 .pill.warn { color: #B45309; background: #FEF3C7; border-color: #FDE68A; }
.f5-ink .pill.warn { color: #FCD34D; background: rgba(245, 158, 11, .14); border-color: rgba(245, 158, 11, .3); }

/* offer desk */
.f5-offer .row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; color: var(--ink-2); }
.f5-offer .row.top { padding-top: 0; }
.f5-offer .row b { color: var(--ink); }
.f5-offer .ok { color: #34D399; }
.f5-range { padding: 16px 0 6px; }
.f5-range .track { position: relative; display: block; height: 8px; border-radius: 8px; background: linear-gradient(90deg, rgba(248, 113, 113, .35), rgba(52, 211, 153, .45) 50%, rgba(99, 102, 241, .45)); }
.f5-range .mark { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; border: 2px solid #0B1020; }
.f5-range .offer, .f5-range .legend .offer { background: #FCA5A5; }
.f5-range .mkt, .f5-range .legend .mkt { background: #34D399; }
.f5-range .list, .f5-range .legend .list { background: #A5B4FC; }
.f5-range .legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; font-size: 12.5px; color: var(--muted); }
.f5-range .legend i { display: inline-block; width: 9px; height: 9px; margin-right: 5px; border-radius: 50%; }
.f5-offer .hint { margin: 10px 0 14px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.f5-offer .hint i { color: #67E8F9; margin-right: 4px; }
.f5-offer .acts { display: flex; flex-wrap: wrap; gap: 8px; }
.f5-offer .b { padding: 9px 14px; border-radius: 10px; font-size: 14px; font-weight: 700; color: var(--ink); border: 1px solid var(--line-2); }
.f5-offer .b.ok { color: #04130D; background: #34D399; border-color: transparent; }
.f5-offer .b.pri { color: #fff; background: linear-gradient(135deg, #6366F1, #A855F7); border-color: transparent; }

/* shipping queue (light window) */
.f5-queue { color: #2A3350; }
.f5-queue .stats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; font-size: 13px; }
.f5-queue .stats span { padding: 5px 10px; border-radius: 9px; background: #F5F6FB; border: 1px solid #E6E8F2; }
.f5-queue .stats .bad { color: #B91C1C; background: #FEF2F2; border-color: #FECACA; }
.f5-queue .stats .warn { color: #B45309; background: #FFFBEB; border-color: #FDE68A; }
.f5-queue .q { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid #EEF0F6; }
.f5-queue .q b { font-size: 14.5px; color: #0B1020; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f5-queue .q small { grid-row: 2; font-size: 12.5px; color: #5B6584; }
.f5-queue .q .pill { grid-row: 1 / span 2; grid-column: 2; }
.f5-queue .rate { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 12px; padding: 12px; border-radius: 12px; border: 2px solid #6366F1; background: #F5F6FF; font-size: 13.5px; }
.f5-queue .rate b { margin-left: auto; font-size: 16px; color: #0B1020; }
.f5-queue .rate em { font-style: normal; font-size: 12px; font-weight: 700; color: #047857; }
.f5-queue .buy { margin-top: 10px; padding: 11px; border-radius: 11px; text-align: center; font-weight: 700; color: #fff; background: linear-gradient(135deg, #6366F1, #A855F7); }

/* live show */
.f5-show .hd { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px solid var(--line); color: var(--ink); }
.f5-show .rec { width: 10px; height: 10px; border-radius: 50%; background: #F43F5E; box-shadow: 0 0 0 4px rgba(244, 63, 94, .2); animation: f5Rec 1.6s ease-in-out infinite; }
.f5-show .tot { margin-left: auto; font-weight: 800; color: #34D399; }
.f5-show .sale { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.f5-show .sale:last-child { border-bottom: 0; }
.f5-show .lot { font-family: var(--mono, monospace); font-size: 12.5px; font-weight: 700; color: #F9A8D4; }
.f5-show .sale b { display: block; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f5-show .sale small { color: var(--muted); font-size: 12.5px; }
.f5-show .bin { padding: 3px 8px; border-radius: 8px; font-size: 12px; font-weight: 700; color: #C4B5FD; background: rgba(168, 85, 247, .14); }
.f5-show .p { font-weight: 750; color: var(--ink); }
.f5-show .sale > i { color: #67E8F9; }
.f5-spot.f5-alt .f5-win > div:not(.f5-bar) { background: #0F1630; border-color: rgba(148, 163, 184, .18); }
.f5-spot.f5-alt .f5-win .f5-bar { background: #1A2240; border-color: rgba(148, 163, 184, .18); }
.f5-spot.f5-alt .f5-win .f5-bar span { color: #A3ADCA; }
.f5-spot.f5-alt .f5-win .f5-bar i { background: rgba(255, 255, 255, .22); }
.f5-spot.f5-alt .f5-show { --ink: #F5F7FF; --ink-2: #CDD4EA; --muted: #A3ADCA; --line: rgba(148, 163, 184, .18); }
@keyframes f5Rec { 50% { opacity: .35; } }

/* profit */
.f5-profit .kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.f5-profit .kpis div { padding: 12px; border-radius: 12px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line); }
.f5-profit .kpis small { display: block; font-size: 12.5px; color: var(--muted); }
.f5-profit .kpis b { font-size: clamp(1.05rem, .95rem + .5vw, 1.35rem); letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.f5-profit .kpis .hi { background: rgba(52, 211, 153, .1); border-color: rgba(52, 211, 153, .35); }
.f5-profit .kpis .hi b { color: #34D399; }
.f5-profit .chart { display: block; width: 100%; height: 110px; margin: 14px 0 10px; }
.f5-profit .by { display: flex; flex-wrap: wrap; gap: 8px; }
.f5-profit .by span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 9px; font-size: 13px; color: var(--ink-2); background: rgba(255, 255, 255, .05); border: 1px solid var(--line); }
.f5-profit .by img { width: 16px; height: 16px; border-radius: 4px; background: #fff; padding: 1px; }
.f5-profit .by b { color: #34D399; }
@media (min-width: 560px) { .f5-profit .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ── Pricing / FAQ (home.css styles them; spacing for this page) ────── */
.f5-pricing, .f5-faq { scroll-margin-top: var(--head-h, 64px); }

/* ── Final CTA ──────────────────────────────────────────────────────── */
.f5-final { padding: clamp(72px, 10vw, 128px) 0; text-align: center; }
.f5-final-in { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; }
.f5-bot { display: block; margin: 0 auto 18px; filter: drop-shadow(0 12px 28px rgba(99, 102, 241, .55)); animation: f5Float 4s ease-in-out infinite; }
.f5-final h2 { margin: 0 0 14px; color: #fff; font-weight: 850; letter-spacing: -.045em; line-height: 1.04; font-size: clamp(2rem, 1.3rem + 3vw, 3.6rem); text-wrap: balance; }
.f5-final p { margin: 0 auto 26px; max-width: 58ch; font-size: clamp(1rem, .96rem + .3vw, 1.15rem); line-height: 1.6; color: #C3CBE4; }
.f5-final .f5-small { margin: 18px 0 0; font-size: 14px; color: #A3ADCA; }
.f5-final .f5-small a { color: #A5F3FC; }
@keyframes f5Float { 50% { transform: translateY(-8px); } }

/* Phones: room for the sticky trial bar under the last content. */
@media (max-width: 767px) { body.f5 .site-foot { padding-bottom: calc(84px + env(safe-area-inset-bottom)); } }

/* ── Motion off ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .f5-phone .scan, .f5-show .rec, .f5-bot { animation: none; }
  .f5-phone .scan { display: none; }
  .f5-live li, .f5-panel { animation: none !important; }
  .f5-card:hover { transform: none; }
}