/* =========================================================================
   Cervo — sales page (cervoapp.com.br) · v2, "Folha de comprovação"
   The page is set like the proof-of-delivery report it sells: white paper, a 12-column grid with a
   margin column for running heads, thin rules, and blue as the ink. JetBrains Mono appears only on
   data (coordinates, times, PI numbers, step numbers).

   Brand approval 1: primary #0764B7, primary dark #0D4394, accent #34E1CD only in graphic details
   (never text). Inter, as in the web app. Contrast of every text pair, WCAG 2.1:
     ink #0B1B33           17.23 on paper · 16.18 on paper-2
     ink-2 #43536A          7.82 on paper ·  7.35 on paper-2
     ink-3 #586980          5.60 on paper ·  5.26 on paper-2
     primary #0764B7        5.97 on paper ·  5.61 on paper-2 · 5.19 on tint · 5.33 on #EEF3F9
     primary-dark #0D4394   9.34 on paper ·  8.11 on tint
     white                  5.97 on primary · 9.34 on primary-dark · 16.27 on navy · 17.84 on navy-2
     on-navy-2 #B4C7E2      9.46 on navy  · 10.37 on navy-2
     rule-strong #76869C    3.71 on paper (component borders, 3:1)
   ========================================================================= */

:root {
  /* Paper and ink */
  --paper:        #FFFFFF;
  --paper-2:      #F5F8FC; /* plates behind figures */
  --ink:          #0B1B33;
  --ink-2:        #43536A;
  --ink-3:        #586980;

  /* Brand */
  --primary:      #0764B7;
  --primary-dark: #0D4394;
  --tint:         #E7F0F9;
  --accent:       #34E1CD; /* decorative only */
  --symbol-2:     #037CD0; /* symbol arcs, decorative only */
  --symbol-3:     #01A7EB;

  /* Dark band and footer, derived from the primary dark */
  --navy:         #071F45;
  --navy-2:       #051733;
  --on-navy-2:    #B4C7E2;
  --on-solid:     #FFFFFF; /* text and icons on primary, primary dark and navy */
  --header-dark:  rgba(7, 31, 69, .96); /* navy bar once the page scrolls */

  /* Rules */
  --rule:         #CBD6E4; /* decorative hairlines */
  --rule-strong:  #76869C; /* borders that identify a component */

  /* Type */
  --font: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', Consolas, monospace;
  --fs-display: clamp(2.5rem, 1.35rem + 3.7vw, 4.75rem);  /* 40–76 */
  --fs-h2:      clamp(2rem, 1.45rem + 1.9vw, 3.25rem);     /* 32–52 */
  --fs-h3:      clamp(1.1875rem, 1.1rem + .35vw, 1.375rem); /* 19–22 */
  --fs-lead:    clamp(1.0625rem, 1rem + .3vw, 1.1875rem);   /* 17–19 */

  /* Layout */
  --wrap: 1240px;
  --pad: clamp(16px, 4vw, 40px);
  --gap: 24px;
  --rail: 36px;         /* room the step rail takes on the left */
  --header-h: 64px;
  --sec-pad: clamp(72px, 9vw, 128px);
  --radius: 10px;       /* buttons and inputs, as in the web app */

  /* Motion. One curve family; durations by role. */
  --ease-out:    cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);
  --dur-press:   140ms;
  --dur-ui:      220ms;
  --dur-draw:    500ms;
  --dur-rule:    700ms;
  --dur-hero:    900ms;
  --stagger:     90ms;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
  interpolate-size: allow-keywords;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3 { font-weight: 600; line-height: 1.1; text-wrap: balance; }
p { text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }
ul, ol { list-style: none; }
::selection { background: rgba(7, 100, 183, .18); }

:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 2px; }
.cta :focus-visible, .footer :focus-visible { outline-color: var(--on-solid); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.skip-link {
  position: absolute; left: 16px; top: -64px; z-index: 200;
  background: var(--paper); color: var(--primary-dark); font-weight: 600;
  padding: 10px 16px; border: 1px solid var(--rule-strong); border-radius: var(--radius);
}
.skip-link:focus { top: 12px; }

.container { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 15px; font-weight: 600; line-height: 1;
  padding: 12px 18px; border-radius: var(--radius); border: 1px solid transparent;
  white-space: nowrap;
  transition: background-color var(--dur-ui) ease, border-color var(--dur-ui) ease, color var(--dur-ui) ease;
}
.btn--lg { padding: 15px 22px; font-size: 16px; }
.btn--primary { background: var(--primary); color: var(--on-solid); }
.btn--outline, .btn--ghost { background: var(--paper); color: var(--primary-dark); border-color: var(--rule-strong); }
.btn--quiet { color: var(--ink); }
/* For the navy band: primary dark on white, 9.3:1 */
.btn--light { background: var(--paper); color: var(--primary-dark); }
.btn--outline-light { color: var(--on-solid); border-color: rgba(255, 255, 255, .45); }

@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: var(--primary-dark); }
  .btn--outline:hover, .btn--ghost:hover { border-color: var(--primary-dark); background: var(--tint); }
  .btn--quiet:hover { background: var(--paper-2); }
  .btn--light:hover { background: var(--tint); }
  .btn--outline-light:hover { background: rgba(255, 255, 255, .1); border-color: var(--on-solid); }
}
@media (prefers-reduced-motion: no-preference) {
  /* Press feedback: quick, small, and it settles on release. */
  .btn { transition-property: background-color, border-color, color, transform; }
  .btn:active { transform: scale(.97); transition-duration: var(--dur-ui), var(--dur-ui), var(--dur-ui), var(--dur-press); transition-timing-function: ease, ease, ease, var(--ease-out); }
}

/* ---------- Header ----------
   White over the hero; once the page scrolls (app.js watches a marker at the top) it turns into a
   navy bar, the reader's toolbar around the white document. The navy is a layer under the content
   whose opacity crossfades, so the switch never animates layout. Text on the navy bar, measured
   over the page: on-navy-2 8.5:1, white 14.7:1, primary dark on the white button 9.3:1. */
.header {
  position: sticky; top: 0; z-index: 50; height: var(--header-h); isolation: isolate;
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-ui) ease;
}
.header::before {
  content: ""; position: absolute; inset: 0 0 -1px; z-index: -1;
  background: var(--header-dark); opacity: 0;
  transition: opacity var(--dur-ui) ease;
}
body.menu-open .header { border-bottom-color: var(--rule); }
.header.is-scrolled::before { opacity: 1; }
.header__inner { height: 100%; display: flex; align-items: center; gap: 32px; }

.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand__mark { width: 32px; height: 32px; }
/* The symbol's outer arcs are navy, so on the dark bar it sits on a white tile, as in the footer. */
.header .brand__mark { padding: 3px; border-radius: 8px; background: var(--paper); }
.brand__name { font-size: 19px; font-weight: 600; letter-spacing: -.02em; line-height: 1; transition: color var(--dur-ui) ease; }

.nav { display: flex; gap: 2px; }
.nav__link {
  font-size: 14.5px; font-weight: 500; color: var(--ink-2); white-space: nowrap;
  padding: 8px 10px; border-radius: 6px;
  transition: color var(--dur-ui) ease, background-color var(--dur-ui) ease;
}
@media (hover: hover) and (pointer: fine) {
  .nav__link:hover { color: var(--ink); background: var(--paper-2); }
}
.header__cta { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.header.is-scrolled .brand__name, .header.is-scrolled .btn--quiet { color: var(--on-solid); }
.header.is-scrolled .nav__link { color: var(--on-navy-2); }
.header.is-scrolled .btn--primary { background: var(--paper); color: var(--primary-dark); }
.header.is-scrolled .burger span { background: var(--on-solid); }
.header.is-scrolled :focus-visible { outline-color: var(--on-solid); }
@media (hover: hover) and (pointer: fine) {
  .header.is-scrolled .nav__link:hover { color: var(--on-solid); background: rgba(255, 255, 255, .08); }
  .header.is-scrolled .btn--quiet:hover { background: rgba(255, 255, 255, .1); }
  .header.is-scrolled .btn--primary:hover { background: var(--tint); }
}

.burger { display: none; width: 42px; height: 42px; border: 0; background: transparent; border-radius: var(--radius); position: relative; }
.burger span { position: absolute; left: 11px; right: 11px; top: 20px; height: 2px; background: var(--ink); border-radius: 2px; transition: background-color var(--dur-ui) ease; }
.burger span:nth-child(1) { transform: translateY(-6px); }
.burger span:nth-child(3) { transform: translateY(6px); }
body.menu-open .burger span:nth-child(1) { transform: rotate(45deg); }
body.menu-open .burger span:nth-child(2) { opacity: 0; }
body.menu-open .burger span:nth-child(3) { transform: rotate(-45deg); }

/* Mobile drawer */
.mobile-menu {
  position: fixed; inset: var(--header-h) 0 0 0; z-index: 49;
  background: rgba(5, 23, 51, .45);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-ui) ease;
}
.mobile-menu__panel {
  position: absolute; top: 0; right: 0; width: min(360px, 100%); height: 100%;
  background: var(--paper); padding: 20px var(--pad) calc(32px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 4px; overflow-y: auto;
  border-left: 1px solid var(--rule);
  visibility: hidden;
}
body.menu-open .mobile-menu { opacity: 1; pointer-events: auto; }
body.menu-open .mobile-menu__panel { visibility: visible; }
.mobile-menu__link { font-size: 17px; font-weight: 600; padding: 13px 0; border-bottom: 1px solid var(--rule); }
.mobile-menu hr { border: 0; margin: 12px 0; }
.mobile-menu .btn { width: 100%; }
.mobile-menu .btn + .btn { margin-top: 8px; }
@media (prefers-reduced-motion: no-preference) {
  .burger span { transition: transform var(--dur-ui) var(--ease-out), opacity var(--dur-ui) ease, background-color var(--dur-ui) ease; }
  /* The drawer enters and leaves through the same edge. */
  .mobile-menu__panel { transform: translateX(100%); transition: transform 280ms var(--ease-drawer), visibility 0s linear 280ms; }
  body.menu-open .mobile-menu__panel { transform: none; transition: transform 280ms var(--ease-drawer), visibility 0s; }
}

/* =========================================================================
   Hero
   ========================================================================= */
.hero { padding-top: clamp(24px, 3.6vw, 56px); }
.hero__grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap); row-gap: 48px; align-items: center;
}
.hero__text { grid-column: 1 / span 7; }
.hero__doc { grid-column: 8 / -1; justify-self: end; width: 100%; max-width: 440px; }

.hero__kicker { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: var(--primary-dark); }
.hero__kicker img { width: 18px; height: 18px; }
.hero__title {
  margin-top: 20px; max-width: 15ch;
  font-size: var(--fs-display); line-height: 1.02; letter-spacing: -.04em;
}
.hero__lead { margin-top: 24px; max-width: 56ch; font-size: var(--fs-lead); line-height: 1.55; color: var(--ink-2); }
.actions, .hero__cta { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; }

/* The four hero chips, as one ruled strip */
.specs { margin-top: 48px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--rule); }
.spec { display: flex; flex-direction: column; gap: 10px; padding: 16px 16px 0 0; font-size: 14px; font-weight: 500; line-height: 1.35; }
.spec + .spec { padding-left: 16px; border-left: 1px solid var(--rule); }
.spec .ico { color: var(--primary); }

.doc-caption { margin-top: 14px; font-size: 13px; color: var(--ink-3); }

/* ---------- Report sheet (hero and anatomy) ----------
   One page per photo, so two more pages sit behind it. Type inside the sheet is in container
   units, so the whole page scales as one object and the anatomy callouts stay on their fields. */
.stack { position: relative; padding: 16px 16px 0 0; }
.stack__page, .stack__shadow { position: absolute; top: 16px; right: 16px; bottom: 0; left: 0; }
.stack__page { background: var(--paper); border: 1px solid var(--rule); }
.stack__page--2 { transform: translate(8px, -8px); }
.stack__page--3 { transform: translate(16px, -16px); }
.stack__shadow { box-shadow: 0 1px 2px rgba(7, 31, 69, .06), 0 28px 56px -24px rgba(7, 31, 69, .32); }

.sheet {
  --sheet-line: #E1E8F0; --sheet-chip: #EEF3F9;
  position: relative; background: var(--paper); border: 1px solid var(--rule);
  aspect-ratio: 1 / 1.4142; container-type: inline-size; overflow: hidden;
}
.sheet__in {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  padding: 6cqi 6cqi 5cqi; font-size: max(7px, 2.6cqi); line-height: 1.3; color: var(--ink);
}
.sheet__head {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 4cqi;
  padding-bottom: 2.6cqi; border-bottom: max(1.5px, .45cqi) solid var(--primary-dark);
}
.sheet__brand {
  display: flex; align-items: center; gap: 1.6cqi;
  font-size: max(9px, 4.2cqi); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--primary-dark);
}
.sheet__brand img { width: 5.4cqi; height: 5.4cqi; }
.sheet__date { display: flex; flex-direction: column; align-items: flex-end; gap: .6cqi; }
.sheet__label, .sheet__fields dt {
  font-size: max(6px, 1.85cqi); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3);
}
.sheet__stamp { font-family: var(--mono); font-size: max(8px, 3.4cqi); font-weight: 500; color: var(--primary-dark); font-variant-numeric: tabular-nums; }
.sheet__fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.4cqi 3.6cqi; margin-top: 3.2cqi; }
.sheet__fields dd { margin-top: .5cqi; font-size: max(7px, 2.7cqi); font-weight: 500; }
.sheet__fields .is-strong { font-weight: 600; }
.sheet__fields .is-ink { color: var(--primary-dark); }
.sheet__fields .span-2 { grid-column: span 2; }
.sheet__fields .span-3 { grid-column: 1 / -1; }
.sheet__photo { flex: 1; min-height: 0; margin-top: 3.2cqi; padding: 1.4cqi; border: 1px solid var(--sheet-line); background: var(--paper-2); }
.sheet__photo img { width: 100%; height: 100%; object-fit: cover; }
.sheet__coords {
  display: inline-block; padding: .4cqi 1.2cqi; border-radius: .6cqi;
  font-family: var(--mono); font-size: max(7px, 2.5cqi); color: var(--primary); background: var(--sheet-chip);
}
.sheet__foot { margin-top: 3cqi; padding-top: 2cqi; border-top: 1px solid var(--rule); font-size: max(6px, 1.85cqi); color: var(--ink-3); }

/* Hero moment: the page prints top to bottom once, after the headline is already readable.
   The text never moves; without this animation the sheet is simply there. */
@media (prefers-reduced-motion: no-preference) {
  .hero .sheet { animation: sheet-print var(--dur-hero) var(--ease-out) 150ms both; }
  .hero .stack__shadow { animation: fade-in 400ms ease 700ms both; }
  .hero .stack__page { animation: page-out 500ms var(--ease-out) 650ms both; }
}
@keyframes sheet-print {
  from { clip-path: inset(0 0 100% 0); transform: translateY(16px); }
  to   { clip-path: inset(0 0 0 0);    transform: none; }
}
@keyframes fade-in { from { opacity: 0; } }
@keyframes page-out { from { opacity: 0; transform: none; } }

/* =========================================================================
   Sections: a rule, a running head in the margin, the body on columns 4–12
   ========================================================================= */
.sec { padding-top: var(--sec-pad); }
.sec--last { padding-bottom: var(--sec-pad); }
.sec__grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap); align-items: start;
}
.sec__rule { grid-column: 1 / -1; height: 1px; margin-bottom: 28px; background: var(--primary-dark); transform-origin: 0 50%; }
.sec__label {
  grid-column: 1 / span 3; position: sticky; top: calc(var(--header-h) + 28px);
  font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--primary-dark);
}
.sec__body { grid-column: 4 / -1; max-width: 50rem; }

.h2 { font-size: var(--fs-h2); line-height: 1.06; letter-spacing: -.032em; }
.h3 { font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -.015em; }
.lead { margin-top: 20px; max-width: 60ch; font-size: var(--fs-lead); line-height: 1.55; color: var(--ink-2); }

.text-link {
  display: inline-block; margin-top: 20px; font-weight: 600; color: var(--primary);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
  transition: color var(--dur-ui) ease, text-decoration-color var(--dur-ui) ease;
}
@media (hover: hover) and (pointer: fine) {
  .text-link:hover { color: var(--primary-dark); text-decoration-thickness: 2px; }
}

/* Chapter rule draws from the left once, marking where each part of the page starts. */
@media (prefers-reduced-motion: no-preference) {
  html.js .sec__rule { transform: scaleX(0); transition: transform var(--dur-rule) var(--ease-out); }
  html.js .sec__rule.is-in { transform: none; }
}

/* ---------- O que é ---------- */
.facts { margin-top: 56px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--rule); }
.fact { padding: 20px 20px 0 0; }
.fact + .fact { padding-left: 20px; border-left: 1px solid var(--rule); }
.fact .ico { width: 22px; height: 22px; color: var(--primary); }
.fact__title { margin-top: 14px; font-size: 17px; letter-spacing: -.01em; }
.fact p { margin-top: 8px; font-size: 15px; line-height: 1.55; color: var(--ink-2); }

/* ---------- Como funciona: the step rail ---------- */
#como-funciona .sec__label { position: static; } /* the steps use the margin column */
.chain { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; margin-top: 48px; }
.station {
  grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: start;
  position: relative; padding-block: 28px 48px;
}
.station__node {
  position: absolute; left: 0; top: 32px; z-index: 1;
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--primary); background: var(--paper);
}
.station__dot { position: absolute; inset: 2px; border-radius: 50%; background: var(--primary); }
/* From under this node to the next one: the station's height less the node. */
.station__seg { position: absolute; left: 6px; top: 46px; width: 2px; height: calc(100% - 14px); background: var(--rule); }
.station__fill { position: absolute; inset: 0; background: var(--primary); transform-origin: 50% 0; }
.station__tag {
  grid-column: 1 / span 3; padding-left: var(--rail);
  display: flex; align-items: baseline; gap: 12px;
  font-size: 15px; font-weight: 600; line-height: 1.4;
}
.station__num { font-family: var(--mono); font-size: 13px; font-weight: 500; color: var(--primary); }
.station__text { grid-column: 4 / span 4; }
.station__text p { margin-top: 10px; color: var(--ink-2); }

/* The rail follows the reader: each segment fills while the reading line (mid-viewport) moves from
   its node to the next, and a node fills as the line reaches it. Scroll-linked, no timers. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .station__seg { view-timeline: --segment block; view-timeline-inset: 50% 49%; }
    .station__fill { animation: rail-fill linear both; animation-timeline: --segment; }
    .station__node { view-timeline: --node block; view-timeline-inset: 50% 49%; }
    .station__dot { animation: node-fill linear both; animation-timeline: --node; }
  }
  /* Without scroll-driven animations app.js marks the stations as the reading line passes them. */
  html.no-timeline .station__fill { transform: scaleY(0); transition: transform 600ms var(--ease-in-out); }
  html.no-timeline .station.is-passed .station__fill { transform: none; }
  html.no-timeline .station__dot { transform: scale(.3); opacity: 0; transition: transform var(--dur-ui) var(--ease-out), opacity var(--dur-ui) var(--ease-out); }
  html.no-timeline .station.is-reached .station__dot { transform: none; opacity: 1; }
}
@keyframes rail-fill { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes node-fill { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* Records beside each step (illustrations, fictitious data) */
.record { grid-column: 8 / -1; padding: 20px 22px; background: var(--paper-2); border: 1px solid var(--rule); font-size: 14px; }
.record__rows > div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 12px; padding: 7px 0; border-top: 1px solid var(--rule); }
.record__rows > div:first-child { padding-top: 0; border-top: 0; }
.record__rows dt { color: var(--ink-3); }
.record__rows dd { font-weight: 500; }
.record__note { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rule); font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.record__note .ico { width: 18px; height: 18px; margin-top: 1px; color: var(--primary); }
.record__steps li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--rule); color: var(--ink-2); }
.record__steps li:first-child { padding-top: 0; border-top: 0; }
.record__steps .ico { width: 20px; height: 20px; padding: 3px; border-radius: 50%; border: 1px solid var(--rule-strong); color: transparent; }
.record__steps .is-done { color: var(--ink); }
.record__steps .is-done .ico { color: var(--on-solid); background: var(--primary); border-color: var(--primary); }

.shot { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--paper-2); }
.shot img { width: 100%; height: 100%; object-fit: cover; }
.shot__meta {
  position: absolute; left: 10px; bottom: 10px; display: grid; gap: 2px; padding: 7px 10px;
  font-family: var(--mono); font-size: 12px; line-height: 1.35; font-variant-numeric: tabular-nums;
  color: var(--on-solid); background: rgba(7, 31, 69, .88);
}

.minipages { display: flex; gap: 10px; }
.minipage {
  width: 64px; aspect-ratio: 1 / 1.4142; position: relative; border: 1px solid var(--rule);
  background:
    linear-gradient(var(--rule), var(--rule)) 8px 76% / 60% 2px no-repeat,
    linear-gradient(var(--rule), var(--rule)) 8px 86% / 40% 2px no-repeat,
    var(--paper);
}
.minipage::before { content: ""; position: absolute; left: 7px; right: 7px; top: 7px; height: 2px; background: var(--primary-dark); }
.minipage::after { content: ""; position: absolute; left: 7px; right: 7px; top: 15px; height: 40%; background: url(/assets/evidence.webp) center / cover; }
.langs { display: inline-flex; gap: 2px; margin-top: 16px; padding: 3px; border: 1px solid var(--rule-strong); border-radius: 8px; background: var(--paper); }
.langs span { padding: 5px 10px; border-radius: 6px; font-size: 13px; font-weight: 500; color: var(--ink-2); }
.langs .is-on { background: var(--primary); color: var(--on-solid); }

/* ---------- App de campo ---------- */
.app { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); gap: clamp(32px, 5vw, 64px); max-width: none; }
.ticks { margin-top: 28px; border-top: 1px solid var(--rule); }
.ticks li { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 15.5px; font-weight: 500; line-height: 1.45; }
.ticks .ico { width: 18px; height: 18px; margin-top: 2px; color: var(--primary); }

.store-row { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }
/* Disabled until the app is public: swap each span for <a href> with its data-store-url. */
.store-badge {
  display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px 10px 12px;
  border: 1px dashed var(--rule-strong); border-radius: var(--radius); background: var(--paper); cursor: default;
}
.store-badge .ico { width: 22px; height: 22px; color: var(--ink-3); }
.store-badge small { display: block; font-size: 12px; font-weight: 500; line-height: 1.2; color: var(--ink-3); }
.store-badge b { display: block; font-size: 15.5px; font-weight: 600; line-height: 1.25; }
.app-note { margin-top: 16px; max-width: 52ch; font-size: 14.5px; color: var(--ink-2); }
.app-note a { color: var(--primary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.plate { background: var(--paper-2); border: 1px solid var(--rule); padding: clamp(20px, 3vw, 36px); }
.plate__caption { font-size: 13px; color: var(--ink-3); }
.app__visual { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.app__visual .plate__caption { align-self: stretch; }

/* Phone: the capture screen of the app, in the app's greys (secondary text darkened from the
   app's #848484 to #666666 so it passes AA: 5.74 on white, 5.07 on #F2F2F2). */
.phone {
  --app-text: #4A4A4A; --app-strong: #2B2B2B; --app-text-2: #666666;
  --app-surface: #F2F2F2; --app-line: #DBDBDB; --app-line-brand: #9DBFE3;
  --app-frame: #0E1622; --app-toast: #323232;
  position: relative; width: 100%; max-width: 280px; aspect-ratio: 9 / 19.5; overflow: hidden;
  display: flex; flex-direction: column;
  border: 8px solid var(--app-frame); border-radius: 38px; background: var(--paper);
  font-size: 10px; line-height: 1.35; color: var(--app-text);
  box-shadow: 0 30px 60px -30px rgba(7, 31, 69, .45);
}
.phone .ico { width: 14px; height: 14px; }
.phone__status { flex: none; height: 24px; padding-inline: 18px; display: flex; justify-content: space-between; align-items: center; background: var(--primary); color: var(--on-solid); font-weight: 600; }
.phone__signal { display: flex; align-items: flex-end; gap: 2px; }
.phone__signal i { width: 3px; border-radius: 1px; background: var(--on-solid); }
.phone__signal i:nth-child(1) { height: 4px; }
.phone__signal i:nth-child(2) { height: 6px; }
.phone__signal i:nth-child(3) { height: 8px; }
.phone__bar { flex: none; height: 44px; padding-inline: 14px; display: flex; align-items: center; gap: 12px; background: var(--primary); color: var(--on-solid); font-size: 14px; font-weight: 600; }
.phone__bar .ico { width: 18px; height: 18px; }
.phone__body { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 8px; padding: 12px; }
.phone__title, .phone__label { font-size: 11px; font-weight: 600; color: var(--app-strong); }
.phone__card { display: flex; flex-direction: column; gap: 7px; padding: 10px; border: 1px solid var(--app-line-brand); border-radius: 12px; }
.phone__campaign { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; color: var(--app-strong); }
.phone__icon { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px; background: var(--tint); color: var(--primary); }
.phone__chips { display: flex; flex-wrap: wrap; gap: 4px; }
.phone__chips span { padding: 3px 8px; border-radius: 99px; font-size: 8.5px; font-weight: 500; color: var(--primary-dark); background: var(--tint); }
.phone__dates { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.phone__dates span { padding: 5px 7px; border-radius: 8px; font-size: 8px; color: var(--app-text-2); background: var(--app-surface); }
.phone__dates b { display: block; font-size: 9px; font-weight: 600; color: var(--app-text); }
.phone__hint { font-size: 8.5px; color: var(--app-text-2); }
.phone__switch { align-self: flex-start; padding: 4px 10px; border: 1.2px solid var(--primary); border-radius: 99px; font-size: 9px; font-weight: 600; color: var(--primary); }
.phone__btn { flex: none; height: 34px; display: flex; align-items: center; justify-content: center; gap: 6px; border-radius: 10px; background: var(--primary); color: var(--on-solid); font-size: 11px; font-weight: 600; }
.phone__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.phone__tiles img, .phone__add { width: 100%; height: auto; aspect-ratio: 1; border-radius: 10px; object-fit: cover; }
.phone__add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 1.2px dashed var(--primary); background: var(--app-surface); color: var(--primary); font-size: 8.5px; font-weight: 600; }
.phone__geo { display: grid; gap: 4px; padding: 8px 10px; border: 1px solid var(--app-line); border-radius: 12px; }
.phone__geo div { display: flex; justify-content: space-between; gap: 8px; font-size: 9px; }
.phone__geo dt { color: var(--app-text-2); }
.phone__geo dd { font-family: var(--mono); color: var(--app-strong); }
.phone__toast {
  position: absolute; left: 10px; right: 10px; bottom: 14px; padding: 9px 11px; border-radius: 8px;
  font-size: 9px; line-height: 1.4; color: var(--on-solid); background: var(--app-toast); box-shadow: 0 6px 16px rgba(0, 0, 0, .25);
}

/* ---------- Recursos: anatomy of a report page, then the index ---------- */
.lead-feature { margin-top: 28px; padding-top: 20px; max-width: 40rem; border-top: 1px solid var(--rule); }
.lead-feature .h3 { display: flex; align-items: center; gap: 10px; }
.lead-feature .ico { width: 22px; height: 22px; color: var(--primary); }
.lead-feature p { margin-top: 10px; font-size: 16.5px; color: var(--ink-2); }

.anatomy { grid-column: 4 / -1; margin-top: 40px; }
.anatomy__canvas { --sheet: .56; position: relative; container-type: inline-size; }
.anatomy .sheet { width: calc(var(--sheet) * 100%); }
/* The markers stand in the sheet's right margin, level with the row they name: --x across the
   sheet (0–100), --y down it. */
.callouts { position: absolute; inset: 0; }
.callout { --x: 97; position: absolute; top: var(--y); left: calc(var(--x) * var(--sheet) * 1cqi); }
.callout--date     { --y: 7.9%; }
.callout--campaign { --y: 20.4%; }
.callout--address  { --y: 82.1%; }
.callout--coords   { --y: 89.6%; }
.callout__num {
  position: absolute; left: -10px; top: -10px; width: 20px; height: 20px; border-radius: 50%;
  font-size: 11px; font-weight: 600; line-height: 20px; text-align: center;
  color: var(--on-solid); background: var(--primary); box-shadow: 0 0 0 3px var(--paper);
}
.callout__line {
  position: absolute; top: 0; left: 10px; height: 1px;
  width: calc(61cqi - var(--x) * var(--sheet) * 1cqi - 10px); background: var(--primary); transform-origin: 0 50%;
}
.callout__label {
  position: absolute; top: 0; left: calc(62.5cqi - var(--x) * var(--sheet) * 1cqi); width: 36cqi;
  transform: translateY(-50%); font-size: 15px; font-weight: 600; line-height: 1.3;
}
.legend { display: none; }

/* Explanation: each callout draws from its field to its label, one after another, once. */
@media (prefers-reduced-motion: no-preference) {
  html.js .anatomy .callout__num { transform: scale(.5); opacity: 0; transition: transform 300ms var(--ease-out), opacity 300ms var(--ease-out); transition-delay: calc(var(--i) * var(--stagger)); }
  html.js .anatomy .callout__line { transform: scaleX(0); transition: transform var(--dur-draw) var(--ease-out); transition-delay: calc(var(--i) * var(--stagger) + 120ms); }
  html.js .anatomy .callout__label { opacity: 0; transform: translate(-8px, -50%); transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out); transition-delay: calc(var(--i) * var(--stagger) + 420ms); }
  html.js .anatomy.is-in .callout__num { transform: none; opacity: 1; }
  html.js .anatomy.is-in .callout__line { transform: none; }
  html.js .anatomy.is-in .callout__label { opacity: 1; transform: translateY(-50%); }
}

.index { grid-column: 4 / -1; margin-top: 56px; border-top: 1px solid var(--rule); }
.index__row {
  display: grid; grid-template-columns: 24px minmax(0, 14rem) minmax(0, 1fr); column-gap: 20px; align-items: baseline;
  padding: 22px 0; border-bottom: 1px solid var(--rule);
}
.index__row .ico { align-self: start; margin-top: 1px; color: var(--primary); }
.index__title { font-size: 17px; letter-spacing: -.01em; }
.index__row p { max-width: 56ch; color: var(--ink-2); }

/* ---------- Para quem: the route of the report ---------- */
.route { grid-column: 4 / -1; margin-top: 48px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.role { position: relative; }
.role__mark { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--rule-strong); background: var(--paper); color: var(--primary); }
.role__mark .ico { width: 22px; height: 22px; }
.role__link {
  --link-hidden: scaleX(0);
  position: absolute; top: 26px; left: 64px; right: -20px; height: 1px; background: var(--primary); transform-origin: 0 50%;
}
.role__link::after {
  content: ""; position: absolute; right: 1px; top: -3.5px; width: 8px; height: 8px;
  border-top: 1.5px solid var(--primary); border-right: 1.5px solid var(--primary); transform: rotate(45deg);
}
.role__tag { margin-top: 20px; font-size: 13.5px; font-weight: 600; color: var(--primary-dark); }
.role .h3 { margin-top: 6px; }
.role > p:last-child { margin-top: 10px; font-size: 15.5px; color: var(--ink-2); }

/* Explanation: the links draw in the direction the report travels, once. */
@media (prefers-reduced-motion: no-preference) {
  html.js .route .role__link { transform: var(--link-hidden); transition: transform 600ms var(--ease-in-out); transition-delay: calc(var(--i) * 150ms + 150ms); }
  html.js .route.is-in .role__link { transform: none; }
}

/* ---------- FAQ ---------- */
.faq__head { grid-column: 1 / span 4; position: sticky; top: calc(var(--header-h) + 28px); }
.faq__head .sec__label { position: static; }
.faq__head .h2 { margin-top: 16px; }
.faq__list { grid-column: 6 / -1; border-top: 1px solid var(--rule); }
.qa { border-bottom: 1px solid var(--rule); }
.qa summary {
  list-style: none; cursor: pointer; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
  padding: 22px 0; font-size: 17.5px; font-weight: 600; line-height: 1.4; text-wrap: pretty;
  transition: color var(--dur-ui) ease;
}
.qa summary::-webkit-details-marker { display: none; }
@media (hover: hover) and (pointer: fine) {
  .qa summary:hover { color: var(--primary-dark); }
}
.qa__icon { position: relative; flex: none; width: 16px; height: 16px; margin-top: 4px; color: var(--primary); }
.qa__icon::before, .qa__icon::after { content: ""; position: absolute; left: 0; right: 0; top: 7.25px; height: 1.5px; border-radius: 1px; background: currentColor; }
.qa__icon::after { transform: rotate(90deg); }
.qa[open] .qa__icon::after { transform: rotate(0deg); }
.qa__a { padding: 0 40px 24px 0; }
.qa__a p { color: var(--ink-2); }
.qa__a a { color: var(--primary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
/* State: the answer opens from the question; "+" turns into "−". Browsers without
   ::details-content open it instantly. */
@media (prefers-reduced-motion: no-preference) {
  .qa__icon::after { transition: transform var(--dur-ui) var(--ease-out); }
  .qa::details-content {
    height: 0; overflow: clip;
    transition: height var(--dur-ui) var(--ease-out), content-visibility var(--dur-ui) allow-discrete;
  }
  .qa[open]::details-content { height: auto; }
}

/* =========================================================================
   Final call to action: the navy band, with the symbol drawn as a line
   ========================================================================= */
.cta { position: relative; overflow: clip; padding-block: clamp(80px, 10vw, 140px); color: var(--on-solid); background: var(--navy); }
.cta__grid { position: relative; z-index: 1; }
.cta__text { max-width: 40rem; }
.cta__title { font-size: clamp(2.125rem, 1.4rem + 2.6vw, 3.75rem); line-height: 1.04; letter-spacing: -.035em; }
.cta__text > p { margin-top: 20px; max-width: 52ch; font-size: var(--fs-lead); color: var(--on-navy-2); }
.cta .actions { margin-top: 36px; }
.cta__text > .cta__mail { margin-top: 28px; font-size: 15px; }
.cta__mail a { color: var(--on-solid); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.cta__arcs {
  position: absolute; z-index: 0; top: 50%; right: max(-60px, calc(50% - var(--wrap) / 2 - 40px));
  width: clamp(300px, 40vw, 560px); height: auto; overflow: visible; transform: translateY(-50%);
  fill: none; stroke-linecap: round;
}
.arc { stroke-width: .9; stroke-dasharray: 1 2; stroke-dashoffset: 0; }
.arc--1 { stroke: var(--symbol-2); }
.arc--2 { stroke: var(--symbol-3); }
.arc--3 { stroke: var(--accent); }
.arc-dot { fill: var(--accent); transform-box: fill-box; transform-origin: center; }

/* Closing beat: the symbol draws outer to inner and the centre point lands last. Once. */
@media (prefers-reduced-motion: no-preference) {
  html.js .cta .arc { stroke-dashoffset: 1.02; transition: stroke-dashoffset 1200ms var(--ease-out); }
  html.js .cta .arc--2 { transition-delay: 150ms; }
  html.js .cta .arc--3 { transition-delay: 300ms; }
  html.js .cta .arc-dot { transform: scale(.4); opacity: 0; transition: transform 500ms var(--ease-out) 800ms, opacity 500ms var(--ease-out) 800ms; }
  html.js .cta.is-in .arc { stroke-dashoffset: 0; }
  html.js .cta.is-in .arc-dot { transform: none; opacity: 1; }
}

/* =========================================================================
   Footer
   ========================================================================= */
.footer { padding-block: 64px 32px; color: var(--on-navy-2); background: var(--navy-2); }
.footer__top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.footer .brand__mark { width: 36px; height: 36px; padding: 4px; border-radius: 8px; background: var(--paper); }
.footer .brand__name { color: var(--on-solid); }
.footer__desc { margin-top: 18px; max-width: 36ch; font-size: 14.5px; }
.footer__mail { display: inline-block; margin-top: 12px; font-size: 14.5px; font-weight: 600; color: var(--on-solid); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .4); text-underline-offset: 4px; }
.footer__col h2 { margin-bottom: 14px; font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--on-solid); }
.footer__col a { display: block; padding: 6px 0; font-size: 14.5px; color: var(--on-navy-2); transition: color var(--dur-ui) ease; }
@media (hover: hover) and (pointer: fine) {
  .footer__col a:hover, .footer__mail:hover { color: var(--on-solid); text-decoration-color: var(--on-solid); }
}
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding-top: 24px; font-size: 13px; }

/* =========================================================================
   Public pages (privacidade, termos, excluir-conta, suporte) and 404:
   the same rule, margin head and reading column as the main page
   ========================================================================= */
.legal-hero { padding-top: clamp(36px, 6vw, 72px); }
.legal-hero__inner, .legal-doc__inner, .notfound .container {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
}
.legal-hero__inner::before, .notfound .container::before {
  content: ""; grid-column: 1 / -1; height: 1px; margin-bottom: 28px; background: var(--primary-dark);
}
.legal-hero .eyebrow { grid-column: 1 / span 3; grid-row: 2 / span 2; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--primary-dark); }
.legal-hero h1 { grid-column: 4 / -1; font-size: var(--fs-h2); line-height: 1.06; letter-spacing: -.032em; }
.legal-hero__lang { grid-column: 4 / -1; margin-top: 16px; font-size: 14.5px; color: var(--ink-3); }
.legal-hero__lang a { color: var(--primary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.legal-doc { padding-block: clamp(32px, 5vw, 56px) var(--sec-pad); }
.legal-doc__inner > * { grid-column: 4 / span 7; }
.legal-doc__inner > * + * { margin-top: 18px; }
.legal-doc p, .legal-doc li { max-width: 68ch; font-size: 16.5px; line-height: 1.65; color: var(--ink-2); overflow-wrap: anywhere; }
.legal-doc h2 { margin-top: 40px; font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); letter-spacing: -.015em; color: var(--ink); }
.legal-doc h3 { margin-top: 28px; font-size: 17px; color: var(--ink); }
.legal-doc b, .legal-doc strong { font-weight: 600; color: var(--ink); }
.legal-doc a { color: var(--primary); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .legal-doc a:hover, .legal-hero__lang a:hover { color: var(--primary-dark); }
}
.legal-doc ul, .legal-doc ol { display: flex; flex-direction: column; gap: 10px; }
.legal-doc ul li { position: relative; padding-left: 22px; }
.legal-doc ul li::before { content: ""; position: absolute; left: 2px; top: .7em; width: 7px; height: 7px; background: var(--primary); }
.legal-doc ol { counter-reset: step; }
.legal-doc ol li { position: relative; padding-left: 36px; counter-increment: step; }
.legal-doc ol li::before {
  content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: .15em;
  font-family: var(--mono); font-size: 13px; font-weight: 500; color: var(--primary);
}
.legal-doc__lang { margin-top: clamp(56px, 8vw, 96px) !important; padding-top: 28px; border-top: 1px solid var(--primary-dark); }
.legal-doc__lang > h2:first-child { margin-top: 0; font-size: var(--fs-h2); line-height: 1.06; letter-spacing: -.032em; }
.legal-doc__lang > * + * { margin-top: 18px; }

.notfound { padding-block: clamp(36px, 6vw, 72px) var(--sec-pad); }
.notfound .container > * { grid-column: 4 / span 7; }
.notfound .container > .notfound__code { grid-column: 1 / span 3; grid-row: 2 / span 3; font-family: var(--mono); font-size: 15px; font-weight: 500; line-height: 1.6; color: var(--primary-dark); }
.notfound h1 { font-size: var(--fs-h2); line-height: 1.06; letter-spacing: -.032em; }
.notfound p { margin-top: 16px; max-width: 52ch; color: var(--ink-2); }
.notfound p a { color: var(--primary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 1080px) {
  .hero__text { grid-column: 1 / -1; }
  .hero__doc { grid-column: 1 / -1; justify-self: start; max-width: 440px; }

  .sec__label { grid-column: 1 / -1; position: static; margin-bottom: 14px; }
  .sec__body, .anatomy, .index, .route { grid-column: 1 / -1; }

  .station__tag { grid-column: 1 / -1; margin-bottom: 12px; }
  .station__text { grid-column: 1 / span 6; padding-left: var(--rail); }
  .record { grid-column: 7 / -1; }

  .faq__head { grid-column: 1 / -1; position: static; margin-bottom: 32px; }
  .faq__list { grid-column: 1 / -1; }

  .legal-hero .eyebrow { grid-column: 1 / -1; grid-row: auto; margin-bottom: 14px; }
  .legal-hero h1, .legal-hero__lang { grid-column: 1 / -1; }
  .legal-doc__inner > *, .notfound .container > * { grid-column: 1 / -1; max-width: 46rem; }
  .notfound .container > .notfound__code { grid-column: 1 / -1; grid-row: auto; margin-bottom: 14px; }

  .footer__top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 980px) {
  .nav, .header__cta .btn { display: none; }
  .burger { display: block; }
}
@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .app__visual { max-width: 420px; }

  /* Callouts keep their numbered markers on the sheet; the legend names them. */
  .anatomy__canvas { --sheet: 1; max-width: 440px; }
  .callout__line, .callout__label { display: none; }
  .legend { display: grid; gap: 10px; margin-top: 20px; font-size: 15px; font-weight: 600; }
  .legend li { display: flex; align-items: center; gap: 12px; }
  .legend .callout__num { position: static; flex: none; box-shadow: none; }

  .route { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .role { padding-left: 76px; }
  .role__mark { position: absolute; left: 0; top: 0; }
  .role__tag { margin-top: 0; padding-top: 4px; }
  .role__link { --link-hidden: scaleY(0); top: 64px; left: 26px; right: auto; bottom: -28px; width: 1px; height: auto; transform-origin: 50% 0; }
  .role__link::after { right: -3.5px; top: auto; bottom: 1px; transform: rotate(135deg); }

  .cta__arcs { right: -120px; width: 380px; opacity: .55; }
}
@media (max-width: 760px) {
  .specs { grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 0; }
  .spec, .spec + .spec { padding: 14px 12px 14px 0; border-left: 0; border-top: 1px solid var(--rule); }

  .facts { grid-template-columns: minmax(0, 1fr); border-top: 0; }
  .fact, .fact + .fact { padding: 20px 0; border-left: 0; border-top: 1px solid var(--rule); }

  .station__text, .record { grid-column: 1 / -1; }
  .record { margin-top: 20px; margin-left: var(--rail); }

  .index__row { grid-template-columns: 24px minmax(0, 1fr); row-gap: 6px; }
  .index__row p { grid-column: 2; }

  .footer__top { grid-template-columns: 1fr; gap: 28px; }
  .footer__bottom { flex-direction: column; }
}
@media (max-width: 600px) {
  .hero .actions .btn, .cta .actions .btn { width: 100%; }
  .qa__a { padding-right: 0; }
}

@media print {
  .header { position: static; }
  .mobile-menu, .cta__arcs { display: none; }
}