/* ============================================================
   DEALFx marketing site — shared design system.

   DARK ONLY, DELIBERATELY. DEALFx is a black-and-orange brand and
   the app itself is dark, so the site commits to that rather than
   following the visitor's OS setting — a light-mode visitor was
   otherwise getting a site that didn't look like the product.

   Because there is no theme switching, the page must paint every
   colour itself: a transparent background would let a light-mode
   browser show through behind the type. `body` sets --bg explicitly
   below, and `color-scheme` tells the browser to render form
   controls and scrollbars dark to match.

   Every colour is still a token. If a light theme is ever wanted,
   redefining this one block is the whole job.
   ============================================================ */

:root{
  color-scheme:dark;
  --bg:#07080A; --bg2:#0B0D11; --surface:#101318; --surface2:#151921;
  --line:rgba(190,205,225,.11); --line2:rgba(190,205,225,.2);
  --text:#F0F1F3; --muted:#8B929E; --dim:#616875;

  --o:#FFA300; --o-ink:#FFB938; --o-soft:rgba(255,163,0,.12);
  --t:#4FB3CC; --t-ink:#6FC8DE; --t-soft:rgba(79,179,204,.11);
  --up:#3DD68C; --up-soft:rgba(61,214,140,.13);
  --down:#FF5E63; --down-soft:rgba(255,94,99,.12);
  --grid:rgba(190,205,225,.06);
  --shadow:0 40px 90px -45px rgba(0,0,0,.9);

  --fd:"Archivo","Helvetica Neue",Arial,sans-serif;
  --fb:"Instrument Sans","Segoe UI",system-ui,sans-serif;
  --fm:"IBM Plex Mono",ui-monospace,Consolas,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--fb);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip;
  /* A long unbroken string — a URL, an epic code — would otherwise set a
     minimum width the page cannot go below, and `overflow-x: clip` above
     would then hide it rather than let it scroll. */
  overflow-wrap:break-word}
a{color:inherit}
img,svg,canvas{max-width:100%}
/* Flex and grid children default to min-width:auto, which means "never
   shrink below my content". That is what pushes a phone layout wider than
   the screen. These are the containers where it actually bites. */
.split > *,.layout > *,.grid-2 > *,.grid-3 > *,.card,.portal{min-width:0}
:focus-visible{outline:2px solid var(--o);outline-offset:3px;border-radius:4px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}

.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
@media (max-width:640px){ .wrap{padding:0 20px} }
section{padding:104px 0;border-top:1px solid var(--line)}
@media (max-width:700px){ section{padding:68px 0} }
.alt{background:var(--bg2)}

/* ---------- type ---------- */
h1{font-family:var(--fd);font-weight:800;font-stretch:76%;font-size:clamp(46px,7vw,92px);
  line-height:.92;letter-spacing:-.015em;margin:0 0 24px;text-wrap:balance}
h2{font-family:var(--fd);font-weight:800;font-stretch:78%;font-size:clamp(34px,4.6vw,58px);
  line-height:.98;letter-spacing:-.01em;margin:0 0 18px;max-width:19ch;text-wrap:balance}
h3{font-family:var(--fd);font-weight:700;font-stretch:90%;font-size:22px;line-height:1.18;margin:0 0 10px}
.eyebrow{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--t-ink);
  font-weight:600;margin:0 0 14px}
.lead{font-size:19px;color:var(--muted);max-width:54ch;margin:0 0 44px;line-height:1.55}
.lead b{color:var(--text);font-weight:600}
.center{text-align:center}
.center h2,.center .lead{margin-left:auto;margin-right:auto}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:8px;
  font-family:var(--fb);font-weight:600;font-size:15px;padding:12px 22px;text-decoration:none;
  white-space:nowrap;border:1px solid transparent;cursor:pointer;
  transition:transform .15s,background .15s,border-color .15s}
.btn-p{background:var(--o);color:#1A1200;box-shadow:0 10px 30px -12px rgba(255,163,0,.6)}
.btn-p:hover{background:#FFB22E;transform:translateY(-1px)}
.btn-s{border-color:var(--line2);color:var(--text)}
.btn-s:hover{border-color:var(--text)}
.btn-lg{font-size:16px;padding:15px 28px}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.site-head nav{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 0}
.wm{font-family:var(--fd);font-size:21px;font-weight:800;font-stretch:105%;letter-spacing:-.01em;
  text-decoration:none;white-space:nowrap}
.wm .d{color:var(--o)} .wm .x{font-weight:500}
.nav-links{display:flex;gap:28px;font-size:15px}
.nav-links a{color:var(--muted);text-decoration:none;transition:color .15s;position:relative}
.nav-links a:hover{color:var(--text)}
.nav-links a[aria-current="page"]{color:var(--text)}
.nav-links a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-6px;
  height:2px;background:var(--o);border-radius:2px}
.nav-r{display:flex;align-items:center;gap:16px;font-size:15px}
.nav-r .login{color:var(--muted);text-decoration:none}
.nav-r .login:hover{color:var(--text)}
.menu-btn{display:none;background:none;border:1px solid var(--line2);border-radius:7px;
  color:var(--text);padding:8px 12px;font-size:14px;font-family:var(--fb);cursor:pointer}
@media (max-width:900px){
  .nav-links{display:none} .nav-r .login{display:none} .menu-btn{display:block}
  .nav-links.open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;
    gap:0;background:var(--surface);border-bottom:1px solid var(--line2);padding:8px 28px 20px}
  .nav-links.open a{padding:13px 0;border-bottom:1px solid var(--line)}
  .nav-links.open a[aria-current="page"]::after{display:none}
}

/* ---------- portal recreations ----------
   These stand in for screenshots. Built in HTML/CSS rather than
   captured as images so they stay sharp at any size, follow the
   viewer's theme, reflow on a phone, and never go stale when the
   product changes. Swap in real captures later if preferred. */
.portal{background:var(--surface);border:1px solid var(--line2);border-radius:14px;
  overflow:hidden;box-shadow:var(--shadow)}
.portal-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:var(--surface2);
  border-bottom:1px solid var(--line);flex-wrap:wrap}
.portal-bar i{width:9px;height:9px;border-radius:50%;background:var(--line2);display:block;flex:none}
/* min-width:0 is what lets the ellipsis actually happen — without it a flex
   item refuses to shrink below its text and the bar pushes the card wide. */
.portal-bar .addr{margin-left:10px;font-family:var(--fm);font-size:11.5px;color:var(--dim);
  letter-spacing:.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  min-width:0;flex:1}
.portal-body{padding:18px}
.portal-cap{font-size:13.5px;color:var(--dim);margin:12px 2px 0;line-height:1.5}
/* Marks a mock-up's numbers as invented. Given real visual weight rather than
   set in grey small print, because a caveat nobody reads is decoration — and
   the figures it qualifies are the only thing on this site that could be
   mistaken for a performance claim. */
.illus{display:inline-block;font-size:11.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--o-ink);background:var(--o-soft);
  padding:2px 8px;border-radius:999px;white-space:nowrap}

/* app-ish chrome inside a portal */
.app-tabs{display:flex;gap:2px;font-size:12.5px;border-bottom:1px solid var(--line);
  padding:0 14px;background:var(--surface2);overflow-x:auto;scrollbar-width:none}
.app-tabs::-webkit-scrollbar{display:none}
.app-tabs span{padding:11px 13px;color:var(--dim);white-space:nowrap;border-bottom:2px solid transparent}
.app-tabs span.on{color:var(--text);border-bottom-color:var(--o)}

/* Wraps, because the pair name, two tags and a price do not fit on one line
   at 360px and the tags cannot break mid-word. */
.sig-head{display:flex;align-items:center;gap:11px;padding:14px 16px;
  border-bottom:1px solid var(--line);flex-wrap:wrap}
.sig-pair{font-family:var(--fd);font-weight:700;font-stretch:92%;font-size:18px}
.tag{font-size:11.5px;font-weight:600;border-radius:999px;padding:3px 10px;white-space:nowrap}
.tag.up{color:var(--up);background:var(--up-soft)}
.tag.down{color:var(--down);background:var(--down-soft)}
.tag.wait{color:var(--o-ink);background:var(--o-soft)}
.tag.neutral{color:var(--muted);background:var(--line)}
.tag.tl{color:var(--t-ink);background:var(--t-soft)}
.sig-px{margin-left:auto;font-family:var(--fm);font-size:15px;font-weight:500}

.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));border-top:1px solid var(--line)}
.kv > div{padding:13px 15px;border-left:1px solid var(--line)}
.kv > div:first-child{border-left:0}
.kv span{display:block;font-size:11.5px;color:var(--dim);margin-bottom:4px;line-height:1.3}
.kv b{font-family:var(--fm);font-size:15px;font-weight:500;letter-spacing:-.01em}
.kv b.u{color:var(--up)} .kv b.dn{color:var(--down)}

table.mini{width:100%;border-collapse:collapse;font-size:13.5px}
table.mini th{text-align:left;font-weight:600;font-size:11.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--dim);padding:9px 12px;border-bottom:1px solid var(--line2)}
table.mini td{padding:10px 12px;border-bottom:1px solid var(--line);
  font-variant-numeric:tabular-nums}
table.mini td.n{font-family:var(--fm);font-size:13px}
table.mini td.u{color:var(--up)} table.mini td.dn{color:var(--down)}
table.mini tr:last-child td{border-bottom:0}
/* Every table lives in one of these. A table's width is set by its content
   and cannot shrink to phone width, so it gets its own scroll rather than
   widening the page. The faint right edge hints there is more to see. */
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.scroll-x > table{min-width:min-content}
@media (max-width:620px){
  .scroll-x{background:linear-gradient(to left,var(--line),transparent 18px);
    background-attachment:local;border-radius:8px}
}

/* ---------- generic card grids ---------- */
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media (max-width:900px){ .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:680px){ .grid-2,.grid-3{grid-template-columns:minmax(0,1fr)} }
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:24px}
.card p{margin:0;color:var(--muted);font-size:15.5px}
.card h3{font-size:19px}

/* split: copy one side, portal the other */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:56px;align-items:center}
.split.flip > :first-child{order:2}
@media (max-width:920px){
  .split{grid-template-columns:minmax(0,1fr);gap:36px}
  .split.flip > :first-child{order:0}
}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:52px 0 60px;font-size:14px;color:var(--dim);
  background:var(--bg2)}
.fcols{display:flex;justify-content:space-between;gap:34px;flex-wrap:wrap;margin-bottom:34px}
.fcol h5{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  margin:0 0 12px;font-weight:700}
.fcol a{display:block;color:var(--dim);text-decoration:none;padding:4px 0}
.fcol a:hover{color:var(--text)}
.risk{border-top:1px solid var(--line);padding-top:24px;line-height:1.7;max-width:88ch;font-size:13.5px}
.risk b{color:var(--muted)}