/* =====================================================================
   Cover The Gaps — /english-level-test/ and its result page.
   Layers on top of index_redesign.css: same paper, same ink, same orange,
   Bricolage Grotesque for display and Plus Jakarta Sans for text. Nothing
   new is invented here except the CEFR ladder, the one element both pages
   are remembered by.
   Mobile-first: every rule below is the phone rule; wider screens are
   opt-in through min-width queries.
   ===================================================================== */

[hidden] { display: none !important; }

/* ---------- funnel chrome (replaces the app navbar/footer) ---------- */
.pl-top {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 20px; background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.pl-brand {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-display); font-weight: 700; font-size: 18px;
  letter-spacing: -.02em; color: var(--ink); text-decoration: none;
}
.pl-brand-mark { font-size: 19px; line-height: 1; }
.pl-top-nav { display: flex; align-items: center; gap: 6px; }
.pl-top-nav a {
  padding: 8px 12px; border-radius: 10px; text-decoration: none;
  font-size: 14.5px; font-weight: 600; color: var(--ink-2);
}
.pl-top-nav a:hover { background: rgba(45, 38, 25, .06); color: var(--ink); }
.pl-top-nav a:first-child { display: none; }
.pl-top-cta { border: 1px solid var(--line-2); }
@media (min-width: 620px) { .pl-top-nav a:first-child { display: inline-flex; } }

.pl-foot {
  margin-top: auto; padding: 28px 20px calc(28px + env(safe-area-inset-bottom));
  background: var(--paper-2); border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px;
}
.pl-foot-brand {
  margin: 0; font-family: var(--font-display); font-weight: 700;
  color: var(--ink-2); font-size: 15px;
}
.pl-foot-nav { display: flex; flex-wrap: wrap; gap: 16px; }
.pl-foot-nav a { color: var(--ink-3); text-decoration: none; font-size: 14px; font-weight: 600; }
.pl-foot-nav a:hover { color: var(--ink); }

/* ---------- page shell ---------- */
.pl .wrap { max-width: 760px; }
.pl-section { padding: 56px 0; }
@media (min-width: 900px) { .pl-section { padding: 76px 0; } }
.pl h2.s-title { font-size: clamp(1.6rem, 4.6vw, 2.2rem); }

/* ---------- 1 · the stage: hero, widget, example ---------- */
.pl-stage { padding: 28px 0 8px; position: relative; overflow: clip; }
.pl-stage::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(620px 380px at 85% -10%, rgba(255, 107, 53, .12), transparent 62%);
}
.pl-stage-in { position: relative; display: grid; gap: 22px; }
@media (min-width: 940px) {
  .pl-stage { padding: 52px 0 16px; }
  .pl-stage-in { grid-template-columns: minmax(0, 11fr) minmax(0, 8fr); align-items: start; gap: 40px; }
  .pl-hero, .pl-widget { grid-column: 1; grid-row: 1; }
  .pl-error { grid-column: 1; grid-row: 2; }
  .pl-sample { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: 24px; }
}

.pl-h1 {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -.025em;
  font-size: clamp(2rem, 7.5vw, 3.1rem); line-height: 1.08; margin: 14px 0 0;
  text-wrap: balance;
}
.pl-lead { color: var(--ink-2); font-size: 17px; margin-top: 16px; max-width: 34em; }
.pl-facts {
  list-style: none; display: flex; flex-wrap: wrap; gap: 8px;
  margin: 20px 0 0; padding: 0;
}
.pl-facts li {
  font-size: 13.5px; font-weight: 700; color: var(--ink-2);
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: 999px; padding: 7px 14px;
}
.pl-start { margin-top: 24px; width: 100%; }
@media (min-width: 560px) { .pl-start { width: auto; min-width: 260px; } }
.pl-micro { color: var(--ink-3); font-size: 13.5px; font-weight: 600; margin-top: 12px; }
.pl-notice {
  margin-top: 22px; padding: 14px 16px; border-radius: var(--r);
  background: var(--paper-2); border: 1px solid var(--line-2); color: var(--ink-2);
}

/* ---------- 2 · the widget ---------- */
.pl-widget {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-xl); box-shadow: var(--shadow-md);
  padding: 18px 16px 22px;
}
@media (min-width: 560px) { .pl-widget { padding: 26px 26px 30px; } }
.pl-rail-row { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.pl-rail {
  flex: 1; height: 6px; border-radius: 999px; background: var(--paper-3);
  overflow: hidden;
}
.pl-rail-fill {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, #ff8a5c, var(--orange));
  transition: width .35s var(--ease);
}
.pl-rail-label {
  font-size: 12.5px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-3); white-space: nowrap;
}
.pl-qtitle { font-family: var(--font-display); font-size: 20px; font-weight: 700; margin: 0 0 6px; }
.pl-qtext { font-size: 18px; font-weight: 600; line-height: 1.45; margin: 0 0 16px; }
.pl-qnote, .pl-counter { color: var(--ink-3); font-size: 13.5px; margin: 8px 0 0; }
/* The retention line on the last step: quieter than the note above it, and
   above both cards because it is true of both. */
.pl-qprivacy { color: var(--ink-3); font-size: 13px; margin: 6px 0 0; }
.pl-statement {
  font-size: 16px; color: var(--ink-2); background: var(--paper-2);
  border-left: 3px solid var(--orange-soft); border-radius: 0 var(--r) var(--r) 0;
  padding: 12px 14px; margin: 0 0 16px;
}
.pl-option {
  display: block; width: 100%; text-align: left; margin-bottom: 10px;
  min-height: 54px; padding: 14px 16px;
  background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--r);
  font-family: inherit; font-size: 16px; font-weight: 600; color: var(--ink);
  cursor: pointer; transition: border-color .15s var(--ease), background .15s var(--ease), transform .1s var(--ease);
}
.pl-option:hover { border-color: var(--orange); background: var(--orange-ghost); }
.pl-option:active { transform: scale(.995); }
.pl-option.is-picked { border-color: var(--orange); background: var(--orange-soft); }
.pl-option:disabled { cursor: default; opacity: .75; }
.pl-blank {
  display: block; width: 100%; max-width: 320px; margin-bottom: 10px;
  min-height: 50px; padding: 12px 14px;
  border: 1px solid var(--line-2); border-radius: var(--r); background: var(--paper);
  font-family: inherit; font-size: 16px; color: var(--ink);
}
.pl-writing {
  display: block; width: 100%; padding: 14px; margin-top: 4px;
  border: 1px solid var(--line-2); border-radius: var(--r); background: var(--paper);
  font-family: inherit; font-size: 16px; line-height: 1.55; color: var(--ink);
  resize: vertical;
}
.pl-blank:focus, .pl-writing:focus { outline: 2px solid var(--orange); outline-offset: 1px; border-color: var(--orange); }
.pl-check { margin-top: 6px; }
.pl-audio { width: 100%; margin-bottom: 10px; }
.pl-skip, .pl-linkbtn {
  background: none; border: 0; padding: 6px 2px; cursor: pointer;
  font-family: inherit; font-size: 14.5px; font-weight: 700; color: var(--ink-3);
  text-decoration: underline; text-underline-offset: 3px;
}
.pl-skip:hover, .pl-linkbtn:hover { color: var(--orange-deep); }
.pl-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 16px; }
.pl-actions .btn { width: 100%; }
@media (min-width: 560px) { .pl-actions .btn { width: auto; } }
.is-busy { opacity: .6; pointer-events: none; }

/* ---------- 2b · the last step: speak, write, or skip ---------- */
/* Two cards, identical in every way that reads as importance — same box, same
   primary button, same weight of type. Speaking is simply first: a recording
   is the better sample, and a visitor whose browser cannot record gets the
   writing card on its own with nothing missing from around it. */
.pl-choice { display: grid; gap: 14px; margin-top: 18px; }
@media (min-width: 780px) {
  .pl-choice { grid-template-columns: 1fr 1fr; align-items: start; }
}
.pl-choice-card {
  display: grid; gap: 10px; align-content: start;
  background: var(--paper-2); border: 1px solid var(--line-2);
  border-radius: var(--r); padding: 16px;
}
.pl-choice-title {
  font-family: var(--font-display); font-size: 17px; font-weight: 700;
  margin: 0; letter-spacing: -.01em;
}
.pl-choice-task { font-size: 16px; font-weight: 600; line-height: 1.45; margin: 0; }
.pl-choice-hint { color: var(--ink-3); font-size: 13.5px; margin: 0; }
.pl-choice-card .pl-writing { margin: 0; }
.pl-choice-card .pl-counter { margin: 0; }
.pl-choice-card .btn { width: 100%; }

.pl-rec-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
/* Wide enough to stay tappable, elastic enough to keep the clock on the same
   line as Stop whenever the card is wider than a small phone. */
.pl-rec-row .btn { flex: 1 1 160px; width: auto; }
.pl-rec-state { font-size: 14px; font-weight: 700; color: var(--ink-2); margin: 0; }
.pl-rec-state.is-error { color: #8c1c34; }
.pl-rec-clock {
  font-size: 14px; font-weight: 800; color: var(--orange-deep);
  font-variant-numeric: tabular-nums;
}
.pl-rec-play { width: 100%; }
.pl-error {
  margin: 14px 0 0; padding: 12px 14px; border-radius: var(--r);
  background: #fdeaee; border: 1px solid #f5c2cd; color: #8c1c34;
  font-size: 15px; font-weight: 600;
}

/* ---------- 3 · the example result card ---------- */
.pl-sample {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 18px;
}
.pl-sample-tag {
  display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3);
  background: var(--paper-2); border-radius: 999px; padding: 5px 10px;
}
.pl-sample-kicker { color: var(--ink-3); font-size: 13px; font-weight: 700; margin: 14px 0 0; }
.pl-sample-level {
  font-family: var(--font-display); font-size: 44px; font-weight: 700;
  line-height: 1; margin: 4px 0 12px; letter-spacing: -.03em;
}
.pl-sample-gaps { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; }
.pl-sample-note { color: var(--ink-3); font-size: 13px; margin: 12px 0 0; }

/* ---------- 4 · the CEFR ladder (signature) ---------- */
.pl-ladder { list-style: none; display: grid; gap: 6px; margin: 0; padding: 0; }
.pl-rung {
  display: flex; align-items: baseline; gap: 12px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--paper-2); padding: 10px 14px;
  font-weight: 700; color: var(--ink-3);
}
.pl-rung-code { font-family: var(--font-display); font-size: 17px; color: var(--ink-2); min-width: 2.2em; }
.pl-rung-note { font-size: 14.5px; font-weight: 500; color: var(--ink-2); }
.pl-ladder--full { margin-top: 8px; }
@media (min-width: 760px) {
  .pl-ladder--full { grid-template-columns: repeat(5, 1fr); gap: 10px; }
  .pl-ladder--full .pl-rung { display: block; }
  .pl-ladder--full .pl-rung-code { display: block; margin-bottom: 6px; }
}

/* compact ladders: rungs sit in one row */
.pl-ladder--sm, .pl-ladder--verdict {
  grid-auto-flow: column; grid-auto-columns: 1fr; gap: 5px;
}
.pl-ladder--sm .pl-rung, .pl-ladder--verdict .pl-rung {
  justify-content: center; padding: 7px 4px; font-size: 13px;
}
.pl-rung.is-reached { color: var(--ink-2); background: var(--paper-3); }
.pl-rung.is-range { border-style: dashed; border-color: var(--orange); color: var(--orange-deep); background: var(--orange-ghost); }
.pl-rung.is-estimate {
  background: var(--orange); border-color: var(--orange); color: #fff;
  box-shadow: 0 8px 18px -10px rgba(232, 80, 28, .8);
}

/* ---------- 5 · the result page ---------- */
.pl-result { padding: 24px 0 60px; }
.pl-result-in { display: grid; gap: 34px; }
.pl-h2 { font-family: var(--font-display); font-size: 22px; font-weight: 700; margin: 0 0 12px; letter-spacing: -.02em; }
.pl-block-sub { color: var(--ink-3); font-size: 14.5px; margin: -6px 0 14px; }
.pl-muted { color: var(--ink-3); font-size: 14.5px; }

.pl-verdict {
  background: var(--night); color: var(--night-text);
  border-radius: var(--r-xl); padding: 28px 20px 24px; text-align: center;
  box-shadow: var(--shadow-md);
}
@media (min-width: 620px) { .pl-verdict { padding: 40px 34px 32px; } }
.pl-verdict-kicker {
  font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--night-dim); margin: 0;
}
.pl-verdict-level {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -.04em;
  font-size: clamp(3.2rem, 15vw, 5rem); line-height: 1; margin: 10px 0 20px;
  text-wrap: balance;
}
.pl-ladder--verdict { max-width: 420px; margin: 0 auto; }
.pl-ladder--verdict .pl-rung {
  background: rgba(255, 255, 255, .05); border-color: var(--night-line);
  color: var(--night-dim);
}
.pl-ladder--verdict .pl-rung.is-reached { background: rgba(255, 255, 255, .1); color: var(--night-text); }
.pl-ladder--verdict .pl-rung.is-range { background: rgba(255, 107, 53, .12); border-color: var(--orange); color: #ffb08c; }
.pl-ladder--verdict .pl-rung.is-estimate { background: var(--orange); border-color: var(--orange); color: #fff; }
.pl-verdict-range { color: var(--night-text); font-size: 15.5px; margin: 18px auto 0; max-width: 36em; }
.pl-verdict-score { color: var(--night-dim); font-size: 14px; margin: 8px 0 0; }

.pl-skills { display: grid; gap: 10px; }
.pl-skill { display: grid; grid-template-columns: 6.5rem 1fr 3rem; align-items: center; gap: 10px; }
.pl-skill-name { font-size: 14.5px; font-weight: 700; color: var(--ink-2); }
.pl-skill-bar { height: 8px; border-radius: 999px; background: var(--paper-3); overflow: hidden; }
.pl-skill-fill { display: block; height: 100%; background: var(--orange); border-radius: 999px; }
.pl-skill-pct { font-size: 13.5px; font-weight: 800; color: var(--ink-3); text-align: right; }
/* A skill with too few items carries its raw count where its bar would have
   been — same row, same alignment, no rate drawn. */
.pl-skill--thin .pl-skill-count {
  grid-column: 2 / -1; font-size: 13.5px; font-weight: 700; color: var(--ink-3);
}

.pl-gaps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: gap; }
.pl-gap {
  background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--orange);
  border-radius: var(--r); padding: 14px 16px;
  display: grid; gap: 4px;
}
.pl-gap-name { font-weight: 800; font-size: 16.5px; }
.pl-gap-count { color: var(--ink-3); font-size: 13.5px; font-weight: 600; }
.pl-mistakes a { color: var(--orange-deep); font-weight: 700; font-size: 14.5px; }
/* index_redesign.css sets `.lp a { color: inherit }` — specificity 0,1,1, so a
   class on its own loses to it. Every link colour here is element + class. */
.pl a.pl-gap-link { color: var(--orange-deep); font-weight: 700; font-size: 14.5px; }
.pl a.btn--primary, .pl a.btn--primary:hover { color: #fff; }
.pl-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.pl-chip {
  font-size: 13px; font-weight: 700; color: var(--ink-2);
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 12px;
}
.pl-chip--ok { color: #0a6b41; background: var(--app-green-bg); border-color: #bfe3d1; }
.pl-mistakes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pl-mistakes li { border-bottom: 1px solid var(--line); padding-bottom: 10px; display: grid; gap: 3px; }
.pl-mistake-q { color: var(--ink-2); font-size: 15px; }
.pl-mistake-topic { font-weight: 800; font-size: 14px; }
/* The teaching line: it is the part that is worth reading, so it gets the
   normal ink and a rule down its left edge to separate it from the question
   text above it. */
.pl-mistake-why {
  color: var(--ink); font-size: 14.5px; line-height: 1.5;
  border-left: 3px solid var(--line); padding-left: 10px; margin-top: 2px;
}
/* The practice block: four items the visitor answers on the result page.
   Built by JS, so every class here has to survive an empty block too — the
   list and the button are hidden until the items land. */
.pl-practice-items { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 14px; }
.pl-practice-item { display: grid; gap: 6px; }
.pl-practice-prompt { margin: 0; font-size: 16px; color: var(--ink); }
.pl-practice-options { display: flex; flex-wrap: wrap; gap: 8px; }
.pl-practice-options label {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px;
  background: var(--card); font-size: 14.5px; font-weight: 600;
}
.pl-practice-options label:hover { border-color: var(--ink-3); }
.pl-practice-input {
  border: 1px solid var(--line); border-radius: var(--r); padding: 8px 12px;
  font: inherit; font-size: 15px; max-width: 260px; background: var(--card);
}
.pl-practice-actions { margin: 14px 0 0; }
.pl-practice-score { margin: 10px 0 0; font-weight: 800; }
.pl-practice-feedback { margin: 0; font-size: 14.5px; line-height: 1.5; }
.pl-practice-feedback.is-right { color: #0a6b41; }
.pl-practice-feedback.is-wrong { color: var(--ink-2); }
.pl-writing-tips { margin: 8px 0 0; padding-left: 20px; color: var(--ink-2); }
.pl-writing-tips li { margin-bottom: 4px; }

.pl-cta {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: 26px 20px; text-align: center; box-shadow: var(--shadow-sm);
}
.pl-cta p { color: var(--ink-2); margin: 0 auto 18px; max-width: 34em; }
.pl-cta .btn { width: 100%; }
@media (min-width: 560px) { .pl-cta .btn { width: auto; min-width: 300px; } }
.pl-cta .pl-micro { margin-top: 12px; }
.pl-retake { margin: 18px 0 0; }
.pl-retake a { color: var(--ink-3); font-size: 14px; font-weight: 600; }

/* ---------- 6 · shared sections on the test page ---------- */
.pl-steps { grid-template-columns: 1fr; }
@media (min-width: 820px) { .pl-steps { grid-template-columns: repeat(3, 1fr); } }
.pl-steps .step { list-style: none; }
.pl-faq { max-width: none; }
.pl-faq .faq-item summary::after {
  content: "+"; font-family: var(--font-display); font-size: 22px; line-height: 1;
  color: var(--ink-3); transition: transform .2s var(--ease);
}
.pl-faq .faq-item[open] summary::after { transform: rotate(45deg); color: var(--orange-deep); }
.pl-faq-cta { display: flex; justify-content: center; margin-top: 30px; }
.pl-maria-in { max-width: 640px; }

/* ---------- 7 · the illustrations ---------- */
/* Mobile first: every picture fits the box it sits in and keeps its ratio,
   while the width/height attributes on the tag reserve that box before the
   bytes land, so nothing under an image jumps.
   No var() below: signup and plan load this file on the APP shell, where the
   landing tokens (index_redesign.css) are not defined — a var() there would
   resolve to nothing and silently drop the rule. */
.pl-art { display: block; max-width: 100%; height: auto; }

/* the LCP element: as wide as the hero column, never taller than the fold */
.pl-art--hero { width: 100%; max-width: 520px; margin: 22px 0 0; }

/* .step draws its own big number top-right — keep the picture small and left.
   The rounded corner is what stops the drawing's warm paper from reading as a
   square patch on the whiter card underneath. */
.pl-art--step { width: 128px; margin: 0 0 4px; border-radius: 10px; }

.pl-art--cefr { width: 100%; margin: 24px auto 0; }

/* the result: the crossing at the diagnosed level, under the verdict card */
.pl-art--level { width: 100%; max-width: 300px; margin: 0 auto; }
.pl-art--gaps { width: 100%; margin: 0 0 16px; border-radius: 12px; }
.pl-art--cta { width: 100%; max-width: 220px; margin: 0 auto 14px; border-radius: 12px; }

/* inside the widget: the band's listening cue, above the audio player */
.pl-art--listen { width: 100%; max-width: 340px; margin: 0 auto 12px; border-radius: 12px; }

/* signup and plan run on the app shell, so they carry their own centring */
.pl-art--form { width: 100%; max-width: 280px; margin: 0 auto 18px; }

/* ---------- accessibility floor ---------- */
.pl a:focus-visible, .pl button:focus-visible,
.pl-top a:focus-visible, .pl-foot a:focus-visible,
.pl summary:focus-visible {
  outline: 2px solid var(--orange-deep); outline-offset: 2px; border-radius: 6px;
}
@media (prefers-reduced-motion: reduce) {
  .pl-rail-fill, .pl-option, .pl-faq .faq-item summary::after { transition: none; }
}

/* ---------- 9 · the Level Report: the offer, and its public page ----------
   The offer sits on the result page (a name and a button, nothing else); the
   verify page runs on the same funnel shell but is a page about a person, so
   the name is the heading and everything under it is plain prose. */
.pl-report-form { display: grid; gap: 8px; margin: 14px 0 0; max-width: 340px; }
.pl-report-form label { font-size: 14px; font-weight: 700; color: var(--ink-2); }
.pl-report-form .btn { width: 100%; }
.pl-verify-code { margin: 12px 0 0; font-size: 16px; }
/* Not .pl-verdict-kicker: that one is coloured for the dark verdict card and
   is all but invisible on paper-coloured background. */
.pl-verify-kicker {
  font-size: 11.5px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3); margin: 0;
}
.pl-verify-name {
  font-size: 30px; margin: 8px 0 14px;
  overflow-wrap: anywhere;          /* a long single-word name must not spill */
}
.pl-verify-line { font-size: 17px; line-height: 1.55; margin: 0 0 8px; }

/* =====================================================================
   The result page, rebuilt as a landing.
   documentation/design/placement/result_page_redesign.md

   It used to be thirteen `pl-block` sections of identical weight in a 760px
   column — a settings screen. It is five acts now, deliberately unequal:
   the verdict owns the first screen, the exercise is the loudest thing on
   the page, and the small print is small. Same tokens, same two fonts,
   nothing new invented. Mobile-first, like the rest of this file.
   ===================================================================== */

.pl-result .wrap { max-width: 1080px; }
.pl-result .wrap--read { max-width: 760px; }

/* ---------- 1 · the verdict ---------- */
.plr-verdict {
  position: relative; overflow: clip;
  background: var(--night); color: var(--night-text);
  padding: 44px 0 52px;
}
.plr-verdict::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(760px 460px at 78% 8%, rgba(255,107,53,.20), transparent 62%);
}
.plr-verdict-grid { position: relative; display: grid; gap: 30px; }
.plr-kicker {
  margin: 0; font-size: 12.5px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--night-dim);
}
.plr-level {
  font-family: var(--font-display); font-weight: 800; color: #fff;
  line-height: .86; letter-spacing: -.045em;
  font-size: clamp(4.4rem, 17vw, 8.6rem); margin: .08em 0 .1em;
  animation: plrLevelIn .5s var(--ease) both .55s;
}
@keyframes plrLevelIn {
  from { opacity: 0; transform: translateY(14px) scale(.96); }
  to { opacity: 1; transform: none; }
}
.plr-verdict-story { animation: plrStoryIn .5s var(--ease) both .85s; }
@keyframes plrStoryIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* "C1 or above" is a string, not a letter: it has to drop a step or it wraps. */
.plr-level.is-top { font-size: clamp(2.2rem, 9vw, 4.4rem); }
.plr-cando {
  margin: 20px 0 0; font-size: 16.5px; line-height: 1.55; max-width: 24em;
  color: var(--night-text);
}
.plr-cando::before {
  content: "✓"; color: #7fd6a4; font-weight: 700; margin-right: 9px;
}
.plr-lang {
  font-style: normal; font-size: 12.5px; font-weight: 600;
  color: var(--ink-3); margin-left: 7px; white-space: nowrap;
}
.plr-lang::before { content: "· "; }
.plr-deficit {
  margin: 20px 0 0; font-weight: 500; line-height: 1.45; max-width: 20em;
  font-size: clamp(1.1rem, 4.4vw, 1.45rem);
}
.plr-deficit b {
  color: #fff; font-weight: 700;
  background: linear-gradient(transparent 62%, rgba(255,107,53,.42) 62%);
}
.plr-meta {
  margin: 20px 0 0; display: flex; flex-wrap: wrap; gap: 6px 20px;
  font-size: 14.5px; color: var(--night-dim);
}
.plr-meta i { font-style: normal; color: var(--night-text); font-weight: 600; }
.plr-meta-note {
  margin: 12px 0 0; font-size: 14px; line-height: 1.5; max-width: 34em;
  color: var(--night-dim);
}
.plr-cue {
  margin-top: 28px; display: inline-flex; align-items: center; gap: 11px;
  padding: 10px 20px 10px 18px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.2);
  font-size: 14.5px; font-weight: 600; color: var(--night-text);
  text-decoration: none; transition: background .2s var(--ease);
}
.plr-cue:hover { background: rgba(255,255,255,.08); color: var(--night-text); }
.plr-cue s { text-decoration: none; color: var(--orange); font-size: 16px; }
.plr-verdict-art { justify-self: center; width: min(400px, 84vw); }
.plr-verdict-art img {
  width: 100%; height: auto; display: block; border-radius: var(--r-xl);
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.6);
}
@media (min-width: 1000px) {
  .plr-verdict { padding: 74px 0 70px; }
  .plr-verdict-grid { grid-template-columns: 1.05fr .95fr; align-items: center; gap: 54px; }
  .plr-verdict-art { justify-self: end; width: min(440px, 40vw); }
}

/* the CEFR staircase — the one element this product is remembered by */
.plr-ladder {
  display: flex; align-items: flex-end; gap: 7px;
  margin: 22px 0 4px; padding: 0; list-style: none;
}
.plr-rung { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.plr-rung i {
  display: block; width: 100%; border-radius: 10px 10px 4px 4px;
  background: rgba(255,255,255,.09); border: 1px solid var(--night-line);
  transform-origin: bottom; animation: plrRise .55s var(--ease) both;
}
.plr-rung:nth-child(1) i { height: 22px; animation-delay: .05s; }
.plr-rung:nth-child(2) i { height: 34px; animation-delay: .17s; }
.plr-rung:nth-child(3) i { height: 48px; animation-delay: .29s; }
.plr-rung:nth-child(4) i { height: 64px; animation-delay: .41s; }
.plr-rung:nth-child(5) i { height: 82px; animation-delay: .53s; }
.plr-rung.is-estimate i { animation-name: plrRise, plrGlow; animation-duration: .55s, 1.6s; animation-delay: inherit, .9s; }
@keyframes plrGlow {
  0%, 100% { box-shadow: 0 10px 30px -8px rgba(255,107,53,.65); }
  45% { box-shadow: 0 10px 44px -4px rgba(255,107,53,.95); }
}
.plr-rung b { font-family: var(--font-display); font-size: 13.5px; font-weight: 700; color: var(--night-dim); }
.plr-rung.is-reached i { background: rgba(255,255,255,.20); }
.plr-rung.is-reached b { color: var(--night-text); }
.plr-rung.is-estimate i {
  background: linear-gradient(180deg, #ff8354, var(--orange)); border-color: transparent;
  box-shadow: 0 10px 30px -8px rgba(255,107,53,.65);
}
.plr-rung.is-estimate b { color: #fff; }
.plr-rung.is-range i {
  background: rgba(255,107,53,.16); border-color: rgba(255,107,53,.5); border-style: dashed;
}
.plr-rung.is-range b { color: #ffb495; }
@keyframes plrRise { from { transform: scaleY(.15); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }

/* ---------- shared act furniture ---------- */
.plr-act { padding: 72px 0; }
@media (min-width: 900px) { .plr-act { padding: 104px 0; } }
.plr-act--gaps { background: var(--paper); }
.plr-act--help { background: var(--paper-2); }
.plr-head { margin-bottom: 44px; }
@media (min-width: 900px) { .plr-head { margin-bottom: 56px; } }
.plr-eyebrow {
  margin: 0 0 16px; font-size: 13px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--orange-deep);
  display: flex; align-items: center; gap: 14px;
}
.plr-eyebrow::before {
  content: ""; flex: 0 0 34px; height: 3px; border-radius: 2px;
  background: var(--orange);
}
.plr-h2 {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em;
  font-size: clamp(1.8rem, 5.8vw, 2.9rem); line-height: 1.08; margin: 0 0 14px;
  max-width: 18em;
}
.plr-h3 { font-family: var(--font-display); font-weight: 700; font-size: 19px; margin: 0 0 8px; }
.plr-sub { margin: 0; color: var(--ink-2); font-size: 17.5px; line-height: 1.6; max-width: 34em; }
.plr-muted { color: var(--ink-3); font-size: 15px; }
.plr-micro { color: var(--ink-3); font-size: 13.5px; }
.plr-error { color: var(--orange-deep); font-weight: 600; font-size: 15px; }

/* ---------- 2 · the boardwalk and the gaps ---------- */
.plr-bridge { margin: 0 0 40px; }

/* ---------- the path scheme: you — the gaps — the next level ---------- */
.plr-scheme {
  display: flex; align-items: center; gap: 0;
  padding: 26px 22px; margin: 0 0 14px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg);
  /* the lines compress first; when even their minimum will not fit, the
     scheme scrolls INSIDE itself — the page never moves sideways */
  overflow-x: auto; scrollbar-width: none;
}
.plr-scheme::-webkit-scrollbar { display: none; }
.plr-scheme-node { display: grid; justify-items: center; gap: 3px; flex: 0 0 auto; }
.plr-scheme-node b {
  width: 54px; height: 54px; display: grid; place-items: center;
  border-radius: 50%; font-family: var(--font-display); font-weight: 800;
  font-size: 19px;
}
.plr-scheme-node i {
  font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--ink-3);
  letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
}
.plr-scheme-node--you b {
  background: var(--night); color: #fff;
  box-shadow: 0 8px 20px -8px rgba(0,0,0,.45);
}
.plr-scheme-node--goal b {
  background: var(--orange); color: #fff;
  box-shadow: 0 10px 26px -8px rgba(255,107,53,.6);
}
/* the ground already covered: solid, green, and earned — one check per topic
   this visitor got fully right. Green = have, orange = to get. */
.plr-scheme-done { display: grid; justify-items: center; gap: 3px; flex: 0 0 auto; }
.plr-scheme-done-row { display: flex; gap: 5px; }
.plr-scheme-done b {
  width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 50%; background: #eaf6ee; border: 2px solid #c9e6d3;
  color: #186a3b; font-size: 14px; font-weight: 800;
}
.plr-scheme-done i {
  font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--ink-3);
  letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
}
.plr-scheme-line--done { border-top-style: solid; border-top-color: #c9e6d3; }
.plr-scheme-line {
  flex: 1 1 0; min-width: 8px; height: 0;
  border-top: 2.5px dashed var(--line-2); margin: 0 2px;
  transform: translateY(-9px);
}
.plr-scheme-stone {
  flex: 0 0 auto; width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: 50%; border: 2.5px dashed var(--orange);
  background: var(--orange-ghost); color: var(--orange-deep);
  font-family: var(--font-display); font-weight: 800; font-size: 15px;
  transform: translateY(-9px);
}
.plr-scheme-stone.is-won {
  border-style: solid; background: var(--orange); color: #fff;
  box-shadow: 0 0 22px rgba(255,107,53,.55);
}
.plr-scheme-arrow {
  flex: 0 0 auto; width: 0; height: 0; margin: 0 4px 0 -2px;
  border-top: 7px solid transparent; border-bottom: 7px solid transparent;
  border-left: 11px solid var(--line-2);
  transform: translateY(-9px);
}
@media (max-width: 560px) {
  .plr-scheme { padding: 16px 10px; }
  .plr-scheme-line { min-width: 4px; margin: 0 1px; }
  .plr-scheme-arrow { margin: 0 2px 0 -1px; }
  .plr-scheme-node b { width: 44px; height: 44px; font-size: 16px; }
  .plr-scheme-stone { width: 30px; height: 30px; font-size: 13px; }
  .plr-scheme-node i, .plr-scheme-done i { font-size: 10px; }
  .plr-scheme-done b { width: 22px; height: 22px; font-size: 11px; }
  .plr-scheme-done-row { gap: 4px; }
}
@media (max-width: 400px) {
  .plr-scheme-done b:nth-child(3) { display: none; }
}
.plr-bridge-note { margin: 13px 0 0; font-size: 15px; color: var(--ink-2); }
.plr-bridge-note b { color: var(--ink); font-weight: 700; }

.plr-gaps {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 1px;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; background: var(--line);
}
.plr-gap {
  background: var(--card); padding: 20px 22px;
  display: grid; grid-template-columns: auto 1fr auto; gap: 5px 14px; align-items: center;
}
.plr-gap-rank {
  width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center;
  background: var(--orange-soft); color: var(--orange-deep);
  font-family: var(--font-display); font-weight: 800; font-size: 14px;
}
.plr-gap-name { font-family: var(--font-display); font-weight: 700; font-size: 17.5px; }
.plr-gap-cost { font-size: 13.5px; color: var(--ink-3); white-space: nowrap; }
.plr-gap-link {
  grid-column: 2 / -1; font-size: 14.5px; font-weight: 600;
  color: var(--orange-deep); text-decoration: none;
  display: inline-flex; gap: 7px; align-items: baseline;
}
.plr-gap-link:hover { text-decoration: underline; color: var(--orange-deep); }
.plr-gap-link s { text-decoration: none; opacity: .6; }

/* strengths + skills: supporting evidence, one strip, no headings of their own */
.plr-strip {
  margin-top: 40px; display: grid; gap: 20px; padding: 20px 22px;
  background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-lg);
}
@media (min-width: 860px) { .plr-strip { grid-template-columns: 1fr 1fr; gap: 34px; } }
.plr-strip .plr-h3 {
  font-family: var(--font-text); font-size: 13px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px;
}
.plr-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.plr-chip {
  background: #eaf6ee; border: 1px solid #c9e6d3; color: #186a3b;
  border-radius: 999px; padding: 5px 13px; font-size: 14px; font-weight: 600;
}
.plr-skill {
  display: grid; grid-template-columns: 88px 1fr auto; gap: 12px;
  align-items: center; font-size: 14.5px; margin-bottom: 9px;
}
.plr-skill b { font-weight: 600; }
.plr-skill-bar { height: 8px; border-radius: 99px; background: var(--paper-3); overflow: hidden; }
.plr-skill-bar i { display: block; height: 100%; background: var(--orange); border-radius: 99px; }
.plr-skill-pct { font-variant-numeric: tabular-nums; color: var(--ink-2); font-size: 14px; }
.plr-skill.is-thin .plr-skill-count { grid-column: 2 / -1; color: var(--ink-2); }
.plr-strip-note { margin: 4px 0 0; font-size: 13.5px; color: var(--ink-3); }

/* the spoken and written notes: cards in this act, not sections of their own */
.plr-note {
  margin-top: 28px; padding: 20px 22px; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r-lg);
}
.plr-note-lead { margin: 0 0 10px; font-size: 16.5px; font-weight: 600; }
.plr-note-tips { margin: 0; padding-left: 20px; color: var(--ink-2); font-size: 15.5px; }
.plr-note-tips li { margin-bottom: 5px; }
.plr-note .plr-muted { margin: 12px 0 0; }

/* the mistakes, folded away */
.plr-fold {
  margin-top: 28px; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
}
.plr-fold summary {
  cursor: pointer; padding: 17px 22px; list-style: none;
  font-family: var(--font-display); font-weight: 700; font-size: 16.5px;
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
}
.plr-fold summary::-webkit-details-marker { display: none; }
.plr-fold summary::after {
  content: "›"; font-size: 22px; color: var(--ink-3);
  transform: rotate(90deg); transition: transform .25s var(--ease);
}
.plr-fold[open] summary::after { transform: rotate(-90deg); }
.plr-fold-count { font-family: var(--font-text); font-weight: 600; font-size: 14px; color: var(--ink-3); }
.plr-fold-body { padding: 0 22px 6px; }
.plr-mistake { border-top: 1px solid var(--line); padding: 15px 0; }
.plr-mistake-topic {
  display: inline-block; font-size: 12.5px; font-weight: 700; color: var(--orange-deep);
  background: var(--orange-ghost); border-radius: 6px; padding: 2px 8px; margin-bottom: 6px;
}
.plr-mistake-q { display: block; font-weight: 600; margin-bottom: 4px; }
.plr-mistake-why { display: block; color: var(--ink-2); font-size: 15.5px; }
.plr-fold-more { padding: 12px 0 16px; margin: 0; color: var(--ink-3); font-size: 14px; }
.plr-mistake-audio { display: block; margin-top: 10px; }
.plr-mistake-audio audio { display: block; width: 100%; max-width: 420px; height: 40px; }
.plr-mistake-audio .plr-micro { display: block; margin-top: 5px; }

/* ---------- 3 · close one gap now ---------- */
.plr-act--fix {
  background: var(--night); color: var(--night-text);
  position: relative; overflow: clip;
}
.plr-act--fix::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(700px 420px at 20% 0%, rgba(255,107,53,.18), transparent 60%);
}
.plr-act--fix .wrap { position: relative; }
.plr-act--fix .plr-eyebrow { color: #ff9b73; }
.plr-act--fix .plr-h2 { color: #fff; }
.plr-act--fix .plr-sub,
.plr-act--fix .plr-muted,
.plr-act--fix .plr-micro { color: var(--night-dim); }
.plr-exercise {
  margin-top: 0; padding: 22px; border-radius: var(--r-xl);
  background: rgba(255,255,255,.045); border: 1px solid var(--night-line);
}
@media (min-width: 860px) { .plr-exercise { padding: 32px 34px; } }
.plr-practice-actions {
  margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
}
/* the practice widget's own markup is built by the script — restyled here for
   the night panel it now sits on, ids and class names untouched */
.plr-exercise .pl-practice-items { list-style: none; margin: 0; padding: 0; }
.plr-exercise .pl-practice-item { padding: 16px 0; border-bottom: 1px solid var(--night-line); }
.plr-exercise .pl-practice-item:last-child { border-bottom: 0; }
.plr-exercise .pl-practice-prompt {
  font-size: 18px; font-weight: 600; margin: 0 0 14px; color: #fff;
  line-height: 1.5;
}
.plr-exercise .pl-practice-options { display: flex; flex-wrap: wrap; gap: 9px; }
.plr-exercise .pl-practice-options label {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.04);
  border-radius: 11px; padding: 10px 16px; font-size: 15.5px; font-weight: 600;
  transition: background .18s var(--ease), border-color .18s var(--ease);
}
.plr-exercise .pl-practice-options label:hover { background: rgba(255,255,255,.1); }
.plr-exercise .pl-practice-options input {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.plr-exercise .pl-practice-options label:has(input:checked) {
  background: var(--orange); border-color: transparent; color: #fff;
}
.plr-exercise .pl-practice-options label:focus-within {
  outline: 2px solid var(--orange); outline-offset: 2px;
}
.plr-exercise .pl-practice-input {
  width: 100%; max-width: 320px; border-radius: 11px; padding: 13px 15px;
  border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.06);
  color: #fff; font: inherit; font-size: 16px;
}
.plr-exercise .pl-practice-input::placeholder { color: var(--night-dim); }
.plr-exercise .pl-practice-input:focus {
  outline: 2px solid var(--orange); outline-offset: 1px; border-color: transparent;
}
.plr-exercise .pl-practice-item { padding: 22px 0; }
.plr-exercise .pl-practice-feedback { margin: 10px 0 0; font-size: 15px; }
.plr-exercise .pl-practice-feedback.is-right { color: #7fd6a4; }
.plr-exercise .pl-practice-feedback.is-wrong { color: #ffab8f; }
.plr-exercise .pl-practice-score { margin: 18px 0 0; font-weight: 700; font-size: 17px; color: #fff; }

/* the ask, and the plank that slides in when the gap is closed */
.plr-ask {
  margin-top: 34px; padding: 24px; border-radius: var(--r-xl);
  background: rgba(255,255,255,.04); border: 1px solid var(--night-line);
}
@media (min-width: 860px) { .plr-ask { padding: 30px 34px; } }
.plr-ask.is-won {
  background: linear-gradient(135deg, rgba(255,107,53,.18), rgba(255,107,53,.06));
  border-color: rgba(255,107,53,.35);
}
.plr-ask .plr-h2 { font-size: clamp(1.4rem, 4.4vw, 2rem); }
.plr-ask-body { margin: 8px 0 0; color: var(--night-text); opacity: .92; max-width: 38em; }
/* what the account does, as a flow: every node is a feature that exists
   today — the scheme is the pitch, so an invented node would cost the whole
   page its credibility */
.plr-flow {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 0;
  margin: 18px 0 0;
}
.plr-flow-node {
  padding: 9px 15px; border-radius: 999px; font-size: 14.5px; font-weight: 600;
  background: rgba(255,255,255,.07); border: 1px solid var(--night-line);
  color: var(--night-text); white-space: nowrap;
}
.plr-flow-node--goal {
  background: var(--orange); border-color: transparent; color: #fff;
  font-family: var(--font-display); font-weight: 800;
}
.plr-flow-arrow {
  width: 0; height: 0; margin: 0 7px;
  border-top: 6px solid transparent; border-bottom: 6px solid transparent;
  border-left: 9px solid var(--night-dim);
}
/* the concrete continuation: named only once the first gap is actually won */
.plr-next-gap { display: none; margin: 14px 0 0; font-size: 15.5px; color: var(--night-text); }
.plr-next-gap b { color: #fff; }
.plr-ask.is-won .plr-next-gap { display: block; }
.plr-ask-cta { margin: 20px 0 0; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.plr-ask .plr-micro { display: inline-block; margin-top: 10px; }
.plr-ask-in { display: grid; gap: 22px; align-items: center; }
.plr-ask-art { display: none; }
@media (min-width: 900px) {
  .plr-ask-in { grid-template-columns: 1.35fr .65fr; gap: 34px; }
  .plr-ask-art {
    display: block; width: 100%; height: auto; border-radius: var(--r-lg);
    box-shadow: 0 24px 50px -26px rgba(0,0,0,.7);
  }
}
/* the callback path: hidden until the gap is actually closed, so the picture
   can never claim a win that has not happened. Night-panel variant of the
   same scheme Act II draws. */
.plr-scheme--won { display: none; background: rgba(255,255,255,.04);
  border-color: var(--night-line); padding: 18px 18px; margin: 0 0 22px; }
.plr-ask.is-won .plr-scheme--won { display: flex; }
.plr-scheme--won .plr-scheme-node--you b { background: rgba(255,255,255,.14); }
.plr-scheme--won .plr-scheme-line { border-top-color: rgba(255,255,255,.22); }
.plr-scheme--won .plr-scheme-arrow { border-left-color: rgba(255,255,255,.35); }
.plr-scheme--won .plr-scheme-stone {
  background: rgba(255,107,53,.12); transform: translateY(0);
}
.plr-scheme--won .plr-scheme-node b { transform: none; }
.plr-scheme--won .plr-scheme-line,
.plr-scheme--won .plr-scheme-arrow { transform: translateY(0); }
.plr-scheme--won .plr-scheme-stone.is-won {
  background: var(--orange); animation: plrSlot .75s var(--ease) both .15s;
}
@keyframes plrSlot { from { transform: translateY(-46px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- 4 · how we help ---------- */
.plr-cards { margin-top: 0; display: grid; gap: 22px; }
@media (min-width: 760px) { .plr-cards { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } }
.plr-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: 24px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow);
}
.plr-card p { margin: 0; color: var(--ink-2); font-size: 15.5px; }
.plr-card-art { display: none; }
.plr-card-ic {
  width: 42px; height: 42px; border-radius: 12px; background: var(--orange-ghost);
  display: grid; place-items: center; font-size: 21px;
}
.plr-card-list { margin: 0; padding-left: 18px; color: var(--ink-2); font-size: 15px; }
/* the plan as a little road: their gaps as numbered steps, the next level as
   the destination chip at the end */
.plr-steps { list-style: none; margin: 4px 0 0; padding: 0; counter-reset: plrstep; }
.plr-steps li {
  counter-increment: plrstep; position: relative;
  padding: 7px 0 7px 38px; font-size: 15px; font-weight: 600; color: var(--ink);
}
.plr-steps li::before {
  content: counter(plrstep); position: absolute; left: 0; top: 4px;
  width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  background: var(--orange-soft); color: var(--orange-deep);
  font-family: var(--font-display); font-weight: 800; font-size: 13px;
}
.plr-steps li:not(:last-child)::after {
  content: ""; position: absolute; left: 12.5px; top: 32px; bottom: -4px;
  width: 1.5px; background: var(--line-2);
}
.plr-steps-goal { color: var(--orange-deep); }
.plr-steps .plr-steps-goal::before {
  content: "→"; background: var(--orange); color: #fff;
}
.plr-card-foot { margin-top: auto; padding-top: 6px; }

.plr-report {
  margin-top: 30px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-xl); padding: 24px; display: grid; gap: 24px;
}
@media (min-width: 900px) { .plr-report { grid-template-columns: 1fr 1fr; padding: 30px 32px; gap: 40px; } }
.plr-report p { margin: 0 0 12px; color: var(--ink-2); font-size: 15.5px; }
.plr-code { margin: 0 0 16px; }
.plr-code a {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  font-family: var(--font-display); font-weight: 800; letter-spacing: .06em; font-size: 16.5px;
  background: var(--paper-2); border: 1px solid var(--line-2); border-radius: 10px;
  padding: 8px 14px; color: var(--ink);
}
.plr-code a:hover { border-color: var(--orange); color: var(--ink); }
.plr-report-cta { margin: 0 0 18px; }
.plr-report-form label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 7px; }
.plr-field { display: flex; gap: 10px; flex-wrap: wrap; }
.plr-field input {
  flex: 1 1 200px; min-width: 0; border: 1px solid var(--line-2); border-radius: 11px;
  padding: 11px 14px; font: inherit; font-size: 15px; background: var(--paper); color: var(--ink);
}
.plr-share-url { color: var(--ink-2); }
.plr-share .plr-micro { margin: 10px 0 0; }
.plr-email { margin-top: 28px; }
.plr-email summary {
  cursor: pointer; list-style: none; font-family: var(--font-display);
  font-weight: 700; font-size: 17.5px; margin-bottom: 10px;
}
.plr-email summary::-webkit-details-marker { display: none; }
.plr-email summary::after {
  content: "›"; display: inline-block; margin-left: 8px; color: var(--ink-3);
  transform: rotate(90deg); transition: transform .2s var(--ease);
}
.plr-email[open] summary::after { transform: rotate(-90deg); }
.plr-email-form label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 7px; }
.plr-sent {
  margin: 0 0 10px; font-size: 15px; font-weight: 600; color: #186a3b;
  background: #eaf6ee; border: 1px solid #c9e6d3; border-radius: 10px; padding: 10px 13px;
}

.plr-maria {
  margin-top: 26px; display: flex; flex-wrap: wrap; gap: 18px; align-items: center;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-xl); padding: 20px 24px;
}
.plr-maria > div { flex: 1 1 300px; }
.plr-maria p { margin: 0; color: var(--ink-2); font-size: 15.5px; }

/* ---------- 5 · the small print ---------- */
/* the close: dark like the verdict, so the page ends where it began — on us
   and the visitor, not on the footnotes */
.plr-final {
  background: var(--night); color: var(--night-text);
  padding: 72px 0; text-align: center; position: relative; overflow: clip;
}
.plr-final::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(600px 320px at 50% 110%, rgba(255,107,53,.16), transparent 62%);
}
.plr-final-in { position: relative; }
.plr-final .plr-h2 { color: #fff; margin: 0 auto 22px; max-width: 16em; }
.plr-final-cta { margin: 0 0 12px; }
.plr-final .plr-micro { color: var(--night-dim); }

.plr-small { background: var(--paper); border-top: 1px solid var(--line); padding: 52px 0 64px; }
.plr-small-grid { display: grid; gap: 16px; color: var(--ink-3); font-size: 14.5px; }
@media (min-width: 860px) { .plr-small-grid { grid-template-columns: 1fr 1fr 1.5fr; gap: 34px; } }
.plr-small-grid b { display: block; color: var(--ink-2); font-weight: 700; margin-bottom: 4px; font-size: 15px; }
.plr-small-grid a {
  color: var(--orange-deep); font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px;
}
.plr-small-grid a:hover { color: var(--orange-deep); text-decoration-thickness: 2px; }
.plr-small-grid > div { max-width: 32em; }

/* ---------- buttons this page adds ---------- */
.pl-result .btn--paper { background: var(--ink); color: var(--paper); }
.pl-result .btn--paper:hover { background: #000; color: var(--paper); }
.pl-result .btn--outline {
  background: transparent; color: var(--ink); border: 1px solid var(--line-2);
}
.pl-result .btn--outline:hover { border-color: var(--orange); color: var(--ink); }
.plr-act--fix .btn--outline { color: var(--night-text); border-color: rgba(255,255,255,.22); }

@media (prefers-reduced-motion: reduce) {
  .plr-rung i, .plr-scheme-stone.is-won, .plr-level, .plr-verdict-story { animation: none; }
  .plr-fold summary::after, .plr-email summary::after { transition: none; }
}

/* =====================================================================
   A teacher's own quiz: who wrote it, and who did not.

   Two components, both small on purpose. The funnel already has a visual
   language and a quiz is not a different product — it is the same test with
   somebody else's name on it, and a page that reskinned itself per teacher
   would be a page nobody could recognise as ours when it went wrong.
   ===================================================================== */

/* The author block, above the fold on /quiz/<slug>/. A panel rather than a
   caption: this is where a stranger decides whether the person behind the
   questions is worth a click, and a block that floats between the title and
   the lead paragraph reads as a byline instead of an introduction.
   Top-aligned, because the text beside the photo is now several lines and a
   centred portrait next to a tall column looks dropped rather than placed. */
.pl-author {
  display: flex; align-items: flex-start; gap: 14px; margin-top: 20px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-xl); padding: 16px 18px; max-width: 40em;
}
.pl-author-face {
  width: 60px; height: 60px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--line-2); flex: 0 0 auto;
}
.pl-author-name {
  font-weight: 800; font-size: 17px; color: var(--ink); margin: 0;
  line-height: 1.25;
}
p.pl-author-line {
  color: var(--ink-2); font-size: 14.5px; margin: 3px 0 0; max-width: 34em;
}
/* index_redesign.css sets `.lp a { color: inherit }` — specificity 0,1,1, so a
   class on its own loses to it. Every link colour here is element + class. */
.pl a.quiz-author-link {
  display: inline-block; color: var(--ink-2); font-size: 13.5px; font-weight: 700;
  margin-top: 9px; text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1px; text-decoration-color: var(--line-2);
}
.pl a.quiz-author-link:hover {
  color: var(--ink); text-decoration-color: currentColor;
}

/* What the teacher's own public page adds to that block: the languages they
   teach, where they are, what a trial costs, how many lessons they have
   actually taught here. Every row is optional and most authors will have
   none of them, so nothing here reserves space it might not fill.

   The element is in three of these selectors on purpose: the result page
   wraps the same rows in `.plr-maria p`, which is specificity 0,1,1 and would
   otherwise win the size and flatten the margins. */
p.pl-author-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin: 6px 0 0; font-size: 13px; color: var(--ink-3);
}
.pl-author-tag {
  background: var(--paper-2);
  border: 1px solid var(--line-2); border-radius: 999px;
  padding: 2px 9px; font-weight: 600; color: var(--ink-2);
}
.pl-author-where::before { content: '·'; margin-right: 6px; opacity: .6; }
p.pl-author-facts {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
  margin: 7px 0 0; font-size: 13px; color: var(--ink-3);
}
/* The trial is the one fact here a reader can act on, so it is the one fact
   that carries the accent. The rest stay grey on purpose: a card where four
   things shout is a card where nothing does. */
.pl-author-fact--trial {
  color: var(--ink); font-weight: 700;
}
.pl-author-fact--trial::before {
  content: ''; display: inline-block; width: 7px; height: 7px;
  border-radius: 50%; background: var(--orange); margin-right: 7px;
  vertical-align: middle;
}
.pl-author-fact--slots { color: var(--ink-2); font-weight: 700; }
/* On the result page the same block sits under a heading, so the name steps
   back a size — two bold lines the same weight read as two headings. */
.plr-maria .pl-author-name { font-size: 15.5px; }

/* The platform's line on hosted content. Deliberately quiet and deliberately
   never hidden: it is small print, not a warning, and it has to survive being
   read on a phone under a button somebody is about to press. */
.pl-hosted {
  color: var(--ink-3); font-size: 12.5px; line-height: 1.5;
  margin-top: 16px; max-width: 40em;
}
.plr-small .pl-hosted, .pl-verify .pl-hosted { margin-top: 8px; }

/* The report form. One field, and it has to be comfortable to type a
   paragraph into on a phone — this is somebody taking the trouble to tell us
   about a problem, and a cramped box is a shorter report. */
.pl-report-form { margin-top: 18px; max-width: 34em; }
.pl-report-label {
  display: block; font-weight: 700; font-size: 14px; margin-bottom: 8px;
  color: var(--ink);
}
.pl-report-form textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--line-2);
  border-radius: 12px; font: inherit; font-size: 15px; line-height: 1.5;
  color: var(--ink); background: var(--paper); resize: vertical;
}
.pl-report-form textarea:focus {
  outline: none; border-color: var(--orange);
}
.pl-report-form .btn { margin-top: 12px; }


/* A quiz's front door has no "example result" card beside the hero — that
   card is the SITE landing's, selling CEFR to a stranger who arrived from a
   search. Without it the two-column rule held an empty half-row open next to
   every teacher's test. One column, and the measure stays readable. */
.pl-stage-in--solo { max-width: 46rem; }
@media (min-width: 940px) {
  .pl-stage-in--solo { grid-template-columns: minmax(0, 1fr); }
  .pl-stage-in--solo .pl-hero, .pl-stage-in--solo .pl-widget { grid-column: 1; }
}

/* Same shape of bug on the result: the verdict band is a two-column grid
   whose right half is the crossing illustration, and a single-stage quiz has
   no illustration to put there (no level, no picture of a level). */
@media (min-width: 900px) {
  .plr-verdict-grid--solo { grid-template-columns: minmax(0, 1fr); }
}

/* The teacher's paragraph on the result page. Reads as a person talking, not
   as another notice: normal measure, normal weight, sitting under the name it
   belongs to. */
.plr-author-note {
  margin-top: .55rem; max-width: 44ch; color: var(--ink-2);
  font-size: 15px; line-height: 1.55;
}

/* The comparison line in the verdict band: present, not shouting — it sits
   under the honesty strip and borrows its palette. */
.plr-compare {
  margin: 12px 0 0; font-size: 15px; color: var(--night-dim);
  max-width: 34em;
}

/* The teacher's band verdict, under the score in the dark verdict body. The
   title is the teacher's headline; the note is one quiet sentence. */
.plr-band-title {
  font-family: var(--font-display); font-weight: 700; color: var(--orange);
  font-size: clamp(1.3rem, 3.6vw, 1.7rem); margin: 6px 0 0;
}
.plr-band-note { margin: 6px 0 0; color: var(--night-dim); font-size: 15px; max-width: 34em; }

/* The author's face on the result card, sized like the quiz page's. */
.plr-maria-face {
  width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
  flex: 0 0 auto; border: 2px solid var(--line);
  /* The card stays centred so its call to action does, but the portrait now
     sits beside several lines of introduction and would otherwise float in
     the middle of them. */
  align-self: flex-start;
}

/* ---- the live pronunciation check (result page, Act IV) ---------------
   The one block on the page where the platform performs instead of
   promising. Copy sits beside the widget on wide screens so the sentence,
   the mic and the finding stay one uninterrupted column on a phone. The
   finding itself is drawn by the shared renderer and styled by
   pronunciation_check.css — nothing here restyles it, so it stays the same
   feature the paid tools show. */
.plr-pronounce {
  margin-top: 30px;
  display: grid;
  gap: 20px;
  align-items: start;
}
@media (min-width: 860px) {
  .plr-pronounce { grid-template-columns: 1fr 1.5fr; gap: 34px; }
}
.plr-pron-copy p { margin: 8px 0 0; color: var(--ink-2); font-size: 15.5px; }
.plr-pron-box {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow);
  padding: 22px 24px;
}
.plr-pron-text {
  margin: 0 0 14px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.5;
}
.plr-pron-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.plr-pron-link {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--orange-deep);
  font: inherit;
  font-weight: 600;
  font-size: 14.5px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.plr-pron-clock {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--orange-deep);
}
.plr-pron-state { margin: 12px 0 0; font-size: 14.5px; color: var(--ink-2); }
.plr-pron-state.is-error { color: var(--orange-deep); font-weight: 600; }
.plr-pron-state.is-good { color: #186a3b; font-weight: 700; }
.plr-pron-out { margin-top: 16px; }
.plr-pron-out:empty { margin-top: 0; }
.plr-pron-privacy { margin: 14px 0 0; font-size: 13.5px; color: var(--ink-3); }

/* ---- the in-test pronunciation bonus card (final step) ----------------
   Rides full-width under the speaking and writing cards: it is a demo of
   the platform, not a third sample, and must read as lighter than the two
   real asks above it. The finding inside is the shared read-out styled by
   pronunciation_check.css. */
@media (min-width: 780px) {
  .pl-choice-card--bonus { grid-column: 1 / -1; }
}
.pl-choice-card--bonus {
  background: var(--orange-ghost, #fff4ea);
  border-style: dashed;
}
.pl-pron-sentence {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
}
.pl-pron-out:empty { display: none; }
.pl-pron-out {
  background: var(--paper, #fff);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  padding: 12px 14px;
}
.pl-rec-state.is-good { color: #186a3b; font-weight: 700; }

/* ---- the level-card share link (result page) -------------------------- */
.plr-share-card { margin: 10px 0 0; }
.plr-share-cardlink {
  color: var(--orange-deep);
  font-weight: 600;
  font-size: 14.5px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.plr-share-card--solo { margin-top: 18px; }

/* ---- the language switch in the funnel chrome ------------------------
   Sits between the "for learners" link and the account button, styled as
   one of the nav's own quiet links rather than an action: changing the
   language is not the thing this page is for. The globe carries it on
   narrow screens, where the endonym would push the account button off. */
.pl-top-lang {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--ink-2);
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
}
.pl-top-lang:hover { background: rgba(45, 38, 25, .06); color: var(--ink); }
.pl-top-lang svg { width: 17px; height: 17px; flex: none; }
@media (max-width: 480px) {
  .pl-top-lang span { display: none; }
}