/* ============================================================
   Choicery Landing Page — landing.css
   Academic / Trustworthy style. Mobile-first.
   ============================================================ */

/* --- CSS Custom Properties --- */
:root {
  /* Brand: teal + ink (choicery.ai) */
  --color-primary: #0d1412;
  --color-primary-light: #243330;
  --color-primary-dark: #0a0f0e;
  --color-accent: #1a9c8d;
  --color-accent-light: #25b6a4;
  --color-accent-dark: #14817a;
  --color-ink: #0d1412;
  --color-bg: #ffffff;
  --color-bg-alt: #eef5f3;
  --color-card-tint: #eef5f3; /* carousel cards: the green Chrome shows for the explainer video background */
  --color-bg-dark: #0d1412;
  --color-text: #1c2623;
  --color-text-muted: #5b6b66;
  --color-text-light: #93a39d;
  --color-border: #e3e9e7;
  --color-border-light: #eef3f1;
  --color-code-bg: #0a0f0e;
  --color-success: #1a9c8d;
  --color-danger: #ef4444;

  --font-display: 'Archivo', var(--font-sans, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
  --font-heading: var(--font-sans, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
  --font-body: var(--font-sans, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  --max-width: 1140px;
  --section-py: 80px;
  --section-py-sm: 48px;
  --radius: 8px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,.1);
  --shadow-lg: 0 8px 30px rgba(0,0,0,.12);
}

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
/* Keep videos out of the hardware overlay plane. As an overlay, Chrome on
   Windows draws the video under a hole in the page; at fractional sizes (zoom,
   scroll position) hole and video miss by a pixel and a thin black line shows
   at the right or bottom edge. A solid mask changes nothing visible but makes
   the browser draw the video into the page like an image. The hero loop
   replaces it with its own fade mask. */
video {
  -webkit-mask-image: linear-gradient(#000, #000);
  mask-image: linear-gradient(#000, #000);
}
a { color: var(--color-accent); text-decoration: none; }
a:hover { color: var(--color-accent-dark); }

h1, h2, h3, h4, h5 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-primary);
}

/* Display headings use Archivo for brand character */
.hero h1,
.subpage-hero h1,
.section-title,
.final-cta h2 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.025em;
}
/* Even line lengths, so no heading ends on a single word */
.subpage-hero h1,
.section-title,
.final-cta h2 { text-wrap: balance; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* --- Utility --- */
.text-muted { color: var(--color-text-muted); }
.text-center { text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 28px;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: var(--radius);
  border: 2px solid transparent;
  cursor: pointer;
  transition: all .2s ease;
  text-decoration: none;
}
.btn-primary {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
}
.btn-primary:hover {
  background: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.btn-outline {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn-outline:hover {
  background: var(--color-primary);
  color: #fff;
  transform: translateY(-1px);
}
.btn-sm {
  padding: 8px 20px;
  font-size: 0.85rem;
}
.btn-block { width: 100%; }

/* ============================================================
   HEADER / NAV
   ============================================================ */
.landing-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
  transition: box-shadow .3s;
}
.landing-nav.scrolled { box-shadow: var(--shadow-sm); }

.landing-nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  max-width: none;
  padding: 0 28px;
}

/* --- Brand lockup (icon mark + wordmark) --- */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.brand-mark {
  width: 30px;
  height: 30px;
  border-radius: 22%;
  background: var(--color-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.brand-mark-inner {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 20px;
  line-height: 1;
  letter-spacing: -0.06em;
  color: var(--color-ink);
  text-transform: lowercase;
}
.brand-mark-dot {
  display: inline-block;
  width: 0.22em;
  height: 0.22em;
  background: #fff;
  margin-left: 0.05em;
}
.brand-word {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.3rem;
  letter-spacing: -0.045em;
  text-transform: lowercase;
  color: var(--color-ink);
  line-height: 1;
}
.brand-word .brand-dot { color: var(--color-accent); }

.nav-links {
  display: none;
  list-style: none;
  gap: 28px;
}
.nav-links a {
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--color-text-muted);
  transition: color .2s;
}
.nav-links a:hover { color: var(--color-primary); }

.nav-cta { display: none; }
.nav-login {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-text-muted);
  margin-right: 18px;
  vertical-align: middle;
  transition: color .2s;
}
.nav-login:hover { color: var(--color-primary); }

.nav-mobile-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text);
}
.nav-mobile-toggle svg { width: 24px; height: 24px; }

/* Mobile nav menu */
.mobile-menu {
  display: none;
  position: fixed;
  top: 64px;
  left: 0;
  right: 0;
  /* Short phones: the menu scrolls on its own, so the last links and the
     Start Free button stay reachable. */
  max-height: calc(100vh - 64px);
  max-height: calc(100dvh - 64px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #fff;
  border-bottom: 1px solid var(--color-border);
  padding: 8px 24px 20px;
  box-shadow: var(--shadow-md);
  z-index: 99;
}
.mobile-menu.open { display: block; }
.mobile-menu a {
  display: block;
  padding: 11px 0;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border-light);
}
.mobile-menu a:last-child { border-bottom: none; }
.mobile-menu a.btn {
  display: flex;
  width: 100%;
  margin-top: 14px;
  padding: 13px 20px;
  color: #fff;
}
/* Tablets: the menu drops down as a panel under the menu button instead of
   a full-width sheet. */
@media (min-width: 640px) {
  .mobile-menu {
    left: auto;
    right: 16px;
    width: 340px;
    border: 1px solid var(--color-border);
    border-top: none;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  }
}

/* ============================================================
   SECTION 1: HERO
   ============================================================ */
.hero {
  padding: 120px 0 var(--section-py);
  background: #eef5f3;
  overflow: hidden;
}

.hero-content { text-align: center; }

.hero h1 {
  font-size: 2.5rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 20px;
  color: var(--color-primary-dark);
}
.hero h1 .accent { color: var(--color-accent); }

/* --- Nav dropdown (Methods) --- */
.nav-links .has-dropdown { position: relative; }
.has-dropdown:hover::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 16px;
}
.nav-dropdown {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 8px;
  min-width: 230px;
  display: none;
  z-index: 200;
}
.has-dropdown:hover .nav-dropdown,
.has-dropdown:focus-within .nav-dropdown { display: block; }
.nav-dropdown a {
  display: block;
  padding: 9px 12px;
  border-radius: 6px;
  font-size: 0.92rem;
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
}
.nav-dropdown a:hover { background: var(--color-bg-alt); }

/* --- Subpage hero (features, analytics, how-it-works, transparency, pricing) --- */
.subpage-hero {
  padding: 140px 0 56px;
  background: #eef5f3;
}
.subpage-hero h1 {
  font-size: 2.3rem;
  margin-bottom: 14px;
}
.subpage-hero p {
  font-size: 1.05rem;
  color: var(--color-text-muted);
  max-width: 680px;
  line-height: 1.65;
}

/* --- Transparency hero: lead text left, replication-package spec sheet right.
       Stacks below 992px in DOM order: title, lead, caption, spec sheet. --- */
.subpage-hero--package .container {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.subpage-hero--package h1 { margin-bottom: 14px; }
.subpage-hero--package .hero-pkg-lead { margin: 0; }
.subpage-hero .hero-pkg-caption {
  margin: 36px 0 12px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--color-text-muted);
}
.hero-pkg {
  margin: 0;
  max-width: 560px;
  border-top: 2px solid var(--color-primary);
}
.hero-pkg-row {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid #d3e2de;
}
.hero-pkg dt {
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--color-text-muted);
  padding-top: 1px;
}
.hero-pkg dd {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.5;
  color: var(--color-text);
}
.hero-pkg dd strong { font-weight: 600; color: var(--color-primary); }
@media (min-width: 992px) {
  .subpage-hero--package .container {
    grid-template-columns: minmax(0, 1fr) 490px;
    grid-template-areas:
      "title caption"
      "lead  list";
    column-gap: 60px;
    row-gap: 16px;
    align-items: start;
  }
  .subpage-hero--package h1 { grid-area: title; margin-bottom: 0; }
  .subpage-hero--package .hero-pkg-lead { grid-area: lead; }
  .subpage-hero .hero-pkg-caption { grid-area: caption; align-self: end; margin: 0 0 6px; }
  .hero-pkg { grid-area: list; max-width: none; }
  .hero-pkg-row { grid-template-columns: 128px minmax(0, 1fr); padding: 9px 0; }
}

.hero-sub {
  font-size: 1.15rem;
  color: var(--color-text-muted);
  max-width: 640px;
  margin: 0 auto 32px;
  line-height: 1.7;
}

.hero-reassure {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-top: 14px;
}

.hero-ctas {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 48px;
}

.hero-image {
  max-width: 840px;
  margin: 0 auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-border);
  overflow: hidden;
  background: var(--color-bg-alt);
}
.hero-image img { width: 100%; }

/* --- Hero: copy above the demo video --- */
.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: start;
}
.hero-copy { text-align: center; }
.hero-copy .hero-ctas { margin-bottom: 0; align-items: center; }
.hero-copy .hero-reassure { margin-top: 16px; }

.hero-link {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-accent-dark);
  border-bottom: 1px solid var(--color-accent-dark);
  padding-bottom: 2px;
}
.hero-link:hover { color: var(--color-accent); border-color: var(--color-accent); }

.hero-showcase {
  min-width: 0;
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
}
.hero-deck-frame {
  position: relative;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 12px;
  box-shadow: 0 24px 60px rgba(13, 20, 18, 0.10);
}
.hero-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: #fff;
}

.hero-deck-bar {
  margin-top: 20px;
}
.hero-deck-caption {
  font-style: italic;
  font-size: 0.92rem;
  color: var(--color-text-muted);
  margin: 0;
}
.btn-arrow { width: 16px; height: 16px; }

/* --- Choice demo (methods section): base styles show the finished state,
       the animations in the motion block below replay it --- */
.choice-demo {
  padding: 24px 20px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.cd-cards { display: flex; gap: 10px; width: 100%; }
.cd-card {
  position: relative;
  flex: 1;
  min-width: 0;
  border: 1.5px solid var(--color-border);
  border-radius: 10px;
  background: #fff;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cd-pick {
  border-color: var(--color-accent);
  box-shadow: 0 6px 18px rgba(26, 156, 141, 0.18);
}
.cd-img { height: 56px; border-radius: 6px; background: #eef5f3; }
.cd-line { height: 8px; border-radius: 5px; background: var(--color-border-light); }
.cd-w86 { width: 86%; }
.cd-w62 { width: 62%; }
.cd-w92 { width: 92%; }
.cd-w70 { width: 70%; }
.cd-w78 { width: 78%; }
.cd-w58 { width: 58%; }
.cd-price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: -0.02em;
  color: var(--color-primary-dark);
  margin-top: 2px;
}
.cd-ring {
  position: absolute;
  top: -7px;
  left: -7px;
  right: -7px;
  bottom: -7px;
  border: 2px solid var(--color-accent);
  border-radius: 13px;
  opacity: 0;
  pointer-events: none;
}
.cd-badge {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cd-badge svg { width: 13px; height: 13px; }
.cd-arrow { width: 22px; height: 22px; color: var(--color-text-light); }
.cd-panel {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: #fff;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  box-shadow: var(--shadow-sm);
}
.cd-panel-title {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--color-text-light);
}
.cd-row { display: flex; flex-direction: column; gap: 4px; }
.cd-row-head { display: flex; justify-content: space-between; }
.cd-label { font-size: 0.78rem; font-weight: 500; color: var(--color-text-muted); }
.cd-val { font-size: 0.78rem; font-weight: 600; color: var(--color-primary-dark); }
.cd-track { height: 7px; border-radius: 5px; background: var(--color-border-light); overflow: hidden; }
.cd-fill { height: 100%; border-radius: 5px; background: var(--color-accent-light); }
.cd-fill-1 { width: 22%; }
.cd-fill-2 { width: 51%; background: var(--color-accent); }
.cd-fill-3 { width: 27%; }

/* --- Motion: hero load-in, choice demo, micro details.
       Everything in here is decorative; reduced-motion users get the
       static finished state from the base styles above. --- */
@media (prefers-reduced-motion: no-preference) {

  /* Hero load-in: runs once per page load, staggered */
  @keyframes heroRise {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: none; }
  }
  .hero-copy h1,
  .hero-copy .hero-sub,
  .hero-copy .hero-ctas,
  .hero-copy .hero-reassure,
  .hero-deck,
  .hero-deck-bar {
    animation: heroRise 0.55s ease-out both;
  }
  .hero-copy h1 { animation-delay: 0.08s; }
  .hero-deck { animation-delay: 0.2s; }
  .hero-copy .hero-sub { animation-delay: 0.22s; }
  .hero-copy .hero-ctas { animation-delay: 0.34s; }
  .hero-copy .hero-reassure { animation-delay: 0.44s; }
  .hero-deck-bar { animation-delay: 0.5s; }

  /* Choice demo loop (11s cycle) */
  @keyframes cdRing {
    0%, 16% { opacity: 0; transform: scale(0.96); }
    20% { opacity: 1; transform: scale(1); }
    24% { opacity: 0.35; transform: scale(1.04); }
    28%, 100% { opacity: 0; transform: scale(1.07); }
  }
  .cd-ring { animation: cdRing 11s ease-out infinite; }
  @keyframes cdPick {
    0%, 24% { border-color: var(--color-border); box-shadow: none; }
    28%, 88% { border-color: var(--color-accent); box-shadow: 0 6px 18px rgba(26, 156, 141, 0.18); }
    96%, 100% { border-color: var(--color-border); box-shadow: none; }
  }
  .cd-pick { animation: cdPick 11s ease infinite; }
  @keyframes cdBadge {
    0%, 26% { opacity: 0; transform: scale(0.4); }
    30% { opacity: 1; transform: scale(1.12); }
    33%, 88% { opacity: 1; transform: scale(1); }
    96%, 100% { opacity: 0; transform: scale(0.4); }
  }
  .cd-badge { animation: cdBadge 11s ease infinite; }
  @keyframes cdBar {
    0%, 34% { transform: scaleX(0); }
    52%, 88% { transform: scaleX(1); }
    96%, 100% { transform: scaleX(0); }
  }
  .cd-fill { transform-origin: left center; animation: cdBar 11s cubic-bezier(0.25, 0.6, 0.3, 1) infinite; }
  .cd-fill-2 { animation-delay: 0.12s; }
  .cd-fill-3 { animation-delay: 0.24s; }
  @keyframes cdVal {
    0%, 48% { opacity: 0; }
    56%, 88% { opacity: 1; }
    96%, 100% { opacity: 0; }
  }
  .cd-val { animation: cdVal 11s ease infinite; }

  /* Micro details */
  @keyframes arrowNudge {
    0%, 72% { transform: translateX(0); }
    78% { transform: translateX(5px); }
    84%, 100% { transform: translateX(0); }
  }
  .btn-arrow { animation: arrowNudge 6s ease infinite; }
  .btn-primary:hover .btn-arrow { animation: none; transform: translateX(4px); transition: transform 0.2s ease; }

  .nav-links > li > a { position: relative; }
  .nav-links > li > a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 100%;
    height: 2px;
    background: var(--color-accent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.22s ease;
  }
  .nav-links > li > a:hover::after { transform: scaleX(1); }
}
.hero-image .placeholder-img {
  width: 100%;
  aspect-ratio: 16/9;
  background: #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

/* ============================================================
   SECTION 2: METHODS OVERVIEW
   ============================================================ */
.methods {
  padding: var(--section-py) 0;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border-light);
}
.methods-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin-top: 40px;
  align-items: start;
}
.methods-table-wrap {
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  background: #fff;
}
.methods-table {
  width: 100%;
  border-collapse: collapse;
}
.methods-table tr {
  border-bottom: 1px solid var(--color-border-light);
  transition: background .15s ease;
}
.methods-table tr:last-child { border-bottom: none; }
.methods-table tr:hover { background: #eef5f3; }
.methods-table th[scope="row"] {
  width: 32%;
  text-align: left;
  vertical-align: top;
  padding: 16px 20px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--color-accent-dark);
  white-space: nowrap;
}
.methods-table td {
  padding: 16px 20px;
  font-size: 0.92rem;
  color: var(--color-text);
  line-height: 1.55;
}
.methods-example {
  margin: 0;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  background: var(--color-bg-alt);
}
.methods-example img {
  width: 100%;
  display: block;
}
.methods-example figcaption {
  padding: 12px 18px;
  font-size: 0.82rem;
  color: var(--color-text-muted);
  background: #fff;
  border-top: 1px solid var(--color-border-light);
  text-align: center;
}
@media (max-width: 600px) {
  .methods-table th[scope="row"] {
    white-space: normal;
    width: 38%;
  }
}

/* ============================================================
   SECTION 2c: DUAL RESPONSE (Integrated vs Two-Block)
   ============================================================ */
/* ============================================================
   SECTION 2a: APPLICATIONS
   ============================================================ */
.applications {
  padding: var(--section-py) 0;
  background: var(--color-bg-alt);
}
.app-list {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px 56px;
  max-width: 1040px;
}
.app-list li {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  line-height: 1.65;
}
.app-list strong {
  color: var(--color-text);
}

.dual-response {
  padding: var(--section-py) 0;
  background: var(--color-bg);
}
.dual-response-content > h2 {
  font-size: 1.6rem;
  margin: 8px 0 14px;
}
.dual-response-content > p {
  max-width: 760px;
  font-size: 1rem;
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-bottom: 24px;
}
.dual-response-modes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-bottom: 28px;
}
.dual-mode-card {
  position: relative;
  padding: 22px 22px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-alt);
}
.dual-mode-card.recommended {
  border-color: var(--color-accent);
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.dual-mode-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #fff;
  background: var(--color-accent);
  padding: 4px 10px;
  border-radius: 12px;
  line-height: 1.4;
}
.dual-mode-card h3 {
  font-size: 1.1rem;
  margin-bottom: 4px;
}
.dual-mode-card.recommended h3 {
  padding-right: 130px;
}
.dual-mode-tag {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--color-accent-dark);
  margin-bottom: 10px;
}
.dual-mode-card > p:last-child {
  font-size: 0.94rem;
  color: var(--color-text);
  line-height: 1.6;
  margin: 0;
}
/* Silent loop recordings of both designs: no controls, play while on screen.
   The frame is cropped to the scene (labels on top, board below) and the
   "View larger" button sits on the video instead of below it. */
.dual-mode-loop {
  position: relative;
  margin: 4px 0 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
}
.dual-mode-loop video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 23 / 10;
  object-fit: cover;
  object-position: 50% 23%;
  background: #fff;
  pointer-events: none;
}
.dual-mode-loop .method-image-expand {
  position: absolute;
  right: 10px;
  bottom: 10px;
  margin: 0;
  padding: 6px 12px;
}
/* Spans the full width of the two design cards above it. */
.dual-response-content > .dual-response-cite {
  max-width: none;
}
.dual-response-cite {
  font-size: 0.94rem;
  color: var(--color-text);
  line-height: 1.65;
}
.dual-response-citation {
  display: block;
  margin-top: 10px;
  font-size: 0.82rem;
  color: var(--color-text-muted);
}
@media (min-width: 1024px) {
  .dual-response-modes {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 1024px) {
  .dual-response-content > h2 {
    font-size: 1.9rem;
  }
}

/* ============================================================
   IMPORT FROM OTHER PLATFORMS (layout: see "Import" near the end)
   ============================================================ */
.import-list {
  display: grid;
  gap: 6px;
  margin: 14px 0 0;
  padding-left: 18px;
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--color-text);
}
.import-list li::marker {
  color: var(--color-accent);
}

/* ============================================================
   SECTION 3: PROBLEM
   ============================================================ */
.problem {
  padding: var(--section-py) 0;
  background: var(--color-bg);
}
.section-title {
  font-size: 2rem;
  margin-bottom: 16px;
}
.section-desc {
  font-size: 1.05rem;
  color: var(--color-text-muted);
  max-width: 600px;
  margin-bottom: 40px;
}
.section-desc-center { margin-left: auto; margin-right: auto; }

.problem-list {
  max-width: 760px;
}
.problem-row {
  padding: 26px 0;
}
.problem-row + .problem-row {
  border-top: 1px solid var(--color-border);
}
.problem-row h3 {
  font-size: 1.1rem;
  margin-bottom: 6px;
  color: var(--color-text);
}
.problem-row p {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  line-height: 1.65;
  max-width: 680px;
}

/* ============================================================
   SECTION 4: SOLUTION (Three Pillars)
   ============================================================ */
.solution {
  padding: var(--section-py) 0;
  background: var(--color-bg-alt);
}

/* ============================================================
   ANALYTICS TEASER (main page)
   ============================================================ */
.analytics-teaser {
  padding: var(--section-py) 0;
  background: var(--color-bg-alt);
}
.analytics-teaser .btn { margin-top: 6px; }
.pillar-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  margin-top: 40px;
}
.pillar-col {
  border-top: 2px solid var(--color-primary);
  padding-top: 22px;
}
.pillar-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.2rem;
  margin-bottom: 12px;
  color: var(--color-primary);
}
.pillar-glyph {
  display: inline-flex;
  color: var(--color-accent-dark);
}
.pillar-glyph svg { width: 22px; height: 22px; }
.pillar-col > p {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  margin-bottom: 16px;
  line-height: 1.6;
}
.pillar-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pillar-list li {
  font-size: 0.88rem;
  color: var(--color-text);
  padding-left: 22px;
  position: relative;
}
.pillar-list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--color-accent);
  font-weight: 700;
}

/* ============================================================
   SECTION 5: FEATURE SHOWCASE (Tabs)
   ============================================================ */
.features {
  padding: var(--section-py) 0;
  background: var(--color-bg);
}
.feature-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid var(--color-border);
  margin-bottom: 32px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.feature-tab {
  padding: 10px 18px;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  white-space: nowrap;
  transition: color .2s, border-color .2s;
}
.feature-tab:hover { color: var(--color-primary); }
.feature-tab.active {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}
.feature-panel {
  display: none;
}
.feature-panel.active { display: grid; }
.feature-panel {
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
}

/* --- Stacked feature blocks (features subpage) --- */
.feature-sections {
  padding: 8px 0 var(--section-py);
  background: var(--color-bg);
}
/* A later group of blocks with its own heading, below another section. */
.feature-sections--headed { padding-top: var(--section-py); }
.feature-block {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: center;
  padding: 56px 0;
  border-bottom: 1px solid var(--color-border);
}
/* The section below already adds its own padding */
.feature-block:last-of-type { border-bottom: none; padding-bottom: 0; }
.feature-block > .feature-screenshot { order: 2; }

/* --- Alternate section background (subpages) --- */
.section-alt { background: var(--color-bg-alt); }

/* --- Generic prose section (subpages) --- */
.hb-core {
  padding: var(--section-py) 0;
  background: var(--color-bg);
}
.hb-core .feature-list { max-width: 720px; }
/* .hb-core comes after .section-alt and would reset the tint */
.hb-core.section-alt { background: var(--color-bg-alt); }

/* --- Silent explainer loops (analytics model rows): no controls, play while on screen --- */
.model-loop {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #fff;
}
.model-loop video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: #fff;
  pointer-events: none;
}
.model-loop { position: relative; }

/* --- Academic references / method foundations --- */
.ref-block {
  padding: 48px 0 var(--section-py);
  background: var(--color-bg);
}
/* Two sections with the same background in a row: a hairline marks where the
   second one starts */
.feature-sections:not(.section-alt) + .ref-block,
.hb-core:not(.section-alt) + .ref-block,
.feature-sections:not(.section-alt) + .hb-core:not(.section-alt),
.compare + .audience,
.hiw-project + .faq { border-top: 1px solid var(--color-border); }
.ref-block .section-title { font-size: 1.4rem; }
.ref-note {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  max-width: 720px;
  margin-bottom: 24px;
  line-height: 1.6;
}
.ref-list {
  list-style: none;
  padding: 0;
  max-width: 860px;
  column-gap: 48px;
}
.ref-list li {
  font-size: 0.8rem;
  color: var(--color-text-light);
  line-height: 1.5;
  padding-left: 20px;
  text-indent: -20px;
  margin-bottom: 11px;
  break-inside: avoid;
}
.ref-list li em { font-style: italic; }

/* --- Small inline note under a model row / feature --- */
.method-note {
  font-size: 0.82rem;
  color: var(--color-text-light);
  margin-top: 12px;
  line-height: 1.55;
}

/* --- Analytics chapters: the model badge sits in the kicker line --- */
.hiw-kicker .analytics-badge {
  position: static;
  display: inline-block;
  margin-left: 6px;
  vertical-align: 1px;
}
.model-when {
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: 8px;
}
.feature-screenshot {
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  overflow: hidden;
  background: var(--color-bg-alt);
  box-shadow: var(--shadow-sm);
}
.feature-screenshot .placeholder-img {
  width: 100%;
  aspect-ratio: 16/10;
  background: #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

/* --- Method carousel: one screenshot per variant, switched by tabs or arrows --- */
.method-carousel { background: var(--color-bg); }
.method-carousel__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 14px;
  background: var(--color-card-tint);
  border-bottom: 1px solid var(--color-border);
}
.method-carousel__tab {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1;
  color: var(--color-text-muted);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.method-carousel__tab:hover { color: var(--color-primary); border-color: var(--color-text-light); }
.method-carousel__tab[aria-selected="true"] {
  color: #fff;
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.method-carousel__tab:focus-visible,
.method-carousel__arrow:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
/* All slides share one grid cell, so the box keeps the height of the tallest
   slide and switching never shifts the page. */
.method-carousel__stage { display: grid; }
.method-carousel__slide { grid-area: 1 / 1; margin: 0; display: flex; flex-direction: column; }
.method-carousel__slide[hidden] { display: flex; visibility: hidden; }
.method-carousel__slide img { width: 100%; height: auto; background: #fff; }
/* The slides share the height of the tallest one: tinted boxes (recordings,
   phone screens) grow to fill it instead of leaving a white band. */
.method-carousel__slide > .method-carousel__visual--loop,
.method-carousel__slide > .method-carousel__visual--phone { flex: 1 0 auto; }
.method-carousel__visual {
  display: block;
  padding: 8px;
  background: #fff;
}
.method-carousel__visual img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center top;
}
/* Explainer loop next to 16:10 screenshots: the 16:9 video sits centred on its
   own background colour, so the box keeps the screenshot height without a seam. */
.method-carousel__visual--loop {
  display: flex;
  align-items: center;
  aspect-ratio: 16 / 10;
  padding: 0;
  background: var(--color-card-tint);
}
.method-carousel__visual--loop video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  pointer-events: none;
}
.method-carousel__visual--phone {
  position: relative;
  aspect-ratio: 1 / 1;
  padding: 22px;
  background: var(--color-bg-alt);
}
/* Stacked carousels on tablets are wide: a square box would leave empty
   bands around the 16:10 screenshots that share it. */
@media (min-width: 640px) and (max-width: 1023px) {
  .method-carousel__visual--phone { aspect-ratio: 16 / 10; }
}
.method-carousel__visual--phone img,
.method-carousel__visual--phone video {
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  height: calc(100% - 44px);
  min-height: 0;
  max-width: calc(100% - 44px);
  border: 6px solid #243534;
  border-radius: 20px;
  box-shadow: 0 8px 24px rgb(15 23 42 / 16%);
}
.method-carousel__caption {
  margin-top: auto;
  padding: 14px 18px 0;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-border);
}
.method-carousel__caption strong { color: var(--color-primary); font-weight: 600; }
.method-carousel__example-note { margin: 0; padding: 0 18px 16px; font-size: 0.78rem; line-height: 1.5; color: var(--color-text-muted); }
.method-carousel__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 14px;
}
.method-carousel__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-primary);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.method-carousel__arrow:hover { border-color: var(--color-text-light); background: var(--color-bg-alt); }
.method-carousel__arrow svg { width: 18px; height: 18px; }
.method-carousel__count {
  font-size: 0.8rem;
  color: var(--color-text-light);
  font-variant-numeric: tabular-nums;
}

.method-image-expand {
  display: block;
  margin: 12px auto;
  padding: 10px 16px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-bg);
  color: var(--color-primary);
  font: inherit;
  font-size: .8rem;
  cursor: pointer;
}
.method-carousel__nav .method-image-expand { margin: 0; }

/* Compact card next to a text column (landing.js adds .has-compact-carousel):
   from 1024px the caption sits under the text, arrows and count in the tab
   bar and "View larger" as an icon in the picture, so the card is about as
   tall as the text beside it. Narrower screens stack and keep the full card. */
.feature-captions,
.method-carousel__mini,
.method-carousel .method-carousel__zoom { display: none; }
.method-carousel__stage { position: relative; }

/* "View larger" as an icon in the lower right corner of a picture or loop
   (compact carousels below, analytics explainer loops) */
.method-carousel__zoom {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: rgb(255 255 255 / 92%);
  color: var(--color-primary);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}
.method-carousel__zoom svg { width: 15px; height: 15px; }
.method-carousel__zoom:hover { background: var(--color-bg-alt); }
.method-carousel__zoom:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
@media (min-width: 1024px) {
  .has-compact-carousel > .method-carousel { position: relative; }
  /* Slightly smaller tabs, so they fit on one line next to the arrows */
  .has-compact-carousel .method-carousel__tabs { gap: 4px; padding: 10px 84px 10px 12px; }
  .has-compact-carousel .method-carousel__tab { font-size: 0.76rem; padding: 7px 11px; }
  .has-compact-carousel .method-carousel__caption,
  .has-compact-carousel .method-carousel__nav { display: none; }
  .has-compact-carousel .method-carousel__mini {
    position: absolute;
    top: 0;
    right: 12px;
    height: var(--carousel-tabs-h, 58px);
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .method-carousel__mini .method-carousel__arrow { width: 30px; height: 30px; }
  .method-carousel__mini .method-carousel__arrow svg { width: 15px; height: 15px; }
  /* The active tab already shows the position; the count stays for screen readers */
  .method-carousel__mini .method-carousel__count {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .has-compact-carousel .method-carousel__zoom { display: inline-flex; }
  /* All captions share one grid cell, so switching never moves the text */
  .has-compact-carousel .feature-captions {
    display: grid;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--color-border);
  }
  .feature-details .feature-caption {
    grid-area: 1 / 1;
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--color-text-muted);
  }
  .feature-details .feature-caption[hidden] { display: block; visibility: hidden; }
  .feature-details .feature-caption strong { color: var(--color-primary); font-weight: 600; }
  /* Touch screens: the fade over scrolling tabs stops before the arrows */
  .has-compact-carousel > .method-carousel::after { right: 80px; }
}
.method-image-expand:hover { background: var(--color-bg-alt); }
.method-image-expand:focus-visible,
.method-image-viewer__close:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.method-viewer-open { overflow: hidden; }
.method-image-viewer {
  width: min(1440px, calc(100% - 24px));
  max-width: none;
  max-height: calc(100dvh - 24px);
  margin: auto;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: #fff;
  color: var(--color-text);
  overscroll-behavior: contain;
}
.method-image-viewer::backdrop { background: rgb(15 23 42 / 75%); }
.method-image-viewer__header {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--color-border);
  background: #fff;
}
.method-image-viewer__header h2 { margin: 0; font-size: 1rem; }
.method-image-viewer__close {
  flex-shrink: 0;
  padding: 10px 16px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-bg-alt);
  color: var(--color-primary);
  font: inherit;
  cursor: pointer;
}
.method-image-viewer__image { display: block; width: auto; max-width: 100%; height: auto; margin-inline: auto; }
.method-image-viewer__video { display: block; max-width: 100%; height: min(78dvh, 844px); margin-inline: auto; }
.method-image-viewer__video.is-landscape { width: 100%; height: auto; max-height: calc(100dvh - 96px); background: var(--color-card-tint); }
.method-image-viewer > [hidden] { display: none; }

.feature-details h3 {
  font-size: 1.3rem;
  margin-bottom: 12px;
}
.feature-details p {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  margin-bottom: 16px;
  line-height: 1.7;
}
.feature-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.feature-list li {
  font-size: 0.9rem;
  color: var(--color-text);
  padding-left: 24px;
  position: relative;
  line-height: 1.5;
}
.feature-list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--color-accent);
  font-weight: 700;
}
.feature-note {
  margin-top: 18px;
  padding: 14px 16px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 0.85rem;
  color: var(--color-text-muted);
  line-height: 1.6;
}
.feature-note strong { color: var(--color-primary); }

/* ============================================================
   SECTION 5b: ADVANCED ANALYTICS
   ============================================================ */
.analytics {
  padding: var(--section-py) 0;
  background: var(--color-bg);
}
.analytics-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 40px;
}
.analytics-card {
  position: relative;
  padding: 28px 26px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  box-shadow: var(--shadow-sm);
  transition: transform .2s, box-shadow .2s;
}
.analytics-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.analytics-card.highlight-card { border-color: var(--color-accent-light); }
.analytics-card.accent-card {
  border: 2px solid var(--color-accent);
  background: var(--color-bg);
}
.analytics-badge {
  position: absolute;
  top: 18px;
  right: 18px;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-accent-dark);
  background: #eef5f3;
  border: 1px solid var(--color-accent-light);
  padding: 3px 10px;
  border-radius: 20px;
}
.analytics-badge.accent {
  color: #fff;
  background: var(--color-accent);
  border-color: var(--color-accent);
}
.analytics-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.analytics-card.highlight-card .analytics-head { padding-right: 90px; }
.analytics-icon {
  width: 26px;
  height: 26px;
  color: var(--color-accent-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.analytics-icon svg { width: 24px; height: 24px; }
.analytics-card h3 {
  font-size: 1.08rem;
  color: var(--color-primary);
  margin-bottom: 2px;
}
.analytics-method {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--color-accent-dark);
}
.analytics-desc {
  font-size: 0.92rem;
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* ============================================================
   SECTION 6: DUAL AUDIENCE
   ============================================================ */
.audience {
  padding: var(--section-py) 0;
  background: var(--color-bg);
}
.audience-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  margin-top: 40px;
}
.audience-col {
  border-top: 2px solid var(--color-primary);
  padding-top: 22px;
}
.audience-col h3 {
  font-size: 1.2rem;
  margin-bottom: 12px;
  color: var(--color-primary);
}
.audience-col p {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  line-height: 1.7;
}

/* ============================================================
   SECTION 7: HOW IT WORKS (Steps)
   ============================================================ */
.how-it-works {
  padding: var(--section-py) 0;
  background: var(--color-bg);
}
.workflow-steps {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  margin-top: 40px;
}
.workflow-step {
  position: relative;
  padding-left: 56px;
}
.workflow-marker {
  position: absolute;
  left: 0;
  top: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.92rem;
  font-weight: 600;
  background: var(--color-bg);
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
}
.workflow-step::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 44px;
  bottom: -28px;
  width: 2px;
  background: var(--color-border);
}
.workflow-step:last-child::before { display: none; }
.workflow-step h3 {
  font-size: 1.05rem;
  margin-bottom: 8px;
  color: var(--color-text);
}
.workflow-step p {
  font-size: 0.88rem;
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* ============================================================
   SECTION 8: TRANSPARENCY DEEP-DIVE
   ============================================================ */
.transparency {
  padding: var(--section-py) 0;
  background: var(--color-bg-dark);
  color: #e2e8f0;
}
.transparency .section-title { color: #f1f5f9; }
.transparency .section-desc { color: #94a3b8; }

.code-block {
  background: var(--color-code-bg);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin: 32px 0;
  overflow-x: auto;
  border: 1px solid #334155;
}
.code-block pre {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1.7;
  color: #e2e8f0;
  margin: 0;
  white-space: pre;
}
.code-block .comment { color: #64748b; }
.code-block .keyword { color: #7dd3fc; }
.code-block .const-name { color: #fbbf24; }
.code-block .number { color: #a78bfa; }
.code-block .string { color: #86efac; }

/* Stacked full-width excerpts of the real package scripts, verbatim, with their
   real line numbers so they read as a slice of a much longer file. */
.code-stack {
  display: grid;
  gap: 20px;
  margin: 32px 0;
}
.code-stack .code-block {
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.code-stack .code-block pre {
  padding: 0 20px 18px;
  font-size: 0.78rem;
  overflow-x: auto;
  font-variant-ligatures: none;
}
.code-more {
  margin: 0;
  padding: 12px 20px;
  border-top: 1px dashed #334155;
  font-size: 0.84rem;
  line-height: 1.55;
  color: #94a3b8;
}
.code-more strong { font-weight: 600; color: #e2e8f0; }
.code-stack .code-lang {
  flex-wrap: wrap;
  row-gap: 4px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.78rem;
}
.code-file { color: #e2e8f0; }
.code-meta { margin-left: auto; color: #64748b; }
.code-block .ln {
  display: inline-block;
  width: 3ch;
  margin-right: 2.5ch;
  text-align: right;
  color: #475569;
  user-select: none;
}
.code-lang {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-bottom: 1px solid #334155;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #94a3b8;
  margin-bottom: 16px;
}
.code-lang-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-accent-light);
  flex-shrink: 0;
}
.code-lang-dot.accent { background: #c4b5fd; }

/* Downloadable replication packages */
.package-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 28px 0 36px;
}
.package-card {
  background: var(--color-code-bg);
  border: 1px solid #334155;
  border-radius: var(--radius-lg);
  padding: 22px 24px;
}
.package-card.accent-package { border-color: #4c4476; }
.package-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.package-name {
  font-family: var(--font-display, var(--font-mono));
  font-weight: 700;
  font-size: 1.05rem;
  color: #f1f5f9;
}
.package-lang {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(125, 211, 252, 0.12);
  color: #7dd3fc;
  border: 1px solid rgba(125, 211, 252, 0.3);
  flex-shrink: 0;
}
.package-lang.accent {
  background: rgba(196, 181, 253, 0.12);
  color: #c4b5fd;
  border-color: rgba(196, 181, 253, 0.3);
}
.package-desc {
  font-size: 0.92rem;
  line-height: 1.6;
  color: #cbd5e1;
  margin: 0 0 12px;
}
.package-example {
  font-size: 0.88rem;
  line-height: 1.6;
  color: #94a3b8;
  margin: 0;
}
.package-example-label {
  display: inline;
  font-weight: 600;
  color: var(--color-accent-light);
}
@media (max-width: 720px) {
  .package-grid { grid-template-columns: 1fr; }
}

.transparency-text {
  font-size: 1.05rem;
  line-height: 1.7;
  color: #cbd5e1;
  max-width: 700px;
  margin-bottom: 28px;
}
.inline-code {
  background: #1c2623;
  padding: 2px 8px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: #e2e8f0;
}

/* ============================================================
   SECTION 9: CAPABILITIES TABLE
   ============================================================ */
.comparison {
  padding: var(--section-py) 0;
  background: var(--color-bg-alt);
}
.capabilities-table-wrap {
  margin-top: 40px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  background: #fff;
}
.capabilities-table {
  width: 100%;
  border-collapse: collapse;
}
.capabilities-table tr {
  border-bottom: 1px solid var(--color-border-light);
  transition: background .15s ease;
}
.capabilities-table tr:last-child { border-bottom: none; }
.capabilities-table tr:hover { background: #eef5f3; }
.capabilities-table th[scope="row"] {
  width: 30%;
  text-align: left;
  vertical-align: top;
  padding: 18px 22px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--color-primary);
}
.capabilities-table td {
  padding: 18px 22px;
  font-size: 0.92rem;
  color: var(--color-text);
  line-height: 1.55;
}
.check {
  color: var(--color-accent);
  font-weight: 700;
  margin-right: 8px;
}
@media (max-width: 600px) {
  .capabilities-table, .capabilities-table tbody,
  .capabilities-table tr, .capabilities-table th[scope="row"],
  .capabilities-table td { display: block; width: 100%; }
  .capabilities-table th[scope="row"] { padding-bottom: 4px; }
  .capabilities-table td { padding-top: 4px; padding-bottom: 18px; }
}

/* ============================================================
   SECTION 10: PRICING
   ============================================================ */
.pricing {
  padding: var(--section-py) 0;
  background: var(--color-bg-alt);
}
/* Pricing page: hero and cards share the tint, the cards follow the intro
   directly. Padding, not the grid's margin, or the margin would collapse
   through the section and show a white band. */
.subpage-hero + .pricing { padding-top: 40px; }
.subpage-hero + .pricing .pricing-grid { margin-top: 0; }
.pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 40px;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.pricing-card {
  padding: 32px 24px;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  text-align: center;
  transition: transform .2s, box-shadow .2s;
}
.pricing-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
/* Cards side by side share one height: the button sits at the bottom of each */
.pricing-card { position: relative; display: flex; flex-direction: column; }
.pricing-card > .btn { margin-top: auto; }
.pricing-card.featured {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-md);
}
.pricing-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-accent);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.pricing-unit { font-size: 0.9rem; font-weight: 400; }
.pricing-card h3 {
  font-size: 1.1rem;
  margin-bottom: 8px;
  color: var(--color-text);
}
.pricing-price {
  font-family: var(--font-heading);
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--color-primary);
  margin-bottom: 4px;
}
.pricing-period {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-bottom: 20px;
}
.pricing-features {
  list-style: none;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
}
.pricing-features li {
  font-size: 0.88rem;
  padding-left: 22px;
  position: relative;
  color: var(--color-text);
}
.pricing-features li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--color-accent);
  font-weight: 700;
}

/* ============================================================
   SECTION 12: FINAL CTA
   ============================================================ */
/* ============================================================
   SECTION 10b: FAQ
   ============================================================ */
.pricing-note {
  padding: var(--section-py) 0;
  text-align: center;
}
.pricing-note h2 {
  font-size: 1.8rem;
  margin-bottom: 12px;
}
.pricing-note p {
  max-width: 620px;
  margin: 0 auto;
  color: var(--color-text-muted);
  line-height: 1.65;
}

.faq {
  padding: var(--section-py) 0;
  background: var(--color-bg-alt);
}
.faq-list {
  max-width: 760px;
  margin-top: 8px;
}
.faq-list details {
  border-bottom: 1px solid var(--color-border);
}
.faq-list summary {
  cursor: pointer;
  padding: 18px 32px 18px 0;
  font-weight: 600;
  color: var(--color-text);
  list-style: none;
  position: relative;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2rem;
  color: var(--color-text-muted);
}
.faq-list details[open] summary::after { content: "\2212"; }
.faq-list details p {
  padding: 0 0 18px;
  font-size: 0.95rem;
  color: var(--color-text-muted);
  line-height: 1.65;
  max-width: 640px;
}

.final-cta {
  padding: var(--section-py) 0;
  background: var(--color-primary-dark);
  text-align: center;
  color: #fff;
}
.final-cta h2 {
  font-size: 2rem;
  color: #fff;
  margin-bottom: 16px;
}
.final-cta p {
  color: #94a3b8;
  font-size: 1.05rem;
  margin-bottom: 32px;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}
.final-cta .hero-ctas { margin-bottom: 20px; }
.final-cta .btn-primary {
  background: var(--color-accent);
  border-color: var(--color-accent);
}
.final-cta .btn-outline {
  color: #fff;
  border-color: rgba(255,255,255,.3);
}
.final-cta .btn-outline:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.5);
  color: #fff;
}
.final-trust {
  font-size: 0.82rem;
  color: #64748b;
}

/* ============================================================
   SECTION 13: FOOTER
   ============================================================ */
.landing-footer {
  padding: 48px 0 24px;
  background: var(--color-bg-dark);
  color: #94a3b8;
  border-top: 1px solid #334155;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin-bottom: 40px;
}
.footer-brand .brand { margin-bottom: 12px; }
.footer-brand .brand-word { color: #f1ede3; }
.footer-brand .brand-word .brand-dot { color: var(--color-accent-light); }
.footer-brand p {
  font-size: 0.88rem;
  color: #64748b;
  line-height: 1.6;
}
.footer-col h4 {
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 700;
  color: #e2e8f0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 14px;
}
.footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer-col a {
  font-size: 0.88rem;
  color: #64748b;
  transition: color .2s;
}
.footer-col a:hover { color: var(--color-accent-light); }

.footer-bottom {
  border-top: 1px solid #334155;
  padding-top: 20px;
  text-align: center;
  font-size: 0.82rem;
  color: #475569;
}

/* Phones: Product and Resources side by side; Company keeps the full width
   for its long contract links. */
@media (max-width: 767px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
  .footer-brand,
  .footer-col:last-child { grid-column: 1 / -1; }
}

/* --- Touch screens: tap targets of about 40px for small controls --- */
@media (pointer: coarse) {
  .method-carousel__tab { padding: 12px 16px; }
  .method-carousel__arrow { width: 42px; height: 42px; }
  .footer-col ul { gap: 0; }
  .footer-col a { display: inline-block; padding: 8px 0; }
}

/* ============================================================
   RESPONSIVE: Tablet (768px+)
   ============================================================ */
@media (min-width: 768px) {
  .hero h1 { font-size: 3rem; }
  .subpage-hero h1 { font-size: 2.7rem; }
  .section-title { font-size: 2.2rem; }

  .app-list { grid-template-columns: 1fr 1fr; }

  .pillar-cols { grid-template-columns: repeat(3, 1fr); gap: 40px; }
  .pillar-cols--two { grid-template-columns: repeat(2, 1fr); }

  .workflow-steps { grid-template-columns: repeat(4, 1fr); gap: 32px; }
  .workflow-step { padding-left: 0; padding-top: 54px; }
  .workflow-step::before {
    left: 44px;
    right: -32px;
    top: 17px;
    bottom: auto;
    width: auto;
    height: 2px;
  }
  .audience-cols { grid-template-columns: 1fr 1fr; gap: 48px; }
  .analytics-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Tablets: brand on its own row, the three link columns below it */
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }

  .feature-panel.active {
    grid-template-columns: 1fr 1fr;
  }

  .methods-grid {
    grid-template-columns: 1.05fr 0.95fr;
    gap: 40px;
  }
}

/* ============================================================
   RESPONSIVE: Desktop (1024px+)
   ============================================================ */
/* Full nav from 1024px: brand, six links and both CTAs need about 1000px,
   narrower viewports wrap the links, so they keep the menu button. Touch
   tablets keep it too: the Methods and Analytics dropdowns open on hover,
   which a finger cannot do. */
@media (min-width: 1024px) and (hover: hover) {
  .nav-mobile-toggle { display: none; }
  .nav-links { display: flex; }
  .nav-cta { display: block; }
  .mobile-menu.open { display: none; }
}
@media (min-width: 1024px) {
  /* Screenshot and text side by side only from 1024px; narrower screens
     stack them, text first, so the app screenshots keep a readable size. */
  .feature-block { grid-template-columns: 1.05fr 0.95fr; gap: 48px; }
  .feature-block > .feature-screenshot { order: 0; }
  .feature-block--flip > .feature-screenshot { order: 2; }

  .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
  .footer-brand { grid-column: auto; }

  .hero h1 { font-size: 3.5rem; }
  .hero-sub { font-size: 1.2rem; }

  .section-title { font-size: 2.4rem; }

  .feature-panel.active {
    grid-template-columns: 1.1fr 0.9fr;
    gap: 48px;
  }
}


/* ============================================================
   LANDING 2026-09: MIX (hero copy, facts strip, three steps,
   method tiles, comparison table, pricing overview, FAQ grid).
   Appended after the responsive blocks on purpose: base rules
   first, media queries at the end of this block.
   ============================================================ */

/* --- Hero additions --- */
.hero-kicker {
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink);
  line-height: 1.8;
  margin-bottom: 18px;
}
.hero-kicker .kicker-dot { color: var(--color-accent); }
/* A term and its dot never split across lines */
.hero-kicker .kicker-term { white-space: nowrap; }
.hero-copy .hero-reassure { line-height: 1.6; }

/* --- Facts strip --- */
.facts {
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}
.facts-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.fact {
  padding: 22px 20px;
}
.fact:nth-child(odd) { border-right: 1px solid var(--color-border); }
.fact-location { display: flex; align-items: center; gap: 12px; }
.country-flag { width: 30px; height: 18px; flex-shrink: 0; border-radius: 2px; }
.fact-value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: -0.025em;
  color: var(--color-ink);
  line-height: 1.15;
}
.fact-value small {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-muted);
  letter-spacing: 0;
}
.fact-desc {
  font-size: 0.86rem;
  color: var(--color-text-muted);
  margin-top: 4px;
  line-height: 1.5;
}

/* --- Research methods, question library and replication --- */
.research-tools { padding: var(--section-py) 0; background: var(--color-bg); }
.research-eyebrow {
  margin-bottom: 12px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.research-methods, .research-extras { display: grid; gap: 24px; }
.research-methods { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 36px; }
.research-extras { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 32px; }
.research-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: #fff;
}
.research-card-copy { padding: 24px 24px 20px; }
.research-card h3 { font-size: 1.15rem; line-height: 1.35; color: var(--color-primary); }
.research-card-copy > p:not(.research-eyebrow) { margin-top: 10px; font-size: 0.9rem; line-height: 1.6; color: var(--color-text-muted); }
.research-preview { margin-top: auto; border-top: 1px solid var(--color-border); }
.research-chart { aspect-ratio: 6 / 5; padding: 12px; background: #fff; }
.research-chart img { display: block; width: 100%; height: 100%; object-fit: contain; }
.research-preview .method-image-expand { display: block; margin: 0 auto 16px; }
.research-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding: 16px 24px; border-top: 1px solid var(--color-border); font-size: 0.83rem; font-weight: 600; color: var(--color-primary); }
.research-link:hover { background: var(--color-bg-alt); }
/* With a preview above, the preview takes the free space: links line up across cards */
.research-preview + .research-link { margin-top: 0; }
.research-item-types { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 4px 24px 24px; margin: auto 0; }
.research-item-types li { display: flex; align-items: center; gap: 8px; padding: 12px 10px; background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: 6px; font-size: 0.78rem; color: var(--color-primary); }
.research-item-types li::before { content: '+'; color: var(--color-accent); font-size: 1rem; }
.research-code { margin: 0 24px 24px; padding: 0; }
.research-code .code-lang { margin-bottom: 12px; }
.research-code .code-lang svg { width: 18px; height: 18px; }
.research-code pre { padding: 0 20px 18px; font-size: 0.8rem; }
.research-code .comment { color: #a0b2c5; }
.feature-block[id] { scroll-margin-top: 88px; }
@media (max-width: 900px) {
  .research-methods, .research-extras { grid-template-columns: 1fr; }
  /* One card per row: the chart takes the card width at its own proportions */
  .research-chart { aspect-ratio: auto; }
  .research-chart img { height: auto; }
}
@media (max-width: 540px) {
  .facts-grid { grid-template-columns: 1fr; }
  .fact:nth-child(odd) { border-right: none; border-bottom: 1px solid var(--color-border); }
  .fact { padding: 18px 0; }
  .research-item-types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .research-card-copy { padding: 20px; }
  .research-code { margin-inline: 20px; }
  .research-code pre { font-size: 0.72rem; padding-inline: 14px; }
}

/* --- Three steps --- */
.steps {
  padding: var(--section-py) 0;
  background: var(--color-bg);
}
.steps-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 40px;
  align-items: stretch;
}
.step-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.step-head {
  display: flex;
  gap: 12px;
  align-items: baseline;
}
.step-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.9rem;
  line-height: 1;
  color: var(--color-accent);
  letter-spacing: -0.03em;
  flex-shrink: 0;
}
.step-head h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-primary);
}
.step-head p {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin-top: 6px;
  line-height: 1.55;
}
.step-shot {
  border: 1px solid #d5dedb;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
.step-shot img { width: 100%; display: block; }
.step-tiles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: stretch;
}
.step-tile {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
}
.step-tile-head {
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding: 8px 12px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-alt);
}
.step-tile img { width: 100%; display: block; }
.step-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
}
.step-arrow svg { width: 22px; height: 22px; transform: rotate(90deg); }
.sim {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.sim-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-ink);
}
.sim-rows {
  display: grid;
  grid-template-columns: 96px 1fr 36px;
  gap: 8px;
  align-items: center;
  font-size: 0.75rem;
  color: var(--color-text);
}
.sim-val { text-align: right; font-weight: 600; }
.sim-track { height: 10px; border-radius: 5px; background: var(--color-border); overflow: hidden; }
.sim-fill { height: 100%; border-radius: 5px; background: var(--color-text-light); }
.sim-fill-24 { width: 24%; }
.sim-fill-49 { width: 49%; background: var(--color-accent); }
.sim-fill-27 { width: 27%; }
.sim-wtp {
  font-size: 0.78rem;
  color: var(--color-text);
  margin-top: 2px;
}
.sim-wtp strong { color: var(--color-ink); }
.sim-note { font-size: 0.72rem; color: var(--color-text-light); }

/* --- Method tiles (replace the methods table on the landing page) --- */
.method-tiles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 40px;
}
.method-tile {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
}
.method-tile h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-primary);
}
.method-tile p {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin-top: 6px;
  line-height: 1.55;
}

/* --- Comparison: Choicery vs. the usual conjoint suite --- */
.compare {
  padding: var(--section-py) 0;
  background: var(--color-bg-alt);
}
.compare-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
}
.compare-intro .section-desc { margin-bottom: 12px; }
.compare-footnote {
  font-size: 0.8rem;
  color: var(--color-text-light);
}
.compare-table-wrap {
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  background: #fff;
  padding: 4px 20px 0;
}
.compare-table {
  width: 100%;
  border-collapse: collapse;
}
.compare-table th,
.compare-table td {
  text-align: left;
  vertical-align: top;
  padding: 14px 14px;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.92rem;
  line-height: 1.5;
}
.compare-table thead th {
  font-family: var(--font-heading);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding-top: 16px;
  padding-bottom: 12px;
}
.compare-table thead th.is-choicery { color: var(--color-accent-dark); }
.compare-table tbody th {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-ink);
  width: 30%;
}
.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td { border-bottom: none; }
.compare-table td.yes { color: var(--color-ink); font-weight: 500; }
.compare-table td.no { color: var(--color-text-muted); }

/* --- Pricing overview on the landing page (reuses the pricing cards) --- */
.pricing-overview {
  padding: var(--section-py) 0;
  background: var(--color-bg);
}
.pricing-overview .pricing-grid { margin-top: 40px; }
.pricing-overview .pricing-card.featured .btn { width: 100%; }

/* --- FAQ as title column + list --- */
.faq-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
}
.faq-grid .section-title { margin-bottom: 10px; }
.faq-grid .section-desc { margin-bottom: 0; }
.faq-grid .faq-list { max-width: none; margin-top: 0; }
.faq-list details p { max-width: none; }

/* --- Motion for the added hero line (decorative, reduced-motion safe) --- */
@media (prefers-reduced-motion: no-preference) {
  .hero-copy .hero-kicker { animation: heroRise 0.55s ease-out both; }
}

/* --- Hero headline: smaller on phones, the two-part headline is long --- */
.hero .hero-copy h1 { font-size: 2rem; line-height: 1.12; }
@media (min-width: 768px) {
  .hero .hero-copy h1 { font-size: 2.3rem; }
}

/* --- Hero loop: copy left, the looping four-step animation right on desktop,
       stacked under the copy below 1024px. The narrated demo sits below both.
       The video background (#eef5f3) matches the hero, so it needs no frame. --- */
.hero-grid { gap: 32px; }
.hero-loop {
  min-width: 0;
  margin: 0 -24px; /* bleed over the container padding to the screen edges */
}
.hero-loop-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  background: #eef5f3;
  pointer-events: none;
  /* Browsers decode the video background a shade off the page colour:
     fade the top and bottom edges so no rectangle shows. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 4%, #000 90%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 4%, #000 90%, transparent 100%);
}
.hero-showcase { margin-top: 56px; }

@media (prefers-reduced-motion: no-preference) {
  .hero-loop { animation: heroRise 0.55s ease-out 0.2s both; }
}

@media (min-width: 1024px) {
  .hero-grid {
    grid-template-columns: minmax(0, 480px) minmax(0, 1fr);
    gap: 40px;
    align-items: center;
  }
  .hero-copy { text-align: left; }
  .hero .hero-copy h1 { text-wrap: balance; }
  .hero-copy .hero-sub { margin-left: 0; margin-right: 0; font-size: 1.1rem; }
  .hero-copy .hero-ctas { justify-content: flex-start; }
  /* Let the loop reach a fixed 120px past the container (never past the
     screen edge, .hero clips the overflow), so it keeps the same size on
     wide screens and when zoomed out; fade its left edge into the copy. */
  .hero-loop {
    margin: 0 calc(-1 * min(120px, (100vw - min(100vw, var(--max-width))) / 2 + 24px)) 0 0;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%);
    mask-image: linear-gradient(to right, transparent 0, #000 8%);
  }
  .hero-showcase { margin-top: 72px; }
}

/* --- Responsive: small phones --- */
@media (max-width: 600px) {
  .compare-table thead { display: none; }
  .compare-table, .compare-table tbody,
  .compare-table tr, .compare-table th,
  .compare-table td { display: block; width: 100%; }
  .compare-table tbody th { width: 100%; padding-bottom: 4px; border-bottom: none; }
  .compare-table td { padding-top: 2px; border-bottom: none; }
  .compare-table td.yes::before { content: "Choicery: "; color: var(--color-accent-dark); font-weight: 600; }
  .compare-table td.no::before { content: "Typical suite: "; font-weight: 600; }
  .compare-table tbody tr { border-bottom: 1px solid var(--color-border); padding-bottom: 12px; }
  .compare-table tbody tr:last-child { border-bottom: none; }

  /* Less air between sections: a phone page is long enough already */
  :root { --section-py: 56px; }

  /* "View larger" sits under the recording instead of covering part of it */
  .dual-mode-loop .method-image-expand {
    position: static;
    display: block;
    margin: 10px auto 12px;
  }

  /* Final call to action: both buttons the same width, one under the other */
  .final-cta .hero-ctas {
    flex-direction: column;
    align-items: stretch;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Captions follow their picture directly; the slides share one height, so
     the free space goes under the caption instead of above it */
  .method-carousel__caption { margin-top: 0; }

  .pricing-note { text-align: left; }

  /* Section intro and first block: one gap, not intro margin plus block padding */
  .feature-sections .section-desc + .feature-block { padding-top: 8px; }
}

/* Carousel tabs always stay on one line, never two rows: when they do not fit
   they scroll sideways. landing.js keeps the active tab in view and shows a
   fade while more tabs follow on the right. */
.method-carousel { position: relative; }
.method-carousel__tabs {
  flex-wrap: nowrap;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.method-carousel__tabs::-webkit-scrollbar { display: none; }
.method-carousel__tab { flex: 0 0 auto; white-space: nowrap; }
.method-carousel::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 44px;
  height: var(--carousel-tabs-h, 0px);
  background: linear-gradient(to right, rgba(238, 245, 243, 0), var(--color-card-tint) 75%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.method-carousel.has-more-tabs::after { opacity: 1; }

/* --- Responsive: 480px+ (step 3 tiles side by side) --- */
@media (min-width: 480px) {
  .step-tiles { grid-template-columns: 1fr 32px 1fr; }
  .step-arrow svg { transform: none; }
}

/* --- Responsive: tablet 768px+ --- */
@media (min-width: 768px) {
  .facts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fact { padding: 28px 24px; border-bottom: none; border-right: 1px solid var(--color-border); }
  .fact:first-child { padding-left: 0; }
  .fact:last-child { border-right: none; padding-right: 0; }
  .fact-value { font-size: 1.5rem; }
  .steps-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .step-card.step-card-wide { grid-column: span 2; }
  .method-tiles { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}

/* --- Responsive: desktop 1024px+ --- */
@media (min-width: 1024px) {
  .hero .hero-copy h1 { font-size: 2.5rem; line-height: 1.1; }

  .steps-grid { grid-template-columns: 1fr 1fr 2fr; gap: 28px; }
  .step-card.step-card-wide { grid-column: auto; }
  /* 5/7 up to 1199px: in a 4/12 column the headings break into four lines */
  .compare-grid { grid-template-columns: 5fr 7fr; gap: 40px; }
  .faq-grid { grid-template-columns: 5fr 7fr; gap: 40px; }
}
@media (min-width: 1200px) {
  .compare-grid { grid-template-columns: 4fr 8fr; }
  .faq-grid { grid-template-columns: 4fr 8fr; }
}

/* --- Cookie consent banner (consent.js builds the markup; classes only) --- */
.consent-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 300;
  box-sizing: border-box;
  max-height: 100vh;
  overflow-y: auto;
  background: var(--color-bg);
  color: var(--color-primary);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -6px 20px rgba(0,0,0,.08);
  padding: 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  font-family: var(--font-body);
}
.consent-banner.is-hidden { display: none; }
.consent-banner:focus { outline: none; }
.consent-banner__inner {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.consent-banner__text {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-text);
}
.consent-banner__link {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--color-accent-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.consent-banner__link:hover,
.consent-banner__link:focus-visible { color: var(--color-primary); }
.consent-banner__details {
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  background: var(--color-bg-alt);
  border-radius: 8px;
  padding: 12px 14px;
}
.consent-banner__details p + p { margin-top: 8px; }
.consent-banner__details.is-hidden { display: none; }
.consent-banner__note {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}
.consent-banner__note.is-hidden { display: none; }
.consent-banner__text.is-hidden { display: none; }
.consent-banner__actions {
  display: flex;
  gap: 10px;
}
/* Decline and Accept keep the same size and stay equally easy to reach. */
.consent-banner__btn {
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-primary);
  background: var(--color-bg);
  border: 1px solid var(--color-text-muted);
  border-radius: 8px;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.consent-banner__btn:hover { background: var(--color-bg-alt); }
.consent-banner__btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.consent-banner__btn--accept {
  font-weight: 600;
  color: #fff;
  background: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
}
.consent-banner__btn--accept:hover {
  background: #0d5f59;
  border-color: #0d5f59;
}
.consent-banner__btn.is-hidden { display: none; }
body.consent-banner-open { padding-bottom: 220px; }

@media (min-width: 768px) {
  .consent-banner {
    left: auto;
    right: 24px;
    bottom: 24px;
    width: 380px;
    max-height: calc(100vh - 48px);
    padding: 20px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,.14);
  }
}

/* --- Guide index (guides.html) --- */
.guide-index { padding: 16px 0 72px; }
.guide-index h2 { margin: 40px 0 16px; font-size: 1.375rem; }
.guide-index__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.guide-index__list a {
  display: block;
  height: 100%;
  padding: 16px 18px;
  color: var(--color-text);
  text-decoration: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.guide-index__list a:hover { background: var(--color-bg-alt); }
.guide-index__list strong { display: block; margin-bottom: 4px; color: var(--color-primary); font-weight: 600; }
.guide-index__list span { display: block; font-size: 0.875rem; line-height: 1.5; color: var(--color-text-muted); }
@media (min-width: 768px) {
  .guide-index__list { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   LANDING 2026-10: LAYOUT B (why-strip, demo stage, method chooser)
   ============================================================ */
/* --- Why strip: five differences right under the hero --- */
.why-strip {
  padding: 64px 0 72px;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border-light);
}
.why-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 20px;
}
.why-item {
  border-top: 3px solid var(--color-accent);
  padding-top: 16px;
}
.why-value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.6rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}
.why-location { display: flex; align-items: center; gap: 10px; }
.why-desc {
  margin-top: 8px;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--color-text-muted);
}
@media (min-width: 640px) {
  .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Odd item count: the last item spans the full row instead of sitting alone in one column */
  .why-item:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .why-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
  .why-item:last-child:nth-child(odd) { grid-column: auto; }
  .why-value { font-size: 1.6rem; }
}

/* --- Demo stage: the narrated demo on a dark background with chapter pills --- */
.demo-stage {
  padding: var(--section-py) 0;
  background: var(--color-ink);
  color: #fff;
}
.demo-stage-head {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
/* --- Every screen: one account on laptop, tablet and phone. The video
       background (#eef5f3) is the section colour, so it needs no frame;
       soft edges hide it where a browser decodes the colour a shade off. --- */
.every-screen {
  padding: var(--section-py) 0;
  background: var(--color-bg-alt);
}
.every-screen-head { max-width: 760px; margin: 0 auto; text-align: center; }
.every-screen-head .section-desc { margin-bottom: 0; }
.every-screen-video {
  display: block;
  width: 100%;
  max-width: 1040px;
  height: auto;
  aspect-ratio: 16 / 9;
  margin: 28px auto 0;
  background: #eef5f3;
  pointer-events: none;
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0, #000 3%, #000 96%, transparent 100%),
    linear-gradient(to right, transparent 0, #000 3%, #000 97%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, transparent 0, #000 3%, #000 96%, transparent 100%),
    linear-gradient(to right, transparent 0, #000 3%, #000 97%, transparent 100%);
  mask-composite: intersect;
}
/* Phones: the recording runs to the screen edges and is cut to 4:3. The
   scenes sit between about 16% and 86% of the frame width, so the crop only
   removes empty stage and the devices show a third larger. */
@media (max-width: 600px) {
  .every-screen-video {
    width: calc(100% + 48px);
    max-width: none;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    margin: 20px -24px 0;
  }
}

.demo-stage .research-eyebrow { color: #8fd7cb; }
.demo-stage .section-title { color: #fff; }
.demo-stage .section-desc { color: #c9d6d2; margin-bottom: 0; }
.demo-chapters {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 28px 0 32px;
  padding: 0;
}
.demo-chapters li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid #2f4440;
  background: #141d1b;
  color: #d9e3e0;
  font-size: 0.85rem;
  font-weight: 500;
}
.demo-chapters li span {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: #8fd7cb;
}
/* Phones: a tidy two-by-two grid instead of ragged pill rows */
@media (max-width: 600px) {
  .demo-chapters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .demo-chapters li { justify-content: center; padding: 9px 10px; font-size: 0.8rem; }
}
.demo-stage .hero-showcase { max-width: 1000px; margin: 0 auto; }
.demo-stage .hero-deck-frame {
  background: #141d1b;
  border-color: #2f4440;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.7);
}
.demo-stage .hero-video { background: #141d1b; }
/* --- Method chooser: six conjoint tiles linking to the methods page, then the direct methods --- */
.method-chooser {
  padding: var(--section-py) 0;
  background: var(--color-bg);
}
.method-chooser .section-desc { max-width: 760px; margin-bottom: 48px; }
.method-group + .method-group { margin-top: 80px; }
/* Group heading: a heavy rule above it marks the start of each group */
.method-group-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 20px;
  border-top: 3px solid var(--color-ink);
}
.method-group-head h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.75rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}
.method-group-head p {
  max-width: 760px;
  font-size: 0.95rem;
  color: var(--color-text-muted);
}
.method-chooser .method-tiles { margin-top: 22px; }
.method-tile-link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.method-tile-link:hover,
.method-tile-link:focus-visible {
  border-color: var(--color-primary);
  box-shadow: 0 12px 30px -18px rgba(13, 20, 18, 0.35);
  transform: translateY(-2px);
  text-decoration: none;
}
.method-tile-link:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.method-tile-link p { flex: 1; }
.method-tile-more {
  align-self: flex-start;
  margin-top: 14px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  transition: text-decoration-color 0.2s ease;
}
.method-tile-link:hover .method-tile-more,
.method-tile-link:focus-visible .method-tile-more { text-decoration-color: var(--color-accent); }
/* Same text-only link as "Read more": the teal underline appears on hover */
.method-group-link {
  display: inline-block;
  margin-top: 20px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  transition: text-decoration-color 0.2s ease;
}
.method-group-link:hover,
.method-group-link:focus-visible { color: var(--color-primary); text-decoration-color: var(--color-accent); }
.method-chooser .research-methods { margin-top: 22px; }
.research-card-copy .research-eyebrow { margin-bottom: 6px; font-size: 0.72rem; }

/* --- Questionnaire and replication package: one full-width card per section --- */
.research-tools { background: var(--color-bg-alt); }
.research-tools .research-extras { margin-top: 0; }
.research-extras.is-single { grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .research-tools-survey .research-item-types { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  /* Replication card: text left, code right, link across the bottom */
  .research-tools-replication .research-card { display: grid; grid-template-columns: 7fr 5fr; }
  .research-tools-replication .research-code { align-self: center; margin: 24px; }
  .research-tools-replication .research-link { grid-column: 1 / -1; }
}

/* --- Compare: heading and intro side by side, the table below at full width --- */
.compare { background: var(--color-bg); }
.compare-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 32px;
}
.compare-head .section-title { margin-bottom: 0; }
.compare-head .section-desc { max-width: none; margin-bottom: 10px; }
/* Side by side from 1200px: at 1024 the heading broke into four lines */
@media (min-width: 1200px) {
  .compare-head { grid-template-columns: 5fr 7fr; gap: 48px; align-items: end; }
}

/* --- Import: text left, the three facts right --- */
/* White between the alternate-background "every screen" and pricing sections */
/* --- Import: right after the demo, heading on top, models and simulator side by side --- */
.import-callout {
  padding: var(--section-py) 0;
  background: var(--color-bg-alt);
}
.import-head .section-desc { max-width: 760px; margin-bottom: 0; }
.import-grid { display: grid; gap: 20px; margin-top: 36px; }
.import-col {
  display: flex;
  flex-direction: column;
  padding: 24px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.import-col h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--color-ink);
}
.import-col .import-list { flex: 1; margin-top: 14px; }
.import-col .method-tile-more { margin-top: 18px; }
.import-col .method-tile-more:hover,
.import-col .method-tile-more:focus-visible { text-decoration-color: var(--color-accent); }
@media (min-width: 900px) {
  .import-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}

/* --- Alternate the remaining sections: "every screen" grey, pricing white --- */
.pricing-overview { background: var(--color-bg); }

/* --- FAQ page: the question list is the first block under the nav --- */
main > .faq:first-child { padding-top: 128px; }

/* --- Click-to-play videos: centred play button (added by landing.js) --- */
.video-play-host { position: relative; }
.video-play-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 84px;
  height: 84px;
  margin: -42px 0 0 -42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 18px 40px rgba(13, 20, 18, 0.35);
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
}
.video-play-overlay svg { width: 34px; height: 34px; margin-left: 4px; fill: #fff; }
.video-play-overlay:hover { transform: scale(1.06); background: var(--color-accent-dark, #13786c); }
.video-play-overlay:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.video-play-overlay.is-hidden { display: none; }
@media (max-width: 700px) {
  .video-play-overlay { width: 60px; height: 60px; margin: -30px 0 0 -30px; }
  .video-play-overlay svg { width: 26px; height: 26px; }
}

/* --- Price tile in the strip: big number, small unit beside it --- */
.why-price { display: flex; align-items: baseline; gap: 10px; }
.why-price-number { font-size: 3.2rem; line-height: 1; letter-spacing: -0.03em; }
.why-price-unit {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--color-text-muted);
}

/* --- Pricing cards (Free light, Pro dark): big price, unit small --- */
.pricing-grid--duo { max-width: 900px; gap: 24px; }
@media (min-width: 760px) {
  .pricing-grid--duo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.pricing-grid--duo .pricing-card {
  padding: 32px;
  text-align: left;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  background: #fff;
  gap: 16px;
}
.pricing-grid--duo .pricing-card:hover { transform: none; box-shadow: none; }
.pricing-grid--duo .pricing-card h3 { margin: 0; font-size: 1.1rem; font-weight: 700; color: var(--color-ink); }
.pricing-grid--duo .pricing-card--pro { background: var(--color-ink); border-color: var(--color-ink); color: #fff; box-shadow: var(--shadow-md); }
.pricing-grid--duo .pricing-card--pro h3 { color: #fff; }
.pricing-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pricing-tag {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--color-accent);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}
.pricing-amount { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pricing-number {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 3.6rem;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color-ink);
}
.pricing-card--pro .pricing-number { color: #fff; }
.pricing-per { font-size: 0.95rem; color: var(--color-text-muted); }
.pricing-card--pro .pricing-per,
.pricing-card--pro .pricing-terms { color: #c9d6d2; }
.pricing-terms { margin: 0; font-size: 0.92rem; color: var(--color-text-muted); }
.pricing-grid--duo .pricing-features { margin: 4px 0 8px; gap: 9px; }
.pricing-grid--duo .pricing-features li { font-size: 0.92rem; }
.pricing-card--pro .pricing-features li { color: #fff; }
.pricing-card--pro .pricing-features li::before { color: #8fd7cb; }
.pricing-card--free .btn-outline { border-color: var(--color-ink); color: var(--color-ink); }
.pricing-grid--duo .btn-block { width: 100%; }