/* PAIRS page, look B "the toy seesaw" (picked 2026-10-22), polished 2026-10-26 (DESIGN-POLISH.md): a pale daylight
   page, one voxel playground, one orange, one dark ink. A written system (the tokens below, nothing ad hoc), one
   section pattern used five times, 1px hairlines for structure and the chunky ink border + hard shadow only on the
   four toy objects (the name-a-coin card, the orange button, Connect wallet, the selected example card).
   Green and red only mean ahead / behind and buy / sell. Orange's jobs: the mark's dot, the primary button, the
   eyebrows and section numbers, the step numbers, the live dot, a fresh row's flash. */
:root {
  color-scheme: light;
  --page: #eef3ef;
  --ink: #15282d;
  --ink2: #3c5055;
  --muted: #5e7074;   /* 4.5:1 or more on white and on the page */
  --line: rgba(21, 40, 45, .11);
  --line-2: rgba(21, 40, 45, .2);
  --card: #ffffff;
  --well: #f3f6f3;
  --orange: #ff5b1f;
  --orange-lo: #c8420f;
  --up: #1b8a4f;
  --down: #cc3a30;
  --amber: #e2a72e;
  --f-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --f-body: "Figtree", "Segoe UI", system-ui, sans-serif;
  /* the type scale: nine sizes, nothing in between */
  --t-hero: clamp(44px, 4.9vw, 80px);
  --t-h2: clamp(34px, 4.2vw, 64px);
  --t-h3: clamp(20px, 1.6vw, 24px);
  --t-lead: clamp(17px, 1.3vw, 20px);
  --t-body: 16px;
  --t-small: 14px;
  --t-label: 12px;
  --t-num: clamp(28px, 2.6vw, 40px);
  --t-card: 18px;
  /* spacing */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px;
  --section: clamp(72px, 9vw, 128px);
  --gut: clamp(16px, 4vw, 64px);
  --max: 1360px;
  --head-h: 72px;
  /* radii */
  --r-chip: 8px; --r-ctl: 14px; --r-card: 20px; --r-stage: 28px;
  --pop: 0 16px 40px rgba(21, 40, 45, .18);
  --ease-drop: cubic-bezier(.3, 1.6, .5, 1);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
html { scroll-padding-top: calc(var(--head-h) + 8px); }   /* anything scrolled into view lands below the sticky header */
body {
  background: var(--page); color: var(--ink);
  font: 500 var(--t-body)/1.55 var(--f-body);
  -webkit-font-smoothing: antialiased; min-height: 100vh; overflow-x: hidden;
}
button, input, select { font: inherit; color: inherit; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
a:hover { color: var(--orange-lo); }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
[hidden] { display: none !important; }
.eyebrow, .sec-label { font: 700 var(--t-label)/1.3 var(--f-body); letter-spacing: .14em; text-transform: uppercase; }
.warn { color: #8a5a16; }
.exl { display: inline-block; font: 700 var(--t-label)/1.5 var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: #6b5310; background: #fff3c9; border: 1px solid #ecd58a; border-radius: var(--r-chip); padding: 0 var(--s2); }

/* ---- header ---- */
#top {
  position: sticky; top: 0; z-index: 15; height: var(--head-h); background: var(--page);   /* solid: text never shows through it */
  display: flex; align-items: center; gap: var(--s4); padding: 0 var(--gut);
  transition: background-color .2s, box-shadow .2s;
}
#top.scrolled { background: rgba(238, 243, 239, .86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--line); }
#mark { font: 800 32px/1 var(--f-display); letter-spacing: -.02em; text-decoration: none; font-variation-settings: "opsz" 96; color: var(--ink); }
#mark::after { content: ""; display: inline-block; width: .26em; height: .26em; margin-left: .06em; border-radius: 2px; background: var(--orange); }
#mark:hover::after { animation: dotDrop .45s var(--ease-drop); }
@keyframes dotDrop { 0% { transform: translateY(-.5em); } 100% { transform: none; } }
#mode { display: inline-flex; align-items: center; gap: var(--s2); font: 700 var(--t-label)/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink2); border: 1px solid var(--line-2); border-radius: 999px; padding: 6px 10px; background: rgba(255, 255, 255, .6); white-space: nowrap; }
#mode:empty { display: none; }
#mode::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); }
nav { display: flex; align-items: center; gap: var(--s5); margin-left: auto; }
#navMore { display: contents; }
#menuBtn { display: none; }
.link { background: none; border: 0; padding: var(--s1) 0; cursor: pointer; font: 600 15px/1.3 var(--f-body); color: var(--ink2); text-decoration: none; }
.link:hover { color: var(--ink); text-decoration: underline; }
.link.arrow::after, .arrow::after { content: ""; display: inline-block; width: .9em; height: .6em; margin-left: .35em; background: currentColor; transition: transform .2s;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M1 5h13M10 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M1 5h13M10 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
.arrow:hover::after { transform: translateX(3px); }
.ink, .orange {
  border: 2px solid var(--ink); border-radius: var(--r-ctl); cursor: pointer; font-weight: 700; white-space: nowrap; transition: transform .06s, box-shadow .06s;
}
.ink { background: var(--card); height: 44px; padding: 0 var(--s4); box-shadow: 0 4px 0 var(--ink); font-size: 15px; }
.orange { background: var(--orange); color: #fff; height: 56px; padding: 0 var(--s5); box-shadow: 0 5px 0 var(--ink), inset 0 -4px 0 var(--orange-lo); font: 700 var(--t-card)/1 var(--f-display); }
.ink:active, .orange:active, .press { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink) !important; }
.orange:disabled { background: #e7ebe8; color: var(--muted); box-shadow: 0 5px 0 #b9c3c0; border-color: #b9c3c0; cursor: default; }
#sndBtn[aria-pressed="true"] { color: var(--ink); }

/* ---- the live strip: a fixed label, the moving events, hairlines ---- */
#strip { display: flex; align-items: center; height: 48px; border-block: 1px solid var(--line); background: rgba(255, 255, 255, .5); }
#strip.off { display: none; }
#stripLabel { flex: none; display: flex; align-items: center; gap: var(--s2); padding: 0 var(--s4) 0 var(--gut); height: 100%; font: 700 var(--t-label)/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--orange-lo); background: linear-gradient(90deg, var(--page) 80%, rgba(238, 243, 239, 0)); position: relative; z-index: 1; }
#stripLabel i { font-style: normal; color: #6b5310; background: #fff3c9; border: 1px solid #ecd58a; border-radius: var(--r-chip); padding: 2px 6px; letter-spacing: .06em; }
#stripWin { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 3%, #000 96%, transparent); }
#stripIn { display: inline-block; animation: strip 60s linear infinite; font: 500 var(--t-small)/48px var(--f-body); color: var(--ink2); font-variant-numeric: tabular-nums; }
#strip:hover #stripIn { animation-play-state: paused; }
#stripIn span { margin-right: 40px; }
#stripIn .dup { margin: 0; }
#stripIn b { color: var(--ink); } #stripIn .buy { color: var(--up); } #stripIn .sell { color: var(--down); }
#stripIn i { display: none; }
@keyframes strip { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---- panels (How it works, How we count, the wallet): popovers ---- */
#how, #count, #wPop, #wChoose {
  position: absolute; z-index: 20; right: var(--gut); top: calc(var(--head-h) - 6px); width: min(440px, calc(100vw - 32px));
  background: var(--card); border: 2px solid var(--ink); border-radius: var(--r-card); box-shadow: 0 6px 0 var(--ink), var(--pop); padding: var(--s5);
  max-height: calc(100vh - 90px); overflow-y: auto; font-size: var(--t-small); line-height: 1.5;
}
#count { position: fixed; top: var(--s4); max-height: calc(100vh - 32px); }
#how ol { margin: 0; padding-left: 20px; display: grid; gap: var(--s2); color: var(--ink2); }
#how h3, #count h3 { font: 700 var(--t-card)/1.2 var(--f-display); margin: var(--s4) 0 var(--s1); }
#count h3 { margin-top: 0; }
#how p, #count p { margin: 0 0 var(--s2); color: var(--ink2); }
#count b, #how b { color: var(--ink); }
#count a { color: var(--orange-lo); }
#countMode:empty { display: none; }
#wPop, #wChoose { position: fixed; }
#wChoose { width: min(360px, calc(100vw - 32px)); padding: var(--s4) var(--s4) var(--s2); }
#wPop p { margin: 0 0 var(--s2); }
#wHold { font: 700 var(--t-h3)/1.2 var(--f-display); }
#wHold small, #wGot small { display: block; font: 500 var(--t-small)/1.4 var(--f-body); color: var(--muted); }
#wLast { color: var(--ink2); margin-bottom: var(--s2); }
#wLast .mine { margin-top: 6px; }
#wLast button { margin-top: var(--s1); }
#wPop .ink { height: auto; padding: 6px 12px; font-size: var(--t-small); box-shadow: 0 3px 0 var(--ink); }
/* the wallet choice, under Connect wallet (DESIGN-POLISH 15) */
#wPick { margin: 0; padding: 0; list-style: none; }
#wPick h3 { margin: 0 0 var(--s2); font: 700 var(--t-card)/1.2 var(--f-display); }
#wPick button { display: flex; align-items: center; gap: var(--s3); width: 100%; min-height: 52px; padding: 0 var(--s3); background: none; border: 0; border-top: 1px solid var(--line); cursor: pointer; text-align: left; font: 600 var(--t-body)/1.2 var(--f-body); }
#wPick button:hover { background: var(--well); }
#wPick button small { margin-left: auto; color: var(--muted); font: 600 var(--t-label)/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; }
#wPick svg { width: 24px; height: 24px; flex: none; }

/* ---- 01 the hero: pitch + card left, the playground right ---- */
main { display: block; }
#heroSec {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s7); align-items: center;
  max-width: var(--max); margin: 0 auto; padding: var(--s5) var(--gut) var(--s5); min-height: min(calc(100svh - 120px), 860px);
}
#left { display: flex; flex-direction: column; gap: var(--s5); min-width: 0; }
#tag { margin: 0 0 var(--s4); color: var(--orange-lo); }
#pitch h1 { margin: 0; font: 800 var(--t-hero)/.98 var(--f-display); letter-spacing: -.035em; font-variation-settings: "opsz" 96; text-wrap: balance; }
#pitch h1 .h1b { font-weight: 300; }
#pitchSub { margin: var(--s4) 0 0; font: 500 var(--t-lead)/1.5 var(--f-body); color: var(--ink2); max-width: 34ch; }
.drop { position: relative; display: inline-block; white-space: nowrap; }
.drop::after { content: ""; position: absolute; left: 50%; top: -.2em; width: .22em; height: .22em; margin-left: -.11em; border-radius: 50%; animation: coinDrop .9s var(--ease-drop) .25s both; }
.d1::after { background: radial-gradient(circle at 35% 35%, #f1cd6a, #dcae46 60%, #b5832a); box-shadow: 0 2px 0 #8c6420; }
.d2::after { background: radial-gradient(circle at 35% 35%, #eef1f2, #c8ced1 60%, #858e93); box-shadow: 0 2px 0 #646c70; animation-delay: .5s; }
@keyframes coinDrop { from { transform: translateY(-2.2em); opacity: 0; } 60% { opacity: 1; } to { transform: none; opacity: 1; } }

/* the picker: the one toy object on the page */
#picker {
  position: relative; z-index: 2; background: var(--card); border: 2px solid var(--ink); border-radius: var(--r-card); box-shadow: 0 8px 0 var(--ink); padding: 20px 22px;
}
#picker h2 { margin: 0 0 var(--s4); font: 700 var(--t-h3)/1.15 var(--f-display); letter-spacing: -.015em; }
#prow { display: flex; gap: var(--s3); }
#fName { flex: 1; min-width: 0; height: 56px; display: flex; align-items: center; gap: 2px; background: var(--well); border: 2px solid var(--ink); border-radius: var(--r-ctl); padding: 0 var(--s4); }
#fName span { font: 700 var(--t-h3)/1 var(--f-display); color: var(--muted); }
#fName input { flex: 1; min-width: 0; border: 0; background: none; outline: none; padding: 0 0 0 2px; font: 700 var(--t-h3)/1.1 var(--f-display); }
#fName:focus-within { background: #fff; box-shadow: 0 0 0 4px rgba(255, 91, 31, .22); }
#fName.bad, .bad { border-color: var(--down) !important; }
#go::after { content: ""; display: inline-block; width: .8em; height: .55em; margin-left: .4em; background: currentColor; transition: transform .2s;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M1 5h13M10 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M1 5h13M10 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
#go:hover::after { transform: translateX(3px); }
#sugg { display: grid; gap: 2px; margin-top: var(--s3); }
#sugg:empty { display: none; }
.sg { display: grid; grid-template-columns: 22px auto 1fr; align-items: baseline; column-gap: 10px; text-align: left; border: 0; background: none; border-radius: var(--s3); padding: var(--s2) 10px; cursor: pointer; }
.sg:hover { background: var(--well); }
.sg i { align-self: center; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--ink); }
.sg.pick i { background: var(--orange); box-shadow: inset 0 0 0 3px #fff; }
.sg .t { font: 700 var(--t-h3)/1.1 var(--f-display); }
.sg .w { color: var(--ink); font-weight: 600; }
.sg .n { grid-column: 3; color: var(--muted); font-size: var(--t-small); }
.sg .warn { grid-column: 3; color: #8a5a16; font-size: var(--t-small); }
.sg.dim { opacity: .55; }
#more { margin-top: var(--s3); display: grid; gap: 10px; }
#more label { display: grid; gap: var(--s1); font-size: var(--t-small); font-weight: 600; color: var(--ink2); min-width: 0; }
#more input:not([type=file]), #more select { width: 100%; background: var(--well); border: 1px solid var(--line-2); border-radius: var(--s3); padding: var(--s2) 10px; outline: none; font-weight: 600; color: var(--ink); }
#more input:focus, #more select:focus { background: #fff; box-shadow: 0 0 0 4px rgba(255, 91, 31, .22); border-color: var(--ink); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
#edit { display: grid; gap: 10px; padding-bottom: var(--s1); }
.logo-row { display: flex; align-items: center; gap: var(--s3); font-size: var(--t-small); color: var(--muted); }
#more .filebtn { display: inline-flex; align-items: center; position: relative; overflow: hidden; color: var(--ink); font-size: var(--t-small); flex: none; height: 40px; box-shadow: 0 3px 0 var(--ink); }
.filebtn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
#logoPrev { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--well); border: 2px dashed #b9c3c0; }
#launchRow { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
#hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
#more input::placeholder, #fName input::placeholder { color: #9aa8a6; font-weight: 500; }
#gate { margin: var(--s3) 0 0; font-size: var(--t-small); color: var(--muted); }
#pstat { margin: var(--s1) 0 0; font-size: var(--t-small); color: var(--ink2); }
#pstat:empty { display: none; }
#pstat b { color: var(--ink); }

/* the playground: a real window, sky to the page colour, a caption row */
#stageWrap { min-width: 0; }
#stage {
  position: relative; height: clamp(460px, 70svh, 760px); border-radius: var(--r-stage); overflow: hidden; border: 1px solid var(--line);
  background: radial-gradient(110% 80% at 18% 6%, rgba(255, 236, 190, .7), rgba(255, 236, 190, 0) 46%), linear-gradient(180deg, #cfe8f6 0%, #e6f1ee 70%, var(--page) 100%);
}
#c { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; }
.seat {
  position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px;
  font: 600 13px/1.2 var(--f-body); color: var(--ink2); background: #fff; border: 1px solid var(--line-2); border-radius: 999px; padding: 6px 10px; transition: opacity .3s;
}
.seat::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #dcae46; }
#tagR::before { background: #9aa2a6; } #tagB::before { background: #4384c7; }
.seat b { font-weight: 700; color: var(--ink); }
.seat.off { opacity: 0; }
#caption { display: flex; justify-content: space-between; gap: var(--s4); margin: var(--s3) var(--s1) 0; font: 700 var(--t-label)/1.4 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
#caption .live { display: inline-flex; align-items: center; gap: var(--s2); color: var(--ink2); min-width: 0; }
#caption .live i { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); }
#caption .live i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--orange); animation: ping 1.8s ease-out infinite; }
@keyframes ping { from { transform: scale(1); opacity: .6; } to { transform: scale(3); opacity: 0; } }
#capHint { text-align: right; }

/* ---- the section pattern (02 to 05): hairline, label row, title left, short paragraph right ---- */
.sec { max-width: var(--max); margin: 0 auto; padding: var(--section) var(--gut) 0; }
.sec-label { display: flex; align-items: center; gap: var(--s4); border-top: 1px solid var(--line-2); padding-top: 14px; color: var(--muted); }
.sec-label span:first-child { color: var(--orange-lo); }
.sec-label .exl { margin-left: auto; }
.sec-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s6) 64px; align-items: end; margin: 40px 0 var(--s7); }
.sec-head h2 { margin: 0; font: 800 var(--t-h2)/1 var(--f-display); letter-spacing: -.03em; font-variation-settings: "opsz" 96; text-wrap: balance; }
.sec-head > p, .sec-head p:last-child { margin: 0; font: 500 var(--t-lead)/1.5 var(--f-body); color: var(--ink2); max-width: 44ch; }

/* 02: the headline, the stat row, the trades */
#kicker { margin: 0 0 var(--s3); font: 700 var(--t-label)/1.4 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
#kicker b { color: var(--ink); }
#kicker .exl { margin-left: var(--s2); }
#head { overflow-wrap: break-word; }
#head .n { white-space: nowrap; }
#head .up { color: var(--up); } #head .dn { color: var(--down); }
#sub b, #paid b { color: var(--ink); font-weight: 700; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid var(--line); }
.stats:empty { display: none; }
.stat { padding: var(--s5) var(--s5) var(--s5) 0; min-width: 0; }
.stat + .stat { border-left: 1px solid var(--line); padding-left: var(--s5); }
.stat dt { font: 700 var(--t-label)/1.3 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--s2); }
.stat dd { margin: 0; font: 800 var(--t-num)/1.05 var(--f-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.stat dd small { display: block; margin-top: var(--s1); font: 500 var(--t-small)/1.4 var(--f-body); color: var(--muted); letter-spacing: 0; }
.stat dd.up { color: var(--up); } .stat dd.dn { color: var(--down); }
.stat dd.none { font: 700 var(--t-label)/1.3 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding-top: var(--s3); }
#paid { margin: var(--s4) 0 0; font-size: var(--t-body); color: var(--ink2); max-width: 70ch; }
#paid a { color: var(--ink); font-weight: 600; }
#feed { margin-top: var(--s6); }
#feed.off { display: none; }
#feed h3 { margin: 0 0 var(--s2); font: 700 var(--t-label)/1.3 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
#trs { list-style: none; margin: 0; padding: 0; font-size: var(--t-body); color: var(--ink2); font-variant-numeric: tabular-nums; }
#trs li { padding: 10px 0; border-top: 1px solid var(--line); }
#trs li:last-child { border-bottom: 1px solid var(--line); }
#trs li b { font-weight: 700; display: inline-block; min-width: 3.2em; }
#trs .buy { color: var(--up); } #trs .sell { color: var(--down); }
#trs .who { color: var(--muted); }
#trs li.fresh { animation: fresh 1.2s ease-out; }
@keyframes fresh { from { background: rgba(255, 91, 31, .1); } to { background: transparent; } }
#trs .none { color: var(--muted); }

/* 03: the steps as one hairline grid, the worked example */
#steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid var(--line); }
#steps li { padding: 28px 28px 28px 0; min-width: 0; display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-template-areas: "icon num" "title title" "line line"; column-gap: var(--s4); align-items: center; }
#steps li + li { border-left: 1px solid var(--line); padding-left: 28px; }
#steps .vox { grid-area: icon; width: 56px; height: 56px; }
#steps .num { grid-area: num; font: 300 56px/1 var(--f-display); color: var(--orange); justify-self: end; font-variant-numeric: tabular-nums; }
#steps h3 { grid-area: title; margin: var(--s5) 0 var(--s2); font: 700 var(--t-h3)/1.15 var(--f-display); letter-spacing: -.015em; }
#steps p { grid-area: line; margin: 0; color: var(--ink2); }
.exrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s6) 64px; padding: var(--s5) 0; border-bottom: 1px solid var(--line); }
.exrow p { margin: 0; color: var(--ink); }
#example span { color: var(--muted); }

/* 04: the example cards: each number has its own label and its own line */
#rows { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 20px; }
#rows li {
  display: flex; flex-direction: column;
  padding: 20px; border-radius: var(--r-card); cursor: pointer; background: rgba(255, 255, 255, .75); border: 1px solid var(--line); transition: transform .15s, border-color .15s;
}
#rows li:hover { transform: translateY(-2px); border-color: var(--line-2); }
#rows li.sel { background: var(--card); border: 2px solid var(--ink); box-shadow: 0 4px 0 var(--ink); padding: 19px; }
#rows .ctop { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); padding-bottom: var(--s4); margin-bottom: var(--s4); border-bottom: 1px solid var(--line); min-width: 0; }
#rows .mini { flex: none; width: 56px; height: 34px; }
#rows .pr { font: 700 var(--t-card)/1.2 var(--f-display); min-width: 0; }
#rows .pr a { white-space: nowrap; }
#rows .pr span { font: 500 15px var(--f-body); color: var(--muted); }
#rows .pr a { text-decoration: none; }
#rows .pr a:hover { text-decoration: underline; }
/* the two numbers sit side by side, or under each other when the card is narrow: they can never meet */
#rows .cells { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6); }
#rows .cs { margin: 0; min-width: 0; }
#rows .cs dt { font: 700 var(--t-label)/1.3 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--s1); }
#rows .cs dd { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
#rows .cs .p { font: 800 28px/1.1 var(--f-display); letter-spacing: -.02em; }
#rows .cs .p.up { color: var(--up); } #rows .cs .p.dn { color: var(--down); }
#rows .cs .p.nr { font: 700 var(--t-label)/1.3 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding-top: var(--s2); }
#rows .cs .mc { font: 700 20px/1.4 var(--f-display); color: var(--ink); }
#rows .none, #rows .sect { cursor: default; grid-column: 1 / -1; display: block; background: none; border: 0; padding: 0; color: var(--muted); }
#rows .sect { padding-top: var(--s3); font: 700 var(--t-label)/1.3 var(--f-body); letter-spacing: .14em; text-transform: uppercase; }
#rows .sect:hover, #rows .none:hover { transform: none; }
#boardTotal { margin: var(--s5) 0 0; color: var(--ink); max-width: 70ch; }
#boardTotal:empty { display: none; }
#boardFoot { margin: var(--s2) 0 0; }

/* 05: questions, two columns */
.faq-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--s6) 64px; margin-top: 40px; align-items: start; }
.faq-head h2 { margin: 0; font: 800 var(--t-h2)/1 var(--f-display); letter-spacing: -.03em; font-variation-settings: "opsz" 96; }
.faq-head p { margin: var(--s4) 0 0; font: 500 var(--t-lead)/1.5 var(--f-body); color: var(--ink2); max-width: 36ch; }
.faq-list { border-bottom: 1px solid var(--line); }
#faq details { border-top: 1px solid var(--line); padding: 20px 0; }
#faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: var(--s4); font: 700 var(--t-card)/1.3 var(--f-body); color: var(--ink); }
#faq summary::-webkit-details-marker { display: none; }
#faq summary::after { content: ""; flex: none; width: 20px; height: 20px; margin-top: 2px; transition: transform .2s; background: var(--ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 3v14M3 10h14' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 3v14M3 10h14' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat; }
#faq details[open] summary::after { transform: rotate(45deg); }
#faq details p { margin: var(--s3) 0 0; color: var(--ink2); max-width: 60ch; }
#faq a { color: var(--orange-lo); }

/* ---- footer ---- */
#foot { max-width: var(--max); margin: var(--section) auto 0; padding: var(--s8) var(--gut) var(--s7); border-top: 1px solid var(--line); }
#bigMark { display: block; font: 800 clamp(72px, 15vw, 220px)/.9 var(--f-display); letter-spacing: -.04em; font-variation-settings: "opsz" 96; text-decoration: none; color: var(--ink); }
#bigMark::after { content: ""; display: inline-block; width: .2em; height: .2em; margin-left: .04em; border-radius: .03em; background: var(--orange); }
#bigMark:hover::after { animation: dotDrop .45s var(--ease-drop); }
#foot nav { justify-content: flex-start; flex-wrap: wrap; gap: var(--s3); margin: var(--s6) 0 var(--s5); }
.pill { display: inline-flex; align-items: center; gap: var(--s2); height: 40px; padding: 0 var(--s4); border: 1px solid var(--line-2); border-radius: 999px; background: none; cursor: pointer; font: 600 15px/1 var(--f-body); color: var(--ink); text-decoration: none; }
.pill:hover { border-color: var(--ink); color: var(--ink); }
.pill svg { width: 22px; height: 22px; }
.pill.off { cursor: default; color: var(--muted); }
.pill.off:hover { border-color: var(--line-2); }
#foot p { margin: var(--s2) 0 0; max-width: 80ch; font-size: 13px; line-height: 1.5; color: var(--muted); }
#footMode:empty { display: none; }

/* ---- toast: short results only, top right under the header ---- */
#status {
  position: fixed; right: var(--gut); top: calc(var(--head-h) + 8px); z-index: 30; max-width: min(360px, calc(100vw - 32px));
  background: var(--ink); color: #fff; border-radius: var(--r-ctl); padding: var(--s3) 40px var(--s3) var(--s4); font: 600 var(--t-small)/1.45 var(--f-body); box-shadow: var(--pop);
  animation: toastIn .2s ease-out;
}
#status:empty { display: none; }
#status.red { background: #7a1f18; }
#status a { color: #ffd2bf; margin-right: var(--s2); }
#status .x { position: absolute; right: 8px; top: 8px; width: 24px; height: 24px; border: 0; background: none; color: #fff; cursor: pointer; font: 700 16px/1 var(--f-body); opacity: .7; }
#status .x:hover { opacity: 1; }
@keyframes toastIn { from { transform: translateY(-8px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---- sections fade up once (never the hero) ---- */
.sec.fade { opacity: 0; transform: translateY(12px); }
.sec.fade.in { opacity: 1; transform: none; transition: opacity .5s ease-out, transform .5s ease-out; }

/* ---- narrower ---- */
@media (max-width: 1100px) {
  #heroSec { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: var(--s5); padding-top: var(--s5); }
  #left, #stageWrap { max-width: 760px; width: 100%; margin: 0 auto; }
  #stage { height: min(64vw, 520px); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(3) { border-left: 0; padding-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
  .sec-head, .exrow, .faq-grid { grid-template-columns: minmax(0, 1fr); }
  .sec-head { margin: var(--s6) 0 var(--s6); }
}
/* short wide screens (phone landscape, 800x455): two columns, the name field on the first screen */
@media (max-width: 1100px) and (min-width: 600px) and (max-height: 560px) {
  #heroSec { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 20px; }
  #stage { height: calc(100vh - 150px); min-height: 240px; }
  #pitch h1 { font-size: clamp(24px, 3.4vw, 32px); }
  #pitchSub { font-size: var(--t-small); margin-top: var(--s2); }
  #tag { margin-bottom: var(--s2); }
  #left { gap: var(--s4); }
  #picker { padding: 14px 16px; } #picker h2 { font-size: 17px; margin-bottom: 10px; }
  #fName, .orange { height: 46px; } #fName input { font-size: 20px; }
  #caption { display: none; }
}
@media (max-width: 820px) {
  #steps { grid-template-columns: minmax(0, 1fr); }
  #steps li { grid-template-columns: 48px auto minmax(0, 1fr); grid-template-areas: "icon num title" "icon num line"; padding: var(--s5) 0; column-gap: var(--s4); align-items: start; }
  #steps li + li { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; }
  #steps .vox { width: 48px; height: 48px; }
  #steps .num { font-size: 40px; justify-self: start; }
  #steps h3 { margin: var(--s1) 0; }
}
@media (max-width: 560px) {
  :root { --head-h: 64px; --section: 64px; }
  #mark { font-size: 26px; }
  #mode { font-size: 0; padding: 0; border: 0; background: none; letter-spacing: 0; gap: 0; }
  nav { gap: var(--s2); }
  #menuBtn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--line-2); border-radius: 50%; font-size: 0; background: rgba(255, 255, 255, .6); }
  #menuBtn::before { content: ""; width: 20px; height: 20px; background: var(--ink);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3 6h14M3 10h14M3 14h14' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3 6h14M3 10h14M3 14h14' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat; }
  #menuBtn[aria-expanded="true"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 5l10 10M15 5L5 15' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 5l10 10M15 5L5 15' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round'/%3E%3C/svg%3E"); }
  .ink { height: 40px; padding: 0 var(--s3); font-size: var(--t-small); }
  #navMore { display: none; }
  #navMore.open { display: flex; flex-direction: column; align-items: stretch; position: fixed; z-index: 25; left: 0; right: 0; top: var(--head-h); background: var(--page); border-block: 1px solid var(--line); box-shadow: var(--pop); padding: 0 var(--gut); }
  #navMore.open .link { min-height: 52px; text-align: left; font-size: var(--t-body); border-top: 1px solid var(--line); }
  #navMore.open .link:first-child { border-top: 0; }
  #how, #wPop { top: var(--head-h); }
  #stripLabel { padding-left: var(--s4); }
  #heroSec { padding-top: var(--s4); gap: var(--s5); }
  #pitch h1 { font-size: clamp(34px, 9.4vw, 44px); }
  #pitchSub { font-size: var(--t-body); margin-top: var(--s4); }
  #left { gap: var(--s5); }
  #prow { flex-direction: column; gap: 10px; }
  #prow #fName { flex: none; height: 50px; }
  #go { width: 100%; }
  #picker { padding: var(--s4); }
  #stageWrap { margin: 0 calc(var(--gut) * -1); width: auto; max-width: none; }
  #stage { height: 92vw; border-radius: 0; border-inline: 0; }
  #caption { margin: var(--s3) var(--gut) 0; flex-direction: column; gap: var(--s1); }
  #capHint { text-align: left; }
  .stat { padding: var(--s4) var(--s4) var(--s4) 0; }
  .stat + .stat { padding-left: var(--s4); }
  .two { grid-template-columns: 1fr; }
  #launchRow { flex-direction: column; align-items: stretch; gap: 10px; }
  .logo-row { flex-wrap: wrap; }
  .sec-label .exl { display: none; }
}
@media (max-width: 380px) {
  .stats { grid-template-columns: minmax(0, 1fr); }
  .stat + .stat { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); }
}
@media (prefers-reduced-motion: reduce) {
  #stripIn, .drop::after, #caption .live i::after, #status, #mark:hover::after, #bigMark:hover::after { animation: none; }
  #stripWin { overflow-x: auto; }
  #rows li, .sec.fade.in, .arrow::after, #go::after { transition: none; }
  #rows li:hover { transform: none; }
  .sec.fade { opacity: 1; transform: none; }
}