/* Fill exactly the viewport minus the topbar so the landing is one clean
   screen — no phantom scroll. The headline block and the spotlight center
   together as ONE composition with a bounded gap; on tall viewports the pair
   floats as a unit instead of drifting apart (headline centered, spotlight
   pinned to the bottom edge). min-height (not height) means a short viewport
   just grows the hero, so centering never clips the top. */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(var(--s-6), 6vh, var(--s-16));
  min-height: calc(100dvh - 61px);
  overflow-x: clip;
}
/* The page wears the brand it's previewing: a soft wash of the spotlighted
   primary (--accent is set on .hero by showcase.js). background-color morphs
   smoothly as the spotlight cycles; the mask shapes it into an ambient glow. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: var(--accent);
  -webkit-mask: radial-gradient(66% 52% at 50% 34%, #000, transparent 74%);
  mask: radial-gradient(66% 52% at 50% 34%, #000, transparent 74%);
  opacity: 0.17;
  transition: background-color var(--dur-3) var(--ease);
}
.hero-main,
.showcase { position: relative; z-index: 1; }
.hero-main {
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-5);
  padding: var(--s-10) var(--content-pad) 0;
  text-align: center;
}

/* ── The command line ─────────────────────────────────────────────────────
   The hero IS the product's one interaction: $ brandcurl <domain> ⏎.
   Bare oversized mono on the page — no pill, no box — with a hairline that
   takes the accent on focus. The $ and the run keycap wear the cycling brand
   (--accent/--accent-ink are painted on .hero by showcase.js) and morph with
   it — the thesis, demonstrated by the thing you type into. */
.cmd {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 0.45ch;
  width: min(720px, 100%);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: var(--s-4) 0;
  font-family: var(--font-mono);
  font-size: clamp(24px, 3.6vw, 40px);
  transition: border-color var(--dur-2) var(--ease);
}
.cmd:focus-within { border-color: var(--accent); }

.cmd-prompt {
  color: var(--accent);
  transition: color var(--dur-3) var(--ease);
  user-select: none;
}
.cmd-bin {
  color: var(--ink);
  font-weight: var(--w-med);
  user-select: none;
}
.cmd-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  color: var(--ink);
  caret-color: var(--accent);
  font: inherit;
}
.cmd-input:focus-visible { outline: none; } /* the hairline is the indicator */
.cmd-input::placeholder { color: var(--ink-4); opacity: 1; }
.cmd-input:disabled { color: var(--ink-3); }

/* run ⏎ — a keycap, not a pill. Fixed size against the oversized line. */
.cmd-run {
  align-self: center;
  flex: 0 0 auto;
  background: var(--accent);
  border: 0;
  border-radius: var(--r-sm);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.16);
  color: var(--accent-ink);
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: var(--t-sm);
  font-weight: var(--w-semi);
  padding: var(--s-2) var(--s-4);
  white-space: nowrap;
  transition: transform var(--dur-1) var(--ease), opacity var(--dur-1) var(--ease),
    background-color var(--dur-3) var(--ease), color var(--dur-3) var(--ease);
}
.cmd-run kbd { font-family: inherit; }
/* Narrow screens: the keycap goes icon-only and the line steps down a size,
   so the ghost domain never hides behind the button. */
@media (max-width: 480px) {
  .cmd { font-size: 20px; }
  .cmd-run-label { display: none; }
  .cmd-run { padding: var(--s-2) var(--s-3); }
}
.cmd-run:not(:disabled):hover { transform: translateY(-1px); }
.cmd-run:not(:disabled):active { transform: translateY(0); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.16); }
.cmd-run:disabled {
  background: var(--surface-3);
  box-shadow: none;
  color: var(--ink-3);
  cursor: not-allowed;
}

/* Comment lines are the page's explanatory voice: same device below the
   prompt and beside the try-chips. The prompt acts; comments explain.
   Left-aligned under the prompt — comments live at the line start. */
.cmd-meta {
  width: min(720px, 100%);
  text-align: left;
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: var(--t-data);
}

.suggest {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-2);
  left: 0;
  max-height: calc(var(--s-20) + var(--s-20) + var(--s-20) + var(--s-20));
  overflow-y: auto;
  position: absolute;
  right: 0;
  text-align: left;
  top: calc(100% + var(--s-2));
  z-index: 1;
}

.suggest[hidden] {
  display: none;
}

.suggest-item {
  align-items: center;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border-soft);
  color: var(--ink);
  cursor: pointer;
  display: grid;
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  gap: var(--s-4);
  grid-template-columns: minmax(0, 1fr) auto;
  padding: var(--s-3) var(--s-4);
  text-align: left;
  transition: background var(--dur-1) var(--ease);
  width: 100%;
}

.suggest-item:last-child {
  border-bottom: 0;
}

.suggest-item:hover,
.suggest-item[aria-selected="true"] {
  background: var(--surface-2);
}

.suggest-item span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.suggest-item span:last-child {
  color: var(--ink-3);
  font-size: var(--t-label);
  white-space: nowrap;
}

/* ── Command output ──────────────────────────────────────────────────────
   Running prints like a terminal: stage lines stream under the prompt,
   finished ones settle into a dim ✓, the live one spins (braille frames set
   by JS). Cancel is ^C, because of course it is. */
.cmd-out {
  display: none;
  width: min(720px, 100%);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-2);
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--t-data);
}
.cmd-out.is-on { display: flex; }
.cmd-log {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}
.cmd-line {
  display: flex;
  gap: var(--s-2);
  color: var(--ink-2);
}
.cmd-mark {
  flex: 0 0 auto;
  width: 1.2ch;
  color: var(--accent);
  transition: color var(--dur-2) var(--ease);
}
.cmd-line.is-done,
.cmd-line.is-done .cmd-mark { color: var(--ink-4); }

.cmd-cancel {
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--ink-4);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--t-data);
  transition: color var(--dur-1) var(--ease);
}
.cmd-cancel:not(:disabled):hover { color: var(--err); }
.cmd-cancel:disabled { cursor: not-allowed; }

/* Errors print, they don't panel: an ✗ line in the output column. Cancels
   print as ^C — the shell's own vocabulary for "you stopped it". */
.hero-error {
  width: min(720px, 100%);
  text-align: left;
  color: var(--err);
  font-family: var(--font-mono);
  font-size: var(--t-data);
  line-height: 1.6;
}
.hero-error::before { content: '✗ '; }
.hero-error.note { color: var(--ink-3); }
.hero-error.note::before { content: '^C '; }

/* Landing spotlight — a preview of what an extraction yields (showcase.js). One
   card auto-cycles through real brands, tinting itself to each brand's primary;
   a name-chip strip browses. Color- and product-forward, never Brandfetch's grid. */
.showcase {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
  padding-bottom: var(--s-8);
  width: 100%;
}
/* The comment device again — leads the try-chips row. */
.sp-comment {
  font-family: var(--font-mono);
  font-size: var(--t-data);
  color: var(--ink-3);
  align-self: center;
  user-select: none;
}

/* Flat, not floating: a bordered region of the hero, same width as the command
   above it. No surface fill and no inner glow — the intensified hero wash shows
   through, so the card reads as structure, and the pin stays the one object
   with real depth. */
.sp-card {
  position: relative;
  width: min(720px, 100%);
  text-align: left;
  display: block;
  padding: var(--s-6);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  background: transparent;
  cursor: pointer;
  overflow: hidden;
  transition: border-color var(--dur-2) var(--ease);
}
.sp-card::before { content: none; }
.sp-card:hover { border-color: var(--accent); }

.sp-body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.sp-card.is-fading .sp-body { opacity: 0; transform: translateY(4px); }

.sp-top { display: flex; align-items: center; gap: var(--s-2); }
.sp-dot {
  width: var(--s-2); height: var(--s-2); border-radius: 50%;
  background: var(--accent, var(--ink-3));
  animation: spDotPulse 2.4s var(--ease) infinite;
}
@keyframes spDotPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(0.65); opacity: 0.55; }
}
.sp-domain { font-family: var(--font-mono); font-size: var(--t-label); color: var(--ink-3); }
/* Real favicons (showcase.js `mark`) — small, slightly rounded, never stretched. */
.sp-mark { width: 16px; height: 16px; border-radius: 3px; flex: 0 0 auto; }
.sp-go {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  color: var(--accent, var(--ink-2));
  opacity: 0.9;
  transition: transform var(--dur-1) var(--ease);
}
.sp-card:hover .sp-go { transform: translateX(3px); }

.sp-word {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-ui);
  font-size: clamp(30px, 6vw, 46px);
  font-weight: var(--w-bold);
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--ink);
}
/* The brand's real wordmark as an ink-painted alpha mask (showcase.js sets the
   mask-image + aspect-ratio per brand) — theme-proof whatever the SVG's fills. */
.sp-wm {
  display: block;
  height: clamp(28px, 5vw, 36px);
  background: var(--ink);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: left center;
  mask-position: left center;
}

.sp-palette { display: flex; gap: var(--s-3); }
/* Swatch-book chips: color block above a printed label strip — the poetic
   name leads (nobody else has it), the hex sits under it in small mono. */
.sp-swatch {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--surface);
}
/* Neutral hairline that reads on any brand color in either theme — deliberately
   token-free (no theme token stays legible over an arbitrary swatch). */
.sp-chip {
  height: var(--s-14);
  box-shadow: inset 0 0 0 1px rgba(127, 127, 127, 0.12);
  transition: height var(--dur-1) var(--ease);
}
.sp-swatch:hover .sp-chip { height: calc(var(--s-14) + 4px); }
.sp-chip-label {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: var(--s-2) var(--s-3);
  border-top: 1px solid var(--border-soft);
}
.sp-cname {
  font-family: var(--font-ui);
  font-size: var(--t-label);
  font-weight: var(--w-med);
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sp-hex { font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: 0.03em; color: var(--ink-3); }

.sp-type {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  border-top: 1px solid var(--border-soft);
  padding-top: var(--s-3);
}
.sp-tlabel {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.sp-tname { font-family: var(--font-ui); font-size: var(--t-sm); font-weight: var(--w-med); color: var(--ink); }

/* The chip strip hugs the card's column (same width) so the whole spotlight
   reads as one composed unit — two tight rows, never a full-width sprawl. */
/* Pills sit above the card and share its width — one aligned column with the
   command line above. */
.sp-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-2);
  width: min(720px, 100%);
}
.sp-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid transparent;
  background: var(--surface-2);
  color: var(--ink-3);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  padding: 3px 10px;
  border-radius: var(--r-pill);
  transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.sp-tab .sp-mark { width: 13px; height: 13px; }
.sp-tab:hover { color: var(--ink); }
.sp-tab[aria-current="true"] { color: var(--ink); background: var(--surface-3); border-color: var(--border); }

@media (prefers-reduced-motion: reduce) {
  .sp-body { transition: none; }
  .sp-card.is-fading .sp-body { opacity: 1; transform: none; }
  .sp-dot { animation: none; }
}