/* PrepMyRound - mobile first; one column under 760px, wider layouts above. */
:root {
  --bg: #f7f7f5; --card: #ffffff; --ink: #18202e; --muted: #5d6675; --line: #e3e5e9;
  --brand: #1b2a4a; --accent: #f5a623; --accent-ink: #1b2a4a; --ok: #1f8a5b; --warn: #b4501c;
  --radius: 14px; --shadow: 0 1px 2px rgba(16,24,40,.06), 0 4px 16px rgba(16,24,40,.06);
}
/* Light only (user, 11 Nov 2026: "normal instead of dark"). */
:root { color-scheme: light; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink);
       font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--brand); }
h1 { font-size: clamp(1.6rem, 4vw, 2.3rem); line-height: 1.2; margin: .4em 0 .3em; }
h2 { font-size: 1.3rem; margin: 0 0 .5em; }
h3 { font-size: 1.05rem; margin: 1em 0 .4em; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 16px; }
.narrow { max-width: 760px; }
.center { text-align: center; }
.muted { color: var(--muted); }
.fine { color: var(--muted); font-size: .88rem; }
small { color: var(--muted); }
main { padding-bottom: 48px; }
main > section { margin-top: 28px; }

/* header */
.top { position: sticky; top: 0; z-index: 5; background: color-mix(in srgb, var(--bg) 88%, transparent);
       backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.top-in { display: flex; align-items: center; justify-content: space-between; height: 58px; }
.brand { font-weight: 800; color: var(--ink); text-decoration: none; display: flex; gap: 8px; align-items: center; letter-spacing: -.01em; }
.brand .dot { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent); }
.nav { display: flex; gap: 14px; align-items: center; }
.nav > a:not(.btn) { color: var(--ink); text-decoration: none; font-size: .95rem; }
@media (max-width: 560px) { .nav > a:not(.btn) { display: none; } }
.me { position: relative; }
.me summary { list-style: none; cursor: pointer; }
.me summary::-webkit-details-marker { display: none; }
.me img, .me .initial { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--brand); color: #fff; font-weight: 700; }
.me .menu { position: absolute; right: 0; top: 44px; background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: var(--shadow); min-width: 220px; padding: 8px; }
.me .menu a { display: block; padding: 8px 10px; border-radius: 8px; color: var(--ink); text-decoration: none; }
.me .menu a:hover { background: var(--bg); }
.me .who { padding: 8px 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; cursor: pointer;
  background: var(--accent); color: var(--accent-ink); font-weight: 700; border-radius: 999px; padding: 11px 20px;
  text-decoration: none; font-size: 1rem; }
.btn:hover { filter: brightness(1.04); }
.btn:disabled { opacity: .6; cursor: progress; }
.btn-sm { padding: 7px 14px; font-size: .9rem; }
.btn-lg { padding: 14px 26px; font-size: 1.05rem; }
.btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.link { background: none; border: 0; color: var(--brand); text-decoration: underline; cursor: pointer; padding: 0; font: inherit; }
.chip { border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 999px; padding: 5px 11px;
  cursor: pointer; font-size: .85rem; }

/* home */
.hero { padding: 36px 0 12px; }
.hero h1 { font-size: clamp(2rem, 6vw, 3.4rem); max-width: 16ch; letter-spacing: -.02em; }
.eyebrow { color: var(--warn); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; margin: 0; }
.lead { font-size: 1.12rem; max-width: 62ch; }
.cta { display: flex; gap: 12px; flex-wrap: wrap; margin: 18px 0 8px; }
.steps4 { list-style: none; padding: 0; display: grid; gap: 12px; grid-template-columns: 1fr; counter-reset: s; }
.steps4 li { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 16px 16px 56px;
  position: relative; counter-increment: s; display: grid; gap: 4px; }
.steps4 li::before { content: counter(s); position: absolute; left: 16px; top: 15px; width: 28px; height: 28px; border-radius: 50%;
  background: var(--brand); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .9rem; }
.steps4 span { color: var(--muted); font-size: .95rem; }
@media (min-width: 760px) { .steps4 { grid-template-columns: repeat(4, 1fr); } }
.grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .grid { grid-template-columns: repeat(3, 1fr); } }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.pad { padding: 18px; }
@media (min-width: 760px) { .pad { padding: 24px; } }
.sample { text-decoration: none; color: var(--ink); overflow: hidden; }
.sample p, .soon p { color: var(--muted); margin: 4px 0 0; font-size: .92rem; }
.thumb { position: relative; aspect-ratio: 16/9; background: #000; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb .play { position: absolute; inset: 0; display: grid; place-items: center; font-size: 2.2rem; color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,.5); }
.soon { display: grid; align-items: center; border-style: dashed; box-shadow: none; }
/* home: the samples slideshow - one slide per view, swipe or scroll-snap; app.js adds arrows, dots and the advance */
.shows { padding-top: 22px; max-width: 900px; }
.slides { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: 14px; overflow-x: auto;
  scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain; }
.slides::-webkit-scrollbar { display: none; }
.slide { scroll-snap-align: start; display: block; }
.slide.soon { align-items: stretch; }
.soon-in { background: var(--bg); display: grid; place-items: center; text-align: center; padding: 16px; }
.soon-in p { margin: 6px 0 14px; }
.sl-nav { display: flex; gap: 8px; }
.sl-btn { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: var(--card);
  color: var(--ink); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.sl-btn:disabled { opacity: .35; cursor: default; }
.dots { display: flex; justify-content: center; gap: 8px; margin-top: 12px; min-height: 8px; }
.dots button { width: 8px; height: 8px; padding: 0; border-radius: 50%; border: 0; background: var(--line); cursor: pointer; }
.dots button[aria-current="true"] { background: var(--accent); width: 22px; border-radius: 4px; }
.pricing h3 { margin-top: 0; }
.price { font-size: 1.8rem; font-weight: 800; margin: 0 0 8px; }
.pricing ul { padding-left: 18px; margin: 0; color: var(--muted); }
.hl { outline: 2px solid var(--accent); }
.faq details { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; margin: 8px 0; }
.faq summary { cursor: pointer; font-weight: 600; }

/* forms */
.form fieldset { border: 0; padding: 0; margin: 0 0 18px; }
.form legend { font-weight: 700; font-size: 1.05rem; margin-bottom: 8px; }
label { display: grid; gap: 6px; margin: 12px 0; font-weight: 600; }
label small { font-weight: 400; }
input, textarea, select { font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 10px;
  padding: 11px 12px; width: 100%; }
textarea { resize: vertical; }
input:focus, textarea:focus, select:focus { outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent); border-color: transparent; }
.seg { display: flex; gap: 8px; flex-wrap: wrap; }
.seg label { margin: 0; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 14px; font-weight: 500; cursor: pointer; }
.seg input, .plan input, .castc input { width: auto; }
.alert { background: color-mix(in srgb, var(--warn) 12%, var(--card)); border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent);
  padding: 10px 14px; border-radius: 10px; }
.note { background: var(--bg); border-radius: 10px; padding: 8px 12px; font-size: .9rem; color: var(--muted); }
.login { max-width: 420px; margin: 24px auto; display: grid; gap: 12px; justify-items: center; }
.devlogin { width: 100%; display: grid; gap: 8px; border-top: 1px solid var(--line); padding-top: 12px; margin-top: 8px; }

/* dashboard / lists */
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.list { display: grid; gap: 10px; margin-top: 12px; }
.item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; text-decoration: none; color: var(--ink); }
.item p { margin: 2px 0 0; font-size: .9rem; }
.badge { font-size: .78rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--bg); color: var(--muted); white-space: nowrap; }
.b-done, .b-free { background: color-mix(in srgb, var(--ok) 15%, var(--card)); color: var(--ok); }
.b-production, .b-research { background: color-mix(in srgb, var(--accent) 18%, var(--card)); color: var(--warn); }
.empty { text-align: center; display: grid; gap: 12px; justify-items: center; }
.back { color: var(--muted); text-decoration: none; font-size: .92rem; }

/* interview page */
.stepper { list-style: none; padding: 0; margin: 8px 0 18px; display: flex; gap: 6px; overflow-x: auto; }
.stepper li { flex: 1 0 auto; font-size: .8rem; font-weight: 600; color: var(--muted); padding: 6px 10px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--line); white-space: nowrap; }
.stepper li.on { background: var(--brand); color: #fff; border-color: transparent; }
section > .card { margin: 14px 0; }
.bar { height: 10px; background: var(--bg); border-radius: 999px; overflow: hidden; border: 1px solid var(--line); }
.bar span { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width .6s; }
.bar.indet span { width: 35%; animation: slide 1.4s ease-in-out infinite; }
@keyframes slide { 0% { margin-left: -35%; } 100% { margin-left: 100%; } }
.rprog { display: grid; gap: 6px; margin: 12px 0; }
.rprog span { font-weight: 600; }
.report .tdetails { margin-top: 6px; }
.report summary, .tgt .round summary { cursor: pointer; }
.qs { padding-left: 20px; }
.qs li { margin: 10px 0; }
.lk { font-style: normal; font-size: .75rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; margin-right: 6px; }
.lk-high { background: color-mix(in srgb, var(--warn) 15%, var(--card)); color: var(--warn); }
.lk-medium { background: var(--bg); }
.two { display: grid; gap: 4px 24px; }
@media (min-width: 760px) { .two { grid-template-columns: 1fr 1fr; } }
.two ul { padding-left: 18px; margin: 0; }
.two li { margin: 6px 0; }
.cast-grid { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .cast-grid { grid-template-columns: repeat(4, 1fr); } }
.castc { margin: 0; position: relative; cursor: pointer; border-radius: 12px; overflow: hidden; border: 2px solid var(--line); gap: 0; }
.castc input { position: absolute; opacity: 0; }
.castc img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.castc span { padding: 8px 10px; font-weight: 600; font-size: .92rem; }
.castc:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }
.voice .plays { display: flex; gap: 6px; flex-wrap: wrap; font-weight: 400; }
.plan { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 10px; border: 1px solid var(--line);
  border-radius: 12px; padding: 12px 14px; cursor: pointer; }
.plan small { grid-column: 2 / 4; }
.plan:has(input:checked) { border-color: var(--accent); }
.plan .price { font-size: 1.1rem; margin: 0; }
.total { font-size: 1.1rem; }
.danger { margin-top: 24px; text-align: right; font-size: .9rem; }
.player { width: 100%; border-radius: var(--radius); background: #000; aspect-ratio: 16/9; margin: 12px 0; }
.transcript p { margin: .4em 0; }
.transcript h2 { margin-top: 1.2em; font-size: 1.05rem; text-transform: capitalize; }
.foot { border-top: 1px solid var(--line); padding: 18px 0 28px; color: var(--muted); font-size: .85rem; }

/* report */
.rsec { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 12px; }
.rsec:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.rsec h3 small { font-weight: 400; }
.callout { background: color-mix(in srgb, var(--accent) 12%, var(--card)); border-radius: 10px; padding: 10px 14px; }
.locked { background: var(--bg); border: 1px dashed var(--line); border-radius: 10px; padding: 10px 14px; color: var(--muted); font-size: .93rem; }
.ans { margin: 8px 0 4px; border-left: 3px solid var(--accent); padding: 4px 0 4px 12px; }
.ans summary { cursor: pointer; font-weight: 600; color: var(--brand); }
.ans .model { background: var(--bg); border-radius: 10px; padding: 4px 14px; margin: 8px 0; }
.ans .tests { margin: 8px 0 0; }
.ans ul { margin: 4px 0; }
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.tab { background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; text-decoration: none; color: var(--ink); font-size: .9rem; font-weight: 600; }
.buy { outline: 2px solid var(--accent); }

/* new interview: job or school wording (app.js switches data-kind), the document list */
.newiv[data-kind=job] [data-school], .newiv[data-kind=admissions] [data-job] { display: none; }
.file { display: grid; gap: 6px; margin: 12px 0; }
.files { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.files li { background: var(--bg); border-radius: 10px; padding: 8px 12px; display: flex; justify-content: space-between; gap: 10px; font-size: .92rem; }
.addfile { position: relative; justify-self: start; margin: 0; font-weight: 600; }
.addfile input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }

/* the plan: game plan points, reported questions, the buyer's own answers */
.ticks { padding-left: 20px; margin: 6px 0; }
.ticks li { margin: 6px 0; }
.lk-rep { background: color-mix(in srgb, var(--ok) 14%, var(--card)); color: var(--ok); }
.myans { margin: 8px 0 2px; line-height: 1.5; }
.ansbar { margin: 0 0 8px; min-height: 1em; }
.makevid { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
.lt small { font-weight: 400; }
/* search landing pages (/interview/<slug>) */
.lp .rsec { margin-top: 28px; padding-top: 20px; }
.lp .rsec h2 small { font-weight: 400; color: var(--muted); font-size: .9rem; }
.lp-cta { margin: 18px 0; border: 1.5px solid var(--accent); }
.lp-cta p { margin: 6px 0 14px; color: var(--muted); }
.lp-cta .fine { margin: 10px 0 0; }
.lp-round { margin: 12px 0; }
.lp-round h3 { margin: 0 0 4px; }
.lp-round h3 small { font-weight: 400; }
.lp-round .qs a { font-size: .85rem; margin-left: 4px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips .chip { cursor: default; }
.lp-sources { margin-top: 20px; }
.lp-sources li { margin: 4px 0; }
.lp-video .player { margin: 6px 0 4px; }
.lp-video .fine { margin: 0 0 14px; }

/* 28 Oct 2026: the free answer's first sentence, generating answers, the round picker */
.ans.teaser .fade { color: var(--muted); }
.gen { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin: 12px 0 18px;
       background: color-mix(in srgb, var(--accent) 8%, var(--card)); }
.gen p { margin: 6px 0 10px; }
.rounds-pick { display: grid; gap: 8px; margin: 10px 0; }
.rp { display: flex; gap: 10px; align-items: flex-start; margin: 0; font-weight: 400; text-align: left; border: 1px solid var(--line); border-radius: var(--radius);
      padding: 10px 12px; cursor: pointer; }
.rp input { margin-top: 4px; width: auto; flex: none; }
.rp > span { flex: 1; }
.rp.rec { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.rp.off { opacity: .6; cursor: default; }
.castform .seg { margin: 6px 0 4px; }
.model mark { background: color-mix(in srgb, var(--accent) 28%, transparent); color: inherit; padding: 0 3px; border-radius: 4px; }
.lp-sample { margin: 8px 0 22px; }
.lp-sample .rsec:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
/* Phones: the five steps wrap instead of scrolling out of sight (28 Oct 2026, "Full interview plan" is longer). */
@media (max-width: 560px) { .stepper { flex-wrap: wrap; overflow: visible; } .stepper li { flex: 1 1 auto; text-align: center; } }
/* Landing pages lead with the offer (user, 28 Oct 2026: "unclear what our offering is"). */
.lp-hero { padding: 8px 0 4px; }
.lp-hero h1 { margin-bottom: .2em; }
.lp-pitch { font-size: clamp(1.2rem, 3.2vw, 1.5rem); font-weight: 700; line-height: 1.3; margin: .2em 0 .5em; max-width: 38ch; }
.lp-hero .lead { margin: 0 0 8px; }
.lp-ticks { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 8px; }
.lp-ticks li { position: relative; padding-left: 28px; margin: 0; }
.lp-ticks li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%;
  background: color-mix(in srgb, var(--ok) 18%, var(--card)); color: var(--ok); font-weight: 800; font-size: .8rem;
  display: grid; place-items: center; margin-top: 3px; }
.lp-hero .cta { margin-top: 16px; }
.lp-hero .fine { margin: 0; }
.lp-steps { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 10px; counter-reset: s; }
.lp-steps li { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px 14px 54px;
  position: relative; counter-increment: s; }
.lp-steps li::before { content: counter(s); position: absolute; left: 14px; top: 13px; width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font-weight: 800; font-size: .9rem; }
.lp-steps span { display: block; color: var(--muted); font-size: .95rem; margin-top: 2px; }
.lp-steps .badge { font-style: normal; vertical-align: 1px; margin-left: 4px; }
.lp-clamp { max-height: 560px; overflow: hidden; position: relative; }
.lp-clamp::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 160px; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--card) 85%); }
.lp-more { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; z-index: 1; }
.lp-more .btn { background: var(--card); }
.lp-sample:not(.lp-clamp) .lp-more { display: none; }
.lp-guide { margin-top: 28px; }
.lp-inline { margin: 10px 0 0; font-weight: 600; }
.lp-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); border-top: 1px solid var(--line);
  display: flex; justify-content: center; }
.lp-sticky[hidden] { display: none; }
.lp-sticky .btn { width: 100%; max-width: 420px; }
/* The funnel (28 Oct 2026): locked parts lead to the offer; the free plan says what unlocking adds. */
a.locked { display: block; text-decoration: none; }
a.locked:hover { border-color: var(--accent); color: var(--ink); }
.upsell { display: flex; gap: 10px 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin: 4px 0 16px; }
.upsell p { margin: 0; flex: 1 1 320px; }
.buy-meta { display: flex; gap: 6px 16px; flex-wrap: wrap; margin: 4px 0 12px; }
.login-next { text-align: left; width: 100%; margin: 0; }
.opt { border: 1px dashed var(--line); border-radius: 12px; padding: 10px 14px; margin: 12px 0; }
.opt summary { cursor: pointer; font-weight: 600; }
.opt summary small { font-weight: 400; }
/* Footer links and the policy pages (launch prep, 28 Oct 2026). */
.foot-links { margin: 8px 0 0; }
.foot-links a { color: var(--muted); }
.legal h2 { margin-top: 1.6em; }
.legal li { margin: 6px 0; }
/* The sample video leads the landing page (user, 29 Oct 2026: "show don't tell"): a big play button over the poster,
   gone once it plays. */
.vwrap { position: relative; }
.vwrap .player { display: block; }
.vplay { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 84px; height: 84px; padding: 0;
  border: 0; border-radius: 50%; background: color-mix(in srgb, var(--accent) 92%, transparent); cursor: pointer;
  box-shadow: 0 6px 24px rgba(0,0,0,.35); display: grid; place-items: center; transition: transform .15s; }
.vplay:hover { transform: translate(-50%, -50%) scale(1.06); }
.vplay span { width: 0; height: 0; margin-left: 6px; border-style: solid; border-width: 15px 0 15px 25px;
  border-color: transparent transparent transparent var(--accent-ink); }
.vwrap.started .vplay { display: none; }
@media (max-width: 560px) { .vplay { width: 64px; height: 64px; } .vplay span { border-width: 12px 0 12px 20px; } }
.lp-hero .lp-video .fine { margin: 0 0 4px; }
.lp-hero .lp-video { margin-top: 10px; }
.lp-plan { margin-top: 10px; }
.lp-plan > .muted { margin: 0 0 8px; }
/* The landing page's form under the sample video (user, 29 Oct 2026: no sign-in before the free plan). */
.lp-form { margin: 14px 0 6px; }
.lp-form h2 { margin: 0 0 4px; font-size: 1.25rem; }
.lp-form > .muted { margin: 0 0 10px; }
.lp-fields { display: grid; gap: 10px; align-items: end; }
@media (min-width: 760px) { .lp-fields { grid-template-columns: 1fr 1fr 1fr; } }
.lp-form .file { margin: 12px 0 14px; }
.lp-form .btn-lg { width: 100%; }
.lp-form .fine { margin: 10px 0 0; }
.guest-save { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.guest-save p { margin: 0; flex: 1 1 260px; }

/* The four steps (user, 29 Oct 2026: "Progress bar on top"): number, name, price; done steps tick and link back. */
.steps { list-style: none; padding: 0; margin: 4px 0 18px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
  counter-reset: none; }
.steps li { position: relative; border-top: 4px solid var(--line); padding-top: 8px; font-size: .82rem; line-height: 1.3;
  color: var(--muted); }
.steps li > a { color: inherit; text-decoration: none; display: block; }
.steps li.done { border-color: var(--ok); }
.steps li.cur { border-color: var(--accent); color: var(--ink); }
.steps .sn { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-weight: 700;
  font-size: .78rem; background: var(--line); color: var(--ink); margin-right: 4px; vertical-align: middle; }
.steps li.done .sn { background: var(--ok); color: #fff; }
.steps li.cur .sn { background: var(--accent); color: var(--accent-ink); }
.steps .sl { font-weight: 600; }
.steps .sl .sh { display: none; }

@media (max-width: 560px) {
  .steps { gap: 4px; }
  .steps li { font-size: .74rem; }
  .steps .sn { display: grid; margin: 0 0 3px; }
  .steps .sl .lg { display: none; }
  .steps .sl .sh { display: inline; }
}

/* The way in: company and role, with suggestions as they type. */
.start h1 { margin-top: .5em; }
.start .lead { margin-top: 0; }
.prep { margin: 18px 0 14px; }
.prep .btn-lg { width: 100%; margin-top: 6px; }
.prep .fine { margin: 10px 0 0; text-align: center; }
.ac { position: relative; }
.ac input { width: 100%; }
.sug { position: absolute; z-index: 6; left: 0; right: 0; top: 100%; margin: 4px 0 0; padding: 4px; list-style: none;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow);
  max-height: 300px; overflow-y: auto; font-weight: 400; }
.sug li { padding: 9px 10px; border-radius: 8px; cursor: pointer; display: flex; justify-content: space-between; gap: 10px; }
.sug li[aria-selected="true"], .sug li:hover { background: var(--bg); }
.sug li small { white-space: nowrap; }
.sug li .ok { color: var(--ok); }

/* Step 1's page */
.tgt .lead { margin-top: .2em; }
.step2 { margin: 26px 0; border: 2px solid var(--accent); }
.step2 h2 { margin-top: .2em; }
.step2 .btn-lg { width: 100%; }
.step2 .file { margin: 12px 0 14px; }

/* Step 1's details: titles only, each one opens on its own (user, 30 Oct 2026: "very clean and tight"). */
.tdetails { margin: 4px 0 18px; border-bottom: 1px solid var(--line); }
.tdetails > details { border-top: 1px solid var(--line); }
.tdetails > details > summary { cursor: pointer; padding: 11px 2px; font-weight: 600; }
.tdetails > details > summary .muted { font-weight: 400; font-size: .88rem; }
.tdetails > details[open] > summary { padding-bottom: 4px; }
.tdetails > details > :not(summary) { margin: 6px 0 10px; }
.tdetails .qs { padding-left: 20px; }
.tdetails .qs li { margin: 6px 0; }
.tgt .lead { margin-bottom: 14px; }
.tgt .step2 { margin-top: 18px; }
/* Jumping to a section keeps its heading clear of the sticky header (user, 30 Oct 2026: the title was off screen on mobile). */
[id] { scroll-margin-top: 72px; }

/* Links for people and search engines (SEO, 30 Oct 2026): popular interviews, related interviews. */
.popular { margin: 22px 0 0; border-top: 1px solid var(--line); padding-top: 10px; }
.popular summary { cursor: pointer; font-weight: 600; padding: 4px 0; }
.popular ul, .related ul { list-style: none; padding: 0; margin: 4px 0 10px; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.popular li, .related li { font-size: .9rem; }
.related { margin: 22px 0 8px; }
.lp-h2 { margin-top: 28px; }

/* Prep packages (webapp/prep.py, 8 Nov 2026): overview facts, question cards, answers, the mock interview. */
.pkg .steps li > a { cursor: pointer; }
.pkg h2.sec { margin-top: 28px; }
.pkg .facts { display: grid; gap: 10px 18px; grid-template-columns: 1fr; margin: 16px 0; }
.pkg .facts div { display: flex; flex-direction: column; }
.pkg .facts b { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
@media (min-width: 640px) { .pkg .facts { grid-template-columns: 1fr 1fr; } }
.pkg .tdetails details { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; margin: 8px 0; }
.pkg .tdetails summary, .pkg details summary { cursor: pointer; font-weight: 600; }
.pkg .upl { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.pkg .upl form { display: grid; gap: 10px; margin-top: 8px; }
.pkg .upl textarea, .pkg .ans-in textarea { width: 100%; }
.pkg .ivname { margin: 0; font-size: 1.2rem; }
.pkg .srcs { margin: 18px 0; }
.pkg .pq { list-style: none; padding: 0; display: grid; gap: 12px; }
.pkg .pq li p { margin: .4em 0; }
.pkg .pq .q { font-weight: 700; font-size: 1.05rem; }
.pkg .freq { font-style: normal; font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; vertical-align: 2px;
  background: color-mix(in srgb, var(--ok) 14%, var(--card)); color: var(--ok); white-space: nowrap; }
.pkg .freq-sometimes, .pkg .freq-occasionally { background: color-mix(in srgb, var(--accent) 16%, var(--card)); color: var(--warn); }
.pkg .freq-rare, .pkg .freq-curveball { background: var(--bg); color: var(--muted); }
.pkg .ans { margin: 8px 0; padding: 0; }
.pkg .ans summary { padding: 14px 16px; }
.pkg .ans-body { padding: 0 16px 14px; }
.pkg .who-card { margin: 14px 0 6px; }
.pkg mark { background: color-mix(in srgb, var(--accent) 35%, transparent); color: inherit; border-radius: 4px; padding: 0 2px; }
.pkg .mock .row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 10px 0; }
.pkg .mock .chk { display: inline-flex; gap: 6px; align-items: center; }
.pkg .mq { font-size: 1.2rem; font-weight: 700; line-height: 1.4; margin: 6px 0 12px; }
.pkg .recdot { width: 10px; height: 10px; border-radius: 50%; background: var(--warn); display: inline-block; }
.pkg [data-rec].on { box-shadow: inset 0 0 0 2px var(--warn); }
.pkg [data-rec].on .recdot { animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .25; } }
.pkg .fb .verdict { font-weight: 600; }
.pkg .stars { color: var(--accent); letter-spacing: 1px; margin-right: 4px; }
.pkg .fb-cols { display: grid; gap: 4px 18px; }
@media (min-width: 640px) { .pkg .fb-cols { grid-template-columns: 1fr 1fr; } }
.pkg .fb h3 { margin: .6em 0 .2em; font-size: .95rem; }
.pkg .your { background: var(--bg); border-radius: 10px; padding: 10px 12px; white-space: pre-wrap; }
.pkg .logq { margin: 10px 0; }
.pkg .logq summary { padding: 12px 16px; }
.pkg .refs { font-size: .8rem; color: var(--muted); margin: 8px 0 0; line-height: 1.5; }
.pkg .refs a { color: var(--muted); }
.pkg .refs a:hover { color: var(--brand); }
.pkg .refs .more { display: inline; }
.pkg .refs .more summary { display: inline; font-weight: 400; color: var(--brand); cursor: pointer; }
.pkg .fref { font-size: .75rem; margin-top: 2px; }
.pkg .fref a { color: var(--muted); }
.pkg .buyrow { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 6px; }
.pkg .buyrow form { margin: 0; }
.pkg .unlock { margin: 26px 0; }
.pkg .unlock h2 { margin-bottom: .3em; }
.pkg .plans { display: grid; gap: 12px; grid-template-columns: 1fr; margin: 14px 0 8px; }
@media (min-width: 640px) { .pkg .plans { grid-template-columns: 1fr 1fr; } }
.pkg .plan { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.pkg .plan.best { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.pkg .plan p { margin: 0; }
.pkg .pname { font-weight: 700; }
.pkg .price { font-size: 1.6rem; font-weight: 800; }
.pkg .plan .btn { margin-top: 8px; align-self: flex-start; }
.pkg .steps-how { padding-left: 20px; }
.pkg .steps-how li { margin: 4px 0; }
.pkg .doc h1 { font-size: 1.4rem; }
/* Home: school admissions interviews (10 Nov 2026). */
.home2 .schools { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .home2 .schools { grid-template-columns: 1fr 1fr; } }
.home2 .school { text-decoration: none; color: var(--ink); display: flex; flex-direction: column; gap: 4px; }
.home2 .school:hover { border-color: var(--accent); }
.home2 h3 { margin-top: 18px; }
.home2 .plans { display: grid; gap: 12px; grid-template-columns: 1fr; margin: 10px 0; }
@media (min-width: 640px) { .home2 .plans { grid-template-columns: 1fr 1fr; } }
.home2 .plan { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.home2 .plan.best { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.home2 .plan p { margin: 0; }
.home2 .pname { font-weight: 700; }
.home2 .price { font-size: 1.6rem; font-weight: 800; }
.pkg .tag { font-style: normal; font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; vertical-align: 3px;
  background: var(--bg); color: var(--muted); border: 1px solid var(--line); margin-left: 6px; }
.pkg .upl-top { margin: 6px 0 12px; border-top: 0; padding-top: 0; }
.pkg .ans.locked summary { color: var(--muted); }
.findform { display: grid; gap: 8px; margin: 18px 0 22px; }
.findform label { font-weight: 700; font-size: .9rem; }
.findform input, .findform select { width: 100%; padding: 11px 12px; }
.findform .btn { justify-self: start; margin-top: 6px; }
@media (min-width: 760px) { .findform { grid-template-columns: 1.2fr 1.1fr auto; align-items: end; column-gap: 12px; }
  .findform label { grid-row: 1; } .findform input, .findform select, .findform .btn { grid-row: 2; margin: 0; } }
.pkg .guide h4 { margin: .8em 0 .2em; font-size: .9rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.pkg .guide p { margin: .2em 0; }
.pkg .upl .chk { display: flex; gap: 8px; align-items: flex-start; }
.pkg .upl .chk input { margin-top: 3px; flex: none; width: auto; }
.pkg [id], .home2 [id] { scroll-margin-top: 76px; }
.home2 .more-schools { margin: 10px 0 4px; }
.home2 .more-schools summary { cursor: pointer; color: var(--brand); }
.home2 .req { columns: 2; padding-left: 18px; font-size: .92rem; }
@media (min-width: 640px) { .home2 .req { columns: 3; } }

/* My interviews (11 Nov 2026) */
form.inline { display: inline; margin: 0; }
.my .round { margin: 14px 0; }
.my .round h2 { margin: 2px 0 10px; font-size: 1.3rem; }
.my .round h2 a { text-decoration: none; color: inherit; }
.my .prog { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0 0 10px; }
.my .prog li a { display: block; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); text-decoration: none; font-size: .86rem; }
.my .prog li.done a { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.my .prog li.done a::before { content: "✓ "; }
.pkg .pastq { border-top: 1px solid var(--line); padding: 10px 0; }
.pkg .pastq > summary { font-weight: 600; cursor: pointer; }
/* The upload call to action on Answers (11 Nov 2026) */
.pkg .who-card { border: 1.5px solid var(--accent); }
.pkg .upl-cta { border-top: 0; padding-top: 0; margin-top: 10px; }
.pkg .upl-cta > summary { list-style: none; }
.pkg .upl-cta > summary::-webkit-details-marker { display: none; }
.pkg .upl-cta[open] > summary { margin-bottom: 10px; }
.pkg .sample-line { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
.my .round .acts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
/* Whose background an answer is built on (11 Nov 2026) */
.pkg .basis-tag { background: var(--bg); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); margin-left: 6px; white-space: nowrap; }
.pkg .basis-tag.mine { background: var(--accent); color: var(--ink); box-shadow: none; }
.pkg .basis { background: var(--bg); border-radius: 10px; padding: 8px 12px; font-size: .92rem; margin: 0 0 12px; }
.pkg .basis.mine { background: color-mix(in srgb, var(--accent) 18%, transparent); }
/* The preview on a locked answer (11 Nov 2026): one point in full, the next line half-shown, then bars */
.pkg .tease { margin-bottom: 12px; color: var(--ink); }
.pkg .tease .peek { margin: 0; white-space: nowrap; overflow: hidden; user-select: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 38%, transparent 70%); mask-image: linear-gradient(to bottom, #000 38%, transparent 70%); }
.pkg .tease .bars { display: grid; gap: 9px; margin: 6px 0 14px; }
.pkg .tease .bars i { display: block; height: 10px; border-radius: 6px; background: var(--line); }
.pkg .tease .bars i:nth-child(2) { width: 93%; }
.pkg .tease .bars i:nth-child(3) { width: 61%; }
.pkg .tease .bars i:last-child:nth-child(2) { width: 72%; }
/* First-visit congratulation and the line with the prices (11 Nov 2026) */
.hello { margin: 0 0 16px; }
.worth { font-weight: 600; margin: 2px 0 12px; }
/* The preview on a phone: short enough that the plan buttons are on screen when the answer opens */
.pkg .ans.locked .more { margin: 0 0 4px; }
.pkg .tease .tp .bars { margin-bottom: 4px; }
@media (max-width: 560px) {
  .pkg .tease .tp, .pkg .tease .bars i:nth-child(3) { display: none; }
  .pkg .tease .basis { padding: 6px 10px; margin-bottom: 8px; }
  .pkg .tease h4 { margin-top: 10px; }
  .pkg .ans.locked .buyrow { flex-wrap: nowrap; }
  .pkg .ans.locked .buyrow form { flex: 1 1 0; min-width: 0; }
  .pkg .ans.locked .buyrow .btn { width: 100%; padding: 8px 6px; font-size: .84rem; white-space: nowrap; }
}
/* The pricing box on a phone: the two plans side by side (stacked it ran to 979 px, 11 Nov 2026) */
.pkg .unlock .plan .btn { margin-top: auto; }
@media (max-width: 639px) {
  .pkg .unlock .plans { grid-template-columns: 1fr 1fr; gap: 8px; }
  .pkg .unlock .plan { padding: 10px; }
  .pkg .unlock .plan .fine { font-size: .78rem; }
  .pkg .unlock .price { font-size: 1.35rem; }
  .pkg .unlock .plan .btn { align-self: stretch; padding: 8px 4px; font-size: .84rem; white-space: nowrap; }
  .pkg .unlock ul.ticks { margin: 6px 0; }
}
/* Anything marked hidden stays hidden: .btn's display:inline-flex was overriding it, so "Try this one again" and
   the microphone button showed when the page script had hidden them (found by tools/e2e_flows.py, 11 Nov 2026) */
[hidden] { display: none !important; }
/* The numbers behind an invitation, on the overview (11 Nov 2026) */
.pkg .stats { margin: 16px 0; border: 1.5px solid var(--accent); }
.pkg .statrow { display: grid; gap: 14px 22px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .pkg .statrow { grid-template-columns: 1fr 1fr; } }
.pkg .stat { display: flex; flex-direction: column; gap: 2px; }
.pkg .stat b { font-size: 1.9rem; line-height: 1.1; font-weight: 800; }
.pkg .statnote { margin: 14px 0 6px; }
/* Progress while an upload is read and written up (11 Nov 2026) */
.pkg .prog { display: grid; gap: 6px; margin-top: 4px; }
.pkg .prog .bar { height: 12px; }
.pkg .prog .bar span { transition: width .5s linear; }
.pkg .prog p { margin: 0; }
/* Play / stop for the interviewer's voice (11 Nov 2026) */
.pkg .sayrow { margin: -4px 0 12px; }
.pkg [data-say].on { box-shadow: inset 0 0 0 1.5px var(--accent); }
/* A shorter overview and a next button that stays on screen (11 Nov 2026) */
.pkg .factbox { margin: 16px 0; }
.pkg .factbox .facts { margin: 0; }
.pkg .morefacts { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.pkg .morefacts > summary { font-weight: 600; font-size: .92rem; color: var(--brand); }
.pkg .morefacts[open] > summary { margin-bottom: 12px; }
.pkg details.refs.fold > summary { display: inline; font-weight: 400; cursor: pointer; }
.pkg details.refs.fold[open] > summary { margin-right: 6px; }
.pkg .ivsample { margin-top: 10px; }
.pkg .ivsample > summary { color: var(--brand); }
.nextbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); border-top: 1px solid var(--line);
  display: flex; justify-content: center; }
.nextbar .btn { width: 100%; max-width: 460px; text-align: center; }
body:has(.nextbar) { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }