/* Oxygen Plus · Black Friday 2026 pre-registration — "wide caps" (owner's pick, 2026-10-21).

   THE WORLD
   Plum-black ground, magenta used as light: two soft leaks from the corners, the −8% figure,
   the chosen chip and the button. Nothing else carries colour.
   Noto Serif Display at wdth 62.5 for the display words (BLACK FRIDAY, −8%, the thank-you and
   closed headings); Manrope for everything that is read or touched. Both have Greek
   (check_design.py fonts, 2026-10-21).
   Writing-line inputs, pill chips, pill button, 1px hairlines. No cards, no boxes.

   CONTRAST (check_design.py, on #0C0710)
   ink #F4EEF3 17.4 · muted #B9AAB8 9.0 · faint #8E7F8D 5.3 · magenta #EC008C 4.69 (display only)
   · magenta-text #FF4FB5 6.7 (small text, focus) · white on button #E20086 4.59 / hover #C90077.

   SCALE
   The display block sizes from its own column (container query units), so BLACK FRIDAY runs
   edge to edge on a phone and on a desktop column alike. The −8% is deliberately over the craft
   floor's 6rem display cap on desktop: the figure is the offer. */

:root {
  --ground: #0C0710;
  --ink: #F4EEF3;
  --muted: #B9AAB8;
  --faint: #8E7F8D;
  --magenta: #EC008C;
  --magenta-btn: #E20086;
  --magenta-btn-hover: #C90077;
  --magenta-text: #FF4FB5;
  --rule: rgba(244, 238, 243, 0.16);
  --line: rgba(244, 238, 243, 0.3);
  --serif: "Noto Serif Display", "Times New Roman", serif;
  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter: max(20px, env(safe-area-inset-left), env(safe-area-inset-right));
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: dark;
  scrollbar-color: #3A2A3E var(--ground);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--ground); overflow-x: clip; }

body {
  margin: 0;
  position: relative;
  overflow-x: clip;
  min-height: 100svh;
  background: var(--ground);
  color: var(--ink);
  font: 400 16px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  accent-color: var(--magenta-btn);
}

::selection { background: var(--magenta-btn); color: #FFFFFF; }

a { color: var(--ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--magenta-text); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--magenta-text); outline-offset: 3px; border-radius: 6px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Light leaks: the only colour fields, and the page's one authored entrance ─────────── */
/* Clipped by their own layer, so an overhanging leak can never widen the page (iOS WebKit lets
   a visitor pan sideways into content that only body overflow hides). */
.leaks { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.leak {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(236, 0, 140, 0.5), rgba(236, 0, 140, 0));
  animation: leak-in 1.6s var(--ease-out) both;
}
.leak-a { width: 440px; height: 440px; right: -220px; top: -210px; }
.leak-b { width: 400px; height: 320px; left: -170px; top: 150px; background: radial-gradient(closest-side, rgba(236, 0, 140, 0.4), rgba(236, 0, 140, 0)); animation-delay: 0.15s; }

@keyframes leak-in { from { opacity: 0; transform: scale(0.82); } to { opacity: 1; transform: none; } }
@keyframes reveal { from { clip-path: inset(0 0 100% 0); transform: translateY(0.18em); } to { clip-path: inset(0 0 -12% 0); transform: none; } }

/* ── Bar ──────────────────────────────────────────────────────────────────────────────── */
.bar {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: max(16px, env(safe-area-inset-top)) var(--gutter) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.bar-home { display: block; line-height: 0; }
.bar-mark { width: 92px; height: auto; display: block; }
.bar-call {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* ── Hero: the offer and the form ─────────────────────────────────────────────────────── */
.hero {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px var(--gutter) 28px;
  display: grid;
  gap: 18px;
}

.offer { container-type: inline-size; display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.display { margin: 0; font-weight: 400; display: flex; flex-direction: column; gap: 2px; }
.caps, .sale, .figure {
  font-family: var(--serif);
  font-stretch: 62.5%;
  animation: reveal 0.9s var(--ease-out) both;
}
.caps {
  font-weight: 600;
  font-size: 58px;
  font-size: 16.2cqi;
  line-height: 0.92;
  letter-spacing: 0.012em;
  white-space: nowrap;
}
/* The sale ceiling: the caps' face and size, in ink on its own line, so it reads as part of the
   event name and never competes with the magenta figure below. */
.sale {
  font-weight: 600;
  font-size: 58px;
  font-size: 16.2cqi;
  line-height: 0.92;
  letter-spacing: 0.012em;
  white-space: nowrap;
  font-variant-numeric: lining-nums;
  animation-delay: 0.04s;
}
.figure {
  font-weight: 500;
  font-size: 112px;
  font-size: 32cqi;
  line-height: 0.86;
  letter-spacing: -0.02em;
  color: var(--magenta);
  font-variant-numeric: lining-nums;
  animation-delay: 0.08s;
}
.bf-wait .caps, .bf-wait .sale, .bf-wait .figure { animation-play-state: paused; }
.line {
  font-weight: 600;
  font-size: clamp(19px, 5.4cqi, 30px);
  line-height: 1.22;
  text-wrap: balance;
}

.lede { margin: 0; max-width: 38ch; font-size: 15px; line-height: 1.45; color: var(--muted); text-wrap: pretty; }

/* Countdown: one hairline row, never tiles. Seconds are dimmed so the row ticks without shouting. */
.clock {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.clock-label { max-width: 16ch; text-wrap: balance; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; line-height: 1.45; text-transform: uppercase; color: var(--muted); }
.clock-units { display: flex; gap: 12px; font-variant-numeric: tabular-nums; }
.unit { display: flex; flex-direction: column; align-items: center; min-width: 2.2ch; }
.num { font-size: 30px; font-weight: 300; line-height: 1; letter-spacing: -0.01em; }
.unit-s .num { color: var(--faint); }
.unit-name { margin-top: 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; color: var(--faint); }

/* ── Form: writing lines on the ground, no box ────────────────────────────────────────── */
.lead { min-width: 0; }
/* The form's heading is read by screen readers everywhere; it is shown only on desktop, where the
   form has its own column and needs a top edge. On a phone the hero above already says it. */
.form-h {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
#lp-form { display: flex; flex-direction: column; gap: 11px; }

.field { display: flex; flex-direction: column; gap: 2px; font-size: 12px; font-weight: 600; color: var(--muted); }
.field input {
  appearance: none;
  width: 100%;
  height: 34px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: 500 16px var(--sans);
  caret-color: var(--magenta-text);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field input:hover { border-bottom-color: rgba(244, 238, 243, 0.5); }
.field input:focus { border-bottom-color: var(--magenta-text); box-shadow: 0 1px 0 var(--magenta-text); }
/* Autofill keeps the writing line: its pale fill is held off for good by an endless transition,
   so no opaque rectangle lands on the magenta light behind the desktop form. */
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--magenta-text);
  transition: background-color 600000s 0s, color 600000s 0s;
}
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

.pick { margin: 0; padding: 0; border: 0; min-width: 0; }
.pick legend { padding: 0; margin-bottom: 6px; font-size: 12px; font-weight: 600; color: var(--muted); }
.chips { display: flex; gap: 8px; }
.chip { position: relative; flex: 1 1 0; min-width: 0; }
.chip input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.chip span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.chip input:hover + span { border-color: rgba(244, 238, 243, 0.6); }
.chip input:checked + span { background: var(--magenta-btn); border-color: var(--magenta-btn); color: #FFFFFF; font-weight: 700; }
.chip input:focus-visible + span { outline: 2px solid var(--magenta-text); outline-offset: 2px; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 12px; line-height: 1.45; color: var(--muted); }
/* Drawn in the page's own line work: a hairline square, magenta with a white tick when checked. */
.consent input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  border: 1px solid rgba(244, 238, 243, 0.5); /* ≈4.9:1 on the ground (needs 3:1 as a required control) */
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}
.consent input:hover { border-color: rgba(244, 238, 243, 0.75); }
.consent input:checked {
  border-color: var(--magenta-btn);
  background: var(--magenta-btn) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
}
.consent input:focus-visible { outline: 2px solid var(--magenta-text); outline-offset: 2px; }
.consent a { color: var(--ink); }

.cta {
  height: 52px;
  border: 0;
  border-radius: 999px;
  background: var(--magenta-btn);
  color: #FFFFFF;
  font: 800 15px var(--sans);
  letter-spacing: 0.08em;
  cursor: pointer;
  box-shadow: 0 10px 30px -10px rgba(236, 0, 140, 0.7);
  transition: background-color 0.2s, transform 0.12s;
}
.cta:hover { background: var(--magenta-btn-hover); }
.cta:active { transform: translateY(1px); }
.cta:disabled { cursor: progress; opacity: 0.75; }

.form-error { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--magenta-text); }
.form-note { margin: 0; font-size: 12px; line-height: 1.4; color: var(--faint); text-align: center; }

.thanks, .closed { border-top: 1px solid var(--magenta); padding-top: 18px; }
.thanks h2, .closed h2 { margin: 0 0 8px; font: 600 40px/1 var(--serif); font-stretch: 62.5%; text-transform: none; }
.thanks p, .closed p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--muted); }

/* Closed: from the deadline on, the form gives way to the closed note (the inline clock sets it). */
.closed { display: none; }
.closed-call {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 14px;
  padding: 0 20px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.is-closed #lead-form-wrap, .is-closed .clock, .is-closed .lede { display: none; }
.is-closed .closed { display: block; }
.is-closed #lp-thankyou:not([hidden]) ~ .closed { display: none; }

/* ── Terms + footer ───────────────────────────────────────────────────────────────────── */
.terms {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 8px var(--gutter) 32px;
}
.terms-h { margin: 0 0 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; color: var(--muted); }
.terms-list { margin: 0; padding-left: 18px; max-width: 70ch; font-size: 13px; line-height: 1.55; color: var(--muted); }
.terms-list li + li { margin-top: 6px; }
.terms-list li::marker { color: var(--faint); }
.term-h { font-weight: 600; color: var(--ink); }

.foot {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px var(--gutter) max(28px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--rule);
  display: grid;
  gap: 18px;
  font-size: 13px;
  color: var(--muted);
}
.foot-home { display: block; width: 72px; line-height: 0; }
.foot-mark { width: 72px; height: auto; display: block; }
.stores { font-style: normal; }
.stores-h { margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; }
.stores-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.store { display: flex; flex-direction: column; gap: 2px; }
.store-name { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; color: var(--ink); }
.store-addr, .store-tel { color: var(--muted); }
.store-tel { font-variant-numeric: tabular-nums; }
.foot-links { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.foot-links a { min-height: 32px; display: inline-flex; align-items: center; color: var(--muted); }
.foot-copy { margin: 0; color: var(--faint); }

/* ── Desktop: the display block left, the form right, one viewport ───────────────────── */
@media (min-width: 960px) {
  .leak-a { width: 820px; height: 820px; right: -380px; top: -420px; }
  .leak-b { width: 760px; height: 560px; left: -260px; top: 220px; }
  .bar { padding-top: 28px; }
  .bar-mark { width: 116px; }
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 400px);
    column-gap: clamp(48px, 6vw, 104px);
    align-items: end;
    padding-top: 28px;
    padding-bottom: 48px;
  }
  .offer { gap: 18px; }
  .form-h {
    position: static; width: auto; height: auto; margin: 0 0 18px; overflow: visible; clip: auto; white-space: normal;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--rule);
    font: 600 44px/1 var(--serif);
    font-stretch: 62.5%;
  }
  .lede { font-size: 17px; }
  .clock { padding: 14px 0; }
  .num { font-size: 40px; }
  .foot { grid-template-columns: auto 1fr auto; align-items: start; column-gap: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .leak, .caps, .sale, .figure { animation: none; }
  .cta, .chip span, .field input { transition: none; }
}