/* ========================================
   ResumeGeni Homepage V7 — self-contained runtime
   (cave plan new4-combined-cut, PRD-4.1)

   This file owns every rule /new4 renders. The v4 and v6
   stylesheets are NOT loaded by index_v7.html; required
   rules were absorbed here so edits to the other concept
   pages can never restyle this one. Class names keep
   their original prefixes to avoid a markup rewrite.
   ======================================== */

/* ===== absorbed from homepage-v4.css (cave PRD-4.1) ===== */
:root {
    --v4-black: #050505;
    --v4-ink: #0a0a0b;
    --v4-surface-1: #0e0e10;
    --v4-surface-2: #141417;
    --v4-surface-3: #1b1b1f;

    --v4-white: #ffffff;
    --v4-text-hero: #ffffff;
    --v4-text-primary: rgba(255, 255, 255, 0.94);
    --v4-text-secondary: rgba(255, 255, 255, 0.66);
    --v4-text-muted: rgba(255, 255, 255, 0.42);
    --v4-text-ghost: rgba(255, 255, 255, 0.18);

    --v4-accent: #FF8A4C;
    --v4-accent-light: #FFB870;
    --v4-accent-deep: #E8612C;
    --v4-accent-glow: rgba(255, 138, 76, 0.35);
    --v4-on-accent: #1a0d06;

    --v4-fail: #ef4444;
    --v4-warn: #f59e0b;
    --v4-pass: #34d399;

    --v4-border: rgba(255, 255, 255, 0.08);
    --v4-border-strong: rgba(255, 255, 255, 0.14);
    --v4-border-accent: rgba(255, 138, 76, 0.32);

    --v4-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, sans-serif;
    --v4-mono: "SF Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    --v4-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --v4-ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
    --v4-snap: cubic-bezier(0.83, 0, 0.17, 1);

    --v4-max: 1320px;
    --v4-content: 880px;

    --v4-radius: 16px;
    --v4-radius-lg: 24px;
    --v4-radius-pill: 100px;

    /* driven by JS */
    --v4-mx: 0;        /* pointer x  -1 .. 1 */
    --v4-my: 0;        /* pointer y  -1 .. 1 */
    --v4-scroll: 0;    /* page scroll progress 0..1 */
}
.v4-page {
    background: var(--v4-black);
    color: var(--v4-text-primary);
    font-family: var(--v4-font);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
    margin: 0;
}
.v4-page * { box-sizing: border-box; }
.v4-page ::selection {
    background: var(--v4-accent);
    color: var(--v4-on-accent);
}
.v4-grain {
    position: fixed;
    inset: -50%;
    width: 200%;
    height: 200%;
    pointer-events: none;
    z-index: 2000;
    opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    animation: v4-grain-shift 0.9s steps(4) infinite;
}
@keyframes v4-grain-shift {
    0%   { transform: translate3d(0, 0, 0); }
    25%  { transform: translate3d(-2%, 3%, 0); }
    50%  { transform: translate3d(3%, -2%, 0); }
    75%  { transform: translate3d(-3%, -3%, 0); }
    100% { transform: translate3d(2%, 2%, 0); }
}
.v4-spotlight {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background: radial-gradient(
        600px circle at var(--v4-cursor-x, 50%) var(--v4-cursor-y, 30%),
        rgba(255, 138, 76, 0.05),
        transparent 60%
    );
}
.v4-container {
    max-width: var(--v4-max);
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 48px);
    position: relative;
    z-index: 3;
}
.v4-display {
    font-size: clamp(3rem, 10.5vw, 9rem);
    font-weight: 800;
    line-height: 0.96;
    letter-spacing: -0.045em;
    margin: 0;
    color: var(--v4-text-hero);
}
.v4-h2 {
    font-size: clamp(2.2rem, 5.6vw, 4.6rem);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.035em;
    margin: 0;
}
.v4-lead {
    font-size: clamp(1.05rem, 1.6vw, 1.3rem);
    line-height: 1.65;
    color: var(--v4-text-secondary);
    margin: 0;
}
.v4-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--v4-text-muted);
    margin: 0 0 24px;
}
.v4-eyebrow::before {
    content: "";
    width: 28px;
    height: 1px;
    background: var(--v4-accent);
}
.v4-gradient-text {
    background: linear-gradient(98deg, var(--v4-accent) 4%, var(--v4-accent-light) 50%, #ffd9a8 96%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.v4-gradient-text .v4-w > span {
    background: linear-gradient(98deg, var(--v4-accent) 4%, var(--v4-accent-light) 60%, #ffd9a8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.v4-dim { color: var(--v4-text-ghost); }
.v4-split .v4-w {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    padding-bottom: 0.08em;
    margin-bottom: -0.08em;
}
.v4-split .v4-w > span {
    display: inline-block;
    transform: translateY(120%) rotate(4deg);
    opacity: 0;
    transition:
        transform 1.1s var(--v4-ease),
        opacity 0.7s linear;
    transition-delay: calc(var(--wi) * 70ms);
    will-change: transform;
}
.v4-split.is-in .v4-w > span {
    transform: translateY(0) rotate(0);
    opacity: 1;
}
.v4-reveal {
    opacity: 0;
    transform: translateY(48px);
    transition:
        opacity 0.9s var(--v4-ease-soft),
        transform 1.1s var(--v4-ease);
    transition-delay: var(--d, 0ms);
    will-change: transform, opacity;
}
.v4-reveal.is-in {
    opacity: 1;
    transform: none;
}
.v4-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px clamp(20px, 4vw, 48px);
    transition: background 0.4s ease, border-color 0.4s ease, padding 0.4s ease;
    border-bottom: 1px solid transparent;
}
.v4-nav.is-scrolled {
    background: rgba(5, 5, 5, 0.72);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    backdrop-filter: blur(20px) saturate(1.4);
    border-bottom-color: var(--v4-border);
    padding-top: 12px;
    padding-bottom: 12px;
}
.v4-nav__logo {
    font-weight: 800;
    font-size: 1.18rem;
    letter-spacing: -0.03em;
    color: var(--v4-white);
    text-decoration: none;
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
}
.v4-nav__beta {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--v4-accent);
    background: rgba(255, 138, 76, 0.1);
    border: 1px solid rgba(255, 138, 76, 0.25);
    padding: 2px 6px;
    border-radius: 4px;
    position: relative;
    top: -7px;
}
.v4-nav__links {
    display: flex;
    align-items: center;
    gap: clamp(14px, 2vw, 28px);
}
.v4-nav__link {
    color: var(--v4-text-secondary);
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 500;
    transition: color 0.25s ease;
}
.v4-nav__link:hover { color: var(--v4-white); }
/* Language switcher (shared markup with production homepage; styles
   self-contained here per the own-the-runtime rule) */
.home-lang { position: relative; display: inline-block; }
.home-lang__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid var(--v4-border);
    background: transparent;
    color: var(--v4-text-secondary);
    border-radius: var(--v4-radius-pill);
    padding: 7px 12px;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
}
.home-lang__toggle:hover {
    border-color: var(--v4-border-strong);
    color: var(--v4-text);
}
.home-lang__toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--v4-accent-glow);
}
.home-lang__chevron {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    transition: transform 0.15s ease;
}
.home-lang__chevron.is-open { transform: rotate(180deg); }
.home-lang__menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 210px;
    max-height: min(420px, 70vh);
    overflow-y: auto;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: #101010;
    border: 1px solid var(--v4-border-strong);
    border-radius: 14px;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5);
    display: none;
    z-index: 1000;
}
.home-lang__menu.is-open { display: block; }
.home-lang__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--v4-text-secondary);
    text-decoration: none;
    padding: 9px 11px;
    border-radius: 9px;
    white-space: nowrap;
    font-size: 0.95rem;
}
.home-lang__item:hover {
    background: rgba(255, 255, 255, 0.07);
    color: var(--v4-text);
}
.home-lang__item.is-active {
    color: var(--v4-text);
    background: rgba(255, 138, 76, 0.12);
}
.home-lang__check {
    fill: none;
    stroke: var(--v4-pass);
    stroke-width: 2.2;
}

.v4-nav__cta {
    background: var(--v4-white);
    color: var(--v4-black);
    font-size: 0.88rem;
    font-weight: 600;
    padding: 9px 18px;
    border-radius: var(--v4-radius-pill);
    text-decoration: none;
    transition: background 0.3s ease, color 0.3s ease, box-shadow 0.45s var(--v4-ease), filter 0.2s ease;
}
.v4-nav__cta {
    box-shadow: 0 0 0 0 rgba(255, 138, 76, 0);
}

.v4-nav__cta:hover {
    /* scale-on-hover moved the hover boundary itself and oscillated at
       the edge; the premium read is light, not motion */
    background: var(--v4-accent);
    color: var(--v4-on-accent);
    box-shadow:
        0 0 0 1px rgba(255, 200, 150, 0.45) inset,
        0 4px 22px -4px rgba(255, 138, 76, 0.55);
}

.v4-nav__cta:active { filter: brightness(0.94); }
@media (max-width: 860px) {
.v4-nav__links .v4-nav__link { display: none; }
}
.v4-rail {
    position: fixed;
    right: clamp(18px, 2vw, 40px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 90;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.v4-rail__item {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    text-decoration: none;
    color: var(--v4-text-ghost);
    transition: color 0.3s ease;
}
.v4-rail__num {
    font-family: var(--v4-mono);
    font-size: 0.66rem;
    letter-spacing: 0.12em;
}
.v4-rail__label {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--v4-text-muted);
    opacity: 0;
    transform: translateX(8px);
    transition: opacity 0.3s ease, transform 0.4s var(--v4-ease);
    white-space: nowrap;
    background: rgba(5, 5, 5, 0.65);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    padding: 3px 9px;
    border-radius: 5px;
}
.v4-rail__item:hover { color: var(--v4-text-secondary); }
.v4-rail__item:hover .v4-rail__label, .v4-rail__item.is-active .v4-rail__label {
    opacity: 1;
    transform: none;
}
.v4-rail__item.is-active { color: var(--v4-accent); }
.v4-rail__item.is-active .v4-rail__label { color: var(--v4-text-secondary); }
@media (max-width: 1280px) {
.v4-rail { display: none; }
}
.v4-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    width: 100%;
    transform-origin: 0 0;
    transform: scaleX(var(--v4-scroll));
    background: linear-gradient(90deg, var(--v4-accent-deep), var(--v4-accent-light));
    z-index: 110;
}
.v4-hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 140px 0 100px;
    overflow: clip;
}
@keyframes v4-drift {
    from { margin-top: 0; }
    to   { margin-top: -26px; }
}
.v4-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--v4-text-secondary);
    border: 1px solid var(--v4-border-strong);
    background: rgba(255, 255, 255, 0.03);
    padding: 8px 16px;
    border-radius: var(--v4-radius-pill);
    margin-bottom: clamp(24px, 4vh, 44px);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.v4-hero__badge-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--v4-pass);
    box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.5);
    animation: v4-pulse 2.4s ease-out infinite;
}
@keyframes v4-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.5); }
    70%  { box-shadow: 0 0 0 9px rgba(52, 211, 153, 0); }
    100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}
.v4-hero__headline { margin-bottom: clamp(28px, 4.5vh, 48px); }
.v4-hero__headline .v4-line { display: block; }
.v4-hero__sub {
    max-width: 560px;
    margin-bottom: clamp(32px, 5vh, 52px);
}
.v4-hero__cta-row {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
}
.v4-hero__hint {
    font-size: 0.85rem;
    color: var(--v4-text-muted);
}
@keyframes v4-cue {
    from { transform: translateY(-100%); }
    to   { transform: translateY(100%); }
}
.v4-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: var(--v4-font);
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--v4-radius-pill);
    cursor: pointer;
    border: none;
    /* transform belongs to the rAF spring (homepage-v7.js); transitioning
       it here is what made the magnetic hover jitter */
    transition: box-shadow 0.45s var(--v4-ease), background 0.3s ease, color 0.3s ease, filter 0.3s ease;
    will-change: transform;
}

.v4-btn:active { filter: brightness(0.94); }
.v4-btn--primary {
    background: linear-gradient(135deg, var(--v4-accent) 0%, var(--v4-accent-deep) 100%);
    color: var(--v4-on-accent);
    font-size: 1.02rem;
    padding: 18px 36px;
    isolation: isolate;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.25) inset,
        0 12px 40px -8px var(--v4-accent-glow);
    overflow: hidden;
}
.v4-btn--primary::before {
    /* the sweep: one pass on entry, never loops, never re-fires mid-hover.
       Bright core with warm chromatic shoulders so the light feels branded. */
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        100deg,
        transparent 30%,
        rgba(255, 220, 180, 0.22) 42%,
        rgba(255, 255, 255, 0.5) 50%,
        rgba(255, 220, 180, 0.22) 58%,
        transparent 70%
    );
    background-size: 250% 100%;
    background-position: 130% 0;
    opacity: 0;
    pointer-events: none;
}

.v4-btn--primary:hover::before {
    animation: v7-cta-sweep 1.05s cubic-bezier(0.22, 1, 0.36, 1) 0.06s 1 both;
}

@keyframes v7-cta-sweep {
    0%   { opacity: 0; background-position: 130% 0; }
    12%  { opacity: 1; }
    88%  { opacity: 1; }
    100% { opacity: 0; background-position: -50% 0; }
}

.v4-btn--primary::after {
    /* the gloss: a soft specular that lives under the cursor, so the
       surface reads as material catching light, not a looping gif */
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(
        130px 75px at var(--px, 50%) var(--py, 30%),
        rgba(255, 244, 230, 0.22),
        rgba(255, 244, 230, 0) 70%
    );
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.v4-btn--primary:hover::after { opacity: 1; }

.v4-btn--primary:hover {
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.35) inset,
        0 0 0 1px rgba(255, 200, 150, 0.25) inset,
        0 18px 56px -8px rgba(255, 138, 76, 0.55),
        0 2px 18px -2px rgba(255, 184, 112, 0.4);
}
.v4-btn--primary .v4-btn__arrow {
    transform: translateX(calc(var(--lean-x, 0) * 1px));
    transition: margin-left 0.35s var(--v4-ease);
}
.v4-btn--primary:hover .v4-btn__arrow { margin-left: 4px; }
@keyframes v4-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.v4-scan {
    position: relative;
    height: 420vh;
    z-index: 3;
}
.v4-scan__sticky {
    position: sticky;
    top: 0;
    height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: clip;
    background:
        radial-gradient(ellipse 90% 60% at 50% 110%, rgba(255, 138, 76, calc(0.04 + var(--p2, 0) * 0.07)), transparent 60%),
        var(--v4-black);
}
.v4-scan__head {
    text-align: center;
    margin-bottom: clamp(20px, 3.5vh, 44px);
    padding: 0 20px;
}
.v4-scan__head .v4-h2 { transition: opacity 0.4s ease; }
.v4-scan__phase {
    margin-top: 14px;
    font-family: var(--v4-mono);
    font-size: 0.8rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--v4-text-muted);
    min-height: 1.4em;
}
.v4-scan__phase strong {
    color: var(--v4-accent);
    font-weight: 600;
}
.v4-scan__stage {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(28px, 6vw, 96px);
    padding: 0 20px;
}
.v4-doc {
    position: relative;
    width: min(380px, 78vw);
    aspect-ratio: 8.5 / 10.2;
    background: linear-gradient(180deg, #fdfdfc 0%, #f3f2ef 100%);
    border-radius: 12px;
    padding: clamp(18px, 3.4vw, 30px);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.1),
        0 30px 80px -20px rgba(0, 0, 0, 0.8),
        0 0 120px -30px var(--v4-accent-glow);
    overflow: hidden;
    transform:
        perspective(1200px)
        rotateX(calc(var(--v4-my) * -2deg + 2deg))
        rotateY(calc(var(--v4-mx) * 3deg));
    transition: box-shadow 0.5s ease;
}
.v4-doc__line {
    position: relative;
    height: 7px;
    border-radius: 3px;
    background: #d6d7da;
    margin-bottom: 7px;
    transition: background 0.45s ease, box-shadow 0.45s ease;
}
.v4-doc__line.is-flagged {
    background: rgba(239, 68, 68, 0.38);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}
.v4-doc__line.is-fixed {
    background: rgba(16, 163, 109, 0.5);
    box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.10);
}
.v4-doc__flag {
    position: absolute;
    right: -8px;
    top: 50%;
    transform: translateY(-50%) scale(0);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 800;
    transition: transform 0.4s var(--v4-ease);
}
.v4-doc__line.is-flagged .v4-doc__flag {
    transform: translateY(-50%) scale(1);
    background: var(--v4-fail);
    color: #fff;
}
.v4-doc__line.is-fixed .v4-doc__flag {
    transform: translateY(-50%) scale(1);
    background: var(--v4-pass);
    color: #053a2b;
}
.v4-doc__flag::before { content: "!"; }
.v4-doc__line.is-fixed .v4-doc__flag::before { content: "✓"; }
.v4-doc__beam {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--beam, 0) * 100%);
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--beam-color, var(--v4-fail)) 18%, var(--beam-color, var(--v4-fail)) 82%, transparent);
    box-shadow: 0 0 24px 2px var(--beam-color, var(--v4-fail));
    opacity: var(--beam-on, 0);
    z-index: 2;
}
.v4-doc__beam::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 64px;
    background: linear-gradient(to bottom, var(--beam-color, var(--v4-fail)), transparent);
    opacity: 0.12;
}
.v4-scan__readout {
    width: min(300px, 80vw);
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.v4-readout__card {
    border: 1px solid var(--v4-border);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
    border-radius: var(--v4-radius-lg);
    padding: 26px 28px;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}
.v4-readout__label {
    font-family: var(--v4-mono);
    font-size: 0.68rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--v4-text-muted);
    margin: 0 0 14px;
}
.v4-readout__grade-row {
    display: flex;
    align-items: baseline;
    gap: 18px;
}
.v4-readout__grade {
    font-size: clamp(3.4rem, 6vw, 5rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--grade-color, var(--v4-fail));
    transition: color 0.4s ease;
}
.v4-readout__score {
    font-family: var(--v4-mono);
    font-size: 1.5rem;
    color: var(--v4-text-secondary);
}
.v4-readout__score small {
    font-size: 0.85rem;
    color: var(--v4-text-muted);
}
.v4-readout__bar {
    margin-top: 18px;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}
.v4-readout__bar-fill {
    height: 100%;
    width: calc(var(--score, 0) * 1%);
    border-radius: 3px;
    background: linear-gradient(90deg, var(--v4-fail), var(--v4-warn) 50%, var(--v4-pass));
    background-size: 280px 100%;
    background-position: 0 0;
}
.v4-readout__findings {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 0.88rem;
    color: var(--v4-text-secondary);
}
.v4-finding {
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0;
    transform: translateX(16px);
    transition: opacity 0.5s ease, transform 0.6s var(--v4-ease);
}
.v4-finding.is-in {
    opacity: 1;
    transform: none;
}
.v4-finding__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--v4-fail);
    transition: background 0.4s ease;
}
.v4-finding.is-resolved .v4-finding__dot { background: var(--v4-pass); }
.v4-finding.is-resolved { color: var(--v4-text-primary); }
.v4-finding__fix {
    display: none;
    color: var(--v4-pass);
    font-size: 0.78rem;
    font-family: var(--v4-mono);
    margin-left: auto;
}
.v4-finding.is-resolved .v4-finding__fix { display: inline; }
@media (max-width: 880px) {
.v4-scan { height: 360vh; }
.v4-scan__stage {
        flex-direction: column;
        gap: 24px;
    }
.v4-doc { width: min(300px, 72vw); }
.v4-scan__readout { width: min(340px, 86vw); }
.v4-readout__card { padding: 18px 20px; }
.v4-readout__findings { display: none; }
}
.v4-pillars {
    position: relative;
    padding: clamp(100px, 14vh, 180px) 0 0;
    z-index: 3;
}
.v4-pillars__head {
    max-width: var(--v4-content);
    margin-bottom: clamp(56px, 9vh, 110px);
}
.v4-pillar {
    position: sticky;
    z-index: 1;
    top: clamp(80px, 11vh, 130px);
    margin-bottom: clamp(40px, 6vh, 72px);
    border-radius: var(--v4-radius-lg);
    border: 1px solid var(--v4-border);
    background:
        radial-gradient(120% 140% at 85% 0%, var(--pillar-tint, rgba(255, 138, 76, 0.08)), transparent 52%),
        linear-gradient(180deg, var(--v4-surface-2), var(--v4-surface-1));
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    min-height: clamp(420px, 60vh, 560px);
    transform-origin: center top;
    will-change: transform;
    box-shadow: 0 -20px 60px -30px rgba(0, 0, 0, 0.9);
}
.v4-pillar:nth-of-type(2) { z-index: 2; }
.v4-pillar:nth-of-type(3) { z-index: 3; }
.v4-pillar__body {
    padding: clamp(32px, 5vw, 64px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.v4-pillar__index {
    font-family: var(--v4-mono);
    font-size: 0.8rem;
    color: var(--v4-accent);
    letter-spacing: 0.16em;
    margin-bottom: 18px;
}
.v4-pillar__title {
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
    margin: 0 0 18px;
}
.v4-pillar__desc {
    color: var(--v4-text-secondary);
    font-size: clamp(0.98rem, 1.3vw, 1.12rem);
    line-height: 1.7;
    max-width: 46ch;
    margin: 0 0 26px;
}
.v4-pillar__list {
    list-style: none;
    margin: 0 0 30px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.v4-pillar__list li {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--v4-text-secondary);
    font-size: 0.95rem;
}
.v4-pillar__list li::before {
    content: "";
    width: 14px;
    height: 1px;
    background: var(--v4-accent);
    flex-shrink: 0;
}
.v4-pillar__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--v4-white);
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    border-bottom: 1px solid var(--v4-border-accent);
    padding-bottom: 3px;
    width: fit-content;
    transition: gap 0.3s var(--v4-ease), color 0.3s ease;
}
.v4-pillar__link:hover {
    gap: 14px;
    color: var(--v4-accent-light);
}
.v4-pillar__visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(24px, 3vw, 48px);
    border-left: 1px solid var(--v4-border);
    background: rgba(0, 0, 0, 0.25);
    overflow: hidden;
}
@media (max-width: 880px) {
.v4-pillar {
        grid-template-columns: 1fr;
        min-height: 0;
    }
.v4-pillar__visual {
        border-left: none;
        border-top: 1px solid var(--v4-border);
        min-height: 240px;
    }
}
.v4-dial {
    position: relative;
    width: clamp(160px, 18vw, 220px);
    aspect-ratio: 1;
}
.v4-dial svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.v4-dial__track { stroke: rgba(255, 255, 255, 0.08); }
.v4-dial__fill {
    stroke: url(#v4DialGrad);
    stroke-linecap: round;
    stroke-dasharray: 264;
    stroke-dashoffset: 264;
    transition: stroke-dashoffset 1.6s var(--v4-ease);
}
.is-in-view .v4-dial__fill { stroke-dashoffset: 26.4; }
.v4-dial__center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}
.v4-dial__num {
    font-size: clamp(2.2rem, 3.4vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.03em;
}
.v4-dial__cap {
    font-family: var(--v4-mono);
    font-size: 0.66rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--v4-text-muted);
}
.v4-venn {
    position: relative;
    --venn-spread: clamp(75px, 9.5vw, 130px);
    width: clamp(300px, 34vw, 460px);
    height: clamp(150px, 15vw, 200px);
}
.v4-venn__c {
    position: absolute;
    top: 0;
    left: 50%;
    width: clamp(150px, 15vw, 200px);
    height: clamp(150px, 15vw, 200px);
    border-radius: 50%;
    border: 1px solid var(--v4-border-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: transform 1.4s var(--v4-ease), color 0.6s ease;
}

.v4-venn__c--you {
    background: radial-gradient(circle, rgba(255, 138, 76, 0.14), transparent 70%);
    border-color: rgba(255, 138, 76, 0.35);
    color: var(--v4-accent-light);
    transform: translateX(calc(-50% - var(--venn-spread)));
    z-index: 1;
}

.v4-venn__c--job {
    background: radial-gradient(circle, rgba(52, 211, 153, 0.12), transparent 70%);
    border-color: rgba(52, 211, 153, 0.3);
    color: var(--v4-pass);
    transform: translateX(calc(-50% + var(--venn-spread)));
}

/* the circles fly through each other and land perfectly concentric —
   one circle, and it stays under the Match pill, like production */
.v4-venn.is-merged .v4-venn__c { transform: translateX(-50%); }

/* only the labels fade as the circles become one; the circle remains */
.v4-venn__c.is-hidden { color: transparent; }

/* small screens: shrink the circles so the separated start still reads */
@media (max-width: 480px) {
    .v4-venn {
        --venn-spread: 80px;
        width: 290px;
        height: 130px;
    }
    .v4-venn__c {
        width: 130px;
        height: 130px;
        font-size: 0.75rem;
    }
}

/* sparkle burst under the pill */
.v4-venn.is-matched::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 140px;
    height: 140px;
    transform: translate(-50%, -50%) scale(0);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 138, 76, 0.4) 0%, transparent 70%);
    animation: v7-venn-sparkle 0.8s ease-out forwards;
    pointer-events: none;
}

@keyframes v7-venn-sparkle {
    0% { transform: translate(-50%, -50%) scale(0.5); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(2); opacity: 0; }
}
.v4-venn__match {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0;
    background: linear-gradient(135deg, var(--v4-accent) 0%, var(--v4-pass) 100%);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 12px 32px;
    border-radius: var(--v4-radius-pill);
    box-shadow: 0 8px 32px -6px var(--v4-accent-glow);
    z-index: 3;
}

.v4-venn.is-matched .v4-venn__match {
    animation: v7-match-flash 0.6s var(--v4-ease) forwards;
}

@keyframes v7-match-flash {
    0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
    55% { transform: translate(-50%, -50%) scale(1.12); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
.v4-langs {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: min(280px, 100%);
}
.v4-langs__row {
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.6s ease, transform 0.8s var(--v4-ease);
    transition-delay: calc(var(--i) * 180ms);
}
.is-in-view .v4-langs__row {
    opacity: 1;
    transform: none;
}
.v4-langs__tag {
    font-size: 0.85rem;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: var(--v4-radius-pill);
    border: 1px solid var(--v4-border-strong);
    color: var(--v4-text-secondary);
    background: rgba(255, 255, 255, 0.03);
}
.v4-langs__tag--hot {
    color: var(--v4-accent-light);
    border-color: var(--v4-border-accent);
    background: rgba(255, 138, 76, 0.07);
}
.v4-langs__arrow { color: var(--v4-text-muted); }
.v4-langs__count {
    margin-top: 8px;
    font-family: var(--v4-mono);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--v4-text-muted);
}
.v4-proof {
    padding: clamp(100px, 14vh, 200px) 0 0;
    position: relative;
    z-index: 3;
}
.v4-proof__intro {
    max-width: var(--v4-content);
    margin-bottom: clamp(56px, 8vh, 100px);
}
.v4-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--v4-border);
    border: 1px solid var(--v4-border);
    border-radius: var(--v4-radius-lg);
    overflow: hidden;
    margin-bottom: clamp(80px, 12vh, 150px);
}
.v4-stat {
    background: var(--v4-surface-1);
    padding: clamp(32px, 5vh, 56px) clamp(20px, 3vw, 44px);
    position: relative;
    overflow: hidden;
}
.v4-stat::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 2px;
    background: linear-gradient(90deg, var(--v4-accent-deep), var(--v4-accent-light));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1.4s var(--v4-ease) calc(var(--d, 0ms) + 300ms);
}
.v4-stat.is-in::after { transform: scaleX(1); }
.v4-stat__value {
    font-size: clamp(3rem, 6.5vw, 5.5rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    display: flex;
    align-items: baseline;
}
.v4-stat__suffix { color: var(--v4-accent); }
.v4-stat__label {
    margin-top: 14px;
    color: var(--v4-text-muted);
    font-size: 0.92rem;
}
@media (max-width: 720px) {
.v4-stats { grid-template-columns: 1fr; }
}
.v4-voices {
    position: relative;
    padding: 0 0 clamp(100px, 14vh, 200px);
    overflow: hidden;
    z-index: 3;
}
.v4-voices::before, .v4-voices::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: clamp(120px, 14vw, 280px);
    z-index: 4;
    pointer-events: none;
}
.v4-voices::before {
    left: 0;
    background: linear-gradient(90deg, var(--v4-black), transparent);
}
.v4-voices::after {
    right: 0;
    background: linear-gradient(-90deg, var(--v4-black), transparent);
}
.v4-voices__row {
    display: flex;
    gap: 24px;
    width: max-content;
    padding: 12px 0;
    animation: v4-marquee var(--speed, 60s) linear infinite;
    will-change: transform;
}
.v4-voices__row--reverse { animation-direction: reverse; }
.v4-voices__row:hover { animation-play-state: paused; }
.v4-voice {
    width: clamp(300px, 34vw, 420px);
    flex-shrink: 0;
    border: 1px solid var(--v4-border);
    border-radius: var(--v4-radius-lg);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012));
    padding: 28px 30px;
    transition: border-color 0.3s ease, transform 0.4s var(--v4-ease);
}
.v4-voice:hover {
    border-color: var(--v4-border-accent);
    transform: translateY(-4px);
}
.v4-voice__delta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--v4-mono);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    margin-bottom: 16px;
    color: var(--v4-pass);
    background: rgba(52, 211, 153, 0.08);
    border: 1px solid rgba(52, 211, 153, 0.2);
    padding: 5px 12px;
    border-radius: var(--v4-radius-pill);
}
.v4-voice__quote {
    font-size: 0.98rem;
    line-height: 1.65;
    color: var(--v4-text-primary);
    margin: 0 0 22px;
}
.v4-voice__who {
    display: flex;
    align-items: center;
    gap: 12px;
}
.v4-voice__avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 700;
    color: #fff;
    background: var(--av, linear-gradient(135deg, #667eea, #764ba2));
    flex-shrink: 0;
}
.v4-voice__name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--v4-text-primary);
}
.v4-voice__role {
    font-size: 0.8rem;
    color: var(--v4-text-muted);
}
.v4-library {
    padding: 0 0 clamp(100px, 14vh, 200px);
    position: relative;
    z-index: 3;
}
.v4-library__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: clamp(40px, 6vh, 72px);
    flex-wrap: wrap;
}
.v4-library__all {
    color: var(--v4-text-secondary);
    text-decoration: none;
    font-size: 0.94rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color 0.25s ease, gap 0.3s var(--v4-ease);
}
.v4-library__all:hover { color: var(--v4-accent-light); gap: 14px; }
.v4-library__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.v4-card {
    position: relative;
    border: 1px solid var(--v4-border);
    border-radius: var(--v4-radius);
    padding: 26px 24px;
    text-decoration: none;
    background: var(--v4-surface-1);
    overflow: hidden;
    transition: transform 0.4s var(--v4-ease), border-color 0.3s ease, background 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 168px;
}
.v4-card::after {
    content: "↗";
    position: absolute;
    top: 18px;
    right: 20px;
    color: var(--v4-text-ghost);
    font-size: 0.9rem;
    transition: color 0.3s ease, transform 0.3s var(--v4-ease);
}
.v4-card:hover {
    transform: translateY(-5px);
    border-color: var(--v4-border-accent);
    background: var(--v4-surface-2);
}
.v4-card:hover::after {
    color: var(--v4-accent);
    transform: translate(3px, -3px);
}
.v4-card__kicker {
    font-family: var(--v4-mono);
    font-size: 0.64rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--v4-accent);
}
.v4-card__title {
    font-size: 1.04rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--v4-text-primary);
    line-height: 1.3;
}
.v4-card__text {
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--v4-text-muted);
}
@media (max-width: 1080px) {
.v4-library__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
.v4-library__grid { grid-template-columns: 1fr; }
}
.v4-finale {
    position: relative;
    padding: clamp(140px, 22vh, 280px) 0;
    text-align: center;
    overflow: clip;
    z-index: 3;
}
.v4-finale::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -38vmax;
    width: 86vmax;
    height: 60vmax;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center, rgba(255, 138, 76, 0.16), rgba(232, 97, 44, 0.05) 45%, transparent 68%);
    filter: blur(40px);
    pointer-events: none;
}
.v4-finale__kicker {
    font-family: var(--v4-mono);
    font-size: 0.78rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--v4-text-muted);
    margin-bottom: 28px;
}
.v4-finale__headline {
    font-size: clamp(2.6rem, 8vw, 7rem);
    font-weight: 800;
    line-height: 0.98;
    letter-spacing: -0.04em;
    margin: 0 0 30px;
}
.v4-finale__sub {
    max-width: 480px;
    margin: 0 auto clamp(36px, 5vh, 56px);
}
.v4-finale__note {
    margin-top: 22px;
    font-size: 0.85rem;
    color: var(--v4-text-muted);
}
.v4-footer {
    border-top: 1px solid var(--v4-border);
    padding: 48px 0 40px;
    position: relative;
    z-index: 3;
    background: var(--v4-ink);
}
.v4-footer__inner {
    display: flex;
    flex-direction: column;
    gap: 28px;
}
.v4-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
}
.v4-footer__link {
    color: var(--v4-text-muted);
    text-decoration: none;
    font-size: 0.86rem;
    transition: color 0.25s ease;
}
.v4-footer__link:hover { color: var(--v4-accent-light); }
.v4-footer__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.v4-footer__copy {
    color: var(--v4-text-ghost);
    font-size: 0.82rem;
    margin: 0;
}
.v4-footer__classic {
    color: var(--v4-text-muted);
    font-size: 0.82rem;
    text-decoration: none;
    border-bottom: 1px dotted var(--v4-border-strong);
}
.v4-footer__classic:hover { color: var(--v4-text-secondary); }
.v4-page {
    --accent-primary: var(--v4-accent);
    --accent-subtle: rgba(255, 138, 76, 0.07);
    --accent-subtle-border: rgba(255, 138, 76, 0.26);
    --accent-glow: rgba(255, 138, 76, 0.14);
    --text-primary: var(--v4-text-primary);
    --text-secondary: var(--v4-text-secondary);
    --text-muted: var(--v4-text-muted);
}
.v4-finale__scorer {
    max-width: 620px;
    margin: clamp(40px, 6vh, 64px) auto 0;
    text-align: left;
}
.v4-finale__scorer .isw-dropzone {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.03);
    border-color: var(--v4-border-strong);
}
.v4-finale__scorer .isw-dropzone:hover {
    border-color: var(--v4-border-accent);
}
@media (min-width: 1800px) {
:root { --v4-max: 1640px; }
.v4-display { font-size: clamp(9rem, 8vw, 12.5rem); }
.v4-h2 { font-size: clamp(4.6rem, 3.9vw, 6rem); }
.v4-lead { font-size: clamp(1.3rem, 1.05vw, 1.55rem); }
.v4-hero__sub { max-width: 680px; }
.v4-finale__headline { font-size: clamp(7rem, 6.2vw, 9.5rem); }
.v4-finale__sub { max-width: 600px; }
.v4-scan__stage { gap: clamp(96px, 8vw, 160px); }
.v4-doc { width: min(480px, 30vw); }
.v4-scan__readout { width: min(360px, 23vw); }
.v4-readout__grade { font-size: clamp(5rem, 4.4vw, 6.4rem); }
.v4-pillar { min-height: clamp(560px, 62vh, 720px); }
.v4-pillar__title { font-size: clamp(3.2rem, 2.9vw, 4.2rem); }
.v4-pillar__desc { font-size: clamp(1.12rem, 0.95vw, 1.3rem); }
.v4-stat__value { font-size: clamp(5.5rem, 4.8vw, 7.5rem); }
.v4-voice { width: clamp(420px, 26vw, 520px); }
.v4-card { min-height: 196px; padding: 32px 30px; }
.v4-card__title { font-size: 1.18rem; }
.v4-card__text { font-size: 0.95rem; }
}
.v4-skip {
    position: absolute;
    left: -9999px;
    z-index: 999;
    background: var(--v4-accent);
    color: var(--v4-on-accent);
    padding: 12px 20px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
}
.v4-skip:focus {
    left: 16px;
    top: 16px;
}
.v4-page a:focus-visible, .v4-page button:focus-visible {
    outline: 2px solid var(--v4-accent);
    outline-offset: 3px;
    border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
.v4-page *,
    .v4-page *::before,
    .v4-page *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
.v4-grain { display: none; }
.v4-reveal,
    .v4-split .v4-w > span,
    .v4-diff__row .v4-diff__cell,
    .v4-finding {
        opacity: 1 !important;
        transform: none !important;
    }
.v4-scan { height: auto; }
.v4-scan__sticky { position: static; height: auto; padding: 80px 0; }
.v4-doc__line.is-flagged,
    .v4-doc__line.is-fixed { transition: none; }
.v4-pillar { position: static; }
}

/* ===== absorbed from homepage-v6.css (cave PRD-4.1) ===== */
:root {
    /* canvas */
    --v6-paper: #F7F2E9;
    --v6-paper-deep: #F0EADC;
    --v6-sheet: #FDFBF5;
    --v6-ink: #1B1712;
    --v6-ink-soft: rgba(27, 23, 18, 0.74);
    --v6-ink-faint: rgba(27, 23, 18, 0.48);
    --v6-ink-ghost: rgba(27, 23, 18, 0.26);

    /* brand voice — the existing ResumeGeni orange family */
    --v6-orange: #FF8A4C;
    --v6-orange-deep: #E8612C;
    --v6-orange-text: #C2511C;       /* small-text safe on paper */
    --v6-orange-wash: rgba(232, 97, 44, 0.08);
    --v6-orange-glow: rgba(255, 138, 76, 0.35);
    --v6-on-orange: #1a0d06;

    /* editor's pen — markup only, never UI */
    --v6-red: #C2301A;
    --v6-red-line: rgba(194, 48, 26, 0.85);
    --v6-red-wash: rgba(194, 48, 26, 0.06);

    /* dark surface (masthead) — matches the product's night */
    --v6-night: #0E0E10;
    --v6-night-text: rgba(246, 241, 231, 0.94);
    --v6-night-soft: rgba(246, 241, 231, 0.66);

    --v6-rule: rgba(27, 23, 18, 0.15);
    --v6-rule-strong: rgba(27, 23, 18, 0.32);

    --v6-display: "Fraunces", ui-serif, "New York", Georgia, serif;
    --v6-sans: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
    --v6-mono: "SF Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    --v6-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --v6-stamp: cubic-bezier(0.18, 1.6, 0.4, 1);

    --v6-max: 1200px;
}
.v6-container {
    max-width: var(--v6-max);
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 48px);
}
.v6-h2 {
    font-family: var(--v6-display);
    font-size: clamp(2rem, 4.4vw, 3.6rem);
    font-weight: 600;
    font-variation-settings: "opsz" 80;
    line-height: 1.08;
    letter-spacing: -0.008em;
    margin: 0;
}
.v6-lead {
    font-size: clamp(1.02rem, 1.4vw, 1.2rem);
    line-height: 1.7;
    color: var(--v6-ink-soft);
    margin: 0;
}
.v6-kicker {
    font-family: var(--v6-sans);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--v6-ink-faint);
    margin: 0 0 26px;
    display: flex;
    align-items: center;
    gap: 14px;
}
.v6-kicker::before, .v6-kicker--rule::after {
    content: "";
    height: 1px;
    width: 34px;
    background: var(--v6-orange-deep);
}
.v6-kicker--center { justify-content: center; }
.v6-orangeink {
    color: var(--v6-orange-deep);
    font-style: italic;
}
.v6-redink {
    color: var(--v6-red);
    font-style: italic;
}
.v6-reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.8s ease, transform 1s var(--v6-ease);
    transition-delay: var(--d, 0ms);
}
.v6-reveal.is-in {
    opacity: 1;
    transform: none;
}
@keyframes v6-slam {
    0%   { opacity: 0; transform: rotate(-9deg) scale(2.6); }
    60%  { opacity: 1; transform: rotate(-9deg) scale(0.94); }
    100% { opacity: 0.9; transform: rotate(-9deg) scale(1); }
}
.v6-edit__strike {
    position: absolute;
    left: -2%;
    top: 54%;
    width: 104%;
    height: 0.075em;
    background: var(--v6-red-line);
    border-radius: 2px;
    transform: scaleX(0) rotate(-1.2deg);
    transform-origin: left center;
    transition: transform 0.7s var(--v6-ease);
    transition-delay: var(--strike-delay, 900ms);
}
.is-in .v6-edit__strike, .v6-hero.is-in .v6-edit__strike { transform: scaleX(1) rotate(-1.2deg); }
.v6-section {
    padding: clamp(90px, 13vh, 170px) 0;
    position: relative;
}
.v6-section--rule { border-top: 1px solid var(--v6-rule); }
.v6-section__head {
    max-width: 800px;
    margin-bottom: clamp(48px, 7vh, 88px);
}
.v6-markup__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(220px, 1fr);
    gap: clamp(28px, 4vw, 64px);
    align-items: start;
}
.v6-sheet {
    background: var(--v6-sheet);
    border: 1px solid var(--v6-rule);
    border-radius: 3px;
    box-shadow:
        0 1px 2px rgba(27, 23, 18, 0.06),
        0 12px 40px -12px rgba(27, 23, 18, 0.18);
    padding: clamp(26px, 4vw, 56px);
    position: relative;
    transform: rotate(-0.4deg);
}
.v6-sheet__name {
    font-family: var(--v6-display);
    font-size: clamp(1.3rem, 2.2vw, 1.8rem);
    font-weight: 640;
    margin: 0 0 4px;
}
.v6-sheet__contact {
    font-size: 0.8rem;
    color: var(--v6-ink-faint);
    margin: 0 0 22px;
}
.v6-sheet__rule {
    height: 1px;
    background: var(--v6-rule);
    margin: 20px 0;
}
.v6-sheet__heading {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--v6-ink-soft);
    margin: 0 0 10px;
}
.v6-sheet__line {
    font-size: clamp(0.86rem, 1.1vw, 0.96rem);
    line-height: 1.62;
    margin: 0 0 8px;
    color: var(--v6-ink-soft);
    position: relative;
}
.v6-sheet__cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 22px;
    font-size: clamp(0.82rem, 1vw, 0.9rem);
    color: var(--v6-ink-soft);
    position: relative;
    padding: 6px 4px;
}
.v6-mark { position: relative; }
.v6-mark__circle {
    position: absolute;
    inset: -7px -12px;
    pointer-events: none;
}
.v6-mark__circle ellipse, .v6-mark__circle path {
    fill: none;
    stroke: var(--v6-red-line);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: var(--len, 400);
    stroke-dashoffset: var(--len, 400);
    transition: stroke-dashoffset 0.9s var(--v6-ease);
    transition-delay: var(--d, 0ms);
}
.is-in .v6-mark__circle ellipse, .is-in .v6-mark__circle path { stroke-dashoffset: 0; }
.v6-mark__underline {
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 2px;
    background: var(--v6-red-line);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.7s var(--v6-ease);
    transition-delay: var(--d, 0ms);
}
.is-in .v6-mark__underline { transform: scaleX(1); }
.v6-notes {
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 3vh, 34px);
    position: sticky;
    top: 120px;
}
.v6-note {
    font-family: var(--v6-display);
    font-style: italic;
    font-size: clamp(0.98rem, 1.3vw, 1.12rem);
    line-height: 1.5;
    color: var(--v6-red);
    border-left: 2px solid rgba(194, 48, 26, 0.35);
    padding-left: 16px;
    opacity: 0;
    transform: translateX(18px);
    transition: opacity 0.7s ease, transform 0.9s var(--v6-ease);
    transition-delay: var(--d, 0ms);
}
.v6-note.is-in {
    opacity: 1;
    transform: none;
}
.v6-note__ref {
    font-family: var(--v6-mono);
    font-style: normal;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    color: var(--v6-ink-faint);
    display: block;
    margin-bottom: 4px;
}
@media (max-width: 880px) {
.v6-markup__layout { grid-template-columns: 1fr; }
.v6-notes { position: static; }
.v6-sheet { transform: none; }
}
.v6-rewrite__pairs {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--v6-rule);
}
.v6-pair {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: clamp(16px, 3vw, 40px);
    padding: clamp(30px, 4.5vh, 52px) 0;
    border-bottom: 1px solid var(--v6-rule);
}
.v6-pair__num {
    font-family: var(--v6-mono);
    font-size: 0.78rem;
    color: var(--v6-orange-text);
    padding-top: 10px;
}
.v6-pair__old {
    font-family: var(--v6-display);
    font-size: clamp(1.15rem, 2vw, 1.7rem);
    font-weight: 480;
    color: var(--v6-ink-ghost);
    position: relative;
    display: inline-block;
    width: fit-content;
    margin: 0 0 12px;
}
.v6-pair__old .v6-edit__strike {
    --strike-delay: 200ms;
    top: 56%;
}
.v6-pair__new {
    font-family: var(--v6-display);
    font-size: clamp(1.3rem, 2.4vw, 2rem);
    font-weight: 640;
    line-height: 1.3;
    margin: 0;
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1.1s var(--v6-ease) 0.55s;
}
.v6-pair.is-in .v6-pair__new { clip-path: inset(0 0 0 0); }
.v6-pair__new em {
    font-style: normal;
    background-image: linear-gradient(transparent 78%, rgba(255, 138, 76, 0.45) 78%);
}
.v6-pair__why {
    font-size: 0.85rem;
    color: var(--v6-ink-faint);
    margin: 12px 0 0;
    max-width: 60ch;
}
@media (max-width: 640px) {
.v6-pair { grid-template-columns: 1fr; gap: 8px; }
}
.v6-masthead .v6-kicker { color: rgba(246, 241, 231, 0.5); }
.v6-masthead .v6-lead { color: var(--v6-night-soft); }
@media (prefers-reduced-motion: reduce) {
.v6-reveal,
    .v6-note,
    .v6-edit__new,
    .v6-edit__caret { opacity: 1 !important; transform: none !important; }
.v6-edit__strike { transform: scaleX(1) rotate(-1.2deg) !important; }
.v6-pair__new { clip-path: none !important; }
.v6-mark__circle ellipse,
    .v6-mark__circle path { stroke-dashoffset: 0 !important; }
.v6-mark__underline { transform: scaleX(1) !important; }
}
@media (min-width: 1800px) {
:root { --v6-max: 1440px; }
.v6-h2 { font-size: clamp(3.6rem, 3.2vw, 4.8rem); }
.v6-lead { font-size: clamp(1.2rem, 1vw, 1.4rem); }
}

/* ===== v7 layer (original) ===== */
/* ========================================
   ResumeGeni Homepage V7 — "The Combined Cut" (/new4)

   Synthesis of the approved pieces:
   - /new's night: calm hero, scan scrollytelling, pillars,
     difference ledger, receipts, library, finale
   - /new3's paper: the markup + rewrite acts, kept as a
     paper chapter — the resume IS the paper inside the
     machine's night
   - /'s SEO spine: the evidence-library prose and link
     grids, restyled for the night

   Loads on top of homepage-v4.css + homepage-v6.css.
   This file only adds the hero calm-down, the paper seams,
   and the SEO prose treatment.
   ======================================== */

/* ========================================
   ONE DISPLAY VOICE — Fraunces narrates everywhere.
   Inter remains the utility face (body, buttons, UI).
   The paper chapter stops being a style switch and
   becomes the same narrator picking up a document.
   ======================================== */

.v4-display,
.v4-h2,
.v4-h3,
.v4-finale__headline,
.v4-pillar__title,
.v4-stat__value,
.v7-rescan__head .v4-h2 {
    font-family: var(--v6-display);
    font-weight: 650;
    /* low opsz + no SOFT = sturdy strokes; the hairline cut of
       opsz 110 was illegible reversed out of the dark */
    font-variation-settings: "opsz" 48, "SOFT" 0, "WONK" 0;
    letter-spacing: -0.004em;
}

.v4-display { line-height: 1.08; font-size: clamp(2.7rem, 8.6vw, 7.2rem); }
.v4-h2 { line-height: 1.1; }
.v4-finale__headline { line-height: 1.06; }

/* the word-cascade mask was tuned for the sans — Fraunces descenders
   (g, y) and the apostrophe overhang need a roomier window */
.v4-split .v4-w {
    padding: 0.1em 0.08em 0.22em 0.04em;
    margin: -0.1em -0.08em -0.22em -0.04em;
}

/* ========================================
   HERO — calm. Type, one glow, the door. No debris.
   ======================================== */

.v7-hero {
    position: relative;
    min-height: 96svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 150px 0 110px;
    overflow: clip;
}

/* a single quiet glow, low and warm */
.v7-hero::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -42vmax;
    width: 90vmax;
    height: 60vmax;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center, rgba(255, 138, 76, 0.13), rgba(232, 97, 44, 0.04) 45%, transparent 68%);
    filter: blur(50px);
    pointer-events: none;
}

.v7-hero__grid {
    position: relative;
    z-index: 3;
}

/* the prop's lighting tells its state: neutral before the story,
   red under the machine, green when healed (cave PRD-3.2) */
:root {
    --v7-glow-neutral: rgba(255, 255, 255, 0.08);
    --v7-glow-danger: rgba(239, 68, 68, 0.22);
    --v7-glow-healed: rgba(52, 211, 153, 0.25);
}

/* ========================================
   HERO SPLIT STAGE — copy left, the document
   floating in 3D on the right. Tilt rides the
   engine's lerped pointer vars (--v4-mx/--v4-my);
   no extra JS.
   ======================================== */

.v7-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
    gap: clamp(32px, 5vw, 80px);
}

/* display type sized to its half-width column, not the full stage */
.v7-hero__copy .v4-display {
    font-size: clamp(2.6rem, 5vw, 4.9rem);
}

@media (max-width: 980px) {
    .v7-hero__copy .v4-display {
        font-size: clamp(2.5rem, 8.4vw, 4.6rem);
    }
}

.v7-stage {
    perspective: 1400px;
    display: flex;
    justify-content: center;
}

.v7-doc3d {
    position: relative;
    width: min(380px, 38vw);
    transform-style: preserve-3d;
    transform:
        rotateY(calc(var(--v4-mx, 0) * -9deg - 13deg))
        rotateX(calc(var(--v4-my, 0) * 7deg + 5deg));
    will-change: transform;
    /* no idle keyframe: a perpetually-animating 3D layer never settles,
       so its text is resampled every frame (the aliasing Blake saw).
       Life comes from the breathing aura below, which lives on its own
       layer and never touches the text raster. */
}

/* breathing light behind the document; opacity only */
.v7-stage::before {
    content: "";
    position: absolute;
    width: min(420px, 42vw);
    aspect-ratio: 1 / 1.2;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(255, 138, 76, 0.16), transparent 65%);
    filter: blur(30px);
    animation: v7-aura 6s ease-in-out infinite;
    pointer-events: none;
}

@keyframes v7-aura {
    0%, 100% { opacity: 0.55; }
    50% { opacity: 1; }
}

/* depth: ghost sheets behind the document */
.v7-doc3d__ghost {
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
}

.v7-doc3d__ghost--near { transform: translateZ(-55px) translate(16px, 14px); }
.v7-doc3d__ghost--far  { transform: translateZ(-110px) translate(34px, 30px); opacity: 0.6; }

.v7-doc3d__sheet {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.12),
        0 40px 90px -24px rgba(0, 0, 0, 0.85),
        0 0 130px -30px var(--v4-accent-glow);
}

/* the machine's gaze: a periodic holographic sweep */
.v7-doc3d__shimmer {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(
        100deg,
        transparent 30%,
        rgba(255, 170, 110, 0.16) 46%,
        rgba(255, 255, 255, 0.22) 50%,
        rgba(255, 170, 110, 0.16) 54%,
        transparent 70%
    );
    border-radius: inherit;
    background-size: 280% 100%;
    animation: v7-shimmer 7.5s cubic-bezier(0.45, 0, 0.2, 1) infinite;
}

@keyframes v7-shimmer {
    0%, 62% { background-position: 130% 0; opacity: 0.85; }
    63% { opacity: 1; }
    88%, 100% { background-position: -50% 0; opacity: 0.85; }
}

/* the lines act 2 will flag, faintly pre-lit */
.v7-doc3d__mark {
    background: rgba(239, 68, 68, 0.07);
    border-radius: 3px;
    padding: 1px 4px;
}

/* the verdict, floating off the corner in space */
.v7-doc3d__chip {
    position: absolute;
    right: -26px;
    bottom: 38px;
    transform: translateZ(70px);
    display: flex;
    align-items: baseline;
    gap: 8px;
    background: rgba(10, 10, 12, 0.85);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(239, 68, 68, 0.35);
    border-radius: 12px;
    padding: 10px 16px;
    box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.8), 0 0 36px -8px rgba(239, 68, 68, 0.35);
}

.v7-doc3d__chip-grade {
    font-family: var(--v6-display);
    font-weight: 700;
    font-size: 1.7rem;
    line-height: 1;
    color: var(--v4-fail);
}

.v7-doc3d__chip-score {
    font-family: var(--v4-mono);
    font-size: 0.95rem;
    color: var(--v4-text-secondary);
}

.v7-doc3d__chip-score small { color: var(--v4-text-muted); }

@media (max-width: 980px) {
    .v7-hero { min-height: 0; padding: 120px 0 72px; }
    .v7-hero__grid { grid-template-columns: 1fr; gap: 0; }
    .v7-stage {
        margin-top: clamp(36px, 6vh, 56px);
        perspective-origin: 50% 20%;
    }
    .v7-doc3d {
        width: min(290px, 72vw);
        transform: rotateY(-8deg) rotateX(3deg);
    }
    .v7-doc3d__ghost--near { transform: translateZ(-55px) translate(12px, 10px); }
    .v7-doc3d__ghost--far { transform: translateZ(-110px) translate(24px, 20px); }
    .v7-doc3d__chip {
        right: -6px;
        bottom: 28px;
        padding: 8px 13px;
    }
    .v7-doc3d__chip-grade { font-size: 1.4rem; }
    .v7-doc3d__chip-score { font-size: 0.85rem; }
}

@media (prefers-reduced-motion: reduce) {
    .v7-doc3d { animation: none; transform: rotateY(-12deg) rotateX(4deg); }
    .v7-doc3d__shimmer { animation: none; opacity: 0; }
}

/* under the machine, the document sits in danger light */
.v4-scan .v7-doc {
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.1),
        0 30px 80px -20px rgba(0, 0, 0, 0.8),
        0 0 120px -30px var(--v7-glow-danger);
}

/* ========================================
   THE PROP — Jordan Avery's resume, everywhere.
   The scan doc, the desk sheet, and the healed copy
   are the same document at three moments.
   ======================================== */

.v7-doc {
    background: linear-gradient(180deg, #fdfdfc 0%, #f3f2ef 100%);
    color: #3a3a40;
    font-family: var(--v6-display);
    font-size: clamp(0.44rem, 1.15vw, 0.68rem);
    line-height: 1.5;
    padding: clamp(14px, 2.6vw, 26px);
}

.v7-doc__name {
    font-weight: 640;
    font-size: 1.9em;
    color: #1c2026;
    margin: 0 0 1px;
}

.v7-doc__contact {
    font-family: var(--v6-sans);
    font-size: 0.86em;
    color: #989aa1;
    margin: 0 0 1.4em;
}

.v7-doc__heading {
    font-family: var(--v6-sans);
    font-weight: 700;
    font-size: 0.78em;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #565d6b;
    margin: 1.5em 0 0.5em;
}

.v7-doc__rule {
    height: 1px;
    background: #e2e2dd;
    margin: 1.2em 0;
}

/* text lines keep the scan engine's hooks but render as type */
.v7-doc .v4-doc__line {
    height: auto;
    background: transparent;
    border-radius: 3px;
    margin-bottom: 0.45em;
    padding: 1px 4px;
}

.v7-doc .v4-doc__line.is-flagged {
    background: rgba(239, 68, 68, 0.13);
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.1);
}

.v7-doc .v4-doc__line.is-fixed {
    background: rgba(16, 163, 109, 0.12);
    box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.1);
}

.v7-doc__cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1.6em;
}

/* the healed copy — Geni's pen left orange traces */
.v7-doc--healed em {
    font-style: normal;
    background-image: linear-gradient(transparent 72%, rgba(255, 138, 76, 0.4) 72%);
}

/* ========================================
   PAPER CHAPTER — the resume inside the night
   ======================================== */

.v7-paper {
    position: relative;
    z-index: 3;
    background: var(--v6-paper);
    color: var(--v6-ink);
}

/* seams: a hairline of brand warmth where night meets paper */
.v7-paper::before,
.v7-paper::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--v6-orange-deep), var(--v6-orange), var(--v6-orange-deep));
    opacity: 0.85;
}

.v7-paper::before { top: 0; }
.v7-paper::after { bottom: 0; }

/* chapter intro line on the paper */
.v7-paper__intro {
    text-align: center;
    padding-top: clamp(70px, 10vh, 120px);
}

.v7-paper__intro .v6-kicker { justify-content: center; }

.v7-paper__intro-note {
    font-family: var(--v6-display);
    font-style: italic;
    font-size: clamp(1.05rem, 1.5vw, 1.3rem);
    color: var(--v6-ink-soft);
    max-width: 52ch;
    margin: 0 auto;
}

/* tighten the two paper acts so the chapter reads as one piece */
.v7-paper .v6-section { padding-top: clamp(60px, 9vh, 110px); }
.v7-paper .v6-section--rule { border-top: none; }

/* ========================================
   SEO SPINE — the homepage's evidence prose, at night
   ======================================== */

.v7-spine {
    margin-top: clamp(70px, 10vh, 120px);
}

.v7-spine__block {
    max-width: 760px;
    margin-bottom: clamp(40px, 6vh, 64px);
}

.v7-spine__label {
    font-family: var(--v4-mono);
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--v4-accent);
    margin: 0 0 14px;
}

.v7-spine__title {
    font-size: clamp(1.4rem, 2.2vw, 1.9rem);
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.2;
    margin: 0 0 16px;
    color: var(--v4-text-primary);
}

.v7-spine__text {
    font-size: 0.98rem;
    line-height: 1.75;
    color: var(--v4-text-secondary);
    margin: 0 0 14px;
}

.v7-spine__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: clamp(48px, 7vh, 80px);
}

@media (max-width: 1080px) {
    .v7-spine__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
    .v7-spine__grid { grid-template-columns: 1fr; }
}

/* ========================================
   DESK CODA — the Difference, folded into the
   Rewrite (cave PRD-2.2). Paper register.
   ======================================== */

.v7-coda {
    margin-top: clamp(56px, 8vh, 90px);
    border-top: 1px solid var(--v6-rule);
    padding-top: clamp(36px, 5vh, 56px);
}

.v7-coda__title {
    font-family: var(--v6-display);
    font-weight: 640;
    font-size: clamp(1.4rem, 2.4vw, 2rem);
    letter-spacing: -0.008em;
    margin: 0 0 26px;
}

.v7-coda__rows {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 760px;
}

.v7-coda__row {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: clamp(14px, 3vw, 36px);
    align-items: baseline;
    padding: 12px 0;
    border-bottom: 1px solid var(--v6-rule);
}

.v7-coda__row:last-child { border-bottom: none; }

.v7-coda__them {
    font-size: 0.95rem;
    color: var(--v6-ink-faint);
    text-decoration: line-through;
    text-decoration-color: rgba(194, 48, 26, 0.55);
    text-decoration-thickness: 1.5px;
}

.v7-coda__us {
    font-family: var(--v6-display);
    font-weight: 560;
    font-size: clamp(0.98rem, 1.3vw, 1.1rem);
    color: var(--v6-ink);
}

@media (max-width: 640px) {
    .v7-coda__row { grid-template-columns: 1fr; gap: 6px; }
}

/* ========================================
   ACT 2 — diagnose mode: shorter scene, the
   verdict is a beat, not the whole movie
   ======================================== */

.v4-scan[data-scan-mode="diagnose"] { height: 300vh; }

@media (max-width: 880px) {
    .v4-scan[data-scan-mode="diagnose"] { height: 260vh; }
}

/* ========================================
   ACT 4 — THE PAYOFF (re-scan)
   ======================================== */

.v7-rescan {
    position: relative;
    z-index: 3;
    padding: clamp(110px, 16vh, 200px) 0;
    text-align: center;
    overflow: clip;
}

.v7-rescan::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 70vmax;
    height: 46vmax;
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse at center, rgba(52, 211, 153, 0.05), transparent 65%);
    filter: blur(40px);
    pointer-events: none;
}

.v7-rescan__head { margin-bottom: clamp(36px, 5vh, 56px); }

/* visual rhyme with Act 2: the document beside its readout */
.v7-rescan__stage {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(28px, 5vw, 72px);
    text-align: left;
}

.v7-rescan__stage .v7-doc {
    width: min(340px, 74vw);
    border-radius: 12px;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.1),
        0 30px 80px -20px rgba(0, 0, 0, 0.8),
        0 0 110px -30px var(--v7-glow-healed);
}

/* the desk dialogue survives phones: inline notes pair with their
   blocks; the aside column yields (cave PRD-3.3) */
.v7-note--inline { display: none; }

@media (max-width: 880px) {
    .v6-notes { display: none; }

    .v7-note--inline {
        display: block;
        margin: 10px 0 18px;
        font-size: 0.95rem;
    }

    /* the two-column skills grid must fit the sheet on phones */
    .v6-sheet__cols {
        gap: 4px 12px;
        font-size: 0.78rem;
    }

    /* an ellipse drawn around a wrapped inline span degrades to a
       stray squiggle; the inline note carries the message on phones */
    .v6-sheet__line .v6-mark__circle { display: none; }
}

.v7-rescan__card {
    position: relative;
    width: min(380px, 80vw);
    display: flex;
    flex-direction: column;
    gap: 22px;
}

/* v4 hides scan findings on mobile; the payoff keeps them everywhere */
.v7-rescan .v4-readout__findings { display: flex; }

/* resolution is Geni's doing — findings resolve in brand orange */
.v7-rescan .v4-finding.is-resolved .v4-finding__dot { background: var(--v4-accent); }
.v7-rescan .v4-finding__fix { color: var(--v4-accent); }

.v7-rescan__note {
    max-width: 520px;
    margin: clamp(32px, 5vh, 48px) auto 0;
}

@media (max-width: 880px) {
    .v7-rescan__stage { flex-direction: column; gap: 26px; }
}

/* ========================================
   FINALE — the empty readout, awaiting your file
   ======================================== */

.v7-await {
    max-width: 380px;
    margin: clamp(36px, 5vh, 52px) auto 0;
    text-align: left;
}

.v7-await .v4-readout__grade {
    color: var(--v4-text-muted);
    font-family: var(--v6-display);
    font-weight: 600;
}

.v7-await .v4-readout__score { color: var(--v4-text-muted); }
.v7-await .v4-readout__bar-fill { width: 0; }

.v7-await__hint {
    margin: 16px 0 0;
    font-family: var(--v4-mono);
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--v4-text-muted);
    animation: v7-await-pulse 2.6s ease-in-out infinite;
}

@keyframes v7-await-pulse {
    0%, 100% { opacity: 0.55; }
    50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .v7-await__hint { animation: none; opacity: 0.8; }
}

/* ========================================
   DESK — margin notes light their marks
   ======================================== */

.v6-note[data-mark] { cursor: default; }

.v6-mark.is-hot { background: rgba(194, 48, 26, 0.08); border-radius: 3px; }

.v6-mark.is-hot .v6-mark__circle ellipse,
.v6-mark.is-hot .v6-mark__circle path { stroke-width: 3; }

.v6-mark.is-hot .v6-mark__underline { height: 3px; }

/* finale widget button: same motion language as the rest of the page.
   Scoped to .v4-page so the shared widget is untouched elsewhere. */
.v4-page .isw-btn {
    transition: background 0.3s ease, box-shadow 0.45s var(--v4-ease), filter 0.2s ease;
    box-shadow: 0 6px 20px -8px rgba(255, 138, 76, 0.35);
}

.v4-page .isw-btn:hover {
    transform: none;
    box-shadow:
        0 0 0 1px rgba(255, 200, 150, 0.4) inset,
        0 8px 28px -6px rgba(255, 138, 76, 0.55);
    filter: brightness(1.05);
}

.v4-page .isw-btn:active { filter: brightness(0.94); }

/* ========================================
   PLACEMENT NOTES
   ======================================== */

/* fake-quote flag: visually identical, semantically marked */
.v7-voices--placeholder { /* real quotes pending — populated by Blake */ }