@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/plex-mono-400.3c5a451f9ec2.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/plex-mono-500.756026ff72eb.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/plex-mono-600.c4d3deb734a2.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/plex-mono-700.a51b6594bdda.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Uncluttah v8 tokens. Light + dark approved by Matt on 2026-11-08. */
/* One family: IBM Plex Mono (OFL), self-hosted woff2, weights 400 / 500 / 600 / 700. */
/* Use the semantic tokens (text, border, bar…), not raw colours, so dark mode is a pure token swap. */

:root {
  color-scheme: light dark;

  /* Fixed colours (same in both modes) */
  --color-yellow: #FFD23F;      /* Fivesome yellow: the action. Buttons, selected size, your block, pledge heading */
  --color-on-yellow: #095042;   /* truck green: text, 3px border and 4px hard shadow on yellow (6.5:1) */
  --color-panel: #15171A;       /* banner text panels (part of the board) and the placement toolbar */
  --color-on-panel: #FFFFFF;    /* banner title */
  --color-on-panel-2: #D3D5D9;  /* banner line */
  --color-taken: #C42B3A;       /* "That spot's taken" tag; white text 5.4:1 */
  --color-taken-edge: #7E1622;
  --color-taken-line: #FF6B6B;  /* dashed outline of a blocked ghost */
  --color-timeline-line: #5A5F66;

  /* Semantic, light */
  --color-ground: #FFFFFF;          /* page */
  --color-wash: #F4F4F2;            /* card previews, picture tiles, disabled button */
  --color-rule: #E3E4E6;            /* hairlines between rows */
  --color-text: #15171A;            /* body text and headings */
  --color-text-2: #5A5F66;          /* secondary text (6.4:1) */
  --color-placeholder: #6B7076;     /* input placeholders, disabled button text (4.9:1) */
  --color-border: #15171A;          /* 3px borders: cards, inputs, upload square, legal section rules */
  --color-bar: #15171A;             /* top bar, pledge band, footer */
  --color-bar-rule: transparent;    /* 1px rule under the top bar and around the pledge band (dark only) */
  --color-on-bar: #FFFFFF;
  --color-on-bar-2: #D3D5D9;        /* pledge body */
  --color-on-bar-3: #A6ABB2;        /* pledge timeline text */
  --color-footer-text: #C9CCD1;
  --color-badge: #15171A;           /* step number badges */
  --color-on-badge: #FFFFFF;
  --color-board-frame: #15171A;     /* 3px frame around the board */
  --color-disabled-edge: #C9CCD1;
  --color-ghost-title: #A6ABB2;     /* banner placeholder title inside the ghost */
  --color-ghost-line: #8B9096;

  /* Type */
  --font: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --text-h1: 700 30px/40px var(--font);        /* home headline at >=1040; letter-spacing -0.02em */
  --text-h1-sm: 700 24px/32px var(--font);     /* home headline on phones. Legal/who/done h1 = 36/44 desktop, 28-30/34-36 phone */
  --text-h2: 700 24px/30px var(--font);        /* How it works; legal section h2 = 20/26 (18/24 phone) */
  --text-step: 700 20px/24px var(--font);
  --text-body: 400 17px/27px var(--font);
  --text-ui: 400 16px/24px var(--font);        /* inputs never below 16px (iOS zoom) */
  --text-small: 400 15px/22px var(--font);
  --text-fine: 400 14px/21px var(--font);
  --text-button: 700 22px/26px var(--font);    /* 18/24 on phones */
  --text-count: 600 32px/36px var(--font);     /* "1,700" (24/28 on phones) */
  --text-banner-title: 700 17px/20px var(--font); /* at 8x board scale; 13/16 at 6x */
  --text-banner-line: 400 13px/16px var(--font);  /* 10/13 at 6x */

  /* Space and shape */
  --container: 960px;
  --gutter-phone: 16px;
  --border-width: 3px;
  --shadow-yellow: 4px 4px 0 var(--color-on-yellow);
  --tap: 44px;
  --radius: 0;

  /* Board */
  --board-w: 120;
  --board-h: 100;
  --board-scale: 8;            /* integer only: 8 at >=1040, 6 at >=760, 4 at >=520, 3 below (even scales keep 2x uploads crisp) */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-ground: #101214;
    --color-wash: #1A1D20;
    --color-rule: #2B2F34;
    --color-text: #EEEFEF;
    --color-text-2: #A6ABB2;
    --color-placeholder: #8B9096;
    --color-border: #6D727A;        /* 3.9:1 against ground: meets 1.4.11 */
    --color-bar: #08090A;
    --color-bar-rule: #2B2F34;
    --color-badge: #EEEFEF;
    --color-on-badge: #101214;
    --color-board-frame: #3A3F45;
    --color-disabled-edge: #2B2F34;
  }
}
:root[data-theme="dark"] {
  --color-ground: #101214; --color-wash: #1A1D20; --color-rule: #2B2F34; --color-text: #EEEFEF;
  --color-text-2: #A6ABB2; --color-placeholder: #8B9096; --color-border: #6D727A; --color-bar: #08090A;
  --color-bar-rule: #2B2F34; --color-badge: #EEEFEF; --color-on-badge: #101214; --color-board-frame: #3A3F45;
  --color-disabled-edge: #2B2F34;
}

@media (max-width: 1039px) { :root { --board-scale: 6; } }
@media (max-width: 759px)  { :root { --board-scale: 4; } }
@media (max-width: 519px)  { :root { --board-scale: 3; } }

body { background: var(--color-ground); color: var(--color-text); font: var(--text-ui); }

.board {
  width: calc(var(--board-w) * var(--board-scale) * 1px);
  height: calc(var(--board-h) * var(--board-scale) * 1px);
  image-rendering: pixelated;
  box-shadow: 0 0 0 3px var(--color-board-frame);
}

:focus-visible { outline: 3px solid var(--color-on-yellow); outline-offset: 2px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :focus-visible { outline-color: var(--color-yellow); } }
.on-bar :focus-visible, .board :focus-visible { outline-color: var(--color-yellow); } /* on dark surfaces and the board */
/* Uncluttah v8, to Paula's frames. Every colour is a token from tokens.css (dark mode is a
   pure token swap); the few fixed board colours are tokens too. Board sizes are integer
   multiples only: var(--board-scale) is 8, 6, 4 or 3. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
main { flex: 1 0 auto; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
img { display: block; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 8px; z-index: 100; background: var(--color-ground); padding: 8px 12px; }
.test-mode { margin: 0; padding: 8px 16px; background: var(--color-yellow); color: var(--color-on-yellow); font: 600 14px/21px var(--font); text-align: center; }

.wrap { width: 100%; max-width: calc(var(--container) + 32px); margin: 0 auto; padding: 0 var(--gutter-phone); }
@media (min-width: 760px) and (max-width: 1039px) { .wrap { max-width: calc(720px + 32px); } }
@media (min-width: 760px) { .narrow-only { display: none !important; } }
@media (max-width: 759px) { .wide-only { display: none !important; } }
.br-wide { display: none; }
@media (min-width: 1040px) { .br-wide { display: inline; } }

/* ---------- Bars ---------- */
.on-bar { background: var(--color-bar); color: var(--color-on-bar); }
.topbar { border-bottom: 1px solid var(--color-bar-rule); }
.topbar-in { height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.wordmark { font: 700 28px/32px var(--font); text-decoration: none; letter-spacing: -0.01em; }
.toplink { font: 500 18px/24px var(--font); text-decoration: underline; text-underline-offset: 5px; padding: 10px 0; }
@media (max-width: 759px) {
  .topbar-in { height: 56px; }
  .wordmark { font-size: 24px; line-height: 28px; }
  .toplink { font-size: 16px; }
}
.footer { border-top: 1px solid #2B2F34; color: var(--color-footer-text); }
.footer-in { padding-top: 28px; padding-bottom: 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px 28px; font: 400 14px/21px var(--font); }
.footer nav { display: flex; gap: 24px; flex-shrink: 0; }
@media (min-width: 1040px) { .footer-in { column-gap: 12px; } .footer p { white-space: nowrap; } }
.footer nav a { color: var(--color-on-bar); font: 500 16px/22px var(--font); text-decoration: underline; text-underline-offset: 4px; padding: 11px 0; }
@media (max-width: 1039px) { .footer-in { flex-direction: column; align-items: flex-start; } }
@media (max-width: 759px) { .footer-in { font-size: 15px; line-height: 23px; } }

/* ---------- Home head and board ---------- */
.head { padding-top: 48px; padding-bottom: 28px; }
.h1 { font: var(--text-h1); letter-spacing: -0.02em; }
.count { margin-top: 8px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.count-n { font: var(--text-count); }
.count-l { font: 400 16px/24px var(--font); color: var(--color-text-2); }
@media (max-width: 759px) {
  .head { padding-top: 32px; padding-bottom: 20px; }
  .h1 { font: var(--text-h1-sm); letter-spacing: -0.01em; }
  .count-n { font-size: 24px; line-height: 28px; }
}
.board-row { display: flex; justify-content: center; padding: 3px 0; }
@media (max-width: 519px) { .board-row { justify-content: flex-start; padding-left: 8px; } }
.board-box { position: relative; width: calc(var(--board-w) * var(--board-scale) * 1px); height: calc(var(--board-h) * var(--board-scale) * 1px); flex-shrink: 0; user-select: none; -webkit-user-select: none; }
.board-img { max-width: none; }
.board-box :focus-visible, .board-box:focus-visible { outline-color: var(--color-yellow); }
.tap-hint { margin-top: 14px; font: 400 15px/22px var(--font); color: var(--color-text-2); }

/* Banner words: live HTML over each banner's right two thirds, at 6× and up only. */
.banner-texts { position: absolute; inset: 0; pointer-events: none; }
.banner-text { position: absolute; display: none; flex-direction: column; justify-content: center; gap: 4px; padding-right: 10px; overflow: hidden; color: var(--color-on-panel); text-decoration: none; pointer-events: auto; }
.js .s8 .banner-text, .js .s6 .banner-text { display: flex; }
.bt-title { font: var(--text-banner-title); color: var(--color-on-panel); overflow-wrap: anywhere; }
.bt-line { font: var(--text-banner-line); color: var(--color-on-panel-2); overflow-wrap: anywhere; }
.s6 .banner-text { gap: 2px; padding-right: 7px; }
.s6 .bt-title { font-size: 13px; line-height: 16px; }
.s6 .bt-line { font-size: 10px; line-height: 13px; }
a.banner-text:hover .bt-title { text-decoration: underline; }

/* Hover / tap: an outline and a card. */
.hover-outline { position: absolute; z-index: 4; pointer-events: none; box-shadow: 0 0 0 3px var(--color-panel); }
.block-card { position: absolute; z-index: 6; min-width: 160px; max-width: 280px; padding: 12px 14px; background: var(--color-ground); color: var(--color-text); border: 3px solid var(--color-border); box-shadow: 4px 4px 0 var(--color-border); pointer-events: none; }
.block-card .bc-title { font: 700 22px/26px var(--font); overflow-wrap: anywhere; }
.block-card .bc-line { margin-top: 4px; font: 400 15px/22px var(--font); overflow-wrap: anywhere; }
.block-card .bc-size { margin-top: 6px; font: 500 14px/20px var(--font); color: var(--color-text-2); }
.block-card .bc-size:first-child { margin-top: 0; font: 700 18px/22px var(--font); color: var(--color-text); }

/* ---------- The ghost ---------- */
.ghost { position: absolute; z-index: 5; display: flex; cursor: grab; touch-action: none; outline-offset: 4px; }
.ghost.dragging { cursor: grabbing; }
/* While placing, focus is white: solid yellow means Placed. */
.board-box .ghost:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 3px; }
.board-box .ghost.placed:focus-visible { outline-color: var(--color-yellow); }
.ghost-content { position: absolute; inset: 0; display: flex; }
.ghost-pic { flex-shrink: 0; height: 100%; aspect-ratio: 1; image-rendering: pixelated; background-color: var(--color-wash); background-image: conic-gradient(var(--color-rule) 25%, transparent 0 50%, var(--color-rule) 0 75%, transparent 0); background-size: 16px 16px; }
.ghost-pic img, .ghost-pic canvas { width: 100%; height: 100%; image-rendering: pixelated; }
.ghost-panel { flex: 1; min-width: 0; background: var(--color-panel); display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 0 10px; overflow: hidden; }
.ghost-title { font: var(--text-banner-title); color: var(--color-on-panel); overflow-wrap: anywhere; }
.ghost-line { font: var(--text-banner-line); color: var(--color-on-panel-2); overflow-wrap: anywhere; }
.ghost-title.empty { color: var(--color-ghost-title); }
.ghost-line.empty { color: var(--color-ghost-line); }
.s6 .ghost-panel { gap: 2px; padding: 0 7px; }
.s6 .ghost-title { font-size: 13px; line-height: 16px; }
.s6 .ghost-line { font-size: 10px; line-height: 13px; }
.s4 .ghost-panel > *, .s3 .ghost-panel > * { display: none; }
.ghost-outline { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.ghost.blocked .ghost-content { opacity: 0.45; }
.ghost.blocked::after { content: ""; position: absolute; inset: 0; background: rgba(196, 43, 58, 0.30); pointer-events: none; }
.ghost-tag { position: absolute; z-index: 6; display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px; background: var(--color-yellow); color: var(--color-on-yellow); border: 3px solid var(--color-on-yellow); white-space: nowrap; pointer-events: none; }
.ghost-tag b { font: 700 15px/20px var(--font); }
.ghost-tag span { font: 500 15px/20px var(--font); }
.ghost-tag.blocked { background: var(--color-taken); color: #FFFFFF; border-color: var(--color-taken-edge); }

.toolbar { position: absolute; z-index: 7; display: flex; align-items: center; gap: 4px; padding: 4px; background: var(--color-panel); box-shadow: 4px 4px 0 rgba(21, 23, 26, 0.35); white-space: nowrap; }
.toolbar button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; min-width: 44px; padding: 0; border: 0; background: transparent; color: var(--color-on-panel); font: 600 15px/20px var(--font); }
.toolbar .tb-handle { background: #2A2D31; padding: 0 12px 0 10px; cursor: grab; touch-action: none; }
.toolbar .tb-place { background: var(--color-yellow); color: var(--color-on-yellow); padding: 0 14px; font-weight: 700; }
.toolbar .tb-place:disabled { background: #3A3D42; color: #A3A8AE; cursor: not-allowed; }
.toolbar .tb-text { padding: 0 14px; }
.toolbar :focus-visible { outline: 3px solid var(--color-yellow); outline-offset: -3px; }
.px-icon { flex-shrink: 0; }
.i-up { transform: rotate(90deg); }
.i-right { transform: rotate(180deg); }
.i-down { transform: rotate(270deg); }

/* ---------- Under the board ---------- */
.how { margin-top: 56px; }
.how h2 { font: var(--text-h2); }
.how p { margin-top: 12px; font: var(--text-body); max-width: 880px; }
.step { margin-top: 56px; }
.step-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.badge { flex-shrink: 0; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; background: var(--color-badge); color: var(--color-on-badge); font: 500 16px/20px var(--font); }
.step-head h2 { font: var(--text-step); }
.step-head .aside { margin-left: auto; font: var(--text-small); color: var(--color-text-2); }
.step-body { font: 400 16px/24px var(--font); max-width: 880px; }
@media (max-width: 759px) {
  .how { margin-top: 40px; }
  .how h2 { font-size: 22px; line-height: 28px; }
  .how p { font: 400 16px/26px var(--font); }
  .step { margin-top: 40px; }
}

/* Size cards: a radio group. */
.sizes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.size-card { position: relative; display: flex; flex-direction: column; background: var(--color-ground); border: 3px solid var(--color-border); cursor: pointer; }
.size-preview { height: 150px; display: flex; align-items: center; justify-content: center; background: var(--color-wash); border-bottom: 3px solid var(--color-border); }
.ex { image-rendering: pixelated; }
.ex-small { width: 30px; height: 30px; }
.ex-medium { width: 60px; height: 60px; }
.ex-large { width: 120px; height: 120px; }
.ex-banner { display: flex; width: 180px; height: 60px; }
.ex-banner-pic { width: 60px; height: 60px; }
.ex-panel { width: 120px; height: 60px; background: var(--color-panel); display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 0 7px; }
.ex-title { font: 700 13px/16px var(--font); color: var(--color-on-panel); white-space: pre; }
.ex-line { font: 400 10px/13px var(--font); color: var(--color-on-panel-2); }
.size-text { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; }
.size-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.size-name { font: 700 19px/24px var(--font); }
.size-price { font: 600 19px/24px var(--font); }
.size-sub { font: 400 14px/20px var(--font); color: var(--color-text-2); }
.size-card:has(input:checked) { background: var(--color-yellow); border-color: var(--color-on-yellow); color: var(--color-on-yellow); box-shadow: var(--shadow-yellow); }
.size-card:has(input:checked) .size-preview { border-bottom-color: var(--color-on-yellow); }
.size-card:has(input:checked) .size-sub { color: var(--color-on-yellow); }
.size-card:has(input:focus-visible) { outline: 3px solid var(--color-on-yellow); outline-offset: 4px; }
.size-card.no-room { cursor: not-allowed; box-shadow: none; background: var(--color-ground); border-color: var(--color-disabled-edge); color: var(--color-text-2); }
.size-card.no-room .size-preview { border-color: var(--color-disabled-edge); }
.size-card.no-room .ex { opacity: 0.35; }
.gone { margin-top: 56px; }
.gone h2 { font: var(--text-h2); }
.gone .text-link { display: inline-block; margin-top: 8px; }
.note { margin-top: 14px; font: 400 15px/24px var(--font); color: var(--color-text-2); }
@media (max-width: 759px) {
  .sizes { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .size-preview { height: 96px; }
  .ex-small { width: 20px; height: 20px; }
  .ex-medium { width: 40px; height: 40px; }
  .ex-large { width: 80px; height: 80px; }
  .size-text { padding: 10px 10px 12px; gap: 2px; }
  .size-row { flex-direction: column; align-items: flex-start; gap: 0; }
  .size-name, .size-price { font-size: 16px; line-height: 22px; }
  .size-card:not(.size-banner) .size-sub { display: none; }
  .size-banner { grid-column: 1 / -1; flex-direction: row; }
  .size-banner .size-preview { width: 62%; border-bottom: 0; border-right: 3px solid var(--color-border); padding: 12px; }
  .size-banner:has(input:checked) .size-preview { border-right-color: var(--color-on-yellow); }
  .size-banner .size-text { justify-content: center; padding: 10px 12px; }
}
@media (max-width: 374px) { .ex-banner { transform: scale(0.85); } }

.button-yellow { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: var(--color-yellow); color: var(--color-on-yellow); border: 3px solid var(--color-on-yellow); box-shadow: var(--shadow-yellow); text-decoration: none; }
.button-yellow:focus-visible { outline-color: var(--color-yellow); outline-offset: 4px; }
.button-line { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: var(--color-ground); color: var(--color-text); border: 3px solid var(--color-border); text-decoration: none; }
.cta { width: 100%; height: 56px; margin-top: 20px; font: 700 18px/24px var(--font); }

/* ---------- Step 2 and the phone place view ---------- */
.sheet-bar, .phone-place { display: none; }
@media (max-width: 759px) {
  .place { display: none; }
  .sheet-open .place { display: block; position: fixed; inset: 0; z-index: 50; overflow-y: auto; background: var(--color-ground); padding-bottom: 48px; overscroll-behavior: contain; }
  .sheet-open { overflow: hidden; }
  .sheet-bar { display: flex; position: sticky; top: 0; z-index: 2; align-items: center; gap: 28px; height: 56px; padding: 0 16px; border-bottom: 1px solid var(--color-bar-rule); }
  .sheet-back { border: 0; background: none; color: var(--color-on-bar); font: 500 16px/24px var(--font); text-decoration: underline; text-underline-offset: 3px; padding: 10px 0; }
  .sheet-title { font: 700 20px/26px var(--font); }
  .place .step-2 { margin-top: 24px; }
  .phone-place { display: block; }
  .viewport { position: relative; width: 360px; height: 300px; max-width: calc(100vw - 15px); margin-left: -8px; overflow: hidden; touch-action: none; --board-scale: 6; box-shadow: 0 0 0 3px var(--color-board-frame); background: var(--color-panel); }
  .viewport.zoomed-out { --board-scale: 3; }
  .viewport .board-box { position: absolute; left: 0; top: 0; }
  .viewport .board { box-shadow: none; }
  .phone-controls { margin-top: 16px; display: flex; align-items: center; gap: 8px; }
  .phone-arrows { display: flex; gap: 8px; }
  .phone-arrows .arrow { width: 56px; height: 52px; padding: 0; color: var(--color-text); }
  .zoom { margin-left: auto; border: 0; background: none; font: 500 16px/24px var(--font); text-decoration: underline; text-underline-offset: 3px; padding: 10px 0; color: var(--color-text); }
  .phone-hint { margin-top: 14px; font: 400 15px/22px var(--font); color: var(--color-text-2); }
  .phone-place-btn { width: 100%; height: 52px; margin-top: 16px; font: 700 18px/24px var(--font); }
  .phone-place-btn:disabled { background: var(--color-wash); color: var(--color-placeholder); border-color: var(--color-disabled-edge); box-shadow: none; }
  .phone-placed { display: flex; gap: 8px; margin-top: 16px; }
  .phone-placed .button-line { flex: 1; height: 52px; font: 700 16px/22px var(--font); }
  .place .step-3 { margin-top: 32px; }
}
@media (max-width: 374px) { .phone-arrows .arrow { width: 48px; } }

/* ---------- Step 3 ---------- */
.make { display: grid; grid-template-columns: 200px 1fr; gap: 28px; align-items: start; }
.upload-square { display: block; width: 200px; height: 200px; border: 3px solid var(--color-border); background: var(--color-wash); cursor: pointer; overflow: hidden; }
.upload-img { width: 100%; height: 100%; image-rendering: pixelated; }
.upload-empty { display: block; width: 100%; height: 100%; background-image: conic-gradient(var(--color-rule) 25%, transparent 0 50%, var(--color-rule) 0 75%, transparent 0); background-size: 20px 20px; }
.hint { font: 400 14px/21px var(--font); color: var(--color-text-2); }
.upload-text .hint { margin-top: 10px; }
.change { display: inline-block; margin-top: 8px; padding: 4px 0; font: 700 15px/22px var(--font); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.upload:has(#picture:focus-visible) .upload-square { outline: 3px solid var(--color-on-yellow); outline-offset: 2px; }
.fields { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.banner-fields { display: flex; flex-direction: column; gap: 18px; }
.field-row { display: grid; grid-template-columns: 300px 1fr; gap: 12px; }
.field label { display: block; margin-bottom: 8px; font: 700 16px/22px var(--font); }
.optional { font-weight: 400; color: var(--color-text-2); }
.input-wrap { position: relative; }
.input-wrap input { display: block; width: 100%; height: 52px; padding: 0 12px; border: 3px solid var(--color-border); border-radius: 0; background: var(--color-ground); color: var(--color-text); font: var(--text-ui); appearance: none; }
.input-wrap.has-counter input { padding-right: 64px; }
.input-wrap input::placeholder { color: var(--color-placeholder); opacity: 1; }
.counter { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font: 500 14px/20px var(--font); color: var(--color-text-2); pointer-events: none; }
.field-x_handle .input-wrap { width: 300px; max-width: 100%; }
.fields-hint { margin-top: -4px; }
.form-error { margin-top: 24px; padding: 10px 14px; border-left: 6px solid var(--color-taken); background: var(--color-wash); font: 600 16px/24px var(--font); }
.pay-row { margin-top: 28px; display: flex; align-items: center; gap: 28px; }
.pay { flex-shrink: 0; width: 320px; height: 60px; font: var(--text-button); background: var(--color-yellow); color: var(--color-on-yellow); border: 3px solid var(--color-on-yellow); box-shadow: var(--shadow-yellow); }
.pay:disabled { background: var(--color-wash); color: var(--color-placeholder); border-color: var(--color-disabled-edge); box-shadow: none; cursor: not-allowed; }
.pay:focus-visible { outline-color: var(--color-yellow); outline-offset: 4px; }
.pay-note { font: 400 14px/21px var(--font); color: var(--color-text-2); max-width: 616px; }
@media (max-width: 759px) {
  .make { grid-template-columns: 1fr; gap: 20px; }
  .upload { display: flex; gap: 16px; align-items: flex-start; }
  .upload-square { width: 80px; height: 80px; flex-shrink: 0; }
  .upload-text .hint { margin-top: 0; font-size: 15px; line-height: 22px; }
  .field-row { grid-template-columns: 1fr; gap: 18px; }
  .field-x_handle .input-wrap { width: 100%; }
  .pay-row { flex-direction: column; align-items: stretch; gap: 16px; }
  .pay { width: 100%; height: 56px; font-size: 18px; line-height: 24px; }
  .pay-note { font-size: 15px; line-height: 23px; }
}

/* ---------- Pledge band ---------- */
.pledge { margin-top: 72px; padding: 72px 0 80px; border-top: 1px solid var(--color-bar-rule); border-bottom: 1px solid var(--color-bar-rule); }
.pledge h2 { font: 700 32px/40px var(--font); color: var(--color-yellow); }
.pledge-body { margin-top: 16px; font: var(--text-body); color: var(--color-on-bar-2); max-width: 720px; }
.timeline { position: relative; margin-top: 40px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.timeline::before { content: ""; position: absolute; top: 7px; left: 8px; width: calc((100% - 96px) * 3 / 4 + 96px - 8px); border-top: 2px dashed var(--color-timeline-line); }
.timeline li { position: relative; padding-top: 32px; }
.marker { position: absolute; top: 0; left: 0; width: 16px; height: 16px; background: var(--color-yellow); }
.timeline .last .marker { background: var(--color-bar); border: 3px solid var(--color-yellow); }
.timeline h3 { font: 700 17px/22px var(--font); color: var(--color-on-bar); }
.timeline .last h3 { color: var(--color-yellow); }
.timeline p { margin-top: 8px; font: var(--text-small); color: var(--color-on-bar-3); }
@media (max-width: 759px) {
  .pledge { margin-top: 56px; padding: 48px 0 56px; }
  .pledge h2 { font-size: 26px; line-height: 34px; }
  .pledge-body { font: 400 16px/26px var(--font); }
  .timeline { grid-template-columns: 1fr; gap: 24px; margin-top: 32px; }
  .timeline::before { display: none; }
  .timeline li { padding-top: 0; padding-left: 36px; }
  .timeline li:not(.last)::after { content: ""; position: absolute; left: 7px; top: 20px; bottom: -24px; border-left: 2px dashed var(--color-timeline-line); }
  .marker { top: 3px; }
  .timeline p { margin-top: 4px; }
}

/* ---------- Who's on it (home) ---------- */
.who { padding-top: 72px; padding-bottom: 72px; }
.who-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 16px; border-bottom: 3px solid var(--color-border); }
.who-head h2 { font: 700 32px/36px var(--font); }
.who-head a { font: 500 18px/24px var(--font); padding: 10px 0; }
.who-row { display: flex; align-items: center; gap: 16px; min-height: 72px; padding: 12px 0; border-bottom: 1px solid var(--color-rule); }
.thumb { width: 48px; height: 48px; flex-shrink: 0; image-rendering: pixelated; }
.thumbs { display: flex; gap: 6px; flex-shrink: 0; }
.who-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.who-title { font: 700 18px/22px var(--font); }
.who-sub { font: 400 16px/20px var(--font); color: var(--color-text-2); overflow-wrap: anywhere; }
.who-size { width: 110px; flex-shrink: 0; text-align: right; font: 500 16px/16px var(--font); }
@media (max-width: 759px) {
  .who { padding-top: 48px; padding-bottom: 48px; }
  .who-head h2 { font-size: 26px; line-height: 32px; }
}

/* ---------- Pages: legal, who's on it, done ---------- */
.page { padding-top: 64px; padding-bottom: 96px; }
.back { display: inline-block; font: 500 15px/22px var(--font); text-decoration: underline; padding: 6px 0; }
.page-h1 { margin-top: 28px; font: 700 36px/44px var(--font); letter-spacing: -0.01em; }
.updated { margin-top: 10px; font: 400 14px/21px var(--font); color: var(--color-text-2); }
.legal { max-width: calc(var(--container) + 32px); }
.legal > * { max-width: 680px; }
.legal .intro { margin-top: 28px; font: 400 16px/26px var(--font); }
.legal h2 { margin-top: 40px; font: 700 20px/26px var(--font); }
.legal h2 + p { margin-top: 10px; }
.legal p { font: 400 16px/26px var(--font); }
.legal p + p { margin-top: 10px; }
.callout { margin-top: 40px; padding: 24px 26px; background: var(--color-yellow); color: var(--color-on-yellow); border: 3px solid var(--color-on-yellow); box-shadow: var(--shadow-yellow); }
.legal .callout h2 { margin-top: 0; }
.callout p { margin-top: 10px; }
.legal .callout + h2 { margin-top: 44px; }
.priv { margin-top: 36px; border-top: 3px solid var(--color-border); }
.priv-row { display: grid; grid-template-columns: 180px 1fr; gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--color-rule); }
.priv dt { font: 700 16px/26px var(--font); }
.priv dd { font: 400 16px/26px var(--font); }
@media (max-width: 759px) {
  .page { padding-top: 40px; padding-bottom: 64px; }
  .page-h1 { margin-top: 20px; font-size: 30px; line-height: 36px; }
  .legal h2 { margin-top: 32px; font-size: 18px; line-height: 24px; }
  .legal p, .legal .intro, .priv dd, .priv dt { font-size: 15px; line-height: 24px; }
  .priv-row { grid-template-columns: 1fr; gap: 6px; padding: 18px 0; }
}

.meta { margin-top: 12px; font: 400 15px/22px var(--font); color: var(--color-text-2); }
.page-who .intro { margin-top: 28px; font: 400 17px/26px var(--font); max-width: 640px; }
.list-sec { margin-top: 56px; }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 3px solid var(--color-border); }
.sec-head h2 { font: 700 22px/28px var(--font); }
.sec-head .aside { font: 400 15px/22px var(--font); color: var(--color-text-2); }
.banner-list { margin-top: 20px; display: grid; grid-template-columns: repeat(3, 240px); justify-content: space-between; row-gap: 32px; }
.banner-big { display: flex; width: 240px; height: 80px; }
.banner-pic { width: 80px; height: 80px; image-rendering: pixelated; flex-shrink: 0; }
.banner-panel { width: 160px; height: 80px; padding: 0 10px; background: var(--color-panel); display: flex; flex-direction: column; justify-content: center; gap: 4px; overflow: hidden; }
.banner-meta { margin-top: 12px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.domain { font: 500 15px/22px var(--font); text-decoration: underline; padding: 6px 0; overflow-wrap: anywhere; }
.no-link { font: 400 16px/22px var(--font); color: var(--color-text-2); padding: 6px 0; }
.date { font: 400 15px/22px var(--font); color: var(--color-text-2); white-space: nowrap; }
.pic-list { margin-top: 20px; display: grid; grid-template-columns: repeat(6, 140px); justify-content: space-between; row-gap: 20px; }
.tile { width: 140px; height: 140px; display: flex; align-items: center; justify-content: center; background: var(--color-wash); }
.pic { image-rendering: pixelated; }
.pic-small { width: 30px; height: 30px; }
.pic-medium { width: 60px; height: 60px; }
.pic-large { width: 120px; height: 120px; }
.tile-meta { margin-top: 8px; display: flex; justify-content: space-between; gap: 8px; }
.tile-size { font: 700 15px/22px var(--font); }
.show-more { margin-top: 20px; border: 0; background: none; padding: 10px 0; font: 500 16px/22px var(--font); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 760px) and (max-width: 1039px) {
  .banner-list { grid-template-columns: repeat(2, 240px); justify-content: start; column-gap: 120px; }
  .pic-list { grid-template-columns: repeat(4, 140px); }
}
@media (max-width: 759px) {
  .banner-list { grid-template-columns: 240px; row-gap: 24px; }
  .pic-list { grid-template-columns: repeat(3, 103px); }
  .tile { width: 103px; height: 103px; }
  .pic-small { width: 20px; height: 20px; }
  .pic-medium { width: 40px; height: 40px; }
  .pic-large { width: 80px; height: 80px; }
  .tile-meta { justify-content: flex-start; gap: 0; white-space: pre; }
  .tile-size { font-weight: 400; font-size: 14px; }
  .tile-meta .date { font-size: 14px; color: var(--color-text); }
  .pic-list:not(.all) .pic-item.more { display: none; }
}

/* /done */
.done .lead { margin-top: 16px; font: var(--text-body); max-width: 760px; }
.paid { display: flex; align-items: center; gap: 12px; font: 600 16px/22px var(--font); color: var(--paid-text, var(--color-on-yellow)); }
.paid-badge { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; background: var(--color-yellow); border: 3px solid var(--color-on-yellow); color: var(--color-on-yellow); }
.done .paid + .page-h1 { margin-top: 16px; }
.done-board { position: relative; margin-top: 32px; width: calc(var(--board-w) * var(--board-scale) * 1px); height: calc(60 * var(--board-scale) * 1px); box-shadow: 0 0 0 3px var(--color-board-frame); }
.done-crop { position: absolute; inset: 0; overflow: hidden; }
.done-img { position: absolute; left: 0; top: 0; box-shadow: none; }
.done-crop .banner-texts { z-index: 1; }
.done-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 96px; background: linear-gradient(to bottom, transparent, var(--color-ground)); pointer-events: none; }
.you-outline { position: absolute; z-index: 2; box-shadow: 0 0 0 3px var(--color-yellow); pointer-events: none; }
.you-tag { position: absolute; z-index: 3; display: flex; align-items: center; height: 34px; padding: 0 10px; background: var(--color-yellow); color: var(--color-on-yellow); border: 3px solid var(--color-on-yellow); font: 700 15px/20px var(--font); white-space: nowrap; }
.done-lower { margin-top: 36px; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "actions see" "receipt receipt" "fine fine"; align-items: center; column-gap: 24px; }
.done-actions { grid-area: actions; display: flex; gap: 16px; }
.done-actions .btn { height: 60px; padding: 0 32px; font: 700 20px/26px var(--font); }
.see-it { grid-area: see; justify-self: start; }
.text-link { font: 500 17px/24px var(--font); text-decoration: underline; padding: 10px 0; }
.receipt { grid-area: receipt; margin-top: 28px; max-width: 680px; border-top: 3px solid var(--color-border); }
.receipt-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--color-rule); }
.receipt dt { font: 700 16px/24px var(--font); white-space: nowrap; }
.receipt dd { font: 400 16px/24px var(--font); text-align: right; }
.done .fine { grid-area: fine; margin-top: 28px; max-width: 680px; font: 400 14px/21px var(--font); color: var(--color-text-2); }
.done-refunded .done-actions, .done-wait .fine { margin-top: 28px; }
.done-refunded .done-actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.five { margin-top: 24px; display: flex; gap: 6px; }
.five span { width: 20px; height: 20px; border: 3px solid var(--color-rule); }
.five .on { background: var(--color-on-yellow); border-color: var(--color-on-yellow); }
.five .now { background: var(--color-yellow); border-color: var(--color-on-yellow); }
.done-wait .fine { font: 400 14px/21px var(--font); color: var(--color-text-2); }
.done-wait .fine a { color: var(--color-text); }
@media (max-width: 759px) {
  .done .paid { font-size: 15px; }
  .done .paid + .page-h1 { font-size: 28px; line-height: 34px; }
  .done .lead { font: 400 15px/23px var(--font); }
  .done-board { height: calc(var(--board-h) * var(--board-scale) * 1px); margin-left: -8px; }
  .done-fade { display: none; }
  .done-lower { grid-template-columns: 1fr; grid-template-areas: "actions" "receipt" "see" "fine"; }
  .done-actions { flex-direction: column; gap: 16px; }
  .done-actions .btn { width: 100%; height: 56px; font-size: 18px; }
  .see-it { margin-top: 20px; }
  .receipt dd { font-size: 15px; }
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paid-text: var(--color-yellow); } }
:root[data-theme="dark"] { --paid-text: var(--color-yellow); }

/* ---------- Admin ---------- */
.admin { padding-top: 32px; padding-bottom: 64px; font: 400 15px/22px var(--font); }
.admin-nav a { text-decoration: underline; }
.admin-token { margin-top: 16px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.admin-token input, .admin-token button, .admin button { height: 40px; padding: 0 10px; border: 2px solid var(--color-border); background: var(--color-ground); color: var(--color-text); }
.admin-status { margin-top: 12px; color: var(--color-text-2); }
.admin-item { display: grid; grid-template-columns: 160px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--color-rule); }
.admin-item img { width: 160px; image-rendering: pixelated; border: 1px solid var(--color-rule); }
.admin-item pre { white-space: pre-wrap; font: inherit; margin: 6px 0; }
.admin-item .removed { opacity: 0.5; }