/* ===========================================================================
   GENERATED from design/tokens.json via design/tools/build-core-css.mjs.
   DO NOT EDIT BY HAND.  Regenerate:  node tool/gen-tokens.mjs

   Vendored, not imported: the site owns its copy so website/ stays liftable.
   =========================================================================== */

:root {
  /* ---- palette: color.primitive.* ------------------------------------ */
  --boavia-green: #00A15E;
  --boavia-green-hover: #009254;
  --boavia-orange: #F2620F;
  --boavia-orange-hover: #DE5406;
  --boavia-blue: #2456E6;
  --boavia-yellow: #FFC20E;
  --stage-green: #00663B;
  --stage-blue: #16309C;
  --signal-red: #C4302B;
  --signal-red-hover: #A82722;
  --signal-red-night: #F2867F;
  --green-night: #35C98A;
  --white: #FFFFFF;

  /* dark-mode neutrals — color.primitive.night.* (referenced by the role overrides) */
  --night-ink: #F2F2EE;
  --night-gray: #A6A6A3;
  --night-canvas: #131313;
  --night-paper: #1B1B19;
  --night-card: #1E1E1E;

  /* ---- semantic roles: color.role.* (light values; dark block below) -- */
  --canvas: #FFFFFF;
  --card: #FFFFFF;
  --paper: #F6F6F4;
  --ink: #111111;
  --gray: #565656;
  --ink-vivid: #000000;
  --green-text: #00663B;
  --error-text: #C4302B;
  --hairline: #11111310;
  --hairline-card: #1111130D;
  --border: #11111326;
  --nav-veil: #FFFFFFCC;
  --walk: #11111330;

  /* screen-medium companions for roles a print theme adapts — use inside artifacts
     (phone/portal mockups) that depict a screen while sitting on an adapted page. */
  --hairline-screen: #11111310;
  --on-color: #FFFFFF;   /* literal white ON a colour fill — never flips, by definition */

  /* ---- type: font.* ---------------------------------------------------- */
  --font-poster: "Croogla 4F", "Hanken Grotesk", sans-serif;
  --font-sans: "Hanken Grotesk", system-ui, sans-serif;
  --font-doc-serif: "Source Serif 4", "Noto Serif", Georgia, serif;
  --font-doc-mono: "Source Code Pro", Consolas, monospace;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  /* aliases kept because the handbook specimens already write var(--doc-sans) etc. */
  --doc-sans: var(--font-sans);
  --doc-serif: var(--font-doc-serif);
  --doc-mono: var(--font-doc-mono);
  --doc-display: var(--font-poster);

  /* ---- type scale: typescale.* (screen) -------------------------------- */
  --fs-display: clamp(46px, 7.5vw, 104px);
  --lh-display: 1.03;
  --fs-headline: clamp(34px, 4.6vw, 58px);
  --lh-headline: 1.03;
  --fs-title: 19px;
  --lh-title: 1.05;
  --fs-kicker: 14px;
  --lh-kicker: 1.2;
  --fs-lead: 17.5px;
  --lh-lead: 1.55;
  --fs-body: 16.5px;
  --lh-body: 1.55;
  --fs-body-sm: 14.5px;
  --lh-body-sm: 1.55;
  --fs-label: 13px;
  --lh-label: 1.25;
  --fs-caption: 12.5px;
  --lh-caption: 1.35;
  --fs-micro: 11px;
  --lh-micro: 1.3;
  --fs-button: 19px;
  --lh-button: 1.2;
  --fs-numeric: inherit;
  --lh-numeric: 1.2;

  /* ---- type scale: typescale.doc.* (A4 print) -------------------------- */
  --fs-doc-h1: 30pt;
  --lh-doc-h1: 1.05;
  --fs-doc-h2: 20pt;
  --lh-doc-h2: 1.1;
  --fs-doc-h3: 13pt;
  --lh-doc-h3: 1.15;
  --fs-doc-h4: 11pt;
  --lh-doc-h4: 1.2;
  --fs-doc-lead: 12pt;
  --lh-doc-lead: 1.5;
  --fs-doc-body: 10.5pt;
  --lh-doc-body: 1.5;
  --fs-doc-caption: 8.5pt;
  --lh-doc-caption: 1.35;
  --fs-doc-code: 9pt;
  --lh-doc-code: 1.45;
  --doc-page-size: A4;
  --doc-page-margin: 22mm;
  --measure: 166mm;

  /* ---- space: space.* ------------------------------------------------------ */
  --space-micro: 2px;
  --space-tight: 4px;
  --space-snug: 6px;
  --space-item: 8px;
  --space-inset: 12px;
  --space-edge: 16px;
  --space-section: 24px;

  /* ---- shape: radius.* --------------------------------------------------- */
  --radius-lpill: 5px;
  --radius-inner: 10px;
  --radius-tile: 12px;
  --radius-input: 14px;
  --radius-card-sm: 16px;
  --radius-card: 18px;
  --radius-sheet: 20px;
  --radius-cell: 22px;
  --radius-hero-card: 26px;
  --radius-panel: 34px;
  --radius-pill: 999px;

  /* ---- elevation: shadow.* ----------------------------------------------- */
  --shadow-s1: 0 1px 2px #1111130A, 0 10px 24px -16px #11111326;
  --shadow-s2: 0 18px 44px -22px #11111140;
  --shadow-s3: 0 30px 80px -40px #11111145;
  --shadow-cta-green: 0 14px 30px -14px #00A15E80;
  --shadow-hairline-border: 1px solid #1111130D;

  /* ---- motion: motion.* --------------------------------------------------- */
  --ease: cubic-bezier(0.22,0,0,1);
  --dur-control: 180ms;
  --dur-stage: 450ms;
  --dur-reveal: 700ms;

  /* ---- layout: layout.* --------------------------------------------------- */
  --wrap: 1200px;
  --bp-sm: 640px;
  --bp-md: 840px;
  --bp-lg: 1020px;
}

/* Dark mode — themed roles only. Functional colours never flip. */
[data-theme="dark"], .bv-dark {
  --canvas: #131313;
  --card: #1E1E1E;
  --paper: #1B1B19;
  --ink: #F2F2EE;
  --gray: #A6A6A3;
  --ink-vivid: #FFFFFF;
  --green-text: #35C98A;
  --error-text: #F2867F;
  --hairline: #FFFFFF1C;
  --hairline-card: #FFFFFF14;
  --border: #FFFFFF33;
  --nav-veil: #131313CC;
  --walk: #FFFFFF3D;
}

/* System-preference dark is OPT-IN (:root.bv-auto), never automatic. The handbook is a
   light-first PRINT artifact rendered through headless Chromium — an unscoped
   prefers-color-scheme rule would let the build machine's OS theme flip the whole PDF. */
@media (prefers-color-scheme: dark) {
  :root.bv-auto:not([data-theme="light"]):not(.bv-light) {
    --canvas: #131313;
    --card: #1E1E1E;
    --paper: #1B1B19;
    --ink: #F2F2EE;
    --gray: #A6A6A3;
    --ink-vivid: #FFFFFF;
    --green-text: #35C98A;
    --error-text: #F2867F;
    --hairline: #FFFFFF1C;
    --hairline-card: #FFFFFF14;
    --border: #FFFFFF33;
    --nav-veil: #131313CC;
    --walk: #FFFFFF3D;
  }
}

/* ---- fonts ---- */
@font-face{font-family:"Hanken Grotesk";src:url("/assets/fonts/hanken-grotesk-var.2f8cc58d.woff") format("woff");font-weight:100 900;font-style:normal;font-display:swap}

/* ---- base ---- */
/* base.css — structure shared by every look. Values come from tokens.css; the only literals
   here are 0, 1px-class hairlines and layout proportions. A look (themes/<n>/theme.css) may
   override anything below through [data-look="n"] and adds no new classes. */

/* ---- reset ---------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; font-synthesis: none; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--canvas); color: var(--ink); font: var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-sans); -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol, dl, figure { margin: 0; }
ul, ol { padding: 0; }
[hidden] { display: none; }
[id] { scroll-margin-top: 24px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
main:focus { outline: none; }

/* ---- rhythm --------------------------------------------------------------------------- */
:root {
  --gutter: clamp(16px, 4vw, 40px);
  --section-y: clamp(64px, 9vw, 120px);
  --gap: 24px;
  --gap-xl: clamp(24px, 4vw, 48px);
  --phone-w: 300px;
  --hue: var(--ink);
  --hue-text: var(--ink);
  --hue-stage: var(--ink);
}
@media (max-width: 1020px) { :root { --phone-w: 270px; } }
@media (max-width: 640px)  { :root { --phone-w: 240px; } }

[data-hue="green"]  { --hue: var(--boavia-green);  --hue-text: var(--green-text); --hue-stage: var(--stage-green); }
[data-hue="orange"] { --hue: var(--boavia-orange); --hue-text: var(--ink);        --hue-stage: var(--boavia-orange); }
[data-hue="blue"]   { --hue: var(--boavia-blue);   --hue-text: var(--boavia-blue); --hue-stage: var(--stage-blue); }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.s { padding-block: calc(var(--section-y) / 2); }
.s-hero { padding-block: calc(var(--section-y) * 0.5) var(--section-y); }
.s-head { margin-bottom: 40px; }
.s-head > * + * { margin-top: 12px; }
.muted { color: var(--gray); }

/* ---- type ----------------------------------------------------------------------------- */
h1 { font: var(--fw-extrabold) var(--fs-display)/var(--lh-display) var(--font-poster); letter-spacing: -0.025em; max-width: 12ch; }
h2 { font: var(--fw-extrabold) var(--fs-headline)/var(--lh-headline) var(--font-poster); letter-spacing: -0.02em; max-width: 20ch; }
h3 { font: var(--fw-bold) var(--fs-title)/1.2 var(--font-sans); }
p, li, dd { max-width: 68ch; }
.lead { font: var(--fw-regular) var(--fs-lead)/var(--lh-lead) var(--font-sans); color: var(--gray); max-width: 36em; }
.kicker { display: flex; align-items: center; gap: 10px; font: var(--fw-bold) var(--fs-kicker)/var(--lh-kicker) var(--font-sans); color: var(--gray); }
.kicker::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--hue); }
.prose a, .article a, .ident-extra a, .faq-a a, .caveat a, .footer-ident a, .contact a, .table a {
  color: var(--ink); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.15em; text-decoration-color: var(--border);
}
.prose a:hover, .article a:hover, .ident-extra a:hover { text-decoration-color: var(--ink); }
code { font: inherit; font-variant-numeric: tabular-nums; }

/* ---- skip link, header ---------------------------------------------------------------- */
.skip { position: absolute; left: 16px; top: -120px; z-index: 100; padding: 10px 16px; border-radius: var(--radius-inner); background: var(--ink); color: var(--white); text-decoration: none; font-weight: var(--fw-semibold); }
.skip:focus { top: 16px; }
.site-head .wrap { display: flex; align-items: center; gap: 32px; min-height: 72px; }
.brand { display: inline-flex; color: var(--ink); }
.wordmark { height: 26px; width: auto; }
.nav-wide ul, .nav-narrow ul { list-style: none; }
.nav-wide ul { display: flex; gap: 28px; }
.nav-wide a { display: inline-block; padding: 6px 0; font: var(--fw-semibold) 15.5px/1.2 var(--font-sans); color: var(--ink); text-decoration: none; }
.nav-wide a:hover { color: var(--gray); }
.nav-wide .is-current { box-shadow: inset 0 -2px 0 var(--ink); }
.nav-narrow { display: none; position: relative; }
.nav-narrow summary { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 4px; font: var(--fw-semibold) 15.5px/1.2 var(--font-sans); cursor: pointer; list-style: none; }
.nav-narrow summary::-webkit-details-marker { display: none; }
.chev { width: 14px; height: 14px; transition: transform var(--dur-control) var(--ease); }
.nav-narrow[open] .chev { transform: rotate(180deg); }
.nav-narrow nav { position: absolute; top: calc(100% + 8px); left: 0; z-index: 20; min-width: 240px; padding: 8px; background: var(--card); border: 1px solid var(--hairline-card); border-radius: var(--radius-card); box-shadow: var(--shadow-s2); }
.nav-narrow a { display: flex; align-items: center; min-height: 52px; padding: 0 16px; border-radius: var(--radius-inner); color: var(--ink); text-decoration: none; font-weight: var(--fw-semibold); }
.nav-narrow a:hover, .nav-narrow .is-current { background: var(--paper); }
.lang { margin-left: auto; font: var(--fw-semibold) var(--fs-body-sm)/1.2 var(--font-sans); color: var(--gray); text-decoration: none; }
.lang:hover { color: var(--ink); }
@media (max-width: 839px) {
  .site-head .wrap { gap: 16px; }
  .nav-wide { display: none; }
  .nav-narrow { display: block; }
}

/* ---- buttons, chips, store buttons ---------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 14px 34px; border: 0; border-radius: var(--radius-pill); background: var(--ink); color: var(--on-color); font: var(--fw-semibold) var(--fs-button)/var(--lh-button) var(--font-sans); text-decoration: none; cursor: pointer; transition: transform var(--dur-control) var(--ease), background var(--dur-control) var(--ease), box-shadow var(--dur-control) var(--ease); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: scale(0.98); }
.btn-green { background: var(--boavia-green); box-shadow: var(--shadow-cta-green); }
.btn-green:hover { background: var(--boavia-green-hover); }
.btn-orange { background: var(--boavia-orange); }
.btn-orange:hover { background: var(--boavia-orange-hover); }
.btn-blue { background: var(--boavia-blue); }
.btn-ink { background: var(--ink); }
.btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--border); }
.btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn.sm { min-height: 48px; padding: 10px 24px; font-size: var(--fs-body); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; max-width: none; } /* a button row is not a paragraph; it must not inherit the 68ch measure */
.actions + .muted { margin-top: 12px; font-size: var(--fs-body-sm); }
.chip { display: inline-block; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--paper); font: var(--fw-bold) var(--fs-label)/var(--lh-label) var(--font-sans); color: var(--ink); }
.stores { display: flex; flex-wrap: wrap; gap: 12px; }
.store { display: inline-flex; flex-direction: column; justify-content: center; min-width: 168px; min-height: 52px; padding: 8px 18px; border-radius: var(--radius-tile); background: var(--ink); color: var(--white); text-decoration: none; }
.store-pre { font: var(--fw-semibold) var(--fs-caption)/1.2 var(--font-sans); color: var(--night-gray); }
.store-name { font: var(--fw-semibold) var(--fs-body)/1.2 var(--font-sans); }
.store:hover .store-pre { color: var(--white); }

/* ---- planner -------------------------------------------------------------------------- */
/* the three cells are not equal: "Para onde vais" is half as long again as "Agora", and equal
   columns clipped it to "Para onde va" on every look and every plate width */
.planner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 0.75fr) auto; align-items: stretch; padding: 6px; background: var(--card); border: 1px solid var(--hairline-card); border-radius: var(--radius-hero-card); box-shadow: var(--shadow-s2); }
.cell { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 56px; padding: 8px 16px; border-radius: var(--radius-cell); }
.cell + .cell { border-left: 1px solid var(--border); border-radius: 0; }
.cell:focus-within { box-shadow: inset 0 0 0 2px var(--ink); border-radius: var(--radius-cell); }
.cell span { font: var(--fw-bold) var(--fs-label)/var(--lh-label) var(--font-sans); color: var(--gray); }
.cell input { width: 100%; min-width: 0; padding: 0; border: 0; background: none; outline: none; font: var(--fw-semibold) 15.5px/1.3 var(--font-sans); color: var(--ink); }
.cell input::placeholder { color: var(--gray); opacity: 1; }
.planner .btn { align-self: center; margin: 2px; }
.planner-still { grid-template-columns: 1fr; width: min(100%, 360px); }
.planner-still .cell + .cell { border-left: 0; border-top: 1px solid var(--border); }
.planner-still .btn { margin: 8px; }
@media (max-width: 640px) {
  .planner { grid-template-columns: 1fr; }
  .cell + .cell { border-left: 0; border-top: 1px solid var(--border); }
  .planner .btn { margin: 8px; }
}

/* ---- figures: phone and flat --------------------------------------------------------- */
/* The device is drawn, not photographed, and its proportions are the handbook mock-up's own,
   measured off docs/build/screens: on an 810 px shell the bezel is 21 px and the corner radius
   100 px, so the bezel is 2.7 % of the screen width and the shell's radius 13 % of it. Both are
   written here as fractions of --phone-w, which is why the same rule is a 160 px thumbnail and a
   270 px hero object with nothing going out of proportion, and why the screen's corners stay
   concentric with the shell's - the inner radius is the outer less the bezel, and a hand-picked
   pair that misses that is the thing the eye reads as a cheap mock-up. The sheen and the side
   button do the rest of the work: a bezel this thin reads as a black border without them. */
.phone {
  --bezel: calc(var(--phone-w) * 0.027);
  --shell-r: calc(var(--phone-w) * 0.13);
  position: relative;
  width: calc(var(--phone-w) + 2 * var(--bezel));
  max-width: 100%;
  padding: var(--bezel);
  border-radius: var(--shell-r);
  background: linear-gradient(146deg,
    color-mix(in srgb, var(--ink) 72%, var(--white)) 0%,
    var(--ink) 13%, var(--ink) 87%,
    color-mix(in srgb, var(--ink) 78%, var(--white)) 100%);
  box-shadow:
    var(--shadow-s3),
    inset 0 0 0 1px color-mix(in srgb, var(--white) 14%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--white) 22%, transparent);
}
/* the side button: a real phone has an edge, and the shell needs one thing that is not a corner */
.phone::after {
  content: "";
  position: absolute;
  top: 21%;
  left: 100%;
  width: calc(var(--phone-w) * 0.013);
  height: calc(var(--phone-w) * 0.098);
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
  background: color-mix(in srgb, var(--ink) 74%, var(--white));
}
.screen { overflow: hidden; border-radius: calc(var(--shell-r) - var(--bezel)); background: var(--ink); }
.shot { display: block; width: 100%; height: auto; object-fit: cover; }
.shot-flat { overflow: hidden; max-width: 100%; border: 1px solid var(--hairline-card); border-radius: var(--radius-card); box-shadow: var(--shadow-s1); background: var(--card); }

/* ---- photos ---------------------------------------------------------------------------- */
/* The place decides the crop (--photo-ar), the manifest decides the focal point (--photo-pos);
   both arrive as custom properties, so a theme changes a crop without touching the <img>. */
.photo { margin: 0; }
.photo img { display: block; width: 100%; height: auto; aspect-ratio: var(--photo-ar, 3/2); object-fit: cover; object-position: var(--photo-pos, 50% 50%); border-radius: var(--radius-card); background: var(--paper); }
.photo--stage { --photo-ar: 4/5; }
.photo--tile { --photo-ar: 3/2; }
.photo--band, .photo--full { --photo-ar: 21/9; }
.photo--full img, .photo--full.photo--missing { border-radius: 0; }
.photo--drawing img { mix-blend-mode: multiply; border-radius: 0; background: transparent; }
.photo--missing { display: grid; place-items: center; aspect-ratio: var(--photo-ar, 3/2); background: var(--paper); border: 1px dashed var(--border); border-radius: var(--radius-card); }
.photo--drawing.photo--missing { border-style: dotted; background: transparent; }
.photo-id { font: var(--fw-semibold) var(--fs-caption)/1 var(--font-sans); color: var(--gray); }

/* a tile at the start of a body takes the left column; prose keeps its own figure-on-the-right rule */
.s:not(.s-prose) .s-body:has(> .photo--tile) { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-xl); align-items: start; }
.s:not(.s-prose) .s-body > .photo--tile { grid-column: 1; grid-row: 1 / span 6; }
.s:not(.s-prose) .s-body:has(> .photo--tile) > :not(.photo--tile) { grid-column: 2; }
.s-body + .photo--band { margin-top: var(--gap-xl); }
.photo--top { margin-bottom: var(--gap-xl); }
.tile > .photo { margin-bottom: 20px; }
.card > .photo { margin-bottom: 8px; }
.card > .photo img, .tile > .photo img, .card > .photo--missing, .tile > .photo--missing { border-radius: var(--radius-inner); }
.gallery li:has(.photo) { flex-basis: 440px; }
.s-photo-band .wrap { max-width: none; padding-inline: 0; }
.s-photo-band .s-head { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.s-photo-band:has(.photo--band) .wrap { max-width: var(--wrap); padding-inline: var(--gutter); }
.s-photo-band:has(.photo--band) .s-head { padding-inline: 0; }
@media (max-width: 839px) {
  .s:not(.s-prose) .s-body:has(> .photo--tile) { grid-template-columns: 1fr; }
  .s:not(.s-prose) .s-body > .photo--tile { grid-row: auto; }
  .s:not(.s-prose) .s-body:has(> .photo--tile) > :not(.photo--tile) { grid-column: 1; }
}

/* ---- hero ----------------------------------------------------------------------------- */
.s-hero .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap-xl); align-items: center; }
.hero-copy > * + * { margin-top: 20px; }
.hero-copy h1 + .lead { margin-top: 20px; }
.hero-copy .planner { margin-top: 36px; }
.hero-copy .stores { margin-top: 24px; }
.hero-stage { display: flex; justify-content: center; }
/* photo and phone share one cell: the phone shrinks and sits in the photo's lower right */
.hero-stage:has(.photo--stage) { display: grid; grid-template-columns: minmax(0, 1fr); }
.hero-stage:has(.photo--stage) > * { grid-area: 1 / 1; }
.hero-stage:has(.photo--stage) > .phone { --phone-w: 240px; justify-self: end; align-self: end; margin: 0 6% 6% 0; }
.s-hero-short .wrap { display: block; }
.s-hero-short .wrap:has(.hero-stage) { display: grid; }
.s-hero-short h1 { font-size: var(--fs-headline); line-height: var(--lh-headline); max-width: 18ch; }
@media (max-width: 839px) {
  .s-hero .wrap { grid-template-columns: 1fr; }
  .hero-stage { justify-content: flex-start; }
}

/* ---- doors ---------------------------------------------------------------------------- */
.doors { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.door { display: flex; flex-direction: column; gap: 12px; padding-top: 24px; border-top: 2px solid var(--hue); }
.door-mark { width: 20px; height: 20px; color: var(--hue); }
.promise { color: var(--gray); }
.door-link { align-self: flex-start; margin-top: auto; padding-bottom: 2px; font-weight: var(--fw-semibold); color: var(--ink); text-decoration: none; box-shadow: inset 0 -2px 0 var(--hue); }
.door-link:hover { color: var(--gray); }
@media (max-width: 839px) { .doors { grid-template-columns: 1fr; } }

/* ---- today / soon --------------------------------------------------------------------- */
.today, .pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.tile { padding: 28px; background: var(--paper); border-radius: var(--radius-hero-card); }
.tile h3 { margin-bottom: 16px; }
.checks, .dots { list-style: none; display: grid; gap: 10px; }
.checks li, .dots li { position: relative; padding-left: 28px; }
.checks li::before { content: ""; position: absolute; left: 2px; top: 0.45em; width: 12px; height: 7px; border-left: 2.5px solid var(--hue-text); border-bottom: 2.5px solid var(--hue-text); transform: rotate(-45deg); }
.dots li::before { content: ""; position: absolute; left: 3px; top: 0.5em; width: 9px; height: 9px; border: 2px solid var(--border); border-radius: 50%; }
.caveat { margin-top: 16px; font-size: var(--fs-body-sm); color: var(--gray); }
@media (max-width: 640px) { .today, .pair { grid-template-columns: 1fr; } }

/* ---- steps ---------------------------------------------------------------------------- */
.steps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-xl) var(--gap); }
.step { display: flex; flex-direction: column; gap: 24px; }
.step-copy { display: flex; flex-direction: column; gap: 8px; }
.step-copy p { color: var(--gray); }
.num { font: var(--fw-extrabold) 34px/1 var(--font-poster); letter-spacing: -0.02em; color: var(--hue-text); font-variant-numeric: tabular-nums; margin-bottom: 8px; }
.step .phone, .step .planner-still { margin-top: auto; }
@media (max-width: 1020px) {
  .steps { grid-template-columns: 1fr; }
  .step { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--gap); }
}
@media (max-width: 640px) { .step { grid-template-columns: 1fr; } }

/* ---- facts ---------------------------------------------------------------------------- */
.facts { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); margin-bottom: 36px; }
.facts li { display: flex; flex-direction: column; gap: 6px; padding-top: 16px; border-top: 2px solid var(--hue); }
.fact-num { font: var(--fw-extrabold) var(--fs-headline)/1 var(--font-poster); letter-spacing: -0.02em; color: var(--hue-text); }
@media (max-width: 839px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .facts { grid-template-columns: 1fr; } }

/* ---- prose ---------------------------------------------------------------------------- */
.prose > * + * { margin-top: 1em; }
.prose .list { padding-left: 1.2em; }
.prose .list li + li { margin-top: 6px; }
.s-prose .s-body:has(figure) { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap-xl); align-items: start; }
.s-prose .s-body:has(figure) > :not(figure) { grid-column: 1; }
.s-prose .s-body > figure { grid-column: 2; grid-row: 1 / span 4; justify-self: center; }
.s-prose .s-body > .actions { margin-top: 28px; }
.s-prose .s-body > .actions + .muted { margin-top: 12px; }
.links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.links a { font-weight: var(--fw-semibold); color: var(--fg, var(--ink)); }
@media (max-width: 839px) {
  .s-prose .s-body:has(figure) { grid-template-columns: 1fr; }
  .s-prose .s-body > figure { grid-column: 1; grid-row: auto; justify-self: start; }
}

/* ---- cards, rungs, faq, cta ----------------------------------------------------------- */
.cards { list-style: none; display: grid; gap: var(--gap); }
.cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card { display: flex; flex-direction: column; gap: 8px; padding: 24px; background: var(--card); border: 1px solid var(--hairline-card); border-radius: var(--radius-card); box-shadow: var(--shadow-s1); }
.card p { color: var(--gray); }
.card .chip { align-self: flex-start; margin-top: auto; }
@media (max-width: 1020px) { .cards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 839px) { .cards-3 { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .cards-2, .cards-4 { grid-template-columns: 1fr; } }

.rungs { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--gap); }
.rung { padding-top: 16px; border-top: 2px solid var(--hue); }
.rung p { color: var(--gray); }
.price { margin: 8px 0 8px; font: var(--fw-extrabold) var(--fs-headline)/1 var(--font-poster); letter-spacing: -0.02em; color: var(--ink); }
.rung-gated .price { font: var(--fw-semibold) var(--fs-lead)/1.3 var(--font-sans); color: var(--gray); }
.rungs + .muted { margin-top: 24px; font-size: var(--fs-body-sm); }

.faqs { max-width: 68ch; border-top: 1px solid var(--border); }
.faq { border-bottom: 1px solid var(--border); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; font: var(--fw-semibold) var(--fs-lead)/1.4 var(--font-sans); cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.plus { flex: none; width: 20px; height: 20px; transition: transform var(--dur-control) var(--ease); }
.faq[open] .plus { transform: rotate(45deg); }
.faq-a { padding-bottom: 20px; }
.faq-a p { color: var(--gray); }

.s-cta .s-head { margin-bottom: 24px; }
.cta { display: flex; flex-direction: column; }

/* ---- tables --------------------------------------------------------------------------- */
.table-wrap { overflow-x: auto; }
.table, .article table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.table caption { padding-bottom: 12px; text-align: left; caption-side: top; font-size: var(--fs-body-sm); color: var(--gray); }
.table th, .article th { padding: 10px 16px 10px 0; border-bottom: 1.5px solid var(--ink); text-align: left; font: var(--fw-bold) var(--fs-label)/var(--lh-label) var(--font-sans); color: var(--gray); }
.table td, .article td { padding: 14px 16px 14px 0; border-bottom: 1px solid var(--border); vertical-align: top; }
.table-wrap + .muted { margin-top: 16px; font-size: var(--fs-body-sm); }
@media (max-width: 640px) {
  .table thead, .article thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table tr, .article tr { display: grid; gap: 4px; padding: 14px 0; border-bottom: 1px solid var(--border); }
  .table td, .article td { display: block; padding: 0; border: 0; }
  .table td::before, .article td::before { content: attr(data-th); display: block; font: var(--fw-bold) var(--fs-label)/var(--lh-label) var(--font-sans); color: var(--gray); }
}

/* ---- identification ------------------------------------------------------------------ */
.ident dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--gap); }
.ident dt { margin-bottom: 4px; font: var(--fw-bold) var(--fs-label)/var(--lh-label) var(--font-sans); color: var(--fg-muted, var(--gray)); }
.ident a { color: var(--fg, var(--ink)); }
.ident-extra { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-xl); margin-top: 48px; }
.ident-extra h3 { margin-bottom: 8px; }
.ident-extra p { color: var(--fg-muted, var(--gray)); }
.ident-extra .links { margin-top: 12px; }
@media (max-width: 640px) { .ident-extra { grid-template-columns: 1fr; } }

/* ---- legal ---------------------------------------------------------------------------- */
.legal { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--gap-xl); align-items: start; }
.toc { position: sticky; top: 24px; }
.toc ol { list-style: none; display: grid; gap: 8px; }
.toc a { font: var(--fw-semibold) var(--fs-body-sm)/1.4 var(--font-sans); color: var(--gray); text-decoration: none; }
.toc a:hover { color: var(--ink); }
.article { max-width: 68ch; }
.article h2 { margin: 2em 0 0.75em; font: var(--fw-bold) 24px/1.25 var(--font-sans); letter-spacing: 0; max-width: none; }
.article > .legal-part:first-child h2, .legal-notice + .legal-part h2 { margin-top: 0; }
.article p, .article ul, .article ol, .article dl, .article table { margin-bottom: 1em; }
.article ul, .article ol { padding-left: 1.3em; }
.article li + li { margin-top: 4px; }
.article dt { font-weight: var(--fw-bold); }
.article dd { margin: 0 0 0.6em; }
.legal-notice { margin-bottom: 32px; padding: 16px 20px; background: var(--paper); border-radius: var(--radius-card); font-size: var(--fs-body-sm); }
@media (max-width: 839px) {
  .legal { grid-template-columns: 1fr; }
  .toc { position: static; }
}

/* ---- gallery, press, swatches --------------------------------------------------------- */
.gallery { list-style: none; display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--gap-xl); }
.gallery li { flex: 1 1 280px; display: flex; justify-content: center; max-width: 100%; }
.gallery li:has(.shot-flat) { flex-basis: 440px; }
/* three screens are a row, not a row and a widow: at the width a phone takes when it stands alone
   the third one wraps on every look, so a screen shown in a gallery is a little narrower */
.gallery .phone { --phone-w: 260px; }
.gallery + .muted { margin-top: 16px; font-size: var(--fs-body-sm); }
.press { max-width: 68ch; }
.boiler + .boiler { margin-top: 28px; }
.boiler h3 { margin-bottom: 8px; }
.downloads { list-style: none; display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.downloads a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 18px; border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1.5px var(--border); color: var(--ink); text-decoration: none; font-weight: var(--fw-semibold); }
.contact { margin-top: 28px; }
.swatches { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--gap); }
.swatch-chip { display: block; height: 72px; margin-bottom: 12px; border: 1px solid var(--hairline-card); border-radius: var(--radius-tile); }
.swatch p { font-size: var(--fs-body-sm); color: var(--gray); }

/* ---- footer --------------------------------------------------------------------------- */
.site-foot { margin-top: calc(var(--section-y) / 2); padding-block: 56px 40px; border-top: 1px solid var(--border); }
.site-foot .wrap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gap-xl) var(--gap); }
.footer-brand { color: var(--ink); }
.footer-brand .wordmark { height: 22px; }
.tagline { margin-top: 10px; font-size: var(--fs-body-sm); color: var(--gray); }
.footer-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.footer-cols h2 { margin-bottom: 12px; font: var(--fw-bold) var(--fs-label)/var(--lh-label) var(--font-sans); color: var(--gray); letter-spacing: 0; max-width: none; }
.footer-cols ul { list-style: none; display: grid; gap: 8px; }
.footer-cols a { font-size: var(--fs-body-sm); color: var(--ink); text-decoration: none; }
.footer-cols a:hover { text-decoration: underline; }
.footer-ident { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 24px; padding-top: 20px; border-top: 1px solid var(--hairline); font-size: var(--fs-body-sm); color: var(--gray); max-width: none; }
.footer-meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 24px; font-size: var(--fs-caption); max-width: none; }
.lang-foot { margin-left: 0; }
@media (max-width: 839px) {
  .site-foot .wrap { grid-template-columns: 1fr; }
  .footer-cols { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}

/* ---- motion, print -------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
  .btn:hover { transform: none; }
}
@media print {
  @page { margin: 22mm; }
  .skip, .nav-wide, .nav-narrow, .lang, .footer-cols, .footer-meta, .stores, .planner, .btn { display: none; }
  .site-head, .site-foot { border: 0; }
  .legal { display: block; }
  .toc { display: none; }
  .article a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; color: var(--gray); }
}

/* ---- look 4: Percurso ---- */
/* look 4 - «Percurso». The strip map printed on every stop plate and inside every vehicle: one
   straight upright, a dot per stop with its name beside it, a ring at the origin and a ring at the
   terminus. The page is that diagram read downward: the origin roundel sits on the h1, every
   section head is a stop in its public's colour, the footer is the terminus ring.

   Round 3 gives the diagram a second surface. Where a section carries a real photograph the whole
   band goes edge to edge and dark - the picture with its own night laid over it - and the line
   carries on across it in white, the way a route diagram is printed on a lit panel at a terminal.
   Everywhere else the page stays white and the line stays ink, so the two surfaces alternate down
   the page and the reader always knows which one they are standing on.

   Three rules hold the round-3 brief:
   1. a photograph is never a rounded frame inside a rounded frame. This look has no boxes at all -
      a tile and a card are a column under a hairline, not a panel - so a picture standing in one is
      already an object on the page.
   2. a photographic band is a FIELD split in two, never a picture with a veil over it: the field
      keeps one side and holds the type, the picture takes the other side whole, the edge between
      them is hard, and the upright, the dots, the numerals and the buttons invert.
   3. yellow is the mark and it appears on the ink and the blue fields only: brand.md 3.2 forbids a
      yellow element on stage-green outright, so the rider field marks in white instead. On the
      white page yellow is 1,62:1 and simply is not there, which is why the fields are where the
      fourth hue lives at all.

   Mechanism: the upright is a ::before on every section's .wrap (the section's padding lives on the
   wrap, so the line has no gaps). On a field it moves onto the SECTION instead, because the wrap
   has to go static for the picture to fill the band edge to edge, and it is placed by the same
   formula the full-width photo band already used. A head's dot is a ::before on its h2, offset by
   --dot-cx, the upright's centre measured from the head's left edge, one formula at every width.
   Every rule is scoped to [data-look="4"]; every colour is a token or the one palette property. */

/* ---- palette: the one value the tokens lack ------------------------------------------------ */
[data-look="4"] { --look-stone: #E6E6E1; }

/* ---- geometry ------------------------------------------------------------------------------ */
[data-look="4"] {
  --section-y: clamp(72px, 10vw, 128px);
  --rail: 56px;
  --rail-w: 3px;
  --rail-x: calc(var(--gutter) + 10px);
  --inset-l: calc(var(--gutter) + var(--rail));
  --dot-cx: calc(var(--rail-x) + var(--rail-w) / 2 - var(--gutter) - var(--rail));
  --dot: 14px;
  --origin: 28px;
  --origin-ring: 4px;
  --halo: var(--canvas);
  --rail-c: var(--ink);
  --hero-pt: clamp(24px, 4vw, 56px);
  --h1: clamp(44px, 6.2vw, 84px);
}

/* ---- sections: the upright runs the wrap's full height ------------------------------------- */
[data-look="4"] .s { padding-block: 0; }
[data-look="4"] .s > .wrap { position: relative; padding-block: calc(var(--section-y) / 2); padding-left: var(--inset-l); }
[data-look="4"] .s > .wrap::before { content: ""; position: absolute; top: 0; bottom: 0; left: var(--rail-x); width: var(--rail-w); background: var(--rail-c); pointer-events: none; }

/* ---- the dark fields: a section that owns a photograph -------------------------------------- */
/* The four places a real photograph can fill a band. A drawing is decorative and never a field;
   a slot whose picture is missing still becomes one, so the layout is the same before and after
   the photograph arrives. */
[data-look="4"] .s-hero:has(.photo--stage:not(.photo--drawing)),
[data-look="4"] .s-photo-band:has(.photo--full:not(.photo--drawing)),
[data-look="4"] .s-facts:has(> .wrap > .photo--band:not(.photo--drawing)),
[data-look="4"] .s-paga:has(> .wrap > .photo--band:not(.photo--drawing)) {
  --field: var(--hue-stage);
  --fg: var(--white);
  --fg-muted: color-mix(in srgb, var(--white) 78%, var(--field));
  --mark: var(--boavia-yellow);
  --halo: var(--field);
  --dot-c: var(--mark);
  --rail-c: var(--white);
  --btn-bg: var(--white);
  --btn-fg: var(--ink);
  --btn-hover: var(--paper);
  --btn-shadow: none;
  --btn-ring: color-mix(in srgb, var(--white) 45%, transparent);
  --border: color-mix(in srgb, var(--white) 30%, transparent);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(400px, 50vh, 620px);
  background: var(--field);
  color: var(--fg);
}
/* orange has no deep shade in the palette, so the merchant's bands take the ink field and the
   hue stays where it always was - the dot, the door and the button on the white page */
[data-look="4"] .s-hero[data-hue="orange"]:has(.photo--stage:not(.photo--drawing)),
[data-look="4"] .s-paga[data-hue="orange"]:has(> .wrap > .photo--band:not(.photo--drawing)) { --field: var(--ink); }
/* brand.md 3.2: a yellow element is never placed on stage-green, so the rider field marks white */
[data-look="4"] .s-hero[data-hue="green"]:has(.photo--stage:not(.photo--drawing)),
[data-look="4"] .s-facts[data-hue="green"]:has(> .wrap > .photo--band:not(.photo--drawing)) { --mark: var(--white); }

/* the wrap goes static so the picture can fill the whole band, and the upright moves onto the
   section, placed off the centred content column exactly as it is off the wrap everywhere else */
[data-look="4"] .s-hero:has(.photo--stage:not(.photo--drawing)) > .wrap,
[data-look="4"] .s-photo-band:has(.photo--full:not(.photo--drawing)) > .wrap,
[data-look="4"] .s-facts:has(> .wrap > .photo--band:not(.photo--drawing)) > .wrap,
[data-look="4"] .s-paga:has(> .wrap > .photo--band:not(.photo--drawing)) > .wrap { position: static; }
[data-look="4"] .s-hero:has(.photo--stage:not(.photo--drawing)) > .wrap::before,
[data-look="4"] .s-photo-band:has(.photo--full:not(.photo--drawing)) > .wrap::before,
[data-look="4"] .s-facts:has(> .wrap > .photo--band:not(.photo--drawing)) > .wrap::before,
[data-look="4"] .s-paga:has(> .wrap > .photo--band:not(.photo--drawing)) > .wrap::before { content: none; }
[data-look="4"] .s-hero:has(.photo--stage:not(.photo--drawing))::before,
[data-look="4"] .s-photo-band:has(.photo--full:not(.photo--drawing))::before,
[data-look="4"] .s-facts:has(> .wrap > .photo--band:not(.photo--drawing))::before,
[data-look="4"] .s-paga:has(> .wrap > .photo--band:not(.photo--drawing))::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc((100% - min(100%, var(--wrap))) / 2 + var(--rail-x));
  width: var(--rail-w);
  z-index: 2;
  background: var(--rail-c);
  pointer-events: none;
}
/* on a hero the line still starts at the origin ring on the h1 */
[data-look="4"] .s-hero:has(.photo--stage:not(.photo--drawing))::before { top: calc(var(--hero-pt) + var(--origin-extra, 0px) + 0.515 * var(--h1)); }

/* the picture itself: out of flow, taking one side of the band whole. No tint and no gradient -
   the field simply stops where the picture starts, which is the edge Bolt uses and the reason its
   photographs still look like photographs. Below 840 the two stack, field over picture. */
[data-look="4"] .s-hero:has(.photo--stage:not(.photo--drawing)) .photo--stage,
[data-look="4"] .s-photo-band .photo--full:not(.photo--drawing),
[data-look="4"] .s-facts > .wrap > .photo--band:not(.photo--drawing),
[data-look="4"] .s-paga > .wrap > .photo--band:not(.photo--drawing) { position: absolute; inset: 0 0 0 auto; width: 46%; z-index: 0; margin: 0; }
[data-look="4"] .s-hero:has(.photo--stage:not(.photo--drawing)) .photo--stage img,
[data-look="4"] .s-photo-band .photo--full:not(.photo--drawing) img,
[data-look="4"] .s-facts > .wrap > .photo--band:not(.photo--drawing) img,
[data-look="4"] .s-paga > .wrap > .photo--band:not(.photo--drawing) img { --photo-ar: auto; height: 100%; border-radius: 0; }

[data-look="4"] .s-hero:has(.photo--stage) .photo--stage.photo--missing,
[data-look="4"] .s-photo-band .photo--full.photo--missing,
[data-look="4"] .s-facts > .wrap > .photo--band.photo--missing,
[data-look="4"] .s-paga > .wrap > .photo--band.photo--missing { background: color-mix(in srgb, var(--white) 8%, transparent); border: 0; border-radius: 0; }

/* the words keep to the field's side of the edge */
[data-look="4"] .s-hero:has(.photo--stage:not(.photo--drawing)) .hero-copy,
[data-look="4"] .s-photo-band > .wrap > .s-head,
[data-look="4"] .s-facts > .wrap > .s-head,
[data-look="4"] .s-facts > .wrap > .s-body,
[data-look="4"] .s-paga > .wrap > .s-head,
[data-look="4"] .s-paga > .wrap > .s-body { position: relative; z-index: 1; }
[data-look="4"] .s-photo-band:has(.photo--full:not(.photo--drawing)) > .wrap > .s-head,
[data-look="4"] .s-facts:has(> .wrap > .photo--band:not(.photo--drawing)) > .wrap > .s-head,
[data-look="4"] .s-facts:has(> .wrap > .photo--band:not(.photo--drawing)) > .wrap > .s-body,
[data-look="4"] .s-paga:has(> .wrap > .photo--band:not(.photo--drawing)) > .wrap > .s-head,
[data-look="4"] .s-paga:has(> .wrap > .photo--band:not(.photo--drawing)) > .wrap > .s-body { max-width: 50%; }
/* The hero is the one band whose copy is a GRID COLUMN rather than a block in the wrap, so 50% of it
   is not 50% of the band: the 7fr column already reaches past the seam, and «Count the journeys
   without touching the network» ran a line onto the photograph. The measure below is the real
   distance from the content edge to the seam - the picture is 46% of the SECTION, the wrap is
   centred inside it and inset by the rail - less a gap, so the words stop before the edge whatever
   the viewport is. */
[data-look="4"] .s-hero:has(.photo--stage:not(.photo--drawing)) .hero-copy {
  max-width: calc(54vw - (100vw - min(100vw, var(--wrap))) / 2 - var(--inset-l) - clamp(20px, 2.5vw, 44px));
}
@media (max-width: 839px) {
  [data-look="4"] .s-hero:has(.photo--stage:not(.photo--drawing)) .hero-copy { max-width: none; }
  [data-look="4"] .s-hero:has(.photo--stage:not(.photo--drawing)) .photo--stage,
  [data-look="4"] .s-photo-band .photo--full:not(.photo--drawing),
  [data-look="4"] .s-facts > .wrap > .photo--band:not(.photo--drawing),
  [data-look="4"] .s-paga > .wrap > .photo--band:not(.photo--drawing) { inset: auto 0 0 0; width: auto; height: 240px; }
  [data-look="4"] .s-hero:has(.photo--stage:not(.photo--drawing)),
  [data-look="4"] .s-photo-band:has(.photo--full:not(.photo--drawing)),
  [data-look="4"] .s-facts:has(> .wrap > .photo--band:not(.photo--drawing)),
  [data-look="4"] .s-paga:has(> .wrap > .photo--band:not(.photo--drawing)) { padding-bottom: calc(240px + var(--section-y) / 2); }
  [data-look="4"] .s-photo-band:has(.photo--full:not(.photo--drawing)) > .wrap > .s-head,
  [data-look="4"] .s-facts:has(> .wrap > .photo--band:not(.photo--drawing)) > .wrap > .s-head,
  [data-look="4"] .s-facts:has(> .wrap > .photo--band:not(.photo--drawing)) > .wrap > .s-body,
  [data-look="4"] .s-paga:has(> .wrap > .photo--band:not(.photo--drawing)) > .wrap > .s-head,
  [data-look="4"] .s-paga:has(> .wrap > .photo--band:not(.photo--drawing)) > .wrap > .s-body { max-width: none; }
}

/* ---- what a field switches, read everywhere with its white-page value as the fallback -------- */
/* Custom properties inherit, so every rule below is written once, unscoped to any section: inside
   a field the field's value applies, outside it the fallback is exactly what base.css already had. */
[data-look="4"] .lead { color: var(--fg-muted, var(--gray)); }
[data-look="4"] .kicker { color: var(--fg-muted, var(--gray)); }
[data-look="4"] .kicker::before { background: var(--mark, var(--hue)); }
[data-look="4"] .caveat { color: var(--fg-muted, var(--gray)); }
[data-look="4"] .promise { color: var(--fg-muted, var(--gray)); }

[data-look="4"] .photo-id { color: var(--fg-muted, var(--gray)); }
[data-look="4"] .fact-num { color: var(--mark, var(--hue-text)); }
[data-look="4"] .num { color: var(--mark, var(--hue-text)); }
[data-look="4"] .facts li { border-top-color: var(--mark, var(--hue)); }
[data-look="4"] .checks li::before { border-color: var(--mark, var(--hue-text)); }
[data-look="4"] .prose a, [data-look="4"] .caveat a { color: var(--fg, var(--ink)); }
[data-look="4"] :focus-visible { outline-color: var(--fg, var(--ink)); }
[data-look="4"] .btn { background: var(--btn-bg, var(--ink)); color: var(--btn-fg, var(--on-color)); }
[data-look="4"] .btn-green { background: var(--btn-bg, var(--boavia-green)); box-shadow: var(--btn-shadow, var(--shadow-cta-green)); }
[data-look="4"] .btn-green:hover { background: var(--btn-hover, var(--boavia-green-hover)); }
[data-look="4"] .btn-orange { background: var(--btn-bg, var(--boavia-orange)); }
[data-look="4"] .btn-orange:hover { background: var(--btn-hover, var(--boavia-orange-hover)); }
[data-look="4"] .btn-blue { background: var(--btn-bg, var(--boavia-blue)); }
[data-look="4"] .btn-blue:hover { background: var(--btn-hover, var(--boavia-blue)); }
[data-look="4"] .btn-ink { background: var(--btn-bg, var(--ink)); }
[data-look="4"] .btn-ink:hover { background: var(--btn-hover, var(--ink)); }
[data-look="4"] .btn-ghost { background: transparent; color: var(--fg, var(--ink)); box-shadow: inset 0 0 0 1.5px var(--btn-ring, var(--border)); }
[data-look="4"] .btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--fg, var(--ink)); }
/* the planner is a white object standing on the field, so every token goes back to its own value */
[data-look="4"] .planner,
[data-look="4"] .planner-still {
  --fg: initial;
  --fg-muted: initial;
  --mark: initial;
  --btn-bg: initial;
  --btn-fg: initial;
  --btn-hover: initial;
  --btn-shadow: initial;
  --btn-ring: initial;
  color: var(--ink);
}

/* ---- heads: the stop and its name ------------------------------------------------------------ */
[data-look="4"] .s-head { margin-bottom: clamp(32px, 4vw, 48px); }
[data-look="4"] .s-head > * + * { margin-top: 14px; }
[data-look="4"] .s-head h2 { position: relative; max-width: 22ch; text-wrap: balance; }
[data-look="4"] .s-head h2::before { content: ""; position: absolute; left: calc(var(--dot-cx) - var(--dot) / 2); top: calc(0.515em - var(--dot) / 2); width: var(--dot); height: var(--dot); border-radius: 50%; background: var(--dot-c, var(--hue)); box-shadow: 0 0 0 3px var(--halo); }

/* ---- header: the wordmark on the content edge, the rail column empty beside it ------------- */
[data-look="4"] .site-head .wrap { min-height: 76px; padding-left: var(--inset-l); }

/* ---- hero: the origin roundel on the h1, the line starts there ------------------------------ */
[data-look="4"] .s-hero > .wrap { align-items: start; padding-top: var(--hero-pt); padding-bottom: calc(var(--section-y) * 0.6); }
[data-look="4"] .s-hero > .wrap::before { top: calc(var(--hero-pt) + var(--origin-extra, 0px) + 0.515 * var(--h1)); }
[data-look="4"] .s-hero:has(.hero-copy > .kicker) { --origin-extra: 37px; }
[data-look="4"] .s-hero-short { --h1: clamp(34px, 4.2vw, 54px); }
[data-look="4"] h1 { position: relative; font-size: var(--h1); line-height: 1.03; letter-spacing: -0.03em; max-width: 14ch; text-wrap: balance; }
[data-look="4"] .s-hero-short h1 { font-size: var(--h1); line-height: 1.06; max-width: 20ch; }
[data-look="4"] h1::before { content: ""; position: absolute; box-sizing: border-box; left: calc(var(--dot-cx) - var(--origin) / 2); top: calc(0.515em - var(--origin) / 2); width: var(--origin); height: var(--origin); border: var(--origin-ring) solid var(--rail-c); border-radius: 50%; background: var(--halo); }
[data-look="4"] h1::after { content: ""; position: absolute; left: calc(var(--dot-cx) - 5px); top: calc(0.515em - 5px); width: 10px; height: 10px; border-radius: 50%; background: var(--mark, var(--rail-c)); }
[data-look="4"] .hero-copy > * + * { margin-top: 24px; }
[data-look="4"] .hero-copy h1 + .lead { margin-top: 24px; }
[data-look="4"] .hero-copy .lead { font-size: 19px; line-height: 1.5; max-width: 30em; }
[data-look="4"] .hero-copy .planner { margin-top: 36px; }
[data-look="4"] .hero-copy .stores { margin-top: 20px; }
[data-look="4"] .hero-copy .actions { margin-top: 32px; }
[data-look="4"] .hero-stage:has(.photo--stage) > .phone { --phone-w: 248px; position: relative; z-index: 1; margin: 0 5% 5% 0; }
[data-look="4"] .s-hero-short .hero-stage > .photo--stage:not(.photo--drawing) { --photo-ar: 1/1; }

/* ---- photographs: the view from the stop ---------------------------------------------------- */
[data-look="4"] .photo { position: relative; }
[data-look="4"] .photo img { border-radius: var(--radius-card); }
[data-look="4"] .photo--full img, [data-look="4"] .photo--drawing img { border-radius: 0; }
[data-look="4"] .card > .photo img, [data-look="4"] .tile > .photo img, [data-look="4"] .card > .photo--missing, [data-look="4"] .tile > .photo--missing { border-radius: var(--radius-card); }

[data-look="4"] .photo--missing { background: var(--look-stone); border: 1px dashed var(--border); border-radius: var(--radius-card); }
[data-look="4"] .photo--full.photo--missing { border-radius: 0; border-inline: 0; }
[data-look="4"] .photo--drawing.photo--missing { background: transparent; border-style: dotted; border-radius: 0; }

/* ---- the photo band is now a field, so its head is the only thing standing on it ------------ */
[data-look="4"] .s-photo-band > .wrap { padding-inline: 0; }
[data-look="4"] .s-photo-band .s-head { padding-left: var(--inset-l); margin-bottom: 0; }
[data-look="4"] .s-photo-band .s-body { display: contents; }

/* ---- paper bands ------------------------------------------------------------------------------ */
/* the page lands on a flat ink band before the footer. The closing block is the one section that
   is all words and no picture, which is where Bolt puts its dark field too; the rail and the dot's
   halo invert with it, so the upright still runs unbroken through the band. */
[data-look="4"] .s-identification {
  --field: var(--ink);
  --fg: var(--white);
  --fg-muted: color-mix(in srgb, var(--white) 78%, var(--ink));
  --mark: var(--boavia-yellow);
  --dot-c: var(--mark);
  --halo: var(--ink);
  --rail-c: var(--white);
  --border: color-mix(in srgb, var(--white) 30%, transparent);
  background: var(--field);
  color: var(--fg);
}

[data-look="4"] :is(.s-today-soon, .s-facts, .s-pair, .s-pricing, .s-gallery, .s-paga) { --halo: var(--paper); background: var(--paper); }
[data-look="4"] :is(.s-today-soon, .s-facts, .s-pair, .s-pricing, .s-gallery, .s-paga) .chip { background: var(--card); }

/* The yellow intelligence closes the home page. Yellow is a mark and never a field -- not a wall,
   and never on stage green -- so it arrives the way looks 2 and 3 already spend it: as a chip
   inside a white card, which is a mark on paper. The arcs in the drawing above it are the rest. */
[data-look="4"] .s-inteligencia .card .chip { background: var(--boavia-yellow); color: var(--ink); }

/* ---- doors: three names under their roundels, no rule above them ---------------------------- */
[data-look="4"] .s-doors .s-head { margin-bottom: 48px; }
[data-look="4"] .doors { gap: 40px var(--gap-xl); }
[data-look="4"] .door { gap: 14px; padding-top: 0; border-top: 0; }
[data-look="4"] .door-mark { width: 36px; height: 36px; margin-bottom: 6px; }
[data-look="4"] .promise { font-size: var(--fs-lead); line-height: var(--lh-lead); }
[data-look="4"] .door-link { margin-top: 6px; }

/* ---- today / soon and the pair: plain columns, no tiles -------------------------------------- */
[data-look="4"] .tile { padding: 0; background: none; border-radius: 0; }
[data-look="4"] .tile h3 { margin-bottom: 14px; }
[data-look="4"] .tile > .photo { margin-bottom: 22px; }
[data-look="4"] .today, [data-look="4"] .pair { gap: 36px var(--gap-xl); }
[data-look="4"] .checks, [data-look="4"] .dots { gap: 12px; }
[data-look="4"] .caveat { margin-top: 24px; }

/* ---- steps ------------------------------------------------------------------------------------ */
[data-look="4"] .step-copy { gap: 10px; }
[data-look="4"] .step h3 { font-size: 21px; line-height: 1.2; }
[data-look="4"] .steps:not(:has(.phone, .planner)) .step { padding-top: 20px; border-top: 1px solid var(--border); }

/* ---- facts, tiers, positions: columns under a hairline, never boxes ------------------------- */
[data-look="4"] .facts { gap: 32px var(--gap-xl); margin-bottom: 40px; }
[data-look="4"] .facts li { padding-top: 18px; border-top: 1px solid var(--mark, var(--hue)); }
[data-look="4"] .rungs { gap: 32px var(--gap-xl); }
[data-look="4"] .rung { padding-top: 18px; border-top: 1px solid var(--border); }
[data-look="4"] .cards { gap: 36px var(--gap-xl); }
[data-look="4"] .card { padding: 20px 0 0; background: none; border: 0; border-top: 1px solid var(--border); border-radius: 0; box-shadow: none; }
[data-look="4"] .cards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ---- prose ------------------------------------------------------------------------------------ */
[data-look="4"] .s-comercio .list { font-size: var(--fs-lead); line-height: var(--lh-lead); }
[data-look="4"] .s-comercio .list li + li { margin-top: 10px; }

/* ---- footer: the terminus ring on the paper band -------------------------------------------- */
[data-look="4"] .site-foot { margin-top: 0; padding-block: 0; border-top: 0; background: var(--paper); }
[data-look="4"] .site-foot > .wrap { position: relative; padding-top: 72px; padding-bottom: 40px; padding-left: var(--inset-l); }
[data-look="4"] .site-foot > .wrap::before { content: ""; position: absolute; box-sizing: border-box; top: calc(-1 * var(--origin) / 2); left: calc(var(--rail-x) + var(--rail-w) / 2 - var(--origin) / 2); width: var(--origin); height: var(--origin); border: var(--origin-ring) solid var(--ink); border-radius: 50%; background: var(--canvas); }
[data-look="4"] .footer-ident { border-top-color: var(--border); }

/* ---- below 840: the upright rides the viewport edge, the content keeps its width ----------- */
@media (max-width: 839px) {
  [data-look="4"] { --rail: 12px; --rail-x: 10px; --dot: 12px; --origin: 22px; --origin-ring: 3px; }
  [data-look="4"] h1::after { width: 8px; height: 8px; left: calc(var(--dot-cx) - 4px); top: calc(0.515em - 4px); }
  [data-look="4"] .hero-stage:has(.photo--stage) > .phone { --phone-w: 200px; }
}
@media (max-width: 640px) {
  [data-look="4"] .cards-4 { grid-template-columns: 1fr; }
}

/* ---- generated: screen crops and swatches ---- */
.shot--trip-planner{aspect-ratio:768/1136}
.shot--trip-results{aspect-ratio:768/1136}
.shot--ticket-qr{aspect-ratio:768/1136}
.shot--campaign-results{aspect-ratio:768/1136}
.photo--rua-paragem{--photo-pos:100% 50%}
.photo--praca-tarde{--photo-pos:55% 50%}
.photo--telhados-vale{--photo-pos:50% 50%}
.photo--montra-pastelaria{--photo-pos:50% 50%;--photo-ar:4/5}
.photo--estrada-nacional{--photo-pos:70% 50%}
.photo--terminal-madrugada{--photo-pos:50% 50%}
.photo--azulejo-sinal{--photo-pos:100% 50%}
.photo--esplanada-manha{--photo-pos:50% 50%}
.photo--bancos-vazios{--photo-pos:50% 50%}
.photo--reflexo-janela{--photo-pos:50% 50%;--photo-ar:1/1}
.photo--paragem-noite{--photo-pos:50% 50%;--photo-ar:4/5}
.photo--rede-corredor{--photo-pos:50% 100%;--photo-ar:6/1}
.photo--rede-mapa{--photo-pos:50% 50%;--photo-ar:1/1}
.photo--rede-vertical{--photo-pos:0% 50%;--photo-ar:4/5}
.photo--rede-viagem{--photo-pos:50% 50%}
.swatch--boavia-green .swatch-chip{background:var(--boavia-green)}
.swatch--boavia-orange .swatch-chip{background:var(--boavia-orange)}
.swatch--boavia-blue .swatch-chip{background:var(--boavia-blue)}
.swatch--boavia-yellow .swatch-chip{background:var(--boavia-yellow)}
.swatch--ink .swatch-chip{background:var(--ink)}
.swatch--paper .swatch-chip{background:var(--paper)}

/* ---- the scroll film ---- */
:root{--story-vh:28.65}
.scroller .stage{background-image:url(/film.a6dacd3b/md/f0000.webp);background-size:cover;background-position:center}
/* ---- the phone screen kit (shared by 5/ and 6/) ---------------------------------------------
   One screen is 360 x 768 CSS pixels, mapped by the page onto four rendered corners. Type is set
   larger than an app would, because the rendered phone is small on the page. */

.bvs {
  position: absolute; left: 0; top: 0; width: 360px; height: 768px; overflow: hidden;
  transform-origin: 0 0; border-radius: 40px; background: var(--canvas); color: var(--ink);
  font-family: var(--font-sans); -webkit-font-smoothing: antialiased; backface-visibility: hidden;
  text-align: left; line-height: 1.2; user-select: none;
}
/* the glass: a soft sheen across the top left, so the screen sits under the rendered glass */
.bvs::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(122deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.06) 26%, rgba(255,255,255,0) 44%);
}
.bvs p { margin: 0 }
.bvs svg { width: 22px; height: 22px; flex: none }
.bvs-status { position: relative; z-index: 3; height: 48px; padding: 0 30px; display: flex; align-items: center; justify-content: space-between; font-weight: 600; font-size: 17px }
.bvs-sys { display: flex; gap: 8px; align-items: center }
.bvs-sig { width: 18px; height: 11px; background: linear-gradient(90deg, currentColor 0 22%, transparent 22% 26%, currentColor 26% 48%, transparent 48% 52%, currentColor 52% 74%, transparent 74% 78%, currentColor 78%); clip-path: polygon(0 100%, 100% 0, 100% 100%) }
.bvs-bat { width: 25px; height: 12px; border: 2px solid currentColor; border-radius: 4px; position: relative; opacity: .9 }
.bvs-bat::after { content: ""; position: absolute; inset: 1px 6px 1px 1px; background: currentColor; border-radius: 1px }
.bvs-body { position: absolute; inset: 48px 0 0; padding: 6px 22px 28px }
.bvs-body--dark { background: #0E1012; color: #F2F2EE; padding: 0 }
.bvs--verdict, .bvs--scan { background: #0E1012; color: #F2F2EE }
.bvs-appbar { height: 44px; display: flex; align-items: center }
.bvs-mark { font-family: var(--font-poster); font-weight: 400; font-size: 26px; letter-spacing: -.01em }

.bvs-btn {
  display: flex; align-items: center; justify-content: center; height: 62px; border-radius: 999px;
  background: var(--boavia-green); color: var(--on-color); font-weight: 600; font-size: 21px;
  box-shadow: var(--shadow-cta-green); transition: transform .18s var(--ease), filter .18s;
}
.bvs-btn--ink { background: var(--ink); box-shadow: none }
.bvs-dock { position: absolute; left: 22px; right: 22px; bottom: 30px }
.bvs-tick { display: inline-flex; width: 30px; height: 30px; border-radius: 50%; background: var(--boavia-green); color: #fff; align-items: center; justify-content: center; margin-right: 10px; vertical-align: middle }
.bvs-tick svg { width: 20px; height: 20px }
.bvs-over { font-size: 15px; font-weight: 600; color: var(--gray); letter-spacing: .01em }
.bvs-dest { font-size: 32px; font-weight: 700; letter-spacing: -.02em; margin-top: 4px !important }
.bvs-sub { font-size: 17px; color: var(--gray); margin-top: 6px !important }

/* ---- ride: search, result, purchase, live trip ---- */
.bvs-search { margin-top: 10px; border-radius: 22px; background: var(--paper); padding: 6px 0 }
.bvs-field { display: flex; align-items: center; gap: 14px; min-height: 58px; padding: 0 18px; font-size: 18px; color: var(--gray) }
.bvs-field + .bvs-field { border-top: 1px solid var(--hairline) }
.bvs-field--to { color: var(--ink) }
.bvs-dot { width: 12px; height: 12px; border-radius: 50%; border: 3px solid var(--boavia-green); margin: 0 5px }
.bvs-ic { color: var(--ink); display: flex }
.bvs-fl { display: flex; flex-direction: column; gap: 2px }
.bvs-fl small { font-size: 13px; color: var(--gray) }
.bvs-fl strong { font-size: 20px; font-weight: 700 }
.bvs-result { position: relative; margin-top: 18px; border-radius: 24px; background: var(--card); box-shadow: 0 0 0 1px var(--hairline), var(--shadow-s2); padding: 20px 20px 22px }
.bvs-tag { position: absolute; right: 16px; top: 16px; font-size: 13px; font-weight: 700; color: var(--green-text); background: #00A15E1A; padding: 6px 10px; border-radius: 999px }
.bvs-time { font-size: 30px; font-weight: 700; letter-spacing: -.02em }
.bvs-meta { font-size: 18px; color: var(--gray); margin-top: 6px !important }
.bvs-legs { display: flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 16px; font-weight: 600 }
.bvs-leg { display: inline-flex; align-items: center; gap: 4px; color: var(--gray) }
.bvs-leg svg { width: 20px; height: 20px }
.bvs-sep { width: 14px; height: 2px; background: var(--border); border-radius: 2px }
.bvs-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--boavia-green); color: #fff; padding: 6px 12px 6px 8px; border-radius: 10px }
.bvs-chip svg { width: 20px; height: 20px }

.bvs-sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; background: var(--card); border-radius: 32px 32px 0 0;
  box-shadow: 0 -20px 60px -20px rgba(17,17,17,.35); padding: 30px 22px 30px; transform: translateY(105%);
  transition: transform .5s var(--ease);
}
.bvs-sheet::before { content: ""; position: absolute; left: 50%; top: 10px; width: 44px; height: 5px; margin-left: -22px; border-radius: 3px; background: var(--border) }
.bvs-price { font-size: 44px; font-weight: 700; letter-spacing: -.02em }
.bvs-pay { margin-top: 24px }
.bvs-wait, .bvs-done { display: flex; align-items: center; justify-content: center; height: 62px; margin-top: 12px !important; font-size: 18px; font-weight: 600; transition: opacity .3s var(--ease) }
.bvs-wait { opacity: 0; position: absolute; left: 22px; right: 22px; bottom: 30px; background: var(--paper); border-radius: 999px }
.bvs-done { opacity: 0; position: absolute; left: 22px; right: 22px; bottom: 30px; background: var(--card); border-radius: 999px }
.bvs-spin { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--border); border-top-color: var(--ink); margin-right: 12px; animation: bvs-spin .9s linear infinite }
@keyframes bvs-spin { to { transform: rotate(360deg) } }
.bvs.is-pay .bvs-sheet { transform: none }
.bvs.is-confirm .bvs-wait { opacity: 1 }
.bvs.is-bought .bvs-wait { opacity: 0 }
.bvs.is-bought .bvs-done { opacity: 1 }

.bvs-track { position: absolute; inset: 0; z-index: 4; background: var(--canvas); padding: 22px 22px 28px; opacity: 0; transform: translateY(18px); transition: opacity .45s var(--ease), transform .45s var(--ease) }
.bvs.is-track .bvs-track { opacity: 1; transform: none }
.bvs-live { margin-top: 20px; border-radius: 24px; background: var(--ink); color: #fff; padding: 20px 20px 24px }
.bvs-arrives { font-size: 26px; font-weight: 700; letter-spacing: -.01em }
.bvs-onway { font-size: 16px; opacity: .7; margin-top: 4px !important }
.bvs-line { position: relative; height: 34px; margin: 20px 6px 0; display: flex; justify-content: space-between; align-items: center }
.bvs-line::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; background: rgba(255,255,255,.28); border-radius: 2px }
.bvs-stop { position: relative; width: 12px; height: 12px; border-radius: 50%; background: #fff }
.bvs-stop--you { width: 18px; height: 18px; border: 4px solid var(--boavia-green) }
.bvs-busdot { position: absolute; left: -8px; top: 1px; width: 32px; height: 32px; border-radius: 50%; background: var(--boavia-green); color: #fff; display: flex; align-items: center; justify-content: center }
.bvs-busdot svg { width: 20px; height: 20px }
.bvs-offline { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 15px; font-weight: 600; color: var(--green-text); background: #00A15E14; padding: 8px 14px; border-radius: 999px }
.bvs-offline svg { width: 18px; height: 18px }
.bvs-legs-list { list-style: none; margin: 20px 0 0; padding: 0 }
.bvs-legs-list li { display: flex; gap: 14px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--hairline); font-size: 18px; font-weight: 600 }
.bvs-legs-list li svg { color: var(--gray); margin-top: 2px }
.bvs-legs-list li.is-bus svg { color: var(--boavia-green) }
.bvs-legs-list small { display: block; font-size: 15px; font-weight: 400; color: var(--gray); margin-top: 3px }

/* ---- activate ---- */
.bvs-ticket { position: absolute; inset: 44px 0 0; padding: 12px 22px 0 }
.bvs-code { position: absolute; left: 22px; right: 22px; top: 150px; opacity: 0; transform: scale(.94); transition: opacity .45s var(--ease), transform .45s var(--ease); text-align: center }
/* .bvs before it: the icon size set on every svg in a screen would otherwise make the code 22 px */
.bvs .bvs-qr { display: block; width: 100%; height: auto; border-radius: 18px; box-shadow: 0 0 0 1px var(--hairline) }
.bvs-activepill { display: inline-flex; align-items: center; margin-top: 18px !important; font-size: 18px; font-weight: 700; color: var(--green-text) }
.bvs-bar { height: 6px; border-radius: 3px; background: var(--paper); margin-top: 16px; overflow: hidden }
.bvs-bar i { display: block; height: 100%; background: var(--boavia-green); transform-origin: 0 50% }
.bvs--activate.is-press .bvs-act { transform: scale(.95); filter: brightness(.9) }
.bvs--activate.is-active .bvs-code { opacity: 1; transform: none }
.bvs--activate.is-active .bvs-dock { opacity: 0; transition: opacity .3s var(--ease) .1s }

/* ---- viewfinder, verdict, credit ---- */
.bvs-finder { position: absolute; inset: 0; background: radial-gradient(120% 80% at 50% 45%, #2A2F33 0%, #0E1012 70%); transition: opacity .35s var(--ease) }
.bvs-frame { position: absolute; left: 50%; top: 42%; width: 220px; height: 220px; margin: -110px 0 0 -110px }
.bvs-frame i { position: absolute; width: 44px; height: 44px; border: 5px solid #fff; border-radius: 6px }
.bvs-frame i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0 }
.bvs-frame i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0 }
.bvs-frame i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0 }
.bvs-frame i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0 }
/* the code in front of the camera: inside the corners, turned a little, a touch soft and dim */
.bvs-seen { position: absolute; left: 50%; top: 42%; width: 164px; margin: -82px 0 0 -82px; transform: perspective(600px) rotateY(-12deg) rotate(-3deg); filter: blur(.6px) brightness(.88) }
.bvs-seen .bvs-qr { border-radius: 10px; box-shadow: none }
.bvs-aim { position: absolute; left: 0; right: 0; top: calc(42% + 140px); text-align: center; font-size: 19px; font-weight: 600 }
.bvs-verdict { position: absolute; inset: 0; opacity: 0; transition: opacity .3s var(--ease) }
.bvs-verdict-band { background: var(--boavia-green); color: #fff; padding: 34px 24px 34px; text-align: center; transform: translateY(-30px); transition: transform .45s var(--ease) }
.bvs-bigtick { display: inline-flex; width: 76px; height: 76px; border-radius: 50%; background: #fff; color: var(--boavia-green); align-items: center; justify-content: center }
.bvs-bigtick svg { width: 48px; height: 48px }
.bvs-valid { font-size: 52px; font-weight: 800; letter-spacing: .02em; margin-top: 12px !important }
.bvs-until { font-size: 20px; font-weight: 600; opacity: .92; margin-top: 4px !important }
.bvs-verdict-rows { padding: 22px 24px; background: var(--canvas); color: var(--ink); font-size: 18px; height: 100% }
.bvs-verdict-rows p + p { color: var(--gray); margin-top: 6px !important }
.bvs.is-read .bvs-finder { opacity: 0 }
.bvs.is-read .bvs-verdict { opacity: 1 }
.bvs.is-read .bvs-verdict-band { transform: none }

.bvs-body--shop { text-align: center; padding-top: 30px; border-top: 8px solid var(--boavia-orange) }
.bvs-shopname { font-size: 28px; font-weight: 700; letter-spacing: -.01em }
.bvs-shopcode { margin: 26px 8px 0 }
.bvs-credit { font-size: 30px; font-weight: 700; color: var(--ink); margin-top: 24px !important }

.bvs-landed { position: absolute; inset: 0; background: var(--canvas); color: var(--ink); text-align: center; padding-top: 150px; opacity: 0; transform: scale(.96); transition: opacity .4s var(--ease), transform .4s var(--ease) }
.bvs-landed .bvs-bigtick { background: var(--boavia-green); color: #fff }
.bvs-plus { font-size: 66px; font-weight: 800; letter-spacing: -.02em; margin-top: 18px !important; color: var(--green-text) }
.bvs-wallet { display: inline-block; margin-top: 26px !important; font-size: 19px; font-weight: 600; background: var(--paper); padding: 12px 20px; border-radius: 999px }
.bvs--scan.is-read .bvs-landed { opacity: 1; transform: none }

/* ---- the page around a street-story stage, round 11 (shared by website/7 and website/8) --------
   The copy cards, the chapter title plates, the labelled rail in the chrome, the overlays drawn over
   the picture (overlay.js) and the white footer. The card rules are v1's shared/cards.css, with the
   card title an h3 now that the chapters are the h2s. */

html { background: #fff }
body { margin: 0; background: #fff; color: var(--ink); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility }
a { color: inherit }

/* the story's viewport heights plus the last screen, written by build.mjs as --story-vh on <html>;
   page.js logs an error when the measured page disagrees */
.scroller { position: relative; height: calc(var(--story-vh) * 100vh) }
.stage { position: sticky; top: 0; height: 100vh; overflow: hidden; background: #C9C5BC; contain: layout paint }

/* ---- the layers of the stage, bottom to top ---- */
/* the picture (the site's own) sits at z-index 0 */
.ov { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden }
.ov-brand { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible }
.glass { position: absolute; inset: 0; overflow: hidden }
.glass .bvs { visibility: hidden; will-change: transform }
/* a phone held up to the eye is not in the picture, so its screen carries the body: the black bezel,
   2.6 of the screen's 66.4 mm, and a light rim where the aluminium edge catches the day */
.glass .bvs.is-held { box-shadow: 0 0 0 14px var(--ink), 0 0 0 15.5px rgba(255, 255, 255, .26) }
.ov-white { position: absolute; inset: 0; background: #fff; opacity: 0 }
.ov-brand { color: #fff }
.veil { position: absolute; inset: 0; z-index: 5; background: var(--ink); opacity: 0; pointer-events: none }
.deck { position: absolute; inset: 0; z-index: 6; pointer-events: none }

/* ---- chrome ---- */
.chrome { position: fixed; top: 0; left: 0; right: 0; z-index: 20; display: flex; align-items: center; gap: 10px; padding: 18px max(20px, 2.4vw); pointer-events: none }
.mark { pointer-events: auto; display: flex; align-items: center; height: 44px; padding: 0 18px; color: var(--ink); background: var(--card); border-radius: var(--radius-pill); text-decoration: none; box-shadow: 0 1px 2px #1111131A, var(--shadow-s2) }
.mark svg { display: block; height: 21px; width: auto }
.lang { pointer-events: auto; margin-left: auto; font: 600 14px/1 var(--font-sans); letter-spacing: .06em; color: var(--ink); background: var(--card); border: 0; border-radius: var(--radius-pill); height: 44px; min-width: 52px; padding: 0 16px; cursor: pointer; box-shadow: 0 1px 2px #1111131A, var(--shadow-s2) }
.mark:focus-visible, .lang:focus-visible, .rail a:focus-visible, .rail-toggle:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px }

/* ---- the rail: four chapters with their progress ---- */
.rail { pointer-events: auto; position: absolute; left: 50%; top: 18px; transform: translateX(-50%) }
.rail-toggle { display: none }
.rail-list { list-style: none; margin: 0; padding: 5px; display: flex; gap: 2px; background: var(--card); border-radius: var(--radius-pill); box-shadow: 0 1px 2px #1111131A, var(--shadow-s2) }
.rail-list a { position: relative; display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: var(--radius-pill); font: 600 14px/1 var(--font-sans); color: var(--gray); text-decoration: none; white-space: nowrap; transition: color var(--dur-control) var(--ease), background-color var(--dur-control) var(--ease) }
.rail-list a:hover { background: var(--paper); color: var(--ink) }
.rail-list a[aria-current="step"] { color: var(--ink) }
.rail-dot { display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--hue); flex: none }
.rail-bar { position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; border-radius: 1px; background: #11111314; overflow: hidden }
.rail-bar i, .rail-line i { display: block; width: 100%; height: 100%; background: var(--hue); transform-origin: 0 50%; transform: scaleX(0) }

/* ---- cards and titles ---- */
.beat-card, .bv-title { position: absolute; left: max(28px, 5.5vw); top: 50%; width: min(440px, 36vw); pointer-events: auto; visibility: hidden; opacity: 0; transform: translate3d(0, calc(-50% + var(--dy, 0px)), 0) }
.beat-card--first { width: min(560px, 44vw) }
.beat-card--right { left: auto; right: max(28px, 5.5vw) }
.beat-card--first .bv-btn { margin-top: 4px }

/* a chapter title: an ink plate in the card column, the chapter's hue on a bar. The plate is wide
   enough for the longest chapter word («passageiros») on one line at every size, and a word is never
   broken: shoot.mjs fails a heading that splits one or overflows its plate */
.bv-title { width: min(680px, 50vw); box-sizing: border-box; background: var(--ink); color: #fff; border-radius: var(--radius-hero-card); padding: 30px 34px 38px; box-shadow: 0 1px 2px #1111131A, var(--shadow-s3) }
.bv-title-bar { display: block; width: 56px; height: 8px; border-radius: 4px; background: var(--hue); margin: 0 0 24px }
.bv-title h2 { font-family: var(--font-poster); font-weight: 400; font-size: clamp(48px, 6.4vw, 104px); line-height: .98; letter-spacing: -.01em; margin: 0; color: #fff; overflow-wrap: normal; hyphens: manual }
@media (max-width: 719.98px), (max-aspect-ratio: 4/5) {
  .bv-title h2 { font-size: clamp(36px, 12.3vw, 48px) }
}
.bv-title h2:focus { outline: none }
.bv-title h2:focus-visible { outline: 3px solid #fff; outline-offset: 6px; border-radius: 4px }

.hue-green { --hue: var(--boavia-green) }
.hue-blue { --hue: var(--boavia-blue) }
.hue-orange { --hue: var(--boavia-orange) }
.hue-yellow { --hue: var(--boavia-yellow) }
.hue-ink { --hue: var(--ink) }

.bv-card {
  box-sizing: border-box; background: var(--card); color: var(--ink); border-radius: var(--radius-hero-card);
  box-shadow: 0 1px 2px #1111131A, var(--shadow-s3); padding: 28px 30px 30px;
}
.bv-card > :last-child { margin-bottom: 0 }
.bv-kicker { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: var(--fs-kicker); line-height: var(--lh-kicker); font-weight: 600; color: var(--gray) }
.bv-kicker::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--hue); flex: none }
.bv-card h1 { font-family: var(--font-poster); font-weight: 400; font-size: clamp(44px, 5.6vw, 84px); line-height: var(--lh-display); letter-spacing: -.01em; margin: 0 0 16px }
.bv-card h3 { font-size: clamp(25px, 2.3vw, 33px); line-height: 1.1; font-weight: 700; letter-spacing: -.015em; margin: 0 0 12px }
.bv-card p { font-size: var(--fs-body); line-height: var(--lh-body); margin: 0 0 20px }
.bv-card .bv-lead { font-size: var(--fs-lead); line-height: var(--lh-lead) }
.bv-num { display: flex; align-items: baseline; gap: 14px }
/* the display face draws its zero as a round O, so a figure is set in the text face */
.bv-card .bv-num b { font-family: var(--font-sans); font-weight: 700; font-variant-numeric: lining-nums; letter-spacing: -.03em; font-size: clamp(64px, 6.4vw, 92px); line-height: .9; color: var(--hue) }
.bv-num span { font-size: 21px; font-weight: 700; letter-spacing: -.01em }
.bv-list { list-style: none; padding: 0; margin: 0 0 22px }
.bv-list li { position: relative; padding-left: 24px; margin: 7px 0; font-size: var(--fs-body); line-height: 1.45 }
.bv-list li::before { content: ""; position: absolute; left: 3px; top: .56em; width: 8px; height: 8px; border-radius: 50%; background: var(--hue) }
.bv-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px;
  border-radius: var(--radius-pill); background: var(--hue); color: var(--on-color); text-decoration: none;
  font-weight: var(--fw-semibold); font-size: 18px; line-height: 1.1;
  transition: transform var(--dur-control) var(--ease), filter var(--dur-control) var(--ease);
}
.bv-btn:hover { filter: brightness(.93) }
.bv-btn:active { transform: scale(.98) }
.bv-btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px }
.bv-card--yellow { background: var(--boavia-yellow) }
.bv-card--yellow .bv-kicker { color: var(--ink) }
.bv-card--yellow .bv-kicker::before, .bv-card--yellow .bv-list li::before { background: var(--ink) }
.bv-card--yellow .bv-btn { background: var(--ink); color: var(--white) }
.bv-card--yellow .bv-btn:focus-visible { outline-color: var(--white) }

/* ---- hint and caption ---- */
.hint { position: absolute; z-index: 7; left: max(28px, 5.5vw); bottom: 26px; margin: 0; display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 600; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.45); pointer-events: none }
.hint i { position: relative; display: block; width: 2px; height: 30px; border-radius: 1px; background: rgba(255,255,255,.4); overflow: hidden }
.hint i::after { content: ""; position: absolute; left: 0; top: -40%; width: 100%; height: 40%; background: #fff; animation: bv-hint 1.8s var(--ease) infinite }
@keyframes bv-hint { to { top: 100% } }
/* over the brightest sky the pill still keeps white text above 4.5:1. It never sits on a phone, a
   card or the rail: page.js hides it at once while one covers its corner, and it fades back after */
.disclosure { position: absolute; z-index: 7; right: max(16px, 1.6vw); bottom: 14px; margin: 0; padding: 5px 11px; border-radius: var(--radius-pill); background: rgba(17,17,17,.64); color: #fff; font: 500 12px/1.2 var(--font-sans); letter-spacing: .01em; pointer-events: none; transition: opacity .3s var(--ease) }
.disclosure.is-covered { visibility: hidden; opacity: 0 !important; transition: none }

/* ---- the chrome on the white ending: ink on white ----
   the pills are white like the page there, so each takes an ink ring, and every word in them is ink */
.chrome .mark, .chrome .lang, .chrome .rail-list, .chrome .rail-toggle { transition: box-shadow var(--dur-control) var(--ease) }
.chrome.is-white .mark, .chrome.is-white .lang, .chrome.is-white .rail-list, .chrome.is-white .rail-toggle { box-shadow: inset 0 0 0 1.5px var(--ink) }
.chrome.is-white .rail-list a, .chrome.is-white .rail-toggle { color: var(--ink) }
.chrome.is-white .rail-bar, .chrome.is-white .rail-line { background: #11111333 }

/* ---- footer, white, under the wordmark ---- */
.foot { position: relative; background: #fff; color: var(--ink); padding: 32px max(24px, 6vw) 56px }
.foot-in { max-width: 1120px; margin: 0 auto }
.foot-h { font-size: clamp(28px, 3.2vw, 44px); line-height: 1.08; letter-spacing: -.02em; font-weight: 700; margin: 0 0 36px; max-width: 18em }
.foot-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 64px; padding: 36px 0; border-top: 1px solid var(--border) }
.foot h3 { font-size: 15px; font-weight: 700; margin: 0 0 10px }
.foot p { font-size: 15.5px; line-height: 1.6; margin: 0; color: var(--gray) }
.foot-links { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 0; margin: 16px 0 0 }
.foot-links a, .foot-legal a { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(17,17,17,.35); text-underline-offset: 3px }
.foot-links a:hover, .foot-legal a:hover { text-decoration-color: var(--ink) }
.foot-links a:focus-visible, .foot-legal a:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px }
.foot-note { padding-top: 28px; border-top: 1px solid var(--border) }
.foot .foot-legal { margin-top: 8px; font-size: 14px }

/* ---- no script ---- */
.nojs { max-width: 640px; margin: 0 auto; padding: 120px 24px }
.nojs h1 { font-family: var(--font-poster); font-weight: 400; font-size: var(--fs-display); line-height: var(--lh-display); margin: 0 0 16px }

/* ---- 720 to 1024: the active chapter's name, the others as dots ---- */
@media (max-width: 1023.98px) {
  .rail-list a { padding: 0 11px; gap: 0 }
  .rail-list a[aria-current="step"] { gap: 8px; padding: 0 14px }
  .rail-list a:not([aria-current="step"]) .rail-label, .rail-list a:not([aria-current="step"]) .rail-bar { display: none }
}

/* ---- narrow and portrait: one button in the chrome, opening into the list ---- */
@media (max-width: 719.98px), (max-aspect-ratio: 4/5) {
  .chrome { padding: 12px 14px; gap: 8px }
  .mark { height: 38px; padding: 0 13px }
  .mark svg { height: 17px }
  .lang { height: 38px; min-width: 46px; padding: 0 12px; margin-left: 0 }
  .rail { position: relative; left: auto; top: auto; transform: none; flex: 1 1 auto; min-width: 0; display: flex; justify-content: center }
  .rail-toggle { position: relative; display: flex; align-items: center; gap: 8px; max-width: 100%; min-width: 0; height: 38px; padding: 0 15px; border: 0; border-radius: var(--radius-pill); background: var(--card); color: var(--ink); font: 600 14px/1 var(--font-sans); cursor: pointer; box-shadow: 0 1px 2px #1111131A, var(--shadow-s2) }
  .rail-toggle.is-none .rail-dot { background: var(--gray) }
  .rail-now { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
  .rail-line { position: absolute; left: 15px; right: 15px; bottom: 5px; height: 2px; border-radius: 1px; background: #11111314; overflow: hidden }
  .rail-list { display: none; position: absolute; top: 46px; left: 50%; transform: translateX(-50%); flex-direction: column; gap: 0; min-width: 230px; border-radius: 20px; padding: 6px }
  .rail.is-open .rail-list { display: flex }
  .rail-list a, .rail-list a[aria-current="step"] { height: 46px; padding: 0 16px; gap: 10px; border-radius: 14px }
  .rail-list a:not([aria-current="step"]) .rail-label, .rail-list a .rail-label { display: block }
  .rail-list a .rail-bar, .rail-list a:not([aria-current="step"]) .rail-bar { display: block; left: 16px; right: 16px; bottom: 6px }

  .beat-card, .beat-card--first, .beat-card--right, .bv-title { left: 12px; right: 12px; width: auto; top: 62px; transform: translate3d(0, var(--dy, 0px), 0) }
  .bv-title { padding: 22px 24px 28px }
  .bv-title-bar { margin-bottom: 18px }
  .hint { display: none }
  .foot { padding: 28px 22px 44px }
  .foot-cols { grid-template-columns: minmax(0, 1fr) }
}

@media (max-width: 720px) {
  .bv-card { padding: 20px 22px 22px; border-radius: 22px }
  .bv-title { border-radius: 22px }
  .bv-card h1 { font-size: 46px; margin-bottom: 10px }
  .bv-card h3 { font-size: 23px }
  .bv-card p, .bv-list li { font-size: 15.5px }
  .bv-card p { margin-bottom: 14px }
  .bv-kicker { margin-bottom: 10px }
  .bv-card .bv-num b { font-size: 56px }
  .bv-btn { min-height: 48px; font-size: 16.5px; padding: 0 22px }
}

/* reduced motion: the scroll rests at the nearest hold, and the cards and titles fade without moving */
.rm .beat-card, .rm .bv-title { transition: opacity .45s var(--ease), visibility .45s }
@media (prefers-reduced-motion: reduce) {
  .bvs, .bvs * { transition: none !important; animation: none !important }
  .hint i::after { animation: none }
  .rail-list a { transition: none }
}

/* ---- website/8: the film inside the stage (the page and the overlays are shared/page.css) ------- */

.film { position: absolute; left: 0; top: 0; z-index: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .8s var(--ease) }
.stage > .ov { opacity: 0; transition: opacity .8s var(--ease) }
.is-ready .film, .is-ready .stage > .ov { opacity: 1 }

@media (prefers-reduced-motion: reduce) {
  .film, .stage > .ov { transition: none }
}