/* ============================================================================
   ReadyAED — site layer (marketing)

   Everything the public website needs that the product design system should not
   carry: page bands, the hero stage, evidence frames, marketing cards, the
   navigation bar and its menus, the footer, and the scroll behaviour.

   Rules this file obeys
   ---------------------------------------------------------------------------
   1. It composes the design system; it never redefines a token or a component.
      Load order stays tokens.css -> base.css -> components.css -> site.css.
   2. Light only. Navy is the brand surface, red stays a signal. Nothing here
      puts red on a large area, and nothing here adds a dark theme.
   3. Cards and panels keep a border. A shadow is spent only where it lifts
      something off the page: the hero stage, a media frame, an overlay, the
      sticky header once you have scrolled.
   4. The only new values are the three alpha derivations of brand navy in
      :root below, used for hairline lattices. They are derivations, not colours.
   5. Page fragments keep using the classes in web/templates/snippets.md. The
      marketing components added here (kicker, figure, steps, faq, plan, slot)
      are documented there so builders copy them instead of inventing markup.

   Contents
   ---------------------------------------------------------------------------
    1  Site tokens
    2  Page canvas and band rhythm
    3  Section heads, kickers and rules
    4  Hero stage
    5  Media frames and evidence captions
    6  Actions: buttons and links
    7  Cards
    8  Icon tiles
    9  Steps
   10  Capability strip
   11  Tables
   12  FAQ and disclosure
   13  Plans
   14  Closing band
   15  Unpublished slots
   16  Header, menus and drawer
   17  Footer
   18  Scroll utilities
   19  Focus corrections
   20  Motion and reduced motion
   21  Print
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1  SITE TOKENS
   Derived from brand navy only. Nothing here introduces a new hue.
   --------------------------------------------------------------------------- */
:root {
  --site-header-h: 72px;
  --site-measure: 68ch;
  --site-lattice: rgba(2, 28, 82, 0.05);      /* hairline grid on a light surface */
  --site-lattice-inverse: rgba(255, 255, 255, 0.06); /* hairline grid on navy */
  --site-hairline: rgba(2, 28, 82, 0.10);     /* 1px edge that must read on tint */
  --site-band: var(--space-12);
  --site-band-lg: var(--space-20);
  --site-stage-pad: var(--space-5);
}

@media (min-width: 900px) {
  :root { --site-band: var(--space-16); --site-stage-pad: var(--space-10); }
}
@media (min-width: 1280px) { :root { --site-band: var(--space-20); } }

html { scroll-padding-top: calc(var(--site-header-h) + var(--space-6)); }

/* ---------------------------------------------------------------------------
   2  PAGE CANVAS AND BAND RHYTHM
   The page canvas is slate-50. Sections paint full-bleed bands that alternate
   white and canvas, so a long page reads as chapters. The first section is the
   hero stage and opts out of the alternation.
   --------------------------------------------------------------------------- */
body { background: var(--color-bg); }

main > section.section {
  background: var(--color-surface);
  padding-block: var(--site-band);
  border-top: var(--border-thin) solid var(--color-border);
}
main > section.section:first-of-type { border-top: none; }
main > section.section:nth-of-type(even) { background: var(--color-surface-subtle); }

/* A section that opens with a breadcrumb strip keeps the strip on the canvas,
   above the band, so the band always starts with its heading. */
main > nav.breadcrumb {
  padding: var(--space-5) 0 0;
  background: var(--color-bg);
}
main > nav.breadcrumb + section.section { border-top: none; }

/* Deep navy band: the closing call to action. */
main > section.section:has(> .container > .panel--brand) {
  background: var(--color-brand-surface);
  border-top-color: var(--color-brand-surface-border);
  padding-block: var(--site-band);
}
main > section.section:has(> .container > .panel--brand) > .container {
  position: relative;
  overflow: clip;
}
main > section.section:has(> .container > .panel--brand) .panel--brand {
  position: relative;
  background: transparent;
  border: none;
  padding: 0;
  border-radius: 0;
}

/* ---------------------------------------------------------------------------
   3  SECTION HEADS, KICKERS AND RULES
   --------------------------------------------------------------------------- */

/* Kicker — the small label above a heading. The design system's .eyebrow is
   red and red is reserved, so the site layer carries its own, in brand navy. */
.kicker {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3) var(--space-1) var(--space-2);
  border: var(--border-thin) solid var(--color-info-border);
  border-radius: var(--radius-full);
  background: var(--color-brand-soft);
  color: var(--navy-800);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-normal);
  text-decoration: none;
}
.kicker .icon { width: 16px; height: 16px; color: var(--color-brand); }
.kicker--plain { background: transparent; border-color: var(--color-border-strong); }
.panel--brand .kicker,
.section--inverse .kicker {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.24);
  color: var(--color-brand-surface-text);
}
.panel--brand .kicker .icon { color: var(--color-brand-surface-text); }

/* Section headings and leads use the full section container width. */
main .section h2 {
  position: relative;
  font-size: var(--text-2xl);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}
@media (min-width: 900px) {
  main .section h2 { font-size: var(--text-3xl); }
  main .card h2, main .plan h2 { font-size: var(--text-2xl); }
}
main .section h2 + p.u-text-lg { margin-top: var(--space-3); }
main .section .u-text-lg { font-size: var(--text-lg); color: var(--color-text-secondary); }

/* A short brand rule marks the start of a prose-only section, so the block has
   a left edge instead of floating. */
main > section.section:has(> .container--reading) > .container--reading > .stack > h2:first-child::before {
  content: "";
  display: block;
  width: var(--space-10);
  height: var(--border-accent);
  margin-bottom: var(--space-4);
  border-radius: var(--radius-full);
  background: var(--color-brand);
}

/* Lead paragraph — the sentence under an h1 or h2, given room to breathe. */
.lead {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  max-width: 62ch;
}
@media (min-width: 900px) { .lead { font-size: var(--text-xl); } }

/* ---------------------------------------------------------------------------
   4  HERO STAGE
   The first container of the first section becomes a raised, rounded stage:
   white surface, hairline border, a faint engineering lattice behind the copy,
   and the product screenshot as the evidence. Applied by structure, so every
   page gets it without touching its fragment.
   --------------------------------------------------------------------------- */
main > section.section:first-of-type {
  padding-block: var(--space-6) var(--site-band);
  background: var(--color-bg);
}
@media (min-width: 900px) {
  main > section.section:first-of-type { padding-block: var(--space-8) var(--site-band-lg); }
}

main > section.section:first-of-type > .container:first-child {
  max-width: var(--container-xl);
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding: var(--space-6) var(--site-stage-pad) var(--space-8);
  background: var(--color-surface);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}
main > section.section:first-of-type > .container:first-child::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(to right, var(--site-lattice) 1px, transparent 1px),
    linear-gradient(to bottom, var(--site-lattice) 1px, transparent 1px);
  background-size: 40px 40px;
  background-position: top right;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.9), transparent 78%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.9), transparent 78%);
  pointer-events: none;
}
@media (min-width: 900px) {
  main > section.section:first-of-type > .container:first-child {
    padding: var(--space-10) var(--site-stage-pad) var(--space-12);
  }
}

/* A hero that carries a breadcrumb keeps the row tight above the copy. */
main > section.section:first-of-type > .container:first-child > nav.breadcrumb {
  margin-bottom: var(--space-5);
}

/* The headline. */
main > section.section:first-of-type h1 {
  font-size: var(--text-3xl);
  letter-spacing: -0.025em;
  line-height: 1.1;
}
@media (min-width: 700px) {
  main > section.section:first-of-type h1 { font-size: var(--text-4xl); }
}
@media (min-width: 1200px) {
  main > section.section:first-of-type h1 { font-size: var(--text-5xl); }
}

main > section.section:first-of-type .kicker { margin-bottom: var(--space-4); }
main > section.section:first-of-type h1 + p { margin-top: var(--space-4); }
main > section.section:first-of-type p.u-text-lg {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
}
@media (min-width: 1200px) {
  main > section.section:first-of-type p.u-text-lg { font-size: var(--text-xl); }
}

/* Text / media split. The media column takes the wider half. */
@media (min-width: 900px) {
  main > section.section:first-of-type .grid--2 {
    grid-template-columns: minmax(0, 10fr) minmax(0, 11fr);
    gap: var(--space-10);
    align-items: center;
  }
}
@media (min-width: 1280px) {
  main > section.section:first-of-type .grid--2 { gap: var(--space-16); }
}
/* A hero whose text column also holds the follow-up prose keeps reading width. */
main > section.section:first-of-type .grid--2 > .stack { gap: var(--space-5); }

/* Actions row. */
main > section.section:first-of-type .cluster { gap: var(--space-3); margin-top: var(--space-2); }
@media (min-width: 768px) {
  main > section.section:first-of-type .cluster .btn {
    min-height: var(--control-height-lg);
    padding-inline: var(--space-6);
    font-size: var(--text-md);
  }
}

/* Body copy inside the stage follows the full container width. */

/* Supporting prose that sits under the stage stays on the canvas and reads as
   an introduction, not as a second hero. It is pulled to the stage's inner
   edge so the page keeps one left margin from the headline down. */
main > section.section:first-of-type > .container--reading:not(:first-child) {
  max-width: var(--container-xl);
  margin-top: var(--space-8);
  padding-inline-start: calc(var(--page-margin) + var(--site-stage-pad));
  font-size: var(--text-md);
  color: var(--color-text);
}
main > section.section:first-of-type > .container--reading:not(:first-child) > .stack { max-width: 74ch; }
main > section.section:first-of-type > .container--reading p { color: inherit; }
@media (min-width: 900px) {
  main > section.section:first-of-type > .container--reading:not(:first-child) { margin-top: var(--space-10); }
}

/* Section containers share one outer edge. Reading content keeps its measure
   inside the container instead of narrowing the section itself. */
main > section.section > .container,
main > section.section > .container--reading,
main > section.section > .container--wide { max-width: var(--container-xl); }
main > section.section > .container--reading:not(:has(.grid, .faq, .card, .panel)) > .stack {
  max-width: 100ch;
}

/* ---------------------------------------------------------------------------
   5  MEDIA FRAMES
   A screenshot is evidence. It is matted, bordered and captioned, never
   rotated and never free-floating. A fragment may use the bare <picture> from
   the hero-split snippet or the explicit .figure wrapper; both render as one
   frame, never as two.
   --------------------------------------------------------------------------- */
main picture { display: block; }
main picture img {
  width: 100%;
  height: auto;
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-sunken);
}

/* The frame itself. A phone master is excluded: it is styled as a device on a
   stage further down, and letting both rules match left the stage rule losing on
   specificity, so the shot sat in a desktop matte with the wrong padding. */
.figure:not(:has(img[width="390"])),
main > section.section:first-of-type > .container:first-child > picture:not(:has(img[width="390"])),
main > section.section:first-of-type > .container:first-child > .grid--2 > picture:not(:has(img[width="390"])),
main > section.section:not(:first-of-type) .container > .grid--2 > picture:not(:has(img[width="390"])),
main > section.section:not(:first-of-type) .container > picture:not(:has(img[width="390"])) {
  position: relative;
  display: block;
  margin: 0;
  padding: var(--space-2);
  background: var(--color-surface);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}
main > section.section:first-of-type > .container:first-child > picture,
main > section.section:first-of-type > .container:first-child > .grid--2 > picture {
  box-shadow: var(--shadow-md);
}

/* A <picture> inside .figure is the content, not a second frame. */
main .figure picture {
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

/* The top rail: three marks and the screen name. It says "this is the product",
   not "this is a decoration". The label uses the UI face at a size that reads
   without squinting — mono is reserved for machine data such as serials and
   dates, and a screen name is not machine data. */
.figure__bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-2) var(--space-3);
}
.figure__dots { display: inline-flex; gap: 5px; flex: none; }
.figure__dots i {
  width: 8px; height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-border-strong);
}
.figure__label {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  letter-spacing: var(--tracking-normal);
  line-height: var(--leading-snug);
}
/* The honest note every product screenshot needs: the numbers are a demo tenant. */
.figure__tag {
  margin-inline-start: auto;
  padding: 1px var(--space-2);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  white-space: nowrap;
}

/* Caption under the frame — names the screen and states that the data is a sample. */
.figure figcaption,
.figure__caption {
  padding: var(--space-3) var(--space-2) var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
}

/* The status legend under the hero shot. It used to float over the frame's
   corner; that hid the very rows the screenshot exists to show, so it now sits
   inside the matte, below the image, as a labelled strip. */
.figure__note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-1) var(--space-1);
  border-top: var(--border-thin) solid var(--color-border);
  width: 100%;
}
.figure__note-title {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  line-height: var(--leading-snug);
}
.figure__note .cluster { gap: var(--space-2); }
.figure__note .badge { font-size: var(--text-xs); }

/* A phone screenshot. A 390px master inside a wide column reads as a strip
   stranded in whitespace, so the frame becomes a stage that fills the column
   and the shot becomes a device standing on it: white bezel, large corner
   radius, one lifted shadow. The desktop browser rail is dropped — a phone has
   no window chrome. */
.figure--phone,
main picture:has(img[width="390"]):not(.figure picture) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  width: 100%;
  max-width: 420px;
  margin-inline: auto;
  padding: var(--space-8) var(--space-6);
  background: var(--color-bg-sunken);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: none;
}
.figure--phone > .figure__bar { display: none; }
.figure--phone img,
main picture:has(img[width="390"]) img {
  width: 100%;
  max-width: 256px;
  height: auto;
  padding: 0;
  border: var(--space-1) solid var(--color-surface);
  border-radius: 26px;
  box-shadow: var(--shadow-lg);
  background: var(--color-surface);
}
/* Inside a two-column split the stage sits in the middle of its half. */
main .grid > .figure--phone,
main .grid > picture:has(img[width="390"]) { justify-self: center; }

/* ---------------------------------------------------------------------------
   6  ACTIONS
   --------------------------------------------------------------------------- */

/* A primary action that carries an arrow. The arrow moves on hover, the label
   does not change colour, so the affordance stays quiet. */
.btn .icon { width: 1.05em; height: 1.05em; }
.btn--arrow .icon { transition: transform var(--duration-fast) var(--ease-standard); }
.btn--arrow:hover .icon { transform: translateX(3px); }

/* Text link with a trailing arrow — the standard "read this" affordance. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  color: var(--color-link);
}
.link-arrow .icon { width: 18px; height: 18px; transition: transform var(--duration-fast) var(--ease-standard); }
.link-arrow:hover { color: var(--color-link-hover); text-decoration: none; }
.link-arrow:hover .icon { transform: translateX(3px); }
.panel--brand .link-arrow { color: var(--color-brand-surface-text); }
.panel--brand .link-arrow:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------------
   7  CARDS
   A card is a door. It has a border, a hover edge, and one clear destination.
   --------------------------------------------------------------------------- */
main .card {
  display: flex;
  flex-direction: column;
  transition:
    border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}
main .card__body { flex: 1 1 auto; }
main .card__body,
main .card__footer { font-size: var(--text-base); }
main .card__body p { color: var(--color-text-secondary); }
main .card__title { font-size: var(--text-lg); letter-spacing: -0.01em; }

/* The whole card is clickable when its footer holds the only link. */
main .card--page,
main .card--interactive { position: relative; }
main .card--page:hover,
main .card--interactive:hover {
  border-color: var(--color-brand);
  box-shadow: var(--shadow-sm);
}
main .card--page:hover .card__footer,
main .card--interactive:hover .card__footer { background: var(--color-brand-soft); }
main .card__footer { transition: background-color var(--duration-fast) var(--ease-standard); }
main .card__footer a { font-weight: var(--font-weight-semibold); }

/* The footer link is the card's destination. A drawn chevron marks it as a
   way out, so a hub of nine cards reads as nine doors. The glyph is a
   pseudo-element, so a screen reader hears the link text alone. */
main .card__footer a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--font-weight-semibold);
}
main .card__footer a::after {
  content: "";
  width: 7px;
  height: 7px;
  flex: none;
  border-top: var(--border-thick) solid currentColor;
  border-right: var(--border-thick) solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--duration-fast) var(--ease-standard);
}
main .card__footer a:hover::after { transform: rotate(45deg) translate(2px, -2px); }

/* A hover edge: the card lifts a hairline of brand colour across the top. */
main .card--page::before,
main .card--interactive::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--border-accent);
  background: var(--color-brand);
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-standard);
}
main .card--page:hover::before,
main .card--interactive:hover::before { opacity: 1; }

/* A group heading inside a hub section gets the same brand tick the prose
   sections carry, so a long hub page shows its chapters. */
main .section > .container > .stack > .stack > h3:first-child {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}
main .section > .container > .stack > .stack > h3:first-child::before {
  content: "";
  width: var(--space-6);
  height: var(--border-accent);
  flex: none;
  border-radius: var(--radius-full);
  background: var(--color-brand);
}

/* A card with an icon tile: the tile carries the category, the title carries
   the meaning. Used on hubs and feature grids. */
.card__header { gap: var(--space-4); }
.card--tile .card__header { align-items: flex-start; }

/* Numbered card — for the "start where you fit" and step families. */
.card__index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  flex: none;
  border-radius: var(--radius-full);
  background: var(--color-brand-soft);
  border: var(--border-thin) solid var(--color-info-border);
  color: var(--navy-800);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
}

/* ---------------------------------------------------------------------------
   8  ICON TILES
   A 44px square holding one sprite icon. Tinted, bordered, never gradient.
   --------------------------------------------------------------------------- */
.icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-target-min);
  height: var(--tap-target-min);
  flex: none;
  border: var(--border-thin) solid var(--color-info-border);
  border-radius: var(--radius-lg);
  background: var(--color-brand-soft);
  color: var(--color-brand);
}
.icon-tile .icon { width: 22px; height: 22px; }
.icon-tile--sm { width: 36px; height: 36px; border-radius: var(--radius-md); }
.icon-tile--sm .icon { width: 18px; height: 18px; }
.icon-tile--inverse {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.24);
  color: var(--color-brand-surface-text);
}

/* A feature item: tile, title, one sentence. */
.feature { display: flex; flex-direction: column; gap: var(--space-3); }
.feature h3 { font-size: var(--text-xl); }
.feature p { color: var(--color-text-secondary); }
.feature--row { flex-direction: row; align-items: flex-start; gap: var(--space-4); }
.feature--row > div { min-width: 0; }

/* ---------------------------------------------------------------------------
   9  STEPS
   The inspection and onboarding flows read as a numbered path, not as prose.
   --------------------------------------------------------------------------- */
.steps {
  display: grid;
  gap: var(--space-6);
  counter-reset: step;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); } }
.steps--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1100px) { .steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.steps > li {
  position: relative;
  counter-increment: step;
  padding-top: var(--space-2);
}
.steps > li::before {
  content: counter(step, decimal-leading-zero);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  margin-bottom: var(--space-4);
  border: var(--border-thin) solid var(--color-info-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--navy-800);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
}
/* The connector sits behind the discs, between them. */
@media (min-width: 900px) {
  .steps > li + li::after {
    content: "";
    position: absolute;
    left: calc(40px * -1 - var(--space-8) + 40px);
    top: 20px;
    width: calc(var(--space-8) + 40px);
    height: 1px;
    background: var(--color-border-strong);
  }
  .steps > li + li { z-index: 1; }
}
.steps > li h3 { font-size: var(--text-xl); }
.steps > li p { margin-top: var(--space-2); color: var(--color-text-secondary); }

/* ---------------------------------------------------------------------------
   10  CAPABILITY STRIP
   The row directly under the hero. It states what the product does, with an
   icon and a word. It is never used for invented customer logos or counts.
   --------------------------------------------------------------------------- */
.strip {
  display: grid;
  gap: var(--space-1);
  margin-top: var(--space-8);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  overflow: clip;
}
@media (min-width: 700px) { .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .strip--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.strip > li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  list-style: none;
  border-top: var(--border-thin) solid var(--color-border);
}
.strip > li:first-child { border-top: none; }
@media (min-width: 700px) {
  .strip > li { border-top: var(--border-thin) solid var(--color-border); border-left: var(--border-thin) solid var(--color-border); }
  .strip > li:nth-child(-n+2) { border-top: none; }
}
@media (min-width: 1000px) {
  .strip--4 > li { border-left: var(--border-thin) solid var(--color-border); border-top: none; }
  .strip--4 > li:first-child { border-left: none; }
}
.strip .icon { width: 20px; height: 20px; color: var(--color-brand); margin-top: 2px; }
.strip strong { display: block; font-size: var(--text-base); font-weight: var(--font-weight-semibold); }
.strip span { display: block; font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-normal); }

/* ---------------------------------------------------------------------------
   11  TABLES
   Comparison tables are the site's argument. The first column and the header
   stay put on a narrow screen, and the ReadyAED column is marked, not shouted.
   --------------------------------------------------------------------------- */
main .table-wrap { border-radius: var(--radius-lg); }
main .table { font-size: var(--text-base); }
main .table caption {
  caption-side: top;
  text-align: left;
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface-subtle);
  border-bottom: var(--border-thin) solid var(--color-border);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}
main .table thead th {
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
main .table tbody th[scope="row"] { font-weight: var(--font-weight-semibold); color: var(--color-text); }

/* The question column is a label, not a headline. It is given a share of the
   table, allowed to wrap, and lifted to the top so it lines up with the first
   line of the answer rather than floating in the middle of a tall row. */
main .table th[scope="row"] {
  width: 20%;
  min-width: 150px;
  white-space: normal;
  vertical-align: top;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}
main .table thead th { white-space: normal; vertical-align: bottom; }
main .table td { vertical-align: top; line-height: var(--leading-normal); }
main .table tbody tr:nth-child(even) td,
main .table tbody tr:nth-child(even) th[scope="row"] { background: var(--color-surface-subtle); }
main .table tbody tr:hover td,
main .table tbody tr:hover th[scope="row"] { background: var(--color-brand-soft); }

/* ---------------------------------------------------------------------------
   12  FAQ AND DISCLOSURE
   Native <details> so the answer is in the HTML for FAQPage, and works with
   scripts off. An h3 keeps the heading structure intact.
   --------------------------------------------------------------------------- */
.faq { display: flex; flex-direction: column; gap: var(--space-3); overflow-anchor: none; }
.faq > details {
  background: var(--color-surface);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: clip;
}
.faq > details[open] { border-color: var(--color-border-strong); }
.faq__item > summary:focus-visible {
  outline: 3px solid var(--focus-ring-color);
  outline-offset: -3px;
}
.faq > details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--tap-target-min);
  padding: var(--space-4) var(--space-5);
  cursor: pointer;
  list-style: none;
}
.faq > details > summary::-webkit-details-marker { display: none; }
.faq > details > summary:hover { background: var(--color-surface-subtle); }
.faq summary h3,
.faq summary .faq__q {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: -0.01em;
  margin: 0;
}
.faq summary .icon {
  width: 20px; height: 20px;
  flex: none;
  color: var(--color-brand);
  transition: transform var(--duration-fast) var(--ease-standard);
}
.faq details[open] summary .icon { transform: rotate(45deg); }
.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  padding: 0 var(--space-5);
  transition: grid-template-rows 180ms var(--ease-standard),
              padding-block 180ms var(--ease-standard);
}
.faq details[open] .faq__a { grid-template-rows: 1fr; padding-bottom: var(--space-5); }
.faq details.is-closing .faq__a { grid-template-rows: 0fr; }
.faq__a-inner {
  min-height: 0;
  overflow: hidden;
}
.faq__a > * + * { margin-top: var(--space-3); }
.faq__a p { color: var(--color-text-secondary); }

/* A plain question/answer stack, when the copy must stay open for SEO. */
.qa { display: flex; flex-direction: column; gap: var(--space-3); }
.qa > div { padding-left: var(--space-5); border-left: var(--border-thin) solid var(--color-border-strong); }
.qa h3 { font-size: var(--text-lg); }
.qa p { color: var(--color-text-secondary); }

/* ---------------------------------------------------------------------------
   12b  MARKETING FORMS
   The system's field border is --color-border-strong (slate-300), which measures
   1.61:1 on white — escalation #11. On a marketing page a form is the
   conversion path, so the boundary is given here: a slate-500 rule (4.05:1) that
   does not depend on hover or focus, plus a filled field so the control reads as
   a control at a glance. Logged as escalation #18; the durable fix belongs in
   components.css so the app inherits it too.
   --------------------------------------------------------------------------- */
main .input,
main .select,
main .textarea {
  border-color: var(--slate-500);
  background: var(--color-surface-subtle);
}
main .input:hover,
main .select:hover,
main .textarea:hover { border-color: var(--color-brand); background: var(--color-surface); }
main .input:focus-visible,
main .select:focus-visible,
main .textarea:focus-visible { background: var(--color-surface); }
main .field__label { font-size: var(--text-base); }

/* ---------------------------------------------------------------------------
   13  PLANS
   The pricing page keeps one flat rate, so a plan card states what the rate
   covers. The featured card is marked with a navy edge, not a glow.
   --------------------------------------------------------------------------- */
.plan {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--color-surface);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-xl);
}
.plan--featured { border-color: var(--color-brand); box-shadow: var(--shadow-md); }
.plan__price {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-size: var(--text-3xl);
  font-weight: var(--font-weight-black);
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
}
.plan__unit { font-size: var(--text-sm); font-weight: var(--font-weight-regular); color: var(--color-text-secondary); letter-spacing: 0; }
.plan__list { display: flex; flex-direction: column; }
.plan__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding-block: var(--space-2);
  border-bottom: var(--border-thin) solid var(--color-border);
  font-size: var(--text-base);
}
.plan__list li:last-child { border-bottom: none; }
.plan__list .icon { width: 18px; height: 18px; margin-top: 3px; color: var(--color-ready); flex: none; }
.panel--brand .plan__list .icon { color: var(--color-brand-surface-text); }

/* ---------------------------------------------------------------------------
   14  CLOSING BAND
   The navy band that ends a page. Textured, and it holds one action.
   --------------------------------------------------------------------------- */
.panel--brand { position: relative; isolation: isolate; overflow: clip; }
.panel--brand::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(to right, var(--site-lattice-inverse) 1px, transparent 1px),
    linear-gradient(to bottom, var(--site-lattice-inverse) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}
main > section.section:has(> .container > .panel--brand) .panel--brand h2 {
  font-size: var(--text-2xl);
  max-width: 24ch;
}
@media (min-width: 900px) {
  main > section.section:has(> .container > .panel--brand) .panel--brand h2 { font-size: var(--text-3xl); }
}
main > section.section:has(> .container > .panel--brand) .panel--brand p {
  max-width: 62ch;
  font-size: var(--text-lg);
}
.panel--brand .cluster { margin-top: var(--space-2); }
.panel--brand .btn { position: relative; z-index: 1; }

/* ---------------------------------------------------------------------------
   15  UNPUBLISHED SLOTS
   Content the campaign has not been cleared to publish. It is marked as a slot
   so a reader sees a deliberate gap, not a stray bracket. build_site.py wraps
   every [PLACEHOLDER: …] and [NEEDS LEGAL REVIEW] in .slot at assembly time.
   --------------------------------------------------------------------------- */
.slot {
  display: inline-block;
  padding: 0.1em 0.5em;
  border: 1px dashed var(--color-attention-border);
  border-radius: var(--radius-sm);
  background: var(--color-attention-bg);
  color: var(--color-attention-text);
  font-size: 0.84em;
  font-weight: var(--font-weight-medium);
  line-height: 1.5;
  vertical-align: baseline;
}
.slot::before {
  content: "Not published yet";
  margin-right: 0.45em;
  font-family: var(--font-mono);
  font-size: 0.86em;
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--amber-800);
}
.slot--legal::before { content: "Legal review"; }
/* A slot that stands alone in a proof cell fills the cell as a block. */
.grid > p > .slot:only-child,
.strip .slot { display: block; }

/* ---------------------------------------------------------------------------
   16  HEADER, MENUS AND DRAWER
   One row at every width. Six IA items; three of them open a panel. Below
   1081px the same nav becomes a right-hand drawer with disclosure rows, so the
   links exist once and cannot drift.
   --------------------------------------------------------------------------- */
/* The bar, not the header, carries the height. A nav item then stretches to the
   header's bottom edge, so the pointer travels from the trigger into the panel
   without ever crossing ground that belongs to neither — the reason a hover menu
   closes on the way down. */
.topbar {
  min-height: var(--site-header-h);
  padding-block: 0;
  transition: box-shadow var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard);
}
.topbar__bar { min-height: var(--site-header-h); }
.navitem { align-self: stretch; display: flex; align-items: stretch; }
.topbar__bar { display: flex; align-items: center; gap: var(--space-2); }
.topbar__brand img { width: 130px; }
.topbar__panel { display: contents; }
.topbar__actions { display: flex; align-items: center; gap: var(--space-2); }
.topbar__link { white-space: nowrap; }

/* Scrolled state: the bar lifts off the page. */
.topbar.is-scrolled { border-bottom-color: var(--color-border-strong); box-shadow: var(--shadow-sm); }

/* --- desktop nav ---------------------------------------------------------- */
@media (min-width: 1081px) {
  .topbar__panel > .topbar__nav { margin-left: auto; gap: var(--space-0); }
  .navitem { position: static; }
  .navitem__trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: var(--tap-target-min);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
    font-family: inherit;
    font-size: var(--text-base);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
  }
  .navitem__trigger .icon {
    width: 15px; height: 15px;
    transition: transform var(--duration-fast) var(--ease-standard);
  }
  .navitem__trigger:hover { background: var(--color-surface-subtle); color: var(--color-text); }
  .navitem.is-open > .navitem__trigger,
  .navitem__trigger[aria-current="page"] { color: var(--color-brand); font-weight: var(--font-weight-semibold); }
  .navitem.is-open > .navitem__trigger .icon { transform: rotate(180deg); }

  .megamenu {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    display: none;
    border-top: var(--border-thin) solid var(--color-border);
    background: var(--color-surface);
    box-shadow: var(--shadow-md);
  }
  .navitem.is-open > .megamenu { display: block; }
  .megamenu__inner {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-8);
    padding-block: var(--space-8);
  }
  .megamenu__inner--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .megamenu__inner--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .megamenu h3 {
    font-size: var(--text-sm);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-3);
  }
  .megamenu ul { display: flex; flex-direction: column; gap: var(--space-0); list-style: none; margin: 0; padding: 0; }
  .megamenu a {
    display: flex;
    align-items: center;
    min-height: 40px;
    color: var(--color-text-secondary);
    font-size: var(--text-base);
    text-decoration: none;
    border-radius: var(--radius-sm);
  }
  .megamenu a:hover { color: var(--color-link-hover); background: var(--color-surface-subtle); }
  /* A button inside a menu keeps its own colours; .megamenu a must not win. */
  .megamenu a.btn, .megamenu a.btn:hover {
    color: var(--color-action-text);
    background: var(--color-action);
    justify-content: center;
  }
  .megamenu a.btn:hover { background: var(--color-action-hover); }
  .megamenu__aside {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-5);
    background: var(--color-brand-soft);
    border: var(--border-thin) solid var(--color-info-border);
    border-radius: var(--radius-lg);
  }
  .megamenu__aside p { font-size: var(--text-sm); color: var(--color-text-secondary); }
  .megamenu__aside strong { display: block; font-size: var(--text-md); color: var(--color-text); }
}

/* --- mobile drawer -------------------------------------------------------- */
.topbar__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--control-height-md);
  height: var(--control-height-md);
  margin-left: auto;
  border: var(--border-thin) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-brand);
}
.topbar__toggle:hover { border-color: var(--color-brand); background: var(--color-brand-soft); }
.topbar__toggle .icon { width: 22px; height: 22px; }
.topbar__toggle-icon--close { display: none; }
.topbar__toggle[aria-expanded="true"] .topbar__toggle-icon--menu { display: none; }
.topbar__toggle[aria-expanded="true"] .topbar__toggle-icon--close { display: inline-flex; }

@media (max-width: 1080px) {
  .topbar__toggle { display: inline-flex; }
  .topbar__actions .btn {
    min-height: var(--control-height-sm);
    padding-inline: var(--space-4);
    font-size: var(--text-sm);
  }

  .topbar__panel {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: var(--site-header-h);
    right: 0;
    bottom: 0;
    z-index: var(--z-overlay);
    width: min(23rem, 100%);
    padding: var(--space-4);
    background: var(--color-surface);
    border-left: var(--border-thin) solid var(--color-border);
    box-shadow: var(--shadow-lg);
    overflow-y: auto;
    visibility: hidden;
    transform: translateX(102%);
    transition: transform var(--duration-base) var(--ease-standard),
                visibility 0s linear var(--duration-base);
  }
  .topbar__panel.is-open {
    visibility: visible;
    transform: none;
    transition: transform var(--duration-base) var(--ease-standard), visibility 0s;
  }

  .topbar__panel .topbar__nav {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-0);
    margin-left: 0;
  }
  .navitem { display: flex; flex-direction: column; border-bottom: var(--border-thin) solid var(--color-border); }
  .navitem > .megamenu { width: 100%; }
  .navitem__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 52px;
    padding: var(--space-3);
    background: none;
    border: none;
    border-radius: var(--radius-md);
    color: var(--color-text);
    font-family: inherit;
    font-size: var(--text-lg);
    font-weight: var(--font-weight-medium);
    text-align: left;
    text-decoration: none;
  }
  .navitem__trigger .icon { width: 18px; height: 18px; color: var(--color-brand); transition: transform var(--duration-fast) var(--ease-standard); }
  .navitem.is-open > .navitem__trigger .icon { transform: rotate(180deg); }
  .topbar__panel .topbar__link {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding-inline: var(--space-3);
    font-size: var(--text-lg);
    border-radius: var(--radius-md);
  }
  .topbar__panel .topbar__link[aria-current="page"] { background: var(--color-brand-soft); }

  /* In the drawer the submenu slides open like a plain indented list. */
  .megamenu {
    display: grid;
    grid-template-rows: 0fr;
    padding-bottom: 0;
    overflow: hidden;
    visibility: hidden;
    transition: grid-template-rows 250ms ease,
                visibility 0s linear 250ms;
  }
  .navitem.is-open > .megamenu {
    grid-template-rows: 1fr;
    visibility: visible;
    padding-bottom: var(--space-2);
    transition: grid-template-rows 250ms ease,
                visibility 0s;
  }
  .megamenu__inner, .megamenu__inner--2, .megamenu__inner--3 { display: block; min-height: 0; overflow: hidden; }
  .megamenu h3 {
    padding: var(--space-3) var(--space-3) var(--space-1);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-semibold);
  }
  .megamenu h3:first-child { padding-top: var(--space-1); }
  .megamenu ul { display: block; list-style: none; margin: 0 0 var(--space-2); padding: 0 0 0 var(--space-3); }
  .megamenu a {
    display: block;
    min-height: var(--tap-target-min);
    padding: var(--space-3);
    color: var(--color-text-secondary);
    text-decoration: none;
    border-radius: var(--radius-sm);
  }
  .megamenu a:hover { background: var(--color-surface-subtle); color: var(--color-text); }
  .megamenu a.btn, .megamenu a.btn:hover { color: var(--color-action-text); background: var(--color-action); }
  .megamenu__aside { display: none; }

  .topbar__signin {
    display: flex;
    align-items: center;
    min-height: 52px;
    margin-top: var(--space-2);
    padding-inline: var(--space-3);
    font-size: var(--text-lg);
    color: var(--color-text);
    text-decoration: none;
  }

  .topbar__scrim {
    display: block;
    position: fixed;
    inset: var(--site-header-h) 0 0 0;
    z-index: var(--z-dropdown);
    background: rgba(12, 15, 22, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-base) var(--ease-standard);
  }
  .topbar__scrim.is-open { opacity: 1; pointer-events: auto; }
}
@media (min-width: 1081px) {
  .topbar__signin {
    margin-left: var(--space-2);
    padding-left: var(--space-4);
    border-left: var(--border-thin) solid var(--color-border);
    border-radius: 0;
  }
}
.topbar__scrim { display: none; }

/* ---------------------------------------------------------------------------
   17  FOOTER
   Light, six columns, a brand row and a utility bar. The link map is the
   safety net; every column heading matches the header.
   --------------------------------------------------------------------------- */
[data-site-footer] {
  background: var(--color-surface);
  border-top: var(--border-thick) solid var(--color-brand);
}
[data-site-footer] > .container { padding-block: var(--space-12) var(--space-8); }
[data-site-footer] .divider { display: none; }

[data-site-footer] .site-footer__brand {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-6);
  padding-bottom: var(--space-8);
  margin-bottom: var(--space-8);
  border-bottom: var(--border-thin) solid var(--color-border);
}
[data-site-footer] .site-footer__brand img { width: 130px; }
[data-site-footer] .site-footer__line {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  max-width: 44ch;
}
[data-site-footer] .site-footer__pitch { display: flex; flex-direction: column; gap: var(--space-4); }
[data-site-footer] .site-footer__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

[data-site-footer] nav[aria-label="Footer"] {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-6) var(--space-5);
}
@media (max-width: 1080px) {
  [data-site-footer] nav[aria-label="Footer"] { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8) var(--space-5); }
}
@media (max-width: 560px) {
  [data-site-footer] nav[aria-label="Footer"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

[data-site-footer] nav[aria-label="Footer"] h2 {
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-2);
}
[data-site-footer] nav[aria-label="Footer"] ul { gap: 0; }
[data-site-footer] nav[aria-label="Footer"] a {
  display: flex;
  align-items: center;
  min-height: var(--tap-target-min);
  color: var(--color-text-secondary);
  text-decoration: none;
  font-size: var(--text-base);
}
[data-site-footer] nav[aria-label="Footer"] a:hover { color: var(--color-link-hover); text-decoration: underline; }
[data-site-footer] nav[aria-label="Footer"] a[aria-current="page"] { color: var(--color-brand); font-weight: var(--font-weight-semibold); }

[data-site-footer] .site-footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: var(--border-thin) solid var(--color-border);
}
[data-site-footer] .site-footer__bar a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-target-min);
  color: var(--color-text-secondary);
  text-decoration: none;
  font-size: var(--text-sm);
}
[data-site-footer] .site-footer__bar a:hover { color: var(--color-link-hover); text-decoration: underline; }
[data-site-footer] .site-footer__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
[data-site-footer] .site-footer__meta p { font-size: var(--text-sm); color: var(--color-text-secondary); }

/* ---------------------------------------------------------------------------
   18  SCROLL UTILITIES
   --------------------------------------------------------------------------- */
.to-top {
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: var(--z-sticky);
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--tap-target-min);
  height: var(--tap-target-min);
  border: var(--border-thin) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-brand);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              background-color var(--duration-fast) var(--ease-standard);
}
.to-top.is-visible { display: inline-flex; opacity: 1; }
.to-top:hover { border-color: var(--color-brand); background: var(--color-brand-soft); }
.to-top .icon { width: 20px; height: 20px; }

/* ---------------------------------------------------------------------------
   19  FOCUS CORRECTIONS
   The design system's focus ring is a mid-navy and falls under 3:1 on a navy
   surface (escalations.md #1). Until the system carries an inverse token, the
   site layer gives every control on a brand surface a light ring plus an
   offset, which keeps the ring visible on both navy and white.
   --------------------------------------------------------------------------- */
.panel--brand :focus-visible,
.topbar :focus-visible,
.to-top:focus-visible {
  outline-color: var(--color-brand-surface-text);
  outline-offset: 3px;
}

/* A skipped-to heading must not look broken. */
:target { scroll-margin-top: calc(var(--site-header-h) + var(--space-6)); }

/* ---------------------------------------------------------------------------
   20  MOTION
   Sections rise 12px into place once, when they first enter the viewport. The
   script adds .js to <html>; without it everything is already visible.
   --------------------------------------------------------------------------- */
.js main > section.section > .container {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--duration-slow) var(--ease-decelerate),
              transform var(--duration-slow) var(--ease-decelerate);
}
.js main > section.section.is-in > .container { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js main > section.section > .container { opacity: 1; transform: none; transition: none; }
  .to-top { transition: none; }
  .btn--arrow:hover .icon,
  .link-arrow:hover .icon { transform: none; }
}

/* ---------------------------------------------------------------------------
   21  PRINT
   --------------------------------------------------------------------------- */
@media print {
  .topbar, [data-site-footer], .to-top, .topbar__scrim { display: none !important; }
  main > section.section { border: none !important; background: #fff !important; padding-block: var(--space-6) !important; }
  main > section.section:first-of-type > .container:first-child { box-shadow: none !important; border: 1px solid #999 !important; }
  main > section.section:has(> .container > .panel--brand) { background: #fff !important; }
  .panel--brand { background: #fff !important; color: #000 !important; border: 1px solid #999 !important; }
  .panel--brand h1, .panel--brand h2, .panel--brand h3, .panel--brand p { color: #000 !important; }
}