/* ═══════════════════════════════════════════════════════════════
   PaceKit Design System — pk.css
   The single source of truth for pacekit.app styling.
   ═══════════════════════════════════════════════════════════════ */

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { line-height: 1.4; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }
ul, ol { list-style: none; }
h1, h2, h3, h4, h5, h6 { font-weight: 700; }
input, textarea, select { font: inherit; }

/* ── Design Tokens ─────────────────────────────────────────── */
:root {
  /* Color */
  --pk-bg:         #0a0a0b;
  --pk-bg-raised:  rgba(255,255,255,0.04);
  --pk-bg-hover:   rgba(255,255,255,0.06);
  --pk-white:      #ffffff;
  --pk-white-90:   rgba(255,255,255,0.9);
  --pk-white-60:   rgba(255,255,255,0.6);
  --pk-white-40:   rgba(255,255,255,0.4);
  --pk-white-20:   rgba(255,255,255,0.2);
  --pk-white-10:   rgba(255,255,255,0.1);
  --pk-white-05:   rgba(255,255,255,0.05);
  --pk-accent:     #f4c445;
  --pk-accent-hover: #e5b53d;
  --pk-border:     rgba(255,255,255,0.1);
  --pk-border-strong: rgba(255,255,255,0.15);
  --pk-black:      #000000;

  /* Typography */
  --pk-font:       'Helvetica Neue', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --pk-font-serif: 'Georgia', 'Palatino', serif;
  --pk-font-mono:  'SF Mono', 'Menlo', 'Consolas', monospace;

  /* Type Scale — fluid where it matters */
  --pk-text-xs:    0.75rem;    /* 12px */
  --pk-text-sm:    0.875rem;   /* 14px */
  --pk-text-base:  1rem;       /* 16px */
  --pk-text-lg:    1.125rem;   /* 18px */
  --pk-text-xl:    1.25rem;    /* 20px */
  --pk-text-2xl:   1.5rem;     /* 24px */
  --pk-text-3xl:   2rem;       /* 32px */
  --pk-text-4xl:   2.5rem;     /* 40px */
  --pk-text-5xl:   3.5rem;     /* 56px */
  --pk-text-6xl:   6rem;       /* 96px */

  /* Spacing */
  --pk-space-xs:   0.5rem;     /* 8px */
  --pk-space-sm:   0.75rem;    /* 12px */
  --pk-space-md:   1.25rem;    /* 20px */
  --pk-space-lg:   2rem;       /* 32px */
  --pk-space-xl:   2.5rem;     /* 40px */
  --pk-space-2xl:  3.5rem;     /* 56px */
  --pk-space-3xl:  4rem;       /* 64px */

  /* Layout */
  --pk-max-w:      1400px;
  --pk-max-w-narrow: 1024px;
  --pk-max-w-text: 640px;
  --pk-gutter:     1.5rem;
  --pk-radius-sm:  3px;
  --pk-radius-md:  8px;
  --pk-radius-lg:  12px;
  --pk-radius-xl:  16px;

  /* Transitions */
  --pk-ease:       cubic-bezier(0.16, 1, 0.3, 1);
  --pk-duration:   0.2s;
  --pk-duration-md: 0.3s;
  --pk-duration-lg: 0.6s;
}

/* ── Base ──────────────────────────────────────────────────── */
body {
  background: var(--pk-bg);
  color: var(--pk-white);
  font-family: var(--pk-font);
  font-size: var(--pk-text-base);
}

/* ── Typography ────────────────────────────────────────────── */
.pk-display {
  font-size: var(--pk-text-6xl);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.03em;
}
.pk-h1 {
  font-size: var(--pk-text-5xl);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.045em;
}
.pk-h2 {
  font-size: var(--pk-text-4xl);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.045em;
}
.pk-h3 {
  font-size: var(--pk-text-xl);
  font-weight: 700;
  line-height: 1.3;
}
.pk-body-lg {
  font-size: var(--pk-text-2xl);
  line-height: 1.3;
  color: var(--pk-white-60);
}
.pk-body {
  font-size: var(--pk-text-base);
  line-height: 1.5;
  color: var(--pk-white-60);
}
.pk-small {
  font-size: var(--pk-text-sm);
  color: var(--pk-white-40);
}
.pk-eyebrow {
  font-size: var(--pk-text-xs);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--pk-white-40);
}

/* ── Color Utilities ───────────────────────────────────────── */
.pk-accent { color: var(--pk-accent); }
.pk-muted { color: var(--pk-white-60); }
.pk-faint { color: var(--pk-white-40); }
.pk-text-center { text-align: center; }

/* ── Layout ────────────────────────────────────────────────── */
.pk-container {
  width: 100%;
  max-width: var(--pk-max-w);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--pk-gutter);
  padding-right: var(--pk-gutter);
}
.pk-container-narrow {
  width: 100%;
  max-width: var(--pk-max-w-narrow);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--pk-gutter);
  padding-right: var(--pk-gutter);
}
.pk-section {
  padding-top: var(--pk-space-3xl);
  padding-bottom: var(--pk-space-3xl);
}
.pk-section-border {
  border-top: 1px solid var(--pk-border);
}
.pk-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--pk-space-2xl);
  align-items: center;
}
.pk-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--pk-space-xl);
}
.pk-flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ── Buttons ───────────────────────────────────────────────── */
.pk-btn-primary {
  display: inline-block;
  background: var(--pk-accent);
  color: var(--pk-black);
  padding: 14px 32px;
  font-size: var(--pk-text-base);
  font-weight: 600;
  font-family: var(--pk-font);
  border-radius: var(--pk-radius-md);
  border: none;
  cursor: pointer;
  transition: background var(--pk-duration);
}
.pk-btn-primary:hover { background: var(--pk-accent-hover); }

.pk-btn-ghost {
  display: inline-block;
  background: transparent;
  color: var(--pk-white);
  padding: 0.6rem 1.25rem;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--pk-font);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  border: 1px solid var(--pk-white);
  border-radius: var(--pk-radius-sm);
  transition: background var(--pk-duration), color var(--pk-duration);
}
.pk-btn-ghost:hover { background: var(--pk-white); color: var(--pk-bg); }

/* ── Cards ─────────────────────────────────────────────────── */
.pk-card {
  background: var(--pk-bg-raised);
  border: 1px solid var(--pk-border);
  border-radius: var(--pk-radius-lg);
  padding: var(--pk-space-lg);
}
.pk-card:hover { background: var(--pk-bg-hover); }

/* ── Placeholder (for assets not yet created) ──────────────── */
.pk-placeholder {
  background: var(--pk-white-05);
  border: 1px dashed var(--pk-border-strong);
  border-radius: var(--pk-radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pk-white-40);
  font-size: var(--pk-text-xs);
  letter-spacing: 0.05em;
}

/* ── Forms ──────────────────────────────────────────────────── */
.pk-input {
  padding: 0.9rem 1rem;
  font-size: var(--pk-text-base);
  background: var(--pk-bg-hover);
  border: 1px solid var(--pk-border-strong);
  border-radius: var(--pk-radius-md);
  color: var(--pk-white);
  font-family: var(--pk-font);
  outline: none;
  width: 100%;
}
.pk-input::placeholder { color: var(--pk-white-40); }
.pk-input:focus { border-color: var(--pk-accent); }

/* ── Dividers ──────────────────────────────────────────────── */
.pk-divider { border: none; border-top: 1px solid var(--pk-border); }

/* ═══════════════════════════════════════════════════════════════
   COMPONENTS
   ═══════════════════════════════════════════════════════════════ */

/* ── Header ────────────────────────────────────────────────── */
.pk-banner {
  width: 100%;
  background: var(--pk-accent);
  color: var(--pk-black);
  border-bottom: 1px solid var(--pk-black);
  font-size: 0.8rem;
}
.pk-banner-inner {
  max-width: var(--pk-max-w);
  margin: 0 auto;
  padding: 6px var(--pk-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pk-banner-inner .text { flex: 1; text-align: center; }
.pk-banner-inner a { text-decoration: underline; font-weight: 600; color: var(--pk-black); }
.pk-banner-dismiss {
  background: none; border: none; cursor: pointer;
  font-size: var(--pk-text-xs); margin-left: var(--pk-space-sm);
  padding: 0.25rem 0.5rem;
}

.pk-nav {
  background: rgba(10,10,11,0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--pk-border);
}
.pk-nav-inner {
  max-width: var(--pk-max-w);
  margin: 0 auto;
  padding: 0 var(--pk-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 4.5rem;
}
.pk-nav-logo img { height: 1.75rem; display: block; }
.pk-nav-links {
  display: flex; align-items: center;
  gap: var(--pk-space-lg);
  font-size: var(--pk-text-sm); font-weight: 500;
}
.pk-nav-links a { color: var(--pk-white); }
.pk-nav-links a:hover { opacity: 0.7; }

/* ── Hero ──────────────────────────────────────────────────── */
.pk-hero {
  padding: 3rem var(--pk-gutter) var(--pk-space-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
}
.pk-hero-container {
  width: 100%;
  max-width: var(--pk-max-w-narrow);
  margin: 0 auto;
}
.pk-hero h1 {
  font-size: var(--pk-text-6xl);
  font-weight: 700;
  line-height: 0.95;
  color: var(--pk-white);
}
.pk-hero h1 .accent { color: var(--pk-accent); }
.pk-hero .subtitle {
  color: var(--pk-white-60);
  font-size: var(--pk-text-2xl);
  line-height: 1.3;
  margin-top: var(--pk-space-lg);
}
.pk-hero .cta-group {
  margin-top: var(--pk-space-md);
  display: flex; flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}
.pk-hero .disclaimer {
  color: var(--pk-white-40);
  font-size: var(--pk-text-sm);
  margin-top: var(--pk-space-xs);
}
/* Coach floating bubbles — arc layout */
.pk-coach-bubbles-arc {
  display: flex; justify-content: space-between; align-items: flex-end;
  width: 100%; padding: 0; margin-bottom: -1rem;
}
.pk-coach-bubbles-arc .pk-coach-bubble:nth-child(1) { transform: translateY(70px); }
.pk-coach-bubbles-arc .pk-coach-bubble:nth-child(2) { transform: translateY(10px); }
.pk-coach-bubbles-arc .pk-coach-bubble:nth-child(3) { transform: translateY(-40px); }
.pk-coach-bubbles-arc .pk-coach-bubble:nth-child(4) { transform: translateY(-40px); }
.pk-coach-bubbles-arc .pk-coach-bubble:nth-child(5) { transform: translateY(10px); }
.pk-coach-bubbles-arc .pk-coach-bubble:nth-child(6) { transform: translateY(70px); }

.pk-coach-bubble {
  border-radius: 50%; flex: none;
  opacity: 0.55; animation: pk-float 6s ease-in-out infinite;
  pointer-events: none;
  border: 2px solid var(--pk-white-20);
  box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
.pk-coach-bubble img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
}
.pk-coach-bubble img[alt="Raul"] {
  object-position: center 15%;
}
@keyframes pk-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
@media (max-width: 768px) {
  .pk-coach-bubble { display: none; }
}

.pk-hero-devices {
  margin-top: var(--pk-space-md);
  width: 100%;
}
.pk-hero-devices img {
  width: 100%; height: auto;
}

/* ── Featured In / Marquee ─────────────────────────────────── */
.pk-featured {
  padding: var(--pk-space-3xl) var(--pk-gutter);
  overflow: hidden;
}
.pk-featured h2 {
  font-size: var(--pk-text-4xl);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1.2;
  text-align: center;
  margin-bottom: var(--pk-space-xl);
}
.pk-marquee {
  display: flex; gap: var(--pk-space-xl); overflow: hidden;
}
.pk-marquee-track {
  display: flex; gap: var(--pk-space-xl);
  flex: none; min-width: 100%;
  align-items: center;
  justify-content: space-around;
  animation: pk-scroll 20s linear infinite;
}
.pk-marquee-track.reverse { animation-direction: reverse; }
@keyframes pk-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-100% - var(--pk-space-xl))); }
}
.pk-marquee-item {
  width: 10rem; height: 3rem; flex: none;
}

/* ── Social Proof / Rating ─────────────────────────────────── */
.pk-social-proof {
  padding: var(--pk-space-xl) var(--pk-gutter);
  border-top: 1px solid var(--pk-border);
}
.pk-social-proof-inner {
  max-width: var(--pk-max-w); margin: 0 auto;
  display: flex; justify-content: center;
}
.pk-rating-badge {
  display: flex; align-items: center; gap: var(--pk-space-md);
}
.pk-rating-badge .pk-rating-score {
  font-size: var(--pk-text-4xl); font-weight: 800;
}
.pk-rating-badge .pk-rating-stars {
  color: var(--pk-accent); font-size: var(--pk-text-xl); letter-spacing: 2px;
}
.pk-rating-badge .pk-rating-label {
  font-size: var(--pk-text-sm); color: var(--pk-white-40);
}

/* ── Runner Quotes ─────────────────────────────────────────── */
.pk-quotes {
  padding: var(--pk-space-3xl) var(--pk-gutter);
  border-top: 1px solid var(--pk-border);
}
.pk-quotes-container {
  max-width: var(--pk-max-w); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--pk-space-lg);
}
.pk-quote {
  background: var(--pk-bg-raised); border: 1px solid var(--pk-border);
  border-radius: var(--pk-radius-lg); padding: var(--pk-space-lg);
  display: flex; flex-direction: column; justify-content: space-between;
}
.pk-quote-text {
  font-size: var(--pk-text-lg); font-weight: 500; line-height: 1.5;
  color: var(--pk-white); margin-bottom: var(--pk-space-lg);
}
.pk-quote-attr {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: var(--pk-space-md); border-top: 1px solid var(--pk-border);
}
.pk-quote-name { font-size: var(--pk-text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--pk-white-60); }
.pk-quote-race { font-size: var(--pk-text-xs); color: var(--pk-white-40); }

@media (max-width: 768px) {
  .pk-quotes-container { grid-template-columns: 1fr; }
}

/* ── 3-Col Cards ───────────────────────────────────────────── */
.pk-cards-section {
  padding: var(--pk-space-3xl) var(--pk-gutter);
  overflow: hidden;
}
.pk-cards-container {
  width: 100%;
  max-width: var(--pk-max-w);
  margin: 0 auto;
  text-align: center;
}
.pk-cards-container h2 {
  font-size: var(--pk-text-5xl);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1.1;
}
.pk-cards-container .section-sub {
  font-size: var(--pk-text-2xl);
  line-height: 1.3;
  color: var(--pk-white-60);
  max-width: 52rem;
  margin: var(--pk-space-md) auto 0;
}
.pk-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--pk-space-xl);
  max-width: 64rem;
  margin: var(--pk-space-xl) auto 0;
}
.pk-card-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-align: center;
}
.pk-card-image {
  width: 100%;
  max-width: 100%;
  margin: 0 auto 1.5rem;
}
.pk-card-image img {
  width: 100%; height: auto; display: block;
}
.pk-card-stack h3 { font-size: var(--pk-text-lg); font-weight: 700; color: var(--pk-white); margin-bottom: 0.25rem; }
.pk-card-stack p { font-size: var(--pk-text-sm); color: var(--pk-white-40); }
.pk-cards-grid .pk-card {
  background: none; border: none; padding: 0;
}
.pk-cards-grid .pk-card:hover { background: none; }
.pk-cards-grid .pk-card h3 { font-size: var(--pk-text-lg); font-weight: 700; color: var(--pk-white); margin-bottom: 0.25rem; }
.pk-cards-grid .pk-card p { font-size: var(--pk-text-sm); color: var(--pk-white-40); }

/* ── How It Works (4-col steps) ────────────────────────────── */
.pk-how {
  padding: var(--pk-space-3xl) var(--pk-gutter);
  overflow: hidden;
}
.pk-how-container {
  max-width: var(--pk-max-w); margin: 0 auto;
}
.pk-how-container h2 {
  font-size: var(--pk-text-5xl);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1.1;
  margin-bottom: var(--pk-space-xl);
  text-align: center;
}
.pk-how-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: var(--pk-space-lg);
}
.pk-how-step { text-align: center; }
.pk-how-num {
  font-size: var(--pk-text-3xl); font-weight: 800;
  color: var(--pk-accent); margin-bottom: var(--pk-space-sm);
  font-family: 'Barlow Condensed', sans-serif;
}
.pk-how-step h3 {
  font-size: var(--pk-text-lg); font-weight: 700;
  margin-bottom: var(--pk-space-xs);
}
.pk-how-step p {
  font-size: var(--pk-text-sm);
  color: var(--pk-white-40);
  line-height: 1.5;
}

/* ── Newsroom ──────────────────────────────────────────────── */
.pk-news {
  padding: var(--pk-space-3xl) var(--pk-gutter);
  border-top: 1px solid var(--pk-border);
}
.pk-news-container { max-width: var(--pk-max-w); margin: 0 auto; }
.pk-news-header {
  display: flex; justify-content: space-between;
  align-items: center; margin-bottom: var(--pk-space-lg);
}
.pk-news-header h2 { font-size: var(--pk-text-2xl); font-weight: 500; }
.pk-news-arrows { display: flex; gap: 1rem; }
.pk-news-arrows button {
  background: none; border: 1px solid var(--pk-white-20);
  color: var(--pk-white); width: 2.5rem; height: 2.5rem;
  border-radius: 50%; font-size: var(--pk-text-base);
  display: flex; align-items: center; justify-content: center;
}
.pk-news-arrows button:hover { border-color: var(--pk-white); }
.pk-news-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: var(--pk-space-lg);
}
.pk-news-item { display: flex; gap: 1rem; align-items: flex-start; }
.pk-news-thumb {
  flex: none; width: 6rem; height: 4rem;
  border-radius: 4px;
}
.pk-news-item h3 {
  font-size: var(--pk-text-base);
  font-weight: 500;
  line-height: 1.35;
}
.pk-news-dots { display: flex; gap: 0.5rem; margin-top: var(--pk-space-lg); }
.pk-news-dots span {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--pk-white-20);
}
.pk-news-dots span.active { background: var(--pk-white); }

/* ── FAQ ───────────────────────────────────────────────────── */
.pk-faq {
  padding: var(--pk-space-3xl) var(--pk-gutter);
}
.pk-faq-layout {
  display: grid; grid-template-columns: 1fr 1.5fr;
  gap: var(--pk-space-2xl);
  max-width: var(--pk-max-w); margin: 0 auto;
}
.pk-faq-heading h2 {
  font-size: var(--pk-text-4xl); font-weight: 700;
  line-height: 1.2; letter-spacing: -0.03em;
  position: sticky; top: 8rem;
}
.pk-faq-list { display: flex; flex-direction: column; }
.pk-faq-item { border-top: 1px solid rgba(255,255,255,0.12); }
.pk-faq-item:last-child { border-bottom: 1px solid rgba(255,255,255,0.12); }
.pk-faq-question {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--pk-space-md) 0; width: 100%;
  background: none; border: none; color: var(--pk-white);
  font-family: var(--pk-font); font-size: var(--pk-text-lg);
  font-weight: 600; text-align: left;
}
.pk-faq-question .arrow {
  font-size: var(--pk-text-xl); color: var(--pk-accent);
  flex: none; transition: transform var(--pk-duration-md);
}
.pk-faq-item.is-open .pk-faq-question .arrow { transform: rotate(180deg); }
.pk-faq-answer {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--pk-duration-md) ease;
}
.pk-faq-item.is-open .pk-faq-answer { grid-template-rows: 1fr; }
.pk-faq-answer-inner { overflow: hidden; }
.pk-faq-answer p {
  padding-bottom: var(--pk-space-md);
  font-size: var(--pk-text-base);
  color: var(--pk-white-60);
  line-height: 1.6;
}

/* ── Course Intelligence ───────────────────────────────────── */
.pk-intel {
  padding: var(--pk-space-3xl) var(--pk-gutter);
  border-top: 1px solid var(--pk-border);
}
.pk-intel-container { max-width: var(--pk-max-w); margin: 0 auto; }
.pk-intel-container h2 {
  font-size: var(--pk-text-5xl); font-weight: 700;
  letter-spacing: -0.045em; line-height: 1.1;
  margin-bottom: var(--pk-space-md);
}
.pk-intel-container .section-sub {
  font-size: var(--pk-text-xl); color: var(--pk-white-60);
  line-height: 1.5; max-width: 48rem;
  margin-bottom: var(--pk-space-xl);
}
.pk-intel-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: var(--pk-space-lg);
}
.pk-intel-card {
  background: var(--pk-bg-raised);
  border: 1px solid var(--pk-border);
  border-radius: var(--pk-radius-lg);
  padding: var(--pk-space-lg);
}
.pk-intel-card-image {
  width: 100%; aspect-ratio: 4/3; overflow: hidden;
  margin-bottom: var(--pk-space-md); border-radius: var(--pk-radius-md);
}
.pk-intel-card-image img {
  width: 100%; height: 100%; object-fit: cover; display: block; object-position: center 70%;
}
.pk-intel-card:nth-child(2) .pk-intel-card-image img,
.pk-intel-card:nth-child(3) .pk-intel-card-image img {
  object-position: center center;
}
.pk-intel-card h3 {
  font-size: var(--pk-text-xl); font-weight: 700;
  margin-bottom: var(--pk-space-sm);
}
.pk-intel-card p {
  font-size: 0.95rem; color: var(--pk-white-60); line-height: 1.5;
}

/* ── Email Signup ──────────────────────────────────────────── */
.pk-signup {
  padding: var(--pk-space-3xl) var(--pk-gutter);
}
.pk-signup-card {
  max-width: var(--pk-max-w); margin: 0 auto;
  background: var(--pk-bg-raised);
  border: 1px solid var(--pk-border);
  border-radius: var(--pk-radius-xl);
  padding: var(--pk-space-xl);
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--pk-space-xl); align-items: center;
}
.pk-signup-card h2 {
  font-size: var(--pk-text-3xl); font-weight: 700; line-height: 1.2;
}
.pk-signup-card .sub {
  font-size: var(--pk-text-sm); color: var(--pk-white-40);
  margin-top: var(--pk-space-sm);
}
.pk-signup-form { display: flex; gap: var(--pk-space-sm); }
.pk-signup-form input { flex: 1; }
.pk-signup-form button {
  padding: 0.9rem 2rem;
  font-size: var(--pk-text-base); font-weight: 600;
  background: var(--pk-accent); color: var(--pk-black);
  border: none; border-radius: var(--pk-radius-md);
  font-family: var(--pk-font); white-space: nowrap;
}
.pk-signup-form button:hover { background: var(--pk-accent-hover); }

/* ── CTA ───────────────────────────────────────────────────── */
.pk-cta {
  padding: var(--pk-space-3xl) var(--pk-gutter);
  border-top: 1px solid var(--pk-border);
}
.pk-cta-layout {
  max-width: var(--pk-max-w); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--pk-space-2xl); align-items: center;
}
.pk-cta-content h2 {
  font-size: var(--pk-text-5xl); font-weight: 700;
  letter-spacing: -0.045em; line-height: 1.1;
}
.pk-cta-content h2 .accent { color: var(--pk-accent); }
.pk-cta-content .cta-sub {
  font-size: var(--pk-text-lg); color: var(--pk-white-60);
  line-height: 1.5; margin-top: var(--pk-space-md);
  max-width: 32rem;
}
.pk-cta-content .cta-buttons { margin-top: var(--pk-space-lg); }
.pk-cta-content .disclaimer {
  color: var(--pk-white-40); font-size: var(--pk-text-sm);
  margin-top: var(--pk-space-sm);
}

/* Data feed visual */
.pk-cta-visual-side { }
.pk-cta-image-wrap {
  position: relative; border-radius: var(--pk-radius-lg); overflow: hidden;
}
.pk-cta-image-wrap > img {
  width: 100%; height: auto; display: block;
}
.pk-data-feed {
  display: flex; gap: 0.5rem; flex-wrap: nowrap;
  margin-bottom: 0.75rem; overflow-x: auto;
}
.pk-data-tag {
  font-size: 10px; font-weight: 500;
  color: var(--pk-white-60);
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 100px; padding: 0.3rem 0.7rem;
  white-space: nowrap;
}

/* Coaching callout bubble */
.pk-coaching-callout {
  position: absolute; bottom: 1.25rem; left: 1.25rem; right: 1.25rem;
  background: rgba(0,0,0,0.65); backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.15); border-radius: 12px;
  padding: 1rem 1.25rem; text-align: left;
}
.pk-callout-meta {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 0.5rem;
}
.pk-callout-mile {
  font-size: 12px; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--pk-white-60); font-weight: 500;
}
.pk-callout-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--pk-accent);
  animation: pk-pulse 1.6s ease-in-out infinite;
}
@keyframes pk-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
.pk-callout-label {
  font-size: 13px; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--pk-white); font-weight: 700;
}
.pk-callout-text {
  font-size: var(--pk-text-base); line-height: 1.5;
  color: var(--pk-white-90); font-weight: 400;
}

/* ── Footer ────────────────────────────────────────────────── */
.pk-footer {
  border-top: 1px solid var(--pk-border);
  padding: var(--pk-space-2xl) var(--pk-gutter) var(--pk-space-lg);
}
.pk-footer-inner {
  max-width: var(--pk-max-w); margin: 0 auto;
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: var(--pk-space-xl);
}
.pk-footer-brand img { height: 1.5rem; margin-bottom: 0.5rem; }
.pk-footer-slogan {
  font-size: var(--pk-text-sm); color: var(--pk-white-40);
  font-style: italic; margin-bottom: 1rem;
}
.pk-footer-brand .rating {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: var(--pk-text-sm); margin-bottom: 0.5rem;
}
.pk-footer-brand .rating .stars { color: var(--pk-accent); }
.pk-footer-brand .source {
  font-size: var(--pk-text-xs); color: var(--pk-white-40);
}
.pk-footer-col h4 {
  font-size: var(--pk-text-sm); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  margin-bottom: 1rem;
}
.pk-footer-col li { margin-bottom: 0.5rem; }
.pk-footer-col a { font-size: var(--pk-text-sm); color: var(--pk-white-60); }
.pk-footer-col a:hover { color: var(--pk-white); }
.pk-footer-bottom {
  max-width: var(--pk-max-w); margin: var(--pk-space-xl) auto 0;
  padding-top: var(--pk-space-md);
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: var(--pk-text-xs); color: var(--pk-white-40);
  display: flex; justify-content: space-between; align-items: center;
}
.pk-footer-bottom a { color: var(--pk-white-40); }
.pk-footer-bottom a:hover { color: var(--pk-white); }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  :root {
    --pk-text-6xl: 4rem;
    --pk-text-5xl: 2.5rem;
    --pk-text-4xl: 2rem;
  }
}

@media (max-width: 768px) {
  :root {
    --pk-text-6xl: 2.75rem;
    --pk-text-5xl: 2rem;
    --pk-text-4xl: 1.75rem;
    --pk-text-2xl: 1.1rem;
    --pk-space-3xl: 3rem;
  }
  .pk-hero { padding-top: 4rem; }
  .pk-nav-links { display: none; }
  .pk-grid-2, .pk-grid-3 { grid-template-columns: 1fr; }
  .pk-cards-grid { grid-template-columns: 1fr; max-width: 20rem; }
  .pk-how-grid { grid-template-columns: 1fr 1fr; }
  .pk-news-grid { grid-template-columns: 1fr; }
  .pk-faq-layout { grid-template-columns: 1fr; gap: var(--pk-space-lg); }
  .pk-faq-heading h2 { position: static; }
  .pk-intel-grid { grid-template-columns: 1fr; }
  .pk-signup-card { grid-template-columns: 1fr; padding: var(--pk-space-lg); }
  .pk-signup-form { flex-direction: column; }
  .pk-cta-layout { grid-template-columns: 1fr; }
  .pk-footer-inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  :root {
    --pk-text-6xl: 2.25rem;
    --pk-text-5xl: 1.75rem;
    --pk-gutter: 1rem;
  }
  .pk-footer-inner { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   THEMES — toggle by adding class to <body>
   Default is the current clean dark. These add character.
   ═══════════════════════════════════════════════════════════════ */

/* ── B: Raw Dark ─────────────────────────────────────────────
   Space Grotesk headings — geometric, precise, engineered.
   Inter body — clean, legible, professional.
   Pure black. Restrained grunge. Confidence, not fun.
   ─────────────────────────────────────────────────────────── */
body.theme-raw {
  --pk-bg: #050505;
  --pk-bg-raised: rgba(255,255,255,0.025);
  --pk-font: 'Inter', -apple-system, sans-serif;
  letter-spacing: -0.04em;
  --pk-white: #e8e8e8;
  --pk-white-90: rgba(232,232,232,0.9);
  --pk-white-60: rgba(255,255,255,0.5);
  --pk-white-40: rgba(255,255,255,0.28);
  --pk-border: rgba(255,255,255,0.08);
  --pk-border-strong: rgba(255,255,255,0.12);
  --pk-accent: #f4c445;
  --pk-accent-hover: #e5b53d;
  --pk-radius-sm: 0;
  --pk-radius-md: 0;
  --pk-radius-lg: 2px;
  --pk-radius-xl: 2px;
  --pk-text-6xl: 6.5rem;
  --pk-text-5xl: 4rem;
}
body.theme-raw .pk-hero h1 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800; letter-spacing: -0.02em; text-transform: uppercase;
  line-height: 0.85;
}
body.theme-raw h2 {
  font-family: 'Libre Franklin', sans-serif;
  font-weight: 700; letter-spacing: -0.035em; text-transform: none;
}
body.theme-raw h3 {
  font-family: 'Libre Franklin', sans-serif;
  font-weight: 600; text-transform: none; letter-spacing: -0.02em;
}
body.theme-raw {
  --pk-text-6xl: 7.5rem;
  --pk-text-5xl: 3.5rem;
}
body.theme-raw .pk-hero .subtitle {
  font-size: 1.25rem; font-weight: 400; letter-spacing: -0.01em;
}
body.theme-raw::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9999;
  background: url('../assets/Texturelabs_Grunge_338M.jpg') center/cover;
  mix-blend-mode: overlay; opacity: 0.05;
}
body.theme-raw .pk-btn-primary {
  border-radius: 0; text-transform: uppercase; letter-spacing: 0.12em;
  font-family: 'Inter', sans-serif; font-weight: 600; font-size: 13px;
}
body.theme-raw .pk-faq-question { font-weight: 500; }
body.theme-raw .pk-why-tab-num {
  font-family: 'Barlow Condensed', sans-serif;
}
@media (max-width: 768px) {
  body.theme-raw { --pk-text-6xl: 3.25rem; --pk-text-5xl: 2.5rem; }
}