/* The tool's own pages: landing, progress, scanner info, failed scan, errors. Loaded after
   report.css, which holds the tokens, type and components; this adds the top bar and
   footer, the landing page, the form and the page layouts. Same rules: flat, nothing under
   13 px, Asphalt Gray never text, no decorative shapes, the logo only from its file. Every
   page takes the redesigned report page's identity (D121 for the landing, D123 for the
   rest): 4 px controls and cards on square brand surfaces, Skyward hairlines instead of
   ink rules, Regular serif headings with Light kept for big numerals, and its glass top
   bar. These are the report's tokens (report-ui/src/index.css) that report.css doesn't
   have. */
.site {
  --graphite: #5a5d63;
  --mist: #f7f8fa;
  --radius-control: 4px;
  --ease-momentum: cubic-bezier(0.16, 1, 0.3, 1);
  --chrome: rgb(255 255 255 / 0.62);
  --chrome-blur: 24px;
}
@media (prefers-reduced-transparency: reduce) { .site { --chrome: #f7f8fa; --chrome-blur: 0px; } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .site { --chrome: #f7f8fa; } }

.hero .lede-light { margin-top: var(--s4); max-width: 65ch; font-size: 19px; }
.hero .lede-light + .lede-light { margin-top: var(--s2); font-size: 17px; }
h2 { font-size: 32px; font-weight: 400; }
.page-title { font-size: 48px; font-weight: 400; letter-spacing: -0.02em; }
.more { margin-top: var(--s5); }

/* Panels, buttons, links and notes on every tool page (D123): white and Skyward panels
   with no ink rules between them, the report's buttons (4 px, a press) and bold underlined
   links, Graphite notes. */
.site section + section:not(.tint):not(.flags):not(.scorecard) { border-top: 0; }
.site main section > .wrap > h2 + p, .page-title + p { margin-top: var(--s3); }
.site .btn { border-radius: var(--radius-control); padding: 12px 20px; }
.site .btn:active { transform: translateY(1px); }
.site .more a:not(.btn) { font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.site .more a:not(.btn):hover { color: var(--ink); }
.site .note { color: var(--graphite); }

/* The scanner, progress and failed pages' hero (_hero.html.j2): a flat blue field under the
   top bar, a Regular serif headline and a Skyward second line. The padding clears the bar. */
.page-hero .wrap { padding-top: calc(88px + var(--s7)); padding-bottom: var(--s8); }
.page-hero h1 { font-weight: 400; letter-spacing: -0.02em; }
.page-hero .lede-light + .lede-light { color: var(--skyward); }

/* Cards and evidence: white 4 px cards with a Skyward hairline that disappears on a
   Skyward panel (B181), Skyward pills, screenshots as square brand surfaces with Graphite
   captions, and Skyward code blocks. */
.site .card { border-color: var(--skyward); border-radius: var(--radius-control); }
.site .card .kind { color: var(--graphite); letter-spacing: 0.14em; }
.site .tag-quiet { background: var(--skyward); color: var(--ink); border-color: var(--skyward); }
.site .shot img { border-color: var(--skyward); }
.site .shot figcaption { color: var(--graphite); font-weight: 400; }
.site .shot .missing { border-color: var(--skyward); background: var(--white); color: var(--graphite); }
.site .code-block { border-radius: var(--radius-control); }

/* Top bar: the report page's chrome, with the H/L logo from its file, the tool's name and
   a few links. On its own (the error page) it's sticky frosted glass with the blue logo,
   solid Mist for readers who ask for less transparency. On a page that opens on a blue
   field it's part of the field, white logo first: chrome.js fixes it to the window and
   turns it to glass between the blue fields, and without the script it sits on the hero's
   blue. :where() keeps that test's weight low, so the script's states win. */
.site .topbar {
  background: var(--chrome);
  -webkit-backdrop-filter: blur(var(--chrome-blur)) saturate(1.6);
  backdrop-filter: blur(var(--chrome-blur)) saturate(1.6);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.55), inset 0 -1px 0 rgb(28 28 28 / 0.08);
  border-bottom: 0;
}
.site .topbar-inner { flex-wrap: wrap; row-gap: 0; min-height: 64px; padding-top: var(--s3); padding-bottom: var(--s3); }
.site .topbar .brand { letter-spacing: 0.01em; }
.site .topbar .brand, .site .topbar nav a { color: var(--ink); }
.site .topbar .brand .logo { height: 32px; }
.site .topbar .brand .logo:first-child { display: none; }
.site .topbar nav { display: block; }
.site .topbar nav ul { align-items: center; gap: var(--s2); }
.site .topbar nav a { font-size: 15px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.site .topbar nav a:hover { background: transparent; text-decoration: underline; }
.site:where(:has(> main > [data-field="blue"]:first-child)) .topbar {
  position: absolute; left: 0; right: 0; background: transparent; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.site:where(:has(> main > [data-field="blue"]:first-child)) .topbar-inner { min-height: 88px; }
.site:where(:has(> main > [data-field="blue"]:first-child)) .topbar .brand,
.site:where(:has(> main > [data-field="blue"]:first-child)) .topbar nav a { color: var(--white); }
.site:where(:has(> main > [data-field="blue"]:first-child)) .topbar .brand .logo:first-child { display: block; }
.site:where(:has(> main > [data-field="blue"]:first-child)) .topbar .brand .logo + .logo { display: none; }
.site:where(:has(> main > [data-field="blue"]:first-child)) .topbar a:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
.site .topbar.is-fixed { position: fixed; top: 0; background: var(--blue); }
.site .topbar.is-fixed .topbar-inner { min-height: 72px; }
.site .topbar.is-glass {
  background: var(--chrome);
  -webkit-backdrop-filter: blur(var(--chrome-blur)) saturate(1.6);
  backdrop-filter: blur(var(--chrome-blur)) saturate(1.6);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.55), inset 0 -1px 0 rgb(28 28 28 / 0.08);
}
.site .topbar.is-glass .topbar-inner { min-height: 64px; }
.site .topbar.is-glass .brand, .site .topbar.is-glass nav a { color: var(--ink); }
.site .topbar.is-glass .brand .logo:first-child { display: none; }
.site .topbar.is-glass .brand .logo + .logo { display: block; }
.site .topbar.is-glass a:focus-visible { outline-color: var(--blue); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Footer: Mass Black, the white logo, links and contact, in the report page's type:
   Skyward Blue lines under the logo. */
footer.site-footer { padding: var(--s8) 0 var(--s7); }
footer.site-footer .wrap { display: grid; grid-template-columns: 2fr 1fr 1.5fr; gap: var(--s6) var(--s7); align-items: start; }
.footer-logo { display: inline-block; }
.footer-logo .logo { height: 40px; width: auto; }
.footer-brand p { margin-top: var(--s5); max-width: 44ch; }
footer.site-footer .footer-brand p, footer.site-footer .footer-contact p { color: var(--skyward); font-size: 15px; }
.footer-nav ul { list-style: none; padding: 0; }
.footer-nav li + li { margin-top: var(--s3); }
footer.site-footer .footer-nav a { font-weight: 700; font-size: 15px; text-decoration: none; }
footer.site-footer .footer-nav a:hover { text-decoration: underline; }
.footer-label { font-weight: 700; font-size: 13px !important; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: var(--s3); }
footer.site-footer a { color: var(--white); text-decoration: underline; }
footer.site-footer a:focus-visible { outline-color: var(--white); }

/* Form parts */
.check input:focus-visible {
  outline: 2px solid var(--blue); outline-offset: 2px; }
.check { display: flex; gap: var(--s3); align-items: flex-start; }
.check input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; }
.check label { font-size: 15px; }
.form-errors { padding: var(--s4) var(--s5); }
.form-errors h3 { font-family: var(--sans); font-weight: 700; font-size: 17px; letter-spacing: 0; }
.form-errors ul { margin-top: var(--s2); padding-left: 1.2em; }

/* Steps and lists used by the inner pages */
.plain-list { margin-top: var(--s4); padding-left: 1.2em; max-width: 65ch; }
.plain-list li + li { margin-top: var(--s3); }

/* ------------------------------------------------------------------ landing page */

/* The landing page in the report page's identity (D121, from D111): the same flat blue
   (D94), the report's status marks and buttons, and its momentum curves. */
.landing section { padding: var(--s9) 0; scroll-margin-top: 72px; }
.landing h2 { font-size: 44px; font-weight: 400; line-height: 1.1; }
.landing h3 { letter-spacing: -0.005em; }
.lp-head { max-width: 760px; margin-bottom: var(--s7); }
.lp-head h2 { margin-top: var(--s3); }
.lp-head-lede { margin-top: var(--s4); font-size: 19px; max-width: 58ch; }
.landing ul, .landing ol { list-style: none; padding: 0; margin: 0; }

.lp-for button:focus-visible, .landing .btn-light:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }

/* Hero (D94): flat Momentum Blue, the question, then the form in two steps (hero.js).
   Without the script both steps show at once. */
.lp-hero.hero { padding: 0; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; }
.lp-hero-inner { width: 100%; max-width: 1180px; margin: 0 auto; padding: 136px var(--s8) 112px; text-align: center; }
.lp-hero .lp-headline { margin: 0; font-size: clamp(42px, 6.6vw, 100px); font-weight: 400; line-height: 1.04; letter-spacing: -0.03em; overflow-wrap: normal; }
.lp-hero .lp-h-step { font-size: clamp(34px, 5.2vw, 78px); max-width: 17ch; margin: 0 auto; }
/* The rotating word: a white block whose width follows the word. All three words are in
   the HTML; without the script only the first shows. */
.rot { display: inline-block; background: var(--white); color: var(--blue); padding: 0 0.14em; }
.rot-w:not(.is-in) { display: none; }
.is-stepped .rot { position: relative; overflow: hidden; vertical-align: top; height: 1.08em; margin-top: 0.01em; box-sizing: content-box; }
.is-stepped .rot-w { display: block; position: absolute; left: 0.14em; top: -0.03em; white-space: nowrap; transform: translateY(105%); }
.is-stepped .rot-w.is-in { transform: none; }
.is-stepped .rot-w.leave { transform: translateY(-105%); opacity: 0; }
.is-stepped .rot-w.reset { transition: none !important; }

.lp-hero [hidden], .lp-hero.is-stepped[data-step="1"] [data-show="2"], .lp-hero.is-stepped[data-step="2"] [data-show="1"] { display: none; }
.lp-step { max-width: 980px; margin: var(--s7) auto 0; text-align: left; }
.lp-step[data-show="2"] { margin-top: var(--s5); }
.lp-label, .lp-field label { display: block; font-weight: 700; font-size: 15px; margin-bottom: var(--s2); }
/* Controls are objects, so they round to 4 px; the white word block and the blue fields
   are brand surfaces and stay square. One 2 px solid focus outline: white on the blue,
   Momentum Blue on white. */
.lp-urlbar { display: flex; background: var(--white); min-height: 84px; border-radius: var(--radius-control); }
.lp-urlbar:focus-within { outline: 2px solid var(--white); outline-offset: 3px; }
.lp-urlbar input { flex: 1 1 auto; min-width: 0; border: 0; border-radius: var(--radius-control); outline: 0; background: transparent; color: var(--ink);
  padding: 0 var(--s6); font-family: var(--serif); font-size: 30px; letter-spacing: -0.01em; }
.lp-urlbar .lp-btn { margin: 10px; }
.lp-hero input::placeholder { color: var(--ink); opacity: 0.6; }
/* The report page's buttons: primary is Momentum Blue and turns Mass Black; on the blue
   field it's white and turns Skyward Blue. Words only, no arrows (B147). */
.lp-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s3); min-height: 60px; padding: 0 var(--s6);
  font: inherit; font-weight: 700; font-size: 18px; white-space: nowrap; border: 0; border-radius: var(--radius-control); cursor: pointer; }
.lp-btn:active { transform: translateY(1px); }
.lp-btn-blue { background: var(--blue); color: var(--white); }
.lp-btn-blue:hover { background: var(--ink); }
.lp-btn-white { background: var(--white); color: var(--blue); }
.lp-btn-white:hover { background: var(--skyward); }
.lp-btn:focus-visible, .lp-field input:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
.lp-urlbar .lp-btn:focus-visible { outline-color: var(--blue); }
.lp-btn[aria-disabled="true"] { cursor: progress; }
.lp-err { margin-top: var(--s3); font-size: 15px; font-weight: 700; }
.lp-err:empty { display: none; }
.lp-points { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s3) var(--s6); margin-top: var(--s5) !important; }
.lp-points li { display: flex; align-items: center; gap: var(--s2); font-size: 16px; font-weight: 500; }
/* The report page's status mark: a check on a disc, white on the blue field, blue on white. */
.lp-mark { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 24px; height: 24px; border-radius: 50%;
  background: var(--white); color: var(--blue); }
.lp-mark svg { width: 14px; height: 14px; }
.lp-mark-blue { background: var(--blue); color: var(--white); }
.lp-for { text-align: center; font-size: 17px; margin-bottom: var(--s5); }
.lp-for button { margin-left: var(--s2); padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 500; text-decoration: underline; cursor: pointer; }
.lp-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr) auto; gap: var(--s4); align-items: end; }
.lp-field .optional { font-weight: 400; }
.lp-field input { display: block; width: 100%; height: 60px; padding: 0 18px; border: 0; border-radius: var(--radius-control); background: var(--white); color: var(--ink); font: inherit; font-size: 18px; }
.lp-hero input[aria-invalid="true"] { outline: 3px solid var(--white); outline-offset: 2px; }
.lp-consent { display: grid; gap: var(--s2); margin-top: var(--s5); font-size: 15px; }
.lp-consent .check input { accent-color: var(--white); }
.lp-consent .check input:focus-visible { outline-color: var(--white); }
.lp-hero .form-errors { max-width: 980px; margin: var(--s6) auto 0; background: var(--white); color: var(--ink); border: 0; border-radius: var(--radius-control); text-align: left; }
.landing .form-errors ul { list-style: disc; padding-left: 1.2em; }
.lp-hero .cf-turnstile { display: flex; justify-content: center; margin-top: var(--s4); }
/* The question arrives (D121), as the report's first screen does (D120): from first paint,
   in CSS, the question rises into place without fading (it's the text the first paint is
   measured by), then the step's fields and the three points rise in. A step arrives the
   same way each time it's shown, so changing step needs nothing more, and the script
   starting replays nothing. */
.lp-hero .lp-step { --arrive-delay: 120ms; }
.lp-hero .form-errors { --arrive-delay: 80ms; }
.lp-hero .lp-points { --arrive-delay: 220ms; }
@media screen and (prefers-reduced-motion: no-preference) {
  .lp-hero h1.lp-headline { animation: lp-lift 640ms var(--ease-momentum) backwards; }
  .lp-hero .lp-h-step { animation: lp-arrive 520ms var(--ease-momentum) backwards; }
  .lp-hero .lp-step, .lp-hero .form-errors, .lp-hero .lp-points { animation: lp-arrive 520ms var(--ease-momentum) var(--arrive-delay) backwards; }
  .is-stepped .rot { transition: width 620ms var(--ease-momentum); }
  .is-stepped .rot-w { transition: transform 620ms var(--ease-momentum), opacity 420ms var(--ease); }
  .lp-btn, .landing .btn-light, .site .btn { transition: background-color 120ms var(--ease), color 120ms var(--ease); }
}
@keyframes lp-lift { from { transform: translateY(16px); } }
@keyframes lp-arrive { from { opacity: 0; transform: translateY(12px); } }

/* Why start here (D124): the report's framing on Skyward, between the hero and what we
   check. This audit's step is a white card with the blue tag and the steps after it are
   Graphite: words only, no arrows or connecting lines. */
.lp-first-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s8); align-items: start; }
.lp-first h2 { margin-top: var(--s3); max-width: 15ch; }
.lp-first-text { font-size: 19px; max-width: 58ch; }
.lp-first .lp-order { margin-top: var(--s6); display: grid; gap: var(--s2); }
.lp-order li { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; align-items: baseline; column-gap: var(--s5); padding: var(--s5); border-radius: var(--radius-control); color: var(--graphite); }
.lp-order li.is-here { background: var(--white); color: var(--ink); }
.lp-order-label { font-weight: 700; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; }
.lp-order .is-here .lp-order-label { color: var(--blue); }
.lp-order-text { font-family: var(--serif); font-size: 22px; line-height: 1.3; }
.lp-tag { align-self: center; justify-self: start; display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; background: var(--blue); color: var(--white); font-weight: 700; font-size: 13px; line-height: 1; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.lp-first-after { margin-top: var(--s5); font-size: 15px; color: var(--graphite); max-width: 58ch; }

/* The report's three questions: white 4 px cards with a Skyward hairline, the big Light
   numeral, the report's section name and its question */
.pillar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
.pillar { border: 1px solid var(--skyward); border-radius: var(--radius-control); background: var(--white); padding: var(--s6); min-height: 320px; display: flex; flex-direction: column; }
.pillar-num { font-family: var(--serif); font-weight: 300; font-size: 120px; line-height: 0.9; letter-spacing: -0.03em; color: var(--blue); }
.pillar-name { margin-top: auto; padding-top: var(--s6); font-weight: 700; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue); }
/* Each question keeps room for three lines, so the three section names line up. */
.pillar h3 { margin-top: var(--s2); font-size: 30px; line-height: 1.12; max-width: 19ch; min-height: 3.36em; }
.lp-detail-label { font-weight: 700; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; }

/* About H/L: the guidebook photos beside the copy */
.lp-built-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s8); align-items: center; }
.photo-mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.photo-mosaic img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1 / 1; background: var(--white); }
.photo-mosaic .photo-main { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
.lp-built-copy h2 { margin-top: var(--s3); }
.lp-built-text { margin-top: var(--s4); font-size: 17px; max-width: 52ch; }
.lp-built-text + .lp-built-text { margin-top: var(--s3); }
.lp-contact { margin-top: var(--s6); background: var(--white); padding: var(--s5); border-radius: var(--radius-control); }
.lp-contact .lp-detail-label { margin-bottom: var(--s2); }
.lp-contact a { text-decoration: underline; }
/* How we scan: heading beside three short promises */
.landing .lp-scan { padding: var(--s8) 0; }
.lp-scan-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s8); align-items: start; }
.lp-scan h2 { margin-top: var(--s3); max-width: 16ch; }
.promise-list li { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--s5); padding: var(--s5) 0; border-top: 1px solid var(--skyward); }
.promise-list li:last-child { border-bottom: 1px solid var(--skyward); }
.promise-list h3 { display: flex; align-items: flex-start; gap: var(--s3); font-family: var(--sans); font-weight: 500; font-size: 19px; letter-spacing: 0; }
.promise-list h3 .lp-mark { margin-top: 1px; }
.promise-list p { font-size: 17px; }

/* Closing call to action, like the report page's Talk to H/L: the blue field, a large
   serif line, a Skyward Blue lede and the report's white button on blue */
.landing .lp-closing { background: var(--blue); color: var(--white); padding: var(--s9) 0; }
.lp-closing-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s5) var(--s7); }
.lp-closing h2 { max-width: 22ch; font-size: clamp(36px, 4.2vw, 52px); line-height: 1.08; }
.lp-closing p { margin-top: var(--s3); font-size: 19px; color: var(--skyward); }
.btn-light { display: inline-block; font-weight: 700; font-size: 18px; background: var(--white); color: var(--blue);
  border: 0; border-radius: var(--radius-control); padding: var(--s4) var(--s6); white-space: nowrap; }
.btn-light:hover { background: var(--skyward); color: var(--blue); text-decoration: none; }
.btn-light:active { transform: translateY(1px); }
/* Progress page */
.progress-lines p + p { margin-top: var(--s2); }
.progress-lines .stage { font-size: 23px; font-family: var(--serif); }
.progress-lines .label { font-family: var(--sans); font-weight: 700; font-size: 13px; letter-spacing: 0.1em;
  text-transform: uppercase; margin-right: var(--s2); }
.layer-name { font-family: var(--serif); font-size: 26px; margin: var(--s2) 0 var(--s3); }
.shots.two { grid-template-columns: 1fr 1fr; }

/* Scanner info */
.code-block { font-family: var(--sans); font-weight: 500; font-size: 15px; overflow-wrap: anywhere;
  white-space: pre-wrap; background: var(--skyward); padding: var(--s3) var(--s4); margin: var(--s3) 0; max-width: 80ch; }

@media screen and (max-width: 1100px) {
  .pillar { min-height: 300px; }
  .pillar-num { font-size: 96px; }
  .pillar h3 { font-size: 26px; }
}
@media screen and (max-width: 900px) {
  h2 { font-size: 28px; }
  .page-title { font-size: 36px; }
  .shots.two { grid-template-columns: 1fr; }
  .landing section { padding: var(--s8) 0; }
  .landing h2 { font-size: 34px; }
  .lp-hero-inner { padding: 112px var(--s5) var(--s8); }
  .lp-step { margin-top: var(--s6); }
  .lp-urlbar { flex-direction: column; }
  .lp-urlbar input { min-height: 64px; padding: var(--s4) var(--s5); font-size: 22px; }
  .lp-urlbar .lp-btn { margin: 0 10px 10px; }
  .lp-row { grid-template-columns: minmax(0, 1fr); }
  .lp-row .lp-btn { width: 100%; margin-top: var(--s2); }
  .lp-points { flex-direction: column; width: fit-content; margin-left: auto !important; margin-right: auto !important; }
  .pillar-grid, .lp-built-grid, .lp-scan-grid, .lp-first-grid { grid-template-columns: 1fr; }
  .lp-first-grid { gap: var(--s5); }
  .lp-first h2 { max-width: none; }
  .lp-order li { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--s2); padding: var(--s4) var(--s5); }
  .lp-order-label { grid-column: 1; }
  .lp-order-text { grid-column: 1 / -1; font-size: 20px; }
  .lp-tag { grid-column: 2; grid-row: 1; justify-self: end; }
  .pillar { min-height: 0; flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: var(--s5); padding: var(--s5); }
  .pillar-num { font-size: 72px; }
  .pillar-name { margin-top: 0; padding-top: 0; }
  .pillar h3 { flex-basis: 100%; margin-top: var(--s3); max-width: none; min-height: 0; }
  .lp-built-grid, .lp-scan-grid { gap: var(--s6); }
  footer.site-footer .wrap { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media screen and (max-width: 600px) {
  .promise-list li { grid-template-columns: 1fr; gap: var(--s2); }
  footer.site-footer .wrap { grid-template-columns: 1fr; }
  .site .topbar .brand-name { display: none; }
}