/* claimsale.com. D's tokens (lib/core/constants, DPalette.passing), the wall Eugene picked. */
@font-face { font-family: 'DM Sans'; font-weight: 400; src: url(assets/fonts/DMSans-Regular.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'DM Sans'; font-weight: 600; src: url(assets/fonts/DMSans-SemiBold.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'DM Sans'; font-weight: 700; src: url(assets/fonts/DMSans-Bold.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Outfit'; font-weight: 600; src: url(assets/fonts/Outfit-SemiBold.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Outfit'; font-weight: 700; src: url(assets/fonts/Outfit-Bold.woff2) format('woff2'); font-display: swap; }

:root {
  --page: #FFF9F9; --surface: #FFFFFF; --mat: #ECE4D8;
  --coral: #FF5D5D; --coral-fill: linear-gradient(135deg, #FF5D5D, #FF5757);
  --coral-soft: #FFE8E8; --coral-text: #B83535;
  /* Coral as large words: 3.49:1 on the page (review F4); pure coral stays for the seal, the clock and the claim. */
  --coral-words: #F04A4A; --ink: #1A1D1F; --text-2: #5B6168; --hairline: #F1E4E4;
  --lift: 0 1px 2px rgba(58, 26, 26, .05), 0 12px 32px -12px rgba(58, 26, 26, .18);
  --words: 'DM Sans', system-ui, sans-serif; --numbers: 'Outfit', 'DM Sans', system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { margin: 0; background: var(--page); color: var(--ink); font-family: var(--words); font-size: 17px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; }
:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--page), 0 0 0 5px var(--coral-text); border-radius: 14px; }
.num { font-family: var(--numbers); font-variant-numeric: tabular-nums; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* The wall: rows of pieces that slide only with the reader's scroll. */
.wall { position: relative; height: 100svh; min-height: 640px; overflow: hidden; }
.rows { position: absolute; inset: -40px 0; z-index: 0; display: grid; align-content: center; gap: 14px; }
.row { display: flex; gap: 14px; width: max-content; will-change: transform; }
.tile { position: relative; flex: none; width: 128px; text-align: left; border-radius: 18px; }
.tile-photo { position: relative; display: block; aspect-ratio: 1; border-radius: 18px; overflow: hidden; background: radial-gradient(120% 90% at 35% 25%, #F5F0E8, var(--mat)); }
.tile-photo > svg { width: 100%; height: 100%; padding: 10%; }
.tile-price { display: block; margin-top: 6px; font-weight: 600; font-size: 15px; color: var(--text-2); }
/* 66% of the piece: the stamp's word is no smaller than the old seal's (review F7). */
.tile .seal { position: absolute; right: 3%; bottom: 3%; width: 66%; animation: stamp .28s cubic-bezier(0, 0, .2, 1); filter: drop-shadow(0 6px 10px rgba(185, 50, 43, .3)); }
.tile.is-yours .tile-price { color: var(--coral-text); }
/* A ghost under the veil shows no price and takes no tap (review F7, F14). */
.tile.is-ghost { pointer-events: none; }
.tile.is-ghost .tile-price { visibility: hidden; }
@keyframes stamp { from { transform: scale(1.5) rotate(-12deg); opacity: 0; } to { transform: none; opacity: 1; } }

.veil { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(closest-side, var(--page) 64%, rgba(255, 249, 249, .9) 76%, rgba(255, 249, 249, 0) 100%); }
.words { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(100%, 900px); display: grid; justify-items: center; text-align: center; padding: 0 28px; }
/* While the keyboard is on the door row under the logo, only the logo steps back; the words never fade (re-review N1). */
.mark { transition: opacity .2s ease-out; }
.wall.is-reaching .mark { opacity: .06; }
/* The logo at twice its first size (Eugene, 7 Oct), held to a share of a short screen so the clock line still shows. */
.mark { width: auto; height: clamp(120px, 28svh, 240px); margin: 0 auto 18px; }
.words h1 { font-size: clamp(36px, 9.6vw, 92px); line-height: 1; letter-spacing: -.045em; font-weight: 700; margin: 0; max-width: 12ch; text-wrap: balance; }
.words p { font-size: clamp(16px, 1.8vw, 19px); color: var(--text-2); max-width: 32ch; margin: 16px 0 0; text-wrap: balance; }
.words .soon { margin-top: 10px; font-size: 14px; font-weight: 600; letter-spacing: .02em; color: var(--ink); display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; }
.words .soon a { white-space: nowrap; }
.live { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 12px; margin-top: 22px !important; }
.live[hidden] { display: none; }
/* White on coral, always (Eugene, 7 Oct): the stopwatch and the time, nothing dark. */
.clock { display: inline-flex; align-items: center; gap: 8px; background: var(--coral-fill); color: #fff; border-radius: 999px; padding: 7px 17px 7px 11px; font-size: 19px; font-weight: 700; box-shadow: 0 8px 20px -10px rgba(255, 93, 93, .8); }
.clock .num { font-weight: 700; }
.watch { flex: none; width: 26px; height: 26px; overflow: visible; }
/* The stopwatch (Eugene, 7 Oct: "animated to the time left", "more minimal"): a crown, a ring, and a sector that
   is the time left in the sale, emptying clockwise as it runs. One colour: white on coral, coral-text when ended. */
.watch-ink, .watch-left { fill: currentColor; }
.watch-ring { fill: none; stroke: currentColor; stroke-width: 2; }
.watch-bail { fill: none; stroke: currentColor; stroke-width: 1.3; }
.watch-ticks { fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; opacity: .7; }
.watch-hand { transform-origin: 12px 13.6px; transform-box: view-box; transition: transform .12s cubic-bezier(.2, 0, 0, 1); }
.hint { font-size: 15px; font-weight: 600; color: var(--ink); }
.wall.is-ended .clock { background: var(--coral-soft); color: var(--coral-text); box-shadow: none; }
.wall.is-ended .tile { pointer-events: none; }

@media (min-width: 900px) {
  .tile { width: 176px; } .rows, .row { gap: 18px; }
  /* Wide enough to hold the whole words block, the clock line included; site.js veil() mirrors it. */
  .veil { background: radial-gradient(50% 58% at 50% 50%, var(--page) 64%, rgba(255, 249, 249, .86) 80%, rgba(255, 249, 249, 0) 100%); }
  .mark { height: clamp(168px, 34svh, 336px); }
}
/* A short desktop: the clock line must clear the tray, which rises over the foot of the wall. */
@media (min-width: 900px) and (max-height: 800px) {
  .mark { height: clamp(140px, 28svh, 220px); margin-bottom: 12px; }
  .words h1 { font-size: 72px; }
}

/* What a claim sale is, against the real app. */
.acts { max-width: 1180px; margin: 0 auto; padding: 120px 22px 0; display: grid; gap: 140px; }
.act { display: grid; gap: 40px; align-items: center; }
.act figure { margin: 0; justify-self: center; width: min(320px, 78vw); }
.act figcaption { margin-top: 18px; text-align: center; font-size: 14px; color: var(--text-2); }
.act h2 { font-size: clamp(44px, 8.4vw, 88px); line-height: .98; letter-spacing: -.045em; font-weight: 700; margin: 0; text-wrap: balance; }
.act h2 em { font-style: normal; color: var(--coral-words); }
.act p { font-size: clamp(17px, 1.8vw, 20px); line-height: 1.55; color: var(--text-2); max-width: 32ch; margin: 22px 0 0; }
.act img { width: 100%; height: auto; border-radius: 44px; box-shadow: 0 0 0 7px #fff, 0 40px 80px -30px rgba(58, 26, 26, .35); }
@media (min-width: 900px) { .act { grid-template-columns: 1.5fr 1fr; gap: 72px; } .act.flip { grid-template-columns: 1fr 1.5fr; } .act.flip > figure { order: -1; } }

/* The space under the signup was pulled in (Eugene, 7 Oct); the fixed tray gets its room only while it is showing. */
.close { margin-top: 120px; overflow: hidden; padding: 80px 0 40px; text-align: center; }
body:has(#tray:not([hidden])) .close { padding-bottom: 132px; }
.close .row { margin: 0 auto 72px; }
.close .mark { height: clamp(112px, 26svh, 224px); }
.close h2 { text-wrap: balance; font-size: clamp(40px, 9vw, 96px); line-height: 1; letter-spacing: -.045em; font-weight: 700; margin: 0; padding: 0 22px; }
.close p { color: var(--text-2); margin: 16px 0 0; }
/* The beta counter is type, not a badge: beside the hero's link a quiet line, under the closing words a number. */
.spots { color: var(--ink); white-space: nowrap; }
.spots .num { color: var(--coral-text); }
.spots[hidden] { display: none; }
.spots .num { font-weight: 700; }
.close .spots-close { margin: 28px 0 0; color: var(--text-2); font-size: 17px; font-weight: 600; }
.close .spots-close .num { display: block; font-size: 56px; line-height: 1; letter-spacing: -.02em; color: var(--coral-words); margin-bottom: 4px; }
.soon a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* The launch list: one field, one button. The answer is shown by :target, with or without script
   (site.js moves to the same fragment). */
.join { position: relative; width: min(460px, calc(100% - 44px)); margin: 44px auto 0; text-align: left; }
.join label { display: block; font-size: 15px; font-weight: 600; margin: 0 0 8px 20px; }
.join-field { display: flex; gap: 8px; padding: 6px; background: var(--surface); border-radius: 999px; box-shadow: var(--lift); }
.join-field:focus-within { box-shadow: var(--lift), 0 0 0 2px var(--coral-text); }
.join input { flex: 1; min-width: 0; font: inherit; color: var(--ink); background: none; border: 0; padding: 0 14px; min-height: 48px; }
/* The pill's own ring shows focus; the page's ring would draw a second. */
.join input:focus, .join input:focus-visible { outline: none; box-shadow: none; }
/* White on coral is 19 px bold or larger (README). */
.join button { flex: none; background: var(--coral-fill); color: #fff; font-size: 19px; font-weight: 700; border-radius: 999px; padding: 0 22px; min-height: 48px; }
.join button:focus-visible { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--coral-text); }
.join button[aria-busy='true'] { cursor: progress; }
/* The one coral control answers the pointer: a deeper coral under it, a small press when it goes down. */
.join button { transition: transform .1s ease-out, background .15s ease-out; }
@media (hover: hover) { .join button:hover { background: linear-gradient(135deg, #F75252, #F04A4A); } }
.join button:active { transform: scale(.97); }
/* "Join the beta list" and a usable field do not fit one pill under about 420 px: the button goes under the field. */
@media (max-width: 420px) {
  .join-field { flex-direction: column; gap: 10px; padding: 0; background: none; box-shadow: none; border-radius: 0; }
  .join-field:focus-within { box-shadow: none; }
  .join input { background: var(--surface); border-radius: 999px; box-shadow: var(--lift); padding: 0 20px; min-height: 54px; }
  .join input:focus, .join input:focus-visible { box-shadow: var(--lift), 0 0 0 2px var(--coral-text); }
  .join button { min-height: 54px; }
}
.close .join-consent { font-size: 14px; margin: 10px 20px 0; text-wrap: balance; }
.join-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.join-answer { display: none; }
.join-answer:target { display: block; }
.close .join-answer.is-bad { margin: 10px 20px 0; font-size: 15px; font-weight: 600; color: var(--coral-text); }
.close:has(#joined:target) .join { display: none; }
.close .join-answer.is-joined:target { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 44px 22px 0; color: var(--ink); font-size: 24px; font-weight: 700; letter-spacing: -.01em; }
/* An answer takes focus only so it is read out; it is not a control, so it draws no ring. */
.join-answer:focus, .join-answer:focus-visible { outline: none; box-shadow: none; }
.join-seal { flex: none; width: 84px; height: 84px; filter: drop-shadow(0 6px 10px rgba(185, 50, 43, .3)); animation: stamp .28s cubic-bezier(0, 0, .2, 1); }

.legal-links { display: flex; justify-content: center; gap: 28px; margin: 64px 0 0; font-size: 15px; font-weight: 600; }
.legal-links a { color: var(--text-2); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; padding: 10px 2px; }
.legal-links a:hover { color: var(--ink); }

/* Terms and Privacy: The Wall's type on a quiet page. */
.legal { max-width: 720px; margin: 0 auto; padding: 40px 22px 64px; }
.legal-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.legal-top .mark { height: 72px; margin: 0; }
.legal-top a { border-radius: 14px; }
.legal-back { font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.legal h1 { font-size: clamp(44px, 9vw, 80px); line-height: 1; letter-spacing: -.045em; font-weight: 700; margin: 56px 0 0; }
.legal h1 em { font-style: normal; color: var(--coral-words); }
.draft { display: inline-block; margin: 20px 0 0; padding: 5px 14px; border-radius: 999px; background: var(--coral-soft); color: var(--coral-text); font-size: 15px; font-weight: 700; }
.legal .lede { font-size: clamp(18px, 2vw, 21px); line-height: 1.55; color: var(--text-2); margin: 24px 0 0; }
.legal .dated { font-size: 14px; color: var(--text-2); margin: 10px 0 0; }
.legal h2 { font-size: clamp(26px, 4vw, 34px); line-height: 1.1; letter-spacing: -.03em; font-weight: 700; margin: 56px 0 0; }
.legal p, .legal li { line-height: 1.6; }
.legal p { margin: 14px 0 0; }
.legal ul { margin: 14px 0 0; padding-left: 1.2em; }
.legal li + li { margin-top: 8px; }
.legal li::marker { color: var(--coral); }
.legal a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.open { margin: 18px 0 0; padding: 18px 20px; border-radius: 22px; background: var(--surface); border: 1px solid var(--hairline); }
.open strong { display: block; font-size: 15px; letter-spacing: .02em; color: var(--coral-text); }
.open p { margin: 6px 0 0; }
.legal-foot { margin: 72px 0 0; padding-top: 24px; border-top: 1px solid var(--hairline); display: flex; gap: 28px; font-size: 15px; font-weight: 600; }
.legal-foot a { color: var(--text-2); }

.tray[hidden] { display: none; }
.tray { position: fixed; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(480px, calc(100% - 24px)); z-index: 5; display: flex; align-items: center; gap: 12px; background: var(--surface); border-radius: 22px; padding: 12px 14px 12px 18px; box-shadow: 0 2px 6px rgba(58, 26, 26, .06), 0 24px 48px -16px rgba(58, 26, 26, .3); }
.tray-words { flex: 1; min-width: 0; line-height: 1.25; }
.tray-count { display: block; font-weight: 600; font-size: 17px; }
.tray-note { font-size: 14px; color: var(--text-2); }
.tray-total { font-size: 24px; font-weight: 700; color: var(--coral); }
.tray-undo { background: var(--coral-soft); color: var(--coral-text); font-weight: 700; border-radius: 999px; padding: 10px 16px; min-height: 44px; }

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