/*
 * The sales page — "The Happy Hour Board". Only index.html links this; the legal pages keep style.css.
 * Editorial, type-led. The hero is a bar's price board; everything after it reads like a menu.
 * Zero external requests: brand system stack + Iowan Old Style accent, as in apps/site/public/style.css.
 */
:root {
  color-scheme: dark;
  --ground: #0e0b09;
  --ground2: #120e0b;
  --surface: #17120e;
  --surface2: #1f1812;
  --hair: #3a2e24;
  --hair-soft: #2a211a;
  --amber: #ffb454;
  --amber-d: #ff9026;
  --mint: #5fe0a8;
  --plum: #2a1c33;
  --tx0: #fbf5ec;
  --tx1: #cdbfac;
  --tx2: #938471;
  --tx3: #65584a;

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;

  --gutter: clamp(16px, 4vw, 44px);
  --max: 1200px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--tx1);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
/* Components set their own display; without this, one of them silently beats the hidden attribute. */
[hidden] { display: none !important; }
a { color: var(--amber); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--amber-d); }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { color: var(--tx0); text-wrap: balance; margin: 0; }
p { margin: 0; }
em.s, .s { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--amber); letter-spacing: -0.005em; }

.wrap { max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }

.eyebrow {
  font-size: 0.74rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--tx2); font-weight: 700;
}
.eyebrow b { color: var(--amber); font-weight: 700; }

/* ---- nav ------------------------------------------------------------------- */
.nav {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-block: 1.4rem;
}
/* Near hero size, as on the brochure it replaced: the sign is the brand, and at 1.7rem its strike and blink were too small to see. */
.lockup { display: flex; align-items: center; gap: 0.35em; text-decoration: none; font-size: clamp(1.9rem, 2.6vw, 2.4rem); }
/* The nav carries the INLINED mark (scripts/gen-mark.ts) so the strike can run; the footer uses the static /mark.svg. */
.lockup img,
.lockup svg { height: 1.55em; width: auto; display: block; flex: none; }
.wordmark { font-weight: 800; letter-spacing: -0.06em; color: var(--tx0); }
.wordmark i { font-family: var(--serif); font-weight: 400; color: var(--amber); letter-spacing: 0; }
.nav ul { list-style: none; display: flex; gap: 1.8rem; margin: 0; padding: 0; font-size: 0.92rem; }
.nav ul a { color: var(--tx1); text-decoration: none; }
.nav ul a:hover { color: var(--tx0); }

.soon {
  display: inline-flex; flex-direction: column; justify-content: center; line-height: 1.1;
  min-height: 52px; padding: 0.5rem 1.1rem; border-radius: 12px;
  border: 1px solid rgba(255, 180, 84, 0.55); color: var(--amber, #ffb454);
  background: rgba(255, 180, 84, 0.06);
}
.soon small { font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; opacity: 0.85; }
.soon span { font-size: 1.12rem; font-weight: 700; letter-spacing: -0.02em; color: #f8f4fb; }
.soon.sm { min-height: 44px; padding: 0.35rem 0.85rem 0.4rem; border-radius: 10px; }
.soon.sm span { font-size: 0.95rem; }
.store {
  display: inline-flex; flex-direction: column; justify-content: center;
  background: var(--tx0); color: #120e0b; text-decoration: none;
  border-radius: 12px; padding: 0.5rem 1.15rem 0.55rem; line-height: 1.1;
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
  min-height: 48px;
}
.store small { font-size: 0.66rem; letter-spacing: 0.04em; font-weight: 500; }
.store span { font-size: 1.12rem; font-weight: 700; letter-spacing: -0.02em; }
.store:hover { color: #120e0b; transform: translateY(-2px); box-shadow: 0 10px 30px -8px rgba(255, 180, 84, 0.45); }
.store:active { transform: translateY(1px); }
.store.sm { padding: 0.35rem 0.85rem 0.4rem; min-height: 44px; border-radius: 10px; }
.store.sm span { font-size: 0.95rem; }

/* ---- hero ------------------------------------------------------------------ */
.hero {
  position: relative;
  padding-block: clamp(1.5rem, 5vw, 4rem) clamp(3rem, 7vw, 6rem);
}
.hero::before {
  /* dusk light behind the board: amber low, a little plum high — warmer than the app's header */
  content: ""; position: absolute; inset: -10% 0 0 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 50% at 78% 70%, rgba(255, 144, 38, 0.13), transparent 70%),
    radial-gradient(50% 45% at 12% 8%, rgba(92, 50, 110, 0.22), transparent 70%);
}
.hero-top {
  display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: clamp(1.5rem, 4vw, 4rem); align-items: end;
  margin-bottom: clamp(2rem, 4vw, 3.4rem);
}
.hero h1 {
  font-size: clamp(2.6rem, 6.6vw, 5.7rem);
  line-height: 0.98; letter-spacing: -0.048em; font-weight: 800;
}
.hero h1 em { display: inline; font-size: 1.04em; }
.hero-side { display: grid; gap: 1.3rem; padding-bottom: 0.4rem; }
.lede { font-size: 1.1rem; color: var(--tx1); max-width: 30rem; }
.lede strong { color: var(--tx0); font-weight: 650; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.1rem; }
.cta-note { font-size: 0.85rem; color: var(--tx2); line-height: 1.35; }

.stage {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end;
}
/* keep the board's own content clear of the phone that overlaps its right edge */
.stage .board { padding-right: calc(clamp(230px, 24vw, 300px) * 0.36 + 1.5rem); }

/* the board ------------------------------------------------------------------ */
.board {
  container-type: inline-size;
  position: relative;
  border-radius: 22px;
  padding: clamp(1.1rem, 2.6vw, 2rem) clamp(1.1rem, 3vw, 2.4rem) clamp(1.1rem, 2.4vw, 1.8rem);
  background:
    radial-gradient(120% 80% at 20% 0%, rgba(255, 180, 84, 0.06), transparent 60%),
    linear-gradient(180deg, #16110d, #0f0b08);
  border: 1px solid var(--hair);
  box-shadow:
    inset 0 0 0 6px #0b0806,
    inset 0 0 0 7px rgba(255, 180, 84, 0.18),
    0 50px 100px -40px rgba(0, 0, 0, 0.85);
}
.board-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap;
  padding-bottom: clamp(0.8rem, 2cqi, 1.2rem);
  border-bottom: 1px dashed var(--hair);
}
/* The venue's name as a split-flap sign: one tile per letter, words kept whole when it wraps. */
.flap { display: flex; flex-wrap: wrap; gap: 0.35em 0.6em; font-size: clamp(1rem, 3.2cqi, 1.9rem); min-height: 1.6em; }
.flap .w { display: inline-flex; gap: 0.08em; }
.flap .t {
  display: inline-block; width: 0.82em; text-align: center; padding: 0.12em 0 0.1em; border-radius: 0.14em;
  background: linear-gradient(180deg, #2e241b 0 49%, #0b0806 49% 51%, #261d16 51% 100%);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  color: var(--tx0); font-weight: 800; line-height: 1.1;
}
.flap .t.spin { color: var(--amber); }
.board-meta { display: grid; gap: 0.3rem; justify-items: end; text-align: right; }
.board-meta .dist { color: var(--tx1); font-size: 0.95rem; }
.board-meta .src { color: var(--tx2); font-size: 0.82rem; }
.tag {
  font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700;
  color: var(--tx2); border: 1px solid var(--hair); border-radius: 999px; padding: 0.22rem 0.7rem;
}
.board-status {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; align-items: baseline;
  padding-top: clamp(0.8rem, 2cqi, 1.2rem);
  font-size: clamp(0.72rem, 1.9cqi, 0.92rem); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700;
}
.status { color: var(--mint); display: inline-flex; align-items: center; gap: 0.55em; }
.status::before { content: ""; width: 0.55em; height: 0.55em; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.status.later { color: var(--tx2); }
.status.later::before { box-shadow: none; }
.timer { color: var(--tx2); }
.timer b {
  color: var(--amber); font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
  font-size: 1.25em; margin-left: 0.4em;
}
.slots {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(0.6rem, 2cqi, 1rem);
}
.slot {
  display: grid; justify-items: start; gap: 0.2rem;
  padding: clamp(0.4rem, 1.4cqi, 0.8rem) clamp(0.5rem, 2.2cqi, 1.4rem) clamp(0.6rem, 1.6cqi, 1rem);
  perspective: 600px;
}
.slot + .slot { border-left: 1px solid var(--hair-soft); }
.slot:first-child { padding-left: 0; }
.slot-label {
  font-size: clamp(0.66rem, 1.6cqi, 0.8rem); letter-spacing: 0.26em; font-weight: 700; color: var(--tx2);
}
.num {
  display: block;
  font-family: var(--serif); font-style: italic; font-weight: 400;
  color: var(--amber);
  font-size: clamp(2.3rem, 14cqi, 7.5rem);
  line-height: 1; letter-spacing: -0.02em;
  text-shadow: 0 0 18px rgba(255, 180, 84, 0.35), 0 0 48px rgba(255, 144, 38, 0.18);
  transform-origin: 50% 60%;
  white-space: nowrap;
}
.num small { font-size: 0.5em; vertical-align: 0.72em; margin-left: 0.04em; letter-spacing: 0; }
/* An em dash in the italic serif sits on the baseline and reads as an underscore; the sans centres it. */
.num.dash { color: var(--tx3); text-shadow: none; font-family: var(--sans); font-style: normal; font-weight: 300; }
.num.out { animation: flipOut 0.17s ease-in forwards; }
.num.in { animation: flipIn 0.42s var(--ease); }
@keyframes flipOut { to { transform: rotateX(88deg); opacity: 0.2; } }
@keyframes flipIn { from { transform: rotateX(-88deg); opacity: 0.2; } to { transform: rotateX(0); opacity: 1; } }

.board-foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.4rem 1rem;
  padding-top: clamp(0.8rem, 2cqi, 1.1rem); border-top: 1px dashed var(--hair);
  font-size: clamp(0.78rem, 1.9cqi, 0.9rem);
}
.board-foot .why { color: var(--tx0); }
.board-foot .why b { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--amber); }
.board-foot .ok { color: var(--mint); white-space: nowrap; }

/* the phone ------------------------------------------------------------------ */
.phone {
  position: relative;
  width: var(--pw, 300px);
  border-radius: calc(var(--pw, 300px) * 0.15);
  padding: calc(var(--pw, 300px) * 0.032);
  background: linear-gradient(160deg, #3a3029, #0d0a08 45%, #231c17);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 0 0 1px #050403,
    0 40px 80px -24px rgba(0, 0, 0, 0.8),
    0 0 80px -20px rgba(255, 180, 84, 0.18);
}
.phone img {
  width: 100%; height: auto; border-radius: calc(var(--pw, 300px) * 0.12);
  aspect-ratio: 620 / 1348;
}
.stage .phone {
  --pw: clamp(230px, 24vw, 300px);
  margin-left: calc(var(--pw) * -0.28);
  margin-bottom: calc(var(--pw) * -0.36);
  transform: rotate(3.5deg);
  z-index: 2;
}

.facts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem 2rem;
  margin-top: clamp(2.4rem, 6vw, 5rem); max-width: 60rem;
}
.facts div { border-top: 1px solid var(--hair); padding-top: 0.8rem; font-size: 0.95rem; }
.facts strong { display: block; color: var(--tx0); font-weight: 700; }

/* ---- sections -------------------------------------------------------------- */
section { padding-block: clamp(3.5rem, 8vw, 7rem); }
.sec-head {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 1rem clamp(2rem, 5vw, 5rem);
  align-items: end; margin-bottom: clamp(2rem, 4vw, 3.2rem);
}
.sec-head h2 {
  font-size: clamp(2rem, 4.4vw, 3.6rem); line-height: 1.02; letter-spacing: -0.04em; font-weight: 800;
  margin-top: 0.7rem;
}
.sec-head p { max-width: 34rem; }
.rule { border: 0; border-top: 1px solid var(--hair-soft); margin: 0; }

/* gallery -------------------------------------------------------------------- */
.gallery-wrap { position: relative; }
.gallery {
  display: flex; gap: clamp(1.2rem, 3vw, 2.4rem); align-items: flex-end;
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  padding-inline: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter)));
  scroll-padding-inline: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter)));
  padding-bottom: 1.4rem;
  scrollbar-width: thin; scrollbar-color: var(--hair) transparent;
}
.gallery figure { margin: 0; flex: none; scroll-snap-align: start; display: grid; gap: 0.9rem; }
.gallery .phone { --pw: clamp(220px, 22vw, 270px); }
.gallery figcaption { max-width: 17rem; font-size: 0.9rem; color: var(--tx2); line-height: 1.45; }
.gallery figcaption b { display: block; color: var(--tx0); font-weight: 700; font-size: 0.95rem; }
.zoom {
  width: clamp(270px, 32vw, 420px);
  border-radius: 22px; overflow: hidden;
  border: 1px solid var(--hair);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8);
  background: #0d0a12;
}
.zoom-label {
  display: flex; justify-content: space-between; font-size: 0.68rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--tx3); font-weight: 700;
  padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--hair-soft); background: var(--ground2);
}

/* a crop of a real screenshot: --x --y --w --h in source pixels (620 × 1348) */
.crop { position: relative; overflow: hidden; aspect-ratio: var(--w) / var(--h); width: 100%; }
.crop img {
  position: absolute; max-width: none; height: auto;
  width: calc(620 / var(--w) * 100%);
  left: calc(var(--x) / var(--w) * -100%);
  top: calc(var(--y) / var(--h) * -100%);
}

.gallery-ctl { display: flex; gap: 0.6rem; }
.gallery-ctl button {
  width: 48px; height: 48px; border-radius: 50%; cursor: pointer;
  background: transparent; color: var(--tx0); border: 1px solid var(--hair); font-size: 1.1rem;
  transition: background 0.2s, border-color 0.2s;
}
.gallery-ctl button:hover { background: var(--surface2); border-color: var(--amber); }

/* comparison ---------------------------------------------------------------- */
.compare { width: 100%; border-collapse: collapse; font-size: 0.98rem; }
.compare th, .compare td { text-align: left; vertical-align: top; padding: 1.15rem 1.2rem 1.15rem 0; }
.compare thead th {
  font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tx2); font-weight: 700;
  border-bottom: 1px solid var(--hair); padding-bottom: 0.8rem;
}
.compare thead th:last-child { color: var(--amber); }
.compare tbody tr { border-bottom: 1px solid var(--hair-soft); }
.compare tbody th { color: var(--tx0); font-weight: 700; width: 22%; }
.compare td.them { color: var(--tx2); width: 32%; }
.compare td.them span { text-decoration: line-through; text-decoration-color: rgba(255, 144, 38, 0.5); }
.compare td.us { color: var(--tx0); }
.compare td.us .s { font-size: 1.1em; }
.compare .mono { font-weight: 700; letter-spacing: 0.08em; font-size: 0.86em; }
.compare .mint { color: var(--mint); }

/* sources ------------------------------------------------------------------- */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 6rem); }
.pull {
  font-family: var(--serif); font-style: italic; color: var(--tx0);
  font-size: clamp(1.9rem, 3.8vw, 3.1rem); line-height: 1.12; letter-spacing: -0.015em;
  margin: 1.2rem 0 0; position: relative;
}
.pull::before {
  content: "“"; position: absolute; left: -0.1em; top: -0.62em; font-size: 3.4em; color: var(--amber); opacity: 0.35; line-height: 1;
}
.pull .s { color: var(--amber); }
.pull-cite { margin-top: 1.1rem; font-size: 0.85rem; color: var(--tx2); }
.prose { display: grid; gap: 2rem; }
.prose h3 { font-size: 1.12rem; letter-spacing: -0.01em; margin-bottom: 0.45rem; }
.prose p { max-width: 38rem; }
.prose .inset {
  border-left: 2px solid var(--amber); padding-left: 1.2rem;
}

/* honesty ------------------------------------------------------------------- */
.honest {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 5.5rem); align-items: start;
}
.honest-shot { position: sticky; top: 2rem; display: grid; gap: 1rem; }
.honest-shot .zoom { width: 100%; }
.honest-shot p { font-size: 0.88rem; color: var(--tx2); }
dl.states { margin: 0; }
dl.states div {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0.4rem 2rem;
  padding-block: 1.4rem; border-top: 1px solid var(--hair-soft);
}
dl.states div:last-child { border-bottom: 1px solid var(--hair-soft); }
dl.states dt { font-family: var(--serif); font-style: italic; color: var(--amber); font-size: 1.28rem; line-height: 1.25; }
dl.states dd { margin: 0; font-size: 0.98rem; }

/* map ----------------------------------------------------------------------- */
.mapgrid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.mapshot { position: relative; border-radius: 26px; overflow: hidden; border: 1px solid var(--hair); background: #0d0a12; }
.pin-note {
  position: absolute; transform: translate(-50%, 0);
  font-size: clamp(0.66rem, 1.4vw, 0.8rem); line-height: 1.25; font-weight: 600;
  background: rgba(14, 11, 9, 0.88); color: var(--tx0); border: 1px solid var(--hair);
  padding: 0.35rem 0.6rem; border-radius: 8px; white-space: nowrap;
}
.pin-note::before {
  content: ""; position: absolute; left: 50%; top: -14px; height: 14px; border-left: 1px dashed var(--tx2);
}
.pin-note.up::before { top: auto; bottom: -14px; }
.maptext { display: grid; gap: 1.1rem; }
.maptext h2 { font-size: clamp(2rem, 4.4vw, 3.6rem); line-height: 1.02; letter-spacing: -0.04em; font-weight: 800; }

/* features ------------------------------------------------------------------ */
.features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(1.5rem, 4vw, 3.5rem); }
.feature { border-top: 1px solid var(--hair); padding-block: 1.3rem 1.8rem; }
.feature h3 { font-size: 1.05rem; margin-bottom: 0.4rem; letter-spacing: -0.01em; }
.feature p { font-size: 0.95rem; }
.feature .k { font-family: var(--serif); font-style: italic; color: var(--amber); font-size: 1.05em; }

/* the menu (pricing) -------------------------------------------------------- */
.menu {
  border: 1px solid var(--hair); border-radius: 24px;
  background: linear-gradient(180deg, var(--surface), var(--ground2));
  padding: clamp(1.4rem, 4vw, 3.2rem);
  box-shadow: inset 0 0 0 6px var(--ground), inset 0 0 0 7px var(--hair-soft);
}
.menu-top { text-align: left; display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 0.5rem 2rem; margin-bottom: clamp(1.4rem, 3vw, 2.4rem); }
.menu-top h2 { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(2.2rem, 5vw, 3.8rem); letter-spacing: -0.02em; }
.menu-top p { color: var(--tx2); max-width: 26rem; font-size: 0.95rem; }
.menu-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); }
.menu-col h3 {
  font-size: 0.78rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--tx2);
  padding-bottom: 0.7rem; border-bottom: 1px solid var(--hair); margin-bottom: 0.6rem;
}
.menu-col h3 b { color: var(--amber); }
/* A sub-line gets its OWN grid row, so the leader always runs from the end of the item's name
   to its price. Inside the name it widened the name's box and the dots started late. */
.line { display: grid; grid-template-columns: auto minmax(1.5rem, 1fr) auto; align-items: baseline; column-gap: 0.6rem; padding-block: 0.55rem; }
.line .what { color: var(--tx0); }
.line .what small, .line > small { display: block; color: var(--tx2); font-size: 0.82rem; }
.line > small { grid-column: 1 / -1; }
.line .dots { border-bottom: 2px dotted var(--tx3); transform: translateY(-0.3em); }
.line .price { font-family: var(--serif); font-style: italic; color: var(--amber); font-size: 1.35rem; white-space: nowrap; }
.line .price.free { font-family: var(--sans); font-style: normal; font-size: 0.78rem; letter-spacing: 0.2em; font-weight: 800; color: var(--mint); }
.menu-sub { margin-top: 1.4rem; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tx2); font-weight: 700; }
.menu-note { margin-top: 1.8rem; padding-top: 1.1rem; border-top: 1px dashed var(--hair); font-size: 0.9rem; color: var(--tx2); }
.menu-note strong { color: var(--tx0); }

/* faq ----------------------------------------------------------------------- */
.faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(1.5rem, 5vw, 5rem); }
.faq h2 { font-size: clamp(2rem, 4.4vw, 3.6rem); line-height: 1.02; letter-spacing: -0.04em; font-weight: 800; margin-top: 0.7rem; }
details { border-top: 1px solid var(--hair-soft); }
details:last-child { border-bottom: 1px solid var(--hair-soft); }
summary {
  list-style: none; cursor: pointer; padding-block: 1.2rem; color: var(--tx0); font-weight: 650; font-size: 1.05rem;
  display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
}
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font-family: var(--serif); color: var(--amber); font-size: 1.5rem; line-height: 1; transition: transform 0.25s var(--ease); flex: none; }
details[open] summary::after { transform: rotate(45deg); }
details p { padding-bottom: 1.3rem; max-width: 40rem; }

/* closing ------------------------------------------------------------------- */
.closing {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2rem; align-items: end;
  padding-block: clamp(4rem, 9vw, 8rem);
}
.closing h2 {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(3rem, 9vw, 7.5rem); line-height: 0.95; letter-spacing: -0.03em;
}
.closing h2 span { color: var(--amber); text-shadow: 0 0 30px rgba(255, 180, 84, 0.3); }
.closing-side { display: grid; gap: 1.1rem; justify-items: start; }

footer { border-top: 1px solid var(--hair-soft); padding-block: 2.2rem 3rem; }
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.2rem 2rem; align-items: center; }
.foot nav { display: flex; flex-wrap: wrap; gap: 0.8rem 1.6rem; font-size: 0.92rem; }
.foot nav a { color: var(--tx1); text-decoration: none; }
.foot nav a:hover { color: var(--amber); }
.foot nav .mail { color: var(--tx2); user-select: all; }
.fine { color: var(--tx3); font-size: 0.84rem; margin-top: 1.4rem; max-width: 52rem; }

/* ---- people: add, confirm, correct, report ------------------------------------ */
.people { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 6vw, 5.5rem); align-items: start; }
.people h2 { font-size: clamp(2.1rem, 4.6vw, 3.9rem); line-height: 1.02; letter-spacing: -0.04em; font-weight: 800; margin: 0.8rem 0 1.2rem; }
.people .lede { max-width: 36rem; }
.acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 2.2rem; margin: 2.2rem 0 0; }
.acts > div { border-top: 1px solid var(--hair); padding-top: 1rem; }
.acts dt { color: var(--tx0); font-weight: 750; font-size: 1.05rem; margin-bottom: 0.35rem; }
.acts dd { margin: 0; color: var(--tx1); font-size: 0.95rem; }
.chip-inline {
  display: inline-block; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--amber); border: 1px solid rgba(255, 180, 84, 0.45); border-radius: 999px; padding: 0.05rem 0.5rem; white-space: nowrap;
}
.people-note { margin-top: 1.8rem; color: var(--tx2); font-size: 0.9rem; }

/* The card is drawn, not a screenshot, and is styled after the app's dusk card. */
.people-demo { margin: 0; position: sticky; top: 1.5rem; }
.pcard {
  background: linear-gradient(180deg, #221a2b, #19131f); border: 1px solid #3a2e46; border-radius: 22px;
  padding: 1.2rem 1.25rem 1.1rem; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 180, 84, 0.06);
  font-size: 0.95rem;
}
.pc-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.pc-name { color: #f8f4fb; font-weight: 800; font-size: 1.3rem; letter-spacing: -0.01em; }
.pc-dist { color: #b4aac2; font-size: 0.9rem; }
.pc-badge {
  display: inline-block; margin-top: 0.6rem; font-size: 0.64rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--amber); border: 1px solid rgba(255, 180, 84, 0.45); border-radius: 999px; padding: 0.15rem 0.6rem;
}
.pc-status { margin-top: 0.9rem; color: var(--mint); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.12em; display: flex; align-items: center; gap: 0.5rem; }
.pc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 8px var(--mint); }
.pc-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; margin-top: 1rem; perspective: 600px; }
.pc-slots > div { background: #120e17; border-radius: 14px; padding: 0.8rem 0.4rem 0.6rem; display: grid; justify-items: center; gap: 0.3rem; }
.pc-slots b { color: #f8f4fb; font-size: 1.6rem; font-weight: 800; line-height: 1.1; }
.pc-slots b.in { animation: flipIn 0.5s var(--ease); color: var(--amber); }
.pc-slots small { color: #7c7189; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.2em; }
.pc-pending { margin-top: 0.9rem; border: 1px solid #3a2e46; border-radius: 12px; padding: 0.55rem 0.75rem; color: #b4aac2; font-size: 0.85rem; }
.pc-foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1rem; padding-top: 0.8rem; border-top: 1px solid #2c2338; }
.pc-ok { color: var(--mint); font-size: 0.85rem; }
.pc-btn {
  font-size: 0.66rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap;
  color: #f8f4fb; border: 1px solid #564c64; border-radius: 999px; padding: 0.35rem 0.8rem;
}
.pc-btn.warn { color: var(--amber); border-color: rgba(255, 180, 84, 0.6); }
.pc-confirm { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 0.8rem; color: #b4aac2; font-size: 0.85rem; }
.pc-confirm.done { color: var(--mint); }
.pc-chip { font-weight: 800; font-size: 0.7rem; letter-spacing: 0.14em; color: var(--amber); white-space: nowrap; }
.pc-confirm.done .pc-chip { color: var(--mint); }
.pc-steps { list-style: none; margin: 1.3rem 0 0; padding: 0; display: grid; gap: 0.55rem; counter-reset: s; }
.pc-steps li { counter-increment: s; display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); color: var(--tx3); font-size: 0.9rem; transition: color 0.3s; }
.pc-steps li::before { content: counter(s); font-family: var(--serif); font-style: italic; color: inherit; }
.pc-steps li.on { color: var(--tx0); }
.pc-steps li.on::before { color: var(--amber); }
.people-demo figcaption { margin-top: 1rem; color: var(--tx3); font-size: 0.8rem; }

/* ---- load sequence --------------------------------------------------------- */
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes riseTilt { from { opacity: 0; transform: translateY(60px) rotate(8deg); } to { opacity: 1; transform: rotate(3.5deg); } }
.hero h1 { animation: rise 0.8s var(--ease) both; }
.hero-side { animation: rise 0.8s var(--ease) 0.12s both; }
.board { animation: rise 0.9s var(--ease) 0.24s both; }
.stage .phone { animation: riseTilt 1.1s var(--ease) 0.42s both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ---- responsive ------------------------------------------------------------ */
@media (max-width: 960px) {
  .people { grid-template-columns: minmax(0, 1fr); }
  .people-demo { position: static; max-width: 30rem; }
  .nav ul { display: none; }
  .hero-top, .sec-head, .split, .honest, .mapgrid, .faq, .closing { grid-template-columns: minmax(0, 1fr); }
  .honest-shot { position: static; max-width: 30rem; }
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stage { grid-template-columns: minmax(0, 1fr); }
  .stage .board { padding-right: clamp(1.1rem, 3vw, 2.4rem); padding-bottom: 4.5rem; }
  .stage .phone {
    --pw: min(62vw, 270px);
    justify-self: end; margin: -3.5rem 4vw 0 0;
  }
}
@media (max-width: 640px) {
  .acts { grid-template-columns: minmax(0, 1fr); }
  .board-meta { justify-items: start; text-align: left; }
  body { font-size: 16px; }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .features { grid-template-columns: minmax(0, 1fr); }
  .menu-cols { grid-template-columns: minmax(0, 1fr); }
  dl.states div { grid-template-columns: minmax(0, 1fr); }
  .compare thead { display: none; }
  .compare, .compare tbody, .compare tr, .compare th, .compare td { display: block; width: auto !important; }
  .compare tbody tr { padding-block: 1rem; }
  .compare th, .compare td { padding: 0.15rem 0; }
  .compare tbody th { font-size: 1.05rem; margin-bottom: 0.3rem; }
  .compare td.them::before { content: "Most apps: "; text-decoration: none; color: var(--tx3); }
  .compare td.us { margin-top: 0.35rem; }
  .compare td.us::before { content: "Fourish: "; color: var(--amber); font-weight: 700; }
  .gallery-ctl { display: none; }
  .nav .store span { font-size: 0.85rem; }
}

/* ---- /bot: the crawler page ------------------------------------------------- */
/* The board as a server log: one row per request, then the user agent. */
.log { display: grid; gap: 0.15rem; padding-block: clamp(0.8rem, 2cqi, 1.2rem);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: clamp(0.78rem, 2.1cqi, 1rem); }
.log-row { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 0.4rem 1.2rem;
  padding: 0.35rem 0; border-bottom: 1px solid var(--hair-soft); }
.log-t { color: var(--tx3); }
.log-m { color: var(--tx2); }
.log-p { color: var(--tx0); overflow-wrap: anywhere; }
.log-s { color: var(--mint); }
.log-ua { display: grid; gap: 0.4rem; padding-top: 0.9rem; }
.log-ua code { color: var(--amber); overflow-wrap: anywhere; }
.board-code .board-head { align-items: center; }
.board-code pre { margin: 0; padding-top: 1rem; overflow-x: auto; color: var(--tx0); line-height: 1.5;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: clamp(1rem, 2.6cqi, 1.5rem); }
.feature code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; color: var(--tx0); }
.mono-amber { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--amber); }