/* 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;
  --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); }
.tile .seal { position: absolute; right: 4%; bottom: 4%; width: 54%; 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; }
.mark { width: auto; height: 120px; 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); }
.live { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 12px; margin-top: 22px !important; }
.live[hidden] { display: none; }
.clock { display: inline-flex; align-items: baseline; gap: 4px; background: var(--coral-fill); color: #fff; border-radius: 999px; padding: 7px 15px; font-size: 19px; font-weight: 700; box-shadow: 0 8px 20px -10px rgba(255, 93, 93, .8); }
.clock .num { font-weight: 700; }
.clock small { font-size: 15px; font-weight: 600; color: #3A1A1A; }
.hint { font-size: 15px; font-weight: 600; color: var(--coral-text); }
.wall.is-ended .clock { background: var(--coral-soft); color: var(--coral-text); box-shadow: none; }
.wall.is-ended .clock small { color: var(--coral-text); }
.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: 168px; }
}
/* 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: 120px; 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; } }

.close { margin-top: 160px; overflow: hidden; padding: 96px 0 170px; text-align: center; }
.close .row { margin: 0 auto 72px; }
.close .mark { height: 112px; }
.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; }

.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; }
}