/* ============================================================
   GALLEY — landing page styles
   ============================================================ */

:root {
  --bg:           #FAFAF7;
  --bg-subtle:    #F2F1EC;
  --accent:       #0EA5E9;   /* decorative: borders, soft-bg, focus rings */
  --accent-hover: #0369A1;  /* interactive: btn bg, link/pill text — white 5.93:1 */
  --accent-soft:  #E0F2FE;
  --text-primary: #1A1A18;
  --text-muted:   #636260;  /* 5.39:1 on --bg-subtle */
  --text-subtle:  #636260;  /* darkened from #9A9A92 which failed AA */
  --border:       #E4E2DA;
  --border-strong:#D6D3C8;
  --success:      #10B981;
  --warning:      #F59E0B;
  --card-bg:      #FFFFFF;
  --card-dark:    #1A1A18;
  --card-shadow:  0 2px 16px rgba(0,0,0,0.07);
  --card-shadow-lg: 0 8px 32px rgba(0,0,0,0.08);

  --mono: ui-monospace, "SF Mono", "Roboto Mono", Menlo, Consolas, monospace;
  --sans: "Inter", system-ui, -apple-system, sans-serif;
  --display: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
}

/* -------- reset -------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-primary);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }

/* -------- typography -------- */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(38px, 5.4vw, 56px); line-height: 1.05; letter-spacing: -0.02em; }
h2 { font-size: clamp(28px, 3.6vw, 36px); line-height: 1.15; letter-spacing: -0.01em; }
h3 { font-size: 20px; font-weight: 600; line-height: 1.3; }
p  { margin: 0; }

.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 16px;
  display: inline-block;
}

.muted { color: var(--text-muted); }

/* -------- layout -------- */
.container {
  width: min(1200px, 100% - 48px);
  margin-inline: auto;
}
.section {
  padding: clamp(72px, 9vw, 120px) 0;
}
/* keep sticky-nav from covering anchor targets when jumping via the menu */
#overview, #how, #pricing { scroll-margin-top: 80px; }
.section--subtle { background: var(--bg-subtle); }

/* -------- buttons -------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 15px;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
  white-space: nowrap;
  font-family: var(--sans);
}
.btn--primary {
  background: var(--accent-hover); /* #0369A1: white text = 5.93:1 ✅ */
  color: #fff;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 2px 6px rgba(3,105,161,0.22);
}
.btn--primary:hover {
  background: #075985;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(3,105,161,0.32);
}
.btn--ghost {
  background: transparent;
  color: var(--accent-hover); /* #0369A1 on --bg = 5.67:1 ✅ */
  border: 1.5px solid var(--accent-hover);
}
.btn--ghost:hover {
  background: var(--accent-hover);
  color: #fff;
  transform: translateY(-1px);
}
.btn--lg { padding: 16px 36px; font-size: 16px; }
.btn--dark {
  background: var(--card-dark);
  color: #fff;
}
.btn--dark:hover { background: #000; transform: translateY(-1px); }

/* -------- pill / chip -------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent-soft);
  color: var(--accent-hover);
  font-size: 13px;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 100px;
}
.pill--status {
  background: rgba(245,158,11,0.12);
  color: #B45309;
}
.pill--status::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--warning);
  display: inline-block;
}
.pill--ok {
  background: rgba(16,185,129,0.12);
  color: #047857;
}
.pill--ok::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--success);
  display: inline-block;
}

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250,250,247,0);
  border-bottom: 1px solid transparent;
  transition: background .25s ease, border-color .25s ease, backdrop-filter .25s ease;
}
.nav.is-scrolled {
  background: rgba(250,250,247,0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom-color: var(--border);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 0;
}
.nav__links {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-left: auto;
  margin-right: 8px;
}
.nav__links a {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-muted);
  transition: color .2s ease;
}
.nav__links a:hover { color: var(--text-primary); }
.btn--login {
  background: none;
  color: var(--accent-hover);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 10px 4px;
}
.btn--login:hover {
  color: #075985;
  text-decoration: none;
  transform: translateY(-1px);
}
@media (max-width: 760px) {
  .nav__links { display: none; }
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.01em;
}
.logo__mark {
  width: 32px;
  height: 32px;
  background: var(--card-dark);
  color: #fff;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  padding: clamp(56px, 7vw, 96px) 0 clamp(72px, 9vw, 120px);
  background: var(--bg);
}
.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
}
.hero__copy--solo {
  max-width: 920px;
  margin: 0 auto;
  text-align: left;
}
.hero__copy--solo .sub {
  margin-inline: 0;
  max-width: 640px;
}
.hero__copy--solo .hero__cta { justify-content: flex-start; }
.hero__copy h1 { margin-bottom: 24px; }
.hero__copy .sub {
  font-size: 18px;
  color: var(--text-muted);
  max-width: 520px;
  margin-bottom: 32px;
}
.hero__cta {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.hero__note {
  font-size: 13px;
  color: var(--text-muted);
  font-family: var(--mono);
}
.hero__pill { margin-bottom: 28px; }

.hero__visual {
  position: relative;
  border-radius: 14px;
  box-shadow: var(--card-shadow-lg);
  overflow: hidden;
  background: var(--card-bg);
  border: 1px solid var(--border);
  transform: rotate(0.4deg);
  transition: transform .4s ease;
}
.hero__visual:hover { transform: rotate(0deg) translateY(-2px); }
.hero__visual img { width: 100%; display: block; }

.hero__metrics {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  padding-top: 40px;
  border-top: 1px solid var(--border);
}
.metric__num {
  font-family: var(--display);
  font-weight: 700;
  font-size: 32px;
  line-height: 1;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}
.metric__label {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 8px;
}

@media (max-width: 900px) {
  .hero__metrics { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}

/* ============================================================
   ABOUT
   ============================================================ */
.about {
  text-align: center;
}
.about__inner {
  max-width: 760px;
  margin: 0 auto;
}
.about h2 { margin-bottom: 24px; }
.about p {
  font-size: 18px;
  color: var(--text-muted);
  line-height: 1.7;
}
.video-wrapper {
  margin-top: 56px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--card-shadow-lg);
  border: 1px solid var(--border);
}
.video-placeholder {
  aspect-ratio: 16 / 9;
  background:
    linear-gradient(135deg, #2A2A28 0%, #1A1A18 100%);
  color: rgba(255,255,255,0.7);
  display: grid;
  place-items: center;
  position: relative;
  text-align: center;
  padding: 24px;
}
.video-placeholder__play {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: 1.5px solid rgba(255,255,255,0.25);
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  backdrop-filter: blur(6px);
  transition: transform .3s ease, background .3s ease;
}
.video-placeholder:hover .video-placeholder__play {
  background: rgba(255,255,255,0.18);
  transform: scale(1.05);
}
.video-placeholder__play::after {
  content: "";
  display: block;
  width: 0; height: 0;
  border-left: 14px solid #fff;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  margin-left: 4px;
}
.video-placeholder__caption {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.video-placeholder__title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 18px;
  color: #fff;
  margin-bottom: 6px;
}

/* ============================================================
   PROBLEMS SLIDER
   ============================================================ */
.problems__title {
  text-align: center;
  position: sticky;
  top: 92px;
  z-index: 20;
  background: var(--bg);
  padding: 18px 0 22px;
  margin: 0 0 24px;
}
/* fade strip so scrolling visuals don't butt hard against the pinned title */
.problems__title::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -24px;
  height: 24px;
  background: linear-gradient(var(--bg), rgba(250,250,247,0));
  pointer-events: none;
}
.problems__layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 80px;
  align-items: flex-start;
}
.problems__text {
  position: sticky;
  top: 192px;
  align-self: flex-start;
  padding: 24px 0;
}
.problem-slide-text {
  position: absolute;
  inset: 24px 0 auto 0;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .45s ease, transform .45s ease;
  pointer-events: none;
}
.problem-slide-text.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  position: relative;
}
.problem-slide-text .icon {
  font-size: 32px;
  display: inline-block;
  margin-bottom: 20px;
  filter: grayscale(0.05);
}
.problem-slide-text h3 {
  font-family: var(--display);
  font-size: 30px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 18px;
  text-wrap: balance;
}
.problem-slide-text p {
  font-size: 17px;
  color: var(--text-muted);
  max-width: 480px;
  line-height: 1.65;
}
.problem-slide-text p + p { margin-top: 14px; }
/* challenge framing — muted */
.problem-slide-text .challenge-desc {
  font-size: 16px;
  color: var(--text-muted);
  max-width: 480px;
  line-height: 1.6;
  margin-bottom: 22px;
}
/* Galley's answer — white card with accent border, matching the feature-card
   language elsewhere on the page, so the solution reads as clearly as the
   challenge above it without resorting to a heavy dark block */
.problem-slide-text .answer {
  background: #fff;
  border: 1.5px solid var(--accent-soft);
  border-radius: 12px;
  padding: 20px 22px;
  max-width: 500px;
  box-shadow: var(--card-shadow);
}
.problem-slide-text .answer__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-hover);
  margin-bottom: 12px;
}
.problem-slide-text .answer__mark {
  width: 20px; height: 20px;
  border-radius: 6px;
  background: var(--accent-soft);
  color: var(--accent-hover);
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 700; font-size: 12px;
  letter-spacing: 0;
}
.problem-slide-text .answer__text {
  font-size: 16px;
  line-height: 1.62;
  color: var(--text-primary);
  max-width: none;
  margin: 0;
}
.problem-slide-text .counter {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-subtle);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.problems__right {
  position: relative;
}
.problem-slide-vis {
  scroll-snap-align: start;
  min-height: 90vh;
  display: flex;
  align-items: center;
  padding: 24px 0;
}
.device-frame {
  border-radius: 14px;
  overflow: hidden;
  background: var(--card-bg);
  box-shadow: var(--card-shadow-lg);
  border: 1px solid var(--border);
  width: 100%;
}
.device-frame img { width: 100%; display: block; }

.progress-dots {
  position: absolute;
  right: -32px;
  top: 50vh;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.progress-dots__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border-strong);
  transition: background .3s ease, transform .3s ease;
}
.progress-dots__dot.is-active {
  background: var(--text-primary);
  transform: scale(1.3);
}

@media (max-width: 900px) {
  .problems__layout { grid-template-columns: 1fr; gap: 32px; }
  .problems__text { position: static; }
  .problem-slide-text { position: relative; opacity: 1; transform: none; inset: auto; pointer-events: auto; }
  .problem-slide-vis { min-height: auto; padding: 0 0 16px; }
  .progress-dots { display: none; }
  /* Mobile audit (375x812): the sticky-slider heading stays pinned at top:92px while every
     slide's text/mock now scrolls in normal flow beneath it (the two-column pin-and-scroll
     trick above only makes sense with the desktop layout), so cards visibly scroll through and
     overlap the heading. Below 900px the title scrolls with the rest of the section instead. */
  .problems__title { position: static; top: auto; }
  /* PO round-2: below 900px script.js reparents each slide's vis to sit right after its own
     text (kicker -> heading -> body -> mock), so #problemsText holds all ten blocks in reading
     order. Give every slide except the first a generous push-down BEFORE its kicker — that gap
     reads as the space after the previous slide's card, so the "0N — WORD" kicker binds to the
     block it introduces instead of the one above it. */
  .problem-slide-text:not(:first-child) { margin-top: 60px; }
}

/* ============================================================
   MOCK INTERFACES (placeholders for missing screenshots)
   built in the Galley aesthetic — drop-in PNG when ready
   ============================================================ */
.mock {
  font-family: var(--sans);
  color: var(--text-primary);
  background: var(--bg);
  padding: 22px;
  position: relative;
  user-select: none;
}
.mock__chrome {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.mock__crumb {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.mock__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
  margin-left: auto;
}

/* — STYLE / VOICE MOCK — */
.mock-style { padding: 28px; }
.mock-style__hdr {
  display: flex; align-items: center; gap: 12px; margin-bottom: 22px;
}
.mock-style__hdr .pill { font-size: 11px; padding: 3px 10px; }
.mock-style__h {
  font-family: var(--display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.01em;
}
.voice-card {
  background: var(--card-dark);
  color: #fff;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
}
.voice-card .author {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px;
}
.voice-card .avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #F59E0B, #EA580C);
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 700;
  font-size: 14px;
}
.voice-card .name { font-family: var(--display); font-weight: 600; font-size: 15px; }
.voice-card .meta { font-family: var(--mono); font-size: 11px; color: rgba(255,255,255,0.55); letter-spacing: 0.06em; text-transform: uppercase; }
.voice-card .sample {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255,255,255,0.78);
  border-left: 2px solid rgba(255,255,255,0.2);
  padding-left: 12px;
  font-style: italic;
}
.tone-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 8px;
}
.tone-row .label { font-size: 13px; color: var(--text-primary); }
.tone-row .label .mono { font-family: var(--mono); font-size: 10px; color: var(--text-muted); letter-spacing: 0.06em; margin-left: 6px; }
.slider-bar {
  width: 110px; height: 5px; background: var(--border); border-radius: 100px;
  position: relative;
}
.slider-bar::after {
  content: ""; position: absolute; left: 0; top: 0; height: 100%;
  background: var(--accent); border-radius: 100px;
}
.slider-bar[data-fill="65"]::after { width: 65%; }
.slider-bar[data-fill="80"]::after { width: 80%; }
.slider-bar[data-fill="40"]::after { width: 40%; }
.sample-files {
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px;
}
.sample-files .chip {
  font-family: var(--mono);
  font-size: 11px;
  padding: 5px 10px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
}

/* — FACT-CHECK MOCK — */
.mock-fact { padding: 28px; }
.fact-doc {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-primary);
}
.fact-doc h4 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 12px;
}
.fact-doc p { margin-bottom: 12px; }
.claim {
  display: inline;
  position: relative;
  padding: 1px 4px;
  border-radius: 3px;
}
.claim--ok    { background: rgba(16,185,129,0.13); border-bottom: 1.5px solid var(--success); }
.claim--warn  { background: rgba(245,158,11,0.13); border-bottom: 1.5px solid var(--warning); }
.claim__badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  margin-left: 4px;
  vertical-align: middle;
  color: #fff;
}
.claim__badge--ok { background: var(--success); }
.claim__badge--warn { background: var(--warning); }
.fact-sidebar {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.fact-source {
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
}
.fact-source .src-h {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.fact-source .src-t {
  font-size: 12px;
  color: var(--text-primary);
  line-height: 1.4;
}
.fact-source .src-url {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--accent-hover);
  margin-top: 4px;
}

/* — ANALYTICS MOCK — */
.mock-analytics { padding: 28px; }
.kpi-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 20px;
}
.kpi {
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
}
.kpi__h {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.kpi__v {
  font-family: var(--display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.01em;
  line-height: 1;
}
.kpi__d {
  font-size: 11px;
  font-family: var(--mono);
  margin-top: 4px;
}
.kpi__d.up   { color: var(--success); }
.kpi__d.down { color: #DC2626; }

.chart {
  background: var(--card-dark);
  border-radius: 12px;
  padding: 18px 20px;
  color: #fff;
  margin-bottom: 16px;
}
.chart__h {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.chart__t {
  font-family: var(--display); font-weight: 600; font-size: 14px;
}
.chart__legend {
  font-family: var(--mono); font-size: 10px;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.bars {
  display: flex; align-items: flex-end; gap: 8px; height: 80px;
}
.bar {
  flex: 1;
  background: rgba(255,255,255,0.18);
  border-radius: 3px;
  position: relative;
}
.bar::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  background: var(--accent);
  border-radius: 3px;
  height: var(--h, 50%);
}
.bars-labels {
  display: flex; gap: 8px; margin-top: 8px;
}
.bars-labels span {
  flex: 1;
  text-align: center;
  font-family: var(--mono);
  font-size: 10px;
  color: rgba(255,255,255,0.55);
}

.team-tbl { width: 100%; }
.team-tbl .row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 8px 4px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.team-tbl .row:last-child { border-bottom: 0; }
.team-tbl .name { display: flex; align-items: center; gap: 8px; }
.team-tbl .avatar-sm {
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 700; font-size: 10px;
  color: #fff;
}
.team-tbl .num { font-family: var(--mono); color: var(--text-muted); }

/* ============================================================
   FEATURES (2x2)
   ============================================================ */
.features h2 { text-align: center; margin-bottom: 56px; }
.features__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.feature {
  background: var(--card-bg);
  border-radius: 12px;
  padding: 32px;
  box-shadow: var(--card-shadow);
  border: 1px solid var(--border);
  transition: transform .2s ease, box-shadow .2s ease;
}
.feature:hover { transform: translateY(-4px); box-shadow: var(--card-shadow-lg); }
.feature__icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: var(--bg-subtle);
  display: grid; place-items: center;
  font-size: 22px;
  margin-bottom: 20px;
}
.feature h3 {
  margin-bottom: 10px;
  font-family: var(--display);
  font-size: 19px;
}
.feature p {
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.65;
}

@media (max-width: 700px) {
  .features__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.how { text-align: center; }
.how h2 { margin-bottom: 16px; }
.how .sub {
  color: var(--text-muted);
  font-size: 18px;
  max-width: 580px;
  margin: 0 auto 64px;
}
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
  text-align: left;
}
.steps::before {
  content: "";
  position: absolute;
  top: 22px;
  left: 12.5%;
  right: 12.5%;
  height: 1px;
  background: var(--border-strong);
}
.step {
  padding: 0 16px;
  position: relative;
}
.step__num {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--bg);
  border: 1.5px solid var(--border-strong);
  display: grid; place-items: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  position: relative;
  z-index: 1;
  margin-bottom: 20px;
  color: var(--text-primary);
}
.step:nth-child(1) .step__num,
.step:nth-child(2) .step__num {
  background: var(--card-dark);
  color: #fff;
  border-color: var(--card-dark);
}
.step h3 {
  font-family: var(--display);
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 10px;
}
.step p {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
}

@media (max-width: 800px) {
  .steps { grid-template-columns: 1fr; gap: 24px; }
  .steps::before { display: none; }
  /* PO round-2 (~412dp real device): pin the first column to the circle's own 44px instead of
     "auto" so the track can never size off anything but the circle itself — title sits flush
     against it, never stretched toward the far edge. */
  .step { padding: 0; display: grid; grid-template-columns: 44px 1fr; gap: 20px; align-items: start; }
  /* Mobile audit (375x812): .step has 3 children (num, h3, p) but only 2 explicit columns, so
     row-major auto-placement wrapped the paragraph into column 1 under the number circle while
     squeezing the heading alone into the narrow column-2 remainder. Span the circle down both
     rows so h3 and p both auto-place into column 2, stacked as intended. */
  .step__num { grid-row: span 2; margin-bottom: 0; }
}

/* ============================================================
   PRICING
   ============================================================ */
.pricing h2 { text-align: center; margin-bottom: 12px; }
.pricing .sub {
  text-align: center;
  color: var(--text-muted);
  font-size: 18px;
  margin-bottom: 56px;
}
.plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: stretch;
}
.plans--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 780px;
  margin-inline: auto;
}
.plan {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 32px 28px;
  display: flex; flex-direction: column;
  box-shadow: var(--card-shadow);
  position: relative;
}
.plan--featured {
  border: 2px solid var(--accent);
  transform: scale(1.03);
  z-index: 2;
  box-shadow: 0 10px 32px rgba(14,165,233,0.12);
}
.plan__badge {
  position: absolute;
  top: -12px; left: 28px;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 100px;
}
.plan__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 16px;
}
.plan__price {
  font-family: var(--display);
  font-weight: 700;
  font-size: 38px;
  letter-spacing: -0.02em;
  line-height: 1;
}
.plan__per {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 8px;
  margin-bottom: 24px;
}
.plan__features {
  list-style: none;
  margin: 0;
  padding: 24px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: 28px;
  flex: 1;
}
.plan__features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.55;
  padding: 6px 0;
  color: var(--text-primary);
}
.plan__features li::before {
  content: "";
  width: 16px; height: 16px;
  background: var(--accent-soft);
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 3px;
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 8l2.5 2.5L12 5.5' stroke='%230369A1' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
}
.plan .btn { width: 100%; }

@media (max-width: 900px) {
  .plans { grid-template-columns: 1fr; }
  .plans--two { max-width: 480px; }
  .plan--featured { transform: scale(1); }
  /* Mobile audit (375x812): the badge overhangs the card top (top:-12px), so while the card
     scrolls past the sticky nav the overhang is the one part that clips under it. Raising the
     card above the nav (z-index) makes the whole card paint OVER the nav instead — worse. On
     the single-column mobile layout the overhang carries no meaning, so the badge sits in the
     card's normal flow and everything scrolls under the nav like the rest of the page. */
  .plan__badge { position: static; display: inline-block; width: fit-content; margin-bottom: 12px; }
}

/* ============================================================
   FAQ
   ============================================================ */
.faq {
  max-width: 760px;
  margin: 80px auto 0;
}
.faq__h {
  font-family: var(--display);
  font-weight: 700;
  font-size: 24px;
  text-align: center;
  margin-bottom: 32px;
  letter-spacing: -0.01em;
}
.faq details {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 12px;
  overflow: hidden;
  transition: box-shadow .2s ease;
}
.faq details[open] { box-shadow: var(--card-shadow); }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 24px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  width: 12px; height: 12px;
  border-right: 1.5px solid var(--text-muted);
  border-bottom: 1.5px solid var(--text-muted);
  transform: rotate(45deg);
  transition: transform .25s ease;
  margin-top: -4px;
  flex-shrink: 0;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }
.faq .faq__body {
  padding: 0 24px 22px;
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.7;
}

/* ============================================================
   FINAL CTA
   ============================================================ */
.cta-final {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}
.cta-final .eyebrow { margin-bottom: 24px; }
.cta-final h2 { margin-bottom: 16px; }
.cta-final p {
  color: var(--text-muted);
  font-size: 18px;
  margin-bottom: 36px;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  border-top: 1px solid var(--border);
  padding: 36px 0;
}
.footer__inner {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  gap: 24px;
  font-size: 13px;
  color: var(--text-muted);
}
.footer__center { text-align: center; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }
.footer__right {
  display: flex;
  justify-content: flex-end;
  gap: 24px;
}
.footer__right a:hover { color: var(--text-primary); }

@media (max-width: 700px) {
  .footer__inner { grid-template-columns: 1fr; text-align: center; }
  .footer__right { justify-content: center; }
}

/* ============================================================
   MODAL
   ============================================================ */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.modal.is-open { display: flex; }
.modal__scrim {
  position: absolute; inset: 0;
  background: rgba(26,26,24,0.5);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  animation: fadeIn .25s ease;
}
.modal__panel {
  position: relative;
  width: min(440px, 100%);
  background: var(--card-bg);
  border-radius: 16px;
  padding: 36px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.2);
  animation: panelIn .35s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes panelIn {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.modal__close {
  position: absolute;
  top: 16px; right: 16px;
  width: 32px; height: 32px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--text-muted);
  transition: background .2s, color .2s;
}
.modal__close:hover { background: var(--bg-subtle); color: var(--text-primary); }
.modal h3 {
  font-family: var(--display);
  font-size: 22px;
  margin-bottom: 8px;
}
.modal__sub {
  color: var(--text-muted);
  font-size: 14px;
  margin-bottom: 24px;
}
.modal label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 6px;
  color: var(--text-primary);
}
.modal label .opt { color: var(--text-muted); font-weight: 400; }
.modal input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--border-strong);
  background: var(--bg);
  font: inherit;
  margin-bottom: 16px;
  color: var(--text-primary);
  transition: border-color .2s, background .2s;
}
.modal input:focus {
  outline: none;
  border-color: var(--accent);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(14,165,233,0.12);
}
.modal .btn { width: 100%; }
.modal__success {
  text-align: center;
  padding: 16px 0;
}
.modal__success .check {
  width: 56px; height: 56px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: rgba(16,185,129,0.12);
  display: grid; place-items: center;
}

/* ============================================================
   REVEAL ON SCROLL
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}