/* Generated from the Sonda story page stylesheet (monorepo marketing/lead_magnets/SONDA/public/sondeia/sondeia.css),
   every rule scoped under .mar so it only touches the story on /pt/ferramentas/sonda/. */
/* sondeia: Sonda's story page. DC design language: navy deep water, paper sky, cyan for what the
   sonar sees (interactive-tool carve-out), amber only on the one main action of each screen ("Lançar a
   sonda", "Descobrir o meu barco"). DM Serif Display + Geist.
   Two looks share one layout: the still drawing (default, and the fallback) and the live sea
   (html.has-scene), where a fixed WebGL canvas replaces the still backgrounds. */

.mar {
  --navy: #0A2D4D;
  --navy-deep: #061E35;
  --paper: #F6F4EE;
  --white: #FFFFFF;
  --cyan: #17A2B8;
  --amber: #B45309;
  --amber-deep: #8F4207;
  --muted: #5F6673;                         /* 5.2:1 on paper */
  --field: #788B9D;                         /* field border, 3.4:1 on white */
  --rule: rgba(10, 45, 77, 0.16);
  --on-dark: rgba(246, 244, 238, 0.84);
  --sea-mid: color-mix(in srgb, var(--navy) 70%, var(--paper));

  --serif: "DM Serif Display", Georgia, "Times New Roman", serif;
  --sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  --g: 16px;                                /* side gutter */
  --sun-left: 80%;
  --sun-r: clamp(18px, 5.4vw, 44px);
  --hull-left: 9vw;                         /* vw, so the boat and the question card resolve against one width */
  --hw: 112px;                              /* the visitor's boat */
  --ship: clamp(128px, 15vw, 232px);        /* the largest boat of the fleet */
  --top-tone: var(--paper);                 /* water colour at the foot of the first screen */
  color-scheme: light;
}

@media (min-width: 760px) {
  .mar { --g: 36px; --hull-left: 50vw; --hw: clamp(150px, 13vw, 208px); --top-tone: var(--sea-mid); }
}
/* Wide screens: the boat and the sun grow into the empty right half of the first screen. */
@media (min-width: 1100px) {
  .mar { --hull-left: 58vw; --hw: clamp(200px, 16vw, 280px); --sun-r: clamp(44px, 4.2vw, 60px); }
}
@media (min-width: 1180px) {
  .mar { --g: 72px; }
}
.mar {
  margin: 0;
  background: var(--paper);
  color: var(--navy);
  font: 400 17px/1.55 var(--sans);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
.mar h1, .mar h2, .mar p, .mar figure { margin: 0; }
.mar a { color: inherit; }
.mar :focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.mar .panel :focus-visible { outline-color: var(--paper); }

.mar .defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.mar .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mar .probe { position: absolute; top: 0; left: 0; width: 1px; height: 100vh; height: 100lvh; visibility: hidden; pointer-events: none; }

/* ---------- type ---------- */

.mar .kicker {
  display: flex; align-items: center; gap: 10px;
  font: 500 11.5px/1.3 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
}
.mar .kicker::before { content: ""; width: 22px; height: 1px; background: currentColor; flex: none; }
.mar .h1 {
  margin-top: 14px; max-width: 13.5ch;
  font: 400 clamp(38px, 5.2vw, 78px)/1 var(--serif); letter-spacing: -0.018em; text-wrap: balance;
}
.mar .h2 {
  margin: 12px 0 14px;
  font: 400 clamp(29px, 3.3vw, 46px)/1.06 var(--serif); letter-spacing: -0.012em; text-wrap: balance;
}
.mar .lede { margin-top: 16px; max-width: 33em; font-size: clamp(17px, 1.3vw, 19.5px); line-height: 1.5; }
.mar .big { font: 400 clamp(24px, 2.4vw, 32px)/1.18 var(--serif); margin-bottom: 12px; text-wrap: balance; }

.mar .stamp {
  display: inline-block; padding: 5px 7px; border: 1.5px solid currentColor; border-radius: 2px;
  font: 600 10.5px/1.25 var(--mono); letter-spacing: 0.08em; text-transform: uppercase;
  transform: rotate(-1.2deg); transform-origin: left center;
}

/* ---------- header, controls ---------- */
.mar .ext { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
@media (min-width: 760px) { }

/* The pause control. Phones: in the page under the first screen's form (never over the form or the
   button), pinned bottom-left once it has scrolled away. Desktop: the empty bottom-right corner. */
.mar .motion {
  flex: none; z-index: 30;
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 14px 0 13px;
  border: 1px solid rgba(10, 45, 77, 0.3); border-radius: 999px; background: rgba(246, 244, 238, 0.94); color: var(--navy);
  font: 500 11px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer;
}
.mar .motion[hidden] { display: none; }
.mar .motion.is-pinned { position: fixed; left: max(12px, env(safe-area-inset-left)); bottom: max(12px, env(safe-area-inset-bottom)); }
@media (min-width: 760px) {
  .mar .motion, .mar .motion.is-pinned { position: fixed; left: auto; right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); }
  .has-scene .mar .gauge-read { bottom: calc(max(12px, env(safe-area-inset-bottom)) + 52px); }
}
.mar .motion:hover { background: var(--white); }
.mar .motion-icon { width: 9px; height: 10px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.is-paused .mar .motion-icon { width: 0; height: 0; border-right: 0; border-left: 9px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }

/* The depth gauge: a sounding scale on the right edge, a readout pill on phones. */
.mar .gauge { display: none; position: fixed; z-index: 4; inset: 0 0 0 auto; width: 120px; pointer-events: none; }
.is-live .mar .gauge { display: block; }
.mar .gauge-scale { display: none; }
.mar .gauge-read {
  position: absolute; right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom));
  padding: 7px 10px; border-radius: 999px; background: rgba(246, 244, 238, 0.94); border: 1px solid rgba(10, 45, 77, 0.3);
  font: 500 11px/1 var(--mono); letter-spacing: 0.06em; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.mar .gauge-k { color: var(--muted); text-transform: uppercase; }
/* The gauge only shows once under water: no depth on the first screen, and nothing over its text. */
.mar .gauge-read, .mar .gauge-scale { transition: opacity 300ms var(--ease); }
.mar .gauge:not(.is-under) .gauge-read, .mar .gauge:not(.is-under) .gauge-scale { opacity: 0; }
@media (min-width: 760px) {
  .mar .gauge-scale {
    display: block; position: absolute; right: 0; top: 0; width: 26px; height: 100%; color: var(--cyan);
    border-right: 1px solid currentColor;
    background-image: linear-gradient(currentColor 0 1px, transparent 1px), linear-gradient(currentColor 0 1.5px, transparent 1.5px);
    background-repeat: repeat-y;
    background-position-x: right, right;
    background-origin: border-box;
    -webkit-mask-image: linear-gradient(transparent 8%, #000 30%, #000 70%, transparent 92%);
    mask-image: linear-gradient(transparent 8%, #000 30%, #000 70%, transparent 92%);
  }
  .mar .gauge-scale { background-size: 7px calc(var(--m, 14px) * 2), 16px calc(var(--m, 14px) * 10); }
}

/* ---------- the forms ---------- */

.mar .launch { display: grid; gap: 8px; max-width: 600px; margin-top: 24px; }
.mar .field-label { font: 500 14px/1.3 var(--sans); }
.mar .url-row { display: grid; gap: 10px; }
.mar .url-field {
  display: flex; min-height: 58px; overflow: hidden;
  border: 1px solid var(--field); border-radius: 4px; background: var(--white);
}
.mar .url-field:focus-within { outline: 2px solid var(--navy); outline-offset: 1px; border-color: var(--navy); }
.mar .is-bad .url-field { border-color: var(--amber-deep); }
.mar .url-prefix { display: flex; align-items: center; padding: 0 3px 0 14px; font: 400 15px/1 var(--mono); color: var(--muted); user-select: none; }
.mar .url-input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; padding: 0 14px 0 2px; font: 400 18px/1.2 var(--sans); color: var(--navy); }
.mar .url-input::placeholder { color: var(--muted); }
.mar .btn-main {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 58px; padding: 0 26px;
  border: 2px solid transparent; border-radius: 4px; background: var(--amber); color: var(--white); cursor: pointer;
  font: 600 16.5px/1.2 var(--sans); letter-spacing: 0.005em;
  transition: background 120ms var(--ease);
}
.mar .btn-main:hover { background: var(--amber-deep); }
.mar .btn-main:active { transform: translateY(1px); }
.mar .arrow { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 220ms var(--ease); }
.mar .btn-main:hover .arrow { transform: translateX(3px); }
.mar .field-error { color: var(--amber-deep); font-size: 14.5px; font-weight: 500; }
/* Kept in the page while empty (role=alert must exist before its text arrives), but out of the grid. */
.mar .field-error:empty { position: absolute; }
.mar .note { font-size: 13.5px; line-height: 1.45; color: var(--muted); max-width: 40em; }
.mar .note a, .mar .joao a { color: var(--navy); text-decoration-color: var(--cyan); text-underline-offset: 3px; }
@media (min-width: 520px) {
  .mar .url-row { grid-template-columns: minmax(0, 1fr) auto; }
}
/* The form on a navy panel (chapter 4): white field, amber button, light text and focus ring, stacked. */
.mar .panel .url-row { grid-template-columns: minmax(0, 1fr); }
.mar .panel .url-field:focus-within { outline-color: var(--paper); }
.mar .panel .note a { color: var(--paper); }

/* ---------- still art shared by the sea bands ---------- */

.mar .sea-band { position: relative; }
.mar .sea-band::before { content: ""; position: absolute; inset: 0; transition: opacity 900ms var(--ease); }
.mar .still-sun {
  position: absolute; bottom: 100%; left: var(--sun-left);
  width: calc(var(--sun-r) * 4.8); height: calc(var(--sun-r) * 2.4); transform: translateX(-50%);
  color: var(--navy); overflow: visible; transition: opacity 900ms var(--ease);
}
.mar .still-strokes {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  color: var(--navy); stroke-width: 0.9; opacity: 0.62; overflow: visible; transition: opacity 900ms var(--ease);
}
.mar .sea-band::after { content: ""; position: absolute; left: 0; right: 0; top: -0.75px; height: 1.5px; background: var(--navy); opacity: 0.9; transition: opacity 900ms var(--ease); }

/* The outlines are filled with paper, so the sun, the ridge and the sea never show through a hull. */
.mar .boat { display: block; width: 100%; height: auto; fill: none; stroke: var(--navy); stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.mar .boat-line { stroke-width: 2.3; }
.mar .ship .boat-line, .mar .vessel .boat-line, .mar .vessel-still .boat-line { fill: var(--paper); }
.mar .boat.is-drawing .boat-line { fill-opacity: 0; }
.mar .boat-water { stroke-width: 1.7; }
.mar .boat-fine { stroke-width: 1.5; }
.mar .boat.is-drawing .boat-line, .mar .boat.is-drawing .boat-water {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: draw 640ms var(--ease) forwards; animation-delay: calc(var(--i) * 240ms + 250ms);
}
.mar .boat.is-drawing .boat-water { animation-duration: 420ms; }
.mar .boat.is-drawing .boat-fine { opacity: 0; animation: fade 420ms var(--ease) forwards; animation-delay: calc(var(--i) * 240ms + 250ms); }
@keyframes draw { to { stroke-dashoffset: 0; fill-opacity: 1; } }
/* Paused before the drawing finished (a remembered choice): show the finished boat. */
.is-paused .mar .boat.is-drawing :is(.boat-line, .boat-water) { animation: none; stroke-dasharray: none; fill-opacity: 1; }
.is-paused .mar .boat.is-drawing .boat-fine { animation: none; opacity: 1; }
@keyframes fade { to { opacity: 1; } }

.mar .vessel, .mar .vessel-still {
  position: absolute; top: 0; left: var(--hull-left); z-index: 1; width: var(--hw);
  margin-top: calc(var(--hw) * -0.45);   /* veleiro: the hull meets the water at 87% of its drawing */
  transform-origin: 51% 87%; will-change: transform;
}

/* ---------- 1 · the surface ---------- */

.mar .ch { position: relative; }
.mar .ch1 { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
.mar .hero-sea { order: 1; height: 46px; margin-top: 104px; flex: none; }
.mar .hero-text { order: 2; position: relative; z-index: 2; padding: 20px var(--g) 18px; background: var(--paper); }
.mar .ch1-foot { order: 3; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 var(--g) 18px; }
.mar .descend {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; text-decoration: none;
  font: 500 11.5px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase;
}
.mar .descend svg { width: 9px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.mar .descend .lead-body { fill: currentColor; }
.mar .descend span { text-decoration: underline; text-decoration-color: var(--cyan); text-underline-offset: 4px; }

@media (min-width: 760px) {
  .mar .hero-text { order: 1; padding-top: max(104px, 14svh); padding-bottom: 0; max-width: 680px; background: none; }
  .mar .h1 { max-width: 16ch; font-size: clamp(38px, min(5.2vw, 8.6vh), 78px); }
  .mar .hero-sea { order: 2; flex: 1 0 16svh; height: auto; margin-top: 40px; }
  .mar .hero-sea::before { background: linear-gradient(var(--paper), var(--sea-mid)); }
  /* No transform here: the pause button inside is position: fixed. */
  .mar .ch1-foot { position: absolute; left: 0; right: 0; bottom: 0; justify-content: center; margin: 0 0 22px; }
  /* On its own paper chip: the water behind it runs from light to mid. */
  .mar .descend { padding: 0 16px 0 18px; border: 1px solid rgba(10, 45, 77, 0.3); border-radius: 999px; background: rgba(246, 244, 238, 0.94); color: var(--navy); }
  .mar .ch1 .still-strokes { height: 44%; }
}

/* ---------- the chapters below: sticky stages over the live sea ---------- */

.mar .stage { position: relative; }
.mar .stage::before { content: ""; position: absolute; inset: 0; z-index: -1; transition: opacity 900ms var(--ease); }

.mar .panel {
  position: relative; max-width: 35rem; padding: 22px 22px 24px;
  background: rgba(6, 30, 53, 0.94); color: var(--paper);
  border: 1px solid rgba(246, 244, 238, 0.22); border-radius: 2px;
}
.mar .panel .kicker { color: rgba(246, 244, 238, 0.72); }
.mar .panel p { color: var(--on-dark); }
.mar .panel .big, .mar .panel .h2 { color: var(--paper); }

.mar .paper {
  max-width: 34rem; padding: 18px 18px 20px; background: var(--white); color: var(--navy);
  border: 1px solid var(--rule); border-radius: 3px; box-shadow: 0 26px 50px -30px rgba(0, 0, 0, 0.7);
}
.mar .paper-a { margin-top: 12px; font-size: 17px; line-height: 1.85; }
.mar .paper-cap { margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.mar .bar { display: inline-block; width: calc(var(--n) * 0.5em); height: 0.92em; margin: 0 1px; background: var(--navy); border-radius: 1px; vertical-align: -0.1em; }
@media (forced-colors: active) {
  .mar .bar { forced-color-adjust: none; background: CanvasText; }
}

/* 2 · the question goes down */
.mar .ch2 .stage { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; padding: calc(20vh + 58px) var(--g) 72px; }
.mar .ch2 .stage::before { background: linear-gradient(var(--top-tone), var(--navy) 55%, var(--navy-deep)); }
/* The question card sits under the hull, its tail on the keel. As the chapter scrolls it shrinks into
   the hull (--away 0 to 1, --dx and --lift measured in story.js) and the ping leaves from there. */
.mar .qcard {
  position: relative; order: -1; align-self: flex-start; max-width: 32rem; padding: 16px 18px 20px;
  margin-left: calc(var(--hull-left) + var(--hw) * 0.51 - var(--g) - 40px);
  background: var(--white); border: 1px solid var(--rule); border-radius: 3px;
  box-shadow: 0 20px 40px -24px rgba(6, 30, 53, 0.6);
  opacity: calc(1 - var(--away, 0) * var(--away, 0));
  transform: translate(calc(var(--away, 0) * var(--dx, 0px)), calc(var(--away, 0) * var(--lift, 48px) * -1)) scale(calc(1 - var(--away, 0) * 0.72));
  transform-origin: 40px 0;
}
.mar .qcard::before { content: ""; position: absolute; left: 34px; top: -7px; width: 12px; height: 12px; background: var(--white); border-left: 1px solid var(--rule); border-top: 1px solid var(--rule); transform: rotate(45deg); }
/* Without the live sea there is no boat above the card for the tail to point at, nor a ping for it to
   leave as: the card stays with the panel for the whole chapter. */
html:not(.has-scene) .mar .qcard::before { display: none; }
.is-still .mar .qcard { opacity: 1; transform: none; }
.mar .q { margin-top: 12px; font: 400 clamp(23px, 2.3vw, 30px)/1.25 var(--serif); }
.mar .q-caret { display: none; }
.is-live .mar .q-off { color: transparent; }
.is-live .mar .is-typing .q-caret { display: inline-block; width: 2px; height: 0.95em; margin: 0 1px; background: var(--cyan); vertical-align: -0.1em; }

/* 4 · echoes */
.mar .ch4 .stage { display: grid; justify-items: center; align-content: start; padding: 11vh var(--g) 0; }
.mar .ch4 .stage::before { background: var(--navy-deep) center / cover no-repeat; }
.is-still .mar .ch4 .stage::before { background-image: url("still-deep.webp"); }
.mar .scope { position: relative; width: min(86vw, 46vh, 520px); }
.mar .ppi-svg { display: block; width: 100%; height: auto; overflow: visible; }
.mar .ppi-disc { fill: var(--navy-deep); fill-opacity: 0.84; }
.mar .ppi-ring { fill: none; stroke: var(--cyan); stroke-opacity: 0.3; stroke-width: 0.5; }
.mar .ppi-cross { stroke: var(--cyan); stroke-opacity: 0.18; stroke-width: 0.4; }
.mar .ppi-ticks { stroke: var(--cyan); stroke-opacity: 0.6; stroke-width: 0.5; }
.mar .ppi-rim { fill: none; stroke: var(--cyan); stroke-opacity: 0.85; stroke-width: 0.9; }
.mar .ppi-n { font: 600 7px var(--mono); fill: var(--paper); }
.mar .ppi-fan { fill: var(--cyan); }
.mar .ppi-beam { stroke: var(--cyan); stroke-width: 0.9; }
.mar .ppi-centre { fill: var(--cyan); }
.mar .blip { opacity: calc(0.12 + 0.88 * var(--k, 0)); }
.mar .blip-arc { fill: none; stroke: var(--cyan); stroke-width: 3.4; stroke-linecap: round; }
.mar .tag { fill: var(--paper); }
/* The visitor's hull: a solid ring the beam crosses; once it has passed with no echo, the ring breaks up
   (dashes and opacity set from the scroll in story.js) and "sem eco" appears under the label. */
.mar .you-ring { fill: none; stroke: var(--paper); stroke-width: 1.1; }
.mar .you-label, .mar .you-silent { font: 500 6.4px var(--mono); letter-spacing: 0.05em; fill: var(--paper); }
.mar .you-label { fill-opacity: 0.9; }
.mar .scope-read {
  display: flex; justify-content: space-between; gap: 12px; margin-top: 10px;
  font: 500 11px/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--paper);
  text-shadow: 0 0 2px var(--navy-deep), 0 0 6px var(--navy-deep);
}
/* Above the dial, where the step cards never cover it. */
.mar .stamp-on-dark { margin-bottom: 12px; color: var(--paper); }
.mar .steps { position: relative; z-index: 2; padding: 0 var(--g); }
.mar .step { padding: 20px 0; }

/* 5 · the fleet */
.mar .ch5 .stage { display: flex; flex-direction: column; }
/* Still drawing: the fleet-sky band is the sky, the water starts at its bottom edge. */
.mar .ch5 .stage::before { background: linear-gradient(var(--paper) 38vh, var(--sea-mid) 74vh, var(--navy) 92vh, var(--navy-deep)); }
/* Surfacing from chapter 4: the top of the sky starts deep and clears as the chapter pins (--rise, story.js). */
.mar .ch5 .stage::after { content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: -1; height: 30vh; background: linear-gradient(var(--navy-deep), transparent); opacity: calc(1 - var(--rise, 1)); pointer-events: none; }
.mar .fleet-sky { flex: none; height: 38vh; }
.mar .fleet-sky .still-strokes { top: 100%; height: 46px; }
.mar .fleet-sky::after { top: auto; bottom: -0.75px; }
.mar .fleet { position: absolute; left: 0; right: 0; bottom: 0; height: 0; }
/* Every ship is one height, label at the top and hull at the bottom, so the names sit on one line. */
.mar .ship {
  position: absolute; left: 0; bottom: 0; display: flex; flex-direction: column; justify-content: space-between; align-items: center;
  width: calc(var(--ship) * var(--size)); height: calc(var(--ship) * 0.38 + 56px); transform-origin: 50% 100%; will-change: transform;
}
.mar .ship .boat { transform: scaleX(-1); margin-bottom: calc(var(--sink) * -100%); }
.mar .ship-label { display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; white-space: nowrap; }
.mar .ship-name { font: 400 clamp(19px, 1.7vw, 25px)/1 var(--serif); }
.mar .ship-n { font: 500 10.5px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.mar .panel-fleet { margin: auto var(--g) 72px; }
.mar .panel-fleet .btn-main { margin-top: 20px; text-decoration: none; }
.mar .h2-big { font-size: clamp(46px, 5.6vw, 80px); line-height: 1; }

/* 8 · launch */
.mar .ch8 { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; padding-top: 20vh; }
.mar .ch8::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 18vh; background: linear-gradient(var(--navy-deep), var(--paper)); transition: opacity 900ms var(--ease); }
.mar .launch-text { position: relative; z-index: 2; padding: 0 var(--g); max-width: calc(700px + 2 * var(--g)); }
.mar .launch-text .h2 { font-size: clamp(36px, 5vw, 72px); line-height: 1.02; }
/* What the sheet holds, then the route to a person: links in navy with a cyan underline, never amber. */
.mar .holds { margin-top: 32px; max-width: 34em; font-size: 16px; line-height: 1.5; }
.mar .holds-t { margin: 0 0 6px; font: 600 16px/1.3 var(--sans); }
.mar .holds ul { margin: 0 0 12px; padding-left: 20px; }
.mar .holds li + li { margin-top: 4px; }
.mar .joao { margin-top: 24px; padding-left: 14px; border-left: 2px solid var(--cyan); max-width: 32em; font-size: 16px; line-height: 1.5; }
.mar .joao p + p { margin-top: 8px; }
.mar .joao .joao-links { display: flex; flex-wrap: wrap; gap: 0 24px; margin-top: 4px; }
.mar .joao-links a { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; font-weight: 600; }
.mar .launch-sea { flex: 1 0 22vh; margin-top: 64px; }
.mar .launch-sea .still-strokes { height: 44%; }
@media (min-width: 760px) {
  .mar .launch-sea::before { background: linear-gradient(var(--paper), var(--sea-mid)); }
}

/* ---------- with JavaScript and motion: tall chapters, pinned stages ---------- */

@media (prefers-reduced-motion: no-preference) {
  .js .mar .ch2 { min-height: 220vh; min-height: 220svh; }
  .js .mar .ch5 { min-height: 270vh; min-height: 270svh; }
  /* At least one screen, never cut: a stage taller than the screen (zoom, landscape) pins at the top
     and shows its lower part as the chapter ends. Ships still clip at the sides. */
  .js .mar .stage { position: sticky; top: 0; min-height: 100vh; min-height: 100svh; overflow-x: clip; }
  .js .mar .ch4 .steps { margin-top: -100vh; margin-top: -100svh; padding-top: 40vh; }
  .js .mar .ch4 .step { display: flex; align-items: flex-end; min-height: 100vh; min-height: 100svh; padding: 0 0 76px; }
  .js .mar .ch4 .step:last-child { min-height: 50svh; }
  .js .mar .ch5 .panel-fleet { max-width: 34rem; }
  .js .mar .ship { left: 0; }
  .js:not(.is-live) .mar .fleet { visibility: hidden; }
}
@supports not (overflow: clip) {
  .js .mar .stage { overflow: hidden; }
}
/* Phones: the first panel arrives a little later, under the "Exemplo" stamp; every panel, the form's
   included, ends 76 px above its step (above), clear of the pinned pause and depth pills. */
@media (prefers-reduced-motion: no-preference) and (max-width: 759px) {
  .js .mar .ch4 .steps { padding-top: 46vh; }
}

@media (min-width: 760px) {
  .mar .ch4 .stage { justify-items: end; align-content: center; padding: 0 calc(var(--g) + 92px) 0 var(--g); }
  .mar .scope { width: min(40vw, 68vh, 560px); }
  .mar .ch4 .step { align-items: center; }
  .mar .ch4 .steps .panel, .mar .ch4 .steps .paper { max-width: min(30rem, 36vw); }
  .js .mar .ch4 .step { align-items: center; padding: 0; }
  .mar .ch5 .panel-fleet { margin-left: var(--g); }
  .mar .fleet-sky .still-strokes { height: 14vh; }
}
@media (min-width: 760px) and (max-width: 1099px) {
  .mar .qcard { margin-left: 0; }
}
@media (min-width: 1100px) {
  .mar .hero-text { max-width: min(800px, 62vw); }
}
/* Short phones: the field and the button stay on the first screen. */
@media (max-width: 759px) and (max-height: 700px) {
  .mar .hero-sea { margin-top: 90px; height: 34px; }
  .mar .hero-text { padding-top: 12px; }
  .mar .h1 { margin-top: 10px; font-size: 33px; }
  .mar .lede { margin-top: 10px; font-size: 16px; line-height: 1.45; }
  .mar .launch { margin-top: 16px; }
}
/* Very short phones (an SE or mini with Safari's bars showing): the button still fits. */
@media (max-width: 759px) and (max-height: 600px) {
  .mar .hero-text .kicker { display: none; }
  .mar .h1 { margin-top: 0; font-size: 29px; }
  .mar .lede { font-size: 15px; }
}

/* ---------- the live sea ---------- */

.mar .sea {
  position: fixed; left: 0; top: 0; z-index: -1; display: block; width: 100%; height: 100vh; height: 100lvh;
  pointer-events: none; opacity: 0; transition: opacity 900ms var(--ease);
}
/* Not 1: an opaque canvas lets Chromium cull the page background under it, which left unpainted
   bands next to the first screen in testing; blending the canvas avoids that. */
.has-scene .mar .sea { opacity: 0.999; }
.has-scene .mar .sea-band::before, .has-scene .mar .stage::before, .has-scene .mar .stage::after, .has-scene .mar .ch8::before, .has-scene .mar .still-sun, .has-scene .mar .still-strokes, .has-scene .mar .sea-band::after { opacity: 0; }

.is-paused .mar *, .is-paused .mar *::before, .is-paused .mar *::after { animation-play-state: paused !important; }

/* ---------- reduced motion: a still page that reads top to bottom ---------- */

@media (prefers-reduced-motion: reduce) {
  .mar .boat .boat-line, .mar .boat .boat-water { stroke-dasharray: none !important; }
  .mar .boat .boat-fine { opacity: 1 !important; }
  .mar .motion, .mar .gauge, .mar .sea { display: none !important; }
  .mar .qcard { opacity: 1; transform: none; }
  .mar .ch2 .stage { padding: 12vh var(--g) 10vh; gap: 36px; }
  .mar .ch4 .stage { padding: 12vh var(--g) 0; }
  .mar .ppi-sweep { display: none; }
  .mar .ch4 .steps { padding-bottom: 10vh; }
  .mar .ch4 { background: var(--navy-deep); }
  .mar .ch5 .stage::before { background: var(--paper); }
  .mar .ch8::before, .mar .fleet-sky::after { display: none; }
  .mar .fleet-sky { height: auto; padding: 12vh 0 0; }
  .mar .fleet-sky .still-strokes { display: none; }
  .mar .fleet { position: static; height: auto; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 28px 36px; padding: 0 var(--g); }
  .mar .ship { position: relative; transform: none !important; }
  .mar .ship .boat { margin-bottom: 0; }
  .mar .panel-fleet { margin: 48px var(--g) 10vh; }
}