/* Trancher site styles.
   Values come from tokens.css only. One block per component, named after the
   data-component attribute it styles. Breakpoints: 1120px (header collapses
   to the mobile menu), 960px (multi-column grids narrow) and 640px (single
   column, mobile type). */

/* ==========================================================================
   Base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--body-size);
  line-height: var(--body-line);
  color: var(--ink-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--ink-strong);
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }
[hidden] { display: none !important; }

a { color: var(--brand-primary); text-decoration: none; }
a:hover { color: var(--brand-primary-hover); text-decoration: underline; text-underline-offset: 3px; }

/* The focus ring. One rule, not to be overridden. */
:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 100;
  padding: var(--space-3) var(--space-4);
  background: var(--surface-page);
  color: var(--ink-strong);
  font-weight: 600;
  border-radius: var(--radius-md);
}
.skip-link:focus { top: var(--space-4); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ==========================================================================
   Layout
   ========================================================================== */

.container {
  width: 100%;
  max-width: calc(var(--container-max) + 2 * var(--container-gutter));
  margin: 0 auto;
  padding: 0 var(--container-gutter);
}

/* A full-width band. Square edges. */
.band { padding-block: var(--space-9); background: var(--surface-page); }
.band--raised { background: var(--surface-raised); }
.band--sunken { background: var(--surface-sunken); }
.band--navy { background: var(--surface-navy); color: var(--ink-on-navy-muted); }
.band--cyan-soft { background: var(--surface-cyan-soft); }
.band--lime-soft { background: var(--surface-lime-soft); }
.band--blue-soft { background: var(--surface-blue-soft); }

.stack { display: flex; flex-direction: column; }
.stack > * + * { margin-top: 0; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }
.gap-7 { gap: var(--space-7); }

.grid { display: grid; gap: var(--grid-gap); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.prose { max-width: var(--measure-prose); }

@media (max-width: 960px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .band { padding-block: var(--space-8); }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
}

/* ==========================================================================
   Type
   Mobile drops each display style one step, as the 390px boards do.
   ========================================================================== */

.display-1 { font-size: var(--display-1-size); line-height: var(--display-1-line); letter-spacing: var(--display-1-tracking); }
.display-2 { font-size: var(--display-2-size); line-height: var(--display-2-line); letter-spacing: var(--display-2-tracking); }
.display-3 { font-size: var(--display-3-size); line-height: var(--display-3-line); letter-spacing: var(--display-3-tracking); }
.heading-1 { font-size: var(--heading-1-size); line-height: var(--heading-1-line); letter-spacing: -0.01em; }
.heading-2 { font-size: var(--heading-2-size); line-height: var(--heading-2-line); letter-spacing: -0.01em; }
.heading-3 { font-size: var(--heading-3-size); line-height: var(--heading-3-line); font-weight: var(--heading-3-weight); }

.body-lead { font-size: var(--body-lead-size); line-height: var(--body-lead-line); }
.body { font-size: var(--body-size); line-height: var(--body-line); }
.body-sm { font-size: var(--body-sm-size); line-height: var(--body-sm-line); }
.caption { font-size: var(--caption-size); line-height: var(--caption-line); color: var(--ink-muted); }
.label { font-size: var(--label-size); line-height: var(--label-line); font-weight: var(--label-weight); color: var(--ink-strong); }

.eyebrow {
  font-size: var(--eyebrow-size);
  line-height: var(--eyebrow-line);
  font-weight: var(--eyebrow-weight);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--brand-primary);
}
:is(.band--navy, .hero, .closing-cta) .eyebrow, .eyebrow--on-navy { color: var(--brand-cyan); }
.eyebrow--muted { color: var(--ink-muted); }

.price {
  font-family: var(--font-display);
  font-size: var(--price-size);
  line-height: var(--price-line);
  font-weight: var(--price-weight);
  color: var(--ink-strong);
}

.strong { font-weight: 600; color: var(--ink-strong); }

/* Headings and body copy on navy bands. */
:is(.band--navy, .hero, .closing-cta) :is(h1, h2, h3, .strong) { color: var(--ink-on-navy); }
:is(.band--navy, .hero, .closing-cta) :is(.body-lead, .body, .body-sm) { color: var(--ink-on-navy-muted); }

@media (max-width: 640px) {
  .display-1 { font-size: var(--price-size); line-height: var(--price-line); }
  .display-2 { font-size: var(--display-3-size); line-height: var(--display-3-line); }
  .display-3 { font-size: var(--heading-1-size); line-height: var(--heading-1-line); }
  .body-lead { font-size: 18px; line-height: 28px; }
}

/* brand-primary is 4.7:1 on white but under 4.5:1 on every tinted surface
   (4.1 to 4.5). On those, blue text takes brand-primary-hover, 5.9:1 or better.
   Buttons keep brand-primary: their text is white on the blue. */
:is(.band--raised, .band--sunken, .band--cyan-soft, .band--lime-soft, .band--blue-soft, .profile-selector, .mega-menu__aside, .disclaimer, .calc-teaser__panel)
  :is(.eyebrow:not(.eyebrow--muted), .link-arrow, .sector-card__cta, p a:not(.btn), li > a:not([class])) {
  color: var(--brand-primary-hover);
}

/* ==========================================================================
   Buttons and links
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: var(--space-3) var(--space-5);
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--button-size);
  line-height: var(--button-line);
  font-weight: var(--button-weight);
  letter-spacing: var(--button-tracking);
  text-align: center;
  cursor: pointer;
  transition: background-color 150ms, border-color 150ms, color 150ms;
}
.btn:hover { text-decoration: none; }

.btn--primary { background: var(--brand-primary); border-color: var(--brand-primary); color: var(--ink-on-navy); }
.btn--primary:hover { background: var(--brand-primary-hover); border-color: var(--brand-primary-hover); color: var(--ink-on-navy); }

.btn--secondary { background: transparent; border-color: var(--border-strong); color: var(--brand-navy); }
.btn--secondary:hover { background: var(--surface-sunken); color: var(--brand-navy); }

/* On navy: a white button and an outlined one. */
.btn--light { background: var(--ink-on-navy); border-color: var(--ink-on-navy); color: var(--surface-navy); }
.btn--light:hover { background: var(--surface-sunken); border-color: var(--surface-sunken); color: var(--surface-navy); }
.btn--outline-light { background: transparent; border-color: var(--ink-on-navy-muted); color: var(--ink-on-navy); }
.btn--outline-light:hover { border-color: var(--ink-on-navy); color: var(--ink-on-navy); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: stretch; }

@media (max-width: 640px) {
  .btn-row { flex-direction: column; }
  .btn-row .btn { width: 100%; }
}

/* A text link with an arrow, e.g. "All resources →". */
.link-arrow {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  font-size: 16px;
  line-height: 23px;
  font-weight: 600;
  color: var(--brand-primary);
}
:is(.band--navy, .hero, .closing-cta) .link-arrow { color: var(--brand-cyan); }
:is(.band--navy, .hero, .closing-cta) .link-arrow:hover { color: var(--ink-on-navy); }

/* "Prefer specialist set-up? Speak with our in-house team" */
.specialist-link { font-size: var(--body-sm-size); line-height: var(--body-sm-line); color: var(--ink-body); }
/* Inline, so it wraps with the sentence; the padding keeps the tap area 48px tall. */
.specialist-link a { font-weight: 600; padding-block: 15px; }
:is(.band--navy, .hero, .closing-cta) .specialist-link { color: var(--ink-on-navy-muted); }
:is(.band--navy, .hero, .closing-cta) .specialist-link a { color: var(--brand-cyan); }

/* ==========================================================================
   Tags and flags
   ========================================================================== */

.tag {
  display: inline-block;
  align-self: flex-start;
  padding: var(--space-1) 10px;
  border-radius: var(--radius-sm);
  font-size: var(--eyebrow-size);
  line-height: var(--eyebrow-line);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--surface-sunken);
  color: var(--ink-strong);
}
.tag--lime { background: var(--surface-lime-soft); }
.tag--blue { background: var(--surface-blue-soft); }
.tag--cyan { background: var(--surface-cyan-soft); }

/* Wording waiting for sign-off. Remove when the user signs it off. */
.flag-pending {
  display: inline-block;
  align-self: flex-start;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  font-size: 11px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--signal-warning-soft);
  color: var(--signal-warning);
}

/* ==========================================================================
   Placeholders
   Copy that does not exist yet, and image slots. Both are visible on purpose
   and must be replaced, not styled away.
   ========================================================================== */

.copy-needed {
  display: inline;
  padding: 2px var(--space-2);
  border: 1px dashed var(--ink-muted);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--ink-body);
  font-style: italic;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-4);
  text-align: center;
  background: var(--border-subtle);
  color: var(--ink-body);
  border-radius: var(--radius-md);
}
.slot svg { width: 28px; height: 28px; }
.slot__kind {
  font-size: var(--eyebrow-size);
  line-height: var(--eyebrow-line);
  font-weight: 600;
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
}
.slot__subject { font-size: 14px; line-height: 20px; max-width: 360px; }

.slot--on-navy {
  background: var(--surface-navy-deep);
  border: 1px solid var(--border-on-navy);
  color: var(--ink-on-navy-muted);
}
/* A product screenshot still to be taken. */
.slot--ui {
  border: 1px dashed var(--ink-muted);
  background: var(--surface-raised);
  padding: 0;
  justify-content: flex-start;
  overflow: hidden;
}
.slot--ui::before {
  content: "";
  display: block;
  align-self: stretch;
  height: 28px;
  flex: none;
  border-bottom: 1px dashed var(--ink-muted);
}
.slot--ui > * { margin-block: auto; }
.slot--ui.slot--on-navy { background: var(--surface-navy-deep); border-color: var(--ink-on-navy-muted); }
.slot--ui.slot--on-navy::before { border-bottom-color: var(--ink-on-navy-muted); }
.slot__body { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-4); }

.slot--hero { min-height: 420px; }
.slot--card { height: 168px; border-radius: 0; }
.slot--article { height: 216px; border-radius: 0; }

/* The one icon not drawn yet. */
.icon-tbd {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 26px;
  border: 1px dashed var(--ink-muted);
  border-radius: var(--radius-sm);
  font-size: 10px;
  line-height: 12px;
  color: var(--ink-body);
  text-align: center;
}

/* ==========================================================================
   NavBar, MegaMenu, NavDropdown, MobileMenu
   ========================================================================== */

.site-header {
  position: relative;
  z-index: 50;
  background: var(--surface-navy);
}
.site-header__bar {
  display: flex;
  align-items: center;
  gap: 40px;
  height: 80px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  color: var(--ink-on-navy);
}
.brand:hover { text-decoration: none; color: var(--ink-on-navy); }
.brand svg { width: 24px; height: 25px; flex: none; }
.brand__word {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.nav-main { margin-left: auto; }
.nav-main__list { display: flex; align-items: center; gap: 28px; }

.nav-main__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 48px;
  padding: 0;
  border: 0;
  border-top: 2px solid transparent;
  border-bottom: 2px solid transparent;
  background: transparent;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-on-navy-muted);
  cursor: pointer;
}
.nav-main__item svg { flex: none; width: 12px; height: 12px; transition: transform 150ms; }
.nav-main__item:hover { color: var(--ink-on-navy); text-decoration: none; }
.nav-main__item[aria-expanded="true"] { color: var(--ink-on-navy); border-bottom-color: var(--ink-on-navy); }
.nav-main__item[aria-expanded="true"] svg { transform: rotate(180deg); }

/* Current section: white text and a lime underline. The header markup is
   identical on every page; body[data-section] picks the current item. */
body[data-section="who-we-help"] [data-nav="who-we-help"],
body[data-section="platform"] [data-nav="platform"],
body[data-section="pricing"] [data-nav="pricing"],
body[data-section="resources"] [data-nav="resources"],
body[data-section="events"] [data-nav="events"],
body[data-section="about"] [data-nav="about"] {
  color: var(--ink-on-navy);
  border-bottom-color: var(--brand-lime);
}

.site-header__actions { display: flex; align-items: center; gap: 20px; }
.site-header__signin {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-on-navy-muted);
}
.site-header__signin:hover { color: var(--ink-on-navy); }
.site-header__actions .btn { padding: var(--space-3) 20px; font-size: 15px; }

.nav-panel[hidden] { display: none; }

/* MegaMenu: the one lifted layer while it is open. */
.mega-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--surface-page);
  border-bottom: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-md);
}
.mega-menu__inner { display: flex; gap: var(--space-7); padding-block: 40px var(--space-7); }
.mega-menu__col { flex: 1 1 0; }
.mega-menu__col--narrow { flex: 0 0 300px; }
.mega-menu__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
  font-size: 14px;
  line-height: 20px;
}
.mega-menu__links--2col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-5); }
.mega-menu__link {
  display: block;
  min-height: 48px;
  padding: 10px var(--space-3);
  margin: 0 calc(-1 * var(--space-3));
  border-radius: var(--radius-md);
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;
  color: var(--ink-strong);
}
.mega-menu__link:hover { background: var(--surface-sunken); color: var(--ink-strong); text-decoration: none; }
.mega-menu__aside {
  flex: 0 0 300px;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
}
.mega-menu__aside .link-arrow { font-size: var(--body-sm-size); }
.mega-menu__aside .link-arrow:last-child { margin-top: auto; }

/* NavDropdown (Resources). */
.nav-dropdown-wrap { position: relative; }
.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 240px;
  padding: var(--space-2);
  background: var(--surface-page);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}
.nav-dropdown a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-md);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink-strong);
}
.nav-dropdown a:hover { background: var(--surface-sunken); text-decoration: none; }

/* Mobile menu button, hidden on desktop. */
.menu-toggle {
  display: none;
  align-items: center;
  gap: var(--space-2);
  min-height: 48px;
  min-width: 48px;
  margin-left: auto;
  padding: 0 var(--space-3);
  border: 0;
  background: transparent;
  color: var(--ink-on-navy);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.menu-toggle svg { width: 22px; height: 22px; }

/* MobileMenu: full-height navy sheet. */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 60;
  overflow-y: auto;
  padding: 0 var(--container-gutter) var(--space-6);
  background: var(--surface-navy);
}
.mobile-menu[hidden] { display: none; }
.mobile-menu__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  margin-right: calc(-1 * var(--space-3));
}
.mobile-menu__top .menu-toggle { display: flex; margin-left: 0; }
.mobile-menu__list { border-top: 1px solid var(--border-on-navy); }
.mobile-menu__list > li { border-bottom: 1px solid var(--border-on-navy); }
.mobile-menu__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 56px;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 18px;
  font-weight: 600;
  color: var(--ink-on-navy);
  cursor: pointer;
  text-align: left;
}
.mobile-menu__item:hover { color: var(--ink-on-navy); text-decoration: none; }
.mobile-menu__item svg { flex: none; width: 12px; height: 12px; transition: transform 150ms; }
.mobile-menu__item[aria-expanded="true"] svg { transform: rotate(180deg); }
.mobile-menu__group { padding: var(--space-1) 0 var(--space-3); }
.mobile-menu__group-label {
  margin: var(--space-2) 0 var(--space-1);
  font-size: var(--eyebrow-size);
  line-height: var(--eyebrow-line);
  font-weight: 600;
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--ink-on-navy);
}
.mobile-menu__sub {
  display: flex;
  align-items: center;
  min-height: 48px;
  font-size: 16px;
  color: var(--ink-on-navy-muted);
}
.mobile-menu__sub:hover { color: var(--ink-on-navy); }
.mobile-menu__all { color: var(--brand-cyan); font-weight: 600; margin-bottom: var(--space-2); }
.mobile-menu__actions { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-5); }
.mobile-menu__actions .site-header__signin { justify-content: center; color: var(--ink-on-navy); font-weight: 600; font-size: 16px; }

@media (max-width: 1120px) {
  .site-header__bar { height: 64px; }
  .nav-main, .site-header__actions, .nav-panel { display: none !important; }
  .menu-toggle { display: flex; }
}
@media (min-width: 1121px) {
  .mobile-menu { display: none !important; }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  padding-block: var(--space-8) 40px;
  background: var(--surface-navy);
  border-top: 1px solid var(--border-on-navy);
  color: var(--ink-on-navy-muted);
}
.site-footer__top { display: flex; gap: var(--space-8); align-items: flex-start; }
.site-footer__brand {
  flex: 0 0 280px;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  font-size: var(--body-sm-size);
  line-height: var(--body-sm-line);
}
.site-footer__social { display: flex; gap: var(--space-3); }
.site-footer__social a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 var(--space-4);
  border: 1px solid var(--ink-on-navy-muted);
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-on-navy);
}
.site-footer__social a:hover { border-color: var(--ink-on-navy); text-decoration: none; }
.site-footer__cols { flex: 1 1 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); }
.site-footer__heading {
  margin-bottom: 10px;
  font-size: var(--eyebrow-size);
  line-height: var(--eyebrow-line);
  font-weight: 600;
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--ink-on-navy);
}
.site-footer__cols a {
  display: flex;
  align-items: center;
  min-height: 48px;
  font-size: var(--body-sm-size);
  color: var(--ink-on-navy-muted);
}
.site-footer a:hover { color: var(--ink-on-navy); }
.site-footer__legal {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: var(--space-7);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-on-navy);
  font-size: var(--caption-size);
  line-height: 20px;
}
.site-footer__legal-links { display: flex; flex-wrap: wrap; column-gap: var(--space-5); align-items: center; }
.site-footer__legal-links a { display: inline-flex; align-items: center; min-height: 48px; color: var(--ink-on-navy-muted); }

@media (max-width: 960px) {
  .site-footer__top { flex-direction: column; gap: 40px; }
  .site-footer__brand { flex-basis: auto; }
  .site-footer__cols { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-4); }
}
@media (max-width: 640px) {
  .site-footer { padding-top: var(--space-7); }
}

/* ==========================================================================
   ClosingCTA
   ========================================================================== */

.closing-cta { padding-block: var(--space-9); background: var(--surface-navy); }
.closing-cta__inner { display: flex; gap: var(--space-8); align-items: flex-end; }
.closing-cta__text { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--space-4); }
.closing-cta__text h2 { max-width: 620px; color: var(--ink-on-navy); }
.closing-cta__text p { max-width: 560px; color: var(--ink-on-navy-muted); }
.closing-cta__actions { flex: none; }

@media (max-width: 960px) {
  .closing-cta__inner { flex-direction: column; align-items: stretch; gap: var(--space-6); }
}
@media (max-width: 640px) {
  .closing-cta { padding-block: var(--space-8); }
}

/* ==========================================================================
   Hero (variants: split with photo or product UI, compact) and Breadcrumb
   ========================================================================== */

.hero { padding-block: var(--space-9); background: var(--surface-navy); }
.hero--compact { padding-block: var(--space-8); }
.hero__inner { display: flex; flex-direction: column; gap: var(--space-7); }
.hero__split { display: flex; gap: var(--space-8); align-items: center; }
.hero__split--top { align-items: flex-start; }
.hero__text { flex: 1 1 0; display: flex; flex-direction: column; gap: var(--space-4); }
.hero__text h1 { color: var(--ink-on-navy); max-width: 620px; }
.hero__text .body-lead { color: var(--ink-on-navy-muted); max-width: 600px; }
.hero__actions { padding-top: var(--space-2); }
.hero__media { flex: 0 0 520px; }
.hero__aside { flex: 0 0 480px; display: flex; flex-direction: column; gap: var(--space-3); }

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding-bottom: var(--space-2);
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-on-navy-muted);
}
/* The padding gives a 48px tap area; the negative margin keeps the line 20px. */
.breadcrumb a { padding-block: 14px; margin-block: -14px; color: var(--ink-on-navy-muted); text-decoration: underline; text-underline-offset: 3px; }
.breadcrumb a:hover { color: var(--ink-on-navy); }
.breadcrumb [aria-current="page"] { color: var(--ink-on-navy); }

@media (max-width: 960px) {
  .hero__split { flex-direction: column; align-items: stretch; }
  .hero__media, .hero__aside { flex-basis: auto; }
  .slot--hero { min-height: 280px; }
}
@media (max-width: 640px) {
  .hero { padding-block: var(--space-8); }
  .hero--compact { padding-block: var(--space-7); }
}

/* ==========================================================================
   TrustStrip. One lime rule only.
   ========================================================================== */

.trust-strip { display: flex; gap: var(--space-5); }
.trust-strip__rule { flex: none; width: 4px; align-self: stretch; background: var(--brand-lime); }
.trust-strip__list { display: flex; gap: var(--space-5); flex: 1 1 auto; }
.trust-strip__item {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-left: var(--space-5);
  border-left: 1px solid var(--border-on-navy);
}
.trust-strip__item p { font-size: var(--body-sm-size); line-height: 22px; font-weight: 600; color: var(--ink-on-navy); }
.trust-strip__item a { display: inline-flex; align-items: center; min-height: 48px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--brand-cyan); }
.trust-strip__item a:hover { color: var(--ink-on-navy); }
.trust-strip__item:first-child { border-left: 0; padding-left: 0; }

@media (max-width: 960px) {
  .trust-strip__list { flex-direction: column; gap: var(--space-4); }
  .trust-strip__item { padding: var(--space-4) 0 0; border-left: 0; border-top: 1px solid var(--border-on-navy); }
}

/* ==========================================================================
   Section head: eyebrow, heading, intro, and an optional link on the right.
   ========================================================================== */

.section-head { display: flex; flex-direction: column; gap: var(--space-3); }
.section-head h2 { max-width: 840px; }
.section-head .body-lead, .section-head .body { max-width: var(--measure-prose); }
.section-head--split { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: var(--space-5); }
.section-head--split > div { display: flex; flex-direction: column; gap: var(--space-3); }

@media (max-width: 640px) {
  .section-head--split { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   CapturedList and Qualifier
   ========================================================================== */

.captured { display: flex; gap: var(--space-9); align-items: flex-start; }
.captured__intro { flex: 0 0 480px; display: flex; flex-direction: column; gap: var(--space-4); }
.captured__intro .body-lead { max-width: 460px; }
.captured__list-wrap { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--space-3); }
.captured-list { border-bottom: 1px solid var(--border-subtle); }
.captured-list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 0;
  border-top: 1px solid var(--border-subtle);
  color: var(--ink-strong);
}
.captured-list li::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  margin-top: 7px;
  border: 2px solid var(--border-strong);
}

/* Tranche 1 variant: no list, so the two columns sit on one baseline. */
.captured--short { align-items: center; }
.captured--short .captured__list-wrap { gap: var(--space-4); }

/* "Not every engagement is captured." Always on its own line. */
.qualifier { display: flex; gap: var(--space-4); align-items: flex-start; padding-top: var(--space-4); }
.qualifier::before { content: ""; flex: none; width: 4px; height: 34px; background: var(--brand-lime); }
.qualifier p { font-family: var(--font-display); font-size: var(--heading-1-size); line-height: var(--heading-1-line); font-weight: 500; color: var(--ink-strong); }

@media (max-width: 960px) {
  .captured { flex-direction: column; gap: var(--space-6); }
  .captured__intro { flex-basis: auto; }
}
@media (max-width: 640px) {
  .qualifier p { font-size: var(--heading-2-size); line-height: var(--heading-2-line); }
}

/* ==========================================================================
   ObligationBlocks. Six numbered blocks.
   ========================================================================== */

.obligations { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.obligation { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-4); border-top: 2px solid var(--border-strong); }
.obligation__num { font-family: var(--font-display); font-size: var(--body-sm-size); font-weight: 600; color: var(--ink-muted); }
.obligation h3 { max-width: 320px; }
.obligation p { max-width: 320px; font-size: var(--body-sm-size); line-height: 26px; }

@media (max-width: 960px) { .obligations { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .obligations { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); } }

/* ==========================================================================
   CapabilityGrid and CapabilityCard
   ========================================================================== */

.capability-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}
.band--raised .capability-card, .band--sunken .capability-card { background: var(--surface-page); }
.capability-card svg { width: 26px; height: 26px; flex: none; }
.capability-card h3 { max-width: 300px; }

/* ==========================================================================
   TwoPaths and PathCard. Self-serve and Guided cards are identical in size,
   border and button style.
   ========================================================================== */

.two-paths__cards { display: flex; gap: var(--space-5); align-items: stretch; }
.path-card {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-6);
  background: var(--surface-page);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}
.path-card__body { display: flex; flex-direction: column; gap: var(--space-3); }
.path-card__label { display: flex; align-items: center; gap: var(--space-3); }
.path-card__label::before { content: ""; width: 40px; height: 4px; background: var(--brand-lime); }
.path-card--guided .path-card__label::before { background: var(--brand-cyan); }
.path-card h3 { max-width: 480px; }
.path-card .body { max-width: 520px; }

/* The short variant, in the Home hero panel. */
.path-card--short {
  gap: 6px;
  padding: 20px 22px;
  background: var(--surface-navy-deep);
  border-color: var(--border-on-navy);
}
.path-card--short::before { content: ""; width: 32px; height: 3px; margin-bottom: 6px; background: var(--brand-lime); }
.path-card--short.path-card--guided::before { background: var(--brand-cyan); }
.path-card--short .path-card__title { font-size: var(--body-size); line-height: 24px; font-weight: 600; color: var(--ink-on-navy); }
.path-card--short p { font-size: var(--body-sm-size); line-height: var(--body-sm-line); color: var(--ink-on-navy-muted); }

@media (max-width: 960px) {
  .two-paths__cards { flex-direction: column; gap: var(--space-4); }
}
@media (max-width: 640px) {
  .path-card { padding: var(--space-5); }
  .path-card .btn { width: 100%; }
}

/* ==========================================================================
   Timeline. Days 1-7, Days 8-21, Thereafter. Lime marks only the final
   milestone.
   ========================================================================== */

.timeline { display: flex; gap: var(--space-6); }
.timeline li {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  border-top: 2px solid var(--border-on-navy);
}
.timeline li::before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  margin-top: -7px;
  border: 2px solid var(--ink-on-navy);
}
.timeline li:last-child::before { width: 40px; background: var(--brand-lime); border-color: var(--brand-lime); }
.timeline__when {
  margin-top: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--price-size);
  line-height: var(--price-line);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink-on-navy);
}
.timeline__what { max-width: 320px; color: var(--ink-on-navy-muted); }

@media (max-width: 960px) {
  .timeline { flex-direction: column; gap: 0; border-left: 2px solid var(--border-on-navy); margin-left: 5px; }
  .timeline li { border-top: 0; padding: 0 0 var(--space-6) var(--space-5); position: relative; }
  .timeline li::before { position: absolute; left: -7px; top: 0; margin-top: 0; }
  .timeline li:last-child::before { width: 12px; height: 40px; }
  .timeline__when { margin-top: -6px; font-size: var(--display-3-size); line-height: var(--display-3-line); }
}

/* ==========================================================================
   ArticleCard (+ Featured) and RelatedResources
   ========================================================================== */

.article-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface-page);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: inherit;
}
.article-card:hover { border-color: var(--border-strong); text-decoration: none; color: inherit; }
.article-card__body { flex-grow: 1; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); }
.article-card__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.article-card h3 { max-width: 330px; }
.article-card__meta { margin-top: auto; font-size: var(--caption-size); line-height: var(--caption-line); color: var(--ink-muted); }

/* ==========================================================================
   Accordion (details/summary). First item open.
   ========================================================================== */

.accordion { border-top: 1px solid var(--border-subtle); }
.accordion details { border-bottom: 1px solid var(--border-subtle); }
.accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: 64px;
  padding: var(--space-4) 0;
  color: var(--ink-strong);
  list-style: none;
  cursor: pointer;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion__q { font-family: var(--font-display); font-size: var(--heading-2-size); line-height: var(--heading-2-line); font-weight: 500; }
.accordion summary svg { flex: none; width: 20px; height: 20px; transition: transform 150ms; }
.accordion details[open] summary svg { transform: rotate(45deg); }
.accordion__a { max-width: var(--measure-prose); padding-bottom: var(--space-5); }
.accordion__a p + p { margin-top: var(--space-3); }

@media (max-width: 640px) {
  .accordion__q { font-size: var(--heading-3-size); line-height: var(--heading-3-line); }
}

/* ==========================================================================
   Pills: ProfileSelector and FilterPills share one style. Selected = filled
   plus a check, never colour alone.
   ========================================================================== */

.pill-list { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid var(--ink-muted);
  border-radius: var(--radius-pill);
  background: var(--surface-page);
  color: var(--ink-body);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.pill:hover { border-color: var(--ink-strong); color: var(--ink-strong); }
.pill svg { display: none; width: 14px; height: 14px; }
.pill[aria-pressed="true"] { background: var(--brand-primary); border-color: var(--brand-primary); color: var(--ink-on-navy); }
.pill[aria-pressed="true"] svg { display: block; }

.profile-selector { padding-block: 28px; background: var(--surface-cyan-soft); }
.profile-selector__row { display: flex; align-items: center; gap: 20px; }
.profile-selector__label { flex: none; font-size: var(--body-size); font-weight: 600; color: var(--ink-strong); }
.profile-selector__note { margin-top: var(--space-3); }

@media (max-width: 960px) {
  .profile-selector__row { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
}

/* ==========================================================================
   SectorGrid and SectorCard
   ========================================================================== */

.sector-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface-page);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: inherit;
}
.sector-card:hover { border-color: var(--border-strong); text-decoration: none; color: inherit; }
.sector-card__body { flex-grow: 1; display: flex; flex-direction: column; gap: 10px; padding: var(--space-5); }
.sector-card h3 { max-width: 300px; }
.sector-card__line { flex-grow: 1; font-size: var(--body-sm-size); line-height: var(--body-sm-line); color: var(--ink-body); }
.sector-card__cta { margin-top: var(--space-2); font-size: var(--body-sm-size); line-height: var(--body-sm-line); font-weight: 600; color: var(--brand-primary); }

.sector-grid__tranches { display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--body-sm-size); line-height: var(--body-sm-line); }
.sector-grid__tranches strong { color: var(--ink-strong); }

/* ==========================================================================
   GainsList
   ========================================================================== */

.gains-head { display: flex; flex-direction: column; gap: var(--space-4); }
.gains-head::before { content: ""; width: 40px; height: 4px; background: var(--brand-lime); }
.gains-list { display: flex; gap: var(--space-5); }
.gains-list li { flex: 1 1 0; padding-top: var(--space-4); border-top: 2px solid var(--border-strong); }
.gains-list p { font-family: var(--font-display); font-size: 20px; line-height: 26px; font-weight: 500; color: var(--ink-strong); }

@media (max-width: 960px) {
  .gains-list { flex-direction: column; gap: var(--space-4); }
}

/* ==========================================================================
   CalculatorTeaser
   ========================================================================== */

.calc-teaser { display: flex; gap: var(--space-8); align-items: center; }
.calc-teaser__text { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--space-3); }
.calc-teaser__text h2, .calc-teaser__text p { max-width: 520px; }
.calc-teaser__panel {
  flex: 0 0 560px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: var(--space-6);
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}
.calc-outputs { display: flex; gap: var(--space-4); padding-top: 20px; border-top: 1px solid var(--border-subtle); }
.calc-outputs > div { flex: 1 1 0; }
.calc-outputs__figure { margin-top: var(--space-1); font-family: var(--font-display); font-size: var(--heading-1-size); line-height: var(--heading-1-line); font-weight: 500; color: var(--ink-strong); }

@media (max-width: 960px) {
  .calc-teaser { flex-direction: column; align-items: stretch; gap: var(--space-6); }
  .calc-teaser__panel { flex-basis: auto; }
}
@media (max-width: 640px) {
  .calc-outputs { flex-direction: column; }
}

/* ==========================================================================
   FormField. Input border is ink-muted for 3:1. Errors have text.
   ========================================================================== */

.form-row { display: flex; gap: var(--space-4); }
.form-row > * { flex: 1 1 0; }
.field { display: block; }
.field__label { display: block; margin-bottom: var(--space-2); font-size: var(--label-size); line-height: var(--label-line); font-weight: var(--label-weight); color: var(--ink-strong); }
.field__hint { display: block; margin: calc(-1 * var(--space-1)) 0 var(--space-2); font-size: var(--caption-size); line-height: var(--caption-line); color: var(--ink-muted); }
.field__input {
  width: 100%;
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--ink-muted);
  border-radius: var(--radius-sm);
  background: var(--surface-page);
  color: var(--ink-strong);
  font-size: var(--body-size);
}
textarea.field__input { min-height: 120px; resize: vertical; }
.field__error { display: none; margin-top: var(--space-2); font-size: var(--label-size); line-height: var(--label-line); font-weight: 600; color: var(--signal-danger); }
.field.is-invalid .field__input { border-color: var(--signal-danger); border-width: 2px; }
.field.is-invalid .field__error { display: block; }

@media (max-width: 640px) {
  .form-row { flex-direction: column; }
}

/* ==========================================================================
   Disclaimer. Blue = note, amber = check before publishing.
   ========================================================================== */

.disclaimer {
  max-width: 820px;
  padding: 20px var(--space-5);
  border-left: 3px solid var(--brand-primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--surface-blue-soft);
}
.disclaimer--verify { border-left-color: var(--signal-warning); background: var(--signal-warning-soft); }
.disclaimer__title { margin-bottom: 6px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink-strong); }
.disclaimer__body { font-size: var(--body-sm-size); line-height: var(--body-sm-line); color: var(--ink-body); }

/* ==========================================================================
   Page components: commercial
   ========================================================================== */

/* Commercial pages: Platform and Pricing.
   Values come from tokens.css only. One block per component, named after the
   data-component it styles. To be merged into site.css by the lead. */

/* ==========================================================================
   CapabilityGrid media row (Platform). A photo slot and a product UI slot
   under the capability cards, equal width.
   ========================================================================== */

.capability-media .slot { min-height: 380px; }

@media (max-width: 640px) {
  .capability-media .slot { min-height: 260px; }
}

/* ==========================================================================
   Price unit. The small "/ month" or "one-off" after a .price figure.
   ========================================================================== */

.price__unit {
  font-family: var(--font-sans);
  font-size: var(--body-sm-size);
  line-height: var(--body-sm-line);
  font-weight: 400;
  color: var(--ink-muted);
}

/* ==========================================================================
   StarterKitOffer (Platform). Text on the left, an offer card on the right.
   ========================================================================== */

.starter-kit { display: flex; gap: var(--space-8); align-items: flex-start; }
.starter-kit__text { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--space-3); }
.starter-kit__text h2, .starter-kit__text p { max-width: 560px; }
.starter-kit__card {
  flex: 0 0 420px;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--surface-page);
  border: 2px solid var(--border-strong);
  border-radius: var(--radius-lg);
}
.starter-kit__title {
  font-family: var(--font-display);
  font-size: var(--heading-2-size);
  line-height: var(--heading-2-line);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink-strong);
}
.starter-kit__card .body-sm { max-width: 356px; }
.starter-kit__card .btn { width: 100%; }
.starter-kit__action { padding-top: var(--space-2); }

@media (max-width: 960px) {
  .starter-kit { flex-direction: column; align-items: stretch; gap: var(--space-6); }
  .starter-kit__card { flex-basis: auto; }
}
@media (max-width: 640px) {
  .starter-kit__card { padding: var(--space-5); }
}

/* ==========================================================================
   PricingTable and PricingTable.Plan. Per-check costs sit inside each plan
   card. The featured plan is the page's one lifted element, with a lime flag
   along its top edge.
   ========================================================================== */

.pricing-table__plans { display: flex; gap: var(--space-5); align-items: stretch; }
.plan-card {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--surface-page);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}
.plan-card--featured {
  border: 2px solid var(--border-strong);
  box-shadow: var(--shadow-md);
}
.plan-card--featured::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  height: 6px;
  background: var(--brand-lime);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.plan-card .price { margin-top: var(--space-2); }
.plan-card__costs-label { margin-top: var(--space-3); }
.plan-card__costs li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--border-subtle);
  font-size: var(--body-sm-size);
  line-height: var(--body-sm-line);
}
.plan-card__costs b { font-weight: 600; color: var(--ink-strong); white-space: nowrap; }
.plan-card__action { margin-top: auto; padding-top: var(--space-3); }
.plan-card__action .btn { width: 100%; }

.pricing-table__note { max-width: 820px; }

@media (max-width: 960px) {
  .pricing-table__plans { flex-direction: column; gap: var(--space-4); }
}
@media (max-width: 640px) {
  .plan-card { padding: var(--space-5); }
}

/* ==========================================================================
   PricingExtras. Starter kit set-up and cancellation, side by side.
   ========================================================================== */

.pricing-extras { display: flex; gap: var(--space-5); align-items: stretch; }
.pricing-extras__card {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--surface-page);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}
.pricing-extras__card h2 { max-width: 460px; }
.pricing-extras__card .body-sm { max-width: 480px; }
.pricing-extras__action { padding-top: var(--space-2); }

@media (max-width: 960px) {
  .pricing-extras { flex-direction: column; gap: var(--space-4); }
}
@media (max-width: 640px) {
  .pricing-extras__card { padding: var(--space-5); }
  .pricing-extras__card h2 { font-size: var(--heading-2-size); line-height: var(--heading-2-line); }
  .pricing-extras__action .btn { width: 100%; }
}

/* ==========================================================================
   Page components: journey
   ========================================================================== */

/* Journey pages: How it works and Who we help.
   Component blocks not yet in site.css. Values come from tokens.css only.
   To be merged into site.css by the lead; the <link> to this file then goes. */

/* ==========================================================================
   PathCard steps. The numbered list inside the full Guided PathCard on
   How it works (v3: "(1) Complete AUSTRAC enrolment ... (6) Run first files").
   ========================================================================== */

.path-card__steps { display: flex; flex-direction: column; gap: 6px; counter-reset: path-step; }
.path-card__steps li {
  display: flex;
  gap: 10px;
  font-size: var(--body-sm-size);
  line-height: 22px;
  color: var(--ink-body);
  counter-increment: path-step;
}
.path-card__steps li::before {
  content: counter(path-step);
  flex: none;
  width: 16px;
  font-weight: 600;
  color: var(--ink-strong);
}

/* ==========================================================================
   StepSequence. Numbered list of the six guided steps, paired with a
   product UI slot. Stacks text-first below 960px.
   ========================================================================== */

.step-sequence { display: flex; gap: var(--space-8); align-items: center; }
.step-sequence__text { flex: 1 1 0; display: flex; flex-direction: column; gap: var(--space-6); }
.step-sequence__media { flex: 0 0 560px; }
.step-sequence__media .slot { min-height: 520px; }

.step-list { counter-reset: step; }
.step-list li {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 20px 0;
  border-top: 1px solid var(--border-subtle);
  counter-increment: step;
}
.step-list li::before {
  content: counter(step);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 2px solid var(--border-strong);
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  color: var(--ink-strong);
}
.step-list p {
  padding-top: 9px;
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 26px;
  font-weight: 500;
  color: var(--ink-strong);
}

@media (max-width: 960px) {
  .step-sequence { flex-direction: column; align-items: stretch; gap: var(--space-6); }
  .step-sequence__media { flex-basis: auto; }
  .step-sequence__media .slot { min-height: 300px; }
}

/* ==========================================================================
   HandoverList. What the firm keeps after handover: three quiet cards.
   ========================================================================== */

.handover-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}
.handover-card h3 { max-width: 300px; }
.handover-card p { max-width: 300px; font-size: var(--body-sm-size); line-height: 26px; }

/* ==========================================================================
   GuidePromo. "Not sure if you're captured?" band with a guide cover slot.
   ========================================================================== */

.guide-promo { display: flex; gap: var(--space-8); align-items: center; }
.guide-promo__text { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--space-3); }
.guide-promo__text h2, .guide-promo__text p { max-width: 560px; }
.guide-promo__text .btn-row { padding-top: var(--space-2); }
.guide-promo__media { flex: 0 0 380px; }
.guide-promo__media .slot { min-height: 240px; }

@media (max-width: 960px) {
  .guide-promo { flex-direction: column; align-items: stretch; gap: var(--space-5); }
  .guide-promo__media { flex-basis: auto; }
  .guide-promo__media .slot { min-height: 220px; }
}

/* ==========================================================================
   Copy-needed placeholder on a navy band (Who we help hero intro).
   Generic: probably belongs next to .copy-needed in site.css.
   ========================================================================== */

.copy-needed--on-navy {
  border-color: var(--ink-on-navy-muted);
  background: var(--surface-navy-deep);
  color: var(--ink-on-navy-muted);
}

/* ==========================================================================
   SectorCard, mobile photo height. The 390 boards (Who we help and Home)
   draw the card photo at 120px, not 168px. Belongs in the SectorCard block
   of site.css when merged.
   ========================================================================== */

@media (max-width: 640px) {
  .sector-card .slot--card { height: 120px; }
}

/* ==========================================================================
   Page components: company
   ========================================================================== */

/* Company pages: Partners, About and Security.
   Components not yet in site.css. Values from tokens.css only. To be merged
   into site.css by the lead; breakpoints match site.css (960px, 640px). */

/* ==========================================================================
   Hero text, wide. The Partners and Security heroes have no media column,
   and the boards let the H1 run to 820px.
   ========================================================================== */

.hero__text--wide h1 { max-width: 820px; }

/* ==========================================================================
   PartnerBlocks and PartnerBlock, two variants.
   Primary = Trancher in-house specialists, large, with a photo.
   Secondary = Testudo Compliance Group, visibly smaller: a bordered card with
   a logo slot, a smaller heading and small body text.
   ========================================================================== */

.partner-blocks { display: flex; flex-direction: column; gap: var(--space-7); }

.partner-block--primary { display: flex; gap: var(--space-8); align-items: center; }
.partner-block__media { flex: 0 1 580px; }
.partner-block__media .slot { aspect-ratio: 580 / 440; }
.partner-block__text { flex: 1 1 0; display: flex; flex-direction: column; gap: var(--space-4); }
.partner-block__text h2, .partner-block__text .body-lead { max-width: 560px; }
.partner-block__actions { padding-top: var(--space-2); }

.partner-block--secondary {
  display: flex;
  gap: var(--space-6);
  align-items: flex-start;
  padding: var(--space-6);
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}
.partner-block--secondary .partner-block__text { gap: 10px; }
.partner-block--secondary h3 { max-width: 520px; }
.partner-block--secondary .body-sm { max-width: 620px; }

/* Logo slot: keep until the partner supplies a logo file. */
.partner-block__logo {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 160px;
  height: 64px;
  border: 1px dashed var(--ink-muted);
  border-radius: var(--radius-sm);
  font-size: var(--caption-size);
  line-height: var(--caption-line);
  color: var(--ink-body);
}

@media (max-width: 960px) {
  .partner-blocks { gap: var(--space-6); }
  .partner-block--primary { flex-direction: column; align-items: stretch; gap: var(--space-5); }
  .partner-block__media { flex-basis: auto; }
  .partner-block--secondary { flex-direction: column; gap: var(--space-4); }
}
@media (max-width: 640px) {
  .partner-block--secondary { padding: var(--space-5); }
  /* The board drops this to 24px; heading-2 is the nearest token. */
  .partner-block--secondary h3 { font-size: var(--heading-2-size); line-height: var(--heading-2-line); }
  .partner-block__actions .btn { width: 100%; }
}

/* ==========================================================================
   InvolvementLevels. Three ruled items under a statement heading.
   ========================================================================== */

.involvement-levels h2 { max-width: 820px; }
.involvement-levels__list { display: flex; gap: var(--space-5); }
.involvement-levels__list li {
  flex: 1 1 0;
  padding-top: var(--space-4);
  border-top: 2px solid var(--border-strong);
  font-family: var(--font-display);
  font-size: var(--heading-2-size);
  line-height: var(--heading-2-line);
  font-weight: 500;
  color: var(--ink-strong);
}

@media (max-width: 640px) {
  .involvement-levels__list { flex-direction: column; gap: 20px; }
}

/* ==========================================================================
   ValuesList. Four ruled values on .grid--4.
   ========================================================================== */

.value { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-4); border-top: 2px solid var(--border-strong); }
.value h3, .value p { max-width: 260px; }
.value p { font-size: var(--body-sm-size); line-height: 26px; }

@media (max-width: 640px) {
  .values-grid { gap: var(--space-6); }
}

/* ==========================================================================
   TeamGrid and TeamCard. Real team photos only; the grid grows by rows of
   four. Every card carries identical markup (a CMS collection item later).
   ========================================================================== */

.team-card { display: flex; flex-direction: column; gap: var(--space-2); }
.team-card .slot { aspect-ratio: 1 / 1; }
.team-card h3, .team-card p { max-width: 280px; }
.team-card__role { font-size: var(--body-sm-size); line-height: var(--body-sm-line); font-weight: 600; color: var(--ink-muted); }
.team-card__bio { font-size: var(--body-sm-size); line-height: 26px; }

@media (max-width: 640px) {
  .team-grid { gap: var(--space-6); }
  .team-card h3, .team-card p { max-width: none; }
}

/* ==========================================================================
   SecuritySection. Numbered heading on the left, body on the right.
   ========================================================================== */

.security-section { display: flex; gap: var(--space-8); align-items: flex-start; }
.security-section__head { flex: 0 0 360px; display: flex; flex-direction: column; gap: var(--space-3); }
.security-section__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 20px; }
.security-section__body > p { max-width: var(--measure-prose); }

@media (max-width: 960px) {
  .security-section { flex-direction: column; gap: 20px; }
  .security-section__head { flex-basis: auto; }
}

/* ==========================================================================
   SecurityContact. Heading and note on the left, one button on the right.
   ========================================================================== */

.security-contact { display: flex; gap: var(--space-8); align-items: center; }
.security-contact__text { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--space-3); }
.security-contact__text h2, .security-contact__text p { max-width: 560px; }
.security-contact .btn { flex: none; }

@media (max-width: 960px) {
  .security-contact { flex-direction: column; align-items: flex-start; gap: var(--space-5); }
}
@media (max-width: 640px) {
  .security-contact { align-items: stretch; }
  .security-contact .btn { width: 100%; }
}

/* ==========================================================================
   Page components: conversion
   ========================================================================== */

/* Conversion pages: Get started, Thank-you, Privacy / Terms, 404.
   Values come from tokens.css only. One block per component, named after the
   data-component it styles. To be merged into site.css by the lead. */

/* ==========================================================================
   GetStarted. The chooser on the left, the form panels on the right.
   ========================================================================== */

.get-started { display: flex; gap: var(--space-7); align-items: flex-start; }
.get-started__aside { flex: 0 0 400px; display: flex; flex-direction: column; gap: var(--space-6); }
.get-started__forms { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--space-5); }

@media (max-width: 960px) {
  .get-started { flex-direction: column; align-items: stretch; gap: var(--space-6); }
  .get-started__aside { flex-basis: auto; }
}

/* ==========================================================================
   FormChooser. In the HTML the options are jump links to each form, so all
   five forms are reachable without JavaScript. conversion.js turns the list
   into a vertical tab list. Selected = filled, a 2px border and a check in
   the circle, never colour alone.
   ========================================================================== */

.form-chooser__title { margin-bottom: var(--space-4); }
.form-chooser__list { display: flex; flex-direction: column; gap: var(--space-2); }

.form-chooser__option {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 72px;
  padding: 15px 17px; /* 1px more than selected, so the 2px border doesn't shift the text */
  border: 1px solid var(--ink-muted);
  border-radius: var(--radius-md);
  background: var(--surface-page);
  color: var(--ink-strong);
  text-align: left;
  cursor: pointer;
}
.form-chooser__option:hover { border-color: var(--ink-strong); color: var(--ink-strong); text-decoration: none; }

.form-chooser__mark {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 2px solid var(--ink-muted);
  border-radius: var(--radius-pill);
  color: var(--ink-on-navy);
}
.form-chooser__mark svg { display: none; width: 14px; height: 14px; }

.form-chooser__text { display: flex; flex-direction: column; gap: 2px; }
.form-chooser__label { font-size: 16px; line-height: 22px; font-weight: 600; color: var(--ink-strong); }
.form-chooser__sub { font-size: 14px; line-height: 20px; color: var(--ink-body); }

.form-chooser__option[aria-selected="true"] {
  padding: 14px 16px;
  border: 2px solid var(--brand-primary);
  background: var(--surface-blue-soft);
}
.form-chooser__option[aria-selected="true"] .form-chooser__mark { border-color: var(--brand-primary); background: var(--brand-primary); }
.form-chooser__option[aria-selected="true"] .form-chooser__mark svg { display: block; }

@media (max-width: 640px) {
  .form-chooser__title { font-size: var(--heading-2-size); line-height: var(--heading-2-line); }
}

/* ==========================================================================
   FormPanel. One per form. Only the selected one shows once conversion.js
   has run; without it they stack.
   ========================================================================== */

.form-panel {
  padding: calc(var(--space-6) + var(--space-2));
  background: var(--surface-page);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}
.form-panel[hidden] { display: none; }
.form-panel__form { display: flex; flex-direction: column; gap: var(--space-5); }
.form-panel__form h2 { max-width: 600px; }
.form-panel__form .disclaimer { max-width: 600px; }
.form-panel__actions { padding-top: var(--space-2); }

@media (max-width: 640px) {
  .form-panel { padding: var(--space-5); }
  .form-panel__form h2 { font-size: var(--heading-2-size); line-height: var(--heading-2-line); }
  .form-panel__actions .btn { width: 100%; }
}

/* ==========================================================================
   FormField additions: the "(optional)" marker and the consent checkbox row.
   ========================================================================== */

.field__optional { font-weight: 400; color: var(--ink-muted); }

.field__check {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  min-height: 48px;
  font-size: var(--body-sm-size);
  line-height: var(--body-sm-line);
  color: var(--ink-body);
  cursor: pointer;
}
.field__check input {
  flex: none;
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  accent-color: var(--brand-primary);
}

/* ==========================================================================
   Confirmation (Thank-you).
   ========================================================================== */

.confirmation { padding-block: var(--space-10); }
.confirmation__inner { display: flex; flex-direction: column; gap: 20px; }
.confirmation__inner h1, .confirmation__inner p { max-width: var(--measure-prose); }
.confirmation__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-pill);
  background: var(--signal-success-soft);
  color: var(--signal-success);
}
.confirmation__icon svg { width: 28px; height: 28px; }
.confirmation__actions { padding-top: var(--space-2); }

@media (max-width: 640px) {
  .confirmation { padding-block: var(--space-8); }
}

/* ==========================================================================
   NextLinks (Thank-you). Three link cards.
   ========================================================================== */

.next-link {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  background: var(--surface-page);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: inherit;
}
.next-link:hover { border-color: var(--border-strong); color: inherit; text-decoration: none; }
.next-link__title {
  font-family: var(--font-display);
  font-size: var(--heading-2-size);
  line-height: var(--heading-2-line);
  font-weight: 500;
  color: var(--ink-strong);
}

/* ==========================================================================
   LegalNav (Privacy / Terms hero). Links between the legal pages. The
   current page is filled and carries a check.
   ========================================================================== */

.legal-nav { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.legal-nav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid var(--ink-on-navy-muted);
  /* radius-md, not pill: pills are reserved for selectors and filters. */
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-on-navy);
}
.legal-nav a:hover { border-color: var(--ink-on-navy); color: var(--ink-on-navy); text-decoration: none; }
.legal-nav svg { width: 14px; height: 14px; }
.legal-nav a[aria-current="page"] { background: var(--ink-on-navy); border-color: var(--ink-on-navy); color: var(--surface-navy); }

@media (max-width: 640px) {
  .hero__inner--legal { gap: 40px; }
}

/* ==========================================================================
   LegalBody (Privacy / Terms). Sticky contents on the left on desktop,
   640px body on the right. The 390 board drops the contents list.
   ========================================================================== */

.legal-body { display: flex; gap: var(--space-9); align-items: flex-start; }
.legal-body__toc { flex: 0 0 260px; position: sticky; top: var(--space-5); display: flex; flex-direction: column; gap: var(--space-1); }
.legal-body__toc a { display: flex; align-items: center; min-height: 48px; font-size: var(--body-sm-size); color: var(--ink-body); }
.legal-body__toc a:hover { color: var(--brand-primary-hover); }
.legal-body__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 40px; max-width: var(--measure-prose); }
.legal-section { display: flex; flex-direction: column; gap: var(--space-3); scroll-margin-top: var(--space-5); }

@media (max-width: 960px) {
  .legal-body { display: block; }
  .legal-body__toc { display: none; }
}
@media (max-width: 640px) {
  .legal-section h2 { font-size: var(--heading-2-size); line-height: var(--heading-2-line); }
}

/* ==========================================================================
   NotFound and NotFoundLinks (404).
   ========================================================================== */

.not-found { padding-block: var(--space-10); }
.not-found__inner h1, .not-found__inner p { max-width: var(--measure-prose); }
.not-found__actions { padding-top: var(--space-2); }

.not-found-links { padding-block: var(--space-8); }
.not-found-links ul { display: flex; flex-wrap: wrap; column-gap: var(--space-6); }
.not-found-links a { display: flex; align-items: center; min-height: 48px; font-size: var(--body-size); font-weight: 600; }

@media (max-width: 640px) {
  .not-found { padding-block: var(--space-8); }
  .not-found-links { padding-block: var(--space-7); }
  .not-found-links ul { flex-direction: column; }
}

/* ==========================================================================
   Page components: resources
   ========================================================================== */

/* Resources pages: Blog listing, Blog article, Calculator, FAQs.
   Components that are not in site.css yet. Values come from tokens.css only.
   To be merged into site.css by the lead; one block per component, named
   after its data-component. Breakpoints: 1120, 960 and 640px, as site.css. */

/* ==========================================================================
   FilterPills (Blog, FAQs)
   A labelled row of pills per facet. Filtering is done by site.js; items it
   hides carry [hidden], which has to beat the items' own display value.
   ========================================================================== */

.filter-pills { display: flex; flex-direction: column; gap: var(--space-4); }
.filter-pills__row { display: flex; gap: var(--space-4); align-items: flex-start; }
.filter-pills__label {
  flex: none;
  width: 72px;
  padding-top: 14px;
  font-size: var(--label-size);
  line-height: var(--label-line);
  font-weight: var(--label-weight);
  color: var(--ink-strong);
}
.filter-pills .pill { white-space: nowrap; }

[data-filter-item][hidden] { display: none !important; }

/* On phones each row scrolls sideways instead of wrapping, as the 390 board
   draws it. The padding keeps the focus ring inside the scroll box. */
@media (max-width: 640px) {
  .filter-pills__row { flex-direction: column; align-items: stretch; gap: var(--space-2); }
  .filter-pills__row > * { min-width: 0; }
  .filter-pills__label { width: auto; padding-top: 0; }
  .filter-pills .pill-list {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin: -6px calc(-1 * var(--container-gutter)) -6px -6px;
    padding: 6px var(--container-gutter) 10px 6px;
  }
  .filter-pills .pill-list > li { flex: none; }
}

/* A note under a control that records an open question on the board. */
.board-note { max-width: 820px; }

/* ==========================================================================
   CMSListing (Blog)
   ========================================================================== */

.cms-listing { display: flex; flex-direction: column; gap: var(--space-6); }
.cms-listing__posts { display: flex; flex-direction: column; gap: var(--space-6); }

@media (max-width: 640px) {
  .cms-listing__posts { gap: var(--space-4); }
}

/* ==========================================================================
   ArticleCard.Featured
   Photo left, text right on desktop; stacked on phones. The whole card is
   one link, so "Read the article →" is a styled span, not a nested link.
   ========================================================================== */

.article-card--featured { flex-direction: row; align-items: stretch; }
.article-card--featured > * { flex: 1 1 0; min-width: 0; }
.article-card--featured .slot { height: auto; min-height: 400px; border-radius: 0; }
.article-card__feature-body {
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-7);
}
.article-card__feature-body h2,
.article-card__feature-body p { max-width: 520px; }
.article-card__excerpt { font-size: var(--body-sm-size); line-height: 26px; }
.article-card__more {
  font-size: 16px;
  line-height: 23px;
  font-weight: 600;
  color: var(--brand-primary);
}
.article-card--featured:hover .article-card__more { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 960px) {
  .article-card--featured { flex-direction: column; }
  .article-card--featured .slot { min-height: 260px; }
  .article-card__feature-body { align-self: stretch; padding: var(--space-5); }
}
@media (max-width: 640px) {
  .cms-listing .slot--article { height: 180px; }
}

/* ==========================================================================
   Pagination. 48px targets, current page filled. Phones show
   "Page 1 of [N]" between Previous and Next instead of the numbers.
   ========================================================================== */

.pagination { padding-top: var(--space-4); }
.pagination__list { display: flex; gap: var(--space-2); justify-content: center; }
.pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  font-size: var(--body-sm-size);
  font-weight: 600;
  color: var(--ink-strong);
}
.pagination__link:hover { border-color: var(--border-strong); color: var(--ink-strong); text-decoration: none; }
.pagination__link[aria-current="page"] {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: var(--ink-on-navy);
}
.pagination__gap { display: flex; align-items: center; padding: 0 var(--space-1); color: var(--ink-muted); }
.pagination__status { display: none; align-items: center; font-size: var(--body-sm-size); color: var(--ink-body); }

@media (max-width: 640px) {
  .pagination__list { justify-content: space-between; }
  .pagination__num { display: none; }
  .pagination__status { display: flex; }
}

/* ==========================================================================
   ArticleHero. Tags and meta line under the breadcrumb.
   ========================================================================== */

.article-hero__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.article-hero__meta {
  max-width: var(--measure-prose);
  font-size: var(--body-sm-size);
  line-height: var(--body-sm-line);
  color: var(--ink-on-navy-muted);
}

/* ==========================================================================
   ArticleImage. Proportional, not a fixed height.
   ========================================================================== */

.article-image { padding-top: var(--space-8); background: var(--surface-page); }
.article-image .slot { aspect-ratio: 1200 / 520; min-height: 220px; }

@media (max-width: 640px) {
  .article-image { padding-top: var(--space-6); }
}

/* ==========================================================================
   ArticleBody. 640px body; contents and CTA stick beside it on desktop.
   The 390 board drops the side column.
   ========================================================================== */

.article-body {
  display: grid;
  grid-template-columns: minmax(0, var(--measure-prose)) 280px;
  justify-content: space-between;
  gap: var(--space-9);
  align-items: start;
}
.article-body__main { display: flex; flex-direction: column; gap: var(--space-5); max-width: var(--measure-prose); }
.article-body__main h2 { font-size: var(--heading-1-size); line-height: var(--heading-1-line); letter-spacing: -0.01em; }
.article-body__main ul { display: flex; flex-direction: column; gap: var(--space-2); padding-left: 20px; list-style: disc; }
.article-body__main .disclaimer { max-width: var(--measure-prose); }
.article-body__figure { margin: 0; display: flex; flex-direction: column; gap: var(--space-5); }
.article-body__figure .slot { aspect-ratio: 2 / 1; min-height: 200px; }

.article-aside {
  position: sticky;
  top: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.article-toc { display: flex; flex-direction: column; gap: var(--space-1); }
.article-toc__title { max-width: 260px; }
.article-toc a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding-left: var(--space-3);
  border-left: 2px solid var(--border-subtle);
  font-size: var(--body-sm-size);
  line-height: 20px;
  color: var(--ink-body);
}
.article-toc a:hover { color: var(--ink-strong); }
/* Current section: blue rule plus bold ink, so it is not colour alone. */
.article-toc a[aria-current="true"] {
  border-left-color: var(--brand-primary);
  font-weight: 600;
  color: var(--ink-strong);
}
.article-aside__cta {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
}
.article-aside__cta-title {
  max-width: 240px;
  font-family: var(--font-display);
  font-size: var(--heading-2-size);
  line-height: var(--heading-2-line);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink-strong);
}

@media (max-width: 1120px) {
  .article-body { gap: var(--space-8); }
}
@media (max-width: 960px) {
  .article-body { grid-template-columns: minmax(0, 1fr); }
  .article-aside { display: none; }
}

/* ==========================================================================
   CalculatorPanel. Inputs left, results right. The results panel is the
   page's one lifted element. No formula yet: every output is [FIGURE].
   ========================================================================== */

.calc-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); align-items: start; }
.calc-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: var(--space-6);
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}
.calc-form .caption { max-width: 460px; }
/* Helper text sits under the input on this board. */
.calc-form .field__hint { margin: 6px 0 0; }
.calc-form select.field__input { appearance: auto; }

.calc-results {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--surface-page);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.calc-results__figure {
  font-family: var(--font-display);
  font-size: var(--display-1-size);
  line-height: var(--display-1-line);
  font-weight: var(--display-1-weight);
  letter-spacing: var(--display-1-tracking);
  color: var(--ink-strong);
}
.calc-results__list { margin-top: var(--space-2); }
.calc-results__list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--border-subtle);
}
.calc-results__value {
  font-family: var(--font-display);
  font-size: var(--heading-1-size);
  line-height: var(--heading-1-line);
  font-weight: 500;
  color: var(--ink-strong);
}
.calc-results__action { margin-top: var(--space-3); }
.calc-results__action .btn { width: 100%; }

@media (max-width: 960px) {
  .calc-panel { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .calc-form, .calc-results { padding: var(--space-5); }
  .calc-results__figure { font-size: var(--display-2-size); line-height: var(--display-2-line); }
}

/* ==========================================================================
   SearchField (FAQs). 56px, visible label. The input itself is the box, so
   the global focus ring draws around the whole control.
   ========================================================================== */

.search-field__label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--label-size);
  line-height: var(--label-line);
  font-weight: var(--label-weight);
  color: var(--ink-strong);
}
.hero .search-field__label { color: var(--ink-on-navy); }
.search-field__control { position: relative; }
.search-field__control svg {
  position: absolute;
  left: var(--space-4);
  top: 50%;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  color: var(--ink-muted);
  pointer-events: none;
}
.search-field__input {
  width: 100%;
  min-height: 56px;
  padding: 0 var(--space-4) 0 var(--space-7);
  border: 1px solid var(--ink-muted);
  border-radius: var(--radius-md);
  background: var(--surface-page);
  color: var(--ink-strong);
  font-size: var(--body-size);
}
.search-field__input::placeholder { color: var(--ink-muted); opacity: 1; }

/* ==========================================================================
   FAQList. Category groups of Accordion items. The search in resources.js
   hides items with [hidden] and whole groups with [data-search-empty], so
   it never fights the category pills, which use [hidden] on groups.
   ========================================================================== */

.faq-list { display: flex; flex-direction: column; gap: var(--space-5); max-width: 880px; }
.faq-list__groups { display: flex; flex-direction: column; gap: var(--space-7); padding-top: var(--space-4); }
.faq-group { display: flex; flex-direction: column; gap: var(--space-4); }
.faq-group h2 { max-width: var(--measure-prose); }
.faq-group[data-search-empty] { display: none; }
.faq-item[hidden] { display: none; }
.faq-item .flag-pending { margin-bottom: var(--space-3); }
.faq-item .disclaimer { margin-top: var(--space-4); }

/* Hidden while there are results; shown when nothing matches. */
.faq-status { font-size: var(--body-sm-size); line-height: var(--body-sm-line); color: var(--ink-body); }

/* ==========================================================================
   Page components: phase2
   ========================================================================== */

/* Phase 2 pages: Guides (listing and detail) and Events & Media (listing
   and detail). None of these were drawn; they are composed from the Phase 1
   components, and this file holds only what those do not cover.
   Values come from tokens.css only. One block per component, named after its
   data-component. Breakpoints: 1120, 960 and 640px, as site.css.
   To be merged into site.css by the lead; the <link> to this file then goes. */

/* ==========================================================================
   ArticleBody, form variant (Guide detail, Event detail).
   The side column holds a form instead of contents, so it is wider than the
   article's 280px. It sticks beside the body on desktop and stacks under it
   below 960px. site.css collapses .article-body at 960px; this variant
   needs its own rule because it is declared later.
   ========================================================================== */

.article-body--form {
  grid-template-columns: minmax(0, var(--measure-prose)) 440px;
  gap: var(--space-8);
}
.article-body__side { position: sticky; top: var(--space-5); }

@media (max-width: 1120px) {
  .article-body--form { grid-template-columns: minmax(0, 1fr) 400px; gap: var(--space-7); }
}
@media (max-width: 960px) {
  .article-body--form { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  .article-body__side { position: static; }
}

/* A jump link in the hero to the form, for layouts where the form sits
   below the body. Hidden while the form is beside it. */
.hero-jump { padding-top: var(--space-2); }

@media (min-width: 961px) {
  .hero-jump { display: none; }
}
@media (max-width: 640px) {
  .hero-jump .btn { width: 100%; }
}

/* ==========================================================================
   DownloadBlock (Guide detail) and EventRegistration (Event detail).
   One card, two uses: a heading, a file or date line, and a short form.
   It is the page's one lifted element.
   ========================================================================== */

.download-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-6);
  background: var(--surface-page);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  scroll-margin-top: var(--space-5);
}
.download-block__head { display: flex; flex-direction: column; gap: var(--space-2); }
.download-block__file {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--body-sm-size);
  line-height: var(--body-sm-line);
  color: var(--ink-muted);
}
.download-block__file svg { flex: none; width: 20px; height: 20px; color: var(--ink-strong); }
.download-block__form { display: flex; flex-direction: column; gap: var(--space-4); }
.download-block__form select.field__input { appearance: auto; }
.download-block__form .btn { width: 100%; margin-top: var(--space-2); }

@media (max-width: 640px) {
  .download-block { padding: var(--space-5); }
}

/* ==========================================================================
   EventCard. An ArticleCard (same classes) with a date line and an action.
   The whole card is one link, so "Register →" / "Watch →" is a styled span,
   as on ArticleCard.Featured.
   ========================================================================== */

.event-card__when {
  font-size: var(--body-sm-size);
  line-height: var(--body-sm-line);
  font-weight: 600;
  color: var(--ink-strong);
}
.event-card .article-card__more { margin-top: auto; padding-top: var(--space-2); }
.event-card:hover .article-card__more { text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   EventSections (Events & Media listing). Upcoming, Past and Media, each a
   filter item as a whole, so a filter never leaves an empty heading behind.
   ========================================================================== */

.event-sections { display: flex; flex-direction: column; gap: var(--space-9); padding-top: var(--space-4); }
.event-section { display: flex; flex-direction: column; gap: var(--space-5); }

@media (max-width: 640px) {
  .event-sections { gap: var(--space-8); }
  .event-sections .slot--article { height: 180px; }
}

/* ==========================================================================
   VideoSlot (Events & Media). A 16:9 placeholder for a YouTube video, dashed
   like the product UI slot because it is not a photo. No embed yet.
   Sits in a VideoFeature row: video left, text right; stacked below 960px.
   ========================================================================== */

.slot--video {
  aspect-ratio: 16 / 9;
  border: 1px dashed var(--ink-muted);
  background: var(--surface-raised);
}
.slot--video svg { width: 40px; height: 40px; }

.video-feature {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-7);
  align-items: center;
}
.video-feature__text { display: flex; flex-direction: column; gap: var(--space-3); }
.video-feature__text > * { max-width: 460px; }

@media (max-width: 960px) {
  .video-feature { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
}

/* ==========================================================================
   EventAgenda (Event detail). A ruled list: time on the left, item right.
   ========================================================================== */

.event-agenda { border-top: 1px solid var(--border-subtle); }
.event-agenda li {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border-subtle);
}
.event-agenda__time { font-weight: 600; color: var(--ink-strong); }

@media (max-width: 640px) {
  .event-agenda li { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
}

/* ==========================================================================
   Speakers (Event detail). TeamCards from About, three across in the body
   column, two across on phones so three photos do not fill the screen.
   ========================================================================== */

.speaker-grid { padding-top: var(--space-2); }

@media (max-width: 640px) {
  .speaker-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   Page components: blog
   ========================================================================== */

/* Blog: the migrated posts and the listing's combined filter.
   Values come from tokens.css only. To be merged into the resources block of
   site.css by the lead; one block per component, named after its
   data-component. Breakpoints as site.css: 1120, 960 and 640px. */

/* ==========================================================================
   ArticleBody: migrated post copy. The template drew h2, paragraphs, one
   list and a note; the posts also carry h3s, numbered lists, strong text,
   long links and two tables.
   ========================================================================== */

.article-body__main { overflow-wrap: break-word; }
.article-body__main > h2 { margin-top: var(--space-5); scroll-margin-top: var(--space-5); }
.article-body__main > h2:first-child { margin-top: 0; }
.article-body__main h3 {
  font-size: var(--heading-2-size);
  line-height: var(--heading-2-line);
  letter-spacing: -0.01em;
}
.article-body__main ol { display: flex; flex-direction: column; gap: var(--space-2); padding-left: 24px; list-style: decimal; }
.article-body__main strong { font-weight: 600; color: var(--ink-strong); }
.article-body__main a { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 640px) {
  .article-body__main h2 { font-size: var(--heading-2-size); line-height: var(--heading-2-line); }
  .article-body__main h3 { font-size: var(--heading-3-size); line-height: var(--heading-3-line); }
}

/* ==========================================================================
   KeyTakeaways. The post's own summary box, on the blue Disclaimer note.
   Its heading stays an h2 for the outline but is sized as a label, and is
   left out of the page's contents list.
   ========================================================================== */

.article-body__main .key-takeaways__title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--heading-3-size);
  line-height: var(--heading-3-line);
  font-weight: var(--heading-3-weight);
  letter-spacing: 0;
  color: var(--ink-strong);
}
.article-body__main .key-takeaways__list {
  font-size: var(--body-sm-size);
  line-height: var(--body-sm-line);
  color: var(--ink-body);
}

/* ==========================================================================
   ArticleTable. Scrolls sideways inside its own box on narrow screens, so
   the page never does. The box is focusable for keyboard scrolling.
   ========================================================================== */

.article-table { overflow-x: auto; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); }
.article-table table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: var(--body-sm-size); line-height: var(--body-sm-line); }
.article-table th,
.article-table td { padding: var(--space-3) var(--space-4); text-align: left; vertical-align: top; border-bottom: 1px solid var(--border-subtle); }
.article-table th { background: var(--surface-sunken); font-weight: 600; color: var(--ink-strong); }
.article-table tr:last-child td { border-bottom: 0; }

/* ==========================================================================
   CMSListing: empty state and the disabled ends of Pagination.
   ========================================================================== */

.blog-empty { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.blog-empty .body { color: var(--ink-strong); }

.pagination__link[aria-disabled="true"] { color: var(--ink-muted); cursor: default; }
.pagination__link[aria-disabled="true"]:hover { border-color: var(--border-subtle); color: var(--ink-muted); }

/* Retired-claims note at the top of a migrated post. */
.article-body__verify { margin-bottom: var(--space-6); }

/* ==========================================================================
   Blog images
   The migrated posts' own images (site/assets/img/blog/, see SOURCES.csv
   there), sized like the photo slots they replace. Hero and card images
   crop to the slot's box; in-body images are text infographics, so they
   keep their full height and are never cropped.
   ========================================================================== */

.article-image__img,
.article-card__img,
.article-body__img { display: block; width: 100%; background: var(--border-subtle); }

.article-image__img {
  height: auto;
  aspect-ratio: 1200 / 520;
  min-height: 220px;
  object-fit: cover;
  border-radius: var(--radius-md);
}

.article-card__img { flex: none; height: 216px; object-fit: cover; }
.article-card--featured .article-card__img--featured { flex: 1 1 0; height: auto; min-height: 400px; }

.article-body__img { height: auto; border-radius: var(--radius-md); }

@media (max-width: 960px) {
  .article-card--featured .article-card__img--featured { flex: none; height: 260px; min-height: 0; }
}
@media (max-width: 640px) {
  .cms-listing .article-card__img { height: 180px; }
  .cms-listing .article-card--featured .article-card__img--featured { height: 260px; }
}

/* ==========================================================================
   Filled slots. An <img> that replaced a placeholder keeps the slot's
   classes, so it inherits the slot's size (height, aspect ratio, min-height)
   and only needs to behave like a photo.
   ========================================================================== */

img.slot--filled {
  display: block;
  width: 100%;
  padding: 0;
  object-fit: cover;
  background: var(--border-subtle);
}
/* The width/height attributes (kept for layout stability) would otherwise
   set a fixed pixel height. Slots sized by aspect ratio or min-height take
   their height from the width instead; card and hero slots keep theirs. */
img.slot--filled:not(.slot--card):not(.slot--article):not(.slot--hero) { height: auto; }
img.slot--filled.slot--hero { height: 100%; max-height: 560px; }
/* Product screenshots: keep the top-left of the screen in view, and frame
   them so a white UI does not dissolve into a white page. */
img.slot--filled.slot--ui {
  object-fit: cover;
  object-position: top left;
  border: 1px solid var(--border-subtle);
  background: var(--surface-page);
}
img.slot--filled.slot--ui.slot--on-navy { border-color: var(--border-on-navy); }
/* The Platform photo and screenshot pair: same shape, side by side. */
.capability-media { align-items: start; }
.capability-media img.slot--filled { aspect-ratio: 4 / 3; height: auto; min-height: 0; }

/* Photo credit, where a licence asks for one (CC BY-SA). */
.photo-credit { margin-top: var(--space-2); font-size: var(--caption-size); line-height: var(--caption-line); color: var(--ink-muted); }
.photo-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; padding-block: 14px; }
:is(.hero, .band--navy) .photo-credit { color: var(--ink-on-navy-muted); }