/*
 * The public-page kit, 2026-11-06. Extracted from the price list (assets/price-list.css) so the pieces that page
 * proved are reusable: a section sheet, a bento card holding a white vignette, a stat strip, a range bar, a
 * heading with one highlighted word, a sticky section nav, and two small animations (reveal on scroll, typing caret).
 *
 * **Colour is injectable.** Every colour is a --pk-* custom property with our own brand as the default, so the
 * price list uses it untouched and a playbook sets the same properties from the client's palette (the guide look
 * maps them from its --g-* tokens). Nothing here names a brand colour outside this block.
 *
 * **Motion rests on its finished state.** Under prefers-reduced-motion nothing moves, and with no script nothing is
 * hidden: every hidden starting state is gated on .pk-js, which assets/public-kit.js adds. The markup comes from
 * parts/public-kit.php (portal_kit_* functions).
 */
:root{
	--pk-ink:#1c1d2c;--pk-soft:#3f4150;--pk-muted:#5d5f6e;--pk-line:#e8e3d8;
	--pk-accent:#f45d33;       /* fills, the caret and the nav underline */
	/* The highlighted heading word. Text, so the rule is 3:1 on its ground, with one standing exception Chris chose
	   on 2026-11-08 (item 28.7): our own orange stays #f45d33 on every page, including the sand ground where it
	   measures 2.8:1, rather than a deeper orange per ground. It only ever marks one word of a large heading. */
	--pk-hl:#f45d33;
	--pk-marker:#fece11;--pk-marker-ink:#1c1d2c;
	--pk-sheet:#fff;--pk-sheet-alt:#f8f9f2;--pk-paper:#f2f1ea;--pk-vignette:#fff;--pk-hover:#faf7f1;
	--pk-track:#e7e2d7;
	--pk-t1:#d7ecdd;--pk-t2:#dfeefa;--pk-t3:#e7e4f6;--pk-t4:#fde3d8;
	--pk-seg1:#9fd2ae;--pk-seg2:#a9d0f0;--pk-seg3:#c3bbef;--pk-seg4:#f7b9a1;
	--pk-tip:#1c1d2c;--pk-tip-ink:#fff;
	--pk-nav-bg:rgba(244,237,228,.94);--pk-nav-edge:#e4dccf;
	--pk-ease:cubic-bezier(.16,1,.3,1);
	/* Controls, 2026-11-08: the page ground, the three button fills and the field. --pk-accent-ink is the text on an
	   accent fill; a playbook maps it from the client palette like the rest. */
	--pk-ground:#f4ede4;
	--pk-gold:#fece11;--pk-gold-ink:#1c1d2c;
	--pk-dark:#1c1d2c;--pk-dark-ink:#fff;
	--pk-accent-ink:#fff;
	--pk-field:#fcfbf8;--pk-field-on:#fff;--pk-invalid:#c2410c;
	--pk-error:#8f2c23;--pk-error-bg:#fdecea;--pk-error-edge:rgba(222,81,70,.45);
	--pk-lift:0 8px 20px -6px rgba(28,29,44,.35);
}
/* No orphans, a hard rule everywhere (2026-11-09): headings balance, running text avoids a one-word last line.
   Zero specificity, so a page's own text-wrap still wins; assets/public-kit.js backstops browsers without either. */
:where(h1,h2,h3,h4,h5,h6){text-wrap:balance}
:where(p,li,dd,dt,figcaption,blockquote,label,small,td,th){text-wrap:pretty}
.pk-num{font-variant-numeric:tabular-nums}

/* Section sheet: a rounded sheet on a tinted ground. */
/* Full-width sections stop at 1440px and keep an 8px gap on a phone, 2026-11-08, Chris: "on sections that run full width the rounded corners sometimes look a bit stretched". */
.pk-sheet{background:var(--pk-sheet);border-radius:48px;padding:clamp(64px,7vw,96px) 24px;margin:0 max(12px,calc((100% - 1440px) / 2)) 12px}
.pk-sheet--alt{background:var(--pk-sheet-alt)}
.pk-sheet__inner{max-width:1080px;margin:0 auto}
.pk-head{max-width:760px;margin:0 auto 48px;text-align:center}
.pk-h2{font-size:clamp(34px,4.4vw,56px);font-weight:400;letter-spacing:-.02em;line-height:1.1;text-wrap:balance}
/* A highlighted word is coloured text, never a filled block. */
.pk-hl{background:none;color:var(--pk-hl)}

/* Bento: a tinted card holding a white vignette panel. */
.pk-bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.pk-card{border-radius:28px;padding:30px 28px;display:flex;flex-direction:column;gap:20px;overflow:hidden;position:relative}
.pk-span-6{grid-column:span 6}.pk-span-4{grid-column:span 4}.pk-span-3{grid-column:span 3}.pk-span-2{grid-column:span 2}
.pk-card--wide{flex-direction:row;align-items:center;justify-content:space-between;gap:44px}
.pk-card--wide > .pk-card__copy{flex:1 1 0;max-width:46ch}
.pk-card--wide > .pk-vignette{flex:0 0 min(46%,460px)}
.pk-t1{background:var(--pk-t1)}.pk-t2{background:var(--pk-t2)}.pk-t3{background:var(--pk-t3)}.pk-t4{background:var(--pk-t4)}
.pk-card p{font-size:15.5px;line-height:1.55;color:var(--pk-soft)}
.pk-card .pk-card__copy > p{margin-top:8px}
.pk-vignette{background:var(--pk-vignette);border-radius:18px;padding:16px 18px;box-shadow:0 1px 2px rgba(28,29,44,.05),0 24px 40px -14px rgba(28,29,44,.2);font-size:13.5px;line-height:1.45;color:var(--pk-ink);margin-top:auto}
.pk-vignette__label{display:block;font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--pk-muted);margin-bottom:10px}
/* A card somebody picks, 2026-11-08, first used for /refer/'s reward choice: the tinted card with a round tick in
   its corner and an ink ring when chosen. Mark it role="radio" with aria-checked; .is-selected is the same state for
   a page whose script toggles a class. */
.pk-card--choice{cursor:pointer;padding-right:56px;box-shadow:inset 0 0 0 2px transparent;transition:box-shadow .2s ease,transform .2s var(--pk-ease)}
.pk-card--choice:hover{transform:translateY(-2px)}
.pk-card--choice.is-selected,.pk-card--choice[aria-checked="true"]{box-shadow:inset 0 0 0 2px var(--pk-ink)}
.pk-card--choice:focus-visible{outline:2px solid var(--pk-accent);outline-offset:3px}
.pk-card__tick{position:absolute;top:22px;right:22px;width:24px;height:24px;border-radius:50%;background:var(--pk-sheet);box-shadow:inset 0 0 0 1.5px var(--pk-line);display:grid;place-items:center;color:var(--pk-dark-ink);transition:background-color .2s ease}
.pk-card__tick svg{width:12px;height:12px;opacity:0}
.pk-card--choice.is-selected .pk-card__tick,.pk-card--choice[aria-checked="true"] .pk-card__tick{background:var(--pk-ink);box-shadow:none}
.pk-card--choice.is-selected .pk-card__tick svg,.pk-card--choice[aria-checked="true"] .pk-card__tick svg{opacity:1}

/* Stat strip: big figures in a grid, small dotted-underline labels, an optional unit and tooltip.
   Dividers are drawn per column count (pk-stats--c1 to c6), because a divider has to know where a row starts. */
.pk-stats{margin:0 auto;display:grid;grid-template-columns:repeat(var(--pk-cols,4),minmax(0,1fr));border-top:1px solid var(--pk-line);border-bottom:1px solid var(--pk-line)}
.pk-stats--c1{--pk-cols:1}.pk-stats--c2{--pk-cols:2}.pk-stats--c3{--pk-cols:3}.pk-stats--c4{--pk-cols:4}.pk-stats--c5{--pk-cols:5}.pk-stats--c6{--pk-cols:6}
.pk-stat{position:relative;padding:20px 16px;text-align:center;outline-offset:-2px;transition:background-color .2s ease;min-width:0}
.pk-stat--tip:hover,.pk-stat--tip:focus-visible{background:var(--pk-hover)}
.pk-stats--c1 > .pk-stat:nth-child(n+2),.pk-stats--c2 > .pk-stat:nth-child(n+3),.pk-stats--c3 > .pk-stat:nth-child(n+4),.pk-stats--c4 > .pk-stat:nth-child(n+5),.pk-stats--c5 > .pk-stat:nth-child(n+6),.pk-stats--c6 > .pk-stat:nth-child(n+7){border-top:1px solid var(--pk-line)}
.pk-stats--c2 > .pk-stat:nth-child(2n+2),
.pk-stats--c3 > .pk-stat:nth-child(3n+2),.pk-stats--c3 > .pk-stat:nth-child(3n+3),
.pk-stats--c4 > .pk-stat:nth-child(4n+2),.pk-stats--c4 > .pk-stat:nth-child(4n+3),.pk-stats--c4 > .pk-stat:nth-child(4n+4),
.pk-stats--c5 > .pk-stat:nth-child(5n+2),.pk-stats--c5 > .pk-stat:nth-child(5n+3),.pk-stats--c5 > .pk-stat:nth-child(5n+4),.pk-stats--c5 > .pk-stat:nth-child(5n+5),
.pk-stats--c6 > .pk-stat:nth-child(6n+2),.pk-stats--c6 > .pk-stat:nth-child(6n+3),.pk-stats--c6 > .pk-stat:nth-child(6n+4),.pk-stats--c6 > .pk-stat:nth-child(6n+5),.pk-stats--c6 > .pk-stat:nth-child(6n+6){box-shadow:-1px 0 0 var(--pk-line)}
.pk-stat dt{font-size:13px;font-weight:600;color:var(--pk-muted)}
.pk-stat dt span{text-decoration:underline dotted rgba(93,95,110,.55);text-underline-offset:4px;text-decoration-thickness:1.5px}
.pk-stat dd{margin-top:4px;font-size:clamp(24px,2.6vw,32px);font-weight:400;letter-spacing:-.02em;line-height:1.15}
.pk-stat dd small{font-size:15px;letter-spacing:0;color:var(--pk-muted)}
.pk-tip{position:absolute;left:50%;top:calc(100% - 8px);z-index:6;width:max-content;max-width:230px;padding:9px 12px;border-radius:12px;background:var(--pk-tip);color:var(--pk-tip-ink);font-size:13.5px;font-weight:500;line-height:1.4;text-align:center;opacity:0;transform:translate(-50%,6px);pointer-events:none;transition:opacity .2s ease,transform .25s var(--pk-ease);box-shadow:0 10px 24px -10px rgba(28,29,44,.45)}
.pk-tip::before{content:'';position:absolute;left:50%;top:-5px;width:10px;height:10px;margin-left:-5px;background:var(--pk-tip);transform:rotate(45deg);border-radius:2px}
.pk-stat--tip:hover .pk-tip,.pk-stat--tip:focus-visible .pk-tip{opacity:1;transform:translate(-50%,0)}

/* Range bar: a segmented scale with a labelled marker. The marker sits at --at (a percentage). The compact form
   drops the callout and shows a dot on a thin track, one row of a set of sliders. */
.pk-range{position:relative;margin:66px 4px 0}
.pk-range__track{display:flex;height:16px;border-radius:999px;overflow:hidden;background:var(--pk-track)}
.pk-range__seg{flex:1 1 0;transform-origin:left}
.pk-range__seg+.pk-range__seg{box-shadow:inset 3px 0 0 var(--pk-paper)}
.pk-range__seg:nth-child(1){background:var(--pk-seg1)}.pk-range__seg:nth-child(2){background:var(--pk-seg2)}.pk-range__seg:nth-child(3){background:var(--pk-seg3)}.pk-range__seg:nth-child(4){background:var(--pk-seg4)}
.pk-range__mark{position:absolute;left:var(--at);top:-50px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;z-index:2}
.pk-range__mark b{display:block;padding:6px 13px;border-radius:999px;background:var(--pk-marker);color:var(--pk-marker-ink);font-size:13.5px;font-weight:700;white-space:nowrap;box-shadow:0 8px 18px -6px rgba(28,29,44,.3)}
.pk-range__mark i{display:block;width:2px;height:12px;background:var(--pk-ink)}
.pk-range__mark u{display:block;width:18px;height:18px;border-radius:50%;background:var(--pk-ink);border:3px solid var(--pk-marker)}
.pk-range__ticks{position:relative;height:46px;margin-top:12px}
.pk-range__tick{position:absolute;top:0;transform:translateX(-50%);text-align:center;white-space:nowrap;font-size:15px;font-weight:600}
.pk-range__tick span{display:block;font-size:13px;font-weight:500;color:var(--pk-muted)}
.pk-range__tick:first-child{transform:none;text-align:left}
.pk-range__tick:last-child{transform:translateX(-100%);text-align:right}
.pk-range--compact{margin:0}
.pk-range--compact .pk-range__track{height:8px}
.pk-range--compact .pk-range__mark{top:-5px}
.pk-range--compact .pk-range__mark b,.pk-range--compact .pk-range__mark i{display:none}
.pk-range--compact .pk-range__mark u{width:18px;height:18px;background:var(--pk-hl);border:3px solid var(--pk-vignette);box-shadow:0 0 0 1px var(--pk-ink)}
.pk-range__ends{display:flex;justify-content:space-between;gap:12px;margin-top:8px;font-size:13px;line-height:1.3;color:var(--pk-muted)}
.pk-range-row{display:grid;gap:2px}
.pk-range-row__words{font-size:14px;line-height:1.4;color:var(--pk-ink);font-weight:600}

/* Figure chips: a small figure with its label, for counts (evidence behind a message, for instance). */
.pk-figs{display:flex;flex-wrap:wrap;gap:6px 8px;list-style:none;margin:0;padding:0}
.pk-fig{display:inline-flex;align-items:baseline;gap:6px;padding:4px 12px;border-radius:999px;background:var(--pk-paper);color:var(--pk-ink);font-size:13px;line-height:1.4}
.pk-fig b{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
.pk-fig--lead{background:var(--pk-t1)}

/* Sticky section nav with an active underline. assets/public-kit.js (portalKit.nav) toggles .is-stuck and .is-on. */
.pk-nav{position:sticky;top:0;z-index:40;background:transparent;border-bottom:1px solid transparent;margin-bottom:12px;transition:background-color .3s ease,border-color .3s ease,box-shadow .3s ease}
.pk-nav.is-stuck{background:var(--pk-nav-bg);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);border-bottom-color:var(--pk-nav-edge);box-shadow:0 6px 16px -12px rgba(20,20,30,.28)}
.pk-nav__logo{opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s}
.pk-nav.is-stuck .pk-nav__logo{opacity:1;visibility:visible;transition:opacity .3s ease}
.pk-nav__in{max-width:1104px;margin:0 auto;display:grid;grid-template-columns:120px minmax(0,1fr) 120px;align-items:center;gap:16px;padding:10px 24px}
.pk-nav__logo img{height:24px;width:auto}
.pk-nav__links{display:flex;gap:4px;justify-content:center;overflow-x:auto;scrollbar-width:none;min-width:0}
.pk-nav__links::-webkit-scrollbar{display:none}
.pk-nav__links a{position:relative;flex:0 0 auto;padding:8px 12px;text-decoration:none;font-size:14px;font-weight:600;color:var(--pk-muted);transition:color .25s ease}
.pk-nav__links a::after{content:'';position:absolute;left:12px;right:12px;bottom:2px;height:2px;border-radius:2px;background:var(--pk-accent);transform:scaleX(0);transition:transform .35s var(--pk-ease)}
.pk-nav__links a:hover,.pk-nav__links a.is-on{color:var(--pk-ink)}
.pk-nav__links a.is-on::after{transform:scaleX(1)}

/* Typing caret. It rests visible; it blinks only when motion is welcome and the script has run. */
.pk-caret{display:inline-block;width:2px;height:1em;background:var(--pk-accent);vertical-align:-2px;margin-left:2px}
@keyframes pk-blink{50%{opacity:0}}
@keyframes pk-pin{0%{transform:translateY(-30px);opacity:0}55%{transform:translateY(3px);opacity:1}78%{transform:translateY(-2px)}100%{transform:none}}

/* Reveal on scroll. Children marked .pk-rise rise and fade in, staggered by --i; a range bar draws its segments
   and drops its marker. Every hidden starting state needs .pk-js, so with no script everything shows. */
@media (prefers-reduced-motion:no-preference){
	.pk-js .pk-caret{animation:pk-blink 1s steps(1) infinite}
	.pk-js [data-pk-reveal]:not(.is-in) .pk-rise{opacity:0;transform:translateY(10px)}
	.pk-js [data-pk-reveal] .pk-rise{transition:opacity .6s ease calc(var(--i,0) * .1s + .1s),transform .7s var(--pk-ease) calc(var(--i,0) * .1s + .1s)}
	.pk-js [data-pk-reveal]:not(.is-in) .pk-range__seg{transform:scaleX(0)}
	.pk-js [data-pk-reveal] .pk-range__seg{transition:transform .7s var(--pk-ease)}
	.pk-js [data-pk-reveal] .pk-range__seg:nth-child(2){transition-delay:.15s}
	.pk-js [data-pk-reveal] .pk-range__seg:nth-child(3){transition-delay:.3s}
	.pk-js [data-pk-reveal] .pk-range__seg:nth-child(4){transition-delay:.45s}
	.pk-js [data-pk-reveal]:not(.is-in) .pk-range__mark{opacity:0}
	.pk-js [data-pk-reveal].is-in .pk-range__mark{opacity:1;transition:opacity .01s linear var(--pk-mark-delay,.6s)}
	.pk-js [data-pk-reveal].is-in .pk-range__mark u{animation:pk-pin .5s cubic-bezier(.34,1.6,.64,1) var(--pk-mark-delay,.6s) backwards}
	/* A compact bar sits where it belongs from the start, 2026-11-06: sliding in read as not loaded. */
	.pk-js [data-pk-reveal] .pk-range--compact .pk-range__mark u,.pk-js [data-pk-reveal].pk-range--compact .pk-range__mark u{animation:none}
	/* Added 2026-11-08 with the aftercare and payment pages. A target can rise itself (data-pk-reveal and pk-rise on
	   one element), for a row of cards each tall enough to need its own observer: one wrapper round three stacked
	   cards on a phone is too tall to ever be 30% in view. A pk-grow child draws in from its left edge, staggered by
	   --i, the range bar's segment motion for a plain bar or block. */
	.pk-js [data-pk-reveal].pk-rise:not(.is-in){opacity:0;transform:translateY(10px)}
	.pk-js [data-pk-reveal].pk-rise{transition:opacity .6s ease calc(var(--i,0) * .1s + .1s),transform .7s var(--pk-ease) calc(var(--i,0) * .1s + .1s)}
	.pk-js [data-pk-reveal]:not(.is-in) .pk-grow{transform:scaleX(0)}
	.pk-js [data-pk-reveal] .pk-grow{transform-origin:left;transition:transform .5s var(--pk-ease) calc(var(--i,0) * .08s + .25s)}
}

/* Controls, 2026-11-08. Chris: "Remember to update all components." One button, one field, one form card and one
   divider for every public page, from the sign in rebuild and /prices/, which were designed to match. Before this
   the sign in, the price list, the bento call pages, the booking picker and the playbook each drew their own.
   The inventory and the reasons are in track_changes/decisions/design-system-and-ui.md, and
   tools/checks/public-pages-use-the-kit.py refuses a new page-prefixed copy. */

/* Button. Dark by default; gold is the primary, accent the brand colour (orange for us, the client colour in a
   playbook), line an outline on a light ground, light an outline on a dark one, white a quiet filled choice. */
.pk-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:0 22px;border:0;border-radius:999px;background:var(--pk-dark);color:var(--pk-dark-ink);font-family:inherit;font-size:15px;font-weight:700;text-align:center;text-decoration:none;cursor:pointer;transition:box-shadow .2s ease}
.pk-btn:hover{box-shadow:var(--pk-lift)}
.pk-btn:focus-visible{outline:2px solid var(--pk-accent);outline-offset:3px}
.pk-btn:disabled,.pk-btn[aria-disabled="true"]{opacity:.7;cursor:default;box-shadow:none}
.pk-btn svg{width:18px;height:18px;flex:0 0 auto}
.pk-btn--gold{background:var(--pk-gold);color:var(--pk-gold-ink)}
.pk-btn--accent{background:var(--pk-accent);color:var(--pk-accent-ink)}
.pk-btn--line{background:transparent;color:var(--pk-ink);box-shadow:inset 0 0 0 1.5px var(--pk-ring,var(--pk-ink))}
.pk-btn--line:hover{box-shadow:inset 0 0 0 1.5px var(--pk-ring,var(--pk-ink)),0 8px 20px -6px rgba(28,29,44,.3)}
.pk-btn--white{background:var(--pk-sheet);color:var(--pk-ink);box-shadow:inset 0 0 0 1.5px var(--pk-line)}
.pk-btn--white:hover{box-shadow:inset 0 0 0 1.5px var(--pk-ink)}
.pk-btn--light{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28)}
.pk-btn--light:hover{box-shadow:inset 0 0 0 1.5px #fff}
.pk-btn--light:focus-visible{outline-color:var(--pk-gold)}
.pk-btn--sm{min-height:38px;padding:0 16px;font-size:14px}
.pk-btn--lg{min-height:50px;padding:0 24px}
.pk-btn--block{display:flex;width:100%}

/* Field: a label, the control and an optional hint. .pk-input styles a bare control that has no visible label. */
.pk-field{display:grid;gap:6px;min-width:0}
.pk-field > label{font-size:14px;font-weight:600;color:var(--pk-ink)}
.pk-field > label small{font-size:inherit;font-weight:500;color:var(--pk-muted)}
.pk-input,
.pk-field input:where(:not([type="checkbox"],[type="radio"],[type="color"],[type="hidden"],[type="file"])),
.pk-field textarea,.pk-field select{display:block;width:100%;min-height:52px;margin:0;padding:12px 16px;border:1.5px solid var(--pk-line);border-radius:14px;background:var(--pk-field);color:var(--pk-ink);font:inherit;font-size:16px}
textarea.pk-input,.pk-field textarea{min-height:110px;resize:vertical}
.pk-input:focus,.pk-field input:focus,.pk-field textarea:focus,.pk-field select:focus{outline:none;border-color:var(--pk-accent);background:var(--pk-field-on);box-shadow:0 0 0 4px rgba(244,93,51,.14);box-shadow:0 0 0 4px color-mix(in srgb,var(--pk-accent) 14%,transparent)}
.pk-input[aria-invalid="true"],.pk-field [aria-invalid="true"]{border-color:var(--pk-invalid)}
.pk-field__hint{font-size:13px;line-height:1.45;color:var(--pk-muted)}

/* Form card: the white card a form sits on, its foot line, an error banner and the "or" divider. */
.pk-form-card{width:100%;max-width:448px;background:var(--pk-sheet);border-radius:28px;padding:32px 28px;box-shadow:0 1px 2px rgba(28,29,44,.05),0 30px 60px -28px rgba(28,29,44,.28)}
.pk-form-card .pk-field{margin-bottom:16px}
.pk-form-card .pk-field + .pk-btn--block{margin-top:4px}
.pk-form-card__foot{margin-top:22px;padding-top:18px;border-top:1px solid var(--pk-line);text-align:center;font-size:14.5px;color:var(--pk-muted)}
.pk-form-card__foot a{color:var(--pk-accent);font-weight:700;text-decoration:none}
.pk-form-card__foot a:hover{text-decoration:underline}
.pk-form-error{margin:0 0 18px;padding:12px 14px;border:1px solid var(--pk-error-edge);border-radius:14px;background:var(--pk-error-bg);color:var(--pk-error);font-size:14px;line-height:1.5}
.pk-or{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--pk-muted);font-size:13px}
.pk-or::before,.pk-or::after{content:'';flex:1;height:1px;background:var(--pk-line)}
/* Added 2026-11-08 with /contact/ and /refer/. The wide card and the two-up row are for a form that asks for a pair
   (your name and email, their name and email), which /contact/ and /refer/ both do; the pair stacks on a phone. The
   note is the error banner's neutral sibling, for something worth saying above a form that is not a mistake. The
   visually hidden class keeps a control in the form and out of sight, as /refer/'s reward select is. */
.pk-form-card--wide{max-width:720px}
.pk-fields-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px}
.pk-form-note{margin:0 0 18px;padding:12px 14px;border:1px solid var(--pk-line);border-radius:14px;background:var(--pk-hover);color:var(--pk-soft);font-size:14px;line-height:1.5}
.pk-visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Segmented toggle, 2026-11-08: two or three equal buttons and a thumb that slides to the pressed one, with an
   optional lozenge. One for the Monthly and Yearly choice on aftercare, growth partner and /prices/ and the guide's
   Summary and Full. The look is aftercare's, which Chris asked to keep exactly; a page sets the --pk-seg-* tokens
   for its ground. The thumb follows aria-pressed through :has, so whatever script presses a button moves it
   (assets/public-kit.js wires [data-pk-seg] clicks and fires pk-seg-change; the guide uses its own); without :has
   the pressed button fills itself instead. */
.pk-seg{--pk-seg-n:2;position:relative;display:inline-grid;grid-auto-flow:column;grid-auto-columns:minmax(var(--pk-seg-w,auto),1fr);padding:var(--pk-seg-pad,4px);border-radius:999px;background:var(--pk-seg-bg,var(--pk-paper));box-shadow:var(--pk-seg-edge,none)}
.pk-seg--3{--pk-seg-n:3}
.pk-seg > button{position:relative;z-index:1;min-height:var(--pk-seg-h,40px);padding:0 var(--pk-seg-x,18px);border:0;border-radius:999px;background:none;color:var(--pk-seg-ink,var(--pk-soft));font-family:inherit;font-size:var(--pk-seg-size,15px);font-weight:600;line-height:1;white-space:nowrap;cursor:pointer;transition:color .2s ease}
.pk-seg > button[aria-pressed="true"]{color:var(--pk-seg-on,var(--pk-dark-ink))}
.pk-seg > button:focus-visible{outline:2px solid var(--pk-seg-ring,var(--pk-accent));outline-offset:3px}
.pk-seg__thumb{position:absolute;top:var(--pk-seg-pad,4px);bottom:var(--pk-seg-pad,4px);left:var(--pk-seg-pad,4px);width:calc((100% - 2 * var(--pk-seg-pad,4px)) / var(--pk-seg-n));border-radius:999px;background:var(--pk-seg-thumb,var(--pk-dark));box-shadow:var(--pk-seg-shadow,none);transition:transform .2s ease;pointer-events:none}
.pk-seg:has(> button:nth-of-type(2)[aria-pressed="true"]) .pk-seg__thumb{transform:translateX(100%)}
.pk-seg:has(> button:nth-of-type(3)[aria-pressed="true"]) .pk-seg__thumb{transform:translateX(200%)}
@supports not selector(:has(a)){
	.pk-seg__thumb{display:none}
	.pk-seg > button[aria-pressed="true"]{background:var(--pk-seg-thumb,var(--pk-dark))}
}
.pk-seg__badge{position:absolute;z-index:2;top:-11px;right:-14px;padding:3px 9px;border-radius:999px;background:var(--pk-seg-badge,#8ce06f);color:var(--pk-seg-badge-ink,var(--pk-ink));font-size:11px;font-weight:700;line-height:1.4;white-space:nowrap;transform:rotate(6deg);pointer-events:none}
@media (prefers-reduced-motion:reduce){.pk-seg__thumb,.pk-seg > button{transition:none}}

/* Page title: light, centred, one word in the highlight colour. */
.pk-h1{font-size:clamp(36px,5vw,52px);font-weight:300;letter-spacing:-.03em;line-height:1.05;text-align:center;text-wrap:balance}
.pk-h1 mark{background:none;color:var(--pk-hl)}

@media (max-width:560px){
	.pk-fields-2{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:520px){
	.pk-form-card{padding:26px 20px;border-radius:24px}
}
/* End of controls. The bento call pages print only the :root block and the controls above
   (portal_bento_page_kit_css()), because a kit .pk-vignette rule would restyle their call vignette. */

/* Header row, 2026-11-08. One header for every public page (portal_kit_top() in parts/public-kit.php): the wordmark
   left, then text links, then one pill, then the signed-in face. It replaces three that had drifted: the sign in
   family's .pa-top, /prices/' .top and the commercial pages' .pb-brandbar, which differed in logo size (32, 34 and
   44px), measure, button shape and the current-page underline. portal_public_header_css() prints this block on its
   own for a page that does not load the whole kit.
   The measure is the kit's 1080px content column, so the logo sits over the content below it. --wide spans the band
   instead, for a page whose first block is a full-width band (aftercare and the pages like it), which is what
   Chris asked for on 2026-09-08: "still too far away from nav and not stretched".
   On a phone only the links marked to keep stay (Contact), because a visitor cannot reach it any other way; the
   page-to-page links come out so the row fits on one line at 390px. */
.pk-top{box-sizing:border-box;max-width:1128px;min-height:78px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 24px}
.pk-top--wide{max-width:none;margin:0 max(16px,calc((100% - 1440px) / 2));padding:16px 14px}
.pk-top__logo{display:block;flex:0 0 auto;line-height:0;color:inherit;border-radius:8px}
.pk-top__logo img{display:block;height:34px;width:auto}
.pk-top__links{display:flex;align-items:center;gap:4px;min-width:0}
.pk-top__links .pk-btn{margin-left:8px}
.pk-top__links .pk-btn + .pk-btn{margin-left:4px}
.pk-top__txt{position:relative;padding:8px 12px;border-radius:10px;font-size:15px;font-weight:600;line-height:1.4;color:var(--pk-muted);text-decoration:none;white-space:nowrap;transition:color .2s ease}
.pk-top__txt:hover,.pk-top__txt[aria-current="page"]{color:var(--pk-ink)}
.pk-top__txt::after{content:'';position:absolute;left:12px;right:12px;bottom:2px;height:2px;border-radius:2px;background:var(--pk-accent);transform:scaleX(0);transition:transform .35s var(--pk-ease)}
.pk-top__txt[aria-current="page"]::after{transform:scaleX(1)}
.pk-top a:focus-visible{outline:2px solid var(--pk-accent);outline-offset:3px}
/* The signed-in face: a bare 44px photo or initials, first name and a chevron, the dashboard's own trigger. */
.pk-top__person{display:inline-flex;align-items:center;gap:10px;height:44px;margin-left:8px;border-radius:999px;color:var(--pk-ink);font-size:15px;font-weight:600;text-decoration:none;white-space:nowrap}
.pk-top__face{display:grid;place-items:center;flex:0 0 auto;width:44px;height:44px;border-radius:50%;background:var(--pk-gold);color:var(--pk-gold-ink);font-size:15px;font-weight:700;object-fit:cover}
.pk-top__chev{flex:0 0 auto;color:var(--pk-muted)}
/* On a dark ground: the white wordmark comes from the caller, the words go light and the pill is pk-btn--light. */
.pk-top--dark .pk-top__txt{color:rgba(255,255,255,.72)}
.pk-top--dark .pk-top__txt:hover,.pk-top--dark .pk-top__txt[aria-current="page"],.pk-top--dark .pk-top__person{color:#fff}
.pk-top--dark .pk-top__txt::after{background:var(--pk-gold)}
.pk-top--dark .pk-top__chev{color:rgba(255,255,255,.72)}
.pk-top--dark a:focus-visible{outline-color:var(--pk-gold)}
@media (max-width:860px){
	.pk-top__txt:not(.pk-top__txt--keep){display:none}
	.pk-top__person > span{display:none}
	.pk-top__chev{display:none}
}
@media (max-width:520px){
	.pk-top{min-height:66px;padding:14px 16px;gap:8px}
	.pk-top--wide{margin:0 8px;padding:14px 8px}
	.pk-top__logo img{height:28px}
	.pk-top__txt{padding:8px;font-size:14px}
	.pk-top__links .pk-btn{margin-left:4px}
	.pk-top__face{width:38px;height:38px;font-size:13.5px}
}
@media (prefers-reduced-motion:reduce){.pk-top__txt,.pk-top__txt::after{transition:none}}
/* End of header row. */

/* Questions, 2026-11-08, for the shared renderer (plugin/includes/questions-renderer.php) on the scorecard and the
   survey. Its class names are its contract and stay as they are; the look is the kit's field: field fill, 1.5px line,
   14px radius, and the chosen row turns white with an ink ring. A typed answer is the renderer's pk-input. The radio,
   the hover line and the chosen number take --pk-accent, so a survey in a client's colour sets that one token, and
   sets it to ink when the colour cannot carry a mark on white. Outside the controls block on purpose: the bento call
   pages ask no questions. */
.sc-q{min-width:0;margin:0;padding:22px 0;border:0;border-top:1px solid var(--pk-line)}
.sc-q:first-of-type{border-top:0;padding-top:4px}
.sc-q:last-of-type{padding-bottom:0}
.sc-q legend{display:block;width:100%;margin:0 0 12px;padding:0}
.sc-q-label{display:block;font-size:16.5px;font-weight:600;line-height:1.45;color:var(--pk-ink)}
.sc-q-hint{display:block;margin:5px 0 0;font-size:13.5px;font-weight:400;line-height:1.5;color:var(--pk-muted)}
.sc-anchors{display:grid;gap:8px}
.sc-anchor{display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:start;column-gap:10px;padding:13px 15px;border:1.5px solid var(--pk-line);border-radius:14px;background:var(--pk-field);color:var(--pk-ink);font-size:15px;line-height:1.4;cursor:pointer;transition:border-color .15s ease,background-color .15s ease}
.sc-anchor--plain{grid-template-columns:auto minmax(0,1fr)}
.sc-anchor:hover{border-color:var(--pk-accent)}
.sc-anchor input{margin:2px 0 0;width:17px;height:17px;accent-color:var(--pk-accent)}
.sc-anchor-n{font-size:12.5px;font-weight:700;line-height:1.7;color:var(--pk-muted);font-variant-numeric:tabular-nums}
.sc-anchor-label{min-width:0}
/* :has is progressive: without it the chosen row looks like the others and the radio still shows the choice. */
.sc-anchor:has(input:checked){background:var(--pk-field-on);border-color:var(--pk-ink);box-shadow:inset 0 0 0 1px var(--pk-ink)}
.sc-anchor:has(input:checked) .sc-anchor-n{color:var(--pk-accent)}
.sc-q .pk-input{margin-top:2px}
.pb-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media (max-width:980px){
	.pk-span-4,.pk-span-3,.pk-span-2{grid-column:span 6}
	.pk-card--wide{flex-direction:column;align-items:stretch}
	.pk-card--wide > .pk-vignette{flex:none}
	.pk-nav__in{grid-template-columns:minmax(0,1fr) auto;row-gap:8px}
	.pk-nav__links{grid-column:1 / -1;grid-row:2;justify-content:flex-start;margin:0 -24px;padding:0 24px}
}
@media (max-width:720px){
	.pk-sheet{border-radius:24px;padding:56px 16px;margin:0 8px 8px}
	.pk-head{margin-bottom:32px}
	.pk-card{padding:24px 20px;border-radius:24px}
	.pk-card--wide{gap:24px}
	.pk-stats{grid-template-columns:1fr 1fr}
	.pk-stats > .pk-stat{box-shadow:none!important;border-radius:0;border-top:0!important}
	.pk-stats > .pk-stat:nth-child(even){box-shadow:-1px 0 0 var(--pk-line)!important}
	.pk-stats > .pk-stat:nth-child(n+3){border-top:1px solid var(--pk-line)!important}
	.pk-tip{max-width:170px}
	.pk-range{margin-top:64px}
	.pk-range--compact{margin-top:0}
	.pk-range__tick{font-size:13.5px}
	.pk-range__tick span{font-size:12px}
	.pk-nav__in{padding:8px 16px}
	.pk-nav__links{margin:0 -16px;padding:0 16px}
	.pk-nav__logo{display:none}
	.pk-nav__in{grid-template-columns:minmax(0,1fr)}
	.pk-nav__links{grid-row:1}
}
@media (prefers-reduced-motion:reduce){.pk-card--choice,.pk-nav,.pk-nav__links a::after,.pk-stat,.pk-tip{transition:none}}