/* Adapted from the original LP CSS modules; namespaced for this standalone mock. */
/* Requirements, before/after rewrite form a visible editing sequence. */
.doc-scene { background:#101d2f; border:1px solid #ffffff1c; border-radius:20px; padding:24px; }
.doc-target { display:flex; gap:12px; align-items:center; }.doc-target img { background:white; padding:6px; border-radius:9px; }.doc-target strong,.doc-target span { display:block; }.doc-target strong { font-size:14px; }.doc-target span { font-size:11px; color:var(--muted); margin-top:4px; }
.doc-requirements { display:flex; flex-wrap:wrap; gap:8px; margin:20px 0; }.doc-requirements > span { border:1px solid #b9f6d73d; background:#b9f6d70b; padding:7px 9px; border-radius:6px; font-size:10px; color:#b9f6d7; }.doc-requirements b { margin-left:8px; }
.doc-cv { border:1px solid #ffffff20; border-radius:12px; overflow:hidden; background:#17293c; }
.doc-cv header { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid #ffffff12; font-size:10px; color:var(--muted); }.doc-cv header strong { color:var(--ink); font-size:12px; }
.doc-before,.doc-after { padding:15px 16px; }.doc-label { font-size:10px; font-weight:600; letter-spacing:.06em; }.doc-before { color:#9aaabd; border-bottom:1px solid #ffffff12; }.doc-before p { font-size:13px; line-height:1.6; margin:8px 0 0; }.doc-after { border-left:3px solid #b9f6d7; color:#b9f6d7; transition:background .6s; }
.doc-typed { display:grid; font-size:14px; line-height:1.65; margin:10px 0 0; letter-spacing:0; }.doc-reserved,.doc-ink { grid-area:1/1; }.doc-reserved { visibility:hidden; }
.doc-skills { display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; }.doc-skills span { font-size:9px; border-radius:4px; padding:5px 7px; background:#b9f6d713; }
@media(max-width:420px) { .doc-scene { padding:17px; }.doc-target strong { font-size:12px; }.doc-requirements > span { font-size:9px; }.doc-typed { font-size:12px; } }
@media(prefers-reduced-motion:reduce) { .doc-scene * { transition:none!important; animation:none!important; } }

/* Each achievement remains a separate, scannable bullet while the text types in. */
.doc-bullet { display:block; position:relative; padding-left:13px; margin-bottom:8px; }.doc-bullet:not(:empty)::before { content:"•"; position:absolute; left:0; }

/* Both stages reserve the taller geometry; changing phases never shifts the next section. */
.doc-stage { display:grid; gap:18px; transition:opacity .55s; }
.doc-stage > * { min-width:0; }
.doc-scene[data-animated="true"] .doc-stage > * { grid-area:1/1; }
.doc-cv { align-self:start; transform-origin:top center; transition:transform .7s cubic-bezier(.22,.7,.3,1),opacity .5s,border-color .5s; }
.doc-cv[data-closed="true"] { transform:translateY(-6px) scale(.94,.06); opacity:0; pointer-events:none; }
.doc-scene[data-doc-phase="review"] .doc-cv { border-color:#b9f6d780; }
.doc-requirements b { opacity:0; transition:opacity .4s; }.doc-requirements [data-done="true"] b { opacity:1; }
.doc-delivery { display:flex; flex-direction:column; justify-content:center; gap:12px; padding:12px 0; transition:opacity .6s,transform .6s; }
.doc-delivery[data-visible="false"],.doc-receipt[data-visible="false"],.doc-model[data-visible="false"] { opacity:0; visibility:hidden; transform:translateY(12px); }
.doc-receipt { display:flex; align-items:center; gap:15px; padding:18px; border:1px solid #b9f6d73d; background:#b9f6d709; border-radius:12px; transition:opacity .5s,transform .5s; }
.doc-receipt svg { width:24px; height:28px; color:#b9f6d7; flex-shrink:0; }
.doc-receipt strong { font-size:15px; line-height:1.4; font-weight:500; }
.doc-check { display:grid; place-items:center; flex:0 0 28px; height:28px; margin-left:auto; border-radius:50%; background:#b9f6d7; color:#123329; font-size:18px; }
.doc-model { text-align:center; padding:24px 8px 4px; transition:opacity .65s,transform .65s; }
.doc-modelIcon { display:inline-grid; place-items:center; width:40px; height:40px; border:1px solid #b9f6d755; border-radius:12px; color:#b9f6d7; font-size:13px; letter-spacing:.04em; margin-bottom:16px; }
.doc-modelNote { font-size:clamp(19px,2vw,25px); line-height:1.4; letter-spacing:-.025em; margin:0; color:var(--ink); }
.doc-modelNote strong { color:#b9f6d7; font-weight:600; }
.doc-keywordNote { font-size:13px; line-height:1.65; color:var(--muted); margin:16px 0 0; }
.doc-status { display:flex; justify-content:space-between; gap:16px; margin-top:20px; font-size:11px; line-height:1.5; color:var(--muted); }
.doc-status > span:last-child { color:#b9f6d7; font-variant-numeric:tabular-nums; }
.doc-progress { margin-top:10px; height:5px; border-radius:8px; overflow:hidden; background:#ffffff12; }
.doc-progress > span { display:block; width:100%; height:100%; background:#b9f6d7; transform-origin:left; transition:transform .08s linear; }
.doc-scene[data-doc-phase="reset"] .doc-stage { opacity:0; }
@media(max-width:420px) { .doc-receipt { padding:15px 12px; gap:12px; }.doc-receipt strong { font-size:13px; }.doc-model { padding:20px 0 0; }.doc-modelNote { font-size:20px; }.doc-keywordNote { font-size:12px; } }

/* A compact application workspace: four columns on desktop, complete row metadata
 * grouped beneath the role on phones. Every label remains readable without scrolling. */
.batch-panel { height:100%; min-width:0; border:1px solid #ffffff1c; border-radius:20px; background:#101d2f; overflow:hidden; display:flex; flex-direction:column; }
.batch-header { display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:22px 20px; border-bottom:1px solid #ffffff12; }
.batch-wordmark { font-size:13px; font-weight:600; letter-spacing:-.04em; color:#dce9f4; }.batch-wordmark > span { color:#60798d; padding:0 4px; }
.batch-header h3 { font-size:13px; font-weight:400; margin:0; color:#a8bdcc; }
.batch-total { display:flex; align-items:center; gap:6px; margin-left:auto; color:#b9f6d7; font-size:10px; font-variant-numeric:tabular-nums; }.batch-total i { width:5px; height:5px; border-radius:50%; background:#b9f6d7; }
.batch-tableWrap { padding:8px 16px 0; }
.batch-table { border-collapse:separate; border-spacing:0 5px; table-layout:fixed; width:100%; text-align:left; }
.batch-table th:first-child { width:45%; }.batch-table th:last-child { width:29%; }.batch-table th.batch-salary { width:14%; }.batch-table th.batch-country { width:12%; }
.batch-table th { padding:10px 5px 14px; font-size:9px; font-weight:500; color:#839aad; overflow-wrap:anywhere; }
.batch-row td { padding:18px 5px; vertical-align:middle; background:#142438; border-top:1px solid #ffffff08; border-bottom:1px solid #ffffff08; transition:background .4s,border-color .4s; }
.batch-row td:first-child { border-radius:9px 0 0 9px; border-left:1px solid #ffffff08; padding-left:10px; }.batch-row td:last-child { border-radius:0 9px 9px 0; border-right:1px solid #ffffff08; padding-right:10px; }
.batch-row[data-selected="true"] td { background:#1b3542; border-color:#b9f6d780; }
.batch-role { position:relative; }
.batch-identity { display:flex; align-items:center; gap:9px; min-width:0; }.batch-identity > img { flex:0 0 30px; width:30px; height:30px; background:#f1f7fa; border-radius:8px; padding:5px; object-fit:contain; }.batch-identity > div { min-width:0; }
.batch-identity strong { display:block; color:#e4eef7; font-size:11px; line-height:1.4; font-weight:500; overflow-wrap:break-word; }.batch-company { display:block; font-size:10px; color:#8fa7b9; margin-top:4px; }
.batch-salary,.batch-country { font-size:10px; color:#b6c8d5; white-space:nowrap; font-variant-numeric:tabular-nums; }
.batch-mobileMeta { display:none; }
.batch-progressState { padding:0 3px; }.batch-percent { display:block; color:#c8eadc; font-size:11px; margin-bottom:9px; font-variant-numeric:tabular-nums; }
.batch-track { height:4px; background:#ffffff0c; border-radius:5px; overflow:hidden; }.batch-track > span { display:block; height:100%; width:100%; background:linear-gradient(90deg,#83b8b0,#b9f6d7); transform-origin:left; transition:transform .08s linear; }
.batch-applied { display:flex; align-items:center; gap:6px; font-size:11px; color:#b9f6d7; overflow-wrap:anywhere; }.batch-applied b { display:grid; place-items:center; flex:0 0 17px; height:17px; border-radius:50%; font-size:11px; background:#b9f6d719; }
.batch-activity { display:flex; justify-content:center; gap:12px; padding:28px 14px; margin-top:auto; }.batch-activity > span { display:grid; grid-template-columns:24px 12px; align-items:center; gap:5px; }.batch-activity img { width:23px; height:23px; padding:4px; background:#e9f4f8; border-radius:6px; object-fit:contain; }.batch-activity i { width:10px; height:10px; border:1px solid #b9f6d72b; border-top-color:#b9f6d7; border-radius:50%; animation:spin 1.5s linear infinite; animation-play-state:paused; }.batch-activity b { color:#b9f6d7; font-size:12px; }
[data-doc-running="true"] .batch-activity i { animation-play-state:running; }
.batch-cursor { position:absolute; right:-8px; top:20px; z-index:3; width:29px; height:33px; pointer-events:none; animation:select .8s ease-out both; animation-play-state:paused; }.batch-cursor svg { position:relative; z-index:1; width:100%; height:100%; filter:drop-shadow(0 2px 4px #0008); }.batch-cursor i { position:absolute; left:-7px; top:-5px; width:24px; height:24px; border:1px solid #b9f6d7; border-radius:50%; animation:click .8s ease-out both; animation-play-state:paused; }
[data-doc-running="true"] .batch-cursor,[data-doc-running="true"] .batch-cursor i { animation-play-state:running; }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes select { 0% { opacity:0; transform:translate(45px,42px); } 45%,70% { opacity:1; transform:translate(0,0); } 82% { transform:scale(.88); } 100% { opacity:1; transform:scale(1); } }
@keyframes click { 0%,60% { opacity:0; transform:scale(.25); } 75% { opacity:1; } 100% { opacity:0; transform:scale(1.65); } }
@media(max-width:600px) {
 .batch-header { padding:19px 15px; }.batch-tableWrap { padding:6px 10px 0; }
 .batch-salary,.batch-country { display:none; }.batch-table th:first-child { width:66%; }.batch-table th:last-child { width:34%; }
 .batch-identity { gap:9px; align-items:flex-start; }.batch-identity strong { font-size:12px; }.batch-row td { padding-top:16px; padding-bottom:16px; }
 .batch-mobileMeta { display:block; font-size:10px; line-height:1.5; color:#adc3d2; margin-top:5px; }.batch-mobileMeta > span:first-child { color:#586f83; padding:0 3px; }
 .batch-table th { font-size:10px; }.batch-activity { gap:9px; padding:24px 10px; }.batch-cursor { right:6px; top:26px; }
}
@media(prefers-reduced-motion:reduce) { .batch-panel * { animation:none!important; transition:none!important; } }

/* A single scroll playhead drives every transition; no independent timers. */
.document-workflow{--muted:#a7b8cd;--ink:#edf5ff;position:absolute;left:74%;top:50%;width:560px;display:grid;opacity:0;pointer-events:none;z-index:4;transform-origin:center}
.document-workflow>.document-table,.document-workflow>.doc-scene{grid-area:1/1;min-width:0;align-self:start}
.document-workflow [data-visible="false"]{visibility:hidden;pointer-events:none}
.document-workflow h3,.document-workflow p{letter-spacing:normal}
.document-workflow .doc-stage{min-height:405px}
.document-workflow .doc-scene .doc-stage>*{grid-area:1/1}
.document-workflow .doc-target img{width:36px;height:36px}
.document-workflow .doc-before p{margin:8px 0 0}
.document-workflow .batch-panel{height:100%;min-height:600px}
.document-workflow .batch-header{position:static;width:auto;left:auto}
.document-workflow .batch-cursor,.document-workflow .batch-cursor i{animation:none}
.document-workflow .batch-activity i{animation:none;transform:rotate(var(--activity-angle,0deg))}
.document-workflow .doc-progress>span,.document-workflow .batch-track>span{transition:none}
@media(max-width:900px){
 .document-workflow .doc-scene{padding:17px}
 .document-workflow .doc-stage{min-height:455px}
 .document-workflow .doc-typed{font-size:12px}
 .document-workflow .doc-before p{font-size:12px}
 .document-workflow .doc-requirements{gap:5px;margin:14px 0}
 .document-workflow .doc-requirements>span{font-size:9px;padding:6px}
 .document-workflow .doc-modelNote{font-size:20px}
 .document-workflow .doc-keywordNote{font-size:12px}
}

.document-workflow [hidden]{display:none!important}

/* Keep both surfaces on the same geometry; content exits before the next text
   enters, so stopping midway never leaves two overlapping readable screens. */
.outcome-report{grid-area:1/1;align-self:stretch;border:1px solid #ffffff1c;border-radius:20px;background:#101d2f;padding:30px;opacity:0;visibility:hidden;color:#edf5ff}
.outcome-report header{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:10px;color:#a7b8cd}
.outcome-status{display:flex;align-items:center;gap:7px;color:#b9f6d7}.outcome-status i{width:6px;height:6px;background:#b9f6d7;border-radius:50%}
.outcome-sun{font-size:36px;color:#e9cf9f;margin:30px 0 12px}
.outcome-report h4{font-size:32px;letter-spacing:-.04em;margin:0 0 28px}
.outcome-report p{font-size:18px;line-height:1.5;color:#c4d1e1;margin:0 0 8px}
.outcome-number{display:flex;align-items:center;gap:18px}.outcome-number strong{font-size:82px;line-height:1;letter-spacing:-.06em;color:#b9f6d7;font-variant-numeric:tabular-nums}.outcome-number>span{font-size:23px;line-height:1.3;color:#c4d1e1}
.outcome-interviews{margin-top:28px}.outcome-invitations{display:flex;gap:14px;margin:28px 0 0}.outcome-invitations>div{position:relative;width:48px;height:48px;padding:8px;border-radius:12px;background:#fff}.outcome-invitations img{width:100%;height:100%;object-fit:contain}.outcome-invitations span{position:absolute;top:-6px;right:-6px;display:grid;place-items:center;width:20px;height:20px;border:2px solid #132638;border-radius:50%;color:#112b24;background:#b9f6d7;font-size:11px}
@media(max-width:900px){.outcome-report{padding:26px}.outcome-report h4{font-size:30px}.outcome-report p{font-size:18px}.outcome-number strong{font-size:76px}.outcome-number>span{font-size:22px}}
/* A single traveling count connects the completed batch with its summary. */
.outcome-bridge{position:absolute;z-index:6;display:block;color:#b9f6d7;font-weight:700;line-height:1;letter-spacing:-.06em;font-variant-numeric:tabular-nums;transform:translate(-50%,-50%);pointer-events:none}
.outcome-number>.outcome-weekly-label{font-size:18px;max-width:255px;line-height:1.45}