/* Meme Raydar website (2026-11-06; premium pass 2026-11-07). One system for every page:
   near-black with a green tint, one accent (the radar green) kept for actions, live states and
   data, hairline borders instead of glows. Bricolage Grotesque for headlines, Instrument Serif
   italic for the one emphasised word, Inter for reading, JetBrains Mono for numbers and addresses.
   Icons are one stroked set (site.js ICON), never emoji. Motion is quiet and stops for reduced motion. */
@font-face { font-family: "Bricolage Grotesque"; src: url("/site/fonts/bricolage.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("/site/fonts/instrument-serif-italic.woff2") format("woff2"); font-style: italic; font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/site/fonts/inter.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/site/fonts/jetbrains-mono.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }
:root {
  --bg: #070a09; --surface: #0c100e; --surface-2: #111614; --surface-3: #171e1b; --sunk: #050706;
  --line: rgba(214, 255, 232, .07); --line-2: rgba(214, 255, 232, .13); --line-3: rgba(214, 255, 232, .22);
  --text: #edf3ef; --text-2: #aab6b0; --text-3: #76837c;
  --accent: #4be08a; --accent-2: #33c573; --accent-ink: #03140a; --accent-soft: rgba(75, 224, 138, .1); --accent-line: rgba(75, 224, 138, .4);
  --amber: #e7bb55; --amber-soft: rgba(231, 187, 85, .1); --red: #ff7070;
  /* the fee-split ramp: one hue and its neutrals, so a split never reads as a rainbow */
  --s1: #4be08a; --s2: #2f9d5e; --s3: #d7e2dc; --s4: #8a978f; --s5: #4a5650;
  --display: "Bricolage Grotesque", "Inter", -apple-system, "Segoe UI", sans-serif; --serif: "Instrument Serif", Georgia, serif;
  --body: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif; --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --r-lg: 20px; --r: 14px; --r-sm: 10px; --max: 1180px; color-scheme: dark;
  --shadow: 0 1px 0 rgba(255, 255, 255, .035) inset, 0 24px 60px -28px rgba(0, 0, 0, .7);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.6 var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden; font-feature-settings: "cv11", "ss01"; }
body::before { content: ""; position: absolute; inset: 0 0 auto; height: 900px; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 60% at 70% 0%, rgba(75, 224, 138, .085), transparent 70%), radial-gradient(40% 40% at 0% 10%, rgba(75, 224, 138, .03), transparent 70%); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
img { max-width: 100%; height: auto; display: block; }
button, input, textarea, select { font: inherit; color: inherit; }
button { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
::selection { background: rgba(75, 224, 138, .3); }
.wrap { width: min(var(--max), 100% - 48px); margin-inline: auto; }
.mono { font-family: var(--mono); font-size: .9em; letter-spacing: -.01em; }
.num { font-variant-numeric: tabular-nums; }
.hint { color: var(--text-3); }
.soft { color: var(--text-2); }
.up { color: var(--accent); } .down { color: var(--red); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--accent); color: var(--accent-ink); padding: 8px 14px; border-radius: 10px; z-index: 50; }
.skip:focus { left: 12px; }
.ic { width: 20px; height: 20px; flex: 0 0 auto; display: inline-block; vertical-align: middle; }
.ic.s16 { width: 16px; height: 16px; } .ic.s24 { width: 24px; height: 24px; }
i[data-icon] { display: inline-flex; font-style: normal; }

/* ---------- header ---------- */
.nav { position: sticky; top: 0; z-index: 30; background: rgba(7, 10, 9, .78); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); border-bottom: 1px solid var(--line); }
.nav .wrap { display: flex; align-items: center; gap: 18px; min-height: 64px; }
.logo { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none !important; flex: 0 0 auto; }
.logo img { width: 32px; height: 32px; border-radius: 50%; box-shadow: 0 0 0 1px var(--line-3); }
.logo b { font: 700 18px/1 var(--display); letter-spacing: -.02em; }
.logo b span { color: var(--text-2); font-weight: 500; }
.links { display: flex; gap: 2px; margin-left: auto; align-items: center; }
.links a { color: var(--text-2); font-weight: 500; font-size: 14.5px; padding: 8px 12px; border-radius: 9px; text-decoration: none; transition: color .15s ease, background .15s ease; }
.links a:hover { color: var(--text); background: rgba(255, 255, 255, .04); }
.links a[aria-current="page"] { color: var(--text); }
.links .btn { margin-left: 10px; color: var(--accent-ink); }
.menu { display: none; margin-left: auto; background: none; border: 1px solid var(--line-2); border-radius: 11px; width: 44px; height: 44px; cursor: pointer; color: var(--text); }
.menu svg { width: 20px; height: 20px; margin: auto; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 12px 20px; border-radius: 12px; border: 0; cursor: pointer; font-weight: 600; font-size: 15px; letter-spacing: -.01em; text-decoration: none !important; transition: background .18s ease, box-shadow .18s ease, color .18s ease, transform .12s ease; white-space: nowrap; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn.go { background: var(--accent); color: var(--accent-ink); box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 8px 24px -10px rgba(75, 224, 138, .55); }
.btn.go:hover { background: #63ea9b; }
.btn.line { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }
.btn.line:hover { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-3); }
.btn.ghost { background: none; color: var(--text-2); padding-inline: 10px; }
.btn.ghost:hover { color: var(--text); }
.btn.small { min-height: 38px; padding: 8px 14px; font-size: 14px; border-radius: 10px; }
.btn:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }
.btn svg { width: 18px; height: 18px; }
.btn.block { width: 100%; }

/* ---------- type ---------- */
.display { font: 620 clamp(44px, 6vw, 80px)/1.04 var(--display); letter-spacing: -.028em; margin: 0; text-wrap: balance; font-variation-settings: "opsz" 96; }
.display em, .h2 em, .h1 em { font: italic 400 1.08em/1 var(--serif); letter-spacing: -.01em; color: var(--accent); }
.h1 { font: 620 clamp(36px, 4.6vw, 58px)/1.06 var(--display); letter-spacing: -.026em; margin: 0; text-wrap: balance; }
.h2 { font: 600 clamp(30px, 3.4vw, 46px)/1.1 var(--display); letter-spacing: -.024em; margin: 0; text-wrap: balance; }
.h3 { font: 600 19px/1.3 var(--display); letter-spacing: -.015em; margin: 0; }
.kicker { display: inline-flex; align-items: center; gap: 9px; font: 500 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.kicker::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.lede { font-size: clamp(17px, 1.5vw, 19px); line-height: 1.6; color: var(--text-2); max-width: 46ch; margin: 0; }
section.block { padding: clamp(64px, 8vw, 112px) 0; }
.head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 36px; flex-wrap: wrap; }
.head p { margin: 12px 0 0; color: var(--text-3); max-width: 58ch; }
.center { text-align: center; }
.center .head, .head.center { justify-content: center; text-align: center; }
.center .head p, .head.center p { margin-inline: auto; }

/* ---------- hero ---------- */
.hero { position: relative; padding: clamp(48px, 7vw, 96px) 0 clamp(48px, 6vw, 80px); overflow: hidden; }
.hero .wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero .copy { display: grid; gap: 24px; justify-items: start; position: relative; z-index: 2; }
.hero .ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.proof { display: flex; gap: 0; flex-wrap: wrap; color: var(--text-3); font-size: 13.5px; margin-top: 8px; border-top: 1px solid var(--line); padding-top: 20px; }
.proof > div { padding-right: 28px; margin-right: 28px; border-right: 1px solid var(--line); }
.proof > div:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.proof b { display: block; color: var(--text); font: 600 26px/1.15 var(--display); letter-spacing: -.02em; margin-bottom: 2px; font-variant-numeric: tabular-nums; }

/* the radar: hairline rings, a crosshair, a slow sweep, the frog in the middle and live coins as blips */
.radar { position: relative; aspect-ratio: 1; width: min(100%, 540px); margin-inline: auto; border-radius: 50%; isolation: isolate;
  background: radial-gradient(circle, rgba(75, 224, 138, .07), transparent 64%), repeating-radial-gradient(circle, transparent 0 calc(16.66% - 1px), rgba(214, 255, 232, .09) calc(16.66% - 1px) 16.66%);
  box-shadow: 0 0 0 1px rgba(214, 255, 232, .12); }
.radar::before, .radar::after { content: ""; position: absolute; background: rgba(214, 255, 232, .07); z-index: -1; }
.radar::before { left: 50%; top: 0; bottom: 0; width: 1px; }
.radar::after { top: 50%; left: 0; right: 0; height: 1px; }
.radar .sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(75, 224, 138, .22), rgba(75, 224, 138, .04) 10%, transparent 24%); animation: spin 8s linear infinite; z-index: -1; }
.radar .frog { position: absolute; inset: 30%; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1px var(--accent-line), 0 0 0 10px rgba(7, 10, 9, .9), 0 0 0 11px rgba(214, 255, 232, .08); background: #000; }
.radar .frog img { width: 100%; height: 100%; object-fit: cover; }
.blip { position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: var(--surface-3) center / cover no-repeat;
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--accent-line); transition: transform .2s ease, box-shadow .2s ease; }
.blip::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 1px solid var(--accent); opacity: 0; animation: ping 3.2s ease-out infinite; animation-delay: inherit; }
.blip:hover, .blip:focus-visible { transform: scale(1.12); z-index: 3; box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--accent); }
.blip .tag { position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%); white-space: nowrap; padding: 7px 10px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line-2); font: 600 12.5px/1.3 var(--body); color: var(--text); pointer-events: none; opacity: 0; transition: opacity .15s ease; text-align: left; box-shadow: var(--shadow); }
.blip .tag small { display: block; color: var(--text-3); font: 500 11.5px/1.3 var(--mono); }
.blip:hover .tag, .blip:focus-visible .tag { opacity: 1; }
.blip.letter { display: grid; place-items: center; font: 600 16px/1 var(--display); color: var(--accent); }
@keyframes spin { to { transform: rotate(1turn); } }
@keyframes ping { 0% { transform: scale(1); opacity: .7; } 80%, 100% { transform: scale(1.6); opacity: 0; } }

/* ---------- ticker ---------- */
.ticker { border-block: 1px solid var(--line); overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ticker .run { display: flex; gap: 40px; padding: 14px 0; width: max-content; animation: tick 70s linear infinite; }
.ticker:hover .run { animation-play-state: paused; }
.ticker a { display: inline-flex; gap: 9px; align-items: center; color: var(--text-3); font: 500 13.5px/1 var(--mono); white-space: nowrap; text-decoration: none; }
.ticker a b { color: var(--text); font-family: var(--body); font-weight: 600; }
.ticker img { width: 22px; height: 22px; border-radius: 50%; }
@keyframes tick { to { transform: translateX(-50%); } }

/* ---------- cards and grids ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; box-shadow: var(--shadow); }
.card.flat { box-shadow: none; }
.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, 1fr); } .g3 { grid-template-columns: repeat(3, 1fr); } .g4 { grid-template-columns: repeat(4, 1fr); }
.coins { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.coin { display: grid; gap: 14px; padding: 18px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); color: var(--text); text-decoration: none !important; transition: border-color .2s ease, background .2s ease; position: relative; }
.coin:hover { border-color: var(--line-3); background: var(--surface-2); }
.coin .top { display: flex; gap: 14px; align-items: center; min-width: 0; }
.coin .pic, .pic { width: 56px; height: 56px; flex: 0 0 56px; border-radius: 14px; background: var(--surface-3) center / cover no-repeat; display: grid; place-items: center; font: 600 22px/1 var(--display); color: var(--accent); overflow: hidden; box-shadow: 0 0 0 1px var(--line) inset; }
.pic img { width: 100%; height: 100%; object-fit: cover; }
.pic.xl { width: 96px; height: 96px; flex-basis: 96px; border-radius: 22px; font-size: 38px; }
.coin .nm, .nm { min-width: 0; display: grid; gap: 3px; }
.coin .nm b { font: 600 17px/1.2 var(--display); letter-spacing: -.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nm span { font: 500 12.5px/1.2 var(--mono); color: var(--text-3); }
.coin .row { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--text-3); padding-top: 10px; border-top: 1px solid var(--line); }
.coin .row + .row { padding-top: 0; border-top: 0; }
.coin .row b { color: var(--text); font: 500 13px/1.4 var(--mono); }
.badges { display: flex; flex-wrap: wrap; gap: 6px; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 999px; font: 500 12px/1.3 var(--body); background: rgba(255, 255, 255, .045); color: var(--text-2); white-space: nowrap; box-shadow: 0 0 0 1px var(--line) inset; }
.badge svg { width: 13px; height: 13px; }
.badge.grad { background: var(--accent-soft); color: var(--accent); box-shadow: 0 0 0 1px rgba(75, 224, 138, .18) inset; }
.badge.live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.badge.gold { background: var(--amber-soft); color: var(--amber); box-shadow: 0 0 0 1px rgba(231, 187, 85, .2) inset; }
.badge.pink { background: rgba(255, 255, 255, .045); color: var(--text-2); }
.bar { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.empty { padding: 48px 24px; text-align: center; color: var(--text-3); border: 1px dashed var(--line-2); border-radius: var(--r-lg); display: grid; gap: 14px; justify-items: center; }
.empty p { margin: 0; max-width: 46ch; }
.empty .mark { width: 56px; height: 56px; color: var(--text-3); }
.tabs { display: inline-flex; gap: 2px; padding: 4px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); flex-wrap: wrap; }
.tabs button { border: 0; background: none; padding: 8px 14px; border-radius: 9px; color: var(--text-3); font-weight: 550; font-size: 14px; cursor: pointer; min-height: 38px; }
.tabs button:hover { color: var(--text); }
.tabs button[aria-pressed="true"] { background: var(--surface-3); color: var(--text); box-shadow: 0 0 0 1px var(--line-2) inset; }

/* ---------- stats ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); }
.stat { background: var(--surface); padding: 22px 24px; display: grid; gap: 6px; align-content: start; }
.stat b { font: 600 clamp(26px, 2.6vw, 34px)/1.1 var(--display); letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.stat span { color: var(--text-3); font-size: 13.5px; }

/* ---------- steps (how it works) ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; counter-reset: s; border-top: 1px solid var(--line); }
.step { position: relative; padding: 28px 28px 8px 0; display: grid; gap: 10px; align-content: start; }
.step::before { counter-increment: s; content: "0" counter(s); font: 500 12.5px/1 var(--mono); color: var(--text-3); letter-spacing: .08em; }
.step::after { content: ""; position: absolute; top: -1px; left: 0; width: 40px; height: 1px; background: var(--accent); }
.step .ico { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--surface-2); box-shadow: 0 0 0 1px var(--line-2) inset; color: var(--accent); margin: 6px 0 4px; }
.step p { margin: 0; color: var(--text-3); font-size: 14.5px; }

/* ---------- tables ---------- */
.table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.table th { text-align: left; color: var(--text-3); font: 500 11.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 0 12px 12px; }
.table td { padding: 13px 12px; border-top: 1px solid var(--line); vertical-align: middle; }
.table td.r, .table th.r { text-align: right; }
.table td.num { font-family: var(--mono); font-size: 13.5px; }
.who { display: flex; align-items: center; gap: 12px; font-weight: 550; }
.medal { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 8px; display: grid; place-items: center; font: 500 12.5px/1 var(--mono); background: var(--surface-3); color: var(--text-3); }
.medal.m1 { background: var(--accent); color: var(--accent-ink); }
.medal.m2, .medal.m3 { background: var(--accent-soft); color: var(--accent); }
.tablewrap { overflow-x: auto; }
/* The all-time board: a long name wraps, so the XP and SOL columns stay on a phone's screen. */
.table.alltime td, .table.alltime th { padding-left: 8px; padding-right: 8px; }
.table.alltime td.raydar { overflow-wrap: anywhere; }
.table.alltime td.raydar small { display: block; margin-top: 2px; }

/* ---------- split bars (fee tables) ---------- */
.split { display: grid; gap: 14px; align-content: start; }
.split .stack { display: flex; height: 10px; border-radius: 999px; overflow: hidden; gap: 2px; }
.split .stack i { display: block; min-width: 0; }
.split .legend { display: grid; gap: 8px; font-size: 13.5px; color: var(--text-2); }
.split .legend span { display: flex; align-items: center; gap: 8px; }
.split .legend span::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--c); flex: 0 0 auto; }
.split .legend span b { margin-left: auto; font: 500 13px/1 var(--mono); color: var(--text); }
.split-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.split-head small { color: var(--text-3); font-size: 12.5px; }

/* ---------- board ---------- */
.idea { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; padding: 18px 20px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.idea .pos { font: 500 14px/1 var(--mono); color: var(--text-3); width: 36px; text-align: center; }
.idea b { font: 600 17px/1.3 var(--display); letter-spacing: -.01em; }
.idea p { margin: 3px 0 0; color: var(--text-3); font-size: 14px; }
.idea .count { text-align: right; font: 600 26px/1 var(--display); font-variant-numeric: tabular-nums; }
.idea .count small { display: block; font: 500 12px/1.4 var(--body); color: var(--text-3); margin-top: 4px; }
.idea.lead { border-color: var(--accent-line); }
.idea.lead .pos { color: var(--accent); }

/* ---------- call to action band ---------- */
.band { position: relative; overflow: hidden; border-radius: 28px; padding: clamp(32px, 5vw, 64px); background: radial-gradient(70% 120% at 100% 0%, rgba(75, 224, 138, .1), transparent 60%), var(--surface); border: 1px solid var(--line-2); display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.band .ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ticks li { display: grid; grid-template-columns: 36px 1fr; gap: 14px; align-items: start; padding: 14px 0; border-top: 1px solid var(--line); color: var(--text-3); font-size: 14.5px; }
.ticks li:first-child { border-top: 0; }
.ticks li .ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-3); color: var(--accent); }
.ticks li b { display: block; color: var(--text); font-weight: 600; margin-bottom: 2px; }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--line); margin-top: 48px; padding: 56px 0 40px; color: var(--text-3); font-size: 14px; }
.foot .wrap { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 32px; }
.foot p { max-width: 40ch; }
.foot h4 { margin: 0 0 14px; color: var(--text-2); font: 500 11.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.foot a { color: var(--text-2); }
.foot a:hover { color: var(--text); }
.foot .legal { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 24px; font-size: 12.5px; line-height: 1.7; max-width: none; }
.social { display: flex; gap: 8px; margin-top: 18px; }
.social a { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); color: var(--text-2); }
.social a:hover { color: var(--text); border-color: var(--line-3); }
.social svg { width: 18px; height: 18px; }

/* ---------- forms ---------- */
.field { display: grid; gap: 8px; }
.field > span { font-weight: 550; font-size: 14px; color: var(--text); display: flex; justify-content: space-between; gap: 10px; }
.field > span small { color: var(--text-3); font-weight: 400; }
.field small { color: var(--text-3); font-size: 13px; }
.input, textarea.input, select.input { width: 100%; min-height: 50px; padding: 13px 15px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--sunk); color: var(--text); font-size: 16px; transition: border-color .15s ease, box-shadow .15s ease; }
textarea.input { min-height: 96px; resize: vertical; line-height: 1.5; }
.input:hover { border-color: var(--line-3); }
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(75, 224, 138, .12); }
.input::placeholder { color: #4e5a54; }
.pick { position: relative; display: grid; gap: 6px; padding: 18px; border-radius: 16px; border: 1px solid var(--line-2); background: var(--surface); cursor: pointer; text-align: left; transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; }
.pick:hover { border-color: var(--line-3); background: var(--surface-2); }
.pick[aria-pressed="true"], .pick[aria-checked="true"] { border-color: var(--accent); background: linear-gradient(180deg, rgba(75, 224, 138, .06), transparent 70%) var(--surface); box-shadow: 0 0 0 1px var(--accent) inset; }
.pick b { font-size: 15.5px; font-weight: 600; }
.pick p { margin: 0; color: var(--text-3); font-size: 13.5px; }
.pick:disabled { cursor: not-allowed; opacity: .55; }
.looks { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
.look { padding: 0; overflow: hidden; gap: 0; border-radius: 12px; }
.look img { aspect-ratio: 16 / 10; width: 100%; object-fit: cover; object-position: top; border-bottom: 1px solid var(--line); }
.look span { padding: 9px 11px; font-weight: 550; font-size: 13.5px; }
.look small { display: block; color: var(--text-3); font-weight: 400; font-size: 12px; margin-top: 1px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { border: 1px solid var(--line-2); background: var(--surface); color: var(--text-2); border-radius: 999px; padding: 8px 14px; font-size: 14px; font-weight: 500; cursor: pointer; min-height: 38px; transition: border-color .15s ease, color .15s ease, background .15s ease; }
.chip:hover { color: var(--text); border-color: var(--line-3); }
.chip[aria-pressed="true"] { border-color: var(--accent); color: var(--text); background: var(--accent-soft); }
.drop { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 14px; border: 1px dashed var(--line-3); background: var(--sunk); color: var(--text-3); cursor: pointer; transition: border-color .15s ease; }
.drop:hover { border-color: var(--accent); }
.drop .ico { width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center; background: var(--surface-3); color: var(--text-2); }
.drop b { color: var(--text); font-weight: 550; display: block; }
.thumbs { display: flex; gap: 10px; flex-wrap: wrap; }
.thumbs figure { margin: 0; position: relative; width: 72px; height: 72px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line-2); }
.thumbs img { width: 100%; height: 100%; object-fit: cover; }
.thumbs button { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .75); color: #fff; cursor: pointer; display: grid; place-items: center; padding: 0; }
.thumbs button svg { width: 14px; height: 14px; }
.agree { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font-size: 14px; color: var(--text-2); cursor: pointer; }
.agree input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--accent); }
.seg2, .seg3 { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 12px; background: var(--sunk); border: 1px solid var(--line); }
.seg3 { grid-template-columns: repeat(3, 1fr); }
.seg2 button, .seg3 button { border: 0; border-radius: 9px; min-height: 42px; background: none; color: var(--text-3); font-weight: 550; font-size: 14.5px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.seg2 button svg, .seg3 button svg { width: 17px; height: 17px; }
.seg2 button[aria-pressed="true"], .seg3 button[aria-pressed="true"] { background: var(--surface-3); color: var(--text); box-shadow: 0 0 0 1px var(--line-2) inset; }
.seg2 button:disabled { opacity: .45; cursor: not-allowed; }
.copyrow { display: flex; gap: 10px; align-items: center; padding: 10px 10px 10px 14px; border-radius: 12px; background: var(--sunk); border: 1px solid var(--line-2); }
.copyrow .mono { flex: 1; min-width: 0; overflow-wrap: anywhere; color: var(--text-2); }
.callout { padding: 16px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line-2); font-size: 14px; color: var(--text-2); display: grid; gap: 8px; }
.callout b { color: var(--text); font-weight: 600; }
.callout.good { background: var(--accent-soft); border-color: rgba(75, 224, 138, .22); }
.callout .t { display: flex; align-items: center; gap: 9px; }
.callout .t svg { width: 18px; height: 18px; color: var(--accent); flex: 0 0 auto; }
.warn { background: var(--amber-soft); border-color: rgba(231, 187, 85, .22); }
.warn .t svg { color: var(--amber); }
.err { color: var(--red); font-size: 14px; margin: 0; }
.stack { display: grid; gap: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.small { font-size: 13.5px; }
.faq details { border-top: 1px solid var(--line); padding: 20px 0; }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; font: 600 17px/1.4 var(--display); letter-spacing: -.01em; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: 0 0 auto; width: 10px; height: 10px; border-right: 1.75px solid var(--text-3); border-bottom: 1.75px solid var(--text-3); transform: rotate(45deg) translate(-3px, -3px); transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.faq p { color: var(--text-2); margin: 12px 0 0; max-width: 72ch; font-size: 15px; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60; padding: 12px 16px; border-radius: 12px; background: var(--surface-3); border: 1px solid var(--line-3); box-shadow: 0 16px 50px rgba(0, 0, 0, .6); max-width: calc(100% - 32px); font-size: 14.5px; }

/* ---------- the Launchpad ---------- */
.lp-hero .wrap { grid-template-columns: 1fr 1fr; }
.trust { display: flex; flex-wrap: wrap; gap: 10px 22px; color: var(--text-2); font-size: 14px; }
.trust span { display: inline-flex; align-items: center; gap: 8px; }
.trust svg { width: 17px; height: 17px; color: var(--accent); }

/* the product shot: what a launch looks like, drawn with the page's own parts */
.shot { position: relative; width: min(100%, 520px); margin: 0 auto 40px; display: grid; }
.shot .site { border-radius: 18px; overflow: hidden; border: 1px solid var(--line-2); background: var(--surface); box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .8); }
.shot .chrome { display: flex; align-items: center; gap: 6px; padding: 11px 14px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.shot .chrome i { width: 9px; height: 9px; border-radius: 50%; background: var(--surface-3); box-shadow: 0 0 0 1px var(--line-2) inset; }
.shot .chrome span { margin-left: 10px; flex: 1; padding: 5px 10px; border-radius: 7px; background: var(--sunk); font: 500 11.5px/1 var(--mono); color: var(--text-3); display: flex; align-items: center; gap: 6px; }
.shot .chrome span svg { width: 12px; height: 12px; color: var(--accent); }
.shot .page { padding: 26px 24px 24px; display: grid; gap: 16px; background: radial-gradient(80% 70% at 85% 0%, rgba(75, 224, 138, .14), transparent 60%), var(--surface); }
.shot .who { gap: 14px; }
.shot .art { width: 64px; height: 64px; border-radius: 18px; flex: 0 0 64px; background: conic-gradient(from 210deg, #1b3a2a, #4be08a, #d7f7c4, #1b3a2a); position: relative; box-shadow: 0 0 0 1px var(--line-2) inset; }
.shot .art::after { content: ""; position: absolute; inset: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff 0 9%, transparent 10%), radial-gradient(circle at 65% 35%, #fff 0 9%, transparent 10%), radial-gradient(circle at 35% 37%, #000 0 15%, transparent 16%), radial-gradient(circle at 65% 37%, #000 0 15%, transparent 16%), #2f9d5e; box-shadow: 0 6px 0 -2px #23784a; }
.shot h4 { margin: 0; font: 650 26px/1.05 var(--display); letter-spacing: -.03em; }
.shot h4 small { display: block; font: 500 12.5px/1.6 var(--mono); color: var(--text-3); letter-spacing: 0; }
.shot .lines i { display: block; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .07); margin-top: 8px; }
.shot .lines i:nth-child(2) { width: 82%; } .shot .lines i:nth-child(3) { width: 64%; }
.shot .ca { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--sunk); border: 1px solid var(--line); font: 500 12px/1 var(--mono); color: var(--text-3); }
.shot .ca b { color: var(--accent-ink); background: var(--accent); padding: 6px 10px; border-radius: 7px; font: 600 12px/1 var(--body); }
.shot .float { position: absolute; border-radius: 16px; background: rgba(17, 22, 20, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--line-2); box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .85); padding: 14px 16px; display: grid; gap: 9px; font-size: 12.5px; color: var(--text-3); }
.shot .float b { color: var(--text); font: 600 14px/1.2 var(--body); }
.shot .refund { left: -36px; bottom: -66px; width: 248px; }
.shot .refund .row { display: flex; justify-content: space-between; align-items: baseline; }
.shot .refund .row span { font: 500 12px/1 var(--mono); color: var(--accent); }
.shot .fees { right: -28px; top: 66px; width: 196px; }
.shot .fees .split .stack { height: 8px; }
.shot .fees .legend { font-size: 12px; gap: 5px; }
.shot .live { position: absolute; top: -14px; right: 22px; }
.shot .live .badge { background: var(--surface-2); padding: 7px 12px; font-size: 12.5px; color: var(--text); box-shadow: 0 0 0 1px var(--line-2) inset, 0 12px 30px -10px rgba(0, 0, 0, .7); }

/* pricing */
.price-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 16px; }
.price-card { display: grid; gap: 4px; align-content: start; }
.price-card > header { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 14px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.price-card > header h3 { font: 600 18px/1.2 var(--display); letter-spacing: -.015em; margin: 0; }
.price-row { display: grid; grid-template-columns: 36px 1fr auto; gap: 14px; align-items: center; padding: 12px 0; }
.price-row + .price-row { border-top: 1px solid var(--line); }
.price-row .ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-3); color: var(--text-2); }
.price-row b { font-weight: 600; font-size: 15px; display: block; }
.price-row small { color: var(--text-3); font-size: 13px; display: block; }
.price-row .amt { font: 600 17px/1 var(--display); letter-spacing: -.01em; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.price-row .amt small { font: 400 12px/1.4 var(--body); color: var(--text-3); }
.price-card .foot-note { margin: 10px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--text-3); }
.disc { margin-top: 16px; display: grid; grid-template-columns: minmax(240px, .9fr) 2fr; gap: 28px; align-items: center; }
.disc h3 { margin: 0 0 6px; font: 600 18px/1.25 var(--display); letter-spacing: -.015em; }
.disc p { margin: 0; color: var(--text-3); font-size: 14px; }
.tiers { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--line); border-radius: 14px; overflow: hidden; border: 1px solid var(--line); }
.tiers div { background: var(--surface-2); padding: 14px 14px 12px; display: grid; gap: 4px; }
.tiers b { font: 600 22px/1.1 var(--display); letter-spacing: -.02em; color: var(--accent); }
.tiers span { font-size: 12.5px; color: var(--text-2); line-height: 1.35; }
.tiers small { font: 500 11px/1.3 var(--mono); color: var(--text-3); }
.free { margin-top: 16px; display: grid; grid-template-columns: 1fr 1.6fr; gap: 28px; align-items: center; }
.free h3 { margin: 0 0 6px; font: 600 18px/1.25 var(--display); letter-spacing: -.015em; }
.free p { margin: 0; color: var(--text-3); font-size: 14px; }
.flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; counter-reset: f; }
.flow div { position: relative; padding: 14px 14px 14px 16px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); font-size: 13px; color: var(--text-3); }
.flow b { display: block; color: var(--text); font-size: 14px; font-weight: 600; margin-bottom: 2px; }
.flow div::before { counter-increment: f; content: counter(f); position: absolute; top: 14px; right: 14px; font: 500 11px/1 var(--mono); color: var(--text-3); }

/* the builder: a stepper, one step at a time, and the bill beside it */
.builder { display: grid; grid-template-columns: minmax(0, 1fr) 372px; gap: 24px; align-items: start; }
.panel { display: grid; gap: 20px; min-width: 0; }
.wizard { padding: 0; overflow: hidden; }
.stepper { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line); background: var(--surface); }
.stepper button { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border: 0; background: none; color: var(--text-3); font-size: 14px; font-weight: 550; text-align: left; cursor: pointer; position: relative; min-width: 0; }
.stepper button:disabled { cursor: not-allowed; }
.stepper button + button { border-left: 1px solid var(--line); }
.stepper button i { width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%; display: grid; place-items: center; font: 500 12px/1 var(--mono); font-style: normal; box-shadow: 0 0 0 1px var(--line-3) inset; }
.stepper button i svg { width: 14px; height: 14px; }
.stepper button span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stepper button[aria-current="step"] { color: var(--text); background: var(--surface-2); }
.stepper button[aria-current="step"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); }
.stepper button[aria-current="step"] i { background: var(--accent); color: var(--accent-ink); box-shadow: none; }
.stepper button.done i { background: var(--accent-soft); color: var(--accent); box-shadow: none; }
.stepper button.done { color: var(--text-2); }
.pane { padding: 28px; display: grid; gap: 22px; }
.pane > header h3 { font: 600 22px/1.2 var(--display); letter-spacing: -.02em; margin: 0; }
.pane > header p { margin: 6px 0 0; color: var(--text-3); font-size: 14.5px; }
.sub { font: 500 11.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); margin: 6px 0 -8px; }
.pane-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 28px; border-top: 1px solid var(--line); background: var(--surface); }
.pane-foot .hint { font-size: 13.5px; }
.choice { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.choice .pick { padding: 18px 18px 18px 52px; }
.choice .pick::before { content: ""; position: absolute; left: 18px; top: 20px; width: 20px; height: 20px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--line-3) inset; }
.choice .pick[aria-checked="true"]::before { box-shadow: 0 0 0 6px var(--accent) inset; }
.choice .pick .amt { position: absolute; right: 18px; top: 18px; font: 600 16px/1.2 var(--display); font-variant-numeric: tabular-nums; }
.choice .pick b { padding-right: 60px; }
.opts { display: grid; border: 1px solid var(--line-2); border-radius: 16px; overflow: hidden; }
.opt { display: grid; grid-template-columns: 40px 1fr auto 24px; gap: 14px; align-items: center; padding: 16px 18px; background: var(--surface); border: 0; text-align: left; cursor: pointer; transition: background .15s ease; }
.opt + .opt { border-top: 1px solid var(--line); }
.opt:hover:not(:disabled) { background: var(--surface-2); }
.opt .ico { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--surface-3); color: var(--text-2); }
.opt b { display: block; font-weight: 600; font-size: 15px; }
.opt small { display: block; color: var(--text-3); font-size: 13px; margin-top: 2px; }
.opt .amt { font: 600 16px/1.1 var(--display); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.opt .amt small { font: 400 11.5px/1.3 var(--body); color: var(--text-3); margin-top: 3px; }
.opt .box { width: 22px; height: 22px; border-radius: 7px; box-shadow: 0 0 0 1.5px var(--line-3) inset; display: grid; place-items: center; color: var(--accent-ink); }
.opt .box svg { width: 14px; height: 14px; opacity: 0; }
.opt[aria-checked="true"] { background: linear-gradient(90deg, rgba(75, 224, 138, .06), transparent 60%) var(--surface); }
.opt[aria-checked="true"] .ico { background: var(--accent-soft); color: var(--accent); }
.opt[aria-checked="true"] .box { background: var(--accent); box-shadow: none; }
.opt[aria-checked="true"] .box svg { opacity: 1; }
.opt:disabled { cursor: not-allowed; }
.opt:disabled .box { visibility: hidden; }
.opt:disabled > :not(.amt) { opacity: .5; }
.buybox { display: grid; gap: 14px; padding: 18px; border-radius: 16px; border: 1px solid var(--line-2); background: var(--surface); }
.buybox .t { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: center; }
.buybox .t .ico { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--surface-3); color: var(--text-2); }
.buybox .t b { display: block; font-weight: 600; font-size: 15px; }
.buybox .t small { display: block; color: var(--text-3); font-size: 13px; margin-top: 2px; }
.amount-in { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 16px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--sunk); }
.amount-in:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(75, 224, 138, .12); }
.amount-in input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font: 600 22px/1.2 var(--display); padding: 8px 0; }
.amount-in input::placeholder { color: #4e5a54; }
.amount-in .unit { font: 500 13px/1 var(--mono); color: var(--text-3); padding-right: 8px; }
.amount-in .chips { gap: 6px; }
.amount-in .chip { padding: 6px 11px; min-height: 34px; font-size: 13px; }
.domain { display: grid; gap: 12px; padding: 18px; border-radius: 16px; border: 1px solid var(--line-2); background: var(--surface); }
.domain .t { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.domain .t b { font-weight: 600; font-size: 15px; display: inline-flex; gap: 9px; align-items: center; }
.domain .t b svg { width: 18px; height: 18px; color: var(--text-2); }
.domain .copyrow .input { min-height: 38px; border: 0; background: none; padding: 0 2px; flex: 1; min-width: 0; }
.domain .copyrow .input:focus { box-shadow: none; }
.domain .owner { margin: 4px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line-2); min-width: 0; gap: 14px; }
.domain .owner fieldset { margin: 0; padding: 0; border: 0; min-width: 0; gap: 14px; }
.domain .owner legend { float: left; width: 100%; padding: 0; margin-bottom: 2px; font-size: 15px; }
.domain .owner legend b { font-weight: 600; }
.domain .owner legend small { color: var(--text-3); font-size: 13px; }
.domain .owner .grid.g2 { gap: 12px; }
.pick.row { display: flex; justify-content: space-between; align-items: center; padding: 13px 16px; }
.pick.row b { font: 500 14.5px/1.2 var(--mono); }
.pick.row .amt { font: 600 15px/1 var(--display); }
.pick.row .amt small { color: var(--text-3); font: 400 12px/1 var(--body); margin-left: 4px; }

/* the look: plain wireframes for layouts, words for feels, and a key saying what each one changes */
.wire { display: block; width: 100%; aspect-ratio: 16 / 10; color: #d7e2dc; background: var(--sunk); border-bottom: 1px solid var(--line); }
.look[aria-pressed="true"] .wire { color: #eef5f1; background: #07100b; }
.lookkey { display: grid; gap: 8px; padding: 14px 16px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); font-size: 13.5px; color: var(--text-3); }
.lookkey div { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; }
.lookkey svg { width: 17px; height: 17px; color: var(--text-2); margin-top: 1px; }
.lookkey b { color: var(--text); font-weight: 600; }
.feels { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 10px; }
.feel { padding: 13px 14px; gap: 3px; border-radius: 12px; }
.feel b { font-size: 14.5px; }
.feel p { font-size: 12.5px; line-height: 1.4; }
.feel small { font: 500 11px/1.3 var(--mono); color: var(--text-3); margin-top: 4px; letter-spacing: .02em; }
.picked { display: flex; align-items: center; gap: 9px; margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--accent-soft); border: 1px solid rgba(75, 224, 138, .2); font-size: 14px; color: var(--text); }
.picked svg { width: 16px; height: 16px; color: var(--accent); flex: 0 0 auto; }

/* the bill */
.summary { position: sticky; top: 84px; display: grid; gap: 14px; }
.bill { padding: 0; overflow: hidden; }
.bill .me { display: flex; gap: 14px; align-items: center; padding: 20px 22px; border-bottom: 1px solid var(--line); background: radial-gradient(90% 120% at 100% 0%, rgba(75, 224, 138, .1), transparent 60%), var(--surface); }
.bill .me .pic { width: 52px; height: 52px; flex-basis: 52px; }
.bill .me b { font: 600 18px/1.2 var(--display); letter-spacing: -.015em; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bill .me small { font: 500 12.5px/1.5 var(--mono); color: var(--text-3); }
.bill .body { padding: 18px 22px; display: grid; gap: 14px; }
.lines { display: grid; gap: 9px; font-size: 14px; }
.lines .grp { font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); margin-top: 6px; display: flex; justify-content: space-between; }
.lines .grp:first-child { margin-top: 0; }
.lines .grp em { font-style: normal; letter-spacing: .04em; text-transform: none; font-family: var(--body); font-size: 11.5px; }
.lines div:not(.grp) { display: flex; justify-content: space-between; gap: 12px; color: var(--text-2); }
.lines div b { color: var(--text); font: 500 13.5px/1.5 var(--mono); }
.lines .minus, .lines .minus b { color: var(--accent); }
.lines .nudge { font-size: 13px; color: var(--text-3); display: block !important; }
.lines .nudge a { color: var(--accent); }
.total { display: flex; justify-content: space-between; align-items: end; padding-top: 14px; border-top: 1px solid var(--line-2); }
.total > span { color: var(--text-3); font-size: 13.5px; }
.total > span small { display: block; font: 500 12.5px/1.5 var(--mono); }
.total b { font: 650 38px/1 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.bill .cta { display: grid; gap: 10px; padding: 0 22px 20px; }
.bill .cta p { margin: 0; text-align: center; font-size: 13px; color: var(--text-3); }
.freebox { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: start; padding: 14px; border-radius: 12px; background: var(--accent-soft); border: 1px solid rgba(75, 224, 138, .2); font-size: 13px; color: var(--text-2); }
.freebox .ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: rgba(75, 224, 138, .14); color: var(--accent); }
.freebox b { display: block; color: var(--text); font-size: 14px; font-weight: 600; margin-bottom: 2px; }
.mobilebar { display: none; }
.mine { display: grid; gap: 2px; }
.mine a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); color: var(--text-2); font-size: 14px; }
.mine a:hover { color: var(--text); text-decoration: none; }

/* order page */
.lp-amount { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.lp-amount b { font: 650 clamp(40px, 5.4vw, 60px)/1 var(--display); letter-spacing: -.035em; color: var(--text); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.lp-amount span { font: 500 18px/1 var(--mono); color: var(--text-3); }
.timer { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 999px; font: 500 13px/1 var(--mono); background: var(--surface-3); color: var(--text); box-shadow: 0 0 0 1px var(--line-2) inset; font-variant-numeric: tabular-nums; }
.timer svg { width: 14px; height: 14px; color: var(--accent); }
.timer.low { color: var(--amber); }
.timer.low svg { color: var(--amber); }
.order-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 14px; }
.order-head .badge { font-size: 13px; padding: 6px 12px; }
.order-head .h1 em { font-family: var(--mono); font-style: normal; font-size: .42em; color: var(--text-3); letter-spacing: 0; vertical-align: middle; margin-left: 6px; }
.wallets { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wallets .wide { grid-column: 1 / -1; }
.stages { list-style: none; margin: 0; padding: 0; display: grid; }
.stages li { display: grid; grid-template-columns: 28px 1fr; gap: 16px; align-items: start; padding: 0 0 22px; color: var(--text-3); position: relative; font-size: 14px; }
.stages li:last-child { padding-bottom: 0; }
.stages li:not(:last-child)::before { content: ""; position: absolute; left: 13.5px; top: 30px; bottom: 2px; width: 1px; background: var(--line-2); }
.stages li.done:not(:last-child)::before { background: var(--accent-line); }
.stages li i { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); box-shadow: 0 0 0 1px var(--line-3) inset; font: 500 12px/1 var(--mono); font-style: normal; color: var(--text-3); }
.stages li i svg { width: 14px; height: 14px; }
.stages li b { color: var(--text-2); display: block; font-weight: 600; font-size: 15px; margin-bottom: 1px; }
.stages li.done i { background: var(--accent); color: var(--accent-ink); box-shadow: none; }
.stages li.now i { background: var(--accent-soft); color: var(--accent); box-shadow: 0 0 0 1.5px var(--accent) inset; }
.stages li.now b { color: var(--text); }
.kit { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.kit-item { display: grid; border-radius: 12px; overflow: hidden; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--text); }
.kit-item img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.kit-item span { padding: 9px 11px; font-size: 13.5px; font-weight: 550; }
.kit-item small { display: block; color: var(--text-3); font: 500 12px/1.3 var(--mono); }
.card-title { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.card-title > b, .card-title h2 { font: 600 18px/1.25 var(--display); letter-spacing: -.015em; margin: 0; display: inline-flex; align-items: center; gap: 10px; }
.card-title svg { width: 19px; height: 19px; color: var(--text-2); }

/* recap */
.week-now { display: grid; grid-template-columns: 1fr 2fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.week-now > div { background: var(--surface); padding: 26px 28px; }
.week-now h2 { margin: 8px 0 6px; font: 620 30px/1.1 var(--display); letter-spacing: -.03em; }
.week-now .nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; align-content: center; }
.week-now .nums div { display: grid; gap: 4px; }
.week-now .nums b { font: 600 36px/1 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.week-now .nums b.zero { color: var(--text-3); }
.week-now .nums span { font-size: 13px; color: var(--text-3); }
.weeks { display: grid; }
.week { display: grid; grid-template-columns: 180px 1fr auto; gap: 28px; padding: 26px 0; border-top: 1px solid var(--line); align-items: start; }
.week:last-child { border-bottom: 1px solid var(--line); }
.week .when b { display: block; font: 600 17px/1.25 var(--display); letter-spacing: -.015em; }
.week .when small { font: 500 12px/1.6 var(--mono); color: var(--text-3); }
.week .what { display: grid; gap: 12px; min-width: 0; }
.week .facts { display: flex; gap: 20px; flex-wrap: wrap; font-size: 13.5px; color: var(--text-3); }
.week .facts span { display: inline-flex; align-items: center; gap: 7px; }
.week .facts svg { width: 15px; height: 15px; }
.week .facts b { color: var(--text); font: 500 13.5px/1 var(--mono); }
.week .facts .zero b { color: var(--text-3); }
.cchips { display: flex; flex-wrap: wrap; gap: 8px; }
.cchip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--text); font-size: 13.5px; font-weight: 500; text-decoration: none !important; }
.cchip:hover { border-color: var(--line-3); }
.cchip .pic { width: 26px; height: 26px; flex-basis: 26px; border-radius: 50%; font-size: 12px; }
.cchip small { font: 500 12px/1 var(--mono); color: var(--text-3); }
.week .more { font-size: 13.5px; color: var(--text-3); display: grid; gap: 4px; }
.week .more b { color: var(--text-2); font-weight: 550; }
.week .pot { text-align: right; min-width: 120px; }
.week .pot b { display: block; font: 600 18px/1.2 var(--display); font-variant-numeric: tabular-nums; }
.week .pot small { color: var(--text-3); font-size: 12.5px; }
.ranks .stat b { font-size: 18px; line-height: 1.25; display: flex; gap: 8px; align-items: center; }
.frogrow { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); }
.coin-hero { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center; }
.links-row { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- small screens ---------- */
@media (max-width: 1080px) {
  .shot .refund { left: -8px; } .shot .fees { right: -8px; }
}
@media (max-width: 980px) {
  .hero .wrap, .lp-hero .wrap, .band, .builder, .price-grid, .disc, .free { grid-template-columns: 1fr; }
  .shot { margin-top: 24px; margin-bottom: 30px; }
  .summary { position: static; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .g4 { grid-template-columns: repeat(2, 1fr); }
  .g3 { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .foot .wrap { grid-template-columns: 1fr 1fr; }
  .foot .wrap > :first-child { grid-column: 1 / -1; }
  .week-now { grid-template-columns: 1fr; }
  .week { grid-template-columns: 150px 1fr; }
  .week .pot { grid-column: 2; text-align: left; }
  .mobilebar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; gap: 12px; align-items: center; justify-content: space-between; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: rgba(12, 16, 14, .94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--line-2); }
  .mobilebar b { font: 650 22px/1 var(--display); letter-spacing: -.02em; display: block; }
  .mobilebar small { color: var(--text-3); font: 500 12px/1.4 var(--mono); }
  .mobilebar .btn { min-height: 46px; }
  body[data-page="launch"] .foot { padding-bottom: 110px; }
}
@media (max-width: 820px) {
  .links { display: none; position: absolute; top: 64px; left: 0; right: 0; flex-direction: column; align-items: stretch; padding: 10px 20px 18px; background: rgba(7, 10, 9, .98); border-bottom: 1px solid var(--line); }
  .links.open { display: flex; }
  .links a { padding: 13px 12px; font-size: 16px; }
  .links .btn { margin: 8px 0 0; }
  .menu { display: grid; }
  .stepper button span { display: none; }
  .stepper button { justify-content: center; }
  .stepper button[aria-current="step"] span { display: inline; }
  .stepper { display: flex; }
  .stepper button { flex: 0 0 auto; padding-inline: 16px; }
  .stepper button[aria-current="step"] { flex: 1 1 auto; justify-content: flex-start; }
  .tiers { grid-template-columns: repeat(2, 1fr); }
  .tiers div:last-child { grid-column: 1 / -1; }
  .flow { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .wrap { width: calc(100% - 32px); }
  .steps, .g2, .g3, .g4, .choice, .wallets { grid-template-columns: 1fr; }
  .step { padding-right: 0; }
  .idea { grid-template-columns: auto 1fr; }
  .idea .count { grid-column: 2; text-align: left; }
  .blip { width: 34px; height: 34px; margin: -17px 0 0 -17px; }
  .card { padding: 20px; }
  .card.bill, .card.wizard { padding: 0; }
  .pane { padding: 22px 18px; }
  .pane-foot { padding: 14px 18px; }
  .table { font-size: 13.5px; }
  .table td, .table th { padding-inline: 8px; }
  .hide-s { display: none; }
  .proof > div { padding-right: 18px; margin-right: 18px; }
  .proof b { font-size: 22px; }
  .opt { grid-template-columns: 36px 1fr auto; gap: 12px; padding: 14px; }
  .opt .box { display: none; }
  .opt .ico { width: 36px; height: 36px; }
  .amount-in { flex-wrap: wrap; }
  .amount-in .chips { width: 100%; padding-bottom: 4px; }
  .shot .float { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: auto; margin-top: 10px; }
  .shot .live { right: 12px; }
  .week { grid-template-columns: 1fr; gap: 12px; }
  .week .pot { grid-column: 1; }
  .week-now .nums { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .radar .sweep, .ticker .run, .blip::after { animation: none; }
  .coin, .btn, .blip, .pick, .opt { transition: none; }
}

/* Spacing and small layouts the pages use, as classes: the site's security policy allows no inline styles, so these stand in for them
   (and win like them). */
.ai-center { align-items:center !important; }
.ai-start { align-items:start !important; }
.cols-12-1 { grid-template-columns:1.2fr 1fr !important; }
.cols-fill200 { grid-template-columns:repeat(auto-fill,minmax(200px,1fr)) !important; }
.gap10 { gap:10px !important; }
.gap12 { gap:12px !important; }
.gap18 { gap:18px !important; }
.h-body22 { font-size:20px !important; font-family:var(--display) !important; font-weight:600 !important; letter-spacing:-.015em !important; }
.list-tight { margin:0 !important; padding-left:18px !important; display:grid !important; gap:8px !important; font-size:14.5px !important; }
.m-faq { margin:12px 0 24px !important; }
.m0 { margin:0 !important; }
.mb12 { margin-bottom:12px !important; }
.mb14 { margin-bottom:14px !important; }
.mb2 { margin-bottom:2px !important; }
.mb6 { margin-bottom:6px !important; }
.mt10 { margin-top:10px !important; }
.mt12 { margin-top:12px !important; }
.mt14 { margin-top:14px !important; }
.mt16 { margin-top:16px !important; }
.mt28 { margin-top:28px !important; }
.p-sm4 { margin:0 0 4px !important; font-size:14px !important; }
.p-sm6 { margin:0 0 6px !important; font-size:14px !important; }
.pb0 { padding-bottom:0 !important; }
.pt-page { padding-top:clamp(28px,5vw,56px) !important; }
.pt0 { padding-top:0 !important; }
.pt36 { padding-top:36px !important; }
.row-center { display:flex !important; gap:12px !important; flex-wrap:wrap !important; justify-content:center !important; }
.stack-center { display:grid !important; gap:22px !important; justify-items:center !important; text-align:center !important; }
.stack10 { display:grid !important; gap:10px !important; }
.stack12 { display:grid !important; gap:12px !important; }
.stack16 { display:grid !important; gap:16px !important; align-content:start !important; }
.w1080 { max-width:1080px !important; }
.w860 { max-width:860px !important; }
.js-start { justify-self:start !important; }
@media (max-width: 980px) { .cols-12-1 { grid-template-columns: 1fr !important; } }
.big-mark { color: var(--accent); } .big-mark svg { width: 88px; height: 88px; }
.connect { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.connect .btn { min-height: 48px; gap: 10px; }
.connect .btn img { width: 20px; height: 20px; border-radius: 5px; }
.connect .btn.on { box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-soft); }
.or { display: flex; align-items: center; gap: 12px; color: var(--text-3); font-size: 13px; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.connect .btn { min-width: 0; }
@media (max-width: 560px) { .connect { grid-template-columns: 1fr; } }