/* Version 10 consistency layer. Loaded last on every generated marketing page (build_marketing.page), never by the
   protected product documents. Brendon, 2026-10-29: "We need to maintain consistency too ... overall improvements with
   alignment or repetition". Version 9 had nine eyebrow classes in two styles, three heading scales and five closing
   panels. The v-* components (components.py) are the shared pieces; the rules above them bring the older page
   classes onto the same eyebrow and heading scale. Colours are tokens, so dark sections and the dark theme follow. */

/* ---- 1. One eyebrow: small mono capitals, muted, the same space above every heading -------------------------------- */
main .kicker,main .aud-kicker,main .fp-kicker,main .process-kicker,main .decision-kicker,main .rp-kicker,
main .security-kicker,main .case-files-kicker,main .eyebrow{font:500 .75rem/1.5 var(--mono);letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);margin:0 0 14px}

/* ---- 2. One heading scale. The second line of a two-line heading is the brand blue -------------------------------- */
main .v-h1,main .aud-h1{font-size:clamp(2.35rem,1.5rem + 3.3vw,4rem);line-height:1.04;letter-spacing:-.04em;font-weight:700;
  margin:0;text-wrap:balance}
main .v-h2,main .sh h2,main .aud-h2,main .content-section h2,main .closing h2,main .page-cta h2{
  font-size:clamp(1.8rem,1.2rem + 1.9vw,2.75rem);line-height:1.08;letter-spacing:-.03em;font-weight:650;margin:0;text-wrap:balance}
main h1 .blue,main h2 .blue,main h1 .hl,main h2 .hl{color:var(--lift)}
main h3{text-wrap:balance}

/* ---- 3. Hero ---------------------------------------------------------------------------------------------------- */
.v-hero{padding:clamp(36px,5.5vw,80px) 0 clamp(32px,4.5vw,56px)}
.v-hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:24px 64px;align-items:end}
.v-lede{font-size:clamp(1.0625rem,1rem + .25vw,1.1875rem);line-height:1.6;color:var(--ink-2);margin:0 0 24px;max-width:54ch}
.v-actions{display:flex;flex-wrap:wrap;align-items:center;gap:6px 26px}
.v-note{font-size:.875rem;line-height:1.55;color:var(--muted);margin:18px 0 0}
.v-note a{font-weight:600}

/* ---- 4. Sections and their headings ------------------------------------------------------------------------------ */
.v-section{padding:clamp(56px,6.5vw,96px) 0}
.v-section.v-tint{background:var(--ground)}
.v-head{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:18px 64px;align-items:end;margin:0 0 clamp(28px,3.4vw,44px)}
.v-head>p{margin:0;max-width:56ch;color:var(--ink-2);font-size:1.0625rem;line-height:1.65}
.v-tail{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 32px;margin-top:28px;
  padding-top:18px;border-top:1px solid var(--line)}
.v-tail p{margin:0;max-width:70ch;font-size:.875rem;line-height:1.6;color:var(--muted)}
.v-tail .text-link{flex:none}

/* ---- 5. Audience chooser ----------------------------------------------------------------------------------------- */
.v-paths{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;list-style:none;margin:0;padding:0}
.v-paths a{display:flex;flex-direction:column;height:100%;padding:24px 24px 20px;border:1px solid var(--line);border-radius:10px;
  background:var(--surface);color:var(--ink);text-decoration:none;transition:border-color .15s var(--eo),box-shadow .15s var(--eo)}
.v-paths a:hover{border-color:var(--lift);box-shadow:var(--shadow)}
.v-paths a:focus-visible{outline:2px solid var(--lift);outline-offset:3px}
.v-paths .kicker{margin-bottom:10px}
.v-paths h3{font-size:1.25rem;line-height:1.25;letter-spacing:-.015em;font-weight:650;margin:0 0 8px}
.v-paths p{margin:0 0 20px;color:var(--ink-2);font-size:.9375rem;line-height:1.6}
.v-path-go{margin-top:auto;display:inline-flex;align-items:center;gap:8px;min-height:32px;font-weight:600;color:var(--lift)}
.v-path-go svg{width:17px;height:17px}
.v-paths-note{margin:18px 0 0;font-size:.9375rem;color:var(--ink-2)}
.v-paths-note a{font-weight:600}

/* ---- 6. The engagement stages on one line ------------------------------------------------------------------------- */
.v-stages{margin-top:clamp(28px,3.4vw,40px);padding:18px 20px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.v-stages ol{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;list-style:none;margin:0 0 12px;padding:0}
.v-stages li{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:6px;background:var(--ground);font-weight:600;
  font-size:.9375rem;color:var(--ink)}
.v-stages li span{flex:none;font:500 .75rem/1 var(--mono);color:var(--muted)}
.v-stages li.v-loop{background:var(--lift-tint)}
.v-stages p{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 24px;margin:0;
  font-size:.875rem;line-height:1.55;color:var(--ink-2)}

/* A row of short facts, each a heading and a sentence. */
.v-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;list-style:none;margin:0;padding:0;border-top:1px solid var(--line-strong)}
.v-facts li{padding:22px 24px 4px 0}
.v-facts li+li{padding-left:24px;border-left:1px solid var(--line)}
.v-facts h3{font-size:1.0625rem;line-height:1.3;margin:0 0 8px}
.v-facts p{margin:0;font-size:.9375rem;line-height:1.6;color:var(--ink-2)}

/* ---- 8. The closing panel ----------------------------------------------------------------------------------------- */
.v-close{padding:clamp(40px,5.5vw,80px) 0}
.v-close-panel{display:grid;grid-template-columns:minmax(0,1.5fr) auto;gap:24px 56px;align-items:center;
  padding:clamp(28px,4vw,52px);border-radius:12px;background:var(--lift-tint);
  border:1px solid color-mix(in srgb,var(--lift) 24%,var(--line))}
.v-close-panel .kicker{color:var(--lift)}
.v-close-panel>div>p:last-child{margin:14px 0 0;max-width:58ch;color:var(--ink-2);font-size:1.0625rem;line-height:1.6}
.v-close-actions{display:flex;flex-direction:column;align-items:flex-start;gap:6px}

/* ---- 9. Product visuals: a phone version fills its frame; illustrations sit in one framed card ------------------- */
.product-visual.has-phone picture{display:block}

/* A product recording with the browser's own controls. */
.v-recording{margin:0}
.v-recording video{display:block;width:100%;height:auto;border:1px solid var(--frame-line);border-radius:10px;background:#0c1b2e;box-shadow:var(--shadow)}
.v-recording figcaption{margin-top:10px;font-size:.8125rem;line-height:1.5;color:var(--muted)}
.v-recording figcaption b{color:var(--ink);font-weight:600}

/* A worked example needs 760px; narrower screens get the product recording instead. */
@media (max-width:767px){.v-wide-only{display:none}}
@media (min-width:768px){.v-narrow-only{display:none}}

/* A wide example on a phone: a note with the link to its full-size view. */
.v-fit-note{margin:0;padding:16px 18px;border:1px dashed var(--line-strong);border-radius:10px;font-size:.9375rem;
  line-height:1.55;color:var(--ink-2)}
.v-fit-note a{font-weight:600}

/* Two screenshots side by side keep their bottom edges level. */
.v-pair .product-visual{display:flex;flex-direction:column;height:100%}
.v-pair .product-visual>a{flex:1}
.v-pair .product-visual figcaption{margin-top:auto}

/* Headings never end on one word alone. */
main h1,main h2,main h3,main h4,main .v-h1,main .v-h2,main .aud-h1,main .aud-h2{text-wrap:balance}
/* The second line of a two-line heading is balanced on its own, so it can't end on one short word either. */
main h1>br+span,main h2>br+span{display:block;text-wrap:balance}

/* Security: the permissions band follows the dark theme (version 9 kept it cream in both). */
[data-ls-theme="dark"] .security-tasks{--ink:#EAF0F7;--ink-2:#C8D3E0;--muted:#9AABBF;--line:#223249;--line-strong:#56698A;
  --lift:#34E0A6;background:#121D2D;border-color:#223249}

/* ---- 10. Phones and tablets --------------------------------------------------------------------------------------- */
@media (max-width:980px){
  .v-hero-grid,.v-head,.v-faq-grid{grid-template-columns:1fr;align-items:start}
  .v-paths{grid-template-columns:1fr}
  .v-facts{grid-template-columns:1fr 1fr;row-gap:8px}
  .v-facts li:nth-child(odd){padding-left:0;border-left:0}
  .v-close-panel{grid-template-columns:1fr}
  .v-stages ol{grid-template-columns:repeat(5,minmax(0,1fr))}
}
@media (max-width:640px){
  .v-facts{grid-template-columns:1fr}
  .v-facts li,.v-facts li+li{padding:18px 0 4px;border-left:0}
  .v-facts li+li{border-top:1px solid var(--line)}
  .balanced-home .t-hero{font-size:2.3rem;line-height:1.04}
  /* On a phone the home capabilities are a list of links; each page explains its capability. */
  #main .home-feature-panels .pl-mod{padding:0 18px}
  #main .home-feature-panels .pl-mod dt{margin:0;border-bottom:0}
  #main .home-feature-panels .pl-mod dd{display:none}
  #main .home-feature-panels{gap:8px}
  .v-stages ol{grid-template-columns:1fr 1fr}
  .v-stages li:last-child{grid-column:1/-1}
  .v-lede{margin-bottom:20px}
  .v-actions{flex-direction:column;align-items:stretch;gap:4px}
  .v-actions .btn{justify-content:center}
  .v-close-actions{align-items:stretch}
  .v-close-actions .btn{justify-content:center}
}
@media (prefers-reduced-motion:reduce){.v-paths a{transition:none}}
@media (forced-colors:active){.v-paths a,.v-close-panel,.v-stages{border:1px solid CanvasText}}

/* Two screenshots side by side (the report on screen and as a PDF), one above the other on phones. */
.v-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:stretch}
.v-pair .product-visual.portrait{max-width:none}
@media (max-width:760px){.v-pair{grid-template-columns:1fr}}
.v-hero-media{margin-top:clamp(28px,4vw,48px)}
.v-platform-media{max-width:1040px}

/* ==== Live edits, 2026-10-29 (artifact version 1793318768-d5d6), merged into the source. ====================
   Made directly on the published pages in answer to Brendon's comments. The live home hero rules were not
   merged (home_page.py keeps the version 10 hero; see its docstring), nor the partners FAQ ground (bands.py
   separates sections now), nor the rules for empty captions (components.specimen emits none). */
/* ---- Labelled product frames: interactive examples use the same "Fictional records" header as screenshots */
/* The example sits inset in its frame: the documents draw their own caption rows and Pause/Replay buttons, which
   otherwise touched the frame edges (the audit, 2026-10-30). The fit script scales to the inner width. */
.product-frame .demo-viewport{border:0;border-radius:0;box-shadow:none;margin:0;padding:clamp(12px,1.4vw,20px)}
/* Phones keep a slimmer inset, and the full walkthrough (an application, not an illustration) none at the sides: at
   320px the inset pushed its "Previous" and "Show me" buttons past their row (the verification audit, 2026-10-30). */
@media (max-width:639px){.product-frame .demo-viewport{padding:8px}.demo-stage .product-frame .demo-viewport{padding-inline:0}}
.product-frame figcaption{border-top:1px solid var(--line)}
.product-frame figcaption a{font-weight:600}
/* Every frame action is at least a 24px target (WCAG 2.5.8): "View larger" was 18px tall. */
.product-visual figcaption a{display:inline-flex;align-items:center;min-height:24px}
/* The frame clips anything outside it (overflow:hidden), so a focused video draws its ring inside its own edge
   (independent audit, 2026-10-30: only the top 3px of the ring showed). */
.product-visual video:focus-visible{outline-offset:-3px}
/* ---- Vendor callout: number, explanation and link share one aligned row */
.v-vendor-callout{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px 36px;margin-top:24px;
  padding:26px 32px;border:1px solid var(--line-strong);border-left:3px solid var(--shift);border-radius:6px;background:var(--lift-tint)}
.v-vendor-callout .vc-num{font:700 clamp(2.5rem,1.9rem + 1.8vw,3.4rem)/1 var(--sans);letter-spacing:-.04em;color:var(--shift);
  white-space:nowrap;padding-right:36px;border-right:1px solid var(--line)}
.v-vendor-callout .vc-copy .kicker{margin:0 0 6px}
.v-vendor-callout .vc-line{margin:0;font-size:1.125rem;line-height:1.35;font-weight:600;color:var(--ink)}
.v-vendor-callout .vc-note{margin:4px 0 0;font-size:.8125rem;line-height:1.5;color:var(--muted)}
.v-vendor-callout .text-link{flex:none}
@media (max-width:900px){.v-vendor-callout{grid-template-columns:auto minmax(0,1fr)}.v-vendor-callout .text-link{grid-column:1/-1}}
@media (max-width:560px){.v-vendor-callout{grid-template-columns:1fr;padding:22px 20px}.v-vendor-callout .vc-num{padding:0;border:0}}
/* ---- Platform overview: eight capabilities, four across on wide screens */
@media (min-width:1101px){#main .home-feature-8{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* ---- Agency hero: same alignment as the other page heroes */
@media (min-width:801px){
  .agency-page .ap-hero .ap-hero-grid{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:24px 64px;align-items:end}
  .agency-page .ap-hero .ap-hero-intro .aud-lede{max-width:54ch;margin-bottom:24px}
  .agency-page .ap-hero .ap-hero-intro .v-note{max-width:none;margin-top:16px}
}
.services-page .sp-field{font:400 .75rem/1.5 var(--mono);color:var(--muted);margin-bottom:2px}
/* ---- API scope: the reuse message gets its own band under the grid */
.fp-integration-plan .fp-plan-footer{display:flex;align-items:center;justify-content:space-between;gap:12px 32px;margin-top:0;
  padding:20px 32px;border:1px solid var(--line);border-top:0;border-radius:0 0 8px 8px;background:var(--lift-tint)}
.fp-integration-plan .fp-scope-grid{border-radius:0}
.fp-integration-plan .fp-plan-footer p{margin:0;max-width:none;font-size:1rem;line-height:1.55;color:var(--ink-2)}
.fp-integration-plan .fp-plan-footer strong{color:var(--ink);font-weight:650;margin-right:4px}
@media (max-width:760px){.fp-integration-plan .fp-plan-footer{flex-direction:column;align-items:flex-start;padding:18px}}
.agency-page .ap-hero .ap-hero-title .aud-kicker{margin-bottom:20px}
/* ---- Partners hero: copy left, delivery stat as a card right */
.vendor-page .vp-hero .vp-hero-top{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:40px 72px;align-items:center;margin-bottom:56px}
.vendor-page .vp-hero .vp-hero-intro{max-width:none;padding:0}
.vendor-page .vp-hero .vp-hero-intro .aud-kicker{margin-bottom:18px}
.vendor-page .vp-hero .vp-hero-intro .aud-h1{margin:0 0 24px}
.vendor-page .vp-hero .vp-hero-intro .aud-lede{max-width:52ch}
.vp-hero-stat{padding:28px 30px;border:1px solid var(--line);border-left:3px solid var(--shift);border-radius:8px;
  background:color-mix(in srgb,var(--shift) 7%,var(--surface))}
.vp-hero-stat .kicker{margin:0 0 12px}
.vp-hero-stat>b{display:block;font:700 clamp(2.75rem,2rem + 2.2vw,3.75rem)/1 var(--sans);letter-spacing:-.04em;color:var(--shift)}
.vp-hero-stat .vp-stat-line{margin:8px 0 18px;font-size:1.0625rem;font-weight:600;color:var(--ink)}
.vp-hero-stat ul{list-style:none;margin:0;padding:16px 0 0;border-top:1px solid var(--line);display:grid;gap:9px}
.vp-hero-stat li{position:relative;padding-left:18px;margin:0;font-size:.9375rem;line-height:1.45;color:var(--ink-2)}
.vp-hero-stat li::before{content:"";position:absolute;left:0;top:.5em;width:7px;height:7px;border-radius:50%;background:var(--shift)}
.vp-hero-stat .vp-stat-note{margin:16px 0 0;font-size:.8125rem;line-height:1.5;color:var(--muted)}
@media (max-width:800px){.vendor-page .vp-hero .vp-hero-top{grid-template-columns:1fr;gap:28px;margin-bottom:36px}}
/* ---- Services hero: two-line headline beside the diagram */
/* Wide screens only: unscoped, this kept the hero in two columns on a phone (the copy column was 132px at 320). */
@media (min-width:1101px){.services-page .sp-hero .sp-hero-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}}
.services-page .sp-hero .sp-hero-copy .aud-h1{max-width:none;font-size:clamp(2.4rem,1.4rem + 2.6vw,3.6rem)}
/* Services panels: no repeated label above the heading; stages sit inside the archival panel */
.services-page .sp-service-panel .sp-service-summary h3{margin-top:0}
/* ---- Security: hosting choices as two option cards */
.security-host-cards{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:28px 0 20px;padding:0}
.security-host-cards li{margin:0;padding:16px 18px;border:1px solid var(--line);border-top:2px solid var(--shift);border-radius:8px;background:color-mix(in srgb,var(--shift) 5%,transparent)}
.security-host-cards b{display:block;font-size:.9375rem;color:var(--ink);margin-bottom:6px}
.security-host-cards span{display:block;font-size:.875rem;line-height:1.55;color:var(--ink-2)}
@media (max-width:520px){.security-host-cards{grid-template-columns:1fr}}
/* A frame whose bottom bar holds only its action puts the action on the right. */
.product-frame figcaption>a:only-child{margin-left:auto}

/* ==== Section rhythm (design pass, 2026-10-29) ========================================================================
   Brendon: "blending between rows (look bad/repetitive or like they shouldn't be next to each other)", "open space/no
   separation". bands.py gives every top-level section a band; these rules give each band its ground and one vertical
   scale, replacing the padding each page family set for itself (aud-, sp-, rp-, fp-, security-, process-, content-
   section, page-hero). Neighbouring bands never share a ground; the tint is CIEDE2000 3.5 from the page ground (the
   previous --ground was 2.2, under what reads as a change), with hairlines above and below. */
:root{--band-tint:#EAEDF2;--band-close:var(--lift-tint);--band-y:96px;--hero-top:72px;--hero-bottom:96px;--close-y:80px;--head-gap:48px;--item-gap:24px;--card-pad:28px}
[data-ls-theme="dark"]{--band-tint:#121D2D;--band-close:#163B7D}
/* The dark band takes the dark theme's amber in both themes: the light theme's dark amber is unreadable on navy. */
.ls-dark{--attention:#E8B04B}
@media (max-width:1023px){:root{--band-y:72px;--hero-top:56px;--hero-bottom:72px;--close-y:64px;--head-gap:40px;--item-gap:20px;--card-pad:24px}}
@media (max-width:639px){:root{--band-y:56px;--hero-top:32px;--hero-bottom:56px;--close-y:48px;--head-gap:32px;--item-gap:12px;--card-pad:20px}}

#main [data-band]{padding-top:var(--band-y);padding-bottom:var(--band-y);margin-top:0;margin-bottom:0}
#main [data-band]>.wrap{padding-top:0;padding-bottom:0}
#main [data-band="hero"]{padding-top:var(--hero-top);padding-bottom:var(--hero-bottom);background:var(--bg)}
#main [data-band="base"],#main [data-band="showcase"],#main [data-band="faq"]{background:var(--bg);border-block:0}
#main [data-band="tint"]{background:var(--band-tint);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
#main [data-band="dark"]{border-block:0}
#main [data-band="close"]{padding-top:var(--close-y);padding-bottom:var(--close-y);background:var(--band-close);
  border-top:1px solid color-mix(in srgb,var(--lift) 22%,var(--line))}

/* Section heads stack: eyebrow, heading, then the intro under it (design pass). A heading on the left with its intro
   floating top-right left a hole in every head row ("weird use of space with floating text above"). Heroes keep their
   own two-column layout. */
#main .v-head,#main .aud-head,#main .section-head{display:block;max-width:none;margin:0 0 var(--head-gap)}
#main .v-head>p,#main .aud-head>p,#main .section-head>p{margin:20px 0 0;max-width:62ch}
#main .v-head h2,#main .aud-head h2,#main .section-head h2{max-width:24ch}
#main .fp-plan-heading{margin:0 0 var(--head-gap);text-align:left;max-width:64ch}
#main .content-grid{display:block}
#main .content-grid>header{margin:0 0 20px}
#main .content-grid>header h2{max-width:24ch}
#main .content-grid>.content-body{max-width:72ch}
@media (max-width:639px){#main .v-head>p,#main .aud-head>p,#main .section-head>p{margin-top:16px}}

/* Questions: heading row with the link to every question on its right; the questions below at full width. */
#main .v-faq-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 32px;margin:0 0 var(--head-gap)}
#main .v-faq .aud-faq{max-width:none}
#main .v-faq .aud-faq details>div{max-width:72ch}

/* The close: one full-width band with the eyebrow, heading, line and actions centred (Brendon on the services close:
   "weird use of space" when the actions floated right of the text; left-aligned, the audit measured the right 45% of
   the band empty). On a phone the actions stack at full width. */
#main [data-band="close"] .v-close-panel{display:block;padding:0;border:0;border-radius:0;background:none;box-shadow:none;text-align:center}
#main [data-band="close"] .v-close-panel h2{max-width:26ch;margin-inline:auto;text-wrap:balance}
#main [data-band="close"] .v-close-panel>div>p:last-child{max-width:60ch;margin-inline:auto}
#main [data-band="close"] .v-close-actions{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 28px;margin-top:28px}
@media (max-width:639px){#main [data-band="close"] .v-close-actions{flex-direction:column;align-items:stretch}
  #main [data-band="close"] .v-close-actions>*{justify-content:center;text-align:center}}

/* One section heading size (design pass): each page family had its own (38-46px at 1440, and three section headings
   set at 18-21px). Every h2 outside the hero is a section heading. */
#main [data-band]:not([data-band="hero"]) h2{font-size:clamp(1.8rem,1.2rem + 1.9vw,2.75rem);line-height:1.08;letter-spacing:-.03em;
  font-weight:650;text-wrap:balance}
/* A band's padding is its spacing: the first and last pieces of content add none of their own. */
#main [data-band]>.wrap>:first-child,#main [data-band]>.wrap>:first-child>:first-child{margin-top:0}
#main [data-band]>.wrap>:last-child,#main [data-band]>.wrap>:last-child>:last-child{margin-bottom:0}
/* Question rows are 44px targets wherever they appear. */
#main details>summary{min-height:44px;display:flex;align-items:center}

/* One tab style for every page tab list (design pass): the segmented control the permissions example uses (Brendon's
   live edit), at 44px. Page tabs had three styles: a blue filled bar, an underline and the product's pills. Tabs sit
   at the top of the panel they switch. On a phone the tabs share the row equally and a long label wraps inside its
   tab, so no label is cut off (a sideways-scrolling row hid "Export reports" at 390px). */
#main .aud-tablist.aud-segmented{display:flex;flex-wrap:nowrap;gap:4px;width:max-content;max-width:100%;padding:4px;margin:0 0 var(--item-gap);
  border:1px solid var(--line);border-radius:10px;background:color-mix(in srgb,var(--ink) 4%,var(--bg));overflow-x:auto;scrollbar-width:none}
#main .aud-tablist.aud-segmented::-webkit-scrollbar{display:none}
#main .aud-segmented .aud-tab{flex:0 0 auto;display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:10px;
  min-height:44px;margin:0;padding:0 18px;border:0;border-radius:7px;background:transparent;color:var(--ink-2);
  font:600 .9375rem/1.3 var(--sans);white-space:nowrap;box-shadow:none}
#main .aud-segmented .aud-tab:hover{color:var(--ink);background:color-mix(in srgb,var(--surface) 70%,transparent)}
#main .aud-segmented .aud-tab[aria-selected="true"],#main .aud-segmented .aud-tab[aria-selected="true"]:hover{background:var(--surface);
  color:var(--ink);border:0;box-shadow:0 1px 2px rgba(12,27,46,.14),inset 0 0 0 1px var(--line)}
#main .aud-segmented .ap-tab-number{font:500 .75rem/1 var(--mono);color:var(--lift);opacity:1}
@media (max-width:639px){#main .aud-tablist.aud-segmented{width:100%;overflow:visible}
  #main .aud-segmented .aud-tab{flex:1 1 0;min-width:0;padding:6px 8px;font-size:.875rem;line-height:1.25;white-space:normal;text-align:center}
  #main .aud-segmented .ap-tab-number{display:none}}
@media (forced-colors:active){#main .aud-segmented .aud-tab[aria-selected="true"]{outline:2px solid Highlight}}

/* Services: the two services in one panel, the tabs in its header (they floated above it). */
#main .sp-choice{margin:0;border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden;box-shadow:var(--shadow)}
#main .sp-choice-bar{padding:12px 16px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--ink) 2%,var(--surface))}
#main .sp-choice .aud-tablist.aud-segmented{margin:0}
#main .sp-choice .sp-service-panel{border:0;border-radius:0;background:transparent;box-shadow:none;padding:clamp(24px,3.4vw,40px)}
#main .sp-service-panel>.v-stages{grid-column:1/-1;margin:0;padding:24px 0 0;border:0;border-top:1px solid var(--line);border-radius:0;background:none}

/* Services: the mapping review sheet (dark band). The unchecked conversion is struck through in amber, the reviewed
   value is green. Below 1024px each check becomes a card: as a five-column table it hid "What gets confirmed" behind a
   sideways scroll from 760 to about 1000px. */
#main .sp-mapping-frame{margin:0}
#main .sp-sheet{overflow-x:auto}
#main .sp-sheet table{width:100%;border-collapse:collapse;font-size:.9375rem;line-height:1.5}
#main .sp-sheet th,#main .sp-sheet td{padding:18px 20px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
#main .sp-sheet thead th{padding-top:14px;padding-bottom:14px;font:500 .75rem/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
#main .sp-sheet tbody tr:last-child>*{border-bottom:0}
#main .sp-sheet tbody th{font-weight:650;color:var(--ink);white-space:nowrap}
#main .sp-sheet .sp-field{display:block;font:400 .75rem/1.5 var(--mono);color:var(--muted)}
#main .sp-sheet .sp-val,#main .sp-sheet .sp-bad s,#main .sp-sheet .sp-good strong{font:500 .9375rem/1.45 var(--mono)}
#main .sp-sheet .sp-val{display:block;color:var(--ink)}
#main .sp-sheet .sp-bad s,#main .sp-sheet .sp-good strong,#main .sp-sheet .sp-val{white-space:nowrap}
#main .sp-sheet .sp-bad s{color:var(--muted);text-decoration-color:var(--attention);text-decoration-thickness:2px}
#main .sp-sheet td.sp-bad{background:color-mix(in srgb,var(--attention) 8%,transparent)}
#main .sp-sheet td.sp-good{background:color-mix(in srgb,var(--shift) 12%,transparent)}
#main .sp-sheet .sp-good strong{color:var(--shift)}
#main .sp-sheet td:last-child{color:var(--ink-2);min-width:24ch}
@media (max-width:1023px){
  #main .sp-sheet .sp-bad s,#main .sp-sheet .sp-good strong,#main .sp-sheet .sp-val{white-space:normal;overflow-wrap:anywhere}
  #main .sp-sheet table,#main .sp-sheet tbody,#main .sp-sheet tr,#main .sp-sheet th,#main .sp-sheet td{display:block;width:auto}
  #main .sp-sheet thead{display:none}
  #main .sp-sheet tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 16px;padding:18px;border-bottom:1px solid var(--line)}
  #main .sp-sheet tbody tr:last-child{border-bottom:0}
  #main .sp-sheet th,#main .sp-sheet td{padding:0;border:0}
  #main .sp-sheet tbody th,#main .sp-sheet td:last-child{grid-column:1/-1}
  #main .sp-sheet td[data-label]::before{content:attr(data-label);display:block;margin:6px 0 2px;font:500 .6875rem/1.5 var(--mono);
    letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
  #main .sp-sheet td:last-child::before{display:none}
  #main .sp-sheet td:last-child{margin-top:8px}
}
@media (max-width:420px){#main .sp-sheet tr{grid-template-columns:1fr 1fr}#main .sp-sheet td[data-label="Source value"]{grid-column:1/-1}}


/* Partners: the plan is its own band now (it was a dark panel inside the hero). */
#main .vp-hero .vp-hero-top{margin-bottom:0}
.vendor-page .vp-plan-section .vp-lane h3{font-size:1.125rem;line-height:1.25;margin:0 0 9px}
#main [data-band="tint"] .vp-direction{background:var(--band-tint)}

/* Services diagram at the narrowest phones: the destinations stack, so "Replacement" never runs past its card. */
@media (max-width:400px){.services-page .sp-destinations{grid-template-columns:minmax(0,1fr)}}
.services-page .sp-destinations strong{overflow-wrap:break-word;hyphens:auto}
/* Home: eight capabilities fill two or four columns, never three (3 + 3 + 2). */
@media (min-width:641px) and (max-width:1100px){#main .home-feature-8{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Search: the related-records text leads on the left, as the items band above does (its heading sat in the right
   column, 800px from every other heading on the page). */
@media (min-width:901px){#main .search-context-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:36px 56px}}
#main .relationship-guide h2{margin-bottom:var(--item-gap)}
#main .fp-review-continuation>.wrap{display:block;max-width:var(--wrap)}
#main .fp-review-continuation .wrap>div>p:not(.fp-kicker){max-width:72ch;margin-top:20px}

/* Platform: eight capability cards, four across (two on tablets, one on phones); the recording sits centred in the
   shared frame at the content width. */
#main #features .pl-mods.pl-mods-8{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){#main #features .pl-mods.pl-mods-8{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){#main #features .pl-mods.pl-mods-8{grid-template-columns:minmax(0,1fr)}}
#main .v-platform-media{max-width:1040px;margin-inline:auto}
#main .v-recording-frame .v-recording video{border:0;border-radius:0;box-shadow:none}
#main .v-recording-frame .v-recording figcaption{display:block;margin:0;padding:10px 16px;border-top:1px solid var(--line)}

/* Section heads in the older page families stack like the shared ones (design pass): a heading on the left with its
   paragraphs on the right left the space under the heading empty (how-it-works, lineage, reports, the decision page). */
#main [data-band]:not([data-band="hero"]) :is(.rp-designer-intro,.rp-section-intro,.rp-export-heading,
  .process-section-head,.decision-check-heading,.decision-section-heading){display:block}
#main [data-band]:not([data-band="hero"]) :is(.rp-designer-intro,.rp-section-intro,.rp-export-heading,
  .process-section-head,.decision-check-heading,.decision-section-heading)>:not(:first-child){max-width:66ch;margin-top:20px}
/* A statement row (a heading with its own body text and nothing else beside it: how-it-works production, the lineage
   correction) keeps the heading on the left and the text on the right from 1024px, top-aligned, so a text-only band
   uses its width (stacked, the production band's text ended at the middle of the page). Below 1024px it stacks. */
#main .process-production-grid,#main .fp-correction-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px 64px;align-items:start}
#main :is(.process-production-grid,.fp-correction-grid)>:last-child>p{max-width:62ch}
@media (max-width:1023px){#main .process-production-grid,#main .fp-correction-grid{grid-template-columns:minmax(0,1fr)}}

/* Home hero: the product example lays out for a phone up to 600px wide and needs 656px for its next layout, so
   between the two (a 649-703px window) it clipped its right edge. In that window the frame keeps the phone layout. */
@media (min-width:649px) and (max-width:703px){.balanced-home .hero-product{max-width:600px}}

/* Reports: the files note is a card in both themes. In the dark theme its ground matched the band, so it showed as
   loose text with a rule and 28px of empty space under it. */
#main .rp-files{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--shift);border-radius:0 10px 10px 0}

/* Lineage: the question guide's label and heading stack (the heading floated at the far right of the row). */
#main .fp-investigation-heading{display:block;margin-bottom:var(--item-gap)}
#main .fp-investigation-heading .fp-sheet-label{margin:0 0 8px}
#main .fp-investigation-heading h3{font-size:1.375rem;font-weight:600;line-height:1.3}

/* The dark band in the dark theme: a deeper blue than the page and its grey band, and the close a brighter blue (the
   --band-close token), so the page's one contrast band still reads as one. On the shared dark-theme value (#13213A)
   it sat 4.3 CIEDE2000 from the grey band beside it and the two blended (partners, index, services). Measured: dark
   band to grey band 8.1, to the page 12.3, to the close 8.8; review/rhythm_check.js holds pairs with the dark band
   to 8. Text on it: body 9.6:1, muted 6.2:1, links 6.5:1; on the close: links 4.8:1. */
[data-ls-theme="dark"] #main [data-band="dark"].ls-dark{--bg:#14284C;--surface:#1B3360;--ground:#1B3360;--ground-2:#22406F;--line:#2B4675;background:#14284C}

/* Heroes share one headline size and one action style (the audit, 2026-10-30: 43 to 69px across pages, a 16px
   eyebrow on partners, hero links at 14, 15 and 17px). Text pages (.page-hero) keep their smaller headline, and the
   home hero sizes its own to fit the column beside the product (marketing.css). */
#main [data-band="hero"]:not(.page-hero):not(.balanced-home) h1{font-size:clamp(2.25rem,1.2rem + 2.6vw,3.5rem);line-height:1.05;letter-spacing:-.03em}
#main [data-band="hero"] :is(.kicker,.aud-kicker,.eyebrow,.fp-kicker,.rp-kicker,.process-kicker,.decision-kicker,.security-kicker){font-size:.75rem}
#main [data-band="hero"] .btn~.text-link,#main [data-band="hero"] .btn+.text-link{font-size:1.0625rem}

/* Compare: below 700px (where the 650px table would scroll) each approach is a card with its two answers labelled;
   on phones the table hid two columns behind a sideways scroll. */
#main .compare-sheet tbody th{font-weight:650;color:var(--ink)}
@media (max-width:699px){
  #main .compare-sheet{overflow:visible}
  #main .compare-sheet table,#main .compare-sheet tbody,#main .compare-sheet tr,#main .compare-sheet th,#main .compare-sheet td{display:block;width:auto;min-width:0}
  #main .compare-sheet thead{display:none}
  #main .compare-sheet tr{padding:18px 20px;border-bottom:1px solid var(--line)}
  #main .compare-sheet tbody tr:last-child{border-bottom:0}
  #main .compare-sheet th,#main .compare-sheet td{padding:0;border:0}
  #main .compare-sheet td[data-label]::before{content:attr(data-label);display:block;margin:12px 0 2px;font:500 .6875rem/1.5 var(--mono);
    letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
}

/* ---- 11. Numbered items (components.item_list): service work, partner benefits ------------------------------------ */
.v-items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--item-gap) clamp(24px,4vw,56px);list-style:none;margin:0;padding:0}
.v-items li{min-width:0;border-top:1px solid var(--line-strong);padding-top:18px;scroll-margin-top:96px}
.v-num{display:block;font:500 .75rem/1 var(--mono);color:var(--muted)}
.v-items h3{margin:12px 0 8px;font-size:1.25rem;line-height:1.3;color:var(--ink)}
.v-items p{margin:0;max-width:52ch;color:var(--ink-2);line-height:1.6}
@media(max-width:639px){.v-items{grid-template-columns:1fr}}

/* ---- 12. Questions (components.faq): every answer closed until asked, a plus that becomes a minus when open ---------
   The component is shared, so its look lives here, loaded on every page. Until 2026-10-31 it sat in audience.css,
   scoped to the audience pages, and the service pages (which don't load audience.css) showed bare questions with no
   plus (Brendon: "missing buttons for FAQ like plus signs ... it should be consistent"). */
.v-faq .aud-faq{border-top:1px solid var(--line-strong)}
.v-faq .aud-faq details{border-bottom:1px solid var(--line)}
.v-faq .aud-faq summary{display:flex;align-items:center;justify-content:space-between;gap:24px;cursor:pointer;padding:22px 0;list-style:none;font-size:1rem;line-height:1.45;font-weight:600;color:var(--ink)}
.v-faq .aud-faq summary::-webkit-details-marker{display:none}
.v-faq .aud-faq summary::after{content:'';color:var(--lift);flex:none;width:18px;height:18px;background:linear-gradient(currentColor,currentColor) center/14px 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 14px no-repeat}
.v-faq .aud-faq details[open] summary::after{background-size:14px 1.5px,0 0}
.v-faq .aud-faq details>p,.v-faq .aud-faq details>div{font-size:.9375rem;line-height:1.7;color:var(--ink-2);padding-bottom:22px;margin:0;max-width:80ch}
@media(max-width:600px){.v-faq .aud-faq summary{font-size:.9375rem;padding:20px 0;gap:16px}.v-faq .aud-faq details>p{font-size:.875rem}}
@media(forced-colors:active){.v-faq .aud-faq summary::after{color:ButtonText}}
@media print{.v-faq .aud-faq details>p,.v-faq .aud-faq details>div{display:block}}