/* =========================================================================
   THE FACTORY — production stylesheet (mobile + desktop, one codebase)
   Load order: fonts/fonts.css → factory.css
   Class prefix: .f-   ·  Breakpoints: 768px (mobile→desktop), 900px, 1180px
   All values below are the exact values used in the design files.
   ========================================================================= */

:root{
  /* Surfaces */
  --bg:#130b09;            /* app background */
  --bg-deep:#0c0605;       /* outside-app / overlay base */
  --bar:#160c0a;           /* tab bar, bottom action bar */
  --header:#150805;        /* desktop header */
  --card:#1f110d;          /* list rows, info cards */
  --card-2:#1a0e0b;        /* detail panel, step cards */
  --card-press:#2a1712;    /* hover / pressed / chip bg */
  --card-sel:#2e1913;      /* selected row (desktop) */
  --sheet:#1d0f0b;         /* bottom sheet */
  --input:#1e0b08;         /* text input on launch form */
  --track:#3a2219;         /* progress track */
  /* Lines */
  --line:#4e3222; --line-2:#5c402d; --line-3:#624c35; --line-4:#33201a; --line-bar:#4a2f20;
  --brass:#d38a4b;         /* premium card border */
  --brass-dim:#995b38; --copper:#b56c43; --rust-border:#8f4b2a; --header-rule:#c77b39;
  /* Ink */
  --ink:#fff0cf;           /* primary text */
  --ink-2:#f5dfb9;         /* section titles */
  --ink-3:#e8c99a; --ink-4:#c8ae92; --ink-5:#a98f75; --ink-6:#9b846a; --ink-7:#7d6450; --ink-off:#8a7058;
  --tan:#dbb089; --tan-2:#cda57d; --cream-hot:#ffdb96; --cream-btn:#ffe0a4; --label:#ffe0ac;
  /* Accents */
  --gold:#f3ba62;          /* primary CTA, active chip */
  --gold-hi:#f8b764;       /* italic "it." */
  --gold-ring:#f4c272;     /* brand sigil, step numerals */
  --gold-label:#ffc37a;    /* eyebrow labels */
  --cta-shadow:#8d381b;    /* hard drop under gold buttons */
  --cta-ink:#391309;       /* text on gold */
  --red:#a6201b;           /* hype strip */
  --oxblood:#8f1b15;       /* hazard stripe */
  --furnace:#c2461f;       /* burn progress */
  --up:#6fd08c; --down:#ff6b57; --sell-cta:#ff8a70; --err-text:#ff8a70;
  --warn-bg:#4b1710; --warn-border:#d17e4d; --warn-ink:#ffdfac;
  --toast:#2a1712; --toast-err:#5a1a12;
  /* Type */
  --f-sans:Archivo,Arial,sans-serif;
  --f-serif:"Bodoni Moda",Georgia,serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  /* Radii */
  --r-xs:2px; --r-sm:3px; --r-md:4px; --r-lg:5px; --r-sheet:20px; --r-pill:30px;
  /* Shadows */
  --sh-cta:0 5px 0 var(--cta-shadow);
  --sh-cta-sm:0 3px 0 var(--cta-shadow);
  --sh-card:0 16px 45px #000a;
  --sh-toast:0 12px 30px #000a;
  /* Signature textures */
  --hazard:repeating-linear-gradient(90deg,#e4ad61 0 24px,var(--oxblood) 24px 48px);
  --hazard-sm:repeating-linear-gradient(90deg,#e4ad61 0 18px,var(--oxblood) 18px 36px);
  --brass-fill:linear-gradient(145deg,#3e1712,#1b0b09 85%);
  --progress-fill:repeating-linear-gradient(90deg,var(--gold) 0 10px,#e4a24c 10px 20px);
  /* Layout */
  --pad-m:16px; --pad-d:32px; --maxw:1440px; --tabbar-h:84px; --header-h:72px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;min-width:320px}
body{margin:0;background:var(--bg);color:#f2e7d0;font-family:var(--f-sans);font-synthesis:none;-webkit-font-smoothing:antialiased}
button,input{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0}
input{outline:none}
input::placeholder{color:var(--ink-7)}
a{color:var(--gold)} a:hover{color:var(--cream-hot)}
:focus-visible{outline:2px solid #e7bb6b;outline-offset:3px}
@keyframes f-belt{to{transform:translateX(-50%)}}
@keyframes f-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ---------- Type roles ---------- */
.f-display{font:700 38px/.9 var(--f-serif);letter-spacing:-.05em;color:var(--ink);white-space:nowrap;text-shadow:0 3px 16px #000a}
.f-display em{font-style:italic;color:var(--gold-hi)}
.f-h1{font:700 30px/1 var(--f-serif);letter-spacing:-.03em;color:var(--ink)}
.f-h2{font:700 28px var(--f-serif);letter-spacing:-.03em;color:var(--ink-2)}
.f-h3{font:700 20px var(--f-serif);color:var(--ink-2)}
.f-num-xl{font:800 34px/1 var(--f-sans);letter-spacing:-.02em;color:var(--ink)}
.f-num-l{font:800 19px var(--f-sans);color:var(--cream-hot)}
.f-stat{font:700 18px var(--f-serif);color:var(--ink)}
.f-body{font:500 12px/1.45 var(--f-sans);color:#b9a48a}
.f-eyebrow{font:700 11px var(--f-mono);letter-spacing:.17em;color:var(--gold-label);text-transform:uppercase}
.f-label{font:600 8.5px var(--f-mono);letter-spacing:.12em;color:#a98654;text-transform:uppercase}
.f-meta{font:500 11px var(--f-mono);color:var(--ink-6)}
.f-up{color:var(--up)} .f-down{color:var(--down)}

/* ---------- Brand ---------- */
.f-brand{display:flex;align-items:center;gap:10px;white-space:nowrap}
.f-sigil{width:34px;height:34px;border-radius:50%;border:2px solid var(--gold-ring);display:grid;place-items:center;color:var(--gold-ring);font:700 17px var(--f-serif)}
.f-brand__name{display:block;font:700 17px/1 var(--f-serif);color:#f1ddb3}
.f-brand__tag{display:block;margin-top:3px;font:600 7.5px var(--f-mono);letter-spacing:.26em;color:#a98654}

/* ---------- Buttons ---------- */
.f-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;text-transform:uppercase;border-radius:var(--r-sm);font:800 15px var(--f-sans);transition:transform .12s,box-shadow .12s,background .12s}
.f-btn--gold{background:var(--gold);border:2px solid var(--cream-btn);color:var(--cta-ink);box-shadow:var(--sh-cta);min-height:52px;padding:0 20px}
.f-btn--gold:hover{background:#ffcf82}
.f-btn--gold:active{transform:translateY(3px);box-shadow:0 2px 0 var(--cta-shadow)}
.f-btn--gold:disabled,.f-btn[aria-disabled=true]{opacity:.45;pointer-events:none}
.f-btn--sm{min-height:0;padding:9px 14px;font-size:12px;box-shadow:0 4px 0 var(--cta-shadow)}
.f-btn--ghost{background:transparent;border:2px solid var(--copper);color:var(--label);min-height:52px;padding:0 20px}
.f-btn--sell{background:var(--sell-cta);border:2px solid var(--cream-btn);color:var(--cta-ink);box-shadow:var(--sh-cta);min-height:56px}
.f-btn--block{width:100%}
.f-iconbtn{width:38px;height:38px;border-radius:50%;border:1px solid var(--line-3);background:var(--card);color:#f3d7a5;display:grid;place-items:center;font:600 20px var(--f-sans)}
.f-wallet{display:flex;align-items:center;gap:7px;border:1px solid var(--line-3);border-radius:40px;padding:7px 11px;font:600 11px var(--f-mono);color:#f3d7a5;white-space:nowrap}
.f-wallet::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--up)}

/* ---------- Chips / segmented ---------- */
.f-chips{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none}
.f-chip{flex:none;white-space:nowrap;padding:7px 12px;border-radius:var(--r-pill);border:1px solid var(--line-3);color:#d6c19c;font:700 11px var(--f-mono);letter-spacing:.04em}
.f-chip[aria-pressed=true]{background:var(--gold);border-color:var(--gold);color:var(--cta-ink)}
.f-seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--bg);border-radius:var(--r-md);padding:3px}
.f-seg button{height:38px;border-radius:var(--r-sm);font:800 13px var(--f-sans);color:var(--ink-5)}
.f-seg button[aria-pressed=true].is-buy{background:var(--gold);color:var(--cta-ink)}
.f-seg button[aria-pressed=true].is-sell{background:var(--down);color:#2a0806}
.f-range{display:flex;gap:4px}
.f-range button{flex:1;min-width:48px;padding:7px 0;border-radius:var(--r-sm);font:700 11px var(--f-mono);color:var(--ink-off)}
.f-range button[aria-pressed=true]{background:var(--track);color:var(--cream-hot)}

/* ---------- Hype strip (marquee) ---------- */
.f-hype{height:30px;overflow:hidden;display:flex;align-items:center;background:var(--red);color:#fff0c9;border-block:1px solid #e2a451;font:700 10px var(--f-mono);letter-spacing:.14em;white-space:nowrap}
.f-hype__track{display:flex;min-width:max-content;animation:f-belt 26s linear infinite}
/* Track contains the phrase duplicated twice so translateX(-50%) loops seamlessly:
   "TINY POOLS ✦ BIG MOVES ✦ 3% BURNS CUCK ✦ GRADUATES AT $100 ✦ ROBINHOOD CHAIN ✦ " ×4 */

/* ---------- Hero banner (floor) ---------- */
.f-hero{position:relative;height:208px;border-radius:6px;border:2px solid var(--rust-border);overflow:hidden;background:#1d0805 url(assets/factory-hero.webp) 62% center/cover}
.f-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#1b0806f2 0%,#1b0806b0 50%,#1b080610 100%)}
.f-hero::after{content:"";position:absolute;inset:0 0 auto;height:5px;background:var(--hazard-sm)}
.f-hero__body{position:relative;height:100%;padding:26px 18px;display:flex;flex-direction:column;justify-content:center;gap:12px}
.f-hero__lines{display:flex;flex-direction:column;gap:3px;font:700 13px/1.35 var(--f-sans);color:#f6d6a4;text-shadow:0 2px 10px #000}

/* ---------- Stats strip ---------- */
.f-stats{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line-2);border-radius:var(--r-md);background:#1b0e0b}
.f-stats>div{padding:11px 12px;display:flex;flex-direction:column;gap:4px}
.f-stats>div+div{border-left:1px solid var(--line-2)}

/* ---------- Coin avatar ---------- */
.f-avatar{flex:none;width:42px;height:42px;border-radius:50%;overflow:hidden;display:grid;place-items:center;border:1.5px solid #e2a45166;font:700 15px var(--f-serif);color:var(--ink);background:var(--avatar-bg,#8e241a)}
.f-avatar img{width:100%;height:100%;object-fit:cover}
/* No image → show first 2 chars of ticker on --avatar-bg (per-coin color). */

/* ---------- Coin row ---------- */
.f-coin{display:flex;flex-direction:column;gap:10px;width:100%;text-align:left;padding:12px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg)}
.f-coin:hover,.f-coin:active{background:var(--card-press)}
.f-coin[aria-current=true]{background:var(--card-sel);border-color:var(--brass)}
.f-coin__top{display:flex;align-items:center;gap:11px}
.f-coin__id{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.f-coin__name{font:700 15px var(--f-sans);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.f-coin__sub{font:500 11px var(--f-mono);color:var(--ink-5)}
.f-coin__spark{flex:none;width:54px;height:24px} /* polyline, stroke 1.6, color = up/down, log-scaled last 24 points */
.f-coin__val{display:flex;flex-direction:column;align-items:flex-end;gap:3px;min-width:62px}
.f-coin__fdv{font:700 14px var(--f-sans);color:var(--ink)}
.f-coin__chg{font:700 11px var(--f-mono)}
.f-coin__foot{display:flex;align-items:center;gap:10px}
.f-badge-new{font:700 8px var(--f-mono);background:var(--gold);color:var(--cta-ink);padding:2px 4px;border-radius:var(--r-xs)}
.f-bar{flex:1;height:5px;border-radius:3px;background:var(--track);overflow:hidden}
.f-bar>span{display:block;height:100%;background:var(--gold)}
.f-bar--pool>span{background:var(--up)}
.f-bar--lg{height:8px;border-radius:4px}.f-bar--lg>span{background:var(--progress-fill)}
.f-status{font:600 9.5px var(--f-mono);letter-spacing:.06em;white-space:nowrap;color:var(--ink-3)}
.f-status--pool{color:var(--up)}

/* ---------- Status badge ---------- */
.f-pill{font:700 9px var(--f-mono);letter-spacing:.1em;padding:5px 8px;border-radius:var(--r-sm);white-space:nowrap}
.f-pill--pool{background:#1f4a33;color:var(--up)}
.f-pill--curve{background:#4b2a12;color:var(--gold)}

/* ---------- Cards ---------- */
.f-card{padding:13px 14px;border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--card)}
.f-card--brass{position:relative;padding:14px;border:2px solid var(--brass);background:var(--brass-fill)}
.f-card--hazard::before{content:"";position:absolute;top:-2px;left:22px;right:22px;height:5px;background:var(--hazard)}
.f-warn{padding:11px 12px;border-radius:var(--r-md);background:var(--warn-bg);border:1px solid var(--warn-border);font:600 12px/1.45 var(--f-sans);color:var(--warn-ink)}

/* ---------- Chart ---------- */
.f-chart{display:block;width:100%;height:170px} /* SVG viewBox 0 0 390 170, preserveAspectRatio=none, 14px vertical pad, log Y scale.
   Line: stroke 2 (vector-effect:non-scaling-stroke), color up/down by range change.
   Area: same path closed to bottom, vertical gradient color@.28 → color@0. */

/* ---------- Trades table ---------- */
.f-trades{display:flex;flex-direction:column}
.f-trade{display:grid;grid-template-columns:44px 1fr auto auto;gap:10px;align-items:center;padding:9px 0;border-top:1px solid var(--line-4);font:500 11.5px var(--f-mono);color:#e8d4b4}
.f-trade__ago{color:var(--ink-7);min-width:30px;text-align:right}
.f-trade--you .f-trade__who{color:var(--gold)}

/* ---------- Trade form (sheet on mobile, panel on desktop) ---------- */
.f-trade-form{display:flex;flex-direction:column;gap:14px}
.f-amount{display:flex;align-items:center;height:62px;padding:0 14px;border:1px solid var(--copper);border-radius:var(--r-md);background:var(--bg)}
.f-amount input{flex:1;min-width:0;border:0;background:transparent;color:#fff1d3;font:800 28px var(--f-sans)}
.f-amount__unit{font:700 14px var(--f-mono);color:var(--gold)}
.f-quick{display:flex;gap:7px}
.f-quick button{flex:1;height:34px;border-radius:var(--r-pill);border:1px solid var(--line-3);background:var(--card-press);color:#f3d7a5;font:700 11.5px var(--f-mono);white-space:nowrap}
.f-qline{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.f-qline__k{font:600 13px var(--f-sans);color:var(--ink-4)}
.f-qline--sub{font:500 11.5px var(--f-mono);color:var(--ink-6)}
.f-impact{font:800 22px var(--f-sans)} /* color: |impact|≤15% up · ≤50% gold · >50% down */

/* ---------- Bottom sheet (mobile) ---------- */
.f-scrim{position:fixed;inset:0;background:#0a0403cc;opacity:0;pointer-events:none;transition:opacity .25s;z-index:20}
.f-scrim.is-open{opacity:1;pointer-events:auto}
.f-sheet{position:fixed;left:0;right:0;bottom:0;z-index:21;transform:translateY(105%);transition:transform .32s cubic-bezier(.2,.8,.2,1);background:var(--sheet);border-top:2px solid var(--brass);border-radius:var(--r-sheet) var(--r-sheet) 0 0;padding:10px 18px calc(34px + env(safe-area-inset-bottom));max-height:92dvh;overflow-y:auto}
.f-sheet.is-open{transform:none}
.f-sheet__grab{width:40px;height:4px;border-radius:2px;background:var(--line-2);margin:0 auto 14px}

/* ---------- Launch form ---------- */
.f-launch-hero{position:relative;height:300px;background:#1d0805 url(assets/launch-machine.jpg) 64% top/cover}
.f-launch-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#1d080520 0%,#1d080540 45%,var(--bg) 100%)}
.f-launch-hero__title{position:absolute;z-index:1;left:18px;bottom:28px;display:flex;flex-direction:column;gap:8px}
.f-launch-hero .f-display{font-size:44px;letter-spacing:-.06em}
.f-launch-card{position:relative;margin:-6px var(--pad-m) 24px;padding:22px 16px 18px;background:var(--brass-fill);border:2px solid var(--brass);border-radius:var(--r-md);box-shadow:var(--sh-card);display:flex;flex-direction:column;gap:16px}
.f-launch-card::before{content:"";position:absolute;top:-2px;left:22px;right:22px;height:5px;background:var(--hazard)}
.f-upload{display:flex;align-items:center;gap:14px;padding:10px;background:#5b2418a3;border:2px dashed #e2a560;border-radius:var(--r-md);color:#ffe2ad;text-align:left}
.f-upload__thumb{width:62px;height:62px;flex:none;border-radius:var(--r-sm);overflow:hidden;display:grid;place-items:center;background:#b34226;color:#ffe4aa;font:400 34px var(--f-sans)}
.f-field{display:flex;flex-direction:column;gap:7px}
.f-field__label{font:700 11px var(--f-mono);color:var(--label)}
.f-input{height:50px;width:100%;padding:0 12px;border:1px solid var(--copper);border-radius:var(--r-sm);background:var(--input);color:#fff1d3;font:600 15px var(--f-sans)}
.f-input:focus,.f-input:focus-within{border-color:#ffd38e}
.f-input[aria-invalid=true],.f-upload[aria-invalid=true]{border-color:var(--down)}
.f-input--ticker{display:flex;align-items:center;gap:3px}
.f-input--ticker::before{content:"$";color:#e0a868;font-weight:700}
.f-input--ticker input{width:100%;border:0;background:transparent;font:700 15px var(--f-sans);letter-spacing:.03em}
.f-fields{display:grid;grid-template-columns:1fr 1.3fr;gap:12px}
.f-pairs{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--brass-dim);border-radius:var(--r-sm);overflow:hidden}
.f-pairs button{height:40px;background:var(--input);color:var(--ink-3);font:700 12px var(--f-mono)}
.f-pairs button[aria-pressed=true]{background:var(--gold);color:var(--cta-ink)}
.f-terms{display:flex;flex-wrap:wrap;gap:6px 14px;font:700 11.5px/1.4 var(--f-sans);color:#ffe2b3}
.f-terms span+span::before{content:"·";margin-right:14px;color:#9b7751}
.f-launch-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:16px;border-top:1px solid var(--brass-dim)}

/* ---------- Launch overlay ---------- */
.f-pressing{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;padding:0 36px;background:linear-gradient(180deg,#130b09ee,var(--bg)),url(assets/launch-machine.jpg) center/cover}
.f-pressing__gear{width:96px;height:96px;border-radius:50%;border:6px dashed var(--gold);box-shadow:0 0 0 6px var(--oxblood),0 0 40px #f3ba6255;animation:f-spin 2.4s linear infinite}
.f-pressing__step{display:flex;align-items:center;gap:12px;font:600 13px var(--f-mono);color:#6d5544}
.f-pressing__step::before{content:"";width:10px;height:10px;transform:rotate(45deg);background:var(--track);flex:none}
.f-pressing__step.is-active{color:var(--ink)}.f-pressing__step.is-active::before{background:var(--gold)}
.f-pressing__step.is-done{color:var(--ink)}.f-pressing__step.is-done::before{background:var(--up)}

/* ---------- Toast ---------- */
.f-toast{position:fixed;z-index:60;left:14px;right:14px;top:calc(12px + env(safe-area-inset-top));padding:12px 14px;border-radius:6px;background:var(--toast);border:1px solid #e2a451;color:var(--ink);font:600 13px/1.4 var(--f-sans);box-shadow:var(--sh-toast)}
.f-toast--error{background:var(--toast-err)}

/* ---------- Mobile tab bar ---------- */
.f-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:10;height:calc(var(--tabbar-h) + env(safe-area-inset-bottom));padding:8px 0 env(safe-area-inset-bottom);display:grid;grid-template-columns:repeat(3,1fr);align-items:start;background:var(--bar);border-top:1px solid var(--line-bar)}
.f-tab{display:flex;flex-direction:column;align-items:center;gap:5px;color:var(--ink-off);font:700 10px var(--f-mono);letter-spacing:.08em}
.f-tab[aria-current=page]{color:var(--cream-hot)}
.f-tab__icon{width:26px;height:26px;display:grid;place-items:center;font:700 18px/1 var(--f-sans)}
.f-tab--launch .f-tab__icon{width:50px;height:50px;margin-top:-24px;border-radius:50%;background:var(--gold);border:2px solid var(--cream-btn);color:var(--cta-ink);font-size:28px;box-shadow:0 4px 0 var(--cta-shadow),0 8px 20px #000a}
.f-actionbar{position:fixed;left:0;right:0;bottom:0;z-index:10;display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px 16px calc(30px + env(safe-area-inset-bottom));background:var(--bar);border-top:1px solid var(--line-bar)}

/* ---------- Desktop header ---------- */
.f-header{position:sticky;top:0;z-index:30;height:var(--header-h);background:var(--header);border-bottom:2px solid var(--header-rule)}
.f-header__in{max-width:var(--maxw);margin:0 auto;height:100%;padding:0 24px;display:flex;align-items:center;gap:28px;white-space:nowrap}
.f-nav{display:flex;gap:22px;height:100%}
.f-nav a,.f-nav button{height:100%;display:flex;align-items:center;border-bottom:2px solid transparent;color:#b9a48a;text-decoration:none;font:600 14px var(--f-sans)}
.f-nav [aria-current=page]{color:var(--cream-hot);border-color:#cc9b54}
.f-header__right{margin-left:auto;display:flex;align-items:center;gap:12px}
.f-net{display:flex;align-items:center;gap:8px;border:1px solid var(--line-3);border-radius:40px;padding:8px 12px;font:700 10px var(--f-mono);letter-spacing:.08em;color:#d6c19c}
.f-footer{margin-top:auto;background:#170806;border-top:1px solid var(--line-bar)}
.f-footer__in{max-width:var(--maxw);margin:0 auto;padding:22px 32px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 20px;font:600 11px var(--f-mono);color:var(--ink-6);letter-spacing:.04em}

/* =========================================================================
   LAYOUT + RESPONSIVENESS
   ========================================================================= */
.f-app{min-height:100dvh;display:flex;flex-direction:column;background:radial-gradient(circle at 80% 2%,#39191155,transparent 38%),var(--bg)}
.f-page{width:100%;margin:0 auto}

/* ---- MOBILE: 320–767px (designed at 390×844) ---- */
.f-header,.f-footer,.f-only-desktop{display:none}
.f-mobile-top{display:flex;align-items:center;justify-content:space-between;padding:calc(6px + env(safe-area-inset-top)) var(--pad-m) 12px}
.f-page{padding:0 var(--pad-m) calc(var(--tabbar-h) + 24px + env(safe-area-inset-bottom))}
.f-page--coin{padding-bottom:calc(110px + env(safe-area-inset-bottom))}
.f-page--bleed{padding-left:0;padding-right:0}       /* launch + burn screens: hero image is full-bleed, runs under the status bar */
.f-display{font-size:clamp(30px,9.8vw,38px)}         /* "Hyperlaunch it." ALWAYS one line */
.f-launch-hero .f-display{font-size:clamp(34px,11.3vw,44px)}
.f-mobile-stack{display:flex;flex-direction:column;gap:12px}
.f-trade-panel{display:none}                         /* desktop-only inline panel; mobile uses .f-sheet */
@media (max-width:359px){                            /* iPhone SE 1st gen / small Android */
  :root{--pad-m:12px}
  .f-stats .f-stat{font-size:15px}
  .f-coin__spark{display:none}
  .f-fields{grid-template-columns:1fr}
  .f-launch-foot{flex-direction:column;align-items:stretch}
}
@media (min-width:560px) and (max-width:767px){       /* large phones landscape / small tablets */
  .f-page,.f-mobile-top{max-width:560px;margin:0 auto}
  .f-sheet{left:50%;width:560px;margin-left:-280px}
}

/* ---- DESKTOP: ≥768px ---- */
@media (min-width:768px){
  .f-header,.f-footer{display:block}
  .f-only-desktop{display:revert}
  .f-tabbar,.f-actionbar,.f-mobile-top,.f-sheet,.f-scrim,.f-only-mobile{display:none!important}
  .f-hype{height:36px;font-size:11px;letter-spacing:.15em;border-top:0;border-bottom-width:2px}
  .f-page{max-width:var(--maxw);padding:24px var(--pad-d) 64px;display:flex;flex-direction:column;gap:20px}
  .f-toast{left:auto;top:auto;right:28px;bottom:28px;max-width:420px;font-size:14px}

  /* hero + stats row: side by side ≥ 900, stacked below */
  .f-top{display:grid;grid-template-columns:1fr;gap:16px}
  .f-hero{height:230px;border-radius:var(--r-lg);background-position:70% 30%}
  .f-hero::before{background:linear-gradient(90deg,#1b0806f5 0%,#1b0806c0 40%,#1b080600 75%)}
  .f-hero::after{background:var(--hazard)}
  .f-hero__body{padding:34px 36px;gap:14px}
  .f-hero .f-display{font-size:clamp(40px,4.4vw,64px);letter-spacing:-.06em}
  .f-hero__lines{font-size:16px}
  .f-stats{grid-template-columns:1fr 1fr;border-radius:var(--r-lg)}
  .f-stats>div{padding:20px 22px;justify-content:center;gap:6px}
  .f-stats>div+div{border-left:0}
  .f-stats>div:nth-child(odd){border-right:1px solid var(--line-2)}
  .f-stats>div:nth-child(-n+2){border-bottom:1px solid var(--line-2)}
  .f-stats .f-label{font-size:10px;letter-spacing:.14em}
  .f-stats .f-stat{font-size:32px}

  /* market: 768–899 single column (list → detail → trade panel) */
  .f-market{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
  .f-chips{flex-wrap:wrap;overflow:visible}
  .f-detail{min-width:0;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card-2);overflow:hidden}
  .f-detail__head{display:flex;align-items:center;gap:14px;padding:20px 22px 0}
  .f-detail .f-avatar{width:56px;height:56px;font-size:18px}
  .f-detail__price{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;padding:18px 22px 0}
  .f-detail .f-num-xl{font-size:42px}
  .f-detail .f-chart{height:260px;margin-top:12px}
  .f-detail__cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;padding:16px 22px 0}
  .f-detail .f-trades{padding:0 22px 18px}
  .f-trade{grid-template-columns:60px 1fr auto 50px;gap:12px;font-size:12px}
  .f-trade-panel{display:flex;flex-direction:column;gap:14px;padding:18px;border:2px solid var(--brass);border-radius:var(--r-lg);background:linear-gradient(160deg,#3e1712,#1b0b09 70%);box-shadow:var(--sh-card)}
  .f-trade-panel .f-amount{height:60px}.f-trade-panel .f-amount input{font-size:26px}
  .f-coin__name{font-size:14px}

  /* launch page */
  .f-launch-page{position:relative;overflow:hidden;width:calc(100% - 26px);max-width:var(--maxw);margin:14px auto 64px;padding:250px 20px 28px;border:2px solid var(--rust-border);box-shadow:0 28px 70px #0008;background:#1d0805 url(assets/launch-machine.jpg) 66% top/auto 370px no-repeat}
  .f-launch-page::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#1d080500 0,#1d0805bb 200px,#1d0805 300px)}
  .f-launch-page>*{position:relative}
  .f-launch-page .f-display{font-size:clamp(48px,8vw,84px);line-height:.85;letter-spacing:-.065em}
  .f-launch-card{margin:26px 0 0;padding:24px;max-width:560px}

  /* burn page */
  .f-burn{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:start}
  .f-burn__steps{display:grid;grid-template-columns:1fr 1fr;gap:10px}
}
@media (min-width:900px){
  .f-top{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
  .f-market{grid-template-columns:minmax(300px,360px) minmax(0,1fr)}
  .f-market>.f-trade-panel{grid-column:2}            /* trade panel drops under the detail, not sticky */
  .f-burn{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media (min-width:1000px){
  .f-launch-page{width:calc(100% - 64px);margin:24px auto 64px;min-height:720px;padding:56px 5%;display:flex;flex-direction:column;justify-content:center;background:#1d0805 url(assets/launch-machine.jpg) center/cover}
  .f-launch-page::before{background:linear-gradient(90deg,#1b0806f5 0%,#1d0907e8 32%,#1d090780 55%,#1d090700 80%)}
  .f-launch-page>*{max-width:560px}
}
@media (min-width:1180px){
  .f-net,.f-header__bal{display:flex}
  .f-market{grid-template-columns:minmax(320px,400px) minmax(0,1fr) 350px}
  .f-market>.f-trade-panel{grid-column:auto;position:sticky;top:calc(var(--header-h) + 24px)}
}
@media (min-width:768px) and (max-width:1179px){ .f-net,.f-header__bal{display:none} }