/* PMPR — the landing page.
 *
 * DESIGN: "PMPR Web.dc.html" option 1a (composed transcript) at desktop, option
 * 3a at 390px. Both are the SAME sections in the SAME order — mobile is a
 * collapse, not a different page.
 *
 * WHAT CHANGED AND WHY. The previous version was the transcript idea taken
 * literally: every block on the page was a label-and-paragraph row in a two
 * column grid. The idea is good and the exchange keeps it — but as the whole
 * page it meant eight identical blocks, one column, no scale change, and a wall
 * of prose before the reader saw anything. So the exchange stays the hero and is
 * now bounded as one object, and real product structure follows it: the
 * recall-vs-recognition argument, and the extension explained against a
 * screenshot slot. One column became a composition.
 *
 * COLOUR: this page now runs on the SHIPPED design tokens (tokens.css), in
 * Graphite, rather than its own private monochrome set. That means the landing
 * page and the app cannot drift, and the grade inks on this page are the same
 * three values the product paints a verdict with — solid #21B366, shaky
 * #F29E1C, miss #E6453D. Colour is data ink; the mark stays monochrome.
 *
 * TYPE: Avenir Next for the mark and display sizes, system sans for reading, a
 * monospace for tracked labels and captions. Avenir Next cannot be webfonted
 * (Monotype, Apple-only) — see the note in tokens.css.
 *
 * CSP: served under `style-src 'self'` with no 'unsafe-inline', so there are no
 * <style> blocks and no style="" attributes anywhere in the HTML. Every value
 * the design doc draws inline lives here as a class.
 */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* One measure for the whole page. Wide enough for the two-column hero, narrow
 * enough that the prose inside it never runs past a readable line. */
.shell {
  max-width: 1120px;
  margin: 0 auto;
  padding-inline: 32px;
}

a { color: inherit; }
a:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; border-radius: 2px; }

/* ── Type roles ───────────────────────────────────────────────────────────── */

.display-xl {
  margin: 0 0 18px;
  font-family: var(--display);
  font-weight: var(--w-bold);
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1.06;
  letter-spacing: -0.022em;
  color: var(--text);
  text-wrap: balance;
}

.display-l {
  margin: 0 0 14px;
  font-family: var(--display);
  font-weight: var(--w-bold);
  font-size: clamp(24px, 2.9vw, 32px);
  line-height: 1.14;
  letter-spacing: -0.018em;
  color: var(--text);
  text-wrap: balance;
}

/* The tracked-caps section header, on the page background. Same rule as the
 * app: sections are labelled in caps on the ground, so the page reads as one
 * document instead of a stack of floating boxes. `.section-label` itself is
 * defined in tokens.css; this only adds the page's spacing. */
.section-label { display: block; margin: 0 0 14px; }

.eyebrow {
  margin: 0 0 16px;
  font: var(--w-bold) 10px/1 var(--display);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--faint);
}

.lede {
  margin: 0 0 26px;
  max-width: 54ch;
  font-size: 16.5px;
  line-height: 1.62;
  color: var(--dim);
  text-wrap: pretty;
}

.fine {
  margin: 14px 0 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--faint);
  max-width: 46ch;
}

/* ── Masthead ─────────────────────────────────────────────────────────────── */

.masthead { border-bottom: var(--hairline) solid var(--line); }
.masthead-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 18px;
}
.mark-lg { font-size: 20px; text-decoration: none; }
.mark-sm { font-size: 15px; }

.nav {
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: 13.5px;
}
.nav a { color: var(--dim); text-decoration: none; }
.nav a:hover { color: var(--text); }
.nav-signin { color: var(--text) !important; font-weight: 600; }

/* ── Hero ─────────────────────────────────────────────────────────────────── */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 56px;
  align-items: center;
  padding-block: 72px 64px;
}
.hero-copy { min-width: 0; }

/* The setup page's hero has no phone mock beside it, so the two-column grid
 * would leave 425px of empty space and squeeze the lede into a narrow column
 * for no reason. One column, with the measure held by max-width instead. */
.hero-solo { grid-template-columns: minmax(0, 1fr); }
.hero-solo .lede { max-width: 56ch; }
.hero-solo .display-xl { max-width: 20ch; }
.hero-solo .fine { max-width: 52ch; }

.cta-row { margin: 0; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.btn-primary {
  display: inline-block;
  background: var(--primary-bg);
  color: var(--primary-fg);
  text-decoration: none;
  font-family: var(--display);
  font-weight: var(--w-heavy);
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 15px 28px;
  border-radius: var(--radius-m);
}
.btn-primary:hover { filter: brightness(1.08); }

/* ── The phone ────────────────────────────────────────────────────────────
 * A real screenshot in a CSS bezel. The image is rendered offline by
 * ScreenSnapshotTests over SYNTHETIC content — the app's own UI, never one of
 * his real cards and never a line of qbank text.
 */
.phone {
  margin: 0;
  justify-self: center;
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.phone-shot {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-xl);
  border: var(--hairline) solid var(--line);
  /* The screenshot's own background is the app's, so the frame reads as a
     device edge rather than a picture pasted onto the page. */
  background: var(--bg);
}
.phone-cap {
  font: 500 10.5px/1.4 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
  text-align: center;
}

/* ── The extension mock ───────────────────────────────────────────────────
 * NOT a screenshot, on purpose. A real capture would put a qbank's
 * copyrighted question text on a public page. So the page underneath is
 * GREEKED — grey bars, no readable words, unmistakably a stand-in for someone
 * else's site — and only the PMPR widget on top is drawn accurately.
 */
.mock {
  margin: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mock-page {
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--surface);
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 13px;
  min-height: 260px;
}
.mock-bar { height: 9px; border-radius: 999px; background: var(--line); }
.w-30 { width: 30%; } .w-40 { width: 40%; } .w-60 { width: 60%; }
.w-70 { width: 70%; } .w-80 { width: 80%; } .w-85 { width: 85%; } .w-90 { width: 90%; }

.mock-widget {
  position: absolute;
  right: 18px;
  bottom: 58px;
  max-width: 250px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius-l);
  background: var(--bg);
  padding: 14px 15px;
  box-shadow: 0 12px 28px rgb(0 0 0 / 0.45);
}
.mock-mark {
  font-family: var(--display); font-weight: var(--w-heavy); font-style: italic;
  font-size: 12px; letter-spacing: -0.02em; color: var(--text);
}
.mock-btn {
  background: var(--primary-bg); color: var(--primary-fg);
  border-radius: var(--radius-s); padding: 8px 13px;
  font-family: var(--display); font-weight: var(--w-heavy);
  font-size: 11.5px; letter-spacing: 0.03em;
}
.mock-note { font-size: 11px; line-height: 1.45; color: var(--faint); text-wrap: pretty; }

/* ── Bands ────────────────────────────────────────────────────────────────── */

.band { padding-block: 64px; border-top: var(--hairline) solid var(--line); }
.band-head { margin-bottom: 30px; }
.band-head .display-l { margin-bottom: 10px; }
.band-head .section-label { margin: 0; }

.band-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 52px;
  align-items: center;
}
.band-copy p { color: var(--dim); font-size: 15.5px; line-height: 1.62; text-wrap: pretty; max-width: 46ch; }
.band-copy p strong { color: var(--text); font-weight: 600; }

/* ── The exchange ─────────────────────────────────────────────────────────
 * The transcript, kept — but bounded. The label sits above its line rather
 * than in a gutter, because at this width a 92px gutter left the grade text on
 * a stub of a measure.
 */
.turn-group {
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.turn { padding: 26px 28px; }
.turn + .turn { border-top: var(--hairline) solid var(--line); }

.turn-label {
  margin: 0 0 10px;
  font: 600 10px/1 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
}

.said {
  margin: 0;
  color: var(--text);
  font-size: 17px;
  line-height: 1.6;
  max-width: 68ch;
  text-wrap: pretty;
}
.said.spoken { color: var(--dim); }
.said em { font-style: italic; color: var(--text); font-weight: 600; }

/* The verdict pill. Filled, not outlined — this is the app's own treatment
 * (Design/Primitives.swift: black weight on a tinted capsule, foreground = the
 * theme background) and it is the one place on the page colour is spent. */
.verdict {
  display: inline-block;
  margin: 0 0 12px;
  background: var(--miss);
  color: var(--bg);
  font-family: var(--display);
  font-weight: var(--w-heavy);
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 7px 12px;
  border-radius: 999px;
}
.verdict-miss { background: var(--miss); }

.gap-logged {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin: 16px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--faint);
  text-wrap: pretty;
}
.gap-logged .dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--heat);
  transform: translateY(-1px);
}

.thesis {
  margin: 26px 0 0;
  color: var(--text);
  font-family: var(--display);
  font-weight: var(--w-bold);
  font-size: clamp(19px, 2.2vw, 24px);
  line-height: 1.3;
  letter-spacing: -0.015em;
  max-width: 40ch;
  text-wrap: balance;
}

/* ── Recall vs recognition ────────────────────────────────────────────────── */

.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.panel {
  display: flex;
  flex-direction: column;
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius-xl);
  padding: 22px 24px 24px;
  background: var(--surface);
}
/* The recall panel is the one the page is arguing for, so it gets the accent
 * edge. One panel lit, one not — the asymmetry is the argument. */
.panel-lit { border-color: color-mix(in srgb, var(--accent-new) 45%, var(--line)); }

.choices { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.choices li {
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius-s);
  padding: 11px 13px;
  font-size: 14px;
  color: var(--dim);
  background: var(--bg);
}

/* The utterance is this panel's whole argument, so it is sized like one — the
 * left rule is the session screen's own treatment of a live prompt. Without it
 * the recall panel was a third the height of the choices list beside it and the
 * comparison read as "less", which is the opposite of the point. */
.spoken-line {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 18px;
  padding: 4px 0 4px 16px;
  border-left: 2px solid var(--accent-new);
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--text);
  text-wrap: pretty;
}
.spoken-line .wave { margin-top: 6px; }

/* WaveformBars, ported. Deliberately STATIC — the app's note applies here too:
 * a live meter next to a live transcript is two things animating at the reader
 * while they are trying to finish a sentence. */
.wave { flex: none; display: inline-flex; align-items: center; gap: 2px; }
.wave i { width: 2px; border-radius: 2px; background: var(--accent-new); }
.wave i:nth-child(1) { height: 5px; }
.wave i:nth-child(2) { height: 11px; }
.wave i:nth-child(3) { height: 7px; }
.wave i:nth-child(4) { height: 9px; }

/* Bottom-aligned in both panels, so the two closing arguments sit on the same
 * line and the eye compares them directly. */
.panel-note { margin: auto 0 0; font-size: 13.5px; line-height: 1.6; color: var(--dim); text-wrap: pretty; }

/* ── Pricing ──────────────────────────────────────────────────────────────
 * Three tiers as equal columns, then the top-up as a full-width rail beneath
 * them — because a top-up is not a fourth tier, it is a thing you do ON a
 * tier, and giving it a fourth card would say the opposite.
 */

.tiers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.tier {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius-xl);
  padding: 22px 22px 24px;
}
/* One tier carries the accent, and it is the one the copy calls the daily
 * driver — the page should not be coy about which plan it thinks you want. */
.tier-lit { border-color: color-mix(in srgb, var(--accent-new) 45%, var(--line)); }

.tier-name {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin: 0;
  font: var(--w-bold) 10px/1 var(--display);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
}
.tier-tag {
  font: var(--w-bold) 9px/1 var(--display);
  letter-spacing: 0.14em;
  color: var(--accent-new);
  border: var(--hairline) solid color-mix(in srgb, var(--accent-new) 45%, transparent);
  border-radius: 999px;
  padding: 4px 8px;
}

.tier-credits { margin: 0; font-size: 13.5px; color: var(--dim); }
.tier-num {
  display: block;
  font-family: var(--display);
  font-weight: var(--w-heavy);
  font-size: 38px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text);
}
.tier-note { margin: auto 0 0; font-size: 13px; line-height: 1.6; color: var(--dim); text-wrap: pretty; }

.topup {
  margin-top: 16px;
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--surface);
  padding: 20px 22px;
}
.topup-head { margin: 0; font-size: 13.5px; color: var(--dim); }
.topup-head .tier-num { font-size: 30px; }
.topup-note { margin: 0; font-size: 13px; line-height: 1.6; color: var(--dim); text-wrap: pretty; }

.fine-wide { max-width: 68ch; margin-top: 20px; }

/* ── Chips ────────────────────────────────────────────────────────────────── */

.chips { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.chips li {
  display: flex;
  gap: 9px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--faint);
  text-wrap: pretty;
}
.chips li::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin-top: 6px;
  border-radius: 999px;
  background: var(--heat);
}

/* ── Footer ───────────────────────────────────────────────────────────────── */

.foot {
  border-top: var(--hairline) solid var(--line);
  padding-block: 40px 64px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}
.foot-note { margin: 0; max-width: 56ch; font-size: 13px; line-height: 1.6; color: var(--faint); text-wrap: pretty; }
.foot-links { margin: 0; display: flex; gap: 20px; font-size: 13px; }
.foot-links a { color: var(--dim); text-decoration: none; }
.foot-links a:hover { color: var(--text); }

/* ── Narrow ───────────────────────────────────────────────────────────────
 * Design 3a: one column, same sections, same order. The hero shortens (the
 * phone slot drops below the copy) and the two-panel comparison stacks — at
 * 390px a side-by-side comparison is two unreadable columns, not a comparison.
 */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 40px; padding-block: 52px 48px; }
  .band-split { grid-template-columns: 1fr; gap: 32px; }
  /* Screenshot first on the extension band at desktop, but the copy should
     lead on a phone — the reader needs to know what they are looking at. */
  .band-split .mock { order: 2; }
  .split { grid-template-columns: 1fr; }
  .tiers { grid-template-columns: 1fr; }
  .topup { grid-template-columns: 1fr; gap: 12px; align-items: start; }
}

@media (max-width: 600px) {
  .shell { padding-inline: 20px; }
  /* A held space should suggest the shape, not occupy half the scroll. At full
     mobile width the phone slot was ~480px of stripes before the reader reached
     the actual product. */
  .phone { max-width: 240px; }
  .band { padding-block: 48px; }
  .nav { gap: 18px; font-size: 13px; }
  .turn { padding: 20px 20px; }
  .said { font-size: 16px; }
  .lede { font-size: 15.5px; }
}

/* At the narrowest, the secondary nav links cost more than they earn — Sign in
 * is the only thing anyone came to the masthead for. */
@media (max-width: 460px) {
  .nav a:not(.nav-signin) { display: none; }
}

/* ── Motion ────────────────────────────────────────────────────────────────
 * ONE orchestrated moment, and it earns its place: the turns arrive in
 * sequence, the way they do in the product — you speak, you wait, the verdict
 * lands. The verdict pill is last and is the only element with a scale on it.
 * Nothing else on the page moves.
 */
@media (prefers-reduced-motion: no-preference) {
  .arrive { animation: arrive 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
  .arrive-1 { animation-delay: 0.05s; }
  .arrive-2 { animation-delay: 0.55s; }
  .arrive-3 { animation-delay: 1.05s; }
  .arrive-3 .verdict { animation: land 0.4s cubic-bezier(0.2, 0.9, 0.3, 1) 1.15s both; }
}
@keyframes arrive {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: none; }
}
@keyframes land {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: none; }
}

/* ── Setup steps (start.html) ──────────────────────────────────────────────
 * A numbered list, and the numbering is information rather than decoration:
 * install order is load-bearing on this page. Accepting the App Store Connect
 * invite genuinely has to happen before the TestFlight invite exists, and the
 * extension genuinely needs an account to sign into. An unordered list would
 * be lying about that.
 *
 * The marker sits in its own gutter rather than inline, so a step whose body
 * runs to three lines still reads as one block.
 */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
  display: flex;
  flex-direction: column;
}
.step {
  counter-increment: step;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 0 18px;
  padding: 20px 0;
  border-top: var(--hairline) solid var(--line);
}
.step:first-child { border-top: none; padding-top: 4px; }
.step::before {
  content: counter(step);
  font: 600 14px/1 var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--accent-new);
  border: var(--hairline) solid color-mix(in srgb, var(--accent-new) 40%, var(--line));
  border-radius: 999px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  margin-top: 1px;
}
.step-h {
  margin: 0 0 6px;
  font-size: 16.5px;
  font-weight: 600;
  color: var(--text);
  text-wrap: balance;
}
.step p:not(.step-h) { margin: 0; max-width: 62ch; }
.step p + p { margin-top: 8px; }

.step code,
.band code,
.lede code {
  font: 500 0.88em/1 var(--mono);
  background: color-mix(in srgb, var(--accent-new) 12%, var(--surface));
  border: var(--hairline) solid var(--line);
  border-radius: 5px;
  padding: 2px 5px;
  word-break: break-word;
}

@media (max-width: 560px) {
  .step { grid-template-columns: 1fr; gap: 10px 0; }
  .step::before { margin-bottom: 2px; }
}