/* Keepers · Counter Copy. Brand rules: docs/brand/brand-brief.md
   The only round thing on the page is the orange sticker. Radius ≤ 2px everywhere else. */

@font-face { font-family: "Sofia Sans Extra Condensed"; font-weight: 800; font-display: swap; src: url(fonts/sofia-sans-extra-condensed-latin-800-normal.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: "Sofia Sans Extra Condensed"; font-weight: 800; font-display: swap; src: url(fonts/sofia-sans-extra-condensed-latin-ext-800-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Sofia Sans Extra Condensed"; font-weight: 900; font-display: swap; src: url(fonts/sofia-sans-extra-condensed-latin-900-normal.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: "Sofia Sans Extra Condensed"; font-weight: 900; font-display: swap; src: url(fonts/sofia-sans-extra-condensed-latin-ext-900-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Sofia Sans"; font-weight: 400; font-display: swap; src: url(fonts/sofia-sans-latin-400-normal.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: "Sofia Sans"; font-weight: 400; font-display: swap; src: url(fonts/sofia-sans-latin-ext-400-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Sofia Sans"; font-weight: 400; font-style: italic; font-display: swap; src: url(fonts/sofia-sans-latin-400-italic.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: "Sofia Sans"; font-weight: 400; font-style: italic; font-display: swap; src: url(fonts/sofia-sans-latin-ext-400-italic.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Sofia Sans"; font-weight: 700; font-display: swap; src: url(fonts/sofia-sans-latin-700-normal.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: "Sofia Sans"; font-weight: 700; font-display: swap; src: url(fonts/sofia-sans-latin-ext-700-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Fragment Mono"; font-weight: 400; font-display: swap; src: url(fonts/fragment-mono-latin-400-normal.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: "Fragment Mono"; font-weight: 400; font-display: swap; src: url(fonts/fragment-mono-latin-ext-400-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --paper: #F1ECE2;
  --card: #E4DCCC;
  --ink: #171512;
  --pencil: #5C554B;
  --sticker: #EC4A14;
  --biro: #2438A8;
  --tint: #F7D9CC;
  --display: "Sofia Sans Extra Condensed", "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
  --text: "Sofia Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Fragment Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --gutter: 20px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 18px/1.5 var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--biro); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
a:hover { color: var(--ink); }
:focus-visible { outline: 3px solid var(--biro); outline-offset: 3px; }
b, strong { font-weight: 700; }
.nowrap { white-space: nowrap; }

.skip { position: absolute; left: -9999px; top: 8px; background: var(--ink); color: var(--paper); padding: 10px 14px; z-index: 200; }
.skip:focus { left: 8px; }

/* ---------- Type ---------- */

.display {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  line-height: 0.88; letter-spacing: 0.01em; margin: 0;
  font-size: clamp(64px, 17vw, 168px);
}
.display.sm { font-size: clamp(44px, 11vw, 84px); line-height: 0.9; }
.display.xs { font-size: clamp(36px, 9vw, 56px); line-height: 0.92; }

.cat, .label, .slip-head, .lbl, .side, .dur, .tag, .rows .n, .rows .m, .micro, figcaption, .stub-text {
  font-family: var(--mono); font-weight: 400;
}

/* ---------- Frame ---------- */

.masthead, main, .foot { max-width: 1200px; margin: 0 auto; padding-inline: var(--gutter); }

.masthead { display: flex; align-items: center; justify-content: space-between; padding-top: 18px; padding-bottom: 18px; }
.wordmark {
  font-family: var(--display); font-weight: 900; font-size: 34px; line-height: 1; letter-spacing: 0.01em;
  color: var(--ink); text-decoration: none; padding-top: 4px;
}
.wm-s { position: relative; }
.wm-dot {
  position: absolute; right: -0.3em; top: -0.2em; width: 0.62em; height: 0.62em; mix-blend-mode: multiply;
  border-radius: 50%; background: var(--sticker); transform: rotate(-8deg);
}
.cat { font-size: 12px; letter-spacing: 0.06em; }

section { padding: 44px 0 64px; }

/* ---------- Hero ---------- */

.hero { padding-top: 20px; }
.eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 22px; }
.hero-grid { display: grid; gap: 44px; }
.hero-copy { position: relative; }
.hero h1 { max-width: 9ch; }
.ringed { position: relative; display: inline-block; }
.hero-quote { margin: 18px 0 0; font-family: var(--mono); font-size: 13px; line-height: 1.5; max-width: 34em; }
.hero-quote p { margin: 0; }
.hero-quote footer { color: var(--pencil); margin-top: 2px; }
.lede { font-size: 18px; line-height: 1.5; max-width: 34em; margin: 24px 0 28px; }
.micro { font-size: 13px; color: var(--pencil); margin: 14px 0 0; max-width: 40em; }

.biro { position: absolute; pointer-events: none; overflow: visible; }
.biro path { fill: none; stroke: var(--biro); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* ---------- Sticker: the only round thing ---------- */

.sticker {
  display: inline-grid; place-items: center; text-align: center; border-radius: 50%;
  background: var(--sticker); color: var(--ink);
  font-family: var(--display); font-weight: 900; text-transform: uppercase; line-height: 0.9; letter-spacing: 0.02em;
  box-shadow: 0 1px 0 rgba(23, 21, 18, 0.18);
}
.sticker-hero {
  position: absolute; right: 0; top: -6px; width: 104px; height: 104px; font-size: 24px;
  transform: rotate(-9deg);
}

/* ---------- Buttons ---------- */

.btn {
  display: block; width: 100%; min-height: 56px; padding: 16px 22px;
  background: var(--ink); color: var(--paper); border: 2px solid var(--ink); border-radius: 2px;
  font: 700 19px/1.2 var(--text); text-align: center; text-decoration: none; cursor: pointer;
  transition: background-color 90ms ease-out, color 90ms ease-out;
}
.btn:hover { background: var(--paper); color: var(--ink); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: 0.6; cursor: progress; transform: none; }
.btn.small { display: inline-block; width: auto; min-height: 44px; padding: 10px 18px; font-size: 16px; }
.btn.ghost { background: transparent; color: var(--ink); }

/* ---------- Slips ---------- */

.slip {
  background: var(--card); border-radius: 2px; position: relative;
  padding: 20px 18px 22px;
}
.slip-head {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-size: 12px; letter-spacing: 0.06em; padding-bottom: 10px; margin-bottom: 14px; border-bottom: 1.5px dashed var(--ink);
}

.hold { transform: rotate(1.2deg); align-self: start; max-width: 520px; }
.slip-name { margin: 0 0 12px; font-size: 15px; color: var(--pencil); }
.slip-name b { color: var(--ink); font-family: var(--display); font-weight: 900; font-size: 22px; text-transform: uppercase; letter-spacing: 0.02em; }

.rows { list-style: none; margin: 0; padding: 0; }
.rows li {
  display: grid; grid-template-columns: 26px 1fr auto; column-gap: 10px; row-gap: 2px; align-items: baseline;
  padding: 10px 0; border-bottom: 1px solid rgba(23, 21, 18, 0.16); position: relative; font-size: 16px;
}
.rows li:last-child { border-bottom: 0; }
.rows .n { font-size: 13px; color: var(--pencil); }
.rows .t b { font-weight: 700; }
.rows .m { grid-column: 2 / 3; font-size: 12px; color: var(--pencil); }
.rows .note { color: var(--biro); font-family: var(--text); font-style: italic; font-size: 14px; }
.rows .owned .t { color: var(--pencil); }
.rows .owned s { text-decoration-thickness: 2px; text-decoration-color: var(--ink); }
.kept {
  grid-column: 3; grid-row: 1 / span 2; align-self: center;
  display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: var(--sticker); color: var(--ink);
  font: 900 15px/1 var(--display); text-transform: uppercase; letter-spacing: 0.03em; transform: rotate(-10deg);
}
.rows li:nth-child(5) .kept { transform: rotate(7deg); }
figcaption { margin-top: 12px; font-size: 12px; color: var(--pencil); }

/* ---------- Sections ---------- */

.sec-grid { display: grid; gap: 28px; }

.tracklist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.tracklist li {
  display: grid; grid-template-columns: 40px 1fr; gap: 6px 14px;
  padding: 20px 0; border-bottom: 1px solid var(--ink);
}
.tracklist .side { font-size: 14px; padding-top: 4px; }
.tracklist h3 { margin: 0 0 6px; font-size: 22px; line-height: 1.2; }
.tracklist p { margin: 0; color: #2c2925; max-width: 36em; }
.tracklist .dur { grid-column: 2; font-size: 13px; color: var(--pencil); }

.yesno { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.yesno li {
  display: grid; grid-template-columns: 92px 1fr; gap: 14px; align-items: baseline;
  padding: 14px 0; border-bottom: 1px solid rgba(23, 21, 18, 0.25);
}
.tag { font-size: 13px; letter-spacing: 0.06em; }
.tag.yes { color: var(--ink); }
.tag.no { color: var(--pencil); }

/* ---------- Form ---------- */

.apply h2 { margin-bottom: 20px; }
.next { list-style: none; margin: 0 0 28px; padding: 0; font-family: var(--mono); font-size: 13px; line-height: 1.5; }
.next li { display: grid; grid-template-columns: 64px 1fr; padding: 8px 0; border-bottom: 1px dashed rgba(23, 21, 18, 0.35); }
.next li:first-child { border-top: 1px dashed rgba(23, 21, 18, 0.35); }
.next span { color: var(--pencil); }
.form-slip { max-width: 760px; padding: 24px 18px 28px; }
.form-slip form { display: block; }

.fields { display: grid; gap: 18px; margin-bottom: 26px; }
.field { display: block; margin-bottom: 22px; }
.fields .field { margin-bottom: 0; }
.lbl { display: block; font-size: 12px; letter-spacing: 0.07em; text-transform: uppercase; margin-bottom: 8px; color: var(--ink); }
.opt-note { text-transform: none; letter-spacing: 0; color: var(--pencil); margin-left: 6px; }
.help { display: block; font-size: 14px; color: var(--pencil); margin: 6px 0 0; }
fieldset > .help { margin: -2px 0 10px; }

input[type="email"], input[type="text"], input[type="number"], textarea {
  display: block; width: 100%; min-height: 50px; margin: 0;
  background: var(--paper); color: var(--ink); border: 2px solid var(--ink); border-radius: 2px;
  font: 400 17px/1.4 var(--text); padding: 12px 14px;
}
textarea { resize: vertical; font-family: var(--mono); font-size: 15px; line-height: 1.6; }
textarea::placeholder { color: #8b8377; }
input:focus, textarea:focus { outline: 3px solid var(--biro); outline-offset: 1px; }
.field.short input { max-width: 180px; }
[aria-invalid="true"] { border-color: var(--ink) !important; border-width: 3px !important; background-color: var(--tint) !important; }

fieldset { border: 0; padding: 0; margin: 0 0 26px; min-width: 0; }
fieldset > legend { float: left; width: 100%; padding: 0; }
fieldset > legend + * { clear: left; }
fieldset.choice[aria-invalid="true"] { border-width: 0 !important; background: var(--tint); box-shadow: 0 0 0 6px var(--tint); outline: 2px solid var(--ink); outline-offset: 6px; }

/* Options are printed on the slip; choosing one circles it in biro. */
.opts { display: flex; flex-wrap: wrap; gap: 6px 6px; margin-left: -8px; }
.opt { position: relative; display: inline-block; cursor: pointer; }
.opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opt span {
  display: inline-block; padding: 11px 10px; min-height: 44px; font-size: 17px; line-height: 1.3; border-radius: 2px;
  text-decoration: underline dotted rgba(23, 21, 18, 0.45); text-decoration-thickness: 1.5px; text-underline-offset: 6px;
}
.opt small { color: var(--pencil); font-family: var(--mono); font-size: 12px; margin-left: 4px; }
@media (hover: hover) { .opt:hover span { background: rgba(23, 21, 18, 0.06); } }
.opt input:checked + span { font-weight: 700; text-decoration-color: transparent; }
.opt input:focus-visible + span { outline: 3px solid var(--biro); outline-offset: 0; }
.opt .biro { left: -9px; top: -2px; width: calc(100% + 18px); height: calc(100% + 4px); visibility: hidden; }
.opt input:checked ~ .biro { visibility: visible; }
.opt input:checked ~ .biro path { animation: draw 260ms cubic-bezier(.6, .1, .3, 1) both; }

.check { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; margin: 4px 0 22px; cursor: pointer; }
.check input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--ink); }

.error {
  margin: 0 0 16px; padding: 10px 14px; background: var(--tint); border-left: 0;
  outline: 2px solid var(--ink); color: var(--ink); font-size: 15px; font-weight: 700;
}
.error::before { content: "! "; font-family: var(--mono); }
.hp { position: absolute; left: -9999px; }

.intro { margin: 0 0 22px; font-size: 17px; }

.drop {
  position: relative; display: grid; place-items: center; text-align: center; min-height: 96px; padding: 18px;
  border: 2px dashed var(--ink); border-radius: 2px; background: var(--paper); cursor: pointer;
  font-family: var(--mono); font-size: 14px; margin: 0 0 14px;
}
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop.over, .drop:hover { background: #fbf8f2; }
.drop:has(input:focus-visible) { outline: 3px solid var(--biro); outline-offset: 2px; }
#label-list { margin-bottom: 14px; }

/* Step 1 collapses into a stub above a perforation. */
.stub {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 4px 0 18px; margin-bottom: 22px; border-bottom: 2px dashed var(--ink); position: relative;
}
.stub::after { /* the perforation's punched ends */
  content: ""; position: absolute; left: -26px; right: -26px; bottom: -9px; height: 16px;
  background: radial-gradient(circle at 8px 8px, var(--paper) 7px, transparent 7.5px) left / 16px 16px no-repeat,
              radial-gradient(circle at 8px 8px, var(--paper) 7px, transparent 7.5px) right / 16px 16px no-repeat;
}
.stub-text { font-size: 13px; letter-spacing: 0.04em; }
.stub-text b { font-family: var(--display); font-weight: 900; font-size: 22px; letter-spacing: 0.02em; text-transform: uppercase; }
.sticker-held { width: 74px; height: 74px; font-size: 22px; transform: rotate(-6deg); flex: none; }
.sticker-held.slap, .sticker-done.slap { animation: slap 170ms cubic-bezier(.2, .9, .3, 1.2) both; }
@keyframes slap {
  from { transform: scale(1.35) rotate(-16deg); opacity: 0; }
  60% { opacity: 1; }
  to { transform: scale(1) rotate(-6deg); opacity: 1; }
}

.done { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: start; padding: 8px 0 4px; }
.done h3 { margin: 6px 0 14px; grid-column: 1; grid-row: 1; }
.done p { margin: 0; max-width: 36em; grid-column: 1 / -1; }
.sticker-done { grid-column: 2; grid-row: 1; width: 78px; height: 78px; font-size: 22px; transform: rotate(-6deg); }

/* ---------- FAQ ---------- */

.faq { border-top: 1px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--ink); }
.faq summary {
  list-style: none; cursor: pointer; padding: 18px 40px 18px 0; position: relative;
  font-weight: 700; font-size: 19px; line-height: 1.3;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 4px; top: 14px; font-family: var(--mono); font-size: 22px; transition: transform 160ms;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 20px; max-width: 38em; color: #2c2925; }

/* ---------- Footer ---------- */

.foot {
  display: flex; flex-direction: column; gap: 14px; padding-top: 26px; padding-bottom: 40px;
  border-top: 2px solid var(--ink); font-size: 14px; color: var(--pencil);
}
.foot-mark { display: flex; align-items: center; gap: 14px; color: var(--ink); }
.foot-meta a { color: var(--ink); }

/* ---------- Cookie slip ---------- */

.cookie {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 150; max-width: 560px; margin: 0 auto;
  background: var(--paper); border: 2px solid var(--ink); border-radius: 2px; padding: 16px;
  display: flex; flex-direction: column; gap: 12px;
}
.cookie p { margin: 0; font-size: 15px; }
.cookie-btns { display: flex; gap: 8px; }

/* ---------- Legal page ---------- */

.legal { max-width: 760px; }
.legal h1 { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(48px, 12vw, 88px); line-height: 0.9; margin: 8px 0 12px; }
.legal h2 { font-size: 21px; margin: 36px 0 10px; }
.legal table { width: 100%; border-collapse: collapse; font-size: 14px; display: block; overflow-x: auto; }
.legal th, .legal td { border: 1px solid var(--ink); padding: 8px 10px; text-align: left; vertical-align: top; }
.legal th { background: var(--card); font-family: var(--mono); font-weight: 400; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; }
.legal code { font-family: var(--mono); font-size: 0.9em; }
.draft-banner { background: var(--tint); outline: 2px solid var(--ink); padding: 12px 16px; font-size: 15px; font-weight: 700; }

/* ---------- Wider screens ---------- */

@media (min-width: 720px) {
  :root { --gutter: 40px; }
  section { padding: 56px 0 88px; }
  .lede { font-size: 20px; line-height: 1.45; }
  .fields.two { grid-template-columns: 1fr 1fr; }
  .form-slip { padding: 32px 36px 36px; }
  .btn { display: inline-block; width: auto; min-width: 280px; }
  .tracklist li { grid-template-columns: 56px 1fr 120px; }
  .tracklist .dur { grid-column: 3; grid-row: 1; text-align: right; padding-top: 6px; }
  .sticker-hero { width: 128px; height: 128px; font-size: 30px; right: 4%; top: 0; }
  .foot { flex-direction: row; justify-content: space-between; align-items: center; }
  .cookie { flex-direction: row; align-items: center; }
  .stub::after { left: -44px; right: -44px; }
}

@media (min-width: 1000px) {
  .hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; gap: 56px; }
  .hold { margin-top: 36px; }
  .sec-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; }
  .hero-grid { position: relative; }
  .hero-copy { position: static; }
  .sticker-hero { right: auto; left: calc(58.33% - 44px); top: 10px; z-index: 2; transform: rotate(-12deg); }
  .apply { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 48px; align-items: start; }
  .apply-side { position: sticky; top: 24px; }
  .form-slip { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
    .opt .biro path, .btn, .faq summary::after { transition: none; }
  .opt input:checked ~ .biro path,   .sticker-held.slap, .sticker-done.slap { animation: none; }
}


/* ---------- Section labels: a short rule and the section name above the heading ---------- */

.label {
  display: flex; align-items: center; gap: 12px; margin: 0 0 18px;
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
}
.label::before { content: ""; width: 28px; height: 2px; background: var(--ink); flex: none; }
.sec-head h2, .apply-side h2 { margin: 0; }
.sec { padding-top: 72px; }
.apply-side { grid-column: 1; }

/* ---------- The pile in numbers: numbers and labels share a grid, arrows sit on the numbers ---------- */

.pile {
  background: var(--card); box-shadow: 0 0 0 100vmax var(--card); clip-path: inset(0 -100vmax);
  padding: 48px 0 52px; margin: 12px 0 0;
}
.tally { --n: clamp(80px, 24vw, 132px); list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.tally li { display: grid; grid-template-columns: calc(var(--n) * 1.7) minmax(0, 1fr); column-gap: 14px; align-items: end; }
.tally-n { font-family: var(--display); font-weight: 900; font-size: var(--n); line-height: 0.82; font-variant-numeric: tabular-nums; }
.tally-l { font-size: 18px; line-height: 1.3; max-width: 15em; padding-bottom: 6px; }
.tally-arrow { display: block !important; color: var(--pencil); }
.tally-arrow svg { display: block; width: 40px; height: auto; transform: rotate(90deg); margin-left: calc(var(--n) * 0.35); }
.ringed { position: relative; display: inline-block; }
.ringed.q { padding: 0 0.3em; }
.ringed.q .biro { left: 0; top: -6%; width: 100%; height: 108%; }
.pile .biro path { stroke-width: 1.9; animation: draw 700ms 600ms cubic-bezier(.6, .1, .3, 1) both; }
.js .pile:not(.in) .biro path { animation-play-state: paused; }

@media (min-width: 880px) {
  .pile { padding: 64px 0 68px; }
  .tally {
    grid-template-columns: 1fr auto 1fr auto 1fr; grid-template-rows: auto auto; column-gap: 32px; row-gap: 14px; align-items: center;
  }
  .tally li { display: contents; }
  .t1 .tally-n { grid-area: 1 / 1; } .t1 .tally-l { grid-area: 2 / 1; }
  .t2 .tally-n { grid-area: 1 / 3; } .t2 .tally-l { grid-area: 2 / 3; }
  .t3 .tally-n { grid-area: 1 / 5; } .t3 .tally-l { grid-area: 2 / 5; }
  .tally-arrow { grid-row: 1; align-self: center; }
  .tally-arrow:nth-child(2) { grid-column: 2; }
  .tally-arrow:nth-child(4) { grid-column: 4; }
  .tally-arrow svg { transform: none; width: 64px; margin: 0; }
  .tally { --n: clamp(110px, 12vw, 164px); }
  .tally-l { padding-bottom: 0; align-self: start; }
}

/* ---------- Motion: everything starts visible and only hides when scripting is on ---------- */

.js .reveal { opacity: 0; transform: translateY(22px); }
.js .reveal.in {
  opacity: 1; transform: none;
  transition: opacity 640ms cubic-bezier(.2, .7, .2, 1), transform 640ms cubic-bezier(.2, .7, .2, 1);
  transition-delay: calc(var(--i, 0) * 90ms);
}

@keyframes pop { from { transform: scale(0.2) rotate(-40deg); opacity: 0; } 65% { opacity: 1; } }
.js .pop:not(.in) { opacity: 0; }
.pop.in { animation: pop 560ms 650ms cubic-bezier(.2, .9, .3, 1.25) backwards; }
@keyframes stamp { from { transform: scale(1.7) rotate(-22deg); opacity: 0; } 50% { opacity: 1; } }

/* The hold slip fills in row by row; the kept stickers are stamped on afterwards. */
.js .hold:not(.in) .rows li { opacity: 0; transform: translateY(10px); }
.hold.in .rows li { transition: opacity 420ms ease-out, transform 420ms ease-out; }
.hold.in .rows li:nth-child(1) { transition-delay: 500ms; }
.hold.in .rows li:nth-child(2) { transition-delay: 640ms; }
.hold.in .rows li:nth-child(3) { transition-delay: 780ms; }
.hold.in .rows li:nth-child(4) { transition-delay: 920ms; }
.hold.in .rows li:nth-child(5) { transition-delay: 1060ms; }
.hold.in .rows li:nth-child(6) { transition-delay: 1200ms; }
.js .hold:not(.in) .kept { opacity: 0; }
.hold.in .kept { animation: stamp 260ms cubic-bezier(.2, .9, .3, 1.2) backwards; }
.hold.in li:nth-child(1) .kept { animation-delay: 1.55s; }
.hold.in li:nth-child(5) .kept { animation-delay: 1.9s; }
.rows .owned s { text-decoration: none; position: relative; }
.rows .owned s::after {
  content: ""; position: absolute; left: -2px; right: -2px; top: 54%; height: 2px; background: var(--ink);
  transform-origin: left; transition: transform 380ms ease-out;
}
.js .hold:not(.in) .rows .owned s::after { transform: scaleX(0); }
.hold.in .rows .owned s::after { transition-delay: 1.35s; }

/* The next step of the form and the thank-you rise in; the cookie slip slides up. */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
#details:not([hidden]), #done:not([hidden]) { animation: rise 420ms ease-out both; }
.cookie { animation: rise 320ms ease-out both; }

/* Small touches */
.sticker-hero { transition: transform 200ms cubic-bezier(.3, 1.6, .5, 1); }
.sticker-hero:hover { transform: rotate(-4deg) scale(1.06); }
.faq details > p { animation: rise 260ms ease-out both; }
.opt input:checked + span { animation: choose 200ms ease-out; }
@keyframes choose { 40% { transform: scale(1.06); } }

@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .reveal.in { opacity: 1; transform: none; transition: none; }
  .js .pop:not(.in) { opacity: 1; }
  .pop.in, .hold.in .kept, .faq details > p, #details:not([hidden]), #done:not([hidden]), .cookie,
  .opt input:checked + span { animation: none; }
  .js .hold:not(.in) .rows li, .js .hold:not(.in) .kept { opacity: 1; transform: none; }
  .hold.in .rows li, .rows .owned s::after { transition: none; }
  .js .hold:not(.in) .rows .owned s::after { transform: none; }
  .js .pile:not(.in) .biro path, .pile .biro path { animation: none; stroke-dashoffset: 0; }
  .sticker-hero { transition: none; }
}