/* higgsfamily. The look, layered over the base components in style.css. DESIGN.md is the contract.
   Near-black with one neon-lime accent; green and orange only ever mean up and down. A serif
   display face for headlines, Inter for reading, a mono for tickers and labels. */

:root {
  --font-display: 'Instrument Serif', 'Iowan Old Style', 'Times New Roman', serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --r-card: 20px; --r-inner: 12px;
  --bg: #f4f6ee; --surface: #ffffff; --surface-2: #ebeee3; --line: #dbe0d2;
  --ink: #0a0d0b; --muted: #5c655e; --accent: #ccff00; --accent-ink: #0a0d0b; --accent-text: #2f7d00;
  --up: #00a004; --down: #d9480f;
  color-scheme: light;
}
:root[data-theme='dark'] {
  --bg: #070908; --surface: #0e1210; --surface-2: #151a17; --line: #222a24;
  --ink: #f1f5ec; --muted: #8d9a90; --accent: #ccff00; --accent-ink: #0a0d0b; --accent-text: #ccff00;
  --up: #00c805; --down: #ff5a1f;
  color-scheme: dark;
}

/* ---------- type ---------- */
.display { font-family: var(--font-display); font-weight: 400; text-transform: none; letter-spacing: -0.02em; line-height: 1; }
.display em { font-style: italic; color: var(--accent-text); }
.eyebrow { font-family: var(--font-mono); font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: 0.1em; }
.section-head h2, .band h2 { font-size: 52px; }
.section-head { justify-items: center; text-align: center; }
.section-head p { margin-inline: auto; }
.page-h { font-family: var(--font-display); font-weight: 400; font-size: 40px; line-height: 44px; letter-spacing: -0.02em; }

/* ---------- controls: pills ---------- */
.btn, .btn-secondary, .btn-ghost { border-radius: var(--r-pill); }
.btn { font-weight: 700; }
.btn-secondary { background: transparent; border-color: var(--line); }
.btn-secondary:hover { border-color: var(--ink); }
.tabs { border-radius: var(--r-pill); }
.tabs button { border-radius: var(--r-pill); }
.tabs button[aria-selected='true'] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.pill, .icon-btn { border-radius: var(--r-pill); background: transparent; }
.meter > i { background: var(--up); }
.tag { border-radius: var(--r-pill); padding: 0 8px; font-family: var(--font-mono); font-weight: 500; }
.input, .textarea { border-radius: var(--r-inner); }
.stepper li[data-state='done'] .n { background: var(--up); border-color: var(--up); color: #fff; }

/* ---------- header, tape, footer ---------- */
.header { background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.wordmark { gap: 10px; }
.wordmark img { border-radius: 8px; }
.wm { display: inline-flex; align-items: baseline; font-size: 17px; font-weight: 600; letter-spacing: -0.02em; }
.wm em { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 23px; line-height: 1; letter-spacing: -0.01em; color: var(--accent-text); margin-left: 1px; }
.nav a { border-radius: var(--r-pill); }
.header-right .wide { margin-left: 0; }

.tape { border-bottom: 1px solid var(--line); overflow: hidden; }
.tape-run { display: flex; width: max-content; animation: tape 80s linear infinite; }
.tape:hover .tape-run { animation-play-state: paused; }
.tape-set { display: flex; }
.tape a { display: inline-flex; align-items: center; gap: var(--s2); height: 34px; padding: 0 var(--s4); border-right: 1px solid var(--line); font: 500 12px/16px var(--font-mono); white-space: nowrap; }
.tape a b { font-weight: 700; }
.tape a:hover b { color: var(--accent-text); }
@keyframes tape { to { transform: translateX(-50%); } }

.footer .container { align-items: flex-start; padding-block: var(--s5); }
.foot-col { display: grid; gap: var(--s2); max-width: 48ch; }
.foot-right { text-align: right; justify-items: end; }
.foot-brand .wm { color: var(--ink); }
.footer a { text-decoration: underline; text-underline-offset: 2px; }

/* ---------- home: hero ---------- */
.home-hero { display: grid; justify-items: center; text-align: center; gap: var(--s5); padding-top: var(--s6); }
.home-hero h1 { font-size: clamp(52px, 8.4vw, 124px); line-height: 0.94; }
.lede { font-size: 18px; line-height: 28px; color: var(--muted); max-width: 58ch; }
.premise { width: 100%; max-width: 680px; display: flex; gap: var(--s2); padding: 6px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); transition: border-color 120ms; }
.premise:focus-within { border-color: var(--accent-text); }
.premise input { flex: 1; min-width: 0; height: 48px; padding: 0 var(--s4); background: none; border: 0; outline: none; font-size: 16px; }
.premise input::placeholder { color: var(--muted); }
.premise .btn { flex: none; }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); }
.chip-btn { height: 32px; padding: 0 14px; border-radius: var(--r-pill); border: 1px solid var(--line); font-size: 13px; font-weight: 500; color: var(--muted); white-space: nowrap; transition: border-color 120ms, color 120ms; }
.chip-btn:hover { color: var(--ink); border-color: var(--muted); }
.chip-btn[aria-pressed='true'] { color: var(--accent-text); border-color: var(--accent-text); }

/* The family portrait: five arched frames on one baseline, the middle one tallest. */
.lineup { width: 100%; max-width: 1040px; display: grid; grid-template-columns: 1fr 1.18fr 1.4fr 1.18fr 1fr; gap: var(--s3); align-items: end; margin-top: var(--s4); }
.lineup .portrait { aspect-ratio: 4 / 5; border-radius: 999px 999px var(--r-card) var(--r-card); border: 1px solid var(--line); }
.lineup-note { font: 500 11px/16px var(--font-mono); letter-spacing: 0.06em; color: var(--muted); }

.home-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid var(--line); }
.home-stats > div { display: grid; justify-items: center; gap: var(--s1); padding: var(--s5) var(--s3); border-left: 1px solid var(--line); text-align: center; }
.home-stats > div:first-child { border-left: 0; }
.home-stats b { font-family: var(--font-display); font-weight: 400; font-size: 44px; line-height: 48px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

/* ---------- board card ---------- */
.inf { border-radius: var(--r-card); }
.inf:hover { border-color: var(--muted); }
.inf .portrait { border-radius: 14px; aspect-ratio: 4 / 5; }
.inf-title b { font-size: 16px; line-height: 22px; }
.tick { font: 500 12px/16px var(--font-mono); color: var(--muted); white-space: nowrap; }
.quote { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s2); margin-top: auto; padding-top: var(--s2); }
.quote-v { display: block; font-size: 20px; line-height: 24px; font-weight: 700; letter-spacing: -0.01em; }
.quote-l { display: block; font-size: 11px; line-height: 14px; color: var(--muted); }
.delta { height: 24px; padding: 0 8px; border-radius: var(--r-pill); display: inline-flex; align-items: center; font: 700 12px/16px var(--font-mono); background: color-mix(in srgb, currentColor 12%, transparent); }
.curve-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s2); font-size: 11px; line-height: 14px; color: var(--muted); }
.curve-line .meter { height: 4px; }

/* ---------- home: how it works ---------- */
.how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.how > li { display: grid; grid-template-rows: auto auto 1fr auto; gap: var(--s3); padding: var(--s5); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.how .n { font: 500 12px/16px var(--font-mono); color: var(--accent-text); letter-spacing: 0.1em; }
.how h3 { font-family: var(--font-display); font-weight: 400; font-size: 32px; line-height: 34px; letter-spacing: -0.01em; }
.how p { color: var(--muted); }
.how .demo { min-height: 84px; display: grid; align-content: center; gap: var(--s2); padding: var(--s3) var(--s4); border-radius: var(--r-inner); background: var(--surface-2); font-size: 13px; line-height: 18px; }
.how .demo q { font-family: var(--font-display); font-size: 20px; line-height: 24px; font-style: italic; quotes: '\201C' '\201D'; }
.how .demo .row { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.how .demo .ok::before { content: '\2713'; color: var(--up); font-weight: 700; margin-right: var(--s2); }

/* ---------- the fee split (home and create) ---------- */
.fee-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s6); align-items: center; padding: var(--s6); }
.fee-copy { display: grid; gap: var(--s3); }
.fee-copy h2 { font-size: 44px; }
.fee-copy p { color: var(--muted); }
.splitter { display: grid; gap: var(--s4); }
.splitbar { display: flex; height: 44px; border-radius: var(--r-inner); overflow: hidden; border: 1px solid var(--line); }
.splitbar > i { display: block; min-width: 2px; transition: width 200ms; }
.seg-protocol { background: var(--surface-2); }
.seg-platform { background: var(--muted); }
.seg-video { background: var(--up); }
.seg-creator { background: var(--accent); }
.legend { display: grid; gap: 0; }
.legend > div { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: center; gap: var(--s3); padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; line-height: 20px; }
.legend > div:first-child { border-top: 0; }
.legend i { width: 12px; height: 12px; border-radius: 4px; border: 1px solid var(--line); }
.legend dd { font: 700 13px/18px var(--font-mono); }
.legend small { display: block; font-size: 12px; line-height: 16px; color: var(--muted); }
.range { display: grid; gap: var(--s2); }
.range-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); font-size: 13px; font-weight: 600; }
.range-head output { font: 700 13px/18px var(--font-mono); color: var(--accent-text); }
.range input { width: 100%; height: 24px; margin: 0; accent-color: var(--accent-text); cursor: pointer; }
.range-ends { display: flex; justify-content: space-between; font-size: 12px; line-height: 16px; color: var(--muted); }

.details { border-radius: var(--r-card); }
.band { border-radius: var(--r-card); }
.band h2 { font-size: clamp(40px, 6vw, 80px); }

/* ---------- create ---------- */
.premise-area { min-height: 104px; height: auto; padding: var(--s4); font-size: 17px; line-height: 26px; }
.panel .chips { justify-content: flex-start; }
.fold { border: 1px solid var(--line); border-radius: var(--r-inner); }
.fold > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 48px; padding: 0 var(--s4); cursor: pointer; font-size: 14px; font-weight: 600; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::after { content: '+'; font: 500 18px/1 var(--font-mono); color: var(--muted); }
.fold[open] > summary::after { content: '\2212'; }
.fold > summary span { font-weight: 400; color: var(--muted); font-size: 13px; }
.fold-body { padding: 0 var(--s4) var(--s4); display: grid; gap: var(--s5); }
.fold-body > * + * { margin-top: 0; }
.sign { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--r-inner); }
.sign > div { display: flex; justify-content: space-between; gap: var(--s4); padding: 10px var(--s4); border-top: 1px solid var(--line); font-size: 13px; line-height: 18px; }
.sign > div:first-child { border-top: 0; }
.sign dt { color: var(--muted); }
.sign dd { font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.sign dd.mono { font: 500 12px/18px var(--font-mono); }
.stage .portrait { aspect-ratio: 4 / 5; }
.tile, .tile-pic, .brain { border-radius: var(--r-inner); }

/* ---------- coin page ---------- */
.ident-text h1 { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.02em; }
.chart-price { font-family: var(--font-display); font-weight: 400; }

/* ---------- responsive ---------- */
@media (max-width: 959px) {
  .fee-card { grid-template-columns: minmax(0, 1fr); padding: var(--s5); gap: var(--s5); }
  .fee-copy h2 { font-size: 36px; }
}
@media (max-width: 819px) {
  .how { grid-template-columns: minmax(0, 1fr); }
  .section-head h2, .band h2 { font-size: 40px; }
  .home-stats b { font-size: 32px; line-height: 36px; }
  .foot-right { text-align: left; justify-items: start; }
}
@media (max-width: 639px) {
  .lineup { grid-template-columns: 1fr 1.3fr 1fr; gap: var(--s2); }
  .lineup .portrait:nth-child(1), .lineup .portrait:nth-child(5) { display: none; }
  .premise { flex-direction: column; border-radius: var(--r-card); padding: var(--s2); }
  .premise .btn { width: 100%; }
  .lede { font-size: 16px; line-height: 24px; }
  .home-stats > div { padding: var(--s4) var(--s1); }
  .home-stats b { font-size: 26px; line-height: 30px; }
  .how > li { padding: var(--s4); }
}
@media (prefers-reduced-motion: reduce) { .tape-run { animation: none; } }

/* Small phones: the mark alone carries the brand in the header; the footer still spells it out. */
@media (max-width: 639px) {
  .wordmark .wm, .wordmark .wm span { display: none; }
  .footer .wm, .footer .wm span { display: inline-flex; }
  .premise input { text-align: center; }
  .chart-price { font-size: 26px; }
}
@media (max-width: 639px) {
  .stage-foot { flex-wrap: wrap; }
  .stage-foot > span:first-child { flex: 1 1 100%; }
}

/* Studio motions: a looping preview in the same tile shape as the picture tiles. */
.tile-pic video { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--surface-2); }

/* The launchpad's X account: an icon in the header (desktop), a handle in the footer (always). */
#x-link svg { width: 15px; height: 15px; }
.foot-x { display: inline-flex; align-items: center; gap: var(--s2); color: var(--ink); text-decoration: none !important; font: 500 13px/18px var(--font-mono); }
.foot-x svg { width: 13px; height: 13px; }
.foot-x:hover span { text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 639px) { #x-link { display: none; } }

/* Trade panel: the slippage choice, one quiet row under the quick amounts. */
.slip { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-top: var(--s3); }
.slip-opts { display: inline-flex; gap: 4px; }
.slip-opts button { height: 26px; padding: 0 10px; border-radius: var(--r-pill); border: 1px solid var(--line); font: 500 12px/1 var(--font-mono); color: var(--muted); }
.slip-opts button:hover { color: var(--ink); border-color: var(--muted); }
.slip-opts button[aria-pressed='true'] { color: var(--accent-text); border-color: var(--accent-text); }

/* The launchpad's own coin: a pill by the Launch button; where the header is too narrow for it,
   a strip under the header instead. One click copies the whole address. */
.ca-pill, .ca-bar button { display: inline-flex; align-items: center; gap: var(--s2); height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-pill); font-size: 13px; white-space: nowrap; transition: border-color 120ms; }
.ca-pill:hover, .ca-bar button:hover { border-color: var(--accent-text); }
.ca-pill b, .ca-bar b { font-weight: 700; color: var(--accent-text); }
.ca-pill code, .ca-bar code { font: 500 12px/1 var(--font-mono); color: var(--muted); }
.ca-pill svg, .ca-bar svg { width: 14px; height: 14px; color: var(--muted); }
.ca-bar { display: none; border-bottom: 1px solid var(--line); }
.ca-bar .container { min-height: 46px; display: flex; align-items: center; justify-content: center; gap: var(--s3); font-size: 13px; }
.ca-bar button { height: 30px; }
.ca-bar a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
@media (max-width: 1099px) { .ca-pill { display: none; } .ca-bar { display: block; } }
@media (max-width: 419px) { .ca-bar .eyebrow { display: none; } }