/* ==========================================================================
   PAR-TEE — playpartee.com
   Brand tokens are the app's canonical palette (Sources/ParTeeApp/Theme/Theme.swift),
   converted from sRGB components to hex. Keep them in step with the app.
   ========================================================================== */

:root {
  /* Brand — from Theme.Palette */
  --jade:        #22c075;  /* Palette.jade      (0.133, 0.753, 0.459) */
  --jade-deep:   #189f64;  /* Palette.jadeDeep  (0.094, 0.624, 0.392) */
  --pop:         #ffd56b;  /* Palette.popYellow (1.0,   0.835, 0.420) */
  --sky:         #a8d8f0;  /* Palette.skyPastel (0.659, 0.847, 0.941) */
  --ink:         #1a2924;  /* Palette.outline   (0.10,  0.16,  0.14)  */
  --pink:        #ff8fab;  /* Palette.popPink   (1.0,   0.561, 0.671) */

  /* Site-only extensions: the deep ground the brand green sits on */
  --fairway:     #0b3320;
  --fairway-lo:  #072216;
  --ink-soft:    #55665e;
  --paper:       #f7faf8;
  --card:        #ffffff;
  --rule:        rgba(26, 41, 36, 0.12);

  /* Type roles */
  --display: ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN",
             -apple-system, system-ui, "Segoe UI", sans-serif;
  --body:    -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto,
             Helvetica, Arial, sans-serif;
  --data:    ui-monospace, "SF Mono", SFMono-Regular, Menlo, "JetBrains Mono",
             "Roboto Mono", monospace;

  --shell: 1080px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.shell { max-width: var(--shell); margin: 0 auto; padding: 0 24px; }
.shell-narrow { max-width: 760px; margin: 0 auto; padding: 0 24px; }

a { color: var(--jade-deep); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--ink); }
img { max-width: 100%; height: auto; display: block; }

:focus-visible {
  outline: 3px solid var(--pop);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--pop); color: var(--ink); padding: 12px 18px;
  font-weight: 700; border-radius: 0 0 10px 0;
}
.skip:focus { left: 0; }

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

.display {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.03;
}

/* The launch-monitor voice: every label, eyebrow, and readout on the site is
   set in mono, the way the hardware itself reports numbers. */
.data {
  font-family: var(--data);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.eyebrow { color: var(--jade-deep); margin-bottom: 14px; }
.eyebrow-lo { color: rgba(255, 255, 255, 0.62); }

/* --------------------------------------------------------------------------
   Nav
   -------------------------------------------------------------------------- */

.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(11, 51, 32, 0.86);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
.nav-in {
  max-width: var(--shell); margin: 0 auto; padding: 0 24px;
  height: 70px; display: flex; align-items: center; gap: 26px;
}
.nav-mark { display: flex; align-items: center; margin-right: auto; }
.nav-mark img { height: 28px; width: auto; }
.nav a.nav-link {
  font-family: var(--data); font-size: 12px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72); text-decoration: none;
}
.nav a.nav-link:hover, .nav a.nav-link[aria-current="page"] { color: #fff; }
@media (max-width: 620px) {
  .nav-in { gap: 16px; height: 62px; }
  .nav a.nav-link { font-size: 11px; letter-spacing: 0.1em; }
  .nav-mark img { height: 22px; }
}

/* --------------------------------------------------------------------------
   Bands — one padding source, so sections never fight over margins
   -------------------------------------------------------------------------- */

.band { padding: 86px 0; }
.band-tight { padding: 60px 0; }
.band-dark { background: var(--fairway); color: #fff; }
.band-dark .display { color: #fff; }
.band-paper { background: var(--paper); }
.band-card { background: var(--card); }
@media (max-width: 720px) { .band { padding: 62px 0; } }

.band-head { max-width: 720px; margin-bottom: 42px; }
.band-head h2 { font-size: clamp(30px, 4.4vw, 42px); margin-bottom: 14px; }
.band-head p { color: var(--ink-soft); font-size: 18px; }
.band-dark .band-head p { color: rgba(255, 255, 255, 0.7); }

/* --------------------------------------------------------------------------
   Hero — the signature. A shot trace: your real swing, measured, then flown.
   -------------------------------------------------------------------------- */

.hero {
  background:
    radial-gradient(120% 90% at 78% 8%, rgba(34, 192, 117, 0.20) 0%, transparent 58%),
    linear-gradient(178deg, var(--fairway) 0%, var(--fairway-lo) 100%);
  color: #fff;
  padding: 76px 0 88px;
  overflow: hidden;
}
/* `align-items: end` is the composition: the trace's ground line lands level with
   the bottom of the text column, so the ball comes to rest on the same ground the
   buttons stand on rather than floating in its own box. */
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 44px; align-items: end;
}
/* The wordmark leads the page at full size. The nav keeps its small version for
   persistent identity; this one is the brand actually introducing itself. */
.hero-mark {
  width: clamp(180px, 23vw, 272px);
  height: auto;
  margin-bottom: 26px;
}
/* Sized so each sentence holds one line at every width. "Unreal courses." is the
   longer of the two and sets the ceiling. */
.hero h1 {
  font-size: clamp(38px, 5vw, 56px);
  color: #fff;
  margin-bottom: 20px;
}
.hero h1 .accent { color: var(--jade); }
.hero-sub {
  font-size: clamp(17px, 2vw, 19.5px);
  color: rgba(255, 255, 255, 0.76);
  max-width: 46ch; margin-bottom: 32px;
  text-wrap: pretty;  /* keeps "players." off a line of its own */
}
/* Full column width so the sentence and its link hold one line on desktop. */
.hero-note {
  margin-top: 20px; color: rgba(255, 255, 255, 0.5);
  font-size: 14px; line-height: 1.55; text-wrap: pretty;
}
@media (max-width: 900px) {
  .hero { padding: 54px 0 48px; }
  .hero-grid { grid-template-columns: 1fr; gap: 30px; }
}

/* The arc itself */
.trace-wrap { position: relative; }
.trace-cap {
  margin-top: 10px; text-align: right; font-size: 10.5px;
  color: rgba(255, 255, 255, 0.38);
}
.trace { width: 100%; height: auto; overflow: visible; }

.trace-path {
  fill: none; stroke: var(--jade); stroke-width: 3.5; stroke-linecap: round;
  stroke-dasharray: 1000; stroke-dashoffset: 1000;
  filter: drop-shadow(0 0 10px rgba(34, 192, 117, 0.45));
  animation: draw 2.1s cubic-bezier(0.32, 0.72, 0.3, 1) 0.25s forwards;
}
.trace-ground { stroke: rgba(255, 255, 255, 0.16); stroke-width: 1; }
.trace-tee { stroke: rgba(255, 255, 255, 0.34); stroke-width: 2; }

/* The ball rides the same curve the trace draws. The path string is repeated
   here because `offset-path` cannot reference an SVG element cross-browser;
   if the `d` in index.html changes, change it here too. */
.trace-ball {
  offset-path: path("M 60 438 C 320 110, 640 52, 856 378");
  offset-rotate: 0deg;
  filter: drop-shadow(0 0 8px rgba(255, 213, 107, 0.6));
  animation: fly 2.1s cubic-bezier(0.32, 0.72, 0.3, 1) 0.25s forwards;
  opacity: 0;
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fly {
  0%   { offset-distance: 0%;   opacity: 0; }
  6%   { opacity: 1; }
  100% { offset-distance: 100%; opacity: 1; }
}

.chip { opacity: 0; animation: chipIn 0.55s ease forwards; }
.chip-1 { animation-delay: 0.85s; }
.chip-2 { animation-delay: 1.35s; }
.chip-3 { animation-delay: 1.95s; }
.chip-4 { animation-delay: 2.35s; }
.chip-5 { animation-delay: 2.75s; }
@keyframes chipIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }

.chip-box { fill: rgba(7, 34, 22, 0.82); stroke: rgba(34, 192, 117, 0.5); stroke-width: 1; }
.chip-key { font-family: var(--data); font-size: 10px; letter-spacing: 0.14em;
  fill: rgba(255, 255, 255, 0.55); text-transform: uppercase; }
.chip-val { font-family: var(--display); font-size: 19px; font-weight: 800; fill: #fff; }
.chip-val tspan { font-size: 11px; font-weight: 600; fill: rgba(255, 255, 255, 0.5); }

@media (prefers-reduced-motion: reduce) {
  .trace-path { animation: none; stroke-dashoffset: 0; }
  .trace-ball { animation: none; opacity: 1; offset-distance: 100%; }
  .chip { animation: none; opacity: 1; }
}

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

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--display); font-weight: 800; font-size: 16.5px;
  letter-spacing: -0.01em;
  padding: 13px 24px; border-radius: 999px;
  text-decoration: none; border: 1.5px solid transparent;
  transition: transform 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--jade); color: #06251a; }
.btn-primary:hover { background: #2ad183; color: #06251a; }
.btn-ghost { border-color: rgba(255, 255, 255, 0.26); color: #fff; }
.btn-ghost:hover { border-color: rgba(255, 255, 255, 0.55); color: #fff; }
.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { background: #0e1a15; color: #fff; }
.btn svg { width: 18px; height: 18px; flex: none; }
@media (prefers-reduced-motion: reduce) { .btn:hover { transform: none; } }

/* Price / status pill */
.pill {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--data); font-size: 11.5px;
  color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 7px 14px; border-radius: 999px; margin-bottom: 22px;
}
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pop); flex: none; }

/* --------------------------------------------------------------------------
   Steps — numbered because this genuinely is a sequence
   -------------------------------------------------------------------------- */

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; }
.step { border-top: 2px solid var(--jade); padding-top: 18px; }
.step-n { font-family: var(--data); font-size: 11px; color: var(--jade-deep);
  letter-spacing: 0.18em; margin-bottom: 10px; }
.step h3 { font-family: var(--display); font-size: 21px; font-weight: 800;
  letter-spacing: -0.02em; margin-bottom: 7px; }
.step p { color: var(--ink-soft); font-size: 16px; }
@media (max-width: 780px) { .steps { grid-template-columns: 1fr; gap: 26px; } }

/* --------------------------------------------------------------------------
   Compatibility table — a real <table> because it is real tabular data, and it
   holds two columns all the way down to phone width without collapsing.
   -------------------------------------------------------------------------- */

.compat { width: 100%; border-collapse: collapse; }
.compat th, .compat td {
  text-align: left; padding: 13px 0; border-bottom: 1px solid var(--rule);
  vertical-align: middle;
}
.compat thead th {
  font-family: var(--data); font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft);
  border-bottom: 1px solid var(--ink); padding-bottom: 10px;
}
.compat tbody th {
  font-family: var(--display); font-size: 17px; font-weight: 700;
  letter-spacing: -0.01em; padding-right: 16px;
}
.compat tbody tr:last-child th, .compat tbody tr:last-child td { border-bottom: 0; }
/* Status column shrinks to its badge so the device names get the room. */
.compat td { width: 1%; white-space: nowrap; }

.tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--data); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 99px;
  border: 1px solid var(--rule); color: var(--ink-soft);
}
.tag-on {
  background: var(--jade); border-color: var(--jade); color: #06251a; font-weight: 700;
}
.tag-on::before { content: "\2713"; font-size: 11px; }

.compat-note { margin-top: 20px; color: var(--ink-soft); font-size: 14px; max-width: 620px; }

@media (max-width: 560px) {
  .compat tbody th { font-size: 15px; padding-right: 12px; }
  .tag { font-size: 9.5px; padding: 4px 9px; letter-spacing: 0.08em; }
}

/* --------------------------------------------------------------------------
   Screenshot rail — aligned, not fanned
   -------------------------------------------------------------------------- */

.rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: 210px;
  gap: 18px; overflow-x: auto; padding: 6px 24px 22px;
  scroll-snap-type: x mandatory; scrollbar-width: thin;
}
.rail::-webkit-scrollbar { height: 6px; }
.rail::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 99px; }
.rail figure { scroll-snap-align: start; }
.rail img {
  border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.34); width: 100%;
}
.rail figcaption {
  font-family: var(--data); font-size: 10.5px; letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.55); margin-top: 12px; text-transform: uppercase;
}
/* Full-bleed rail whose first card still lines up with the shell's text column,
   so it reads as "more to the right" rather than as a misaligned block. */
.rail-full {
  max-width: none;
  padding-left: max(24px, calc((100vw - var(--shell)) / 2 + 24px));
}

.wide-still { margin-top: 40px; }
.wide-still img { border-radius: 16px; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.3); }
.wide-still figcaption {
  font-family: var(--data); font-size: 10.5px; letter-spacing: 0.14em;
  color: var(--ink-soft); margin-top: 12px; text-transform: uppercase;
}
.band-dark .wide-still figcaption { color: rgba(255, 255, 255, 0.55); }

/* --------------------------------------------------------------------------
   Mode list
   -------------------------------------------------------------------------- */

.modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 34px; }
.mode { border-top: 1px solid var(--rule); padding: 17px 0; }
.mode h3 { font-family: var(--display); font-size: 18px; font-weight: 800;
  letter-spacing: -0.02em; margin-bottom: 3px; }
.mode p { color: var(--ink-soft); font-size: 15px; line-height: 1.5; }
@media (max-width: 880px) { .modes { grid-template-columns: repeat(2, 1fr); gap: 0 26px; } }
@media (max-width: 560px) { .modes { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Feature trio
   -------------------------------------------------------------------------- */

.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.trio-item h3 { font-family: var(--display); font-size: 20px; font-weight: 800;
  letter-spacing: -0.02em; margin-bottom: 8px; }
.trio-item p { color: var(--ink-soft); font-size: 16px; }
.band-dark .trio-item p { color: rgba(255, 255, 255, 0.7); }
@media (max-width: 820px) { .trio { grid-template-columns: 1fr; gap: 24px; } }

/* --------------------------------------------------------------------------
   Shot Lab — the screenshot sits beside the metric grid, because the claim
   ("twenty metrics") and the proof (the screen showing them) belong together.
   -------------------------------------------------------------------------- */

.lab-grid {
  display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr);
  gap: 52px; align-items: start; margin-top: 40px;
}
.lab-shot img {
  width: 100%; border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.34);
}
.lab-shot figcaption {
  font-family: var(--data); font-size: 10.5px; letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.55); margin-top: 12px; text-transform: uppercase;
}

/* Four groups in the app's own order and colours, so the coding explains itself:
   distance, flight, ball and spin, club and impact. */
.lab-metrics { align-self: center; }
.mgroup {
  display: grid; grid-template-columns: 104px minmax(0, 1fr);
  gap: 14px; align-items: start;
  padding: 15px 0; border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.m-dist   { --c: var(--jade); }
.m-flight { --c: var(--sky); }
.m-ball   { --c: var(--pink); }
.m-club   { --c: var(--pop); }
.mgroup-key {
  font-family: var(--data); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--c); padding-top: 6px;
}
.mgroup ul { list-style: none; display: flex; flex-wrap: wrap; gap: 7px; }
.mgroup li {
  font-family: var(--data); font-size: 11.5px; letter-spacing: 0.03em;
  color: #fff; padding: 5px 11px; border-radius: 8px;
  border: 1px solid var(--c); background: rgba(255, 255, 255, 0.05);
}

.lab-note { color: rgba(255, 255, 255, 0.62); font-size: 15px; max-width: 52ch;
  margin-top: 22px; }

@media (max-width: 780px) {
  .lab-grid { grid-template-columns: 1fr; gap: 30px; }
  .lab-shot { max-width: 240px; }
}

/* --------------------------------------------------------------------------
   Long-form pages (privacy, disclosures, about)
   -------------------------------------------------------------------------- */

.page-head { background: var(--fairway); color: #fff; padding: 62px 0 54px; }
.page-head h1 { font-family: var(--display); font-weight: 800;
  font-size: clamp(34px, 5vw, 50px); letter-spacing: -0.03em; color: #fff; }
.page-head p { color: rgba(255, 255, 255, 0.66); margin-top: 12px; font-size: 17px; }

.prose { padding: 56px 0 90px; }
.prose h2 { font-family: var(--display); font-size: 25px; font-weight: 800;
  letter-spacing: -0.02em; margin: 44px 0 12px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-family: var(--display); font-size: 19px; font-weight: 800;
  letter-spacing: -0.02em; margin: 28px 0 8px; }
.prose p { margin-bottom: 15px; color: #2c3d36; }
.prose ul { margin: 0 0 15px 20px; }
.prose li { margin-bottom: 9px; color: #2c3d36; }
.prose strong { color: var(--ink); font-weight: 650; }
.prose hr { border: none; border-top: 1px solid var(--rule); margin: 44px 0 22px; }
.prose .fine { font-size: 14px; color: var(--ink-soft); }

.note {
  background: #fff; border: 1px solid var(--rule); border-left: 3px solid var(--jade);
  border-radius: 0 12px 12px 0; padding: 18px 20px; margin: 22px 0;
}
.note p:last-child { margin-bottom: 0; }

/* Credits list */
.credit { border-top: 1px solid var(--rule); padding: 18px 0; }
.credit h3 { margin: 0 0 4px; }
.credit .lic { font-family: var(--data); font-size: 11px; color: var(--jade-deep);
  letter-spacing: 0.1em; }
.credit .holder { font-size: 14.5px; color: var(--ink-soft); margin-top: 5px; }
.credit details { margin-top: 10px; }
.credit summary { font-family: var(--data); font-size: 11px; letter-spacing: 0.1em;
  color: var(--ink-soft); cursor: pointer; text-transform: uppercase; }
.credit summary:hover { color: var(--ink); }
.credit .license-text {
  margin-top: 12px; font-size: 12.5px; line-height: 1.6; color: var(--ink-soft);
  white-space: pre-wrap; background: #fff; border: 1px solid var(--rule);
  border-radius: 10px; padding: 15px; max-height: 320px; overflow-y: auto;
}

/* --------------------------------------------------------------------------
   Contact form
   -------------------------------------------------------------------------- */

.form { display: grid; gap: 18px; max-width: 560px; }
.field { display: grid; gap: 7px; }
.field label { font-family: var(--data); font-size: 11px; color: var(--ink-soft);
  letter-spacing: 0.13em; }
.field input, .field select, .field textarea {
  font-family: var(--body); font-size: 16px; color: var(--ink);
  background: #fff; border: 1px solid var(--rule); border-radius: 11px;
  padding: 12px 14px; width: 100%;
}
.field textarea { min-height: 152px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--jade); box-shadow: 0 0 0 3px rgba(34, 192, 117, 0.16);
}
.form-status { font-size: 15px; margin-top: 4px; min-height: 22px; }
.form-status.ok { color: var(--jade-deep); font-weight: 600; }
.form-status.err { color: #b4402c; font-weight: 600; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.contact-alt { display: grid; gap: 14px; margin-top: 14px; }
.contact-alt a { font-weight: 600; }

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

.foot { background: var(--fairway-lo); color: rgba(255, 255, 255, 0.6);
  padding: 54px 0 46px; font-size: 14.5px; }
.foot-top { display: flex; flex-wrap: wrap; gap: 30px 48px;
  justify-content: space-between; align-items: flex-start;
  padding-bottom: 30px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.foot-mark img { height: 15px; width: auto; margin-bottom: 12px; }
.foot-mark p { max-width: 34ch; font-size: 14px; color: rgba(255, 255, 255, 0.5); }
.foot-nav { display: flex; gap: 44px; }
.foot-nav ul { list-style: none; }
.foot-nav li { margin-bottom: 9px; }
.foot-nav a { color: rgba(255, 255, 255, 0.72); text-decoration: none; font-size: 14.5px; }
.foot-nav a:hover { color: #fff; text-decoration: underline; }
.foot-nav .data { color: rgba(255, 255, 255, 0.36); margin-bottom: 13px; }
.foot-fine { padding-top: 26px; font-size: 13px; color: rgba(255, 255, 255, 0.42);
  line-height: 1.6; }
.foot-fine a { color: rgba(255, 255, 255, 0.62); }
.foot-fine p + p { margin-top: 9px; }
@media (max-width: 620px) { .foot-nav { gap: 34px; } }

/* 404 — short page, so the footer is pinned to the bottom of the viewport
   instead of leaving a band of paper under it. Scoped to this page only. */
.page-404 { min-height: 100vh; display: flex; flex-direction: column; }
.page-404 .oops { flex: 1 0 auto; }

.oops { text-align: center; padding: 110px 0 120px; }
.oops h1 { font-family: var(--display); font-size: clamp(44px, 9vw, 84px);
  font-weight: 800; letter-spacing: -0.04em; margin-bottom: 12px; }
.oops p { color: var(--ink-soft); margin-bottom: 30px; font-size: 18px; }
.oops .cta-row { justify-content: center; }