/* ============================================================================
   SketchWeave — marketing site styles

   IBM Carbon, g100 theme — the same language as the app (docs/design-standards.md),
   so the site and the product read as one thing. Flat surfaces layered by colour,
   square corners, IBM Plex, a fixed spacing scale, focus on everything.

   COLOURS COME FROM carbon-tokens.css AND ARE NEVER WRITTEN HERE. That file is
   generated from @carbon/themes by scripts/gen-marketing-tokens.mjs; a hex typed
   into this stylesheet drifts from the app and fails silently when it is wrong.
   Use a role token — --cds-layer-01, --cds-text-secondary — not a value.

   Spacing, type and motion are NOT Carbon custom properties (v11 emits colours
   only), so they are declared below under the same names the app uses in
   src/drawingSetManager/DsmNext.css.

   Where Carbon is silent, the fallback is this product's own precedent: the
   workflow ribbon and the status board are SketchWeave's own idioms and keep
   their shapes, restyled onto these tokens. (The connection wires were the
   third idiom until 2026-08-10 — removed with the canvas product they echoed.)
   ============================================================================ */

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2');
}
/* Plex Mono was in the stacks (.wf-num, guide code) long before it was shipped —
   visitors got their system mono unless Plex happened to be installed locally.
   Vendored 2026-08-10 from @fontsource/ibm-plex-mono, same route as the Sans faces:
   400 for guide code, 600 for the workflow ribbon's stage numbers. */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-latin-600-normal.woff2') format('woff2');
}

:root {
  /* Spacing — Carbon's scale, same names and values as the app's DsmNext.css.
     Every gap on this page comes from here; there are no one-off values. */
  --cds-spacing-01: 0.125rem;  /*  2px */
  --cds-spacing-02: 0.25rem;   /*  4px */
  --cds-spacing-03: 0.5rem;    /*  8px */
  --cds-spacing-04: 0.75rem;   /* 12px */
  --cds-spacing-05: 1rem;      /* 16px */
  --cds-spacing-06: 1.5rem;    /* 24px */
  --cds-spacing-07: 2rem;      /* 32px */
  --cds-spacing-08: 2.5rem;    /* 40px */
  --cds-spacing-09: 3rem;      /* 48px */
  --cds-spacing-10: 4rem;      /* 64px */
  --cds-spacing-11: 5rem;      /* 80px */
  --cds-spacing-12: 6rem;      /* 96px */
  --cds-spacing-13: 10rem;     /* 160px */

  /* Motion — Carbon's productive easing and durations. */
  --cds-duration-fast-02: 110ms;
  --cds-duration-moderate-01: 150ms;
  --cds-duration-moderate-02: 240ms;
  --cds-ease-productive: cubic-bezier(0.2, 0, 0.38, 0.9);

  /* SQUARE, everywhere a container has corners. Kept as a variable rather than
     inlined so the ~40 rules referencing it stay honest about being one decision.
     NOTE this is corners only — border-radius: 999px is used elsewhere as a
     SHAPE (dots, numbered discs, pills) and those stay round. */
  --radius: 0;
  --radius-sm: 0;

  --maxw: 1160px;
  --pad: clamp(20px, 5vw, 40px);

  color-scheme: dark;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 84px; }

body {
  margin: 0;
  font-family: 'IBM Plex Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--cds-text-secondary);
  background: var(--cds-background);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-inline: var(--pad); }
.narrow { max-width: 760px; margin-inline: auto; }
.center { text-align: center; }

/* ---------------------------------- type ----------------------------------
   Carbon's productive scale tops out well below what a marketing hero needs, so
   the headings use Carbon's FLUID display styles as the precedent: they scale with
   the viewport rather than stepping. Weight does the hierarchy work — Carbon uses
   400/600 and no more, so there is no 700 anywhere here. */
h1, h2, h3, h4 { color: var(--cds-text-primary); line-height: 1.15; margin: 0; letter-spacing: 0; font-weight: 600; }
h1 { font-size: clamp(2.25rem, 5vw, 3.75rem); line-height: 1.1; }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.625rem); }
h3 { font-size: 1.25rem; }
p { margin: 0; }
/* The UA default for <strong> is 700, which we neither ship nor use — without this,
   every <strong> asks for a weight the browser silently maps to the 600 face anyway.
   Declaring 600 makes the rendered weight and the requested weight the same fact. */
strong { font-weight: 600; }

/* Carbon has no "eyebrow"; this is label-01 in role — uppercase, tracked, quiet. */
.eyebrow {
  text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.75rem; font-weight: 600;
  color: var(--cds-text-helper); margin-bottom: var(--cds-spacing-05);
}
.kicker {
  text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.75rem; font-weight: 600;
  color: var(--cds-text-helper); margin-bottom: var(--cds-spacing-04);
}
.lede { font-size: clamp(1.125rem, 1.6vw, 1.375rem); color: var(--cds-text-secondary); margin-top: var(--cds-spacing-06); max-width: 44ch; line-height: 1.45; }
.prose { font-size: 1.0625rem; margin-top: var(--cds-spacing-05); color: var(--cds-text-secondary); }
.prose:first-child { margin-top: 0; }
.punch { font-weight: 400; color: var(--cds-text-primary); font-size: 1.25rem; }
.section__sub { color: var(--cds-text-secondary); margin-top: var(--cds-spacing-04); font-size: 1.0625rem; max-width: 62ch; margin-inline: auto; }

/* --------------------------------- buttons -------------------------------- */
/* Carbon buttons are rectangles that fill on hover — no lift, no glow, no radius.
   LABELS ARE CENTERED — a deliberate deviation from Carbon (Chris, 2026-08-10).
   Carbon left-aligns its label with asymmetric padding (16px start, 48px trailing
   for the icon slot); these buttons carried that padding with justify-content:center,
   which parked every label left of the visual middle. The inline padding is now
   symmetric AT THE SAME TOTAL (09+05 -> 07+07, etc), so each button's footprint is
   unchanged — only the label moved. Put the asymmetry back only if the labels gain
   trailing icons.
   .btn--glass keeps its NAME because 17 pages use it; it is now Carbon's tertiary
   button. Renaming the class across every page would be churn for no gain. */
.btn {
  --btn-fill: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--cds-spacing-03);
  font: inherit; font-weight: 400; font-size: 0.875rem; line-height: 1.29;
  /* explicit background so <button>-based .btn elements don't show the UA button-face */
  background: var(--btn-fill);
  padding: var(--cds-spacing-05) var(--cds-spacing-07);
  border-radius: var(--radius-sm); border: 1px solid transparent;
  cursor: pointer;
  transition: background-color var(--cds-duration-fast-02) var(--cds-ease-productive),
              border-color var(--cds-duration-fast-02) var(--cds-ease-productive),
              color var(--cds-duration-fast-02) var(--cds-ease-productive);
  white-space: nowrap;
}
.btn--lg { padding: var(--cds-spacing-06) var(--cds-spacing-08); font-size: 1rem; }
.btn--sm { padding: var(--cds-spacing-03) var(--cds-spacing-06); }
.btn--block { width: 100%; }

.btn--primary { background: var(--cds-button-primary); color: var(--cds-text-on-color); }
.btn--primary:hover { background: var(--cds-button-primary-hover); }

.btn--glass {
  background: transparent;
  border-color: var(--cds-button-tertiary); color: var(--cds-button-tertiary);
}
.btn--glass:hover { background: var(--cds-button-tertiary-hover); color: var(--cds-text-inverse); border-color: var(--cds-button-tertiary-hover); }

/* Carbon Link, standalone: coloured text that hovers like text — label brightens and
   gains an underline, never a background fill. The nav's Contact is this, as a <button>
   element (it opens the modal), so the UA button chrome is stripped here.
   Chris's call 2026-08-10: Contact read as text, so its hover should behave like
   text. It had been a ghost BUTTON, whose Carbon-standard hover fills the whole
   rectangle to reveal the hit area — correct for ghost, wrong component for this.
   .btn--ghost went with it (this was its only user); recover from history if a true
   ghost button is ever needed. */
.link {
  background: none; border: 0; padding: var(--cds-spacing-03) 0; margin: 0;
  font: inherit; font-size: 0.875rem; cursor: pointer;
  color: var(--cds-link-primary); text-decoration: none;
  transition: color var(--cds-duration-fast-02) var(--cds-ease-productive);
}
.link:hover { color: var(--cds-link-primary-hover); text-decoration: underline; }
.link:active { color: var(--cds-text-primary); }

/* Focus is non-negotiable in Carbon, and the old stylesheet only had it on one
   form field. This covers every interactive element on every page. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible,
details:focus-visible {
  outline: 2px solid var(--cds-focus);
  outline-offset: -2px;
}

/* ----------------------------------- nav ---------------------------------- */
/* Carbon's header is an opaque bar, not a translucent one. The old rule's
   rgba(248,250,252,0.72) only read as a surface BECAUSE of the blur behind it, so the
   filter and the alpha had to go together — dropping the filter alone would have let the
   page scroll through the nav. */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--cds-background);
  border-bottom: 1px solid var(--cds-border-subtle-01);
}
.nav__inner { display: flex; align-items: center; gap: var(--cds-spacing-06); height: 48px; }
/* Drawer wraps links + CTAs. On desktop it's transparent to layout (display:contents),
   so the links and CTA lay out exactly as if it weren't there; on mobile it becomes the
   dropdown panel — so the menu never depends on a hardcoded link count. */
.nav__drawer { display: contents; }
.brand { display: inline-flex; align-items: center; gap: var(--cds-spacing-03); font-weight: 600; color: var(--cds-text-primary); }
.brand__mark { display: grid; place-items: center; width: 28px; height: 28px; }
.brand__mark img { width: 100%; height: 100%; display: block; }
.brand__word { font-size: 1rem; }
.nav__links { display: flex; gap: var(--cds-spacing-07); margin-left: var(--cds-spacing-05); font-size: 0.875rem; font-weight: 400; color: var(--cds-text-secondary); }
.nav__links a { position: relative; padding: var(--cds-spacing-03) 0; }
.nav__links a:hover { color: var(--cds-text-primary); }
.nav__links a[aria-current="page"] { color: var(--cds-text-primary); }
/* Carbon marks the current header item with a 3px accent rule, not a coloured label. */
.nav__links a[aria-current="page"]::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 3px;
  background: var(--cds-border-interactive);
}
.nav__cta { display: flex; gap: var(--cds-spacing-05); margin-left: auto; align-items: center; }
.nav__menu-btn { display: none; margin-left: auto; background: none; border: none; color: var(--cds-text-primary); cursor: pointer; padding: var(--cds-spacing-03); }

/* ---------------------------------- hero ---------------------------------- */
/* Linear-style since 2026-08-10: copy, then the real product floating in a bordered
   window on the page's own black. The background-video hero — full-bleed <video>, a
   left-weighted color-mix scrim to keep the headline legible over it, and a 600px
   .hero__grid column — went with it; none of that machinery has a job once nothing
   sits BEHIND the copy. */
.hero { padding: clamp(56px, 9vw, 104px) 0 clamp(52px, 8vw, 88px); }
.hero__copy { max-width: 720px; }
/* The floating window. Linear rounds its window and floats it on a shadow; the Carbon
   translation is square corners and a 1px border, with depth carried by surface colour
   (layer-01 frame on the g100 black) and by space — no shadow, no glow, no lift. The
   frame's padding is the "window chrome": one spacing step of layer-01 around the
   capture, like the app's own panel margins. */
.hero__window {
  margin-top: clamp(44px, 7vw, 80px);
  background: var(--cds-layer-01);
  border: 1px solid var(--cds-border-subtle-01);
  padding: var(--cds-spacing-03);
}
.hero__window img { width: 100%; height: auto; }
/* .hero__support (the Forma inline-notification callout) and .trust (the no-credit-card
   line) went with the hero's CTAs on 2026-08-10 — the index hero is headline, lede,
   product window, nothing else. .hero__actions STAYS: the closing section and three
   other pages still use it for their centered CTA rows. */
.hero__actions { display: flex; gap: var(--cds-spacing-05); margin-top: var(--cds-spacing-07); flex-wrap: wrap; }
.center-actions { justify-content: center; }

/* The old stylesheet had a min-width:941px block here that inverted the hero copy to light
   ink because the page underneath was light and the screenshot was dark. On g100 light ink
   is the default everywhere, so the override has nothing left to do and is gone. Its one
   surviving job — keeping the tertiary button legible against the image rather than against
   the page — is handled by the scrim above. */

/* -------------------------------- sections -------------------------------- */
.section { padding: clamp(56px, 9vw, 104px) 0; }
/* A banded section is layer-01 against the page's background — Carbon separates by surface
   colour rather than by rule or shadow.
   The ::before sits at z-index:-1; .band is position:relative purely to contain it.
   (Until 2026-08-10 a warning here forbade giving .band a stacking context — that
   existed to keep the decorative wire layer painting over these fills, and died with
   the wires.) */
.band { position: relative; }
.band::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--cds-layer-01);
  border-top: 1px solid var(--cds-border-subtle-01);
  border-bottom: 1px solid var(--cds-border-subtle-01);
}
.section__head { margin-bottom: clamp(36px, 5vw, 56px); }
.section__head.center { margin-inline: auto; max-width: 780px; }

/* -------------------------------- steps ----------------------------------- */
/* Used by the deadline Spotlight only, since How-it-works was removed. */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--cds-border-subtle-01); }
.step {
  padding: var(--cds-spacing-07);
  background: var(--cds-background);
}
/* Round BY INTENT — a numbered disc, not a cornered box. Carbon's square rule is about
   containers; this is a shape. */
.step__num {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 999px;
  font-weight: 600; font-size: 0.875rem; color: var(--cds-text-on-color);
  background: var(--cds-button-primary); margin-bottom: var(--cds-spacing-05);
}
.step h3 { margin-bottom: var(--cds-spacing-04); }
.step p { color: var(--cds-text-secondary); font-size: 0.9375rem; }

/* The .step__demo video stages lived here until 2026-08-10, when the How-it-works
   section was removed. `.steps` / `.step` / `.step__num` above are still in use — the
   deadline Spotlight numbers its three steps with them. */

/* ---------------- "Where SketchWeave fits" workflow ribbon ---------------- */
.swmark { width: 22px; height: 22px; flex: none; display: block; }

.wf-key {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 26px;
  font-size: 0.88rem; color: var(--cds-text-helper);
  padding: 8px 15px 8px 11px; border-radius: 999px;
  border: 1px solid var(--cds-border-subtle-01);
  background: var(--cds-layer-01);
}
.wf-key b { color: var(--cds-text-primary); font-weight: 600; }

/* The ribbon lives OUTSIDE the prose container so it can use the full section
   width; it centres when it fits and scrolls horizontally when it doesn't. */
.wf-scroll { margin-top: 40px; overflow-x: auto; padding: 4px 16px 14px; }
.wf-ribbon {
  list-style: none; margin-inline: auto; padding: 0; display: flex; align-items: stretch;
  min-width: min-content; width: max-content;
}
.wf-conn {
  flex: none; align-self: center; color: var(--cds-text-helper); font-size: 20px; line-height: 1;
  padding: 0 var(--cds-spacing-02); -webkit-user-select: none; user-select: none;
}

.wf-stage {
  flex: none; width: 208px; display: flex; flex-direction: column; gap: var(--cds-spacing-04);
  padding: var(--cds-spacing-05); border-radius: var(--radius);
  background: var(--cds-layer-01); border: 1px solid var(--cds-border-subtle-01);
}
/* The backcheck loop is the one stage that repeats, so it carries the warning role rather
   than a colour picked for it. */
.wf-stage--loop { width: 346px; border-color: var(--cds-support-warning); }

.wf-top { display: flex; align-items: baseline; gap: var(--cds-spacing-04); }
.wf-num {
  font-family: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
  font-size: 0.75rem; font-weight: 600; color: var(--cds-text-helper); font-variant-numeric: tabular-nums;
}
.wf-stage--loop .wf-num { color: var(--cds-support-warning); }
.wf-kicker {
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--cds-text-helper);
}
.wf-title { font-size: 1rem; font-weight: 600; color: var(--cds-text-primary); }
.wf-desc { font-size: 0.875rem; color: var(--cds-text-secondary); line-height: 1.45; }

.wf-tools { display: flex; flex-wrap: wrap; gap: var(--cds-spacing-02); }
/* Carbon Tag geometry: a low pill on a layer fill. */
.wf-chip {
  font-size: 0.75rem; font-weight: 400; color: var(--cds-text-secondary);
  background: var(--cds-layer-02); border: 0;
  border-radius: 999px; padding: var(--cds-spacing-01) var(--cds-spacing-03);
}

.wf-sw {
  margin-top: auto; display: flex; gap: var(--cds-spacing-03); align-items: flex-start;
  padding: var(--cds-spacing-04);
  background: var(--cds-layer-02); border-left: 3px solid var(--cds-border-interactive);
}
.wf-sw p { font-size: 0.8125rem; color: var(--cds-text-primary); line-height: 1.4; }
.wf-swlabel {
  display: block; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--cds-text-helper); margin-bottom: var(--cds-spacing-01);
}

.wf-loop {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--cds-spacing-03);
  padding: var(--cds-spacing-04);
  background: var(--cds-layer-02); border: 1px solid var(--cds-support-warning);
}
.wf-loop-node {
  background: var(--cds-layer-01); border: 1px solid var(--cds-border-subtle-01);
  padding: var(--cds-spacing-03); text-align: center; font-size: 0.8125rem; font-weight: 600;
  color: var(--cds-text-primary);
  display: flex; flex-direction: column; justify-content: center; gap: var(--cds-spacing-01);
}
.wf-loop-node small { font-weight: 400; color: var(--cds-text-helper); font-size: 0.6875rem; }
.wf-loop-cycle {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--cds-spacing-01);
  color: var(--cds-support-warning); min-width: 46px;
}
.wf-loop-cycle .arrows { font-size: 20px; line-height: 1; }
.wf-loop-cycle small {
  font-size: 0.625rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
}
.wf-loop-repeat {
  font-size: 0.75rem; color: var(--cds-support-warning); font-weight: 400; text-align: center; margin: 0;
}

@media (max-width: 900px) {
  .wf-scroll { overflow-x: visible; }
  .wf-ribbon {
    flex-direction: column; align-items: stretch;
    width: auto; min-width: 0; max-width: 560px;
  }
  .wf-stage, .wf-stage--loop { width: 100%; }
  .wf-conn { transform: rotate(90deg); padding: 4px 0; }
}

/* -------------------------------- cards ----------------------------------- */
.grid { display: grid; gap: 20px; }
.grid--features { grid-template-columns: repeat(3, 1fr); }
.grid--security { grid-template-columns: repeat(3, 1fr); }

/* Carbon Tile: a flat layer with a subtle border. Hover fills rather than lifts — no
   translate, no shadow. Depth on this page is surface colour and nothing else. */
.card {
  padding: var(--cds-spacing-06); border-radius: var(--radius);
  background: var(--cds-layer-01); border: 1px solid var(--cds-border-subtle-01);
  transition: background-color var(--cds-duration-moderate-01) var(--cds-ease-productive),
              border-color var(--cds-duration-moderate-01) var(--cds-ease-productive);
}
.card:hover { background: var(--cds-layer-hover-01); border-color: var(--cds-border-strong-01); }
.card h3 { margin-bottom: var(--cds-spacing-04); }
.card p { color: var(--cds-text-secondary); font-size: 0.9375rem; }
.card strong { color: var(--cds-text-primary); font-weight: 600; }
/* .card--edge (roomier padding) and .grid--2 went with the "Only in SketchWeave"
   section on 2026-08-10 — they were its two-up cards and nothing else used them.
   .bottomline stays: #security still uses it. */

/* A banded section fills with layer-01, so cards inside it must step UP to layer-02 or
   they vanish into their own background. This is Carbon's layering model — each tier is
   distinguishable from the one it sits on.
   .faq__item was in this group until 2026-08-10 and it was a mistake: Carbon's
   accordion is transparent rows on hairlines, not filled tiles, and the fill turned
   the FAQ's flush text into text jammed against a visible box edge (Chris spotted
   it). The accordion styles its own surfaces — leave it out of the band step-up. */
.band .card,
.band .plan { background: var(--cds-layer-02); }
.band .card:hover { background: var(--cds-layer-hover-02); }

.card, .step, .plan, .guide { position: relative; }

/* "Coming soon" marker on a feature card. Carbon Tag geometry, in the muted grey role
   rather than an accent: this badge admits a gap, it does not sell anything. */
.card__badge {
  display: inline-block; margin-bottom: var(--cds-spacing-04);
  font-size: 0.75rem; font-weight: 400; letter-spacing: 0;
  color: var(--cds-text-secondary); white-space: nowrap;
  padding: var(--cds-spacing-01) var(--cds-spacing-04); border-radius: 999px;
  background: var(--cds-layer-02); border: 0;
}
.band .card__badge { background: var(--cds-layer-03); }

/* The icon chip loses its glass light-sweep with the rest of the glass — that flourish
   was a gradient wiping under a rounded clip, and neither survives Carbon's geometry.
   What remains is the icon itself in the interactive colour, on a flat square. */
.card__icon {
  display: grid; place-items: center; width: 40px; height: 40px;
  margin-bottom: var(--cds-spacing-05);
  color: var(--cds-icon-interactive);
}
.card__icon svg { width: 24px; height: 24px; }

/* .why-point and .grid--why went with the Why section's three-card grid on 2026-08-10;
   that section is now a heading and a .section__sub. Nothing else used them. */

/* ------------------------------ parallax section --------------------------
   The Why section since 2026-08-10: a real DSM capture as a full-bleed backdrop
   that scrolls SLOWER than the page — a depth effect, driven by main.js
   translating .parallax__img as the section crosses the viewport. (First cut was
   background-attachment:fixed — a pinned image; Chris revised it same day: the
   background should move too, just slower.)

   The geometry contract with main.js: the image is 150% of the section's height,
   and the script spends exactly that 50% surplus as travel — so the image's edges
   can never enter view mid-scroll. Change one and you must change the other
   (TRAVEL in main.js).

   isolation:isolate gives the section its own stacking context so the image can
   sit at z-index:-1 behind the ::before scrim without escaping into the page —
   this is the property the old wire layer forbade globally; that ban died with
   the wires, and this is its first deliberate use.

   The scrim is Carbon's overlay token — the same veil the contact modal uses — so
   contrast is owned by a role token rather than a hand-mixed alpha. Section is
   TALL by intent (Chris): the height is what makes the scroll reveal the image.
   Reduced-motion is handled in main.js (the handler never attaches; the image
   rests as a static cover), not here — CSS cannot un-run a transform. */
.parallax {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: clamp(480px, 72vh, 760px);
  display: grid; align-content: center;
}
.parallax__img {
  position: absolute; left: 0; top: 0; z-index: -1;
  width: 100%; height: 150%;
  object-fit: cover; object-position: center;
  will-change: transform;
}
.parallax::before { content: ""; position: absolute; inset: 0; background: var(--cds-overlay); }
/* The container must be positioned so the text paints above the ::before scrim. */
.parallax > .container { position: relative; }
@media (max-width: 760px) {
  .parallax { min-height: clamp(360px, 55vh, 520px); }
}

/* ------------------------------ resources page ---------------------------- */
.page-hero { padding: clamp(56px, 9vw, 104px) 0 clamp(24px, 4vw, 40px); }
.page-hero h1 { margin-top: 6px; }
.page-hero .hero__actions { justify-content: center; margin-top: 28px; }

.grid--guides { grid-template-columns: repeat(3, 1fr); }
.guide { display: flex; flex-direction: column; color: inherit; }
.guide h3 { margin-bottom: var(--cds-spacing-04); }
.guide p { flex: 1; }
.guide__tag {
  align-self: flex-start; font-size: 0.75rem; font-weight: 400;
  color: var(--cds-text-secondary); padding: var(--cds-spacing-01) var(--cds-spacing-04);
  border-radius: 999px;
  background: var(--cds-layer-02); border: 0; margin-bottom: var(--cds-spacing-05);
}
.guide__more {
  display: inline-flex; align-items: center; gap: var(--cds-spacing-02); margin-top: var(--cds-spacing-05);
  font-weight: 400; font-size: 0.875rem; color: var(--cds-link-primary);
}
.guide__arrow { transition: transform var(--cds-duration-moderate-01) var(--cds-ease-productive); }
.guide:hover .guide__arrow { transform: translateX(4px); }

.bottomline {
  margin-top: var(--cds-spacing-08); text-align: center; font-size: 1.25rem; font-weight: 400;
  color: var(--cds-text-primary);
  max-width: 60ch; margin-inline: auto;
}
.bottomline em { color: var(--cds-link-primary); font-style: normal; }

/* The .callout panel styled the "right-sized tool for consultants" block, dropped on
   2026-08-10 with the rest of the competitor framing. */

/* spotlight */
.spotlight .narrow { margin-bottom: 44px; }
.spotlight .punch.center { margin-top: 40px; font-size: 1.3rem; }

/* -------------------------------- pricing --------------------------------- */
/* The monthly/annual .billing-toggle styles lived here until 2026-08-10. The site sells
   monthly only until the app's checkout honours the billing interval. */

.grid--pricing { grid-template-columns: repeat(3, 1fr); align-items: start; }
/* The old .plan carried an opaque #fff under its gradients so the decorative wires would
   not show through. layer-01 is opaque already, so that hack is gone. */
.plan {
  position: relative; padding: var(--cds-spacing-07) var(--cds-spacing-06); border-radius: var(--radius);
  background: var(--cds-layer-01); border: 1px solid var(--cds-border-subtle-01);
  display: flex; flex-direction: column;
}
/* The featured plan is marked by a border, not by being lifted out of the row. Carbon
   does emphasis with colour and weight; a translated card would be the only thing on the
   page floating above its neighbours. */
.plan--featured { border: 1px solid var(--cds-border-interactive); }
.plan__badge {
  position: absolute; top: 0; left: 0;
  font-size: 0.75rem; font-weight: 400; letter-spacing: 0; color: var(--cds-text-on-color);
  padding: var(--cds-spacing-01) var(--cds-spacing-04); background: var(--cds-button-primary);
  white-space: nowrap;
}
.plan--featured { padding-top: var(--cds-spacing-09); }
.plan__name { font-size: 1.25rem; margin-bottom: var(--cds-spacing-04); }
.plan__price { display: flex; align-items: baseline; gap: var(--cds-spacing-02); margin-bottom: var(--cds-spacing-02); }
/* Carbon prices this figure in Plex Light (300), but only the 400/600 faces ship —
   a declared 300 was silently rendering as 400 anyway. Declared 400 to match the
   truth; if the light figure is wanted, ship the 300 woff2 and put 300 back. */
.plan__amount { font-size: 2.625rem; font-weight: 400; color: var(--cds-text-primary); letter-spacing: 0; }
.plan__cycle { font-size: 0.875rem; color: var(--cds-text-helper); font-weight: 400; }
.plan__note { font-size: 0.875rem; color: var(--cds-text-secondary); margin: var(--cds-spacing-04) 0 var(--cds-spacing-06); }
.plan .btn { margin-bottom: var(--cds-spacing-06); }
.plan__features { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--cds-spacing-04); }
.plan__features li { position: relative; padding-left: var(--cds-spacing-07); font-size: 0.875rem; color: var(--cds-text-secondary); }
/* Carbon's checkmark in the success role, drawn on the layer rather than in a filled disc. */
.plan__features li::before {
  content: ''; position: absolute; left: 0; top: 2px; width: 16px; height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%2342be65' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.5l2.5 2.5 5-5.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center;
}
.finelight { margin-top: var(--cds-spacing-07); font-size: 0.875rem; color: var(--cds-text-helper); }

/* --------------------------------- faq ------------------------------------ */
/* Carbon Accordion: rows divided by rules, no gaps, no card edges. The old rule needed
   overflow:hidden purely to clip children to its radius — square corners retire it. */
.faq { display: grid; gap: 0; border-top: 1px solid var(--cds-border-subtle-01); }
.faq__item {
  border-bottom: 1px solid var(--cds-border-subtle-01);
  background: transparent;
}
/* Carbon accordion geometry: heading text inset one spacing step from the row edge,
   chevron inset the same at the far end, hover as a layer fill rather than a text
   colour change. The rows sit transparent on the band's layer-01, so hover steps to
   layer-hover-01 — the tier the text is actually read against. */
.faq__item summary {
  cursor: pointer; list-style: none;
  padding: var(--cds-spacing-04) var(--cds-spacing-05); min-height: 2.5rem;
  font-weight: 400; color: var(--cds-text-primary);
  display: flex; align-items: center; justify-content: space-between; gap: var(--cds-spacing-05);
  font-size: 1rem;
  transition: background-color var(--cds-duration-fast-02) var(--cds-ease-productive);
}
.faq__item summary:hover { background: var(--cds-layer-hover-01); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: ''; width: 16px; height: 16px; flex: none;
  transition: transform var(--cds-duration-moderate-01) var(--cds-ease-productive);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f4f4f4' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
}
.faq__item[open] summary::after { transform: rotate(180deg); }
/* In animated mode `open` outlives the closing animation — main.js holds it so the
   panel has something to collapse — so the chevron follows .is-open instead, and the
   two halves of the gesture stay in step. Without this it would snap back only after
   the panel had finished closing. */
.faq--animated .faq__item[open]:not(.is-open) summary::after { transform: none; }
/* Panel aligned with the heading text (same 16px start), Carbon's wide end padding at
   md+ so answers hold a readable measure, spacing-06 below before the next hairline.
   The padding lives on .faq__panel, not .faq__body, because .faq__body is the element
   that collapses: padding on a zero-height box still paints, so a collapsed answer
   would leave a 24px ghost strip above the next hairline. */
.faq__panel { padding: 0 var(--cds-spacing-05) var(--cds-spacing-06) var(--cds-spacing-05); }
@media (min-width: 672px) {
  .faq__panel { padding-right: 25%; }
}

/* ---- the open/close animation ----
   <details> cannot be animated by CSS alone: when `open` goes away the browser hides
   the content immediately, so a closing transition has nothing left to run on. main.js
   therefore drives the timing — it holds `open` until the collapse finishes — and marks
   the list .faq--animated once it has taken over.

   EVERYTHING BELOW IS SCOPED TO THAT CLASS ON PURPOSE. The rules collapse the answer to
   zero height, so if they applied without the script (JS blocked/errored, or
   reduced-motion, where main.js deliberately does not take over) every answer would be
   permanently invisible with no way to open it. Unscoped, a broken script turns into
   lost content; scoped, it degrades to plain native <details>.

   The height animation is grid-template-rows, which is how you transition to an intrinsic
   height — `height: auto` is not interpolable, and measuring pixels in JS would go stale
   on reflow, font swap or resize.

   TWO TRAPS, both measured in the browser rather than assumed:

   1. `0fr` does NOT collapse to zero. A bare `0fr` track means `minmax(auto, 0fr)`, and
      that `auto` floor is the item's min-content height — which includes the panel's
      24px bottom padding. The collapsed answer sat 24px tall: a ghost strip above the
      hairline, and a visible jump at the end of every close. `minmax(0, …)` states the
      zero minimum explicitly and the track really reaches 0.
   2. The clip belongs on .faq__body, the element whose height is animating. The panel
      keeps its padding, so it stays 24px tall even when its track is 0 — it overflows
      the collapsed body, and only the body can cut that off. `overflow:hidden` on the
      panel clips the panel's own contents, which is a different thing and does not help.

   min-height:0 stays on the panel as the standard grid-item guard: grid items get an
   automatic minimum size that otherwise refuses to shrink below their content.
   Duration/easing are Carbon's productive pair, matched to the chevron so the two halves
   of the gesture move as one. */
.faq--animated .faq__body {
  display: grid;
  grid-template-rows: minmax(0, 0fr);
  overflow: hidden;
  transition: grid-template-rows var(--cds-duration-moderate-01) var(--cds-ease-productive);
}
.faq--animated .faq__panel { min-height: 0; }
.faq--animated .faq__item.is-open .faq__body { grid-template-rows: minmax(0, 1fr); }
.faq__body p { color: var(--cds-text-secondary); font-size: 0.9375rem; }
/* Hand-off from the FAQ to the full how-to knowledge base (resources.html). */
.faq__cta { margin-top: clamp(28px, 4vw, 44px); display: grid; justify-items: center; gap: 14px; }
.faq__cta .section__sub { margin-top: 0; }

/* ------------------------------- closing ---------------------------------- */
.closing { padding: clamp(56px, 9vw, 100px) 0; }
.closing__panel {
  padding: clamp(40px, 6vw, 72px) clamp(28px, 5vw, 56px); border-radius: var(--radius);
  background: var(--cds-layer-01);
  border: 1px solid var(--cds-border-subtle-01);
}
.closing__panel h2 { margin-bottom: var(--cds-spacing-05); }
.closing__panel p { color: var(--cds-text-secondary); max-width: 56ch; margin: 0 auto; font-size: 1.0625rem; }

/* -------------------------------- footer ---------------------------------- */
.footer { padding: var(--cds-spacing-10) 0 var(--cds-spacing-07); border-top: 1px solid var(--cds-border-subtle-01); background: var(--cds-background); }
.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: var(--cds-spacing-07); }
.footer__tag { margin-top: var(--cds-spacing-05); color: var(--cds-text-helper); font-size: 0.875rem; max-width: 26ch; }
.footer__col { display: flex; flex-direction: column; gap: var(--cds-spacing-04); }
.footer__col h4 { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--cds-text-helper); margin-bottom: var(--cds-spacing-02); font-weight: 600; }
.footer__col a { color: var(--cds-text-secondary); font-size: 0.875rem; }
.footer__col a:hover { color: var(--cds-link-primary); text-decoration: underline; }
.footer__base {
  display: flex; align-items: center; justify-content: space-between; gap: var(--cds-spacing-05);
  margin-top: var(--cds-spacing-08); padding-top: var(--cds-spacing-06); border-top: 1px solid var(--cds-border-subtle-01);
  color: var(--cds-text-helper); font-size: 0.875rem; flex-wrap: wrap;
}

/* ------------------------------- reveal anim ------------------------------ */
.reveal {
  opacity: 0; transform: translateY(22px) scale(0.985);
  transition: opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1);
  transition-delay: calc(var(--d, 0) * 70ms); /* per-group stagger set in main.js */
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; transition-delay: 0s; }
  html { scroll-behavior: auto; }
}

/* The .showcase grid (alternating image/text rows) lived here until 2026-08-10 and went
   with the "A closer look" section on index.html — see the note in that file. Nothing
   else on the site used it. */

/* -------------------------------- responsive ------------------------------ */
@media (max-width: 940px) {
  .hero { padding: clamp(40px, 10vw, 64px) 0 clamp(32px, 8vw, 48px); }
  /* The window keeps its frame on mobile; only the breathing room shrinks. The old
     background-video hero needed a whole block here (scrim off, video into flow,
     object-fit recrop) — a framed <img> in normal flow needs none of that. */
  .hero__window { margin-top: clamp(28px, 7vw, 44px); }
  .grid--features, .grid--security, .grid--guides { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .nav__menu-btn { display: inline-flex; }
  /* Collapse the drawer on mobile; expand it as a single stacked panel when open —
     no per-link pixel math, so adding/removing nav links can't break the layout. */
  .nav__drawer { display: none; }
  .nav.is-open .nav__drawer {
    display: flex; flex-direction: column; gap: 16px;
    position: absolute; top: 66px; left: 0; right: 0;
    padding: var(--cds-spacing-05) var(--pad) var(--cds-spacing-06); background: var(--cds-background);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--cds-border-subtle-01);
  }
  .nav.is-open .nav__links { display: flex; flex-direction: column; gap: 10px; margin: 0; }
  .nav.is-open .nav__cta { display: flex; margin: 0; gap: 10px; align-items: center; }
  /* .link included: Contact is a Carbon Link now, not a .btn, but still shares the row. */
  .nav.is-open .nav__cta .btn, .nav.is-open .nav__cta .link { flex: 1; }
  .plan--featured { transform: none; }
}

@media (max-width: 620px) {
  .grid--features, .grid--security, .grid--pricing, .grid--guides { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  h1 { font-size: clamp(2.1rem, 9vw, 2.8rem); }
}

/* ============================ how-to guide article =========================
   The reading layout for a single guide page (marketing/guides/*.html). All
   selectors are scoped to .guide-* names so nothing collides with the homepage
   .step/.steps grid. Built from the same Carbon tokens as the rest of the page.

   These twelve pages still TEACH the deleted canvas app (#9, parked until after
   relaunch) — the restyle only changes how they look, not what they claim. */

.guide-page { padding: clamp(44px, 7vw, 84px) 0 clamp(20px, 4vw, 36px); }
.guide-reading { max-width: 760px; margin-inline: auto; }

/* breadcrumb: Guides / This guide */
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--cds-text-helper); margin-bottom: 22px; }
.breadcrumb a { color: var(--cds-text-helper); }
.breadcrumb a:hover { color: var(--cds-link-primary); }
.breadcrumb__sep { color: var(--cds-text-disabled); }
.breadcrumb__current { color: var(--cds-text-secondary); }

/* header: category chip + reading meta, title, intro */
.guide-head__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 16px; }
.guide-head__time { font-size: 0.8rem; color: var(--cds-text-helper); }
.guide-head h1 { font-size: clamp(2rem, 4.4vw, 3rem); }
.guide-head__intro { font-size: clamp(1.08rem, 1.6vw, 1.24rem); color: var(--cds-text-secondary); margin-top: 18px; }

/* "Before you start" prerequisite strip */
.guide-prereq {
  display: flex; gap: 12px; align-items: flex-start;
  margin-top: 26px; padding: 16px 18px; border-radius: var(--radius-sm);
  background: var(--cds-layer-01); border-left: 3px solid var(--cds-support-info);
  font-size: 0.95rem; color: var(--cds-text-secondary);
}
.guide-prereq strong { color: var(--cds-text-primary); }
.guide-prereq__mark {
  flex: none; width: 22px; height: 22px; border-radius: 999px; margin-top: 1px;
  display: grid; place-items: center; color: var(--cds-link-primary);
  background: var(--cds-layer-02);
  font-weight: 600; font-size: 0.8rem;
}

/* body typography */
.guide-body { margin-top: clamp(30px, 4vw, 44px); }
.guide-body > h2 {
  font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin-top: clamp(38px, 5vw, 52px); margin-bottom: 6px;
  padding-top: clamp(38px, 5vw, 52px); border-top: 1px solid var(--cds-border-subtle-01);
}
.guide-body > h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.guide-body h3 { font-size: 1.12rem; margin-top: 28px; margin-bottom: 6px; }
.guide-body p { color: var(--cds-text-secondary); font-size: 1.05rem; margin-top: 14px; }
.guide-body ul { margin: 14px 0 0; padding-left: 0; list-style: none; display: grid; gap: 10px; }
.guide-body ul li { position: relative; padding-left: 26px; color: var(--cds-text-secondary); font-size: 1.02rem; }
.guide-body ul li::before {
  content: ''; position: absolute; left: 2px; top: 0.62em; width: 7px; height: 7px; border-radius: 999px;
  background: var(--cds-border-interactive);
}
.guide-body strong { color: var(--cds-text-primary); }
/* an inline UI label, e.g. the "Create Sheet" button — reads as a soft key */
.ui {
  font-weight: 600; color: var(--cds-text-primary); white-space: nowrap;
  padding: 1px 7px; border-radius: var(--radius-sm);
  background: var(--cds-layer-01); border: 1px solid var(--cds-border-subtle-01);
  font-size: 0.94em;
}

/* a muted qualifier tucked into a guide H2 (e.g. "— account admin, one time") */
.guide-h2-aside { font-weight: 400; color: var(--cds-text-helper); font-size: 0.66em; letter-spacing: 0; }

/* inline code / identifiers in guide copy */
.guide-body code {
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em; color: var(--cds-text-primary); word-break: break-all;
  background: var(--cds-layer-01); border: 1px solid var(--cds-border-subtle-01);
  border-radius: var(--radius-sm); padding: 2px 7px;
}
/* prominent, selectable Client ID block */
.client-id {
  display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap;
  margin: 16px 0 2px; padding: 14px 18px; border-radius: var(--radius-sm);
  background: var(--cds-layer-01); border: 1px solid var(--cds-border-subtle-01);
}
.client-id__label {
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--cds-text-helper);
}
.client-id code {
  font-size: 1.02rem; font-weight: 600; letter-spacing: 0.01em;
  background: none; border: none; padding: 0;
  -webkit-user-select: all; user-select: all;
}

/* numbered steps */
.guide-steps { counter-reset: gstep; list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 16px; }
.guide-steps > li {
  counter-increment: gstep; position: relative;
  padding: 20px 22px 20px 62px; border-radius: var(--radius-sm);
  background: var(--cds-layer-01); border: 1px solid var(--cds-border-subtle-01);
}
.guide-steps > li::before {
  content: counter(gstep); position: absolute; left: 18px; top: 18px;
  width: 30px; height: 30px; border-radius: 999px; display: grid; place-items: center;
  font-weight: 600; font-size: 0.875rem; color: var(--cds-text-on-color);
  background: var(--cds-button-primary);
}
.guide-steps > li h3 { margin: 0 0 4px; font-size: 1.06rem; color: var(--cds-text-primary); }
.guide-steps > li p { margin-top: 6px; font-size: 1rem; }
.guide-steps > li p:first-of-type { margin-top: 2px; }

/* screenshot figures */
.guide-fig { margin: 22px 0 0; }
.guide-fig img {
  width: 100%; height: auto; display: block; border-radius: var(--radius-sm);
  border: 1px solid var(--cds-border-subtle-01);
}
.guide-fig figcaption { margin-top: 12px; font-size: 0.88rem; color: var(--cds-text-helper); text-align: center; }
/* placeholder shown until the real screenshot lands (screenshot pass) */
.guide-fig--todo .guide-fig__slot {
  display: grid; place-items: center; gap: 8px; text-align: center;
  min-height: clamp(180px, 30vw, 280px); padding: 28px; border-radius: var(--radius-sm);
  color: var(--cds-text-helper); font-size: 0.9rem;
  background:
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--cds-text-primary) 3%, transparent) 0 14px, transparent 14px 28px),
    var(--cds-layer-01);
  border: 1px dashed var(--cds-border-strong-01);
}
.guide-fig__slot-mark {
  width: 34px; height: 34px; color: var(--cds-link-primary); opacity: 0.8;
}
.guide-fig__slot-label { font-weight: 600; color: var(--cds-text-secondary); }

/* tip / note callouts */
.guide-callout {
  display: flex; gap: 12px; align-items: flex-start;
  margin: 22px 0 0; padding: 16px 18px; border-radius: var(--radius-sm);
  font-size: 0.98rem; color: var(--cds-text-secondary);
  background: var(--cds-layer-02); border-left: 3px solid var(--cds-border-interactive);
}
.guide-callout strong { color: var(--cds-text-primary); }
.guide-callout__tag {
  flex: none; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.66rem; font-weight: 600;
  color: var(--cds-link-primary); padding: 3px 9px; border-radius: 999px; margin-top: 1px;
  background: var(--cds-layer-02);
}
.guide-callout--note { background: var(--cds-layer-02); border-left-color: var(--cds-support-warning); }
.guide-callout--note .guide-callout__tag { color: var(--cds-support-warning); background: var(--cds-layer-03); }

/* prev / next pager */
.guide-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: clamp(38px, 5vw, 52px); }
.guide-pager a {
  display: flex; flex-direction: column; gap: 4px; padding: 16px 20px; border-radius: var(--radius-sm);
  background: var(--cds-layer-01); border: 1px solid var(--cds-border-subtle-01);
}
.guide-pager a:hover { border-color: var(--cds-border-strong-01); background: var(--cds-layer-hover-01); }
.guide-pager__dir { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--cds-text-helper); font-weight: 600; }
.guide-pager__title { font-weight: 600; color: var(--cds-text-primary); font-size: 0.98rem; }
.guide-pager a.is-next { text-align: right; grid-column: 2; }
.guide-pager a.is-prev { grid-column: 1; }
.guide-pager a.is-next:only-child { grid-column: 2; }

/* related guides heading reuses .grid--guides + .guide cards from the resources page */
.guide-related { margin-top: clamp(48px, 7vw, 80px); }
.guide-related h2 { font-size: clamp(1.5rem, 2.8vw, 2rem); text-align: center; margin-bottom: clamp(24px, 3vw, 36px); }

@media (max-width: 620px) {
  .guide-pager { grid-template-columns: 1fr; }
  .guide-pager a.is-next, .guide-pager a.is-prev { grid-column: 1; text-align: left; }
}

/* ============================== contact modal =============================
   The Contact nav button and inquiry modal are injected by main.js on every
   page. The button reuses the .btn system; the modal is a single floating
   surface, so a real backdrop-filter is fine here (unlike node "frost"). */

.contact-modal {
  position: fixed; inset: 0; z-index: 200;
  display: none; align-items: flex-start; justify-content: center;
  padding: clamp(16px, 6vh, 80px) 16px;
  background: var(--cds-overlay);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  overflow-y: auto;
}
.contact-modal.is-open { display: flex; }

.contact-modal__dialog {
  position: relative; width: 100%; max-width: 460px;
  padding: clamp(24px, 4vw, 36px);
  border-radius: var(--radius);
  background: var(--cds-layer-01);
  border: 1px solid var(--cds-border-subtle-01);
  animation: contact-in .22s cubic-bezier(.22, .61, .36, 1);
}
@keyframes contact-in {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .contact-modal__dialog { animation: none; } }

.contact-modal__close {
  position: absolute; top: 12px; right: 14px;
  width: 34px; height: 34px; border-radius: 999px; border: none; cursor: pointer;
  font-size: 1.5rem; line-height: 1; color: var(--cds-text-helper); background: transparent;
  transition: color .15s ease, background-color .15s ease;
}
.contact-modal__close:hover { color: var(--cds-text-primary); background: var(--cds-layer-hover-01); }
.contact-modal__title { font-size: 1.5rem; margin-bottom: 6px; }
.contact-modal__sub { color: var(--cds-text-secondary); font-size: 0.96rem; margin-bottom: 18px; }

.contact-form { display: grid; gap: 14px; }
.contact-field { display: grid; gap: 6px; font-size: 0.82rem; font-weight: 600; color: var(--cds-text-primary); letter-spacing: 0.01em; }
.contact-field em { color: var(--cds-text-helper); font-weight: 400; font-style: normal; }
.contact-field input, .contact-field textarea {
  font: inherit; font-weight: 400; font-size: 0.98rem; color: var(--cds-text-primary); width: 100%;
  padding: 11px 13px; border-radius: var(--radius-sm); resize: vertical;
  background: var(--cds-field-01); border: 0; border-bottom: 1px solid var(--cds-border-strong-01);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.contact-field input:focus, .contact-field textarea:focus {
  outline: 2px solid var(--cds-focus); outline-offset: -2px;
}
/* honeypot: off-screen, not display:none (some bots skip hidden fields) */
.contact-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.contact-submit { margin-top: 4px; }
.contact-status { font-size: 0.9rem; min-height: 1.2em; margin-top: 2px; }
.contact-status.is-error { color: var(--cds-text-error); }
/* Success confirmation is shown on the submit button itself (not here); keep it fully
   legible (white on accent) even while disabled. */
.contact-submit:disabled { opacity: 1; cursor: default; }

/* The .video-modal lightbox styles lived here until 2026-08-10, removed with the hero's
   "Watch the intro" button and the VideoObject structured data. Rebuild alongside the
   recaptured intro video (#8). */

/* The connection-wire styles (.wire-layer and friends) lived here until 2026-08-10,
   removed with the whole wire system — see the note in main.js. */

/* ------------------------------ status page -------------------------------
   The status board (status.html): one overall banner + a row per provider,
   colored by data-state, which the page's own script sets from each provider's
   public Statuspage feed. Reuses the sheet-status palette for the healthy and
   degraded inks; outage red is its own because nothing else on the site is one. */

.status-board {
  display: flex; flex-direction: column; gap: 14px;
  max-width: 640px; margin: 0 auto;
}

.status-overall,
.status-row {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 22px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--cds-border-subtle-01);
  background: var(--cds-layer-01);
}

.status-overall { font-weight: 600; color: var(--cds-text-primary); font-size: 1.05rem; }

.status-dot {
  flex: none; width: 12px; height: 12px; border-radius: 999px;
  background: var(--cds-text-disabled);
}
[data-state="operational"] .status-dot { background: var(--cds-support-success); }
[data-state="degraded"] .status-dot,
[data-state="unknown"] .status-dot { background: var(--cds-support-warning); }
[data-state="outage"] .status-dot { background: var(--cds-support-error); }
[data-state="loading"] .status-dot { background: var(--cds-text-disabled); animation: status-pulse 1.2s ease-in-out infinite; }
@keyframes status-pulse { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { [data-state="loading"] .status-dot { animation: none; } }

.status-row__body { flex: 1 1 auto; min-width: 0; }
.status-row__body h3 { font-size: 0.95rem; color: var(--cds-text-primary); margin: 0 0 2px; }
.status-row__desc { font-size: 0.88rem; color: var(--cds-text-helper); margin: 0; }
.status-row__provider { flex: none; font-size: 0.85rem; color: var(--cds-text-helper); white-space: nowrap; }
.status-row__provider:hover { color: var(--cds-link-primary); }

.status-updated { text-align: center; font-size: 0.8rem; color: var(--cds-text-disabled); margin: 4px 0 0; }