/*
 * Single dark theme, deliberately — the reference is the GitHub homepage,
 * which does not follow the viewer's setting. Everything is painted
 * explicitly so the page holds on either host ground.
 */
:root {
  color-scheme: dark;

  --ground:  #08090d;   /* the page */
  --lift:    #0d1017;   /* alternating band */
  --surface: #12161f;   /* panels */
  --sunk:    #171c27;

  --ink:     #e9eef7;
  --ink-2:   #9aa6ba;
  --ink-3:   #6b7688;

  --rule:    #1e2431;
  --rule-2:  #2b3342;

  /* the brand blue, lifted for a dark ground */
  --g1: #a8c3f2;
  --g2: #86a9ea;
  --g3: #6690e2;
  --g4: #4d84e8;
  --g5: #3366cc;
  --g6: #2a55ab;
  --g7: #1d3d7d;

  --accent:    #6ea0f5;
  --accent-bg: #14233f;
  --on-dark:   #e9eef7;

  --glow: radial-gradient(78% 74% at 50% 2%, rgba(51,102,204,.32) 0%, rgba(51,102,204,.15) 38%, rgba(51,102,204,.06) 62%, transparent 88%);

  --mono:    ui-monospace, SFMono-Regular, Menlo, "Cascadia Mono", monospace;
  --sans:    "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --display: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --wrap: 68rem;
  --prose: 40rem;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }

/* ── shell ──────────────────────────────────────────────── */

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem);
}

section {
  padding: clamp(4rem, 9vw, 7rem) 0;
  border-top: 1px solid var(--rule);
}

section.alt   { background: var(--lift); }
section.sunk  { background: var(--sunk); }

h1, h2, h3 {
  font-family: var(--display);
  letter-spacing: -0.03em;
  text-wrap: balance;
  margin: 0;
}

h1 { font-size: clamp(2.6rem, 7vw, 4.6rem); line-height: 1.02; font-weight: 700; }
h2 { font-size: clamp(1.75rem, 3.6vw, 2.5rem); line-height: 1.15; font-weight: 700; }
h3 { font-size: 1.15rem; line-height: 1.3; font-weight: 650; }

p { margin: 0 0 1rem; max-width: var(--prose); }
p:last-child { margin-bottom: 0; }


.section-head { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.section-head p { color: var(--ink-2); font-size: 1.05rem; }

code, .mono { font-family: var(--mono); font-size: 0.88em; }

code {
  background: var(--sunk);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 0.1em 0.35em;
}

/* ── nav ────────────────────────────────────────────────── */

.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--ground) 82%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 4rem;
}

.brand {
  font-family: var(--mono);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-decoration: none;
}

.nav-links { display: flex; align-items: center; gap: 1.75rem; }

.nav-link {
  color: var(--ink-2);
  text-decoration: none;
  font-size: 0.92rem;
}
.nav-link:hover { color: var(--ink); }

@media (max-width: 46rem) {
  .nav-links .nav-link { display: none; }
}

/* ── buttons ────────────────────────────────────────────── */

.btn {
  display: inline-block;
  padding: 0.6rem 1.15rem;
  border-radius: 6px;
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s;
}

.btn-primary {
  background: var(--g4);
  color: #ffffff;
  box-shadow: 0 8px 24px -10px rgba(77,132,232,.7);
}
.btn-primary:hover { background: var(--g3); }

.btn-ghost {
  border-color: var(--rule-2);
  color: var(--ink);
  background: rgba(255,255,255,.02);
}
.btn-ghost:hover { border-color: var(--ink-3); background: rgba(255,255,255,.05); }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.hero .btn-row { margin-top: 2.5rem; }

/* ── hero ───────────────────────────────────────────────── */

.hero {
  position: relative;
  border-top: 0;
  padding-top: clamp(4.5rem, 11vw, 9rem);
  padding-bottom: clamp(3rem, 7vw, 5rem);
  background: var(--ground);
  overflow: hidden;
  text-align: center;
}
.hero::before {
  content: "";
  position: absolute;
  inset: -20% -20% auto -20%;
  height: 130%;
  background: var(--glow);
  pointer-events: none;
}
.hero > * { position: relative; }
.hero .btn-row { justify-content: center; }

.hero h1 em {
  font-style: normal;
  color: var(--accent);
}


/* one column, product panel beneath the claim */
.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 6vw, 4rem);
  justify-items: center;
}
.hero-grid > div:first-child { max-width: 46rem; }
.hero-grid .tree-fig { text-align: left; width: min(34rem, 100%); }

/* the tree figure — the model, drawn */

.tree-fig {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 1.5rem 1.75rem;
  font-family: var(--mono);
  font-size: 0.82rem;
  line-height: 2;
  color: var(--ink-2);
  overflow-x: auto;
  box-shadow: 0 1px 2px rgba(48, 48, 48, 0.05), 0 14px 40px -24px rgba(26, 53, 104, 0.45);
}

.tree-fig .root { color: var(--ink); font-weight: 600; }
.tree-fig .shape { color: var(--accent); }
.tree-fig .note  { color: var(--ink-3); }

/* ── the three nouns ────────────────────────────────────── */

.nouns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

@media (max-width: 56rem) { .nouns { grid-template-columns: 1fr; } }

.noun {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 1.75rem;
  border-top: 3px solid var(--g3);
}

.noun:nth-child(2) { border-top-color: var(--g5); }
.noun:nth-child(3) { border-top-color: var(--g7); }

.noun .word {
  font-family: var(--mono);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 0.6rem;
}

.noun p { font-size: 0.96rem; color: var(--ink-2); max-width: none; }

.noun .word b {
  color: var(--accent);
  font-weight: 700;
}

/* ── two mechanisms ─────────────────────────────────────── */

.mech {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 3.5rem);
}

@media (max-width: 56rem) { .mech { grid-template-columns: 1fr; } }

.mech h3 { margin-bottom: 0.75rem; }
.mech p  { color: var(--ink-2); font-size: 0.98rem; max-width: none; }

.mech-num {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  display: block;
  margin-bottom: 0.5rem;
}

/* ── shapes ─────────────────────────────────────────────── */

.shape-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
}

.shape-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 1.5rem;
}

.shape-card .k {
  font-family: var(--mono);
  font-size: 0.82rem;
  color: #ffffff;
  background: var(--g4);
  border-radius: 4px;
  padding: 0.2rem 0.5rem;
  display: inline-block;
  margin-bottom: 0.9rem;
}

.shape-card h3 { font-size: 1.02rem; margin-bottom: 0.5rem; }
.shape-card p  { font-size: 0.94rem; color: var(--ink-2); max-width: none; }

/* ── witnesses table ────────────────────────────────────── */

.table-scroll { overflow-x: auto; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

th {
  text-align: left;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
  padding: 0 1rem 0.65rem 0;
  border-bottom: 1px solid var(--rule-2);
  white-space: nowrap;
}

td {
  padding: 0.85rem 1rem 0.85rem 0;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-2);
  vertical-align: top;
}

td:first-child { color: var(--ink); font-weight: 600; }

td .num { font-family: var(--mono); }

/* ── guarantees ─────────────────────────────────────────── */

.guarantees {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border: 1px solid var(--rule);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface);
}

@media (max-width: 56rem) { .guarantees { grid-template-columns: 1fr; } }

.g {
  padding: 1.6rem 1.75rem;
  border-bottom: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
}

@media (max-width: 56rem) { .g { border-right: 0; } }

.g .theme {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: 0.55rem;
}

.g h3 { font-size: 1rem; margin-bottom: 0.4rem; }
.g p  { font-size: 0.92rem; color: var(--ink-2); max-width: none; }

/* ── numbers ────────────────────────────────────────────── */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1rem;
}

.stat {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 1.5rem;
}

.stat .n {
  font-family: var(--mono);
  font-size: clamp(1.6rem, 3.5vw, 2.1rem);
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
  letter-spacing: -0.03em;
}

.stat .l {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.88rem;
  color: var(--ink-2);
}

/* ── final CTA ──────────────────────────────────────────── */

.final {
  position: relative;
  background:
    radial-gradient(60% 70% at 50% 100%, rgba(51,102,204,.28) 0%, transparent 70%),
    var(--ground);
  border-top: 1px solid var(--rule);
  color: var(--on-dark);
  text-align: center;
}
.final .wrap > * { margin-left: auto; margin-right: auto; }
.final .btn-row { justify-content: center; }

.final h2 { color: #ffffff; }
.final p  { color: rgba(233, 237, 245, 0.78); }

.final .btn-primary { background: var(--g4); color: #ffffff; }
.final .btn-primary:hover { background: var(--g3); }
.final .btn-ghost { border-color: var(--rule-2); color: var(--on-dark); }
.final .btn-ghost:hover { border-color: var(--ink-3); }

/* ── footer ─────────────────────────────────────────────── */

footer {
  background: var(--ground);
  border-top: 1px solid var(--rule);
  padding: 2.5rem 0;
  font-size: 0.88rem;
  color: var(--ink-2);
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: center;
  justify-content: space-between;
}

footer a { color: var(--ink-2); text-decoration: none; }
footer a:hover { color: var(--ink); }

/* ── the three stories ──────────────────────────────────── */

.stories { padding: 0; }

.story {
  padding: clamp(3.5rem, 7vw, 5.5rem) 0;
  border-top: 1px solid var(--rule);
}

.story:first-of-type { border-top: 0; }
.story.tint { background: var(--ground); }

.story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.story.flip .story-copy { order: 2; }

@media (max-width: 62rem) {
  .story-grid { grid-template-columns: 1fr; }
  .story.flip .story-copy { order: 0; }
}

.story h2 {
  font-size: clamp(1.9rem, 3.8vw, 2.7rem);
  margin-bottom: 1rem;
}

.story-lede {
  font-size: 1.1rem;
  color: var(--ink-2);
  max-width: 34rem;
}

/* the payoff — "you did one thing, you got three" */
.gifts {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  border-top: 1px solid var(--rule-2);
}

.gifts li {
  padding: 0.85rem 0 0.85rem 1.9rem;
  border-bottom: 1px solid var(--rule);
  position: relative;
  font-size: 0.98rem;
  color: var(--ink-2);
}

.gifts li::before {
  content: "+";
  position: absolute;
  left: 0;
  top: 0.85rem;
  font-family: var(--mono);
  font-weight: 700;
  color: var(--accent);
}

.gifts li b { color: var(--ink); font-weight: 650; }

/* the figures — one visual language, borrowed from the hero tree */
.fig {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 1.6rem 1.75rem;
  font-family: var(--mono);
  font-size: 0.8rem;
  line-height: 1.95;
  color: var(--ink-2);
  overflow-x: auto;
  box-shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 24px 70px -30px rgba(51,102,204,.55), 0 2px 10px rgba(0,0,0,.5);
}

.fig > div  { white-space: pre; }
.fig > .fig-kv, .fig > .fig-lvl, .fig > .tree { white-space: normal; }
.fig .said  { color: var(--ink); }
.fig .tool  { color: var(--accent); font-weight: 500; }
.fig .dim   { color: var(--ink-3); }
.fig .ok    { color: var(--accent); font-weight: 700; }
.fig .rule  { border-top: 1px solid var(--rule); margin: 0.9rem 0; height: 0; }
.fig b      { color: var(--ink); font-weight: 600; }

.fig-lvl {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.55rem 1.4rem;
  align-items: baseline;
  white-space: normal;
}

/* type → what arrives with it */
.fig-kv {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.85rem 1.4rem;
  align-items: baseline;
  white-space: normal;
}
.fig-kv > .t {
  color: var(--accent);
  font-weight: 600;
}

/* ── hero tree ─────────────────────────────────────────
   Drawn with borders, not box-drawing characters. Those
   glyphs are missing from the monospace face and fall back
   to another font whose metrics leave a gap between rows —
   visible on iOS, invisible on macOS. A border cannot. */

.tree { line-height: 1.95; }

.tree ul { list-style: none; margin: 0; padding-left: 1.7rem; }
.tree > ul { padding-left: 0.4rem; }

.tree li { position: relative; padding-left: 1.6rem; }

/* the vertical: stops at the tick on a last child,
   runs the full row on any child with siblings below it */
.tree li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 0.98em;
  border-left: 1px solid var(--ink-3);
}
.tree li:not(:last-child)::before { height: 100%; }

/* the horizontal tick, meeting the vertical at the text centre */
.tree li::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0.98em;
  width: 1.15rem;
  border-top: 1px solid var(--ink-3);
}

.tree .root { color: var(--ink); font-weight: 600; }
.tree-fig .note { margin-top: 1.3rem; }

/* ── the "new" band ────────────────────────────────────
   Placeholder. Sits directly under the hero because what
   goes here is meant to be the first thing after the claim. */

.new-band { position: relative; }


.placeholder {
  border: 1px dashed var(--rule-2);
  border-radius: 10px;
  padding: clamp(2.5rem, 6vw, 4rem) 1.5rem;
  text-align: center;
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 0.85rem;
  line-height: 1.9;
}
.placeholder b { display: block; color: var(--ink-2); font-weight: 600; }

/* the new band carries a full story, so it needs the story rhythm */
.new-band { padding: clamp(3.5rem, 8vw, 6rem) 0; }
.new-band .story-grid { align-items: center; }
.new-band .fig { background: var(--surface); }
.new-band .tree { line-height: 1.95; }

/* ── the browser ───────────────────────────────────────
   Deliberately the file-list anatomy people already know:
   icon · name · metadata · time. The column they cannot
   have anywhere else is "who can see it". */

.browser {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 8px;
  overflow: hidden;
  font-size: 0.88rem;
  box-shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 24px 70px -30px rgba(51,102,204,.55), 0 2px 10px rgba(0,0,0,.5);
}

.browser-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1rem;
  background: var(--sunk);
  border-bottom: 1px solid var(--rule);
  font-weight: 600;
}
/* A location, not a window title. The old head carried a folder icon and a
   name, which read as chrome — so the row this section is about was the one
   row not in the list. */
.crumb { font-weight: 600; color: var(--ink-2); }
.browser-head .count {
  margin-left: auto;
  font-weight: 400;
  font-size: 0.8rem;
  color: var(--ink-3);
}

.row-file {
  display: grid;
  grid-template-columns: 1.25rem 1fr max-content max-content;
  align-items: center;
  gap: 0 0.75rem;
  width: 100%;
  padding: 0.62rem 1rem;
  border: 0;
  border-top: 1px solid var(--rule);
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
}
.browser > .row-file:first-of-type { border-top: 0; }

button.row-file { cursor: pointer; }
button.row-file:hover { background: var(--sunk); }
button.row-file:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.row-file svg { width: 1rem; height: 1rem; display: block; }
.row-file .ico-dir  { color: var(--g3); }
.row-file .ico-file { color: var(--ink-3); }

.row-file .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-file .when { color: var(--ink-3); font-size: 0.8rem; white-space: nowrap; }

.row-file.child { padding-left: 2.6rem; }

/* author display:grid beats the UA [hidden] rule, so say it here */
.row-file[hidden] { display: none; }

/* who can see it — the column a repository has no place for */
.acc {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.14rem 0.5rem;
  border-radius: 999px;
  white-space: nowrap;
  border: 1px solid transparent;
}
.acc.private  { background: var(--sunk);     color: var(--ink-2); border-color: var(--rule); }
.acc.internal { background: var(--accent-bg); color: var(--accent); border-color: var(--accent-bg); }
.acc.shared   { background: var(--accent-bg); color: var(--accent); border-color: var(--accent-bg); }
.acc.public   { background: #12291f; color: #6fc79a; border-color: #1b3a2a; }
/* Read only is a role like any other — one that carries `read` and no more. */
.acc.readonly { background: #2a2417; color: #d8b271; border-color: #3b3220; }


.browser-note {
  padding: 0.7rem 1rem;
  border-top: 1px solid var(--rule);
  background: var(--sunk);
  font-size: 0.8rem;
  color: var(--ink-3);
}

@media (max-width: 30rem) {
  .row-file { grid-template-columns: 1.25rem 1fr max-content; }
  .row-file .when { display: none; }
}

/* ── reveal on scroll ──────────────────────────────────
   Content rises into place as it enters view rather than
   simply sliding past. Panels travel further than text,
   which is what makes them read as windows coming up.

   The hidden state is applied by script, never in the
   markup: with JS off, or before it runs, the page is
   fully readable. Nothing above the fold is ever hidden. */

[data-reveal] {
  transition:
    opacity 0.62s cubic-bezier(0.22, 0.61, 0.24, 1),
    transform 0.62s cubic-bezier(0.22, 0.61, 0.24, 1);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}

html.reveal-on [data-reveal]:not(.shown) {
  opacity: 0;
  transform: translateY(var(--rise, 24px));
}

html.reveal-on [data-reveal].shown {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html.reveal-on [data-reveal]:not(.shown) { opacity: 1; transform: none; }
  [data-reveal] { transition: none; }
}

/* ── the layer stack ──────────────────────────────────
   Every section pins in turn and is covered by the next,
   shrinking and fading as it goes — the same action all
   the way down rather than once at the top.

   Measured from github.com: scale 1 → 0.92, opacity
   1 → 0.20. Progress is driven by how far the covering
   section has risen, not by a fixed scroll distance, so
   the effect starts the moment something moves over it. */

html.pin-hero .layer {
  position: sticky;
  top: 0;
}

/* each layer needs its own ground, or the one beneath shows through */
.hero      { background: var(--ground); }
.stories   { background: transparent; }
.story     { background: var(--ground); }
.story.tint { background: var(--lift); }

.hero::before { opacity: var(--layer-fade, 1); }

html.pin-hero .layer > .wrap {
  transform-origin: 50% 28%;
  will-change: transform, opacity;
}
html.pin-hero .hero > .wrap { transform-origin: 50% 22%; }

/* the last section is the floor — nothing covers it */
html.pin-hero .final,
html.pin-hero footer { position: relative; z-index: 90; }

@media (prefers-reduced-motion: reduce) {
  html.pin-hero .layer { position: static; }
  html.pin-hero .layer > .wrap { transform: none !important; opacity: 1 !important; }
}

/* ── the showroom ──────────────────────────────────────
   This section deliberately breaks the page's rhythm.
   Everything else is a two-column story; this one is
   centered and staged, with the product lit on a plinth —
   because it is the thing we most want looked at. */

.new-band {
  padding: 0 0 clamp(4rem, 9vw, 7rem);
  /* The room is blue, not near-black. Every other band on the page sits
     within a few points of the page ground; this one steps away from it,
     which is most of why it reads as a different place. */
  background:
    radial-gradient(56% 48% at 50% 6%, rgba(96,150,245,.34) 0%, rgba(51,102,204,.14) 46%, transparent 80%),
    linear-gradient(180deg, #132a52 0%, #0e2043 42%, #0a1730 100%);
  border-top: 1px solid var(--rule-2);
  border-bottom: 1px solid var(--rule);
}

/* a lit edge along the top, brightest at the middle */
.new-band::after {
  content: "";
  opacity: var(--layer-fade, 1);
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(122,166,244,.85), transparent);
}

.show-head { max-width: 44rem; margin: 0 auto; text-align: center; }
.show-head h2 { font-size: clamp(2rem, 4.4vw, 3rem); margin-bottom: 1.1rem; }
.show-head .story-lede { margin: 0 auto; max-width: 40rem; }


/* the plinth */
.show-stage {
  position: relative;
  margin: clamp(2.5rem, 6vw, 4rem) auto clamp(2.5rem, 6vw, 3.5rem);
  max-width: 46rem;
}
.show-stage::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2.5rem;
  width: 78%;
  height: 4rem;
  transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(77,132,232,.34), transparent 72%);
  filter: blur(6px);
  pointer-events: none;
}
.show-stage .browser {
  background: #0c1729;
  border-color: rgba(122,166,244,.22);
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 40px 90px -40px rgba(77,132,232,.85),
    0 6px 24px rgba(0,0,0,.6);
}

/* the four payoffs, side by side rather than stacked */
.gifts-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(1.5rem, 4vw, 3rem);
  max-width: 58rem;
  margin: 0 auto;
  border-top: 0;
}
@media (max-width: 46rem) { .gifts-grid { grid-template-columns: 1fr; } }

/* chrome inside the staged panel, tuned to the blue room */
.show-stage .browser-head,
.show-stage .browser-note { background: #0f1d33; }
.show-stage .row-file { border-top-color: rgba(122,166,244,.13); }
.show-stage button.row-file:hover { background: #12233d; }


/* ── the banner ────────────────────────────────────────
   Full bleed and bright, because a sign that fits inside
   the column is a caption. Dark text on the brand blue:
   the loudest thing on a page that is otherwise near
   black, which is the whole job. */

.banner {
  background: linear-gradient(90deg, #3f74d6 0%, #5b93ef 50%, #3f74d6 100%);
  border-bottom: 1px solid rgba(10,23,48,.35);
  transform-origin: 50% 0;
}

.banner-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #071228;
}

.banner-date {
  font-weight: 500;
  letter-spacing: 0.16em;
  color: rgba(7,18,40,.72);
}

/* the showcase starts below the sign */
.new-band .show { padding-top: clamp(3.5rem, 8vw, 6rem); }

@media (max-width: 30rem) {
  .banner-inner { font-size: 0.66rem; letter-spacing: 0.16em; }
  .banner-date { letter-spacing: 0.1em; }
}

/* ── the AI section's markers ──────────────────────────
   A four-point spark instead of the `+` the other lists
   use. Drawn as a mask so it takes the accent colour and
   stays crisp at any size — an emoji would render as
   somebody else's artwork, differently on every platform. */

.new-band .gifts li::before {
  content: "";
  width: 0.85rem;
  height: 0.85rem;
  top: 0.95rem;
  background: var(--accent);
  -webkit-mask: var(--spark) center / contain no-repeat;
  mask: var(--spark) center / contain no-repeat;
}

:root {
  --spark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.6 6 5.4 10.8 12 12-6.6 1.2-11.4 6-12 12-.6-6-5.4-10.8-12-12 6.6-1.2 11.4-6 12-12Z'/%3E%3C/svg%3E");
}