/* pages.css — the inner marketing pages, in the homepage's experience system.
 *
 * Task 1 inventoried every class the shipped markup asks for. This file re-expresses the ones the
 * prototype stylesheets (`home.css`, `features.css`, `marketing-pages.css`, `site.css`,
 * `documentation.css`) still owned, so Task 4 can delete them. It is a re-skin: grids, source order
 * and stacking survive unchanged, and only the surface moves onto `experience-tokens.css`.
 *
 * It never redefines a class the homepage already owns — wrap, button, eyebrow, hero, lead,
 * hero-actions, the header and the footer: those definitions are the system. Class names in these
 * comments are written bare, without a leading dot, so the inventory test can tell a rule that
 * redefines one of them from a sentence that mentions it.
 *
 * Six conventions run through the file.
 *
 * 1. Labels. The prototype set monospace, uppercase and tracked-out for every eyebrow, tag and field
 *    label. They all take one recipe now, the homepage's eyebrow treatment: `650 12px/1.5
 *    var(--sans)`, no tracking, no transform, coral where the prototype used its accent. Nothing
 *    here is 8–11px any more; 12px is the smallest size the homepage uses, and `--mono` is kept for
 *    genuine code. A `font` shorthand resets neither `text-transform` nor `letter-spacing`, so the
 *    two recipes that restyle a heading the prototype had tracked out state both properties
 *    themselves. Several of these labels read as capitals anyway, because the vendored markup types
 *    them that way and `content/pages/*.html` is not this task's to edit.
 * 2. Headings are never serif. `--serif` survives only where the footer's standfirst established it
 *    — a lead paragraph, a pull quote, a figure's caption line. A heading's emphasis is carried the
 *    way the homepage carries it: upright, at the heading's own weight, by colour alone.
 * 3. Surfaces. `experience-marketing.css` retires the prototype's hard offset shadows: a card is a
 *    1px `--line` border with a 12px radius, a chip 4px. So no rule here casts a shadow. An `inset`
 *    marker bar is a marker, not a shadow, and stays.
 * 4. Spacing. Padding, margin and gap round to the nearest `--space-*`, summed above 40px —
 *    `calc(var(--space-10) * 2)` is the homepage's own 80px section padding. Widths, grid tracks,
 *    radii, stroke widths and type sizes stay literal: they are structure, not spacing.
 * 5. Breakpoints. 900px and 600px, the system's, replace the prototype's 620/680/800/1100. The one
 *    exception is noted where it is made.
 * 6. One offset, one marker. The sticky header's allowance is `experience-marketing.css`'s
 *    `scroll-padding-top`; no rule here re-declares a `scroll-margin-top` on an anchor target. The
 *    user agent's disclosure triangle is suppressed once, for the whole scope, in Base.
 */

/* ── Base ──────────────────────────────────────────────────────────────────
 * `home.css` and `site.css` put these on bare elements. They move across scoped to the body class,
 * so the homepage's own cascade is untouched. */
/* Disclosures. The user agent's marker is suppressed once, both ways, for the whole scope — the
 * ruling the header's menus follow — and one rule puts the `faq-item` +/− back in its place. Every
 * disclosure needs it: `article-toc` ("On this page"), `docs-mobile` ("Documentation contents"),
 * `guide-docs-menu`, `empty-example` and a `published-article` section draw a heading but nothing
 * that says the heading opens, so without a marker they read as inert pills. Scoped to the content
 * region, because the header's Features and Menu disclosures are marker-less by ruling and are the
 * only summaries outside it. Coral, centred on the summary's own box, and flipped by the parent's
 * `open` state so a nested disclosure never answers for its ancestor. */
.marketing-page summary { list-style: none; }
.marketing-page summary::-webkit-details-marker { display: none; }
.marketing-page main summary { position: relative; padding-right: var(--space-8); cursor: pointer; }
.marketing-page main summary::after { content: "+"; position: absolute; top: 50%; right: var(--space-1); transform: translateY(-50%); color: var(--coral); font: 400 22px/1 var(--sans); }
.marketing-page main details[open] > summary::after { content: "\2212"; }

.marketing-page { overflow-x: clip; }
/* Every inner-page <main>: the adapted body (`ported-page.tsx`, `legal.tsx` and `learn-article.tsx`
 * all stamp both markers on it) and the guide shell. `overflow: clip` is `site.css`'s rule, and it
 * is what keeps the atlas panel and the wide comparison table from widening the page. */
.marketing-page main, .ported-content.prototype-page { overflow: clip; }

/* ── Features and journeys ─────────────────────────────────────────────────
 * `/features`, `/how-it-works`, `/discovery`, `/analysis`, `/close`, `/ai-skills`,
 * `/proprietary-search`, `/listings`. */

/* Page hero: `features.css` `.features-hero`, with the bottom padding `site.css` gave it. */
.marketing-page .features-hero { padding-top: calc(var(--space-10) * 2); padding-bottom: calc(var(--space-8) + var(--space-6)); }
.features-hero h1 { margin: var(--space-6) 0; font: 600 clamp(36px, 6.2vw, 72px)/1.08 var(--sans); letter-spacing: -.02em; }
.features-hero > p { max-width: 580px; margin: 0; font: 18px/1.65 var(--serif); }
/* Layout only: an audience hero's actions row is its one `div` child, and a call to action beside a
 * secondary link has to be able to wrap. Addressed by position rather than by the row's own class,
 * which belongs to the homepage. */
.marketing-page .features-hero > div { flex-wrap: wrap; }

.stage-jumps { display: flex; gap: var(--space-10); margin-top: calc(var(--space-6) * 2); padding: var(--space-6) 0; border-top: 1px solid var(--line); }
.stage-jumps a { font: 600 13px/1.5 var(--sans); text-decoration: none; }
.stage-jumps a:hover { text-decoration: underline; }
.stage-jumps a[aria-current="page"] { color: var(--coral); text-decoration: underline; text-underline-offset: 4px; }

/* Stages. Every inner page is a stack of these. */
.feature-stage { padding: calc(var(--space-10) * 2) 0; border-bottom: 1px solid var(--line); }
.feature-stage:nth-of-type(odd) { background: var(--surface); }
.feature-stage h3, .stage-example-detail h3 { margin: var(--space-4) 0 var(--space-3); font: 600 25px/1.15 var(--sans); letter-spacing: -.035em; }
.features-heading p, .feature-stage p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.65; }
.feature-stage .feature-note { margin-top: var(--space-4); font-size: 13px; }

.features-heading { display: grid; grid-template-columns: 1.3fr 1fr; gap: calc(var(--space-8) * 2); align-items: end; margin: var(--space-6) 0 var(--space-10); }
.features-heading h2 { margin: 0; font: 600 clamp(32px, 4.5vw, 48px)/1.15 var(--sans); letter-spacing: -.02em; }
/* The prototype's display italic was Georgia in the old accent. No heading in this system is serif,
 * so the emphasis is carried the way the homepage's own `hero h1 em` carries it — upright, at the
 * heading's own weight, in the homepage's own plum, not the prototype's accent. */
.features-hero h1 em, .features-heading h2 em { color: var(--plum); font-family: inherit; font-style: normal; font-weight: 600; }

.stage-number, .tool-label { display: block; color: var(--coral); font: 650 12px/1.5 var(--sans); text-transform: none; letter-spacing: normal; }

.tool-pair, .analysis-layout { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--space-8) + var(--space-6)); }
.tool-pair { margin-bottom: var(--space-10); }
.compact-analysis { gap: 0; }

/* The workspace preview figure: the one card shape these pages repeat. */
.feature-preview { margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.feature-preview figcaption { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-6); background: var(--ink); color: var(--paper); font: 650 12px/1.5 var(--sans); }
.preview-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-6); }
.preview-toolbar strong { font: 600 22px/1.3 var(--sans); letter-spacing: -.035em; }
.preview-toolbar > span, .preview-status { color: var(--muted); font-size: 12px; }
.feature-stage .preview-caption { padding: var(--space-4) var(--space-6); border-top: 1px solid var(--line); font-size: 13px; }

.opportunity-row { display: grid; grid-template-columns: 135px minmax(0, 1fr) 130px; gap: var(--space-6); align-items: center; padding: var(--space-6); border-top: 1px solid var(--line); }
.opportunity-row strong { font-size: 16px; }
.opportunity-row small { display: block; margin-top: var(--space-2); color: var(--muted); line-height: 1.5; }
.opportunity-row > a { color: var(--coral); font: 600 13px/1.5 var(--sans); }
.source-tag { width: fit-content; padding: var(--space-2); border-radius: 4px; background: var(--blue); color: var(--coral); font: 650 12px/1.5 var(--sans); }
.source-tag.listing { background: var(--mint); color: var(--green); }

.stage-bottom { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--space-6) * 2); margin-top: var(--space-10); }
.stage-bottom p { max-width: 720px; }
.stage-bottom > a { flex-shrink: 0; }

/* Analysis: the modelled cash-flow panel. */
.cashflow { padding: var(--space-6); }
.cashflow > span { font: 16px/1.55 var(--serif); }
.cashflow > div { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-6) 0; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.5; }
.cashflow strong { white-space: nowrap; }
.cashflow .cashflow-total { flex-direction: column; padding-bottom: 0; border: 0; }
.cashflow-total strong { color: var(--coral); font-size: 48px; letter-spacing: -.02em; }

/* `/how-it-works`: the numbered process. */
.process-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); padding: 0; list-style: none; counter-reset: step; }
.process-steps li { counter-increment: step; padding-top: var(--space-6); border-top: 1px solid var(--line); }
.process-steps li::before { content: "0" counter(step); color: var(--coral); font: 650 12px/1.5 var(--sans); }
.stage-detail-link { display: inline-block; margin-top: var(--space-8); color: var(--coral); font: 600 13px/1.5 var(--sans); }

.journey-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); }
.journey-grid article { min-width: 0; padding-top: var(--space-6); border-top: 1px solid var(--line); }
.journey-grid small { display: block; margin-top: var(--space-6); color: var(--coral); line-height: 1.5; }
.feature-preview .journey-grid { padding: var(--space-6); }
.feature-preview .journey-grid article { padding-top: 0; border-top: 0; }

/* `/ai-skills`: one skill run, and the catalogue of skills. */
.skill-run { display: grid; grid-template-columns: 1fr 1fr 1.2fr; }
.skill-run > div { padding: var(--space-6); }
.skill-run > div + div { border-left: 1px solid var(--line); }
.skill-run p { margin-top: var(--space-4); font-size: 16px; }
.skill-run strong { display: block; margin-top: var(--space-4); font-size: 14px; line-height: 1.6; }
.skill-run .skill-output { background: var(--blue); }
.skills-catalog, .included-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.skills-catalog article, .included-grid article { padding: var(--space-6); border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.skills-catalog dl { margin: var(--space-6) 0; }
.skills-catalog dd { margin: var(--space-1) 0 var(--space-4); font-size: 16px; line-height: 1.5; }
.skills-catalog article p { font-size: 14px; }
.included-grid a { display: inline-block; margin-top: var(--space-4); color: var(--coral); font: 600 14px/1.5 var(--sans); }

/* A company record, and where a source ends up. */
.record-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); margin: 0; padding: var(--space-8); }
.record-grid dt, .skills-catalog dt { color: var(--muted); font: 650 12px/1.5 var(--sans); }
.record-grid dd { margin: var(--space-2) 0 0; font-size: 18px; line-height: 1.4; }
.source-routes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.source-routes article { padding: var(--space-8); border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.source-routes a { display: inline-block; margin-top: var(--space-6); color: var(--coral); font: 600 14px/1.5 var(--sans); }
.source-routes small { display: block; margin-top: var(--space-4); color: var(--muted); font-size: 12px; line-height: 1.6; }
.source-destination { display: flex; align-items: center; gap: var(--space-6); margin-top: var(--space-6); padding: var(--space-6) var(--space-8); border-radius: 12px; background: var(--blue); }
.source-destination > span { color: var(--coral); font-size: 32px; }
.stage-example-detail { padding: 0 var(--space-6); }

/* The first question a documentation page hands you. */
.starter-prompt { margin: var(--space-6) 0; padding: var(--space-6); border-left: 3px solid var(--coral); background: var(--blue); font: 24px/1.5 var(--serif); overflow-wrap: anywhere; }
.analysis-question { padding: var(--space-8); background: var(--blue); }
.analysis-question small { display: block; margin-top: var(--space-6); color: var(--muted); line-height: 1.6; }

/* `/free`: the comparison table. It scrolls sideways on a phone, so it is focusable. */
.comparison-wrap { overflow-x: auto; }
.comparison-wrap:focus-visible { outline: 3px solid var(--plum); outline-offset: 4px; }
.comparison-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 16px; line-height: 1.6; }
.comparison-table th, .comparison-table td { padding: var(--space-6); border: 1px solid var(--line); vertical-align: top; }
.comparison-table thead { background: var(--ink); color: var(--paper); }
.comparison-table tbody td:last-child { background: var(--blue); }

/* The secondary call to action beside a hero's button. */
.secondary { padding: var(--space-2) 0; border-bottom: 1px solid; text-decoration: none; font: 650 12px/1.5 var(--sans); }

/* The closing call to action every inner page ends on, in the homepage's closing band: a plum field,
 * white sans copy, the coral button. The prototype's pale blue band is gone, and so is its measure —
 * the copy takes `final-cta`'s 24ch heading and 600px lead. The button and the eyebrow inside the
 * band belong to the system and are left alone: `experience-marketing.css` already paints the button
 * coral, which is exactly what this band wants. */
.final { padding: calc(var(--space-10) * 2) 0; background: var(--plum); color: var(--paper); text-align: center; }
.final h2 { max-width: 24ch; margin: var(--space-4) auto var(--space-6); font: 600 clamp(32px, 6vw, 56px)/1.15 var(--sans); letter-spacing: -.02em; }
.final h2 em { font-family: inherit; font-style: normal; font-weight: 600; }
.final p { max-width: 600px; margin: 0 auto var(--space-8); color: var(--plum-soft); font-size: 17px; line-height: 1.55; }
.final small { display: block; margin-top: var(--space-3); color: var(--plum-soft); font-size: 12px; }
/* Anything that can land in this band is a link on plum: the closing call to action on every page,
 * and beside it on the stage pages the detail link, which inherits `stage-detail-link`'s coral and
 * is unreadable there. A link here takes the band's own paper instead, and only a link that is not
 * the call to action underlines on hover — the button carries its own affordance. */
.final a { color: var(--paper); }
.final a:not([class~="button"]):hover { text-decoration: underline; }
/* The base ring (`experience-marketing.css`) is plum, which is invisible on this band's own plum
 * background. Paper keeps it visible; the offset matches every other ring. The homepage's equivalent
 * band, `final-cta`, gets the matching rule in `experience-marketing.css`, which owns that class. */
.final a:focus-visible, .final button:focus-visible { outline: 3px solid var(--paper); outline-offset: 4px; }

/* `/proprietary-search`: the narrowing card and the method note that sit over the atlas panel, whose
 * own surface is in the atlas section below. The prototype animated the rows from a script;
 * `adaptPrototypeStructure` strips scripts, so the states are static and carry no transition. */
.narrowing { position: absolute; z-index: 3; top: var(--space-10); right: var(--space-8); width: 365px; overflow: hidden; border-radius: 12px; background: var(--paper); color: var(--ink); }
.narrow-head { display: flex; justify-content: space-between; padding: var(--space-4); border-bottom: 1px solid var(--line); font: 650 12px/1.5 var(--sans); }
.narrow-step { display: grid; grid-template-columns: 38px 1fr auto; gap: var(--space-3); align-items: center; padding: var(--space-4); border-bottom: 1px solid var(--line); }
.narrow-step i { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid; border-radius: 50%; font: 650 12px/1 var(--sans); font-style: normal; }
.narrow-step small { color: var(--muted); font: 650 12px/1.5 var(--sans); }
.narrow-step b { display: block; margin-top: var(--space-1); font-size: 13px; }
.narrow-step strong { font-size: 16px; }
/* The applied step. Matched by attribute because `active` is the homepage's class, so naming it here
 * would read as a redefinition of it. */
.narrow-step[class~="active"] { background: var(--blue-strong); box-shadow: inset 3px 0 var(--coral); }
/* `--line` is a rule, not a text colour. On this panel `--paper` is the only text token that reads,
 * so the note separates from the copy above it by size and rule, and its lead-in by weight. */
.method { position: absolute; z-index: 3; right: var(--space-8); bottom: var(--space-6); left: var(--space-8); max-width: 690px; padding-left: var(--space-4); border-left: 3px solid var(--blue-strong); color: var(--paper); font-size: 12px; line-height: 1.55; }

/* The focus plot's SVG states. They contrast against `.atlas-token` and `.atlas-focus-plot` in the
 * atlas section below; `svg` carries the extra specificity `.is-selected` needs to out-rank the
 * resting fill declared there. */
.focus-floor { fill: var(--paper); opacity: .08; }
.focus-frame { fill: none; stroke: var(--blue-strong); stroke-width: 1; stroke-dasharray: 3 5; }
svg .is-selected { fill: var(--blue-strong); opacity: 1; }

@media (max-width: 1000px) {
  /* The narrowing card is 365px of absolutely positioned overlay on top of the atlas copy, so this
   * one collapse keeps the prototype's own width rather than the system's 900px: at 900px the card
   * and the copy would already be sharing 900px of panel. */
  .narrowing { position: relative; top: auto; right: auto; width: calc(100% - (var(--space-8) * 2)); margin: 0 var(--space-8) var(--space-6); }
  .method { position: relative; right: auto; bottom: auto; left: auto; margin: 0 var(--space-8) var(--space-8); }
}

@media (max-width: 900px) {
  .features-heading { gap: var(--space-6); }
  .tool-pair, .analysis-layout { gap: var(--space-6); }
  .process-steps { grid-template-columns: 1fr; }
  .skill-run { grid-template-columns: 1fr 1fr; }
  .skill-run .skill-output { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); }
}

@media (max-width: 600px) {
  .marketing-page .features-hero { padding-top: calc(var(--space-6) * 2); padding-bottom: var(--space-8); }
  .feature-stage { padding: calc(var(--space-8) + var(--space-6)) 0; }
  .features-heading, .tool-pair, .analysis-layout { grid-template-columns: 1fr; }
  .stage-jumps { flex-wrap: wrap; gap: var(--space-4) var(--space-6); }
  .stage-jumps a { font-size: 12px; }
  .feature-preview figcaption, .preview-toolbar { flex-direction: column; align-items: flex-start; }
  .opportunity-row { grid-template-columns: 1fr auto; gap: var(--space-3); padding: var(--space-4); }
  .opportunity-row > div { grid-column: 1 / -1; grid-row: 2; }
  .preview-status { text-align: right; }
  .stage-bottom { flex-direction: column; align-items: flex-start; gap: var(--space-6); }
  .journey-grid, .record-grid, .skills-catalog, .included-grid, .source-routes, .skill-run { grid-template-columns: 1fr; }
  .record-grid { gap: var(--space-6); }
  .skill-run > div + div { border-left: 0; border-top: 1px solid var(--line); }
  .comparison-table { min-width: 560px; }
  .final { padding: calc(var(--space-8) + var(--space-6)) 0; }
  .narrowing { width: calc(100% - var(--space-10)); margin: 0 var(--space-4) var(--space-6); }
  .narrow-step { gap: var(--space-2); padding: var(--space-4) var(--space-3); }
  .method { margin: 0 var(--space-4) var(--space-6); }
}

/* ── Audiences, FAQ and atlas ──────────────────────────────────────────────
 * `/for-brokers`, `/for-business-owners`, `/mbas`, `/private-equity`, `/faq`, `/free`,
 * `/proprietary-search`, and the standfirst the guide routes share. */

/* The standfirst under a guide's title. It has to out-specify the `guide-page` prose rule below,
 * which is where the rest of that page's paragraphs come from. */
.marketing-page .lede { max-width: 760px; margin: 0 0 var(--space-6); color: var(--ink); font: 18px/1.65 var(--sans); }

/* An audience hero is a features hero with a free-access note under the actions; a product hero has
 * an availability note under the lead instead. */
.audience-hero .audience-free-note { margin: var(--space-4) 0 0; color: var(--muted); font: 12px/1.6 var(--sans); }
.features-hero .availability-note { max-width: 760px; margin: var(--space-6) 0; padding-left: var(--space-4); border-left: 3px solid var(--coral); color: var(--muted); font: 13px/1.65 var(--sans); }

/* The worked example each audience page carries: a quotation beside the record it produced. */
.audience-example-body { display: grid; grid-template-columns: .85fr 1.15fr; }
.audience-example blockquote { margin: 0; padding: var(--space-8); background: var(--blue); font: 28px/1.4 var(--serif); letter-spacing: -.02em; }
.audience-example dl { margin: 0; padding: var(--space-3) var(--space-8); }
.audience-example dl > div { padding: var(--space-4) 0; }
.audience-example dl > div + div { border-top: 1px solid var(--line); }
/* Sentence case in the markup, so this is the field-label recipe: the family and weight without the
 * eyebrow's tracking. */
.audience-example dt { color: var(--coral); font: 650 12px/1.5 var(--sans); }
.audience-example dd { margin: var(--space-2) 0 0; font-size: 16px; line-height: 1.65; }

/* `/for-brokers`: the introduction form. `--control-border` is the token for a form control's edge. */
.audience-contact { max-width: 820px; padding: var(--space-8); border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.contact-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.contact-fields label { display: flex; flex-direction: column; gap: var(--space-2); font: 650 12px/1.5 var(--sans); }
.contact-fields label:last-child { grid-column: 1 / -1; }
.contact-fields input, .contact-fields textarea { width: 100%; padding: var(--space-3); border: 1px solid var(--control-border); border-radius: 8px; background: var(--paper); color: var(--ink); font: 16px/1.5 var(--sans); }
.contact-fields textarea { min-height: 130px; resize: vertical; }
.contact-fields input:focus-visible, .contact-fields textarea:focus-visible { outline: 3px solid var(--plum); outline-offset: 2px; }
.form-note { max-width: 680px; margin: var(--space-4) 0; color: var(--muted); font-size: 13px; line-height: 1.6; }

/* `/free`: what a paid step would cost. `/listings`: what an empty feed looks like. */
.cost-note { margin-top: var(--space-6); padding: var(--space-6); border-left: 3px solid var(--coral); background: var(--blue); }
.cost-note h3 { margin-top: 0; }
.empty-example { overflow: hidden; margin-top: var(--space-8); border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.empty-example summary { padding: var(--space-6); cursor: pointer; font-weight: 700; }
.empty-example > div { padding: var(--space-6); border-top: 1px solid var(--line); }
.empty-example p { margin-top: var(--space-3); }

/* `/faq`: a sticky topic rail beside the answers. Every other page uses the same disclosure. */
.faq-page-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: calc(var(--space-10) + var(--space-8)); padding-top: calc(var(--space-8) * 2); padding-bottom: calc(var(--space-10) * 2); }
/* The rail sticks below the bar, not under it: 88px is the offset `experience-marketing.css` already
 * declares for the sticky header, written here the same way. Below 900 the rail is static. */
.faq-topics { display: flex; position: sticky; top: 88px; flex-direction: column; align-items: flex-start; align-self: start; gap: var(--space-4); }
.faq-topics a { font-size: 14px; text-decoration: none; }
.faq-topics a:hover { color: var(--coral); text-decoration: underline; }
.faq-topic + .faq-topic { margin-top: calc(var(--space-10) + var(--space-4)); }
.faq-topic h2 { margin: 0 0 var(--space-4); font: 600 32px/1.15 var(--sans); letter-spacing: -.02em; }
.faq-item { border-bottom: 1px solid var(--line); }
/* The +/− affordance stays; the user agent's marker is already suppressed for the whole scope. */
.faq-item summary { padding: var(--space-6) var(--space-8) var(--space-6) 0; font: 600 16px/1.5 var(--sans); }
.faq-item p { margin: 0; padding: 0 var(--space-8) var(--space-6) 0; color: var(--muted); font-size: 16px; line-height: 1.55; }
.faq-topic .faq-item p { max-width: 760px; }
.feature-stage .faq-item p { margin: 0 0 var(--space-6); }

/* `/proprietary-search`: the search atlas. A dark panel, which is the homepage's own treatment for
 * its workspace section — `--ink` behind `--paper` text — with the narrowing card and the method
 * note from the features section positioned over it. */
.atlas-intro { padding: calc(var(--space-10) * 2) 0 var(--space-10); }
.atlas-intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: calc((var(--space-10) * 2) + var(--space-8)); align-items: end; }
.atlas-intro h2 { margin: var(--space-4) 0 0; font: 600 clamp(32px, 4.5vw, 48px)/1.15 var(--sans); letter-spacing: -.02em; }
.atlas-intro p { max-width: 470px; margin: 0; color: var(--muted); font: 17px/1.6 var(--sans); }
.atlas { position: relative; overflow: hidden; width: min(1340px, calc(100% - var(--space-10))); min-height: 590px; margin: 0 auto; border-radius: 12px; background: var(--ink); color: var(--paper); }
.atlas-grid { position: absolute; inset: 0; opacity: .045; background-image: linear-gradient(var(--paper) 1px, transparent 1px), linear-gradient(90deg, var(--paper) 1px, transparent 1px); background-size: 35px 35px; }
.atlas-points { position: absolute; inset: 0; opacity: .3; }
.atlas-copy { position: relative; z-index: 2; width: calc(100% - (var(--space-10) + var(--space-8))); margin: auto; padding: var(--space-10) 0; }
.atlas-copy h3 { margin: var(--space-3) 0; font: 600 clamp(32px, 4.5vw, 48px)/1.15 var(--sans); letter-spacing: -.02em; }
.atlas-copy h3 em { font-family: inherit; font-style: normal; font-weight: 600; }
.atlas-copy > p { max-width: 430px; color: var(--paper); font: 14px/1.6 var(--sans); }
.atlas-focus-plot { position: relative; max-width: 440px; margin: var(--space-6) 0 0; }
.atlas-focus-plot svg { display: block; width: 100%; height: auto; overflow: visible; }
.atlas-focus-plot figcaption { margin-top: var(--space-2); color: var(--paper); font: 12px/1.5 var(--sans); }
/* A record that did not survive the narrowing. The ones that did are `is-selected`, in the features
 * section above, where the extra `svg` keeps them ahead of this fill. */
.atlas-token { fill: var(--line); opacity: .35; }

@media (max-width: 1000px) {
  /* Same collapse as the narrowing card this panel carries: below it the card stops overlaying the
   * copy, so the panel no longer has to be tall enough to hold both. */
  .atlas { min-height: 0; }
}

@media (max-width: 900px) {
  .faq-page-layout { grid-template-columns: 1fr; gap: var(--space-10); padding-top: var(--space-8); }
  .faq-topics { position: static; flex-direction: row; flex-wrap: wrap; gap: var(--space-4) var(--space-6); padding-bottom: var(--space-6); border-bottom: 1px solid var(--line); }
  .faq-topics > span { width: 100%; }
  .atlas-intro-grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .atlas-copy > p { max-width: 100%; }
}

@media (max-width: 600px) {
  .contact-fields { grid-template-columns: 1fr; }
  .contact-fields label:last-child { grid-column: auto; }
  .audience-contact { padding: var(--space-6); }
  .audience-example-body { grid-template-columns: 1fr; }
  .audience-example blockquote { padding: var(--space-6); font-size: 25px; }
  .atlas-intro { padding: calc(var(--space-8) + var(--space-6)) 0 var(--space-8); }
  .atlas-intro-grid { display: block; }
  .atlas-intro p { margin-top: var(--space-6); }
  .atlas { width: calc(100% - var(--space-4)); }
  .atlas-copy { width: calc(100% - var(--space-10)); padding: var(--space-6) 0; }
}

/* ── Documentation, guides and legal ───────────────────────────────────────
 * `/docs/*`, `/legal/*`, `/learn/*`, and the two guide pages that carry a documentation menu. */

/* The reference shell: a sidebar beside the article, collapsing to a disclosure. A page with no
 * sidebar (a legal snapshot) is a single measured column instead. */
.published-layout { display: grid; grid-template-columns: 235px minmax(0, 1fr); gap: calc(var(--space-8) * 2); padding-top: calc(var(--space-10) + var(--space-4)); padding-bottom: calc(var(--space-10) * 2); }
.published-layout:not(:has(.docs-sidebar)) { display: block; max-width: 960px; }
.published-body { min-width: 0; max-width: 900px; }
.docs-sidebar { align-self: start; padding-right: var(--space-6); border-right: 1px solid var(--line); }
.docs-sidebar h2, .docs-mobile h2 { margin: var(--space-6) 0 var(--space-2); color: var(--muted); font: 650 12px/1.5 var(--sans); text-transform: none; letter-spacing: normal; }
.docs-sidebar h2:first-child { margin-top: 0; }
.docs-sidebar a, .docs-mobile nav a { display: block; padding: var(--space-2) 0; font: 14px/1.5 var(--sans); text-decoration: none; }
.docs-sidebar a[aria-current], .docs-mobile a[aria-current] { color: var(--coral); font-weight: 700; }
.docs-sidebar a:hover, .docs-mobile a:hover { text-decoration: underline; }
.docs-mobile { display: none; }

/* The article itself: documentation, legal snapshots and the Learn essays all render through it.
 * `--mono` earns its place in a code block; inline `code` keeps the prose face it has always had,
 * because changing it would be a redesign rather than a re-skin. */
.published-article { overflow-wrap: break-word; font: 17px/1.8 var(--sans); }
.published-article h1 { margin: var(--space-8) 0; font: 600 clamp(32px, 5vw, 48px)/1.08 var(--sans); letter-spacing: -.02em; }
.published-article h2 { margin: calc(var(--space-10) + var(--space-3)) 0 var(--space-4); font: 600 clamp(25px, 3vw, 32px)/1.2 var(--sans); letter-spacing: -.02em; }
.published-article h3 { margin: var(--space-8) 0 var(--space-3); font-size: 22px; line-height: 1.35; }
.published-article p { margin: var(--space-4) 0; }
.published-article section + section { margin-top: calc(var(--space-6) * 2); padding-top: var(--space-3); border-top: 1px solid var(--line); }
.published-article a:not([class~="button"]), .article-toc a { color: var(--coral); text-underline-offset: 3px; }
.published-article ul, .published-article ol { margin: var(--space-4) 0; padding-left: var(--space-6); }
.published-article li { margin: var(--space-2) 0; }
.published-article img { display: block; max-width: 100%; height: auto; margin: var(--space-6) 0; border: 1px solid var(--line); border-radius: 12px; }
.published-article pre { overflow-x: auto; padding: var(--space-4); border: 1px solid var(--line); border-radius: 8px; background: var(--surface); white-space: pre-wrap; overflow-wrap: anywhere; font: 13px/1.7 var(--mono); }
.published-article code { padding: var(--space-1); border-radius: 4px; background: var(--surface); font-size: .88em; }
.published-article pre code { padding: 0; }
.published-article table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.6; }
.published-article th, .published-article td { padding: var(--space-3); border: 1px solid var(--line); text-align: left; vertical-align: top; }
.published-article th { background: var(--blue); }
.published-article .table-scroll { overflow-x: auto; margin: var(--space-6) 0; }
.published-article .table-scroll table { min-width: 580px; }
.published-article hr { margin: var(--space-8) 0; border: 0; border-top: 1px solid var(--line); }
.published-article details { padding: var(--space-4) 0; border-top: 1px solid var(--line); }
.published-article summary { cursor: pointer; font-weight: 700; }

.article-toc { margin: var(--space-6) 0; padding: var(--space-4) var(--space-6); border-radius: 12px; background: var(--blue); font: 13px/1.6 var(--sans); }
.article-toc strong { flex-basis: 100%; }
.article-toc summary { width: fit-content; cursor: pointer; font-weight: 700; }
.article-toc nav { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); padding-top: var(--space-4); }

/* Where a documentation page sits, and where the rest of the set is. */
.docs-breadcrumb { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-6); font: 13px/1.6 var(--sans); }
.docs-breadcrumb a { color: var(--coral); }
.docs-directory { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-8); }
.docs-directory a { display: block; margin: var(--space-3) 0; color: var(--coral); font: 14px/1.5 var(--sans); }
.guide-docs-menu { margin-top: var(--space-8); padding: var(--space-4); border: 1px solid var(--line); border-radius: 12px; }
.guide-docs-menu > summary { cursor: pointer; font-weight: 700; }
.guide-docs-menu .docs-directory { display: block; columns: 3; }
.guide-docs-menu h2 { margin-top: var(--space-6); font: 700 13px/1.5 var(--sans); }

/* `/docs/scheduled-tasks` and `/docs`: prompts to copy, and the provider walkthroughs. */
.guide-recipes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.guide-recipe { min-width: 0; padding: var(--space-6); border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.guide-recipe h3 { margin-top: 0; }
.guide-recipe blockquote { margin: var(--space-6) 0 0; padding-left: var(--space-4); border-left: 3px solid var(--coral); font: 16px/1.8 var(--sans); overflow-wrap: anywhere; }
.guide-note, .guide-followup { margin-top: var(--space-8); }
.guide-provider { max-width: 900px; }
.guide-provider h2 { margin: var(--space-4) 0; font: 600 clamp(32px, 5vw, 56px)/1.15 var(--sans); letter-spacing: -.02em; }
.guide-provider ol { padding-left: var(--space-6); }
.guide-provider li { margin: var(--space-4) 0; padding-left: var(--space-2); font-size: 17px; line-height: 1.7; }
.guide-provider .guide-source { margin-top: var(--space-6); font-size: 13px; }
.guide-source a { color: var(--coral); }

/* ── The guide shell, Learn and the connection figure ──────────────────────
 * `/buying-your-first-business`, `/docs/troubleshooting` and `/docs/mcp/tools` render `guide-page`
 * from `current-guides.tsx`; the Learn routes add eight elements on top of `published-article`; the
 * connection figure is injected into the Claude documentation page. All three were styled by
 * `app/styles/marketing.css` on the App token export (`--ss-*`) and so were the last markup on the
 * site not in this system: an 80px 700-weight heading, plum utility links, a 1200px container and a
 * 16.6px "Guide" eyebrow. Re-expressed here on `experience-tokens.css`, at the recipes the rest of
 * the file already uses. */

/* The shell takes the system's page width. Its narrow-width steps are `wrap`'s own — this is the
 * file's second breakpoint exception, and it exists precisely so the two track each other. */
.guide-page { width: min(1240px, calc(100% - 64px)); margin: 0 auto; padding: calc(var(--space-10) * 2) 0 calc(var(--space-10) * 2 + var(--space-8)); }
.guide-page > header { padding: calc(var(--space-10) + var(--space-8)) 0 var(--space-10); }
/* The page hero, the heading and the section heading are `features-hero h1`, `features-heading h2`
 * and `feature-stage h3` — the same three recipes every other inner page's stack is built from. */
.guide-page > header h1 { margin: var(--space-6) 0; font: 600 clamp(36px, 6.2vw, 72px)/1.08 var(--sans); letter-spacing: -.02em; }
.guide-page > section { padding: calc(var(--space-10) + var(--space-8)) 0; border-bottom: 1px solid var(--line); }
.guide-page h2 { margin: 0 0 var(--space-4); font: 600 clamp(32px, 4.5vw, 48px)/1.15 var(--sans); letter-spacing: -.02em; }
.guide-page h3 { margin: var(--space-8) 0 var(--space-3); font: 600 22px/1.35 var(--sans); }
.guide-page section p, .guide-page li, .guide-page dd { max-width: 760px; color: var(--muted); font-size: 16px; line-height: 1.65; }
.guide-page ul { margin: var(--space-4) 0; padding-left: var(--space-6); }
.guide-page li { margin: var(--space-2) 0; }
.guide-page dt { margin-top: var(--space-6); font-weight: 700; }
.guide-page dd { margin: var(--space-2) 0 0; }
.guide-page code { padding: var(--space-1); border-radius: 4px; background: var(--surface); font-size: .88em; }
/* Links by region, not by element: the shell's header holds the call to action and nothing else, so
 * scoping the accent to the sections and the contents list leaves the button's own colour alone. */
.guide-page section a, .guide-toc a { color: var(--coral); text-underline-offset: 3px; }
.guide-toc { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); margin: 0 0 var(--space-8); padding: var(--space-4) var(--space-6); border-radius: 12px; background: var(--blue); font: 13px/1.6 var(--sans); }
.guide-toc strong { width: 100%; }
.guide-toc a { font-weight: 650; }

/* Learn. The draft banner was the App export's attention amber, which this system does not carry
 * and the homepage never states. It becomes a plain `surface` note with the word "Draft" doing the
 * work — an editorial status, not a failure or caution state. */
.learn-draft { margin: 0 0 var(--space-6); padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font: 650 13px/1.5 var(--sans); }
.learn-byline { margin: 0 0 var(--space-2); color: var(--muted); font-size: 14px; }
.learn-skills, .learn-docs { margin-top: calc(var(--space-10) + var(--space-3)); padding-top: var(--space-6); border-top: 1px solid var(--line); }
.learn-skills h2, .learn-docs h2 { margin: 0 0 var(--space-3); font: 600 22px/1.35 var(--sans); letter-spacing: 0; }
.learn-list { margin: var(--space-4) 0; padding-left: 0; list-style: none; }
.learn-list > li { margin: 0 0 var(--space-6); }
.learn-question { display: block; font-weight: 700; }
.learn-title { display: block; color: var(--muted); font-size: 14px; }
.learn-reading { margin: var(--space-1) 0 0; color: var(--muted); font-size: 14px; }

/* The Learn shell has no page gutter of its own. `learn-article.tsx` and `learn-index.tsx` render
 * `published-article` as a direct child of the ported `main`, where every other route reaches that
 * class through the vendored `wrap published-layout` — so the article's own body is measured and
 * centred but the elements the route adds around it (the draft note, the byline, the two related
 * lists) and the whole index run to the window's edge. Predates the re-skin; found verifying this
 * move, and fixed here because this is where the shell now lives. The shell takes the 960px measure
 * a document without a sidebar already uses, and the body's own layout inside it fills that measure
 * instead of insetting a second time, so the article text does not move. */
.ported-content.prototype-page > .published-article { width: min(960px, calc(100% - 64px)); margin: 0 auto; }
.ported-content.prototype-page > .published-article .published-layout { width: 100%; }

/* The connection figure, injected into the Claude documentation page. */
.connection-example { margin: var(--space-6) 0; }
.connection-example img { display: block; width: auto; max-width: 100%; height: auto; margin: 0; border: 1px solid var(--line); border-radius: 12px; }
.connection-example figcaption, .connection-consent-note { color: var(--muted); line-height: 1.6; }
.connection-example figcaption { margin-top: var(--space-3); font-size: 14px; }

@media (max-width: 900px) {
  .published-layout { display: block; padding-top: var(--space-8); }
  .docs-sidebar { display: none; }
  .docs-mobile { display: block; margin-bottom: var(--space-6); padding: var(--space-4) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .docs-mobile > summary { width: fit-content; cursor: pointer; font: 700 14px/1.6 var(--sans); }
  .docs-mobile nav { padding: var(--space-3) 0; }
  .published-article { font-size: 16px; }
  .docs-directory { grid-template-columns: 1fr 1fr; }
  .guide-docs-menu .docs-directory { columns: 1; }
}

@media (max-width: 680px) {
  .guide-page { width: min(100% - 32px, 1240px); }
  .ported-content.prototype-page > .published-article { width: min(100% - 32px, 960px); }
}

@media (max-width: 600px) {
  .docs-directory { grid-template-columns: 1fr; }
  .guide-recipes { grid-template-columns: 1fr; }
  .guide-page { width: calc(100% - 36px); padding-top: calc(var(--space-10) + var(--space-8)); }
  .guide-page > header { padding-top: 0; }
  .ported-content.prototype-page > .published-article { width: calc(100% - 36px); }
}