/* railbed.io industry pages (/industries/ and /industries/<slug>/): each page is a feature report on one industry.
   Loaded after pages.css (header, footer, breadcrumb, buttons) and before industry-figures.css (the scene inside the
   hero stage). Colours, type and spacing come from the design tokens (docs-tokens.css): DESIGN.md §3–5, §7, §9
   "Marketing site". Light only, like the landing. Components and chapter layouts are chosen by the Markdown's shape
   (scripts/industrygen.py), so every page shares them; site/README.md, "Industry pages", lists them.
   The grid: content 1200px, 12 columns of 24px gaps. Headings and wide components start at the content edge; leads
   and running text start at column 5, so every page has one reading line. The illustration motion is appended by
   the build from the landing source. */
:root {
  --eo: cubic-bezier(.16,1,.3,1); --es: cubic-bezier(.45,0,.2,1);
  /* The illustration palette (DESIGN.md §9–10). Navy leads on these pages (owner, 2026-10-05): it is Railbed's own
     part and every page's accent; brass marks the buyer's card; green stays the small signal (trust ticks, focus).
     The scenes use the rest. No design token carries these. */
  --ill-forest: #1F4D3A; --ill-forest-soft: #DFEAE3; --ill-navy: #23345C; --ill-brass: #B08A4E; --ill-oxblood: #6B2A2A;
  --ill-red-soft: #F7E7E3;
  --gut: 20px;          /* page gutter: 20px, 16px on the narrowest phones */
  --col: calc((100% + 24px) / 12);   /* one column plus its gap, inside the 1200px content box */
  --ch-gap: 148px;      /* between chapters (DESIGN.md §5 marketing rhythm) */
}
.ind { --accent: var(--ill-navy); }
[data-accent="forest"] { --accent: var(--ill-forest); }
[data-accent="oxblood"] { --accent: var(--ill-oxblood); }
[data-accent="navy"] { --accent: var(--ill-navy); }
[data-accent="brass"] { --accent: var(--ill-brass); }

::selection { background: var(--selection); }
.ind ::selection { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.ind input { caret-color: var(--accent); }
.ind :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; border-radius: var(--radius-xs); }
.ind-stage :focus-visible, .ind-cta :focus-visible { outline-color: var(--rb-green-bright); }

/* The header and footer share the content edge (pages.css centres them 20px inside it). */
.page--industry .top, .page--industries .top, .page--industry .foot, .page--industries .foot {
  box-sizing: border-box; width: calc(100% - 2 * var(--gut)); max-width: var(--container); padding-inline: 0; }
.page--industry .foot, .page--industries .foot { margin-top: 112px; }

.ind > * { width: min(100% - 2 * var(--gut), var(--container)); margin-inline: auto; }
.ind > .ind-hero { width: 100%; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.crumbs { flex-wrap: wrap; margin: 0; }

/* ---------- 1. Hero plate: the offer on the left; the slate stage bleeds off the right edge ---------- */
.ind-hero {
  --edge: max(var(--gut), (100% - var(--container)) / 2);
  display: grid; grid-template-columns: var(--edge) calc((100% - 2 * var(--edge)) * .5) 48px minmax(0, 1fr);
  padding-top: 20px; overflow-x: clip;
}
.ind-hero__copy { grid-column: 2; display: flex; flex-direction: column; container-type: inline-size; padding: 0 0 8px; }
/* The headline's cap line sits 96px below the stage's top edge (the breadcrumb's top) on every page: its box top is
   within .03em of the cap line, and the breadcrumb is 22px tall. */
.ind-hero h1 { margin: calc(71px + .03em) 0 0; font: 400 clamp(38px, 11.1cqi, 80px)/.98 var(--font-serif); letter-spacing: -.034em; color: var(--text-strong); text-wrap: balance; }
.ind-lead { margin: 30px 0 0; font: var(--type-lead); color: var(--text); text-wrap: pretty; }
.ind-hero .ind-lead { max-width: 30em; }

/* Signup: email joined to the primary action; the email travels in the URL fragment only (industries.js) */
.signup { display: flex; align-items: stretch; width: min(100%, 486px); margin-top: 36px; }
.signup input { flex: 1; min-width: 0; height: var(--button-height-marketing); box-sizing: border-box; padding: 0 16px; border: 1px solid var(--text-strong); border-right: 0; border-radius: var(--radius-xs) 0 0 var(--radius-xs); background: var(--bg-surface); color: var(--text-strong); font: 400 16px var(--font-sans); }
.signup input::placeholder { color: var(--text-placeholder); }
.signup input:focus-visible { outline-offset: 0; }
.signup__go { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; gap: var(--button-gap); height: var(--button-height-marketing); box-sizing: border-box; padding: 0 var(--button-pad-marketing); border-radius: 0 var(--radius-xs) var(--radius-xs) 0; background: var(--btn-primary-bg); color: var(--btn-primary-fg); font-size: var(--button-font-marketing); font-weight: var(--button-weight); text-decoration: none; white-space: nowrap; transition: background-color var(--dur-base), transform .16s var(--eo); }
.signup__go:hover { background: var(--btn-primary-hover); }
.signup__go:active { transform: translateY(1px); }
.arr { transition: transform var(--dur-slow) var(--eo); }
a:hover > .arr { transform: translateX(3px); }
.trust { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 18px 0 0; padding: 0; font-size: var(--font-size-label); color: var(--text-muted); }
.trust li { display: flex; align-items: center; gap: 7px; }
.trust svg { color: var(--rb-green); }
.signup--dark input { border-color: var(--on-dark-border); background: var(--on-dark-fill); color: var(--on-dark); }
.signup--dark input::placeholder { color: var(--on-dark-muted); }
.signup--dark .signup__go { background: var(--btn-on-dark-bg); color: var(--btn-on-dark-fg); }
.signup--dark .signup__go:hover { background: var(--btn-on-dark-hover); }
.trust--dark { justify-content: center; color: var(--on-dark-body); }
.trust--dark svg { color: var(--rb-green-bright); }
.btn--mk { height: var(--button-height-marketing); padding: 0 var(--button-pad-marketing); gap: var(--button-gap); font-size: var(--button-font-marketing); }
.arrowlink { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; text-decoration: none; color: var(--text-strong); }

/* The stage: slate under the supplied grain, rounded on its left corners only. The grain's light band enters from
   the bleed edge (DESIGN.md §5: auto 150%, 18% 0), so the scene's storefront sits on the darkest slate. There are no
   buttons: the drawing's own parts are the controls (owner, 2026-10-05). The scene (industry-figures.js and
   figures/<slug>.js) fills [data-fig-art], reads the box's size and refits when it changes; one caption sits under it. */
.ind-hero .ind-stage {
  grid-column: 4; position: relative; display: flex; flex-direction: column; justify-content: center;
  min-width: 0; padding: 36px 20px 24px 32px; overflow: hidden;
  border-radius: var(--radius-xl) 0 0 var(--radius-xl);
  background: var(--rb-slate) url(/texture.webp) 18% 0 / auto 150% no-repeat;
}
.ind-hero .ind-stage__fig { position: relative; width: min(100%, 720px); height: clamp(360px, 41vw, 600px); min-height: 0; }
/* Without the scene (no scripts, or none drawn yet): the landing card's line drawing on a pale plate, like a print
   laid on the stone. industry-figures.js replaces it. */
.ind-hero .ind-stage__art { position: absolute; inset: 0; margin: auto; width: min(64%, 420px); height: auto; aspect-ratio: 3 / 2; display: grid; place-items: center; border-radius: var(--radius-l); background: var(--rb-stone); box-shadow: var(--shadow-4); }
.ind-hero .ind-stage__art .ix-art { width: 86%; height: 86%; }
.ind-hero .ind-stage:not(.fig-on) .ind-stage__fig { position: static; }  /* the plate centres on the whole stage */
.ind-stage > [data-fig-status] { width: min(100%, 720px); min-height: 1.45em; margin: 14px 0 0; font: 400 14px/1.45 var(--font-sans); color: var(--on-dark-body); text-wrap: pretty; }
.ind-stage:not(.fig-on) > [data-fig-status] { visibility: hidden; }

/* At a glance: the four facts as one ruled strip */
.ind-glance { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-block: 88px 0; border-top: 1px solid var(--text-strong); }
.ind-glance div { padding: 18px 24px 0 0; }
.ind-glance div + div { padding-left: 24px; border-left: 1px solid var(--border); }
.ind-glance dt { font-size: var(--font-size-label); line-height: 1.4; color: var(--text-muted); }
.ind-glance dd { margin: 8px 0 0; font-size: 17px; line-height: 1.45; color: var(--text-strong); text-wrap: pretty; }

/* ---------- Chapters: a hairline, the heading, the first paragraph as its lead ---------- */
.ind-ch { position: relative; margin-top: var(--ch-gap); padding-top: 30px; }
.ind-ch::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: var(--border); transform-origin: 0 50%; }
.ind-ch__title { margin: 0; font: 400 clamp(36px, 3.6vw, 52px)/1.04 var(--font-serif); letter-spacing: -.028em; color: var(--text-strong); text-wrap: balance; }
.ind-ch__lead { margin: 0; font: 400 20px/1.55 var(--font-sans); color: var(--text); text-wrap: pretty; max-width: 31em; }
/* Chapters with a component: the heading across the page, the lead stepped in to the reading line */
.ind-ch__head { display: grid; grid-template-columns: minmax(0, 1fr); }
.ind-ch__head .ind-ch__title { max-width: 15em; }
.ind-ch__head .ind-ch__lead { margin: 32px 0 0 calc(var(--col) * 4); }
/* Reading chapters: the heading beside the text, held in view while the text runs */
.ind-ch--read { display: grid; grid-template-columns: calc(var(--col) * 4 - 24px) minmax(0, 1fr); column-gap: 24px; }
.ind-ch--read .ind-ch__title { position: sticky; top: 28px; font-size: clamp(32px, 3vw, 44px); line-height: 1.06; padding-right: 16px; }
.ind-ch--read .ind-ch__main { padding-top: 6px; }


/* Running text: a short measure with real rhythm */
.ind-prose { margin: 48px 0 0 calc(var(--col) * 4); max-width: 37em; font-size: 17px; }
.ind-ch__main .ind-prose { margin-left: 0; margin-top: 0; }
.ind-ch__main .ind-ch__lead + .ind-prose { margin-top: 28px; }
/* A reading chapter that is a single paragraph is a statement, set in the serif */
.ind-ch--statement .ind-ch__lead { max-width: 24em; font: 400 clamp(24px, 2.2vw, 30px)/1.3 var(--font-serif); letter-spacing: -.012em; color: var(--text-strong); }
.ind-ch--statement .ind-ch__main { padding-top: 2px; }
.ind-prose > :first-child { margin-top: 0; }
.ind-prose p, .ind-prose li { font: 400 17px/1.65 var(--font-sans); color: var(--text); text-wrap: pretty; }
.ind-prose p { margin: 0 0 1.15em; }
.ind-prose > :last-child { margin-bottom: 0; }
.ind-prose h3 { margin: 44px 0 12px; font: 500 19px/1.35 var(--font-sans); letter-spacing: -.01em; color: var(--text-strong); text-wrap: balance; }
.ind-prose ul, .ind-prose ol { margin: 0 0 1.15em; padding-left: 22px; }
.ind-prose li { margin: 0 0 .5em; padding-left: 4px; }
.ind-prose li::marker { color: var(--text-muted); }
.ind strong { font-weight: 500; color: var(--text-strong); }
.ind-prose a, .ind-ch__lead a, .ind-lead a, .faq__a a, .ind-menu a, .ind-route a, .ind-sheet a, .ind-vs a, .ind-figs a, .ind-quote a, .ind-ch--sources a {
  color: var(--text-strong); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; text-decoration-color: var(--rb-n-400); overflow-wrap: anywhere; transition: text-decoration-color var(--dur-fast); }
.ind-prose a:hover, .ind-ch__lead a:hover, .faq__a a:hover, .ind-menu a:hover, .ind-route a:hover, .ind-sheet a:hover, .ind-vs a:hover, .ind-figs a:hover, .ind-quote a:hover, .ind-ch--sources a:hover { text-decoration-color: currentColor; }
.ind code { font: 400 max(14px, .88em)/1 var(--font-mono); padding: .14em .36em; border-radius: var(--radius-xs); background: var(--bg-subtle); color: var(--text-strong); white-space: nowrap; }

/* The margin (columns 1–4) beside a component chapter's text: the pull quote, top-aligned with the first paragraph,
   and the side-heading a colon paragraph becomes, top-aligned with the notes it introduces (industrygen.prose_html).
   Below 1100px it all stacks in reading order. */
.ind-prose--margin { display: grid; grid-template-columns: calc(var(--col) * 4 - 24px) minmax(0, 37em); column-gap: 24px; row-gap: 40px; align-items: start; max-width: none; margin-left: 0; }
.ind-prose--margin > .ind-side { grid-column: 1; }
.ind-prose--margin > .ind-main { grid-column: 2; }
.ind-main > :last-child { margin-bottom: 0; }
.ind-prose--margin > .ind-notes { margin: 0; }
.ind-prose .ind-sidehead { margin: 0; padding: 16px 24px 0 0; border-top: 1px solid var(--text-strong); font: 400 24px/1.2 var(--font-serif); letter-spacing: -.012em; color: var(--text-strong); text-wrap: balance; }

/* Ruled notes: a list that follows a paragraph ending in a colon (the cases in practice, the terms on offer) */
.ind-notes { list-style: none; margin: 4px 0 1.6em; padding: 0; border-top: 1px solid var(--text-strong); }
.ind-prose .ind-notes { padding-left: 0; }
.ind-prose .ind-notes li { margin: 0; padding: 18px 0 19px; border-bottom: 1px solid var(--border); }

/* A plain table, ruled like a ledger */
.ind-table { margin: 28px 0 32px; overflow-x: auto; }
.ind-table table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.ind-table th { padding: 0 16px 12px 0; border-bottom: 1px solid var(--text-strong); text-align: left; font-size: var(--font-size-label); font-weight: 400; color: var(--text-muted); }
.ind-table td { padding: 14px 16px 14px 0; border-bottom: 1px solid var(--border); vertical-align: top; color: var(--text); }

/* ---------- 2. The problem: the evidence, then the text with a merchant's voice in its margin ---------- */
.ind-quote { position: relative; margin: 0; padding-right: 24px; }
.ind-quote__mark { display: block; height: .36em; margin: 0 0 4px -4px; font: 400 120px/.78 var(--font-serif); color: var(--accent); pointer-events: none; }
.ind-quote blockquote { margin: 0; }
.ind-quote p { margin: 0; font: 400 31px/1.16 var(--font-serif); letter-spacing: -.016em; color: var(--text-strong); text-wrap: balance; }
.ind-quote p::after { content: "”"; }
.ind-quote figcaption { display: flex; flex-direction: column; gap: 2px; margin-top: 20px; font-size: 15px; line-height: 1.45; }
.ind-quote__who { color: var(--text-strong); text-wrap: balance; }
.ind .ind-quote figcaption a { align-self: start; color: var(--text-muted); text-decoration-color: var(--rb-n-300); }

/* The evidence band, on the page grid: each figure four columns wide (three of twelve when there are four), so the
   second starts on the reading line. Every number in a set is one size: the largest its longest value (--fwmax, in
   em, measured by industrygen.figures_html) allows on one line of its column. */
.ind-figs { --span: 4; list-style: none; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; margin: 88px 0 0; padding: 0; container-type: inline-size; border-top: 1px solid var(--text-strong); }
.ind-figs--4 { --span: 3; }
.ind-figs li { grid-column: span var(--span); display: flex; flex-direction: column; min-width: 0; padding: 30px 16px 0 0; }
.ind-figs__v { font-family: var(--font-numeric); font-weight: 400; font-size: min(104px, calc(((100cqi + 24px) * var(--span) / 12 - 44px) / var(--fwmax))); line-height: .92; letter-spacing: -.02em; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; color: var(--text-strong); }
.ind-figs__l { margin-top: 22px; max-width: 21em; font-size: 17px; line-height: 1.5; color: var(--text); text-wrap: pretty; }
.ind-figs__s { margin-top: 12px; font-size: var(--font-size-label); line-height: 1.45; color: var(--text-muted); }
.ind .ind-figs__s a { color: var(--text-muted); text-decoration-color: var(--rb-n-300); }
.ind-figs + .ind-prose { margin-top: 64px; }

/* ---------- 3. The fix: today and with Railbed, as one sheet ---------- */
.ind-sheet { margin-top: 64px; border: 1px solid var(--border); border-radius: var(--radius-l); overflow: hidden; }
.ind-sheet table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.ind-sheet th, .ind-sheet td { text-align: left; vertical-align: top; }
.ind-sheet thead th { padding: 26px 36px 22px; font: 400 24px/1.15 var(--font-serif); letter-spacing: -.014em; color: var(--text-muted); }
.ind-sheet thead th:first-child { width: 44%; background: var(--bg-subtle); }
.ind-sheet thead th:last-child { padding-left: 72px; background: var(--bg-surface); color: var(--text-strong); }
.ind-sheet tbody th { padding: 24px 36px 26px; border-top: 1px solid var(--border-strong); background: var(--bg-subtle); font: 400 17px/1.5 var(--font-sans); color: var(--text-body); text-wrap: pretty; }
.ind-sheet td { position: relative; padding: 22px 40px 26px 72px; border-top: 1px solid var(--border); background: var(--bg-surface); font: 400 19px/1.45 var(--font-sans); letter-spacing: -.005em; color: var(--text-strong); text-wrap: pretty; }
.ind-sheet .tick { position: absolute; left: 36px; top: 26px; color: var(--ill-navy); }
.tick path { stroke-width: 1.6; }

/* The second chance to sign up: one confident line */
.ind-next { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 48px; align-items: center; margin-top: 128px; padding: 36px 0 38px; border-top: 1px solid var(--text-strong); border-bottom: 1px solid var(--border); }
.ind-next + .ind-ch { margin-top: 128px; }
.ind-next__title { margin: 0; font: 400 clamp(28px, 2.9vw, 40px)/1.08 var(--font-serif); letter-spacing: -.024em; color: var(--text-strong); text-wrap: balance; }
.ind-next__text { grid-column: 1; margin: 10px 0 0; font-size: 16px; line-height: 1.5; color: var(--text-body); text-wrap: pretty; }
.ind-next__go { grid-column: 2; grid-row: 1 / span 2; }

/* ---------- 4. What you can sell: the catalogue ---------- */
.ind-menu { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; margin: 64px 0 0; padding: 0; }  /* the second column starts on grid column 7 */
.ind-menu li { padding: 26px 24px 32px 0; border-top: 1px solid var(--border); }
.ind-menu li:nth-child(-n+2) { border-top-color: var(--text-strong); }
.ind-menu li:nth-last-child(-n+2) { border-bottom: 1px solid var(--border); }   /* both columns close on one rule */
/* An odd count: the first item leads across both columns, its words on the right column's line, so no cell is empty */
.ind-menu--odd li:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; align-items: baseline; padding-right: 0; }
.ind-menu--odd li:first-child .ind-menu__d { margin-top: 0; }
.ind-menu--odd li:nth-child(2) { border-top-color: var(--border); }
.ind-menu__t { margin: 0; font: 400 26px/1.15 var(--font-serif); letter-spacing: -.015em; color: var(--text-strong); text-wrap: balance; }
.ind-menu__d { margin: 10px 0 0; max-width: 33em; font-size: 16px; line-height: 1.6; color: var(--text-body); text-wrap: pretty; }
.ind-menu + .ind-prose { margin-top: 40px; }

/* ---------- 5. How a sale works: the route ---------- */
/* One navy line (Railbed's own part); the first station solid brass for the buyer's card, the rest ringed in navy,
   the last solid navy where the sale lands. Every station is drawn in its finished state at rest. */
.ind-route { --dot: 10px; --mark: 36px; --rgap: 32px; margin-top: 72px; }
.ind-route ol { list-style: none; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); column-gap: var(--rgap); margin: 0; padding: 0; }
.ind-route__stop { position: relative; --stop: var(--ill-navy); }
.ind-route__stop.is-card { --stop: var(--ill-brass); }
/* The stretch to the next station, and the dot that rides it once */
.ind-route__stop:not(:last-child)::before { content: ""; position: absolute; left: calc(var(--mark) / 2); top: calc(var(--mark) / 2 - 1px); width: calc(100% + var(--rgap)); height: 2px; background: var(--ill-navy); transform-origin: 0 50%; }
.ind-route__stop:not(:last-child)::after { content: ""; position: absolute; left: calc((var(--mark) - var(--dot)) / 2); top: calc((var(--mark) - var(--dot)) / 2); width: var(--dot); height: var(--dot); border-radius: 50%; background: var(--text-strong); opacity: 0; }
.ind-route__n { position: relative; z-index: 1; display: grid; place-items: center; width: var(--mark); height: var(--mark); box-sizing: border-box; border: 1.5px solid var(--stop); border-radius: 50%; background: var(--bg-page); font: 500 15px/1 var(--font-numeric); font-variant-numeric: tabular-nums lining-nums; color: var(--stop); }
.ind-route__stop.is-end .ind-route__n { background: var(--ill-navy); color: var(--rb-white); }
.ind-route__stop.is-card .ind-route__n { background: var(--ill-brass); color: var(--rb-white); }
.ind-route__stop p { margin: 26px 0 0; padding-right: 4px; font-size: 15px; line-height: 1.55; color: var(--text-body); text-wrap: pretty; }
.ind-route__stop strong { display: block; margin-bottom: 8px; font-size: 17px; line-height: 1.4; color: var(--text-strong); }
.ind-route + .ind-prose { margin-top: 48px; }

/* ---------- 7. Compared: two voices ---------- */
/* Each row sits on the page grid: the label in columns 1–3, the other side in 4–7, Railbed's answer from column 8,
   its tick hanging in the gap before it. */
.ind-vs { margin-top: 64px; }
.ind-vs table, .ind-vs thead, .ind-vs tbody { display: block; }
.ind-vs tr { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; border-bottom: 1px solid var(--border); }
.ind-vs thead tr { border-bottom-color: var(--text-strong); }
.ind-vs th, .ind-vs td { display: block; text-align: left; }
.ind-vs tr > :nth-child(1) { grid-column: 1 / span 3; }
.ind-vs tr > :nth-child(2) { grid-column: 4 / span 4; }
.ind-vs tr > :nth-child(3) { grid-column: 8 / span 5; }
.ind-vs thead tr > * { align-self: end; padding: 0 0 18px; }
.ind-vs thead th { font: 400 15px/1.35 var(--font-sans); color: var(--text-muted); text-wrap: balance; }
.ind-vs thead th.ind-vs__us { font: 400 34px/1 var(--font-serif); letter-spacing: -.024em; color: var(--text-strong); }
.ind-vs tbody tr > * { padding: 27px 0 26px; }
.ind-vs tbody th { padding-top: 28px; font: 400 var(--font-size-label)/1.45 var(--font-sans); color: var(--text-muted); }
.ind-vs td { font: 400 16px/1.5 var(--font-sans); color: var(--text-body); text-wrap: pretty; }
.ind-vs tbody td.ind-vs__us { position: relative; padding-top: 22px; padding-bottom: 24px; font: 400 24px/1.25 var(--font-serif); letter-spacing: -.012em; color: var(--text-strong); }
.ind-vs .tick { position: absolute; left: -34px; top: 27px; color: var(--ill-navy); }

/* ---------- 8. Questions, sources ---------- */
.ind-ch--faq .ind-ch__main { padding-top: 0; }
.faqs { border-top: 1px solid var(--text-strong); }
.ind-ch--faq .faqs { border-top: 0; }
.ind-ch--faq .faq:first-child summary { padding-top: 6px; }
.faq { border-bottom: 1px solid var(--border); }
.faq summary { display: grid; grid-template-columns: minmax(0, 1fr) 20px; column-gap: 32px; align-items: start; padding: 24px 0 25px; cursor: pointer; list-style: none; border-radius: var(--radius-xs); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { margin: 0; font: 400 24px/1.25 var(--font-serif); letter-spacing: -.014em; color: var(--text-strong); text-wrap: balance; }
.faq summary:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; text-decoration-color: var(--rb-n-400); }
.faq__x { position: relative; width: 20px; height: 20px; margin-top: 6px; }
.faq__x::before, .faq__x::after { content: ""; position: absolute; left: 3px; right: 3px; top: 50%; height: 1.5px; margin-top: -.75px; background: var(--text-strong); transition: transform var(--dur-slow) var(--es); }
.faq__x::after { transform: rotate(90deg); }
.faq[open] .faq__x::after { transform: rotate(0deg); }
.faq__a { max-width: 37em; padding: 0 52px 30px 0; }
.faq__a p, .faq__a li { margin: 0 0 1em; font: 400 17px/1.65 var(--font-sans); color: var(--text); text-wrap: pretty; }
.faq__a > :last-child { margin-bottom: 0; }
.faq__a ul, .faq__a ol { margin: 0 0 1em; padding-left: 22px; }

.ind-ch--sources { margin-top: 112px; }
.ind-ch--sources .ind-ch__title { font-size: 28px; }
.ind-ch--sources ol, .ind-ch--sources ul { columns: 2; column-gap: 48px; margin: 0; padding-left: 24px; }
.ind-ch--sources li { break-inside: avoid; margin: 0 0 10px; padding-left: 4px; font-size: var(--font-size-label); line-height: 1.5; color: var(--text-muted); }
.ind-ch--sources li::marker { font-variant-numeric: tabular-nums; color: var(--text-muted); }
.ind .ind-ch--sources a { color: var(--text-body); text-decoration-color: var(--rb-n-300); }
.ind-updated { margin: 28px 0 0; font-size: var(--font-size-label); color: var(--text-muted); }

/* ---------- The typographic index: the overview's nine, and each page's related industries ---------- */
.ind-index { list-style: none; margin-block: 0; padding: 0; border-top: 1px solid var(--text-strong); }
.ind-index > li { border-bottom: 1px solid var(--border); }
.ind-row { position: relative; display: grid; grid-template-columns: 176px minmax(0, 1.05fr) minmax(0, .95fr) 40px; align-items: center; column-gap: 40px; padding: 20px 0; color: inherit; text-decoration: none; border-radius: var(--radius-m); }
.ind-row::before { content: ""; position: absolute; inset: 0 -20px; z-index: -1; border-radius: var(--radius-l); background: var(--bg-surface); opacity: 0; transition: opacity var(--dur-slow) var(--eo); }
.ind-row::after { content: ""; position: absolute; left: -20px; top: 22px; bottom: 22px; width: 2px; background: var(--accent); transform: scaleY(0); transition: transform .35s var(--eo); }
.ind-row__art { display: grid; place-items: center; height: 112px; border-radius: var(--radius-m); background: var(--bg-subtle); transition: background-color var(--dur-slow); }
.ind-row__art .ix-art { width: 100%; height: 86%; }
.ind-row__name { margin: 0; font: 400 clamp(30px, 3.3vw, 48px)/1.04 var(--font-serif); letter-spacing: -.026em; color: var(--text-strong); text-wrap: balance; }
.ind-row__line { max-width: 28em; font-size: 16px; line-height: 1.55; color: var(--text-body); text-wrap: pretty; }
.ind-row__go { justify-self: end; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--text-strong); transition: transform var(--dur-slow) var(--eo), background-color var(--dur-slow); }
.ind-row:hover::before, .ind-row:focus-visible::before { opacity: 1; }
.ind-row:hover::after, .ind-row:focus-visible::after { transform: none; }
.ind-row:hover .ind-row__art, .ind-row:focus-visible .ind-row__art { background: var(--bg-subtle); }
.ind-row:hover .ind-row__go, .ind-row:focus-visible .ind-row__go { transform: translateX(4px); background: var(--bg-subtle); }
.ind .ind-row:focus-visible { outline: none; }
.ind-row:focus-visible::before { box-shadow: 0 0 0 2px var(--focus-ring); }
@media (forced-colors: active) { .ind .ind-row:focus-visible { outline: 2px solid CanvasText; outline-offset: 4px; } }
.ind-index--related .ind-row { grid-template-columns: 128px minmax(0, 1.05fr) minmax(0, .95fr) 40px; padding: 16px 0; }
.ind-index--related .ind-row__art { height: 84px; }
.ind-index--related .ind-row__name { font-size: clamp(26px, 2.6vw, 36px); }

.ind-related { margin-top: 128px; }
.ind-related__head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; margin-bottom: 28px; }
.ind-related__head h2 { margin: 0; font: 400 clamp(30px, 2.8vw, 40px)/1.06 var(--font-serif); letter-spacing: -.024em; }

/* The overview's masthead */
.ind-mast { padding-top: 24px; }
.ind-mast h1 { margin: 64px 0 0; max-width: 11.5em; font: 400 clamp(46px, 7.4vw, 104px)/.96 var(--font-serif); letter-spacing: -.035em; color: var(--text-strong); text-wrap: balance; }
.ind-mast .ind-lead { margin: 36px 0 0 calc(var(--col) * 4); max-width: 30em; }
.ind-mast + .ind-index { margin-top: 96px; }
.ind-index + .ind-ch { margin-top: var(--ch-gap); }

/* ---------- Closing panel: the landing's texture with its veil ---------- */
.ind > .ind-cta { position: relative; width: min(100% - 68px, 1372px); margin-top: 148px; border-radius: var(--radius-xl); overflow: hidden; background: var(--rb-slate); }
.ind-cta__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.ind-cta::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--veil-ink) 35%, transparent) 38%, var(--veil) 100%); }
.ind-cta__in { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; padding: 148px 24px 120px; text-align: center; }
.ind-cta h2 { margin: 0; max-width: 14em; font: var(--type-display); letter-spacing: var(--track-display); color: var(--on-dark); text-wrap: balance; }
.ind-cta__lead { margin: 22px 0 0; font: var(--type-lead); color: var(--on-dark-body); }
.ind-cta .signup { margin-top: 36px; }
.ind-cta__sales { margin: 30px 0 0; font-size: 15px; color: var(--on-dark-muted); }
.ind-cta__sales a { display: inline-flex; align-items: center; gap: 8px; color: var(--on-dark); text-underline-offset: 4px; text-decoration-color: var(--on-dark-border); }

/* Phones: the one action stays in reach once both signup forms are off screen (industries.js) */
.ind-sticky { display: none; }

/* ---------- Motion (DESIGN.md §7): one opening, each chapter once, the route's dot, ticks that draw.
   Hidden states exist only under .rv-on, which industries.js adds when motion is allowed; .ind-open only when it
   runs within the first moments of the visit, so a late script never hides what is already on screen. ---------- */
@keyframes indSettle { from { opacity: 0; transform: translateY(18px); filter: blur(6px); } }
@keyframes indFade { from { opacity: 0; } }
@keyframes indArrive { from { opacity: 0; transform: translateX(48px); } }
@keyframes indRideX { to { left: calc(100% + var(--rgap) + (var(--mark) - var(--dot)) / 2); } }
@keyframes indRideY { to { top: calc(100% + var(--rgap) + (var(--mark) - var(--dot)) / 2); } }
@keyframes indShow { from, to { opacity: 1; } }
@keyframes indLand { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ill-navy) 45%, transparent); } to { box-shadow: 0 0 0 14px color-mix(in srgb, var(--ill-navy) 0%, transparent); } }
.ind-open .ind-hero .crumbs, .ind-open .ind-mast .crumbs { animation: indFade .8s var(--eo) both; }
.ind-open .ind-hero h1, .ind-open .ind-mast h1 { animation: indSettle 1.1s var(--eo) .05s both; }
.ind-open .ind-hero .ind-lead, .ind-open .ind-mast .ind-lead { animation: indSettle 1s var(--eo) .2s both; }
.ind-open .ind-hero .signup { animation: indSettle 1s var(--eo) .32s both; }
.ind-open .ind-hero .trust { animation: indFade .9s var(--eo) .5s both; }
.ind-open .ind-hero .ind-stage { animation: indArrive 1.3s var(--eo) .12s both; }
.ind-open .ind-hero .ind-stage__fig { animation: indFade 1s var(--eo) .55s both; }
.ind-open .ind-glance { animation: indFade 1s var(--eo) .6s both; }

.rv-on .ind-ch[data-rv]::before { transform: scaleX(0); transition: transform 1.4s var(--eo); }
.rv-on .ind-ch[data-rv].in::before { transform: none; }
.rv-on .ind-ch[data-rv] .ind-ch__title, .rv-on .ind-ch[data-rv] .ind-ch__lead, .rv-on .ind-next[data-rv] > * {
  opacity: 0; transform: translateY(12px); filter: blur(4px);
  transition: opacity .9s var(--eo), transform 1.1s var(--eo), filter .9s var(--eo); transition-delay: .12s; }
.rv-on .ind-ch[data-rv] .ind-ch__lead, .rv-on .ind-next[data-rv] > :nth-child(2) { transition-delay: .26s; }
.rv-on .ind-next[data-rv] > :nth-child(3) { transition-delay: .38s; }
.rv-on .ind-ch[data-rv].in .ind-ch__title, .rv-on .ind-ch[data-rv].in .ind-ch__lead, .rv-on .ind-next[data-rv].in > * { opacity: 1; transform: none; filter: none; }
.rv-on .ind-quote[data-rv] .ind-quote__mark { opacity: 0; transform: translateY(16px); transition: opacity .9s var(--eo), transform 1.2s var(--eo); }
.rv-on .ind-quote[data-rv] blockquote, .rv-on .ind-quote[data-rv] figcaption { opacity: 0; filter: blur(5px); transform: translateY(10px); transition: opacity 1s var(--eo) .15s, filter 1s var(--eo) .15s, transform 1.2s var(--eo) .15s; }
.rv-on .ind-quote[data-rv] figcaption { transition-delay: .4s; }
.rv-on .ind-quote[data-rv].in .ind-quote__mark, .rv-on .ind-quote[data-rv].in blockquote, .rv-on .ind-quote[data-rv].in figcaption { opacity: 1; filter: none; transform: none; }
.rv-on .ind-figs[data-rv] li { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--eo), transform 1s var(--eo); }
.rv-on .ind-figs[data-rv] li:nth-child(2) { transition-delay: .12s; }
.rv-on .ind-figs[data-rv] li:nth-child(3) { transition-delay: .24s; }
.rv-on .ind-figs[data-rv] li:nth-child(4) { transition-delay: .36s; }
.rv-on .ind-figs[data-rv].in li { opacity: 1; transform: none; }
/* Ticks draw, row after row */
.rv-on [data-rv] .tick path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .45s var(--es); transition-delay: calc(.3s + var(--r, 0) * .11s); }
.rv-on [data-rv].in .tick path { stroke-dashoffset: 0; }
/* The route: each stretch draws, then one dot rides the whole line and the last station answers as it arrives */
.rv-on .ind-route[data-rv] .ind-route__stop::before { transform: scaleX(0); transition: transform .5s var(--es); transition-delay: calc(var(--i) * .16s); }
.rv-on .ind-route[data-rv].in .ind-route__stop::before { transform: none; }
.rv-on .ind-route[data-rv].in .ind-route__stop::after { --t: .48s; animation: indRideX var(--t) linear calc(var(--n-delay, 0s) + .9s + var(--i) * var(--t)) both, indShow var(--t) linear calc(.9s + var(--i) * var(--t)) both; }
.rv-on .ind-route[data-rv].in .ind-route__stop:first-child::after { animation-timing-function: cubic-bezier(.5,0,1,1), linear; }
.rv-on .ind-route[data-rv].in .ind-route__stop:nth-last-child(2)::after { animation-timing-function: cubic-bezier(0,0,.4,1), linear; }
.rv-on .ind-route[data-rv].in .ind-route__stop.is-end .ind-route__n { animation: indLand .9s var(--eo) calc(.9s + var(--i) * .48s); }

/* ---------- Responsive ---------- */
@media (max-width: 1279px) {
  .ind-route--long { --rgap: 28px; }
  .ind-route--long ol { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
}
@media (max-width: 1099px) {
  /* The margin folds into the reading column: the quote before the text, side-headings over their notes */
  .ind-prose--margin { display: block; max-width: 37em; margin-left: calc(var(--col) * 4); }
  .ind-prose--margin > * + * { margin-top: 32px; }
  .ind-quote { padding-right: 0; margin-bottom: 48px; }
  .ind-quote__mark { position: absolute; top: 4px; right: calc(100% + 16px); height: auto; margin: 0; font-size: 150px; line-height: .72; }
  .ind-quote p { max-width: 18em; font-size: 34px; }
  .ind-prose .ind-sidehead { padding: 0; border-top: 0; font-size: 22px; }
  .ind-prose--margin > .ind-sidehead + .ind-notes { margin-top: 14px; }
  /* The route turns vertical: the line runs down, each station's words beside it */
  .ind-route ol { grid-template-columns: minmax(0, 1fr); row-gap: var(--rgap); max-width: 40em; }
  .ind-route { --rgap: 28px; }
}
@media (max-width: 1099px) {
  .ind-route__stop { padding-left: calc(var(--mark) + 22px); min-height: var(--mark); }
  .ind-route__n { position: absolute; left: 0; top: 0; }
  .ind-route__stop:not(:last-child)::before { left: calc(var(--mark) / 2 - 1px); top: calc(var(--mark) / 2); width: 2px; height: calc(100% + var(--rgap)); transform-origin: 50% 0; }
  .ind-route__stop p { margin-top: 6px; }
  .rv-on .ind-route[data-rv] .ind-route__stop::before { transform: scaleY(0); }
  .rv-on .ind-route[data-rv].in .ind-route__stop::after { animation-name: indRideY, indShow; }
}
@media (min-width: 1100px) and (max-width: 1279px) {
  .ind-route--long .ind-route__stop { padding-left: calc(var(--mark) + 22px); min-height: var(--mark); }
  .ind-route--long .ind-route__n { position: absolute; left: 0; top: 0; }
  .ind-route--long .ind-route__stop:not(:last-child)::before { left: calc(var(--mark) / 2 - 1px); top: calc(var(--mark) / 2); width: 2px; height: calc(100% + var(--rgap)); transform-origin: 50% 0; }
  .ind-route--long .ind-route__stop p { margin-top: 6px; }
  .rv-on .ind-route--long[data-rv] .ind-route__stop::before { transform: scaleY(0); }
  .rv-on .ind-route--long[data-rv].in .ind-route__stop::after { animation-name: indRideY, indShow; }
}

@media (max-width: 1023px) {
  :root { --ch-gap: 120px; }
  .ind-hero { grid-template-columns: var(--gut) minmax(0, 1fr) var(--gut); padding-top: 12px; }
  .ind-hero__copy { grid-column: 2; }
  .ind-hero h1 { margin-top: 48px; font-size: clamp(38px, 10.6cqi, 76px); }
  .ind-hero .ind-stage { grid-column: 2 / 4; margin-top: 56px; padding: 28px 28px 22px; }
  .ind-hero .ind-stage__fig { height: auto; aspect-ratio: 6 / 5; max-height: 640px; }
  .ind-glance { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 64px; }
  .ind-glance div:nth-child(3) { padding-left: 0; border-left: 0; }
  .ind-glance div:nth-child(n+3) { margin-top: 18px; border-top: 1px solid var(--border); }
  .ind-row { grid-template-columns: 148px minmax(0, 1fr) 40px; column-gap: 28px; }
  .ind-row__name { grid-column: 2; align-self: end; }
  .ind-row__line { grid-column: 2; grid-row: 2; align-self: start; margin-top: 8px; }
  .ind-row__art { grid-row: 1 / span 2; }
  .ind-row__go { grid-column: 3; grid-row: 1 / span 2; }
  .ind-index--related .ind-row { grid-template-columns: 112px minmax(0, 1fr) 40px; }
}
@media (max-width: 899px) {
  .ind-sheet thead th, .ind-sheet tbody th { padding-inline: 24px; }
  .ind-sheet td { padding-left: 56px; padding-right: 24px; }
  .ind-sheet .tick { left: 24px; }
  .ind-sheet thead th:last-child { padding-left: 56px; }
  .ind-ch--read { grid-template-columns: minmax(0, 1fr); }
  .ind-ch--read .ind-ch__title { position: static; padding-right: 0; }
  .ind-ch--read .ind-ch__main { padding-top: 0; margin-top: 24px; }
  .ind-ch__head .ind-ch__lead, .ind-prose, .ind-prose--margin, .ind-mast .ind-lead { margin-left: 0; }
  .ind-quote { padding-left: 64px; }
  .ind-quote__mark { right: auto; left: -4px; font-size: 140px; }
  .ind-figs { grid-template-columns: minmax(0, 1fr); margin-top: 72px; }
  .ind-figs li { grid-column: auto; padding-right: 0; }
  .ind-figs li + li { margin-top: 30px; border-top: 1px solid var(--border); }
  .ind-figs__v { font-size: min(96px, calc(100cqi / var(--fwmax) * .97)); }
  .ind-figs__l { max-width: 30em; }
  .ind-menu { grid-template-columns: minmax(0, 1fr); }
  .ind-menu li:nth-child(2) { border-top-color: var(--border); }
  .ind-menu li:nth-last-child(2) { border-bottom: 0; }
  .ind-menu--odd li:first-child { display: block; }
  .ind-menu li { padding-right: 0; }
  .ind-menu--odd li:first-child .ind-menu__d { margin-top: 10px; }
  .ind-next { grid-template-columns: minmax(0, 1fr); }
  .ind-next__go { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 24px; }
  .ind-ch--sources ol, .ind-ch--sources ul { columns: 1; }
  /* The comparison: each row stacks under its label */
  .ind-vs thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ind-vs tbody { border-top: 1px solid var(--text-strong); }
  .ind-vs tbody tr { display: block; padding: 20px 0 22px; }
  .ind-vs tbody tr > * { padding: 0; }
  .ind-vs tbody th { padding: 0 0 12px; color: var(--text-strong); font-weight: 500; font-size: 15px; }
  .ind-vs td { font-size: 16px; }
  .ind-vs td::before { content: attr(data-label); display: block; margin-bottom: 2px; font: 400 var(--font-size-label)/1.4 var(--font-sans); color: var(--text-muted); letter-spacing: 0; }
  .ind-vs tbody td.ind-vs__us { margin-top: 14px; padding: 0 0 0 30px; font-size: 22px; }
  .ind-vs td.ind-vs__us::before { margin-left: -30px; color: var(--text-strong); }
  .ind-vs .tick { left: 0; top: 26px; }
}
@media (max-width: 720px) {
  :root { --ch-gap: 88px; }
  /* The sheet: each pair stacks, today on stone above Railbed's answer on white */
  .ind-sheet thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ind-sheet table, .ind-sheet tbody, .ind-sheet tr, .ind-sheet th, .ind-sheet td { display: block; width: auto; }
  .ind-sheet tr + tr { border-top: 1px solid var(--border-strong); }
  .ind-sheet tbody th { padding: 18px 20px 16px; border-top: 0; font-size: 16px; }
  .ind-sheet td { padding: 16px 20px 20px 52px; border-top: 0; font-size: 18px; }
  .ind-sheet .tick { left: 20px; top: 19px; }
  .ind-sheet tr:first-child th::before, .ind-sheet tr:first-child td::before { display: block; margin-bottom: 6px; font-size: var(--font-size-label); line-height: 1.4; color: var(--text-muted); }
  .ind-sheet tr:first-child th::before { content: "What goes wrong today"; }
  .ind-sheet tr:first-child td::before { content: attr(data-label); color: var(--text-strong); font-weight: 500; }
  .ind-sheet tr:first-child .tick { top: 45px; }
  .ind-hero .ind-stage { grid-column: 1 / -1; margin-top: 44px; padding: 16px 16px 18px; border-radius: 0; }
  .ind-hero .ind-stage__fig { width: 100%; aspect-ratio: 358 / 360; }
  .ind-hero .ind-stage__art { width: 74%; }
  .ind-stage > [data-fig-status] { margin-top: 10px; }
  .ind-hero h1 { margin-top: 36px; font-size: clamp(36px, 11.4cqi, 60px); line-height: 1; }
  .ind-lead { margin-top: 22px; font-size: 17px; line-height: 1.55; }
  .ind-glance { grid-template-columns: minmax(0, 1fr); margin-top: 56px; }
  .ind-glance div, .ind-glance div + div { margin-top: 0; padding: 16px 0; border-left: 0; }
  .ind-glance div + div { border-top: 1px solid var(--border); }
  .ind-glance div:nth-child(n+3) { margin-top: 0; }
  .ind-ch { padding-top: 24px; }
  .ind-ch__title { font-size: 34px; line-height: 1.06; }
  .ind-ch--read .ind-ch__title { font-size: 32px; }
  .ind-ch__head .ind-ch__lead, .ind-ch__lead { margin-top: 20px; font-size: 18px; line-height: 1.55; }
  .ind-ch--read .ind-ch__main { margin-top: 20px; }
  .ind-ch--read .ind-ch__lead { margin-top: 0; }
  .ind-ch--statement .ind-ch__lead { font-size: 22px; line-height: 1.34; }
  .ind-prose { margin-top: 36px; }
  .ind-quote { padding-left: 44px; margin-bottom: 40px; }
  .ind-quote p { font-size: 28px; line-height: 1.16; }
  .ind-quote__mark { font-size: 100px; left: -3px; }
  .ind-figs { margin-top: 56px; }
  .ind-figs + .ind-prose { margin-top: 48px; }
  .ind-figs li { padding-top: 22px; }
  .ind-figs li + li { margin-top: 26px; }
  .ind-figs__l { margin-top: 16px; }
  .ind-sheet, .ind-menu, .ind-vs { margin-top: 44px; }
  .ind-route { margin-top: 48px; }
  .ind-menu__t { font-size: 24px; }
  .ind-next { margin-top: 96px; padding: 28px 0 30px; }
  .ind-next + .ind-ch { margin-top: 96px; }
  .ind-next__title { font-size: 30px; }
  .faq summary { column-gap: 20px; padding: 20px 0; }
  .faq summary h3 { font-size: 21px; }
  .faq__a { padding-right: 0; }
  .ind-ch--sources { margin-top: 88px; }
  .ind-row { grid-template-columns: 88px minmax(0, 1fr) 24px; column-gap: 18px; padding: 16px 0; }
  .ind-index--related .ind-row { grid-template-columns: 88px minmax(0, 1fr) 24px; }
  .ind-row__art, .ind-index--related .ind-row__art { height: 72px; }
  .ind-row__name, .ind-index--related .ind-row__name { font-size: 26px; }
  .ind-row__line { margin-top: 6px; font-size: 15px; }
  .ind-row__go { width: 24px; }
  .ind-row::before { inset: 0 -12px; }
  .ind-row::after { left: -12px; }
  .ind-related { margin-top: 96px; }
  .ind-related__head { flex-direction: column; gap: 12px; }
  .ind-mast h1 { margin-top: 40px; font-size: clamp(42px, 12vw, 64px); line-height: .98; }
  .ind-mast .ind-lead { margin-top: 24px; }
  .ind-mast + .ind-index { margin-top: 56px; }
  .ind > .ind-cta { width: min(100% - 24px, 1372px); margin-top: 96px; border-radius: 12px; }
  .ind-cta__in { padding: 96px 20px 72px; }
  .ind-cta h2 { font: var(--type-display-m); letter-spacing: var(--track-display); }
  .ind-cta__lead { font-size: 17px; }
  .signup { flex-direction: column; gap: 10px; }
  .signup input { flex: none; border-right: 1px solid var(--text-strong); border-radius: var(--radius-xs); }
  .signup--dark input { border-right-color: var(--on-dark-border); }
  .signup__go { border-radius: var(--radius-xs); }
  .ind > .ind-sticky { display: block; position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 20; width: auto; margin: 0; transform: translateY(calc(100% + 24px)); visibility: hidden; transition: transform var(--dur-slow) var(--eo), visibility 0s linear var(--dur-slow); }
  .ind > .ind-sticky.is-on { transform: none; visibility: visible; transition: transform var(--dur-slow) var(--eo); }
  .ind-sticky .signup__go { display: flex; width: 100%; height: var(--touch-target); border-radius: var(--radius-xs); box-shadow: var(--shadow-3); }
  .page--industry .foot, .page--industries .foot { margin-top: 88px; padding-bottom: 96px; }
}
@media (max-width: 400px) {
  :root { --gut: 16px; }
}
@media (any-pointer: coarse) {
  .signup input, .signup__go, .btn--mk { min-height: var(--touch-target); }
  .arrowlink { min-height: var(--touch-target); }
  .faq summary { min-height: var(--touch-target); }
}
@media (prefers-reduced-motion: reduce) {
  .arr, .faq__x::before, .faq__x::after, .ind > .ind-sticky, .ind-row::before, .ind-row::after, .ind-row__go { transition: none; }
}

/* Illustration motion: copied by the build from the landing source (chapter 05). */
/* 05: each industry has its own illustration, ink on stone with one accent. It rises in as it arrives,
   and moves slowly only while on screen (reduced motion keeps it still). */
a.ix{color:inherit;text-decoration:none;border-radius:12px}
a.ix>span:first-of-type{text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:5px;transition:text-decoration-color .2s}
a.ix:hover>span:first-of-type,a.ix:focus-visible>span:first-of-type{text-decoration-color:currentColor}
a.ix .ix-stage{transition:background-color .2s}
a.ix:hover .ix-stage{background-color:var(--rb-n-200) !important}
a.ix:focus-visible{outline:2px solid var(--focus-ring);outline-offset:6px}
.ix-art .a-bob,.ix-art .a-rise,.ix-art .a-type,.ix-art .a-twinkle,.ix-art .a-tumble,.ix-art .a-beat,.ix-art .a-drop,.ix-art .a-blink{transform-box:fill-box;transform-origin:center}
.rv-on [data-rv] .ix .ix-art,.rv-on .ix[data-rv] .ix-art{opacity:0;transform:translateY(16px);transition:opacity .8s var(--eo),transform 1.1s var(--eo);transition-delay:calc(var(--i,0) * 80ms + .15s)}
.rv-on [data-rv].in .ix .ix-art,.rv-on .ix[data-rv].in .ix-art{opacity:1;transform:none}
.rv-on [data-rv] .ix>span,.rv-on .ix[data-rv]>span{opacity:0;transform:translateY(8px);transition:opacity .8s var(--eo),transform .9s var(--eo);transition-delay:calc(var(--i,0) * 80ms + .3s)}
.rv-on [data-rv].in .ix>span,.rv-on .ix[data-rv].in>span{opacity:1;transform:none}
.ix-art .a-spin{transform-box:fill-box;transform-origin:center}
.play .a-spin{animation:kSpin 60s linear infinite}
.play .a-bob{animation:kBob 4.2s ease-in-out infinite alternate;animation-delay:calc(var(--d,0s) * -1)}
.play .a-blink{animation:kBlinkRec 1.8s ease-in-out infinite}
.play .a-rise{animation:kRise 3.6s var(--eo) infinite both;animation-delay:var(--d,0s)}
.play .a-type{animation:kType 1.3s ease-in-out infinite;animation-delay:var(--d,0s)}
.play .a-twinkle{animation:kTwinkle 3.2s ease-in-out infinite;animation-delay:var(--d,0s)}
.ix-art .a-wheel,.ix-art .a-ball{transform-box:view-box;transform-origin:120px 80px}
.play .a-wheel{animation:kSpin 26s linear infinite}
.play .a-ball{animation:kSpin 7s linear infinite reverse}
.play .a-tumble{animation:kTumble 5s var(--es) infinite}
.ix-art .a-sway{transform-box:view-box;transform-origin:92px 150px}
.play .a-sway{animation:kSway 6s ease-in-out infinite alternate}
.play .a-drop{animation:kDropFall 2.8s ease-in infinite}
.play .a-flow{animation:kDash 1.6s linear infinite}
.play .a-beat{animation:kBeat 2.8s ease-in-out infinite}
@keyframes kSpin{to{transform:rotate(360deg)}}
@keyframes kBob{from{transform:translateY(-3px)}to{transform:translateY(4px)}}
@keyframes kBlinkRec{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes kRise{0%{opacity:0;transform:translateY(8px) scale(.7)}18%{opacity:1}100%{opacity:0;transform:translateY(-58px) scale(1)}}
@keyframes kType{0%,60%,100%{transform:translateY(0);opacity:.35}30%{transform:translateY(-3px);opacity:1}}
@keyframes kTwinkle{0%,100%{transform:scale(.72) rotate(0);opacity:.55}50%{transform:scale(1) rotate(45deg);opacity:1}}
@keyframes kTumble{0%,70%,100%{transform:rotate(0)}80%{transform:rotate(-12deg) translateY(-3px)}90%{transform:rotate(6deg)}}
@keyframes kSway{from{transform:rotate(-2.5deg)}to{transform:rotate(2.5deg)}}
@keyframes kDropFall{0%{opacity:0;transform:translateY(-4px) scale(.6)}25%{opacity:1;transform:translateY(0) scale(1)}70%{opacity:1;transform:translateY(12px)}78%,100%{opacity:0;transform:translateY(14px)}}
@keyframes kDash{to{stroke-dashoffset:-14}}
@keyframes kBeat{0%,45%,100%{transform:scale(1)}10%{transform:scale(1.14)}20%{transform:scale(1)}30%{transform:scale(1.09)}}