/* StudyPass — Marketing page compositions
   Hero, anchor strip, numbered failures, ladder, comparison, CTA band.
   Built only from tokens. Nothing here is rounded, nothing here is heavy.
*/

/* ==============================================================
   HERO
   ============================================================== */
.hero { padding-block: clamp(3.5rem, 1.5rem + 8vw, 8rem) var(--section-y); }
.hero__title { max-width: 16ch; }
.hero__lead { margin-top: var(--space-6); max-width: 56ch; }
.hero__actions { margin-top: var(--space-7); }
.hero__foot {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: var(--border-hair) solid var(--edge-hair);
  max-width: 56ch;
}

/* ==============================================================
   ANCHOR STRIP — every price read against the test fee
   ============================================================== */
.anchors {
  display: grid;
  grid-template-columns: 1fr;
  border: var(--border-hair) solid var(--edge-hair);
}
@media (min-width: 560px) { .anchors { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .anchors { grid-template-columns: repeat(4, 1fr); } }

.anchor {
  padding: var(--space-6);
  border-top: var(--border-hair) solid var(--edge-hair);
}
.anchor:first-child { border-top: 0; }
@media (min-width: 560px) {
  .anchor { border-left: var(--border-hair) solid var(--edge-hair); }
  .anchor:nth-child(-n+2) { border-top: 0; }
  .anchor:nth-child(odd) { border-left: 0; }
}
@media (min-width: 1000px) {
  .anchor { border-top: 0; }
  .anchor:nth-child(odd) { border-left: var(--border-hair) solid var(--edge-hair); }
  .anchor:first-child { border-left: 0; }
}
.anchor__figure {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.25rem);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
  color: var(--fg-strong);
  margin-top: var(--space-4);
}
.anchor__note { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--fg-muted); }
.anchor--ours { background: var(--bg-subtle); }
.anchor--ours .anchor__figure { color: var(--fg-brand); }

/* ==============================================================
   NUMBERED ITEMS — the three failures, the six mechanics
   ============================================================== */
.numbered { counter-reset: n; }
.numbered__item {
  counter-increment: n;
  padding-block: var(--space-6);
  border-top: var(--border-hair) solid var(--edge-hair);
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .numbered__item { grid-template-columns: 4rem minmax(0, 22ch) minmax(0, 1fr); gap: var(--space-6); align-items: start; }
}
.numbered__item::before {
  content: counter(n, decimal-leading-zero);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--fg-subtle);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-wide);
}
.numbered__title { font-family: var(--font-display); font-size: var(--text-h3); font-weight: var(--weight-semibold); color: var(--fg-strong); }
.numbered__body { color: var(--fg-muted); max-width: 62ch; }

/* ==============================================================
   PULL QUOTE — the one-liners that carry the pitch
   ============================================================== */
.pull {
  border-left: var(--border-heavy) solid var(--edge-brand);
  padding: var(--space-2) 0 var(--space-2) var(--space-6);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1rem + 1.1vw, 1.75rem);
  font-weight: var(--weight-medium);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-strong);
  max-width: 34ch;
}
.section--inverse .pull { border-left-color: var(--brand-yellow); color: var(--fg-on-dark); }

/* ==============================================================
   TWO-COLUMN COMPARISON — 6.5 vs 7.0
   ============================================================== */
.versus { display: grid; grid-template-columns: 1fr; border: var(--border-hair) solid var(--edge-hair); }
@media (min-width: 760px) { .versus { grid-template-columns: repeat(2, 1fr); } }
.versus__col { padding: var(--space-6); }
.versus__col + .versus__col { border-top: var(--border-hair) solid var(--edge-hair); }
@media (min-width: 760px) {
  .versus__col + .versus__col { border-top: 0; border-left: var(--border-hair) solid var(--edge-hair); }
}
.versus__figure {
  font-family: var(--font-display);
  font-size: var(--text-display-3);
  font-weight: var(--weight-bold);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--fg-strong);
  font-variant-numeric: tabular-nums;
}
.versus__list { list-style: none; padding: 0; margin-top: var(--space-5); }
.versus__list > li {
  padding-block: var(--space-3);
  border-top: var(--border-hair) solid var(--edge-hair);
  font-size: var(--text-sm);
  color: var(--fg-muted);
}
.versus__list > li + li { margin-top: 0; }

/* ==============================================================
   LADDER — the six bundles
   ============================================================== */
.ladder { border-top: var(--border-hair) solid var(--edge-hair); }
.rung {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  padding-block: var(--space-6);
  border-bottom: var(--border-hair) solid var(--edge-hair);
  align-items: center;
  transition: background-color var(--duration-base) var(--ease-default);
}
.rung:hover { background: var(--bg-subtle); }
@media (min-width: 760px) {
  .rung {
    grid-template-columns: 5rem minmax(0, 1fr) 10rem 9rem;
    gap: var(--space-5);
  }
}
.rung__band {
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--fg-strong);
}
.rung__promise { color: var(--fg-default); }
.rung__buyer { font-size: var(--text-sm); color: var(--fg-muted); }
.rung__price {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-tight);
  color: var(--fg-strong);
  white-space: nowrap;
}
.rung__step { font-size: var(--text-xs); color: var(--fg-subtle); font-variant-numeric: tabular-nums; }
@media (min-width: 760px) {
  .rung__price, .rung__step, .rung__action { text-align: right; }
}
.rung--free { background: var(--bg-subtle); }
.rung--free .rung__price { color: var(--fg-brand); }
.rung--headline { border-left: var(--border-heavy) solid var(--edge-brand); padding-left: var(--space-5); }

/* ==============================================================
   STEP CURVE — the +40 / +60 / +80 / +100 story
   ============================================================== */
/* minmax(0,1fr) not 1fr: a plain 1fr floors at the content width, so the
   widest amount label ("+100,000₮") pushes the whole grid past its container. */
.steps { display: grid; gap: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; }
.step {
  min-width: 0;
  border-left: var(--border-hair) solid var(--edge-hair);
  padding: var(--space-4) var(--space-2);
  text-align: center;
}
@media (min-width: 1000px) { .step { padding-inline: var(--space-3); } }
.step:first-child { border-left: 0; }
.step__bar { background: var(--bg-brand); width: 100%; }
.step__label {
  margin-top: var(--space-3);
  font-size: var(--text-2xs);
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}
.step__amount {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-xs);
  color: var(--fg-strong);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--space-3);
}

/* ==============================================================
   MATH BLOCK — path independence
   ============================================================== */
.math {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--leading-loose);
  background: var(--bg-subtle);
  border-left: var(--border-heavy) solid var(--edge-strong);
  padding: var(--space-5) var(--space-6);
  overflow-x: auto;
  white-space: pre;
  color: var(--fg-strong);
}

/* ==============================================================
   CTA BAND
   ============================================================== */
.cta { padding-block: var(--section-y); }
.cta__title { max-width: 20ch; }
.cta__lead { margin-top: var(--space-5); max-width: 54ch; color: var(--fg-on-dark-muted); }
.cta__actions { margin-top: var(--space-7); }

/* ==============================================================
   FEATURE / MECHANIC CARDS
   ============================================================== */
.cards { display: grid; gap: 0; grid-template-columns: 1fr; border: var(--border-hair) solid var(--edge-hair); }
@media (min-width: 700px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cards--3 { grid-template-columns: repeat(3, 1fr); } }
.card { padding: var(--space-6); border-top: var(--border-hair) solid var(--edge-hair); }
.card:first-child { border-top: 0; }
@media (min-width: 700px) {
  .card { border-left: var(--border-hair) solid var(--edge-hair); }
  .cards:not(.cards--3) .card:nth-child(-n+2) { border-top: 0; }
  .cards:not(.cards--3) .card:nth-child(odd) { border-left: 0; }
}
@media (min-width: 1000px) {
  .cards--3 .card:nth-child(-n+3) { border-top: 0; }
  .cards--3 .card:nth-child(odd) { border-left: var(--border-hair) solid var(--edge-hair); }
  .cards--3 .card:nth-child(3n+1) { border-left: 0; }
}
.card__title { font-family: var(--font-display); font-size: var(--text-h3); font-weight: var(--weight-semibold); color: var(--fg-strong); margin-top: var(--space-4); }
.card__body { margin-top: var(--space-3); color: var(--fg-muted); font-size: var(--text-sm); }

/* ==============================================================
   INCLUDED / NOT INCLUDED
   ============================================================== */
.included { list-style: none; padding: 0; }
.included > li {
  display: flex; gap: var(--space-4); align-items: baseline;
  padding-block: var(--space-3);
  border-top: var(--border-hair) solid var(--edge-hair);
  font-size: var(--text-sm);
}
.included > li + li { margin-top: 0; }
.included__mark { flex: none; width: 1.25em; font-weight: var(--weight-semibold); }
.included__mark--yes { color: var(--status-pass); }
.included__mark--no { color: var(--fg-disabled); }
.included > li.is-off { color: var(--fg-muted); }

/* ==============================================================
   PROSE — long-form pages: legal, policy, about
   ============================================================== */
.prose { max-width: var(--measure-read); }
.prose > * + * { margin-top: var(--space-4); }
.prose h2 {
  font-size: var(--text-h2);
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: var(--border-hair) solid var(--edge-hair);
}
.prose h3 { font-size: var(--text-h3); margin-top: var(--space-6); }
.prose h2 + *, .prose h3 + * { margin-top: var(--space-3); }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li { margin-top: var(--space-2); }
.prose dt { font-weight: var(--weight-semibold); color: var(--fg-strong); margin-top: var(--space-5); }
.prose dd { margin: var(--space-2) 0 0; color: var(--fg-muted); }

.doc-meta {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5);
  padding-block: var(--space-4);
  border-top: var(--border-hair) solid var(--edge-hair);
  border-bottom: var(--border-hair) solid var(--edge-hair);
  font-size: var(--text-xs);
  color: var(--fg-muted);
}

/* Table of contents for legal pages */
.toc { list-style: none; padding: 0; }
.toc > li { margin-top: 0; }
.toc a {
  display: block;
  padding: var(--space-3) 0;
  border-bottom: var(--border-hair) solid var(--edge-hair);
  color: var(--fg-strong);
  font-size: var(--text-sm);
}
.toc a:hover { color: var(--fg-brand); text-decoration: none; }

/* Sticky contents rail on long legal pages */
@media (min-width: 760px) {
  /* align-self:start is required — a stretched grid item is as tall as the row,
     so sticky would have no room to move within it. */
  .toc-rail {
    position: sticky;
    align-self: start;
    top: calc(var(--nav-height) + var(--space-5));
  }
}

/* ==============================================================
   AUTH — login, signup, password reset
   A single narrow column. Nothing decorative: these pages exist to be
   got through, not looked at.
   ============================================================== */
.auth {
  max-width: 26rem;
  margin-inline: auto;
  padding-block: clamp(3rem, 1.5rem + 6vw, 6rem);
}
.auth__head { margin-bottom: var(--space-7); }
.auth__title { font-size: var(--text-h1); }
.auth__lead { margin-top: var(--space-4); color: var(--fg-muted); font-size: var(--text-sm); }
.auth__actions { margin-top: var(--space-6); }
.auth__alt {
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: var(--border-hair) solid var(--edge-hair);
}
.auth__foot {
  margin-top: var(--space-6);
  font-size: var(--text-sm);
  color: var(--fg-muted);
}
.auth [data-form-error],
.auth [data-form-ok] { margin-bottom: var(--space-5); }

/* ==============================================================
   ACCOUNT — a summary rail plus one small form
   ============================================================== */
.facts { list-style: none; padding: 0; margin: 0; }
.facts > li {
  display: flex; justify-content: space-between; gap: var(--space-4);
  padding-block: var(--space-3);
  border-top: var(--border-hair) solid var(--edge-hair);
  font-size: var(--text-sm);
}
.facts > li + li { margin-top: 0; }
.facts dt, .facts .facts__key { color: var(--fg-muted); }
.facts dd, .facts .facts__value {
  margin: 0; color: var(--fg-strong); font-weight: var(--weight-medium);
  text-align: right; font-variant-numeric: tabular-nums;
}