/* ==========================================================================
   components.css — RM ONE reusable components (BEM)
   --------------------------------------------------------------------------
    1 Icons            10 Ask card          19 Pricing
    2 Buttons & links  11 Steps (sequence)  20 Price calculator
    3 Eyebrow          12 Flow (chain)      21 Accordion
    4 Section header   13 Tiles             22 Forms
    5 Site header      14 Module list       23 Timeline
    6 Site navigation  15 Stats / facts     24 Resource cards
    7 Mobile drawer    16 Media             25 Notes & alerts
    8 Site footer      17 Industry list     26 Tags & check lists
    9 Overview         18 Prompt list       27 CTA band / closing
                                            28 Hub pages
                                            29 Schedule board
                                            30 Layer cards
                                            31 Products page
                                            33 Landing screen
                                            34 Value chain
                                            35 Platform blocks
                                            36 RM ONE AI page
                                            37 Resources page
                                            38 Book page
                                            39 Pre-demo discovery
                                            40 Client proof
                                            41 Brief grid
                                            42 Why RM ONE
                                            43 Product tour dialog
   Rules: tokens only, font-family only as var(--font-family-heading) (RULES.md §10),
   state via .is-* / ARIA (RULES.md §4)
   ========================================================================== */

/* ---- 1. Icons ------------------------------------------------------------ */
.icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon--sm {
  width: 16px;
  height: 16px;
}
.icon--lg {
  width: 28px;
  height: 28px;
}

/* Filled glyphs (the icon-cycle-* set from website deck slide 7): fill
   instead of stroke, still coloured by currentColor */
.icon--solid {
  fill: currentColor;
  stroke: none;
}

/* Icon in a tinted square — used at the top of tiles */
.icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--color-brand-tint);
  color: var(--color-green-500);
}

.icon-badge--dark {
  background: var(--color-slate-800);
  color: var(--color-signal);
}

/* ---- 2. Buttons & links -------------------------------------------------- */
/* Confident, not heavy: pill shape and solid brand fills carry the emphasis,
   so type stays at nav weight (600, no tracking), outlines are 1.5px and
   sizes are 44px (default — the touch minimum) and 48px (large).          */
.btn {
  --btn-bg: var(--color-primary);
  --btn-bg-hover: var(--color-primary-hover);
  --btn-color: var(--color-primary-contrast);
  --btn-border: transparent;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--control-height);
  padding: 0 var(--space-5);
  border: 1.5px solid var(--btn-border);
  border-radius: var(--radius-pill);
  background: var(--btn-bg);
  color: var(--btn-color);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}

.btn:hover {
  background: var(--btn-bg-hover);
  color: var(--btn-color);
}
.btn:active {
  transform: translateY(1px);
}

.btn:disabled,
.btn[aria-disabled='true'] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Outline on light backgrounds */
.btn--secondary {
  --btn-bg: transparent;
  --btn-bg-hover: var(--color-grey-50);
  --btn-color: var(--color-slate-900);
  --btn-border: var(--color-slate-900);
}

/* Lime on dark backgrounds — the strongest CTA on slate */
.btn--signal {
  --btn-bg: var(--color-signal);
  --btn-bg-hover: var(--color-lime-500);
  --btn-color: var(--color-slate-950);
}

/* Deep Orange: the one "act" button on a page (platform implementation,
   website deck slide 22). Dark text on it — white fails contrast (RULES.md §9.1) */
.btn--action {
  --btn-bg: var(--color-action);
  --btn-bg-hover: var(--color-orange-400);
  --btn-color: var(--color-white);
}

/* White on dark backgrounds — the landing page's second CTA, as in the deck */
.btn--light {
  --btn-bg: var(--color-white);
  --btn-bg-hover: var(--color-grey-100);
  --btn-color: var(--color-green-500);
  --btn-border: var(--color-green-500); /* the deck's green outline */
}

/* Outline on dark backgrounds */
.btn--on-dark {
  --btn-bg: transparent;
  --btn-bg-hover: var(--color-fill-on-dark);
  --btn-color: var(--color-text-inverse);
  --btn-border: var(--color-border-on-dark-strong);
}

.btn--sm {
  min-height: var(--control-height-sm);
  padding: 0 var(--space-4);
  font-size: var(--font-size-xs);
}
/* The website deck's buttons: 12pt Apex New Bold (final deck 10/6/26) */
.btn--lg {
  min-height: var(--control-height-lg);
  padding: 0 var(--space-6);
  font-size: var(--font-size-deck-12);
}
.btn--block {
  display: flex;
  width: 100%;
}

/* The website deck's own button (pre-demo discovery, final deck 10/6/26,
   slides 26–34): Logo Green with a white 12pt Bold label, in the site's
   pill shape like every other button. At the client's request it keeps the
   slide's white label on Logo Green (RULES.md §9.1, exceptions).
   --deck-outline is the slide's white button with a Logo Green outline and
   label. */
.btn--deck {
  --btn-bg: var(--color-green-500);
  --btn-bg-hover: var(--color-green-700);
  --btn-color: var(--color-white);
  min-height: var(--control-height-lg);
  padding: 0 var(--space-6);
  font-size: var(--font-size-deck-12); /* 12pt */
}

.btn--deck-outline {
  --btn-bg: var(--color-white);
  --btn-bg-hover: var(--color-brand-tint);
  --btn-color: var(--color-green-500);
  --btn-border: var(--color-green-500);
}

/* The deck's capitals button (website deck 10/8/26 "TAKE A PRODUCT TOUR",
   slides 04, 07, 15, 16, 20: 10.5pt Bold capitals, no tracking). After
   .btn--lg so its size wins. */
.btn--caps {
  font-size: var(--font-size-deck-10);
  text-transform: uppercase;
}

.btn.is-loading {
  position: relative;
  color: transparent;
  pointer-events: none;
}
.btn.is-loading::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid var(--btn-color);
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

.btn-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center; /* a text link beside a button sits on its centre line */
  gap: var(--space-3) var(--space-5);
}

/* Text link with arrow ("Explore the solution →") */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}

.link-arrow .icon {
  transition: transform var(--duration-fast) var(--ease-out);
}
.link-arrow:hover {
  color: var(--color-primary-hover);
  text-decoration: underline;
}
.link-arrow:hover .icon {
  transform: translateX(3px);
}

.on-dark .link-arrow,
.section--dark .link-arrow {
  color: var(--color-signal);
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ---- 3. Eyebrow (brand category label, from the concept deck) ------------ */
/* The website deck's kicker on every slide (final deck 10/6/26): 12pt Apex
   New Bold capitals at the deck scale (1pt = 1.6px), no tracking */
.eyebrow {
  display: block;
  max-width: none; /* a label, not running text: the paragraph measure would pull it off-centre */
  color: var(--color-eyebrow);
  font-family: var(--font-family-heading);
  font-size: var(--font-size-eyebrow);
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
  text-transform: uppercase;
}

.section--dark .eyebrow,
.page-hero--dark .eyebrow,
.on-dark .eyebrow {
  color: var(--color-eyebrow-on-dark);
}

/* ---- 4. Section header --------------------------------------------------- */
.section-header {
  max-width: 820px;
  margin-bottom: var(--space-8);
}

.section-header > * + * {
  margin-top: var(--space-4);
}

/* The website deck's section lead: 13.5pt Apex New Book (final deck
   10/6/26); --lg is the 14.25pt lead of Home's decisions (slide 3) */
.section-header__lead {
  font-size: var(--font-size-deck-13);
  line-height: 1.45;
  color: var(--color-text-muted);
}

.section-header__lead--lg {
  font-size: var(--font-size-deck-14-25); /* 14.25pt */
}

/* The deck's smaller section title, 24pt Apex New Heavy (Platform modules
   slide 9, Resources slide 16) */
.section-header__title--sm {
  font-size: clamp(1.625rem, 1.1rem + 1.6vw, 2.4rem); /* 26→38: 24pt */
}

/* 14pt Book lead (Home business problem, slide 4 — Book, not the deck's
   Bold, so it matches the site's other leads; at the client's request) */
.section-header__lead--md {
  font-size: var(--font-size-deck-14);
}

/* Full container width, so a long headline can keep to one line where it
   fits (home business problem, website deck slide 4); the lead keeps the
   paragraph measure */
.section-header--wide {
  max-width: none;
}

/* A one-sentence lead (home decisions, website deck slide 3): kept on one
   line, as on the slide, wherever the header's width allows — past the
   paragraph measure, which is for running text */
.section-header__lead--line {
  max-width: none;
}

.section--dark .section-header__lead {
  color: var(--color-text-inverse-muted);
}

.section-header--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.section-header--center .section-header__lead {
  margin-left: auto;
  margin-right: auto;
}

/* ---- 5. Site header ------------------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--color-surface);
  border-bottom: var(--border-width) solid var(--color-border);
  transition: box-shadow var(--duration-base) var(--ease-out);
  view-transition-name: site-header; /* stays still between pages (main.css §8) */
}

.site-header.is-scrolled {
  box-shadow: var(--shadow-sm);
}

/* Frosted glass where supported: content softly shows through on scroll */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .site-header {
    background: var(--color-header-glass);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-3); /* --space-6 from md (responsive.css) */
  height: var(--header-height);
}

.site-header__brand {
  display: inline-flex;
  flex-shrink: 0;
  margin-right: auto;
}

/* The header logo: the slide's proportion of the header from md (home page
   deck 10/13/26, slide 1 — variables.css) */
.site-header__logo {
  width: auto;
  height: var(--logo-height-header);
}

/* "Book a demo": the one filled button in the header, sized to its
   neighbours rather than to a page CTA — 40px beside the menu button,
   36px on desktop (responsive.css)                                       */
/* Header CTA: the deck's "Book a demo" (website deck 10/12/26 header) — a
   full pill in the deck's deeper green (--color-cta, #487D23) with a white
   12pt Apex New Bold label. The drawer's Book a demo (.btn--cta) shares the
   color. From xl it takes the slide's proportions (responsive.css). */
.site-header__cta,
.btn--cta {
  --btn-bg: var(--color-cta);
  --btn-bg-hover: var(--color-cta-hover);
  --btn-color: var(--color-white);
  font-weight: var(--font-weight-bold);
}

.site-header__cta {
  min-height: 2.5rem;
  font-size: var(--font-size-deck-12);
  padding: 0 var(--space-4);
}

/* Menu / close button: an outlined square so it reads as a control. The
   drawer's close button shares it and sits in exactly the same spot. */
.site-header__toggle {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 2.5rem; /* 40px touch target */
  height: 2.5rem;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-slate-900);
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}

.site-header__toggle:hover {
  border-color: var(--color-border-strong);
  background: var(--color-grey-50);
}

/* ---- 6. Site navigation (desktop, shown from xl) ------------------------- */
/* One state system for every top-level item:
   hover / open  → label turns green
   current page  → green label + a 2px bar sitting on the header's bottom edge
   Login         → the same link style, right of the menu beside Book a demo */
/* Inside the content column: the logo alone on the left; the brand's auto
   margin pushes the menu (from xl) and the actions (Login, Book a demo)
   right, beside the menu button below xl. */
.site-nav {
  display: none;
}

.site-header__actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--space-4);
}

.site-nav__list {
  display: flex;
  align-items: center;
}

/* Links run the full header height, so the current-page bar lands on the
   header edge and the dropdown hangs from the header, not from the text */
.site-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: var(--header-height);
  padding: 0 var(--nav-link-pad, var(--space-3));
  border: 0;
  background: transparent;
  color: var(--color-slate-900);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  /* Top menu labels are uppercase (client request); a little tracking keeps
     capitals readable at this size. Dropdown items and the drawer stay
     sentence case. */
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out);
}

.site-nav__link:hover,
.site-nav__link[aria-expanded='true'] {
  color: var(--color-green-500); /* Logo Green, as the selected item */
}

.site-nav__link[aria-current='page'],
.site-nav__link.is-active {
  color: var(--color-green-500); /* the deck's Logo Green (client request) */
}

/* Hover / open: the same bar in grey previews where the link leads; the
   current-page bar below turns it green */
.site-nav__link:hover::after,
.site-nav__link[aria-expanded='true']::after {
  content: '';
  position: absolute;
  left: var(--nav-link-pad, var(--space-3));
  right: var(--nav-link-pad, var(--space-3));
  bottom: -1px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--color-slate-300);
}

.site-nav__link[aria-current='page']::after,
.site-nav__link.is-active::after {
  content: '';
  position: absolute;
  left: var(--nav-link-pad, var(--space-3));
  right: var(--nav-link-pad, var(--space-3));
  bottom: -1px; /* covers the header's bottom border */
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--color-green-500);
}

/* Keyboard focus: a control-height ring around the label, not the full
   header-height hit area */
.site-nav__link:focus-visible {
  outline: none;
}
.site-nav__link:focus-visible::before {
  content: '';
  position: absolute;
  inset: calc((var(--header-height) - var(--control-height-sm)) / 2) 2px;
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 2px var(--color-focus);
}

/* Chevron: quieter than the label, turns with it */
.site-nav__link > .icon {
  color: var(--color-slate-300);
  transition:
    transform var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}
.site-nav__link:hover > .icon,
.site-nav__link.is-active > .icon,
.site-nav__link[aria-expanded='true'] > .icon {
  color: currentColor;
}
.site-nav__link[aria-expanded='true'] > .icon {
  transform: rotate(180deg);
}

/* Login: a plain top-level link beside Book a demo, styled like the menu
   items. From xl only — below that it sits in the drawer's footer. */
.site-header__login {
  display: none;
}

/* ---- Dropdown panel ---- */
/* Each menu is one hub page, in a single column: its overview is a pale
   brand-tint band across the top (the same tint as the site's tinted
   cards) and its sections run below on white, so
   the panel stays light under the white header. One rail runs down the left
   of the whole panel, through the band and the list; the current page takes
   a green segment on it and the hovered row a grey one (the site's segment
   vocabulary, RULES.md §9.7). All text shares one left edge, right of the
   rail. No icon badges. The drawer keeps its own lighter version. */
.nav-dropdown {
  position: relative;
}

.nav-dropdown__menu {
  --rail-x: var(--space-5); /* the rail's distance from the panel edge */
  --rail-gap: var(--space-4); /* rail → text */

  position: absolute;
  top: calc(100% + var(--space-2));
  left: 0;
  z-index: var(--z-dropdown);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 22rem;
  padding: 0;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
  transition:
    opacity var(--duration-fast) var(--ease-out),
    transform var(--duration-base) var(--ease-out);
}

/* Invisible bridge over the gap, so the pointer can travel from the
   trigger into the panel without it closing */
.nav-dropdown__menu::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: calc(var(--space-2) + 2px);
}

/* Opens with a short fade + drop (the user asked for it; RULES.md §9.3) */
@starting-style {
  .nav-dropdown__menu {
    opacity: 0;
    transform: translateY(-6px);
  }
}

.nav-dropdown__item {
  position: relative;
  display: block;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  color: var(--color-text);
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-out);
}

.nav-dropdown__item:hover,
.nav-dropdown__item:focus-visible {
  background: var(--color-grey-50);
  color: var(--color-text);
}
.nav-dropdown__item:hover .nav-dropdown__title,
.nav-dropdown__item[aria-current] .nav-dropdown__title {
  color: var(--color-green-500);
}

.nav-dropdown__title {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  transition: color var(--duration-fast) var(--ease-out);
}

.nav-dropdown__text {
  display: block;
  margin-top: 2px;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  line-height: 1.45;
}

/* Lead: the hub page itself */
.nav-dropdown__item--lead {
  padding: var(--space-5);
  background: var(--color-bg-muted);
}
.nav-dropdown__item--lead:hover,
.nav-dropdown__item--lead:focus-visible {
  background: var(--color-grey-100);
}
.nav-dropdown__item--lead .nav-dropdown__title {
  font-size: var(--font-size-base);
}
.nav-dropdown__item--lead .nav-dropdown__text {
  margin-top: var(--space-2);
  font-size: var(--font-size-sm);
}
.nav-dropdown__item--lead[aria-current] {
  box-shadow: inset 3px 0 0 var(--color-green-500);
}

/* Desktop submenu: titles in capitals to match the top menu (client
   request). Capitals read larger, so they drop to 13px with a little
   tracking; descriptions stay sentence case — a full sentence in capitals
   is hard to read — and come up to 13px so the pair sits as one unit. The
   drawer keeps sentence case, like its top-level rows. */
.nav-dropdown__menu .nav-dropdown__title {
  font-size: 0.8125rem;
  letter-spacing: 0.05em;
  line-height: 1.3;
  text-transform: uppercase;
}
.nav-dropdown__menu .nav-dropdown__text {
  margin-top: var(--space-1);
  font-size: 0.8125rem;
}
.nav-dropdown__menu .nav-dropdown__item--lead .nav-dropdown__title {
  font-size: var(--font-size-sm);
}
.nav-dropdown__menu .nav-dropdown__item--lead .nav-dropdown__text {
  margin-top: var(--space-3);
  font-size: var(--font-size-sm);
}

/* Sections: a thin track down the left; the current / hovered section puts
   a green segment on it */
.nav-dropdown__sections {
  position: relative;
  display: grid;
  align-content: start;
  gap: 2px;
  margin-left: var(--space-2);
  padding-left: var(--space-3);
}

.nav-dropdown__sections::before {
  content: '';
  position: absolute;
  top: var(--space-2);
  bottom: var(--space-2);
  left: 0;
  width: var(--border-width);
  background: var(--color-border);
}

.nav-dropdown__sections .nav-dropdown__item::before {
  content: '';
  position: absolute;
  top: var(--space-3);
  bottom: var(--space-3);
  left: calc(var(--space-3) * -1 - 1px);
  width: 3px;
  border-radius: 2px;
  background: transparent;
  transition: background-color var(--duration-fast) var(--ease-out);
}
.nav-dropdown__sections .nav-dropdown__item:hover::before,
.nav-dropdown__sections .nav-dropdown__item:focus-visible::before {
  background: var(--color-border-strong);
}
.nav-dropdown__sections .nav-dropdown__item[aria-current]::before {
  background: var(--color-green-500);
}

/* Desktop panel: the overview band */
.nav-dropdown__menu .nav-dropdown__item--lead {
  padding: var(--space-5) var(--space-5) var(--space-5) calc(var(--rail-x) + var(--rail-gap));
  border-radius: calc(var(--radius-lg) - var(--border-width)) calc(var(--radius-lg) - var(--border-width)) 0 0;
  background: var(--color-brand-tint);
  color: var(--color-text);
}
.nav-dropdown__menu .nav-dropdown__item--lead:hover,
.nav-dropdown__menu .nav-dropdown__item--lead:focus-visible {
  background: var(--color-brand-tint-hover);
  color: var(--color-text);
}
.nav-dropdown__menu .nav-dropdown__item--lead:focus-visible {
  outline-offset: -4px;
}
.nav-dropdown__menu .nav-dropdown__item--lead[aria-current] {
  box-shadow: none;
}
.nav-dropdown__menu .nav-dropdown__item--lead .nav-dropdown__title {
  color: var(--color-heading);
}
.nav-dropdown__menu .nav-dropdown__item--lead:hover .nav-dropdown__title,
.nav-dropdown__menu .nav-dropdown__item--lead[aria-current] .nav-dropdown__title {
  color: var(--color-green-500);
}
.nav-dropdown__menu .nav-dropdown__item--lead .nav-dropdown__text {
  color: var(--color-text-muted);
}

/* The rail starts in the band: a faint green segment, solid Logo Green on
   hover and when the overview is the current page */
.nav-dropdown__menu .nav-dropdown__item--lead::before {
  content: '';
  position: absolute;
  top: var(--space-5);
  bottom: var(--space-5);
  left: calc(var(--rail-x) - 1px);
  width: 3px;
  border-radius: 2px;
  background: var(--color-border-brand);
  transition: background-color var(--duration-fast) var(--ease-out);
}
.nav-dropdown__menu .nav-dropdown__item--lead:hover::before,
.nav-dropdown__menu .nav-dropdown__item--lead:focus-visible::before,
.nav-dropdown__menu .nav-dropdown__item--lead[aria-current]::before {
  background: var(--color-green-500);
}

/* Desktop panel: the sections, on the same rail. Rows start just right of
   the rail, so a row's hover tint never covers it. */
.nav-dropdown__menu .nav-dropdown__sections {
  margin-left: 0;
  padding: var(--space-3) var(--space-3) var(--space-3) calc(var(--rail-x) + var(--space-2));
}
.nav-dropdown__menu .nav-dropdown__sections::before {
  top: var(--space-5);
  bottom: var(--space-5);
  left: var(--rail-x);
}
.nav-dropdown__menu .nav-dropdown__sections .nav-dropdown__item {
  padding: var(--space-3) var(--space-3) var(--space-3) calc(var(--rail-gap) - var(--space-2));
}
.nav-dropdown__menu .nav-dropdown__sections .nav-dropdown__item::before {
  left: calc(var(--space-2) * -1 - 1px);
}
.nav-dropdown__menu .nav-dropdown__text {
  text-wrap: pretty;
}

/* ---- 7. Mobile drawer ---------------------------------------------------- */
/* Full screen on phones, a 400px sheet from sm. Its header row matches the
   site header, so the close button lands exactly where the menu button was.
   Same order as the desktop nav; Platform and Resources collapse.          */
.mobile-nav {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
  transform: translateX(100%);
  visibility: hidden;
  transition:
    transform var(--duration-slow) var(--ease-out),
    visibility var(--duration-slow);
}

.is-nav-open .mobile-nav {
  transform: none;
  visibility: visible;
}
.is-nav-open {
  overflow: hidden;
}

.mobile-nav__header {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
  padding: 0 var(--gutter);
  border-bottom: var(--border-width) solid var(--color-border);
}

.mobile-nav__body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-2) var(--gutter) var(--space-4);
}

/* Top-level rows, divided by hairlines like a settings list */
.mobile-nav__list > li + li {
  border-top: var(--border-width) solid var(--color-border);
}

/* Rows bleed into the gutter so the hover / current tint has breathing room
   while the labels stay aligned with the page edge */
.mobile-nav__link {
  display: flex;
  align-items: center;
  width: calc(100% + var(--space-3) * 2);
  min-height: 56px;
  margin: 0 calc(var(--space-3) * -1);
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-slate-900);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.mobile-nav__link:hover {
  background: var(--color-grey-50);
  color: var(--color-green-500);
}

/* Current page: tinted row with a green edge, not colour alone */
.mobile-nav__link[aria-current='page'] {
  background: var(--color-brand-tint);
  box-shadow: inset 3px 0 0 var(--color-green-500);
  color: var(--color-green-500);
}

/* Section toggles (Platform, Resources) */
.mobile-nav__toggle {
  justify-content: space-between;
}

.mobile-nav__toggle .icon {
  color: var(--color-slate-300);
  transition:
    transform var(--duration-base) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}

.mobile-nav__toggle[aria-expanded='true'] .icon {
  color: var(--color-slate-900);
  transform: rotate(180deg);
}

/* The section that holds the current page */
.mobile-nav__toggle.is-active {
  color: var(--color-green-500);
}

.mobile-nav__panel {
  display: grid;
  gap: 2px;
  padding-bottom: var(--space-3);
}

/* Drawer: lead block full width, sections on their track below it */
.mobile-nav__panel .nav-dropdown__item--lead {
  margin: 0 calc(var(--space-3) * -1) var(--space-2);
  padding: var(--space-4) var(--space-3); /* text lines up with the row labels */
}

.mobile-nav__panel .nav-dropdown__sections {
  margin-left: var(--space-1);
}

/* Login (outline) above Book a demo */
.mobile-nav__footer {
  display: grid;
  gap: var(--space-3);
  flex-shrink: 0;
  padding: var(--space-4) var(--gutter) calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  border-top: var(--border-width) solid var(--color-border);
}

.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-drawer) - 1);
  background: var(--color-overlay);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--duration-slow) var(--ease-out),
    visibility var(--duration-slow);
}

.is-nav-open .nav-backdrop {
  opacity: 1;
  visibility: visible;
}

/* ---- 8. Site footer ------------------------------------------------------ */
/* Midnight Blue: an approved background for the reverse logo (RULES.md §9.6) */
.site-footer {
  background: var(--color-slate-900);
  color: var(--color-text-inverse-muted);
  font-size: var(--font-size-sm);
}

/* The deck's signal dashes (green / lime / orange) as the footer's top edge */
.site-footer::before {
  content: '';
  display: block;
  height: 4px;
  background: var(--signal-bar);
}

.site-footer__main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
  padding: var(--space-10) 0 var(--space-9);
}

.site-footer__logo {
  width: auto;
  height: var(--logo-height);
}

/* One logo height under the logo: its clear space */
.site-footer__tagline {
  max-width: 34ch;
  margin-top: var(--logo-height);
}

/* Official profiles under the tagline (LinkedIn, Instagram): a "Follow RM ONE"
   label, then one link per profile in a row — the white glyph and the
   network's name in the footer-link style, a full-height touch target,
   Light Green 2 on hover */
.site-footer__follow {
  margin-top: var(--space-4);
  color: var(--color-text-inverse);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
}

.site-footer__socials {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-5);
}

.site-footer__social {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: fit-content;
  min-height: var(--control-height);
  color: var(--color-text-inverse-muted);
  text-decoration: none;
}

.site-footer__social:hover {
  color: var(--color-signal);
  text-decoration: underline;
}

.site-footer__social .icon {
  width: 22px;
  height: 22px;
  color: var(--color-text-inverse);
}

.site-footer__social:hover .icon {
  color: var(--color-signal);
}

.site-footer__columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-7) var(--space-6);
}

.site-footer__heading {
  margin-bottom: var(--space-3);
  color: var(--color-text-inverse);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
}

.site-footer__links {
  display: grid;
  gap: var(--space-2);
}

.site-footer__link {
  color: var(--color-text-inverse-muted);
  text-decoration: none;
}

.site-footer__link:hover {
  color: var(--color-signal);
  text-decoration: underline;
}

.site-footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-6);
  padding: var(--space-5) 0;
  border-top: var(--border-width) solid var(--color-border-on-dark);
  font-size: var(--font-size-xs);
}

.site-footer__category {
  color: var(--color-text-inverse);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-eyebrow);
  text-transform: uppercase;
}

.site-footer__bar-link {
  color: var(--color-signal);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-eyebrow);
  text-transform: uppercase;
  text-decoration: none;
}

.site-footer__bar-link:hover {
  color: var(--color-signal);
  text-decoration: underline;
}

/* ---- 9. Overview (Home, under the first screen — website deck slide 2) -- */
/* Home overview (website deck final 10/6/26, slide 2): two short lines at
   the slide's 28pt Heavy (the h2 size), then the 13.5pt lead */
.overview__lead {
  color: var(--color-text-muted);
  font-size: var(--font-size-deck-13);
  line-height: 1.45;
}

/* One line of a headline set line by line as on the deck (home overview and
   platform, website deck slides 2 and 6; platform connected data, slide 21);
   narrow screens wrap each line */
.heading-line {
  display: block;
}

/* The deck's green middle line (slide 21): the text-safe green on light */
.heading-line--accent {
  color: var(--color-green-500);
}

/* The deck's benefit line under the buttons — "Better data. Faster
   decisions. Earlier action." (16pt Bold; Home overview slide 2, Platform
   hero slide 6): green on light surfaces, so the text-safe green (RULES.md
   §9.1) */
.benefit-line {
  max-width: none;
  margin-top: var(--space-7);
  color: var(--color-green-500);
  font-family: var(--font-family-heading);
  font-size: var(--font-size-deck-16);
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
}

/* Home overview (website deck 10/12/26, slide 2): the buttons above it were
   removed, but the line keeps its place on the slide, well below the lead
   (level with the foot of the workflow card on desktop; the usual gap on
   phones, where the card is stacked below) */
.overview__benefit {
  margin-top: clamp(var(--space-7), 5.5vw, var(--space-11));
}

/* Ask card on slate: a deeper inset panel with a hairline edge, so it
   separates from the section without a shadow */
.section--dark .ask-card,
.page-hero--dark .ask-card {
  --ask-card-bg: var(--color-slate-950);
  border: var(--border-width) solid var(--color-border-on-dark);
}

/* ---- 10. Ask card: the RM ONE AI question → answer → options moment ------ */
/* Resting panel, so flat (RULES §9.3): no shadow */
.ask-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-6) var(--space-7);
  border-radius: var(--radius-lg);
  background: var(--ask-card-bg, var(--color-slate-900));
  color: var(--color-text-inverse);
}

/* Type follows website deck final (10/6/26) slide 2: label 14pt Bold
   capitals (no tracking), question 17.25pt Bold, answer 12.75pt Book,
   options 10.5pt Bold capitals */
.ask-card__label {
  color: var(--color-signal);
  font-family: var(--font-family-heading);
  font-size: var(--font-size-deck-14);
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
  text-transform: uppercase;
}

.ask-card__question {
  margin-top: var(--space-3);
  color: var(--color-text-inverse);
  font-size: clamp(1.25rem, 1rem + 1.2vw, 1.725rem); /* 20→28: 17.25pt */
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
  text-wrap: balance;
}

/* Stage track: Ask → See → Compare → You approve. RM ONE AI fills the
   stages up to Compare; the last segment stays dashed orange — pending —
   because approval belongs to a person (RULES.md §9.2). home.js moves
   `is-current`. */
.ask-track {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--track-gap);
  margin-top: var(--space-5);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

.ask-track__stage {
  padding-top: var(--space-2);
  border-top: var(--track-weight) solid var(--color-slate-700);
  color: var(--color-text-inverse-muted);
  transition:
    border-color var(--duration-base) var(--ease-out),
    color var(--duration-base) var(--ease-out);
}

.ask-track__stage.is-done {
  border-top-color: var(--color-green-500);
  color: var(--color-text-inverse);
}

/* The stage the answer below is showing (lime: on slate only) */
.ask-track__stage.is-current {
  border-top-color: var(--color-signal);
  color: var(--color-signal);
}

.ask-track__stage--approve {
  border-top-style: dashed;
  border-top-color: var(--color-action);
  color: var(--color-action);
}

.ask-card__answer {
  margin-top: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--font-size-deck-12-75); /* 12.75pt */
  font-weight: var(--font-weight-regular);
  line-height: 1.4;
  min-height: 14.25em; /* fits the longest sample answer at 320px, so swapping
                          answers never resizes the card (9.5em from sm — responsive.css) */
}

.ask-card__answer-label {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

.ask-card__options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-5);
}

.ask-card__options .chip {
  font-size: var(--font-size-deck-10);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
}

.ask-card__note {
  margin-top: auto;
  padding-top: var(--space-5);
  color: var(--color-text-inverse-muted);
  font-size: var(--font-size-xs);
}

/* Optical centring: Apex New capitals sit about 1px above the middle of a
   36px chip, so 2px of top padding moves the centred label down 1px
   (measured at 4x; the label is centred to within a quarter pixel). */
.chip {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-height-sm);
  padding: 0.125rem var(--space-4) 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-green-500);
  color: var(--color-white);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  cursor: pointer;
  transition:
    filter var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}

.chip:hover {
  filter: brightness(1.08);
}
.chip--action {
  background: var(--color-action);
}
.chip[aria-pressed='true'] {
  box-shadow:
    0 0 0 2px var(--ask-card-bg, var(--color-slate-900)),
    0 0 0 4px var(--color-signal);
}

/* ---- 11. Steps: a genuine numbered sequence ------------------------------ */
/* Drawn as the sequence track (variables.css): each step is one segment of
   the deck's signal bar — a left edge on phones, a top edge in a row from md
   (responsive.css). The final "act" step's segment is orange. */
.steps {
  --step-color: var(--color-green-500);

  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-7);
}

.steps__item {
  --step-color: var(--color-green-500);

  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: var(--space-2);
  padding-left: var(--space-5);
  border-left: var(--track-weight) solid var(--step-color);
}

.steps__item--action {
  --step-color: var(--color-action);
}

.steps__number {
  color: var(--color-green-500);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1;
}

.steps__item--action .steps__number {
  color: var(--color-action-text);
}

.section--dark .steps__number {
  color: var(--color-signal);
}
.section--dark .steps__item--action .steps__number {
  color: var(--color-action);
}

.steps__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  letter-spacing: var(--letter-spacing-tight);
}

.steps__text {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.section--dark .steps__text {
  color: var(--color-text-inverse-muted);
}

.steps__meta {
  margin-top: var(--space-1);
  color: var(--color-green-500);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

/* Vertical list beside media (Connected data) */
.steps--list {
  gap: var(--space-6);
  margin-top: var(--space-8);
}

/* Numbered badges on a connector (home business problem — website deck
   slide 4, at the client's request; RULES.md §9.7): each number sits in a
   circle in its step's colour (green; the final "act" step orange), and one
   grey line joins the circles. Phones: badges down the left, the line
   running between them; a row from md (responsive.css). Numbered badges
   site-wide (these, the platform days and badge list) are a brand fill with
   a Deep Midnight label — white fails contrast on Logo Green and Deep Orange. */
.steps--badges .steps__item {
  position: relative;
  grid-template-columns: var(--step-badge-size) minmax(0, 1fr);
  column-gap: var(--space-4);
  padding-left: 0;
  border-left: 0;
}

.steps--badges .steps__item:not(:last-child)::before {
  content: '';
  position: absolute;
  top: calc(var(--step-badge-size) / 2);
  left: calc((var(--step-badge-size) - var(--step-badge-line)) / 2);
  width: var(--step-badge-line);
  height: calc(100% + var(--space-7)); /* down to the next badge, across the list gap */
  background: var(--color-grey-200);
}

.steps--badges .steps__number,
.steps--badges .steps__item--action .steps__number {
  position: relative; /* above the line */
  display: grid;
  grid-row: span 2;
  place-items: center;
  width: var(--step-badge-size);
  height: var(--step-badge-size);
  border-radius: var(--radius-pill);
  background: var(--step-color);
  color: var(--color-on-brand);
  font-size: var(--font-size-deck-15); /* 15pt */
}

/* Website deck final (10/6/26) slide 4: step names 14pt Bold capitals (no
   tracking), numbers 15pt Bold; step text 14pt Book (the deck sets it Bold;
   Book matches the site's other step and card text, at the client's request) */
.steps--badges .steps__title {
  align-self: center;
  font-size: var(--font-size-deck-14);
  letter-spacing: 0;
  text-transform: uppercase;
}

.steps--badges .steps__text {
  font-size: var(--font-size-deck-14);
  line-height: 1.4;
}

/* ---- 12. Flow: Pipeline → People → Projects → Profit --------------------- */
/* A real chain, drawn as one: icon nodes on a continuous connector line —
   vertical like a timeline on phones, horizontal from lg (responsive.css).
   No boxes: the questions/statements are the content, set as readable text.
   Profit, the outcome, gets the solid slate node with a lime icon.        */
.flow {
  --flow-node: 48px;
  --flow-gap: var(--space-8); /* vertical rhythm on phones */

  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.flow__item {
  position: relative;
  display: grid;
  grid-template-columns: var(--flow-node) minmax(0, 1fr);
  column-gap: var(--space-5);
  align-content: start;
  padding-bottom: var(--flow-gap);
}
.flow__item:last-child {
  padding-bottom: 0;
}

.flow__node {
  position: relative;
  z-index: 1;
  grid-row: 1 / span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--flow-node);
  height: var(--flow-node);
  border: 2px solid var(--color-green-500);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-green-500);
}

/* Connector: from the bottom of this node to the next one */
.flow__item:not(:last-child)::after {
  content: '';
  position: absolute;
  top: var(--flow-node);
  bottom: 0;
  left: calc(var(--flow-node) / 2 - 1px);
  width: 2px;
  background: var(--color-green-500);
}

.flow__label {
  align-self: end;
  color: var(--color-green-500);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-eyebrow);
  text-transform: uppercase;
}

.flow__text {
  margin-top: var(--space-1);
  color: var(--color-heading);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  line-height: 1.45; /* between snug and base: 18px text over 2–3 lines */
  text-wrap: pretty;
}

/* The outcome */
.flow__item--result .flow__node {
  border-color: var(--color-slate-900);
  background: var(--color-slate-900);
  color: var(--color-signal); /* lime on slate only (RULES.md §9.1) */
}
.flow__item--result .flow__label {
  color: var(--color-slate-900);
}
.flow__item--result .flow__text {
  font-weight: var(--font-weight-semibold);
}

/* Mission card (about — website deck 10/5/26, slide 15): a compact Midnight
   Blue card, the lime "Our mission" label beside the statement in white
   bold; stacked on phones, side by side and centred on one line from md
   (responsive.css). Lime on slate only (RULES.md §9.1). */
.mission {
  display: grid;
  gap: var(--space-3) var(--space-8);
  padding: var(--space-6) var(--space-7);
  border-radius: var(--radius-lg);
  background: var(--color-bg-dark);
}

/* Slide 15 (final deck 10/6/26): label 12pt Bold capitals (no tracking),
   statement 12.5pt Bold */
.mission__label {
  color: var(--color-signal);
  font-family: var(--font-family-heading);
  font-size: var(--font-size-deck-12);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  white-space: nowrap;
}

.mission__text {
  max-width: none;
  text-wrap: wrap; /* fill the line as on the slide, not balanced like other headings */
  color: var(--color-text-inverse);
  font-size: var(--font-size-deck-12-5); /* 12.5pt */
  font-weight: var(--font-weight-bold);
  line-height: 1.35;
}

/* ---- 13. Tiles ----------------------------------------------------------- */
.tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-6);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  transition: border-color var(--duration-fast) var(--ease-out);
}

/* Only tiles that lead somewhere respond to hover */
.tile:has(a):hover {
  border-color: var(--color-border-brand);
}

.tile__icon {
  margin-bottom: var(--space-2);
}

.tile__label {
  color: var(--color-eyebrow);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-eyebrow);
  text-transform: uppercase;
}

/* Ruled index (home products): a top rule instead of a box; the family is
   marked by a sample of its schedule-board lane (.seg-key, §29) instead of
   an icon badge, and the label is a name, not an eyebrow */
.tile--ruled {
  padding: var(--space-5) 0 0;
  border: 0;
  border-top: var(--border-width) solid var(--color-border-strong);
  border-radius: 0;
  background: transparent;
}

.tile--ruled .seg-key {
  margin-bottom: var(--space-3);
}

/* A lone dashed segment: a whole number of dashes (4 × 14px + one 8px dash) */
.seg-key > .seg--tentative:only-child {
  flex: 0 0 64px;
}

/* The approval item in a ruled index: the act/approve orange, drawn as one
   sequence-track segment (RULES.md §9.1) */
.tile--ruled.tile--approve {
  border-top: var(--track-weight) solid var(--color-action);
  /* the thicker rule takes its extra height out of the padding, so the
     text stays level with the neighbouring items */
  padding-top: calc(var(--space-5) - var(--track-weight) + var(--border-width));
}

.tile--ruled .tile__label {
  color: var(--color-green-500);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0;
  text-transform: none;
}

/* Capitals, as on the slide (home decisions, website deck slide 3) */
.tile--ruled .tile__label--caps {
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-eyebrow);
  text-transform: uppercase;
}

.tile__title {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-snug);
}

.tile__text {
  color: var(--color-text-muted);
}

.tile__meta {
  color: var(--color-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.tile__footer {
  margin-top: auto;
  padding-top: var(--space-3);
}

/* Home decisions (website deck final 10/6/26, slide 3): label 14pt Bold
   capitals (no tracking), question 18.75pt Bold, text 12.75pt Book, the
   decision line 12pt Bold */
.tile--decision .tile__label--caps {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-deck-14);
  letter-spacing: 0;
  line-height: 1.3;
}

.tile--decision .tile__title {
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem); /* 22→30: 18.75pt */
  line-height: 1.25;
}

.tile--decision .tile__text {
  font-size: var(--font-size-deck-12-75); /* 12.75pt */
  line-height: 1.4;
}

.tile--decision .tile__meta {
  font-size: var(--font-size-deck-12);
  font-weight: var(--font-weight-bold);
  line-height: 1.35;
}

.tile--muted {
  background: var(--color-bg-muted);
  border-color: transparent;
}

.section--dark .tile {
  background: var(--color-slate-800);
  border-color: var(--color-border-on-dark);
}

.section--dark .tile__text {
  color: var(--color-text-inverse-muted);
}
.section--dark .tile__title {
  color: var(--color-text-inverse);
}
.section--dark .tile__label {
  color: var(--color-signal);
}

/* ---- 14. Module list (platform overview — website deck 10/5/26, slide 9)
   Each module is a name and a line of text beside a coloured bar, no card.
   The bars run Logo Green, Light Green 1, Deep Orange, Midnight Blue across
   each row of four, as on the slide (Light Green 1 stands in for the
   slide's Light Green 2, which is never used on light surfaces — RULES.md
   §9.1). 1 / 2 / 4 columns (responsive.css). */
.module-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
}

.module {
  --module-color: var(--color-green-500);

  display: grid;
  align-content: start;
  gap: var(--space-2); /* the slide's gap between name and description */
  padding-left: var(--space-4);
  border-left: var(--track-weight) solid var(--module-color);
}

.module:nth-child(4n + 2) {
  --module-color: var(--color-green-300);
}
.module:nth-child(4n + 3) {
  --module-color: var(--color-action);
}
.module:nth-child(4n) {
  --module-color: var(--color-slate-900);
}

/* Slide 9 (final deck 10/6/26): names 12pt Bold capitals (no tracking),
   descriptions 10.5pt — Book, not the deck's Bold, so they match the site's
   other card text (at the client's request) */
.module__name {
  color: var(--color-heading);
  font-size: var(--font-size-deck-12);
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
  text-transform: uppercase;
}

.module__text {
  color: var(--color-text-muted);
  font-size: var(--font-size-deck-10);
  line-height: 1.4;
}

/* The closing band under a module list stands clear of the grid: more
   space than between the rows, so it reads as the summary, not a row */
.module-list + .value-note {
  margin-top: clamp(var(--space-8), 5vw, var(--space-10));
}

/* ---- 15. Stats / facts ---------------------------------------------------- */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-6);
}

/* Each stat sits under a hairline with a short brand accent */
.stat-row > * {
  padding-top: var(--space-5);
  border-top: var(--border-width) solid var(--color-border);
  background: linear-gradient(var(--color-brand), var(--color-brand)) left top / 40px 3px no-repeat;
}

.section--dark .stat-row > *,
.on-dark .stat-row > * {
  border-top-color: var(--color-border-on-dark);
  background-image: linear-gradient(var(--color-signal), var(--color-signal));
}

.stat__value {
  color: var(--color-heading);
  font-family: var(--font-family-heading);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  letter-spacing: var(--letter-spacing-display);
  font-variant-numeric: lining-nums tabular-nums;
}

.stat__label {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.section--dark .stat__value,
.on-dark .stat__value {
  color: var(--color-signal);
}
.section--dark .stat__label,
.on-dark .stat__label {
  color: var(--color-text-inverse-muted);
}

/* Compact fact row (closing section) */
/* Plain facts on slate, each led by one short signal-bar segment (lime:
   slate only) */
.fact-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
}

.fact-strip__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-inverse);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.fact-strip__item::before {
  content: '';
  width: 12px;
  height: var(--track-weight);
  border-radius: var(--radius-pill);
  background: var(--color-signal);
}

/* On light surfaces: ink text, Logo Green marker (lime is slate-only) */
.fact-strip--light .fact-strip__item {
  color: var(--color-heading);
  font-size: var(--font-size-base);
}

.fact-strip--light .fact-strip__item::before {
  background: var(--color-green-500);
}

/* ---- 16. Media ------------------------------------------------------------ */
.media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-grey-100);
}

.media__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media__caption {
  position: absolute;
  left: var(--space-4);
  right: var(--space-4);
  bottom: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: var(--border-width) solid var(--color-border-on-dark);
  border-radius: var(--radius-md);
  background: var(--color-slate-900);
  color: var(--color-text-inverse);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .media__caption {
    background: var(--color-slate-glass);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
}

.media__caption-title {
  color: var(--color-signal);
  font-weight: var(--font-weight-bold);
}

.media__caption-text {
  margin-top: 2px;
  color: var(--color-text-inverse-muted);
  font-size: var(--font-size-sm);
}

/* Title and text side by side on solid Midnight Blue, raised to sit above
   the brand bars along the photo's foot (home platform — website deck
   slide 6). Stacked on phones (responsive.css). */
.media__caption--row {
  bottom: 13%;
  display: grid;
  gap: var(--space-1) var(--space-5);
  background: var(--color-slate-900);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.media__caption--row .media__caption-text {
  margin-top: 0;
  color: var(--color-text-inverse);
}

/* Platform hero (slide 6): both caption lines 12pt, title Bold, text Book */
.media__caption--row .media__caption-title,
.media__caption--row .media__caption-text {
  font-size: var(--font-size-deck-12);
  line-height: 1.3;
}

/* Product screenshot in a simple window frame */
.media--screen {
  padding-top: 28px;
  background: var(--color-slate-950);
  box-shadow: var(--shadow-lg);
}

.media--screen::before {
  content: '';
  position: absolute;
  top: 10px;
  left: 14px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-action);
  box-shadow:
    14px 0 0 var(--color-signal),
    28px 0 0 var(--color-green-500);
}

.media--plain {
  background: transparent;
  border-radius: 0;
}

/* A screenshot in a plain Midnight Blue frame, deeper above and below than at
   the sides, no window dots or shadow (platform connected data, website deck
   slide 21) */
.media--frame {
  padding: var(--space-6) var(--space-4);
  background: var(--color-slate-900);
}

.media--frame .media__img {
  border-radius: var(--radius-sm);
}

/* ---- 17. Industry list ---------------------------------------------------- */
.industry-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
}

.industry {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5) var(--space-4) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  color: var(--color-heading);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
}

/* Icon in a small tinted badge, like .icon-badge */
.industry .icon {
  width: 40px;
  height: 40px;
  padding: 10px;
  border-radius: var(--radius-sm);
  background: var(--color-brand-tint);
  color: var(--color-green-500);
}

/* .industry-list--plain: a ruled list — no boxes or icon badges (home) */
.industry-list--plain {
  column-gap: var(--space-7);
  row-gap: 0;
}

.industry-list--plain .industry {
  padding: var(--space-4) 0;
  border: 0;
  border-top: var(--border-width) solid var(--color-border-strong);
  border-radius: 0;
  background: transparent;
  font-weight: var(--font-weight-medium);
}

.industry-list--plain .industry .icon {
  width: 20px;
  height: 20px;
  padding: 0;
  background: transparent;
}

/* .industry-list--roster: the segment list as the subject of the section
   (who we serve) — names at title size, icon above, so each firm type
   reads as a heading in a ruled roster. One column on phones, two from sm,
   three from lg (responsive.css). Closed by a bottom rule. */
.industry-list--roster {
  border-bottom: var(--border-width) solid var(--color-border-strong);
}

.industry-list--roster .industry {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5) 0 var(--space-7);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-family-heading);
}

.industry-list--roster .industry .icon {
  width: 28px;
  height: 28px;
}

/* Firm types in bold capitals (website deck slide 14: 14pt Apex New Bold,
   heading colour, no added letter spacing) */
.industry-list--caps .industry {
  font-size: var(--font-size-md);
  text-transform: uppercase;
}

/* ---- 18. Prompt list (example questions asked in plain language) --------- */
.prompt-list {
  display: grid;
  gap: var(--space-3);
}

/* Slide 8 (final deck 10/6/26): 12pt Book, the highlighted one Bold */
.prompt {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  border: var(--border-width) solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: var(--font-size-deck-12);
  line-height: 1.35;
}

/* The question the slide picks out (website deck slide 8): pale lime, bold */
.prompt--highlight {
  border-color: transparent; /* tinted: the fill is the edge */
  background: var(--color-signal-tint);
  color: var(--color-heading);
  font-weight: var(--font-weight-bold);
}

.prompt::before {
  content: '\201C';
}
.prompt::after {
  content: '\201D';
}

/* ---- 19. Pricing (website deck 10/12/26, slide 14) ------------------------
   One white section, no estimator: a pale-green pill (every module included
   | from $500), the tier table, a second pill with the worked examples, then
   the terms beside the orange Get a pricing review.

   Pills: the brand tint; below lg the items stack in a rounded box;
   from lg they run on one line between thin rules with full round ends
   (responsive.css). Green Bold — 12pt capitals in the strap; 10pt in the
   examples, only the label in capitals. */
.price-band {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  max-width: none;
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-brand-tint);
  color: var(--color-green-500);
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
  text-align: center;
}

.price-band--strap {
  font-size: var(--font-size-deck-12);
  text-transform: uppercase;
}

.price-band--examples {
  margin-top: var(--space-4);
  font-size: var(--font-size-deck-10);
  font-variant-numeric: lining-nums tabular-nums;
}

.price-band__label {
  text-transform: uppercase;
}

/* The table (slide 14): a Midnight Blue head bar with white 9pt Bold
   capitals, hairline cell borders, rows alternating white and pale grey;
   ranges left, the formula (green Bold) and the price centred. On phones
   each tier stacks — range and price on one line, the formula under them —
   so nothing scrolls out of view; from md it is a real table
   (responsive.css). The markup carries ARIA table roles, because changing
   display on table elements drops their table semantics in some browsers. */
.table-wrap {
  position: relative;
  margin-top: var(--space-5);
}

.price-table {
  display: block;
  width: 100%;
  border: var(--border-width) solid var(--color-border);
  text-align: left;
}

.price-table thead {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.price-table tbody {
  display: block;
}

.price-table tbody tr {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    'range value'
    'formula formula';
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-4);
}

.price-table tbody tr + tr {
  border-top: var(--border-width) solid var(--color-border);
}

.price-table tbody tr:nth-child(even) {
  background: var(--color-grey-50);
}

/* Every cell 12pt: ranges and limits Book, the formula in green Bold */
.price-table tbody th {
  grid-area: range;
  color: var(--color-heading);
  font-family: var(--font-family-heading);
  font-size: var(--font-size-deck-12);
  font-weight: var(--font-weight-regular);
  white-space: nowrap;
  font-variant-numeric: lining-nums tabular-nums;
}

.price-table tbody td {
  grid-area: formula;
  color: var(--color-green-500);
  font-size: var(--font-size-deck-12);
  font-weight: var(--font-weight-bold);
}

.price-table tbody .price-table__value {
  grid-area: value;
  color: var(--color-heading);
  font-weight: var(--font-weight-regular);
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: lining-nums tabular-nums;
}

/* Under the examples: the agreement terms (10pt, muted) and the page's one
   orange button, side by side from md (responsive.css) */
.price-footer {
  display: grid;
  gap: var(--space-5);
  justify-items: start;
  margin-top: var(--space-5);
}

.price-footer__terms {
  max-width: none; /* runs beside the button, as on the slide */
  color: var(--color-text-muted);
  font-size: var(--font-size-deck-10);
}

/* The tier matching the estimator (pages/platform.js): the lime tint, and a
   green edge on the range cell so it doesn't rely on color alone. Set on the
   row and its cells, so it shows in both the stacked and the table layout. */
.price-table tbody tr.is-highlighted,
.price-table tbody tr.is-highlighted > * {
  background: var(--color-lime-100);
}

.price-table tbody tr.is-highlighted {
  box-shadow: inset 4px 0 0 var(--color-brand); /* on the range cell from md (responsive.css) */
}

/* ---- 20. Price calculator (Platform hub, Pricing chapter) -----------------
   Restored 10/14/26 above the tier table: a Midnight Blue card, the input
   and slider on the left and the estimate on the right from md (stacked,
   with a rule between them, on phones — responsive.css). The price is set
   in the headline face, lime on slate (RULES.md §9.1). */
.calculator {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-top: var(--space-7);
  padding: var(--space-7);
  border-radius: var(--radius-lg);
  background: var(--color-slate-900);
  color: var(--color-text-inverse);
}

.calculator__title {
  margin-bottom: var(--space-5);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold); /* not a deck section title */
}

.calculator .form-label {
  color: var(--color-text-inverse);
}

.calculator .form-hint {
  color: var(--color-text-inverse-muted);
}

.calculator__range {
  width: 100%;
  margin-top: var(--space-5);
  accent-color: var(--color-signal);
}

.calculator__output {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: var(--border-width) solid var(--color-border-on-dark);
}

.calculator__result-label {
  color: var(--color-text-inverse-muted);
  font-size: var(--font-size-sm);
}

.calculator__result {
  margin-top: var(--space-1);
  color: var(--color-signal); /* lime on slate only (RULES.md §9.1) */
  font-family: var(--font-family-heading);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-heavy);
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
}

.calculator__formula {
  margin-top: var(--space-3);
  color: var(--color-text-inverse-muted);
  font-size: var(--font-size-sm);
}

.calculator__note {
  margin-top: var(--space-2);
  color: var(--color-text-inverse-muted);
  font-size: var(--font-size-sm);
}

.accordion {
  border-top: var(--border-width) solid var(--color-border);
}

.accordion__item {
  border-bottom: var(--border-width) solid var(--color-border);
}

.accordion__heading {
  font-size: inherit;
}

/* Rows have a little side padding so the hover tint and the open state read
   as a panel; the open question is tinted with a green edge — the same
   "current" marker as the phone menu */
.accordion__item {
  transition: background-color var(--duration-fast) var(--ease-out);
}
.accordion__item:hover {
  background: var(--color-bg-muted);
}
.accordion__item:has(> .accordion__heading [aria-expanded='true']) {
  background: var(--color-bg-muted);
  box-shadow: inset 3px 0 0 var(--color-green-500);
}

.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-5);
  border: 0;
  background: transparent;
  color: var(--color-heading);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  text-align: left;
  cursor: pointer;
}

.accordion__trigger:hover {
  color: var(--color-green-700);
}

.accordion__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-brand-tint);
  color: var(--color-green-700);
  transition:
    transform var(--duration-base) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}

.accordion__trigger:hover .accordion__icon,
.accordion__trigger[aria-expanded='true'] .accordion__icon {
  background: var(--color-brand);
  color: var(--color-slate-950);
}

.accordion__trigger[aria-expanded='true'] .accordion__icon {
  transform: rotate(45deg);
}

.accordion__panel {
  padding: 0 var(--space-10) var(--space-6) var(--space-5);
  color: var(--color-text-muted);
}

/* ---- 22. Forms ------------------------------------------------------------ */
.form {
  display: grid;
  gap: var(--space-5);
}

.form-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
}

.form-field {
  display: grid;
  gap: var(--space-2);
  align-content: start;
}

.form-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
}

.form-label__required {
  color: var(--color-danger);
}

.form-control {
  width: 100%;
  min-height: var(--control-height);
  padding: var(--space-2) var(--space-4);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  line-height: var(--line-height-snug);
  transition:
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}

.form-control::placeholder {
  color: var(--color-grey-600); /* 5.0:1 — still clearly lighter than entered text */
  opacity: 1;
}
.form-control:hover {
  border-color: var(--color-grey-600);
}

.form-control:focus {
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring);
}

.form-control:disabled {
  background: var(--color-grey-50);
  cursor: not-allowed;
}
.form-control[aria-invalid='true'] {
  border-color: var(--color-danger);
}

textarea.form-control {
  min-height: 7rem;
  resize: vertical;
}

select.form-control {
  appearance: none;
  padding-right: var(--space-9);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23253746' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  background-size: 20px;
}

.form-control--narrow {
  max-width: 10rem;
}

.form-hint {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.form-error {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-danger);
  font-size: var(--font-size-sm);
}

.form-error:empty {
  display: none;
}

/* Demo page (website deck 10/5/26, slide 24): the headline, lead and what
   the demo covers on the left; the form on the right in a brand-tint card
   with white fields, labels in small capitals, and the "Book my demo"
   button. Stacked on phones; side by side from lg (.split). */
.demo__card {
  padding: var(--space-7);
  border-radius: var(--radius-lg); /* tinted: the fill is the edge */
  background: var(--color-brand-tint);
}

/* Slide 24 (final deck 10/6/26): form title 12pt Bold capitals, labels 9pt
   Bold capitals (neither tracked), the email line 10.5pt Book */
.demo__form-title {
  font-size: var(--font-size-deck-12);
  font-weight: var(--font-weight-bold); /* not a deck section title (h2 is Heavy) */
  text-transform: uppercase;
}

.demo__card .form-label {
  color: var(--color-text-muted);
  font-size: 0.9rem; /* 9pt */
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
}

.demo__card .form-control {
  background-color: var(--color-surface);
}

/* The button, then the email line under it (as on the slide) */
.demo__actions {
  display: grid;
  justify-items: start;
  gap: var(--space-4);
}

.demo__email {
  color: var(--color-text-muted);
  font-size: var(--font-size-deck-10);
}

/* What the demo covers: a white tick in a small green circle; the last
   point — the five-day onboarding, the act moment — orange and bold */
.check-list--badges .check-list__item {
  align-items: center;
  gap: var(--space-4);
  color: var(--color-text);
  font-size: var(--font-size-deck-12); /* 12pt, slide 24 */
}

.check-list--badges .check-list__item .icon {
  width: 1.375rem;
  height: 1.375rem;
  margin-top: 0;
  padding: 4px;
  border-radius: var(--radius-pill);
  background: var(--color-green-500); /* brand fill + Deep Midnight tick, as every numbered badge */
  color: var(--color-on-brand);
  stroke-width: 2.5;
}

.check-list--badges .check-list__item--action,
.check-list--badges .check-list__item--strong {
  font-weight: var(--font-weight-bold);
}

.check-list--badges .check-list__item--action .icon {
  background: var(--color-action);
}

/* Ruled list on slate: hairlines on dark, inverse text */
.ruled-list--on-dark .ruled-list__item {
  border-top-color: var(--color-border-on-dark);
  color: var(--color-text-inverse);
  font-weight: var(--font-weight-regular);
}

.ruled-list--on-dark {
  border-bottom: var(--border-width) solid var(--color-border-on-dark);
}

/* ---- 23. Timeline (the 5-day focused start — website deck 10/5/26, slide 22)
   Each day is a circle with the day inside, joined to the next by one grey
   line, then the title in the day's colour and the text. The final day is
   the act moment (orange, RULES.md §9.1). Circles are the brand Logo Green
   and Deep Orange with a Deep Midnight day label (white fails on both). Stacked on phones with
   the line running down; a row from md with the line across, text centred
   under each circle (responsive.css). */
.timeline {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
}

.timeline__item {
  --step-color: var(--color-green-500); /* the circle: brand fill */
  --step-text: var(--color-green-500);

  position: relative;
  display: grid;
  grid-template-columns: var(--day-dot-size) minmax(0, 1fr);
  column-gap: var(--space-5);
  align-content: start;
}

.timeline__item--final {
  --step-color: var(--color-action);
  --step-text: var(--color-action-text);
}

/* The line from this circle to the next */
.timeline__item:not(:last-child)::before {
  content: '';
  position: absolute;
  top: calc(var(--day-dot-size) / 2);
  left: calc((var(--day-dot-size) - var(--step-badge-line)) / 2);
  width: var(--step-badge-line);
  height: calc(100% + var(--space-6));
  background: var(--color-grey-200);
}

.timeline__day {
  position: relative; /* above the line */
  display: grid;
  grid-row: span 2;
  place-items: center;
  width: var(--day-dot-size);
  height: var(--day-dot-size);
  border-radius: var(--radius-pill);
  background: var(--step-color);
  color: var(--color-on-brand);
  font-size: 0.825rem; /* 8.25pt */
  font-weight: var(--font-weight-bold);
  line-height: 1;
  text-transform: uppercase;
}

/* Slide 22 (final deck 10/6/26): days 8.25pt Bold capitals, titles 16pt
   Bold, text 10.5pt Book; the included services 14pt Bold */
.timeline__title {
  align-self: end;
  color: var(--step-text);
  font-size: var(--font-size-deck-16);
  line-height: 1.2;
}

.timeline__text {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--font-size-deck-10);
  line-height: 1.4;
}

/* ---- 24. Resource cards --------------------------------------------------- */
.resource-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  height: 100%;
  padding: var(--space-6);
  border-radius: var(--radius-md);
  border: var(--border-width) solid var(--color-border);
  background: var(--color-surface);
  transition: border-color var(--duration-fast) var(--ease-out);
}

.resource-card:has(a):hover {
  border-color: var(--color-border-brand);
}

.resource-card__title {
  font-size: var(--font-size-lg);
}
.resource-card__text {
  color: var(--color-text-muted);
}
.resource-card__footer {
  margin-top: auto;
  padding-top: var(--space-3);
}

.resource-card--feature {
  background: var(--color-slate-900);
  border-color: var(--color-slate-900);
  color: var(--color-text-inverse);
}

.resource-card--feature .resource-card__title {
  color: var(--color-text-inverse);
}
.resource-card--feature .resource-card__text {
  color: var(--color-text-inverse-muted);
}
.resource-card--feature .link-arrow {
  color: var(--color-signal);
}

/* Feature card (resources hero): the one dark panel on the page — the lead
   resource beside the headline. Its type is a plain label, not a tag. */
.resource-card__type {
  color: var(--color-signal); /* lime on slate only (RULES.md §9.1) */
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.resource-card--feature .resource-card__title {
  font-size: var(--font-size-xl);
  line-height: var(--line-height-snug);
}

/* Beside the headline it keeps its own height, centred on the text */
.split > .resource-card {
  height: auto;
}

/* Resource index (resources overview): the library as a ruled catalogue —
   one row per resource: type, title + summary, the action. Stacked on
   phones; three columns from md (responsive.css). */
.resource-index {
  border-bottom: var(--border-width) solid var(--color-border-strong);
}

.resource-index__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
  padding: var(--space-5) 0;
  border-top: var(--border-width) solid var(--color-border-strong);
}

.resource-index__type {
  color: var(--color-green-500);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.resource-index__title {
  font-size: var(--font-size-lg);
}

.resource-index__text {
  margin-top: var(--space-1);
  color: var(--color-text-muted);
}

.resource-index__link {
  justify-self: start;
  white-space: nowrap;
}

/* .grid--rows: tiles side by side share row lines from md (responsive.css) */

/* Ruled list: short items inside a ruled tile (product updates) */
.ruled-list {
  margin-top: var(--space-2);
}

.ruled-list__item {
  padding: var(--space-3) 0;
  border-top: var(--border-width) solid var(--color-border);
  color: var(--color-heading);
  font-weight: var(--font-weight-medium);
}

/* ---- 25. Notes & alerts --------------------------------------------------- */
.note {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  background: var(--color-bg-muted);
  box-shadow: inset 3px 0 0 var(--color-brand);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.note .icon {
  flex-shrink: 0;
  color: var(--color-green-500);
  margin-top: 3px; /* centre on the first line: (22.4px line − 16px icon) / 2 */
}

/* A note is one short statement: its text runs the width of the box instead
   of wrapping at the paragraph measure and leaving the box half empty.
   Centred notes also need this so icon + text centre together as one group. */
.note p {
  max-width: none;
}

/* Centered notes use a full tinted edge instead of the side accent */
.note--center {
  justify-content: center;
  padding: var(--space-5) var(--space-6);
  border: var(--border-width) solid var(--color-border-brand);
  box-shadow: none;
  text-align: center;
}

/* With an icon, keep the text left-aligned beside it when it wraps */
.note--center:has(> .icon) {
  text-align: left;
}

.section--muted .note {
  background: var(--color-surface);
}

.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
}

.alert--success {
  background: var(--color-success-tint);
  color: var(--color-success);
}
.alert--error {
  background: var(--color-danger-tint);
  color: var(--color-danger);
}
.alert__text {
  color: var(--color-text);
}
.alert__title {
  color: var(--color-heading);
  font-weight: var(--font-weight-bold);
}

/* ---- 26. Tags & check lists ----------------------------------------------- */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-brand-tint);
  color: var(--color-green-500);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  align-self: flex-start;
}

.tag--action {
  background: var(--color-orange-50);
  color: var(--color-action-text);
}
.tag--dark {
  background: var(--color-slate-800);
  color: var(--color-signal);
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.check-list {
  display: grid;
  gap: var(--space-3);
}

.check-list__item {
  display: flex;
  gap: var(--space-3);
}

.check-list__item .icon {
  margin-top: 3px;
  color: var(--color-green-500);
}

.section--dark .check-list__item .icon,
.on-dark .check-list__item .icon {
  color: var(--color-signal);
}

.dot-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.dot-list__item + .dot-list__item::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-right: var(--space-3);
  border-radius: 50%;
  background: var(--color-green-500);
  vertical-align: middle;
}

/* ---- 27. CTA band & closing ------------------------------------------------ */
.cta-band {
  padding: var(--space-9) 0;
  background: var(--color-bg-muted);
}

.cta-band__panel {
  display: grid;
  gap: var(--space-6);
  /* extra bottom room on phones so the signal lines sit below the stacked
     button, not behind it (md+ puts the button beside the text) */
  padding: var(--space-8) var(--space-7) calc(var(--space-8) + 72px);
  border-radius: var(--radius-lg);
  background-color: var(--color-slate-900);
  background-image: url('../images/backgrounds/signal-lines.svg');
  background-repeat: no-repeat;
  background-position: right -80px bottom -20px;
  color: var(--color-text-inverse);
}

.cta-band__title {
  color: var(--color-text-inverse);
  font-weight: var(--font-weight-bold);
  max-width: 30ch; /* two balanced lines on desktop */
}
.cta-band__text {
  margin-top: var(--space-3);
  color: var(--color-text-inverse-muted);
}

.cta-band__contact {
  margin-top: var(--space-4);
  color: var(--color-text-inverse-muted);
  font-size: var(--font-size-sm);
}

.cta-band__contact a {
  color: var(--color-signal);
}

/* Home closing section with photo */
.closing {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
  align-items: center;
}

/* Three deck lines (website deck slide 25), at section-title size */
.closing__title {
  font-size: var(--font-size-h2);
  line-height: var(--line-height-tight);
}

/* Website deck (10/12/26) slide 29: the slide's empty line under "We Build
   Profit" — one line of the title, so the lines and lead below move down */
.closing__title-lead {
  margin-bottom: calc(var(--line-height-tight) * 1em);
}

/* Slide 25 (final deck 10/6/26): the lead 15.75pt Book; the proof row 14pt
   Bold capitals (no tracking) */
.closing__lead {
  font-size: var(--font-size-deck-15-75); /* 15.75pt */
  line-height: 1.45;
}

.closing__content > * + * {
  margin-top: var(--space-5);
}

/* Slide 29: the lead sits well below the title — about 58pt between the
   last title line and the lead (94px at 1pt = 1.6px), scaled down with
   the window so phones keep a normal paragraph gap */
.closing__content > .closing__lead {
  margin-top: clamp(var(--space-7), 4.9vw, 5.875rem);
}

/* …and the buttons the same distance again below the lead: about 56pt on
   the slide (90px at 1920), scaling down the same way */
.closing__content > .closing__lead + .btn-group {
  margin-top: clamp(var(--space-7), 4.7vw, 5.625rem);
}

/* Slide 25's closing row: five promises in capitals under a hairline,
   lime and Deep Orange picked out on slate (RULES.md §9.1). Two a row on
   phones, five from lg (responsive.css). */
.proof-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4) var(--space-6);
  margin-top: var(--space-9);
  padding-top: var(--space-6);
  border-top: var(--border-width) solid var(--color-border-on-dark);
}

.proof-row__item {
  color: var(--color-text-inverse);
  font-size: var(--font-size-deck-14);
  font-weight: var(--font-weight-bold);
  line-height: 1.25;
  text-transform: uppercase;
}

.proof-row__item--signal {
  color: var(--color-signal);
}

.proof-row__item--action {
  color: var(--color-action);
}

/* ---- 28. Hub pages: sticky section switcher + chapters ------------------- */
/* Platform and Resources are one scrolling page each. The switcher sticks
   under the header and uses the header's state system: section in view =
   green label + a 2px bar on its bottom edge (set by chapters.js).         */
html:has(.chapter-nav) {
  scroll-behavior: smooth; /* off for reduced motion (responsive.css) */
  /* header + switcher, each with a 1px bottom border */
  scroll-padding-top: calc(var(--header-height) + var(--chapter-nav-height) + var(--border-width) * 2);
}

/* Header + switcher read as one solid unit: no frosted glass (two stacked
   translucent bars show blurred ghosts of the cards scrolling beneath), and
   the switcher carries the single "scrolled" shadow for both             */
body:has(.chapter-nav) .site-header {
  background: var(--color-surface);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
body:has(.chapter-nav) .site-header.is-scrolled {
  box-shadow: none;
}

.chapter-nav {
  position: sticky;
  top: var(--header-height);
  z-index: calc(var(--z-header) - 1);
  background: var(--color-surface);
  border-bottom: var(--border-width) solid var(--color-border);
  transition: box-shadow var(--duration-base) var(--ease-out);
}

.chapter-nav.is-stuck {
  box-shadow: var(--shadow-sm);
}

.chapter-nav__inner {
  display: flex;
  align-items: center;
  height: var(--chapter-nav-height);
}

/* Hub name, from md: tells you which page these tabs belong to */
.chapter-nav__label {
  display: none;
  flex-shrink: 0;
  margin-right: var(--space-5);
  padding-right: var(--space-5);
  border-right: var(--border-width) solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-eyebrow);
  line-height: 1.5;
  text-transform: uppercase;
}

/* Phones: tabs scroll sideways edge to edge; the edges fade only when there
   is more to scroll that way (classes set by chapters.js) */
.chapter-nav__list {
  display: flex;
  flex: 1;
  min-width: 0;
  margin: 0 calc(var(--gutter) * -1);
  padding: 0 var(--gutter);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.chapter-nav__list::-webkit-scrollbar {
  display: none;
}
.chapter-nav__list.is-overflow-end {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
}
.chapter-nav__list.is-overflow-start {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 40px);
  mask-image: linear-gradient(to right, transparent, #000 40px);
}
.chapter-nav__list.is-overflow-start.is-overflow-end {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent);
}

.chapter-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: var(--chapter-nav-height);
  padding: 0 var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--duration-fast) var(--ease-out);
}

.chapter-nav__list > li:first-child .chapter-nav__link {
  padding-left: 0;
}
.chapter-nav__list > li:first-child .chapter-nav__link::after {
  left: 0;
}

.chapter-nav__link:hover {
  color: var(--color-green-500);
}

.chapter-nav__link[aria-current] {
  color: var(--color-green-500);
}

.chapter-nav__link::after {
  content: '';
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: -1px; /* covers the switcher's bottom border */
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--color-green-500);
  opacity: 0;
  transform: scaleX(0.4);
  transition:
    opacity var(--duration-fast) var(--ease-out),
    transform var(--duration-base) var(--ease-out);
}

.chapter-nav__link[aria-current]::after {
  opacity: 1;
  transform: none;
}

.chapter-nav__link:focus-visible {
  outline: none;
}
.chapter-nav__link:focus-visible::before {
  content: '';
  position: absolute;
  inset: 10px 2px;
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 2px var(--color-focus);
}

/* Chapter cover card: each chapter opens with a rounded slate card inside the
   container — the section's menu icon + label (lime, allowed on slate), the
   title, intro and action; from lg an "In this section" jump list sits in a
   darker inset on the right. The card is the chapter break (no divider
   rules): it speaks the same language as the CTA band that closes every
   page. The Buyer FAQ uses the same card for its sticky intro column.
   The chapter's first section brings the space below the card.          */
.chapter__opener {
  padding-top: var(--space-9); /* + the previous section's bottom padding */
}

.chapter__opener-inner,
.faq-layout__intro {
  padding: var(--space-7) var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-slate-900);
  color: var(--color-text-inverse);
}

.chapter__opener-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
}

.chapter__kicker {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Same icon as the section's menu item, so menu, tab and page connect */
.chapter__icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--color-slate-800);
  color: var(--color-signal);
}

.chapter__title {
  max-width: 22ch;
  margin-top: var(--space-4);
  font-size: var(--font-size-2xl);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-display);
}

.chapter__lead {
  max-width: 56ch;
  margin-top: var(--space-4);
  color: var(--color-text-inverse-muted);
  font-size: var(--font-size-md);
}

.chapter__heading .btn-group {
  margin-top: var(--space-6);
}

/* Jump list (lg+, responsive.css): a darker inset listing the chapter's parts */
.chapter__toc {
  display: none;
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-md);
  background: var(--color-slate-800);
}

.chapter__toc-title {
  margin-bottom: var(--space-2);
  color: var(--color-text-inverse-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-eyebrow);
  text-transform: uppercase;
}

.chapter__toc-list > li + li {
  border-top: var(--border-width) solid var(--color-border-on-dark);
}

.chapter__toc-link {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  color: var(--color-text-inverse);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: 1.45;
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.chapter__toc-link .icon {
  margin-top: 2px;
  color: var(--color-signal);
  transition: transform var(--duration-fast) var(--ease-out);
}

.chapter__toc-link:hover {
  color: var(--color-signal);
}
.chapter__toc-link:hover .icon {
  transform: translateY(2px);
}

/* Jump targets inside a chapter: a little air under the sticky bars */
.chapter .tile[id],
.chapter .resource-card[id],
.chapter .accordion__trigger[id] {
  scroll-margin-top: var(--space-6);
}

/* A chapter whose content sits beside its heading (Buyer FAQ): the opener
   is the whole chapter, so it brings its own bottom space */
.chapter__opener--closing {
  padding-bottom: var(--section-padding);
}

.faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
}

/* "Not here?" prompt under the intro — a quiet panel, so the next step is
   visible from every question rather than only after the last one */
.faq-layout__ask {
  margin-top: var(--space-7);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  background: var(--color-slate-800);
}

.faq-layout__ask-title {
  margin-bottom: var(--space-2);
  color: var(--color-text-inverse);
  font-weight: var(--font-weight-semibold);
}

/* The opener belongs to the section under it: a tighter gap than between sections */
.chapter__opener + .section {
  padding-top: var(--space-9);
}

/* ---- 29. Schedule board: lanes + segments (RULES.md §9.7) ---------------
   The brand guide's segmented bars drawn as a project schedule: Pipeline →
   People → Projects → Profit, staggered left to right. Segment shape is
   certainty — outlined pill probable, square dashes tentative, Light Green 1
   assigned, Logo Green committed, diamonds on a line forecast points. On
   light surfaces: Logo Green, Light Green 1 and Midnight Blue only.
   Label, track and text stack on phones; label + track from md; one row
   per lane from lg (responsive.css). */
.lanes {
  border-bottom: var(--border-width) solid var(--color-border-strong);
}

.lane {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    'label'
    'track'
    'text';
  row-gap: var(--space-3);
  padding: var(--space-6) 0;
  border-top: var(--border-width) solid var(--color-border-strong);
}

.lane__label {
  grid-area: label;
  font-size: var(--font-size-md);
  line-height: var(--line-height-snug);
}

/* The lane's place in the row; the track itself is the .track block */
.lane__track {
  grid-area: track;
}

/* Track: a lane's time axis with its bar placed by --track-start/-span.
   One modifier per lane, so a family sits at the same offset everywhere it
   appears — the schedule board (home) and the family rows (products). */
.track {
  position: relative;
  display: block;
  height: 14px;
}

.track::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  border-top: var(--border-width) dashed var(--color-border-strong);
}

.track__bar {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--track-start);
  width: var(--track-span);
  display: flex;
  align-items: center;
  gap: var(--track-gap);
}

.track--pipeline {
  --track-start: 0%;
  --track-span: 52%;
}
.track--people {
  --track-start: 16%;
  --track-span: 52%;
}
.track--projects {
  --track-start: 32%;
  --track-span: 52%;
}
.track--profit {
  --track-start: 48%;
  --track-span: 52%;
}

.lane__text {
  grid-area: text;
  color: var(--color-heading);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  line-height: 1.45; /* between snug and base: 18px text over 2–3 lines */
}

/* Profit is the outcome the other lanes lead to */
.lane--profit .lane__text {
  font-weight: var(--font-weight-bold);
}

/* Segments: also used on their own as a family marker (.seg-key) */
.seg {
  display: block;
  flex: var(--seg-grow, 1) 1 0;
  min-width: 0;
  height: 100%;
  border-radius: var(--radius-pill);
}

.seg--probable {
  --seg-grow: 3;
  border: 2px solid var(--color-green-500);
}

.seg--tentative {
  --seg-grow: 2;
  height: 8px;
  border-radius: 0;
  background: repeating-linear-gradient(90deg, var(--color-green-500) 0 8px, transparent 8px 14px);
}

.seg--assigned {
  --seg-grow: 3;
  background: var(--color-green-300);
}

.seg--committed {
  background: var(--color-green-500);
}

/* Forecast: a thin line with diamond points; the last point is the result */
.seg--forecast {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 0;
}

.seg--forecast::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 2px;
  margin-top: -1px;
  background: var(--color-slate-900);
}

.seg-mark {
  position: relative;
  width: 10px;
  height: 10px;
  background: var(--color-slate-900);
  transform: rotate(45deg);
}

.seg-mark:last-child {
  width: 14px;
  height: 14px;
  background: var(--color-green-500);
}

.seg-key {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  width: 4.5rem;
  height: 12px;
}

/* ---- 30. Layer cards (platform overview — website deck 10/5/26, slide 10)
   How data reaches the RM ONE AI hub: modules, connected tools and data
   connections on the green, lime and orange tints, then the hub — where it
   all arrives — on Midnight Blue with lime number and label (lime on slate
   only, RULES.md §9.1). Labels are green, except the data connections label
   in the text-safe orange. 1 / 2 / 4 columns (responsive.css). */
.layer-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}

.layer-card {
  --layer-bg: var(--color-brand-tint);
  --layer-num: var(--color-green-500);
  --layer-label: var(--color-green-500);

  display: grid;
  align-content: start;
  gap: var(--space-3);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--layer-bg);
}

.layer-card--tools {
  --layer-bg: var(--color-signal-tint);
}

.layer-card--feeds {
  --layer-bg: var(--color-orange-50);
  --layer-label: var(--color-action-text);
}

.layer-card--hub {
  --layer-bg: var(--color-bg-dark);
  --layer-num: var(--color-signal);
  --layer-label: var(--color-signal);
}

.layer-card__num,
/* Slide 10 (final deck 10/6/26): label 14pt Bold capitals (no tracking),
   title 14.25pt Bold, text 10.5pt Book */
.layer-card__label {
  color: var(--layer-label);
  font-size: var(--font-size-deck-14);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  text-transform: uppercase;
}

.layer-card__num {
  color: var(--layer-num);
}

.layer-card__title {
  margin-top: var(--space-2);
  font-size: var(--font-size-deck-14-25); /* 14.25pt */
  line-height: 1.25;
}

.layer-card__text {
  color: var(--color-text-muted);
  font-size: var(--font-size-deck-10);
  line-height: 1.4;
}

.layer-card--hub .layer-card__title {
  color: var(--color-text-inverse);
}

.layer-card--hub .layer-card__text {
  color: var(--color-text-inverse);
}

/* ---- 31. Products page (website deck 10/5/26, slides 11 and 13) -------
   Product cards: slide 11's four intelligence families, two by two — grey
   cards with the family name (green capitals; Demand forecasts in Deep
   Orange, website deck 10/8/26 page 12) and its decision on the left, and on the right its six modules
   in two rows of three joined by bullets, then the benefit. Profit, the
   outcome, is the Midnight Blue card with a lime name (lime on slate only).
   Head and body sit side by side from md (responsive.css).
   Update cards: slide 13's three columns — a small coloured tag (Live now
   green, What changed orange, What is next a lighter Midnight Blue on the
   dark card), the title and a plain list. White cards on the muted
   section; What is next — the directional roadmap — on Midnight Blue. */
.product-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}

.product-card {
  --product-label: var(--color-green-500);

  display: grid;
  gap: var(--space-4) var(--space-6);
  padding: var(--space-6);
  border-radius: var(--radius-md);
  background: var(--color-bg-muted);
}

.product-card--forecasts {
  --product-label: var(--color-action-text);
}

.product-card--profit {
  --product-label: var(--color-signal);

  background: var(--color-bg-dark);
  color: var(--color-text-inverse);
}

/* Type follows website deck slide 11, scaled from its lead: label 12pt Bold
   (md), title 13.5pt Bold (lg), modules 9.75pt Bold in the heading colour
   (sm), benefit 9.75–10.5pt Book (base) */
/* Slide 11 (final deck 10/6/26): label 12pt Bold capitals (no tracking),
   title 13.5pt Bold, module rows 9.75pt Bold, text 10.5pt Book */
.product-card__label {
  color: var(--product-label);
  font-size: var(--font-size-deck-12);
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
  text-transform: uppercase;
}

.product-card__title {
  margin-top: var(--space-3);
  font-size: var(--font-size-deck-13);
  line-height: 1.25;
}

.product-card--profit .product-card__title {
  color: var(--color-text-inverse);
}

.product-card__modules {
  display: grid;
  gap: var(--space-1);
  color: var(--color-heading);
  font-size: 0.975rem; /* 9.75pt */
  font-weight: var(--font-weight-bold);
}

.product-card__modules ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The deck's bullet between modules */
.product-card__modules li + li::before {
  content: '\2022';
  margin-right: var(--space-2);
  color: var(--color-text-muted);
}

.product-card__text {
  margin-top: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--font-size-deck-10);
  line-height: 1.4;
}

.product-card--profit .product-card__modules,
.product-card--profit .product-card__modules li + li::before,
.product-card--profit .product-card__text {
  color: var(--color-text-inverse);
}

.update-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}

/* Tags as on website deck slide 13: Logo Green, Deep Orange and a neutral on
   Midnight Blue, each with a white label (client request — the one exception
   to the Deep Midnight label on brand fills, RULES.md §9.1) */
.update-card {
  --update-tag: var(--color-green-500);
  --update-tag-text: var(--color-text-inverse);

  display: grid;
  align-content: start;
  gap: var(--space-4);
  padding: var(--space-6);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.update-card--changed {
  --update-tag: var(--color-action);
}

.update-card--next {
  --update-tag: var(--color-slate-700);
  --update-tag-text: var(--color-text-inverse);

  background: var(--color-bg-dark);
  color: var(--color-text-inverse);
}

/* Same height and optical centring as the chips: a fixed 36px pill with the
   label centred, plus 2px of top padding, because Apex New capitals sit
   about 1px above the middle of the line box (measured at 4x: within about
   half a pixel of centre at every width) */
.update-card__tag {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  min-height: var(--control-height-sm);
  padding: 0.125rem var(--space-4) 0;
  border-radius: var(--radius-pill); /* the site's pill, like the chips and buttons */
  background: var(--update-tag);
  color: var(--update-tag-text);
  font-size: var(--font-size-deck-12);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  text-transform: uppercase;
}

/* Slide 13 (final deck 10/6/26): tags 12pt Bold capitals (no tracking),
   titles 16pt Bold, list 11.25pt Book, the note under the cards 12pt */
/* Card title 14.25pt and list 12pt Book: the site's standard card heading
   and card text sizes (the deck sets 16pt titles and 11.25pt lists) */
.update-card__title {
  margin-top: var(--space-2);
  font-size: var(--font-size-deck-14-25);
  line-height: 1.25;
}

.update-card--next .update-card__title {
  color: var(--color-text-inverse);
}

/* Under the cards (website deck 10/8/26 page 14): the disclaimer on the
   left and the large capitals button on the right, centred on one line and
   aligned to the cards' outer edges; the button wraps under the note on
   narrow screens */
.update-cards__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4) var(--space-6);
  margin-top: var(--space-6);
}

.update-cards__note {
  max-width: none;
  color: var(--color-text-muted);
  font-size: var(--font-size-deck-12);
  line-height: 1.4;
}

.update-card__list {
  display: grid;
  gap: var(--space-2);
  font-size: var(--font-size-deck-12);
  line-height: 1.4;
  color: var(--color-text-muted);
}

.update-card--next .update-card__list {
  color: var(--color-text-inverse);
}

/* ---- 33. Landing screen (home first screen — home page deck 10/13/26, slide 1)
   The site header sits above it, as on every page; under it one Midnight
   Blue screen holds the opening messaging, left-aligned in its column — "We
   Build Profit." in Logo Green, the white headline, the bold tagline and
   the pale lead — beside the plain Analytics Center screen over the deck's
   Logo Green / lime / orange bar and the Pipeline · People · Projects ·
   Profit caption. A deeper Midnight Blue strip across the foot carries the
   lime benefit line. No logo, photo, buttons or page links on it (the
   header carries them). The rest of the home page follows below it. Stacked
   on phones; two columns, filling the window under the header, from lg
   (responsive.css). */
.landing {
  display: flex;
  flex-direction: column;
}

.landing__inner {
  display: grid;
  flex: 1 0 auto;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  max-width: var(--landing-max);
  margin: 0 auto;
  padding: var(--space-10) var(--gutter) var(--space-10);
}

.landing__line {
  display: block;
}

/* "We Build Profit.": Logo Green, a size up from the headline, with the
   slide's open space under it */
.landing__line--kicker {
  margin-bottom: var(--landing-gap-kicker);
  color: var(--color-green-500);
  font-size: var(--font-size-landing-kicker);
  line-height: var(--line-height-landing-kicker);
}

/* Headline A/B test (pages/home.js): each version is a block of lines. The
   lines stay hidden (keeping their space) until home.js has picked the
   version, so nobody sees one version switch to the other; without
   JavaScript they appear after a moment. */
.landing__test,
.landing__variant {
  display: block;
}

.landing__test:not(.is-ready) {
  visibility: hidden;
  animation: landing-test-reveal 0s 1.5s forwards;
}

@keyframes landing-test-reveal {
  to {
    visibility: visible;
  }
}

.landing__title {
  max-width: none;
  font-size: var(--font-size-landing-title);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-landing-title);
  text-wrap: wrap; /* the lines are set by the slide; don't rebalance them */
}

/* The tagline: 20pt Apex New Bold, white */
.landing__tagline {
  max-width: none;
  margin-top: var(--space-6);
  color: var(--color-text-inverse);
  font-family: var(--font-family-heading);
  font-size: var(--font-size-landing-tagline);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
}

/* The lead: 19pt Apex New Book, the slide's pale grey, wrapping as on the
   slide (three lines from lg) */
.landing__lead {
  max-width: 20em;
  margin-top: var(--space-4);
  color: var(--color-text-inverse-muted);
  font-family: var(--font-family-heading);
  font-size: var(--font-size-landing-lead);
  line-height: 1.2;
}

/* The screenshot (plain: no frame or shadow), then the deck's bar and the
   caption under it, as wide as the screenshot */
.landing__media {
  justify-self: center;
  width: 100%;
  max-width: 40rem;
  margin-top: var(--space-9);
}

.landing__img {
  display: block;
  width: 100%;
  height: auto;
}

/* 21pt Apex New Bold, white, centred under the bar */
.landing__caption {
  color: var(--color-text-inverse);
  font-family: var(--font-family-heading);
  font-size: var(--font-size-landing-caption);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  text-align: center;
}

.landing__caption::before {
  content: '';
  display: block;
  height: var(--landing-bar-weight);
  margin-top: var(--landing-bar-gap);
  margin-bottom: var(--landing-caption-gap);
  background: var(--landing-bar);
}

/* The foot strip across the screen: 22pt Apex New Bold, Light Green 2 (the
   slide's yellow, as the brand color) on deeper Midnight Blue (RULES.md
   §9.1), centred */
.landing__benefit {
  max-width: none;
  margin: 0;
  padding: var(--landing-strip-pad) var(--gutter);
  background: var(--landing-strip-bg);
  color: var(--color-signal);
  font-family: var(--font-family-heading);
  font-size: var(--font-size-landing-benefit);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  text-align: center;
}

/* ---- 34. Value chain (home "connected value" — website deck final 10/6/26, slide 5)
   Pipeline → People → Projects → Profit as four boxes joined by orange
   arrows: three on the brand tint, and Profit — the outcome — on Midnight
   Blue with a lime label (lime on slate only, RULES.md §9.1). Stacked on
   phones with the arrows pointing down; a row from lg (responsive.css). The
   arrows are decorative (aria-hidden); the list order carries the chain.
   Under it, the note band: the deck's one-line summary of the ask → approve
   loop. */
.value-chain {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8); /* room for the arrows between the boxes */
}

/* Tinted surfaces carry no outline — the fill is the edge (as layer cards,
   value note, support band); borders are for white cards */
.value-chain__item {
  position: relative;
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-brand-tint);
}

/* Slide 5 type: labels 16pt Bold capitals (no tracking), text 14pt Book */
.value-chain__label {
  color: var(--color-green-500);
  font-size: var(--font-size-deck-16);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: uppercase;
}

.value-chain__text {
  margin-top: var(--space-3);
  color: var(--color-text);
  font-size: var(--font-size-deck-14);
  line-height: 1.4;
}

.value-chain__item--profit {
  background: var(--color-bg-dark);
}

.value-chain__item--profit .value-chain__label {
  color: var(--color-signal);
}

.value-chain__item--profit .value-chain__text {
  color: var(--color-text-inverse);
}

/* Centred in the gap below the box, turned to point down */
.value-chain__arrow {
  position: absolute;
  bottom: calc(var(--space-8) / -2);
  left: 50%;
  color: var(--color-action);
  transform: translate(-50%, 50%) rotate(90deg);
}

.value-note {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-7);
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-signal-tint);
}

.value-note__title {
  color: var(--color-text);
  font-weight: var(--font-weight-bold);
}

/* The deck's small green capitals line (products, website deck slide 11) */
.value-note__caps {
  color: var(--color-green-500);
  font-size: 0.9rem; /* 9pt, as on slide 11 */
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
}

.value-note__text {
  color: var(--color-text-muted);
}

/* Note band variants (platform, website deck slides 10 and 9): grey for the
   one-line summary under the layer cards, which runs the full width; brand
   tint for the closing line under the module list */
.value-note--muted {
  background: var(--color-bg-muted);
}
.value-note--muted > p {
  max-width: none;
}

/* Platform overview (slide 10): the one-line summary, 10.5pt Bold, centred */
.value-note--muted {
  justify-items: center;
  text-align: center;
  font-size: var(--font-size-deck-10);
  font-weight: var(--font-weight-bold);
}

/* Brand-tint closing line, centred as on the slides (Platform modules 9,
   Products 11, Support 18) */
.value-note--brand {
  justify-content: center;
  justify-items: center;
  background: var(--color-brand-tint);
  text-align: center;
}

.value-note--brand > p {
  max-width: none;
  font-weight: var(--font-weight-bold);
}

.value-note--brand > p:not(.value-note__caps) {
  font-size: var(--font-size-deck-12);
}

/* Platform modules (slide 9): the closing line at 12pt Bold */
.value-note--brand .value-note__title {
  font-size: var(--font-size-deck-12);
}

/* Home connected value (slide 5): the note at 14pt, title Bold, text Book */
.value-note--lg .value-note__title,
.value-note--lg .value-note__text {
  font-size: var(--font-size-deck-14);
  line-height: 1.4;
}

/* ---- 35. Platform blocks (website deck 10/5/26, slides 7, 21 and 22) -----
   Cycle: the six steps of the operational intelligence cycle (slide 7),
   laid out as on the slide: the number in its own narrow column, and the
   deck's filled icon, the step name and the text lined up in the column
   beside it, so the text starts under the name, not under the number.
   Three steps a row from lg, with a short grey dash in the gap after each
   name (responsive.css). Deep Orange marks Act, the approve moment
   (RULES.md §9.1).
   Badge list: slide 21's numbered rules — a small green circle per number,
   orange for the approval rule; the rules the slide sets in bold carry
   --strong (the first and the last).
   Proof grid: slide 21's four controls in a brand-tint box under the
   screenshot, two by two, the two columns spaced evenly across the box.
   Support band: slide 22's included services beside the orange
   "See RM ONE in action" button. */
.cycle {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8) var(--cycle-gap);
}

.cycle__item {
  --step-color: var(--color-green-500);
  --step-text: var(--color-green-500);

  display: grid;
  grid-template-columns: var(--cycle-num-col) minmax(0, 1fr);
  row-gap: var(--space-3);
  align-content: start;
  align-items: baseline; /* number and step name share a baseline */
}

.cycle__item--action {
  --step-color: var(--color-action);
  --step-text: var(--color-action-text);
}

.cycle__icon {
  grid-column: 2;
  width: var(--cycle-icon-size);
  height: var(--cycle-icon-size);
  color: var(--step-color);
}

/* Slide 7 type (final deck 10/6/26): numbers 12pt Bold, step names 13.5pt
   Bold capitals (no tracking), text 12pt Book */
.cycle__num {
  grid-column: 1;
  grid-row: 2;
  color: var(--step-text);
  font-size: var(--font-size-deck-12);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
}

.cycle__title {
  position: relative; /* holds the dash to the next step (lg) */
  grid-column: 2;
  grid-row: 2;
  font-size: var(--font-size-deck-13);
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: uppercase;
}

.cycle__text {
  grid-column: 2;
  grid-row: 3;
  color: var(--color-text-muted);
  font-size: var(--font-size-deck-12);
  line-height: 1.4;
}

.badge-list {
  display: grid;
  gap: var(--space-4);
}

/* Slide 21 (final deck 10/6/26): the lead 12.75pt Book, the rules 11.25pt,
   numbers 7.5pt Bold, the controls 14pt Bold */
.control__lead {
  font-size: var(--font-size-deck-12-75); /* 12.75pt */
  line-height: 1.45;
}

.badge-list__item {
  --badge-color: var(--color-green-500);

  display: grid;
  grid-template-columns: var(--badge-size) minmax(0, 1fr);
  column-gap: var(--space-4);
  align-items: center;
  color: var(--color-text);
  font-size: 1.125rem; /* 11.25pt */
  line-height: 1.35;
}

.badge-list__item--action {
  --badge-color: var(--color-action);
}

.badge-list__item--strong {
  font-weight: var(--font-weight-bold);
}

.badge-list__num {
  display: grid;
  place-items: center;
  width: var(--badge-size);
  height: var(--badge-size);
  border-radius: var(--radius-pill);
  background: var(--badge-color);
  color: var(--color-on-brand);
  font-size: 0.75rem; /* 7.5pt */
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

.proof-grid {
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: space-evenly;
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-5);
  padding: var(--space-5) var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-brand-tint);
}

.proof-grid__item {
  color: var(--color-green-500);
  font-size: var(--font-size-deck-14);
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
}

.proof-grid__item--action {
  color: var(--color-action-text);
}

/* Implementation (website deck 10/12/26, slide 25): the three included
   services on the brand tint, centred; no button since the 10/12/26 deck */
.support-band {
  margin-top: var(--space-9);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-brand-tint);
}

.support-band__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-7);
  color: var(--color-heading);
  font-size: var(--font-size-deck-14);
  font-weight: var(--font-weight-bold);
}

/* ---- 36. RM ONE AI page (website deck 10/5/26, slides 19, 20 and 8) ------
   Metric band: slide 19's three points under the opening — AI agents,
   Connected modules, One Operating picture — as bold labels on the brand
   tint (website deck 10/12/26, slide 21, dropped the figures 50+ / 16 / 1).
   Stacked on phones, a row from md.
   Type cards: slide 20's five types of intelligence — grey cards, each with
   a numbered circle (text-safe green, white number) and the type name in
   green capitals; Perform, the approve moment, is the Midnight Blue card
   with an orange circle (dark number, RULES.md §9.1) and a lime name (lime
   on slate only). The example orchestration agents run underneath with no heading (named for
   screen readers only), one per column from lg, the last (People Finder) in orange as on the slide.
   Support panel: slide 8's "AI decision support" panel on Midnight Blue —
   lime label, then each area beside its text, ruled; "Approved action" in
   Deep Orange (bold on slate, 4.1:1).
   Control strip: slide 8's closing bar — the three control promises in
   capitals, and the lime "See RM ONE in action" link. */
.metric-band {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-9);
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-brand-tint);
}

.metric-band__item {
  display: flex;
  align-items: center;
}

/* Slide 19 (final deck 10/6/26): labels 16pt Bold */
.metric-band__label {
  color: var(--color-heading);
  font-size: var(--font-size-md); /* 16pt from lg (responsive.css) */
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
}

.type-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}

.type-card {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  background: var(--color-bg-muted);
}

.type-card__num {
  display: grid;
  place-items: center;
  width: var(--step-badge-size);
  height: var(--step-badge-size);
  margin-bottom: var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-green-500); /* brand fill + Deep Midnight label, as every numbered badge */
  color: var(--color-on-brand);
  font-size: var(--font-size-deck-12);
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

/* Slide 20 (final deck 10/6/26): numbers 12pt Bold, names 10.5pt Bold
   capitals (no tracking), text 12pt Book; the agents 12pt Bold under a
   12pt Bold grey capitals label */
.type-card__title {
  color: var(--color-green-500);
  font-size: var(--font-size-deck-10);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  text-transform: uppercase;
}

.type-card__text {
  color: var(--color-text-muted);
  font-size: var(--font-size-deck-12);
  line-height: 1.4;
}

.type-card--action {
  background: var(--color-bg-dark);
}

.type-card--action .type-card__num {
  background: var(--color-action);
}

.type-card--action .type-card__title {
  color: var(--color-signal);
}

.type-card--action .type-card__text {
  color: var(--color-text-inverse);
}

.agent-row__label {
  max-width: none;
  margin-top: var(--space-7);
  color: var(--color-text-muted);
  font-family: var(--font-family-heading);
  font-size: var(--font-size-deck-12);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
}

.agent-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  margin-top: var(--space-3);
}

.agent-row__item {
  color: var(--color-green-500);
  font-size: var(--font-size-deck-12);
  font-weight: var(--font-weight-bold);
}

.agent-row__item--action {
  color: var(--color-action-text);
}

/* Beside the prompts (.split--top), the panel sits on the same baseline as
   the last prompt card */
.support-panel {
  align-self: end;
  padding: var(--space-7);
  border-radius: var(--radius-lg);
  background: var(--color-bg-dark);
}

/* Slide 8: label 14pt Bold capitals (no tracking), row titles 14pt Bold,
   row text 11.25pt Book */
.support-panel__label {
  color: var(--color-signal);
  font-family: var(--font-family-heading);
  font-size: var(--font-size-deck-14);
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
  text-transform: uppercase;
}

.support-panel__list {
  margin-top: var(--space-5);
}

.support-panel__row {
  display: grid;
  gap: var(--space-1) var(--space-5);
  padding: var(--space-5) 0;
  border-top: var(--border-width) solid var(--color-border-on-dark);
}

.support-panel__row:first-child {
  border-top: 0;
}

.support-panel__row dt {
  color: var(--color-text-inverse);
  font-size: var(--font-size-deck-14);
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
}

.support-panel__row--action dt {
  color: var(--color-action);
}

.support-panel__row dd {
  margin: 0;
  color: var(--color-text-inverse-muted);
  font-size: 1.125rem; /* 11.25pt */
  line-height: 1.4;
}

.control-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-6);
  margin-top: var(--space-8);
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-md);
  background: var(--color-bg-dark);
}

/* Phones: a plain stacked list; from sm the promises share one line with the
   deck's bullet between them (responsive.css) — stacked, a separator would
   sit in front of every item but the first */
.control-strip__list {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  color: var(--color-text-inverse);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-eyebrow);
  text-transform: uppercase;
}

/* The deck's bullet between the promises (shown from sm) */
.control-strip__list li + li::before {
  content: '\2022';
  display: none;
  margin-right: var(--space-3);
  color: var(--color-signal);
}

.control-strip__link {
  color: var(--color-signal);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-eyebrow);
  text-decoration: none;
  text-transform: uppercase;
}

.control-strip__link:hover {
  color: var(--color-signal);
  text-decoration: underline;
}

/* ---- 37. Resources page (website deck 10/5/26, slides 16, 17, 18, 23) ---
   Resource cards (.res-card): a label in green capitals, a title and a
   line of text on a grey card. Slide 16's library puts the executive
   guides on a large Midnight Blue card (--feature, lime label) beside four
   small cards, Events + product tours on the orange tint (--action);
   slide 18's four support cards reuse them, Guided onboarding's label in
   the text-safe orange (--onboarding) and Contact support on Midnight Blue
   (--dark). A library card is one link: the title's link covers the card.
   Feature pair: slide 17's featured book (Midnight Blue, title in
   capitals, orange link) beside the featured executive guide (brand tint,
   green link).
   FAQ grid: slide 23's four questions two by two — green question, answer,
   grey rule; the subscription question in the text-safe orange.
   CTA strip: slide 23's closing Midnight Blue band, a line of text beside
   the green button. */
.res-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}

.res-card {
  --res-label: var(--color-green-500);

  position: relative;
  display: grid;
  align-content: start;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-md);
  background: var(--color-bg-muted);
}

.res-card--action {
  --res-label: var(--color-action-text);

  background: var(--color-orange-50);
}

.res-card--onboarding {
  --res-label: var(--color-action-text);
}

.res-card--feature,
.res-card--dark {
  --res-label: var(--color-signal);

  background: var(--color-bg-dark);
}

.res-card--feature {
  align-content: center;
  gap: var(--space-4);
  padding: var(--space-8);
  border-radius: var(--radius-lg);
}

.res-card__label {
  color: var(--res-label);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
  letter-spacing: var(--letter-spacing-eyebrow);
  text-transform: uppercase;
}

.res-card__title {
  font-size: var(--font-size-md);
  line-height: 1.3;
}

.res-card__link {
  color: inherit;
  text-decoration: none;
}

/* The whole card is the link */
.res-card__link::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.res-card__link:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.res-card__link:focus-visible {
  outline: none;
}

.res-card:has(.res-card__link:focus-visible) {
  outline: 2px solid var(--color-focus, var(--color-primary));
  outline-offset: 2px;
}

.res-card__text {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.res-card--feature .res-card__title {
  font-size: var(--font-size-xl);
  line-height: 1.2;
}

.res-card--feature .res-card__title,
.res-card--dark .res-card__title {
  color: var(--color-text-inverse);
}

.res-card--feature .res-card__link:hover {
  color: var(--color-signal);
}

.res-card--feature .res-card__text,
.res-card--dark .res-card__text {
  color: var(--color-text-inverse);
}

.res-card--feature .res-card__text {
  font-size: var(--font-size-base);
}

/* Resources library (slide 16, final deck 10/6/26): labels 14pt Bold
   capitals (no tracking); small cards: title 12pt Bold, text 9pt Book;
   the feature card: title 18.75pt Bold, text 12pt Book */
.res-grid .res-card__label {
  font-size: var(--font-size-deck-14);
  letter-spacing: 0;
}

.res-grid .res-card__title {
  font-size: var(--font-size-deck-12);
}

.res-grid .res-card__text {
  font-size: 0.9rem; /* 9pt */
  line-height: 1.4;
}

.res-grid .res-card--feature .res-card__title {
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem); /* 22→30: 18.75pt */
}

.res-grid .res-card--feature .res-card__text {
  font-size: var(--font-size-deck-12);
}

.support-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}

.support-cards .res-card {
  padding: var(--space-6);
}

/* Support (slide 18, final deck 10/6/26): labels 12pt Bold capitals (no
   tracking), titles 14.25pt Bold, text 12pt Book */
.support-cards .res-card__label {
  font-size: var(--font-size-deck-12);
  letter-spacing: 0;
}

.support-cards .res-card__title {
  font-size: var(--font-size-deck-14-25); /* 14.25pt */
  line-height: 1.25;
}

.support-cards .res-card__text {
  font-size: var(--font-size-deck-12);
  line-height: 1.4;
}

.feature-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}

.feature-card {
  --feature-accent: var(--color-green-500);

  display: grid;
  align-content: start;
  gap: var(--space-4);
  padding: var(--space-7) var(--space-8);
  border-radius: var(--radius-lg); /* tinted: the fill is the edge */
  background: var(--color-brand-tint);
}

.feature-card--dark {
  --feature-accent: var(--color-orange-400);

  background: var(--color-bg-dark);
}

/* Slide 17 (final deck 10/6/26): labels and links 11.25pt Bold capitals
   (no tracking), titles 18pt Bold, text 12pt Book */
.feature-card__label {
  color: var(--color-green-500);
  font-size: 1.125rem; /* 11.25pt */
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
}

.feature-card--dark .feature-card__label {
  color: var(--color-signal);
}

.feature-card__title {
  max-width: 24ch;
  font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.8rem); /* 22→29: 18pt */
  line-height: 1.2;
}

.feature-card__title--caps {
  text-transform: uppercase;
}

.feature-card--dark .feature-card__title {
  color: var(--color-text-inverse);
}

.feature-card__text {
  color: var(--color-text-muted);
  font-size: var(--font-size-deck-12);
  line-height: 1.4;
}

.feature-card--dark .feature-card__text {
  color: var(--color-text-inverse-muted);
}

.feature-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  justify-self: start;
  margin-top: var(--space-2);
  color: var(--feature-accent);
  font-size: 1.125rem; /* 11.25pt */
  font-weight: var(--font-weight-bold);
  text-decoration: none;
  text-transform: uppercase;
}

.feature-card__link:hover {
  color: var(--feature-accent);
  text-decoration: underline;
}

.feature-card__link:hover .icon {
  transform: translateX(3px);
}

.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6) var(--space-8);
}

.faq-grid__item {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  padding-bottom: var(--space-6);
  border-bottom: var(--border-width) solid var(--color-border);
}

/* Slide 23 (final deck 10/6/26): questions 16pt Bold, answers 12pt Book;
   the closing strip 12.75pt Bold */
.faq-grid__item dt {
  color: var(--color-green-500);
  font-family: var(--font-family-heading);
  font-size: var(--font-size-deck-16);
  font-weight: var(--font-weight-bold);
  line-height: 1.25;
}

.faq-grid__item--action dt {
  color: var(--color-action-text);
}

.faq-grid__item dd {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-deck-12);
  line-height: 1.4;
}

/* Security and data (website deck 10/8/26 page 22A): no rules between the
   questions, questions 14.25pt Bold, answers 12pt Book */
.faq-grid--plain .faq-grid__item {
  padding-bottom: 0;
  border-bottom: 0;
}

.faq-grid--plain .faq-grid__item dt {
  font-size: var(--font-size-deck-14-25);
}

/* The closing line under a question grid (page 22A): 12pt Bold Midnight Blue */
.faq-grid__closing {
  max-width: none;
  margin-top: var(--space-9);
  color: var(--color-heading);
  font-size: var(--font-size-deck-12);
  font-weight: var(--font-weight-bold);
}

.faq-grid__closing a {
  color: inherit;
}

.cta-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4) var(--space-6);
  margin-top: var(--space-8);
  padding: var(--space-5) var(--space-6) var(--space-5) var(--space-7);
  border-radius: var(--radius-lg);
  background: var(--color-bg-dark);
}

.cta-strip__text {
  max-width: none;
  color: var(--color-text-inverse);
  font-size: var(--font-size-deck-12-75); /* 12.75pt */
  font-weight: var(--font-weight-bold);
}

/* ---- 38. Book page (book introduction deck, slide 1) ----------------------
   The featured book on white, as on the slide: text column left, cover right.
   Type follows the slide at the site's deck scale (1pt = 1.6px, as h1 28pt =
   44px): label 12pt, title 28pt, subtitle 17pt, byline 12pt, text and
   availability 13pt, button 12pt — all Apex New (Bold or Book as
   on the slide), in the slide's colors. At the client's request the label
   and the button keep the slide's Logo Green with a white button label
   (RULES.md §9.1, exceptions). Columns from lg are in responsive.css. */
.book-intro__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
}

.book-intro__label {
  color: var(--color-green-500);
  font-family: var(--font-family-heading);
  font-size: var(--font-size-deck-12); /* 12pt */
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
  text-transform: uppercase;
}

.book-intro__title {
  margin-top: var(--space-4);
  color: var(--color-slate-900);
  font-size: clamp(1.75rem, 1rem + 3vw, 2.8rem); /* 28→45: 28pt */
  font-weight: var(--font-weight-bold);
  line-height: 1.18;
  letter-spacing: 0; /* none on the slide */
  text-transform: uppercase;
}

.book-intro__title-line {
  display: block;
}

.book-intro__subtitle {
  margin-top: var(--space-2);
  color: var(--color-slate-900);
  font-family: var(--font-family-heading);
  font-size: clamp(1.25rem, 0.9rem + 1.4vw, 1.7rem); /* 20→27: 17pt */
  font-weight: var(--font-weight-regular);
  line-height: 1.3;
}

.book-intro__byline {
  margin-top: var(--space-5);
  color: var(--color-grey-700);
  font-family: var(--font-family-heading);
  font-size: var(--font-size-deck-12); /* 12pt */
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
}

.book-intro__text {
  margin-top: var(--space-7);
  color: var(--color-grey-700);
  font-size: var(--font-size-lead); /* 13pt */
  line-height: 1.35; /* the slide's 112% spacing */
}

.book-intro__text p {
  max-width: none;
}

.book-intro__text > * + * {
  margin-top: var(--space-4);
}

.book-intro__availability {
  max-width: none;
  margin-top: var(--space-4);
  color: var(--color-slate-900);
  font-size: var(--font-size-lead); /* 13pt */
  font-weight: var(--font-weight-bold);
  line-height: 1.35; /* the slide's 112% spacing */
}

.book-intro__buy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-top: var(--space-5);
}

/* The slide's button: Logo Green, white capitals, in the site's pill shape
   like every other button */
.book-intro__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-width: 16.625rem; /* 166pt, as on the slide */
  min-height: var(--control-height);
  padding: var(--space-2) var(--space-6);
  border-radius: var(--radius-pill);
  background: var(--color-green-500);
  color: var(--color-white);
  font-size: var(--font-size-deck-12); /* 12pt */
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color var(--duration-fast) var(--ease-out);
}

.book-intro__btn:hover {
  background: var(--color-green-700);
  color: var(--color-white);
}

.book-intro__btn:active {
  transform: translateY(1px);
}

/* Stacked: under the text, on its left edge. From lg it sits beside the text,
   centred on it (responsive.css). Rounded as site media (RULES.md §9.3). */
.book-intro__cover {
  width: 100%;
  max-width: 26rem;
  height: auto;
  justify-self: start;
  border-radius: var(--radius-lg);
}

/* ---- 39. Pre-demo discovery (website deck final 10/6/26, slides 26–34) ----
   The Operational Alignment Scorecard, one step at a time on white
   (pages/discovery.js). Type follows the slides at the site's deck scale
   (1pt = 1.6px, as the book page): eyebrows 12pt Bold Logo Green, the start
   title 31.5pt Bold, tagline 18.75pt Bold, lead 18pt; questions 17.25pt Bold,
   answers 12.75pt; step headings 25.5pt Bold, field labels 15.75pt Bold,
   field text 12pt; results: headline 25.5pt Bold, overall score 52.5pt Bold,
   category names 15pt Bold, percentages 14.25pt Bold, actions 12.75pt — all
   Apex New (Bold or Book as on the slides), in the slides' colors. Large
   sizes shrink on phones. Columns from sm / md / lg are in responsive.css. */
.discovery__step {
  scroll-margin-top: calc(var(--header-height) + var(--space-5));
}

.discovery__eyebrow {
  max-width: none;
  color: var(--color-green-500);
  font-family: var(--font-family-heading);
  font-size: var(--font-size-deck-12); /* 12pt */
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
  letter-spacing: 0; /* none on the slides */
  text-transform: uppercase;
}

/* "PURSUITS     SCREEN 1 OF 5": the slide's gap between the two */
.discovery__screen {
  margin-left: var(--space-5);
  white-space: nowrap;
}

/* Slide 26: start here */
.discovery__title {
  margin-top: var(--space-4);
  color: var(--color-slate-900);
  font-size: clamp(2rem, 1.2rem + 3vw, 3.15rem); /* 32→50: 31.5pt */
  font-weight: var(--font-weight-bold);
  line-height: 1.15;
  letter-spacing: 0;
}

.discovery__tagline {
  max-width: none;
  margin-top: var(--space-5);
  color: var(--color-green-500);
  font-family: var(--font-family-heading);
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem); /* 22→30: 18.75pt */
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
}

.discovery__lead {
  max-width: 60rem;
  margin-top: var(--space-5);
  color: var(--color-grey-700);
  font-size: clamp(1.25rem, 1rem + 1.2vw, 1.8rem); /* 20→29: 18pt */
  line-height: 1.4;
}

.discovery__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-7);
  margin-top: var(--space-8);
}

.discovery__note {
  max-width: none;
  margin-top: var(--space-9);
  color: var(--color-grey-700);
  font-size: var(--font-size-deck-14-25); /* 14.25pt */
  line-height: 1.4;
}

/* Slides 27–31: two questions per screen */
.discovery__questions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8) var(--space-9);
  margin-top: var(--space-5);
}

/* A question: its title, four answers and (when shown) the error. Spacing
   is margins, not gaps, so the same rules work when the options join the
   two-column subgrid from lg (responsive.css) */
.discovery-question {
  min-width: 0;
}

.discovery-question__title {
  max-width: none;
  color: var(--color-slate-900);
  font-family: var(--font-family-heading);
  font-size: clamp(1.25rem, 1rem + 1.2vw, 1.725rem); /* 20→28: 17.25pt */
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
}

/* An answer: a white card with a radio circle, as on the slide; the chosen
   one takes the brand tint and a Logo Green edge */
.discovery-option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 4.75rem; /* the slide's 0.65in card */
  margin-top: var(--space-2);
  padding: var(--space-3) var(--space-5) var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  cursor: pointer;
  transition:
    border-color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out);
}

.discovery-option:first-child {
  margin-top: var(--space-5); /* under the question */
}

.discovery-option:hover {
  border-color: var(--color-border-brand);
}

.discovery-option:has(:checked) {
  border-color: var(--color-green-500);
  background: var(--color-brand-tint);
}

.discovery-option:has(:focus-visible) {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.discovery-option__input {
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
  border: 1.5px solid var(--color-grey-700);
  border-radius: 50%;
  background: var(--color-surface);
  appearance: none;
  cursor: pointer;
}

.discovery-option__input:checked {
  border-color: var(--color-green-500);
  background: var(--color-green-500);
  box-shadow: inset 0 0 0 3px var(--color-surface);
}

.discovery-option__input:focus-visible {
  outline: none; /* the card carries the focus ring */
}

.discovery-option__text {
  color: var(--color-slate-900);
  font-size: var(--font-size-deck-12-75); /* 12.75pt */
  line-height: 1.3;
}

.discovery-question.is-invalid .discovery-option {
  border-color: var(--color-danger);
}

.discovery-question__error {
  margin-top: var(--space-3);
}

/* Progress: one fifth per screen, as on the slides */
.discovery__progress {
  height: 4px;
  margin-top: var(--space-7);
  border-radius: var(--radius-pill);
  background: var(--color-grey-200);
  overflow: hidden;
}

.discovery__progress-bar {
  display: block;
  height: 100%;
  background: var(--color-green-500);
}

.discovery__progress-bar--1 {
  width: 20%;
}
.discovery__progress-bar--2 {
  width: 40%;
}
.discovery__progress-bar--3 {
  width: 60%;
}
.discovery__progress-bar--4 {
  width: 80%;
}
.discovery__progress-bar--5 {
  width: 100%;
}

/* Back on the left; skip and Next / Continue on the right. Every step
   leaves the same room above it; right under the progress bar it sits
   closer, as on the slides. Aligned to the bottom row, so when "Skip
   optional questions" wraps above Continue on phones, Back stays level with
   Continue. */
.discovery__nav {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-9);
}

.discovery__progress + .discovery__nav {
  margin-top: var(--space-5);
}

.discovery__nav-end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2) var(--space-6);
}

.discovery__back,
.discovery__skip {
  min-height: var(--control-height-lg); /* level with the 48px buttons */
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-grey-700);
  font-size: var(--font-size-deck-12-75); /* Back: 12.75pt */
  line-height: 1.2;
  cursor: pointer;
}

.discovery__skip {
  font-size: 1.125rem; /* 11.25pt */
}

.discovery__back:hover,
.discovery__skip:hover {
  color: var(--color-slate-900);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.discovery__next {
  min-width: 10rem;
}

/* Slides 32 and 33: optional context and contact */
.discovery__heading {
  margin-top: var(--space-4);
  color: var(--color-slate-900);
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.55rem); /* 28→41: 25.5pt */
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
}

.discovery__sub {
  max-width: none;
  margin-top: var(--space-3);
  color: var(--color-grey-700);
  font-size: var(--font-size-deck-15); /* 15pt */
  line-height: 1.4;
}

.discovery__sub--sm {
  font-size: var(--font-size-deck-14-25); /* 14.25pt */
}

.discovery__fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6) var(--space-8);
  margin-top: var(--space-7);
}

.discovery__fields + .discovery__fields {
  margin-top: var(--space-6);
}

.discovery__label {
  padding: 0;
  color: var(--color-slate-900);
  font-family: var(--font-family-heading);
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.575rem); /* 20→25: 15.75pt */
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
}

.discovery__control {
  min-height: var(--control-height-lg);
  font-size: var(--font-size-deck-12); /* 12pt */
}

/* "Who should join? What is your timing?": two controls under one label */
.discovery__group {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.discovery__group-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.discovery__checks {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-7);
}

.discovery-check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  color: var(--color-grey-700);
  font-size: var(--font-size-deck-12-75); /* 12.75pt */
  line-height: 1.35;
  cursor: pointer;
}

.discovery-check__input {
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  margin: 0.3rem 0 0; /* centred on the first line: (1.35 × 20.4px − 18px) / 2 */
  accent-color: var(--color-green-500);
}

.discovery__alert {
  margin-top: var(--space-6);
}

/* Slide 34: results — the headline, category scores and the two priority
   actions on the left, the overall score card on the right from lg (under
   the headline on phones) */
.discovery-result {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    'summary'
    'score'
    'categories'
    'priorities';
  gap: var(--space-8);
}

.discovery-result__summary {
  grid-area: summary;
}

.discovery-result__tier {
  max-width: none;
  margin-top: var(--space-4);
  color: var(--color-slate-900);
  font-family: var(--font-family-heading);
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.55rem); /* 28→41: 25.5pt */
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
}

.discovery-result__text {
  max-width: 50rem;
  margin-top: var(--space-4);
  color: var(--color-grey-700);
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.65rem); /* 20→26: 16.5pt */
  line-height: 1.4;
}

.discovery-result__categories {
  display: grid;
  grid-area: categories;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* A category: name, then its percentage */
.discovery-category {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 5rem;
  align-items: baseline;
  gap: var(--space-4);
}

.discovery-category__name {
  color: var(--color-slate-900);
  font-family: var(--font-family-heading);
  font-size: var(--font-size-deck-15); /* 15pt */
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
}

.discovery-category__score {
  color: var(--color-green-500);
  font-family: var(--font-family-heading);
  font-size: var(--font-size-deck-14-25); /* 14.25pt */
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
  font-variant-numeric: lining-nums tabular-nums;
}

/* The two priority actions: numbered Logo Green badges (Deep Midnight
   number, RULES.md §9.1), category name in Bold, the action in Book */
.discovery-priorities {
  grid-area: priorities;
}

.discovery-priorities__title {
  color: var(--color-slate-900);
  font-size: clamp(1.5rem, 1.2rem + 0.8vw, 1.725rem); /* 24→28: 17.25pt */
  line-height: 1.3;
}

.discovery-priorities__list {
  display: grid;
  gap: var(--space-5);
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: priority;
}

.discovery-priority {
  position: relative;
  padding-left: calc(var(--badge-size) + var(--space-4));
  counter-increment: priority;
}

.discovery-priority::before {
  content: counter(priority);
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--badge-size);
  height: var(--badge-size);
  border-radius: 50%;
  background: var(--color-green-500);
  color: var(--color-on-brand);
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

.discovery-priority__name {
  display: block;
  color: var(--color-slate-900);
  font-family: var(--font-family-heading);
  font-size: var(--font-size-deck-15); /* 15pt */
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
}

.discovery-priority__text {
  max-width: none;
  margin-top: var(--space-1);
  color: var(--color-grey-700);
  font-size: var(--font-size-deck-12-75); /* 12.75pt */
  line-height: 1.35;
}

/* The overall score card: brand tint, no outline (RULES.md §9.3) */
.discovery-score {
  grid-area: score;
  align-self: start;
  padding: var(--space-7) var(--space-6);
  border-radius: var(--radius-md);
  background: var(--color-brand-tint);
}

.discovery-score__value {
  color: var(--color-green-500);
  font-family: var(--font-family-heading);
  font-size: clamp(3.5rem, 2.5rem + 4vw, 5.25rem); /* 56→84: 52.5pt */
  font-weight: var(--font-weight-bold);
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
}

.discovery-score__label {
  margin-top: var(--space-3);
  color: var(--color-slate-900);
  font-family: var(--font-family-heading);
  font-size: clamp(1.25rem, 1rem + 1.2vw, 1.725rem); /* 20→28: 17.25pt */
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
}

.discovery-score__points {
  margin-top: var(--space-2);
  color: var(--color-grey-700);
  font-size: var(--font-size-deck-12-75); /* 12.75pt */
  line-height: 1.3;
}

/* Demo tailored to the chosen challenge (or the first priority) */
.discovery-score__focus {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: var(--border-width) solid var(--color-border-brand);
  color: var(--color-slate-900);
  font-size: var(--font-size-deck-12); /* 12pt */
  line-height: 1.35;
}

.discovery-score__focus-label {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--color-grey-700);
  font-weight: var(--font-weight-bold);
}

.discovery-score__btn {
  width: 100%;
  margin-top: var(--space-6);
}

.discovery-score__note {
  margin-top: var(--space-5);
  color: var(--color-grey-700);
  font-size: var(--font-size-deck-13); /* 13.5pt */
  line-height: 1.35;
}

.discovery-result__disclaimer {
  max-width: none;
  margin-top: var(--space-9);
  color: var(--color-grey-700);
  font-size: 1.125rem; /* 11.25pt */
  line-height: 1.4;
}

/* ---- 40. Client proof (website deck 10/8/26, page 06A) --------------------
   Home "What clients say": two columns, Before RM ONE beside What clients
   gained (numbered as on the slide), then the client quote, its attribution
   and the legacy-platform disclaimer. Plain text on the section — no cards.
   Type follows the slide at the deck scale (1pt = 1.6px): column titles
   15pt Bold Logo Green, item titles 12pt Bold Midnight Blue, item text
   10.5pt Book (gains 9.75pt), quote 15.75pt Bold, attribution 10.5pt Bold
   Logo Green, disclaimer 9pt Book. Columns from md are in responsive.css. */
.client-proof {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8) var(--space-10);
}

.client-proof__title {
  color: var(--color-green-500);
  font-size: var(--font-size-deck-15);
  font-weight: var(--font-weight-bold);
  line-height: 1.25;
}

.client-proof__list {
  display: grid;
  gap: var(--space-4);
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}

.client-proof__item-title {
  color: var(--color-heading);
  font-size: var(--font-size-deck-12);
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
}

/* The slide's plain number before each gain; a wrapped title hangs clear of it */
.client-proof__item-title--numbered {
  display: flex;
  gap: var(--space-2);
}

.client-proof__text {
  margin-top: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--font-size-deck-10);
  line-height: 1.4;
}

.client-proof__quote {
  margin: var(--space-9) 0 0;
  padding-top: var(--space-7);
  border-top: var(--border-width) solid var(--color-border);
}

.client-proof__quote p {
  max-width: 62ch;
  color: var(--color-heading);
  font-family: var(--font-family-heading);
  font-size: var(--font-size-deck-15-75);
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
}

.client-proof__cite {
  margin-top: var(--space-3);
  color: var(--color-green-500);
  font-size: var(--font-size-deck-10);
  font-style: normal;
  font-weight: var(--font-weight-bold);
}

.client-proof__note {
  max-width: none;
  margin-top: var(--space-5);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm); /* 9pt */
  line-height: 1.4;
}

/* ---- 41. Brief grid (website deck 10/8/26, page 23A) ----------------------
   Platform 30-day value pilot: three titled text blocks. Each sits under the
   same thin rule with its title on one line across the row, and its text
   fills its own column (no paragraph measure, so the column edges line up).
   One spacing rhythm throughout: paragraphs and list items are the same
   distance apart. As on the slide: two a row from md with the fees block
   (--wide) across both, at every width above that; stacked on phones.
   Type as on the slide: titles 15pt Bold Logo Green, text 12pt Book; the
   measure labels (Capacity, Forecast, Action) in Bold Midnight Blue. */
.brief-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
}

.brief-grid__item {
  padding-top: var(--space-5);
  border-top: var(--border-width) solid var(--color-border);
}

.brief-grid__title {
  color: var(--color-green-500);
  font-size: var(--font-size-deck-15);
  font-weight: var(--font-weight-bold);
  line-height: 1.25;
}

.brief-grid__text,
.brief-grid__list {
  max-width: none;
  margin-top: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--font-size-deck-12);
  line-height: 1.45;
}

.brief-grid__list {
  display: grid;
  gap: var(--space-3);
  padding: 0;
  list-style: none;
}

.brief-grid__label {
  color: var(--color-heading);
  font-weight: var(--font-weight-bold);
}

/* ---- 42. Why RM ONE (website deck 10/8/26, page 12A) ----------------------
   Platform closing chapter: the standard section title ("Your Profit
   Partner", h2), four numbered reasons, then the green approval line, with
   the photo and brand rings beside. Sized to match the site's other list
   headings (overview cards, FAQ questions), not the slide's larger type:
   number and title 14.25pt Bold, text 12pt Book, approval line 12pt Bold.
   Each number shares its title's baseline in its own column; the text sits
   under the title, so every line of a reason starts on one left edge. */
.reasons {
  display: grid;
  gap: var(--space-6);
  margin: var(--space-7) 0 0;
  padding: 0;
  list-style: none;
}

.reasons__item {
  display: grid;
  grid-template-columns: calc(var(--font-size-deck-14-25) * 1.6) minmax(0, 1fr);
  grid-template-areas:
    'num title'
    '. text';
  align-items: baseline;
  column-gap: var(--space-3);
}

.reasons__num {
  grid-area: num;
  color: var(--color-green-500);
  font-family: var(--font-family-heading);
  font-size: var(--font-size-deck-14-25);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
}

.reasons__title {
  grid-area: title;
  font-size: var(--font-size-deck-14-25);
  font-weight: var(--font-weight-bold);
  line-height: 1.25;
}

.reasons__text {
  grid-area: text;
  margin-top: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--font-size-deck-12);
  line-height: 1.4;
}

.split__content > .why__note {
  margin-top: var(--space-7);
  color: var(--color-green-500);
  font-size: var(--font-size-deck-12);
  font-weight: var(--font-weight-bold);
}

/* ---- 43. Product tour dialog (components/tour-dialog.js) -------------------
   "Take a product tour" opens the 60-second tour in a native modal dialog on
   Midnight Blue: title and close, the video, the chapter list beside it
   (stacked below on phones, where the dialog fills the screen and the video
   stays pinned while the chapters scroll), and Get a demo underneath.
   The chapter bar under the video is the brand's segmented bar doing a job:
   one segment per chapter, sized to its length — watched Logo Green, playing
   a lime fill (--tour-fill, set by the script), still to come slate. Lime
   only ever sits on Midnight Blue here. The playing chapter in the list is a
   Deep Midnight inset with a lime time. Opening fades the panel in; that is
   the only motion, and reduced motion removes it. */
.is-tour-open {
  overflow: hidden;
}

.tour-dialog {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--color-bg-dark);
  color: var(--color-text-inverse);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.tour-dialog::backdrop {
  background: var(--color-slate-950);
  background: color-mix(in srgb, var(--color-slate-950) 88%, transparent);
}

.tour-dialog[open] {
  animation: tour-in var(--duration-base) var(--ease-out);
}

@keyframes tour-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

.tour-dialog__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    'top'
    'chapters'
    'foot';
}

.tour-dialog__head {
  grid-area: head;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-5) var(--space-4);
}

.tour-dialog__title {
  color: var(--color-text-inverse);
  font-size: var(--font-size-deck-15);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
}

.tour-dialog__note {
  margin-top: var(--space-1);
  color: var(--color-text-inverse-muted);
  font-size: var(--font-size-sm);
}

.tour-dialog__close {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--control-height);
  height: var(--control-height);
  margin: calc(var(--space-2) * -1) calc(var(--space-2) * -1) 0 0;
  padding: 0;
  border: var(--border-width) solid var(--color-border-on-dark);
  border-radius: 50%;
  background: transparent;
  color: var(--color-text-inverse);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out);
}

.tour-dialog__close:hover {
  background: var(--color-slate-950);
}

/* Phones: the title, close button and video stay in view while the chapter
   list scrolls under them (from lg the wrapper steps aside: display: contents) */
.tour-dialog__top {
  grid-area: top;
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--color-bg-dark);
}

.tour-dialog__stage {
  grid-area: stage;
  padding: 0 var(--space-5) var(--space-3);
}

.tour-dialog__video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  background: var(--color-slate-950);
}

/* Chapter bar: segments with a tall hit area around a 6px bar */
.tour-track {
  display: flex;
  gap: 3px;
  margin-top: var(--space-2);
}

.tour-track__seg {
  --tour-fill: 0;

  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 22px;
  cursor: pointer;
}

.tour-track__seg::before,
.tour-track__fill {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 8px;
  height: 6px;
}

.tour-track__seg::before {
  background: var(--color-track-on-dark);
  transition: background-color var(--duration-fast) var(--ease-out);
}

.tour-track__seg:hover::before {
  background: var(--color-text-inverse-muted);
}

.tour-track__seg.is-played::before {
  background: var(--color-green-500);
}

.tour-track__fill {
  background: var(--color-signal);
  transform: scaleX(var(--tour-fill));
  transform-origin: left center;
  transition: transform 260ms linear;
}

.tour-track__seg.is-played .tour-track__fill {
  visibility: hidden;
}

.tour-dialog__chapters {
  grid-area: chapters;
  padding: var(--space-2) var(--space-5) var(--space-5);
}

.tour-dialog__chapters-title {
  margin-bottom: var(--space-2);
  color: var(--color-text-inverse-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
}

.tour-chapters {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tour-chapter {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  column-gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-inverse);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.tour-chapter:hover {
  background: var(--color-slate-950);
}

.tour-chapter[aria-current='true'] {
  background: var(--color-slate-950);
}

.tour-chapter__time {
  grid-row: span 2;
  padding-top: 1px;
  color: var(--color-text-inverse-muted);
  font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums;
}

.tour-chapter[aria-current='true'] .tour-chapter__time {
  color: var(--color-signal);
  font-weight: var(--font-weight-bold);
}

.tour-chapter__name {
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
}

.tour-chapter__text {
  color: var(--color-text-inverse-muted);
  font-size: var(--font-size-sm);
  line-height: 1.35;
}

.tour-dialog__foot {
  grid-area: foot;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
  padding: var(--space-4) var(--space-5) var(--space-5);
  border-top: var(--border-width) solid var(--color-border-on-dark);
}

.tour-dialog__next {
  max-width: none;
  font-family: var(--font-family-heading);
  font-size: var(--font-size-deck-12);
  font-weight: var(--font-weight-bold);
}