/* Cortex section. Fonts: display stack expects ABC Arizona Flare
   webfont files (commercial licence) to be added via @font-face separately;
   body uses IBM Plex Sans from Google Fonts (imported below).

   Scoped to the block, never <body>: the theme adds each page's slug to the
   body class (wp/index.php body_class filter), so a page with the slug
   "cortex" carries body.cortex. Every selector that starts at the block is
   written .cortex:where(:not(body)): the same specificity as .cortex (the
   :where() adds none), so the cascade on Home and What is unchanged, but
   <body> can never be styled as a Cortex block. cortex.js does the same. */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600&display=swap');

.cortex:where(:not(body)) {
  --cortex-lime: #BFFC00;
  --cortex-black: #000;
  --cortex-white: #fff;
  --cortex-blue: #2B00FF;
  --cortex-grey: #8a8a8a;
  --cortex-font-display: 'ABC Arizona Flare', 'Arizona Flare', Georgia, 'Times New Roman', serif;
  --cortex-font-body: 'IBM Plex Sans', -apple-system, 'Segoe UI', sans-serif;
  --cortex-ink: #fff;
  /* Labels (decision 3, 11 Nov 2026): the live computed spec on Home, What
     and the Cortex page. IBM Plex Sans Light, --fs-base (16.66px at 1440,
     14.98px at 390) on 1.5 (24.99 / 22.47), 5% tracking, caps. */
  --cortex-label-font: var(--font-body);
  --cortex-label-size: var(--fs-base);
  --cortex-label-weight: 300;
  --cortex-label-leading: 1.5;
  --cortex-label-tracking: var(--font-spaced);
  /* Chamfers (decision 18, 11 Nov 2026, replacing decision 4): the
     shipped cuts by role, 16px on cards (the carousel cards, the Cortex
     page's symptom and case cards) and 14px on panels (the full-width
     outcome panel, the root cause panel). Figma's 12px is withdrawn. Each
     panel is two clip-path octagons (Chamfered panel, below). */
  --cortex-cut-card: 16px;
  --cortex-cut-panel: 14px;
  /* Hairlines (decision 6, 11 Nov 2026): separators and chamfer borders
     are 1px everywhere. A 45-degree diagonal between two octagons cut c
     and c' (the inner one inset by the border b) is (2b + c' - c) / sqrt 2
     thick, so cutting the inner frame 1px less (c' = c - b) drew the
     diagonals at 0.71px against 1px straight edges. Cutting it
     b * (2 - sqrt 2) = 0.5858px less draws them at 1px. */
  --cortex-hairline: 1px;
  --cortex-hairline-cut: calc(var(--cortex-hairline) * 0.5858);
  /* Lime at 55% (Figma's panel outlines, rules and tree on the Cortex page),
     as the solid colour it makes on black, so lines that cross a panel
     edge or each other don't double up. */
  --cortex-lime-55: #698B00;
  background: var(--cortex-black);
  background-color: var(--cortex-black);
  background-image: none;
  color: var(--cortex-white);
  font-family: var(--cortex-font-body);
  overflow: hidden;
}
/* Block guard: the block carries id="cortex", which also matches the
   theme's legacy section rules (light gradient bg, 9rem/6rem section
   padding on What). Outrank them all here so spacing and background
   live inside the block by design. Doubles as the no-JS fallback. */
#cortex.cortex {
  background: var(--cortex-black);
  background-color: var(--cortex-black);
  background-image: none;
  padding-top: 0;
  padding-bottom: 0;
}
/* NOTE: no viewport-unit breakout. Mobile browsers recalc vw units as
   URL bars show/hide, causing thrash on real devices. Full-bleed is done
   by the measured JS pin in cortex.js — identical on Home + What. */
body.home .cortex {
  width: auto;
  max-width: none;
}
/* Keep the outer blue divider on white on both pages. */
body.home #cortex-outer {
  background: #fff;
  background-color: #fff;
  background-image: none;
}
body.what #cortex-outer {
  background: #fff;
  background-color: #fff;
  background-image: none;
}
/* The divider preceding the gradient stays full-bleed white. */
#cortex-outer > .x-row:first-child {
  background: #fff;
  background-color: #fff;
  background-image: none;
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
#cortex-outer > .x-row:first-child > .x-row-inner {
  width: 88%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
/* Only the inner Cortex block fades. Its upper boundary must clear the
   header before it darkens; the preceding blue divider stays on white. */
#cortex.cortex.cortex-fade-zone {
  background: #fff;
  transition: background-color 900ms ease;
}
#cortex.cortex.cortex-fade-zone.cortex-fade-black {
  background-color: #000;
}
#cortex.cortex.cortex-fade-zone.cortex-fade-instant {
  transition: none;
}
/* Hidden by opacity only, never visibility: content that is
   visibility:hidden leaves the tab order and the accessibility tree, so
   keyboard and screen-reader users could not reach the block until it had
   been scrolled into view. Opacity keeps it reachable; cortex.js reveals
   the block at once when focus enters it. pointer-events stops clicks on
   content that can't be seen yet. */
.cortex-fade-zone:not(.cortex-fade-ready) > .cortex-hero,
.cortex-fade-zone:not(.cortex-fade-ready) > .cortex-more {
  opacity: 0;
  pointer-events: none;
}
.cortex-fade-zone > .cortex-hero,
.cortex-fade-zone > .cortex-more {
  transition: opacity 700ms ease;
}
/* The artwork has an opaque black canvas. Reveal it independently, once
   the surrounding background is nearly black (cortex.js: 550ms into the
   ground's fade). Fading in (decision 82, 12 Nov 2026): 400ms, ease-in-out,
   so its black edge stays within about 2 levels of the ground as it comes
   in. Fading out (the block turning white on the way back up) keeps 600ms. */
.cortex-fade-zone .cortex-visual {
  transition: opacity 600ms ease;
}
.cortex-fade-zone.cortex-visual-ready .cortex-visual {
  transition: opacity 400ms cubic-bezier(0.42, 0, 0.58, 1);
}
.cortex-fade-zone:not(.cortex-visual-ready) .cortex-visual {
  opacity: 0;
}
/* Focus inside the block: shown at once, no fade (cortex.js). */
#cortex.cortex.cortex-fade-zone.cortex-fade-focus,
.cortex-fade-zone.cortex-fade-focus > .cortex-hero,
.cortex-fade-zone.cortex-fade-focus > .cortex-more,
.cortex-fade-zone.cortex-fade-focus .cortex-visual {
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  #cortex.cortex.cortex-fade-zone,
  .cortex-fade-zone > .cortex-hero,
  .cortex-fade-zone > .cortex-more,
  .cortex-fade-zone .cortex-visual,
  .cortex-fade-zone.cortex-visual-ready .cortex-visual {
    transition: none;
  }
}

/* Neutralise theme button/heading styles inside the section. */
.cortex:where(:not(body)) button,
.cortex:where(:not(body)) h2,
.cortex:where(:not(body)) h3,
.cortex:where(:not(body)) h4,
.cortex:where(:not(body)) p,
.cortex:where(:not(body)) blockquote,
.cortex:where(:not(body)) cite {
  background-image: none;
  box-shadow: none;
  text-shadow: none;
}
.cortex:where(:not(body)) h2,
.cortex:where(:not(body)) h3,
.cortex:where(:not(body)) .cortex-lede,
.cortex:where(:not(body)) .cortex-slide-body h3,
.cortex:where(:not(body)) .cortex-slide-body h4,
.cortex:where(:not(body)) .cortex-slide-copy,
.cortex:where(:not(body)) .cortex-outcome h3,
.cortex:where(:not(body)) .cortex-outcome p {
  color: var(--cortex-white);
}

/* Guard against horizontal scroll from the edge-to-edge breakout
   (clip, not hidden, so sticky headers keep working). */
body:has(.cortex) {
  overflow-x: clip;
}

/* Hide the superseded Cortex headline/outro rows on Home (old headline +
   "instant advantage" rows around the new block). The divider row (e2-e40)
   stays visible. NOTE: uses Cornerstone generated classes, which number
   Home's elements in document order (no IDs are stored: proven on Local,
   12 Nov 2026, harness tests/apply-13/renumber-probe.php). Adding or
   deleting any element before or among these rows renumbers them: with
   the first of them deleted, e2-e43 became the row holding the Cortex 2026
   block, and this rule would hide it. So never delete these rows while this
   rule is here. The permanent fix is one step: upload cortex.css without
   this rule, then delete the two rows in Cornerstone (the rows show for
   the minutes in between). A re-save with no structural change keeps the
   numbers. */
.home .x-row.e2-e43,
.home .x-row.e2-e49 {
  display: none !important;
}

/* ---------- Hero (collapsed state) ---------- */
.cortex:where(:not(body)) .cortex-hero {
  text-align: center;
  padding: 8rem 1.5rem;
}
#cortex.cortex .cortex-star {
  display: block;
  width: 56px;
  height: 56px;
  margin: 0 auto 2rem;
}
.cortex:where(:not(body)) .cortex-star img,
.cortex:where(:not(body)) .cortex-star svg {
  display: block;
  width: 100%;
  height: auto;
}
.cortex:where(:not(body)) .cortex-headline {
  font-family: var(--cortex-font-display);
  font-weight: 300;
  font-size: clamp(2rem, 7vw, 53px);
  line-height: 1.19; /* 63px at 53px per Figma */
  letter-spacing: 0;
  text-align: center;
  text-transform: uppercase;
  color: var(--cortex-ink, #fff); /* always white against the black content area */
  max-width: 720px; /* fixed measure => identical breaks on every page */
  margin: 0 auto 2.5rem;
}
.cortex:where(:not(body)) .cortex-headline .or {
  display: block;
  font-size: clamp(1.5rem, 4.4vw, 33px);
  line-height: 1.6; /* 53px at 33px per Figma */
  letter-spacing: 0;
  margin: 0.2em 0;
}
/* Extra headline breaks: on everywhere except Home desktop, matching
   the mobile Figma frames (7 lines on both pages at 390px). */
.cortex:where(:not(body)) .cortex-headline .wb {
  display: block;
}
/* Reuses the theme .vertical-divider, recolored lime. */
.cortex:where(:not(body)) .vertical-divider {
  background-image: linear-gradient(180deg, transparent, var(--cortex-lime));
  width: var(--cortex-hairline);
  height: 90px;
  margin-block: 0;
  margin-inline: auto;
}
.cortex:where(:not(body)) .cortex-visual {
  margin: 0 -1.5rem;
}
.cortex:where(:not(body)) .cortex-visual img {
  display: block;
  width: 100%;
  height: auto;
}
.cortex:where(:not(body)) .cortex-kicker {
  font-family: var(--cortex-font-body);
  font-weight: 400;
  font-size: 22px;
  line-height: 28px;
  letter-spacing: 0;
  text-align: center;
  text-transform: uppercase;
  margin: 1.5rem 0;
}
.cortex:where(:not(body))[data-open="true"] .cortex-hero {
  padding-bottom: 0; /* expanded: kicker sits tight to lede below */
}
.cortex:where(:not(body))[data-open="true"] .cortex-kicker {
  margin-bottom: 1.3rem;
}
/* Single kicker: white at rest, lime once expanded (Figma: Plex Sans
   Regular 22px/28px, 0 tracking, centered, #BFFC00). */
.cortex:where(:not(body))[data-open="true"] .cortex-kicker {
  color: #BFFC00;
}
.cortex:where(:not(body)) .cortex-btn[hidden] {
  display: none;
}
.cortex:where(:not(body)) .cortex-lede {
  max-width: 34rem;
  margin: 0 auto 2rem;
  font-family: var(--cortex-font-body);
  font-weight: 300;
  font-size: 17px;
  line-height: 25px;
  letter-spacing: 0;
  text-align: center;
  color: var(--cortex-ink, #fff); /* always white against the black content area */
}
.cortex:where(:not(body)) .cortex-btn {
  display: inline-block;
  border: 0;
  cursor: pointer;
  background: var(--cortex-lime);
  color: var(--cortex-black);
  font-family: var(--cortex-font-display);
  font-weight: 400;
  font-size: 16px;
  line-height: 21px;
  letter-spacing: 0;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  padding: 1rem 3rem;
}
.cortex:where(:not(body)) .cortex-btn.blue {
  background: var(--cortex-blue);
  color: var(--cortex-white);
}

/* ---------- Expanded area ---------- */
.cortex:where(:not(body)) .cortex-more[hidden] {
  display: none;
}
.cortex:where(:not(body)) .cortex-more {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-bottom: 8rem;
}
/* Homepage mobile carries extra wrapper spacing: trim to match What. */
body.home .cortex .cortex-more {
  padding-bottom: 4rem;
}
.cortex:where(:not(body)) .cortex-tabs {
  display: flex;
  justify-content: space-between; /* first/last tabs flush with baseline ends */
  gap: clamp(2rem, 6vw, 5rem);
  width: 100%; /* full width on mobile; shrink-wrapped on desktop */
  max-width: 100%;
  margin: 0 auto 2.5rem;
  padding: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}
.cortex:where(:not(body)) .cortex-tab {
  position: relative;
  background: none;
  border: 0;
  cursor: pointer;
  /* Not selected (decision 19): white at 55%, the same tone as the dimmed
     cards' numbers and titles below (#8C8C8C on black, 6.25:1; was the
     --cortex-grey #8A8A8A, 6.08:1). */
  color: rgb(255 255 255 / 0.55);
  font-family: var(--cortex-font-display);
  font-weight: 300;
  font-size: 17px;
  line-height: 22px;
  letter-spacing: 0;
  text-transform: uppercase;
  padding: 0.4rem 0.2rem 1rem;
}
.cortex:where(:not(body)) .cortex-tab .num {
  display: block;
  font-family: var(--cortex-font-body);
  font-weight: var(--fw-base, 400);
  font-size: 15px;
  line-height: 25px;
  letter-spacing: 0.03em;
  margin: 0 0 0.35rem;
  color: inherit;
}
.cortex:where(:not(body)) .cortex-tab::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: transparent;
}
.cortex:where(:not(body)) .cortex-tab[aria-selected="true"] {
  color: var(--cortex-lime);
}
.cortex:where(:not(body)) .cortex-tab[aria-selected="true"]::after {
  background: var(--cortex-lime);
}
.cortex:where(:not(body)) .cortex-tab:hover {
  color: var(--cortex-lime); /* same as active, underline stays off */
}
.cortex:where(:not(body)) .cortex-tab:hover,
.cortex:where(:not(body)) .cortex-tab:focus-visible,
.cortex:where(:not(body)) .cortex-btn:hover,
.cortex:where(:not(body)) .cortex-btn:focus-visible,
.cortex:where(:not(body)) .cortex-expand:hover,
.cortex:where(:not(body)) .cortex-expand:focus-visible {
  background: none;
  background-color: transparent;
  background-image: none;
  border: 0;
  text-shadow: none;
}
.cortex:where(:not(body)) .navigation button:hover,
.cortex:where(:not(body)) .navigation button:focus-visible {
  background-color: transparent;
  background-image: none;
  border: 0;
  text-shadow: none;
}
.cortex:where(:not(body)) .cortex-btn:hover,
.cortex:where(:not(body)) .cortex-btn:focus-visible {
  background-color: var(--cortex-lime);
  color: var(--cortex-black);
}
/* Same typography, proportions and animated rollover as the theme
   buttons, using the supplied lime animation for Cortex. */
#cortex.cortex .cortex-btn {
  transition: none;
  font-family: var(--font-heading);
  font-weight: var(--fw-base);
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: var(--font-spaced);
  padding: 1.2em 3em;
  background: var(--cortex-lime);
  color: #000;
}
#cortex.cortex .cortex-btn:hover,
#cortex.cortex .cortex-btn:focus-visible {
  background: var(--cortex-lime) url('../assets/Cruxy-Abstract-Button-cortex.webp') scroll no-repeat 50% 50% / cover;
  color: #000;
  text-shadow: none;
}
#cortex.cortex .cortex-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}
/* Keyboard focus (D4, decision 23, 11 Nov 2026): the other controls (tabs,
   arrows, the expand toggle) had only the browser's default ring, 1px blue,
   which barely shows on black. They get a 2px lime ring, 4px clear of the
   control; the expand toggle's box is already wider than its drawn circle,
   so its ring sits on the box. The round controls get a round ring. The
   button keeps its designed white ring. */
.cortex:where(:not(body)) :is(.cortex-tab, .cortex-expand, .navigation button):focus-visible {
  outline: 2px solid var(--cortex-lime);
  outline-offset: 4px;
}
.cortex:where(:not(body)) .cortex-expand {
  border-radius: 50%;
}
.cortex:where(:not(body)) button.cortex-expand:focus-visible {
  outline-offset: 0;
}

/* ---------- Chamfered panel (decision 18, 11 Nov 2026) ----------
   One component for every panel: the carousel cards and the outcome panel
   in the block, and every panel on the Cortex page (.cortex-panel, Figma
   3:2, 5:5, 6:37). A panel is two clip-path octagons: the panel itself,
   painted in its edge colour with a hairline of padding, and its frame
   inside it, cut --cortex-hairline-cut less so the diagonals draw 1px like
   the straight edges (decision 6). The cut is set by role: cards 16px
   (--cortex-cut-card), every other panel 14px (--cortex-cut-panel). Each
   panel sets its own edge colour (its background) and fill (its frame's). */
.cortex:where(:not(body)) :is(.cortex-panel, .cortex-slide, .cortex-outcome) {
  --cut: var(--cortex-panel-cut, var(--cortex-cut-panel));
  padding: var(--cortex-hairline);
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
}
.cortex:where(:not(body)) :is(.cortex-panel-frame, .cortex-slide-frame, .cortex-outcome-frame) {
  --cut: calc(var(--cortex-panel-cut, var(--cortex-cut-panel)) - var(--cortex-hairline-cut));
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
}
.cortex:where(:not(body)) :is(.cortex-card, .cortex-slide) {
  --cortex-panel-cut: var(--cortex-cut-card);
}
/* The Cortex page's panels: an outline at lime 55% around a #0A0A0A
   fill, a header label, and a 1px rule under the header in the outline
   colour (Figma 4:10, 6:39). --lime is the root cause panel (3:8): a full
   lime outline, a lime header with a black label, a black fill. */
.cortex:where(:not(body)) .cortex-panel {
  --cortex-panel-edge: var(--cortex-lime-55);
  --cortex-panel-fill: #0A0A0A;
  --cortex-panel-head: 40px;
  display: flex;
  box-sizing: border-box;
  background: var(--cortex-panel-edge);
}
.cortex:where(:not(body)) .cortex-panel--lime {
  --cortex-panel-edge: var(--cortex-lime);
  --cortex-panel-fill: var(--cortex-black);
}
.cortex:where(:not(body)) .cortex-panel-frame {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--cortex-panel-fill);
  text-align: center;
}
.cortex:where(:not(body)) .cortex-panel-head {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: var(--cortex-panel-head); /* the rule is the head's last pixel */
  margin: 0;
  padding: 0 1rem;
  border-bottom: var(--cortex-hairline) solid var(--cortex-panel-edge);
  color: var(--cortex-lime);
  text-align: center;
}
.cortex:where(:not(body)) .cortex-panel--lime .cortex-panel-head {
  min-height: calc(var(--cortex-panel-head) - var(--cortex-hairline));
  background: var(--cortex-lime);
  color: var(--cortex-black);
  border-bottom: 0;
}
/* Header heights: 47 on cards from 768 up (the rule sits at 47), 40 below
   and on the root cause panel at every width (Figma 4:12, 35:18, 3:10). */
@media (min-width: 768px) {
  .cortex:where(:not(body)) .cortex-card {
    --cortex-panel-head: 47px;
  }
}

/* Steps carousel: same mechanism as the team carousel on Us —
   track centers the .current slide via translateX, neighbours sit
   smaller and dimmed and zoom to full size when active. */
.cortex:where(:not(body)) .cortex-viewport {
  overflow: hidden;
  padding: 0;
}
.cortex:where(:not(body)) .cortex-track {
  display: flex;
  position: relative; /* offsetParent so JS offsetLeft is track-relative */
  flex-wrap: nowrap;
  gap: 0; /* zero on mobile for maximum peek; wider on desktop */
  justify-content: flex-start;
  transition: 0.65s translate cubic-bezier(0.22, 1, 0.36, 1), 0.65s transform cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.cortex:where(:not(body)) .cortex-slide {
  position: relative;
  display: flex; /* frame always fills the slide exactly */
  flex: 1 0 80%; /* neighbours peek at the edges on mobile */
  max-width: 300px;
  min-width: 0; /* allow shrink below content min-width */
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.35); /* edge colour (chamfered panel) */
  cursor: pointer;
  scale: 0.85;
  opacity: 0.55; /* entire inactive card at 55%, per Figma */
  transform-origin: 50% 50%;
  transform: translateZ(0);
  backface-visibility: hidden;
  transition: 0.55s scale cubic-bezier(0.22, 1, 0.36, 1), 0.55s opacity linear;
}
#cortex.cortex .cortex-slide:not(.current) {
  align-self: center; /* fit content height, no stretch gap */
}
#cortex.cortex .cortex-slide:not(.current) .cortex-slide-body {
  flex: none; /* don't grow into leftover space */
}
.cortex:where(:not(body)) .cortex-slide.current {
  scale: 1;
  opacity: 1;
  background: var(--cortex-lime);
}
.cortex:where(:not(body)) .cortex-slide-frame {
  background: var(--cortex-black);
  flex: 1 1 auto;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#cortex.cortex .cortex-slide-head {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  background: transparent;
  /* Inactive number (D3): white inside the card's 0.55 opacity renders
     at about #8C8C8C on black, 6.2:1 (the grey gave #4E4E4E, 2.45:1).
     The same tone as the inactive title and subhead in that card. */
  color: var(--cortex-white);
  font-family: var(--cortex-font-body);
  font-weight: var(--fw-base, 400);
  font-size: 15px;
  line-height: 25px;
  letter-spacing: 0.03em;
  text-align: center;
  padding: 0 1rem;
  margin: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}
#cortex.cortex .cortex-slide.current .cortex-slide-head {
  background: var(--cortex-lime);
  color: #000000;
  border-bottom-color: var(--cortex-lime);
}
.cortex:where(:not(body)) .cortex-slide-body {
  text-align: center;
  padding: 2.5rem 2rem;
  flex: 1;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden; /* clip collapsed copy/expand remnants */
}
/* This block now carries id="cortex" itself, so the theme's legacy
   `#cortex h3` rules (ID specificity) reach inside it. These
   same-element overrides outrank them. */
#cortex.cortex .cortex-slide-body h3 {
  font-family: var(--cortex-font-display);
  font-weight: 300;
  font-size: 39px;
  line-height: 39px;
  letter-spacing: 0;
  text-align: center;
  text-transform: uppercase;
  width: auto;
  max-width: none;
  margin: 1rem 0 2.5rem;
  margin-block: 1rem 2.5rem;
}
/* Full-bleed divider across the whole card (per Figma). */
.cortex:where(:not(body)) .cortex-slide-divider {
  height: 1px;
  align-self: stretch;
  margin: 0 -2rem;
  background: rgba(255, 255, 255, 0.25);
  transition: 0.3s background-color linear;
}
.cortex:where(:not(body)) .cortex-slide.current .cortex-slide-divider {
  background: var(--cortex-lime);
}
/* Ancestor-aware (see title note above): outranks any legacy rules. */
#cortex.cortex .cortex-slide-body h4 {
  font-family: var(--cortex-font-body);
  font-weight: var(--fw-base, 400);
  font-size: 17px;
  line-height: 25px;
  letter-spacing: 0.03em;
  text-align: center;
  text-transform: uppercase;
  color: #FFFFFF;
  margin: 2.5rem 0 20px;
  margin-block: 2.5rem 20px;
  padding: 0;
  border: 0;
}
.cortex:where(:not(body)) .cortex-slide-icon {
  display: block;
  width: 40px;
  height: 40px;
  margin: 0 auto;
  color: var(--cortex-white);
  opacity: 0.55; /* inactive per Figma */
  transition: 0.3s opacity linear;
}
/* What page card icons run slightly larger (client request). */
body.what .cortex .cortex-slide-icon,
body.cortex-page .cortex .cortex-slide-icon {
  width: 43px;
  height: 43px;
}
.cortex:where(:not(body)) .cortex-slide.current .cortex-slide-icon {
  opacity: 1;
}
.cortex:where(:not(body)) .cortex-slide-icon svg,
.cortex:where(:not(body)) .cortex-slide-icon img {
  display: block;
  width: 100%;
  height: 100%;
}
#cortex.cortex .cortex-slide-copy {
  font-family: var(--cortex-font-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 25px;
  letter-spacing: 0;
  text-align: center;
  color: #FFFFFF;
  margin: 0;
  overflow: hidden;
  max-height: 12em;
  opacity: 1;
  transition: 0.3s opacity linear, 0.3s max-height ease-in-out;
}
/* Inactive cards collapse to header + icon + title + subtitle (per design).
   Ancestor-aware to outrank the copy/extra base rules. display:none
   guarantees zero footprint regardless of transition or sizing quirks. */
#cortex.cortex .cortex-slide:not(.current) .cortex-slide-copy,
#cortex.cortex .cortex-slide:not(.current) .cortex-slide-extra,
#cortex.cortex .cortex-slide:not(.current) .cortex-expand {
  display: none;
  max-height: 0;
  opacity: 0;
  margin: 0;
}
#cortex.cortex .cortex-slide:not(.current) .cortex-expand {
  border-width: 0;
}
/* Expand toggle rotates on expand and retains its white ring. */
.cortex:where(:not(body)) .cortex-expand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-top: 1.6rem;
  padding: 0;
  border: 0;
  background: none;
  background-color: transparent;
  background-image: none;
  cursor: pointer;
  overflow: hidden;
  max-height: 48px;
  opacity: 1;
  transition: 0.3s opacity linear, 0.3s max-height ease-in-out, 0.3s margin linear;
}
.cortex:where(:not(body)) .cortex-expand svg {
  width: 100%;
  height: 100%;
  transition: transform 0.4s ease;
}
.cortex:where(:not(body)) .cortex-expand .bar-v,
.cortex:where(:not(body)) .cortex-expand .bar-h,
.cortex:where(:not(body)) .cortex-expand .star {
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 0.3s linear, transform 0.3s ease;
}
/* Hover states only where a real hover exists: on touch screens a tap
   would otherwise leave the button stuck in its hovered look. */
@media (hover: hover) and (pointer: fine) {
  .cortex:where(:not(body)) .cortex-expand:hover .bar-v,
  .cortex:where(:not(body)) .cortex-expand:hover .bar-h {
    opacity: 0;
    transform: scale(0.5);
  }
  .cortex:where(:not(body)) .cortex-expand:hover .star {
    transform: scale(1.35);
  }
}
.cortex:where(:not(body)) .cortex-slide.expanded .cortex-expand svg {
  transform: rotate(45deg);
}
.cortex:where(:not(body)) .cortex-slide.expanded .cortex-expand circle {
  stroke: #fff;
}
/* Extra copy revealed by the toggle. */
.cortex:where(:not(body)) .cortex-slide-extra {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: 0.4s max-height ease-in-out, 0.3s opacity linear;
}
#cortex.cortex .cortex-slide-extra p {
  font-family: var(--cortex-font-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 25px;
  letter-spacing: 0;
  text-align: center;
  color: #FFFFFF;
  margin: 1rem 0 0;
}
.cortex:where(:not(body)) .cortex-slide.expanded .cortex-slide-extra {
  max-height: 30em;
  opacity: 1;
}

/* Prev / next arrows */
.cortex:where(:not(body)) .cortex-steps-wrap {
  position: relative;
  margin-left: -1.5rem;
  margin-right: -1.5rem; /* full-bleed: peeking cards touch screen edges */
}
/* Carousel navigation: same component as the Us team carousel
   (.navigation), recolored lime. */
.cortex:where(:not(body)) .cortex-steps-wrap {
  position: relative;
}
.cortex:where(:not(body)) .navigation {
  pointer-events: none;
  position: absolute;
  display: none; /* desktop only; mobile uses tabs */
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  top: 50%;
  left: 1rem;
  right: 1rem;
  translate: 0 -50%;
  z-index: 5;
  list-style: none;
  margin: 0;
  padding: 0;
  filter: opacity(0%);
  transition: 0.3s filter linear;
}
.cortex:where(:not(body)) .cortex-steps-wrap:hover .navigation,
.cortex:where(:not(body)) .navigation:focus-within {
  filter: none;
}
.cortex:where(:not(body)) .navigation li {
  flex: 1;
}
.cortex:where(:not(body)) .navigation button:hover,
.cortex:where(:not(body)) .navigation button:focus-visible {
  border: 0;
  text-shadow: none;
}
/* Base outranks the theme's textured button:hover (higher specificity). */
.cortex:where(:not(body)) .cortex-steps-wrap .navigation button {
  display: block;
  appearance: none;
  -webkit-appearance: none;
  padding: 0;
  border: 0;
  color: transparent;
  font-size: 60px;
  cursor: pointer;
  line-height: 1em;
  width: 1em;
  border-radius: 50%;
  background: transparent url("data:image/svg+xml;charset=UTF-8;base64,PHN2ZyB3aWR0aD0iMTUiIGhlaWdodD0iMjMiIHZpZXdCb3g9IjAgMCAxNSAyMyIgZmlsbD0iI0JGRkMwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMC4xODQ4ODQgNy45MjkxN0wwLjIwODgyNSA3Ljk1MzExQzAuMzc2NDEyIDguMTIwNyAwLjY0NDU1IDguMTIwNyAwLjgxMjEzNyA3Ljk1MzExTDQuNDI3MjMgNC4zMzgwMkM1LjQwNDAyIDMuMzYxMjMgNy4wNzUxIDQuMDU1NTIgNy4wNzUxIDUuNDM0NTJMNy4wNjA3NCAyMi4zOTkxQzcuMDYwNzQgMjIuNjI4OSA3LjI1MjI2IDIyLjgyMDUgNy40ODIxIDIyLjgyMDVMNy41MTA4MyAyMi44MjA1QzcuNzQwNjYgMjIuODIwNSA3LjkzMjE5IDIyLjYyODkgNy45MzIxOSAyMi4zOTkxTDcuOTQxNzYgNS40Mjk3M0M3Ljk0MTc2IDQuMDUwNzMgOS42MTI4NCAzLjM1NjQ0IDEwLjU4OTYgNC4zMzMyM0wxNC4yMDQ3IDcuOTQ4MzJDMTQuMzcyMyA4LjExNTkxIDE0LjY0MDUgOC4xMTU5MSAxNC44MDggNy45NDgzMkwxNC44MzIgNy45MjQzOEMxNC45OTk2IDcuNzU2NzkgMTQuOTk5NiA3LjQ4ODY1IDE0LjgzMiA3LjMyMTA3TDcuNTEwODIgLTguNTgzMWUtMDVMMC4xODk2NzIgNy4zMjEwN0MwLjAyMjA4NDggNy40ODg2NiAwLjAyMjA4NDkgNy43NTY4IDAuMTg5NjcyIDcuOTI0MzhMMC4xODQ4ODQgNy45MjkxN1oiLz48L3N2Zz4=") no-repeat scroll 50% 50% / 0.38em;
  box-shadow: 0 0 0 1.6px var(--cortex-lime) inset;
  scale: 0.8;
  rotate: 90deg;
  pointer-events: auto;
  transition: 0.3s filter linear, 0.3s scale ease;
}
.cortex:where(:not(body)) .navigation button:hover {
  filter: opacity(80%);
  scale: 0.9;
}
.cortex:where(:not(body)) .navigation .previous button {
  scale: -0.8 0.8;
  margin-inline: 0 auto;
  rotate: 270deg;
}
.cortex:where(:not(body)) .navigation .previous button:hover {
  scale: -0.9 0.9;
}
.cortex:where(:not(body)) .navigation .next button {
  margin-inline: auto 0;
}
.cortex:where(:not(body)) .navigation .disable button {
  pointer-events: none;
  filter: opacity(20%);
}
/* A dimmed arrow (first or last card) can still take focus: while it has
   it, show it and its ring at full strength (D4). */
.cortex:where(:not(body)) .navigation .disable button:focus-visible {
  filter: none;
}

/* Carousel rule + drop lines (per design: full-width hairline with a
   lime segment under the active card, vertical drops to each panel). */
.cortex:where(:not(body)) .cortex-carousel-rule {
  position: relative;
  max-width: 1200px;
  margin: 2.5rem -1.5rem 0; /* full-bleed on mobile; line inset via padding */
  padding: 0 1.5rem;
}
.cortex:where(:not(body)) .cortex-carousel-rule span {
  display: block;
  height: 1px;
  background: rgba(255, 255, 255, 0.22);
}
/* Lime progress segment: card-width, glides with the active slide. */
.cortex:where(:not(body)) .cortex-carousel-indicator {
  position: absolute;
  top: -0.5px;
  left: 0;
  height: 2px;
  width: 0;
  background: var(--cortex-lime);
  transition: 0.65s left cubic-bezier(0.22, 1, 0.36, 1), 0.65s width cubic-bezier(0.22, 1, 0.36, 1);
}
.cortex:where(:not(body)) .cortex-drop {
  width: var(--cortex-hairline);
  height: 90px;
  margin: 40px auto;
  background: linear-gradient(to bottom, transparent, var(--cortex-lime));
}
.cortex:where(:not(body)) .cortex-carousel-rule + .cortex-drop {
  margin-top: 40px;
}

/* Outcome panel (a chamfered panel, full width: 14px) */
.cortex:where(:not(body)) .cortex-outcome {
  margin: 0; /* gutters come from .cortex-more padding */
  background: var(--cortex-lime); /* edge colour */
  text-align: center;
}
.cortex:where(:not(body)) .cortex-outcome-frame {
  background: var(--cortex-black);
  display: flex;
  flex-direction: column;
}
.cortex:where(:not(body)) .cortex-outcome-head {
  background: var(--cortex-lime);
  color: #000000;
  font-family: var(--cortex-font-body);
  font-weight: var(--fw-base, 400);
  font-size: 15px;
  line-height: 25px;
  letter-spacing: 0.03em;
  text-align: center;
  text-transform: uppercase;
  padding: 1rem 1rem 0.9rem;
  margin: 0;
}
.cortex:where(:not(body)) .cortex-outcome h3 {
  font-family: var(--cortex-font-display);
  font-weight: 300;
  font-size: 39px;
  line-height: 39px;
  letter-spacing: 0;
  text-align: center;
  color: #FFFFFF;
  margin: 0;
  padding: 2.5rem 2rem;
  text-transform: uppercase;
}
/* Same ancestor-ID collision as slide titles (see above). */
#cortex.cortex .cortex-outcome h3 {
  font-size: 39px;
  width: auto;
  max-width: none;
  margin: 0;
  margin-block: 0;
}
/* Full-bleed lime divider, same as cards. */
#cortex.cortex .cortex-outcome-divider {
  height: 1px;
  background: var(--cortex-lime);
}
#cortex.cortex .cortex-outcome p {
  font-family: var(--cortex-font-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 25px;
  letter-spacing: 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #FFFFFF;
  width: auto; /* override #cortex .x-row:last-child p cap */
  max-width: none;
  margin: 0;
  padding: 2.5rem 2rem;
  border: 0;
}
/* Same 35%-width cap hits every paragraph on What (block sits in the
   section's last row): kicker, lede, card copy. Release them all. */
#cortex.cortex .cortex-more p {
  width: auto;
  max-width: none;
}
/* ...except the lede, which keeps its readable measure. (More specific
   than the release above, so it wins.) */
#cortex.cortex .cortex-more p.cortex-lede {
  max-width: 34rem;
  margin-left: auto;
  margin-right: auto;
}

/* Testimonial: reuses the #testimonial component styling from What
   (fade carousel + side rails). Only spacing + ink color are set here;
   everything else comes from the theme. */
.cortex:where(:not(body)) .testimonial {
  margin: 0;
  color: #000;
}
.cortex:where(:not(body)) .testimonial .secondary {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
/* Pin the lime panel + ink explicitly (deterministic, no var chains). */
#cortex.cortex .testimonial .x-row.secondary {
  background: #BFFC00;
  background-color: #BFFC00;
  background-image: none;
  color: #000;
}
#cortex.cortex .testimonial blockquote p {
  color: #000;
}
/* The Cortex page's quote (06) is not #cortex, so the pin above missed it:
   its side labels ("The point", "of success", shown from 600px) inherited
   .secondary's lime (css.css) and were lime on the lime panel, 1:1. Black
   as in Figma 6:63 and as on Home and Us (11 Nov 2026, found in the final
   pass). */
.cortex:where(:not(body)).cortex-quote .testimonial .x-row.secondary {
  color: #000;
}
/* The textured blocks paint in front of the blue rules (decision 43).
   From 500px the rules are the quote's border-inline (css.css
   ".testimonial blockquote"), and the designhouse plugin's fade carousel
   puts the slide that holds the quote at z-index 1 (its css.css
   '.carousel[data-transition="fade"] .slide'), above the blocks. One step
   above the slide puts the blocks in front. Below 500px the rules are the
   sides' border-block and the blocks were already in front: nothing changes
   there. Cortex testimonials only (the Cortex page's nCino quote, and the
   block's own copy, which no page shows): Home's and Us's testimonials,
   the same component, keep their rules in front. */
.cortex:where(:not(body)) .testimonial .side .bar {
  z-index: 2;
}
/* The Cortex page's quote, set for the short quote (decision 67, 12 Nov
   2026; PROPOSAL-12 §3; replaces decision 54's rule, which was fluid to 768
   and then the theme's --fs-xl). One fluid size at every width, linear in
   the window width as the H2 is: 53px at 1440 (the H2's size; the largest
   that keeps "You just showed me 6 years / of our data in 6 seconds." on two
   lines in the 829px column), 40.7 at 1024 (two lines), 33.2 at 768 and 22
   at 390 (three lines), 21 from 360 down. Line height 1.19, the H2's ratio
   (53/63.07). Weight 250 stays (statement display, decision 29).
   The side padding holds its 1440 value above 1440 (the theme's 6vw grows
   to 115px at 1920 while the panel stays 1200 wide, which would narrow the
   column to 771 and put 53px on three lines), as the hero holds 1440
   (decision 32). The author sits 48px below at 1440, 32 below about 960
   (the theme's 6.9rem was set for a five-line quote), and its line is
   balanced where it wraps (360: "CEO of PE-backed / B2B Company").
   The Cortex page's quote only (.cortex-quote): the theme testimonial stays
   as it is on Home, Us and in the block (proven: PROPOSAL-12 §3.3). */
.cortex:where(:not(body)).cortex-quote .testimonial .large-text blockquote .quote {
  font-size: clamp(21px, calc(10.49px + 2.952vw), 53px);
  line-height: 1.19;
}
.cortex:where(:not(body)).cortex-quote .testimonial blockquote {
  padding-inline: max(3rem, min(6vw, 86.4px));
  gap: clamp(32px, 3.333vw, 48px);
}
.cortex:where(:not(body)).cortex-quote .testimonial blockquote .author {
  text-wrap: balance;
}
/* The side rails stay narrow up to 767 (decision 57, 11 Nov 2026): the
   theme widens them from 3.5em to 6.5em at 600 to fit the vertical labels
   ("The point", "of success"), which left the quote a column barely half
   the panel at 600 (10 lines). On the Cortex page the rails keep 3.5em and
   the labels appear from 768, with the wider column. */
@media (min-width: 600px) and (max-width: 767px) {
  .cortex:where(:not(body)).cortex-quote .testimonial .side {
    flex-basis: 3.5em;
  }
  .cortex:where(:not(body)).cortex-quote .testimonial .vertical-text {
    display: none;
  }
}

/* ---------- Desktop (>=1024px, designs at 1440px) ---------- */
@media (min-width: 768px) {
  .cortex:where(:not(body)) .cortex-hero {
    padding: 8rem 2rem;
  }
  .cortex:where(:not(body)) .cortex-more {
    padding-bottom: 8rem;
  }
  .cortex:where(:not(body)) .cortex-headline {
    font-size: 53px; /* exact Figma desktop value */
  }
  /* Home and What keep the 5-line headline on desktop (What since decision
     28: Home's version); everywhere else, and below 768, it breaks. */
  body.home .cortex .cortex-headline .wb,
  body.what .cortex .cortex-headline .wb {
    display: none;
  }
  .cortex:where(:not(body)) .cortex-visual {
    max-width: 1200px;
    margin: 0 auto;
  }
  #cortex.cortex .cortex-star {
    width: 80px;
    height: 80px;
  }
  .cortex:where(:not(body)) .vertical-divider {
    height: 150px;
  }
  .cortex:where(:not(body)) .cortex-drop {
    height: 150px;
  }
  .cortex:where(:not(body)) .cortex-tabs {
    gap: 3.5rem;
    width: fit-content;
    justify-content: center;
  }
  .cortex:where(:not(body)) .cortex-tab {
    font-size: 22px;
  }
  .cortex:where(:not(body)) .cortex-viewport {
    max-width: 1200px;
    margin: 0 auto;
  }
  .cortex:where(:not(body)) .cortex-carousel-rule {
    margin-left: auto;
    margin-right: auto;
    padding: 0;
  }
  .cortex:where(:not(body)) .cortex-steps-wrap {
    margin-left: 0;
    margin-right: 0;
  }
  .cortex:where(:not(body)) .cortex-track {
    gap: clamp(1.8rem, 2vw, 4rem);
  }
  .cortex:where(:not(body)) .cortex-slide {
    flex: 0 0 394px; /* exact Figma card width */
    max-width: none;
  }
  .cortex:where(:not(body)) .cortex-slide.current {
    min-height: 500px; /* exact Figma card height (active only) */
  }
  .cortex:where(:not(body)) .cortex-expand {
    width: 86px;
    height: 86px;
    max-height: 86px;
  }
  #cortex.cortex .cortex-slide-head {
    height: 48px;
  }
  .cortex:where(:not(body)) .navigation {
    display: flex;
  }

  .cortex:where(:not(body)) .cortex-outcome {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* What Cortex section spacing (outer bottom removed: the block's own
   16rem already provides the gap). */
body.what #cortex-outer {
  padding-block: 0px 0px;
}

/* What shows Home's version of the block (decision 28, applying decision
   15, 11 Nov 2026): the four body.what rules that opened it (hero bottom
   padding 0, .cortex-more shown, the button hidden, the kicker lime) are
   removed. The carousel now shows on the Cortex page only (decision 27).
   Restore point: docs/apply-02/what-before-15/ and git history. */
/* Anchor landing clear of the fixed header (black block itself). */
#cortex {
  scroll-margin-top: 100px;
}

/* Empty lead-in for the scroll fade, followed by a 90px black run-in. */
#cortex.cortex::before {
  content: '';
  display: block;
  height: clamp(180px, 27.5vw, 400px);
  background: transparent;
}
#cortex.cortex .cortex-hero {
  padding-top: 90px;
}
.cortex:where(:not(body)) .cortex-intro {
  background: transparent;
}
.cortex:where(:not(body)) .cortex-layered {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  isolation: isolate;
  background: #000;
}
.cortex:where(:not(body)) .cortex-layered .cortex-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  pointer-events: none;
  object-fit: contain;
}
.cortex:where(:not(body)) .cortex-layer-background {
  transform: translateY(var(--parallax-background, 0px)) scale(1.04);
}
/* Edge fades (decision 25, 11 Nov 2026): the four black vignettes that were
   a 681 KB image layer, drawn as gradients at the same depth (over the
   background and reflection, under the symbol, wordmark and UI; locked, no
   parallax). Read from that image's pixels: straight ramps from black to
   clear over 21.03% (top), 21.20% (bottom) and 17.58% (each side) of the
   artwork, overlapping in the corners as the image's did. */
.cortex:where(:not(body)) .cortex-layer-edge-fades {
  display: block;
  background:
    linear-gradient(to bottom, rgb(0 0 0 / 0.994), rgb(0 0 0 / 0) 21.03%),
    linear-gradient(to top, rgb(0 0 0 / 0.996), rgb(0 0 0 / 0) 21.2%),
    linear-gradient(to right, rgb(0 0 0 / 0.999), rgb(0 0 0 / 0) 17.58%),
    linear-gradient(to left, rgb(0 0 0 / 0.999), rgb(0 0 0 / 0) 17.58%);
}
/* The reflection image runs to its canvas's bottom row, so when the parallax
   lifts it, that row could show as a faint line inside the artwork (on Home
   and What, at tablet and phone widths, as the artwork enters). Its own
   bottom 6% fades out, so wherever it is, it ends softly (decision 77,
   12 Nov 2026; PROPOSAL-14 §1.4a and §1.5). At rest it changes nothing
   visible: that strip sits under the bottom edge fade. */
.cortex:where(:not(body)) .cortex-layer-reflection {
  transform: translateY(var(--parallax-reflection, 0px));
  -webkit-mask-image: linear-gradient(to top, transparent, #000 6%);
  mask-image: linear-gradient(to top, transparent, #000 6%);
}
.cortex:where(:not(body)) .cortex-layer-symbol {
  transform: translateY(var(--parallax-symbol, 0px)) scale(var(--parallax-scale, 1));
}
.cortex:where(:not(body)) .cortex-layer-wordmark {
  transform: translateY(var(--parallax-wordmark, 0px));
}
/* Labels: tab numbers, card heads, card subheads, the outcome head, and
   .cortex-label on new sections (tokens at the top). Applied to the label
   elements themselves, so the spec no longer depends on cortex.js adding
   .primary.h4 (still matched). Weight 300 is Plex Light; the old 250
   (--fw-lg) rendered as Light only because no lighter Plex is loaded.
   Colours stay with each component. */
#cortex.cortex .primary.h4,
#cortex.cortex :is(.cortex-tab .num, .cortex-slide-head, .cortex-slide-body h4, .cortex-outcome-head),
.cortex:where(:not(body)) .cortex-label {
  font-family: var(--cortex-label-font);
  font-size: var(--cortex-label-size);
  font-weight: var(--cortex-label-weight);
  line-height: var(--cortex-label-leading);
  letter-spacing: var(--cortex-label-tracking);
  text-transform: uppercase;
}
@media (prefers-reduced-motion: reduce) {
  .cortex:where(:not(body)) .cortex-intro { opacity: 1 !important; }
  .cortex:where(:not(body)) .cortex-layer { transform: none; }
  /* Carousel (D2): cards, track, indicator, card copy and the expand
     toggle change state at once instead of sliding, zooming or rotating.
     Same selectors as the rules that set the transitions. */
  .cortex:where(:not(body)) .cortex-track,
  .cortex:where(:not(body)) .cortex-slide,
  .cortex:where(:not(body)) .cortex-carousel-indicator,
  .cortex:where(:not(body)) .cortex-slide-divider,
  .cortex:where(:not(body)) .cortex-slide-icon,
  #cortex.cortex .cortex-slide-copy,
  .cortex:where(:not(body)) .cortex-slide-extra,
  .cortex:where(:not(body)) .cortex-expand,
  .cortex:where(:not(body)) .cortex-expand svg,
  .cortex:where(:not(body)) .cortex-expand .bar-v,
  .cortex:where(:not(body)) .cortex-expand .bar-h,
  .cortex:where(:not(body)) .cortex-expand .star,
  .cortex:where(:not(body)) .navigation,
  .cortex:where(:not(body)) .cortex-steps-wrap .navigation button {
    transition: none;
  }
}

/* ---------- The Cortex page (/cortex/): page mode and section shell ----------
   Page mode (decision 12): body.cortex-page (wp/index.php) is black from the
   header down to the quote. cortex.js never makes its sections fade zones,
   so nothing on this page is hidden or faded. The page is one Cornerstone
   Section, ID cortex-page, holding one Raw Content element per design
   section; it is held at padding 0 on black here whatever the builder says. */
body.cortex-page #cortex-page {
  padding: 0;
  background: #000;
}
/* Sam's build (review environment, 11 Nov 2026) is one Row with one Column
   per section. Cornerstone sets its Row to a 1200 container with 1px of
   padding and puts 20px gaps between Columns (40 around the empty one kept
   for the platform section). Held full width and flush here, whatever the
   builder says, so each section joins the next with no gap, and the
   sections are full width before cortex.js pins them. */
body.cortex-page #cortex-page > .x-row {
  width: 100%;
  max-width: none;
  padding: 0;
}
body.cortex-page #cortex-page > .x-row > .x-row-inner {
  margin: 0;
}
body.cortex-page #cortex-page > .x-row > .x-row-inner > .x-col {
  margin: 0;
  flex-basis: 100%;
}
/* Section shell (Figma 2:2): each section opens with a 1px separator, black
   to lime, 90px tall (150 at 768 and up), then 30px (45) to its content.
   No space above it and none at a section's end: each section is flush on
   its content and the next separator starts there. The hero has none (the
   page opens on the artwork); the last section (--end) closes on 8rem
   before the standard CTA panel. Content is inset by the gutters. */
.cortex:where(:not(body)).cortex-section {
  --cortex-sep: 90px;
  --cortex-sep-gap: 40px; /* decision 64: 40 below every separator, at every size (was 30; 45 from 768) */
  padding: 0 24px; /* Figma 390 frames: 24px gutters */
}
.cortex:where(:not(body)).cortex-section::before {
  content: '';
  display: block;
  width: var(--cortex-hairline);
  height: var(--cortex-sep);
  margin: 0 auto var(--cortex-sep-gap);
  background: linear-gradient(to bottom, transparent, var(--cortex-lime));
}
/* Section spacing (decision 64, 12 Nov 2026): 40px above and below each
   separator at every size, as the Cortex block's drops on Home and What
   (40 / 40). A departure from the Figma page, which starts each separator
   on the previous section's content (0 above; 45 below, 30 at 390). The
   first separator (under the hero) keeps the hero kicker's own space above
   it (decisions 39 and 46); the platform section's separator is set with
   its own rule below. */
.cortex:where(:not(body)).cortex-section:not(.cortex-diagnosis)::before {
  margin-top: 40px;
}
.cortex:where(:not(body)).cortex-section--end {
  padding-bottom: 8rem;
}
@media (min-width: 768px) {
  .cortex:where(:not(body)).cortex-section {
    --cortex-sep: 150px;
    padding-inline: 2rem;
  }
}
/* After the gutters, so the full-bleed hero wins at every width. */
.cortex:where(:not(body)).cortex-section--hero {
  padding: 0;
}
.cortex:where(:not(body)).cortex-section--hero::before {
  content: none;
}

/* ---------- The Cortex page's sections ----------
   Diagnosis (Figma 3:2), the outcome (5:5) and In practice (6:37) at 1440;
   35:2, 38:4 and 38:12 at 390. Panels are the chamfered panel component
   (above). Labels take the label tokens (decision 3): 16.66/24.99 at 1440
   and 14.98/22.47 at 390 where Figma has 15/25 and 13/20. Where the two
   frames disagree, desktop wins: eyebrow and subhead white 55%, symptom
   copy white 72%, tree lime 55%, eyebrow rules white 28%. Cards stack, as
   the 390 frames do, up to 1023px (no wider than the root cause panel) and
   go three to a row from 1024. Display type is Arizona Flare Light (300),
   except the outcome title (250, decision 21). */
/* Reset: single classes only, so every rule below (same weight, later)
   wins over it. */
.cortex:where(:not(body)) :is(.cortex-eyebrow, .cortex-subhead, .cortex-title, .cortex-cards, .cortex-card, .cortex-card-title, .cortex-card-copy, .cortex-panel-copy, .cortex-case-figure, .cortex-case-caption, .cortex-case-action, .cortex-outcome-title, .cortex-outcome-strap) {
  margin: 0;
  text-align: center;
}
.cortex:where(:not(body)) .cortex-outcome-body p {
  margin: 0;
  text-align: center;
}
.cortex:where(:not(body)) :is(.cortex-title, .cortex-card-title, .cortex-case-figure, .cortex-case-caption, .cortex-outcome-title) {
  font-family: var(--cortex-font-display);
  font-weight: 300;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--cortex-white);
}
.cortex:where(:not(body)) :is(.cortex-panel-copy, .cortex-card-copy, .cortex-outcome-body p) {
  font-family: var(--cortex-font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0;
  color: var(--cortex-white);
}

/* Eyebrows: white; the diagnosis eyebrow is white 55% between two rules
   (46px, 40 clear of the text; 120px, 20 clear, from 768). */
.cortex:where(:not(body)) .cortex-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  color: var(--cortex-white);
}
.cortex:where(:not(body)).cortex-diagnosis :is(.cortex-eyebrow, .cortex-subhead) {
  color: rgb(255 255 255 / 0.55);
}
.cortex:where(:not(body)).cortex-diagnosis .cortex-eyebrow::before,
.cortex:where(:not(body)).cortex-diagnosis .cortex-eyebrow::after {
  content: '';
  flex: 0 1 46px;
  height: var(--cortex-hairline);
  background: rgb(255 255 255 / 0.28);
}

/* Diagnosis: H2 in the headline's type (53/63, 26.5/31.5 at 390). */
.cortex:where(:not(body)) .cortex-title {
  margin-top: 28px;
  font-size: clamp(24px, 6.8vw, 53px); /* 26.5 at 390, 53 from 780 */
  line-height: 1.1887;
}
.cortex:where(:not(body)) .cortex-subhead {
  margin-top: 22px;
}
.cortex:where(:not(body)) .cortex-rootcause {
  max-width: 760px;
  margin: 44px auto 0;
}
.cortex:where(:not(body)) .cortex-panel-copy {
  padding: 28px 23px 27px;
}

/* Cards: stacked to 1023px, three to a row from 1024. */
.cortex:where(:not(body)) .cortex-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  max-width: 760px;
  margin-inline: auto;
  padding: 0;
  list-style: none;
}
.cortex:where(:not(body)) .cortex-cards > li {
  list-style: none;
}
.cortex:where(:not(body)) .cortex-card-title {
  padding: 23px 23px 25px;
  font-size: 25.5px;
  line-height: 30.6px;
  letter-spacing: 0.02em;
}
.cortex:where(:not(body)) .cortex-card-copy {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 27px 23px 29px;
  border-top: var(--cortex-hairline) solid var(--cortex-panel-edge);
}
.cortex:where(:not(body)) .cortex-symptoms .cortex-card-copy {
  color: rgb(255 255 255 / 0.72);
}

/* The tree (Figma 4:2-4:9; 35:14, 35:36-37), drawn by the card list's own
   background: no markup. Stacked, one line down the middle from the root
   cause, showing in the 28px gaps between the cards (it runs behind them;
   their edges are opaque). */
.cortex:where(:not(body)) .cortex-symptoms {
  --cortex-tree: linear-gradient(var(--cortex-lime-55), var(--cortex-lime-55));
  --cortex-node: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 9 9'%3E%3Cpath d='M4.5.707 8.293 4.5 4.5 8.293.707 4.5z' fill='%23000' stroke='%23698B00'/%3E%3C/svg%3E");
  row-gap: 28px;
  padding-top: 36px;
  background: var(--cortex-tree) 50% 0 / var(--cortex-hairline) 100% no-repeat;
}
.cortex:where(:not(body)) .cortex-symptoms .cortex-card {
  min-height: 280px;
}

/* In practice: case cards, figure, caption, copy, action. */
.cortex:where(:not(body)).cortex-practice .cortex-cases {
  row-gap: 24px;
  margin-top: 44px;
}
.cortex:where(:not(body)) .cortex-case {
  min-height: 446px;
}
.cortex:where(:not(body)) .cortex-case-figure {
  padding: 19px 23px 0;
  font-size: 43.2px;
  line-height: 47.52px;
}
.cortex:where(:not(body)) .cortex-case-caption {
  max-width: 209px;
  margin: 13px auto 0;
  padding-bottom: 14px;
  font-size: 17.6px;
  line-height: 22.4px;
  letter-spacing: 0.01em;
}
.cortex:where(:not(body)) .cortex-case .cortex-card-copy {
  padding: 12px 23px;
}
.cortex:where(:not(body)) .cortex-case-action {
  padding: 0 23px 27px;
  color: var(--cortex-lime);
  /* The designed breaks (<br />) fit the 338px measure at 1440; where a
     line is longer than the card it wraps, balanced rather than leaving
     one word on its own. */
  text-wrap: balance;
}
/* Droppable breaks (decision 34): where the card is narrower than the
   designed lines (below 768, and three to a row at 1024-1279) the breaks
   drop and the action runs on, as the 390 frame does (38:12). The markup
   has a space before each <br /> (docs/apply-04/paste/05-in-practice.html),
   so the words stay apart. From 768 to 1023 (stacked, wide) and from 1280
   the designed breaks show. */
@media (max-width: 767px), (min-width: 1024px) and (max-width: 1279px) {
  .cortex:where(:not(body)) .cortex-case-action br {
    display: none;
  }
}

/* The outcome, long form (Figma 5:5, 38:4): a full-width panel at lime 55%
   whose lime header covers its top edge, title, strap, rule, body. */
.cortex:where(:not(body)) .cortex-outcome--long {
  --cortex-panel-edge: var(--cortex-lime-55);
  --cortex-panel-head: 40px;
  background: linear-gradient(var(--cortex-lime) 0 var(--cortex-panel-head), var(--cortex-panel-edge) 0);
}
.cortex:where(:not(body)) .cortex-outcome--long .cortex-outcome-head {
  color: var(--cortex-black);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: calc(var(--cortex-panel-head) - var(--cortex-hairline));
  padding: 0 1rem;
}
.cortex:where(:not(body)) .cortex-outcome-title {
  padding: 32px 23px 0;
  font-weight: 250; /* decision 21: the outcome title stays at 250 */
  font-size: 39px;
  line-height: 39px;
}
.cortex:where(:not(body)) .cortex-outcome--long .cortex-outcome-strap {
  padding: 16px 23px 0;
  color: var(--cortex-lime);
}
.cortex:where(:not(body)) .cortex-outcome--long .cortex-outcome-divider {
  height: var(--cortex-hairline);
  margin-top: 28px;
  background: var(--cortex-panel-edge);
}
.cortex:where(:not(body)) .cortex-outcome-body {
  padding: 27px 23px 53px;
}
.cortex:where(:not(body)) .cortex-outcome-body p + p {
  margin-top: 18px;
}

@media (min-width: 768px) {
  .cortex:where(:not(body)) :is(.cortex-panel-copy, .cortex-card-copy, .cortex-outcome-body p) {
    font-size: 17px;
    line-height: 25px;
  }
  .cortex:where(:not(body)).cortex-diagnosis .cortex-eyebrow {
    gap: 20px;
  }
  .cortex:where(:not(body)).cortex-diagnosis .cortex-eyebrow::before,
  .cortex:where(:not(body)).cortex-diagnosis .cortex-eyebrow::after {
    flex-basis: 120px;
  }
  .cortex:where(:not(body)) .cortex-title {
    margin-top: 35px;
  }
  .cortex:where(:not(body)) .cortex-subhead {
    margin-top: 34px;
  }
  .cortex:where(:not(body)) .cortex-rootcause {
    margin-top: 65px;
  }
  .cortex:where(:not(body)) .cortex-panel-copy {
    padding: 36px 47px 23px;
  }
  .cortex:where(:not(body)) .cortex-card-title {
    padding: 28px 27px 40px;
    font-size: 30px;
    line-height: 36px;
  }
  .cortex:where(:not(body)) .cortex-card-copy {
    justify-content: flex-start;
    padding: 29px 27px 26px;
  }
  .cortex:where(:not(body)) .cortex-symptoms .cortex-card {
    min-height: 320px;
  }
  .cortex:where(:not(body)).cortex-practice .cortex-cases {
    margin-top: 45px;
  }
  .cortex:where(:not(body)) .cortex-case {
    min-height: 540px;
  }
  .cortex:where(:not(body)) .cortex-case-figure {
    padding: 31px 27px 0;
    font-size: 60px;
    line-height: 66px;
  }
  .cortex:where(:not(body)) .cortex-case-caption {
    max-width: 254px;
    padding-bottom: 18px;
    font-size: 22px;
    line-height: 28px;
  }
  .cortex:where(:not(body)) .cortex-case .cortex-card-copy {
    justify-content: center;
    padding: 24px 27px 33px;
  }
  .cortex:where(:not(body)) .cortex-case-action {
    padding: 0 27px 39px;
  }
  .cortex:where(:not(body)) .cortex-outcome--long {
    --cortex-panel-head: 47px;
  }
  .cortex:where(:not(body)) .cortex-outcome-title {
    padding: 51px 119px 0;
  }
  .cortex:where(:not(body)) .cortex-outcome--long .cortex-outcome-strap {
    padding: 17px 119px 0;
  }
  .cortex:where(:not(body)) .cortex-outcome--long .cortex-outcome-divider {
    margin-top: 37px;
  }
  .cortex:where(:not(body)) .cortex-outcome-body {
    padding: 39px 119px 49px;
  }
  .cortex:where(:not(body)) .cortex-outcome-body p + p {
    margin-top: 22px;
  }
}
@media (min-width: 1024px) {
  .cortex:where(:not(body)) .cortex-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 9px;
    max-width: 1200px;
  }
  /* The tree, three across: a 42px stem from the root cause to a spine
     joining the card centres, 52px drops to each card, and a 9px diamond
     node 10px under the spine on each drop (Figma 4:2-4:9). Centres are
     the column centres for a 9px gap: (100% - 18px) / 6 from each end. */
  .cortex:where(:not(body)) .cortex-symptoms {
    padding-top: 94px;
    background:
      var(--cortex-node) calc(16.6667% - 6px) 52px / 9px 9px no-repeat,
      var(--cortex-node) 50% 52px / 9px 9px no-repeat,
      var(--cortex-node) calc(83.3333% + 6px) 52px / 9px 9px no-repeat,
      var(--cortex-tree) calc(16.6667% - 3.3333px) 42px / var(--cortex-hairline) 52px no-repeat,
      var(--cortex-tree) 50% 0 / var(--cortex-hairline) 94px no-repeat,
      var(--cortex-tree) calc(83.3333% + 3.3333px) 42px / var(--cortex-hairline) 52px no-repeat,
      var(--cortex-tree) 50% 42px / calc(66.6667% + 6px) var(--cortex-hairline) no-repeat;
  }
}

/* ---------- The Cortex page's hero (Figma 2:3) ----------
   The artwork full bleed, 16:9 of the window width (1440 x 810 at 1440),
   straight under the header; the kicker 10px below it, Plex 22/28 white,
   then 42px to the next section's separator (the frame is 946 tall). The
   block's own artwork rules (1200 max, the 1.5rem bleed below 768) don't
   apply here. The 390 frame's lime entry line and its wider spacing
   (34:12) are mobile-frame differences: desktop wins (AUDIT-01 4.10). */
.cortex:where(:not(body)).cortex-section--hero .cortex-visual {
  max-width: none;
  margin: 0;
}
/* Capped at wide windows (decision 32, 11 Nov 2026; a departure from
   Figma, which has only 1440). The cap is set by its outcome: at 1920 x
   1080 with normal browser chrome (Chrome on Windows, maximised, with the
   bookmarks bar: a 1920 x 937 window) the kicker's first line must end
   above the fold. Header 87.41 + artwork + 10 + the 28px line <= 937 gives
   an artwork at most 811.6 tall, so the artwork stops growing at Figma's
   own 1440 x 810 (first line ends at 934.41) and sits centred on the black
   page. Its edges fade to black (decision 25), so the sides don't show. */
@media (min-width: 1441px) {
  .cortex:where(:not(body)).cortex-section--hero .cortex-visual {
    max-width: 1440px;
    margin-inline: auto;
  }
}
.cortex:where(:not(body)).cortex-section--hero .cortex-kicker {
  margin: 10px 0 0;
  padding: 0 24px 42px;
}
/* Below 768 the kicker takes the 390 frame's type and spacing (decisions
   39 and 46, 11 Nov 2026; Figma 34:12/34:75): Plex 17/24, 44px under the
   artwork (the frame's 43.6) and 56 down to the next separator, not the
   desktop 22/28 with 10 and 42. A deliberate exception to "desktop wins"
   (AUDIT-01 4.10): everything else on the page scales at 390, and the
   kicker would be the only element holding its desktop size. */
@media (max-width: 767px) {
  .cortex:where(:not(body)).cortex-section--hero .cortex-kicker {
    margin-top: 44px;
    padding-bottom: 56px;
    font-size: 17px;
    line-height: 24px;
  }
}

/* ---------- The platform section on the Cortex page (decision 27) ----------
   Global Block 5194 (the block Home and What place) sits in the page's
   third Column, and on body.cortex-page shows only its platform part: the
   kicker (made an <h2> by cortex.js), the lede, the tabs, the carousel
   with its arrows and collapsible cards, and the carousel's rule. One
   source: an edit to 5194's carousel changes this page.
   ALLOW-LIST, not a deny-list: at the block's top level, in its hero and
   in its expanded area, anything that isn't one of those parts is hidden.
   Whatever is added to 5194 later stays off this page unless it is named
   here. (Hidden: the intro, statement, artwork, button, drops, the block's
   own outcome and quote; the page has its own outcome and quote.) */
body.cortex-page #cortex.cortex > :not(.cortex-hero, .cortex-more),
body.cortex-page #cortex .cortex-hero > :not(.cortex-kicker),
body.cortex-page #cortex .cortex-more > :not(.cortex-lede, .cortex-tabs, .cortex-steps-wrap, .cortex-carousel-rule) {
  display: none;
}
body.cortex-page #cortex .cortex-more[hidden] {
  display: block;
}
/* The page's section shell instead of the fade's lead-in: the separator,
   90px then 30px to the heading (150 and 45 from 768), as Figma 6:2. */
body.cortex-page #cortex.cortex::before {
  width: var(--cortex-hairline);
  height: 90px;
  margin: 40px auto 40px; /* decision 64 (was 0 above, 30 below; 45 from 768) */
  background: linear-gradient(to bottom, transparent, var(--cortex-lime));
}
body.cortex-page #cortex .cortex-hero {
  padding: 0 24px;
}
/* The heading: lime (Figma 6:2, as on What before decision 28), What's
   spacing to the lede below it. */
body.cortex-page #cortex .cortex-kicker {
  margin: 0 0 1.5rem;
  color: var(--cortex-lime);
}
/* The heading below 768: the 390 frame's Plex 18/26 (decision 48, Figma
   46:5), by decision 39's reasoning: everything else scales at 390 and the
   heading would hold its desktop 22/28. The Cortex page only: Home's and
   What's kicker is left as is (decision 41). */
@media (max-width: 767px) {
  body.cortex-page #cortex .cortex-kicker {
    font-size: 18px;
    line-height: 26px;
  }
}
/* The lede below 768: 16/24, the Cortex page's own mobile body size (the
   root cause, symptom, outcome and case copy are all 16/24 at 390), not
   37:10's 15/22 (a block from another page, below a comfortable reading
   size on a phone) nor the desktop 17/25 unscaled (decision 55, 11 Nov
   2026). Light 300 stays. */
@media (max-width: 767px) {
  body.cortex-page #cortex .cortex-lede {
    font-size: 16px;
    line-height: 24px;
  }
}
/* The carousel cards' body copy below 768: 16/24 (decision 58, 11 Nov
   2026), by decision 55's principle. Decision 49 keeps the shipped card's
   geometry, not its mobile type. Scoped to the Cortex page: since decision
   28 the carousel renders only here, and Home's and What's hidden copy is
   untouched. */
@media (max-width: 767px) {
  body.cortex-page #cortex .cortex-slide-copy,
  body.cortex-page #cortex .cortex-slide-extra p {
    font-size: 16px;
    line-height: 24px;
  }
}
/* Flush on the carousel's rule: the next section's separator starts there. */
body.cortex-page #cortex .cortex-more {
  padding-bottom: 0;
}
@media (min-width: 768px) {
  body.cortex-page #cortex.cortex::before {
    height: 150px;
  }
  body.cortex-page #cortex .cortex-hero {
    padding-inline: 2rem;
  }
}

/* ---------- The Cortex page's load-in and section fades (decision 68, 12 Nov 2026) ----------
   PROPOSAL-12 §4. The Cortex page only; Home and What are untouched.
   The load-in. wp/index.php's head script marks <html> with .cortex-loadin
   before the first paint (not under reduced motion, not with a #fragment,
   and it removes the mark itself 1.2s after the page started). While marked,
   the header waits above the top and the hero's builder image is clear (it
   still loads: it's the fallback). When the five layer images decode inside
   the 1.2s, cortex.js swaps the mark for .cortex-intro and inserts them:
   1. the room, its reflection, the edge fades and the instrument frame fade
      in together, 400ms;
   2. the icon and the wordmark fade in 300ms later, 600ms;
   3. the header slides down from the top as Home's does (Home's curve,
      power1.out), in 600ms rather than Home's 1s, once 2 has finished.
   cortex.js removes .cortex-intro when the header is in place, or at once
   on any scroll, key press or focus in the header. If the layers miss the
   1.2s, the mark comes off and the page shows as it always has.
   The strip the header waits above is held black while the page is marked
   (decision 73, 12 Nov 2026; PROPOSAL-13 §8): the white header enters over
   black instead of into a white band that read as a header not loaded. It
   is the page's own background, released with the mark, when the header
   is in place (or at once on any interruption), where the header covers it. */
@media (prefers-reduced-motion: no-preference) {
  html.cortex-loadin,
  html.cortex-intro,
  html.cortex-loadin body.cortex-page,
  html.cortex-intro body.cortex-page {
    background-color: #000;
  }
  html.cortex-loadin body.cortex-page .masthead {
    transform: translateY(-100%);
  }
  html.cortex-loadin body.cortex-page .cortex-section--hero .cortex-visual > img:not(.cortex-layer) {
    opacity: 0;
  }
  html.cortex-intro body.cortex-page .cortex-section--hero .cortex-layer {
    animation: cortex-intro-fade 400ms ease-out both;
  }
  html.cortex-intro body.cortex-page .cortex-section--hero :is(.cortex-layer-symbol, .cortex-layer-wordmark) {
    animation: cortex-intro-fade 600ms ease-out 300ms both;
  }
  html.cortex-intro body.cortex-page .masthead {
    animation: cortex-intro-header 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 900ms both;
  }
}
/* From 1%, not 0: invisible over the black stage (at most 2-3 levels of
   255), but Chrome counts an image for Largest Contentful Paint only once
   it paints above 0, and an opacity animation from 0 isn't repainted until
   it ends. From 0, /cortex/'s LCP read 2.4s on a fast connection (the end
   of the sequence) although the room was in by 1.24s; from 1% it reads
   about 1.0s, as the room starts to show (harness d68-timing-*). */
@keyframes cortex-intro-fade {
  from { opacity: 0.01; }
  to { opacity: 1; }
}
@keyframes cortex-intro-header {
  from { transform: translateY(-100%); }
  to { transform: none; }
}
/* The section fades. cortex.js marks each section after the hero whose top
   is below 85% of the window when the page loads (.cortex-reveal), and adds
   .cortex-revealed once that top passes 85%: opacity only, 450ms, once. It
   is opacity, never visibility (AUDIT-01 D1): the text stays in the tab
   order and the accessibility tree, and focus entering a section shows it
   at once (cortex.js removes the mark). Each section's separator is its
   ::before, so the line fades with its section. Without JavaScript or
   under reduced motion nothing is marked; printed, everything shows. */
@media (prefers-reduced-motion: no-preference) {
  body.cortex-page .cortex:where(:not(body)).cortex-reveal {
    opacity: 0;
    transition: opacity 450ms ease-out;
  }
  body.cortex-page .cortex:where(:not(body)).cortex-reveal:not(.cortex-revealed) {
    pointer-events: none;
  }
  body.cortex-page .cortex:where(:not(body)).cortex-reveal.cortex-revealed {
    opacity: 1;
  }
}
@media print {
  body.cortex-page .cortex:where(:not(body)).cortex-reveal {
    opacity: 1;
  }
  html.cortex-loadin body.cortex-page .masthead,
  html.cortex-intro body.cortex-page .masthead {
    transform: none;
    animation: none;
  }
}