@font-face {
  /* Self-hosted. Previously two round trips to fonts.googleapis.com and
     fonts.gstatic.com before any text could paint, on the critical path, with a
     swap reflow at the end of it. This is the same Inter the app bundles,
     subsetted to the characters the site actually uses: 64KB instead of 860KB,
     one same-origin request, preloaded in the head. */
  font-family: "Inter";
  src: url("assets/fonts/inter-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   SR App: qoves-grade template
   Structure & motion system modeled on qoves.com's design language
   (floating pill nav, video hero, pill badges, hairline dividers,
   stat counters, comparison steps, BA slider, dark CTA).
   All code original; replace placeholder copy & assets.
   ------------------------------------------------------------
   Production fonts: Denton (display serif), PP Neue (body),
   Zagma (uppercase labels). Stand-ins loaded in index.html.
   ============================================================ */

:root {
  /* Palette (navy/light-blue, benasy-derived) */
  --ink: #133043; /* deep navy */
  --ink-2: #1d4356;
  --text-2: #4c5c68;
  --gray-m: #5d6c7b;
  --sage: #758696;
  --sage-deep: #5d6c7b;
  --mist: #e1faff; /* light ice blue */
  --mist-2: #dceeff;
  --paper: #ffffff; /* pure white */
  --subtle: #f6fafd; /* barely-blue tint */
  --border: #e6eef4;
  --border-soft: #eef4f9;
  --blue: #0050bd; /* benasy navy blue */
  --blue-2: #0b66c3;
  --acid: #00d54a; /* the app reserves this for the active tab indicator */

  /* Type: one family everywhere: Inter */
  --font-display: "Inter", -apple-system, sans-serif;
  --font-body: "Inter", -apple-system, sans-serif;
  --font-label: "Inter", -apple-system, sans-serif;

  /* Motion tokens (their exact easing set) */
  --ease-1: cubic-bezier(0, 0, 0.2, 1);
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);

  --nav-h: 64px;
  --container: 1360px;

  /* Solid foregrounds for dark surfaces.
     Never dim a token with opacity or an alpha suffix: alpha composites
     against whatever happens to be behind, so the contrast ratio changes with
     every surface, and it creates a stacking context that clips focus rings.
     These are the composited values, resolved once, as real colours. */
  --on-dark: #ffffff;
  --on-dark-muted: #c8d2d9;
  --on-dark-subtle: #a3b0ba;

  /* Viewport Lock.
     Three tiers so that with JS disabled this degrades to today's behaviour
     rather than collapsing. The locked value is written by the inline head
     script, which ignores the small height deltas a mobile URL bar produces
     and honours the large ones a rotation produces. */
  --vh: 1vh;
}

@supports (height: 1svh) {
  :root {
    --vh: 1svh;
  }
}

html[data-vh] {
  --vh: calc(var(--vh-lock) / 100);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-padding-top: 96px;
}

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overscroll-behavior: none;
}

::selection {
  background: var(--mist);
  color: var(--blue);
}
img {
  display: block;
}
a {
  color: inherit;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}
.section-pad {
  padding: 120px 0;
}

/* ---------- Type scale ---------- */

.display-xl,
.display-lg,
.display-md {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.04;
  color: var(--ink);
}

.display-xl {
  font-size: clamp(48px, 7.2vw, 104px);
}
.display-lg {
  font-size: clamp(38px, 5vw, 72px);
}
.display-md {
  font-size: clamp(28px, 3.6vw, 52px);
  line-height: 1.15;
}

.display-xl em {
  font-style: normal;
  color: var(--sage-deep);
}

.lede {
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.65;
  color: var(--text-2);
  max-width: 520px;
}

.lede--light {
  color: var(--on-dark-muted);
}

/* Pill badge: the qoves "type" chip */
.type-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-label);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--blue);
}

.type-pill::before {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--blue);
}

.type-pill--glass {
  color: var(--mist);
}
.type-pill--glass::before {
  background: var(--mist);
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-label);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  border-radius: 10px;
  padding: 14px 28px;
  transition:
    background-color 0.3s var(--ease-1),
    color 0.3s var(--ease-1),
    border-color 0.3s var(--ease-1),
    transform 0.3s var(--ease-1);
}

.btn:hover {
  transform: translateY(-2px);
}
.btn:active {
  transform: translateY(0);
}

.btn--light {
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--border);
}
.btn--light:hover {
  background: var(--mist);
  border-color: #0000;
}

.btn--ghost {
  background: #fff3;
  color: #fff;
  border: 1px solid #0000;
  backdrop-filter: blur(8px);
}
.btn--ghost:hover {
  background: #fff5;
}

.btn--dark {
  background: var(--ink);
  color: #fff;
  border: 1px solid var(--ink);
}
.btn--dark:hover {
  background: var(--blue);
}

.btn--ghostdark {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--border);
}
.btn--ghostdark:hover {
  border-color: var(--ink);
}

/* ---------- Announcement ---------- */

.announce {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: var(--ink);
  color: #fff;
  font-size: 13px;
  padding: 10px 48px 10px 16px;
  text-align: center;
}

.announce a {
  color: var(--mist);
  text-underline-offset: 3px;
}
.announce-close {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 0;
  color: var(--on-dark-subtle);
  font-size: 12px;
  cursor: pointer;
}

/* ---------- Floating pill navbar ---------- */

.nav-wrap {
  position: sticky;
  top: 0;
  z-index: 1000;
  max-height: 0; /* overlay the hero, take no flow space */
}

.nav-pill {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  max-width: calc(100% - 48px);
  margin: 0 auto;
  padding: 8px 12px 8px 20px;
  transform: translateY(12px);
  /* Concentric with the CTA inside it: the button is 10px and sits in 8px of
     pill padding, so 18px keeps the two curves parallel. A full 999px pill
     around a 10px button reads as two unrelated shapes. */
  border-radius: 18px;
  background: color-mix(in oklab, var(--ink) 72%, transparent);
  -webkit-backdrop-filter: blur(60px) saturate(0.75);
  backdrop-filter: blur(60px) saturate(0.75);
  box-shadow: 0 24px 60px #00000059;
  transition:
    max-width 0.25s var(--ease-1),
    background-color 0.25s var(--ease-1),
    box-shadow 0.25s var(--ease-1),
    padding 0.25s var(--ease-1);
}

/* Contract on scroll: qoves' signature header behavior */
.nav-wrap.is-scrolled .nav-pill {
  max-width: 880px;
  /* Same navy tint as the resting state, one step more opaque. Pure black here
     read as a different colour once the pill contracted over light content. */
  background: color-mix(in oklab, var(--ink) 84%, transparent);
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
}
.nav-logo img {
  width: 28px;
  height: 28px;
  border-radius: 8px;
}

.nav-links {
  display: flex;
  justify-content: center;
  gap: 32px;
}
.nav-links a {
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  transition: color 0.3s;
}
.nav-links a:hover,
.nav-links a.is-active {
  color: var(--on-dark-muted);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nav-login {
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  padding: 8px 16px;
  transition: color 0.3s;
}
.nav-login:hover {
  color: var(--on-dark-muted);
}

.nav-join {
  color: var(--ink);
  background: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  padding: 10px 22px;
  border-radius: 10px;
  border: 1px solid var(--border);
  transition:
    background-color 0.3s,
    border-color 0.3s;
}
.nav-join:hover {
  background: var(--mist);
  border-color: #0000;
}

/* ---------- Hero (full-viewport video) ---------- */

.hero {
  position: relative;
  height: calc(var(--vh) * 100);
  min-height: 560px;
  margin-top: calc(-1 * var(--nav-h) - 24px); /* slide under the floating pill */
  background: var(--sage-deep);
  overflow: hidden;
}

.hero-media {
  position: absolute;
  inset: 0;
}
.hero-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 760px) {
  .hero-media video {
    object-position: 36% 38%;
  }
}

.hero-scrim-bottom {
  position: absolute;
  inset: auto 0 0 0;
  height: 34%;
  background: linear-gradient(#0000 0%, #00000073 62%, #0000008f 100%);
}

.hero-content {
  position: relative;
  z-index: 2;
  height: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 120px 32px 40px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 32px;
}

.hero-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  max-width: 720px;
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(40px, 6vw, 84px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: #fff;
  max-width: 16ch;
  overflow-wrap: break-word;
}

.hero-sub {
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.6;
  color: var(--on-dark-muted);
  max-width: 480px;
}

.hero-ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.hero-foot {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
}
.hero-foot i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--on-dark-subtle);
}
.hero-scroll {
  margin-left: auto;
  animation: bob 3s var(--ease-in-out-quart) infinite;
}

@keyframes bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(5px);
  }
}

/* ---------- Statement ---------- */

.statement .container {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.statement-cols {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 48px;
  border-top: 1px solid var(--border-soft);
  padding-top: 32px;
}

.text-link {
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
  white-space: nowrap;
  transition: opacity 0.3s;
}
.text-link:hover {
  opacity: 0.6;
}

/* ---------- Section header pattern ---------- */

.section-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 64px;
}
.section-head--center {
  align-items: center;
  text-align: center;
}

/* ---------- Evidence ---------- */

.evidence {
  background: var(--subtle);
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}
.stat {
  background: var(--paper);
  padding: 36px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.stat-n {
  font-family: var(--font-display);
  font-size: clamp(40px, 4.5vw, 64px);
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.stat-l {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--gray-m);
}

.refs {
  margin-top: 64px;
  border-top: 1px solid var(--border);
}
.refs-title {
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sage);
  padding: 20px 0;
}
.ref-row {
  display: flex;
  justify-content: space-between;
  gap: 32px;
  padding: 18px 0;
  border-top: 1px solid var(--border-soft);
  font-size: 16px;
}
.ref-a {
  color: var(--gray-m);
  text-align: right;
}

/* ---------- Methods comparison ---------- */

.methods {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}
.method-card {
  background: var(--paper);
  padding: clamp(28px, 4vw, 56px);
}
.method-card--active {
  background: var(--subtle);
  box-shadow: inset 0 0 0 1px var(--ink);
}

.method-title {
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 16px;
}
.method-card--active .method-title {
  color: var(--ink);
}

.steps {
  list-style: none;
}
.steps li {
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border-soft);
}
.steps li:last-child {
  border-bottom: 0;
}
.step-n {
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage);
  min-width: 56px;
}
.step-t {
  font-size: 16.5px;
}
.method-card:not(.method-card--active) .step-t {
  color: var(--sage);
}

/* ---------- How it works (sticky rail) ---------- */

.how {
  background: var(--subtle);
}
.how-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 80px;
  align-items: start;
}

.how-sticky {
  position: sticky;
  top: 120px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.how-steps {
  display: flex;
  flex-direction: column;
  gap: 72px;
}
.how-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  border-top: 1px solid var(--border);
  padding-top: 32px;
}
.how-num {
  font-family: var(--font-label);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--sage);
}
.how-step h3 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  margin-bottom: 10px;
}
.how-step p {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--text-2);
  max-width: 460px;
}

.how-media {
  margin-top: 24px;
  grid-column: 2;
}
.how-media img {
  width: min(300px, 80%);
  border-radius: 16px;
  border: 1px solid var(--border);
  box-shadow: 0 32px 64px -32px #23313733;
}

/* ---------- Quote ---------- */

.quote .container {
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 900px;
}
.quote-by {
  font-size: 14px;
  color: var(--gray-m);
}
.quote-by span {
  color: var(--ink);
  font-weight: 500;
}

/* ---------- Features ---------- */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}
.feature {
  background: var(--paper);
  padding: clamp(24px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: background-color 0.35s var(--ease-1);
}
.feature:hover {
  background: var(--mist-2);
}
.feature span {
  font-size: 20px;
  color: var(--blue);
}
.feature h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
}
.feature p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--gray-m);
}

/* ---------- Pricing ---------- */

.pricing {
  background: var(--subtle);
}
.price-single {
  display: flex;
  justify-content: center;
}

.price-single .price-card--hero {
  width: min(460px, 100%);
  transform: none;
}

.price-note {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--on-dark-muted);
  text-align: center;
}

.price-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}

.price-card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.price-card--hero {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
  transform: translateY(-12px);
  box-shadow: 0 40px 80px -40px #23313766;
}
.price-card--hero .price-name,
.price-card--hero .price-n {
  color: #fff;
}
.price-card--hero .price-n span:not([data-price]) {
  color: var(--on-dark-subtle);
}
.price-card.price-card--hero li {
  color: var(--on-dark-muted);
}

.price-tag {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--mist);
  color: var(--blue);
  padding: 5px 14px;
  border-radius: 8px;
  white-space: nowrap;
}

.price-name {
  font-family: var(--font-label);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray-m);
}
.price-n {
  font-family: var(--font-display);
  font-size: 52px;
  color: var(--ink);
}
.price-n span:not([data-price]) {
  font-size: 16px;
  color: var(--gray-m);
  font-family: var(--font-body);
}

.price-card ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.price-card li {
  font-size: 14.5px;
  color: var(--text-2);
  padding-left: 20px;
  position: relative;
}
.price-card li::before {
  content: ": ";
  position: absolute;
  left: 0;
  color: var(--acid);
}

/* ---------- FAQ ---------- */

.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 80px;
  align-items: start;
}
.faq-grid > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: sticky;
  top: 120px;
}

.faq-list {
  border-top: 1px solid var(--border);
}
.faq-item {
  border-bottom: 1px solid var(--border);
}
.faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 22px 0;
  cursor: pointer;
  list-style: none;
  font-size: 17px;
  font-weight: 500;
  transition: opacity 0.3s;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary:hover {
  opacity: 0.65;
}
.faq-item summary span {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border);
  position: relative;
  transition:
    transform 0.35s var(--ease-1),
    background-color 0.35s;
}
.faq-item summary span::before,
.faq-item summary span::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--ink);
  transform: translate(-50%, -50%);
}
.faq-item summary span::before {
  width: 10px;
  height: 1.5px;
}
.faq-item summary span::after {
  width: 1.5px;
  height: 10px;
  transition: opacity 0.25s;
}
.faq-item[open] summary span {
  transform: rotate(45deg);
  background: var(--subtle);
}
.faq-item p {
  padding: 0 0 22px;
  max-width: 560px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-2);
  animation: faqIn 0.45s var(--ease-1);
}
@keyframes faqIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

/* ---------- Final CTA (dark) ---------- */

.cta {
  background: var(--ink);
  padding: 160px 32px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}
.cta .display-xl {
  color: #fff;
}

/* ---------- Footer ---------- */

.footer {
  border-top: 1px solid var(--border);
  padding: 72px 0 0;
}
.footer-grid {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
}
.footer-brand img {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  margin-bottom: 16px;
}
.footer-brand p {
  font-size: 14px;
  color: var(--gray-m);
  max-width: 260px;
  line-height: 1.6;
}
.footer-col p {
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 16px;
}
.footer-col a {
  display: block;
  font-size: 14.5px;
  color: var(--text-2);
  text-decoration: none;
  padding: 5px 0;
  transition: color 0.3s;
}
.footer-col a:hover {
  color: var(--ink);
}

.footer-base {
  max-width: var(--container);
  margin: 56px auto 0;
  padding: 24px 32px 32px;
  border-top: 1px solid var(--border-soft);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--sage);
}

/* ---------- Stance principles ---------- */

.principles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: clamp(28px, 4vw, 64px);
  border-top: 1px solid var(--border);
  padding-top: 48px;
  margin-top: 16px;
}
.principle {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.principle-n {
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--blue);
}
.principle h3 {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.principle p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-2);
}

@media (max-width: 900px) {
  .principles,
  .qa-grid,
  .learn-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- QA cards ---------- */

.qa-block {
  margin-top: 64px;
}
.qa-title {
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 20px;
}
.qa-grid {
  display: grid;
  /* 440px is chosen so the row caps at two cards on a wide canvas and drops
     straight to one on a phone, without a breakpoint. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  gap: 16px;
}
.qa-card {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.qa-q {
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.qa-a {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--gray-m);
}

/* ---------- Learn cards (What you'll actually learn) ---------- */

.learn-grid {
  display: grid;
  /* Intrinsically responsive. `min(100%, 260px)` lets a track shrink below its
     260px ideal on a narrow screen instead of overflowing the viewport, which a
     bare minmax(260px, 1fr) does. There is no breakpoint here to forget. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 16px;
  margin-top: 24px;
}
.learn-card {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: clamp(24px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.learn-tag {
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
  background: var(--mist);
  padding: 5px 12px;
  border-radius: 8px;
  align-self: flex-start;
}
.learn-card h3 {
  font-size: clamp(19px, 1.8vw, 23px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.learn-card p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--gray-m);
}

/* ---------- Scroll progress rail ---------- */

.rail {
  position: fixed;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 900;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.rail a {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  text-decoration: none;
}

.rail a span {
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink);
  opacity: 0;
  transform: translateX(6px);
  transition:
    opacity 0.3s var(--ease-1),
    transform 0.3s var(--ease-1);
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 5px 12px;
  box-shadow: 0 8px 20px #13304314;
}

.rail a i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--border);
  transition:
    background 0.3s var(--ease-1),
    transform 0.3s var(--ease-1);
}

.rail a.is-done i {
  background: var(--mist-2);
}
.rail a.is-active i {
  background: var(--blue);
  transform: scale(1.5);
}
.rail a.is-active span,
.rail a:hover span {
  opacity: 1;
  transform: none;
}

@media (max-width: 1100px) {
  .rail {
    display: none;
  }
}

/* ---------- Scroll reveal ---------- */

/* Visible by Default.
   The resting state is legible. The hidden start state is armed only under
   html[data-motion], which the inline head script sets after proving that
   scripting works, so a blocked, broken or merely slow bundle leaves a fully
   readable page instead of empty coloured bands.

   There is deliberately no per-item delay. One shared duration and easing for
   every element: a stagger ladder is the loudest "this was generated" tell
   there is, and above-the-fold content carries no .reveal at all. */
.reveal {
  opacity: 1;
}

html[data-motion] .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.7s var(--ease-out-expo),
    transform 0.7s var(--ease-out-expo);
}

html[data-motion] .reveal.is-in {
  opacity: 1;
  transform: none;
}

/* Suppress transitions for the single frame in which elements are armed, so
   nothing visibly fades out on its way to the start state. */
html[data-motion-arming] .reveal {
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  html[data-motion] .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .hero-scroll {
    animation: none;
  }
  html {
    scroll-behavior: auto;
  }
  /* Catch-all rather than an enumerated list, which is what rots. Hover and
     focus feedback survives because colour and shadow are not motion; only
     movement and long cross-fades are removed. */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .lib-card:hover,
  .learn-card:hover {
    transform: none !important;
  }
}

/* ---------- Responsive ---------- */

@media (max-width: 1100px) {
  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .how-grid,
  .faq-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .how-sticky,
  .faq-grid > div:first-child {
    position: static;
  }
}

@media (max-width: 760px) {
  .section-pad {
    padding: 80px 0;
  }
  .container {
    padding: 0 20px;
  }
  .nav-links,
  .nav-login {
    display: none;
  }
  .nav-pill {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: calc(100% - 24px);
  }
  .nav-wrap.is-scrolled .nav-pill {
    max-width: calc(100% - 24px);
  }
  .hero {
    min-height: 520px;
  }
  .statement-cols {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
  .stat-grid,
  .feature-grid,
  .methods,
  .price-grid {
    grid-template-columns: 1fr;
  }
  .price-card--hero {
    transform: none;
  }
  .ref-row {
    flex-direction: column;
    gap: 6px;
  }
  .ref-a {
    text-align: left;
  }
  .ba-frame {
    aspect-ratio: 4 / 5;
    border-radius: 12px;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------- Buy sheet (A/B price test) ---------- */

.buyscrim {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: #13304366;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.3s var(--ease-1),
    visibility 0s linear 0.3s;
}
.buyscrim.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.3s var(--ease-1);
}

.buysheet {
  position: relative;
  width: 100%;
  max-width: 440px;
  /* Subtract the scrim's own padding rather than guessing at 92%: on a short
     viewport 92% plus 40px of padding exceeds the screen, and a centred flex
     child that overflows gets clipped at the TOP, where the close button is. */
  max-height: calc(var(--vh) * 100 - 40px);
  overflow-y: auto;
  /* Keep a flick inside the sheet from scrolling the page behind it, which on
     iOS otherwise moves the layout under an open modal. */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 40px 36px 32px;
  box-shadow: 0 60px 120px -40px #13304359;
  transform: translateY(16px);
  transition: transform 0.35s var(--ease-out-quint);
}
.buyscrim.is-open .buysheet {
  transform: none;
}

.buy-x {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--paper);
  color: var(--ink);
  font-size: 13px;
  cursor: pointer;
  transition: background-color 0.3s;
}
.buy-x:hover {
  background: var(--subtle);
}

.buy-step {
  display: none;
  flex-direction: column;
  gap: 18px;
}
.buy-step.is-active {
  display: flex;
  animation: faqIn 0.45s var(--ease-1);
}

.buy-title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.buy-price {
  font-family: var(--font-display);
  font-size: 52px;
  line-height: 1;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.buy-per {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--gray-m);
}

.buy-sub {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-2);
}

.buy-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.buy-list li {
  font-size: 14.5px;
  color: var(--text-2);
  padding-left: 20px;
  position: relative;
}
.buy-list li::before {
  content: ": ";
  position: absolute;
  left: 0;
  color: var(--acid);
}

.buy-cta {
  justify-content: center;
  width: 100%;
  font-size: 15px;
  padding: 16px 28px;
  cursor: pointer;
}
.buy-cta[disabled] {
  opacity: 0.6;
  cursor: default;
  transform: none;
}

.buy-fine {
  font-size: 12.5px;
  color: var(--sage);
  text-align: center;
}
.buy-err {
  font-size: 13.5px;
  color: #b3261e;
  min-height: 18px;
}

/* ---------- Confirmation-screen questions ---------- */

.buy-ask {
  margin: 20px 0 4px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  text-align: left;
}
.buy-ask-q {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--gray-m);
  margin-bottom: 10px;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chip {
  font-family: var(--font-label);
  font-size: 13.5px;
  color: var(--ink);
  background: #fff;
  /* Matches the 10px button language rather than a pill, same reasoning as the
     header: one radius family across the whole sheet. */
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 14px;
  cursor: pointer;
  transition:
    background-color 0.2s var(--ease-1),
    border-color 0.2s var(--ease-1),
    color 0.2s var(--ease-1);
}
.chip:hover {
  border-color: var(--blue-2);
}
.chip[aria-pressed="true"] {
  /* Solid token, not the blue dimmed with opacity: the label has to stay at a
     real ratio against whatever the chip sits on. */
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

.buysheet form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.buysheet input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
  background: var(--subtle);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  outline: none;
  transition:
    border-color 0.2s,
    background-color 0.2s;
}
.buysheet input:focus {
  border-color: var(--blue);
  background: var(--paper);
}

/* ============================================================
   Compositor-Only Scroll: the scroll-driven enhancement layer
   ------------------------------------------------------------
   Every effect below is CSS scroll-driven animation running on the
   compositor. There is no scroll listener anywhere in the bundle driving a
   transform: iOS Safari delivers scroll events to JS in bursts during
   momentum and rubber-band scrolling, so a JS scrub lands in visible steps
   no matter how much requestAnimationFrame is wrapped around it.

   Rules this layer obeys:
   - Base state is the FINAL, legible state. Everything here is enhancement,
     so an engine with no support (Firefox stable, any iOS below 26, and
     therefore every in-app webview on those devices) shows the finished
     design, not a broken one.
   - Only transform and opacity are animated. Touching width, top or
     background-color would put the work back on the main thread.
   - animation-duration is auto: duration is ignored once a scroll timeline
     is attached, and writing a time there is a silent no-op.
   - Timelines are named explicitly where the subject is not the scroller.
     timeline-scope: all was removed in Chrome 138.
   ============================================================ */

@supports (animation-timeline: view()) {
  @media not (prefers-reduced-motion: reduce) {
    /* The hero video drifts and dims as the hero leaves, so the section
       below arrives on a settled surface rather than a hard cut. */
    .hero-media {
      animation: heroSettle linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 100%;
      animation-duration: auto;
      will-change: transform, opacity;
    }

    /* Editorial media drifts against the scroll. This is the only parallax
       on the site and it is four percent of the element's height, which
       reads as depth rather than as an effect. */
    .scrub-drift {
      animation: drift linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
      animation-duration: auto;
    }

    /* A slow push-in on a framed image while it crosses the viewport. */
    .scrub-zoom {
      animation: slowZoom linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
      animation-duration: auto;
    }

    /* Reading progress. The subject is the page, so the timeline is the root
       scroller rather than the element's own view. */
    .read-progress > i {
      animation: progress linear both;
      animation-timeline: scroll(root block);
      animation-duration: auto;
      transform-origin: 0 50%;
    }
  }
}

@keyframes heroSettle {
  from {
    transform: scale(1);
    opacity: 1;
  }
  to {
    transform: scale(1.08);
    opacity: 0.55;
  }
}

@keyframes drift {
  from {
    transform: translate3d(0, -2%, 0);
  }
  to {
    transform: translate3d(0, 2%, 0);
  }
}

@keyframes slowZoom {
  from {
    transform: scale(1.06);
  }
  to {
    transform: scale(1);
  }
}

@keyframes progress {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

/* ---------- Reading progress rail (blog) ---------- */

.read-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 60;
  background: var(--border-soft);
  pointer-events: none;
}

.read-progress > i {
  display: block;
  height: 100%;
  background: var(--blue);
  /* No support: a full-width rail reads as a hairline under the nav, which
     is a deliberate resting state rather than a broken progress bar. */
  transform: scaleX(1);
}

@supports (animation-timeline: scroll()) {
  .read-progress > i {
    transform: scaleX(0);
  }
}

/* ---------- Film grain ----------
   One 90-byte inline SVG, tiled. Cheap texture that keeps large flat fields
   from banding on wide gamut displays. */

.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Typographic wordmark ----------
   The brand is the type. There is no mark and no mascot. */

.wordmark {
  font-weight: 700;
  letter-spacing: -0.03em;
  font-size: 17px;
  color: inherit;
}

.wordmark--footer {
  font-size: 20px;
  margin-bottom: 10px;
  color: var(--on-dark);
}

/* ---------- View-timeline scope fix ----------
   .hero sets overflow: hidden to clip the settling video, which makes it a
   scroll container. An anonymous view() on a descendant therefore resolves
   against .hero itself, where a full-bleed child never enters or exits, so
   the animation attaches and then never progresses.

   Naming the timeline on .hero moves the measurement up to the real scroller,
   the document, while the child keeps the animation. A descendant resolves a
   named timeline from an ancestor without needing timeline-scope. */

.hero {
  view-timeline-name: --hero-view;
  view-timeline-axis: block;
}

@supports (animation-timeline: view()) {
  @media not (prefers-reduced-motion: reduce) {
    .hero-media {
      animation-timeline: --hero-view;
    }
  }
}

/* The grain overlay is absolutely positioned, so its host must establish a
   containing block. Declared here rather than on each host so adding .grain
   anywhere is enough. */
.grain {
  position: relative;
}

/* ---------- Library teaser ---------- */

.libteaser {
  background: var(--subtle);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.libteaser-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 44px;
}

.libteaser-all {
  display: inline-block;
  margin-top: 28px;
  font-weight: 500;
  color: var(--blue);
  text-underline-offset: 4px;
}

/* Each question on the landing page has an article behind it: the terse answer
   keeps the pitch, the link gives the reader somewhere to go. */
.qa-link {
  display: inline-block;
  margin-top: 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--blue);
  text-underline-offset: 3px;
}