/* SnagRight design system. Tokens, layout, components. Self-hosted OFL fonts (Manrope headings, Inter body).
   Strict CSP friendly: no inline styles anywhere, no remote assets, no data: URIs. */

/* ---------------------------------------------------------------- fonts */
@font-face { font-family: "Manrope Variable"; font-style: normal; font-display: swap; font-weight: 200 800;
  src: url("/fonts/manrope-latin-wght-normal.woff2") format("woff2-variations"), url("/fonts/manrope-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope Variable"; font-style: normal; font-display: swap; font-weight: 200 800;
  src: url("/fonts/manrope-latin-ext-wght-normal.woff2") format("woff2-variations"), url("/fonts/manrope-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter Variable"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("/fonts/inter-latin-wght-normal.woff2") format("woff2-variations"), url("/fonts/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter Variable"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("/fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations"), url("/fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------------------------------------------------------------- tokens */
:root {
  --navy-950: #11243A; --navy-800: #233B51;
  --teal-800: #066563; --teal-700: #087A78; --teal-500: #12A7A0;
  --mist-100: #EAF5F4; --sand-50: #F8F7F4; --white: #FFFFFF;
  --ink-900: #1A2A39; --muted-600: #61707A; --border: #E1E9EB; --border-strong: #C5D2D6;
  --warning-100: #FFF4DC; --warning-700: #7A5600; --warning-line: #E3B24A;
  --focus: #087A78;
  /* accent tints used on dark surfaces (tokenised so the experimental logo palette can swap them) */
  --accent-soft: #8FE6E0; --accent-chip: #7FE0DA; --accent-hover: #3CC8C1; --accent-rgb: 18, 167, 160;

  --font-head: "Manrope Variable", Manrope, "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Inter Variable", Inter, "Segoe UI", system-ui, -apple-system, sans-serif;

  /* 8px spacing scale */
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 40px; --s6: 48px; --s8: 64px; --s10: 80px; --s12: 96px;
  /* section rhythm (design-system refinement, 13 Oct 2026; see docs/DESIGN_SYSTEM/TVD_VS_SNAGRIGHT_TOKENS.md) */
  --section-y: clamp(2.5rem, 1.25rem + 5vw, 6rem);     /* 40px at 390, 58px at 768, 92px at 1440 */
  --section-y-sm: clamp(2rem, 1.25rem + 2.5vw, 3.5rem); /* compact bands (notes, CTA strips) */
  --head-gap: clamp(1.5rem, 1rem + 1.6vw, 2.5rem);      /* section head -> section body */
  --grid-gap: clamp(1rem, .75rem + 1vw, 1.5rem);        /* card grids */
  --card-pad: clamp(1.25rem, 1rem + .6vw, 1.75rem);     /* card body padding */
  --gutter: clamp(20px, 4vw, 40px);
  --container: 1200px; --container-text: 760px; --measure: 70ch;
  --col-read: 47rem;   /* the ONE width of a service / guide reading column: prose, callouts, tables, checklists, figures, FAQ, CTA band, notes (13c G-02) */

  /* fluid type scale */
  --fs-display: clamp(2.25rem, 1.55rem + 2.9vw, 3.5rem);   /* 36 -> 56: home / flagship hero H1 */
  --fs-h1: clamp(2rem, 1.5rem + 2.1vw, 3rem);              /* 32 -> 48: inner-page H1 */
  --fs-h2: clamp(1.625rem, 1.3rem + 1.35vw, 2.375rem);     /* 26 -> 38 */
  --fs-h3: clamp(1.1875rem, 1.1rem + .35vw, 1.375rem);     /* 19 -> 22 */
  --fs-h4: 1.0625rem;
  --fs-lede: clamp(1.0625rem, 1rem + .3vw, 1.25rem);       /* 17 -> 20 */
  --fs-body: clamp(1rem, .96rem + .2vw, 1.0625rem);        /* 16 -> 17 */
  --fs-sm: .9375rem; --fs-xs: .875rem; --fs-label: .75rem;
  --lh-tight: 1.1; --lh-head: 1.15; --lh-snug: 1.3; --lh-body: 1.65;

  /* image ratios */
  --ratio-photo: 3 / 2; --ratio-card: 16 / 10; --ratio-illo: 4 / 3; --ratio-wide: 16 / 9;
  /* buttons */
  --btn-h: 48px; --btn-px: 24px; --btn-fs: 1rem; --btn-gap: 12px;
  --radius: 16px; --radius-sm: 10px; --radius-lg: 24px;
  --shadow-sm: 0 1px 2px rgba(17, 36, 58, .06), 0 2px 8px rgba(17, 36, 58, .05);
  --shadow-md: 0 8px 28px rgba(17, 36, 58, .10);
  --shadow-lg: 0 24px 60px rgba(17, 36, 58, .18);
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body { margin: 0; font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-900); background: var(--white); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 { font-family: var(--font-head); color: var(--navy-950); line-height: var(--lh-head); letter-spacing: -.02em; margin: 0 0 .5em; text-wrap: balance; }
h1 { font-weight: 800; line-height: var(--lh-tight); } h2 { font-weight: 700; } h3, h4 { font-weight: 700; letter-spacing: -.01em; line-height: var(--lh-snug); }
h3 { font-size: var(--fs-h3); } h4 { font-size: var(--fs-h4); }
p { margin: 0 0 1em; text-wrap: pretty; } li { text-wrap: pretty; }
a { color: var(--teal-700); text-underline-offset: .18em; text-decoration-thickness: .08em; }
a:hover { color: var(--teal-800); }
ul, ol { margin: 0 0 1em; padding-left: 1.25em; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
main:focus { outline: none; }
.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.js-only { display: none !important; } .js .js-only { display: inline-flex !important; }
.skip-link { position: absolute; left: var(--s2); top: -100px; z-index: 200; background: var(--navy-950); color: #fff; padding: 12px 20px; border-radius: 0 0 12px 12px; font-weight: 700; }
.skip-link:focus { top: 0; color: #fff; outline-color: #fff; }
.eyebrow { font-family: var(--font-head); font-size: var(--fs-label); font-weight: 700; letter-spacing: .14em; line-height: 1.4; text-transform: uppercase; color: var(--teal-700); margin: 0 0 var(--s2); }

/* ---------------------------------------------------------------- buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--btn-h); padding: 10px var(--btn-px); border-radius: 999px; border: 2px solid transparent; font-family: var(--font-head); font-weight: 700; font-size: var(--btn-fs); line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; transition: background-color .18s, color .18s, border-color .18s, transform .18s; }
.btn--primary { background: var(--teal-700); color: #fff; }
.btn--primary:hover { background: var(--teal-800); color: #fff; }
.btn--ghost { border-color: var(--navy-950); color: var(--navy-950); background: transparent; }
.btn--ghost:hover { background: var(--navy-950); color: #fff; }
.btn--light { background: #fff; color: var(--navy-950); }
.btn--light:hover { background: var(--mist-100); color: var(--navy-950); }
.btn--ghost-light { border-color: rgba(255, 255, 255, .7); color: #fff; background: transparent; }
.btn--ghost-light:hover { background: rgba(255, 255, 255, .14); color: #fff; border-color: #fff; }
.hero--dark .btn--primary { background: var(--teal-500); color: var(--navy-950); }
.hero--dark .btn--primary:hover { background: var(--accent-hover); color: var(--navy-950); }
.btn:disabled, .btn[disabled] { opacity: .55; cursor: not-allowed; }
.link-arrow { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 700; font-family: var(--font-head); color: var(--teal-700); text-decoration: none; }
a.link-arrow:hover { text-decoration: underline; }
.dark-ctx, .hero--dark, .site-footer, .cta-band, .selector__result { --focus: var(--accent-soft); }

/* ---------------------------------------------------------------- staging ribbon + utility bar */
.staging-ribbon { background: repeating-linear-gradient(-45deg, #FFE08A 0 14px, #FFD35C 14px 28px); color: var(--navy-950); text-align: center; font-weight: 800; font-size: .9rem; padding: 8px var(--gutter); border-bottom: 2px solid var(--navy-950); }
.utility { display: none; background: var(--navy-950); color: #C9D8DE; font-size: .8125rem; }
.utility__inner { display: flex; justify-content: space-between; align-items: center; min-height: 36px; }
.utility__line { margin: 0; letter-spacing: .02em; }
.utility__list, .nav__utility { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--s3); }
.util-item { color: #C9D8DE; cursor: default; }
.util-soon { display: inline-block; margin-left: 6px; padding: 1px 8px; border: 1px solid rgba(201, 216, 222, .55); border-radius: 999px; font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; }

/* ---------------------------------------------------------------- header + nav */
.site-header { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, .97); border-bottom: 1px solid var(--border); backdrop-filter: saturate(1.2) blur(8px); }
.header__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--s2); min-height: 72px; }
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--navy-950); text-decoration: none; padding: 8px 0; }
.logo:hover { color: var(--navy-950); }
.logo__mark { flex: none; color: var(--navy-950); }
.logo__text { display: flex; flex-direction: column; line-height: 1.1; }
.logo__word { font-family: var(--font-head); font-weight: 800; font-size: 1.45rem; letter-spacing: -.02em; }
.logo__tag { display: none; font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #AA842A; margin-top: 3px; white-space: nowrap; }
@media (min-width: 520px) { .logo__tag { display: block; } }
.logo--official { padding: 10px 0; min-width: 0; max-width: 100%; }
@media (max-width: 519px) { .logo__mark { width: 34px; height: 34px; } .logo__word { font-size: 1.22rem; } }
@media (max-width: 379px) { .logo__mark { width: 30px; height: 30px; } .logo__word { font-size: 1.08rem; } .menu-toggle { padding: 0 12px; } }
.logo__text { flex: 0 1 auto; min-width: 0; }
.logo--light, .logo--light:hover { color: #fff; } .logo--light .logo__mark { color: #fff; } .logo--light .logo__tag { color: #D8B056; }
/* T-LOGO2 (19 Oct 2026): two-tone wordmark (Snag navy / Right teal) and theme-aware symbol accents. */
.logo__word .lw-snag { color: var(--navy-950); }
.logo__word .lw-right { color: #12A7A0; }
.logo--light .logo__word .lw-snag { color: #fff; }
.logo--light .logo__word .lw-right { color: #5FDED7; }
.logo--light .logo__mark .lm-teal { stroke: #5FDED7; }
.brand-endorse { margin: 10px 0 0; font-family: var(--font-head); font-size: .6875rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #C9A24B; }

.menu-toggle { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px; border: 2px solid var(--navy-950); border-radius: 999px; background: #fff; color: var(--navy-950); font: 700 .9375rem var(--font-head); cursor: pointer; }
.menu-toggle__bars { display: grid; gap: 4px; width: 18px; } .menu-toggle__bars span { height: 2px; background: currentColor; border-radius: 2px; transition: transform .2s, opacity .2s; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.js .menu-toggle { display: inline-flex; } .menu-toggle { display: none; }

.site-nav { flex-basis: 100%; padding-bottom: var(--s2); }
.nav__list { list-style: none; margin: 0; padding: 0; }
.nav__link { display: flex; align-items: center; min-height: 48px; padding: 0 4px; font-family: var(--font-head); font-weight: 700; font-size: 1.0625rem; color: var(--navy-950); text-decoration: none; }
.nav__link[aria-current="page"] { color: var(--teal-700); }
.nav__toggle { display: none; }
.nav__sub { list-style: none; margin: 0 0 var(--s1); padding: 0 0 0 var(--s2); border-left: 2px solid var(--mist-100); }
.nav__sub a { display: flex; align-items: center; min-height: 44px; color: var(--navy-800); text-decoration: none; font-size: .975rem; }
.nav__sub a:hover, .nav__sub a[aria-current="page"] { color: var(--teal-700); }
.nav__cta { margin: var(--s2) 0; width: 100%; }
.nav__utility { flex-direction: column; gap: 4px; padding-top: var(--s2); border-top: 1px solid var(--border); }
.nav__utility .util-item { display: flex; align-items: center; min-height: 40px; color: var(--muted-600); font-size: .9375rem; }
.nav__utility .util-soon { border-color: var(--border-strong); }
/* mobile: a disclosure panel when JS is available; plain stacked navigation without JS */
.js .site-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--border); box-shadow: var(--shadow-md); padding: var(--s2) var(--gutter) var(--s3); max-height: calc(100vh - 80px); overflow-y: auto; }
.js .site-nav.is-open { display: block; }

@media (min-width: 1024px) {
  .utility { display: block; }
  .menu-toggle, .js .menu-toggle { display: none; }
  .site-nav, .js .site-nav, .js .site-nav.is-open { display: flex; position: static; flex-basis: auto; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2); padding: 0; background: none; border: 0; box-shadow: none; max-height: none; overflow: visible; }
  .nav__list { display: flex; align-items: center; gap: 2px; }
  .nav__link { padding: 0 7px; min-height: 48px; font-size: .875rem; white-space: nowrap; }
  .nav__item { position: relative; } .nav__item--sub { display: flex; align-items: center; }
  .nav__item--sub > .nav__link { padding-right: 0; }
  .nav__toggle { display: inline-flex; align-items: center; justify-content: center; width: 24px; min-height: 48px; margin-right: 4px; background: none; border: 0; color: var(--navy-800); cursor: pointer; }
  .nav__toggle svg { transition: transform .2s; } .nav__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
  .nav__sub { display: none; position: absolute; top: 100%; left: -8px; min-width: 280px; margin: 0; padding: 8px; border: 1px solid var(--border); border-radius: 14px; background: #fff; box-shadow: var(--shadow-md); }
  .nav__item--sub:hover > .nav__sub, .nav__item--sub:focus-within > .nav__sub, .nav__item--sub.is-open > .nav__sub { display: block; }
  .nav__item--sub.is-dismissed > .nav__sub { display: none !important; }
  .nav__sub a { padding: 0 14px; border-radius: 10px; min-height: 44px; }
  .nav__sub a:hover { background: var(--mist-100); }
  .nav__cta { margin: 0; width: auto; min-height: 46px; padding: 0 20px; white-space: nowrap; }
  .nav__utility { display: none; }
}

/* sticky mobile quote bar */
.quote-bar { display: none; }
@media (max-width: 1023.98px) {
  .quote-bar { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .98); border-top: 1px solid var(--border); box-shadow: 0 -6px 20px rgba(17, 36, 58, .1); }
  .quote-bar .btn { width: 100%; }
  body.has-quote-bar { padding-bottom: 76px; }
}

/* ---------------------------------------------------------------- breadcrumbs */
.breadcrumbs { margin: calc(var(--s1) * -1) 0 var(--s2); font-size: var(--fs-xs); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0; list-style: none; margin: 0; padding: 0; }
.breadcrumbs li { display: inline-flex; align-items: center; min-height: 44px; }
.breadcrumbs li + li::before { content: "/"; margin: 0 8px; color: var(--muted-600); }
/* 44px hit area (WCAG 2.5.8 / owner review): the link box is 44px tall, the visible text stays the same size */
.breadcrumbs a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; margin: 0 -2px; color: var(--muted-600); }
.breadcrumbs a:hover { color: var(--teal-700); }
.breadcrumbs [aria-current] { color: var(--navy-950); font-weight: 600; }

/* ---------------------------------------------------------------- media */
.media { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--mist-100); aspect-ratio: var(--ratio-photo); }
.media picture, .media img { width: 100%; height: 100%; }
.media img { object-fit: cover; }
.badge-illustration { position: absolute; left: 8px; bottom: 8px; display: inline-flex; align-items: center; background: rgba(255, 255, 255, .9); color: var(--navy-800); font-size: .6875rem; font-weight: 600; letter-spacing: 0; text-transform: none; padding: 2px 8px; border-radius: 6px; border: 1px solid rgba(17, 36, 58, .14); line-height: 1.4; }
.figure { margin: 0; max-width: var(--container-text); } .figure figcaption { margin-top: var(--s1); font-size: var(--fs-xs); color: var(--muted-600); line-height: 1.5; max-width: 60ch; }

/* ---------------------------------------------------------------- hero (HeroSplit) */
.hero { padding-block: clamp(2rem, 1rem + 4vw, 4.5rem); }
.hero__grid { display: grid; gap: var(--s5); align-items: center; }
.hero__title { font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: -.025em; margin: 0 0 var(--s3); max-width: 18ch; }
.hero__lede { font-size: var(--fs-lede); line-height: 1.6; max-width: 60ch; margin: 0 0 var(--s4); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--btn-gap); max-width: 40rem; }
/* paired CTAs share one width: side by side when they fit, otherwise stacked at the same full width (never two ragged pills) */
.hero__actions .btn { flex: 1 1 0; min-width: max-content; }
.hero__actions .btn:only-child { flex: 0 1 auto; }
/* 13c G-04: a pair never grows into two full-width pills (they were 596px each at 1440): each button stops at a sensible width, so a stacked pair is two equal, left-aligned pills */
.hero__actions .btn { max-width: 22rem; }
/* stacked CTAs line up: full width on small phones instead of two ragged pills */
@media (max-width: 479.98px) { .hero__actions { flex-direction: column; align-items: stretch; } .hero__actions .btn { width: 100%; max-width: none; min-width: 0; flex: none; } }
.hero--light { background: var(--sand-50); border-bottom: 1px solid var(--border); }
.hero--light .hero__title { font-size: var(--fs-h1); max-width: 22ch; }
.hero--light .hero__lede { color: var(--navy-800); }
.hero--plain .hero__text { max-width: var(--container-text); }
.hero--dark { position: relative; overflow: hidden; background: radial-gradient(900px 480px at 85% 0%, rgba(var(--accent-rgb), .28), transparent 60%), linear-gradient(135deg, var(--navy-950) 0%, var(--navy-800) 100%); color: #fff; padding-bottom: calc(clamp(2rem, 1rem + 4vw, 4.5rem) + 56px); }
.hero--dark .hero__title { color: #fff; }
.hero--dark .eyebrow { color: var(--accent-chip); }
.hero--dark .hero__lede { color: #D5E3E8; }
.hero__media { position: relative; }
.hero__media .media { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); aspect-ratio: 16 / 10; }
.hero__note { display: flex; align-items: flex-start; gap: 10px; margin: var(--s2) 0 0; padding: 14px 16px; border-radius: 14px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); color: #fff; font-size: .9375rem; font-weight: 600; line-height: 1.45; }
.hero__note svg { flex: none; color: var(--accent-chip); margin-top: 1px; }
.hero--light .hero__note { background: #fff; border-color: var(--border); color: var(--navy-950); }
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--s8); }
  .hero--plain .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__media .media { aspect-ratio: 3 / 2; }
  .hero__media::before { content: ""; position: absolute; inset: 20px -16px -16px 20px; border-radius: var(--radius-lg); background: var(--teal-500); opacity: .22; z-index: 0; }
  .hero--light .hero__media::before { background: var(--teal-700); opacity: .14; }
  .hero__media .media { position: relative; z-index: 1; }
  .hero__note { position: absolute; z-index: 2; left: -32px; bottom: 28px; max-width: 270px; margin: 0; background: #fff; border-color: transparent; color: var(--navy-950); box-shadow: var(--shadow-md); }
  .hero__note svg { color: var(--teal-700); }
}

/* ---------------------------------------------------------------- trust strip */
.trust { position: relative; z-index: 2; margin-top: -56px; }
.trust__list { list-style: none; margin: 0; padding: 8px; display: grid; gap: 0; background: #fff; border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow-md); }
.trust__item { display: flex; align-items: center; gap: 14px; padding: 14px 16px; font-family: var(--font-head); font-weight: 700; font-size: .975rem; line-height: 1.3; color: var(--navy-950); }
.trust__item + .trust__item { border-top: 1px solid var(--border); }
.trust__icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--mist-100); color: var(--teal-700); }
@media (min-width: 640px) { .trust__list { grid-template-columns: repeat(2, 1fr); } .trust__item + .trust__item { border-top: 0; } .trust__item:nth-child(n+3) { border-top: 1px solid var(--border); } .trust__item:nth-child(even) { border-left: 1px solid var(--border); } }
@media (min-width: 1000px) { .trust__list { grid-template-columns: repeat(4, 1fr); } .trust__item { padding: 18px 20px; } .trust__item:nth-child(n+3) { border-top: 0; } .trust__item + .trust__item { border-left: 1px solid var(--border); } }

/* ---------------------------------------------------------------- sections */
.section { padding-block: var(--section-y); }
.section--tint { background: var(--sand-50); }
.section--cta { padding-top: 0; }
/* two consecutive sections on the same (white) background share one gap instead of stacking two paddings */
.section:not(.section--tint):not(.section--note) + .section:not(.section--tint):not(.section--note):not(.section--form) { padding-top: 0; }
.section--tint + .section--tint { padding-top: 0; }
/* Section intro: stacked heading (+ optional intro) at the reading width, or a balanced 5/7 split when the intro is substantial */
.section__head { max-width: var(--container-text); margin-bottom: var(--head-gap); }
.section__head > :last-child, .section__intro > :last-child, .section__intro .prose > :last-child { margin-bottom: 0; }
.section__title { font-size: var(--fs-h2); line-height: var(--lh-head); margin-bottom: var(--s2); }
.section__title--sm { font-size: var(--fs-h3); }
.section__intro { font-size: clamp(1rem, .97rem + .2vw, 1.125rem); color: var(--navy-800); }
@media (min-width: 960px) {
  .section__head--split { max-width: none; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s2) var(--s8); align-items: start; }
  .section__head--split .section__title { margin: 0; }
  .section__head--split .section__intro { padding-top: .35em; }
}
.section__body > * + * { margin-top: var(--s5); }
/* Prose sections: heading stacked over a reading column */
.section__stack > .section__head { margin-bottom: var(--s3); }
.section__main { min-width: 0; }
.section__main > * + * { margin-top: var(--s3); }
.section__stack--solo .section__main { max-width: var(--container-text); }
/* Text + figure: both columns aligned top; the figure travels with long text; block components follow full width */
.section__split--media { display: grid; gap: var(--s4) var(--s8); align-items: start; }
.section__split--media > * { min-width: 0; }
.section__text .section__head { margin-bottom: var(--s3); }
.section__after { margin-top: var(--head-gap); }
@media (min-width: 960px) {
  .section__split--media { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .section__split--media .section__aside { position: sticky; top: 104px; }
  .section--tint .section__split--media { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .section--tint .section__split--media .section__aside { grid-column: 1; grid-row: 1; }
  .section--tint .section__split--media .section__text { grid-column: 2; grid-row: 1; }
}
.stub-notice { margin: var(--s3) 0; padding: 14px 18px; border-radius: 12px; border: 2px dashed var(--warning-line); background: var(--warning-100); color: var(--warning-700); font-size: .9375rem; }

/* prose */
.prose p, .prose ul, .prose ol { max-width: 68ch; }
.prose h3 { font-size: var(--fs-h3); margin-top: 1.6em; } .prose h4 { font-size: var(--fs-h4); margin-top: 1.4em; }
.prose li { margin-bottom: .4em; } .prose > :last-child { margin-bottom: 0; }
.prose strong { color: var(--navy-950); }

.table-scroll { max-width: 100%; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; }
.table-scroll table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: .9375rem; }
.table-scroll th, .table-scroll td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); }
.table-scroll th { background: var(--navy-950); color: #fff; font-family: var(--font-head); font-weight: 800; font-size: .875rem; }
.table-scroll tbody tr:last-child td { border-bottom: 0; } .table-scroll tbody tr:nth-child(even) td { background: var(--sand-50); }
.table-scroll th { font-weight: 700; font-size: var(--fs-xs); } .table-scroll td { line-height: 1.5; }
/* Markdown tables -> mobile cards (one card per row, the column heading as a small label above each value) */
@media (max-width: 639.98px) {
  .table-scroll--cards { overflow: visible; border: 0; background: none; border-radius: 0; }
  .table-scroll--cards table { min-width: 0; }
  .table-scroll--cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .table-scroll--cards table, .table-scroll--cards tbody, .table-scroll--cards tr, .table-scroll--cards td { display: block; width: 100%; }
  .table-scroll--cards tbody { display: grid; gap: 12px; }
  .table-scroll--cards tr { border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; overflow: hidden; }
  .table-scroll--cards tbody tr:nth-child(even) td { background: #fff; }
  .table-scroll--cards td { padding: 10px 16px; border-bottom: 1px solid var(--border); }
  .table-scroll--cards tr > td:first-child { background: var(--navy-950) !important; color: #fff; font-family: var(--font-head); font-weight: 700; }
  .table-scroll--cards tr > td:first-child strong { color: #fff; }
  .table-scroll--cards tr > td:last-child { border-bottom: 0; }
  .table-scroll--cards td:not(:first-child)::before { content: attr(data-label); display: block; margin-bottom: 2px; font: 700 var(--fs-label) var(--font-head); letter-spacing: .08em; text-transform: uppercase; color: var(--muted-600); }
}

/* ---------------------------------------------------------------- cards */
.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--grid-gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
@media (min-width: 900px) { .cards--3, .cards--n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* related-card rows are balanced by count: 2 -> 2 up, 4 -> 2 x 2 then 4 up (never 3 + 1) */
@media (min-width: 640px) { .cards--n2, .cards--n4, .cards--n8 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .cards--n4, .cards--n8 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .2s, box-shadow .2s, border-color .2s; }
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.card__media.media { border-radius: 0; }
.card__body { display: flex; flex-direction: column; flex: 1; padding: var(--card-pad); }
.card__title { font-size: var(--fs-h3); margin-bottom: var(--s1); }
.card__body p { color: var(--ink-900); }
.card__body .link-arrow { margin-top: auto; }
.card__link { color: var(--navy-950); text-decoration: none; }
.card__link::after { content: ""; position: absolute; inset: 0; }
.card__link:focus-visible { outline: 0; } .card__link:focus-visible::after { outline: 3px solid var(--focus); outline-offset: -3px; border-radius: var(--radius); }
.card:hover .card__link { color: var(--teal-700); }
.cards__more { margin: var(--s3) 0 0; }
.card--text .card__body { padding: var(--card-pad); }
.card--text .eyebrow { margin-bottom: var(--s1); }

/* ---------------------------------------------------------------- accordions (details/summary) */
.acc { border: 1px solid var(--border); border-radius: 14px; background: #fff; }
.acc + .acc { margin-top: 10px; }
.acc > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); min-height: 56px; padding: 14px 20px; cursor: pointer; list-style: none; font-family: var(--font-head); font-weight: 700; font-size: 1.0625rem; color: var(--navy-950); border-radius: 14px; }
.acc > summary::-webkit-details-marker { display: none; }
.acc > summary::after { content: ""; flex: none; width: 10px; height: 10px; border-right: 2.5px solid var(--teal-700); border-bottom: 2.5px solid var(--teal-700); transform: rotate(45deg) translateY(-3px); transition: transform .2s; }
.acc[open] > summary::after { transform: rotate(-135deg) translateY(-3px); }
.acc[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.acc__body { padding: 0 20px 18px; }
.acc__body > :last-child { margin-bottom: 0; }
.faq { max-width: 860px; }

/* ---------------------------------------------------------------- callouts */
.callout { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: 14px; border: 1px solid var(--border); border-left-width: 5px; background: #fff; max-width: 68ch; }
.callout > svg { flex: none; margin-top: 2px; }
.callout p { margin: 0; } .callout p + p { margin-top: 6px; }
.callout__label { font-family: var(--font-head); font-weight: 800; font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px !important; }
.callout__fine { font-size: .875rem; color: var(--muted-600); }
.callout--limitation { background: var(--warning-100); border-color: var(--warning-line); } .callout--limitation .callout__label, .callout--limitation > svg { color: var(--warning-700); }
.callout--legal { background: var(--mist-100); border-color: var(--teal-700); } .callout--legal .callout__label, .callout--legal > svg { color: var(--teal-800); }
.callout--tip { background: #fff; border-color: var(--teal-500); } .callout--tip .callout__label, .callout--tip > svg { color: var(--teal-700); }
/* SN-AUD-024: example-note fill-in fields. Template tokens like [date] read as fields the reader completes, not as unfinished copy. */
.callout--example .fillin { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: .9em; font-weight: 600; color: var(--teal-800); background: var(--mist-100); border: 1px dashed var(--teal-700); border-radius: 5px; padding: 0 .3em; white-space: nowrap; }
.areas__note { max-width: none; margin-top: var(--s3); }

.contact-placeholder { display: flex; gap: 12px; align-items: flex-start; margin: 0; padding: 16px 18px; max-width: 68ch; border: 1px dashed var(--border-strong); border-radius: 12px; background: var(--sand-50); color: var(--navy-800); font-weight: 600; }
.contact-placeholder svg { flex: none; margin-top: 2px; color: var(--teal-700); }

/* ---------------------------------------------------------------- CTA bands + steps */
.cta-band { display: flex; flex-direction: column; gap: var(--s3); padding: clamp(24px, 4vw, 48px); border-radius: var(--radius-lg); color: #fff; background: radial-gradient(600px 300px at 100% 0%, rgba(var(--accent-rgb), .35), transparent 60%), linear-gradient(135deg, var(--navy-950), var(--navy-800)); }
.cta-band__title { font-family: var(--font-head); font-weight: 800; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.125rem); line-height: 1.2; color: #fff; margin: 0 0 var(--s1); letter-spacing: -.015em; }
.cta-band p { color: #D5E3E8; margin: 0; max-width: 46em; }
.cta-band .cta-band__title { color: #fff; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (min-width: 900px) { .cta-band { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--s6); } .cta-band__actions { flex: none; flex-direction: column; align-items: stretch; } }
.cta-band--partner { margin-top: var(--s3); }
.article__body .cta-band, .form-layout__info .cta-band { flex-direction: column; align-items: flex-start; gap: var(--s2); }
.article__body .cta-band__actions, .form-layout__info .cta-band__actions { flex-direction: row; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--grid-gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); counter-reset: none; }
.steps__item { padding: var(--card-pad); background: #fff; border: 1px solid var(--border); border-radius: var(--radius); }
.section--tint .steps__item { background: #fff; }
.steps__num { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: var(--s2); border-radius: 50%; background: var(--teal-700); color: #fff; font-family: var(--font-head); font-weight: 800; }
.steps__title { font-size: var(--fs-h3); } .steps__item p { margin: 0; font-size: var(--fs-sm); line-height: 1.55; }

/* ---------------------------------------------------------------- Framework 1: inspection selector */
.selector { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(20px, 3.5vw, 44px); box-shadow: var(--shadow-sm); }
.selector__intro p { max-width: 60ch; }
.selector:not(.is-enhanced) .selector__steps, .selector:not(.is-enhanced) .selector__intro { display: none; }
.selector.is-enhanced .selector__static { display: none; }
.selector__static-label { font-family: var(--font-head); font-weight: 800; margin-bottom: var(--s1); }
.selector__fallback { margin: 0; padding-left: 1.2em; } .selector__fallback li { margin-bottom: 6px; }
.selector__steps { display: grid; gap: var(--s4); }
.selector__step { min-width: 0; margin: 0; padding: 0; border: 0; }
.selector__step legend { display: flex; align-items: center; gap: 10px; padding: 0; margin-bottom: var(--s2); font-family: var(--font-head); font-weight: 800; font-size: 1.0625rem; color: var(--navy-950); }
.step-no { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--navy-950); color: #fff; font-size: .875rem; }
.optional { font-weight: 600; font-size: .8125rem; color: var(--muted-600); }
.choices { display: grid; gap: 10px; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.choice label { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 12px 16px; border: 1.5px solid var(--border-strong); border-radius: 12px; background: #fff; font-size: .9688rem; font-weight: 500; line-height: 1.35; cursor: pointer; transition: border-color .15s, background-color .15s; }
.choice label::before { content: ""; flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--border-strong); background: #fff; transition: border-color .15s, box-shadow .15s; }
.choice input:checked + label { border-color: var(--teal-700); background: var(--mist-100); font-weight: 600; }
.choice input:checked + label::before { border-color: var(--teal-700); box-shadow: inset 0 0 0 4px #fff; background: var(--teal-700); }
.choice input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 2px; }
.choice:hover label { border-color: var(--teal-700); }
@media (min-width: 1000px) { .selector__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); } }
.selector__result { margin-top: var(--s4); padding: clamp(20px, 3vw, 32px); border-radius: var(--radius); background: var(--navy-950); color: #fff; }
.selector__result .eyebrow { color: var(--accent-chip); margin-bottom: 6px; }
.selector__result-title { font-size: 1.625rem; color: #fff; margin-bottom: var(--s1); }
.selector__result p { color: #D5E3E8; max-width: 62ch; }
.selector__result .hero__actions { margin-top: var(--s2); }
.selector__result .btn--primary { background: var(--teal-500); color: var(--navy-950); } .selector__result .btn--primary:hover { background: var(--accent-hover); color: var(--navy-950); }
.selector__result a:not(.btn) { color: var(--accent-soft); }
.selector__caveat { margin: var(--s3) 0 0; font-size: .875rem; color: var(--muted-600); }

/* ---------------------------------------------------------------- Framework 2: property comparison */
.cmp-legend { display: flex; flex-wrap: wrap; gap: 8px 10px; list-style: none; margin: 0 0 var(--s2); padding: 0; }
.cmp-legend .chip { white-space: normal; max-width: 100%; align-items: flex-start; }
.cmp-legend .chip svg { margin-top: 3px; }
.chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 14px; font-size: .8125rem; font-weight: 700; line-height: 1.3; text-wrap: balance; border: 1.5px solid transparent; }
.chip--included { background: var(--teal-700); color: #fff; }
.chip--subject { background: var(--warning-100); color: var(--warning-700); border: 1.5px dashed var(--warning-line); }
.chip--excluded { background: var(--sand-50); color: var(--navy-950); border: 1.5px solid var(--border-strong); }
.cmp__table-wrap { border: 1px solid var(--border); border-radius: var(--radius); background: #fff; overflow: hidden; }
.cmp__table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cmp__table th, .cmp__table td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--border); }
.cmp__table tbody th { vertical-align: top; } .cmp__table tbody td { vertical-align: middle; } .cmp__table thead th { vertical-align: middle; }
.cmp__table thead th { background: var(--navy-950); color: #fff; font-family: var(--font-head); font-weight: 700; font-size: var(--fs-sm); border-bottom: 0; }
.cmp__table thead th:first-child, .cmp__table tbody th { width: 31%; } .cmp__table tbody th { font-weight: 700; color: var(--navy-950); } .cmp__label { display: block; font-family: var(--font-head); font-size: 1rem; line-height: 1.35; }
.cmp__table tbody th small { display: block; margin-top: 4px; font-family: var(--font-body); font-weight: 400; font-size: var(--fs-xs); line-height: 1.45; color: var(--muted-600); }
.cmp__table tbody tr:last-child > * { border-bottom: 0; } .cmp__table tbody tr:nth-child(even) > * { background: var(--sand-50); }
.cmp__caption { margin: var(--s2) 0 0; font-size: var(--fs-xs); color: var(--muted-600); max-width: var(--measure); }
/* comparison, table mode: the status chips stay on one line (T-POL1). Tighter chip padding and a slightly narrower label column give each of the
   three value columns room for the full label; in narrower tables (container 640-880px, e.g. a reading column) the table cells show a compact
   visual label instead and the full wording stays available to screen readers. */
.chip__short { display: inline; }
@container cmp (min-width: 880px) {
  .cmp__table th, .cmp__table td { padding-left: 14px; padding-right: 10px; }
  .cmp__table tbody th { width: 31%; }
  .cmp__table .chip { white-space: nowrap; gap: 6px; padding: 5px 10px; font-size: .78125rem; }
}
/* comparison -> mobile cards: each row is a card with a navy header and a labelled value per property type. A container query,
   so the table also becomes cards inside a narrow reading column (service and guide pages at 1000-1100px). */
.cmp { container-type: inline-size; container-name: cmp; }
@container cmp (max-width: 639.98px) {
  .cmp__table-wrap { border: 0; border-radius: 0; background: none; overflow: visible; }
  .cmp__table, .cmp__table tbody, .cmp__table tr, .cmp__table th, .cmp__table td { display: block; width: 100%; }
  .cmp__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .cmp__table tbody { display: grid; gap: 8px; }
  .cmp__table tbody tr { position: relative; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; overflow: hidden; }
  .cmp__table tbody tr:nth-child(even) > * { background: #fff; }
  /* tight cards (13c G-01): a compact header and slim value rows; a row whose values are all the same shows one "All three" line */
  .cmp__table tbody th { width: auto; padding: 7px 14px 7px; background: var(--navy-950) !important; color: #fff; border: 0; }
  .cmp__table tbody th .cmp__label { font-size: .9375rem; line-height: 1.3; }
  .cmp__table tbody th small { margin-top: 2px; font-size: .78125rem; line-height: 1.4; color: #C9D8DE; }
  .cmp__table td { display: grid; grid-template-columns: 6.25rem minmax(0, 1fr); align-items: center; justify-items: start; gap: var(--s1); padding: 3px 14px; border-bottom: 1px solid var(--border); }
  .cmp__table tbody tr > td:last-child { border-bottom: 0; }
  .cmp__table td::before { content: attr(data-label); font: 700 var(--fs-xs) var(--font-head); color: var(--navy-950); }
  .cmp__table tr[data-same] td[data-all-label]::before { content: attr(data-all-label); }
  .cmp__table tr[data-same] td.cmp__dup { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .cmp__table tr[data-same] td[data-all-label] { border-bottom: 0; }
  .cmp__table .chip { padding: 3px 10px; line-height: 1.25; }
}

/* compact labels (13c G-01, D-16, D-17): whenever the comparison container is narrower than the full-label table needs (below 880px: a
   reading-column table AND the mobile cards), the status chips, in the cells and in the key, show the compact label on one line. The
   full wording stays in the DOM for assistive technology. The shape icon never shrinks. */
.chip svg { flex: none; }
@container cmp (max-width: 879.98px) {
  .cmp__table .chip { white-space: nowrap; gap: 6px; padding: 5px 10px; }
}

/* ---------------------------------------------------------------- Framework 3: six areas (and generic tabs) */
.tabs__panels { display: grid; gap: var(--grid-gap); grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.area { padding: var(--card-pad); background: #fff; border: 1px solid var(--border); border-radius: var(--radius); }
.area__head { display: flex; align-items: center; gap: 12px; margin-bottom: var(--s1); }
.area__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--mist-100); color: var(--teal-700); flex: none; }
.area__title { font-size: var(--fs-h3); margin: 0; }
.area__summary { color: var(--muted-600); margin-bottom: var(--s2); }
.area__list { margin: 0 0 var(--s2); padding-left: 1.15em; } .area__list li { margin-bottom: 4px; }
.area__limit { margin: 0; padding: 12px 14px; border-radius: 10px; background: var(--warning-100); color: var(--warning-700); font-size: .9063rem; line-height: 1.5; }
.area__limit strong { text-transform: uppercase; letter-spacing: .06em; font-size: .75rem; }
/* enhanced: tablist (desktop) or accordion (mobile) */
.tabs--tabs .tabs__panels, .tabs--acc .tabs__panels { display: block; }
.tabs__list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 var(--s3); padding: 0 0 4px; }
.tabs__tab { flex: 0 1 auto; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 20px; border: 1.5px solid var(--border-strong); border-radius: 999px; background: #fff; color: var(--navy-950); font: 700 .9688rem var(--font-head); cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; }
.tabs__tab:hover { border-color: var(--teal-700); }
.tabs__tab[aria-selected="true"] { background: var(--navy-950); border-color: var(--navy-950); color: #fff; }
.tabs--tabs .tabs__panel[hidden], .tabs--acc .tabs__panel[hidden] { display: none; }
.tabs--tabs .area { padding: clamp(24px, 3vw, 40px); display: grid; gap: 0 var(--s6); grid-template-columns: 1fr; }
@media (min-width: 800px) { .tabs--tabs .area { grid-template-columns: 1.2fr 1fr; } .tabs--tabs .area__head, .tabs--tabs .area__summary { grid-column: 1; } .tabs--tabs .area__list { grid-column: 1; } .tabs--tabs .area__limit { grid-column: 2; grid-row: 1 / span 3; align-self: start; } }
.tabs__accbtn { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 52px; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.tabs__accbtn::after { content: ""; flex: none; width: 10px; height: 10px; border-right: 2.5px solid var(--teal-700); border-bottom: 2.5px solid var(--teal-700); transform: rotate(45deg) translateY(-3px); transition: transform .2s; }
.tabs__accbtn[aria-expanded="true"]::after { transform: rotate(-135deg) translateY(-3px); }
.tabs--acc .tabs__panel { padding: 8px var(--s2); margin-bottom: 10px; } .tabs--acc .tabs__panel > .area__head { margin-bottom: 0; }
.tabs--acc .area__head .area__title { flex: 1; } .tabs--acc .tabs__panel > :not(.area__head) { margin-top: 12px; } .tabs--acc .tabs__panel > :last-child { margin-bottom: 12px; }

/* Framework 4 (journey) is defined in the round-2 block at the end of this file (container-query layout). */

/* ---------------------------------------------------------------- Framework 5: report explorer */
.report { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(18px, 3vw, 36px); }
.report__banner { display: flex; align-items: center; gap: 10px; margin: 0 0 var(--s3); padding: 12px 16px; border: 2px dashed var(--warning-line); border-radius: 12px; background: var(--warning-100); color: var(--warning-700); font-weight: 800; font-family: var(--font-head); }
.report__banner svg { flex: none; }
.report__note { margin: var(--s3) 0 0; font-size: .875rem; color: var(--muted-600); max-width: 70ch; }
.rp-h { font-size: var(--fs-h3); margin-bottom: var(--s2); } .rp-sub { margin: var(--s3) 0 var(--s1); font-size: 1rem; }
.rp-howto { display: grid; gap: 12px; margin: 0 0 var(--s4); } .rp-howto > div { display: grid; gap: 2px; padding: 12px 16px; background: var(--sand-50); border-radius: 12px; } .rp-howto dt { font-weight: 700; font-family: var(--font-head); color: var(--navy-950); } .rp-howto dd { margin: 0; color: var(--ink-900); font-size: .9688rem; }
@media (min-width: 800px) { .rp-howto > div { grid-template-columns: 190px 1fr; gap: var(--s2); align-items: baseline; } }
.rp-status { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; }
.rp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .rp-list li { padding: 12px 16px; border: 1px solid var(--border); border-radius: 12px; font-size: .9688rem; }
.findings { display: grid; gap: var(--grid-gap); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.finding { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s2); border: 1px solid var(--border); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-sm); }
.finding__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.finding__id { padding: 2px 9px; border-radius: 6px; background: var(--navy-950); color: #fff; font: 700 .75rem var(--font-body); letter-spacing: .04em; }
.finding__room { font-size: 1.125rem; margin: 0; flex: 1 1 auto; }
.finding__photo { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; aspect-ratio: 16 / 9; border-radius: 10px; color: var(--muted-600); font-size: .8125rem; font-weight: 600; background: repeating-linear-gradient(135deg, var(--mist-100) 0 12px, #DDEFEE 12px 24px); }
.finding__facts { display: grid; gap: 10px; margin: 0; } .finding__facts dt { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-600); font-weight: 700; } .finding__facts dd { margin: 2px 0 0; font-size: .9688rem; }
.status { display: inline-flex; align-items: center; gap: 7px; padding: 3px 11px; border-radius: 999px; border: 1.5px solid; font-size: .8125rem; font-weight: 700; line-height: 1.3; }
.status::before { content: ""; width: 8px; height: 8px; background: currentColor; }
.status--observed { color: var(--navy-800); background: #E9EEF2; border-color: #B9C6D0; } .status--observed::before { border-radius: 50%; }
.status--submitted { color: var(--teal-800); background: var(--mist-100); border-color: var(--teal-700); } .status--submitted::before { border-radius: 2px; }
.status--review { color: var(--warning-700); background: var(--warning-100); border-color: var(--warning-line); } .status--review::before { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.status--rectified { color: #0B5D3B; background: #E3F4EA; border-color: #4CA878; } .status--rectified::before { clip-path: polygon(14% 52%, 0 66%, 38% 100%, 100% 22%, 86% 8%, 38% 72%); }
.status--open { color: var(--navy-950); background: #fff; border: 1.5px dashed var(--navy-800); } .status--open::before { background: none; border: 2px solid currentColor; border-radius: 50%; }
.prio { display: inline-block; padding: 2px 10px; border-radius: 6px; font-size: .8125rem; font-weight: 800; letter-spacing: .02em; border: 1.5px solid; }
.prio--higher { color: #8A2C1B; background: #FCEAE5; border-color: #E5A395; } .prio--medium { color: var(--warning-700); background: var(--warning-100); border-color: var(--warning-line); } .prio--lower { color: var(--navy-800); background: #E9EEF2; border-color: #B9C6D0; }
.report .tabs--tabs .tabs__panel { padding: 0; }

/* ---------------------------------------------------------------- Framework 6: investment explainer */
.invest { display: grid; gap: var(--s4); }
.invest__factors { display: grid; gap: var(--s2); align-items: stretch; }
.invest__factor { padding: var(--s3); background: #fff; border: 1px solid var(--border); border-radius: var(--radius); }
.invest__icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: var(--s2); border-radius: 14px; background: var(--mist-100); color: var(--teal-700); }
.invest__title { font-size: var(--fs-h3); } .invest__factor p { margin: 0; }
.invest__plus { display: grid; place-items: center; font-family: var(--font-head); font-weight: 800; color: var(--muted-600); text-transform: uppercase; letter-spacing: .1em; font-size: .8125rem; }
@media (min-width: 800px) { .invest__factors { grid-template-columns: 1fr auto 1fr; } }
.invest__model { padding: clamp(20px, 3vw, 36px); border-radius: var(--radius); background: var(--mist-100); border: 1px solid #CFE5E3; }
.invest__model-label, .invest__touch-head { font-family: var(--font-head); font-weight: 800; font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; color: var(--teal-800); margin: 0 0 var(--s2); }
.invest__eq { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 var(--s4); }
.invest__eq .term { padding: 9px 16px; border-radius: 999px; background: #fff; border: 1.5px solid var(--border-strong); font-family: var(--font-head); font-weight: 700; color: var(--navy-950); }
.invest__eq .term--result { background: var(--navy-950); border-color: var(--navy-950); color: #fff; }
.invest__eq .op { font-family: var(--font-head); font-weight: 800; font-size: 1.25rem; color: var(--teal-700); }
.invest__touches { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; } .invest__touches li { padding: 14px 18px; background: #fff; border-radius: 12px; }
@media (min-width: 900px) { .invest__touches { grid-template-columns: repeat(3, 1fr); } }
.invest__note { margin: 0; font-size: .9063rem; color: var(--muted-600); max-width: 70ch; }

/* ---------------------------------------------------------------- checklist */
.checklist { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(20px, 3vw, 36px); }
.checklist__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--s2); margin-bottom: var(--s3); }
.checklist__title { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); margin-bottom: 4px; } .checklist__head p { margin: 0; color: var(--muted-600); }
.checklist__groups { display: grid; gap: var(--s3) var(--s4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.checklist__group h3 { font-size: var(--fs-h4); padding-bottom: 8px; border-bottom: 2px solid var(--mist-100); }
.checklist__group ul { list-style: none; margin: 0; padding: 0; }
.checklist__group li { position: relative; display: flex; gap: 12px; align-items: flex-start; }
.checklist__group input { flex: none; width: 24px; height: 24px; margin: 10px 0 0; accent-color: var(--teal-700); cursor: pointer; }
.checklist__group label { flex: 1; padding: 10px 0; font-size: .9688rem; cursor: pointer; }
.checklist__note { margin: var(--s3) 0 0; font-size: .875rem; color: var(--muted-600); }

/* ---------------------------------------------------------------- article / guide */
.article { display: grid; gap: var(--s5) var(--s8); padding-block: var(--section-y); }
.article__main { min-width: 0; }
.article__body > * + * { margin-top: var(--s3); }
.article__body > h2 { margin-top: clamp(3rem, 2.25rem + 2.5vw, 4.5rem); font-size: var(--fs-h2); }
.article__body > h2 + * { margin-top: var(--s2); }
.article__body > h2:first-child { margin-top: 0; }
.article__body h3 { font-size: var(--fs-h3); }
.article__body p, .article__body ul, .article__body ol { max-width: var(--measure); }
.article__body > .figure, .article__body > .callout, .article__body > .commercial-terms { margin-top: var(--s4); }
.article__body > .figure { max-width: var(--col-read); }
/* the reading layout is followed by full-width bands: one gap, not two paddings */
.article + .section:not(.section--tint) { padding-top: 0; }
.article__body li { margin-bottom: .45em; }
.article__aside { min-width: 0; }
.review-bar { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 var(--s4); padding: 0; }
.review-bar li { padding: 4px 12px; border-radius: 999px; background: var(--sand-50); border: 1px solid var(--border); font-size: .8125rem; font-weight: 600; color: var(--navy-800); }
.sources { margin-top: var(--s8); padding-top: var(--s3); border-top: 1px solid var(--border); font-size: .9375rem; } .sources ul { margin: 0; }
.toc { padding: var(--s3); border: 1px solid var(--border); border-radius: var(--radius); background: #fff; margin-bottom: var(--s3); }
.toc__title { font-family: var(--font-head); font-weight: 800; margin: 0 0 var(--s1); }
.toc ol { list-style: none; margin: 0; padding: 0; font-size: .9375rem; } .toc li { margin: 0; border-left: 2px solid var(--border); } .toc a { display: block; padding: 6px 0 6px 14px; text-decoration: none; color: var(--navy-800); line-height: 1.4; } .toc a:hover { color: var(--teal-700); text-decoration: underline; } .toc li:hover { border-left-color: var(--teal-700); }
.aside-card { padding: var(--s3); border-radius: var(--radius); background: var(--navy-950); color: #fff; --focus: var(--accent-soft); }
.aside-card__title { font-family: var(--font-head); font-weight: 800; font-size: 1.1875rem; color: #fff; margin-bottom: 8px; } .aside-card p { color: #D5E3E8; font-size: .9688rem; }
.aside-card .btn { width: 100%; height: auto; padding: 12px 16px; font-size: var(--fs-sm); white-space: normal; text-align: center; background: var(--teal-500); color: var(--navy-950); } .aside-card .btn:hover { background: var(--accent-hover); color: var(--navy-950); }
@media (min-width: 1000px) { .article { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; } .article__aside { position: sticky; top: 104px; } }

/* ---------------------------------------------------------------- forms (disabled "BLOCKED" state) */
/* form layout: see round-2 block (the form is first in the DOM and on screen at every width) */
.form-layout__form--wide { max-width: 760px; margin-inline: auto; }
.form-card { background: #fff; border: 1px solid var(--border-strong); border-radius: var(--radius-lg); padding: clamp(20px, 3vw, 36px); box-shadow: var(--shadow-md); }
.form-card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px var(--s2); margin-bottom: var(--s2); }
.form-card__title { font-size: 1.5rem; margin: 0; }
.status-blocked { display: inline-block; padding: 5px 14px; border-radius: 999px; border: 2px solid var(--warning-line); background: var(--warning-100); color: var(--warning-700); font: 800 .8125rem var(--font-head); letter-spacing: .08em; text-transform: uppercase; }
.notice { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; margin-bottom: var(--s3); border-radius: 14px; }
.notice > svg { flex: none; margin-top: 2px; } .notice p { margin: 0; } .notice p + p { margin-top: 6px; font-size: .9375rem; }
.status-test { display: inline-block; padding: 5px 14px; border-radius: 999px; border: 2px solid var(--navy-950); background: #FFE08A; color: var(--navy-950); font: 800 .8125rem var(--font-head); letter-spacing: .08em; text-transform: uppercase; }
.notice--test { background: #FFF7DA; border: 2px dashed var(--navy-950); color: var(--navy-950); }
.notice--success { background: var(--mist-100); border: 2px solid var(--teal-700); color: var(--navy-950); } .notice--success h3 { margin: 0 0 6px; font-size: 1.25rem; }
.notice--error { background: #FDECEC; border: 2px solid #B42318; color: #7A1A12; }
.notice--error a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.notice[hidden] { display: none; } .notice:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.notice--blocked { background: var(--warning-100); border: 2px solid var(--warning-line); color: var(--warning-700); } .notice--blocked strong { color: #5A3F00; }
.form__root { margin: 0; padding: 0; border: 0; min-width: 0; }
.form__group { margin: 0 0 var(--s4); padding: 0; border: 0; min-width: 0; }
.form__group legend { padding: 0 0 var(--s1); margin-bottom: var(--s2); width: 100%; font-family: var(--font-head); font-weight: 800; font-size: 1.0625rem; color: var(--navy-950); border-bottom: 2px solid var(--mist-100); }
.field { margin-bottom: var(--s2); }
.field__label { display: block; margin-bottom: 6px; font-weight: 600; font-size: .9688rem; color: var(--navy-950); }
.field__req { font-weight: 500; font-size: .8125rem; color: var(--muted-600); }
.field__hint { margin: -2px 0 8px; font-size: .875rem; color: var(--muted-600); line-height: 1.45; }
.field input, .field select, .field textarea { width: 100%; min-height: 48px; padding: 11px 14px; border: 1.5px solid var(--border-strong); border-radius: var(--radius-sm); background: #fff; color: var(--ink-900); font: inherit; font-size: 1rem; }
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--teal-700); }
.check { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 6px; }
.check input { flex: none; width: 24px; height: 24px; margin: 10px 0 0; accent-color: var(--teal-700); }
.check label { padding: 10px 0; font-size: .9688rem; line-height: 1.5; }
/* T-FORMS2 referral permission-aware two-route flow */
.form__group-intro { margin: 0 0 var(--s2); color: var(--muted-600); font-size: var(--fs-sm); line-height: 1.5; }
.radio { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; }
.radio + .radio { border-top: 1px solid var(--border); }
.radio input { flex: none; width: 22px; height: 22px; margin-top: 2px; accent-color: var(--teal-700); }
.radio label { font-size: .9688rem; line-height: 1.5; }
.route-panel[hidden], .referral-link__out[hidden] { display: none; }
.form__attest { margin: var(--s2) 0 var(--s4); padding: 12px 14px; border-radius: 10px; background: var(--mist-100); color: var(--navy-950); font-size: .9063rem; line-height: 1.55; }
.referral-link { padding: var(--card-pad); background: var(--sand-50); border: 1px solid var(--border); border-radius: var(--radius); }
.referral-link__title { margin: 0 0 var(--s1); font-size: var(--fs-h3); }
.referral-link__out { margin-top: var(--s2); }
.referral-link__row { display: flex; gap: 8px; align-items: stretch; }
.referral-link__row input { flex: 1 1 auto; min-width: 0; min-height: 48px; padding: 11px 14px; border: 1.5px solid var(--border-strong); border-radius: var(--radius-sm); background: #fff; font: inherit; }
.referral-link__row .btn { flex: none; }
.field__error { margin: 6px 0 0; font-size: .9063rem; font-weight: 600; color: #B42318; }
.field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #B42318; border-width: 2px; }
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form[aria-busy="true"] .btn { opacity: .7; cursor: progress; }
.form__actions { margin-top: var(--s3); }
.form__root:disabled .field input, .form__root:disabled .field select, .form__root:disabled .field textarea { background: var(--sand-50); color: var(--muted-600); border-color: var(--border); cursor: not-allowed; }
.form__root:disabled .check label, .form__root:disabled .field__label { color: var(--muted-600); }

/* ---------------------------------------------------------------- footer */
.site-footer { background: var(--navy-950); color: #C9D8DE; padding: clamp(2.5rem, 1.5rem + 4vw, 5rem) 0 calc(var(--s4) + 8px); font-size: .9688rem; }
.footer__grid { display: grid; gap: var(--s5); padding-bottom: var(--s5); border-bottom: 1px solid rgba(255, 255, 255, .14); }
.footer__brand { max-width: 430px; } .footer__caveat { margin-top: var(--s3); color: #fff; } .footer__limits { font-size: .875rem; color: #A9BFC8; }
.footer__h { font-family: var(--font-head); font-weight: 800; font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-chip); margin: 0 0 var(--s2); }
.footer__col ul, .footer__legal { list-style: none; margin: 0; padding: 0; }
.site-footer .logo { display: inline-flex; padding: 8px 0; }
.site-footer a { color: #E4EEF1; text-decoration: none; display: inline-block; padding: 10px 0; min-height: 44px; } .site-footer a:hover { color: #fff; text-decoration: underline; }
.footer__bottom { display: flex; flex-direction: column; gap: var(--s1); padding-top: var(--s3); font-size: .875rem; color: #A9BFC8; } .footer__bottom p { margin: 0; }
.footer__legal { display: flex; flex-wrap: wrap; gap: 0 var(--s3); }
@media (min-width: 700px) { .footer__grid { grid-template-columns: repeat(2, 1fr); } .footer__brand { grid-column: 1 / -1; } }
@media (min-width: 1000px) { .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } .footer__brand { grid-column: auto; } .footer__bottom { flex-direction: row; justify-content: space-between; align-items: center; } }

/* ---------------------------------------------------------------- motion + print */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .card:hover { transform: none; }
}
@media print {
  .utility, .site-header, .site-footer, .quote-bar, .staging-ribbon, .skip-link, .hero, .cta-band, .btn, .js-only, .article__aside, .toc, .trust { display: none !important; }
  body { font-size: 11pt; color: #000; background: #fff; padding: 0 !important; }
  .section, .article { padding-block: 12pt; } .container { width: 100%; }
  .section--tint { background: none; }
  a { color: #000; text-decoration: none; }
  .checklist, .callout, .finding, .acc { break-inside: avoid; border-color: #888; }
  .checklist__group input { appearance: none; -webkit-appearance: none; width: 14pt; height: 14pt; border: 1.5pt solid #000; border-radius: 2pt; margin-top: 6pt; }
  .tabs__panel[hidden] { display: block !important; }
}

/* ================================================================ round 2: illustrations, filters, Defect Library */
/* Original SVG illustrations (4:3, light mist background). Always labelled "Illustration". */
.media--illo { aspect-ratio: 4 / 3; background: var(--mist-100); }
.media--illo img { object-fit: contain; }
.hero__media .media--illo { aspect-ratio: 4 / 3; border: 1px solid var(--border); background: var(--mist-100); }
.card__media.media--illo { border-radius: 0; border-bottom: 1px solid var(--border); }

/* filter tools (search + chips + count), shared by the Defect Library and the Knowledge Centre */
.ftools { display: grid; gap: var(--s2) var(--s4); padding: clamp(16px, 2.5vw, 28px); margin-bottom: var(--s2); background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.ftools[hidden], .ftools__empty[hidden], [data-filter-item][hidden], [data-filter-section][hidden], .dl__jump[hidden], [data-filter-clear][hidden] { display: none !important; }
.ftools__label { display: block; margin-bottom: 6px; font-family: var(--font-head); font-weight: 800; font-size: 1rem; color: var(--navy-950); }
.ftools__input { width: 100%; min-height: 52px; padding: 12px 16px; border: 1.5px solid var(--border-strong); border-radius: 999px; background: #fff; color: var(--ink-900); font: inherit; font-size: 1rem; }
.ftools__input:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--teal-700); }
.ftools__group { margin: 0; padding: 0; border: 0; min-width: 0; }
.ftools__group legend { padding: 0; margin-bottom: 8px; font-family: var(--font-head); font-weight: 800; font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-600); }
.ftools__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fchip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1.5px solid var(--border-strong); border-radius: 999px; background: #fff; color: var(--navy-950); font: 700 .9375rem var(--font-head); cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; }
.fchip:hover { border-color: var(--teal-700); }
.fchip[aria-pressed="true"] { background: var(--navy-950); border-color: var(--navy-950); color: #fff; }
.fchip[aria-pressed="true"]::before { content: ""; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--accent-chip); }
.ftools__clear { justify-self: start; min-height: 44px; }
.ftools__count { margin: 0 0 var(--s3); font-weight: 600; color: var(--navy-800); }
.ftools__empty { padding: var(--s3); margin-bottom: var(--s3); border: 2px dashed var(--border-strong); border-radius: var(--radius); background: var(--sand-50); }
.ftools__empty p { margin: 0 0 8px; }
@media (min-width: 900px) { .ftools { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) auto; align-items: start; } .ftools__search { grid-column: 1 / -1; } .ftools { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } .ftools__clear { grid-column: 1 / -1; } }

.dl__jump { margin-bottom: var(--s4); } .dl__jump-label { margin: 0 0 6px; font-weight: 700; }
.dl__jump ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.dl__jump a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1.5px solid var(--border-strong); border-radius: 999px; text-decoration: none; font: 700 .9375rem var(--font-head); color: var(--navy-950); background: #fff; }
.dl__rooms { margin-top: calc(var(--s3) * -1); }
.dl__rooms-list { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); align-items: start; gap: 8px; }
.dl__room { border: 1.5px solid var(--border-strong); border-radius: 18px; background: #fff; }
.dl__room > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 0 16px; cursor: pointer; font: 700 .9375rem var(--font-head); color: var(--navy-950); }
.dl__room[open] { background: var(--sand-50); }
.dl__room ul { display: block; margin: 0; padding: 4px 16px 12px 32px; list-style: disc; }
.dl__room li { margin: 0; } .dl__room a { display: inline-block; padding: 6px 0; min-height: 32px; border: 0; border-radius: 0; background: none; font: 600 .9375rem var(--font-body); text-decoration: underline; color: var(--teal-700); }
.dl__group { margin-top: var(--s6); } .dl__group:first-child { margin-top: var(--s4); }
.dl__heading { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); margin-bottom: var(--s3); }
.dl__n { font: 600 .875rem var(--font-body); color: var(--muted-600); }
.dl__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--grid-gap); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); align-items: start; }
.dcard { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); scroll-margin-top: 110px; }
.dcard:target { outline: 3px solid var(--teal-500); outline-offset: 2px; }
.dcard__media.media { border-radius: 0; border-bottom: 1px solid var(--border); }
.dcard__body { padding: var(--s2) var(--s3) var(--s3); display: flex; flex-direction: column; gap: 10px; }
.dcard__meta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 0; font-size: .8125rem; }
.tag { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--mist-100); color: var(--teal-800); font-weight: 800; letter-spacing: .02em; }
.dcard__prio { color: var(--muted-600); font-weight: 600; }
.dcard__title { font-size: var(--fs-h3); margin: 0; }
.dcard__teaser { margin: 0; font-size: .9688rem; }
.dcard__chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.chip-sm { padding: 2px 10px; border: 1px solid var(--border-strong); border-radius: 999px; font-size: .8125rem; color: var(--navy-800); background: var(--sand-50); }
.dcard__more { margin-top: 4px; border-top: 1px solid var(--border); padding-top: 4px; }
.dcard__more > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; cursor: pointer; list-style: none; font: 700 .9688rem var(--font-head); color: var(--teal-800); }
.dcard__more > summary::-webkit-details-marker { display: none; }
.dcard__more > summary::after { content: ""; flex: none; width: 9px; height: 9px; border-right: 2.5px solid var(--teal-700); border-bottom: 2.5px solid var(--teal-700); transform: rotate(45deg) translateY(-3px); transition: transform .2s; }
.dcard__more[open] > summary::after { transform: rotate(-135deg) translateY(-3px); }
.dcard__facts { margin: 0; display: grid; gap: 10px; } .dcard__facts dt { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-600); font-weight: 700; } .dcard__facts dd { margin: 2px 0 0; font-size: .9375rem; }
.dcard__foot { margin: var(--s2) 0 0; font-size: .875rem; }
.dcard__permalink { white-space: nowrap; }

/* ---------------------------------------------------------------- round 2: components built on the illustration set */
.badge-illustration--sm { left: 6px; bottom: 6px; padding: 1px 6px; font-size: .625rem; letter-spacing: 0; }

/* sign-in entries (header bar, mobile menu, footer): a link when configured, a disabled "coming soon" state otherwise */
.util-link { color: #fff; text-decoration: underline; text-underline-offset: .2em; }
.utility .util-link:hover { color: var(--accent-soft); }
.nav__utility .util-link { display: flex; align-items: center; min-height: 44px; color: var(--navy-950); font-size: .9375rem; }
.site-footer .util-item { display: inline-block; padding: 7px 0; color: #A9BFC8; }
.site-footer .util-soon { border-color: rgba(169, 191, 200, .6); }

.section__aside .media--illo { box-shadow: var(--shadow-md); border: 1px solid var(--border); }

/* journey: a numbered timeline; layout follows the container, never the viewport (R-04, design system 13 Oct 2026) */
.journey { container-type: inline-size; container-name: journey; }
.journey__list { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 0; grid-template-columns: minmax(0, 1fr); }
.journey__step { position: relative; min-width: 0; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 0 var(--s2); padding-bottom: var(--s3); }
.journey__step:last-child { padding-bottom: 0; }
/* vertical connector: from this node to the next one */
.journey__step:not(:last-child)::before { content: ""; position: absolute; left: 21px; top: 44px; bottom: 0; width: 2px; background: var(--border-strong); }
.journey__num { position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--navy-950); color: #fff; font: 800 .9375rem/1 var(--font-head); letter-spacing: .02em; box-shadow: 0 0 0 4px var(--white), 0 0 0 6px rgba(var(--accent-rgb), .45); }
.section--tint .journey__num { box-shadow: 0 0 0 4px var(--sand-50), 0 0 0 6px rgba(var(--accent-rgb), .45); }
.journey__body { min-width: 0; padding-top: 9px; }
.journey__label { font-size: var(--fs-h4); line-height: var(--lh-snug); margin: 0 0 4px; overflow-wrap: break-word; hyphens: manual; }
.journey__step p { margin: 0; font-size: var(--fs-sm); line-height: 1.55; color: var(--ink-900); max-width: 62ch; overflow-wrap: break-word; }
.journey__note { margin: var(--s3) 0 0; font-size: var(--fs-xs); color: var(--muted-600); }
@container journey (min-width: 560px) {
  .journey__step { grid-template-columns: 48px minmax(0, 1fr); gap: 0 var(--s3); padding-bottom: var(--s4); }
  .journey__step:not(:last-child)::before { left: 23px; top: 48px; }
  .journey__num { width: 48px; height: 48px; font-size: 1rem; }
  .journey__body { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 4px var(--s4); align-items: baseline; padding-top: 12px; }
  .journey__label { margin: 0; }
  .journey__step p { font-size: var(--fs-body); }
}
@container journey (min-width: 980px) {
  /* 4 + 3 horizontal rail (8-column grid, second row centred): connector runs from each node to the next in its row */
  .journey__list { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--s6) var(--s3); }
  .journey__step { grid-column: span 2; display: flex; flex-direction: column; gap: var(--s2); padding: 0; }
  .journey__step:nth-child(5) { grid-column: 2 / span 2; }
  .journey__step:not(:last-child)::before { left: 56px; right: calc(var(--s3) * -1); top: 23px; bottom: auto; width: auto; height: 2px; }
  .journey__step:nth-child(4)::before { display: none; }
  .journey__body { display: block; padding: 0; }
  .journey__label { margin: 0 0 6px; }
  .journey__step p { font-size: var(--fs-sm); max-width: none; }
}

/* six areas: illustrated panels */
.area__art.media { margin: 0 0 var(--s2); border-radius: 12px; }
.tabs--tabs .area__art { grid-column: 1 / -1; }
@media (min-width: 800px) { .tabs--tabs .area { grid-template-columns: 1.1fr 1fr; } .tabs--tabs .area__art { grid-column: 2; grid-row: 1 / span 4; margin: 0; align-self: start; } .tabs--tabs .area__limit { grid-column: 1; grid-row: auto; } .tabs--tabs .area__list { margin-bottom: var(--s2); } }

/* property types and scenario cards */
.ptypes, .scns, .duo, .gcards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--grid-gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.ptype, .scn, .duo__card, .gcard { position: relative; display: flex; flex-direction: column; min-width: 0; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.ptype__art.media, .scn__art.media, .gcard__art.media { border-radius: 0; border-bottom: 1px solid var(--border); }
.ptype__body, .scn__body, .gcard__body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: var(--card-pad); }
.ptype__title, .scn__title, .gcard__title, .duo__title { font-size: var(--fs-h3); margin: 0; }
.ptype__lede { margin: 0; color: var(--muted-600); }
.ptype__list { margin: 0 0 var(--s1); padding-left: 1.15em; font-size: .9688rem; } .ptype__list li { margin-bottom: 4px; }
.ptype .link-arrow, .gcard .link-arrow { margin-top: auto; }
.scn__body p { margin: 0; font-size: .9688rem; } .scn__body .eyebrow { margin-bottom: 0; }
@media (min-width: 900px) { .ptypes, .scns { grid-template-columns: repeat(3, minmax(0, 1fr)); } .duo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.duo__card { padding: var(--card-pad); gap: 10px; } .duo__card p { margin: 0; } .duo__note { font-size: .9063rem; color: var(--muted-600); } .duo__card .link-arrow { margin-top: auto; padding-top: 6px; }
.gcards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
@media (min-width: 900px) { .gcards--featured { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* editorial cards: border at rest, lift + shadow on hover; 16:10 illustration; topic chip and read time above the title */
.gcard { box-shadow: none; transition: border-color .2s, box-shadow .2s, transform .2s; }
.gcard:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.gcard__art.media { aspect-ratio: var(--ratio-card); }
.gcard__body p { margin: 0; }
.gcard__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: var(--fs-label); }
.gcard__meta .tag { font-size: var(--fs-label); letter-spacing: .04em; }
.gcard__kind { color: var(--muted-600); font-weight: 600; font-size: .8125rem; }
.gcard__sum { color: var(--ink-900); font-size: var(--fs-sm); line-height: 1.55; }
.gcard .card__link::after { border-radius: var(--radius); }
.gcard:hover .card__link { color: var(--teal-700); }
.pullquote { margin: var(--s3) 0; padding: var(--s3) var(--s4); border-left: 6px solid var(--teal-500); background: var(--mist-100); border-radius: 0 var(--radius) var(--radius) 0; max-width: 46rem; }
.pullquote p { margin: 0; font: 800 clamp(1.25rem, 1.05rem + 1vw, 1.75rem)/1.3 var(--font-head); color: var(--navy-950); letter-spacing: -.01em; }
.flagship__bar { padding-top: var(--s4); } .flagship__bar .review-bar { margin: 0; } .flagship__sources { padding-bottom: var(--s6); } .flagship__sources .sources { margin-top: 0; }

/* report explorer vignettes and the document-style report sheet */
.finding__art.media { border-radius: 10px; aspect-ratio: 16 / 10; }
.rsheet { margin: 0; }
.rsheet__label { display: flex; align-items: center; gap: 10px; margin: 0 0 var(--s2); padding: 12px 16px; border: 2px dashed var(--warning-line); border-radius: 12px; background: var(--warning-100); color: var(--warning-700); font: 800 1rem var(--font-head); }
.rsheet__label svg { flex: none; }
.rsheet__page { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--border-strong); border-radius: 12px; box-shadow: var(--shadow-lg); padding: clamp(18px, 4vw, 48px); }
.rsheet__mark { position: absolute; top: 46%; left: 50%; transform: translate(-50%, -50%) rotate(-20deg); font: 800 clamp(3rem, 12vw, 8rem)/1 var(--font-head); letter-spacing: .08em; text-transform: uppercase; color: rgba(17, 36, 58, .05); pointer-events: none; user-select: none; white-space: nowrap; }
.rsheet__page > :not(.rsheet__mark) { position: relative; }
.rsheet__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2) var(--s4); padding-bottom: var(--s2); border-bottom: 3px solid var(--navy-950); }
.rsheet__kicker { margin: 0 0 4px; font: 800 .75rem var(--font-head); letter-spacing: .12em; text-transform: uppercase; color: var(--teal-700); }
.rsheet__title { margin: 0; font-size: clamp(1.25rem, 1.05rem + 1vw, 1.75rem); }
.rsheet__meta { margin: 0; display: grid; gap: 6px; } .rsheet__meta dt, .rsheet__grid dt, .rsheet__sl { font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-600); font-weight: 700; margin: 0; } .rsheet__meta dd, .rsheet__grid dd { margin: 2px 0 0; font-weight: 600; font-size: .9375rem; }
.rsheet__sec { margin-top: var(--s4); }
.rsheet__h { margin: 0 0 var(--s2); padding-bottom: 6px; font-size: 1.0625rem; border-bottom: 1px solid var(--border); }
.rsheet__grid { margin: 0; display: grid; gap: 12px var(--s3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.rsheet__table { overflow-x: auto; }
.rsheet__table table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.rsheet__table th { padding: 8px 10px; text-align: left; background: var(--navy-950); color: #fff; font: 800 .75rem var(--font-head); letter-spacing: .04em; white-space: nowrap; }
.rsheet__table td { padding: 10px; vertical-align: top; border-bottom: 1px solid var(--border); }
.rsheet__thumb { display: block; width: 96px; border-radius: 6px; overflow: hidden; border: 1px solid var(--border); background: var(--mist-100); } .rsheet__thumb img { width: 100%; height: auto; }
.rsheet__legend { list-style: none; margin: 0 0 var(--s1); padding: 0; display: grid; gap: 8px; } .rsheet__legend li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; font-size: .9375rem; }
.rsheet__small { margin: 0; font-size: .8125rem; color: var(--muted-600); }
.rsheet__signgrid { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.rsheet__sv { margin: 4px 0 0; min-height: 44px; font-weight: 700; font-size: .9375rem; } .rsheet__sv--line { border-bottom: 2px solid var(--navy-800); }
.rsheet__cap { margin-top: var(--s2); font-size: .875rem; color: var(--muted-600); max-width: 70ch; }
@media (max-width: 759.98px) {
  .rsheet__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .rsheet__table table, .rsheet__table tbody, .rsheet__table tr, .rsheet__table td { display: block; width: 100%; }
  .rsheet__table tr { padding: 10px 0; border-bottom: 2px solid var(--border); }
  .rsheet__table td { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 8px; border: 0; padding: 4px 0; }
  .rsheet__table td::before { content: attr(data-label); font: 700 .6875rem var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted-600); padding-top: 3px; }
}

/* forms: the form is first in the DOM and on screen at every width (R-05, R-11); the aside follows it, to its right on desktop */
.section--form { padding-top: clamp(1.5rem, 1rem + 2vw, 3rem); }
.form-layout { display: grid; gap: var(--s4) var(--s6); align-items: start; }
.form-layout > * { min-width: 0; }
.form-layout--solo .form-layout__form { max-width: 760px; margin-inline: auto; width: 100%; }
@media (min-width: 1000px) { .form-layout:not(.form-layout--solo) { grid-template-columns: minmax(0, 1fr) 320px; } .form-layout__aside { position: sticky; top: 104px; } }
.form-layout__aside { padding: var(--s3); border-radius: var(--radius); background: var(--navy-950); color: #D5E3E8; --focus: var(--accent-soft); }
.form-layout__aside-title { margin: 0 0 var(--s1); font: 800 1.125rem var(--font-head); color: #fff; }
.form-layout__aside ul { margin: 0; padding-left: 1.1em; font-size: .9688rem; } .form-layout__aside li { margin-bottom: 8px; }
.form__more { margin: 0 0 var(--s3); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--sand-50); }
.form__more > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 0 16px; cursor: pointer; list-style: none; font: 800 1.0625rem var(--font-head); color: var(--navy-950); }
.form__more > summary::-webkit-details-marker { display: none; }
.form__more > summary::after { content: ""; width: 10px; height: 10px; border-right: 2.5px solid var(--teal-700); border-bottom: 2.5px solid var(--teal-700); transform: rotate(45deg) translateY(-3px); transition: transform .2s; }
.form__more[open] > summary::after { transform: rotate(-135deg) translateY(-3px); }
.form__more-body { padding: var(--s1) 16px var(--s1); border-top: 1px solid var(--border); }
.form__root:disabled .form__more { opacity: .7; }
/* form pages: on small screens the decorative hero illustration gives way so the form starts higher (R-05) */
@media (max-width: 899.98px) { .hero--form .hero__media { display: none; } .hero--form { padding-block: 1.5rem 1.25rem; } .hero--form .hero__lede { margin-bottom: var(--s2); } }
/* steps stay compact on small screens so a form that follows them is not pushed far down the page */
@media (max-width: 699.98px) {
  .steps { gap: 10px; }
  .steps__item { display: grid; grid-template-columns: 36px minmax(0, 1fr); grid-template-areas: "n t" "n p"; gap: 0 12px; padding: 12px 14px; }
  .steps__num { grid-area: n; width: 36px; height: 36px; margin: 0; font-size: .9375rem; }
  .steps__title { grid-area: t; font-size: var(--fs-h4); margin: 0 0 2px; } .steps__item p { grid-area: p; font-size: var(--fs-xs); line-height: 1.5; }
}
.quote-bar { transition: opacity .2s, visibility .2s; }
.hero-cta-visible .quote-bar { opacity: 0; visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .quote-bar { transition: none; } }

/* shorter pages on small screens (R-13): compact illustrated cards, smaller decorative figures */
@media (max-width: 699.98px) {
  .finding__art.media { aspect-ratio: auto; height: 120px; } .finding__art img { height: 100%; }
  .gcards:not(.gcards--featured) .gcard { display: grid; grid-template-columns: 112px minmax(0, 1fr); } .gcards:not(.gcards--featured) .gcard .gcard__art.media { aspect-ratio: auto; height: 100%; min-height: 112px; border-bottom: 0; border-right: 1px solid var(--border); } .gcard__body { padding: var(--s2); } .gcard__art .badge-illustration { left: 6px; bottom: 6px; padding: 1px 6px; font-size: .5625rem; }
  .section__aside .media--illo { aspect-ratio: 16 / 9; max-width: 360px; }
  .scn__art.media, .ptype__art.media { aspect-ratio: 16 / 9; }
  .scn__body, .ptype__body { padding: var(--s2); }
}
/* {{report-preview}}: three compact findings and one CTA (home page) */
.rpreview { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--card-pad); }
.rpreview__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--grid-gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
@media (min-width: 900px) { .rpreview__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.finding--preview { gap: 10px; box-shadow: none; }
.finding--preview .finding__room { font-size: var(--fs-h4); }
.finding--preview p { margin: 0; }
.finding__area { font: 700 var(--fs-label)/1.4 var(--font-head); letter-spacing: .08em; text-transform: uppercase; color: var(--muted-600); }
.finding__obs { font-size: var(--fs-sm); line-height: 1.55; }
.finding__prio { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: auto !important; font-size: var(--fs-xs); color: var(--muted-600); }
.rpreview__foot { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s2); margin-top: var(--s3); }
.rpreview__foot .report__note { margin: 0; }
/* small screens: compact preview cards (illustration beside the text) so the home page stays short */
@media (max-width: 699.98px) {
  .finding--preview { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 6px 12px; align-items: start; }
  .finding--preview .finding__head { grid-column: 1 / -1; }
  .finding--preview .finding__art.media { grid-column: 1; grid-row: 2 / span 3; height: auto; aspect-ratio: 1 / 1; }
  .finding--preview .finding__art .badge-illustration { left: 5px; bottom: 5px; padding: 1px 6px; font-size: .5625rem; }
  .finding--preview > p { grid-column: 2; }
  .finding--preview .finding__prio { margin-top: 0 !important; }
}
@media (min-width: 760px) { .rpreview__foot { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--s4); } .rpreview__foot .btn { flex: none; } }
.findings__more { margin-top: var(--s3); } .findings__more > .findings { padding: 0 var(--s2) var(--s2); }
/* the inline desktop navigation needs the room: the tagline is already in the utility bar above the header */
@media (min-width: 1024px) { .site-header .logo__tag { display: none; } .nav__link { padding: 0 6px; } .nav__list { gap: 0; } }
/* T-LOGO2 header correction (owner, 20 Oct 2026): compact logo, single balanced row (logo left, nav + CTA right), no nav wrap, no excess height. */
@media (min-width: 1024px) {
  .header__inner { flex-wrap: nowrap; gap: 0 var(--s2); min-height: 64px; }
  .site-header .logo { gap: 8px; padding: 4px 0; flex: 0 0 auto; }
  .site-header .logo .logo__mark { width: 32px; height: 32px; }
  .site-header .logo .logo__word { font-size: 1.1rem; }
  .site-header .site-nav { flex: 1 1 auto; min-width: 0; justify-content: flex-end; flex-wrap: nowrap; }
  .site-header .site-nav .nav__list { flex-wrap: nowrap; }
}
@media (min-width: 1024px) and (max-width: 1199.98px) { .nav__link { padding: 0 4px; font-size: .78rem; } .nav__item--sub > .nav__link { padding-right: 0; } .nav__toggle { width: 16px; margin-right: 1px; } .nav__cta { padding: 0 12px; font-size: .78rem; min-height: 42px; } .site-nav { gap: var(--s1) 6px; } .nav__list { gap: 0; } .site-header .logo .logo__word { font-size: .98rem; } .site-header .logo .logo__mark { width: 30px; height: 30px; } }
.rsheet__table .finding__id { white-space: nowrap; }
.rsheet__table .finding__id, .rsheet__table .prio { justify-self: start; width: max-content; }

/* ---------------------------------------------------------------- commercial terms ({{commercial:...}}) */

/* ---------------------------------------------------------------- EXPERIMENTAL palette: brand.palette "logo" (owner side-by-side decision; off by default)
   Swaps only the accent tokens (teal -> logo blue #0047BB, light accents -> logo yellow #FFC20E). Navy stays. Never the default. */
:root[data-palette="logo"] { --teal-800: #00348C; --teal-700: #0047BB; --teal-500: #FFC20E; --mist-100: #E8EEFA; --focus: #0047BB; --accent-soft: #FFE08A; --accent-chip: #FFD24D; --accent-hover: #FFD24D; --accent-rgb: 255, 194, 14; }
:root[data-palette="logo"] .dark-ctx, :root[data-palette="logo"] .hero--dark, :root[data-palette="logo"] .site-footer, :root[data-palette="logo"] .cta-band, :root[data-palette="logo"] .selector__result { --focus: #FFE08A; }

/* ================================================================ round 4: page-audit requests (13 Oct 2026) */
/* Touch targets (44px): checkboxes are drawn at 44x44 around a 24px box, labels are at least 44px tall, and links inside labels get a 44px hit area. */
.check, .checklist__group li { align-items: flex-start; gap: 0; }
.check input, .checklist__group input { appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 44px; height: 44px; margin: 0; background: none; border: 0; cursor: pointer; }
.check input::before, .checklist__group input::before { content: ""; position: absolute; inset: 10px; border: 2px solid var(--navy-800); border-radius: 6px; background: #fff; transition: background-color .15s, border-color .15s; }
.check input::after, .checklist__group input::after { content: ""; position: absolute; left: 17px; top: 11px; width: 8px; height: 15px; border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(45deg); opacity: 0; }
.check input:checked::before, .checklist__group input:checked::before { background: var(--teal-700); border-color: var(--teal-700); }
.check input:checked::after, .checklist__group input:checked::after { opacity: 1; }
.check input:focus-visible, .checklist__group input:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; border-radius: 10px; }
.form__root:disabled .check input::before { background: var(--sand-50); border-color: var(--border); cursor: not-allowed; }
.check label, .checklist__group label { display: flex; align-items: center; flex: 1; min-height: 44px; padding: 8px 0; margin: 0; }
.check label { display: block; padding: 10px 0; } .check label a { display: inline-block; padding: 12px 4px; margin: -12px -4px; }
.form__notice { margin: 4px 0 0; padding: 10px 0; font-size: .9688rem; line-height: 1.5; color: var(--muted-600); }
.form__notice a { display: inline-block; padding: 12px 4px; margin: -12px -4px; }
@media print {
  .checklist__group input { width: 14pt; height: 14pt; margin-top: 6pt; border: 1.5pt solid #000; border-radius: 2pt; }
  .checklist__group input::before, .checklist__group input::after { display: none; }
}

/* On-page contents: a native disclosure. Desktop guides keep it open in the sidebar; everywhere else it starts closed. */
.toc { padding: 0; margin-bottom: var(--s3); }
.toc > summary.toc__title { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); min-height: 48px; margin: 0; padding: 8px 16px; cursor: pointer; list-style: none; border-radius: var(--radius); }
.toc > summary::-webkit-details-marker { display: none; }
.toc > summary::after { content: ""; flex: none; width: 10px; height: 10px; border-right: 2.5px solid var(--teal-700); border-bottom: 2.5px solid var(--teal-700); transform: rotate(45deg) translateY(-3px); transition: transform .2s; }
.toc[open] > summary::after { transform: rotate(-135deg) translateY(-3px); }
.toc nav { padding: 0 16px 14px; }
.toc a { padding: 12px 0 12px 14px; }
.toc--side { display: none; } .toc--inline { margin-top: 0; }
@media (min-width: 1000px) { .toc--side { display: block; } .toc--inline { display: none; } }
.page-contents { margin-top: var(--s3); } .toc--page { max-width: 760px; margin-bottom: 0; background: #fff; }
.toc--page ol { columns: 1; } @media (min-width: 900px) { .toc--page ol { columns: 2; column-gap: var(--s4); } .toc--page li { break-inside: avoid; } }

/* Comfortable prose measure (about 70 characters) in full-width sections */
.section__head p, .section__main > p, .section__main > ul, .section__main > ol, .section__main .prose p, .section__main .prose ul, .section__main .prose ol, .section__body > .prose p, .section__body > .prose ul, .section__body > .prose ol, .section__after .prose p, .section__after .prose ul, .article__body .callout p { max-width: var(--measure); }
.intake-status p, .acc__body p, .cards__more, .selector__caveat, .areas__note p, .journey__note, .checklist__note, .report__note, .invest__note, .sources li, .sources ul, .flagship__sources li { max-width: 70ch; }
.article__body table + p, .article__body .table-scroll + p { margin-top: var(--s3); }

/* {{commercial:...}}: a quiet "Terms" note */
.commercial-terms { display: flex; gap: 12px; align-items: flex-start; max-width: 760px; margin: var(--s3) 0; padding: 14px 18px; border: 1px solid var(--border); border-left: 4px solid var(--teal-700); border-radius: var(--radius); background: var(--sand-50); color: var(--navy-800); }
.commercial-terms > svg { flex: none; margin-top: 2px; color: var(--teal-700); }
.commercial-terms__label { margin: 0 0 2px; font: 800 .75rem var(--font-head); letter-spacing: .1em; text-transform: uppercase; color: var(--muted-600); }
.commercial-terms__text { margin: 0; font-size: .9688rem; line-height: 1.55; }

/* Referral steps: five across, or 3 + 2, never 4 + 1; every card the same height (13c G-07) */
.steps--5 { grid-auto-rows: 1fr; }
@media (min-width: 700px) { .steps--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .steps--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
/* renovation journey (six stages): illustration above, 2 x 3 / 3 x 2 grid below */
.rjourney__art { max-width: 560px; margin: 0 auto var(--s3); }
@media (min-width: 700px) { .steps--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Report status chips (appears resolved / remains open / could not be checked): shape differs as well as colour */
.status--unchecked { color: var(--warning-700); background: var(--warning-100); border-color: var(--warning-line); } .status--unchecked::before { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }

/* Service pages: the "Coordinated by SnagRight ..." lead is a compact attribution note */
.section--note { padding-block: var(--s3) 0; }
.attribution { display: flex; gap: 12px; align-items: flex-start; max-width: 860px; padding: 14px 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--sand-50); color: var(--navy-800); }
.attribution > svg { flex: none; margin-top: 3px; color: var(--teal-700); }
.attribution p { margin: 0; font-size: .9688rem; line-height: 1.55; max-width: none; } .attribution p + p { margin-top: 8px; }

/* "Send another request" after a successful submission (presentation only) */
.notice--success .notice__again { margin-top: var(--s2); }

/* ---------------------------------------------------------------- reading column (13c G-02)
   Every block of a service or guide column ends at the same right edge: one width token, one measure. Before this, prose ended at 751px,
   callouts at 729, the commercial-terms note at 760, and the FAQ, CTA band, tables and checklists filled the whole 836px column. */
.article__body { --measure: var(--col-read); }
.article .article__body > *, .section--note .attribution { max-width: var(--col-read); }
.article .article__body .callout p, .article .article__body .acc__body p { max-width: none; }
.article .article__body > .figure figcaption { max-width: none; }

/* ---------------------------------------------------------------- Educational Visuals v1.0 (framework diagrams) ---- */
/* A diagram + its real HTML summary. Desktop: diagram beside the summary; narrow widths: the summary stacks under the
   diagram and carries the substance in readable text (the 1200x760 chart is never relied on at small sizes). */
.eduviz { margin: 0; display: grid; gap: var(--s3); grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: start;
  background: var(--mist-100); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--s3); }
.eduviz__fig { margin: 0; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.eduviz__fig picture, .eduviz__fig img { display: block; width: 100%; height: auto; }
.eduviz__summary { margin: 0; min-width: 0; }
.eduviz__title { margin: 0 0 var(--s2); font-size: var(--fs-label); font-weight: 700; color: var(--navy-800); line-height: 1.3; }
.eduviz__points { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.eduviz__point { font-size: var(--fs-sm); color: var(--ink-900); line-height: 1.55; }
.eduviz__k { display: block; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--teal-800); margin-bottom: 2px; }
.eduviz__v { display: block; }
.eduviz__caveat { margin: var(--s3) 0 0; font-size: var(--fs-xs); color: var(--muted-600); line-height: 1.5; border-top: 1px solid var(--border); padding-top: var(--s2); }
.figure--photo { max-width: var(--container-text); }

@media (max-width: 860px) {
  .eduviz { grid-template-columns: 1fr; gap: var(--s2); padding: var(--s2); }
  /* On a phone the summary is the primary content: show it first, the diagram second as a secondary/supporting figure. */
  .eduviz__summary { order: 1; }
  .eduviz__fig { order: 2; }
}

/* T-LOGO2 external-artwork swap (brand.final_logo): the image is constrained to the approved display heights; aspect ratio from width/height attrs */
.logo--img { gap: 0; }
.logo__img { display: block; height: 40px; width: auto; }
@media (min-width: 1024px) { .logo__img { height: 32px; } }
.site-footer .logo__img { height: 40px; }
@media (max-width: 1023.98px) { .site-header .logo__img { height: 36px; } }
@media (max-width: 379px) { .site-header .logo__img { height: 32px; } }