/* Padel X — brand-stub landing + legal. Brand tokens from docs/brandbook (01-identity). */

@font-face { font-family: "Instrument Serif"; src: url("fonts/InstrumentSerif-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("fonts/InstrumentSerif-Italic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Pretendard"; src: url("fonts/Pretendard-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Pretendard"; src: url("fonts/Pretendard-SemiBold.otf") format("opentype"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  --lime: #C8FF3D;
  --ink: #141412;
  --paper: #FFFFFF;
  --ink-64: rgba(20, 20, 18, 0.64);
  --ink-40: rgba(20, 20, 18, 0.40);
  --ink-12: rgba(20, 20, 18, 0.12);
  --serif: "Instrument Serif", Georgia, serif;
  --sans: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: var(--sans); color: var(--ink); background: var(--paper); line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: inherit; }
img { display: block; max-width: 100%; }
::selection { background: var(--lime); color: var(--ink); }

/* ---------- Single-block stage ---------- */
.stage {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: clamp(14px, 2.2vh, 26px);
  padding: clamp(28px, 5vh, 56px) 24px;
  position: relative;
  overflow: hidden;
}
/* one soft lime breath behind it all — the single accent */
.stage::before {
  content: "";
  position: absolute;
  top: -22%;
  left: 50%;
  width: min(820px, 120vw);
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(200, 255, 61, 0.30), rgba(200, 255, 61, 0) 62%);
  pointer-events: none;
  z-index: 0;
}
.stage > * { position: relative; z-index: 1; }

.wordmark { height: clamp(26px, 3.4vh, 32px); width: auto; }

.headline {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(32px, 5.2vw, 58px);
  line-height: 1.0;
  letter-spacing: -0.022em;
  margin-top: clamp(4px, 1vh, 12px);
}
.headline em { font-style: italic; }

.lead {
  font-size: clamp(15px, 1.7vw, 18px);
  color: var(--ink-64);
  max-width: 42ch;
}

/* ---------- iPhone mockup (founder-supplied device image, frame baked in) ---------- */
.device {
  /* fit within a box, ALWAYS keep aspect (no distortion), never oversized */
  width: auto;
  height: auto;
  max-height: min(56vh, 540px);
  max-width: 280px;
  margin: clamp(4px, 1vh, 14px) 0;
  filter: drop-shadow(0 38px 56px rgba(20, 20, 18, 0.26));
}

/* ---------- App Store badge (placeholder link) ---------- */
.appstore {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  background: var(--ink);
  color: var(--paper);
  padding: 11px 22px 11px 18px;
  border-radius: 14px;
  text-decoration: none;
  transition: transform 0.16s var(--ease-out), background 0.2s ease;
}
.appstore:hover { background: #2a2a26; }
.appstore:active { transform: scale(0.97); }
.appstore svg { flex: none; }
.appstore-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.05; }
.appstore .small { font-size: 11px; letter-spacing: 0.01em; opacity: 0.82; }
.appstore .big { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }

/* ---------- Legal links + copyright ---------- */
.legal-links { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 600; margin-top: clamp(4px, 1vh, 10px); }
.legal-links a { color: var(--ink-64); text-decoration: none; transition: color 0.2s ease; }
.legal-links a:hover { color: var(--ink); }
.legal-links .sep { color: var(--ink-40); }
.copy { font-size: 12px; color: var(--ink-40); }

/* ---------- Legal pages (privacy.html / terms.html share this stylesheet) ---------- */
.wrap { max-width: 720px; margin: 0 auto; padding: 0 24px; }
.legal { padding: clamp(48px, 6vw, 72px) 0 clamp(64px, 8vw, 96px); }
.legal h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 6vw, 60px); letter-spacing: -0.02em; margin-bottom: 6px; }
.legal .updated { color: var(--ink-64); font-size: 15px; margin-bottom: 40px; }
.legal h2 { font-family: var(--serif); font-weight: 400; font-size: 25px; margin: 36px 0 10px; letter-spacing: -0.01em; }
.legal p, .legal li { font-size: 16px; color: #2a2a28; margin-bottom: 12px; }
.legal ul { padding-left: 22px; }
.legal a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 2px; }
.legal .back { display: inline-block; margin-bottom: 32px; font-weight: 600; color: var(--ink-64); text-decoration: none; }
.legal .back:hover { color: var(--ink); }

@media (prefers-reduced-motion: reduce) { .appstore { transition: none; } }

@media (max-width: 480px) {
  .headline { font-size: clamp(30px, 8.4vw, 40px); }
  .device { max-height: 48vh; max-width: 72vw; }
}