/* PRforCyber landing — styles from the Claude Design export (tokens + UI kit components). */

/* ---------- Tokens: colors ---------- */
:root {
  /* Signal cyan — the brand accent */
  --cyan-200: #B8FAF6;
  --cyan-300: #8FEBE5;
  --cyan-400: #33EDE3;
  --cyan-500: #00E3D8;
  --cyan-600: #00BDB4;
  --cyan-700: #00807A;
  --cyan-800: #00524E;

  /* Ink + deep teal — dark surfaces */
  --ink-0: #000000;
  --ink-50: #02080A;
  --abyss-900: #041A20;
  --teal-900: #062830;
  --teal-800: #0A3440;
  --teal-700: #0F4E62;
  --teal-600: #17667D;

  /* Mint + slate — light surfaces */
  --mint-50: #F0FFFD;
  --mint-100: #DDF7F4;
  --mint-200: #C4EDE9;
  --slate-400: #9FB2BB;

  /* Neutrals */
  --white: #FFFFFF;
  --grey-200: #C9D6D9;
  --grey-400: #8BA0A5;
  --ink-text: #031418;

  /* Status (use sparingly, forms only) */
  --amber-400: #FFB547;
  --red-400: #FF6B6B;

  /* Semantic: surfaces */
  --bg-page: var(--ink-0);
  --bg-section-deep: var(--abyss-900);
  --bg-light: var(--mint-50);
  --bg-slate: var(--slate-400);
  --surface-panel: var(--ink-0);
  --surface-card: var(--teal-900);
  --surface-card-raised: var(--teal-800);
  --surface-accent: var(--cyan-500);

  /* Semantic: text */
  --text-primary: var(--white);
  --text-secondary: var(--grey-200);
  --text-muted: var(--grey-400);
  --text-accent: var(--cyan-500);
  --text-on-accent: #03262D;
  --text-on-light: var(--ink-text);
  --text-accent-on-light: var(--cyan-700);

  /* Semantic: lines */
  --border-subtle: var(--teal-700);
  --border-strong: var(--teal-600);
  --border-accent: var(--cyan-500);
  --rule: var(--cyan-300);
  --rule-on-light: var(--teal-900);

  /* Gradients */
  --gradient-section: linear-gradient(135deg, #062830 0%, #041A20 45%, #02080A 100%);
  --gradient-fade-dark: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 100%);
}

/* ---------- Tokens: effects ---------- */
:root {
  --shadow-none: none;
  --glow-accent: 0 0 0 1px var(--cyan-500), 0 0 24px rgba(0, 227, 216, 0.22);
  --focus-ring: 0 0 0 2px #000, 0 0 0 4px var(--cyan-500);

  --pattern-dots: radial-gradient(circle, rgba(23, 102, 125, 0.6) 2px, transparent 2.5px);
  --pattern-dots-size: 57px 57px;
  --pattern-dots-light: radial-gradient(circle, rgba(0, 128, 122, 0.12) 2px, transparent 2.5px);

  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;
}

/* ---------- Tokens: spacing ---------- */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  --container: 1040px;
  --container-narrow: 720px;
  --gutter: 24px;

  --radius-button: 3px;
  --radius-sm: 8px;
  --radius-card: 12px;
  --radius-panel: 16px;
  --radius-pill: 999px;

  --border-w: 1.5px;
  --rule-w: 1.5px;
}

/* ---------- Tokens: typography ---------- */
:root {
  --font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-display: 64px;
  --fs-h1: 52px;
  --fs-h2: 44px;
  --fs-h3: 32px;
  --fs-h4: 24px;
  --fs-h5: 20px;
  --fs-body-lg: 18px;
  --fs-body: 16px;
  --fs-sm: 14px;
  --fs-xs: 12px;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-body: 1.5;

  --tracking-display: -0.02em;
  --tracking-heading: -0.035em;
  --tracking-normal: 0;
  --tracking-label: 0.02em;
  --tracking-caps: 0.04em;

  --type-hero: var(--fw-bold) var(--fs-display)/var(--lh-tight) var(--font-sans);
  --type-section: var(--fw-regular) var(--fs-h2)/var(--lh-snug) var(--font-sans);
  --type-body: var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-sans);
}

/* ---------- Base ---------- */
body { margin: 0; background: #000; }
a:not([class]) { color: var(--cyan-500); }
a:not([class]):hover { color: var(--cyan-400); }

.page { font-family: var(--font-sans); color: #fff; background: #000; }
.page--full { min-height: 100vh; }

.wrap { max-width: 1040px; margin: 0 auto; padding: 0 24px; box-sizing: border-box; }
.wrap--narrow { max-width: 640px; }

.mono-line { font-family: var(--font-mono); color: var(--cyan-300); }

/* ---------- Glyph ---------- */
.glyph { display: block; flex-shrink: 0; }

/* ---------- Wordmark ---------- */
.wordmark { font-family: var(--font-sans); font-size: 20px; font-weight: 400; letter-spacing: -0.02em; color: var(--text-primary); line-height: 1; white-space: nowrap; }
.wordmark span { color: var(--text-accent); }
.wordmark--18 { font-size: 18px; }
.wordmark--22 { font-size: 22px; }
.wordmark-link { text-decoration: none; }

/* ---------- Button ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-sans); font-weight: 700; letter-spacing: var(--tracking-label); line-height: 1.2;
  border-radius: var(--radius-button); cursor: pointer; text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast), transform var(--dur-fast);
  transform: none; opacity: 1;
  padding: 11px 32px; font-size: 15px;
}
.btn:active { transform: translateY(1px); }
.btn--sm { padding: 8px 20px; font-size: 14px; }
.btn--lg { padding: 14px 40px; font-size: 17px; }

.btn--primary { background: var(--cyan-500); color: var(--text-on-accent); border: var(--border-w) solid var(--cyan-500); }
.btn--primary:hover { background: var(--cyan-400); border-color: var(--cyan-400); }
.btn--outline { background: transparent; color: var(--text-primary); border: var(--border-w) solid var(--cyan-500); }
.btn--outline:hover { background: rgba(0,227,216,0.12); }
.btn--dark { background: var(--ink-0); color: var(--text-primary); border: var(--border-w) solid var(--cyan-500); }
.btn--dark:hover { background: var(--teal-900); }

/* ---------- Eyebrow ---------- */
.eyebrow { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: var(--rule-w) solid var(--rule); }
.eyebrow span { font-family: var(--font-sans); font-size: 16px; line-height: 1.2; color: var(--cyan-300); }
.eyebrow--light { border-bottom-color: var(--rule-on-light); }
.eyebrow--light span { color: var(--text-on-light); }

/* ---------- Card ---------- */
.card { color: var(--text-primary); box-sizing: border-box; padding: 32px; }
.card--panel { background: var(--surface-panel); border: var(--border-w) solid var(--border-subtle); border-radius: var(--radius-panel); }
.card--teal { background: var(--surface-card); border: var(--border-w) solid var(--border-subtle); border-radius: var(--radius-card); }
.card--quote { background: var(--ink-0); border: var(--border-w) solid var(--border-accent); border-radius: var(--radius-card); }
.card--pad-48 { padding: 48px; }

/* ---------- MetricRow ---------- */
.metric { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0; border-bottom: var(--rule-w) solid var(--rule); }
.metric--last { border-bottom: none; }
.metric__label { font-size: 16px; line-height: 1.3; color: var(--text-primary); }
.metric__value { font-size: 16px; line-height: 1.3; color: var(--text-accent); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- FeatureCard ---------- */
.feature { padding: 24px 24px 28px; display: flex; flex-direction: column; }
.feature__num { font-size: 40px; line-height: 1; color: var(--text-accent); letter-spacing: -0.02em; margin-bottom: 20px; }
.feature__title { font-size: 20px; line-height: 1.3; letter-spacing: 0; color: var(--text-primary); padding-bottom: 14px; border-bottom: var(--rule-w) solid var(--rule); text-wrap: balance; }
.feature__title--accent { font-size: 32px; line-height: 1.15; letter-spacing: -0.03em; color: var(--text-accent); }
.feature__body { font-size: 16px; line-height: 1.45; color: var(--text-secondary); margin-top: 14px; text-wrap: pretty; }
.feature__metrics { margin-top: 16px; }

/* ---------- StatItem ---------- */
.stat { display: flex; flex-direction: column; gap: 16px; }
.stat__top { display: flex; align-items: center; gap: 10px; }
.stat__value { font-size: 36px; line-height: 1; letter-spacing: -0.03em; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.stat__label { font-size: 16px; line-height: 1.3; color: var(--text-secondary); }

/* ---------- CheckItem ---------- */
.check { display: flex; gap: 16px; align-items: flex-start; padding: 24px 24px; background: var(--surface-card); border: var(--border-w) solid var(--border-accent); border-radius: var(--radius-card); }
.check .glyph { margin-top: -2px; }
.check__text { font-size: 18px; line-height: 1.5; color: var(--text-primary); text-wrap: pretty; }

/* ---------- DashItem ---------- */
.dash { display: flex; gap: 28px; align-items: flex-start; }
.dash .glyph { margin-top: -3px; }
.dash__text { font-size: 17px; line-height: 1.5; color: var(--text-primary); text-wrap: pretty; }

/* ---------- QuoteBlock ---------- */
.quote { padding: 36px 48px; text-align: center; }
.quote p { margin: 0; font-size: 30px; line-height: 1.35; letter-spacing: -0.015em; color: var(--text-primary); text-wrap: balance; }

/* ---------- SectionHeader ---------- */
.sh { display: flex; flex-direction: column; gap: 24px; }
.sh__title { margin: 0; font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-h2); line-height: 1.12; letter-spacing: var(--tracking-heading); color: var(--text-primary); text-wrap: balance; }
.sh__lede { margin: 0; font-size: 18px; line-height: 1.5; max-width: 640px; color: var(--text-secondary); text-wrap: pretty; }
.sh--light .sh__title, .sh--light .sh__lede { color: var(--text-on-light); }

/* ---------- NavBar ---------- */
.nav-sticky { position: sticky; top: 0; z-index: 10; }
.nav { display: flex; align-items: center; gap: 48px; height: 68px; padding: 0 32px; background: var(--ink-0); border-bottom: 1px solid var(--teal-700); }
.nav__items { display: flex; gap: 40px; flex: 1; height: 100%; }
.nav__link { display: flex; align-items: center; font-size: 15px; font-weight: 700; letter-spacing: var(--tracking-label); text-decoration: none; color: var(--grey-200); box-shadow: none; transition: color var(--dur-fast); }
.nav__link:hover { color: var(--white); }
.nav__link.is-active { color: var(--text-accent); box-shadow: inset 0 -2px 0 var(--cyan-500); }

/* ---------- One-pager sections ---------- */
.dots-dark { background: var(--pattern-dots) 0 0/57px 57px, var(--gradient-section); }
.sec-72 { padding: 72px 0; }

.hero { background: #000; padding: 40px 0 72px; }
.hero__title { margin: 44px 0 28px; font-size: 64px; font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; }
.hero__title span { color: var(--cyan-500); }
.hero__lede { margin: 0; font-size: 18px; line-height: 1.5; max-width: 580px; color: var(--text-secondary); }
.hero__ctas { display: flex; gap: 16px; margin-top: 36px; }
.hero__stats { display: grid; grid-template-columns: repeat(auto-fit,minmax(140px,1fr)); gap: 32px; margin-top: 64px; padding-top: 40px; border-top: var(--rule-w) solid var(--rule); }

.grid { display: grid; }
.grid--260 { grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: 24px; margin-top: 24px; }
.grid--240-20 { grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: 20px; margin-top: 32px; }
.grid--240-24 { grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: 24px; margin-top: 40px; }

.programme { background: var(--slate-400); }
.programme__meta { margin-top: 24px; font-size: 15px; }
.programme__note { margin-top: 28px; font-size: 14px; line-height: 1.5; color: var(--text-muted); max-width: 640px; }

.how { background: #000; }
.how__rows { display: flex; flex-direction: column; gap: 0; margin-top: 40px; }
.how__row { display: grid; grid-template-columns: 160px 1fr; gap: 24px; padding: 28px 0; border-top: var(--rule-w) solid var(--rule); }
.how__row:first-child { border-top: none; }
.how__week { font-family: var(--font-mono); font-size: 14px; color: var(--cyan-500); }
.how__title { font-size: 22px; margin-bottom: 8px; }
.how__body { font-size: 16px; line-height: 1.5; color: var(--text-secondary); max-width: 640px; }

.included { background: var(--pattern-dots-light) 0 0/57px 57px, var(--mint-50); }
.included__grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(300px,1fr)); gap: 48px; align-items: start; }
.included__list { display: flex; flex-direction: column; gap: 12px; }

.investment { background: #000; }
.price-card { padding: 40px; border-radius: 24px; margin-top: 40px; }
.price-card__name { font-size: 28px; letter-spacing: -0.02em; margin-bottom: 8px; }
.price-card__price { display: flex; align-items: baseline; gap: 12px; margin: 20px 0 4px; }
.price-card__price span { font-size: 48px; color: var(--cyan-500); letter-spacing: -0.03em; }
.price-card__meta { font-size: 15px; margin-bottom: 28px; }
.price-card__note { margin-top: 24px; font-size: 15px; color: var(--text-secondary); }
.price-card__example { margin-top: 24px; padding: 20px; background: var(--ink-0); border: var(--border-w) solid var(--border-accent); border-radius: 12px; font-size: 15px; line-height: 1.6; color: var(--text-secondary); }
.price-card__example span { color: var(--cyan-500); }

.results { background: var(--gradient-section); }
.results__list { display: flex; flex-direction: column; gap: 24px; margin-top: 36px; }
.results__quote { margin-top: 48px; }
.results__ctas { display: flex; gap: 16px; justify-content: center; margin-top: 32px; }

.teaser { background: var(--mint-50); padding: 64px 0; }
.teaser .wrap { text-align: center; }
.teaser__title { margin: 0 0 16px; font-family: var(--font-sans); font-weight: 400; font-size: 36px; letter-spacing: var(--tracking-heading); color: var(--text-on-light); }
.teaser__text { margin: 0 auto 28px; max-width: 520px; font-size: 17px; line-height: 1.5; color: var(--text-on-light); }

.site-footer { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; padding: 36px 32px 56px; background: #000; }
.site-footer__links { display: flex; gap: 24px; align-items: center; font-size: 15px; }
.site-footer__email { color: var(--text-primary); text-decoration: none; border-bottom: 1.5px solid var(--white); padding-bottom: 4px; }
.site-footer__cta { color: var(--cyan-500); text-decoration: none; font-weight: 700; }

/* ---------- Waitlist page ---------- */
.wl-nav { display: flex; align-items: center; justify-content: space-between; height: 68px; padding: 0 32px; border-bottom: 1px solid var(--teal-700); }
.wl-nav__back { color: var(--grey-200); font-size: 15px; font-weight: 700; text-decoration: none; }
.wl-main { padding: 72px 0 96px; }
.wl-title { margin: 36px 0 16px; font-size: 44px; font-weight: 400; line-height: 1.12; letter-spacing: var(--tracking-heading); }
.wl-intro { margin: 0 0 12px; font-size: 17px; line-height: 1.55; color: var(--text-secondary); }
.wl-summary { margin: 28px 0 40px; padding: 16px 20px; background: var(--surface-card); border: var(--border-w) solid var(--border-subtle); border-radius: var(--radius-card); font-size: 14px; }

.wl-form { display: flex; flex-direction: column; gap: 20px; }
.wl-form .btn { margin-top: 8px; }
.field { display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--text-secondary); }
.input { font: inherit; font-size: 16px; color: var(--text-primary); background: var(--teal-900); border: var(--border-w) solid var(--border-subtle); border-radius: var(--radius-sm); padding: 12px 14px; outline: none; }
textarea.input { resize: vertical; font-family: var(--font-sans); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { display: flex; align-items: center; gap: 8px; font-size: 14px; padding: 8px 14px; border-radius: 999px; border: var(--border-w) solid var(--border-subtle); background: transparent; cursor: pointer; color: var(--text-primary); }
.chip input { accent-color: var(--cyan-500); }
.chip.is-on, .chip:has(input:checked) { border-color: var(--cyan-500); background: rgba(0,227,216,0.12); }
.hidden { display: none; }

.wl-footer { display: flex; align-items: center; gap: 24px; padding: 24px 32px 48px; border-top: 1px solid var(--teal-700); }
.wl-footer a { color: var(--grey-200); font-size: 14px; text-decoration: none; }