/* Design tokens, typography and layout primitives. Dark is the default theme. */
:root {
  color-scheme: dark;

  --bg: #000000;
  --card: #1C1C1E;
  --card-2: rgba(255, 255, 255, 0.06);
  --card-shadow: none;
  --card-line: transparent;
  --line: rgba(255, 255, 255, 0.09);
  --glass: rgba(255, 255, 255, 0.10);
  --glass-line: rgba(255, 255, 255, 0.14);
  --glass-highlight: rgba(255, 255, 255, 0.16);
  --glass-shadow: 0 0 0 0 transparent;
  --pill: rgba(28, 28, 30, 0.85);
  --pill-line: rgba(255, 255, 255, 0.14);
  --pill-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  --frame: #1C1C1E;
  --frame-line: rgba(255, 255, 255, 0.14);
  --frame-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  --icon-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
  --ring-shadow: 0 20px 48px rgba(0, 0, 0, 0.6);
  --float-shadow: 0 14px 30px rgba(0, 0, 0, 0.55);
  --watch-band: #3A3A3C;
  --watch-line: rgba(255, 255, 255, 0.22);
  --watch-case: #1C1C1E;
  --watch-screen: #000000;
  --watch-crown: #3A3A3C;
  --text: #FFFFFF;
  --text-2: #C7C7CC;
  --text-3: #8E8E93;
  --accent: #FF9F0A;
  --accent-text: #FF9F0A;
  --on-accent: #0A0A0A;
  --accent-soft: rgba(255, 159, 10, 0.16);
  --accent-glow: rgba(255, 159, 10, 0.32);
  --accent-shadow: rgba(255, 159, 10, 0.40);
  --btn-line: rgba(255, 255, 255, 0.22);
  --btn-highlight: rgba(255, 255, 255, 0.30);
  --input-bg: rgba(255, 255, 255, 0.06);
  --input-line: rgba(255, 255, 255, 0.12);

  --radius-xl: 32px;
  --radius-l: 24px;
  --radius-m: 22px;
  --radius-s: 14px;
  --radius-pill: 999px;
  --container: 1120px;
  --gutter: 24px;
  --section-gap: 80px;

  --font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", system-ui, sans-serif;
  --font-display: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", system-ui, sans-serif;
  --transition-color: background-color 150ms ease, color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #F2F2F7;
  --card: #FFFFFF;
  --card-2: #F2F2F7;
  --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06);
  --card-line: rgba(0, 0, 0, 0.05);
  --line: rgba(0, 0, 0, 0.10);
  --glass: #FFFFFF;
  --glass-line: rgba(0, 0, 0, 0.08);
  --glass-highlight: rgba(255, 255, 255, 0.9);
  --glass-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  --pill: rgba(255, 255, 255, 0.85);
  --pill-line: rgba(0, 0, 0, 0.08);
  --pill-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
  --frame: #FFFFFF;
  --frame-line: rgba(0, 0, 0, 0.08);
  --frame-shadow: 0 30px 80px rgba(0, 0, 0, 0.18);
  --icon-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
  --ring-shadow: 0 20px 48px rgba(0, 0, 0, 0.18);
  --float-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
  --watch-band: #D1D1D6;
  --watch-line: rgba(0, 0, 0, 0.25);
  --text: #000000;
  --text-2: #3A3A3C;
  --text-3: #6E6E73;
  --accent: #FF9500;
  --accent-text: #A86200;
  --on-accent: #0A0A0A;
  --accent-soft: rgba(255, 149, 0, 0.14);
  --accent-glow: rgba(255, 149, 0, 0.20);
  --accent-shadow: rgba(255, 149, 0, 0.30);
  --input-bg: #F2F2F7;
  --input-line: rgba(0, 0, 0, 0.10);
}

@media (max-width: 640px) {
  :root {
    --section-gap: 56px;
  }
}

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

/* Anchor targets land below the sticky header. --header-height is set by the header controller; 88px is the single-row height. */
html {
  scroll-padding-top: calc(var(--header-height, 88px) + 16px);
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

main {
  flex: 1 0 auto;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
  }
}

/* Typography */
h1,
h2,
.price__amount {
  font-family: var(--font-display);
  font-weight: 800;
  text-wrap: balance;
}

h1 {
  font-size: clamp(44px, 6vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.03em;
}

h2 {
  font-size: clamp(32px, 4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

h3 {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.2px;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

.overline {
  font-family: var(--font-text);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--accent-text);
}

.lede {
  font-size: 18px;
  color: var(--text-2);
}

/* Focus */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* Keyboard-only "Skip to content" link, off screen until focused */
.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 20;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus-visible {
  transform: none;
}

/* Layout */
.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block-end: var(--section-gap);
}

.section--stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.section__intro {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 640px;
}

/* Theme-specific images: render both, show the one for the active theme. :where() keeps class-level specificity so layout rules can still hide them. */
.theme-light {
  display: none;
}

:where(:root[data-theme="light"]) .theme-dark {
  display: none;
}

:where(:root[data-theme="light"]) .theme-light {
  display: block;
}

/* Themed surfaces animate their color change */
body,
.btn,
.theme-toggle,
.icon-circle,
.tile,
.panel,
.platform,
.device,
.pill,
.faq,
.input,
.select,
.textarea,
.site-nav a,
.site-footer,
.legal-nav a,
.support-card,
.support-card__title,
.legal-summary {
  transition: var(--transition-color);
}