/* ==========================================================================
   Scorecard v2 (pab1) in the site's own style. 17 Oct 2026, Nell Ashby.
   HAND-OWNED. Not generated: build_pab1.py no longer writes the live styles.

   The runner (/scorecard/) and the pab1 results portal (/portal/) render
   inside the theme (get_header / get_footer), so main.css already supplies
   the tokens, type, header, footer and the .btn family. This file only lays
   out the Scorecard's own parts, scoped under .pab so nothing leaks.

   Reference: the live /scorecard/ hero (navy band, white card, Cormorant 500
   headings, letter-spaced eyebrows) for the start and question screens, and
   the client portal's white bordered cards for results and the portal.
   ========================================================================== */

.pab {
	--sage-d: #5F7A56;
	--sagebg: #EEF3EC;
	--hom: #D6B28A;
	--ceil: #B0563E;          /* the client portal's own "ceiling" colour */
	--line: #E3DFD2;
	--line-d: rgba(235, 231, 218, 0.16);
	--ink-rgb: 46, 47, 51;
	--ease: cubic-bezier(0.23, 1, 0.32, 1);
	--card-shadow: 0 1px 2px rgba(46, 47, 51, 0.04), 0 14px 32px -20px rgba(46, 47, 51, 0.22);
	--band-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.45), 0 12px 24px -16px rgba(0, 0, 0, 0.25);
	--hdr: 96px;              /* sticky site header plus breathing room */
	color: var(--charcoal);
	font-size: 1rem;
	line-height: 1.6;
	overflow-x: clip;
}
.pab *, .pab *::before, .pab *::after { box-sizing: border-box; }
.pab button:not(.btn) { font: inherit; color: inherit; }
.pab :focus-visible { outline: 2px solid var(--sage-d); outline-offset: 3px; }
.pab [tabindex="-1"]:focus, .pab [tabindex="-1"]:focus-visible { outline: none; }
.pab p { margin: 0 0 1rem; }
.pab .wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
@media (min-width: 768px) { .pab .wrap { padding: 0 var(--gutter-lg); } }
.pab .scr[hidden] { display: none !important; }
.pab .hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.pvw { margin: 0; padding: 10px 20px; background: #E9C46A; color: var(--charcoal); font: 600 13px/1.4 var(--font-sans); text-align: center; }

/* Eyebrow, as .eyebrow in main.css */
.pab .gate__k, .pab .rev__k, .pab .res__k, .pab .pick__hint-k {
	display: block;
	font: 700 0.625rem/1.4 var(--font-sans);
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: rgba(64, 72, 75, 0.55);
	margin: 0 0 1rem;
}

/* Buttons: main.css owns the look. Only size them here. */
.pab .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; text-align: center; line-height: 1.3; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: border-color 0.3s ease, transform 140ms var(--ease); }
.pab .btn[data-pressed="true"] { transform: scale(0.97); }
.pab .cta-pair { gap: 1rem; }
@media (max-width: 600px) { .pab .cta-pair { flex-direction: column; align-items: stretch; } .pab .cta-pair .btn { width: 100%; } }

/* ---------- the navy band: start + questions (as the live /scorecard/ hero) ---------- */
.pab #s-start, .pab #s-q {
	background: var(--navy);
	color: var(--sand);
	min-height: calc(100dvh - 82px);
}
.pab #s-start h1 { color: var(--white); }

/* ---------- start ---------- */
.pab .start { padding-block: 2.5rem 4rem; }
.pab .start__g { display: grid; gap: 2.25rem; }
@media (max-width: 959px) {
	.pab .start__intro-col { display: contents; }
	.pab .start h1, .pab .start__intro { margin-bottom: 0; }
	.pab .start__g { gap: 1.25rem; }
	.pab .stages-wrap { order: 2; margin-top: 1.75rem; }
}
@media (min-width: 960px) {
	.pab .start { padding-block: 6rem; }
	.pab .start__g { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 4.5rem; align-items: start; }
}
.pab .start h1 { font: 500 clamp(2.6rem, 6vw, 4.25rem)/1.05 var(--font-serif); margin: 0 0 1.5rem; text-wrap: balance; }
.pab .start__intro { font-size: 1.125rem; line-height: 1.7; font-weight: 300; color: rgba(235, 231, 218, 0.82); margin: 0 0 2rem; max-width: 32em; }
.pab .stages { grid-template-columns: 1fr; list-style: none; margin: 0; padding: 1.25rem 0 0; border-top: 1px solid var(--line-d); display: grid; gap: 0.7rem; }
.pab .stages li { display: grid; grid-template-columns: 12px 112px 1fr; gap: 12px; align-items: baseline; font-size: 0.95rem; }
.pab .stages b { font: 500 1.3rem/1 var(--font-serif); color: var(--white); }
.pab .stages span:last-child { color: rgba(235, 231, 218, 0.7); }
.pab .sw { width: 10px; height: 10px; border-radius: 2px; display: inline-block; transform: translateY(1px); }
.pab .sw--hom { background: var(--hom); }
.pab .sw--both { background: var(--sage); }
.pab .sw--olv { background: var(--navy); box-shadow: inset 0 0 0 1.5px rgba(235, 231, 218, 0.8); }
.pab .stages .sw--olv { background: var(--sand); box-shadow: none; }
.pab .stages__cap { font-size: 0.8rem; color: rgba(235, 231, 218, 0.55); margin: 1rem 0 0; }

/* the white card, as the live Scorecard's start card */
.pab .pick { background: var(--white); color: var(--charcoal); border-radius: var(--radius); padding: 1.75rem 1.25rem 1.75rem; box-shadow: var(--band-shadow); }
@media (min-width: 600px) { .pab .pick { padding: 2.5rem 2.5rem 2.25rem; } }
.pab .pick__q { font: 500 1.75rem/1.15 var(--font-serif); color: var(--navy); margin: 0 0 0.25rem; }
.pab .pick__hint { font-size: 0.9rem; color: rgba(var(--ink-rgb), 0.62); margin: 0 0 1.25rem; }
.pab .chips { display: grid; gap: 0.6rem; margin: 0 0 1.25rem; }
.pab .chip {
	display: grid; grid-template-columns: 1fr 28px; align-items: center; gap: 14px;
	width: 100%; min-height: 76px; padding: 14px 18px; text-align: left;
	background: var(--white); border: 1px solid var(--line); border-radius: 4px; cursor: pointer;
	touch-action: manipulation; -webkit-tap-highlight-color: transparent;
	transition: background-color 180ms var(--ease), border-color 180ms var(--ease), box-shadow 180ms var(--ease), transform 140ms var(--ease);
}
.pab .chip b { display: block; font: 500 1.35rem/1.15 var(--font-serif); color: var(--navy); }
.pab .chip small { display: block; font-size: 0.85rem; color: rgba(var(--ink-rgb), 0.62); margin-top: 3px; }
.pab .chip__box { width: 28px; height: 28px; border: 1.5px solid rgba(64, 73, 74, 0.35); border-radius: 3px; display: grid; place-items: center; transition: background-color 160ms var(--ease), border-color 160ms var(--ease); }
.pab .chip__box svg { width: 16px; height: 16px; opacity: 0; transform: scale(0.6); transition: opacity 140ms var(--ease), transform 180ms var(--ease); }
.pab .chip[aria-pressed="true"] { background: var(--sagebg); border-color: var(--sage); }
.pab .chip[aria-pressed="true"] .chip__box { background: var(--navy); border-color: var(--navy); }
.pab .chip[aria-pressed="true"] .chip__box svg { opacity: 1; transform: none; }
.pab .chip[data-pressed="true"] { transform: scale(0.985); }
@media (hover: hover) and (pointer: fine) {
	.pab .chip:hover { border-color: rgba(64, 73, 74, 0.4); box-shadow: 0 6px 16px -10px rgba(46, 47, 51, 0.25); }
}
.pab .count { display: flex; align-items: center; gap: 10px; min-height: 28px; margin: 0 0 1.25rem; font-size: 0.9rem; font-weight: 500; color: var(--navy); }
.pab .count__n { font-variant-numeric: tabular-nums; }
.pab .count.is-empty { color: rgba(var(--ink-rgb), 0.55); font-weight: 400; }
.pab .count.is-warn { color: var(--ceil); }
.pab .pick .btn { width: 100%; min-height: 60px; }
.pab .privacy { font-size: 0.8rem; line-height: 1.6; color: rgba(var(--ink-rgb), 0.6); margin: 1.25rem 0 0; }

/* ---------- questions ---------- */
.pab .qs { padding-block: 1.5rem 4rem; }
@media (min-width: 960px) { .pab .qs { padding-block: 3.5rem 6rem; } }
.pab .prog { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: 0 0 6px; }
.pab .prog__s { min-width: 0; }
.pab .prog__bar { height: 3px; border-radius: 2px; background: rgba(235, 231, 218, 0.16); overflow: hidden; }
.pab .prog__fill { height: 100%; background: var(--sage); transform-origin: 0 50%; transform: scaleX(0); transition: transform 320ms var(--ease); }
.pab .prog__t { display: block; margin-top: 8px; font: 700 0.6rem/1.2 var(--font-sans); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(235, 231, 218, 0.45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pab .prog__s.is-cur .prog__t { color: var(--white); }
.pab .prog__s.is-done .prog__t { color: rgba(235, 231, 218, 0.72); }
@media (min-width: 600px) { .pab .prog { gap: 10px; } .pab .prog__t { font-size: 0.65rem; } }

.pab .qs__g { display: grid; gap: 1.25rem; margin-top: 1.5rem; }
@media (min-width: 960px) { .pab .qs__g { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 4.5rem; margin-top: 3.5rem; } }
.pab .ctx { display: none; }
@media (min-width: 960px) { .pab .ctx { display: block; position: sticky; top: var(--hdr); align-self: start; padding-top: 1.5rem; } }
.pab .ctx__st { font: 500 3.5rem/1 var(--font-serif); color: var(--white); margin: 0 0 0.75rem; }
.pab .ctx__plain { font-size: 1.1rem; font-weight: 300; margin: 0 0 1.5rem; color: rgba(235, 231, 218, 0.82); }
.pab .ctx__who { display: flex; align-items: center; gap: 10px; font-size: 0.85rem; color: rgba(235, 231, 218, 0.7); padding-top: 1rem; border-top: 1px solid var(--line-d); }

/* the question card */
.pab .qbody {
	background: var(--white); color: var(--charcoal); border-radius: var(--radius);
	padding: 1rem 1.25rem 1.75rem; box-shadow: var(--band-shadow);
	transition: opacity 180ms var(--ease), transform 220ms var(--ease);
}
@media (min-width: 600px) { .pab .qbody { padding: 1.5rem 2.5rem 2.5rem; } }
.pab .qbody.out { opacity: 0; transform: translateY(-6px); transition-duration: 140ms; }
.pab .qbody.in { opacity: 0; transform: translateY(8px); transition: none; }
.pab .qbody.in.back-in { transform: translateY(-8px); }

.pab .qhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; margin-bottom: 0.25rem; }
.pab .back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; min-width: 44px; padding: 0 10px 0 0; background: none; border: 0; cursor: pointer; font-size: 0.9rem; font-weight: 500; color: var(--navy); touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: color 160ms var(--ease); }
.pab .back svg { width: 16px; height: 16px; transition: transform 160ms var(--ease); }
@media (hover: hover) and (pointer: fine) { .pab .back:hover { color: var(--sage-d); } .pab .back:hover svg { transform: translateX(-2px); } }
.pab .qnum { font: 700 0.625rem/1 var(--font-sans); letter-spacing: 0.24em; text-transform: uppercase; color: rgba(64, 72, 75, 0.5); font-variant-numeric: tabular-nums; }
.pab .stagem { font-size: 0.9rem; color: rgba(var(--ink-rgb), 0.7); margin: 0.5rem 0 0.6rem; }
.pab .stagem b { color: var(--navy); font-weight: 700; }
@media (min-width: 960px) { .pab .stagem { display: none; } }
.pab .jtag { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px; border-radius: 999px; background: var(--sagebg); color: var(--sage-d); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; margin: 4px 0 12px; }
.pab .jtag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sage-d); }
.pab .qtext { font: 500 clamp(1.75rem, 5.6vw, 2.5rem)/1.15 var(--font-serif); color: var(--navy); margin: 0 0 1.5rem; text-wrap: pretty; outline: none; }
.pab .opts { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.pab .opt {
	display: flex; align-items: center; justify-content: space-between; gap: 14px;
	width: 100%; min-height: 60px; padding: 14px 18px; text-align: left;
	background: var(--white); border: 1px solid var(--line); border-radius: 4px; cursor: pointer;
	font-size: 1rem; line-height: 1.4; color: var(--charcoal);
	touch-action: manipulation; -webkit-tap-highlight-color: transparent;
	transition: background-color 160ms var(--ease), border-color 160ms var(--ease), color 160ms var(--ease), box-shadow 160ms var(--ease), transform 140ms var(--ease);
}
.pab .opt__r { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid rgba(64, 73, 74, 0.35); display: grid; place-items: center; transition: border-color 140ms var(--ease); }
.pab .opt__r::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--white); opacity: 0; transform: scale(0.5); transition: transform 160ms var(--ease), opacity 120ms var(--ease); }
.pab .opt[aria-checked="true"] { background: var(--navy); border-color: var(--navy); color: var(--white); }
.pab .opt[aria-checked="true"] .opt__r { border-color: var(--white); }
.pab .opt[aria-checked="true"] .opt__r::after { opacity: 1; transform: scale(1); }
.pab .opt[data-pressed="true"] { transform: scale(0.985); }
@media (hover: hover) and (pointer: fine) {
	.pab .opt:hover { border-color: rgba(64, 73, 74, 0.45); box-shadow: 0 6px 16px -10px rgba(46, 47, 51, 0.25); }
	.pab .opt[aria-checked="true"]:hover { border-color: var(--navy); }
}

/* stage reveal, inside the question card */
.pab .rev { padding: 0.75rem 0 0; }
.pab .rev__k { color: var(--sage-d); }
.pab .rev h2 { font: 500 clamp(2.1rem, 6vw, 3rem)/1.05 var(--font-serif); color: var(--navy); margin: 0 0 1.25rem; }
.pab .rev__rows { display: grid; gap: 0.6rem; margin: 0 0 1.75rem; }
.pab .rev__row { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 16px; padding: 14px 18px; background: var(--bg); border: 1px solid var(--line); border-radius: 4px; }
.pab .rev__row svg { width: 56px; height: 56px; overflow: visible; }
.pab .rev__j { font-size: 0.95rem; color: rgba(var(--ink-rgb), 0.75); }
.pab .rev__n { font: 500 2.5rem/1 var(--font-serif); color: var(--navy); font-variant-numeric: lining-nums tabular-nums; }
.pab .rev__n small { font: 500 0.9rem var(--font-sans); color: rgba(var(--ink-rgb), 0.5); margin-left: 3px; }
.pab .rev .btn { min-height: 60px; padding: 0 2.25rem; }
@media (max-width: 600px) { .pab .rev .btn { width: 100%; } }
.pab .mw { transform-box: view-box; transform-origin: 28px 28px; transition: transform 420ms var(--ease) 80ms, opacity 200ms var(--ease) 80ms; }
.pab .rev.pre .mw { transform: scale(0.25); opacity: 0; }

/* ---------- results head (light, as a main.css .section) ---------- */
.pab .res__head { padding-block: 2.5rem 2.5rem; }
@media (min-width: 960px) { .pab .res__head { padding-block: 5rem 3.5rem; } }
.pab .res__k { color: var(--ceil); }
.pab.res h1, .pab .res h1 { font: 500 clamp(2.75rem, 6vw, 4.75rem)/1.02 var(--font-serif); color: var(--navy); margin: 0 0 1rem; }
.pab .res__where { font-size: 1.15rem; font-weight: 500; margin: 0 0 0.6rem; color: var(--navy); }
.pab .res__why { font-size: 1.15rem; line-height: 1.65; font-weight: 300; color: rgba(64, 72, 75, 0.85); margin: 0; max-width: 36em; }
.pab .res__whohalf { margin: 1.5rem 0 0; padding: 1rem 1.25rem; background: rgba(235, 231, 218, 0.55); border-left: 2px solid var(--sage); font-size: 0.95rem; line-height: 1.6; max-width: 40em; }
.pab .res__whohalf a { color: var(--navy); font-weight: 600; }

/* ---------- the score board: main.css .section--navy ---------- */
.pab .board { background: var(--navy); color: var(--sand); padding: 2rem 0 2.5rem; }
@media (min-width: 960px) { .pab .board { padding: 4rem 0; } }
/* every journey shows, stacked on a phone (Sam, 17th Oct 2026); #tabs stays in the DOM, always hidden */
.pab .tabs, .pab .tabs[hidden] { display: none; }
.pab .panels { display: grid; gap: 1.75rem; }
@media (max-width: 999px) { .pab .panels:not(.n1) .jp + .jp { padding-top: 1.75rem; border-top: 1px solid var(--line-d); } }
.pab .jp[hidden] { display: none; }
.pab .jp__h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 0.5rem; }
.pab .jp__t { font: 500 1.75rem/1.1 var(--font-serif); color: var(--white); margin: 0; }
.pab .jp__c { font: 700 0.6rem/1 var(--font-sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--white); border: 1px solid rgba(235, 231, 218, 0.5); padding: 7px 9px; border-radius: var(--radius); white-space: nowrap; }
.pab .jp__c::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ceil); margin-right: 7px; vertical-align: 1px; box-shadow: 0 0 0 1.5px rgba(235, 231, 218, 0.85); }

.pab .wheel { display: block; width: 100%; max-width: 380px; height: auto; margin: 0 auto; overflow: visible; }
.pab .wtrack { stroke-width: 1; }
.pab .wfill { stroke-width: 1; transform-box: view-box; transform-origin: 180px 180px; transition: transform 560ms var(--ease), opacity 240ms var(--ease); }
.pab .board.pre .wfill { transform: scale(0.18); opacity: 0; }
.pab .w--hom .wtrack { fill: rgba(214, 178, 138, 0.08); stroke: rgba(214, 178, 138, 0.3); }
.pab .w--both .wtrack { fill: rgba(143, 171, 134, 0.09); stroke: rgba(143, 171, 134, 0.32); }
.pab .w--olv .wtrack { fill: rgba(235, 231, 218, 0.06); stroke: rgba(235, 231, 218, 0.25); }
.pab .w--hom .wfill { fill: rgba(214, 178, 138, 0.5); stroke: var(--hom); }
.pab .w--both .wfill { fill: rgba(143, 171, 134, 0.55); stroke: var(--sage); }
.pab .w--olv .wfill { fill: rgba(235, 231, 218, 0.38); stroke: var(--white); }
.pab .is-ceil .wtrack { stroke: var(--white); stroke-width: 1.5; stroke-dasharray: 3 4; }
.pab .wlab { font: 500 16px var(--font-serif); fill: var(--white); }
.pab .wnum { font: 600 13px var(--font-sans); fill: rgba(235, 231, 218, 0.88); font-variant-numeric: tabular-nums; }
.pab .is-ceil .wnum { fill: var(--white); }
.pab .wheel > circle { fill: #363E3F; stroke: rgba(235, 231, 218, 0.22); }
.pab .wc1 { font: 700 7px var(--font-sans); letter-spacing: 0.22em; fill: rgba(235, 231, 218, 0.62); }
.pab .wc2 { font: 500 15px var(--font-serif); fill: var(--white); }
.pab .rows { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 2px; }
.pab .rows li { display: grid; grid-template-columns: 100px 1fr 40px; align-items: center; gap: 12px; min-height: 36px; font-size: 0.9rem; }
.pab .rows .bar { height: 5px; border-radius: 3px; background: rgba(235, 231, 218, 0.12); overflow: hidden; }
.pab .rows .bar i { display: block; height: 100%; border-radius: 3px; transform-origin: 0 50%; transition: transform 560ms var(--ease); }
.pab .board.pre .rows .bar i { transform: scaleX(0) !important; }
.pab .rows .b--hom i { background: var(--hom); }
.pab .rows .b--both i { background: var(--sage); }
.pab .rows .b--olv i { background: var(--sand); }
.pab .rows b { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; color: var(--white); }
.pab .rows .c { color: var(--white); font-weight: 700; }
.pab .rows .c::after { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ceil); margin-left: 7px; vertical-align: 2px; box-shadow: 0 0 0 2px rgba(235, 231, 218, 0.85); }
.pab .key { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 1.75rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--line-d); font-size: 0.8rem; color: rgba(235, 231, 218, 0.75); }
.pab .key span { display: inline-flex; align-items: center; gap: 8px; }
.pab .key .sw--olv { background: var(--sand); box-shadow: none; }
.pab .board__note { font-size: 0.8rem; color: rgba(235, 231, 218, 0.6); margin: 0.75rem 0 0; }
@media (min-width: 1000px) {
	.pab .panels { grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr)); gap: 2.5rem; }
	.pab .panels.n1 { grid-template-columns: 1fr; }
	.pab .panels.n1 .jp { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 4rem; align-items: center; }
	.pab .jp[hidden] { display: block; }
}

/* ---------- next: the gate, the unlocked card, the call aside ---------- */
.pab .next { padding-block: 3rem 4rem; }
@media (min-width: 960px) { .pab .next { padding-block: 6rem; } }
/* one centred reading column, then the call band (Sam, 17th Oct 2026): no sidebar, no empty space at any width */
.pab .next__g { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
@media (min-width: 960px) { .pab .next__g { gap: 4rem; } }
.pab .next__g > :not(.callc) { width: 100%; max-width: 720px; justify-self: center; }
.pab .next__g > :not(.callc) > .pc:last-child { margin-bottom: 0; }
.pab .next h2 { font: 500 clamp(1.9rem, 4vw, 2.85rem)/1.1 var(--font-serif); color: var(--navy); margin: 0 0 0.75rem; text-wrap: balance; }
.pab .next p { margin: 0 0 1.25rem; max-width: 34em; }
.pab .gate__k, .pab .next p.gate__k { color: var(--sage-d); max-width: none; }

/* cards: the client portal's white bordered card */
.pab .mail, .pab .unl {
	background: var(--white); border: 1px solid var(--line); border-radius: 4px; box-shadow: var(--card-shadow);
}
.pab .mail { display: grid; gap: 1rem; padding: 1.5rem 1.25rem; margin: 0.25rem 0 0; }
@media (min-width: 600px) { .pab .mail { padding: 2rem 2.25rem; } }
.pab .mail label { display: block; font-weight: 600; font-size: 0.9rem; color: var(--navy); margin: 0 0 6px; }
.pab .mail input { width: 100%; min-height: 56px; padding: 0 16px; font: 400 1rem var(--font-sans); color: var(--charcoal); background: var(--bg); border: 1px solid #D8D3C4; border-radius: var(--radius); transition: border-color 160ms var(--ease), background-color 160ms var(--ease), box-shadow 160ms var(--ease); }
.pab .mail input:focus { background: var(--white); border-color: var(--navy); }
.pab .mail input:focus-visible { outline: 2px solid var(--sage-d); outline-offset: 1px; }
.pab .mail input[aria-invalid="true"] { border-color: var(--ceil); }
.pab .mail .btn { width: 100%; min-height: 60px; }
.pab .mail__msg { font-size: 0.85rem; margin: 0; min-height: 1.5em; color: rgba(var(--ink-rgb), 0.62); }
.pab .mail__msg.ok { color: var(--sage-d); font-weight: 600; }
.pab .mail__msg.err { color: var(--ceil); font-weight: 600; }

.pab .unl { position: relative; padding: 1.75rem 1.25rem; outline: none; scroll-margin-top: var(--hdr); }
@media (min-width: 600px) { .pab .unl { padding: 2.5rem 2.5rem 2.25rem; } }
.pab .unl.is-in { animation: pabUnlIn 260ms var(--ease) both; }
@keyframes pabUnlIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.pab .unl h2 { margin: 0 0 0.75rem; }
.pab .unl h3 { font: 500 1.6rem/1.15 var(--font-serif); color: var(--navy); margin: 1.75rem 0 0.75rem; }
.pab .cost { font-size: 1.05rem; line-height: 1.65; margin: 0; padding: 1rem 1.25rem; background: var(--sagebg); border-left: 2px solid var(--sage); color: var(--charcoal); max-width: none; }
.pab .qwl { font-size: 0.9rem; color: rgba(var(--ink-rgb), 0.7); margin: -0.25rem 0 0.75rem; }
.pab .fixes { list-style: none; margin: 0; padding: 0; counter-reset: fx; display: grid; }
.pab .fixes li { counter-increment: fx; display: grid; grid-template-columns: 44px 1fr; gap: 4px 14px; padding: 1.1rem 0; border-top: 1px solid var(--line); }
.pab .fixes li:last-child { border-bottom: 1px solid var(--line); }
.pab .fixes li::before { content: counter(fx); grid-row: span 2; font: 500 2.25rem/1 var(--font-serif); color: var(--sage-d); font-variant-numeric: lining-nums; }
.pab .fixes b { font: 600 1.3rem/1.2 var(--font-serif); color: var(--navy); }
.pab .fixes span { font-size: 0.98rem; line-height: 1.6; color: rgba(var(--ink-rgb), 0.86); }
.pab .fixes .eff { display: block; font-style: normal; margin-top: 8px; font-size: 0.9rem; color: var(--sage-d); }
.pab .fixes .eff strong { font-weight: 700; }
.pab .sent { display: flex; gap: 12px; align-items: flex-start; margin: 1.5rem 0 0; font-size: 0.95rem; line-height: 1.5; }
.pab .sent svg { flex: none; width: 22px; height: 22px; margin-top: 1px; color: var(--sage-d); }
.pab .sent b { color: var(--navy); overflow-wrap: anywhere; }
.pab .privacy a, .pab .sent a { color: var(--navy); }

/* call aside: a sand panel, as main.css .section--sand */
.pab .callc { background: var(--sand); color: var(--navy); border-radius: 4px; padding: 1.75rem 1.25rem; }
@media (min-width: 600px) { .pab .callc { padding: 2.25rem 2.25rem 2rem; } }
@media (min-width: 860px) {
	.pab .callc { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 3rem; align-items: center; padding: 2.5rem 3rem; }
	.pab .callc > h2, .pab .callc > p { grid-column: 1; }
	.pab .callc > p { margin-bottom: 0; }
	.pab .callc > .cta-pair { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
	.pab .callc > .again { grid-column: 2; grid-row: 3; justify-self: center; margin-top: 0.5rem; }
}
@media (max-width: 859px) { .pab .callc .btn { width: 100%; } }
.pab .callc h2 { font-size: clamp(1.75rem, 3vw, 2.25rem); }
.pab .callc p { color: rgba(64, 72, 75, 0.85); }
.pab .callc .btn { min-height: 56px; }
.pab .again { display: inline-flex; align-items: center; min-height: 44px; margin-top: 1rem; background: none; border: 0; padding: 0; font-size: 0.9rem; color: var(--navy); text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; transition: color 160ms var(--ease); }
@media (hover: hover) and (pointer: fine) { .pab .again:hover { color: var(--sage-d); } }

/* screen change */
.pab .scr { transition: opacity 200ms var(--ease); }
.pab .scr.fade { opacity: 0; }

/* ---------- pab1 portal ---------- */
.pab-bar { background: var(--white); border-bottom: 1px solid rgba(64, 72, 75, 0.08); }
.pab-bar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; }
.pab .top__r { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; }
.pab .top__lbl { font: 700 0.625rem/1.3 var(--font-sans); letter-spacing: 0.3em; text-transform: uppercase; color: rgba(64, 72, 75, 0.55); }
.pab .top__out { display: inline-flex; align-items: center; min-height: 44px; font-size: 0.85rem; color: var(--navy); }
.pab .pc { margin: 0 0 3rem; }
.pab .pc h2 { margin: 0 0 0.75rem; }
.pab .pc--main { background: var(--white); border: 1px solid var(--line); border-radius: 4px; box-shadow: var(--card-shadow); padding: 1.75rem 1.25rem; }
@media (min-width: 600px) { .pab .pc--main { padding: 2.5rem 2.5rem 2.25rem; } }
.pab .pc h4 { font: 500 1.5rem/1.15 var(--font-serif); letter-spacing: 0; text-transform: none; color: var(--navy); margin: 1.75rem 0 0.75rem; }
.pab .pc__nums { display: grid; gap: 0.75rem; margin: 1.25rem 0 0; }
.pab .pc__nums p { margin: 0; padding: 0.75rem 1rem; border-left: 2px solid var(--sage); background: rgba(235, 231, 218, 0.4); font-size: 0.98rem; line-height: 1.6; max-width: none; }
.pab .fixes .tech { display: grid; gap: 6px; margin-top: 10px; padding: 10px 12px; border-radius: var(--radius); background: var(--bg); border: 1px solid var(--line); font-size: 0.9rem; }
.pab .fixes .tech strong { display: block; font: 700 0.6rem/1.3 var(--font-sans); letter-spacing: 0.2em; text-transform: uppercase; color: rgba(64, 72, 75, 0.55); }
.pab .fixes .tech a { color: var(--navy); }
.pab .fixes .watch { color: var(--ceil); }
.pab .pc__res ul { margin: 0; padding: 0 0 0 18px; display: grid; gap: 8px; font-size: 0.95rem; }
.pab .pc__res a { color: var(--navy); font-weight: 600; }
.pab .pc__d { background: var(--white); border: 1px solid var(--line); border-radius: 4px; margin: 0 0 0.6rem; padding: 0 1.25rem; transition: box-shadow 200ms var(--ease), border-color 200ms var(--ease); }
.pab .pc__d[open] { box-shadow: var(--card-shadow); padding-bottom: 1.25rem; }
@media (hover: hover) and (pointer: fine) { .pab .pc__d:not([open]):hover { border-color: rgba(64, 73, 74, 0.35); } }
.pab .pc__d > summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 60px; cursor: pointer; list-style: none; font: 500 1.35rem/1.2 var(--font-serif); color: var(--navy); touch-action: manipulation; }
.pab .pc__d > summary::-webkit-details-marker { display: none; }
.pab .pc__d > summary span { flex: 1; }
.pab .pc__d > summary b { font: 600 1.05rem var(--font-sans); font-variant-numeric: tabular-nums; }
.pab .pc__d > summary::after { content: ""; width: 9px; height: 9px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); margin: -4px 4px 0 6px; transition: transform 200ms var(--ease); }
.pab .pc__d[open] > summary::after { transform: rotate(225deg); margin-top: 4px; }
/* ---------- report: what is holding a stage back (Sam, 17th Oct 2026), generic ---------- */
.pab .hb { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; }
.pab .hb li { padding: 1rem 0; border-top: 1px solid var(--line); }
.pab .hb li:last-child { border-bottom: 1px solid var(--line); }
.pab .hb li p { margin: 0; max-width: none; }
.pab .hb li p.hb__q { font-size: 0.9rem; line-height: 1.5; color: rgba(64, 72, 75, 0.72); margin-bottom: 0.5rem; }
.pab .hb li p.hb__said { font: 500 1.3rem/1.3 var(--font-serif); color: var(--navy); }
.pab .hb__k { display: block; font: 700 0.6rem/1.3 var(--font-sans); letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 4px; }
.pab .hb__said .hb__k { color: var(--ceil); }
.pab .hb li p.hb__good { margin-top: 0.75rem; padding: 0.65rem 0.9rem; background: var(--sagebg); border-left: 2px solid var(--sage); font-size: 0.95rem; line-height: 1.6; color: var(--charcoal); }
.pab .hb__good .hb__k { color: var(--sage-d); }
.pab .unl .hb-wrap:empty { display: none; }
/* ---------- generic accordion (Sam, 17th Oct 2026): olliverr_pab_acc() ---------- */
.pab .acc { margin: 0.75rem 0 0; border-top: 1px solid var(--line); }
.pab .acc__s { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; cursor: pointer; list-style: none; font: 700 0.65rem/1.3 var(--font-sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--sage-d); border-radius: var(--radius); touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: color 160ms var(--ease); }
.pab .acc__s::-webkit-details-marker { display: none; }
.pab .acc__s > span, .pab .fixes .acc__s > span { font: inherit; color: inherit; letter-spacing: inherit; line-height: inherit; }
.pab .acc__s::after { content: ""; flex: none; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); margin: -3px 6px 0 0; transition: transform 220ms var(--ease); }
.pab .acc[open] > .acc__s::after { transform: rotate(225deg); margin-top: 3px; }
.pab .acc__s:focus-visible, .pab .pc__d > summary:focus-visible { outline: 2px solid var(--sage-d); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .pab .acc__s:hover { color: var(--navy); } }
.pab .acc__b { padding: 0 0 0.75rem; }
.pab .acc[open] > .acc__b { animation: pabAccIn 220ms var(--ease) both; }
@keyframes pabAccIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.pab .acc--measure .pc__nums { margin: 0; }
.pab .fixes .acc { grid-column: 2; margin-top: 0.6rem; }
.pab .fixes .acc .tech { margin-top: 0; }
.pab .pc__res { margin-top: 1.5rem; }
.pab .pc__res .acc { border-bottom: 1px solid var(--line); }
.pab .appr { margin: 0; padding: 0; list-style: none; counter-reset: ap; display: grid; gap: 1rem; }
.pab .appr li { counter-increment: ap; display: grid; grid-template-columns: 40px 1fr; gap: 2px 12px; }
.pab .appr li::before { content: counter(ap); grid-row: span 2; font: 500 2rem/1 var(--font-serif); color: var(--sage-d); }
.pab .appr b { font: 600 1.25rem/1.2 var(--font-serif); color: var(--navy); }
.pab .appr span { font-size: 0.98rem; line-height: 1.6; }
.pab-portal .pab .next p { max-width: 40em; }

@media (prefers-reduced-motion: reduce) {
	.pab .qbody, .pab .qbody.out, .pab .qbody.in { transform: none !important; transition: opacity 120ms linear; }
	.pab .wfill, .pab .mw { transition: opacity 200ms linear; }
	.pab .board.pre .wfill, .pab .rev.pre .mw { transform: none; opacity: 0; }
	.pab .rows .bar i, .pab .prog__fill { transition: none; }
	.pab .chip, .pab .opt, .pab .chip__box svg, .pab .opt__r::after { transition-property: background-color, border-color, color, opacity; }
	.pab .chip[data-pressed="true"], .pab .opt[data-pressed="true"], .pab .btn[data-pressed="true"] { transform: none; }
	.pab .back svg, .pab .pc__d > summary::after, .pab .acc__s::after { transition: none; }
	.pab .acc[open] > .acc__b { animation: pabUnlFade 140ms linear both; }
	.pab .unl.is-in { animation: pabUnlFade 160ms linear both; }
	@keyframes pabUnlFade { from { opacity: 0; } to { opacity: 1; } }
}

/* Free teaser above the email form (17th Oct 2026): their weakest answer at the ceiling. */
.pab .gate__tease { margin: 0 0 2rem; }
.pab .gate__tease .hb { margin-top: 0.75rem; }