/* ==========================================================================
   Components: one definition each, reused by every page
   ========================================================================== */

/* --- Icons --------------------------------------------------------------- */
.icon { width: 1.25em; height: 1.25em; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: square; stroke-linejoin: miter; }
.icon--fill { fill: currentColor; stroke: none; }

/* --- Buttons ------------------------------------------------------------- */
.btn {
  --btn-bg: transparent; --btn-fg: var(--fg); --btn-bd: currentColor;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3);
  min-height: 52px; padding: 0 var(--s-5);
  font-family: var(--font-ui); font-stretch: var(--ui-stretch); font-size: 0.8125rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--ui-tracking); line-height: 1;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1.5px solid var(--btn-bd); border-radius: var(--radius);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  white-space: nowrap;
}
.btn .icon { width: 18px; height: 18px; transition: transform var(--dur) var(--ease); }
.btn:hover .icon--arrow { transform: translateX(3px); }
.btn--primary { --btn-bg: var(--cg-yellow); --btn-fg: var(--cg-black); --btn-bd: var(--cg-yellow); }
.btn--primary:hover { --btn-bg: var(--cg-yellow-deep); --btn-bd: var(--cg-yellow-deep); }
.surface-yellow .btn--primary { --btn-bg: var(--cg-black); --btn-fg: var(--cg-white); --btn-bd: var(--cg-black); }
.surface-yellow .btn--primary:hover { --btn-bg: var(--n-800); --btn-bd: var(--n-800); }
.btn--secondary { --btn-bd: currentColor; }
.btn--secondary:hover { --btn-bg: var(--fg); --btn-fg: var(--bg, var(--cg-black)); --btn-bd: var(--fg); }
.surface-photo .btn--secondary:hover { --btn-fg: var(--cg-black); }
.btn--sm { min-height: 44px; padding: 0 var(--s-4); font-size: 0.75rem; }
.btn--block { width: 100%; }
@media (max-width: 479px) { .btn { white-space: normal; text-align: center; line-height: 1.25; padding-block: 12px; } }

.link-arrow {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-ui); font-stretch: var(--ui-stretch); font-weight: 700; font-size: 0.8125rem;
  text-transform: uppercase; letter-spacing: var(--ui-tracking);
  padding-block: var(--s-2);
  background: linear-gradient(var(--cg-yellow), var(--cg-yellow)) 0 100% / 0 2px no-repeat;
  transition: background-size var(--dur) var(--ease);
}
.link-arrow .icon { width: 16px; height: 16px; transition: transform var(--dur) var(--ease); }
.link-arrow:hover { background-size: 100% 2px; }
.link-arrow:hover .icon { transform: translateX(3px); }

/* --- Eyebrow (replaces the vertical-bar title marker, removed per Jerry) -- */
.eyebrow { display: flex; align-items: center; gap: var(--s-3); color: var(--muted); }
.eyebrow__index { font-family: var(--font-data); font-weight: 600; font-size: 0.8125rem; color: var(--fg); letter-spacing: 0.02em; }
.eyebrow__rule { width: 28px; height: 1px; background: currentColor; opacity: 0.6; }

/* --- Section head: one pattern for every section --------------------------- */
.section-head { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: var(--s-5) var(--s-6); align-items: end; margin-bottom: var(--s-9); }
.section-head__main { grid-column: 1 / span 7; }
.section-head__main > .t-h2 { margin-top: var(--s-4); }
.section-head__aside { grid-column: 8 / span 5; display: grid; gap: var(--s-5); justify-items: start; }
.section-head__aside p { color: var(--muted); }
.section-head--center { text-align: center; justify-items: center; }
.section-head--center .section-head__main { grid-column: 2 / span 10; }
.section-head--center .eyebrow { justify-content: center; }
.section-head--center .section-head__aside { grid-column: 3 / span 8; justify-items: center; }
@media (max-width: 1023px) {
  .section-head { margin-bottom: var(--s-7); }
  .section-head__main, .section-head__aside, .section-head--center .section-head__main, .section-head--center .section-head__aside { grid-column: 1 / -1; }
}

/* --- Technical drawings (drawings.js): guard finder + header menu ---------- */
.dw { display: block; width: 100%; height: auto; overflow: visible; }
.dw .dw-solid { fill: var(--dw-fill, #FBFAF6); stroke: var(--dw-ink, #171613); stroke-width: 1.6; stroke-linejoin: round; }
.dw .dw-line { fill: none; stroke: var(--dw-ink, #171613); stroke-width: 1.2; }
.dw .dw-thin { fill: none; stroke: var(--dw-ink, #171613); stroke-width: 0.8; opacity: 0.55; }
.dw .dw-glass { fill: var(--dw-glass, #DCD7CB); stroke: var(--dw-ink, #171613); stroke-width: 1; }
.dw .dw-pin { fill: var(--dw-ink, #171613); }
.dw .dw-ground { stroke: var(--dw-ink, #171613); stroke-width: 1.6; }
.dw .dw-hatch-ground { stroke: var(--dw-ink, #171613); stroke-width: 0.8; opacity: 0.35; }
.dw .dw-barrel, .dw .dw-eye { fill: var(--dw-fill, #FBFAF6); stroke: var(--dw-ink, #171613); stroke-width: 1.4; }
.dw .dw-rod { fill: url(#dwChrome); fill: var(--dw-rod, #C9CCCF); stroke: var(--dw-ink, #171613); stroke-width: 1.2; }
.dw .dw-guard { fill: var(--cg-yellow); stroke: var(--dw-ink, #171613); stroke-width: 1.4; transition: fill var(--dur) var(--ease); }
.dw .dw-guard-seam { stroke: var(--dw-ink, #171613); stroke-width: 0.8; opacity: 0.5; }
.dw .dw-guard--ghost { fill: rgba(236,189,55,0.35); stroke-dasharray: 5 4; }
.dw .dw-callout .dw-dot { fill: var(--dw-ink, #171613); }
.dw .dw-leader { fill: none; stroke: var(--dw-ink, #171613); stroke-width: 1; }
.dw .dw-label { font-family: var(--font-body); font-size: 15px; font-weight: 600; fill: var(--dw-ink, #171613); }
.dw .dw-label--soft { font-weight: 500; opacity: 0.7; }
.dw .dw-dim path { fill: none; stroke: var(--dw-ink, #171613); stroke-width: 1; }
.dw .dw-dim .dw-arrow { fill: var(--dw-ink, #171613); stroke: none; }
.dw .dw-zone { fill: rgba(236,189,55,0.28); stroke: var(--dw-ink, #171613); stroke-dasharray: 5 4; }
.dw .dw-person { fill: var(--dw-ink, #171613); }
.dw .dw-person .dw-hat { fill: var(--cg-yellow); }
.dw .dw-cyl .dw-guard { transform-box: fill-box; transform-origin: center; }
.is-pulse .dw .dw-guard { animation: guard-pulse 900ms var(--ease); }
@keyframes guard-pulse { 0% { fill: #fff; } 35% { fill: #fff; transform: scaleY(1.35); } 100% { fill: var(--cg-yellow); transform: none; } }

/* --- Header -------------------------------------------------------------- */
.site-header { position: sticky; top: 0; z-index: 100; color: var(--cg-white); }
.utility-bar { background: var(--cg-black); border-bottom: 1px solid var(--rule-dark); height: var(--utility-h); font-size: 0.75rem; }
.utility-bar .container { display: flex; align-items: center; justify-content: flex-end; gap: var(--s-5); height: 100%; }
.utility-bar a, .utility-bar button { display: inline-flex; align-items: center; gap: 6px; color: var(--n-300); background: none; border: 0; padding: 0; min-height: 36px; }
.utility-bar a:hover, .utility-bar button:hover { color: var(--cg-white); }
.utility-bar .icon { width: 14px; height: 14px; }
.utility-bar__sep { width: 1px; height: 14px; background: var(--rule-dark); }

.main-nav { background: var(--cg-black); height: var(--header-h); border-bottom: 1px solid var(--rule-dark); transition: background var(--dur) var(--ease); }
.main-nav .container { display: flex; align-items: center; height: 100%; gap: var(--s-6); }
.site-header--overlay:not(.is-scrolled) .main-nav { background: transparent; border-bottom-color: transparent; }
.site-header--overlay:not(.is-scrolled) .utility-bar { background: rgba(0,0,0,0.35); border-bottom-color: transparent; }
.brand-logo { display: block; flex: none; }
.brand-logo img { height: 34px; width: auto; }
.nav-list { display: flex; gap: var(--s-1); margin-left: auto; height: 100%; }
.nav-item { position: relative; display: flex; align-items: center; }
.nav-link {
  display: inline-flex; align-items: center; gap: 6px; height: 100%; padding: 0 var(--s-3);
  font-family: var(--font-ui); font-stretch: var(--ui-stretch); font-size: 0.8125rem; font-weight: 600; letter-spacing: var(--ui-tracking); text-transform: uppercase;
  background: none; border: 0; color: var(--cg-white);
  box-shadow: inset 0 -3px 0 transparent; transition: box-shadow var(--dur-fast) var(--ease);
}
.nav-link .icon { width: 14px; height: 14px; transition: transform var(--dur) var(--ease); }
.nav-link:hover, .nav-link[aria-expanded="true"], .nav-link[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--cg-yellow); }
.nav-link[aria-expanded="true"] .icon { transform: rotate(180deg); }
.nav-actions { display: flex; align-items: center; gap: var(--s-3); }
.icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; background: none; border: 1px solid var(--rule-dark); color: var(--cg-white); }
.icon-btn:hover { border-color: var(--cg-white); }
.icon-btn .icon { width: 20px; height: 20px; }
.nav-toggle { display: none; }

/* Mega menu */
.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--cg-black); border-top: 1px solid var(--rule-dark); border-bottom: 1px solid var(--rule-dark);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}
.mega.is-open { opacity: 1; visibility: visible; transform: none; }
.mega__inner { display: grid; grid-template-columns: 1.2fr repeat(3, 1fr); gap: var(--s-7); padding-block: var(--s-8); }
.mega__intro p { color: var(--n-400); margin-top: var(--s-3); max-width: 32ch; }
.mega__col h3 { color: var(--n-400); margin-bottom: var(--s-4); }
.mega__col li a { display: flex; justify-content: space-between; align-items: center; padding: var(--s-3) 0; border-bottom: 1px solid var(--rule-dark); font-weight: 500; }
.mega__col li a:hover { color: var(--cg-yellow); }
.mega__col li a .icon { width: 16px; height: 16px; opacity: 0.6; }
.mega__col li a small { color: var(--n-400); font-size: 0.75rem; margin-left: auto; margin-right: var(--s-3); }

@media (max-width: 1100px) {
  .nav-list, .nav-actions .btn, .utility-bar .hide-sm { display: none; }
  .nav-toggle { display: inline-grid; margin-left: auto; }
  .nav-actions { margin-left: 0; }
}

/* Mobile menu */
.mobile-menu { position: fixed; inset: 0; z-index: 200; background: var(--cg-black); color: var(--cg-white); overflow-y: auto; transform: translateX(100%); visibility: hidden; transition: transform var(--dur) var(--ease), visibility 0s linear var(--dur); }
.mobile-menu.is-open { transform: none; visibility: visible; transition: transform var(--dur) var(--ease), visibility 0s; }
.mobile-menu__top { display: flex; justify-content: space-between; align-items: center; height: var(--header-h); padding-inline: var(--gutter); border-bottom: 1px solid var(--rule-dark); }
.mobile-menu__list { padding: var(--s-5) var(--gutter); }
.mobile-menu__list > li > a, .mobile-menu__list > li > details > summary {
  display: flex; justify-content: space-between; align-items: center; min-height: 56px;
  font-family: var(--font-display); font-weight: var(--display-weight); text-transform: var(--display-transform);
  font-stretch: var(--display-stretch); font-size: calc(1.75rem * var(--display-scale)); letter-spacing: var(--display-tracking);
  border-bottom: 1px solid var(--rule-dark); list-style: none; cursor: pointer;
}
.mobile-menu__list summary::-webkit-details-marker { display: none; }
.mobile-menu__list details ul { padding: var(--s-3) 0 var(--s-4); }
.mobile-menu__list details li a { display: flex; align-items: center; min-height: 44px; color: var(--n-300); }
.mobile-menu__cta { padding: var(--s-5) var(--gutter) var(--s-8); display: grid; gap: var(--s-3); }

/* --- Footer -------------------------------------------------------------- */
.site-footer { position: relative; overflow: hidden; }
.site-footer__top { display: grid; grid-template-columns: 1.5fr repeat(5, 1fr); gap: var(--s-6); padding-block: var(--s-10) var(--s-8); position: relative; z-index: 1; }
.site-footer__brand img { height: 50px; width: auto; }   /* 5 Nov: 40 → 50px */
.site-footer__brand p { color: var(--n-400); margin-top: var(--s-5); max-width: 30ch; font-size: var(--t-small); }
.site-footer__brand .btn { margin-top: var(--s-6); }
.site-footer h3 { color: var(--n-400); margin-bottom: var(--s-4); }
.site-footer__col li a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; padding: 0; font-size: var(--t-small); color: var(--n-200); }
.site-footer__col li a:hover { color: var(--cg-white); text-decoration: underline; text-decoration-color: var(--cg-yellow); text-underline-offset: 4px; }
.site-footer__offices { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-6); padding-block: var(--s-7); border-top: 1px solid var(--rule-dark); position: relative; z-index: 1; }
.site-footer__offices strong { display: block; font-size: var(--t-small); margin-bottom: 4px; }
.site-footer__offices span { color: var(--n-400); font-size: 0.8125rem; line-height: 1.5; }
.site-footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: var(--s-5); padding-block: var(--s-5); border-top: 1px solid var(--rule-dark); color: var(--n-400); font-size: 0.75rem; position: relative; z-index: 1; }
.site-footer__bottom a:hover { color: var(--cg-white); }
.site-footer__legal a { white-space: nowrap; }
.site-footer__end { display: flex; align-items: center; gap: var(--s-5); }
.site-footer__region { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; white-space: nowrap; }
.site-footer__region .icon { width: 16px; height: 16px; }   /* keeps "Terms & Conditions" on one line */
.socials { display: flex; gap: var(--s-2); }
.socials a { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--rule-dark); }
.socials a:hover { border-color: var(--cg-white); color: var(--cg-white); }
.socials .icon { width: 16px; height: 16px; }
@media (max-width: 1023px) {
  .site-footer__top { grid-template-columns: repeat(3, 1fr); }
  .site-footer__brand { grid-column: 1 / -1; }
  .site-footer__offices { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .site-footer__top { grid-template-columns: repeat(2, 1fr); }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* --- Stripe device ------------------------------------------------------- */
.has-stripes { position: relative; isolation: isolate; }
.has-stripes::after {
  content: ""; position: absolute; top: 0; bottom: 0; z-index: 0; pointer-events: none;
  right: var(--stripe-inset);
  width: calc(var(--stripe-bar) * 2 + var(--stripe-gap));
  /* 6 : 2 : 6 → bar 42.857% | gap 14.286% | bar 42.857% */
  background:
    linear-gradient(90deg, rgba(236,189,55,var(--stripe-opacity)) 0, rgba(236,189,55,var(--stripe-opacity)) 42.857%, transparent 42.857%, transparent 57.143%, rgba(236,189,55,var(--stripe-opacity)) 57.143%);
}
html[data-stripes="off"] .has-stripes::after { display: none; }

/* --- Tags & chips -------------------------------------------------------- */
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; font-family: var(--font-label); font-stretch: var(--label-stretch); font-size: 0.6875rem; font-weight: var(--label-weight); letter-spacing: var(--label-tracking); text-transform: uppercase; border: 1px solid var(--rule); color: var(--muted); }
.tag--solid { background: var(--cg-black); color: var(--cg-white); border-color: var(--cg-black); }
.tag--danger { background: var(--c-danger); color: #fff; border-color: var(--c-danger); }
.tag--ok { background: var(--c-ok); color: #fff; border-color: var(--c-ok); }

.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip {
  min-height: 44px; padding: 0 var(--s-4); display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: 0.8125rem; font-weight: 600; background: transparent; color: var(--fg);
  border: 1px solid var(--rule); border-radius: var(--radius);
}
.chip:hover { border-color: var(--fg); }
.chip[aria-pressed="true"], .chip[aria-selected="true"] { background: var(--fg); color: var(--bg, var(--cg-white)); border-color: var(--fg); }
.surface-dark .chip[aria-pressed="true"], .surface-dark .chip[aria-selected="true"] { background: var(--cg-white); color: var(--cg-black); }

/* --- Stat ---------------------------------------------------------------- */
.stat { display: grid; gap: var(--s-3); align-content: start; }
.stat__value { font-size: calc(clamp(2.5rem, 1.8rem + 2.6vw, 4.25rem) * var(--data-scale)); }
.stat__value small { font-size: 0.45em; margin-left: 0.12em; letter-spacing: 0; }
.stat__label { color: var(--muted); font-size: var(--t-small); max-width: 30ch; }

/* --- Cards --------------------------------------------------------------- */
.card { position: relative; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--n-800); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
.card:hover .card__media img { transform: scale(1.035); }
.card__body { display: grid; gap: var(--s-3); padding: var(--s-5); align-content: start; flex: 1; }
.card__body p { color: var(--muted); font-size: var(--t-small); }
.card__foot { padding: 0 var(--s-5) var(--s-5); margin-top: auto; }
.card--link::after { content: ""; position: absolute; inset: 0; }
.card--link:hover { border-color: var(--fg); }

/* Photo-pending placeholder (no posed stock: ChromeGuard supplies imagery) */
.media-pending {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: var(--s-3);
  color: var(--n-400); text-align: center; padding: var(--s-5);
  background:
    repeating-linear-gradient(-45deg, rgba(255,255,255,0.04) 0 2px, transparent 2px 14px),
    var(--n-900);
}
.media-pending .icon { width: 28px; height: 28px; }
.media-pending span { max-width: 26ch; font-size: 0.75rem; }

/* --- Forms --------------------------------------------------------------- */
.field { display: grid; gap: var(--s-2); }
.field__label { font-size: 0.8125rem; font-weight: 600; display: flex; align-items: center; gap: var(--s-2); }
.field__hint { font-size: 0.75rem; color: var(--muted); }
.input, .select {
  width: 100%; min-height: 48px; padding: 0 var(--s-4);
  background: var(--input-bg, var(--cg-white)); color: var(--fg);
  border: 1px solid var(--input-bd, var(--n-300)); border-radius: var(--radius);
  font-size: 0.9375rem;
}
.surface-dark .input, .surface-dark .select { --input-bg: var(--cg-black); --input-bd: var(--n-700); }
.input:hover, .select:hover { border-color: var(--fg); }
.select { appearance: none; padding-right: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23858073' stroke-width='1.75'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; }
.input-group { display: flex; align-items: stretch; }
.input-group__affix { display: grid; place-items: center; padding: 0 var(--s-3); border: 1px solid var(--input-bd, var(--n-300)); border-right: 0; font-size: 0.8125rem; color: var(--muted); background: var(--input-bg, var(--cg-white)); }
.surface-dark .input-group__affix { --input-bg: var(--cg-black); --input-bd: var(--n-700); }

/* Slider (5 Nov): a rounded track that fills to the value (--pct, set by calculator.js) and a
   round thumb. Fill and thumb ring follow the surface: ink on light, yellow on dark. The thumb
   grows a little on hover and drag, and shows a yellow halo for keyboard focus. */
.range { --track: var(--n-200); --fill: var(--fg); --thumb-ring: var(--fg); --halo: rgba(236, 189, 55, 0.5); display: grid; gap: var(--s-2); }
.range__top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); }
.range__value { font-family: var(--font-data); font-weight: var(--data-weight); font-size: calc(1.5rem * var(--data-scale)); font-variant-numeric: tabular-nums; }
.range input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; background: transparent; margin: 0; cursor: pointer; }
.range input[type="range"]:focus-visible { outline: none; }
.range input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--fill) var(--pct, 50%), var(--track) var(--pct, 50%)); }
.range input[type="range"]::-moz-range-track { height: 6px; border-radius: 999px; background: var(--track); }
.range input[type="range"]::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--fill); }
.range input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -9px; border-radius: 50%; background: var(--cg-white); border: 2px solid var(--thumb-ring); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.range input[type="range"]::-moz-range-thumb { box-sizing: border-box; width: 24px; height: 24px; border-radius: 50%; background: var(--cg-white); border: 2px solid var(--thumb-ring); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.range input[type="range"]:hover::-webkit-slider-thumb, .range input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.12); }
.range input[type="range"]:hover::-moz-range-thumb, .range input[type="range"]:active::-moz-range-thumb { transform: scale(1.12); }
.range input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 6px var(--halo), 0 2px 6px rgba(0, 0, 0, 0.22); }
.range input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 6px var(--halo), 0 2px 6px rgba(0, 0, 0, 0.22); }
.surface-dark .range { --track: var(--n-700); --fill: var(--cg-yellow); --thumb-ring: var(--cg-yellow); }

.stepper { display: inline-flex; align-items: stretch; border: 1px solid var(--input-bd, var(--n-300)); }
.stepper button { width: 44px; min-height: 44px; background: none; border: 0; display: grid; place-items: center; }
.stepper button:hover { background: var(--n-100); }
.surface-dark .stepper { --input-bd: var(--n-700); }
.surface-dark .stepper button:hover { background: var(--n-800); }
.stepper output { min-width: 56px; display: grid; place-items: center; font-family: var(--font-data); font-weight: var(--data-weight); font-size: calc(1.25rem * var(--data-scale)); border-inline: 1px solid var(--input-bd, var(--n-300)); }

.tip { position: relative; display: inline-grid; place-items: center; width: 18px; height: 18px; border: 1px solid currentColor; border-radius: 50%; font-size: 0.625rem; font-weight: 700; color: var(--muted); cursor: help; background: none; padding: 0; }
.tip:hover::after, .tip:focus::after {
  content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%);
  width: max-content; max-width: 260px; padding: var(--s-3); background: var(--cg-black); color: var(--cg-white);
  font-size: 0.75rem; font-weight: 500; line-height: 1.45; text-align: left; z-index: 20; border: 1px solid var(--n-700);
}

/* --- Tabs (underline style, one pattern site-wide) ------------------------- */
.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--rule); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: none; min-height: 52px; padding: 0 var(--s-5); background: none; border: 0;
  font-size: 0.875rem; font-weight: 600; color: var(--muted);
  box-shadow: inset 0 -3px 0 transparent; transition: color var(--dur-fast), box-shadow var(--dur-fast);
}
.tab:hover { color: var(--fg); }
.tab[aria-selected="true"] { color: var(--fg); box-shadow: inset 0 -3px 0 var(--cg-yellow); }

/* --- Accordion ----------------------------------------------------------- */
.accordion { border-top: 1px solid var(--rule); }
.accordion__item { border-bottom: 1px solid var(--rule); }
.accordion__btn { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: var(--s-5); padding: var(--s-5) 0; background: none; border: 0; text-align: left; font-size: 1.0625rem; font-weight: 600; }
.accordion__btn .pm { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--rule); transition: background var(--dur-fast), border-color var(--dur-fast); }
.accordion__btn:hover .pm { border-color: var(--fg); }
.accordion__btn[aria-expanded="true"] .pm { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.accordion__btn .pm .icon { width: 16px; height: 16px; }
.accordion__btn .pm .i-minus { display: none; }
.accordion__btn[aria-expanded="true"] .pm .i-plus { display: none; }
.accordion__btn[aria-expanded="true"] .pm .i-minus { display: block; }
.accordion__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur) var(--ease); }
.accordion__panel > div { overflow: hidden; }
.accordion__panel.is-open { grid-template-rows: 1fr; }
.accordion__panel p { color: var(--muted); padding-bottom: var(--s-5); max-width: 62ch; }

/* --- Trust strip --------------------------------------------------------- */
.trust-strip { border-block: 1px solid var(--rule); }
.trust-strip ul { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3) var(--s-6); padding-block: var(--s-4); }
.trust-strip li { display: flex; align-items: center; gap: var(--s-2); white-space: nowrap; color: var(--muted); }
.trust-strip .icon { width: 16px; height: 16px; color: var(--fg); }

/* --- Breadcrumb ---------------------------------------------------------- */
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--s-2); font-size: 0.75rem; color: var(--muted); }
.breadcrumb li { display: flex; align-items: center; gap: var(--s-2); }
.breadcrumb li + li::before { content: "/"; opacity: 0.5; }
.breadcrumb a:hover { color: var(--fg); }
.breadcrumb [aria-current] { color: var(--fg); }

/* --- Play button --------------------------------------------------------- */
.play { display: inline-flex; align-items: center; gap: var(--s-3); background: none; border: 0; color: var(--cg-white); font-weight: 600; font-size: 0.875rem; }
.play__disc { width: 72px; height: 72px; display: grid; place-items: center; background: var(--cg-yellow); color: var(--cg-black); transition: transform var(--dur) var(--ease); }
.play:hover .play__disc { transform: scale(1.06); }
.play__disc .icon { width: 24px; height: 24px; margin-left: 3px; }

/* --- Review notes (prototype only; toggled from the panel) ----------------- */
.review-note { display: none; }
html[data-notes="on"] .review-note {
  display: flex; gap: var(--s-2); align-items: flex-start;
  position: absolute; top: var(--s-3); left: var(--s-3); z-index: 30; max-width: 360px;
  padding: var(--s-2) var(--s-3); background: #FFF6D6; color: #3A2E00; border: 1px solid #D6A622;
  font: 500 0.75rem/1.45 var(--font-body); box-shadow: 0 6px 18px -8px rgba(0,0,0,0.4);
}
html[data-notes="on"] .review-note b { font-weight: 700; white-space: nowrap; }
html[data-notes="on"] { overflow-x: clip; }   /* draft labels near the right edge never widen the page */
.draft { position: relative; }
html[data-notes="on"] .draft { outline: 1.5px dashed #D6A622; outline-offset: 3px; }
html[data-notes="on"] .draft::before {
  content: "Draft figure: needs claims-register sign-off"; position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 5;
  background: #FFF6D6; color: #3A2E00; font: 600 0.625rem/1.2 var(--font-body); padding: 3px 6px; white-space: nowrap; letter-spacing: 0; text-transform: none;
}

/* Two-line subtexts (5 Nov): see sub2() in sections.js */
[data-sub2] { text-wrap: balance; }