@import url("tokens.css");

/* ==========================================================================
   Agent Rooms v3 — landing.css
   The public marketing page (agent-rooms/landing.php).

   Depends on tokens.css, which it imports itself: landing.php links exactly one
   Agent Rooms stylesheet, so the design system has to arrive with it. No raw
   colour value appears below this line, no font is fetched, no icon font, no
   CDN. Everything here is same-origin or computed.

   Relationship to app.css
   -----------------------
   Same family, different density. The app is an instrument: 4px grid, 30px
   controls, hairline structure. The landing page is the same instrument
   photographed with more air — bigger type, larger controls, wider gutters —
   but the same hairlines, the same 6px radius ceiling, the same palette, the
   same 120–180ms ease-out motion. Nothing here is glossy.

   Conventions (identical to app.css)
   ----------------------------------
   .ar-block__element   structure
   .is-*                transient / rendered state
   [data-*]             server-driven state
   ========================================================================== */


/* ==========================================================================
   1. LOCAL SCALE
   Display sizes above the token type-scale ceiling (--ar-fs-3xl = 26px) and a
   few layout metrics. These are geometry, not palette: no colour is defined
   here and no token is redefined.
   ========================================================================== */
.ar-landing {
  /* Display type. Fluid between the 320px floor and the 1440px ceiling. */
  --arl-fs-h1:      clamp(2rem, 1.30rem + 3.10vw, 3.75rem);   /* 32 -> 60 */
  --arl-fs-h2:      clamp(1.5rem, 1.19rem + 1.38vw, 2.25rem); /* 24 -> 36 */
  --arl-fs-lede:    clamp(1rem, 0.94rem + 0.28vw, 1.1875rem); /* 16 -> 19 */
  --arl-fs-body:    1rem;                                     /* 16 */
  --arl-fs-final:   clamp(1.625rem, 1.20rem + 1.90vw, 2.625rem);

  /* Layout metrics */
  --arl-wrap:       1180px;
  --arl-wrap-narrow: 820px;
  --arl-gutter:     clamp(16px, 4vw, 40px);
  --arl-section-y:  clamp(56px, 7vw, 104px);
  --arl-rail-w:     clamp(44px, 6vw, 56px);

  /* Section background, so anything that has to knock a hole in the page
     (the pipeline spine, for one) can match whatever band it sits in. */
  --arl-sec-bg: var(--ar-bg);

  /* landing.php writes style="--p:var(--ar-p1)" inline. tokens.css names the
     persona ramp --ar-p-1..8. These three aliases bridge the two spellings
     without introducing a colour or altering a token. */
  --ar-p1: var(--ar-p-1);
  --ar-p2: var(--ar-p-2);
  --ar-p3: var(--ar-p-3);
  --ar-p4: var(--ar-p-4);
  --ar-p5: var(--ar-p-5);
  --ar-p6: var(--ar-p-6);
  --ar-p7: var(--ar-p-7);
  --ar-p8: var(--ar-p-8);
}


/* ==========================================================================
   2. RESET + BASE
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

body.ar-landing {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--ar-bg);
  color: var(--ar-text);
  font-family: var(--ar-font-sans);
  font-size: var(--arl-fs-body);
  line-height: var(--ar-lh-normal);
  letter-spacing: var(--ar-ls-tight);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;
}

.ar-landing ::selection {
  background: var(--ar-select-bg);
  color: var(--ar-select-fg);
}

/* :where() is load-bearing, not decoration. Written as `.ar-landing h1` these
   are (0,1,1) selectors, which outrank every single-class component rule below
   — `.ar-h1`, `.ar-sub`, `.ar-card__title`, `.ar-plan__rows` and a dozen more
   are all (0,1,0). The reset was silently zeroing their margins and padding,
   which is why headings sat on their own body copy and lists ran into their
   card edges. :where() drops these to specificity 0: they still clear the UA
   defaults, and they no longer beat anything. */
.ar-landing :where(h1, h2, h3, h4, p, figure, figcaption, blockquote, dl, dd) {
  margin: 0;
}

.ar-landing :where(ul, ol) { margin: 0; padding: 0; list-style: none; }

.ar-landing img,
.ar-landing svg,
.ar-landing video,
.ar-landing canvas,
.ar-landing iframe { display: block; max-width: 100%; }

.ar-landing svg { flex: none; }
.ar-landing button { font: inherit; color: inherit; letter-spacing: inherit; }
.ar-landing table { border-collapse: separate; border-spacing: 0; }
.ar-landing code { font-family: var(--ar-font-mono); letter-spacing: 0; }

/* Exclude buttons: `.ar-landing a` (0,1,1) otherwise outranks
   `.ar-btn--primary` (0,1,0) and paints accent-on-accent, which made every
   primary CTA's label invisible.
   Scoped to .ar-main, not the whole body: the shared site nav and footer are
   injected into this same document, and at (0,2,1) these rules outranked
   `.nav-link` and `.social-link-v2` and repainted the site chrome's links in
   the Agent Rooms accent. The page's typography is the page's business; the
   chrome's is not. */
.ar-main a:not(.ar-btn) { color: var(--ar-accent); text-decoration: none; }
.ar-main a.ar-btn { text-decoration: none; }
.ar-main a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* One focus definition, inherited by everything — same rule as app.css. */
.ar-landing :where(a, button, summary, [tabindex]):focus { outline: none; }
.ar-landing :where(a, button, summary, [tabindex]):focus-visible {
  outline: var(--ar-focus-ring);
  outline-offset: var(--ar-focus-offset);
  border-radius: var(--ar-r-2);
}

/* Skip link — invisible until it matters, then unmissable. */
.ar-skip {
  position: fixed;
  top: var(--ar-s-2);
  left: var(--ar-s-2);
  z-index: var(--ar-z-toast);
  padding: var(--ar-s-2) var(--ar-s-4);
  border: var(--ar-bw) solid var(--ar-accent);
  border-radius: var(--ar-r-2);
  background: var(--ar-surface);
  color: var(--ar-text-strong);
  font-size: var(--ar-fs-sm);
  font-weight: var(--ar-fw-semibold);
  box-shadow: var(--ar-shadow-popover);
  transform: translateY(calc(-100% - var(--ar-s-4)));
  transition: transform var(--ar-t-base);
}
.ar-skip:focus-visible { transform: translateY(0); text-decoration: none; }

/* Inline SVG sizing. ar_icon() emits width/height 24 attributes; CSS wins. */
.ar-i { width: 20px; height: 20px; }
.ar-i--xs { width: 13px; height: 13px; }
.ar-i--sm { width: 16px; height: 16px; }
.ar-i--lg { width: 34px; height: 34px; }


/* ==========================================================================
   3. LAYOUT — wrap, sections, headings
   ========================================================================== */
.ar-main { display: block; }

.ar-wrap {
  width: 100%;
  max-width: var(--arl-wrap);
  margin-inline: auto;
  padding-inline: var(--arl-gutter);
}
.ar-wrap--narrow { max-width: var(--arl-wrap-narrow); }

.ar-section {
  --arl-sec-bg: var(--ar-bg);
  position: relative;
  padding-block: var(--arl-section-y);
  background: var(--arl-sec-bg);
}
.ar-section--tight { padding-block: clamp(40px, 5vw, 72px); }

/* Alternating band. The hairline does the separating, not a shadow. */
.ar-section--alt {
  --arl-sec-bg: var(--ar-surface);
  background: var(--arl-sec-bg);
  border-block: var(--ar-bw) solid var(--ar-line);
}

/* --- Eyebrow: the small mono label that opens every section --- */
.ar-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--ar-s-2);
  margin-bottom: var(--ar-s-3);
  font-family: var(--ar-font-mono);
  font-size: var(--ar-fs-xs);
  font-weight: var(--ar-fw-medium);
  line-height: var(--ar-lh-tight);
  letter-spacing: var(--ar-ls-label);
  text-transform: uppercase;
  color: var(--ar-text-dim);
}
.ar-eyebrow__dot {
  position: relative;
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: var(--ar-r-pill);
  background: var(--ar-support);
}
.ar-eyebrow__dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: var(--ar-bw) solid var(--ar-support);
  opacity: 0.35;
  animation: ar-ping 2600ms var(--ar-ease) infinite;
}
@keyframes ar-ping {
  0%   { transform: scale(0.7); opacity: 0.55; }
  70%  { transform: scale(1.25); opacity: 0; }
  100% { transform: scale(1.25); opacity: 0; }
}

/* --- Headings --- */
.ar-h1 {
  margin-bottom: var(--ar-s-5);
  font-size: var(--arl-fs-h1);
  font-weight: var(--ar-fw-bold);
  line-height: 1.06;
  letter-spacing: -0.024em;
  color: var(--ar-text-strong);
  text-wrap: balance;
}
/* A ruled underline, not a highlighter swipe.
   text-decoration rather than an absolutely-positioned ::after, because the
   phrase has to be allowed to wrap: `white-space: nowrap` plus a positioned
   bar meant that at desktop widths "exactly where it disagrees" was one
   unbreakable 780px word, so it burst out of its grid column, ran underneath
   the hero panel and dragged the rule out with it. A decoration is drawn per
   line box, so it follows the text wherever it breaks. */
.ar-hl {
  color: var(--ar-accent);
  text-decoration: underline;
  text-decoration-color: var(--ar-accent-edge);
  text-decoration-thickness: 2px;
  text-decoration-skip-ink: none;
  text-underline-offset: 0.16em;
}

.ar-h2 {
  max-width: 22ch;
  font-size: var(--arl-fs-h2);
  font-weight: var(--ar-fw-semibold);
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--ar-text-strong);
  text-wrap: balance;
}

.ar-lede {
  max-width: 60ch;
  font-size: var(--arl-fs-lede);
  line-height: var(--ar-lh-relaxed);
  color: var(--ar-text-dim);
}
.ar-lede strong { color: var(--ar-text-strong); font-weight: var(--ar-fw-semibold); }

.ar-sub {
  max-width: 66ch;
  margin-top: var(--ar-s-4);
  font-size: var(--arl-fs-lede);
  line-height: var(--ar-lh-relaxed);
  color: var(--ar-text-dim);
}

/* The heading block owns the space beneath it, once, everywhere. */
.ar-section .ar-h2 + .ar-sub { margin-top: var(--ar-s-4); }
.ar-section .ar-h2:last-child,
.ar-section .ar-sub:last-of-type { margin-bottom: 0; }
.ar-section .ar-sub + *,
.ar-section .ar-h2 + *:not(.ar-sub) { margin-top: clamp(32px, 4vw, 56px); }


/* ==========================================================================
   4. PRIMITIVES — buttons
   Same anatomy as app.css, sized for a page rather than a toolbar.
   ========================================================================== */
.ar-btn {
  --btn-h: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ar-s-2);
  min-height: var(--btn-h);
  padding: 0 var(--ar-s-5);
  border: var(--ar-bw) solid var(--ar-line-strong);
  border-radius: var(--ar-r-3);
  background: var(--ar-surface-2);
  color: var(--ar-text);
  font-size: var(--ar-fs-md);
  font-weight: var(--ar-fw-semibold);
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: transform var(--ar-t-fast), opacity var(--ar-t-fast);
}
.ar-btn:hover { background: var(--ar-surface-3); text-decoration: none; }
.ar-btn:active { transform: translateY(1px); }

.ar-btn--primary {
  background: var(--ar-accent);
  border-color: var(--ar-accent);
  color: var(--ar-on-accent);
}
.ar-btn--primary:hover { background: var(--ar-accent); filter: brightness(1.08); }

.ar-btn--ghost {
  background: transparent;
  border-color: var(--ar-line-strong);
  color: var(--ar-text);
}
.ar-btn--ghost:hover { background: var(--ar-surface-2); }

.ar-btn--outline {
  background: transparent;
  border-color: var(--ar-line-strong);
  color: var(--ar-text);
}
.ar-btn--outline:hover { background: var(--ar-surface-2); border-color: var(--ar-accent); }

.ar-btn--lg { --btn-h: 48px; padding: 0 var(--ar-s-6); font-size: var(--ar-fs-lg); }
.ar-btn--block { display: flex; width: 100%; }

/* The allowance printed inside the primary CTA. */
.ar-btn__meta {
  padding-left: var(--ar-s-3);
  margin-left: var(--ar-s-1);
  border-left: var(--ar-bw) solid currentColor;
  font-family: var(--ar-font-mono);
  font-size: var(--ar-fs-xs);
  font-weight: var(--ar-fw-medium);
  letter-spacing: 0;
  opacity: 0.72;
}

.ar-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ar-s-3);
  margin-top: var(--ar-s-7);
}
.ar-cta-row--center { justify-content: center; }

.ar-signin {
  margin-top: var(--ar-s-4);
  font-size: var(--ar-fs-md);
  color: var(--ar-text-dim);
}
.ar-signin a { font-weight: var(--ar-fw-medium); }


/* ==========================================================================
   5. PRIMITIVES — chips + legend keys
   ========================================================================== */
.ar-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--ar-s-1);
  flex: none;
  height: 20px;
  padding: 0 var(--ar-s-2);
  border: var(--ar-bw) solid var(--ar-line-2);
  border-radius: var(--ar-r-2);
  background: var(--ar-neutral-tint);
  color: var(--ar-text-dim);
  font-family: var(--ar-font-mono);
  font-size: var(--ar-fs-micro);
  font-weight: var(--ar-fw-medium);
  letter-spacing: var(--ar-ls-label);
  text-transform: uppercase;
  white-space: nowrap;
}
.ar-chip--support {
  background: var(--ar-support-tint);
  border-color: var(--ar-support-edge);
  color: var(--ar-support);
}
.ar-chip--conflict {
  background: var(--ar-conflict-tint);
  border-color: var(--ar-conflict-edge);
  color: var(--ar-conflict);
}
.ar-chip--quiet {
  background: transparent;
  border-color: var(--ar-line-2);
  color: var(--ar-text-dim);
}

.ar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ar-s-2) var(--ar-s-6);
  margin-top: var(--ar-s-4);
  font-family: var(--ar-font-mono);
  font-size: var(--ar-fs-xs);
  color: var(--ar-text-dim);
}
.ar-legend > span { display: inline-flex; align-items: center; gap: var(--ar-s-2); }

.ar-key {
  display: inline-block;
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: var(--ar-r-1);
  background: var(--ar-neutral-tint);
  box-shadow: inset 0 0 0 1px var(--ar-line-2);
}
.ar-key--support  { background: var(--ar-support-tint);  box-shadow: inset 0 0 0 1px var(--ar-support-edge); }
.ar-key--conflict { background: var(--ar-conflict-tint); box-shadow: inset 0 0 0 1px var(--ar-conflict-edge); }
.ar-key--neutral  { background: var(--ar-sunken);        box-shadow: inset 0 0 0 1px var(--ar-line-2); }


/* ==========================================================================
   6. HERO
   ========================================================================== */
.ar-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(48px, 6.5vw, 96px) clamp(56px, 7vw, 104px);
  border-bottom: var(--ar-bw) solid var(--ar-line);
  background: var(--ar-bg);
}

/* A faint engineering grid. Structure, not decoration: it is drawn from the
   hairline token and faded out before it reaches the copy. */
.ar-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(to right, var(--ar-line) 0 1px, transparent 1px 88px),
    repeating-linear-gradient(to bottom, var(--ar-line) 0 1px, transparent 1px 88px);
  opacity: 0.55;
  -webkit-mask-image: radial-gradient(115% 80% at 78% 12%, #000 0%, transparent 68%);
  mask-image: radial-gradient(115% 80% at 78% 12%, #000 0%, transparent 68%);
}

.ar-hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
}
.ar-hero__copy { min-width: 0; }
.ar-hero__visual { min-width: 0; }

.ar-hero .ar-eyebrow { margin-bottom: var(--ar-s-5); }
.ar-hero .ar-lede { max-width: 56ch; }

/* --- Fact strip: product properties, four across --- */
.ar-factstrip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ar-s-3);
  margin-top: var(--ar-s-8);
  padding-top: var(--ar-s-6);
  border-top: var(--ar-bw) solid var(--ar-line);
}
.ar-factstrip li {
  display: flex;
  flex-direction: column;
  gap: var(--ar-s-1);
  min-width: 0;
}
.ar-factstrip__n {
  font-family: var(--ar-font-mono);
  font-size: clamp(1.375rem, 1.15rem + 1vw, 1.875rem);
  font-weight: var(--ar-fw-semibold);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ar-text-strong);
  font-variant-numeric: tabular-nums;
}
.ar-factstrip__l {
  font-size: var(--ar-fs-xs);
  line-height: var(--ar-lh-snug);
  color: var(--ar-text-dim);
  text-wrap: pretty;
}


/* ==========================================================================
   7. HERO PANEL — an app screenshot built from HTML, so it is never stale,
   never a 400 KB PNG, and always renders in the reader's own theme.
   ========================================================================== */
.ar-panel {
  border: var(--ar-bw) solid var(--ar-line-2);
  border-radius: var(--ar-r-3);
  background: var(--ar-surface);
  box-shadow: var(--ar-shadow-popover);
  overflow: hidden;
}

.ar-panel__bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--ar-s-2);
  padding: var(--ar-s-2) var(--ar-s-3);
  border-bottom: var(--ar-bw) solid var(--ar-line);
  background: var(--ar-surface-2);
}
.ar-panel__dot {
  width: 7px;
  height: 7px;
  border-radius: var(--ar-r-pill);
  background: var(--ar-accent);
}
.ar-panel__title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--ar-font-mono);
  font-size: var(--ar-fs-xs);
  color: var(--ar-text-dim);
}
.ar-panel__profile {
  padding: 2px var(--ar-s-2);
  border: var(--ar-bw) solid var(--ar-accent-edge);
  border-radius: var(--ar-r-1);
  background: var(--ar-accent-tint);
  color: var(--ar-accent);
  font-family: var(--ar-font-mono);
  font-size: var(--ar-fs-micro);
  font-weight: var(--ar-fw-semibold);
  letter-spacing: var(--ar-ls-label);
  text-transform: uppercase;
}

/* --- Miniature stage tracker --- */
.ar-track {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--ar-s-2);
  padding: var(--ar-s-3);
  border-bottom: var(--ar-bw) solid var(--ar-line);
  background: var(--ar-surface);
}
.ar-track__step {
  display: flex;
  flex-direction: column;
  gap: var(--ar-s-2);
  min-width: 0;
}
.ar-track__step::before {
  content: "";
  display: block;
  height: 3px;
  border-radius: var(--ar-r-pill);
  background: var(--ar-neutral-tint);
  box-shadow: inset 0 0 0 1px var(--ar-line-2);
}
.ar-track__k {
  font-family: var(--ar-font-mono);
  font-size: var(--ar-fs-micro);
  line-height: var(--ar-lh-tight);
  letter-spacing: 0;
  color: var(--ar-text-mute);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ar-track__step.is-done::before { background: var(--ar-support); box-shadow: none; }
.ar-track__step.is-done .ar-track__k { color: var(--ar-text-dim); }

.ar-track__step.is-live::before {
  background:
    linear-gradient(90deg,
      var(--ar-accent-tint) 0%,
      var(--ar-accent) 45%,
      var(--ar-accent) 55%,
      var(--ar-accent-tint) 100%);
  background-size: 220% 100%;
  box-shadow: none;
  animation: ar-sweep 1600ms var(--ar-ease) infinite;
}
.ar-track__step.is-live .ar-track__k { color: var(--ar-accent); font-weight: var(--ar-fw-semibold); }
@keyframes ar-sweep {
  from { background-position: 150% 0; }
  to   { background-position: -80% 0; }
}

/* --- Claim rows inside the panel --- */
.ar-panel__body { padding: var(--ar-s-3); display: flex; flex-direction: column; gap: var(--ar-s-2); }

.ar-mrow {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--ar-s-3);
  padding: var(--ar-s-2) var(--ar-s-3);
  border: var(--ar-bw) solid var(--ar-line);
  border-left: 2px solid var(--p, var(--ar-accent));
  border-radius: var(--ar-r-2);
  background: var(--ar-surface-2);
}
.ar-mrow__who {
  font-family: var(--ar-font-mono);
  font-size: var(--ar-fs-micro);
  font-weight: var(--ar-fw-semibold);
  letter-spacing: var(--ar-ls-label);
  text-transform: uppercase;
  color: var(--p, var(--ar-accent));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ar-mrow__claim {
  min-width: 0;
  font-size: var(--ar-fs-sm);
  line-height: var(--ar-lh-snug);
  color: var(--ar-text);
  text-wrap: pretty;
}

.ar-panel__cite {
  display: flex;
  align-items: center;
  gap: var(--ar-s-2);
  margin-top: var(--ar-s-1);
  padding-top: var(--ar-s-3);
  border-top: var(--ar-bw) solid var(--ar-line);
  font-size: var(--ar-fs-micro);
  color: var(--ar-text-dim);
}
.ar-panel__cite svg { color: var(--ar-text-mute); }
.ar-panel__cite span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-panel__cite code {
  padding: 1px 4px;
  border: var(--ar-bw) solid var(--ar-line);
  border-radius: var(--ar-r-1);
  background: var(--ar-sunken);
  font-size: var(--ar-fs-micro);
  color: var(--ar-text-dim);
}

.ar-panel__cap {
  padding: var(--ar-s-2) var(--ar-s-3);
  border-top: var(--ar-bw) solid var(--ar-line);
  background: var(--ar-surface-2);
  font-family: var(--ar-font-mono);
  font-size: var(--ar-fs-micro);
  letter-spacing: var(--ar-ls-label);
  text-transform: uppercase;
  color: var(--ar-text-mute);
}


/* ==========================================================================
   8. DEMO VIDEO — self-hosted Remotion render
   ========================================================================== */
.ar-video {
  position: relative;
  aspect-ratio: 16 / 9;
  border: var(--ar-bw) solid var(--ar-line-2);
  border-radius: var(--ar-r-3);
  background: var(--ar-surface);
  overflow: hidden;
}
.ar-video__media {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--ar-sunken);
  object-fit: contain;
}

.ar-video__note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ar-s-2);
  margin-top: var(--ar-s-3);
  font-family: var(--ar-font-mono);
  font-size: var(--ar-fs-micro);
  letter-spacing: var(--ar-ls-label);
  text-transform: uppercase;
  color: var(--ar-text-mute);
}

.ar-video__transcript {
  margin-top: var(--ar-s-3);
  border: var(--ar-bw) solid var(--ar-line);
  border-radius: var(--ar-r-2);
  background: var(--ar-surface);
  color: var(--ar-text-dim);
}
.ar-video__transcript summary {
  padding: var(--ar-s-3) var(--ar-s-4);
  cursor: pointer;
  font-size: var(--ar-fs-sm);
  font-weight: var(--ar-fw-semibold);
  color: var(--ar-text);
}
.ar-video__transcript[open] summary { border-bottom: var(--ar-bw) solid var(--ar-line); }
.ar-video__transcript ol {
  padding: var(--ar-s-4) var(--ar-s-5) var(--ar-s-4) calc(var(--ar-s-5) + 1.25rem);
  list-style: decimal;
}
.ar-video__transcript li {
  padding-left: var(--ar-s-1);
  font-size: var(--ar-fs-sm);
  line-height: var(--ar-lh-relaxed);
}
.ar-video__transcript li + li { margin-top: var(--ar-s-2); }
.ar-video__transcript strong { color: var(--ar-text); font-weight: var(--ar-fw-semibold); }


/* ==========================================================================
   9. THE PIPELINE  ★
   The single most important explainer on the page: five stages, in order,
   hung off one continuous spine. Each stage carries a deterministic colour
   from the persona ramp so the order is legible at a glance and the same
   five hues recur wherever the pipeline is referenced.
   ========================================================================== */
.ar-stages {
  display: flex;
  flex-direction: column;
  max-width: 940px;
}

.ar-stage {
  position: relative;
  display: grid;
  grid-template-columns: var(--arl-rail-w) minmax(0, 1fr);
  gap: clamp(16px, 2.2vw, 28px);
  padding-bottom: clamp(20px, 2.6vw, 32px);
  --st: var(--ar-accent);
}
.ar-stage:last-child { padding-bottom: 0; }

.ar-stage[data-stage="independent"]   { --st: var(--ar-p-1); }
.ar-stage[data-stage="claims"]        { --st: var(--ar-p-5); }
.ar-stage[data-stage="contradiction"] { --st: var(--ar-p-3); }
.ar-stage[data-stage="challenge"]     { --st: var(--ar-p-4); }
.ar-stage[data-stage="synthesis"]     { --st: var(--ar-p-2); }

/* --- The spine --- */
.ar-stage__rail {
  position: relative;
  display: flex;
  justify-content: center;
}
.ar-stage__rail::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: calc(-1 * clamp(20px, 2.6vw, 32px));
  left: 50%;
  width: var(--ar-bw);
  margin-left: calc(var(--ar-bw) / -2);
  background: var(--ar-line-2);
}
.ar-stage:first-child .ar-stage__rail::before { top: 22px; }
.ar-stage:last-child  .ar-stage__rail::before { bottom: auto; height: 22px; }

.ar-stage__num {
  position: relative;
  z-index: var(--ar-z-raised);
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 44px;
  height: 44px;
  border: var(--ar-bw) solid var(--ar-line-2);
  border-radius: var(--ar-r-3);
  background: var(--arl-sec-bg);
  box-shadow: inset 0 0 0 3px var(--arl-sec-bg);
  color: var(--st);
  font-family: var(--ar-font-mono);
  font-size: var(--ar-fs-sm);
  font-weight: var(--ar-fw-semibold);
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

/* --- The card --- */
.ar-stage__card {
  min-width: 0;
  padding: clamp(18px, 2.2vw, 26px);
  border: var(--ar-bw) solid var(--ar-line);
  border-left: 2px solid var(--st);
  border-radius: var(--ar-r-3);
  background: var(--ar-surface);
  transition: transform var(--ar-t-base);
}
.ar-stage:hover .ar-stage__card { transform: translateX(2px); }

.ar-stage__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--ar-s-3);
  margin-bottom: var(--ar-s-3);
}
.ar-stage__icon {
  box-sizing: content-box;
  width: 17px;
  height: 17px;
  padding: 6px;
  border: var(--ar-bw) solid var(--ar-line-2);
  border-radius: var(--ar-r-2);
  background: var(--ar-surface-2);
  color: var(--st);
}
.ar-stage__title {
  min-width: 0;
  font-size: var(--ar-fs-xl);
  font-weight: var(--ar-fw-semibold);
  line-height: var(--ar-lh-snug);
  letter-spacing: -0.014em;
  color: var(--ar-text-strong);
}
.ar-stage__lede {
  font-size: var(--ar-fs-lg);
  font-weight: var(--ar-fw-medium);
  line-height: var(--ar-lh-snug);
  color: var(--st);
  text-wrap: pretty;
}
.ar-stage__body {
  max-width: 64ch;
  margin-top: var(--ar-s-3);
  font-size: var(--ar-fs-lg);
  line-height: var(--ar-lh-relaxed);
  color: var(--ar-text-dim);
  text-wrap: pretty;
}


/* ==========================================================================
   10. CALLOUT + NOTE
   ========================================================================== */
.ar-callout {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(16px, 2.4vw, 28px);
  max-width: 940px;
  margin-top: clamp(32px, 4vw, 56px);
  padding: clamp(20px, 2.6vw, 32px);
  border: var(--ar-bw) solid var(--ar-accent-edge);
  border-left: 3px solid var(--ar-accent);
  border-radius: var(--ar-r-3);
  background: var(--ar-accent-tint);
}
.ar-callout__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: var(--ar-bw) solid var(--ar-accent-edge);
  border-radius: var(--ar-r-3);
  background: var(--ar-surface);
  color: var(--ar-accent);
}
.ar-callout__title {
  margin-bottom: var(--ar-s-3);
  font-size: var(--ar-fs-xl);
  font-weight: var(--ar-fw-semibold);
  line-height: var(--ar-lh-snug);
  color: var(--ar-text-strong);
}
.ar-callout p {
  max-width: 68ch;
  font-size: var(--ar-fs-lg);
  line-height: var(--ar-lh-relaxed);
  color: var(--ar-text);
  text-wrap: pretty;
}
.ar-callout p + p { margin-top: var(--ar-s-3); }

.ar-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--ar-s-3);
  margin-top: clamp(24px, 3vw, 40px);
  padding: var(--ar-s-5);
  border: var(--ar-bw) solid var(--ar-line);
  border-radius: var(--ar-r-3);
  background: var(--ar-surface-2);
}
.ar-note svg { margin-top: 2px; color: var(--ar-support); }
.ar-note p {
  max-width: 78ch;
  font-size: var(--ar-fs-md);
  line-height: var(--ar-lh-relaxed);
  color: var(--ar-text-dim);
  text-wrap: pretty;
}


/* ==========================================================================
   11. BEFORE / AFTER COMPARISON
   ========================================================================== */
.ar-vs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(16px, 2.4vw, 28px);
}
.ar-vs__card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(20px, 2.6vw, 30px);
  border: var(--ar-bw) solid var(--ar-line);
  border-radius: var(--ar-r-3);
  background: var(--ar-bg);
}
.ar-section--alt .ar-vs__card { background: var(--ar-bg); }
.ar-vs__card--after {
  border-color: var(--ar-accent-edge);
  background: var(--ar-accent-tint);
}
.ar-vs__h { margin-bottom: var(--ar-s-5); }
.ar-vs__badge {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 var(--ar-s-3);
  border: var(--ar-bw) solid var(--ar-line-2);
  border-radius: var(--ar-r-2);
  background: var(--ar-surface-2);
  color: var(--ar-text-dim);
  font-family: var(--ar-font-mono);
  font-size: var(--ar-fs-xs);
  font-weight: var(--ar-fw-semibold);
  letter-spacing: var(--ar-ls-label);
  text-transform: uppercase;
}
.ar-vs__badge--on {
  border-color: var(--ar-accent);
  background: var(--ar-accent);
  color: var(--ar-on-accent);
}

.ar-vs__list { display: flex; flex-direction: column; }
.ar-vs__list li {
  position: relative;
  padding: var(--ar-s-3) 0 var(--ar-s-3) var(--ar-s-6);
  border-top: var(--ar-bw) solid var(--ar-line);
  font-size: var(--ar-fs-md);
  line-height: var(--ar-lh-relaxed);
  color: var(--ar-text-dim);
  text-wrap: pretty;
}
.ar-vs__list li:first-child { border-top: 0; padding-top: 0; }
.ar-vs__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--ar-s-3) + 0.62em);
  width: 10px;
  height: var(--ar-bw);
  background: var(--ar-text-mute);
}
.ar-vs__list li:first-child::before { top: 0.62em; }

.ar-vs__card--after .ar-vs__list li { color: var(--ar-text); }
.ar-vs__card--after .ar-vs__list li { border-top-color: var(--ar-accent-edge); }
.ar-vs__card--after .ar-vs__list li::before {
  left: 1px;
  top: calc(var(--ar-s-3) + 0.42em);
  width: 7px;
  height: 7px;
  border-radius: var(--ar-r-1);
  background: var(--ar-accent);
}
.ar-vs__card--after .ar-vs__list li:first-child::before { top: 0.42em; }

.ar-vs__arrow {
  display: grid;
  place-items: center;
  align-self: center;
  width: 40px;
  height: 40px;
  border: var(--ar-bw) solid var(--ar-line-2);
  border-radius: var(--ar-r-pill);
  background: var(--ar-surface-2);
  color: var(--ar-text-dim);
}


/* ==========================================================================
   12. EVIDENCE SILOS
   ========================================================================== */
.ar-silos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: clamp(16px, 2.2vw, 24px);
}
.ar-silo {
  display: flex;
  flex-direction: column;
  gap: var(--ar-s-4);
  min-width: 0;
  padding: var(--ar-s-5);
  border: var(--ar-bw) solid var(--ar-line);
  border-top: 2px solid var(--p, var(--ar-accent));
  border-radius: var(--ar-r-3);
  background: var(--ar-surface);
}
.ar-silo__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--ar-s-3);
}
.ar-silo__avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: var(--ar-bw) solid currentColor;
  border-radius: var(--ar-r-2);
  background: var(--ar-surface-2);
  color: var(--p, var(--ar-accent));
  font-family: var(--ar-font-mono);
  font-size: var(--ar-fs-xs);
  font-weight: var(--ar-fw-semibold);
  letter-spacing: 0;
}
.ar-silo__name {
  font-size: var(--ar-fs-xl);
  font-weight: var(--ar-fw-semibold);
  line-height: var(--ar-lh-tight);
  color: var(--ar-text-strong);
}
.ar-silo__role {
  margin-top: 2px;
  font-size: var(--ar-fs-sm);
  line-height: var(--ar-lh-snug);
  color: var(--ar-text-dim);
}
.ar-silo__files {
  display: flex;
  flex-direction: column;
  gap: var(--ar-s-1);
  padding: var(--ar-s-3);
  border: var(--ar-bw) solid var(--ar-line);
  border-radius: var(--ar-r-2);
  background: var(--ar-sunken);
}
.ar-silo__files li {
  display: flex;
  align-items: center;
  gap: var(--ar-s-2);
  min-width: 0;
  font-size: var(--ar-fs-sm);
}
.ar-silo__files li::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: var(--ar-r-1);
  background: var(--p, var(--ar-accent));
}
.ar-silo__files code {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--ar-fs-xs);
  color: var(--ar-text);
}
.ar-silo__cite {
  display: flex;
  align-items: center;
  gap: var(--ar-s-2);
  margin-top: auto;
  padding-top: var(--ar-s-3);
  border-top: var(--ar-bw) solid var(--ar-line);
  font-family: var(--ar-font-mono);
  font-size: var(--ar-fs-micro);
  letter-spacing: var(--ar-ls-label);
  text-transform: uppercase;
  color: var(--ar-text-dim);
}
.ar-silo__cite svg { color: var(--p, var(--ar-accent)); }


/* ==========================================================================
   13. THE CONFLICT MATRIX  ★
   The screenshot people share. Reads as an instrument readout: monospace
   labels, hairline rules, tinted verdict cells, a sticky claim column so it
   stays legible while it scrolls sideways on a phone.
   ========================================================================== */
.ar-matrix-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  border: var(--ar-bw) solid var(--ar-line-2);
  border-radius: var(--ar-r-3);
  background: var(--ar-surface);
  scrollbar-width: thin;
  scrollbar-color: var(--ar-line-strong) transparent;
}
.ar-matrix-scroll::-webkit-scrollbar { height: 10px; }
.ar-matrix-scroll::-webkit-scrollbar-track { background: transparent; }
.ar-matrix-scroll::-webkit-scrollbar-thumb {
  background: var(--ar-line-2);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: var(--ar-r-pill);
}
.ar-matrix-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--ar-line-strong);
  background-clip: content-box;
}

.ar-matrix {
  width: 100%;
  min-width: 660px;
  table-layout: fixed;
  background: var(--ar-surface);
}
.ar-matrix__cap {
  caption-side: bottom;
  padding: var(--ar-s-3) var(--ar-s-4);
  border-top: var(--ar-bw) solid var(--ar-line);
  background: var(--ar-surface-2);
  text-align: left;
  font-family: var(--ar-font-mono);
  font-size: var(--ar-fs-micro);
  letter-spacing: var(--ar-ls-label);
  text-transform: uppercase;
  color: var(--ar-text-mute);
}

/* --- Column heads --- */
.ar-matrix thead th {
  padding: var(--ar-s-3) var(--ar-s-3);
  border-bottom: var(--ar-bw) solid var(--ar-line-2);
  background: var(--ar-surface-2);
  text-align: center;
  vertical-align: bottom;
  font-family: var(--ar-font-mono);
  font-size: var(--ar-fs-micro);
  font-weight: var(--ar-fw-semibold);
  letter-spacing: var(--ar-ls-label);
  text-transform: uppercase;
  color: var(--ar-text-dim);
  white-space: nowrap;
}
.ar-matrix thead th:first-child {
  position: sticky;
  left: 0;
  z-index: var(--ar-z-raised);
  width: 42%;
  text-align: left;
  border-right: var(--ar-bw) solid var(--ar-line-2);
  background: var(--ar-surface-2);
}
.ar-th-dot {
  display: inline-block;
  width: 12px;
  height: 3px;
  margin-right: var(--ar-s-2);
  border-radius: 1px;
  vertical-align: middle;
  background: var(--p, var(--ar-accent));
}

/* --- Row heads: the claim, plus its type --- */
.ar-matrix tbody th {
  position: sticky;
  left: 0;
  z-index: var(--ar-z-raised);
  padding: var(--ar-s-4);
  border-right: var(--ar-bw) solid var(--ar-line-2);
  background: var(--ar-surface);
  text-align: left;
  vertical-align: middle;
  font-size: var(--ar-fs-md);
  font-weight: var(--ar-fw-medium);
  line-height: var(--ar-lh-snug);
  color: var(--ar-text);
  text-wrap: pretty;
}
.ar-matrix tbody tr + tr th,
.ar-matrix tbody tr + tr td { border-top: var(--ar-bw) solid var(--ar-line); }

.ar-ctype {
  display: block;
  margin-top: var(--ar-s-2);
  font-family: var(--ar-font-mono);
  font-size: var(--ar-fs-micro);
  font-weight: var(--ar-fw-medium);
  letter-spacing: var(--ar-ls-label);
  text-transform: uppercase;
  color: var(--ar-text-mute);
}

/* --- Verdict cells --- */
.ar-matrix tbody td {
  padding: var(--ar-s-2);
  border-left: var(--ar-bw) solid var(--ar-line);
  text-align: center;
  vertical-align: middle;
}
.ar-matrix tbody td > span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ar-s-1);
  padding: var(--ar-s-2) var(--ar-s-1);
  border-radius: var(--ar-r-2);
  font-family: var(--ar-font-mono);
  font-size: var(--ar-fs-micro);
  font-weight: var(--ar-fw-medium);
  letter-spacing: var(--ar-ls-label);
  text-transform: uppercase;
}
/* The glyph is drawn, not fetched — a plain character in the system font. */
.ar-matrix tbody td > span::before {
  display: block;
  font-size: var(--ar-fs-md);
  font-weight: var(--ar-fw-bold);
  line-height: 1;
}

.ar-matrix td.is-support > span {
  background: var(--ar-support-tint);
  box-shadow: inset 0 0 0 1px var(--ar-support-edge);
  color: var(--ar-support);
}
.ar-matrix td.is-support > span::before { content: "\2713"; }

.ar-matrix td.is-conflict > span {
  background: var(--ar-conflict-tint);
  box-shadow: inset 0 0 0 1px var(--ar-conflict-edge);
  color: var(--ar-conflict);
}
.ar-matrix td.is-conflict > span::before { content: "\2715"; }

.ar-matrix td.is-neutral > span {
  background: var(--ar-sunken);
  box-shadow: inset 0 0 0 1px var(--ar-line);
  color: var(--ar-text-dim);
}
.ar-matrix td.is-neutral > span::before { content: "\2013"; }


/* ==========================================================================
   14. CHALLENGE EXCHANGE
   ========================================================================== */
.ar-exchange {
  margin-top: clamp(28px, 3.4vw, 44px);
  padding: clamp(20px, 2.6vw, 30px);
  border: var(--ar-bw) solid var(--ar-line);
  border-radius: var(--ar-r-3);
  background: var(--ar-surface);
}
.ar-exchange__label {
  margin-bottom: var(--ar-s-4);
  padding-bottom: var(--ar-s-3);
  border-bottom: var(--ar-bw) solid var(--ar-line);
  font-family: var(--ar-font-mono);
  font-size: var(--ar-fs-micro);
  font-weight: var(--ar-fw-semibold);
  letter-spacing: var(--ar-ls-label);
  text-transform: uppercase;
  color: var(--ar-text-dim);
}
.ar-exchange__turn {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: var(--ar-s-4);
  padding: var(--ar-s-4);
  border: var(--ar-bw) solid var(--ar-line);
  border-left: 2px solid var(--p, var(--ar-accent));
  border-radius: var(--ar-r-2);
  background: var(--ar-surface-2);
}
.ar-exchange__turn + .ar-exchange__turn { margin-top: var(--ar-s-3); }
.ar-exchange__who {
  font-family: var(--ar-font-mono);
  font-size: var(--ar-fs-micro);
  font-weight: var(--ar-fw-semibold);
  line-height: var(--ar-lh-relaxed);
  letter-spacing: var(--ar-ls-label);
  text-transform: uppercase;
  color: var(--p, var(--ar-accent));
}
.ar-exchange__turn p {
  min-width: 0;
  font-size: var(--ar-fs-lg);
  line-height: var(--ar-lh-relaxed);
  color: var(--ar-text);
  text-wrap: pretty;
}
.ar-exchange__out {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--ar-s-3);
  margin-top: var(--ar-s-4);
  padding-top: var(--ar-s-4);
  border-top: var(--ar-bw) solid var(--ar-line);
  font-size: var(--ar-fs-md);
  line-height: var(--ar-lh-relaxed);
  color: var(--ar-text-dim);
  text-wrap: pretty;
}
.ar-exchange__out svg { margin-top: 3px; color: var(--ar-accent); }
.ar-exchange__out em { color: var(--ar-text); font-style: italic; }


/* ==========================================================================
   15. USE-CASE CARDS
   ========================================================================== */
.ar-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(16px, 2vw, 22px);
}
.ar-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(20px, 2.4vw, 28px);
  border: var(--ar-bw) solid var(--ar-line);
  border-radius: var(--ar-r-3);
  background: var(--ar-surface);
  transition: transform var(--ar-t-base);
}
.ar-card:hover { transform: translateY(-2px); }
.ar-section--alt .ar-card { background: var(--ar-bg); }
.ar-card__icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-bottom: var(--ar-s-4);
  border: var(--ar-bw) solid var(--ar-line-2);
  border-radius: var(--ar-r-2);
  background: var(--ar-surface-2);
  color: var(--ar-accent);
}
.ar-card__title {
  margin-bottom: var(--ar-s-2);
  font-size: var(--ar-fs-xl);
  font-weight: var(--ar-fw-semibold);
  line-height: var(--ar-lh-snug);
  letter-spacing: -0.012em;
  color: var(--ar-text-strong);
}
.ar-card__body {
  font-size: var(--ar-fs-md);
  line-height: var(--ar-lh-relaxed);
  color: var(--ar-text-dim);
  text-wrap: pretty;
}


/* ==========================================================================
   16. PRICING
   ========================================================================== */
.ar-plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
  align-items: start;
}
.ar-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(22px, 2.6vw, 30px);
  border: var(--ar-bw) solid var(--ar-line);
  border-radius: var(--ar-r-3);
  background: var(--ar-bg);
}
.ar-plan.is-featured {
  border-color: var(--ar-accent);
  background: var(--ar-surface);
  box-shadow: inset 0 0 0 1px var(--ar-accent-edge);
}
.ar-plan__flag {
  position: absolute;
  top: 0;
  right: var(--ar-s-5);
  transform: translateY(-50%);
  padding: 0 var(--ar-s-3);
  height: 22px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--ar-r-2);
  background: var(--ar-accent);
  color: var(--ar-on-accent);
  font-family: var(--ar-font-mono);
  font-size: var(--ar-fs-micro);
  font-weight: var(--ar-fw-semibold);
  letter-spacing: var(--ar-ls-label);
  text-transform: uppercase;
}
.ar-plan__name {
  font-family: var(--ar-font-mono);
  font-size: var(--ar-fs-xs);
  font-weight: var(--ar-fw-semibold);
  letter-spacing: var(--ar-ls-label);
  text-transform: uppercase;
  color: var(--ar-text-dim);
}
.ar-plan__price {
  display: flex;
  align-items: baseline;
  gap: var(--ar-s-2);
  margin-top: var(--ar-s-2);
}
.ar-plan__amount {
  font-size: clamp(1.75rem, 1.5rem + 1.1vw, 2.375rem);
  font-weight: var(--ar-fw-bold);
  line-height: 1;
  letter-spacing: -0.028em;
  color: var(--ar-text-strong);
  font-variant-numeric: tabular-nums;
}
.ar-plan__per {
  font-family: var(--ar-font-mono);
  font-size: var(--ar-fs-xs);
  color: var(--ar-text-dim);
}
.ar-plan__blurb {
  margin-top: var(--ar-s-3);
  padding-bottom: var(--ar-s-5);
  border-bottom: var(--ar-bw) solid var(--ar-line);
  font-size: var(--ar-fs-md);
  line-height: var(--ar-lh-relaxed);
  color: var(--ar-text-dim);
  text-wrap: pretty;
}
.ar-plan__rows {
  display: flex;
  flex-direction: column;
  gap: var(--ar-s-3);
  margin: var(--ar-s-5) 0 var(--ar-s-6);
}
.ar-plan__rows li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  gap: var(--ar-s-3);
  font-size: var(--ar-fs-md);
  line-height: var(--ar-lh-snug);
  color: var(--ar-text);
  text-wrap: pretty;
}
.ar-plan__tick { margin-top: 3px; color: var(--ar-support); }
.ar-plan__x {
  display: block;
  margin-top: -1px;
  text-align: center;
  font-size: var(--ar-fs-md);
  line-height: var(--ar-lh-snug);
  color: var(--ar-text-mute);
}
.ar-plan__rows li.is-off { color: var(--ar-text-dim); }
.ar-plan .ar-btn { margin-top: auto; }

.ar-plans__foot {
  max-width: 72ch;
  margin-top: clamp(24px, 3vw, 36px);
  font-size: var(--ar-fs-md);
  line-height: var(--ar-lh-relaxed);
  color: var(--ar-text-dim);
}


/* ==========================================================================
   17. FAQ
   ========================================================================== */
.ar-faq {
  border: var(--ar-bw) solid var(--ar-line);
  border-radius: var(--ar-r-3);
  background: var(--ar-surface);
  overflow: hidden;
}
.ar-faq__item + .ar-faq__item { border-top: var(--ar-bw) solid var(--ar-line); }

.ar-faq__q {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--ar-s-4);
  padding: var(--ar-s-5) clamp(16px, 2.2vw, 24px);
  cursor: pointer;
  list-style: none;
  font-size: var(--ar-fs-xl);
  font-weight: var(--ar-fw-semibold);
  line-height: var(--ar-lh-snug);
  letter-spacing: -0.012em;
  color: var(--ar-text-strong);
  text-wrap: pretty;
}
.ar-faq__q::-webkit-details-marker { display: none; }
.ar-faq__q:hover { background: var(--ar-surface-2); }
.ar-faq__item[open] .ar-faq__q { color: var(--ar-text-strong); }

/* Plus / minus, drawn with two rules. No glyph, no font dependency. */
.ar-faq__mark {
  position: relative;
  flex: none;
  width: 22px;
  height: 22px;
  border: var(--ar-bw) solid var(--ar-line-2);
  border-radius: var(--ar-r-2);
  background: var(--ar-surface-2);
}
.ar-faq__mark::before,
.ar-faq__mark::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 2px;
  margin: -1px 0 0 -5px;
  background: var(--ar-text-dim);
  transition: transform var(--ar-t-base), opacity var(--ar-t-base);
}
.ar-faq__mark::after { transform: rotate(90deg); }
.ar-faq__item[open] .ar-faq__mark { border-color: var(--ar-accent-edge); background: var(--ar-accent-tint); }
.ar-faq__item[open] .ar-faq__mark::before,
.ar-faq__item[open] .ar-faq__mark::after { background: var(--ar-accent); }
.ar-faq__item[open] .ar-faq__mark::after { transform: rotate(0deg); opacity: 0; }

.ar-faq__a {
  padding: 0 clamp(16px, 2.2vw, 24px) var(--ar-s-5);
  border-top: var(--ar-bw) solid var(--ar-line);
  padding-top: var(--ar-s-4);
}
.ar-faq__a p {
  max-width: 74ch;
  font-size: var(--ar-fs-lg);
  line-height: var(--ar-lh-relaxed);
  color: var(--ar-text-dim);
  text-wrap: pretty;
}


/* ==========================================================================
   18. FINAL CTA
   ========================================================================== */
.ar-final {
  padding-block: clamp(64px, 8vw, 112px);
  border-top: var(--ar-bw) solid var(--ar-line);
  background: var(--ar-surface);
}
.ar-final__inner { text-align: center; }
.ar-final__h {
  max-width: none;
  margin-inline: auto;
  font-size: var(--arl-fs-final);
}
.ar-final__p {
  max-width: 56ch;
  margin: var(--ar-s-5) auto 0;
  font-size: var(--arl-fs-lede);
  line-height: var(--ar-lh-relaxed);
  color: var(--ar-text-dim);
}
.ar-final .ar-cta-row { margin-top: var(--ar-s-7); }
.ar-final__note {
  max-width: 56ch;
  margin: var(--ar-s-6) auto 0;
  font-size: var(--ar-fs-sm);
  line-height: var(--ar-lh-relaxed);
  color: var(--ar-text-mute);
}


/* ==========================================================================
   19. RESPONSIVE
   Every breakpoint below removes a column; none of them removes information.
   ========================================================================== */
@media (max-width: 1023px) {
  .ar-hero__grid { grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 6vw, 48px); }
  .ar-hero__visual { max-width: 620px; }
  .ar-h2 { max-width: 26ch; }

  .ar-vs { grid-template-columns: minmax(0, 1fr); }
  .ar-vs__arrow { justify-self: center; transform: rotate(90deg); }

  .ar-plans { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
  .ar-plan.is-featured { order: -1; }
}

@media (max-width: 767px) {
  .ar-landing { --arl-rail-w: 40px; }

  .ar-factstrip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ar-s-5) var(--ar-s-4);
  }

  .ar-track { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--ar-s-1); }
  .ar-track__k { font-size: 9px; }

  .ar-mrow { grid-template-columns: minmax(0, 1fr) auto; gap: var(--ar-s-1) var(--ar-s-2); }
  .ar-mrow__who { grid-column: 1 / -1; }

  .ar-stage { grid-template-columns: var(--arl-rail-w) minmax(0, 1fr); gap: var(--ar-s-4); }
  .ar-stage__num { max-width: 38px; height: 38px; font-size: var(--ar-fs-xs); }
  .ar-stage:first-child .ar-stage__rail::before,
  .ar-stage:last-child  .ar-stage__rail::before { top: 19px; }
  .ar-stage:last-child  .ar-stage__rail::before { top: 0; height: 19px; }

  .ar-callout { grid-template-columns: minmax(0, 1fr); gap: var(--ar-s-4); }

  .ar-exchange__turn { grid-template-columns: minmax(0, 1fr); gap: var(--ar-s-2); }

  .ar-cards { grid-template-columns: minmax(0, 1fr); }
  .ar-silos { grid-template-columns: minmax(0, 1fr); }

  .ar-faq__q { font-size: var(--ar-fs-lg); padding-block: var(--ar-s-4); }

  .ar-cta-row .ar-btn { flex: 1 1 220px; }
}

@media (max-width: 479px) {
  .ar-btn { padding-inline: var(--ar-s-4); font-size: var(--ar-fs-sm); }
  .ar-btn--lg { padding-inline: var(--ar-s-5); font-size: var(--ar-fs-md); }
  .ar-btn__meta { display: none; }

  .ar-track { gap: 3px; }
  .ar-track__k { display: none; }
  .ar-track__step { min-height: 3px; }

  .ar-panel__bar { grid-template-columns: auto minmax(0, 1fr); }
  .ar-panel__profile { display: none; }

  .ar-factstrip { grid-template-columns: minmax(0, 1fr); }
  .ar-legend { gap: var(--ar-s-2) var(--ar-s-4); }
}

/* Coarse pointers: bigger targets, same grid. */
@media (pointer: coarse) {
  .ar-btn { --btn-h: 46px; }
  .ar-faq__q { padding-block: var(--ar-s-5); }
}


/* ==========================================================================
   20. REDUCED MOTION — total kill switch, same policy as app.css
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ar-landing *,
  .ar-landing *::before,
  .ar-landing *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  /* Anything that carried meaning through movement carries it statically. */
  .ar-eyebrow__dot::after { animation: none; opacity: 0.35; transform: none; }
  .ar-track__step.is-live::before {
    animation: none;
    background: var(--ar-accent);
    background-size: auto;
  }
  .ar-card:hover,
  .ar-stage:hover .ar-stage__card,
  .ar-btn:active { transform: none; }
}


/* ==========================================================================
   21. FORCED COLORS (Windows high contrast)
   ========================================================================== */
@media (forced-colors: active) {
  .ar-btn,
  .ar-panel,
  .ar-stage__card,
  .ar-callout,
  .ar-note,
  .ar-card,
  .ar-plan,
  .ar-silo,
  .ar-faq,
  .ar-exchange,
  .ar-matrix-scroll,
  .ar-video { border: 1px solid CanvasText; }

  .ar-hero::before { display: none; }
  .ar-key { border: 1px solid CanvasText; }
  /* Cell state is already carried by the glyph and the word, not the fill. */
}


/* ==========================================================================
   22. PRINT
   The landing page is not a deliverable — collapse it to legible black text.
   (The application's own print stylesheet lives in print.css.)
   ========================================================================== */
@media print {
  .ar-landing {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }
  .ar-hero::before,
  .ar-video,
  .ar-video__note,
  .ar-skip,
  .ar-cta-row,
  .ar-signin { display: none !important; }

  .ar-section,
  .ar-hero,
  .ar-final { padding-block: 12pt; border: 0; background: #fff; }

  .ar-panel,
  .ar-stage__card,
  .ar-card,
  .ar-plan,
  .ar-silo,
  .ar-callout,
  .ar-exchange { break-inside: avoid; border: 0.5pt solid #000; background: #fff; }

  .ar-h1, .ar-h2, .ar-h2 + *, .ar-stage { break-inside: avoid; }
  .ar-h1, .ar-h2, .ar-stage__title, .ar-card__title { color: #000; }
  .ar-faq__item[open] .ar-faq__a,
  .ar-faq__a { display: block; }
}