/* Outfold Systems - shared stylesheet (v2, 2026-08-24)
   Light base. This is the only Alexandre Corne business on a light ground.
   One single type family across the whole /ai surface: Inter. No mono anywhere.
   No Elite Outsiders tokens, no --gold, no #e8d5b0.
   Portable: no absolute URLs to any host except Google Fonts. */

:root {
  color-scheme: light;

  --bg: #ffffff;
  --bg-2: #f7f6f4;
  --line: #e6e4e0;
  --ink: #0b0b0c;
  --ink-soft: #55555c;
  --accent: #ff6a00;
  --accent-ink: #c2410c;
  /* STATE ONLY, and the only exception to the Outfold palette, which holds
     no green. A send that succeeded cannot be painted in the same ink as an
     alert, which is what --accent-ink read as on the Mailchimp card. Sober
     forest green, 5.42:1 on #ffffff and 5.02:1 on #f7f6f4, both past AA.
     It is not a brand colour: never use it for type, rules, fills or hover,
     only for a success state. One consumer today, .nl-sent. */
  --ok: #127a3c;

  /* Single family. Real system fallbacks, no mono fallback anywhere. */
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* Back-compat aliases. Anything that still asks for --display or --mono
     resolves to the same single family, so no page can fall back to a
     monospace face. Do not point these at a different family. */
  --display: var(--sans);
  --mono: var(--sans);

  --gutter: clamp(20px, 6vw, 72px);
  --maxw: 1120px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
/* overflow-x: hidden turns html and body into scroll containers, which silently
   kills position: sticky further down the page (it was killing the pinned
   showcase stage). overflow-x: clip contains the same overflow without creating
   a scroll container, so sticky keeps working; hidden stays as the fallback for
   engines without clip. */
html { overflow-x: hidden; -webkit-text-size-adjust: 100%; }
@supports (overflow-x: clip) { html { overflow-x: clip; } }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  line-height: 1.55;
  min-height: 100vh;
  max-width: 100%;
  overflow-x: hidden;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@supports (overflow-x: clip) { body { overflow-x: clip; } }

a { color: inherit; }
img, svg { max-width: 100%; }

/* ---------- shell ---------- */

.shell { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

.topbar {
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  position: sticky;
  top: 0;
  z-index: 40;
}
.topbar-in {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 14px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.brand {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.014em;
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
}
.brand b { font-weight: 600; }
.brand .dot { color: var(--accent); }

.nav { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.nav a {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.006em;
  color: var(--ink-soft);
  text-decoration: none;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
.nav a.cta {
  color: var(--bg);
  background: var(--ink);
  padding: 8px 16px;
  border-radius: 980px;
}
.nav a.cta:hover { background: var(--accent-ink); color: var(--bg); }

/* ---------- audience split ---------- */
/* AL wants the whole /ai surface read as two tracks from the top of any page.
   Sits directly under the topbar on the marketing pages (index, method, proof,
   contact, business). Left off /ai/login and /ai/account: those are auth-flow
   utility pages, not marketing surfaces, and a signed-in client does not need to
   be asked which audience they are. */
.audience-bar {
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}
.audience-in {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 10px var(--gutter);
  display: flex;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}
.audience-tab {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.004em;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 6px 16px;
  border-radius: 980px;
}
.audience-tab:hover { color: var(--ink); }
.audience-tab.is-active {
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}

/* ---------- type ---------- */

/* Sentence case, not tracked-out capitals. Capitals read as a console label and
   push the page back towards the tech-demo register AL asked to leave behind. */
.eyebrow {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.006em;
  color: var(--accent-ink);
  font-variant-numeric: tabular-nums;
}
.eyebrow.muted { color: var(--ink-soft); }

h1, h2, h3 { font-family: var(--sans); font-variant-numeric: tabular-nums; }

h1 {
  font-weight: 700;
  font-size: clamp(40px, 7.4vw, 82px);
  line-height: 1.03;
  letter-spacing: -0.038em;
}
h2 {
  font-weight: 700;
  font-size: clamp(31px, 5.4vw, 56px);
  line-height: 1.06;
  letter-spacing: -0.032em;
}
h3 {
  font-weight: 600;
  font-size: 19px;
  line-height: 1.28;
  letter-spacing: -0.014em;
}
p { font-size: 17px; color: var(--ink-soft); letter-spacing: -0.006em; }
p.lead {
  font-size: clamp(18px, 2.2vw, 22px);
  line-height: 1.5;
  color: var(--ink-soft);
  letter-spacing: -0.014em;
  max-width: 62ch;
}
strong { font-weight: 600; color: var(--ink); }

/* Orange keyword inside a headline. Full accent only at display size, where the
   type is large enough to carry it. Anything smaller uses --accent-ink. */
.kw { color: var(--accent); }
.kw-ink { color: var(--accent-ink); }
.tnum { font-variant-numeric: tabular-nums; }

/* ---------- sections ---------- */

section { padding: clamp(72px, 9.5vw, 124px) 0; }
section + section { border-top: 1px solid var(--line); }
.oband, .arch, .band { border-top: none !important; }
.oband + section, .arch + section, .band + section { border-top: none; }

.section-head { max-width: 68ch; margin-bottom: 40px; display: flex; flex-direction: column; gap: 14px; }
/* ch would resolve against the container font size, not the headline size, and
   would strangle the title. Fixed cap instead. */
.section-head.center { max-width: min(100%, 760px); margin-left: auto; margin-right: auto; text-align: center; align-items: center; }

.rule {
  height: 4px;
  background: var(--accent);
  width: 64px;
  border-radius: 2px;
}

.alt { background: var(--bg-2); }

/* ---------- atmosphere C2 (validated by AL, 2026-08-26) ---------- */
/* A wide, faint orange halo behind the hero and behind the one-click statement.
   Generous falloff that reaches the edges, never a tight spotlight (house glow
   rule). Applied to every /ai hero rather than the landing alone, because /ai/
   and /ai/business sit next to each other in the audience bar and the tab
   continuity work would be undone if one glowed and the other did not.
   Landing-only is a one-line change: scope these selectors under a page class. */
.hero,
.sec-oneclick {
  background:
    radial-gradient(ellipse 90% 75% at 50% 35%, rgba(255, 106, 0, .10) 0%, rgba(255, 106, 0, .035) 45%, rgba(255, 255, 255, 0) 78%),
    var(--bg);
}

/* ---------- hero ---------- */

.hero { padding-top: clamp(64px, 10vw, 124px); }
.hero .inner { display: flex; flex-direction: column; gap: 26px; max-width: min(100%, 74ch); }
.hero h1 { max-width: 15ch; }
.hero .lead { max-width: 58ch; }
/* Centered hero, AL's pick of drafts variant 1b (2026-08-26). Same axis as the
   Pain section: everything centered, symmetrical whitespace. */
.hero .inner.centered {
  align-items: center;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.hero .inner.centered .hero-actions { justify-content: center; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.008em;
  text-decoration: none;
  padding: 13px 26px;
  border-radius: 980px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--bg);
  cursor: pointer;
  transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.btn:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: var(--bg-2); color: var(--ink); border-color: var(--ink); }
/* Orange pill. Ink label, never white: white on #ff6a00 is too weak at button size. */
.btn.accent { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.btn.accent:hover { background: var(--accent-ink); border-color: var(--accent-ink); color: #fff; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ---------- cards ---------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.card {
  background: var(--bg);
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.card .num {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--accent-ink);
  font-variant-numeric: tabular-nums;
}
.card p { font-size: 16px; }

/* ---------- full width orange band ---------- */
/* Orange as a surface, not a hairline. White copy here is display size only. */

.oband {
  background: var(--accent);
  color: #fff;
  padding: clamp(52px, 7.5vw, 92px) 0;
}
.oband .oband-in {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
}
.oband .oband-line {
  color: #fff;
  font-weight: 700;
  font-size: clamp(28px, 5vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  max-width: 20ch;
  font-variant-numeric: tabular-nums;
}
.oband .oband-sub {
  color: rgba(255, 255, 255, .92);
  font-size: clamp(17px, 2vw, 20px);
  font-weight: 500;
  letter-spacing: -0.012em;
  max-width: 46ch;
}
.oband .btn { background: #fff; border-color: #fff; color: var(--ink); }
.oband .btn:hover { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ---------- content flow diagram (SVG + CSS, drawn in orange on white) ---------- */

.flow { position: relative; margin-top: clamp(24px, 4vw, 48px); }
/* Row 1 carries the whole journey on one visual line: start box, rising arrow,
   arrival plate. Row 2 hangs the unfolding list under the arrival point. */
.flow-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(112px, 15vw, 210px) minmax(0, 1.06fr);
  grid-template-rows: auto auto;
  column-gap: clamp(10px, 1.8vw, 24px);
  row-gap: 0;
  align-items: center;
}
.flow-box   { grid-column: 1; grid-row: 1; align-self: center; }
.flow-arrow { grid-column: 2; grid-row: 1; align-self: center; }
.flow-plate { grid-column: 3; grid-row: 1; align-self: center; }
.flow-tail  { grid-column: 3; grid-row: 2; }

.flow-box {
  border: 3px solid var(--accent);
  border-radius: 16px;
  padding: clamp(16px, 2.4vw, 26px) clamp(16px, 2.4vw, 28px);
}
.flow-box .flow-line {
  color: var(--accent-ink);
  font-weight: 600;
  font-size: clamp(20px, 2.9vw, 30px);
  line-height: 1.14;
  letter-spacing: -0.024em;
  font-variant-numeric: tabular-nums;
}

/* Arrival is a solid orange plate. Display size, so white reads. */
.flow-plate {
  background: var(--accent);
  border: 3px solid var(--accent);
  border-radius: 16px;
  padding: clamp(16px, 2.4vw, 26px) clamp(16px, 2.4vw, 28px);
}
.flow-plate .flow-line {
  color: #fff;
  font-weight: 700;
  font-size: clamp(20px, 2.9vw, 30px);
  line-height: 1.14;
  letter-spacing: -0.026em;
  font-variant-numeric: tabular-nums;
}

.flow-arrow svg { display: block; width: 100%; height: auto; max-height: 132px; margin: 0 auto; overflow: visible; }
.flow-arrow .arrow-wide { display: block; }
.flow-arrow .arrow-narrow { display: none; }
/* Generous thickness, drawn in full accent. This is the schematic AL asked for:
   orange on white, arrow included. */
.flow-arrow .draw, .flow-arrow .head {
  fill: none;
  stroke: var(--accent);
  stroke-width: 9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.flow-list {
  list-style: none;
  margin-top: clamp(18px, 2.4vw, 26px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-left: clamp(4px, 1vw, 10px);
}
.flow-list li {
  position: relative;
  padding-left: 26px;
  color: var(--accent-ink);
  font-size: clamp(17px, 2.1vw, 21px);
  font-weight: 500;
  letter-spacing: -0.014em;
}
.flow-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .52em;
  width: 12px;
  height: 4px;
  border-radius: 2px;
  background: var(--accent);
}
.flow-list li strong { color: var(--accent-ink); font-weight: 700; }

.flow-close {
  margin-top: clamp(18px, 2.4vw, 26px);
  padding-top: 18px;
  border-top: 3px solid var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
  font-size: clamp(19px, 2.5vw, 26px);
  letter-spacing: -0.02em;
}

.flow-sentinel { display: block; height: 1px; width: 100%; }

/* Default state is the finished state: with JavaScript off the whole diagram
   is visible. The .rai-js class, set inline before paint, is what hides it. */
.rai-js .flow [data-step] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.rai-js .flow.is-1 [data-step="1"],
.rai-js .flow.is-2 [data-step="2"],
.rai-js .flow.is-3 [data-step="3"] { opacity: 1; transform: none; }

/* The path carries pathLength="100", so the dash maths is exact whatever the
   viewBox: 100 hides it completely, 0 draws it completely. */
.flow-arrow .draw { stroke-dasharray: 100; }
.rai-js .flow-arrow .draw {
  stroke-dashoffset: 100;
  transition: stroke-dashoffset .85s var(--ease);
}
.rai-js .flow.is-2 .flow-arrow .draw { stroke-dashoffset: 0; }
.rai-js .flow-arrow .head { opacity: 0; transition: opacity .28s var(--ease) .6s; }
.rai-js .flow.is-2 .flow-arrow .head { opacity: 1; }

.rai-js .flow-list li { opacity: 0; transform: translateY(12px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.rai-js .flow.is-3 .flow-list li { opacity: 1; transform: none; }
.rai-js .flow.is-3 .flow-list li:nth-child(1) { transition-delay: .02s; }
.rai-js .flow.is-3 .flow-list li:nth-child(2) { transition-delay: .08s; }
.rai-js .flow.is-3 .flow-list li:nth-child(3) { transition-delay: .14s; }
.rai-js .flow.is-3 .flow-list li:nth-child(4) { transition-delay: .20s; }
.rai-js .flow.is-3 .flow-list li:nth-child(5) { transition-delay: .26s; }
.rai-js .flow.is-3 .flow-list li:nth-child(6) { transition-delay: .32s; }
.rai-js .flow.is-3 .flow-list li:nth-child(7) { transition-delay: .38s; }
.rai-js .flow.is-3 .flow-list li:nth-child(8) { transition-delay: .44s; }
.rai-js .flow.is-3 .flow-close { transition-delay: .52s; }

/* ---------- the example rail, inside the Content chapter ---------- */
/* Merged into .sec-content on 2026-08-27 (AL: "pourquoi c'est pas integre a
   l'etape d'avant"). The list above names the formats, this rail shows them, so
   the page states it once.
   The pinned caption stage that used to live in its own .sec-showcase section is
   GONE, with its .pinsec / .pin-* / .pv-* rules. It repeated the schematic and the
   list a third time, and it carried a real fault: .pin-caps was max-width 24ch and
   min-height 1.3em, both resolved against the parent's 16px, so a 48px caption that
   wrapped inside that 242x21px box spilled about 45px above it and landed on top of
   the schematic. Measured at 768 to 1440px wide before removal: "A newsletter." and
   "Anything you want." were the two that wrapped, and the two AL screenshotted.
   Do not reintroduce an absolutely positioned caption without sizing its box in the
   caption's own font. */

.rail-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  margin-top: clamp(28px, 4.5vw, 52px);
  padding-top: clamp(22px, 3.5vw, 36px);
  border-top: 1px solid var(--line);
}
.rail-lede {
  font-weight: 700; font-size: clamp(21px, 2.6vw, 30px);
  letter-spacing: -0.028em; line-height: 1.15; color: var(--ink); margin: 0;
}
.rail-nav { display: flex; gap: 10px; }
.rail-btn, .cv-btn {
  width: 42px; height: 42px; flex: 0 0 42px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 50%;
  background: var(--bg); color: var(--ink); cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.rail-btn svg, .cv-btn svg { width: 20px; height: 20px; }
.rail-btn:hover, .cv-btn:hover { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.rail-btn:focus-visible, .cv-btn:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
/* A control with nothing left to reveal says so instead of looking broken. */
.rail-btn[disabled], .cv-btn[disabled] { opacity: .3; cursor: default; }
.rail-btn[disabled]:hover, .cv-btn[disabled]:hover { background: var(--bg); border-color: var(--line); color: var(--ink); }
.cv-foot .cv-btn[disabled]:hover { background: transparent; border-color: rgba(255, 255, 255, .45); color: #fff; }
/* The arrows only do something once the stepper is wired, so they stay out of the
   page when scripting is off. Native swipe and snapping still work there. */
html:not(.rai-js) .rail-nav { display: none; }

/* the rail: centre-snapped, near full viewport cards */
.rail {
  list-style: none;
  display: flex;
  gap: clamp(14px, 2vw, 22px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* Zero, on purpose. The stepper computes its target from the rects and lets the
     browser snap to exactly that; a scroll-padding here would offset every snap
     position and put the two out of step. */
  scroll-padding-inline: 0;
  /* No horizontal padding either. With snap-align: start the browser parks the
     first card's left edge on the container's start edge, so any padding here
     becomes a permanent scrollLeft offset and the rail never reads as "at the
     beginning". */
  padding: clamp(18px, 3vw, 34px) 0 10px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.rail:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 4px; border-radius: 20px; }
.rail::-webkit-scrollbar { height: 8px; }
.rail::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
/* Closes the rail on the one-click promise (AL, 28/08/2026). Same scale and
   alignment as .rail-lede, so the chapter opens and closes on the same voice. */
.rail-close {
  font-weight: 700; font-size: clamp(21px, 2.6vw, 30px);
  letter-spacing: -0.028em; line-height: 1.15; color: var(--ink);
  margin: clamp(10px, 1.6vw, 20px) 0 0;
}
.rail-close em { font-style: normal; color: var(--accent); }
.oc {
  /* 80vw rather than 86: at 375px the gutter left only about 8px of the next card
     showing, which is not enough to read as "there is more". At 80vw roughly 45px
     of the following card is cut off by the edge, which is the signal. */
  flex: 0 0 min(80vw, 420px);
  /* start, not center. Centre snapping cannot bring the first or the last card
     into place (the scroller runs out before they reach the middle), so those two
     were unreachable by stepping. Start alignment also leaves the next card
     visibly cut off at the right edge, which is what tells a visitor the rail
     carries on. */
  scroll-snap-align: start;
  /* One gesture, one card: the scroll is forbidden to fly past a snap point. */
  scroll-snap-stop: always;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  min-height: clamp(340px, 52vh, 460px);
}
.oc-head {
  display: flex; align-items: center; gap: 8px;
  padding: 13px 17px; font-size: 12.5px; font-weight: 600;
  color: var(--ink-soft); border-bottom: 1px solid var(--line);
}
.oc-head svg { width: 16px; height: 16px; flex: 0 0 16px; }
.oc-body { padding: 17px; display: flex; flex-direction: column; gap: 11px; flex: 1; }

/* The Mailchimp wordmark chip was removed on 2026-08-28. The card now carries
   Mailchimp's own logo file, Freddie included, from their brand assets page.
   Second time AL asked for it, and the rule stands: never an approximation. */

.tw-top { display: flex; gap: 10px; align-items: center; }
.tw-av { width: 42px; height: 42px; border-radius: 50%; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; }
.tw-name { font-weight: 700; font-size: 15px; line-height: 1.15; color: var(--ink); }
.tw-handle { font-size: 13px; color: var(--ink-soft); }
.tw-text { font-size: 15.5px; line-height: 1.45; color: var(--ink); }
.tw-time { font-size: 12.5px; color: var(--ink-soft); }

/* The two video cards are now players rather than links (AL, 2026-08-28), so the
   .yt-* and .ytl-link/.ytl-shot/.ytl-thumb/.ytl-play/.ytl-dur rules were dropped.
   Their replacements are the .vid-* rules at the end of this file. Only the
   meta strip below survives, the long card still uses it. */

/* Title and channel stay welded to the bottom of the thumbnail, the way a real
   YouTube grid card reads. The rail stretches every card to the tallest one, so
   the slack falls underneath rather than between the shot and its title. */
.ytl-meta { padding: 15px 17px 17px; display: flex; flex: 1; flex-direction: column; justify-content: flex-start; gap: 5px; }
.ytl-title { font-weight: 700; font-size: 17px; line-height: 1.24; letter-spacing: -0.018em; color: var(--ink); }
.ytl-sub { font-size: 13px; color: var(--ink-soft); }

.art-hed { font-weight: 700; font-size: 20px; line-height: 1.18; letter-spacing: -0.022em; color: var(--ink); }
.art-dek { font-size: 13.5px; color: var(--ink-soft); font-style: italic; }
/* Two paragraphs and an ellipsis, so it reads as an extract that carries on
   rather than a headline with a caption (AL, 2026-08-27). */
.art-body { font-size: 13.5px; line-height: 1.52; color: var(--ink-soft); }
.art-body:first-of-type::first-letter { font-size: 31px; font-weight: 700; float: left; line-height: .96; padding-right: 7px; color: var(--ink); }
.art-card .oc-body { gap: 9px; }

.nl-subject { font-weight: 700; font-size: 16px; color: var(--ink); }
.nl-pre { font-size: 12.5px; color: var(--ink-soft); }
.nl-body { font-size: 14px; line-height: 1.5; color: var(--ink-soft); border-top: 1px solid var(--line); padding-top: 11px; }

.qt-card .oc-body { justify-content: center; background: var(--bg-2); }
.qt-mark { font-size: 46px; font-weight: 700; color: var(--accent); line-height: .6; }
.qt-text { font-weight: 600; font-size: 18px; line-height: 1.35; letter-spacing: -0.014em; color: var(--ink); }
.qt-sig { font-size: 13px; color: var(--accent-ink); font-weight: 600; }

/* A carousel that actually carousels (AL, 2026-08-27). Eight slides on a snapping
   track: swipe, arrows, dots and the arrow keys all move it, and with scripting off
   the track is still a native horizontal scroller, so the format is never faked. */
.cv-body { background: var(--accent); padding: 0; gap: 0; }
.cv-track {
  display: flex; flex: 1;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.cv-track::-webkit-scrollbar { display: none; }
.cv-track:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }
.cv-slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  display: flex; flex-direction: column; justify-content: space-between;
  gap: 14px; padding: 17px; color: #fff;
}
/* The text slide rules (.cv-n, .cv-t, .cv-cover, .cv-end, .cv-swipe) went with the
   mock copy on 2026-08-28. Both carousels now carry the real exported slides as
   images, so the styling they need is .cv-body.is-shots at the end of this file. */

.cv-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 13px; background: var(--accent-ink);
}
.cv-foot .cv-btn {
  width: 32px; height: 32px; flex: 0 0 32px;
  background: transparent; border-color: rgba(255, 255, 255, .45); color: #fff;
}
.cv-foot .cv-btn svg { width: 17px; height: 17px; }
.cv-foot .cv-btn:hover { background: #fff; border-color: #fff; color: var(--accent-ink); }
.cv-foot .cv-btn:focus-visible { outline-color: #fff; }
html:not(.rai-js) .cv-foot .cv-btn { display: none; }
.cv-dots { display: flex; gap: 5px; flex: 1; justify-content: center; }
.cv-dots span { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .40); transition: background .2s var(--ease); }
.cv-dots span:first-child { background: #fff; }
.rai-js .cv-dots span:first-child { background: rgba(255, 255, 255, .40); }
.rai-js .cv-dots span.on { background: #fff; }

/* ---------- headline-first chapter timing ---------- */
/* The chapter headline lands crisp, its body settles in underneath a beat later.
   Reversible: scrolling back up puts it away again. */
.rai-js .section-head.chap > p,
.rai-js .section-head.chap > .hero-actions {
  opacity: 0; transform: translateY(12px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.rai-js .section-head.chap.lit > p { opacity: 1; transform: none; transition-delay: .10s; }
.rai-js .section-head.chap.lit > .hero-actions { opacity: 1; transform: none; transition-delay: .18s; }

/* ---------- conversion band (after Architecture) ---------- */
.sec-convert { background: var(--bg-2); }
.sec-convert .section-head { margin-bottom: 0; gap: 16px; }

/* ---------- pain ---------- */
/* AL's dictated copy. Capitals come from CSS so the apostrophe and the quote
   marks stay exactly as typed in the markup. */

.sec-pain .shell { display: flex; flex-direction: column; align-items: center; text-align: center; }
.pain-open, .pain-close {
  color: var(--ink-soft);
  font-size: clamp(19px, 2.4vw, 26px);
  font-weight: 500;
  letter-spacing: -0.018em;
}
.pain-close { color: var(--accent-ink); font-weight: 600; }

/* Visual-only fix (2026-08-24): five identical centered lines read as one wall of
   text, not as a list. No word in any <li> changes. Each row gets a numeral and a
   hairline divider, both generated in CSS (counter + border), so the fix cannot
   touch the text nodes even by accident. Still centered, still calm: same weight,
   same size, same uppercase treatment as before. */
.pain-list {
  counter-reset: pain;
  list-style: none;
  margin: clamp(26px, 3.4vw, 40px) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 100%;
}
.pain-list li {
  counter-increment: pain;
  width: 100%;
  max-width: 640px;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 700;
  font-size: clamp(24px, 4.6vw, 50px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  padding-top: clamp(14px, 2.2vw, 22px);
  margin-top: clamp(14px, 2.2vw, 22px);
  border-top: 1px solid var(--line);
}
.pain-list li:first-child { padding-top: 0; margin-top: 0; border-top: none; }
/* AL (2026-08-25): these two lines must never wrap. They shrink with the
   viewport instead: the vw-driven clamp is sized so the longest one ("I don't
   know how to use AI.", 28 characters uppercase) fits inside the shell gutter
   at 320px and up. Verified by measurement at 375. */
.pain-list li.nw {
  white-space: nowrap;
  font-size: clamp(15px, 5.4vw, 50px);
}
.pain-list li::before {
  content: counter(pain, decimal-leading-zero);
  display: block;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-ink);
  font-variant-numeric: tabular-nums;
  margin-bottom: 8px;
}

/* ---------- operations ---------- */

/* Each line is a solid orange plate, not orange text on white. Adding the next
   two or three lines just adds plates to the stack. */
.ops-list { list-style: none; display: flex; flex-direction: column; align-items: center; gap: clamp(12px, 1.8vw, 18px); }
.ops-line {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: clamp(28px, 5.2vw, 54px);
  line-height: 1.08;
  letter-spacing: -0.032em;
  text-align: center;
  padding: clamp(12px, 1.8vw, 20px) clamp(22px, 3.4vw, 44px);
  border-radius: 16px;
  font-variant-numeric: tabular-nums;
  max-width: 100%;
}

/* Cascading reveal, lighter than the Content diagram: one trigger (the #opsList
   IntersectionObserver below adds .in-view once), then a fixed stagger per line.
   No step tracking, no scroll math. Default state is finished, matching every
   other animated element on this page: the hidden state only exists behind
   .rai-js, so JS off or reduced motion shows all three lines immediately. */
.rai-js .ops-list li {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.rai-js .ops-list.in-view li { opacity: 1; transform: none; }
.rai-js .ops-list.in-view li:nth-child(1) { transition-delay: .02s; }
.rai-js .ops-list.in-view li:nth-child(2) { transition-delay: .12s; }
.rai-js .ops-list.in-view li:nth-child(3) { transition-delay: .22s; }

/* ---------- badge ---------- */
/* Small page-level status marker, e.g. "Coming soon." on /ai/business. Same
   visual language as .pill (tracked uppercase, accent border) but sized for a
   spot under an h1 rather than inside a table cell. */
.badge {
  display: inline-block;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 7px 16px;
  border-radius: 980px;
  border: 1px solid var(--accent);
  color: var(--accent-ink);
  background: rgba(255, 106, 0, .08);
}

/* ---------- architecture (black, full width, last section) ---------- */

.arch {
  background: var(--ink);
  color: #fff;
  padding: clamp(66px, 9vw, 120px) 0;
}
.arch h2, .arch h3 { color: #fff; }
.arch p { color: rgba(255, 255, 255, .70); }
.arch .eyebrow { color: var(--accent); }
.arch .rule { background: var(--accent); }
.arch .section-head { margin-bottom: clamp(34px, 5vw, 56px); }

/* --- the tool structure: branches off one spine, converging on one operator ---
   Drawn entirely in CSS. The spine is a centred column, each node reaches it with
   an arm exactly half the spine column wide, so nothing needs measuring and the
   whole thing survives any width. */
.sys { --spine: clamp(44px, 7vw, 104px); margin-top: clamp(8px, 2vw, 20px); }
.sys-branches {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--spine) minmax(0, 1fr);
  column-gap: 0;
  align-items: center;
}
.sys-col { display: flex; flex-direction: column; gap: clamp(12px, 1.8vw, 22px); }
.sys-col-a { grid-column: 1; text-align: right; }
.sys-col-b { grid-column: 3; text-align: left; }
.sys-spine { grid-column: 2; align-self: stretch; position: relative; }
.sys-spine::before {
  content: "";
  position: absolute;
  left: 50%;
  margin-left: -1.5px;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--accent);
}
.sys-node {
  position: relative;
  border: 2px solid var(--accent);
  border-radius: 12px;
  background: rgba(255, 106, 0, .09);
  padding: clamp(11px, 1.5vw, 15px) clamp(13px, 1.8vw, 19px);
  color: #fff;
  font-weight: 600;
  font-size: clamp(15px, 1.8vw, 20px);
  line-height: 1.26;
  letter-spacing: -0.014em;
}
.sys-node::after {
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -1.5px;
  height: 3px;
  width: calc(var(--spine) / 2);
  background: var(--accent);
}
.sys-col-a .sys-node::after { left: 100%; }
.sys-col-b .sys-node::after { right: 100%; }

.sys-hub {
  position: relative;
  margin: clamp(34px, 5vw, 58px) auto 0;
  width: max-content;
  max-width: 100%;
  background: var(--accent);
  border-radius: 14px;
  padding: clamp(13px, 1.8vw, 18px) clamp(22px, 3vw, 38px);
  color: #fff;
  font-weight: 700;
  font-size: clamp(20px, 2.9vw, 32px);
  letter-spacing: -0.026em;
  text-align: center;
}
/* The spine keeps running from the branches down into the operator. */
.sys-hub::before {
  content: "";
  position: absolute;
  left: 50%;
  margin-left: -1.5px;
  bottom: 100%;
  height: clamp(34px, 5vw, 58px);
  width: 3px;
  background: var(--accent);
}

.sys-close {
  margin-top: clamp(22px, 3vw, 34px);
  text-align: center;
  color: var(--accent);
  font-weight: 600;
  font-size: clamp(18px, 2.4vw, 26px);
  letter-spacing: -0.02em;
}
.arch .sys-close { color: var(--accent); }

/* --- four abstracted views of the machine ---
   Read as structure from across the room, tell you nothing up close. Generic step
   names, placeholder swatches, line style instead of counts. No screenshot, no real
   prompt, no real palette, no ratio, no number. */
.abs-grid {
  margin-top: clamp(44px, 6vw, 76px);
  display: grid;
  /* Two by two, deliberately. Four across turns the section into a dashboard,
     which is exactly the overwhelmed feeling to avoid. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 14px;
  overflow: hidden;
}
/* Three panels since "Locked once" was removed (AL, 2026-08-25): an odd last
   panel spans the full row so the grid never shows an empty cell. */
.abs-grid .abs:last-child:nth-child(odd) { grid-column: 1 / -1; }
.abs {
  background: var(--ink);
  padding: clamp(22px, 2.8vw, 30px);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.abs-cap {
  color: rgba(255, 255, 255, .52);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.004em;
}

/* staircase: a repeatable order, each step set one notch further in */
.stair { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.stair li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  border-left: 3px solid var(--accent);
  padding: 5px 0 5px 12px;
}
.stair li:nth-child(2) { margin-left: 12px; }
.stair li:nth-child(3) { margin-left: 24px; }
.stair li:nth-child(4) { margin-left: 36px; }
.stair li:nth-child(5) { margin-left: 48px; }
.stair-k {
  color: rgba(255, 255, 255, .42);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.stair-t { color: #fff; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }

/* fan: one input, several outputs, off a single rail */
.fan { display: flex; flex-direction: column; }
.fan-in {
  align-self: flex-start;
  border: 2px solid var(--accent);
  border-radius: 10px;
  padding: 8px 14px;
  color: #fff;
  font-size: 14.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.fan-out {
  list-style: none;
  position: relative;
  margin-top: 14px;
  padding-left: 30px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.fan-out::before {
  content: "";
  position: absolute;
  left: 14px;
  top: -14px;
  bottom: 12px;
  width: 3px;
  background: var(--accent);
}
.fan-out li {
  position: relative;
  color: rgba(255, 255, 255, .88);
  font-size: 14.5px;
  font-weight: 500;
}
.fan-out li::before {
  content: "";
  position: absolute;
  left: -16px;
  top: 50%;
  margin-top: -1.5px;
  width: 14px;
  height: 3px;
  background: var(--accent);
}

/* degrees of automation: the line style carries the degree, never a count or a ratio */
.deg { list-style: none; display: flex; flex-direction: column; gap: 16px; }
.deg li { display: flex; flex-direction: column; gap: 8px; }
.deg-t { color: #fff; font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; }
.deg-bar { display: block; height: 0; border-top-width: 5px; border-top-color: var(--accent); }
.deg-solid { border-top-style: solid; }
.deg-dashed { border-top-style: dashed; }
.deg-dotted { border-top-style: dotted; }

/* locked identity: placeholder swatches and placeholder letterforms, nothing real */
.lock { display: flex; flex-direction: column; gap: 16px; }
.lock-sw { display: flex; gap: 7px; }
.lock-sw span { width: 30px; height: 30px; border-radius: 7px; }
.lock-sw span:nth-child(1) { background: var(--accent); }
.lock-sw span:nth-child(2) { background: var(--bg); }
.lock-sw span:nth-child(3) { background: var(--bg-2); }
.lock-sw span:nth-child(4) { background: var(--line); }
.lock-sw span:nth-child(5) { background: var(--ink-soft); }
.lock-type { display: flex; align-items: baseline; gap: 16px; color: #fff; }
.lock-aa-display { font-size: 30px; font-weight: 700; letter-spacing: -0.03em; }
.lock-aa-body { font-size: 18px; font-weight: 400; }
.lock-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.lock-grid span { height: 26px; border: 2px solid rgba(255, 106, 0, .55); border-radius: 5px; }

.arch-tbd { margin-top: clamp(34px, 4.5vw, 52px); }
.arch .tbd {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .26);
}
.arch .tbd .k { color: var(--accent); }
.arch .tbd p { color: rgba(255, 255, 255, .70); }

/* ---------- proof band (black, full bleed, punctuation only) ---------- */

.band {
  background: var(--ink);
  color: var(--bg);
  padding: clamp(60px, 8.5vw, 104px) 0;
}
.band h2, .band h3 { color: var(--bg); }
.band p { color: rgba(255, 255, 255, .72); }
.band .eyebrow { color: var(--accent); }
.band .rule { background: var(--accent); }
.band .proof-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 14px;
  overflow: hidden;
  margin-top: 34px;
}
.band .proof-cell {
  background: var(--ink);
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.band .proof-cell .k {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.band .btn { background: var(--bg); color: var(--ink); border-color: var(--bg); }
.band .btn:hover { background: var(--accent); border-color: var(--accent); color: var(--ink); }

/* Light variant of the proof grid, for pages that keep black for one section only. */
.proof-grid.light {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  margin-top: 34px;
}
.proof-grid.light .proof-cell { background: var(--bg); padding: 28px 26px; display: flex; flex-direction: column; gap: 10px; }
.proof-grid.light .proof-cell .k {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-ink);
  font-variant-numeric: tabular-nums;
}

/* ---------- steps ---------- */

.steps { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.step {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 0;
  border-bottom: 1px solid var(--line);
}
.step:last-child { border-bottom: none; }
.step .k {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--ink-soft);
  padding: 24px 0 24px 24px;
  border-right: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
.step .body { padding: 24px 26px; display: flex; flex-direction: column; gap: 8px; }
.step.is-done .k { color: var(--accent-ink); }
.step.is-current { background: var(--bg-2); }

/* ---------- placeholder slot (content not decided yet) ---------- */

.tbd {
  border: 1px dashed var(--line);
  background: var(--bg-2);
  border-radius: 14px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tbd .k {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-ink);
  font-variant-numeric: tabular-nums;
}
.tbd p { font-size: 15.5px; }

/* ---------- forms ---------- */

.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.field label {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.field input, .field textarea, .field select {
  font-family: var(--sans);
  font-size: 16px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 13px 14px;
  width: 100%;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-color: var(--accent);
}
.form-note { font-family: var(--sans); font-size: 13.5px; color: var(--ink-soft); letter-spacing: -0.004em; }

.msg { padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; font-size: 15px; background: var(--bg-2); }
.msg.ok { border-color: var(--accent); }
.msg.err { border-color: var(--accent-ink); color: var(--accent-ink); }
.msg[hidden] { display: none; }

/* ---------- data list ---------- */

.dl { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.dl-row {
  display: grid;
  grid-template-columns: minmax(140px, 220px) 1fr;
  border-bottom: 1px solid var(--line);
}
.dl-row:last-child { border-bottom: none; }
.dl-row .k {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 16px 18px;
  border-right: 1px solid var(--line);
  background: var(--bg-2);
  font-variant-numeric: tabular-nums;
}
.dl-row .v { padding: 16px 18px; font-size: 15.5px; font-variant-numeric: tabular-nums; }

.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; }
table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 560px; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); }
th {
  font-family: var(--sans);
  font-size: 12.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 600;
  background: var(--bg-2);
}
tr:last-child td { border-bottom: none; }
td .pill, .pill {
  display: inline-block;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 980px;
  border: 1px solid var(--line);
  background: var(--bg-2);
  color: var(--ink-soft);
}
.pill.on { border-color: var(--accent); color: var(--accent-ink); }

/* ---------- footer ---------- */
/* Tried on AL's "maybe" (2026-08-24): the previous neutral bg-2 strip read badly
   sitting right under the black Architecture section. Solid orange band, white
   text, as literally asked.
   MEASURED (WCAG relative-luminance formula): white (#fff) on #ff6a00 is 2.87:1
   contrast, below WCAG AA's 4.5:1 floor for body text (and below the 3:1 floor
   for large text). For reference, dark ink (#0b0b0c) on the same orange measures
   6.85:1. Shipped with white regardless: this is a visual trial AL asked to see
   for himself, not a locked decision. Flagged for him alongside the revert notes.
   EASY REVERT to the previous treatment: border-top back to
   "1px solid var(--line)", background back to "var(--bg-2)", the two text/link
   colors back to "var(--ink-soft)", and drop the two rules below (footer.site a,
   footer.site a:hover) back to their prior single line
   "footer.site a { color: var(--ink-soft); text-decoration: none; }" and
   "footer.site a:hover { color: var(--accent-ink); }". Nothing else in this
   file depends on this block. */
footer.site {
  border-top: none;
  background: var(--accent);
  padding: 34px 0 46px;
}
footer.site .foot-in {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  justify-content: space-between;
  font-family: var(--sans);
  font-size: 14px;
  letter-spacing: -0.004em;
  color: #fff;
}
footer.site a { color: #fff; text-decoration: none; }
footer.site a:hover { color: rgba(255, 255, 255, .72); }
footer.site .legal { display: flex; flex-wrap: wrap; gap: 16px; }

/* ---------- compact page (single viewport, e.g. /ai/business) ---------- */
/* AL: everything on the Businesses page must fit one screen, desktop and mobile.
   Same tokens, same type, just tightened rhythm. Scoped to body.compact so no
   other page moves. */
body.compact { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
body.compact main { flex: 1 0 auto; }
/* The topbar and the audience bar are deliberately NOT tightened here. They are
   shared chrome: /ai/ and /ai/business must have pixel-identical header geometry
   so switching audience tabs feels like a tab, not a page jump (AL, 2026-08-26).
   Only the content below main gets compacted. */
body.compact section { padding: clamp(8px, 1.4vh, 16px) 0; }
body.compact .hero { padding-top: clamp(10px, 1.8vh, 18px); }
body.compact .hero .inner { gap: 8px; }
body.compact h1 { font-size: clamp(26px, 3.6vw, 40px); }
body.compact .lead { font-size: clamp(15px, 1.7vw, 18px); line-height: 1.42; }
body.compact .field { margin-bottom: 7px; gap: 3px; }
body.compact .field label { font-size: 11.5px; }
body.compact .field input, body.compact .field textarea { padding: 9px 12px; font-size: 15px; }
body.compact .btn { padding: 10px 22px; font-size: 14px; }
body.compact .form-note { font-size: 11.5px; margin-top: 8px !important; }
body.compact footer.site { padding: 8px 0 10px; }
body.compact footer.site .foot-in { font-size: 12px; gap: 6px 20px; }

@media (max-width: 720px) {
  /* Chrome stays untouched on mobile too, same tab-continuity reason. */
  body.compact section { padding: clamp(4px, 0.8vh, 10px) 0; }
  body.compact .hero { padding-top: clamp(6px, 1.1vh, 12px); }
  body.compact .hero .inner { gap: 5px; }
  body.compact .eyebrow { font-size: 13px; }
  body.compact h1 { font-size: clamp(20px, 5.6vw, 26px); }
  body.compact .lead { font-size: 12.5px; line-height: 1.34; }
  body.compact .badge { font-size: 11px; padding: 5px 12px; }
  body.compact .field { margin-bottom: 5px; gap: 2px; }
  body.compact .field label { font-size: 10.5px; }
  body.compact .field input, body.compact .field textarea { padding: 7px 10px; font-size: 14px; }
  body.compact .field textarea { min-height: 38px; }
  body.compact .btn { padding: 7px 14px; font-size: 12.5px; }
  body.compact .hero-actions { gap: 8px; flex-wrap: nowrap; }
  body.compact .form-note { font-size: 10.5px; margin-top: 4px !important; }
  body.compact footer.site { padding: 5px 0 7px; }
  body.compact footer.site .foot-in { font-size: 10.5px; gap: 3px 12px; }
}

/* Short viewports (iPhone SE class, <=700px tall). The shared chrome is now
   fixed by the tab-continuity rule above, so the remaining budget has to come
   out of the content. Only applies where the page would otherwise scroll. */
@media (max-width: 720px) and (max-height: 700px) {
  body.compact section { padding: 3px 0; }
  body.compact .hero { padding-top: 5px; }
  body.compact .hero .inner { gap: 4px; }
  body.compact h1 { font-size: 19px; }
  body.compact .eyebrow { font-size: 11.5px; }
  body.compact .lead { font-size: 11.5px; line-height: 1.3; }
  body.compact .badge { font-size: 10px; padding: 3px 10px; }
  body.compact .field { margin-bottom: 4px; }
  body.compact .field label { font-size: 10px; }
  body.compact .field input { padding: 5px 9px; font-size: 13px; }
  body.compact .field textarea { min-height: 30px; padding: 5px 9px; font-size: 13px; }
  body.compact .btn { padding: 6px 12px; font-size: 12px; }
  body.compact .form-note { font-size: 9.5px; margin-top: 3px !important; }
  body.compact footer.site { padding: 4px 0 5px; }
  body.compact footer.site .foot-in { font-size: 9.5px; gap: 2px 10px; }
}

/* ---------- responsive ---------- */

@media (max-width: 780px) {
  /* One column, so the spine moves to a left rail and every arm points back at it. */
  .sys-branches {
    grid-template-columns: minmax(0, 1fr);
    position: relative;
    padding-left: 30px;
    row-gap: clamp(12px, 1.8vw, 22px);
  }
  .sys-branches::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--accent);
  }
  .sys-spine { display: none; }
  .sys-col-a { grid-column: 1; grid-row: 1; text-align: left; }
  .sys-col-b { grid-column: 1; grid-row: 2; text-align: left; }
  .sys-col-a .sys-node::after,
  .sys-col-b .sys-node::after { left: auto; right: 100%; width: 30px; }
  .sys-hub { margin-left: 0; margin-right: auto; text-align: left; }
  .sys-hub::before { left: 0; margin-left: 0; }
  .sys-close { text-align: left; }
}

@media (max-width: 780px) {
  .flow-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    row-gap: 2px;
  }
  .flow-box   { grid-column: 1; grid-row: 1; }
  .flow-arrow { grid-column: 1; grid-row: 2; justify-self: start; width: clamp(84px, 26vw, 132px); padding-left: 8px; }
  .flow-plate { grid-column: 1; grid-row: 3; }
  .flow-tail  { grid-column: 1; grid-row: 4; }
  .flow-arrow svg { max-height: 148px; }
  .flow-arrow .arrow-wide { display: none; }
  .flow-arrow .arrow-narrow { display: block; }
}

@media (max-width: 700px) {
  .abs-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
  .topbar-in { flex-direction: column; align-items: flex-start; gap: 12px; }
  .nav { gap: 16px; }
  .step { grid-template-columns: 1fr; }
  .step .k { border-right: none; border-bottom: 1px solid var(--line); padding: 16px 20px; }
  .dl-row { grid-template-columns: 1fr; }
  .dl-row .k { border-right: none; border-bottom: 1px solid var(--line); }
}

/* ---------- motion preference ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  .rai-js .flow [data-step],
  .rai-js .flow-list li,
  .rai-js .ops-list li,
  .rai-js .section-head.chap > p,
  .rai-js .section-head.chap > .hero-actions {
    opacity: 1 !important;
    transform: none !important;
  }
  .rai-js .flow-arrow .draw { stroke-dashoffset: 0 !important; }
  .rai-js .flow-arrow .head { opacity: 1 !important; }
  /* Snapping is kept on. It is navigation, not decoration: one gesture still
     moves exactly one card, it simply arrives instantly. The global rule above
     already forces scroll-behavior: auto, and the stepper reads the same media
     query and passes behavior: "auto" to every scrollTo it makes. */
  .vid-play { opacity: 1 !important; }
}

/* =======================================================================
   RAIL PASS, 2026-08-28 (AL feedback)
   Real platform marks, real published content, players that run in the page.
   ======================================================================= */

/* ---------- one height for every rail card ----------
   Before this pass every card was text, so the flex row settled on the tallest
   one and they matched by accident. Media cards break that: a 4:5 slide and a
   9:16 short each set their own height from their artwork, and the row grew to
   729px at 1280, measured. The card now states its height, every media box
   inherits a definite one from it, and object-fit does the rest. min-height: 0
   on the inner boxes is what lets them shrink inside it. */
.rail .oc { height: clamp(420px, 62vh, 560px); min-height: 0; }
.rail .oc-body { min-height: 0; }
.rail .cv-track { min-height: 0; }

/* ---------- platform marks ----------
   Every file under /ai/assets/logos is the company's own artwork, downloaded
   from that company's brand assets page and self hosted unchanged. Nothing is
   redrawn by hand and nothing is recoloured outside the brand's own palette.
   Only the box they sit in belongs to us. Card heads therefore stay white on
   every card, video cards included: half of these marks are black artwork and
   would disappear on a dark strip. */
.oc-head .pf { height: 16px; width: auto; flex: 0 0 auto; display: block; }
.oc-head .pf.wide { height: 14px; }      /* horizontal wordmarks */
.oc-head .pf.mc { height: 20px; }        /* Freddie needs the extra 4px to read */

/* ---------- video that plays in the page ----------
   AL, 2026-08-28: the long and the short formats must be readable in the page,
   not clickable links. The markup ships a poster inside a real anchor, so with
   scripting off the card still works and still goes somewhere; with scripting
   on the anchor is swapped for a youtube-nocookie iframe on click. Nothing from
   YouTube is requested until a visitor asks for it. */
.vid-hold {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
/* The 16:9 shot is centred on the black rather than pinned to the top. Pinned,
   it left about 200px of white under the title, measured at 1280. Centred, the
   card reads as a player with letterboxing, which is what it is. */
.vid-hold.is-wide { flex: 1 1 auto; }
.vid-shot {
  position: relative;
  display: block;
  text-decoration: none;
  height: 100%;
  aspect-ratio: 9 / 16;
  max-width: 100%;
  background: var(--ink);
}
.vid-hold.is-wide .vid-shot { height: auto; width: 100%; aspect-ratio: 16 / 9; }
/* The meta strip takes what it needs, never the slack: the slack belongs to the
   black above it. Overrides the flex: 1 the strip carries for the old layout. */
.vid-card .ytl-meta { flex: 0 0 auto; }
.vid-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.vid-shot iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.vid-play {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 58px; height: 41px; opacity: .92;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.vid-play svg { width: 100%; height: 100%; display: block; }
.vid-shot:hover .vid-play { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
.vid-shot:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.vid-shot:focus-visible .vid-play { opacity: 1; }
.vid-dur {
  position: absolute; right: 8px; bottom: 8px;
  background: rgba(0, 0, 0, .78); color: #fff;
  font-size: 11.5px; font-weight: 600; padding: 2px 6px; border-radius: 5px;
  font-variant-numeric: tabular-nums;
}
.vid-cap {
  padding: 13px 17px 16px; background: var(--bg);
  font-weight: 700; font-size: 15.5px; line-height: 1.25;
  letter-spacing: -0.015em; color: var(--ink);
}

/* ---------- carousels made of the real exported slides ----------
   The published PNGs themselves, not a redraw of them, so the card shows the
   actual deliverable. They are 4:5 art on black, so the track sits on ink and
   the slide is contained rather than cropped: no line of copy is ever cut. */
.cv-body.is-shots { background: var(--ink); }
.cv-body.is-shots .cv-slide { padding: 0; display: block; min-width: 0; }
.cv-body.is-shots .cv-slide img {
  display: block; width: 100%; height: 100%;
  object-fit: contain; background: var(--ink);
}
.cv-body.is-shots + .cv-foot,
.cv-body.is-shots .cv-foot { background: #141416; }

/* ---------- article cover ---------- */
.art-cover { display: block; width: 100%; height: auto; aspect-ratio: 1.91 / 1; object-fit: cover; }
.art-card .art-body:first-of-type::first-letter { font-size: inherit; font-weight: inherit; float: none; padding-right: 0; color: inherit; }

/* ---------- newsletter, sent rather than drafted ---------- */
/* AL, 2026-08-28: it has to read as published and finished. */
.nl-sent { color: var(--ok); font-weight: 700; }
.nl-tail { border-top: none; padding-top: 0; }

/* ---------- lifestyle photograph ----------
   The caption sits above the photograph because that is where Facebook puts a
   post's text, and this card is showing the format. It was empty until
   2026-08-28, on the belief that no lifestyle caption was written yet. That was
   wrong: the belief came from a stale local file, and the Lifestyle Content
   Planner carries a caption on every row. The card now shows the real one for
   the frame it displays.
   It is short because a real one is short. The EO Lifestyle Grammar, rule AL of
   2026-08-07, caps a lifestyle caption at two to eight words plus the single
   fixed hashtag: the photo carries, the caption grazes. So the box is sized for
   one line of type and its tag, not for a paragraph, and it is auto height so
   that a longer one can never spill the way the old .pin-caps box did. */
.ls-cap {
  padding: 14px 17px 13px;
  font-size: 15px; line-height: 1.42;
  letter-spacing: -0.008em; color: var(--ink);
  flex: 0 0 auto;
}
/* #eliteoutsiders is the whole hashtag policy on this format, always last.
   Small orange on white is --accent-ink, the same token the quote signature
   uses; --accent is reserved for display sizes. */
.ls-tag {
  display: block; margin-top: 5px;
  font-size: 13px; font-weight: 600; color: var(--accent-ink);
  letter-spacing: 0;
}
.ls-hold { flex: 1 1 auto; min-height: 0; overflow: hidden; background: var(--ink); }
.ls-shot { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- X avatar: the real photograph ---------- */
.tw-av {
  width: 42px; height: 42px; flex: 0 0 42px;
  border-radius: 50%; object-fit: cover; display: block;
  background: var(--ink);
}

/* ---------- the tools, named ----------
   AL asked for the real list under the claim. Ink on orange, never white:
   at this size white on #ff6a00 is below the contrast the charter allows, so
   each name sits in a white pill with ink type. */
.tools { list-style: none; display: flex; flex-wrap: wrap; gap: 9px 10px; margin-top: 6px; }
.tools li {
  font-size: clamp(13.5px, 1.4vw, 15.5px);
  font-weight: 600; letter-spacing: -0.008em; color: var(--ink);
  background: #fff; border-radius: 999px; padding: 7px 15px;
}
.tools-close {
  color: var(--ink); font-weight: 600;
  font-size: clamp(15px, 1.7vw, 17.5px); letter-spacing: -0.014em;
  margin-top: 2px;
}

/* ---------- the three cards get a spine ----------
   AL, 2026-08-28: the section reads naked in the middle of nothing. It lost its
   heading when the H1 moved into the hero and the page must not say the same
   sentence twice, so the identity has to be graphic rather than typographic.
   Each step now hangs off a hairline under an orange marker, which reads as one
   broken rule across three columns and as three separate rules once stacked. */
.sec-oneclick .cards {
  background: transparent; border: 0; border-radius: 0; overflow: visible;
  gap: clamp(26px, 3.4vw, 48px);
}
.sec-oneclick .card {
  background: transparent; padding: 42px 0 0; gap: 13px;
  position: relative; border-top: 1px solid var(--line);
}
.sec-oneclick .card .num {
  position: absolute; top: -14px; left: 0;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0;
}
/* With no heading over the section, these three are the largest type in it, so
   they carry the weight a chapter title would have carried. */
.sec-oneclick .card h3 { font-size: clamp(20px, 2.1vw, 24px); letter-spacing: -0.026em; }

@media (max-width: 780px) {
  .oc-head .pf.mc { height: 18px; }
  .tools li { padding: 6px 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .vid-play { opacity: 1 !important; }
}

/* ---------- legal documents (added 2026-08-28) ---------- */
/* /ai/legal, /ai/privacy, /ai/terms, /ai/disclaimer. Long-form reading, so the
   display sizes of the landing are deliberately stood down: a legal notice that
   shouts is a legal notice nobody finishes. Same tokens, same single family,
   no new colour. The orange appears once as the rule under the title and once
   on the TBD callouts, nowhere else, because at body size orange must be
   --accent-ink and never --accent. */

.legal-doc { padding: clamp(44px, 6vw, 76px) 0 clamp(56px, 7vw, 92px); }
.legal-doc .doc { max-width: 74ch; }

.legal-doc h1 {
  font-size: clamp(34px, 5.2vw, 54px);
  line-height: 1.06;
  letter-spacing: -0.032em;
  max-width: none;
}
.legal-doc .updated {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  letter-spacing: -0.004em;
  margin-top: 14px;
}
.legal-doc .rule { margin: 22px 0 0; }

.legal-doc h2 {
  font-size: clamp(20px, 2.2vw, 25px);
  line-height: 1.22;
  letter-spacing: -0.022em;
  margin: 44px 0 12px;
}
.legal-doc h3 {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.012em;
  margin: 26px 0 8px;
}
.legal-doc p,
.legal-doc li {
  font-size: 16px;
  line-height: 1.62;
  color: var(--ink-soft);
  letter-spacing: -0.004em;
}
.legal-doc p { margin-bottom: 13px; }
.legal-doc ul { margin: 0 0 13px; padding-left: 20px; }
.legal-doc li { margin-bottom: 7px; }
.legal-doc li::marker { color: var(--accent-ink); }

.legal-doc a.inline {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-ink);
}
.legal-doc a.inline:hover { color: var(--accent-ink); }

/* Table and column names are quoted verbatim so a reader can ask for exactly
   the rows that hold their data. They are long and unbreakable, which is the
   one thing on these pages that could push a 375px viewport sideways. */
.legal-doc code {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.94em;
  color: var(--ink);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 5px;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Sibling documents, so any one of the four reaches the other three. */
.doc-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 30px 0 34px;
}
.doc-nav a {
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.004em;
  color: var(--ink-soft);
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 980px;
  padding: 6px 14px;
}
.doc-nav a:hover { color: var(--ink); border-color: var(--ink); }
.doc-nav a[aria-current="page"] { color: var(--ink); border-color: var(--ink); }

/* An open decision, shown as one. Alexandre is not a lawyer and neither is the
   machine that drafted these pages, so anything that would be a real legal
   choice is left visibly empty instead of being filled with a formula. */
.tbd {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
  padding: 16px 18px;
  margin: 0 0 13px;
}
.tbd .tbd-label {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: 7px;
}
.tbd p:last-child { margin-bottom: 0; }

@media (max-width: 560px) {
  .legal-doc h2 { margin-top: 36px; }
  .legal-doc p, .legal-doc li { font-size: 15.5px; }
}