/* The Mock interviews tab (#/mock, web/mock.js). Calm study-room page (body.study, Newsreader headings) with one
   dark felt element: the report preview before buying, the readiness chart after. Colours come from the tokens in
   styles.css; dark-only tweaks under [data-theme="dark"]. Nothing sticky. */
.mk-page { display: flex; flex-direction: column; gap: clamp(2.5rem, 6vw, 4.5rem); padding-bottom: 3rem; }
.mk-page h1 { font-family: Newsreader, Georgia, serif; font-weight: 500; letter-spacing: -.01em; margin: 0; color: var(--head); }
.mk-page h2 { font-family: Newsreader, Georgia, serif; font-weight: 500; font-size: clamp(1.6rem, 3vw, 2.1rem); margin: 0; color: var(--head); }
.mk-page h3 { margin: 0; font-size: 1.05rem; }
.mk-section { display: flex; flex-direction: column; gap: 1.2rem; }
.mk-head { display: flex; flex-direction: column; gap: .4rem; }
.mk-head p, .mk-section > p { margin: 0; color: var(--muted); line-height: 1.55; }
.mk-kicker { margin: 0 0 .3rem; color: var(--muted); font-size: .95rem; }

/* hero */
.mk-hero { display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; padding-top: .5rem; }
.mk-hero-text { flex: 1 1 26rem; min-width: 0; display: flex; flex-direction: column; gap: 1.1rem; }
.mk-hero h1 { font-size: clamp(2.1rem, 5vw, 3.2rem); line-height: 1.08; }
.mk-hero .lede { margin: 0; font-size: 1.1rem; line-height: 1.6; color: var(--muted); max-width: 36em; }
.mk-hero .row { display: flex; gap: .7rem; flex-wrap: wrap; }
.mk-hero .muted { margin: 0; }
.mk-preview { flex: 1 1 22rem; min-width: 0; margin: 0; background: var(--felt); color: var(--felt-ink); border-radius: 22px; padding: 1.6rem;
  display: flex; flex-direction: column; gap: 1rem; box-shadow: 0 24px 50px -32px rgb(15 23 42 / .7); }
.mk-pv-top { display: flex; justify-content: space-between; gap: 1rem; color: var(--felt-muted); font-size: .88rem; }
.mk-pv-ready { display: flex; flex-direction: column; gap: .45rem; }
.mk-pv-ready > span { color: var(--felt-muted); font-size: .88rem; }
.mk-pv-ready b { font-size: 1.2rem; font-weight: 600; }
.mk-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .35rem; }
.mk-steps i { height: 8px; border-radius: 4px; background: var(--felt-2); }
.mk-steps i.on { background: var(--gold); }
.mk-pv-row { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) 3.5rem; gap: .7rem; align-items: center; font-size: .9rem; }
.mk-pv-bar { height: 8px; border-radius: 4px; background: var(--felt-2); overflow: hidden; }
.mk-pv-bar i { display: block; height: 100%; border-radius: 4px; background: var(--arcade-accent-pale); }
.mk-pv-row small { color: var(--felt-muted); font-size: .8rem; }
.mk-pv-row small.up { color: var(--arcade-good); }
.mk-preview p { margin: 0; padding-top: .9rem; border-top: 1px solid var(--felt-2); color: var(--felt-muted); font-size: .9rem; line-height: 1.5; }

/* how it works: a real sequence, so numbered */
.mk-steps-list { list-style: none; counter-reset: mk; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 1rem; }
.mk-steps-list li { counter-increment: mk; background: var(--paper); border: 1px solid var(--rule); border-radius: 16px; padding: 1.2rem;
  display: flex; flex-direction: column; gap: .5rem; }
.mk-steps-list li::before { content: counter(mk); width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.mk-steps-list b { font-size: 1.05rem; }
.mk-steps-list span { color: var(--muted); line-height: 1.55; font-size: .95rem; }

.mk-roles { display: flex; flex-wrap: wrap; gap: .7rem; }
.mk-roles span { background: var(--paper); border: 1px solid var(--rule-2); border-radius: 999px; padding: .7rem 1.3rem; font-weight: 600; }

.mk-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 1.5rem 3rem; align-items: start;
  background: var(--paper); border: 1px solid var(--rule); border-radius: 22px; padding: clamp(1.2rem, 3vw, 2.2rem); }
.mk-split > div { display: flex; flex-direction: column; gap: .9rem; }
.mk-split p { margin: 0; color: var(--muted); line-height: 1.6; }
.mk-list { margin: 0; padding-left: 1.1rem; display: grid; gap: .55rem; line-height: 1.55; color: var(--muted); }
.mk-list b { color: var(--ink); font-weight: 600; }
.mk-teaser { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; height: 9rem; align-items: end; }
.mk-teaser div { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: .35rem; }
.mk-teaser span { border-radius: 8px 8px 4px 4px; }
.mk-teaser small { text-align: center; color: var(--muted); font-size: .8rem; }
.mk-teaser .t1 { background: var(--rule-2); } .mk-teaser .t2 { background: var(--arcade-accent-pale); }
.mk-teaser .t3 { background: var(--accent); } .mk-teaser .t4 { background: var(--gold); }

/* packages */
.mk-packs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1rem; }
.mk-pack { background: var(--paper); border: 1px solid var(--rule); border-radius: 18px; padding: 1.4rem; display: flex; flex-direction: column; gap: .5rem; }
.mk-pack.best { border: 2px solid var(--accent); padding: calc(1.4rem - 1px); }
.mk-tag { align-self: flex-start; font-size: .8rem; font-weight: 600; color: var(--accent); background: var(--accent-soft); padding: .2rem .65rem; border-radius: 999px; }
.mk-pack-n { font-size: 1.05rem; }
.mk-price { font-size: 2.3rem; font-weight: 700; color: var(--head); font-variant-numeric: tabular-nums; }
.mk-per { color: var(--muted); font-size: .9rem; flex: 1; }
.mk-pack .btn { margin-top: .5rem; justify-content: center; }

.mk-faq { background: var(--paper); border: 1px solid var(--rule); border-radius: 14px; padding: 1rem 1.2rem; }
.mk-faq summary { font-weight: 600; cursor: pointer; }
.mk-faq p { margin: .6rem 0 0; color: var(--muted); line-height: 1.6; }

/* after buying */
.mk-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem 2rem; flex-wrap: wrap; }
.mk-top h1 { font-size: clamp(2rem, 4vw, 2.8rem); }
.mk-bar { display: flex; align-items: center; gap: 1rem; background: var(--paper); border: 1px solid var(--rule); border-radius: 14px; padding: .7rem .8rem .7rem 1.1rem; flex-wrap: wrap; }
.mk-bar > span { display: flex; flex-direction: column; gap: .1rem; }
.mk-bar small { color: var(--muted); }
.mk-empty { background: var(--paper); border: 1.5px dashed var(--rule-2); border-radius: 18px; padding: 2rem; text-align: center; }
.mk-empty p { color: var(--muted); max-width: 36rem; margin: .6rem auto 0; line-height: 1.6; }

.mk-journey { background: var(--felt); color: var(--felt-ink); border-radius: 22px; padding: clamp(1.2rem, 3vw, 2rem); display: flex; flex-direction: column; gap: 1.2rem; }
.mk-j-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.mk-page .mk-journey h2 { color: var(--felt-ink); font-size: clamp(1.4rem, 3vw, 1.8rem); }
.mk-j-head > span { color: var(--felt-muted); font-size: .9rem; }
.mk-journey > p { margin: 0; color: var(--felt-muted); line-height: 1.55; }
.mk-chart { display: grid; grid-template-columns: minmax(6rem, 10rem) minmax(0, 1fr); gap: .5rem 1rem; }
.mk-yax { display: grid; grid-template-rows: repeat(4, 2.8rem); align-items: center; text-align: right; font-size: .78rem; color: var(--felt-muted); line-height: 1.2; }
.mk-plot { display: grid; grid-template-rows: repeat(4, 2.8rem); border-left: 1px solid var(--felt-2); border-bottom: 1px solid var(--felt-2);
  background-image: linear-gradient(var(--felt-2) 1px, transparent 1px); background-size: 100% 2.8rem; background-position: 0 -1px; }
.mk-dot { align-self: center; justify-self: center; width: 16px; height: 16px; border-radius: 50%; background: var(--arcade-accent-pale); }
.mk-dot.last { width: 20px; height: 20px; background: var(--gold); }
.mk-dot.next { background: none; border: 2px dashed var(--felt-muted); }
.mk-xax { display: grid; text-align: center; font-size: .78rem; color: var(--felt-muted); line-height: 1.35; }
.mk-xax .now { color: var(--felt-ink); font-weight: 600; }

.mk-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 1rem; }
.mk-card { background: var(--paper); border: 1px solid var(--rule); border-radius: 18px; padding: 1.3rem; display: flex; flex-direction: column; gap: .5rem; }
.mk-card > b { font-size: 1.15rem; }
.mk-up, .mk-stuck { font-size: .82rem; font-weight: 650; }
.mk-up { color: var(--good); } .mk-stuck { color: var(--gold-ink); }
.mk-row-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: .4rem; }
.mk-skills { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
@media (max-width: 900px) { .mk-skills { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mk-skill { border: 1px solid var(--rule); border-radius: 14px; padding: .9rem; display: flex; flex-direction: column; gap: .6rem; }
.mk-skill b { font-size: .95rem; }
.mk-bars { display: grid; gap: .35rem; align-items: end; height: 4.5rem; }
.mk-bars span { border-radius: 4px; background: var(--rule-2); min-height: 3px; }
.mk-bars span.last { background: var(--accent); }
.mk-bars span.none { background: transparent; border: 1px dashed var(--rule-2); height: 4px; }
.mk-skill small { font-weight: 600; color: var(--muted); font-size: .82rem; }
.mk-skill small.up { color: var(--good); } .mk-skill small.down { color: var(--gold-ink); }
.mk-reports { list-style: none; margin: .3rem 0 0; padding: 0; }
.mk-reports a { display: grid; grid-template-columns: minmax(6rem, 9rem) minmax(0, 1fr) auto; gap: .4rem 1rem; padding: .8rem 0; border-top: 1px solid var(--rule);
  text-decoration: none; color: var(--ink); align-items: baseline; }
.mk-reports span { color: var(--muted); overflow-wrap: anywhere; }
.mk-reports em { font-style: normal; font-weight: 600; color: var(--accent); }

/* dialogs */
.mk-pay { display: flex; flex-direction: column; gap: .75rem; }
.mk-pay label { display: flex; flex-direction: column; gap: .35rem; font-weight: 600; font-size: .9rem; color: var(--muted); }
.mk-pay input, .mk-pay select { font: inherit; font-weight: 400; color: var(--ink); background: var(--paper); border: 1px solid var(--rule-2); border-radius: 10px; padding: .6rem .75rem; }
.mk-pay p { margin: 0; }
.mk-terms { margin: 0; padding-left: 1.1rem; color: var(--ink); line-height: 1.6; }

@media (max-width: 640px) {
  .mk-pv-row { grid-template-columns: minmax(0, 1fr) 4rem 3rem; font-size: .82rem; }
  .mk-chart { grid-template-columns: 5.5rem minmax(0, 1fr); }
  .mk-yax { font-size: .7rem; }
  .mk-reports a { grid-template-columns: minmax(0, 1fr); }
  .mk-skills { grid-template-columns: minmax(0, 1fr); }
  .mk-bar { width: 100%; justify-content: space-between; }
}

/* ---------- the sample report card (Nov 14): one moment when it scrolls into view ----------
   A small page rises; each skill's dot glides from its round 1 level to round 2 (the report's whole point); the
   readiness marker steps from "Getting close" to "Ready for first rounds"; the download arrow nudges once. */
.mk-sample { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: 2rem 3rem; align-items: center;
  background: var(--paper); border: 1px solid var(--rule); border-radius: 22px; padding: 2rem; }
.mk-sample-text { display: flex; flex-direction: column; gap: .9rem; }
.mk-sample-text h2 { margin: 0; }
.mk-sample-text p { margin: 0; color: var(--muted); line-height: 1.6; max-width: 34rem; }
.mk-dl { display: inline-flex; align-items: center; gap: .5rem; }
.mk-dl-ico { flex: none; }
.mk-doc-wrap { position: relative; padding: .6rem .6rem 0; }
.mk-doc-wrap::before { content: ""; position: absolute; inset: 0 1.4rem 1rem 0; border-radius: 12px; background: rgb(var(--line-rgb) / .14);
  transform: rotate(-4deg); }
.mk-doc { position: relative; background: var(--paper); border: 1px solid rgb(var(--line-rgb) / .25); border-radius: 12px;
  padding: 1rem 1.1rem 1.1rem; box-shadow: 0 18px 36px -22px rgb(15 23 42 / .45); display: flex; flex-direction: column; gap: .55rem;
  font-size: .72rem; color: var(--ink); }
.mk-doc p { margin: 0; }
.mk-doc-top { display: flex; justify-content: space-between; color: var(--muted); }
.mk-doc-top b { color: var(--accent); }
.mk-doc-title { font-weight: 700; font-size: .85rem; }
.mk-doc-ready { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: .25rem; }
.mk-doc-ready i { height: 6px; border-radius: 3px; background: rgb(var(--line-rgb) / .25); }
.mk-doc-ready em { position: absolute; top: -3px; left: calc(25% * 1 + 12.5% - 6px); width: 12px; height: 12px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 0 3px var(--paper); }
.mk-doc-verdict { position: relative; height: 1.1em; font-weight: 700; }
.mk-doc-verdict span { position: absolute; inset: 0; }
.mk-doc-verdict .after { opacity: 0; }
.mk-doc-grid { display: grid; gap: .4rem; margin-top: .2rem; }
.mk-doc-row { display: grid; grid-template-columns: 6.6rem minmax(0, 1fr); gap: .5rem; align-items: center; color: var(--muted); }
.mk-doc-cells { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; height: 14px; }
.mk-doc-cells i { border-radius: 3px; background: rgb(var(--line-rgb) / .12); }
.mk-doc-cells b { position: absolute; top: 2px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent);
  left: calc(25% * var(--from) + 12.5% - 5px); }
.mk-doc-lines { display: grid; gap: .3rem; margin-top: .3rem; }
.mk-doc-lines i { height: 5px; border-radius: 3px; background: rgb(var(--line-rgb) / .18); }
.mk-doc-lines i:nth-child(2) { width: 85%; }
.mk-doc-lines i:nth-child(3) { width: 60%; }

/* before the moment: the page waits a little lower, faded */
.mk-sample:not(.go) .mk-doc { opacity: 0; transform: translateY(18px); }
.mk-sample.go .mk-doc { opacity: 1; transform: none; transition: opacity .5s ease, transform .6s cubic-bezier(.2, .8, .2, 1); }
.mk-sample.go .mk-doc-cells b { left: calc(25% * var(--to) + 12.5% - 5px);
  transition: left .7s cubic-bezier(.3, .9, .3, 1) calc(.55s + var(--i) * .16s); }
.mk-sample.go .mk-doc-cells b.up { background: var(--gold); transition: left .7s cubic-bezier(.3, .9, .3, 1) calc(.55s + var(--i) * .16s),
  background .3s ease calc(1.1s + var(--i) * .16s); }
.mk-sample.go .mk-doc-ready em { left: calc(25% * 2 + 12.5% - 6px); transition: left .6s cubic-bezier(.3, .9, .3, 1) 1.55s; }
.mk-sample.go .mk-doc-verdict .before { opacity: 0; transition: opacity .25s ease 1.6s; }
.mk-sample.go .mk-doc-verdict .after { opacity: 1; transition: opacity .3s ease 1.8s; }
.mk-sample.go .mk-dl-ico { animation: mk-nudge .7s ease 2.2s 1; }
@keyframes mk-nudge { 0%, 100% { transform: none; } 40% { transform: translateY(3px); } 70% { transform: translateY(-1px); } }
.mk-sample.still *, .mk-sample.still .mk-doc { transition: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .mk-sample *, .mk-sample .mk-doc { transition: none !important; animation: none !important; }
}
@media (max-width: 720px) {
  .mk-sample { grid-template-columns: minmax(0, 1fr); padding: 1.4rem; }
  .mk-doc-wrap { max-width: 20rem; }
}

/* the sample report page (#/mock/sample) */
.mk-sample-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .8rem 1.5rem;
  background: var(--accent-soft); border-radius: 14px; padding: .9rem 1.2rem; margin-bottom: 1.5rem; }
.mk-sample-bar p { margin: 0; }

/* Offer prices and manual payments (Nov 14) */
.mk-offer { align-self: flex-start; font-size: .8rem; font-weight: 700; color: var(--gold-ink); background: color-mix(in srgb, var(--gold) 18%, transparent);
  border-radius: 99px; padding: .2rem .65rem; }
.mk-was { color: var(--muted); font-size: .55em; font-weight: 500; margin-right: .2rem; text-decoration-thickness: 2px; }
.mk-waiting { display: flex; flex-direction: column; gap: .2rem; background: var(--accent-soft); border-radius: 14px; padding: .9rem 1.1rem; }
.mk-waiting span { color: var(--muted); font-size: .92rem; }
.mk-manual { display: flex; flex-direction: column; gap: .6rem; }
.mk-manual p { margin: 0; }
.mk-upi { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.mk-upi > div { display: flex; flex-direction: column; gap: .5rem; flex: 1 1 12rem; }
.mk-qr { border-radius: 12px; background: var(--paper); border: 1px solid rgb(var(--line-rgb) / .3); image-rendering: pixelated; }
.mk-copyable { user-select: all; }

/* Who it's for (Nov 14, pitched to professionals) and the line carried over from a job link */
.mk-who { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1rem; }
.mk-who > div { background: var(--paper); border: 1px solid var(--rule); border-radius: 16px; padding: 1.2rem; display: flex; flex-direction: column; gap: .45rem; }
.mk-who b { font-size: 1.05rem; }
.mk-who span { color: var(--muted); line-height: 1.55; font-size: .95rem; }
.mk-target { margin: 0 0 .8rem; padding: .55rem .9rem; border-radius: 12px; background: var(--accent-soft); color: var(--accent); font-weight: 600;
  display: inline-block; }