/* Clashworks UI foundation: tokens, headings, eyebrow and the three buttons.
   Loads after the inline <style> in index.html. Every effect stops under html.rm. */

/* critical:start (index.html inlines an exact copy of everything down to critical:end; _scripts/site-tests/overhaul.js checks they match) */
:root {
  --navy: #0B1220;
  --navy-2: #121B2E;
  --em: #10B981;
  --em-deep: #047857;
  --mint: #D1FAE5;
  --paper: #F5F7FA;
}

/* headings */
h2 { font-weight: 800; font-size: clamp(38px, 5vw, 64px); }

.kicker {
  display: block; margin-bottom: 14px;
  font: 700 13px/1.2 var(--font, "Hanken Grotesk", system-ui, sans-serif);
  letter-spacing: .14em; text-transform: uppercase; color: var(--em-deep);
}
.kicker.on-navy { color: var(--mint); } /* mint, so the hero keeps one emerald element */

/* shared button bits (these combine with the existing .btn base) */
.btn.btn-beam, .btn.btn-press { min-height: 48px; justify-content: center; white-space: nowrap; }
.btn-beam .arr, .btn-press .arr { transition: translate .2s; }
.btn-beam:hover .arr, .btn-press:hover .arr { translate: 4px 0; }

/* 1. Beam: for navy surfaces. A light travels the rim all the time, so phones see it too. */
@property --a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes ui-spin { to { --a: 360deg; } }
@keyframes ui-sheen { 0%, 60% { translate: -120% 0; } 85%, 100% { translate: 120% 0; } }
.btn.btn-beam {
  color: var(--navy); background: var(--em);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--mint) 45%, transparent) inset, 0 10px 40px -8px rgb(16 185 129 / .7);
}
.btn.btn-beam:hover { background: var(--em); box-shadow: 0 0 0 1px color-mix(in srgb, var(--mint) 45%, transparent) inset, 0 14px 44px -8px rgb(16 185 129 / .85); }
.btn.btn-beam::before {
  content: ""; position: absolute; inset: -2px; z-index: -2;
  background: conic-gradient(from var(--a, 0deg), transparent 0 70%, var(--mint) 80%, transparent 90%);
  animation: ui-spin 3.2s linear infinite;
}
.btn.btn-beam::after, .btn.btn-beam:hover::after {
  content: ""; position: absolute; inset: 2px; z-index: -1; border-radius: inherit;
  background: var(--em);
  transform: none; transition: none;
}
.btn-beam .sheen {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / .55) 50%, transparent 65%);
  translate: -120% 0; animation: ui-sheen 4.5s ease-in-out infinite;
}
.btn-beam > span:not(.sheen) { position: relative; z-index: 1; }
.btn.btn-beam:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* 2. Press: for paper surfaces. A hard edge under the face; pressing sinks it. */
.btn.btn-press {
  color: #fff; background: #047857;
  box-shadow: 0 5px 0 #03543c, 0 12px 24px -10px rgb(4 120 87 / .6);
  transition: translate .08s, box-shadow .08s;
}
.btn.btn-press:hover { background: #047857; box-shadow: 0 5px 0 #03543c, 0 12px 24px -10px rgb(4 120 87 / .6); }
.btn.btn-press::after { display: none; }
.btn.btn-press:active { translate: 0 4px; transform: none; box-shadow: 0 1px 0 #03543c, 0 4px 10px -6px rgb(4 120 87 / .6); }

/* 3. Ghost: calm outline, no blur. White on navy; add .on-paper for dark text. */
.btn-ghost { min-height: 48px; justify-content: center; color: #fff; background: transparent; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .4); }
.btn-ghost:hover { background: transparent; box-shadow: inset 0 0 0 1.5px #fff; }
.btn-ghost.on-paper { color: var(--navy); box-shadow: inset 0 0 0 1.5px rgb(11 18 32 / .3); }
.btn-ghost.on-paper:hover { box-shadow: inset 0 0 0 1.5px var(--navy); }

/* Reduce motion: nothing moves on its own, presses are instant */
.rm .btn.btn-beam::before, .rm .btn-beam .sheen { animation: none; }
.rm .btn-beam .sheen { display: none; }
.rm .btn-beam, .rm .btn-press, .rm .btn-ghost,
.rm .btn-beam .arr, .rm .btn-press .arr { transition: none; animation: none; }

/* ---------- hero: copy left, the console right (below on phones) ----------
   Nothing here may set transform, filter, backdrop-filter or z-index on the stage, the console or the
   perch: the Operator inside goes position: fixed when it flies, and any of those would trap it. */
.hero-stage { background: var(--navy); }
.hero-stage::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(560px 380px at 78% 40%, rgb(16 185 129 / .2), transparent 70%),
    linear-gradient(rgb(255 255 255 / .035) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, rgb(255 255 255 / .035) 1px, transparent 1px) 0 0 / 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse at 60% 40%, #000 30%, transparent 80%);
  mask-image: radial-gradient(ellipse at 60% 40%, #000 30%, transparent 80%);
}
.hero h1 { font-size: clamp(42px, 1.6rem + 4.2vw, 82px); }
.hero h1 em { font-style: normal; color: var(--em); }
.hero-copy .kicker { margin-bottom: 0; }

/* the console: tap what eats your week; console.js writes the readout, button and bubble */
.console {
  grid-column: 2; grid-row: 1; position: relative; margin-top: 120px;
  padding: 24px; border-radius: 24px; color: #fff; background: var(--navy-2);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1), 0 30px 80px -40px rgb(16 185 129 / .35);
}
/* the Operator's home on wide screens: perched on the top right corner, about 210 px */
.console .op-home { position: absolute; top: -132px; right: -22px; width: 210px; aspect-ratio: 1; pointer-events: none; }
.console .op { --u: 2.1px; }
.console-bubble {
  position: absolute; right: 196px; top: -92px; max-width: 220px; padding: 10px 14px;
  border-radius: 14px 14px 4px 14px; background: #fff; color: var(--navy);
  font: 600 14px/1.35 var(--font, "Hanken Grotesk", system-ui, sans-serif);
  box-shadow: 0 12px 30px -14px rgb(11 18 32 / .6); pointer-events: none;
}
.console-title { font-size: 22px; line-height: 1.2; letter-spacing: -.01em; color: #fff; }
/* the title and its line stay clear of the robot on the corner */
.console-title, .console-sub { padding-right: 150px; }
.console-sub { margin-top: 6px; font-size: 15px; color: rgb(255 255 255 / .72); }
.console-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.console-chips .tile {
  display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 12px;
  border-radius: 12px; border: 1px solid rgb(255 255 255 / .12); background: rgb(255 255 255 / .04);
  color: rgb(255 255 255 / .92); font: 600 15px/1.25 var(--font, "Hanken Grotesk", system-ui, sans-serif); text-align: left;
  transition: background-color .15s, border-color .15s;
}
.console-chips .tile:hover { border-color: rgb(209 250 229 / .5); }
.console-chips .tile:focus-visible { outline: 2px solid var(--em); outline-offset: 2px; }
.console-chips .tile[aria-pressed="true"] { background: rgb(16 185 129 / .14); border-color: var(--em); color: #fff; }
.console-chips .box {
  flex: none; width: 20px; height: 20px; border-radius: 6px; border: 2px solid rgb(255 255 255 / .4);
  display: grid; place-items: center; transition: background-color .15s, border-color .15s;
}
.console-chips .tile[aria-pressed="true"] .box { background: var(--em); border-color: var(--em); }
.console-chips .tile[aria-pressed="true"] .box::after {
  content: ""; width: 9px; height: 5px; border: solid var(--navy); border-width: 0 0 2.5px 2.5px; rotate: -45deg; translate: 0 -1px;
}
.readout {
  display: flex; align-items: center; gap: 12px; margin: 18px 0; padding: 14px 16px; min-height: 66px;
  border-radius: 12px; background: var(--navy); border: 1px dashed rgb(16 185 129 / .45);
}
.readout .scan { flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--em); box-shadow: 0 0 10px var(--em); }
.readout p { font: 600 15px/1.35 var(--font, "Hanken Grotesk", system-ui, sans-serif); color: var(--mint); }
/* one emerald button per screen (the hero primary), so the console button is an outline that greens up with picks */
.console-cta { display: flex; width: 100%; }
.console-cta.is-ready { color: var(--mint); box-shadow: inset 0 0 0 1.5px var(--em); }
/* no picks, no console button: the hero button is the way to the form until something is ticked (console.js sets is-ready) */
.js .console-cta:not(.is-ready) { display: none; }

@media (max-width: 860px) {
  /* phones: the Operator's home is #op-float beside the headline, so the console is not its anchor */
  .console { position: static; margin-top: 36px; padding: 18px 16px; }
  .console-title, .console-sub { padding-right: 0; }
  .console-bubble { display: none; }
  .console-chips { gap: 8px; }
  .console-chips .tile { gap: 8px; padding: 10px; font-size: 14px; }
}
@media (max-width: 560px) {
  .hero-actions .btn { width: 100%; }
}
.rm .console-chips .tile, .rm .console-chips .box { transition: none; }
/* deep links (index.html#faq) land below the 68px sticky nav from the first paint; liquid.css sets the same on every page */
html { scroll-padding-top: 88px; }
/* critical:end */

/* ---------- body sections, top to bottom ----------
   proof strip, what changes (wins), how it works (mint band), packages, what I've built (navy),
   founder, checklist band, closing (navy). The FAQ keeps its styles in index.html. */
.section-head h2 { max-width: 18ch; }
.section-head .lede { margin-top: 16px; }
.section-head .kicker + h2 { margin-top: 0; }

/* proof strip: four real numbers, static (no count-up) */
section.proof { padding: clamp(28px, 4vw, 48px) 0; }
.proof .row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.stat { padding: 4px 0 4px 18px; border-left: 3px solid var(--em); }
.stat b { display: block; font: 800 clamp(32px, 1.2rem + 1.8vw, 44px)/1 var(--display); letter-spacing: -.03em; color: var(--navy); }
.stat span { display: block; margin-top: 8px; max-width: 24ch; font-size: 15px; line-height: 1.4; color: var(--ink-2); }
.stat small { display: block; margin-top: 4px; font-size: 12px; color: var(--ink-2); }
@media (max-width: 800px) { .proof .row { grid-template-columns: 1fr 1fr; gap: 22px 14px; } .stat { padding-left: 12px; } }

/* what changes for you: three colour blocks */
.wins { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 16px; }
.win { display: flex; flex-direction: column; min-height: 260px; padding: clamp(22px, 2.4vw, 30px); border-radius: 20px; background: #fff; border: 1px solid var(--line); }
.win-ic { flex: none; width: 40px; height: 40px; margin-bottom: auto; }
.win h3 { margin: 28px 0 10px; font-size: clamp(22px, 1rem + 1vw, 30px); font-weight: 800; }
.win p { color: var(--ink-2); }
.win.money { background: var(--navy); border-color: var(--navy); color: #fff; }
.win.money p { color: rgb(255 255 255 / .8); }
.win.money .win-ic { color: var(--em); }
.win.time { background: var(--mint); border-color: var(--mint); }
.win.time .win-ic { color: var(--em-deep); }
.win.cost .win-ic { color: var(--navy); }
@media (max-width: 860px) { .wins { grid-template-columns: 1fr; } .win { min-height: 0; } .win h3 { margin-top: 16px; } }

/* how it works: a mint band, three white steps. An emerald line fills along them as they scroll by
   (across on wide screens, down the side on phones, where the cards also stack as you read). */
section.how { background: var(--mint); }
.steps { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: step; }
.step { position: relative; padding: 26px 26px 28px; border-radius: 20px; background: #fff; box-shadow: 0 1px 0 rgb(4 120 87 / .15); }
.step::before { counter-increment: step; content: counter(step); display: block; font: 800 64px/.9 var(--display); letter-spacing: -.05em; color: var(--em-deep); }
.step h3 { margin: 16px 0 8px; font-size: clamp(21px, 1rem + .6vw, 26px); font-weight: 800; }
.step p { color: var(--ink-2); }
.step .time { display: inline-block; margin-top: 16px; padding: 7px 11px; border-radius: 999px; background: var(--navy); color: #fff; font: 700 13px/1 var(--font); }
.steps::before, .steps-line { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 3px; border-radius: 3px; pointer-events: none; }
.steps::before { background: rgb(4 120 87 / .18); }
.steps-line { background: var(--em-deep); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
@media (max-width: 800px) {
  .steps { grid-template-columns: 1fr; gap: 16px; }
  .step::before { font-size: 48px; }
  .steps::before, .steps-line { left: -10px; right: auto; top: 0; bottom: 0; width: 3px; height: auto; }
  .steps-line { transform-origin: 50% 0; transform: scaleY(var(--p, 0)); }
  html:not(.rm) .step { position: sticky; top: calc(86px + var(--i, 0) * 14px); box-shadow: 0 -10px 24px -20px rgb(11 18 32 / .45); }
  .step:nth-child(2) { --i: 1; } .step:nth-child(3) { --i: 2; }
}
.rm .steps-line { transform: none; }

/* packages: four cards, the featured one navy; cards lift on hover */
.packs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.pack { position: relative; display: flex; flex-direction: column; padding: 24px; border-radius: 20px; background: #fff; border: 1px solid var(--line); transition: translate .2s, box-shadow .2s, border-color .2s; }
.pack:hover { translate: 0 -6px; border-color: var(--em); box-shadow: 0 24px 50px -24px rgb(11 18 32 / .35); }
.pack h3 { margin: 10px 0; font-size: 24px; font-weight: 800; }
/* the name is the link, stretched over the whole card so the tap target is the card */
.pack h3 a { text-decoration: none; }
.pack h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.pack:hover h3 a { text-decoration: underline; text-underline-offset: 4px; }
.pack .what { margin-bottom: 18px; font-size: 16px; color: var(--ink-2); }
.pack .price { margin-top: auto; font: 800 28px/1 var(--display); letter-spacing: -.02em; }
.pack .price small { display: block; margin-top: 6px; font: 600 14px/1.3 var(--font); letter-spacing: 0; color: var(--ink-2); }
.pack .badge { align-self: flex-start; margin-bottom: 10px; padding: 6px 10px; border-radius: 999px; background: var(--em); color: var(--navy); font: 800 12px/1 var(--font); }
.pack.feat { background: var(--navy); border-color: var(--navy); color: #fff; }
.pack.feat .what, .pack.feat .price small { color: rgb(255 255 255 / .8); }
.pack.feat :focus-visible { outline-color: var(--em); }
.packages .else { margin-top: 24px; color: var(--ink-2); }
.packages .else strong { color: var(--navy); }
.packages .else a { color: var(--em-deep); font-weight: 700; }
@media (max-width: 1180px) { .packs { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .packs { grid-template-columns: 1fr; gap: 12px; } .pack { padding: 22px; } }
.rm .pack { transition: none; }
.rm .pack:hover { translate: none; }

/* what I've built: six cards on navy; a soft light follows the cursor across them (desktop) */
section.builds { background: var(--navy); color: #fff; }
.builds h2 { color: #fff; }
.builds .lede { color: rgb(255 255 255 / .75); }
.builds :focus-visible { outline-color: var(--em); }
.bgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.build { position: relative; isolation: isolate; overflow: hidden; padding: 26px; border-radius: 20px; background: var(--navy-2); border: 1px solid rgb(255 255 255 / .08); }
.build::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: radial-gradient(300px circle at var(--sx, 50%) var(--sy, 0%), rgb(16 185 129 / .18), transparent 70%); }
.spot.is-lit .build::before { opacity: 1; }
.build .tag { display: inline-block; margin-bottom: 16px; padding: 6px 10px; border-radius: 999px; font: 700 12px/1 var(--font); background: rgb(16 185 129 / .18); color: var(--mint); }
.build .tag.time { background: rgb(209 250 229 / .1); color: #fff; }
.build .tag.cost { background: transparent; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .32); color: #fff; }
.build h3 { margin-bottom: 8px; font-size: 22px; font-weight: 800; letter-spacing: -.015em; color: #fff; }
.build p { font-size: 16px; color: rgb(255 255 255 / .75); }
.build .num { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgb(255 255 255 / .1); font: 800 22px/1.1 var(--display); color: #fff; }
.build .num small { display: block; margin-top: 6px; font: 500 14px/1.35 var(--font); color: rgb(255 255 255 / .72); }
/* padding grows the tap target to 44 px; the negative margin keeps the line where it was */
.build .num a { display: inline-block; padding-block: 12px; margin-block: -12px; color: var(--mint); text-underline-offset: 3px; }
@media (max-width: 1000px) { .bgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .bgrid { grid-template-columns: 1fr; gap: 12px; } .build { padding: 22px; } .build .tag { margin-bottom: 12px; } }
.rm .build::before { display: none; }
/* the stamp (brand/mascot.md A3): ClashBot's emerald core hops onto the card's top right corner as a check
   badge, holds, then hops home. operator.js adds .is-stamped for 1.6 s, once per card. Decorative only. */
.build::after {
  content: ""; position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 9px;
  pointer-events: none; opacity: 0;
  background: var(--em) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B1220' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 18px no-repeat;
  box-shadow: 0 0 0 3px rgb(16 185 129 / .22), 0 0 18px 2px rgb(16 185 129 / .55);
}
.build.is-stamped::after { animation: ui-stamp 1.6s cubic-bezier(.3, .7, .3, 1) both; }
@keyframes ui-stamp {
  0% { opacity: 0; transform: translate(-30px, 26px) scale(.4); }
  18% { opacity: 1; transform: translate(0, -6px) scale(1.12); }
  28%, 80% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translate(-12px, -16px) scale(.5); }
}
/* Reduce motion: no hop (operator.js does not run then; if a card is ever stamped, the badge just shows) */
.rm .build.is-stamped::after { animation: none; opacity: 1; transform: none; }

/* founder: the headshot, with the still robot beside it under Reduce motion */
.me-grid { display: grid; grid-template-columns: auto 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.me-pics { position: relative; width: clamp(200px, 20vw, 280px); }
.me-pics .face { width: 100%; height: auto; border-radius: 28px; }
.rm .me-pics .op-static { position: absolute; right: -32px; bottom: -32px; width: 120px; margin: 0; float: none; }
.me-copy p { margin-top: 16px; max-width: 56ch; color: var(--ink-2); }
.me-copy .btn { margin-top: 24px; }
@media (max-width: 760px) { .me-grid { grid-template-columns: 1fr; gap: 28px; } .me-pics { width: 170px; } .rm .me-pics .op-static { width: 96px; right: -40px; bottom: -20px; } }

/* checklist band: one row on a white card */
section.checklist { padding-top: 0; }
.checklist-card { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px 40px;
  padding: clamp(24px, 3vw, 36px) clamp(22px, 3vw, 40px); border-radius: 20px; background: #fff; border: 1px solid var(--line); box-shadow: 0 18px 40px -30px rgb(11 18 32 / .35); }
.checklist-card > div { flex: 1 1 340px; }
.checklist-card h2 { font-size: clamp(24px, 1rem + 1vw, 32px); letter-spacing: -.02em; }
.checklist-card p { margin-top: 8px; max-width: 46ch; color: var(--ink-2); }
/* the Operator scans the card once (operator.js): an emerald line sweeps top to bottom */
.checklist-card::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; opacity: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--em) 30%, var(--em) 70%, transparent); box-shadow: 0 0 18px 4px rgb(16 185 129 / .35); }
.checklist-card.is-scan::after { animation: scanline 1.6s cubic-bezier(.4,0,.2,1); }
@keyframes scanline { 0% { top: 0; opacity: 0; } 12%, 88% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
.rm .checklist-card::after { display: none; }

/* closing: a navy band */
section.closing { position: relative; overflow: hidden; background: var(--navy); color: #fff; }
.closing::before { content: ""; position: absolute; inset: auto -10% -60% -10%; height: 70%; pointer-events: none; background: radial-gradient(50% 100% at 50% 100%, rgb(16 185 129 / .32), transparent 70%); }
.closing .wrap { position: relative; }
.closing h2 { max-width: 16ch; color: #fff; }
.closing p { margin-top: 16px; max-width: 34em; color: rgb(255 255 255 / .8); }
.closing .btn { margin-top: 28px; }
.closing .small { font-size: 15px; color: rgb(255 255 255 / .72); }
.closing :focus-visible { outline-color: var(--em); }

/* phones: the same blocks, packed tighter, so the page is about a third shorter than the old one */
@media (max-width: 560px) {
  main > section:not(.hero):not(.proof):not(.checklist) { padding: 44px 0; }
  .section-head { margin-bottom: 20px; }
  h2 { font-size: 32px; }
  .section-head .lede { margin-top: 10px; font-size: 16px; }
  .kicker { margin-bottom: 10px; }
  section.proof { padding: 24px 0 8px; }
  .stat span { font-size: 14px; }
  /* wins: icon beside the words */
  .wins { gap: 10px; }
  .win { display: grid; grid-template-columns: 32px 1fr; gap: 0 14px; padding: 18px; }
  .win-ic { grid-row: 1 / 3; width: 32px; height: 32px; margin: 0; }
  .win h3 { margin: 2px 0 4px; font-size: 21px; }
  .win p { font-size: 16px; }
  /* steps: the number sits beside the heading */
  .step { padding: 18px 18px 20px; }
  .step::before { float: left; margin: 0 12px 0 0; font-size: 40px; }
  .step h3 { margin: 4px 0 10px; font-size: 20px; }
  .step p { clear: left; font-size: 16px; }
  .step .time { margin-top: 12px; }
  /* packages: price and timing on one line */
  .pack { padding: 18px 20px; }
  .pack h3 { margin: 0 0 6px; font-size: 21px; }
  .pack .what { margin-bottom: 10px; font-size: 15px; }
  .pack .price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; font-size: 22px; }
  .pack .price small { margin: 0; }
  .packages .else { margin-top: 16px; font-size: 16px; }
  /* builds: one swipeable row (native scroll, snaps to each card; the next card peeks in) */
  .bgrid { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin-inline: -16px; padding: 2px 16px 6px; scroll-padding-inline: 16px; scrollbar-width: none; }
  .bgrid::-webkit-scrollbar { display: none; }
  .bgrid .build { flex: 0 0 84%; scroll-snap-align: start; }
  .build { padding: 18px 20px; }
  .build .tag { margin-bottom: 10px; }
  .build h3 { font-size: 20px; }
  .build p { font-size: 15px; }
  .build .num { margin-top: 12px; padding-top: 10px; font-size: 19px; }
  .build .num small { margin-top: 4px; font-size: 13px; }
  /* founder: photo beside the heading */
  .me-grid { gap: 20px; }
  .me-pics { width: 120px; }
  .me-copy p { margin-top: 12px; font-size: 16px; }
  .me-copy .btn { margin-top: 18px; }
  .closing p { font-size: 16px; }
  .closing .btn { margin-top: 22px; }
}

/* sticky phone bar (#sticky, toggled by the inline script in index.html). Phones only. */
.sticky { display: none; }
@keyframes ui-bar-in { from { translate: 0 140%; } to { translate: 0 0; } }
@media (max-width: 559.98px) {
  .sticky:not([hidden]) {
    display: flex; align-items: center; gap: 10px; white-space: nowrap;
    position: fixed; inset: auto 10px calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 47;
    padding: 6px 6px 6px 18px; border-radius: 999px;
    background: var(--navy); color: #fff; font-weight: 700; font-size: 15px;
    box-shadow: 0 0 0 1px rgb(255 255 255 / .08), 0 12px 30px -10px rgb(0 0 0 / .7);
    animation: ui-bar-in .3s cubic-bezier(.2, .7, .2, 1);
  }
  .sticky .btn { margin-left: auto; padding: 0 20px; min-height: 44px; font-size: 15px; }
  .rm .sticky { animation: none; }
  /* keep keyboard focus clear of the bar: 44 px link + 6 px pad + 10 px inset + 24 px air, plus the
     home indicator inset the bar itself sits above */
  html { scroll-padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}