/* ============================================================================
   Conxfolio V4-d — "PREMIUM" layer
   ----------------------------------------------------------------------------
   Loaded AFTER styles.css and gallery.css. Scoped to .folio-v4d, additive, and
   zero colour literals — every value resolves to a token in tokens.css.

   Premium here is the register of Linear / Stripe / Apple / Arc: it is not
   more decoration, it is more restraint. Six moves, in the order the founder
   will notice them:

     1  AIR + SCALE        wider margins, bigger display, one hero per screen
     2  ONE ACCENT         navy, and only where something can be pressed
     3  MATERIAL DEPTH     tilt, fan, lift, pressed chrome, one dark band
     4  CHROME FINISH      pill nav, segments, hairline inputs, thin icons
     5  CHOREOGRAPHY       stagger, crossfade, scroll-linked arc
     6  STATES             skeleton, empty, toast, dialog, inline, disabled
   ========================================================================== */

/* ==========================================================================
   1 · AIR + SCALE
   The editorial grid. Wider outer margins than anything Conxfolio has worn
   before (100.8px at 1440), a larger display scale, and a strict 8-pt spine.
   ========================================================================== */
.folio-v4d .career-canvas-home > section,
.folio-v4d .canvas-products,
.folio-v4d .canvas-faq,
.folio-v4d .canvas-workspace-story,
.folio-v4d .canvas-final,
.folio-v4d .canvas-promise,
.folio-v4d .canvas-ats-story,
.folio-v4d .canvas-letter-story {
  padding-right: var(--cx-pre-gutter);
  padding-left: var(--cx-pre-gutter);
}
.folio-v4d .canvas-gallery-head,
.folio-v4d .canvas-resume-rail,
.folio-v4d .canvas-world-rail,
.folio-v4d .canvas-footer {
  padding-right: var(--cx-pre-gutter);
  padding-left: var(--cx-pre-gutter);
}
.folio-v4d .canvas-products,
.folio-v4d .canvas-faq,
.folio-v4d .canvas-workspace-story { padding-block: var(--cx-pre-rhythm-xl); }
.folio-v4d .canvas-resume-gallery,
.folio-v4d .canvas-portfolio-gallery { padding-top: var(--cx-pre-rhythm-xl); }
.folio-v4d .canvas-section-head,
.folio-v4d .canvas-gallery-head { margin-bottom: var(--cx-pre-rhythm-md); }

/* the display scale — one hero object per screen, set larger and looser */
.folio-v4d .cxh-title,
.folio-v4d .career-workspace-head h1,
.folio-v4d .ats-product h1,
.folio-v4d .cover-editor-product h1,
.folio-v4d .portfolio-product h1,
.folio-v4d .resume-entry h1 {
  font-size: var(--cx-pre-d1);
  line-height: .92;
  letter-spacing: -.022em;
}
.folio-v4d .canvas-section-head h2,
.folio-v4d .canvas-gallery-head h2,
.folio-v4d .canvas-ats-story h2,
.folio-v4d .canvas-letter-story h2,
.folio-v4d .canvas-workspace-story h2,
.folio-v4d .canvas-faq h2 { font-size: var(--cx-pre-d2); line-height: .94; }

/* the hero breathes: fewer things per screen means more room around them */
.folio-v4d .cxh { padding-inline: var(--cx-pre-gutter); }
.folio-v4d .cxh-sub { margin-block: var(--cx-pre-rhythm-xs) var(--cx-pre-rhythm-sm); }
.folio-v4d .cxh-acts { gap: var(--cx-s5); }
.folio-v4d .cxh-ctas { margin-top: var(--cx-pre-rhythm-sm); }

/* numbers align, everywhere they sit in a column */
.folio-v4d { font-variant-numeric: tabular-nums; }
.folio-v4d .canvas-promise b,
.folio-v4d .cxh-gval,
.folio-v4d .ats-score-ring strong,
.folio-v4d .cx-receipt-line,
.folio-v4d [class*="score"],
.folio-v4d dd, .folio-v4d dt,
.folio-v4d .cxpre-seg { font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
  .folio-v4d .canvas-products,
  .folio-v4d .canvas-faq,
  .folio-v4d .canvas-workspace-story { padding-block: var(--cx-pre-rhythm-md); }
  .folio-v4d .canvas-resume-gallery,
  .folio-v4d .canvas-portfolio-gallery { padding-top: var(--cx-pre-rhythm-md); }
  .folio-v4d .canvas-section-head,
  .folio-v4d .canvas-gallery-head { margin-bottom: var(--cx-pre-rhythm-sm); }
}

/* ==========================================================================
   2 · ONE INTERACTIVE ACCENT
   Navy marks affordance and nothing else. Primary buttons stay ink; headings
   stay ink; the italic payoff word stays ink. If it is navy, you can press it,
   it is focused, or it is the state you are currently in.
   ========================================================================== */

/* links in running copy */
.folio-v4d .canvas-product-runway > a > b,
.folio-v4d .canvas-gallery-head a,
.folio-v4d .canvas-letter-story > a,
.folio-v4d .cxh-open,
.folio-v4d .career-proof-library > a,
.folio-v4d .career-next-rail > a,
.folio-v4d .cx-empty-doors a,
.folio-v4d .text-link,
.folio-v4d main p > a,
.folio-v4d .cover-package-next a,
.folio-v4d .career-resume-restart { color: var(--cx-pre-accent); }
.folio-v4d .canvas-product-runway > a:hover > b,
.folio-v4d .canvas-gallery-head a:hover,
.folio-v4d .cxh-open:hover,
.folio-v4d .cx-empty-doors a:hover,
.folio-v4d .text-link:hover { color: var(--cx-pre-accent-lift); }

/* focus rings — 2px, offset 2, navy, on absolutely everything focusable */
.folio-v4d a:focus-visible,
.folio-v4d button:focus-visible,
.folio-v4d [role="button"]:focus-visible,
.folio-v4d input:focus-visible,
.folio-v4d select:focus-visible,
.folio-v4d textarea:focus-visible,
.folio-v4d summary:focus-visible,
.folio-v4d [tabindex]:focus-visible {
  outline: var(--cx-pre-ring-w) solid var(--cx-pre-ring);
  outline-offset: var(--cx-pre-ring-offset);
  border-radius: var(--cx-r-sm);
}
/* inputs carry the ring as a border+shadow so the field itself reads focused */
.folio-v4d input:focus,
.folio-v4d select:focus,
.folio-v4d textarea:focus {
  border-color: var(--cx-pre-accent);
  box-shadow: 0 0 0 var(--cx-pre-ring-w) var(--cx-pre-accent-line);
  outline: none;
}

/* the selected tab / segment / step — navy underline, navy label */
.folio-v4d .cxpre-nav-ind { background: var(--cx-pre-accent); }
.folio-v4d .primary-nav a.on { color: var(--cx-pre-accent); }
/* NOT .portfolio-modebar: that tab is an ink-filled block, and navy on ink is
   navy on black. Its selected state is carried by the fill, which is what a
   filled tab is for. */
.folio-v4d .segmented button.on,
.folio-v4d .portfolio-content-outline button.on > span > b { color: var(--cx-pre-accent); }
.folio-v4d .career-trajectory i.is-current,
.folio-v4d .cxpre-arc-progress { background: var(--cx-pre-accent); }

/* ==========================================================================
   3 · DEPTH THAT BEHAVES LIKE MATERIAL
   ========================================================================== */

/* --- the instrument tilt. Pointer-aware, <= 6deg, spring settle, desktop
   only, and completely off under reduced motion. premium.js writes the two
   angles; the ceiling lives here so it cannot be exceeded from script. */
.folio-v4d .cxpre-tilt-stage { perspective: var(--cx-pre-perspective); }
.folio-v4d .cxpre-tilt {
  transform:
    rotateX(clamp(calc(-1 * var(--cx-pre-tilt-max)), var(--cx-pre-rx, 0deg), var(--cx-pre-tilt-max)))
    rotateY(clamp(calc(-1 * var(--cx-pre-tilt-max)), var(--cx-pre-ry, 0deg), var(--cx-pre-tilt-max)));
  transform-style: preserve-3d;
  transition: transform var(--cx-pre-dur-settle) var(--cx-pre-ease-spring);
  will-change: transform;
}
.folio-v4d .cxpre-tilt.is-tracking { transition: transform 90ms linear; }
@media (max-width: 699px) {
  .folio-v4d .cxpre-tilt { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .folio-v4d .cxpre-tilt { transform: none; transition: none; }
}

/* --- fan depth on the templates strip. The 37 layouts stop being a list and
   become a fanned deck; hovering brings one card out of the deck. */
/* The fan is worn by the PREVIEW inside the card, not by the card: the card
   carries .reveal, and the V4 base pins .reveal to `transform:none !important`
   so a stalled entrance can never hide a template. The preview is the sheet of
   paper anyway — fanning the paper is the honest reading of the gesture. */
@media (min-width: 900px) {
  .folio-v4d .canvas-resume-rail { perspective: var(--cx-pre-perspective); }
  .folio-v4d .canvas-resume-rail .canvas-resume-preview {
    transform: rotateY(-8deg) translateZ(0);
    transform-origin: 100% 50%;
    box-shadow: var(--cx-pre-shadow-1);
    transition: transform var(--cx-dur-base) var(--cx-pre-ease-spring),
                box-shadow var(--cx-dur-base) var(--cx-ease);
  }
  .folio-v4d .canvas-resume-rail .canvas-resume-card:hover .canvas-resume-preview,
  .folio-v4d .canvas-resume-rail .canvas-resume-card:focus-within .canvas-resume-preview {
    transform: rotateY(0deg) translateZ(64px);
    box-shadow: var(--cx-pre-shadow-3);
  }
}
@media (prefers-reduced-motion: reduce) {
  .folio-v4d .canvas-resume-rail .canvas-resume-preview { transition: none; }
}

/* --- paper lifts. Every card in the system agrees on one gesture: up 2px
   with shadow-2 on hover, flat on press. */
.folio-v4d .canvas-product-runway > a,
.folio-v4d .canvas-world-card,
.folio-v4d .canvas-package-map > a,
.folio-v4d .career-artifact,
.folio-v4d .ats-source-card,
.folio-v4d .cover-choice,
.folio-v4d .home-product-link {
  transition: transform var(--cx-dur-fast) var(--cx-ease),
              box-shadow var(--cx-dur-fast) var(--cx-ease),
              border-color var(--cx-dur-fast) var(--cx-ease);
}
/* `translate`, not `transform`, for the same reason the entrances use it: the
   V4 base pins `.reveal { transform: none !important }` and most of these
   cards carry .reveal. */
.folio-v4d .canvas-product-runway > a:hover,
.folio-v4d .canvas-world-card:hover,
.folio-v4d .career-artifact:hover,
.folio-v4d .ats-source-card:hover,
.folio-v4d .cover-choice:hover,
.folio-v4d .home-product-link:hover {
  /* !important, and here is why: the entrance animation below fills forwards
     with `translate: 0 0`, and a CSS animation beats a normal declaration.
     Without this the card would enter beautifully and then refuse to lift for
     the rest of the session. */
  translate: 0 -2px !important;
  box-shadow: var(--cx-pre-shadow-2);
}
.folio-v4d .canvas-product-runway > a:active,
.folio-v4d .canvas-world-card:active,
.folio-v4d .ats-source-card:active,
.folio-v4d .cover-choice:active,
.folio-v4d .home-product-link:active {
  translate: 0 0 !important;
  box-shadow: var(--cx-pre-shadow-1);
}

/* --- buttons get a machined edge: hairline, 1px inner highlight along the
   top, and a real pressed state that darkens instead of only moving. */
.folio-v4d .button,
.folio-v4d .cxh-btn,
.folio-v4d .cxh-go,
.folio-v4d .workspace-button {
  border: 1px solid var(--cx-ink);
  box-shadow: var(--cx-pre-inner-hi);
  transition: transform var(--cx-dur-fast) var(--cx-ease),
              background var(--cx-dur-fast) var(--cx-ease),
              box-shadow var(--cx-dur-fast) var(--cx-ease),
              border-color var(--cx-dur-fast) var(--cx-ease);
}
.folio-v4d .button-primary:hover,
.folio-v4d .cxh-btn.pri:hover,
.folio-v4d .cxh-go:hover,
.folio-v4d .workspace-button:hover {
  transform: translateY(-2px);
  box-shadow: var(--cx-pre-inner-hi), var(--cx-pre-shadow-2);
}
.folio-v4d .button:active,
.folio-v4d .cxh-btn:active,
.folio-v4d .cxh-go:active,
.folio-v4d .workspace-button:active {
  transform: translateY(0);
  background: var(--cx-panel);
  box-shadow: none;
}
.folio-v4d .button-outline,
.folio-v4d .button-secondary,
.folio-v4d .button-quiet,
.folio-v4d .cxh-btn.ghost {
  box-shadow: var(--cx-pre-inner-hi-light);
}
.folio-v4d .button-outline:active,
.folio-v4d .button-secondary:active,
.folio-v4d .button-quiet:active,
.folio-v4d .cxh-btn.ghost:active { background: var(--cx-mist); }
.folio-v4d .button:disabled,
.folio-v4d button:disabled {
  opacity: 1;
  border-color: var(--cx-line);
  background: var(--cx-mist);
  color: var(--cx-ink60);
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
}

/* --- THE ONE DARK MOMENT.
   Gallery printed the poster on paper and inverted the ATS chapter. Premium
   swaps them: the ATS chapter comes back to paper (a chapter is a chapter),
   and the poster numerals become a BRIDGE BAND — a single ink-to-navy field
   carrying "37 · 15 · 4 · 1" reversed. One dark band per home page, and it is
   the one that carries the largest type. */
.folio-v4d .canvas-promise {
  --cx-ink: var(--cx-paper-abs);
  --cx-ink60: var(--cx-paper-abs);
  --cx-line: var(--cx-paper-a20);
  --cx-line-strong: var(--cx-paper-a30);
  background-color: var(--cx-panel);
  /* the same 7px dot field the paper stock carries, in paper rather than ink,
     so the one dark band reads as printed rather than as a digital gradient */
  background-image:
    radial-gradient(var(--cx-paper-a06) .6px, transparent .7px),
    linear-gradient(105deg, var(--cx-panel) 0%, var(--cx-pre-accent) 82%, var(--cx-pre-accent) 100%);
  background-size: 7px 7px, auto;
  background-position: 0 0, 0 0;
  background-repeat: repeat, no-repeat;
  background-attachment: fixed, scroll;
  border-top: 0;
  border-bottom: 0;
  color: var(--cx-paper-abs);
  padding-block: var(--cx-pre-rhythm-lg);
}
.folio-v4d .canvas-promise > span { border-right-color: var(--cx-paper-a20); }
.folio-v4d .canvas-promise b { color: var(--cx-paper-abs); }
.folio-v4d .canvas-promise small {
  border-top-color: var(--cx-paper-a30);
  color: var(--cx-paper-abs);
  opacity: 1;
}
/* The ATS chapter returns to paper. styles.css re-points the whole ink ramp
   inside a dark band (and again, one level down, for the legacy V3 role
   names), so un-darkening a band means putting BOTH sets back — exactly the
   move gallery.css had to make for the poster. Pinning them to the *-abs
   tokens is the only way to do that without writing a colour outside
   tokens.css. */
.folio-v4d .canvas-ats-story {
  --cx-ink: var(--cx-ink-abs);
  --cx-ink60: var(--cx-ink60-abs);
  --cx-ink30: var(--cx-ink30-abs);
  --cx-line: var(--cx-line-abs);
  --cx-line-strong: var(--cx-line-strong-abs);
  --cx-accent: var(--cx-ink-abs);
  background: var(--cx-mist);
  color: var(--cx-ink-abs);
}
.folio-v4d .canvas-ats-story > * {
  --navy: var(--cx-ink-abs);
  --navy-2: var(--cx-ink60-abs);
  --cx-panel: var(--cx-ink-abs);
  --surface-inverse: var(--cx-ink-abs);
  --text-strong: var(--cx-ink-abs);
  --text-muted: var(--cx-ink60-abs);
  --text-subtle: var(--cx-ink60-abs);
}
.folio-v4d .canvas-ats-story h2,
.folio-v4d .canvas-ats-story figure > strong { color: var(--cx-ink-abs); }
.folio-v4d .canvas-ats-story > div > span { color: var(--cx-ink60-abs); }
.folio-v4d .canvas-ats-story p,
.folio-v4d .canvas-ats-story figcaption,
.folio-v4d .canvas-ats-story figure > small,
.folio-v4d .canvas-ats-story li { color: var(--cx-ink60-abs); }
.folio-v4d .canvas-ats-story li i { color: var(--cx-ok-fg); }
.folio-v4d .canvas-ats-story .button,
.folio-v4d .canvas-ats-story .button-primary {
  background: var(--cx-ink-abs);
  border-color: var(--cx-ink-abs);
  color: var(--cx-paper-abs);
}
/* The page closes on PAPER too. The founder's rule is literal — "the ONE dark
   moment" — so the closing CTA and the footer give their ink back and close on
   a hairline instead. The bridge band is now the only dark surface between the
   top of the home page and the bottom of it. */
.folio-v4d .canvas-final,
.folio-v4d .canvas-footer,
.folio-v4d .landing-footer {
  --cx-ink: var(--cx-ink-abs);
  --cx-ink60: var(--cx-ink60-abs);
  --cx-ink30: var(--cx-ink30-abs);
  --cx-line: var(--cx-line-abs);
  --cx-line-strong: var(--cx-line-strong-abs);
  --cx-accent: var(--cx-ink-abs);
  background: var(--cx-porcelain);
  color: var(--cx-ink-abs);
  border-top: 1px solid var(--cx-line-abs);
}
.folio-v4d .canvas-final > *,
.folio-v4d .canvas-footer > *,
.folio-v4d .landing-footer > * {
  --navy: var(--cx-ink-abs);
  --navy-2: var(--cx-ink60-abs);
  --cx-panel: var(--cx-ink-abs);
  --surface-inverse: var(--cx-ink-abs);
  --text-strong: var(--cx-ink-abs);
  --text-muted: var(--cx-ink60-abs);
  --text-subtle: var(--cx-ink60-abs);
}
.folio-v4d .canvas-final > span,
.folio-v4d .canvas-final p,
.folio-v4d .canvas-final h2 em { color: var(--cx-ink60-abs); }
.folio-v4d .canvas-final h2 { color: var(--cx-ink-abs); }
.folio-v4d .canvas-final .button-primary {
  background: var(--cx-ink-abs);
  border-color: var(--cx-ink-abs);
  color: var(--cx-paper-abs);
}
.folio-v4d .canvas-final .button-outline {
  background: transparent;
  border: 1px solid var(--cx-ink-abs);
  color: var(--cx-ink-abs);
}
.folio-v4d .canvas-footer,
.folio-v4d .landing-footer { color: var(--cx-ink60-abs); }
/* styles.css hands the footer's spans, brand and nav links panel-ink DIRECTLY
   ("dark bands own their own ink"), not through a token, so un-darkening the
   band is not enough — axe caught "Your work, made visible." at 1.09:1. */
.folio-v4d .canvas-footer .brand,
.folio-v4d .landing-footer .brand,
.folio-v4d .canvas-final .brand { color: var(--cx-ink-abs); }
.folio-v4d .canvas-footer span,
.folio-v4d .landing-footer span,
.folio-v4d .canvas-footer nav a,
.folio-v4d .landing-footer nav a { color: var(--cx-ink60-abs); }

.folio-v4d .canvas-ats-story figure {
  position: relative;
  border-color: var(--cx-line-abs);
  background:
    radial-gradient(circle, var(--cx-paper-abs) 0 47%, transparent 48%),
    conic-gradient(var(--cx-ok-fg) 0 82%, var(--cx-line-abs) 82%);
  box-shadow: 0 0 0 20px var(--cx-ink-a06);
}

/* --- the backdrops, brought back inside their stated budget.
   Solid ink linework under one group opacity: the ceiling is now enforced by
   the compositor, so a dense drawing cannot stack its way past it. Felt, not
   seen. (Gate check 26 re-measures the rasterised result per world.) */
.folio-v4d .cx-backdrop {
  color: var(--cx-ink);
  opacity: var(--cx-pre-backdrop-ink);
}

/* ==========================================================================
   4 · CHROME FINISH
   ========================================================================== */

/* --- the bar. Wordmark + C tile left, pill nav centre, ink button right. It
   is flat and borderless at the top of the page and only earns its hairline
   and its 4px backdrop blur once the page has actually scrolled. */
/* The V4 base writes this rule four times over (.landing-bar / .tool-bar /
   .prestudio-bar / bare) at three class weights, and app.js swaps those
   variants per route. Matching its selector shape is the only way to win
   without !important. */
.folio-v4d .topbar.landing-bar,
.folio-v4d .topbar.tool-bar,
.folio-v4d .topbar.prestudio-bar,
.folio-v4d .topbar {
  padding-inline: var(--cx-pre-gutter);
  border-bottom: 1px solid transparent;
  background: var(--cx-page-tint);
  color: var(--cx-ink);
  backdrop-filter: none;
  transition: border-color var(--cx-dur-base) var(--cx-ease),
              background var(--cx-dur-base) var(--cx-ease),
              backdrop-filter var(--cx-dur-base) var(--cx-ease);
}
.folio-v4d.cxpre-scrolled .topbar.landing-bar,
.folio-v4d.cxpre-scrolled .topbar.tool-bar,
.folio-v4d.cxpre-scrolled .topbar.prestudio-bar,
.folio-v4d.cxpre-scrolled .topbar {
  border-bottom-color: var(--cx-line);
  background: color-mix(in srgb, var(--cx-page-tint) 82%, transparent);
  backdrop-filter: blur(4px);
}
.folio-v4d .topbar .brand { color: var(--cx-ink); }
.folio-v4d .topbar .save-state {
  color: var(--cx-ink60);
  opacity: 1;
  letter-spacing: var(--cx-track-label);
  text-transform: uppercase;
}
.folio-v4d .topbar.landing-bar .workspace-button,
.folio-v4d .topbar.tool-bar .workspace-button,
.folio-v4d .topbar.prestudio-bar .workspace-button,
.folio-v4d .topbar .workspace-button {
  border: 1px solid var(--cx-ink);
  background: var(--cx-ink);
  color: var(--cx-paper);
}
.folio-v4d .topbar.landing-bar .workspace-button:hover,
.folio-v4d .topbar.tool-bar .workspace-button:hover,
.folio-v4d .topbar.prestudio-bar .workspace-button:hover,
.folio-v4d .topbar .workspace-button:hover {
  background: var(--cx-panel);
  border-color: var(--cx-panel);
  color: var(--cx-paper-abs);
}

/* the pill nav, with one indicator that slides between the four doors */
.folio-v4d .topbar.landing-bar .primary-nav,
.folio-v4d .topbar.tool-bar .primary-nav,
.folio-v4d .topbar.prestudio-bar .primary-nav,
.folio-v4d .primary-nav {
  position: relative;
  align-self: center;
  height: 40px;
  align-items: center;
  gap: var(--cx-s1);
  padding: var(--cx-s1);
  border: 1px solid var(--cx-line);
  border-radius: var(--cx-r-pill);
  background: var(--cx-paper);
}
.folio-v4d .topbar.landing-bar .primary-nav a,
.folio-v4d .topbar.tool-bar .primary-nav a,
.folio-v4d .topbar.prestudio-bar .primary-nav a,
.folio-v4d .primary-nav a {
  padding: 0 var(--cx-s4);
  border-radius: var(--cx-r-pill);
  color: var(--cx-ink60);
  font-size: var(--cx-t-sm);
  font-weight: 550;
  opacity: 1;
  transition: color var(--cx-dur-fast) var(--cx-ease);
}
.folio-v4d .primary-nav a:hover { color: var(--cx-ink); }
.folio-v4d .topbar.landing-bar .primary-nav a.on::after,
.folio-v4d .topbar.tool-bar .primary-nav a.on::after,
.folio-v4d .topbar.prestudio-bar .primary-nav a.on::after,
.folio-v4d .primary-nav a.on::after { display: none; }
.folio-v4d .cxpre-nav-ind {
  position: absolute;
  bottom: 3px;
  left: 0;
  height: 2px;
  width: 0;
  border-radius: var(--cx-r-pill);
  transform: translateX(0);
  transition: transform var(--cx-dur-base) var(--cx-ease),
              width var(--cx-dur-base) var(--cx-ease),
              opacity var(--cx-dur-fast) var(--cx-ease);
  opacity: 0;
  pointer-events: none;
}
.folio-v4d .cxpre-nav-ind.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .folio-v4d .cxpre-nav-ind { transition: none; }
}
@media (max-width: 900px) {
  .folio-v4d .topbar .primary-nav {
    height: 44px;
    border-radius: 0;
    border: 0;
    border-top: 1px solid var(--cx-line);
    background: transparent;
  }
  .folio-v4d .cxpre-nav-ind { display: none; }
}

/* --- (S2) the studio title band's grid is gone with the band it laid out:
   `.cxpre-band` / `.cxpre-band-title` / `.cxpre-eyebrow-retired` were applied
   by premium.js's studioBand(), which only ever ran when a `.cx-mark` plate
   existed. Law 2 deleted the plate, so none of these classes can appear. */

/* --- the compact menu. Desktop never sees the button; below 900px it is the
   only way to the other three products, so it is a first-class control. */
.folio-v4d .cxpre-menu-btn { display: none; }
@media (max-width: 900px) {
  .folio-v4d .cxpre-menu-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: var(--cx-s2);
    padding: 0 var(--cx-s4);
    border: 1px solid var(--cx-line-strong);
    border-radius: var(--cx-r-pill);
    background: var(--cx-paper);
    color: var(--cx-ink);
    font: 550 var(--cx-t-sm) / 1 var(--cx-font-ui);
    cursor: pointer;
  }
  .folio-v4d .cxpre-menu-btn[aria-expanded="true"] { border-color: var(--cx-pre-accent); color: var(--cx-pre-accent); }
  .folio-v4d .cxpre-menu-bars { display: grid; gap: 4px; width: 16px; }
  .folio-v4d .cxpre-menu-bars i { display: block; height: 1.5px; background: currentColor; }
  /* the brand may shrink, but it may never be clipped — see below */
  .folio-v4d .topbar .brand { min-width: 0; }
}
/* Below 480px the three controls stop fitting side by side and the first
   render clipped the wordmark to "Conxfo". The word "Menu" is the thing that
   gives way — the button keeps its aria-label and its 44px square. */
@media (max-width: 480px) {
  .folio-v4d .cxpre-menu-word { display: none; }
  .folio-v4d .cxpre-menu-btn { min-width: 44px; padding: 0; justify-content: center; }
  .folio-v4d .topbar.landing-bar,
  .folio-v4d .topbar.tool-bar,
  .folio-v4d .topbar.prestudio-bar,
  .folio-v4d .topbar { gap: var(--cx-s3); }
}
.folio-v4d dialog.cxpre-menu {
  width: min(420px, calc(100vw - 2 * var(--cx-s5)));
  max-width: none;
  padding: var(--cx-s5);
  border: 1px solid var(--cx-ink);
  border-radius: var(--cx-r-sheet);
  background: var(--cx-paper);
  color: var(--cx-ink);
  box-shadow: var(--cx-shadow-hard), var(--cx-pre-shadow-3);
}
.folio-v4d dialog.cxpre-menu::backdrop { background: var(--cx-panel-a46); }
.folio-v4d .cxpre-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cx-s4);
  padding-bottom: var(--cx-s3);
  border-bottom: 1px solid var(--cx-line);
}
.folio-v4d .cxpre-menu-close {
  min-height: 44px;
  padding: 0 var(--cx-s3);
  border: 0;
  background: transparent;
  color: var(--cx-pre-accent);
  font: 550 var(--cx-t-sm) / 1 var(--cx-font-ui);
  cursor: pointer;
}
.folio-v4d .cxpre-menu-doors { display: grid; }
.folio-v4d .cxpre-menu-doors a {
  min-height: 56px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-content: center;
  gap: 2px var(--cx-s4);
  padding: var(--cx-s3) 0;
  border-bottom: 1px solid var(--cx-line);
  color: var(--cx-ink);
  text-decoration: none;
}
.folio-v4d .cxpre-menu-doors a:last-child { border-bottom: 0; }
.folio-v4d .cxpre-menu-doors b { font: 400 var(--cx-t-d5) / 1.1 var(--cx-font-display); }
.folio-v4d .cxpre-menu-doors small { grid-column: 1; color: var(--cx-ink60); font-size: var(--cx-t-xs); }
.folio-v4d .cxpre-menu-doors i {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  color: var(--cx-pre-accent);
  font-style: normal;
}
.folio-v4d .cxpre-menu-doors a:hover b,
.folio-v4d .cxpre-menu-doors a:focus-visible b { color: var(--cx-pre-accent); }

/* --- breadcrumbs, in mono, as a trail rather than a title */
.folio-v4d .ats-plate-nav,
.folio-v4d .cxpre-crumbs {
  font-family: var(--cx-font-mono);
  font-size: var(--cx-t-micro);
  letter-spacing: var(--cx-track-micro);
  text-transform: uppercase;
}

/* --- true segmented controls: one recessed track, one raised thumb */
.folio-v4d .segmented,
.folio-v4d .cover-mobile-switch,
.folio-v4d .resume-studio-modebar,
.folio-v4d .cover-mode-tabs {
  display: inline-flex;
  gap: 0;
  padding: 3px;
  border: 1px solid var(--cx-line);
  border-radius: var(--cx-r-pill);
  background: var(--cx-mist);
  box-shadow: inset 0 1px 2px var(--cx-ink-a06);
}
.folio-v4d .segmented button,
.folio-v4d .cover-mobile-switch button,
.folio-v4d .resume-studio-modebar button,
.folio-v4d .cover-mode-tabs button {
  border: 0;
  border-radius: var(--cx-r-pill);
  background: transparent;
  color: var(--cx-ink60);
  box-shadow: none;
  transition: background var(--cx-dur-fast) var(--cx-ease),
              color var(--cx-dur-fast) var(--cx-ease),
              box-shadow var(--cx-dur-fast) var(--cx-ease);
}
.folio-v4d .segmented button:hover,
.folio-v4d .cover-mobile-switch button:hover,
.folio-v4d .resume-studio-modebar button:hover,
.folio-v4d .cover-mode-tabs button:hover { color: var(--cx-ink); }
.folio-v4d .segmented button.on,
.folio-v4d .cover-mobile-switch button.on,
.folio-v4d .resume-studio-modebar button.on,
.folio-v4d .cover-mode-tabs button.on {
  background: var(--cx-paper);
  border: 0;
  color: var(--cx-pre-accent);
  box-shadow: var(--cx-pre-shadow-1), var(--cx-pre-inner-hi-light);
}
.folio-v4d .cover-mode-tabs button.on > span { color: inherit; }

/* --- inputs: one hairline, one navy focus, one consistent height */
.folio-v4d input[type="text"],
.folio-v4d input[type="email"],
.folio-v4d input[type="url"],
.folio-v4d input[type="search"],
.folio-v4d input[type="password"],
.folio-v4d input:not([type]),
.folio-v4d select,
.folio-v4d textarea {
  border: 1px solid var(--cx-line);
  border-radius: var(--cx-r-sm);
  background: var(--cx-paper);
  color: var(--cx-ink);
  transition: border-color var(--cx-dur-fast) var(--cx-ease),
              box-shadow var(--cx-dur-fast) var(--cx-ease);
}
.folio-v4d input:hover:not(:disabled),
.folio-v4d select:hover:not(:disabled),
.folio-v4d textarea:hover:not(:disabled) { border-color: var(--cx-line-strong); }
.folio-v4d input:disabled,
.folio-v4d select:disabled,
.folio-v4d textarea:disabled {
  background: var(--cx-mist);
  color: var(--cx-ink60);
  cursor: not-allowed;
}

/* --- one icon set. 20px grid, 1.5px stroke, non-scaling so the weight is
   identical at 20px and at 56px. Any icon that disagrees is replaced. */
.folio-v4d svg[data-cx-icon] {
  fill: none;
  stroke: currentColor;
  stroke-width: var(--cx-pre-icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.folio-v4d svg[data-cx-icon] * {
  vector-effect: non-scaling-stroke;
  stroke-width: var(--cx-pre-icon-stroke);
}
.folio-v4d .ats-source-icon svg[data-cx-icon] { width: 24px; height: 24px; }
.folio-v4d .ats-source-icon { background: var(--cx-mist); color: var(--cx-ink); border-color: var(--cx-line); }
.folio-v4d .portfolio-modebar svg[data-cx-icon] { width: 20px; height: 20px; }
.folio-v4d .canvas-product-runway svg[data-cx-icon],
.folio-v4d .canvas-package-map svg[data-cx-icon],
.folio-v4d .home-product-link svg[data-cx-icon] { width: 20px; height: 20px; }
.folio-v4d .canvas-product-runway > a > i,
.folio-v4d .canvas-package-map > a > i { color: var(--cx-ink); }
.folio-v4d .canvas-product-runway > a > i { border-color: var(--cx-line); }

/* ==========================================================================
   5 · MOTION CHOREOGRAPHY
   Entrances move, they never fade content in. Opacity starts and stays at 1;
   only transform animates, so a stalled script can never hide a word.
   ========================================================================== */
.folio-v4d .cxpre-enter { animation: cxpre-rise var(--cx-dur-base) var(--cx-ease) both; }
.folio-v4d .cxpre-enter[data-cx-step="0"] { animation-delay: 0ms; }
.folio-v4d .cxpre-enter[data-cx-step="1"] { animation-delay: var(--cx-pre-stagger); }
.folio-v4d .cxpre-enter[data-cx-step="2"] { animation-delay: calc(var(--cx-pre-stagger) * 2); }
.folio-v4d .cxpre-enter[data-cx-step="3"] { animation-delay: calc(var(--cx-pre-stagger) * 3); }
.folio-v4d .cxpre-enter[data-cx-step="4"] { animation-delay: calc(var(--cx-pre-stagger) * 4); }
.folio-v4d .cxpre-enter[data-cx-step="5"] { animation-delay: calc(var(--cx-pre-stagger) * 5); }
/* `translate`, not `transform`: the V4 base pins `.reveal { transform: none
   !important }` so no stalled entrance can hide content, and !important beats
   an animation. The independent translate property moves the element without
   touching that pin — and still never touches opacity. */
@keyframes cxpre-rise {
  from { translate: 0 14px; opacity: 1; }
  to { translate: 0 0; opacity: 1; }
}

/* the route crossfade. Also transform-only at the tail, and the incoming
   page is fully opaque the instant it is in the DOM. */
.folio-v4d #main { animation: cxpre-cross var(--cx-pre-dur-cross) var(--cx-ease) both; }
@keyframes cxpre-cross {
  from { translate: 0 6px; opacity: 1; }
  to { translate: 0 0; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .folio-v4d .cxpre-enter,
  .folio-v4d #main { animation: none; }
}

/* The workspace arc, driven by scroll position. The progress is drawn ON the
   arc that is already there — the same curve, the same 3px stroke, in navy,
   revealed left to right with a clip. It is inserted INSIDE .career-trajectory
   (which is absolutely positioned and aria-hidden) so it cannot take a cell in
   the runway's grid; the first attempt prepended it to .career-runway and the
   two-column layout collapsed. */
.folio-v4d .career-trajectory { overflow: visible; }
.folio-v4d .cxpre-arc {
  position: absolute;
  inset: -3px 0 0 0;
  border-top: 3px solid transparent;
  border-radius: 50% 50% 0 0;
  clip-path: inset(0 calc(100% - var(--cx-pre-arc, 0) * 100%) 0 0);
  transition: clip-path 120ms linear;
  pointer-events: none;
}
.folio-v4d .cxpre-arc-progress {
  position: absolute;
  display: block;
  width: auto;
  height: auto;
  box-shadow: none;
  inset: -3px 0 0 0;
  border-top: 3px solid var(--cx-pre-accent);
  border-radius: 50% 50% 0 0;
  background: transparent;
}
@media (prefers-reduced-motion: reduce) {
  .folio-v4d .cxpre-arc { transition: none; }
}

/* ==========================================================================
   6 · STATES, ALL ON TOKENS
   ========================================================================== */

/* --- skeleton. A 4% ink shimmer over real paper; the label underneath stays
   readable, because "loading" is a state, not a blank. */
.folio-v4d .cxpre-skeleton,
.folio-v4d .resume-template-thumb:not(.loaded)::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    var(--cx-pre-skeleton-lift) 0 32%,
    var(--cx-pre-skeleton) 50%,
    var(--cx-pre-skeleton-lift) 68% 100%);
  background-size: 260% 100%;
  animation: cxpre-shimmer 1400ms linear infinite;
  pointer-events: none;
}
@keyframes cxpre-shimmer {
  from { background-position: 130% 0; }
  to { background-position: -130% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .folio-v4d .cxpre-skeleton,
  .folio-v4d .resume-template-thumb:not(.loaded)::before { animation: none; }
}
.folio-v4d .template-preview-loading {
  font-family: var(--cx-font-mono);
  font-size: var(--cx-t-micro);
  letter-spacing: var(--cx-track-micro);
  text-transform: uppercase;
  color: var(--cx-ink60);
}

/* --- toast: bottom-left, mono, ink block, one hairline */
.folio-v4d .toast {
  right: auto;
  bottom: var(--cx-s6);
  left: var(--cx-s6);
  /* R2 (§31) — WAS: var(--cx-ink) / var(--cx-ink). WHY: the dark-band block in
     styles.css re-points --cx-ink to --cx-panel-ink inside .toast,
     so the toast painted its own ground near-WHITE and then wrote white text
     on it — "ATS scan complete · 68/100" measured 1.16:1. A band that
     re-points a token may not paint itself with that token; the absolute pins
     exist for exactly this. */
  border: 1px solid var(--cx-ink-abs);
  border-radius: var(--cx-r-sm);
  background: var(--cx-ink-abs);
  color: var(--cx-paper-abs);
  font-family: var(--cx-font-mono);
  font-size: var(--cx-t-xs);
  letter-spacing: .04em;
  box-shadow: var(--cx-pre-shadow-3);
}

/* --- dialogs: a paper sheet with the hard shadow and a navy focus trap */
.folio-v4d dialog {
  border: 1px solid var(--cx-ink);
  border-radius: var(--cx-r-sheet);
  background: var(--cx-paper);
  color: var(--cx-ink);
  box-shadow: var(--cx-shadow-hard), var(--cx-pre-shadow-3);
}
.folio-v4d dialog::backdrop { background: var(--cx-panel-a46); }
.folio-v4d dialog :focus-visible {
  outline: var(--cx-pre-ring-w) solid var(--cx-pre-ring);
  outline-offset: var(--cx-pre-ring-offset);
}

/* --- inline messages, one per semantic token */
.folio-v4d .cxpre-note {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--cx-s3);
  padding: var(--cx-s3) var(--cx-s4);
  border: 1px solid var(--cx-line);
  border-left-width: 3px;
  border-radius: var(--cx-r-sm);
  font-size: var(--cx-t-sm);
}
.folio-v4d .cxpre-note[data-state="ok"] { border-color: var(--cx-ok-line); border-left-color: var(--cx-ok-fg); background: var(--cx-ok-bg); color: var(--cx-ok-fg); }
.folio-v4d .cxpre-note[data-state="warn"] { border-color: var(--cx-warn-line); border-left-color: var(--cx-warn-fg); background: var(--cx-warn-bg); color: var(--cx-warn-fg); }
.folio-v4d .cxpre-note[data-state="ask"] { border-color: var(--cx-ask-line); border-left-color: var(--cx-ask-fg); background: var(--cx-ask-bg); color: var(--cx-ask-fg); }
.folio-v4d .cxpre-note[data-state="stop"] { border-color: var(--cx-stop-line); border-left-color: var(--cx-stop-fg); background: var(--cx-stop-bg); color: var(--cx-stop-fg); }

/* ==========================================================================
   7 · HONESTY
   The inherited workspace rail stamped a filled tick on evidence that had not
   been written yet. A tick is a claim. Until the evidence exists the marker is
   an empty circle and the rail is drawn in the "ask" register, not "ok".
   ========================================================================== */
.folio-v4d .career-proof-library article { border-left-color: var(--cx-line-strong); }
.folio-v4d .career-proof-library article[data-cx-done="1"] { border-left-color: var(--cx-ok-fg); }
.folio-v4d .career-proof-library article > em {
  border: 1px solid var(--cx-line-strong);
  background: transparent;
  color: var(--cx-ink60);
}
.folio-v4d .career-proof-library article[data-cx-done="1"] > em {
  border-color: var(--cx-ok-fg);
  background: var(--cx-ok-fg);
  color: var(--cx-paper-abs);
}
/* The screen-reader-only utility the honest rail needs: the tick is aria-hidden
   decoration, so the state has to be readable as words by a screen reader. */
.folio-v4d .visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Every fabricated figure on a marketing page is labelled as a sample. */
.folio-v4d .canvas-package-map > .cxpre-sample { grid-column: 1 / -1; }
.folio-v4d .cxpre-sample {
  display: block;
  margin-bottom: var(--cx-s2);
  font: 500 var(--cx-t-micro) / 1.6 var(--cx-font-mono);
  letter-spacing: var(--cx-track-micro);
  text-transform: uppercase;
  color: var(--cx-ink60);
}

/* ==========================================================================
   8 · "COMMAND INK" preview — the few places the light skin was hard-wired
   ========================================================================== */
/* V3 uses --cx-panel (and its legacy alias --navy) as BOTH a dark band ground
   and as the colour of dark text. Flipping the ground alone leaves a page of
   near-black words on near-black paper — measured, on the first render: 13
   elements between 1.00:1 and 1.20:1. Inside the workspace subtree the name
   means "text", so it is re-pointed to ink there; the two places on this route
   that actually PAINT it are given their own ground below. */
:root[data-cx-theme="ink"] .folio-v4d .career-workspace {
  --cx-panel: var(--cx-ink);
  --navy: var(--cx-ink);
  --surface-inverse: var(--cx-ink);
  --text-strong: var(--cx-ink);
  --text-muted: var(--cx-ink60);
  --text-subtle: var(--cx-ink60);
}
:root[data-cx-theme="ink"] .folio-v4d .portfolio-feature {
  background: var(--cx-mist);
  border: 1px solid var(--cx-line);
  color: var(--cx-ink);
}
:root[data-cx-theme="ink"] .folio-v4d .portfolio-feature strong { color: var(--cx-ink); }
:root[data-cx-theme="ink"] .folio-v4d .portfolio-feature small { color: var(--cx-ink60); }
:root[data-cx-theme="ink"] .folio-v4d .skip-link {
  background: var(--cx-paper);
  border-color: var(--cx-ink);
  color: var(--cx-ink);
}
:root[data-cx-theme="ink"] .folio-v4d .career-workspace,
:root[data-cx-theme="ink"] .folio-v4d .career-artifact .artifact-resume-sheet,
:root[data-cx-theme="ink"] .folio-v4d .career-artifact .artifact-ats-sheet,
:root[data-cx-theme="ink"] .folio-v4d .career-artifact .artifact-letter-sheet {
  color: var(--cx-ink);
}
:root[data-cx-theme="ink"] .folio-v4d .topbar .workspace-button {
  border-color: var(--cx-ink);
  background: var(--cx-ink);
  color: var(--cx-paper);
}
:root[data-cx-theme="ink"] .folio-v4d .button-primary {
  background: var(--cx-ink);
  border-color: var(--cx-ink);
  color: var(--cx-paper);
}
:root[data-cx-theme="ink"] .folio-v4d .cxpre-theme-note {
  position: fixed;
  z-index: 60;
  right: var(--cx-s6);
  bottom: var(--cx-s6);
  padding: var(--cx-s2) var(--cx-s4);
  border: 1px solid var(--cx-line-strong);
  border-radius: var(--cx-r-pill);
  background: var(--cx-mist);
  color: var(--cx-ink60);
  font: 500 var(--cx-t-micro) / 1.8 var(--cx-font-mono);
  letter-spacing: var(--cx-track-micro);
  text-transform: uppercase;
}