/* ==========================================================================
   The Read more pages: how-resume-score-works.html, how-resume-rebuilding-works.html
   and how-mock-interview-works.html.
   Sections are built from the v2 layer (gp-v2.css); this file holds only what
   the page adds. Everything is scoped to main.hw.
   ========================================================================== */

/* Breadcrumb */
.hw-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 auto; padding: 18px 0 0; font-size: .8rem; color: var(--text-dim); }
.hw-crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--text-faint); }
.hw-crumbs a { color: var(--text-dim); text-underline-offset: 3px; transition: color .18s; }
.hw-crumbs a:hover { color: var(--text); text-decoration: underline; }
.hw-crumbs [aria-current] { color: var(--text-mid); font-weight: 600; }

/* The homepage visuals carry 11px labels; this page keeps everything at 12px or more. */
.hw .v2-card-head, .hw .v2-fixes-head, .hw .v2-badge, .hw .v2-chip, .hw .v2-sample { font-size: 12px; }

/* Hero */
.v2 .hw-hero { padding-top: clamp(28px, 3vw, 56px); }
.v2 .hw-hero h1 { font-size: clamp(2.3rem, 1.5rem + 3vw, 3.9rem); }
/* The gradient is painted only inside the word's box, and the tight tracking lets the
   last letter's ink run past it: pad the box so the "s" isn't clipped, keep the spacing. */
.v2 .hw-hero h1 .accent { padding-inline-end: .12em; margin-inline-end: -.12em; }
.hw-hero .v2-stage { width: 100%; max-width: 600px; margin-left: auto; }

.hw-note { margin: 0 0 28px; padding: 14px 18px; border-left: 3px solid var(--gold); border-radius: 0 12px 12px 0; background: var(--tint-gold); font-size: .92rem; line-height: 1.6; color: var(--text-mid); }
.hw-note b { color: var(--text); }

/* Numbers strip: the resumes-scored tile is live (live-stats.js). Until the real count
   arrives it reads "770+" with no tag; once it does, the "+" goes and a Live tag shows. */
.hw .hw-live-tag { display: none; margin-right: 2px; font-size: 12px; }
.hw .is-live-stat .hw-live-tag { display: inline-flex; }
.hw .is-live-stat .hw-plus { display: none; }

/* 01: what gets counted on the page */
.hw-paper-list { list-style: none; margin: 11px 0 0; padding: 0; display: grid; gap: 10px; }
.hw-paper-list li { position: relative; padding-left: 14px; font-size: clamp(12px, 2.7cqi, 13.5px); line-height: 1.5; color: #141B33; }
.hw-paper-list li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 4px; height: 4px; border-radius: 50%; background: #2A3352; }
.hw-paper-list li.is-line { display: grid; gap: 6px; padding-top: 2px; }
.hw-flag { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-family: "Plus Jakarta Sans", sans-serif; font-size: 12px; font-weight: 700; white-space: nowrap; vertical-align: 1px; }
.hw-flag.is-ok { color: #166534; background: #DCFCE7; }
.hw-flag.is-weak { color: #92400E; background: #FEF3C7; }
.hw-count .v2-bars { gap: .8em; font-size: 14px; }
.hw-count-note { margin: 12px 0 0; font-size: 12px; color: var(--text-dim); }

/* 02: photo + layout risks */
.hw-photo { aspect-ratio: 4 / 5; border-radius: 22px; border: 1px solid var(--glass-line); box-shadow: var(--shadow-card); }
.hw-photo img { transition: transform 1.6s var(--ease-out); }
.v2-motion .hw-parse-stage:not(.is-in) .hw-photo img { transform: scale(1.08); }
.hw-parse-stage .v2-overlap { margin-top: -120px; }
.hw-risks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hw-risks li { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: start; font-size: 13.5px; line-height: 1.45; color: var(--text-mid); transition: opacity .45s var(--ease-out), transform .45s var(--ease-out); transition-delay: calc(.5s + var(--i, 0) * 200ms); }
.hw-risks li b { color: var(--text); font-weight: 600; }
.hw-risks li span:last-child { grid-column: 2; }
.v2-motion .hw-parse-stage:not(.is-in) .hw-risks li { opacity: 0; transform: translateX(10px); }
.v2-badge--red { color: var(--red-text); background: rgba(244, 89, 91, .12); border: 1px solid rgba(244, 89, 91, .32); }

/* 03: requirement-by-requirement match */
.hw-req { list-style: none; margin: 0; padding: 0; display: grid; }
.hw-req li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 14px; color: var(--text-mid); transition: opacity .4s var(--ease-out), transform .4s var(--ease-out); transition-delay: calc(.3s + var(--i, 0) * 140ms); }
.hw-req li:first-child { padding-top: 0; }
.hw-req li:last-child { border-bottom: 0; }
.v2-motion .hw-match-stage:not(.is-in) .hw-req li { opacity: 0; transform: translateY(8px); }
.hw-req-head { display: flex; justify-content: space-between; margin-bottom: 12px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); }
.hw-modes-card .v2-bars { gap: .8em; font-size: 14px; }
.hw-modes-card p { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-dim); }

/* 04: the weights */
.hw-weights { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.hw-mode { padding: clamp(20px, 2.6vw, 30px); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); }
.hw-mode h3 { font-size: var(--fs-h3); margin: 6px 0 4px; }
.hw-mode > p { margin: 0 0 20px; font-size: .9rem; line-height: 1.55; color: var(--text-dim); }
.hw-mode-tag { font-family: "JetBrains Mono", monospace; font-size: .78rem; font-weight: 700; letter-spacing: .08em; color: var(--gold-text); }
.hw-mode .v2-bars { gap: .95em; font-size: 15px; }
.hw-mode .v2-bar b { min-width: 3.2em; text-align: right; }

.hw-bands { margin-top: clamp(36px, 4vw, 52px); padding: clamp(20px, 2.6vw, 30px); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); }
.hw-bands h3 { font-size: var(--fs-h3); margin: 0 0 18px; }
.hw-band-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.hw-band-row li { padding: 12px 12px 14px; border-radius: 10px; border-top: 4px solid var(--c); background: var(--bg-c); }
.hw-band-row b { display: block; font-family: "JetBrains Mono", monospace; font-size: 1.05rem; color: var(--text); }
.hw-band-row span { display: block; margin-top: 2px; font-size: .84rem; font-weight: 600; color: var(--c-text); }
.hw-band-row .is-red { --c: #F4595B; --bg-c: rgba(244, 89, 91, .08); --c-text: var(--red-text); }
.hw-band-row .is-amber { --c: #F59E0B; --bg-c: rgba(245, 158, 11, .08); --c-text: var(--amber-text); }
.hw-band-row .is-gold { --c: #F0A500; --bg-c: var(--tint-gold); --c-text: var(--gold-text); }
.hw-band-row .is-green { --c: #22C55E; --bg-c: rgba(34, 197, 94, .08); --c-text: var(--green-text); }
.hw-bands p { margin: 16px 0 0; font-size: .92rem; line-height: 1.6; color: var(--text-mid); }

/* Sample report (#sample): the real 79/100 report */
.hw-sample-meta { margin: -24px 0 20px; font-family: "JetBrains Mono", monospace; font-size: .8rem; color: var(--text-dim); }
.hw-sample-meta b { color: var(--text); font-weight: 600; }
.hw-rep { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr); border: 1px solid var(--border-hi); border-radius: var(--r-md); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-soft); }
.hw-read { display: grid; gap: 14px; align-content: start; padding: clamp(18px, 2.4vw, 26px); background: var(--surface-2); border-right: 1px solid var(--border); }
.hw-gauge { display: grid; grid-template-columns: 116px 1fr; gap: 16px; align-items: center; }
.hw-gauge svg { width: 116px; height: 116px; }
.hw-gauge .arc { fill: none; stroke-width: 11; stroke-linecap: round; }
.hw-gauge .track { stroke: var(--border-hi); }
.hw-gauge .val { stroke: var(--gold-text); }
.hw-num { font-family: "JetBrains Mono", monospace; font-size: 2.3rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; color: var(--text); }
.hw-num small { display: block; margin-top: 4px; font-family: "Plus Jakarta Sans", sans-serif; font-size: .8rem; font-weight: 500; color: var(--text-dim); }
.hw-lvl { display: inline-block; margin-top: 8px; padding: 3px 9px; border-radius: 6px; font-family: "JetBrains Mono", monospace; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.hw-lvl.ok { background: rgba(34, 197, 94, .14); color: var(--green-text); }
.hw-lvl.mid { background: var(--tint-gold); color: var(--gold-text); }
.hw-lvl.bad { background: rgba(244, 89, 91, .14); color: var(--red-text); }
.hw-vt { font-family: "Sora", "Sora Fallback", sans-serif; font-weight: 700; font-size: 1.05rem; color: var(--text); }
.hw-meta { display: grid; gap: 6px; font-size: .86rem; color: var(--text-dim); }
.hw-meta div { display: grid; grid-template-columns: 120px 1fr; gap: 8px; }
.hw-meta b { color: var(--text); font-weight: 600; }
.hw-conf { padding: 10px 14px; border-left: 3px solid var(--gold-text); border-radius: 0 8px 8px 0; background: var(--tint-gold); font-size: .88rem; line-height: 1.55; color: var(--text-mid); }
.hw-conf b { color: var(--text); }
.hw-read .v2-actions { gap: 8px 18px; }
.hw-est { font-family: "JetBrains Mono", monospace; font-size: .75rem; color: var(--text-dim); }

.hw-dims-wrap { padding: clamp(18px, 2.4vw, 26px); }
.hw-dims-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.hw-dims-head h3 { font-size: 1.05rem; margin: 0; }
.hw-dims-head span { font-size: .82rem; color: var(--text-dim); }
.hw-dims { display: grid; gap: 8px; }
.hw-dim { border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--bg); padding: 0 14px; }
.hw-dim summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr 40px auto 16px; gap: 10px; align-items: center; min-height: 48px; padding: 6px 0; }
.hw-dim summary::-webkit-details-marker { display: none; }
.hw-dim summary::after { content: "+"; font-family: "JetBrains Mono", monospace; color: var(--gold-text); text-align: right; }
.hw-dim[open] summary::after { content: "\2013"; }
.hw-dn { font-family: "Sora", "Sora Fallback", sans-serif; font-weight: 700; font-size: .92rem; color: var(--text); }
.hw-ds { font-family: "JetBrains Mono", monospace; font-weight: 700; text-align: right; }
.hw-ds.ok { color: var(--green-text); } .hw-ds.mid { color: var(--gold-text); } .hw-ds.bad { color: var(--red-text); }
.hw-dim .hw-lvl { margin-top: 0; }
.hw-dbar { height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; margin-bottom: 10px; }
.hw-dbar i { display: block; height: 100%; border-radius: 3px; background: var(--gold-text); }
.hw-dbar i.ok { background: var(--green-text); } .hw-dbar i.bad { background: var(--red-text); }
.hw-dd { margin: 0 0 8px; font-size: .86rem; line-height: 1.55; color: var(--text-mid); }
.hw-fx { padding-bottom: 12px; font-size: .86rem; color: var(--text-mid); }
.hw-fx b { display: block; margin-bottom: 3px; font-family: "JetBrains Mono", monospace; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-text); }
.hw-fx ul { margin: 0; padding-left: 18px; }
.hw-fx li { margin: 3px 0; }
.hw-fx li.none { list-style: none; margin-left: -18px; color: var(--text-dim); }

.hw-sub { margin-top: clamp(36px, 4vw, 52px); }
.hw-sub-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 14px; }
.hw-sub-head h3 { font-size: clamp(1.15rem, 1.05rem + .4vw, 1.4rem); margin: 0; }
.hw-sub-head span { font-size: .84rem; color: var(--text-dim); }
.hw-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.hw-card { display: grid; gap: 6px; align-content: start; padding: 16px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); }
.hw-card h4 { font-family: "Sora", "Sora Fallback", sans-serif; font-size: .98rem; margin: 0; color: var(--text); }
.hw-card p { margin: 0; font-size: .88rem; line-height: 1.55; color: var(--text-mid); }
.hw-card ul { margin: 0; padding-left: 18px; font-size: .88rem; line-height: 1.55; color: var(--text-mid); }
.hw-card li { margin: 3px 0; }
.hw-card li b { color: var(--text); }
.hw-card .hw-fixl { font-size: .86rem; font-weight: 600; color: var(--green-text); }
.hw-card .hw-aside { font-size: .84rem; color: var(--text-dim); }
.hw-sev { font-family: "JetBrains Mono", monospace; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.hw-sev.high { color: var(--red-text); } .hw-sev.medium { color: var(--amber-text); } .hw-sev.low { color: var(--text-dim); }
.hw-card h4.is-win { color: var(--green-text); } .hw-card h4.is-fix { color: var(--gold-text); }
.hw-myth { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; margin-top: clamp(28px, 3vw, 40px); padding: 18px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); }
.hw-myth .x { font-family: "JetBrains Mono", monospace; font-size: 1.3rem; font-weight: 700; line-height: 1; color: var(--red-text); }
.hw-myth b { color: var(--text); font-family: "Sora", "Sora Fallback", sans-serif; }
.hw-myth p { margin: .35em 0 0; font-size: .92rem; line-height: 1.6; color: var(--text-mid); }
.hw-trust { max-width: 72ch; margin: 24px 0 0; padding-top: 14px; border-top: 1px solid var(--border); font-size: .82rem; line-height: 1.6; color: var(--text-dim); }

/* Job Match is scored differently: a short pointer to how-job-match-works.html */
.hw-jm { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(16px, 4vw, 56px); align-items: end; padding: clamp(22px, 3.5vw, 40px); background: var(--surface); border: 1px solid var(--border-hi); border-radius: 28px; }
.hw-jm-copy > p:last-child { margin-bottom: 0; }
.hw-jm h2 { font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.2rem); letter-spacing: -.035em; line-height: 1.1; margin: 14px 0 12px; }
.hw-jm-copy > p:not(.v2-kicker) { margin: 0 0 18px; font-size: var(--fs-body); line-height: 1.7; color: var(--text-mid); }
.hw-jm-factors { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: f; }
.hw-jm-factors li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start; font-size: .92rem; line-height: 1.55; color: var(--text-mid); counter-increment: f; }
.hw-jm-factors li::before { content: counter(f); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-family: "JetBrains Mono", monospace; font-size: 12px; font-weight: 700; color: var(--gold-text); background: var(--tint-gold); border: 1px solid var(--tint-gold-line); }
.hw-jm-factors b { color: var(--text); }

/* Keep reading */
.hw-rel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.hw-rel a { display: block; padding: 18px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); transition: border-color var(--dur), transform var(--dur) var(--ease-out); }
.hw-rel a:hover { border-color: var(--tint-gold-line); transform: translateY(-3px); }
.hw-rel b { display: block; font-family: "Sora", "Sora Fallback", sans-serif; font-size: .98rem; color: var(--text); }
.hw-rel span { display: block; margin-top: 4px; font-size: .86rem; color: var(--text-dim); }

.hw details summary:focus-visible, .hw-rel a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

/* Shared motion (Oct 2026), so every Read-more page moves like How Resume Score works:
   the children of .hw-stagger arrive one after another. */
.hw-stagger > * { transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.hw-stagger > :nth-child(2) { transition-delay: .1s; }
.hw-stagger > :nth-child(3) { transition-delay: .2s; }
.hw-stagger > :nth-child(4) { transition-delay: .3s; }
.hw-stagger > :nth-child(5) { transition-delay: .4s; }
.hw-stagger > :nth-child(n + 6) { transition-delay: .5s; }
/* Hidden only until the block itself, or the observed block around it, is in view. */
.v2-motion .hw-stagger:is([data-reveal], [data-anim]):not(.is-in) > *,
.v2-motion :is([data-reveal], [data-anim]):not(.is-in) .hw-stagger > * { opacity: 0; transform: translateY(12px); }

/* Its heading runs the full width of the section (CEO 10/29). */
.v2-head.hwj-read-head { max-width: none; }

/* The monthly hiring report: data, not a guide, so it gets its own card: dark panel, gold
   edge, the report's real numbers drawing in, and a spotlight that follows the pointer. */
.hwj-report { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); align-items: center; padding: clamp(22px, 3.5vw, 40px); border-radius: var(--r-lg); border: 1px solid var(--tint-gold-line); background: linear-gradient(135deg, #141C3A, #0A1026 70%); color: #F6F8FF; text-decoration: none; box-shadow: var(--shadow-card); transition: transform var(--dur) var(--ease-out), box-shadow var(--dur); }
.hwj-report:hover { transform: translateY(-4px); box-shadow: 0 24px 60px rgba(0, 0, 0, .35), 0 0 0 1px rgba(240, 165, 0, .35); }
.hwj-report:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.hwj-report::after { content: ""; position: absolute; right: -80px; top: -80px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(240, 165, 0, .22), transparent 65%); pointer-events: none; }
.hwj-report-tag { display: inline-flex; align-items: center; gap: .4em; font-size: .8rem; font-weight: 600; color: #C4CDEA; }
.hwj-report-tag .v2-live { color: #FFD56A; }
.hwj-report h3 { margin: 10px 0 8px; font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); letter-spacing: -.03em; color: #F6F8FF; }
.hwj-report p { margin: 0 0 6px; font-size: .92rem; line-height: 1.6; color: #C4CDEA; }
.hwj-report .v2-link, [data-theme="light"] .hwj-report .v2-link { color: #FFD56A; }
.hwj-report:hover .v2-link svg { transform: translate(3px, -3px); }
.hwj-report-data { padding: 18px 20px; border-radius: var(--r-md); background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .09); }
.hwj-report-month { margin: 0 0 14px !important; font-family: "JetBrains Mono", monospace; font-size: .8rem !important; letter-spacing: .04em; color: #8F9CC4 !important; }
.hwj-report .v2-bars { gap: .8em; font-size: 14px; }
.hwj-report .v2-bar span:first-child { color: #C4CDEA; }
.hwj-report .v2-bar b { color: #F6F8FF; }
.hwj-report .v2-bar-track { background: rgba(255, 255, 255, .1); }

/* ── How Job Match works (hwj-) ───────────────────────────────────────── */
/* Hero: one match as the results page shows it, then why you fit and the gap */
.hwj-match .v2-bars { gap: .75em; font-size: 14px; }
.hwj-match-top { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; }
.hwj-match-top .v2-ring { flex: none; }
.hwj-role { display: grid; gap: 2px; min-width: 0; font-size: 13px; color: var(--text-dim); }
.hwj-role b { font-family: "Sora", "Sora Fallback", sans-serif; font-size: 1.05rem; color: var(--text); }
.hwj-band { justify-self: start; margin-bottom: 4px; padding: 3px 7px; border-radius: 4px; font-family: "JetBrains Mono", monospace; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.hwj-band.is-good { color: var(--cyan); background: rgba(56, 189, 248, .12); }
[data-theme="light"] .hwj-band.is-good { color: var(--blue); background: rgba(31, 95, 224, .1); }
.hwj-skills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.hwj-skills span { padding: 3px 8px; border-radius: 4px; font-size: 12.5px; }
.hwj-skills .is-have { color: var(--green-text); background: rgba(34, 197, 94, .12); }
.hwj-skills .is-close { color: var(--cyan); background: rgba(56, 189, 248, .12); }
[data-theme="light"] .hwj-skills .is-close { color: var(--blue); background: rgba(31, 95, 224, .1); }
.hwj-skills .is-miss { color: var(--red-text); background: rgba(244, 89, 91, .12); }
.hwj-why p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text-mid); }
.hwj-why p + p { margin-top: 8px; }
.hwj-why b { margin-right: 6px; font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.hwj-why .is-fit { color: var(--green-text); }
.hwj-why .is-gap { color: var(--gold-text); }
/* 02: the parts under the weights, and the score bands (four, not five) */
.hw-mode .hwj-factors { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); }
.hw-mode .v2-bars + .hwj-factors li { font-size: .88rem; }
.hw-band-row.hwj-band-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hw-band-row .is-blue { --c: #2E6BFF; --bg-c: rgba(46, 107, 255, .08); --c-text: var(--cyan); }
[data-theme="light"] .hw-band-row .is-blue { --c-text: var(--blue); }

/* ── How Resume Rebuilding works (hwr-) ───────────────────────────────── */
/* Hero: one bullet in the builder, before and after Polish with AI */
.hwr-role { display: flex; justify-content: space-between; gap: 10px; margin: 0 0 12px; font-size: 14px; color: var(--text-dim); }
.hwr-role b { font-family: "Sora", "Sora Fallback", sans-serif; color: var(--text); }
.hwr-field { padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.hwr-field p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-mid); }
.hwr-field.is-after { border-color: var(--tint-gold-line); background: var(--tint-gold); }
.hwr-field.is-after p { color: var(--text); }
.hwr-label { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 6px; font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); }
.hwr-label b { color: var(--gold-text); }
.hwr-polish { display: flex; align-items: center; gap: 10px; margin: 10px 0; }
.hwr-btn { padding: 6px 12px; border-radius: 8px; border: 1px solid var(--tint-cyan-line, rgba(56, 189, 248, .35)); font-size: 13px; font-weight: 700; color: var(--cyan); }
[data-theme="light"] .hwr-btn { color: var(--blue); }
.hwr-arrow { color: var(--text-dim); }
.hwr-files { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 0; }
.hwr-file { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text-mid); }
.hwr-file i { padding: 3px 7px; border-radius: 6px; font-family: "JetBrains Mono", monospace; font-size: 12px; font-style: normal; font-weight: 700; color: #fff; background: #E5484D; }
.hwr-file i.is-docx { background: #2E6BFF; }
.hwr-cost { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-dim); }

/* 01 / 04: notes under the cards */
.hw-note.hwr-jd, .hw-note.hwr-ats { margin: 22px 0 0; max-width: 72ch; }

/* 02: polish pairs, stacked beside the copy */
.hw-cards.hwr-pairs { grid-template-columns: minmax(0, 1fr); }
.hwr-was { text-decoration: line-through; text-decoration-color: var(--text-faint); color: var(--text-dim) !important; }

/* ── How Mock Interview works (hwm-) ──────────────────────────────────── */
/* Hero: a question, a vague answer, then the follow-up arriving after a pause */
.hwm-chat .v2-window-body { display: grid; gap: 12px; }
.hwm-turn { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); transition-delay: calc(.3s + var(--i, 0) * .9s); }
.hwm-turn p { margin: 0; padding: 10px 12px; border-radius: 12px; font-size: 14px; line-height: 1.5; color: var(--text-mid); background: var(--surface); border: 1px solid var(--border); }
.hwm-turn.is-you p { background: transparent; }
.hwm-turn.is-follow p { color: var(--text); border-color: var(--tint-gold-line); background: var(--tint-gold); }
.hwm-turn p b { display: block; margin-bottom: 2px; font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-text); }
.hwm-who { display: grid; place-items: center; min-width: 34px; height: 24px; padding: 0 6px; border-radius: 6px; font-family: "JetBrains Mono", monospace; font-size: 12px; font-weight: 700; color: var(--text-mid); background: var(--surface-3); }
.hwm-turn.is-ai .hwm-who { color: var(--gold-text); background: var(--tint-gold); }
/* "Thinking" dots between the answer and the follow-up: shown, then gone. */
.hwm-typing { display: flex; gap: 5px; height: 0; margin-left: 44px; opacity: 0; overflow: hidden; }
.hwm-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.v2-motion .hwm-chat.is-in .hwm-typing { animation: hwm-think 1.5s var(--ease-out) 1.95s 1 both; }
.v2-motion .hwm-chat.is-in .hwm-typing i { animation: hwm-dot .6s ease-in-out infinite alternate; }
.hwm-typing i:nth-child(2) { animation-delay: .2s !important; }
.hwm-typing i:nth-child(3) { animation-delay: .4s !important; }
@keyframes hwm-think { 0% { height: 0; opacity: 0; } 15%, 85% { height: 12px; opacity: 1; } 100% { height: 0; opacity: 0; } }
@keyframes hwm-dot { to { opacity: .3; transform: translateY(-3px); } }
.v2-motion .hwm-chat:not(.is-in) .hwm-turn { opacity: 0; transform: translateY(8px); }
.hwm-chat .hwm-turn.is-follow { transition-delay: 3.4s; }
.hwm-why { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--text-mid); }

/* 01: the photo, with the setup check over it */
.hwm-photo-stage .v2-overlap { margin-top: -120px; }
.hwm-photo-stage .hw-photo img { transition: transform 1.6s var(--ease-out); }
.v2-motion .hwm-photo-stage:not(.is-in) .hw-photo img { transform: scale(1.08); }
.hwm-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.hwm-checks li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--text-mid); transition: opacity .4s var(--ease-out), transform .4s var(--ease-out); transition-delay: calc(.5s + var(--i, 0) * .35s); }
.hwm-checks b { color: var(--text); font-weight: 600; }
.v2-motion .hwm-photo-stage:not(.is-in) .hwm-checks li { opacity: 0; transform: translateX(-8px); }
.hwm-tick { flex: none; position: relative; width: 18px; height: 18px; border-radius: 50%; background: var(--grad-gold); }
.hwm-tick::after { content: ""; position: absolute; left: 6px; top: 3px; width: 5px; height: 9px; border: solid #3A2600; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.hwm-tick.is-off { background: var(--surface-3); }
.hwm-tick.is-off::after { left: 4px; top: 8px; width: 10px; height: 0; border-width: 2px 0 0; border-color: var(--text-dim); transform: none; }

/* 02: interviewer styles, and the on-screen tasks */
.hw-cards.hwm-styles, .hw-cards.hwm-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hw-card.is-default { border-color: var(--tint-gold-line); background: var(--tint-gold); }
.hwm-tag { font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-text); }
.hwm-styles q { display: block; margin-top: 6px; font-size: .88rem; font-style: italic; line-height: 1.5; color: var(--text); }
.hwm-tasks { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: center; margin-top: clamp(32px, 4vw, 48px); padding: clamp(20px, 2.6vw, 30px); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); }
.hwm-tasks h3 { font-size: var(--fs-h3); margin: 0 0 8px; }
.hwm-tasks p { margin: 0; font-size: .92rem; line-height: 1.6; color: var(--text-mid); }
.hwm-task-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hwm-task-list li { padding: 7px 12px; border-radius: 999px; font-family: "JetBrains Mono", monospace; font-size: 12.5px; font-weight: 600; color: var(--text-mid); background: var(--surface-2); border: 1px solid var(--border-hi); }
.hw-note.hwm-camera { margin: 22px 0 0; max-width: 72ch; }

/* 03: the full sample report */
.hw .hwm-report { padding-bottom: 48px; }
.hwm-report .v2-bars { gap: .8em; font-size: 14px; }
.hwm-report + .v2-overlap { margin-top: -24px; }

/* Hero: the button presses, then the polished bullet arrives and its changed words light up */
.hwr-btn { display: inline-block; }
.v2-motion .v2-window.is-in .hwr-btn { animation: hwr-press 1s var(--ease-out) .5s 1 both; }
@keyframes hwr-press { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(56, 189, 248, .45); } 30% { transform: scale(.93); } 100% { transform: scale(1); box-shadow: 0 0 0 12px rgba(56, 189, 248, 0); } }
.hwr-field.is-after { transition: opacity .6s var(--ease-out) 1.1s, transform .6s var(--ease-out) 1.1s; }
.v2-motion .v2-window:not(.is-in) .hwr-field.is-after { opacity: 0; transform: translateY(10px); }
.hwr-field mark { color: inherit; border-radius: 3px; background: linear-gradient(rgba(240, 165, 0, .38), rgba(240, 165, 0, .38)) no-repeat 0 0 / 100% 100%; transition: background-size .8s var(--ease-out) 1.8s; }
.v2-motion .v2-window:not(.is-in) .hwr-field mark { background-size: 0 100%; }

/* 03: the five layouts, drawn as small sheets */
.hwr-layouts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.hwr-layouts li { display: grid; gap: 6px; align-content: start; padding: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); }
.hwr-layouts b { font-family: "Sora", "Sora Fallback", sans-serif; font-size: 1rem; color: var(--text); }
.hwr-layouts li > span:last-child { font-size: .86rem; line-height: 1.5; color: var(--text-mid); }
.hwr-sheet { position: relative; display: grid; align-content: start; gap: 6px; aspect-ratio: 210 / 297; margin-bottom: 6px; padding: 14% 12%; border-radius: 6px; background: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(16, 24, 56, .1); overflow: hidden; }
.hwr-sheet i { display: block; height: 5px; border-radius: 3px; background: #DCE1EC; }
.hwr-sheet i:nth-child(odd) { width: 86%; }
.hwr-sheet i.t { width: 52%; height: 8px; background: #2A3352; }
.hwr-sheet i.h { width: 38%; height: 6px; margin-top: 6px; background: #2A3352; }
.hwr-sheet.is-ivy i.t { margin-inline: auto; }
.hwr-sheet i.band { position: absolute; inset: 0 0 auto; height: 20%; width: 100%; border-radius: 0; background: #1F3A8A; }
.hwr-sheet.is-meridian { padding-top: 30%; }
.hwr-sheet i.side { position: absolute; inset: 0 auto 0 0; width: 32%; height: auto; border-radius: 0; background: #E8ECF6; }
.hwr-sheet.is-atlas { padding-left: 40%; }
.hwr-sheet i.rail { position: absolute; top: 14%; bottom: 14%; left: 30%; width: 1px; height: auto; border-radius: 0; background: #2A3352; }
.hwr-sheet.is-ledger { padding-left: 38%; }
.hwr-sheet i.nums { width: 100% !important; height: 16px; background: linear-gradient(90deg, #F0A500 0 28%, transparent 28% 36%, #F0A500 36% 64%, transparent 64% 72%, #F0A500 72%); opacity: .55; }

@media (max-width: 959px) {
  .hw-weights, .hw-rep, .hw-jm { grid-template-columns: minmax(0, 1fr); }
  .hwr-layouts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hw-read { border-right: 0; border-bottom: 1px solid var(--border); }
  .hw-hero .v2-stage { margin-inline: auto; }
  .hw-parse-stage .v2-overlap { margin-top: -96px; }
  .hw-cards.hwm-styles, .hw-cards.hwm-plans, .hwm-tasks { grid-template-columns: minmax(0, 1fr); }
  .hwm-photo-stage .v2-overlap { margin-top: -96px; }
  .hwj-report { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .hw-cards, .hw-rel { grid-template-columns: minmax(0, 1fr); }
  .hwr-layouts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hw-band-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hw-band-row li:last-child { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .hw-gauge { grid-template-columns: 92px 1fr; }
  .hw-gauge svg { width: 92px; height: 92px; }
  .hw-meta div { grid-template-columns: 1fr; gap: 0; }
  .hw-dim summary { grid-template-columns: 1fr 36px 16px; }
  .hw-dim summary .hw-lvl { display: none; }
}