/* ============================================
   QuickBoard Design System
   Version: 2.1: aligned to quickboard-design skill
   Yellow / Black / White. DM Sans. No gradients, no shadows, max 8px radius.
   ============================================ */

:root {
  /* Brand */
  --yellow: #FFD700;
  --yellow-hover: #E6C200;

  /* Neutrals: exact values from quickboard-design skill */
  --black: #000000;
  --near-black: #0A0A0A;
  --gray-50:  #F9FAFB;
  --gray-100: #F3F4F6;
  --gray-200: #E5E7EB;
  --gray-400: #9CA3AF;
  /* Referenced in 39 places but never defined until now, so all of them were
     silently inheriting their parent's colour. Not the Tailwind gray-500
     (#6B7280): that measures 4.39:1 on --gray-100, just under AA, and several
     users sit on gray-100 cards. Darkened until it clears 4.5:1 on white,
     gray-50 and gray-100 alike, while staying lighter than --gray-600. */
  --gray-500: #666E77;
  --gray-600: #4B5563;
  --gray-700: #374151;
  --gray-900: #111827;
  --white: #FFFFFF;

  /* Dark-mode body text */
  --dark-body: #D1D5DB;

  /* Dark marketing cards */
  --card-dark-bg: #111111;
  --card-dark-border: #222222;

  /* Status (product only) */
  --success: #059669;
  --danger:  #DC2626;
  --info:    #2563EB;
  --warning: #D97706;

  /* Typography */
  --font: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, monospace;

  /* Layout */
  --content-max: 1200px;
  --content-mid: 900px;
  --content-narrow: 720px;
  --section-pad: 96px;
  --section-pad-mobile: 64px;
  --header-height: 144px;
  --header-height-scrolled: 120px;

  /* Radius / motion: skill-enforced */
  --radius-sm: 4px;
  --radius:    6px;
  --radius-lg: 8px;
  --ease: ease;
  --dur: 150ms;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  color: var(--gray-600);
  background: var(--white);
  font-size: 15px;
  line-height: 1.5;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; border: 0; background: none; color: inherit; }
ul, ol { list-style: none; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; border-radius: 4px; }

/* ── Typography: per skill scale ── */
h1, h2, h3, h4, h5 {
  font-family: var(--font);
  color: var(--gray-900);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

/* Hero headline: max 48px per skill */
h1 {
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

/* Section headings (marketing): skill "Page title" scale */
h2 {
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 700;
  letter-spacing: -0.025em;
}

/* Sub-section headings: skill "Section heading" */
h3 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Card titles */
h4, .card__title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--gray-900);
}

p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--gray-600);
}
p.lead { font-size: 17px; color: var(--gray-700); }
small { font-size: 12px; color: var(--gray-400); font-weight: 600; letter-spacing: 0.05em; }

.mono { font-family: var(--font-mono); letter-spacing: 0; }

/* On dark surfaces */
.on-dark, .on-dark p, .on-dark li { color: var(--dark-body); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: var(--white); }
.on-dark small { color: var(--gray-400); }

.yellow { color: var(--yellow); }
.text-center { text-align: center; }

/* ── Layout ── */
.container          { max-width: var(--content-max); margin: 0 auto; padding: 0 24px; }
.container--mid     { max-width: var(--content-mid); margin: 0 auto; padding: 0 24px; }
.container--narrow  { max-width: var(--content-narrow); margin: 0 auto; padding: 0 24px; }

.section          { padding: var(--section-pad) 24px; }
.section--compact { padding: 64px 24px; }
.section--tight   { padding: 48px 24px; }

.bg-white   { background: var(--white); }
.bg-gray    { background: var(--gray-50); }
.bg-gray-2  { background: var(--gray-100); }
.bg-black   { background: var(--black); color: var(--white); }
.bg-ink     { background: var(--near-black); color: var(--white); }
.bg-yellow  { background: var(--yellow); color: var(--black); }

/* ── Grid ── */
.grid       { display: grid; gap: 24px; }
.grid--2    { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid--3    { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--4    { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grid--gap-lg { gap: 48px; }
.grid--gap-sm { gap: 16px; }

/* ── Badges: per skill ── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
}
.badge--yellow   { background: var(--yellow); color: var(--black); }
.badge--outline  { background: transparent; color: var(--gray-900); border: 1px solid var(--gray-200); }
.badge--outline-white { background: transparent; color: var(--white); border: 1px solid rgba(255,255,255,.25); }
.badge--black    { background: var(--black); color: var(--yellow); }
.badge--ghost    { background: var(--gray-100); color: var(--gray-900); }
.badge .dot { width: 6px; height: 6px; background: var(--yellow); border-radius: 999px; display: inline-block; }

/* ── Testimonial hero: quote + attribution + bridge line ── */
.testimonial-hero {
  border-left: 4px solid var(--yellow);
  padding-left: 28px;
}
.testimonial-hero blockquote {
  margin: 0;
  font-size: 22px;
  line-height: 1.6;
  font-weight: 500;
  color: var(--gray-900);
}
.testimonial-hero cite {
  display: block;
  margin-top: 20px;
  font-style: normal;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.01em;
  color: var(--gray-900);
}
.testimonial-hero .bridge {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--gray-200);
  font-size: 15px;
  line-height: 1.65;
  color: var(--gray-600);
}
@media (max-width: 600px) {
  .testimonial-hero { padding-left: 20px; }
  .testimonial-hero blockquote { font-size: 19px; }
}

/* ── Buttons: per skill spec (12px 24px, radius 6px, 14px font) ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  padding: 14px 24px; /* nudged from 12 to 14 to hit 44px min-height on mobile */
  min-height: 44px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
  white-space: nowrap;
}

/* Primary on dark: yellow */
.btn--primary    { background: var(--yellow); color: var(--black); }
.btn--primary:hover { background: var(--yellow-hover); }

/* Primary on light: black */
.btn--black      { background: var(--black); color: var(--white); }
.btn--black:hover{ background: #1A1A1A; }

/* Secondary outline on light: bumped to 1.5px black border, dark text for contrast */
.btn--outline-black {
  background: transparent;
  color: var(--gray-900);
  border: 1.5px solid var(--gray-900);
  font-weight: 600;
}
.btn--outline-black:hover { background: var(--gray-900); color: var(--white); }

/* Outline on dark: bumped to 1.5px solid white for contrast against dark bg */
.btn--outline-white {
  background: transparent;
  color: var(--white);
  border: 1.5px solid rgba(255,255,255,.6);
  font-weight: 600;
}
.btn--outline-white:hover { background: var(--white); color: var(--black); border-color: var(--white); }

.btn--ghost      { background: transparent; color: var(--gray-900); }
.btn--ghost:hover{ background: var(--gray-50); }

.btn--block { width: 100%; }

.btn-group { display: inline-flex; gap: 12px; flex-wrap: wrap; }

/* ── Cards: light background: 20px pad, 8px radius, 1px border ── */
.card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 20px;
  transition: border-color var(--dur) var(--ease);
}
.card:hover { border-color: var(--gray-400); }

/* Cards on dark backgrounds: 24px pad, #111 bg, #222 border */
.card--dark {
  background: var(--card-dark-bg);
  border-color: var(--card-dark-border);
  color: var(--white);
  padding: 24px;
}
.card--dark h3, .card--dark .card__title { color: var(--white); }
.card--dark p, .card--dark .card__text { color: var(--dark-body); }
.card--dark:hover { border-color: var(--yellow); }

/* Yellow accent bars on cards: 3px yellow divider above heading */
.card--accent-yellow { border-top: 3px solid var(--yellow); }
.card--accent-left   { border-left: 3px solid var(--yellow); }

/* Bottom-aligns a figure inside a grid card so screenshots line up across
   cards whose paragraph copy runs different lengths (e.g. Agility Rating
   cards on ortho-rehab.html). Grid stretches cards to equal height by
   default, so margin-top: auto pushes the figure flush to the shared
   bottom edge; padding-top guarantees a floor gap when copy runs long. */
.card--figure-bottom { display: flex; flex-direction: column; }
.card--figure-bottom .figure--zoom { margin-top: auto; margin-left: auto; margin-right: auto; padding-top: 20px; }

.card__eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-600);
  margin-bottom: 8px;
}
.card__title   { font-size: 16px; font-weight: 600; color: var(--gray-900); margin-bottom: 8px; }
.card__text    { font-size: 15px; color: var(--gray-600); line-height: 1.6; }
.card--dark .card__text { color: var(--dark-body); }
.card__link    {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-900);
  margin-top: 16px;
  border-bottom: 2px solid var(--yellow);
  padding-bottom: 2px;
}
.card__link:hover { color: var(--black); }
.card--dark .card__link { color: var(--yellow); border-bottom-color: var(--yellow); }

/* ── Feature grid: 2-col icon cards (Companion dual-task lists) ── */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  max-width: 720px;
  margin: 0 auto;
  text-align: left;
}
.feature-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  padding: 18px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.feature-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  border-color: var(--gray-400);
}
/* Use on bg-white sections so cards contrast against the page instead of disappearing into it */
.feature-grid--flat .feature-card {
  background: var(--gray-50);
  box-shadow: none;
}
.feature-grid--flat .feature-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.feature-icon {
  width: 40px;
  height: 40px;
  background: var(--yellow);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--black);
}
.feature-icon svg { width: 20px; height: 20px; }
.feature-card__title {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 700;
  color: var(--gray-900);
}
.feature-card__text {
  margin: 0;
  font-size: 14px;
  color: var(--gray-700);
  line-height: 1.5;
}
@media (max-width: 640px) {
  .feature-grid { grid-template-columns: 1fr; }
}

/* ── Header / Nav ── */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  height: var(--header-height);
  background: var(--black);
  border-bottom: 1px solid rgba(255,255,255,.08);
  transition: height var(--dur) var(--ease);
}
.site-header.scrolled { height: var(--header-height-scrolled); }
.site-header__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  gap: 20px;
}
.site-header__logo img { height: 128px; width: auto; transition: height var(--dur) var(--ease); }
.site-header.scrolled .site-header__logo img { height: 104px; }

.nav-desktop { display: flex; align-items: center; gap: 2px; }
.nav-desktop__link {
  font-size: 14px;
  font-weight: 500;
  color: var(--white);
  padding: 8px 14px;
  border-radius: var(--radius);
  white-space: nowrap;
  letter-spacing: 0.02em;
  transition: color var(--dur) var(--ease);
}
.nav-desktop__link:hover { color: var(--yellow); }
.nav-desktop__link--active { color: var(--yellow); font-weight: 600; }

.nav-dropdown { position: relative; }
.nav-dropdown__toggle::after { content: '▾'; margin-left: 4px; font-size: 10px; opacity: .6; }
.nav-dropdown__menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--black);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-lg);
  padding: 8px;
  min-width: 260px;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur), visibility var(--dur);
}
.nav-dropdown:hover .nav-dropdown__menu,
.nav-dropdown:focus-within .nav-dropdown__menu {
  opacity: 1;
  visibility: visible;
}
.nav-dropdown__item {
  display: block;
  padding: 10px 14px;
  font-size: 14px;
  color: var(--white);
  border-radius: var(--radius);
  transition: background var(--dur), color var(--dur);
  font-weight: 500;
}
.nav-dropdown__item:hover { background: rgba(255,255,255,.06); color: var(--yellow); }
.nav-dropdown__item small { display: block; color: var(--gray-400); margin-top: 2px; font-size: 11px; text-transform: none; letter-spacing: 0; font-weight: 400; }

.nav-actions { display: flex; align-items: center; gap: 10px; }
.nav-secondary {
  font-size: 14px;
  font-weight: 600;
  color: var(--yellow);
  padding: 10px 18px;
  border-radius: var(--radius);
  border: 1.5px solid var(--yellow);
  background: transparent;
  letter-spacing: 0.02em;
  transition: background var(--dur), color var(--dur);
}
.nav-secondary:hover { background: var(--yellow); color: var(--black); }
.nav-cta {
  font-size: 14px;
  font-weight: 700;
  padding: 10px 20px;
  background: var(--yellow);
  color: var(--black);
  border-radius: var(--radius);
  letter-spacing: 0.02em;
  transition: background var(--dur);
}
.nav-cta:hover { background: var(--yellow-hover); }

/* Mobile */
.mobile-toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; color: var(--white); }
.mobile-menu {
  position: fixed;
  top: var(--header-height);
  right: -110%;
  width: min(340px, 88vw);
  height: calc(100vh - var(--header-height));
  background: var(--black);
  border-left: 1px solid rgba(255,255,255,.08);
  padding: 24px;
  transition: right var(--dur) var(--ease);
  overflow-y: auto;
  z-index: 999;
}
.mobile-menu.open { right: 0; }
.mobile-menu__overlay {
  position: fixed;
  inset: var(--header-height) 0 0 0;
  background: rgba(0,0,0,.55);
  z-index: 998;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur), visibility var(--dur);
}
.mobile-menu__overlay.open { opacity: 1; visibility: visible; }
.mobile-menu__group { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.08); }
.mobile-menu__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-400);
  margin-bottom: 8px;
}
.mobile-menu__link  { display: block; font-size: 16px; color: var(--white); padding: 10px 0; font-weight: 500; }
.mobile-menu__link:hover { color: var(--yellow); }
.mobile-menu__ctas { display: grid; gap: 10px; margin-top: 24px; }
.mobile-menu__cta-primary {
  display: block;
  text-align: center;
  padding: 14px;
  background: var(--yellow);
  color: var(--black);
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
}
.mobile-menu__cta-secondary {
  display: block;
  text-align: center;
  padding: 13px;
  border: 1px solid rgba(255,255,255,.2);
  color: var(--white);
  border-radius: var(--radius);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.02em;
}

/* ── Hero: black bg, no gradients, solid overlay ── */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--black);
  color: var(--white);
  min-height: 560px;
  display: flex;
  align-items: center;
  padding-top: var(--header-height);
  border-bottom: 3px solid var(--yellow);
}
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.45;
  z-index: 0;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 1;
}
.hero__content {
  position: relative;
  z-index: 2;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 64px 24px 72px;
  width: 100%;
}
.hero h1 { color: var(--white); margin: 16px 0; max-width: 880px; }
.hero h1 em { font-style: normal; color: var(--yellow); }
.hero__sub {
  font-size: 17px;
  font-weight: 400;
  color: var(--dark-body);
  max-width: 680px;
  line-height: 1.5;
  margin-bottom: 28px;
}
/* On light (white) heroes the default --dark-body (#D1D5DB) is too faint;
   darken it. Dark image-overlay heroes keep the light default. */
.bg-white .hero__sub {
  color: var(--gray-700);
}
.hero__proof { margin-top: 32px; display: flex; gap: 20px 32px; flex-wrap: wrap; align-items: center; }
.hero__proof-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gray-400);
}
.hero__proof-item::before { content: ''; width: 6px; height: 6px; background: var(--yellow); border-radius: 999px; flex: none; }

/* ── Proof Bar: gray bg, factual ── */
.proof-bar {
  padding: 40px 24px;
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
}
.proof-bar__label {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray-600);
  margin-bottom: 20px;
}
.proof-bar__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 28px 48px;
}
.proof-bar__logo {
  font-weight: 700;
  font-size: 16px;
  color: var(--gray-600);
  letter-spacing: -0.01em;
}

/* ── Stats: per skill: 32px weight 800, label 12px uppercase ── */
.stat-card { text-align: center; padding: 16px; }
.stat-card__number {
  font-family: var(--font);
  font-weight: 800;
  font-size: 40px;
  line-height: 1.1;
  color: var(--gray-900);
  letter-spacing: -0.03em;
}
.stat-card__label {
  font-size: 13px;
  color: var(--gray-600);
  margin-top: 10px;
  font-weight: 500;
  line-height: 1.45;
}
.stat-card__source {
  font-size: 11px;
  color: var(--gray-600);
  margin-top: 6px;
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

.on-dark .stat-card__number { color: var(--yellow); }
.on-dark .stat-card__label { color: var(--dark-body); }
.on-dark .stat-card__source { color: var(--gray-400); }

/* ── Section Headers: 3px yellow accent line above heading ── */
.section-header { text-align: center; max-width: 780px; margin: 0 auto 48px; }
.section-header h2 { margin-top: 12px; }
.section-header p  { margin-top: 14px; font-size: 16px; }

/* ── Steps ── */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
}
.step {
  position: relative;
  padding: 20px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
}
.step__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  background: var(--yellow);
  color: var(--black);
  font-weight: 800;
  font-size: 16px;
  margin-bottom: 16px;
}
.step__title { font-size: 16px; font-weight: 600; color: var(--gray-900); margin-bottom: 8px; }
.step__desc  { font-size: 14px; color: var(--gray-600); line-height: 1.55; }

/* ── Testimonials: dark bg with big yellow quote mark ── */
.testimonial-card {
  background: var(--card-dark-bg);
  border: 1px solid var(--card-dark-border);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color var(--dur);
}
.testimonial-card:hover { border-color: var(--yellow); }
.testimonial-card__quote-mark {
  font-size: 48px;
  line-height: 1;
  color: var(--yellow);
  font-weight: 800;
  margin-bottom: -8px;
}
.testimonial-card__quote {
  font-size: 16px;
  font-style: italic;
  color: var(--white);
  line-height: 1.55;
  flex: 1;
}
.testimonial-card__author { display: flex; align-items: center; gap: 12px; padding-top: 12px; border-top: 1px solid var(--card-dark-border); }
.testimonial-card__photo { width: 40px; height: 40px; border-radius: 999px; object-fit: cover; flex: none; }
.testimonial-card__name { font-size: 14px; font-weight: 700; color: var(--white); }
.testimonial-card__role { font-size: 12px; color: var(--gray-400); }

/* ── FAQ ── */
.faq { border-top: 1px solid var(--gray-200); }
.faq-item { border-bottom: 1px solid var(--gray-200); }
.faq-item__button {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  padding: 20px 0;
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  font-family: var(--font);
}
.faq-item__question { font-size: 16px; font-weight: 600; color: var(--gray-900); line-height: 1.4; margin: 0; }
.faq-item__icon {
  width: 28px;
  height: 28px;
  border-radius: var(--radius);
  background: var(--gray-100);
  color: var(--gray-900);
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  transition: transform var(--dur), background var(--dur), color var(--dur);
  font-weight: 500;
  line-height: 1;
}
.faq-item.open .faq-item__icon { transform: rotate(45deg); background: var(--yellow); color: var(--black); }
.faq-item__answer { padding: 0 0 20px; display: none; max-width: 720px; }
.faq-item__answer p { font-size: 15px; color: var(--gray-600); line-height: 1.6; }
.faq-item__answer a { color: var(--gray-900); font-weight: 600; border-bottom: 1px solid var(--yellow); }
.faq-item.open .faq-item__answer { display: block; }

/* ── CTA Section: solid black, no gradient glow ── */
.cta-section {
  text-align: center;
  background: var(--black);
  color: var(--white);
  padding: 96px 24px;
  border-top: 3px solid var(--yellow);
}
.cta-section__inner { max-width: 720px; margin: 0 auto; }
.cta-section h2 { color: var(--white); margin-bottom: 14px; }
.cta-section p  { color: var(--dark-body); font-size: 17px; margin-bottom: 28px; }
.cta-section__secondary {
  display: inline-block;
  margin-top: 20px;
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-400);
  letter-spacing: 0.02em;
}
.cta-section__secondary:hover { color: var(--yellow); }

/* ── Research / Citation block ── */
.citation {
  background: var(--gray-50);
  border-left: 3px solid var(--yellow);
  padding: 20px 24px;
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  font-size: 15px;
  color: var(--gray-700);
}
/* Deep links from the blog land on /research#<slug>. The header is fixed, so
   without this the target citation scrolls up underneath it. */
.citation[id] { scroll-margin-top: calc(var(--header-height-scrolled) + 24px); }
.citation__meta {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-400);
  margin-bottom: 8px;
}
.citation__finding { font-weight: 600; color: var(--gray-900); margin-top: 8px; }

/* ── Pricing ── */
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
.pricing-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 24px;
  text-align: left;
}
.pricing-card--featured { border: 2px solid var(--yellow); position: relative; }
.pricing-card--featured::before {
  content: 'Most popular';
  position: absolute;
  top: -12px;
  left: 20px;
  background: var(--yellow);
  color: var(--black);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
}
.pricing-card__tier {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.pricing-card__price { font-size: 32px; font-weight: 800; color: var(--gray-900); margin: 8px 0; letter-spacing: -0.03em; }
.pricing-card__price small { font-size: 14px; font-weight: 500; color: var(--gray-400); letter-spacing: 0; text-transform: none; }
.pricing-card__meta  { font-size: 14px; color: var(--gray-600); margin-bottom: 16px; }

/* ── Compare table ── */
.compare-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.compare-table th, .compare-table td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--gray-200); }
.compare-table th { font-weight: 600; color: var(--gray-900); background: var(--gray-50); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; }
.compare-table .yes { color: var(--gray-900); font-weight: 600; }
.compare-table .yes::before { content: '✓ '; color: var(--yellow); font-weight: 800; }
.compare-table .no  { color: var(--gray-400); }
.compare-table .no::before  { content: '- '; }

/* ── Footer: black bg, yellow top border ── */
.site-footer { background: var(--black); color: var(--dark-body); padding: 64px 24px 28px; border-top: 3px solid var(--yellow); }
.site-footer__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px; margin-bottom: 40px; max-width: var(--content-max); margin-left: auto; margin-right: auto; }
.site-footer__brand img { height: 120px; width: auto; margin-bottom: 16px; }
.site-footer__brand p { font-size: 13px; color: var(--gray-400); line-height: 1.55; max-width: 300px; }
.site-footer__heading { font-size: 11px; font-weight: 600; color: var(--yellow); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 12px; }
.site-footer__link { display: block; font-size: 14px; color: var(--dark-body); padding: 4px 0; transition: color var(--dur); }
.site-footer__link:hover { color: var(--yellow); }
.site-footer__bottom {
  max-width: var(--content-max);
  margin: 0 auto;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.site-footer__copyright { font-size: 12px; color: var(--gray-400); }
.site-footer__badges { display: flex; gap: 16px; font-size: 11px; color: var(--gray-400); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.site-footer__badges span { display: inline-flex; align-items: center; gap: 6px; }
.site-footer__badges span::before { content: ''; width: 6px; height: 6px; background: var(--yellow); border-radius: 999px; }

/* ── No entrance animations per skill rule. .fade-in is a no-op class retained for HTML compatibility. ── */
.fade-in { opacity: 1; }

/* ── Utilities ── */
.mb-0 { margin-bottom: 0; }
.mb-8 { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.mb-32 { margin-bottom: 32px; }
.mb-48 { margin-bottom: 48px; }
.mb-64 { margin-bottom: 64px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mt-48 { margin-top: 48px; }
.mt-64 { margin-top: 64px; }
.mx-auto { margin-left: auto; margin-right: auto; }
.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-24 { gap: 24px; }

/* ── Responsive ── */
@media (max-width: 1024px) {
  .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .site-header__inner { padding: 0 24px; }
}

@media (max-width: 900px) {
  :root {
    --header-height: 88px;
    --header-height-scrolled: 76px;
  }
  .site-header__inner { padding: 0 16px; gap: 12px; }
  .site-header__logo img { height: 72px; }
  .site-header.scrolled .site-header__logo img { height: 60px; }
  .nav-desktop { display: none; }
  .nav-actions { gap: 8px; }
  .nav-secondary { padding: 8px 12px; font-size: 13px; }
  .nav-cta { padding: 8px 14px; font-size: 13px; }
  .mobile-toggle { display: flex; }
  .section { padding: var(--section-pad-mobile) 24px; }
  .hero { min-height: 540px; }
  .hero__content { padding: 72px 24px; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .btn-group { flex-direction: column; width: 100%; }
  .btn-group .btn { width: 100%; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 560px) {
  :root {
    --header-height: 72px;
    --header-height-scrolled: 64px;
  }
  .site-header__logo img { height: 56px; }
  .site-header.scrolled .site-header__logo img { height: 48px; }
  /* Get Free App lives in the hamburger menu on small screens: keep header clean */
  .nav-secondary { display: none; }
  .steps { grid-template-columns: 1fr; }
  .hero__proof { flex-direction: column; align-items: flex-start; gap: 10px; }
  .site-footer__grid { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: 1fr; }
}

@media print {
  .site-header, .mobile-menu, .mobile-menu__overlay, .hero__video, .hero__overlay { display: none !important; }
  .hero { padding-top: 0; min-height: auto; background: var(--white); color: var(--black); }
  .hero h1, .hero p { color: var(--black); }
  .section { padding: 24px; }
}

/* ── iPad device frame ──
   Wraps iPad screenshots and screen captures in a black bezel so they read as
   "the app on an iPad" instead of a raw screen capture. Decorative graphic
   element, not a UI component: uses larger radius than the 8px design-system
   cap intentionally to match real iPad corner geometry. */
.ipad-frame {
  display: inline-block;
  max-width: 100%;
  background: #111111;
  padding: 14px 14px 20px 14px;
  border-radius: 26px;
  position: relative;
  line-height: 0;
  overflow: hidden;
}
.ipad-frame > img,
.ipad-frame > video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  background: #000;
}
/* Front-facing camera dot, centered above the screen */
.ipad-frame::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #2a2a2a;
}
/* iPad Pro home indicator on the bottom bezel */
.ipad-frame::after {
  content: "";
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 3px;
  border-radius: 2px;
  background: #2a2a2a;
}

/* ── Matte media treatment ──
   Subtle filter on photographic and iPad-screen-capture media to soften
   compression artifacts and harmonize tone. Respects design system:
   no shadows, no gradients, 8px radius max. */
.media-matte {
  --matte-c: 0.97;
  --matte-s: 1.04;
  --matte-b: 1.01;
  filter: contrast(var(--matte-c)) saturate(var(--matte-s)) brightness(var(--matte-b));
  background-color: var(--gray-100);
}

/* Stronger softening + inset edge definition for iPad screen captures
   (still + video). Hairline outline gives the image an intentional edge
   without using a shadow. */
.media-matte--screen {
  --matte-c: 0.94;
  --matte-s: 1.05;
  --matte-b: 1.02;
  outline: 1px solid rgba(0, 0, 0, 0.08);
  outline-offset: -1px;
}

/* On dark backgrounds, switch the hairline to a light tone so the edge reads */
.bg-ink .media-matte--screen,
.bg-black .media-matte--screen,
.hero .media-matte--screen {
  outline-color: rgba(255, 255, 255, 0.08);
}

/* ── Click-to-enlarge figures and lightbox ── */
.figure--zoom { position: relative; }
.figure--zoom img { cursor: zoom-in; transition: filter 150ms ease; }
.figure--zoom img:hover { filter: brightness(1.05); }
.figure--zoom img:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
/* Preserve matte filter when zoom-hover lifts brightness */
.figure--zoom .media-matte:hover,
.figure--zoom .media-matte--screen:hover {
  filter: contrast(var(--matte-c)) saturate(var(--matte-s)) brightness(calc(var(--matte-b) + 0.05));
}
.figure__zoom-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(0,0,0,0.78);
  color: var(--white);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 5px 9px;
  border-radius: 5px;
  pointer-events: none;
}
.figure__zoom-badge svg { width: 11px; height: 11px; flex: none; }
/* Dimension-drawing figures: render the affordance as a small, caption-style
   "Click to expand" label in a clear band above the image, so it never covers
   the width dimension or the top edge of the board. */
.figure--zoom.is-dim-board { padding-top: 22px; }
.figure--zoom.is-dim-board .figure__zoom-badge {
  top: 0;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  background: none;
  color: var(--gray-500);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  padding: 0;
  white-space: nowrap;
}
.figure--zoom.is-dim-board .figure__zoom-badge svg { width: 12px; height: 12px; }
/* Homepage price row: the iPad mock sits in the same expandable figure as the
   boards, so all three columns share a height and the prices line up. */
.price-figure .ipad-frame { margin: 0 auto 8px; }

/* Product software tiers: equal-height cards with the CTA pinned to the bottom
   so the buy buttons line up, and checkmark bullets on the feature list. */
#software .pricing-card { display: flex; flex-direction: column; height: 100%; }
#software .pricing-card .btn--block { margin-top: auto; }
/* This is the checkmark variant of .demo-checklist. The dot variant is the
   base rule further down; these declarations neutralise the parts of it that
   do not belong here (the yellow dot, and the list's own type sizing). */
#software .demo-checklist { display: flex; flex-direction: column; }
#software .demo-checklist li {
  position: relative;
  padding-left: 22px;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}
#software .demo-checklist li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  width: auto;
  height: auto;
  background: none;
  border-radius: 0;
  color: var(--yellow);
  font-weight: 800;
}
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background: rgba(0,0,0,0.92);
  opacity: 0;
  visibility: hidden;
  transition: opacity 140ms ease, visibility 140ms ease;
}
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox__img {
  max-width: 92vw;
  max-height: 92vh;
  width: auto;
  height: auto;
  border-radius: 8px;
  object-fit: contain;
}
.lightbox__close {
  position: absolute;
  top: 16px;
  right: 20px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--white);
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
}
.lightbox__close:hover { color: var(--yellow); }

/* ── Header Login link ──
   Subtle text link to the right of Request Demo. White text on dark header,
   hover lifts to yellow. Hides on mobile (lives in hamburger menu instead). */
.nav-login {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,.75);
  padding: 8px 4px 8px 6px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: color var(--dur) var(--ease);
}
.nav-login:hover { color: var(--yellow); }
.nav-login::after { content: ' →'; opacity: .6; }
@media (max-width: 900px) {
  .nav-login { display: none; }
}

/* ── Contact Us footer trigger ── */
.site-footer__link.is-trigger {
  background: none;
  border: 0;
  padding: 8px 0;
  min-height: 24px;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.site-footer__link.is-trigger:hover { color: var(--yellow); }

/* ── Contact modal ──
   Accessible modal: backdrop blur, focus-trappable, ESC-to-close,
   Mobile-friendly (full-width with margin on small screens). */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
}
.modal-backdrop.is-open { opacity: 1; visibility: visible; }

.modal {
  background: var(--white);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.06);
  transform: translateY(8px);
  transition: transform var(--dur) var(--ease);
}
.modal-backdrop.is-open .modal { transform: translateY(0); }

.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px 18px;
  border-bottom: 1px solid var(--gray-100);
}
.modal__title { margin: 0; font-size: 22px; font-weight: 700; color: var(--gray-900); letter-spacing: -0.01em; }
.modal__close {
  background: transparent;
  border: 0;
  padding: 4px;
  font-size: 24px;
  line-height: 1;
  color: var(--gray-500);
  cursor: pointer;
  transition: color var(--dur) var(--ease);
}
.modal__close:hover { color: var(--gray-900); }

.modal__body { padding: 22px 24px; }
.modal__field { margin-bottom: 18px; }
.modal__label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: 8px;
}
.modal__label sup { color: var(--yellow); margin-left: 2px; }
.modal__input, .modal__textarea {
  display: block;
  width: 100%;
  background: var(--white);
  color: var(--gray-900);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 12px 14px;
  font: inherit;
  font-size: 15px;
  transition: border-color var(--dur) var(--ease);
}
.modal__input::placeholder, .modal__textarea::placeholder { color: var(--gray-400); }
.modal__input:focus, .modal__textarea:focus {
  outline: none;
  border-color: var(--gray-900);
}
.modal__textarea { min-height: 120px; resize: vertical; font-family: inherit; }

.modal__checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 4px;
  font-size: 14px;
  color: var(--gray-700);
  cursor: pointer;
}
.modal__checkbox input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--yellow); }

.modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px 22px;
  border-top: 1px solid var(--gray-100);
}
@media (max-width: 480px) {
  .modal__footer { padding: 16px 18px 18px; }
  .modal__header { padding: 18px 18px 14px; }
  .modal__body { padding: 18px; }
  .modal__title { font-size: 19px; }
  .modal__footer .btn { flex: 1; }
}


/* ────────────────────────────────────────────────
   Blog post typography
   Scoped to .post-body and the related post-hero/meta blocks.
   Goal: smaller body headers, generous spacing, mobile-first readability.
   ──────────────────────────────────────────────── */

/* Post hero (the title + lead block above the article body) */
.post-hero {
  padding-top: 56px;
  padding-bottom: 8px;
}
.post-hero h1 {
  margin: 14px 0 18px;
  font-size: clamp(26px, 3.8vw, 38px);
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.post-hero .lead {
  margin-bottom: 24px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--gray-700);
}
.post-hero .post-meta {
  font-size: 14px;
  color: var(--gray-600);
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}
.post-hero .post-meta > span { display: inline-flex; align-items: center; }

/* The article body itself: generous spacing, larger body type */
.post-body {
  font-size: 17px;
  line-height: 1.75;
  color: var(--gray-700);
  padding-top: 16px;
  padding-bottom: 16px;
}

.post-body p {
  font-size: 17px;
  line-height: 1.75;
  color: var(--gray-700);
  margin: 0 0 24px;
}
.post-body p:last-child { margin-bottom: 0; }

.post-body h2 {
  font-size: clamp(21px, 2.4vw, 26px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--gray-900);
  margin: 56px 0 18px;
}
.post-body h2:first-child { margin-top: 0; }

.post-body h3 {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--gray-900);
  margin: 40px 0 14px;
}

.post-body h4 {
  font-size: 16px;
  font-weight: 600;
  color: var(--gray-900);
  margin: 32px 0 12px;
}

.post-body ul,
.post-body ol {
  font-size: 17px;
  line-height: 1.7;
  color: var(--gray-700);
  margin: 0 0 26px;
  padding-left: 24px;
}
.post-body li { margin-bottom: 10px; }
.post-body li > p { margin-bottom: 8px; }
.post-body li:last-child { margin-bottom: 0; }
.post-body li::marker { color: var(--yellow); font-weight: 700; }

.post-body a {
  color: var(--gray-900);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--yellow);
  transition: text-decoration-thickness var(--dur, .15s) ease;
}
.post-body a:hover { text-decoration-thickness: 2px; }

.post-body strong { color: var(--gray-900); font-weight: 700; }
.post-body em { color: var(--gray-700); }

.post-body blockquote {
  margin: 28px 0;
  padding: 14px 20px;
  border-left: 3px solid var(--yellow);
  background: var(--gray-50);
  color: var(--gray-700);
  font-style: italic;
  border-radius: 0 6px 6px 0;
}
.post-body blockquote p:last-child { margin-bottom: 0; }

.post-body hr {
  margin: 48px 0;
  border: 0;
  border-top: 1px solid var(--gray-200);
}

.post-body code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--gray-100);
  padding: 2px 6px;
  border-radius: 4px;
}
.post-body pre {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  padding: 16px 18px;
  overflow-x: auto;
  font-size: 14px;
  line-height: 1.55;
  margin: 0 0 26px;
}
.post-body pre code {
  background: none;
  padding: 0;
  border-radius: 0;
}

.post-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 28px;
  font-size: 15px;
}
.post-body table th,
.post-body table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--gray-200);
  text-align: left;
  vertical-align: top;
}
.post-body table th {
  font-weight: 700;
  color: var(--gray-900);
  background: var(--gray-50);
}

.post-body img,
.post-body video,
.post-body figure {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 32px auto;
  border-radius: 6px;
}
.post-body figure figcaption {
  font-size: 14px;
  color: var(--gray-600);
  text-align: center;
  margin-top: 10px;
  font-style: italic;
}

/* Mobile tuning: tighter, but still breathing */
@media (max-width: 720px) {
  .post-hero {
    padding-top: 40px;
    padding-bottom: 4px;
  }
  .post-hero h1 {
    margin: 12px 0 14px;
    line-height: 1.22;
  }
  .post-hero .lead {
    font-size: 16.5px;
    line-height: 1.55;
    margin-bottom: 18px;
  }
  .post-hero .post-meta {
    font-size: 13px;
    gap: 8px;
  }
  .post-body {
    font-size: 16.5px;
    line-height: 1.72;
    padding-top: 8px;
  }
  .post-body p {
    font-size: 16.5px;
    line-height: 1.72;
    margin: 0 0 20px;
  }
  .post-body h2 {
    margin: 40px 0 14px;
    line-height: 1.28;
  }
  .post-body h3 {
    margin: 32px 0 12px;
  }
  .post-body ul,
  .post-body ol {
    font-size: 16.5px;
    line-height: 1.7;
    margin-bottom: 22px;
    padding-left: 20px;
  }
  .post-body li { margin-bottom: 8px; }
  .post-body blockquote {
    margin: 22px 0;
    padding: 12px 16px;
  }
  .post-body hr { margin: 36px 0; }
  .post-body table { font-size: 14px; }
  .post-body table th,
  .post-body table td { padding: 8px 10px; }
}

/* Container--narrow tighter on mobile so reading width stays comfortable */
@media (max-width: 560px) {
  .container--narrow { padding: 0 18px; }
  .post-hero { padding-left: 0; padding-right: 0; }
}

/* ═══════ GUIDE COVER (motif art + HTML text overlay) ═══════ */
.guide-cover {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  background-color: #1B2A4A;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 8px;
  overflow: hidden;
  display: block;
}
.guide-cover__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 9% 9% 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.guide-cover__eyebrow {
  color: #F5C518;
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(10px, 2.6cqw, 13px);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0;
}
.guide-cover__title {
  color: #FFFFFF;
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(16px, 6cqw, 26px);
  font-weight: 800;
  line-height: 1.05;
  margin: 0;
  text-wrap: balance;
}
.guide-cover__logo {
  align-self: flex-start;
  width: auto;
  height: clamp(58px, 17cqw, 104px);
  object-fit: contain;
  margin-bottom: 4px;
  z-index: 2;
}
/* Photographic cover (subject lower-right): push the title block down and keep it
   on the left, clear of the athlete; brand mark sits top-right. */
/* Photographic cover: shrink the photo and anchor it bottom-center so navy
   headroom opens at the top; center the logo + eyebrow + title in that space. */
.guide-cover--photo {
  background-color: #0d1424;
  background-size: 70% auto;
  background-position: bottom center;
}
.guide-cover--photo .guide-cover__overlay {
  top: 0;
  bottom: auto;
  left: 0;
  right: 0;
  max-width: none;
  padding: 8% 9% 0;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  gap: 9px;
}
.guide-cover--photo .guide-cover__logo {
  align-self: center;
}

/* Title-page style cover: white background, dark text, yellow rule */
.guide-cover--titlepage {
  background-color: #ffffff;
  border: 1px solid #e8e8e8;
}
.guide-cover--titlepage .guide-cover__overlay {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10% 10% 8%;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 0;
}
.guide-cover--titlepage .guide-cover__logo {
  align-self: center;
  height: clamp(72px, 20cqw, 120px);
  margin-bottom: 8%;
  content: url('assets/qb-logo-dark.png');
}
.guide-cover--titlepage .guide-cover__eyebrow {
  color: #1B2A4A;
  font-size: clamp(8px, 2.2cqw, 11px);
  letter-spacing: 0.12em;
  margin-bottom: 6%;
}
.guide-cover--titlepage .guide-cover__title {
  color: #1B2A4A;
  font-size: clamp(14px, 5cqw, 22px);
  line-height: 1.15;
  margin-bottom: 0;
}
.guide-cover__rule {
  width: 32%;
  height: 3px;
  background: #F5C518;
  border: none;
  margin: 6% auto;
  flex-shrink: 0;
}
.guide-cover__subtitle {
  color: #555;
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(9px, 2.4cqw, 12px);
  font-weight: 400;
  line-height: 1.4;
  margin: 0;
  text-wrap: balance;
}
.guide-cover { container-type: inline-size; }
/* Card thumbnail variant: smaller eyebrow/title scaling handled by container query above */
.card .guide-cover { margin-bottom: 20px; }

/* ══════════════════════════════════════════════════════════════════════════════
   PAGE COMPONENTS  (consolidated 2026-07-21)

   These rules used to live in page-local <style> blocks. That block sits AFTER
   the styles.css <link>, so at equal specificity it silently outranked this
   file: editing a component here had no visible effect on that page, with no
   error to explain why. Everything is now in one cascade, in one file.

   Rules that must still beat a same-named global rule are scoped explicitly
   (.page-home, .price-figure) instead of relying on source order.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Homepage: hero ──
   Scoped to .page-home because .hero (22 pages) and .hero__sub (27 pages) are
   shared names. Unscoped, these would redecorate every hero on the site. */
.page-home .hero { min-height: 72vh; background: var(--black); display: flex; align-items: center; padding: var(--header-height) 24px 80px; }
.page-home .hero__inner { max-width: 900px; margin: 0 auto; }
.page-home .hero__inner h1 { color: var(--white); margin-bottom: 24px; }
.page-home .hero__sub { font-size: 17px; color: var(--dark-body); max-width: 720px; margin-bottom: 32px; }

/* Hero proof bar: shared by index.html and fall-prevention.html, so this one
   stays unscoped. Declarations are unchanged from the homepage-only version;
   dropping the .page-home scope is what gives fall-prevention the styling it
   was already asking for with the class but never receiving. */
.hero__proof-bar { font-size: 13px; color: var(--gray-400); margin-top: 16px; display: flex; flex-wrap: wrap; gap: 16px; }
.hero__proof-bar span::before { content: ''; }
/* fall-prevention runs a single long span inside .hero__content (max 1200px),
   which would set a ~1150px line at 13px. Capped for readability. Anchored to
   body so the homepage, whose two spans share the row and self-limit, is
   untouched: a bare :not(.page-home) would still match via <html>. */
body:not(.page-home) .hero__proof-bar span { max-width: 720px; }

/* ── Homepage: inline lead-magnet capture ── */
.lead-capture { background: var(--gray-50); border: 1.5px solid var(--gray-200); border-radius: var(--radius-lg); padding: 32px 36px; max-width: 680px; margin: 0 auto; }
.lead-capture h3 { margin-bottom: 6px; }
.lead-capture p { font-size: 14px; color: var(--gray-600); margin-bottom: 20px; }
.email-row { display: flex; gap: 10px; flex-wrap: wrap; }
.email-row input { flex: 1; min-width: 200px; padding: 12px 16px; border: 1.5px solid var(--gray-200); border-radius: var(--radius); font-family: var(--font); font-size: 15px; color: var(--gray-900); }
.email-row input:focus { outline: 2px solid var(--yellow); border-color: transparent; }
.lead-capture .sub-note { font-size: 12px; color: var(--gray-400); margin-top: 10px; }

/* ── Homepage: offer stack ── */
.offer-item { display: flex; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--gray-200); }
.offer-item:last-child { border-bottom: 0; }
.offer-check { width: 22px; height: 22px; background: var(--yellow); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; font-size: 12px; font-weight: 700; }
.offer-item h4 { margin-bottom: 4px; }
.offer-item p { font-size: 14px; margin: 0; }

/* ── Homepage: price anchor row ── */
.price-row { display: flex; gap: 24px; align-items: stretch; flex-wrap: wrap; }
.price-box { background: var(--white); border: 1.5px solid var(--gray-200); border-radius: var(--radius-lg); padding: 24px; flex: 1 1 0; min-width: 200px; display: flex; flex-direction: column; }
.price-amount { font-size: 32px; font-weight: 800; color: var(--gray-900); letter-spacing: -0.03em; }
.price-label { font-size: 13px; color: var(--gray-400); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; }
.price-note { font-size: 13px; color: var(--gray-600); margin-top: 10px; }
.price-img { width: 200px; height: 260px; object-fit: contain; margin: 0 auto 18px; display: block; }
.price-figure { width: 200px; margin: 0 auto 18px; position: relative; }
.price-figure .price-img { margin: 0 auto 8px; }

/* The homepage iPad mock is a fixed-size pricing thumbnail, not the full
   device frame defined above. Scoped to .price-figure so the 11 other pages
   using .ipad-frame keep the shared component. */
.price-figure .ipad-frame { position: relative; box-sizing: border-box; width: 200px; height: 260px; margin: 0 auto 8px; padding: 9px; background: #141414; border-radius: 16px; box-shadow: 0 6px 16px rgba(0,0,0,.18); display: flex; }
.price-figure .ipad-frame::before { content: ''; position: absolute; top: 4px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: #3a3a3a; }
.price-figure .ipad-frame img { width: 100%; height: 100%; object-fit: cover; border-radius: 5px; display: block; }

/* ── Homepage: clinic photo band ── */
.clinic-band { display: flex; gap: 44px; align-items: center; flex-wrap: wrap; }
.clinic-band figure { flex: 0 0 auto; margin: 0; }
.clinic-band .clinic-copy { flex: 1 1 300px; }
.clinic-photo { width: 100%; max-width: 380px; height: auto; border-radius: 12px; display: block; box-shadow: 0 8px 24px rgba(0,0,0,.14); }

/* ── Homepage: testimonials (light background variant) ── */
.testimonial-card-light { background: var(--gray-50); border-left: 4px solid var(--yellow); border-radius: var(--radius-lg); padding: 24px 28px; }
.testimonial-card-light blockquote { font-size: 15px; color: var(--gray-700); line-height: 1.65; font-style: italic; margin-bottom: 14px; }
.testimonial-card-light cite { font-size: 13px; font-weight: 600; color: var(--gray-900); font-style: normal; }
.testimonial-attr { display: flex; align-items: center; gap: 12px; }
.testimonial-avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; background: var(--gray-200); }

/* ── Homepage: research list ── */
.research-item { padding: 20px 0; border-bottom: 1px solid var(--gray-100); }
.research-item:last-child { border-bottom: 0; }
.research-item .eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--gray-400); margin-bottom: 4px; }
.research-item h4 { margin-bottom: 6px; }
.research-item p { font-size: 14px; margin: 0; }

/* ── Homepage: steps, audience and differentiator grids ── */
.step-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.step-num { font-size: 40px; font-weight: 900; color: var(--yellow); line-height: 1; margin-bottom: 10px; }
.audience-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.diff-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }

/* ── Homepage: FAQ accordion (index.html is the only page using <details>) ── */
details { border-bottom: 1px solid var(--gray-200); padding: 16px 0; }
details:first-of-type { border-top: 1px solid var(--gray-200); }
summary { font-size: 16px; font-weight: 600; color: var(--gray-900); cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
summary::after { content: '+'; font-size: 20px; color: var(--gray-400); flex-shrink: 0; }
details[open] summary::after { content: '-'; }
details p { font-size: 15px; color: var(--gray-600); margin-top: 12px; line-height: 1.6; }

/* ── Homepage: closing CTA band and guarantee block ── */
.final-cta { background: var(--near-black); padding: 80px 24px; text-align: center; }
.final-cta h2 { color: var(--white); margin-bottom: 16px; }
.final-cta p { color: var(--dark-body); max-width: 560px; margin: 0 auto 32px; }

/* ── Demo page: layout ── */
.demo-layout { display: grid; grid-template-columns: 1fr 420px; gap: 64px; align-items: start; }

/* ── Demo page: request form ── */
.form-card { background: var(--white); border: 1.5px solid var(--gray-200); border-radius: var(--radius-lg); padding: 36px; position: sticky; top: 80px; }
.form-card h3 { margin-bottom: 6px; }
.form-group { margin-bottom: 18px; }
.form-group label { display: block; font-size: 13px; font-weight: 600; color: var(--gray-700); margin-bottom: 6px; }
.form-group input, .form-group select, .form-group textarea { width: 100%; padding: 12px 14px; border: 1.5px solid var(--gray-200); border-radius: var(--radius); font-family: var(--font); font-size: 15px; color: var(--gray-900); box-sizing: border-box; background: var(--white); }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: 2px solid var(--yellow); border-color: transparent; }
.form-group select:disabled { color: var(--gray-500); background: var(--gray-50); cursor: not-allowed; }
.form-group textarea { min-height: 90px; resize: vertical; font-family: inherit; }
.checkbox-list { display: flex; flex-direction: column; gap: 8px; }
.form-note { font-size: 12px; color: var(--gray-400); margin-top: 10px; text-align: center; line-height: 1.5; }

/* ── Demo page: outcomes, call steps, fallback block ── */
.outcome-item { display: flex; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--gray-100); }
.outcome-item:last-child { border-bottom: 0; }
.outcome-icon { width: 36px; height: 36px; background: var(--yellow); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; margin-top: 2px; }
.outcome-item h4 { margin-bottom: 4px; }
.outcome-item p { font-size: 14px; margin: 0; }
.call-step { display: flex; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--gray-100); }
.call-step:last-child { border-bottom: 0; }
.step-badge { background: var(--near-black); color: var(--yellow); font-weight: 800; font-size: 14px; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.not-ready-block { background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 28px 32px; margin-top: 40px; }
.not-ready-block h3 { margin-bottom: 16px; font-size: 18px; }
.not-ready-block .options { display: flex; gap: 16px; flex-wrap: wrap; }
.not-ready-block .opt { flex: 1; min-width: 220px; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 16px 20px; }
.not-ready-block .opt h4 { font-size: 14px; margin-bottom: 4px; }
.not-ready-block .opt p { font-size: 13px; color: var(--gray-600); margin: 0; }

/* ── App page: free vs full pricing cards (modifiers on .pricing-card above) ── */
.pricing-card--free { background: var(--near-black); color: var(--white); }
.pricing-card--full { background: var(--white); border: 2px solid var(--gray-200); }
.pricing-badge { display: inline-flex; font-size: 12px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; padding: 4px 10px; border-radius: var(--radius-sm); margin-bottom: 16px; }
.pricing-badge--free { background: var(--yellow); color: var(--black); }
.pricing-badge--full { background: var(--gray-900); color: var(--white); }
.pricing-card--free h3 { color: var(--white); margin-bottom: 8px; }
.pricing-card--full h3 { color: var(--gray-900); margin-bottom: 8px; }
.pricing-card--free .price-line { color: var(--yellow); font-size: 32px; font-weight: 900; margin-bottom: 8px; }
.pricing-card--full .price-line { color: var(--gray-900); font-size: 32px; font-weight: 900; margin-bottom: 8px; }
.pricing-card--free .price-sub { color: var(--dark-body); font-size: 13px; margin-bottom: 24px; }
.pricing-card--full .price-sub { color: var(--gray-600); font-size: 13px; margin-bottom: 24px; }
.pricing-list { list-style: none; margin: 0 0 28px; padding: 0; }
.pricing-list li { display: flex; gap: 12px; padding: 8px 0; font-size: 14px; border-bottom: 1px solid rgba(255,255,255,.06); }
.pricing-card--full .pricing-list li { border-bottom: 1px solid var(--gray-100); color: var(--gray-700); }
.pricing-list li:last-child { border-bottom: 0; }
.pricing-list li::before { content: '\2713'; font-weight: 700; flex-shrink: 0; }
.not-included { list-style: none; margin: 0 0 24px; padding: 0; }
.not-included li { font-size: 13px; color: var(--gray-500); padding: 4px 0; }
.not-included li::before { content: '\2212'; margin-right: 10px; }
.pricing-divider { border-top: 1px solid rgba(255,255,255,.1); margin: 20px 0; }

/* ── Shared: dot checklist (research.html; product.html overrides to checkmarks
   in the #software block above) ── */
.demo-checklist { display: flex; flex-direction: column; gap: 12px; }
.demo-checklist li { position: relative; padding-left: 24px; font-size: 15px; line-height: 1.6; color: var(--gray-700); }
.demo-checklist li::before { content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; background: var(--yellow); border-radius: 999px; }
.on-dark .demo-checklist li { color: var(--dark-body); }
.on-dark .demo-checklist li::before { background: var(--yellow); }

/* ── Page component responsive rules ── */
@media (max-width: 900px) {
  .demo-layout { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .step-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .clinic-band { gap: 22px; }
  .clinic-photo { max-width: 300px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 420px) {
  .step-row { grid-template-columns: 1fr; }
}