/* =============================================================================
   QuadQuote website: the stylesheet, second part.

   site.css holds the first part (fonts, tokens, base, the shared components,
   the nav and the hero); this file goes on from there, top to bottom: the page
   sections after the hero, the small pages, then the responsive steps and
   motion. It is one stylesheet in two files, kept under 1,000 lines each, so
   every page links site.css FIRST and this file straight after it: the rules
   here use site.css's tokens, and the responsive steps must come after every
   rule they override. Read site.css's header first.
   ============================================================================= */

/* =============================================================================
   INTRO: the panels that ride up over the hero's foot.
   DePoly's layout exactly: a left column (52%) stacking two panels, and a
   right column holding one tall list panel, all pulled up by --overlap.
   ============================================================================= */
.intro {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 52fr) minmax(0, 48fr);
  gap: var(--gap);
  margin-top: calc(-1 * var(--overlap));
}
.intro__stack { display: grid; gap: var(--gap); align-content: start; }

/* "Our solution": a product screen with a statement card overlapping its
   lower-left corner, the way DePoly lays a text panel over its tanks. */
.solution__figure { padding: var(--pad) var(--pad) 0; }
.solution__card {
  position: relative;
  width: min(92%, 660px);
  margin-top: calc(-1 * clamp(40px, 7vw, 130px));
  padding: var(--pad);
  background: var(--steel);
}
.solution__card > * + * { margin-top: 18px; }

/* "Why QuadQuote": DePoly's Latest News panel, holding four undated reasons
   to buy (until 26 Sep 2026 it held a dated "What's new" list; competitors put
   one-line reasons here, and dated news goes stale). Four, because three short
   cards left the panel ~250px shorter than the stacked panels beside it on a
   wide screen. A card may still carry a .tag line above its title; the current
   ones don't. */
.news__list {
  list-style: none;
  display: grid; gap: clamp(12px, 1.4vw, 22px);
  padding: var(--pad);
}
.news-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px 22px;
  padding: clamp(20px, 2vw, 30px);
  background: var(--paper);
}
.news-card__title {
  margin-top: 8px;
  font: 500 clamp(20px, 1.6vw, 26px)/1.15 var(--sans);
  letter-spacing: -.005em;
}
.news-card__text { margin-top: 10px; font-size: 16.5px; line-height: 1.5; color: var(--dim); }
.news-card .link-caps { margin-top: 12px; }
.news-card__art {
  display: grid; place-items: center;
  width: clamp(64px, 6.4vw, 108px); aspect-ratio: 1;
  background: var(--sky);
}
.news-card__art .icon { width: 46%; height: 46%; stroke-width: 1.3; }


/* =============================================================================
   SHOWCASE: the big picture.
   Where DePoly puts its full-width photograph, we put the Nest step on the
   hero's bed (the same dark ground and grid, from the shared bed rule), with
   its caption below.
   ============================================================================= */
.showcase { margin-top: var(--gap); }
.showcase__ground {
  padding: clamp(18px, 4.5vw, 80px) clamp(14px, 5vw, 96px);
}
.showcase__ground .screen { border-color: rgb(255 255 255 / 12%); box-shadow: 0 40px 80px -30px rgb(0 0 0 / 70%); }
.showcase__caption {
  display: grid;
  grid-template-columns: minmax(0, 52fr) minmax(0, 48fr);
  gap: var(--gap);
  align-items: start;
  padding: var(--pad);
  background: var(--paper);
  border-bottom: var(--rule);
}


/* =============================================================================
   SPLIT: a picture beside a statement panel (DePoly's "Who is DePoly" row).
   ============================================================================= */
.split {
  display: grid;
  grid-template-columns: minmax(0, 48fr) minmax(0, 52fr);
  gap: var(--gap);
  margin-top: var(--gap);
}
.split__media {
  display: grid; place-items: center;
  padding: clamp(20px, 3.2vw, 56px);
  background: var(--sky);
}
.split__media--mint { background: var(--mint); }


/* =============================================================================
   HOW IT WORKS: the app's own stage bar, then one card per stage.
   ============================================================================= */
.section { margin-top: var(--gap); }

/* A drawing of the app's top-bar stage bar (src/shell.js), not a screenshot of
   it: Main, then four numbered stages; done ones filled green with a tick, the
   current one in the accent blue, joined by short rules. */
.stagebar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 0;
  list-style: none;
  padding: 16px clamp(16px, 2vw, 28px);
  background: var(--paper);
  border: 1px solid rgb(22 32 43 / 14%);
  width: fit-content; max-width: 100%;
}
.stage {
  display: flex; align-items: center; gap: 10px;
  font: 600 15px/1 var(--sans);
  color: var(--dim);
  white-space: nowrap;
}
.stage + .stage::before {
  content: ""; width: clamp(14px, 2.4vw, 40px); height: 2px; margin-inline: 12px 2px;
  background: var(--alloy);
}
.stage--done + .stage::before { background: var(--go-deep); }
.stage__num {
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid var(--alloy);
  font: 700 13px/1 var(--mono);
  color: var(--dim);
  background: #fff;
}
.stage__num .icon { width: 18px; height: 18px; }
.stage--done { color: var(--ink); }
/* The app fills done stages with its bright green; on a white web page that
   green is too faint for a white tick (about 2.4:1), so the site uses the app's
   deeper --ok green, which carries the tick at about 4:1. */
.stage--done .stage__num { background: var(--go-deep); border-color: var(--go-deep); color: #fff; }
/* The tick replaces the number once a stage is done, as in the app. */
.stage--done .stage__num span { display: none; }
.stage--done .stage__num::before {
  content: ""; width: 15px; height: 15px; background: #fff;
  -webkit-mask: var(--glyph-tick) center / contain no-repeat;
  mask: var(--glyph-tick) center / contain no-repeat;
}
.stage--now { color: var(--blue); }
.stage--now .stage__num { border-color: var(--blue); color: var(--blue); }

.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 22px);
  list-style: none;
}
/* DePoly's job card: a pale card, a big bold title, and a footer split into two
   cells by 2px rules. */
.step-card {
  display: flex; flex-direction: column;
  background: var(--bg);
}
.step-card__body { flex: 1; padding: clamp(20px, 2vw, 30px); }
.step-card__no { font: 500 13px/1 var(--mono); letter-spacing: .1em; color: var(--dim); }
.step-card__title {
  margin-top: 14px;
  font: 700 clamp(26px, 2.3vw, 38px)/1 var(--sans);
  letter-spacing: -.01em;
}
.step-card__text { margin-top: 14px; font-size: 16.5px; line-height: 1.5; color: var(--dim); }
.card-foot {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  border-top: var(--rule);
}
/* A fixed floor height, so a tag that wraps to two lines on one card does not
   lift that card's footer rule above its neighbours' (DePoly's rules line up). */
.card-foot > * { min-height: 64px; padding: 15px clamp(16px, 1.6vw, 22px); display: flex; align-items: center; }
.card-foot > * + * { border-left: var(--rule); }
.card-foot .tag { color: var(--ink); }


/* =============================================================================
   FEATURES: a ruled bento grid.
   The rules are the grid's 1px gaps showing the ink background through, so
   they stay continuous across cells that span two columns or rows. The grid is
   always filled exactly (4 columns: 3 figures of 2x2 + 4 cells = 4 rows, in the
   DOM order index.html's FEATURES note gives), or the ink would show through
   an empty slot as a black block.
   ============================================================================= */
.bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: 1px;
  background: var(--ink);
  border-top: var(--rule);
}
.bento > * { background: var(--paper); padding: clamp(20px, 2vw, 32px); }
.bento__cell h3 { margin-top: 20px; font: 700 clamp(19px, 1.35vw, 22px)/1.2 var(--sans); }
.bento__cell p { margin-top: 8px; font-size: 16px; line-height: 1.5; color: var(--dim); }
.bento__fig {
  grid-column: span 2; grid-row: span 2;
  display: flex; flex-direction: column; justify-content: space-between; gap: 22px;
  background: var(--sky);
}
.bento__fig--mint { background: var(--mint); }
.bento__fig--steel { background: var(--steel); }
.bento__fig h3 { font: 700 clamp(20px, 1.5vw, 24px)/1.2 var(--sans); }
.bento__fig p { margin-top: 8px; font-size: 16px; color: var(--dim); max-width: 60ch; }


/* =============================================================================
   LICENSING: three cards on the alloy panel (DePoly's "We are hiring" cards,
   turned into licence levels), then the facts that hold for every licence.
   ============================================================================= */
.plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 22px);
  padding: 0 var(--pad) var(--pad);
  list-style: none;
}
.plan {
  display: flex; flex-direction: column;
  background: var(--bg);
}
.plan--featured { background: var(--paper); box-shadow: inset 0 0 0 3px var(--ink); }
/* Side by side, the three cards share their rows (top, ticks, footer) through
   subgrid, so the rule under each card's top and the rule over each footer sit
   level across all three, even when one card's name wraps to two lines. */
@supports (grid-template-rows: subgrid) {
  .plans { row-gap: 0; }
  .plan { display: grid; grid-row: span 3; grid-template-rows: subgrid; }
}
.plan__top { padding: clamp(20px, 2vw, 30px); border-bottom: var(--rule); }
.plan__tier { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.plan__name {
  margin-top: 14px;
  font: 700 clamp(28px, 2.4vw, 40px)/1 var(--sans);
  letter-spacing: -.012em;
}
.plan__pitch { margin-top: 12px; font-size: 17.5px; line-height: 1.45; color: var(--dim); }
.ticks {
  flex: 1;
  display: grid; align-content: start; gap: 12px;
  list-style: none;
  padding: clamp(20px, 2vw, 30px);
  font-size: 16.5px; line-height: 1.4;
}
.ticks li { position: relative; padding-left: 30px; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .12em;
  width: 18px; height: 18px;
  background: var(--go-deep);        /* 3:1 or better against the pale cards */
  -webkit-mask: var(--glyph-tick) center / contain no-repeat;
  mask: var(--glyph-tick) center / contain no-repeat;
}
.ticks li.is-soon { color: var(--dim); }
.ticks li.is-soon::before { background: var(--dimmer); }
.ticks .chip { margin-left: 6px; vertical-align: 1px; }
/* The price cell. Prices are not published yet, so it holds "Contact sales for
   pricing"; putting a figure in is a one-line change (see website/README.md). */
.plan__price { flex-direction: column; align-items: flex-start !important; justify-content: center; gap: 4px; }
.plan__amount { font: 600 16px/1.25 var(--sans); }
.plan__amount--figure { font: 700 26px/1 var(--mono); }
.plan__basis { font: 500 12px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }

/* A ruled list of facts beside a statement panel. Since 12 Oct 2026 the
   .licence-row and .facts rules carry the "Built to stay up" row; they were
   first the "Every licence" row, which left the page on 26 Sep 2026 with the
   Materials Management tile (.offer, still unused, kept in case it returns). */
.facts { list-style: none; }
.facts li {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px;
  align-items: start;
  padding: 18px var(--pad);
  border-top: 1px solid rgb(22 32 43 / 22%);
}
.facts li:first-child { border-top: 0; }
.facts strong { display: block; font-weight: 700; font-size: 18px; line-height: 1.3; }
/* Only the description under each heading. Scoped to the text column (li > div)
   because the icon's box is a <span> too, and a bare ".facts span" used to catch
   it, turning off the box's centring and leaving every icon sitting high. */
.facts li > div > span { display: block; margin-top: 4px; font-size: 16px; line-height: 1.45; color: var(--dim); }
/* The icon sits bare on the panel, level with the heading's line (18px text on
   a 1.3 line is about 23px tall, so a 26px icon is nudged up to share its
   middle), rather than in a white tile that made a second box beside the text. */
.facts .icon-tile { width: 26px; height: 26px; margin-top: -1px; background: none; }
.facts .icon-tile .icon { width: 26px; height: 26px; }

.licence-row {
  display: grid;
  grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
  gap: var(--gap);
  margin-top: var(--gap);
}
/* The offering tile: the order book on mint, with a statement card overlapping
   its foot (DePoly's "Wherever you are in the supply chain" tile). */
.offer { position: relative; display: flex; flex-direction: column; }
.offer__figure { padding: var(--pad) var(--pad) 0; }
.offer__card {
  position: relative;
  width: min(86%, 620px);
  margin-top: calc(-1 * clamp(40px, 6vw, 110px));
  padding: var(--pad);
  background: var(--steel);
}
.offer__card > * + * { margin-top: 16px; }


/* =============================================================================
   FAQ: the statement on the left, the questions on the right, each question a
   <details> so it opens with no JavaScript and is a real button to a keyboard.
   ============================================================================= */
.faq {
  display: grid;
  grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
}
.faq__intro { border-right: var(--rule); }
.faq__list { border-top: 0; }
.qa { border-bottom: var(--rule); }
.qa:last-child { border-bottom: 0; }
.qa summary {
  list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: clamp(18px, 1.8vw, 26px) var(--pad);
  cursor: pointer;
  font: 500 clamp(19px, 1.5vw, 23px)/1.25 var(--sans);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: ""; width: 18px; height: 18px; flex: none;
  background: var(--ink);
  -webkit-mask: var(--glyph-plus) center / contain no-repeat;
  mask: var(--glyph-plus) center / contain no-repeat;
}
.qa[open] summary::after {
  -webkit-mask-image: var(--glyph-minus);
  mask-image: var(--glyph-minus);
}
.qa summary:hover { background: rgb(255 255 255 / 35%); }
.qa__a { padding: 0 var(--pad) clamp(20px, 2vw, 28px); max-width: 72ch; color: var(--dim); font-size: 17px; }
.qa__a p + p { margin-top: 10px; }


/* =============================================================================
   CONTACT: DePoly's newsletter band, turned into "tell us about your shop".
   A plain mailto form: it opens the visitor's own email program, so nothing is
   sent from, or stored by, this website.
   ============================================================================= */
.contact {
  display: grid;
  grid-template-columns: minmax(0, 30fr) minmax(0, 70fr);
  gap: var(--gap);
  padding: clamp(28px, 4vw, 64px) var(--pad);
  background: var(--mint);
  border-bottom: var(--rule);
}
.contact__title {
  font: 600 clamp(28px, 2.6vw, 42px)/1.1 var(--sans);
  letter-spacing: -.012em;
  max-width: 24ch;
}
.contact__sub { margin-top: 16px; font-size: 18px; color: var(--dim); max-width: 64ch; }
.contact__sub a { color: var(--ink); font-weight: 600; }
.copy-btn {
  margin-left: 6px;
  padding: 6px 10px;
  border: 2px solid var(--ink); border-radius: var(--radius);
  background: transparent; color: var(--ink);
  font: 700 12px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer; vertical-align: 2px;
}
.copy-btn:hover { background: var(--ink); color: #fff; }
.copy-status { margin-left: 8px; font-size: 15px; color: var(--total); font-weight: 600; }

.form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 28px;
  max-width: 880px;
}
.field { display: grid; gap: 6px; }
.field--wide { grid-column: 1 / -1; }
.field label {
  font: 600 12.5px/1.2 var(--mono);
  letter-spacing: .08em; text-transform: uppercase;
}
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 58px;
  padding: 14px 14px;
  border: 2px solid var(--ink);
  border-radius: 0;
  background: var(--paper);
  font-size: 17px;
  line-height: 1.3;
}
.field textarea { min-height: 128px; resize: vertical; }
.field select {
  appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 44px;
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline-offset: 0; }
.form__actions {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px;
  margin-top: 6px;
}
.form__note { font-size: 15px; color: var(--dim); max-width: 46ch; }


/* =============================================================================
   FOOTER: DePoly's ruled grid, full bleed, then the copyright line.
   ============================================================================= */
.site-footer { background: var(--mint); }
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(0, 1fr));
  max-width: var(--max); margin-inline: auto;
}
.footer-cell {
  padding: clamp(28px, 3.2vw, 50px) clamp(20px, 3.2vw, 50px);
  border-right: var(--hair);
}
.footer-cell:last-child { border-right: 0; }
.footer-cell img { width: clamp(150px, 12vw, 200px); }
.footer-cell p { margin-top: 18px; font-size: 16.5px; line-height: 1.5; color: var(--dim); }
/* Two classes deep so it outranks ".footer-cell p" (these heads are <p>s). */
.footer-cell .footer-head {
  display: block;
  margin: 0 0 18px;
  font: 800 16px/1 var(--sans); letter-spacing: .03em; text-transform: uppercase;
  color: var(--ink);
}
.footer-links { list-style: none; display: grid; gap: 10px; }
.footer-links a { text-decoration: none; font-size: 17px; }
.footer-links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer-cell--cta { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 28px;
  max-width: var(--max); margin-inline: auto;
  padding: 20px clamp(20px, 3.2vw, 50px);
  font-size: 15px;
}
.footer-bottom-wrap { border-top: var(--hair); }
.footer-bottom nav { display: flex; gap: 28px; }
.footer-bottom a { text-decoration: none; }
.footer-bottom a:hover { text-decoration: underline; text-underline-offset: 4px; }


/* =============================================================================
   SMALL PAGES (404, privacy): the hero's bed as a head, then one panel.
   ============================================================================= */
.page-head {
  position: relative; isolation: isolate; overflow: hidden;
  color: #fff;               /* its background is the shared bed rule */
  padding:
    calc(var(--nav-top) + var(--nav-h) + clamp(40px, 8vh, 110px))
    var(--gutter)
    calc(var(--overlap) * .55 + clamp(40px, 6vh, 80px));
}
.page-head__inner { max-width: var(--max); margin-inline: auto; }
.page-head h1 {
  margin-top: 18px;
  font-weight: 500; font-size: clamp(40px, 5.2vw, 84px); line-height: 1; letter-spacing: -.025em;
  max-width: 16ch;
}
/* A short page (body.page--short) is often less tall than the window; the page
   grows its main part so the footer always sits on the window's bottom edge,
   not part-way up with bare page colour showing beneath it. (The skip link and
   nav bar are fixed, so they stay out of this column.) */
.page--short { display: flex; flex-direction: column; min-height: 100svh; }
.page--short > main { flex: 1 0 auto; }
.page-body { margin-top: calc(-1 * var(--overlap) * .55); position: relative; z-index: 2; }
.page-body .panel { max-width: 1100px; }
.prose { font-size: 18px; line-height: 1.6; max-width: 70ch; }
.prose h2 { font: 700 22px/1.25 var(--sans); margin-top: 34px; }
.prose p, .prose ul { margin-top: 14px; }
.prose ul { padding-left: 1.2em; }
.prose li + li { margin-top: 6px; }


/* =============================================================================
   RESPONSIVE: the steps DePoly's Webflow build uses (991 / 767 / 479).
   ============================================================================= */
@media (max-width: 1279px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 991px) {
  /* Nav folds into the ring menu. */
  .nav__links, .nav__cta { display: none; }
  .nav__menu { display: block; }

  .intro, .split, .licence-row, .faq, .contact, .showcase__caption { grid-template-columns: minmax(0, 1fr); }
  .faq__intro { border-right: 0; border-bottom: var(--rule); }
  /* Stacked, the cards no longer share rows: back to one flex column each, with
     the gap between cards restored. */
  .plans { grid-template-columns: minmax(0, 1fr); row-gap: clamp(12px, 1.4vw, 22px); }
  .plan { display: flex; grid-row: auto; max-width: 720px; }

  /* Two columns: figures take a full row each, cells pair up (still no holes:
     3 figure rows + 4 cells = 5 full rows). */
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento__fig { grid-column: span 2; grid-row: auto; }

  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-cell:nth-child(2) { border-right: 0; }
  .footer-cell:nth-child(-n + 2) { border-bottom: var(--hair); }

  /* Narrow screens: no room beside the words, so the whole hero is the blue
     panel, the words running the full width, and the drawing follows them as
     a full-bleed steel band holding the whole sheet, edge to edge. The pause
     button sits just below the band, on the blue, so it never covers the logo
     wherever the nest puts it. */
  .hero { display: flex; flex-direction: column; min-height: 0; background: var(--blue); padding-bottom: calc(var(--overlap) + 64px); }
  .hero::after { display: none; }
  .hero__bed {
    position: relative; inset: auto;
    margin: clamp(32px, 7vw, 56px) calc(-1 * var(--gutter)) 0;
    padding: clamp(12px, 3vw, 24px) var(--gutter);
    background: var(--steel);
  }
  .hero__bed svg { max-height: none; }
  .hero__pause { position: absolute; right: var(--gutter); top: calc(100% + 12px); margin: 0; padding: 7px 10px; font-size: 11px; }
  .hero__copy { width: 100%; }           /* a flex item with auto margins would shrink */
  .hero__copy > * { max-width: 760px; }
  .hero__copy > .hero__title { max-width: 8em; }
  .hero__copy > .hero__lead { max-width: 44ch; }
}

@media (max-width: 767px) {
  .steps { grid-template-columns: minmax(0, 1fr); }
  .bento { grid-template-columns: minmax(0, 1fr); }
  .bento__fig { grid-column: auto; }
  .news-card { grid-template-columns: minmax(0, 1fr); }
  .news-card__art { display: none; }
  .form { grid-template-columns: minmax(0, 1fr); }
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .footer-cell { border-right: 0; border-bottom: var(--hair); }
  .footer-cell:last-child { border-bottom: 0; }
  .solution__card, .offer__card { width: auto; margin-right: var(--pad); }
  .stage + .stage::before { margin-inline: 8px 0; }
  .stage__label { display: none; }
  .stage--now .stage__label, .stage--home .stage__label { display: inline; }
}

@media (max-width: 479px) {
  .hero__actions .btn { width: 100%; }
  .card-foot { grid-template-columns: minmax(0, 1fr); }
  .card-foot > * + * { border-left: 0; border-top: var(--rule); }
  .qa summary { gap: 14px; }
}


/* =============================================================================
   MOTION
   Panels rise into place as they scroll into view, DePoly-style. Done with
   scroll-driven CSS animation, so there is no script and no flash: where the
   browser lacks animation-timeline the rule is skipped entirely and everything
   is simply there; where the visitor asks for reduced motion, nothing moves.
   ============================================================================= */
@keyframes qq-rise {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    [data-reveal] {
      animation: qq-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Windows High Contrast (forced colours). The browser swaps every colour for the
   visitor's system colours and drops backgrounds, which would erase the glyphs
   drawn as masked backgrounds (arrows, ticks, plus/minus, dots). Give them the
   system text colour and opt them out of the swap so they stay visible. */
@media (forced-colors: active) {
  .link-caps::after, .ticks li::before, .qa summary::after,
  .stage--done .stage__num::before, .dot, .hero__pause::before {
    forced-color-adjust: none;
    background: CanvasText;
  }
  .dot--ring { background: transparent; box-shadow: inset 0 0 0 .22em CanvasText; }
  .panel, .plan, .news-card, .step-card { border: 1px solid CanvasText; }
}

@media print {
  .site-header, .hero__bed, .skip-link, .nav__menu { display: none !important; }
  .hero { min-height: 0; background: #fff; color: var(--ink); padding: 24px 0; }
  .hero::after { display: none; }
  .intro { margin-top: 0; }
}