/* ═══════════════════════════════════════════════════════════════════
   VERTEX · C+ production system (Phase 6A.2B proof)
   Ported from design-lab/phase-6a1/c-precision-in-motion, adapted to
   the production palette (paper #FAF8F2, ink #0A0A0A, yellow #F4DC32)
   and loaded ONLY by the proof surfaces. Class names are C's own, so
   they never collide with the fmh2/vp/vh estate vocabulary.
   Motion is transform + opacity only. Nothing draws itself on.
   ═══════════════════════════════════════════════════════════════════ */

html.vx-c {
  --vx-paper: #FAF8F2;
  --vx-ink: #0A0A0A;
  --vx-graphite: #2A2926;
  --vx-mid: #6B675E;
  --vx-rule: rgba(10, 10, 10, .16);
  --vx-rule-soft: rgba(10, 10, 10, .08);
  --vx-on-ink: rgba(250, 248, 242, .86);
  --vx-dim: rgba(250, 248, 242, .52);
  --vx-inkrule: rgba(250, 248, 242, .16);
  --vx-yellow: #F4DC32;

  --vx-ease: cubic-bezier(.2, 0, .38, .9);
  --vx-ease-in: cubic-bezier(0, 0, .38, .9);
  --vx-ease-out: cubic-bezier(.2, 0, 1, .9);
  --vx-t-hover: 120ms;
  --vx-t-short: 180ms;
  --vx-t-long: 240ms;
  --vx-t-flip: 160ms;
  --vx-t-roll: 420ms;

  --vx-gut: 24px;
  --vx-hd: 56px;
  --vx-sans: Archivo, "Archivo Fallback", "Helvetica Neue", Arial, sans-serif;
  --vx-mono: "Martian Mono", "Martian Mono Fallback", ui-monospace, "SF Mono", Menlo, monospace;
}
@media (min-width: 768px) { html.vx-c { --vx-gut: 48px; } }
@media (min-width: 1100px) { html.vx-c { --vx-gut: 64px; --vx-hd: 72px; } }

@font-face { font-family: "Archivo Fallback"; src: local("Helvetica Neue"), local("Arial"); size-adjust: 96%; ascent-override: 92%; descent-override: 24%; }
@font-face { font-family: "Martian Mono Fallback"; src: local("Menlo"), local("Courier New"); size-adjust: 116%; }

/* base: only on the proof pages, on top of the fmh2 shell */
html.vx-c body.fmh2 { font-family: var(--vx-sans); font-variation-settings: "wdth" 100, "wght" 400; color: var(--vx-graphite); }
html.vx-c { scroll-behavior: smooth; }
html.vx-c .fmh2 ::selection { background: var(--vx-ink); color: var(--vx-paper); }
html.vx-c .fmh2 :focus-visible { outline: 2px solid var(--vx-ink); outline-offset: 2px; }
html.vx-c .fmh2.on-ink :focus-visible { outline-color: var(--vx-paper); }
[hidden] { display: none !important; }

/* ── named cuts: precision typography (Archivo + Martian Mono) ── */
.vx-c .t-h1 { font-family: var(--vx-sans); font-variation-settings: "wdth" 84, "wght" 500; font-weight: 500; font-stretch: 84%; font-size: clamp(34px, 9.6vw, 40px); line-height: .96; letter-spacing: -.025em; color: var(--vx-ink); }
.vx-c .t-h2 { font-family: var(--vx-sans); font-variation-settings: "wdth" 88, "wght" 500; font-weight: 500; font-stretch: 88%; font-size: clamp(26px, 6.8vw, 32px); line-height: 1; letter-spacing: -.02em; color: var(--vx-ink); }
.vx-c .t-body { font-family: var(--vx-sans); font-variation-settings: "wdth" 100, "wght" 400; font-size: 17px; line-height: 1.55; color: var(--vx-graphite); }
.vx-c .t-key { font-family: var(--vx-sans); font-variation-settings: "wdth" 92, "wght" 500; font-weight: 500; font-stretch: 92%; font-size: 16px; line-height: 1; }
.vx-c .m-label { font-family: var(--vx-mono); font-variation-settings: "wdth" 80, "wght" 500; font-weight: 500; font-stretch: 80%; font-size: 12px; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; font-variant-numeric: tabular-nums; color: var(--vx-mid); }
.vx-c .m-index { font-family: var(--vx-mono); font-variation-settings: "wdth" 100, "wght" 300; font-weight: 300; font-size: clamp(56px, 16vw, 72px); line-height: 1; font-variant-numeric: tabular-nums; }
.vx-c .m-reading { font-family: var(--vx-mono); font-variation-settings: "wdth" 75, "wght" 400; font-weight: 400; font-stretch: 75%; font-size: 12px; line-height: 1.3; letter-spacing: .06em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.vx-c .m-mark { font-family: var(--vx-mono); font-variation-settings: "wdth" 100, "wght" 600; font-weight: 600; font-size: 12px; line-height: 1.05; letter-spacing: -.01em; text-transform: uppercase; }
@media (min-width: 1100px) {
  .vx-c .t-h1 { font-size: min(6vw, 88px); line-height: .94; }
  .vx-c .t-body { font-size: 18px; line-height: 1.5; }
  .vx-c .m-index { font-size: min(8vw, 120px); }
  .vx-c .m-reading { font-size: 14px; font-variation-settings: "wdth" 90, "wght" 400; font-stretch: 90%; }
}

/* ── frame ── */
.vx-c .wrap { padding-left: var(--vx-gut); padding-right: var(--vx-gut); max-width: 1440px; margin: 0 auto; }

/* ── header ── */
.vx-c .hd { position: relative; z-index: 30; }
.vx-c .hd-in { display: flex; align-items: center; justify-content: space-between; height: var(--vx-hd); border-bottom: 1px solid var(--vx-rule); gap: 16px; }
.vx-c .wm { display: inline-block; text-decoration: none; color: var(--vx-ink); }
.vx-c .wm.m-mark { font-size: 12px; line-height: 1.05; }
.vx-c .menu { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 4px; color: var(--vx-ink); font-family: var(--vx-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.vx-c .hrail, .vx-c .hcta { display: none; }
@media (min-width: 1100px) {
  .vx-c .menu { display: none; }
  .vx-c .hrail { display: flex; align-items: stretch; gap: 28px; height: var(--vx-hd); }
  .vx-c .hri { display: flex; align-items: center; gap: 8px; height: 100%; text-decoration: none; color: var(--vx-mid); position: relative; text-transform: uppercase; letter-spacing: .08em; font-family: var(--vx-mono); font-size: 12px; }
  .vx-c .hri::before { content: ""; width: 1px; height: 9px; background: var(--vx-ink); flex: none; }
  .vx-c .hri .lbl { position: relative; display: flex; align-items: center; gap: 7px; height: 100%; }
  .vx-c .hri .lbl::before { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1.5px; background: var(--vx-ink); transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--vx-t-hover) var(--vx-ease); }
  .vx-c .hri:hover .lbl::before, .vx-c .hri:focus-visible .lbl::before, .vx-c .hri[aria-expanded="true"] .lbl::before { transform: scaleX(1); }
  .vx-c .hri.now { color: var(--vx-ink); }
  html:not(.js) .vx-c .hri.now .lbl::before { transform: scaleX(1); }
  .vx-c .hcta { display: inline-flex; align-items: center; height: 44px; padding: 0 18px; border: 1px solid var(--vx-ink); color: var(--vx-ink); text-decoration: none; font-family: var(--vx-sans); font-size: 15px; font-weight: 500; }
}
/* sub-rail */
.vx-c .sub { position: absolute; left: 0; right: 0; top: 100%; z-index: 25; background: var(--vx-paper); border-bottom: 1px solid var(--vx-rule); }
.vx-c .sub-in { display: flex; align-items: center; gap: 32px; height: 72px; }
.vx-c .sub-in .grow { flex: 1; }
.vx-c .sri { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--vx-ink); min-height: 44px; font-family: var(--vx-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.vx-c .sri::before { content: ""; width: 1px; height: 9px; background: var(--vx-ink); }
.vx-c .sub .all { color: var(--vx-ink); font-size: 15px; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; font-family: var(--vx-sans); }
.vx-c .sub .role-short { color: var(--vx-mid); font-family: var(--vx-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.js .vx-c .sub { transform: translateY(-6px); opacity: 0; transition: transform 150ms var(--vx-ease), opacity 150ms linear; }
.js .vx-c .sub.open { transform: none; opacity: 1; }

/* ── the cursor: the one yellow moving part ── */
.vx-c .cur { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 12; pointer-events: none; will-change: transform; transform: translate(0, 0) rotate(0deg); transition: transform var(--dur, 180ms) var(--vx-ease), opacity 120ms linear; }
.vx-c .cur .cl { position: absolute; left: 0; top: -.75px; width: 1px; height: 1.5px; background: var(--vx-yellow); transform-origin: 0 50%; transition: transform var(--dur, 180ms) var(--vx-ease); }
.vx-c .cur .ct { position: absolute; left: -.75px; top: -4.5px; width: 1.5px; height: 9px; background: var(--vx-yellow); }
.vx-c .cur .tb { transition: transform var(--dur, 180ms) var(--vx-ease); }
.vx-c .cur.off { opacity: 0; }
html:not(.js) .vx-c .cur { display: none; }
.vx-c.dw-open .cur { visibility: hidden; }
.js .vx-c .ro .mark { visibility: hidden; }
.js .vx-c .ro .fig.marks-on .mark { visibility: visible; }

/* ── hero: the instrument ── */
.vx-c .hero { position: relative; padding-top: calc(var(--vx-hd) + 28px); }
.vx-c .pos { display: block; }
.vx-c .pos .br { display: block; }
.vx-c .hero .t-h1 { margin-top: 12px; }
.vx-c .hero .lede { margin-top: 12px; max-width: 34em; }
.vx-c .hero .role { margin-top: 14px; }
.vx-c .rail-lbl { margin-top: 16px; }
.vx-c .role { font-size: 16px; line-height: 1.4; color: var(--vx-graphite); }

.vx-c .rail { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--vx-rule); border-bottom: 1px solid var(--vx-rule); margin-top: 8px; }
.vx-c .rail::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; pointer-events: none;
  background-image: repeating-linear-gradient(90deg, var(--vx-rule) 0 1px, transparent 1px 40px), repeating-linear-gradient(90deg, var(--vx-rule-soft) 0 1px, transparent 1px 8px);
  background-size: auto 6px, auto 3px; background-position: 0 0, 0 100%; background-repeat: repeat-x; }
.vx-c .ri { display: flex; align-items: stretch; min-height: 56px; padding: 0 4px; text-decoration: none; color: var(--vx-mid); position: relative; }
.vx-c .ri .lbl { position: relative; display: flex; align-items: center; gap: 8px; }
.vx-c .ri .lbl::before { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1.5px; background: var(--vx-ink); transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--vx-t-hover) var(--vx-ease); z-index: 2; }
.vx-c .ri:hover .lbl::before, .vx-c .ri:focus-visible .lbl::before, .vx-c .ri.on .lbl::before { transform: scaleX(1); }
.vx-c .ri.on .lbl::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4.75px; height: 9px; border-left: 1.5px solid var(--vx-ink); border-right: 1.5px solid var(--vx-ink); z-index: 2; }
.vx-c .ri.on, .vx-c .ri:hover { color: var(--vx-ink); }
.vx-c .ri.on .lbl { font-variation-settings: "wdth" 80, "wght" 600; font-weight: 600; }
.vx-c .ri .lbl .no { font-family: var(--vx-mono); font-variation-settings: "wdth" 80, "wght" 500; font-size: 12px; letter-spacing: .08em; }
.vx-c .ri .lbl .w { font-family: var(--vx-sans); font-variation-settings: "wdth" 92, "wght" 500; font-weight: 500; font-stretch: 92%; font-size: 16px; letter-spacing: 0; text-transform: none; line-height: 1; }
.vx-c .ri.on .lbl .w { font-variation-settings: "wdth" 92, "wght" 600; font-weight: 600; }
@media (min-width: 768px) { .vx-c .ri { padding: 0 8px; } .vx-c .ri .lbl { gap: 10px; } }

/* the readout plate: ink instrument */
.vx-c .ro { position: relative; margin-top: 12px; background: var(--vx-ink); color: var(--vx-on-ink); border: 1px solid var(--vx-inkrule); height: 240px; padding: 13px 14px; display: grid; grid-template-columns: minmax(0, 1fr) 72px; grid-template-rows: 90px minmax(0, 1fr); column-gap: 12px; row-gap: 8px; overflow: hidden; }
.vx-c .ro-idx { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; justify-content: flex-start; min-width: 0; }
.vx-c .ro-head { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; row-gap: 4px; }
.vx-c .ro .odo { display: inline-flex; height: 1em; overflow: hidden; color: var(--vx-on-ink); }
.vx-c .ro .odo .col { position: relative; height: 1em; }
.vx-c .ro .odo .strip { display: flex; flex-direction: column; }
.vx-c .ro .odo .strip span { display: block; height: 1em; }
.vx-c .ro .name { color: var(--vx-on-ink); position: relative; display: inline-block; }
.vx-c .ro .name.t-h2 { font-size: 26px; }
.vx-c .ro-sub { margin-top: 6px; color: var(--vx-dim); }
.vx-c .ro-cap { margin-top: 6px; color: var(--vx-dim); }
.vx-c .ro-fig { grid-column: 2; grid-row: 1; position: relative; width: 72px; height: 90px; justify-self: end; }
.vx-c .ro-fig .fig { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--vx-on-ink); }
.vx-c .ro-fig .fig .soft { color: var(--vx-dim); opacity: 1; }
.vx-c .ro-fig .fig .soft path { opacity: 1; }
.vx-c .ro-empty { position: absolute; inset: 0; border: 1px solid var(--vx-inkrule);
  background-image: repeating-linear-gradient(90deg, var(--vx-inkrule) 0 1px, transparent 1px 8px), repeating-linear-gradient(180deg, var(--vx-inkrule) 0 1px, transparent 1px 8px);
  background-size: auto 4px, 4px auto; background-position: 0 100%, 0 0; background-repeat: repeat-x, repeat-y; }
.vx-c .ro-rows { grid-column: 1 / -1; grid-row: 2; display: flex; flex-direction: column; min-width: 0; }
.vx-c .ro-row { position: relative; padding: 4px 0; border-top: 1px solid var(--vx-inkrule); min-height: 24px; overflow: hidden; color: var(--vx-on-ink); }
.vx-c .ro-row:first-child { border-top: 0; }
.vx-c .ro-row .rv { display: block; }
.vx-c .ro-row .rv-x { position: absolute; left: 0; right: 0; top: 4px; pointer-events: none; }
.vx-c .ro-pick { grid-column: 1 / -1; grid-row: 2; align-self: start; font-size: 16px; line-height: 1.5; color: var(--vx-on-ink); max-width: 30em; padding-top: 2px; }
.vx-c .ro[data-state="set"] .ro-empty, .vx-c .ro[data-state="set"] .ro-sub, .vx-c .ro[data-state="set"] .ro-unset, .vx-c .ro[data-state="set"] .ro-cap { display: none; }
.vx-c .ro[data-state="zero"] .ro-rows, .vx-c .ro[data-state="zero"] .ro-subline { display: none; }
@media (min-width: 768px) {
  .vx-c .ro:not(.m390) { height: 224px; padding: 18px 20px; grid-template-columns: 120px minmax(0, 1fr) 150px; grid-template-rows: minmax(0, 1fr); column-gap: 20px; }
  .vx-c .ro:not(.m390) .ro-idx { grid-column: 1; grid-row: 1; }
  .vx-c .ro:not(.m390) .ro-rows, .vx-c .ro:not(.m390) .ro-pick { grid-column: 2; grid-row: 1; }
  .vx-c .ro:not(.m390) .ro-fig { grid-column: 3; grid-row: 1; width: 150px; height: 188px; }
  .vx-c .ro:not(.m390) .name.t-h2 { font-size: 28px; }
}
@media (min-width: 1100px) {
  .vx-c .ro:not(.m390) { height: 280px; padding: 16px 24px; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .vx-c .ro:not(.m390) .ro-idx { grid-column: 1 / 4; }
  .vx-c .ro:not(.m390) .ro-rows, .vx-c .ro:not(.m390) .ro-pick { grid-column: 4 / 9; }
  .vx-c .ro:not(.m390) .ro-fig { grid-column: 10 / 13; width: 180px; height: 246px; justify-self: end; }
  .vx-c .ro:not(.m390) .ro-fig .fig { top: 0; left: 0; width: 180px; height: 225px; }
  .vx-c .ro:not(.m390) .ro-fig .ro-empty { height: 225px; inset: auto; top: 0; left: 0; right: 0; }
  .vx-c .ro:not(.m390) .name.t-h2 { font-size: 32px; }
  .vx-c .ro:not(.m390) .ro-row { padding: 12px 0; min-height: 42px; }
}
.vx-c .fig path, .vx-c .fig circle { vector-effect: non-scaling-stroke; }

/* the CTA */
.vx-c .cta { display: flex; align-items: stretch; height: 56px; width: 100%; background: var(--vx-ink); color: var(--vx-paper); text-decoration: none; margin-top: 16px; transition: transform 100ms var(--vx-ease); }
.vx-c .cta .cl { flex: 1; display: flex; align-items: center; padding: 0 20px; position: relative; overflow: hidden; }
.vx-c .cta .ca { width: 56px; flex: none; border-left: 1px solid var(--vx-inkrule); display: grid; place-items: center; color: var(--vx-yellow); }
.vx-c .cta .ca svg { width: 16px; height: 16px; }
.vx-c .cta:active { transform: scale(.985); }
@media (min-width: 768px) { .vx-c .cta { width: 360px; } }
@media (min-width: 1100px) {
  .vx-c .hero { padding-top: calc(var(--vx-hd) + 32px); }
  .vx-c .hero-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .vx-c .hero-head .hl { grid-column: 1 / 7; }
  .vx-c .hero-head .hr { grid-column: 8 / 13; padding-top: 28px; }
  .vx-c .hero .t-h1 { margin-top: 20px; }
  .vx-c .hero .lede { margin-top: 0; }
  .vx-c .hero .role { margin-top: 20px; max-width: 34em; }
  .vx-c .rail-lbl { margin-top: 30px; }
  .vx-c .ro { margin-top: 24px; }
  .vx-c .cta { margin-top: 32px; }
  .vx-c .hero-foot { padding-bottom: 48px; }
}

/* ── sections ── */
.vx-c .sec { padding-top: 64px; padding-bottom: 72px; }
.vx-c .sec-hd .t-h2 { max-width: 14em; }
.vx-c .sec-hd .lede { margin-top: 14px; max-width: 34em; }
@media (min-width: 1100px) { .vx-c .sec { padding-top: 96px; padding-bottom: 104px; } }

/* world plates: the spec grid */
.vx-c .spec { margin-top: 32px; display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--vx-rule); border-top: 1px solid var(--vx-rule); border-bottom: 1px solid var(--vx-rule); }
.vx-c .spec .cell { background: var(--vx-paper); padding: 20px 0 24px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.vx-c .spec .cell .t-h2 { font-size: 26px; }
.vx-c .spec .cell a.t-h2 { text-decoration: none; color: var(--vx-ink); }
.vx-c .spec .cell a.t-h2:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
/* world-plate heading links: the 26px heading is the visual; a 44px pseudo
   hit area widens the touch target without growing the plate, so the text,
   rhythm and plate dimensions are untouched (see mobile-qa's pseudo-hit-area
   exclusion). */
.vx-c .spec .cell a.t-h2 { position: relative; }
.vx-c .spec .cell a.t-h2::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 44px; }
.vx-c .spec .cell p { font-size: 16px; line-height: 1.5; max-width: 30em; }
.vx-c .spec .cell .m-label.foot { margin-top: auto; padding-top: 8px; }
@media (min-width: 768px) { .vx-c .spec { grid-template-columns: 1fr 1fr; } .vx-c .spec .cell { padding: 24px 24px 28px 0; } .vx-c .spec .cell + .cell { padding-left: 24px; } }
@media (min-width: 1100px) { .vx-c .spec { grid-template-columns: repeat(4, 1fr); } .vx-c .spec .cell { padding: 28px 24px 32px 24px; } .vx-c .spec .cell:first-child { padding-left: 0; } }

/* process rail + clinical line */
.vx-c .proc-wrap { margin-top: 36px; }
.vx-c .proc { position: relative; padding-left: 28px; }
.vx-c .proc::before { content: ""; position: absolute; left: 4px; top: 12px; bottom: 12px; width: 1px; background: var(--vx-rule); }
.vx-c .step { position: relative; padding: 14px 0 18px; }
.vx-c .step .lbl { position: relative; display: inline-block; color: var(--vx-ink); font-family: var(--vx-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.vx-c .step .lbl::before { content: ""; position: absolute; left: -28px; top: 50%; width: 9px; height: 1px; margin-top: -.5px; background: var(--vx-ink); }
.vx-c .step p { margin-top: 8px; font-size: 17px; line-height: 1.55; max-width: 34em; }
.vx-c .cline { position: relative; margin: 10px 0 10px -28px; padding: 10px 0 0 28px; border-top: 1px solid var(--vx-ink); color: var(--vx-ink); font-family: var(--vx-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.vx-c .cline::before { content: ""; position: absolute; left: 0; top: -5px; width: 9px; height: 9px; border-left: 1px solid var(--vx-ink); }
@media (min-width: 1100px) {
  .vx-c .proc-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .vx-c .proc-grid .sec-hd { grid-column: 1 / 6; }
  .vx-c .proc-grid .proc-wrap { grid-column: 6 / 13; margin-top: 0; }
  .vx-c .step p { font-size: 18px; line-height: 1.5; }
}

/* questions */
.vx-c .qs { margin-top: 32px; border-top: 1px solid var(--vx-rule); max-width: 46em; }
.vx-c .q { display: flex; align-items: flex-start; gap: 16px; min-height: 56px; padding: 16px 0; border-bottom: 1px solid var(--vx-rule-soft); cursor: pointer; }
.vx-c .q input { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; flex: none; margin: 3px 0 0; border: 1.5px solid var(--vx-ink); background: transparent; }
.vx-c .q input:checked { background: var(--vx-ink); }
.vx-c .q span { font-size: 17px; line-height: 1.5; color: var(--vx-graphite); }
.vx-c .qs-note { margin-top: 12px; }

/* close */
.vx-c .close { padding-top: 64px; padding-bottom: 80px; }
.vx-c .close .lede { margin-top: 14px; max-width: 34em; }
.vx-c .close .cta { margin-top: 28px; }
.vx-c .close .foot { margin-top: 20px; font-family: var(--vx-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--vx-mid); }
@media (min-width: 1100px) {
  .vx-c .close { padding-top: 96px; padding-bottom: 120px; }
  .vx-c .close-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .vx-c .close-grid .l { grid-column: 1 / 7; }
  .vx-c .close-grid .r { grid-column: 8 / 13; }
  .vx-c .close .cta { margin-top: 12px; }
}

/* footer, ink */
.vx-c .ft { background: var(--vx-ink); color: var(--vx-on-ink); padding: 48px 0 40px; }
.vx-c .ft .wm { color: var(--vx-paper); font-size: 34px; }
.vx-c .ft-grid { display: grid; grid-template-columns: 1fr; gap: 32px; }
.vx-c .ft .m-label { color: var(--vx-dim); }
.vx-c .ft-links { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 12px; }
.vx-c .ft-links a { text-decoration: none; color: var(--vx-on-ink); min-height: 44px; display: inline-flex; align-items: center; font-family: var(--vx-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.vx-c .ft p { font-size: 16px; line-height: 1.5; max-width: 44em; }
.vx-c .ft .role-short { margin-top: 24px; color: var(--vx-on-ink); }
@media (min-width: 1100px) { .vx-c .ft-grid { grid-template-columns: 2fr 3fr 3fr; gap: 24px; } }

/* drawer, ink, full screen */
.vx-c .dw { position: fixed; inset: 0; z-index: 50; background: var(--vx-ink); color: var(--vx-paper); overflow-y: auto; padding: 0 var(--vx-gut) 24px; }
.vx-c .dw-top { display: flex; align-items: center; justify-content: space-between; height: var(--vx-hd); border-bottom: 1px solid var(--vx-inkrule); }
.vx-c .dw-close { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; color: var(--vx-paper); font-family: var(--vx-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.vx-c .dw-list { margin-top: 8px; }
.vx-c .dw-li { position: relative; border-bottom: 1px solid var(--vx-inkrule); }
.vx-c .dw-row { display: flex; align-items: center; min-height: 56px; }
.vx-c .dw-row a { flex: 1; display: flex; align-items: center; gap: 12px; min-height: 56px; text-decoration: none; color: var(--vx-paper); font-family: var(--vx-mono); font-variation-settings: "wdth" 80, "wght" 500; font-weight: 500; font-size: 16px; letter-spacing: .06em; text-transform: uppercase; }
.vx-c .dw-row a .no { color: var(--vx-dim); font-size: 12px; letter-spacing: .08em; }
.vx-c .dw-plus { position: relative; width: 48px; height: 48px; flex: none; }
.vx-c .dw-plus::before, .vx-c .dw-plus::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--vx-paper); transform: translate(-50%, -50%); }
.vx-c .dw-plus::before { width: 15px; height: 1px; }
.vx-c .dw-plus::after { width: 1px; height: 15px; }
.vx-c .dw-plus[aria-expanded="true"]::after { display: none; }
.vx-c .dw-sub { padding: 0 0 12px 30px; }
.vx-c .dw-sub a { display: flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--vx-on-ink); font-size: 16px; }
.vx-c .dw-sub .orient { font-size: 15px; line-height: 1.5; color: var(--vx-dim); padding: 4px 0 8px; max-width: 30em; }
.vx-c .dw-li.now::before { content: ""; position: absolute; left: calc(-1 * var(--vx-gut) / 2 - .75px); top: 16px; bottom: 16px; width: 1.5px; background: var(--vx-yellow); }
.vx-c .dw-li.now::after { content: ""; position: absolute; left: calc(-1 * var(--vx-gut) / 2 - 4.5px); top: 15.25px; bottom: 15.25px; width: 9px; border-top: 1.5px solid var(--vx-yellow); border-bottom: 1.5px solid var(--vx-yellow); }
.vx-c .dw-foot { margin-top: 24px; color: var(--vx-dim); }
.vx-c .dw-foot .role { color: var(--vx-on-ink); margin-top: 8px; }
body.vx-c.dw-open { overflow: hidden; }

/* ── reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .vx-c .cur, .vx-c .cur .cl, .vx-c .cur .tb, .vx-c .ro .odo .strip, .vx-c .sub, .vx-c .cta, .vx-c .ri .lbl::before, .vx-c .hri .lbl::before { transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   C-RESTYLE OF THE EXISTING ESTATE SHELL (proof pages only)
   The fmh2/vp/vh markup stays byte-identical; these rules re-present
   the homepage sections and the procedure/hub shell in C's language:
   precision type, ruled sections, the ink readout, the numbered world.
   ═══════════════════════════════════════════════════════════════════ */

/* retire the marker-pen highlight entirely on proof pages */
html.vx-c .f2-hl::before { display: none; }
html.vx-c .f2-hl { white-space: normal; }

/* section headings: Archivo, no Fraunces voice */
html.vx-c .f2-display, html.vx-c .f2-d1, html.vx-c .f2-d2, html.vx-c .f2-d3 { font-family: var(--vx-sans); font-variation-settings: "wdth" 84, "wght" 500; font-weight: 500; font-stretch: 84%; letter-spacing: -.02em; }
html.vx-c .f2-display em, html.vx-c .f2-d2 em { font-family: var(--vx-sans); font-style: normal; }
html.vx-c .f2-kick { font-family: var(--vx-mono); font-variation-settings: "wdth" 80, "wght" 500; font-size: 11px; letter-spacing: .1em; }
html.vx-c .f2-kick .no { font-family: var(--vx-mono); }
html.vx-c .f2-lede, html.vx-c .f2-small, html.vx-c .f2-qa .a, html.vx-c .f2-qa .q { font-family: var(--vx-sans); }
html.vx-c .f2-ledger b { font-family: var(--vx-sans); font-variation-settings: "wdth" 92, "wght" 600; }
html.vx-c .f2-ledger span { font-family: var(--vx-mono); font-size: 11px; letter-spacing: .1em; }

/* the section divider is a rule + mono kick, not a cream band */
html.vx-c .f2-sec { padding: 64px var(--vx-gut); }
html.vx-c .f2-sec--bone { background: var(--vx-paper); }
html.vx-c .f2-sec--ink { background: var(--vx-ink); color: var(--vx-paper); }
html.vx-c .f2-sec--ink .f2-display { color: var(--vx-paper); }
@media (min-width: 1100px) {
  html.vx-c .f2-sec { padding-top: 96px; padding-bottom: 96px; }
}

/* procedure + hub shell: C's paper/ink contrast and precision type */
html.vx-c .vp-hero h1.f2-d1 { font-family: var(--vx-sans); font-variation-settings: "wdth" 84, "wght" 500; font-weight: 500; font-stretch: 84%; letter-spacing: -.025em; line-height: .96; }
html.vx-c .vp-crumb { font-family: var(--vx-mono); font-size: 11px; letter-spacing: .1em; }
html.vx-c .vp-answer { font-family: var(--vx-sans); }
html.vx-c .vp-bar a { font-family: var(--vx-mono); font-size: 11px; letter-spacing: .1em; }
html.vx-c .vp-hero-fig { background: var(--vx-ink); border-color: var(--vx-inkrule); }
html.vx-c .vp-hero-fig svg { color: var(--vx-on-ink); }
html.vx-c .vp-hero-fig .cap { color: var(--vx-dim); }
html.vx-c .vp-hero .f2-ledger b { font-family: var(--vx-sans); font-variation-settings: "wdth" 92, "wght" 600; font-weight: 600; font-size: 20px; letter-spacing: -.01em; }
html.vx-c .vp-hero .f2-ledger span { font-family: var(--vx-mono); }
html.vx-c .vp-facts dt, html.vx-c .vp-rec-list .ph, html.vx-c .vp-step .k, html.vx-c .vp-risk h3, html.vx-c .vp-cost h3, html.vx-c .vp-src h3, html.vx-c .vp-range .src { font-family: var(--vx-mono); letter-spacing: .08em; }
html.vx-c .vp-rec-list h3, html.vx-c .vp-var h3, html.vx-c .vh-idx .name, html.vx-c .vh-route .to { font-family: var(--vx-sans); }
html.vx-c .vp-role { border-left: 3px solid var(--vx-yellow); }
html.vx-c .f2-step .no { font-family: var(--vx-mono); }
html.vx-c .f2-step h3 { font-family: var(--vx-sans); font-variation-settings: "wdth" 88, "wght" 500; }

/* the CTA reads in C's ink block with a yellow arrow plate */
html.vx-c .f2-cta { font-family: var(--vx-sans); font-weight: 500; font-stretch: 92%; }

/* ── navigation: bridge the existing black menu toward C ── */
html.vx-c .f2-wm { font-family: var(--vx-mono); font-weight: 600; letter-spacing: -.01em; text-transform: uppercase; }
html.vx-c .f2-nav-btn, html.vx-c .f2-nav-link { font-family: var(--vx-mono); font-weight: 500; font-size: 12px; letter-spacing: .08em; }
html.vx-c .f2-nav-btn .no, html.vx-c .f2-nav-link .no { font-family: var(--vx-mono); }
html.vx-c .f2-hd-cta { font-family: var(--vx-sans); font-weight: 500; }
html.vx-c .f2-hd-menu { font-family: var(--vx-mono); }
html.vx-c .f2-mega { background: var(--vx-paper); }
html.vx-c .f2-mega-no { font-family: var(--vx-mono); }
html.vx-c .f2-mega-title { font-family: var(--vx-sans); font-variation-settings: "wdth" 88, "wght" 500; font-weight: 500; font-stretch: 88%; letter-spacing: -.02em; }
html.vx-c .f2-mega-orient { font-family: var(--vx-sans); }
html.vx-c .f2-mega-list a { font-family: var(--vx-sans); font-weight: 500; }
html.vx-c .f2-mega-list a .gloss { font-family: var(--vx-sans); }
html.vx-c .f2-drawer-list a { font-family: var(--vx-mono); font-variation-settings: "wdth" 80, "wght" 500; font-weight: 500; font-size: clamp(24px, 7vw, 32px); letter-spacing: .06em; }
html.vx-c .f2-drawer-list .no { font-family: var(--vx-mono); }
html.vx-c .f2-drawer-foot, html.vx-c .f2-drawer-foot a { font-family: var(--vx-mono); }
html.vx-c .f2-drawer-vert { font-family: var(--vx-mono); }

/* ═══════════════════════════════════════════════════════════════════
   Phase 6A.2C hardening: mobile hierarchy, readout responsiveness,
   black-panel composition, drawer legibility.
   ═══════════════════════════════════════════════════════════════════ */

/* ── mobile: high-intent content (H1, orientation, CTA) before the
      illustration; desktop keeps the two-column drama ── */
@media (max-width: 1099px) {
  html.vx-c .vp-hero { display: flex; flex-direction: column; }
  html.vx-c .vp-hero-in { order: -1; }
  html.vx-c .vp-hero-fig { order: 0; margin-top: 20px; }
}

/* ── mobile readout: no internal clipping at 320–430 ── */
@media (max-width: 767px) {
  .vx-c .ro { height: 320px; grid-template-rows: 104px minmax(0, 1fr); }
  .vx-c .ro .m-index { font-size: 38px; }
  .vx-c .ro .name.t-h2 { font-size: 19px; }
  .vx-c .ro-cap, .vx-c .ro-sub { white-space: normal; line-height: 1.5; }
  .vx-c .ro-row { min-height: 0; }
  .vx-c .ro-row .rv { white-space: normal; overflow-wrap: break-word; line-height: 1.45; }
}

/* ── black panels: measurement texture, line-art presence ── */
html.vx-c .vp-hero-fig {
  background:
    repeating-linear-gradient(90deg, var(--vx-inkrule) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, var(--vx-inkrule) 0 1px, transparent 1px 8px),
    var(--vx-ink);
  background-position: 0 100%, 0 100%, 0 0;
  background-repeat: repeat-x, repeat-x, repeat;
}
html.vx-c .vp-hero-fig svg { max-width: 260px; }
@media (min-width: 1100px) { html.vx-c .vp-hero-fig svg { max-width: 400px; } }
html.vx-c .vp-hero-fig .cap { font-family: var(--vx-mono); font-size: 11px; letter-spacing: .1em; color: var(--vx-dim); }

/* ── mobile drawer: legible lower role/support text ── */
html.vx-c .f2-drawer-foot { color: var(--vx-on-ink); font-size: 13px; line-height: 1.7; }
html.vx-c .f2-drawer-foot .role { color: var(--vx-paper); }
html.vx-c .f2-drawer-foot a { color: var(--vx-yellow); }

/* ═══════════════════════════════════════════════════════════════════
   Phase 6A.2D: final creative corrections
   ═══════════════════════════════════════════════════════════════════ */

/* cursor signature: 2px line, ~12px ticks — refined, not chunky */
.vx-c .cur .cl { top: -1px; width: 1px; height: 2px; }
.vx-c .cur .ct { left: -1px; top: -6px; width: 2px; height: 12px; }

/* index becomes secondary; the name stays clear; the drawing dominates */
.vx-c .m-index { font-size: clamp(36px, 9vw, 46px); }
@media (min-width: 1100px) { .vx-c .m-index { font-size: 46px; } }

/* human-reading copy moves to Archivo, sentence case */
.vx-c .ro-sub, .vx-c .ro-cap, .vx-c .ro-row .rv { font-family: var(--vx-sans); font-variation-settings: "wdth" 100, "wght" 400; text-transform: none; letter-spacing: 0; font-size: 14px; line-height: 1.5; }
.vx-c .ro-pick { font-family: var(--vx-sans); }

/* the CTA docks into the ink instrument; a yellow measurement marks readiness */
.vx-c .cta { margin-top: 0; border: 1px solid var(--vx-inkrule); border-top: 0; }
.vx-c .cta .ca { border-left: 0; position: relative; }
.vx-c .cta .ca::before { content: ""; position: absolute; left: 50%; top: 50%; width: 24px; height: 2px; margin-top: -1px; margin-left: -12px; background: var(--vx-yellow); }
.vx-c .cta .ca::after { content: ""; position: absolute; left: 50%; top: 50%; width: 2px; height: 12px; margin-top: -6px; margin-left: -12px; background: var(--vx-yellow); }
.vx-c .cta .ca svg { display: none; }

/* ── neutral frame: four subdued drawings + one shared cursor at zero ── */
.vx-c .ro[data-state="zero"] { grid-template-columns: 1fr; grid-template-rows: auto auto; height: auto; min-height: 320px; }
.vx-c .ro[data-state="zero"] .ro-idx { grid-column: 1; grid-row: 1; }
.vx-c .ro[data-state="zero"] .ro-fig { grid-column: 1; grid-row: 2; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; align-items: center; justify-items: center; margin-top: 18px; }
.vx-c .ro[data-state="zero"] .ro-fig .fig { position: static; width: 100%; max-width: 110px; height: auto; opacity: .5; color: var(--vx-on-ink); }
.vx-c .ro[data-state="zero"] .ro-fig .fig .mark { display: none; }
.vx-c .ro[data-state="zero"] .ro-empty { display: none; }
.vx-c .ro[data-state="zero"] .ro-fig .ro-cap { display: none; }
.vx-c .ro[data-state="zero"] .ro-rows, .vx-c .ro[data-state="zero"] .ro-pick { display: none; }

/* ── set state: drawing dominant ── */
@media (min-width: 1100px) {
  .vx-c .ro[data-state="set"] { height: 320px; grid-template-columns: 150px minmax(0, 1fr) 240px; }
  .vx-c .ro[data-state="set"] .ro-idx { grid-column: 1; }
  .vx-c .ro[data-state="set"] .ro-rows { grid-column: 2; align-self: center; }
  .vx-c .ro[data-state="set"] .ro-fig { grid-column: 3; width: 240px; height: 270px; justify-self: end; }
  .vx-c .ro[data-state="set"] .ro-fig .fig { width: 240px; height: 250px; }
}
@media (max-width: 767px) {
  .vx-c .ro[data-state="set"] { height: auto; min-height: 340px; grid-template-rows: auto auto auto; }
  .vx-c .ro[data-state="set"] .ro-idx { grid-column: 1 / -1; grid-row: 1; }
  .vx-c .ro[data-state="set"] .ro-fig { grid-column: 1 / -1; grid-row: 2; width: 100%; height: 170px; justify-self: center; margin-top: 10px; }
  .vx-c .ro[data-state="set"] .ro-fig .fig { width: 100%; height: 100%; max-width: 140px; margin: 0 auto; }
  .vx-c .ro[data-state="set"] .ro-rows { grid-column: 1 / -1; grid-row: 3; margin-top: 12px; }
}

/* ── one primary ask: hide the global header CTA where the instrument/hub
      already carries the primary contextual CTA (homepage + world hubs);
      procedure pages keep their ENQUIRE header action ── */
html.vx-c:has(.hero[data-host]) .f2-hd-cta,
body[data-vx-about="cosmetic-surgery"] .f2-hd-cta,
body[data-vx-about="face"] .f2-hd-cta,
body[data-vx-about="body"] .f2-hd-cta,
body[data-vx-about="breast"] .f2-hd-cta { display: none; }

/* ═══════════════════════════════════════════════════════════════════
   Phase 6D: the instrument at production proportions (spec Part C)
   ═══════════════════════════════════════════════════════════════════ */

/* D-04: the position label is one line where it fits; the middle dot never sits alone */
.vx-c .pos .br { display: inline; }
.vx-c .pos .dot { white-space: nowrap; }

/* fold budget: the whole instrument, tab included, sits inside 1440 by 900 */
.vx-c .hero { padding-top: calc(var(--vx-hd) + 24px); }
.vx-c .rail-lbl { margin-top: 12px; }
.vx-c .ro { margin-top: 16px; }
@media (min-width: 1100px) {
  .vx-c .hero { padding-top: calc(var(--vx-hd) + 24px); }
  .vx-c .rail-lbl { margin-top: 8px; }
  .vx-c .ro { margin-top: 16px; }
}

/* D-03: one caption, bottom-right of the plate, in both states, in the mono label voice (C.9) */
.vx-c .ro .ro-fig .ro-cap { position: absolute; right: 0; bottom: 0; margin: 0; white-space: nowrap; z-index: 2; font-family: var(--vx-mono); font-variation-settings: "wdth" 80, "wght" 500; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; line-height: 1.4; }
.vx-c .ro[data-state="zero"] .ro-fig .ro-cap, .vx-c .ro[data-state="zero"] .ro-cap { display: block; }

/* C.2: the neutral frame fills the plate; four drawings in one row, 01 to 04,
   one shared datum behind them at 58 percent of the figure band */
.vx-c .ro[data-state="zero"] { height: auto; min-height: 350px; padding: 16px; grid-template-columns: minmax(0, 1fr); grid-template-rows: 56px minmax(0, 1fr); row-gap: 0; }
.vx-c .ro[data-state="zero"] .ro-idx { grid-column: 1; grid-row: 1; }
.vx-c .ro[data-state="zero"] .ro-fig { grid-column: 1; grid-row: 2; position: relative; width: auto; height: auto; min-height: 0; margin: 0; justify-self: stretch; align-self: stretch; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-items: center; justify-items: center; }
.vx-c .ro[data-state="zero"] .ro-fig::before { content: ""; position: absolute; left: 0; right: 0; top: 58%; height: 1.5px; margin-top: -.75px; background: var(--vx-yellow); z-index: 0; pointer-events: none; }
.vx-c .ro[data-state="zero"] .ro-fig::after { content: ""; position: absolute; left: 0; right: 0; top: 58%; height: 9px; margin-top: -4.5px; border-left: 1.5px solid var(--vx-yellow); border-right: 1.5px solid var(--vx-yellow); z-index: 0; pointer-events: none; }
.vx-c .ro[data-state="zero"] .ro-fig .fig { position: relative; z-index: 1; top: auto; left: auto; width: 100%; max-width: 200px; height: auto; opacity: .62; }
.vx-c .ro[data-state="zero"] .ro-fig .fig .mark { display: none; }
@media (min-width: 768px) {
  .vx-c .ro[data-state="zero"] { min-height: 420px; padding: 20px; }
  .vx-c .ro[data-state="zero"] .ro-fig { gap: 20px; }
}
@media (min-width: 1100px) {
  .vx-c .ro[data-state="zero"] { height: 440px; min-height: 0; grid-template-rows: 64px minmax(0, 1fr); }
  .vx-c .ro[data-state="zero"] .ro-fig { gap: 26px; }
  .vx-c .ro[data-state="zero"] .ro-fig .fig { max-width: 268px; }
}

/* C.3: the set state at the same plate height; the drawing dominant, the caption beneath it */
@media (min-width: 1100px) {
  .vx-c .ro[data-state="set"] { height: 440px; padding: 20px; grid-template-columns: 150px minmax(0, 1fr) 300px; column-gap: 24px; }
  .vx-c .ro[data-state="set"] .ro-fig { width: 300px; height: 400px; justify-self: end; }
  .vx-c .ro[data-state="set"] .ro-fig .fig { top: 0; left: 0; width: 300px; height: 375px; }
}
@media (max-width: 767px) {
  .vx-c .hero .role-desk { display: none; }  /* the role line reads once, below the tab (.role-mob) */
  .vx-c .ro[data-state="set"] { padding: 16px; }
  .vx-c .ro[data-state="set"] .ro-fig { height: 262px; }
  .vx-c .ro[data-state="set"] .ro-fig .fig { max-width: 192px; height: 240px; }
}

/* ═══════════════════════════════════════════════════════════════════
   Phase 6E.1: the selected state is two fields and one divider
   The photograph is clean: nothing drawn on it, nothing written on it,
   no yellow across it. The instrument (index, drawing with its measure,
   readings, caption) stays on ink. A single yellow rule stands in the gap
   between the two fields. Photography is photography; drawings are drawings.
   ═══════════════════════════════════════════════════════════════════ */
.vx-c .ro .ro-photo { display: none; }
.vx-c .ro[data-state="set"] .ro-photo:not([hidden]) { display: block; }
.vx-c .ro-photo { position: relative; overflow: visible; background: var(--vx-ink); margin: 0; }
.vx-c .ro-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 40%); filter: grayscale(1) contrast(1.04); clip-path: inset(0); }
.vx-c .ro-photo::before { content: ""; position: absolute; background: var(--vx-yellow); pointer-events: none; }
.vx-c .ro > .ro-cap { position: absolute; margin: 0; z-index: 3; white-space: nowrap; font-family: var(--vx-mono); font-variation-settings: "wdth" 80, "wght" 500; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; line-height: 1.4; color: var(--vx-dim); right: 20px; bottom: 16px; }
.vx-c .ro[data-state="zero"] > .ro-cap { display: block; }
@media (min-width: 1100px) {
  .vx-c .ro[data-state="set"] { grid-template-columns: minmax(0, 1fr) 260px 480px; grid-template-rows: auto minmax(0, 1fr); column-gap: 24px; row-gap: 0; }
  .vx-c .ro[data-state="set"] .ro-idx { grid-column: 1; grid-row: 1; }
  .vx-c .ro[data-state="set"] .ro-rows { grid-column: 1; grid-row: 2; align-self: end; padding-bottom: 34px; }
  .vx-c .ro[data-state="set"] .ro-fig { grid-column: 2; grid-row: 1 / 3; width: 260px; height: 400px; justify-self: end; }
  .vx-c .ro[data-state="set"] .ro-fig .fig { top: 24px; left: 0; width: 260px; height: 325px; }
  .vx-c .ro[data-state="set"] .ro-photo { grid-column: 3; grid-row: 1 / 3; width: 480px; height: 400px; }
  .vx-c .ro[data-state="set"] .ro-photo::before { left: -13px; top: 0; bottom: 0; width: 1.5px; }
  .vx-c .ro[data-state="set"] > .ro-cap { right: auto; left: 20px; bottom: 16px; }
}
@media (min-width: 768px) and (max-width: 1099px) {
  .vx-c .ro[data-state="set"] .ro-photo { display: none !important; }
}
@media (max-width: 767px) {
  .vx-c .ro[data-state="set"] { grid-template-columns: 110px minmax(0, 1fr); column-gap: 12px; grid-template-rows: auto 220px auto; padding: 16px; }
  .vx-c .ro[data-state="set"] .ro-idx { grid-column: 1 / -1; grid-row: 1; }
  .vx-c .ro[data-state="set"] .ro-photo { grid-column: 1 / -1; grid-row: 2; width: 100%; height: 220px; margin-top: 6px; }
  .vx-c .ro[data-state="set"] .ro-photo::before { left: 0; right: 0; top: auto; bottom: -10px; height: 1.5px; }
  .vx-c .ro[data-state="set"] .ro-fig { grid-column: 1; grid-row: 3; width: 110px; height: 138px; margin-top: 18px; justify-self: start; }
  .vx-c .ro[data-state="set"] .ro-fig .fig { position: absolute; top: 0; left: 0; width: 110px; height: 138px; max-width: none; margin: 0; }
  .vx-c .ro[data-state="set"] .ro-rows { grid-column: 2; grid-row: 3; margin-top: 18px; padding-bottom: 30px; }
  .vx-c .ro[data-state="set"] > .ro-cap { right: auto; left: 16px; bottom: 12px; }
  .vx-c .hero .role-desk { display: none; }
}

/* ── Phase 6E.1: the hero plate is a photograph over a drawing panel ──
   Pattern A: two adjacent fields. The photograph fills the upper field with
   nothing on it. The lower field is the technical panel on ink: the world
   drawing with its own measure, the world index, the measure name and the
   caption. One yellow rule divides the two. ── */
html.vx-c .vp-hero-fig--photo { padding: 0; display: flex; flex-direction: column; align-items: stretch; justify-items: stretch; background: var(--vx-ink); overflow: hidden; }
html.vx-c .vp-hero-fig--photo .vp-photo { position: relative; flex: 1 1 auto; min-height: 66vw; margin: 0; display: block; }
@media (min-width: 1100px) { html.vx-c .vp-hero-fig--photo .vp-photo { min-height: 0; } }
html.vx-c .vp-hero-fig--photo .vp-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 30%); filter: grayscale(1) contrast(1.04); display: block; }
@media (max-width: 1099px) { html.vx-c .vp-hero-fig--photo .vp-photo img { object-position: var(--pos-m, var(--pos, 50% 30%)); } }
html.vx-c .vp-panel { flex: 0 0 auto; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 18px; align-items: center; padding: 14px 20px 16px; border-top: 1.5px solid var(--vx-yellow); background: var(--vx-ink); color: var(--vx-on-ink); }
html.vx-c .vp-panel .vp-panel-fig { width: 84px; }
html.vx-c .vp-panel .vp-panel-fig svg { width: 84px; height: auto; max-width: none; display: block; color: var(--vx-on-ink); }
html.vx-c .vp-panel .k { margin: 0; font-family: var(--vx-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--vx-dim); }
html.vx-c .vp-panel .r { margin: 4px 0 0; font-size: 15px; line-height: 1.4; color: var(--vx-on-ink); }
html.vx-c .vp-panel .r b { font-weight: 600; }
@media (min-width: 1100px) { html.vx-c .vp-panel { padding: 18px 24px 20px; column-gap: 22px; } html.vx-c .vp-panel .vp-panel-fig, html.vx-c .vp-panel .vp-panel-fig svg { width: 104px; } }

/* ── Phase 6E.1: the mobile hero hierarchy: world, heading, proposition, photograph, actions ── */
@media (max-width: 1099px) {
  html.vx-c .vp-hero { display: flex; flex-direction: column; }
  html.vx-c .vp-hero-in:has(.vp-hero-head) { display: contents; }
  html.vx-c .vp-hero-head, html.vx-c .vp-hero-act { padding: 0 var(--fmh2-gutter); }
  html.vx-c .vp-hero-head { order: 1; }
  html.vx-c .vp-hero-fig { order: 2; margin-top: 20px; }
  html.vx-c .vp-hero-act { order: 3; padding-top: 22px; padding-bottom: 40px; display: flex; flex-direction: column; }
  html.vx-c .vp-hero-act > .f2-rv { order: 1; }
  html.vx-c .vp-hero-act > .vp-answer.f2-rv { order: 2; margin-top: 20px; }
}

/* ── Phase 6E: editorial photograph beside a list, and the evidence strip ── */
html.vx-c .vh-split { display: grid; gap: 28px; align-items: start; }
@media (min-width: 900px) { html.vx-c .vh-split { grid-template-columns: 7fr 4fr; gap: 48px; } }
html.vx-c .vh-photo { margin: 0; position: relative; }
html.vx-c .vh-photo img { width: 100%; height: auto; display: block; aspect-ratio: 4 / 5; object-fit: cover; filter: grayscale(1) contrast(1.04); }
html.vx-c .vh-photo figcaption { margin-top: 10px; font-family: var(--vx-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--fmh2-mid); }
html.vx-c .vh-photo::before { content: ""; position: absolute; left: -28px; top: 34%; width: 20px; height: 1.5px; background: var(--vx-yellow); }
html.vx-c .vh-evidence { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 20px 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { html.vx-c .vh-evidence { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
html.vx-c .vh-ev-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
html.vx-c .vh-ev-pair figure { margin: 0; }
html.vx-c .vh-ev-pair img { width: 100%; height: auto; display: block; aspect-ratio: 350 / 405; object-fit: cover; }
html.vx-c .vh-ev-pair figcaption { margin-top: 6px; font-family: var(--vx-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--vx-dim); }
html.vx-c .vh-ev-cap { margin: 0 0 8px; font-size: 13px; color: var(--vx-on-ink); }
html.vx-c .vh-ev-cap .no { font-family: var(--vx-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--vx-yellow); margin-right: 6px; }

/* ═══════════════════════════════════════════════════════════════════
   Phase 2B · homepage world instrument (calibration card)
   The plate earns its height; nothing is clipped against an arbitrary total.
   ═══════════════════════════════════════════════════════════════════ */

/* the plate grows with its readings */
.vx-c .ro { height: auto; min-height: 240px; }

/* zero state: the four figures sit on one common baseline, measures subdued */
.vx-c .ro[data-state="zero"] .ro-fig { display: flex; align-items: flex-end; gap: 10px; width: 100%; }
.vx-c .ro[data-state="zero"] .ro-fig .fig { position: static; flex: 1 1 0; min-width: 0; height: auto; }
.vx-c .ro[data-state="zero"] .ro-fig .fig path[stroke="#F4DC32"] { stroke: rgba(250, 248, 242, .35); }
.vx-c .ro[data-state="zero"] .ro-empty { display: none; }

/* unset calibration rail: the instrument waiting to be set */
.vx-c .ro-unset { display: flex; flex-direction: column; gap: 6px; padding: 4px 0 0; }
.vx-c .ro-unset-l { display: flex; align-items: baseline; gap: 9px; font-family: var(--vx-mono); font-size: 11px; letter-spacing: .06em; color: var(--vx-dim); }
.vx-c .ro-unset-l .w { color: var(--vx-on-ink); text-transform: uppercase; }

/* role line moved into the plate foot */
.vx-c .ro-role { color: var(--vx-dim); padding-top: 10px; }

/* selected-state sub-line */
.vx-c .ro-subline { color: var(--vx-on-ink); }
.vx-c .ro-subline .rv { color: var(--vx-on-ink); }

/* calibration card: mono label + Archivo reading + hairline separation */
.vx-c .ro-rows { gap: 0; }
.vx-c .ro-row { display: flex; align-items: baseline; gap: 16px; padding: 10px 0; min-height: 0; overflow: visible; }
.vx-c .ro-row .rl { flex: 0 0 auto; min-width: 92px; color: var(--vx-dim); font-size: 10px; }
.vx-c .ro-row .rv { flex: 1; min-width: 0; font-family: var(--vx-sans); font-size: 15px; line-height: 1.42; color: var(--vx-on-ink); }

/* secondary assessment action (mono) */
.vx-c .assess { display: inline-flex; align-items: center; min-height: 44px; margin-top: 12px; font-family: var(--vx-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--vx-mid); text-decoration: none; }
.vx-c .assess:hover { color: var(--vx-ink); }
.vx-c .assess[hidden] { display: none; }

/* mobile: stack the instrument vertically in the reading order */
@media (max-width: 767px) {
  .vx-c .ro { display: flex; flex-direction: column; height: auto; }
  .vx-c .ro-idx { order: 0; }
  .vx-c .ro-fig { order: 2; width: 100%; height: 130px; justify-self: auto; }
  .vx-c .ro[data-state="zero"] .ro-fig { height: 104px; }
  .vx-c .ro-photo { order: 1; width: 100%; height: 180px; }
  .vx-c .ro-rows { order: 3; }
  .vx-c .ro-unset { order: 3; }
  .vx-c .ro-cap { order: 4; }
  .vx-c .ro-role { order: 5; }
}

/* mobile: tighten the vertical rhythm without hiding any reading */
@media (max-width: 767px) {
  .vx-c .ro[data-state="set"] .ro-photo { height: 160px; }
  .vx-c .ro[data-state="set"] .ro-fig { height: 108px; }
  .vx-c .ro-row { padding: 8px 0; }
  .vx-c .ro-row .rv { font-size: 14px; line-height: 1.4; }
}
/* unset rail placeholder: a subdued paper rule, not an em dash */
.vx-c .ro-unset-l .dash { display: inline-block; width: 20px; height: 1px; background: var(--vx-dim); align-self: center; }

/* ═══════════════════════════════════════════════════════════════════
   Phase 2B.1 · homepage lock fixes
   The plate sizes to its content; nothing is clipped against a fixed height.
   ═══════════════════════════════════════════════════════════════════ */

/* 1. the plate grows with its content at every breakpoint and state */
.vx-c .ro, .vx-c .ro:not(.m390) { height: auto !important; }
.vx-c .ro[data-state="set"], .vx-c .ro[data-state="zero"] { height: auto !important; }

/* 2. zero state: the index owns its own row and the figures start below it */
.vx-c .ro[data-state="zero"] { grid-template-rows: auto auto !important; }

/* 3. caption and role line stack vertically, never overlap */
.vx-c .ro > .ro-cap { position: static !important; right: auto !important; bottom: auto !important; margin-top: 12px; }

/* 4. hair mobile photograph keeps the hairline in frame */
@media (max-width: 767px) {
  .vx-c .ro[data-state="set"] .ro-photo[data-world="hair"] { height: 200px; }
  .vx-c .ro[data-state="set"] .ro-photo[data-world="hair"] img { object-position: 50% 16%; }
}