/* ==========================================================================
   Truo Trade — marketing site
   Editorial grid, hairline registration, flat tonal surfaces. Canvas, white and
   Mist still carry the majority of every page and Ink still holds the dark
   fields, while Truo Blue carries recognition, labels and marketing actions.
   The legible pairs are named in tokens.css; local rules consume tokens only.
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--truo-font-body);
  font-size: var(--site-text-body);
  font-optical-sizing: auto;
  line-height: var(--truo-leading-body);
  color: var(--truo-ink);
  background: var(--truo-canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, figure, ul, ol, dl, dd, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
a { color: inherit; }

:where(a, button, summary, input, [tabindex]):focus-visible {
  outline: 2px solid var(--truo-color-focus);
  outline-offset: 3px;
  border-radius: var(--truo-radius-sm);
}

::selection { color: var(--truo-white); background: var(--truo-blue); }

/* --- Layout primitives ----------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--site-frame);
  padding-inline: var(--site-gutter);
  margin-inline: auto;
}

.shell--narrow { max-width: calc(var(--site-content) + 2 * 48px); }

.section { padding-block: var(--site-section-y); }
.section--tight { padding-block: var(--site-section-y-tight); }
.section--ruled { border-top: 1px solid var(--truo-line); }

/* Dark editorial sections use the same Ink field and contrast pairs. */
.section--ink {
  color: var(--truo-ink-text);
  background: var(--truo-ink);
}

.section--ink .eyebrow { color: var(--site-blue-on-ink); }
.section--ink .lead { color: #c3c8d1; }

/* Two Ink fields in a row read as one very long dark stretch, so the second
   drops its top padding and draws a hairline where the join is. The rule sits
   inside the shell rather than across the viewport, so it lines up with the
   content above and below it. */
.section--ink + .section--ink { padding-top: 0; }

.section--ink + .section--ink > .shell::before {
  content: "";
  display: block;
  height: 1px;
  margin-bottom: var(--site-section-y);
  background: var(--truo-ink-line);
}

/* The single full Truo Blue field is reserved for the conversion panel. */
.section--brand {
  color: var(--site-blue-field-text);
  background: var(--site-blue-field);
}

.section--brand .eyebrow { color: var(--site-blue-field-muted); }
.section--brand .lead { color: var(--site-blue-field-lead); }

.stack { display: flex; flex-direction: column; }
.stack > * + * { margin-top: var(--gap, 16px); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: 8px; left: 8px;
  z-index: 100;
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--truo-white);
  background: var(--site-blue-field);
  border-radius: var(--truo-radius-control);
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus { transform: translateY(0); }

/* --- Type ------------------------------------------------------------------- */

.eyebrow {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--truo-blue-dark);
}

.eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: currentcolor;
  opacity: 0.5;
}

.eyebrow--plain::before { display: none; }

.display,
.h2, .h3, .h4 {
  font-family: var(--truo-font-display);
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: var(--truo-leading-display);
  text-wrap: balance;
}

.display { font-size: var(--site-text-hero); }
.h2 { font-size: var(--site-text-h2); line-height: 1.08; }
.h3 { font-size: var(--site-text-h3); line-height: 1.15; letter-spacing: -0.022em; }
.h4 { font-size: var(--site-text-h4); line-height: 1.25; letter-spacing: -0.015em; font-weight: 600; }

.lead {
  max-width: 62ch;
  font-size: var(--site-text-lead);
  line-height: 1.5;
  color: var(--truo-slate);
  text-wrap: pretty;
}

.prose { max-width: var(--site-reading); color: var(--truo-slate); text-wrap: pretty; }
.mono { font-family: var(--truo-font-mono); font-variant-numeric: var(--truo-identifier-variant); }
.num { font-variant-numeric: var(--truo-numeric-variant); }

/* Truo Blue is the recognition accent on light fields. */
.accent { color: var(--truo-blue); }
.section--ink .accent { color: var(--site-blue-on-ink); }
.section--brand .accent { color: var(--site-blue-field-muted); }

/* --- Buttons ------------------------------------------------------------------ */

.btn {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  height: var(--truo-control-large);
  padding-inline: 22px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--truo-radius-control);
  cursor: pointer;
  transition: background var(--truo-duration-fast) var(--truo-ease),
              border-color var(--truo-duration-fast) var(--truo-ease),
              color var(--truo-duration-fast) var(--truo-ease);
}

.btn svg { flex: none; width: 17px; height: 17px; }

/* Truo Blue carries marketing actions and deepens on
   hover, so the state change is a step down the same ramp rather than a
   different colour. */
.btn--primary { color: var(--truo-white); background: var(--truo-blue); border-color: var(--truo-blue); }
.btn--primary:hover { background: var(--truo-blue-dark); border-color: var(--truo-blue-dark); }

.btn--secondary { color: var(--truo-ink); background: transparent; border-color: var(--truo-line); }
.btn--secondary:hover { color: var(--truo-blue-dark); background: var(--truo-blue-tint); border-color: var(--site-blue-line); }

/* The secondary action on a photographic ground. It cannot borrow --truo-line,
   which disappears over the bright frames of the hero video, so it carries its
   own translucent white edge and a glass fill. */
.btn--ghost {
  color: var(--truo-white);
  background: rgb(255 255 255 / 8%);
  border-color: rgb(255 255 255 / 30%);
  backdrop-filter: blur(10px);
}

.btn--ghost:hover { background: rgb(255 255 255 / 18%); border-color: rgb(255 255 255 / 52%); }

.btn--sm { height: var(--truo-control-default); padding-inline: 16px; font-size: 14px; }

.section--ink .btn--primary { color: var(--truo-white); background: var(--truo-blue); border-color: var(--truo-blue); }
.section--ink .btn--primary:hover { background: var(--truo-blue-dark); border-color: var(--truo-blue-dark); }
.section--ink .btn--secondary { color: var(--truo-ink-text); border-color: var(--truo-ink-line-strong); }
.section--ink .btn--secondary:hover { color: var(--site-blue-on-ink); background: var(--truo-ink-surface); border-color: var(--site-blue-on-ink); }

/* On the blue field the action inverts: white fill, blue-dark label. */
.section--brand .btn--primary { color: var(--truo-blue-dark); background: var(--truo-white); border-color: var(--truo-white); }
.section--brand .btn--primary:hover { background: var(--site-blue-field-lead); border-color: var(--site-blue-field-lead); }
.section--brand .btn--secondary { color: var(--site-blue-field-text); border-color: var(--site-blue-field-line); }
.section--brand .btn--secondary:hover { background: var(--site-blue-field-raised); border-color: var(--site-blue-field-text); }

.link-arrow {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  color: var(--truo-blue-dark);
  border-bottom: 1px solid var(--site-blue-line);
  padding-bottom: 3px;
  transition: border-color var(--truo-duration-fast) var(--truo-ease);
}

.link-arrow svg { width: 15px; height: 15px; transition: transform var(--truo-duration-normal) var(--truo-ease); }
.link-arrow:hover { border-bottom-color: var(--truo-blue); }
.link-arrow:hover svg { transform: translateX(3px); }
.section--ink .link-arrow { color: var(--site-blue-on-ink); border-bottom-color: color-mix(in srgb, var(--site-blue-on-ink) 40%, transparent); }
.section--ink .link-arrow:hover { border-bottom-color: var(--site-blue-on-ink); }
.section--brand .link-arrow { color: var(--site-blue-field-text); border-bottom-color: var(--site-blue-field-line); }
.section--brand .link-arrow:hover { border-bottom-color: var(--site-blue-field-text); }

/* --- Header --------------------------------------------------------------------- */

.header {
  position: sticky;
  top: 0;
  z-index: 50;
  --scroll-progress: 0;
  background: var(--truo-canvas);
  border-bottom: 1px solid var(--truo-line);
}

.header::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--truo-blue);
  transform: scaleX(var(--scroll-progress));
  transform-origin: left;
}

.header__inner {
  display: flex;
  gap: 32px;
  align-items: center;
  min-height: var(--site-header-h);
}

.header__brand { display: flex; align-items: center; flex: none; text-decoration: none; }
.header__brand img { width: auto; height: 30px; }

.header__nav { display: flex; gap: 4px; align-items: center; }

/* Direct children only. `.header__nav a` (0,1,1) outranks `.menu__item` (0,1,0),
   so an unscoped rule forced every link inside the platform dropdown to
   display:flex at a fixed 38px, collapsing each item and overlapping its name
   with its description. The trigger is a button one level down, inside the
   positioning wrapper the panel is anchored to. */
.header__nav > a,
.header__nav > div > button {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  height: 38px;
  padding-inline: 12px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--truo-ink);
  text-decoration: none;
  background: none;
  border: 0;
  border-radius: var(--truo-radius-control);
  cursor: pointer;
}

.header__nav > a:hover,
.header__nav > div > button:hover { color: var(--truo-blue-dark); background: var(--truo-blue-tint); }
.header__nav [aria-expanded="true"] { color: var(--truo-blue-dark); background: var(--truo-blue-tint); }
.header__nav > div > button svg { width: 13px; height: 13px; color: currentcolor; transition: transform var(--truo-duration-normal) var(--truo-ease); }
.header__nav [aria-expanded="true"] svg { transform: rotate(180deg); }

.header__actions { display: flex; gap: 10px; align-items: center; margin-left: auto; }

.header__menu-btn { display: none; }

/* Platform menu — one elevation step, as the system allows. */
.menu {
  position: absolute;
  top: calc(100% - 6px);
  /* Aligned to the trigger's left edge, not centred on it: the trigger sits
     near the left of the header, so a 680px panel centred on it hung 68px off
     the left of the viewport. */
  left: 0;
  z-index: 60;
  width: min(680px, calc(100vw - 2 * var(--site-gutter)));
  padding: 10px;
  background: var(--truo-white);
  border: 1px solid var(--truo-line);
  border-radius: var(--truo-radius-card);
  box-shadow: var(--truo-shadow-overlay);
}

.menu[hidden] { display: none; }
.menu__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }

.menu__item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
  text-decoration: none;
  border-radius: var(--truo-radius-panel);
  transition: background var(--truo-duration-fast) var(--truo-ease);
}

.menu__item:hover { background: var(--truo-mist); }

.menu__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--truo-radius-control);
  background: var(--truo-mist);
}

.menu__icon svg { width: 17px; height: 17px; }
.menu__icon[data-layer="crm"] { background: var(--truo-info-tint); color: var(--truo-info); }
.menu__icon[data-layer="execution"] { background: var(--truo-blue-tint); color: var(--truo-blue); }
.menu__icon[data-layer="compliance"] { background: var(--truo-clearance-tint); color: var(--truo-clearance); }
.menu__icon[data-layer="record"] { background: var(--truo-ink); color: var(--truo-white); }

/* Trade finance is a capability sitting on the record, not a fourth operating
   layer, so it takes the neutral mark rather than a fourth orientation colour. */
.menu__icon[data-layer="finance"] { background: var(--truo-mist); color: var(--truo-ink); }

.menu__name { display: block; font-size: 14.5px; font-weight: 600; }
.menu__desc { display: block; margin-top: 2px; font-size: 13px; line-height: 1.45; color: var(--truo-slate); }

/* Mobile disclosure. Opening it locks background scroll; the script restores
   focus to the trigger on close. */
.mobile-menu {
  position: fixed;
  inset: var(--site-header-h) 0 0;
  z-index: 45;
  overflow-y: auto;
  padding-block: 12px 40px;
  background: var(--truo-canvas);
  border-top: 1px solid var(--truo-line);
}

.mobile-menu[hidden] { display: none; }
.mobile-menu nav { display: flex; flex-direction: column; }

.mobile-menu a {
  padding: 18px 0;
  font-family: var(--truo-font-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.015em;
  text-decoration: none;
  border-bottom: 1px solid var(--truo-line);
}

.mobile-menu a:hover { color: var(--truo-blue-dark); }

body[data-menu-open="true"] { overflow: hidden; }

/* --- Hero -------------------------------------------------------------------------
   A full-bleed shipping plate. The section pulls up
   under the sticky header by exactly the header's own height, so the plate runs
   edge to edge and the header floats on it until the first scroll.

   Every colour here is committed rather than inherited: the video can fail to
   load, be blocked, or be skipped for reduced motion, and the hero has to read
   the same in all four cases. The poster and the Ink base underneath it do that
   work; the video only ever adds movement. */

.hero {
  position: relative;
  isolation: isolate;
  margin-top: calc(-1 * var(--site-header-h));
  color: var(--truo-ink-text);
  background: var(--truo-ink);

  /* Lift Truo Blue on the Ink/image field so the accent remains legible. */
  --hero-accent: var(--site-blue-on-ink);
}

.hero__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }

.hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  min-height: 100svh;
  padding-block: calc(var(--site-header-h) + clamp(28px, 4vw, 56px)) clamp(84px, 8vw, 116px);
  text-align: right;
}

.hero__video,
.hero__media::before {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* The poster as a background layer as well as the <video> poster attribute:
   it holds the frame before the file arrives, and holds it permanently when
   the picker decides not to fetch one at all. */
.hero__media::before {
  content: "";
  background: var(--truo-ink) url("../assets/video/shipping-line-poster.jpg") center / cover no-repeat;
}

.hero__lede,
.hero__stats { width: min(100%, 700px); }

.hero__eyebrow {
  justify-content: flex-end;
  color: #eef1f5;
  text-shadow: 0 1px 12px rgb(15 16 20 / 65%);
}
.hero__eyebrow::before { background: var(--hero-accent); opacity: 1; }

.hero__title {
  max-width: 15ch;
  margin-left: auto;
  margin-top: 20px;
  text-wrap: pretty;
  text-shadow: 0 2px 40px rgb(15 16 20 / 55%);
}

.hero .accent { color: var(--hero-accent); }

.hero__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; margin-top: clamp(24px, 3vw, 36px); }

/* --- Hero statistics ---------------------------------------------------------
   Third-party numbers only. Each one carries its own attribution so the page
   never has to be read alongside a sources list to be checked. */

.hero__stats {
  display: grid;
  gap: 22px 32px;
  margin-top: clamp(32px, 4vw, 56px);
  padding-top: 24px;
  border-top: 1px solid rgb(255 255 255 / 16%);
}

@media (min-width: 760px) {
  .hero__stats { grid-template-columns: repeat(3, 1fr); }
  .hero__stats li + li { padding-left: 24px; border-left: 1px solid rgb(255 255 255 / 12%); }
}

.hero__stats b {
  display: block;
  font-family: var(--truo-font-display);
  font-size: clamp(1.875rem, 1.5rem + 1.6vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: var(--truo-numeric-variant);
  color: var(--truo-white);
}

.hero__stats span {
  display: block;
  max-width: 32ch;
  margin-left: auto;
  margin-top: 12px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--truo-white);
}

.hero__stats i {
  display: block;
  margin-top: 7px;
  font-size: 11.5px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--truo-white);
}

.hero__stats sup { font-size: 0.7em; }

.js .hero__inner {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 180ms linear, transform 180ms var(--truo-ease);
}

.js .hero[data-copy-visible="true"] .hero__inner,
.js .hero__inner:focus-within {
  opacity: 1;
  transform: none;
}

/* --- Hero scroll cue ---------------------------------------------------- */

.hero__cue {
  position: absolute;
  bottom: clamp(24px, 3.5vw, 44px);
  right: var(--site-gutter);
  z-index: 1;
  display: inline-flex;
  gap: 10px;
  align-items: center;
  padding: 9px 18px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: #cfd4dc;
  background: rgb(255 255 255 / 6%);
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: var(--truo-radius-pill);
  backdrop-filter: blur(8px);
  transition: color var(--truo-duration-fast) var(--truo-ease),
              background var(--truo-duration-fast) var(--truo-ease),
              border-color var(--truo-duration-fast) var(--truo-ease);
}

.hero__cue:hover { color: var(--truo-white); background: rgb(255 255 255 / 12%); border-color: rgb(255 255 255 / 30%); }
.hero__cue svg { width: 14px; height: 14px; transform: rotate(90deg); }

@media (max-width: 620px) { .hero__cue { display: none; } }

/* Nothing above should fight a reduced-motion visitor: the video is never
   attached in that case, so the poster is the hero and stays put. */
@media (prefers-reduced-motion: reduce) {
  .hero__video { display: none; }
  .js .hero__inner { opacity: 1; transform: none; transition: none; }
}

/* --- The three problems -----------------------------------------------------------
   An Ink field directly under the hero, so the plate does not end at a hard
   edge. Each card is one argument at four sizes: the dimension it wins on, the
   number, the claim, and the line of evidence behind the number. The reasoning
   is in the research repository — this section exists to make the arguments
   land, so anything that reads as explanation has been cut out of it. */

.cost__title { margin-top: 20px; max-width: 20ch; }

.cost__list {
  display: grid;
  gap: 1px;
  margin-top: clamp(44px, 5.5vw, 68px);
  background: var(--truo-ink-line);
  border: 1px solid var(--truo-ink-line);
  border-radius: var(--truo-radius-card);
  overflow: hidden;
}

@media (min-width: 940px) { .cost__list { grid-template-columns: repeat(3, 1fr); } }

.cost__card {
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 3vw, 38px);
  background: var(--truo-ink);
  transition: background var(--truo-duration-normal) var(--truo-ease);
}

.cost__card:hover { background: var(--truo-ink-surface); }

.cost__rank {
  display: flex;
  gap: 12px;
  align-items: baseline;
  font-family: var(--truo-font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--site-blue-on-ink);
}

.cost__rank span {
  font-family: var(--truo-font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #8b93a1;
}

.cost__figure {
  margin-top: 22px;
  font-family: var(--truo-font-display);
  font-size: clamp(2.75rem, 2rem + 3vw, 4rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: var(--truo-numeric-variant);
  color: var(--truo-white);
}

.cost__head {
  margin-top: 22px;
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  color: var(--truo-ink-text);
}

.cost__proof {
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.6;
  color: #b6bcc7;
}

/* The attribution sits at the foot of the card whatever the copy above it
   does, so the three sources line up across the row. */
.cost__cite {
  margin-top: auto;
  padding-top: 26px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.8;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #7f8794;
}

.cost__cite a {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  color: #b6bcc7;
  text-decoration: none;
  border-bottom: 1px solid var(--truo-ink-line-strong);
  transition: color var(--truo-duration-fast) var(--truo-ease),
              border-color var(--truo-duration-fast) var(--truo-ease);
}

.cost__cite a:hover { color: var(--truo-white); border-bottom-color: currentcolor; }
/* Trailing, not leading: two citations that wrap onto separate lines have to
   stay flush with the left edge of the card. */
.cost__cite a { margin-right: 16px; }
.cost__cite svg { width: 11px; height: 11px; }
.cost__cite sup { font-size: 0.75em; }

.cost__note {
  max-width: 76ch;
  margin-top: 28px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--truo-ink-text-muted);
}

/* --- The people in the trade ------------------------------------------------------
   The same Ink field and hairline grid as the three problems above, because the
   two sections make the same shape of argument and should read as a pair. The
   exporter's card spans the row and sits one surface step higher: it is the one
   that signs, and the visual weight should say so without a second colour. */

.people__title { margin-top: 20px; max-width: 22ch; }
.people__lead { margin-top: 22px; max-width: 56ch; }

.people__grid {
  display: grid;
  gap: 1px;
  margin-top: clamp(44px, 5.5vw, 68px);
  background: var(--truo-ink-line);
  border: 1px solid var(--truo-ink-line);
  border-radius: var(--truo-radius-card);
  overflow: hidden;
}

@media (min-width: 780px) {
  .people__grid { grid-template-columns: repeat(2, 1fr); }
  .person--lead { grid-column: span 2; }
}

@media (min-width: 1180px) {
  .people__grid { grid-template-columns: repeat(4, 1fr); }
  .person--lead { grid-column: span 4; }
  /* Three columns: the quote, what it costs, what changes. Each row starts at
     the top of its own column, so none of the stacked spacing applies. */
  .person--lead .person__body {
    display: grid;
    grid-template-columns: 1.25fr 1fr 1fr;
    gap: 36px;
    align-items: start;
  }

  .person--lead .person__cost { margin-top: 0; }
  .person--lead .person__fix { margin-top: 0; padding-top: 0; }
  /* Chip plus one line. The four role labels are one or two lines long, and
     without a floor the quotes start at four different heights across the row. */
  .person:not(.person--lead) .person__role { min-height: 70px; align-content: start; }
}

.person {
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 2.6vw, 34px);
  background: var(--truo-ink);
  transition: background var(--truo-duration-normal) var(--truo-ease);
}

.person:hover { background: var(--truo-ink-surface); }
.person--lead { background: var(--truo-ink-surface); }
.person--lead:hover { background: var(--truo-ink-surface-raised); }

.person__role {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--truo-ink-text-muted);
}

.person__tag {
  padding: 4px 9px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--site-blue-on-ink);
  background: color-mix(in srgb, var(--truo-blue) 18%, transparent);
  border-radius: var(--truo-radius-sm);
}

/* The buyer's chip is the one solid red mark in the section. */
.person--lead .person__tag { color: var(--truo-ink); background: var(--site-blue-on-ink); }

.person__quote {
  margin-top: 20px;
  font-family: var(--truo-font-display);
  font-size: clamp(1.125rem, 1.02rem + 0.45vw, 1.3125rem);
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.28;
  text-wrap: pretty;
  color: var(--truo-white);
}

.person--lead .person__quote {
  margin-top: 0;
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem);
}

.person--lead .person__body { margin-top: 22px; }

.person__cost {
  margin-top: 16px;
  font-size: 14.5px;
  line-height: 1.6;
  color: #b6bcc7;
}

/* Pinned to the foot of the card, so what changes lines up across the row the
   way the citations do in the section above. */
.person__fix {
  margin-top: auto;
  padding-top: 24px;
  font-size: 13.5px;
  line-height: 1.6;
  color: #b6bcc7;
}

.person__fix b {
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 11px;
  color: var(--site-blue-on-ink);
}

.people__note {
  max-width: 76ch;
  margin-top: 28px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--truo-ink-text-muted);
}

/* --- Stage section heading -------------------------------------------------- */

.stage-section__title { margin-top: 20px; max-width: 20ch; }

/* --- Product stage --------------------------------------------------------------------
   The demo frame. One elevation step, hairline border, Ink chrome bar carrying
   the step controls so the product surface itself stays uninterrupted. */

.stage { margin-top: clamp(40px, 5vw, 64px); }

.stage__frame {
  overflow: hidden;
  background: var(--truo-white);
  border: 1px solid var(--truo-line);
  border-radius: var(--truo-radius-card);
  box-shadow: 0 1px 2px rgb(23 25 31 / 4%), 0 24px 48px -24px rgb(23 25 31 / 18%);
}

.stage__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: center;
  padding: 10px 12px 10px 16px;
  background: var(--truo-ink);
  border-bottom: 1px solid var(--truo-ink-line);
}

.stage__steps { display: flex; gap: 4px; align-items: center; }

.stage__step {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  height: 32px;
  padding-inline: 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--truo-ink-text-muted);
  background: transparent;
  border: 0;
  border-radius: var(--truo-radius-control);
  cursor: pointer;
  transition: color var(--truo-duration-fast) var(--truo-ease),
              background var(--truo-duration-fast) var(--truo-ease);
}

.stage__step:hover { color: var(--truo-ink-text); background: var(--truo-ink-surface); }
.stage__step[aria-selected="true"] { color: var(--truo-white); background: var(--truo-ink-surface-raised); box-shadow: inset 0 -2px 0 var(--truo-blue); }

.stage__step-num {
  font-family: var(--truo-font-mono);
  font-size: 11px;
  font-variant-numeric: var(--truo-identifier-variant);
  color: var(--truo-ink-text-muted);
}

.stage__step[aria-selected="true"] .stage__step-num { color: var(--truo-blue); }

.stage__controls { display: flex; gap: 8px; align-items: center; margin-left: auto; }

.stage__caption {
  display: none;
  font-size: 12.5px;
  color: var(--truo-ink-text-muted);
}

@media (min-width: 1100px) { .stage__caption { display: block; } }

.stage__play {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  height: 32px;
  padding-inline: 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--truo-ink-text);
  background: transparent;
  border: 1px solid var(--truo-ink-line-strong);
  border-radius: var(--truo-radius-control);
  cursor: pointer;
}

.stage__play:hover { background: var(--truo-ink-surface); }
.stage__play svg { width: 13px; height: 13px; }
.stage__play[hidden] { display: none; }

/* Progress hairline under the chrome bar: the only autoplay affordance. */
.stage__progress { height: 2px; background: var(--truo-ink-line); }

.stage__progress span {
  display: block;
  width: var(--progress, 0%);
  height: 100%;
  background: var(--truo-blue);
}

.stage[data-playing="true"] .stage__progress span { transition: width 120ms linear; }

.stage__viewport { position: relative; }

.stage__screen { display: none; }
.stage__screen[data-active="true"] { display: block; animation: stage-in var(--truo-duration-slow) var(--truo-ease) both; }

/* The hero runs a fixed 16:9 frame, the reference frame the screens are authored
   at and the shape the demo routes and the 1600x900 captures already use. All
   four states therefore occupy identical geometry and a tab change never moves
   the page; sized individually they run 623px to 734px at full width, which
   shifted everything below the hero by up to 111px on every step.
   The frame cannot simply crop to 16:9, because below about 1180px the screens
   reflow to as much as 1270px against a 413px frame. So each state is laid out
   at a fixed reference width and scaled to whatever the frame is: the geometry
   is width-independent, nothing is ever cut off, and the product text stays live
   DOM rather than becoming an image.
   1360px is the reference because it is what the stage already resolves to
   inside the 1440px page frame — the scale is 0.99 at desktop, so the screens
   render at their designed size there and only shrink on narrower viewports,
   the way the PNG captures would.
   Scoped to .stage: the chapters stage reuses these classes in a column half as
   wide, where a 16:9 frame would crop rather than frame. */
.stage .stage__viewport {
  --stage-ref: 1360px;
  display: grid;
  container-type: inline-size;
}

.stage .stage__viewport > .stage__screen,
.stage .stage__viewport > .stage__mobile { grid-area: 1 / 1; }

.stage .stage__viewport > .stage__screen {
  display: block;
  visibility: hidden;
}

.stage .stage__viewport > .stage__screen[data-active="true"] { visibility: visible; }

/* Each state fills the frame itself — left at its own height the white of
   .stage__frame would show below the product canvas. */
.stage .stage__viewport > .stage__screen > .tp { height: 100%; }

/* Dividing one length by another is CSS Values 4, so the frame is gated on it.
   Where it is unavailable the rules above still stand on their own: the four
   states share one grid cell, which makes the frame as tall as the tallest of
   them. That is the same equal height, just not a guaranteed 16:9. */
@supports (transform: scale(calc(100cqw / 1360px))) {
  .stage .stage__viewport {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
  }

  .stage .stage__viewport > .stage__screen {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--stage-ref);
    height: calc(var(--stage-ref) * 9 / 16);
    transform: scale(calc(100cqw / var(--stage-ref)));
    transform-origin: top left;
  }
}

@keyframes stage-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .stage__screen[data-active="true"] { animation: none; }
}

.stage__note {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  align-items: baseline;
  padding: 14px 16px;
  font-size: 13px;
  color: var(--truo-slate);
  background: var(--truo-mist);
  border-top: 1px solid var(--truo-line);
}

.stage__note b { font-weight: 600; color: var(--truo-ink); }
.stage__note .mono { color: var(--truo-info); }

/* --- Mobile hero surface --------------------------------------------------
   Below 760px the product shell is replaced, not scaled: a desktop board
   squeezed into a phone column stops being evidence and becomes noise. These
   cards carry the identical record, values, owner change and open requirement. */

.stage__mobile { display: none; padding: 16px; background: var(--truo-mist); }

.mstep {
  display: none;
  padding: 18px;
  background: var(--truo-white);
  border: 1px solid var(--truo-line);
  border-radius: var(--truo-radius-card);
}

.mstep[data-active="true"] { display: block; }

.mstep__head { display: flex; gap: 12px; align-items: center; justify-content: space-between; }
.mstep__title { margin-top: 14px; font-family: var(--truo-font-display); font-size: 20px; font-weight: 700; line-height: 1.2; letter-spacing: -0.018em; }

.mstep__value {
  margin-top: 8px;
  font-family: var(--truo-font-display);
  font-size: 30px;
  font-weight: 700;
  font-variant-numeric: var(--truo-numeric-variant);
  letter-spacing: -0.02em;
}

.mstep__chain { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 14px; }

.mstep__chain li {
  padding: 6px 10px;
  font-family: var(--truo-font-mono);
  font-size: 12px;
  font-variant-numeric: var(--truo-identifier-variant);
  color: var(--truo-slate);
  background: var(--truo-mist);
  border: 1px solid transparent;
  border-radius: var(--truo-radius-control);
}

.mstep__chain li + li::before { content: "→"; margin-right: 8px; margin-left: -4px; color: var(--truo-line); }
.mstep__chain li[data-state="new"] { color: var(--truo-blue-dark); background: var(--truo-blue-tint); border-color: color-mix(in srgb, var(--truo-blue) 40%, transparent); }

.mstep__rows { margin-top: 18px; }

.mstep__rows > div {
  display: flex;
  gap: 16px;
  align-items: baseline;
  justify-content: space-between;
  padding: 11px 0;
  font-size: 14px;
  border-bottom: 1px solid var(--truo-line);
}

.mstep__rows > div:last-child { border-bottom: 0; }
.mstep__rows dt { flex: none; color: var(--truo-slate); }
.mstep__rows dd { margin: 0; font-weight: 600; text-align: right; }

.mstep__next,
.mstep__attention {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  margin-top: 16px;
  font-size: 13.5px;
  line-height: 1.5;
  border-radius: var(--truo-radius-panel);
}

.mstep__next svg,
.mstep__attention svg { flex: none; width: 17px; height: 17px; margin-top: 1px; }
.mstep__next b,
.mstep__attention b { display: block; font-weight: 600; }

.mstep__next { color: var(--truo-clearance-dark); background: var(--truo-clearance-tint); }
.mstep__next svg { color: var(--truo-clearance); }
.mstep__attention { color: var(--truo-warning); background: var(--truo-warning-tint); }

@media (max-width: 760px) {
  .stage__viewport > .stage__screen,
  .stage .stage__viewport > .stage__screen { display: none !important; }

  /* The phone surface replaces the shell rather than being framed by it. */
  .stage .stage__viewport { aspect-ratio: auto; }

  /* The phone surface restates the same four states, so it is stacked the same
     way for the same reason: the cards run 407px to 486px, and without this the
     step controls shift under the thumb that just used them. */
  .stage__mobile { display: grid; }
  .stage__mobile > .mstep { grid-area: 1 / 1; display: block; visibility: hidden; }
  .stage__mobile > .mstep[data-active="true"] { visibility: visible; }
}

/* --- Fragmentation --------------------------------------------------------------------- */

.fragments {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: clamp(40px, 5vw, 64px);
}

.fragment {
  padding: 20px;
  background: var(--truo-ink-surface);
  border: 1px solid var(--truo-ink-line);
  border-radius: var(--truo-radius-card);
}

.fragment__head {
  display: flex;
  gap: 10px;
  align-items: center;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--truo-ink-line);
}

.fragment__system { font-size: 12px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--truo-ink-text-muted); }

.fragment__rows { display: flex; flex-direction: column; gap: 1px; }

.fragment__row {
  display: flex;
  gap: 16px;
  align-items: baseline;
  justify-content: space-between;
  padding: 9px 0;
  font-size: 13.5px;
  border-bottom: 1px solid color-mix(in srgb, var(--truo-ink-line) 60%, transparent);
}

.fragment__row:last-child { border-bottom: 0; }
.fragment__row dt { color: var(--truo-ink-text-muted); }
.fragment__row dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: var(--truo-numeric-variant); }
.fragment__row dd[data-missing] { color: #ff8f96; font-weight: 500; }
.fragment__row dd[data-stale] { color: #e8b060; }

.fragment__foot {
  margin-top: 16px;
  padding-top: 14px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--truo-ink-text-muted);
  border-top: 1px solid var(--truo-ink-line);
}

/* --- Pinned product carousel ------------------------------------------------------------- */

.chapters-section { height: 300svh; padding-block: 0; }

.chapters-section__sticky {
  position: sticky;
  top: var(--site-header-h);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100svh - var(--site-header-h));
  padding-block: clamp(28px, 4vh, 52px);
}

.chapters {
  width: min(100%, 1120px, calc((100svh - var(--site-header-h) - 350px) * 16 / 9));
  margin: clamp(28px, 4vh, 48px) auto 0;
}
.chapters__viewport { overflow: hidden; border-radius: var(--truo-radius-card); }

.chapters__track {
  display: flex;
  transform: translateX(calc(var(--carousel-slide, 0) * -100%));
  transition: transform var(--truo-duration-slow) var(--truo-ease);
}

.chapter { flex: 0 0 100%; min-width: 0; }
.chapter__poster { margin: 0; background: var(--truo-ink); }

.chapter__poster img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.chapter__caption {
  display: flex;
  gap: 14px;
  align-items: center;
  min-height: 58px;
  padding: 14px 18px;
  color: var(--truo-ink);
  background: var(--truo-white);
  border-top: 1px solid var(--truo-line);
}

.chapter__num {
  flex: none;
  font-family: var(--truo-font-mono);
  font-size: 13px;
  color: var(--truo-blue-dark);
}
.chapter__title { font-size: var(--site-text-h4); color: inherit; }

.chapters__controls {
  display: grid;
  grid-template-columns: 48px 1fr 48px;
  gap: 12px;
  align-items: center;
  margin-top: 16px;
}

.chapters__arrow {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  color: var(--truo-ink);
  background: var(--truo-white);
  border: 1px solid var(--truo-line-strong);
  border-radius: 50%;
  cursor: pointer;
  transition: color var(--truo-duration-fast) var(--truo-ease),
              background var(--truo-duration-fast) var(--truo-ease);
}

.chapters__arrow:hover:not(:disabled) { color: var(--truo-white); background: var(--truo-ink); }
.chapters__arrow:disabled { opacity: 0.35; cursor: default; }
.chapters__arrow svg { width: 18px; height: 18px; }
.chapters__arrow:first-child svg { transform: rotate(180deg); }
.chapters__status { font-family: var(--truo-font-mono); font-size: 13px; text-align: center; color: var(--truo-slate); }

/* --- Continuity thread ---------------------------------------------------------------------
   The signature visual: one thread, three layers, nothing hidden by a filter. */

.thread { margin-top: clamp(40px, 5vw, 64px); }

.thread__controls { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }

.thread__filter {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  height: var(--truo-control-default);
  padding-inline: 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--truo-ink-text);
  background: transparent;
  border: 1px solid var(--truo-ink-line-strong);
  border-radius: var(--truo-radius-pill);
  cursor: pointer;
  transition: background var(--truo-duration-fast) var(--truo-ease),
              border-color var(--truo-duration-fast) var(--truo-ease);
}

.thread__filter::before {
  content: "";
  width: 8px; height: 8px;
  background: var(--dot, var(--truo-ink-text-muted));
  border-radius: 50%;
}

.thread__filter[data-layer="crm"] { --dot: #4a7fe8; }
.thread__filter[data-layer="execution"] { --dot: var(--truo-blue); }
.thread__filter[data-layer="compliance"] { --dot: #17a394; }
.thread__filter:hover { background: var(--truo-ink-surface); }
.thread__filter[aria-pressed="true"] { color: var(--truo-ink); background: var(--truo-white); border-color: var(--truo-white); }

.thread__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  gap: clamp(24px, 3vw, 48px);
  align-items: start;
}

.thread__line { position: relative; padding-left: 34px; }

.thread__line::before {
  content: "";
  position: absolute;
  top: 10px; bottom: 10px; left: 7px;
  width: 1px;
  background: var(--truo-ink-line-strong);
}

.thread__events { display: flex; flex-direction: column; gap: 8px; }

.thread__event {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 15px 18px;
  background: var(--truo-ink-surface);
  border: 1px solid var(--truo-ink-line);
  border-radius: var(--truo-radius-panel);
  transition: opacity var(--truo-duration-normal) var(--truo-ease),
              border-color var(--truo-duration-normal) var(--truo-ease),
              background var(--truo-duration-normal) var(--truo-ease);
}

.thread__event::before {
  content: "";
  position: absolute;
  left: -34px;
  width: 15px; height: 15px;
  background: var(--truo-ink);
  border: 3px solid var(--dot, var(--truo-ink-text-muted));
  border-radius: 50%;
}

.thread__event[data-layer="crm"] { --dot: #4a7fe8; }
.thread__event[data-layer="execution"] { --dot: var(--truo-blue); }
.thread__event[data-layer="compliance"] { --dot: #17a394; }

.thread__event:hover { border-color: var(--truo-ink-line-strong); background: var(--truo-ink-surface-raised); }

.thread[data-filter]:not([data-filter="all"]) .thread__event[data-on="false"] { opacity: 0.3; }

.thread__when {
  font-family: var(--truo-font-mono);
  font-size: 11.5px;
  font-variant-numeric: var(--truo-identifier-variant);
  color: var(--truo-ink-text-muted);
  white-space: nowrap;
}

.thread__title { font-size: 14.5px; font-weight: 600; }
.thread__meta { margin-top: 3px; font-size: 13px; line-height: 1.45; color: var(--truo-ink-text-muted); }

.thread__record {
  position: sticky;
  top: calc(var(--site-header-h) + 24px);
  padding: 20px;
  background: var(--truo-ink-surface);
  border: 1px solid var(--truo-ink-line-strong);
  border-radius: var(--truo-radius-card);
}

.thread__record-label { font-size: 11px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--truo-ink-text-muted); }
.thread__record-title { margin-top: 6px; font-family: var(--truo-font-display); font-size: 19px; font-weight: 700; letter-spacing: -0.015em; }

.thread__facts { margin-top: 18px; }

.thread__fact { padding: 11px 0; border-bottom: 1px solid var(--truo-ink-line); }
.thread__fact:last-child { border-bottom: 0; }
.thread__fact dt { font-size: 11.5px; color: var(--truo-ink-text-muted); }
.thread__fact dd { margin: 4px 0 0; font-size: 13.5px; font-weight: 600; }

/* --- Role tabs --------------------------------------------------------------------------- */

.roles__tablist {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  margin-top: 36px;
  background: var(--truo-mist);
  border: 1px solid var(--truo-line);
  border-radius: var(--truo-radius-pill);
  width: fit-content;
}

.roles__tab {
  height: 40px;
  padding-inline: 22px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--truo-slate);
  background: transparent;
  border: 0;
  border-radius: var(--truo-radius-pill);
  cursor: pointer;
  transition: color var(--truo-duration-fast) var(--truo-ease), background var(--truo-duration-fast) var(--truo-ease);
}

.roles__tab:hover { color: var(--truo-blue-dark); }
.roles__tab[aria-selected="true"] { color: var(--truo-blue-dark); font-weight: 600; background: var(--truo-white); box-shadow: var(--truo-shadow-raised); }

.roles__panel { margin-top: 40px; }
.roles__panel[hidden] { display: none; }

.roles__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

.roles__list { display: flex; flex-direction: column; gap: 2px; margin-top: 26px; }

.roles__item {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 14px;
  padding: 14px 0;
  font-size: 15px;
  line-height: 1.5;
  border-bottom: 1px solid var(--truo-line);
}

.roles__item:last-of-type { border-bottom: 0; }
.roles__item svg { width: 18px; height: 18px; margin-top: 2px; color: var(--role, var(--truo-slate)); }
.roles__item > span { display: block; color: var(--truo-slate); }
.roles__item b { color: var(--truo-ink); font-weight: 600; }

.roles__crop {
  overflow: hidden;
  background: var(--truo-mist);
  border: 1px solid var(--truo-line);
  border-radius: var(--truo-radius-card);
}

.roles__crop img { width: 100%; height: auto; }

.roles__crop figcaption {
  padding: 12px 16px;
  font-size: 12.5px;
  color: var(--truo-slate);
  background: var(--truo-white);
  border-top: 1px solid var(--truo-line);
}

/* --- Evidence / how it is built ------------------------------------------------------------ */

.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: clamp(36px, 4vw, 56px); }

/* Two lines' worth of floor under the card titles. Without it a one-line title
   starts its list 7px above its neighbours', and three lists that each carry
   four items read as ragged rather than parallel. The .h4 leading is 1.25, so
   two lines is exactly 2.5em and the floor tracks the fluid type step. */
.grid-3 .card__title { min-height: 2.5em; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

.card {
  display: flex;
  flex-direction: column;
  padding: 24px;
  background: var(--truo-white);
  border: 1px solid var(--truo-line);
  border-radius: var(--truo-radius-card);
}

.card__label { font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--truo-blue-dark); }
.card__title { margin-top: 12px; }

.card__list { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }

.card__list li {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--truo-slate);
}

.card__list svg { width: 15px; height: 15px; margin-top: 3px; color: var(--truo-clearance); }

/* Identifiers and action labels are single tokens: breaking `Create order`
   across two lines would read as two separate actions. */
.card__list .mono { white-space: nowrap; }
/* --- FAQ -------------------------------------------------------------------------------- */

.faq { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.faq__list { border-top: 1px solid var(--truo-line); }

.faq__item { border-bottom: 1px solid var(--truo-line); }

.faq__item summary {
  display: flex;
  gap: 20px;
  align-items: center;
  padding: 22px 0;
  font-family: var(--truo-font-display);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  font-weight: 600;
  letter-spacing: -0.012em;
  cursor: pointer;
  list-style: none;
}

.faq__item summary::-webkit-details-marker { display: none; }

.faq__item summary::after {
  content: "";
  flex: none;
  width: 11px; height: 11px;
  margin-left: auto;
  border-right: 1.5px solid var(--truo-slate);
  border-bottom: 1.5px solid var(--truo-slate);
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform var(--truo-duration-normal) var(--truo-ease);
}

.faq__item summary:hover { color: var(--truo-blue-dark); }
.faq__item[open] summary { color: var(--truo-blue-dark); }
.faq__item[open] summary::after { border-color: var(--truo-blue); transform: rotate(225deg) translate(-3px, -3px); }
.faq__answer { max-width: 68ch; padding-bottom: 24px; font-size: 15px; line-height: 1.6; color: var(--truo-slate); }
.faq__answer p + p { margin-top: 12px; }

.faq-section .prose { color: #c3c8d1; }
.faq-section .faq__list { display: flex; flex-direction: column; gap: 8px; border-top: 0; }

.faq-section .faq__item {
  padding-inline: 20px;
  background: var(--truo-ink-surface);
  border: 1px solid var(--truo-ink-line);
  border-radius: var(--truo-radius-panel);
}

.faq-section .faq__item summary:hover,
.faq-section .faq__item[open] summary { color: var(--site-blue-on-ink); }
.faq-section .faq__item summary::after { border-color: var(--truo-ink-text-muted); }
.faq-section .faq__item[open] summary::after { border-color: var(--site-blue-on-ink); }
.faq-section .faq__answer { color: var(--truo-ink-text-muted); }

/* --- Conversion panel and footer ------------------------------------------------------------ */

.close__mark { width: auto; height: 34px; }
.close__title { max-width: 16ch; margin-top: 28px; }
.close__lead { margin-top: 20px; }
.close__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.close__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 32px;
  padding-top: 28px;
  margin-top: 44px;
  font-size: 13.5px;
  color: var(--site-blue-field-lead);
  border-top: 1px solid var(--site-blue-field-line);
}

.close__meta li { display: flex; gap: 8px; align-items: center; }
.close__meta svg { width: 15px; height: 15px; }

.footer { padding-block: clamp(48px, 6vw, 80px) 40px; background: var(--truo-canvas); border-top: 1px solid var(--truo-line); }

.footer__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); }
.footer__brand img { width: auto; height: 30px; }
.footer__note { max-width: 30ch; margin-top: 16px; font-size: 13.5px; line-height: 1.55; color: var(--truo-slate); }

.footer__col h3 { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--truo-slate); }
.footer__col ul { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.footer__col a { font-size: 14px; text-decoration: none; color: var(--truo-ink); }
.footer__col a:hover { color: var(--truo-blue-dark); text-decoration: underline; text-underline-offset: 3px; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  align-items: center;
  padding-top: 28px;
  margin-top: clamp(40px, 5vw, 64px);
  font-size: 13px;
  color: var(--truo-slate);
  border-top: 1px solid var(--truo-line);
}

.footer__bottom nav { display: flex; flex-wrap: wrap; gap: 20px; margin-left: auto; }
.footer__bottom a { text-decoration: none; }
.footer__bottom a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* --- Scroll reveal ------------------------------------------------------------------------
   Opacity plus ≤16px translation. Applied only once JS confirms support, so the
   no-JS document renders fully visible. */

[data-reveal] { opacity: 1; }

.js [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 420ms var(--truo-ease), transform 420ms var(--truo-ease);
}

.js [data-reveal][data-shown="true"] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* --- Responsive ---------------------------------------------------------------------------- */

@media (max-width: 1180px) {
  .footer__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 1024px) {
  .header__nav { display: none; }
  .header__menu-btn { display: inline-flex; }
  /* The secondary CTA gives way to the menu button, which is itself a
     secondary button and must survive this rule. */
  .header__actions .btn--secondary:not(.header__menu-btn) { display: none; }
  .model { grid-template-columns: minmax(0, 1fr); }
  .roles__grid { grid-template-columns: minmax(0, 1fr); }
  .thread__grid { grid-template-columns: minmax(0, 1fr); }
  .thread__record { position: static; }
  .faq { grid-template-columns: minmax(0, 1fr); }
  .trust { grid-template-columns: minmax(0, 1fr); }

}

@media (max-width: 860px) {
  .fragments { grid-template-columns: minmax(0, 1fr); }
  .grid-3 { grid-template-columns: minmax(0, 1fr); }
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  /* At phone widths the wordmark and the menu button own the header. The tour
     CTA is the first thing in the hero and the last thing on the page, so
     repeating it here only crowds the two controls that must stay reachable. */
  .header__actions .btn--primary { display: none; }
  .header__inner { gap: 16px; }

  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero__video { object-position: left center; }
  .hero__media::before { background-position: left center; }
  .hero__actions .btn { flex: 1 1 100%; }
  .stage__bar { padding-inline: 10px; }
  .stage__steps { width: 100%; overflow-x: auto; scrollbar-width: none; }
  .stage__steps::-webkit-scrollbar { display: none; }
  .stage__controls { margin-left: 0; }
  .roles__tablist { width: 100%; }
  .roles__tab { flex: 1; padding-inline: 12px; }
  .footer__bottom nav { margin-left: 0; }
}