/* ============================================================================
   THE PAPER FLIGHT — the skin layer. LOADS LAST. ADDITIVE ONLY.
   ----------------------------------------------------------------------------
   Brand law (BINDING): vault Conxto/"Conxfolio Brand — The Paper Flight
   2026-09-01.md".  Canonical artifact: conxto-design-preview/
   conxfolio-landing-paperflight.html.

   tokens.css already re-points the whole palette at the source, so most of this
   tree is re-themed without a single selector being named. This file carries
   what a token cannot express on its own:

     §1  THE PAPERCRAFT LAW — every literal shadow inherited from the older
         skins is killed, and the brand's REAL sheet shadow is put back
         deliberately; plus the focus indication, in the red ink.
     §2  THE TYPE RAMP — Instrument Serif 400 for display (italic = the playful
         beat), Hanken Grotesk for UI, Caveat for the handwritten margin voice,
         and the brand's eyebrow with its rotated 7px red square.
     §3  THE ESCAPED PALETTES — the four local custom-property blocks and the
         handful of literals that never went through tokens.css, including the
         one route by which a BLUE document value reached product chrome.
     §4  THE SHARED BRAND MATERIALS — the papercraft kit every surface builds
         from: tape, stickers, stamps, handwriting, sheets, clips, the red
         progress hairline, torn edges, the logo lockup. USE THESE.
     §4b THE HOME PAGE — the canonical landing, rebuilt as the SPA's home.
     §5  THE INTERIORS — owned by the four tool sheets (pf-resume.css,
         pf-ats.css, pf-cover.css, pf-portfolio.css), which load after this one.
     §6  THE WORKSPACE — the clothesline.

   NOT re-themed, deliberately: every résumé TEMPLATE render and every portfolio
   WORLD render. Both are drawn inside <iframe> elements — separate documents
   this stylesheet cannot reach — so the boundary is structural, not a promise.
   ========================================================================== */

/* ============================================================================
   §1 · THE PAPERCRAFT LAW
   ----------------------------------------------------------------------------
   The brand allows exactly two shadows: the real sheet shadow (a whisper
   double-layer, on paper that is meant to be a sheet) and the sticker's hard
   2px offset. Nothing else.

   The tree inherited ~360 literal box-shadows from four earlier skins, in four
   different colour families. Rather than audit them one by one and hope, this
   kills every shadow at the root and the brand puts its own back, by name, in
   §4 and in the tool sheets. So every shadow on screen is one the brand put
   there — which is the whole point.

   *** CONSEQUENCE FOR THE TOOL SHEETS: the reset is `!important`, so a plain
   `box-shadow:` in pf-resume.css / pf-ats.css / pf-cover.css / pf-portfolio.css
   will NOT paint. Use the §4 utilities (.pf-sheet, .pf-stick) — they already
   carry the brand shadow with the priority to win — or write `!important`. ***
   ========================================================================== */
*, *::before, *::after { box-shadow: none !important; }

/* Focus has to be visible after that, and three rules in the tree switch their
   own outline off and lean on a shadow (styles.css .ats-source-card,
   portfolio-designs-v2.css / portfolio-ink-paper.css .portfolio-visual-world).
   The ring is restored here, in the red ink, for everything. */
.folio-v5 :focus-visible {
  outline: 2px solid var(--cx-pre-accent) !important;
  outline-offset: 2px !important;
}
/* …but NOT the routed region itself. app.js focuses <main id="main"
   tabindex="-1"> after every route render, and Chromium counts that as
   :focus-visible — so every page in the product was drawing a page-sized
   accent box around its whole content on load (it did the same in navy before
   this skin; it is inherited, not new). The skip link still moves focus, which
   is what actually matters; a ring around the entire page communicates
   nothing. Real controls keep theirs. */
.folio-v5 #main:focus-visible, .folio-v5 #main:focus { outline: none !important; }

.folio-v5 .ats-source-card:focus-visible,
.folio-v5 .portfolio-visual-world:focus-visible,
.folio-v5 .resume-design-card:focus-visible,
.folio-v5 .portfolio-source-choice:focus-visible {
  outline: 2px solid var(--cx-pre-accent) !important;
  outline-offset: 3px !important;
}
/* Every band in this skin is a paper step, so the ring keeps the ordinary red
   ink everywhere — no lifted step. */
.folio-v5 .cons-field :focus-visible,
.folio-v5 .cons-rail-dark :focus-visible { outline-color: var(--cx-pre-accent) !important; }

/* ============================================================================
   §2 · THE TYPE RAMP
   ========================================================================== */
.folio-v5 h1, .folio-v5 h2, .folio-v5 h3,
.folio-v5 .display, .folio-v5 [class*="-title"] h2 {
  font-weight: var(--cx-display-weight, 300);
  letter-spacing: var(--cx-display-track, -.01em);
}
/* Instrument Serif has a large x-height and much tighter sidebearings than
   Cormorant, so the Conservatory lift comes back off: this is the brand's own
   display ramp, the one the canonical landing is set in. */
:root {
  --cx-t-d1: clamp(44px, 5.2vw, 74px);
  --cx-t-d2: clamp(36px, 4.2vw, 56px);
  --cx-t-d3: clamp(28px, 3vw, 40px);
  --cx-t-d4: 24px;
  --cx-t-d5: 21px;
  --cx-pre-d1: clamp(40px, 5.6vw, 88px);
  --cx-pre-d2: clamp(34px, 4.2vw, 64px);
  --cx-pre-d3: clamp(26px, 2.8vw, 40px);
}
/* THE SECTION MARK. The brand's eyebrow: 11px / 700 / uppercase / .09em, led by
   a 7px RED square rotated 45° — a little red diamond, not a bullet. Every
   surface's section eyebrow uses this; the tree already renders `.eyebrow`. */
.folio-v5 .eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font: 700 11px/1 var(--cx-font-ui);
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--cx-ink);
}
.folio-v5 .eyebrow::before {
  content: ""; width: 7px; height: 7px; flex: none; border-radius: 1px;
  background: var(--cx-cons-vermilion);
  transform: rotate(45deg);
}
/* the topbar's verb nav: `01 Fold · Résumé`. The number is the mono beat pill
   in red; the verb+name pair is the law (never a verb on its own). */
.folio-v5 .topbar .primary-nav a em {
  font: 700 10px/1 var(--cx-font-mono); font-style: normal;
  color: var(--cx-cons-vermilion); margin-right: 6px; letter-spacing: .02em;
}
/* the field is porcelain: the eyebrow keeps the standard ink it has elsewhere. */
.folio-v5 .cons-field .eyebrow, .folio-v5 .cons-rail-dark .eyebrow { color: var(--cx-ink); }

/* ============================================================================
   §3 · THE ESCAPED PALETTES
   ----------------------------------------------------------------------------
   Four local custom-property blocks and a small set of literals never passed
   through tokens.css. Each is re-pointed here at the same name, so the rules
   that consume them are untouched.
   ========================================================================== */

/* (a) the public portfolio showcase shell (portfolio-designs-v2.css:403) */
.folio-v5 body.portfolio-showcase-route, body.portfolio-showcase-route {
  --showcase-ink: var(--cx-ink);
  --showcase-paper: var(--cx-cons-parchment);
  --showcase-line: color-mix(in srgb, var(--cx-ink) 16%, transparent);
}
/* (b) the design-detail shell around the document iframe (…:761) */
.folio-v5 .portfolio-showcase-detail {
  --cv-rule-strong: color-mix(in srgb, var(--cx-ink) 26%, transparent);
  --cv-wash: var(--cx-cons-parchment);
  --cv-shadow: none;
}
/* (d) the orphaned ATS sheets carry an --ip-* block. They are not linked by
   index.html today, but they are re-pointed so that re-linking one of them can
   never drag the Ink & Paper palette back in. */
body.career-canvas-v3.folio-v5:has(.ats-report-v2) {
  --ip-ink: var(--cx-ink); --ip-ink-soft: var(--cx-ink60);
  --ip-paper: var(--cx-cons-paper); --ip-ivory: var(--cx-cons-parchment); --ip-porcelain: var(--cx-cons-bone);
  --ip-line: var(--cx-ink); --ip-line-soft: var(--cx-cons-hair); --ip-muted: var(--cx-cons-quiet);
  --ip-shadow: none;
}
.folio-v5:has(.ats-report-v2) #main { background: var(--cx-cons-parchment) !important; }

/* (e) THE ONE BLUE LEAK. Each résumé template carries its own accent, and five
   of the 37 are blue (#1D4ED8, #203A74, #1746A2, #1E3A5F, #4B3F8F). Those
   values belong to the DOCUMENT and are correct there — but the design gallery
   was piping them into the CARD FRAME, which is chrome. The binding is broken
   at the chrome end so the templates keep their own colour and the product
   chrome carries none of it. */
.folio-v5 .resume-design-card,
.folio-v5 .home-resume-card,
.folio-v5 .resume-template-card { --template-accent: var(--cx-ink) !important; }
/* (f) the letterbox behind a portfolio world's artwork is chrome, not artwork.
   It becomes the field rather than a near-black of its own. */
.folio-v5 .portfolio-world-canvas,
.folio-v5 .portfolio-world-canvas img,
.folio-v5 .portfolio-world-canvas video,
.folio-v5 .portfolio-showcase-art { background: var(--cx-cons-field) !important; }
/* …but the iframe a document renders INTO keeps its own paper. */
.folio-v5 .portfolio-detail-frame iframe,
.folio-v5 .portfolio-detail-fullscreen-browser iframe,
.folio-v5 .portfolio-frame-wrap iframe { background: #fff !important; }

/* (g) the ATS score command block composed its own dark gradient from three
   literals. Flat field instead. */
.folio-v5 .ats-score-command { background: var(--cx-cons-field) !important; }
.folio-v5 .ats-score-command, .folio-v5 .ats-score-command * { color: var(--cx-cons-char); }
.folio-v5 .ats-score-command h1, .folio-v5 .ats-score-command h2,
.folio-v5 .ats-score-command h3, .folio-v5 .ats-score-command b,
.folio-v5 .ats-score-command strong { color: var(--cx-ink); }
.folio-v5 .ats-score-command .ats-score-arc-value,
.folio-v5 .ats-score-command [data-score-arc] { stroke: var(--cx-cons-vermilion) !important; }

/* (h) THE SCORE RING keeps its motif and changes its ink. The canon draws the
   ATS arc in the red thread on a hair-coloured track, with the dimension bars
   left in ink — the arc is the one signal, the bars are structure. The ring is
   a conic-gradient (ats-cvflow.css:252), not an SVG, so it is restyled at the
   gradient rather than at a stroke. */
.folio-v5 .ats-score-ring {
  background: conic-gradient(var(--cx-cons-vermilion) calc(var(--ats-score) * 1%), var(--cx-cons-hair) 0) !important;
}
.folio-v5 .ats-score-ring::before { background: var(--cx-cons-paper) !important; }
/* the same thread on any SVG-drawn gauge elsewhere in the product */
.folio-v5 [class*="score"] svg circle[stroke-dasharray],
.folio-v5 [class*="gauge"] svg circle[stroke-dasharray] { stroke: var(--cx-cons-vermilion); }
.folio-v5 [class*="score"] svg circle:not([stroke-dasharray]),
.folio-v5 [class*="gauge"] svg circle:not([stroke-dasharray]) { stroke: var(--cx-cons-hair); }

/* general flat-law tidy-up: surfaces that leaned on a shadow for their edge get
   the hairline the rest of the system uses. */
.folio-v5 .ats-source-card, .folio-v5 .portfolio-source-choice,
.folio-v5 .portfolio-visual-world, .folio-v5 .resume-design-card,
.folio-v5 .portfolio-library-tools, .folio-v5 .portfolio-project-editor,
.folio-v5 .portfolio-record-editor, .folio-v5 .portfolio-document-menu > div,
.folio-v5 .portfolio-detail-browser, .folio-v5 .portfolio-publish-action {
  border: 1px solid var(--cx-line);
}
.folio-v5 .portfolio-detail-browserbar { background: var(--cx-cons-parchment); }
.folio-v5 .portfolio-detail-stage, .folio-v5 .portfolio-live-stage,
.folio-v5 .portfolio-detail-fullscreen > main { background: var(--cx-cons-bone) !important; }

/* ============================================================================
   §4 · THE SHARED BRAND MATERIALS — the papercraft kit.
   ----------------------------------------------------------------------------
   ***  USE THESE. DO NOT REINVENT THEM.  ***
   Every Conxfolio surface — home, thresholds, galleries, builders, reports,
   workspace — builds its brand texture from the eight utilities below. They are
   declared once, at `.folio-v5` scope, so a tool sheet (pf-resume.css,
   pf-ats.css, pf-cover.css, pf-portfolio.css) only has to place them.

     .pf-tape            a translucent tape strip with dashed edges. Absolutely
                         positioned — give the parent `position:relative` and
                         set `--tr` for its angle (default -4deg).
     .pf-stick           a sticker pill: sheet ground, ink border, HARD 2px
                         offset shadow, slight rotation via `--r`.
                         `.pf-stick.red` = the red-ink variant.
                         `.pf-stick.on`  = selected (ink fill, paper text).
     .pf-stamp           a rubber stamp: bordered, rotated, red. Add `.on` and
                         it SLAMS in (scale 2.2 → 1 with overshoot), delayed by
                         `--qd`. `.pf-stamp.ink` for the ink verdict variant.
     .pf-hand            the handwritten margin voice (Caveat, red). HONEST
                         ASIDES ONLY — never a claim that needs proof.
     .pf-sheet           a real sheet: sheet ground, 4px corner, the whisper
                         double-layer shadow, a resting tilt (`--tk`) that
                         STRAIGHTENS and lifts on hover.
     .pf-clip            the wooden clip that hangs an artefact on the line.
     .pf-progress > i    the red progress hairline (2px, ink hairline track).
     .pf-torn            the torn-paper edge between two paper bands. Contains
                         an <svg viewBox="0 0 1440 16"> whose path it paints.
     .pf-edge            a 3px red active edge (use on a selected rail item).

   Motion law: performances, not fades. Every utility above has a settled final
   state under `prefers-reduced-motion: reduce` (bottom of this section).
   ========================================================================== */

/* ---- tape ---- */
.folio-v5 .pf-tape {
  position: absolute; z-index: 3; width: 74px; height: 22px; top: -11px; left: 38px;
  background: color-mix(in srgb, var(--cx-cons-tan) 78%, transparent);
  border-left: 1px dashed var(--cx-ink-a12);
  border-right: 1px dashed var(--cx-ink-a12);
  transform: rotate(var(--tr, -4deg));
  pointer-events: none;
}

/* ---- stickers ---- */
.folio-v5 .pf-stick {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--cx-cons-paper); border: 1.5px solid var(--cx-ink); border-radius: 999px;
  padding: 8px 15px; font: 600 12.5px/1 var(--cx-font-ui); color: var(--cx-ink);
  box-shadow: 2px 2px 0 var(--cx-ink) !important;
  transform: rotate(var(--r, 0deg));
  transition: transform .25s var(--cx-ease), box-shadow .25s var(--cx-ease);
}
.folio-v5 .pf-stick.red { border-color: var(--cx-cons-vermilion); color: var(--cx-cons-vermilion-deep); box-shadow: 2px 2px 0 var(--cx-cons-vermilion) !important; }
.folio-v5 .pf-stick.on { background: var(--cx-ink); color: var(--cx-cons-paper); }
.folio-v5 a.pf-stick:hover, .folio-v5 button.pf-stick:hover { transform: rotate(0deg) translateY(-2px); box-shadow: 3px 3px 0 var(--cx-ink) !important; }

/* ---- rubber stamps ---- */
.folio-v5 .pf-stamp {
  display: inline-block;
  border: 2.5px solid var(--cx-cons-vermilion); border-radius: 5px;
  color: var(--cx-cons-vermilion); background: color-mix(in srgb, var(--cx-cons-paper) 92%, transparent);
  font: 800 12px/1 var(--cx-font-ui); letter-spacing: .09em; text-transform: uppercase;
  padding: 8px 12px;
  transform: rotate(-8deg) scale(2.2); opacity: 0;
}
.folio-v5 .pf-stamp.ink { border-color: var(--cx-ink); color: var(--cx-ink); }
.folio-v5 .pf-stamp.on {
  opacity: .95; transform: rotate(-7deg) scale(1);
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1) var(--qd, .3s), opacity .15s ease var(--qd, .3s);
}

/* ---- the handwriting ---- */
.folio-v5 .pf-hand {
  font: 600 19px/1.2 var(--cx-font-hand);
  color: var(--cx-cons-vermilion-deep);
}

/* ---- real sheets ---- */
.folio-v5 .pf-sheet {
  position: relative;
  background: var(--cx-cons-paper); border-radius: 6px;
  box-shadow: var(--cx-shadow-raise) !important;
  transform: rotate(var(--tk, -.7deg));
  transition: transform .4s cubic-bezier(.34, 1.3, .64, 1), box-shadow .4s var(--cx-ease);
}
.folio-v5 .pf-sheet:hover { transform: rotate(0deg) translateY(-8px); box-shadow: var(--cx-shadow-lift) !important; }

/* ---- the clip ---- */
.folio-v5 .pf-clip {
  position: absolute; top: -13px; left: 50%; margin-left: -8px;
  width: 16px; height: 26px; border-radius: 3px;
  background: linear-gradient(var(--cx-cons-tan), var(--cx-cons-field-soft));
  box-shadow: 0 1px 2px var(--cx-shadow-ink-deep) !important;
}

/* ---- the red progress hairline ---- */
.folio-v5 .pf-progress { position: relative; height: 2px; border-radius: 1px; background: var(--cx-cons-hair); }
.folio-v5 .pf-progress > i { position: absolute; left: 0; top: 0; height: 2px; width: 0; border-radius: 1px; background: var(--cx-cons-vermilion); transition: width .2s linear; }

/* ---- the torn edge ---- */
.folio-v5 .pf-torn { display: block; width: 100%; height: 16px; line-height: 0; }
.folio-v5 .pf-torn svg { display: block; width: 100%; height: 16px; }
.folio-v5 .pf-torn svg path { fill: var(--cx-cons-bone); }
.folio-v5 .pf-torn-up { position: absolute; top: -16px; left: 0; transform: scaleY(-1); }

/* ---- the red active edge ---- */
.folio-v5 .pf-edge { box-shadow: inset 3px 0 0 var(--cx-cons-vermilion) !important; }

/* ---- the mark: the plane on the ink tile, and the Conx/folio split ---- */
.folio-v5 .pf-logo { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
.folio-v5 .pf-tile {
  display: grid; place-items: center; flex: none; width: 32px; height: 32px;
  background: var(--cx-ink); border-radius: 9px;
  transform: rotate(-6deg); transition: transform .3s var(--cx-ease);
}
.folio-v5 .pf-logo:hover .pf-tile { transform: rotate(6deg); }
.folio-v5 .pf-tile svg { width: 19px; height: 19px; display: block; }
.folio-v5 .pf-wing-a { fill: var(--cx-cons-paper); }
.folio-v5 .pf-wing-b { fill: var(--cx-cons-field-soft); }
.folio-v5 .pf-crease { stroke: var(--cx-cons-vermilion); stroke-width: 6; }
.folio-v5 .pf-wm {
  font: 400 22px/1 var(--cx-font-display); color: var(--cx-ink); letter-spacing: 0;
}
.folio-v5 .pf-wm em { font-style: italic; color: var(--cx-cons-vermilion); }

@media (prefers-reduced-motion: reduce) {
  .folio-v5 .pf-stamp { opacity: .95 !important; transform: rotate(-7deg) scale(1) !important; }
  .folio-v5 .pf-sheet, .folio-v5 .pf-stick { transition: none; }
}

/* ============================================================================
   §4b · THE HOME PAGE — the canonical Paper Flight landing, as the SPA's home.
   ----------------------------------------------------------------------------
   Every rule below is namespaced .pf-home, so it can touch nothing else in the
   product. Source: conxto-design-preview/conxfolio-landing-paperflight.html.
   ========================================================================== */
.pf-home {
  --paper: var(--cx-cons-parchment);
  --paper2: var(--cx-cons-bone);
  --sheet: var(--cx-cons-paper);
  --ink: var(--cx-ink);
  --ink-deep: #0d0c09;
  --char: var(--cx-cons-char);
  --faint: var(--cx-cons-faint);
  --quiet: var(--cx-cons-quiet);
  --rule: var(--cx-cons-hair);
  --red: var(--cx-cons-vermilion);
  --red-deep: var(--cx-cons-vermilion-deep);
  --shadow: var(--cx-shadow-raise);
  --shadow-lift: var(--cx-shadow-lift);
  --display: var(--cx-font-display);
  --sans: var(--cx-font-ui);
  --hand: var(--cx-font-hand);
  --mono: var(--cx-font-mono);
  --max: 1200px;
  background: var(--paper); color: var(--char);
  font: 400 15px/1.65 var(--sans);
  overflow-x: hidden;
}
.pf-home *, .pf-home *::before, .pf-home *::after { box-sizing: border-box; }
.pf-home h1, .pf-home h2, .pf-home h3 { font-family: var(--display); font-weight: 400; color: var(--ink); letter-spacing: -.01em; margin: 0; }
.pf-home p { margin: 0; }
.pf-home a { color: var(--ink); text-decoration: none; }
.pf-home img { max-width: 100%; }
.pf-home ::selection { background: var(--red); color: var(--paper); }
.pf-home .pf-wrap { max-width: var(--max); margin: 0 auto; padding: 0 32px; }

/* the eyebrow with the red diamond mark — the brand's section mark */
.pf-home .eyebrow { display: inline-flex; align-items: center; gap: 9px; font: 700 11px/1 var(--sans); letter-spacing: .09em; text-transform: uppercase; color: var(--ink); }
.pf-home .eyebrow::before { content: ""; width: 7px; height: 7px; flex: none; background: var(--red); border-radius: 1px; transform: rotate(45deg); }

/* buttons + link-lines */
.pf-home .pf-btn { display: inline-flex; align-items: center; gap: 11px; background: var(--ink); color: var(--cx-cons-paper); border-radius: 999px; padding: 16px 28px; font: 600 14.5px/1 var(--sans); transition: background .25s, gap .25s, transform .25s; }
.pf-home .pf-btn:hover { background: var(--ink-deep); gap: 16px; transform: rotate(-1deg); }
.pf-home .pf-btn.red { background: var(--red); }
.pf-home .pf-btn.red:hover { background: var(--red-deep); }
.pf-home .pf-btn.big { padding: 20px 36px; font-size: 15.5px; }
.pf-home .pf-linkline { font: 600 13px/1 var(--sans); color: var(--ink); border-bottom: 2px solid var(--red); padding-bottom: 4px; display: inline-flex; gap: 8px; transition: gap .2s; }
.pf-home .pf-linkline:hover { gap: 13px; }
.pf-home .pf-hand { font: 600 19px/1.2 var(--hand); color: var(--red-deep); }
.pf-home .pf-lead { margin-top: 18px; max-width: 40ch; font-size: 14.5px; }

/* reveals */
.pf-home .pf-rv { opacity: 0; transform: translateY(16px); transition: opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1); }
.pf-home .pf-rv.on { opacity: 1; transform: none; }
.pf-home .pf-rv[data-d="1"] { transition-delay: .08s; }
.pf-home .pf-rv[data-d="2"] { transition-delay: .16s; }
.pf-home .pf-rv[data-d="3"] { transition-delay: .24s; }

/* ---------- HERO — the sheet performs ---------- */
.pf-home .pf-hero { position: relative; padding: 44px 0 84px; overflow: hidden; }
.pf-home .pf-hero-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: 40px; align-items: center; }
.pf-home .pf-hline { margin-top: 18px; }
.pf-home .pf-hline .l1 { display: block; font-size: clamp(40px, 4.4vw, 68px); line-height: 1.05; color: var(--ink); }
.pf-home .pf-hline .l2 { display: block; font-size: clamp(52px, 6.2vw, 98px); line-height: 1.02; margin-top: 2px; }
.pf-home .pf-swapbox { display: inline-block; overflow: hidden; vertical-align: bottom; position: relative; max-width: 100%; }
.pf-home .pf-swapword { display: inline-block; font-style: italic; color: var(--red); will-change: transform; }
.pf-home .pf-swapword.final { color: var(--ink); font-size: .62em; line-height: 1.1; }
.pf-home .pf-hero-sub { margin-top: 22px; max-width: 44ch; font-size: 16px; }
.pf-home .pf-hero-sub b { font-weight: 700; color: var(--ink); }
.pf-home .pf-hero-ctas { display: flex; align-items: center; gap: 22px; margin-top: 28px; flex-wrap: wrap; }
.pf-home .pf-cta-note { position: relative; margin-top: 14px; }
.pf-home .pf-cta-note .pf-hand { display: inline-block; transform: rotate(-2deg); }
.pf-home .pf-hero-sticks { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; }

/* the stage: four artefacts perform, then hang on the line and STAY */
.pf-home .pf-stage { position: relative; height: 540px; perspective: 1100px; }
.pf-home .pf-rope { position: absolute; left: 2%; top: 52px; width: 96%; height: 26px; pointer-events: none; }
.pf-home .pf-rope path { fill: none; stroke: var(--rule); stroke-width: 2; }
.pf-home .pf-rope .pin { fill: var(--red); }
.pf-home .pf-art { position: absolute; left: 50%; top: 56%; opacity: 0; pointer-events: none; transition: transform 1s cubic-bezier(.3,1.15,.45,1), opacity .5s ease; }
.pf-home .pf-art .artin { position: relative; }
.pf-home .pf-art.perform, .pf-home .pf-art.docked { opacity: 1; }
.pf-home .pf-art.docked .artin { animation: pfsway 5.5s ease-in-out infinite alternate; }
@keyframes pfsway { from { transform: rotate(-1.1deg); } to { transform: rotate(1.1deg); } }
.pf-home .pf-art .pf-clip { opacity: 0; transition: opacity .3s .5s; }
.pf-home .pf-art.docked .pf-clip { opacity: 1; }
.pf-home .pf-apaper { background: var(--sheet); border-radius: 4px; box-shadow: var(--shadow-lift) !important; padding: 22px 20px; }
.pf-home .pf-a-resume { transform: translate(-50%,-50%) scale(.9); }
.pf-home .pf-a-resume.perform { transform: translate(-50%,-50%) scale(1); }
.pf-home .pf-a-resume.docked { transform: translate(calc(-50% - 296px), calc(-50% - 158px)) scale(.6); }
.pf-home .pf-a-resume .pf-apaper { width: 252px; height: 322px; }
.pf-home .pf-art .anm { font: 700 14px/1 var(--sans); color: var(--ink); min-height: 16px; display: flex; gap: 2px; }
.pf-home .pf-art .arole { font: 600 8.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--quiet); margin-top: 6px; min-height: 9px; }
.pf-home .pf-art .asec { font: 700 8px/1 var(--mono); letter-spacing: .14em; color: var(--red); text-transform: uppercase; margin-top: 12px; }
.pf-home .pf-art .awl { height: 4.5px; border-radius: 2px; background: var(--paper2); margin-top: 7px; width: 0%; }
.pf-home .pf-art.perform .awl, .pf-home .pf-art.docked .awl { animation: pfwrite .55s cubic-bezier(.22,.61,.36,1) forwards; }
@keyframes pfwrite { to { width: var(--w, 84%); } }
.pf-home .pf-art.perform .awl:nth-of-type(1) { animation-delay: .9s; }
.pf-home .pf-art.perform .awl:nth-of-type(2) { animation-delay: 1.1s; }
.pf-home .pf-art.perform .awl:nth-of-type(3) { animation-delay: 1.3s; }
.pf-home .pf-art.perform .awl:nth-of-type(4) { animation-delay: 1.5s; }
.pf-home .pf-art.perform .awl:nth-of-type(5) { animation-delay: 1.7s; }
.pf-home .pf-art.perform .awl:nth-of-type(6) { animation-delay: 1.9s; }
.pf-home .pf-a-ats { transform: translate(-50%,-50%) scale(.85); }
.pf-home .pf-a-ats.perform { transform: translate(-50%,-50%) scale(1); }
.pf-home .pf-a-ats.docked { transform: translate(calc(-50% - 98px), calc(-50% - 168px)) scale(.64); }
.pf-home .pf-a-ats .pf-apaper { width: 236px; height: 280px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pf-home .pf-a-ats .ahead { font: 700 8.5px/1 var(--mono); letter-spacing: .14em; color: var(--quiet); text-transform: uppercase; align-self: flex-start; }
.pf-home .pf-aring { width: 104px; height: 104px; }
.pf-home .pf-aring circle { fill: none; stroke-width: 6; }
.pf-home .pf-aring .track { stroke: var(--paper2); }
.pf-home .pf-aring .val { stroke: var(--red); stroke-linecap: round; stroke-dasharray: 245; stroke-dashoffset: 245; }
.pf-home .pf-art.perform .pf-aring .val, .pf-home .pf-art.docked .pf-aring .val { transition: stroke-dashoffset 1.3s cubic-bezier(.22,.61,.36,1) .7s; stroke-dashoffset: 58.8; }
.pf-home .pf-aring text { font: 800 26px var(--sans); fill: var(--ink); }
.pf-home .pf-abars { width: 100%; display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }
.pf-home .pf-abars div { display: grid; grid-template-columns: 64px 1fr; gap: 9px; align-items: center; font: 600 7.5px/1 var(--mono); letter-spacing: .06em; color: var(--quiet); text-transform: uppercase; }
.pf-home .pf-abars b { display: block; height: 4px; border-radius: 2px; background: var(--paper2); position: relative; overflow: hidden; }
.pf-home .pf-abars b::after { content: ""; position: absolute; inset: 0; width: 0; background: var(--ink); }
.pf-home .pf-art.perform .pf-abars div:nth-child(1) b::after, .pf-home .pf-art.docked .pf-abars div:nth-child(1) b::after { animation: pfwrite .7s ease-out 1.1s forwards; --w: 96%; }
.pf-home .pf-art.perform .pf-abars div:nth-child(2) b::after, .pf-home .pf-art.docked .pf-abars div:nth-child(2) b::after { animation: pfwrite .7s ease-out 1.3s forwards; --w: 82%; }
.pf-home .pf-art.perform .pf-abars div:nth-child(3) b::after, .pf-home .pf-art.docked .pf-abars div:nth-child(3) b::after { animation: pfwrite .7s ease-out 1.5s forwards; --w: 58%; }
.pf-home .pf-acheck { position: absolute; right: -14px; top: 34px; font-size: 9px; letter-spacing: .12em; padding: 6px 9px; border-width: 2.5px; border-radius: 5px; transform: rotate(-9deg) scale(2.2); }
.pf-home .pf-art.perform .pf-acheck { transition: transform .3s cubic-bezier(.34,1.56,.64,1) 1.9s, opacity .15s ease 1.9s; opacity: .95; transform: rotate(-9deg) scale(1); }
.pf-home .pf-art.docked .pf-acheck { opacity: .95; transform: rotate(-9deg) scale(1); }
.pf-home .pf-a-letter { transform: translate(-50%,-50%) scale(.9); }
.pf-home .pf-a-letter.perform { transform: translate(-50%,-50%) scale(1); }
.pf-home .pf-a-letter.docked { transform: translate(calc(-50% + 100px), calc(-50% - 158px)) scale(.6); }
.pf-home .pf-a-letter .pf-apaper { width: 252px; height: 322px; }
.pf-home .pf-art .adear { font: italic 400 15px/1 var(--display); color: var(--ink); }
.pf-home .pf-asig { font: 600 30px/1 var(--hand); color: var(--ink); margin-top: 18px; opacity: 0; transform: rotate(-3deg) translateY(6px); }
.pf-home .pf-asig i { color: var(--red); font-style: normal; }
.pf-home .pf-art.perform .pf-asig { transition: opacity .6s ease 1.9s, transform .6s ease 1.9s; opacity: 1; transform: rotate(-3deg); }
.pf-home .pf-art.docked .pf-asig { opacity: 1; transform: rotate(-3deg); }
.pf-home .pf-a-live { transform: translate(-50%,-50%) scale(.8); }
.pf-home .pf-a-live.perform { transform: translate(-50%,-50%) scale(1); }
.pf-home .pf-a-live.docked { transform: translate(calc(-50% + 296px), calc(-50% - 150px)) scale(.7); }
.pf-home .pf-alive { width: 224px; background: var(--ink); border-radius: 8px; padding: 18px 18px 16px; box-shadow: var(--shadow-lift) !important; }
.pf-home .pf-alive .dots { display: flex; gap: 4px; margin-bottom: 12px; }
.pf-home .pf-alive .dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--cx-pline); }
.pf-home .pf-alive b { display: block; font: 400 19px/1 var(--display); color: var(--cx-cons-parchment); }
.pf-home .pf-alive span { display: block; margin-top: 8px; font: 600 10px/1 var(--mono); color: var(--cx-panel-stop); letter-spacing: .04em; }
.pf-home .pf-alive em { display: block; margin-top: 10px; font: 600 8px/1 var(--mono); letter-spacing: .12em; color: var(--cx-panel-ink60); text-transform: uppercase; font-style: normal; }
.pf-home .pf-alive em s { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--cx-cons-live); margin-right: 5px; animation: pfblink 1.2s infinite; text-decoration: none; }
@keyframes pfblink { 50% { opacity: .25; } }
.pf-home .pf-plane { position: absolute; left: 50%; top: 56%; width: 96px; height: 96px; margin: -48px 0 0 -48px; opacity: 0; pointer-events: none; filter: drop-shadow(0 8px 14px var(--cx-shadow-ink-deep)); z-index: 6; }
.pf-home .pf-plane.fly { opacity: 1; }
.pf-home .pf-plane .pf-wing-a.out, .pf-home .pf-plane .pf-wing-b.out { stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; }
.pf-home .pf-plane .pf-wing-b.out { fill: var(--paper2); }
.pf-home .pf-plane .pf-crease { stroke-width: 2; }
.pf-home .pf-stagecap { position: absolute; left: 0; right: 0; bottom: 52px; text-align: center; font: 600 20px/1.2 var(--hand); color: var(--red-deep); opacity: 0; transform: translateY(8px) rotate(-1.5deg); transition: opacity .6s, transform .6s; }
.pf-home .pf-stagecap.on { opacity: 1; transform: rotate(-1.5deg); }
.pf-home .pf-beats { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: 8px; align-items: center; }
.pf-home .pf-beat { flex: none; white-space: nowrap; font: 700 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--quiet); padding: 8px 13px; border: 1.5px solid transparent; border-radius: 999px; transition: color .3s, border-color .3s, background .3s; }
.pf-home .pf-beat.on { color: var(--red-deep); border-color: var(--red); background: var(--sheet); }

/* ---------- counts — the sticker ledger ---------- */
.pf-home .pf-counts { background: var(--paper2); padding: 56px 0; }
.pf-home .pf-count-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px; }
.pf-home .pf-count b { display: block; font: 400 66px/1 var(--display); color: var(--ink); font-variant-numeric: tabular-nums; }
.pf-home .pf-count > span { display: block; margin-top: 9px; font: 400 13px/1.45 var(--sans); }
.pf-home .pf-count .pf-hand { display: block; margin-top: 8px; transform: rotate(-2deg); }

/* ---------- the four verbs — four performing tickets ---------- */
.pf-home .pf-tools { padding: 110px 0 0; }
.pf-home .pf-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; flex-wrap: wrap; margin-bottom: 34px; }
.pf-home .pf-head h2 { font-size: clamp(34px, 4.4vw, 58px); line-height: 1.05; margin-top: 16px; }
.pf-home .pf-head h2 em { font-style: italic; }
.pf-home .pf-head .pf-hand { max-width: 240px; text-align: right; transform: rotate(2deg); }
.pf-home .pf-tgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.pf-home .pf-ticket { position: relative; background: var(--sheet); border-radius: 6px; box-shadow: var(--shadow) !important; padding: 30px 30px 26px; display: grid; grid-template-columns: 1fr 168px; gap: 20px; transform: rotate(var(--tk, -.7deg)); transition: transform .4s cubic-bezier(.34,1.3,.64,1), box-shadow .4s, opacity .8s cubic-bezier(.22,.61,.36,1); }
.pf-home .pf-ticket:nth-child(even) { --tk: .7deg; }
.pf-home .pf-ticket.on:hover { transform: rotate(0deg) translateY(-8px); box-shadow: var(--shadow-lift) !important; }
.pf-home .pf-ticket .pf-tape { top: -11px; left: 38px; }
.pf-home .pf-ticket:nth-child(even) .pf-tape { left: auto; right: 38px; --tr: 4deg; }
.pf-home .pf-vstick { position: absolute; top: -15px; right: 22px; background: var(--red); color: var(--cx-cons-paper); font: 400 21px/1 var(--display); font-style: italic; padding: 9px 16px 11px; border-radius: 999px; box-shadow: 2px 2px 0 var(--ink) !important; transform: rotate(3deg); transition: transform .3s; z-index: 4; }
.pf-home .pf-ticket:nth-child(even) .pf-vstick { right: auto; left: 22px; transform: rotate(-3deg); }
.pf-home .pf-ticket:hover .pf-vstick { animation: pfwiggle .5s ease; }
@keyframes pfwiggle { 25% { transform: rotate(8deg); } 75% { transform: rotate(-4deg); } }
.pf-home .pf-ticket h3 { font-size: 29px; line-height: 1.03; }
.pf-home .pf-ticket h3 small { display: block; margin-top: 7px; font: 700 10px/1 var(--sans); letter-spacing: .09em; text-transform: uppercase; color: var(--quiet); }
.pf-home .pf-ticket p { margin-top: 12px; max-width: 38ch; font-size: 13.5px; line-height: 1.6; color: var(--char); }
.pf-home .pf-go { margin-top: 16px; display: inline-flex; align-items: center; gap: 9px; font: 600 13px/1 var(--sans); color: var(--ink); border-bottom: 2px solid var(--red); padding-bottom: 4px; width: fit-content; transition: gap .2s; }
.pf-home .pf-ticket:hover .pf-go { gap: 14px; }
/* each ticket's little stage — a continuous ~4.6s micro-demo */
.pf-home .pf-mini { position: relative; background: var(--paper); border: 1px solid var(--rule); border-radius: 5px; padding: 14px 13px; overflow: hidden; min-height: 172px; display: flex; flex-direction: column; gap: 7px; }
.pf-home .pf-mini .mnm { font: 700 10.5px/1 var(--sans); color: var(--ink); }
.pf-home .pf-mini .mrl { font: 600 7px/1 var(--mono); letter-spacing: .1em; color: var(--quiet); text-transform: uppercase; }
.pf-home .pf-mini .mdear { font: italic 400 10px/1 var(--display); color: var(--ink); }
.pf-home .pf-mini .msec { font: 700 6.5px/1 var(--mono); letter-spacing: .14em; color: var(--red); text-transform: uppercase; margin-top: 5px; }
.pf-home .pf-mini i { display: block; height: 3.5px; border-radius: 2px; background: var(--paper2); width: 0%; }
.pf-home .on .pf-m-fold i { animation: pfmwrite 4.6s cubic-bezier(.22,.61,.36,1) infinite; }
@keyframes pfmwrite { 0% { width: 0; } 18% { width: var(--w, 84%); } 78% { width: var(--w, 84%); } 92%, 100% { width: 0; } }
.pf-home .on .pf-m-fold i:nth-of-type(1) { animation-delay: .15s; }
.pf-home .on .pf-m-fold i:nth-of-type(2) { animation-delay: .35s; }
.pf-home .on .pf-m-fold i:nth-of-type(3) { animation-delay: .55s; }
.pf-home .on .pf-m-fold i:nth-of-type(4) { animation-delay: .75s; }
.pf-home .pf-mring { width: 64px; height: 64px; margin: 2px auto 0; }
.pf-home .pf-mring circle { fill: none; stroke-width: 5; }
.pf-home .pf-mring .track { stroke: var(--paper2); }
.pf-home .pf-mring .val { stroke: var(--red); stroke-linecap: round; stroke-dasharray: 138; stroke-dashoffset: 138; }
.pf-home .on .pf-mring .val { animation: pfmscore 4.6s cubic-bezier(.22,.61,.36,1) infinite; }
@keyframes pfmscore { 0% { stroke-dashoffset: 138; } 22% { stroke-dashoffset: 33; } 80% { stroke-dashoffset: 33; } 94%, 100% { stroke-dashoffset: 138; } }
.pf-home .pf-mring text { font: 800 15px var(--sans); fill: var(--ink); }
.pf-home .pf-mstamp { position: absolute; right: 10px; bottom: 10px; border-width: 2px; border-radius: 4px; font-size: 8px; letter-spacing: .12em; padding: 5px 7px; transform: rotate(-8deg) scale(2); }
.pf-home .on .pf-mstamp { animation: pfmslam 4.6s cubic-bezier(.34,1.56,.64,1) infinite; }
@keyframes pfmslam { 0%, 28% { opacity: 0; transform: rotate(-8deg) scale(2); } 34% { opacity: .95; transform: rotate(-8deg) scale(1); } 86% { opacity: .95; transform: rotate(-8deg) scale(1); } 94%, 100% { opacity: 0; } }
.pf-home .pf-mbars { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.pf-home .pf-mbars div { display: grid; grid-template-columns: 52px 1fr; gap: 7px; align-items: center; font: 600 7px/1 var(--mono); letter-spacing: .06em; color: var(--quiet); text-transform: uppercase; }
.pf-home .pf-mbars b { display: block; height: 3.5px; border-radius: 2px; background: var(--paper2); position: relative; overflow: hidden; }
.pf-home .pf-mbars b::after { content: ""; position: absolute; inset: 0; width: 0; background: var(--ink); }
.pf-home .on .pf-mbars div:nth-child(1) b::after { animation: pfmwrite 4.6s ease-out infinite; --w: 96%; animation-delay: .3s; }
.pf-home .on .pf-mbars div:nth-child(2) b::after { animation: pfmwrite 4.6s ease-out infinite; --w: 80%; animation-delay: .5s; }
.pf-home .on .pf-m-sign i { animation: pfmwrite 4.6s cubic-bezier(.22,.61,.36,1) infinite; }
.pf-home .on .pf-m-sign i:nth-of-type(1) { animation-delay: .2s; --w: 94%; }
.pf-home .on .pf-m-sign i:nth-of-type(2) { animation-delay: .45s; --w: 86%; }
.pf-home .on .pf-m-sign i:nth-of-type(3) { animation-delay: .7s; --w: 58%; }
.pf-home .pf-msig { font: 600 24px/1 var(--hand); color: var(--ink); margin-top: auto; opacity: 0; transform: rotate(-3deg); }
.pf-home .pf-msig b { color: var(--red); }
.pf-home .on .pf-msig { animation: pfmsigin 4.6s ease infinite; }
@keyframes pfmsigin { 0%, 30% { opacity: 0; transform: rotate(-3deg) translateY(6px); } 42% { opacity: 1; transform: rotate(-3deg); } 86% { opacity: 1; } 96%, 100% { opacity: 0; } }
.pf-home .pf-m-launch { align-items: center; justify-content: center; }
.pf-home .pf-mpage { background: var(--ink); border-radius: 6px; padding: 11px 12px 9px; width: 126px; opacity: 0; transform: translateY(8px) rotate(2deg); }
.pf-home .on .pf-mpage { animation: pfmlive 4.6s ease infinite; }
@keyframes pfmlive { 0%, 34% { opacity: 0; transform: translateY(8px) rotate(2deg); } 46% { opacity: 1; transform: rotate(2deg); } 88% { opacity: 1; transform: rotate(2deg); } 96%, 100% { opacity: 0; } }
.pf-home .pf-mpage b { display: block; font: 400 12px/1 var(--display); color: var(--cx-cons-parchment); }
.pf-home .pf-mpage span { display: block; margin-top: 5px; font: 600 6.5px/1 var(--mono); color: var(--cx-panel-stop); letter-spacing: .04em; }
.pf-home .pf-mpage em { display: inline-block; margin-top: 6px; font: 700 5.5px/1 var(--mono); letter-spacing: .1em; color: var(--cx-panel-ink60); text-transform: uppercase; font-style: normal; }
.pf-home .pf-mpage em s { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--cx-cons-live); margin-right: 4px; animation: pfblink 1.2s infinite; text-decoration: none; }
.pf-home .pf-mplane { position: absolute; left: 8px; top: 12px; width: 30px; height: 30px; filter: drop-shadow(0 3px 5px var(--cx-shadow-ink-deep)); }
.pf-home .pf-mplane .pf-wing-a, .pf-home .pf-mplane .pf-wing-b { stroke: var(--ink); stroke-width: 4; stroke-linejoin: round; }
.pf-home .pf-mplane .pf-wing-b { fill: var(--paper2); }
.pf-home .on .pf-mplane { animation: pfmfly 4.6s cubic-bezier(.4,0,.5,1) infinite; }
@keyframes pfmfly { 0%, 6% { transform: translate(0, 84px) rotate(14deg); opacity: 0; } 12% { opacity: 1; } 38% { transform: translate(96px, 22px) rotate(-8deg); opacity: 1; } 44% { transform: translate(132px, -6px) rotate(-16deg); opacity: 0; } 100% { opacity: 0; } }
.pf-home .pf-mtrail { position: absolute; inset: 0; pointer-events: none; }
.pf-home .pf-mtrail path { fill: none; stroke: var(--red); stroke-width: 1.5; stroke-dasharray: 2 6; stroke-linecap: round; opacity: 0; }
.pf-home .on .pf-mtrail path { animation: pfmtrailin 4.6s ease infinite; }
@keyframes pfmtrailin { 0%, 8% { opacity: 0; } 20% { opacity: .9; } 44% { opacity: .9; } 56%, 100% { opacity: 0; } }

/* ---------- the swipe rails ---------- */
.pf-home .pf-railsec { padding: 110px 0 0; }
.pf-home .pf-railhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 8px; flex-wrap: wrap; }
.pf-home .pf-railhead h2 { font-size: clamp(31px, 4vw, 54px); line-height: 1.06; margin-top: 16px; }
.pf-home .pf-railhead h2 em { font-style: italic; }
.pf-home .pf-railhead .side { max-width: 36ch; font-size: 14px; margin-top: 14px; }
.pf-home .pf-rail-tools { display: flex; align-items: center; gap: 18px; }
.pf-home .pf-rail-arrows { display: flex; gap: 8px; }
.pf-home .pf-rail-arrows button { width: 44px; height: 44px; border: 1.5px solid var(--ink); background: transparent; border-radius: 50%; font: 400 16px var(--sans); color: var(--ink); cursor: pointer; transition: background .2s, color .2s, transform .2s; }
.pf-home .pf-rail-arrows button:hover { background: var(--ink); color: var(--cx-cons-paper); transform: rotate(-8deg); }
.pf-home .pf-railbed { border-top: 1px solid var(--rule); padding-top: 38px; margin-top: 22px; }
.pf-home .pf-rail { display: flex; gap: 38px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 14px 6px 34px; cursor: grab; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.pf-home .pf-rail::-webkit-scrollbar { display: none; }
.pf-home .pf-rail.dragging { cursor: grabbing; }
.pf-home .pf-rail > * { scroll-snap-align: start; flex: none; opacity: 0; transform: translateY(20px) rotate(1deg); }
.pf-home .pf-railsec.on .pf-rail > * { opacity: 1; transform: rotate(var(--tilt, 0deg)); transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); }
.pf-home .pf-railsec.on .pf-rail > *:nth-child(odd) { --tilt: -.8deg; }
.pf-home .pf-railsec.on .pf-rail > *:nth-child(even) { --tilt: .8deg; }
.pf-home .pf-railsec.on .pf-rail > *:nth-child(1) { transition-delay: .05s; }
.pf-home .pf-railsec.on .pf-rail > *:nth-child(2) { transition-delay: .11s; }
.pf-home .pf-railsec.on .pf-rail > *:nth-child(3) { transition-delay: .17s; }
.pf-home .pf-railsec.on .pf-rail > *:nth-child(4) { transition-delay: .23s; }
.pf-home .pf-railsec.on .pf-rail > *:nth-child(5) { transition-delay: .29s; }
.pf-home .pf-railsec.on .pf-rail > *:nth-child(6) { transition-delay: .35s; }
.pf-home .pf-railsec.on .pf-rail > *:nth-child(7) { transition-delay: .41s; }
.pf-home .pf-railsec.on .pf-rail > *:nth-child(8) { transition-delay: .47s; }
.pf-home .pf-rail-progress { height: 2px; background: var(--rule); position: relative; border-radius: 1px; }
.pf-home .pf-rail-progress i { position: absolute; left: 0; top: 0; height: 2px; width: 0; background: var(--red); transition: width .2s; border-radius: 1px; }
/* résumé sheets with tape */
.pf-home .pf-rcard { width: 238px; position: relative; display: block; }
.pf-home .pf-rcard .pf-tape { top: -11px; left: 50%; margin-left: -37px; }
.pf-home .pf-rsheet { background: var(--sheet); border-radius: 4px; box-shadow: var(--shadow) !important; aspect-ratio: 3/4; padding: 17px 16px; display: flex; flex-direction: column; gap: 7px; overflow: hidden; transition: transform .4s cubic-bezier(.34,1.26,.64,1), box-shadow .4s; }
.pf-home .pf-rcard:hover .pf-rsheet { transform: translateY(-8px) rotate(1.2deg); box-shadow: var(--shadow-lift) !important; }
.pf-home .pf-rsheet i { display: block; height: 4px; border-radius: 2px; background: var(--paper2); }
.pf-home .pf-rsheet b { display: block; font: 700 9.5px/1.2 var(--sans); color: var(--ink); }
.pf-home .pf-rsheet .sname { font: 400 14px/1.1 var(--display); color: var(--ink); }
.pf-home .pf-rmeta { display: flex; align-items: baseline; justify-content: space-between; margin-top: 14px; padding: 0 2px; }
.pf-home .pf-rmeta b { font: 400 17px/1 var(--display); color: var(--ink); }
.pf-home .pf-rmeta span { font: 700 9px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--quiet); }
.pf-home .pf-rs-ink .sname { text-align: center; margin-top: 9px; }
.pf-home .pf-rs-ink i { width: 76%; margin: 0 auto; }
.pf-home .pf-rs-two { flex-direction: row; gap: 10px; }
.pf-home .pf-rs-two > div { display: flex; flex-direction: column; gap: 6px; }
.pf-home .pf-rs-two .colA { width: 34%; border-right: 1px solid var(--paper2); padding-right: 9px; }
.pf-home .pf-rs-two .colB { flex: 1; }
.pf-home .pf-rs-dark .shead { background: var(--ink); margin: -17px -16px 4px; padding: 13px 16px; }
.pf-home .pf-rs-dark .shead .sname, .pf-home .pf-rs-dark .shead b { color: var(--cx-cons-parchment); }
.pf-home .pf-rs-rail { flex-direction: row; gap: 9px; }
.pf-home .pf-rs-rail .edge { width: 5px; border-radius: 3px; background: var(--red); flex: none; }
.pf-home .pf-rs-rail > div { flex: 1; display: flex; flex-direction: column; gap: 6px; }
/* posters with tape corners */
.pf-home .pf-pcard { width: 340px; position: relative; display: block; }
.pf-home .pf-pcard .pf-tape { top: -10px; right: 18px; left: auto; --tr: 5deg; }
.pf-home .pf-pcard:nth-child(even) .pf-tape { left: 18px; right: auto; --tr: -6deg; }
.pf-home .pf-pshot { display: block; border-radius: 4px; overflow: hidden; box-shadow: var(--shadow) !important; aspect-ratio: 16/10; background: var(--paper2); transition: transform .4s cubic-bezier(.34,1.26,.64,1), box-shadow .4s; }
.pf-home .pf-pcard:hover .pf-pshot { transform: translateY(-8px) rotate(-.8deg); box-shadow: var(--shadow-lift) !important; }
.pf-home .pf-pshot img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; transform: scale(1.02); transition: transform 3.5s cubic-bezier(.22,.61,.36,1); }
.pf-home .pf-pcard:hover .pf-pshot img { transform: scale(1.08); }
.pf-home .pf-pmeta { display: flex; align-items: baseline; justify-content: space-between; margin-top: 14px; padding: 0 2px; }
.pf-home .pf-pmeta b { font: 400 18px/1 var(--display); color: var(--ink); }
.pf-home .pf-pmeta span { font: 700 9px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--quiet); }

/* ---------- the flight plan ---------- */
.pf-home .pf-flight { background: var(--paper2); margin-top: 110px; position: relative; }
.pf-home .pf-flight .pf-wrap { padding-top: 90px; padding-bottom: 96px; display: grid; grid-template-columns: .9fr 1.1fr; gap: 72px; align-items: start; }
.pf-home .pf-flight h2 { font-size: clamp(31px, 4vw, 54px); line-height: 1.06; margin-top: 16px; }
.pf-home .pf-flight h2 em { font-style: italic; }
.pf-home .pf-flight .pf-lead .pf-hand { display: block; margin-top: 16px; }
.pf-home .pf-plan { position: relative; padding-left: 44px; }
.pf-home .pf-planpath { position: absolute; left: 0; top: 6px; height: calc(100% - 12px); width: 36px; overflow: visible; }
.pf-home .pf-planpath path { fill: none; stroke: var(--red); stroke-width: 2; stroke-dasharray: 3 8; stroke-linecap: round; }
.pf-home .pf-pstep { display: grid; grid-template-columns: 1fr auto; gap: 22px; align-items: baseline; padding: 24px 6px; border-bottom: 1px solid var(--rule); opacity: .35; transform: translateX(10px); transition: opacity .7s, transform .7s; }
.pf-home .pf-pstep.lit { opacity: 1; transform: none; }
.pf-home .pf-pstep .what { font: 400 27px/1.15 var(--display); color: var(--ink); }
.pf-home .pf-pstep .what em { font-style: italic; color: var(--red); margin-right: 12px; }
.pf-home .pf-pstep .out { font: 700 10.5px/1 var(--sans); letter-spacing: .09em; text-transform: uppercase; color: var(--quiet); }
.pf-home .pf-pstep.lit .out { color: var(--ink); }

/* ---------- privacy ledger ---------- */
.pf-home .pf-privacy { padding: 110px 0 0; }
.pf-home .pf-privacy-grid { display: grid; grid-template-columns: 1fr .95fr; gap: 72px; align-items: start; border-top: 1px solid var(--rule); padding-top: 48px; }
.pf-home .pf-privacy h2 { font-size: clamp(30px, 3.8vw, 50px); line-height: 1.08; margin-top: 16px; }
.pf-home .pf-privacy h2 em { font-style: italic; }
.pf-home .pf-vault div { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 17px 4px; border-bottom: 1px solid var(--rule); font: 400 14px var(--sans); opacity: 0; transform: translateX(-12px); }
.pf-home .pf-vault div:first-child { border-top: 1px solid var(--rule); }
.pf-home .pf-vault.on div { opacity: 1; transform: none; transition: opacity .6s, transform .6s; }
.pf-home .pf-vault.on div:nth-child(1) { transition-delay: .1s; }
.pf-home .pf-vault.on div:nth-child(2) { transition-delay: .25s; }
.pf-home .pf-vault.on div:nth-child(3) { transition-delay: .4s; }
.pf-home .pf-vault.on div:nth-child(4) { transition-delay: .55s; }
.pf-home .pf-vault div b { font-weight: 700; color: var(--ink); }
.pf-home .pf-vault div span { font: 400 12px var(--mono); color: var(--quiet); }
.pf-home .pf-vault div:last-child span { color: var(--red-deep); font-weight: 700; }

/* ---------- FAQ — questions answered with stamps ---------- */
.pf-home .pf-faq { padding: 110px 0 0; }
.pf-home .pf-qgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.pf-home .pf-qcard { position: relative; background: var(--sheet); border-radius: 6px; box-shadow: var(--shadow) !important; padding: 26px 26px 56px; transform: rotate(var(--qk, -.6deg)); transition: transform .35s cubic-bezier(.34,1.3,.64,1), box-shadow .35s, opacity .8s cubic-bezier(.22,.61,.36,1); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pf-home .pf-qcard:nth-child(even) { --qk: .6deg; }
.pf-home .pf-qcard.on:hover { transform: rotate(0deg) translateY(-5px); box-shadow: var(--shadow-lift) !important; }
.pf-home .pf-qcard .pf-tape { top: -11px; left: 34px; width: 64px; }
.pf-home .pf-qcard:nth-child(even) .pf-tape { left: auto; right: 34px; --tr: 5deg; }
.pf-home .pf-qcard h3 { font-size: 23px; line-height: 1.15; padding-right: 118px; }
.pf-home .pf-qbody { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s cubic-bezier(.22,.61,.36,1); }
.pf-home .pf-qbody > div { overflow: hidden; }
.pf-home .pf-qcard.open .pf-qbody { grid-template-rows: 1fr; }
.pf-home .pf-qcard p { margin-top: 12px; max-width: 46ch; font-size: 13.5px; line-height: 1.6; }
.pf-home .pf-qcard p b { font-weight: 700; color: var(--ink); }
.pf-home .pf-qtoggle { position: absolute; left: 26px; bottom: 18px; display: inline-flex; align-items: center; gap: 8px; font: 600 16px/1 var(--hand); color: var(--red-deep); }
.pf-home .pf-qtoggle i { width: 26px; height: 26px; border: 1.5px solid var(--red); border-radius: 50%; display: grid; place-items: center; font: 600 14px/1 var(--sans); font-style: normal; color: var(--red); transition: transform .4s cubic-bezier(.34,1.3,.64,1), background .3s, color .3s; }
.pf-home .pf-qcard.open .pf-qtoggle i { transform: rotate(45deg); background: var(--red); color: var(--cx-cons-paper); }
.pf-home .pf-qcard.open .pf-qtoggle span { opacity: 0; }
.pf-home .pf-qstamp { position: absolute; top: 20px; right: 22px; transform-origin: top right; border-width: 3px; border-radius: 6px; font: 800 15px/1 var(--sans); letter-spacing: .08em; padding: 9px 13px; transform: rotate(8deg) scale(2.2); }
.pf-home .pf-qcard.on .pf-qstamp { transition: transform .35s cubic-bezier(.34,1.56,.64,1) var(--qd, .3s), opacity .15s ease var(--qd, .3s); opacity: .95; transform: rotate(-7deg) scale(1); }
.pf-home .pf-qcard:nth-child(even).on .pf-qstamp { transform: rotate(6deg) scale(1); }
.pf-home .pf-qhand { margin-top: 14px; transform: rotate(-1.5deg); display: inline-block; }
.pf-home .pf-qcard.wide { grid-column: 1/-1; display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: center; }
.pf-home .pf-qcard.wide .pf-qstamp { position: static; justify-self: end; font-size: 19px; padding: 12px 18px; transform: rotate(6deg) scale(2.2); }
.pf-home .pf-qcard.wide.on .pf-qstamp { transform: rotate(-5deg) scale(1); }

/* ---------- closing + footer ---------- */
.pf-home .pf-close { padding: 130px 0 0; text-align: center; position: relative; overflow: hidden; }
.pf-home .pf-close h2 { font-size: clamp(42px, 6vw, 84px); line-height: 1; margin: 22px auto 14px; max-width: 14ch; }
.pf-home .pf-close h2 em { display: block; font-style: italic; color: var(--red); }
.pf-home .pf-close p { max-width: 44ch; margin: 0 auto 36px; font-size: 14.5px; }
.pf-home .pf-close .pf-hand { display: block; margin-top: 18px; transform: rotate(-2deg); }
.pf-home .pf-foot { margin-top: 120px; border-top: 1px solid var(--rule); }
.pf-home .pf-foot .pf-wrap { display: flex; align-items: center; justify-content: space-between; padding-top: 32px; padding-bottom: 44px; gap: 20px; flex-wrap: wrap; }
.pf-home .pf-foot .flinks { display: flex; gap: 26px; flex-wrap: wrap; }
.pf-home .pf-foot .flinks a { font: 400 13.5px var(--sans); color: var(--char); }
.pf-home .pf-foot .flinks a:hover { color: var(--ink); }
.pf-home .pf-foot .made { font: 600 17px var(--hand); color: var(--red-deep); transform: rotate(-2deg); }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .pf-home .pf-hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .pf-home .pf-flight .pf-wrap, .pf-home .pf-privacy-grid { grid-template-columns: 1fr; gap: 40px; }
  .pf-home .pf-count-row { grid-template-columns: 1fr 1fr; row-gap: 34px; }
  .pf-home .pf-tgrid, .pf-home .pf-qgrid { grid-template-columns: 1fr; }
  .pf-home .pf-qcard.wide { grid-template-columns: 1fr; }
  .pf-home .pf-qcard.wide .pf-qstamp { justify-self: start; }
}
@media (max-width: 720px) {
  .pf-home .pf-wrap { padding: 0 20px; }
  .pf-home .pf-stage { height: 470px; }
  .pf-home .pf-beats { flex-wrap: wrap; padding: 0 10px; justify-content: flex-start; }
  .pf-home .pf-beat { font-size: 9px; padding: 7px 10px; }
  .pf-home .pf-qcard { --qk: 0deg; }
  .pf-home .pf-qcard h3 { padding-right: 96px; font-size: 21px; }
  .pf-home .pf-qstamp { right: 14px; font-size: 13px; }
  .pf-home .pf-a-resume.docked { transform: translate(calc(-50% - 96px), calc(-50% - 168px)) scale(.4); }
  .pf-home .pf-a-ats.docked { transform: translate(calc(-50% - 32px), calc(-50% - 172px)) scale(.42); }
  .pf-home .pf-a-letter.docked { transform: translate(calc(-50% + 34px), calc(-50% - 168px)) scale(.4); }
  .pf-home .pf-a-live.docked { transform: translate(calc(-50% + 104px), calc(-50% - 158px)) scale(.5); }
  .pf-home .pf-ticket { grid-template-columns: 1fr; --tk: 0deg; }
  .pf-home .pf-ticket:nth-child(even) { --tk: 0deg; }
  .pf-home .pf-mini { min-height: 150px; }
  .pf-home .pf-count b { font-size: 48px; }
  .pf-home .pf-tools, .pf-home .pf-railsec, .pf-home .pf-privacy, .pf-home .pf-faq { padding-top: 76px; }
  .pf-home .pf-flight { margin-top: 76px; }
  .pf-home .pf-close { padding-top: 88px; }
  .pf-home .pf-rcard { width: 200px; }
  .pf-home .pf-pcard { width: 280px; }
  .pf-home .pf-rail { gap: 24px; }
  .pf-home .pf-head .pf-hand, .pf-home .pf-railhead .pf-hand { text-align: left; max-width: none; }
  .pf-home .pf-foot .pf-wrap { flex-direction: column; align-items: flex-start; }
}

/* ---------- reduced motion: every performance shows its final state ------- */
@media (prefers-reduced-motion: reduce) {
  .pf-home *, .pf-home *::before, .pf-home *::after { animation: none !important; transition: none !important; }
  .pf-home .pf-rv, .pf-home .pf-pstep { opacity: 1; transform: none; }
  .pf-home .pf-rail > * { opacity: 1 !important; transform: none !important; }
  .pf-home .pf-vault div { opacity: 1; transform: none; }
  .pf-home .pf-art { opacity: 1; }
  .pf-home .pf-art .awl { width: var(--w, 84%); }
  .pf-home .pf-aring .val { stroke-dashoffset: 58.8 !important; }
  .pf-home .pf-abars b::after { width: 80%; }
  .pf-home .pf-acheck, .pf-home .pf-asig { opacity: .95; transform: none; }
  .pf-home .pf-stagecap { opacity: 1; }
  .pf-home .pf-beat.on { color: var(--red-deep); }
  .pf-home .pf-mini i { width: var(--w, 84%); }
  .pf-home .pf-mbars b::after { width: 88%; }
  .pf-home .pf-mring .val { stroke-dashoffset: 33; }
  .pf-home .pf-mstamp, .pf-home .pf-qstamp { opacity: .95 !important; transform: rotate(-7deg) scale(1) !important; }
  .pf-home .pf-msig, .pf-home .pf-mpage { opacity: 1; }
  .pf-home .pf-mtrail path { opacity: .9; }
  .pf-home .pf-mplane { opacity: 1; }
  .pf-home .pf-plane { opacity: 0; }
}

/* ============================================================================
   §5 · THE INTERIORS — recomposed in the canon grammar.
   ----------------------------------------------------------------------------
   §1–§4 re-pointed the palette and rebuilt the home. Everything below rebuilds
   the COMPOSITION of the interior surfaces, because a token swap under an old
   layout is a recolour, not a design. The moves are the canon's own:

     · every screen composes into flat tinted panels on the ladder
       sheet → paper → paper-2 → step (tokens.css is the only place they live)
     · the FIELD is a paper-2 STAGE, used wherever the product
       has proof to show (a demo, a document, a gallery of finished work)
     · an eyebrow mark labels every region; ladder cards carry every choice
     · no bare-paper void: a region either becomes a panel or the layout closes

   Namespaced to the classes the render functions already emit, so no data-*
   hook, dialog or journey is touched.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   §5.0 · shared interior bones
   ------------------------------------------------------------------------ */
.folio-v5 .cons-ipanel { background: var(--cx-cons-parchment); border-radius: 14px; }
.folio-v5 .cons-ifield { background: var(--cx-cons-field); border-radius: 14px; }

/* ============================================================================
   §5.1 · THE THREE THRESHOLDS — ONE SKELETON, THREE PERFORMANCES
          (/resume-builder/start, /ats-resume-checker, /cover-letter-builder/start)
   ----------------------------------------------------------------------------
   WAS: an inherited two-column sprawl. A tall statement column with a ~300px
   dead gap under its lede, the choices stranded top-right, the tool's demo as a
   SECOND card below them (often below the fold), and the fact strip parked at
   the bottom of the left column, a screen away from the head it proves. Three
   tools, three different compositions.

   NOW: ONE composition, built once here and worn by all three tools.

     row 1   .pf-thr-mast    the verb masthead, full width. Left: the brand
                             eyebrow (NN Verb · the <tool>) over the headline
                             (red Instrument Serif italic verb + plain name).
                             Right: one lede and the ONE Caveat aside.
                             Closed by a hairline.
     row 2   .pf-thr-pick    LEFT — the taped source-choice sheets. The actions
                             are visually primary and arrive first.
             .pf-thr-demo    RIGHT — the tool's ONE performing sheet.
     row 3   .pf-thr-facts   the hairline fact strip, a slim ruled row that
                             closes the opening viewport.

   THE ONE-GLANCE LAW (measured at 1440x900 AND 1280x720): the whole
   onboarding — statement, choices, demo, facts, aside, browse link — is inside
   the opening viewport; document.scrollHeight <= innerHeight + 40. The stage
   also carries a min-height so a TALL viewport is FILLED rather than left with
   a dead band: the choice sheets and the demo sheet take the slack.
   At 390x844 the same skeleton stacks and every choice card is inside the
   first screen at scrollY 0.

   Namespaced to `.cons-start`, on the classes the render functions emit, so no
   data-* hook, dialog or journey is touched.
   ========================================================================== */

.folio-v5 .cons-start,
.folio-v5 .cons-start .resume-welcome,
.folio-v5 .cons-start .resume-welcome-stage { background: var(--cx-cons-paper); }

/* THE 72px THAT BROKE THE ONE-GLANCE LAW. The entry shell (and, on the ATS
   route, its product wrapper) inherited `min-height: 100vh` — under a 72px
   topbar that is a page one topbar taller than the screen, so all three
   thresholds scrolled by exactly 72px no matter how the composition was cut.
   The shells give up their min-height; the STAGE below carries it, measured
   from the same topbar. */
.folio-v5 .cons-start,
.folio-v5 .ats-product:has(> .cons-start),
.folio-v5 .resume-product:has(> .cons-start) { min-height: 0; }

/* ---------------------------------------------------------------------------
   THE STAGE — the three-row grid every threshold is cut from.
   ------------------------------------------------------------------------ */
.folio-v5 .cons-start .pf-thr-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: stretch;
  /* THE COMPOSITION IS CENTRED IN WHAT THE TOPBAR LEAVES. The three rows keep
     their natural height — forcing row 2 to 1fr is how a two-choice tool (the
     ATS) grew a 325px hole under its cards — and the slack becomes equal
     framing above and below, which is page margin, not a dead zone. */
  align-content: center;
  gap: 30px;
  box-sizing: border-box;
  width: 100%;
  max-width: 620px;
  /* the topbar is 72px; the stage fills exactly what is left of the screen */
  min-height: calc(100vh - 72px);
  margin: 0 auto;
  padding: 22px 26px 20px;
  overflow: visible;
}
.folio-v5 .cons-start .pf-thr-stage::after,
.folio-v5 .cons-start .pf-thr-stage::before { display: none; content: none; }
/* the wrapper the render functions keep for the two body panels dissolves —
   the panels themselves are the grid items. */
.folio-v5 .cons-start .pf-thr-body-wrap { display: contents; }

.folio-v5 .cons-start .pf-thr-demo { display: none; }
.folio-v5 .cons-start .pf-thr-pick .resume-source-options > button,
.folio-v5 .cons-start .pf-thr-pick .resume-source-options > button:first-of-type:nth-last-of-type(2),
.folio-v5 .cons-start .pf-thr-pick .resume-source-options > button:first-of-type:nth-last-of-type(2) ~ button {
  min-height: 84px; max-height: 108px;
}
.folio-v5 .cons-start .pf-thr-facts { display: none; }

/* ---------------------------------------------------------------------------
   ROW 1 — THE VERB MASTHEAD
   ------------------------------------------------------------------------ */
.folio-v5 .cons-start .pf-thr-mast {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.folio-v5 .cons-start .pf-thr-mast-a { display: flex; flex-direction: column; align-items: center; gap: 11px; min-width: 0; }
.folio-v5 .cons-start .pf-thr-mast-b { display: flex; flex-direction: column; align-items: center; gap: 9px; min-width: 0; }

.folio-v5 .cons-start .pf-thr-mast .eyebrow.pf-verb { gap: 8px; }
.folio-v5 .cons-start .pf-thr-mast .eyebrow.pf-verb > i {
  font: 700 11px/1 var(--cx-font-ui); font-style: normal;
  letter-spacing: .06em; color: var(--cx-cons-vermilion-deep);
}
.folio-v5 .cons-start .pf-thr-mast h1 {
  max-width: 20ch;
  margin: 0;
  font: 400 clamp(27px, 2.6vw, 36px)/1.1 var(--cx-font-display);
  letter-spacing: -.022em;
  color: var(--cx-ink);
}
.folio-v5 .cons-start .pf-thr-mast h1 em {
  font-style: italic;
  color: var(--cx-cons-vermilion);
}
.folio-v5 .cons-start .pf-thr-mast .pf-thr-lede {
  display: none;
  margin: 0; max-width: 48ch;
  font: 400 14.5px/1.62 var(--cx-font-ui); color: var(--cx-cons-char);
}
/* THE ONE HANDWRITTEN ASIDE — Caveat, red, led by a dashed red rule. It only
   ever restates a fact this same screen already states ("Private · saved on
   this device", "no account required"). */
.folio-v5 .cons-start .pf-thr-mast .pf-thr-aside {
  margin: 0;
  font-size: 19px; line-height: 1;
  transform: rotate(-1.3deg);
  transform-origin: left center;
}
.folio-v5 .cons-start .pf-thr-mast .pf-thr-aside::before {
  content: ""; display: inline-block;
  width: 24px; height: 0; margin: 0 9px 5px 2px;
  border-top: 1.5px dashed var(--cx-cons-vermilion);
  vertical-align: middle;
}

/* ---------------------------------------------------------------------------
   ROW 2 LEFT — THE SOURCE CHOICES. The actions, visually primary.
   ------------------------------------------------------------------------ */
.folio-v5 .cons-start .pf-thr-pick {
  grid-column: 1;
  grid-row: 2;
  position: static; width: auto; max-width: none; transform: none;
  display: flex; flex-direction: column;
  min-width: 0; min-height: 0;
  margin: 0; padding: 2px 0 0;
  border: 0; border-radius: 0;
  background: transparent; backdrop-filter: none;
}
.folio-v5 .cons-start .pf-thr-pick > header { margin: 0; padding: 0; border: 0; background: transparent; }
.folio-v5 .cons-start .pf-thr-pick > header > .eyebrow { margin-bottom: 11px; }
.folio-v5 .cons-start .pf-thr-pick h2 {
  max-width: 20ch; margin: 0;
  font: 400 clamp(21px, 1.7vw, 26px)/1.16 var(--cx-font-display);
  letter-spacing: -.012em; color: var(--cx-ink);
}
.folio-v5 .cons-start .pf-thr-pick .resume-source-options {
  flex: 1 1 auto;
  display: flex; flex-direction: column;
  gap: 12px;
  margin: 15px 0 0;
  /* TOP    room for the tape strip over card one.
     BOTTOM room for the TILT. Measured 2026-09-01: the last sheet overlapped
     the footer by 2.83px at 1440 and 1.47px at 390 — on all three thresholds,
     because the cause is the brand's own device, not any one tool. A rotated
     box still occupies its UNROTATED layout box, so a sheet tilted by θ hangs
     (w·sin θ)/2 below the height the column reserved for it:
        1440  645px × sin .5° / 2 = 2.81px   (measured 2.83)
         390  290px × sin .5° / 2 = 1.26px   (measured 1.47)
     8px clears the canon's whole ±0.6–1.2° range at these widths (a 700px
     sheet at 1.2° hangs 7.33px). Fixed here, in the shared skeleton, so the
     résumé, ATS and cover thresholds are all clear of it. */
  padding: 9px 0 8px;
  overflow: visible;
  min-height: 0;
}
.folio-v5 .cons-start .pf-thr-pick .resume-source-options > button {
  position: relative;
  flex: 1 1 auto;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 15px;
  width: 100%;
  min-height: 72px; max-height: 132px;
  padding: 14px 19px;
  text-align: left;
  border: 1px solid var(--cx-cons-hair);
  border-radius: 6px;
  background: var(--cx-cons-paper);
  box-shadow: var(--cx-shadow-raise) !important;
  transform: rotate(var(--tk, -.5deg));
  transition: transform .35s cubic-bezier(.34, 1.3, .64, 1),
              box-shadow .35s var(--cx-ease),
              border-color .25s ease;
}
.folio-v5 .cons-start .pf-thr-pick .resume-source-options > button:nth-of-type(2) { --tk: .5deg; }
.folio-v5 .cons-start .pf-thr-pick .resume-source-options > button:nth-of-type(3) { --tk: -.35deg; }
/* A TOOL WITH TWO CHOICES GETS TWO BIGGER SHEETS. The ATS threshold offers two
   sources where the résumé and letter offer three; capping every card at the
   three-card height is what opened a 325px hole under the ATS pair. */
.folio-v5 .cons-start .pf-thr-pick .resume-source-options > button:first-of-type:nth-last-of-type(2),
.folio-v5 .cons-start .pf-thr-pick .resume-source-options > button:first-of-type:nth-last-of-type(2) ~ button { max-height: 192px; }
.folio-v5 .cons-start .pf-thr-pick .resume-source-options > button:hover:not(:disabled),
.folio-v5 .cons-start .pf-thr-pick .resume-source-options > button:focus-visible,
.folio-v5 .cons-start .pf-thr-pick .resume-source-options > button.on {
  transform: rotate(0deg) translateY(-3px);
  border-color: var(--cx-cons-tan);
  box-shadow: var(--cx-shadow-lift) !important;
  background: var(--cx-cons-paper);
}
.folio-v5 .cons-start .pf-thr-pick .resume-source-options > button.on {
  border-color: var(--cx-cons-vermilion);
}
.folio-v5 .cons-start .pf-thr-pick .resume-source-options > button:disabled {
  transform: rotate(0deg); opacity: .55; box-shadow: none !important;
}
.folio-v5 .cons-start .pf-thr-pick .resume-source-options > button:disabled > .pf-tape { display: none; }
/* the tape that holds each sheet to the table */
.folio-v5 .cons-start .pf-thr-pick .resume-source-options > button > .pf-tape {
  width: 58px; height: 17px; top: -8px; left: 30px;
  background: color-mix(in srgb, var(--cx-cons-tan) 92%, var(--cx-ink));
}
.folio-v5 .cons-start .pf-thr-pick .resume-source-options > button:nth-of-type(2) > .pf-tape { --tr: 4deg; left: auto; right: 34px; }
.folio-v5 .cons-start .pf-thr-pick .resume-source-options > button:nth-of-type(3) > .pf-tape { --tr: -6deg; left: 46px; }

.folio-v5 .cons-start .pf-thr-pick .resume-source-options > button > i {
  display: grid; place-items: center;
  width: 38px; height: 38px; flex: none;
  border: 0; border-radius: 8px;
  background: var(--cx-cons-parchment);
  color: var(--cx-ink);
}
.folio-v5 .cons-start .pf-thr-pick .resume-source-options > button:hover > i,
.folio-v5 .cons-start .pf-thr-pick .resume-source-options > button.on > i { background: var(--cx-cons-bone); }
.folio-v5 .cons-start .pf-thr-pick .resume-source-options > button > span { min-width: 0; display: block; }
.folio-v5 .cons-start .pf-thr-pick .resume-source-options b {
  display: block; font: 400 16.5px/1.2 var(--cx-font-display); color: var(--cx-ink);
}
.folio-v5 .cons-start .pf-thr-pick .resume-source-options small {
  display: block; margin-top: 5px;
  font: 400 12px/1.4 var(--cx-font-ui); color: var(--cx-cons-char);
}
.folio-v5 .cons-start .pf-thr-pick .resume-source-options > button > strong {
  font: 400 15px/1 var(--cx-font-ui);
  color: var(--cx-cons-vermilion);
  transition: transform .25s var(--cx-ease);
}
.folio-v5 .cons-start .pf-thr-pick .resume-source-options > button:hover > strong { transform: translateX(4px); }

.folio-v5 .cons-start .pf-thr-pick > footer {
  flex: none;
  margin-top: auto;
  display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
  padding-top: 13px;
  border-top: 1px solid var(--cx-cons-hair);
  font: 400 11.5px/1.3 var(--cx-font-ui); color: var(--cx-cons-char);
}
.folio-v5 .cons-start .pf-thr-pick > footer a,
.folio-v5 .cons-start .pf-thr-pick > footer button {
  font: 600 12px/1 var(--cx-font-ui); color: var(--cx-ink); text-decoration: none;
  background: transparent; border: 0; padding: 0 0 4px; cursor: pointer;
  border-bottom: 1.5px solid var(--cx-cons-vermilion);
}
.folio-v5 .cons-start .pf-thr-pick .inline-state { margin: 10px 0 0; font: 400 12px/1.4 var(--cx-font-ui); color: var(--cx-cons-char); }
.folio-v5 .cons-start .pf-thr-pick .inline-state:empty { display: none; }

/* ---------------------------------------------------------------------------
   ROW 2 RIGHT — THE ONE PERFORMING SHEET. There is no second demo card on
   these pages any more; this sheet IS what the tool produces.
   ------------------------------------------------------------------------ */
.folio-v5 .cons-start .pf-thr-demo {
  grid-column: 2;
  grid-row: 2;
  display: flex; flex-direction: column; gap: 11px;
  min-width: 0;
  /* the performing sheet SETS the height of the body row, and both columns
     stretch to it — so the composition owns the screen instead of floating in
     the middle of it, and neither column has to invent filler. */
  min-height: clamp(300px, 46vh, 440px);
  margin: 0; padding: 2px 0 0;
  border: 0; border-radius: 0; background: transparent;
}
.folio-v5 .cons-start .pf-thr-demo-head {
  flex: none;
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
}
.folio-v5 .cons-start .pf-thr-demo-head > .eyebrow { color: var(--cx-ink); }
.folio-v5 .cons-start .pf-thr-note {
  flex: none;
  font: 500 8.5px/1 var(--cx-font-mono);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--cx-cons-char);
}
.folio-v5 .cons-start .pf-thr-sheet {
  position: relative;
  flex: 1 1 auto;
  box-sizing: border-box;
  display: flex; flex-direction: column;
  min-height: 0;
  padding: 21px 24px 42px;
  border: 1px solid var(--cx-cons-hair);
  border-radius: 6px;
  background: var(--cx-cons-paper);
}
.folio-v5 .cons-start .pf-thr-sheet > .pf-tape {
  width: 66px; height: 19px; top: -9px; left: 42px;
  background: color-mix(in srgb, var(--cx-cons-tan) 92%, var(--cx-ink));
}
/* decorative: it must not straighten under the cursor like a real artefact,
   because there is nothing behind it to pick up. */
.folio-v5 .cons-start .pf-thr-sheet:hover {
  transform: rotate(var(--tk, -.7deg));
  box-shadow: var(--cx-shadow-raise) !important;
}
.folio-v5 .cons-start .pf-thr-line {
  flex: none;
  margin: 0 0 15px; max-width: 46ch;
  font: 400 13.5px/1.55 var(--cx-font-ui); color: var(--cx-cons-char);
}
.folio-v5 .cons-start .pf-thr-body {
  flex: 1 1 auto;
  display: flex; align-items: center; gap: 22px;
  min-height: 86px;
  padding-top: 15px;
  border-top: 1px solid var(--cx-cons-hair);
}
/* THE VERDICT STAMP — one performance, three words. It SLAMS in on the same
   4.6s beat every threshold's demo runs on: Typeset · Checked · Signed. It
   describes what the labelled sample sheet just did, never the visitor's work. */
.folio-v5 .cons-start .pf-thr-stamp {
  position: absolute; right: 18px; bottom: 12px;
  padding: 7px 11px; font-size: 10.5px;
  opacity: 0; transform: rotate(-9deg) scale(2.2);
  animation: pf-thr-slam 4.6s cubic-bezier(.34, 1.56, .64, 1) infinite;
}
@keyframes pf-thr-slam {
  0%, 58%   { opacity: 0; transform: rotate(-9deg) scale(2.2); }
  66%       { opacity: .95; transform: rotate(-9deg) scale(.94); }
  70%, 100% { opacity: .95; transform: rotate(-9deg) scale(1); }
}

/* ---------------------------------------------------------------------------
   ROW 3 — THE FACT STRIP. A slim ruled row, full width, closing the viewport.
   ------------------------------------------------------------------------ */
.folio-v5 .cons-start .pf-thr-facts {
  grid-column: 1 / -1;
  grid-row: 3;
  display: flex; align-items: baseline; gap: 0;
  margin: 0; padding: 13px 0 0;
  border: 0; border-top: 1px solid var(--cx-cons-hair);
}
.folio-v5 .cons-start .pf-thr-facts > span {
  flex: 0 0 auto; min-width: 0;
  display: flex; align-items: baseline; gap: 11px;
  padding: 0 30px 0 0;
}
.folio-v5 .cons-start .pf-thr-facts > span + span {
  padding-left: 30px; border-left: 1px solid var(--cx-cons-hair);
}
.folio-v5 .cons-start .pf-thr-facts b {
  flex: none;
  font: 400 27px/1 var(--cx-font-display); color: var(--cx-ink); letter-spacing: -.02em;
}
.folio-v5 .cons-start .pf-thr-facts small {
  margin: 0;
  font: 600 9.5px/1.3 var(--cx-font-ui);
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--cx-cons-char);
}


/* ---------------------------------------------------------------------------
   TALL DESKTOPS (1440x900 and up): the same skeleton, one step larger, so the
   composition fills the screen it is given rather than floating in it.
   ------------------------------------------------------------------------ */
@media (min-width: 1081px) and (min-height: 861px) {
  .folio-v5 .cons-start .pf-thr-stage { gap: 28px 52px; }
  .folio-v5 .cons-start .pf-thr-mast { padding-bottom: 22px; }
  .folio-v5 .cons-start .pf-thr-mast-a { gap: 14px; }
  .folio-v5 .cons-start .pf-thr-pick > header > .eyebrow { margin-bottom: 14px; }
  .folio-v5 .cons-start .pf-thr-pick .resume-source-options { margin-top: 20px; gap: 15px; }
  .folio-v5 .cons-start .pf-thr-pick .resume-source-options > button { min-height: 88px; padding: 16px 22px; }
  .folio-v5 .cons-start .pf-thr-pick > footer { padding-top: 16px; }
  .folio-v5 .cons-start .pf-thr-sheet { padding: 26px 28px 48px; }
  .folio-v5 .cons-start .pf-thr-line { margin-bottom: 18px; }
  .folio-v5 .cons-start .pf-thr-body { min-height: 120px; padding-top: 18px; }
  .folio-v5 .cons-start .pf-thr-facts { padding-top: 18px; }
  .folio-v5 .cons-start .pf-thr-facts b { font-size: 30px; }
}

/* ---------------------------------------------------------------------------
   SHORT DESKTOPS (1280x720 and every laptop under 800px tall): the skeleton is
   unchanged, the type and paddings step down so the one-glance law holds.
   ------------------------------------------------------------------------ */
@media (min-width: 861px) and (max-height: 810px) {
  .folio-v5 .cons-start .pf-thr-stage { gap: 15px 44px; padding: 15px 22px 15px; min-height: calc(100vh - 72px); }
  .folio-v5 .cons-start .pf-thr-mast { padding-bottom: 12px; gap: 10px 44px; }
  .folio-v5 .cons-start .pf-thr-mast-a { gap: 9px; }
  .folio-v5 .cons-start .pf-thr-mast h1 { font-size: clamp(29px, 2.85vw, 38px); }
  .folio-v5 .cons-start .pf-thr-mast .pf-thr-lede { font-size: 13.5px; line-height: 1.55; }
  .folio-v5 .cons-start .pf-thr-mast .pf-thr-aside { font-size: 17px; }
  .folio-v5 .cons-start .pf-thr-pick h2 { font-size: clamp(19px, 1.5vw, 22px); }
  .folio-v5 .cons-start .pf-thr-pick > header > .eyebrow { margin-bottom: 8px; }
  .folio-v5 .cons-start .pf-thr-pick .resume-source-options { margin-top: 11px; gap: 10px; }
  .folio-v5 .cons-start .pf-thr-pick .resume-source-options > button { min-height: 64px; max-height: 108px; padding: 11px 17px; }
  .folio-v5 .cons-start .pf-thr-pick .resume-source-options b { font-size: 15.5px; }
  .folio-v5 .cons-start .pf-thr-pick > footer { padding-top: 10px; }
  .folio-v5 .cons-start .pf-thr-sheet { padding: 16px 20px 38px; }
  .folio-v5 .cons-start .pf-thr-line { margin-bottom: 11px; font-size: 12.5px; }
  .folio-v5 .cons-start .pf-thr-body { min-height: 70px; padding-top: 12px; gap: 18px; }
  .folio-v5 .cons-start .pf-thr-facts { padding-top: 10px; }
  .folio-v5 .cons-start .pf-thr-facts b { font-size: 22px; }
}

/* ---------------------------------------------------------------------------
   TABLET — the two body panels stay side by side, the masthead stacks.
   ------------------------------------------------------------------------ */
@media (max-width: 1080px) and (min-width: 861px) {
  .folio-v5 .cons-start .pf-thr-stage { gap: 16px 32px; padding: 16px 18px; }
  .folio-v5 .cons-start .pf-thr-mast { grid-template-columns: 1fr; gap: 12px; align-items: start; }
  .folio-v5 .cons-start .pf-thr-mast h1 { max-width: none; }
}

/* ---------------------------------------------------------------------------
   PHONE — the SAME skeleton, stacked. The masthead, then the choices (every
   card inside the first screen at scrollY 0), then the performing sheet, then
   the fact strip.
   ------------------------------------------------------------------------ */
@media (max-width: 860px) {
  .folio-v5 .cons-start .pf-thr-stage {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    min-height: 0;
    gap: 16px;
    padding: 14px 14px 34px;
  }
  .folio-v5 .cons-start .pf-thr-mast,
  .folio-v5 .cons-start .pf-thr-pick,
  .folio-v5 .cons-start .pf-thr-demo,
  .folio-v5 .cons-start .pf-thr-facts { grid-column: 1; }
  .folio-v5 .cons-start .pf-thr-mast { grid-row: 1; grid-template-columns: 1fr; align-items: start; gap: 11px; padding-bottom: 13px; }
  .folio-v5 .cons-start .pf-thr-pick { grid-row: 2; }
  /* the sheet no longer sets a row height here: stacked, it is simply as tall
     as the performance inside it. */
  .folio-v5 .cons-start .pf-thr-demo { grid-row: 3; min-height: 0; }
  .folio-v5 .cons-start .pf-thr-facts { grid-row: 4; }

  .folio-v5 .cons-start .pf-thr-mast-a { gap: 8px; }
  .folio-v5 .cons-start .pf-thr-mast-b { gap: 8px; padding-bottom: 0; }
  .folio-v5 .cons-start .pf-thr-mast h1 { font-size: 28px; line-height: 1.08; max-width: none; }
  .folio-v5 .cons-start .pf-thr-mast .pf-thr-lede { font-size: 13.5px; line-height: 1.5; max-width: none; }
  .folio-v5 .cons-start .pf-thr-mast .pf-thr-aside { font-size: 17px; }

  .folio-v5 .cons-start .pf-thr-pick h2 { font-size: 20px; max-width: none; }
  .folio-v5 .cons-start .pf-thr-pick > header > .eyebrow { margin-bottom: 8px; font-size: 10px; }
  .folio-v5 .cons-start .pf-thr-pick .resume-source-options { flex: none; margin-top: 12px; gap: 10px; }
  .folio-v5 .cons-start .pf-thr-pick .resume-source-options > button {
    flex: none; min-height: 68px; max-height: none; padding: 12px 14px; gap: 12px;
    grid-template-columns: 34px minmax(0, 1fr) 16px; --tk: -.35deg;
  }
  .folio-v5 .cons-start .pf-thr-pick .resume-source-options > button > i { width: 34px; height: 34px; }
  .folio-v5 .cons-start .pf-thr-pick .resume-source-options > button > .pf-tape { width: 46px; height: 14px; top: -7px; left: 22px; }
  .folio-v5 .cons-start .pf-thr-pick .resume-source-options b { font-size: 15.5px; }
  .folio-v5 .cons-start .pf-thr-pick .resume-source-options small { font-size: 11.5px; }
  .folio-v5 .cons-start .pf-thr-pick > footer { flex-wrap: wrap; gap: 8px 14px; padding-top: 11px; }

  .folio-v5 .cons-start .pf-thr-sheet { flex: none; padding: 17px 17px 40px; }
  .folio-v5 .cons-start .pf-thr-line { font-size: 12.5px; margin-bottom: 12px; }
  .folio-v5 .cons-start .pf-thr-body { min-height: 0; gap: 16px; padding-top: 13px; }
  /* the stamp is inset far enough that its rotation cannot reach the edge */
  /* the slam starts at 2.2x — on a narrow screen it slams from the corner it
     lands in, so the oversized first frame can never reach past the sheet. */
  .folio-v5 .cons-start .pf-thr-stamp { right: 14px; bottom: 11px; padding: 6px 9px; font-size: 9.5px; transform-origin: 100% 100%; }

  .folio-v5 .cons-start .pf-thr-facts { padding-top: 11px; }
  .folio-v5 .cons-start .pf-thr-facts > span { gap: 8px; padding-right: 10px; flex-direction: column; }
  .folio-v5 .cons-start .pf-thr-facts > span + span { padding-left: 12px; }
  .folio-v5 .cons-start .pf-thr-facts b { font-size: 19px; }
  .folio-v5 .cons-start .pf-thr-facts small { font-size: 8.5px; letter-spacing: .07em; }
}

/* ---------------------------------------------------------------------------
   REDUCED MOTION — every performance settled at its final state.
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .folio-v5 .cons-start .pf-thr-pick .resume-source-options > button,
  .folio-v5 .cons-start .pf-thr-sheet { transition: none; }
  .folio-v5 .cons-start .pf-thr-stamp {
    animation: none !important; opacity: .95; transform: rotate(-9deg) scale(1);
  }
}

/* ============================================================================
   §5.2 · THE GALLERIES (/resume-designs, /cover-letter-designs)
   ----------------------------------------------------------------------------
   WAS: a bare head, a grey search/filter strip, a count, and a flat grid of
   unframed thumbnails on paper — the same page three times with a different
   noun in the heading.
   NOW: a RAILHEAD — the landing rail's identity block: eyebrow, Cormorant
   head, the count and the filter pills, all inside one parchment band. Each
   template becomes a ladder card: a parchment frame around a paper sheet, with
   the landing rail's meta row underneath (serif name left, caps tag right).
   ========================================================================== */
.folio-v5 .resume-designs-page { background: var(--cx-cons-paper); }

/* -- the railhead band -- */
.folio-v5 .resume-designs-hero {
  max-width: 1540px; margin: 0 auto; align-items: end;
  padding: 52px 46px 30px;
  border-radius: 14px 14px 0 0; border: 0;
  background: var(--cx-cons-parchment);
}
.folio-v5 .resume-designs-hero h1 {
  margin: 16px 0 0;
  font: 300 clamp(34px, 3.6vw, 52px)/1.1 var(--cx-font-display);
  letter-spacing: -.02em; color: var(--cx-ink);
}
.folio-v5 .resume-designs-hero p { max-width: 46ch; color: var(--cx-cons-char); font: 400 14.5px/1.6 var(--cx-font-ui); }
.folio-v5 .resume-designs-hero a.resume-designs-back {
  margin-top: 18px; font: 600 13px/1 var(--cx-font-ui); color: var(--cx-ink);
  border-bottom: 1.5px solid var(--cx-cons-vermilion); padding-bottom: 4px; text-decoration: none;
}
.folio-v5 .resume-designs-tools {
  max-width: 1540px; margin: 0 auto;
  padding: 24px 46px 30px;
  border: 0; border-top: 1px solid var(--cx-cons-hair);
  border-radius: 0 0 14px 14px;
  background: var(--cx-cons-parchment);
  align-items: center;
}
.folio-v5 .resume-designs-tools input {
  border: 1px solid var(--cx-cons-hair); border-radius: 999px;
  background: var(--cx-cons-paper); color: var(--cx-ink);
  padding: 13px 20px; font: 400 13.5px/1 var(--cx-font-ui); min-height: 46px;
}
.folio-v5 .resume-designs-tools button {
  border: 1px solid var(--cx-cons-hair); border-radius: 999px;
  background: var(--cx-cons-paper); color: var(--cx-ink);
  padding: 12px 17px; min-height: 44px;
  font: 400 13px/1 var(--cx-font-ui); letter-spacing: 0; text-transform: none;
  transition: background .2s ease, border-color .2s ease;
}
.folio-v5 .resume-designs-tools button:hover { background: var(--cx-cons-bone); border-color: var(--cx-cons-tan); }
.folio-v5 .resume-designs-tools button.on { background: var(--cx-ink); color: var(--cx-cons-paper); border-color: var(--cx-ink); }
.folio-v5 .resume-designs-count {
  max-width: 1540px; margin: 22px auto 16px; padding: 0 4px;
  display: inline-flex; align-items: center; gap: 9px;
  font: 600 11px/1 var(--cx-font-ui); letter-spacing: .08em; text-transform: uppercase;
  color: var(--cx-ink);
}
.folio-v5 .resume-designs-count::before { content: ""; width: 8px; height: 8px; flex: none; background: var(--cx-cons-vermilion); }

/* -- the ladder card: parchment frame, paper sheet, rail meta row -- */
.folio-v5 .resume-design-card {
  background: var(--cx-cons-parchment); border-radius: 14px;
  padding: 14px 14px 16px;
  border: 0;
  transition: background .3s ease, transform .35s cubic-bezier(.22,.61,.36,1);
}
.folio-v5 .resume-design-card:hover { background: var(--cx-cons-bone); }
.folio-v5 .resume-design-paper {
  padding: 0; border: 0; border-radius: 8px; overflow: hidden;
  background: var(--cx-cons-paper);
}
.folio-v5 .resume-design-paper:hover { transform: none; }
.folio-v5 .resume-design-paper .resume-template-thumb { border-radius: 8px; background: var(--cx-cons-paper); }
.folio-v5 .resume-design-number {
  top: 10px; left: 10px; border-radius: 999px; padding: 6px 10px;
  background: var(--cx-ink); color: var(--cx-cons-paper);
  font: 600 9.5px/1 var(--cx-font-ui); letter-spacing: .06em;
}
.folio-v5 .resume-design-card-copy { align-items: baseline; padding: 16px 4px 2px; }
.folio-v5 .resume-design-card-copy small {
  color: var(--cx-cons-quiet); font: 600 9.5px/1 var(--cx-font-ui);
  letter-spacing: .07em; text-transform: uppercase;
}
.folio-v5 .resume-design-card-copy h2 { margin: 8px 0 0; font: 400 21px/1.05 var(--cx-font-display); color: var(--cx-ink); }
.folio-v5 .resume-design-card-copy p { margin: 7px 0 0; color: var(--cx-cons-char); font: 400 12px/1.45 var(--cx-font-ui); max-width: 30ch; }
.folio-v5 .resume-design-card-copy em {
  font: 600 9.5px/1 var(--cx-font-ui); letter-spacing: .07em; text-transform: uppercase;
  color: var(--cx-cons-quiet); font-style: normal;
}
.folio-v5 .resume-design-card-copy button,
.folio-v5 .resume-design-card-copy a {
  font: 600 12px/1 var(--cx-font-ui); color: var(--cx-ink);
  border: 0; background: transparent; padding: 8px 0 5px; min-height: 0;
  border-bottom: 1.5px solid var(--cx-cons-vermilion); text-decoration: none;
  display: inline-flex; gap: 7px; align-items: center; transition: gap .2s ease;
}
.folio-v5 .resume-design-card-copy button:hover { gap: 12px; background: transparent; }
.folio-v5 .resume-designs-empty { background: var(--cx-cons-parchment); border-radius: 14px; }

@media (max-width: 720px) {
  .folio-v5 .resume-designs-hero { padding: 34px 22px 24px; }
  .folio-v5 .resume-designs-tools { padding: 20px 22px 24px; }
  .folio-v5 .resume-design-card-copy { flex-direction: column; gap: 12px; }
  .folio-v5 .resume-design-card-copy > span:last-child { align-items: flex-start; flex-direction: row; justify-content: space-between; width: 100%; }
}

/* the filter pills flow from the left beside the search, one band, no orphan
   second row pushed to the right edge. */
.folio-v5 .resume-designs-tools { flex-wrap: wrap; gap: 14px 18px; }
.folio-v5 .resume-designs-tools label { min-width: 0; width: 300px; flex: none; }
.folio-v5 .resume-designs-tools > div { justify-content: flex-start; flex: 1 1 380px; gap: 8px; }
/* ============================================================================
   §5.2b · THE PORTFOLIO GALLERY (/portfolio-designs) — ON THE FIELD
   ----------------------------------------------------------------------------
   The landing puts the twenty portfolio worlds on the dark field, because a
   finished website is PROOF and the field is where proof is staged. The
   gallery is the same twenty worlds, so it belongs on the same ground: a
   parchment railhead, then the whole catalogue on graphite with cream-framed
   cards. WAS: the same cards on bare paper, three per row, with the head and
   the filters loose above them.
   ========================================================================== */
.folio-v5 .portfolio-showcase-hero {
  max-width: 1540px; margin: 0 auto; padding: 52px 46px 30px;
  border-radius: 14px 14px 0 0; background: var(--cx-cons-parchment);
}
.folio-v5 .portfolio-showcase-hero > div > span {
  display: inline-flex; align-items: center; gap: 9px;
  font: 600 11px/1 var(--cx-font-ui); letter-spacing: .08em; text-transform: uppercase;
  color: var(--cx-ink);
}
.folio-v5 .portfolio-showcase-hero > div > span::before { content: ""; width: 8px; height: 8px; flex: none; background: var(--cx-cons-vermilion); }
.folio-v5 .portfolio-showcase-hero h1 {
  margin: 16px 0 0; font: 300 clamp(34px, 3.6vw, 52px)/1.1 var(--cx-font-display);
  letter-spacing: -.02em; color: var(--cx-ink);
}
.folio-v5 .portfolio-showcase-hero h1 em { font-style: italic; }
.folio-v5 .portfolio-showcase-hero p { color: var(--cx-cons-char); font: 400 14.5px/1.6 var(--cx-font-ui); max-width: 46ch; }
.folio-v5 .portfolio-showcase-tools {
  max-width: 1540px; margin: 0 auto; padding: 24px 46px 30px;
  border: 0; border-top: 1px solid var(--cx-cons-hair);
  border-radius: 0 0 14px 14px; background: var(--cx-cons-parchment);
  align-items: center; gap: 16px 22px;
}
.folio-v5 .portfolio-showcase-tools p {
  display: inline-flex; align-items: center; gap: 9px;
  font: 600 11px/1 var(--cx-font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--cx-ink);
}
.folio-v5 .portfolio-showcase-tools p::before { content: ""; width: 8px; height: 8px; flex: none; background: var(--cx-cons-vermilion); }
.folio-v5 .portfolio-showcase-tools p b { font-weight: 600; }
.folio-v5 .portfolio-showcase-tools nav { gap: 8px; flex-wrap: wrap; }
.folio-v5 .portfolio-showcase-tools nav button {
  border: 1px solid var(--cx-cons-hair); border-radius: 999px;
  background: var(--cx-cons-paper); color: var(--cx-ink);
  padding: 12px 17px; min-height: 44px; font: 400 13px/1 var(--cx-font-ui);
  letter-spacing: 0; text-transform: none;
}
.folio-v5 .portfolio-showcase-tools nav button:hover { background: var(--cx-cons-bone); border-color: var(--cx-cons-tan); }
.folio-v5 .portfolio-showcase-tools nav button.on { background: var(--cx-ink); color: var(--cx-cons-paper); border-color: var(--cx-ink); }

/* -- the catalogue: the field -- */
.folio-v5 .portfolio-showcase-catalogue {
  background: var(--cx-cons-field); border-radius: 14px;
  max-width: 1540px; margin: 14px auto 0; padding: 52px 46px 46px;
}
.folio-v5 .portfolio-showcase-card {
  background: var(--cx-cons-paper); border-radius: 14px; padding: 12px 12px 14px;
  transition: transform .35s cubic-bezier(.22,.61,.36,1);
}
.folio-v5 .portfolio-showcase-card:hover { transform: translateY(-6px); }
.folio-v5 .portfolio-showcase-card > a { display: block; }
.folio-v5 .portfolio-showcase-art { border-radius: 8px; overflow: hidden; }
.folio-v5 .portfolio-showcase-art em {
  border-radius: 999px; padding: 6px 11px;
  font: 600 9px/1 var(--cx-font-ui); letter-spacing: .07em; font-style: normal;
  background: var(--cx-ink); color: var(--cx-cons-paper);
}
.folio-v5 .portfolio-showcase-meta { padding: 14px 6px 2px; align-items: baseline; }
.folio-v5 .portfolio-showcase-index i,
.folio-v5 .portfolio-showcase-index small {
  color: var(--cx-cons-quiet); font: 600 9.5px/1 var(--cx-font-ui);
  letter-spacing: .07em; text-transform: uppercase; font-style: normal;
}
.folio-v5 .portfolio-showcase-meta h2 { font: 400 21px/1.05 var(--cx-font-display); color: var(--cx-ink); }
.folio-v5 .portfolio-showcase-meta p { color: var(--cx-cons-char); font: 400 12px/1.45 var(--cx-font-ui); }
.folio-v5 .portfolio-showcase-open {
  font: 600 12px/1 var(--cx-font-ui); color: var(--cx-ink);
  border-bottom: 1.5px solid var(--cx-cons-vermilion); padding-bottom: 4px;
}
.folio-v5 .portfolio-showcase-footer { border-top: 1px solid var(--cx-cons-field-soft); margin-top: 42px; padding-top: 42px; }
.folio-v5 .portfolio-showcase-footer p { color: var(--cx-ink); font-family: var(--cx-font-display); font-weight: 300; }
.folio-v5 .portfolio-showcase-footer a {
  background: var(--cx-ink); color: var(--cx-cons-paper); border-radius: 14px;
  padding: 16px 24px; font: 400 14px/1 var(--cx-font-ui); border: 0;
}

/* ============================================================================
   §5.3 · THE PORTFOLIO DETAIL (/portfolio-designs/<id>)
   ----------------------------------------------------------------------------
   WAS: a browser-chrome frame sitting on a light wash, its header a row of
   plain grey controls.
   NOW: the frame is a cream card FLOATING ON THE FIELD — the same stage the
   gallery uses, so a design keeps the ground it was chosen on. The header
   becomes eyebrow → serif title → device pills, and Use this design is the
   ink button with the vermilion thread under it.
   ========================================================================== */
.folio-v5 .portfolio-showcase-detail { background: var(--cx-cons-paper); }
.folio-v5 .portfolio-detail-nav {
  background: var(--cx-cons-parchment); border: 0;
  padding: 26px clamp(20px, 3vw, 44px); align-items: center;
}
.folio-v5 .portfolio-detail-nav > a {
  font: 600 11px/1 var(--cx-font-ui); letter-spacing: .08em; text-transform: uppercase;
  color: var(--cx-ink); text-decoration: none;
}
.folio-v5 .portfolio-detail-nav > div > span {
  display: inline-flex; align-items: center; gap: 9px;
  font: 600 11px/1 var(--cx-font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--cx-ink);
}
.folio-v5 .portfolio-detail-nav > div > span::before { content: ""; width: 8px; height: 8px; flex: none; background: var(--cx-cons-vermilion); }
.folio-v5 .portfolio-detail-nav h1 { margin: 10px 0 0; font: 300 30px/1.1 var(--cx-font-display); letter-spacing: -.01em; color: var(--cx-ink); }
.folio-v5 .portfolio-detail-nav > div > p { margin: 7px 0 0; color: var(--cx-cons-char); font: 400 12.5px/1.4 var(--cx-font-ui); }
.folio-v5 .portfolio-detail-device {
  background: var(--cx-cons-paper); border: 1px solid var(--cx-cons-hair);
  border-radius: 999px; padding: 4px; gap: 2px;
}
.folio-v5 .portfolio-detail-device button {
  border: 0; border-radius: 999px; background: transparent; color: var(--cx-cons-char);
  padding: 11px 18px; min-height: 44px; font: 400 13px/1 var(--cx-font-ui);
  letter-spacing: 0; text-transform: none;
}
.folio-v5 .portfolio-detail-device button.on { background: var(--cx-ink); color: var(--cx-cons-paper); }
.folio-v5 .portfolio-detail-fullscreen-trigger {
  border: 1px solid var(--cx-cons-hair); border-radius: 999px; background: var(--cx-cons-paper);
  color: var(--cx-ink); padding: 12px 18px; min-height: 44px; font: 400 13px/1 var(--cx-font-ui);
  letter-spacing: 0; text-transform: none;
}
.folio-v5 .portfolio-detail-nav button.ink {
  background: var(--cx-ink); color: var(--cx-cons-paper); border: 0; border-radius: 14px;
  padding: 15px 24px; min-height: 44px; font: 400 14px/1 var(--cx-font-ui);
  letter-spacing: 0; text-transform: none; position: relative;
}
.folio-v5 .portfolio-detail-nav button.ink::after {
  content: ""; position: absolute; left: 24px; right: 24px; bottom: 11px; height: 1.5px;
  background: var(--cx-cons-vermilion); transform: scaleX(0); transform-origin: left;
  transition: transform .3s cubic-bezier(.22,.61,.36,1);
}
.folio-v5 .portfolio-detail-nav button.ink:hover::after { transform: scaleX(1); }
/* the stage — the field, with the browser card floating on it */
.folio-v5 .portfolio-detail-stage {
  background: var(--cx-cons-field) !important;
  padding: 34px clamp(20px, 3vw, 44px) 40px;
}
.folio-v5 .portfolio-detail-browser {
  background: var(--cx-cons-paper); border: 0; border-radius: 14px; overflow: hidden;
}
.folio-v5 .portfolio-detail-browserbar {
  background: var(--cx-cons-parchment) !important; border: 0;
  border-bottom: 1px solid var(--cx-cons-hair); padding: 14px 18px;
}
.folio-v5 .portfolio-detail-browserbar b {
  font: 600 10px/1 var(--cx-font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--cx-cons-char);
}
.folio-v5 .portfolio-detail-browserbar i { background: var(--cx-cons-tan); }

/* ============================================================================
   §5.4 · THE BUILDERS (résumé, cover letter, portfolio)
   ----------------------------------------------------------------------------
   THE SIGNATURE MOVE. WAS: a grey rail, a white form column and a white
   preview column — three unpainted regions, and the document floating in the
   middle of the third with nothing under it.
   NOW: the rail is a parchment panel with eyebrow section labels and a
   vermilion mark on the active step; the form column is a ladder of panels
   with serif section heads; and the live document is a PAPER SHEET ON THE
   FIELD — a dark stage that says "this is the artefact", the same device the
   landing uses for finished work.

   The rail rules carry the tree's own five-class prefix, because the studio
   sheets style it at that weight; anything lighter would not land.
   ========================================================================== */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .studio-product-nav {
  background: var(--cx-cons-parchment);
  border-right: 1px solid var(--cx-cons-hair);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .studio-product-nav-home {
  background: var(--cx-cons-bone); border: 0;
  border-bottom: 1px solid var(--cx-cons-hair);
  padding: 22px 22px;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .studio-product-nav-home b {
  font: 400 18px/1.1 var(--cx-font-display); color: var(--cx-ink); letter-spacing: -.01em;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .studio-product-nav-home small {
  font: 400 12px/1.3 var(--cx-font-ui); color: var(--cx-cons-char);
}
/* the section label becomes the canon eyebrow */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .studio-product-nav-label {
  display: inline-flex; align-items: center; gap: 9px;
  font: 600 11px/1 var(--cx-font-ui); letter-spacing: .08em; text-transform: uppercase;
  color: var(--cx-ink); padding: 26px 22px 16px; background: transparent; border: 0;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .studio-product-nav-label::before {
  content: ""; width: 8px; height: 8px; flex: none; background: var(--cx-cons-vermilion);
}
/* the steps: hairline-separated rows, the active one lifted onto paper and
   marked with the vermilion edge */
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .tool-workflow-step {
  position: relative; border: 0; border-radius: 0;
  background: transparent; color: var(--cx-ink);
  padding: 15px 22px; min-height: 62px;
  transition: background .2s ease;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .tool-workflow-step::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: transparent; transition: background .2s ease;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .tool-workflow-step:hover { background: var(--cx-cons-bone); }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .tool-workflow-step.on {
  background: var(--cx-cons-paper);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .tool-workflow-step.on::before { background: var(--cx-cons-vermilion); }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .tool-workflow-step b {
  font: 400 15.5px/1.2 var(--cx-font-display); color: var(--cx-ink); letter-spacing: 0;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .tool-workflow-step small {
  font: 400 11.5px/1.35 var(--cx-font-ui); color: var(--cx-cons-char);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .tool-workflow-step .tool-workflow-icon {
  background: transparent; border: 0; color: var(--cx-cons-quiet);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .tool-workflow-step.on .tool-workflow-icon { color: var(--cx-ink); }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .tool-workflow-count {
  font: 600 10.5px/1 var(--cx-font-ui); color: var(--cx-cons-quiet); font-style: normal;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .tool-workflow-group {
  display: block; padding: 22px 22px 8px;
  font: 600 10px/1 var(--cx-font-ui); letter-spacing: .08em; text-transform: uppercase;
  color: var(--cx-cons-quiet);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .studio-product-nav-foot {
  background: var(--cx-cons-bone); border: 0; border-top: 1px solid var(--cx-cons-hair);
  padding: 20px 22px;
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .tool-workflow-status b {
  font: 600 12px/1 var(--cx-font-ui); color: var(--cx-ink);
}
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .tool-workflow-status i { background: var(--cx-cons-vermilion); }
body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .tool-workflow-status small {
  font: 400 11.5px/1.35 var(--cx-font-ui); color: var(--cx-cons-char);
}

/* -- the mode tabs become a pill segmented control -- */
.folio-v5 .resume-context-bar,
.folio-v5 .cover-context-bar,
.folio-v5 .portfolio-mode-bar {
  background: var(--cx-cons-parchment); border: 0;
  border-bottom: 1px solid var(--cx-cons-hair);
}
.folio-v5 .resume-context-bar > nav,
.folio-v5 .portfolio-mode-bar > nav {
  background: var(--cx-cons-paper); border: 1px solid var(--cx-cons-hair);
  border-radius: 999px; padding: 4px; gap: 2px; display: inline-flex;
}
.folio-v5 .resume-context-bar > nav button,
.folio-v5 .portfolio-mode-bar > nav button {
  border: 0; border-radius: 999px; background: transparent; color: var(--cx-cons-char);
  min-height: 44px; padding: 8px 20px;
}
.folio-v5 .resume-context-bar > nav button b,
.folio-v5 .portfolio-mode-bar > nav button b { font: 400 14px/1.2 var(--cx-font-ui); }
.folio-v5 .resume-context-bar > nav button small,
.folio-v5 .portfolio-mode-bar > nav button small { font: 400 11px/1.2 var(--cx-font-ui); color: var(--cx-cons-quiet); }
.folio-v5 .resume-context-bar > nav button.on,
.folio-v5 .portfolio-mode-bar > nav button.on { background: var(--cx-ink); color: var(--cx-cons-paper); }
.folio-v5 .resume-context-bar > nav button.on small,
.folio-v5 .portfolio-mode-bar > nav button.on small { color: var(--cx-cons-tan); }
.folio-v5 .resume-context-bar > div > span {
  font: 400 15px/1.2 var(--cx-font-display); color: var(--cx-ink);
}

/* -- the stage: the live document floats on the field -- */
.folio-v5 .resume-editor-preview,
.folio-v5 .cover-preview-pane,
.folio-v5 .portfolio-live-stage,
.folio-v5 .resume-onboarding-preview {
  background: var(--cx-cons-field) !important;
  padding: 22px;
}
.folio-v5 .resume-preview-toolbar,
.folio-v5 .portfolio-live-stage > header {
  background: transparent; border: 0; padding: 4px 6px 16px;
}
.folio-v5 .resume-preview-toolbar small,
.folio-v5 .portfolio-live-stage > header {
  display: inline-flex; align-items: center; gap: 9px;
  font: 600 10.5px/1 var(--cx-font-ui); letter-spacing: .08em; text-transform: uppercase;
  color: var(--cx-ink);
}
.folio-v5 .resume-preview-toolbar small::before {
  content: ""; width: 8px; height: 8px; flex: none; background: var(--cx-cons-vermilion);
}
.folio-v5 .resume-preview-toolbar b { font: 400 17px/1.2 var(--cx-font-display); color: var(--cx-ink); }
.folio-v5 .resume-preview-toolbar em {
  font: 400 11.5px/1.4 var(--cx-font-ui); color: var(--cx-cons-field-ink60); font-style: normal;
}
.folio-v5 .resume-preview-toolbar .button,
.folio-v5 .portfolio-live-stage > header .button {
  background: transparent; border: 1px solid var(--cx-cons-field-soft);
  color: var(--cx-ink); border-radius: 999px; min-height: 44px; padding: 10px 18px;
}
.folio-v5 .resume-preview-toolbar .button:hover { background: var(--cx-cons-field-soft); }
/* the sheet itself */
.folio-v5 .resume-editor-preview .document-frame,
.folio-v5 .resume-onboarding-preview .document-frame,
.folio-v5 .portfolio-live-stage .portfolio-frame-wrap {
  background: var(--cx-cons-paper); border: 0; border-radius: 14px; overflow: hidden;
}
.folio-v5 .resume-editor-preview .preview-loading,
.folio-v5 .resume-onboarding-preview .preview-loading {
  color: var(--cx-cons-char); font: 400 13px/1 var(--cx-font-ui);
}

/* -- the form column: a ladder of panels with serif heads -- */
.folio-v5 .resume-editor-canvas,
.folio-v5 .cover-editor-canvas { background: var(--cx-cons-paper); }
.folio-v5 .resume-content-overview > header h2,
.folio-v5 .resume-content-overview > header h1 {
  font: 300 34px/1.08 var(--cx-font-display); letter-spacing: -.01em; color: var(--cx-ink);
}
.folio-v5 .resume-content-entry,
.folio-v5 .cover-editor-entry {
  border: 0; border-radius: 14px; background: var(--cx-cons-parchment);
  padding: 22px 24px; min-height: 76px;
  transition: background .25s ease;
}
.folio-v5 .resume-content-entry:hover,
.folio-v5 .cover-editor-entry:hover { background: var(--cx-cons-bone); transform: none; }
.folio-v5 .resume-content-entry b,
.folio-v5 .cover-editor-entry b { font: 400 17px/1.2 var(--cx-font-display); color: var(--cx-ink); }
.folio-v5 .resume-content-entry small,
.folio-v5 .cover-editor-entry small { font: 400 12px/1.4 var(--cx-font-ui); color: var(--cx-cons-char); }
.folio-v5 .resume-content-entry em,
.folio-v5 .cover-editor-entry em {
  border-radius: 999px; background: var(--cx-cons-paper); color: var(--cx-cons-char);
  padding: 7px 12px; font: 600 10px/1 var(--cx-font-ui); letter-spacing: .06em;
  text-transform: uppercase; font-style: normal;
}
.folio-v5 .resume-content-entry i { background: var(--cx-cons-paper); border: 0; border-radius: 8px; color: var(--cx-ink); }
.folio-v5 .resume-content-entry.is-empty { background: var(--cx-cons-parchment); border: 1px dashed var(--cx-cons-tan); }
/* the focused editor keeps its form, framed as a ladder panel */
.folio-v5 .resume-focused-editor,
.folio-v5 .cover-focused-editor,
.folio-v5 .resume-section-editor {
  background: var(--cx-cons-parchment); border: 0; border-radius: 14px; padding: 34px;
}
.folio-v5 .resume-focused-editor h2,
.folio-v5 .cover-focused-editor h2 { font: 300 30px/1.1 var(--cx-font-display); color: var(--cx-ink); }
.folio-v5 .resume-focused-editor input,
.folio-v5 .resume-focused-editor textarea,
.folio-v5 .cover-focused-editor input,
.folio-v5 .cover-focused-editor textarea {
  background: var(--cx-cons-paper); border: 1px solid var(--cx-cons-hair); border-radius: 10px;
}
/* Download / Preview read as ink buttons */
.folio-v5 .resume-editor-page .button-primary,
.folio-v5 .cover-product .button-primary,
.folio-v5 .portfolio-product .button-primary {
  background: var(--cx-ink); color: var(--cx-cons-paper); border: 0; border-radius: 14px; min-height: 44px;
}

/* resume-cvflow.css pins the write-mode preview pane's ground with
   `background: var(--cv-wash) !important` at four classes; the stage has to
   answer at that weight or the signature move never lands. */
body.folio-v5 .resume-editor-page[data-studio-mode] .resume-editor-preview,
body.folio-v5 .resume-inline-onboarding .resume-onboarding-preview,
body.folio-v5 .cover-product .cover-preview-pane {
  background: var(--cx-cons-field) !important;
  padding: 22px !important;
}
body.folio-v5 .resume-editor-page[data-studio-mode] .resume-editor-preview .document-frame,
body.folio-v5 .resume-inline-onboarding .resume-onboarding-preview .document-frame {
  background: var(--cx-cons-paper) !important;
  border: 0 !important; border-radius: 14px !important; overflow: hidden !important;
}
body.folio-v5 .resume-editor-preview .document-frame iframe,
body.folio-v5 .resume-onboarding-preview .document-frame iframe {
  border: 0 !important; border-radius: 14px;
}

/* THE VOID LAW, applied to the editor column. The centre used to be one tall
   unpainted sheet with two rows near the top and half a viewport of nothing
   under them. It becomes the ladder in three steps: a parchment GROUND, the
   working panel on paper, the entry rows back on parchment — so the region
   below the last row is a tinted panel, not a void, and the column reads as
   one composed surface against the field. */
body.folio-v5 .resume-editor-page .resume-editor-canvas,
body.folio-v5 .resume-editor-page .resume-design-canvas,
body.folio-v5 .portfolio-content-studio > .portfolio-content-main {
  background: var(--cx-cons-parchment) !important;
}
body.folio-v5 .resume-editor-page .resume-content-overview,
body.folio-v5 .resume-editor-page .resume-focused-editor {
  background: var(--cx-cons-paper); border-radius: 14px; padding: 38px 34px 34px;
}
body.folio-v5 .resume-editor-page .resume-content-overview .resume-content-entry,
body.folio-v5 .resume-editor-page .resume-content-overview .cover-editor-entry {
  background: var(--cx-cons-parchment);
}
body.folio-v5 .resume-editor-page .resume-content-overview .resume-content-entry:hover { background: var(--cx-cons-bone); }
body.folio-v5 .resume-editor-page .resume-design-panel { background: transparent; }
body.folio-v5 .resume-editor-page .design-control-panel,
body.folio-v5 .resume-editor-page .resume-template-library {
  background: var(--cx-cons-paper); border: 0; border-radius: 14px; padding: 34px;
}

/* ============================================================================
   §5.5 · THE ATS REPORT
   ----------------------------------------------------------------------------
   The report was already closest to the grammar; what it lacked was the
   LADDER. Now: the head band on parchment, the score ring in its own bone
   panel, the verdict on parchment beside it, the diagnostics rendered as the
   landing's privacy ledger (hairline rows, serif name left, value right), and
   the summary strip as pills. The ring's arc is the one vermilion.
   ========================================================================== */
.folio-v5 .ats-report-system { background: var(--cx-cons-paper); }
.folio-v5 .ats-report-head-system {
  background: var(--cx-cons-parchment); border: 0; border-radius: 14px;
  padding: 34px 34px 30px; margin-bottom: 14px; align-items: center;
}
.folio-v5 .ats-report-head-system h1 {
  margin: 14px 0 0; font: 300 clamp(30px, 3vw, 42px)/1.08 var(--cx-font-display);
  letter-spacing: -.02em; color: var(--cx-ink);
}
.folio-v5 .ats-report-head-system p { margin: 9px 0 0; color: var(--cx-cons-char); font: 400 12.5px/1.4 var(--cx-font-ui); }
.folio-v5 .ats-report-head-system .button {
  border-radius: 999px; min-height: 44px; padding: 12px 20px;
  border: 1px solid var(--cx-cons-hair); background: var(--cx-cons-paper); color: var(--cx-ink);
  font: 400 13px/1 var(--cx-font-ui); letter-spacing: 0; text-transform: none;
}
.folio-v5 .ats-report-head-system .button:hover { background: var(--cx-cons-bone); border-color: var(--cx-cons-tan); }
.folio-v5 .ats-report-sheet { background: transparent; border: 0; padding: 0; }
/* the verdict pair: bone panel for the ring, parchment for the words */
.folio-v5 .ats-score-verdict { border: 0; gap: 14px; background: transparent; }
.folio-v5 .ats-score-block {
  background: var(--cx-cons-bone); border: 0; border-radius: 14px; padding: 42px 34px;
}
.folio-v5 .ats-score-block > span {
  font: 600 11px/1 var(--cx-font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--cx-ink);
  display: inline-flex; align-items: center; gap: 9px;
}
.folio-v5 .ats-score-block > span::before { content: ""; width: 8px; height: 8px; flex: none; background: var(--cx-cons-vermilion); }
.folio-v5 .ats-score-block > p { color: var(--cx-cons-char); font: 400 12px/1.45 var(--cx-font-ui); }
.folio-v5 .ats-score-ring { background: var(--cx-cons-paper); }
.folio-v5 .ats-score-ring strong { font-family: var(--cx-font-display); font-weight: 300; color: var(--cx-ink); }
.folio-v5 .ats-score-ring small { color: var(--cx-cons-char); font-family: var(--cx-font-ui); }
.folio-v5 .ats-verdict-block {
  background: var(--cx-cons-parchment); border: 0; border-radius: 14px; padding: 42px 40px;
}
.folio-v5 .ats-verdict-block h2 {
  font: 300 clamp(30px, 3.2vw, 44px)/1.1 var(--cx-font-display); letter-spacing: -.02em; color: var(--cx-ink);
}
.folio-v5 .ats-verdict-block > p { color: var(--cx-cons-char); font: 400 13.5px/1.6 var(--cx-font-ui); }
.folio-v5 .ats-best-move {
  border: 0; border-top: 1px solid var(--cx-cons-hair); border-radius: 0;
  background: transparent; padding: 24px 0 0; margin-top: 26px;
}
.folio-v5 .ats-best-move small {
  font: 600 10px/1 var(--cx-font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--cx-cons-quiet);
}
.folio-v5 .ats-best-move b { font: 400 19px/1.2 var(--cx-font-display); color: var(--cx-ink); }
.folio-v5 .ats-best-move em { font: 400 12.5px/1.5 var(--cx-font-ui); color: var(--cx-cons-char); font-style: normal; }
.folio-v5 .ats-best-move button {
  background: var(--cx-ink); color: var(--cx-cons-paper); border: 0; border-radius: 14px;
  min-height: 44px; padding: 14px 22px; font: 400 13.5px/1 var(--cx-font-ui);
  letter-spacing: 0; text-transform: none;
}
/* the diagnostics: the privacy ledger, in hairlines */
.folio-v5 .ats-diagnostic-ledger {
  background: var(--cx-cons-parchment); border: 0; border-radius: 14px;
  padding: 38px 40px 12px; margin-top: 14px;
}
.folio-v5 .ats-diagnostic-ledger > header { border: 0; padding: 0 0 8px; background: transparent; }
.folio-v5 .ats-diagnostic-ledger > header h2 {
  margin: 14px 0 0; font: 300 32px/1.1 var(--cx-font-display); letter-spacing: -.01em; color: var(--cx-ink);
}
.folio-v5 .ats-diagnostic-ledger > header small {
  font: 600 10px/1 var(--cx-font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--cx-cons-quiet);
}
.folio-v5 .ats-diagnostic-ledger article {
  border: 0; border-top: 1px solid var(--cx-cons-hair); border-radius: 0;
  background: transparent; padding: 22px 4px; align-items: center;
}
.folio-v5 .ats-diagnostic-ledger article b { font: 400 18px/1.2 var(--cx-font-display); color: var(--cx-ink); }
.folio-v5 .ats-diagnostic-ledger article small { font: 400 12px/1.4 var(--cx-font-ui); color: var(--cx-cons-char); }
.folio-v5 .ats-diagnostic-ledger article i { background: transparent; border: 0; color: var(--cx-cons-quiet); }
.folio-v5 .ats-diagnostic-ledger article em { background: var(--cx-cons-hair); border-radius: 2px; }
.folio-v5 .ats-diagnostic-ledger article em > span { background: var(--cx-ink); }
.folio-v5 .ats-diagnostic-ledger article strong {
  font: 300 30px/1 var(--cx-font-display); color: var(--cx-ink); letter-spacing: -.02em;
}
.folio-v5 .ats-diagnostic-ledger article strong small { font: 400 11px/1 var(--cx-font-ui); color: var(--cx-cons-quiet); }
.folio-v5 .ats-diagnostic-ledger article mark {
  background: var(--cx-cons-paper); color: var(--cx-cons-char); border: 0; border-radius: 999px;
  padding: 8px 14px; font: 600 10px/1 var(--cx-font-ui); letter-spacing: .07em; text-transform: uppercase;
}
.folio-v5 .ats-report-summary {
  background: var(--cx-cons-bone); border: 0; border-radius: 14px; padding: 24px 34px; margin-top: 14px;
}
.folio-v5 .ats-report-summary span { color: var(--cx-cons-char); font: 400 12.5px/1.4 var(--cx-font-ui); }
.folio-v5 .ats-report-summary strong { font: 300 26px/1 var(--cx-font-display); color: var(--cx-ink); }
/* the other three report sections keep their forms inside ladder panels */
.folio-v5 .ats-focused-workspace,
.folio-v5 .ats-evidence-workspace,
.folio-v5 .ats-history-workspace {
  background: var(--cx-cons-parchment); border: 0; border-radius: 14px; padding: 40px;
}
.folio-v5 .ats-focused-workspace h2,
.folio-v5 .ats-evidence-workspace h2,
.folio-v5 .ats-history-workspace h2 {
  margin: 14px 0 0; font: 300 clamp(28px, 3vw, 38px)/1.12 var(--cx-font-display); color: var(--cx-ink);
}
.folio-v5 .ats-fix-index button,
.folio-v5 .ats-history-list button,
.folio-v5 .ats-evidence-list article,
.folio-v5 .ats-fix-focus,
.folio-v5 .ats-empty-section {
  background: var(--cx-cons-paper); border: 0; border-radius: 14px; padding: 22px 24px;
}
.folio-v5 .ats-fix-index button { position: relative; }
.folio-v5 .ats-fix-index button::before {
  content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px;
  border-radius: 3px; background: transparent;
}
.folio-v5 .ats-fix-index button.on { background: var(--cx-cons-bone); }
.folio-v5 .ats-fix-index button.on::before { background: var(--cx-cons-vermilion); }
.folio-v5 .ats-fix-focus h3,
.folio-v5 .ats-empty-section h3 { font: 400 24px/1.15 var(--cx-font-display); color: var(--cx-ink); }
.folio-v5 .ats-history-list button.on { background: var(--cx-cons-bone); }
/* the report system's own frame is dropped: the panels carry the edges now. */
.folio-v5 .ats-report-system,
.folio-v5 .ats-report-sheet,
.folio-v5 .ats-report-head-system { border: 0 !important; outline: 0 !important; }

/* ============================================================================
   §5.6 · THE WORKSPACE (/workspace)
   ----------------------------------------------------------------------------
   Same treatment: the rail is the shared parchment nav (§5.4 above), the
   content composes into laddered panels, and any live document preview sits
   on the field.
   ========================================================================== */
.folio-v5 .workspace-page,
.folio-v5 .manage-page,
.folio-v5 .workspace-v5 { background: var(--cx-cons-paper); }
.folio-v5 .workspace-hero,
.folio-v5 .manage-hero,
.folio-v5 .workspace-head {
  background: var(--cx-cons-parchment); border: 0; border-radius: 14px; padding: 44px 40px 38px;
}
.folio-v5 .workspace-hero h1,
.folio-v5 .manage-hero h1,
.folio-v5 .workspace-head h1 {
  font: 300 clamp(32px, 3.4vw, 46px)/1.1 var(--cx-font-display); letter-spacing: -.02em; color: var(--cx-ink);
}
.folio-v5 .asset-card,
.folio-v5 .tool-card,
.folio-v5 .workspace-card,
.folio-v5 .asset-empty-card,
.folio-v5 .workspace-panel,
.folio-v5 .manage-panel {
  background: var(--cx-cons-parchment); border: 0; border-radius: 14px; padding: 28px;
  transition: background .25s ease;
}
.folio-v5 .asset-card:hover,
.folio-v5 .tool-card:hover,
.folio-v5 .workspace-card:hover { background: var(--cx-cons-bone); transform: none; }
.folio-v5 .asset-card h2,
.folio-v5 .asset-card h3,
.folio-v5 .workspace-card h2,
.folio-v5 .workspace-card h3 { font-family: var(--cx-font-display); font-weight: 400; color: var(--cx-ink); }
.folio-v5 .asset-tile,
.folio-v5 .asset-card .document-frame { background: var(--cx-cons-field); border: 0; border-radius: 14px; overflow: hidden; }
.folio-v5 .asset-tile iframe { border-radius: 8px; background: var(--cx-cons-paper); }
.folio-v5 .asset-status-chip,
.folio-v5 .workspace-chip {
  border-radius: 999px; border: 0; background: var(--cx-cons-paper); color: var(--cx-cons-char);
  padding: 8px 14px; font: 600 10px/1 var(--cx-font-ui); letter-spacing: .07em; text-transform: uppercase;
}
/* the empty workspace: one parchment panel that owns the whole region, so the
   state that has nothing in it still composes. It carried an accent rule along
   its bottom edge — the canon spends vermilion on marks, not on chrome edges. */
.folio-v5 .v5-locked {
  background: var(--cx-cons-parchment) !important;
  border: 0 !important; border-radius: 14px;
  margin: 14px; padding: clamp(60px, 8vw, 110px) clamp(28px, 5vw, 72px);
  min-height: calc(100vh - var(--topbar-h, 72px) - 28px);
  display: flex; flex-direction: column; align-items: flex-start; gap: 26px;
}
.folio-v5 .v5-locked .eyebrow { margin-bottom: 2px; }
.folio-v5 .v5-lockedline {
  max-width: 20ch; margin: 0;
  font: 300 clamp(38px, 4.4vw, 60px)/1.08 var(--cx-font-display);
  letter-spacing: -.02em; color: var(--cx-ink);
}
.folio-v5 .v5-locked .button-primary {
  background: var(--cx-ink); color: var(--cx-cons-paper); border: 0; border-radius: 14px;
  min-height: 44px; padding: 18px 26px; font: 400 15px/1 var(--cx-font-ui);
}
.folio-v5 .v5-lockedback {
  margin: auto 0 0; padding-top: 26px; border-top: 1px solid var(--cx-cons-hair);
  width: 100%; color: var(--cx-cons-char); font: 400 13.5px/1.5 var(--cx-font-ui);
}
.folio-v5 .v5-lockedback .cx-strip-link {
  color: var(--cx-ink); font: 600 13px/1 var(--cx-font-ui);
  border: 0; border-bottom: 1.5px solid var(--cx-cons-vermilion); padding: 0 0 4px; background: transparent;
}
/* the category line gets room to say the whole thing */
.folio-v5 .resume-design-card-copy > span:first-child { min-width: 0; }
.folio-v5 .resume-design-card-copy small { white-space: normal; }

/* ============================================================================
   §6 · THE WORKSPACE — the clothesline (/workspace)
   ----------------------------------------------------------------------------
   The brand's clothesline law: performed work HANGS UP and stays visible. So
   the workspace is a line with artefacts pegged to it — and when nothing has
   been made yet, it is honestly an EMPTY line with a handwritten aside, not an
   empty state pretending to be a dashboard.

   CSS ONLY. Every data-* hook, dialog and journey app.js drives is untouched.
   ========================================================================== */

/* -- the empty line (renderWorkspaceLocked → .v5-locked) -- */
.folio-v5 .v5-locked {
  position: relative;
  background: var(--cx-cons-parchment) !important;
  border: 0 !important; border-radius: 0;
  margin: 14px; padding: clamp(96px, 11vw, 150px) clamp(28px, 5vw, 72px) clamp(56px, 7vw, 96px);
  min-height: calc(100vh - var(--topbar-h, 72px) - 28px);
  display: flex; flex-direction: column; align-items: flex-start; gap: 26px;
  overflow: hidden;
}
/* the line itself: a sagging rope pinned red at both ends */
.folio-v5 .v5-locked::before {
  content: "";
  position: absolute; left: clamp(28px, 5vw, 72px); right: clamp(28px, 5vw, 72px); top: clamp(46px, 6vw, 74px);
  height: 30px;
  background:
    radial-gradient(circle at 0 6px, var(--cx-cons-vermilion) 0 3.5px, transparent 4px) left top no-repeat,
    radial-gradient(circle at 100% 6px, var(--cx-cons-vermilion) 0 3.5px, transparent 4px) right top no-repeat;
  border-bottom: 0;
  -webkit-mask-image: none;
}
/* the sag is drawn as a wide, very flat ellipse hairline — one element, no svg */
.folio-v5 .v5-locked::after {
  content: "";
  position: absolute; left: clamp(28px, 5vw, 72px); right: clamp(28px, 5vw, 72px); top: clamp(40px, 5.4vw, 66px);
  height: 44px; border-radius: 50%;
  border: 0; border-bottom: 2px solid var(--cx-cons-hair);
  pointer-events: none;
}
.folio-v5 .v5-locked > * { position: relative; z-index: 1; }
.folio-v5 .v5-lockedline {
  max-width: 20ch; margin: 0;
  font: 400 clamp(36px, 4.2vw, 58px)/1.06 var(--cx-font-display);
  letter-spacing: -.02em; color: var(--cx-ink);
}
/* the handwritten aside — an honest one, never a claim that needs proof */
.folio-v5 .v5-locked .eyebrow { margin-bottom: 2px; }
.folio-v5 .v5-locked .eyebrow::after {
  content: "nothing hanging yet — fold something";
  margin-left: 14px;
  font: 600 18px/1 var(--cx-font-hand);
  letter-spacing: 0; text-transform: none;
  color: var(--cx-cons-vermilion-deep);
  transform: rotate(-2deg); display: inline-block;
}
.folio-v5 .v5-locked .button-primary {
  background: var(--cx-ink); color: var(--cx-cons-paper); border: 0; border-radius: 999px;
  min-height: 44px; padding: 17px 28px; font: 600 14.5px/1 var(--cx-font-ui);
  transition: background .25s var(--cx-ease), transform .25s var(--cx-ease);
}
.folio-v5 .v5-locked .button-primary:hover { background: var(--cx-cons-vermilion); transform: rotate(-1deg); }

/* -- artefacts, once there are some: each card hangs from a clip and tilts -- */
.folio-v5 .cxm-cards { padding-top: 22px; }
.folio-v5 .cxm-card {
  position: relative;
  background: var(--cx-cons-paper);
  border: 1px solid var(--cx-cons-hair);
  border-radius: 6px;
  box-shadow: var(--cx-shadow-raise) !important;
  transform: rotate(var(--tk, -.6deg));
  transition: transform .4s cubic-bezier(.34, 1.3, .64, 1), box-shadow .4s var(--cx-ease);
}
.folio-v5 .cxm-card:nth-child(even) { --tk: .6deg; }
.folio-v5 .cxm-card:hover { transform: rotate(0deg) translateY(-6px); box-shadow: var(--cx-shadow-lift) !important; }
.folio-v5 .cxm-card::before {
  content: ""; position: absolute; z-index: 2; top: -11px; left: 34px;
  width: 16px; height: 24px; border-radius: 3px;
  background: linear-gradient(var(--cx-cons-tan), var(--cx-cons-field-soft));
}
.folio-v5 .cxm-card:nth-child(even)::before { left: auto; right: 34px; }
@media (prefers-reduced-motion: reduce) {
  .folio-v5 .cxm-card { transform: none; transition: none; }
}

/* the compact (mobile) product menu carries the verbs too — same beat pill. */
.folio-v5 .cxpre-menu-doors a b em {
  font: 700 10px/1 var(--cx-font-mono); font-style: normal;
  color: var(--cx-cons-vermilion); margin-right: 8px; letter-spacing: .02em;
}