/* GENERATED by node build.mjs from src/site/css/ (00-base.css, 05-components.css, 06-flow.css, 07-cta.css, 10-home.css, 12-price-worth.css, 20-assessment.css, 21-take.css, 22-agree.css, 23-finish.css, 30-results.css, 32-domains.css, 33-report-nav.css, 34-checkout.css, 34-report-pages.css, 34-results-cards.css, 35-retake.css, 36-facets-across.css, 36-facets.css, 36-selfesteem.css, 36-sixfactor-across.css, 36-sixfactor.css, 36-workstyle.css, 37-report-pacing.css, 38-report-marks.css, 39-card-tactile.css, 39-estimated.css, 39-report-editorial.css, 39-report-intro.css, 39-report-preview.css, 39-report-showcase.css, 39-score-anchors.css, 39-score-panel.css, 40-chapters.css, 41-career.css, 42-facets-magazine.css, 45-pillars.css, 46-account.css, 47-account-gate.css, 50-types.css, 51-fourletter.css, 52-traits.css, 53-compat.css, 55-people.css, 60-info.css, 60-insights.css, 61-compare.css, 62-mismatches.css, 63-focus.css, 64-science.css, 65-types.css, 66-libraries.css, 70-story.css, 99-review.css). Do not edit this file; edit the partial you own. */

/* ===== 00-base.css ===== */
/* ==========================================================================
   00-base.css · owner: Foundation
   Tokens, self-hosted fonts, reset, type scale, page widths, header, footer.
   Page agents: read this, never edit it. Put page styles in your own partial.
   Every partial in src/site/css/ is concatenated in filename order into
   assets/site.css by `node build.mjs`. Never edit assets/site.css by hand.
   ========================================================================== */

/* ---------------------------------------------------------------- fonts
   EDITORIAL (Sep 21, 2026, docs/mockups/site/): Source Serif 4 for display (light) and reading, Figtree for every label, number and
   line of interface. DM Sans stays declared from the glass design (docs/design/nomigram/). Every face is self-hosted (docs/LICENSES.md: SIL OFL); never Google Fonts or a CDN.
   Downloaded Sep 21 with Wayne's OK ("yeah go ahead"): DM Sans and Source Serif 4 roman, each the variable weight axis, latin,
   from the Fontsource packages of the Google Fonts releases, unmodified. Archivo Black was retired on Sep 22, 2026: the hexagon
   rebuild removed its last consumer, so the face, its licence file and its credit went together. */
@font-face{
  font-family:"DM Sans";
  src:url("/assets/fonts/dm-sans-latin-variable.woff2") format("woff2");
  font-weight:100 1000;font-style:normal;font-display:swap;
}
/* Source Serif 4 roman, for display and reading. Declared under its own family name so the italic below stays the quotation face
   and a heading can never silently pick up the italic file. The font itself is unmodified, as its license requires. */
@font-face{
  font-family:"Source Serif 4 Display";
  src:url("/assets/fonts/source-serif-4-latin-variable.woff2") format("woff2");
  font-weight:200 900;font-style:normal;font-display:swap;
}
/* quotations only (D71): Source Serif 4 italic, the variable file as Google Fonts serves it, unmodified (its license reserves the name) */
@font-face{
  font-family:"Source Serif 4";
  src:url("/assets/fonts/source-serif-4-latin-italic-variable.woff2") format("woff2");
  font-weight:400 600;font-style:italic;font-display:swap;
}
@font-face{
  font-family:"Figtree";
  src:url("/assets/fonts/figtree-latin-variable.woff2") format("woff2");
  font-weight:300 900;font-style:normal;font-display:swap;
}

/* ---------------------------------------------------------------- tokens
   Every name below is kept from the old system so the page stylesheets keep working; the values are Nomigram's. Old names map to
   the design's colours by what they MEANT: --cobalt is the blue, --sage is the teal (settled, "what matters to you here"), --plum
   is the violet ("how others may read it"), --amber is the amber (a cost, caution, the one thing to try). */
/* EDITORIAL (Wayne, Sep 21: "i want this kind of style for our report. and editorial type of appearance for our landing page",
   pointing at docs/mockups/site/). White paper, thin serif display, Figtree for interface, hairline rules; blue is you, amber is
   worth your attention, grey is everyone else. Glass is chrome only (the bar, floating cards); the soft colour field sits behind
   the top of the page, never behind a chart. Token names are kept from the old systems so page stylesheets keep working. */
:root{
  --ground:#ffffff;         /* the paper */
  --surface:#ffffff;
  --glass:rgba(255,255,255,.66);        /* chrome only: the bar, a floating card over the field */
  --glass-strong:rgba(255,255,255,.78);
  --glass-edge:rgba(13,20,32,.08);      /* a card's edge on white */
  --ink:#0D1420;
  --line:#E3E7EE;           /* every hairline */
  --faint:#858DA0;          /* apparatus and captions: 3.4:1, never body text */
  --cobalt:#0A5FA8;         /* blue text, links and buttons (6.6:1 on white) */
  --blue-deep:#0A5FA8;
  --blue-ink:#083F70;       /* blue text on a blue wash */
  --blue-mark:#2288E0;      /* blue marks: a dot, a bar, a rule; never small text */
  --blue-light:#5CB0F5;
  --blue-wash:#E6F2FE;
  --sage:#2a9d8f;           /* teal: kept for the few categorical uses */
  --amber:#F5A623;          /* amber marks: a cost, a gap, something half finished */
  --amber-mark:#E08600;
  --amber-light:#FAD9A8;
  --plum:#7a5cc7;
  --violet:#7a5cc7;
  --teal:#2a9d8f;
  /* The buy button (Oct 6, 2026). Wayne: "the full report should be like a green color? or some other color that makes people feel more
     at ease? the light gold color ... confuses people between that and a non actionable guarantee badge". A calm green, solid, with white
     words (about 5:1), for the buttons that sell a report and nothing else; amber stays for marks and the guarantee seal. */
  --buy:#17804D;
  --buy-ink:#11653C;
  --buy-wash:#E8F5EE;

  /* tints */
  --ground-deep:#EFF2F7;    /* quiet fills, the track under a mark */
  --cobalt-pale:#B9DCFA;
  --sage-pale:#d6eeeb;
  --sage-wash:#e8f5f3;
  --amber-wash:#FDF2E3;
  --amber-pale:#FAD9A8;
  --sage-deep:#1f7a6f;
  --sage-text:#1f7a6f;
  --amber-text:#9A5B06;     /* amber text (5.5:1 on white) */
  --violet-text:#5b3fa8;
  --on-ink:#ffffff;
  --surface-dim:#F7F9FC;
  --red:#b3261e;
  --rule-soft:#EFF2F7;
  --grey:#C0C7D2;           /* everyone else: the reference marks */
  --ref-deep:#97A0AE;
  --muted:#515A6B;          /* secondary text: 6.9:1 on white */

  --quiet-bg:#F7F9FC;
  --quiet-rule:var(--line);

  /* RIASEC family colours and the four-letter groups (D64). Kept for the type library; results read in blue and grey. */
  --fam-R:var(--amber);       --on-fam-R:var(--ink);
  --fam-I:var(--sage-pale);   --on-fam-I:var(--ink);
  --fam-A:var(--cobalt-pale); --on-fam-A:var(--ink);
  --fam-S:var(--sage);        --on-fam-S:var(--on-ink);
  --fam-E:var(--blue-mark);   --on-fam-E:var(--on-ink);
  --fam-C:var(--ink);         --on-fam-C:var(--on-ink);
  --group-is:var(--sage);     --group-is-text:var(--sage-text);
  --group-in:var(--blue-mark);--group-in-text:var(--cobalt);
  --group-es:var(--amber);    --group-es-text:var(--amber-text);
  --group-en:var(--plum);     --group-en-text:var(--plum);

  /* faces: the serif for display and reading (light at display sizes), Figtree for every label, number and control */
  --display:"Source Serif 4 Display","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --serif:var(--display);
  --body:"Figtree","DM Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --heading:"Figtree","DM Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --quote:"Source Serif 4","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;

  /* corners: floating cards 14, tiles and inputs 12, buttons 10, letter tiles 5 */
  --r:14px;
  --r-sm:10px;
  --r-lg:16px;
  --r-btn:10px;
  --r-pill:999px;
  --grain:none;

  /* lines and shadows: hairlines, and one soft shadow for anything that floats */
  --bw:1px;
  --bw-thin:1px;
  --sh:0 1px 2px rgba(13,20,32,.04),0 14px 40px rgba(13,20,32,.09);
  --sh-btn:0 1px 2px rgba(8,63,112,.2),0 8px 20px rgba(8,63,112,.18);
  --sh-sm:0 1px 2px rgba(13,20,32,.04),0 8px 24px rgba(13,20,32,.06);
  --sh-xs:0 1px 2px rgba(13,20,32,.06);
  --sh-lift:0 1px 2px rgba(13,20,32,.05),0 18px 44px rgba(13,20,32,.12);
  --sh-attn:0 0 0 3px rgba(34,136,224,.22);
  --ring-attn:0 0 0 4px rgba(34,136,224,.22);
  --grad-blue:linear-gradient(#0A5FA8,#0A5FA8);   /* kept as a token so old rules paint the flat editorial blue */

  /* type scale (desktop; overridden below) */
  --fs-hero:88px;
  --fs-h1:60px;
  --fs-h2:30px;
  --fs-h3:21px;
  --fs-h4:15px;
  --fs-motto:26px;
  --fs-lede:20px;
  --fs-body:16.5px;
  --fs-small:14.5px;
  --fs-note:13.5px;
  --fs-label:12px;
  --fs-fine:12.5px;

  /* layout */
  --pad:44px;
  --max:1180px;             /* the mockups: 1092px of content inside 44px gutters */
  --gap:24px;
  --sec:56px;
  /* the bar: 76px since D133 (Wayne, Sep 26, 2026: "just change and adjust the height too"), so the 38px wordmark has room around
     it; 64px on a phone. The same on every page, the home page included (D139). Everything that sticks under the bar or scrolls
     to a heading reads this, so change it here and nowhere else. */
  --header-h:76px;
}
@media (max-width:1100px){
  :root{ --pad:28px; --fs-hero:70px; --fs-h1:50px; --gap:18px; }
}
@media (max-width:720px){
  :root{
    --pad:20px; --gap:18px; --sec:36px; --header-h:64px;
    --fs-hero:52px; --fs-h1:38px; --fs-h2:22px; --fs-h3:17px; --fs-motto:20px;
    --fs-lede:17px; --fs-body:16.5px; --fs-small:15px; --fs-fine:13px;
  }
}
@media (max-width:400px){
  :root{ --pad:18px; --fs-hero:44px; --fs-h1:34px; --fs-h2:21px; }
}

/* ---------------------------------------------------------------- reset */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
/* Where every jump lands (Sep 27, 2026): a link to a heading, a report's contents, the test's Next step. The bar sticks to the top
   of the screen, so a target lands 16px under it: --header-h, plus --stuck-h where a second bar sticks under the first (the
   sample's ribbon, set by app/report-sample.js; the method page's contents rail, 64-science.css and app/toc-follow.js). This is the
   one rule for the bar. An element's own scroll-margin-top adds only what sits above it that belongs to it (a report heading's
   kicker, the results page's report nav), never the bar. Until this date it was 16px, from before the bar stuck, and headings
   landed under it. test/landing.test.mjs holds it. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + var(--stuck-h,0px) + 16px)}
body{
  font-family:var(--body);font-size:var(--fs-body);line-height:1.55;font-weight:400;
  color:var(--ink);background-color:var(--ground);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  min-height:100vh;display:flex;flex-direction:column;
  overflow-x:clip;
}
/* The soft field (mockups/site .field): low-opacity blooms behind the top of every page, where the bar and the hero sit. It
   scrolls away with the page, so charts and reading below sit on plain white. */
body{position:relative}
body::before{content:"";position:absolute;left:0;right:0;top:0;height:760px;z-index:-1;pointer-events:none;background:
  radial-gradient(760px 420px at 12% -10%,rgba(92,176,245,.26),transparent 62%),
  radial-gradient(620px 380px at 88% 8%,rgba(245,166,35,.14),transparent 64%),
  radial-gradient(900px 520px at 62% 104%,rgba(185,220,250,.22),transparent 66%);
  -webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
main{flex:1;display:block}
main:focus{outline:none}
img,svg,video{display:block;max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px}
ul[role=list],ol[role=list]{list-style:none}
table{border-collapse:collapse}
p,li,dd,h1,h2,h3,h4{overflow-wrap:break-word}
[hidden]{display:none!important}
sup{font-size:.62em;font-weight:700;color:var(--cobalt);line-height:0;margin-left:1px}
sup a{text-decoration:none}
strong,b{font-weight:700}
::selection{background:rgba(34,136,224,.2);color:var(--ink)}

/* ---------------------------------------------------------------- focus
   Visible everywhere, never removed. A blue ring, offset so it clears the white rim on glass. */
:focus-visible{outline:2px solid var(--blue-mark);outline-offset:3px}
.on-dark :focus-visible,.box-ink :focus-visible,.box-cobalt :focus-visible{outline-color:#fff}

/* ---------------------------------------------------------------- motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ---------------------------------------------------------------- type scale */
/* Display is the serif at 300 (the mockups' .h-d), section and card headings the serif at 400 (.h-s). h4 and below are interface. */
h1,.display{font-family:var(--display);font-weight:300;line-height:1.03;letter-spacing:-.022em}
h2,h3{font-family:var(--display);font-weight:400;line-height:1.12;letter-spacing:-.015em}
h4{font-family:var(--heading);font-weight:600;line-height:1.2;letter-spacing:-.005em}
h1,.h1{font-size:var(--fs-h1);line-height:1}
h2,.h2{font-size:var(--fs-h2);letter-spacing:-.01em;line-height:1.05}
h3,.h3{font-size:var(--fs-h3);letter-spacing:-.005em;line-height:1.1}
h4,.h4{font-size:var(--fs-h4);letter-spacing:0;line-height:1.15}
.hero-name{font-family:var(--display);font-weight:300;font-size:var(--fs-hero);line-height:.98;letter-spacing:-.03em}
h1 .accent,h2 .accent,.hero-name .accent,.accent{color:var(--cobalt)}
.accent-block{display:block;color:var(--cobalt)}      /* second line of a two-line headline */
.motto{font-family:var(--display);font-weight:300;font-size:var(--fs-motto);line-height:1.15;letter-spacing:-.015em}
.lede{font-family:var(--display);font-size:var(--fs-lede);line-height:1.5;font-weight:300;max-width:46ch;color:var(--muted)}
.body,.prose p{font-size:var(--fs-body);line-height:1.62;font-weight:400;max-width:68ch}
.body+.body,.prose p+p{margin-top:12px}
.small{font-size:var(--fs-small);line-height:1.45}
.note{font-size:var(--fs-note);font-weight:600;line-height:1.45;max-width:95ch}
.muted{color:var(--muted)}
.label{font-weight:700;font-size:var(--fs-label);letter-spacing:.01em;line-height:1.3}
.num{font-family:var(--heading);font-weight:800;letter-spacing:0;font-variant-numeric:tabular-nums}
.sr-only,.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------------------------------------------------------------- page widths */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.wrap-narrow{max-width:calc(820px + 2 * var(--pad))}
.section{padding-top:var(--sec)}
.section-lg{padding-top:calc(var(--sec) + 16px)}
.page-top{padding-top:36px}
.page-end{padding-bottom:72px}
@media (max-width:720px){ .page-top{padding-top:24px} .page-end{padding-bottom:48px} }

/* ---------------------------------------------------------------- skip link */
.skip{position:absolute;left:12px;top:-100px;z-index:100;background:var(--ink);color:#fff;font-weight:600;padding:10px 14px;border-radius:10px;text-decoration:none}
.skip:focus{top:12px}

/* ---------------------------------------------------------------- header
   The glass bar (mockups/site .glass-bar): the wordmark in Figtree capitals with a blue full stop, plain grey links, and one
   blue text link on the right. */
.site-header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%);border-bottom:1px solid rgba(13,20,32,.07)}
.site-header .site-bar{display:flex;align-items:center;gap:6px;height:var(--header-h);max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.brand{display:flex;align-items:center;gap:0;padding:0 28px 0 0;font-family:var(--heading);font-weight:800;font-size:14px;line-height:1;
  letter-spacing:.13em;text-transform:uppercase;text-decoration:none;color:var(--ink);white-space:nowrap}
.brand:hover{color:var(--ink)}
.brand-dot{color:var(--blue-mark)}
/* the logo (Wayne, Sep 21: concept 1, "Signature", docs/mockups/logo/): a serif wordmark with a looped g. Since D159 (Oct 2, 2026) the i is a solid ink keyhole and the blue full stop is gone; at 34px (29px on a phone, 25px in the footer) every letter is the size it was at 38px.
   38px tall since D133 (option B in the wordmark options of Sep 25, 2026): at 26px beside 13.5px bold menu words it read as one
   more item in the menu ("it kinda looks and feels like a menu header word"). A hairline now stands between the name and the
   menu, so the two read as the name and the sections of the site. */
.brand-logo{display:block;height:34px;width:auto}
.site-footer .brand-logo{height:25px}
.brand-mark{display:none}
.nav-main,.nav-links,.nav-links li{display:flex;align-items:center}
.site-header .nav-main{padding-left:24px;border-left:1px solid var(--line)}
.nav-links{list-style:none;gap:4px}
.nav-links a{display:flex;align-items:center;padding:8px 11px;font-weight:600;font-size:13.5px;color:var(--muted);text-decoration:none;white-space:nowrap}
.nav-links a:hover{color:var(--blue-deep)}
.nav-links a[aria-current]{color:var(--ink)}
.nav-spacer{flex:1}
/* The filled button is the way in, and signing in is a plain link beside it (Oct 7, 2026). With "Log in or sign up" the brightest
   thing in the bar, first-time visitors on the customer test read it as "I need an account before I can start". */
.nav-cta{display:flex;align-items:center;gap:8px;padding:9px 16px;margin-left:auto;border-radius:var(--r-btn);background:var(--blue-deep);color:#fff;
  box-shadow:var(--sh-btn);font-weight:700;font-size:13.5px;text-decoration:none;white-space:nowrap}
.nav-cta:hover{background:var(--blue-ink);color:#fff}
.nav-cta[aria-current]{background:var(--blue-ink)}
/* Truity's menu: two dropdowns and a log-in button. Each dropdown is a <details>, so it works with no script; app/nav.js adds hover
   on a mouse, Escape, an outside click, and one-open-at-a-time. */
.nav-item{position:relative}
.nav-drop>summary{list-style:none;display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:8px;font-weight:600;font-size:13.5px;
  color:var(--muted);cursor:pointer;white-space:nowrap;user-select:none}
.nav-drop>summary::-webkit-details-marker{display:none}
.nav-drop>summary:hover,.nav-drop[open]>summary,.nav-drop>summary[data-current]{color:var(--ink)}
.nav-caret{width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s ease}
.nav-drop[open] .nav-caret{transform:translateY(1px) rotate(-135deg)}
/* The panel hangs from its menu word. In the taller bar (D133) the word sits 8px further from the bar's bottom edge, so the panel
   drops by the same 8px and meets the edge where it always has, whatever --header-h is. */
.nav-drop-panel{position:absolute;left:0;top:calc(100% + 8px + (var(--header-h) - 60px) / 2);z-index:50;min-width:260px;padding:8px;background:rgba(255,255,255,.97);
  -webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%);border:1px solid var(--glass-edge);border-radius:var(--r);box-shadow:var(--sh)}
.nav-drop-panel ul{list-style:none}
.nav-drop-panel a{display:block;padding:9px 12px;border-radius:8px;font-weight:600;font-size:14px;line-height:1.3;color:var(--ink);text-decoration:none}
.nav-drop-panel a:hover{background:var(--blue-wash);color:var(--blue-ink)}
.nav-drop-panel a[aria-current]{color:var(--blue-deep)}
/* The free-report tag beside an assessment's name in the menu (D99, app/ui.js freeReportTag): the same mark the catalog card and the
   home grid carry, so the menu answers the same question they do. */
.nav-drop-panel a{display:flex;align-items:center;gap:8px}
.nav-drop-tag{margin-left:auto}
.nav-drop-tag .tag{font-size:9.5px;padding:2px 6px;letter-spacing:.04em}
.nav-drop-all{margin-top:6px;padding-top:6px;border-top:1px solid var(--line)}
.nav-drop-all a{color:var(--blue-deep);font-weight:700}
/* D99: the assessments menu groups its items by the question a reader arrives with, so each group gets a small heading. */
.nav-drop-head{padding:12px 12px 4px;font-weight:800;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.nav-drop-panel ul>.nav-drop-head:first-child{padding-top:4px}
/* D102: the library menu is a shelf of assessments, one row each. The one assessment that gives two readings prints its name as the
   heading above them and its two rows step in under it; the science and the articles are not assessments, so a hairline sets them off. */
.nav-drop-sub{position:relative}
.nav-drop-sub::before{content:"";position:absolute;left:15px;top:0;bottom:0;width:1px;background:var(--line)}
.nav-drop-sub a{padding-left:28px}
.nav-drop-rule{margin-top:6px;padding-top:6px;border-top:1px solid var(--line)}
.nav-login{display:flex;align-items:center;margin-left:18px;padding:9px 2px;background:none;color:var(--blue-deep);
  font-weight:700;font-size:13px;text-decoration:none;white-space:nowrap}
.nav-login:hover{color:var(--blue-ink);text-decoration:underline}
/* Sign out, beside "Your account" once signed in (Oct 6, 2026). Hidden until app/nav.js finds the browser signed in. */
.nav-signout{display:flex;align-items:center;margin-left:14px;padding:8px 0;color:var(--blue-deep);font-weight:700;font-size:13px;
  text-decoration:none;white-space:nowrap}
.nav-signout:hover{color:var(--blue-ink);text-decoration:underline}
.nav-signout[hidden],.menu-panel li[hidden]{display:none}

/* phone menu: a <details> so it opens and closes without JavaScript; app/nav.js adds Escape and outside-click */
.menu{display:none}
.menu>summary{list-style:none}
.menu>summary::-webkit-details-marker{display:none}
.menu-toggle{display:flex;align-items:center;gap:10px;padding:9px 4px 9px 14px;font-weight:700;font-size:13.5px;cursor:pointer;user-select:none}
.menu-icon{position:relative;width:20px;height:12px;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.menu-icon::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:var(--ink)}
.menu[open] .menu-toggle{color:var(--blue-deep)}
.menu[open] .menu-icon{border-color:transparent}
.menu[open] .menu-icon::after{transform:rotate(45deg)}
.menu[open] .menu-icon::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:var(--ink);transform:rotate(-45deg)}
.menu-panel{position:absolute;left:12px;right:12px;top:calc(100% + 8px);background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%);border:1px solid var(--glass-edge);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden}
/* The panel hangs off a sticky header, so whatever fell past the bottom of the phone screen could not be reached at all: the page
   scrolled under the header and the panel came with it. With nine assessments and libraries in it that was the log-in link, the
   articles and the last readings. It scrolls on its own now, and stops at the screen. */
.menu-panel{max-height:calc(100vh - 96px);max-height:calc(100dvh - 96px);overflow:hidden auto;overscroll-behavior:contain}
/* ...measured from the bar's own height since D133 made it taller, with 24px to spare under the panel; and in review mode the pink
   banner above the bar takes up to two more lines, so the panel leaves room for it too. */
.menu-panel{max-height:calc(100dvh - var(--header-h) - 32px)}
body:has(>.review-banner) .menu-panel{max-height:calc(100dvh - var(--header-h) - 96px)}
/* Both menus are paper, not glass (Sep 25, 2026 review). They sit inside the header, and the header's own backdrop-filter makes it
   the backdrop root for everything in it, so a panel's blur never reaches the page underneath: what showed through was the page
   itself, unblurred, at 3 to 6 percent. Over the dark heroes that read as ghost headlines behind the menu items. */
.nav-drop-panel,.menu-panel{background:var(--surface)}
.menu-panel ul{list-style:none}
.menu-panel a{display:flex;justify-content:space-between;align-items:center;padding:15px 20px;border-top:1px solid var(--line);
  font-family:var(--display);font-size:20px;font-weight:400;letter-spacing:-.01em;text-decoration:none;color:var(--ink)}
.menu-panel li:first-child a{border-top:0}
.menu-group-label{display:block;padding:14px 20px 2px;border-top:1px solid var(--line);font-weight:800;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.menu-panel>ul>.menu-group:first-child .menu-group-label{border-top:0}
.menu-panel .menu-group a{border-top:0;padding:9px 20px;font-size:18px}
/* the same three assessment groups inside the phone menu, one step in from the menu's own group labels */
.menu-sub-label{display:block;padding:12px 20px 2px;font-weight:800;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
/* D102, the same shelf on a phone: a reading that shares its assessment with another steps in under that assessment's name, and the
   science and the articles sit under a hairline because neither is an assessment. */
.menu-panel .menu-group li.menu-sub{position:relative}
.menu-panel .menu-group li.menu-sub::before{content:"";position:absolute;left:24px;top:0;bottom:0;width:1px;background:var(--line)}
.menu-panel .menu-group li.menu-sub a{padding-left:38px}
.menu-panel .menu-group li.menu-rule{margin-top:6px;border-top:1px solid var(--line)}
.menu-panel a::after{content:"\2192";font-family:var(--body);font-weight:600;color:var(--blue-deep)}
.menu-panel a[aria-current]{background:var(--blue-wash)}
.menu-panel .menu-cta{background:var(--blue-deep);color:#fff}
.menu-panel .menu-cta::after{color:#fff}
.menu-panel .menu-note{padding:12px 20px 14px;border-top:1px solid var(--line);font-size:13.5px;font-weight:500}

@media (max-width:1100px){ .nav-links a{padding:8px 9px} }
@media (max-width:860px){
  .site-header .site-bar>.nav-main,.site-header .site-bar>.nav-cta,.site-header .site-bar>.nav-login,.site-header .site-bar>.nav-signout{display:none}
  .menu{display:block;margin-left:auto}
  .brand{padding:0}
}
@media (min-width:861px){ .menu{display:none!important} }
/* on a phone the name is 32px in the 64px bar, the proportions the D133 drawing gave it, still clearly larger than "Menu" */
@media (max-width:720px){ .site-header .brand-logo{height:29px} }

/* ---------------------------------------------------------------- footer
   Truity's footer on the grey ground: the wordmark and one line, three link columns, then the credits. */
.site-footer{margin-top:0;background:#F4F6F9;color:var(--muted);border-top:1px solid var(--line)}
main+.site-footer{margin-top:96px}
.footer-cols{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:32px 40px;padding-block:56px 36px}
.site-footer .footer-brand{font-size:14px;letter-spacing:.13em;color:var(--ink);padding:0}
.footer-blurb{margin-top:14px;max-width:34ch;font-size:14px;line-height:1.55;color:var(--muted)}
/* The company's email and mailing address under the blurb (Sep 28, 2026), each under a quiet label in the sub-label style of the
   columns. An <address>, so the browser's italics come off. The email's tap area grows to the columns' 32px with padding that its
   negative margin cancels, so the gap under each label reads the same for the link and the address. On a phone the two sit side
   by side, on the same two columns and 40px gap as the link columns under them; align-content:start keeps the shorter half from
   spreading its rows to the taller one's height, which pushed the email 10px below the address's first line. */
.footer-contact{display:grid;gap:16px;margin-top:22px;font-style:normal;font-size:13.5px;line-height:1.5;color:var(--muted)}
.footer-contact p{display:grid;justify-items:start;align-content:start;gap:4px}
.footer-contact-h{font-weight:800;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.footer-contact a{display:inline-block;padding-block:6px;margin-block:-6px;font-weight:600;text-decoration:none;color:var(--muted);overflow-wrap:anywhere}
.footer-contact a:hover{color:var(--blue-deep)}
.footer-social{display:flex;align-items:center;gap:8px;margin-top:18px}
.footer-social span:not(.home-ph-tag){width:32px;height:32px;border-radius:50%;background:#fff;border:1px solid var(--line)}
.footer-col-h{display:block;margin-bottom:12px;font-weight:800;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.footer-col ul{list-style:none;display:grid;gap:2px}
.footer-col a{display:inline-flex;align-items:center;min-height:32px;font-weight:600;font-size:13.5px;text-decoration:none;color:var(--muted)}
.footer-col a:hover{color:var(--blue-deep)}
/* D102: the Library column carries the menu's shelf, so the assessment that gives two readings names them once above the pair, and
   the science and the articles are set off from the assessments by a hairline. */
.footer-sub-label{display:block;margin-top:6px;font-weight:800;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.footer-col ul>.footer-sub-label:first-child{margin-top:0}
.footer-col li.footer-sub a{padding-left:12px}
.footer-col li.footer-rule{margin-top:8px;padding-top:6px;border-top:1px solid var(--line)}
.footer-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 40px;padding-block:18px 32px;border-top:1px solid var(--line);font-size:11px;font-weight:700;letter-spacing:.04em;line-height:1.6;color:var(--faint)}
.footer-base p{max-width:88ch}
.footer-base a{font-weight:800;color:var(--muted)}
@media (max-width:860px){
  main+.site-footer{margin-top:64px}
  .footer-cols{grid-template-columns:1fr 1fr;padding-block:40px 24px}
  .footer-about{grid-column:1/-1}
  .footer-contact{grid-template-columns:1fr 1fr;column-gap:40px}
  .footer-base{flex-direction:column;padding-block:14px 24px}
}


/* ===== 05-components.css ===== */
/* ==========================================================================
   05-components.css · owner: Foundation
   The shared pieces every page is built from. Markup for each lives in
   src/site/components.mjs (build time) and app/ui.js (browser), documented in
   docs/SITE_KIT.md. Page agents: use these, never edit them.
   Emphasis: primary boxes, supporting panels and fine print (§13 of the kit,
   the "emphasis tiers" block below).
   ========================================================================== */

/* ---------------------------------------------------------------- family colours
   Put .fam-X on any element; children read var(--fam) and var(--on-fam). */
.fam-R{--fam:var(--fam-R);--on-fam:var(--on-fam-R);--fam-text-bg:var(--fam-R)}
.fam-I{--fam:var(--fam-I);--on-fam:var(--on-fam-I);--fam-text-bg:var(--fam-I)}
.fam-A{--fam:var(--fam-A);--on-fam:var(--on-fam-A);--fam-text-bg:var(--fam-A)}
.fam-S{--fam:var(--fam-S);--on-fam:var(--on-fam-S);--fam-text-bg:var(--sage-deep)}
.fam-E{--fam:var(--fam-E);--on-fam:var(--on-fam-E);--fam-text-bg:var(--fam-E)}
.fam-C{--fam:var(--fam-C);--on-fam:var(--on-fam-C);--fam-text-bg:var(--fam-C)}
.fam-bg{background:var(--fam-text-bg,var(--ink));color:var(--on-fam,var(--on-ink))}

/* ---------------------------------------------------------------- eyebrow
   The black label above a headline: "YOUR INTERESTS · EXAMPLE RESULT". */
.eyebrow{display:inline-block;font-family:var(--heading);font-weight:800;font-size:10px;line-height:1.4;letter-spacing:.16em;text-transform:uppercase;
  color:var(--blue-deep);padding:0}
.eyebrow+h1,.eyebrow+.hero-name{margin-top:14px}
.crumb{font-weight:800;font-size:10px;letter-spacing:.14em;text-transform:uppercase;line-height:1.4;color:var(--faint)}
.crumb a{text-decoration:none}
.crumb a:hover{text-decoration:underline}
.crumb .here{color:var(--blue-deep)}

/* ---------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:13px 22px;
  border:1px solid var(--line);background:#fff;color:var(--ink);box-shadow:none;
  font-family:var(--body);font-weight:700;font-size:15px;line-height:1.2;text-decoration:none;text-align:center;cursor:pointer;
  transition:border-color .2s ease,background-color .2s ease,box-shadow .2s ease;border-radius:var(--r-btn)}
.btn:hover{border-color:var(--blue-mark);color:var(--ink)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--blue-deep);color:#fff;border-color:transparent;box-shadow:var(--sh-btn)}
.btn-primary:hover{background:var(--blue-ink);color:#fff;border-color:transparent}
/* A secondary button reads as a button (Oct 6, 2026). Wayne: "all the actionable buttons need to have some kind of way to make it stand
   out a bit more". Until then it was blue words with no edge, which looked like plain text until hovered: now a white button with a
   pale blue hairline that fills with the blue wash on hover. */
.btn-ghost{background:#fff;color:var(--blue-deep);border-color:#B5D3F1}
.btn-ghost:hover{background:var(--blue-wash);color:var(--blue-ink);border-color:var(--blue-mark)}
.btn-buy{background:var(--buy);color:#fff;border-color:transparent;box-shadow:var(--sh-btn)}
.btn-buy:hover{background:var(--buy-ink);color:#fff;border-color:transparent}
.btn-ink{background:var(--ink);color:#fff;border-color:transparent}
.btn-ink:hover{color:#fff}
.btn-amber{background:var(--amber-wash);color:var(--amber-text);border-color:var(--amber-pale)}
.btn-sm{min-height:40px;padding:9px 16px;font-size:13.5px}
.btn-sm:active{transform:translateY(0)}
.btn-block{display:flex;width:100%}
.btn[disabled],.btn[aria-disabled=true]{background:var(--cobalt-pale);color:#fff;border-color:transparent;box-shadow:none;transform:none;cursor:not-allowed}
.box-cobalt .btn,.box-ink .btn{box-shadow:var(--sh-btn)}
.btn-row{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.btn-row+.chips,.lede+.btn-row{margin-top:22px}
.link-more{display:inline-block;font-weight:700;font-size:12.5px;text-decoration:none;color:var(--blue-deep);line-height:1.4}
.link-more:hover{color:var(--blue-deep)}
@media (max-width:560px){ .btn-row{gap:14px} .btn-row .btn{flex:1 1 auto} }

/* ---------------------------------------------------------------- boxes */
.box{position:relative;background:#fff;border:1px solid var(--line);box-shadow:none;border-radius:var(--r)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .box{background:rgba(255,255,255,.92)} }
/* ---------------------------------------------------------------- the four accents (design: "notice the different colors")
   Every glass card carries one accent. It shows only as a soft glow in the top-right corner and as the small kicker above the
   title; the card itself stays white. Cards in a grid rotate blue, violet, amber, teal on their own; .acc-X pins one.
   --acc is the mark, --acc-text the kicker on white (4.5:1+), --acc-rgb feeds the glow and the tinted badges. */
:root{--acc:#2288E0;--acc-text:#0A5FA8;--acc-rgb:34,136,224}
/* EDITORIAL (Sep 21, docs/mockups/site): cards no longer rotate colours or glow; .acc-X still pins a colour where one means something */
.acc-blue{--acc:#2f6fd6;--acc-text:#1f55b0;--acc-rgb:47,111,214}
.acc-violet{--acc:#7a5cc7;--acc-text:#5b3fa8;--acc-rgb:122,92,199}
.acc-amber{--acc:#b8791f;--acc-text:#8f5c12;--acc-rgb:184,121,31}
.acc-teal{--acc:#2a9d8f;--acc-text:#1f7a6f;--acc-rgb:42,157,143}
/* the corner glow: a 200px accent circle at 33%, blurred 30px, 50px past the right edge and 60px above the top (the design's
   card), drawn as a background layer so it needs no overflow clipping. Cards in a grid get it; .glow puts it on any box;
   .glow-lg is the hero card's 360px glow. A page rule that sets its own background simply replaces it. */
/* .glow-lg is the floating glass card over the field (the report cover, the sample report); .glow is a plain white card */
.glow{background:#fff}
.glow-lg{background:var(--glass);-webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%);border-color:rgba(255,255,255,.75);box-shadow:var(--sh),inset 0 1px 0 rgba(255,255,255,.55)}
.kicker{display:block;font-family:var(--body);font-weight:800;font-size:9.5px;line-height:1.4;letter-spacing:.16em;text-transform:uppercase;color:var(--acc-text)}
.badge{display:inline-block;padding:5px 12px;border-radius:var(--r-pill);background:#fff;border:1px solid var(--line);color:var(--muted);
  font-family:var(--body);font-weight:700;font-size:11.5px;line-height:1.2;letter-spacing:0;white-space:nowrap}
.dot{display:inline-block;flex:none;width:8px;height:8px;border-radius:50%;background:var(--acc)}
.box-flat{box-shadow:none}
.box-pad{padding:22px 24px 22px}
.box-pad-lg{padding:28px 30px 26px}
/* the dark block (design: Pricing) */
.box-ink{background:var(--ink);color:#fff;border-color:var(--ink)}
/* on the dark panel (design: Pricing): a white primary with blue text, glass secondaries, warm kicker, two blurred orbs */
.box-ink{background:var(--ink);box-shadow:none}
.box-ink .btn-primary{background:#fff;color:var(--blue-deep);box-shadow:none}
.box-ink .btn-primary:hover{background:var(--blue-wash);color:var(--blue-ink)}
.box-ink .btn:not(.btn-primary){background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.box-ink .btn:not(.btn-primary):hover{background:rgba(255,255,255,.16);color:#fff}
.box-ink .eyebrow,.box-ink .kicker{color:var(--amber-pale)}
.box-ink .accent{color:var(--blue-light)}
/* the tinted lens panels: blue = strengths, amber = a cost, teal = what matters, violet = how others may read it */
.box-cobalt{background:var(--blue-wash);border-color:transparent;color:var(--ink);box-shadow:none}
.box-amber{background:var(--amber-wash);border-color:transparent;color:var(--ink);box-shadow:none}
.box-sage{background:#EEF7F5;border-color:transparent;color:var(--ink);box-shadow:none}
.box-violet{background:#F3F0FB;border-color:transparent;color:var(--ink);box-shadow:none}
.box-ground{background:var(--surface-dim)}
.box-title{font-family:var(--heading);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;line-height:1.4;padding-bottom:0;border-bottom:0;font-weight:800;color:var(--muted)}
.box-title+p,.box-title+.body{margin-top:10px}
.box p.small,.box .small{font-weight:500}
a.box{display:block;text-decoration:none;color:inherit;transition:transform .3s ease,box-shadow .3s ease}
a.box:hover{border-color:var(--blue-mark);color:inherit}
a.box:active{transform:translateY(1px)}
.box.is-here{border-color:var(--blue-mark);box-shadow:var(--ring-attn)}
/* coloured header band on a box: label left, number or arrow right */
.band{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 22px 10px;border-bottom:0;
  background:transparent;color:var(--acc-text);
  font-weight:800;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;line-height:1.4}
/* a band is the top strip of a rounded box (D71): its top corners follow the box's inner curve */
.band:first-child{border-radius:var(--r) var(--r) 0 0}
.band .num{font-size:13px}
.box-foot{border-top:1px solid var(--line);padding:12px 22px;font-weight:600;font-size:12.5px;color:var(--muted)}
/* the thick left edge used on "agree" and "pull apart" cards */
.edge-sage{border-left:2px solid var(--sage)}
.edge-amber{border-left:2px solid var(--amber)}
.edge-cobalt{border-left:2px solid var(--blue-mark)}

/* ---------------------------------------------------------------- emphasis tiers (docs/SITE_KIT.md §13)
   Wayne, round 1: every box had the same emphasis. Three weights, so the result reads first and the proof stays one step back:
   1 primary     .box: white, a hairline edge, rounded 14px, no shadow. Results, type write-ups, what a person gets.
   2 supporting  .box-quiet, callout(), notice({ kind: 'quiet' }), howWeKnow(), sources(), .sh-quiet: how to read it, limits, method.
   3 fine print  .fine-print (finePrint()): small, muted, no box. Credits, licenses, "numbers match the method".
   Honesty labels beside a claim ("Our take", the comparison sentence, the chart note) keep their normal size and ink color. */

/* supporting box: flat tint, no border, no shadow. Its title is a small label, and a band inside it loses its fill. boxCard({ quiet: true }) */
.box-quiet{background:var(--quiet-bg);border:1px solid transparent;box-shadow:none;color:var(--ink)}
.box-quiet .box-title{font-family:var(--body);font-weight:800;font-size:9.5px;letter-spacing:.13em;line-height:1.4;padding-bottom:0;border-bottom:0}
.box-quiet .box-title+p,.box-quiet .box-title+.body,.box-quiet .box-title+ul,.box-quiet .box-title+ol{margin-top:6px}
.box-quiet .band{background:transparent;color:var(--ink);border-bottom:var(--bw-thin) solid var(--quiet-rule)}
.box-quiet .box-foot{border-top:var(--bw-thin) solid var(--quiet-rule)}
.box-quiet.edge-sage{border-left:3px solid var(--sage)}
.box-quiet.edge-amber{border-left:3px solid var(--amber)}
.box-quiet.edge-cobalt{border-left:3px solid var(--cobalt)}
/* a linked supporting box doesn't lift: an ink outline appears instead */
a.box.box-quiet:hover{border-color:var(--blue-mark)}
a.box.box-quiet:active{transform:none}

/* fine print: credits, licenses, where a sample came from. Muted ink at 6.9:1 on white. finePrint() */
.fine-print{font-size:var(--fs-fine);font-weight:500;line-height:1.5;color:var(--muted);max-width:110ch}
.fine-print+.fine-print,.fine-print p+p{margin-top:6px}
.fine-print b,.fine-print strong{color:var(--ink);font-weight:700}
.fine-print a{color:var(--cobalt);font-weight:600}

/* ---------------------------------------------------------------- zones: each section on its own ground (Truity's colored bands)
   <section class="zone zone-blue"><div class="wrap">...</div></section>. Full width; the content keeps the page width. Use a zone
   for every top-level section of a marketing or test page so the page reads in chapters; alternate grounds, never two alike in a row. */
.zone{padding-block:76px;position:relative}
.zone-white{background:#fff}
.zone-blue{background:#EEF5FD}
.zone-warm{background:#FBF3E8}
.zone-grey{background:#F4F6F9}
.zone-ink{background:#0D1420;color:#fff}
.zone-deep{background:#083F70;color:#fff}
.zone-ink :is(h1,h2,h3,h4),.zone-deep :is(h1,h2,h3,h4){color:#fff}
.zone-ink :is(.lede,.muted,.small,p),.zone-deep :is(.lede,.muted,.small,p){color:rgba(255,255,255,.78)}
.zone-ink :is(.eyebrow,.kicker),.zone-deep :is(.eyebrow,.kicker){color:var(--amber-pale)}
.zone-ink a:not(.btn),.zone-deep a:not(.btn){color:#9CCBF7}
.zone-ink .btn-primary,.zone-deep .btn-primary{background:#fff;color:var(--blue-deep)}
.zone-ink .btn-primary:hover,.zone-deep .btn-primary:hover{background:var(--blue-wash);color:var(--blue-ink)}
.zone-ink .btn:not(.btn-primary),.zone-deep .btn:not(.btn-primary){background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.zone-ink .btn.btn-buy,.zone-deep .btn.btn-buy{background:var(--buy);color:#fff;border-color:transparent}
.zone-ink .btn.btn-buy:hover,.zone-deep .btn.btn-buy:hover{background:var(--buy-ink)}
.zone-ink :focus-visible,.zone-deep :focus-visible{outline-color:#fff}
.zone+.zone{margin-top:0}
/* a page that ends on a zone meets the footer edge to edge, with no white strip between */
main:has(>.zone:last-child)+.site-footer,main:has(>:last-child>.zone:last-child)+.site-footer{margin-top:0}
.zone-head{text-align:center;max-width:720px;margin:0 auto 40px}
.zone-head .eyebrow{display:block;margin-bottom:12px}
.zone-head h2{font-size:clamp(30px,3.6vw,44px);font-weight:300;letter-spacing:-.02em}
.zone-head p:not(.eyebrow):not(.kicker){margin-top:14px;color:var(--muted);font-size:17px;line-height:1.55}
@media (max-width:720px){ .zone{padding-block:52px} .zone-head{margin-bottom:28px} }

/* ---------------------------------------------------------------- the guarantee badge (guaranteeBadge in app/ui.js)
   A gold seal and the promise in bold, set where the buttons are. On an ink or deep zone it turns light by itself. */
.guarantee{display:inline-flex;align-items:center;gap:14px;max-width:100%;padding:9px 22px 9px 9px;border-radius:999px;
  background:#FFF4DF;border:1.5px solid #F5A623;box-shadow:0 10px 26px -14px rgba(224,134,0,.55);text-align:left}
.gb-seal{flex:none;width:62px;height:62px;overflow:visible}
.gb-disc{fill:#F5A623}
.gb-rim{fill:none;stroke:#fff;stroke-width:1.4;stroke-dasharray:1.5 3}
.gb-core{fill:#fff}
.gb-ring{font-family:var(--body);font-weight:800;font-size:10.6px;fill:#0D1420}
.gb-pct{font-family:var(--body);font-weight:800;font-size:23px;letter-spacing:-.02em;fill:var(--blue-deep)}
.gb-text{display:flex;flex-direction:column;gap:1px;margin:0}
.gb-text b{font-family:var(--body);font-weight:800;font-size:16px;line-height:1.2;color:var(--ink)}
.gb-text span{font-weight:600;font-size:13.5px;line-height:1.35;color:#6B4D0F}
.guarantee-lg{gap:18px;padding:12px 28px 12px 12px}
.guarantee-lg .gb-seal{width:86px;height:86px}
.guarantee-lg .gb-text b{font-size:20px}
.guarantee-lg .gb-text span{font-size:15px}
:is(.zone-ink,.zone-deep,.box-ink) .guarantee{background:rgba(255,255,255,.08);border-color:#F5A623;box-shadow:none}
:is(.zone-ink,.zone-deep,.box-ink) .gb-text b{color:#fff}
:is(.zone-ink,.zone-deep,.box-ink) .gb-text span{color:#FAD9A8}
@media (max-width:560px){ .guarantee,.guarantee-lg{border-radius:18px;padding:10px 16px 10px 10px;gap:12px} .guarantee-lg .gb-seal{width:70px;height:70px} .guarantee-lg .gb-text b{font-size:17px} }

/* ---------------------------------------------------------------- the line under a price while the report is still open
   app/ui.js openNote(): flags.sellingReports on, flags.lockFullReport off. Quiet on purpose. It has to be read, and it must never
   look like a badge or a promotion, so it is small muted body type with no pill, no icon and no colour of its own. It picks up the
   ground it lands on, since it runs on white, warm and deep bands alike. */
.offer-open{max-width:52ch;margin-top:8px;font-size:13px;font-weight:600;line-height:1.5;color:var(--muted)}
:is(.zone-ink,.zone-deep,.box-ink) .offer-open{color:rgba(255,255,255,.78)}

/* ---------------------------------------------------------------- placeholder pictures (phImage in components.mjs) */
.ph-img{position:relative;margin:0;overflow:hidden;border-radius:var(--r);background:var(--ground-deep);max-width:100%}
.ph-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph-img-tag{position:absolute;left:10px;top:10px;z-index:1;padding:3px 8px;border:1px dashed var(--ink);border-radius:var(--r-pill);background:#fff;
  font:800 9.5px/1.3 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}

/* ---------------------------------------------------------------- grids */
.grid{display:grid;gap:var(--gap)}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.stack>*+*{margin-top:18px}
@media (max-width:1100px){ .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))} .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:860px){ .grid-2{grid-template-columns:minmax(0,1fr)} }
@media (max-width:720px){ .grid-3,.grid-4{grid-template-columns:minmax(0,1fr)} }

/* ---------------------------------------------------------------- section heading
   <div class="sh"><span class="sh-num">3</span><h2>How clear your result is</h2><span class="sh-aside">Examples, not advice</span></div> */
.sh{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 14px;border-top:1px solid var(--ink);border-bottom:0;padding-top:20px;padding-bottom:0;margin-bottom:24px}
.sh h2{flex:1 1 0;min-width:0}
.sh-num{align-self:baseline;flex:none;display:inline-block;min-width:0;height:auto;padding:0;background:none;color:var(--blue-deep);border:0;border-radius:0;
  box-shadow:none;font-family:var(--body);font-weight:800;font-size:11px;letter-spacing:.14em;line-height:1}
/* --muted, not --faint: this line carries the section's own figure ("24th percentile · More reserved") and --faint is 3.4:1,
   which fails at 11px. Wayne, Sep 23, 2026: "the font color and background color sometimes look too similar." --faint stays for
   true apparatus, where nothing is lost by missing it. */
.sh-aside{margin-left:auto;font-weight:700;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:right}
.sh-aside a{text-decoration:none;color:var(--blue-deep);font-weight:800}
@media (max-width:720px){ .sh-aside{margin-left:0;flex-basis:100%;text-align:left} }
/* a supporting section (limits, your data, method): the same heading level, set at card-title size over a thinner rule. sectionHead({ quiet: true }) */
.sh.sh-quiet{border-top-color:var(--line);padding-top:14px;margin-bottom:16px}
.sh-quiet h2,.sh-quiet h3{font-size:var(--fs-h3);letter-spacing:0}
.sh-quiet .sh-num{font-size:10px}

/* ---------------------------------------------------------------- tags and chips */
.tag{display:inline-block;font-weight:700;font-size:11.5px;line-height:1.3;letter-spacing:0;padding:4px 11px;
  border:1px solid var(--line);background:#fff;color:var(--muted);vertical-align:middle;white-space:nowrap;border-radius:var(--r-pill)}
.tag-xs{font-size:10.5px;padding:2px 6px;letter-spacing:.06em}
.tag-ground{background:var(--ground)}
.tag-ink{background:var(--ground-deep);color:var(--ink);border-color:var(--line)}
.tag-cobalt{background:var(--blue-wash);color:var(--blue-ink);border-color:var(--cobalt-pale)}
.tag-sage{background:#EEF7F5;color:var(--sage-deep);border-color:#cfe8e4}
.tag-amber{background:var(--amber-wash);color:var(--amber-text);border-color:var(--amber-pale)}
.tag-fam{background:color-mix(in srgb,var(--fam) 16%,rgba(255,255,255,.7));color:var(--ink);border-color:color-mix(in srgb,var(--fam) 30%,#fff)}
.tags{display:flex;flex-wrap:wrap;gap:6px}
/* chips: the larger outlined promises and filters */
.chip{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:12px;line-height:1.2;
  padding:7px 14px;border:1px solid var(--line);background:#fff;
  color:var(--muted);text-decoration:none;border-radius:var(--r-pill)}
button.chip,a.chip{cursor:pointer;min-height:36px}
button.chip:hover,a.chip:hover{color:var(--blue-deep);border-color:var(--blue-mark)}
.chip[aria-pressed=true],.chip[aria-current],.chip.is-on{background:var(--ink);color:#fff;border-color:var(--ink)}
.chip.fam-bg{background:color-mix(in srgb,var(--fam) 16%,rgba(255,255,255,.7));color:var(--ink);border-color:color-mix(in srgb,var(--fam) 30%,#fff)}
.chips{display:flex;flex-wrap:wrap;gap:8px 10px}
.btn-row+.chips{margin-top:24px}

/* ---------------------------------------------------------------- letter badges */
.lt{display:inline-grid;place-items:center;flex:none;width:36px;height:36px;border:1px solid var(--ink);border-radius:5px;
  background:#fff;color:var(--ink);box-shadow:none;
  font-family:var(--body);font-weight:800;font-size:19px;line-height:1;text-transform:uppercase}
.lt[class*="fam-"],.fam-bg .lt{background:var(--blue-wash);border-color:var(--blue-mark);color:var(--blue-ink)}
.lt-xs{width:26px;height:26px;font-size:13px;border-radius:4px}
.lt-sm{width:30px;height:30px;font-size:16px;border-radius:4px}
.lt-md{width:52px;height:52px;font-size:26px;border-radius:6px}
.lt-lg{width:74px;height:74px;font-size:38px;border-radius:8px;box-shadow:none}
.lt-xl{width:92px;height:92px;font-size:48px;border-radius:10px;box-shadow:none}
.lt-plain{background:#fff;color:var(--ink);border-color:var(--ink)}
.lt-soft{background:#fff;color:var(--muted);border:1px dashed var(--ink);box-shadow:none}
.lt-shadow{box-shadow:var(--sh-sm)}
.letters{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.letters.tight{gap:6px}
.code-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.code-row .caption{font-weight:700;font-size:14px;line-height:1.35;max-width:24ch;margin-left:10px}
@media (max-width:720px){ .lt-lg{width:60px;height:60px;font-size:30px} .lt-xl{width:72px;height:72px;font-size:36px} .code-row .caption{margin-left:4px} }

/* ---------------------------------------------------------------- meter: a dot on a 0–100 track
   With optional end labels, typical band, middle line and caption. */
.meter{min-width:0}
.meter-row{display:grid;grid-template-columns:var(--meter-end,120px) minmax(0,1fr) var(--meter-end,120px);gap:18px;align-items:center}
.meter-end{font-weight:600;font-size:14px;line-height:1.2}
.meter-end.is-on{color:var(--blue-deep)}
.meter-row .meter-end:last-child{text-align:right}
.meter-ends{display:flex;justify-content:space-between;gap:12px;margin-bottom:8px;font-weight:600;font-size:12px;letter-spacing:0}
.meter-track{position:relative;height:4px;border:0;border-radius:2px;background:var(--ground-deep)}
.meter-typ{position:absolute;top:-8px;bottom:-8px;background:var(--blue-wash);border-radius:2px}
.meter-zone{position:absolute;top:-8px;bottom:-8px;left:45%;width:10%;background:var(--ground-deep);border-radius:2px}
/* the middle line is drawn as real dashes (a 2px dashed border on a short line reads as solid) */
.meter-mid{position:absolute;left:50%;top:-8px;bottom:-8px;width:0;border-left:1px solid var(--grey)}
.meter-dot{position:absolute;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:var(--dot,var(--blue-mark));border:0;box-shadow:0 0 0 3px #fff}
.meter-caption{font-size:12.5px;font-weight:500;line-height:1.4;margin-top:7px}
.meter-lg .meter-track{height:4px}
.meter-lg .meter-dot{width:20px;height:20px;margin:-10px 0 0 -10px}
.meter-sm .meter-track{height:3px}
.meter-sm .meter-dot{width:14px;height:14px;margin:-7px 0 0 -7px;box-shadow:0 0 0 3px rgba(255,255,255,.9)}
@media (max-width:720px){
  .meter-row{grid-template-columns:1fr 1fr;gap:8px 12px}
  .meter-row .meter-track{grid-column:1/-1;grid-row:2}
  .meter-row .meter-end:last-child{grid-row:1;grid-column:2}
}

/* ---------------------------------------------------------------- bar: a filled 0–100 bar */
.bar{height:10px;border:0;border-radius:2px;background:var(--ground-deep);min-width:0;overflow:hidden}
.bar>i{display:block;height:100%;border-radius:2px;background:var(--bar,var(--blue-mark))}
.bar-sm{height:8px}
.bar-lg{height:12px}
.bar-sage{--bar:var(--sage)}
.bar-grey{--bar:var(--grey)}
.bar-blue{--bar:var(--blue-mark)}
.bar-amber{--bar:var(--amber)}
.bar-fam{--bar:var(--fam)}
.bar-row{display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr) 44px;gap:14px;align-items:center;margin:8px 0;font-weight:600;font-size:14px}
.bar-row .v{font-family:var(--body);font-size:14px;text-align:right;font-weight:800;color:var(--blue-deep);font-variant-numeric:tabular-nums}

/* Histogram (ui.js histogram): the shape of everybody's scores, one column per score step, on the same baseline rule as a
   track. The typical middle is hatched like the meter's band; the reader's own column is cobalt. --h is a column's height. */
.hist{margin-top:14px}
.hist-eyebrow{margin:0 0 8px;font-weight:700;font-size:12.5px;letter-spacing:.01em}
.hist-title{margin:0 0 6px;font-weight:700;font-size:14px;line-height:1.3}
.hist-plot{position:relative;padding-top:20px}
/* "You, 24th" over the reader's column, anchored in proportion so it never runs off either edge, with a tick down to the column */
.hist-you{position:absolute;top:0;left:var(--x);transform:translateX(calc(var(--x) * -1));font-size:12px;font-weight:800;line-height:1;color:var(--blue-deep);white-space:nowrap}
.hist-you::after{content:"";position:absolute;left:var(--x);top:calc(100% + 1px);width:2px;height:6px;margin-left:-1px;background:var(--blue-mark)}
.hist-under{position:relative;min-height:26px;padding-top:3px}
.hist-end{position:absolute;top:4px;font-size:11.5px;font-weight:700;line-height:1}
.hist-end.l{left:0}.hist-end.r{right:0}
/* "Typical middle" under the hatched columns, with a bracket the width of the band (its inline left and width).
   THE WORDS ARE CENTERED ON THE BRACKET, and may overhang it by 1.5em a side (7.5em at the least) before they wrap onto a second
   line. On a phone a bracket is 30 to 70px wide, and the words used to be set on one line from its left edge, so "Close to their
   average" ran 69px past its bracket and into the "5" at the end of the axis (docs/reviews/2026-09-26-overnight.md R3). The box
   stays in the flow, moved by its left rather than placed, so a second line makes the strip under the axis taller instead of
   spilling out of it; on one line the strip is the 26px it always was. */
.hist-typ{position:relative;display:grid;grid-template-columns:max(7.5em,100% + 3em);justify-content:center;padding-top:5px;
  border-top:1px solid var(--blue-mark);text-align:center;text-wrap:balance;font-size:11px;font-weight:700;line-height:1.1;color:var(--blue-deep)}
.hist-cols{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:2px;height:64px;align-items:end;border-bottom:1px solid var(--line)}
.hist-cols>i{display:block;height:var(--h);background:var(--grey);border-radius:1px 1px 0 0;transform-origin:bottom}
.hist-cols>i.typ{background:var(--cobalt-pale)}
.hist-cols>i.you{background:var(--blue-mark);outline:0;box-shadow:none}

/* Answer strip (ui.js answerStrip): one square per answer, turned to point the same way as the score, low to high. Blue pulls
   the score up, amber pulls it down, a plain square sits in the middle; the darker shade is the stronger answer. Each square is a button:
   tapping it puts its statement in the line below (app/chart-touch.js). */
.as{margin-top:14px}
.as-row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,30px);gap:5px}
.as-sq{width:auto;aspect-ratio:1;padding:0;border:1px solid var(--line);border-radius:4px;background:#fff;cursor:pointer;transform-origin:center;transition:transform .12s ease-out,box-shadow .12s ease-out}
.as-sq:hover,.as-sq.is-on{box-shadow:0 0 0 2px var(--blue-mark);transform:none}
.as-sq:focus-visible{outline:3px solid var(--cobalt);outline-offset:2px}
.as-d2{background:var(--amber);color:var(--ink)}
.as-d1{background:var(--amber-pale)}
.as-m{background:#fff;border:1px dashed var(--ref-deep)}
.as-u1{background:var(--cobalt-pale)}
.as-u2{background:var(--blue-mark);color:var(--on-ink)}
.as-sq span{display:block;font-size:14px;font-weight:700;line-height:1}
.as-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin:8px 0 0;font-size:12.5px;font-weight:500}
.as-k{display:inline-block;width:12px;height:12px;vertical-align:-1px;margin-right:6px;border-radius:4px;border:1px solid var(--line)}
.as-k.as-m{border-style:dashed}
.as-caption{margin:6px 0 0;font-size:13px;font-weight:700}
.as-out{margin:4px 0 0;min-height:2.8em;font-size:13px;line-height:1.4;color:var(--muted)}
.as-out.is-on{color:var(--ink)}

/* Motion (D67): a chart moves once, toward its meaning, the first time it is seen. app/motion.js puts
   the start state on the element and then adds .m-go, so a page without the script shows every chart
   finished, and reduced motion never sees a transition at all. Every start state can be seen, and when
   an arrival should be over motion.js puts the markup's own values back under .m-rest, which holds that
   chart's transitions off for the moment it lands (Sep 27, 2026). The hexagon's shape has no rule here:
   it is scaled by its SVG transform attribute, so no engine's transform-box or transform-origin moves it.
   --as-step: a long answer strip's shorter step, so forty squares deal within a second. */
.bar>i.m-go,.pr-cover-bar i>b.m-go{transition:width .9s cubic-bezier(.2,.8,.2,1)}
.meter-dot.m-go{transition:left .9s cubic-bezier(.2,.9,.2,1)}
.fl-scale-track>i.m-go{transition:left .9s cubic-bezier(.2,.9,.2,1)}
.hist-cols.m-go>i{transition:transform .6s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i) * 12ms)}
.as-row.m-go>.as-sq{transition:transform .35s cubic-bezier(.3,1.4,.5,1),opacity .25s ease-out;transition-delay:calc(var(--i) * var(--as-step,45ms))}
.m-rest,.m-rest *{transition:none!important}
@media (prefers-reduced-motion:reduce){.m-go,.m-go>i,.as-sq{transition:none!important}}
@media (max-width:560px){ .bar-row{grid-template-columns:minmax(0,1fr) 40px;gap:4px 12px} .bar-row .bar{grid-column:1/-1;grid-row:2} .bar-row .v{grid-row:1;grid-column:2} }

/* interest list: letter | name + bar | score (docs/mockups/riasec/3) */
.score-list{list-style:none;padding:6px 18px}
.score-row{display:grid;grid-template-columns:40px minmax(0,1fr) 52px;gap:12px;align-items:center;padding:10px 0;border-bottom:var(--bw-thin) solid var(--line)}
.score-row:last-child{border-bottom:0}
.score-row .name{font-weight:600;font-size:15px;line-height:1.3}
.score-row .name span{font-weight:500}
.score-row .bar{margin-top:5px}
.score-row .v{font-family:var(--body);font-size:15px;text-align:right;font-weight:800;color:var(--blue-deep);font-variant-numeric:tabular-nums}
@media (max-width:560px){ .score-list{padding:4px 14px} .score-row{grid-template-columns:36px minmax(0,1fr) 40px;gap:10px} }

/* ---------------------------------------------------------------- hexagon (app/ui.js hexagon())
   Editorial (D88): the frame is a hairline, not a drawn border, with one hairline ring at half radius to read the shape against.
   The person's shape is the page's blue; the letter tiles are the same object as the .lt badge above — blue wash, hairline edge,
   Figtree — and a type's two letters are the same tiles filled solid. The drawing carries no colour of its own: every value below
   is a token, so it follows the site rather than being repainted beside it. */
.hex{width:100%;max-width:420px;margin-inline:auto}
.hex svg{width:100%;height:auto;overflow:visible}
.hex-frame{fill:#fff;stroke:var(--grey);stroke-width:1.25;stroke-linejoin:round}
.hex.is-quiet .hex-frame{fill:var(--surface-dim)}
.hex-ring{fill:none;stroke:var(--line);stroke-width:1;stroke-linejoin:round}
.hex-spoke{stroke:var(--line);stroke-width:1;stroke-dasharray:2 6;stroke-linecap:round}
.hex-hub{fill:var(--grey)}
.hex-shape{fill:rgba(34,136,224,.16);stroke:var(--blue-mark);stroke-width:2;stroke-linejoin:round}
/* The same fill mixed from the token, where the engine can mix. It stays inside @supports because a color-mix() holding a var()
   is kept over any fallback written above it and then dropped as the page is drawn by an engine without color-mix() (Safari
   before 16.2), which fills the shape black. The plain value above is the same color: #2288E0 at 16%. */
@supports (color:color-mix(in srgb,red,red)){.hex-shape{fill:color-mix(in srgb,var(--blue-mark) 16%,transparent)}}
/* the pair: along the edge when the letters are neighbours, dashed across the middle when they are not */
.hex-link{stroke:var(--blue-mark);stroke-width:4;stroke-linecap:round}
.hex-link.is-far{stroke-width:2;stroke-dasharray:9 8}
.hex-tile rect{fill:var(--blue-wash);stroke:var(--blue-mark);stroke-width:1}
.hex-tile text{fill:var(--blue-ink);font-family:var(--body);font-weight:800;font-size:15px;letter-spacing:.02em}
.hex-tile.is-on rect{fill:var(--cobalt);stroke:var(--cobalt)}
.hex-tile.is-on text{fill:var(--on-ink)}
/* the area names beside the letters (hexagon({ names: true })): only drawn where the box is wide enough to set them at about 16px */
.hex.has-names{max-width:560px}
.hex-name{fill:var(--muted);font-family:var(--body);font-weight:700;font-size:22px;letter-spacing:.01em}
.hex-name.is-on{fill:var(--blue-ink)}

/* ---------------------------------------------------------------- art
   Always through artFigure(): a missing image becomes a flat family panel with the letters. */
.art{position:relative;margin:0;background:var(--ground);overflow:hidden}
.art img{width:100%;height:100%;object-fit:cover;object-position:50% 35%}
.art[style*=aspect-ratio] img{position:absolute;inset:0}
.art-fallback{display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#fff,var(--fam,var(--acc)) 85%);color:var(--on-fam,var(--ink))}
.art-fallback .art-letters{display:flex;gap:10px}
.art-fallback .lt{background:var(--surface);color:var(--ink);box-shadow:var(--sh-sm)}
.art-fallback::after{content:none}
.art-fallback.is-plain{background:radial-gradient(circle at 35% 30%,#fff,rgba(120,170,255,.55) 85%);color:var(--ink)}
.art-frame{align-self:start;margin:0;background:#fff;border:1px solid var(--line);box-shadow:none;border-radius:var(--r);overflow:hidden}
.art-frame .band+.art,.art-frame .art{border-bottom:1px solid var(--line)}
.art-frame .art:last-child{border-bottom:0}
.art-frame figcaption,.art-caption{padding:10px 14px;font-size:14px;font-weight:600;font-style:italic;line-height:1.35}

/* ---------------------------------------------------------------- type cards */
.type-card,a.box.type-card{display:flex;flex-direction:column;height:100%}
.type-card .band .arrow{font-family:var(--body);font-size:15px;letter-spacing:0}
.type-card .band .codes{display:flex;align-items:center;gap:8px}
.type-card .band .code{font-family:var(--body);font-weight:700;font-size:11.5px;letter-spacing:.12em;background:transparent;color:var(--muted);border:0;padding:0}
.type-card .art{border-bottom:1px solid var(--line)}
.type-card-body{padding:13px 15px 15px;display:flex;flex-direction:column;flex:1}
.type-card-name{font-family:var(--display);font-size:22px;line-height:1.1;letter-spacing:-.012em;font-weight:400}
.type-card-line{font-size:15.5px;line-height:1.4;margin-top:4px;font-weight:500}
.type-card .link-more{margin-top:auto;padding-top:10px;align-self:flex-start;border-bottom:0;text-decoration:none}
.type-card .you-here{margin-top:8px;font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--acc-text)}
.type-card.is-compact .type-card-name{font-size:19px}
.type-card.is-compact .type-card-line{font-size:14.5px;line-height:1.35}
.type-card.is-compact .band{padding:7px 11px;font-size:11.5px}
/* compact row chip: round thumbnail + name (docs/mockups/riasec/1) */
.type-chip{display:flex;align-items:center;gap:9px;min-height:44px;padding:6px 12px 6px 7px;border:1px solid var(--line);background:#fff;
  font-weight:600;font-size:14px;line-height:1.2;text-decoration:none;color:var(--ink);border-radius:var(--r-pill);box-shadow:none}
a.type-chip:hover{box-shadow:var(--sh-xs)}
.type-chip .thumb{flex:none;width:30px;height:30px;border-radius:50%;border:1px solid #fff;overflow:hidden;background:radial-gradient(circle at 35% 30%,#fff,var(--fam,var(--acc)));display:grid;place-items:center;
  font-family:var(--display);font-size:11px;color:var(--on-fam)}
.type-chip .thumb img{width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.type-chip .code{margin-left:auto;font-family:var(--body);font-weight:700;font-size:11px;letter-spacing:.12em;color:var(--muted)}

/* ---------------------------------------------------------------- callouts
   A caveat or research note beside the claim it qualifies: supporting (§13). No fill and a thin colored rule, with ink text at the
   small reading size, because an honesty note next to a claim stays easy to read. callout-strong is the white strip, for the rare
   callout that is the thing itself (the instructions before a question set). callout(text, { strong: true }) */
.callout{padding:6px 16px;border-left:2px solid var(--amber);background:transparent;font-size:var(--fs-small);font-weight:500;line-height:1.5;max-width:90ch}
.callout-sage{border-left-color:var(--sage)}
.callout-cobalt{border-left-color:var(--cobalt)}
.callout-ink{border-left-color:var(--ink)}
.callout b:first-child{display:block;font-family:var(--body);font-weight:600;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber-text);margin-bottom:6px}
.callout-strong{padding:12px 18px;border-left-width:2px;background:transparent;border-radius:0;font-weight:500;line-height:1.5}
/* the plain, boxed statement of a limit or a status (no art, no jokes). Status and errors stay at this weight: a reader has to see them.
   notice-quiet is a note about method with no action in it (supporting, §13). */
.notice{display:flex;gap:14px;align-items:flex-start;padding:16px 20px;border:1px solid var(--line);background:#fff;box-shadow:none;font-size:15px;font-weight:500;line-height:1.5;border-radius:var(--r-sm)}
.notice-title{display:block;font-family:var(--body);font-size:14.5px;letter-spacing:0;margin-bottom:4px;font-weight:600}
.notice-error{background:var(--amber-wash);border-color:var(--amber-pale);box-shadow:none}
.notice-quiet{border:0;background:var(--quiet-bg);font-size:var(--fs-small);line-height:1.5}
.notice-quiet .notice-title{font-family:var(--body);font-weight:700;font-size:var(--fs-label);letter-spacing:.08em;line-height:1.3}

/* ---------------------------------------------------------------- hard score block
   A score that could read as a judgement (VOICE.md). Plain box, no art, no playful copy, no colour-coded alarm. */
.score-block{background:#fff;border:1px solid var(--line);box-shadow:none;padding:20px 22px 22px;border-radius:var(--r)}
.score-block-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 14px;margin-bottom:12px}
.score-block-name{font-weight:600;font-size:16px;line-height:1.25}
.score-block-name .pct{font-weight:700}
.score-block .meter-caption{font-size:13px}
.score-block-text{font-size:15.5px;line-height:1.5;font-weight:500;margin-top:10px;max-width:70ch}

/* ---------------------------------------------------------------- stat boxes */
.stats{display:flex;flex-wrap:wrap;gap:14px}
.stat{border:0;border-top:1px solid var(--ink);background:transparent;padding:14px 4px 4px;text-align:left;box-shadow:none;min-width:96px;border-radius:0}
.stat b{display:block;font-family:var(--display);font-weight:300;font-size:36px;line-height:1.05;font-variant-numeric:tabular-nums}
.stat small{display:block;margin-top:4px;font-weight:700;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--faint)}

/* ---------------------------------------------------------------- numbered step badge */
.step-num{display:inline-grid;place-items:center;flex:none;width:28px;height:28px;background:var(--blue-wash);color:var(--blue-ink);border:0;border-radius:6px;
  box-shadow:none;font-family:var(--body);font-weight:800;font-size:13px;line-height:1}

/* ---------------------------------------------------------------- in-page contents */
.toc{display:flex;flex-wrap:wrap;gap:7px;padding:10px 12px;list-style:none}
.toc a{display:inline-block;font-weight:600;font-size:13.5px;line-height:1.2;padding:8px 10px;border:1px solid transparent;text-decoration:none;background:transparent;border-radius:8px;color:var(--muted)}
.toc a:hover{color:var(--blue-deep)}
.toc a[aria-current]{background:rgba(34,136,224,.13);color:var(--blue-ink);font-weight:800}

/* ---------------------------------------------------------------- forms (shared bits) */
.input,.select{display:block;width:100%;min-height:50px;padding:12px 14px;border:1px solid var(--line);background:#fff;font-weight:500;font-size:16px;border-radius:var(--r-btn);box-shadow:none}
.input::placeholder{color:var(--muted)}
.input:focus-visible,.select:focus-visible{background:var(--surface)}
.field-label{display:block;font-weight:600;font-size:12.5px;letter-spacing:0;margin-bottom:6px}
.radio-dot{appearance:none;-webkit-appearance:none;flex:none;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--ref-deep);background:#fff;box-shadow:none;cursor:pointer;margin:0;transition:box-shadow .2s ease}
.radio-dot:checked{background:var(--blue-deep);border-color:var(--blue-deep);box-shadow:inset 0 0 0 4px #fff}
.radio-dot:focus-visible{outline-offset:3px}

/* ---------------------------------------------------------------- table */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table{width:100%;border-collapse:collapse}
.table th,.table td{border:0;border-bottom:1px solid var(--line);padding:12px;text-align:left;vertical-align:top;font-size:14px;line-height:1.45}
.table th{background:transparent;color:var(--muted);border-bottom-color:var(--line);font-weight:600;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;vertical-align:bottom}
.cell-yes{background:rgba(42,157,143,.1)}
.cell-part{background:rgba(184,121,31,.1)}

/* ---------------------------------------------------------------- collapsible method notes and sources (supporting, §13)
   howWeKnow() draws <details class="more">, sources() draws <details class="sources">. Both are a hairline, a small label and a plus
   sign, closed unless the page asks otherwise. The summary is a native toggle (Enter or Space), and both print open (end of file).
   app/nav.js opens the nearest closed <details> around a followed link, so sources() never goes inside howWeKnow(). */
.more,.sources{border-top:var(--bw-thin) solid var(--quiet-rule);background:transparent;box-shadow:none;min-width:0}
.more>summary,.sources>summary{display:flex;align-items:center;gap:10px;width:fit-content;max-width:100%;min-height:44px;padding:8px 0;cursor:pointer;list-style:none;
  font-family:var(--body);font-weight:600;font-size:var(--fs-label);letter-spacing:0;line-height:1.3;color:var(--ink)}
.more>summary::-webkit-details-marker,.sources>summary::-webkit-details-marker{display:none}
.more>summary::after,.sources>summary::after{content:"+";flex:none;display:grid;place-items:center;width:24px;height:24px;border:1px solid var(--line);border-radius:50%;
  background:transparent;color:var(--cobalt);font-family:var(--body);font-size:15px;line-height:1;letter-spacing:0;font-weight:500;transition:transform .3s ease}
.more[open]>summary::after,.sources[open]>summary::after{transform:rotate(45deg)}
.more>summary:hover::after,.sources>summary:hover::after{border-color:var(--cobalt)}
.more-body{padding:8px 0 16px;font-size:var(--fs-small);font-weight:500;line-height:1.5}
.more-body>*+*{margin-top:10px}
.more-body p,.more-body li{max-width:78ch}
.more-body ul,.more-body ol{padding-left:20px}
/* the list itself is fine print inside the fold; a followed marker lands on a highlighted entry */
.sources ol{columns:2;column-gap:40px;margin:0;padding:8px 0 12px 24px}
.sources li{font-size:var(--fs-fine);line-height:1.45;margin:0 0 7px;break-inside:avoid;font-weight:500;color:var(--muted)}
.sources li b{font-weight:700;color:var(--ink)}
.sources li a{word-break:break-word;color:var(--ink)}
.sources li:target{color:var(--ink);background:var(--amber-wash);box-shadow:0 0 0 4px var(--amber-wash)}
.sources .sources-note{padding:0 0 14px;font-size:var(--fs-fine);font-weight:500;color:var(--muted)}
.sources ol+.sources-named{border-top:var(--bw-thin) dashed var(--quiet-rule);padding-top:12px}
.sources .sources-named{columns:2;column-gap:40px;margin:0;padding:0 0 12px 24px;list-style:square}
@media (max-width:860px){ .sources ol,.sources .sources-named{columns:1} }

/* ---------------------------------------------------------------- FAQ (supporting, §13, D33)
   faq() in app/ui.js: a quiet section head, then one native <details class="faq-item"> per question, closed by default. Each question
   is a full-width row between hairlines with the same plus square as .more, set in sentence case at body size, since it's the reader's
   own question. Answers are small body text with a 72ch measure; sources under an answer are fine print. Prints open (end of file). */
.faq{min-width:0}
.faq-list{border-bottom:1px solid var(--line)}
.faq-item{min-width:0;border-top:1px solid var(--line)}
.faq-item:first-child{border-top:0}
.faq-item>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:52px;padding:12px 0;cursor:pointer;list-style:none;
  font-family:var(--body);font-weight:600;font-size:15.5px;line-height:1.35;color:var(--ink)}
.faq-item>summary::-webkit-details-marker{display:none}
.faq-item>summary::after{content:"+";flex:none;display:grid;place-items:center;width:28px;height:28px;border:1px solid var(--line);border-radius:50%;
  background:transparent;color:var(--cobalt);font-family:var(--body);font-size:16px;line-height:1;letter-spacing:0;font-weight:500;transition:transform .3s ease}
.faq-item[open]>summary::after{transform:rotate(45deg)}
.faq-item>summary:hover::after{border-color:var(--cobalt)}
.faq-item>summary:focus-visible{outline-offset:2px}
.faq-a{padding:0 0 20px;font-size:14.5px;font-weight:400;line-height:1.6;color:var(--muted)}
.faq-a>*+*{margin-top:10px}
.faq-a p{max-width:72ch}
.faq-sources{margin:12px 0 0;padding:10px 0 0 20px;border-top:var(--bw-thin) dashed var(--quiet-rule);list-style:square}
.faq-sources li{font-size:var(--fs-fine);line-height:1.45;margin:0 0 6px;color:var(--muted);font-weight:500}
.faq-sources li a{word-break:break-word;color:var(--ink)}
.faq-sources li:has(>.faq-src-n){list-style:none;margin-left:-20px}
.faq-sources .faq-src-n{display:inline-block;min-width:36px;font-weight:800;color:var(--ink)}
.faq-sources li:target{color:var(--ink)}
.faq-a .faq-sub{margin-top:14px;font-size:var(--fs-fine);font-weight:800;letter-spacing:.01em;color:var(--ink)}
@media print{
  .faq-item::details-content{content-visibility:visible;display:block;height:auto}
  .faq-item>summary::after{display:none}
}

/* ---------------------------------------------------------------- utilities */
.mt-0{margin-top:0}.mt-xs{margin-top:6px}.mt-s{margin-top:12px}.mt-m{margin-top:20px}.mt-l{margin-top:32px}.mt-xl{margin-top:48px}
.center{text-align:center}
.nowrap{white-space:nowrap}

/* score-block and type-card names are headings for structure, set in the body face where the mockups use it */
.score-block-name{font-family:var(--body);text-transform:none;letter-spacing:0}

/* ---------------------------------------------------------------- split: text beside an art frame or a side box
   <div class="split" style="--aside:440px"><div>headline…</div><aside>…</aside></div>
   Mockups: home 410px, type page 440px, result top 450px, interests result 470px. Stacks below 860px. */
.split{display:grid;grid-template-columns:minmax(0,1fr) var(--aside,440px);gap:var(--split-gap,56px);align-items:center}
.split.top{align-items:start}
@media (max-width:1100px){ .split{--split-gap:36px;grid-template-columns:minmax(0,1fr) min(var(--aside,440px),40%)} }
@media (max-width:860px){ .split{grid-template-columns:minmax(0,1fr);gap:32px} }

/* ---------------------------------------------------------------- with other people: one family's card (docs/mockups/result-v3)
   withOthersCard() in app/ui.js. The same card on /results/, the interests chapter and every type page. */
.wo-card{display:flex;flex-direction:column;min-width:0;padding:0}
.wo-band{justify-content:flex-start;gap:12px;padding:10px 14px;text-transform:none;letter-spacing:0}
.wo-band .lt{box-shadow:none}
.wo-name{font-family:var(--body);font-size:14px;font-weight:700;line-height:1.2;text-transform:none;letter-spacing:0;min-width:0}
.wo-name b{font-family:var(--body);font-weight:700;font-size:15px;letter-spacing:.02em}
.wo-name small{font-size:13.5px;font-weight:700}
.wo-body{padding:8px 16px 18px}
.wo-body dt{margin-top:12px;font-weight:700;font-size:11px;letter-spacing:.01em;line-height:1.3}
.wo-body dd{margin-top:3px;font-size:15px;line-height:1.45;font-weight:500}
ul.grid>li>.wo-card{height:100%}

/* ---------------------------------------------------------------- grids of linked cards
   A card in a grid cell fills the cell, so "Read the type" and "Read the article" sit on one line across a row. */
ul.grid>li:not(.box){display:flex;flex-direction:column;min-width:0}
ul.grid>li>.type-card,ul.grid>li>a.box{flex:1 1 auto}

/* ---------------------------------------------------------------- hit areas
   Stand-alone text links keep their look but get a finger-sized target (about 44px tall), and source markers a bigger one. */
.link-more,.sh-aside a,.box-foot a,.ch-back{position:relative}
.link-more::after,.sh-aside a::after,.box-foot a::after,.ch-back::after{content:"";position:absolute;left:-6px;right:-6px;top:-12px;bottom:-12px}
sup a{position:relative}
sup a::after{content:"";position:absolute;left:-5px;right:-5px;top:-9px;bottom:-9px}

/* ---------------------------------------------------------------- display headings don't leave one word alone on a line */
h1,h2,.hero-name,.type-card-name,.box-title{text-wrap:balance}

/* ---------------------------------------------------------------- very narrow screens (320px, or 400% zoom): long tags wrap */
@media (max-width:400px){ .tag{white-space:normal;max-width:100%} }

/* ---------------------------------------------------------------- print
   A closed method note or sources list prints open (::details-content is in current Chrome, Edge, Safari and Firefox), without its plus
   sign. A supporting panel's tint may not print, so it keeps a hairline outline. */
@media print{
  .more::details-content,.sources::details-content{content-visibility:visible;display:block;height:auto}
  .more>summary::after,.sources>summary::after{display:none}
  .box-quiet,.notice-quiet{outline:1px solid var(--quiet-rule)}
}

/* Review-mode styles (the pink FOR REVIEW tags, the banner, /review/) live in 99-review.css, last in the cascade. */
.card-proof{margin-top:12px;padding-top:8px;border-top:var(--bw-thin) solid var(--quiet-rule)}

/* ---------------------------------------------------------------- "yours" labels (was the sticker, D71 idea 6)
   Small labels that are not scores ("Your type", "Closest flip"). The bold-vector build tipped them a few degrees and gave them a
   hard shadow; editorial (D88) lays them flat as a quiet blue pill, because blue is the reader. The class name is kept so the page
   stylesheets keep working. Never on a score, a band tag or a chart (docs/VOICE.md). */
.sticker,.fl-mine-tag,.lib-mine-tag,.page-fourletter .fl-next-you{display:inline-block;border:0;border-radius:var(--r-pill);box-shadow:none;transform:none;
  background:var(--blue-wash);color:var(--blue-deep);font-weight:700;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;padding:5px 10px}
.page-fourletter .fl-next-near{transform:none}
.fl-item:nth-child(even) .fl-mine-tag,.lib-item:nth-child(even) .lib-mine-tag{transform:none}
@media print{.sticker,.fl-mine-tag,.lib-mine-tag,.page-fourletter .fl-next-you{transform:none;box-shadow:none}}

/* ---------------------------------------------------------------- the big moment (D71 idea 7)
   The one or two things on a page worth stopping for (the question to take away, where two traits meet). The bold-vector build set
   them in ink with an amber shadow; editorial (D88) sets them in the serif against a blue rule, so a long page still has a beat. */
.box-moment{background:transparent;color:var(--blue-ink);border:0;border-left:2px solid var(--blue-mark);border-radius:0;box-shadow:none}
.box-moment .label,.box-moment .eyebrow-text{color:var(--blue-deep)}
.box-moment h3,.box-moment .moment-text{color:var(--blue-ink);font-family:var(--display);font-weight:300}

/* ---------------------------------------------------------------- one big number per score (D71 idea 5; app/ui.js bigScore) */
.big-score{margin:2px 0 4px}
.big-score-num{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 8px;font-family:var(--display);font-weight:300;color:var(--blue-deep);line-height:.9;font-variant-numeric:tabular-nums}
.big-score-n{font-size:clamp(64px,7vw,92px);letter-spacing:-.04em}
.big-score-num sup{font-size:clamp(22px,2.4vw,30px);line-height:1;align-self:flex-start;margin:6px 0 0 -6px;color:var(--blue-deep);font-weight:300}
/* the suffix holds its place while the number counts up to it (app/motion.js), so "92" is never briefly "81nd" and nothing on
   the line shifts when it returns. Hidden, not removed. */
.big-score-num sup.m-wait{visibility:hidden}
.big-score-unit{font-family:var(--body);font-size:15px;font-weight:600;color:var(--muted);letter-spacing:0}
.dots100{display:grid;grid-template-columns:repeat(20,1fr);gap:3px;max-width:400px;margin-top:12px}
.dots100 i{aspect-ratio:1;border-radius:50%;background:var(--ground-deep);border:1px solid var(--rule-soft)}
.dots100 i.on{background:var(--blue-mark);border-color:var(--blue-mark);transition:background-color .2s ease calc(var(--i) * 9ms),border-color .2s ease calc(var(--i) * 9ms)}
.dots100.m-wait i.on{background:var(--ground-deep);border-color:var(--rule-soft)}
.big-score-cap{font-size:13.5px;font-weight:600;line-height:1.4;color:var(--muted);margin-top:10px;max-width:46ch}
.big-score-src .big-score-cap{margin-top:8px;font-weight:400}
@media (max-width:720px){ .dots100{gap:2.5px} }

/* ---------------------------------------------------------------- the context fold (D106; app/ui.js contextFold)
   Wayne, Sep 24, 2026: "i want all the contextual fyi, citation, etc, to be minimized by default. the report is about the person
   who paid money for it, so minimized as appropriate."
   ONE CONTROL, EVERYWHERE. A comparison group, a list of studies, a note on how a reading time was worked out and the research
   under a compatibility panel used to look like three different things; they are one now, so the reader learns it once. Closed
   it is a quiet uppercase line with a caret, at apparatus weight. Open it is ordinary small print.
   NOTHING IS HIDDEN BY IT: 38-report-marks.css opens every fold for print, so the saved PDF holds all of it, and a limitation
   still sits with the claim it qualifies. */
:is(.fold,.compat .compat-fold)>summary{display:inline-flex;align-items:center;gap:7px;list-style:none;cursor:pointer;
  font:700 11px/1.4 var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
:is(.fold,.compat .compat-fold)>summary::-webkit-details-marker{display:none}
:is(.fold,.compat .compat-fold)>summary::after{content:"";flex:none;width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .18s ease}
:is(.fold,.compat .compat-fold)[open]>summary::after{transform:rotate(225deg) translate(-2px,-2px)}
:is(.fold,.compat .compat-fold)>summary:hover,:is(.fold,.compat .compat-fold)>summary:focus-visible{color:var(--ink)}
.fold{margin-top:12px}
.fold>.fold-body{padding-top:8px;font-size:13.5px;line-height:1.55;color:var(--muted);max-width:62ch}
.fold>.fold-body>*+*{margin-top:8px}
/* the compatibility panel's own fold kept its head markup, so its caret comes from the shared rule above and its old one goes */
.compat .compat-fold .compat-fold-mark{display:none}

/* ---------------------------------------------------------------- a picture that is still loading (D72)
   app/ui.js artFigure({ wait }) marks a type picture with its code. Until the picture arrives, its square shows the code on
   the family's or group's color, pulsing a few times, instead of an empty box; the picture then covers it. */
.art-wait{--wait-bg:var(--ground-deep);--wait-fg:var(--ink);background:var(--wait-bg)}
.art-wait[class*="fam-"]{--wait-bg:var(--fam);--wait-fg:var(--on-fam)}
.art-wait.grp-is{--wait-bg:var(--group-is);--wait-fg:var(--on-ink)}
.art-wait.grp-in{--wait-bg:var(--group-in);--wait-fg:var(--on-ink)}
.art-wait.grp-es{--wait-bg:var(--group-es);--wait-fg:var(--ink)}
.art-wait.grp-en{--wait-bg:var(--group-en);--wait-fg:var(--on-ink)}
.art-wait::before{content:attr(data-wait);position:absolute;inset:0;display:grid;place-items:center;font:400 clamp(16px,2.2vw,28px)/1 var(--display);letter-spacing:.04em;color:var(--wait-fg);animation:art-wait 1.1s ease-in-out 8 alternate}
.art-wait img{position:relative;z-index:1}
@keyframes art-wait{from{opacity:1}to{opacity:.5}}
@media print{.art-wait::before{content:none}}

/* ---------------------------------------------------------------- a contents row that follows you (D72; app/toc-follow.js)
   The row sticks just under the site's bar, stays on one line (sideways scroll on a phone), lights up the section you are in, dims
   the ones you have passed, and an amber line along its bottom shows how far down the page you are. app/toc-follow.js adds its
   height to where a jump lands (--stuck-h, 00-base.css), so a section it links to lands under both bars. (Until Sep 27, 2026 the
   rule stuck it 10px from the top, behind the bar, and gave the page a fixed scroll-padding-top of 96px.) */
[data-follow]{position:sticky;top:var(--header-h);z-index:25}
[data-follow] .box,[data-follow].box{overflow:hidden}
[data-follow] .toc{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:14px!important}
[data-follow] .toc::-webkit-scrollbar{display:none}
[data-follow] .toc li{flex:none}
[data-follow] .toc a{white-space:nowrap}
[data-follow] .toc a.is-past{color:var(--muted)}
[data-follow] .toc a.is-here{background:rgba(34,136,224,.13);color:var(--blue-ink);font-weight:800;border-color:transparent}
.follow-line{position:absolute;left:0;bottom:0;height:3px;width:var(--read,0%);background:var(--blue-mark);border-radius:2px;pointer-events:none}
.follow-track{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--ground-deep);pointer-events:none}
@media print{[data-follow]{position:static}.follow-line,.follow-track{display:none}}

/* ---------------------------------------------------------------- a way into a long read (D72; app/ui.js leadIn)
   The opening sentence of a long section, set large on its own line. The words are the paragraph's own. */
.lead-in{display:block;font-family:var(--display);font-size:clamp(21px,2vw,25px);line-height:1.36;font-weight:300;letter-spacing:-.005em;max-width:40ch;margin-bottom:12px;color:var(--ink);text-wrap:balance}
.lede .lead-in{font-size:clamp(21px,2vw,26px)}

/* ---------------------------------------------------------------- the evidence band (src/site/components.mjs evidenceBand)
   The credibility section on the home page and under every test: a heading, one line, and four published findings side by side,
   each closing on the citation the page prints itself. The editorial look of the home page's fact row: a hairline over every
   finding, the claim in the display serif, the citation small and quiet underneath, so the row reads as a bibliography and never
   as a wall of logos. Four across, two on a tablet, one on a phone. */
.ev-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:34px}
/* every finding is a column, so the citations line up along the bottom of the row however long the claims run */
.ev-find{display:flex;flex-direction:column;padding-top:20px;border-top:1px solid var(--line)}
/* the painted spot above each headline (docs/art-briefs/evidence/): a mark, not a picture, so the four columns stay a credibility
   band and not a gallery. The paper ground the pictures are painted on melts into a white zone under multiply. */
.ev-spot{display:block;width:100%;max-width:190px;height:auto;margin-bottom:14px;border-radius:5px;mix-blend-mode:multiply}
.zone-ink .ev-spot,.zone-deep .ev-spot{mix-blend-mode:normal}
.ev-find-title{font-family:var(--display);font-weight:400;font-size:20px;line-height:1.2;letter-spacing:-.01em;text-wrap:balance}
.ev-find-body{margin-top:10px;font-size:14.5px;line-height:1.6;color:var(--muted)}
.ev-cite{margin-top:auto;padding-top:16px}
.ev-cite cite{font-style:normal;font-family:var(--body);font-weight:600;font-size:11.5px;line-height:1.45;color:var(--faint)}
.zone-ink .ev-find,.zone-deep .ev-find{border-top-color:rgba(255,255,255,.2)}
.zone-ink .ev-cite cite,.zone-deep .ev-cite cite{color:rgba(255,255,255,.62)}
/* polish idea 14: Career, Five pillars and Self-esteem show two findings of their own (.ev-2), two across and a little narrower so the
   claims keep a readable line. A finding with two sources stacks both citations at the foot of its column. */
.ev-2 .ev-list{grid-template-columns:repeat(2,minmax(0,1fr));max-width:880px;margin-inline:auto;gap:34px 44px}
.ev-cite+.ev-cite{margin-top:0;padding-top:6px}
@media (max-width:1100px){ .ev-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 28px} }
@media (max-width:640px){ .ev-list,.ev-2 .ev-list{grid-template-columns:minmax(0,1fr);gap:26px} .ev-find-title{font-size:19px} .ev-spot{max-width:168px;margin-bottom:12px} }



/* ===== 06-flow.css ===== */
/* ==================================================================
   The drawn three-node flow (src/site/flow.mjs): answer, free result, paid report.
   Wayne, Sep 22, 2026, on the three paragraphs it replaced: "that's a shit ton of words for something that's intuitive… it can be
   just visual things or like a flow chart or something." Used on the home page and on /assessments/.
   Three white cards in a row, joined by hairline arrows that live in the gutters between them. Below 820px the whole thing turns a
   quarter turn: one card above the next, each arrow pointing down into the gap. Not one image file, so it is sharp at any size.
   ================================================================== */
.flow{text-align:center}
.flow-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:64px;margin-top:26px;list-style:none;counter-reset:flow}
.flow-step{position:relative;counter-increment:flow;padding:26px 20px 24px;background:#fff;border:1px solid var(--line);border-radius:14px}
/* the step number, drawn as a small blue disc over the card's top edge */
.flow-step::before{content:counter(flow);position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--blue-deep);color:#fff;
  font-weight:800;font-size:12.5px;line-height:1;font-variant-numeric:lining-nums}
.flow-art{display:block;width:112px;margin:0 auto}
.flow-svg{display:block;width:112px;height:112px}
/* the price chip in the card's own corner, so the money reads at a glance: free, free, then the price */
.flow-step .tag{position:absolute;top:12px;right:12px}
.flow-title{margin-top:14px;font-family:var(--display);font-weight:400;font-size:20px;line-height:1.15;letter-spacing:-.01em}
.flow-note{margin-top:6px;font-size:13.5px;line-height:1.45;color:var(--muted);text-wrap:balance}
/* the arrow between two nodes: it sits in the gutter, level with the middle of the icons */
.flow-arrow{position:absolute;top:66px;left:100%;width:64px;height:12px;display:block}
.flow-arrow svg{display:block;width:100%;height:12px}
.flow-limit{max-width:52ch;margin:26px auto 0;font-size:13.5px;line-height:1.6;color:var(--muted)}
.flow-cta{justify-content:center;margin-top:20px}

@media (max-width:820px){
  /* one card above the next, the icon and its words side by side so a step stays on one screen instead of three */
  .flow-steps{grid-template-columns:minmax(0,1fr);gap:46px;margin-top:22px}
  .flow-step{display:grid;grid-template-columns:96px minmax(0,1fr);column-gap:18px;row-gap:6px;
    align-items:center;align-content:center;padding:20px 18px;text-align:left}
  .flow-step::before{top:-13px;left:14px;transform:none}
  .flow-art,.flow-svg{width:96px}
  .flow-svg{height:96px}
  .flow-art{grid-row:1 / span 2}
  .flow-title{margin-top:0}
  .flow-note{text-wrap:wrap}
  .flow-arrow{top:100%;left:66px;width:46px;height:12px;transform:translate(-50%,17px) rotate(90deg)}
}


/* ===== 07-cta.css ===== */
/* ==========================================================================
   07-cta.css · calls to action, CTA round 1 (Wayne, Sep 29, 2026)
   Built to docs/mockups/site/cta-round-1/ (B2, C1, C2, C3, C5, C6). Markup: app/ui.js (ctaPick, ctaTypeEnd, ctaTraitEnd,
   ctaSample, ctaNudge, ctaSticky). Each piece is scoped under the body classes of the pages that carry it.
   ========================================================================== */

/* shared type for the pieces */
:is(.page-home,.page-fourletter-type,.page-trait,.page-sample) :is(.cta-h2,.cta-h3,.cta-line){text-wrap:pretty}
:is(.page-fourletter-type,.page-trait) .cta-h2{font:300 clamp(26px,4vw,38px)/1.1 "Source Serif 4",serif;letter-spacing:-.015em;margin:0;color:#0D1420}
:is(.page-fourletter-type,.page-trait,.page-sample) .cta-line{margin:10px 0 0;font:400 16.5px/1.55 Figtree,sans-serif;color:#515A6B;max-width:56ch}
:is(.page-fourletter-type,.page-trait) .cta-big{font-size:16.5px;padding:16px 26px}

/* B2: the recommended-first card over the home page's list of assessments */
.page-home .cta-pick{margin:26px auto 0;max-width:640px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;text-align:left;
  background:#fff;color:#0D1420;border:1px solid #E3E7EE;border-radius:14px;padding:22px 20px 18px;position:relative}
.page-home .cta-pick-tag{position:absolute;top:-11px;left:18px;background:#F5A623;color:#0D1420;font:800 11px/1 Figtree,sans-serif;letter-spacing:.06em;text-transform:uppercase;border-radius:5px;padding:5px 9px}
.page-home .cta-pick-body{display:flex;flex-direction:column;gap:3px}
.page-home .cta-pick-body b{font:700 18px/1.25 Figtree,sans-serif}
.page-home .cta-pick-body span{font:500 13.5px/1.4 Figtree,sans-serif;color:#515A6B}
.page-home .cta-pick .btn{margin-left:auto}
.page-home .cta-hint{margin:14px auto 0;font:500 14px/1.5 Figtree,sans-serif;color:#515A6B}
@media (max-width:640px){.page-home .cta-pick .btn{margin-left:0;width:100%;justify-content:center}}

/* C1: the band at the end of a four-letter type page */
.page-fourletter-type .cta-end{padding:48px 0}
.page-fourletter-type .cta-end-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:22px 40px}

/* C2: the card at the end of a trait page, with a question mark where the reader's score would be */
.page-trait .cta-end{padding:48px 0}
.page-trait .cta-meter-card{max-width:720px;margin:0 auto;padding:30px}
.page-trait .cta-meter{position:relative;height:30px;margin-bottom:18px}
.page-trait .cta-meter-track{position:absolute;left:0;right:0;top:13px;height:5px;display:flex;gap:3px}
.page-trait .cta-meter-seg{flex:1;border-radius:3px;background:#C0C7D2}
.page-trait .cta-meter-seg:nth-child(2){background:#B9DCFA}
.page-trait .cta-meter-seg:nth-child(3){background:#2288E0}
.page-trait .cta-meter-q{position:absolute;left:58%;top:0;width:30px;height:30px;margin-left:-15px;border-radius:50%;background:#fff;border:2px dashed #0A5FA8;
  color:#0A5FA8;font:800 15px/26px Figtree,sans-serif;text-align:center;font-style:normal;box-sizing:border-box}
.page-trait .cta-meter-card .btn-row{margin-top:20px}

@media (max-width:640px){
  :is(.page-fourletter-type,.page-trait) .cta-end .btn-row .btn{width:100%;justify-content:center}
  .page-trait .cta-meter-card{padding:24px 20px}
}

/* C3: the card inside the sample report */
.page-sample .cta-sample-zone{padding:8px 0 28px}
.page-sample .cta-inline{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 30px;background:#E6F2FE;border:1px solid #B9DCFA;border-radius:14px;padding:22px 24px}
.page-sample .cta-inline .eyebrow{margin:0}
.page-sample .cta-h3{font:400 24px/1.15 "Source Serif 4",serif;margin:6px 0 0;color:#0D1420}
@media (max-width:640px){.page-sample .cta-inline .btn{width:100%;justify-content:center}}

/* C6: the slim nudge between two home sections */
.page-home .cta-nudge{padding:26px 0}
.page-home .cta-nudge-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 30px}
.page-home .cta-nudge-t{margin:0;font:300 26px/1.2 "Source Serif 4",serif;color:#0D1420}
@media (max-width:640px){.page-home .cta-nudge .btn{width:100%;justify-content:center}}

/* C5: the phone bar on reading pages. The last child of <main>, sticky to the foot of the screen, so it rests above the footer
   when the page ends instead of covering it. Phones only; closed with its x for the rest of the visit (app/cta-sticky.js). */
:is(.page-fourletter,.page-traits,.page-types,.page-people,.page-sample) .cta-sticky{display:none}
@media (max-width:640px){
  :is(.page-fourletter,.page-traits,.page-types,.page-people,.page-sample) .cta-sticky{
    position:sticky;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:40;margin:0 12px 12px;
    display:flex;align-items:center;gap:10px;padding:8px 6px 8px 16px;border-radius:14px;
    background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%);
    border:1px solid rgba(13,20,32,.08);box-shadow:0 14px 40px rgba(13,20,32,.14);font:700 14px/1.3 Figtree,sans-serif;color:#0D1420}
  :is(.page-fourletter,.page-traits,.page-types,.page-people,.page-sample) .cta-sticky[hidden]{display:none}
  .cta-sticky .cta-sticky-line{flex:1;min-width:0}
  .cta-sticky .btn{flex:none}
  .cta-sticky .cta-sticky-x{flex:none;width:36px;height:36px;border:0;background:transparent;border-radius:10px;color:#515A6B;font:400 22px/1 Figtree,sans-serif;cursor:pointer}
  .cta-sticky .cta-sticky-x:focus-visible{outline:2px solid #0A5FA8;outline-offset:1px}
}

/* The phone "Start now" bar stays out of the way of the open menu, whose last items (Sign out) it covered (customer test, Oct 8, 2026). */
body:has(details.menu[open]) [data-cta-sticky]{display:none}


/* ===== 10-home.css ===== */
/* ==========================================================================
   10-home.css · owner: Home agent
   Pages: / (index.html), built by src/pages/home.mjs.
   Only this agent edits this file. Shared pieces live in 00-base.css and
   05-components.css (read them, never edit them); see docs/SITE_KIT.md.
   Scope every rule under the page body class (.page-home) so pages cannot
   leak into each other.
   The home in Truity's order, each section on its own zone (05-components.css .zone-*: deep, warm, blue, white, ink, warm, white,
   deep), in the editorial look of docs/mockups/site/home.html: thin Source Serif display, Figtree labels, hairline rules, one solid
   button per band, the floating glass card for the sample report. Pictures are phImage() stand-ins (.ph-img).
   ========================================================================== */

/* ---------------------------------------------------------------- the page's own vocabulary (mockup: .eyebrow, .apparatus) */
.page-home .hm-label{display:block;font-family:var(--body);font-weight:800;font-size:10px;line-height:1.4;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.page-home .hm-amber{font-weight:800;font-size:10px;line-height:1.4;letter-spacing:.1em;text-transform:uppercase;color:#9A5B06}
.page-home .hm-app{font-weight:700;font-size:9.5px;line-height:1.6;letter-spacing:.05em;text-transform:uppercase;color:#858DA0}
.page-home .hm-app b{font-weight:800;color:var(--muted)}
.page-home .hm-fig svg{display:block;width:100%;height:auto;overflow:visible}
/* the closing band runs straight into the footer: no white strip between them (the base puts 96px after main) */
.page-home main+.site-footer{margin-top:0}

/* ---------------------------------------------------------------- textured grounds (assets/img/ground/, built by tools/ground.py)
   Wayne, Sep 22, 2026: "we can use the generated photos as textured backgrounds in some of the sections on the homepage."
   The three photographs the gouache replaced are the ground of three bands now. Each file IS the finished ground already -
   grayscaled, blurred past recognition, squeezed into a narrow tonal range and tinted to that band's own color - so nothing here
   veils, fades or blends it. That is what makes the contrast a number instead of a guess: py tools/ground.py --check measures
   every text color against the lightest and the darkest pixel of the file on disk and prints the worst of the two.
     hero    white headline 8.65:1 · lede and chips 7.32:1 · amber kicker 6.41:1     (AA wants 4.5:1, or 3:1 for large text)
     sample  ink heading 14.90:1 · muted body 5.61:1 · blue eyebrow 5.27:1
     end     white headline 9.59:1 · the line under it 6.52:1 · the ghost button 9.59:1
   The zone's flat color underneath is the fallback, so a band whose file never arrives still reads correctly.
   Backgrounds and not <img> tags: a photograph washed down to a texture says nothing a screen reader could be told, and an <img>
   with nothing to say is exactly what check.mjs should refuse. 7 KB each, against the 96 KB and 172 KB photographs they come from.
   Three bands and no more, and they are the first, the middle and the last, so the page keeps a rhythm instead of a wash. The four
   left plain are left plain on purpose: the tests, testimonial and article bands are grids of white cards, where a ground shows only
   in the gutters and costs a file for it, and the research band is four citations a doubtful reader is meant to stop and read. */
.page-home .hm-ground{background-repeat:no-repeat;background-position:50% 50%;background-size:cover}
.page-home .hm-hero.hm-ground{background-image:url(/assets/img/ground/hero.webp)}
.page-home .hm-proof.hm-ground{background-image:url(/assets/img/ground/sample.webp)}
.page-home .hm-end.hm-ground{background-image:url(/assets/img/ground/end.webp)}

/* D50 placeholder tag (review mode only): a dashed pill on every stand-in, so nobody mistakes one for real content */
.page-home .home-ph-tag{display:inline-flex;align-items:center;padding:3px 9px;border:1px dashed var(--ink);border-radius:999px;background:#fff;color:var(--ink);
  font-weight:800;font-size:9.5px;line-height:1.3;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;vertical-align:middle}
/* review mode only: the price is not settled (amber = worth your attention) */
.page-home .hm-price-tag{display:inline-flex;align-items:center;margin-left:4px;padding:2px 8px;border:1px dashed #E08600;border-radius:999px;background:#FDF2E3;color:#9A5B06;
  font-weight:800;font-size:9.5px;line-height:1.3;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;vertical-align:1px}

/* The site's bar is never styled here: the home page has the bar every page has, the name at its top left, at the same height
   (D139, Sep 26, 2026). test/home.test.mjs fails on any .page-home rule that reaches the bar or changes --header-h. */

/* ---------------------------------------------------------------- 1. hero (deep): the words left, the story and its stamp right */
.page-home .hm-hero{padding-block:76px 96px;overflow:hidden}
.page-home .hm-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:center}
/* 62px, as the mockup, but never so wide that a word runs out of its column: the self-hosted Source Serif 4 has no optical-size
   axis, so it sets wider than the mockup's display cut. The D154 headline wraps to three lines at 1440px, as round 5 drew it. */
.page-home .hm-hero-text{container-type:inline-size}
.page-home .hm-title{margin-top:16px;font-family:var(--display);font-weight:300;font-size:62px;font-size:min(62px,10.4cqi);line-height:1.03;letter-spacing:-.022em;color:#fff}
/* D156: "except yourself" drops in once from above and settles; "yourself" is amber (upright, a step heavier), with a hand-drawn
   squiggle that draws in after the drop and redraws with each new painting (app/hero-story.js toggles is-a / is-b, two keyframe
   names so the browser restarts it). Transform, opacity and stroke-dashoffset only; nothing moves under reduced motion. */
.page-home .hm-drop{display:inline-block;white-space:nowrap}
.page-home .hm-clip{display:inline-block;clip-path:inset(-.06em -.5em -.9em -.5em)}   /* each word slides down from behind its own line, never across the one above */
.page-home .hm-drop-w,.page-home .hm-self{display:inline-block;animation:hm-drop 1.25s cubic-bezier(.3,.7,.3,1) .45s both}
.page-home .hm-self{position:relative;color:var(--amber);font-weight:400;animation-delay:.7s}
.page-home .hm-squiggle{position:absolute;left:-3%;bottom:-.2em;width:106%;height:.3em;overflow:visible;fill:none;stroke:var(--amber);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.page-home .hm-squiggle path{vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;animation:hm-squiggle .9s cubic-bezier(.5,.05,.3,1) 1.85s both}
.page-home .hm-self.is-a .hm-squiggle path{animation:hm-squiggle-a 1.5s cubic-bezier(.5,.05,.3,1) .1s both}
.page-home .hm-self.is-b .hm-squiggle path{animation:hm-squiggle-b 1.5s cubic-bezier(.5,.05,.3,1) .1s both}
@keyframes hm-drop{0%{opacity:0;transform:translateY(-1.15em) rotate(-3deg)}30%{opacity:1}58%{transform:translateY(.07em) rotate(.6deg)}78%{transform:translateY(-.025em) rotate(-.2deg)}100%{opacity:1;transform:none}}
@keyframes hm-squiggle{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes hm-squiggle-a{0%{stroke-dashoffset:0}34%{stroke-dashoffset:-1}34.1%{stroke-dashoffset:1}100%{stroke-dashoffset:0}}
@keyframes hm-squiggle-b{0%{stroke-dashoffset:0}34%{stroke-dashoffset:-1}34.1%{stroke-dashoffset:1}100%{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){
  .page-home .hm-drop-w,.page-home .hm-self,.page-home .hm-squiggle path,.page-home .hm-self.is-a .hm-squiggle path,.page-home .hm-self.is-b .hm-squiggle path{animation:none}
  .page-home .hm-squiggle path{stroke-dashoffset:0}
}
.page-home .hm-lede{margin-top:20px;font-size:21px;line-height:1.5;max-width:40ch;font-weight:400;color:rgba(255,255,255,.92)}   /* brighter and less thin on navy (Oct 7, 2026): "hard on tired eyes" */
.page-home .hm-cta{margin-top:32px;gap:20px}
.page-home .hm-cta .btn,.page-home .hm-end-btns .btn{min-height:0;padding:14px 24px}
.page-home .hm-chips{margin-top:24px;gap:8px}
.page-home .hm-hero .chip{padding:5px 12px;font-size:11.5px;background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.26);color:rgba(255,255,255,.9)}
/* the proof under the buttons (D154, as round 5 drew it): a hairline, then the million-times line and the comparison chip, a step
   quieter than the words above them */
.page-home .hm-hero-proof{margin-top:26px;padding-top:16px;border-top:1px solid rgba(255,255,255,.16);opacity:.86}
.page-home .hm-hero-proof .hm-reach{margin-top:0;font-size:13px}
.page-home .hm-hero-proof .hm-chips{margin-top:10px}
/* The price, said upfront under the buttons (Oct 7, 2026): first-time visitors felt it was hidden. */
.page-home .hm-hero-proof .hm-hero-price{margin-top:8px;font-size:13px;font-weight:600;line-height:1.45;color:rgba(255,255,255,.92)}
/* The story's timings live here, and app/hero-story.js reads the fade from here too. Wayne on round 5 (4.5s a painting, a 0.9s
   fade): "a bit longer duration per scene. And the fade transition a bit longer also". */
.page-home .hm-hero-art{position:relative;--story-dwell:7s;--story-fade:1.8s}
/* a soft disc behind the story, as Truity sets its hero figure on a round shape */
.page-home .hm-hero-art::before{content:"";position:absolute;right:-72px;top:-64px;width:340px;height:340px;border-radius:50%;background:#0A5FA8;opacity:.7}
.page-home .hm-hero-art::after{content:"";position:absolute;left:22%;bottom:-128px;width:190px;height:190px;border-radius:50%;border:1px solid rgba(255,255,255,.2)}
.page-home .hm-hero-photo{z-index:1;border-radius:18px;box-shadow:0 30px 70px rgba(2,12,28,.45)}
.page-home .hm-seal{position:absolute;z-index:2;left:-58px;bottom:-46px;width:156px;height:156px;transform:rotate(-12deg);filter:drop-shadow(0 10px 22px rgba(2,12,28,.35))}
.page-home .hm-seal-text{font-family:var(--body);font-weight:800;font-size:10.5px;letter-spacing:.2em;fill:#0D1420}

/* THE STORY (D154): six paintings stacked in the frame, the one showing on top. The first is showing in the markup (is-on), and
   until app/hero-story.js arms the frame the other five are out of the layout, so a page with no script rests on the first, whole
   and still. With the script, the five load only once it arms, after the first. The crossfade is both paintings' opacity at once: the arriving one eases out (quick to cover), the
   leaving one eases in (slow to go), so mid-fade the frame shows at most about 6% of its ground. */
.page-home .hm-story{isolation:isolate}
.page-home .hm-story-slides{position:absolute;inset:0}
.page-home .hm-story-slide{position:absolute;inset:0;opacity:0;transition:opacity var(--story-fade) cubic-bezier(.55,.085,.68,.53)}
.page-home .hm-story-slide.is-on{z-index:2;opacity:1;transition-timing-function:cubic-bezier(.25,.46,.45,.94)}
.page-home .hm-story-slide.is-leaving{z-index:1}
.page-home .hm-story:not(.is-armed) .hm-story-slide:not(.is-on){display:none}
.page-home .hm-story-slide img{transform-origin:50% 50%}
.page-home .hm-story .ph-img-tag{z-index:3}
/* THE MOTION, as each painting comes into view (Wayne: "a bit of motion as the picture goes into view"). An arriving painting
   starts 7% closer and a little to one side and eases out to where it rests over its whole time on screen (its hold plus the fade
   out), the side alternating from one painting to the next. Its start is set while it is still transparent, so nothing on screen
   jumps. The first painting has been seen at rest before the script arms, so its first turn (is-first) drifts out from where it
   rests instead. A painting picked from the row shows at rest (is-rest). Only with the script (is-armed), only transform, and
   nothing at all for reduced motion. It holds with the row: under a mouse, with keyboard focus inside, off screen, stopped. */
@media (prefers-reduced-motion:no-preference){
  .page-home .hm-story.is-armed .hm-story-slide:is(.is-on,.is-leaving) img{will-change:transform;animation-name:hm-story-in-a;animation-duration:calc(var(--story-dwell) + var(--story-fade));animation-timing-function:cubic-bezier(.25,.46,.45,.94);animation-fill-mode:both}
  .page-home .hm-story.is-armed .hm-story-slide:nth-child(even):is(.is-on,.is-leaving) img{animation-name:hm-story-in-b}
  .page-home .hm-story.is-armed .hm-story-slide.is-first:is(.is-on,.is-leaving) img{animation-name:hm-story-drift;animation-timing-function:cubic-bezier(.45,.05,.55,.95)}
  .page-home .hm-story.is-armed .hm-story-slide.is-rest:is(.is-on,.is-leaving) img{animation-name:none;will-change:auto}
  .page-home .hm-hero-art:is(.is-paused,.is-still) .hm-story-slide img{animation-play-state:paused}
}
@keyframes hm-story-in-a{from{transform:translate(1.8%,-.9%) scale(1.07)}to{transform:none}}
@keyframes hm-story-in-b{from{transform:translate(-1.8%,.9%) scale(1.07)}to{transform:none}}
@keyframes hm-story-drift{from{transform:none}to{transform:translate(1.2%,-.5%) scale(1.04)}}
/* The row under the frame: one thin segment per painting, the playing one filling over its hold, and the pause button at its end.
   Right on a wide screen and left on a phone, clear of the stamp either way. It only works with the script, so it is hidden in the
   markup and shown by it. The fill ending is what moves the story on, so the row and the paintings never disagree. */
.page-home .hm-story-bar{position:absolute;right:-4px;top:calc(100% + 14px);z-index:3;display:flex;align-items:center}
.page-home .hm-story-bar[hidden]{display:none}
.page-home .hm-story-seg{position:relative;width:36px;height:30px;padding:0;border:0;background:transparent;cursor:pointer}
.page-home .hm-story-seg::before,.page-home .hm-story-seg i{content:"";position:absolute;left:3px;right:3px;top:13px;height:4px;border-radius:2px}
.page-home .hm-story-seg::before{background:rgba(255,255,255,.26);transition:background-color .2s ease}
.page-home .hm-story-seg:hover::before{background:rgba(255,255,255,.5)}
.page-home .hm-story-seg i{background:#fff;transform:scaleX(0);transform-origin:0 50%}
.page-home .hm-story-seg.is-done i{transform:none}
.page-home .hm-story-seg.is-on i{animation-name:hm-story-fill;animation-duration:var(--story-dwell);animation-timing-function:linear;animation-fill-mode:forwards}
.page-home .hm-hero-art.is-paused .hm-story-seg.is-on i{animation-play-state:paused}
.page-home .hm-hero-art.is-still .hm-story-seg.is-on i{animation-name:none;transform:none}
@keyframes hm-story-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.page-home .hm-story-play{display:grid;place-items:center;width:30px;height:30px;margin-left:8px;padding:0;border:1px solid rgba(255,255,255,.3);border-radius:50%;background:transparent;cursor:pointer}
.page-home .hm-story-play:hover{border-color:rgba(255,255,255,.7)}
.page-home .hm-story-play-i{width:10px;height:11px;border-left:3px solid #fff;border-right:3px solid #fff}
.page-home .hm-story-play[data-stopped="true"] .hm-story-play-i{width:0;height:0;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent #fff;margin-left:3px}
.page-home .hm-story-seg:focus-visible,.page-home .hm-story-play:focus-visible{outline:2px solid #fff;outline-offset:1px}
@media (prefers-reduced-motion:reduce){.page-home .hm-story-slide,.page-home .hm-story-seg::before{transition:none}}
@media print{.page-home .hm-story-bar,.page-home .hm-story-slide:not(.is-on){display:none}}

/* ---------------------------------------------------------------- 2. the tests (warm): Truity's icon grid, one white card per test */
/* D99: the assessments grid in the registry's three groups, each under its own heading, so the three personality ones read as one
   group with a lead rather than as three of seven equals. */
.page-home .hm-tgroup + .hm-tgroup{margin-top:38px}
.page-home .hm-tgroup-name{font-weight:800;font-size:10.5px;letter-spacing:.14em;line-height:1.4;text-transform:uppercase;color:var(--muted)}
.page-home .hm-tgroup-name + .hm-tgrid{margin-top:16px}
/* inside a group the tracks stay the page's three, so a two-assessment group lines up with the one above it instead of centring */
.page-home .hm-tgroup .hm-tgrid.is-1,.page-home .hm-tgroup .hm-tgrid.is-2{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none;margin-inline:0}
.page-home .hm-tgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.page-home .hm-tgrid.is-2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:860px;margin-inline:auto}
.page-home .hm-tgrid.is-1{grid-template-columns:minmax(0,1fr);max-width:430px;margin-inline:auto}
.page-home .hm-test{display:flex;align-items:flex-start;gap:20px;padding:24px 24px 22px;background:#fff;border:1px solid rgba(154,91,6,.12);border-radius:var(--r);
  box-shadow:0 1px 2px rgba(13,20,32,.03),0 10px 30px rgba(120,80,20,.06)}
.page-home .hm-test-icon{flex:none;width:104px;border-radius:12px;background:#fff}
/* the review tag, shrunk to fit a 104px spot illustration */
.page-home .hm-test-icon .ph-img-tag{left:50%;top:auto;bottom:6px;transform:translateX(-50%);padding:2px 6px;font-size:8px;letter-spacing:.08em}
.page-home .hm-test-body{min-width:0}
.page-home .hm-test-name{font-family:var(--display);font-weight:400;font-size:25px;line-height:1.1;letter-spacing:-.015em}
.page-home .hm-test-tag{margin-top:7px;font-weight:800;font-size:10.5px;line-height:1.4;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.page-home .hm-test-meta{margin-top:10px;font-size:13.5px;line-height:1.45;color:var(--muted)}
.page-home .hm-test-go{display:inline-block;margin-top:14px;font-weight:700;font-size:14.5px;color:#0A5FA8;text-decoration:none}
.page-home .hm-test-go:hover{color:#083F70;text-decoration:underline}
/* Sep 26, 2026: this link is stretched over the whole card, and the card answers the pointer, a press, focus and arriving on a
   phone, with the same look at rest: 39-card-tactile.css (app/card-tactile.js). */

/* ---------------------------------------------------------------- 3. the sample report (blue): the photo, the card over its edge, the steps */
.page-home .hm-proof-row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center}
.page-home .hm-proof-photo{grid-column:1;grid-row:1;border-radius:18px}
.page-home .hm-proof-photo img{object-position:70% 50%}
/* solid white where it overlaps the photo: the glass blur would smear the picture's edge through the card */
.page-home .hm-sample{grid-column:2;grid-row:1;z-index:1;margin-left:-64px;padding:22px 24px 20px;background:#F6F9FD;-webkit-backdrop-filter:none;backdrop-filter:none}
.page-home .hm-plate{margin-top:12px;padding:18px 18px 14px;background:#fff;border:1px solid #E8EDF4;border-radius:10px}
.page-home .hm-plate-title{font-family:var(--display);font-weight:400;font-size:20px;line-height:1.12;letter-spacing:-.015em;text-wrap:wrap}
.page-home .hm-plate .hm-fig{margin-top:16px}
.page-home .hm-sample>.hm-app{margin-top:12px}
/* what is free and what is paid: a plain line under the apparatus */
.page-home .hm-price{margin-top:10px;padding-top:10px;border-top:1px solid #E3E7EE;font-size:13.5px;font-weight:600;line-height:1.5;color:var(--ink)}
.page-home .hm-open{margin-top:6px;font-size:12.5px}
.page-home .hm-sample-link{margin-top:8px}
.page-home .hm-sample-link a{font-weight:700;font-size:14px;color:#0A5FA8;text-decoration:none}
.page-home .hm-sample-link a:hover{color:#083F70;text-decoration:underline}
.page-home .hm-phone{display:none}
/* the drawn flow under the card (src/site/css/06-flow.css): only its place on this page belongs here */
.page-home .flow{margin-top:60px;padding-top:30px;border-top:1px solid rgba(10,95,168,.2)}
.page-home .hm-flow-kicker{color:#0A5FA8}
/* D117: the line after the price saying what it buys, part of the same price block */
.page-home .hm-worth{margin-top:4px;font-size:13.5px;font-weight:500;line-height:1.5;color:var(--ink)}

/* ---------------------------------------------------------------- 3b. three real pages of the sample report (D117)
   Under the sample card and above the flow (src/pages/home.mjs pagesBlock). Each page is the report's own markup (a blind-spot
   facet, a type-guide card, the at-work panel), which the report styles only under its own body classes, so this is how those
   same pieces read as a page on this one: a white sheet with a hairline, the page's own type and accents, and the top of the page
   shown and then stopped with an ellipsis (line clamps, flat, no fade). What a clamp hides is also hidden from a screen reader,
   so what is read aloud is what is seen. The three sheets stretch to one height so the captions line up. */
.page-home .hm-pages{margin-top:64px;padding-top:48px;border-top:1px solid rgba(10,95,168,.2)}
.page-home .hm-pages-head{max-width:62ch;margin:0 auto 34px;text-align:center}
.page-home .hm-pages-title{margin:0;font-family:var(--display);font-weight:300;font-size:clamp(26px,2.6vw,34px);line-height:1.1;letter-spacing:-.018em;color:var(--ink)}
.page-home .hm-pages-lede{margin:12px auto 0;max-width:56ch;font-size:16px;line-height:1.55;color:var(--muted)}
.page-home .hm-pages-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:stretch}
.page-home .hm-page{min-width:0;display:flex;flex-direction:column}
.page-home .hm-page-lab{margin:0 0 10px;font-family:var(--body);font-size:11px;font-weight:800;line-height:1.4;letter-spacing:.1em;text-transform:uppercase;color:#083F70}
.page-home .hm-sheet{flex:1;position:relative;overflow:hidden;background:#fff;border:1px solid #E3E7EE;border-radius:14px;box-shadow:0 18px 40px -28px rgba(8,63,112,.45)}
.page-home .hm-page-cap{margin:14px 2px 0;font-size:15px;line-height:1.5;color:var(--ink)}
.page-home .hm-sheet p{margin:0}
.page-home .hm-sheet .small,.page-home .hm-sheet .flg-card-body p{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;font-size:14.5px;line-height:1.56;color:var(--ink)}
/* the blind spot: the trait's name, then the facet as the report draws it, an amber rule down its side and an amber label */
.page-home .hm-page-trait{padding:22px 22px 0;font-family:var(--display);font-weight:400;font-size:22px;line-height:1.15;letter-spacing:-.012em}
.page-home .hm-sheet .ch-facet{margin:14px 22px 24px;padding:0 0 0 16px;background:none;border:0;border-left:2px solid var(--amber);border-radius:0;box-shadow:none}
.page-home .hm-sheet .ch-facet .box-title{margin:0;font-family:var(--body);font-size:11.5px;font-weight:800;line-height:1.4;letter-spacing:.09em;text-transform:uppercase;color:#9A5B06}
.page-home .hm-sheet .ch-facet .small{margin-top:8px;-webkit-line-clamp:12}
/* the guide card: its painting across the top, its heading as the report's blue tab, the start of its words */
.page-home .hm-sheet .flg-card{display:flex;flex-direction:column}
.page-home .hm-sheet .flg-card-art{order:-1;margin:0}
.page-home .hm-sheet .flg-card-art img{display:block;width:100%;height:auto;aspect-ratio:16 / 10;object-fit:cover;object-position:50% 45%;background:#EFF2F7}
.page-home .hm-sheet .flg-card-tab{align-self:flex-start;margin:18px 22px 0;padding:6px 11px;border-radius:999px;background:#0A5FA8;color:#fff;font-family:var(--body);font-size:12.5px;font-weight:700;line-height:1;letter-spacing:.02em}
.page-home .hm-sheet .flg-card-body{padding:12px 22px 22px}
.page-home .hm-sheet .flg-card-body p{-webkit-line-clamp:5}
.page-home .hm-sheet .flg-card-body p+p{display:none}
/* the at-work panel: its heading on the amber wash an open panel has in the report, then what may feel easy and where friction
   may show up, one above the other */
.page-home .hm-sheet .compat{display:block}
.page-home .hm-sheet .compat .compat-ctx{background:none;border:0;border-radius:0;box-shadow:none}
.page-home .hm-sheet .compat .compat-ctx-head{display:block;padding:16px 22px;cursor:auto;background:#FDF2E3;border-bottom:1px solid #E3E7EE}
.page-home .hm-sheet .compat .compat-ctx-title{font-size:20px}
.page-home .hm-sheet .compat .compat-ctx-body{padding:18px 22px 22px}
.page-home .hm-sheet .compat .compat-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"easy" "friction";gap:16px}
.page-home .hm-sheet .compat .compat-bring,.page-home .hm-sheet .compat .compat-alike,.page-home .hm-sheet .compat .compat-friction .small+.small{display:none}
.page-home .hm-sheet .compat .small{-webkit-line-clamp:5}
.page-home .hm-pages-foot{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:8px 22px;margin-top:34px;text-align:center}
.page-home .hm-pages-total{margin:0;font-size:17px;font-weight:600;line-height:1.45;color:var(--ink)}
.page-home .hm-pages-link{font-weight:700;font-size:15px;color:#0A5FA8;text-decoration:none}
.page-home .hm-pages-link:hover{color:#083F70;text-decoration:underline}
@media (max-width:1100px){
  .page-home .hm-pages-list{grid-template-columns:minmax(0,1fr);max-width:520px;margin-inline:auto;gap:32px}
}
@media (max-width:820px){
  .page-home .hm-pages{margin-top:48px;padding-top:36px}
  .page-home .hm-pages-head{margin-bottom:26px}
  .page-home .hm-page-trait{padding:18px 18px 0}
  .page-home .hm-sheet .ch-facet{margin:12px 18px 20px}
  .page-home .hm-sheet .ch-facet .small{-webkit-line-clamp:9}
  .page-home .hm-sheet .flg-card-tab{margin:16px 18px 0}
  .page-home .hm-sheet .flg-card-body{padding:10px 18px 18px}
  .page-home .hm-sheet .compat .compat-ctx-head{padding:14px 18px}
  .page-home .hm-sheet .compat .compat-ctx-body{padding:16px 18px 18px}
  .page-home .hm-pages-foot{flex-direction:column;align-items:center;gap:10px;margin-top:28px}
}

/* ---------------------------------------------------------------- 4. what the research has found (white)
   The shared evidence band (.ev in 05-components.css), which replaced the "As seen in" placeholder row on Sep 22, 2026. */
.page-home .hm-voices .zone-head{display:flex;flex-direction:column;align-items:center;gap:12px}

/* ---------------------------------------------------------------- 5. the science (ink): words and picture, three facts, the promise */
.page-home .hm-sci-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:64px;align-items:center}
.page-home .hm-sci-h2{margin-top:14px;font-family:var(--display);font-weight:300;font-size:clamp(30px,3.6vw,44px);line-height:1.08;letter-spacing:-.02em}
.page-home .hm-sci-sub{margin-top:18px;max-width:52ch;font-size:16px;line-height:1.65}
.page-home .hm-sci-link{margin-top:18px}
.page-home .hm-sci-link a{font-weight:700;font-size:14.5px;text-decoration:none}
.page-home .hm-sci-link a:hover{color:#fff;text-decoration:underline}
.page-home .hm-sci-pic{border-radius:18px}
.page-home .hm-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin-top:64px}
.page-home .hm-facts li{padding-top:22px;border-top:1px solid rgba(255,255,255,.2)}
.page-home .zone-ink .hm-fact-n{font-family:var(--display);font-weight:300;font-size:58px;line-height:1;letter-spacing:-.025em;color:#fff;font-variant-numeric:lining-nums tabular-nums}
.page-home .zone-ink .hm-fact-unit{margin-top:10px;font-weight:800;font-size:10.5px;line-height:1.4;letter-spacing:.14em;text-transform:uppercase;color:var(--amber-pale)}
.page-home .hm-fact-title{margin-top:14px;font-family:var(--display);font-weight:400;font-size:20px;line-height:1.2;letter-spacing:-.01em}
.page-home .hm-fact-body{margin-top:8px;font-size:14.5px;line-height:1.6}
/* The privacy promise: a heading, then the three promises as three drawn marks (src/pages/home.mjs markNotSold, markPooled,
   markNoTracking), then the link to the privacy page. It was a heading and one 78-word paragraph until Sep 22, 2026. */
  border:1px solid rgba(255,255,255,.14);border-radius:var(--r);background:rgba(255,255,255,.04)}

/* ---------------------------------------------------------------- 6. what people say (warm, review mode only) */
.page-home .hm-count{display:flex;align-items:center;gap:10px;margin-top:4px;font-weight:800;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.page-home .hm-count-n{font-family:var(--display);font-weight:300;font-size:34px;letter-spacing:0;line-height:1;color:var(--ink)}
.page-home .hm-quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.page-home .hm-quote-card{display:flex;flex-direction:column;padding:26px 26px 22px;background:#fff;border:1px solid rgba(154,91,6,.12);border-radius:var(--r)}
.page-home .hm-stars{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;font-weight:800;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:#858DA0}
.page-home .hm-stars-svg{width:92px;height:auto}
.page-home .hm-quote{margin-top:18px;font-family:var(--quote);font-style:italic;font-weight:400;font-size:21px;line-height:1.45;color:var(--muted)}
.page-home .hm-quote-src{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:20px;font-weight:800;font-size:11px;line-height:1.4;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.page-home .hm-avatar{flex:none;width:40px;height:40px;border-radius:50%;border:1px dashed #97A0AE;background:#F4F6F9}

/* ---------------------------------------------------------------- 7. the latest articles (white): picture, category, title, line */
.page-home .hm-arts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.page-home .hm-arts a{display:block;color:var(--ink);text-decoration:none}
.page-home .hm-art-pic{margin-bottom:18px;border-radius:12px}
.page-home .hm-arts .hm-label{color:#0A5FA8}
.page-home .hm-art-title{display:block;margin-top:8px;font-family:var(--display);font-weight:400;font-size:22px;line-height:1.2;letter-spacing:-.01em}
.page-home .hm-arts a:hover .hm-art-title{color:#0A5FA8;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.page-home .hm-art-desc{display:block;margin-top:8px;font-size:14.5px;line-height:1.6;color:var(--muted)}
.page-home .hm-arts-all{margin-top:44px;text-align:center}
.page-home .hm-arts-all .btn{min-height:0;padding:12px 22px;color:#0A5FA8}

/* ---------------------------------------------------------------- 8. the closing call (deep) */
.page-home .hm-end{padding-block:104px;overflow:hidden;isolation:isolate}
.page-home .hm-end-inner{position:relative;max-width:700px;margin-inline:auto;text-align:center}
.page-home .hm-end-title{font-family:var(--display);font-weight:300;font-size:clamp(32px,3.8vw,46px);line-height:1.08;letter-spacing:-.02em}
.page-home .hm-end-text{margin:16px auto 0;max-width:54ch;font-size:16.5px;line-height:1.6}
.page-home .hm-end-btns{justify-content:center;margin-top:30px}

/* ---------------------------------------------------------------- tablet */
@media (max-width:1100px){
  .page-home .hm-tgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .page-home .hm-tgroup .hm-tgrid.is-1,.page-home .hm-tgroup .hm-tgrid.is-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .page-home .hm-test{flex-direction:column}
  .page-home .hm-test-icon{width:88px}
}

/* ---------------------------------------------------------------- 390px (mockup: max-width 820px) */
@media (max-width:820px){
  .page-home .hm-hero{padding-block:48px 72px}
  .page-home .hm-hero-grid,.page-home .hm-sci-top{grid-template-columns:minmax(0,1fr);gap:36px}
  .page-home .hm-title{font-size:38px;font-size:min(40px,10.4cqi)}
  .page-home .hm-lede{max-width:none;font-size:19px}
  .page-home .hm-hero-art{margin-inline:6px}
  .page-home .hm-hero-art::before{width:220px;height:220px;right:-60px;top:-40px}
  .page-home .hm-seal{width:112px;height:112px;left:auto;right:-6px;bottom:-40px}
  /* the stamp moves to the frame's right corner here, so the row goes left, and its segments narrow with the screen so the row
     stays clear of the stamp's circle on every phone (32px at 390 and wider, 28px at 360, 22px at 320). Measured Sep 30 in
     Chromium at every width from 320 to 1920: at least 10px between the row and the stamp. */
  .page-home .hm-story-bar{right:auto;left:-4px}
  .page-home .hm-story-seg{width:clamp(20px,calc((100vw - 190px) / 6),32px)}
  .page-home .hm-tgrid,.page-home .hm-tgrid.is-2,.page-home .hm-facts,.page-home .hm-quotes,.page-home .hm-arts,
  .page-home .hm-tgroup .hm-tgrid.is-1,.page-home .hm-tgroup .hm-tgrid.is-2{grid-template-columns:minmax(0,1fr)}
  .page-home .hm-tgroup + .hm-tgroup{margin-top:30px}
  .page-home .hm-test{flex-direction:row;padding:18px}
  .page-home .hm-test-icon{width:80px}
  .page-home .hm-test-name{font-size:22px}
  .page-home .hm-proof-row{grid-template-columns:minmax(0,1fr)}
  .page-home .hm-proof-photo{aspect-ratio:4 / 3!important}
  .page-home .hm-sample{grid-column:1;grid-row:2;margin:-56px 10px 0;padding:18px 16px 16px}
  .page-home .hm-plate{padding:14px 12px 10px}
  .page-home .hm-wide{display:none}
  .page-home .hm-phone{display:block}
  .page-home .flow{margin-top:48px}
  .page-home .hm-facts{gap:28px;margin-top:44px}
  .page-home .hm-fact-n{font-size:48px}
  /* one promise above the next, its mark beside its words, so a promise stays on one line of sight instead of three screens */
  .page-home .hm-quotes{gap:16px}
  .page-home .hm-arts{gap:36px}
  .page-home .hm-end{padding-block:60px}
}
/* the guarantee badge (Wayne, Sep 21: "very visible, not just an fyi"): under the hero button, beside the price, in the closing band */
.page-home .hm-guarantee{margin-top:22px}
.page-home .hm-plate .hm-guarantee,.page-home .hm-sample .hm-guarantee{margin-top:14px}
.page-home .hm-end .hm-guarantee{margin-top:26px;display:flex;justify-content:center}
/* the reach line under the guarantee: how often the original statements have been answered (the instrument's numbers, not ours) */
.page-home .hm-reach{display:flex;align-items:center;gap:9px;margin-top:16px;max-width:46ch;font-weight:700;font-size:14px;line-height:1.4;color:#FAD9A8}
.page-home .hm-reach-icon{flex:none;color:#F5A623}


/* ===== 12-price-worth.css ===== */
/* ==========================================================================
   12-price-worth.css · owner: D117 (the $30 value), Sep 24, 2026
   The one line after a printed price that says what the price buys (engine/pricing.js worthId), on the three surfaces that are not
   the home page (the home page's line and its three sample pages are in 10-home.css). One small partial of its own, each rule
   scoped under its page's body class, because the pages' own partials are held by other tracks this week.
   ========================================================================== */

/* the catalog card: a short line in the card's body type, directly under the amber price tag */
.page-assessments .ac-worth{margin:6px 0 0;max-width:46ch;font-size:13.5px;font-weight:500;line-height:1.45;color:var(--ink)}

/* a test's own page: since D130 (Sep 26, 2026) the sentence is the second line of that page's price card, styled with the card in
   21-take.css (.tp-offer-card .tp-worth) */

/* "Your results": under the card's own price line, the full width of the offer row */
.page-results .rp-yr-offer .rp-yr-worth{flex-basis:100%;margin:2px 0 0;font-size:13.5px;font-weight:500;line-height:1.5;color:var(--ink)}


/* ===== 20-assessment.css ===== */
/* ==========================================================================
   20-assessment.css · owner: A (registry, catalog, runners)
   Pages: /assessments/ (the catalog, body class page-assessments) and /assessments/<id>/ (body class page-assessment).
   Since Sep 21, 2026 the catalog is the editorial all-tests page (its block below) and each test page is 21-take.css; what stays here
   for those pages is the check-in's controls and the card-sort board, which 21-take.css restyles. The older screens' rules (the intro,
   sets of ten as cards, a first look after each part) serve app/assessment-app.js, kept unused until Wayne has seen the new pages.
   Markup: app/assessment-views.js and app/assessment-checkin.js.
   Only this agent edits this file. Every rule is scoped under .page-assessment or .page-assessments.
   ========================================================================== */

/* While the script loads, a returning visitor should not see the blank intro flash before their own screen. html.as-js is set by an
   inline script in <head>; if the script never runs, the test shows after 3 seconds anyway.
   The catalog's cards are never hidden waiting for a script (Sep 27, 2026, the site's rule that everything is visible at rest and
   complete without one). Each card's status row is drawn in the page as not started, with the way in, and app/catalog.js redraws it
   from this browser's saved answers when it runs. */
.as-js .page-assessment .assess:not(.is-ready){visibility:hidden;animation:as-reveal 0s 3s forwards}
@keyframes as-reveal{to{visibility:visible}}

.page-assessment .as-notice{margin-bottom:22px}
.page-assessment .as-notice .notice p+p{margin-top:0}
.page-assessment .as-title:focus,.page-assessment .as-set-title:focus{outline:none;box-shadow:none}

/* back to the catalog, above an assessment's own screens */
.page-assessment .as-crumb{margin-bottom:22px}
.page-assessment .as-crumb a{border-bottom:3px solid var(--amber)}
.page-assessment .as-crumb a:hover{text-decoration:none;border-bottom-color:var(--ink)}
.page-assessment .as-crumb-sep{margin:0 .55em;color:var(--muted)}

/* ---------------------------------------------------------------- parts strip (only in an assessment with more than one part)
   Overview | 1 Interests | 2 Work values, ruled like the header, current part in ink. */
.page-assessment .as-steps{margin-bottom:30px}
.page-assessment .as-steps ol{display:grid;grid-auto-flow:column;grid-template-columns:auto;grid-auto-columns:minmax(0,1fr);
  list-style:none;background:var(--surface);border:var(--bw) solid var(--line);box-shadow:var(--sh-sm);border-radius:var(--r)}
.page-assessment .as-steps li{display:flex;min-width:0}
.page-assessment .as-steps li+li{border-left:var(--bw) solid var(--line)}
.page-assessment .as-step{position:relative;display:flex;align-items:center;gap:11px;width:100%;min-height:58px;padding:0 20px 5px;
  font-weight:700;font-size:14px;letter-spacing:.01em;line-height:1.2;text-decoration:none;color:var(--ink);background:var(--surface)}
.page-assessment .as-step:hover{background:var(--ground)}
.page-assessment .as-step:focus-visible{outline-offset:-7px;box-shadow:none}
.page-assessment .as-step-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.page-assessment .as-step-num{flex:none;display:grid;place-items:center;width:28px;height:28px;background:var(--amber);border:var(--bw-thin) solid var(--line);
  font-family:var(--heading);font-size:14px;letter-spacing:0;line-height:1;color:var(--ink);font-weight:800;font-variant-numeric:tabular-nums}
.page-assessment .as-step.is-done .as-step-num{background:var(--sage-deep);position:relative}
.page-assessment .as-step.is-done .as-step-num::after{content:"";width:11px;height:6px;border-left:3px solid var(--on-ink);border-bottom:3px solid var(--on-ink);transform:translateY(-2px) rotate(-45deg)}
.page-assessment .as-step-bar{position:absolute;left:0;right:0;bottom:0;height:6px;background:var(--ground-deep);border-top:var(--bw-thin) solid var(--line)}
.page-assessment .as-step-bar i{display:block;height:100%;background:var(--cobalt)}
.page-assessment .as-step.is-done .as-step-bar i{background:var(--sage)}
.page-assessment .as-step.is-here{background:var(--ink);color:var(--ground)}
.page-assessment .as-step.is-here .as-step-num{border-color:var(--ground)}
.page-assessment .as-step.is-here .as-step-bar{background:var(--ink);border-top-color:var(--ink)}
.page-assessment .as-step.is-here .as-step-bar i{background:var(--amber)}
.page-assessment .as-step-all{padding-bottom:0}
.page-assessment .as-step-grid{flex:none;display:grid;grid-template-columns:repeat(2,9px);gap:3px}
.page-assessment .as-step-grid i{width:9px;height:9px;border:2px solid currentColor}

/* ---------------------------------------------------------------- set of ten: layout */
.page-assessment .as-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:44px;align-items:start}
.page-assessment .as-side{position:sticky;top:22px}
.page-assessment .as-side>*+*{margin-top:22px}
.page-assessment .as-side-title{font-family:var(--heading);font-size:14px;letter-spacing:.01em;line-height:1.2;font-weight:800}

.page-assessment .as-prog{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:10px 24px}
.page-assessment .as-set-title{font-size:30px;letter-spacing:-.01em;line-height:1.1;margin-top:10px}
.page-assessment .as-set-title .as-dot{margin:0 .12em}
.page-assessment .as-cheer{font-weight:700;font-size:15px;line-height:1.3;text-align:right;padding-bottom:3px}

/* progress segments: one per set, each filled by how much of that set is answered; a tap goes to that set */
.page-assessment .as-segs{display:grid;grid-template-columns:repeat(var(--segs),minmax(0,1fr));gap:8px;margin-top:8px;list-style:none}
.page-assessment .as-seg{display:block;width:100%;padding:6px 0;cursor:pointer}
.page-assessment .as-seg-track{position:relative;display:block;height:16px;border:var(--bw-thin) solid var(--line);background:var(--surface);transition:box-shadow .08s ease}
.page-assessment .as-seg-track i{position:absolute;left:0;top:0;bottom:0;background:var(--cobalt)}
.page-assessment .as-seg:hover .as-seg-track{box-shadow:var(--sh-xs)}
.page-assessment .as-seg.is-here .as-seg-track{border-width:var(--bw)}
.page-assessment .as-seg:focus-visible{outline:none;box-shadow:none}
.page-assessment .as-seg:focus-visible .as-seg-track{outline:3px solid var(--ink);outline-offset:3px;box-shadow:var(--ring-attn)}

.page-assessment .as-howto{max-width:none;margin-top:18px;border:var(--bw-thin) solid var(--line);border-left-width:8px;border-left-color:var(--cobalt);font-size:15.5px;font-weight:500;border-radius:var(--r-sm)}
.page-assessment .as-howto b:first-child{font-weight:400}

/* ---------------------------------------------------------------- question cards */
.page-assessment .q-list{list-style:none;margin-top:12px}
.page-assessment .q{padding:16px 20px 14px;margin-top:18px;transition:box-shadow .12s ease,border-color .12s ease}
.page-assessment .q.is-now{box-shadow:var(--sh-attn)}
.page-assessment .q.is-skipped{border-color:var(--amber);box-shadow:var(--sh-sm)}
.page-assessment .q-head{display:flex;gap:14px;align-items:baseline}
.page-assessment .q-num{flex:none;min-width:30px;font-family:var(--heading);font-size:15px;line-height:1;font-weight:800;font-variant-numeric:tabular-nums}
.page-assessment .q-text{font-size:19px;font-weight:600;line-height:1.35;max-width:62ch}
.page-assessment .q-answer{display:flex;align-items:center;gap:14px;margin-top:12px;padding-left:44px}
.page-assessment .q-end{flex:none;min-width:112px;white-space:nowrap;font-weight:700;font-size:12px;line-height:1.2;letter-spacing:.01em}
.page-assessment .q-end-r{text-align:right}
.page-assessment .q-scale{display:flex;align-items:center;gap:22px}
.page-assessment .q-opt{position:relative;display:block;width:34px;height:34px;flex:none;cursor:pointer}
.page-assessment .q-opt::before{content:"";position:absolute;inset:-7px -11px}
.page-assessment .q-radio{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:1}
.page-assessment .q-dot{display:block;width:100%;height:100%;border-radius:50%;border:var(--bw) solid var(--line);background:var(--surface);
  transition:background-color .08s ease,box-shadow .08s ease,transform .08s ease}
.page-assessment .q-opt:hover .q-dot{background:var(--ground);outline:3px solid var(--cobalt);outline-offset:2px}
.page-assessment .q-radio:checked+.q-dot{background:var(--cobalt);box-shadow:var(--sh-xs);outline:0}
.page-assessment .q-radio:focus-visible+.q-dot{outline:3px solid var(--ink);outline-offset:3px;box-shadow:var(--ring-attn)}
.page-assessment .q-radio:checked:focus-visible+.q-dot{box-shadow:var(--ring-attn)}
.page-assessment .q-opt:active .q-dot{transform:scale(.92)}
.page-assessment .q-chosen{display:none}
.page-assessment .q-nudge{display:inline-block;margin:12px 0 2px 44px;background:var(--ink);color:var(--ground);font-weight:700;font-size:14.5px;line-height:1.3;padding:7px 11px}
.page-assessment .q-nudge[hidden]{display:none}

/* ---------------------------------------------------------------- set footer */
.page-assessment .as-wait{margin-top:26px}
.page-assessment .as-wait .notice p{max-width:60ch}
.page-assessment .as-problems{margin:8px 0 0 20px;font-weight:600}
.page-assessment .as-foot{display:flex;align-items:center;justify-content:space-between;gap:14px 20px;margin-top:28px}
.page-assessment .as-foot-status{display:flex;align-items:center;justify-content:center;gap:9px;font-weight:700;font-size:14.5px;line-height:1.3;text-align:center}
.page-assessment .as-tick,.page-assessments .as-tick{position:relative;flex:none;display:inline-grid;place-items:center;width:24px;height:24px;background:var(--sage-deep);border:var(--bw-thin) solid var(--line);border-radius:var(--r-sm)}
.page-assessment .as-tick::after,.page-assessments .as-tick::after{content:"";width:10px;height:5px;border-left:3px solid var(--on-ink);border-bottom:3px solid var(--on-ink);transform:translateY(-2px) rotate(-45deg)}

/* ---------------------------------------------------------------- side column */
.page-assessment .as-legend{padding:16px 18px 18px}
.page-assessment .as-legend ol{list-style:none}
.page-assessment .as-legend li{display:flex;align-items:center;gap:10px;margin-top:11px;font-weight:600;font-size:14.5px;line-height:1.25}
.page-assessment .as-legend-dot{flex:none;width:24px;height:24px;border-radius:50%;border:var(--bw-thin) solid var(--line);background:var(--surface);transition:background-color .08s ease}
.page-assessment .as-legend li.is-lit .as-legend-dot{background:var(--cobalt);box-shadow:var(--sh-xs)}
/* Supporting notes beside the questions (docs/SITE_KIT.md §13): flat quiet panels with a small label and ink text, so the questions and the
   answer key lead. The privacy note keeps a thin sage edge. Its markup is also drawn by app/assessment-checkin.js, so the look lives here. */
.page-assessment .as-private{padding:13px 16px 15px;background:var(--quiet-bg);color:var(--ink);border:0;border-left:3px solid var(--sage);box-shadow:none}
.page-assessment .as-private .as-side-title,.page-assessment .as-credit .as-side-title{font-family:var(--body);font-weight:700;font-size:var(--fs-label);letter-spacing:.08em;line-height:1.3}
.page-assessment .as-private p{font-size:14.5px;line-height:1.45;margin-top:4px;font-weight:500}
.page-assessment .as-credit{padding:13px 16px 15px;background:var(--quiet-bg);border:0;box-shadow:none}
.page-assessment .as-credit p{font-size:14.5px;line-height:1.45;margin-top:4px;font-weight:500}
.page-assessment .as-credit .as-credit-small{margin-top:8px;font-size:var(--fs-fine);color:var(--muted)}
.page-assessment .as-credit a{font-weight:700}

/* ---------------------------------------------------------------- overview
   The headline, then the parts, then How it works in the page. Wide screens put How it works beside the headline; one column puts it after
   the parts, so the thing a person came for leads (docs/SITE_KIT.md §13). */
.page-assessment .as-intro{display:grid;grid-template-columns:minmax(0,1fr) 420px;grid-template-areas:"text how" "parts parts";column-gap:56px;align-items:start}
.page-assessment .as-intro-text{grid-area:text;min-width:0}
.page-assessment .as-intro>.as-chapters{grid-area:parts}
.page-assessment .as-intro>.as-how{grid-area:how}
.page-assessment .as-intro .lede{max-width:54ch}
.page-assessment .as-intro .chips{list-style:none}
.page-assessment .as-promises{margin-top:26px}
/* How it works: a quiet panel, so its numbers are outlined instead of amber */
.page-assessment .as-how{padding:16px 22px 18px}
.page-assessment .as-how ol{list-style:none}
.page-assessment .as-how li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:12px;align-items:start;padding:12px 0;border-bottom:var(--bw-thin) dashed var(--quiet-rule)}
.page-assessment .as-how li:last-child{border-bottom:0;padding-bottom:0}
.page-assessment .as-how .as-side-title{font-family:var(--body);font-weight:700;font-size:var(--fs-label);letter-spacing:.08em;line-height:1.3;padding-bottom:2px}
.page-assessment .as-how .step-num{width:26px;height:26px;background:transparent;font-size:13px}
.page-assessment .as-how b{display:block;font-weight:700;font-size:15px;line-height:1.3}
.page-assessment .as-how p{font-size:14.5px;line-height:1.45;margin-top:3px}
@media (max-width:1100px){
  .page-assessment .as-intro{grid-template-columns:minmax(0,1fr) min(420px,40%);column-gap:36px}
}
@media (max-width:860px){
  .page-assessment .as-intro{grid-template-columns:minmax(0,1fr);grid-template-areas:"text" "parts" "how"}
  .page-assessment .as-intro>.as-how{margin-top:36px}
}

.page-assessment .as-chapters{margin-top:48px;align-items:stretch}
.page-assessment .as-chapters-one{display:grid;grid-template-columns:minmax(0,760px)}
.page-assessment .as-chapter{display:flex;flex-direction:column}
.page-assessment .as-band-cobalt>.band,.page-assessments .as-band-cobalt>.band{background:var(--cobalt);color:var(--on-ink)}
.page-assessment .as-band-sage>.band,.page-assessments .as-band-sage>.band{background:var(--sage-deep);color:var(--on-ink)}
.page-assessment .as-band-amber>.band,.page-assessments .as-band-amber>.band{background:var(--amber);color:var(--ink)}

/* the other assessments: a box beside the parts on the intro, and a section under a finished assessment */
.page-assessment .as-others{display:flex;flex-direction:column;padding:18px 22px 22px}
.page-assessment .as-others .as-side-title{padding-bottom:10px;border-bottom:var(--bw) solid var(--line)}
.page-assessment .as-others-lead{font-size:15px;line-height:1.5;margin-top:12px}
.page-assessment .as-other-list{list-style:none;display:grid;gap:14px;margin-top:16px}
.page-assessment .as-other{--tone:var(--cobalt);display:flex;flex-direction:column;padding:14px 18px 16px;border-left-width:12px;border-left-color:var(--tone)}
.page-assessment .as-other.as-band-sage{--tone:var(--sage)}
.page-assessment .as-other.as-band-amber{--tone:var(--amber)}
.page-assessment .as-others .as-other{box-shadow:none;border-top-width:var(--bw-thin);border-right-width:var(--bw-thin);border-bottom-width:var(--bw-thin)}
.page-assessment .as-other-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 12px}
.page-assessment .as-other-name{font-size:24px;letter-spacing:-.02em;line-height:1;text-wrap:balance}
.page-assessment .as-other-tells{font-size:15px;line-height:1.45;margin-top:10px;max-width:60ch}
.page-assessment .as-other-meta{font-weight:700;font-size:12.5px;letter-spacing:.01em;line-height:1.35;margin-top:10px}
.page-assessment .as-other-cta{margin-top:auto;padding-top:14px}
.page-assessment .as-more{margin-top:64px}
.page-assessment .as-more-lead{font-size:17.5px;line-height:1.5;max-width:66ch;margin-top:16px;font-weight:500}
.page-assessment .as-more-list{list-style:none;margin-top:26px;align-items:stretch}
.page-assessment .as-more-split{margin-top:24px;--split-gap:48px}
.page-assessment .as-more-split .as-more-lead{margin-top:0}
.page-assessment .as-more-split .as-more-list{margin-top:0}
.page-assessment .as-more .as-other{padding:18px 22px 20px}
.page-assessment .as-more .as-other-name{font-size:30px}
.page-assessment .as-more .as-other-tells{font-size:16px}
.page-assessment .as-more-cta{margin-top:28px}
.page-assessment .as-chapter>.band{padding:10px 16px;font-size:13px}
.page-assessment .as-chapter-body{display:flex;flex-direction:column;flex:1;padding:18px 22px 22px}
.page-assessment .as-chapter-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 14px}
.page-assessment .as-chapter-name{font-size:34px;letter-spacing:-.02em;line-height:1}
.page-assessment .as-chapter-about{font-size:16px;line-height:1.5;margin-top:12px;max-width:60ch}
.page-assessment .as-chapter-progress{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;margin-top:auto;padding-top:22px}
.page-assessment .as-chapter-count{font-weight:700;font-size:13.5px;white-space:nowrap}
.page-assessment .as-chapter-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:20px}
.page-assessment .as-link-btn{display:inline-block;padding:2px 0;border-bottom:3px solid var(--amber);font-weight:700;font-size:13px;letter-spacing:.01em;line-height:1.4;color:inherit;cursor:pointer}
.page-assessment .as-link-btn:hover{border-bottom-color:currentColor}
.page-assessment .as-overview-foot{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap);margin-top:44px;align-items:start}
.page-assessment .as-overview-foot .as-private{padding:16px 20px 18px}
.page-assessment .as-faq{margin-top:44px;max-width:900px}
.page-assessment .as-delete{padding:16px 20px 18px}
.page-assessment .as-delete p{font-size:14.5px;line-height:1.45;margin:6px 0 14px}
.page-assessment .as-delete.is-open{border-left-width:10px}

/* ---------------------------------------------------------------- a result after a chapter */
.page-assessment .as-done-head{margin-bottom:34px}
.page-assessment .as-done-head .lede{max-width:62ch}
.page-assessment .as-result>.band{padding:10px 16px;font-size:13px}
.page-assessment .as-result-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}
.page-assessment .as-result-cell{padding:20px 24px 24px;min-width:0}
.page-assessment .as-result-cell+.as-result-cell{border-left:var(--bw) solid var(--line)}
.page-assessment .as-result-label{font-family:var(--heading);font-size:14px;letter-spacing:.01em;line-height:1.2;margin-bottom:14px;font-weight:800}
.page-assessment .as-result-text{font-size:15.5px;line-height:1.5;margin-top:12px;max-width:54ch}
.page-assessment .as-result .link-more{margin-top:16px}
.page-assessment .as-result-links{display:flex;flex-wrap:wrap;gap:4px 22px}
.page-assessment .as-dims{list-style:none;margin-top:16px}
.page-assessment .as-dims li{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 0;border-bottom:var(--bw-thin) dashed var(--rule-soft)}
.page-assessment .as-dims li:last-child{border-bottom:0}
.page-assessment .as-dim-letter{display:grid;place-items:center;width:26px;height:26px;border:var(--bw-thin) solid var(--line);font-family:var(--display);font-size:13px;line-height:1}
.page-assessment .as-dim-name{font-weight:700;font-size:15px}
.page-assessment .as-tends{list-style:none}
.page-assessment .as-overview-foot>.as-private:only-child{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 18px}
.page-assessment .as-overview-foot>.as-private:only-child p{margin-top:0}
.page-assessment .as-tends li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;padding:9px 0;border-bottom:var(--bw-thin) dashed var(--rule-soft)}
.page-assessment .as-tends li:first-child{padding-top:0}
.page-assessment .as-tends li:last-child{border-bottom:0}
.page-assessment .as-tend-name{font-weight:700;font-size:15.5px}
.page-assessment .as-tend-line{flex-basis:100%;font-size:13.5px;line-height:1.45}
.page-assessment .as-result-i{grid-template-columns:250px minmax(0,1fr) minmax(0,1.05fr)}
.page-assessment .as-result-i.no-art{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}
.page-assessment .as-result-art{margin:22px 0 24px 24px;align-self:start;box-shadow:var(--sh-sm)}
.page-assessment .as-result-art .art{border-bottom:0}
.page-assessment .as-result-art+.as-result-cell{border-left:0}
.page-assessment .as-type-name{font-family:var(--display);font-size:26px;line-height:1.05;letter-spacing:-.01em;text-transform:uppercase;margin-top:18px}
.page-assessment .as-result .score-list{box-shadow:none;border-width:var(--bw-thin)}
.page-assessment .as-result-v{grid-template-columns:minmax(0,1fr)}
.page-assessment .as-result-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 20px;padding:9px 16px}
/* the credit under a first look is fine print (finePrint's class is on it); the box-foot label styles are undone here */
.page-assessment .as-credit-line{flex:1 1 40ch;font-weight:500;font-size:var(--fs-fine);line-height:1.45;letter-spacing:0;text-transform:none;max-width:110ch;color:var(--muted)}
.page-assessment .as-credit-line a{font-weight:700}
.page-assessment .as-result-foot .as-link-btn{font-size:12.5px;margin-left:auto}

.page-assessment .as-next{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:30px;align-items:center;padding:22px 26px;margin-top:34px}
.page-assessment .as-next-label{font-family:var(--heading);font-size:16px;letter-spacing:.01em;line-height:1.2;font-weight:800}
.page-assessment .as-next-text{font-size:17px;line-height:1.45;margin-top:6px;max-width:66ch;font-weight:500}
.page-assessment .as-done-foot{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:30px}

/* ---------------------------------------------------------------- finish */
.page-assessment .as-finish{align-items:center}
.page-assessment .as-finish .btn-row{margin-top:30px}
.page-assessment .as-finish-box{padding:18px 22px 10px}
.page-assessment .as-finish-box .as-side-title{padding-bottom:10px;border-bottom:var(--bw) solid var(--line)}
.page-assessment .as-finish-box ul{list-style:none}
.page-assessment .as-finish-box li{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:12px;align-items:center;padding:13px 0;border-bottom:var(--bw-thin) dashed var(--rule-soft);font-size:15px;line-height:1.35}
.page-assessment .as-finish-box li:last-child{border-bottom:0}
.page-assessment .as-finish-box li b{display:block;font-weight:700}
.page-assessment .as-finish-box .link-more{font-size:13px;justify-self:start}
.page-assessment .as-finish-all{font-size:14.5px;line-height:1.45;padding:14px 0 12px;border-top:var(--bw) solid var(--line)}
.page-assessment .as-finish-all a{font-weight:700;text-decoration:underline;text-decoration-color:var(--amber);text-decoration-thickness:3px;text-underline-offset:4px}
.page-assessment .as-finish-cards{margin-top:52px}
.page-assessment .as-finish-cards>*+*{margin-top:34px}

/* ---------------------------------------------------------------- work values card sort (only when flags.values is true) */
.page-assessment .as-sort-layout{margin-top:22px}
.page-assessment .as-sort-how .as-side-title,.page-assessment .as-sort-piles-box .as-side-title{padding-bottom:9px;border-bottom:var(--bw) solid var(--line)}
.page-assessment .as-sort-piles-box{padding:16px 16px 16px}
.page-assessment .as-sort-limit{margin-top:12px;font-size:12.5px}
.page-assessment .as-sort-steps{margin:12px 0 0 20px}
.page-assessment .as-sort-steps li{font-size:14.5px;line-height:1.45;margin-top:6px}
.page-assessment .as-piles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:14px;list-style:none}
.page-assessment .as-pile{display:flex;flex-direction:column;align-items:center;gap:2px;padding:9px 4px 8px;border:var(--bw-thin) solid var(--line);background:var(--ground);text-align:center}
.page-assessment .as-pile-num{font-family:var(--heading);font-size:24px;line-height:1;font-weight:800;font-variant-numeric:tabular-nums}
.page-assessment .as-piles-key{display:flex;justify-content:space-between;gap:10px;margin-top:8px;font-weight:700;font-size:11px;letter-spacing:.01em}
.page-assessment .as-pile-count{font-weight:700;font-size:13px}
.page-assessment .as-pile.is-full{background:var(--sage-wash)}
.page-assessment .as-pile.is-over{background:var(--amber-wash);box-shadow:inset 0 -6px 0 var(--amber)}
.page-assessment .as-sort-bar{margin-top:28px}
.page-assessment .vc-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 26px;margin-top:18px;list-style:none}
@media (max-width:1250px){ .page-assessment .as-sort-layout .vc-list{grid-template-columns:minmax(0,1fr)} }
.page-assessment .vc-groups{list-style:none}
.page-assessment .vc-group{margin-top:26px}
.page-assessment .vc{padding:14px 16px 16px}
.page-assessment .vc.is-placed{background:var(--surface)}
.page-assessment .vc-head{display:flex;gap:10px;align-items:baseline}
.page-assessment .vc-text{font-size:16.5px;font-weight:600;line-height:1.35}
.page-assessment .vc-scale{display:flex;align-items:center;gap:8px;margin-top:12px}
.page-assessment .vc-end{font-weight:700;font-size:11.5px;letter-spacing:.01em}
.page-assessment .vc-opt{position:relative;display:block;width:42px;height:42px;flex:none}
.page-assessment .vc-radio{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:1}
.page-assessment .vc-box{display:grid;place-items:center;width:100%;height:100%;border:var(--bw) solid var(--line);background:var(--surface);font-family:var(--heading);font-size:17px;line-height:1;font-weight:800;font-variant-numeric:tabular-nums;border-radius:var(--r)}
.page-assessment .vc-opt:hover .vc-box{background:var(--ground);outline:3px solid var(--cobalt);outline-offset:2px}
.page-assessment .vc-radio:checked+.vc-box{background:var(--cobalt);color:var(--on-ink);box-shadow:var(--sh-xs);outline:0}
.page-assessment .vc-radio:focus-visible+.vc-box{outline:3px solid var(--ink);outline-offset:3px;box-shadow:var(--ring-attn)}

/* ---------------------------------------------------------------- tablet */
@media (max-width:1100px){
  .page-assessment .as-layout{grid-template-columns:minmax(0,1fr) 270px;gap:30px}
  .page-assessment .q-answer{padding-left:0}
  .page-assessment .q-nudge{margin-left:0}
  .page-assessment .q-scale{gap:18px}
  .page-assessment .as-result-i{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .page-assessment .as-result-art{display:none}
  .page-assessment .as-result-art+.as-result-cell{border-left:0}
}
@media (max-width:1100px) and (min-width:721px){
  .page-assessment .as-title{font-size:44px}
}
@media (max-width:980px){
  .page-assessment .q-end{min-width:0;white-space:normal;max-width:92px}
}

/* ---------------------------------------------------------------- one column */
@media (max-width:860px){
  .page-assessment .as-layout{grid-template-columns:minmax(0,1fr);gap:36px}
  .page-assessment .as-side{position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}
  .page-assessment .as-side>*+*{margin-top:0}
  .page-assessment .as-legend{display:none}
  .page-assessment .q-chosen{display:block}
  .page-assessment .as-result-body,.page-assessment .as-result-i,.page-assessment .as-result-i.no-art{grid-template-columns:minmax(0,1fr)}
  .page-assessment .as-result-cell+.as-result-cell{border-left:0;border-top:var(--bw) solid var(--line)}
  .page-assessment .as-next{grid-template-columns:minmax(0,1fr);gap:18px}
  .page-assessment .as-next .btn{justify-self:start}
  .page-assessment .as-overview-foot{grid-template-columns:minmax(0,1fr)}
  .page-assessment .vc-list{grid-template-columns:minmax(0,1fr)}
  .page-assessment .as-sort-side{order:-1;position:sticky;top:0;z-index:5;display:block}
  .page-assessment .as-sort-side .as-private{display:none}
  .page-assessment .as-sort-piles-box{padding:8px 10px 10px;box-shadow:var(--sh-sm)}
  .page-assessment .as-sort-piles-box .as-side-title{display:none}
  .page-assessment .as-sort-piles-box .as-piles{margin-top:0}
  .page-assessment .as-sort-limit{display:none}
  .page-assessment .as-sort-layout{gap:18px}
}

/* ---------------------------------------------------------------- phone */
@media (max-width:720px){
  .page-assessment .as-steps{margin-bottom:24px}
  .page-assessment .as-step{min-height:52px;padding:0 10px 5px;gap:7px;font-size:12px;letter-spacing:.04em}
  .page-assessment .as-step-num{width:24px;height:24px;font-size:12.5px}
  .page-assessment .as-step-all{padding:0 13px}
  .page-assessment .as-step-all .as-step-name{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .page-assessment .as-step.is-done .as-step-num::after{width:9px;height:5px}
  .page-assessment .as-steps-many ol{display:flex}
  .page-assessment .as-steps-many li{flex:none}
  .page-assessment .as-steps-many li.is-here-li{flex:1 1 auto}
  .page-assessment .as-steps-many .as-step:not(.is-here) .as-step-name{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .page-assessment .as-steps-many .as-step:not(.is-here){padding:0 12px 5px}
  .page-assessment .as-sort-piles-box .as-piles-key{margin-top:6px;font-size:10px}

  .page-assessment .as-prog{display:block}
  .page-assessment .as-set-title{font-size:23px;margin-top:10px}
  .page-assessment .as-cheer{text-align:left;margin-top:8px;font-size:14.5px}
  .page-assessment .as-segs{gap:6px;margin-top:6px}
  .page-assessment .as-seg{padding:8px 0}
  .page-assessment .as-seg-track{height:14px}
  .page-assessment .as-howto{font-size:15px}

  .page-assessment .q{padding:14px 14px 10px;margin-top:16px}
  .page-assessment .q-head{gap:10px}
  .page-assessment .q-num{min-width:22px;font-size:14px}
  .page-assessment .q-text{font-size:17px;line-height:1.35}
  .page-assessment .q-answer{display:grid;grid-template-columns:1fr 1fr;gap:8px 10px;margin-top:12px;padding-left:0}
  .page-assessment .q-end{min-width:0;max-width:none;white-space:nowrap;font-size:11px;letter-spacing:.04em}
  .page-assessment .q-end-l{grid-row:1;grid-column:1}
  .page-assessment .q-end-r{grid-row:1;grid-column:2}
  .page-assessment .q-scale{grid-row:2;grid-column:1/-1;justify-content:space-between;gap:0;padding:2px 2px 0}
  .page-assessment .q-opt{width:42px;height:42px}
  .page-assessment .q-opt::before{inset:-6px -8px}
  .page-assessment .q-chosen{min-height:1.35em;margin-top:8px;text-align:center;font-weight:700;font-size:13px;line-height:1.35;color:var(--cobalt)}
  .page-assessment .q-nudge{margin:6px 0 4px;font-size:14px}

  .page-assessment .as-foot{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:14px}
  .page-assessment .as-foot-status{grid-column:1/-1;grid-row:1;justify-content:flex-start;text-align:left}
  .page-assessment .as-foot .btn{width:100%;padding-inline:12px}
  .page-assessment .as-side{grid-template-columns:minmax(0,1fr)}

  .page-assessment .as-intro .chips{gap:8px}
  .page-assessment .as-how{padding:14px 18px 16px}
  .page-assessment .as-chapters{margin-top:36px}
  .page-assessment .as-chapter-body{padding:16px 18px 20px}
  .page-assessment .as-chapter-name{font-size:28px}
  .page-assessment .as-chapter-about{font-size:15.5px}
  .page-assessment .as-chapter-cta .btn{flex:1 1 100%}

  .page-assessment .as-result-cell{padding:16px 18px 20px}
  .page-assessment .as-type-name{font-size:22px}
  .page-assessment .as-next{padding:18px}
  .page-assessment .as-next-text{font-size:16px}
  .page-assessment .as-next .btn{justify-self:stretch}
  .page-assessment .as-finish-box li{grid-template-columns:24px minmax(0,1fr);}
  .page-assessment .as-finish-box li .link-more{grid-column:2;justify-self:start}

  .page-assessment .as-piles{gap:5px}
  .page-assessment .vc-scale{justify-content:space-between;gap:4px}
  .page-assessment .vc-end{font-size:10.5px}
}
@media (max-width:400px){
  .page-assessment .as-step{padding:0 8px 5px;gap:6px;font-size:11.5px;letter-spacing:.02em}
  .page-assessment .q-opt{width:40px;height:40px}
  .page-assessment .vc-opt{width:38px;height:38px}
}

/* ---------------------------------------------------------------- the five answers, above the questions (one column only)
   Wide screens have the side legend. Once it is hidden, this strip names all five answers before the first tap, each over its circle's column. */
.page-assessment .as-key{display:none}
.page-assessment .as-result-quality{padding:16px 18px 0}
.page-assessment .as-result-quality .notice{box-shadow:none}
@media (max-width:860px){
  .page-assessment .as-key{display:block;margin-top:18px;padding:10px 14px 12px;box-shadow:var(--sh-sm)}
  .page-assessment .as-key-title{font-weight:700;font-size:11px;letter-spacing:.01em;line-height:1.3;padding-bottom:8px;border-bottom:var(--bw-thin) dashed var(--rule-soft)}
  .page-assessment .as-key-row{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin-top:10px;padding-left:44px;max-width:calc(44px + 5 * 56px + 4 * 22px)}
  .page-assessment .as-key-row li{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
  .page-assessment .as-key-dot{flex:none;width:16px;height:16px;border-radius:50%;border:var(--bw-thin) solid var(--line);background:var(--surface)}
  .page-assessment .as-key-label{font-weight:700;font-size:12px;line-height:1.2;overflow-wrap:break-word;hyphens:manual}
}
@media (max-width:720px){
  .page-assessment .as-key{margin-top:16px;padding:10px 12px 12px}
  .page-assessment .as-key-row{padding-left:0;max-width:none;gap:4px}
  .page-assessment .as-key-label{font-size:11.5px}
}
/* the interests result card: the art runs the full height of its column instead of stopping with white below it */
@media (min-width:1101px){
  .page-assessment .as-result-art{align-self:stretch;display:flex;flex-direction:column}
  .page-assessment .as-result-art .art{flex:1 1 auto;aspect-ratio:auto!important;min-height:230px}
}
/* the set heading on a phone: "Set 1 of 3" over "Activities 1–10", with no stray dot at a line's edge */
@media (max-width:720px){
  .page-assessment .as-set-title{text-wrap:wrap}
  .page-assessment .as-set-title .as-dot{display:none}
  .page-assessment .as-set-title .nowrap{display:block}
}

/* the new pieces of an assessment page on narrow screens */
@media (max-width:860px){
  .page-assessment .as-chapters-one{grid-template-columns:minmax(0,1fr)}
  .page-assessment .as-more-split{gap:24px}
}
@media (max-width:720px){
  .page-assessment .as-crumb{margin-bottom:18px}
  .page-assessment .as-others{padding:16px 18px 18px}
  .page-assessment .as-other{padding:12px 14px 14px;border-left-width:10px}
  .page-assessment .as-other-name,.page-assessment .as-more .as-other-name{font-size:22px}
  .page-assessment .as-other-cta .btn{width:100%}
  .page-assessment .as-more{margin-top:48px}
  .page-assessment .as-more-lead{font-size:16px}
  .page-assessment .as-more .as-other{padding:14px 16px 16px}
  .page-assessment .as-more-cta .btn{width:100%}
}

/* ==========================================================================
   The catalog: /assessments/ (body class page-assessments), every test on one page (Wayne, Sep 21, 2026: the leading free-test site's
   "all tests" page, its structure only). Polish pass the same night, on the foundation's bands: the headline and a picture on the deep
   band (with the tagged count in review mode), then every visible test as a white card on the warm band: its spot illustration, a
   small kicker with its tagline, the serif name, what it measures, its length and source as apparatus, and at its foot where you stand
   and the way in (app/catalog.js redraws that part, .ac-live, from the saved answers). Then how the tests fit together on white, three
   numbered columns. Solid blue-deep buttons.
   ========================================================================== */
.page-assessments .ac-hero-zone{padding-block:48px 52px}
.page-assessments .ac-hero-zone .review-stack{margin-bottom:22px}
.page-assessments .ac-hero{display:block}
.page-assessments .ac-head{max-width:980px}
.page-assessments .ac-title{margin-top:8px;font-size:54px;line-height:1.05;letter-spacing:-.024em}
/* Three questions people arrive with, each jumping to its group of cards (Oct 7, 2026). Pills on the deep band, hairline, no fill. */
.page-assessments .ac-ask-lead{margin-top:22px;font-size:13px;font-weight:700;letter-spacing:.02em;color:rgba(255,255,255,.78)}
.page-assessments .ac-ask{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px;padding:0;list-style:none}
.page-assessments .ac-hero-zone .ac-ask-link{display:inline-flex;align-items:center;gap:2px;min-height:44px;padding:9px 16px;border:1px solid rgba(255,255,255,.4);border-radius:var(--r-pill);
  font-size:15.5px;font-weight:600;line-height:1.3;color:#fff;text-decoration:none}
.page-assessments .ac-hero-zone .ac-ask-link:hover{background:rgba(255,255,255,.1);border-color:#fff}
.page-assessments .ac-hero-zone .ac-ask-link:focus-visible{outline:2px solid #fff;outline-offset:2px}
.page-assessments .ac-guarantee{display:flex;justify-content:center;margin-top:36px}
.page-assessments .ac-lede{margin-top:16px;font-size:21px;max-width:58ch}
.page-assessments .ac-offer{display:inline-flex;align-items:center;gap:10px;margin-top:20px;padding:9px 18px;border-radius:14px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);font-size:14px;font-weight:700;line-height:1.4;color:#fff}
.page-assessments .ac-offer-open{margin-top:10px;color:rgba(255,255,255,.78)}
.page-assessments .ac-count-line{display:flex;align-items:center;gap:8px 12px;margin-top:22px}
.page-assessments .ac-count-line .tp-count-n{font-family:var(--display);font-weight:300;font-size:36px;line-height:1;color:#fff}
.page-assessments .ac-count-line span:not(.tp-ph-tag){flex:1 1 auto;min-width:0;font-size:14px;font-weight:600;line-height:1.45;color:rgba(255,255,255,.85)}
.page-assessments .tp-ph-tag{display:inline-flex;align-items:center;padding:2px 9px;border:1.5px dashed var(--ink);border-radius:999px;background:#fff;
  font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.page-assessments .ac-hero-pic{border-radius:20px;box-shadow:0 2px 4px rgba(0,0,0,.2),0 28px 70px rgba(0,0,0,.35)}
.page-assessments .ac-tests{padding-block:44px 80px}
.page-assessments .ac-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:28px}
.page-assessments .ac-list-1,.page-assessments .ac-list-2{max-width:900px;margin-inline:auto}
/* D99: the assessments in groups, named by the question a reader arrives with. A group heading, the group's cards, and under the
   lead card the two that go further from it, set smaller so the page has one obvious front door instead of seven equals. */
.page-assessments .ac-group + .ac-group{margin-top:64px}
.page-assessments .ac-group-head{margin-bottom:22px}
.page-assessments .ac-group-head h2{font-size:34px;font-weight:300;line-height:1.1;letter-spacing:-.02em}
.page-assessments .ac-group-head p{margin-top:10px;font-size:16.5px;line-height:1.6;color:var(--muted)}
/* The one to open first, and the tag that says so. Its card runs the full column, so a picture over its words would be 560px tall
   at 900px wide and push the name below the fold on a laptop: its painting goes beside the words instead (D130, below). */
.page-assessments .ac-badge{display:inline-block;padding:4px 10px;border-radius:5px;background:var(--blue-wash);
  font-size:10px;font-weight:800;letter-spacing:.14em;line-height:1.4;text-transform:uppercase;color:var(--blue-deep)}
.page-assessments .ac-badge + .ac-kicker{margin-top:10px}
/* the two that go further sit in the lead card's own column, at a smaller size, under the line that says what each one adds */
.page-assessments .ac-after{max-width:900px;margin:30px auto 0}
.page-assessments .ac-after-lead{max-width:64ch;margin-inline:auto;font-size:15.5px;line-height:1.6;text-align:center;color:var(--muted)}
.page-assessments .ac-after-list{margin-top:22px;max-width:none;gap:20px}
.page-assessments .ac-card.is-after .ac-text{padding:20px 22px 0}
.page-assessments .ac-card.is-after .ac-live{padding:16px 22px 22px}
.page-assessments .ac-card.is-after .ac-name{font-size:23px}
.page-assessments .ac-card.is-after .ac-tells{font-size:14px}
.page-assessments .ac-card{display:flex;flex-direction:column;min-width:0;overflow:hidden;background:#fff;border-radius:20px;
  box-shadow:0 1px 2px rgba(13,20,32,.05),0 18px 50px rgba(120,84,30,.12)}
/* Sep 26, 2026: the name's link is stretched over the whole card, and the card answers the pointer, a press, focus and arriving on a
   phone (39-card-tactile.css, app/card-tactile.js). That file also moves the clip to the painting's own frame, to the same curve,
   so a shadow can deepen outside the card. */
.page-assessments .ac-art .ph-img{border-radius:0;background:#FCFCF6;border-bottom:1px solid var(--line)}
.page-assessments .ac-art img{inset:12px;width:calc(100% - 24px);height:calc(100% - 24px);object-fit:contain;mix-blend-mode:multiply}
/* D130, idea 4 (Wayne, Sep 26, 2026): each assessment's own painting, the one at the top of its page, fills the card's frame edge to
   edge, where a small spot icon used to sit in a wide empty box that read as a placeholder. The frame keeps the card's 16/10 and
   crops the painting's 4/3 a little at the top and bottom, and the tenth of a zoom takes in the paper margin one of the seven is
   painted with (Self-esteem's), which would otherwise show as two pale strips down the card's sides. */
.page-assessments .ac-art .ph-img.is-painting{background:var(--ground-deep)}
.page-assessments .ac-art .is-painting img{inset:0;width:100%;height:100%;object-fit:cover;mix-blend-mode:normal;transform:scale(1.1)}
/* The lead card on a wide screen: the painting down the left of the card, the words and the way in beside it. */
@media (min-width:821px){
  .page-assessments .ac-card.is-lead.has-art{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto 1fr}
  .page-assessments .ac-card.is-lead .ac-art{grid-row:1 / span 2;grid-column:1;min-height:340px}
  .page-assessments .ac-card.is-lead .ac-art .ph-img{height:100%;aspect-ratio:auto!important;border-bottom:0;border-right:1px solid var(--line)}
  .page-assessments .ac-card.is-lead .ac-text,.page-assessments .ac-card.is-lead .ac-live{grid-column:2}
}
/* the headline's second line, in the light blue that reads on the deep band */
.page-assessments .ac-hero-zone .accent-block,.page-assessments .ac-hero-zone .accent{color:#9CCBF7}
.page-assessments .ac-text{padding:26px 28px 0}
.page-assessments .ac-name{margin-top:8px;font-size:30px;line-height:1.1;letter-spacing:-.015em}
.page-assessments .ac-name a{color:inherit;text-decoration:none}
.page-assessments .ac-name a:hover{color:var(--blue-deep)}
.page-assessments .ac-tells{margin-top:10px;font-size:15px;line-height:1.6;color:var(--muted)}
.page-assessments .ac-meta{margin-top:14px;font-size:10.5px;font-weight:800;letter-spacing:.07em;line-height:1.5;text-transform:uppercase;color:var(--faint)}
/* What this test's own full report costs (engine/pricing.js), on the card where the reader is choosing between tests. Amber,
   the one colour this site uses for money, and only while the paywall is on. The one card whose full report costs nothing shows
   nothing here: the blue free tag that stood in this slot (D99) came off on Oct 2, 2026 under D148 (app/assessment-views.js priceChip). */
.page-assessments .ac-price{margin-top:10px}
.page-assessments .ac-live{margin-top:auto;padding:22px 28px 28px}
.page-assessments .ac-row{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding-top:18px;border-top:1px solid var(--line)}
/* where you stand, as a small label: not started in grey, underway in amber (something half finished), done in blue (you) */
.page-assessments .ac-state .tag{padding:0;border:0;background:none;font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.page-assessments .ac-state .tag-ink{color:var(--amber-text)}
.page-assessments .ac-state .tag-sage{color:var(--blue-deep)}
.page-assessments .ac-progress{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;width:100%}
.page-assessments .ac-bar{display:block;height:4px;border-radius:999px;overflow:hidden;background:var(--amber-pale)}
.page-assessments .ac-bar>i{display:block;height:100%;background:var(--blue-mark)}
.page-assessments .ac-count{font-size:12.5px;font-weight:700;line-height:1.3;color:var(--muted)}
.page-assessments .ac-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.page-assessments .ac-review{min-height:44px;font-size:13.5px}
.page-assessments .ac-foot{margin-top:28px;text-align:center}
/* D99: the group headings in the strip of other assessments at the foot of each assessment page. The strip itself is
   21-take.css; this is only the heading the grouping added, so the two files stay apart. */
/* .eyebrow is inline-block, so the label has to be a block before it can centre over the row of cards */
.page-assessment .tp-rel-group{display:block;margin-top:34px;margin-bottom:16px;text-align:center;color:var(--faint)}
.page-assessment .zone-head + .tp-rel-group{margin-top:0}
.page-assessments .ac-how{padding-block:72px 84px}
.page-assessments .ac-how-title{font-size:40px;font-weight:300;line-height:1.1;letter-spacing:-.02em;text-align:center}
/* the three steps are drawn now, not described (src/site/css/06-flow.css); only the gap under the heading is this page's */
.page-assessments .ac-how .flow-steps{margin-top:40px}
@media (max-width:980px){
  .page-assessments .ac-hero{grid-template-columns:minmax(0,1fr)}
  .page-assessments .ac-head{max-width:none}
}
@media (max-width:820px){
  .page-assessments .ac-hero-zone{padding-block:28px 36px}
  .page-assessments .ac-title{font-size:34px}
  .page-assessments .ac-hero-zone .ac-ask-link{font-size:15px;padding:8px 14px}
  .page-assessments .ac-lede{font-size:18px}
  .page-assessments .ac-count-line{flex-wrap:wrap}
  .page-assessments .ac-count-line span:not(.tp-ph-tag){flex-basis:100%}
  .page-assessments .ac-tests{padding-block:32px 52px}
  .page-assessments .ac-list{grid-template-columns:minmax(0,1fr);gap:20px}
  .page-assessments .ac-group + .ac-group{margin-top:44px}
  .page-assessments .ac-group-head{margin-bottom:20px}
  .page-assessments .ac-group-head h2{font-size:27px}
  .page-assessments .ac-group-head p{font-size:15.5px}
  .page-assessments .ac-after{margin-top:24px}
  .page-assessments .ac-after-lead{text-align:left}
  .page-assessments .ac-after-list{margin-top:18px}
  .page-assessments .ac-text{padding:22px 22px 0}
  .page-assessments .ac-live{padding:20px 22px 24px}
  .page-assessments .ac-name{font-size:26px}
  .page-assessments .ac-how{padding-block:52px 60px}
  .page-assessments .ac-how-title{font-size:30px}
  .page-assessments .ac-how .flow-steps{margin-top:28px}
}
.as-finish .lede{text-wrap:pretty}

/* ---------------------------------------------------------------- five pillars check-in (app/assessment-checkin.js)
   One screen per part, mixed questions: answer choices as pills, 0 to 10 as a row of numbered squares, day counts as a small box.
   No alarm colors anywhere near the mood check or the resource card (PILLARS.md §8.4). */
.page-assessment .pc-intro{max-width:62ch;margin-top:18px;font-size:17.5px}
.page-assessment .pc-consent{margin-top:18px;padding:16px 20px;border-left-width:10px;border-left-color:var(--cobalt)}
.page-assessment .pc-consent-text{font-size:17px;line-height:1.5;font-weight:500;max-width:62ch}
.page-assessment .pc-stem{list-style:none;margin-top:26px}
.page-assessment .pc-stem p{font-weight:700;font-size:16px;line-height:1.4;max-width:62ch}
.page-assessment .pc-q{display:block;padding:16px 20px 18px}
.page-assessment .pc-q .pc-choices,.page-assessment .pc-q .pc-scale,.page-assessment .pc-q .pc-days{grid-column:1/-1}
.page-assessment .pc-q.is-answered{box-shadow:var(--sh-xs)}
.page-assessment .pc-q .q-head{align-items:flex-start}
.page-assessment .pc-q .q-num{padding-top:4px}
.page-assessment .pc-qtext{flex:1;min-width:0}
.page-assessment .pc-q .q-head .tag{flex:none;margin-top:3px}
.page-assessment .pc-help{font-size:14.5px;line-height:1.45;color:var(--muted);margin-top:5px;max-width:60ch}

/* The answer pills are label.pc-choice. The question card for a choice question is li.pc-q.pc-choice too (pc-<kind>), so every pill rule
   names the label: an unscoped .pc-choice made that card shrink to its content and put the pills beside the question. */
.page-assessment .pc-choices{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;padding-left:44px}
.page-assessment label.pc-choice{position:relative;display:inline-flex;cursor:pointer}
.page-assessment label.pc-choice input,.page-assessment .pc-num input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:1}
.page-assessment label.pc-choice span{display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;border:var(--bw-thin) solid var(--line);background:var(--surface);
  font-weight:600;font-size:15.5px;line-height:1.25;transition:background-color .08s ease,box-shadow .08s ease}
.page-assessment label.pc-choice:hover span{background:var(--ground)}
.page-assessment label.pc-choice input:checked+span{background:var(--cobalt);color:var(--on-ink);box-shadow:var(--sh-xs)}
.page-assessment label.pc-choice input:focus-visible+span,.page-assessment .pc-num input:focus-visible+span{outline:3px solid var(--ink);outline-offset:3px;box-shadow:var(--ring-attn)}
.page-assessment .pc-choices.is-long{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.page-assessment .pc-choices.is-long label.pc-choice span{width:100%}

.page-assessment .pc-scale{margin-top:14px;padding-left:44px;max-width:680px}
.page-assessment .pc-scale-row{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:6px}
.page-assessment .pc-num{position:relative;display:block;cursor:pointer}
.page-assessment .pc-num span[aria-hidden]{display:grid;place-items:center;height:44px;border:var(--bw-thin) solid var(--line);background:var(--surface);
  font-family:var(--heading);font-size:16px;line-height:1;transition:background-color .08s ease,box-shadow .08s ease;font-weight:800;font-variant-numeric:tabular-nums}
.page-assessment .pc-num:hover span[aria-hidden]{background:var(--ground)}
.page-assessment .pc-num input:checked+span{background:var(--cobalt);color:var(--on-ink);box-shadow:var(--sh-xs)}
.page-assessment .pc-ends{display:flex;justify-content:space-between;gap:12px;margin-top:8px;font-weight:700;font-size:12px;line-height:1.25;letter-spacing:.01em}
.page-assessment .pc-ends span:last-child{text-align:right}
.page-assessment .pc-na{margin-top:12px}

.page-assessment .pc-days{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:14px;padding-left:44px}
.page-assessment .pc-day-input{width:88px;height:52px;padding:0 12px;border:var(--bw) solid var(--line);background:var(--surface);font-family:var(--heading);font-size:24px;text-align:center;color:var(--ink);font-weight:800;font-variant-numeric:tabular-nums}
.page-assessment .pc-day-input:focus-visible{outline:3px solid var(--ink);outline-offset:3px;box-shadow:var(--ring-attn)}
.page-assessment .pc-day-input[aria-invalid=true]{border-style:dashed}
.page-assessment .pc-days-unit{font-weight:700;font-size:15px;letter-spacing:.01em}
.page-assessment .pc-none[aria-pressed=true]{background:var(--cobalt);color:var(--on-ink)}
.page-assessment .pc-error{flex-basis:100%;font-weight:700;font-size:14.5px}

/* The 988 support line (D27): the same for everyone, always open, in a quiet panel with full ink text. Never folded and never fine print
   (docs/SITE_KIT.md §13 rule 4). The check-in's own credits are fine print. */
.page-assessment .pc-crisis{margin-top:24px;padding:12px 18px 14px;border:0;border-left:3px solid var(--sage);background:var(--quiet-bg);color:var(--ink)}
.page-assessment .pc-crisis p{font-size:15.5px;line-height:1.5;font-weight:500;max-width:70ch}
.page-assessment .pc-crisis p+p{margin-top:4px;font-size:15px}
.page-assessment .pc-crisis a{font-weight:700}
.page-assessment .pc-credit{margin-top:18px;max-width:80ch}
.page-assessment .pc-adults{margin-top:24px;border-left-width:10px;border-left-color:var(--cobalt)}
.page-assessment .pc-adults p{font-size:15.5px;line-height:1.5;margin-top:8px;max-width:60ch}
.page-assessment .pc-pillars{list-style:none;margin-top:8px}
.page-assessment .pc-pillars li{display:flex;align-items:center;gap:10px;margin-top:8px;font-weight:600;font-size:14.5px}
.page-assessment .pc-history ul{list-style:none;margin-top:12px}
.page-assessment .pc-history li{display:flex;align-items:center;gap:10px;margin-top:8px;font-weight:600}

.page-assessment .pc-resource{margin-bottom:34px;border-left-width:12px;border-left-color:var(--cobalt)}
.page-assessment .pc-resource-title{font-size:26px;letter-spacing:-.01em;line-height:1.15}
.page-assessment .pc-resource>p{font-size:17px;line-height:1.55;margin-top:10px;max-width:66ch}
.page-assessment #pc-first-look:focus{outline:none}
.page-assessment .pc-result{grid-template-columns:minmax(0,1fr)}
.page-assessment .pc-big{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px}
.page-assessment .pc-big-num{font-family:var(--heading);font-size:56px;line-height:1;font-weight:800;font-variant-numeric:tabular-nums}
.page-assessment .pc-big-of{font-weight:700;font-size:15px;letter-spacing:.01em}
.page-assessment .pc-gentle{font-weight:600}
.page-assessment .pc-look{font-size:22px;line-height:1.3;max-width:48ch}
.page-assessment .pc-gaps{list-style:none;margin-top:18px;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.page-assessment .pc-gap-row{padding:12px 14px;border:var(--bw-thin) solid var(--line);background:var(--surface)}
.page-assessment .pc-gap-name{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.page-assessment .pc-gap-name b{font-size:16px}
.page-assessment .pc-gap-nums{font-size:14px;font-weight:600;margin:6px 0}
.page-assessment .pc-gap-text{font-size:14px;line-height:1.45;margin-top:6px}
.page-assessment .pc-mood-note{margin-top:24px}
.page-assessment .pc-mood-note p{font-size:15.5px;line-height:1.5;margin-top:6px;max-width:66ch}
.page-assessment .as-finish-cards .as-result+.as-result{margin-top:24px}

@media (max-width:720px){
  .page-assessment .pc-choices,.page-assessment .pc-scale,.page-assessment .pc-days{padding-left:0}
  .page-assessment .pc-scale-row{gap:3px}
  .page-assessment .pc-num span[aria-hidden]{height:40px;font-size:14px}
  .page-assessment .pc-choices.is-long{grid-template-columns:minmax(0,1fr)}
  .page-assessment .pc-q .q-head .tag{display:none}
  .page-assessment .pc-big-num{font-size:44px}
}

/* ---------------------------------------------------------------- work values board (app/assessment-app.js)
   The card sort as a board: a tray of unplaced cards and five columns, least to most important.
   Approved in docs/mockups/values-sort. The radio list underneath is the version that works without
   JavaScript; this replaces it only once the script runs. */
.page-assessment .vb{display:grid;gap:18px;margin-top:18px}
.page-assessment .vb-tray{padding:14px}
.page-assessment .vb-tray-head{margin-bottom:10px}
.page-assessment .vb-tray-list{display:flex;flex-wrap:wrap;gap:9px;min-height:56px}
.page-assessment .vb-tray-list .vb-card{flex:0 1 210px;max-width:280px}
.page-assessment .vb-board{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;align-items:stretch}
.page-assessment .vb-col{display:flex;flex-direction:column;background:var(--surface);border:var(--bw) solid var(--line);box-shadow:var(--sh-sm)}
.page-assessment .vb-col-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 11px;background:var(--ink);color:var(--on-ink)}
.page-assessment .vb-col-num{font-family:var(--heading);font-size:18px;line-height:1;font-weight:800;font-variant-numeric:tabular-nums}
.page-assessment .vb-col-label{font-weight:700;font-size:10px;line-height:1.2;letter-spacing:.01em;text-align:right}
.page-assessment .vb-col-n{font-weight:700;font-size:11px;letter-spacing:.06em;padding:3px 6px;border:var(--bw) solid currentColor;border-radius:var(--r-pill)}
.page-assessment .vb-col.is-full .vb-col-n{background:var(--sage);border-color:var(--sage)}
.page-assessment .vb-col.is-over .vb-col-n{background:var(--red);border-color:var(--red)}
/* four equal rows, so every card is the same height and the height follows the longest statement
   instead of a fixed number that clips it at narrow widths */
.page-assessment .vb-slots{display:grid;grid-template-rows:repeat(4,1fr);gap:8px;padding:10px;flex:1}
.page-assessment .vb-slot{border:var(--bw) dashed var(--line);border-radius:var(--r-sm);min-height:52px}
.page-assessment .vb-card{display:flex;align-items:center;width:100%;min-height:52px;padding:8px 10px;text-align:left;
  font:500 13px/1.3 var(--body);color:var(--ink);background:var(--surface);border:var(--bw) solid var(--line);box-shadow:var(--sh-xs);cursor:grab;border-radius:var(--r-sm)}
.page-assessment .vb-card:active{cursor:grabbing}
.page-assessment .vb-card.is-dragging{opacity:.42}
.page-assessment .vb-card.is-picked{outline:2px solid var(--blue-deep);outline-offset:2px;background:var(--blue-wash);box-shadow:none}
@media (max-width:1000px){ .page-assessment .vb-board{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:620px){ .page-assessment .vb-board{grid-template-columns:1fr} }


/* ===== 21-take.css ===== */
/* ==========================================================================
   21-take.css · owner: A (registry, catalog, runners). Sep 21, 2026.
   Pages: every /assessments/<id>/ page, the test's own page (body class "page-assessment page-take": page-assessment brings the
   check-in controls and the card-sort board from 20-assessment.css; everything here is scoped under .page-take).
   Structure: the leading free-test site's test page (Wayne, Sep 21), its structure only. Polish pass the same night ("truity have
   different background colors for their sections"): every section on its own band (the foundation's .zone-*, 05-components.css),
   never two alike in a row:
     hero (the test's colour: deep / warm / blue) · white (description; review mode: count and reviewer slots) · warm (the test in a
     white card) · white (the evidence band) · blue (the explainers and the common questions as white cards) · white (other tests)
   Markup: src/pages/assessments.mjs (the page) and app/take-views.js (the test).
   Look: docs/mockups/site/ (the kicker, the light serif, hairlines, the answer mark, the solid blue-deep button) on the foundation's
   tokens; the card itself follows the free-test site's: a coloured header bar with the scale's words, alternating rows, the statement
   centered over its circles, the step dots and a clear Next step under it.
   While the script loads, 20-assessment.css hides the test (.as-js .assess:not(.is-ready)), so a returning visitor never sees step one
   flash before their own.
   ========================================================================== */

.page-take .tk-marks{margin-bottom:22px}
.page-take .tk-noscript{max-width:860px;margin:0 auto 24px;padding-inline:var(--pad)}

/* ---------------------------------------------------------------- the hero band: the name, the picture, the seal */
.page-take .tp-hero-zone{padding-block:60px 72px}
.page-take .tp-hero{display:grid;grid-template-columns:minmax(0,1fr);gap:40px 64px;align-items:center}
.page-take .tp-hero.has-art{grid-template-columns:minmax(0,1fr) minmax(0,1.02fr)}
.page-take .tp-title{margin-top:16px;max-width:14ch;font-size:66px;line-height:1.02;letter-spacing:-.025em}
.page-take .tp-sub{margin-top:18px;max-width:30ch;font-family:var(--display);font-weight:300;font-size:24px;line-height:1.4;color:var(--muted)}
.page-take .zone-deep .tp-sub{color:rgba(255,255,255,.8)}
.page-take .tp-hero-art{position:relative;margin-left:34px}
.page-take .tp-hero-pic{border-radius:20px;box-shadow:0 2px 4px rgba(13,20,32,.08),0 24px 60px rgba(13,20,32,.18)}
.page-take .zone-deep .tp-hero-pic{box-shadow:0 2px 4px rgba(0,0,0,.2),0 28px 70px rgba(0,0,0,.35)}
/* the seal: a round stamp of true facts over the picture's corner (the free-test site's stamp, our own words) */
.page-take .tp-seal{--seal-bg:var(--blue-ink);--seal-ink:#fff;position:absolute;left:-44px;bottom:-40px;z-index:2;width:156px;height:156px;
  transform:rotate(-9deg);filter:drop-shadow(0 10px 22px rgba(13,20,32,.22))}
.page-take .zone-deep .tp-seal,.page-take .zone-blue .tp-seal{--seal-bg:var(--amber);--seal-ink:var(--ink)}
.page-take .tp-seal svg{width:100%;height:100%;overflow:visible}
.page-take .tp-seal-disc{fill:var(--seal-bg)}
.page-take .tp-seal-rule{fill:none;stroke:var(--seal-ink);stroke-opacity:.45;stroke-width:1.2}
.page-take .tp-seal-ring{fill:var(--seal-ink);font-family:var(--body);font-weight:800;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase}
.page-take .tp-seal-n{fill:var(--seal-ink);font-family:var(--display);font-weight:300;font-size:52px;letter-spacing:-.02em}
.page-take .tp-seal-u{fill:var(--seal-ink);font-family:var(--body);font-weight:800;font-size:11px;letter-spacing:.16em;text-transform:uppercase}

/* ---------------------------------------------------------------- the credibility band: description, count and reviewer slots */
.page-take .tp-cred{padding-block:44px 46px}
.page-take .tp-cred-in{display:flex;flex-direction:column;align-items:center;text-align:center}
.page-take .tp-count{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 12px;margin-bottom:14px}
.page-take .tp-count-n{font-family:var(--display);font-weight:300;font-size:40px;line-height:1;color:var(--blue-deep)}
.page-take .tp-count span:not(.tp-ph-tag){max-width:52ch;text-wrap:balance;font-size:14.5px;font-weight:600;line-height:1.45;text-align:left;color:var(--muted)}
.page-take .tp-desc{max-width:62ch;font-size:17.5px;line-height:1.62;color:var(--ink)}
/* what's free and what isn't: a small pill, the price term in it */
.page-take .tp-offer{display:inline-flex;align-items:center;gap:10px;margin-top:16px;padding:9px 18px;border-radius:14px;background:var(--amber-wash);
  font-size:14px;font-weight:700;line-height:1.4;color:var(--amber-text);text-align:left}
.page-take .tp-offer-open{margin-left:auto;margin-right:auto;text-align:center}
.page-take .tp-offer-icon,.page-assessments .tp-offer-icon{flex:none;width:18px;height:18px}
.page-take .tp-offer-icon path,.page-assessments .tp-offer-icon path{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
.page-take .tp-offer-icon circle,.page-assessments .tp-offer-icon circle{fill:currentColor}
.page-take .tp-reviewed{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 8px;margin-top:16px;font-size:13.5px;font-weight:600;color:var(--muted)}
.page-take .tp-reviewer{font-weight:800;color:var(--blue-deep)}
/* D130, idea 7 (Wayne, Sep 26, 2026): what the assessment gives you beside what its full report costs, instead of six parts stacked
   down the middle of the band. The figure, the description and the cross-sell read down the left; the price, what it buys, the
   guarantee and the checkout line are one card on the right (src/pages/assessments.mjs offerCard). On a phone the card comes
   between the description and the cross-sell. With nothing for sale there is no card, and the band is the centered description. */
.page-take .tp-cred-in.has-offer{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);grid-template-areas:"text card" "cross card";
  gap:16px 64px;align-items:start;max-width:1180px;text-align:left}
.page-take .tp-cred-in.has-offer .tp-cred-text{grid-area:text;align-self:end}
.page-take .tp-cred-in.has-offer .tp-count{justify-content:flex-start}
.page-take .tp-cred-in.has-offer .tp-desc{max-width:60ch}
.page-take .tp-cred-in.has-offer .tp-reviewed{justify-content:flex-start}
.page-take .tp-cred-in.has-offer .tp-cross{grid-area:cross;max-width:60ch;margin:0;text-align:left}
.page-take .tp-offer-card{grid-area:card;display:grid;gap:18px;padding:26px 26px 24px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh-sm);text-align:left}
.page-take .tp-offer-card .tp-offer{display:flex;align-items:flex-start;gap:12px;max-width:none;margin:0;padding:0;border-radius:0;background:none;
  font:400 25px/1.2 var(--display);letter-spacing:-.012em;color:var(--ink)}
/* D186: the free part first, as a small blue pill over the price (Oct 8, 2026) */
.page-take .tp-offer-card .tp-free{justify-self:start;margin:0;padding:6px 12px;border-radius:5px;background:var(--blue-wash);
  font:600 14px/1.35 var(--body);color:var(--blue-ink)}
.page-take .tp-offer-card .tp-offer-icon{width:20px;height:20px;margin-top:4px;color:var(--amber-mark)}
.page-take .tp-offer-card .tp-worth{display:block;margin-top:10px;font:400 15.5px/1.55 var(--body);letter-spacing:0;color:var(--muted)}
.page-take .tp-offer-card .guarantee{display:flex;width:100%;gap:14px;padding:10px 16px 10px 10px;border-width:1px;border-radius:12px;box-shadow:none}
.page-take .tp-offer-card .gb-seal{width:56px;height:56px}
.page-take .tp-offer-card .gb-text b{font-size:15.5px}
.page-take .tp-offer-card .gb-text span{font-size:13.5px}
.page-take .tp-offer-card .tp-offer-open{max-width:none;margin:0;text-align:left;font-size:12.5px;font-weight:500}
.page-take .tp-offer-card.is-free .tp-offer{font-size:19px;line-height:1.35}
.page-take .tp-tick{width:18px;height:18px;flex:none}
.page-take .tp-tick circle{fill:var(--blue-wash);stroke:var(--blue-deep);stroke-width:1.4}
.page-take .tp-tick path{fill:none;stroke:var(--blue-deep);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* a review-mode placeholder, as on the home and method pages: a dashed pill, never a number */
.page-take .tp-ph-tag{display:inline-flex;align-items:center;padding:2px 9px;border:1.5px dashed var(--ink);border-radius:999px;background:#fff;
  font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}

/* ---------------------------------------------------------------- the test band: one centered column, the card in the middle */
.page-take .tp-test{padding-block:64px 76px}
.page-take .tk-main{--card:860px;max-width:calc(var(--card) + 2 * var(--pad));margin-inline:auto;padding-inline:var(--pad)}
.page-take .tk-main.is-wide{--card:var(--max);max-width:var(--max)}
/* After Next step the test goes back to its top (app/take.js arrive): the step's heading lands 16px under the site's bar, by the
   page's one rule for the bar (00-base.css). Until Sep 27, 2026 this and the rows added 24 to 90px of their own, from before the
   bar stuck, and "Step 2 of 5" landed under it. */
.page-take .tk-stage{min-width:0}
.page-take .assess[data-view="finish"] .tk-aside{display:none}

/* over the card: which step this is, the tracker, the instrument's own instruction */
.page-take .tk-head{text-align:center}
.page-take .tk-lead{display:inline-block;margin-bottom:14px;padding:6px 14px;border-radius:999px;background:#fff;font-size:13.5px;font-weight:700;line-height:1.4;color:var(--blue-ink)}
.page-take .tk-kicker{color:var(--amber-text)}
.page-take .tk-step-title{font-family:var(--display);font-weight:300;font-size:38px;line-height:1.1;letter-spacing:-.02em;color:var(--ink)}
.page-take .tk-step-title:focus{outline:none}

/* the tracker (app/take-views.js): one segment per set, each filling with its own answers. Hairlines and flat colour, no gradient:
   a pale amber track, the sets behind you in the blue mark, the set you are on in deep blue with a ring around it. It stands in for
   a kicker, a dotted row and two counting lines, so it carries no words of its own; what it says out loud is in aria-valuetext. */
.page-take .tk-track{margin-top:20px}
/* line-height:0 so the bars keep the heights below: each segment is an empty li, and its own line box would otherwise
   inflate it to a line of text and swallow the height (25px instead of 6px). */
.page-take .tk-segs{display:flex;align-items:center;gap:4px;width:100%;max-width:600px;margin-inline:auto;line-height:0}
.page-take .tk-seg{flex:1 1 0;min-width:0;height:6px;border-radius:3px;background:#EADFCE;overflow:hidden}
.page-take .tk-seg i{display:block;width:0;height:100%;border-radius:inherit;background:var(--blue-mark);transition:width .3s ease}
/* the set you are on: a taller capsule on a hairline of deep blue, so it reads as "here" even before its first answer */
.page-take .tk-seg.is-now{height:11px;border-radius:6px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--blue-deep)}
.page-take .tk-seg.is-now i{background:var(--blue-deep)}
.page-take .tk-track-echo{margin-top:0;width:100%}
@media (prefers-reduced-motion:reduce){.page-take .tk-seg i{transition:none}}

/* the instrument's own instruction, one line under the tracker */
.page-take .tk-instr{max-width:62ch;margin:14px auto 0;font-size:15px;font-weight:500;line-height:1.6;color:var(--muted)}

/* the card: white, the coloured header bar at its top */
.page-take .tk-card{margin-top:26px;background:#fff;border-radius:18px;overflow:hidden;
  box-shadow:0 1px 2px rgba(13,20,32,.05),0 18px 50px rgba(120,84,30,.12)}
.page-take .tk-scalebar{background:var(--blue-ink);color:#fff}
.page-take .tk-scalebar.is-bare{height:10px}
/* the circles' cell is 400px wide (320px until Oct 2, 2026), so each answer's own label fits over its column (Muse's review #29) */
.page-take .tk-scalebar-in,.page-take .tk-scale{display:grid;grid-template-columns:minmax(0,1fr) 400px minmax(0,1fr);column-gap:18px;align-items:center}
.page-take .tk-scalebar-in{min-height:54px;padding:12px 32px}
/* Every answer's own label, each over its own column of circles (Muse's review #29, Oct 2, 2026, app/take-views.js scaleBar): the
   labels sit in the middle cell of the same grid as the row's circles, and split it into as many columns as the scale has answers
   (--opts), as .tk-likert does under them. The two ends are full white, the answers between them a step quieter. */
.page-take .tk-sb-cols{grid-column:2;display:grid;grid-template-columns:repeat(var(--opts,5),minmax(0,1fr));align-items:end}
.page-take .tk-sb-col{padding-inline:2px;text-align:center;font-size:9.5px;font-weight:800;letter-spacing:.06em;line-height:1.25;text-transform:uppercase;color:rgba(255,255,255,.8)}
.page-take .tk-sb-col.is-end{color:#fff}
.page-take .tk-sb-col.is-mid{color:rgba(255,255,255,.7)}
.page-take .tk-sb-text{max-width:64ch;margin:0 auto;padding:15px 28px;text-align:center;font-size:14.5px;font-weight:600;line-height:1.5;color:#fff}

/* the rows: alternating grounds, the statement centered, its circles under it with the scale's ends beside them */
.page-take .tk-rows{counter-reset:none}
.page-take .tk-row{padding:28px 32px 24px;transition:background-color .2s ease}
.page-take .tk-row:nth-child(even){background:#FDF8F1}
/* Every statement row is the same height, so one notch of the reel always travels the same distance (Wayne, Sep 22: "the rows would
   have to be the same height, you know, so then there's no variation in how much the screen jumps"). The statement keeps a block of
   --tk-lines lines whether it fills them or not, and sits in the middle of it, so a short statement doesn't ride high above its
   circles. 40ch — the measure the check-in rows already use — is wide enough that the longest statement any test asks (the
   six-factor test's 89-character one) still breaks to two lines here, so two lines is the whole reserve on a wide screen. */
.page-take .tk-q{--tk-lines:2;display:grid;align-content:center;min-height:calc(var(--tk-lines) * 1.35em);
  max-width:40ch;margin:0 auto;text-align:center;font-family:var(--display);font-weight:400;font-size:21px;line-height:1.35;
  letter-spacing:-.005em;color:var(--ink);text-wrap:balance;transition:color .2s ease}
.page-take .tk-row.is-answered .tk-q{color:var(--muted)}
.page-take .tk-scale{margin-top:16px}
.page-take .tk-end{font-size:10.5px;font-weight:800;letter-spacing:.1em;line-height:1.3;text-transform:uppercase;color:var(--faint)}
.page-take .tk-end-lo{text-align:right}
.page-take .tk-end-hi{text-align:left}
.page-take .tk-likert{display:grid;grid-template-columns:repeat(var(--opts,5),minmax(0,1fr));align-items:center;justify-items:center}
.page-take .tk-pt{position:relative;display:grid;place-items:center;width:100%;min-height:52px;cursor:pointer}
/* the circles grow toward the ends, so a strong answer reads as strong */
.page-take .tk-pt .radio-dot{border-color:var(--ref-deep);transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease}
.page-take .tk-pt-0 .radio-dot{width:40px;height:40px}
.page-take .tk-pt-1 .radio-dot{width:32px;height:32px}
.page-take .tk-pt-2 .radio-dot{width:26px;height:26px}
.page-take .tk-pt .radio-dot:checked{background:var(--blue-deep);border-color:var(--blue-deep);box-shadow:inset 0 0 0 5px #fff}
.page-take .tk-pt-2 .radio-dot:checked{box-shadow:inset 0 0 0 4px #fff}
@media (hover:hover){ .page-take .tk-pt:hover .radio-dot:not(:checked){border-color:var(--blue-mark);transform:scale(1.06)} }
/* a row still blank after Next: an amber edge and a wash, the design's colour for something half finished */
.page-take .tk-row.is-blank{background:var(--amber-wash);box-shadow:inset 4px 0 0 var(--amber)}
/* The count of blanks stays in sight (Oct 7, 2026, the customer test: Next with blanks jumped up to the first blank, while the only
   words saying why sat below the last statement, out of view, so the reader saw an amber edge and nothing else). It sits at the foot
   of the step and sticks to the foot of the screen until the reader scrolls down to it. */
.page-take .tk-wait:not(:empty){margin-top:20px;position:sticky;bottom:12px;z-index:5}
.page-take .tk-wait .notice{box-shadow:0 10px 30px rgba(13,20,32,.14)}
.page-take .tk-wait .notice{align-items:center;border-color:var(--amber-pale);background:#fff}
.page-take .tk-wait .notice-title{margin-bottom:6px}
/* a new take underway (app/take-views.js newTakeNote, Oct 2, 2026): over the step a reader arrives on, the report panel's own words
   and "Discard new answers", a ghost button (with its own outline since Oct 6, 2026, 05-components.css) */
.page-take .as-notice.tk-retake .notice-title{margin-bottom:6px}
.page-take .as-notice.tk-retake .tk-retake-act{margin-top:8px}
.page-take .tk-card-pad{padding:32px 40px 36px}
.page-take .tk-card-note{padding:0 32px 28px}

/* under the card: the tracker again, then Back and the solid Next, centered, and no sentence between them */
.page-take .tk-foot{display:flex;flex-direction:column;align-items:center;gap:20px;margin-top:28px}
.page-take .tk-foot-btns{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:16px;width:100%}
.page-take .tk-back{justify-self:end;padding-right:14px}
.page-take .tk-back[disabled]{visibility:hidden}
.page-take .tk-next{grid-column:2;min-width:250px;min-height:56px;padding-inline:34px;font-size:16px;letter-spacing:.01em}
.page-take .tk-notes{max-width:80ch;margin:30px auto 0;text-align:center}
.page-take .tk-credit,.page-take .tk-notes .pc-credit{margin-top:8px;font-size:12.5px;font-weight:500;line-height:1.5;color:var(--muted);max-width:none}
.page-take .tk-credit a,.page-take .tk-notes .pc-credit a{color:var(--blue-deep);font-weight:600}

/* under the buttons: the quotation as an epigraph on the band */
.page-take .tk-aside{min-width:0}
.page-take .tk-quote-card{max-width:620px;margin:44px auto 0;padding-top:34px;border-top:1px solid rgba(120,84,30,.16);text-align:center}
.page-take .tk-eyebrow{display:block;letter-spacing:.13em}
.page-take .tk-eyebrow.is-muted{color:var(--muted)}
.page-take .tk-figure{margin-top:14px}
.page-take .tk-quote{font-family:var(--quote);font-style:italic;font-weight:300;font-size:22px;line-height:1.45;color:var(--ink)}
.page-take .tk-quote-src{margin-top:12px;font-size:10.5px;font-weight:800;letter-spacing:.08em;line-height:1.55;text-transform:uppercase;color:var(--muted)}

/* ---------------------------------------------------------------- the check-in: a question per row, with its own control */
.page-take .tk-row-checkin{padding:28px 32px 28px;text-align:center}
.page-take .tk-stem{max-width:60ch;margin:0 auto 6px;font-size:14.5px;line-height:1.5;color:var(--muted)}
/* A check-in row is not part of the reel: every question has a different control under it (answer choices, 0 to 10, a count of days),
   so there is no common height to hold and the statement keeps its natural one. */
.page-take .tk-row-checkin .tk-q{display:block;min-height:0;max-width:40ch}
.page-take .tk-help{max-width:60ch;margin:8px auto 0;font-size:14px;line-height:1.55;color:var(--muted)}
.page-take .tk-control{margin-top:16px;display:flex;justify-content:center}
.page-take .tk-control>*{max-width:100%}
.page-take .tk-control .pc-choices,.page-take .tk-control .pc-scale,.page-take .tk-control .pc-days{padding-left:0;margin-top:0}
.page-take .tk-control .pc-scale{width:620px}
.page-take .tk-control .pc-choices{gap:10px;justify-content:center}
.page-take .tk-control .pc-choices.is-long{width:100%;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.page-take label.pc-choice span{gap:10px;min-height:46px;padding:11px 16px;border:1px solid var(--line);border-radius:12px;background:#fff;box-shadow:none;
  font-size:14px;font-weight:700;line-height:1.3;color:var(--muted);text-align:left}
.page-take label.pc-choice span::before{content:"";flex:none;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--ref-deep);background:#fff}
@media (hover:hover){ .page-take label.pc-choice:hover span,.page-take .pc-num:hover span[aria-hidden]{background:#fff;border-color:var(--grey)} }
.page-take label.pc-choice input:checked+span,.page-take .pc-num input:checked+span{background:var(--blue-wash);border-color:var(--blue-deep);
  box-shadow:inset 0 0 0 1px var(--blue-deep);color:var(--blue-ink)}
.page-take label.pc-choice input:checked+span::before{background:var(--blue-deep);border-color:var(--blue-deep);box-shadow:inset 0 0 0 3px #fff}
.page-take label.pc-choice input:focus-visible+span,.page-take .pc-num input:focus-visible+span{outline:2px solid var(--blue-mark);outline-offset:3px;box-shadow:none}
.page-take .pc-scale-row{gap:6px}
.page-take .pc-num span[aria-hidden]{height:44px;border:1px solid var(--line);border-radius:10px;background:#fff;box-shadow:none;
  font-family:var(--body);font-size:15px;font-weight:700;color:var(--muted)}
.page-take .pc-ends{margin-top:8px;font-size:11.5px;font-weight:700;color:var(--muted)}
.page-take .pc-na{margin-top:12px}
.page-take .pc-days{gap:10px 14px;justify-content:center}
.page-take .pc-day-input{width:96px;height:54px;border:1px solid var(--line);border-radius:12px;background:#fff;
  font-family:var(--display);font-size:28px;font-weight:300;color:var(--ink)}
.page-take .pc-day-input:focus-visible{outline:2px solid var(--blue-mark);outline-offset:3px;box-shadow:none;border-color:var(--blue-deep)}
.page-take .pc-days-unit{font-size:14px;font-weight:700;color:var(--muted)}
.page-take .pc-error{font-size:13.5px;font-weight:700;color:var(--amber-text)}
.page-take .tk-control input[disabled]+span{cursor:default}
.page-take .tk-locked{padding:12px 16px;border-radius:10px;background:var(--blue-wash);font-size:14px;line-height:1.5;color:var(--blue-ink)}
.page-take .tk-adults{padding:16px 18px;border-radius:12px;background:var(--amber-wash);font-size:14.5px;line-height:1.5}
.page-take .tk-adults-title{font-weight:800;margin-bottom:4px}
.page-take .tk-adults-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}

/* ---------------------------------------------------------------- the work values card sort, full width in its card */
.page-take .tk-sort-how{max-width:820px}
.page-take .tk-sort-how .as-sort-steps{margin:10px 0 0 1.2em;font-size:15px;line-height:1.55}
.page-take .tk-sort-how .as-sort-steps li{margin-top:4px;font-size:15px}
.page-take .tk-sort-stem{margin-top:10px;font-size:14.5px;line-height:1.55;color:var(--muted)}
.page-take .tk-sort-stem b{color:var(--ink)}
.page-take .vb{margin-top:24px}
.page-take .vb-tray{padding:14px;border:1px dashed var(--line);border-radius:12px;background:#fff;box-shadow:none}
.page-take .vb-col{border:1px solid var(--line);border-radius:12px;background:#fff;box-shadow:none;overflow:hidden}
.page-take .vb-col-head{background:transparent;color:var(--ink);border-bottom:1px solid var(--line);padding:10px 12px}
.page-take .vb-col-num{font-family:var(--display);font-weight:300;font-size:24px}
.page-take .vb-col-label{font-weight:800;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.page-take .vb-col-n{border:1px solid var(--line);border-radius:999px;padding:2px 8px;font-weight:700;letter-spacing:0;color:var(--muted)}
.page-take .vb-col.is-full .vb-col-n{background:var(--blue-wash);border-color:var(--cobalt-pale);color:var(--blue-ink)}
.page-take .vb-col.is-over .vb-col-n{background:var(--amber-wash);border-color:var(--amber-pale);color:var(--amber-text)}
.page-take .vb-slot{border:1px dashed var(--line);border-radius:10px}
.page-take .vb-card{border:1px solid var(--line);border-radius:10px;background:#fff;box-shadow:none;font-weight:600;color:var(--ink)}
@media (hover:hover){ .page-take .vb-card:hover{border-color:var(--blue-mark)} }
.page-take .vb-card.is-picked{outline:0;border-color:var(--blue-deep);background:var(--blue-wash);box-shadow:inset 0 0 0 1px var(--blue-deep)}
.page-take .tk-sort-status{margin-top:16px;display:flex;gap:8px;align-items:center;font-size:14px;font-weight:700;color:var(--muted)}

/* ---------------------------------------------------------------- the finished state (someone back on a test they've done) */
.page-take .tk-finish{text-align:center}
.page-take .tk-finish-title{font-size:46px;max-width:18ch;margin-inline:auto}
.page-take .tk-finish-body{max-width:46ch;margin:16px auto 0;font-family:var(--display);font-weight:300;font-size:19px;line-height:1.5;color:var(--muted)}
.page-take .tk-finish-body b{font-weight:400;color:var(--ink)}
.page-take .tk-finish-signin{max-width:52ch;margin:22px auto 0;padding:10px 16px;border-radius:10px;background:var(--blue-wash);color:var(--blue-ink);font-size:var(--fs-small);font-weight:500;line-height:1.5;text-align:center;text-wrap:balance}
.page-take .tk-finish-actions{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px 22px;margin-top:28px}
/* Storage blocked: why the full report can't open on another page, over the buttons that stay on this one (app/take-views.js). */
.page-take .tk-finish-note{max-width:640px;margin:24px auto 0;text-align:left}
.page-take .tk-extras{margin-top:26px;padding-top:18px;border-top:1px solid var(--line);display:grid;gap:10px}
.page-take .tk-extra{font-size:14px;font-weight:700;color:var(--blue-deep);text-decoration:none}
.page-take .tk-extra:hover{text-decoration:underline}
/* "← Back" under the finished card (Muse's review #6/#17, Oct 2, 2026), the same button every step after the first has under its card.
   With no Next beside it, it stands centered under the card; on a phone it starts at the left, where Back stands on every step. */
.page-take .tk-finish-foot .tk-foot-btns{display:flex;justify-content:center}
.page-take .tk-finish-foot .tk-back{padding-right:14px}

/* ---------------------------------------------------------------- what the research has found
   The shared evidence band (.ev in 05-components.css), which replaced the "As seen in" placeholder row on Sep 22, 2026. It sits
   closer to the test above it than a full zone would, so the reader meets the research on the way out of the questions. */
.page-take .tp-evidence{padding-block:56px 64px}

/* ---------------------------------------------------------------- the explainers: white cards, a picture beside each */
.page-take .tp-explain{padding-block:72px 80px}
.page-take .tp-cards{display:grid;gap:28px}
.page-take .tp-card{min-width:0;background:#fff;border-radius:20px;padding:48px 52px;box-shadow:0 1px 2px rgba(13,20,32,.04),0 14px 40px rgba(8,63,112,.07)}
.page-take .tp-card-pic{border-radius:14px}
.page-take .tp-card-top{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:52px;align-items:center}
.page-take .tp-card-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:56px;align-items:center}
.page-take .tp-card-split.tp-card-flip{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
.page-take .tp-h2{font-size:36px;font-weight:300;line-height:1.08;letter-spacing:-.02em}
.page-take .tp-lede{margin-top:16px;max-width:60ch;font-size:16.5px;line-height:1.65;color:var(--muted)}
.page-take .tp-grid{display:grid;gap:1px;margin-top:40px;background:var(--line);border-top:1px solid var(--line)}
.page-take .tp-grid>li{background:#fff;padding:24px 22px 4px 0}
.page-take .tp-grid>li+li{padding-left:22px}
.page-take .tp-grid-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.page-take .tp-grid-6{grid-template-columns:repeat(3,minmax(0,1fr))}
.page-take .tp-grid-6>li{padding-bottom:22px}
.page-take .tp-grid-6>li:nth-child(3n+1){padding-left:0}
.page-take .tp-h3{font-size:20px;line-height:1.2;letter-spacing:-.01em}
.page-take .tp-grid-5 .tp-h3{font-size:18px;overflow-wrap:normal}
.page-take .tp-grid p{margin-top:8px;font-size:14.5px;line-height:1.6;color:var(--muted)}
.page-take .tp-grid .tp-poles{margin-top:12px;font-size:10.5px;font-weight:800;letter-spacing:.08em;line-height:1.5;text-transform:uppercase;color:var(--faint)}
/* Which of the four letters this trait produces, and, on the one that produces none, that fact (engine/fourletter.js). It reads as
   part of the trait, so it takes the page's blue over a wash rather than a badge of its own. */
/* The chips line up along the foot of the row whatever length each trait's description runs to, so the eye reads the five of them
   as one row: four letters and one that gives none. */
.page-take .tp-grid-5>li{display:flex;flex-direction:column;padding-bottom:24px}
.page-take .tp-grid-5 .tp-poles{margin-bottom:12px}
.page-take .tp-grid .tp-letter-from{margin-top:auto;padding:6px 10px;border-radius:5px;align-self:start;background:var(--blue-wash);font:800 10.5px/1.45 var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--blue-ink)}
.page-take .tp-grid .tp-letter-from.is-none{background:var(--ground-deep);color:var(--muted)}
.page-take .tp-grid .tp-letter{margin:0 0 10px}
.page-take .tp-prose{margin-top:18px}
.page-take .tp-prose p{font-family:var(--display);font-size:17.5px;line-height:1.62;color:var(--ink);max-width:60ch}
.page-take .tp-prose p+p{margin-top:14px}
/* D130, idea 5 (Wayne, Sep 26, 2026: "visuals for snapshots that we can quickly glance at"): "What is this assessment?" opens on a
   row of three or four tiles joined by arrows (src/site/snapshot.mjs), and keeps its picture and its two paragraphs underneath,
   below a hairline. Each tile reads straight down: a step number, the figure in the light display serif, its label in small blue
   capitals, the names as chips, and one short grey line. */
.page-take .tp-snap{--gap:36px;--n:4;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:var(--gap);margin-top:30px;counter-reset:snap}
.page-take .tp-snap-3{--n:3}
/* five tiles (Deep Analysis since polish idea 16) sit closer together to fit one row */
.page-take .tp-snap-5{--n:5;--gap:28px}
.page-take .tp-snap-5 .tp-snap-step{padding-inline:14px}
.page-take .tp-snap-step{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0;padding:18px 18px 20px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);counter-increment:snap}
.page-take .tp-snap-step::before{content:counter(snap);display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
  background:var(--blue-wash);font:800 11px/1 var(--body);color:var(--blue-ink)}
.page-take .tp-snap-step:not(:last-child)::after{content:"";position:absolute;top:50%;right:calc(var(--gap) / -2 - 4px);width:9px;height:9px;
  border-top:1.5px solid var(--blue-mark);border-right:1.5px solid var(--blue-mark);transform:translateY(-50%) rotate(45deg)}
.page-take .tp-snap-fig{display:flex;flex-direction:column;gap:6px;margin:0}
.page-take .tp-snap-n{font:300 44px/1 var(--display);letter-spacing:-.02em;color:var(--blue-deep)}
.page-take .tp-snap-unit{font:800 10.5px/1.4 var(--body);letter-spacing:.13em;text-transform:uppercase;color:var(--blue-deep)}
.page-take .tp-snap-chips{display:flex;flex-wrap:wrap;gap:5px}
.page-take .tp-snap-chips li{padding:4px 7px;border-radius:5px;background:var(--blue-wash);font:700 11.5px/1.25 var(--body);color:var(--blue-ink)}
.page-take .tp-snap-note{font-size:13.5px;line-height:1.5;color:var(--muted)}
.page-take .tp-what-body{margin-top:36px;padding-top:36px;border-top:1px solid var(--line)}
/* two by two on a tablet, the arrows only inside a row */
@media (max-width:1100px) and (min-width:561px){
  .page-take .tp-snap,.page-take .tp-snap-3,.page-take .tp-snap-5{--n:2;--gap:28px}
  .page-take .tp-snap-step:nth-child(2n)::after{content:none}
}
/* one under another on a phone, the arrows pointing down, each tile as compact as it can be: the step number beside the tile's
   words, and the figure on one line with its label */
@media (max-width:560px){
  .page-take .tp-snap,.page-take .tp-snap-3,.page-take .tp-snap-5{--n:1;--gap:22px;margin-top:22px}
  .page-take .tp-snap-step{display:grid;grid-template-columns:22px minmax(0,1fr);gap:8px 12px;padding:14px 14px 16px}
  .page-take .tp-snap-step>*{grid-column:2}
  .page-take .tp-snap-step::before{grid-column:1;grid-row:1;align-self:start;margin-top:8px}
  .page-take .tp-snap-step:not(:last-child)::after{top:auto;right:auto;left:50%;bottom:calc(var(--gap) / -2 - 4px);transform:translateX(-50%) rotate(135deg)}
  .page-take .tp-snap-fig{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
  .page-take .tp-snap-n{font-size:34px}
  .page-take .tp-what-body{margin-top:26px;padding-top:26px}
}
.page-take .tp-why{margin-top:20px}
.page-take .tp-why li{padding:18px 0 16px;border-top:1px solid var(--line)}
.page-take .tp-why li:last-child{padding-bottom:0}
.page-take .tp-why p{margin-top:6px;font-size:15px;line-height:1.6;color:var(--muted)}
.page-take .tp-faq{padding-block:40px 36px}
.page-take .tp-faq .sh{border-top:0;padding-top:0;margin-bottom:12px}
.page-take .tp-faq .sh h2{font-size:36px;font-weight:300;letter-spacing:-.02em}
.page-take .tp-faq .faq-q{font-size:16px}

/* ---------------------------------------------------------------- the other tests */
.page-take .tp-related{padding-block:72px 84px}
.page-take .tp-rel-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,380px));justify-content:center;gap:28px}
.page-take .tp-rel{display:flex;flex-direction:column;min-width:0;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:18px;
  box-shadow:0 1px 2px rgba(13,20,32,.04),0 12px 32px rgba(13,20,32,.06)}
.page-take .tp-rel-pic{border-radius:0;background:#FCFCF6;border-bottom:1px solid var(--line)}
.page-take .tp-rel-pic img{inset:12px;width:calc(100% - 24px);height:calc(100% - 24px);object-fit:contain;mix-blend-mode:multiply}
/* D130 idea 4: each assessment's own painting, edge to edge in the card's frame, as on the catalog's cards (20-assessment.css, which
   says why the tenth of a zoom). */
.page-take .tp-rel-pic.is-painting{background:var(--ground-deep)}
.page-take .tp-rel-pic.is-painting img{inset:0;width:100%;height:100%;object-fit:cover;mix-blend-mode:normal;transform:scale(1.1)}
.page-take .tp-rel-body{display:flex;flex-direction:column;align-items:flex-start;flex:1;padding:24px 26px 28px}
.page-take .tp-rel-name{margin-top:8px;font-size:26px;font-weight:400;line-height:1.1;letter-spacing:-.015em}
.page-take .tp-rel-name a{color:inherit;text-decoration:none}
.page-take .tp-rel-name a:hover{color:var(--blue-deep)}
.page-take .tp-rel-desc{margin-top:10px;font-size:14.5px;line-height:1.6;color:var(--muted)}
.page-take .tp-rel-meta{margin-top:14px;margin-bottom:22px;font-size:10.5px;font-weight:800;letter-spacing:.08em;line-height:1.5;text-transform:uppercase;color:var(--faint)}
.page-take .tp-rel-btn{margin-top:auto}
.page-take .tp-rel-all{margin-top:30px;text-align:center}
.page-take .tp-rel-all .link-more{font-size:14px}

/* ---------------------------------------------------------------- narrower screens */
@media (max-width:1100px){
  .page-take .tp-title{font-size:54px}
  .page-take .tp-grid-5{grid-template-columns:repeat(3,minmax(0,1fr))}
  .page-take .tp-grid-5>li{padding-bottom:22px}
  .page-take .tp-grid-5>li:nth-child(3n+1){padding-left:0}
}
/* phones (the mockups' 820px rules): one column; the picture under the name, the scale's ends under the circles */
@media (max-width:820px){
  .page-take .tp-hero-zone{padding-block:36px 52px}
  .page-take .tp-hero.has-art{grid-template-columns:minmax(0,1fr);gap:30px}
  .page-take .tp-title{font-size:42px}
  .page-take .tp-sub{font-size:19px}
  .page-take .tp-hero-art{margin-left:0;margin-bottom:22px}
  .page-take .tp-seal{width:112px;height:112px;left:-6px;bottom:-30px}
  .page-take .tp-cred{padding-block:34px 36px}
  .page-take .tp-desc{font-size:16.5px}
  .page-take .tp-count-n{font-size:34px}
  .page-take .tp-count{flex-direction:column;gap:8px}
  .page-take .tp-count span:not(.tp-ph-tag){text-align:center}
  .page-take .tp-cred-in.has-offer{grid-template-columns:minmax(0,1fr);grid-template-areas:"text" "card" "cross";gap:24px}
  .page-take .tp-cred-in.has-offer .tp-count{align-items:flex-start}
  .page-take .tp-cred-in.has-offer .tp-count span:not(.tp-ph-tag){text-align:left}
  .page-take .tp-offer-card{gap:16px;padding:20px 18px 18px}
  .page-take .tp-offer-card .tp-offer{font-size:22px}
  .page-take .tp-test{padding-block:44px 56px}
  .page-take .tk-main{padding-inline:12px}
  .page-take .tk-step-title{font-size:30px}
  /* a narrow tracker gives its gaps back to the segments, so a 24-set assessment still reads as a ruler */
  .page-take .tk-track{margin-top:16px}
  .page-take .tk-segs{gap:3px}
  .page-take .tk-instr{font-size:14.5px;padding-inline:8px}
  .page-take .tk-card{margin-top:24px;border-radius:14px}
  .page-take .tk-scalebar-in,.page-take .tk-scale{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:8px}
  .page-take .tk-scalebar-in{min-height:44px;padding:9px 16px}
  /* the circles span the row on a phone, so their column heads span the bar, at the row's own 16px inset */
  .page-take .tk-sb-cols{grid-column:1/-1}
  .page-take .tk-sb-col{padding-inline:1px;font-size:8.5px;letter-spacing:.03em}
  .page-take .tk-row{padding:22px 16px 16px}
  .page-take .tk-q{font-size:19px}
  /* On a phone the statement is as wide as the phone, so the reserve is measured against that width instead. Every test's statements
     still break to two lines at 390px; the six-factor test's are longer than the rest and three of its 240 reach a third line, so
     that one test holds three, and its rows stay equal to each other. */
  .page-take.page-take-sixfactor .tk-q{--tk-lines:3}
  .page-take .tk-scale{row-gap:4px;margin-top:12px}
  .page-take .tk-likert{grid-row:1;grid-column:1/-1;width:100%}
  .page-take .tk-end-lo{grid-row:2;grid-column:1;text-align:left;padding-left:4px}
  .page-take .tk-end-hi{grid-row:2;grid-column:2;text-align:right;padding-right:4px}
  .page-take .tk-end br{display:none}
  .page-take .tk-pt-0 .radio-dot{width:38px;height:38px}
  .page-take .tk-pt-1 .radio-dot{width:31px;height:31px}
  .page-take .tk-pt-2 .radio-dot{width:25px;height:25px}
  .page-take .tk-row.is-blank{box-shadow:inset 3px 0 0 var(--amber)}
  .page-take .tk-row-checkin{padding:24px 16px}
  .page-take .tk-control .pc-scale{width:100%}
  .page-take .tk-card-pad{padding:24px 18px 26px}
  .page-take .tk-card-note{padding:0 16px 22px}
  .page-take .tk-foot-btns{grid-template-columns:auto minmax(0,1fr);gap:10px}
  .page-take .tk-back{justify-self:start;padding-inline:6px}
  .page-take .tk-back[disabled]{display:none}
  .page-take .tk-next{grid-column:auto;min-width:0;width:100%}
  .page-take .tk-back[disabled]+.tk-next{grid-column:1/-1}
  .page-take .tk-finish-foot .tk-foot-btns{justify-content:flex-start}
  .page-take .tk-quote-card{margin-top:36px;padding-inline:8px}
  .page-take .tk-quote{font-size:19px}
  .page-take .tp-evidence{padding-block:44px 48px}
  .page-take .tp-explain{padding-block:48px 56px}
  .page-take .tp-cards{gap:20px}
  .page-take .tp-card{padding:28px 22px 30px;border-radius:16px}
  .page-take .tp-card-top,.page-take .tp-card-split,.page-take .tp-card-split.tp-card-flip{grid-template-columns:minmax(0,1fr);gap:24px}
  .page-take .tp-card-split .tp-card-pic{order:-1}
  .page-take .tp-card-top .tp-card-pic{order:-1}
  .page-take .tp-h2,.page-take .tp-faq .sh h2{font-size:28px}
  .page-take .tp-grid{margin-top:26px}
  .page-take .tp-grid-5,.page-take .tp-grid-6{grid-template-columns:minmax(0,1fr)}
  .page-take .tp-grid>li,.page-take .tp-grid>li+li,.page-take .tp-grid-6>li{padding:18px 0}
  .page-take .tp-prose p{font-size:16.5px}
  .page-take .tp-faq{padding-block:28px 22px}
  .page-take .tp-related{padding-block:52px 60px}
  .page-take .tp-rel-list{grid-template-columns:minmax(0,1fr);gap:20px}
}
/* the guarantee badge under the catalog's price line (Wayne, Sep 21: "very visible, not just an fyi"); a test's own page puts it in
   its price card instead (D130, above) */
.ac-offer-guarantee{display:flex;justify-content:center;margin-top:16px}


/* ===== 22-agree.css ===== */
/* ==========================================================================
   22-agree.css · owner: A (registry, catalog, runners). Sep 26, 2026; the sheet, Sep 27 (D143).
   The agreement to the Terms of use (app/agreement.js): its heading, one line on what agreeing means, the link to the Terms, and
   "Agree and continue". By default it opens as a sheet over the step the reader has just finished (a <dialog> that
   app/agreement-sheet.js opens with showModal()): a dialog in the middle of a wide screen, a sheet rising from the bottom edge on a
   phone. Where the setting puts it before the first question, the same words stand in the step's white card instead (.tk-agree-pad).
   Under the step's buttons, once the sheet was closed without agreeing, one line says why Next asks again (.tk-agree-note).
   Scoped under .page-take like the rest of the test (21-take.css), and under .tk-agree-host, where a report or result page lays the
   same sheet over itself before the reader's own result (app/agreement-sheet.js beforeResult, Sep 27, 2026), so the sheet and its
   words look the same on both.
   Look: D88. White, a hairline edge, the one soft shadow for anything that floats (--sh-lift), 14px corners (16px along a phone
   sheet's top edge), the light serif for the heading and Figtree for the rest, the solid blue button, a dimmed ink scrim.
   Motion: one gentle arrival, transform and opacity only, starting from a state that can already be seen (SITE_KIT §5, "nothing
   waits invisible"), and none at all for reduced motion. The sheet's resting style is its finished look, so without the animation it
   is simply there.
   ========================================================================== */

/* ---------------------------------------------------------------- the sheet: a dialog in the middle of a wide screen */
:is(.page-take,.tk-agree-host) .tk-sheet{box-sizing:border-box;width:min(560px,calc(100vw - 48px));max-width:none;max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);
  margin:auto;padding:0;overflow:auto;overscroll-behavior:contain;border:1px solid var(--line);border-radius:var(--r);background:#fff;color:var(--ink);box-shadow:var(--sh-lift)}
:is(.page-take,.tk-agree-host) .tk-sheet::backdrop{background:rgba(13,20,32,.46)}
:is(.page-take,.tk-agree-host) .tk-sheet[open]{animation:tk-sheet-in .28s cubic-bezier(.2,.7,.2,1)}
:is(.page-take,.tk-agree-host) .tk-sheet[open]::backdrop{animation:tk-scrim-in .28s ease-out}
@keyframes tk-sheet-in{from{opacity:.4;transform:translateY(14px) scale(.985)}}
@keyframes tk-sheet-up{from{opacity:.5;transform:translateY(56px)}}
@keyframes tk-scrim-in{from{opacity:.3}}

:is(.page-take,.tk-agree-host) .tk-sheet-in{position:relative;padding:42px 44px 34px}
:is(.page-take,.tk-agree-host) .tk-sheet-x{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:44px;height:44px;padding:0;
  border:0;border-radius:50%;background:transparent;color:var(--muted);cursor:pointer;transition:background-color .15s ease,color .15s ease}
@media (hover:hover){ :is(.page-take,.tk-agree-host) .tk-sheet-x:hover{background:var(--ground-deep);color:var(--ink)} }
:is(.page-take,.tk-agree-host) .tk-sheet-x:focus-visible{outline:2px solid var(--blue-mark);outline-offset:2px}
:is(.page-take,.tk-agree-host) .tk-sheet .tk-agree-title{padding-right:40px}

/* ---------------------------------------------------------------- the words and the button, wherever they stand */
:is(.page-take,.tk-agree-host) .tk-agree{max-width:520px;margin-inline:auto}
:is(.page-take,.tk-agree-host) .tk-agree-title{font-family:var(--display);font-weight:300;font-size:31px;line-height:1.15;letter-spacing:-.015em;color:var(--ink)}
:is(.page-take,.tk-agree-host) .tk-agree-title:focus{outline:none}
:is(.page-take,.tk-agree-host) .tk-agree-line{margin-top:14px;max-width:52ch;font-size:16.5px;line-height:1.6;color:var(--muted)}
:is(.page-take,.tk-agree-host) .tk-agree-more{margin-top:14px}
:is(.page-take,.tk-agree-host) .tk-agree-link{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:14.5px;line-height:1.4;color:var(--blue-deep);
  text-decoration:underline;text-decoration-color:var(--cobalt-pale);text-decoration-thickness:1.5px;text-underline-offset:4px}
:is(.page-take,.tk-agree-host) .tk-agree-link:hover{text-decoration-color:currentColor}
:is(.page-take,.tk-agree-host) .tk-agree-out{flex:none}
:is(.page-take,.tk-agree-host) .tk-agree-actions{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
:is(.page-take,.tk-agree-host) .tk-agree-go{width:100%;min-height:54px;font-size:16px;letter-spacing:.01em}
/* "No thanks" under the agreement (Oct 8, 2026): the quieter choice, the same width */
:is(.page-take,.tk-agree-host) .tk-agree-no{width:100%;min-height:48px;margin-top:10px;font-size:15px}

/* in the card, where the setting puts it before the first question */
.page-take .tk-agree-pad{padding:40px 40px 38px}

/* under the step's buttons, once the sheet was closed without agreeing */
.page-take .tk-agree-note{max-width:46ch;margin:0 auto;text-align:center;font-size:14.5px;font-weight:600;line-height:1.5;color:var(--amber-text)}

/* on a report or result page, once the sheet was closed without agreeing: the same words and button stand under the page's heading,
   where the result will be, on a white card with a hairline edge (.box), as wide as the sheet */
.tk-agree-stand{margin-top:28px}
.tk-agree-host .tk-agree-card{max-width:560px;padding:36px 40px 32px}

/* ---------------------------------------------------------------- phones (the test's own 820px rules): a sheet from the bottom edge */
@media (max-width:820px){
  /* the page under a thumb stays where it is while the sheet is open (app/take.js sets the class). A wide screen leaves its page
     alone: locking it there would either jump the page sideways or leave the scrollbar's strip undimmed. */
  html.tk-sheet-open{overflow:hidden}
  :is(.page-take,.tk-agree-host) .tk-sheet{width:100%;max-width:100%;max-height:calc(100vh - 28px);max-height:calc(100dvh - 28px);margin:auto 0 0;
    border-width:1px 0 0;border-radius:16px 16px 0 0}
  :is(.page-take,.tk-agree-host) .tk-sheet[open]{animation-name:tk-sheet-up;animation-duration:.32s}
  :is(.page-take,.tk-agree-host) .tk-sheet-in{padding:30px 20px calc(22px + env(safe-area-inset-bottom,0px))}
  :is(.page-take,.tk-agree-host) .tk-sheet-x{top:8px;right:8px}
  :is(.page-take,.tk-agree-host) .tk-agree-title{font-size:26px}
  :is(.page-take,.tk-agree-host) .tk-agree-line{margin-top:12px;font-size:16px}
  :is(.page-take,.tk-agree-host) .tk-agree-actions{margin-top:22px;padding-top:18px}
  .page-take .tk-agree-pad{padding:28px 18px 28px}
  .tk-agree-stand{margin-top:22px}
  .tk-agree-host .tk-agree-card{padding:26px 18px 24px}
}

/* reduced motion: no arrival at all, on any screen (last, so the phone rule above cannot bring it back) */
@media (prefers-reduced-motion:reduce){
  :is(.page-take,.tk-agree-host) .tk-sheet[open],:is(.page-take,.tk-agree-host) .tk-sheet[open]::backdrop{animation:none}
  :is(.page-take,.tk-agree-host) .tk-sheet-x{transition:none}
}


/* ===== 23-finish.css ===== */
/* ==========================================================================
   23-finish.css · owner: A (registry, catalog, runners). Sep 26, 2026.
   The result drawn on an assessment's finish card (polish idea 1, D130; app/finish-result.js, app/take-views.js finishPanel). Each form
   is the report's own component, wrapped in the report page's own body classes (page-chapter, and page-sixfactor, page-facets,
   page-workstyle, page-pillars or page-selfesteem), so its chart draws with the report's own rules from 30-results.css, 34-report-
   pages.css, 36-*.css, 39-score-panel.css and 45-pillars.css. What is here only fits each one to a card about 620px wide, centred
   under the card's title, the way the approved drawing sets it (the overnight polish page, idea 1): the result's name first, a
   hairline, the picture, then the buttons. Nothing here changes how a report looks: every rule is scoped under .page-take .tk-result.
   Anything a report folds away under "About this information" is left off the card, and so are a chart's explaining sentences:
   the card is glanceable, one line at most beside the picture, and the full result is one tap away.
   ========================================================================== */

.page-take .tk-finish.has-result .tk-result-wrap{max-width:640px;margin:22px auto 0;text-align:left}
.page-take .tk-result{min-width:0}

/* the result's name: the tiles centred with their label, the reader's label under them (report-page.js letterTiles, codeTiles,
   resultLine) */
.page-take .tk-result .tk-result-id{display:flex;flex-direction:column;align-items:center;text-align:center}
.page-take .tk-result .rp-tiles{justify-content:center;margin-top:0}
.page-take .tk-result .rp-result{justify-content:center;margin-top:12px;font-size:20px}
.page-take .tk-result .rp-tiles+.rp-result{margin-top:12px}
/* the one line beside the picture: the report's own tagline, in the report's hero type */
.page-take .tk-result .tk-result-line{max-width:46ch;margin:12px auto 0;text-align:center;font:300 18px/1.5 var(--display);color:var(--muted)}
.page-take .tk-result-sixfactor .tk-result-line,.page-take .tk-result-facets .tk-result-line{margin-top:0}
/* the picture, under a hairline when the name is above it */
.page-take .tk-result .tk-result-chart{margin-top:18px}
.page-take .tk-result :is(.tk-result-id,.tk-result-line)+.tk-result-chart{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}

/* ---------------------------------------------------------------- Personality Standard: the dot plot (report-parts.js dotPlot) */
.page-take .tk-result .pr-plot-box{margin:0}
.page-take .tk-result .pr-sh{display:block;border-top:0;padding-top:0;margin:0 0 6px;text-align:center}
.page-take .tk-result .pr-sh h3{font:400 18px/1.3 var(--display);letter-spacing:-.005em;color:var(--ink)}
.page-take .tk-result .pr-plot-fig{max-width:none;margin:0}
.page-take .tk-result .pr-plot{padding:24px 0 8px}
.page-take .tk-result .pr-plot-band{left:40%;right:40px}
.page-take .tk-result .pr-plot-band em{font-size:10.5px}
.page-take .tk-result .pr-plot-row{grid-template-columns:40% minmax(0,1fr) 40px;height:auto;min-height:38px;padding:2px 0}
.page-take .tk-result .pr-plot-lab{padding-right:14px}
.page-take .tk-result .pr-plot-lab b{font-size:13.5px}
.page-take .tk-result .pr-plot-lab span{font-size:10.5px}
.page-take .tk-result .pr-plot-track i{width:11px;height:11px;margin:-5.5px 0 0 -5.5px}
.page-take .tk-result .pr-plot-row.is-out .pr-plot-track i{width:14px;height:14px;margin:-7px 0 0 -7px}
.page-take .tk-result .pr-plot-v{padding-left:12px;font-size:14px}
.page-take .tk-result .pr-plot-axis{margin:8px 40px 0 40%;height:26px;font-size:10.5px}
.page-take .tk-result :is(.pr-app-fold,.pr-plot-hard){display:none}

/* ---------------------------------------------------------------- Character Profile: the six factors (sixfactor-report.js chart) */
.page-take .tk-result .sf-plot{max-width:none;margin:0}
.page-take .tk-result .sf-row{grid-template-columns:40% minmax(0,1fr) 44px;min-height:40px}
.page-take .tk-result .sf-lab{padding-right:14px}
.page-take .tk-result .sf-lab b{font-size:13.5px}
.page-take .tk-result .sf-lab span{font-size:10.5px}
.page-take .tk-result .sf-you{width:13px;height:13px;margin:-6.5px 0 0 -6.5px}
.page-take .tk-result .sf-v{padding-left:12px;font-size:14px}
.page-take .tk-result .sf-axis{margin:8px 44px 0 40%;height:24px;font-size:10.5px}
.page-take .tk-result .sf-legend{margin-top:10px;font-size:11.5px}

/* ---------------------------------------------------------------- Deep Analysis: the five traits (chapter-facets.js bar), one row each:
   the name, the report's 0 to 100 track with the group's typical range and average, the number */
.page-take .tk-result .fc-rows{max-width:none}
.page-take .tk-result .fc-row{grid-template-columns:40% minmax(0,1fr) 40px;grid-template-areas:"name track val";align-items:center;gap:0;
  padding:9px 0;border-bottom:1px solid var(--line)}
.page-take .tk-result .fc-row:last-child{border-bottom:0}
.page-take .tk-result .fc-name{padding-right:14px;text-align:right;font-size:13.5px;font-weight:700}
.page-take .tk-result .fc-track{height:8px}
.page-take .tk-result .fc-dot{width:14px;height:14px;margin:-7px 0 0 -7px;background:var(--blue-deep)}
.page-take .tk-result .fc-val{padding-left:12px;justify-self:start;font-size:14px}

/* ---------------------------------------------------------------- Work styles: the style map (chapter-workstyle.js styleRose) */
.page-take .tk-result .ws-rose-fig{max-width:340px;margin-inline:auto}
.page-take .tk-result .ws-rose-cap{display:none}

/* ---------------------------------------------------------------- Five pillars: how each is going beside how much it matters
   (chapter-pillars.js gapRow and goalRow), without each row's explaining sentence */
.page-take .tk-result .pl-gap-legend,.page-take .tk-result .pl-goal-legend{justify-content:center;margin-bottom:6px;font-size:13px}
/* the name column holds the widest tag under a name ("Matters most to you right now") */
.page-take .tk-result .pl-gap-row{grid-template-columns:188px minmax(0,1fr) auto;gap:4px 14px;padding:11px 0}
.page-take .tk-result .pl-gap-name b{font-size:14.5px}
.page-take .tk-result .pl-group-name{font-size:14.5px}
.page-take .tk-result .pl-gap-text{display:none}
.page-take .tk-result .pl-gap-nums{font-size:12.5px}

/* ---------------------------------------------------------------- Self-esteem: the score on its range (score-panel.js plainFigure,
   scalePlot), the figure centred over the scale */
.page-take .tk-result .tk-result-fig{text-align:center}
.page-take .tk-result .big-score{margin:0}
.page-take .tk-result .big-score-num{justify-content:center}
.page-take .tk-result .big-score-n{font-size:64px}
.page-take .tk-result .big-score-cap{max-width:none;margin:8px auto 0;padding:0;text-align:center}
.page-take .tk-result-selfesteem .tk-result-fig+.tk-result-chart{margin-top:14px;padding-top:0;border-top:0}
.page-take .tk-result .sp-field{height:72px}

/* ---------------------------------------------------------------- phones */
@media (max-width:820px){
  .page-take .tk-finish.has-result .tk-result-wrap{margin-top:18px}
  .page-take .tk-result .rp-result{font-size:18px}
  .page-take .tk-result .tk-result-line{font-size:16.5px}
  .page-take .tk-result .pr-plot-band{left:42%;right:30px}
  .page-take .tk-result .pr-plot-row{grid-template-columns:42% minmax(0,1fr) 30px;min-height:42px}
  .page-take .tk-result .pr-plot-lab{padding-right:10px}
  .page-take .tk-result .pr-plot-lab b{font-size:12px}
  .page-take .tk-result .pr-plot-lab span{font-size:10px}
  .page-take .tk-result .pr-plot-v{padding-left:8px;font-size:13px}
  .page-take .tk-result .pr-plot-axis{margin:8px 30px 0 42%}
  /* the report's phone axis keeps 0, 50 and "100 percentile"; on a track half a card wide the last two meet, so 50 goes (each row's
     own tick still marks it) */
  .page-take .tk-result .pr-plot-axis span:nth-child(3){display:none}
  .page-take .tk-result .sf-row{grid-template-columns:42% minmax(0,1fr) 34px;min-height:44px}
  .page-take .tk-result .sf-lab{padding-right:10px}
  .page-take .tk-result .sf-lab b{font-size:12px}
  .page-take .tk-result .sf-lab span{font-size:10px}
  .page-take .tk-result .sf-v{padding-left:8px;font-size:13px}
  .page-take .tk-result .sf-axis{margin:8px 34px 0 42%}
  .page-take .tk-result .fc-row{grid-template-columns:42% minmax(0,1fr) 34px}
  .page-take .tk-result .fc-name{padding-right:10px;font-size:12.5px}
  .page-take .tk-result .fc-val{padding-left:8px;font-size:13px}
  .page-take .tk-result .ws-rose-fig{max-width:300px}
  .page-take .tk-result .pl-gap-row{grid-template-columns:minmax(0,1fr) auto}
  .page-take .tk-result .big-score-n{font-size:56px}
}


/* ===== 30-results.css ===== */
/* ==========================================================================
   30-results.css · owner: Results agent
   Pages: /results/ (the report). Markup: app/profile.js, app/report-parts.js and app/decision.js.
   EDITORIAL (Wayne, Sep 21, 2026: "i want this kind of style for our reprot"). The spec is the inline <style> of
   docs/mockups/site/report-overview.html and report-at-work.html: white paper; Source Serif 4 light for display and the lede, 400
   for section heads; Figtree for every label; hairline and ink rules above sections; BLUE is you, AMBER is worth your attention,
   GREY is everyone else. Glass only for chrome (the cover card, the contents sidebar); the soft field only behind the cover.
   The shared tokens and components are the foundation's (00-base.css, 05-components.css); this file holds the report's own layout.
   The shared report pieces (cover card, dot plot, letter columns) are scoped to both page classes, since the result pages
   (40-chapters.css) draw them too. The chapters are 32-domains.css, the contents sidebar 33-report-nav.css.
   ========================================================================== */

/* ---------------------------------------------------------------- the page and the cover field
   The field (mockups .field) sits behind the cover band only, reaching up under the glass bar, so everything below the cover is
   plain paper. It replaces the foundation's page-top field on this page. */
body.page-results::before{content:none}
.page-results .pr-cover{position:relative;isolation:isolate;padding:60px 0 56px}
.page-results .pr-cover::before{content:"";position:absolute;left:0;right:0;top:calc(-1 * var(--header-h,60px));bottom:0;z-index:-1;pointer-events:none;background:
  radial-gradient(760px 420px at 12% -10%,rgba(92,176,245,.30),transparent 62%),
  radial-gradient(620px 380px at 88% 8%,rgba(245,166,35,.17),transparent 64%),
  radial-gradient(900px 520px at 62% 104%,rgba(185,220,250,.34),transparent 66%)}
/* the cover belongs to the overview; a chapter opens straight onto its own headline (report-at-work.html) */
.page-results #profile[data-rp-open]:not([data-rp-open="overview"]) .pr-cover,
.page-results #profile[data-rp-open]:not([data-rp-open="overview"]) .pr-quality{display:none}
.page-results #profile[data-rp-open]:not([data-rp-open="overview"]) .rn-wrap{padding-top:52px}
.page-results .pr-msg-wrap{padding-top:24px}
.page-results .pr-msg-wrap .notice,.page-results .pr-quality .notice{max-width:760px}
.page-results .pr-quality{padding-bottom:24px}

/* ---------------------------------------------------------------- shared: the cover card (the one piece of glass) */
:is(.page-results,.page-chapter) .pr-hero-card{display:grid;grid-template-columns:1.25fr 1fr;gap:48px;align-items:end;padding:38px 40px 34px;
  background:var(--glass);-webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%);
  border:1px solid rgba(255,255,255,.75);border-radius:14px;box-shadow:var(--sh),inset 0 1px 0 rgba(255,255,255,.55)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ :is(.page-results,.page-chapter) .pr-hero-card{background:rgba(255,255,255,.92)} }
:is(.page-results,.page-chapter) .pr-hero-main,:is(.page-results,.page-chapter) .pr-hero-side{min-width:0}
:is(.page-results,.page-chapter) .pr-kick,:is(.page-results,.page-chapter) .pr-kicker{font:800 9.5px/1.4 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--blue-deep)}
:is(.page-results,.page-chapter) .pr-hero-h{margin-top:12px;font:300 66px/1.03 var(--display);letter-spacing:-.022em}
:is(.page-results,.page-chapter) .pr-hero-h:focus{outline:none}
:is(.page-results,.page-chapter) .pr-hero-h:focus-visible{outline:2px solid var(--blue-mark);outline-offset:6px}
:is(.page-results,.page-chapter) .pr-hero-h .accent-block{color:var(--blue-deep)}
:is(.page-results,.page-chapter) .pr-hero-tag{margin-top:16px;max-width:34ch;font:300 20px/1.5 var(--display);color:var(--muted)}
:is(.page-results,.page-chapter) .pr-hero-side{display:flex;gap:36px;align-items:flex-start}
:is(.page-results,.page-chapter) .pr-hero-lab{font:800 10px/1.4 var(--body);letter-spacing:.13em;text-transform:uppercase;color:var(--faint)}
:is(.page-results,.page-chapter) .pr-tiles{display:flex;gap:6px}
:is(.page-results,.page-chapter) .pr-hero-lab+.pr-tiles{margin-top:9px}
/* The same line the report's hero carries under the tiles (app/report-parts.js heroSide). */
:is(.page-results,.page-chapter) .pr-hero-from{max-width:40ch;margin-top:10px;font-size:13px;line-height:1.55;color:var(--muted)}
/* the tiles are the foundation's .lt (mockups V12): white, 1px ink, radius 5; .lt-soft dashed; a family class the blue wash */

/* ---------------------------------------------------------------- shared: rules, section heads, apparatus */
:is(.page-results,.page-chapter) .pr-solid{border:0;border-top:1px solid var(--ink)}
:is(.page-results,.page-chapter) .pr-hair{border:0;border-top:1px solid var(--line)}
:is(.page-results,.page-chapter) .pr-app{margin-top:14px;font:700 9.5px/1.6 var(--body);letter-spacing:.05em;text-transform:uppercase;color:var(--faint)}
:is(.page-results,.page-chapter) .pr-app b{font-weight:800;color:var(--muted)}
/* Sep 25, 2026: the apparatus line folds under the plot, and inside the fold it reads as the fold's own text rather than a caption. */
:is(.page-results,.page-chapter) .pr-app-fold .pr-app{margin-top:0;font:inherit;letter-spacing:0;text-transform:none;color:inherit}
:is(.page-results,.page-chapter) .pr-app-fold .pr-app b{font-weight:700;color:var(--ink)}
:is(.page-results,.page-chapter) .pr-sec-intro{margin:-8px 0 20px;max-width:64ch;font-size:14.5px;line-height:1.6;color:var(--muted)}
:is(.page-results,.page-chapter) .pr-more{margin-top:16px}
:is(.page-results,.page-chapter) .pr-more a{font:700 12.5px/1.4 var(--body);color:var(--blue-deep);text-decoration:none}
:is(.page-results,.page-chapter) .pr-more a:hover{text-decoration:underline}
:is(.page-results,.page-chapter) .pr-fine{margin-top:14px;max-width:72ch;font-size:12.5px;line-height:1.55;color:var(--muted)}
/* section heads in the report's reading column: the mockups' .h-s at 24px under the foundation's ink rule */
:is(.page-results,.page-chapter) .pr-sh h2,:is(.page-results,.page-chapter) .pr-sh h3,
.page-results .rn-main .sh h2,.page-results .rn-main .sh h3{font:400 24px/1.12 var(--display);letter-spacing:-.015em}
.page-results .pr-h-s{font:400 22px/1.12 var(--display);letter-spacing:-.015em}

/* ---------------------------------------------------------------- shared: the dot plot (mockups V1, drawn in HTML at the
   mockup's scale: the 560-unit SVG at 720px, so labels 193px, track 411px, values and the axis unit 116px) */
:is(.page-results,.page-chapter) .pr-plot-fig{max-width:720px;margin:0}
:is(.page-results,.page-chapter) .pr-plot{position:relative;padding:25px 0 12px}
:is(.page-results,.page-chapter) .pr-plot-band{position:absolute;top:0;bottom:0;left:193px;right:116px;pointer-events:none}
:is(.page-results,.page-chapter) .pr-plot-band i{position:absolute;left:25%;width:50%;top:21px;bottom:0;background:var(--blue-wash)}
:is(.page-results,.page-chapter) .pr-plot-band em{position:absolute;left:50%;top:5px;transform:translateX(-50%);font:700 11.5px/1 var(--body);font-style:normal;
  color:var(--faint);white-space:nowrap}
:is(.page-results,.page-chapter) .pr-plot-rows{position:relative;list-style:none}
:is(.page-results,.page-chapter) .pr-plot-row{display:grid;grid-template-columns:193px minmax(0,1fr) 116px;align-items:center;height:42.4px}
:is(.page-results,.page-chapter) .pr-plot-lab{padding-right:15px;text-align:right;min-width:0}
:is(.page-results,.page-chapter) .pr-plot-lab b{display:block;font:700 14.8px/1.15 var(--body);color:var(--ink)}
:is(.page-results,.page-chapter) .pr-plot-lab b a{color:inherit;text-decoration:none}
:is(.page-results,.page-chapter) .pr-plot-lab b a:hover{color:var(--blue-deep);text-decoration:underline}
:is(.page-results,.page-chapter) .pr-plot-lab span{display:block;margin-top:2px;font:600 11.5px/1.15 var(--body);color:var(--faint)}
/* the row line, the tick at the 50th on every row (the dashed 50 line), and the dot: blue outside the band, grey inside */
:is(.page-results,.page-chapter) .pr-plot-track{position:relative;height:18px}
:is(.page-results,.page-chapter) .pr-plot-track::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:1px solid var(--rule-soft)}
:is(.page-results,.page-chapter) .pr-plot-track::after{content:"";position:absolute;left:50%;top:0;bottom:0;border-left:1px solid var(--grey)}
:is(.page-results,.page-chapter) .pr-plot-track i{position:absolute;z-index:1;top:50%;width:13px;height:13px;margin:-6.5px 0 0 -6.5px;border-radius:50%;background:var(--grey)}
:is(.page-results,.page-chapter) .pr-plot-row.is-out .pr-plot-track i{width:17px;height:17px;margin:-8.5px 0 0 -8.5px;background:var(--blue-mark)}
:is(.page-results,.page-chapter) .pr-plot-v{padding-left:18px;font:800 16px/1 var(--body);color:var(--muted);font-variant-numeric:tabular-nums}
:is(.page-results,.page-chapter) .pr-plot-row.is-out .pr-plot-v{color:var(--blue-deep)}
:is(.page-results,.page-chapter) .pr-plot-axis{position:relative;height:30px;margin:13px 116px 0 193px;border-top:1px solid var(--line);
  font:700 12px/1 var(--body);color:var(--faint);font-variant-numeric:tabular-nums}
:is(.page-results,.page-chapter) .pr-plot-axis span{position:absolute;top:12px;transform:translateX(-50%);white-space:nowrap}
:is(.page-results,.page-chapter) .pr-plot-axis span::before{content:"";position:absolute;left:50%;top:-12px;height:6px;border-left:1px solid var(--line)}
:is(.page-results,.page-chapter) .pr-plot-axis span:nth-child(1){left:0}
:is(.page-results,.page-chapter) .pr-plot-axis span:nth-child(2){left:25%}
:is(.page-results,.page-chapter) .pr-plot-axis span:nth-child(3){left:50%}
:is(.page-results,.page-chapter) .pr-plot-axis span:nth-child(4){left:75%}
:is(.page-results,.page-chapter) .pr-plot-axis span:nth-child(5){left:100%;transform:translateX(-.9em)}
:is(.page-results,.page-chapter) .pr-plot-axis span:nth-child(5)::before{left:.9em}
:is(.page-results,.page-chapter) .pr-plot-hard{margin-top:14px;display:grid;gap:6px;max-width:72ch;font-size:14px;line-height:1.55;color:var(--muted)}

/* ---------------------------------------------------------------- shared: the four letters in hairline columns (as the V13 spec) */
:is(.page-results,.page-chapter) .pr-lc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line)}
:is(.page-results,.page-chapter) .pr-lc{padding:16px 18px 4px;min-width:0}
:is(.page-results,.page-chapter) .pr-lc:first-child{padding-left:0}
:is(.page-results,.page-chapter) .pr-lc+.pr-lc{border-left:1px solid var(--rule-soft)}
:is(.page-results,.page-chapter) .pr-lc-top{display:flex;align-items:center;gap:12px}
:is(.page-results,.page-chapter) .pr-lc-state{font:800 9.5px/1.3 var(--body);letter-spacing:.11em;text-transform:uppercase;color:var(--blue-deep)}
:is(.page-results,.page-chapter) .pr-lc.is-near .pr-lc-state{color:var(--amber-text)}
:is(.page-results,.page-chapter) .pr-lc-name{margin-top:12px;font:400 18px/1.25 var(--display);letter-spacing:-.01em}
:is(.page-results,.page-chapter) .pr-lc-sub{margin-top:5px;font:500 13px/1.45 var(--body);color:var(--muted)}
:is(.page-results,.page-chapter) .pr-lc-t{margin-top:8px;padding-top:8px;border-top:1px solid var(--rule-soft);font-size:13px;line-height:1.5;color:var(--muted)}

/* ---------------------------------------------------------------- the reading column */
.page-results .pr-alias{position:absolute;width:0;height:0;overflow:hidden}
.page-results .pr-sec{position:relative;margin-top:48px}
.page-results .rn-dest>:first-child{margin-top:0}
.page-results .rn-dest[data-rp-dest="overview"]{padding-top:8px}
/* A destination lands under the site's bar by the page's one rule (00-base.css), plus the 24px it has always had here, where the
   report nav sticks beside the reading column (33-report-nav.css). Until Sep 27, 2026 this rule added the bar itself. */
.page-results .rn-dest,.page-results .rn-main section[id],.page-results .pr-alias{scroll-margin-top:24px}

/* ---------------------------------------------------------------- summary (mockups: Summary, .prose, .pull) */
.page-results .pr-summary .pr-kicker+.pr-sum-h{margin-top:10px}
.page-results .pr-sum-h{max-width:22ch;font:400 38px/1.12 var(--display);letter-spacing:-.015em}
.page-results .pr-prose{margin-top:22px}
.page-results .pr-prose p{max-width:64ch;font:400 16.5px/1.62 var(--display)}
.page-results .pr-prose p+p{margin-top:10px;text-indent:1.1em}
.page-results .pr-pull{margin-top:30px;max-width:52ch;padding-left:18px;border-left:2px solid var(--blue-mark);font:300 22px/1.36 var(--display);color:var(--blue-ink)}
.page-results .pr-scales{margin-top:44px}

/* ---------------------------------------------------------------- your life, area by area (mockups V18, V20) */
.page-results .pr-gauge-row{display:flex;align-items:flex-start;gap:44px;margin-top:22px}
.page-results .pr-gauge{flex:none;width:300px;display:grid;grid-template-columns:76px minmax(0,1fr);column-gap:23px;align-items:center;margin:0;padding:19px 0 0 10px}
.page-results .pr-gauge svg{width:76px;height:76px;overflow:visible}
.page-results .pr-gauge text{font:800 22px var(--body);fill:var(--ink)}
.page-results .pr-gauge figcaption{min-width:0}
.page-results .pr-gauge figcaption b{display:block;font:800 11px/1.35 var(--body);color:var(--ink)}
.page-results .pr-gauge figcaption span{display:block;margin-top:4px;font:600 10.5px/1.45 var(--body);color:var(--muted)}
.page-results .pr-gauge-t{padding-top:6px;min-width:0}
.page-results .pr-gauge-t p{margin-top:8px;max-width:58ch;font-size:14.5px;line-height:1.55;color:var(--muted)}
.page-results .pr-areas{list-style:none;margin-top:18px}
.page-results .pr-area{display:grid;grid-template-columns:14px 200px minmax(0,1fr) auto;gap:16px;align-items:baseline;padding:14px 0;
  border-bottom:1px solid var(--rule-soft);color:var(--ink);text-decoration:none}
.page-results .pr-area-dot{width:9px;height:9px;border-radius:50%;background:var(--blue-mark);transform:translateY(-1px)}
.page-results .pr-area.is-part .pr-area-dot{background:var(--amber)}
.page-results .pr-area-nm{font:800 11px/1.3 var(--body);letter-spacing:.05em;text-transform:uppercase}
.page-results .pr-area-ld{font:300 17px/1.35 var(--display)}
.page-results .pr-area-go{font:700 11.5px/1.3 var(--body);color:var(--blue-deep);white-space:nowrap}
.page-results .pr-area:hover .pr-area-ld{color:var(--blue-deep)}
.page-results .pr-area:hover .pr-area-go{text-decoration:underline}
.page-results .pr-closing{margin-top:44px}

/* ---------------------------------------------------------------- your interests and work values (ranked bars, mockups V8) */
.page-results .pr-inst-grid{max-width:560px}
.page-results .pr-inst-grid.is-two{max-width:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px}
.page-results .pr-inst{min-width:0}
.page-results .pr-inst-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.page-results .pr-inst-part{font:700 9.5px/1.4 var(--body);letter-spacing:.05em;text-transform:uppercase;color:var(--faint)}
.page-results .pr-inst-h{margin:10px 0 14px;font:400 20px/1.25 var(--display);letter-spacing:-.01em}
:is(.page-results,.page-chapter) .pr-bars{list-style:none}
:is(.page-results,.page-chapter) .pr-bar{display:grid;grid-template-columns:120px minmax(0,1fr) 34px;gap:12px;align-items:center;padding:5px 0;font:600 13px/1.3 var(--body);color:var(--muted)}
:is(.page-results,.page-chapter) .pr-bar.is-on{color:var(--ink);font-weight:800}
:is(.page-results,.page-chapter) .pr-bar-t{height:10px;background:var(--rule-soft);overflow:hidden}
:is(.page-results,.page-chapter) .pr-bar-t i{display:block;height:100%;background:var(--grey)}
:is(.page-results,.page-chapter) .pr-bar.is-on .pr-bar-t i{background:var(--blue-mark)}
:is(.page-results,.page-chapter) .pr-bar-v{text-align:right;font-weight:800;font-variant-numeric:tabular-nums}
:is(.page-results,.page-chapter) .pr-bar.is-on .pr-bar-v{color:var(--blue-deep)}
.page-results .pr-inst-note{max-width:60ch}
.page-results .pr-inst .review-mark{margin:10px 0}
/* the named place for the other instruments: in review a tagged placeholder (D50), otherwise nothing at all */
.page-results .pr-other-head{align-items:center}
.page-results .pr-ph-tag{display:inline-flex;align-items:center;padding:3px 10px;border:1px dashed var(--ref-deep);border-radius:999px;background:#fff;
  font:700 11.5px/1.3 var(--body);color:var(--ink);white-space:nowrap}
.page-results .pr-other-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.page-results .pr-other-card{display:block;height:120px;border-top:1px solid var(--line);background:repeating-linear-gradient(135deg,transparent 0 8px,var(--rule-soft) 8px 9px)}

/* ---------------------------------------------------------------- example jobs: three hairline lists */
.page-results .pr-intro{max-width:68ch;margin-bottom:20px;font-size:15px;line-height:1.6;color:var(--muted)}
.page-results .pr-jobs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 32px}
.page-results .pr-jobs.is-one{grid-template-columns:minmax(0,420px)}
.page-results .pr-jobs-col{min-width:0}
.page-results .pr-jobs-n{margin-right:8px;color:var(--faint)}
.page-results .pr-jobs-list{list-style:none;margin-top:10px;border-top:1px solid var(--line)}
.page-results .pr-jobs-list li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 0;border-bottom:1px solid var(--rule-soft)}
.page-results .pr-jobs-list a{font:600 14.5px/1.35 var(--body);color:var(--ink);text-decoration:none}
.page-results .pr-jobs-list a:hover{color:var(--blue-deep);text-decoration:underline}
.page-results .pr-job-code{flex:none;font:800 10.5px/1 var(--body);letter-spacing:.1em;color:var(--faint)}
.page-results .pr-jobs-none{margin-top:10px;padding-top:10px;border-top:1px solid var(--line);font-size:14px;line-height:1.5;color:var(--muted)}
.page-results .pr-jobs-tie{max-width:68ch;color:var(--muted)}
.page-results .pr-also-h{margin:32px 0 14px;font:400 19px/1.2 var(--display)}
.page-results .pr-fit{margin-top:26px}

/* ---------------------------------------------------------------- where your answers agree: two columns, blue and amber */
.page-results .pr-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;align-items:start}
.page-results .pr-col{min-width:0}
.page-results .pr-col-h{display:flex;align-items:center;gap:9px;padding-bottom:10px;font:800 9.5px/1.4 var(--body);letter-spacing:.13em;text-transform:uppercase;color:var(--blue-deep)}
.page-results .pr-col.is-apart .pr-col-h{color:var(--amber-text)}
.page-results .pr-col-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--blue-mark)}
.page-results .pr-col.is-apart .pr-col-dot{background:var(--amber)}
.page-results .pr-reading{padding:16px 0 18px;border-top:1px solid var(--line)}
.page-results .pr-reading-title{font:400 18px/1.25 var(--display);letter-spacing:-.01em}
.page-results .pr-lenses{margin-top:6px;font:700 9.5px/1.5 var(--body);letter-spacing:.05em;text-transform:uppercase;color:var(--faint)}
.page-results .pr-reading-text{margin-top:8px;font-size:14.5px;line-height:1.55}
.page-results .pr-col-none{padding:16px 0;border-top:1px solid var(--line);font-size:14.5px;line-height:1.55;color:var(--muted)}
.page-results .pr-together-note{margin-top:20px;max-width:72ch;color:var(--muted);font-weight:500}

/* ---------------------------------------------------------------- with other people: the shared card, set open on the paper */
.page-results .pr-others{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 32px;margin-top:8px}
.page-results .pr-others>.wo-card{border:0;border-top:1px solid var(--line);border-radius:0;background:none}
.page-results .pr-others .wo-band{padding:14px 0 4px;color:var(--ink)}
.page-results .pr-others .wo-name b{font:400 17px/1.2 var(--display)}
.page-results .pr-others .wo-name small{color:var(--muted);font-weight:600}
.page-results .pr-others .wo-body{padding:0 0 18px}
.page-results .pr-others .wo-body dt{margin-top:12px;font:800 9.5px/1.4 var(--body);letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.page-results .pr-others .wo-body dd{font-size:14px;font-weight:400}
.page-results .pr-others-foot{margin-top:14px;max-width:80ch}

/* ---------------------------------------------------------------- the decision comparison (app/decision.js), open on the paper */
.page-results .dc{padding:0;border:0;border-radius:0;background:none}
.page-results .dc-msg{margin-bottom:18px}
.page-results .dc-saved+.dc-saved{margin-top:30px;padding-top:24px;border-top:1px solid var(--line)}
.page-results .dc-saved-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px 20px;margin-bottom:14px}
.page-results .dc-title{margin-top:4px;font:400 21px/1.2 var(--display)}
.page-results .dc-title:focus{outline:none}
.page-results .dc-title:focus-visible{outline:2px solid var(--blue-mark);outline-offset:3px}
.page-results .dc-confirm{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:10px 14px;border-left:2px solid var(--amber);background:var(--amber-wash)}
.page-results .dc-table{table-layout:fixed}
.page-results .dc-table th:first-child{width:30%}
.page-results .dc-table tbody th{color:var(--ink);text-transform:none;letter-spacing:0;font-size:14.5px;font-weight:700;line-height:1.35}
.page-results .dc-q{display:block}
.page-results .dc-ev{display:flex;flex-wrap:wrap;align-items:center;gap:3px;margin-top:8px}
.page-results .dc-mark{display:block;font:800 12.5px/1.3 var(--body);margin-bottom:3px}
.page-results .dc-note{margin-top:14px}
.page-results .dc-new{margin-top:20px}
.page-results .dc-note~.dc-form{margin-top:24px;padding-top:22px;border-top:1px solid var(--line)}
.page-results .dc-form-title{font:400 19px/1.2 var(--display)}
.page-results .dc-form-head .small{margin-top:8px;max-width:72ch;color:var(--muted)}
.page-results .dc-title-field{margin-top:18px;max-width:560px}
.page-results .dc-options{display:grid;grid-template-columns:repeat(var(--n,2),minmax(0,1fr));gap:0 32px;margin-top:20px}
.page-results .dc-option{min-width:0;padding:0 0 18px;border:0;border-top:1px solid var(--ink)}
.page-results .dc-legend{display:flex;align-items:center;gap:10px;padding:12px 0 4px;font:800 9.5px/1.4 var(--body);letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.page-results .dc-letter{display:grid;place-items:center;width:24px;height:24px;border:1px solid var(--ink);border-radius:5px;background:#fff;color:var(--ink);font:800 12px/1 var(--body);letter-spacing:0}
.page-results .dc-field{margin-top:14px}
.page-results .dc-select{appearance:none;-webkit-appearance:none;padding-right:44px;cursor:pointer;line-height:1.3;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%230D1420' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center}
.page-results .dc-error:not(:empty){margin-top:18px}
.page-results .dc-actions{margin-top:22px}

/* ---------------------------------------------------------------- your assessments: one hairline row each */
.page-results .pr-as{border-bottom:1px solid var(--line)}
.page-results .pr-as-card{padding:16px 0 14px;border-top:1px solid var(--line)}
.page-results .pr-as-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.page-results .pr-as-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--blue-mark);transform:translateY(-1px)}
.page-results .pr-as-card.is-pending .pr-as-dot{background:transparent;border:1.5px solid var(--grey)}
.page-results .pr-as-name{font:400 20px/1.2 var(--display);letter-spacing:-.01em}
.page-results .pr-as-status{margin-left:auto;font:800 9.5px/1.4 var(--body);letter-spacing:.11em;text-transform:uppercase;color:var(--blue-deep)}
.page-results .pr-as-card.is-pending .pr-as-status{color:var(--amber-text)}
.page-results .pr-as-body{padding-left:18px}
.page-results .pr-as-results{list-style:none;margin-top:6px}
.page-results .pr-as-result{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:14px;align-items:baseline;padding:8px 0;color:inherit;text-decoration:none}
.page-results .pr-as-results li+li{border-top:1px solid var(--rule-soft)}
.page-results .pr-as-label{grid-column:1;font:800 9.5px/1.4 var(--body);letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.page-results .pr-as-summary{grid-column:1;margin-top:2px;font:300 17px/1.35 var(--display)}
.page-results .pr-as-arrow{grid-column:2;grid-row:1/3;align-self:center;font-weight:700;color:var(--blue-deep)}
.page-results .pr-as-result:hover .pr-as-summary{color:var(--blue-deep)}
.page-results .pr-as-text{margin-top:8px;max-width:64ch;font-size:14.5px;line-height:1.55;color:var(--muted)}
.page-results .pr-card-action{margin-top:12px}
.page-results .pr-as-foot{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:10px;padding-left:18px;font:700 9.5px/1.6 var(--body);letter-spacing:.05em;text-transform:uppercase;color:var(--faint)}
.page-results .pr-as-foot a{color:var(--blue-deep);text-decoration:none}
.page-results .pr-as-foot a:hover{text-decoration:underline}

/* ---------------------------------------------------------------- your data: plain, the delete control keeps its weight */
.page-results .pr-data{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px 32px;align-items:start}
.page-results .pr-data-main .pr-kicker{color:var(--muted)}
.page-results .pr-data-main .small{margin-top:8px;max-width:70ch;color:var(--muted)}
.page-results .pr-data-main a{font-weight:700;color:var(--blue-deep)}
.page-results .pr-confirm{grid-column:1/-1;padding:14px 0 0 16px;border-left:2px solid var(--amber)}
.page-results .pr-confirm-h{font:400 18px/1.2 var(--display)}
.page-results .pr-confirm-h:focus{outline:none}
.page-results .pr-confirm .small{margin-top:8px;max-width:68ch;color:var(--muted)}

/* ---------------------------------------------------------------- questions and credits */
.page-results .pr-credits{max-width:80ch}

/* ---------------------------------------------------------------- the paid report (Wayne, Sep 21: "reports are paid, not free")
   The unlock panel sits in the blue wash between two ink rules, like the mockups' pair. A locked section keeps its heading, fades
   its first line and says it is part of the full report; its content is never in the page. */
.page-results .pr-unlock{border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);background:var(--blue-wash)}
.page-results .pr-unlock-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,280px);gap:28px 40px;align-items:end;padding:26px 28px 28px}
.page-results .pr-unlock-h{margin-top:10px;font:300 34px/1.08 var(--display);letter-spacing:-.02em}
.page-results .pr-unlock-p{margin-top:12px;max-width:52ch;font:300 17px/1.5 var(--display);color:var(--muted)}
.page-results .pr-unlock-list{list-style:none;margin-top:14px;max-width:60ch}
.page-results .pr-unlock-list li{position:relative;padding:5px 0 5px 15px;font-size:14px;line-height:1.5}
.page-results .pr-unlock-list li::before{content:"";position:absolute;left:0;top:14px;width:7px;height:2px;background:var(--blue-mark)}
.page-results .pr-unlock-buy{display:grid;justify-items:start;gap:12px;min-width:220px}
.page-results .pr-unlock-price{font:300 44px/1 var(--display);letter-spacing:-.02em;color:var(--ink)}
.page-results .pr-unlock-buy .review-mark{margin:0}
.page-results .pr-unlock.is-compact .pr-unlock-h{font-size:28px}
.page-results .is-locked .sh{margin-bottom:14px}
.page-results .pr-locked-t{max-width:64ch;font:400 16px/1.6 var(--display);color:var(--ink);
  -webkit-mask-image:linear-gradient(90deg,#000 20%,transparent 92%);mask-image:linear-gradient(90deg,#000 20%,transparent 92%);opacity:.55;
  white-space:nowrap;overflow:hidden;user-select:none}
.page-results .pr-locked-note{display:flex;align-items:center;gap:8px;margin-top:10px;font:800 9.5px/1.4 var(--body);letter-spacing:.11em;text-transform:uppercase;color:var(--amber-text)}
.page-results .pr-locked-note svg,.page-results .rn-lock svg{width:11px;height:12px;flex:none}
.page-results .pr-locked-note a{color:var(--blue-deep);text-decoration:none}
.page-results .pr-locked-note a:hover{text-decoration:underline}
/* review only: the switch that lets Wayne read the full report while the lock is on */
/* it wears the review tools' own tag (99-review.css .review-mark); this only places it and gives its button a shape */
.page-results .pr-preview{align-items:center;margin:0 0 22px}
.page-results .pr-preview button{margin-left:auto;padding:5px 12px;border:1px solid currentColor;border-radius:6px;background:#fff;color:inherit;font:700 13px/1.2 var(--body)}
.page-results .pr-preview button:hover{text-decoration:underline}

/* the placeholder checkout at /unlock/ (src/pages/unlock.mjs) */
.page-unlock .ul-hero{max-width:720px;padding-top:28px}
.page-unlock .ul-kick{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px}
.page-unlock .ul-hero h1{margin-top:14px}
.page-unlock .ul-hero .lede{margin-top:18px}
.page-unlock .ul-hero .btn-row{margin-top:28px}
.page-unlock .pr-ph-tag{display:inline-flex;align-items:center;padding:3px 10px;border:1px dashed var(--ref-deep);border-radius:999px;background:#fff;
  font:700 11.5px/1.3 var(--body);color:var(--ink);white-space:nowrap}

/* ---------------------------------------------------------------- the empty page (no answers yet) */
.page-results .pr-hero.is-empty{padding-bottom:8px}
.page-results .pr-hero.is-empty h1{font-size:60px;margin-top:12px}
.page-results .pr-hero.is-empty h1:focus{outline:none}
.page-results .pr-msg{margin-bottom:22px;max-width:720px}
.page-results .pr-empty-split{align-items:start}
.page-results .pr-lede{margin-top:16px;max-width:46ch}
.page-results .pr-how{padding:22px 24px}
.page-results .pr-how-title{font:400 20px/1.2 var(--display)}
.page-results .pr-how ol{list-style:none;margin-top:6px}
.page-results .pr-how li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:14px;align-items:start;padding:14px 0;border-bottom:1px solid var(--rule-soft)}
.page-results .pr-how li:last-child{border-bottom:0;padding-bottom:0}
.page-results .pr-how b{display:block;font-weight:700;font-size:15px;line-height:1.3}
.page-results .pr-how p{margin-top:3px;font-size:14px;line-height:1.5;color:var(--muted)}
.page-results .pr-glance{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:0 32px}
.page-results .pr-card{display:flex;flex-direction:column;min-width:0;border:0;border-top:1px solid var(--ink);border-radius:0;background:none}
.page-results .pr-band{padding:14px 0 6px}
.page-results .pr-band-num{font:800 9.5px/1.4 var(--body);letter-spacing:.11em;color:var(--faint)}
.page-results .pr-card-body{flex:1;display:flex;flex-direction:column;align-items:flex-start;padding:0 0 14px}
.page-results .pr-card-big{margin-top:4px;font:400 22px/1.15 var(--display);letter-spacing:-.01em}
.page-results .pr-card-sub{margin-top:8px;font-size:14px;line-height:1.5;color:var(--muted)}
.page-results .pr-card-foot{border-top:1px solid var(--line);padding:10px 0;font:700 9.5px/1.6 var(--body);letter-spacing:.05em;text-transform:uppercase;color:var(--faint)}
.page-results .pr-mini{list-style:none;width:100%;margin-top:10px}
.page-results .pr-mini-row{display:grid;grid-template-columns:minmax(0,1fr) 30px;gap:10px;align-items:end;margin-top:9px;font:600 12.5px/1.2 var(--body)}
.page-results .pr-mini-name{display:block;margin-bottom:5px}
.page-results .pr-mini-v{text-align:right;color:var(--faint)}
.page-results .pr-blank-tiles{display:flex;gap:6px;margin-top:16px}
.page-results .pr-blank-dims{list-style:none;width:100%;margin-top:16px}
.page-results .pr-blank-dims li{display:grid;grid-template-columns:78px minmax(0,1fr) 78px;gap:10px;align-items:center;margin-top:12px;font:600 12px/1.2 var(--body)}
.page-results .pr-blank-dims li span:last-child{text-align:right}
.page-results .pr-blank-hex{width:100%;margin-top:10px}
.page-results .pr-blank-hex .hex{max-width:220px}

/* ---------------------------------------------------------------- narrower screens */
@media (max-width:1100px){
  :is(.page-results,.page-chapter) .pr-hero-h{font-size:56px}
  .page-results .pr-jobs,.page-results .pr-others{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* the mockups' 390px rules (@media max-width:820px) */
@media (max-width:820px){
  .page-results .pr-cover{padding:32px 0 36px}
  :is(.page-results,.page-chapter) .pr-hero-card{grid-template-columns:minmax(0,1fr);gap:30px;align-items:start;padding:28px 22px 26px}
  :is(.page-results,.page-chapter) .pr-hero-h{font-size:38px}
  :is(.page-results,.page-chapter) .pr-hero-side{flex-wrap:wrap;gap:24px}
  :is(.page-results,.page-chapter) .pr-hero-tag{max-width:none}
  .page-results .pr-sum-h{font-size:30px}
  .page-results .pr-prose p,.page-results .pr-pull{max-width:none}
  .page-results .pr-pull{font-size:20px}
  /* the dot plot keeps its real text, with narrower label and value columns */
  :is(.page-results,.page-chapter) .pr-plot-band{left:128px;right:34px}
  :is(.page-results,.page-chapter) .pr-plot-row{grid-template-columns:128px minmax(0,1fr) 34px;height:auto;min-height:46px;padding:4px 0}
  :is(.page-results,.page-chapter) .pr-plot-lab{padding-right:8px}
  :is(.page-results,.page-chapter) .pr-plot-lab b{font-size:12px;overflow-wrap:normal}
  :is(.page-results,.page-chapter) .pr-plot-lab span{font-size:10px}
  :is(.page-results,.page-chapter) .pr-plot-v{padding-left:8px;font-size:14px}
  :is(.page-results,.page-chapter) .pr-plot-axis{margin:13px 34px 0 128px;font-size:10.5px}
  :is(.page-results,.page-chapter) .pr-plot-axis span:nth-child(2),:is(.page-results,.page-chapter) .pr-plot-axis span:nth-child(4){display:none}
  :is(.page-results,.page-chapter) .pr-plot-axis span:nth-child(5){transform:translateX(-100%)}
  :is(.page-results,.page-chapter) .pr-plot-axis span:nth-child(5)::before{left:auto;right:0}
  :is(.page-results,.page-chapter) .pr-lc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  :is(.page-results,.page-chapter) .pr-lc:nth-child(3){padding-left:0;border-left:0}
  :is(.page-results,.page-chapter) .pr-lc:nth-child(n+3){border-top:1px solid var(--rule-soft);margin-top:12px}
  .page-results .pr-gauge-row{display:block}
  .page-results .pr-gauge{width:100%;max-width:300px;margin-bottom:16px}
  .page-results .pr-area{grid-template-columns:14px minmax(0,1fr);gap:6px 12px}
  .page-results .pr-area-ld,.page-results .pr-area-go{grid-column:2}
  .page-results .pr-inst-grid.is-two,.page-results .pr-two,.page-results .pr-jobs,.page-results .pr-others,.page-results .pr-glance,
  .page-results .dc-options{grid-template-columns:minmax(0,1fr);gap:0}
  .page-results .pr-inst+.pr-inst,.page-results .pr-col+.pr-col,.page-results .pr-jobs-col+.pr-jobs-col{margin-top:28px}
  :is(.page-results,.page-chapter) .pr-bar{grid-template-columns:104px minmax(0,1fr) 30px}
  .page-results .pr-data{grid-template-columns:minmax(0,1fr)}
  .page-results .pr-unlock-in{grid-template-columns:minmax(0,1fr);padding:22px 18px 24px}
  .page-results .pr-unlock-h{font-size:28px}
  .page-results .pr-unlock-buy .btn{width:100%}
  .page-results .pr-hero.is-empty h1{font-size:38px}
  /* the comparison table becomes one block per question */
  .page-results .dc-table-wrap{overflow:visible}
  .page-results .dc-table,.page-results .dc-table tbody,.page-results .dc-table tr,.page-results .dc-table th,.page-results .dc-table td{display:block;width:auto}
  .page-results .dc-table{table-layout:auto}
  .page-results .dc-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .page-results .dc-table tr{border-top:1px solid var(--ink)}
  .page-results .dc-table tr+tr{margin-top:18px}
  .page-results .dc-table th,.page-results .dc-table td{border:0}
  .page-results .dc-table th:first-child{width:auto}
  .page-results .dc-table tbody th{padding:10px 0}
  .page-results .dc-table td{border-top:1px solid var(--line);padding:10px 0}
  .page-results .dc-table td::before{content:attr(data-label);display:block;margin-bottom:5px;font:800 9.5px/1.4 var(--body);letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
  .page-results .dc-actions .btn{flex:1 1 100%}
}


/* ===== 32-domains.css ===== */
/* ==========================================================================
   32-domains.css · owner: results track (D81). The life areas on the report, one chapter each.
   EDITORIAL (Wayne, Sep 21, 2026): built to docs/mockups/site/report-at-work.html, whose inline <style> is the spec. The blue
   kicker, the display headline at 52px and 300, the serif lede, the V14 pair (the blue wash for what it gets you, the amber wash
   for where it costs you, between two ink rules), the serif paragraphs, the V13 scale, and the Next link in the serif blue. The
   four lenses the mockup has no place for follow the scale as a hairline two-column list. Every chapter is that template with
   different words.
   SEP 23, 2026 (Wayne, reading the chapter about people close to you): "formatting also kinda weird, why too much blank space
   there. maybe some illustration or whatever would be nice. either that or the text would flow across the screen"; "overall this
   section needs more visual presence, it's way too wordy". So: the headline block is a two-column grid with the chapter's own
   painting in the right half, which used to be empty; the long paragraph runs in two columns on a wide screen instead of a
   64ch ribbon with air beside it; the three pressures are drawn as a scale with a station under each part of the track; and the
   amber "One thing to try" pull line is gone with the block it belonged to.
   Markup: app/domains-view.js. What goes where: engine/domains.js. Words: content/domains.js.
   ========================================================================== */
:is(.page-results,.page-chapter) .pr-chapter{margin:0}
:is(.page-results,.page-chapter) .pr-chapter .ch{min-width:0}
/* the headline block: words left, painting right (it was one column with the right half empty) */
:is(.page-results,.page-chapter) .pr-chapter .ch-head{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:0 52px;align-items:start}
:is(.page-results,.page-chapter) .pr-chapter .ch-head-t{min-width:0}
:is(.page-results,.page-chapter) .pr-chapter .ch-art{margin-top:6px;width:100%}
:is(.page-results,.page-chapter) .pr-chapter .ch-kick{font:800 9.5px/1.4 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--blue-deep)}
:is(.page-results,.page-chapter) .pr-chapter .ch-h{margin-top:12px;max-width:18ch;font:300 52px/1.03 var(--display);letter-spacing:-.022em}
:is(.page-results,.page-chapter) .pr-chapter .ch-h:focus{outline:none}
:is(.page-results,.page-chapter) .pr-chapter .ch-h:focus-visible{outline:2px solid var(--blue-mark);outline-offset:6px}
:is(.page-results,.page-chapter) .pr-chapter .ch-lede{margin-top:20px;max-width:52ch;font:300 19.5px/1.5 var(--display);color:var(--muted)}

/* ---------------------------------------------------------------- a half-finished area: amber, worth your attention */
:is(.page-results,.page-chapter) .pr-chapter .ch-gap{margin-top:26px;max-width:64ch;padding:2px 0 2px 18px;border-left:2px solid var(--amber)}
:is(.page-results,.page-chapter) .pr-chapter .ch-gap-k{font:800 10px/1.4 var(--body);letter-spacing:.13em;text-transform:uppercase;color:var(--amber-text)}
:is(.page-results,.page-chapter) .pr-chapter .ch-gap-t{margin-top:6px;font-size:14.5px;line-height:1.55;color:var(--muted)}
:is(.page-results,.page-chapter) .pr-chapter .ch-gap-go{display:inline-block;margin-top:8px;font:700 12.5px/1.4 var(--body);color:var(--blue-deep);text-decoration:none}
:is(.page-results,.page-chapter) .pr-chapter .ch-gap-go:hover{text-decoration:underline}

/* ---------------------------------------------------------------- V14 the pair */
:is(.page-results,.page-chapter) .pr-chapter .ch-pair{display:grid;grid-template-columns:1fr 1fr;margin-top:38px;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
:is(.page-results,.page-chapter) .pr-chapter .ch-pair>div{padding:18px 22px}
:is(.page-results,.page-chapter) .pr-chapter .ch-pair-a{background:var(--blue-wash)}
:is(.page-results,.page-chapter) .pr-chapter .ch-pair-b{background:var(--amber-wash)}
:is(.page-results,.page-chapter) .pr-chapter .ch-pair-k{font:800 9.5px/1.4 var(--body);letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
:is(.page-results,.page-chapter) .pr-chapter .ch-pair ul{list-style:none;margin-top:9px}
:is(.page-results,.page-chapter) .pr-chapter .ch-pair li{position:relative;padding:5px 0 5px 15px;font-size:13.5px;line-height:1.5}
:is(.page-results,.page-chapter) .pr-chapter .ch-pair li::before{content:"";position:absolute;left:0;top:11px;width:7px;height:2px;background:var(--blue-mark)}
:is(.page-results,.page-chapter) .pr-chapter .ch-pair-b li::before{background:var(--amber-mark)}

/* ---------------------------------------------------------------- the long paragraph, in two columns so it reads as a column
   of a magazine rather than a wall of text with air beside it (Wayne, Sep 23: "the text would flow across the screen") */
:is(.page-results,.page-chapter) .pr-chapter .ch-body{margin-top:38px;columns:2;column-gap:52px;column-rule:1px solid var(--rule-soft)}
:is(.page-results,.page-chapter) .pr-chapter .ch-body p{font:400 16.5px/1.62 var(--display)}
:is(.page-results,.page-chapter) .pr-chapter .ch-body p+p{margin-top:10px;text-indent:1.1em}

/* ---------------------------------------------------------------- V13 the three pressures, drawn as a scale */
:is(.page-results,.page-chapter) .pr-chapter .ch-press{margin-top:46px}
:is(.page-results,.page-chapter) .pr-chapter .ch-press-h{padding:18px 0 16px;font:400 22px/1.12 var(--display);letter-spacing:-.015em}
/* the marker row: the two ends, and "you, most days" over the middle of the track (the mockup's 800x54 figure) */
:is(.page-results,.page-chapter) .pr-chapter .ch-marker{position:relative;height:54px;font:700 11.5px/1 var(--body)}
:is(.page-results,.page-chapter) .pr-chapter .ch-m-end{position:absolute;top:14px;left:0;color:var(--muted)}
:is(.page-results,.page-chapter) .pr-chapter .ch-m-end.is-best{left:auto;right:0;font-weight:800;color:var(--blue-deep)}
:is(.page-results,.page-chapter) .pr-chapter .ch-m-pin{position:absolute;left:50%;top:0;bottom:0}
:is(.page-results,.page-chapter) .pr-chapter .ch-m-pin::before{content:"";position:absolute;left:-9px;top:11px;width:18px;height:18px;border:2.5px solid var(--blue-deep);border-radius:50%;background:#fff;box-sizing:border-box}
:is(.page-results,.page-chapter) .pr-chapter .ch-m-pin i{position:absolute;left:-1px;top:28px;bottom:2px;width:2px;background:var(--blue-deep)}
:is(.page-results,.page-chapter) .pr-chapter .ch-m-pin b{position:absolute;left:16px;top:14px;font-size:12px;font-weight:800;color:var(--blue-deep);white-space:nowrap}
:is(.page-results,.page-chapter) .pr-chapter .ch-track{display:grid;grid-template-columns:1fr 1fr 1fr;height:5px;margin-top:2px}
:is(.page-results,.page-chapter) .pr-chapter .ch-track i:nth-child(1){background:var(--grey)}
:is(.page-results,.page-chapter) .pr-chapter .ch-track i:nth-child(2){background:var(--cobalt-pale)}
:is(.page-results,.page-chapter) .pr-chapter .ch-track i:nth-child(3){background:var(--blue-mark)}
/* the arrival (app/motion.js .ch-marker): the pin travels in from the stretched end, faint, and settles over the middle, while the
   track fills behind it left to right. Until Sep 27, 2026 there was no transition here, so the pin started unseen and popped in. */
:is(.page-results,.page-chapter) .pr-chapter .ch-marker.m-go .ch-m-pin{transition:left .9s cubic-bezier(.2,.9,.2,1),opacity .3s ease-out}
:is(.page-results,.page-chapter) .pr-chapter .ch-track.m-go>i{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
:is(.page-results,.page-chapter) .pr-chapter .ch-track.m-go>i:nth-child(2){transition-delay:.09s}
:is(.page-results,.page-chapter) .pr-chapter .ch-track.m-go>i:nth-child(3){transition-delay:.18s}
/* each column is a station on the track above it: its own ground, and a dot sitting on the segment it belongs to */
:is(.page-results,.page-chapter) .pr-chapter .ch-spec{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 10px;margin-top:14px}
:is(.page-results,.page-chapter) .pr-chapter .ch-spec-col{position:relative;padding:22px 18px 18px;min-width:0;border-radius:var(--r);background:var(--quiet-bg)}
:is(.page-results,.page-chapter) .pr-chapter .ch-spec-col::before{content:"";position:absolute;left:50%;top:-19px;width:11px;height:11px;margin-left:-5.5px;border-radius:50%;border:2px solid #fff;background:var(--grey)}
:is(.page-results,.page-chapter) .pr-chapter .ch-spec-col.is-steady{background:var(--blue-wash)}
:is(.page-results,.page-chapter) .pr-chapter .ch-spec-col.is-steady::before{background:var(--cobalt-pale)}
:is(.page-results,.page-chapter) .pr-chapter .ch-spec-col.is-best::before{background:var(--blue-mark)}
:is(.page-results,.page-chapter) .pr-chapter .ch-spec h4{font:800 9.5px/1.4 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
:is(.page-results,.page-chapter) .pr-chapter .ch-spec .is-now h4{color:var(--blue-deep)}
:is(.page-results,.page-chapter) .pr-chapter .ch-spec ul{list-style:none;margin-top:8px}
:is(.page-results,.page-chapter) .pr-chapter .ch-spec li{padding:3px 0;font-size:13px;line-height:1.45;color:var(--muted)}
:is(.page-results,.page-chapter) .pr-chapter .ch-spec .is-now li{color:var(--ink)}
:is(.page-results,.page-chapter) .pr-chapter .ch-app{margin-top:18px}

/* ---------------------------------------------------------------- the four more lenses: two columns between hairlines */
:is(.page-results,.page-chapter) .pr-chapter .ch-lenses{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;margin-top:40px;border-bottom:1px solid var(--line)}
:is(.page-results,.page-chapter) .pr-chapter .ch-lens{min-width:0;padding:16px 0 18px;border-top:1px solid var(--line)}
:is(.page-results,.page-chapter) .pr-chapter .ch-lens-k{font:800 9.5px/1.4 var(--body);letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
:is(.page-results,.page-chapter) .pr-chapter .ch-lens-line{margin-top:8px;font:300 19px/1.4 var(--display)}
:is(.page-results,.page-chapter) .pr-chapter .ch-ev{margin-top:8px;font-size:13px;line-height:1.5;color:var(--muted)}
:is(.page-results,.page-chapter) .pr-chapter .ch-lens-list{list-style:none;margin-top:8px}
:is(.page-results,.page-chapter) .pr-chapter .ch-lens-list li{position:relative;padding:4px 0 4px 15px;font-size:13.5px;line-height:1.5}
:is(.page-results,.page-chapter) .pr-chapter .ch-lens-list li::before{content:"";position:absolute;left:0;top:11px;width:7px;height:2px;background:var(--ref-deep)}

/* ---------------------------------------------------------------- Next */
:is(.page-results,.page-chapter) .pr-chapter .ch-foot-rule{margin-top:44px}
:is(.page-results,.page-chapter) .pr-chapter .ch-next{display:flex;align-items:baseline;gap:12px;margin-top:22px}
:is(.page-results,.page-chapter) .pr-chapter .ch-next-k{flex:none;font:800 10px/1.4 var(--body);letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
:is(.page-results,.page-chapter) .pr-chapter .ch-next-a{font:300 22px/1.35 var(--display);color:var(--blue-deep);text-decoration:none}
:is(.page-results,.page-chapter) .pr-chapter .ch-next-a span{color:var(--muted)}
:is(.page-results,.page-chapter) .pr-chapter .ch-next-a span[aria-hidden]{color:var(--blue-deep)}
:is(.page-results,.page-chapter) .pr-chapter .ch-next-a:hover{text-decoration:underline;text-decoration-thickness:1px}

/* ---------------------------------------------------------------- the mockups' 390px rules */
/* one column of text is narrower than about 46 characters below this, which reads worse than the wall it replaced */
@media (max-width:1080px){
  :is(.page-results,.page-chapter) .pr-chapter .ch-body{columns:auto;column-rule:none}
  :is(.page-results,.page-chapter) .pr-chapter .ch-body p{max-width:64ch}
}
@media (max-width:820px){
  :is(.page-results,.page-chapter) .pr-chapter .ch-head{grid-template-columns:minmax(0,1fr);gap:0}
  :is(.page-results,.page-chapter) .pr-chapter .ch-art{margin-top:24px}
  :is(.page-results,.page-chapter) .pr-chapter .ch-h{font-size:38px;max-width:none}
  :is(.page-results,.page-chapter) .pr-chapter .ch-lede,:is(.page-results,.page-chapter) .pr-chapter .ch-body p{max-width:none}
  :is(.page-results,.page-chapter) .pr-chapter .ch-pair,:is(.page-results,.page-chapter) .pr-chapter .ch-spec,:is(.page-results,.page-chapter) .pr-chapter .ch-lenses{grid-template-columns:minmax(0,1fr)}
  :is(.page-results,.page-chapter) .pr-chapter .ch-pair>div+div{border-top:1px solid var(--line)}
  :is(.page-results,.page-chapter) .pr-chapter .ch-spec{gap:10px 0}
  :is(.page-results,.page-chapter) .pr-chapter .ch-spec-col{padding:14px 16px}
  :is(.page-results,.page-chapter) .pr-chapter .ch-spec-col::before{display:none}   /* stacked, the track is no longer above each column */
  :is(.page-results,.page-chapter) .pr-chapter .ch-m-pin b{left:auto;right:16px}
  :is(.page-results,.page-chapter) .pr-chapter .ch-next{flex-wrap:wrap}
  :is(.page-results,.page-chapter) .pr-chapter .ch-next-a{font-size:20px}
}


/* ===== 33-report-nav.css ===== */
/* ==========================================================================
   33-report-nav.css · owner: results track (D82, revised Sep 21). The report's contents sidebar.
   EDITORIAL (Wayne, Sep 21, 2026): the mockups' .rnav glass panel (docs/mockups/site/report-overview.html): 264px, sticky beside
   the reading column with a 52px gap, "Contents" and the collapse arrow, the group labels, and one entry per destination with a
   dot (blue complete, amber half, hollow waiting). It still SHUTS, which is what Wayne asked for ("a collapsible nav side bar"):
   shut, its column goes and the reading column takes the width. On a phone it sits in the flow above the report (the mockups'
   390px rules), instead of sliding over the page.
   Markup: app/report-nav.js. What goes in each destination: app/profile.js.
   ========================================================================== */
.page-results .rn-wrap{padding-bottom:48px}
.page-results .rn-shell{display:flex;gap:52px;align-items:flex-start}
.page-results .rn-main{flex:1;min-width:0}
.page-results .rn-shell.is-shut .rn-bar{display:none}

/* ---------------------------------------------------------------- the panel (glass: chrome) */
.page-results .rn-bar{flex:none;width:264px;position:sticky;top:calc(var(--header-h,60px) + 16px);max-height:calc(100vh - var(--header-h,60px) - 32px);overflow-y:auto;scrollbar-width:thin;
  border-radius:14px}
.page-results .rn-inner{padding:18px 16px;border-radius:14px;background:var(--glass);-webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%);
  border:1px solid rgba(255,255,255,.75);box-shadow:var(--sh),inset 0 1px 0 rgba(255,255,255,.55)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .page-results .rn-inner{background:#fff} }
.page-results .rn-head{display:flex;align-items:center;gap:8px;padding:0 8px 14px}
.page-results .rn-cap{font:800 11px/1.3 var(--body);letter-spacing:.09em;text-transform:uppercase;color:var(--faint)}
.page-results .rn-shut{margin-left:auto;display:grid;place-items:center;width:28px;height:28px;margin-right:-6px;border-radius:6px;font-size:15px;line-height:1;color:var(--muted)}
.page-results .rn-shut:hover{background:rgba(34,136,224,.1);color:var(--blue-ink)}
.page-results .rn-grp{padding:0 8px 6px;font:800 9.5px/1.4 var(--body);letter-spacing:.13em;text-transform:uppercase;color:var(--faint)}
.page-results .rn-list{list-style:none}
.page-results .rn-link{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;font:600 13.5px/1.3 var(--body);color:var(--muted);text-decoration:none}
.page-results .rn-link:hover{color:var(--blue-ink);background:rgba(34,136,224,.06)}
.page-results .rn-link.is-on{background:rgba(34,136,224,.13);color:var(--blue-ink);font-weight:800}
.page-results .rn-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--blue-mark)}
.page-results .rn-dot.is-part{background:var(--amber)}
.page-results .rn-dot.is-none{background:transparent;border:1.5px solid var(--grey)}
.page-results .rn-lock{display:inline-flex;margin-left:auto;color:var(--faint)}

/* ---------------------------------------------------------------- shut: the small Contents button over the reading column */
.page-results .rn-open{position:sticky;top:calc(var(--header-h,60px) + 16px);z-index:5;display:inline-flex;align-items:center;gap:8px;margin-bottom:18px;padding:8px 14px 8px 12px;
  border-radius:999px;background:var(--glass);-webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%);border:1px solid rgba(255,255,255,.75);
  box-shadow:var(--sh);font:800 11px/1.3 var(--body);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.page-results .rn-open span{font-size:15px;letter-spacing:0;color:var(--muted)}
.page-results .rn-open:hover{color:var(--blue-ink)}

/* ---------------------------------------------------------------- the mockups' 390px rules */
@media (max-width:820px){
  .page-results .rn-shell{display:block}
  .page-results .rn-bar{position:static;width:auto;max-height:none;margin-bottom:26px;overflow:visible}
  .page-results .rn-inner{padding:14px}
  .page-results .rn-open{position:static}
}


/* ===== 34-checkout.css ===== */
/* Checkout (Oct 5, 2026, D144): the C4 buy button (CTA round 1: "Get the full report · $30", amber) and the status line under it,
   on each report's unlock card (app/report-page.js buyButton) and each card on /unlock/; the Stripe Climate badge; and the page Stripe
   sends a reader back to, /unlock/done/ (src/pages/unlock.mjs donePage). D88 tokens only: amber wash and amber text for the buy
   button, hairlines, 14px corners. Drawn only while flags.checkout is on. */
.ck-buy{display:grid;gap:10px;width:100%}
/* .btn.ck-btn outranks the dark bands' rule for secondary buttons (05-components.css, .zone-deep .btn:not(.btn-primary)), which
   made this button a clear outline with white text: on the white unlock card inside a deep band it could not be seen. */
/* Green since Oct 6, 2026 (00-base.css --buy): the amber wash read like the guarantee seal beside it, and Wayne could not tell it was a
   button until he hovered it. */
.ck-buy .btn.ck-btn{width:100%;justify-content:center;min-height:54px;padding:15px 24px;font-size:16.5px;background:var(--buy);color:#fff;border-color:transparent;box-shadow:var(--sh-btn)}
.ck-buy .btn.ck-btn:hover{background:var(--buy-ink);color:#fff;border-color:transparent}
.ck-buy .ck-btn[aria-busy="true"],.ck-buy .ck-btn:disabled{cursor:progress;opacity:.86}
.ck-status{margin:0;font:500 var(--fs-small)/1.5 var(--body);color:var(--muted)}
.ck-status.is-error{color:var(--red)}
.zone-deep .ck-status,.zone-ink .ck-status{color:var(--on-ink)}
.zone-deep .ck-status.is-error,.zone-ink .ck-status.is-error{color:var(--amber-light)}
/* Under every buy button, the year a purchase opens the full report for (Oct 6, 2026, D173): part of what the button buys, so small
   and centered under it, never set like a warning. */
.ck-note{margin:0;font:500 var(--fs-small)/1.5 var(--body);color:var(--muted);text-align:center;text-wrap:balance}
.zone-deep .ck-note,.zone-ink .ck-note{color:var(--on-ink)}
/* Stripe Climate (Oct 6, 2026): Stripe's own badge, the 380 by 38 frame Stripe gives members to embed (src/pages/unlock.mjs climateBadge).
   38 is one line of its words. They wrap to a second line in a narrower frame, or in a wider font than Stripe planned for (a Linux
   desktop's), and the frame cut the second line off. So the frame always has room for two lines, three below 300px; the badge draws its
   own box, and the room it doesn't use stays clear. */
.ck-climate{display:flex;justify-content:center;margin:30px auto 0;max-width:640px;container-type:inline-size}
.ck-climate-badge{display:block;max-width:100%;height:58px;border:0}
@container (max-width:299px){.ck-climate-badge{height:78px}}
.page-unlock .ul-buy{margin-top:18px}

/* /unlock/done/: one card, one heading that app/checkout.js rewrites for what it found */
.page-unlock-done .ck-done-zone{padding-block:clamp(48px,8vw,96px)}
.page-unlock-done .ck-done{max-width:660px;margin:0 auto;padding:40px 40px 34px}
.page-unlock-done .ck-done-h{margin:14px 0 0;font:300 clamp(34px,4vw,46px)/1.08 var(--display);letter-spacing:-.02em;outline:none}
.page-unlock-done .ck-done-p{margin:14px 0 0;font:400 var(--fs-lede)/1.55 var(--body);color:var(--muted)}
.page-unlock-done .ck-done-btns{margin-top:26px}
.page-unlock-done .ck-done[data-state="checking"] .ck-done-h::after{content:"";display:inline-block;width:.42em;height:.42em;margin-left:.4em;border:2px solid var(--line);border-top-color:var(--blue-mark);border-radius:50%;vertical-align:.12em;animation:ck-spin .9s linear infinite}
.page-unlock-done .ck-done .ck-climate{margin:30px 0 0;padding-top:18px;border-top:1px solid var(--line);justify-content:flex-start;max-width:none}
@keyframes ck-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.page-unlock-done .ck-done[data-state="checking"] .ck-done-h::after{animation:none}}
@media (max-width:560px){.page-unlock-done .ck-done{padding:28px 20px 24px}}


/* ===== 34-report-pages.css ===== */
/* ==========================================================================
   34-report-pages.css · owner: results track
   Each test's own result and paid report (Wayne, Sep 21, 2026: "make it like truity", "reports are paid, not free"):
   /results/personality/, /results/interests/, /results/pillars/ (body class page-chapter), the sample reports at /sample/
   (page-chapter page-sample), "Your results" at /results/ (page-results) and the placeholder checkout at /unlock/ (page-unlock).
   Markup: app/report-page.js (the zones every result is built from), app/report-yours.js, src/pages/unlock.mjs and sample.mjs.
   Every section sits on one of the foundation's zones (05-components.css .zone-*), full width, grounds in turn. The editorial
   vocabulary stays: Source Serif 4 light for display, Figtree for labels, hairlines, blue is you, amber is worth your attention.
   ========================================================================== */

/* ---------------------------------------------------------------- the page: the strip keeps the page width, the zones run edge
   to edge, and the last zone meets the footer */
:is(.page-chapter,.page-results,.page-unlock) main+.site-footer{margin-top:0}
.page-chapter .rp-top{padding-bottom:8px}
.page-chapter .rp-top .ch-bar{margin-bottom:0}
.page-chapter .rp-top .review-stack{margin-bottom:16px}
/* Where a jump in a report lands. A band lands 16px under the site's bar by the page's one rule (00-base.css), and anything with an
   id inside a band 20px lower, so the small kicker over a heading ("Trait 3 of 5") shows under the bar too. On a sample the ribbon
   sticks under the bar, and app/report-sample.js adds its height to that rule. Until Sep 27, 2026 these rules added the bar (and the
   sample a fixed 64px for its ribbon, which is taller than that on a wide screen), so a section's heading could land under either. */
:is(.page-chapter,.page-results,.page-unlock) .rp-zone [id]{scroll-margin-top:20px}
/* A BAND'S OWN TITLE, on the same terms as a section's (38-report-marks.css). Wayne, Sep 24, 2026: "i think the title of each
   section should be larger, bolder, like clearly stand out when people are just scrolling through the page. maybe make it
   black, more bold, centered, etc." He is scrolling one document, and "Your result in brief" and "Your five traits" are section
   titles to him whether the markup calls them bands or sections. They are already centered, so only the weight, the size and
   the ink change. Never on a dark ground: there the heading is already white on deep blue and carries its own weight.
   Only a report's own bands, since Sep 26, 2026: "Your results" at /results/ is a list of tests, not a report, and "Your other
   results" at the foot of each report leads out of it, so both keep D88's light display weight, as /unlock/'s bands always have
   (docs/reviews/2026-09-26-overnight.md R6).
   AND THEN THE REPORTS' OWN BANDS WENT LIGHT TOO (D135, Wayne, Sep 26, 2026: "match"). The 600 was the last of the Sep 24 bold
   titles: the full report's section titles had already gone back to 300 with the magazine layout he picked (39-report-editorial.css),
   and these were the 54 left over, every report's band titles, "What stands out" and the group titles. A band title is now the
   zone head's own light serif (05-components.css .zone-head h2), at the larger size above, the same as /results/ and /unlock/. */
:is(.page-chapter,.page-results,.page-unlock) .rp-zone-head h2{font-size:clamp(34px,3.8vw,50px)}
:is(.page-chapter,.page-results,.page-unlock) .rp-zone-head h2 .accent-block{color:var(--blue-deep)}
.page-chapter .rp-wait{padding-block:40px 72px}
.page-chapter .rp-preview-wrap{padding-top:18px}
.page-chapter .rp-preview{margin:0}

/* ---------------------------------------------------------------- pictures: the placeholder pictures, softly framed */
:is(.page-chapter,.page-results,.page-unlock) .rp-pic{border-radius:18px;box-shadow:0 18px 40px -26px rgba(13,20,32,.45)}

/* ---------------------------------------------------------------- hero: the headline result and a warm picture */
:is(.page-chapter,.page-results,.page-unlock) .rp-hero-zone{padding-block:44px 64px}
:is(.page-chapter,.page-results,.page-unlock) .rp-hero{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:56px;align-items:center}
:is(.page-chapter,.page-results,.page-unlock) .rp-hero-main{min-width:0}
:is(.page-chapter,.page-results,.page-unlock) .rp-kick{font:800 10px/1.4 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--blue-deep)}
:is(.page-chapter,.page-results,.page-unlock) .rp-hero-h{margin-top:14px;font:300 clamp(46px,5.4vw,72px)/1.02 var(--display);letter-spacing:-.026em}
:is(.page-chapter,.page-results,.page-unlock) .rp-hero-h:focus{outline:none}
:is(.page-chapter,.page-results,.page-unlock) .rp-hero-h:focus-visible{outline:2px solid var(--blue-mark);outline-offset:6px}
:is(.page-chapter,.page-results,.page-unlock) .rp-hero-h .accent-block{color:var(--blue-deep)}
:is(.page-chapter,.page-results,.page-unlock) .rp-tiles{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;margin-top:24px}
:is(.page-chapter,.page-results,.page-unlock) .rp-tiles-lab{font:800 10px/1.4 var(--body);letter-spacing:.13em;text-transform:uppercase;color:var(--faint)}
/* Where the four letters came from, directly under them (app/report-page.js letterTiles). Apparatus weight: it explains the tiles,
   it is not another result. */
:is(.page-chapter,.page-results,.page-unlock) .rp-tiles-from{max-width:52ch;margin-top:10px;font-size:13.5px;line-height:1.55;color:var(--muted)}
:is(.page-chapter,.page-results,.page-unlock) .rp-tiles .pr-tiles{display:flex;gap:6px}
/* the reader's own label, demoted out of the headline but never hidden (Wayne, Sep 22, 2026) */
:is(.page-chapter,.page-results,.page-unlock) .rp-result{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-top:10px;
  font:600 19px/1.35 var(--body);letter-spacing:-.005em;color:var(--ink)}
:is(.page-chapter,.page-results,.page-unlock) .rp-result .rp-result-link{font:700 13.5px/1.4 var(--body)}
:is(.page-chapter,.page-results,.page-unlock) .rp-tiles+.rp-result{margin-top:12px}
:is(.page-chapter,.page-results,.page-unlock) .rp-hero-tag{margin-top:20px;max-width:42ch;font:300 21px/1.5 var(--display);color:var(--muted)}
:is(.page-chapter,.page-results,.page-unlock) .rp-hero-date{margin-top:14px;font:700 10.5px/1.4 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
:is(.page-chapter,.page-results,.page-unlock) .rp-hero-btns{margin-top:28px}
:is(.page-chapter,.page-results,.page-unlock) .rp-hero-pic{min-width:0}
.page-results .rp-msg{max-width:760px;margin-bottom:28px}

/* ---------------------------------------------------------------- free: the key chart on a white card */
.page-chapter .rp-chart{max-width:900px;margin:0 auto;padding:30px 36px 26px;background:#fff;border-radius:18px;
  box-shadow:0 1px 0 rgba(13,20,32,.04),0 16px 36px -24px rgba(13,20,32,.28)}
.page-chapter .rp-chart.ch-scales{margin-top:0;display:block}
.page-chapter .rp-chart .pr-plot-fig{margin-inline:auto}
/* the fold that carries the rest of the provenance, centered under the band's own centered head (D106) */
.page-chapter .rp-head-fold{width:fit-content;margin:-14px auto 26px;text-align:center}
.page-chapter .rp-head-fold>.fold-body{text-align:center;margin-inline:auto}
.page-chapter .rp-free-zone .ch-quality{max-width:900px;margin:0 auto 22px;background:#fff}
/* the six interests and the work values, side by side */
.page-chapter .rp-bars-grid.is-two{max-width:1040px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 56px}
.page-chapter .rp-bars{min-width:0}
.page-chapter .rp-bars-k{font:800 10px/1.4 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--blue-deep)}
.page-chapter .rp-bars-h{margin:10px 0 14px;font:400 22px/1.25 var(--display);letter-spacing:-.01em}
.page-chapter .rp-bars .review-mark{margin:10px 0}
.page-chapter .rp-bars-note{max-width:60ch}
/* the gap view keeps its own section head inside the card */
.page-chapter .rp-chart.pl-free{max-width:1080px;padding:0;background:none;border-radius:0;box-shadow:none}
.page-chapter .rp-chart.pl-free>.section{padding-top:0}

/* ---------------------------------------------------------------- free: the summary and the findings
   "YOUR RESULT IN BRIEF" IS THE FIRST THING A READER SEES AFTER FINISHING, and, on a locked report, the thing somebody who
   never pays judges the product by. Wayne, Sep 24, 2026: "the sneak peek — 'Your result in brief…' — make it more like
   editorial, more visually attractive, better design, etc. this currently looks so flat."
   It was three grey paragraphs at one size beside a picture. The words did not change; what changed is that they are now set:
   the reading of these answers opens large in the page's own ink, the sentence about the four letters stands off it as a marked
   line in the blue, a hairline closes the column above the way on, and the type's portrait sits level with the text with its
   code and name as a plate rather than floating at the top of an empty column.
   AND THEN IT WAS HALF WIDTH. Wayne, the same day: "why this is only half width for the text?" — a 33px serif in a 640px
   column breaks after six or seven words, which is the same starved column that killed the rail, arriving at the section it had
   just been taken out of. Both halves of it were wrong, so both moved: the picture is a fixed 300px plate rather than a third of
   the band, the band runs the full page width, and the line comes down to about 27px. The column is about 780px and the measure
   about 58 characters, which is a lede rather than a ransom note. */
.page-chapter .rp-brief{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:0 60px;align-items:center;max-width:1180px;margin:0 auto}
.page-chapter .rp-brief.is-text{grid-template-columns:minmax(0,1fr);max-width:820px}
.page-chapter .rp-brief-text{min-width:0}
/* the reading of these answers, set as the section's one large line */
.page-chapter .rp-brief-p{max-width:30em;font:300 clamp(22px,2.1vw,27px)/1.42 var(--display);letter-spacing:-.014em;color:var(--ink)}
/* the sentence about the four letters: marked, so it reads as a finding rather than as a second paragraph */
.page-chapter .rp-brief-p2{margin-top:26px;padding:2px 0 2px 18px;border-left:2px solid var(--blue-mark);
  font:600 16.5px/1.55 var(--body);color:var(--blue-deep)}
.page-chapter .rp-brief-more{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.page-chapter .rp-brief-art{min-width:0}
.page-chapter .rp-brief-art .ch-fl-art{margin:0 0 0 auto;max-width:300px;border-radius:18px;overflow:hidden;
  box-shadow:0 1px 0 rgba(13,20,32,.04),0 22px 44px -28px rgba(13,20,32,.42)}
.page-chapter .rp-brief-art .ch-fl-art .band{padding-block:11px}
.page-chapter .rp-brief-art .ch-typecard{grid-template-columns:120px minmax(0,1fr)}
/* an open Career report's type card up here goes without its painting, which the report's first section shows (chapter-interests.js
   typeMini `art: false`, Sep 26, 2026: no painting twice on one page) */
.page-chapter .rp-brief-art .ch-typecard.is-plain{grid-template-columns:minmax(0,1fr)}
.page-chapter .rp-brief-art .ch-typecard-name{font:400 24px/1.1 var(--display)}
/* the type's line already opens the summary beside the card */
.page-chapter .rp-brief-art .ch-typecard-line{display:none}
.page-chapter .rp-brief-art .ch-typecard-name+.link-more{margin-top:14px}
@media (max-width:860px){
  .page-chapter .rp-brief{grid-template-columns:minmax(0,1fr);gap:30px 0}
  .page-chapter .rp-brief-art{grid-row:1}
  .page-chapter .rp-brief-art .ch-fl-art{margin-inline:auto;max-width:280px}
}
/* a small picture's Placeholder tag, small enough to fit it */
:is(.page-chapter,.page-results,.page-unlock) :is(.rp-next-pic,.rp-yr-pic,.ul-card-pic) .ph-img-tag{left:4px;top:4px;padding:1px 5px;font-size:7px;letter-spacing:.06em}
.page-chapter .rp-find-wrap{max-width:1040px;margin:52px auto 0}
.page-chapter .rp-free-zone .rp-find-wrap{margin-top:40px}
/* in the brief the three cards are the second movement of the section, so a hairline and a wider gap separate them from the
   reading above rather than letting the two runs sit at the same weight */
.page-chapter .rp-summary-zone .rp-find-wrap{margin-top:66px;padding-top:44px;border-top:1px solid var(--line)}
.page-chapter .rp-find-title{text-align:center;font:400 26px/1.2 var(--display);letter-spacing:-.012em}
.page-chapter .rp-summary-zone .rp-find-title{font-weight:300;font-size:29px;color:var(--ink);letter-spacing:-.018em}
.page-chapter .rp-find{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:22px}
.page-chapter .rp-find.is-two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:720px;margin-inline:auto}
.page-chapter .rp-find-card{padding:22px 24px 20px;background:#fff;border-top:3px solid var(--blue-mark);border-radius:0 0 14px 14px}
.page-chapter .zone-white .rp-find-card{background:var(--blue-wash)}
.page-chapter .rp-find-k{font:800 10px/1.4 var(--body);letter-spacing:.13em;text-transform:uppercase;color:var(--blue-deep)}
.page-chapter .rp-find-h{margin-top:10px;font:400 22px/1.25 var(--display);letter-spacing:-.01em}
.page-chapter .rp-find-t{margin-top:8px;font-size:14.5px;line-height:1.55;color:var(--muted)}
.page-chapter .rp-find-f{margin-top:14px;font:700 10.5px/1.4 var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}

/* ---------------------------------------------------------------- the unlock panel, on the deep blue */
:is(.page-chapter,.page-results,.page-unlock) .rp-unlock-zone{padding-block:72px}
:is(.page-chapter,.page-results,.page-unlock) .rp-unlock{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:56px;align-items:center}
:is(.page-chapter,.page-results,.page-unlock) .rp-unlock-main{min-width:0}
:is(.page-chapter,.page-results,.page-unlock) .rp-unlock-zone .eyebrow{color:var(--amber-pale)}
:is(.page-chapter,.page-results,.page-unlock) .rp-unlock-h{margin-top:12px;font:300 clamp(32px,3.6vw,46px)/1.08 var(--display);letter-spacing:-.02em}
:is(.page-chapter,.page-results,.page-unlock) .rp-unlock-zone .rp-unlock-p{margin-top:14px;max-width:52ch;font:300 18px/1.55 var(--display);color:rgba(255,255,255,.8)}
:is(.page-chapter,.page-results,.page-unlock) .rp-unlock-list{list-style:none;margin-top:22px;max-width:62ch}
:is(.page-chapter,.page-results,.page-unlock) .rp-unlock-list li{display:flex;align-items:flex-start;gap:12px;padding:10px 0;border-top:1px solid var(--line);font-size:15px;line-height:1.5}
:is(.page-chapter,.page-results,.page-unlock) .rp-unlock-list svg{flex:none;width:16px;height:16px;margin-top:3px;color:var(--blue-mark)}
:is(.page-chapter,.page-results,.page-unlock) .rp-unlock-zone .rp-unlock-list li{border-top-color:rgba(255,255,255,.16);color:#fff}
:is(.page-chapter,.page-results,.page-unlock) .rp-unlock-zone .rp-unlock-list svg{color:var(--amber-pale)}
:is(.page-chapter,.page-results,.page-unlock) .rp-unlock-buy{display:grid;justify-items:start;gap:14px;padding:22px;border:1px solid rgba(255,255,255,.2);border-radius:18px;background:rgba(255,255,255,.06)}
:is(.page-chapter,.page-results,.page-unlock) .rp-unlock-buy .rp-unlock-pic{width:100%;box-shadow:none;border-radius:12px}
:is(.page-chapter,.page-results,.page-unlock) .rp-unlock-price{font:300 58px/1 var(--display);letter-spacing:-.02em;color:#fff}
:is(.page-chapter,.page-results,.page-unlock) .rp-unlock-buy .review-mark{margin:0}
:is(.page-chapter,.page-results,.page-unlock) .rp-unlock-buy .btn{width:100%;justify-content:center}
:is(.page-chapter,.page-results,.page-unlock) .rp-unlock-zone .rp-sample-link{font:700 14px/1.4 var(--body);text-decoration:none}
:is(.page-chapter,.page-results,.page-unlock) .rp-unlock-zone .rp-sample-link:hover{text-decoration:underline}

/* the guarantee beside every price (the term offer.guarantee): blue on paper, pale amber on the deep blue */
:is(.page-chapter,.page-results,.page-unlock) .rp-guarantee{display:inline-flex;align-items:center;gap:8px;font:700 13px/1.4 var(--body);color:var(--blue-deep)}
:is(.page-chapter,.page-results,.page-unlock) .rp-guarantee svg{flex:none;width:16px;height:16px}
:is(.page-chapter,.page-results,.page-unlock) .rp-unlock-zone .rp-guarantee{color:var(--amber-pale)}
.page-unlock .ul-price+.rp-guarantee{margin-top:10px}
.page-results .rp-yr-offer{display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px;margin-top:12px}
.page-results .rp-yr-offer .rp-yr-price{margin-top:0}

/* ---------------------------------------------------------------- the free section: one whole page of the report, lifted out
   and set on paper, so it reads as a page of the document rather than a taster of one. Nothing here is faded or cut. */
:is(.page-chapter,.page-results) .rp-excerpt-zone{padding-block:56px 60px}
:is(.page-chapter,.page-results) .rp-excerpt-head{max-width:900px;margin:0 auto 20px;text-align:center}
:is(.page-chapter,.page-results) .rp-excerpt-k{font:800 10px/1.4 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--blue-deep)}
:is(.page-chapter,.page-results) .rp-excerpt-line{margin-top:8px;font:300 19px/1.5 var(--display);color:var(--muted)}
:is(.page-chapter,.page-results) .rp-excerpt{max-width:900px;margin:0 auto;padding:40px 44px 44px;background:#fff;border-radius:18px;
  box-shadow:0 1px 0 rgba(13,20,32,.04),0 16px 36px -24px rgba(13,20,32,.28)}
:is(.page-chapter,.page-results) .rp-excerpt>*:first-child,
:is(.page-chapter,.page-results) .rp-excerpt .section,:is(.page-chapter,.page-results) .rp-excerpt .section-lg{padding-top:0;margin-top:0}
:is(.page-chapter,.page-results) .rp-excerpt .ch-sec,:is(.page-chapter,.page-results) .rp-excerpt .pr-chapter{margin:0}
:is(.page-chapter,.page-results) .rp-excerpt-foot{margin-top:26px;text-align:center}

/* ---------------------------------------------------------------- the contents list (D94)
   One list on every report page. Locked, it is the whole report as its table of contents: the number, the title and the length
   of every section, the one already free linked and the rest padlocked with none of their words in the page. Unlocked, the same
   rows are jump links at the head of the report. A contents page in a book, not a grid of cards. */
:is(.page-chapter,.page-results,.page-unlock) .rp-toc{list-style:none;max-width:860px;margin:0 auto;border-top:1px solid var(--line)}
:is(.page-chapter,.page-results,.page-unlock) .rp-toc-row{border-bottom:1px solid var(--line)}
:is(.page-chapter,.page-results,.page-unlock) .rp-toc-line{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:baseline;gap:0 16px;
  padding:16px 4px;color:inherit;text-decoration:none}
:is(.page-chapter,.page-results,.page-unlock) a.rp-toc-line:hover .rp-toc-t{text-decoration:underline;text-underline-offset:3px}
:is(.page-chapter,.page-results,.page-unlock) .rp-toc-n{font:700 13px/1.5 var(--body);color:var(--faint);font-variant-numeric:tabular-nums}
:is(.page-chapter,.page-results,.page-unlock) .rp-toc-t{min-width:0;font:400 20px/1.3 var(--display);letter-spacing:-.01em}
:is(.page-chapter,.page-results,.page-unlock) a.rp-toc-line .rp-toc-t{color:var(--blue)}
:is(.page-chapter,.page-results,.page-unlock) .rp-toc-meta{display:inline-flex;align-items:center;gap:10px;white-space:nowrap}
/* The two figures are ONE quiet phrase, not two columns ("1,144 words · about 5 min"): a third column would make a contents
   page into a spreadsheet. Tabular figures so the digits stack down the list, and the minutes a shade lighter than the words,
   so the eye reads the row as title, size, time rather than as three equals. */
:is(.page-chapter,.page-results,.page-unlock) .rp-toc-w{font:600 12.5px/1.5 var(--body);color:var(--faint);font-variant-numeric:tabular-nums}
:is(.page-chapter,.page-results,.page-unlock) .rp-toc-dot{margin:0 6px;color:var(--grey)}
:is(.page-chapter,.page-results,.page-unlock) .rp-toc-min{font-weight:500;color:var(--muted)}
/* where the minutes came from, once per report, under the list */
:is(.page-chapter,.page-results,.page-unlock) .rp-toc-note-rate{max-width:640px;margin:16px auto 0;text-align:center;font:400 12.5px/1.6 var(--body);color:var(--faint)}
:is(.page-chapter,.page-results,.page-unlock) .rp-toc-note{margin:-10px 0 14px;padding-left:50px;font:700 10.5px/1.4 var(--body);letter-spacing:.11em;text-transform:uppercase;color:var(--blue-deep)}
:is(.page-chapter,.page-results,.page-unlock) .rp-toc-lock{display:inline-flex;color:var(--amber-text)}
:is(.page-chapter,.page-results,.page-unlock) .rp-toc-lock svg{width:11px;height:12px}
:is(.page-chapter,.page-results,.page-unlock) .rp-toc-row.is-locked .rp-toc-t{color:var(--muted)}
:is(.page-chapter,.page-results,.page-unlock) .rp-locks-foot{margin-top:34px;text-align:center}

/* ---------------------------------------------------------------- the preview a buyer decides on (D107)
   Wayne, Sep 24, 2026: "we need to design the preview page to look stellar and attractive to the buyer."
   The locked contents is the substance of that page — every section's real title, its real word count and how long it runs — and
   it was a bare list on the page ground. It is a sheet of paper now, on a tinted band, the same object the free section above it
   already is, so the two read as one document being shown to somebody.
   AND A LOCKED ROW READS AS WITHHELD, NOT AS MISSING: its title keeps full ink, its figures sit in a wash pill with the padlock,
   and the row lifts under the pointer, because something is there. The free row is the one in blue with its tag. Not one word of
   a locked section is anywhere in the page, and nothing here adds a claim: every figure was already on the row. */
.page-chapter .rp-toc-zone .rp-toc-sheet{max-width:940px;margin:0 auto;padding:14px 44px 28px;background:#fff;border-radius:18px;
  box-shadow:0 1px 0 rgba(13,20,32,.04),0 16px 36px -24px rgba(13,20,32,.28)}
.page-chapter .rp-toc-zone .rp-toc{max-width:none;border-top:0}
.page-chapter .rp-toc-zone .rp-toc-row:last-child{border-bottom:0}
.page-chapter .rp-toc-zone .rp-toc-line{padding:18px 12px;border-radius:10px;transition:background-color .16s ease}
.page-chapter .rp-toc-zone .rp-toc-t{font-size:22px}
.page-chapter .rp-toc-zone .rp-toc-row.is-locked .rp-toc-t{color:var(--ink)}
.page-chapter .rp-toc-zone .rp-toc-row.is-locked:hover .rp-toc-line{background:var(--quiet-bg)}
/* the two figures and the padlock, as one quiet pill: what is behind the lock, measured */
.page-chapter .rp-toc-zone .rp-toc-meta{gap:8px;padding:5px 12px;border-radius:var(--r-pill);background:var(--quiet-bg)}
.page-chapter .rp-toc-zone .rp-toc-row.is-free .rp-toc-meta{background:var(--blue-wash)}
.page-chapter .rp-toc-zone .rp-toc-lock svg{width:12px;height:13px}
/* the one section the reader already has, marked rather than merely linked: the row and its tag are one block of blue */
.page-chapter .rp-toc-zone .rp-toc-row.is-free{border-bottom-color:transparent;border-radius:10px;background:var(--blue-wash);padding-bottom:10px}
.page-chapter .rp-toc-zone .rp-toc-row.is-free .rp-toc-n{color:var(--blue-deep)}
.page-chapter .rp-toc-zone .rp-toc-row.is-free .rp-toc-meta{background:#fff}
.page-chapter .rp-toc-zone .rp-toc-note{margin:0 0 4px;padding-left:58px}
.page-chapter .rp-toc-zone .rp-toc-note-wrap{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);text-align:center}
.page-chapter .rp-toc-zone .rp-toc-note-wrap .rp-toc-note-rate{margin:0 auto;text-align:center}
.page-chapter .rp-toc-zone .rp-locks-foot{margin-top:38px}
@media (max-width:720px){
  .page-chapter .rp-toc-zone .rp-toc-sheet{padding:10px 16px 20px;border-radius:14px}
  .page-chapter .rp-toc-zone .rp-toc-t{font-size:18px}
  .page-chapter .rp-toc-zone .rp-toc-line{padding:14px 6px}
  .page-chapter .rp-toc-zone .rp-toc-note{padding-left:14px}
}

/* ---------------------------------------------------------------- one heading over a run of sections (D109)
   The Personality report's three life chapters sit under one head, above the type guide. It is set below a section's own title
   and above the rule that opens the first chapter, so a reader passing it reads "here are three, and here is what they are". */
.page-chapter .rp-group-head{max-width:760px;margin:0 auto 46px;padding-bottom:34px;border-bottom:1px solid var(--line)}
.page-chapter .rp-group-head .zone-head{margin-bottom:0}
.page-chapter .rp-group-head h3{font:300 clamp(28px,2.9vw,38px)/1.08 var(--display);letter-spacing:-.024em;color:var(--ink)}
.page-chapter .rp-group-head p{margin-top:12px;font-size:16px;line-height:1.6;color:var(--muted)}
@media (max-width:820px){ .page-chapter .rp-group-head{margin-bottom:32px;padding-bottom:24px} }

/* ---------------------------------------------------------------- the measure of a lone section intro (D110)
   Wayne, Sep 24, 2026, on the letters explanation: "this is half width for no good reason." Capping a 14.5px line at 64ch is a
   good measure by character count and reads as a hole in a 1,180px band when nothing is beside it. Every intro of this kind was
   measured on the rendered page; these are the ones standing alone. They keep a measure and take the lede size, and the block is
   centered so the space is even rather than a gap on the right. A paragraph with a picture or a score box beside it is not here. */
.page-chapter .rp-full-sec .pr-sec-intro{max-width:68ch;margin-inline:auto;font-size:16.5px}

/* ---------------------------------------------------------------- what the rest of the report says about you (D108)
   The band between the contents and the price, on the page a reader sees before paying. Three cards, each naming one thing they
   will read about themselves. It is deliberately not a feature list: the contents directly above already names every section,
   and a second inventory would say the same thing twice in two shapes. Amber marks the middle card — the blind spots, the part
   Wayne cares most about — because amber is this system's "worth your attention". */
.page-chapter .rp-value-zone{padding-block:64px}
.page-chapter .rp-value{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;max-width:1040px;margin:0 auto}
.page-chapter .rp-value-card{padding:28px 26px;border-top:3px solid var(--blue-mark);border-radius:0 0 14px 14px;background:var(--blue-wash)}
.page-chapter .rp-value-card:nth-child(2){border-top-color:var(--amber);background:var(--amber-wash)}
.page-chapter .rp-value-card p{font:400 19px/1.45 var(--display);letter-spacing:-.008em;color:var(--ink)}
@media (max-width:860px){
  .page-chapter .rp-value{grid-template-columns:minmax(0,1fr);gap:14px}
  .page-chapter .rp-value-card{padding:22px 20px}
  .page-chapter .rp-value-card p{font-size:17.5px}
}

/* at the head of a report the reader has whole, where it is navigation rather than an offer */
/* D111: the "Contents" sub-head above this list is gone, so the rule that used to sit over it is the only break the list
   needs, and the space above it comes down with the heading it used to clear. */
:is(.page-chapter,.page-results,.page-unlock) .rp-toc-open{max-width:860px;margin:26px auto 0;padding-top:20px;border-top:1px solid var(--line)}
:is(.page-chapter,.page-results,.page-unlock) .rp-toc-open .zone-head{margin-bottom:14px}
:is(.page-chapter,.page-results,.page-unlock) .rp-toc-open .rp-toc-line{padding-block:12px}
:is(.page-chapter,.page-results,.page-unlock) .rp-toc-open .rp-toc-t{font-size:18px}

/* ---------------------------------------------------------------- the full report, unlocked: each section on its own ground */
:is(.page-chapter,.page-results,.page-unlock) .rp-full-head{padding-block:56px 40px}
:is(.page-chapter,.page-results,.page-unlock) .rp-full-head .zone-head{margin-bottom:0}
.page-chapter .rp-full-sec{padding-block:64px}
.page-chapter .rp-full-sec .section,.page-chapter .rp-full-sec .section-lg{padding-top:0}
.page-chapter .rp-full-sec .ch-sec{margin:0}
.page-chapter .rp-full-sec .pr-chapter{margin:0}
.page-chapter .rp-full-sec .rp-sub-h{margin:34px 0 14px;font:400 22px/1.2 var(--display)}
.page-chapter .zone-grey .ch-facet.is-sage,.page-chapter .zone-grey .ch-facet.is-violet{background:transparent}
.page-chapter .rp-values .sh{margin-bottom:8px}
.page-chapter .rp-values .ch-sec+.ch-sec,.page-chapter .rp-values .section{margin-top:36px}
.page-chapter .rp-values-credits{margin-top:28px}
.page-chapter .rp-next-checkin .section{padding-top:0}

/* ---------------------------------------------------------------- the measure inside a section (docs/REPORT_AUDIT.md S4)
   THE FAULT THIS FIXES. Career and Work styles ran their prose at 719px inside an 1,180px band, Self-esteem at 760px: about
   ninety characters a line, which is a line the eye loses its place on.
   For one day the answer was a 380px rail beside the words, holding the section's painting and a lifted sentence. Wayne, Sep 24,
   2026: "actually really weird, to place that picture on the right to take 1/3 of the width. remove that thing to make the rest
   back into normal full width." So the rail is gone and the cap stands on its own: a centered column on a full-width band, which
   is what a long document does. Only running prose is capped. A card grid, a chart, a two-column body or a table of answers is
   already a wide object built to use the band, and none of them is touched. */
.page-chapter .rp-full-sec :is(.prose p,p.body,.ws-prose,.se-prose p,.pr-prose p,.fc-prose p){max-width:72ch;margin-inline:auto}

/* ---------------------------------------------------------------- citation marks inside a report (docs/REPORT_AUDIT.md S3)
   Self-esteem's open report carries 54 of these and Five pillars 44, against the Character Profile's and Work styles' zero, and
   they are most of why those two read as heavy: site-wide a citation is set bold and cobalt (00-base.css), which is right on a
   method page where three of them are the point, and wrong in a report where a paragraph can carry four.
   SO THEY ARE DEMOTED, NOT DROPPED, and this is the line that matters: every marker keeps its number, keeps its link, and still
   opens the source list it points at (app/nav.js follows a cite link and opens the nearest sources fold). Nothing is unlinked
   from its claim. What changes is weight: a quiet footnote mark in the ink the prose already uses, at the same 4.5:1 it always
   had, that turns blue and underlines the moment it is hovered or focused so it is still plainly a link.
   Scoped to a report's own sections and to the free section above them, so the method page and the library keep theirs. */
:is(.page-chapter,.page-results) :is(.rp-full-sec,.rp-excerpt) sup{font-weight:400;color:var(--muted)}
:is(.page-chapter,.page-results) :is(.rp-full-sec,.rp-excerpt) sup a{color:inherit}
:is(.page-chapter,.page-results) :is(.rp-full-sec,.rp-excerpt) sup a:hover,
:is(.page-chapter,.page-results) :is(.rp-full-sec,.rp-excerpt) sup a:focus-visible{color:var(--blue);text-decoration:underline}

/* ---------------------------------------------------------------- questions and credits, beside a picture */
:is(.page-chapter,.page-results,.page-unlock) .rp-faq{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:56px;align-items:start}
:is(.page-chapter,.page-results,.page-unlock) .rp-faq-main{min-width:0}
:is(.page-chapter,.page-results,.page-unlock) .rp-faq-main>.ch-end,:is(.page-chapter,.page-results,.page-unlock) .rp-faq-main>.section-lg{padding-top:0}
:is(.page-chapter,.page-results,.page-unlock) .rp-faq-pic{position:sticky;top:calc(var(--header-h,60px) + 24px)}

/* ---------------------------------------------------------------- your other tests */
:is(.page-chapter,.page-results,.page-unlock) .rp-next{display:grid;grid-template-columns:repeat(var(--n,2),minmax(0,1fr));gap:18px;max-width:960px;margin:0 auto}
:is(.page-chapter,.page-results,.page-unlock) .rp-next-card{display:flex;align-items:center;gap:18px;padding:16px 20px 16px 16px;background:#fff;border:1px solid var(--line);border-radius:16px;
  color:var(--ink);text-decoration:none;transition:border-color .2s ease,box-shadow .2s ease}
:is(.page-chapter,.page-results,.page-unlock) .rp-next-card:hover{border-color:var(--blue-mark);box-shadow:0 12px 28px -22px rgba(10,95,168,.6)}
:is(.page-chapter,.page-results,.page-unlock) .rp-next-card .rp-next-pic{flex:none;width:76px;border-radius:12px;box-shadow:none}
:is(.page-chapter,.page-results,.page-unlock) .rp-next-body{display:grid;gap:3px;min-width:0}
:is(.page-chapter,.page-results,.page-unlock) .rp-next-name{font:400 22px/1.15 var(--display)}
:is(.page-chapter,.page-results,.page-unlock) .rp-next-status{font:700 10.5px/1.4 var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
:is(.page-chapter,.page-results,.page-unlock) .rp-next-go{margin-top:4px;font:700 13.5px/1.4 var(--body);color:var(--blue-deep)}
:is(.page-chapter,.page-results,.page-unlock) .rp-next-all{margin-top:28px;text-align:center}

/* ---------------------------------------------------------------- the sample: labeled on every screen */
.page-sample .rp-ribbon{position:sticky;top:var(--header-h,60px);z-index:30;background:#0D1420;color:#fff}
.page-sample .rp-ribbon-in{display:flex;align-items:center;flex-wrap:wrap;gap:8px 18px;padding-block:10px}
.page-sample .rp-ribbon-k{padding:4px 11px;border-radius:999px;background:var(--amber);color:#0D1420;font:800 10px/1.3 var(--body);letter-spacing:.16em;text-transform:uppercase}
.page-sample .rp-ribbon-t{flex:1 1 320px;min-width:0;font-size:13.5px;line-height:1.45;color:rgba(255,255,255,.82)}
.page-sample .rp-ribbon-nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:4px}
.page-sample .rp-ribbon-nav a{display:inline-flex;align-items:center;min-height:32px;padding:4px 12px;border-radius:8px;color:#fff;text-decoration:none;font:700 13px/1.3 var(--body)}
.page-sample .rp-ribbon-nav a:hover{background:rgba(255,255,255,.1)}
.page-sample .rp-ribbon-nav a[aria-current]{background:rgba(255,255,255,.18)}
:is(.page-chapter,.page-results,.page-unlock) .rp-take{text-align:center}

/* ---------------------------------------------------------------- "Your results" (/results/) */
.page-results .rp-yr-mark{max-width:1000px;margin:0 auto 18px}
/* the guarantee, once for the whole list rather than once per card (Sep 23, 2026) */
.page-results .rp-yr-guarantee{max-width:1000px;margin:0 auto 22px;display:flex;justify-content:center}
.page-results .rp-yr-list{display:grid;gap:18px;max-width:1000px;margin:0 auto}
/* The tests not yet taken wrap at a card width a name fits in. Until Sep 26, 2026 they were forced into one row, one column per
   card, so seven cards were 125px wide and names broke mid-word ("Perso / nalit / y"): docs/reviews/2026-09-26-overnight.md R1. */
.page-results .rp-yr-list.is-new{grid-template-columns:repeat(auto-fill,minmax(min(270px,100%),1fr))}
.page-results .rp-yr-card{display:grid;grid-template-columns:132px minmax(0,1fr);gap:28px;align-items:start;padding:24px;background:#fff;
  border:1px solid var(--line);border-radius:18px}
.page-results .rp-yr-card.is-new{grid-template-columns:minmax(0,1fr);gap:0;padding:0;overflow:hidden}
.page-results .rp-yr-card .rp-yr-pic{box-shadow:none;border-radius:14px}
.page-results .rp-yr-card .rp-yr-art{box-shadow:none;border-radius:0}
.page-results .rp-yr-card.is-new .rp-yr-body{padding:22px 24px 24px}
/* a single test left to take: picture beside the words, not above them */
.page-results .rp-yr-list.is-new.is-one{grid-template-columns:minmax(0,1fr)}
.page-results .rp-yr-list.is-one .rp-yr-card.is-new{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:center}
.page-results .rp-yr-list.is-one .rp-yr-art{height:100%;aspect-ratio:auto!important;min-height:240px}
.page-results .rp-yr-list.is-one .rp-yr-card.is-new .rp-yr-body{padding:28px 32px}
.page-results .rp-yr-body{min-width:0}
.page-results .rp-yr-state{font:800 10px/1.4 var(--body);letter-spacing:.13em;text-transform:uppercase;color:var(--blue-deep)}
.page-results .rp-yr-card.is-open .rp-yr-state{color:var(--amber-text)}
.page-results .rp-yr-name{margin-top:8px;font:400 30px/1.12 var(--display);letter-spacing:-.015em}
.page-results .rp-yr-sum{margin-top:8px;font:400 19px/1.45 var(--display)}
.page-results .rp-yr-sub{margin-top:6px;font-size:14px;line-height:1.5;color:var(--muted)}
.page-results .rp-yr-price{margin-top:12px;font-size:13.5px;line-height:1.5;color:var(--muted)}
.page-results .rp-yr-act{margin-top:18px}
.page-results .rp-yr-sample{display:inline-block;margin-top:14px;font:700 13px/1.4 var(--body);color:var(--blue-deep);text-decoration:none}
.page-results .rp-yr-sample:hover{text-decoration:underline}
/* the sample report band (also on /unlock/) */
:is(.page-results,.page-unlock) .rp-yr-sample-in{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:52px;align-items:center;max-width:1040px;margin:0 auto}
:is(.page-results,.page-unlock) .rp-yr-sample-t h2{margin-top:12px;font:300 clamp(30px,3.4vw,42px)/1.1 var(--display);letter-spacing:-.02em}
:is(.page-results,.page-unlock) .rp-yr-sample-p{margin-top:14px;max-width:48ch;font:300 18px/1.55 var(--display);color:var(--muted)}
:is(.page-results,.page-unlock) .rp-yr-sample-links{list-style:none;margin-top:20px;display:grid;gap:2px}
:is(.page-results,.page-unlock) .rp-yr-sample-links a{display:inline-flex;align-items:center;min-height:36px;font:700 14.5px/1.4 var(--body);color:var(--blue-deep);text-decoration:none}
:is(.page-results,.page-unlock) .rp-yr-sample-links a:hover{text-decoration:underline}
.page-results .rp-data-zone .pr-sec{margin-top:0}
.page-results .rp-combined{margin-top:28px}
.page-results .rp-combined .review-mark-link{margin-left:auto}

/* ---------------------------------------------------------------- the placeholder checkout (/unlock/) */
.page-unlock .ul-kick{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px}
.page-unlock .ul-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px;margin-top:22px}
.page-unlock .ul-price-n{font:300 58px/1 var(--display);letter-spacing:-.02em}
.page-unlock .ul-price-k{font:700 11px/1.4 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.page-unlock .ul-cards{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:18px}
.page-unlock .ul-card{display:grid;align-content:start;gap:18px;padding:24px;background:#fff;border:1px solid var(--line);border-radius:18px}
.page-unlock .ul-card:target{border-color:var(--blue-mark);box-shadow:0 0 0 3px var(--blue-wash)}
.page-unlock .ul-card-pic{width:84px;box-shadow:none;border-radius:14px}
.page-unlock .ul-card-k{font:800 10px/1.4 var(--body);letter-spacing:.13em;text-transform:uppercase;color:var(--blue-deep)}
.page-unlock .ul-card-h{margin-top:6px;font:400 28px/1.12 var(--display)}
/* This test's own price on its card, since the plate in the hero can only carry the span (engine/pricing.js). */
.page-unlock .ul-card-price{margin-top:10px}
.page-unlock .ul-list{margin-top:14px}
.page-unlock .ul-card-foot{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:16px}
.page-unlock .ul-card-foot a{font:700 13.5px/1.4 var(--body);color:var(--blue-deep);text-decoration:none}
.page-unlock .ul-card-foot a:hover{text-decoration:underline}
/* D130, idea 11 (Wayne, Sep 26, 2026): three real pages of the report's sample, fanned across the top of its card, edge to edge
   (src/pages/unlock.mjs sampleFan; the pictures are tools/sample_pages.mjs). The first page lies on top. Each picture opens on the
   sample report's own dark ribbon, and the amber tag in the corner is the same "Sample report" tag that ribbon carries, so the pages
   read as the sample and never as a real result. The geometry is in percentages of the fan, so it holds at any card width. */
.page-unlock .ul-card{overflow:hidden}
.page-unlock .ul-card.has-fan{grid-template-columns:minmax(0,1fr);padding-top:0}
.page-unlock .ul-fan{position:relative;display:block;margin:0 -24px;aspect-ratio:16 / 9;overflow:hidden;background:var(--blue-wash);
  border-bottom:1px solid var(--line)}
.page-unlock .ul-fan-pages img{position:absolute;width:58%;height:auto;border:1px solid var(--line);border-radius:6px;background:var(--surface);
  box-shadow:0 1px 2px rgba(13,20,32,.08),0 12px 28px rgba(13,20,32,.18)}
.page-unlock .ul-fan-pages img:nth-child(1){left:5%;top:17%;transform:rotate(-6deg)}
.page-unlock .ul-fan-pages img:nth-child(2){left:38%;top:9%;transform:rotate(5deg)}
.page-unlock .ul-fan-pages img:last-child{left:21%;top:31%;transform:rotate(-1.5deg)}
.page-unlock .ul-fan-1 .ul-fan-pages img{left:21%;top:20%}
.page-unlock .ul-fan-tag{position:absolute;left:14px;top:14px;z-index:1;padding:4px 11px;border-radius:999px;background:var(--amber);
  font:800 10px/1.3 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}

/* ---------------------------------------------------------------- narrower screens */
@media (max-width:1000px){
  .page-unlock .ul-cards{grid-template-columns:minmax(0,1fr)}
  .page-unlock .ul-card{grid-template-columns:84px minmax(0,1fr);align-items:start}
  :is(.page-chapter,.page-results,.page-unlock) .rp-faq{grid-template-columns:minmax(0,1fr) 240px;gap:36px}
}
@media (max-width:820px){
  :is(.page-chapter,.page-results,.page-unlock) .rp-hero-zone{padding-block:28px 44px}
  :is(.page-chapter,.page-results,.page-unlock) .rp-hero{grid-template-columns:minmax(0,1fr);gap:28px}
  :is(.page-chapter,.page-results,.page-unlock) .rp-hero-h{font-size:44px}
  :is(.page-chapter,.page-results,.page-unlock) .rp-hero-tag{font-size:18.5px}
  :is(.page-chapter,.page-results,.page-unlock) .rp-hero-btns .btn{width:100%;justify-content:center}
  .page-chapter .rp-chart{padding:20px 16px 18px;border-radius:14px}
  :is(.page-chapter,.page-results) .rp-excerpt-zone{padding-block:40px 44px}
  :is(.page-chapter,.page-results) .rp-excerpt-line{font-size:17px}
  :is(.page-chapter,.page-results) .rp-excerpt{padding:22px 16px 24px;border-radius:14px}
  :is(.page-chapter,.page-results,.page-unlock) .rp-result{font-size:17px}
  .page-chapter .rp-bars-grid.is-two{grid-template-columns:minmax(0,1fr);gap:32px}
  .page-chapter .rp-brief{grid-template-columns:minmax(0,1fr);gap:28px}
  .page-chapter .rp-brief-p{font-size:19px}
  .page-chapter .rp-brief-art .ch-fl-art{margin:0 auto;max-width:240px}
  .page-chapter .rp-find,.page-chapter .rp-find.is-two{grid-template-columns:minmax(0,1fr);gap:12px}
  :is(.page-chapter,.page-results,.page-unlock) .rp-unlock{grid-template-columns:minmax(0,1fr);gap:32px}
  :is(.page-chapter,.page-results,.page-unlock) .rp-unlock-zone{padding-block:52px}
  :is(.page-chapter,.page-results,.page-unlock) .rp-unlock-price{font-size:48px}
  :is(.page-chapter,.page-results,.page-unlock) .rp-toc-line{grid-template-columns:26px minmax(0,1fr);gap:0 12px;padding:14px 0}
  :is(.page-chapter,.page-results,.page-unlock) .rp-toc-t{font-size:18px}
  :is(.page-chapter,.page-results,.page-unlock) .rp-toc-meta{grid-column:2;gap:8px}
  /* the two figures drop under the title on their own line, still as one phrase */
  :is(.page-chapter,.page-results,.page-unlock) .rp-toc-w{font-size:12px;white-space:nowrap}
  :is(.page-chapter,.page-results,.page-unlock) .rp-toc-dot{margin:0 5px}
  :is(.page-chapter,.page-results,.page-unlock) .rp-toc-note-rate{margin-top:14px;font-size:12px;text-align:left}
  :is(.page-chapter,.page-results,.page-unlock) .rp-toc-note{padding-left:38px;margin-top:-8px}
  :is(.page-chapter,.page-results,.page-unlock) .rp-toc-open{margin-top:28px;padding-top:24px}
  .page-chapter .rp-full-sec{padding-block:44px}
  :is(.page-chapter,.page-results,.page-unlock) .rp-faq{grid-template-columns:minmax(0,1fr)}
  :is(.page-chapter,.page-results,.page-unlock) .rp-faq-pic{position:static;max-width:420px}
  :is(.page-chapter,.page-results,.page-unlock) .rp-next{grid-template-columns:minmax(0,1fr)}
  /* S5 (docs/REPORT_AUDIT.md): seven tabs at seven full report names wrapped to five rows on a phone, so the shop window opened
     on roughly 170px of navigation and the sample's own first screen started below it. One row that scrolls sideways instead:
     the label and the tabs share a line, nothing wraps, and app/report-sample.js brings the current tab into view. */
  .page-sample .rp-ribbon-t{display:none}
  .page-sample .rp-ribbon-in{flex-wrap:nowrap;gap:0 10px;padding-block:6px}
  .page-sample .rp-ribbon-k{flex:0 0 auto;padding:3px 8px;font-size:9px;letter-spacing:.12em}
  .page-sample .rp-ribbon-nav{flex:1 1 auto;min-width:0}
  .page-sample .rp-ribbon-nav ul{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-ms-overflow-style:none}
  .page-sample .rp-ribbon-nav ul::-webkit-scrollbar{display:none}
  .page-sample .rp-ribbon-nav a{min-height:30px;padding:3px 9px;font-size:12.5px;white-space:nowrap}
  .page-results .rp-yr-card{grid-template-columns:72px minmax(0,1fr);gap:16px;padding:18px}
  .page-results .rp-yr-list.is-new{grid-template-columns:minmax(0,1fr)}
  .page-results .rp-yr-card.is-new,.page-results .rp-yr-list.is-one .rp-yr-card.is-new{grid-template-columns:minmax(0,1fr)}
  .page-results .rp-yr-list.is-one .rp-yr-art{height:auto;min-height:0;aspect-ratio:4 / 3!important}
  .page-results .rp-yr-list.is-one .rp-yr-card.is-new .rp-yr-body{padding:20px 20px 22px}
  .page-results .rp-yr-name{font-size:26px}
  .page-results .rp-yr-act .btn{width:100%;justify-content:center}
  :is(.page-results,.page-unlock) .rp-yr-sample-in{grid-template-columns:minmax(0,1fr);gap:24px}
  .page-unlock .ul-card{grid-template-columns:minmax(0,1fr)}
  .page-unlock .ul-price-n{font-size:48px}
}
/* Seven tests (Sep 22): the cards wrap at a readable width instead of squeezing into one row, and the results tabs scroll sideways on a phone */
:is(.page-chapter,.page-results,.page-unlock) .rp-next{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));max-width:1092px}
.page-unlock .ul-cards{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
@media (max-width:720px){ :is(.page-chapter,.page-results,.page-unlock) .rp-next,.page-unlock .ul-cards{grid-template-columns:minmax(0,1fr)} }

/* ---------------------------------------------------------------- a priced full report that is still open (app/report-page.js openOffer)
   At the head of the report a reader is being handed without paying: the figure it will cost, then the shared line saying checkout
   is not open yet. Centred under the zone head it belongs to, and deliberately plainer than the unlock panel it stands in for. */
.rp-full-head .rp-open-note{max-width:70ch;margin:8px auto 0;font-size:14.5px;font-weight:700;line-height:1.55;color:var(--ink);text-align:center}
.rp-full-head .offer-open{margin:4px auto 0;text-align:center}
/* A bought full report says until when it stays open (Oct 6, 2026, D173): one calm line on a blue wash under the head's figures,
   the same note the unlock card shows once the year is over. */
.rp-full-head .rp-open-until{display:table;max-width:70ch;margin:16px auto 0;padding:8px 16px;border:1px solid var(--cobalt-pale);border-radius:var(--r-sm);
  background:var(--blue-wash);font:500 var(--fs-small)/1.5 var(--body);color:var(--blue-ink);text-align:center;text-wrap:balance}
/* The guide's place in the report (Oct 7, 2026, D178): the guide lives in the library, open for good for a buyer, so the report names
   its ten chapters as links there and offers one button to its first. */
.page-chapter .rp-guide-link .body{max-width:62ch}
.page-chapter .rp-guide-chapters{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:6px 22px;margin:18px 0 0;padding:0;list-style:none}
.page-chapter .rp-guide-chapters a{display:block;padding:8px 0;border-bottom:1px solid var(--line);font-weight:600;color:var(--ink);text-decoration:none}
.page-chapter .rp-guide-chapters a:hover{color:var(--blue-deep)}


/* ===== 34-results-cards.css ===== */
/* ==========================================================================
   34-results-cards.css · owner: results track
   The cards of the tests taken on "Your results" (/results/). D130, polish idea 2 (Wayne, Sep 26, 2026, approving the drawing at
   https://claude.ai/artifact/A1KGwZvo9ZBe3wucnogGMn): each finished test shows its result as a small chart (app/result-glance.js,
   .rp-gl), "See your result" at its foot, and every other control behind "Past takes" (app/report-yours.js takenCard).
   The tests not taken keep their own cards and their wrap (34-report-pages.css, R1 of the Sep 26 review).
   The editorial kit (D88): white card, one hairline, blue marks for the reader's own numbers, grey for everyone else's.
   ========================================================================== */

/* ---------------------------------------------------------------- the list: three to a row on a laptop, two on a tablet, one on a
   phone, centered under the band's centered head.
   EACH CARD IS FOUR ROWS OF THE LIST'S OWN GRID (subgrid): its head, its result, its foot, and what "Past takes" opens. So across a
   row of cards the names start level, the charts start level and the feet line up, however many bars a chart has; and opening one
   card's fold grows only the last of the four rows, so the cards beside it keep their feet where they were and simply run a little
   longer underneath. A browser without subgrid lays each card out on its own, which only costs the lining up. */
.page-results .rp-yr-list.is-taken{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(270px,100%),321px));justify-content:center;
  column-gap:18px;row-gap:0}
/* A grid counts its columns at their widest, so the widest a card may be is what sets three to a row. 321px is the width of a card
   in the list of tests not taken below it (three to its 1,000px), so with three or more taken the two lists share their edges; one
   or two taken sit centered under the band's head. 310px keeps three to a row on a tablet. On a phone the one column is the page. */
@media (max-width:1100px){ .page-results .rp-yr-list.is-taken{grid-template-columns:repeat(auto-fit,minmax(min(270px,100%),310px))} }
@media (max-width:640px){ .page-results .rp-yr-list.is-taken{grid-template-columns:minmax(0,1fr)} }

/* ---------------------------------------------------------------- a card: its state and name, its result, the way on at its foot */
.page-results .rp-yr-list.is-taken>.rp-yr-card:is(.is-done,.is-open){grid-row:span 4;display:grid;grid-template-columns:minmax(0,1fr);
  grid-template-rows:subgrid;row-gap:0;align-content:start;margin-bottom:18px;padding:20px 20px 10px}
.page-results .rp-yr-list.is-taken>.rp-yr-card>*{min-width:0}
.page-results .rp-yr-head{padding-bottom:14px}
.page-results .rp-yr-card:is(.is-done,.is-open) .rp-yr-name{margin-top:6px;font-size:23px;line-height:1.15}
.page-results .rp-yr-card:is(.is-done,.is-open)>:is(.rp-gl,.rp-yr-progress){padding-bottom:16px}
/* Since Oct 6, 2026 "See your result" is a small solid button and the full report the green buy button (app/report-yours.js), so the
   foot spaces them as buttons. */
.page-results .rp-yr-foot{align-self:start;display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;padding-top:14px;border-top:1px solid var(--line)}
.page-results .rp-yr-go:not(.btn){display:inline-block;padding-block:12px;font-size:13.5px;line-height:1.45}
.page-results .rp-yr-foot .btn{min-height:40px}
/* "Past takes": the look of every fold on the site (05-components.css .fold > summary), because it is one: a quiet capital line
   with a caret that turns when it opens. A button rather than a <details>, so the line can stand at the right of the foot while
   what it opens runs the card's full width beneath it. */
.page-results .rp-yr-more-btn{display:inline-flex;align-items:center;gap:7px;min-height:44px;margin-left:auto;padding:0 2px;border:0;background:none;
  cursor:pointer;font:700 11px/1.4 var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.page-results .rp-yr-more-btn::after{content:"";flex:none;width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .18s ease}
.page-results .rp-yr-more-btn[aria-expanded="true"]::after{transform:rotate(225deg) translate(-2px,-2px)}
.page-results .rp-yr-more-btn:hover{color:var(--ink)}
/* what it opens: the takes, the answers, a new take, the price and the sample, on a hairline of their own */
.page-results .rp-yr-more{padding:12px 0 10px;border-top:1px solid var(--line)}
.page-results .rp-yr-more[hidden]{display:none}
.page-results .rp-yr-more .rp-yr-takes{margin-top:0;padding-top:0;border-top:0}
.page-results .rp-yr-more .rp-yr-takes-n{display:block;margin:0 0 8px;font-size:13px;color:var(--muted)}
.page-results .rp-yr-more .rt-takes{margin-top:0;max-width:none}
.page-results .rp-yr-more .rp-yr-takes-links{font-size:13.5px}
.page-results .rp-yr-more .rp-yr-offer{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.page-results .rp-yr-more .rp-yr-price{margin-top:0}
.page-results .rp-yr-more .rp-yr-sample{margin-top:10px}
/* a test still in progress: how far along, as a line and a bar for each part not finished */
.page-results .rp-yr-progress{display:grid;gap:14px;align-content:start}
.page-results .rp-yr-prog{display:grid;gap:8px}
.page-results .rp-yr-prog .rp-yr-sub{margin:0}

/* ---------------------------------------------------------------- the result, drawn small (app/result-glance.js) */
.page-results .rp-gl{display:grid;gap:12px;align-content:start;min-width:0}
.page-results .rp-gl-lead{font:600 14px/1.45 var(--body);color:var(--ink)}
.page-results .rp-gl-sub{font-size:13px;line-height:1.45;color:var(--muted)}
/* what the numbers are and who they are compared with: small, but a sentence to read, not a label to decode */
.page-results .rp-gl-note{font:500 12px/1.5 var(--body);color:var(--muted)}
/* the four letters or the interest code: the report's own tiles (.lt), smaller, with the name beside them */
.page-results .rp-gl-type{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px}
.page-results .rp-gl-tiles{display:flex;gap:5px}
.page-results .rp-gl-tiles .lt{width:28px;height:28px;font-size:14px;border-radius:5px}
.page-results .rp-gl-typename{font:400 19px/1.15 var(--display);letter-spacing:-.01em;color:var(--ink)}

/* rows: the name over its track, the figure at the end of the row */
.page-results .rp-gl-rows{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.page-results .rp-gl-row{display:grid;grid-template-columns:minmax(0,1fr) 30px;column-gap:10px;align-items:center}
.page-results .rp-gl-name{grid-column:1;grid-row:1;min-width:0;font:600 12px/1.3 var(--body);color:var(--ink)}
.page-results .rp-gl-track{grid-column:1;grid-row:2;position:relative;display:block;height:6px;margin-top:4px;border-radius:999px;background:var(--ground-deep)}
.page-results .rp-gl-v{grid-column:2;grid-row:1 / span 2;justify-self:end;font:800 13px/1 var(--body);color:var(--blue-ink);font-variant-numeric:tabular-nums}
/* a percentile fills from 0 */
.page-results .rp-gl-fill{position:absolute;top:0;bottom:0;left:0;border-radius:inherit;background:var(--blue-mark)}
/* a place on a scale is a dot, over the group's typical range in grey (Deep Analysis) */
.page-results .rp-gl-band{position:absolute;top:0;bottom:0;background:rgb(208,214,223)}
.page-results .rp-gl-dot{position:absolute;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--blue-mark);box-shadow:0 0 0 2px var(--surface)}
.page-results .rp-gl-ends{display:flex;justify-content:space-between;font:600 10px/1 var(--body);color:var(--faint);font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------- Career: a small hexagon, then the code and its name */
.page-results .rp-gl-hexrow{display:flex;align-items:center;gap:14px}
.page-results .rp-gl-hex{flex:none;width:118px;height:auto;overflow:visible}
.page-results .rp-gl-hex-frame{fill:var(--surface);stroke:var(--grey);stroke-width:1;stroke-linejoin:round}
.page-results .rp-gl-hex-ring{fill:none;stroke:var(--line);stroke-width:1;stroke-dasharray:2 2}
.page-results .rp-gl-hex-shape{fill:rgba(34,136,224,.18);stroke:var(--blue-mark);stroke-width:1.5;stroke-linejoin:round}
/* The band and the shape mixed from the tokens where the engine can mix (the plain values above are the same colors). They stay
   inside @supports: a color-mix() holding a var() is kept over a fallback above it and then dropped as the page is drawn by an
   engine without color-mix() (Safari before 16.2), which fills the hexagon black and leaves the band clear. */
@supports (color:color-mix(in srgb,red,red)){
  .page-results .rp-gl-band{background:color-mix(in srgb,var(--grey) 65%,var(--ground-deep))}
  .page-results .rp-gl-hex-shape{fill:color-mix(in srgb,var(--blue-mark) 18%,transparent)}
}
.page-results .rp-gl-hex-l text{font:800 9.5px/1 var(--body);text-anchor:middle;fill:var(--faint)}
.page-results .rp-gl-hex-l text.is-on{fill:var(--blue-ink)}
.page-results .rp-gl-hexrow-t{min-width:0;display:grid;gap:8px}
.page-results .rp-gl-type.is-code{flex-direction:column;align-items:flex-start}

/* ---------------------------------------------------------------- Five pillars: the report's gap view, small. The name beside its
   track, how it is going as an ink dot, how much it matters as a blue ring, the line between them (45-pillars.css draws the same) */
.page-results .rp-gl-legend{display:flex;flex-wrap:wrap;gap:4px 16px;font:600 11.5px/1.3 var(--body);color:var(--muted)}
.page-results .rp-gl-legend span{display:inline-flex;align-items:center;gap:6px}
.page-results .rp-gl-pillars .pl-gap-dot{position:absolute;top:50%;border-radius:50%}
.page-results .rp-gl-pillars .pl-gap-going{width:9px;height:9px;margin:-4.5px 0 0 -4.5px;background:var(--ink)}
.page-results .rp-gl-pillars .pl-gap-matters{width:13px;height:13px;margin:-6.5px 0 0 -6.5px;background:var(--surface);border:2px solid var(--cobalt)}
.page-results .rp-gl-legend .pl-gap-dot{position:static;display:inline-block;margin:0}
.page-results .rp-gl-rows.is-gaps{gap:6px}
.page-results .rp-gl-rows.is-gaps .rp-gl-row{grid-template-columns:108px minmax(0,1fr);column-gap:10px;min-height:16px}
.page-results .rp-gl-track.is-gap{grid-column:2;grid-row:1;height:3px;margin:0 7px;border-radius:2px}
.page-results .rp-gl-span{position:absolute;top:0;bottom:0;background:var(--ink)}
/* money and work's two halves under their pillar's one name (Muse's review #21, Oct 2, 2026; engine/pillars.js pillarGroups): the
   name on a line of its own, then the two rows, set in on their name column only, so every track keeps the same left edge */
.page-results .rp-gl-group{display:grid;gap:6px}
.page-results .rp-gl-group-name{font:700 10.5px/1.3 var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.page-results .rp-gl-group .rp-gl-name{padding-left:10px}
.page-results .rp-gl-pillars .rp-gl-ends{margin:-4px 7px 0 125px}

/* ---------------------------------------------------------------- Self-esteem: the score on its 10-to-40 ruler, the U.S. average */
.page-results .rp-gl-ruler{display:grid;gap:8px;padding-top:6px}
.page-results .rp-gl-track.is-ruler{grid-row:auto;margin:0 8px}
.page-results .rp-gl-avg{position:absolute;top:-6px;bottom:-6px;width:2px;margin-left:-1px;background:var(--ref-deep)}
.page-results .rp-gl-ruler .rp-gl-dot{width:16px;height:16px;margin:-8px 0 0 -8px;box-shadow:0 0 0 3px var(--surface)}
.page-results .rp-gl-ruler .rp-gl-ends{margin:0 2px}
.page-results .rp-gl-key{display:flex;flex-wrap:wrap;gap:4px 16px;font:600 11.5px/1.3 var(--body);color:var(--muted)}
.page-results .rp-gl-key span{display:inline-flex;align-items:center;gap:6px}
.page-results .rp-gl-key i{display:inline-block;flex:none}
.page-results .rp-gl-k-you{width:10px;height:10px;border-radius:50%;background:var(--blue-mark)}
.page-results .rp-gl-k-avg{width:2px;height:12px;background:var(--ref-deep)}

@media (max-width:820px){
  .page-results .rp-yr-list.is-taken>.rp-yr-card:is(.is-done,.is-open){padding:18px 18px 8px}
  .page-results .rp-yr-card:is(.is-done,.is-open) .rp-yr-name{font-size:22px}
}


/* ===== 35-retake.css ===== */
/* ---------------------------------------------------------------- answering again, the takes, and the answer list (D91)
   app/retake.js. Three pieces: the list of takes with their dates, the trait-by-trait comparison rows, and the answer list at the
   end of the full report. Nothing new in the look: the same white surfaces, hairlines and flat color as the rest (SITE_KIT.md). */

/* ---- the takes, newest first */
.rt-takes{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px;max-width:520px}
.rt-take{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;background:var(--surface);
  border:var(--bw) solid var(--line);border-radius:var(--r-sm)}
.rt-take.is-latest{box-shadow:var(--sh-sm)}
.rt-take-date{font-weight:700;font-size:15px}
/* each date opens its take's report (Oct 3, 2026); the one on screen stays plain */
a.rt-take-date{color:var(--blue-deep);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;min-height:24px;display:inline-flex;align-items:center}
a.rt-take-date:hover{text-decoration-thickness:2px}

/* ---- answering again */
.rt-start,.rt-progress{max-width:720px}
.rt-start .note{color:var(--muted)}
.ch-retaking{max-width:720px;margin:0 auto;padding:40px 0}
/* Under "Past takes" the "Answer again" box sat right on the last take, with no gap, on every report with retakes (Oct 2, 2026, Muse's
   review of batch B). One step of the page's own scale apart (.mt-l), a step less on a phone, where every gap is smaller. */
.rp-takes-zone :is(.rt-start,.rt-progress){margin-top:32px}

/* ---- the finished take, read while a new one is open (Oct 2, 2026, Muse's review of batch B)
   app/retake.js retakeNotice: the report panel's words as the notice the assessment page sets over its step (21-take.css .tk-retake),
   standing over the report's headline, in the same look. Its own measure, so it reads as a note and not as the hero's own text. */
.rt-kept{max-width:640px;margin-bottom:22px}
.rt-kept .notice-title{margin-bottom:6px}
.rt-kept .notice p{margin:0}
.rt-kept-act{margin-top:12px;gap:10px 22px}

/* ---- what moved */
.rt-since{align-items:start}
.rt-diff{list-style:none;margin:10px 0 0;padding:0}
.rt-diff li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 14px;padding:8px 0;
  border-bottom:var(--bw-thin) dashed var(--rule-soft);font-size:14px}
.rt-diff li:last-child{border-bottom:0}
.rt-diff-name{font-weight:700}
.rt-diff-read{color:var(--muted)}

/* ---- the answer list */
/* The sentence over the list keeps the prose measure (34-report-pages.css caps a report's running prose at 72ch) but not its centring:
   the note under it, the group headings and the list all start on the section head's left edge, and a centred line between a
   left-hand title and a left-hand list read as a layout slip (seen on the rendered Deep Analysis report, Sep 24, 2026). */
.page-chapter :is(.rp-full-sec,.rp-excerpt) p.rt-ans-intro{margin-inline:0 auto}
.rt-ans-note{max-width:820px;margin-top:16px}
.rt-ans-wrap{margin-top:24px;display:grid;gap:28px}
.rt-ans-head{font-size:18px;margin:0 0 8px}
.rt-ans{list-style:none;margin:0;padding:0;background:var(--surface);border:var(--bw) solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.rt-ans-row{display:grid;grid-template-columns:32px minmax(0,1fr) minmax(0,190px);align-items:baseline;gap:4px 14px;
  padding:10px 14px;border-bottom:var(--bw-thin) solid var(--rule-soft)}
.rt-ans-row:last-child{border-bottom:0}
.rt-ans-n{color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums}
.rt-ans-q{font-size:15px}
.rt-ans-a{font-weight:700;font-size:15px;text-align:right}
/* a part over its groups (Deep Analysis: the trait over its six facets, app/retake.js answerTranscript). The trait takes the display
   face on a hairline, the facets under it keep the list's own small head, so 120 rows read as five runs rather than thirty lists */
.rt-ans-wrap.has-parts{gap:46px}
.rt-ans-part{display:grid;gap:22px}
.rt-ans-part-h{margin:0;padding-top:20px;border-top:1px solid var(--line);font:300 clamp(24px,2.4vw,30px)/1.15 var(--display);letter-spacing:-.015em;color:var(--ink)}
.rt-ans-wrap.has-parts .rt-ans-head{font-size:16px}

/* ---- the block on each assessment's card at /results/ */
.rp-yr-takes{margin-top:16px;padding-top:16px;border-top:var(--bw-thin) solid var(--rule-soft)}
.rp-yr-takes-h{margin:0;font-weight:700;font-size:14px}
.rp-yr-takes-n{font-weight:400;color:var(--muted)}
.rp-yr-takes .rt-takes{margin-top:10px;gap:6px}
.rp-yr-takes .rt-take{padding:8px 12px}
.rp-yr-takes-flag{margin:10px 0 0;font-size:14px;color:var(--muted)}
/* a new take underway (Oct 2, 2026): the report panel's own line under the finished takes, then "Discard new answers" */
.rp-yr-takes-line{margin:10px 0 0;font-size:13.5px;line-height:1.5;color:var(--muted)}
.rp-yr-takes-links{margin:10px 0 0;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14px}
.rp-yr-takes-act{margin-top:12px}
/* "Start new take", on these cards and in a report's retake panel, is a ghost button, and since Oct 6, 2026 a ghost button has its
   own outline (05-components.css), so it keeps its padding and border. On a phone it keeps its own width rather than stretching
   across the card. */

@media (max-width:560px){
  .rt-ans-row{grid-template-columns:24px minmax(0,1fr)}
  .rt-ans-a{grid-column:2;text-align:left;color:var(--cobalt)}
  .rt-ans-n{grid-row:span 2}
  .rp-yr-takes-act .btn-ghost,.rt-start .btn-ghost{flex:0 0 auto}
  .rp-takes-zone :is(.rt-start,.rt-progress){margin-top:24px}
  .rt-kept-act .btn{flex:0 0 auto}
}


/* ===== 36-facets-across.css ===== */
/* ==========================================================================
   36-facets-across.css · owner: facets track (Sep 24, 2026)
   The Deep Analysis section on how the reader's clearest ends come across to people at the other end of each facet, and what
   helps (D118, D119). Markup: app/chapter-facets.js acrossSection(). Its own partial so the rest of the report's styles
   (36-facets.css) stay untouched. The bar, the dot and the score reuse 36-facets.css. Blue is you, grey is the other person,
   amber marks the moment that needs attention (D88); a score is never colored good or bad.
   ========================================================================== */
.page-facets .fc-across-list{list-style:none;margin:30px 0 0;padding:0;max-width:1040px;display:flex;flex-direction:column;gap:18px}
.page-facets .fc-across-item{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:28px;padding:24px 26px;border:1px solid var(--line);
  border-radius:16px;background:#fff}
.page-facets .fc-across-head{min-width:0}
.page-facets .fc-across-head .fc-track{margin-top:14px}
.page-facets .fc-across-h{font:400 21px/1.2 var(--display);letter-spacing:-.01em}
.page-facets .fc-across-ends{display:flex;justify-content:space-between;gap:12px;margin-top:10px}
.page-facets .fc-across-end{min-width:0;font:600 12.5px/1.35 var(--body);color:var(--muted)}
.page-facets .fc-across-end:last-child{text-align:right}
.page-facets .fc-across-end b{display:block;margin-bottom:2px;font:800 9.5px/1.35 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.page-facets .fc-across-end.is-you{font-weight:700;color:var(--blue-ink)}
.page-facets .fc-across-end.is-you b{color:var(--blue-deep)}
.page-facets .fc-across-body{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;min-width:0}
.page-facets .fc-across-part{min-width:0;padding-top:12px;border-top:1px solid var(--line)}
.page-facets .fc-across-lab{font:800 10px/1.35 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--amber-text)}
.page-facets .fc-across-part.is-helps .fc-across-lab{color:var(--blue-deep)}
.page-facets .fc-across-text{margin-top:6px;font-size:15px;line-height:1.6;color:var(--ink)}
/* the rest of the reader's clear ends, one tap away. The shared fold (app/ui.js contextFold, 05-components.css) sets its body in
   small muted type at 62ch for apparatus; these are the same cards as the lead, so the body gives that back. */
.page-facets .fc-across-more{max-width:1040px;margin-top:24px}
.page-facets .fc-across-more>.fold-body{max-width:none;padding-top:0;font-size:inherit;line-height:inherit;color:inherit}
.page-facets .fc-across-more .fc-across-list{margin-top:14px}

@media (max-width:900px){
  .page-facets .fc-across-item{grid-template-columns:minmax(0,1fr);gap:18px}
}
@media (max-width:720px){
  .page-facets .fc-across-item{padding:18px 18px 16px}
  .page-facets .fc-across-body{grid-template-columns:minmax(0,1fr);gap:14px}
}


/* ===== 36-facets.css ===== */
/* ==========================================================================
   36-facets.css · owner: facets track (Sep 22, 2026)
   The in-depth personality test (engine/facets.js): its test page (/assessments/facets/, body class page-take-facets), its result and
   sample (/results/facets/, /sample/facets/, page-facets), and the card on the Personality result that points to it (.rp-upgrade).
   Markup: app/chapter-facets.js, app/take-views.js, app/report-page.js upgradeCard. The editorial vocabulary of 34-report-pages.css:
   Source Serif 4 light for display, Figtree for labels, hairlines, blue is you. A score is never colored good or bad.
   ========================================================================== */

/* ---------------------------------------------------------------- the test page: each trait with its six facets */
.page-take-facets .tp-facets{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.page-take-facets .tp-facets li{position:relative;padding-left:14px;font-size:13.5px;font-weight:600;line-height:1.35;color:var(--ink)}
.page-take-facets .tp-facets li::before{content:"";position:absolute;left:0;top:.5em;width:6px;height:6px;border-radius:50%;background:var(--blue-mark)}

/* ---------------------------------------------------------------- the key chart: five traits, thirty facets */
.page-facets .rp-chart.fc-free{max-width:1180px;padding:30px 30px 22px}
.page-facets .fc-chart{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0 26px}
.page-facets .fc-block{min-width:0}
.page-facets .fc-block-h{display:flex;align-items:flex-end;min-height:2.4em;font:400 21px/1.2 var(--display);letter-spacing:-.01em;padding-bottom:10px;border-bottom:1px solid var(--line)}
.page-facets .fc-rows{list-style:none;margin:0;padding:0}
.page-facets .fc-row{display:grid;grid-template-columns:minmax(0,1fr) 28px;grid-template-areas:"name val" "track track";gap:5px 8px;
  padding:10px 0 11px;border-bottom:1px solid var(--line)}
.page-facets .fc-row:last-child{border-bottom:0}
.page-facets .fc-name{grid-area:name;font-size:13px;font-weight:600;line-height:1.3;color:var(--ink)}
.page-facets .fc-val{grid-area:val;justify-self:end;font:700 13px/1.3 var(--body);font-variant-numeric:tabular-nums;color:var(--blue-deep)}
.page-facets .fc-row .fc-track{grid-area:track}
.page-facets .fc-row.is-trait .fc-name{font-weight:800;letter-spacing:.06em;text-transform:uppercase;font-size:10.5px;color:var(--muted);align-self:center}
.page-facets .fc-row.is-trait .fc-val{font-size:15px}
.page-facets .fc-track{position:relative;display:block;height:6px;border-radius:999px;background:#E9EEF5}
/* the comparison group's typical range on this facet (engine/facets.js NORMS, set inline per bar), a shade darker, so below, inside
   and above it show; their average is the thin tick through it. Until Sep 25, 2026 this was the middle of the scale, 37.5 to 62.5,
   the same on every bar. */
.page-facets .fc-typ{position:absolute;top:0;bottom:0;background:#D7E1EE}
.page-facets .fc-row.is-trait .fc-track{height:8px}
.page-facets .fc-avg{position:absolute;top:-4px;bottom:-4px;width:1px;margin-left:-.5px;background:var(--ref-deep)}
.page-facets .fc-dot{position:absolute;top:50%;width:13px;height:13px;margin:-6.5px 0 0 -6.5px;border-radius:50%;background:var(--blue-mark);
  box-shadow:0 0 0 2px #fff}
.page-facets .fc-row.is-trait .fc-dot{width:15px;height:15px;margin:-7.5px 0 0 -7.5px;background:var(--blue-deep)}
.page-facets .fc-chart-note{margin-top:16px;text-align:center;font-size:12.5px;line-height:1.5;color:var(--faint)}
/* Sep 25, 2026: the note sits in the chart's "About this information" fold, so it takes the fold's type. */
.page-facets .fc-chart-fold .fc-chart-note{margin-top:0;text-align:left;font-size:inherit;line-height:inherit;color:inherit}

/* ---------------------------------------------------------------- summary and the way to the Personality test */
.page-facets .fc-summary{max-width:720px;margin:0 auto;text-align:center}
.page-facets .fc-summary p{font:300 20px/1.55 var(--display);color:var(--ink)}
.page-facets .fc-summary p+p{margin-top:10px}
.page-facets .fc-link{max-width:760px;margin:40px auto 0;display:grid;grid-template-columns:120px minmax(0,1fr);gap:22px;align-items:center;
  padding:22px 26px;border:1px solid var(--line);border-radius:18px;background:#fff}
.page-facets .fc-link-h{font:400 22px/1.25 var(--display)}
.page-facets .fc-link-body p{margin-top:6px;font-size:14.5px;line-height:1.55;color:var(--muted)}
.page-facets .fc-link-body .btn{margin-top:14px}

/* ---------------------------------------------------------------- the hero's one line about the reader's own contrast */
.page-facets .fc-hero-contrast{margin-top:14px;max-width:44ch;font:300 19px/1.5 var(--display);color:var(--blue-deep)}

/* ---------------------------------------------------------------- the report's opening section: where one trait pulls two ways
   Two or three pairs, each the highest and lowest facet of one trait facing each other across a hairline. A pair wide enough to
   count as a split gets the amber rule the split block uses; a close pair keeps the plain one. Neither side is colored good or bad. */
.page-facets .fc-pairs{list-style:none;margin:30px 0 0;padding:0;max-width:960px;display:flex;flex-direction:column;gap:18px}
.page-facets .fc-pair{padding:22px 26px 20px;border:1px solid var(--line);border-radius:16px;background:#fff;border-left:3px solid var(--line)}
.page-facets .fc-pair.is-wide{border-left-color:var(--amber)}
.page-facets .fc-pair-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
.page-facets .fc-pair-trait{font:800 10.5px/1.4 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--blue-deep)}
.page-facets .fc-pair-gap{font:400 20px/1.25 var(--display);letter-spacing:-.01em;color:var(--ink)}
.page-facets .fc-pair-sides{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:16px}
.page-facets .fc-pair-side{min-width:0;padding-top:12px;border-top:1px solid var(--line)}
.page-facets .fc-pair-lab{font:800 10px/1.35 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.page-facets .fc-pair-name{margin-top:6px;font-size:16px;font-weight:700;line-height:1.3;color:var(--ink)}
.page-facets .fc-pair-n{margin-top:2px;font:700 22px/1.1 var(--body);font-variant-numeric:tabular-nums;color:var(--blue-deep)}
.page-facets .fc-pair-side .fc-track{margin-top:8px}
.page-facets .fc-pair-short{margin-top:10px;font-size:14px;line-height:1.55;color:var(--muted)}
.page-facets .fc-pair-line{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:15px;line-height:1.6;color:var(--ink)}
.page-facets .fc-contrast-foot{max-width:68ch;margin:30px 0 0;font-size:14.5px;line-height:1.6;color:var(--muted)}

/* ---------------------------------------------------------------- the full report: one section per trait
   Since Sep 24, 2026 (docs/REPORT_GAP.md R4) every section opens on the head every report shares (app/chapter-common.js section(),
   39-report-editorial.css): the folio, the title at up to 60px on the left, the score as its aside. This report's own centred
   42px head and its kicker are gone, so what follows the head starts on the head's own left edge rather than on a centred axis
   under a left-hand title. */
.page-facets .fc-sec{margin:0}
/* the score panel opens each trait section (R8, app/score-panel.js): straight under the head, with room before the reading */
.page-facets .fc-sec>.rt-score{margin:0 0 30px}
.page-facets .fc-sec-intro{max-width:62ch;font:300 20px/1.55 var(--display);color:var(--muted)}
/* the section's thesis: two people reach this trait score from opposite habits, and these two of the six are pulling */
.page-facets .fc-sec-thesis{max-width:68ch;margin-top:18px;padding-top:14px;border-top:1px solid var(--line);font-size:15.5px;line-height:1.65;color:var(--ink)}
.page-facets .fc-sub{font:800 10.5px/1.4 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--blue-deep)}
.page-facets .fc-sub-first{margin-top:36px}
.page-facets .fc-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:14px}
.page-facets .fc-card{display:flex;flex-direction:column;padding:22px 22px 20px;border-radius:16px;background:#fff;border:1px solid var(--line);min-width:0}
.page-facets .zone-grey .fc-card,.page-facets .zone-white .fc-card{background:#fff}
.page-facets .zone-white .fc-card{background:var(--blue-wash);border-color:transparent}
/* The one painting this facet owns (Sep 23, 2026), full width at the top of its card, so a reader meets the picture before the
   number. Pulled out to the card's edge with the card clipping it, which is how the library tile carries the same file. */
.page-facets .fc-card{overflow:hidden;padding-top:0}
.page-facets .fc-card-art{margin:0 -22px 16px;width:auto;max-width:none;border-radius:0;background:var(--ground-deep)}
.page-facets .fc-card-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.page-facets .fc-card-h{font:400 21px/1.2 var(--display);letter-spacing:-.01em}
.page-facets .fc-card-n{font:700 22px/1 var(--body);font-variant-numeric:tabular-nums;color:var(--blue-deep)}
.page-facets .fc-card-bar{margin-top:14px}
.page-facets .fc-ends{display:flex;justify-content:space-between;gap:10px;margin-top:8px;font:700 10px/1.35 var(--body);letter-spacing:.05em;text-transform:uppercase;color:var(--faint)}
.page-facets .fc-ends span:last-child{text-align:right}
.page-facets .fc-vs{margin-top:12px;align-self:flex-start;padding:3px 10px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:12px;font-weight:700;color:var(--muted)}
.page-facets .fc-about{margin-top:12px;font-size:14px;line-height:1.55;color:var(--muted)}
.page-facets .fc-read{margin-top:10px;font-size:15px;line-height:1.6;color:var(--ink)}
/* the cost of the end this reader came out on: the card's last line, never beside a hard score (app/chapter-facets.js facetCard) */
.page-facets .fc-cost{padding-top:12px;font-size:14px;line-height:1.6;color:var(--muted)}
.page-facets .fc-card .fc-read+.fc-cost{margin-top:12px;border-top:1px solid var(--line)}
.page-facets .zone-white .fc-card .fc-read+.fc-cost{border-top-color:#CFE0F3}
.page-facets .fc-cost-lab{display:block;font:800 10px/1.35 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--amber-text);margin-bottom:4px}
.page-facets .fc-split{max-width:820px;margin:34px 0 0;padding:20px 24px;border-left:3px solid var(--line);background:#fff}
.page-facets .fc-split.has-split{border-left-color:var(--amber)}
.page-facets .fc-split p{margin-top:8px;font:300 18px/1.55 var(--display)}
.page-facets .fc-life{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;max-width:1000px;margin:30px 0 0}
.page-facets .fc-life-list{list-style:none;margin:10px 0 0;padding:0}
.page-facets .fc-life-list li{padding:12px 0;border-top:1px solid var(--line);font-size:14.5px;line-height:1.6;color:var(--muted)}
.page-facets .fc-life-list li b{color:var(--ink);font-weight:700}
.page-facets .fc-life-none{margin-top:10px;font-size:14.5px;line-height:1.6;color:var(--muted)}
/* the one question that closes a trait section, from the facet that most sets this reader apart inside it */
/* The same object on every ground, blue wash on white and on grey alike, so the five sections all end the same way. On the head's
   left edge, like everything else in the section since the shared head (Sep 24, 2026). */
.page-facets .fc-question{max-width:720px;margin:34px 0 0;padding:24px 28px;border-radius:16px;background:var(--blue-wash)}
.page-facets .fc-question-lab{font:800 10.5px/1.4 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--blue-deep)}
.page-facets .fc-question-text{margin-top:10px;font:300 22px/1.45 var(--display);color:var(--ink)}

/* ---------------------------------------------------------------- the card on the Personality result that points here */
.page-chapter .rp-upgrade{max-width:860px;margin:44px auto 0;display:grid;grid-template-columns:120px minmax(0,1fr);gap:26px;align-items:center;
  padding:24px 28px;border-radius:18px;background:var(--blue-wash)}
.page-chapter .rp-upgrade-h{margin-top:8px;font:400 26px/1.2 var(--display);letter-spacing:-.01em}
.page-chapter .rp-upgrade-t{margin-top:8px;font-size:15px;line-height:1.6;color:var(--muted)}
.page-chapter .rp-upgrade .btn{margin-top:16px}

/* ---------------------------------------------------------------- narrower screens */
@media (max-width:1100px){
  .page-facets .fc-chart{grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
  .page-facets .fc-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
  .page-facets .rp-chart.fc-free{padding:20px 16px 16px}
  .page-facets .fc-chart{grid-template-columns:minmax(0,1fr);gap:22px}
  .page-facets .fc-block-h{min-height:0}
  .page-facets .fc-cards{grid-template-columns:minmax(0,1fr)}
  .page-facets .fc-life{grid-template-columns:minmax(0,1fr)}
  .page-facets .fc-pair{padding:18px 18px 16px}
  .page-facets .fc-pair-sides{grid-template-columns:minmax(0,1fr);gap:0}
  .page-facets .fc-pair-side+.fc-pair-side{margin-top:16px}
  .page-facets .fc-pair-gap{font-size:18px}
  .page-facets .fc-question{padding:20px 18px}
  .page-facets .fc-question-text{font-size:19px}
  .page-facets .fc-hero-contrast{font-size:17px}
  .page-facets .fc-summary p{font-size:18px}
  .page-facets .fc-link{grid-template-columns:minmax(0,1fr);padding:18px;gap:14px}
  .page-facets .fc-link-pic{max-width:96px}
  .page-chapter .rp-upgrade{grid-template-columns:minmax(0,1fr);padding:20px}
  .page-chapter .rp-upgrade-pic{max-width:96px}
}


/* ===== 36-selfesteem.css ===== */
/* ==========================================================================
   36-selfesteem.css · owner: self-esteem test
   The self-esteem test's own page (/assessments/selfesteem/, body class page-take-selfesteem) and its result, full report and sample
   (/results/selfesteem/, /sample/selfesteem/, body class page-selfesteem). Everything else comes from 21-take.css and 34-report-pages.css.
   The editorial vocabulary stays: blue is you, grey is everyone else, Source Serif 4 light for display, Figtree for labels, hairlines.
   ========================================================================== */

/* ---------------------------------------------------------------- the test: four answers, so four columns of circles */
.page-take-selfesteem .tk-likert{grid-template-columns:repeat(4,minmax(0,1fr))}
/* what it measures: its two kinds of statement, side by side */
.page-take-selfesteem .tp-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.page-take-selfesteem .tp-grid-2>li{padding-bottom:22px}
@media (max-width:820px){
  .page-take-selfesteem .tp-grid-2{grid-template-columns:minmax(0,1fr)}
  .page-take-selfesteem .tp-grid-2>li,.page-take-selfesteem .tp-grid-2>li+li{padding:18px 0}
}

/* ---------------------------------------------------------------- hero: the range line under the score */
.page-selfesteem .se-range{margin-top:10px;font:800 11px/1.4 var(--body);letter-spacing:.13em;text-transform:uppercase;color:var(--faint)}

/* ---------------------------------------------------------------- free: the score panel (R8, app/score-panel.js, 39-score-panel.css)
   The score on its 10 to 40 range is the shared panel now. It keeps the width the chart card had, centred under the band's centred
   head, and the two halves sit in its footer as the arithmetic behind the number, so their own rule and heading step aside. */
.page-selfesteem .se-panel{max-width:1000px;margin:0 auto}
.page-selfesteem .se-panel .rt-score{margin-top:8px}
.page-selfesteem .rt-score-foot .se-halves{margin-top:0;padding-top:0;border-top:0;max-width:64ch}
.page-selfesteem .rt-score-foot .se-half:first-child{margin-top:4px}

/* the track the panel replaced; kept while an older cached page could still ask for it */
.page-selfesteem .se-chart{max-width:900px}
.page-selfesteem .se-scale{margin:52px 8px 0}
.page-selfesteem .se-track{position:relative;height:12px;border-radius:999px;background:var(--line)}
.page-selfesteem .se-fill{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:var(--blue-light)}
.page-selfesteem .se-mark{position:absolute;top:50%;transform:translate(-50%,-50%)}
.page-selfesteem .se-mark-you{width:22px;height:22px;border-radius:50%;background:var(--blue-deep);box-shadow:0 0 0 4px #fff,0 4px 12px -4px rgba(13,20,32,.5)}
.page-selfesteem .se-mark-us{width:4px;height:28px;border-radius:2px;background:var(--muted)}
.page-selfesteem .se-mark-lab{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap;font:600 13px/1.3 var(--body)}
.page-selfesteem .se-mark-you .se-mark-lab{bottom:calc(100% + 12px);color:var(--blue-deep)}
.page-selfesteem .se-mark-you .se-mark-lab b{font:400 22px/1 var(--display);letter-spacing:-.01em}
.page-selfesteem .se-mark-us .se-mark-lab{top:calc(100% + 26px);font-size:12px;color:var(--muted)}
.page-selfesteem .se-ticks{position:relative;height:18px;margin-top:10px}
.page-selfesteem .se-ticks span{position:absolute;top:0;transform:translateX(-50%);font:700 11px/1.4 var(--body);color:var(--faint)}
.page-selfesteem .se-ticks span:first-child{transform:none}
.page-selfesteem .se-ticks span:last-child{transform:translateX(-100%)}
.page-selfesteem .se-compare{margin-top:48px;font:400 19px/1.55 var(--display);letter-spacing:-.005em}
.page-selfesteem .se-nations{margin-top:10px;font-size:14px;line-height:1.55;color:var(--muted)}

/* the two halves of the score, each against the U.S. group's average for it */
.page-selfesteem .se-halves{margin-top:28px;padding-top:22px;border-top:1px solid var(--line)}
.page-selfesteem .se-halves-h{font:800 10px/1.4 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--blue-deep)}
.page-selfesteem .se-half{margin-top:18px}
.page-selfesteem .se-half-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.page-selfesteem .se-half-lab{font-size:15px;line-height:1.4}
.page-selfesteem .se-half-n{flex:none;font:700 14px/1.4 var(--body);color:var(--blue-deep)}
.page-selfesteem .se-half-track{position:relative;height:8px;margin-top:8px;border-radius:999px;background:var(--line)}
.page-selfesteem .se-half-fill{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:var(--blue-mark)}
.page-selfesteem .se-half-us{position:absolute;top:50%;width:3px;height:18px;border-radius:2px;background:var(--muted);transform:translate(-50%,-50%)}
.page-selfesteem .se-half-us-lab{margin-top:6px;font-size:12.5px;color:var(--muted)}
.page-selfesteem .se-halves-note{margin-top:16px;font-size:14px;line-height:1.55;color:var(--muted)}
/* Sep 25, 2026: the note on how the self-critical half is scored folds under the bars, and who the U.S. group is folds under the
   chart ("Who am I being compared with?"), so each opens as its own short block. */
.page-selfesteem .se-halves-fold{margin-top:16px}
.page-selfesteem .se-halves-fold .se-halves-note{margin-top:0}
.page-selfesteem .rt-score .sp-who .sp-note + .sp-note{margin-top:8px}

/* ---------------------------------------------------------------- the summary: the line every reader gets */
.page-selfesteem .se-care{margin-top:22px;padding:14px 18px;border-left:3px solid var(--line);font-size:15px;line-height:1.6;color:var(--muted)}
.page-selfesteem .se-care p+p{margin-top:8px}
.page-selfesteem .rp-find-h{font-size:20px}

/* ---------------------------------------------------------------- the full report's sections
   Since Sep 24, 2026 (docs/REPORT_GAP.md R4) each section opens on the head every report shares (app/chapter-common.js section(),
   39-report-editorial.css): the folio, then the title at up to 60px on the left. This report's own centred 36px head is gone, so the
   section under it runs on the head's own left edge, the way Work styles does, rather than as a centred column under a left title. */
/* Sep 25, 2026: the flagship's magazine look (app/chapter-selfesteem.js). Each section is its reading band and then its question
   alone on a warm band, which is 39-report-editorial.css .rt-close and needs nothing here. */
.page-selfesteem .se-sec{margin:0}
/* the answers section's first line, over its table */
.page-selfesteem .se-open{max-width:60ch;font:300 21px/1.55 var(--display);color:var(--muted)}

/* THE FOUR RESEARCH SECTIONS ARE CARDS (the same evening). Each was one run of 264 to 321 words in two columns, which is what Wayne
   called a wall of text on another report. Each is now the flagship's trait reading, and 39-report-editorial.css already draws all
   of it: the headline beside the sentence on the reader's score (.rt-entry), then the cards as a ruled list, two columns wide on a
   laptop and one on a phone (.rt-angles), each with its fold (.fold). What this report adds is small and its own: */
/* the pull quote rests between the entry and the cards, on the spine (38-report-marks.css .rp-pull draws the bar) */
.page-selfesteem .se-read-sec .rp-pull{margin:36px 0 0}
/* a card whose finding is about people on the reader's side of the U.S. average: the flagship's mark for a cost card (a 2px rule
   down its left edge), in blue, which is the reader's own color, with the line saying so above its label */
.page-selfesteem .rp-part-read .rt-angles .se-card.is-yours{padding-left:18px}
.page-selfesteem .rp-part-read .rt-angles .se-card.is-yours::before{content:"";position:absolute;left:0;top:20px;bottom:24px;width:2px;background:var(--blue-mark)}
.page-selfesteem .se-card .se-for{margin:0 0 10px;line-height:1}
.page-selfesteem .se-card .se-for .tag{white-space:normal}
/* a sentence no card claims folds at the section's foot (none today; test/selfesteem.test.mjs holds it at none) */
.page-selfesteem .se-read-sec .se-rest{margin-top:22px}

/* every statement with its answer and points: the reader's own numbers, so the table is a white sheet on the blue band, the way the
   flagship's score panel stands on its, and it runs the band's width rather than stopping at 760px with the right side empty */
.page-selfesteem .se-answers .se-open{max-width:66ch}
.page-selfesteem .rp-full-sec.zone-blue .se-ans-wrap{padding:6px 26px 14px;border:1px solid var(--line);border-radius:var(--r);background:#fff}
.page-selfesteem .se-ans-wrap{margin-top:24px;overflow-x:auto}
.page-selfesteem .se-ans{width:100%;border-collapse:collapse;font-size:15px;line-height:1.45}
.page-selfesteem .se-ans th,.page-selfesteem .se-ans td{padding:12px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.page-selfesteem .se-ans thead th{font:800 10px/1.4 var(--body);letter-spacing:.13em;text-transform:uppercase;color:var(--faint)}
.page-selfesteem .se-ans tbody th{font-weight:400}
.page-selfesteem .se-ans-n{display:inline-grid;place-items:center;width:22px;height:22px;margin-right:6px;border-radius:50%;background:var(--blue-wash);color:var(--blue-ink);font:700 11px/1 var(--body)}
.page-selfesteem .se-ans-rev{display:inline-block;margin-left:4px;padding:1px 7px;border:1px solid var(--line);border-radius:999px;font:700 10px/1.5 var(--body);letter-spacing:.04em;color:var(--muted);white-space:nowrap}
.page-selfesteem .se-ans-a{white-space:nowrap}
.page-selfesteem .se-ans-p{white-space:nowrap;font-weight:700;color:var(--blue-deep)}
.page-selfesteem .se-ans tfoot td{padding-top:16px;border-bottom:0;font:400 20px/1.3 var(--display)}

@media (max-width:640px){
  .page-selfesteem .se-scale{margin-inline:4px}
  .page-selfesteem .se-compare{font-size:17px}
  .page-selfesteem .se-open{font-size:19px}
  .page-selfesteem .rp-full-sec.zone-blue .se-ans-wrap{padding:2px 16px 10px}
  .page-selfesteem .se-ans thead{display:none}
  .page-selfesteem .se-ans,.page-selfesteem .se-ans tbody,.page-selfesteem .se-ans tr,.page-selfesteem .se-ans th,.page-selfesteem .se-ans td{display:block;width:100%}
  .page-selfesteem .se-ans tbody tr{padding:12px 0;border-bottom:1px solid var(--line)}
  .page-selfesteem .se-ans tbody th,.page-selfesteem .se-ans tbody td{padding:2px 0;border:0}
  .page-selfesteem .se-ans-a,.page-selfesteem .se-ans-p{display:inline-block!important;width:auto!important;margin-right:12px;color:var(--muted)}
  .page-selfesteem .se-ans tfoot td{padding-top:14px}
}


/* ===== 36-sixfactor-across.css ===== */
/* The six-factor report's "how people unlike you see you" section (D118, D119; Sep 24, 2026; app/sixfactor-report.js acrossSection).
   One panel per factor under a hairline: the factor and the reader's band as a small heading, then the pair side by side, how it
   comes across on the paper and what helps on the blue wash (the lens cards' own look, .ch-facet in 40-chapters.css), and at some
   ends a third, full-width part on people at the reader's own end. Phones stack the pair (.grid-2 under 860px). */
.page-sixfactor .sf-across{max-width:860px}
.page-sixfactor .sf-ac-intro{font-size:17px;line-height:1.6}
.page-sixfactor .sf-ac-list{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:34px}
.page-sixfactor .sf-ac-panel{padding-top:18px;border-top:1px solid var(--line)}
.page-sixfactor .sf-ac-h{font:700 17px/1.3 var(--body);letter-spacing:0;color:var(--ink)}
.page-sixfactor .sf-ac-h span{margin-left:8px;font:600 12px/1.3 var(--body);color:var(--faint)}
.page-sixfactor .sf-ac-pair{margin-top:14px;gap:16px}
.page-sixfactor .sf-ac-part .small{font-size:15px;line-height:1.55}
.page-sixfactor .sf-ac-part.is-same{margin-top:16px;border-top-color:var(--line)}

@media (max-width:720px){
  .page-sixfactor .sf-ac-list{margin-top:24px;gap:28px}
  .page-sixfactor .sf-ac-h{font-size:16px}
}


/* ===== 36-sixfactor.css ===== */
/* ==========================================================================
   36-sixfactor.css · owner: sixfactor builder (Sep 22, 2026)
   The six-factor personality test's result page (/results/sixfactor/, body classes page-chapter page-sixfactor) and its sample
   (/sample/sixfactor/, page-chapter page-sample page-sixfactor). Markup: app/sixfactor-report.js. The shared report zones, hero,
   unlock panel and locked cards keep 34-report-pages.css; this partial only adds the six-factor chart, the honesty and humility
   band and the full report's factor sections. Blue is you, gray is the comparison group (D88).
   ========================================================================== */

/* ---------------------------------------------------------------- the chart: a 1-to-5 track per scale, the group's typical range
   as a gray band, their average as a gray tick, the reader as a blue dot */
.page-sixfactor .sf-plot{margin:0;max-width:760px;margin-inline:auto}
.page-sixfactor .sf-rows{list-style:none;margin:0;padding:0}
.page-sixfactor .sf-row{display:grid;grid-template-columns:200px minmax(0,1fr) 64px;align-items:center;min-height:46px;gap:0}
.page-sixfactor .sf-lab{padding-right:16px;text-align:right;min-width:0}
.page-sixfactor .sf-lab b{display:block;font:700 14.8px/1.2 var(--body);color:var(--ink)}
.page-sixfactor .sf-lab b a{color:inherit;text-decoration:none}
.page-sixfactor .sf-lab b a:hover{color:var(--blue-deep);text-decoration:underline}
.page-sixfactor .sf-lab span{display:block;margin-top:2px;font:600 11.5px/1.2 var(--body);color:var(--faint)}
.page-sixfactor .sf-row.is-higher .sf-lab span,.page-sixfactor .sf-row.is-lower .sf-lab span{color:var(--blue-ink)}
.page-sixfactor .sf-track{position:relative;height:22px}
.page-sixfactor .sf-track::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:1px solid var(--line)}
.page-sixfactor .sf-typ{position:absolute;top:3px;bottom:3px;background:var(--ground-deep);border-radius:4px}
.page-sixfactor .sf-avg{position:absolute;top:0;bottom:0;width:0;border-left:2px solid var(--ref-deep);margin-left:-1px}
.page-sixfactor .sf-you{position:absolute;z-index:1;top:50%;width:15px;height:15px;margin:-7.5px 0 0 -7.5px;border-radius:50%;background:var(--blue-mark);box-shadow:0 0 0 3px #fff}
.page-sixfactor .sf-v{padding-left:16px;font:800 16px/1 var(--body);color:var(--blue-deep);font-variant-numeric:tabular-nums}
.page-sixfactor .sf-axis{position:relative;height:26px;margin:10px 64px 0 200px;border-top:1px solid var(--line);font:600 11.5px/1 var(--body);color:var(--faint)}
.page-sixfactor .sf-axis span{position:absolute;top:10px;transform:translateX(-50%)}
.page-sixfactor .sf-axis span:nth-child(1){left:0}
.page-sixfactor .sf-axis span:nth-child(2){left:25%}
.page-sixfactor .sf-axis span:nth-child(3){left:50%}
.page-sixfactor .sf-axis span:nth-child(4){left:75%}
.page-sixfactor .sf-axis span:nth-child(5){left:100%}
.page-sixfactor .sf-legend{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 8px;margin-top:14px;font:600 12px/1.3 var(--body);color:var(--muted)}
.page-sixfactor .sf-legend span{display:inline-block;margin-left:10px}
.page-sixfactor .sf-legend span:first-child{margin-left:0}
.page-sixfactor .sf-key-you{width:11px;height:11px;border-radius:50%;background:var(--blue-mark)}
.page-sixfactor .sf-key-avg{width:0;height:14px;border-left:2px solid var(--ref-deep)}
.page-sixfactor .sf-key-typ{width:22px;height:11px;border-radius:3px;background:var(--ground-deep)}
.page-sixfactor .sf-chart{max-width:900px}
/* one row on its own (a factor's section, the honesty and humility band): no axis ticks between, a tighter frame */
.page-sixfactor .sf-plot.is-one,.page-sixfactor .sf-plot.is-two,.page-sixfactor .sf-plot.is-facets{max-width:640px;margin:18px 0 0}

/* ---------------------------------------------------------------- the sixth factor, on its own grey band */
.page-sixfactor .sf-hh{max-width:1040px;margin:0 auto}
.page-sixfactor .sf-hh-head{max-width:720px;margin:0 auto;text-align:center}
.page-sixfactor .sf-hh-head h2{margin-top:10px;font:300 clamp(30px,3.4vw,42px)/1.1 var(--display);letter-spacing:-.02em}
.page-sixfactor .sf-hh-intro{margin-top:14px;font-size:17px;line-height:1.6;color:var(--muted)}
.page-sixfactor .sf-hh-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"score text" "parts text";gap:8px 40px;align-items:start;margin-top:30px;padding:28px 32px;background:#fff;border-radius:18px;
  box-shadow:0 1px 0 rgba(13,20,32,.04),0 16px 36px -24px rgba(13,20,32,.28)}
.page-sixfactor .sf-hh-score{grid-area:score}
.page-sixfactor .sf-hh-text{grid-area:text}
.page-sixfactor .sf-hh-parts{grid-area:parts}
.page-sixfactor .sf-hh-score .sf-plot{margin:0}
.page-sixfactor .sf-hh-score .sf-row{grid-template-columns:150px minmax(0,1fr) 52px}
.page-sixfactor .sf-hh-score .sf-axis{margin:10px 52px 0 150px}
.page-sixfactor .sf-hh-text .body{font-size:17px;line-height:1.6}
.page-sixfactor .sf-hh-text .note{margin-top:12px}
.page-sixfactor .sf-hh-facets-h{margin-top:20px}
.page-sixfactor .sf-hh-facets{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:8px}
.page-sixfactor .sf-hh-facets li{font-size:14.5px;line-height:1.5;color:var(--muted)}
.page-sixfactor .sf-hh-facets b{color:var(--ink)}

/* ---------------------------------------------------------------- the full report: each factor, the sixth factor, work, people */
.page-sixfactor .sf-sec{max-width:820px}
/* the score panel opens each factor section (R8, app/score-panel.js): straight under the head, with room before the painting */
.page-sixfactor .sf-sec>.rt-score{margin:0 0 30px}
/* The shared 72ch cap (34-report-pages.css) centres a paragraph on its own width. Inside this 820px column that set every summary
   about 20px in from the headline, the cards and the title above it. Same cap, on the column's own left edge (the spine rule in
   39-report-editorial.css: nothing is centred on its own width). */
.page-sixfactor .rp-full-sec .sf-sec p.body{margin-inline:0}
.page-sixfactor .sf-headline{font:400 24px/1.3 var(--display);letter-spacing:-.01em}
.page-sixfactor .sf-sec-p{margin-top:16px}
.page-sixfactor .sf-about{margin-top:12px;color:var(--muted)}
.page-sixfactor .sf-about b{color:var(--ink);margin-right:4px}
.page-sixfactor .sf-facets-h{margin-top:28px}
.page-sixfactor .sf-facets{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 28px}
.page-sixfactor .sf-facets li{padding-top:12px;border-top:1px solid var(--line)}
.page-sixfactor .sf-facet-name{font:700 15px/1.3 var(--body)}
.page-sixfactor .sf-facet-name span,.page-sixfactor .sf-list-h span{margin-left:6px;font:600 12px/1.3 var(--body);color:var(--faint)}
.page-sixfactor .sf-facets .small{margin-top:6px}
.page-sixfactor .sf-facet-about{margin-top:6px;font-size:13.5px;line-height:1.5;color:var(--muted)}
.page-sixfactor .sf-sixth .body+.body{margin-top:14px}
.page-sixfactor .sf-combo{margin-top:18px;padding:18px 22px;background:var(--blue-wash);border-radius:12px;color:var(--ink)}
.page-sixfactor .sf-sixth .note{margin-top:14px}
.page-sixfactor .sf-list{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:16px}
.page-sixfactor .sf-list li{padding-top:14px;border-top:1px solid var(--line)}
.page-sixfactor .sf-list-h{font:700 15px/1.3 var(--body)}
.page-sixfactor .sf-list .small{margin-top:6px}

/* ---------------------------------------------------------------- how you treat people: the report's first section (Sep 23, 2026)
   Two groups of four facets, each group a chart of its four scores and then a paragraph per facet. The paragraphs are the deepest
   thing the report says, so they read at body size under a hairline, not as small print inside a card. */
.page-sixfactor .sf-character{max-width:860px}
.page-sixfactor .sf-ch-intro{font-size:17px;line-height:1.6}
.page-sixfactor .sf-ch-group{margin-top:34px;padding-top:26px;border-top:1px solid var(--line)}
.page-sixfactor .sf-ch-group:first-of-type{border-top:0}
.page-sixfactor .sf-ch-h{color:var(--blue-deep)}
.page-sixfactor .sf-ch-line{margin-top:8px;max-width:640px;color:var(--muted)}
.page-sixfactor .sf-ch-group .sf-plot{margin-top:20px}
.page-sixfactor .sf-ch-list{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:20px}
.page-sixfactor .sf-ch-list li{padding-top:14px;border-top:1px solid var(--ink)}
.page-sixfactor .sf-ch-name{font:700 15px/1.3 var(--body)}
.page-sixfactor .sf-ch-name span{margin-left:6px;font:600 12px/1.3 var(--body);color:var(--faint)}
.page-sixfactor .sf-ch-p{margin-top:8px}
.page-sixfactor .sf-character .sf-ch-h+.body{margin-top:10px}
/* the line reading the eight together, after the second group: its own hairline and room, so its heading does not sit on the
   last facet paragraph */
.page-sixfactor .sf-character>.sf-ch-h{margin-top:34px;padding-top:26px;border-top:1px solid var(--line)}
/* Sep 25, 2026: the paper's limit folds with the chart notes at the foot of "How you treat people", under the same hairline. */
.page-sixfactor .sf-character > .sf-fold{margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}

/* the lens cards under a factor's summary are the flagship's ruled list of angles now (.rt-angles, 39-report-editorial.css), two
   to a row: at your best and what it costs, then how you decide (honesty and humility only) and the blind spot. An odd card out,
   which is the blind spot everywhere but honesty and humility, runs across both columns rather than leaving half a row empty.
   A hard end has none, so nothing here assumes any is there. */
.page-sixfactor .sf-lenses .sf-lens:last-child:nth-child(odd){grid-column:1 / -1}

/* ---- what a section's scales measure and who the 411 are, folded (Sep 24, 2026) */
.page-sixfactor .sf-fold{margin-top:22px}
.page-sixfactor .sf-character .sf-fold{margin-top:14px}
.page-sixfactor .sf-fold-facets{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.page-sixfactor .sf-fold b{color:var(--ink);font-weight:700;margin-right:4px}

/* ---- the question a section ends on: a hairline, a label, and one line in the display face (the Work styles close) */
.page-sixfactor .sf-close{margin-top:36px;padding-top:24px;border-top:1px solid var(--line)}
.page-sixfactor .sf-q-lab{font:800 12px/1.4 var(--body);letter-spacing:.11em;text-transform:uppercase;color:var(--blue-deep)}
.page-sixfactor .sf-q{margin-top:12px;max-width:34ch;font:300 clamp(23px,2.6vw,30px)/1.28 var(--display);letter-spacing:-.02em;color:var(--ink)}

/* the crossing section's own subheadings, over the five-trait paragraph and the temper paragraph */
.page-sixfactor .sf-sixth-h{margin-top:30px;color:var(--blue-deep)}
.page-sixfactor .sf-sixth-h+.body{margin-top:10px}
.page-sixfactor .sf-sixth .sf-sixth-h+.sf-plot{margin-top:14px}

/* ---------------------------------------------------------------- phones */
@media (max-width:720px){
  .page-sixfactor .sf-ch-group{margin-top:26px;padding-top:20px}
  .page-sixfactor .sf-ch-list{gap:16px}
  .page-sixfactor .sf-row{grid-template-columns:118px minmax(0,1fr) 38px;min-height:50px;padding:4px 0}
  .page-sixfactor .sf-lab{padding-right:10px}
  .page-sixfactor .sf-lab b{font-size:12.5px;overflow-wrap:anywhere}
  .page-sixfactor .sf-lab span{font-size:10px}
  .page-sixfactor .sf-v{padding-left:8px;font-size:14px}
  .page-sixfactor .sf-axis{margin:10px 38px 0 118px;font-size:10.5px}
  .page-sixfactor .sf-hh-body{grid-template-columns:minmax(0,1fr);grid-template-areas:"score" "text" "parts";gap:18px;padding:20px 16px}
  .page-sixfactor .sf-hh-score .sf-row{grid-template-columns:110px minmax(0,1fr) 38px}
  .page-sixfactor .sf-hh-score .sf-axis{margin:10px 38px 0 110px}
  .page-sixfactor .sf-facets{grid-template-columns:minmax(0,1fr)}
  .page-sixfactor .sf-headline{font-size:21px}
}

/* ---------------------------------------------------------------- the test page: the breather note at the start of every 60
   statements (app/take-views.js restLead, only for a set with restEvery), on its own line under any "Welcome back" */
.page-take .tk-lead.tk-rest{display:table;max-width:560px;margin:0 auto 14px;border-radius:14px;background:#fff;box-shadow:inset 0 0 0 1px var(--amber-light);color:var(--amber-text)}

/* ---------------------------------------------------------------- the cross-links between Personality and the six-factor test (both
   test pages, the six-factor result under its chart, and the six-factor card on the Personality result) */
.page-take .tp-cross{max-width:640px;margin:10px auto 0;text-align:center;font-size:15px;line-height:1.55;color:var(--muted)}
.page-take .tp-cross .link-more{white-space:nowrap}
.page-sixfactor .sf-cross{max-width:640px;margin:14px auto 0;padding-top:14px;border-top:1px solid var(--line);text-align:center;font-size:14px;line-height:1.55;color:var(--muted)}
.page-chapter .rp-next-pitch{display:block;margin-top:2px;font:600 12.5px/1.35 var(--body);color:var(--blue-ink)}

/* ==========================================================================
   THE MAGAZINE PASS (Sep 24, 2026): the flagship's bands, fitted to this report (app/sixfactor-report.js, "the magazine pass")
   Wayne picked proposal C out of docs/mockups/magazine/ for the Personality report and asked for the others at that level. So a
   factor is the flagship's bands (a full-bleed plate and the score on blue, the reading on white, how the number breaks down on
   grey, the question on warm), every other section is its reading on white and its question on warm, and all of it runs on the
   flagship's spine: the wrap's own left edge and its full measure, not the 820px column this report used to sit in.
   The flagship's own rules do most of the work (39-report-editorial.css .rp-part-*, .rt-entry, .rt-angles, .rt-plate, .rt-next;
   38-report-marks.css .rp-pull; 37-report-pacing.css .rp-band-pic). What is here is only what this report has and the flagship
   does not. This partial loads before 39-report-editorial.css, so a rule here that has to beat one there says .rp-full-sec.
   ========================================================================== */

/* the spine: every band's content takes the wrap's full measure; prose keeps its 72ch cap on the left edge (above) */
.page-sixfactor .rp-part :is(.sf-sec,.sf-character,.sf-across){max-width:none}

/* ---------------------------------------------------------------- open: the plate, the title, the score
   The plate is the factor's own painting at 2:1, edge to edge: the flagship's slot (.rt-plate) sets the picture's height from its
   width and pins it to the top, which on a 3:2 painting would cut off the lower third, where every one of these six has its
   subject. Here it fills the frame from the middle instead. No drop shadow on something that runs off both edges. */
.page-sixfactor .sf-plate{box-shadow:none;background:var(--ground-deep)}
/* Each painting was made as a spot on white paper, with a few percent of bare paper at its edges; edge to edge, that paper read as
   two white strips down the sides of the screen. Scaled 8% inside its frame, the paint runs off both edges instead. */
.page-sixfactor .rp-full-sec .sf-plate img{height:100%;object-fit:cover;object-position:50% 55%;transform:scale(1.08)}
.page-sixfactor .rp-full-sec .sf-factor>.rt-score{margin-top:0}

/* ---------------------------------------------------------------- read: the entry and the angles (the flagship's own rules) */
.page-sixfactor .rp-full-sec.rp-part-read .sf-read .rt-angles{margin-top:40px}
/* the odd card out runs across both columns, but its line stays at a reading measure rather than 130 characters */
.page-sixfactor .sf-lenses .sf-lens:last-child:nth-child(odd) .small{max-width:74ch}

/* the report's small section labels take the flagship's kicker (.rt-kicker, .rt-angles titles): Figtree, 12px, tracked capitals.
   They were set in the display face at 14px, the one label on the page in a face every other label on it is not. */
.page-sixfactor :is(.rp-part,.rp-excerpt) :is(.sf-ch-h,.sf-sixth-h,.sf-facets-h){font:800 12px/1.4 var(--body);letter-spacing:.11em;text-transform:uppercase;color:var(--blue-ink)}

/* ---------------------------------------------------------------- facets: how the number breaks down, on the grey ground
   The factor's score is the average of these four, which is why they sit on the ground for method. The chart stands on a white
   sheet, because its shaded typical range (--ground-deep) is within a shade of the grey band and would disappear on it; the four
   readings run beside it on a wide screen. */
.page-sixfactor .rp-full-sec.rp-part-facets{padding-block:50px 56px}
.page-sixfactor .rp-part-facets .sf-facets-h{margin-top:0}
.page-sixfactor .sf-facets-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 56px;align-items:start;margin-top:16px}
.page-sixfactor .sf-facets-grid .sf-plot.is-facets{margin:0;max-width:none;padding:20px 24px 14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.page-sixfactor .sf-facets-grid .sf-row{grid-template-columns:150px minmax(0,1fr) 48px}
.page-sixfactor .sf-facets-grid .sf-axis{margin:10px 48px 0 150px}
.page-sixfactor .sf-facets-grid .sf-facets{grid-template-columns:minmax(0,1fr);gap:0;margin:0;border-top:1px solid var(--ink)}
.page-sixfactor .sf-facets-grid .sf-facets li{padding:14px 0 16px;border-top:0;border-bottom:1px solid var(--line)}
.page-sixfactor .rp-part-facets .sf-fold{margin-top:26px}

/* ---------------------------------------------------------------- close: one question, alone on the warm band
   The flagship's close (.rt-close, .rt-q-lab, .rt-q) in this report's own class names, which its tests count by. */
.page-sixfactor .sf-close-band{text-align:center}
.page-sixfactor .sf-close-band .sf-close{margin:0;padding:0;border:0}
.page-sixfactor .sf-close-band .sf-q-lab{font:800 12px/1.4 var(--body);letter-spacing:.11em;text-transform:uppercase;color:var(--amber-text)}
.page-sixfactor .sf-close-band .sf-q{margin:16px auto 0;max-width:24ch;font:300 clamp(26px,3.4vw,38px)/1.28 var(--display);letter-spacing:-.022em;color:var(--ink)}

/* ---------------------------------------------------------------- the sections that are one reading and one question
   Each opens on its own painting under the title (a 21:9 strip at the flagship's band-picture width). */
.page-sixfactor .sf-band-art{background:var(--ground-deep)}
/* how you treat people: the two groups of four side by side under one ink rule, the two views the intro names */
.page-sixfactor .sf-ch-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 56px;margin-top:30px;border-top:1px solid var(--ink)}
.page-sixfactor .sf-ch-groups .sf-ch-group{margin-top:0;padding-top:24px;border-top:0}
.page-sixfactor .sf-ch-groups .sf-plot.is-facets{max-width:none}
.page-sixfactor .sf-ch-groups .sf-row{grid-template-columns:150px minmax(0,1fr) 48px}
.page-sixfactor .sf-ch-groups .sf-axis{margin:10px 48px 0 150px}
.page-sixfactor .sf-ch-groups .sf-ch-list li{border-top-color:var(--line)}
/* what the sixth factor adds: the two opening paragraphs side by side, and the two beats after the crossing */
.page-sixfactor .sf-sixth-intro{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 56px}
.page-sixfactor .sf-sixth .sf-sixth-intro .body+.body{margin-top:0}
.page-sixfactor .sf-sixth-intro+.sf-plot{margin-top:30px}
.page-sixfactor .sf-sixth-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 56px;margin-top:34px;border-top:1px solid var(--ink)}
.page-sixfactor .sf-sixth-beat .sf-sixth-h{margin-top:22px}
.page-sixfactor .sf-sixth-fold{margin-top:26px}
/* at work, with people: the six readings as the flagship's ruled list, two to a row */
.page-sixfactor .sf-list-intro{margin-top:4px}
.page-sixfactor .rp-part .sf-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;margin-top:30px;border-top:1px solid var(--ink)}
.page-sixfactor .rp-part .sf-list li{padding:20px 0 24px;border-top:0;border-bottom:1px solid var(--line)}
.page-sixfactor .rp-part .sf-list .small{margin-top:9px;font-size:15px;line-height:1.56;max-width:none}
/* the pull quote opens the section under its title, as the flagship's does */
.page-sixfactor .rp-part .sf-sec>.rp-pull{margin-bottom:30px}
/* how people unlike you see you: each pair on the flagship's rule for angles, an ink rule over the two, a hairline under each, no
   tinted boxes. Twelve tinted boxes in one section read as a checkerboard, and the flagship tints nothing but a cost. The part on
   people at your own end runs under the pair at a reading measure. */
.page-sixfactor .rp-part .sf-ac-list{gap:30px}
.page-sixfactor .rp-part .sf-ac-panel{padding-top:0;border-top:0}
.page-sixfactor .rp-part .sf-ac-pair{gap:0 48px;margin-top:12px;border-top:1px solid var(--ink)}
.page-sixfactor .rp-part .sf-ac-part{background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;box-shadow:none;padding:18px 0 22px}
.page-sixfactor .rp-part .sf-ac-part .box-title{font:800 12px/1.4 var(--body);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.page-sixfactor .rp-part .sf-ac-part .small{margin-top:9px;font-size:15px;line-height:1.56;max-width:none}
.page-sixfactor .rp-part .sf-ac-part.is-same{margin-top:0}
.page-sixfactor .rp-part .sf-ac-part.is-same .small{max-width:74ch}

/* ---------------------------------------------------------------- your answers: 240 rows in two columns on a wide screen
   It is a table to scan, not prose, and on one column it ran for more than ten thousand pixels at 1440. Two columns of three
   factors each keep every row and every answer, in order, and take about half the length. */
@media (min-width:1100px){
  .page-sixfactor .rp-full-sec .ch-sec[aria-labelledby="p-answers"] .rt-ans-wrap{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 40px;align-items:start}
  .page-sixfactor .rp-full-sec .ch-sec[aria-labelledby="p-answers"] .rt-ans-row{grid-template-columns:26px minmax(0,1fr) minmax(0,128px);gap:2px 12px;padding-block:8px}
  .page-sixfactor .rp-full-sec .ch-sec[aria-labelledby="p-answers"] :is(.rt-ans-q,.rt-ans-a){font-size:14px}
}

/* ---------------------------------------------------------------- a factor given away whole, as the free section
   A locked report gives one factor away on the white sheet (app/report-page.js freeSectionZone, .rp-excerpt), where its bands are
   not zones: the plate stays inside the sheet, and the room between the bands stands in for the change of ground. */
.page-sixfactor .rp-excerpt .sf-plate{width:100%;margin:0 0 30px;margin-inline:0;border-radius:var(--r)}
.page-sixfactor .rp-excerpt .sf-plate img{height:100%;object-fit:cover;object-position:50% 55%}
.page-sixfactor .rp-excerpt .sf-read{margin-top:48px}
.page-sixfactor .rp-excerpt .sf-facets-band{margin-top:56px}
.page-sixfactor .rp-excerpt .sf-close-band{margin-top:64px}
/* The factor's title keeps the masthead it has in the report (39-report-editorial.css draws it for .rp-full-sec only), the way the
   flagship's free trait keeps its name at full size, so the section a buyer decides on looks like the section they would buy. */
.page-sixfactor .rp-excerpt .sf-factor>.sh{display:grid;justify-items:start;text-align:left;gap:6px;border-top:0;border-bottom:1px solid var(--line);padding:0 0 20px;margin-bottom:30px}
.page-sixfactor .rp-excerpt .sf-factor>.sh h2{order:2;max-width:18ch;font:300 var(--rt-name)/1 var(--display);letter-spacing:-.032em;color:var(--ink)}
.page-sixfactor .rp-excerpt .sf-factor>.sh .sh-num{order:1;width:auto;height:auto;padding:0;background:none;border-radius:0;color:var(--blue-ink);font:800 var(--rt-lab)/1.4 var(--body);letter-spacing:.13em;text-transform:uppercase}

/* ---------------------------------------------------------------- narrower screens: every pair falls to one column */
@media (max-width:860px){
  .page-sixfactor :is(.sf-facets-grid,.sf-ch-groups,.sf-sixth-intro,.sf-sixth-pair){grid-template-columns:minmax(0,1fr);gap:0}
  .page-sixfactor .sf-facets-grid .sf-facets{margin-top:22px}
  .page-sixfactor .sf-sixth .sf-sixth-intro .body+.body{margin-top:14px}
  .page-sixfactor .sf-ch-groups .sf-ch-group+.sf-ch-group{margin-top:10px;border-top:1px solid var(--line)}
  .page-sixfactor .rp-part .sf-list{grid-template-columns:minmax(0,1fr);gap:0}
}
@media (max-width:720px){
  .page-sixfactor .rp-full-sec.rp-part-facets{padding-block:36px 40px}
  .page-sixfactor .sf-facets-grid .sf-plot.is-facets{padding:16px 12px 10px}
  .page-sixfactor :is(.sf-facets-grid,.sf-ch-groups) .sf-row{grid-template-columns:118px minmax(0,1fr) 38px}
  .page-sixfactor :is(.sf-facets-grid,.sf-ch-groups) .sf-axis{margin:10px 38px 0 118px}
}
@media print{
  .page-sixfactor .sf-plate{width:auto!important;margin-inline:0!important}
}


/* ===== 36-workstyle.css ===== */
/* 36-workstyle.css · the Work styles assessment (Sep 22, 2026): its test page (/assessments/workstyle/, body class page-take-workstyle)
   and its result and sample (/results/workstyle/ and /sample/workstyle/, body class page-workstyle, drawn inside .ws-page by
   app/chapter-workstyle.js). Everything is scoped to those; the shared parts (zones, cards, findings, the lock) are 34-report-pages.css.
   The four style colors are the site's four accents, checked with the dataviz validator (light surface: all checks pass; amber is under
   3:1 against white, so every mark in it carries a visible text label): Initiator blue, Host amber, Moderator teal, Planner violet. */
:is(.page-workstyle,.page-take-workstyle){--ws-as:#2288E0;--ws-en:#E08600;--ws-po:#2a9d8f;--ws-or:#7a5cc7}
:is(.page-workstyle,.page-take-workstyle) .ws-c-as,.page-take-workstyle .tp-style-as{--ws-c:var(--ws-as)}
:is(.page-workstyle,.page-take-workstyle) .ws-c-en,.page-take-workstyle .tp-style-en{--ws-c:var(--ws-en)}
:is(.page-workstyle,.page-take-workstyle) .ws-c-po,.page-take-workstyle .tp-style-po{--ws-c:var(--ws-po)}
:is(.page-workstyle,.page-take-workstyle) .ws-c-or,.page-take-workstyle .tp-style-or{--ws-c:var(--ws-or)}
.page-workstyle .ws-dot,.page-take-workstyle .tp-style-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--ws-c);flex:0 0 auto}

/* ---------------------------------------------------------------- the test page: the four styles as a row of four */
.page-take-workstyle .tp-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.page-take-workstyle .tp-grid-4>li{padding-bottom:22px}
.page-take-workstyle .tp-style-dot{width:14px;height:14px}
@media (max-width:1100px){
  .page-take-workstyle .tp-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .page-take-workstyle .tp-grid-4>li:nth-child(2n+1){padding-left:0}
}
@media (max-width:560px){
  .page-take-workstyle .tp-grid-4{grid-template-columns:minmax(0,1fr)}
  .page-take-workstyle .tp-grid-4>li{padding-left:0}
}

/* ---------------------------------------------------------------- hero: the blend line and the style map */
.page-workstyle .ws-blend{margin-top:16px;font:600 14.5px/1.5 var(--body);color:var(--ink)}
.page-workstyle .ws-tied{margin-top:8px;max-width:52ch;font-size:14.5px;line-height:1.55;color:var(--muted)}
.page-workstyle .ws-rose-fig{margin:0 auto;max-width:420px}
.page-workstyle .ws-rose{display:block;width:100%;height:auto;overflow:visible}
.page-workstyle .ws-frame{fill:#F7F9FC;stroke:var(--line);stroke-width:1}
.page-workstyle .ws-axis{stroke:var(--line);stroke-width:1}
.page-workstyle .ws-petal{fill:var(--ws-c);fill-opacity:.78;stroke:#fff;stroke-width:2;stroke-linejoin:round}
.page-workstyle .ws-petal.is-lead{fill-opacity:.95}
.page-workstyle .ws-ring{fill:none;stroke:var(--ink);stroke-width:1.4;stroke-dasharray:4 4;opacity:.7}
.page-workstyle .ws-rose-name{font:700 15px var(--body);fill:var(--ink)}
.page-workstyle .ws-rose-st{font:500 11.5px var(--body);fill:var(--muted)}
.page-workstyle .ws-rose-side{font:800 9.5px var(--body);letter-spacing:.12em;text-transform:uppercase;fill:var(--faint)}
.page-workstyle .ws-rose-cap{margin-top:10px;font-size:13px;line-height:1.55;color:var(--muted);text-align:center}

/* ---------------------------------------------------------------- free: the four scores as bars */
.page-workstyle .ws-chart{max-width:820px}
.page-workstyle .ws-bars{display:grid;gap:22px}
.page-workstyle .ws-bar-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.page-workstyle .ws-bar-name{font:700 17px/1.3 var(--body);color:var(--ink)}
.page-workstyle .ws-bar-scale{font:800 10px/1.4 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.page-workstyle .ws-bar-score{margin-left:auto;font:700 15px/1.3 var(--body);color:var(--ink);font-variant-numeric:tabular-nums}
.page-workstyle .ws-track{position:relative;height:14px;margin-top:10px;border-radius:999px;background:var(--ground-deep)}
.page-workstyle .ws-band{position:absolute;z-index:1;top:-3px;bottom:-3px;border-radius:4px;background:rgba(151,160,174,.28)}
.page-workstyle .ws-fill{position:absolute;z-index:2;left:0;top:3px;height:8px;border-radius:0 4px 4px 0;background:var(--ws-c)}
.page-workstyle .ws-avg{position:absolute;z-index:3;top:-6px;bottom:-6px;width:2px;margin-left:-1px;background:var(--ink);border-radius:1px}
.page-workstyle .ws-bar-foot{display:flex;justify-content:space-between;gap:12px;margin-top:8px;font-size:13px;line-height:1.4}
.page-workstyle .ws-standing{font-weight:700;color:var(--muted)}
.page-workstyle .ws-standing.is-above{color:var(--blue-ink)}
.page-workstyle .ws-avg-lab{color:var(--faint)}
.page-workstyle .ws-axis-row{display:flex;justify-content:space-between;margin-top:14px;padding-top:6px;border-top:1px solid var(--line);font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums}
.page-workstyle .ws-legend{display:flex;align-items:center;gap:10px;margin-top:18px;font-size:13px;line-height:1.5;color:var(--muted)}
.page-workstyle .ws-legend-band{display:inline-block;width:28px;height:14px;border-radius:4px;background:rgba(151,160,174,.28);position:relative;flex:0 0 auto}
.page-workstyle .ws-legend-band::after{content:"";position:absolute;left:13px;top:-3px;bottom:-3px;width:2px;background:var(--ink)}
.page-workstyle .ws-compare{margin-top:10px;font-size:13px;line-height:1.55;color:var(--muted)}
.page-workstyle .ws-summary{max-width:760px;margin:40px auto 0}
.page-workstyle .ws-summary-h{font:800 11px/1.4 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--blue-deep)}
.page-workstyle .ws-summary p{margin-top:10px;font:300 20px/1.55 var(--display);color:var(--ink)}
/* Sep 25, 2026: the key to the pale stretch, who the group is and what is our reading fold under the chart, in the fold's type. */
.page-workstyle .ws-chart-fold .ws-legend{margin-top:0;font-size:inherit;color:inherit}
.page-workstyle .ws-chart-fold .ws-compare{font-size:inherit;line-height:inherit;color:inherit}

/* ---------------------------------------------------------------- the full report
   Ten sections in four parts since Sep 24, 2026 (docs/REPORT_GAP.md R1), four of them one per scale, read at the reader's own end
   of it. The section head is the SHARED one now (app/chapter-common.js section(), styled in 39-report-editorial.css): this file
   used to draw `.ws-sec-head` and `.ws-sec-h` at 40px, which is how the report came to show a title four sizes smaller than the
   same object in the flagship. Nothing here restates a size the shared head already sets. */
.page-workstyle .ws-sec{margin:0 auto}
.page-workstyle .ws-sec-lede{margin-top:12px;max-width:68ch;font-size:16px;line-height:1.6;color:var(--muted)}
.page-workstyle .ws-sec-lede-top{margin:0 0 26px}
.page-workstyle .ws-prose{max-width:68ch;margin-top:20px}
.page-workstyle .ws-prose p,.page-workstyle .ws-sub p,.page-workstyle .ws-card p{font-size:16.5px;line-height:1.7;color:var(--ink)}
.page-workstyle .ws-prose p+p{margin-top:14px}
.page-workstyle .ws-sub{margin-top:28px;max-width:68ch}
.page-workstyle .ws-sub-h{font:700 18px/1.3 var(--body);margin-bottom:8px}
.page-workstyle .ws-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 44px}
.page-workstyle .ws-two .ws-sub{max-width:none}
.page-workstyle .ws-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:26px}
.page-workstyle .ws-cards.is-four{grid-template-columns:repeat(2,minmax(0,1fr))}
.page-workstyle .ws-card{padding:20px 22px 22px;background:#fff;border-radius:14px;border-top:3px solid var(--ws-c);box-shadow:var(--sh-sm)}
.page-workstyle .ws-card-h{display:flex;align-items:center;gap:10px;font:700 16px/1.3 var(--body);margin-bottom:8px}
.page-workstyle .ws-card p{font-size:15.5px;line-height:1.65}

/* ---- a scale section: the reader's own row of the free chart, the reading, then the angles
   ON THE SPINE. 39-report-editorial.css: "Every block starts on the wrap's own edge. Nothing is centred on its own width - that is
   what produced thirteen measures." The shared chart and prose rules both centre, which left a section's head at the wrap's edge
   and its chart and its paragraphs each indented by a different amount. Everything in a report section starts at the same left
   edge here, and keeps its own measure on the right. */
.page-workstyle :is(.rp-full-sec,.rp-excerpt) .ws-sec .ws-prose{margin-inline:0 auto}
.page-workstyle .ws-sec .rp-chart{margin-inline:0}
.page-workstyle .ws-scale-chart{max-width:600px;margin-top:6px}
.page-workstyle .ws-scale-chart .ws-compare{margin-top:14px}
/* p.ws-scale-* outranks `.ws-prose p` above, which had been setting both of these at 16.5px in ink since the scale sections were
   written, so what the scale covers and our reading of it read as one paragraph. The reading is the section's lede now, in the
   display face at the life chapter's lede size (39-report-editorial.css --rt-lede), beside the scale's painting. */
.page-workstyle .ws-prose p.ws-scale-about{font-size:15px;line-height:1.6;color:var(--muted)}
.page-workstyle .ws-prose p.ws-scale-read{margin-top:14px;font:300 var(--rt-lede,20px)/1.5 var(--display);letter-spacing:-.006em;color:var(--ink)}
/* Since Sep 27, 2026 what the scale covers opens the section on blue, over the panel (app/score-panel.js scaleIntro), so the
   reading is the first thing on the white band and takes no gap above it. */
.page-workstyle .ws-prose p.ws-scale-read:first-child{margin-top:0}

/* THE ANGLES ARE A RULED LIST, NOT A ROW OF TINTED PANELS, which is how the flagship draws the same object
   (39-report-editorial.css: "the six angles are a ruled list and only the two that name a cost carry a mark"). The two marked here
   are the two that read the other direction: the trade-off in amber, and how the level lands on other people in violet. The first
   card runs the full width, so the rest pair off two by two and the grid is square whether there are seven of them or the five a
   hard score shows. */
.page-workstyle .ws-angles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;margin-top:38px;border-top:1px solid var(--ink)}
.page-workstyle .ws-angles .ws-angle{position:relative;background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;box-shadow:none;padding:20px 0 24px}
.page-workstyle .ws-angles .ws-angle.is-work{grid-column:1 / -1}
.page-workstyle .ws-angles .ws-angle .box-title{font:800 var(--rt-lab,12px)/1.4 var(--body);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.page-workstyle .ws-angles .ws-angle .small{margin-top:9px;max-width:none;font-size:var(--rt-ang,15px);line-height:1.56}
.page-workstyle .ws-angles .ws-angle:is(.is-cost,.is-seen){padding-left:18px}
.page-workstyle .ws-angles .ws-angle:is(.is-cost,.is-seen)::before{content:"";position:absolute;left:0;top:20px;bottom:24px;width:2px}
.page-workstyle .ws-angles .ws-angle.is-cost::before{background:var(--amber)}
.page-workstyle .ws-angles .ws-angle.is-cost .box-title{color:var(--amber-text)}
.page-workstyle .ws-angles .ws-angle.is-seen::before{background:var(--ws-c)}

/* ---- how this level comes across to people at the other end, and what helps (D118, Sep 24, 2026)
   After the angles and before the question: a heading naming the colleagues at the other end of the scale, then two columns on
   the section's spine, each under the angles' own small label. The what-helps label takes the reader's blue, as the question's
   label does, because it is about what the reader brings; how it comes across keeps the angles' grey. The same what-helps label
   and paragraph close each card of "Working well with each style". One column below 820px. */
.page-workstyle .ws-across{margin-top:44px}
.page-workstyle .ws-across-h{font:700 18px/1.3 var(--body);color:var(--ink)}
.page-workstyle .ws-across-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;margin-top:14px;border-top:1px solid var(--line)}
.page-workstyle .ws-across-col{padding:18px 0 0}
.page-workstyle .ws-across-lab{font:800 var(--rt-lab,12px)/1.4 var(--body);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.page-workstyle .ws-across-col p:not(.ws-across-lab){margin-top:9px;font-size:var(--rt-ang,15px);line-height:1.56;color:var(--ink)}
.page-workstyle :is(.ws-across-col.is-helps,.ws-card) .ws-across-lab{color:var(--blue-deep)}
.page-workstyle .ws-card .ws-across-lab{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:var(--rt-lab,12px);line-height:1.4}
.page-workstyle .ws-card .ws-card-helps{margin-top:8px}

/* ---- the question a section ends on is the flagship's close band now (39-report-editorial.css .rt-close): alone on warm, centered,
   in the display face. Nothing about its type is restated here. */

/* ==========================================================================
   THE MAGAZINE LOOK (Sep 24, 2026): the flagship's bands, grounds, pull bars and paintings, brought to this report.
   Wayne picked option C out of docs/mockups/magazine/ for the Personality report, said of the result "it actually looks really
   good as is", and asked for the other reports at that level. His note on density, which this report needed more than any:
   "it's just too information dense... need a bit more visual, low content panels for decoration."
   Every section is a run of bands (app/report-page.js fullZones `bands`, rendered by app/chapter-workstyle.js), and the ground
   says what is on it, the flagship's code: blue the reader's own numbers, white reading about the reader, grey the parts about
   other people, warm the question the section ends on. A scale section is four of them (open, read, people, close) and a blend
   section two (read, close). Only this report's own objects are styled here; the band paddings, the question, the pull bar, the
   entry and the band picture are the flagship's rules in 37-, 38- and 39-report-*.css, used as they are.
   ========================================================================== */

/* the score panel under a scale's number and name, on blue: the flagship's mast and sheet, with nothing between them */
.page-workstyle .ws-open>.rt-score{margin:0}

/* TEXT LEVEL WITH A PAINTING. A scale's reading opens beside the scale's own painting, and the first section's prose beside its
   picture, in the life chapter's own proportions (32-domains.css .ch-head), so the opening of a section is never a paragraph
   standing in half a band with nothing beside it. The angles and everything after run the full width below. */
.page-workstyle .ws-entry{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:0 52px;align-items:start}
.page-workstyle .ws-entry-t{min-width:0}
.page-workstyle .ws-entry .ws-entry-pic{margin:6px 0 0;width:100%}
.page-workstyle :is(.rp-full-sec,.rp-excerpt) .ws-entry .ws-prose{max-width:none;margin:0}
.page-workstyle .ws-scale-sec .ws-entry .ws-sec-lede{margin-top:0;max-width:none}
.page-workstyle .ws-scale-sec .ws-entry .ws-prose{margin-top:0}
/* the blend under the first section: the flagship's entry, its name as the headline and the paragraph beside it */
.page-workstyle .ws-blend-entry{margin-top:46px;padding-top:34px;border-top:1px solid var(--line)}
/* the pull bar between a scale's reading and its angles; over the cards of "Working well" it keeps the flagship's own spacing */
.page-workstyle .ws-scale-sec>.rp-pull{margin:44px 0 0}

/* the boathouse is cropped to a letterbox under its title; the crop sits low enough to keep the four oar blades whole */
.page-workstyle .ws-s-with .rp-band-pic img{object-position:50% 78%}

/* the people band: how this level comes across at the other end of the scale, and what helps, on grey */
.page-workstyle .rp-full-sec.rp-part-people{padding-block:52px 58px}
.page-workstyle .rp-part-people .ws-across{margin-top:0}

/* ---- the quiet shapes, on the two bands that hold the least
   The flagship switches its ring-and-disc layer off on a section that runs over several bands (39-report-editorial.css), because
   a trait opens on a change of ground and a name at 60px. This report asks for the opposite: Wayne's note was more decoration in
   the long runs, not less. So the shapes come back on exactly two bands per section, never under a line of type: the question
   band, which holds one sentence in the middle of a wide warm ground, and a scale's opening band, where a ring in that style's own
   color (the petal it has in the chart) stands off the right edge behind the score sheet. Flat color and one hairline, as the
   shared layer draws them; gone at prefers-contrast: more, and on a phone all but one small disc. The .ws-page in each selector
   outranks the shared layer's :nth-of-type placements (37-report-pacing.css). */
.page-workstyle .ws-page .rp-full-sec:is(.rp-part-close,.rp-part-open)::before,
.page-workstyle .ws-page .rp-full-sec:is(.rp-part-close,.rp-part-open)::after{display:block;content:"";position:absolute;z-index:-1;pointer-events:none;border-radius:50%;inset:auto;transform:none}
.page-workstyle .ws-page .rp-full-sec.rp-part-close::before{width:460px;height:460px;right:-170px;top:-150px;border:1px solid var(--line);background:none;opacity:.85}
.page-workstyle .ws-page .rp-full-sec.rp-part-close::after{width:250px;height:250px;left:-96px;bottom:-84px;border:0;background:#fff;opacity:.72}
/* every other blend question sits the other way round, so the same arrangement does not come down the page twice running */
.page-workstyle .ws-page .rp-full-sec.rp-part-close:is(.ws-s-lead,.ws-s-seen)::before{right:auto;left:-190px;top:auto;bottom:-190px;width:520px;height:520px}
.page-workstyle .ws-page .rp-full-sec.rp-part-close:is(.ws-s-lead,.ws-s-seen)::after{left:auto;right:-70px;bottom:auto;top:-60px;width:200px;height:200px}
/* a scale's question takes that style's color on its ring, faintly: the petal the section was about */
.page-workstyle .ws-page .rp-full-sec.rp-part-close[class*="ws-c-"]::before{border-color:var(--ws-c);opacity:.42;right:auto;left:-210px;top:-120px;width:540px;height:540px}
.page-workstyle .ws-page .rp-full-sec.rp-part-close[class*="ws-c-"]::after{left:auto;right:-80px;bottom:-60px;width:220px;height:220px}
.page-workstyle .ws-page .rp-full-sec.rp-part-open::before{width:560px;height:560px;right:-230px;top:-250px;border:1.5px solid var(--ws-c);background:none;opacity:.4}
.page-workstyle .ws-page .rp-full-sec.rp-part-open::after{width:180px;height:180px;right:150px;top:-104px;border:0;background:#fff;opacity:.6}
@media (prefers-contrast:more){
  .page-workstyle .ws-page .rp-full-sec:is(.rp-part-close,.rp-part-open)::before,
  .page-workstyle .ws-page .rp-full-sec:is(.rp-part-close,.rp-part-open)::after{display:none}
}

/* ---------------------------------------------------------------- questions: the paper's table */
.page-workstyle .ws-table{width:100%;max-width:560px;margin-top:14px;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
.page-workstyle .ws-table caption{caption-side:top;text-align:left;padding-bottom:8px;font-size:13px;line-height:1.5;color:var(--muted)}
.page-workstyle .ws-table th,.page-workstyle .ws-table td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left}
.page-workstyle .ws-table thead th{font-weight:700;font-size:12.5px;color:var(--muted)}
.page-workstyle .ws-table td:nth-child(2),.page-workstyle .ws-table thead th:nth-child(2){font-weight:700;color:var(--ink)}

@media (max-width:820px){
  .page-workstyle .ws-two,.page-workstyle .ws-cards,.page-workstyle .ws-cards.is-four,.page-workstyle .ws-angles,.page-workstyle .ws-across-grid{grid-template-columns:minmax(0,1fr)}
  .page-workstyle .ws-angles{gap:0}
  .page-workstyle .ws-rose-fig{max-width:340px}
  .page-workstyle .ws-summary p{font-size:18px}
  /* the painting follows the words it stood beside, as a life chapter's does */
  .page-workstyle .ws-entry{grid-template-columns:minmax(0,1fr);gap:0}
  .page-workstyle .ws-entry .ws-entry-pic{margin-top:24px}
  .page-workstyle .ws-blend-entry{margin-top:34px;padding-top:26px}
  .page-workstyle .ws-scale-sec>.rp-pull{margin-top:32px}
  .page-workstyle .rp-full-sec.rp-part-people{padding-block:38px 42px}
  /* no room beside the text on a phone: the rings go, and one small disc stays in a corner */
  .page-workstyle .ws-page .rp-full-sec:is(.rp-part-close,.rp-part-open)::before{display:none}
  /* [class] lifts this to the weight of the placements above it, so it wins on a phone whichever section it is */
  .page-workstyle .ws-page .rp-full-sec:is(.rp-part-close,.rp-part-open)[class]::after{width:150px;height:150px;inset:auto auto -70px -80px}
}


/* ===== 37-report-pacing.css ===== */
/* ==========================================================================
   37-report-pacing.css · owner: results track. The pieces that break up the Personality report.
   WHY (Wayne, Sep 23, 2026): "overall the personality report is world class. it's just too information dense. it's almost like
   a small book by itself... i mean the section with the distribution curve and stuff, yeah that stuff is great. but after that
   it may need a bit more breaking up of the information density. so decorative panels, illustrations, visuals, quotes, etc."
   So nothing here touches the five trait sections, which are the part he called great. These are the objects added after them:
     .rp-type-card   the reader's own four-letter type, with its painting and the opening of its write-up, at the head of the
                     section about their letters (app/chapter-personality.js typeCard). Since Sep 25, 2026 the opening's scene
                     comes first, the type's one line is set large between the scene and its reading (a blockquote, so its
                     browser margins are reset here), and the reading follows, so the card never runs 150 words unbroken.
     .rp-band-pic    a wide picture under a section heading, where a run of prose has nothing to rest on
   Markup: app/chapter-personality.js. Editorial system: D88, docs/SITE_KIT.md.
   ========================================================================== */

/* ---------------------------------------------------------------- the reader's own type, as a card */
:is(.page-results,.page-chapter) .rp-type-card{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:0 36px;align-items:start;margin:0 0 34px;padding:26px 28px;border:1px solid var(--line);border-radius:var(--r);background:var(--quiet-bg)}
:is(.page-results,.page-chapter) .rp-type-card .rp-tc-art{min-width:0}
:is(.page-results,.page-chapter) .rp-type-card .ch-fl-art{margin:0;width:100%}
:is(.page-results,.page-chapter) .rp-type-card .rp-tc-body{min-width:0}
:is(.page-results,.page-chapter) .rp-type-card .rp-tc-k{font:800 9.5px/1.4 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--blue-deep)}
:is(.page-results,.page-chapter) .rp-type-card .rp-tc-name{margin-top:10px;font:300 34px/1.08 var(--display);letter-spacing:-.018em}
/* the type's own one line, set large: a pull quote the report already owns, never an invented one */
:is(.page-results,.page-chapter) .rp-type-card .rp-tc-line{margin:16px 0 0;padding-left:16px;border-left:2px solid var(--blue-mark);font:300 21px/1.38 var(--display);color:var(--blue-deep)}
:is(.page-results,.page-chapter) .rp-type-card .rp-tc-core{margin-top:16px;max-width:62ch;font-size:14.5px;line-height:1.62;color:var(--muted)}
:is(.page-results,.page-chapter) .rp-type-card .rp-tc-go{margin-top:14px}

/* ---------------------------------------------------------------- a wide picture under a section heading */
:is(.page-results,.page-chapter) .rp-band-pic{margin:6px 0 30px;width:100%}

/* ---------------------------------------------------------------- the reader's own guide, chapter by chapter (app/report-guide.js)
   Wayne, Sep 23: "i think the chapters should be in the report because it adds more visual and tactile engagement to flip the
   cards", then, on the tab strip that first carried them: "it's kind of annoying having to scroll down to see all the cards,
   and then when i'm done scroll back up to the top to read the next group", and "we probably don't want the horiz scrollbar".
   A strip above the chapter is only ever behind you, and ten chapters do not fit across a column. So the list is a rail down
   the side: it sticks while the reader scrolls, it cannot overflow sideways however many chapters a guide has, and it has the
   room to mark off what has been read. A control at the foot of each chapter means the common path never needs the rail.
   The decks themselves are the library's, styled in 51-fourletter.css. */
:is(.page-results,.page-chapter) .rg-body{display:grid;grid-template-columns:210px minmax(0,1fr);gap:0 44px;align-items:start;margin-top:24px}
:is(.page-results,.page-chapter) .rg-rail-wrap{position:sticky;top:calc(var(--header-h,60px) + 24px);align-self:start;min-width:0}
:is(.page-results,.page-chapter) .rg-rail-list{list-style:none;margin:0;padding:0;border-left:1px solid var(--line)}
:is(.page-results,.page-chapter) .rg-rail-item{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px 8px 14px;margin-left:-1px;border:0;border-left:2px solid transparent;background:none;color:var(--muted);font:600 13px/1.3 var(--body);text-align:left;cursor:pointer}
:is(.page-results,.page-chapter) .rg-rail-item:hover{color:var(--ink)}
:is(.page-results,.page-chapter) .rg-rail-item[aria-selected="true"]{border-left-color:var(--blue-mark);color:var(--ink);font-weight:800}
:is(.page-results,.page-chapter) .rg-rail-n{display:inline-grid;place-items:center;flex:none;width:20px;height:20px;border-radius:50%;background:var(--quiet-bg);color:var(--muted);font-size:10.5px;font-weight:800}
:is(.page-results,.page-chapter) .rg-rail-item[aria-selected="true"] .rg-rail-n{background:var(--blue-deep);color:#fff}
:is(.page-results,.page-chapter) .rg-rail-item.is-done .rg-rail-n{background:var(--cobalt-pale);color:var(--blue-deep)}
:is(.page-results,.page-chapter) .rg-rail-t{min-width:0}
:is(.page-results,.page-chapter) .rg-rail-prog{display:grid;gap:6px;margin-top:16px;padding-left:16px}
:is(.page-results,.page-chapter) .rg-rail-bar{display:block;height:4px;border-radius:var(--r-pill);background:var(--line);overflow:hidden}
:is(.page-results,.page-chapter) .rg-rail-bar i{display:block;height:100%;border-radius:inherit;background:var(--blue-mark);transition:width .45s cubic-bezier(.2,.8,.3,1)}
:is(.page-results,.page-chapter) .rg-rail-count{font:700 11px/1.3 var(--body);letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
:is(.page-results,.page-chapter) .rg-panel{min-width:0}
:is(.page-results,.page-chapter) .rg-ch-title{font:300 30px/1.1 var(--display);letter-spacing:-.018em}
:is(.page-results,.page-chapter) .rg-intro{margin-top:12px;max-width:70ch}
:is(.page-results,.page-chapter) .rg-deck-h{margin:0}
:is(.page-results,.page-chapter) .rg-plain{margin-top:30px}
:is(.page-results,.page-chapter) .rg-plain .prose p{max-width:70ch}
/* the way on, at the end of a chapter */
:is(.page-results,.page-chapter) .rg-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;margin-top:34px;padding-top:22px;border-top:1px solid var(--line)}
:is(.page-results,.page-chapter) .rg-next{display:inline-flex;align-items:baseline;gap:10px;padding:11px 18px;border:1px solid var(--blue-deep);border-radius:10px;background:var(--blue-deep);color:#fff;cursor:pointer;font:inherit}
:is(.page-results,.page-chapter) .rg-next:hover{filter:brightness(1.12)}
:is(.page-results,.page-chapter) .rg-next-k{font:800 9.5px/1.4 var(--body);letter-spacing:.14em;text-transform:uppercase;opacity:.84}
:is(.page-results,.page-chapter) .rg-next-t{font:600 14.5px/1.3 var(--body)}
:is(.page-results,.page-chapter) .rg-out{margin:0}

/* ---------------------------------------------------------------- the quiet layer behind the bands
   Wayne, Sep 23: "should we add more soft, simple, elegant shapes and stuff in the background layer to give it a bit more of an
   elevated design... obv don't overdo it", then, having seen it: "i like the bubble and hairline thing you drew, but i only see
   them on the lighter background, i see none on the grayer background. and maybe just a few more with more random placement."
   So the layer covers every band of the full report, not only the white ones, and there are four shapes rather than two, placed
   off a five-band cycle so the same arrangement does not come round every other section.
   The rules have not moved: flat color and one hairline, never a gradient (D88), nothing under a line of type, nothing that
   moves, all of it gone at prefers-contrast: more, and the two biggest shapes gone on a phone where there is no room beside the
   text. Every value is drawn from the system's own two lightest tokens, so contrast on the type above is unchanged. */
:is(.page-results,.page-chapter) .rp-full-sec{overflow:clip;isolation:isolate}
:is(.page-results,.page-chapter) .rp-full-sec::before,
:is(.page-results,.page-chapter) .rp-full-sec::after{content:"";position:absolute;z-index:-1;pointer-events:none;border-radius:50%}
/* the ring */
:is(.page-results,.page-chapter) .rp-full-sec::before{width:540px;height:540px;right:-190px;top:64px;border:1px solid var(--line);opacity:.62}
/* the disc */
:is(.page-results,.page-chapter) .rp-full-sec::after{width:300px;height:300px;left:-130px;bottom:52px;background:var(--blue-wash);opacity:.5}
/* on the tinted bands the wash would vanish into the ground, so the disc there is white and the ring a shade stronger */
:is(.page-results,.page-chapter) .rp-full-sec.zone-grey::after,
:is(.page-results,.page-chapter) .rp-full-sec.zone-warm::after{background:#fff;opacity:.72}
:is(.page-results,.page-chapter) .rp-full-sec.zone-grey::before,
:is(.page-results,.page-chapter) .rp-full-sec.zone-warm::before{opacity:.8}
/* seven arrangements, so the eye never finds the repeat going down a thirty-thousand-pixel page. Wayne, Sep 24, 2026, having
   seen five: "more underlying patterns, shapes, etc to make the page more elevated." Two more arrangements, a fourth shape, and
   the layer now reaches the free bands above the report as well as the sections of the report itself. */
:is(.page-results,.page-chapter) .rp-full-sec:nth-of-type(7n+2)::before{right:auto;left:-230px;top:auto;bottom:-120px;width:600px;height:600px}
:is(.page-results,.page-chapter) .rp-full-sec:nth-of-type(7n+2)::after{left:auto;right:-90px;bottom:auto;top:120px;width:220px;height:220px}
:is(.page-results,.page-chapter) .rp-full-sec:nth-of-type(7n+3)::before{width:380px;height:380px;right:-140px;top:auto;bottom:80px}
:is(.page-results,.page-chapter) .rp-full-sec:nth-of-type(7n+3)::after{width:420px;height:420px;left:auto;right:180px;top:-200px;bottom:auto}
:is(.page-results,.page-chapter) .rp-full-sec:nth-of-type(7n+4)::before{width:700px;height:700px;right:-320px;top:-160px}
:is(.page-results,.page-chapter) .rp-full-sec:nth-of-type(7n+4)::after{width:170px;height:170px;left:56px;bottom:-70px}
:is(.page-results,.page-chapter) .rp-full-sec:nth-of-type(7n+5)::before{right:auto;left:-260px;top:30%;width:480px;height:480px}
:is(.page-results,.page-chapter) .rp-full-sec:nth-of-type(7n+5)::after{left:auto;right:-140px;bottom:-110px;width:340px;height:340px}
:is(.page-results,.page-chapter) .rp-full-sec:nth-of-type(7n+6)::before{width:250px;height:250px;right:110px;top:-130px}
:is(.page-results,.page-chapter) .rp-full-sec:nth-of-type(7n+6)::after{width:520px;height:520px;left:-300px;top:22%;bottom:auto}
:is(.page-results,.page-chapter) .rp-full-sec:nth-of-type(7n)::before{width:900px;height:900px;right:-520px;top:auto;bottom:-300px}
:is(.page-results,.page-chapter) .rp-full-sec:nth-of-type(7n)::after{width:130px;height:130px;left:auto;right:64px;bottom:76px;top:auto}
/* a third mark on some bands: one hairline arc, drawn as a ring with three of its four edges taken off */
:is(.page-results,.page-chapter) .rp-full-sec:nth-of-type(3n) .wrap::before{content:"";position:absolute;z-index:-1;pointer-events:none;width:760px;height:760px;right:-420px;bottom:-380px;border-radius:50%;border:1px solid transparent;border-top-color:var(--line);transform:rotate(-24deg);opacity:.75}
/* and a fourth on others, on a cycle that does not line up with the first three: a second arc, smaller, leaning the other way,
   so two bands running the same arrangement of circles still do not look alike */
:is(.page-results,.page-chapter) .rp-full-sec:nth-of-type(4n+1) .wrap::after{content:"";position:absolute;z-index:-1;pointer-events:none;width:440px;height:440px;left:-300px;top:-140px;border-radius:50%;border:1px solid transparent;border-bottom-color:var(--line);transform:rotate(18deg);opacity:.7}
:is(.page-results,.page-chapter) .rp-full-sec .wrap{position:relative}

/* THE SAME LAYER ON THE BANDS ABOVE THE REPORT. Until now it stopped at the paid sections, so the free result — the part a
   reader who never pays judges the product by — was the flattest run on the page. Each of these gets one arrangement of its
   own rather than a cycle, because they appear once each. */
:is(.page-results,.page-chapter) :is(.rp-summary-zone,.rp-excerpt-zone,.rp-toc-zone,.rp-full-head,.rp-takes-zone){overflow:clip;isolation:isolate}
:is(.page-results,.page-chapter) :is(.rp-summary-zone,.rp-excerpt-zone,.rp-toc-zone,.rp-full-head,.rp-takes-zone)::before,
:is(.page-results,.page-chapter) :is(.rp-summary-zone,.rp-excerpt-zone,.rp-toc-zone,.rp-full-head,.rp-takes-zone)::after{content:"";position:absolute;z-index:-1;pointer-events:none;border-radius:50%}
:is(.page-results,.page-chapter) .rp-summary-zone::before{width:620px;height:620px;left:-300px;top:-180px;border:1px solid var(--line);opacity:.62}
:is(.page-results,.page-chapter) .rp-summary-zone::after{width:240px;height:240px;right:-90px;bottom:60px;background:var(--blue-wash);opacity:.5}
:is(.page-results,.page-chapter) .rp-excerpt-zone::before{width:700px;height:700px;right:-330px;top:-220px;border:1px solid var(--line);opacity:.8}
:is(.page-results,.page-chapter) .rp-excerpt-zone::after{width:280px;height:280px;left:-150px;bottom:-90px;background:#fff;opacity:.72}
:is(.page-results,.page-chapter) .rp-toc-zone::before{width:660px;height:660px;left:-320px;top:-200px;border:1px solid var(--line);opacity:.8}
:is(.page-results,.page-chapter) .rp-toc-zone::after{width:260px;height:260px;right:-100px;bottom:-80px;background:#fff;opacity:.72}
:is(.page-results,.page-chapter) .rp-full-head::before{width:520px;height:520px;left:-250px;bottom:-260px;border:1px solid var(--line);opacity:.8}
:is(.page-results,.page-chapter) .rp-full-head::after{width:200px;height:200px;right:-70px;top:40px;background:#fff;opacity:.72}
:is(.page-results,.page-chapter) .rp-takes-zone::before{width:560px;height:560px;right:-280px;top:-160px;border:1px solid var(--line);opacity:.8}
:is(.page-results,.page-chapter) .rp-takes-zone::after{width:210px;height:210px;left:-110px;bottom:-60px;background:#fff;opacity:.72}

@media (prefers-contrast:more){
  :is(.page-results,.page-chapter) :is(.rp-full-sec,.rp-summary-zone,.rp-excerpt-zone,.rp-toc-zone,.rp-full-head,.rp-takes-zone)::before,
  :is(.page-results,.page-chapter) :is(.rp-full-sec,.rp-summary-zone,.rp-excerpt-zone,.rp-toc-zone,.rp-full-head,.rp-takes-zone)::after,
  :is(.page-results,.page-chapter) .rp-full-sec .wrap::before,
  :is(.page-results,.page-chapter) .rp-full-sec .wrap::after{display:none}
}
@media (max-width:820px){
  /* a phone has no room to spare beside the text, so the big shapes go and one small disc stays in the corner */
  :is(.page-results,.page-chapter) .rp-full-sec::before,
  :is(.page-results,.page-chapter) :is(.rp-summary-zone,.rp-excerpt-zone,.rp-toc-zone,.rp-full-head,.rp-takes-zone)::before,
  :is(.page-results,.page-chapter) .rp-full-sec .wrap::before,
  :is(.page-results,.page-chapter) .rp-full-sec .wrap::after{display:none}
  :is(.page-results,.page-chapter) .rp-full-sec::after{width:190px;height:190px;left:-110px;right:auto;top:auto;bottom:40px}
  :is(.page-results,.page-chapter) :is(.rp-summary-zone,.rp-excerpt-zone,.rp-toc-zone,.rp-full-head,.rp-takes-zone)::after{width:170px;height:170px;left:-100px;right:auto;top:auto;bottom:36px}
}

/* ---------------------------------------------------------------- narrow: the rail goes above, two columns deep, no scroller
   A rail down the side needs room beside the text that a phone does not have, and a sideways strip is the thing Wayne asked to
   be rid of. So the same list stacks into two short columns above the chapter, which fits ten chapters in five rows and still
   never scrolls sideways. The control at the foot of each chapter matters most here. */
@media (max-width:960px){
  :is(.page-results,.page-chapter) .rg-body{grid-template-columns:minmax(0,1fr);gap:22px 0}
  :is(.page-results,.page-chapter) .rg-rail-wrap{position:static}
  :is(.page-results,.page-chapter) .rg-rail-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 10px;border-left:0;border-bottom:1px solid var(--line);padding-bottom:12px}
  :is(.page-results,.page-chapter) .rg-rail-item{padding:7px 8px;border-left:0;border-bottom:2px solid transparent;margin-left:0}
  :is(.page-results,.page-chapter) .rg-rail-item[aria-selected="true"]{border-bottom-color:var(--blue-mark)}
  :is(.page-results,.page-chapter) .rg-rail-prog{padding-left:0;margin-top:12px}
  :is(.page-results,.page-chapter) .rg-next{width:100%;justify-content:center}
}

@media (max-width:820px){
  :is(.page-results,.page-chapter) .rp-type-card{grid-template-columns:minmax(0,1fr);gap:22px 0;padding:22px 18px}
  :is(.page-results,.page-chapter) .rp-type-card .rp-tc-art{max-width:260px}
  :is(.page-results,.page-chapter) .rp-type-card .rp-tc-name{font-size:28px}
  :is(.page-results,.page-chapter) .rp-type-card .rp-tc-line{font-size:19px}
  :is(.page-results,.page-chapter) .rp-band-pic{margin-bottom:22px}
  :is(.page-results,.page-chapter) .rg-ch-title{font-size:25px}
}


/* ===== 38-report-marks.css ===== */
/* ==========================================================================
   38-report-marks.css · owner: results track. The small drawn marks in the Personality report, the pull bars, and the print
   rules for the whole thing.
   WHY (Wayne, Sep 23, 2026, reading it a third time): the compatibility panel is "too word/info dense" and wants "some kind of
   visual differentiator or indicator or icon"; the three days on the life-chapter scale should be "a rainy day, cloud with some
   sun, and sunny day icons", and "you might even be able to animate it"; and the report needs more "low content panels with
   quotes... like a colored bar with some quotes and highlights". And: "probably should have a download as pdf function".
   Markup: app/compat-section.js, app/domains-view.js, app/chapter-personality.js.
   ========================================================================== */

/* ---------------------------------------------------------------- the pull bar
   One sentence the report already wrote about this reader, set large on a wash, where a run of prose needs a rest. */
:is(.page-results,.page-chapter) .rp-pull{margin:0 0 30px;padding:24px 28px;border-left:3px solid var(--blue-mark);border-radius:0 var(--r) var(--r) 0;background:var(--blue-wash)}
:is(.page-results,.page-chapter) .rp-pull blockquote{margin:0}
:is(.page-results,.page-chapter) .rp-pull p{max-width:34ch;font:300 27px/1.24 var(--display);letter-spacing:-.014em;color:var(--blue-deep)}

/* ---------------------------------------------------------------- the marks beside a compatibility panel's three parts */
.compat .compat-part-title{display:flex;align-items:center;gap:8px}
.compat .compat-part-mark{flex:none;color:var(--blue-mark)}
.compat :is(.compat-friction,.compat-alike) .compat-part-mark{color:var(--amber)}
.compat .compat-bring .compat-part-mark{color:var(--sage)}

/* ---------------------------------------------------------------- research and limits, folded (they print open, see below)
   Nothing here is deleted: a stated limitation is what keeps the claim above it honest, and the markers in the prose point at
   these citations. One click, and it prints open in the PDF. */
.compat .compat-folds{display:grid;gap:8px;margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.compat .compat-fold{min-width:0}
/* The head and the caret are the shared context fold's now (05-components.css, D106), so all the folds in a report look alike. */
.compat .compat-fold-body{padding-top:10px}
.compat .compat-fold-body .compat-limit{margin-top:0}
.compat .compat-fold-body .compat-research+.compat-research{margin-top:10px}

/* ---------------------------------------------------------------- the three days, as weather
   One cloud across all three, so the set reads as one thing changing. The words are right beside them and say the same, so the
   marks are hidden from a screen reader. */
:is(.page-results,.page-chapter) .pr-chapter .ch-spec h4{display:flex;align-items:center;gap:9px}
:is(.page-results,.page-chapter) .pr-chapter .ch-day-mark{flex:none;width:22px;height:22px;color:var(--grey)}
:is(.page-results,.page-chapter) .pr-chapter .is-steady .ch-day-mark{color:var(--blue-mark)}
:is(.page-results,.page-chapter) .pr-chapter .is-best .ch-day-mark{color:var(--amber)}

/* Ambient, and only while it is on screen (app/motion.js adds .is-live when the block comes into view and takes it off again).
   Small, slow, and never in the corner of the eye while somebody reads the column beside it. The static drawing is the real
   one: it is what prints, and what anybody who asked for less motion sees. */
@keyframes ch-rain{0%{transform:translateY(-2px);opacity:0}25%{opacity:.9}100%{transform:translateY(5px);opacity:0}}
@keyframes ch-drift{0%,100%{transform:translateX(0)}50%{transform:translateX(1.4px)}}
@keyframes ch-glow{0%,100%{opacity:.85}50%{opacity:1}}
:is(.page-results,.page-chapter) .ch-press.is-live .is-strained .ch-day-mark path:nth-child(2){animation:ch-rain 2.6s linear infinite}
:is(.page-results,.page-chapter) .ch-press.is-live .is-strained .ch-day-mark path:first-child{animation:ch-drift 7s ease-in-out infinite}
:is(.page-results,.page-chapter) .ch-press.is-live .is-steady .ch-day-mark path:last-child{animation:ch-drift 8s ease-in-out infinite}
:is(.page-results,.page-chapter) .ch-press.is-live .is-best .ch-day-mark path{animation:ch-glow 5s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){
  :is(.page-results,.page-chapter) .ch-press .ch-day-mark *{animation:none!important}
}

/* ---------------------------------------------------------------- a section break should read as one
   Wayne asked twice. First: "i'd make the title of each of the chapters in the report bigger or different style/color to notify
   a new section", which got 38px light in the deep blue. Then, Sep 24, 2026, reading the result: "i think the title of each
   section should be larger, bolder, like clearly stand out when people are just scrolling through the page. maybe make it black,
   more bold, centered, etc."
   So the title is the one place in the report that leaves D88's light display weights: 600 rather than 300, the page's own ink
   rather than blue, half as big again, and centered under the section's number so the eye meets a title-page rather than a
   heading. The number is the mark above it, the section's own figure the line below it, and the rule and the change of ground
   already say a band has ended. Nothing else on the page moves: this rule reaches a full-report section's own heading and
   nothing outside one. */
:is(.page-results,.page-chapter) .rp-full-sec .ch-sec>.sh{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:16px;padding-top:26px;padding-bottom:26px;margin-bottom:38px;border-bottom:1px solid var(--line)}
:is(.page-results,.page-chapter) .rp-full-sec .ch-sec>.sh h2{flex:none;max-width:22ch;
  font:600 clamp(38px,3.9vw,54px)/1.04 var(--display);letter-spacing:-.028em;color:var(--ink)}
:is(.page-results,.page-chapter) .rp-full-sec .ch-sec>.sh .sh-num{align-self:center;display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--blue-wash);color:var(--blue-deep);font:800 13px/1 var(--body)}
:is(.page-results,.page-chapter) .rp-full-sec .ch-sec>.sh .sh-aside{margin-left:0;text-align:center}
/* the three life chapters open on their own painting instead of a number (app/domains-view.js), so only the weight and the ink
   follow — moving that heading to the middle would leave the picture beside an empty half-column. */
:is(.page-results,.page-chapter) .rp-full-sec .pr-chapter .ch-h{font-weight:600;color:var(--ink);letter-spacing:-.028em}
@media (max-width:820px){
  :is(.page-results,.page-chapter) .rp-full-sec .ch-sec>.sh{gap:12px;padding-top:18px;padding-bottom:20px;margin-bottom:28px}
  :is(.page-results,.page-chapter) .rp-full-sec .ch-sec>.sh h2{font-size:32px}
  /* the narrow-screen rule in 05-components.css pushes an aside left; here the whole head is centered */
  :is(.page-results,.page-chapter) .rp-full-sec .ch-sec>.sh .sh-aside{flex-basis:auto;text-align:center}
  :is(.page-results,.page-chapter) .rp-pull{padding:18px 20px}
  :is(.page-results,.page-chapter) .rp-pull p{font-size:21px;max-width:none}
}

/* ==========================================================================
   PRINT: the whole report, with everything open (Wayne, Sep 23, 2026: "for the pdf i'd say the cards would all open and the
   chapters would all open. i mean it may not print super nice, but at least it's available should someone wants it. probably
   like 120 pages or something, but yeah that will be there.")
   The rule that matters: NOTHING IS MISSING. A PDF that quietly drops the chapters somebody paid to unlock is worse than none,
   so every deck opens, every fold opens, every FAQ opens, and the parts that only work on screen come out.
   ========================================================================== */
@media print{
  /* chrome, controls and anything that only does something on screen */
  .site-header,.site-footer,.rp-hero-btns,.rg-rail-wrap,.rg-next,.rg-foot,.rp-toc-zone,.rp-locked-zone,
  .pr-nav,.report-nav,.rp-next-cards,.rp-takes-zone,.review-mark,.review-comments,.ph-img-tag,
  .flg-deck-nav,.flg-progress,.flg-pips,.flg-deck-count,.flg-mark,.flg-done,.as-legend,.rt-kept{display:none!important}
  /* every deck shows every card, and the decks stop being decks */
  .flg-card[hidden]{display:block!important}
  .flg-deck-cards{display:block!important}
  .flg-deck-cards[data-behind]::before,.flg-deck-cards[data-behind]::after{display:none!important}
  /* every fold prints open: the guide chapters, the research behind a panel, who the research studied, the page's questions */
  details{display:block!important}
  details>summary{list-style:none}
  details:not([open])>*:not(summary){display:revert!important}
  .compat-fold-body,.compat-ctx-body,.faq-a{display:block!important;height:auto!important;visibility:visible!important}
  /* the guide's ten chapters are one at a time on screen; app/report-guide.js prints them all (data-rg-print) */
  .rg-body{display:block!important}
  .rg-chapter+.rg-chapter{margin-top:26pt;padding-top:18pt;border-top:1px solid #C0C7D2}
  /* the page itself */
  @page{margin:16mm 14mm 18mm;size:A4}
  html,body{background:#fff!important}
  .zone{padding-block:0!important;background:#fff!important}
  .rp-full-sec.zone-white::before,.rp-full-sec.zone-white::after,.zone::before,.zone::after,
  .rp-full-sec .wrap::before,.rp-full-sec .wrap::after{display:none!important}
  .wrap{max-width:none!important;padding:0!important}
  /* keep the washes and the charts: they carry meaning, not decoration */
  *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
  /* break where a reader would */
  .ch-sec,.rg-chapter,.flg-card,.compat-ctx,.rp-type-card,.ch{break-inside:avoid-page}
  .rp-full-sec{break-before:page}
  h1,h2,h3,h4{break-after:avoid-page}
  img,figure,table{break-inside:avoid-page}
  a[href]{text-decoration:none;color:inherit}
  /* a hundred loose pages need to say what they are: fixed in print repeats on every sheet, which running()/element() do
     not, because no shipping browser implements Paged Media generated content */
  .rp-print-id{display:block!important;position:fixed;top:0;right:0;margin:0;font-size:7.5pt;letter-spacing:.04em;color:#515A6B}
  .rp-save-btn,.rp-save-note,.rp-save-said{display:none!important}
}
@media screen{ .rp-print-id{display:none} }

/* ---------------------------------------------------------------- the picture each section already chose
   Every report names one per section and has since the sections were written; fullZones() dropped it until Sep 23, 2026.
   Under the heading, ahead of the prose, at a letterbox crop so it paces the page without taking a screen. */
:is(.page-results,.page-chapter) .rp-sec-pic{margin:0 0 30px;width:100%}

/* ---------------------------------------------------------------- the control that saves it
   Wayne, Sep 24, 2026: "the save as pdf button should be towards the top with the preview page." Inline, it sits in the report's
   front matter under the title and above the contents, centered with the rest of that block. */
:is(.page-results,.page-chapter) .rp-save-wrap{padding-top:22px}
:is(.page-results,.page-chapter) .rp-save{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-bottom:26px}
:is(.page-results,.page-chapter) .rp-save.is-inline{justify-content:center;margin:26px 0 0;text-align:center}
:is(.page-results,.page-chapter) .rp-save-note{font-size:12.5px;line-height:1.5;color:var(--muted)}
/* The control makes the file itself now (app/report-pdf.js), which takes a second or two on a report this long, so it says so
   while it works and this line says so when the file has gone. Empty until then, and it takes no room until it has something to
   say, so the front matter does not shift under the reader as the press lands. */
:is(.page-results,.page-chapter) .rp-save-btn[disabled]{opacity:.65;cursor:progress}
:is(.page-results,.page-chapter) .rp-save-said{font-size:12.5px;line-height:1.5;color:var(--muted)}
:is(.page-results,.page-chapter) .rp-save-said:empty{display:none}
@media (max-width:820px){
  :is(.page-results,.page-chapter) .rp-save-btn{width:100%}
  :is(.page-results,.page-chapter) .rp-save.is-inline{gap:8px 0}
  :is(.page-results,.page-chapter) .rp-save-said{width:100%}
}


/* ===== 39-card-tactile.css ===== */
/* ==========================================================================
   39-card-tactile.css · owner: pages-site (the assessment cards) · Sep 26, 2026
   THE ASSESSMENT CARDS, ANSWERING THE READER (app/card-tactile.js). Wayne, Sep 26, 2026, on the home page's grid: "the current
   appearance of the assessments is fine. i think it's more like how it visually tactily engages the users". One behaviour on every
   card a reader chooses an assessment from: the home page's seven (.hm-test, 10-home.css), the catalog's (.ac-card,
   20-assessment.css) and "Other assessments" on every assessment page (.tp-rel, 21-take.css). Their look stays in those files.

   AT REST EVERY CARD IS THE CARD IT WAS, pixel for pixel (checked at 1440px and 390px). What this file adds at rest draws nothing:
   the stretched link's cover is empty, both shadow layers are fully transparent, nothing is transformed, and nothing is layered
   differently, until something happens to a card: the script puts a class on it for as long as that lasts (tc-tilt under the
   pointer, tc-press while it is held down, tc-play while its picture plays), or the browser's own :hover and :focus-visible apply.

   MOTION, as in 39-report-*.css: every keyframe starts and ends on the picture as it rests, only transform and opacity move, and
   nothing moves for a reader who asked for less motion (the script arms nothing, and every rule that moves anything is inside the
   query that asks for motion). A press still shows for them, as a ring and a closer shadow.
   ========================================================================== */

/* ---------------------------------------------------------------- the whole card is the link (with or without the script)
   The card's own link is stretched over the card: its words stay its name, and no link sits inside another. Anything else in a
   card that can be pressed (the catalog's Continue and Change an answer, the button on "Other assessments") stands above the
   cover, so it is still itself.
   AT REST THE CARD IS DRAWN EXACTLY AS IT WAS, so at rest this adds only what the link needs: the card is positioned, to hold the
   cover, and nothing gets a stacking order of its own. The page's order does the layering: the cover comes after the picture, so it
   lies over it, and the card's other buttons come after the cover, so positioned, they lie over it in turn. One exception: the
   catalog's paintings sit flush with their card's edge, where the next card's long shadow reaches, so they keep their place above
   every shadow (as they had when they were the only positioned things in the grid) with z-index 1, and let the pointer through to
   the cover. (Measured: a z-index on anything else, the cover, a button or a spot illustration's frame, changes how its edges are
   drawn, by a few levels in a pixel.) A card something is happening to (the pointer, the keyboard, a press) stands above its
   neighbours, its shadows with it. */
.page-home .hm-test,.page-assessments .ac-card,.page-take .tp-rel{position:relative}
.page-home .hm-test-go,.page-assessments .ac-name a,.page-take .tp-rel-name a{-webkit-tap-highlight-color:transparent}
.page-home .hm-test-go::after,.page-assessments .ac-name a::after,.page-take .tp-rel-name a::after{content:"";position:absolute;inset:0}
/* over the card's hairline too, to the card's own corners */
.page-home .hm-test-go::after{inset:-1px;border-radius:var(--r)}
.page-assessments .ac-name a::after{border-radius:20px}
.page-take .tp-rel-name a::after{inset:-1px;border-radius:18px}
.page-assessments .ac-live :is(a,button),.page-take .tp-rel-btn{position:relative}
.page-assessments .ac-art .ph-img{z-index:1;pointer-events:none}
/* review mode's Placeholder tag lies over a picture: the pointer goes through it to the card */
.page-home .hm-test .ph-img-tag,.page-take .tp-rel .ph-img-tag{pointer-events:none}
.page-home .hm-test:is(.tc-tilt,.tc-press),.page-assessments .ac-card:is(.tc-tilt,.tc-press),.page-take .tp-rel:is(.tc-tilt,.tc-press){z-index:4}
@media (hover:hover){
  .page-home .hm-test:hover,.page-assessments .ac-card:hover,.page-take .tp-rel:hover{z-index:4}
}

/* the keyboard's ring goes round the whole card, since the whole card is what the link opens */
@supports selector(:has(a)){
  .page-home .hm-test:has(.hm-test-go:focus-visible),.page-assessments .ac-card:has(.ac-name a:focus-visible),
  .page-take .tp-rel:has(.tp-rel-name a:focus-visible){z-index:4;outline:2px solid var(--blue-mark);outline-offset:3px}
  .page-home .hm-test-go:focus-visible,.page-assessments .ac-name a:focus-visible,.page-take .tp-rel-name a:focus-visible{outline:none}
}

/* THE CLIP. At rest the catalog's and "Other assessments" cards clip their paintings, as they always have (20-assessment.css,
   21-take.css). While something is happening to a card, the painting's own frame clips it instead, to the same curve, so the card's
   shadows can show outside it; the clip goes back once the card has eased back (--tc-back, below). */
.page-assessments .ac-card:is(.tc-tilt,.tc-press),.page-take .tp-rel:is(.tc-tilt,.tc-press){overflow:visible;--tc-back:0s}
@media (hover:hover){
  .page-assessments .ac-card:hover,.page-take .tp-rel:hover{overflow:visible;--tc-back:0s}
}
@supports selector(:has(a)){
  .page-assessments .ac-card:has(.ac-name a:focus-visible),.page-take .tp-rel:has(.tp-rel-name a:focus-visible){overflow:visible;--tc-back:0s}
}
.page-assessments .ac-card:is(.tc-tilt,.tc-press) .ac-art .ph-img{border-radius:20px 20px 0 0}
.page-take .tp-rel:is(.tc-tilt,.tc-press) .tp-rel-pic{border-radius:17px 17px 0 0}
@media (hover:hover){
  .page-assessments .ac-card:hover .ac-art .ph-img{border-radius:20px 20px 0 0}
  .page-take .tp-rel:hover .tp-rel-pic{border-radius:17px 17px 0 0}
}
@supports selector(:has(a)){
  .page-assessments .ac-card:has(.ac-name a:focus-visible) .ac-art .ph-img{border-radius:20px 20px 0 0}
  .page-take .tp-rel:has(.tp-rel-name a:focus-visible) .tp-rel-pic{border-radius:17px 17px 0 0}
}
/* the lead card on a wide screen has its painting down its left side */
@media (min-width:821px){
  .page-assessments .ac-card.is-lead.has-art:is(.tc-tilt,.tc-press) .ac-art .ph-img{border-radius:20px 0 0 20px}
}
@media (min-width:821px) and (hover:hover){
  .page-assessments .ac-card.is-lead.has-art:hover .ac-art .ph-img{border-radius:20px 0 0 20px}
}
@supports selector(:has(a)){
  @media (min-width:821px){
    .page-assessments .ac-card.is-lead.has-art:has(.ac-name a:focus-visible) .ac-art .ph-img{border-radius:20px 0 0 20px}
  }
}

/* ---------------------------------------------------------------- the two shadows: lifted, and pressed
   Two layers round each card, invisible at rest. The lift is a longer, softer shadow, for a card under the pointer or the
   keyboard; the press is close and tight, the card nearly flat on the page. Only their opacity ever changes. Each is a shadow and
   nothing else (no fill), so it never covers the card it belongs to. */
.page-home .hm-test,.page-assessments .ac-card{--tc-lift:0 2px 4px rgba(13,20,32,.04),0 28px 50px -22px rgba(120,80,20,.34)}
.page-take .tp-rel{--tc-lift:0 2px 4px rgba(13,20,32,.04),0 26px 46px -22px rgba(13,20,32,.24)}
.page-home .hm-test::before,.page-assessments .ac-card::before,.page-take .tp-rel::before,
.page-home .hm-test::after,.page-assessments .ac-card::after,.page-take .tp-rel::after{content:"";position:absolute;inset:0;
  border-radius:inherit;pointer-events:none;opacity:0}
.page-home .hm-test::before,.page-take .tp-rel::before,.page-home .hm-test::after,.page-take .tp-rel::after{inset:-1px}
.page-home .hm-test::before,.page-assessments .ac-card::before,.page-take .tp-rel::before{box-shadow:var(--tc-lift);
  transition:opacity .35s cubic-bezier(.2,.8,.2,1)}
.page-home .hm-test::after,.page-assessments .ac-card::after,.page-take .tp-rel::after{
  box-shadow:0 1px 2px rgba(13,20,32,.12),0 4px 10px -5px rgba(13,20,32,.3);transition:opacity .45s cubic-bezier(.2,.8,.2,1)}
@media (hover:hover){
  .page-home .hm-test:hover::before,.page-assessments .ac-card:hover::before,.page-take .tp-rel:hover::before{opacity:1}
}
@supports selector(:has(a)){
  .page-home .hm-test:has(.hm-test-go:focus-visible)::before,.page-assessments .ac-card:has(.ac-name a:focus-visible)::before,
  .page-take .tp-rel:has(.tp-rel-name a:focus-visible)::before{opacity:1}
}
.page-home .hm-test.tc-press::before,.page-assessments .ac-card.tc-press::before,.page-take .tp-rel.tc-press::before{opacity:0;transition-duration:.08s}
.page-home .hm-test.tc-press::after,.page-assessments .ac-card.tc-press::after,.page-take .tp-rel.tc-press::after{opacity:1;transition-duration:.08s}
/* the compass needle's copy (app/card-tactile.js) is never drawn at rest */
.page-home .hm-test-icon img.tc-needle{visibility:hidden;pointer-events:none}

/* ---------------------------------------------------------------- with reduced motion: the press as a ring, nothing moving */
@media (prefers-reduced-motion:reduce){
  .page-home .hm-test.tc-press::after,.page-assessments .ac-card.tc-press::after,.page-take .tp-rel.tc-press::after{
    box-shadow:0 0 0 2px rgba(34,136,224,.6),0 1px 2px rgba(13,20,32,.12)}
}

/* ---------------------------------------------------------------- motion (app/card-tactile.js), only for a reader who has not asked for less */
@media (prefers-reduced-motion:no-preference){
  /* THE CARD. Under the pointer it leans toward it: --tc-x and --tc-y run from -1 to 1 across the card, so the edge nearest the
     pointer comes up by at most 3 degrees. Held down, it sinks; let go, it springs back a hair past where it rests, then settles.
     Its transform is none again once it has eased back. */
  .page-home .hm-test,.page-assessments .ac-card,.page-take .tp-rel{
    transition:transform .6s cubic-bezier(.2,.8,.2,1),scale .55s cubic-bezier(.3,1.7,.55,1),overflow 0s linear var(--tc-back,.6s);
    transition-behavior:allow-discrete}
  .page-home .hm-test.tc-tilt,.page-assessments .ac-card.tc-tilt,.page-take .tp-rel.tc-tilt{
    transform:perspective(var(--tc-p,900px)) rotateX(calc(var(--tc-y,0) * 3deg)) rotateY(calc(var(--tc-x,0) * -3deg));
    transition:transform .2s cubic-bezier(.2,.8,.2,1),scale .55s cubic-bezier(.3,1.7,.55,1),overflow 0s linear var(--tc-back,.6s);
    transition-behavior:allow-discrete}
  .page-home .hm-test.tc-press,.page-assessments .ac-card.tc-press,.page-take .tp-rel.tc-press{scale:.975;
    transition:transform .2s cubic-bezier(.2,.8,.2,1),scale .09s cubic-bezier(.2,.8,.2,1),overflow 0s linear var(--tc-back,.6s);
    transition-behavior:allow-discrete}
  /* the painting's frame keeps its own clip until the card has eased back and clips it again */
  .page-assessments .ac-art .ph-img,.page-take .tp-rel-pic{transition:border-radius 0s linear var(--tc-back,.6s)}
  /* while a card is held down its cover reaches past it, so a finger let go at the very edge of a sunken card still opens it */
  .page-home .hm-test.tc-press .hm-test-go::after,.page-assessments .ac-card.tc-press .ac-name a::after,
  .page-take .tp-rel.tc-press .tp-rel-name a::after{inset:-10px}

  /* THE PICTURE, a few pixels further than the card: a spot illustration floats a little above it, a painting slides in its frame
     (it is drawn a tenth larger than its frame, 20-assessment.css, so its edge never shows) */
  .page-home .hm-test-icon,.page-assessments .ac-art .is-painting img,.page-take .tp-rel-pic.is-painting img{
    transition:translate .6s cubic-bezier(.2,.8,.2,1)}
  .page-home .hm-test.tc-tilt .hm-test-icon{translate:calc(var(--tc-x,0) * 4px) calc(var(--tc-y,0) * 4px);transition-duration:.2s}
  .page-assessments .ac-card.tc-tilt .ac-art .is-painting img,.page-take .tp-rel.tc-tilt .tp-rel-pic.is-painting img{
    translate:calc(var(--tc-x,0) * 7px) calc(var(--tc-y,0) * 7px);transition-duration:.2s}

  /* THE ARROW of "Take the assessment" slides on. With it moving, the words need no underline as well. */
  .page-home .hm-test-arrow{display:inline-block;transition:translate .35s cubic-bezier(.2,.8,.2,1)}
  @media (hover:hover){
    .page-home .hm-test:hover .hm-test-arrow{translate:4px 0}
    .page-home .hm-test-go:hover{text-decoration:none}
  }
  @supports selector(:has(a)){
    .page-home .hm-test:has(.hm-test-go:focus-visible) .hm-test-arrow{translate:4px 0}
  }

  /* THE GESTURES (the mockup's "Arrive", Sep 26, 2026): each spot illustration's own small move, once, from rest back to rest. The
     frame is filled with the picture's own paper while it plays, so a picture that tilts shows paper at its corners, never a white
     wedge; at rest the picture covers its frame and the frame is white again. */
  .page-home .tc-play .hm-test-icon{background:var(--tc-paper,#fff)}
  .page-home .tc-play .hm-test-icon img{animation:var(--tc-g,none) var(--tc-t,1.2s) cubic-bezier(.45,0,.4,1) both;
    transform-origin:var(--tc-o,50% 50%)}
  .page-home [data-gesture=personality]{--tc-g:tc-g-mirror;--tc-t:1.3s;--tc-o:54% 88%;--tc-paper:#F8F8F8}
  .page-home [data-gesture=facets]{--tc-g:tc-g-sweep;--tc-t:1.45s;--tc-o:45% 45%;--tc-paper:#F7F8F3}
  .page-home [data-gesture=sixfactor]{--tc-g:tc-g-balance;--tc-t:1.55s;--tc-o:50% 43%;--tc-paper:#F9FAF3}
  .page-home [data-gesture=career]{--tc-g:none;--tc-paper:#FCFDF5}
  .page-home [data-gesture=workstyle]{--tc-g:tc-g-shuffle;--tc-t:1.15s;--tc-o:54% 52%;--tc-paper:#F7F8F3}
  .page-home [data-gesture=pillars]{--tc-g:tc-g-raise;--tc-t:1.15s;--tc-o:50% 69%;--tc-paper:#FCFCF7}
  .page-home [data-gesture=selfesteem]{--tc-g:tc-g-flicker;--tc-t:1.3s;--tc-o:50% 46%;--tc-paper:#F9FAF5}
  /* the compass: a copy of the picture cut to the dial turns about the needle's pivot. A circle turned about its own centre covers
     the same circle, so only the needle and its rose move; the rest of the picture stays still. */
  .page-home .hm-test-icon img.tc-needle{clip-path:circle(8.8% at 48.73% 48.44%)}
  .page-home .tc-play .hm-test-icon img.tc-needle{visibility:visible;transform-origin:48.73% 48.44%;
    animation:tc-g-needle 1.8s cubic-bezier(.45,0,.4,1) both}
  /* a painting has no gesture of its own: it drifts in its frame and back, the parallax a pointer gives it, played once */
  .page-assessments .tc-play .ac-art .is-painting img,.page-take .tc-play .tp-rel-pic.is-painting img{
    animation:tc-g-drift 1.7s cubic-bezier(.45,0,.4,1) both}

  @keyframes tc-g-mirror{0%{rotate:0deg}28%{rotate:-6deg}58%{rotate:3.5deg}82%{rotate:-1.2deg}100%{rotate:0deg}}
  @keyframes tc-g-sweep{0%{translate:0 0;rotate:0deg}32%{translate:-7% 3%;rotate:-5deg}66%{translate:5% -2%;rotate:3deg}100%{translate:0 0;rotate:0deg}}
  @keyframes tc-g-balance{0%{rotate:0deg}20%{rotate:-8deg}45%{rotate:5deg}68%{rotate:-2.5deg}86%{rotate:.8deg}100%{rotate:0deg}}
  @keyframes tc-g-needle{0%{rotate:0deg}16%{rotate:-55deg}38%{rotate:34deg}58%{rotate:-16deg}77%{rotate:6deg}100%{rotate:0deg}}
  @keyframes tc-g-shuffle{0%{scale:1;rotate:0deg}32%{scale:1.075;rotate:-2.5deg}64%{scale:1.02;rotate:.8deg}100%{scale:1;rotate:0deg}}
  @keyframes tc-g-raise{0%{scale:1 1}26%{scale:1 .9}60%{scale:1 1.04}100%{scale:1 1}}
  @keyframes tc-g-flicker{0%{scale:1}18%{scale:1.06}36%{scale:.985}54%{scale:1.035}74%{scale:.995}100%{scale:1}}
  @keyframes tc-g-drift{0%{translate:0 0}45%{translate:-3% -2%}100%{translate:0 0}}
}


/* ===== 39-estimated.css ===== */
/* The "estimated" treatment (D120, Sep 25, 2026), app/estimated.js: a reference average drawn as a mark on the reader's own bar,
   its number on a quiet line under the bar, and a footnote at the foot of the card. The reader's bar stays the loudest thing on the
   row: the mark is a hairline and a thin outline, in ink and muted grey, never a second fill. Scoped like the bars it marks
   (30-results.css .pr-bar). */
:is(.page-results,.page-chapter) .pr-bar.has-ref{row-gap:3px;padding:6px 0 7px}
:is(.page-results,.page-chapter) .pr-bar-t.est-track{position:relative;overflow:visible}
/* the usual range: an outlined stretch a little taller than the track, so it reads over a blue fill and over empty track alike */
:is(.page-results,.page-chapter) .est-range{position:absolute;top:-3px;bottom:-3px;border:1px solid var(--ref-deep);border-radius:3px;pointer-events:none}
/* the average: one ink hairline through the track, standing just proud of the range */
:is(.page-results,.page-chapter) .est-tick{position:absolute;top:-5px;bottom:-5px;width:2px;margin-left:-1px;background:var(--ink);border-radius:1px;pointer-events:none}
/* the number, under the bar it belongs to, in the bar's column so it lines up with the track rather than the label */
:is(.page-results,.page-chapter) .est-line{grid-column:2 / -1;font:500 11.5px/1.35 var(--body);letter-spacing:0;text-transform:none;color:var(--muted)}
:is(.page-results,.page-chapter) .pr-bar.is-on .est-line{font-weight:500;color:var(--muted)}
/* the footnote: the card's small print, under the card's own note */
:is(.page-results,.page-chapter) .est-note{margin-top:10px;max-width:62ch;font:400 12px/1.55 var(--body);color:var(--muted)}


/* ===== 39-report-editorial.css ===== */
/* ==========================================================================
   39-report-editorial.css · owner: the report's design layer
   (app/report-page.js, app/chapter-personality.js, app/domains-view.js, app/report-guide.js).

   WHY (Wayne, Sep 24, 2026, picking proposal C out of docs/mockups/magazine/): "and no i'd say do c. i like how it looks. and
   for that the distribution chart area should be at the top, not the bottom of the page."

   WHAT THE MOCKUP MEASURED about the report this replaces, in a browser at 1440px on /sample/, not estimated: 74 distinct type
   styles, three section-title sizes within four pixels of each other (54 / 52 / 50), six left edges and thirteen body measures
   inside one 1,180px band, and twelve sections of which ten stood between 1,409 and 1,899px. Every one of those came from a
   good decision taken locally. This file is the ones taken globally.

   THE SCALE. Six sizes inside a trait section and no more, each with exactly one job:
     --rt-name   the trait's name, once, on the opening band
     --rt-fig    the reader's own percentile, beside it
     --rt-stand  the headline the reading opens on
     --rt-read   the reading
     --rt-ang    one of the six angles
     --rt-lab    every kicker, label and caption
   THE SPINE. Every block starts on the wrap's own edge. Nothing is centred on its own width — that is what produced thirteen
   measures, because each paragraph was being centred at 72ch and its left edge moved with its own length.
   THE COLOUR. Blue is the reader's own number, amber is a cost, and nothing else is tinted. The six angles are a ruled list and
   only the two that name a cost carry a mark.
   THE BANDS. A trait is four grounds, and each one says what it holds: blue opens on the reader's position, white is the
   reading, grey is how the number was worked out, warm is the question it ends on. app/report-page.js fullZones() renders them
   from the `bands` a section declares; a section that declares none is unchanged, which is all six other reports.
   ========================================================================== */

:is(.page-results,.page-chapter) :is(.rp-full-sec,.rp-excerpt){
  --rt-name:clamp(38px,5vw,60px);
  --rt-fig:clamp(34px,3.8vw,52px);
  --rt-stand:clamp(24px,2.5vw,32px);
  --rt-read:17px;
  --rt-ang:15px;
  --rt-lab:12px;
}

/* ---------------------------------------------------------------- the four bands
   The zone's own padding is per part, because a band that opens a section and a band that holds one question are not the same
   object. .rp-full-sec.rp-part-* beats the 64px every full-report section takes in 34-report-pages.css. */
:is(.page-results,.page-chapter) .rp-full-sec.rp-part-open{padding-block:56px 46px}
:is(.page-results,.page-chapter) .rp-full-sec.rp-part-open:has(.rt-plate){padding-top:0}
:is(.page-results,.page-chapter) .rp-full-sec.rp-part-read{padding-block:54px 60px}
:is(.page-results,.page-chapter) .rp-full-sec.rp-part-close{padding-block:88px 94px}

/* The quiet decorative rings and discs stay on the sections that are still one band. A trait now opens on a change of ground and
   a name set at 60px, which is the pacing they were standing in for, and nth-of-type counting cannot survive four bands. */
:is(.page-results,.page-chapter) .rp-part::before,
:is(.page-results,.page-chapter) .rp-part::after{display:none}

/* ---------------------------------------------------------------- open: the whole score, as one panel (D114)
   Wayne, on the first version: "i mean all the elements around the distribution curve, not just the curve itself. now we have
   this awkward looking thing... what i had imagined is a thing where the user can quickly glance at the charts and icons and
   stuff to see where they're at, right at the beginning of each trait." And: "right now the graph looks very flat and stupid.
   it doesn't look like a normal distribution curve (probably because there's not enough height for it)."

   So the score is one white sheet on the blue ground rather than a row of widgets, and the curve is given the height a bell
   needs. The shared plot is 64px tall over about 700px of width, which is eleven to one and reads as a smear whatever the
   numbers are; here it is 168px over the same width, the columns are a pixel apart so they close into an area, and the reader's
   own place is a rule down the whole plot rather than one blue column among forty-one.
   The plate runs the width of the screen; body has overflow-x:clip (00-base.css), so the scrollbar cannot turn that into a
   sideways scroll. It is the one full-bleed object in the report.
   The frame is 3:1 at every width (ownArt's inline ratio) and the painting is drawn at the full width from its top, so the five
   trait paintings (docs/art-briefs/traits-gouache/spec.json) are wide and composed from the top down. No drop shadow: .rp-pic gives
   every report picture one, and under something that runs off both edges of the screen it read as a grey smear along the band. */
:is(.page-results,.page-chapter) .rt-plate{width:100vw;max-width:none;margin:0 0 36px;margin-inline:calc(50% - 50vw);border-radius:0;aspect-ratio:auto;box-shadow:none}
:is(.page-results,.page-chapter) .rt-plate img{display:block;width:100%;height:auto}

:is(.page-results,.page-chapter) .rt-kicker{font:800 var(--rt-lab)/1.4 var(--body);letter-spacing:.13em;text-transform:uppercase;color:var(--blue-ink)}
:is(.page-results,.page-chapter) .rt-name{margin-top:14px;font:300 var(--rt-name)/1 var(--display);letter-spacing:-.032em;color:var(--ink);max-width:18ch}

/* THE SHEET ITSELF (.rt-score and everything inside it) moved to 39-score-panel.css on Sep 24, 2026 (docs/REPORT_GAP.md R8), with
   app/score-panel.js, so the other reports can draw it. The rules moved unchanged and in the same order. */

/* ---------------------------------------------------------------- read: the reading and the six angles */
/* One measure for the reading, declared once by the band. Nothing inside it is centred on its own width. */
:is(.page-results,.page-chapter) :is(.rp-part-read,.rp-excerpt) .rt-entry{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:0 56px;align-items:start}
:is(.page-results,.page-chapter) :is(.rp-part-read,.rp-excerpt) .rt-entry.is-solo{grid-template-columns:minmax(0,1fr);max-width:66ch}
:is(.page-results,.page-chapter) .rt-stand{font:300 var(--rt-stand)/1.18 var(--display);letter-spacing:-.022em;color:var(--ink);max-width:16ch}
:is(.page-results,.page-chapter) :is(.rp-part-read,.rp-excerpt) .rt-lede{font-size:var(--rt-read);line-height:1.66;max-width:none;margin:0;padding-top:6px}
:is(.page-results,.page-chapter) :is(.rp-part-read,.rp-excerpt) .rt-entry.is-solo .rt-lede{padding-top:14px}

:is(.page-results,.page-chapter) :is(.rp-part,.rp-excerpt) .rt-angles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;margin-top:38px;border-top:1px solid var(--ink)}
:is(.page-results,.page-chapter) :is(.rp-part,.rp-excerpt) .rt-angles .ch-facet{position:relative;background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;box-shadow:none;padding:20px 0 24px}
:is(.page-results,.page-chapter) :is(.rp-part,.rp-excerpt) .rt-angles .ch-facet.is-amber{padding-left:18px}
:is(.page-results,.page-chapter) :is(.rp-part,.rp-excerpt) .rt-angles .ch-facet.is-amber::before{content:"";position:absolute;left:0;top:20px;bottom:24px;width:2px;background:var(--amber)}
:is(.page-results,.page-chapter) :is(.rp-part,.rp-excerpt) .rt-angles .ch-facet .box-title{font:800 var(--rt-lab)/1.4 var(--body);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
:is(.page-results,.page-chapter) :is(.rp-part,.rp-excerpt) .rt-angles .ch-facet.is-amber .box-title{color:var(--amber-text)}
:is(.page-results,.page-chapter) :is(.rp-part,.rp-excerpt) .rt-angles .ch-facet .small{font-size:var(--rt-ang);line-height:1.56;margin-top:9px;max-width:none}
:is(.page-results,.page-chapter) :is(.rp-part,.rp-excerpt) .rt-angles .ch-facet .fold-head{margin-top:10px}


/* ---------------------------------------------------------------- close: one question, and nothing else on the band */
:is(.page-results,.page-chapter) .rt-close{text-align:center}
:is(.page-results,.page-chapter) .rt-q-lab{font:800 var(--rt-lab)/1.4 var(--body);letter-spacing:.11em;text-transform:uppercase;color:var(--amber-text)}
:is(.page-results,.page-chapter) .rt-q{margin:16px auto 0;max-width:24ch;font:300 clamp(26px,3.4vw,38px)/1.28 var(--display);letter-spacing:-.022em;color:var(--ink)}
:is(.page-results,.page-chapter) .rt-next{margin-top:28px;font:700 var(--rt-lab)/1.4 var(--body);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}

/* ---------------------------------------------------------------- a trait given away whole, as the free section
   A locked report gives one section away on a white sheet of its own (app/report-page.js freeSectionZone, .rp-excerpt), and for
   this report that section is a trait. The sheet is not a .rp-full-sec and its three bands are not zones, so until Sep 24, 2026
   the trait inside it lost every --rt-* size above: the trait's name, its percentile, the headline and the question's label all
   fell back to body type, and the six angles to stacked tinted boxes with an ink rule over each. The tokens and the band rules
   above now name .rp-excerpt too. What the sheet cannot borrow is the change of ground between bands, so the reading and the
   question take room instead. No hairline over the question here, unlike the Career report's free section (41-career.css
   .ci-close): the angles above it already end on one rule per column, and a second rule 44px under them read as a stutter. */
/* The plate stays inside the sheet here. Full-bleed, it ran out to the screen's edges across a 900px sheet and left the sheet's own
   top showing above the painting as a white tab. Same values as the Character Profile's free factor (36-sixfactor.css .sf-plate),
   so this rule changes nothing there if it reaches that plate too. */
:is(.page-results,.page-chapter) .rp-excerpt .rt-plate{width:100%;margin:0 0 30px;margin-inline:0;border-radius:var(--r)}
:is(.page-results,.page-chapter) .rp-excerpt .rt-read{margin-top:48px}
:is(.page-results,.page-chapter) .rp-excerpt .rt-close{margin-top:64px}

/* ---------------------------------------------------------------- 390px
   The columns fall to one in the order a reader wants them: the name, then where they landed, then the chart. */
@media (max-width:860px){
  :is(.page-results,.page-chapter) :is(.rp-part-read,.rp-excerpt) .rt-entry{grid-template-columns:minmax(0,1fr);gap:24px 0}
  :is(.page-results,.page-chapter) :is(.rp-part,.rp-excerpt) .rt-angles{grid-template-columns:minmax(0,1fr);gap:0}
  :is(.page-results,.page-chapter) :is(.rp-part-read,.rp-excerpt) .rt-lede{padding-top:0}
  :is(.page-results,.page-chapter) .rt-stand{max-width:none}
}
@media (max-width:720px){
  :is(.page-results,.page-chapter) .rp-full-sec.rp-part-open{padding-block:40px 34px}
  :is(.page-results,.page-chapter) .rp-full-sec.rp-part-read{padding-block:38px 42px}
  :is(.page-results,.page-chapter) .rp-full-sec.rp-part-close{padding-block:60px 64px}
  :is(.page-results,.page-chapter) .rt-plate{margin-bottom:26px}
  :is(.page-results,.page-chapter) .rt-name{max-width:none}
}

/* ---------------------------------------------------------------- preferences */
@media (prefers-contrast:more){
  :is(.page-results,.page-chapter) :is(.rp-part,.rp-excerpt) .rt-angles .ch-facet{border-bottom-color:var(--ink)}
}

/* ---------------------------------------------------------------- print
   A trait is one article, so it starts a page and then stays together. Only the band that opens it breaks; the other three
   follow it, which is what 38-report-marks.css already asks of every section that is one band. */
@media print{
  .rp-full-sec.rp-part{break-before:auto}
  .rp-full-sec.rp-part-open{break-before:page}
  .rp-full-sec.rp-part{padding-block:0!important}
  .rp-part-read .rt-angles{border-top-color:#0D1420}
  .rt-plate{width:auto!important;margin-inline:0!important}
  .rt-close{break-inside:avoid-page}
}

/* ==========================================================================
   ONE SECTION TITLE FOR THE WHOLE REPORT (D112)
   The mockup measured three of them, all doing the same job and all within four pixels of each other: 54px/600 on a numbered
   section's own head, 52px/600 on a life chapter, and the trait sections' own. Nobody can tell 54 from 52, so the difference
   was not carrying information — it was three people solving the same problem on three different days.

   They are now one: the masthead a trait opens on. Left on the spine, --rt-name, the display face at the weight D88 actually
   asks for, with the section's folio above it and a hairline under it.

   THIS REVERSES a rule written on Sep 24 (38-report-marks.css), which set a section title centred, at 600, in black, because
   Wayne asked twice for titles that "clearly stand out when people are just scrolling through the page". The requirement still
   holds and is better met: what a reader now meets at a section break is a change of ground and a name at up to 60px, which is
   larger than the 54 it replaces. Wayne chose this arrangement by looking at it in docs/mockups/magazine/.
   ========================================================================== */
:is(.page-results,.page-chapter) .rp-full-sec .ch-sec>.sh{display:grid;justify-items:start;text-align:left;gap:6px;
  border-top:0;border-bottom:1px solid var(--line);padding:0 0 20px;margin-bottom:34px}
:is(.page-results,.page-chapter) .rp-full-sec .ch-sec>.sh h2{order:2;max-width:18ch;
  font:300 var(--rt-name)/1 var(--display);letter-spacing:-.032em;color:var(--ink)}
:is(.page-results,.page-chapter) .rp-full-sec .ch-sec>.sh .sh-num{order:1;align-self:start;justify-self:start;
  width:auto;height:auto;padding:0;background:none;border-radius:0;color:var(--blue-ink);
  font:800 var(--rt-lab)/1.4 var(--body);letter-spacing:.13em;text-transform:uppercase}
:is(.page-results,.page-chapter) .rp-full-sec .ch-sec>.sh .sh-aside{order:3;margin-left:0;text-align:left;
  font:700 var(--rt-lab)/1.4 var(--body);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
/* the three life chapters keep their own head, which stands beside their painting, and take the same size and weight */
:is(.page-results,.page-chapter) .rp-full-sec .pr-chapter .ch-h{font:300 var(--rt-name)/1 var(--display);letter-spacing:-.032em;color:var(--ink)}
@media (max-width:820px){
  :is(.page-results,.page-chapter) .rp-full-sec .ch-sec>.sh{margin-bottom:26px;padding-bottom:16px}
  :is(.page-results,.page-chapter) .rp-full-sec .ch-sec>.sh h2,
  :is(.page-results,.page-chapter) .rp-full-sec .pr-chapter .ch-h{max-width:none}
}

/* ==========================================================================
   THE CONTENTS, IN PARTS (D113)
   Twelve rows of equal weight, one of them 16,812 words and its neighbours 400. The type guide is about seventy percent of the
   report and read as row 10 of 12; the list was flat and the report is not. A part's name stands above the first row of its run,
   inside that row's own list item, so the list is still one <ol> and every row keeps its number and its two figures.
   ========================================================================== */
:is(.page-chapter,.page-results,.page-unlock) .rp-toc .rp-toc-part{
  margin:0 0 6px;padding-top:20px;font:800 11px/1.4 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--blue-ink)}
:is(.page-chapter,.page-results,.page-unlock) .rp-toc .rp-toc-row:has(.rp-toc-part){border-top:1px solid var(--line)}
:is(.page-chapter,.page-results,.page-unlock) .rp-toc .rp-toc-row:first-child{border-top:0}
:is(.page-chapter,.page-results,.page-unlock) .rp-toc .rp-toc-row:first-child .rp-toc-part{padding-top:0}
@media (prefers-contrast:more){
  :is(.page-chapter,.page-results,.page-unlock) .rp-toc .rp-toc-row:has(.rp-toc-part){border-top-color:var(--ink)}
}

/* ==========================================================================
   THE LONG TAIL (D112)
   With the section titles down to one, what is left inside a report section is a run of sizes that were each chosen on their own
   day and land within a pixel or two of each other: a type card's name at 34 and a guide chapter's at 30; a type card's own line
   at 21, a guide's opening at 20, a life chapter's lede at 19.5 and its lens line at 19; a contents row at 18.7 and a letter's
   name at 18. Nobody can see 19.5 against 19. They are two sizes, not eight.
   Only the pieces this track owns are touched here: the type card (app/report-page.js), the guide (app/report-guide.js) and the
   life chapters (app/domains-view.js).
   ========================================================================== */
:is(.page-results,.page-chapter) .rp-full-sec{ --rt-sub:30px; --rt-lede:20px; --rt-row:18px; }
:is(.page-results,.page-chapter) .rp-full-sec :is(.rp-tc-name,.rg-ch-title){font-size:var(--rt-sub);line-height:1.1}
:is(.page-results,.page-chapter) .rp-full-sec :is(.rp-tc-line,.rg-intro,.ch-lede,.ch-lens-line){font-size:var(--rt-lede)}
:is(.page-results,.page-chapter) .rp-full-sec :is(.pr-lc-name,.rp-toc-t){font-size:var(--rt-row)}
@media (max-width:720px){
  :is(.page-results,.page-chapter) .rp-full-sec{ --rt-sub:25px; --rt-lede:18px; --rt-row:17px; }
}


/* ===== 39-report-intro.css ===== */
/* ==========================================================================
   39-report-intro.css · owner: the report's design layer (app/report-intro.js)

   "ABOUT THIS REPORT" (D129, Wayne, Sep 25, 2026): "for someone who didn't know, they just see intj, they'd be like wtf is
   this... should be the first part of the report". Every report opens on it, directly under its title.

   ONE SHAPE FOR ALL SEVEN, set in the flagship's magazine grammar (39-report-editorial.css) so it reads as the report's own
   opening spread rather than a form: the small blue kicker, a light serif heading, one muted line; beside them a ruled list of
   four numbered points; under both, one white sheet holding the report's classification as a picture (the score panel's own
   sheet, 39-score-panel.css .rt-score); and a closing strip on how to read the numbers, with its detail folded.
   THE GROUND is grey, the report's code for reference (D112) and the one ground that differs from both neighbours in all seven
   reports: the white hero above and the blue band of the reader's own scores below.
   THE COLOUR: blue is the reader's own result (their four letters, their code, their leading style, their score). Nothing else on
   the figure is tinted, so a reader finds themselves on it at a glance.
   ========================================================================== */

:is(.page-chapter,.page-results) .rp-intro{padding-block:64px 66px}
:is(.page-chapter,.page-results) .rp-intro .ri{--ri-lab:12px}

/* ---------------------------------------------------------------- the top: the mast, and the four points beside it */
:is(.page-chapter,.page-results) .ri-top{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:28px 64px;align-items:start}
:is(.page-chapter,.page-results) .ri-kicker{font:800 var(--ri-lab)/1.4 var(--body);letter-spacing:.13em;text-transform:uppercase;color:var(--blue-ink)}
:is(.page-chapter,.page-results) .ri-h{margin-top:14px;max-width:21ch;font:300 clamp(32px,3.6vw,46px)/1.1 var(--display);letter-spacing:-.026em;color:var(--ink);text-wrap:balance}
:is(.page-chapter,.page-results) .ri-line{margin-top:16px;max-width:44ch;font:400 17.5px/1.55 var(--body);color:var(--muted)}

/* every small label in the part: the flagship's kicker weight, muted, so the blue kicker stays the one that names the part */
:is(.page-chapter,.page-results) .ri-lab{font:800 var(--ri-lab)/1.4 var(--body);letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}

/* the four points: a ruled list under an ink rule, as the flagship's angles are, each one led by its number set in the serif */
:is(.page-chapter,.page-results) .ri-tells{padding-top:16px;border-top:1px solid var(--ink)}
:is(.page-chapter,.page-results) .ri-list{margin-top:8px}
:is(.page-chapter,.page-results) .ri-item{display:grid;grid-template-columns:40px minmax(0,1fr);align-items:baseline;gap:0 10px;padding:12px 0;border-bottom:1px solid var(--line)}
:is(.page-chapter,.page-results) .ri-item:last-child{border-bottom:0}
:is(.page-chapter,.page-results) .ri-n{font:300 22px/1 var(--display);color:var(--blue-deep);font-variant-numeric:tabular-nums}
:is(.page-chapter,.page-results) .ri-t{font:500 16px/1.45 var(--body);color:var(--ink)}

/* ---------------------------------------------------------------- the figure: one white sheet */
:is(.page-chapter,.page-results) .ri-fig{margin:44px 0 0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:26px 30px 30px}
:is(.page-chapter,.page-results) .ri-fig-head{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:6px 40px;align-items:baseline;
  padding-bottom:18px;margin-bottom:22px;border-bottom:1px solid var(--line)}
:is(.page-chapter,.page-results) .ri-fig-head .ri-lab{color:var(--blue-ink)}
:is(.page-chapter,.page-results) .ri-cap{max-width:64ch;font:400 15px/1.55 var(--body);color:var(--muted)}
/* the small labels on the figures: the reader's own result, and the sixth factor */
:is(.page-chapter,.page-results) .ri-you-lab{font:800 11px/1.4 var(--body);letter-spacing:.11em;text-transform:uppercase;color:var(--blue-ink)}
:is(.page-chapter,.page-results) .ri-tag{display:inline-block;padding:3px 9px;border-radius:var(--r-pill);font:800 10.5px/1.4 var(--body);letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink);border:1px solid var(--ink)}
:is(.page-chapter,.page-results) .ri-fl-code{display:inline-flex;gap:6px}
:is(.page-chapter,.page-results) .ri-fl-code b{display:grid;place-items:center;width:34px;height:34px;border-radius:5px;background:var(--cobalt);color:#fff;font:800 17px/1 var(--body)}

/* ---- Personality Standard: five traits, four of them giving a letter */
:is(.page-chapter,.page-results) .ri-fl{--ri-tw:190px}
:is(.page-chapter,.page-results) .ri-fl-axis{display:grid;grid-template-columns:var(--ri-tw) minmax(0,1fr) minmax(0,1fr);gap:0 12px;margin-bottom:8px}
:is(.page-chapter,.page-results) .ri-fl-axis::before{content:""}
:is(.page-chapter,.page-results) .ri-fl-axis span{font:700 11px/1.4 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--faint);padding-left:14px}
:is(.page-chapter,.page-results) .ri-fl-row{display:grid;grid-template-columns:var(--ri-tw) minmax(0,1fr);gap:8px 12px;align-items:center;padding:8px 0}
:is(.page-chapter,.page-results) .ri-fl-trait{font:700 15px/1.3 var(--body);color:var(--ink)}
:is(.page-chapter,.page-results) .ri-fl-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
:is(.page-chapter,.page-results) .ri-pole{display:grid;grid-template-columns:38px minmax(0,1fr);grid-template-rows:auto auto;column-gap:12px;align-items:center;
  padding:9px 14px;border:1px solid var(--line);border-radius:10px;background:#fff}
:is(.page-chapter,.page-results) .ri-pole-l{grid-row:1 / 3;display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--grey);border-radius:5px;
  font:800 18px/1 var(--body);color:var(--ref-deep)}
:is(.page-chapter,.page-results) .ri-pole-n{align-self:end;font:700 14px/1.3 var(--body);color:var(--muted)}
:is(.page-chapter,.page-results) .ri-pole-w{align-self:start;font:400 13.5px/1.35 var(--body);color:var(--muted)}
:is(.page-chapter,.page-results) .ri-pole.is-you{border-color:var(--blue-mark);background:var(--blue-wash)}
:is(.page-chapter,.page-results) .ri-pole.is-you .ri-pole-l{border-color:var(--cobalt);background:var(--cobalt);color:#fff}
:is(.page-chapter,.page-results) .ri-pole.is-you .ri-pole-n{color:var(--ink)}
:is(.page-chapter,.page-results) .ri-pole.is-you .ri-pole-w{color:var(--blue-ink)}
/* the fifth trait: where the letters would be, a dashed box that says why there are none */
:is(.page-chapter,.page-results) .ri-fl-none{padding:14px 16px;border:1px dashed var(--grey);border-radius:10px;font:500 14px/1.4 var(--body);color:var(--muted)}
:is(.page-chapter,.page-results) .ri-fl-you{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:16px;padding-top:18px;border-top:1px solid var(--ink)}
:is(.page-chapter,.page-results) .ri-fl-name{font:300 26px/1.1 var(--display);letter-spacing:-.018em;color:var(--ink)}

/* ---- Character Profile and Deep Analysis: factors (or traits) as columns, each with its facets */
:is(.page-chapter,.page-results) .ri-facs{display:grid;gap:14px}
:is(.page-chapter,.page-results) .ri-facs.is-six{grid-template-columns:repeat(3,minmax(0,1fr))}
:is(.page-chapter,.page-results) .ri-facs.is-five{grid-template-columns:repeat(5,minmax(0,1fr));gap:0 22px}
:is(.page-chapter,.page-results) .ri-facs.is-six .ri-fac{padding:16px 18px 18px;border:1px solid var(--line);border-radius:12px}
:is(.page-chapter,.page-results) .ri-facs.is-six .ri-fac.is-key{border-color:var(--ink)}
:is(.page-chapter,.page-results) .ri-fac-h{font:700 16px/1.3 var(--body);color:var(--ink)}
:is(.page-chapter,.page-results) .ri-fac .ri-tag{margin-top:8px}
:is(.page-chapter,.page-results) .ri-chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:12px}
:is(.page-chapter,.page-results) .ri-chips li{padding:4px 10px;border-radius:var(--r-pill);background:var(--quiet-bg);border:1px solid var(--line);font:500 13px/1.4 var(--body);color:var(--ink)}
:is(.page-chapter,.page-results) .ri-facs.is-five .ri-fac-h{padding-bottom:10px;border-bottom:1px solid var(--ink)}
:is(.page-chapter,.page-results) .ri-rule li{padding:8px 0;border-bottom:1px solid var(--line);font:500 14px/1.35 var(--body);color:var(--ink)}
:is(.page-chapter,.page-results) .ri-rule li:last-child{border-bottom:0}

/* ---- Career: the hexagon, and the six areas beside it */
:is(.page-chapter,.page-results) .ri-career{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:24px 48px;align-items:center}
:is(.page-chapter,.page-results) .ri-hex .hex{max-width:300px}
:is(.page-chapter,.page-results) .ri-areas{border-top:1px solid var(--line)}
:is(.page-chapter,.page-results) .ri-area{display:grid;grid-template-columns:34px auto minmax(0,1fr) 26px;align-items:center;gap:0 14px;padding:8px 0;border-bottom:1px solid var(--line)}
:is(.page-chapter,.page-results) .ri-area-l{display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--blue-mark);border-radius:5px;background:var(--blue-wash);
  font:800 15px/1 var(--body);color:var(--blue-ink)}
:is(.page-chapter,.page-results) .ri-area-n{font:700 15px/1.3 var(--body);color:var(--ink)}
:is(.page-chapter,.page-results) .ri-area-k{font:400 14px/1.3 var(--body);color:var(--muted)}
:is(.page-chapter,.page-results) .ri-area.is-you .ri-area-l{background:var(--cobalt);border-color:var(--cobalt);color:#fff}
:is(.page-chapter,.page-results) .ri-rank{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--blue-wash);color:var(--blue-ink);
  font:800 12px/1 var(--body);font-variant-numeric:tabular-nums}
:is(.page-chapter,.page-results) .ri-code-you{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;margin-top:18px}
:is(.page-chapter,.page-results) .ri-code-you p{display:flex;align-items:center;gap:12px}
:is(.page-chapter,.page-results) .ri-code-type{font:300 22px/1.1 var(--display);letter-spacing:-.015em;color:var(--ink)}

/* ---- Work styles: four cards in the style map's order, the leading one in blue */
:is(.page-chapter,.page-results) .ri-styles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
:is(.page-chapter,.page-results) .ri-style{display:flex;flex-direction:column;padding:18px 18px 20px;border:1px solid var(--line);border-radius:12px}
/* the tag stands at the foot of its card (it is the card's last child), so the four names still start on one line */
:is(.page-chapter,.page-results) .ri-style .ri-tag{align-self:flex-start;margin-top:auto;border-color:var(--cobalt);background:var(--cobalt);color:#fff}
:is(.page-chapter,.page-results) .ri-style.is-you .ri-style-t{margin-bottom:16px}
:is(.page-chapter,.page-results) .ri-style-h{font:300 26px/1.1 var(--display);letter-spacing:-.018em;color:var(--ink)}
:is(.page-chapter,.page-results) .ri-style-from{margin-top:6px;font:700 11px/1.4 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
:is(.page-chapter,.page-results) .ri-style-t{margin-top:10px;font:400 14.5px/1.5 var(--body);color:var(--muted)}
:is(.page-chapter,.page-results) .ri-style.is-you{border-color:var(--blue-mark);background:var(--blue-wash)}
:is(.page-chapter,.page-results) .ri-style.is-you .ri-style-from{color:var(--blue-ink)}
:is(.page-chapter,.page-results) .ri-style.is-you .ri-style-t{color:var(--ink)}

/* ---- Five pillars: "your life overall" resting on five pillars */
:is(.page-chapter,.page-results) .ri-temple{--ri-gap:12px}
:is(.page-chapter,.page-results) .ri-lintel{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 20px;padding:14px 20px;
  border:1px solid var(--ink);border-radius:12px 12px 4px 4px}
:is(.page-chapter,.page-results) .ri-lintel-h{font:300 24px/1.15 var(--display);letter-spacing:-.016em;color:var(--ink)}
:is(.page-chapter,.page-results) .ri-lintel-t{font:500 14px/1.4 var(--body);color:var(--muted)}
/* the pillars stand a little in from the band's ends, on a plain rule that runs the band's whole width: the ground */
:is(.page-chapter,.page-results) .ri-pillars{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--ri-gap);margin-top:var(--ri-gap);
  padding:0 12px 14px;border-bottom:1px solid var(--ink)}
:is(.page-chapter,.page-results) .ri-pillar{padding:16px 14px 20px;border:1px solid var(--line);border-radius:4px 4px 10px 10px;background:#fff}
:is(.page-chapter,.page-results) .ri-pillar-h{font:700 15px/1.3 var(--body);color:var(--ink)}
:is(.page-chapter,.page-results) .ri-pillar-t{margin-top:8px;font:400 13.5px/1.5 var(--body);color:var(--muted)}

/* ---- Self-esteem: a sum read left to right. Ten answers, times 1 to 4 points each, equals one score on its ruler */
:is(.page-chapter,.page-results) .ri-se{display:grid;grid-template-columns:auto auto auto auto minmax(0,1fr);align-items:center;gap:0 22px}
:is(.page-chapter,.page-results) .ri-se-halves{display:grid;gap:10px}
:is(.page-chapter,.page-results) .ri-se-halves li{display:flex;align-items:center;gap:12px}
:is(.page-chapter,.page-results) .ri-marks{display:inline-flex;gap:5px}
:is(.page-chapter,.page-results) .ri-marks i{width:14px;height:14px;border-radius:3px;border:1.5px solid var(--ink)}
:is(.page-chapter,.page-results) .ri-marks.is-pos i{background:var(--ink)}
:is(.page-chapter,.page-results) .ri-se-lab{font:600 14.5px/1.35 var(--body);color:var(--ink)}
:is(.page-chapter,.page-results) .ri-se-op{font:300 34px/1 var(--display);color:var(--ref-deep);text-align:center}
:is(.page-chapter,.page-results) .ri-se-points{max-width:9ch;font:300 24px/1.15 var(--display);letter-spacing:-.012em;color:var(--ink)}
:is(.page-chapter,.page-results) .ri-ruler{position:relative;margin:0 8px}
:is(.page-chapter,.page-results) .ri-ruler-mark{position:relative;height:34px}
:is(.page-chapter,.page-results) .ri-ruler-mark-in{position:absolute;bottom:6px;left:clamp(40px,var(--at),calc(100% - 40px));transform:translateX(-50%);white-space:nowrap;
  font:700 12px/1.3 var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--blue-ink)}
:is(.page-chapter,.page-results) .ri-ruler-mark-in b{margin-left:4px;font:400 22px/1 var(--display);letter-spacing:0;text-transform:none;color:var(--blue-deep)}
:is(.page-chapter,.page-results) .ri-ruler-track{position:relative;height:10px;border-radius:var(--r-pill);background:var(--ground-deep)}
:is(.page-chapter,.page-results) .ri-tick{position:absolute;top:-5px;width:1px;height:20px;background:var(--ref-deep)}
:is(.page-chapter,.page-results) .ri-ruler-you{position:absolute;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:var(--cobalt);box-shadow:0 0 0 4px #fff}
:is(.page-chapter,.page-results) .ri-ruler-ends{position:relative;height:40px;margin-top:10px}
:is(.page-chapter,.page-results) .ri-ruler-ends span{position:absolute;top:0;transform:translateX(-50%);text-align:center;font:700 14px/1.2 var(--body);color:var(--ink);font-variant-numeric:tabular-nums}
:is(.page-chapter,.page-results) .ri-ruler-ends span:first-child{transform:none}
:is(.page-chapter,.page-results) .ri-ruler-ends span:last-child{transform:translateX(-100%)}
:is(.page-chapter,.page-results) .ri-ruler-ends small{display:block;margin-top:3px;font:600 11px/1.3 var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);white-space:nowrap}

/* ---------------------------------------------------------------- how to read it */
:is(.page-chapter,.page-results) .ri-read{display:grid;grid-template-columns:minmax(0,.3fr) minmax(0,1fr);gap:8px 40px;align-items:baseline;margin-top:30px;padding-top:20px;border-top:1px solid var(--line)}
:is(.page-chapter,.page-results) .ri-read-t{max-width:70ch;font:400 16px/1.6 var(--body);color:var(--ink)}
:is(.page-chapter,.page-results) .ri-read .fold{margin-top:10px}

/* ---------------------------------------------------------------- the contents' first row (D129)
   "About this report", unnumbered, over the numbered sections. Its line is a row's own line (.rp-toc-line, 34-report-pages.css),
   so it takes the rows' measurements at every width and in both places the list is drawn, the head of an open report and the
   locked page's sheet; a small blue mark stands where a number would. */
:is(.page-chapter,.page-results) .rp-toc-lead{border-bottom:1px solid var(--line)}
:is(.page-chapter,.page-results) .rp-toc-mark{align-self:center;width:8px;height:8px;border-radius:50%;background:var(--blue-mark)}
.page-chapter .rp-toc-zone .rp-toc-lead:hover .rp-toc-line{background:var(--quiet-bg)}

/* ---------------------------------------------------------------- narrower screens */
@media (max-width:1100px){
  :is(.page-chapter,.page-results) .ri-facs.is-five{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
  :is(.page-chapter,.page-results) .ri-styles{grid-template-columns:repeat(2,minmax(0,1fr))}
  :is(.page-chapter,.page-results) .ri-pillars{grid-template-columns:repeat(3,minmax(0,1fr));margin-inline:0}
}
@media (max-width:860px){
  :is(.page-chapter,.page-results) .ri-top{grid-template-columns:minmax(0,1fr)}
  :is(.page-chapter,.page-results) .ri-fig-head{grid-template-columns:minmax(0,1fr)}
  :is(.page-chapter,.page-results) .ri-facs.is-six{grid-template-columns:repeat(2,minmax(0,1fr))}
  :is(.page-chapter,.page-results) .ri-career{grid-template-columns:minmax(0,1fr)}
  :is(.page-chapter,.page-results) .ri-hex{max-width:280px;margin-inline:auto}
  :is(.page-chapter,.page-results) .ri-read{grid-template-columns:minmax(0,1fr)}
  /* the sum reads down the screen instead, each sign at the head of its own line: the ten answers, then "× 1 to 4 points", then
     "=" and the ruler */
  :is(.page-chapter,.page-results) .ri-se{grid-template-columns:30px minmax(0,1fr);gap:16px 10px}
  :is(.page-chapter,.page-results) .ri-se-halves{grid-column:1 / -1}
  :is(.page-chapter,.page-results) .ri-se-op{font-size:28px;text-align:left}
  :is(.page-chapter,.page-results) .ri-se-points{max-width:none;font-size:22px}
  :is(.page-chapter,.page-results) .ri-se .ri-ruler{margin:0 8px 0 0}
}
@media (max-width:720px){
  :is(.page-chapter,.page-results) .rp-intro{padding-block:44px 48px}
  :is(.page-chapter,.page-results) .ri-h{max-width:none}
  :is(.page-chapter,.page-results) .ri-fig{margin-top:32px;padding:20px 16px 22px}
  /* the trait name over its two letters, and the column labels over the two letters */
  :is(.page-chapter,.page-results) .ri-fl-axis{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 8px}
  :is(.page-chapter,.page-results) .ri-fl-axis::before{display:none}
  :is(.page-chapter,.page-results) .ri-fl-axis span{padding-left:10px}
  :is(.page-chapter,.page-results) .ri-fl-row{grid-template-columns:minmax(0,1fr);gap:6px;padding:10px 0}
  :is(.page-chapter,.page-results) .ri-fl-pair{gap:8px}
  :is(.page-chapter,.page-results) .ri-pole{grid-template-columns:30px minmax(0,1fr);column-gap:10px;padding:8px 10px}
  :is(.page-chapter,.page-results) .ri-pole-l{width:30px;height:30px;font-size:15px}
  :is(.page-chapter,.page-results) .ri-pole-n{font-size:13px}
  :is(.page-chapter,.page-results) .ri-pole-w{font-size:12.5px}
  :is(.page-chapter,.page-results) .ri-facs.is-six,
  :is(.page-chapter,.page-results) .ri-facs.is-five{grid-template-columns:minmax(0,1fr);gap:12px}
  :is(.page-chapter,.page-results) .ri-facs.is-five .ri-fac-h{padding-bottom:6px}
  :is(.page-chapter,.page-results) .ri-facs.is-five .ri-rule{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
  :is(.page-chapter,.page-results) .ri-facs.is-five .ri-rule li{padding:4px 10px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--quiet-bg);font-size:13px}
  :is(.page-chapter,.page-results) .ri-area{grid-template-columns:30px minmax(0,auto) minmax(0,1fr) 24px;gap:0 10px}
  :is(.page-chapter,.page-results) .ri-area-k{font-size:13px}
  :is(.page-chapter,.page-results) .ri-styles{grid-template-columns:minmax(0,1fr)}
  :is(.page-chapter,.page-results) .ri-pillars{grid-template-columns:repeat(2,minmax(0,1fr))}
  :is(.page-chapter,.page-results) .ri-pillar:last-child{grid-column:1 / -1}
  :is(.page-chapter,.page-results) .ri-read{margin-top:24px}
}

/* ---------------------------------------------------------------- print: the part stays together on its own page */
@media print{
  .rp-intro{break-inside:avoid}
}


/* ===== 39-report-preview.css ===== */
/* ==========================================================================
   39-report-preview.css · owner: results track · Sep 26, 2026
   THE PREVIEW OF A PAID REPORT: what a reader sees of their report before buying it (app/report-page.js, the locked branch of every
   paid report). Wayne, Sep 26, 2026: "the previews of the full reports seem weak. like it's actually a lot less visually appealing
   than the actual report. i would like to see improvement, make it look beautiful, with animation, visually stunning features, etc."

   Four pieces, in the order a reader meets them:
     the free section's head   a strip of small pages, one per section, the free one open (.rp-ex-strip)
     the contents, drawn       every section as a small page of the report, laid on the grey band like proofs on a table (.rp-spread)
     the value band            each line beside the paintings of the sections that deliver it (.rp-vb)
     the unlock box            the report itself, closed, beside the same price card the assessment pages draw (.rp-ul)
   And the motion that brings them in (app/report-motion.js adds .m-in, once, as each arrives; .is-live while the hero is on screen).

   THE SAME PIECES DRAW THE PUBLIC PREVIEWS (Sep 26, 2026): the home page's look inside, /unlock/'s report cards and each paid
   assessment page draw the SAMPLE report with these very pages, fans and closed report (src/site/report-showcase.mjs), inside an
   element marked .rp-show. So every rule for a piece is written :is(.page-chapter,.rp-show), one look in both places, and only the
   layout around the pieces lives with each page (39-report-showcase.css).

   EVERYTHING HERE IS COMPLETE AT REST. No rule below hides anything until a script runs: the pages, fans and card are drawn in their
   finished place, and the keyframes only ever start from a visible state and end where the rest state already is. Without the
   script, in a screenshot, in print and for anyone who asked for less motion, the page is the same page, standing still.
   Transform and opacity only (the individual translate, rotate and scale properties, so an arrival never fights a hover), never a
   property that lays the page out again.
   ========================================================================== */

/* ---------------------------------------------------------------- the free section's head: which page of the report this is */
.page-chapter .rp-ex-strip{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;margin:16px auto 0;max-width:420px}
.page-chapter .rp-ex-strip i{display:block;width:13px;height:17px;border:1px solid var(--grey);border-radius:2px;background:#fff}
.page-chapter .rp-ex-strip i.is-open{border-color:var(--blue-mark);background:var(--blue-mark);box-shadow:0 0 0 3px rgba(34,136,224,.18)}
/* "About this report", the first entry of the contents (D129), already on the page above: a page that is open but is not this one */
.page-chapter .rp-ex-strip i.is-lead{border-color:var(--blue-mark);background:var(--blue-wash)}

/* ---------------------------------------------------------------- the contents, drawn as the report's pages
   The list keeps its markup to the character (test/report-contents.test.mjs reads it); each item is now a small page (.rp-pg, inside
   the item, after its own line) with the item's number, title, words and minutes printed under it as its caption. */
.page-chapter .rp-toc-zone .rp-spread-note{max-width:620px;margin:-22px auto 34px;text-align:center;font:500 13px/1.55 var(--body);color:var(--muted)}
.page-chapter .rp-toc-zone .rp-toc-sheet.rp-spread{--tw:164px;--gx:20px;--cols:6;max-width:1180px;padding:0;background:none;border-radius:0;box-shadow:none}
/* a flatplan: whole rows of pages, left to right, the block centred on the band */
.page-chapter .rp-spread .rp-toc{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:58px var(--gx);
  max-width:calc(var(--cols) * var(--tw) + (var(--cols) - 1) * var(--gx));margin:0 auto;padding-top:34px;border-top:0}
.page-chapter .rp-spread :is(.rp-toc-row,.rp-toc-lead){position:relative;display:flex;flex-direction:column;flex:0 0 var(--tw);width:var(--tw);min-width:0;
  padding:0;border:0;border-radius:0;background:none}
.page-chapter .rp-spread .rp-toc-row:has(.is-deck){flex-basis:calc(var(--tw) * 2 + var(--gx));width:calc(var(--tw) * 2 + var(--gx))}
/* the part a run of pages belongs to, on a rule over the first page of the run */
.page-chapter .rp-spread .rp-toc .rp-toc-part{position:absolute;left:0;right:0;bottom:100%;margin:0 0 10px;padding:0 0 7px;border-bottom:2px solid var(--blue-mark);
  font:800 10px/1.35 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--blue-ink)}
.page-chapter .rp-spread .rp-toc .rp-toc-row:has(.rp-toc-part){border-top:0}

/* the caption: number, title, and the two figures with the padlock */
.page-chapter .rp-spread .rp-toc-line{display:block;padding:13px 2px 0;border-radius:0;background:none;transition:none}
.page-chapter .rp-spread .rp-toc-row.is-locked:hover .rp-toc-line,.page-chapter .rp-spread .rp-toc-lead:hover .rp-toc-line{background:none}
.page-chapter .rp-spread .rp-toc-n{display:inline;margin-right:7px;font:700 11px/1.4 var(--body);color:var(--faint)}
.page-chapter .rp-spread .rp-toc-mark{display:inline-block;width:7px;height:7px;margin:0 8px 2px 0;vertical-align:middle}
.page-chapter .rp-spread .rp-toc-t{display:inline;font:400 16.5px/1.3 var(--display);letter-spacing:-.008em;hyphens:auto}
.page-chapter .rp-spread .rp-toc-row.is-locked .rp-toc-t{color:var(--ink)}
.page-chapter .rp-spread .rp-toc-meta{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin-top:7px;padding:0;background:none;white-space:normal}
.page-chapter .rp-spread .rp-toc-row.is-free .rp-toc-meta{background:none}
/* on the grey band the lighter caption grey falls under a readable contrast, so both figures take the muted ink */
.page-chapter .rp-spread .rp-toc-w{font-size:11.5px;line-height:1.4;color:var(--muted)}
.page-chapter .rp-spread .rp-toc-dot{margin:0 4px}
.page-chapter .rp-spread .rp-toc-lock svg{width:10px;height:11px}
.page-chapter .rp-spread .rp-toc-row.is-free{padding:0;border-radius:0;background:none}
.page-chapter .rp-spread .rp-toc-note{margin:6px 0 0;padding:0;font-size:10px}
/* the two pages already on this page, the report's opening and its free section, are one tap from where they are printed */
.page-chapter .rp-spread :is(.rp-toc-lead,.rp-toc-row.is-free) a.rp-toc-line::after{content:"";position:absolute;inset:0;z-index:2}
.page-chapter .rp-spread :is(.rp-toc-lead,.rp-toc-row.is-free) a.rp-toc-line:focus-visible{outline:none}
.page-chapter .rp-spread :is(.rp-toc-lead,.rp-toc-row.is-free):has(a.rp-toc-line:focus-visible) .rp-pg-sheet{outline:2px solid var(--blue-mark);outline-offset:3px}
.page-chapter .rp-spread :is(.rp-toc-lead,.rp-toc-row.is-free) .rp-toc-t{color:var(--blue)}
.page-chapter .rp-spread .rp-toc-note-wrap{max-width:720px;margin:44px auto 0;padding-top:14px}

/* ---- one page */
:is(.page-chapter,.rp-show) .rp-pg{position:relative;display:block;order:-1;width:100%;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
:is(.page-chapter,.rp-show) .rp-pg-sheet{position:relative;z-index:1;display:flex;flex-direction:column;aspect-ratio:3 / 4;overflow:hidden;border-radius:6px;background:#fff;
  box-shadow:0 1px 2px rgba(13,20,32,.06),0 10px 24px -14px rgba(13,20,32,.28)}
:is(.page-chapter,.rp-show) .rp-pg.is-deck .rp-pg-sheet{aspect-ratio:8 / 5;background:var(--amber-wash)}
:is(.page-chapter,.rp-show) .rp-pg-art{position:relative;display:block;flex:0 0 46%;overflow:hidden;background:var(--ground-deep)}
:is(.page-chapter,.rp-show) .rp-pg-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
:is(.page-chapter,.rp-show) .rp-pg.is-cover .rp-pg-art,.page-chapter .rp-toc-lead .rp-pg-art{flex-basis:100%}
:is(.page-chapter,.rp-show) .rp-pg-ink{display:flex;flex:1 1 auto;flex-direction:column;gap:5px;min-height:0;padding:10px 11px 11px}
:is(.page-chapter,.rp-show) .rp-pg:not(.has-art) .rp-pg-ink{padding-top:16px;gap:6px}
:is(.page-chapter,.rp-show) .rp-pg-ink>i{display:block;flex:none;border-radius:2px}
:is(.page-chapter,.rp-show) .rp-pg-k{width:28%;height:3px;background:var(--blue-mark)}
:is(.page-chapter,.rp-show) .rp-pg-h{width:74%;height:6px;margin-bottom:3px;background:var(--grey)}
:is(.page-chapter,.rp-show) .rp-pg-l{width:100%;height:3px;background:var(--line)}
:is(.page-chapter,.rp-show) .rp-pg-l.is-short{width:62%}
/* a chart outline: the bell every score panel in these reports draws, as seven grey-blue columns, with nothing on it to read */
:is(.page-chapter,.rp-show) .rp-pg-ink>.rp-pg-chart{display:flex;align-items:flex-end;gap:2px;height:22px;padding:3px 5px 0;border-bottom:1px solid var(--grey);background:var(--blue-wash)}
:is(.page-chapter,.rp-show) .rp-pg-chart b{flex:1;height:30%;border-radius:1px 1px 0 0;background:var(--cobalt-pale)}
:is(.page-chapter,.rp-show) .rp-pg-chart b:nth-child(2),:is(.page-chapter,.rp-show) .rp-pg-chart b:nth-child(6){height:58%}
:is(.page-chapter,.rp-show) .rp-pg-chart b:nth-child(3),:is(.page-chapter,.rp-show) .rp-pg-chart b:nth-child(5){height:84%}
:is(.page-chapter,.rp-show) .rp-pg-chart b:nth-child(4){height:100%;background:var(--blue-mark)}
/* card outlines, each with the coloured rule the report's cards open on */
:is(.page-chapter,.rp-show) .rp-pg-ink>.rp-pg-cards{display:grid;grid-template-columns:1fr 1fr;gap:3px}
:is(.page-chapter,.rp-show) .rp-pg-cards b{display:block;height:13px;border:1px solid var(--line);border-top:2px solid var(--cobalt-pale);border-radius:2px}
:is(.page-chapter,.rp-show) .rp-pg-cards b:nth-child(2),:is(.page-chapter,.rp-show) .rp-pg-cards b:nth-child(3){border-top-color:var(--amber-light)}
/* the answers: rows of small squares, the way every report's answer strips draw them */
:is(.page-chapter,.rp-show) .rp-pg-ink>.rp-pg-ans{display:grid;grid-template-columns:repeat(6,1fr);gap:3px;margin-top:4px}
:is(.page-chapter,.rp-show) .rp-pg-ans b{display:block;aspect-ratio:1;border-radius:2px;background:var(--blue-wash);box-shadow:inset 0 0 0 1px var(--cobalt-pale)}
:is(.page-chapter,.rp-show) .rp-pg-ans b:nth-child(5n+2),:is(.page-chapter,.rp-show) .rp-pg-ans b:nth-child(7n){background:var(--cobalt-pale)}
:is(.page-chapter,.rp-show) .rp-pg-ans b:nth-child(4n){background:var(--blue-mark);box-shadow:none}
/* the question a section ends on, alone on its warm band */
:is(.page-chapter,.rp-show) .rp-pg-ink>.rp-pg-q{display:flex;justify-content:center;align-items:center;height:14px;margin-top:auto;border-radius:3px;background:var(--amber-wash)}
:is(.page-chapter,.rp-show) .rp-pg-q b{display:block;width:52%;height:3px;border-radius:2px;background:var(--amber-light)}
/* the type guide: its ten chapters, the names every public type page lists, as the tabs of a deck of cards */
:is(.page-chapter,.rp-show) .rp-pg-deck{display:grid;grid-template-columns:1fr 1fr;align-content:center;gap:6px 10px;height:100%;padding:16px 16px 14px}
:is(.page-chapter,.rp-show) .rp-pg-deck b{display:block;overflow:hidden;padding:4px 8px;border:1px solid rgba(154,91,6,.22);border-radius:5px;background:#fff;
  font:600 10.5px/1.25 var(--body);white-space:nowrap;text-overflow:ellipsis;color:var(--ink);box-shadow:0 1px 0 rgba(154,91,6,.12)}
/* a long section is a thicker sheaf: two more sheets behind it (the report's longest, the guide, is the deck above) */
:is(.page-chapter,.rp-show) .rp-pg.is-long::before,:is(.page-chapter,.rp-show) .rp-pg.is-long::after,:is(.page-chapter,.rp-show) .rp-pg.is-deck::before,:is(.page-chapter,.rp-show) .rp-pg.is-deck::after{
  content:"";position:absolute;inset:0;z-index:0;border-radius:6px;background:#fff;box-shadow:0 1px 2px rgba(13,20,32,.08)}
:is(.page-chapter,.rp-show) .rp-pg.is-long::before,:is(.page-chapter,.rp-show) .rp-pg.is-deck::before{rotate:2.2deg;translate:4px 2px}
:is(.page-chapter,.rp-show) .rp-pg.is-long::after,:is(.page-chapter,.rp-show) .rp-pg.is-deck::after{rotate:-1.6deg;translate:-3px 3px}
/* the mark in the corner: a padlock on a locked page, a tick on a page already here */
:is(.page-chapter,.rp-show) :is(.rp-pg-lock,.rp-pg-open){position:absolute;top:8px;right:8px;z-index:2;display:grid;place-items:center;width:24px;height:24px;border-radius:50%}
:is(.page-chapter,.rp-show) .rp-pg-lock{background:#fff;color:var(--amber-text);box-shadow:0 1px 3px rgba(13,20,32,.18)}
:is(.page-chapter,.rp-show) .rp-pg-lock svg{width:10px;height:11px}
:is(.page-chapter,.rp-show) .rp-pg-open{background:var(--blue-mark);color:#fff;box-shadow:0 0 0 3px #fff}
:is(.page-chapter,.rp-show) .rp-pg-open svg{width:12px;height:12px}
:is(.page-chapter,.rp-show) .rp-pg.is-open .rp-pg-sheet{box-shadow:0 0 0 2px var(--blue-mark),0 10px 24px -14px rgba(13,20,32,.28)}
/* a page lifts under the pointer, because something is there */
@media (hover:hover){
  .page-chapter .rp-spread :is(.rp-toc-row,.rp-toc-lead):hover .rp-pg{transform:translateY(-5px)}
  .page-chapter .rp-spread :is(.rp-toc-row,.rp-toc-lead):hover .rp-pg-sheet{box-shadow:0 1px 2px rgba(13,20,32,.06),0 20px 34px -16px rgba(13,20,32,.34)}
  .page-chapter .rp-spread :is(.rp-toc-lead,.rp-toc-row.is-free):hover .rp-pg-sheet{box-shadow:0 0 0 2px var(--blue-mark),0 20px 34px -16px rgba(13,20,32,.34)}
}
@media (max-width:1100px){
  .page-chapter .rp-toc-zone .rp-toc-sheet.rp-spread{--tw:150px;--gx:18px;--cols:5}
  .page-chapter .rp-spread .rp-toc-t{font-size:15px}
}
@media (max-width:900px){
  .page-chapter .rp-toc-zone .rp-toc-sheet.rp-spread{--cols:4}
}
@media (max-width:720px){
  .page-chapter .rp-toc-zone .rp-spread-note{margin:-12px auto 26px;font-size:12.5px}
  .page-chapter .rp-toc-zone .rp-toc-sheet.rp-spread{--gx:14px}
  .page-chapter .rp-spread .rp-toc{max-width:none;gap:52px var(--gx);padding-top:30px}
  .page-chapter .rp-spread :is(.rp-toc-row,.rp-toc-lead){flex-basis:calc((100% - var(--gx)) / 2);width:calc((100% - var(--gx)) / 2)}
  .page-chapter .rp-spread .rp-toc-row:has(.is-deck){flex-basis:100%;width:100%}
  .page-chapter .rp-spread .rp-toc-t{font-size:15.5px}
  .page-chapter .rp-spread .rp-pg-sheet{aspect-ratio:4 / 5}
  .page-chapter .rp-spread .rp-pg.is-deck .rp-pg-sheet{aspect-ratio:auto}
  :is(.page-chapter,.rp-show) .rp-pg-deck{gap:5px 8px;padding:14px 12px 12px}
}

/* ---------------------------------------------------------------- the value band: each line beside the pages that deliver it */
:is(.page-chapter,.rp-show) .rp-vb-zone{padding-block:72px 80px}
:is(.page-chapter,.rp-show) .rp-vb{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 30px;max-width:1120px;margin:0 auto}
:is(.page-chapter,.rp-show) .rp-vb-2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:760px}
:is(.page-chapter,.rp-show) .rp-vb-1{grid-template-columns:minmax(0,1fr);max-width:380px}
:is(.page-chapter,.rp-show) .rp-vb-card{display:flex;flex-direction:column;min-width:0}
/* the fan: up to three paintings, each a print with a white margin, the first on top */
:is(.page-chapter,.rp-show) .rp-vb-fan{position:relative;display:block;--fh:228px;height:var(--fh);margin:0 6px 26px}
:is(.page-chapter,.rp-show) .rp-vb-sheet{position:absolute;left:14%;right:14%;top:8px;bottom:0;display:block;padding:7px;border-radius:10px;background:#fff;
  box-shadow:0 1px 2px rgba(13,20,32,.07),0 18px 32px -18px rgba(13,20,32,.4)}
:is(.page-chapter,.rp-show) .rp-vb-sheet img{display:block;width:100%;height:100%;object-fit:cover;border-radius:5px}
:is(.page-chapter,.rp-show) .rp-vb-sheet.is-1{rotate:-6deg;translate:-15% 4px}
:is(.page-chapter,.rp-show) .rp-vb-sheet.is-2{rotate:6deg;translate:15% 4px}
:is(.page-chapter,.rp-show) .rp-vb-fan-1 .rp-vb-sheet{left:9%;right:9%}
:is(.page-chapter,.rp-show) .rp-vb-sheet.is-drawn{left:calc(50% - (var(--fh) - 8px) * .375);right:auto;width:calc((var(--fh) - 8px) * .75);padding:0;background:none;box-shadow:none}
:is(.page-chapter,.rp-show) .rp-vb-sheet.is-drawn .rp-pg,:is(.page-chapter,.rp-show) .rp-vb-sheet.is-drawn .rp-pg-sheet{height:100%}
:is(.page-chapter,.rp-show) .rp-vb-sheet.is-drawn .rp-pg-sheet{aspect-ratio:auto;box-shadow:0 1px 2px rgba(13,20,32,.07),0 18px 32px -18px rgba(13,20,32,.4)}
:is(.page-chapter,.rp-show) .rp-vb-body{display:flex;flex:1;flex-direction:column}
:is(.page-chapter,.rp-show) .rp-vb-part{font:800 10px/1.4 var(--body);letter-spacing:.13em;text-transform:uppercase;color:var(--blue-ink)}
:is(.page-chapter,.rp-show) .rp-vb-t{margin-top:10px;font:400 21px/1.34 var(--display);letter-spacing:-.01em;color:var(--ink);text-wrap:pretty}
/* a second line of the same card, for two lines that pair with the same sections (app/report-page.js VALUE_POINTS `more`, Oct 2, 2026) */
:is(.page-chapter,.rp-show) .rp-vb-t.is-more{margin-top:8px}
:is(.page-chapter,.rp-show) .rp-vb-secs{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
:is(.page-chapter,.rp-show) .rp-vb-secs li{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 9px;border-radius:var(--r-pill);background:var(--quiet-bg);
  border:1px solid var(--line);font:600 12px/1.35 var(--body);color:var(--ink)}
:is(.page-chapter,.rp-show) .rp-vb-secs svg{flex:none;width:9px;height:10px;color:var(--amber-text)}
:is(.page-chapter,.rp-show) .rp-vb-time{margin-top:auto;padding-top:12px;font:500 12.5px/1.4 var(--body);color:var(--muted)}
@media (max-width:1100px){
  :is(.page-chapter,.rp-show) .rp-vb{gap:30px 22px}
  :is(.page-chapter,.rp-show) .rp-vb-fan{--fh:200px}
  :is(.page-chapter,.rp-show) .rp-vb-t{font-size:19px}
}
@media (max-width:860px){
  :is(.page-chapter,.rp-show) .rp-vb,:is(.page-chapter,.rp-show) .rp-vb-2{grid-template-columns:minmax(0,1fr);max-width:520px;gap:48px}
  :is(.page-chapter,.rp-show) .rp-vb-fan{--fh:210px}
}
@media (max-width:720px){
  :is(.page-chapter,.rp-show) .rp-vb-zone{padding-block:52px 60px}
  :is(.page-chapter,.rp-show) .rp-vb-fan{--fh:188px;margin-bottom:22px}
  :is(.page-chapter,.rp-show) .rp-vb-t{font-size:19px}
}

/* ---------------------------------------------------------------- the unlock box: the report, closed, and its price card */
/* the fanned pages may lean past the band's edge on a narrow screen; the band clips them, so the page never scrolls sideways */
.page-chapter :is(.rp-unlock-zone,.rp-vb-zone){overflow-x:clip}
.page-chapter .rp-unlock-zone .rp-ul{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:64px;align-items:center}
.page-chapter .rp-unlock-zone .rp-ul-book{position:relative;display:block;width:100%;max-width:470px;height:310px;margin-top:40px}
:is(.page-chapter,.rp-show) .rp-ul-cover{position:absolute;left:0;top:0;z-index:5;display:flex;flex-direction:column;width:52%;aspect-ratio:3 / 4;overflow:hidden;
  border-radius:8px;background:#fff;box-shadow:0 2px 3px rgba(0,0,0,.12),0 34px 60px -26px rgba(0,0,0,.6)}
:is(.page-chapter,.rp-show) .rp-ul-cover-art{position:relative;display:block;flex:0 0 64%;overflow:hidden;background:var(--ground-deep)}
:is(.page-chapter,.rp-show) .rp-ul-cover-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
:is(.page-chapter,.rp-show) .rp-ul-cover-t{display:block;padding:12px 14px 8px;font:300 17px/1.15 var(--display);letter-spacing:-.01em;color:var(--ink)}
:is(.page-chapter,.rp-show) .rp-ul-cover-l{display:block;height:3px;margin:3px 14px 0;border-radius:2px;background:var(--line)}
:is(.page-chapter,.rp-show) .rp-ul-cover-l.is-short{width:44%}
:is(.page-chapter,.rp-show) .rp-ul-leaf{position:absolute;top:12px;left:24%;z-index:1;display:block;width:44%}
:is(.page-chapter,.rp-show) .rp-ul-leaf .rp-pg-sheet{border-radius:8px;box-shadow:0 1px 2px rgba(0,0,0,.1),0 24px 44px -24px rgba(0,0,0,.55)}
:is(.page-chapter,.rp-show) .rp-ul-leaf.is-0{z-index:4;rotate:4deg;translate:32% 4px}
:is(.page-chapter,.rp-show) .rp-ul-leaf.is-1{z-index:3;rotate:10deg;translate:66% 20px}
:is(.page-chapter,.rp-show) .rp-ul-leaf.is-2{z-index:2;rotate:16deg;translate:98% 44px}
/* THE PRICE CARD is the assessment pages' own (21-take.css .tp-offer-card, D130 idea 7), lifted onto the deep band: white, a
   hairline, the soft shadow of anything that floats. Everything the deep band does to text, buttons and the guarantee is undone
   inside it, so the card reads exactly as it does on a white page. */
.page-chapter .rp-unlock-zone .rp-ul-card{display:grid;justify-items:stretch;gap:18px;padding:28px 28px 24px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface);color:var(--ink);box-shadow:0 2px 3px rgba(0,0,0,.1),0 30px 60px -30px rgba(0,0,0,.55)}
.page-chapter .rp-unlock-zone .rp-ul-card :is(p,span){color:inherit}
.page-chapter .rp-unlock-zone .rp-ul-offer{display:flex;align-items:flex-start;gap:12px;margin:0;font:400 25px/1.25 var(--display);letter-spacing:-.012em;color:var(--ink)}
.page-chapter .rp-ul-tag{flex:none;width:20px;height:20px;margin-top:5px;color:var(--amber-mark)}
.page-chapter .rp-ul-tag path{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
.page-chapter .rp-ul-tag circle{fill:currentColor}
.page-chapter .rp-unlock-zone .rp-ul-amt{font:400 42px/1 var(--display);letter-spacing:-.025em;color:var(--blue-ink);vertical-align:-3px}
.page-chapter .rp-unlock-zone .rp-ul-worth{display:block;margin-top:12px;font:400 15.5px/1.55 var(--body);letter-spacing:0;color:var(--muted)}
/* What is made from the reader's answers and what is written for their type (review branch, Oct 7, 2026): two short lists on the
   card, the first with blue ticks, the second muted. */
.page-chapter .rp-unlock-zone .rp-ul-split{display:grid;gap:8px;padding-top:16px;border-top:1px solid var(--line)}
.page-chapter .rp-unlock-zone .rp-ul-split-h{margin:0;font:700 12.5px/1.3 var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--blue-ink)}
.page-chapter .rp-unlock-zone .rp-ul-split-h.is-type{margin-top:10px;color:var(--muted)}
.page-chapter .rp-unlock-zone .rp-ul-list{display:grid;gap:7px;margin:0;padding:0;list-style:none}
.page-chapter .rp-unlock-zone .rp-ul-list li{display:grid;grid-template-columns:16px minmax(0,1fr);gap:10px;align-items:start;font:500 15px/1.45 var(--body);color:var(--ink)}
.page-chapter .rp-unlock-zone .rp-ul-list.is-type li{color:var(--muted)}
.page-chapter .rp-ul-tick{margin-top:3px}
.page-chapter .rp-ul-tick path{fill:none;stroke:var(--blue-mark);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.page-chapter .rp-ul-list.is-type .rp-ul-tick path{stroke:var(--grey)}
.page-chapter .rp-unlock-zone .rp-ul-size{margin:0;padding-top:14px;border-top:1px solid var(--line);font:600 13.5px/1.5 var(--body);color:var(--muted)}
.page-chapter .rp-unlock-zone .rp-ul-card .guarantee{display:flex;width:100%;gap:14px;padding:10px 16px 10px 10px;border:1px solid #F5A623;border-radius:12px;
  background:#FFF4DF;box-shadow:none}
.page-chapter .rp-unlock-zone .rp-ul-card .gb-seal{width:56px;height:56px}
.page-chapter .rp-unlock-zone .rp-ul-card .gb-text b{font-size:15.5px;color:var(--ink)}
.page-chapter .rp-unlock-zone .rp-ul-card .gb-text span{font-size:13.5px;color:#6B4D0F}
.page-chapter .rp-unlock-zone .rp-ul-card .btn-primary{width:100%;justify-content:center;background:var(--cobalt);color:#fff;box-shadow:var(--sh-btn)}
.page-chapter .rp-unlock-zone .rp-ul-card .btn-primary:hover{background:var(--blue-ink);color:#fff}
.page-chapter .rp-unlock-zone .rp-ul-card :focus-visible{outline-color:var(--blue-mark)}
.page-chapter .rp-unlock-zone .rp-ul-card .rp-sample-link{justify-self:center;color:var(--cobalt)}
/* The year line under the buy button stays muted on the white card (D173), and a purchase of this take whose year is over opens the
   card with until when it was open: a calm note on a blue wash, above the offer to open it again. */
.page-chapter .rp-unlock-zone .rp-ul-card .ck-note{color:var(--muted)}
.page-chapter .rp-unlock-zone .rp-ul-card .rp-ul-closed{margin:0;padding:12px 16px;border:1px solid var(--cobalt-pale);border-radius:var(--r-sm);
  background:var(--blue-wash);font:500 var(--fs-small)/1.5 var(--body);color:var(--blue-ink);text-wrap:pretty}
@media (max-width:1100px){
  .page-chapter .rp-unlock-zone .rp-ul{gap:44px}
  .page-chapter .rp-unlock-zone .rp-ul-book{height:280px}
}
@media (max-width:860px){
  .page-chapter .rp-unlock-zone .rp-ul{grid-template-columns:minmax(0,1fr);gap:40px}
  .page-chapter .rp-unlock-zone .rp-ul-book{max-width:400px;height:250px;margin:34px auto 0}
}
@media (max-width:720px){
  .page-chapter .rp-unlock-zone .rp-ul-book{max-width:300px;height:212px;margin:30px 0 8px}
  :is(.page-chapter,.rp-show) .rp-ul-leaf.is-0{translate:26% 4px}
  :is(.page-chapter,.rp-show) .rp-ul-leaf.is-1{rotate:8deg;translate:50% 16px}
  :is(.page-chapter,.rp-show) .rp-ul-leaf.is-2{rotate:12deg;translate:72% 32px}
  :is(.page-chapter,.rp-show) .rp-ul-cover-t{padding:9px 10px 6px;font-size:14px}
  :is(.page-chapter,.rp-show) .rp-ul-cover-l{margin-inline:10px}
  .page-chapter .rp-unlock-zone .rp-ul-card{padding:22px 18px 20px;gap:16px}
  .page-chapter .rp-unlock-zone .rp-ul-offer{font-size:22px}
  .page-chapter .rp-unlock-zone .rp-ul-amt{font-size:36px}
}

/* ---------------------------------------------------------------- motion (app/report-motion.js)
   Every keyframe below starts from a visible state and ends on the rest state already drawn above, so nothing is ever hidden while
   it waits. .m-in is added once, as the thing arrives; --d staggers things that arrive together. Nothing moves for anybody who has
   asked for less motion: the script adds nothing, and these rules are inside the query that asks. */
@media (prefers-reduced-motion:no-preference){
  /* the pages of the report are dealt onto the band, each with its caption */
  .page-chapter .rp-spread .rp-toc>li.m-in{animation:rp-deal .85s cubic-bezier(.2,.8,.2,1) var(--d,0ms) both}
  @keyframes rp-deal{from{translate:0 30px;rotate:1.2deg;opacity:.4}}
  /* and each painting settles into its frame as its page lands */
  .page-chapter .rp-spread .rp-toc>li.m-in .rp-pg-art img{animation:rp-settle 1.4s cubic-bezier(.2,.8,.2,1) var(--d,0ms) both}
  @keyframes rp-settle{from{scale:1.14}}
  /* the free section's page in the strip marks its place */
  .page-chapter .rp-ex-strip.m-in i.is-open{animation:rp-open .9s cubic-bezier(.3,1.4,.5,1) .3s both}
  @keyframes rp-open{0%{scale:1}45%{scale:1.5}100%{scale:1}}
  /* the value band's fans open out from a single stack */
  :is(.page-chapter,.rp-show) .rp-vb-fan.m-in .rp-vb-sheet{animation:rp-fan 1s cubic-bezier(.2,.85,.25,1) both;animation-delay:calc(var(--d,0ms) + 120ms)}
  @keyframes rp-fan{from{rotate:0deg;translate:0 14px}}
  :is(.page-chapter,.rp-show) .rp-vb-fan.m-in .rp-vb-sheet img{animation:rp-settle 1.5s cubic-bezier(.2,.8,.2,1) var(--d,0ms) both}
  /* the closed report: its pages slide out from under the cover, and the price card rises beside it */
  :is(.page-chapter,.rp-show) .rp-ul-book.m-in .rp-ul-leaf{animation:rp-leaf 1.1s cubic-bezier(.2,.85,.25,1) both}
  :is(.page-chapter,.rp-show) .rp-ul-book.m-in .rp-ul-leaf.is-1{animation-delay:.08s}
  :is(.page-chapter,.rp-show) .rp-ul-book.m-in .rp-ul-leaf.is-2{animation-delay:.16s}
  @keyframes rp-leaf{from{rotate:0deg;translate:4% 6px}}
  :is(.page-chapter,.rp-show) .rp-ul-book.m-in .rp-ul-cover{animation:rp-lift .9s cubic-bezier(.2,.8,.2,1) both}
  @keyframes rp-lift{from{translate:0 18px;scale:.97}}
  .page-chapter .rp-unlock-zone .rp-ul-card.m-in{animation:rp-lift 1s cubic-bezier(.2,.8,.2,1) .12s both}
  .page-chapter .rp-unlock-zone .rp-ul-card.m-in .gb-seal{animation:rp-seal 1.2s cubic-bezier(.2,.9,.3,1.15) .5s both}  @keyframes rp-seal{from{rotate:-40deg;scale:.8}}

  /* THE READER'S OWN RESULT, ARRIVING. The free result's chart: each dot lands where it already stands (its place never moves, so
     the chart is never wrong for a frame), each bar grows out along its own track. */
  .page-chapter .rp-free-zone .rp-chart.m-in :is(.pr-plot-track i,.fc-dot,.sf-you,.pl-gap-dot){animation:rp-land .8s cubic-bezier(.3,1.45,.5,1) both}
  @keyframes rp-land{0%{scale:2}100%{scale:1}}
  .page-chapter .rp-free-zone .rp-chart.m-in :is(.pr-bar-t i,.ws-fill){transform-origin:0 50%;animation:rp-grow 1s cubic-bezier(.2,.8,.2,1) both}
  @keyframes rp-grow{from{scale:.05 1}}
  .page-chapter .rp-free-zone .rp-chart.m-in .pl-gap-line{transform-origin:50% 50%;animation:rp-grow .9s cubic-bezier(.2,.8,.2,1) .25s both}
  .page-chapter .rp-free-zone .rp-chart.m-in :is(.pr-plot-row,.pr-bar,.ws-bar,.fc-row,.sf-row,.pl-gap-row):nth-child(2) :is(i,.fc-dot,.sf-you,.pl-gap-dot,.ws-fill){animation-delay:.09s}
  .page-chapter .rp-free-zone .rp-chart.m-in :is(.pr-plot-row,.pr-bar,.ws-bar,.fc-row,.sf-row,.pl-gap-row):nth-child(3) :is(i,.fc-dot,.sf-you,.pl-gap-dot,.ws-fill){animation-delay:.18s}
  .page-chapter .rp-free-zone .rp-chart.m-in :is(.pr-plot-row,.pr-bar,.ws-bar,.fc-row,.sf-row,.pl-gap-row):nth-child(4) :is(i,.fc-dot,.sf-you,.pl-gap-dot,.ws-fill){animation-delay:.27s}
  .page-chapter .rp-free-zone .rp-chart.m-in :is(.pr-plot-row,.pr-bar,.ws-bar,.fc-row,.sf-row,.pl-gap-row):nth-child(5) :is(i,.fc-dot,.sf-you,.pl-gap-dot,.ws-fill){animation-delay:.36s}
  .page-chapter .rp-free-zone .rp-chart.m-in :is(.pr-plot-row,.pr-bar,.ws-bar,.fc-row,.sf-row,.pl-gap-row):nth-child(6) :is(i,.fc-dot,.sf-you,.pl-gap-dot,.ws-fill){animation-delay:.45s}
  .page-chapter .rp-free-zone .rp-chart.m-in :is(.pr-plot-row,.pr-bar,.ws-bar,.fc-row,.sf-row,.pl-gap-row):nth-child(7) :is(i,.fc-dot,.sf-you,.pl-gap-dot,.ws-fill){animation-delay:.54s}

  /* THE HERO'S PAINTING DRIFTS, slowly, only while it is on screen (.is-live). It starts and ends on the picture as it rests. */
  .page-chapter .rp-drift img{animation:rp-drift 30s ease-in-out infinite;animation-play-state:paused}
  .page-chapter .rp-drift.is-live img{animation-play-state:running}
  @keyframes rp-drift{0%,100%{scale:1;translate:0 0}50%{scale:1.075;translate:-1.6% -1.1%}}
}
@media print{
  :is(.page-chapter,.rp-show) .rp-vb-zone{display:none}
}


/* ===== 39-report-showcase.css ===== */
/* ==========================================================================
   39-report-showcase.css · owner: results track · Sep 26, 2026
   THE PUBLIC PREVIEWS OF THE FULL REPORTS: the home page's look inside, /unlock/'s report cards and each paid assessment page
   (src/site/report-showcase.mjs). Wayne, Sep 26, 2026: "the previews of the full reports seem weak. like it's actually a lot less
   visually appealing than the actual report. i would like to see improvement, make it look beautiful, with animation, visually
   stunning features, etc."

   ONE LOOK WITH A READER'S OWN PREVIEW. The pieces are the preview's (39-report-preview.css, whose rules read
   :is(.page-chapter,.rp-show)): the drawn page, the closed report, the fan of paintings. This file only lays them out on each page,
   adds the two pieces the preview has no need of (the row of every page, .rp-strip, and the contents with links, .rp-plan), and
   brings them in with the preview's own keyframes.

   EVERYTHING HERE IS COMPLETE AT REST, as there: nothing is hidden until a script runs, every keyframe starts from a visible state
   and ends where the rest state already is, transform and opacity only, and nothing moves for anybody who asked for less motion
   (app/report-motion.js armShowcase adds nothing, and every animation below is inside the query that asks for motion).
   ========================================================================== */

/* ---------------------------------------------------------------- the sample's tag: every drawing of the sample says so */
.rp-show .rp-show-tag{display:inline-flex;align-items:center;padding:4px 11px;border-radius:var(--r-pill);background:var(--amber);
  font:800 10px/1.3 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--ink);white-space:nowrap}

/* ---------------------------------------------------------------- the report, closed (report-showcase.mjs sampleBook)
   The preview's own closed report (app/report-page.js bookHtml), under the sample's name, as a link to the sample. Its box is the
   cover's width over .52 and tall enough for the fanned pages below the cover. */
.rp-show .rp-book{position:relative;display:block;width:100%;text-decoration:none;color:inherit}
.rp-show .rp-book .rp-ul-book{position:relative;display:block;width:100%;aspect-ratio:100 / 76}
.rp-show .rp-book .rp-show-tag{position:absolute;left:-10px;top:-13px;z-index:6;box-shadow:0 2px 6px rgba(13,20,32,.16)}
.rp-show .rp-book .rp-ul-cover{box-shadow:0 2px 3px rgba(13,20,32,.1),0 30px 50px -26px rgba(13,20,32,.5)}
.rp-show .rp-book .rp-ul-leaf .rp-pg-sheet{box-shadow:0 1px 2px rgba(13,20,32,.1),0 20px 38px -22px rgba(13,20,32,.45)}
.rp-show .rp-book .rp-ul-cover,.rp-show .rp-book .rp-ul-leaf{transition:rotate .45s cubic-bezier(.2,.8,.2,1),translate .45s cubic-bezier(.2,.8,.2,1)}
@media (hover:hover){
  /* under the pointer the report opens a little further: the cover lifts and its pages spread */
  .rp-show .rp-book:hover .rp-ul-cover{translate:0 -6px}
  .rp-show .rp-book:hover .rp-ul-leaf.is-0{rotate:6deg;translate:36% 2px}
  .rp-show .rp-book:hover .rp-ul-leaf.is-1{rotate:13deg;translate:72% 18px}
  .rp-show .rp-book:hover .rp-ul-leaf.is-2{rotate:20deg;translate:106% 44px}
}

/* ---------------------------------------------------------------- every page of the report in one row (sampleStrip)
   Each page is the preview's drawn page at its usual size (120px), scaled down whole with zoom, so its painting and its outlines
   keep their proportions at any size; a page of the type guide is its deck, drawn wider. The parts of the report are the gaps. */
.rp-show .rp-strip{--z:.5;--pg-gap:8px;--part-gap:22px;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:center;gap:14px var(--part-gap);
  text-decoration:none;color:inherit}
.rp-show .rp-strip-part{display:flex;align-items:flex-end;gap:var(--pg-gap);min-width:0}
.rp-show .rp-strip-pg{display:block;flex:none;width:calc(120px * var(--z))}
.rp-show .rp-strip-pg:has(.is-deck){width:calc(255px * var(--z))}
.rp-show .rp-strip-pg .rp-pg{width:120px;zoom:var(--z)}
.rp-show .rp-strip-pg .rp-pg.is-deck{width:255px}
.rp-show .rp-strip-pg .rp-pg-sheet{border-radius:5px;box-shadow:0 1px 2px rgba(13,20,32,.08),0 14px 22px -14px rgba(13,20,32,.4)}
.rp-show .rp-strip-pg .rp-pg-deck{padding:18px 16px}
.rp-show .rp-strip-pg .rp-pg-deck b{height:19px}
/* the report's opening, its cover, stands a little apart from the sections */
.rp-show .rp-strip-part.is-cover .rp-pg-sheet{box-shadow:0 0 0 2px #fff,0 1px 2px rgba(13,20,32,.08),0 14px 22px -14px rgba(13,20,32,.4)}
@media (hover:hover){
  .rp-show .rp-strip-pg .rp-pg{transition:translate .3s cubic-bezier(.2,.8,.2,1)}
  .rp-show .rp-strip:hover .rp-strip-pg:hover .rp-pg{translate:0 -6px}
}

/* STACKED (.is-stacked): the same pages laid over each other like a spread-out stack, the cover on top at the left and each page
   after it showing the next --step of itself, for a card too narrow for a row. The guide's deck is drawn page-shaped here. */
.rp-show .rp-strip.is-stacked{--z:.42;--step:20px;flex-wrap:nowrap;justify-content:flex-start;gap:0}
.rp-show .rp-strip.is-stacked .rp-strip-part{gap:0}
.rp-show .rp-strip.is-stacked .rp-strip-pg{position:relative;z-index:calc(60 - var(--k));margin-left:calc(var(--step) - 120px * var(--z))}
.rp-show .rp-strip.is-stacked .rp-strip-part:first-child .rp-strip-pg:first-child{margin-left:0}
.rp-show .rp-strip.is-stacked .rp-strip-pg:has(.is-deck){width:calc(120px * var(--z))}
.rp-show .rp-strip.is-stacked .rp-strip-pg .rp-pg.is-deck{width:120px}
.rp-show .rp-strip.is-stacked .rp-pg.is-deck .rp-pg-sheet{aspect-ratio:3 / 4}
.rp-show .rp-strip.is-stacked .rp-pg.is-deck .rp-pg-deck{grid-template-columns:1fr;gap:6px;padding:16px 14px}
.rp-show .rp-strip.is-stacked .rp-pg.is-deck .rp-pg-deck b:nth-child(n+7){display:none}
.rp-show .rp-strip.is-stacked .rp-pg.is-long::before,.rp-show .rp-strip.is-stacked .rp-pg.is-long::after,
.rp-show .rp-strip.is-stacked .rp-pg.is-deck::before,.rp-show .rp-strip.is-stacked .rp-pg.is-deck::after{display:none}
.rp-show .rp-strip.is-stacked .rp-strip-pg .rp-pg-sheet{box-shadow:0 1px 2px rgba(13,20,32,.1),6px 0 14px -8px rgba(13,20,32,.35)}
@media (hover:hover){
  .rp-show .rp-strip.is-stacked:hover .rp-strip-pg:hover .rp-pg{translate:0 -8px}
}

/* ---------------------------------------------------------------- the contents, drawn, with links (samplePlan)
   Wide: the report's pages laid out like the preview's contents, each over its title and reading time, the part's name on a rule
   over the first page of its run. Narrow: a table of contents, each row a small page beside its title and time, each part's name
   over its rows. */
.rp-show .rp-plan{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:50px 16px;margin:0;padding:34px 0 0}
.rp-show .rp-plan-item{position:relative;min-width:0}
.rp-show .rp-plan-item:has(.is-deck){grid-column:span 2}
.rp-show .rp-plan-part{position:absolute;left:0;right:0;bottom:100%;margin:0 0 10px;padding:0 0 7px;border-bottom:2px solid var(--blue-mark);
  font:800 9.5px/1.35 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--blue-ink)}
.rp-show .rp-plan-link{display:flex;flex-direction:column;text-decoration:none;color:var(--ink);border-radius:6px}
.rp-show .rp-plan-link .rp-pg{order:-1;margin-bottom:11px}
.rp-show .rp-plan-t{display:block;font:400 14.5px/1.28 var(--display);letter-spacing:-.006em;hyphens:manual;overflow-wrap:normal}
.rp-show .rp-plan-m{display:block;margin-top:5px;font:500 11.5px/1.4 var(--body);color:var(--muted)}
.rp-show .rp-plan-link:hover .rp-plan-t{color:var(--cobalt);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.rp-show .rp-plan-link:focus-visible{outline:none}
.rp-show .rp-plan-link:focus-visible .rp-pg-sheet{outline:2px solid var(--blue-mark);outline-offset:3px}
@media (hover:hover){
  .rp-show .rp-plan-link:hover .rp-pg{translate:0 -5px}
  .rp-show .rp-plan-link:hover .rp-pg-sheet{box-shadow:0 1px 2px rgba(13,20,32,.06),0 20px 34px -16px rgba(13,20,32,.34)}
}
@media (max-width:720px){
  .rp-show .rp-plan{grid-template-columns:minmax(0,1fr);gap:0;padding:0}
  .rp-show .rp-plan-item:has(.is-deck){grid-column:auto}
  .rp-show .rp-plan-part{position:static;margin:18px 0 4px}
  .rp-show .rp-plan-item:first-child .rp-plan-part{margin-top:0}
  .rp-show .rp-plan-link{display:grid;grid-template-columns:44px minmax(0,1fr);grid-template-rows:auto auto;column-gap:14px;align-content:center;
    padding:9px 0;border-bottom:1px solid var(--line);border-radius:0}
  .rp-show .rp-plan-link .rp-pg{grid-row:1 / span 2;grid-column:1;align-self:center;width:120px;margin:0;zoom:.3667}
  .rp-show .rp-plan-link .rp-pg.is-deck{width:120px}
  .rp-show .rp-plan-link .rp-pg.is-deck .rp-pg-sheet{aspect-ratio:3 / 4}
  .rp-show .rp-plan-link .rp-pg-deck{grid-template-columns:1fr;gap:5px;padding:14px 12px}
  .rp-show .rp-plan-link .rp-pg-deck b:nth-child(n+7){display:none}
  .rp-show .rp-plan-link .rp-pg.is-long::before,.rp-show .rp-plan-link .rp-pg.is-long::after,
  .rp-show .rp-plan-link .rp-pg.is-deck::before,.rp-show .rp-plan-link .rp-pg.is-deck::after{display:none}
  .rp-show .rp-plan-t{grid-column:2;align-self:end;font-size:16px}
  .rp-show .rp-plan-m{grid-column:2;align-self:start;margin-top:2px}
}

/* ---------------------------------------------------------------- the value cards, where nothing is locked (sampleValues) */
.rp-show .rp-vb-secs svg{color:var(--blue-mark)}

/* ================================================================ the home page: "A look inside" (src/pages/home.mjs) */
/* the sample report, closed, where the envelope painting stood; the sample card lies over the edge of its fanned pages */
.page-home .hm-proof-row.has-book{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
/* its own stacking context, so its fanned pages go under the card and never over it */
.page-home .hm-book{position:relative;z-index:0;grid-column:1;grid-row:1;align-self:center;max-width:452px;margin:26px 0 30px 4px}
.page-home .hm-proof-row.has-book .hm-sample{margin-left:-26px}
.page-home .hm-book .rp-ul-cover-t{font-size:18px}
@media (max-width:860px){ .page-home .hm-book .rp-ul-cover-t{font-size:15px} }
/* the three pages: sheets of the report on the band, lifting under the pointer */
.page-home .rp-show .hm-sheet{border-radius:8px;box-shadow:0 1px 2px rgba(8,63,112,.08),0 24px 44px -28px rgba(8,63,112,.55)}
@media (hover:hover){
  .page-home .rp-show .hm-sheet{transition:translate .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
  .page-home .rp-show .hm-page:hover .hm-sheet{translate:0 -6px;box-shadow:0 1px 2px rgba(8,63,112,.08),0 32px 50px -26px rgba(8,63,112,.55)}
}
/* every page of the sample report, under the three */
.page-home .hm-plan{margin:46px auto 0;text-align:center}
.page-home .hm-plan-lab{margin:0 0 18px;font:800 11px/1.4 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--blue-ink)}
.page-home .hm-strip{--z:.52}
@media (max-width:1100px){
  .page-home .hm-strip{--z:.42;--pg-gap:6px;--part-gap:16px}
}
@media (max-width:860px){
  .page-home .hm-proof-row.has-book{grid-template-columns:minmax(0,1fr)}
  .page-home .hm-book{grid-column:1;grid-row:1;justify-self:center;width:min(100%,380px);margin:18px auto 6px}
  .page-home .hm-proof-row.has-book .hm-sample{grid-column:1;grid-row:2;margin:-8px 10px 0}
  .page-home .hm-strip{--z:.34;--pg-gap:5px;--part-gap:12px}
}
@media (max-width:720px){
  .page-home .hm-book{width:min(88%,320px)}
  .page-home .hm-plan{margin-top:34px}
  .page-home .hm-strip{--z:.3;--pg-gap:4px;--part-gap:10px;row-gap:12px}
}

/* ================================================================ /unlock/: each report's card (src/pages/unlock.mjs) */
/* the three photographed pages, now placed with the individual properties, so an arrival can deal them out of one stack */
.page-unlock .ul-fan-pages img:nth-child(1){transform:none;rotate:-6deg}
.page-unlock .ul-fan-pages img:nth-child(2){transform:none;rotate:5deg}
.page-unlock .ul-fan-pages img:last-child{transform:none;rotate:-1.5deg}
@media (hover:hover){
  .page-unlock .ul-fan-pages img{transition:rotate .45s cubic-bezier(.2,.8,.2,1),translate .45s cubic-bezier(.2,.8,.2,1)}
  .page-unlock .ul-fan:hover .ul-fan-pages img:nth-child(1){rotate:-9deg;translate:-5% 2%}
  .page-unlock .ul-fan:hover .ul-fan-pages img:nth-child(2){rotate:8deg;translate:5% -2%}
  .page-unlock .ul-fan:hover .ul-fan-pages img:last-child{translate:0 -3%}
}
/* the whole sample report in one row, with its figures */
.page-unlock .ul-plan{display:grid;justify-items:start;gap:14px;margin-top:18px;padding:18px 0 2px;border-top:1px solid var(--line)}
.page-unlock .ul-strip{--z:.38;--step:17px}
.page-unlock .ul-plan-size{margin:0;font:600 13px/1.5 var(--body);color:var(--muted)}
.page-unlock .ul-plan-k{margin-right:6px;font:800 10px/1.5 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--amber-text)}

/* ================================================================ each paid assessment page (src/pages/assessments.mjs) */
/* "Why take it here?": the sample report, closed, where a painting stood */
/* the pages fan out past the book's own box to the right, so the box is narrower than its column and sits to its left */
.page-take .tp-why-book{align-self:center;justify-self:start;width:88%;max-width:360px;margin:18px 0 24px}
/* "What the full report shows about you": the value cards, then the contents */
.page-take .tp-report-head{max-width:640px}
.page-take .tp-report-head .rp-show-tag{margin-bottom:14px}
.page-take .tp-report-line{margin-top:10px;font-size:15.5px;line-height:1.55;color:var(--muted)}
.page-take .tp-report .rp-vb{max-width:none;margin:34px 0 0;gap:34px 30px}
.page-take .tp-report .rp-vb-fan{--fh:200px}
.page-take .tp-report .rp-vb-t{font-size:19.5px}
/* the contents, drawn, on a grey band of its own under the card (no painting twice in one band, test/one-painting.test.mjs), as a
   reader's own locked preview lays its pages on grey: every page of the sample report, like proofs on a table */
.page-take .tp-plan-zone{padding-block:64px 72px}
.page-take .tp-plan-tag{margin-bottom:14px}
.page-take .tp-report-plan-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;margin-bottom:26px}
.page-take .tp-report-plan-h{margin:0;font:400 24px/1.2 var(--display);letter-spacing:-.012em}
.page-take .tp-report-size{margin:0;font:600 13.5px/1.5 var(--body);color:var(--muted)}
.page-take .tp-report-foot{margin-top:30px}
@media (max-width:1100px){
  .page-take .tp-report .rp-vb{gap:30px 22px}
  .page-take .tp-report .rp-vb-fan{--fh:176px}
  .page-take .tp-report .rp-vb-t{font-size:18px}
}
@media (max-width:860px){
  .page-take .tp-report .rp-vb{grid-template-columns:minmax(0,1fr);max-width:520px;gap:40px}
  .page-take .tp-report .rp-vb-fan{--fh:196px}
}
@media (max-width:820px){
  /* the cards stack here (21-take.css), each picture above its words, and the closed report takes the picture's place */
  .page-take .tp-card-split .tp-why-book{order:-1;width:86%;max-width:340px;margin:10px 0 12px}
}
@media (max-width:720px){
  .page-take .tp-card-split .tp-why-book{max-width:300px}
  .page-take .tp-report .rp-vb-fan{--fh:178px}
  .page-take .tp-plan-zone{padding-block:44px 52px}
  .page-take .tp-report-plan-head{margin-bottom:16px}
}

/* ---------------------------------------------------------------- motion (app/report-motion.js armShowcase)
   The preview's keyframes (rp-deal, rp-settle, rp-lift, rp-land, rp-fan, rp-leaf, in 39-report-preview.css), plus three of this
   file's own below. The closed report and the fans of paintings arrive by the preview's own rules, which read .rp-show as well. */
@media (prefers-reduced-motion:no-preference){
  /* the pages of the report are dealt onto the page, one after another, each painting settling into its frame */
  .rp-show .rp-strip.m-in .rp-strip-pg{animation:rp-deal .8s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--k,0) * 45ms)}
  .rp-show .rp-strip.m-in .rp-pg-art img{animation:rp-settle 1.3s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--k,0) * 45ms)}
  /* a stacked row spreads out from under its cover, as the closed report's pages slide out from under its own */
  .rp-show .rp-strip.is-stacked.m-in .rp-strip-pg{animation:rp-spread 1.1s cubic-bezier(.2,.85,.25,1) both;animation-delay:calc(120ms + var(--k,0) * 22ms)}
  @keyframes rp-spread{from{translate:calc(var(--k,0) * var(--step,20px) * -1) 0}}
  .rp-show .rp-plan>li.m-in{animation:rp-deal .85s cubic-bezier(.2,.8,.2,1) var(--d,0ms) both}
  .rp-show .rp-plan>li.m-in .rp-pg-art img{animation:rp-settle 1.4s cubic-bezier(.2,.8,.2,1) var(--d,0ms) both}

  /* the home page: the sample card rises beside the report, and its three pages are dealt below */
  .page-home .rp-show .hm-sample.m-in{animation:rp-lift 1s cubic-bezier(.2,.8,.2,1) .12s both}
  .page-home .rp-show .hm-page.m-in{animation:rp-deal .9s cubic-bezier(.2,.8,.2,1) var(--d,0ms) both}
  .page-home .rp-show .hm-page.m-in .hm-sheet img{animation:rp-settle 1.4s cubic-bezier(.2,.8,.2,1) var(--d,0ms) both}
  /* THE SAMPLE'S CHART DRAWS ITSELF IN: the shaded band opens out from its middle, then each score lands where it stands, in the
     order the rows read, and its figure settles beside it. A mark never moves from its place, so the chart is never wrong. */
  .rp-show .hm-fig.m-in :is(.hm-band,.hm-dot){transform-box:fill-box;transform-origin:50% 50%}
  .rp-show .hm-fig.m-in .hm-band{animation:rp-band 1s cubic-bezier(.2,.8,.2,1) both}
  @keyframes rp-band{from{scale:.3 1}}
  .rp-show .hm-fig.m-in .hm-dot{animation:rp-land .8s cubic-bezier(.3,1.45,.5,1) both;animation-delay:calc(.3s + var(--i,0) * 110ms)}
  .rp-show .hm-fig.m-in .hm-val{animation:rp-rise .7s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.38s + var(--i,0) * 110ms)}
  @keyframes rp-rise{from{opacity:.35;translate:-8px 0}}

  /* /unlock/: each card's three pages are dealt out of one stack into their fan */
  .page-unlock .rp-show .ul-fan-pages.m-in img{animation:1s cubic-bezier(.2,.85,.25,1) both}
  .page-unlock .rp-show .ul-fan-pages.m-in img:nth-child(1){animation-name:ul-deal-a;animation-delay:.1s}
  .page-unlock .rp-show .ul-fan-pages.m-in img:nth-child(2){animation-name:ul-deal-b;animation-delay:.18s}
  .page-unlock .rp-show .ul-fan-pages.m-in img:last-child{animation-name:ul-deal-c}
  @keyframes ul-deal-a{from{rotate:-1.5deg;translate:27% 25%}}
  @keyframes ul-deal-b{from{rotate:-1.5deg;translate:-29% 40%}}
  @keyframes ul-deal-c{from{translate:0 8%}}
}
@media print{
  .rp-show :is(.rp-strip,.rp-book){break-inside:avoid}
}


/* ===== 39-score-anchors.css ===== */
/* ==========================================================================
   39-score-anchors.css · owner: the report's design layer (app/item-anchors.js)

   "HOW PEOPLE ANSWERED THE SAME STATEMENT" (D124, Sep 25, 2026). A small sheet directly under a report's score panel, on the
   same band: one or two rows, each a share of the named comparison group ("74" over "in 100", with a thin bar filled that far)
   beside the line that says what they answered and what the reader answered. It is the panel's own sheet made quieter (the same
   white ground, hairline and corner, a smaller figure and no chart), so the two read as a pair and the panel stays the lead.
   The bar is the one mark: blue for a share of people, the flagship's colour for its hundred dots. Nothing here is tinted by
   where the reader landed, so a hard score's sheet looks exactly like any other.
   ========================================================================== */

:is(.page-results,.page-chapter) .an{margin-top:14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px 30px 22px}
:is(.page-results,.page-chapter) .an-h{margin:0 0 4px;font:800 12px/1.4 var(--body);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
:is(.page-results,.page-chapter) .an-list{list-style:none;margin:0;padding:0}
/* the figure column is the panel's figure column, narrowed: the number, its unit under it, the bar under both */
:is(.page-results,.page-chapter) .an-row{display:grid;grid-template-columns:96px minmax(0,1fr);gap:0 28px;align-items:start;padding:16px 0 0}
:is(.page-results,.page-chapter) .an-row+.an-row{margin-top:16px;border-top:1px solid var(--line)}
:is(.page-results,.page-chapter) .an-fig{min-width:0}
:is(.page-results,.page-chapter) .an-n{margin:0;font:800 34px/.94 var(--body);letter-spacing:-.04em;color:var(--blue-ink);font-variant-numeric:tabular-nums}
:is(.page-results,.page-chapter) .an-unit{margin:4px 0 0;font:600 13px/1.2 var(--body);color:var(--muted)}
:is(.page-results,.page-chapter) .an-bar{position:relative;height:6px;margin-top:10px;border-radius:3px;background:var(--line);overflow:hidden}
:is(.page-results,.page-chapter) .an-bar>i{position:absolute;left:0;top:0;bottom:0;display:block;border-radius:3px;background:var(--blue-mark)}
:is(.page-results,.page-chapter) .an-text{min-width:0;max-width:66ch}
/* Sep 27, 2026: each row opens on OUR statement, the one the reader answered, in quotation marks; the share line under it says how
   many of the group gave which answer, and quotes nothing (the group's own wording is only in the fold's note). */
:is(.page-results,.page-chapter) .an-q{margin:0;font:500 15px/1.45 var(--body);color:var(--ink)}
:is(.page-results,.page-chapter) .an-line{margin:0;font:700 15px/1.4 var(--body);color:var(--ink)}
:is(.page-results,.page-chapter) .an-q+.an-line{margin-top:4px}
:is(.page-results,.page-chapter) .an-you{margin:6px 0 0;font:400 14.5px/1.5 var(--body);color:var(--muted)}
:is(.page-results,.page-chapter) .an-note{margin:18px 0 0;padding-top:14px;border-top:1px solid var(--line);font:400 13px/1.5 var(--body);color:var(--muted);max-width:78ch}
/* Sep 25, 2026: the note folds under the rows (since Sep 27, 2026 behind "About this comparison"), so the fold draws the line and
   sets the type. */
:is(.page-results,.page-chapter) .an-fold{margin-top:16px;padding-top:12px;border-top:1px solid var(--line)}
:is(.page-results,.page-chapter) .an-fold .an-note{margin:0;padding:0;border:0;font:inherit;color:inherit}

/* 390px: the sheet takes the panel's phone padding, and the figure column narrows so the words keep their measure */
@media (max-width:720px){
  :is(.page-results,.page-chapter) .an{margin-top:12px;padding:16px 18px 18px}
  :is(.page-results,.page-chapter) .an-row{grid-template-columns:64px minmax(0,1fr);gap:0 16px;padding-top:14px}
  :is(.page-results,.page-chapter) .an-row+.an-row{margin-top:14px}
  :is(.page-results,.page-chapter) .an-n{font-size:28px}
  :is(.page-results,.page-chapter) .an-unit{font-size:12px}
  :is(.page-results,.page-chapter) .an-q,:is(.page-results,.page-chapter) .an-line{font-size:14.5px}
  :is(.page-results,.page-chapter) .an-you{font-size:14px}
}
@media (prefers-contrast:more){
  :is(.page-results,.page-chapter) .an{border-color:var(--ink)}
  :is(.page-results,.page-chapter) .an-bar{background:var(--grey)}
}
@media print{
  :is(.page-results,.page-chapter) .an{break-inside:avoid}
}


/* ===== 39-score-panel.css ===== */
/* ==========================================================================
   39-score-panel.css · owner: the report's design layer (app/score-panel.js)

   THE SCORE PANEL, SHARED (docs/REPORT_GAP.md R8, Sep 24, 2026). One sheet that says where the reader landed, at the top of the
   thing it scores: the band word, the figure, a picture of it, the finding, a chart, and the answers behind the number. It was
   built for the Personality Standard report (D114) and lived in 39-report-editorial.css; every rule for the sheet moved here
   unchanged and in the same order, so the flagship draws exactly as it did. The pieces only the other reports use (a figure with
   no dots, the reader's place on a scale, a published share for each answer, the stacked form for a half-width card) follow the
   moved rules, under their own heading.

   --rt-fig and --rt-lab are declared on .rp-full-sec by the editorial layer. They are declared again on the sheet, with the same
   values, so a panel works outside a full-report section too (Self-esteem's free result, the five pillars' cards).
   ========================================================================== */

:is(.page-results,.page-chapter) .rt-score{--rt-fig:clamp(34px,3.8vw,52px);--rt-lab:12px}

/* ---------------------------------------------------------------- the sheet (moved from 39-report-editorial.css) */
:is(.page-results,.page-chapter) .rt-score{margin-top:26px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:26px 30px 28px}
:is(.page-results,.page-chapter) .rt-score-top{display:grid;grid-template-columns:minmax(0,230px) minmax(0,1fr);gap:0 52px;align-items:start}
:is(.page-results,.page-chapter) .rt-score-top>*{min-width:0}

/* the figure and its hundred dots: one number, said twice, in the column that is about the number */
:is(.page-results,.page-chapter) .rt-score .big-score{margin-top:12px}
:is(.page-results,.page-chapter) .rt-score .big-score-n{font-size:var(--rt-fig);line-height:.94}
:is(.page-results,.page-chapter) .rt-score .big-score-num sup{font-size:calc(var(--rt-fig) * .36);margin-top:3px}
:is(.page-results,.page-chapter) .rt-score .dots100{margin-top:16px;max-width:none;gap:3px}
:is(.page-results,.page-chapter) .rt-score .dots100 i{background:var(--surface);border-color:var(--grey)}
:is(.page-results,.page-chapter) .rt-score .dots100 i.on{background:var(--blue-mark);border-color:var(--blue-mark)}
:is(.page-results,.page-chapter) .rt-score .dots100.m-wait i.on{background:var(--surface);border-color:var(--grey)}
:is(.page-results,.page-chapter) .rt-score .big-score-src{margin-top:12px}
:is(.page-results,.page-chapter) .rt-score .meter{margin-top:12px}

/* the finding, then the curve */
:is(.page-results,.page-chapter) .rt-finding{margin:0 0 6px;font:700 15px/1.35 var(--body);color:var(--ink)}
:is(.page-results,.page-chapter) .rt-score-chart .hist{margin-top:0}
:is(.page-results,.page-chapter) .rt-score-chart .hist-plot{padding-top:24px}
/* --hist-h is the columns' height, which the reader's rule below runs the length of. The rule used to stop 26px short of the
   plot's foot, the height of the strip under the axis, and that strip grows when the typical range's words take two lines. */
:is(.page-results,.page-chapter) .rt-score-chart .hist{--hist-h:168px}
:is(.page-results,.page-chapter) .rt-score-chart .hist-cols{height:var(--hist-h);gap:1px;border-bottom-color:var(--ref-deep)}
:is(.page-results,.page-chapter) .rt-score-chart .hist-cols{position:relative;z-index:1}
:is(.page-results,.page-chapter) .rt-score-chart .hist-cols>i{border-radius:0;background:var(--grey)}
:is(.page-results,.page-chapter) .rt-score-chart .hist-cols>i.typ{background:var(--grey)}
:is(.page-results,.page-chapter) .rt-score-chart .hist-cols>i.you{background:var(--blue-deep)}
/* the middle half of people is a bracket under the axis, not a wash behind the bars. A wash was tried first and it can only show
   in the gaps above the columns, so it read as a smudge across the top of the curve rather than as a range. The bracket says the
   same thing exactly, and the silhouette stays one shape. */
:is(.page-results,.page-chapter) .rt-score-chart .hist-typ{border-top-width:2px;padding-top:7px}
/* the reader's place: a rule down the whole plot, a dot on top of it, and the label above that. It is the point of the chart, so
   it is the one thing on it that cannot be missed. left is clamped so the label still fits at the 1st and the 99th percentile. */
:is(.page-results,.page-chapter) .rt-score-chart .hist-youline{position:absolute;left:clamp(0px,var(--x),100%);top:24px;height:var(--hist-h);width:2px;
  margin-left:-1px;background:var(--blue-deep);border-radius:1px;pointer-events:none}
:is(.page-results,.page-chapter) .rt-score-chart .hist-youline::before{content:"";position:absolute;left:50%;top:-4px;width:8px;height:8px;
  margin-left:-4px;border-radius:50%;background:var(--blue-deep)}
/* The label is centred on the rule, and held far enough from either end that it can never be cut off by the sheet. A reader at
   the 1st or the 99th percentile is exactly the reader who most needs to see where they landed, so the one place this may
   drift a few pixels off its own rule is the place it must still be readable. */
:is(.page-results,.page-chapter) .rt-score-chart .hist-you{left:clamp(32px,var(--x),calc(100% - 32px));transform:translateX(-50%);font-size:12.5px;color:var(--blue-ink)}
:is(.page-results,.page-chapter) .rt-score-chart .hist-you::after{display:none}
:is(.page-results,.page-chapter) .rt-score-chart .hist-typ{color:var(--blue-ink)}
:is(.page-results,.page-chapter) .rt-score-chart .hist-end{color:var(--muted)}

/* the footer strip: the ten answers and what they averaged, composed as two columns that start on one line rather than a row of
   squares with a sentence stranded at the far end of it */
:is(.page-results,.page-chapter) .rt-score-foot{margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}
:is(.page-results,.page-chapter) .rt-foot-h{margin:0 0 14px;font:800 var(--rt-lab)/1.4 var(--body);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
/* ONE COLUMN, NOT TWO. The version before this stood the squares in a left column and the average sentence in a right one, and
   Wayne's screenshot of it is the reason this band was rebuilt at all: "the ten answer squares on the left and one orphan
   sentence floating at the far right with a hole between them". Two columns of unequal height always leave that hole. The strip
   reads down instead, capped at a footnote's measure so it stays a footnote. */
/* The average leads and the squares are the evidence under it, so the strip reads statement-then-working and nothing trails off
   the end of it. */
:is(.page-results,.page-chapter) .rt-score-foot .rt-foot-lead{margin:0 0 14px;font-size:15px;font-weight:600;max-width:64ch}
:is(.page-results,.page-chapter) .rt-score-foot .as{margin-top:0;max-width:64ch}
:is(.page-results,.page-chapter) .rt-score-foot .as-out{margin-bottom:0}

/* ---------------------------------------------------------------- the two lines a scale opens on (Sep 27, 2026)
   What the scale covers, then where the reader's score falls against the named group, over the panel (app/score-panel.js
   scaleIntro). Wayne: "the explanation of the score should be first, then the analysis". The first line is the plain gloss, set
   quiet like a section's lede; the second is the result, set in ink at the panel's own finding weight, so the eye goes from what
   the scale is, to where the reader landed, to the panel that draws it. Both keep a reading measure on a wide screen. */
/* The gap under the two lines is the intro's own bottom margin: several reports set their panel's top margin to 0 where it used to
   sit straight under the section's head, and a margin of the intro's own holds whatever they set (block margins collapse to it). */
:is(.page-results,.page-chapter) .sp-intro{margin:22px 0 24px;max-width:68ch}
:is(.page-results,.page-chapter) .sp-about{margin:0;font:400 16.5px/1.6 var(--body);color:var(--muted)}
:is(.page-results,.page-chapter) .sp-level{margin:12px 0 0;font:700 17px/1.45 var(--body);color:var(--ink)}

/* 390px (moved): the columns fall to one in the order a reader wants them, the figure and then the chart. */
@media (max-width:860px){
  :is(.page-results,.page-chapter) .rt-score-top{grid-template-columns:minmax(0,1fr);gap:24px 0}
}
@media (max-width:720px){
  /* 390px is where the temptation to flatten the curve is strongest and where it matters most: the plot keeps 130px, which over
     a 300px column is still a bell rather than a smear, and the dots and squares come down to fit instead of the chart. */
  :is(.page-results,.page-chapter) .rt-score{margin-top:20px;padding:20px 18px 22px}
  :is(.page-results,.page-chapter) .rt-score-chart .hist{--hist-h:130px}
  :is(.page-results,.page-chapter) .rt-score .dots100{gap:2px}
  :is(.page-results,.page-chapter) .rt-score-foot{margin-top:20px;padding-top:16px}
  :is(.page-results,.page-chapter) .rt-score-foot .score-block-text{max-width:none}
}
@media (prefers-contrast:more){
  :is(.page-results,.page-chapter) .rt-score{border-color:var(--ink)}
  :is(.page-results,.page-chapter) .rt-score-chart .hist-cols>i{background:var(--ref-deep)}
}

/* ==========================================================================
   THE PIECES THE OTHER REPORTS USE (app/score-panel.js). None of these selectors reaches anything the flagship draws.
   The colour code is the flagship's: blue is the reader, grey is everyone else, a blue wash is a stretch of the scale the source
   defines. Nothing here draws a curve or a column of people, because none of these reports has a distribution to draw
   (except the general-health chart, which draws exactly the shares CDC published).
   ========================================================================== */

/* a title over a panel that has no masthead of its own (a panel inside one of the five pillars' cards) */
:is(.page-results,.page-chapter) .rt-score .sp-title{margin:0 0 10px;font:700 15px/1.3 var(--body);color:var(--ink)}

/* a figure with no dots: the reader's own number on its own scale, the same size as the flagship's percentile */
:is(.page-results,.page-chapter) .rt-score .sp-n{font-size:var(--rt-fig);line-height:.94;letter-spacing:-.04em}
:is(.page-results,.page-chapter) .rt-score .sp-n.is-word{letter-spacing:-.025em}
:is(.page-results,.page-chapter) .rt-score .sp-fig .big-score-cap{max-width:none}

/* the reader's place on the scale. The label over the rule, then the field the rule runs down, then the numbers under the axis
   and, under those, the one stretch the source defines as a bracket, the way the flagship brackets its typical middle. */
:is(.page-results,.page-chapter) .sp-plot{position:relative;padding-top:24px;margin-top:4px}
:is(.page-results,.page-chapter) .sp-you{position:absolute;top:0;left:clamp(32px,var(--x),calc(100% - 32px));transform:translateX(-50%);
  font:800 12.5px/1 var(--body);color:var(--blue-ink);white-space:nowrap}
:is(.page-results,.page-chapter) .sp-field{position:relative;height:108px;background:var(--surface-dim);border-bottom:1px solid var(--ref-deep)}
:is(.page-results,.page-chapter) .sp-field>i{position:absolute;top:0;bottom:0;display:block}
:is(.page-results,.page-chapter) .sp-grid{left:var(--x);width:1px;margin-left:-.5px;background:var(--line)}
/* a stretch the source defines (a typical range, the middle half, the scale's own middle) */
:is(.page-results,.page-chapter) .sp-band{background:var(--blue-wash)}
/* published cut points that divide the whole scale (the ONS bands): quiet alternating grounds, the reader's own band in the wash */
:is(.page-results,.page-chapter) .sp-zone{background:var(--surface-dim);border-right:1px solid var(--line)}
:is(.page-results,.page-chapter) .sp-zone:nth-child(even){background:var(--surface)}
:is(.page-results,.page-chapter) .sp-zone.is-on{background:var(--blue-wash)}
/* one published figure (an average, a median): grey, because it is everyone else, with its label on the side away from the reader */
:is(.page-results,.page-chapter) .sp-mark{left:var(--x);width:2px;margin-left:-1px;background:var(--ref-deep);z-index:1}
/* The label takes the room there is on its side and wraps into it rather than running off the sheet ("UK average, 7.45" at 390px). */
:is(.page-results,.page-chapter) .sp-mark-lab{position:absolute;top:8px;left:var(--x);z-index:2;font:700 12px/1.2 var(--body);color:var(--muted);width:max-content}
:is(.page-results,.page-chapter) .sp-mark-lab.is-r{margin-left:7px;max-width:calc(100% - var(--x) - 10px)}
:is(.page-results,.page-chapter) .sp-mark-lab.is-l{transform:translateX(-100%);margin-left:-7px;max-width:calc(var(--x) - 10px);text-align:right}
/* the reader: the flagship's rule, dot on top, the one mark on the chart that cannot be missed */
:is(.page-results,.page-chapter) .sp-rule{left:var(--x);width:2px;margin-left:-1px;background:var(--blue-deep);border-radius:1px;z-index:3}
:is(.page-results,.page-chapter) .sp-rule::before{content:"";position:absolute;left:50%;top:-4px;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--blue-deep)}
/* under the axis */
:is(.page-results,.page-chapter) .sp-under{position:relative;height:24px}
:is(.page-results,.page-chapter) .sp-under:is(.has-bracket,.has-zones){height:50px}
:is(.page-results,.page-chapter) .sp-tick{position:absolute;top:5px;left:var(--x);transform:translateX(-50%);font:700 11.5px/1 var(--body);color:var(--muted);white-space:nowrap}
:is(.page-results,.page-chapter) .sp-tick.is-l{transform:none}
:is(.page-results,.page-chapter) .sp-tick.is-r{transform:translateX(-100%)}
:is(.page-results,.page-chapter) .sp-bracket{position:absolute;top:24px;height:20px;border-top:2px solid var(--blue-mark);
  font:700 11px/1.1 var(--body);color:var(--blue-ink);white-space:nowrap}
:is(.page-results,.page-chapter) .sp-bracket>span{position:absolute;top:6px;left:50%;transform:translateX(-50%)}
:is(.page-results,.page-chapter) .sp-bracket.is-end>span{left:auto;right:0;transform:none}
:is(.page-results,.page-chapter) .sp-bracket.is-start>span{left:0;transform:none}
/* A zone's name is centered under it, and takes two lines when the zone is narrower than the name: on a phone the ONS's "Very high"
   (8.5 to 10) is 44px wide under a 49px name, and on one line the name ran 5px past the chart's right edge (R3). */
:is(.page-results,.page-chapter) .sp-zlab{position:absolute;top:26px;text-align:center;text-wrap:balance;font:700 11px/1.1 var(--body);color:var(--muted)}
:is(.page-results,.page-chapter) .sp-zlab.is-on{color:var(--blue-ink)}

/* a published share for every answer: one column per answer, the share over it and the answer under it, the reader's own filled */
:is(.page-results,.page-chapter) .sp-cats{margin-top:4px}
:is(.page-results,.page-chapter) .sp-cat-cols{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:10px;height:156px;border-bottom:1px solid var(--ref-deep)}
:is(.page-results,.page-chapter) .sp-cat{position:relative}
:is(.page-results,.page-chapter) .sp-cat i{position:absolute;left:0;right:0;bottom:0;height:calc(var(--h) * .72);background:var(--grey);border-radius:3px 3px 0 0}
:is(.page-results,.page-chapter) .sp-cat.is-you i{background:var(--blue-deep)}
:is(.page-results,.page-chapter) .sp-cat-v{position:absolute;left:0;right:0;bottom:calc(var(--h) * .72 + 6px);text-align:center;font:700 12px/1 var(--body);color:var(--muted)}
:is(.page-results,.page-chapter) .sp-cat.is-you .sp-cat-v{color:var(--blue-ink)}
:is(.page-results,.page-chapter) .sp-cat-you{position:absolute;left:-8px;right:-8px;bottom:calc(var(--h) * .72 + 24px);text-align:center;font:800 12.5px/1 var(--body);color:var(--blue-ink)}
:is(.page-results,.page-chapter) .sp-cat-names{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:10px;margin-top:7px}
:is(.page-results,.page-chapter) .sp-cat-names span{font:600 11.5px/1.25 var(--body);color:var(--muted);text-align:center}
:is(.page-results,.page-chapter) .sp-cat-names .is-you{font-weight:800;color:var(--blue-ink)}

/* a note under the chart, set small (who the comparison group is, when it has to stay in full) */
:is(.page-results,.page-chapter) .rt-score .sp-note{margin:14px 0 0;font-size:13.5px;line-height:1.5;color:var(--muted);max-width:64ch}
/* Sep 25, 2026: a note folded under a panel's chart (who the group is, the statement they were not asked) takes the fold's type. */
:is(.page-results,.page-chapter) .rt-score .fold .sp-note{margin:0;font-size:inherit;line-height:inherit}

/* more than a dozen answers: the squares wrap onto rows instead of shrinking to slivers */
:is(.page-results,.page-chapter) .rt-score .sp-many .as-row{grid-auto-flow:row;grid-template-columns:repeat(auto-fill,26px);gap:5px}
:is(.page-results,.page-chapter) .rt-score .sp-many .as-sq span{font-size:12px}

/* the stacked form, for a panel inside a half-width card: one column at every width */
:is(.page-results,.page-chapter) .rt-score.is-stacked .rt-score-top{grid-template-columns:minmax(0,1fr);gap:16px 0}
:is(.page-results,.page-chapter) .rt-score.is-stacked{padding:22px 24px 24px}

@media (max-width:720px){
  :is(.page-results,.page-chapter) .sp-field{height:88px}
  :is(.page-results,.page-chapter) .sp-cat-cols{height:140px;gap:6px}
  :is(.page-results,.page-chapter) .sp-cat-names{gap:6px}
  :is(.page-results,.page-chapter) .sp-cat-names span{font-size:10.5px}
  :is(.page-results,.page-chapter) .rt-score.is-stacked{padding:18px 16px 20px}
  :is(.page-results,.page-chapter) .rt-score .sp-many .as-row{grid-template-columns:repeat(auto-fill,24px);gap:4px}
}
@media (prefers-contrast:more){
  :is(.page-results,.page-chapter) .sp-grid,
  :is(.page-results,.page-chapter) .sp-zone{border-color:var(--ink)}
  :is(.page-results,.page-chapter) .sp-cat i{background:var(--ref-deep)}
}
@media print{
  .sp-plot,.sp-cats{break-inside:avoid}
}


/* ===== 40-chapters.css ===== */
/* ==========================================================================
   40-chapters.css · owner: Chapters agent
   Pages: /results/personality/, /results/interests/, /results/four-letter/, /results/values/.
   Markup: src/pages/chapters.mjs (shell) and app/chapter-*.js (rendered result).
   Approved look (Wayne, Sep 21, 2026): the editorial vocabulary of docs/mockups/site/report-overview.html and report-at-work.html,
   set by the EDITORIAL block at the foot of this file over the earlier layout rules (docs/mockups/result-v3, voice/3-result,
   palettes/compare/result-cobalt, profile). Every rule is scoped under .page-chapter.
   ========================================================================== */

/* ---------------------------------------------------------------- chapter strip under the header */
.page-chapter .ch-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin-bottom:30px}
.page-chapter .ch-back{font-weight:700;font-size:13px;letter-spacing:.01em;text-decoration:none;border-bottom:3px solid var(--amber);line-height:1.4}
.page-chapter .ch-back:hover{border-bottom-color:var(--ink)}
.page-chapter .ch-tabs{display:flex;list-style:none;border:var(--bw) solid var(--line);background:var(--surface);box-shadow:var(--sh-xs);border-radius:var(--r)}
.page-chapter .ch-tabs li+li{border-left:var(--bw) solid var(--line)}
.page-chapter .ch-tabs a{display:flex;align-items:center;min-height:40px;padding:6px 16px;font-weight:700;font-size:13px;letter-spacing:.01em;text-decoration:none;white-space:nowrap}
.page-chapter .ch-tabs a:hover{background:var(--ground)}
.page-chapter .ch-tabs a[aria-current]{background:var(--ink);color:var(--ground)}
.page-chapter .ch-tabs a:focus-visible{outline-offset:-6px;box-shadow:none}

/* ---------------------------------------------------------------- shell, not-ready and error states */
.page-chapter .ch-shell,.page-chapter .ch-soon,.page-chapter .ch-error{max-width:820px}
.page-chapter .ch-empty .lede{max-width:60ch}
.page-chapter .ch-empty .note{max-width:62ch;color:var(--muted)}
.page-chapter .ch-empty-aside .box{padding:22px 26px}
.page-chapter .ch-empty-aside .hex{opacity:.9}
.page-chapter .ch-ghost{padding:10px 22px}
.page-chapter .ch-ghost-row{padding:14px 0;border-bottom:var(--bw-thin) solid var(--line)}
.page-chapter .ch-ghost-row:last-child{border-bottom:0}
.page-chapter .ch-ghost-name{display:block;font-weight:700;font-size:15px;margin-bottom:8px}
.page-chapter .ch-ghost-letters{display:grid;place-items:center;padding:48px 22px}
.page-chapter .ch-ghost-letters .lt{box-shadow:none}
.page-chapter .ch-progress{max-width:560px}
.page-chapter .ch-progress-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:10px}
.page-chapter .ch-progress-count{font-family:var(--heading);font-size:20px;line-height:1;font-weight:700;font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------- top of a result */
.page-chapter .ch-top h1{margin-top:14px}
.page-chapter .ch-h1-line{display:block}
.page-chapter .ch-code{margin-top:22px}
.page-chapter .ch-code .caption{max-width:26ch}
.page-chapter .ch-top-aside{min-width:0}

/* type card beside the Holland code (result-v3: 150px image | text) */
.page-chapter .ch-typecard{display:grid;grid-template-columns:160px minmax(0,1fr)}
.page-chapter .ch-typecard .ch-typecard-art{border-right:var(--bw) solid var(--line);height:100%;aspect-ratio:auto!important;min-height:190px}
.page-chapter .ch-typecard .ch-typecard-art img{position:absolute;inset:0;object-position:50% 30%}
.page-chapter .ch-typecard-body{padding:16px 18px 18px;display:flex;flex-direction:column;align-items:flex-start}
.page-chapter .ch-typecard-name{font-family:var(--heading);font-size:30px;line-height:1;letter-spacing:-.01em;margin-top:8px;font-weight:700}
.page-chapter .ch-typecard-line{font-size:15.5px;line-height:1.4;margin-top:8px;font-weight:500}
.page-chapter .ch-typecard .link-more{margin-top:auto;padding-top:0}
.page-chapter .ch-typecard-line+.link-more{margin-top:14px}
.page-chapter .ch-typelist-chips{display:flex;flex-wrap:wrap;gap:8px}
.page-chapter .ch-tie-types{max-width:980px}

/* contents strip (result-v3) */
.page-chapter .ch-toc{padding:0}
.page-chapter .ch-toc .toc{padding:12px 14px}
.page-chapter .ch-toc .toc a b{font-weight:700;margin-right:2px}
.page-chapter .ch-toc:not([data-following]) .toc li:first-child a{background:rgba(47,111,214,.1);color:var(--ink);font-weight:600}

/* sections (a jump to one lands by the report's own rule, 34-report-pages.css: until Sep 27, 2026 two rules here, from before the
   site's bar stuck, landed a section's heading under the bar) */
.page-chapter .ch-intro{margin-bottom:18px}
.page-chapter .ch-intro.note{margin-top:-8px}
.page-chapter .ch-core{max-width:82ch}
.page-chapter .ch-nudge{max-width:900px}
.page-chapter .ch-nudge .body{max-width:70ch}
.page-chapter .ch-end{padding-top:calc(var(--sec) + 8px)}
/* credits close the page as fine print under a small label (docs/SITE_KIT.md §13; creditsBlock in app/chapter-common.js) */
.page-chapter .ch-credits{margin-top:28px}
.page-chapter .ch-credits-title{font-family:var(--body);font-weight:700;font-size:var(--fs-label);letter-spacing:.08em;line-height:1.3;margin-bottom:8px}
/* a supporting section: the quiet heading comes from sectionHead({ quiet }), the limits cards from boxCard({ quiet }) */
.page-chapter .ch-limits{gap:18px}
/* (not the Terms link in the agreement a result page shows before the result: it keeps its own underline, 22-agree.css) */
.page-chapter a:not(.btn):not(.link-more):not(.box):not(.type-chip):not(.ch-back):not([href^="#src-"]):not(.tk-agree-link){text-decoration-color:rgba(47,111,214,.35);text-decoration-thickness:2px}

/* ---------------------------------------------------------------- 3 · how clear (bars | reading) */
.page-chapter .ch-clarity{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:40px;align-items:center;padding:20px 24px}
.page-chapter .ch-bars{list-style:none}
.page-chapter .ch-bar-row{display:grid;grid-template-columns:30px 168px minmax(0,1fr) 34px;gap:12px;align-items:center;margin:9px 0}
.page-chapter .ch-bar-name{font-weight:700;font-size:14.5px;line-height:1.2;display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px}
.page-chapter .ch-bar-row .v{font-family:var(--heading);font-size:15px;text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.page-chapter .ch-clarity-read .ch-gap{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;margin-bottom:10px}
.page-chapter .ch-gap-word{font-family:var(--heading);font-size:28px;line-height:1;font-weight:700}
.page-chapter .ch-clarity-read .body{font-size:16px;line-height:1.55}
.page-chapter .ch-scale{display:flex;border:var(--bw-thin) solid var(--line);margin-top:14px;font-size:12px;font-weight:700;letter-spacing:.01em;line-height:1.25}
.page-chapter .ch-scale span{flex:1;padding:7px 8px;text-align:center;border-right:var(--bw-thin) solid var(--line)}
.page-chapter .ch-scale span:last-child{border-right:0}
.page-chapter .ch-scale .is-on{background:rgba(42,157,143,.14);color:#1f7a6f}
.page-chapter .ch-scale b{font-weight:700}
.page-chapter .ch-scale i,.page-chapter .ch-scale em{font-style:normal}
.page-chapter .ch-clarity-read .note{margin-top:12px}
.page-chapter .ch-clarity+.callout{margin-top:24px}

/* ---------------------------------------------------------------- 4 · hexagon | the two letters */
.page-chapter .ch-hexrow{display:grid;grid-template-columns:400px minmax(0,1fr);gap:44px;align-items:center}
.page-chapter .ch-hexbox{padding:14px 16px}
.page-chapter .ch-hexread .ch-pair{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px}
.page-chapter .ch-pair-kind{font-size:22px;margin-left:8px}
.page-chapter .ch-hexread .body+.body{margin-top:12px}
.page-chapter .ch-hexread .callout{max-width:none}


/* ---------------------------------------------------------------- 7 · where it fits */
.page-chapter .ch-rung{display:flex;flex-direction:column}
.page-chapter .ch-rung .band{font-family:var(--heading);font-weight:700;font-size:15px;letter-spacing:.01em;padding:10px 16px}
.page-chapter .ch-jobs{list-style:none;padding:8px 16px 14px}
.page-chapter .ch-jobs li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:9px 0;border-bottom:var(--bw-thin) dashed var(--rule-soft);font-weight:600;font-size:15px;line-height:1.35}
.page-chapter .ch-jobs li:last-child{border-bottom:0}
.page-chapter .ch-jobs a{text-decoration:none;background-image:linear-gradient(var(--amber),var(--amber));background-size:0 2px;background-repeat:no-repeat;background-position:0 100%}
.page-chapter .ch-jobs a:hover{background-size:100% 2px}
/* Interest codes are two or three letters, so they stay beside a long title. Work value codes are long, so those rows can wrap. */
.page-chapter .ch-values-jobs .ch-jobs li{flex-wrap:wrap}
.page-chapter .ch-rung:not(.ch-values-jobs) .ch-jobs code{flex:none}
.page-chapter .ch-jobs li>a{min-width:0;overflow-wrap:anywhere}
.page-chapter .ch-jobs code{flex:0 1 auto;min-width:0;white-space:normal;overflow-wrap:anywhere;text-align:right;font-family:var(--display);font-size:13px;letter-spacing:.02em}
.page-chapter .ch-jobs-empty{padding:14px 16px;font-size:14.5px;font-weight:500;color:var(--muted)}
.page-chapter .ch-also{font-size:17px;margin:32px 0 14px}
/* under the jobs: the point in a callout, the two study figures folded after it (supporting) */
.page-chapter .ch-fit{margin-top:28px;max-width:980px}
.page-chapter .ch-fit .more{margin-top:14px}
.page-chapter .ch-evid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 36px}
.page-chapter .ch-evid-item{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center}
.page-chapter .ch-evid-num{font-family:var(--heading);font-weight:700;font-size:26px;line-height:1;font-variant-numeric:tabular-nums}
.page-chapter .ch-evid-item p{font-size:var(--fs-small);font-weight:500;line-height:1.45}
.page-chapter .ch-values-jobs{max-width:980px}
.page-chapter .ch-values-jobs code{font-family:var(--body);font-weight:700;font-size:12px;letter-spacing:.01em}

/* ---------------------------------------------------------------- 8 · with other people */
.page-chapter .ch-other{padding:0}
.page-chapter .ch-other-band{padding:9px 12px;font-size:15px;letter-spacing:0;text-transform:none}
.page-chapter .ch-other-head{display:flex;align-items:center;gap:10px;font-weight:700;font-size:13px}
.page-chapter .ch-other-head b{font-family:var(--heading);font-weight:700;font-size:15px;letter-spacing:.01em}
.page-chapter .ch-other-band .lt{border-color:var(--ink)}
.page-chapter .ch-other-dl{padding:6px 16px 16px}
.page-chapter .ch-other-dl dt{font-size:10.5px;font-weight:700;letter-spacing:.01em;margin-top:11px}
.page-chapter .ch-other-dl dd{font-size:14.5px;line-height:1.4;font-weight:500;margin-top:2px}
.page-chapter .ch-other-dl dd.q{font-weight:700}

/* ---------------------------------------------------------------- 9 · blind spots */
.page-chapter .ch-blind .box{padding:16px 18px 18px}
.page-chapter .ch-blind-title{font-size:14.5px;letter-spacing:.01em;line-height:1.2}
.page-chapter .ch-blind p{font-size:15.5px;line-height:1.45;margin-top:8px;font-weight:500}

/* ---------------------------------------------------------------- personality: at a glance */
.page-chapter .ch-glance{padding:4px 20px}
.page-chapter .ch-glance-row{padding:15px 0 16px;border-bottom:var(--bw-thin) solid var(--line)}
.page-chapter .ch-glance-row:last-child{border-bottom:0}
.page-chapter .ch-glance-head{display:flex;justify-content:space-between;align-items:center;gap:8px 14px;margin-bottom:10px}
.page-chapter .ch-glance-name{font-weight:700;font-size:16.5px;line-height:1.3}
.page-chapter .ch-glance-name a{text-decoration:none}
.page-chapter .ch-glance-name a:hover{text-decoration:underline}
.page-chapter .ch-glance-desc{font-size:15px;line-height:1.45;font-weight:500;margin-top:4px}
.page-chapter .ch-side{padding-top:6px}
.page-chapter .ch-side-fl .band{font-size:12px}
.page-chapter .ch-side-fl-body{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;padding:14px 16px 16px}
.page-chapter .ch-side-fl-body .small{flex:1 1 180px}
.page-chapter .ch-side-fl-body .letters{flex:none;gap:6px}
.page-chapter .ch-side-fl-body .lt-md{width:42px;height:42px;font-size:24px}
.page-chapter .ch-doubt-title{font-family:var(--heading);font-size:15px;letter-spacing:.01em;line-height:1.2;font-weight:700}
.page-chapter .ch-glance-note{max-width:70ch;margin-top:18px}
.page-chapter .ch-quality{max-width:820px;box-shadow:inset 8px 0 0 var(--amber),var(--sh);padding-left:30px}

/* ---------------------------------------------------------------- personality: one tendency */
.page-chapter .ch-tend-top{display:grid;grid-template-columns:minmax(0,480px) minmax(0,1fr);gap:40px;align-items:center}
.page-chapter .ch-score .meter{margin-top:4px}
.page-chapter .ch-score .score-block-text{font-size:14.5px}
.page-chapter .ch-headline{font-family:var(--heading);font-size:32px;line-height:1.02;letter-spacing:-.015em;margin-bottom:12px;max-width:22ch;font-weight:700}
.page-chapter .ch-tend-intro .body{max-width:62ch}
.page-chapter .ch-facets{margin-top:30px}
.page-chapter .ch-facet .small{font-size:15px;line-height:1.5;margin-top:10px}
.page-chapter .ch-tend-act{display:grid;grid-template-columns:minmax(0,1fr);max-width:900px;margin-top:30px}
.page-chapter .ch-question{display:flex;flex-direction:column;justify-content:center}
.page-chapter .ch-question-text{font-weight:700;font-size:18px;line-height:1.4;margin-top:8px}
/* the studies behind each trait, in the FAQ's "Where does this come from?" answer (D33). The claims stay ink, since they're research. */
.page-chapter .ch-evidence-list li{font-size:14px;line-height:1.5;margin-bottom:10px;max-width:110ch;color:var(--ink)}
.page-chapter .ch-ev-read{display:block;font-size:12.5px;font-weight:600;color:var(--muted);margin-top:2px}

/* ---------------------------------------------------------------- four-letter */
/* the type the letters make, beside the headline (primary) */
.page-chapter .ch-fl-type{display:flex;flex-direction:column}
.page-chapter .ch-fl-type-body{display:flex;flex-direction:column;align-items:flex-start;padding:16px 20px 20px}
.page-chapter .ch-fl-type-name{font-family:var(--display);font-size:34px;line-height:1;text-transform:uppercase;letter-spacing:-.015em}
.page-chapter .ch-fl-type-line{font-size:17px;line-height:1.45;font-weight:500;margin-top:10px;max-width:40ch}
.page-chapter .ch-fl-type .link-more{margin-top:16px}
/* why letters are a matter of degree: a caveat beside the scales */
.page-chapter .ch-degrees{max-width:900px}
.page-chapter .ch-from-research{max-width:900px}
.page-chapter .ch-dims{padding:6px 24px 20px;--meter-end:120px}
.page-chapter .ch-dim{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:28px;align-items:center;padding:18px 0;border-bottom:var(--bw-thin) dashed var(--rule-soft)}
.page-chapter .ch-dim:last-of-type{border-bottom:var(--bw-thin) solid var(--line)}
.page-chapter .ch-dim .meter-end{font-size:16px}
.page-chapter .ch-dim-strength b{display:block;font-size:15.5px;line-height:1.3}
.page-chapter .ch-dim-strength span{display:block;font-size:13.5px;font-weight:500;line-height:1.35;color:var(--muted)}
.page-chapter .ch-dims-note{margin-top:14px}
.page-chapter .ch-from{padding:0}
.page-chapter .ch-from-body{padding:16px 18px 18px}
.page-chapter .ch-from-head{display:flex;align-items:center;gap:14px}
.page-chapter .ch-from-title{font-size:18px}
.page-chapter .ch-from-head .small{margin-top:3px;font-weight:600}
.page-chapter .ch-from-dl{margin-top:12px;padding-top:10px;border-top:var(--bw-thin) dashed var(--rule-soft)}
.page-chapter .ch-from-dl dt{font-size:11px;font-weight:700;letter-spacing:.01em}
.page-chapter .ch-from-dl dd{font-size:14.5px;line-height:1.45;font-weight:500;margin-top:2px}

/* ---------------------------------------------------------------- work values (behind the flag) */
.page-chapter .ch-values-big{font-family:var(--heading);font-size:30px;line-height:1.02;margin-top:8px;font-weight:700;font-variant-numeric:tabular-nums}
.page-chapter .ch-value{padding:0}
.page-chapter .ch-value-body{padding:16px 18px 18px}
.page-chapter .ch-value-cards{list-style:none;margin-top:6px}
.page-chapter .ch-value-cards li{font-size:14.5px;line-height:1.4;font-weight:500;padding:6px 0;border-bottom:var(--bw-thin) dashed var(--rule-soft)}
.page-chapter .ch-value-cards li:last-child{border-bottom:0}
.page-chapter .ch-values-all{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:var(--gap);align-items:start}

/* ---------------------------------------------------------------- keep reading (end of every finished chapter) */
.page-chapter .ch-more-grid{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(var(--more,2),minmax(0,1fr));gap:var(--gap)}
.page-chapter .ch-next-card{display:flex;flex-direction:column}
.page-chapter .ch-next-card-body{display:flex;flex-direction:column;gap:4px;padding:14px 16px 16px}
.page-chapter .ch-next-card-status{font-family:var(--heading);font-size:20px;line-height:1.08;letter-spacing:-.01em;font-weight:700}
.page-chapter .ch-next-all .ch-next-card-body{padding:18px 20px 20px;justify-content:center;height:100%}
.page-chapter .ch-next-all .ch-next-card-status{font-size:24px;color:var(--on-ink);margin-top:4px}
.page-chapter .ch-next-all .label{color:var(--amber)}
.page-chapter .ch-next-all .small{color:var(--ground)}
/* An assessment that isn't done (app/chapter-common.js nextChapters): a blue band over a quiet body, so it reads as something to take,
   not a result to read. Below the grid, the way back to this result's own assessment and to all of them. */
.page-chapter .ch-next-take .band{--acc:#2f6fd6;--acc-text:#1f55b0;--acc-rgb:47,111,214;background:transparent;color:var(--acc-text);}
.page-chapter .ch-next-take .ch-next-card-body{flex:1;background:transparent}
.page-chapter .ch-more-from{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px 30px;margin-top:26px}

/* ---------------------------------------------------------------- tablet */
@media (max-width:1100px){
  .page-chapter .ch-tend-top{grid-template-columns:minmax(0,1fr);gap:24px}
  .page-chapter .ch-hexrow{grid-template-columns:330px minmax(0,1fr);gap:32px}
  .page-chapter .ch-clarity{gap:28px}
  .page-chapter .ch-bar-row{grid-template-columns:30px 150px minmax(0,1fr) 32px}
  .page-chapter .ch-typecard{grid-template-columns:130px minmax(0,1fr)}
  .page-chapter .ch-typecard-name{font-size:25px}
  .page-chapter .ch-dim{grid-template-columns:minmax(0,1fr) 190px;gap:20px}
  .page-chapter .ch-more-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------------------------------------------------------------- stacked */
@media (max-width:860px){
  .page-chapter .ch-bar{margin-bottom:22px}
  .page-chapter .ch-clarity{grid-template-columns:minmax(0,1fr)}
  .page-chapter .ch-hexrow{grid-template-columns:minmax(0,1fr)}
  .page-chapter .ch-hexbox{max-width:440px;width:100%}
  .page-chapter .ch-evid{grid-template-columns:minmax(0,1fr)}
  .page-chapter .ch-tend-act,.page-chapter .ch-values-all{grid-template-columns:minmax(0,1fr)}
  .page-chapter .ch-dim{grid-template-columns:minmax(0,1fr);gap:10px}
  .page-chapter .ch-typecard{max-width:560px}
  .page-chapter .ch-side{padding-top:0}
  .page-chapter .ch-empty-aside{display:none}
}
@media (max-width:560px){
  .page-chapter .ch-more-grid{grid-template-columns:minmax(0,1fr)}
}

/* ---------------------------------------------------------------- phone */
@media (max-width:720px){
  .page-chapter .ch-bar{flex-direction:column;align-items:stretch;gap:14px}
  .page-chapter .ch-back{align-self:flex-start}
  .page-chapter .ch-tabs{width:100%}
  .page-chapter .ch-tabs li{flex:1 1 0;min-width:0}
  .page-chapter .ch-tabs a{justify-content:center;text-align:center;white-space:normal;padding:6px 6px;font-size:11.5px;letter-spacing:.03em;line-height:1.2;min-height:44px}
  .page-chapter .ch-code .caption{max-width:none;flex-basis:100%;margin-left:0}
  .page-chapter .ch-typecard{grid-template-columns:118px minmax(0,1fr)}
  .page-chapter .ch-typecard .ch-typecard-art{min-height:170px}
  .page-chapter .ch-typecard-body{padding:12px 14px 14px}
  .page-chapter .ch-typecard-name{font-size:22px;margin-top:6px}
  .page-chapter .ch-typecard-line{font-size:14.5px}
  .page-chapter .ch-toc .toc{padding:10px 12px}

  .page-chapter .ch-clarity{padding:14px 16px 18px;gap:18px}
  .page-chapter .ch-bar-row{grid-template-columns:30px minmax(0,1fr) 30px;grid-template-areas:"lt name v" "lt bar v";gap:4px 12px;margin:10px 0}
  .page-chapter .ch-bar-row .lt{grid-area:lt}
  .page-chapter .ch-bar-row .ch-bar-name{grid-area:name}
  .page-chapter .ch-bar-row .bar{grid-area:bar}
  .page-chapter .ch-bar-row .v{grid-area:v}
  .page-chapter .ch-gap-word{font-size:24px}
  .page-chapter .ch-scale{font-size:11px;letter-spacing:.04em}
  .page-chapter .ch-scale span{padding:6px 4px;display:flex;flex-direction:column;align-items:center}
  .page-chapter .ch-scale i{display:none}
  .page-chapter .ch-hexread .ch-pair .lt-md{width:44px;height:44px;font-size:25px}
  .page-chapter .ch-pair-kind{font-size:19px;margin-left:4px}
  .page-chapter .ch-jobs{padding:6px 14px 12px}
  .page-chapter .ch-jobs li{font-size:14.5px}
  .page-chapter .ch-evid-num{font-size:24px}
  .page-chapter .ch-glance{padding:2px 16px}
  .page-chapter .ch-glance-name{font-size:15.5px}
  .page-chapter .ch-headline{font-size:25px}
  .page-chapter .ch-tendency .sh-aside{display:none}
  .page-chapter .ch-facets{margin-top:22px}
  .page-chapter .ch-tend-act{margin-top:22px}
  .page-chapter .ch-question-text{font-size:17px}
  .page-chapter .ch-quality{padding-left:24px}
  .page-chapter .ch-fl-type-name{font-size:28px}
  .page-chapter .ch-fl-type-line{font-size:16px}
  .page-chapter .ch-dims{padding:4px 16px 16px}
  .page-chapter .ch-dim{padding:14px 0}
  .page-chapter .ch-dim .meter-end{font-size:14.5px}
  .page-chapter .ch-values-big{font-size:24px}
  .page-chapter .ch-progress-count{font-size:18px}
}

/* ---------------------------------------------------------------- added in review: ties and blocked storage */
/* a tie between two types: both, with equal weight, under one label */
.page-chapter .ch-tieaside{display:grid;gap:16px}
.page-chapter .ch-tieaside-label{margin-bottom:-2px}
.page-chapter .ch-tieaside .ch-typecard{grid-template-columns:120px minmax(0,1fr)}
.page-chapter .ch-tieaside .ch-typecard-art{min-height:150px}
.page-chapter .ch-tieaside .ch-typecard-body{padding:12px 16px 14px}
.page-chapter .ch-tieaside .ch-typecard-name{font-size:23px;margin-top:6px}
.page-chapter .ch-tieaside .ch-typecard-line{font-size:14.5px;margin-top:6px}
.page-chapter .ch-tieaside .ch-typecard-line+.link-more{margin-top:10px}
.page-chapter .ch-tie-lede{max-width:56ch}
.page-chapter .ch-blocked{max-width:820px;margin-bottom:28px}

/* ---------------------------------------------------------------- more about how you work (optional add-on, app/chapter-personality.js) */
.page-chapter .ch-addon-lede{max-width:70ch;font-size:18px}
.page-chapter .ch-addon-grid{gap:22px}
.page-chapter .ch-addon-card{display:flex;flex-direction:column}
.page-chapter .ch-addon-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
.page-chapter .ch-addon-name{font-family:var(--heading);font-size:20px;line-height:1.1;font-weight:700}
.page-chapter .ch-addon-hh{max-width:640px}
.page-chapter .ch-addon-invite{max-width:720px}
@media (max-width:760px){.page-chapter .ch-addon-grid{grid-template-columns:1fr}}
.page-chapter .ch-others-foot{margin-top:14px;max-width:80ch}

/* ==========================================================================
   EDITORIAL (Wayne, Sep 21, 2026: docs/mockups/site/report-overview.html and report-at-work.html). Each assessment keeps its own
   result page, set in the report's editorial vocabulary. The cover card, the dot plot and the letter columns come from
   app/report-parts.js with their styles in 30-results.css (shared by both page classes). This block brings the rest of these pages
   onto the paper: no glass around body sections, no corner glows, no rotating accents. Sections open under an ink rule (the
   foundation's .sh), cards sit open under a hairline, blue is you (the strengths, the question to take away, the interest code
   tiles), amber is worth your attention (the trade-off, a note to reconsider), grey is everyone else. Titles are the serif at 400.
   ========================================================================== */
.page-chapter .ch-root>.pr-top.is-in-page{padding-top:4px}
.page-chapter .pr-hero-side.is-panel{align-self:stretch;justify-content:stretch}
.page-chapter .pr-hero-side.is-panel>*{flex:1 1 100%;min-width:0}
.page-chapter .pr-hero-card .code-row{margin-top:16px;margin-bottom:6px}
.page-chapter .pr-hero-card .btn-row{margin-top:24px}
.page-chapter .ch-scales{margin-top:44px;display:grid;gap:22px}
.page-chapter .ch-fl-sum{margin:18px 0 22px;max-width:62ch;font-size:15px;line-height:1.55;color:var(--muted)}
.page-chapter .ch-values-top .ch-values-big{margin-top:6px}

/* the strip under the header: a quiet back link, and the results as plain entries, the current one in the blue wash (as the
   report's contents sidebar marks where you are) */
.page-chapter .ch-back{font:700 12.5px/1.4 var(--body);border-bottom:0;color:var(--muted)}
.page-chapter .ch-back:hover{color:var(--blue-deep)}
.page-chapter .ch-tabs{gap:2px;padding:0;border:0;background:none;box-shadow:none;border-radius:0}
.page-chapter .ch-tabs li+li{border-left:0}
.page-chapter .ch-tabs a{min-height:36px;padding:8px 12px;border-radius:8px;font:600 13.5px/1.3 var(--body);color:var(--muted)}
.page-chapter .ch-tabs a:hover{background:rgba(34,136,224,.06);color:var(--blue-ink)}
.page-chapter .ch-tabs a[aria-current]{background:rgba(34,136,224,.13);color:var(--blue-ink);font-weight:800}
/* the result you are in carries its small painting, round, in front of its name (polish idea 18; app/chapter-common.js chapterLinks) */
.page-chapter .ch-tabs a:has(.ch-tab-art){gap:8px;padding-left:6px}
.page-chapter .ch-tab-art{flex:none;width:24px;height:24px;border-radius:50%;border:1px solid var(--line);background:#fff;object-fit:cover}

/* the in-page contents: a row between hairlines */
.page-chapter .ch-toc{border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0;background:none;box-shadow:none}
.page-chapter .ch-toc .toc{padding:8px 0}
.page-chapter .ch-toc:not([data-following]) .toc li:first-child a{background:rgba(34,136,224,.13);color:var(--blue-ink);font-weight:800}

/* the trait lenses: at your best in the blue wash and the trade-off in the amber wash, each under an ink rule like the
   mockups' pair; the lenses with no colour logic of their own sit on the paper under a hairline */
.page-chapter .ch-facet{border:0;border-top:1px solid var(--ink);border-radius:0;box-shadow:none}
.page-chapter .ch-facet.is-sage,.page-chapter .ch-facet.is-violet{background:#fff;border-top-color:var(--line)}
.page-chapter .ch-facet .box-title{font:800 9.5px/1.4 var(--body);letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
/* the question to take away: the blue pull line */
.page-chapter .ch-question{background:none;border:0;border-left:2px solid var(--blue-mark);border-radius:0;box-shadow:none;padding:2px 0 2px 18px}
.page-chapter .ch-question .label{font:800 10px/1.4 var(--body);letter-spacing:.13em;text-transform:uppercase;color:var(--blue-deep)}
.page-chapter .ch-question-text{margin-top:8px;font:300 22px/1.36 var(--display);color:var(--blue-ink)}
/* "Doesn't sound like you?": worth your attention, so an amber rule, no box */
.page-chapter .ch-doubt{background:none;border:0;border-left:2px solid var(--amber);border-radius:0;box-shadow:none;padding:2px 0 2px 18px}
.page-chapter .ch-quality{box-shadow:none;border:0;border-left:2px solid var(--amber);border-radius:0;padding-left:18px}

/* titles: the serif at 400 */
.page-chapter :is(.ch-headline,.ch-typecard-name,.ch-values-big,.ch-next-card-status,.ch-addon-name,.ch-doubt-title,.ch-gap-word,.ch-evid-num,.ch-progress-count){
  font-family:var(--display);font-weight:400;letter-spacing:-.015em}
.page-chapter .ch-headline{font-size:30px;line-height:1.12}
.page-chapter .ch-doubt-title{font-size:19px}
.page-chapter :is(.ch-other-head b,.ch-rung .band,.ch-bar-row .v){font-weight:700}

/* our own cards open on the paper under a hairline; the band over each is the small grey kicker */
.page-chapter :is(.ch-next-card,.ch-value,.ch-addon-card,.ch-rung,.ch-typelist,.ch-score,.ch-deep-card){background:none;border:0;border-top:1px solid var(--line);
  border-radius:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;color:var(--ink)}
.page-chapter :is(.ch-next-card,.ch-value,.ch-addon-card,.ch-rung,.ch-typelist,.ch-deep-card) .band{padding-left:0;padding-right:0;background:transparent;color:var(--muted);border-bottom:0}
.page-chapter :is(.ch-value,.ch-addon-card,.ch-deep-card) :is(.ch-value-body,.box-pad,.box-pad-lg){padding-left:0;padding-right:0}
.page-chapter .ch-next-card-body{padding-left:0;padding-right:0}
.page-chapter .ch-next-take .band{color:var(--amber-text)}
.page-chapter a.ch-next-card:hover{color:var(--ink)}
.page-chapter a.ch-next-card:hover .ch-next-card-status{color:var(--blue-deep)}
.page-chapter .ch-next-all{border-top-color:var(--ink)}
.page-chapter .ch-next-all .ch-next-card-body{font:300 22px/1.3 var(--display);letter-spacing:-.01em;color:var(--blue-deep)}
.page-chapter .ch-next-all .ch-next-card-status{color:var(--blue-deep)}
.page-chapter .ch-next-all .label{color:var(--blue-deep)}
.page-chapter .ch-next-all .small{color:var(--muted)}
/* the reader's interest type beside the code, inside the cover card: a plain white card, the one card on these pages */
.page-chapter .ch-typecard{background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:none;overflow:hidden}
/* a white box that frames a chart (the four scales, all six values) keeps a hairline and loses its shadow */
.page-chapter .ch-root .box:not(.pr-hero-card){box-shadow:none}

/* the four-letter guide's chapters (app/fourletter-guide.js) on this page: open under an ink rule, the number in the blue wash */
.page-chapter .flg-cards .flg-card{background:#fff;border:0;border-top:1px solid var(--ink);border-radius:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.page-chapter .flg-cards .flg-card .band{padding-left:0;padding-right:0;background:transparent;color:var(--muted);border-bottom:0}
.page-chapter .flg-cards .flg-card-num b{display:inline-grid;place-items:center;min-width:24px;height:22px;padding:0 6px;border-radius:5px;
  background:var(--blue-wash);color:var(--blue-ink);font:800 11px/1 var(--body);letter-spacing:0}
.page-chapter .flg-cards .flg-card-title{font-family:var(--display);font-weight:400;letter-spacing:-.015em}
.page-chapter .flg-cards .flg-card>*:not(.band){padding-left:0;padding-right:0}

/* the interest code in the cover: the mockups' code tiles, white-bordered blue wash (.tiles.is-code), never solid colour squares */
.page-chapter .pr-hero-card .letters{gap:6px}
.page-chapter .pr-hero-card .letters .lt{width:36px;height:36px;border-radius:5px;background:var(--blue-wash);border:1px solid var(--blue-mark);color:var(--blue-ink);
  font:800 19px/1 var(--body);box-shadow:none}
/* seven results tabs: one scrolling row on a phone rather than a crowded wrap */
@media (max-width:720px){ .page-chapter .ch-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch} .page-chapter .ch-tabs::-webkit-scrollbar{display:none} .page-chapter .ch-tabs li{flex:none} .page-chapter .ch-tabs a{white-space:nowrap} }

/* The Career report's job table (Oct 7, 2026; app/chapter-interests.js jobTable): one table, best matches first, five rows at a time.
   Five small bars per rating instead of figures (Wayne: "it's not just a number 1 or 5"), colored red to green by how favorable the
   rating is: for education and training more bars is harder, for new jobs, growth and pay more is better. Hairlines, no heavy rules.
   On a phone each job is a card: its title, then the five ratings in two columns, each named. */
.page-chapter .jt{display:grid;gap:12px}
.page-chapter .jt-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.page-chapter .jt-table{width:100%;border-collapse:collapse;font-size:14.5px}
.page-chapter .jt-table th,.page-chapter .jt-table td{padding:12px 14px;text-align:left;vertical-align:top;border-top:1px solid var(--line)}
.page-chapter .jt-table thead th{border-top:0;font:700 12px/1.3 var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:var(--ground);white-space:nowrap}
.page-chapter .jt-table tr.jt-group th{padding:10px 14px 6px;font:700 12px/1.3 var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--blue-ink);background:var(--blue-wash);border-top:1px solid var(--line)}
.page-chapter .jt-job{display:flex;align-items:baseline;justify-content:space-between;gap:10px;min-width:180px}
.page-chapter .jt-job a{font-weight:600;color:var(--ink);text-decoration:none;background-image:linear-gradient(var(--amber),var(--amber));background-size:0 2px;background-repeat:no-repeat;background-position:0 100%}
.page-chapter .jt-job a:hover{background-size:100% 2px}
.page-chapter .jt-job code{flex:none;font:600 12px/1 var(--body);letter-spacing:.04em;color:var(--muted)}
.page-chapter .jt-pips{display:inline-flex;gap:3px;vertical-align:middle}
.page-chapter .jt-pips i{display:block;width:12px;height:8px;border-radius:3px;background:var(--line)}
/* Red to green by how favorable the rating is (f-1 the least, f-5 the most); empty bars stay hairline grey. */
.page-chapter .jt-pips.f-1 i.on{background:#D64545}
.page-chapter .jt-pips.f-2 i.on{background:#EB8A3A}
.page-chapter .jt-pips.f-3 i.on{background:#E3B21F}
.page-chapter .jt-pips.f-4 i.on{background:#7DB868}
.page-chapter .jt-pips.f-5 i.on{background:#2E8B57}
.page-chapter .jt-lvl{display:block;margin-top:5px;font-size:12.5px;line-height:1.3;color:var(--muted)}
.page-chapter .jt-na{color:var(--grey);font-weight:600}
.page-chapter .jt-foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.page-chapter .jt-count{font-size:13.5px;color:var(--muted)}
.page-chapter .jt-ooh{margin-left:auto;font-size:14px;font-weight:600}
@media (max-width:720px){.page-chapter .jt-ooh{margin-left:0;flex-basis:100%}}
@media (max-width:720px){
  .page-chapter .jt-scroll{overflow:visible;border:0;background:none}
  .page-chapter .jt-table thead{display:none}
  .page-chapter .jt-table,.page-chapter .jt-table tbody{display:block}
  .page-chapter .jt-table tr.jt-group{display:block;margin-top:14px}
  .page-chapter .jt-table tr.jt-group[hidden],.page-chapter .jt-table tr.jt-row[hidden]{display:none}
  .page-chapter .jt-table tr.jt-group th{display:block;border:0;background:none;padding:0 2px 6px}
  .page-chapter .jt-table tr.jt-row{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;margin-top:10px;padding:14px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
  .page-chapter .jt-table tr.jt-row th{grid-column:1 / -1;padding:0;border:0}
  .page-chapter .jt-table tr.jt-row td{padding:0;border:0}
  .page-chapter .jt-table tr.jt-row td::before{content:attr(data-label);display:block;margin-bottom:5px;font:700 11.5px/1.2 var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
  .page-chapter .jt-job{min-width:0}
}


/* ===== 41-career.css ===== */
/* ==========================================================================
   41-career.css · owner: the Career report (app/chapter-interests.js, app/chapter-values.js)

   Sep 24, 2026, docs/REPORT_GAP.md R6 and R9. What this partial draws:
     - the hexagon beside only what is about the hexagon (R9). It used to stand in a 400px column centred on everything the
       section said, twice its height, which left about 140px of empty white above and below it at 1440px. Beside it now: where
       the two top interests fall on it and the caveat on what that can say, which is about the chart's own height. The reading
       runs under both at the prose measure. Composition, not stretching: neither the chart nor the words changed size.
     - the third interest, read inside that section, on the same column as the prose above it.
     - the lower interests, one ruled panel each: the interest, its score and the five activities it was scored on with the
       answer given on the left; three short readings on the right, the one naming a cost marked amber as on the flagship's
       trait cards (39-report-editorial.css: blue is the reader's own number, amber is a cost, nothing else is tinted).
     - the cost line on a work value's card.
   Sep 25, 2026: the type's reading, the lower interests' and the colleagues' readings are the flagship's angle cards now, and
   every piece of general information sits in a fold (app/chapter-interests.js, "NO WALLS"); the rules for those are below.
   Everything is scoped to .page-chapter, the body class of /results/interests/ and /sample/career/.
   ========================================================================== */

/* ---------------------------------------------------------------- the hexagon, beside what is about it */
.page-chapter .ci-hex{display:grid;grid-template-columns:400px minmax(0,1fr);gap:44px;align-items:center}
.page-chapter .ci-hex .ch-hexbox{padding:14px 16px}
.page-chapter .ci-hex-read .ch-pair{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px}
.page-chapter .rp-full-sec .ci-hex-read p.body,.page-chapter .rp-excerpt .ci-hex-read p.body{max-width:none;margin-inline:0}
.page-chapter .ci-hex-read .body+.body{margin-top:12px}
.page-chapter .ci-hex-read .callout{max-width:none}

/* the reader's third interest, marked more quietly than the two that make the type */
.page-chapter .hex-tile.is-also rect{fill:var(--blue-light);stroke:var(--blue-mark)}
.page-chapter .hex-tile.is-also text{fill:var(--ink)}
.page-chapter .hex-name.is-also{fill:var(--blue-ink)}

/* ---------------------------------------------------------------- the reading under it: the second interest, then the third
   Two panels alike (Sep 25, 2026): the second interest used to be a paragraph with no head, above the third's panel. */
.page-chapter .ci-third{max-width:72ch;margin:40px auto 0;padding-top:30px;border-top:1px solid var(--line);font-size:var(--fs-body)}
.page-chapter .ci-third.ci-second{margin-top:0;padding-top:0;border-top:0}
.page-chapter .ci-third-head{display:flex;align-items:center;gap:16px;margin-bottom:14px}
.page-chapter .ci-third-name{margin-top:3px;font:400 27px/1.15 var(--display);letter-spacing:-.012em;color:var(--ink)}
.page-chapter .rp-full-sec .ci-third p.body,.page-chapter .rp-excerpt .ci-third p.body{max-width:none;margin-inline:0}

/* the small label every new piece opens under, and the score beside a name */
.page-chapter .ci-lab{font:800 12px/1.4 var(--body);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.page-chapter .ci-score{display:inline-block;margin-left:8px;padding:3px 9px;border-radius:5px;background:var(--blue-wash);color:var(--blue-ink);
  font:700 14px/1.25 var(--body);letter-spacing:.01em;vertical-align:.25em}

/* ---------------------------------------------------------------- the lower interests */
.page-chapter .ci-lows{margin-top:34px;border-top:1px solid var(--ink)}
.page-chapter .ci-low{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:0 56px;padding:34px 0 38px;border-bottom:1px solid var(--line)}
.page-chapter .ci-low:last-child{border-bottom:0;padding-bottom:6px}
.page-chapter .ci-low-head{display:flex;align-items:center;gap:14px}
.page-chapter .ci-low-name{font:400 28px/1.1 var(--display);letter-spacing:-.015em;color:var(--ink)}
.page-chapter .ci-low-head .ci-score{margin-left:auto;vertical-align:baseline}
.page-chapter .ci-low-ans-lab{margin-top:22px}
.page-chapter .ci-low-ans{list-style:none;margin:6px 0 0;padding:0}
.page-chapter .ci-low-ans li{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:8px 0;border-bottom:1px solid var(--line);font-size:14.5px;line-height:1.4}
.page-chapter .ci-low-ans li:last-child{border-bottom:0}
.page-chapter .ci-low-q{color:var(--ink)}
.page-chapter .ci-low-a{flex:none;font-weight:700;font-size:13px;color:var(--muted);white-space:nowrap}
.page-chapter .ci-low-lean{margin-top:12px;font-size:14.5px;line-height:1.5;color:var(--muted)}
/* The three readings are the flagship's angle cards (Sep 25, 2026): 39-report-editorial.css draws them (.rt-angles .ch-facet: the
   small uppercase label, the reading at --rt-ang, a hairline under each, the cost marked amber). What is here is only what a
   card list in one column of a panel needs: one column, no rule over the first card, the first flush with the panel's head. */
.page-chapter .ci-sec :is(.ci-low-read,.ci-across-read).rt-angles{display:block;margin-top:0;padding-top:0;border-top:0}
.page-chapter .ci-sec :is(.ci-low-read,.ci-across-read) .ch-facet{padding:18px 0 20px}
.page-chapter .ci-sec :is(.ci-low-read,.ci-across-read) .ch-facet:first-child{padding-top:0}
.page-chapter .ci-sec :is(.ci-low-read,.ci-across-read) .ch-facet:last-child{padding-bottom:0;border-bottom:0}
.page-chapter .ci-sec :is(.ci-low-read,.ci-across-read) .ch-facet.is-amber::before{top:18px;bottom:20px}
.page-chapter .ci-sec :is(.ci-low-read,.ci-across-read) .ch-facet.is-amber:first-child::before{top:0}
.page-chapter .ci-sec :is(.ci-low-read,.ci-across-read) .ch-facet.is-amber:last-child::before{bottom:0}
.page-chapter .ci-sec :is(.ci-low-read,.ci-across-read) .ch-facet .small{max-width:64ch}

/* ---------------------------------------------------------------- how you come across, and what helps (D118)
   Under the six with-other-people cards: one ruled panel per colleague who leads with one of the reader's lower interests, drawn
   like the lower-interest panels above it (interest on the left, two labelled readings on the right), so the two read as one
   family. The far corner of the hexagon comes first and draws the small hexagon under its tag. No tint: neither reading is the
   reader's own number or a cost. */
.page-chapter .ci-across{margin-top:64px}
.page-chapter .ci-across-title{font:400 clamp(26px,2.5vw,34px)/1.15 var(--display);letter-spacing:-.015em;color:var(--ink)}
.page-chapter .ci-across-lede{max-width:72ch;margin-top:14px;font-size:var(--fs-body);line-height:1.62;color:var(--ink)}
.page-chapter .ci-across-list{margin-top:30px;border-top:1px solid var(--ink)}
.page-chapter .ci-across-panel{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:0 56px;padding:32px 0 36px;border-bottom:1px solid var(--line)}
.page-chapter .ci-across-panel:last-child{border-bottom:0;padding-bottom:6px}
.page-chapter .ci-across-head{display:flex;align-items:center;gap:14px}
.page-chapter .ci-across-name{font:400 28px/1.1 var(--display);letter-spacing:-.015em;color:var(--ink)}
.page-chapter .ci-across-where{margin-top:14px}
.page-chapter .ci-across-hex{max-width:236px;margin-top:16px}

/* ---------------------------------------------------------------- the work values, one section with three parts
   "Your work values" takes the report's shared section title; its three parts (the highest values, all six, the work that
   rates them) are one step down, where they used to take the 60px title each under a smaller head of their own. */
.page-chapter .rp-full-sec .rp-values .ch-sec>.sh{margin-bottom:22px;padding-bottom:12px}
.page-chapter .rp-full-sec .rp-values .ch-sec>.sh h2{max-width:none;font:400 clamp(24px,2.4vw,30px)/1.15 var(--display);letter-spacing:-.015em}

/* ---------------------------------------------------------------- a work value's other direction */
.page-chapter .ch-value-cost{position:relative;margin-top:16px;padding-left:16px}
.page-chapter .ch-value-cost::before{content:"";position:absolute;left:0;top:2px;bottom:3px;width:2px;background:var(--amber)}
.page-chapter .ch-value-cost .label{color:var(--amber-text)}

/* ---------------------------------------------------------------- the closing question inside the free excerpt
   In the full report the question stands on a warm band of its own (39-report-editorial.css .rp-part-close). Given away as the
   free section, the whole section, question included, sits on one white sheet (.rp-excerpt), which is not a .rp-full-sec, so the
   --rt-* sizes the label reads are undefined there and it fell back to body type flush against the cards. It takes a rule and
   room above instead, and its label the size it has on the band. */
.page-chapter .rp-excerpt .ci-close{margin-top:44px;padding-top:40px;border-top:1px solid var(--line)}
.page-chapter .rp-excerpt .ci-close .rt-q-lab{font:800 12px/1.4 var(--body);letter-spacing:.11em;text-transform:uppercase;color:var(--amber-text)}

/* ==========================================================================
   THE FLAGSHIP'S MAGAZINE LOOK (Sep 25, 2026)
   The bands, their grounds and their padding are the flagship's own (app/report-page.js fullZones, 39-report-editorial.css
   .rp-part-*); what follows is only what a Career band holds that a trait does not. Every rule is reached through .ci-sec, the class
   every band of a Career section carries (app/chapter-interests.js), so no other report's bands are touched.
   ========================================================================== */

/* ---------------------------------------------------------------- the reader's own type, opening the report on blue
   The flagship's type card (37-report-pacing.css .rp-type-card), as white paper on the blue ground the way the score panel is. It
   opens the type's write-up as the flagship's card does (Sep 25, 2026): the type's own scene, set large beside its painting, as
   the lead of the section, in the display face at the size a trait's reading opens on. */
.page-chapter .ci-sec .ci-type-card{grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:0 44px;align-items:center;margin:0;
  padding:26px 30px;background:#fff}
.page-chapter .ci-sec .ci-type-card .ci-tc-art{margin:0;width:100%;border-radius:10px;overflow:hidden}
.page-chapter .ci-sec .ci-type-card .ci-tc-scene{margin-top:18px;max-width:44ch;font:300 clamp(19px,1.65vw,23px)/1.46 var(--display);letter-spacing:-.008em;color:var(--ink)}
.page-chapter .ci-sec .ci-type-card .rp-tc-go{margin-top:20px}

/* ---------------------------------------------------------------- the type's reading: the flagship's entry, pair and angles
   39-report-editorial.css draws all of it (.rt-entry: the headline set large beside the lede; .rt-angles: the ruled list of cards,
   the trade-off marked amber). A lone last card in the grid keeps its half, as the flagship's three-card traits do. */
.page-chapter .ci-sec .ci-type-read .rt-angles{margin-top:40px}
/* A section's opening line starts on the wrap's own edge, where its cards and panels start (the flagship's spine,
   39-report-editorial.css), rather than centred on its own 72ch; left there, a one-sentence line sat indented over a full-width grid. */
.page-chapter .rp-full-sec.ci-sec p.body.ch-intro{margin-inline:0}

/* ---------------------------------------------------------------- about this information
   Every piece of general information in this report (Holland's hexagon, the method, O*NET's words, the research on fit, the
   caveats) is behind the one fold every report uses (05-components.css .fold, app/ui.js contextFold). It follows what it is
   about, a little apart from it. */
.page-chapter .ci-sec .ci-about{margin-top:26px}
.page-chapter .ci-sec .ci-hex-read .ci-about{margin-top:16px}
.page-chapter .ci-sec .ci-about>.fold-body{max-width:72ch}
.page-chapter .rp-bars .rp-bars-fold{margin-top:14px}
.page-chapter .rp-bars .rp-bars-fold>.fold-body>.est-note{margin-top:8px}
.page-chapter .ch-values-all.is-folded{display:block}
.page-chapter .ch-value .ci-about{margin-top:14px}

/* ---------------------------------------------------------------- the quiet layer on the reading bands
   The flagship takes its rings and discs off the bands of a trait (39-report-editorial.css), because a trait opens on a change of
   ground and a name at 60px and its bands are short. A Career section's reading band is the long part of the section, the part
   Wayne called dense, so the same shapes come back on it, from the same cycle in 37-report-pacing.css. Never on the opening band,
   whose chart is the point, and never on the question, which stands alone. */
.page-chapter .ci-sec.rp-part-read::before,
.page-chapter .ci-sec.rp-part-read::after{display:block}
@media (prefers-contrast:more){
  .page-chapter .ci-sec.rp-part-read::before,.page-chapter .ci-sec.rp-part-read::after{display:none}
}

/* ---------------------------------------------------------------- the pull bar on the lower interests
   The flagship's bar (38-report-marks.css .rp-pull), between the lede and the three panels. */
.page-chapter .ci-sec .ci-pull{margin-top:30px}
.page-chapter .ci-sec .ci-pull .rp-pull{margin:0}
.page-chapter .ci-sec .ci-pull+.ci-lows{margin-top:38px}

/* ---------------------------------------------------------------- how you come across: its own band, and a head like a life chapter's
   The title and the lede on the left and the part's painting level with them, the life chapters' head (32-domains.css .ch-head),
   so the band opens on a picture and a short read before the three panels run the full width under it. */
.page-chapter .ci-sec .ci-across{margin-top:0}
.page-chapter .ci-across-top{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:0 52px;align-items:center}
.page-chapter .ci-across-intro{min-width:0}
.page-chapter .ci-across-art{margin:0;width:100%}
.page-chapter .ci-sec .ci-across-title{font:300 var(--rt-stand)/1.18 var(--display);letter-spacing:-.022em;max-width:22ch}
.page-chapter .ci-sec .ci-across-lede{margin-top:20px;font-size:var(--rt-read);line-height:1.66;max-width:60ch}
.page-chapter .ci-sec .ci-across-top+.ci-across-list{margin-top:44px}
.page-chapter .ci-sec .ch-others-foot{margin-top:34px}

/* ---------------------------------------------------------------- tablet */
@media (max-width:1100px){
  .page-chapter .ci-hex{grid-template-columns:330px minmax(0,1fr);gap:32px}
  .page-chapter .ci-low{grid-template-columns:minmax(0,290px) minmax(0,1fr);gap:0 36px}
  .page-chapter .ci-across-panel{grid-template-columns:minmax(0,250px) minmax(0,1fr);gap:0 36px}
}

/* ---------------------------------------------------------------- stacked */
@media (max-width:860px){
  .page-chapter .ci-hex{grid-template-columns:minmax(0,1fr);gap:26px}
  .page-chapter .ci-hex .ch-hexbox{max-width:440px;width:100%}
  .page-chapter .ci-third{margin-top:30px;padding-top:24px}
  .page-chapter .ci-third.ci-second{margin-top:0;padding-top:0}
  .page-chapter .ci-sec .ci-type-read .rt-angles{margin-top:30px}
  .page-chapter .ci-low{grid-template-columns:minmax(0,1fr);gap:22px 0;padding:28px 0 30px}
  .page-chapter .ci-low-name{font-size:24px}
  .page-chapter .ci-third-name{font-size:23px}
  .page-chapter .ci-across{margin-top:48px}
  .page-chapter .ci-across-panel{grid-template-columns:minmax(0,1fr);gap:18px 0;padding:28px 0 30px}
  .page-chapter .ci-across-name{font-size:24px}
  .page-chapter .ci-across-hex{max-width:170px;margin-top:12px}
  /* the head of how you come across stacks as a life chapter's does: the words, then the painting under them */
  .page-chapter .ci-across-top{grid-template-columns:minmax(0,1fr);gap:0}
  .page-chapter .ci-across-art{margin-top:24px}
  .page-chapter .ci-sec .ci-across-top+.ci-across-list{margin-top:32px}
}
/* the type card stacks where the flagship's does (37-report-pacing.css), painting over words; the rule above outranks that one */
@media (max-width:820px){
  .page-chapter .ci-sec .ci-type-card{grid-template-columns:minmax(0,1fr);gap:20px 0;padding:20px 18px}
  .page-chapter .ci-sec .ci-type-card .rp-tc-art{max-width:220px}
  .page-chapter .ci-sec .ci-type-card .ci-tc-scene{margin-top:12px;max-width:none}
}
@media (max-width:560px){
  .page-chapter .ci-hex-read .ch-pair .lt-md,.page-chapter .ci-third-head .lt-md,.page-chapter .ci-low-head .lt-md,.page-chapter .ci-across-head .lt-md{width:44px;height:44px;font-size:25px}
  .page-chapter .ci-low-ans li{font-size:14px}
}

@media print{
  .page-chapter .ci-low,.page-chapter .ci-third,.page-chapter .ci-across-panel{break-inside:avoid-page}
}


/* ===== 42-facets-magazine.css ===== */
/* ==========================================================================
   42-facets-magazine.css · owner: facets track (Sep 24, 2026)
   The Personality Deep Analysis report (/results/facets/, /sample/facets/) brought to the flagship's magazine look. Wayne picked
   proposal C in docs/mockups/magazine/ for the Personality Standard report, said of the result "it actually looks really good as
   is", and asked for the other reports at that level; his note on density was "it's just too information dense… need a bit more
   visual, low content panels for decoration."

   Markup: app/chapter-facets.js (traitBands, contrastBands, acrossSection). The grounds and the bands are the flagship's own
   mechanism (app/report-page.js fullZones) and the section title, the reading sizes and the closing question's type are the
   flagship's own rules (39-report-editorial.css), so this file only fits this report's pieces to them. It comes after both
   partials it builds on, and every rule is scoped to .page-facets, so nothing here reaches another report.

   THE CODE, the flagship's: blue is the reader's own numbers, white the reading about them, grey what surrounds the reading, warm
   a pause. And its color rule: blue is the reader's number, amber is a cost, and nothing else is tinted.
   ========================================================================== */

/* The quiet arcs 37-report-pacing.css draws inside a section's width are for a section that is one band. On these bands they ran
   through the reading (one crossed a facet's text at 1440), and that layer's own rule is nothing under a line of type. The shared
   rule already takes the band's own rings away (39-report-editorial.css .rp-part::before); this takes the arcs inside it too. */
.page-facets .rp-full-sec.rp-part .wrap::before,
.page-facets .rp-full-sec.rp-part .wrap::after{display:none}

/* ---------------------------------------------------------------- open: the head and the score panel, on blue
   The band ends where the panel ends, so the panel gives up the space it kept for the reading that used to follow it. */
.page-facets .rp-full-sec.rp-part-open .fc-sec>.rt-score{margin:0}
/* the contrasts open on blue too: their pairs are the reader's own numbers, white sheets on the ground like the score panel */
.page-facets .rp-full-sec.rp-part-open .fc-contrast .fc-pairs{max-width:none}
.page-facets .rp-full-sec.rp-part-open .fc-contrast .fc-pair{border-color:var(--line)}
.page-facets .rp-full-sec.rp-part-open .fc-contrast-foot{margin-top:28px}

/* ---------------------------------------------------------------- read: the entry, then the six facets, on white
   The entry is the flagship's: two columns, the larger light line on the left and the reading on the right, one measure for both. */
.page-facets .fc-entry{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:0 56px;align-items:start}
.page-facets .fc-entry.is-solo{grid-template-columns:minmax(0,1fr);max-width:66ch}
.page-facets .fc-entry .fc-sec-intro{max-width:none;font:300 21px/1.5 var(--display);letter-spacing:-.006em;color:var(--ink)}
.page-facets .fc-entry .fc-sec-thesis{max-width:none;margin:0;padding:6px 0 0;border:0;font-size:17px;line-height:1.66;color:var(--ink)}
.page-facets .fc-reading .fc-sub-first{margin-top:52px;padding-top:20px;border-top:1px solid var(--ink)}

/* The six facets, as the flagship sets its six angles: no box and no tint, a hairline under each, amber only on the cost. Each
   keeps the painting that belongs to it at its head, now with the report's own corner rather than cut square by a card. */
.page-facets .fc-reading .fc-cards{gap:48px 40px;margin-top:22px}
.page-facets :is(.rp-full-sec,.rp-excerpt) .fc-reading .fc-card{background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:0 0 26px;overflow:visible}
.page-facets .fc-reading .fc-card-art{margin:0 0 18px;border-radius:var(--r)}
.page-facets .fc-reading .fc-card .fc-read+.fc-cost{position:relative;margin-top:16px;padding:0 0 0 16px;border-top:0}
.page-facets .fc-reading .fc-card .fc-cost::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:2px;background:var(--amber)}
.page-facets .fc-reading .fc-card .fc-read{font-size:15.5px}

/* ---------------------------------------------------------------- apart: where the facets pull apart, then at work and with people, on grey
   The split is one or two sentences about this reader, so it stands as the band's lede rather than as a boxed note. */
.page-facets .rp-full-sec.rp-part-apart{padding-block:60px 66px}
.page-facets .fc-apart .fc-split{max-width:none;margin:0;padding:0;border:0;background:none}
.page-facets .fc-apart .fc-split p{max-width:44ch;margin-top:14px;font:300 clamp(22px,2.2vw,28px)/1.36 var(--display);letter-spacing:-.014em;color:var(--ink)}
.page-facets .fc-apart .fc-split.has-split p{position:relative;padding-left:22px}
.page-facets .fc-apart .fc-split.has-split p::before{content:"";position:absolute;left:0;top:.3em;bottom:.3em;width:2px;background:var(--amber)}
.page-facets .fc-apart .fc-life{max-width:none;gap:0 48px;margin-top:44px;padding-top:20px;border-top:1px solid var(--ink)}
.page-facets .fc-apart .fc-life-list li{font-size:15px;color:var(--ink)}
.page-facets .fc-apart .fc-life-list li b{font-weight:700}

/* ---------------------------------------------------------------- close: one question, and nothing else on the band
   The flagship's closing question, word for word in its type: centered, the label in amber, the question large and light. The
   same rules hold for the trait given away whole on a locked page, where the bands are joined on one sheet. */
.page-facets :is(.rp-part-close,.rp-excerpt) .fc-question{max-width:none;margin:0;padding:0;border-radius:0;background:none;text-align:center}
.page-facets :is(.rp-part-close,.rp-excerpt) .fc-question-lab{font:800 12px/1.4 var(--body);letter-spacing:.11em;text-transform:uppercase;color:var(--amber-text)}
/* This report's questions name two facets and a trait, so they run about half as long again as the flagship's: at its 24ch they
   broke into six lines. The measure opens to 30ch and the size comes down one step, which sets them in three or four. */
.page-facets :is(.rp-part-close,.rp-excerpt) .fc-question-text{margin:16px auto 0;max-width:30ch;font:300 clamp(25px,3vw,34px)/1.3 var(--display);letter-spacing:-.02em;color:var(--ink)}

/* ---------------------------------------------------------------- the trait given away whole on a locked page
   One white sheet cannot change ground between bands, so the bands take room instead, as the flagship's free trait does. The
   sheet is not a full-report section, so the report's one section title (39-report-editorial.css, keyed on .rp-full-sec) did not
   reach it and the trait opened on the small default head; it takes the same title here, as the flagship's free trait takes its
   masthead. */
.page-facets .rp-excerpt .ch-sec>.sh{display:grid;justify-items:start;text-align:left;gap:6px;border-top:0;border-bottom:1px solid var(--line);padding:0 0 20px;margin-bottom:34px}
.page-facets .rp-excerpt .ch-sec>.sh h2{order:2;max-width:18ch;font:300 var(--rt-name)/1 var(--display);letter-spacing:-.032em;color:var(--ink)}
.page-facets .rp-excerpt .ch-sec>.sh .sh-num{order:1;align-self:start;justify-self:start;width:auto;height:auto;padding:0;background:none;border-radius:0;color:var(--blue-ink);font:800 var(--rt-lab)/1.4 var(--body);letter-spacing:.13em;text-transform:uppercase}
.page-facets .rp-excerpt .fc-reading{margin-top:48px}
.page-facets .rp-excerpt .fc-apart{margin-top:60px}
.page-facets .rp-excerpt .fc-question{margin-top:72px}

/* ---------------------------------------------------------------- how you come across: two rests in the longest run of prose
   The pull quotes are the flagship's (38-report-marks.css .rp-pull); here they only take their place in the list. */
.page-facets .fc-across .fc-pull{max-width:1040px;margin:40px 0 0}
.page-facets .fc-across .fc-pull+.fc-across-list{margin-top:20px}

/* ---------------------------------------------------------------- your answers: 120 statements in two columns on a wide screen
   The flagship lists 50 statements; this report lists 120, grouped five traits by six facets by four, and in one column that was
   9,000px of the page at 1440, the longest single band in any report. Each trait's six facets now stand two to a row under the
   trait's name, so the list is half as tall and still reads trait by trait in the order the report reads. Nothing else changes:
   the same rows, the same numbers, the same answers, and one column again below 1100px. */
@media (min-width:1100px){
  .page-facets .rp-full-sec .rt-ans-part{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 56px;align-items:start}
  .page-facets .rp-full-sec .rt-ans-part-h{grid-column:1/-1}
  .page-facets .rp-full-sec .rt-ans-part .rt-ans-row{grid-template-columns:28px minmax(0,1fr) minmax(0,176px)}
}

/* ---------------------------------------------------------------- narrower screens */
@media (max-width:860px){
  .page-facets .fc-entry{grid-template-columns:minmax(0,1fr);gap:18px 0}
  .page-facets .fc-entry .fc-sec-thesis{padding-top:0}
}
@media (max-width:720px){
  .page-facets .rp-full-sec.rp-part-apart{padding-block:40px 46px}
  .page-facets .fc-entry .fc-sec-intro{font-size:19px}
  .page-facets .fc-reading .fc-sub-first{margin-top:38px}
  .page-facets .fc-reading .fc-cards{gap:36px}
  .page-facets .fc-apart .fc-split p{font-size:21px}
  .page-facets .fc-apart .fc-life{gap:0;margin-top:32px}
  .page-facets .fc-apart .fc-life-col+.fc-life-col{margin-top:22px}
  .page-facets .fc-across .fc-pull{margin-top:30px}
}

/* ---------------------------------------------------------------- preferences and print */
@media (prefers-contrast:more){
  .page-facets .rp-full-sec .fc-reading .fc-card{border-bottom-color:var(--ink)}
}
@media print{
  .page-facets .rp-full-sec.rp-part-apart{break-before:auto}
  .page-facets .fc-reading .fc-card{break-inside:avoid-page}
}


/* ===== 45-pillars.css ===== */
/* ==========================================================================
   45-pillars.css · owner: pillars track (part 2)
   Page: /results/pillars/. Markup: src/pages/pillars-results.mjs (shell) and app/chapter-pillars.js (rendered result).
   Builds on the chapter styles in 40-chapters.css. Every rule is scoped under .page-pillars.
   Emphasis (docs/SITE_KIT.md §13): the result sections keep the white boxes; research notes, philosophy, what research says about change,
   the limits and the support line are quiet panels or thin-rule notes; credits are fine print.
   The parked resource card is plain on purpose: white box, ink border, no alarm colors, no art (PILLARS.md §8.4).
   ========================================================================== */

.page-pillars .pl-top{max-width:860px}
.page-pillars .pl-top .lede{max-width:60ch}
.page-pillars .pl-top .notice{max-width:720px}

/* ---------------------------------------------------------------- the support line (PILLARS.md §8.0): a quiet panel, ink text, always open */
.page-pillars .pl-support{max-width:860px;padding:16px 22px 18px}
.page-pillars .pl-support-text p{font-size:var(--fs-small);font-weight:500;line-height:1.5;max-width:72ch}
.page-pillars .pl-support-text p+p{margin-top:4px}
.page-pillars .pl-support-links{display:inline-block;font-weight:700}
.page-pillars .pl-support-links a{position:relative;display:inline-block;padding:4px 0}
/* a finger-sized target (about 44px tall) without moving the text, as the shared stand-alone links do */
.page-pillars .pl-support-links a::after{content:"";position:absolute;left:-4px;right:-4px;top:-8px;bottom:-8px}

/* ---------------------------------------------------------------- parked resource card */
.page-pillars .pl-resource{max-width:860px;margin-top:34px}
.page-pillars .pl-resource-title{font-size:clamp(22px,3vw,30px);line-height:1.15}
.page-pillars .pl-resource-title:focus,.page-pillars .pl-resource-title:focus-visible{outline:none;box-shadow:none}
.page-pillars .pl-resource .body{max-width:64ch}
.page-pillars .pl-resource .pl-support-text{margin-top:14px;padding-top:12px;border-top:var(--bw-thin) dashed var(--rule-soft)}

/* ---------------------------------------------------------------- life overall */
.page-pillars .pl-life{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:22px;align-items:start}
.page-pillars .pl-big-number{font-family:var(--heading);font-size:clamp(48px,7vw,76px);line-height:1;margin:8px 0 18px;font-weight:700;font-variant-numeric:tabular-nums}
.page-pillars .pl-big-number small{font-family:inherit;font-size:.3em;letter-spacing:.04em;margin-left:6px}
/* the score panels (R8, app/score-panel.js, 39-score-panel.css). Life satisfaction is the left column's own sheet, level with the
   rows beside it. Inside a pillar's card the panel is the card's first row rather than a card in a card: no sheet of its own, a
   hairline under it like the rows below, and a smaller figure, because a card is half the width of a report section. */
.page-pillars .pl-life-big .rt-score{margin-top:0}
.page-pillars .pl-pillar .rt-score.is-inset{--rt-fig:clamp(32px,3vw,40px);margin:0 0 4px;padding:0 0 18px;border:0;border-bottom:var(--bw-thin) dashed var(--rule-soft);border-radius:0;background:none}
.page-pillars .pl-pillar .rt-score.is-inset .sp-note{font-size:13px}

/* ---------------------------------------------------------------- rating and answer rows */
.page-pillars .pl-rating,.page-pillars .pl-answer{padding:12px 0;border-bottom:var(--bw-thin) dashed var(--rule-soft)}
.page-pillars .pl-rating:first-child,.page-pillars .pl-answer:first-child{padding-top:0}
.page-pillars .pl-rating-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-bottom:8px}
.page-pillars .pl-rating-label,.page-pillars .pl-answer-label{font-weight:700;font-size:15px;flex:1 1 180px;min-width:0}
.page-pillars .pl-rating-value{font-weight:700;font-size:18px;white-space:nowrap}
.page-pillars .pl-rating-value small{font-size:12px;font-weight:500}
.page-pillars .pl-ends{display:flex;justify-content:space-between;gap:12px;font-size:12px;margin-top:4px}
.page-pillars .pl-caption{margin-top:6px;font-size:var(--fs-fine);font-weight:500;line-height:1.5;color:var(--muted)}
.page-pillars .pl-answer{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.page-pillars .pl-answer-value{font-weight:700;font-size:16px}
.page-pillars .pl-answer .pl-caption{flex-basis:100%}
.page-pillars .pl-rows .pl-rating:last-of-type{border-bottom:0}

/* ---------------------------------------------------------------- the gap view */
.page-pillars .pl-gap-wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:22px;align-items:start}
.page-pillars .pl-gap-legend{display:flex;flex-wrap:wrap;gap:6px 20px;margin-bottom:14px}
.page-pillars .pl-gap-legend span{display:inline-flex;align-items:center;gap:8px}
.page-pillars .pl-gap-legend .pl-gap-dot{position:static;margin:0;display:inline-block}
.page-pillars .pl-gap-list{list-style:none;margin:0;padding:0}
.page-pillars .pl-gap-row{display:grid;grid-template-columns:150px minmax(0,1fr) auto;gap:6px 18px;align-items:center;padding:14px 0;border-bottom:var(--bw-thin) dashed var(--rule-soft)}
.page-pillars .pl-gap-row:last-child{border-bottom:0}
.page-pillars .pl-gap-name{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.page-pillars .pl-gap-track{position:relative;height:12px;border:var(--bw-thin) solid var(--line);background:var(--ground);margin:0 11px}
.page-pillars .pl-gap-line{position:absolute;top:50%;height:4px;margin-top:-2px;background:var(--ink)}
.page-pillars .pl-gap-dot{position:absolute;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;border:var(--bw) solid var(--line)}
.page-pillars .pl-gap-going{background:var(--ink);width:14px;height:14px;margin:-7px 0 0 -7px;border-width:2px}
.page-pillars .pl-gap-matters{width:24px;height:24px;margin:-12px 0 0 -12px}
.page-pillars .pl-gap-matters{background:var(--surface);border-color:var(--cobalt)}
.page-pillars .pl-gap-read{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.page-pillars .pl-gap-nums{font-size:13px;font-weight:700;white-space:nowrap}
.page-pillars .pl-gap-text{grid-column:2/-1;margin:0}

/* ---------------------------------------------------------------- pillar cards */
.page-pillars .pl-pillars{align-items:start}
.page-pillars .pl-pillar-body{padding:18px 22px 20px}
.page-pillars .pl-pillar .callout{margin:12px 0}
/* a research line inside a card is supporting: a thin rule beside ink text, so the answers above it read first */
.page-pillars .pl-research{margin-top:16px;padding-top:10px;border-top:var(--bw-thin) solid var(--quiet-rule);font-size:var(--fs-fine);font-weight:500;line-height:1.5;color:var(--muted)}
.page-pillars .pl-tip{margin-top:14px;padding:2px 0 2px 12px;border-left:3px solid var(--sage)}
.page-pillars .pl-not-measured{margin-top:10px;color:var(--muted)}
.page-pillars .pl-mood{margin-top:14px}

/* ---------------------------------------------------------------- meaning, change, history */
.page-pillars .pl-pair{display:flex;flex-wrap:wrap;gap:12px 48px}
.page-pillars .pl-pair-number{font-family:var(--heading);font-size:clamp(40px,6vw,60px);line-height:1;margin:6px 0 0;font-weight:700;font-variant-numeric:tabular-nums}
.page-pillars .pl-pair-number small{font-family:inherit;font-size:.3em;letter-spacing:.04em;margin-left:6px}
.page-pillars .pl-meaning-more{margin-top:14px}
.page-pillars .pl-meaning-more .pl-philosophy{margin-top:12px}
.page-pillars .pl-philosophy-head{display:flex}
.page-pillars .pl-change{max-width:860px}
.page-pillars .pl-change-list{list-style:none;margin:10px 0 0;padding:0}
.page-pillars .pl-change-list li{padding:8px 0;border-bottom:var(--bw-thin) dashed var(--rule-soft);font-size:15px}
.page-pillars .pl-change-list li:last-child{border-bottom:0}
.page-pillars .pl-diff{list-style:none;margin:10px 0 0;padding:0}
.page-pillars .pl-diff li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 14px;padding:8px 0;border-bottom:var(--bw-thin) dashed var(--rule-soft);font-size:14px}
.page-pillars .pl-diff li:last-child{border-bottom:0}
.page-pillars .pl-diff li span:first-child{font-weight:700}
.page-pillars .pl-next{max-width:860px}

/* ---------------------------------------------------------------- narrow screens */
@media (max-width:900px){
  .page-pillars .pl-life,.page-pillars .pl-gap-wrap{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .page-pillars .pl-gap-row{grid-template-columns:minmax(0,1fr) auto}
  .page-pillars .pl-gap-track{grid-column:1/-1;grid-row:2}
  .page-pillars .pl-gap-text{grid-column:1/-1}
  .page-pillars .pl-pillar-body{padding:16px}
}

/* ---------------------------------------------------------------- where you are, and where you want to be (D75; goalSection) */
.page-pillars .pl-goal-legend{display:flex;gap:6px 22px;margin-bottom:10px}
.page-pillars .pl-goal-legend span{display:inline-flex;align-items:center;gap:8px;font-weight:700}
.page-pillars .pl-goal-list{list-style:none;margin:0;padding:0}
.page-pillars .pl-goal-row{display:grid;grid-template-columns:150px minmax(0,1fr) 150px;gap:8px 20px;align-items:center;padding:16px 0;border-bottom:var(--bw-thin) solid var(--rule-soft)}
.page-pillars .pl-goal-row:last-child{border-bottom:0}
.page-pillars .pl-goal-name b{display:block;font-weight:700;font-size:16px;line-height:1.2}
.page-pillars .pl-goal-name small{font-weight:600;font-size:12.5px;color:var(--muted)}
/* money and work's two halves under their pillar's one name (Muse's review #21, Oct 2, 2026; app/chapter-pillars.js pillarRowsHtml):
   the name on a line of its own, then the two rows, each a row like any other with its own bar and numbers, their names set in from
   the left on their own column so every track keeps its left edge. Five pillars to the eye, six ratings kept (D53, D75). */
.page-pillars .pl-group{padding-top:14px;border-bottom:var(--bw-thin) solid var(--rule-soft)}
.page-pillars .pl-gap-list .pl-group{border-bottom-style:dashed}
.page-pillars .pl-group:last-child{border-bottom:0}
.page-pillars .pl-group-name{font-weight:700;font-size:16px;line-height:1.2}
.page-pillars .pl-group-rows{list-style:none;margin:0;padding:0}
.page-pillars .pl-group :is(.pl-goal-name,.pl-gap-name){padding-left:12px;border-left:2px solid var(--rule-soft)}
.page-pillars .pl-group :is(.pl-goal-name,.pl-gap-name) b{font-weight:600;font-size:15px}
.page-pillars .pl-goal-track{position:relative;height:14px;margin:0 13px;border-bottom:var(--bw) solid var(--line)}
.page-pillars .pl-goal-track>i{position:absolute;bottom:-3px;width:2px;height:8px;margin-left:-1px;background:var(--rule-soft)}
.page-pillars .pl-goal-arrow{position:absolute;bottom:3px;height:5px;background:var(--cobalt);border-radius:3px}
.page-pillars .pl-goal-arrow::after{content:"";position:absolute;right:-2px;top:50%;margin-top:-7px;border:7px solid transparent;border-left:10px solid var(--cobalt);border-right:0}
.page-pillars .pl-goal-arrow.is-back::after{right:auto;left:-2px;border-left:0;border-right:10px solid var(--cobalt)}
.page-pillars .pl-goal-now,.page-pillars .pl-goal-ring{position:absolute;bottom:-3px;border-radius:50%}
.page-pillars .pl-goal-now{width:20px;height:20px;margin:0 0 -8.5px -10px;background:var(--ink);border:var(--bw) solid var(--line);z-index:2}
.page-pillars .pl-goal-ring{width:26px;height:26px;margin:0 0 -11.5px -13px;background:var(--surface);border:4px solid var(--amber);z-index:1}
.page-pillars .pl-goal-key{position:static;display:inline-block;margin:0}
.page-pillars .pl-goal-read{display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.page-pillars .pl-goal-nums{font-weight:700;font-size:14.5px;white-space:nowrap;font-variant-numeric:tabular-nums}
.page-pillars .pl-goal-tag{font-weight:700;font-size:12px;padding:4px 8px;border:var(--bw-thin) solid var(--line);border-radius:var(--r-sm);background:var(--amber-wash)}
.page-pillars .pl-goal-tag.is-at{background:var(--sage-wash)}
.page-pillars .pl-goal-tag.is-quiet{background:var(--surface);color:var(--muted);border-color:var(--rule-soft)}
.page-pillars .pl-goal-scale{display:flex;justify-content:space-between;margin:4px 183px 0 176px;font-weight:700;font-size:12px;color:var(--muted)}
.page-pillars .pl-goal-first .moment-text{font-weight:700;font-size:20px;line-height:1.3;margin-top:8px}
@media (max-width:860px){
  .page-pillars .pl-goal-row{grid-template-columns:minmax(0,1fr) auto}
  .page-pillars .pl-goal-track{grid-column:1/-1;grid-row:2;margin:10px 13px 8px}
  .page-pillars .pl-goal-scale{margin:4px 3px 0}
}

/* ---------------------------------------------------------------- the flagship's magazine look (Sep 25, 2026)
   Wayne picked proposal C in docs/mockups/magazine/ for the Personality report, and asked for the others at that level ("just too
   information dense… need a bit more visual, low content panels for decoration"). Each section of this report is now its reading
   band and then its question alone on a warm band, which 39-report-editorial.css .rt-close draws exactly as it draws a trait's.
   What is this report's own is below. */

/* THE QUESTION, given away as the free section. A locked report prints the life section whole on one white sheet (report-page.js
   freeSectionZone, .rp-excerpt), where there is no warm band to stand on, so the question takes a hairline and room instead, as the
   Career report's does (41-career.css .ci-close). */
.page-pillars .rp-excerpt .pl-close{margin-top:44px;padding-top:40px;border-top:1px solid var(--line)}

/* THE SPINE (39-report-editorial.css): every block starts on the wrap's own edge. A section intro was centred at 72ch on its own
   width (34-report-pages.css), so it stood indented under a title that starts on the left; it keeps its measure on the left edge. */
.page-pillars .rp-full-sec p.ch-intro{max-width:72ch;margin:0 0 28px;font-size:17px;line-height:1.62}
.page-pillars .rp-full-sec .pl-meaning p.body{max-width:72ch;margin-inline:0}

/* WHAT IS ABOUT THE ASSESSMENT FOLDS AWAY (D106, app/ui.js contextFold): a card's research line and its note on what it does not
   measure now sit behind the one shared "About this information" line at the card's foot, so a card reads as the reader's answers. */
.page-pillars .pl-pillar .pl-about{margin-top:16px;padding-top:12px;border-top:var(--bw-thin) solid var(--quiet-rule)}
.page-pillars .pl-pillar .pl-about .pl-research{margin-top:10px;padding-top:0;border-top:0}
.page-pillars .pl-pillar .pl-about .pl-not-measured{margin-top:10px}
/* Sep 25, 2026, the second pass (Wayne: "general information ... should be minimized by default"). The sentences that repeat a
   chart's figure, say what a source counts or how its group was surveyed, and where an estimate comes from sit in the same fold,
   first, as the same fine print; section 1 gets the fold at the foot of its rows, the way every card has one. */
.page-pillars .pl-about .pl-fold-note{margin:10px 0 0;font-size:var(--fs-fine);font-weight:500;line-height:1.5;color:var(--muted)}
.page-pillars .pl-about .pl-fold-note:first-child{margin-top:4px}
.page-pillars .pl-about .est-note{margin-top:10px;font-size:var(--fs-fine);font-weight:500;line-height:1.5}
.page-pillars .pl-rows .pl-about{margin-top:14px;padding-top:12px;border-top:var(--bw-thin) solid var(--quiet-rule)}
/* The one line under each chart that names whose figures it draws: small, muted, and close to the chart it labels. */
.page-pillars .sp-group,.page-pillars .rt-score .sp-note.sp-group,.page-pillars .pl-pillar .rt-score.is-inset .sp-note.sp-group{margin:10px 0 0;font-size:12.5px;font-weight:500;line-height:1.45;color:var(--muted)}
.page-pillars .pl-rows .sp-group{margin-top:12px}
/* The three smaller ONS charts in section 1: the life chart's own plot at half its height, so the one large chart stays the first
   thing the eye lands on and these read as its companions. Their rows keep the question, the band and the answer. 56px is the
   floor: at 390px a UK average close to the right edge with the reader below it ("UK average, 7.39" beside a 6) has about 65px to
   the edge and breaks onto three lines, which is 51px, and a lower field lets the label run into the numbers under the axis. */
.page-pillars .pl-ons{padding-bottom:10px}
.page-pillars .pl-ons .pl-rating-head{margin-bottom:0}
.page-pillars .pl-ons .sp-field{height:56px}
/* An estimated average on one of our own questions (D120): the tick rides the reader's track and its line sits under the ends. */
.page-pillars .pl-rating.has-est .pl-est{margin:3px 0 0}
/* A low answer to "getting the support you need" keeps its plain reading in the open, under the chart it reads. */
.page-pillars .pl-support-read{margin:10px 0 2px}

/* THE SIXTH CELL. Five cards in two columns leave the foot of the grid half empty, beside the last card and as tall as it. The pull
   quote there is the one low-content panel in the report's densest section: the flagship's tinted bar, stood up to fill the cell,
   its line set in the middle of it. On a phone the grid is one column and the quote follows the fifth card at its own height. */
.page-pillars .pl-pillars .pl-pull-cell{align-self:stretch;display:grid;min-width:0}
.page-pillars .pl-pillars .pl-pull-cell .rp-pull{display:grid;align-content:center;margin:0;padding:40px 44px;border-radius:0 var(--r) var(--r) 0}
.page-pillars .pl-pillars .pl-pull-cell .rp-pull p{max-width:22ch}

/* WHAT'S REALISTIC TO CHANGE, as a ruled list across the band. It was a grey panel stopping at 860px on a grey band, so it read as
   a box floating in a box with the right third empty. On the band that already says "reference", the three findings are three
   columns under one ink rule, like the six angles of a trait (.rt-angles), and the paragraph that follows them runs at the reading
   size on the spine. Not a word moved. */
.page-pillars .rp-full-sec .pl-change{max-width:none}
.page-pillars .rp-full-sec .pl-change-research{padding:0;border:0;border-radius:0;background:none;box-shadow:none}
.page-pillars .rp-full-sec .pl-change-research .box-title{font:800 var(--rt-lab,12px)/1.4 var(--body);letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.page-pillars .rp-full-sec .pl-change-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 44px;margin-top:14px;border-top:1px solid var(--ink)}
.page-pillars .rp-full-sec .pl-change-list li{padding:20px 0 24px;border-bottom:1px solid var(--line);font-size:15px;line-height:1.58}
.page-pillars .rp-full-sec .pl-change-list li:last-child{border-bottom:1px solid var(--line)}
.page-pillars .rp-full-sec .pl-change-list li b{font-weight:800;color:var(--ink)}
.page-pillars .rp-full-sec .pl-change-research>p.small{max-width:72ch;margin-top:30px;font-size:var(--rt-read,17px);line-height:1.66}

/* THE PAINTINGS (docs/art-briefs/pillars-gouache/spec.json) are painted 3:2 and shown as the 5:2 strip every section painting
   takes. Each one's group of objects sits a little off the middle of its height, so the strip is moved to it rather than trimmed. */
.page-pillars .pl-art-pillars img{object-position:50% 68%}
.page-pillars .pl-art-meaning img{object-position:50% 38%}
.page-pillars .pl-art-since img{object-position:50% 56%}

@media (max-width:860px){
  .page-pillars .pl-pillars .pl-pull-cell .rp-pull{padding:26px 24px}
  .page-pillars .rp-full-sec .pl-change-list{grid-template-columns:minmax(0,1fr);gap:0}
}



/* ===== 46-account.css ===== */
/* /account/ with accounts on (Oct 6, 2026; src/pages/account.mjs, app/account-page.js): sign in with an emailed code or Google, then the
   account itself. D88 tokens only: white ground, hairline boxes, 14px corners, 10px buttons, Figtree for every label and input, the light
   serif for the one heading. Drawn only while flags.accounts is on.
   Oct 6, 2026, Wayne: "make the home page for log in more intuitive. now it's just like a blank space". Signing in, the card has the
   home hero's painting and three short points beside it (under it below 960px); signed in, the page is a card for each finished
   assessment with a button to its result. */
.page-account .account-h{margin:14px 0 0;font:300 clamp(34px,4.4vw,48px)/1.08 var(--display);letter-spacing:-.02em;outline:none}
.page-account .account-top{background:var(--ground)}
.page-account .account-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(32px,4vw,56px);align-items:start}
.page-account .account-main{min-width:0}
.page-account .account-page:not([data-state="in"]) .account-main{max-width:560px}
.page-account .account-aside{display:none}
.page-account .account-page:is([data-state="out"],[data-state="code"]) .account-aside:not(.account-aside-in){display:block}
.page-account .account-page[data-state="in"] .account-aside-in{display:block}
@media (min-width:960px){
  .page-account .account-page:is([data-state="out"],[data-state="code"],[data-state="in"]) .account-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .page-account .account-aside{padding-top:30px}
}
.page-account .account-art{margin:0;border-radius:var(--r);overflow:hidden;background:var(--ground-deep)}
.page-account .account-art img{display:block;width:100%;height:100%;object-fit:cover}
.page-account .account-points{margin:22px 0 0;padding:0;list-style:none;display:grid;gap:14px}
.page-account .account-points li{display:flex;align-items:flex-start;gap:12px;font:500 16.5px/1.45 var(--body);color:var(--ink)}
.page-account .account-points .account-tick{flex:0 0 auto;width:26px;height:26px;padding:4px;margin-top:-1px;border-radius:50%;background:var(--blue-wash);color:var(--cobalt)}

/* signed in: the welcome band (Oct 6, 2026). Wayne: "make the homepage MORE visually engaging ... more illustrations, CTA buttions,
   things for them to see". A blue wash band with the reader's type painting, their letter tiles and one next step; the cards of Your
   results follow in their own bands (.account-results, styled by 34-results-cards.css under .page-results). */
.page-account .account-page[data-state="in"] .account-top{background:var(--blue-wash)}
.page-account .account-page[data-state="in"] .account-live{padding-bottom:clamp(48px,6vw,84px)}
.page-account .account-signed{margin:12px 0 0;font:500 var(--fs-small)/1.5 var(--body);color:var(--muted)}
.page-account .account-signout{margin-left:6px;padding:0;border:0;background:none;font:inherit;font-weight:600;color:var(--cobalt);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.page-account .account-signout:hover{color:var(--blue-ink)}
.page-account .account-type{margin-top:26px}
.page-account .account-type-label{margin:0;font:700 12px/1.3 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--blue-ink)}
.page-account .account-type-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:10px 0 0}
.page-account .account-tiles{display:inline-flex;gap:6px}
.page-account .account-tiles .lt{background:#fff}
.page-account .account-type-name{font:400 clamp(24px,2.6vw,30px)/1.15 var(--display);color:var(--ink)}
.page-account .account-in-lede{margin:22px 0 0;max-width:34em}
.page-account .account-in-cta{margin-top:26px}
.page-account .account-in-guarantee{margin-top:20px}
.page-account .account-type-art{margin:0}
.page-account .account-type-art img{display:block;width:100%;height:auto;border-radius:var(--r);box-shadow:var(--sh-sm);background:var(--ground-deep)}
.page-account .account-type-art.is-type{max-width:380px;margin-inline:auto}
@media (max-width:959px){
  .page-account .account-type-art{max-width:520px}
  .page-account .account-type-art.is-type{max-width:260px;margin-inline:auto}
}
/* The cards come from Your results, "Past takes" and all (app/account-page.js wires it). When the band already shows the guarantee under
   its buy button, the list doesn't repeat it. */
.page-account .account-page:has([data-account-guarantee]:not([hidden])) .account-results .rp-yr-guarantee{display:none}

/* the sign-in card */
.page-account .account-box{max-width:520px;box-shadow:var(--sh-sm)}
.page-account .account-label{display:block;margin:0 0 8px;font:600 15px/1.3 var(--body);color:var(--ink)}
.page-account .account-input{display:block;width:100%;min-height:50px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-btn);
  background:#fff;color:var(--ink);font:500 17px/1.3 var(--body)}
.page-account .account-input:focus{outline:2px solid var(--blue-mark);outline-offset:1px;border-color:var(--blue-mark)}
.page-account .account-code{font-size:24px;letter-spacing:.32em;font-variant-numeric:tabular-nums}
.page-account .account-google{min-height:52px;font-size:16px}
/* "Continue with Google" as Google draws it (Oct 7, 2026): its light theme, white with a #747775 hairline, #1F1F1F words and its own
   four-color G (src/pages/account.mjs GOOGLE_G), on /account/ and on the sign-in card over a result. Roboto first, as Google asks,
   where the device already has it (every Android phone); nothing is downloaded for it. :not(.btn-primary) so a dark band's button
   rule (05-components.css) never turns it into a clear outline. */
.btn.btn-google:not(.btn-primary){display:flex;align-items:center;justify-content:center;gap:12px;padding-inline:16px;background:#fff;color:#1F1F1F;
  border:1px solid #747775;box-shadow:none;font-family:Roboto,var(--body);font-weight:500;letter-spacing:.01em}
.btn.btn-google:not(.btn-primary):hover{background:#F7F8F8;color:#1F1F1F;border-color:#747775;box-shadow:0 1px 2px rgba(60,64,67,.3),0 1px 3px 1px rgba(60,64,67,.15)}
.btn.btn-google:not(.btn-primary):focus-visible{outline:2px solid var(--blue-mark);outline-offset:2px}
.btn-google .g-mark{flex:none;display:block;width:20px;height:20px}
.page-account .account-or{display:flex;align-items:center;gap:12px;margin:18px 0;font:500 var(--fs-small)/1 var(--body);color:var(--muted)}
.page-account .account-or::before,.page-account .account-or::after{content:"";flex:1;height:1px;background:var(--line)}
.page-account .account-status{margin:14px 0 0;font:500 var(--fs-small)/1.5 var(--body);color:var(--muted)}
.page-account .account-status.is-error{color:var(--red)}
.page-account .account-agree{color:var(--muted)}

@media (max-width:640px){
  .page-account .account-box{padding:22px 18px}
}


/* ===== 47-account-gate.css ===== */
/* The sign-in gate on result pages (Oct 6, 2026; app/account-gate.js, src/pages/account.mjs gateTemplate). Wayne: "providing a
   glassmorphic blur of their preview to attract their curiosity and ask to sign in". The reader's own result is blurred where it is drawn
   and a frosted card floats over it, below the bar, while the page still scrolls behind it. D88 tokens and type; the frosted glass is his
   call for this one card, beside the header and footer chrome. A browser without backdrop blur gets a near-white card instead. */
.ag-blurred{filter:blur(9px);pointer-events:none;user-select:none}
.ag{position:fixed;inset:0;z-index:60;display:flex;justify-content:center;align-items:flex-start;padding:max(108px,14vh) 16px 24px;
  overflow-y:auto;pointer-events:none}
.ag-card{pointer-events:auto;width:100%;max-width:440px;padding:30px 28px 24px;border-radius:14px;border:1px solid rgba(255,255,255,.78);
  background:rgba(255,255,255,.66);box-shadow:0 24px 60px rgba(13,20,32,.18);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .ag-card{background:rgba(255,255,255,.96)} }
.ag-title{margin:0;font:300 clamp(28px,3.4vw,36px)/1.1 var(--display);letter-spacing:-.015em;color:var(--ink);outline:none}
.ag-lede{margin:10px 0 18px;font:400 16px/1.5 var(--body);color:var(--muted)}
.ag-google{min-height:50px;font-size:16px}
.ag-or{display:flex;align-items:center;gap:12px;margin:16px 0;font:500 var(--fs-small)/1 var(--body);color:var(--muted)}
.ag-or::before,.ag-or::after{content:"";flex:1;height:1px;background:var(--line)}
.ag-label{display:block;margin:0 0 8px;font:600 15px/1.3 var(--body);color:var(--ink)}
.ag-input{display:block;width:100%;min-height:50px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-btn);
  background:#fff;color:var(--ink);font:500 17px/1.3 var(--body)}
.ag-input:focus{outline:2px solid var(--blue-mark);outline-offset:1px;border-color:var(--blue-mark)}
.ag-code{font-size:24px;letter-spacing:.32em;font-variant-numeric:tabular-nums}
.ag-sent{margin:0 0 14px;font:400 15.5px/1.5 var(--body);color:var(--ink)}
.ag-status{margin:12px 0 0;font:500 var(--fs-small)/1.5 var(--body);color:var(--muted)}
.ag-status.is-error{color:var(--red)}
.ag-agree{margin:16px 0 0;font:400 13.5px/1.5 var(--body);color:var(--muted)}
.ag-agree a{color:inherit}
@media (max-width:640px){
  .ag{padding-top:88px}
  .ag-card{padding:24px 18px 20px}
}


/* ===== 50-types.css ===== */
/* ==========================================================================
   50-types.css · owner: Types agent
   Pages: /types/ (hub, page-hub), /types/interests/ and the 30 /types/interests/<code>/ pages.
   Only this agent edits this file. Shared pieces live in 00-base.css and
   05-components.css (read them, never edit them); see docs/SITE_KIT.md.
   Scope every rule under the page body class (e.g. .page-types) so pages cannot
   leak into each other.
   Mockups: docs/mockups/riasec/1-library, 2-type-page; docs/mockups/types/0-library,
   1-mentor; docs/mockups/result-v3 (deeper sections).
   ========================================================================== */

/* ---------------------------------------------------------------- shared on both */
.page-types .tp-intro{max-width:72ch;margin-bottom:22px}
.page-types .tp-cta,.page-types .lib-cta{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px 40px;align-items:center}
.page-types .tp-cta .small,.page-types .lib-cta .small{max-width:78ch;font-size:16px}
.page-types .tp-cta h2,.page-types .lib-cta h2{font-size:22px}
@media (max-width:720px){
  .page-types .tp-cta,.page-types .lib-cta{grid-template-columns:minmax(0,1fr)}
  .page-types .tp-cta .btn,.page-types .lib-cta .btn{justify-self:stretch}
}

/* ================================================================== library */

.page-types .lib-hero{--aside:420px}
.page-types .lib-hero .lede{max-width:60ch}
.page-types .lib-hexbox{margin:0;padding:18px 22px 16px}
.page-types .lib-hexbox .hex{max-width:100%}
.page-types .lib-hexbox figcaption{margin:10px auto 0;text-align:center;max-width:38ch}

/* how the letters work: the introduction above the 30 types (Sep 22). The hexagon and the six areas beside it, then two quiet cards. */
.page-types .lib-start-lede{max-width:66ch;margin-bottom:28px}
.page-types .lib-hexbox-label{margin-bottom:6px;color:var(--muted)}
.page-types .lib-areas{align-self:stretch}
.page-types .lib-areas>.label{color:var(--muted)}
.page-types .lib-area-list{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);gap:2px;margin-top:10px}
.page-types .lib-area-list a{display:flex;align-items:flex-start;gap:12px;padding:8px 10px;border-radius:var(--r-sm);text-decoration:none;color:inherit}
.page-types .lib-area-list a:hover{background:var(--blue-wash)}
.page-types .lib-area-list .lt{box-shadow:none;flex:none}
.page-types .lib-area-list b{display:block;font-size:16px;line-height:1.2}
.page-types .lib-area-list small{display:block;font-size:14px;line-height:1.35;color:var(--muted);margin-top:2px}
.page-types .lib-start .lib-how-row{grid-template-columns:minmax(0,500px) minmax(0,1fr)}
.page-types .lib-start-side{display:flex;flex-direction:column;gap:22px;justify-content:space-between}
.page-types .lib-start .lib-how{grid-template-columns:repeat(2,minmax(0,1fr))}

/* what distance means: the three positions the filter offers, each one drawn (Sep 22) */
.page-types .lib-kinds-lead{max-width:70ch;margin-bottom:24px}
.page-types .lib-kind-cards{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.page-types .lib-kind-card{display:flex;flex-direction:column;align-items:flex-start}
.page-types .lib-kind-hex{width:100%;max-width:210px;margin:0 auto 12px}
.page-types .lib-kind-card .box-title{font-size:19px}
.page-types .lib-kind-full{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:6px 0 10px}
.page-types .lib-kind-card .small{font-size:var(--fs-small);line-height:1.5}
@media (max-width:860px){
  .page-types .lib-hexbox{padding:14px 8px 12px}
  .page-types .lib-start .lib-how-row{grid-template-columns:minmax(0,1fr)}
  .page-types .lib-kind-cards{grid-template-columns:minmax(0,1fr);gap:16px}
  .page-types .lib-kind-card{align-items:stretch}
  .page-types .lib-kind-hex{max-width:150px;margin:0 0 6px}
  .page-types .lib-start .lib-how{grid-template-columns:minmax(0,1fr)}
}

/* how to read a type: supporting, after the 30 types (quiet panels, small badges, muted position labels) */
.page-types .lib-how>li{display:flex;flex-direction:column}
.page-types .lib-how-top{display:flex;align-items:center;gap:12px;min-height:30px;margin-bottom:10px}
.page-types .lib-how-top .label{margin-left:auto;text-align:right;color:var(--muted)}
.page-types .lib-how .lt{box-shadow:none}
.page-types .lib-kinds{display:flex;flex-wrap:wrap;gap:6px}
.page-types .lib-how .small{font-size:var(--fs-small);line-height:1.5}

/* family jump links (no JavaScript) and filter (with it) */
.page-types .lib-jump{margin-bottom:28px}
.page-types .lib-jump .chip{min-height:40px}
.page-types .lib-filter{display:grid;gap:12px;padding:16px 20px;margin-bottom:34px;box-shadow:var(--sh-sm)}
.page-types .lib-filter-group{display:grid;grid-template-columns:170px minmax(0,1fr);gap:10px 16px;align-items:center}
.page-types .lib-filter-group+.lib-filter-group{padding-top:12px;border-top:var(--bw-thin) dashed var(--rule-soft)}
.page-types .lib-filter .chip{min-height:38px}
.page-types .lib-chip-fam{padding-left:6px}
.page-types .lib-chip-fam .lt-xs{width:24px;height:24px;font-size:13px}
.page-types .lib-chip-fam[aria-pressed=true] .lt{border-color:var(--ground)}
.page-types .lib-status{font-size:var(--fs-note);font-weight:600;padding-top:10px;border-top:var(--bw-thin) dashed var(--rule-soft)}
@media (max-width:720px){
  .page-types .lib-filter{padding:14px}
  .page-types .lib-filter-group{grid-template-columns:minmax(0,1fr)}
}

/* filtering, in two short phases (app/library-filter.js, Sep 22). What is leaving fades where it stands, then everything that stays
   slides from where it was into its new place. transform and opacity only, never a layout property (D67). A reader who has asked for
   less motion never gets either class, and the media query below is the belt to that script's braces. */
.page-types :is(.lib-item,.lib-fam).is-leaving{opacity:0;pointer-events:none;transition:opacity 120ms ease-out,transform 120ms ease-out}
.page-types .lib-item.is-leaving{transform:scale(.97)}
.page-types :is(.lib-item,.lib-fam).lib-move{transition:transform 200ms cubic-bezier(.22,.61,.36,1),opacity 200ms ease-out;will-change:transform}
@media (prefers-reduced-motion:reduce){
  .page-types :is(.lib-item,.lib-fam):is(.is-leaving,.lib-move){transition:none}
}

/* your type on this device (app/library.js) */
.page-types .lib-mine{margin-bottom:34px}
.page-types .lib-mine-box{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding:14px 18px}
.page-types .lib-mine-box p{font-size:16px;font-weight:600}
.page-types .lib-mine-box b{font-family:var(--heading);font-weight:700;letter-spacing:-.01em;font-size:18px}
.page-types .lib-item.is-mine .type-card{outline:4px solid var(--cobalt);outline-offset:4px}
.page-types .lib-mine-tag{margin-top:10px;align-self:flex-start}

/* a family: coloured header strip, then five cards (a jump to one lands 16px under the site's bar, 00-base.css) */
.page-types .lib-fam+.lib-fam{margin-top:52px}
.page-types .lib-fam-head{display:grid;grid-template-columns:auto minmax(0,max-content) minmax(0,1fr) auto;gap:16px 22px;align-items:center;
  padding:14px 20px 14px 14px;margin-bottom:24px;border:1px solid var(--line);box-shadow:var(--sh-sm);
  background:var(--glass);color:var(--ink);border-radius:var(--r)}
.page-types .lib-fam-head .lt{box-shadow:none}
.page-types .lib-fam-name{padding-right:4px}
.page-types .lib-fam-name h3{font-size:30px;line-height:1;letter-spacing:-.02em;overflow-wrap:normal;white-space:nowrap}
.page-types .lib-fam-name p{font-weight:700;font-size:15px;letter-spacing:.03em;margin-top:5px}
.page-types .lib-fam-desc{font-size:16.5px;font-weight:500;line-height:1.4;max-width:52ch;padding-left:22px;border-left:var(--bw-thin) solid currentColor}
.page-types .lib-fam-count{font-weight:700;font-size:12px;letter-spacing:.01em;padding:5px 9px;border:var(--bw-thin) solid currentColor;white-space:nowrap;border-radius:var(--r-sm)}

.page-types .lib-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:22px}
.page-types .lib-item{min-width:0}
.page-types .lib-item[hidden]{display:none}
/* The painting runs to the top edge of the card (Sep 23, 2026), as it does on the sixteen four-letter cards now that Wayne has
   picked option B: the strip of letters that used to cap the picture reads as a kicker underneath it instead. The crop stays
   square here rather than the four-by-three the sixteen use, because at five across a square is 199 by 199 of painting against
   199 by 149 - on this page the four-by-three would have shown less of the scene, not more. */
.page-types .lib-grid .type-card .art{order:1;border-radius:calc(var(--r) - 1px) calc(var(--r) - 1px) 0 0}
/* the kicker is set a little tighter than the site default so the longest pairing, RC + CONVENTIONAL, stays on one line */
.page-types .lib-grid .type-card .band{order:2;border-radius:0;padding:9px 13px 0;gap:8px;font-size:11px;letter-spacing:.09em}
.page-types .lib-grid .type-card-body{order:3;padding:3px 13px 14px}
.page-types .lib-grid .type-card-name{font-size:19px;line-height:1.05}
.page-types .lib-grid .type-card-line{font-size:14.5px;line-height:1.38;margin-top:6px}
.page-types .lib-kind-tag{margin-top:10px;align-self:flex-start;white-space:normal;max-width:100%}
.page-types .lib-grid .type-card .link-more{font-size:12.5px}
.page-types .lib-empty{padding:4px 0 0}

@media (max-width:1240px){
  /* five cards as three over two */
  .page-types .lib-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .page-types .lib-item{grid-column:span 2}
  .page-types .lib-item:nth-child(4),.page-types .lib-item:nth-child(5){grid-column:span 3}
  .page-types .lib-item:nth-child(4) .art,.page-types .lib-item:nth-child(5) .art{aspect-ratio:3/2!important}
  .page-types .lib-grid.is-filtered .lib-item{grid-column:span 2}
  .page-types .lib-grid.is-filtered .lib-item .art{aspect-ratio:1/1!important}
  .page-types .lib-fam-head{grid-template-columns:auto minmax(0,1fr) auto}
  .page-types .lib-fam-desc{grid-column:1/-1;grid-row:2;padding-left:0;border-left:0;padding-top:12px;border-top:var(--bw-thin) solid currentColor;max-width:none}
}
@media (max-width:860px){
  .page-types .lib-hexbox{max-width:440px;width:100%}
}
@media (max-width:720px){
  .page-types .lib-fam+.lib-fam{margin-top:40px}
  .page-types .lib-fam-head{gap:12px 14px;padding:12px 14px 12px 12px;margin-bottom:18px}
  .page-types .lib-fam-head{grid-template-columns:auto minmax(0,1fr)}
  .page-types .lib-fam-count{display:none}
  .page-types .lib-fam-name h3{font-size:23px}
  .page-types .lib-fam-name p{font-size:14px;margin-top:3px}
  .page-types .lib-fam-desc{font-size:15.5px;padding-top:10px}
  .page-types .lib-fam-head .lt-md{width:46px;height:46px;font-size:26px}
  /* each card becomes a row: band on top, square art on the left, words on the right (library and the family row on type pages) */
  .page-types .lib-grid{grid-template-columns:minmax(0,1fr);gap:16px}
  .page-types .lib-item,.page-types .lib-item:nth-child(4),.page-types .lib-item:nth-child(5),.page-types .lib-grid.is-filtered .lib-item{grid-column:auto}
  .page-types :is(.lib-grid,.tp-sibs) .type-card{display:grid;grid-template-columns:118px minmax(0,1fr);grid-template-rows:auto 1fr}
  .page-types :is(.lib-grid,.tp-sibs) .type-card .band{grid-column:1/-1}
  .page-types :is(.lib-grid,.tp-sibs) .type-card .art{grid-column:1;grid-row:2;aspect-ratio:auto!important;height:100%;min-height:128px;border-bottom:0;border-right:var(--bw) solid var(--line)}
  .page-types :is(.lib-grid,.tp-sibs) .type-card .art-fallback .lt{width:36px;height:36px;font-size:20px;box-shadow:none}
  .page-types :is(.lib-grid,.tp-sibs) .type-card .art-fallback::after{inset:8px}
  .page-types :is(.lib-grid,.tp-sibs) .type-card-body{grid-column:2;grid-row:2;padding:10px 12px 12px}
  .page-types :is(.lib-grid,.tp-sibs) .type-card-name{font-size:18px}
  .page-types :is(.lib-grid,.tp-sibs) .type-card-line{font-size:14.5px}
  .page-types .lib-kind-tag{margin-top:8px}
  .page-types :is(.lib-grid,.tp-sibs) .type-card .link-more{padding-top:8px}
  .page-types .tp-sibs{gap:16px}
  /* section number stays beside a heading that wraps */
  .page-types .sh h2{flex:1 1 200px;min-width:0}
  .page-types .lib-how-top{min-height:0}
}

/* ================================================================== type page */

/* hero */
.page-type .tp-hero{--aside:440px}
.page-type .tp-hero-text{container-type:inline-size;min-width:0}
.page-type .tp-fam{display:inline-flex;align-items:center;gap:11px;margin-top:14px;padding:5px 15px 5px 5px;border:1px solid var(--line);
  background:#fff;color:var(--ink);font-weight:700;font-size:15px;line-height:1.2;border-radius:var(--r-pill);box-shadow:none}
.page-type .tp-fam b{font-family:var(--body);font-weight:700;font-size:16px;letter-spacing:0}
.page-type .tp-name{margin-top:18px;font-size:var(--fs-hero);font-size:min(var(--fs-hero),calc(100cqi / (var(--len,8) * .8)))}
.page-type .tp-line{margin-top:16px;font-size:24px;line-height:1.15;max-width:34ch}
.page-type .tp-code{display:flex;align-items:center;gap:18px;margin-top:24px}
.page-type .tp-code .letters{flex:none}
.page-type .tp-code-cap{font-size:15.5px;line-height:1.4;font-weight:500;max-width:34ch}
.page-type .tp-code-cap b{display:block}
.page-type .tp-actions{margin-top:28px}
.page-type .tp-art{width:100%}

/* what drives this type, in the Career report's cards (idea 3, D130, Sep 26, 2026; src/pages/types.mjs typePage). The scene set
   large as the lead, the headline and the lede under it, the second letter's box beside those two, then the cards as the report's
   ruled list (39-report-editorial.css .rt-angles, which only the report pages load: an ink rule over two columns of cards, a hairline
   under each, the trade-off marked by a thin amber line) and the fold. On a phone the box follows the fold. */
.page-type .tp-drives{display:grid;grid-template-columns:minmax(0,1fr) 400px;grid-template-areas:"scene second" "entry second" "angles angles" "about about";gap:0 56px;align-items:start}
.page-type .tp-scene{grid-area:scene;margin:0;max-width:44ch;font:300 clamp(20px,1.75vw,24px)/1.46 var(--display);letter-spacing:-.008em;color:var(--ink)}
.page-type .tp-entry{grid-area:entry;margin-top:28px;padding-top:26px;border-top:1px solid var(--line)}
.page-type .tp-stand{max-width:26ch;text-wrap:balance;font:300 clamp(24px,2.4vw,30px)/1.18 var(--display);letter-spacing:-.02em;color:var(--ink)}
.page-type .tp-lede{margin-top:14px;max-width:62ch}
.page-type .tp-second{grid-area:second}
.page-type .tp-angles{grid-area:angles;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;margin-top:44px;border-top:1px solid var(--ink)}
.page-type .tp-angle{position:relative;min-width:0;padding:20px 0 24px;border-bottom:1px solid var(--line)}
.page-type .tp-angle-lab{margin:0;font:800 12px/1.4 var(--body);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.page-type .tp-angle p{margin-top:9px;max-width:62ch;font-size:16px;line-height:1.56;color:var(--ink)}
.page-type .tp-angle.is-cost{padding-left:18px}
.page-type .tp-angle.is-cost::before{content:"";position:absolute;left:0;top:20px;bottom:24px;width:2px;background:var(--amber)}
.page-type .tp-angle.is-cost .tp-angle-lab{color:var(--amber-text)}
.page-type .tp-about{grid-area:about;margin-top:18px}
.page-type .tp-about .tag{vertical-align:1px}
.page-type .tp-second .band{padding:9px 14px}
.page-type .tp-second .box-pad{padding:16px 20px 20px}
.page-type .tp-second .small{font-size:16px;line-height:1.5;margin-top:12px}
.page-type .tp-second-def{margin-top:16px;padding-top:14px;border-top:var(--bw-thin) dashed var(--rule-soft);font-size:14.5px;line-height:1.45;font-weight:500}
.page-type .tp-second-def .label{display:block;margin-bottom:3px}

/* the two letters on the hexagon */
.page-type .tp-pair{display:grid;grid-template-columns:400px minmax(0,1fr);gap:32px 56px;align-items:center}
.page-type .tp-hex{padding:22px 22px 18px}
.page-type .tp-pair-head{display:flex;align-items:center;gap:16px}
/* smaller than the section heading above it, so the pair's name reads as part of the section, not a second headline */
.page-type .tp-pair-head h3{font-size:24px;line-height:1.1}
.page-type .tp-pair-text .callout{max-width:none}
.page-type .tp-pair-text .body{max-width:66ch}
.page-type .tp-pair-text .note{max-width:66ch;font-weight:500;font-size:14.5px}
.page-type .tp-pair-text .note b{font-weight:700}

/* blind spots */
.page-type .tp-blind .small{font-size:16px;line-height:1.5}

/* with other families (docs/mockups/result-v3 part 3) */
.page-type .tp-with-intro{margin-bottom:24px}
.page-type .tp-with-intro .body{max-width:80ch}
.page-type .tp-with{display:flex;flex-direction:column}
.page-type .tp-with-head{display:flex;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid var(--line);background:transparent;color:var(--ink)}
.page-type .tp-with-head h3{font-size:17px;letter-spacing:0}
.page-type .tp-with-head small{font-family:var(--body);font-weight:700;font-size:14px;text-transform:none;letter-spacing:0}
.page-type .tp-with-body{padding:14px 16px 18px}
.page-type .tp-with-body dt{font-size:11.5px;letter-spacing:.07em}
.page-type .tp-with-body dt+dd{margin-top:3px}
.page-type .tp-with-body dd+dt{margin-top:14px}
.page-type .tp-with-body dd{font-size:15.5px;line-height:1.45;font-weight:500}
.page-type .tp-with-body .tp-q{font-weight:700}

/* third letter */
.page-type .tp-third-card{display:flex;flex-direction:column}
.page-type .tp-third-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-bottom:var(--bw) solid var(--line);background:var(--ground)}
.page-type .tp-third-code{font-family:var(--display);font-size:22px;letter-spacing:-.01em}
.page-type .tp-third-card .small{font-size:15.5px;line-height:1.45}

/* example jobs */
.page-type .tp-jobs-box .band{padding:9px 14px;font-size:13px}
.page-type .tp-jobs-box:first-child .band{--acc:#2a9d8f;--acc-text:#1f7a6f;--acc-rgb:42,157,143;background:transparent;color:var(--acc-text);}
.page-type .tp-jobs-box:nth-child(2) .band{--acc:#2288E0;--acc-text:#0A5FA8;--acc-rgb:47,111,214;background:transparent;color:var(--acc-text);}
.page-type .tp-jobs-box .box-pad{padding:6px 18px 10px}
.page-type .tp-jobs-list li{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:10px 0;border-bottom:var(--bw-thin) dashed var(--rule-soft)}
.page-type .tp-jobs-list li:last-child{border-bottom:0}
.page-type .tp-jobs-list a{font-size:15.5px;line-height:1.35;font-weight:500;text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:4px}
.page-type .tp-jobs-list a:hover{text-decoration-color:rgba(34,136,224,.35)}
.page-type .tp-jobs-code{flex:none;font-family:var(--display);font-size:13.5px;letter-spacing:.02em}
.page-type .tp-jobs-none{padding:12px 0 10px;max-width:46ch}

/* the rest of the family */
.page-type .tp-sibs>li{min-width:0}
.page-type .tp-sibs .type-card-name{font-size:21px}

@media (max-width:1100px){
  .page-type .tp-drives{grid-template-columns:minmax(0,1fr) 340px;gap:0 36px}
  .page-type .tp-pair{grid-template-columns:340px minmax(0,1fr);gap:28px 36px}
  .page-type .tp-line{font-size:21px}
}
@media (max-width:860px){
  .page-type .tp-drives{grid-template-columns:minmax(0,1fr);grid-template-areas:"scene" "entry" "angles" "about" "second"}
  .page-type .tp-second{margin-top:30px}
  .page-type .tp-angles{grid-template-columns:minmax(0,1fr);margin-top:34px}
  .page-type .tp-pair{grid-template-columns:minmax(0,1fr)}
  .page-type .tp-hex{max-width:440px;width:100%}
  .page-type .tp-art{max-width:520px}
}
@media (max-width:720px){
  .page-type .tp-fam{font-size:14px;margin-top:12px}
  .page-type .tp-fam b{font-size:14.5px}
  .page-type .tp-name{margin-top:14px}
  .page-type .tp-line{font-size:18px;margin-top:14px}
  .page-type .tp-code{gap:14px;margin-top:20px}
  .page-type .tp-code .lt-md{width:46px;height:46px;font-size:26px}
  .page-type .tp-code-cap{font-size:14.5px}
  .page-type .tp-actions{margin-top:24px}
  .page-type .tp-scene{font-size:20px;line-height:1.44}
  .page-type .tp-entry{margin-top:22px;padding-top:20px}
  .page-type .tp-lede{margin-top:10px}
  .page-type .tp-angle{padding:18px 0 20px}
  .page-type .tp-angle.is-cost::before{top:18px;bottom:20px}
  .page-type .tp-pair-head h3{font-size:20px}
  .page-type .tp-hex{padding:16px 14px 12px}
  .page-type .tp-jobs-box .box-pad{padding:4px 14px 8px}
  .page-type .tp-jobs-list li{gap:12px}
}

/* the two families of the pair, under the pair kind */
.page-type .tp-pair-fams{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.page-type .tp-pair-fams li{display:flex;align-items:flex-start;gap:12px;padding-top:14px;border-top:var(--bw-thin) dashed var(--rule-soft)}
.page-type .tp-pair-fams p{font-size:15px;line-height:1.45;font-weight:500}
.page-type .tp-pair-fams b{display:block;font-weight:700}
@media (max-width:560px){ .page-type .tp-pair-fams{grid-template-columns:minmax(0,1fr);gap:12px} }
.page-type .tp-jobs{align-items:start}

/* filtered by where the letters sit (app/library.js): families side by side, one or two cards each */
.page-types .lib-fams.is-compact{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px var(--gap);align-items:start}
.page-types .lib-fams.is-compact[data-per="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.page-types .lib-fams.is-compact .lib-fam+.lib-fam{margin-top:0}
.page-types .lib-fams.is-compact .lib-fam-head{grid-template-columns:auto minmax(0,1fr)}
.page-types .lib-fams.is-compact .lib-fam-count{display:none}
.page-types .lib-fams.is-compact .lib-fam-desc{grid-column:1/-1;grid-row:2;padding:10px 0 0;border-left:0;border-top:var(--bw-thin) solid currentColor;max-width:none;font-size:15px}
.page-types .lib-fams.is-compact .lib-fam-name h3{font-size:24px}
.page-types .lib-fams.is-compact .lib-grid{grid-template-columns:minmax(0,1fr)}
.page-types .lib-fams.is-compact[data-per="2"] .lib-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.page-types .lib-fams.is-compact .lib-item{grid-column:auto}
.page-types .lib-fams.is-compact .lib-item .art{aspect-ratio:1/1!important}
@media (max-width:1100px){
  .page-types .lib-fams.is-compact{grid-template-columns:repeat(2,minmax(0,1fr))}
  .page-types .lib-fams.is-compact[data-per="2"]{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:720px){
  .page-types .lib-fams.is-compact,.page-types .lib-fams.is-compact[data-per="2"]{grid-template-columns:minmax(0,1fr);gap:36px}
  .page-types .lib-fams.is-compact .lib-grid,.page-types .lib-fams.is-compact[data-per="2"] .lib-grid{grid-template-columns:minmax(0,1fr)}
  .page-types .lib-fams.is-compact .lib-item .art{aspect-ratio:auto!important}
}
/* three blind spots stay in one row until the page narrows, so none is left on its own */
@media (max-width:1100px) and (min-width:861px){ .page-type .tp-blind{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px} .page-type .tp-blind .box-pad{padding:14px 15px 16px} }
@media (max-width:860px){ .page-type .tp-blind{grid-template-columns:minmax(0,1fr)} }

/* ---------------------------------------------------------------- added in review */
/* the write-up is labelled as our interpretation, once, under the text */
.page-type .tp-core-col{min-width:0}
.page-type .tp-core-note{margin-top:20px;max-width:70ch;line-height:1.6}
.page-type .tp-core-note .tag{margin-right:8px;vertical-align:baseline}
/* library: in five columns a two-word name fits one line, so a row's names and links line up */
@media (min-width:1241px){ .page-types .lib-grid .type-card-name{font-size:17.5px;letter-spacing:-.015em} }
.page-types .lib-grid .type-card .lib-kind-tag{margin-top:auto}
.page-types .lib-grid .type-card .lib-kind-tag+.link-more{margin-top:0}
.page-types .lib-item{display:flex;flex-direction:column}
.page-types .lib-item>.type-card{flex:1 1 auto}
.page-types .lib-grid .type-card .lib-mine-tag{margin-top:6px;align-self:flex-start}
.page-types .lib-grid .type-card .lib-mine-tag+.link-more{margin-top:0}

/* ================================================================== hub (/types/, body class page-hub) */
/* One section per assessment (ASSESSMENTS in src/pages/types.mjs). Each gets its own accent so the three never blur together:
   traits sage, four-letter ink, interests cobalt, values amber. */
.page-hub .hub-tone-sage{--hub:#2a9d8f;--on-hub:#fff;--acc:#2a9d8f;--acc-text:#1f7a6f;--acc-rgb:42,157,143}
.page-hub .hub-tone-ink{--hub:#7a5cc7;--on-hub:#fff;--acc:#7a5cc7;--acc-text:#5b3fa8;--acc-rgb:122,92,199}
.page-hub .hub-tone-cobalt{--hub:#2288E0;--on-hub:#fff;--acc:#2288E0;--acc-text:#0A5FA8;--acc-rgb:47,111,214}
.page-hub .hub-tone-amber{--hub:#b8791f;--on-hub:#fff;--acc:#b8791f;--acc-text:#9A5B06;--acc-rgb:184,121,31}

.page-hub .hub-hero .lede{max-width:58ch}
.page-hub .hub-num{display:grid;place-items:center;flex:none;width:44px;height:44px;background:var(--hub);color:var(--on-hub);
  border:0;box-shadow:none;font-family:var(--display);font-size:22px;line-height:1;font-weight:500;font-variant-numeric:tabular-nums;border-radius:var(--r-sm)}

.page-hub .hub-sec-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px 20px;align-items:center;
  padding:14px 20px 14px 14px;border:1px solid var(--line);box-shadow:none;background:#fff;color:var(--ink);border-radius:var(--r)}
.page-hub .hub-sec-head .hub-num{width:52px;height:52px;font-size:26px}
.page-hub .hub-sec-name h2{font-size:34px;line-height:1;letter-spacing:-.02em;color:inherit}
.page-hub .hub-sec-name p{font-weight:600;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--acc-text);margin-top:6px}
.page-hub .hub-sec-link{font-weight:600;font-size:13px;letter-spacing:0;color:var(--cobalt);padding:10px 16px;border:1px solid var(--cobalt-pale);background:var(--blue-wash);white-space:nowrap;text-decoration:none;border-radius:var(--r-pill)}
.page-hub .hub-sec-link:hover{background:rgba(34,136,224,.16);color:var(--blue-deep);border-color:rgba(34,136,224,.35)}

.page-hub .hub-sec-body{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:28px 44px;margin-top:28px;align-items:start}
.page-hub .hub-sec-text .body{font-size:17px;line-height:1.5}
.page-hub .hub-sec-text .btn-row{gap:12px}
/* where a section comes from is supporting: after the buttons, below a hairline, in smaller muted type */
.page-hub .hub-sec-from{margin-top:24px;padding-top:12px;border-top:var(--bw-thin) solid var(--quiet-rule)}
.page-hub .hub-sec-from .label{color:var(--muted)}
.page-hub .hub-sec-from .small{font-size:var(--fs-small);line-height:1.45;color:var(--muted);max-width:46ch}
.page-hub .hub-sec-preview{min-width:0}

/* traits preview: five tiles */
.page-hub .hub-traits{list-style:none;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px}
.page-hub .hub-traits>li{grid-column:span 2}
.page-hub .hub-traits>li:nth-child(n+4){grid-column:span 3}
.page-hub .hub-traits>li{min-width:0}
.page-hub .hub-traits .tr-tile-top{padding:10px}
.page-hub .hub-traits .tr-scale{display:none}
.page-hub .hub-traits .tr-noletter{display:none}
.page-hub .hub-traits .tr-tile-body{padding:10px 11px 12px}
.page-hub .hub-traits .tr-tile-name{font-size:17px;overflow-wrap:normal}
.page-hub .hub-traits .tr-tile-line{font-size:13.5px;line-height:1.35}
.page-hub .hub-traits .tr-tile-meta{font-size:11.5px}
.page-hub .hub-traits .link-more{font-size:11.5px}

/* four-letter preview: four groups of four small portraits, ink frames */
.page-hub .hub-fl{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.page-hub .hub-fl-group{border:1px solid var(--line);background:var(--glass);box-shadow:var(--sh-sm);overflow:hidden;border-radius:var(--r)}
.page-hub .hub-fl-head{display:flex;align-items:center;gap:10px;padding:14px 16px 4px;background:transparent;color:var(--acc-text);font-weight:600;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase}
.page-hub .hub-fl-letters{font-family:var(--body);font-weight:700;font-size:10.5px;letter-spacing:.1em;background:rgba(var(--acc-rgb),.13);color:var(--acc-text);padding:4px 8px;border:0;border-radius:var(--r-pill)}
.page-hub .hub-fl-list{list-style:none;padding:12px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.page-hub .hub-fl-list>li{min-width:0}
.page-hub .hub-fl-card{display:flex;flex-direction:column;color:var(--ink);text-decoration:none}
.page-hub .hub-fl-card .art{border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.page-hub .hub-fl-card .art-fallback.is-plain{background:var(--ground-deep)}
.page-hub .hub-fl-code{margin-top:6px;font-family:var(--body);font-weight:700;font-size:11px;letter-spacing:.12em;color:var(--muted)}
.page-hub .hub-fl-name{font-family:var(--display);font-size:15px;font-weight:500;line-height:1.2}
.page-hub .hub-fl-card:hover .hub-fl-name{text-decoration:underline;text-decoration-color:rgba(34,136,224,.35);text-decoration-thickness:1px}

/* interests preview: one type from each family */
.page-hub .hub-int{list-style:none;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.page-hub .hub-int>li{min-width:0}
.page-hub .hub-int .band{padding:6px 8px;font-size:10px;letter-spacing:.03em}
.page-hub .hub-int .band .arrow{display:none}
/* The code over the family's name, on two lines. On one line the name was cut to "INVESTIGAT…", "ENTERPRIS…" and "CONVENTI…"
   wherever the six cards share the right-hand column (1241px and up), half the families on a desktop (Sep 25, 2026 review). */
.page-hub .hub-int .band .codes{min-width:0;flex-direction:column;align-items:flex-start;gap:2px}
.page-hub .hub-int .band .codes>span:last-child{max-width:100%;overflow-wrap:anywhere}
.page-hub .hub-int .band .code{font-size:11px}
.page-hub .hub-int .type-card-body{padding:9px 10px 11px}
.page-hub .hub-int .type-card-name{font-size:14.5px;overflow-wrap:normal}
@media (min-width:900px){ .page-hub .hub-int .type-card-name{font-size:12.5px;letter-spacing:-.01em} }
.page-hub .hub-fl-name{hyphens:auto;-webkit-hyphens:auto;text-wrap:balance}
.page-hub .hub-int .type-card-line{display:none}
.page-hub .hub-int .link-more{font-size:11px;padding-top:6px}

@media (max-width:1240px){
  .page-hub .hub-sec-body{grid-template-columns:minmax(0,1fr)}
  /* what it describes and the buttons on the left, where it comes from beside them on the right */
  .page-hub .hub-sec-text{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:0 40px;align-items:start}
  .page-hub .hub-sec-text>:not(.hub-sec-from){grid-column:1}
  .page-hub .hub-sec-from{grid-column:2;grid-row:1/span 3;margin-top:0;padding-top:0;padding-left:24px;border-top:0;border-left:var(--bw-thin) solid var(--quiet-rule)}
}
@media (max-width:980px){
  .page-hub .hub-int{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:720px){
  .page-hub .hub-sec-head{grid-template-columns:auto minmax(0,1fr);padding:12px}
  .page-hub .hub-sec-head .hub-num{width:42px;height:42px;font-size:21px}
  .page-hub .hub-sec-name h2{font-size:24px}
  .page-hub .hub-sec-name p{font-size:12.5px;margin-top:4px}
  .page-hub .hub-sec-link{grid-column:1/-1;justify-self:start}
  .page-hub .hub-sec-body{margin-top:20px;gap:22px}
  .page-hub .hub-sec-text{display:block}
  .page-hub .hub-sec-from{margin-top:20px;padding:12px 0 0;border-left:0;border-top:var(--bw-thin) solid var(--quiet-rule)}
  .page-hub .hub-sec-text .body{font-size:16px}
  .page-hub .hub-sec-text .btn-row .btn{flex:1 1 100%}
  /* previews scroll sideways on a phone instead of stacking into a long list */
  .page-hub :is(.hub-traits,.hub-int){display:flex;overflow-x:auto;gap:12px;padding:0 10px 14px 0;scroll-snap-type:x mandatory}
  .page-hub :is(.hub-traits,.hub-int)>li{flex:0 0 46%;scroll-snap-align:start}
  .page-hub .hub-traits>li,.page-hub .hub-traits>li:nth-child(n+4){flex:0 0 64%}
  .page-hub .hub-traits .tr-tile-name{font-size:15px}
  .page-hub .hub-fl{grid-template-columns:minmax(0,1fr);gap:14px}
  .page-hub .hub-fl-list{padding:10px;gap:8px}
  .page-hub .hub-fl-name{font-size:11.5px}
}

/* Work values tiles on the hub (shown only while work values are on) */
.page-hub .hub-values{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.page-hub .hub-value-name{font-family:var(--body);font-weight:700;font-size:16px;text-transform:none;letter-spacing:0;margin:0 0 4px}
@media (max-width:560px){ .page-hub .hub-values{grid-template-columns:minmax(0,1fr)} }

/* the one line at the foot of the interest cards (Wayne, Sep 19: no hedging inside an interpretation) */
.page-type .tp-with-foot{margin-top:14px;max-width:80ch}


/* ===== 51-fourletter.css ===== */
/* ==========================================================================
   51-fourletter.css · owner: Four-letter library agent
   Pages: /types/four-letter/, the 16 /types/four-letter/<code>/ pages, and the guide chapter pages
   /types/four-letter/<code>/<slug>/ (D34). Guide pieces are .flg-*, built by src/pages/fourletter.mjs and app/fourletter-guide.js.
   Scoped under .page-fourletter. Shared pieces live in 00-base.css and 05-components.css.
   Look: the interest type pages (50-types.css), told apart by ink bands, amber accents and
   four square ink letter tiles. No family colors anywhere on these pages.
   ========================================================================== */

/* ---------------------------------------------------------------- shared pieces */
.page-fourletter .fl-tiles{display:inline-flex;gap:6px;flex:none}
/* EDITORIAL (D88): a letter tile is a small part, so 5px corners, a flat fill and no inner highlight or drop shadow.
   The transparent border is what the variants below (is-off, is-flip, the group head, the art fallback) colour in. */
.page-fourletter .fl-tile{display:inline-grid;place-items:center;flex:none;background:var(--ink);color:#fff;border:1px solid transparent;border-radius:5px;box-shadow:none;
  font-family:var(--body);font-weight:700;line-height:1;width:36px;height:36px;font-size:17px}
.page-fourletter .fl-tile-sm{width:30px;height:30px;font-size:14px}
.page-fourletter .fl-tile-md{width:52px;height:52px;font-size:22px}
.page-fourletter .fl-tile-lg{width:64px;height:64px;font-size:27px}
.page-fourletter .band{background:transparent;color:var(--acc-text)}
/* a supporting panel's band is a small label on the tint, never an ink strip (SITE_KIT §13 rule 2) */
.page-fourletter .box-quiet .band{background:transparent;color:var(--ink);border-bottom:var(--bw-thin) solid var(--quiet-rule)}
.page-fourletter .fl-intro{max-width:72ch;margin-bottom:22px}
.page-fourletter .fl-accent-block{display:inline;background:linear-gradient(transparent 58%,rgba(184,121,31,.28) 58%);color:inherit;padding:0 .06em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
@media (max-width:700px){ .page-fourletter .fl-lib-hero h1{line-height:1.14} .page-fourletter .fl-accent-block{padding:0 .1em} }
.page-fourletter .fl-trait-link{display:inline-block;margin-top:12px;font-weight:700;font-size:14.5px;text-decoration:underline;text-decoration-color:rgba(34,136,224,.35);text-decoration-thickness:1px;text-underline-offset:4px}
.page-fourletter .fl-cta{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px 40px;align-items:center;border-left:3px solid var(--amber)}
.page-fourletter .fl-cta .small{max-width:78ch;font-size:16px}
.page-fourletter .fl-cta h2{font-size:22px}

/* cards */
.page-fourletter .fl-card .band .code{background:transparent;color:var(--muted);border:0;font-family:var(--body);font-weight:700;letter-spacing:.12em}
.page-fourletter .fl-art-fallback{display:grid;place-items:center;background:var(--accent,var(--acc));position:relative}
.page-fourletter .fl-art-fallback .fl-tiles{gap:8px}
.page-fourletter .fl-art-fallback .fl-tile{background:var(--ground);color:var(--ink);border-color:var(--ground)}
.page-fourletter .fl-art-fallback::after{content:"";position:absolute;inset:14px;border:2px dashed var(--amber);opacity:.5;pointer-events:none}

/* ================================================================== library */
.page-fourletter .fl-lib-hero{--aside:440px}
.page-fourletter .fl-crumb{margin-bottom:14px}
.page-fourletter .fl-lib-hero .lede{max-width:60ch}
.page-fourletter .fl-lib-figure{margin:0}
.page-fourletter .fl-scales{display:grid;gap:18px;padding:22px 22px 6px}
.page-fourletter .fl-scale{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center}
.page-fourletter .fl-scale-track{position:relative;height:12px;border:var(--bw-thin) solid var(--line);background:var(--ground)}
.page-fourletter .fl-scale-track::before{content:"";position:absolute;left:50%;top:-7px;bottom:-7px;border-left:var(--bw) dashed var(--ref-deep)}
.page-fourletter .fl-scale-track i{position:absolute;left:var(--at);top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;background:var(--amber);border:var(--bw-thin) solid var(--line);border-radius:50%}
.page-fourletter .fl-lib-figure figcaption{padding:12px 22px 18px}

/* Overview charts (D67, fourletter.mjs regionChart / nextDoorChart). A type as a region: the half of each scale the type lives on
   is shaded from the middle out, the other letter's tile is dimmed; a reader with a result gets a cobalt dot per scale, and where
   the dot sits on the other half, the stretch back to the middle is hatched (app/fourletter-you.js). */
.page-fourletter .fl-region{margin:18px 0 0;padding:18px 20px 16px;max-width:620px}
.page-fourletter .fl-region-rows{display:grid;gap:14px}
.page-fourletter .fl-region-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center}
.page-fourletter .fl-tile.is-off{background:var(--ground-deep);color:var(--muted);border-color:var(--ground-deep)}
.page-fourletter .fl-region-track{position:relative;height:16px;border:var(--bw-thin) solid var(--line);background:var(--surface)}
.page-fourletter .fl-region-track::before{content:"";position:absolute;left:50%;top:-7px;bottom:-7px;border-left:var(--bw) dashed var(--ref-deep);z-index:1}
.page-fourletter .fl-region-half{position:absolute;top:0;bottom:0;width:50%;background:var(--cobalt-pale)}
.page-fourletter .fl-region-half.l{right:50%}
.page-fourletter .fl-region-half.r{left:50%}
.page-fourletter .fl-region-half.m-go{transition:width .8s cubic-bezier(.2,.8,.2,1)}
.page-fourletter .fl-region-gap{position:absolute;top:0;bottom:0;background:repeating-linear-gradient(135deg,transparent 0 4px,rgba(151,160,174,.85) 4px 6px)}
/* the hatch mixed from the token where the engine can (the plain value above is the same color); inside @supports, because an
   engine without color-mix() keeps a color-mix() holding a var() over the fallback and then drops it, and the hatch with it */
@supports (color:color-mix(in srgb,red,red)){.page-fourletter .fl-region-gap{background:repeating-linear-gradient(135deg,transparent 0 4px,color-mix(in srgb,var(--ref-deep) 85%,transparent) 4px 6px)}}
.page-fourletter .fl-region-you{position:absolute;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;background:var(--cobalt);border:var(--bw-thin) solid var(--line);z-index:2}
.page-fourletter .fl-region-you.m-go{transition:left .9s cubic-bezier(.2,.9,.2,1) .5s}
.page-fourletter .fl-region-cap{margin-top:14px;font-size:13.5px;font-weight:500;line-height:1.45}
.page-fourletter .fl-region.has-you .fl-region-cap{font-weight:700}

/* Each strength and what it can cost (bothWaysChart): the same trait going two ways, strength in cobalt-pale on the left, its
   cost in amber-wash on the right, joined at the middle. A diagram: every pill is the same kind of thing, no lengths. */
.page-fourletter .fl-both{margin:18px 0 26px;padding:18px 20px 20px}
.page-fourletter .fl-both-key{display:flex;flex-wrap:wrap;gap:8px 14px;margin:0 0 12px;font-size:12.5px;font-weight:500}
.page-fourletter .fl-both-k::before{content:"";display:inline-block;width:12px;height:12px;margin-right:6px;vertical-align:-1px;border:1px solid var(--ink)}
.page-fourletter .fl-both-k.s::before{background:var(--cobalt-pale)}
.page-fourletter .fl-both-k.w::before{background:var(--amber-wash)}
.page-fourletter .fl-both-rows{display:grid;gap:10px;list-style:none;margin:0;padding:0}
.page-fourletter .fl-both-row{display:grid;grid-template-columns:minmax(0,1fr) 30px minmax(0,1fr);align-items:center}
.page-fourletter .fl-both-s,.page-fourletter .fl-both-w{padding:8px 11px;border:var(--bw-thin) solid var(--line);font-weight:700;font-size:13.5px;line-height:1.3;border-radius:var(--r-sm)}
.page-fourletter .fl-both-s{justify-self:end;text-align:right;background:var(--cobalt-pale)}
.page-fourletter .fl-both-w{justify-self:start;background:var(--amber-wash)}
.page-fourletter .fl-both-mid{position:relative;height:2px;background:var(--ink)}
.page-fourletter .fl-both-mid::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--ink)}
.page-fourletter .fl-both-rows.m-go .fl-both-s,.page-fourletter .fl-both-rows.m-go .fl-both-w{transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .35s ease-out;transition-delay:calc(var(--i) * 90ms)}
@media (max-width:600px){
  .page-fourletter .fl-both-rows{gap:18px}
  .page-fourletter .fl-both-row{grid-template-columns:minmax(0,1fr);justify-items:start}
  .page-fourletter .fl-both-s,.page-fourletter .fl-both-w{justify-self:start;text-align:left}
  .page-fourletter .fl-both-w{margin-left:22px}
  .page-fourletter .fl-both-mid{width:2px;height:12px;margin-left:30px}
  .page-fourletter .fl-both-mid::after{display:none}
}

/* The types next door: four portrait cards, each one letter away, the flipped letter's tile in amber. */
.page-fourletter .fl-next{margin:18px 0 0}
.page-fourletter .fl-next-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;list-style:none;margin:0;padding:0}
.page-fourletter .fl-next-card{display:flex;flex-direction:column;height:100%;background:var(--surface);border:var(--bw) solid var(--line);box-shadow:var(--sh-xs);color:var(--ink);text-decoration:none;transition:transform .12s ease-out,box-shadow .12s ease-out;border-radius:var(--r)}
.page-fourletter .fl-next-card:hover,.page-fourletter .fl-next-card:focus-visible{transform:translateY(-4px);box-shadow:var(--sh-xs)}
.page-fourletter .fl-next-pic{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;object-position:50% 20%;border-bottom:var(--bw) solid var(--line)}
.page-fourletter .fl-next-body{display:grid;gap:6px;padding:10px 12px 12px}
.page-fourletter .fl-tile.is-flip{background:#fff;color:var(--muted);border:1px dashed var(--grey);box-shadow:none}
.page-fourletter .fl-next-name{font:500 17px/1.15 var(--display)}
.page-fourletter .fl-next-diff{font-size:12.5px;line-height:1.35;color:var(--muted)}
.page-fourletter .fl-next-you{justify-self:start;font-size:11px;font-weight:700;letter-spacing:.01em;padding:5px 10px}
.page-fourletter .fl-next-card.is-you{box-shadow:var(--sh-sm),0 0 0 2px rgba(34,136,224,.45)}
.page-fourletter .fl-next-near{background:rgba(184,121,31,.13);color:var(--amber-text)}
@media (max-width:860px){ .page-fourletter .fl-next-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (prefers-reduced-motion:reduce){ .page-fourletter .fl-next-card{transition:none} }

.page-fourletter .lib-jump{margin-bottom:28px}
.page-fourletter .lib-filter{display:grid;gap:12px;padding:16px 20px;margin-bottom:34px;box-shadow:var(--sh-sm)}
.page-fourletter .lib-filter-group{display:grid;grid-template-columns:170px minmax(0,1fr);gap:10px 16px;align-items:center}
.page-fourletter .lib-filter-group+.lib-filter-group{padding-top:12px;border-top:var(--bw-thin) dashed var(--rule-soft)}
.page-fourletter .lib-filter .chip{min-height:38px}
.page-fourletter .lib-filter .chip[aria-pressed=true]{background:var(--ink);color:var(--on-ink)}
.page-fourletter .fl-chip-code{font-family:var(--body);font-weight:700;font-size:10.5px;letter-spacing:.1em;background:rgba(184,121,31,.14);color:var(--amber-text);padding:3px 7px;margin-right:8px;border:0;border-radius:var(--r-pill)}
.page-fourletter .lib-status{font-size:var(--fs-note);font-weight:600;padding-top:10px;border-top:var(--bw-thin) dashed var(--rule-soft)}

.page-fourletter .fl-mine{margin-bottom:34px}
.page-fourletter .fl-mine-box{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding:14px 18px;border-left:3px solid var(--amber)}
.page-fourletter .fl-mine-box p{font-size:16px;font-weight:600}
.page-fourletter .fl-item.is-mine .type-card{outline:4px solid var(--amber);outline-offset:4px}
.page-fourletter .fl-mine-tag{margin-top:10px;align-self:flex-start}

.page-fourletter .fl-group+.fl-group{margin-top:52px}
.page-fourletter .fl-group[hidden]{display:none}
.page-fourletter .fl-group-head{display:grid;grid-template-columns:auto minmax(0,max-content) minmax(0,1fr);gap:16px 24px;align-items:center;
  padding:14px 20px 14px 14px;margin-bottom:24px;border:1px solid var(--line);box-shadow:none;background:#fff;color:var(--ink);border-radius:var(--r)}
/* One accent per group, so the four read as four things at a glance. --accent is for fills and
   borders, --accent-text for small text, because amber and sage are too light on white to carry it. */
.page-fourletter .fl-group{--accent:var(--amber);--accent-text:var(--amber-text)}
.page-fourletter .fl-group[data-group="is"]{--accent:var(--group-is);--accent-text:var(--group-is-text)}
.page-fourletter .fl-group[data-group="in"]{--accent:var(--group-in);--accent-text:var(--group-in-text)}
.page-fourletter .fl-group[data-group="es"]{--accent:var(--group-es);--accent-text:var(--group-es-text)}
.page-fourletter .fl-group[data-group="en"]{--accent:var(--group-en);--accent-text:var(--group-en-text)}
.page-fourletter .fl-group-head .fl-tile{background:var(--accent);border-color:transparent;box-shadow:none}
/* the accent reaches the cards too, or the grid still reads as one undifferentiated block */
.page-fourletter .fl-group .fl-card{border-top:3px solid var(--accent)}
.page-fourletter .fl-group-name h3{font-size:30px;line-height:1;letter-spacing:-.02em;white-space:nowrap}
.page-fourletter .fl-group-name p{font-weight:700;font-size:13px;letter-spacing:.01em;margin-top:6px;color:var(--accent-text)}
.page-fourletter .fl-group-desc{font-size:16.5px;font-weight:500;line-height:1.4;max-width:60ch;padding-left:22px;border-left:var(--bw-thin) solid currentColor}

.page-fourletter .fl-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.page-fourletter .fl-item{min-width:0}
.page-fourletter .fl-item[hidden]{display:none}
.page-fourletter .fl-grid .type-card-name{font-size:21px;line-height:1.05}
.page-fourletter .fl-grid .type-card-line{font-size:15px;line-height:1.38;margin-top:6px}

/* ================================================================== type page */
.page-fourletter-type .fl-hero{--aside:440px}
.page-fourletter-type .fl-hero-text{container-type:inline-size;min-width:0}
.page-fourletter-type .fl-kind{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:18px;font-weight:700;font-size:15px}
.page-fourletter-type .fl-kind-tag{background:rgba(34,136,224,.12);color:var(--blue-deep);padding:5px 10px;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border-radius:var(--r-pill)}
.page-fourletter-type .fl-name{margin-top:16px;font-size:var(--fs-hero);font-size:min(var(--fs-hero),calc(100cqi / (var(--len,8) * .8)))}
.page-fourletter-type .fl-line{margin-top:18px;max-width:34ch}
.page-fourletter-type .fl-code{display:flex;align-items:center;gap:18px;margin-top:24px}
.page-fourletter-type .fl-code-cap{font-size:15.5px;line-height:1.4;font-weight:500;max-width:30ch}
.page-fourletter-type .fl-code-cap b{display:block}
.page-fourletter-type .fl-actions{margin-top:28px}
.page-fourletter-type .fl-art{width:100%;box-shadow:var(--sh-attn)}

.page-fourletter-type .fl-letter{padding:16px 18px 18px;display:flex;flex-direction:column}
.page-fourletter-type .fl-letter-head{display:flex;gap:14px;align-items:center}
.page-fourletter-type .fl-letter-head .box-title{border:0;padding:0;margin:0}
.page-fourletter-type .fl-letter-from{font-size:13px;font-weight:700;letter-spacing:.01em;color:var(--muted);margin-top:3px}
.page-fourletter-type .fl-degree{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;margin:16px 0 12px;font-family:var(--heading);font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}
.page-fourletter-type .fl-degree span.is-on{color:var(--ink)}
.page-fourletter-type .fl-degree span:not(.is-on):not(.fl-degree-track){color:var(--grey)}
.page-fourletter-type .fl-degree-track{height:12px;border:var(--bw-thin) solid var(--line);background:var(--ground);box-shadow:inset calc(50% * 0) 0 0 transparent;position:relative;overflow:hidden}
.page-fourletter-type .fl-letter .small{font-size:15.5px}
.page-fourletter-type .fl-letter .fl-trait-link{margin-top:auto;padding-top:12px}

.page-fourletter-type .fl-two{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:28px 56px;align-items:start}
.page-fourletter-type .fl-core p+p{margin-top:1em}
.page-fourletter-type .fl-core-note{margin-top:18px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
/* "Your results" sits beside the write-up, where the range panel was before D33 */
.page-fourletter-type .fl-core-you{min-width:0}
.page-fourletter-type .fl-strengths>li{border-top:3px solid var(--amber)}
.page-fourletter-type .fl-life-card .small{font-size:16px;line-height:1.5}
/* interests that may go with it: supporting, a quiet panel after the with-other-people section */
.page-fourletter-type .fl-interests .band{padding:12px 20px 8px}
.page-fourletter-type .fl-interests .box-pad{padding:12px 20px 18px}
.page-fourletter-type .fl-interests .small{max-width:80ch;line-height:1.55}

@media (max-width:1240px){
  .page-fourletter-type .fl-letters{grid-template-columns:repeat(2,minmax(0,1fr))}
  .page-fourletter .fl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .page-fourletter .fl-group-head{grid-template-columns:auto minmax(0,1fr)}
  .page-fourletter .fl-group-desc{grid-column:1/-1;padding-left:0;border-left:0;padding-top:12px;border-top:var(--bw-thin) solid currentColor;max-width:none}
  .page-fourletter-type .fl-two{grid-template-columns:minmax(0,1fr) 340px;gap:28px 36px}
}
@media (max-width:860px){
  .page-fourletter-type .fl-two{grid-template-columns:minmax(0,1fr)}
  .page-fourletter-type .fl-art{max-width:520px}
  .page-fourletter .fl-lib-figure{max-width:480px;width:100%}
}
@media (max-width:720px){
  .page-fourletter-type .fl-letters{grid-template-columns:minmax(0,1fr)}
  .page-fourletter .lib-filter{padding:14px}
  .page-fourletter .lib-filter-group{grid-template-columns:minmax(0,1fr)}
  .page-fourletter .fl-cta{grid-template-columns:minmax(0,1fr);border-left-width:10px}
  .page-fourletter .fl-cta .btn{justify-self:stretch}
  .page-fourletter .fl-group+.fl-group{margin-top:40px}
  .page-fourletter .fl-group-head{gap:12px 14px;padding:12px 14px 12px 12px;margin-bottom:18px;box-shadow:var(--sh-attn)}
  .page-fourletter .fl-group-head .fl-tile-md{width:40px;height:40px;font-size:22px}
  .page-fourletter .fl-group-name h3{font-size:22px;white-space:normal}
  .page-fourletter .fl-group-desc{font-size:15.5px;padding-top:10px}
  /* each card becomes a row: band on top, square art on the left, words on the right */
  .page-fourletter .fl-grid,.page-fourletter-type .fl-sibs{grid-template-columns:minmax(0,1fr);gap:16px}
  .page-fourletter :is(.fl-grid,.fl-sibs) .type-card{display:grid;grid-template-columns:118px minmax(0,1fr);grid-template-rows:auto 1fr}
  .page-fourletter :is(.fl-grid,.fl-sibs) .type-card .band{grid-column:1/-1}
  .page-fourletter :is(.fl-grid,.fl-sibs) .type-card .art{grid-column:1;grid-row:2;aspect-ratio:auto!important;height:100%;min-height:128px;border-bottom:0;border-right:var(--bw) solid var(--line)}
  .page-fourletter :is(.fl-grid,.fl-sibs) .fl-art-fallback .fl-tiles{display:grid;grid-template-columns:repeat(2,auto);gap:5px}
  .page-fourletter :is(.fl-grid,.fl-sibs) .fl-art-fallback .fl-tile{width:28px;height:28px;font-size:16px;box-shadow:none}
  .page-fourletter :is(.fl-grid,.fl-sibs) .fl-art-fallback::after{inset:8px}
  .page-fourletter :is(.fl-grid,.fl-sibs) .type-card-body{grid-column:2;grid-row:2;padding:10px 12px 12px}
  .page-fourletter :is(.fl-grid,.fl-sibs) .type-card-name{font-size:18px}
  .page-fourletter :is(.fl-grid,.fl-sibs) .type-card-line{font-size:14.5px}
  .page-fourletter-type .fl-name{margin-top:12px}
  .page-fourletter-type .fl-code{gap:14px;margin-top:20px;flex-wrap:wrap}
  .page-fourletter-type .fl-code .fl-tile-md{width:44px;height:44px;font-size:25px}
  .page-fourletter-type .fl-art{box-shadow:var(--sh-attn)}
  .page-fourletter .fl-art-fallback .fl-tile-lg{width:52px;height:52px;font-size:30px}
}
.page-fourletter-type .fl-degree-track::before{content:"";position:absolute;left:0;top:0;bottom:0;width:50%;background:var(--amber)}
.page-fourletter .fl-accent{background:none;box-shadow:inset 0 -.24em 0 var(--amber);box-decoration-break:clone;-webkit-box-decoration-break:clone}
/* A name that wraps to two lines gets a little more room between them, so the first line's bar clears the second (review round 1). */
.page-fourletter-type .fl-name{line-height:1.08}
@media (max-width:500px){ .page-fourletter-type .fl-art-kind{display:none} }

/* ================================================================== type guides (D34)
   The overview (the type page once its guide has one) and the chapter pages share one frame: a side column with
   "Explore your guide" and "Your results", and the chapter beside it. On a phone the side column melts into the
   page: the chapter list becomes a sideways row above the chapter, and "Your results" follows the chapter. */
.page-fourletter .flg-layout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:40px 72px;align-items:start}
.page-fourletter .flg-side{display:grid;gap:26px;min-width:0}
/* It sticks under the site's bar, not behind it (Sep 26, 2026, D133): at 20px from the top it slid 40px under the 60px bar, and
   under 76px once the bar grew. The column is about 740px tall, so it sticks only where the screen has room for it below the bar. */
@media (min-width:861px) and (min-height:860px){ .page-fourletter .flg-side{position:sticky;top:calc(var(--header-h) + 20px)} }
.page-fourletter .flg-main{min-width:0;max-width:860px}

/* explore your guide */
.page-fourletter .flg-toc-title{font-family:var(--body);font-size:12.5px;font-weight:700;letter-spacing:.01em;margin-bottom:10px}
.page-fourletter .flg-toc-list{background:var(--surface);border:var(--bw) solid var(--line);box-shadow:var(--sh-sm);border-radius:var(--r)}
.page-fourletter .flg-toc-link{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;align-items:center;padding:9px 14px;min-height:46px;
  text-decoration:none;font-weight:600;font-size:15px;line-height:1.25;border-top:var(--bw-thin) solid var(--rule-soft)}
.page-fourletter .flg-toc-list li:first-child .flg-toc-link{border-top:0}
.page-fourletter .flg-toc-num{display:grid;place-items:center;width:28px;height:28px;border:var(--bw-thin) solid var(--line);font-family:var(--display);font-size:13px;line-height:1}
.page-fourletter .flg-toc-link:hover{background:var(--ground)}
.page-fourletter .flg-toc-link:hover .flg-toc-label{text-decoration:underline;text-decoration-color:rgba(34,136,224,.35);text-decoration-thickness:1px;text-underline-offset:4px}
.page-fourletter .flg-toc-link.is-here{background:rgba(34,136,224,.1);color:var(--ink);border-top-color:transparent}
.page-fourletter .flg-toc-link.is-here .flg-toc-num{background:var(--grad-blue);color:#fff;border:0;box-shadow:0 10px 20px -10px rgba(34,136,224,.7);font-family:var(--display);font-weight:500;}
.page-fourletter .flg-toc-link.is-here .flg-toc-label{text-decoration:none}

/* your results */
.page-fourletter .flg-you{min-width:0}
.page-fourletter .flg-you .band{padding:10px 16px}
.page-fourletter .flg-you-title{font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit}
.page-fourletter .flg-you-body{padding:16px 18px 18px}
.page-fourletter .flg-you-text{font-size:15px;line-height:1.5;font-weight:500}
.page-fourletter .flg-you-text b{font-weight:700}
.page-fourletter .flg-you-body>.btn{margin-top:14px}
.page-fourletter .flg-you-rows{display:grid;gap:14px;margin-top:16px}
.page-fourletter .flg-you-scale{display:grid;grid-template-columns:24px minmax(0,1fr) 24px;gap:10px;align-items:center}
.page-fourletter .flg-you-l{display:grid;place-items:center;height:24px;font-family:var(--heading);font-size:14px;line-height:1;color:var(--grey);font-weight:700;font-variant-numeric:tabular-nums}
.page-fourletter .flg-you-l.is-on{background:var(--ink);color:#fff;border-radius:6px}
.page-fourletter .flg-you .meter-track{height:14px}
.page-fourletter .flg-you .meter-dot{width:18px;height:18px;margin:-9px 0 0 -9px;border-width:var(--bw-thin);background:var(--amber)}
.page-fourletter .flg-you-cap{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;margin-top:6px;padding-left:34px;font-size:14px;line-height:1.3}
.page-fourletter .flg-you-note{margin-top:14px;padding:10px 12px;background:var(--quiet-bg);font-size:14px;line-height:1.45;font-weight:500}
.page-fourletter .flg-you-more{margin-top:16px}

/* the chapter */
.page-fourletter .flg-ch-title{font-size:clamp(28px,2.6vw,40px);line-height:1.02;margin-bottom:22px}
/* The chapter opener. It is a scene, so the first sentence keeps the big display setting and does the pulling; the rest of the
   paragraph reads at prose size. At display size the whole paragraph ran to two thirds of the first screen and pushed everything
   under it out of sight (Wayne, Sep 22: "did we intentionally want that 'at 7:40 ...' thing to be 2/3 of the reading pane?").
   Scoped to this page's opener, so no other lede on the site moves. */
.page-fourletter .flg-intro{max-width:68ch;font-size:clamp(var(--fs-body),1.35vw,19px);line-height:1.55}
.page-fourletter .flg-intro .lead-in{font-size:clamp(18px,1.6vw,23px);max-width:46ch;margin-bottom:10px}
.page-fourletter .flg-intro + .flg-intro-more,.page-fourletter .flg-intro-more + .flg-intro-more{max-width:62ch;margin-top:.75em}
.page-fourletter .flg-item p + p{margin-top:.5em}
/* A real quotation (D71 idea 4): serif italic, large, on white with an amber rule and an oversized amber mark. The one place a third face is used. */
.page-fourletter .flg-quote{position:relative;margin:0 0 30px;padding:50px 30px 22px 30px;background:var(--surface);border-left:3px solid var(--amber);border-radius:0 var(--r) var(--r) 0;max-width:62ch}
.page-fourletter .flg-quote::before{content:"\201C";position:absolute;left:22px;top:-10px;font:400 120px/1 var(--display);color:var(--amber)}
.page-fourletter .flg-quote blockquote p{font-family:var(--quote);font-style:italic;font-weight:400;font-size:clamp(23px,2.1vw,29px);line-height:1.3;letter-spacing:-.005em}
.page-fourletter .flg-quote figcaption{margin-top:14px;font-size:13.5px;font-weight:600;color:var(--muted)}
.page-fourletter .flg-quote cite{font-style:normal}
.page-fourletter .flg-sec{margin-top:46px}
.page-fourletter .flg-main .sh h3{flex:1 1 0;min-width:0;font-size:var(--fs-h2);line-height:1.05}
.page-fourletter .flg-prose p{max-width:68ch}
.page-fourletter .flg-prose p+p{margin-top:14px}
.page-fourletter .flg-prose a,.page-fourletter .flg-item a{text-decoration-color:rgba(34,136,224,.35);text-decoration-thickness:1px;text-underline-offset:4px;font-weight:700}
.page-fourletter .flg-pull{margin:30px 0;padding:4px 0 4px 26px;border-left:14px solid var(--amber)}
.page-fourletter .flg-prose .flg-pull+p{margin-top:0}
.page-fourletter .flg-pull p{font-family:var(--heading);font-size:clamp(23px,2.3vw,31px);line-height:1.1;letter-spacing:-.01em;max-width:30ch;font-weight:700}

/* strengths and weaknesses */
.page-fourletter .flg-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.page-fourletter .flg-item{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;padding:16px 18px 18px;box-shadow:var(--sh-sm)}
.page-fourletter .flg-list-strengths .flg-item{border-top:3px solid var(--cobalt)}
.page-fourletter .flg-list-weaknesses .flg-item{border-top:3px solid var(--amber)}
.page-fourletter .flg-item-num{display:grid;place-items:center;width:32px;height:32px;background:var(--grad-blue);color:#fff;border:0;border-radius:10px;box-shadow:0 10px 20px -10px rgba(34,136,224,.7);font-family:var(--display);font-weight:500;font-size:16px;line-height:1}
.page-fourletter .flg-list-weaknesses .flg-item-num{background:rgba(184,121,31,.14);color:var(--amber-text);border:0;box-shadow:none;border-radius:10px}
.page-fourletter .flg-item-title{font-size:19px;line-height:1.1;margin-top:5px}
.page-fourletter .flg-item p{font-size:15.5px;line-height:1.5;margin-top:8px}

/* a chapter's own foot: real jobs after career, the 988 line after stress */
.page-fourletter .flg-jobs{margin-top:48px}
/* the jobs box sits in the narrow guide column, so its buttons go under the text at every width (side by side they squeezed the
   text to a few letters a line at laptop widths) */
.page-fourletter .fl-cta.flg-jobs{grid-template-columns:minmax(0,1fr)}
.page-fourletter .flg-jobs .btn-row{justify-content:flex-start}
.page-fourletter .flg-support{margin-top:44px;padding:14px 18px;background:var(--quiet-bg);font-size:14.5px;line-height:1.5;font-weight:500;max-width:78ch}
.page-fourletter .flg-support p+p{margin-top:4px}
.page-fourletter .flg-support-links a{font-weight:700;text-decoration-color:var(--ink)}

/* previous and next */
.page-fourletter .flg-pager{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:56px}
.page-fourletter .flg-pager-link{display:flex;flex-direction:column;gap:8px;padding:16px 20px 18px;box-shadow:var(--sh-sm)}
.page-fourletter .flg-pager-next{align-items:flex-end;text-align:right;background:var(--grad-blue);color:#fff;border-color:transparent}
.page-fourletter a.flg-pager-next:hover{box-shadow:0 22px 40px -12px rgba(34,136,224,.75)}
.page-fourletter .flg-pager-dir{font-size:12.5px;font-weight:700;letter-spacing:.01em}
.page-fourletter .flg-pager-next .flg-pager-dir{color:var(--amber)}
.page-fourletter .flg-pager-title{font-family:var(--heading);font-size:clamp(17px,1.6vw,21px);line-height:1.08;letter-spacing:-.01em;font-weight:700}

/* chapter cards: the rest of the guide */
.page-fourletter .flg-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.page-fourletter .flg-card-item{min-width:0;display:flex}
.page-fourletter .flg-card{display:flex;flex-direction:column;width:100%}
.page-fourletter .flg-card .band{gap:12px}
.page-fourletter .flg-card-num{display:inline-flex;align-items:center;gap:10px;min-width:0}
.page-fourletter .flg-card-num b{display:inline-grid;place-items:center;min-width:26px;height:24px;padding:0 4px;background:var(--grad-blue);color:#fff;border:0;border-radius:10px;box-shadow:0 10px 20px -10px rgba(34,136,224,.7);font-family:var(--display);font-size:13px;letter-spacing:0}
.page-fourletter .flg-card-body{display:flex;flex-direction:column;flex:1;padding:16px 18px 18px}
.page-fourletter .flg-card-title{font-size:21px;line-height:1.05}
.page-fourletter .flg-card-topics{margin-top:10px;font-size:14.5px;line-height:1.45;font-weight:500;color:var(--muted)}
.page-fourletter .flg-card .link-more{margin-top:auto;padding-top:14px;align-self:flex-start;border-bottom:0;text-decoration:none;text-decoration-color:rgba(34,136,224,.35);text-decoration-thickness:1px;text-underline-offset:4px}

/* the FAQ at the foot */
.page-fourletter .flg-faq{max-width:920px}
.page-fourletter .fl-faq-letters{display:grid;gap:8px;padding-left:18px;list-style:square}
.page-fourletter .fl-faq-letters a{font-weight:700}

/* the chapter page header */
.page-fourletter-chapter .flg-head-row{display:grid;grid-template-columns:132px minmax(0,1fr);gap:30px;align-items:center;margin-top:20px}
.page-fourletter-chapter .flg-head-art{display:block;border:var(--bw) solid var(--line);box-shadow:var(--sh-attn);background:var(--surface)}
.page-fourletter-chapter .flg-head-art .art{margin:0;border:0}
.page-fourletter-chapter .flg-head-art .art img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.page-fourletter-chapter .flg-head-art .fl-art-fallback .fl-tile-lg{width:24px;height:24px;font-size:14px;box-shadow:none}
.page-fourletter-chapter .flg-head-art .fl-art-fallback .fl-tiles{gap:3px}
.page-fourletter-chapter .flg-head-art .fl-art-fallback::after{inset:6px}
.page-fourletter-chapter .flg-head-kind{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:0;font-weight:700;font-size:15px}
.page-fourletter-chapter .flg-head-kind .fl-tiles{gap:4px}
.page-fourletter-chapter .fl-kind-tag{background:rgba(34,136,224,.12);color:var(--blue-deep);padding:5px 10px;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border-radius:var(--r-pill)}
.page-fourletter-chapter .flg-head-name{font-weight:700;font-size:16px}
.page-fourletter-chapter .flg-h1{margin-top:12px;font-size:clamp(34px,4vw,58px);line-height:1.02;max-width:20ch}
.page-fourletter-chapter .flg-layout{margin-top:48px}
/* the FAQ lines up with the chapter column on wide screens */
.page-fourletter-chapter .flg-foot{margin-left:calc(300px + 72px)}

@media (max-width:1240px){
  .page-fourletter .flg-layout{grid-template-columns:260px minmax(0,1fr);gap:36px 44px}
  .page-fourletter .flg-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .page-fourletter-chapter .flg-foot{margin-left:calc(260px + 44px)}
}
@media (max-width:1100px){
  .page-fourletter .flg-list{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:860px){
  .page-fourletter .flg-layout{grid-template-columns:minmax(0,1fr);gap:0}
  .page-fourletter .flg-side{display:contents}
  .page-fourletter .flg-toc{order:0;min-width:0;margin-bottom:26px}
  .page-fourletter .flg-main{order:1}
  .page-fourletter .flg-you{order:2;margin-top:40px}
  .page-fourletter .flg-toc-title{margin-bottom:8px}
  /* position:relative (Oct 7, 2026): each locked chapter's lock has a screen-reader label, positioned absolute. With no positioned
     ancestor inside the strip, those labels were placed against the page, not the strip, so the strip's scrolling did not hold them,
     and the page grew to 1,685px on a 390px phone. A phone then let the page slide sideways (the first customer test). */
  .page-fourletter .flg-toc-list{position:relative;display:flex;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;background:none;border:0;box-shadow:none;
    margin-inline:calc(-1 * var(--pad));padding:2px var(--pad) 10px;scroll-padding-inline:var(--pad);scrollbar-width:thin}
  .page-fourletter .flg-toc-list li{flex:none;scroll-snap-align:start}
  .page-fourletter .flg-toc-link,.page-fourletter .flg-toc-list li:first-child .flg-toc-link{
    grid-template-columns:auto auto;gap:8px;min-height:44px;padding:6px 12px 6px 7px;border:var(--bw-thin) solid var(--line);background:var(--surface);white-space:nowrap;font-size:14.5px;border-radius:var(--r-sm)}
  .page-fourletter .flg-toc-list li .flg-toc-link.is-here{background:rgba(34,136,224,.1);border-color:rgba(34,136,224,.25);color:var(--ink)}
  .page-fourletter .flg-toc-num{width:26px;height:26px}
  .page-fourletter .flg-pager{margin-top:44px}
  .page-fourletter-chapter .flg-layout{margin-top:32px}
  .page-fourletter-chapter .flg-foot{margin-left:0}
}
@media (max-width:720px){
  .page-fourletter .flg-cards{grid-template-columns:minmax(0,1fr);gap:16px}
  .page-fourletter .flg-card-title{font-size:19px}
  .page-fourletter .flg-sec{margin-top:38px}
  .page-fourletter .flg-pull{margin:24px 0;padding-left:18px;border-left-width:10px}
  .page-fourletter .flg-quote{padding:42px 18px 16px 20px;border-left-width:8px}
  .page-fourletter .flg-quote::before{font-size:96px;left:14px}
  .page-fourletter .flg-item{padding:14px 14px 16px;gap:12px}
  .page-fourletter .flg-pager{grid-template-columns:minmax(0,1fr);gap:14px}
  .page-fourletter .flg-pager-gap{display:none}
  .page-fourletter .flg-jobs .btn-row{justify-content:stretch}
  .page-fourletter .flg-jobs .btn{flex:1 1 100%}
  /* the art sits beside the type's name and chapter, and the headline gets the full width below them */
  .page-fourletter-chapter .flg-head-row{grid-template-columns:72px minmax(0,1fr);gap:14px 16px;align-items:center}
  .page-fourletter-chapter .flg-head-text{display:contents}
  .page-fourletter-chapter .flg-head-kind{grid-column:2;grid-row:1}
  .page-fourletter-chapter .flg-h1{grid-column:1/-1;grid-row:2;max-width:none;overflow-wrap:normal;hyphens:manual}
  .page-fourletter-chapter .flg-head-art{box-shadow:var(--sh-attn)}
  .page-fourletter-chapter .flg-head-name{font-size:14.5px}
  .page-fourletter-chapter .flg-h1{font-size:clamp(28px,8.4vw,38px);margin-top:10px}
}

/* ================================================================== the four-letter result chapter (/results/four-letter/)
   app/chapter-fourletter.js is this track's, but the page's body class is page-chapter (40-chapters.css). These rules cover only what the
   guide rework added there: the type's art beside the headline and the guide's chapter cards. */
.page-chapter .ch-fl-art{margin:0;box-shadow:var(--sh)}
.page-chapter .ch-fl-art .band{background:transparent;color:var(--acc-text);}
.page-chapter .ch-fl-art .art{margin:0;border:0}
.page-chapter .ch-fl-line{max-width:40ch}
.page-chapter .ch-fl-guide-lede{margin-bottom:20px}
.page-chapter .ch-fl-from{display:grid;gap:6px;padding-left:18px;list-style:square}
.page-chapter .ch-fl-from a{font-weight:700}
.page-chapter .ch-fl-faq .faq{max-width:920px}
.page-chapter .flg-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.page-chapter .flg-card-item{min-width:0;display:flex}
.page-chapter .flg-card{display:flex;flex-direction:column;width:100%}
.page-chapter .flg-card .band{background:transparent;color:var(--acc-text);gap:12px}
.page-chapter .flg-card-num{display:inline-flex;align-items:center;gap:10px;min-width:0}
.page-chapter .flg-card-num b{display:inline-grid;place-items:center;min-width:26px;height:24px;padding:0 4px;background:var(--grad-blue);color:#fff;border:0;border-radius:10px;box-shadow:0 10px 20px -10px rgba(34,136,224,.7);font-family:var(--display);font-size:13px;letter-spacing:0}
.page-chapter .flg-card-body{display:flex;flex-direction:column;flex:1;padding:16px 18px 18px}
.page-chapter .flg-card-title{font-size:21px;line-height:1.05}
.page-chapter .flg-card-topics{margin-top:10px;font-size:14.5px;line-height:1.45;font-weight:500;color:var(--muted)}
.page-chapter .flg-card .link-more{margin-top:auto;padding-top:14px;align-self:flex-start;border-bottom:0;text-decoration:none;text-decoration-color:rgba(34,136,224,.35);text-decoration-thickness:1px;text-underline-offset:4px}
@media (max-width:1240px){ .page-chapter .flg-cards{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:860px){ .page-chapter .ch-fl-top .ch-top-aside{max-width:360px} }
@media (max-width:720px){
  .page-chapter .flg-cards{grid-template-columns:minmax(0,1fr);gap:16px}
  .page-chapter .flg-card-title{font-size:19px}
  .page-chapter .ch-fl-art{box-shadow:var(--sh-attn)}
  .page-chapter .ch-fl-top .ch-top-aside{max-width:250px}
}

/* ------------------------------------------------------------------ chapter card decks (D56)
   Every card ships visible; app/guide-deck.js collapses a topic into one card at a time. Without
   that script the chapter reads as a stack, which is also what prints and what a crawler sees.
   Sep 23, 2026: the scope also covers .page-chapter and .page-results, because the Personality report now renders the reader's
   own type's chapters as the same decks (app/report-guide.js). :is() takes the highest specificity of its arguments and all
   three are single classes, so every rule below still weighs exactly what it did and the guide pages are untouched. */
:is(.page-fourletter,.page-chapter,.page-results) .flg-progress{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:26px 0 8px;padding:13px 17px;background:var(--surface);border:var(--bw) solid var(--line);box-shadow:var(--sh-btn)}
:is(.page-fourletter,.page-chapter,.page-results) .flg-progress-label{font:700 11px/1 var(--body);letter-spacing:.01em;color:var(--muted)}
:is(.page-fourletter,.page-chapter,.page-results) .flg-bar{flex:1;min-width:150px;height:10px;border:0;background:var(--ground-deep);border-radius:var(--r-pill);position:relative;overflow:hidden}
:is(.page-fourletter,.page-chapter,.page-results) .flg-bar i{position:absolute;inset:0 auto 0 0;width:0;background:var(--cobalt);transition:width .3s ease}
:is(.page-fourletter,.page-chapter,.page-results) .flg-progress-count{font-family:var(--heading);font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
:is(.page-fourletter,.page-chapter,.page-results) .flg-chip{font:700 12px/1 var(--body);border:var(--bw) solid var(--line);background:var(--surface);padding:9px 13px;cursor:pointer;box-shadow:var(--sh-xs);border-radius:var(--r)}
:is(.page-fourletter,.page-chapter,.page-results) .flg-chip:hover{background:var(--ground-deep)}

:is(.page-fourletter,.page-chapter,.page-results) .flg-deck-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap}
:is(.page-fourletter,.page-chapter,.page-results) .flg-deck-head .sh{flex:1 1 320px}
:is(.page-fourletter,.page-chapter,.page-results) .flg-deck-meter{display:flex;align-items:center;gap:11px;padding-bottom:10px}
:is(.page-fourletter,.page-chapter,.page-results) .flg-deck-count{font-family:var(--heading);font-size:15px;white-space:nowrap;font-weight:700;font-variant-numeric:tabular-nums}
:is(.page-fourletter,.page-chapter,.page-results) .flg-pips{display:flex;gap:5px}
:is(.page-fourletter,.page-chapter,.page-results) .flg-pip{width:24px;height:8px;padding:0;border:var(--bw) solid var(--line);background:var(--surface);border-radius:var(--r-pill);cursor:pointer}
:is(.page-fourletter,.page-chapter,.page-results) .flg-pip.is-read{background:var(--ground-deep)}
:is(.page-fourletter,.page-chapter,.page-results) .flg-pip.is-at{background:var(--cobalt)}
:is(.page-fourletter,.page-chapter,.page-results) .flg-done{font:700 10.5px/1 var(--body);letter-spacing:.01em;background:rgba(42,157,143,.14);color:#1f7a6f;border:0;padding:5px 10px;border-radius:var(--r-pill);letter-spacing:.1em;text-transform:uppercase}

/* the nav sits above the cards, at a fixed height, so it never moves as card length changes */
:is(.page-fourletter,.page-chapter,.page-results) .flg-deck-nav{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin:16px 0 0}
:is(.page-fourletter,.page-chapter,.page-results) .flg-nav{display:flex;align-items:center;gap:11px;height:56px;padding:9px 15px;border:var(--bw) solid var(--line);background:var(--surface);box-shadow:var(--sh-xs);cursor:pointer;text-align:left;border-radius:var(--r)}
:is(.page-fourletter,.page-chapter,.page-results) .flg-nav:hover:not(:disabled){background:var(--ground-deep)}
/* The shadow stays when the button is disabled. Dropping it moved the button by 4px, so on the first
   card, where Back is disabled, the two halves of the nav sat at different heights. Opacity already
   says it is disabled, and it fades the shadow with everything else. */
:is(.page-fourletter,.page-chapter,.page-results) .flg-nav:disabled{opacity:.35;cursor:default}
:is(.page-fourletter,.page-chapter,.page-results) .flg-nav-next{justify-content:flex-end}
:is(.page-fourletter,.page-chapter,.page-results) .flg-nav-arrow{font-family:var(--display);font-size:19px;line-height:1}
:is(.page-fourletter,.page-chapter,.page-results) .flg-nav-text{display:flex;flex-direction:column;gap:3px;min-width:0}
:is(.page-fourletter,.page-chapter,.page-results) .flg-nav-right{margin-left:auto;text-align:right}
:is(.page-fourletter,.page-chapter,.page-results) .flg-nav-text em{font-style:normal;font:700 10.5px/1 var(--body);letter-spacing:.01em;color:var(--muted)}
:is(.page-fourletter,.page-chapter,.page-results) .flg-nav-text>span{font-weight:700;font-size:14.5px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

:is(.page-fourletter,.page-chapter,.page-results) .flg-deck-cards{margin-top:22px}
/* The deck as a real stack (D71 idea 3): the cards still to come peek out behind the current one, tipped a few degrees.
   app/guide-deck.js sets data-behind (0, 1 or 2) on the stack; with no script, or with every card open, nothing is drawn. */
:is(.page-fourletter,.page-chapter,.page-results) .flg-deck-cards[data-behind]{position:relative;isolation:isolate;margin-bottom:14px}
:is(.page-fourletter,.page-chapter,.page-results) .flg-deck-cards[data-behind]::before,:is(.page-fourletter,.page-chapter,.page-results) .flg-deck-cards[data-behind]::after{content:"";position:absolute;inset:0;z-index:-1;border:var(--bw) solid var(--line);border-radius:var(--r);display:none}
:is(.page-fourletter,.page-chapter,.page-results) .flg-deck-cards[data-behind="1"]::after,:is(.page-fourletter,.page-chapter,.page-results) .flg-deck-cards[data-behind="2"]::after{display:block;background:var(--surface-dim);transform:rotate(1.1deg) translate(8px,8px)}
:is(.page-fourletter,.page-chapter,.page-results) .flg-deck-cards[data-behind="2"]::before{display:block;background:var(--ground-deep);transform:rotate(-1.6deg) translate(-6px,14px)}
:is(.page-fourletter,.page-chapter,.page-results) .flg-deck-cards[data-behind] .flg-card.is-dealt{animation:flg-deal .32s cubic-bezier(.2,.8,.3,1)}
:is(.page-fourletter,.page-chapter,.page-results) .flg-deck-cards[data-behind] .flg-card.is-dealt-back{animation:flg-deal-back .32s cubic-bezier(.2,.8,.3,1)}
@keyframes flg-deal{from{transform:translate(26px,6px) rotate(1.5deg);opacity:.4}to{transform:none;opacity:1}}
@keyframes flg-deal-back{from{transform:translate(-26px,6px) rotate(-1.5deg);opacity:.4}to{transform:none;opacity:1}}
:is(.page-fourletter,.page-chapter,.page-results) .flg-deck-cards .flg-card{position:relative;background:var(--surface);border:var(--bw) solid var(--line);box-shadow:var(--sh);padding:28px 26px 22px;display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:30px;align-items:start;border-radius:var(--r)}
/* display:grid would otherwise beat the browser's [hidden] and show every card at once */
:is(.page-fourletter,.page-chapter,.page-results) .flg-deck-cards .flg-card[hidden]{display:none}
/* a card with no picture yet uses the full width rather than leaving a gap */
:is(.page-fourletter,.page-chapter,.page-results) .flg-deck-cards .flg-card-plain{grid-template-columns:minmax(0,1fr)}
:is(.page-fourletter,.page-chapter,.page-results) .flg-deck-cards .flg-card+.flg-card{margin-top:34px}
:is(.page-fourletter,.page-chapter,.page-results) .flg-deck-cards .flg-card-tab{position:absolute;top:-15px;left:20px;margin:0;background:var(--grad-blue);color:#fff;border:0;box-shadow:0 10px 20px -10px rgba(34,136,224,.7);padding:7px 12px;font-family:var(--body);font-weight:700;font-size:12.5px;line-height:1;letter-spacing:.03em;text-transform:none;border-radius:var(--r-pill)}
/* The signpost stays cobalt on every card. It used to alternate cobalt and amber, which read as a
   difference in kind between two cards that are the same kind of thing. */
:is(.page-fourletter,.page-chapter,.page-results) .flg-deck-cards .flg-card-body{grid-column:1;grid-row:1}
:is(.page-fourletter,.page-chapter,.page-results) .flg-deck-cards .flg-card-body p{max-width:58ch}
:is(.page-fourletter,.page-chapter,.page-results) .flg-deck-cards .flg-card-body p+p{margin-top:13px}
:is(.page-fourletter,.page-chapter,.page-results) .flg-deck-cards .flg-card-art{grid-column:2;grid-row:1;margin:0}
:is(.page-fourletter,.page-chapter,.page-results) .flg-deck-cards .flg-card-art img{width:100%;height:auto;display:block;border:var(--bw) solid var(--line)}
:is(.page-fourletter,.page-chapter,.page-results) .flg-deck-cards .flg-card-foot{grid-column:1;grid-row:2;margin-top:16px;padding-top:13px;border-top:var(--bw) solid var(--line)}
:is(.page-fourletter,.page-chapter,.page-results) .flg-mark{display:inline-flex;align-items:center;gap:9px;font:700 12.5px/1 var(--body);border:var(--bw) solid var(--line);background:var(--surface);padding:9px 13px;cursor:pointer;border-radius:var(--r-sm)}
:is(.page-fourletter,.page-chapter,.page-results) .flg-mark:hover{background:var(--ground-deep)}
:is(.page-fourletter,.page-chapter,.page-results) .flg-mark-box{width:15px;height:15px;border:2px solid rgba(34,136,224,.6);background:#fff;border-radius:5px;display:block;position:relative}
:is(.page-fourletter,.page-chapter,.page-results) .flg-mark[aria-pressed="true"]{background:rgba(42,157,143,.14);color:#1f7a6f}
:is(.page-fourletter,.page-chapter,.page-results) .flg-mark[aria-pressed="true"] .flg-mark-box:after{content:"";position:absolute;left:3px;top:0;width:6px;height:10px;border:solid var(--ink);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
:is(.page-fourletter,.page-chapter,.page-results) .flg-deck-cards .flg-card.is-read{background:var(--surface-dim)}

@media (max-width:820px){
  :is(.page-fourletter,.page-chapter,.page-results) .flg-deck-cards .flg-card{grid-template-columns:1fr;gap:18px;padding:26px 20px 20px}
  :is(.page-fourletter,.page-chapter,.page-results) .flg-deck-cards .flg-card-art{grid-column:1;grid-row:1}
  :is(.page-fourletter,.page-chapter,.page-results) .flg-deck-cards .flg-card-body{grid-row:2}
  :is(.page-fourletter,.page-chapter,.page-results) .flg-deck-cards .flg-card-foot{grid-row:3}
  :is(.page-fourletter,.page-chapter,.page-results) .flg-nav-text>span{display:none}
  :is(.page-fourletter,.page-chapter,.page-results) .flg-deck-head{align-items:flex-start}
  /* The cards behind tip less here (Sep 26, 2026). A stacked card on a phone runs 1,000px and taller, and at the desktop's 1.1 degrees
     plus 8px its corner reached past the screen's edge: the four-letter pages were 392px wide at 390. Half a degree and a 4px step keep
     the peek inside the page's side margin for any card up to about 2,000px tall; the one behind that leans left tips less too. */
  :is(.page-fourletter,.page-chapter,.page-results) .flg-deck-cards[data-behind="1"]::after,:is(.page-fourletter,.page-chapter,.page-results) .flg-deck-cards[data-behind="2"]::after{transform:rotate(.5deg) translate(4px,8px)}
  :is(.page-fourletter,.page-chapter,.page-results) .flg-deck-cards[data-behind="2"]::before{transform:rotate(-.6deg) translate(-4px,12px)}
}

/* ---------------------------------------------------------------- the type guides' deeper chapters behind the report lock (D128,
   app/flags.js lockFullReport). A padlock on each locked chapter's link in the list; on the type page each locked card is a
   contents row (its title, a one-line summary and its reading time); and, where the chapter would be, a panel with that summary,
   what the report gives and the way into it. None of the chapter is here to style: it is not in the page at all. For a reader who
   has the report, on their own type, app/fourletter-you.js takes all of this off. */
.page-fourletter .flg-lock{display:inline-flex;align-items:center;color:var(--amber-text)}
.page-fourletter .flg-lock svg{width:11px;height:12px}
.page-fourletter .flg-toc-link.is-gated{grid-template-columns:28px minmax(0,1fr) auto}
.page-fourletter .flg-toc-link.is-gated .flg-toc-label{color:var(--muted)}
.page-fourletter .flg-card-sum{color:var(--muted)}
/* the reading time sits at the foot of the card with its link, so the nine rows line up however long each summary runs */
.page-fourletter .flg-card-time{margin-top:auto;padding-top:14px;font:600 12.5px/1.5 var(--body);color:var(--faint);font-variant-numeric:tabular-nums}
.page-fourletter .flg-card .flg-card-time + .link-more{margin-top:2px;padding-top:0}
.page-fourletter .flg-read-on-line{max-width:660px;margin:-8px 0 26px;color:var(--muted)}

.page-fourletter .flg-gate{max-width:640px;margin:8px 0 4px;padding:30px 30px 28px;border:var(--bw) solid var(--line);border-radius:14px;background:var(--ground)}
.page-fourletter .flg-gate-k{display:flex;align-items:center;gap:8px;font:800 10px/1.4 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--amber-text)}
.page-fourletter .flg-gate-sum{margin-top:14px;font:300 22px/1.45 var(--display);color:var(--ink)}
.page-fourletter .flg-gate-p{margin-top:14px;font:400 16px/1.6 var(--body);color:var(--muted)}
.page-fourletter .flg-gate-btns{margin-top:22px;flex-wrap:wrap}

@media (max-width:820px){
  .page-fourletter .flg-gate{padding:22px 18px 20px}
  .page-fourletter .flg-gate-sum{font-size:19px}
  .page-fourletter .flg-gate-btns .btn{width:100%;justify-content:center}
}

/* Where the letters come from (Sep 22, 2026): the credit, our own derivation, and why every scale is drawn as a scale rather
   than a box. Three hairline cards on the grey band under the sixteen types, with the citation under them. */
.page-fl-ref .flr-origin-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:26px}
.page-fl-ref .flr-origin-card{padding:24px 24px 22px;border:var(--bw) solid var(--line);border-radius:14px;background:var(--paper)}
.page-fl-ref .flr-origin-card h3{font:700 15px/1.3 var(--body);letter-spacing:0;color:var(--ink)}
.page-fl-ref .flr-origin-card p{margin-top:10px;font:400 15px/1.65 var(--body);color:var(--muted);max-width:none}
.page-fl-ref .flr-origin-cite{margin-top:20px;max-width:88ch}

@media (max-width:900px){
  .page-fl-ref .flr-origin-grid{grid-template-columns:1fr;gap:14px}
  .page-fl-ref .flr-origin-card{padding:20px 18px 18px}
}

/* What is free and what the report costs, under the panel's line (customer test, Oct 8, 2026) */
.flg-gate-offer{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:16px 0 4px;font:600 15px/1.4 var(--body);color:var(--ink)}
.flg-gate-free{padding:5px 10px;border-radius:5px;background:var(--blue-wash);font-size:13.5px;color:var(--blue-ink)}


/* ===== 52-traits.css ===== */
/* ==========================================================================
   52-traits.css · owner: Types agent
   Pages: /types/traits/ and the five /types/traits/<slug>/ pages (body class page-traits).
   The trait tile (.tr-tile, traitTile() in src/pages/traits.mjs) also appears on the /types/ hub (page-hub), so tile rules are
   scoped to both. No character art on these pages: trait marks are plain ink squares and letters are white tiles.
   ========================================================================== */

/* ---------------------------------------------------------------- pieces shared with the hub
   EDITORIAL (D88, Sep 22 2026). The trait mark was a teal gradient chip with an inset highlight and a coloured drop shadow, which is
   the bold-vector look D10-D13 used and D88 replaced (Wayne, on /types/traits/extraversion/: "clearly vector style. that needs
   redone"). It is now the same part as every other letter tile on the site (.lt in 05-components.css): a flat wash, a hairline, 5-6px
   corners, no shadow and no gradient. Blue rather than ink, so a trait's mark is never mistaken for a four-letter tile. */
:is(.page-traits,.page-hub) .tr-mark{display:inline-grid;place-items:center;flex:none;min-width:52px;padding:0 6px;height:52px;
  background:var(--blue-wash);color:var(--blue-ink);border:var(--bw) solid var(--blue-mark);border-radius:6px;box-shadow:none;
  font-family:var(--body);font-weight:700;font-size:22px;line-height:1}
:is(.page-traits,.page-hub) .tr-mark-sm{min-width:36px;padding:0 4px;height:36px;font-size:15px;border-radius:5px}
/* Emotional stability's tile spells out "Stability" (round 1, decision 6): the same tile height, a wider tile, smaller uppercase type */
:is(.page-traits,.page-hub) .tr-mark-word{font-size:14px;letter-spacing:.03em;text-transform:uppercase;padding:0 12px}
:is(.page-traits,.page-hub) .tr-mark-sm.tr-mark-word{font-size:11px;letter-spacing:.02em;padding:0 7px}
:is(.page-traits,.page-hub) .tr-scale{display:inline-flex;align-items:flex-start;gap:6px}
:is(.page-traits,.page-hub) .tr-end{display:flex;flex-direction:column;align-items:center;gap:3px}
:is(.page-traits,.page-hub) .tr-end small{font-size:10.5px;font-weight:700;letter-spacing:.01em;color:var(--muted)}
/* the scale between two letter tiles: a grey hairline, like the midpoint rule on the four-letter scales, never an ink dash */
:is(.page-traits,.page-hub) .tr-track{align-self:flex-start;width:34px;height:0;margin-top:14px;border-top:var(--bw-thin) dashed var(--grey)}
:is(.page-traits,.page-hub) .tr-scale .lt-sm+small{font-size:9.5px}
:is(.page-traits,.page-hub) .tr-noletter{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.01em;padding:6px 10px;
  background:var(--quiet-bg);border:var(--bw-thin) solid var(--line);border-radius:5px;color:var(--muted)}

/* A trait tile is a card in the same library as .type-card (05-components.css), so its name is set in the display serif at 400, not
   in bold Figtree, and the strip above it is the quiet tint rather than a teal wash. */
:is(.page-traits,.page-hub) .tr-tile{display:flex;flex-direction:column;height:100%;color:var(--ink);text-decoration:none}
:is(.page-traits,.page-hub) .tr-tile-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:12px 14px 12px;
  background:var(--quiet-bg);border-bottom:var(--bw) solid var(--line)}
:is(.page-traits,.page-hub) .tr-tile-body{display:flex;flex-direction:column;flex:1;padding:13px 15px 15px}
:is(.page-traits,.page-hub) .tr-tile-name{font-family:var(--display);font-size:22px;line-height:1.1;letter-spacing:-.012em;overflow-wrap:normal;hyphens:manual;font-weight:400}
:is(.page-traits,.page-hub) .tr-tile-line{font-size:15.5px;line-height:1.4;font-weight:500;margin-top:4px}
:is(.page-traits,.page-hub) .tr-tile-meta{font-size:12.5px;line-height:1.4;color:var(--muted);font-weight:600;margin-top:8px}
:is(.page-traits,.page-hub) .tr-tile .link-more{margin-top:auto;padding-top:10px;align-self:flex-start;border-bottom:0;text-decoration:none}
:is(.page-traits,.page-hub) a.tr-tile:hover{transform:translateY(-4px);box-shadow:var(--sh-xs)}
@media (prefers-reduced-motion:reduce){ :is(.page-traits,.page-hub) a.tr-tile:hover{transform:none} }

:is(.page-traits,.page-hub) .tr-fam{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:14px;color:var(--ink);text-decoration:none;margin:2px 10px 2px 0;white-space:nowrap}
:is(.page-traits,.page-hub) .tr-fam:hover span+*{text-decoration:underline}

/* ---------------------------------------------------------------- library */
.page-traits .tr-hero .lede{max-width:60ch}
.page-traits .trl-grid{list-style:none;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:22px}
.page-traits .trl-grid:not(.trl-grid-4)>li{grid-column:span 2}
.page-traits .trl-grid:not(.trl-grid-4)>li:nth-child(n+4){grid-column:span 3}
.page-traits .trl-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.page-traits .trl-grid-4 .tr-tile-name{font-size:16px}
.page-traits .trl-grid>li{min-width:0}
.page-traits .tr-intro{max-width:74ch;margin-bottom:22px}

/* how to read a trait: the curve every tile carries, drawn once at full size, and three cards beside it (Sep 22) */
.page-traits .trl-start-lede{max-width:66ch;margin-bottom:28px}
.page-traits .trl-start-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start}
.page-traits .trl-curve{margin:0;display:flex;flex-direction:column}
.page-traits .trl-curve .trl-curve-mid{text-align:center;color:var(--sage-text);margin-bottom:6px}
.page-traits .trl-curve-plot{margin-top:auto}
.page-traits .trl-curve .tr-spread-plot{height:190px}
.page-traits .trl-curve .tr-spread-ends{font-size:13.5px;margin-top:10px}
.page-traits .trl-curve-axis{stroke:var(--ink);stroke-width:1.5;stroke-dasharray:4 5;opacity:.5;vector-effect:non-scaling-stroke}
.page-traits .trl-curve figcaption{margin-top:14px;max-width:52ch}
.page-traits .trl-start-cards{list-style:none;display:grid;gap:12px}
.page-traits .trl-start-cards .box-title{font-size:18px}
.page-traits .trl-start-cards .small{margin-top:6px;line-height:1.5}
@media (max-width:860px){
  .page-traits .trl-start-row{grid-template-columns:minmax(0,1fr);gap:20px}
  .page-traits .trl-curve .tr-spread-plot{height:140px}
}

/* how the traits connect: supporting, so the table sits on the quiet tint with label-style column heads instead of an ink bar */
.page-traits .trl-table-wrap{overflow-x:auto;padding:4px 18px 6px}
.page-traits .trl-table{width:100%;border-collapse:collapse;min-width:620px}
.page-traits .trl-table th,.page-traits .trl-table td{text-align:left;padding:11px 14px;vertical-align:middle;font-size:var(--fs-small)}
.page-traits .trl-table :is(th,td):first-child{padding-left:0}
.page-traits .trl-table thead th{background:transparent;color:var(--ink);font-size:var(--fs-label);letter-spacing:.01em;border-bottom:var(--bw-thin) solid var(--line)}
.page-traits .trl-table tbody tr+tr{border-top:1px solid var(--quiet-rule)}
.page-traits .trl-table tbody th a{font-family:var(--heading);font-size:16px;color:var(--ink);font-weight:700}
.page-traits .tr-cell-letters{display:inline-flex;align-items:center;gap:5px;margin-right:6px;vertical-align:middle;font-weight:700}

/* ---------------------------------------------------------------- trait page */
.page-traits .tr-kicker{display:flex;align-items:center;gap:10px;font-size:15px;margin:14px 0 12px}
.page-traits .tr-name{font-size:min(92px,calc(min(100vw - 40px,800px) / (var(--len,12) * .82)))}
@media (max-width:1100px) and (min-width:861px){ .page-traits .tr-name{font-size:min(80px,calc((100vw - 520px) / (var(--len,12) * .82)))} }
.page-traits .tr-line{margin-top:18px;max-width:28ch;color:var(--muted)}
/* the hero's one line of orientation: the trait is a scale, and whether the letters are read from it */
.page-traits .tr-hero-note{margin-top:16px;max-width:52ch;font-size:var(--fs-small);line-height:1.5;font-weight:500;color:var(--ink)}

.page-traits .tr-glance{padding:0}
/* A quiet panel's band is a small label over a hairline, never a coloured strip (SITE_KIT §13 rule 2). It carried a teal accent
   from the old vector system; the trait pages now take their colour from the shared tokens like every other library page. */
.page-traits .tr-glance .band{background:transparent;color:var(--ink);border-bottom:var(--bw-thin) solid var(--line)}
.page-traits .tr-glance-list{margin:0;padding:6px 20px 12px}
.page-traits .tr-glance-list>div{padding:14px 0}
.page-traits .tr-glance-list>div+div{border-top:var(--bw-thin) dashed var(--rule-soft)}
.page-traits .tr-glance-list dt{font-size:12px;font-weight:700;letter-spacing:.01em;color:var(--muted);margin-bottom:8px}
.page-traits .tr-glance-list dd{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.page-traits .tr-glance-note{font-size:15px;font-weight:600}
.page-traits .tr-glance-fams{display:flex;flex-wrap:wrap;gap:4px}

.page-traits .tr-prose{max-width:70ch}
.page-traits .tr-prose p{font-size:19px;line-height:1.55}
.page-traits .tr-prose p+p{margin-top:14px}

.page-traits .tr-ends{align-items:stretch}
.page-traits .tr-end-card .band{background:transparent;color:var(--ink);border-bottom:var(--bw-thin) solid var(--line)}
.page-traits .tr-end-card.is-plain .band{background:transparent;color:var(--muted)}
.page-traits .tr-end-card .small{font-size:16.5px;line-height:1.5}
.page-traits .tr-end-card .small+.small{margin-top:10px}
.page-traits .tr-end-letter .lt{box-shadow:none}
.page-traits .tr-middle{max-width:74ch;font-size:16px}
.page-traits .tr-middle .label{margin-right:8px}

/* supporting sections on a trait page (letter, interest links, research): quiet panels, reading-size text */
.page-traits .tr-sup-text{max-width:74ch;line-height:1.55}
.page-traits .tr-research-box{padding:4px 20px}
.page-traits .tr-research{list-style:none;padding:0;margin:0;max-width:88ch}
.page-traits .tr-research>li{padding:12px 0;font-size:var(--fs-small);line-height:1.55;font-weight:500}
.page-traits .tr-research>li+li{border-top:1px solid var(--quiet-rule)}

.page-traits .tr-letter{display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr);gap:20px 36px;align-items:start}
.page-traits .tr-letter-scale{display:grid;place-items:center;min-height:120px}
.page-traits .tr-letter-scale .lt{box-shadow:none}
.page-traits .tr-letter-scale .tr-track{width:56px;margin-top:25px}
.page-traits .tr-letter-scale .tr-end small{font-size:11.5px;margin-top:4px}
.page-traits .tr-noletter-lg{font-size:13px;padding:10px 14px}

.page-traits .tr-fams{align-items:stretch}
.page-traits .tr-famcard{display:flex;align-items:center;gap:14px;padding:12px 16px;color:var(--ink);text-decoration:none}
.page-traits .tr-famcard .lt{box-shadow:none}
.page-traits .tr-famcard b{display:block;font-family:var(--heading);font-weight:700;font-size:16px}
.page-traits .tr-famcard small{display:block;font-size:var(--fs-small);line-height:1.4;margin-top:2px}
.page-traits .tr-famcard:hover b{color:var(--cobalt)}

@media (max-width:1240px){
  .page-traits .trl-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .page-traits .tr-letter{grid-template-columns:minmax(0,1fr)}
  .page-traits .trl-grid:not(.trl-grid-4){grid-template-columns:repeat(2,minmax(0,1fr))}
  .page-traits .trl-grid:not(.trl-grid-4)>li,.page-traits .trl-grid:not(.trl-grid-4)>li:nth-child(n+4){grid-column:auto}
}
@media (max-width:720px){
  .page-traits .trl-grid,.page-traits .trl-grid-4,.page-traits .trl-grid:not(.trl-grid-4){grid-template-columns:minmax(0,1fr);gap:16px}
  .page-traits .tr-prose p{font-size:17px}
  .page-traits .tr-research-box{padding:2px 16px}
  .page-traits .tr-letter-scale{min-height:104px}
}

/* ---------------------------------------------------------------- how people spread across the trait (D72; app/trait-spread.js)
   The tile's top strip draws the bell curve, names the trait's two ends, and places the reader's dot once they have a score.
   EDITORIAL (D88): the curve is everyone else, so it is drawn in grey on a hairline baseline, never the 2.5-3px ink strokes and teal
   fill of the old vector system. The dot stays blue, because blue is you. */
:is(.page-traits,.page-hub) .tr-tile-top.tr-spread{display:block;padding:14px 16px 10px}
:is(.page-traits,.page-hub) .tr-spread-plot{position:relative;height:62px}
:is(.page-traits,.page-hub) .tr-spread-plot svg{display:block;width:100%;height:100%;overflow:visible}
:is(.page-traits,.page-hub) .tr-spread-fill{fill:var(--grey);fill-opacity:.28}
:is(.page-traits,.page-hub) .tr-spread-line{fill:none;stroke:var(--ref-deep);stroke-width:1.5;vector-effect:non-scaling-stroke}
:is(.page-traits,.page-hub) .tr-spread-base{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
:is(.page-traits,.page-hub) .tr-spread-ends{display:flex;justify-content:space-between;gap:10px;margin-top:7px;font-size:12px;font-weight:600;line-height:1.25;color:var(--muted)}
:is(.page-traits,.page-hub) .tr-spread-ends span:last-child{text-align:right}
:is(.page-traits,.page-hub) .tr-spread-you{position:absolute;width:0;height:0}
:is(.page-traits,.page-hub) .tr-spread-you i{position:absolute;left:-8px;top:-8px;width:16px;height:16px;border-radius:50%;background:var(--cobalt);border:var(--bw-thin) solid var(--surface)}
:is(.page-traits,.page-hub) .tr-spread-you em{position:absolute;bottom:13px;left:50%;transform:translateX(-50%);white-space:nowrap;font-style:normal;font-weight:700;font-size:12px;line-height:1;color:var(--cobalt);font-variant-numeric:tabular-nums}


/* On a phone the three columns ran 620px wide in a 352px box, cut off with no sign it scrolled (customer test, Oct 8, 2026): each trait
   becomes its own block, and each cell carries its column's name. */
@media (max-width:640px){
  .page-traits .trl-table{min-width:0}
  .page-traits .trl-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .page-traits .trl-table tr{display:block;padding:12px 0;border-bottom:var(--bw-thin) solid var(--line)}
  .page-traits .trl-table tr:last-child{border-bottom:0}
  .page-traits .trl-table :is(th,td){display:block;padding:4px 0;border:0}
  .page-traits .trl-table td::before{content:attr(data-label);display:block;margin-bottom:4px;font-size:var(--fs-label);color:var(--muted)}
}


/* ===== 53-compat.css ===== */
/* ==========================================================================
   53-compat.css · owner: compatibility track (writer A)
   "With other people" (app/compat-section.js): three context panels with three parts, their research and a question, the romance safety note,
   then the research card, the can/can't box, and the section's sources. It appears on type pages and /results/,
   so rules are scoped under .compat instead of a body class. No family colors (the four-letter pages don't use them).
   Emphasis (docs/SITE_KIT.md §13): the panels are primary. The research card and the can/can't box are supporting panels
   (box-quiet: flat tint, no border, shadow or colored band, a card-size title at most), and the sources are fine print.
   ========================================================================== */
.compat{display:grid;gap:22px}
.compat p{margin:0}
.compat p+p{margin-top:10px}

/* research card (supporting, after the panels) */
.compat .compat-card{margin-top:10px}
/* the band is a small label on the tint; set here too, since the four-letter pages paint every .band ink */
.compat .compat-card-band{padding:12px 20px 8px;background:transparent;color:var(--ink);border-bottom:var(--bw-thin) solid var(--quiet-rule)}
.compat .compat-card .box-pad{padding:14px 20px 20px}
.compat .compat-card-title{font-family:var(--display);font-size:var(--fs-h3);line-height:1.15;margin:0 0 10px;max-width:60ch;text-wrap:balance;font-weight:500}
.compat .compat-card .small{max-width:78ch;line-height:1.55}
.compat .compat-card .compat-note{margin-top:14px;padding-top:12px;border-top:var(--bw-thin) solid var(--quiet-rule)}
.compat .compat-note{max-width:80ch}
.compat .compat-take{max-width:80ch}
.compat .compat-close{max-width:70ch;padding:18px 20px;background:var(--surface);border:var(--bw) solid var(--line);border-radius:var(--r)}

/* context panels */
.compat .compat-ctxs{display:grid;gap:16px}
.compat .compat-ctx{padding:0;background:var(--surface)}
.compat .compat-ctx-head{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:16px 22px;cursor:pointer;list-style:none;background:transparent}
.compat .compat-ctx-head::-webkit-details-marker{display:none}
.compat .compat-ctx[open]>.compat-ctx-head{border-bottom:1px solid var(--line);background:var(--amber-wash)}
.compat .compat-ctx-title{font-family:var(--display);font-size:20px;line-height:1.1;letter-spacing:0;margin:0;font-weight:500}
.compat .compat-ctx-toggle{flex:none;width:32px;height:32px;display:grid;place-items:center;border:var(--bw-thin) solid var(--line);background:var(--surface);font-family:var(--heading);font-size:22px;line-height:1;font-weight:700;border-radius:var(--r-sm)}
.compat .compat-ctx-toggle::after{content:"+"}
.compat .compat-ctx[open] .compat-ctx-toggle::after{content:"\2212"}
.compat .compat-ctx-head:focus-visible{outline:3px solid var(--cobalt);outline-offset:-6px}
.compat .compat-ctx-body{padding:20px 22px 22px}

/* Three parts since the "What helps" tip list went (D33, D55): the two short ones stack in the left column against friction on
   the right, and the cited research runs full width underneath, where it reads against the friction it belongs to. */
.compat .compat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"easy friction" "bring friction" "evidence evidence";align-items:start;gap:22px 32px}
/* Sep 25, 2026: a panel whose friction entry has a "just like you" paragraph shows it as a fourth part, so the four read as a two
   by two, the different person's three parts first and the catch with somebody alike last (app/compat-section.js). */
.compat .compat-grid.has-alike{grid-template-areas:"easy friction" "bring alike" "evidence evidence"}
.compat .compat-part{min-width:0}
.compat .compat-easy{grid-area:easy}
.compat .compat-friction{grid-area:friction}
.compat .compat-bring{grid-area:bring}
.compat .compat-alike{grid-area:alike}
/* One cited paragraph runs the width of the panel, capped at a readable line; two or three sit side by side. */
.compat .compat-evidence{grid-area:evidence;min-width:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:14px 32px;align-items:start}
.compat .compat-evidence .compat-research{margin-top:0}
/* set in full, since the tag level can vary (h4 on type pages) and h1 to h4 get the display face by default */
.compat .compat-part-title{font-family:var(--body);font-size:13px;font-weight:700;line-height:1.55;letter-spacing:.01em;margin:0 0 8px;padding-bottom:6px;border-bottom:var(--bw-thin) solid var(--line)}
.compat .compat-friction .compat-part-title,.compat .compat-alike .compat-part-title{border-bottom-color:var(--amber);border-bottom-width:var(--bw)}
.compat .compat-bring .compat-part-title{border-bottom-color:var(--sage);border-bottom-width:var(--bw)}
.compat .compat-research{margin-top:12px;padding:4px 0 4px 12px;background:none;border-left:3px solid var(--cobalt);max-width:74ch}
.compat .compat-research .tag{margin-right:4px;vertical-align:1px}

.compat .compat-safety{margin-top:16px;padding:14px 18px;border:var(--bw) solid var(--line);background:var(--surface);border-radius:var(--r)}
.compat .compat-safety a{font-weight:700;text-decoration:underline;text-underline-offset:3px}
.compat .compat-limit{margin-top:14px;color:var(--muted)}

/* D33: the research card, the can't-predict answer and the sources are questions in the page's FAQ (app/compat-section.js compatFaqItems).
   The stopgap sources list for four-letter pages until the type-guides integration (compatSection inlineSources): */
.compat .compat-inline-sources{list-style:none;margin:18px 0 0;padding:0}
.compat .compat-inline-sources li{margin:0 0 6px}

@media (max-width:760px){
  .compat .compat-grid{grid-template-columns:1fr;grid-template-areas:"easy" "friction" "bring" "evidence"}
  .compat .compat-grid.has-alike{grid-template-areas:"easy" "friction" "bring" "alike" "evidence"}
  .compat .compat-ctx-head{padding:14px 16px}
  .compat .compat-ctx-body{padding:16px}
  .compat .compat-card-band{padding:10px 16px 8px}
  .compat .compat-card .box-pad{padding:12px 16px 16px}
}


/* ===== 55-people.css ===== */
/* ==========================================================================
   55-people.css · owner: famous track
   Pages: /people/ and /people/<slug>/ (body class page-people). Text only: no portraits, no art of real people.
   Emphasis (SITE_KIT §13): the person and their likely patterns are primary. The record, caveats, method and sources use the
   quiet components (.box-quiet, .sh-quiet, howWeKnow(), sources(), finePrint()) and sit lower on the page.
   The type-page list (.pp-on-type, peopleOnTypeSection() in src/pages/people.mjs) is scoped globally under its own class
   so a type page can drop it in without this partial knowing the page's body class.
   ========================================================================== */

/* ---------------------------------------------------------------- hub */
.page-people .pp-hero .lede{max-width:64ch}
.page-people .pp-intro{margin-bottom:22px;max-width:70ch}

.page-people .pp-grid{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.page-people .pp-grid>li{min-width:0}
@media (max-width:1000px){ .page-people .pp-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:620px){ .page-people .pp-grid{grid-template-columns:minmax(0,1fr)} }
.page-people .pp-card{display:flex;flex-direction:column;height:100%;color:var(--ink);text-decoration:none}
.page-people .pp-card-body{display:flex;flex-direction:column;flex:1;padding:16px 18px 18px}
.page-people .pp-card-dates{font-weight:700;font-size:13px;letter-spacing:.05em;color:var(--muted)}
.page-people .pp-card-name{font-family:var(--heading);font-size:24px;line-height:1.02;letter-spacing:-.01em;margin-top:6px;font-weight:700}
.page-people .pp-card-role{font-size:14px;font-weight:700;color:var(--muted);margin-top:6px}
.page-people .pp-card-pattern{align-self:flex-start;margin-top:12px;padding:3px 8px;background:var(--amber-wash);border:var(--bw-thin) solid var(--line);font-weight:700;font-size:13px;letter-spacing:.04em;border-radius:var(--r-sm)}
.page-people .pp-card-line{font-size:15.5px;line-height:1.45;font-weight:500;margin-top:10px}
.page-people .pp-card-link{font-size:12.5px;font-weight:500;color:var(--muted);margin-top:10px}
.page-people .pp-card .link-more{margin-top:auto;padding-top:12px;align-self:flex-start;text-decoration:underline;text-decoration-color:rgba(34,136,224,.35);text-decoration-thickness:1px;text-underline-offset:4px;font-weight:700}

/* the questions at the foot of the hub and each profile (D33): faq() from app/ui.js, folded shut */
.page-people .pp-questions .faq-a .pp-caveats li,.page-people .pp-questions .faq-a .pp-ticks li{font-size:var(--fs-small)}
.page-people .pp-ticks{list-style:none;margin-top:10px;padding:0}
.page-people .pp-ticks li{position:relative;padding-left:16px}
.page-people .pp-ticks li+li{margin-top:4px}
.page-people .pp-ticks li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--cobalt)}

.page-people .pp-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:22px 40px;padding:30px 34px}
.page-people .pp-cta-kicker{font-weight:700;font-size:13px;letter-spacing:.01em;color:var(--amber)}
.page-people .pp-cta-title{font-size:clamp(26px,3.2vw,40px);line-height:1;margin-top:8px;color:var(--ground)}
.page-people .pp-cta .btn{box-shadow:var(--sh-attn)}

/* ---------------------------------------------------------------- profile: the person first */
.page-people .pp-head{margin-top:18px;max-width:900px}
.page-people .pp-meta{font-size:15px;font-weight:700;letter-spacing:.03em;color:var(--muted)}
.page-people .pp-name{font-size:clamp(40px,7vw,88px);line-height:.94;letter-spacing:-.03em;margin-top:10px;overflow-wrap:anywhere}
.page-people .pp-intro-line{margin-top:14px;max-width:62ch}
/* The disclaimer: regular-size type right under the name, never folded away (FAMOUS_PEOPLE.md section 4), but a thin rule, not a banner. */
.page-people .pp-disclaimer{margin-top:18px;padding:2px 0 2px 16px;border-left:3px solid var(--sage-deep);max-width:78ch}
.page-people .pp-disclaimer p{font-size:var(--fs-small);line-height:1.5;font-weight:500}
.page-people .pp-disclaimer p+p{margin-top:6px}

.page-people .pp-cols{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:48px;align-items:start}
@media (max-width:980px){ .page-people .pp-cols{grid-template-columns:minmax(0,1fr);gap:0} }
.page-people .pp-main{min-width:0}
.page-people .pp-side{position:sticky;top:24px;display:grid;gap:16px;margin-top:var(--sec)}
@media (max-width:980px){ .page-people .pp-side{position:static;grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:620px){ .page-people .pp-side{grid-template-columns:minmax(0,1fr)} }
.page-people .pp-toc{list-style:none;margin-top:6px;padding:0}
.page-people .pp-toc a{display:block;padding:7px 0;font-weight:700;font-size:14.5px;text-decoration:none;border-bottom:var(--bw-thin) dashed var(--rule-soft)}
.page-people .pp-toc li:last-child a{border-bottom:0}
.page-people .pp-toc a:hover{text-decoration:underline;text-decoration-color:rgba(34,136,224,.35);text-decoration-thickness:1px}
.page-people .pp-take .small{color:var(--on-ink);font-weight:600;margin-bottom:12px}

/* Likely patterns: the result, so it carries the full box weight. */
.page-people .pp-pattern-top{border-left:12px solid var(--amber)}
.page-people .pp-pattern-code{font-family:var(--display);font-size:clamp(40px,6vw,64px);line-height:1;letter-spacing:.02em;margin:10px 0 10px}
.page-people .pp-pattern-words{font-size:clamp(26px,3.6vw,36px)}
.page-people .pp-pattern .body,.page-people .pp-pattern .small{max-width:62ch}
.page-people .pp-also{display:grid;grid-template-columns:repeat(min(var(--n,2),2),minmax(0,1fr));gap:16px;margin-top:16px}
@media (max-width:760px){ .page-people .pp-also{grid-template-columns:minmax(0,1fr)} }
.page-people .pp-also .pp-pattern-code{font-size:30px;margin:8px 0 6px}
.page-people .pp-also .pp-pattern-words{font-size:18px;font-family:var(--body);font-weight:700;letter-spacing:0}
.page-people .pp-note-line{margin-top:12px;color:var(--muted)}

.page-people .pp-letters{display:flex;flex-wrap:wrap;gap:14px;margin:18px 0 4px}
.page-people .pp-letter{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:64px}
.page-people .pp-letter small{font-size:11px;font-weight:700;letter-spacing:.01em;text-align:center;max-width:90px}
.page-people .pp-letter-none small{color:var(--muted)}
.page-people .pp-q,.page-people .pp-tie{display:inline-grid;place-items:center;min-width:52px;height:52px;padding:0 6px;border:var(--bw-thin) dashed var(--grey);font-family:var(--heading);font-size:22px;color:var(--muted);font-weight:700}
.page-people .pp-tie{color:var(--ink);border-color:var(--ink);font-size:16px}
@media (max-width:520px){ .page-people .pp-letters{gap:8px} .page-people .pp-letter{min-width:0;flex:1 1 0} .page-people .pp-letter small{font-size:10px;letter-spacing:.03em} .page-people .pp-q,.page-people .pp-tie{min-width:44px;height:44px} .page-people .pp-tie{font-size:13px;padding:0 4px} }

/* Trait by trait */
.page-people .pp-traits{list-style:none;padding:0}
.page-people .pp-trait{padding:18px 0;border-top:var(--bw-thin) solid var(--rule-soft)}
.page-people .pp-trait:first-child{border-top:0;padding-top:4px}
.page-people .pp-trait-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin-bottom:6px}
.page-people .pp-trait-head h3{font-size:var(--fs-h3)}
.page-people .pp-trait-where{font-weight:700;font-size:16px}
.page-people .pp-trait-conf{font-size:var(--fs-note);font-weight:600;color:var(--muted)}
.page-people .pp-trait .body{max-width:68ch}
.page-people .pp-trait .more{margin-top:8px;max-width:78ch}
.page-people .pp-trait-es .pp-trait-where{font-weight:500;color:var(--muted);font-size:15px}

/* ---------------------------------------------------------------- profile: supporting blocks */
.page-people .pp-conf{font-size:var(--fs-note);font-weight:600;color:var(--muted);margin:-6px 0 10px;max-width:78ch}
.page-people .pp-fact{padding:12px 0;border-top:var(--bw-thin) dashed var(--rule-soft)}
.page-people .pp-fact:first-of-type{border-top:0;padding-top:2px}
.page-people .pp-record .pp-fact h3{font-family:var(--body);font-size:15px;font-weight:700;letter-spacing:0;margin-bottom:2px}
.page-people .pp-fact .small,.page-people .pp-fact .body,.page-people .pp-block>.small,.page-people .pp-block>.body{max-width:72ch}
.page-people .pp-fact-main{padding:16px 0}
.page-people .pp-fact-main h3{font-size:var(--fs-h3);margin-bottom:6px}
.page-people .pp-block>.small+.small{margin-top:8px}
.page-people .pp-block>.fine-print{margin-top:10px}
.page-people .pp-sub{font-size:15px;font-family:var(--body);font-weight:700;margin:16px 0 4px}
.page-people .pp-caveats{list-style:none;padding:0;max-width:72ch}
.page-people .pp-caveats li{position:relative;padding-left:16px}
.page-people .pp-caveats li+li{margin-top:6px}
.page-people .pp-caveats li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;background:var(--muted)}

.page-people .pp-reading .box{border-left:12px solid var(--amber)}
.page-people .pp-table-wrap{overflow-x:auto;margin-top:12px}
.page-people .pp-table{width:100%;border-collapse:collapse;min-width:480px}
.page-people .pp-table th,.page-people .pp-table td{text-align:left;padding:10px 12px;font-size:15px;vertical-align:top}
.page-people .pp-table thead th{background:transparent;color:var(--muted);font-weight:600;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;border-bottom:1px solid var(--line)}
.page-people .pp-table tbody tr+tr{border-top:var(--bw-thin) dashed var(--rule-soft)}
.page-people .pp-table tbody th{font-weight:700}

.page-people .pp-foot{border-top:var(--bw-thin) solid var(--rule-soft);margin-top:var(--sec)}
.page-people .pp-foot .pp-sub{margin-top:14px}

/* ---------------------------------------------------------------- on a type page */
.pp-on-type ul{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-top:14px}
.pp-on-type li{display:flex;min-width:0}
.pp-on-type .pp-ex{display:flex;flex-direction:column;gap:4px;width:100%;padding:14px 16px;color:var(--ink);text-decoration:none}
.pp-on-type .pp-ex-name{font-family:var(--heading);font-size:19px;line-height:1.05;font-weight:700}
.pp-on-type .pp-ex-dates{font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--muted)}
.pp-on-type .pp-ex-role{font-size:14px;font-weight:600}
.pp-on-type>p{margin-top:8px;max-width:78ch}

/* ---------------------------------------------------------------- review mode */
.page-people .pp-review-list{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin:18px 0 22px;max-width:900px}

/* ---------------------------------------------------------------- D50: the simple hub card and short profile */
.page-people .pp-card-type{align-self:flex-start;padding:4px 10px;background:rgba(184,121,31,.14);color:var(--amber-text);border:0;font-family:var(--body);font-size:12px;letter-spacing:.12em;line-height:1.2;font-weight:700;border-radius:var(--r-pill)}
.page-people .pp-card-type.is-none{background:var(--ground-deep);color:var(--muted);font-family:inherit;font-size:13px;font-weight:700;letter-spacing:.02em;padding:5px 9px}
.page-people .pp-card .pp-card-name{margin-top:14px}
.page-people .pp-card-dates{margin-top:8px}
.page-people .pp-type{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:20px}
.page-people .pp-type-label{font-weight:700;font-size:13px;letter-spacing:.01em}
.page-people .pp-type .link-more{font-weight:700;text-decoration:underline;text-decoration-color:rgba(34,136,224,.35);text-decoration-thickness:1px;text-underline-offset:4px}
.page-people .pp-portrait{max-width:68ch}
.page-people .pp-portrait p+p{margin-top:14px}
.page-people .pp-portrait .body{font-size:18px;line-height:1.6}
.page-people .pp-foot-links{max-width:68ch}
.page-people .pp-foot-links .pp-take{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px}
.page-people .pp-foot-links .pp-take .small{margin-bottom:0}


/* ===== 60-info.css ===== */
/* ==========================================================================
   60-info.css · owner: Info agent
   Pages: /method/, /privacy/, /articles/ and each article.
   Only this agent edits this file. Shared pieces live in 00-base.css and
   05-components.css (read them, never edit them); see docs/SITE_KIT.md.
   Scope every rule under the page body class (e.g. .page-info) so pages cannot
   leak into each other.
   ========================================================================== */

/* ---------------------------------------------------------------- shared on info pages */
.page-info .prose-block>*+*{margin-top:12px}
.page-info .prose-block .body{max-width:68ch}
.page-info .section-lg>.body{max-width:78ch}
.page-info .block-title{display:flex;align-items:center;gap:12px;font-size:var(--fs-h3);line-height:1.15}
.page-info .block-title .lt{flex:none}
.page-info .body a,.page-info .small a,.page-info .note a{text-decoration-color:rgba(34,136,224,.35);text-decoration-thickness:1px;text-underline-offset:4px;font-weight:700}
.page-info .edge-ink{border-left:3px solid var(--ink)}
.page-info .accent-amber{color:var(--amber)}
.page-info .num{font-family:var(--heading);font-weight:700;font-variant-numeric:tabular-nums}

/* a list with small square ink markers */
.page-info .tick-list{list-style:none}
.page-info .tick-list li{position:relative;padding-left:24px;font-size:16px;line-height:1.5;font-weight:500}
.page-info .tick-list li+li{margin-top:10px}
.page-info .tick-list li::before{content:"";position:absolute;left:0;top:.45em;width:8px;height:8px;border-radius:50%;background:var(--cobalt);top:.55em}

/* the ink call-to-action strip that closes a page */
.page-info .end-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:22px 40px;padding:30px 34px}
.page-info .end-kicker{font-weight:600;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#ffc98a}
.page-info .end-title{font-size:clamp(28px,3.4vw,42px);line-height:1;margin-top:8px;color:#fff}
.page-info .end-cta .btn-ghost{box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.page-info .end-cta .btn-primary{box-shadow:0 14px 30px -12px rgba(0,0,0,.5)}
.page-info .end-cta .btn:hover{box-shadow:0 18px 34px -12px rgba(0,0,0,.55)}
.page-info .end-cta .btn:active{box-shadow:none}

/* numbered in-page contents (method hero, article side) */
.page-info .glance-toc ol,.page-info .side-toc ol{list-style:none}
.page-info .glance-toc a,.page-info .side-toc a{display:flex;align-items:center;gap:12px;padding:9px 0;font-weight:700;font-size:15px;line-height:1.25;text-decoration:none;border-bottom:var(--bw-thin) dashed var(--rule-soft)}
.page-info .glance-toc li:last-child a,.page-info .side-toc li:last-child a{border-bottom:0}
.page-info .glance-toc a:hover .toc-lbl,.page-info .side-toc a:hover{text-decoration:underline;text-decoration-color:rgba(34,136,224,.35);text-decoration-thickness:1px}
.page-info .toc-n{flex:none;display:grid;place-items:center;width:26px;height:26px;background:var(--grad-blue);color:#fff;border:0;border-radius:10px;box-shadow:0 10px 20px -10px rgba(34,136,224,.7);font-family:var(--display);font-weight:500;font-size:13px;line-height:1}

/* ================================================================ METHOD */
.page-info .method-hero{align-items:end}
.page-info .method-toc{padding:10px 12px}
.page-info .method-toc .toc{padding:0;gap:8px}
.page-info .method-toc .toc a{display:inline-flex;align-items:center;gap:9px;padding:5px 12px 5px 5px;font-size:14px}
.page-info .method-toc .toc a:hover .toc-n{background:var(--ground);color:var(--ink)}
.page-info .glance .band{padding:10px 16px}
.page-info .glance-grid{display:grid;grid-template-columns:1fr 1fr;border-bottom:var(--bw) solid var(--line)}
.page-info .glance-cell{padding:14px 16px 13px;border-bottom:var(--bw-thin) solid var(--line)}
.page-info .glance-cell:nth-child(odd){border-right:var(--bw-thin) solid var(--line)}
.page-info .glance-cell:nth-last-child(-n+2){border-bottom:0}
.page-info .glance-cell b{display:block;font-weight:400;font-size:34px;line-height:1;letter-spacing:-.02em}
.page-info .glance-cell span{display:block;margin-top:6px;font-weight:700;font-size:12px;letter-spacing:.01em;line-height:1.3}
.page-info .glance-cell:last-child b{color:var(--cobalt)}
.page-info .glance-toc{padding:12px 16px 6px}
.page-info .glance-toc .label{margin-bottom:2px}

/* chapter cards */
.page-info .chapter-card{display:flex;flex-direction:column}
.page-info .chapter-card .band{padding:10px 16px}
.page-info .chapter-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:10px;flex:1}
.page-info .chapter-body h3{font-size:22px;line-height:1.08}
.page-info .facts{margin-top:auto;padding-top:6px}
.page-info .facts>div{display:grid;grid-template-columns:110px minmax(0,1fr);gap:12px;padding:10px 0;border-top:var(--bw-thin) solid var(--line)}
.page-info .facts dt{font-weight:700;font-size:12px;letter-spacing:.01em;line-height:1.5}
.page-info .facts dd{font-weight:600;font-size:15px;line-height:1.4}

.page-info .scale{list-style:none;display:grid;gap:6px;max-width:440px}
.page-info .scale li{display:flex;align-items:center;gap:12px;font-weight:600;font-size:15.5px;padding:6px 10px;background:var(--surface);border:var(--bw-thin) solid var(--line)}
.page-info .scale-n{display:grid;place-items:center;width:26px;height:26px;background:var(--grad-blue);color:#fff;border:0;border-radius:10px;box-shadow:0 10px 20px -10px rgba(34,136,224,.7);font-family:var(--display);font-weight:500;font-size:13px;line-height:1}

/* the three changed interest questions */
.page-info .swaps{padding:0}
.page-info .swaps-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;padding:14px 20px;border-bottom:var(--bw) solid var(--line)}
.page-info .swap-list{list-style:none}
.page-info .swap{display:grid;grid-template-columns:110px minmax(0,1fr) 30px minmax(0,1fr);gap:16px;align-items:center;padding:14px 20px;border-bottom:var(--bw-thin) dashed var(--rule-soft)}
.page-info .swap:last-child{border-bottom:0}
.page-info .swap-n{font-family:var(--heading);font-size:13px;letter-spacing:.02em;font-weight:700;font-variant-numeric:tabular-nums}
.page-info .swap-old,.page-info .swap-new{display:flex;flex-direction:column;gap:3px;font-weight:600;font-size:16px;line-height:1.35}
.page-info .swap-old{color:var(--muted)}
.page-info .swap-old s{text-decoration-thickness:2px;text-decoration-color:var(--grey)}
.page-info .swap-old .label,.page-info .swap-new .label{font-size:11px;color:var(--ink)}
.page-info .swap-new{color:var(--ink)}
.page-info .swap-arrow{font-weight:700;font-size:22px;text-align:center}
.page-info .swaps-foot{max-width:none;padding:12px 20px 16px;border-top:var(--bw) solid var(--line);background:var(--ground)}

/* scoring */
.page-info .example-meter{margin:0}
.page-info .example-label{margin-bottom:10px}
.page-info .example-name{font-weight:700;font-size:17px;margin-bottom:10px}
.page-info .example-key{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:12px;font-weight:600;font-size:12.5px;line-height:1.3}
.page-info .example-key span{display:inline-flex;align-items:center;gap:8px}
.page-info .key-dot{display:inline-block;width:14px;height:14px;border-radius:50%;background:var(--cobalt);border:0;box-shadow:0 0 0 3px rgba(255,255,255,.9)}
.page-info .key-typ{display:inline-block;width:22px;height:12px;border:var(--bw) solid var(--line);border-radius:3px;background:repeating-linear-gradient(135deg,transparent 0 3px,rgba(151,160,174,.7) 3px 6px)}
/* the key's hatch mixed from the token where the engine can (the plain value above is the same color), kept to @supports so an
   engine without color-mix() uses the plain one instead of dropping the hatch */
@supports (color:color-mix(in srgb,red,red)){.page-info .key-typ{background:repeating-linear-gradient(135deg,transparent 0 3px,color-mix(in srgb,var(--ref-deep) 70%,transparent) 3px 6px)}}
.page-info .example-cap{margin-top:14px;padding-top:12px;border-top:var(--bw-thin) solid var(--line);font-weight:700;font-size:16px;line-height:1.4}

.page-info .dims .band{padding:10px 16px}
.page-info .dim-list{list-style:none}
.page-info .dim{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,170px);gap:14px;align-items:center;padding:12px 16px;border-bottom:var(--bw-thin) dashed var(--rule-soft)}
.page-info .dim:last-child{border-bottom:0}
.page-info .dim-names{font-weight:700;font-size:15.5px;line-height:1.3}
.page-info .dim-source{font-weight:600;font-size:15px;line-height:1.3;text-align:right}
.page-info .dim-unused{grid-template-columns:minmax(0,1fr) auto;background:var(--ground)}
.page-info .dim-unused .dim-names{font-size:12px;letter-spacing:.01em}
.page-info .score-split .callout{margin-top:16px}

.page-info .step-box{display:flex;flex-direction:column;gap:10px}
.page-info .step-top{display:flex;align-items:center;gap:10px;font-family:var(--heading);font-size:17px;letter-spacing:-.005em;line-height:1.1;font-weight:700}
.page-info .step-top b{font-weight:400}

.page-info .clarity-scale{list-style:none;margin-top:16px;border:var(--bw) solid var(--line)}
.page-info .clarity-scale li{display:grid;grid-template-columns:110px 96px minmax(0,1fr);gap:14px;align-items:center;padding:11px 14px;border-bottom:var(--bw-thin) solid var(--line)}
.page-info .clarity-scale li:last-child{border-bottom:0;background:rgba(42,157,143,.1);color:var(--ink)}
.page-info .cl-name{font-family:var(--heading);font-size:15px;font-weight:700}
.page-info .cl-gap{font-weight:700;font-size:12px;letter-spacing:.01em}
.page-info .cl-text{font-weight:500;font-size:14.5px;line-height:1.4}

.page-info .kind-list{list-style:none;margin-top:10px}
.page-info .kind{display:grid;grid-template-columns:128px minmax(0,1fr);gap:16px;align-items:center;padding:12px 0;border-bottom:var(--bw-thin) dashed var(--rule-soft)}
.page-info .kind:last-child{border-bottom:0}
.page-info .kind-hex .hex{max-width:128px}
.page-info .kind-name{font-family:var(--heading);font-size:15px;line-height:1.2;font-weight:700}
.page-info .kind-name .muted{font-family:var(--body);font-weight:700;font-size:12.5px;text-transform:none;letter-spacing:0}
.page-info .kind .small{margin-top:3px}
.page-info .kind-codes{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.page-info .kind-codes span{font-family:var(--display);font-size:11.5px;padding:1px 5px;border:var(--bw-thin) solid var(--line);background:var(--ground)}

.page-info .families-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.page-info .families-row .label{margin-right:4px}
.page-info .fam-link{display:inline-flex;align-items:center;gap:8px;padding:4px 10px 4px 4px;border:var(--bw-thin) solid var(--line);background:var(--surface);font-weight:700;font-size:14px;text-decoration:none;border-radius:var(--r-sm)}
.page-info .fam-link:hover{box-shadow:var(--sh-xs)}

/* research */
.page-info .tier{display:flex;flex-direction:column;gap:14px}
.page-info .tier-title{padding-bottom:9px;border-bottom:var(--bw) solid var(--line);font-size:16px}
.page-info .basis .band{padding:10px 18px}
.page-info .basis-list{list-style:none}
.page-info .basis-row{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr) auto;gap:18px;align-items:center;padding:13px 18px;border-bottom:var(--bw-thin) solid var(--line)}
.page-info .basis-row:nth-child(even){background:var(--ground)}
.page-info .basis-row:last-child{border-bottom:0}
.page-info .basis-part{font-weight:700;font-size:16px;line-height:1.3}
.page-info .basis-rests{font-weight:500;font-size:15px;line-height:1.45}
.page-info .basis-tag{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
/* callouts on this page are caveats and notes beside the method: the shared quiet look, a little wider and larger here */
.page-info .callout{max-width:none;font-size:15.5px}

/* limits */
.page-info .limit-can{color:var(--sage-deep)}
.page-info .limits-grid .body{font-size:16.5px}
.page-info .notice{max-width:none}

/* sources: quiet panels that stay open (a [n] marker on a result lands on its row), and the study list folded in howWeKnow() */
.page-info .src-box .band{padding:10px 18px}
.page-info .src-list{list-style:none}
.page-info .src-row{display:grid;grid-template-columns:30px minmax(0,1fr);gap:14px;padding:13px 18px;border-bottom:var(--bw-thin) dashed var(--rule-soft)}
.page-info .src-row:last-child{border-bottom:0}
.page-info .src-row:target{background:var(--amber-wash)}
.page-info .src-num{display:grid;place-items:center;width:30px;height:30px;background:var(--grad-blue);color:#fff;border:0;border-radius:10px;box-shadow:0 10px 20px -10px rgba(34,136,224,.7);font-family:var(--display);font-weight:500;font-size:13px;line-height:1;font-weight:700;font-variant-numeric:tabular-nums}
.page-info .src-cite{font-weight:600;font-size:14.5px;line-height:1.45}
.page-info .src-cite a,.page-info .study-list a,.page-info .credit-links a{font-weight:700;text-decoration-color:rgba(34,136,224,.35);text-decoration-thickness:1px;text-underline-offset:3px;word-break:break-word}
.page-info .src-supports{margin-top:4px;font-size:13.5px;line-height:1.45;font-weight:500;color:var(--muted)}
.page-info .src-supports b{color:var(--ink)}
.page-info .src-read{margin-top:6px;font-size:13px;font-weight:600;line-height:1.5}
.page-info .src-read .tag{margin-right:6px}
.page-info .studies .more-body>.fine-print{margin-bottom:4px}
.page-info .studies .more-body ul.study-list{list-style:none;padding-left:0}
.page-info .study-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:start;padding:10px 0;border-bottom:var(--bw-thin) dashed var(--quiet-rule);max-width:none}
.page-info .study-list li:last-child{border-bottom:0}
.page-info .study-list .src-cite{font-size:13.5px}
.page-info .study-list .src-read{margin-top:0}

/* two-column source lists on wide screens */
.page-info .src-cols{columns:2;column-gap:0}
.page-info .src-cols>li{break-inside:avoid}
.page-info .src-box .src-cols{column-rule:var(--bw-thin) solid var(--quiet-rule)}
.page-info .studies .src-cols{column-gap:40px}
@media (max-width:1100px){ .page-info .src-cols{columns:1} }

.page-info .gap-example{margin-top:18px;padding:12px 14px;border:var(--bw-thin) dashed var(--ink);background:var(--ground)}
.page-info .gap-example .bar-row{margin:6px 0;font-size:14px;grid-template-columns:minmax(0,150px) minmax(0,1fr) 36px}
.page-info .gap-example-sum{display:flex;align-items:center;gap:10px;margin-top:8px;font-weight:700;font-size:14px}

/* credits: quiet panels, license texts as fine print (their size and color come from .fine-print), links kept findable */
.page-info .credit .band{padding:10px 18px}
.page-info .credit-body{padding:14px 20px 16px}
.page-info .credit-body>*+*{margin-top:10px}
.page-info .credit-main{padding-bottom:12px;border-bottom:var(--bw-thin) solid var(--quiet-rule)}
.page-info .credit-parts{display:grid;gap:12px}
.page-info .credit-parts .label{margin-bottom:2px}
.page-info .credit-links{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13.5px}
.page-info .credit-links a{font-weight:700;text-decoration-color:rgba(34,136,224,.35);text-decoration-thickness:1px;text-underline-offset:3px}

@media (max-width:1100px){
  .page-info .basis-row{grid-template-columns:minmax(0,200px) minmax(0,1fr);}
  .page-info .basis-tag{grid-column:2;justify-content:flex-start}
  .page-info .swap{grid-template-columns:90px minmax(0,1fr) 24px minmax(0,1fr);gap:12px}
}
@media (max-width:1100px){
  .page-info .holland-steps{grid-template-columns:repeat(3,minmax(0,1fr))}
  .page-info .holland-detail{grid-template-columns:minmax(0,1fr)}
  .page-info .clarity-scale li{grid-template-columns:110px minmax(0,1fr);gap:4px 12px}
  .page-info .clarity-scale .cl-text{grid-column:1/-1}
}
@media (max-width:860px){
  .page-info .holland-steps{grid-template-columns:minmax(0,1fr)}
  .page-info .swap{grid-template-columns:minmax(0,1fr);gap:6px}
  .page-info .swap-arrow{display:none}
  .page-info .swap-new{padding-left:12px;border-left:3px solid var(--amber)}
}
@media (max-width:1100px){
  .page-info .dim{grid-template-columns:auto minmax(0,1fr);gap:4px 12px}
  .page-info .dim-source{grid-column:2;text-align:left;font-size:14px;color:var(--muted)}
  .page-info .dim-unused{grid-template-columns:minmax(0,1fr)}
  .page-info .dim-unused .dim-source{grid-column:1;color:var(--ink)}
}
@media (max-width:720px){
  .page-info .glance-cell b{font-size:28px}
  .page-info .chapter-body h3{font-size:19px}
  .page-info .facts>div{grid-template-columns:minmax(0,1fr);gap:2px}
  .page-info .basis-row{grid-template-columns:minmax(0,1fr);gap:6px;padding:12px 16px}
  .page-info .basis-tag{grid-column:1}
  .page-info .kind{grid-template-columns:78px minmax(0,1fr);gap:12px}
  .page-info .kind-hex .hex{max-width:78px}
  .page-info .end-cta{padding:22px 20px}
  .page-info .end-cta .btn-row{width:100%}
  .page-info .study-list li{grid-template-columns:minmax(0,1fr);gap:4px}
  .page-info .src-row{padding:12px 14px;gap:12px}
  .page-info .credit-body{padding:14px 16px 16px}
  .page-info .tick-list li{font-size:15.5px}
}

/* ================================================================ PRIVACY */
.page-info .privacy-hero{align-items:center}
.page-info .promise-grid{list-style:none}
.page-info .promise{display:flex;flex-direction:column;gap:8px}
.page-info .promise-mark{position:relative;width:34px;height:34px;background:rgba(42,157,143,.14);border:1px solid rgba(42,157,143,.3);border-radius:12px}
.page-info .promise-mark::after{content:"";position:absolute;left:9px;top:3px;width:9px;height:16px;border:solid var(--on-ink);border-width:0 4px 4px 0;transform:rotate(45deg)}
.page-info .promise-title{font-size:16px;margin-top:4px}

.page-info .delete-box{border-left:3px solid var(--amber);max-width:980px}
.page-info .delete-main>.body{max-width:66ch}
.page-info .delete-summary{margin-top:16px;padding:12px 16px;background:var(--ground);border:var(--bw-thin) solid var(--line);font-weight:600;font-size:16px;line-height:1.45;border-radius:var(--r-sm)}
.page-info .delete-summary:empty{display:none}
.page-info .delete-confirm{padding:18px 20px;border:var(--bw) solid var(--line);background:var(--amber-wash);border-radius:var(--r)}
.page-info .delete-confirm:focus{outline:none}
.page-info .delete-confirm:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.page-info .delete-confirm-text{font-weight:700;font-size:19px;line-height:1.4;max-width:52ch}
.page-info .delete-done{padding:18px 20px;border:var(--bw) solid var(--line);background:var(--surface);box-shadow:inset 8px 0 0 var(--sage-deep);padding-left:28px;border-radius:var(--r)}
.page-info .delete-done:focus{outline:none}
.page-info .delete-done:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.page-info .delete-done-text{font-size:18px;font-weight:600;line-height:1.4}
.page-info .delete-done-text b{font-family:var(--heading);font-weight:700;margin-right:4px}

@media (max-width:720px){
  .page-info .delete-box{border-left-width:8px}
  .page-info .delete-confirm-text{font-size:17px}
  .page-info .promise{flex-direction:row;flex-wrap:wrap;align-items:center;column-gap:12px}
  .page-info .promise-title{margin-top:0}
  .page-info .promise .small{flex-basis:100%}
}

/* ================================================================ ZONES (Truity polish, Sep 21, 2026)
   Every top-level section of /articles/, the articles, /method/ and /privacy/ is a .zone band (05-components.css). The last band
   meets the footer directly (05-components.css does that for any page ending on a zone). */
.page-info .zone .crumb{margin-bottom:18px}
/* a picture beside text, and the dark closing band with its picture */
.page-info .ph-img{box-shadow:0 1px 2px rgba(13,20,32,.05),0 18px 40px -24px rgba(13,20,32,.35)}
.page-info .zone-ink .eyebrow,.page-info .zone-deep .eyebrow{color:var(--amber-pale)}
/* header bands on this page family wrap as a whole: the short right-hand label never splits */
.page-info .band{flex-wrap:wrap;row-gap:4px}
.page-info .band>span:last-child{white-space:nowrap}

/* a numbered section head inside a zone: no rule above (the ground marks the chapter), the title in the light display serif */
.page-info .zone .sh{border-top:0;padding-top:0;margin-bottom:30px;align-items:baseline}
.page-info .zone .sh h2{font-weight:300;font-size:clamp(30px,3.4vw,40px);letter-spacing:-.02em;line-height:1.08}
.page-info .zone .sh-num{font-size:12px;font-weight:800;letter-spacing:.08em;transform:translateY(-6px)}

/* ================================================================ PRIVACY (zones) */
.page-privacy .pv-top{padding-block:48px 72px}
.page-privacy .pv-top .review-stack{margin-bottom:28px}
/* the hero is one column since the drawn flow came out (Sep 23, 2026), so the heading and the lede share one measure
   instead of a wide title over a narrow paragraph */
.page-privacy .privacy-hero{max-width:760px}
.page-privacy .privacy-hero h1{font-size:clamp(40px,5vw,62px);line-height:1.02}
.page-privacy .privacy-hero .lede{max-width:none;text-wrap:pretty}
.page-privacy .pv-promise-row{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:center}
.page-privacy .pv-pic{max-width:440px}
.page-privacy .promise-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
.page-privacy .promise{display:grid;grid-template-columns:40px minmax(0,1fr);gap:4px 16px;align-items:start;align-content:start}
.page-privacy .promise-mark{grid-row:span 2;width:40px;height:40px;border-radius:50%;background:var(--blue-wash);border:0}
.page-privacy .promise-mark::after{left:15px;top:9px;width:9px;height:16px;border-color:var(--blue-deep);border-width:0 2.5px 2.5px 0}
.page-privacy .promise-title{margin-top:0;font-family:var(--display);font-weight:400;font-size:21px;line-height:1.2;letter-spacing:-.01em}
.page-privacy .promise .small{color:var(--muted);line-height:1.55}
.page-privacy .delete-box{border-left:1px solid var(--line);max-width:none}
.page-privacy [data-contrib]{max-width:none;background:#fff}
@media (max-width:860px){
  .page-privacy .pv-promise-row{grid-template-columns:minmax(0,1fr);gap:32px}
  .page-privacy .pv-pic{max-width:none;aspect-ratio:3 / 2!important}
}
@media (max-width:620px){
  .page-privacy .pv-top{padding-block:28px 48px}
  .page-privacy .promise{flex-direction:unset}
}

/* ================================================================ THE QUIET PAGES: a painting beside the hero (idea 12, D130)
   About, Contact, Terms, Privacy and the 404 opened on text with an empty right half. Each now sets a library painting beside its
   hero (src/site/components.mjs quietHero): the words on the left at the width they had, the painting on the right at its own
   proportions, framed like the site's other pictures (a hairline and the soft shadow). On a phone the painting follows the words.
   The 404 is not an info page, so these rules name it too. */
:is(.page-info,.page-notfound) .qh-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:center}
:is(.page-info,.page-notfound) .qh-text{min-width:0}
:is(.page-info,.page-notfound) .qh-pic{width:100%;max-width:500px;justify-self:end;border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(13,20,32,.05),0 24px 50px -30px rgba(13,20,32,.45)}
@media (max-width:860px){
  :is(.page-info,.page-notfound) .qh-grid{grid-template-columns:minmax(0,1fr);gap:32px}
  :is(.page-info,.page-notfound) .qh-pic{justify-self:start;max-width:560px}
}

/* ================================================================ ARTICLES */
/* the hero: title and lede beside a picture */
.page-articles .art-hero{padding-block:64px 72px}
.page-articles .art-hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:56px;align-items:center}
.page-articles .art-hero h1{margin-top:14px;font-size:clamp(40px,5vw,62px);line-height:1.02}
.page-articles .art-hero .lede{max-width:44ch;font-size:19px}

/* the grid of picture cards (also the related band on an article) */
.page-info .art-grid-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-bottom:14px;margin-bottom:34px;border-bottom:1px solid var(--ink)}
.page-info .art-grid-count{font-weight:700;font-size:12.5px;color:var(--muted)}
.page-info .art-grid{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 32px}
.page-info .art-grid>li{display:flex}
.page-info .art-card{display:flex;flex-direction:column;width:100%;color:var(--ink);text-decoration:none}
.page-info .art-card .ph-img{transition:transform .35s ease,box-shadow .35s ease}
.page-info .art-card:hover .ph-img{transform:translateY(-3px);box-shadow:0 1px 2px rgba(13,20,32,.05),0 24px 44px -22px rgba(13,20,32,.42)}
.page-info .art-card-kicker{margin-top:18px;font-weight:800;font-size:10px;line-height:1.4;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-deep)}
.page-info .art-card-title{margin-top:8px;font-family:var(--display);font-weight:400;font-size:24px;line-height:1.14;letter-spacing:-.015em}
.page-info .art-card:hover .art-card-title{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:rgba(34,136,224,.45)}
.page-info .art-card-text{margin-top:10px;font-size:15px;line-height:1.55;color:var(--muted)}
.page-info .art-card-more{margin-top:auto;padding-top:16px;font-size:13.5px}
.page-info .art-related .zone-head{margin-bottom:36px}
.page-info .art-related .art-card-title{font-size:22px}

/* the closing band on the deep blue: a kicker, a heading, a line, the button, and a picture */
.page-info .art-band{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:56px;align-items:center}
.page-info .art-band-title{margin-top:12px;font-weight:300;font-size:clamp(30px,3.6vw,44px);line-height:1.08;letter-spacing:-.02em;max-width:18ch}
.page-info .art-band-title .accent-amber{color:var(--amber-pale)}
.page-info .art-band-line{margin-top:14px;max-width:52ch;font-size:16.5px;line-height:1.55}
.page-info .art-band-pic{max-width:460px;justify-self:end;width:100%}

/* an article: the warm top band with its picture, then the reading band */
.page-article .art-top{padding-block:48px 64px}
.page-article .art-top-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:56px;align-items:center}
.page-article .article-head{margin:0;padding:0;border:0}
.page-article .article-eyebrow{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.page-article .article-title{margin-top:14px;font-size:clamp(38px,4.6vw,58px);line-height:1.03;max-width:18ch}
.page-article .standfirst{margin-top:18px;max-width:52ch;font-family:var(--display);font-weight:300;font-size:clamp(18px,1.6vw,21px);line-height:1.5;color:var(--muted)}
.page-article .art-read{padding-block:64px 80px}
.page-info .article-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:72px;align-items:start}
.page-info .article-body{max-width:700px}
.page-info .article-part+.article-part{margin-top:44px}
.page-info .part-title{display:flex;align-items:baseline;gap:14px;font-size:clamp(23px,2.2vw,29px);line-height:1.12}
.page-info .part-num{flex:none;font-family:var(--body);font-weight:800;font-size:12px;letter-spacing:.08em;color:var(--blue-deep);transform:translateY(-3px)}
.page-info .article-p{margin-top:16px;font-family:var(--display);font-size:19.5px;line-height:1.7;font-weight:400;max-width:64ch;color:#1d2433}
/* an article's sources: a quiet panel after the piece (supporting), still open and listed in the article's contents */
.page-info .article-sources{padding:16px 22px 18px}
.page-info .article-src-list{list-style:none;margin-top:12px}
.page-info .article-src-list li{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:var(--bw-thin) dashed var(--rule-soft);font-weight:600;font-size:15px;line-height:1.35}
.page-info .article-src-list li:last-child{border-bottom:0}
.page-info .article-src-list .src-num{flex:none;width:26px;height:26px;font-size:12px}
.page-info .article-src-list a{text-decoration-color:rgba(34,136,224,.35);text-decoration-thickness:1px;text-underline-offset:4px}
/* the side: contents and a small ask, sticky under the bar */
.page-info .article-side{position:sticky;top:calc(var(--header-h) + 24px);display:grid;gap:22px}
.page-info .side-toc .band{padding:14px 18px 8px}
.page-info .side-toc ol{padding:4px 18px 10px}
.page-info .side-toc a{font-size:14px;font-weight:600}
.page-info .side-toc .toc-n{width:22px;height:22px;border-radius:7px;font-size:11.5px;box-shadow:none}
.page-info .side-cta{background:var(--blue-wash);border-color:transparent}
.page-info .side-cta .label{padding-bottom:0;border:0;font-weight:800;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-deep)}
.page-info .side-cta-text{margin:10px 0 18px;font-family:var(--display);font-size:20px;font-weight:400;line-height:1.25;letter-spacing:-.01em}

@media (max-width:1100px){
  .page-info .article-layout{grid-template-columns:minmax(0,1fr) 260px;gap:44px}
  .page-info .art-grid{gap:40px 24px}
}
@media (max-width:960px){
  .page-info .art-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .page-articles .art-hero-grid,.page-article .art-top-grid,.page-info .art-band{grid-template-columns:minmax(0,1fr);gap:32px}
  .page-info .art-band-pic{justify-self:start;max-width:520px}
  .page-info .article-layout{grid-template-columns:minmax(0,1fr);gap:40px}
  .page-info .article-side{display:none}
  .page-info .article-body{max-width:none}
}
@media (max-width:620px){
  .page-info .art-grid{grid-template-columns:minmax(0,1fr);gap:40px}
  .page-articles .art-hero{padding-block:40px 48px}
  .page-article .art-top{padding-block:32px 44px}
  .page-article .art-read{padding-block:44px 56px}
  .page-info .article-p{font-size:18px;line-height:1.66}
  .page-info .article-part+.article-part{margin-top:34px}
  .page-info .art-card-title{font-size:22px}
}



/* ===== 60-insights.css ===== */
/* ==========================================================================
   60-insights.css · owner: client track (insights)
   /insights/ (src/pages/insights.mjs, body class page-insights), insight cards anywhere app/insights-view.js draws them (.ins-card,
   used on /results/ and /results/pillars/ too) and the sharing part of /privacy/ (.ins-privacy). The one-time sharing notice (.ins-notice)
   went with D131 (Sep 26, 2026): agreeing to the Terms while taking an assessment replaced it (22-agree.css).
   Bold flat design (docs/SITE_KIT.md): white boxes, 3px ink borders, hard ink shadows, no gradients.
   ========================================================================== */

.page-insights .ins-top{max-width:860px}
.page-insights .ins-top .lede{max-width:62ch}
.page-insights .ins-honesty{font-size:var(--fs-small);font-weight:500;max-width:70ch;padding-left:12px;border-left:var(--bw) solid var(--cobalt)}
.page-insights .ins-sections{display:grid;gap:44px;margin-top:48px}
.ins-h2{font-size:clamp(22px,3vw,32px);line-height:1.1;margin-bottom:16px}
.ins-h3{font-size:16px;margin:18px 0 6px}

.ins-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:22px}
.ins-card{display:flex;flex-direction:column;gap:8px}
.ins-card .ins-tag{align-self:flex-start;font-size:12px;font-weight:700;letter-spacing:.01em;padding:3px 8px;border:var(--bw-thin) solid var(--line);background:var(--ground);border-radius:var(--r-sm)}
.ins-card.ins-src-pooled .ins-tag{background:var(--cobalt);color:var(--on-ink)}
.ins-card.ins-src-own .ins-tag{background:var(--amber)}
.ins-card .ins-title{font-size:19px;line-height:1.2}
.ins-card .ins-body{line-height:1.5}
.ins-card .ins-note{font-size:var(--fs-small);opacity:.8;margin-top:auto;padding-top:8px;border-top:var(--bw-thin) dashed var(--rule-soft)}
.ins-card .ins-line{font-weight:500;line-height:1.45}
.ins-card .ins-foot,.ins-block-note{font-size:var(--fs-fine);color:var(--muted);margin-top:auto;padding-top:6px}
.ins-block-note{margin-top:12px}
.ins-chart{margin:4px 0 2px}
.ins-chart .chart+.chart{margin-top:10px}

/* How to read the charts: one note for the page (D43) */
.page-insights .ins-reading{max-width:860px;background:var(--surface)}
.page-insights .ins-reading-title{font-size:16px;margin-bottom:8px}
.page-insights .ins-reading-list{padding-left:20px;display:grid;gap:4px;font-size:var(--fs-small)}

/* Charts (app/charts.js): flat fills, ink strokes, no gradients */
.chart{margin:0}
.chart-svg{display:block;width:100%;height:auto;overflow:visible;font-family:var(--body)}
.chart-label{font-size:16px;font-weight:700;fill:var(--ink)}
.chart-value{font-size:17px;font-weight:700;fill:var(--ink)}
.chart-axis{font-size:15px;font-weight:500;fill:var(--muted)}
.chart-n{font-weight:500;fill:var(--muted)}
.chart-track{fill:var(--ground);stroke:var(--ink);stroke-width:2}
.chart-bar{stroke:var(--ink);stroke-width:2}
.tone-cobalt{fill:var(--cobalt)}
.tone-sage{fill:var(--sage)}
.tone-amber{fill:var(--amber)}
.tone-ink{fill:var(--ink)}
.tone-pale{fill:var(--cobalt-pale)}
.chart-range{fill:var(--cobalt-pale);stroke:var(--cobalt);stroke-width:2}
.chart-dot{fill:var(--cobalt);stroke:var(--ink);stroke-width:2.5}
.chart-whisker{fill:none;stroke:var(--ink);stroke-width:2}
.chart-tick{stroke:var(--ink);stroke-width:1.5;stroke-dasharray:3 2}
.chart-axisline{stroke:var(--ink);stroke-width:3}
.chart-multiples{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.ins-choice{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:6px 0}
.ins-chip{font-weight:700;padding:4px 10px;border:var(--bw-thin) solid var(--line);background:var(--amber-wash);border-radius:var(--r-sm)}
.ins-chip-old{background:var(--ground);color:var(--muted)}
.ins-chip-arrow{font-weight:700;font-size:18px}

.ins-empty,.ins-loading{padding:16px 18px;border:var(--bw-thin) dashed var(--rule-soft);font-weight:500;max-width:70ch}

.ins-privacy{max-width:860px}
.ins-privacy .ins-list{padding-left:20px;display:grid;gap:4px}
.ins-privacy .ins-status{margin-top:18px;font-weight:700}
.ins-privacy code{font-size:14px;word-break:break-all}
.ins-privacy .ins-result:empty{display:none}
.ins-privacy .ins-result{margin-top:12px;font-weight:500}

@media (max-width:600px){
  .page-insights .ins-sections{gap:32px;margin-top:32px}
  .ins-grid{grid-template-columns:1fr;gap:16px}
}


/* ===== 61-compare.css ===== */
/* ==========================================================================
   61-compare.css · owner: compare-view track
   /compare/ (src/pages/compare.mjs, body class page-compare), drawn by app/compare-view.js.
   Editorial (D88, docs/mockups/site/): white paper, hairline edges, blue for the reader's group and grey for the one it is set
   against, amber only where something is worth attention. No gradients.
   ========================================================================== */

.page-compare .cmp-top{max-width:860px}
.page-compare .cmp-top .lede{max-width:62ch}
.page-compare .cmp-honesty{font-size:var(--fs-small);font-weight:500;max-width:70ch;padding-left:12px;border-left:var(--bw) solid var(--cobalt)}
.page-compare .cmp-empty{padding:16px 18px;border:var(--bw-thin) dashed var(--rule-soft);font-weight:500;max-width:70ch}

.page-compare .cmp-pickers{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px 18px;padding:18px}
.page-compare .cmp-pick{display:flex;flex-direction:column;gap:6px;flex:1 1 220px;min-width:0}
.page-compare .cmp-pick-l{font-weight:700;font-size:13px;letter-spacing:.01em}
.page-compare .cmp-pick-a .cmp-pick-l{color:var(--cobalt)}
.page-compare .cmp-pick-b .cmp-pick-l{color:var(--amber-text)}
.page-compare .cmp-pick select{font:inherit;font-weight:600;padding:10px 12px;border:var(--bw) solid var(--line);background:var(--surface);color:var(--ink);width:100%}
.page-compare .cmp-pick-a select{box-shadow:var(--sh-xs)}
.page-compare .cmp-pick-b select{box-shadow:var(--sh-xs)}
.page-compare .cmp-swap,.page-compare .cmp-own{flex:0 0 auto}
.page-compare .cmp-own-none{flex:1 1 100%;font-size:var(--fs-small);margin:0}

.page-compare .cmp-legend{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;font-weight:700}
.page-compare .cmp-key::before{content:"";display:inline-block;width:18px;height:14px;margin-right:8px;vertical-align:-2px;border:var(--bw-thin) solid var(--line)}
.page-compare .cmp-key-a::before{background:var(--cobalt)}
.page-compare .cmp-key-b::before{background:var(--amber)}
.page-compare .cmp-key small,.page-compare .cmp-ns{font-size:12px;font-weight:500;opacity:.75}
.page-compare .cmp-key-range{font-size:12px;font-weight:500;opacity:.75}
.page-compare .cmp-biggest{margin-top:14px;font-size:17px}
.page-compare .cmp-overlap{margin-top:6px;font-size:var(--fs-small);opacity:.8}

.page-compare .cmp-rows{list-style:none;padding:0;margin:20px 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:18px}
.page-compare .cmp-row{padding:14px 16px 10px;display:flex;flex-direction:column;gap:8px;min-width:0}
.page-compare .cmp-row.cmp-clear{box-shadow:var(--sh-btn)}
.page-compare .cmp-row.cmp-missing{opacity:.7}
.page-compare .cmp-row-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.page-compare .cmp-label{font-size:17px;line-height:1.2;margin:0}
.page-compare .cmp-gap{font-size:12px;font-weight:700;letter-spacing:.01em;padding:3px 8px;border:var(--bw-thin) solid var(--line);background:var(--ground);border-radius:var(--r-sm)}
.page-compare .cmp-clear .cmp-gap{background:var(--ink);color:var(--ground)}
.page-compare .cmp-ns{margin:0}

.page-compare .cmp-svg{display:block;width:100%;height:auto}
.page-compare .cmp-track{fill:var(--ground-deep)}
.page-compare .cmp-a{fill:var(--cobalt)}
.page-compare .cmp-b{fill:var(--amber)}
.page-compare .cmp-whisk{stroke:var(--ink);stroke-width:2;vector-effect:non-scaling-stroke}
.page-compare .cmp-whisk-halo{stroke:var(--ground);stroke-width:5;vector-effect:non-scaling-stroke}
.page-compare .cmp-val{font-size:13px;font-weight:700;fill:var(--ink)}
.page-compare .cmp-tick{stroke:var(--ink);stroke-width:1;vector-effect:non-scaling-stroke}
.page-compare .cmp-axis-t{font-size:10px;fill:var(--ink);opacity:.75}
.page-compare .cmp-none{fill:var(--ground-deep);stroke:var(--rule-soft);stroke-dasharray:4 3;vector-effect:non-scaling-stroke}
.page-compare .cmp-none-t{font-size:11px;font-weight:700;fill:var(--muted)}

@media (max-width:600px){
  .page-compare .cmp-rows{grid-template-columns:1fr}
  .page-compare .cmp-pickers{padding:14px}
}


/* ===== 62-mismatches.css ===== */
/* ==========================================================================
   62-mismatches.css - owner: mismatch-ui track
   /results/mismatches/ (src/pages/mismatches.mjs, body class page-mismatches) and mismatch cards anywhere app/mismatch-view.js draws them
   (.mm-*). Bold flat design (docs/SITE_KIT.md): white boxes, 3px ink borders, hard ink shadows, flat color, no gradients.
   ========================================================================== */

.page-mismatches .mm-top{max-width:860px}
.page-mismatches .mm-top .lede{max-width:62ch}
.page-mismatches .mm-mount{margin-top:36px}

.mm-root{display:grid;gap:26px}
.mm-empty,.mm-note,.mm-sample{padding:14px 16px;border:var(--bw-thin) dashed var(--rule-soft);font-weight:500;max-width:70ch}
.mm-sample{border-color:var(--ink);background:var(--amber-wash);font-weight:700;margin-bottom:18px}

.mm-strong{background:var(--ink)}
.mm-moderate{background:var(--amber)}
.mm-mild{background:var(--sage-pale)}

/* summary counts */
.mm-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.mm-count{background:var(--surface);border:var(--bw) solid var(--line);padding:12px 14px;display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center;border-radius:var(--r)}
.mm-count-n{font:800 34px/1 var(--heading);grid-row:span 2;font-variant-numeric:tabular-nums}
.mm-count-l{font-weight:700;letter-spacing:.01em;font-size:13px}
.mm-count small{grid-column:1/-1;color:var(--muted);font-size:13px;margin-top:6px}
.mm-count-bar{height:10px;border:var(--bw-thin) solid var(--line);background:var(--ground);position:relative;display:block}
.mm-count-bar i{position:absolute;inset:0 auto 0 0}

.mm-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:26px;align-items:start}
.mm-list{display:grid;gap:22px}
.mm-aside{display:grid;gap:22px}

/* one flag */
.mm-card{padding:0!important;display:block}
.mm-head{display:grid;grid-template-columns:1fr 220px;gap:16px;padding:16px;border-bottom:var(--bw) solid var(--line)}
.mm-area{margin-bottom:8px}
.mm-title{font-size:var(--fs-h3);line-height:1.15;margin-top:8px}
.mm-tier{font-size:13px;color:var(--muted);margin-top:6px}
.mm-band{display:inline-block;font-weight:700;font-size:12px;line-height:1;padding:5px 8px;border:var(--bw-thin) solid var(--line);letter-spacing:.01em}
.mm-band.mm-strong{color:var(--on-ink)}
.mm-h4{font-family:var(--heading);font-weight:700;font-size:13px;margin-bottom:8px}

.mm-meter{position:relative;height:22px;border:var(--bw) solid var(--line);background:var(--ground);margin-top:8px}
.mm-meter.mm-sm{height:16px}
.mm-meter.mm-xs{height:12px;border-width:var(--bw-thin);margin-top:4px}
.mm-fill{position:absolute;inset:0 auto 0 0}
.mm-range{position:absolute;top:0;bottom:0;opacity:.6;box-shadow:inset 0 0 0 var(--bw) var(--ref-deep)}
.mm-tick{position:absolute;top:-1px;bottom:-1px;width:var(--bw);background:var(--ref-deep);opacity:.9}
.mm-num{position:absolute;right:6px;top:50%;transform:translateY(-50%);font:400 13px/1 var(--display);background:var(--surface);padding:1px 3px}

.mm-conf{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:13px}
.mm-conf-l{color:var(--muted)}
.mm-segs{display:flex;gap:3px}
.mm-segs span{width:18px;height:10px;border:var(--bw-thin) solid var(--line);background:var(--surface)}
.mm-segs .on{background:var(--ink)}

.mm-loop{padding:14px 28px 14px 16px;border-bottom:var(--bw) solid var(--line);background:var(--ground)}
.mm-steps{list-style:none;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:22px}
.mm-steps li{position:relative;border:var(--bw-thin) solid var(--line);background:var(--surface);padding:8px;font-weight:700;font-size:13px;line-height:1.25}
.mm-steps li:after{content:"\2192";position:absolute;right:-18px;top:50%;transform:translateY(-50%);font:400 15px/1 var(--display)}
.mm-steps li:last-child:after{content:"\21BA";right:-16px}

.mm-evidence{padding:14px 16px;border-bottom:var(--bw) solid var(--line)}
.mm-blind .mm-evidence{padding:8px 0 12px;border-bottom:0}
.mm-pair{display:grid;gap:4px;padding:6px 0}
.mm-pair+.mm-pair{border-top:var(--bw-thin) dashed var(--rule-soft)}
.mm-ev{display:grid;grid-template-columns:150px 1fr 44px;gap:10px;align-items:center;font-size:13px;font-weight:700}
.mm-ev b{text-align:right}
.mm-track{height:14px;border:var(--bw-thin) solid var(--line);background:var(--ground);position:relative;display:block}
.mm-track i{position:absolute;inset:0 auto 0 0}
.mm-ev-a{background:var(--cobalt)}
.mm-ev-b{background:var(--amber)}

.mm-opts{padding:14px 16px;border-bottom:var(--bw) solid var(--line)}
.mm-chips{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.mm-chip{border:var(--bw-thin) solid var(--line);background:var(--surface);padding:7px 10px;font-weight:700;font-size:13px;border-radius:var(--r-sm)}
.mm-chip.rec{background:var(--cobalt-pale);box-shadow:var(--sh-xs)}
.mm-rec{display:inline-block;background:var(--cobalt);color:var(--on-ink);font-size:11px;letter-spacing:.01em;padding:2px 5px;margin-right:6px}

.mm-agree{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 16px}
.mm-agree-btn{border:var(--bw-thin) solid var(--line);background:var(--surface);color:var(--ink);font:700 13px/1 var(--body);padding:8px 12px;cursor:pointer;border-radius:var(--r-sm)}
.mm-agree-btn[aria-pressed="true"]{background:var(--cobalt);color:var(--on-ink)}
.mm-agree-btn:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
.mm-agree-saved{font-size:13px;color:var(--muted)}

.mm-more>summary{list-style:none;cursor:pointer;display:inline-block}
.mm-more>summary::-webkit-details-marker{display:none}
.mm-more[open]>summary{margin-bottom:18px}

/* side cards */
.mm-side{padding:18px}
.mm-side-h{font-size:18px;margin-bottom:6px}
.mm-side-t{font-weight:700;margin-bottom:8px}
.mm-minis{list-style:none;padding:0;margin-top:12px}
.mm-mini{padding:8px 0;border-top:var(--bw-thin) solid var(--line);font-weight:700;font-size:13px}
.mm-deltas{list-style:none;padding:0}
.mm-d{display:grid;grid-template-columns:1fr auto;gap:10px;padding:8px 0;border-top:var(--bw-thin) solid var(--line);font-size:13px;font-weight:700}
.mm-d-k{color:var(--muted)}
.mm-d-up .mm-d-k b,.mm-d-new .mm-d-k b{color:var(--ink)}
.mm-d-down .mm-d-k b,.mm-d-gone .mm-d-k b{color:var(--sage-deep)}

/* safety only */
.mm-safety{max-width:640px}
.mm-safety-h{font-size:var(--fs-h2);margin-bottom:10px}
.mm-safety-lines{list-style:none;padding:0;margin:14px 0 18px;display:grid;gap:8px;font-weight:700}
.mm-safety-lines a{font-size:20px}

@media (max-width:1000px){
  .mm-layout{grid-template-columns:1fr}
}
@media (max-width:640px){
  .mm-summary{grid-template-columns:1fr}
  .mm-head{grid-template-columns:1fr}
  .mm-steps{grid-auto-flow:row;grid-auto-columns:auto;gap:22px}
  .mm-steps li:after{content:"\2193";right:auto;left:50%;top:auto;bottom:-20px;transform:translateX(-50%)}
  .mm-ev{grid-template-columns:1fr 44px}
  .mm-ev .mm-track{grid-column:1/-1;grid-row:2}
}


/* ===== 63-focus.css ===== */
/* Focus mode while answering an assessment (D44). Owner: focus-mode track. app/focus-mode.js sets body.is-focus on the set, sort and
   check-in screens; body.is-focus-review brings the review tools back in review mode.
   Editorial (D88, Sep 22, 2026): this partial was the last one still built on the bold-vector contract — 3px ink borders, square
   corners, Archivo Black. It now uses the same vocabulary as the rest of the site: hairlines, rounded corners, the serif for a
   display line, Figtree for every control, blue for the action. Nothing about the behaviour changed. */
.is-focus .site-header,.is-focus .site-footer,.is-focus .skip-link,.is-focus .as-crumb,.is-focus .as-steps,.is-focus .as-side{display:none!important}
.is-focus:not(.is-focus-review) .review-banner,.is-focus:not(.is-focus-review) .review-cmt,.is-focus:not(.is-focus-review) .review-mark{display:none!important}
.is-focus .as-layout{display:block;max-width:760px;margin-inline:auto}

.fm-bar{position:sticky;top:0;z-index:70;background:var(--surface);border-bottom:var(--bw) solid var(--line);box-shadow:var(--sh-xs)}
.fm-bar-in{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;max-width:1120px;margin-inline:auto;padding:8px 16px}
.fm-bar-label{margin:0;font:700 14px/1.3 var(--body)}
.fm-bar-name{font-family:var(--display);font-weight:400;letter-spacing:-.01em}
.fm-saved{font-weight:500;color:var(--sage-text)}
.fm-saved::before{content:"\2713\00a0"}
.fm-keys{margin:0;font:500 13px/1.3 var(--body);color:var(--muted)}
.fm-bar-acts{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto}
.fm-btn{font:700 14px/1 var(--body);padding:9px 14px;min-height:40px;background:var(--surface);color:var(--ink);
  border:var(--bw) solid var(--line);border-radius:var(--r-btn);cursor:pointer}
.fm-btn:hover{border-color:var(--grey);background:var(--surface-dim)}
.fm-btn:focus-visible{outline:2px solid var(--blue-mark);outline-offset:3px}
.fm-btn.fm-review-toggle[aria-pressed="true"]{background:#e0287c;border-color:#e0287c;color:var(--on-ink)} /* review-mode pink; the token lives in 99-review.css, which is not on the live site */
.fm-btn-exit{background:var(--cobalt);border-color:var(--cobalt);color:var(--on-ink)}
.fm-btn-exit:hover{background:var(--blue-ink);border-color:var(--blue-ink);color:var(--on-ink)}
.fm-enter{position:fixed;right:16px;bottom:16px;z-index:65;box-shadow:var(--sh-btn)}

.fm-break{max-width:760px;margin:16px auto 0;padding-inline:16px}
.fm-break-in{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:16px 18px;background:var(--surface);
  border:var(--bw) solid var(--line);border-left:3px solid var(--sage);border-radius:var(--r);box-shadow:var(--sh-xs)}
.fm-break-in p{margin:0;flex:1 1 18em}

.fm-start{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:16px;background:rgba(13,20,32,.5);overflow:auto}
.fm-start-card{width:100%;max-width:520px;padding:28px 30px;background:var(--surface);border:var(--bw) solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--sh-lift)}
.fm-start-title{margin:0 0 12px;font-family:var(--display);font-weight:300;font-size:clamp(24px,5vw,32px);line-height:1.1;letter-spacing:-.02em}
.fm-start-title:focus{outline:none}
.fm-start-list{margin:0 0 20px;padding:0;list-style:none}
.fm-start-list li{position:relative;margin:10px 0;padding-left:24px;line-height:1.45}
.fm-start-list li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;background:var(--blue-mark);border-radius:50%}

@media (max-width:600px){
  .fm-bar-in{padding:6px 12px;gap:6px 10px}
  .fm-keys{display:none}
  .fm-bar-acts{margin-left:0;width:100%}
  .fm-btn{flex:1 1 auto;padding:8px 10px;font-size:13px}
  .fm-start-card{padding:20px}
}
@media (hover:none){.fm-keys{display:none}}


/* ===== 64-science.css ===== */
/* ==========================================================================
   64-science.css · owner: Library and content director (Truity polish, Sep 21, 2026)
   Page: /method/, "How our tests work" (src/pages/info.mjs, body class "page-info page-science").
   Each chapter sits on its own zone (05-components.css .zone): the hero with the science illustration and the four figures on blue,
   then a sticky "On this page" bar across the page, then the model, scoring, reliability, the sample, the board (review only), the
   questions, the limits, the folded method notes, and the sources and credits, alternating grounds. The blocks the page kept from
   before (question cards, the letter table, clarity, the hexagon pairs, sources, credits) keep their 60-info.css rules; this file lays
   them out. Editorial: white plates and hairlines, no glass. Scoped under .page-science.
   ========================================================================== */

.page-science{--sci-blue:var(--cobalt);--sci-teal:var(--teal);--sci-violet:var(--violet);--sci-amber:var(--amber)}
.page-science .sci-nocase{text-transform:none}
.page-science .tone-cobalt{--tone:var(--blue-mark)}
.page-science .tone-sage{--tone:var(--teal)}
.page-science .tone-violet{--tone:var(--violet)}
.page-science .tone-amber{--tone:var(--amber-mark)}

/* ---------------------------------------------------------------- hero: the title beside the illustration, then four figures */
.page-science .sci-top{padding-block:60px 64px}
.page-science .sci-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:56px;align-items:center}
.page-science .sci-intro{max-width:620px}
.page-science .sci-intro h1{margin-top:14px;font-size:clamp(40px,5.2vw,64px);line-height:1.02;letter-spacing:-.025em}
.page-science .sci-lede{margin-top:18px;max-width:46ch;font-size:19px;line-height:1.55;text-wrap:pretty}
.page-science .sci-stats{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin-top:52px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.page-science .sci-stat{padding:22px 24px 22px;background:#fff}
.page-science .sci-stat-top{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;margin-bottom:8px}
.page-science .sci-stat-n{font-family:var(--display);font-weight:300;font-size:42px;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink)}
.page-science .sci-stat-unit{font-weight:800;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-deep)}
.page-science .sci-stat-title{font-weight:700;font-size:14px;line-height:1.35;margin-bottom:4px}
.page-science .sci-stat-body{font-size:13px;line-height:1.5;color:var(--muted)}

.page-science .sci-hero-cta{margin-top:28px}
.page-science .sci-hero-cta .btn-ghost{padding-inline:8px}

/* ---------------------------------------------------------------- the band that asks for a test, after the limits */
.page-science .sci-band-zone{padding-block:68px}
.page-science .sci-band{display:grid;grid-template-columns:minmax(0,1.2fr) auto;gap:28px 56px;align-items:center}
.page-science .sci-band-title{margin-top:12px;font-weight:300;font-size:clamp(30px,3.6vw,44px);line-height:1.08;letter-spacing:-.02em;max-width:20ch}
.page-science .sci-band-line{margin-top:14px;max-width:60ch;font-size:16.5px;line-height:1.55}
.page-science .sci-band-cta .btn-row{flex-direction:column;align-items:stretch;gap:12px}

/* ---------------------------------------------------------------- the "On this page" bar: sticks under the site's bar
   Its height joins the site's bar in where a jump lands (--stuck-h in html's scroll-padding-top, 00-base.css), so a chapter or a
   source it links to lands 16px under both. app/toc-follow.js measures the row; these are its heights before the script runs
   (the row's min-height and its hairline). Until Sep 27, 2026 each chapter added the bars itself (76px over --header-h) on top of
   the page's fixed 96px, and a jump landed about 120px under the row. */
html:has(.page-science .sci-rail){--stuck-h:53px}
.page-science .sci-flow{position:relative}
.page-science .sci-rail{position:sticky;top:var(--header-h);z-index:30}
.page-science .sci-rail-box{border:0;border-radius:0;border-bottom:1px solid var(--line);background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%)}
.page-science .sci-rail-in{display:flex;align-items:center;gap:14px;min-height:52px}
.page-science .sci-rail-title{flex:none;font-weight:800;font-size:10px;line-height:1;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.page-science .sci-rail-list{list-style:none;display:flex;gap:2px;min-width:0;overflow-x:auto;scrollbar-width:none;padding-block:8px}
.page-science .sci-rail-list::-webkit-scrollbar{display:none}
.page-science .sci-rail-list li{flex:none}
.page-science .sci-rail-list a{display:block;padding:7px 9px;border-radius:999px;font-weight:600;font-size:13px;line-height:1.2;color:var(--muted);text-decoration:none;white-space:nowrap;
  transition:background-color .2s ease,color .2s ease}
.page-science .sci-rail-list a:hover{color:var(--ink);background:var(--ground-deep)}
.page-science .sci-rail-list a.is-amber{color:var(--amber-text)}
.page-science .sci-rail-list a.is-small{font-size:12px;color:var(--faint)}
.page-science .sci-rail-list li:has(>a.is-first-small){margin-left:8px;padding-left:10px;border-left:1px solid var(--line)}
.page-science .sci-rail-list a.is-here{background:var(--blue-wash);color:var(--blue-ink);font-weight:700}
.page-science .sci-rail-list a.is-amber.is-here{background:var(--amber-wash);color:var(--amber-text)}
.page-science .sci-rail .follow-track{height:2px;background:transparent}
.page-science .sci-rail .follow-line{height:2px;border-radius:0;background:var(--blue-mark)}

/* ---------------------------------------------------------------- chapters */
.page-science .sci-z{padding-block:72px}
.page-science .sci-sec{min-width:0}
.page-science .sci-sec-head{margin-bottom:32px}
.page-science .sci-sec-head.has-lead{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:18px 56px;align-items:start}
.page-science .sci-h2{font-family:var(--display);font-weight:300;font-size:clamp(30px,3.4vw,42px);line-height:1.06;letter-spacing:-.02em}
.page-science .sci-h3{margin:0 0 14px;font-family:var(--display);font-weight:400;font-size:25px;line-height:1.15;letter-spacing:-.015em}
.page-science .sci-h4{font-family:var(--heading);font-weight:700;font-size:16px;line-height:1.3;letter-spacing:0}
.page-science .sci-read{max-width:62ch;font-family:var(--display);font-size:18px;line-height:1.62;color:#1d2433}
.page-science .sci-sec-head .sci-read{padding-top:6px}
.page-science .sci-read-2{margin-top:14px;font-size:16.5px;color:var(--muted)}
.page-science .sci-sub{margin-top:44px}
.page-science .sci-sub>.body{max-width:68ch}
.page-science .sci-sub>.body+.body{margin-top:12px}
.page-science .sci-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 32px;margin-top:22px;align-items:start}
.page-science .sci-pair .prose-block .body{font-size:16px}
.page-science .sci-pair h4+.body{margin-top:8px}
/* a chapter with a picture beside it: the steps on the left and a photo on the right, or the questions with a photo on the left */
.page-science .sci-with-pic{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:40px;align-items:start}
.page-science .sci-with-pic.is-left{grid-template-columns:minmax(0,1fr) minmax(0,1.55fr)}
.page-science .sci-with-pic.is-left>.sci-side-pic{grid-column:1;grid-row:1}
.page-science .sci-side-pic{position:sticky;top:calc(var(--header-h) + 76px)}

/* ---------------------------------------------------------------- the model: five scale cards, then the test cards */
.page-science .sci-scales{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.page-science .sci-scales>li{display:flex}
.page-science .sci-scale{display:flex;flex-direction:column;width:100%;padding:18px 18px 16px;border-radius:var(--r-sm);background:#fff;border:1px solid var(--line);color:var(--ink);text-decoration:none;
  transition:border-color .2s ease}
.page-science .sci-scale:hover{border-color:var(--blue-mark);color:var(--ink)}
.page-science .sci-scale-poles{display:flex;justify-content:space-between;gap:10px;font-weight:700;font-size:12.5px;line-height:1.3;margin-bottom:10px;color:var(--faint)}
.page-science .sci-scale-poles .is-a{color:var(--ink)}
.page-science .sci-scale-poles>span:last-child{text-align:right}
.page-science .sci-scale-bar{display:block;height:4px;border-radius:2px;background:linear-gradient(90deg,var(--tone),var(--ground-deep))}
.page-science .sci-scale-line{display:block;margin-top:12px;font-size:13px;line-height:1.5;color:var(--muted)}
.page-science .sci-qcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-top:12px}
.page-science .sci-qcards .chapter-card{overflow:hidden;border-radius:var(--r-sm);background:var(--surface-dim);border:1px solid transparent;box-shadow:none}
.page-science .sci-qcards .band{padding:18px 20px 0;color:var(--blue-deep);font-size:10px;letter-spacing:.14em}
.page-science .sci-qcards .band>span:last-child{color:var(--faint)}
.page-science .sci-qcards .chapter-body{padding:10px 20px 18px;gap:8px}
.page-science .sci-card-title{font-family:var(--display);font-weight:400;font-size:21px;line-height:1.14;letter-spacing:-.01em}
.page-science .sci-qcards .chapter-body .small{font-size:13.5px;line-height:1.5;color:var(--muted)}
.page-science .sci-qcards .facts{margin-top:auto;padding-top:4px}
.page-science .sci-qcards .facts>div{display:block;padding:9px 0 0;margin-top:9px;border-top:1px solid var(--line)}
.page-science .sci-qcards .facts dt{font-weight:800;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.page-science .sci-qcards .facts dd{margin-top:3px;font-weight:600;font-size:13.5px;line-height:1.45}
.page-science .sci-values{margin-top:28px}

/* ---------------------------------------------------------------- numbered steps (on the grey ground: white plates) */
.page-science .sci-steps{list-style:none;display:grid;gap:10px}
.page-science .sci-step{display:grid;grid-template-columns:44px minmax(0,1fr);gap:18px;padding:20px 22px;border-radius:var(--r-sm);background:#fff;border:1px solid var(--line)}
.page-science .sci-step-n{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--blue-deep);color:#fff;
  font-family:var(--display);font-weight:400;font-size:20px;line-height:1}
.page-science .sci-step-title{margin:2px 0 6px;font-family:var(--heading);font-weight:700;font-size:16px;line-height:1.35;letter-spacing:0}
.page-science .sci-step-text p{font-size:14.5px;line-height:1.6;color:var(--muted);max-width:70ch}
.page-science .sci-step-text p+p{margin-top:8px}
.page-science .sci-step-eg{color:var(--ink)!important;font-weight:600}
.page-science .sci-step-eg .tag{margin-right:4px;vertical-align:1px}
.page-science .sci-holland .sci-steps{margin-top:4px}
.page-science .sci-holland .sci-step{padding:18px 20px;background:var(--surface-dim);border-color:transparent}
.page-science .sci-holland .families-row{margin-top:22px}
.page-science .sci-four .dims{border-radius:var(--r-sm);overflow:hidden}

/* ---------------------------------------------------------------- reliability and validity: the table on a white plate */
.page-science .sci-table-plate{padding:4px 18px;border-radius:var(--r);background:#fff;border:1px solid var(--line);box-shadow:none}
.page-science .sci-table{width:100%;border-collapse:collapse;font-size:14.5px}
.page-science .sci-table .sci-group th{padding:18px 12px 8px;border-bottom:1px solid var(--line);font-weight:800;font-size:10px;line-height:1.3;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-deep)}
.page-science .sci-table tbody+tbody .sci-group th{padding-top:26px}
.page-science .sci-table th,.page-science .sci-table td{padding:12px;text-align:left;vertical-align:middle;border-bottom:1px solid var(--line)}
.page-science .sci-table thead th{padding-top:14px;padding-bottom:12px;border-bottom:1px solid var(--ink);font-weight:800;font-size:10px;line-height:1.2;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.page-science .sci-table tbody th{font-weight:600;font-size:14.5px}
.page-science .sci-table tbody tr:last-child>*{border-bottom:0}
.page-science .sci-table .num-col{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.page-science .sci-table td.is-key{color:var(--blue-deep);font-weight:700}
.page-science .sci-table .sci-ph-col{color:var(--faint)}
.page-science .sci-table thead .sci-ph-tag{margin-left:4px;vertical-align:1px;letter-spacing:.01em;text-transform:none}
.page-science .sci-foot{margin-top:16px;display:grid;gap:6px;font-size:12px;line-height:1.6;font-weight:500;color:var(--muted)}
.page-science .sci-foot a{color:var(--blue-deep);font-weight:700;text-decoration:none}
.page-science .sci-foot a:hover{text-decoration:underline}

/* ---------------------------------------------------------------- every assessment's questions and comparison group (D103) */
/* One row per assessment: name, length, where the questions were published (with the citation under the cell), what the scores are
   placed against. It reuses .sci-table's rules above for type and hairlines; these set the cells wide enough for prose and stack the
   whole table into labelled blocks on a phone, so nothing has to be scrolled sideways to be read. */
.page-science .sci-sources td,.page-science .sci-sources th{vertical-align:top}
.page-science .sci-sources tbody th{padding-right:18px}
.page-science .sci-sources tbody th a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--grey)}
.page-science .sci-sources tbody th a:hover{color:var(--blue-deep);border-bottom-color:var(--blue-deep)}
.page-science .sci-src-len{white-space:nowrap;color:var(--muted);font-variant-numeric:tabular-nums}
.page-science .sci-sources td:nth-child(3){width:34%}
.page-science .sci-sources td:nth-child(4){width:32%}
.page-science .sci-src-cite{margin-top:6px;font-size:12px;line-height:1.55;font-weight:500;color:var(--faint)}
.page-science .sci-src-cite a{color:var(--blue-deep);font-weight:700;text-decoration:none}
.page-science .sci-src-cite a:hover{text-decoration:underline}
.page-science .sci-sub .sci-h3-sm{margin-top:34px}

/* ---------------------------------------------------------------- the comparison sample: two paragraphs and its size */
.page-science .sci-sample{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:40px;align-items:center}
.page-science .sci-big{display:flex;flex-direction:column;gap:8px;padding:28px 30px;border-left:1px solid rgba(8,63,112,.2)}
.page-science .sci-big-n{font-family:var(--display);font-weight:300;font-size:clamp(46px,5.4vw,72px);line-height:1;letter-spacing:-.03em;color:var(--blue-ink);font-variant-numeric:tabular-nums}
.page-science .sci-big-unit{font-weight:800;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-deep)}
.page-science .sci-plate{margin:0;padding:20px 22px;border-radius:var(--r-sm);background:#fff;border:1px solid var(--line);box-shadow:none}
.page-science .sci-plate .example-cap{font-size:14.5px;font-weight:600}

/* ---------------------------------------------------------------- what the research supports (folded) */
.page-science .sci-tiers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:22px}
.page-science .sci-tiers .tier{border-radius:var(--r-sm)}
.page-science .sci-tiers .tick-list li{font-size:15px}
.page-science .sci-tiers .tick-list li::before{width:8px;height:8px;border-radius:50%;background:var(--blue-mark);top:.55em}
.page-science .sci-tiers .edge-sage .tick-list li::before{background:var(--teal)}
.page-science .sci-tiers .edge-amber .tick-list li::before{background:var(--amber)}
.page-science .sci-tiers .edge-ink .tick-list li::before{background:var(--ink)}
.page-science .sci-tiers .edge-ink{border-left:3px solid var(--grey)}
.page-science .basis{margin-top:16px;border-radius:var(--r-sm);overflow:hidden}
.page-science .basis-row:nth-child(even){background:var(--surface-dim)}
.page-science .sci-writeups{margin-top:18px}

/* ---------------------------------------------------------------- placeholders (review mode only, flags.homePlaceholders) */
.page-science .sci-ph-tag{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border:1px dashed var(--ink);border-radius:999px;background:#fff;
  font-family:var(--body);font-size:9.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;line-height:1.3;white-space:nowrap;color:var(--ink);vertical-align:middle}
.page-science .sci-h2 .sci-ph-tag{margin-left:12px;vertical-align:10px}
.page-science .sci-ph-block{margin-top:30px}
.page-science .sci-ph-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-bottom:12px}
.page-science .sci-ph-note{font-size:13px;font-weight:500;color:var(--muted)}
.page-science .sci-demo{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.page-science .sci-demo-card{padding:18px 20px;border-radius:var(--r-sm);background:#fff;border:1px dashed var(--ref-deep)}
.page-science .sci-demo-k{margin-bottom:12px;font-weight:800;font-size:10px;line-height:1;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.page-science .sci-demo-row{display:grid;grid-template-columns:1fr auto;gap:4px 8px;align-items:center;font-size:12.5px;color:var(--muted)}
.page-science .sci-demo-row+.sci-demo-row{margin-top:8px}
.page-science .sci-demo-row b{font-weight:600;color:var(--faint)}
.page-science .sci-demo-row i{grid-column:1/-1;height:4px;border-radius:2px;background:var(--ground-deep)}
.page-science .sci-board{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.page-science .sci-advisor{display:flex;flex-direction:column;gap:14px;align-items:flex-start;padding:22px;border-radius:var(--r-sm);background:#fff;border:1px dashed var(--ref-deep)}
.page-science .sci-advisor-photo{flex:none;display:grid;place-items:center;width:72px;height:72px;border-radius:50%;border:1px solid var(--line);
  background:repeating-linear-gradient(135deg,rgba(13,20,32,.1) 0 4px,rgba(13,20,32,.04) 4px 8px);font:500 9px ui-monospace,Menlo,monospace;color:var(--muted)}
.page-science .sci-advisor-name{display:block;margin-bottom:3px;font-weight:700;font-size:14.5px}
.page-science .sci-advisor-role{display:block;font-size:12.5px;line-height:1.5;color:var(--muted)}

/* ---------------------------------------------------------------- common questions: the accordion */
.page-science .sci-faq{display:grid;gap:0;border-top:1px solid var(--ink)}
.page-science .sci-q{border-bottom:1px solid var(--line)}
.page-science .sci-q>summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 4px;cursor:pointer;list-style:none;
  font-family:var(--display);font-weight:400;font-size:20px;line-height:1.3;color:var(--ink)}
.page-science .sci-q>summary::-webkit-details-marker{display:none}
.page-science .sci-q>summary:hover{color:var(--blue-deep)}
.page-science .sci-q>summary:focus-visible{outline-offset:2px;border-radius:6px}
.page-science .sci-q-plus{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);
  font-family:var(--body);font-size:17px;font-weight:500;line-height:1;color:var(--blue-deep);transition:transform .3s ease}
.page-science .sci-q[open] .sci-q-plus{transform:rotate(45deg)}
.page-science .sci-q-a p{margin:0;padding:0 48px 22px 4px;max-width:70ch;font-size:15.5px;line-height:1.62;color:var(--muted)}
@supports (interpolate-size:allow-keywords){
  .page-science .sci-q{interpolate-size:allow-keywords}
  .page-science .sci-q::details-content{height:0;overflow:hidden;transition:height .4s ease,content-visibility .4s allow-discrete}
  .page-science .sci-q[open]::details-content{height:auto}
}

/* ---------------------------------------------------------------- what it cannot tell you, on the warm ground */
.page-science .sci-limits{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:18px 56px;align-items:start;margin-bottom:30px}
.page-science .sci-limits-title{font-family:var(--display);font-weight:300;font-size:clamp(30px,3.4vw,42px);line-height:1.06;letter-spacing:-.02em;color:var(--ink)}
.page-science .sci-limits-text{padding-top:6px;max-width:62ch;font-family:var(--display);font-size:18px;line-height:1.62;color:#1d2433;text-wrap:pretty}
.page-science .sci-limit-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.page-science .sci-limit-grid .box{border-radius:var(--r-sm);border-color:rgba(154,91,6,.14)}
.page-science .sci-limit-grid .body{font-size:15px;line-height:1.6}
.page-science .sci-isnt{margin-top:12px;border-radius:var(--r-sm);background:#fff;border-color:rgba(154,91,6,.14);font-size:14.5px}

/* ---------------------------------------------------------------- the method notes, folded */
.page-science .sci-folds{display:grid;gap:0;border-top:1px solid var(--ink)}
.page-science .sci-more{border-bottom:1px solid rgba(13,20,32,.12)}
.page-science .sci-more>summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:24px 4px;cursor:pointer;list-style:none}
.page-science .sci-more>summary::-webkit-details-marker{display:none}
.page-science .sci-more>summary:hover .sci-more-title{color:var(--blue-deep)}
.page-science .sci-more>summary:focus-visible{outline-offset:2px;border-radius:6px}
.page-science .sci-more-title{font-family:var(--display);font-weight:300;font-size:30px;line-height:1.12;letter-spacing:-.018em}
.page-science .sci-more[open] .sci-q-plus{transform:rotate(45deg)}
.page-science .sci-more .sci-q-plus{background:#fff}
.page-science .sci-more-body{padding:0 4px 34px}
.page-science .sci-more-body>.body{max-width:68ch}
.page-science .sci-more-body>.body+.body{margin-top:12px}
.page-science .sci-more-body .body{font-size:15.5px}
.page-science .sci-more-body .sci-sub{margin-top:30px}
.page-science .sci-h3-sm{font-size:22px}
.page-science .sci-more-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:24px 40px;align-items:start}
.page-science .sci-more .box,.page-science .sci-more .chapter-card{background:#fff}
@supports (interpolate-size:allow-keywords){
  .page-science .sci-more{interpolate-size:allow-keywords}
  .page-science .sci-more::details-content{height:0;overflow:hidden;transition:height .45s ease,content-visibility .45s allow-discrete}
  .page-science .sci-more[open]::details-content{height:auto}
}

/* ---------------------------------------------------------------- sources and credits (supporting, quiet) */
.page-science .sci-z-fine{padding-block:64px 80px}
.page-science .sci-fine{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px 48px;align-items:start}
.page-science .sci-fine .sci-sec-head{margin-bottom:18px}
.page-science .sci-fine .sci-h2{font-size:26px;font-weight:400}
.page-science .sci-quiet .src-box{border-radius:var(--r-sm);overflow:hidden}
.page-science .sci-quiet .src-box+.src-box{margin-top:14px}
.page-science .sci-quiet .src-box+div{margin-top:14px}
.page-science .src-num{border-radius:50%;background:var(--blue-deep);box-shadow:none}
.page-science .sci-credits{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-items:start}
.page-science .sci-credits .credit{border-radius:var(--r-sm);overflow:hidden}
.page-science .sci-independent{margin-top:16px}
.page-science .sci-z-fine .review-stack{margin-bottom:28px}

/* ---------------------------------------------------------------- narrower screens */
@media (max-width:1100px){
  .page-science .sci-scales{grid-template-columns:repeat(3,minmax(0,1fr))}
  .page-science .sci-board{grid-template-columns:repeat(2,minmax(0,1fr))}
  .page-science .sci-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .page-science .sci-fine{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:860px){
  .page-science .sci-hero,.page-science .sci-sec-head.has-lead,.page-science .sci-limits,.page-science .sci-sample,.page-science .sci-band,
  .page-science .sci-with-pic,.page-science .sci-with-pic.is-left,.page-science .sci-more-split{grid-template-columns:minmax(0,1fr);gap:24px}
  .page-science .sci-hero{gap:32px}
  .page-science .sci-side-pic{position:relative;top:auto;max-width:420px}
  .page-science .sci-with-pic.is-left>.sci-side-pic{grid-row:auto}
  .page-science .sci-with-pic>.sci-side-pic{aspect-ratio:3 / 2!important}
  .page-science .sci-big{padding:0;border-left:0}
  .page-science .sci-limit-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:720px){
  .page-science .sci-top{padding-block:36px 44px}
  .page-science .sci-z{padding-block:52px}
  .page-science .sci-lede{font-size:17.5px}
  .page-science .sci-stats{margin-top:36px}
  .page-science .sci-stat{padding:16px 16px 15px}
  .page-science .sci-stat-n{font-size:30px}
  .page-science .sci-stat-unit{font-size:9.5px;letter-spacing:.06em}
  .page-science .sci-stat-title{font-size:13px}
  .page-science .sci-stat-body{font-size:12px}
  .page-science .sci-rail-title{display:none}
  .page-science .sci-rail-in{min-height:46px}
  html:has(.page-science .sci-rail){--stuck-h:47px}
  .page-science .sci-scales{grid-template-columns:repeat(2,minmax(0,1fr))}
  .page-science .sci-read{font-size:17px}
  .page-science .sci-step{grid-template-columns:36px minmax(0,1fr);gap:14px;padding:16px 16px}
  .page-science .sci-step-n{width:36px;height:36px;font-size:17px}
  .page-science .sci-table-plate{padding:0 6px}
  .page-science .sci-table th,.page-science .sci-table td{padding:10px 6px}
  .page-science .sci-table thead th{letter-spacing:.08em}
  /* The sources table stacks: each row becomes one block, each cell keeps its column heading above it (data-label), so a phone
     reads it top to bottom instead of scrolling a four-column table sideways. */
  .page-science .sci-sources,.page-science .sci-sources tbody,.page-science .sci-sources tr,
  .page-science .sci-sources td,.page-science .sci-sources tbody th{display:block;width:auto}
  .page-science .sci-sources thead{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .page-science .sci-sources tr{padding:18px 6px;border-bottom:1px solid var(--line)}
  .page-science .sci-sources tbody tr:last-child{border-bottom:0}
  .page-science .sci-sources td,.page-science .sci-sources tbody th{padding:0;border-bottom:0}
  .page-science .sci-sources tbody th{font-size:17px}
  .page-science .sci-sources td{margin-top:12px}
  .page-science .sci-sources td:nth-child(3),.page-science .sci-sources td:nth-child(4){width:auto}
  .page-science .sci-sources td::before{content:attr(data-label);display:block;margin-bottom:3px;font-weight:800;font-size:9.5px;
    letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
  .page-science .sci-src-len{white-space:normal}
  .page-science .sci-q>summary{font-size:18px;padding:18px 2px}
  .page-science .sci-q-a p{padding:0 8px 18px 2px}
  .page-science .sci-more-title{font-size:24px}
  .page-science .sci-board{grid-template-columns:minmax(0,1fr)}
  .page-science .sci-tiers{grid-template-columns:minmax(0,1fr)}
  .page-science .sci-more .sci-pair{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:420px){
  .page-science .sci-stats{grid-template-columns:minmax(0,1fr)}
  .page-science .sci-scales{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .page-science .sci-scale,.page-science .sci-q-plus,.page-science .sci-rail-list a{transition:none}
}


/* ===== 65-types.css ===== */
/* ==========================================================================
   65-types.css · owner: Science & Types director (Nomigram rebuild, Sep 21, 2026)
   Page: /types/four-letter/, the type library (src/pages/fourletter.mjs libraryPage, body class "page-fourletter page-fl-ref";
   browser script app/library-fourletter.js). Replicates docs/design/nomigram/Nomigram Types.dc.html: the inline styles there are
   the values here. The type pages keep 51-fourletter.css; everything below is scoped under .page-fl-ref.
   Group colours are our four groups' swatches (00-base.css --group-*), each card's accent.

   EDITORIAL (D88, Sep 22, 2026): this file was written for the glass design that came between the vector and editorial systems.
   Every translucent ground, backdrop blur, corner glow and tinted drop shadow below has been replaced with the editorial
   vocabulary of docs/mockups/site/: white grounds, hairline --line edges, flat colour, radii 14 / 10 / 5. Glass stays on the
   header and footer chrome only.
   ========================================================================== */

.page-fl-ref .grp-is{--acc:var(--group-is);--acc-text:var(--group-is-text)}
.page-fl-ref .grp-in{--acc:var(--group-in);--acc-text:var(--group-in-text)}
.page-fl-ref .grp-es{--acc:var(--group-es);--acc-text:var(--group-es-text)}
.page-fl-ref .grp-en{--acc:var(--group-en);--acc-text:var(--group-en-text)}

/* ---------------------------------------------------------------- intro */
.page-fl-ref .flr{padding-top:64px}
.page-fl-ref .flr-intro{text-align:center;margin-bottom:40px}
.page-fl-ref .flr-intro .eyebrow{margin-bottom:14px}
.page-fl-ref .flr-intro h1{margin:0 auto 14px;max-width:760px;font-family:var(--display);font-weight:500;font-size:clamp(40px,5.5vw,68px);line-height:1.02;letter-spacing:-.025em}
.page-fl-ref .flr-intro .eyebrow+h1{margin-top:0}
.page-fl-ref .flr-title-2{color:inherit}
.page-fl-ref .flr-lede{margin:0 auto;max-width:560px;font-size:16px;line-height:1.55;color:var(--muted);text-wrap:pretty}

/* ---------------------------------------------------------------- group pills */
.page-fl-ref .flr-pills{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.page-fl-ref .flr-pill{appearance:none;display:flex;align-items:center;gap:8px;min-height:40px;padding:10px 18px;border-radius:999px;border:1px solid var(--line);
  background:#fff;color:var(--ink);font-family:var(--body);font-weight:600;font-size:13px;line-height:1.2;cursor:pointer;
  transition:background-color .25s ease,color .25s ease,border-color .25s ease}
.page-fl-ref .flr-pill:hover{background:var(--blue-wash);border-color:var(--blue-mark);color:var(--blue-ink)}
.page-fl-ref .flr-dot{width:8px;height:8px;border-radius:50%;background:var(--acc,var(--ink))}
.page-fl-ref .flr-pill[aria-pressed=true]{background:var(--ink);color:#fff;border-color:var(--ink)}
.page-fl-ref .flr-pill[aria-pressed=true] .flr-dot{background:#fff}

/* ---------------------------------------------------------------- the sixteen: four families, four cards to a row
   Sep 23, 2026. Wayne, on docs/mockups/type-card-size/: "for the redesign of the cards, b is probably best. i'd say it would be
   better to make the right side of the card appear on hover so that we don't take up too much space, and then organize the types so
   the page isn't too long for no good reason."
   Option B: the painting is a four-by-three band across the top of the card and the name and code sit underneath it. The 46
   paintings are scenes, not faces, so the 56px circle that stood here threw away the corners, which is where most of the picture is.
   Nothing below puts them back in a round frame.
   The detail panel has given its column back to the grid. One panel now sits inside each card's cell and opens under that card:
   :hover on a pointer, :focus-within for the keyboard, .is-open for a tap (app/library-fourletter.js sets it where the device has no
   hover, and Escape clears it). The panel is a sibling of the card and its top edge overlaps the card's bottom border by a pixel, so
   there is no gap to fall through while the pointer travels down onto "Read the type".
   With the column free the grid runs four across, which is exactly one family a row, so the page reads as its four groups instead of
   eight anonymous rows of pairs. */
/* the grid is left-aligned now, so the pills line up with it instead of sitting centred over it */
.page-fl-ref .flr-pills{justify-content:flex-start}
.page-fl-ref .flr-fams{display:grid;gap:36px}
.page-fl-ref .flr-fam{transition:opacity .3s ease}
.page-fl-ref .flr-fam.is-dim{opacity:.32}
.page-fl-ref .flr-fam-head{display:flex;align-items:center;gap:11px;margin-bottom:16px;padding-bottom:11px;border-bottom:1px solid var(--line)}
.page-fl-ref .flr-fam-name{margin:0;font-family:var(--display);font-weight:300;font-size:27px;line-height:1.1;letter-spacing:-.02em}
.page-fl-ref .flr-fam-letters{margin-left:auto;font-weight:700;font-size:11.5px;letter-spacing:.12em;color:var(--muted)}

.page-fl-ref .flr-grid{--flr-gap:18px;list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--flr-gap)}
.page-fl-ref .fl-item{position:relative;min-width:0;transition:opacity .3s ease}
.page-fl-ref .fl-item.is-dim{opacity:.3}

/* the card: painting, then name and code */
.page-fl-ref .flr-card{position:relative;display:flex;flex-direction:column;height:100%;border-radius:var(--r);
  background:#fff;border:1px solid var(--line);color:var(--ink);text-decoration:none;overflow:hidden;
  transition:box-shadow .25s ease,border-color .25s ease}
/* while the painting loads the card shows the family colour with the code on it, the same wait state every other picture on the
   site uses (.art-wait, 05-components.css) */
.page-fl-ref .flr-pic{position:relative;display:block;aspect-ratio:4 / 3;overflow:hidden;background:var(--acc);border-bottom:1px solid var(--line)}
.page-fl-ref .flr-pic img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;object-position:50% 16%}
.page-fl-ref .flr-pic.is-plain{display:grid;place-items:center}
.page-fl-ref .flr-pic-code{font-family:var(--display);font-size:24px;color:#fff}
.page-fl-ref .flr-body{display:flex;flex-direction:column;flex:1;padding:13px 15px 12px}
.page-fl-ref .flr-name{font-family:var(--display);font-weight:500;font-size:20px;line-height:1.06;letter-spacing:-.01em}
.page-fl-ref .flr-meta{display:flex;justify-content:space-between;align-self:stretch;margin-top:auto;padding-top:9px;
  font-weight:700;font-size:11.5px;letter-spacing:.12em;line-height:1.3;color:var(--muted)}
.page-fl-ref .flr-arrow{color:var(--acc-text);letter-spacing:0}
.page-fl-ref .flr-card .fl-mine-tag{margin:9px 0 0;align-self:flex-start}
.page-fl-ref .fl-item.is-mine .flr-card{outline:3px solid var(--amber);outline-offset:3px}
.page-fl-ref .flr-card:hover{border-color:var(--blue-mark);box-shadow:var(--sh-sm);color:var(--ink)}

/* the panel: a sheet under the card, two columns wide so the four scales and the two facts sit side by side */
.page-fl-ref .flr-detail{position:absolute;top:calc(100% - 1px);left:0;z-index:1;display:none;
  width:calc(200% + var(--flr-gap));border-radius:0 var(--r) var(--r) var(--r);
  background:#fff;border:1px solid var(--acc);box-shadow:var(--sh-lift)}
/* the card in the last column would push its panel off the right edge, so that one hangs from the card's right instead */
.page-fl-ref .fl-item:nth-child(4) .flr-detail{left:calc(-100% - var(--flr-gap));border-radius:var(--r) 0 var(--r) var(--r)}
.page-fl-ref .flr-detail-in{padding:18px 20px 18px}
.page-fl-ref .flr-detail-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px}
.page-fl-ref .flr-family{font-weight:600;font-size:10.5px;line-height:1;letter-spacing:.14em;text-transform:uppercase;color:var(--acc-text)}
.page-fl-ref .flr-detail-code{font-weight:700;font-size:12px;letter-spacing:.12em;color:var(--muted)}
.page-fl-ref .flr-detail-name{margin:0 0 6px;font-family:var(--display);font-weight:500;font-size:26px;line-height:1.05;letter-spacing:-.02em}
.page-fl-ref .flr-line{margin:0 0 16px;font-family:var(--display);font-size:16px;line-height:1.45;color:var(--muted);max-width:52ch}
.page-fl-ref .flr-detail-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px 26px;align-items:start;margin-bottom:18px}
.page-fl-ref .flr-scales{display:grid;gap:11px}
.page-fl-ref .flr-scale-ends{display:flex;justify-content:space-between;gap:10px;margin-bottom:5px;font-weight:600;font-size:11px;line-height:1.3;color:var(--faint)}
.page-fl-ref .flr-scale-ends .is-on{color:var(--acc-text)}
.page-fl-ref .flr-scale-ends>span:last-child{text-align:right}
.page-fl-ref .flr-track{position:relative;height:6px;border-radius:3px;background:var(--ground-deep)}
.page-fl-ref .flr-mid{position:absolute;left:50%;top:0;bottom:0;border-left:1px dashed var(--grey)}
.page-fl-ref .flr-dot-pos{position:absolute;top:-4px;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 3px #fff}
.page-fl-ref .flr-facts{display:grid;gap:12px;margin:0;font-size:14px;line-height:1.45;color:var(--ink)}
.page-fl-ref .flr-facts dt{font-weight:600;font-size:10.5px;line-height:1.6;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.page-fl-ref .flr-facts dd{margin:0}
.page-fl-ref .flr-ctas{display:flex;flex-wrap:wrap;gap:10px}
.page-fl-ref .flr-btn{display:inline-flex;align-items:center;gap:6px;padding:12px 18px;border-radius:var(--r-btn);font-weight:600;font-size:13.5px;line-height:1.2;text-decoration:none;
  transition:background-color .2s ease,border-color .2s ease,color .2s ease}
.page-fl-ref .flr-btn-primary{background:var(--blue-deep);color:#fff;box-shadow:var(--sh-btn)}
.page-fl-ref .flr-btn-primary:hover{background:var(--blue-ink);color:#fff}
.page-fl-ref .flr-btn-ghost{padding:12px 16px;background:#fff;border:1px solid var(--line);color:var(--ink)}
.page-fl-ref .flr-btn-ghost:hover{border-color:var(--blue-mark);color:var(--ink)}

/* open: the keyboard is inside the cell, or a tap opened it. The card keeps its top corners and loses its bottom ones, so the card
   and the sheet under it read as one piece. */
.page-fl-ref .fl-item:focus-within,.page-fl-ref .fl-item.is-open{z-index:6}
.page-fl-ref .fl-item:focus-within>.flr-detail,.page-fl-ref .fl-item.is-open>.flr-detail{display:block;animation:flr-peek .16s ease-out}
.page-fl-ref .fl-item:focus-within>.flr-card,.page-fl-ref .fl-item.is-open>.flr-card{border-color:var(--acc);box-shadow:inset 0 0 0 1px var(--acc);border-bottom-left-radius:0;border-bottom-right-radius:0}
@media (hover:hover){
  .page-fl-ref .fl-item:hover{z-index:6}
  /* a tenth of a second before it opens, so sweeping the pointer across a row does not flash four panels. The keyboard and a
     tap open theirs at once: only a pointer passes over cards it did not mean to ask about. */
  .page-fl-ref .fl-item:hover>.flr-detail{display:block;animation:flr-peek .16s ease-out .12s backwards}
  .page-fl-ref .fl-item:hover>.flr-card{border-color:var(--acc);box-shadow:inset 0 0 0 1px var(--acc);border-bottom-left-radius:0;border-bottom-right-radius:0}
}
@keyframes flr-peek{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}

/* ---------------------------------------------------------------- below the grid */
.page-fl-ref .review-stack{margin-top:40px}
.page-fl-ref .flr-faq{padding-top:72px}

/* ---------------------------------------------------------------- narrower screens
   Under 880px the four columns would leave the paintings too small to read, so the grid halves to two and each family takes two
   rows. The panel stays two columns wide either way, which is why the card that shifts its panel changes from the fourth to
   every second one. */
@media (max-width:879px){
  .page-fl-ref .flr-grid{--flr-gap:14px;grid-template-columns:repeat(2,minmax(0,1fr))}
  .page-fl-ref .fl-item:nth-child(4) .flr-detail{left:0;border-radius:0 var(--r) var(--r) var(--r)}
  .page-fl-ref .fl-item:nth-child(even) .flr-detail{left:calc(-100% - var(--flr-gap));border-radius:var(--r) 0 var(--r) var(--r)}
}
@media (max-width:720px){
  .page-fl-ref .flr{padding-top:28px}
  .page-fl-ref .flr-intro{margin-bottom:28px}
  .page-fl-ref .flr-lede{font-size:15.5px}
  .page-fl-ref .flr-pills{gap:6px;margin-bottom:22px}
  .page-fl-ref .flr-pill{padding:9px 14px;font-size:12.5px}
  .page-fl-ref .flr-fams{gap:28px}
  .page-fl-ref .flr-fam-name{font-size:22px}
  .page-fl-ref .flr-grid{--flr-gap:10px}
  .page-fl-ref .flr-body{padding:11px 12px 11px}
  .page-fl-ref .flr-name{font-size:17px}
  .page-fl-ref .flr-meta{font-size:11px;letter-spacing:.1em;padding-top:7px}
  .page-fl-ref .flr-detail-in{padding:16px 16px 16px}
  .page-fl-ref .flr-detail-name{font-size:23px}
  .page-fl-ref .flr-line{font-size:15.5px;margin-bottom:14px}
  .page-fl-ref .flr-detail-cols{grid-template-columns:minmax(0,1fr);gap:16px}
  .page-fl-ref .flr-ctas .flr-btn{flex:1 1 100%;justify-content:center}
  .page-fl-ref .flr-faq{padding-top:48px}
}
@media (prefers-reduced-motion:reduce){
  .page-fl-ref .flr-card,.page-fl-ref .flr-pill,.page-fl-ref .fl-item,.page-fl-ref .flr-fam,.page-fl-ref .flr-btn{transition:none}
  .page-fl-ref .flr-detail{animation:none!important}
}

/* ==========================================================================
   The /types/ hub (src/pages/types.mjs, body class page-hub), restyled to the Nomigram look (coordinator, Sep 21: no solid section
   bars, no square colored number tiles, no ink bands). CSS only, over 50-types.css, which the foundation owner is converting too.
   Each section keeps one accent from the rotation (blue, violet, amber, teal): traits teal, four-letter violet, interests blue,
   values amber. The accent shows as the kicker, the corner glow on a card and a tinted pill; every surface stays glass or white.
   ========================================================================== */
.page-hub .hub-tone-sage{--acc:#2a9d8f;--acc-text:#1f7a6f}
.page-hub .hub-tone-ink{--acc:#7a5cc7;--acc-text:#5b3fa8}
.page-hub .hub-tone-cobalt{--acc:#2288E0;--acc-text:#0A5FA8}
.page-hub .hub-tone-amber{--acc:#b8791f;--acc-text:#9A5B06}

/* numbered chips: the design's gradient step chip with a white serif numeral */
.page-hub .hub-num{background:var(--blue-deep);color:#fff;border:0;border-radius:var(--r-sm);
  font-family:var(--display);font-weight:500;font-size:22px;box-shadow:none}

/* the seven assessments as painted tiles (D132, Sep 26, 2026; src/pages/types.mjs hubTile). White, a hairline edge, the test's own
   painting across the top, then its number, name and the one line on the idea it is built on, which together link down to its
   section; under a hairline, one link per library it feeds, with the count as a kicker. The three "What you're like" assessments
   take the first row three wide (.is-split) and the four for work and life the second, so neither row has a hole in it. */
.page-hub .hub-tiles{list-style:none;padding:0;margin:44px 0 0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:18px}
.page-hub .hub-tile{grid-column:span 3;display:flex;flex-direction:column;min-width:0;padding:0;overflow:hidden;border-radius:var(--r);background:#fff;
  border:1px solid var(--line);box-shadow:none}
.page-hub .hub-tiles.is-split>.hub-tile:nth-child(-n+3){grid-column:span 4}
.page-hub .hub-tile-head{display:flex;flex-direction:column;color:var(--ink);text-decoration:none}
.page-hub .hub-tile-pic{flex:none;border-radius:0;border-bottom:1px solid var(--line)}
.page-hub .hub-tile-text{display:grid;grid-template-columns:auto minmax(0,1fr);gap:5px 12px;align-items:start;padding:16px 18px 16px}
.page-hub .hub-tile .hub-num{grid-row:1/span 2;width:30px;height:30px;font-size:15px;border-radius:var(--r-sm)}
.page-hub .hub-tile-name{font-family:var(--display);font-weight:400;font-size:21px;line-height:1.12;letter-spacing:-.012em;text-wrap:balance}
.page-hub .hub-tile-basis{grid-column:2;font-size:14.5px;line-height:1.45;color:var(--muted)}
.page-hub .hub-tile-head:hover .hub-tile-name{color:var(--cobalt)}
.page-hub .hub-tile-head:focus-visible{outline:2px solid var(--cobalt);outline-offset:-2px}
.page-hub .hub-tile-rows{list-style:none;margin:auto 18px 0;padding:2px 0 6px;border-top:1px solid var(--line);display:grid}
.page-hub .hub-tile-rows>li+li{border-top:1px solid var(--line)}
.page-hub .hub-tile-rows a{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:1px 10px;padding:10px 0;color:var(--ink);text-decoration:none}
.page-hub .hub-tile-rows a b{grid-column:1;font-family:var(--body);font-weight:600;font-size:14.5px;line-height:1.25;letter-spacing:0}
.page-hub .hub-tile-rows a small{grid-column:1;display:block;margin:0;font-family:var(--body);font-weight:600;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--acc-text)}
.page-hub .hub-tile-rows a .arrow{grid-column:2;grid-row:1/span 2;margin:0;font-size:15px;color:var(--acc-text)}
.page-hub .hub-tile-rows a:hover b{color:var(--acc-text)}

/* section heads: the design's kicker above a serif h2, no bar */
.page-hub .hub-sec-head{padding:0 0 14px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;box-shadow:none;color:var(--ink)}
.page-hub .hub-sec-head .hub-num{width:52px;height:52px;border-radius:var(--r-sm);background:var(--blue-deep);color:#fff;font-size:24px}
.page-hub .hub-sec-name{display:flex;flex-direction:column-reverse}
.page-hub .hub-sec-name h2{font-family:var(--display);font-weight:500;font-size:clamp(30px,3.4vw,42px);line-height:1.05;letter-spacing:-.02em;color:var(--ink)}
.page-hub .hub-sec-name p{margin:0 0 8px;font-family:var(--body);font-weight:600;font-size:11px;line-height:1.2;letter-spacing:.16em;text-transform:uppercase;color:var(--acc-text)}
.page-hub .hub-sec-link{padding:8px 14px;border-radius:999px;border:1px solid color-mix(in srgb,var(--acc) 28%,transparent);background:color-mix(in srgb,var(--acc) 10%,transparent);
  color:var(--acc-text);font-weight:600;font-size:13px}
.page-hub .hub-sec-link:hover{background:color-mix(in srgb,var(--acc) 16%,transparent);color:var(--acc-text);border-color:color-mix(in srgb,var(--acc) 40%,transparent)}
.page-hub .hub-sec-what,.page-hub .hub-sec-from .label{font-family:var(--body);font-weight:600;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* the four-letter preview: white group cards, the group's own colour as the kicker (never an ink band, never a glow) */
.page-hub .hub-fl-group{position:relative;overflow:hidden;border-radius:var(--r);background:#fff;
  border:1px solid var(--line);box-shadow:none}
.page-hub .hub-fl-group:nth-child(1){--acc:var(--group-is);--acc-text:var(--group-is-text)}
.page-hub .hub-fl-group:nth-child(2){--acc:var(--group-in);--acc-text:var(--group-in-text)}
.page-hub .hub-fl-group:nth-child(3){--acc:var(--group-es);--acc-text:var(--group-es-text)}
.page-hub .hub-fl-group:nth-child(4){--acc:var(--group-en);--acc-text:var(--group-en-text)}
.page-hub .hub-fl-group>*{position:relative}
.page-hub .hub-fl-head{padding:14px 16px 4px;background:transparent;color:var(--acc-text);font-weight:600;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase}
.page-hub .hub-fl-letters{padding:3px 8px;border-radius:999px;border:1px solid color-mix(in srgb,var(--acc) 28%,transparent);background:color-mix(in srgb,var(--acc) 10%,transparent);
  color:var(--acc-text);font-family:var(--body);font-weight:700;font-size:10.5px;letter-spacing:.12em}
.page-hub .hub-fl-card .art{border:1px solid var(--line);border-radius:50%;box-shadow:none}
.page-hub .hub-fl-code{font-family:var(--body);font-weight:700;font-size:11px;letter-spacing:.12em;color:var(--muted)}
.page-hub .hub-fl-name{font-family:var(--display);font-weight:500;font-size:14px;letter-spacing:-.01em}
.page-hub .hub-fl-card:hover .hub-fl-name{text-decoration:none;color:var(--acc-text)}

/* the work values tiles */
.page-hub .hub-value{position:relative;overflow:hidden;border-radius:var(--r)}
.page-hub .hub-value>*{position:relative}
.page-hub .hub-value-name{font-family:var(--display);font-weight:500;font-size:19px;letter-spacing:-.015em}

@media (max-width:720px){
  .page-hub .hub-sec-head{padding:0 0 12px}
  .page-hub .hub-sec-head .hub-num{width:44px;height:44px;border-radius:var(--r-sm);font-size:20px}
  .page-hub .hub-sec-name h2{font-size:28px}
}
/* narrower than three across: each tile becomes a row, the painting on the left, the name and its line beside it, the links under
   both; two to a row on a tablet, one on a phone */
@media (max-width:980px){
  .page-hub .hub-tiles{margin-top:32px;gap:12px}
  .page-hub .hub-tile,.page-hub .hub-tiles.is-split>.hub-tile:nth-child(-n+3){grid-column:span 6}
  .page-hub .hub-tile-head{flex-direction:row;align-items:stretch}
  .page-hub .hub-tile-pic{width:128px;aspect-ratio:auto!important;min-height:100%;border-bottom:0;border-right:1px solid var(--line)}
  .page-hub .hub-tile-pic .ph-img-tag{left:4px;top:4px;padding:1px 5px;font-size:7px;letter-spacing:.06em}
  .page-hub .hub-tile-text{flex:1 1 auto;min-width:0;padding:12px 14px;gap:4px 10px}
  .page-hub .hub-tile .hub-num{width:26px;height:26px;font-size:13px}
  .page-hub .hub-tile-name{font-size:18px}
  .page-hub .hub-tile-basis{font-size:13.5px;line-height:1.4}
  .page-hub .hub-tile-rows{margin:0 14px}
  .page-hub .hub-tile-rows a{padding:9px 0}
}
@media (max-width:720px){
  .page-hub .hub-tiles{margin-top:28px}
  .page-hub .hub-tile,.page-hub .hub-tiles.is-split>.hub-tile:nth-child(-n+3){grid-column:1/-1}
  .page-hub .hub-tile-pic{width:112px}
}

/* ==========================================================================
   LIBRARY ZONES (Truity polish, Sep 21, 2026) · owner: Library and content director
   Every page of the Personality library: /types/, /types/four-letter/ with its type and chapter pages, /types/interests/ with its
   type pages, /types/traits/ with its trait pages, and (as .page-library) the five newer libraries in 66-libraries.css:
   /types/work-styles/, /types/six-factor/, /types/facets/, /types/pillars/ and /types/self-esteem/.
   Each top-level section is a .zone band (libZone() and zoneRun() in
   src/pages/traits.mjs), the hero sits on blue with a picture, and every type page ends with the dark band that asks for the test
   (takeBand()). This block comes last among the library partials (50, 51, 52, 65), so it lays their older rules into the bands.
   ========================================================================== */
:is(.page-types,.page-fourletter,.page-traits,.page-library) .lib-zone>.wrap>.section-lg:first-child{padding-top:0}
:is(.page-types,.page-fourletter,.page-traits,.page-library) .lib-zone>.wrap>.section-lg:first-child>.section-lg:first-child{padding-top:0}
:is(.page-types,.page-fourletter,.page-traits,.page-library) .lib-zone>.wrap>:is(section,div)>.sh{border-top:0;padding-top:0;margin-bottom:28px}
:is(.page-types,.page-fourletter,.page-traits,.page-library) .lib-zone>.wrap>:is(section,div)>.sh h2{font-weight:300;font-size:clamp(28px,3.2vw,40px);letter-spacing:-.02em;line-height:1.08}
:is(.page-types,.page-fourletter,.page-traits,.page-library) .lib-zone>.wrap>:is(section,div)>.sh-quiet h2{font-size:clamp(24px,2.6vw,30px)}
:is(.page-types,.page-fourletter,.page-traits,.page-library) .lib-zone>.wrap>:is(section,div)>.sh .sh-num{font-size:12px;font-weight:800;letter-spacing:.08em;transform:translateY(-6px)}
/* several quiet sections sharing one zone keep a hairline between them */
:is(.page-types,.page-fourletter,.page-traits,.page-library) .lib-zone>.wrap>section:not(:first-child)>.sh{border-top:1px solid var(--line);padding-top:22px}
/* on a tinted ground a quiet panel turns white, so it still reads as a panel */
:is(.page-types,.page-fourletter,.page-traits,.page-library) :is(.zone-grey,.zone-warm,.zone-blue) .box-quiet{background:#fff;border-color:var(--line)}
:is(.page-types,.page-fourletter,.page-traits,.page-library) .lib-zone .people-sec{padding-top:0}

/* the hero band: the page's own hero, with a picture where the hub has one */
:is(.page-types,.page-fourletter,.page-traits,.page-library) .lib-top{padding-block:44px 64px}
:is(.page-types,.page-fourletter,.page-traits,.page-library) .lib-top .review-stack{margin-top:32px}
:is(.page-types,.page-fourletter,.page-traits,.page-library) .lib-top .art-frame{box-shadow:0 1px 2px rgba(13,20,32,.05),0 24px 50px -30px rgba(13,20,32,.45)}
:is(.page-types,.page-fourletter,.page-traits,.page-library) .lib-hero-pic{width:100%;box-shadow:0 1px 2px rgba(13,20,32,.05),0 24px 50px -30px rgba(13,20,32,.45)}
:is(.page-types,.page-traits) .lib-hero h1,.page-traits .tr-hero h1{font-size:clamp(40px,5vw,62px);line-height:1.02}
.page-traits .lib-hero .lib-hero-pic{max-width:420px;justify-self:center}

/* the hub: the title and its one line, the seven assessment tiles under them (D132), then one zone per kind of result */
.page-hub .hub-hero{display:block}
.page-hub .hub-hero-text{max-width:760px}
.page-hub .hub-hero h1{font-size:clamp(40px,5vw,62px);line-height:1.02}
.page-hub .hub-sec-head{border-bottom-color:var(--line)}
.page-hub .hub-sec-name h2{font-weight:300}
.page-hub .zone-warm .hub-fl-group,.page-hub .zone-grey .hub-fl-group{background:#fff}

/* the four-letter library: its intro beside the picture, left-aligned like every other hub */
.page-fl-ref .flr{padding-top:0}
.page-fl-ref .flr-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:56px;align-items:center}
.page-fl-ref .flr-intro{text-align:left;margin:0}
.page-fl-ref .flr-intro h1{margin:0 0 16px;font-weight:300;font-size:clamp(40px,5vw,62px)}
.page-fl-ref .flr-intro .flr-title-2{display:block;color:var(--cobalt)}
.page-fl-ref .flr-lede{margin:0;max-width:46ch;font-family:var(--display);font-weight:300;font-size:19px;line-height:1.55;color:var(--muted)}
.page-fl-ref .flr-zone .review-stack{margin-top:40px}
.page-fl-ref .flr-faq{padding-top:0}

/* the interest library: the hexagon beside the three "how to read a type" cards */
.page-types .lib-how-row{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:24px;align-items:start}
.page-types .lib-how{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.page-types .lib-hexbox{background:#fff}

/* the dark band that asks for the test */
:is(.page-types,.page-fourletter,.page-traits,.page-library) .lib-band-zone{padding-block:72px}
:is(.page-types,.page-fourletter,.page-traits,.page-library) .lib-band{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px 64px;align-items:center}
:is(.page-types,.page-fourletter,.page-traits,.page-library) .lib-band-title{margin-top:12px;font-weight:300;font-size:clamp(30px,3.6vw,44px);line-height:1.08;letter-spacing:-.02em;max-width:20ch}
:is(.page-types,.page-fourletter,.page-traits,.page-library) .lib-band-line{margin-top:14px;max-width:58ch;font-size:16.5px;line-height:1.55}
:is(.page-types,.page-fourletter,.page-traits,.page-library) .lib-band .btn-row{margin-top:26px}
:is(.page-types,.page-fourletter,.page-traits,.page-library) .lib-band-pic{width:220px;border-radius:50%;background:#fff;box-shadow:0 0 0 10px rgba(255,255,255,.08)}
:is(.page-types,.page-fourletter,.page-traits,.page-library) .lib-band-pic img{object-fit:cover;transform:scale(1.55)}
:is(.page-types,.page-fourletter,.page-traits,.page-library) .lib-band-pic .ph-img-tag{left:50%;top:14px;transform:translateX(-50%)}
:is(.page-types,.page-fourletter,.page-traits,.page-library) .lib-band-pic.is-panel{width:380px;border-radius:var(--r);box-shadow:none}
/* transform:none, unlike the round spot above: this one is a painted panel whose whole composition is the point, so it is not
   zoomed into its own middle (src/pages/types.mjs, art-library-band) */
:is(.page-types,.page-fourletter,.page-traits,.page-library) .lib-band-pic.is-panel img{object-fit:cover;padding:0;transform:none}
:is(.page-types,.page-fourletter,.page-traits,.page-library) .lib-band-pic.is-panel .ph-img-tag{left:10px;top:10px;transform:none}

@media (max-width:1100px){
  :is(.page-types,.page-fourletter,.page-traits,.page-library) .lib-band-pic.is-panel{width:300px}
}
@media (max-width:860px){
  .page-fl-ref .flr-hero,.page-types .lib-how-row{grid-template-columns:minmax(0,1fr);gap:32px}
  .page-types .lib-hexbox{max-width:420px}
  :is(.page-types,.page-fourletter,.page-traits,.page-library) .lib-band{grid-template-columns:minmax(0,1fr);gap:28px}
  :is(.page-types,.page-fourletter,.page-traits,.page-library) .lib-band-pic{grid-row:1;width:132px}
  :is(.page-types,.page-fourletter,.page-traits,.page-library) .lib-band-pic.is-panel{grid-row:auto;width:100%;max-width:520px}
  .page-traits .lib-hero .lib-hero-pic{max-width:300px;justify-self:start}
}
@media (max-width:720px){
  :is(.page-types,.page-fourletter,.page-traits,.page-library) .lib-top{padding-block:28px 44px}
  :is(.page-types,.page-fourletter,.page-traits,.page-library) .lib-band-zone{padding-block:52px}
  :is(.page-types,.page-fourletter,.page-traits,.page-library) .lib-band .btn-row .btn{flex:1 1 100%}
}


/* ===== 66-libraries.css ===== */
/* 66-libraries.css · owner: Library and content director
   The five newer libraries: /types/work-styles/, /types/six-factor/, /types/facets/, /types/pillars/ and the self-esteem explainer
   at /types/self-esteem/, plus the rows they add to /types/ and the "six parts" section they add to a trait page.
   Every page here carries body class `page-library` and its own, so the LIBRARY ZONES block in 65-types.css (which lists
   .page-library among its grounds) lays the bands out, and this file only adds the parts those three older libraries never needed.
   Editorial system D88: white paper, hairlines, flat colour, 14px corners (5px on small parts), no gradients and no shadows except
   the one the hero picture already carries. Checked at 1440px and 390px.
   ========================================================================== */

/* ---------------------------------------------------------------- accents
   Four categorical colours, the site's own (00-base.css). A tone sets --lk-c for the mark, the card edge and the rule on a tile.
   Amber is under 3:1 against white, so nothing carries meaning by amber alone: every mark has its name in text beside it. */
.page-library .lk-tone-blue{--lk-c:var(--blue-mark);--lk-t:var(--cobalt);--lk-w:var(--blue-wash)}
.page-library .lk-tone-amber{--lk-c:var(--amber-mark);--lk-t:var(--amber-text);--lk-w:var(--amber-wash)}
.page-library .lk-tone-teal{--lk-c:var(--sage);--lk-t:var(--sage-text);--lk-w:var(--sage-wash)}
.page-library .lk-tone-violet{--lk-c:var(--plum);--lk-t:var(--violet-text);--lk-w:#efeaf9}
.page-library .lk-tile,.page-library .lk-notes>li,.page-library .lsf-facets>li{--lk-c:var(--grey);--lk-t:var(--muted);--lk-w:var(--ground-deep)}

/* ---------------------------------------------------------------- the tile grid */
.page-library .lk-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-top:26px;list-style:none;padding:0}
.page-library .lk-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.page-library .lk-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.page-library .lk-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.page-library .lk-grid>li{display:flex}

.page-library .lk-tile{display:flex;flex-direction:column;gap:8px;width:100%;padding:22px 22px 20px;text-decoration:none;color:inherit;
  border:var(--bw,1px) solid var(--line);border-radius:14px;background:var(--paper,#fff);transition:border-color .12s ease,transform .12s ease}
.page-library a.lk-tile:hover{border-color:var(--lk-c);transform:translateY(-1px)}
.page-library a.lk-tile:focus-visible{outline:2px solid var(--cobalt);outline-offset:2px}
.page-library .lk-tile.is-here{border-color:var(--cobalt);background:var(--blue-wash)}
.page-library .lk-mark{display:inline-grid;place-items:center;align-self:start;justify-self:start;min-width:34px;height:34px;padding:0 7px;border-radius:5px;
  border:1px solid var(--lk-c);background:var(--lk-w);color:var(--lk-t);font:700 15px/1 var(--body)}
.page-library .lk-tile-name{font:600 18px/1.25 var(--body);letter-spacing:-.01em;color:var(--ink);margin:0}
.page-library .lk-tile-line{font:400 14.5px/1.55 var(--body);color:var(--muted);margin:0;max-width:44ch}
.page-library .lk-tile-meta{margin:0;font:500 12.5px/1.45 var(--body);color:var(--faint);letter-spacing:.01em}
.page-library .lk-tile .link-more{margin-top:auto;padding-top:10px;font:600 13.5px/1 var(--body);color:var(--cobalt)}

/* ---------------------------------------------------------------- the one painting a factor or facet owns (D101)
   Each of the six factors and each of the thirty facets has its own picture rather than a shared spot, because the same picture
   runs beside the same heading inside a paid report. libArt()/libArtRow()/libTile({pic}) in src/site/library.mjs draw them.
   The picture is pulled out to the tile's edge so a grid of them reads as a row of different places at a glance, which is the
   whole reason they were painted one at a time. */
.page-library .lk-tile.has-pic{padding-top:0;overflow:hidden}
.page-library .lk-tile-pic{margin:0 -22px 12px;width:auto;max-width:none;border-radius:0;background:var(--ground-deep)}
.page-library .lk-tile.has-pic .lk-mark{margin-top:-2px}
.page-library .lk-artrow{display:grid;grid-template-columns:minmax(0,330px) minmax(0,1fr);gap:26px;align-items:start;margin-top:22px}
.page-library .lk-art{border:1px solid var(--line);background:var(--ground-deep)}
.page-library .lk-artrow-text>:first-child{margin-top:0}

/* ---------------------------------------------------------------- the name and the line under it
   .hero-name sets at line-height .98, so the descenders of a long name ("Concern for people struggling", "Honesty and humility")
   hung into the line set straight under it, on all 45 item pages at both widths (Sep 25, 2026 review). The gap scales with the
   name, the way the descenders do; the four-letter pages give their own line 18px at full size (51-fourletter.css .fl-line). */
.page-library .hero-name+.motto{margin-top:calc(var(--fs-hero) * .2)}

/* ---------------------------------------------------------------- "At a glance"
   The box in the hero of every item page, built like the trait pages' one (52-traits.css .tr-glance): the header band on the
   hairline, then a definition list with a dashed rule between rows. One rule, four page classes. */
.page-library :is(.lw-glance,.lsf-glance,.lf-glance,.lp-glance,.lse-glance){padding:0;align-self:start}
.page-library :is(.lw-glance,.lsf-glance,.lf-glance,.lp-glance,.lse-glance) .band{background:transparent;color:var(--ink);border-bottom:1px solid var(--line)}
.page-library :is(.lw-glance-list,.lsf-glance-list,.lf-glance-list,.lp-glance-list,.lse-glance-list){margin:0;padding:6px 20px 12px}
.page-library :is(.lw-glance-list,.lsf-glance-list,.lf-glance-list,.lp-glance-list,.lse-glance-list)>div{padding:14px 0}
.page-library :is(.lw-glance-list,.lsf-glance-list,.lf-glance-list,.lp-glance-list,.lse-glance-list)>div+div{border-top:1px dashed var(--rule-soft)}
.page-library :is(.lw-glance-list,.lsf-glance-list,.lf-glance-list,.lp-glance-list,.lse-glance-list) dt{font:700 12px/1.3 var(--body);letter-spacing:.01em;color:var(--muted);margin-bottom:8px}
.page-library :is(.lw-glance-list,.lsf-glance-list,.lf-glance-list,.lp-glance-list,.lse-glance-list) dd{margin:0;font:600 15px/1.45 var(--body);color:var(--ink)}
.page-library :is(.lw-glance-note,.lsf-glance-note,.lf-glance-note,.lp-glance-note,.lse-glance-note){font:400 14px/1.55 var(--body);color:var(--muted)}

/* ---------------------------------------------------------------- three quiet cards under a drawing */
.page-library .lk-notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:30px;list-style:none;padding:0}
.page-library .lk-notes>li{border-radius:14px}
.page-library .lk-notes .box-title{font:700 13px/1.3 var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.page-library .lk-notes p{margin-top:9px;max-width:none}

/* ---------------------------------------------------------------- a scale with nothing on it
   Wherever a library page has to show that a thing is a range rather than a box. No mark, ever: nobody browsing has a score. */
.page-library .lk-track{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;width:100%}
.page-library .lk-track-end{font:500 12.5px/1.35 var(--body);color:var(--muted);max-width:14ch}
.page-library .lk-track-end-hi{text-align:right}
.page-library .lk-track-line{height:6px;border-radius:999px;background:var(--ground-deep);box-shadow:inset 0 0 0 1px var(--line)}
.page-library .lk-track-lg .lk-track-line{height:10px}
.page-library .lk-track-sm{gap:8px}
.page-library .lk-track-sm .lk-track-end{font-size:11.5px;max-width:11ch}
.page-library .lk-track-sm .lk-track-line{height:4px}

/* ---------------------------------------------------------------- the two ends of a scale */
.page-library .lk-ends{gap:20px;margin-top:22px}
.page-library .lk-end .band{background:var(--ground-deep);color:var(--ink)}
.page-library .lk-end.is-plain .band{background:var(--surface-dim)}
.page-library .lk-end p{max-width:52ch}

/* ================================================================ WORK STYLES */

.page-workstyles .lw-start-row{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:48px;align-items:center;margin-top:30px}
.page-workstyles .lw-compass-fig{margin:0}
.page-workstyles .lw-compass-label{margin-bottom:12px}
.page-workstyles .lw-compass{width:100%;height:auto;max-width:380px;display:block;margin:0 auto}
.page-workstyles .lw-frame{fill:none;stroke:var(--line);stroke-width:1}
/* One quarter of the ring per style, all four the same size, so the drawing teaches the corners without marking a score. */
.page-workstyles .lw-quarter{fill:var(--lk-w);stroke:var(--lk-c);stroke-width:1}
.page-workstyles .lw-letter{font:700 15px var(--body);fill:var(--lk-t)}
.page-workstyles .lw-quarter.lk-tone-blue,.page-workstyles .lw-quarter.lk-tone-blue+.lw-letter{--lk-c:var(--blue-mark);--lk-t:var(--cobalt);--lk-w:var(--blue-wash)}
.page-workstyles .lw-quarter.lk-tone-amber,.page-workstyles .lw-quarter.lk-tone-amber+.lw-letter{--lk-c:var(--amber-mark);--lk-t:var(--amber-text);--lk-w:var(--amber-wash)}
.page-workstyles .lw-quarter.lk-tone-teal,.page-workstyles .lw-quarter.lk-tone-teal+.lw-letter{--lk-c:var(--sage);--lk-t:var(--sage-text);--lk-w:var(--sage-wash)}
.page-workstyles .lw-quarter.lk-tone-violet,.page-workstyles .lw-quarter.lk-tone-violet+.lw-letter{--lk-c:var(--plum);--lk-t:var(--violet-text);--lk-w:#efeaf9}
.page-workstyles .lw-axis{stroke:var(--line);stroke-width:1}
.page-workstyles .lw-name{font:600 16px var(--body);fill:var(--ink)}
.page-workstyles .lw-scale{font:500 12.5px var(--body);fill:var(--muted)}
.page-workstyles .lw-side{font:600 11.5px var(--body);fill:var(--faint);letter-spacing:.08em;text-transform:uppercase}
.page-workstyles .lw-compass-fig figcaption{margin-top:16px;max-width:46ch}

.page-workstyles .lw-scale-list>ul{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:14px}
.page-workstyles .lw-scale-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start;
  padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:var(--paper,#fff)}
.page-workstyles .lw-scale-row b{font:600 15.5px/1.3 var(--body);color:var(--ink)}
.page-workstyles .lw-scale-row a{font:600 15.5px/1.3 var(--body);color:var(--cobalt)}
.page-workstyles .lw-scale-row small{display:block;margin-top:6px;font:400 13.5px/1.55 var(--body);color:var(--muted)}
.page-workstyles .lw-arrow{color:var(--faint);padding:0 2px}
.page-workstyles .lw-start-lede,.page-workstyles .lw-all-lede,.page-workstyles .lw-intro{max-width:66ch}
.page-workstyles .lw-prose p{max-width:68ch}
.page-workstyles .lw-moments{gap:20px;margin-top:22px}
.page-workstyles .lw-moments .band{background:var(--ground-deep);color:var(--ink)}
.page-workstyles .lw-working{margin-top:22px}
.page-workstyles .lw-kicker{display:flex;align-items:center;gap:12px;margin-bottom:14px;font:600 13px/1.3 var(--body);
  letter-spacing:.06em;text-transform:uppercase;color:var(--lk-t)}

/* ================================================================ SIX FACTOR */

.page-sixfactor .lsf-sixth-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start;margin-top:26px}
.page-sixfactor .lsf-map-fig{margin:0}
.page-sixfactor .lsf-map-head{display:grid;grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr);gap:0;margin-bottom:10px}
.page-sixfactor .lsf-map-head p:last-child{grid-column:3}
.page-sixfactor .lsf-map{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.page-sixfactor .lsf-map-row{display:grid;grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr);align-items:center}
.page-sixfactor .lsf-map-cell{padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--paper,#fff);min-height:52px;display:flex;flex-direction:column;justify-content:center}
.page-sixfactor .lsf-map-right{border-color:var(--lk-c);background:var(--lk-w)}
.page-sixfactor .lsf-map-link{align-self:center;height:1px;background:var(--grey)}
.page-sixfactor .lsf-map-row.is-new .lsf-map-link{background:transparent;border-top:1px dashed var(--grey)}
.page-sixfactor .lsf-map-five{font:500 14.5px/1.3 var(--body);color:var(--cobalt)}
.page-sixfactor .lsf-map-six{font:600 15px/1.3 var(--body);color:var(--ink);text-decoration:none}
.page-sixfactor .lsf-map-six:hover{text-decoration:underline}
.page-sixfactor .lsf-map-note{margin-top:5px;font:400 12.5px/1.45 var(--body);color:var(--muted)}
.page-sixfactor .lsf-map-row.is-new .lsf-map-left{border-style:dashed;background:transparent}
.page-sixfactor .lsf-map-none{font:500 13px/1.35 var(--body);color:var(--faint)}
.page-sixfactor .lsf-map-fig figcaption{margin-top:16px;max-width:52ch}
.page-sixfactor .lsf-sixth-text p{max-width:60ch}
.page-sixfactor .lsf-ours{margin-top:14px}
.page-sixfactor .lsf-start-lede,.page-sixfactor .lsf-all-lede,.page-sixfactor .lsf-intro{max-width:66ch}
.page-sixfactor .lsf-prose p{max-width:68ch}
.page-sixfactor .lsf-facets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:22px;list-style:none;padding:0}
.page-sixfactor .lsf-facets>li{border-radius:14px;border-left:3px solid var(--lk-c)}
.page-sixfactor .lsf-facets .box-title{font:600 16px/1.3 var(--body);color:var(--ink)}
.page-sixfactor .lsf-facets p{margin-top:8px;max-width:none}
.page-sixfactor .lsf-kicker{display:flex;align-items:center;gap:12px;margin-bottom:14px;font:600 13px/1.3 var(--body);
  letter-spacing:.06em;text-transform:uppercase;color:var(--lk-t)}
.page-sixfactor .lsf-sup-text{max-width:70ch}

/* ================================================================ IN-DEPTH FACETS */

.page-facets .lf-split-fig{display:grid;grid-template-columns:minmax(0,260px) 44px minmax(0,1fr);gap:0 20px;align-items:center;margin:30px 0 0}
.page-facets .lf-split-fig figcaption{grid-column:1 / -1;margin-top:18px;max-width:58ch}
.page-facets .lf-split-trait{margin-top:12px;border-left:3px solid var(--blue-mark)}
.page-facets .lf-split-name{font:600 18px/1.25 var(--body);color:var(--ink);margin:0 0 12px}
.page-facets .lf-split-fan{height:70%;min-height:120px;border-left:1px solid var(--grey);border-top:1px solid var(--grey);border-bottom:1px solid var(--grey);
  border-radius:0 0 0 0;margin-left:20px;width:22px}
.page-facets .lf-split-six>ul{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:11px}
.page-facets .lf-split-six li{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:14px;align-items:center}
.page-facets .lf-split-fname{font:600 14px/1.3 var(--body);color:var(--ink)}
.page-facets .lf-group{margin-top:44px}
.page-facets .lf-group-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.page-facets .lf-group-head h3{font:300 26px/1.15 var(--display);letter-spacing:-.02em;color:var(--ink);margin:0}
.page-facets .lf-group-link{font:600 13.5px/1 var(--body);color:var(--cobalt);white-space:nowrap;text-decoration:none}
.page-facets .lf-group-link:hover{text-decoration:underline}
.page-facets .lf-group-line{margin-top:10px;max-width:64ch;color:var(--muted)}
.page-facets .lf-start-lede,.page-facets .lf-all-lede,.page-facets .lf-intro{max-width:66ch}
.page-facets .lf-prose p{max-width:68ch}
.page-facets .lf-kicker{margin-bottom:14px;font:600 13px/1.3 var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}

/* ================================================================ FIVE PILLARS */

.page-pillars .lp-origin{margin-top:26px;max-width:80ch}
.page-pillars .lp-gap-fig{margin:26px 0 0;max-width:640px}
.page-pillars .lp-gap-label{margin-bottom:12px}
.page-pillars .lp-gap-name{font:600 15px/1.3 var(--body);color:var(--ink);margin:0 0 18px}
.page-pillars .lp-gap-track{position:relative;height:34px;margin:0 6px}
.page-pillars .lp-gap-line{position:absolute;left:0;right:0;top:14px;height:6px;border-radius:999px;background:var(--ground-deep);box-shadow:inset 0 0 0 1px var(--line)}
.page-pillars .lp-gap-span{position:absolute;left:34%;width:38%;top:14px;height:6px;border-radius:999px;background:var(--amber-pale)}
.page-pillars .lp-gap-mark{position:absolute;top:8px;width:18px;height:18px;border-radius:50%;border:2px solid #fff}
.page-pillars .lp-gap-now{left:calc(34% - 9px);background:var(--blue-mark)}
.page-pillars .lp-gap-matters{left:calc(72% - 9px);background:var(--ink)}
.page-pillars .lp-gap-keys{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:9px}
.page-pillars .lp-gap-keys li{display:flex;align-items:center;gap:10px;font:500 13.5px/1.4 var(--body);color:var(--muted)}
.page-pillars .lp-gap-key{width:14px;height:14px;border-radius:50%;flex:none}
.page-pillars .lp-gap-key-now{background:var(--blue-mark)}
.page-pillars .lp-gap-key-matters{background:var(--ink)}
.page-pillars .lp-gap-key-span{background:var(--amber-pale);border-radius:3px;height:8px}
.page-pillars .lp-gap-fig figcaption{margin-top:16px;max-width:56ch}
.page-pillars .lp-start-lede,.page-pillars .lp-how-lede,.page-pillars .lp-all-lede{max-width:66ch}
.page-pillars .lp-prose p,.page-pillars .lp-limits{max-width:68ch}
.page-pillars .lp-sources{list-style:none;padding:0;margin:20px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.page-pillars .lp-sources .box-title{font:700 12.5px/1.3 var(--body);letter-spacing:.05em;text-transform:uppercase;color:var(--ink)}
.page-pillars .lp-sources p{margin-top:9px;max-width:none}
.page-pillars .lp-sup-text{max-width:70ch}
.page-pillars .lp-kicker{display:flex;align-items:center;gap:12px;margin-bottom:14px;font:600 13px/1.3 var(--body);
  letter-spacing:.06em;text-transform:uppercase;color:var(--lk-t)}

/* ================================================================ SELF-ESTEEM EXPLAINER */
/* Polish idea 17 (Oct 3, 2026): the top matches a pillar page's, kicker and all; the painting sits beside the first prose. */
.page-selfesteem-lib .lse-kicker{display:flex;align-items:center;gap:12px;margin-bottom:14px;font:600 13px/1.3 var(--body);
  letter-spacing:.06em;text-transform:uppercase;color:var(--lk-t)}

.page-selfesteem-lib .lse-fig{margin:28px 0 0;max-width:640px}
.page-selfesteem-lib .lse-halves{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.page-selfesteem-lib .lse-half{border-top:3px solid var(--blue-mark)}
.page-selfesteem-lib .lse-half-rev{border-top-color:var(--grey)}
.page-selfesteem-lib .lse-half .box-title{font:600 14.5px/1.35 var(--body);color:var(--ink)}
.page-selfesteem-lib .lse-count{margin:8px 0 12px;font:500 13px/1.4 var(--body);color:var(--muted)}
.page-selfesteem-lib .lse-dots{display:flex;gap:6px}
.page-selfesteem-lib .lse-dots i{width:10px;height:10px;border-radius:50%;background:var(--blue-mark)}
.page-selfesteem-lib .lse-half-rev .lse-dots i{background:var(--grey)}
.page-selfesteem-lib .lse-funnel{display:block;width:1px;height:26px;margin:0 auto;background:var(--grey)}
.page-selfesteem-lib .lse-track{padding:20px 22px;border:1px solid var(--line);border-radius:14px;background:var(--paper,#fff)}
.page-selfesteem-lib .lse-track-line{display:block;height:6px;border-radius:999px;background:var(--ground-deep);box-shadow:inset 0 0 0 1px var(--line)}
.page-selfesteem-lib .lse-ticks{display:flex;justify-content:space-between;margin-top:-3px}
.page-selfesteem-lib .lse-tick{display:flex;flex-direction:column;align-items:center;gap:6px}
.page-selfesteem-lib .lse-tick>span{width:2px;height:12px;background:var(--grey)}
.page-selfesteem-lib .lse-tick small{font:600 12.5px/1 var(--body);color:var(--muted)}
.page-selfesteem-lib .lse-track-label{margin-top:14px;font:500 13.5px/1.4 var(--body);color:var(--muted);text-align:center}
.page-selfesteem-lib .lse-fig figcaption{margin-top:16px;max-width:56ch}
.page-selfesteem-lib .lse-prose p,.page-selfesteem-lib .lse-sup-text p{max-width:68ch}
.page-selfesteem-lib .lse-scale-lede{max-width:66ch}
.page-selfesteem-lib .lse-credit{max-width:78ch}

/* ================================================================ the hub rows and the trait pages */

.page-hub .hub-lib{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;list-style:none;padding:0;margin:0}
.page-hub .hub-lib-card{display:flex;flex-direction:column;gap:6px;padding:18px 18px 16px;text-decoration:none;color:inherit;
  border:1px solid var(--line);border-radius:14px;background:#fff;transition:border-color .12s ease}
.page-hub .hub-lib-card:hover{border-color:var(--acc,var(--cobalt))}
.page-hub .hub-lib-card b{font:600 15.5px/1.25 var(--body);color:var(--ink)}
.page-hub .hub-lib-card small{font:400 13px/1.5 var(--body);color:var(--muted)}
.page-hub .hub-one-card{display:flex;flex-direction:column;gap:8px;text-decoration:none;color:inherit;border-color:var(--line)}
.page-hub .hub-one-card:hover{border-color:var(--acc,var(--cobalt))}
.page-hub .hub-one-card b{font:600 17px/1.25 var(--body);color:var(--ink)}
.page-hub .hub-one-card small{font:400 14px/1.55 var(--body);color:var(--muted);max-width:52ch}
.page-hub .hub-one-track{position:relative;display:flex;justify-content:space-between;margin-top:14px;padding-top:12px}
.page-hub .hub-one-track i{position:absolute;left:0;right:0;top:0;height:6px;border-radius:999px;background:var(--ground-deep);box-shadow:inset 0 0 0 1px var(--line)}
.page-hub .hub-one-track em{font:600 12.5px/1 var(--body);font-style:normal;color:var(--muted)}

.page-traits .tr-facets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:20px;list-style:none;padding:0}
.page-traits .tr-facet{display:flex;flex-direction:column;gap:6px;height:100%;text-decoration:none;color:inherit;transition:border-color .12s ease}
.page-traits .tr-facet:hover{border-color:var(--cobalt)}
.page-traits .tr-facet b{font:600 15px/1.25 var(--body);color:var(--ink)}
.page-traits .tr-facet small{font:400 13px/1.5 var(--body);color:var(--muted)}

/* ================================================================ narrow screens
   Everything above is two or three columns; at 390px every one of them becomes a single column, the drawings scale with the page,
   and no library page scrolls sideways. */

@media (max-width:1100px){
  .page-library .lk-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .page-library .lk-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .page-workstyles .lw-start-row,.page-sixfactor .lsf-sixth-row{grid-template-columns:minmax(0,1fr);gap:34px}
  .page-facets .lf-split-fig{grid-template-columns:minmax(0,1fr);gap:0}
  .page-facets .lf-split-fan{display:none}
  .page-facets .lf-split-six{margin-top:24px}
}

@media (max-width:860px){
  .page-library .lk-artrow{grid-template-columns:minmax(0,1fr);gap:18px}
  .page-library .lk-art{max-width:460px}
}

@media (max-width:820px){
  .page-library .lk-notes{grid-template-columns:minmax(0,1fr)}
  .page-library .lk-ends{grid-template-columns:minmax(0,1fr)}
  .page-workstyles .lw-moments{grid-template-columns:minmax(0,1fr)}
  .page-sixfactor .lsf-facets{grid-template-columns:minmax(0,1fr)}
  .page-selfesteem-lib .lse-halves{grid-template-columns:minmax(0,1fr)}
  .page-traits .tr-facets{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:640px){
  .page-library .lk-grid,.page-library .lk-grid-2,.page-library .lk-grid-3,.page-library .lk-grid-4{grid-template-columns:minmax(0,1fr);gap:14px}
  .page-library .lk-tile{padding:18px 18px 16px}
  .page-library .lk-tile.has-pic{padding-top:0}
  .page-library .lk-tile-pic{margin:0 -18px 12px}
  .page-traits .tr-facets{grid-template-columns:minmax(0,1fr)}
  .page-hub .hub-lib{grid-template-columns:minmax(0,1fr)}
  /* The six-factor map keeps its two columns, because losing them loses the point of the drawing. It narrows instead. */
  .page-sixfactor .lsf-map-row,.page-sixfactor .lsf-map-head{grid-template-columns:minmax(0,1fr) 16px minmax(0,1fr)}
  .page-sixfactor .lsf-map-cell{padding:10px;min-height:46px}
  .page-sixfactor .lsf-map-five,.page-sixfactor .lsf-map-six{font-size:13.5px}
  .page-sixfactor .lsf-map-note{font-size:11.5px}
  .page-facets .lf-split-six li{grid-template-columns:minmax(0,1fr);gap:5px}
  .page-facets .lf-group-head{flex-direction:column;align-items:flex-start;gap:6px}
  .page-workstyles .lw-scale-row{padding:14px}
  .page-pillars .lp-sources{grid-template-columns:minmax(0,1fr)}
}


/* ===== 70-story.css ===== */
/* ==========================================================================
   70-story.css · owner: story track (D77 prototype, body class page-story)
   A playable story: a card per turn, a drawn panel, four choices, an echo of what you just did, then what you did across the whole run.
   A longer story is cut into acts; the act's name rides in the card's head and each act closes on its own card.
   Shapes follow the site: 3px ink borders, hard shadows, soft corners (D71), amber for the one moment that matters.
   ========================================================================== */
.page-story .story-hero{max-width:70ch}
.page-story .crumb{font-weight:700;font-size:13.5px;margin-bottom:10px}
.page-story .story-blurb{margin-top:12px}
.page-story .story-how{margin-top:10px;color:var(--muted)}
.page-story .story-stage{margin-top:26px;max-width:860px}
.page-story .story-loading{font-weight:600;color:var(--muted)}

.page-story .story-card{background:var(--surface);border:var(--bw) solid var(--line);border-radius:var(--r);box-shadow:var(--sh);padding:24px 26px 22px;
  transition:opacity .2s ease,transform .2s ease}
.page-story .story-card.is-gone{opacity:0;transform:translateX(-34px) rotate(-1deg)}
.page-story .story-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px}
/* one pip per decision. A fifteen-turn story has to fit a phone, so the pips share the space instead of setting it. */
.page-story .story-pips{display:flex;gap:5px;flex:1 1 180px;max-width:330px}
.page-story .story-pip{flex:1 1 auto;min-width:7px;max-width:26px;height:11px;border:var(--bw-thin) solid var(--line);border-radius:3px;background:var(--surface)}
.page-story .story-pip.is-done{background:var(--cobalt)}
.page-story .story-pip.is-at{background:var(--amber)}
/* the first pip of an act carries the break, so the reader can see the shape of the story at a glance */
.page-story .story-pip.is-act{margin-left:9px;position:relative}
.page-story .story-pip.is-act::before{content:"";position:absolute;left:-6px;top:-3px;bottom:-3px;width:2px;background:var(--ink);opacity:.35}
.page-story .story-pips .story-pip.is-act:first-child{margin-left:0}
.page-story .story-pips .story-pip.is-act:first-child::before{display:none}
.page-story .story-count{font-weight:700;font-size:14px;font-variant-numeric:tabular-nums}
.page-story .story-act{font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;border:var(--bw-thin) solid var(--line);border-radius:999px;background:var(--amber);padding:4px 11px}
.page-story .story-tools{margin-left:auto;display:flex;gap:8px;align-items:center}
.page-story .story-back,.page-story .story-aloud{font-weight:700;font-size:13.5px;border:var(--bw-thin) solid var(--line);border-radius:var(--r-sm);background:var(--surface);color:var(--ink);padding:7px 10px;cursor:pointer}
.page-story .story-back:hover,.page-story .story-aloud:hover{background:var(--ground-deep)}
/* read aloud: the browser's own voice (app/speak.js). The icon is drawn, so nothing is loaded for it. */
.page-story .story-aloud{display:inline-flex;align-items:center;gap:7px}
.page-story .story-aloud.is-on{background:var(--amber)}
.page-story .story-aloud-icon{flex:none;width:13px;height:13px;background:currentColor;
  clip-path:polygon(0 35%,28% 35%,55% 8%,55% 92%,28% 65%,0 65%)}
.page-story .story-aloud.is-on .story-aloud-icon{animation:story-speaking 1.1s ease-in-out infinite}
@keyframes story-speaking{0%,100%{opacity:1}50%{opacity:.45}}
/* the line being read right now */
.page-story .is-reading{background:var(--amber);box-shadow:0 0 0 5px var(--amber);border-radius:2px}
.page-story li.is-reading,.page-story .story-opts li.is-reading{box-shadow:none;background:transparent}
.page-story li.is-reading .story-opt{background:var(--amber)}
@media (prefers-reduced-motion:reduce){ .page-story .story-aloud.is-on .story-aloud-icon{animation:none} }
.page-story .story-open{font-size:var(--fs-lede);line-height:1.5;font-weight:500;max-width:62ch;margin-bottom:14px;color:var(--muted)}
.page-story .story-scene{font-size:17.5px;line-height:1.55;font-weight:500;max-width:62ch}
/* the drawn panel for this turn. It is decorative: everything it shows is in the words under it. */
/* ---------------------------------------------- the people in the house, and where you stand with each of them
   The standing moves when you choose, and the one that just moved is marked, so a choice can be watched landing on somebody. */
.page-story .story-cast{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.page-story .story-person{display:flex;flex-direction:column;gap:1px;border:var(--bw-thin) solid var(--line);border-radius:var(--r-sm);
  padding:6px 11px;background:var(--surface);min-width:78px;position:relative}
.page-story .story-person b{font-weight:700;font-size:13.5px;line-height:1.2}
.page-story .story-person span{font-weight:600;font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.page-story .story-person.is-close{background:var(--amber)}
.page-story .story-person.is-warm{background:var(--ground-deep)}
.page-story .story-person.is-wary{opacity:.75}
.page-story .story-person.is-cold{background:var(--ink);color:var(--ground)}
.page-story .story-person.is-cold b,.page-story .story-person.is-cold span{color:var(--ground)}
.page-story .story-person.is-close span,.page-story .story-person.is-warm span{color:var(--ink)}
/* the arrow only appears on whoever just moved */
.page-story .story-person.is-up::after,.page-story .story-person.is-down::after{position:absolute;top:-9px;right:-7px;
  width:19px;height:19px;display:grid;place-items:center;border:var(--bw-thin) solid var(--line);border-radius:50%;
  font-size:11px;font-weight:700;background:var(--surface);color:var(--ink)}
.page-story .story-person.is-up::after{content:"\2191";background:var(--sage)}
.page-story .story-person.is-down::after{content:"\2193";background:var(--red);color:var(--on-ink)}

/* ---------------------------------------------- dialogue
   Most of a scene is people talking, so the lines carry the weight, not the narration. */
.page-story .story-beat{display:grid;gap:9px;margin:14px 0 4px;max-width:60ch}
.page-story .story-line{font-size:17px;line-height:1.45;font-weight:500;padding-left:13px;border-left:3px solid var(--rule-soft)}
.page-story .story-who{display:block;font-family:var(--heading);font-weight:700;font-size:11.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);margin-bottom:1px}
.page-story .story-line.is-you{border-left-color:var(--cobalt)}
.page-story .story-line.is-you .story-who{color:var(--cobalt)}

/* the panels are drawn with their own frame and paper margin, so the card adds none of its own */
.page-story .story-panel-art{margin:0 0 16px;border-radius:var(--r-sm);overflow:hidden;background:var(--ground)}
.page-story .story-panel-art img{width:100%;height:100%;object-fit:cover;display:block}
.page-story .story-panel-art.art-fallback{background:var(--ground-deep)}
.page-story .story-ask{font-family:var(--heading);font-weight:700;font-size:clamp(20px,2.2vw,25px);line-height:1.25;margin:14px 0 14px;max-width:34ch}
.page-story .story-opts{list-style:none;display:grid;gap:9px}
.page-story .story-opt{display:flex;gap:11px;align-items:flex-start;width:100%;text-align:left;font-weight:600;font-size:16px;line-height:1.35;
  background:var(--surface);border:var(--bw-thin) solid var(--line);border-radius:var(--r-sm);padding:12px 14px;cursor:pointer;transition:transform .08s ease,background .12s ease}
.page-story .story-opt:hover:not([disabled]){background:var(--ground-deep)}
.page-story .story-opt:active:not([disabled]){transform:translate(2px,2px)}
.page-story .story-opt[disabled]{opacity:.5;cursor:default}
.page-story .story-opt.is-picked{opacity:1;background:var(--cobalt);color:var(--on-ink);border-color:var(--ink);box-shadow:var(--sh-xs)}
.page-story .story-opt.is-picked .story-key{background:var(--ground);color:var(--ink)}
.page-story .story-key{flex:none;display:grid;place-items:center;width:22px;height:22px;border:var(--bw-thin) solid var(--line);border-radius:5px;font-weight:700;font-size:12px;background:var(--ground-deep);margin-top:1px}
.page-story .story-hint{margin-top:12px;font-weight:600;font-size:13px;color:var(--muted)}
.page-story .story-echo{margin-top:14px;background:var(--ink);color:var(--ground);border-radius:var(--r);box-shadow:var(--sh-attn);padding:13px 16px;font-weight:600;font-size:16px;line-height:1.4}

/* between two acts: what the reader's own run of choices did to this part of the story */
.page-story .story-between{background:var(--ink);color:var(--ground);border-color:var(--ink)}
.page-story .story-between .story-count{color:var(--ground)}
.page-story .story-between .story-act-title{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:-.02em;
  font-size:clamp(26px,3.4vw,38px);line-height:1.02;margin:6px 0 12px}
.page-story .story-between .story-scene{color:var(--ground);max-width:58ch}
.page-story .story-between .story-pip{border-color:var(--ground)}
.page-story .story-between .story-pip:not(.is-done):not(.is-at){background:transparent}
.page-story .story-between .story-pip.is-act::before{background:var(--ground)}
.page-story .story-next-label{margin-top:22px;font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--amber)}
/* the card is already the structure here, so its button sits flat on it (D64: no ink shadow on an ink ground) */
.page-story .story-between .btn{box-shadow:none}
.page-story .story-between .btn:hover{box-shadow:none}

.page-story .story-end .story-scene{max-width:60ch}
.page-story .story-panel{margin-top:20px}
.page-story .story-panel .moment-text{font-weight:700;font-size:18px;line-height:1.45;margin-top:8px;max-width:58ch}
.page-story .story-counts{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.page-story .story-counts li{font-weight:600;font-size:13.5px;border:var(--bw-thin) solid var(--line);border-radius:var(--r-sm);background:var(--ground-deep);padding:7px 10px}
.page-story .story-counts b{font-weight:700}
/* the one honest line, at the foot, once (D59 and Wayne, Sep 19: no hedging inside an interpretation) */
.page-story .story-carry{margin-top:18px;padding-top:14px;border-top:2px solid var(--rule-soft);font-weight:600;font-size:13.5px;color:var(--muted);max-width:70ch}
.page-story .story-actions{margin-top:18px;gap:10px}
.page-story .story-error{font-weight:700;color:var(--red)}

/* --------------------------------------------------------------- /story/ : pick one */
.page-story-index .story-list{margin-top:26px}
.page-story .story-card-link{display:flex;flex-direction:column;padding:0;overflow:hidden;text-decoration:none;color:inherit;transition:transform .1s ease,box-shadow .1s ease}
.page-story .story-card-link:hover{transform:translateY(-4px)}
.page-story .story-card-art{margin:0;border-bottom:var(--bw) solid var(--line);border-radius:0}
.page-story .story-card-art img{width:100%;height:100%;object-fit:cover;display:block}
.page-story .story-card-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.page-story .story-card-meta{font-weight:700;font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.page-story .story-card-title{font-size:clamp(22px,2.4vw,27px);line-height:1.1}
.page-story .story-card-blurb{font-weight:500;font-size:16px;line-height:1.45}
.page-story .story-card-link .link-more{margin-top:auto;padding-top:4px}

@media (max-width:720px){
  .page-story .story-card{padding:18px 16px 16px}
  .page-story .story-opt{font-size:15.5px}
  .page-story .story-head{gap:10px}
  .page-story .story-pips{flex-basis:130px}
}


/* ===== 99-review.css ===== */
/* ==========================================================================
   99-review.css · owner: review tools
   Review mode only (app/flags.js review: true). Nothing here renders once review is off.
   - The pink FOR REVIEW tags (reviewMark() in app/ui.js) and the banner (src/site/layout.mjs), moved here from 05-components.css.
   - The /review/ page: entries, feedback, the Comments on pages list, and settled (resolved or parked) items (src/pages/review.mjs).
   - The Comment button, its pins, popover, and list on every page (app/review-comments.js).
   Every selector names a .review- class, which is what lets check.mjs allow the review pink here. The loud pink is deliberate: it's
   the mockup annotation color, so it can't be mistaken for part of the design.

   EDITORIAL (D88, Sep 22, 2026): the chrome here was built in the bold-vector system - 2 and 3px ink borders, hard offset
   shadows, a translate(2px,2px) press. It now speaks the editorial vocabulary: hairlines, the soft --sh shadows, radii 14 / 10 / 5.
   The pink stays, and it is what keeps review furniture unmistakable at a glance: check.mjs fails #e0287c anywhere outside these
   rules, so nothing shipped can wear it. Amber carries the attention states (a note, a verdict that needs a change).
   ========================================================================== */

/* ---------------------------------------------------------------- tags, banner, /review/ entries and feedback (moved unchanged from 05-components.css) */
/* The banner scrolls away with the page (Sep 26, 2026). It used to stick to the top of the screen, where the site's own bar sticks
   too, so once a page scrolled it sat over the bar's top 32px (50px on a phone, where it takes two lines): it cut into the wordmark
   and hid the phone menu's button. The bar now behaves in review mode exactly as it will at launch. */
.review-banner{position:relative;z-index:60;background:#e0287c;color:#fff;font:700 13.5px/1.35 var(--body);padding:7px 16px;text-align:center}
.review-banner a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.review-mark{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;margin:12px 0;padding:8px 12px;border:1px dashed #e0287c;border-radius:var(--r-sm);background:#fff0f6;color:#5c0a31;font:600 14px/1.4 var(--body);text-align:left;text-transform:none;letter-spacing:0;max-width:100%}
.review-mark-tag{flex:none;background:#e0287c;color:#fff;font-weight:800;font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;border-radius:5px}
.review-mark-text{flex:1 1 16em;min-width:0}
.review-mark-link{flex:none;color:#b0165f;font-weight:700;text-decoration:underline}
.review-mark:target{outline:2px solid #e0287c;outline-offset:3px}
.review-list .review-mark{margin:6px 0 0}
.review-stack{margin:12px 0}.review-stack .review-mark{margin:6px 0}
.review-item{padding:16px 18px}
.review-item-head{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.review-status{display:inline-flex;align-items:center;gap:6px;font:700 13px/1 var(--body);color:#5c0a31}
.review-box{width:14px;height:14px;border:1px solid #e0287c;border-radius:4px;background:#fff}
.review-kind{font:600 12px/1.2 var(--body);text-transform:uppercase;letter-spacing:.06em;color:#b0165f}
.review-howto{padding:18px 20px;border:1px dashed #e0287c;border-radius:var(--r)}
.review-howto ol{padding-left:1.3em}.review-howto li{margin:4px 0}
.review-toc{display:flex;flex-wrap:wrap;gap:6px 18px;padding:0;list-style:none}
.review-fb{border-top:1px dashed #e0287c;padding-top:12px}
.review-fb-choices{display:flex;flex-wrap:wrap;gap:8px}
.review-fb-btn{font:700 14px/1 var(--body);padding:9px 14px;border:1px solid #e0287c;border-radius:var(--r-btn);background:#fff;color:#5c0a31;cursor:pointer;min-height:40px}
.review-fb-btn[aria-pressed="true"]{background:#e0287c;color:#fff}
.review-fb-btn:focus-visible,.review-fb-text:focus-visible{outline:2px solid var(--blue-mark);outline-offset:3px}
.review-fb-label{display:block;margin-top:10px;font:700 13px/1.3 var(--body);color:#5c0a31}
.review-fb-text{display:block;width:100%;margin-top:4px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-sm);font:500 15px/1.45 var(--body);background:#fff;color:var(--ink);resize:vertical}
.review-fb-saved{display:block;min-height:1.2em;margin-top:4px;color:#b0165f}
.review-fb-panel{padding:18px 20px;border:1px dashed #e0287c;border-radius:var(--r)}
.review-item.has-feedback{border-color:#e0287c}
.review-item.has-feedback .review-box{background:#e0287c}
.review-rec{border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;padding:10px 12px}
.review-rec-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.review-rec-tag{background:var(--ink);color:#fff;font:800 11px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;padding:4px 7px;border-radius:5px}
.review-rec-verdict{font:800 14px/1.2 var(--body)}
.review-rec-verdict.is-approve{color:#2f6b4a}.review-rec-verdict.is-change{color:#9a5a10}.review-rec-verdict.is-remove{color:#a3122f}.review-rec-verdict.is-wayne{color:var(--cobalt)}
.review-rec-meta{font:600 12px/1.2 var(--body);color:#555;text-transform:uppercase;letter-spacing:.04em}
.review-rec-action{margin-top:6px;font:600 15px/1.45 var(--body)}
.review-rec-why{margin-top:4px}
.review-rec-missing{color:#777}
.review-fb-agree{border-color:var(--ink)}.review-fb-agree[aria-pressed="true"]{background:var(--ink);color:#fff}
.review-filter{display:flex;flex-wrap:wrap;gap:8px}

/* A jump to a tag (#fr-<id>) or an entry (#<id>) stops below the site's sticky bar by the page's one rule (00-base.css). Until
   Sep 27, 2026 a rule here added the bar to it. */

/* ---------------------------------------------------------------- the Comment tools: shared colors */
.review-cmt,.review-cmt-index,.review-closed-group{--rv-pink:#e0287c;--rv-pink-deep:#b0165f;--rv-pink-ink:#5c0a31;--rv-pink-wash:#fff0f6;--rv-z:2147482000}
.review-cmt{font-family:var(--body);text-align:left;text-transform:none;letter-spacing:0}

/* ---------------------------------------------------------------- pins and the outline around the spot being discussed
   The layer sits at the page's top left, so pins use page coordinates and scroll with the page. */
.review-cmt-layer{position:absolute;left:0;top:0;width:0;height:0;z-index:var(--rv-z)}
/* A pin's sharp bottom-left corner is the exact spot that was clicked. The white halo keeps it readable on dark text and fills. */
.review-cmt-pin{position:absolute;display:grid;place-items:center;min-width:30px;height:30px;padding:0 8px;transform:translateY(-100%);
  background:var(--rv-pink);color:#fff;border:0;border-radius:15px 15px 15px 0;box-shadow:0 0 0 2px #fff,var(--sh-sm);
  font:800 14px/1 var(--body);cursor:pointer}
.review-cmt-pin:hover{background:var(--rv-pink-deep)}
.review-cmt-pin.is-active{background:var(--rv-pink-deep);outline:2px solid var(--ink);outline-offset:3px}
.review-cmt-pin.is-resolved{background:#fff;color:var(--rv-pink-deep);border:1px dashed var(--rv-pink)}
.review-cmt-pin.is-resolved.is-active{background:var(--rv-pink-wash)}
.review-cmt-target{position:absolute;pointer-events:none;outline:2px dashed var(--rv-pink);outline-offset:4px;border-radius:5px}
@media (prefers-reduced-motion:no-preference){
  .review-cmt-pin.is-new,.review-cmt-pin.is-flash{animation:review-cmt-bump .5s ease-out 3}
}
@keyframes review-cmt-bump{50%{transform:translateY(-100%) scale(1.3)}}

/* ---------------------------------------------------------------- picking a spot */
.review-cmt-hover{position:fixed;z-index:calc(var(--rv-z) + 100);pointer-events:none;outline:2px solid var(--rv-pink);outline-offset:1px;background:rgba(224,40,124,.07);border-radius:5px}
.review-cmt-hover-label{position:absolute;left:-3px;bottom:100%;margin-bottom:5px;padding:4px 7px;border-radius:5px;background:var(--rv-pink);color:#fff;font:700 12px/1 var(--body);white-space:nowrap}
.review-cmt-hover.is-low .review-cmt-hover-label{bottom:auto;top:4px;left:4px;margin:0}
html.review-cmt-picking,html.review-cmt-picking body *{cursor:crosshair!important}
html.review-cmt-picking .review-cmt button,html.review-cmt-picking .review-cmt label{cursor:pointer!important}
.review-cmt-pickbar{position:fixed;z-index:calc(var(--rv-z) + 600);right:18px;bottom:84px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;
  max-width:min(620px,calc(100vw - 36px));padding:10px 12px 10px 16px;background:var(--rv-pink-wash);border:1px solid var(--rv-pink);border-radius:var(--r);box-shadow:var(--sh);
  color:var(--rv-pink-ink);font:600 14px/1.35 var(--body)}
.review-cmt-pickbar-text{margin:0}
.review-cmt-pickbar .review-cmt-row{margin:0}

/* ---------------------------------------------------------------- the dock: Comments list and Comment */
.review-cmt-dock{position:fixed;z-index:calc(var(--rv-z) + 600);right:18px;bottom:18px;display:flex;flex-direction:column;align-items:flex-end;gap:8px;pointer-events:none}
.review-cmt-dock>*{pointer-events:auto}
.review-cmt-dock-row{display:flex;gap:10px;align-items:stretch}
.review-cmt-fab,.review-cmt-listbtn{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 16px;border:1px solid var(--rv-pink);border-radius:var(--r-btn);
  box-shadow:var(--sh);font:700 15px/1 var(--body);cursor:pointer}
.review-cmt-fab{background:var(--rv-pink);color:#fff}
.review-cmt-fab:hover{background:var(--rv-pink-deep)}
.review-cmt-fab[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.review-cmt-listbtn{background:#fff;color:var(--rv-pink-ink)}
.review-cmt-listbtn:hover,.review-cmt-listbtn[aria-expanded="true"]{background:var(--rv-pink-wash)}
.review-cmt-fab:active,.review-cmt-listbtn:active{transform:translateY(1px);box-shadow:var(--sh-sm)}
.review-cmt-icon{width:18px;height:18px;flex:none}
.review-cmt-count{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 6px;border-radius:12px;background:var(--rv-pink);color:#fff;font:800 13px/1 var(--body)}
.review-cmt-toast{max-width:min(380px,calc(100vw - 36px));margin:0;padding:6px 10px;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--sh-sm);color:var(--ink);font:600 13px/1.35 var(--body)}
.review-cmt-toast:empty{padding:0;border:0;box-shadow:none}
.review-cmt-toast.is-project{background:var(--sage-wash)}
.review-cmt-toast.is-local,.review-cmt-toast.is-error,.review-cmt-toast.is-blocked{background:var(--amber-wash)}

/* ---------------------------------------------------------------- the popover: a new comment, or one to read, edit, resolve, or delete */
.review-cmt-pop{position:absolute;z-index:calc(var(--rv-z) + 500);width:min(360px,calc(100vw - 24px));padding:10px 14px 14px;background:#fff;
  border:1px solid var(--line);border-top:3px solid var(--rv-pink);border-radius:var(--r);box-shadow:var(--sh);color:var(--ink);font:500 15px/1.45 var(--body)}
.review-cmt-pop-head{display:flex;align-items:center;gap:8px;min-height:34px;margin-bottom:6px}
.review-cmt-pop-tag{padding:4px 7px;border-radius:5px;background:var(--rv-pink);color:#fff;font:800 11px/1 var(--body);letter-spacing:.08em;text-transform:uppercase}
.review-cmt-state{font:700 12px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--rv-pink-deep)}
.review-cmt-state.is-resolved{color:var(--sage-deep)}
.review-cmt-x{display:grid;place-items:center;flex:none;width:34px;height:34px;margin-left:auto;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;color:var(--ink);font:700 22px/1 var(--body);cursor:pointer}
.review-cmt-x:hover{background:var(--rv-pink-wash)}
.review-cmt-where{margin:0 0 6px;color:var(--muted);font:600 13px/1.4 var(--body);overflow-wrap:anywhere}
.review-cmt-where q{color:var(--ink)}
.review-cmt-label{display:block;margin-top:6px;color:var(--rv-pink-ink);font:700 13px/1.3 var(--body)}
.review-cmt-text{display:block;width:100%;min-height:92px;margin-top:4px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;color:var(--ink);font:500 15px/1.45 var(--body);resize:vertical}
.review-cmt-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.review-cmt-btn{display:inline-flex;align-items:center;min-height:40px;padding:0 13px;border:1px solid var(--line);border-radius:var(--r-btn);background:#fff;color:var(--ink);font:700 14px/1 var(--body);cursor:pointer}
.review-cmt-btn:hover{border-color:var(--rv-pink);box-shadow:var(--sh-sm)}
.review-cmt-btn.is-primary{background:var(--rv-pink);color:#fff;border-color:var(--rv-pink)}
.review-cmt-btn.is-danger{background:#a3122f;color:#fff;border-color:#a3122f}
.review-cmt-hint{margin:8px 0 0;color:var(--muted);font:600 12px/1.3 var(--body)}
.review-cmt-error{margin:4px 0 0;color:#a3122f;font:700 13px/1.3 var(--body)}
.review-cmt-error:empty{margin:0}
.review-cmt-body{margin:6px 0 0;white-space:pre-wrap;overflow-wrap:anywhere}
.review-cmt-meta{margin:6px 0 0;color:var(--muted);font:600 12.5px/1.3 var(--body)}
.review-cmt-note{margin:8px 0 0;padding:6px 8px;border-radius:var(--r-sm);background:var(--amber-wash);color:var(--amber-text);font:600 13px/1.35 var(--body)}
.review-cmt-confirm{margin:10px 0 0;color:#a3122f;font:700 14px/1.35 var(--body)}

/* ---------------------------------------------------------------- this page's comments, sliding in from the right */
.review-cmt-panel{position:fixed;z-index:calc(var(--rv-z) + 700);top:0;right:0;bottom:0;display:flex;flex-direction:column;gap:12px;width:min(420px,100vw);padding:16px 18px 22px;
  overflow-y:auto;overscroll-behavior:contain;background:var(--rv-pink-wash);border-left:1px solid var(--rv-pink);box-shadow:-14px 0 44px rgba(13,20,32,.12);color:var(--ink);font:500 15px/1.45 var(--body)}
.review-cmt-panel-head{display:flex;align-items:center;gap:10px}
.review-cmt-panel-title{margin:0;font:400 21px/1.1 var(--display);letter-spacing:-.01em}
.review-cmt-panel-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.review-cmt-check{display:inline-flex;align-items:center;gap:7px;font:600 14px/1.2 var(--body);cursor:pointer}
.review-cmt-check input{width:18px;height:18px;margin:0;accent-color:#e0287c}
.review-cmt-sync{margin:0;color:var(--muted);font:600 13px/1.35 var(--body)}
.review-cmt-list{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.review-cmt-item{padding:10px 12px 12px;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--sh-xs)}
.review-cmt-item.is-resolved{background:var(--quiet-bg);border-style:dashed;box-shadow:none}
.review-cmt-item-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-bottom:4px}
.review-cmt-item .review-cmt-meta{margin:0 0 0 auto}
.review-cmt-num{display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 6px;border:0;border-radius:13px 13px 13px 0;background:var(--rv-pink);color:#fff;font:800 12px/1 var(--body)}
.review-cmt-item.is-resolved .review-cmt-num{background:#fff;color:var(--rv-pink-deep);border:1px dashed var(--rv-pink)}
.review-cmt-link{display:inline-block;margin-top:8px;padding:0;border:0;background:none;color:var(--rv-pink-deep);font:700 14px/1.3 var(--body);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.review-cmt-empty{margin:0;color:var(--muted);font:600 14px/1.4 var(--body)}
.review-cmt-all{margin-top:auto;padding-top:8px;color:var(--rv-pink-deep);font:700 14px/1.3 var(--body)}

/* ---------------------------------------------------------------- /review/: comments on every page, grouped by page */
.review-cmt-index .review-cmt-check{margin-top:12px}
.review-cmt-index-list:empty{display:none}
.review-cmt-group+.review-cmt-group{margin-top:24px}
.review-cmt-group-title{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;font-size:17px}
.review-cmt-group-title small{font:600 14px/1 var(--body)}
.review-cmt-group-path{color:var(--rv-pink-deep);font:600 13px/1.3 var(--body);letter-spacing:0;text-transform:none}
.review-cmt-index .review-cmt-list{grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));margin-top:10px}
.review-sync-line{color:var(--muted)}
.review-sync-line:empty{display:none}

/* ---------------------------------------------------------------- /review/: settled items, collapsed at the bottom */
.review-item.is-closed,.review-item.is-closed.has-feedback{padding:0;background:var(--quiet-bg);border-style:dashed;border-color:var(--grey);box-shadow:none}
.review-closed-summary{display:grid;gap:6px;padding:14px 18px;cursor:pointer;list-style:none}
.review-closed-summary::-webkit-details-marker{display:none}
.review-closed-summary:focus-visible{outline-offset:-5px;box-shadow:none}
.review-closed-title{margin:0;font-size:16px}
.review-resolution{display:block;max-width:95ch;color:var(--ink);font:500 15px/1.45 var(--body)}
.review-resolution.is-missing{color:var(--muted)}
.review-closed-more::after{content:"Show the full entry";color:#b0165f;font:700 13px/1.2 var(--body);text-decoration:underline}
.review-closed[open] .review-closed-more::after{content:"Hide the full entry"}
.review-closed-body{padding:0 18px 16px}
.review-item.is-closed .review-box{background:var(--sage);border-color:var(--sage-deep)}
.review-item.is-closed .review-status{color:var(--sage-deep)}

@media print{
  .review-cmt{display:none}
}

@media (max-width:720px){
  .review-cmt-dock{right:10px;bottom:10px}
  .review-cmt-dock-row{gap:8px}
  .review-cmt-fab,.review-cmt-listbtn{min-height:44px;padding:0 12px;font-size:14px}
  .review-cmt-pickbar{left:10px;right:10px;bottom:68px;max-width:none}
  .review-cmt-panel{width:100vw;border-left:0}
  .review-closed-summary{padding:12px 14px}
  .review-closed-body{padding:0 14px 14px}
}

/* Round 1 fix pass: the dock covered content (a library card, the phone headline, a pillars row). It now sits smaller and flush in the
   corner, the page gets room at the bottom so anything under it can scroll clear, and on a phone the Comment button is an icon. */
.review-cmt-dock{right:8px;bottom:8px}
.review-cmt-fab,.review-cmt-listbtn{min-height:38px;padding:0 11px;font-size:14px}
body:has(.review-cmt){padding-bottom:64px}
@media (max-width:600px){
  .review-cmt-fab>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .review-cmt-fab,.review-cmt-listbtn{min-height:36px;padding:0 9px}
}