/* ==========================================================================
   FRAC — design system
   navy #0B132B · electric blue #2563EB · cyan #00D4FF · slate #1F2937
   light grey #F3F4F6 · Space Grotesk
   ========================================================================== */

:root {
  --ground:#F3F4F6; --surface:#FFFFFF; --surface-2:#E8EAEF;
  --ink:#0B132B; --ink-2:#45506B; --ink-3:#5E6880;
  --rule:#D6DAE3; --rule-soft:#E5E8EE;
  --net:#0A7E9C; --net-bg:#DDF2F8;
  --fee:#2563EB; --fee-bg:#E1E9FD;
  --warn:#9A6206; --warn-bg:#F7EDDC;
  --star:#8A6300;
  --fee-ink:#1D4FC4; --net-ink:#0A6E88;
  --focus:#2563EB; --on-accent:#FFFFFF;
  --shadow:0 1px 2px rgba(11,19,43,.06), 0 12px 28px -18px rgba(11,19,43,.30);
  --band:#0B132B; --band-ink:#F3F4F6; --band-ink-2:#A3AECB;
  --band-rule:#24304F; --band-surface:#16203D; --band-net:#00D4FF;
  --maxw:76rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:#0B132B; --surface:#121B36; --surface-2:#1A2445;
    --ink:#F3F4F6; --ink-2:#A3AECB; --ink-3:#8A97B5;
    --rule:#24304F; --rule-soft:#1B2542;
    --net:#00D4FF; --net-bg:#0A2A38;
    --fee:#5B8DEF; --fee-bg:#14224A;
    --warn:#F5B942; --warn-bg:#2E2410;
    --star:#E8B44C;
    --fee-ink:var(--fee); --net-ink:var(--net);
    --focus:#00D4FF; --on-accent:#0B132B;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 12px 28px -18px rgba(0,0,0,.85);
    --band:#060C1C; --band-rule:#1B2542; --band-surface:#101932;
  }
}
:root[data-theme="dark"] {
  --ground:#0B132B; --surface:#121B36; --surface-2:#1A2445;
  --ink:#F3F4F6; --ink-2:#A3AECB; --ink-3:#8A97B5;
  --rule:#24304F; --rule-soft:#1B2542;
  --net:#00D4FF; --net-bg:#0A2A38;
  --fee:#5B8DEF; --fee-bg:#14224A;
  --warn:#F5B942; --warn-bg:#2E2410;
  --star:#E8B44C;
  --fee-ink:var(--fee); --net-ink:var(--net);
  --focus:#00D4FF; --on-accent:#0B132B;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 12px 28px -18px rgba(0,0,0,.85);
  --band:#060C1C; --band-rule:#1B2542; --band-surface:#101932;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:"Space Grotesk", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4 { margin:0; font-weight:600; letter-spacing:-.02em; line-height:1.14; text-wrap:balance; }
h1 { font-size:clamp(2rem, 5.5vw, 3.1rem); }
h2 { font-size:clamp(1.45rem, 3.6vw, 2.1rem); }
h3 { font-size:1.08rem; }
h4 { font-size:.95rem; }
p { margin:0; }
a { color:var(--fee); text-decoration:none; }
a:hover { text-decoration:underline; }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline:2px solid var(--focus); outline-offset:2px;
}
img { max-width:100%; display:block; }

.wrap { max-width:var(--maxw); margin:0 auto; padding:0 1.25rem; }
.narrow { max-width:54rem; }
.stack { display:flex; flex-direction:column; }
.g4{gap:.4rem}.g6{gap:.6rem}.g8{gap:.8rem}.g12{gap:1.2rem}.g16{gap:1.6rem}.g24{gap:2.4rem}.g40{gap:4rem}
.section { padding:3.5rem 0; }
.n { font-variant-numeric:tabular-nums; }
.eyebrow { font-size:.7rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); }
.lede { font-size:1.12rem; color:var(--ink-2); max-width:56ch; }
.note { font-size:.85rem; color:var(--ink-3); max-width:66ch; }
hr.rule { border:0; border-top:1px solid var(--rule); margin:0; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- buttons ---------- */
.btn {
  font:inherit; font-size:.875rem; font-weight:600; letter-spacing:.01em;
  padding:.62rem 1.15rem; border-radius:6px; border:1px solid transparent;
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  gap:.4rem; text-align:center; text-decoration:none;
}
.btn:hover { text-decoration:none; }
.btn.primary { background:var(--fee); color:var(--on-accent); }
.btn.cyan { background:var(--net); color:var(--on-accent); }
.btn.quiet { background:var(--surface); color:var(--ink); border-color:var(--rule); }
.btn.ghost { background:transparent; color:var(--band-ink); border-color:var(--band-rule); }
.btn.lg { padding:.85rem 1.6rem; font-size:.98rem; }
.btn[disabled] { opacity:.45; cursor:not-allowed; }
.btn-row { display:flex; gap:.6rem; flex-wrap:wrap; }

/* ---------- header ---------- */
.topbar { background:var(--band); color:var(--band-ink); border-bottom:1px solid var(--band-rule); position:sticky; top:0; z-index:40; }
.topbar .wrap { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.9rem 1.25rem; }
.logo { display:inline-flex; align-items:center; gap:.55rem; text-decoration:none; }
.logo:hover { text-decoration:none; }
.logo .word { font-size:1.24rem; font-weight:700; letter-spacing:.04em; color:var(--band-ink); }
.logo .word b { color:var(--band-net); }
.nav { display:flex; align-items:center; gap:.2rem; flex-wrap:wrap; }
.nav a { font-size:.86rem; font-weight:500; color:var(--band-ink-2); padding:.45rem .7rem; border-radius:6px; }
.nav a:hover { color:var(--band-ink); text-decoration:none; }
.nav a[aria-current="page"] { color:var(--band-net); background:rgba(0,212,255,.10); }
.navtoggle { display:none; }
@media (max-width:46rem) {
  .navtoggle { display:inline-flex; background:none; border:1px solid var(--band-rule); color:var(--band-ink); border-radius:6px; padding:.45rem .7rem; font:inherit; font-size:.82rem; cursor:pointer; }
  .nav { display:none; width:100%; flex-direction:column; align-items:stretch; padding-bottom:.6rem; }
  .nav.open { display:flex; }
  .topbar .wrap { flex-wrap:wrap; }
}

/* ---------- bands & hero ---------- */
.band { background:var(--band); color:var(--band-ink); }
.band h1, .band h2, .band h3 { color:var(--band-ink); }
.band p { color:var(--band-ink-2); }
.band em { font-style:normal; color:var(--band-net); }
.band .eyebrow { color:var(--band-ink-2); opacity:.85; }
.band .note { color:var(--band-ink-2); }
.hero { padding:4rem 0 3.5rem; }
.hero-grid { display:grid; gap:2.25rem; grid-template-columns:1fr; align-items:center; }
@media (min-width:56rem) { .hero-grid { grid-template-columns:1.12fr .88fr; gap:3rem; } }

.quote-card { background:var(--band-surface); border:1px solid var(--band-rule); border-radius:14px; padding:1.4rem; }
.qrow { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; padding:.6rem 0; border-bottom:1px solid var(--band-rule); }
.qrow:last-child { border-bottom:0; }
.qrow .l { font-size:.87rem; color:var(--band-ink-2); }
.qrow .v { font-variant-numeric:tabular-nums; font-weight:600; color:var(--band-ink); }
.qrow.total .v { font-size:1.35rem; font-weight:700; color:var(--band-net); }

.strip { display:flex; flex-wrap:wrap; gap:1.75rem; padding-top:1.5rem; margin-top:2.5rem; border-top:1px solid var(--band-rule); }
.strip span { font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; color:var(--band-ink-2); }
.strip i { color:var(--band-net); font-style:normal; }

/* ---------- panels, tiles, callouts ---------- */
.panel { background:var(--surface); border:1px solid var(--rule); border-radius:12px; box-shadow:var(--shadow); overflow:hidden; }
.panel-head { padding:1rem 1.25rem; border-bottom:1px solid var(--rule-soft); background:var(--surface-2); display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.panel-head .who { font-size:.68rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.pad { padding:1.25rem; }

.tiles { display:grid; gap:1rem; grid-template-columns:1fr; }
@media (min-width:34rem) { .tiles { grid-template-columns:1fr 1fr; } }
@media (min-width:62rem) { .tiles { grid-template-columns:repeat(4,1fr); } }
.tile { background:var(--surface); border:1px solid var(--rule); border-radius:12px; padding:1.25rem; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:.4rem; }
.tile .k { font-size:.7rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.tile .v { font-size:1.7rem; font-weight:700; letter-spacing:-.025em; font-variant-numeric:tabular-nums; }
.tile .s { font-size:.84rem; color:var(--ink-2); }

.callout { background:var(--net-bg); border-left:3px solid var(--net); padding:.95rem 1.15rem; border-radius:0 6px 6px 0; font-size:.93rem; }
.callout.info { background:var(--fee-bg); border-left-color:var(--fee); }
.callout.warn { background:var(--warn-bg); border-left-color:var(--warn); }

.steps { display:grid; gap:1rem; grid-template-columns:1fr; }
@media (min-width:42rem) { .steps { grid-template-columns:1fr 1fr; } }
@media (min-width:64rem) { .steps { grid-template-columns:repeat(4,1fr); } }
.step { background:var(--surface); border:1px solid var(--rule); border-radius:12px; padding:1.25rem; display:flex; flex-direction:column; gap:.45rem; }
.step .num { font-size:.72rem; font-weight:700; letter-spacing:.14em; color:var(--fee); }
.step p { font-size:.88rem; color:var(--ink-2); }

/* ---------- chips, tags, badges ---------- */
.chip-row { display:flex; flex-wrap:wrap; gap:.35rem; align-items:center; }
.tag { font-size:.72rem; font-weight:500; padding:.24rem .55rem; border-radius:4px; background:var(--fee-bg); color:var(--fee-ink); }
.tag.muted { background:var(--surface-2); color:var(--ink-3); }
.badge { font-size:.62rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding:.2rem .42rem; border-radius:3px; background:var(--net-bg); color:var(--net-ink); white-space:nowrap; }
.badge.none { background:var(--surface-2); color:var(--ink-3); }
.chip-btn { font:inherit; font-size:.8rem; font-weight:500; padding:.35rem .7rem; border-radius:999px; border:1px solid var(--rule); background:var(--ground); color:var(--ink-2); cursor:pointer; }
.chip-btn[aria-pressed="true"] { background:var(--fee); border-color:var(--fee); color:var(--on-accent); }

/* ---------- directory ---------- */
.shell { display:grid; grid-template-columns:1fr; gap:1.75rem; align-items:start; }
@media (min-width:62rem) { .shell { grid-template-columns:17rem 1fr; gap:2rem; } }
.filters { background:var(--surface); border:1px solid var(--rule); border-radius:12px; box-shadow:var(--shadow); overflow:hidden; }
@media (min-width:62rem) { .filters { position:sticky; top:5.2rem; max-height:calc(100vh - 6.5rem); display:flex; flex-direction:column; } }
.filters-body { padding:1.1rem; display:flex; flex-direction:column; gap:1.3rem; overflow-y:auto; }
.mobonly { display:block; }
@media (min-width:62rem) { .mobonly { display:none; } }
@media (max-width:61.99rem) { .filters.collapsed .filters-body { display:none; } }

.fgroup { display:flex; flex-direction:column; gap:.55rem; }
.fl { font-size:.7rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.range-head { display:flex; align-items:baseline; justify-content:space-between; gap:.5rem; }
.range-head .val { font-size:.85rem; font-weight:700; font-variant-numeric:tabular-nums; }
input[type="range"] { width:100%; accent-color:var(--fee); height:1.65rem; }
.switch { display:flex; align-items:center; gap:.6rem; font-size:.87rem; color:var(--ink-2); cursor:pointer; }
.switch input { width:1.05rem; height:1.05rem; accent-color:var(--fee); }

.grid { display:grid; gap:1rem; grid-template-columns:1fr; }
@media (min-width:48rem) { .grid { grid-template-columns:1fr 1fr; } }
@media (min-width:62rem) { .grid { grid-template-columns:1fr; } }
@media (min-width:80rem) { .grid { grid-template-columns:1fr 1fr; } }

.card { background:var(--surface); border:1px solid var(--rule); border-radius:12px; box-shadow:var(--shadow); overflow:hidden; display:flex; flex-direction:column; text-decoration:none; color:inherit; }
.card:hover { border-color:var(--fee); text-decoration:none; }
.card-top { display:flex; gap:1rem; padding:1.1rem 1.15rem .85rem; }
.avatar { position:relative; width:5rem; height:5rem; flex:0 0 auto; border-radius:10px; overflow:hidden; background:linear-gradient(150deg,#2563EB,#00D4FF); display:grid; place-items:center; }
.avatar.lg { width:8rem; height:8rem; }
.avatar .initials { font-size:1.5rem; font-weight:700; color:#0B132B; }
.avatar.lg .initials { font-size:2.4rem; }
.who { flex:1; min-width:0; display:flex; flex-direction:column; gap:.18rem; }
.who .nm { font-size:1.02rem; font-weight:600; }
.who .role { font-size:.84rem; color:var(--ink-2); }
.stats { display:flex; align-items:center; gap:.55rem; font-size:.8rem; color:var(--ink-2); margin-top:.3rem; flex-wrap:wrap; }
.stars { color:var(--star); font-weight:600; font-variant-numeric:tabular-nums; }
.stats .sep { color:var(--rule); }
.proof { padding:0 1.15rem .8rem; font-size:.89rem; }
.card-foot { margin-top:auto; border-top:1px solid var(--rule-soft); padding:.85rem 1.15rem 1rem; display:flex; flex-direction:column; gap:.5rem; }
.priceline { display:flex; align-items:baseline; justify-content:space-between; gap:.75rem; flex-wrap:wrap; }
.price { font-size:1.2rem; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.price small { font-size:.76rem; font-weight:500; color:var(--ink-3); }
.breakdown { font-size:.76rem; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.avail { font-size:.8rem; color:var(--ink-2); }
.avail b { color:var(--net-ink); }

/* ---------- key/value lists ---------- */
.kv { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; padding:.55rem 0; border-bottom:1px solid var(--rule-soft); }
.kv:last-child { border-bottom:0; }
.kv dt { font-size:.86rem; color:var(--ink-3); }
.kv dd { margin:0; font-variant-numeric:tabular-nums; font-weight:500; text-align:right; }
.kv.strong dd { font-weight:700; font-size:1.2rem; letter-spacing:-.02em; }
.kv .cf { color:var(--fee-ink); } .kv .cn { color:var(--net-ink); }

/* ---------- forms ---------- */
.field { display:flex; flex-direction:column; gap:.45rem; }
label.fl { display:block; }
input[type="text"], input[type="email"], input[type="url"], textarea, select {
  font:inherit; font-size:.95rem; padding:.65rem .8rem; border-radius:8px;
  border:1px solid var(--rule); background:var(--ground); color:var(--ink); width:100%;
}
textarea { min-height:7rem; resize:vertical; }
.form-grid { display:grid; gap:1rem; grid-template-columns:1fr; }
@media (min-width:44rem) { .form-grid.two { grid-template-columns:1fr 1fr; } }
.form-err { color:var(--warn); font-size:.85rem; }
.form-status { font-size:.9rem; }

/* ---------- footer ---------- */
.footer { border-top:1px solid var(--rule); margin-top:4rem; padding:2.5rem 0 3.5rem; font-size:.85rem; color:var(--ink-3); }
.footer .cols { display:grid; gap:1.75rem; grid-template-columns:1fr; }
@media (min-width:48rem) { .footer .cols { grid-template-columns:2fr 1fr 1fr; } }
.footer h4 { font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:.6rem; }
.footer ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.4rem; }
.footer a { color:var(--ink-2); }

/* ---------- pre-launch banner ---------- */
.prelaunch { background:var(--warn-bg); border-bottom:1px solid var(--warn); }
.prelaunch .wrap { padding:.55rem 1.25rem; font-size:.8rem; color:var(--ink); }
.prelaunch b { color:var(--warn); }
.prelaunch a { color:var(--fee-ink); }

@media (prefers-reduced-motion: no-preference) {
  .card, .btn, .chip-btn { transition:border-color .15s ease, background .15s ease; }
}