/* ==========================================================================
   EVA — section components (BLUEPRINT direction)
   ========================================================================== */

/* --------------------------------------------------------------------------
   WINDOW STAGE — holds the real app window plus its annotations
   -------------------------------------------------------------------------- */
/* The annotations live outside the window frame, so the stage reserves a
   gutter for them instead of letting them run off the viewport. Below the
   annotation breakpoint the gutter collapses and the labels are hidden. */
.stage { position: relative; }
@media (min-width: 1101px) {
  .stage-annotated { padding-right: 140px; }
}

.stage-frame {
  position: relative;
  border-radius: 18px;
  padding: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(224,242,254,.6));
  border: 1px solid var(--line-2);
  box-shadow: var(--sh-3);
}

/* corner ticks, like a drawing frame */
.stage-frame::before,
.stage-frame::after {
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  border: 1px solid var(--s500);
  opacity: .5;
}
.stage-frame::before { top: -5px; left: -5px; border-right: 0; border-bottom: 0; }
.stage-frame::after { bottom: -5px; right: -5px; border-left: 0; border-top: 0; }

/* the window is a picture: it never scrolls, it crops with a soft edge.
   The app's own CSS sizes everything in px, so the only honest way to fit a
   real 1080px-wide window into a page column is to scale the whole thing.
   `zoom` keeps layout and hit-testing consistent, unlike transform: scale,
   which would leave the original box size behind. */
.win-crop {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  max-height: var(--crop, 620px);
}
.win-crop .evawin { zoom: var(--zoom, 1); }

/* On narrow screens the real window cannot shrink to something legible, so it
   keeps a usable scale and scrolls sideways inside its own frame instead of
   dragging the whole page with it. */
@media (max-width: 1020px) {
  .win-crop { overflow-x: auto; overscroll-behavior-x: contain; --zoom: .58 !important; }
  .stage-frame { padding: 8px; }
}
@media (max-width: 620px) {
  .win-crop { --zoom: .46 !important; max-height: 420px; }
}

@supports not (zoom: 1) {
  .win-crop .evawin { transform: scale(var(--zoom, 1)); transform-origin: top left; width: calc(100% / var(--zoom, 1)); }
}
.win-crop::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 90px;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(234, 245, 253, .96));
}
.win-crop-full { max-height: none; }
.win-crop-full::after { display: none; }

/* Floating readouts pulled out of the product.
   They used to be placed by eyeball with ad-hoc top/left values and landed
   crooked. Now they sit on one shared baseline: a strip above the window and a
   strip below it, both aligned to the frame edges, so the three read as one
   instrument panel instead of three loose stickers. */
.readout-strip {
  position: absolute;
  left: 0; right: 0;
  display: flex;
  gap: .6rem;
  z-index: 7;
  pointer-events: none;
}
.readout-strip-top { top: 0; transform: translateY(-58%); padding-left: 26px; }
.readout-strip-bottom { bottom: 0; transform: translateY(58%); padding-left: 26px; }
@media (min-width: 1101px) {
  .stage-annotated .readout-strip { right: 140px; }
}
/* room for the strips to sit outside the frame without clipping */
.stage { padding-block: 34px; }

.readout {
  padding: .55rem .8rem;
  border-radius: var(--r-md);
  background: #fff;
  border: 1px solid var(--line-2);
  box-shadow: var(--sh-2);
  min-width: 128px;
}
.readout .k {
  font-family: var(--f-mono);
  font-size: .55rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.readout .v {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.14rem;
  letter-spacing: -.02em;
  color: var(--s700);
  margin-top: .05rem;
}
.readout-ok { border-color: rgba(34,197,94,.45); background: linear-gradient(180deg,#f4fdf7,#eafaf0); }
.readout-ok .v { color: var(--green-d); }
@media (max-width: 880px) { .readout { display: none; } }

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */
.hero { padding-top: clamp(2rem, 4.5vw, 3.6rem); padding-bottom: clamp(4rem, 7vw, 6rem); }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(1.75rem, 4vw, 3.2rem);
  align-items: center;
}
@media (max-width: 1020px) { .hero-grid { grid-template-columns: 1fr; } }

.hero h1 { margin-top: 1.1rem; }
.hero-fine {
  font-family: var(--f-mono);
  font-size: .7rem;
  letter-spacing: .02em;
  color: var(--ink-3);
}
.cta-row { display: flex; flex-wrap: wrap; gap: .7rem; }

/* the spec strip under the hero copy */
.specs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
}
.specs > div { padding: .85rem .4rem; border-right: 1px dashed var(--line-2); }
.specs > div:last-child { border-right: 0; }
.specs .k {
  font-family: var(--f-mono);
  font-size: .56rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.specs .v {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(1rem, .92rem + .4vw, 1.2rem);
  color: var(--s800);
  letter-spacing: -.02em;
  margin-top: .1rem;
}
@media (max-width: 520px) {
  .specs { grid-template-columns: 1fr 1fr; }
  .specs > div:nth-child(2) { border-right: 0; }
  .specs > div:nth-child(3) { border-top: 1px dashed var(--line-2); }
}

/* --------------------------------------------------------------------------
   MARQUEE
   -------------------------------------------------------------------------- */
.marquee {
  overflow: hidden;
  border-block: 1px solid var(--line);
  padding-block: .75rem;
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee-track { display: flex; gap: 2.2rem; width: max-content; animation: marquee 46s linear infinite; }
.marquee-track span {
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* --------------------------------------------------------------------------
   THE MANUAL WAY
   -------------------------------------------------------------------------- */
.step-row {
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(255,255,255,.72);
}
.step-row .n { font-family: var(--f-mono); font-size: .76rem; color: var(--ink-3); }
.step-row h3 { font-size: 1rem; margin-bottom: .12rem; }
.step-row p { font-size: .9rem; color: var(--ink-3); }
.step-row .cost {
  font-family: var(--f-mono);
  font-size: .8rem;
  font-weight: 500;
  color: #b91c1c;
  white-space: nowrap;
}

/* Each step carries a cost bar that fills as it scrolls past, sized to the
   minutes it eats. Four rows of text were flat; the bars turn the section
   into a chart you read without doing arithmetic. */
.step-row {
  position: relative;
  overflow: hidden;
  transition: border-color .28s var(--ease), transform .28s var(--ease), box-shadow .28s var(--ease);
}
.step-row::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  height: 3px;
  width: var(--w, 20%);
  background: linear-gradient(90deg, rgba(251,191,36,.55), #ef4444);
  transform-origin: left center;
  transform: scaleX(0);
}
@supports (animation-timeline: view()) {
  .step-row::after {
    animation: wipe-x linear both;
    animation-timeline: view();
    animation-range: entry 22% cover 52%;
  }
}
@supports not (animation-timeline: view()) {
  .stagger.in .step-row::after { transform: scaleX(1); transition: transform .9s var(--ease); }
}
.step-row:hover {
  border-color: var(--s400);
  transform: translateX(3px);
  box-shadow: var(--sh-1);
}
@media (prefers-reduced-motion: reduce) {
  .step-row::after { transform: scaleX(1) !important; }
  .step-row:hover { transform: none; }
}
@media (max-width: 620px) {
  .step-row { grid-template-columns: 2.2rem minmax(0,1fr); }
  .step-row .cost { grid-column: 2; }
}

/* --------------------------------------------------------------------------
   FOLDER ANATOMY — what one folder really holds, next to the problem copy
   -------------------------------------------------------------------------- */
.folder-head {
  display: flex;
  align-items: baseline;
  gap: .7rem;
  padding: .8rem 1rem;
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
  font-size: .82rem;
}
.folder-head .mono { font-family: var(--f-mono); font-weight: 500; color: var(--s800); }
.folder-sum { margin-left: auto; font-size: .74rem; color: var(--ink-3); }

.take-list { list-style: none; margin: 0; padding: .5rem .6rem; display: flex; flex-direction: column; gap: .3rem; }
.take-list li {
  display: grid;
  grid-template-columns: 5.6rem minmax(0, 1fr) 3.2rem;
  align-items: center;
  gap: .6rem;
  font-family: var(--f-mono);
  font-size: .68rem;
  color: var(--ink-3);
}
.take-list .bar {
  position: relative;
  height: 8px;
  border-radius: 3px;
  background: rgba(14, 165, 233, .14);
  overflow: hidden;
}
/* the blue part is speech, the red tail is what EVA throws away */
.take-list .bar i {
  position: absolute;
  inset: 0;
  border-radius: 3px;
  background:
    linear-gradient(90deg, var(--s400) 0, var(--s500) var(--w, 70%), rgba(239,68,68,.55) var(--w, 70%));
  transform-origin: left center;
  transform: scaleX(0);
}
@supports (animation-timeline: view()) {
  .take-list .bar i {
    animation: wipe-x linear both;
    animation-timeline: view();
    animation-range: entry 16% cover 44%;
  }
}
@supports not (animation-timeline: view()) {
  .stagger.in .bar i { transform: scaleX(1); transition: transform .8s var(--ease); }
}
.take-list .cut { text-align: right; color: #b91c1c; }

.folder-foot {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  padding: .75rem 1rem;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, #fff, #fff5f5);
  font-size: .82rem;
  color: var(--ink-2);
}
.folder-foot b {
  margin-left: auto;
  font-family: var(--f-display);
  font-size: 1.1rem;
  color: #b91c1c;
  letter-spacing: -.02em;
}

@media (prefers-reduced-motion: reduce) { .take-list .bar i { transform: scaleX(1) !important; } }

/* --------------------------------------------------------------------------
   THE MATH
   -------------------------------------------------------------------------- */
.math-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #fff;
}
.math-cell { padding: 1.3rem 1rem; text-align: center; border-right: 1px solid var(--line); }
.math-cell:last-child { border-right: 0; }
.math-cell .k {
  font-family: var(--f-mono);
  font-size: .62rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.math-cell .v { font-size: clamp(1.7rem, 1.3rem + 1.5vw, 2.5rem); color: var(--s700); margin-block: .15rem .05rem; }
.math-cell .u { font-size: .76rem; color: var(--ink-3); }
.math-cell.hot { background: linear-gradient(180deg, #fffbeb, #fef3c7); }
.math-cell.hot .v { color: #b45309; }

/* --------------------------------------------------------------------------
   PIPELINE
   -------------------------------------------------------------------------- */
.pipe-step {
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr);
  gap: 1.2rem;
  padding-block: clamp(1rem, 2.4vw, 1.7rem);
}
.pipe-rail { display: flex; flex-direction: column; align-items: center; }
.pipe-dot {
  width: 38px; height: 38px;
  flex: none;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-family: var(--f-mono);
  font-size: .74rem;
  color: #fff;
  background: linear-gradient(180deg, var(--s400), var(--s700));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 6px 14px -6px rgba(3,105,161,.7);
}
.pipe-line {
  flex: 1;
  width: 2px;
  margin-top: .5rem;
  background: var(--line-2);
  position: relative;
  overflow: hidden;
}
.pipe-line i {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--s400), var(--s700));
}
.pipe-step:last-child .pipe-line { display: none; }
.pipe-body h3 { margin-bottom: .3rem; }
.pipe-body p { color: var(--ink-2); }
.pipe-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .6rem; }
.pipe-tags span {
  font-family: var(--f-mono);
  font-size: .62rem;
  letter-spacing: .06em;
  padding: .25em .55em;
  border-radius: 4px;
  background: rgba(14,165,233,.1);
  border: 1px solid rgba(14,165,233,.22);
  color: var(--s700);
}

/* --------------------------------------------------------------------------
   FEATURE GALLERY
   -------------------------------------------------------------------------- */
.gal { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 158px), 1fr)); gap: .8rem; }
.gal-item {
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  overflow: hidden;
  background: #fff;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s;
}
.gal-item:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: var(--s400); }
.gal-thumb {
  aspect-ratio: 9 / 11;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, #5b6b7d, #3c4a59);
  position: relative;
  overflow: hidden;
}
.gal-thumb video, .gal-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gal-meta { padding: .55rem .65rem .7rem; }
.gal-meta b { display: block; font-family: var(--f-display); font-size: .84rem; }
.gal-meta span { display: block; font-size: .7rem; line-height: 1.4; color: var(--ink-3); margin-top: .1rem; }

/* --------------------------------------------------------------------------
   CAPTION PREVIEWS — copied from the app's own preview CSS and
   _capPreviewHTML(). Accents per style come from CAPTION_ACCENT_DEFAULT.
   -------------------------------------------------------------------------- */
.cap-prev {
  width: 100%;
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2px 6px;
  padding: .7rem .5rem;
  text-align: center;
  background: radial-gradient(120% 90% at 50% 38%, #838a95 0%, #626873 60%, #4e535d 100%);
}
.cap-prev span,
.cap-prev b,
.cap-prev i {
  font-weight: 900;
  font-size: 17px;
  line-height: 1.15;
  color: #fff;
  letter-spacing: .005em;
  font-style: normal;
  text-transform: uppercase;
}
.cap-prev span.hl { color: #FFF000; }

/* One Word — Arial Black, one word per line */
.cap-prev-original { flex-direction: column; gap: 1px; }
.cap-prev-original span {
  font-family: 'Arial Black', 'Inter Tight', Arial, sans-serif;
  display: block;
  text-shadow: 0 1px 3px rgba(0,0,0,.55), 0 0 2px rgba(0,0,0,.5);
}

/* TikTok Font — stroked, wraps horizontally. The real face is proprietary,
   so this falls back to Arial Black. See P15 in PENDENCIAS_RODRIGO. */
.cap-prev-tiktok { flex-wrap: wrap; gap: 1px 5px; line-height: 1.2; }
.cap-prev-tiktok span {
  font-family: 'Arial Black', 'Inter Tight', sans-serif;
  -webkit-text-stroke: 1.2px #000;
  paint-order: stroke fill;
}

/* Momentum — its own face, cream accent, small word above and below */
.cap-prev-momentum { flex-direction: column; align-items: flex-start; text-align: left; padding-inline: 1rem; gap: 0; }
.cap-prev-momentum .mom-row { display: inline-flex; align-items: baseline; gap: .24em; white-space: nowrap; }
.cap-prev-momentum i,
.cap-prev-momentum b {
  font-family: 'EVA Momentum', 'Arial Black', sans-serif;
  color: #F3EBD0;
  -webkit-text-stroke: 1px #000;
  paint-order: stroke fill;
}
.cap-prev-momentum i { font-size: 8px; opacity: .78; }
.cap-prev-momentum b { font-size: 25px; }

/* Impact — green box, white word */
.cap-prev-impact span {
  font-family: 'EVA Impact', Impact, sans-serif;
  font-size: 21px;
  background: #16C24A;
  color: #fff;
  padding: 2px 3px;
  border-radius: .08em;
}

/* Bold Pop — Momentum face, second word takes the accent */
.cap-prev-boldpop span { font-family: 'EVA Momentum', sans-serif; -webkit-text-stroke: 1px #000; paint-order: stroke fill; }
.cap-prev-boldpop span.hl { font-size: 14px; color: #FFF000; }

/* Highlight — red box */
.cap-prev-hlbox span {
  font-family: 'EVA Momentum', sans-serif;
  font-size: 20px;
  background: #DD3322;
  color: #fff;
  padding: 2px 3px;
}

/* Neon — pink glow */
.cap-prev-neon span {
  font-family: 'EVA Impact', Impact, sans-serif;
  font-size: 21px;
  color: #fff;
  text-shadow: 0 0 3px #FF1493, 0 0 7px #FF1493, 0 0 14px #FF1493;
}

/* Karaoke — spoken word takes the highlight */
.cap-prev-karaoke span {
  font-family: 'Arial Black', Arial, sans-serif;
  -webkit-text-stroke: 1.2px #000;
  paint-order: stroke fill;
}

/* Scatter — stable positions derived from the video slot */
.cap-prev-scatter { position: relative; display: block; }
.cap-prev-scatter span {
  position: absolute;
  left: var(--x); top: var(--y);
  font-family: 'Arial Black', Arial, sans-serif;
  font-size: 13px;
  -webkit-text-stroke: 1.1px #000;
  paint-order: stroke fill;
}

/* Stacked — three lines, only the active one lit */
.cap-prev-stacked { flex-direction: column; gap: 1px; }
.cap-prev-stacked span {
  font-family: 'Arial Black', Arial, sans-serif;
  font-size: 15px;
  opacity: .42;
  -webkit-text-stroke: 1.1px #000;
  paint-order: stroke fill;
}
.cap-prev-stacked span.hl { opacity: 1; }

/* the tile itself no longer paints its own background */
.gal-thumb { background: none; }

/* --------------------------------------------------------------------------
   TRANSITION DEMO — two real takes, the nine moves played over them
   -------------------------------------------------------------------------- */
.trans-demo {
  display: grid;
  grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
  gap: clamp(1.2rem, 3vw, 2.4rem);
  align-items: start;
}
.trans-demo > div:last-child { padding-top: .3rem; }
@media (max-width: 780px) { .trans-demo { grid-template-columns: 1fr; } }

.trans-stage {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: var(--r-md);
  overflow: hidden;
  background: #0c2536;
  border: 1px solid var(--line-2);
  box-shadow: var(--sh-2);
  isolation: isolate;
}
.trans-stage video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  will-change: transform, opacity, filter;
}
.trans-stage .tk-b { z-index: 2; }

.trans-label {
  position: absolute;
  left: 8px; bottom: 8px;
  z-index: 5;
  font-family: var(--f-mono);
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(3, 37, 54, .78);
  padding: .28em .6em;
  border-radius: 4px;
  backdrop-filter: blur(6px);
}

.trans-picker { display: flex; flex-wrap: wrap; gap: .4rem; align-content: flex-start; }
.trans-picker button {
  padding: .46em .9em;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--s800);
  background: #fff;
  border: 1px solid var(--line-2);
  transition: background-color .18s, border-color .18s, color .18s, transform .16s var(--ease);
}
.trans-picker button:hover { border-color: var(--s400); transform: translateY(-1px); }
.trans-picker button[aria-pressed='true'] {
  background: linear-gradient(180deg, var(--s400), var(--s600));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 14px -6px rgba(14,165,233,.7);
}

/* --------------------------------------------------------------------------
   MEDIA SLOT
   -------------------------------------------------------------------------- */
.slot {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: var(--ar, 16 / 9);
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, #eaf5fd, #d8ecfa);
  border: 2px dashed var(--s400);
}
.slot video, .slot img { width: 100%; height: 100%; object-fit: cover; }
.slot-9x16 { --ar: 9 / 16; }
.slot-note {
  padding: 1rem;
  text-align: center;
  font-family: var(--f-mono);
  font-size: .68rem;
  line-height: 1.65;
  color: var(--s800);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.slot-note b { display: block; color: #b45309; font-size: .74rem; margin-bottom: .3rem; letter-spacing: .14em; }
.slot-note em { display: block; font-style: normal; text-transform: none; letter-spacing: 0; color: var(--ink-3); margin-top: .35rem; font-size: .7rem; }

/* --------------------------------------------------------------------------
   CHAIN
   -------------------------------------------------------------------------- */
.chain { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem; }
.chain b {
  font-family: var(--f-display);
  font-size: clamp(.88rem, .82rem + .35vw, 1.05rem);
  padding: .5em 1em;
  border-radius: 7px;
  background: #fff;
  border: 1px solid var(--line-2);
  box-shadow: var(--sh-1);
}
.chain span { color: var(--s500); }
.chain b:last-of-type { background: linear-gradient(180deg, #fff3c4, #fde68a); border-color: #fcd34d; color: #7c3d02; }

/* --------------------------------------------------------------------------
   COMPARISON
   -------------------------------------------------------------------------- */
.cmp-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r-lg); border: 1px solid var(--line-2); background: #fff; }
.cmp { width: 100%; min-width: 660px; border-collapse: collapse; font-size: .9rem; }
.cmp th, .cmp td { padding: .85rem 1rem; text-align: left; }
.cmp thead th {
  font-family: var(--f-mono);
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 1px solid var(--line-2);
  background: var(--paper-2);
}
.cmp thead th.is-eva { color: var(--s700); background: rgba(14,165,233,.12); }
.cmp tbody tr { border-bottom: 1px solid var(--line); }
.cmp tbody tr:last-child { border-bottom: 0; }
.cmp td:first-child { color: var(--ink-2); font-weight: 500; }
.cmp .is-eva { background: rgba(14,165,233,.07); font-weight: 700; color: var(--s800); }
.cmp .yes { color: var(--green-d); font-weight: 700; }
.cmp .no { color: #b91c1c; }
.cmp .man { color: #b45309; }
.cmp tfoot td { border-top: 1px solid var(--line-2); font-size: .85rem; color: var(--ink-2); background: var(--paper-2); }

/* --------------------------------------------------------------------------
   PRICING
   -------------------------------------------------------------------------- */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 236px), 1fr)); gap: 1rem; align-items: stretch; }

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .8rem;
  padding: 1.5rem 1.25rem 1.3rem;
  border-radius: var(--r-lg);
  background: #fff;
  border: 1px solid var(--line-2);
  box-shadow: var(--sh-1);
  transition: transform .24s var(--ease), box-shadow .24s var(--ease), border-color .24s;
}
.plan:hover { transform: translateY(-4px); box-shadow: var(--sh-2); border-color: var(--s400); }
.plan-pop { border-color: var(--amber-2); box-shadow: 0 20px 44px -18px rgba(245,158,11,.45); }
.plan-flag {
  position: absolute;
  top: -11px; left: 50%;
  transform: translateX(-50%);
  padding: .28em .85em;
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: .58rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  white-space: nowrap;
  background: linear-gradient(180deg, #ffe082, var(--amber));
  color: #3a2708;
  border: 1px solid rgba(255,255,255,.6);
}
.plan-name { font-family: var(--f-display); font-size: 1.14rem; font-weight: 800; letter-spacing: -.02em; }
.plan-for { font-size: .82rem; color: var(--ink-3); min-height: 2.7em; }
.plan-price { display: flex; align-items: baseline; gap: .15rem; }
.plan-price .cur { font-size: 1.05rem; font-weight: 700; color: var(--ink-2); }
.plan-price .n { font-size: clamp(2.1rem, 1.75rem + 1.3vw, 2.8rem); color: var(--ink); }
.plan-price .per { font-size: .82rem; color: var(--ink-3); margin-left: .12rem; }
.plan-quota {
  padding: .55rem .7rem;
  border-radius: 7px;
  background: rgba(14,165,233,.1);
  border: 1px solid rgba(14,165,233,.24);
  font-size: .84rem;
  font-weight: 700;
  color: var(--s700);
  text-align: center;
}
.plan-pop .plan-quota { background: #fef3c7; border-color: #fcd34d; color: #92610a; }
.plan-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .4rem; font-size: .85rem; }
.plan-list li { display: flex; gap: .5rem; align-items: flex-start; color: var(--ink-2); }
.plan-list li::before { content: '+'; color: var(--s500); font-weight: 700; flex: none; }
.plan .btn { margin-top: auto; }

/* the two-computer promo, as its own object */
.promo {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.2rem;
  border-radius: var(--r-lg);
  background: linear-gradient(120deg, #fff7db, #fde68a);
  border: 1px solid #fcd34d;
  box-shadow: 0 14px 30px -14px rgba(245,158,11,.5);
  color: #5c3a05;
}
.promo .icon {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1;
  flex: none;
  color: #92610a;
}
.promo b { display: block; font-family: var(--f-display); font-size: 1.02rem; letter-spacing: -.015em; }
.promo span { font-size: .86rem; opacity: .85; }

/* --------------------------------------------------------------------------
   TRANSCRIPTION ENGINES — the choice offered on first run.
   Sits under the plan cards, so it is built as a calm two-column block rather
   than another loud card competing with the pricing tower above it.
   -------------------------------------------------------------------------- */
.engines {
  margin-top: 1.4rem;
  padding: clamp(1.1rem, 2.4vw, 1.6rem);
  border-radius: var(--r-lg);
  background: #fff;
  border: 1px solid var(--line-2);
  box-shadow: var(--sh-1);
}
.engines-title {
  font-family: var(--f-mono);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--s700);
  margin-bottom: .9rem;
}
.engine-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 1rem;
}
.engine {
  padding: 1rem 1.1rem;
  border-radius: var(--r-md);
  background: var(--paper-2);
  border: 1px solid var(--line);
}
.engine b {
  display: block;
  font-family: var(--f-display);
  font-size: 1.05rem;
  letter-spacing: -.02em;
  margin-block: .45rem .3rem;
}
.engine p { font-size: .87rem; color: var(--ink-2); }
.engine a { color: var(--s700); text-decoration: underline; text-underline-offset: 3px; }
.engine-tag {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: .58rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .26em .6em;
  border-radius: 4px;
  background: rgba(34, 197, 94, .16);
  border: 1px solid rgba(34, 197, 94, .4);
  color: var(--green-d);
}
.engine-tag-alt {
  background: rgba(14, 165, 233, .12);
  border-color: rgba(14, 165, 233, .32);
  color: var(--s700);
}
.engines-note { margin-top: .8rem; font-size: .82rem; color: var(--ink-3); }

/* the disclosure block Paddle audits */
.disclosure {
  border-radius: var(--r-lg);
  padding: clamp(1.1rem, 2.4vw, 1.6rem);
  background: var(--paper-2);
  border: 1px solid var(--line-2);
  font-size: .85rem;
  line-height: 1.6;
  color: var(--ink-2);
}
.disclosure h3 {
  font-family: var(--f-mono);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--s700);
  margin-bottom: .75rem;
}
.disclosure ul {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: .35rem 1.4rem;
}
.disclosure li { display: flex; gap: .5rem; }
.disclosure li::before { content: '·'; color: var(--s500); flex: none; }
.disclosure strong { color: var(--ink); }
.disclosure a { color: var(--s700); text-decoration: underline; text-underline-offset: 3px; }

/* internal-only note, must not ship */
.internal {
  border: 2px dashed var(--amber-2);
  background: repeating-linear-gradient(45deg, rgba(251,191,36,.14) 0 14px, rgba(251,191,36,.06) 14px 28px);
  border-radius: var(--r-md);
  padding: 1rem 1.15rem;
  font-size: .86rem;
  color: #7c3d02;
}
.internal b { display: block; font-family: var(--f-display); font-size: .96rem; margin-bottom: .25rem; }
.internal code {
  font-family: var(--f-mono);
  font-size: .8rem;
  background: rgba(255,255,255,.7);
  padding: .08em .35em;
  border-radius: 3px;
  border: 1px solid rgba(245,158,11,.4);
}

/* --------------------------------------------------------------------------
   TESTIMONIALS — structurally ready, deliberately empty
   -------------------------------------------------------------------------- */
.testi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: 1rem; }
.testi {
  display: flex;
  flex-direction: column;
  gap: .85rem;
  padding: 1.3rem;
  border-radius: var(--r-lg);
  background: rgba(255,255,255,.6);
  border: 2px dashed var(--amber-2);
  min-height: 180px;
}
.testi-head { display: flex; align-items: center; gap: .7rem; }
.testi-ph {
  width: 42px; height: 42px;
  border-radius: 50%;
  flex: none;
  background: var(--paper-2);
  border: 1px dashed var(--s400);
  display: grid;
  place-items: center;
  font-family: var(--f-mono);
  font-size: .55rem;
  color: var(--s700);
}
.testi-meta b { display: block; font-family: var(--f-mono); font-size: .7rem; color: #b45309; letter-spacing: .1em; }
.testi-meta span { font-size: .72rem; color: var(--ink-3); }
.testi-body { flex: 1; font-family: var(--f-mono); font-size: .72rem; line-height: 1.7; color: var(--ink-3); }
.testi-shot {
  border-radius: var(--r-lg);
  border: 2px dashed var(--amber-2);
  background: rgba(255,255,255,.6);
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  padding: 1rem;
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.faq { display: flex; flex-direction: column; gap: .5rem; }
.faq-item {
  border-radius: var(--r-md);
  background: #fff;
  border: 1px solid var(--line-2);
  overflow: hidden;
}
.faq-item summary {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  padding: 1rem 1.1rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: .98rem;
  letter-spacing: -.015em;
  transition: background-color .18s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { background: var(--paper-2); }
.faq-item .n { font-family: var(--f-mono); font-size: .68rem; color: var(--ink-3); padding-top: .22rem; flex: none; }
.faq-item .x {
  margin-left: auto;
  flex: none;
  width: 20px; height: 20px;
  display: grid;
  place-items: center;
  border-radius: 4px;
  background: rgba(14,165,233,.12);
  color: var(--s700);
  font-size: .9rem;
  line-height: 1;
  transition: transform .26s var(--ease), background-color .26s;
}
.faq-item[open] .x { transform: rotate(45deg); background: #fde68a; color: #92610a; }
.faq-a { padding: 0 1.1rem 1.1rem 2.7rem; font-size: .9rem; color: var(--ink-2); }
.faq-a p + p { margin-top: .6rem; }
.faq-a strong { color: var(--ink); }
.faq-a a { color: var(--s700); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 600px) { .faq-a { padding-left: 1.1rem; } }
.faq-item[open] .faq-a { animation: rise-sm .28s var(--ease); }

/* --------------------------------------------------------------------------
   LEGAL PAGES
   -------------------------------------------------------------------------- */
.legal-wrap { width: min(100% - (var(--gut) * 2), 760px); margin-inline: auto; padding-block: clamp(2.2rem, 5vw, 4rem); position: relative; z-index: 2; }
.legal-doc {
  padding: clamp(1.4rem, 3.5vw, 2.8rem);
  border-radius: var(--r-lg);
  background: #fff;
  border: 1px solid var(--line-2);
  box-shadow: var(--sh-2);
}
.legal-doc h1 { font-size: clamp(1.85rem, 1.45rem + 1.5vw, 2.5rem); }
.legal-doc h2 {
  font-size: clamp(1.1rem, 1.02rem + .45vw, 1.35rem);
  margin-top: 2rem;
  margin-bottom: .5rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}
.legal-doc h3 { font-size: .98rem; margin-top: 1.2rem; margin-bottom: .3rem; }
.legal-doc p, .legal-doc li { color: var(--ink-2); font-size: .93rem; }
.legal-doc p + p, .legal-doc ul + p, .legal-doc p + ul, .legal-doc p + ol { margin-top: .7rem; }
.legal-doc ul, .legal-doc ol { padding-left: 1.2rem; display: flex; flex-direction: column; gap: .3rem; }
.legal-doc a { color: var(--s700); text-decoration: underline; text-underline-offset: 3px; }
.legal-doc strong { color: var(--ink); }
.legal-doc table { width: 100%; border-collapse: collapse; font-size: .88rem; margin-top: .5rem; }
.legal-doc th, .legal-doc td { padding: .55rem .65rem; text-align: left; border-bottom: 1px solid var(--line); }
.legal-doc th { font-family: var(--f-display); font-size: .8rem; color: var(--ink); }
.legal-meta { font-family: var(--f-mono); font-size: .72rem; color: var(--ink-3); }

.fill {
  font-family: var(--f-mono);
  font-size: .9em;
  font-weight: 500;
  background: rgba(251,191,36,.32);
  border-bottom: 2px solid var(--amber-2);
  padding: .05em .3em;
  border-radius: 2px;
  color: #7c3d02;
}

.legal-nav { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.4rem; }
.legal-nav a {
  padding: .42em .9em;
  border-radius: 6px;
  font-size: .8rem;
  font-weight: 600;
  background: rgba(255,255,255,.8);
  border: 1px solid var(--line-2);
  color: var(--ink-2);
}
.legal-nav a[aria-current='page'] {
  background: linear-gradient(180deg, var(--s400), var(--s700));
  border-color: transparent;
  color: #fff;
}

/* --------------------------------------------------------------------------
   MADE WITH EVA — real finished files, autoplaying muted only while visible
   -------------------------------------------------------------------------- */
.made-grid { align-items: start; }
.made-vid {
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-2);
  box-shadow: var(--sh-2);
  background: #0c2536;
  transition: transform .26s var(--ease), box-shadow .26s var(--ease);
}
.made-vid:hover { transform: translateY(-4px); box-shadow: var(--sh-3); }
@media (prefers-reduced-motion: reduce) { .made-vid:hover { transform: none; } }

/* --------------------------------------------------------------------------
   TESTIMONIALS — real WhatsApp threads, rebuilt as clean cards.
   Rebuilt rather than screenshotted on purpose: the originals carry phone
   numbers, profile pictures and account handles that must not be published.
   -------------------------------------------------------------------------- */
.testi-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); align-items: start; }

.wa {
  margin: 0;
  border-radius: var(--r-lg);
  background: #fff;
  border: 1px solid var(--line-2);
  box-shadow: var(--sh-1);
  overflow: hidden;
  transition: transform .24s var(--ease), box-shadow .24s var(--ease);
}
.wa:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
.wa-wide { grid-column: span 1; }
@media (min-width: 900px) { .wa-wide { grid-column: span 2; } }

.wa-head {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .7rem .9rem;
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
  font-size: .88rem;
}
.wa-head b { font-family: var(--f-display); letter-spacing: -.01em; }
.wa-av {
  width: 30px; height: 30px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, var(--s300), var(--s600));
  color: #fff;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: .82rem;
}

.wa-thread {
  padding: .9rem;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  background:
    radial-gradient(circle at 20% 15%, rgba(14,165,233,.05) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 60%, rgba(14,165,233,.05) 0 2px, transparent 3px),
    #f7fbfe;
  background-size: 46px 46px;
}
.wa-msg {
  align-self: flex-start;
  max-width: 88%;
  padding: .55rem .75rem;
  border-radius: 12px 12px 12px 3px;
  background: #fff;
  border: 1px solid var(--line);
  font-size: .9rem;
  line-height: 1.45;
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(3,105,161,.08);
}
.wa-out {
  align-self: flex-end;
  border-radius: 12px 12px 3px 12px;
  background: #dcf8e8;
  border-color: #b6ecd0;
  color: #10391f;
}
.wa-hit { border-color: var(--amber-2); background: #fffbeb; font-weight: 600; }

/* the before / after profile numbers, rebuilt without the handle */
.wa-stat {
  display: flex;
  align-items: baseline;
  gap: .7rem;
  flex-wrap: wrap;
  padding: .6rem .75rem;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--line-2);
}
.wa-stat-tag {
  font-family: var(--f-mono);
  font-size: .58rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.wa-nums { font-size: .88rem; color: var(--ink-2); }
.wa-nums b { font-family: var(--f-display); font-size: 1.2rem; color: var(--ink); letter-spacing: -.02em; }
.wa-nums i { color: var(--ink-4); font-style: normal; }
.wa-stat-after { border-color: rgba(34,197,94,.5); background: linear-gradient(180deg,#f3fdf7,#e9fbf1); }
.wa-stat-after .wa-nums b { color: var(--green-d); }
.wa-stat-after .wa-stat-tag { color: var(--green-d); }

.wa figcaption {
  padding: .6rem .9rem .75rem;
  border-top: 1px solid var(--line);
  font-size: .72rem;
  line-height: 1.5;
  color: var(--ink-3);
}
@media (prefers-reduced-motion: reduce) { .wa:hover { transform: none; } }

/* ==========================================================================
   ITEM 1 — one micro-animation per step, matching what that step actually is
   ========================================================================== */
.step-row { grid-template-columns: 3.2rem minmax(0, 1fr) 78px auto; }
.step-viz { width: 70px; height: 34px; position: relative; flex: none; opacity: .9; }
/* No celular a viz NAO some (o Rodrigo cobrou): ela desce para a segunda
   linha do card, embaixo do texto, e o custo segue na primeira. */
@media (max-width: 620px) {
  .step-row { grid-template-columns: 3.2rem minmax(0, 1fr) auto; }
  .step-row .cost { grid-column: 3; grid-row: 1; }
  .step-viz { grid-column: 2; grid-row: 2; justify-self: start; margin-top: .1rem; }
}

/* 01 · clips dropping into a row, one by one */
.viz-import i {
  position: absolute; top: 50%; width: 9px; height: 15px; margin-top: -7px;
  border-radius: 2px; border: 1.5px solid var(--s600); background: rgba(56,189,248,.18);
  animation: viz-drop 2.4s ease-in-out infinite;
}
.viz-import i:nth-child(1) { left: 2px;  animation-delay: 0s; }
.viz-import i:nth-child(2) { left: 15px; animation-delay: .18s; }
.viz-import i:nth-child(3) { left: 28px; animation-delay: .36s; }
.viz-import i:nth-child(4) { left: 41px; animation-delay: .54s; }
.viz-import i:nth-child(5) { left: 54px; animation-delay: .72s; }
@keyframes viz-drop {
  0%, 8%   { transform: translateY(-16px); opacity: 0; }
  20%, 78% { transform: translateY(0); opacity: 1; }
  92%,100% { transform: translateY(-16px); opacity: 0; }
}

/* 02 · a playhead sweeping a waveform, cutting the flat parts */
.viz-cut { display: flex; align-items: center; gap: 1.5px; height: 34px; }
.viz-cut i {
  width: 3px; border-radius: 2px; background: var(--s500);
  animation: viz-wave 1.9s ease-in-out infinite;
}
.viz-cut i.gap { background: rgba(239,68,68,.5); animation: viz-gap 1.9s ease-in-out infinite; }
@keyframes viz-wave { 0%,100% { height: 40%; } 50% { height: 90%; } }
@keyframes viz-gap  { 0%,45% { height: 12%; opacity: 1; } 60%,100% { height: 12%; opacity: .12; } }
.viz-cut::after {
  content: ''; position: absolute; top: 2px; bottom: 2px; width: 1.5px;
  background: var(--amber-2); animation: viz-head 1.9s linear infinite;
}
@keyframes viz-head { from { left: 0; } to { left: 68px; } }

/* 03 · a 16:9 frame squeezed into 9:16 */
.viz-stack i {
  position: absolute; top: 50%; left: 50%;
  border: 1.5px solid var(--s600); border-radius: 2px;
  background: rgba(56,189,248,.16);
  animation: viz-squeeze 2.6s ease-in-out infinite;
}
@keyframes viz-squeeze {
  0%, 18%  { width: 56px; height: 31px; margin: -15px 0 0 -28px; }
  46%, 72% { width: 19px; height: 34px; margin: -17px 0 0 -9px; }
  100%     { width: 56px; height: 31px; margin: -15px 0 0 -28px; }
}

/* 04 · a caret typing words out, one at a time */
.viz-type i {
  position: absolute; left: 2px; height: 5px; border-radius: 2px;
  background: var(--s500); width: 0;
  animation: viz-typing 3s steps(12) infinite;
}
.viz-type i:nth-child(1) { top: 7px;  animation-delay: 0s; }
.viz-type i:nth-child(2) { top: 15px; animation-delay: 1s; }
.viz-type i:nth-child(3) { top: 23px; animation-delay: 2s; }
@keyframes viz-typing {
  0%      { width: 0; }
  22%     { width: 62px; }
  92%     { width: 62px; opacity: 1; }
  100%    { width: 62px; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .step-viz i { animation: none !important; }
  .viz-import i { transform: none; opacity: 1; }
  .viz-cut i { height: 65%; }
  .viz-cut::after { display: none; }
  .viz-stack i { width: 19px; height: 34px; margin: -17px 0 0 -9px; }
  .viz-type i { width: 62px; }
}

/* ==========================================================================
   ITEM 2 — the year, drawn. 365 squares, 45 of them burned on editing.
   ========================================================================== */
.year {
  margin-top: 1.6rem;
  padding: clamp(1.1rem, 2.6vw, 1.7rem);
  border-radius: var(--r-lg);
  background: #fff;
  border: 1px solid var(--line-2);
  box-shadow: var(--sh-1);
}
.year-head {
  display: flex;
  align-items: baseline;
  gap: .8rem;
  flex-wrap: wrap;
  margin-bottom: .9rem;
  font-family: var(--f-mono);
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.year-key { margin-left: auto; display: flex; gap: 1rem; }
.year-key span { display: flex; align-items: center; gap: .35rem; }
.year-key i { width: 9px; height: 9px; border-radius: 2px; display: block; }
.year-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9px, 1fr));
  gap: 3px;
}
.year-grid i {
  aspect-ratio: 1;
  border-radius: 2px;
  background: rgba(14, 165, 233, .16);
}
/* the 45 lost days light up as the section scrolls past */
.year-grid i.burn {
  background: var(--amber);
  opacity: 0;
  animation: burn-in .01s linear both;
  animation-timeline: view();
}
@supports not (animation-timeline: view()) {
  .year-grid i.burn { opacity: 1; }
}
@keyframes burn-in { to { opacity: 1; } }
.year-foot {
  margin-top: .9rem;
  padding-top: .8rem;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: baseline;
  gap: .7rem;
  flex-wrap: wrap;
  font-size: .88rem;
  color: var(--ink-2);
}
.year-foot b {
  font-family: var(--f-display);
  font-size: 1.5rem;
  color: #b45309;
  letter-spacing: -.02em;
}
@media (prefers-reduced-motion: reduce) { .year-grid i.burn { opacity: 1; } }

/* ==========================================================================
   ITEM 3 — the pipeline as one video walking through five stages.
   The clip sticks while the five stages scroll past it, and the stage that is
   in view drives which version of the file is shown.
   ========================================================================== */
.pipe-split { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(1.4rem, 3.4vw, 3rem); align-items: start; }
@media (max-width: 900px) { .pipe-split { grid-template-columns: 1fr; } }

.pipe-sticky { position: sticky; top: 6rem; }
@media (max-width: 900px) { .pipe-sticky { position: static; max-width: 300px; margin-inline: auto; } }

.pipe-screen {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #0c2536;
  border: 1px solid var(--line-2);
  box-shadow: var(--sh-3);
}
/* As cinco fases sao cinco arquivos reais empilhados. So a ativa fica opaca. */
.pipe-screen video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .45s var(--ease);
}
.pipe-screen [data-stage].on { opacity: 1; }

.pipe-tag {
  position: absolute; left: 10px; bottom: 10px; z-index: 4;
  display: flex; align-items: center; gap: .45rem;
  font-family: var(--f-mono); font-size: .62rem; letter-spacing: .1em;
  text-transform: uppercase; color: #fff;
  background: rgba(3, 37, 54, .82); padding: .3em .65em; border-radius: 5px;
  backdrop-filter: blur(6px);
}
.pipe-tag i { width: 6px; height: 6px; border-radius: 50%; background: var(--s400); box-shadow: 0 0 7px var(--s400); }

.pipe-step.is-live .pipe-dot { box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 0 0 5px rgba(56,189,248,.18), 0 6px 14px -6px rgba(3,105,161,.7); }
.pipe-step.is-live .pipe-body h3 { color: var(--s700); }

/* ==========================================================================
   ITEM 5 — volume, drawn. One upload against forty.
   ========================================================================== */
.vol { display: grid; grid-template-columns: auto 2.4rem minmax(0, 1fr); gap: clamp(.8rem, 2.4vw, 1.8rem); align-items: center; margin-block: 1.8rem; }
@media (max-width: 700px) { .vol { grid-template-columns: 1fr; text-align: center; } .vol-arrow { display: none; } }

.vol-one, .vol-many { display: flex; flex-direction: column; gap: .5rem; align-items: center; }
.vol-cap { font-family: var(--f-mono); font-size: .6rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); }

.vol-tile {
  width: 26px; aspect-ratio: 9/16; border-radius: 3px;
  border: 1.5px solid var(--s600); background: rgba(56,189,248,.12);
}
.vol-one .vol-tile { width: 44px; }

.vol-arrow { display: grid; place-items: center; color: var(--s500); font-size: 1.3rem; }

.vol-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; width: 100%; }
.vol-grid i {
  aspect-ratio: 9/16; border-radius: 3px;
  border: 1.5px solid rgba(2,132,199,.4); background: rgba(56,189,248,.1);
  opacity: 0;
  animation: rise-sm .01s linear both;
  animation-timeline: view();
}
@supports not (animation-timeline: view()) { .vol-grid i { opacity: 1; } }
.vol-grid i.win { background: var(--amber); border-color: var(--amber-2); }
@media (prefers-reduced-motion: reduce) { .vol-grid i { opacity: 1 !important; } }

/* ==========================================================================
   ITEM 0 — breathing room. Sections were uneven; this evens the rhythm and
   gives the heavy ones a little more air than the light ones.
   ========================================================================== */
/* 2026-08-20: estes overrides POR SECAO sao a unica coisa que manda no
   respiro entre secoes. Mexer no --sec-y global nao muda nada aqui, ja caimos
   nessa uma vez. Vaos medidos antes: 150-205px por divisa; alvo: ~110. */
:root { --sec-y: clamp(2.6rem, 4.2vw, 3.6rem); }
section > .shell > .sheet-rule { margin-bottom: 1.6rem; }
.sec-head { margin-bottom: 1.7rem; }
.sec-head:last-child { margin-bottom: 0; }
#problem, #manual, #math, #volume { padding-block: clamp(2.4rem, 4vw, 3.2rem); }
#does, #pricing { padding-block: clamp(2.8rem, 4.6vw, 3.8rem); }
#batch, #made, #testimonials, #compare, #faq { padding-block: clamp(2.6rem, 4.2vw, 3.4rem); }

/* ==========================================================================
   REVISION — pipeline focus, tighter volume chart, calmer table
   ========================================================================== */

/* 1 · one step at a time. The others dim out so the eye has one place to be.

   O dim vai nos FILHOS, nao no .pipe-step. O passo carrega .reveal, e o
   reveal e uma animacao: no fim ela fixa opacity:1 e animacao ganha de
   declaracao normal na cascata, por mais especifica que a regra seja. Era
   por isso que os cinco passos apareciam igualmente acesos. */
.pipe-split .pipe-step .pipe-rail,
.pipe-split .pipe-step .pipe-body {
  transition: opacity .4s var(--ease);
  opacity: .3;
}
.pipe-split .pipe-step.is-live .pipe-rail,
.pipe-split .pipe-step.is-live .pipe-body { opacity: 1; }
.pipe-split .pipe-step .pipe-tags { transition: opacity .4s var(--ease); opacity: 0; }
.pipe-split .pipe-step.is-live .pipe-tags { opacity: 1; }
.pipe-split .pipe-step.is-live .pipe-body h3 { color: var(--s700); }
@media (prefers-reduced-motion: reduce) {
  .pipe-split .pipe-step .pipe-rail,
  .pipe-split .pipe-step .pipe-body,
  .pipe-split .pipe-step .pipe-tags { opacity: 1; }
}
/* the sticky clip gets bigger now that it carries the section */
.pipe-split { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); }
.pipe-screen { box-shadow: 0 40px 80px -30px rgba(3,53,80,.55); }

/* No celular a janela era estatica: aparecia uma vez no topo e sumia, entao
   as cinco fases trocavam fora da tela e a secao perdia o sentido. Fica
   presa tambem aqui, em tamanho de bolso, com a proporcao 9:16 intacta para
   nao cortar a legenda. */
@media (max-width: 900px) {
  /* Precisa sair do grid. Em grid de uma coluna a janela e os passos ficam em
     linhas separadas, e sticky so percorre a propria linha: ficava presa a
     nada e sumia de vez. Em fluxo normal ela corre a secao inteira. */
  .pipe-split { display: block; }
  .pipe-split .pipe-sticky {
    position: sticky;
    top: .9rem;
    z-index: 3;
    width: min(300px, calc(42vh * 9 / 16));
    max-width: 100%;
    margin: 0 auto 1.4rem;
  }
}

/* 3 · transitions: controls sit under the clip instead of floating beside it */
.trans-demo { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); align-items: center; }
.trans-picker { max-width: 34rem; }
.trans-demo > div:last-child { padding-top: 0; }
.trans-stage { box-shadow: 0 30px 60px -24px rgba(3,53,80,.5); }

/* 4 · volume chart: small, dense, and labelled so it reads instantly */
.vol { grid-template-columns: auto 2rem minmax(0, 1fr); gap: 1.2rem; margin-block: 1.4rem 0; }
.vol-grid { grid-template-columns: repeat(20, 1fr); gap: 3px; max-width: 460px; }
.vol-grid i { aspect-ratio: 1; border-radius: 2px; border-width: 1px; }
.vol-one .vol-tile { width: 26px; aspect-ratio: 1; border-radius: 2px; }
.vol-cap { font-size: .58rem; }
.vol-many { align-items: flex-start; }

/* 5 · comparison table: quieter grid, stronger EVA column, easier scanning */
.cmp-wrap { border-radius: var(--r-lg); box-shadow: var(--sh-1); }
.cmp { font-size: .88rem; }
.cmp th, .cmp td { padding: .78rem 1.1rem; }
.cmp thead th { background: #fff; border-bottom: 2px solid var(--line-2); padding-block: .9rem; }
.cmp thead th.is-eva {
  background: linear-gradient(180deg, var(--s500), var(--s700));
  color: #fff;
  border-bottom-color: var(--s700);
  border-radius: 8px 8px 0 0;
}
.cmp tbody tr { border-bottom: 1px solid rgba(2,132,199,.09); }
.cmp tbody tr:nth-child(even) { background: rgba(224,242,254,.32); }
.cmp td:first-child { color: var(--ink-2); font-weight: 500; width: 30%; }
.cmp .is-eva { background: rgba(14,165,233,.1); color: var(--s800); font-weight: 700; box-shadow: inset 1px 0 0 rgba(14,165,233,.25), inset -1px 0 0 rgba(14,165,233,.25); }
.cmp tbody tr:last-child .is-eva { border-radius: 0 0 8px 8px; }
.cmp .yes::before { content: '+ '; font-weight: 700; }
.cmp .no::before { content: '- '; }

/* the +/- prefixes read wrong on phrases like "+ No"; colour alone carries it */
.cmp .yes::before, .cmp .no::before { content: none; }
.cmp .yes { color: var(--green-d); }
.cmp .no { color: #b91c1c; }
.cmp .man { color: #b45309; }
/* the comparison closes tighter into pricing */
#compare { padding-bottom: clamp(2.4rem, 4vw, 3.4rem); }

/* ==========================================================================
   REVISION 3 — pinned pipeline, deeper comparison table, anchored annotations
   ========================================================================== */

/* --- pipeline travado: o painel gruda e o scroll percorre as quatro fases.
   O track da a altura; 100vh extra por fase da o ritmo da troca. */
#how { padding-block: 0; }
/* 360vh: 65vh de scroll por fase. Com 440vh sobrava um rabo de ~900px de
   scroll morto na fase 4 antes do painel soltar. */
.pipe-track { height: 360vh; }
/* O painel tem a ALTURA DO CONTEUDO e gruda ja centralizado na tela: o JS
   poe em --pin-top a folga (viewport - painel) / 2. A versao anterior era
   min-height 100svh com o conteudo centrado DENTRO, e em monitor alto isso
   criava faixas mortas de 200-300px na entrada e na saida da secao. */
.pipe-panel {
  position: sticky;
  top: var(--pin-top, 0px);
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-block: clamp(1.4rem, 3vh, 2.4rem);
}
/* O shell NAO recebe regra nenhuma aqui, de proposito. Ele ja tem largura
   min(100% - gutters, teto) e margin auto no CSS base; como flex item isso
   centra sozinho. width:100% e flex:1 ja colaram o conteudo nas bordas da
   tela DUAS vezes: os dois anulam o min() que da as margens laterais. */
/* dentro do painel travado os reveals nao fazem sentido; tudo visivel */
.pipe-panel .sec-head { margin-bottom: 1.1rem; }
.pipe-steps .pipe-step { margin-bottom: .35rem; }

/* Em janela baixa o clipe 9:16 de 340px estoura os 100vh do painel e cola
   tudo no topo. A largura dele passa a ser funcao da ALTURA que sobra:
   (100svh - cabecalho e paddings) * 9/16, com teto nos 340px. */
.pipe-split { grid-template-columns: auto minmax(0, 1fr); }
.pipe-split .pipe-sticky {
  width: min(340px, calc((100svh - 19rem) * 9 / 16));
  min-width: 200px;
}
/* a coluna dos passos tambem precisa caber: folga leve no caso geral */
.pipe-steps .pipe-body p { font-size: .92rem; }
/* e uma versao compacta para notebook de tela baixa, senao os quatro passos
   nao fecham dentro dos 100vh do painel travado */
@media (max-height: 900px) and (min-width: 901px) {
  .pipe-panel .sec-head .lede { display: none; }
  .pipe-panel .sec-head { margin-bottom: .7rem; }
  .pipe-panel .sec-head h2 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); }
  .pipe-panel .sheet-rule { margin-bottom: .8rem; }
  .pipe-steps .pipe-body h3 { font-size: .95rem; }
  .pipe-steps .pipe-body p { font-size: .84rem; line-height: 1.5; }
  .pipe-steps .pipe-step { margin-bottom: .1rem; }
  .pipe-split .pipe-sticky { width: min(340px, calc((100svh - 13rem) * 9 / 16)); }
}

/* a janela nao precisa mais de sticky proprio: o painel inteiro e que trava */
.pipe-split .pipe-sticky { position: static; top: auto; }

@media (max-width: 900px) {
  .pipe-panel .sec-head .lede { display: none; }
  .pipe-panel .sec-head h2 { font-size: 1.4rem; }
  .pipe-split { display: block; }
  .pipe-split .pipe-sticky {
    position: static;
    width: min(230px, calc(40svh * 9 / 16));
    max-width: 100%;
    margin: 0 auto .9rem;
  }
  /* no bolso so o passo ativo abre; os outros ficam so com o titulo,
     senao os quatro nao cabem no painel travado */
  .pipe-steps .pipe-step p,
  .pipe-steps .pipe-step .pipe-tags { display: none; }
  .pipe-steps .pipe-step.is-live p { display: block; }
  .pipe-steps .pipe-step.is-live .pipe-tags { display: flex; }
  .pipe-steps .pipe-step .pipe-body h3 { font-size: .92rem; }
}

@media (prefers-reduced-motion: reduce) {
  .pipe-track { height: auto; }
  .pipe-panel { position: static; min-height: 0; }
  .pipe-steps .pipe-step p,
  .pipe-steps .pipe-step .pipe-tags { display: block; }
  .pipe-steps .pipe-step .pipe-tags { display: flex; }
}

/* --- tabela: profundidade, cor e uma coluna EVA que parece um card em cima
   da mesa, nao uma coluna pintada. */
.cmp-wrap {
  border: 0;
  border-radius: 18px;
  box-shadow: 0 30px 60px -28px rgba(3, 53, 80, .45), 0 4px 14px -8px rgba(3, 53, 80, .25);
  background: linear-gradient(180deg, #ffffff, #f6fbff);
}
.cmp { font-size: .89rem; }
.cmp thead th {
  background: transparent;
  font-size: .68rem;
}
.cmp thead th.is-eva {
  background: linear-gradient(160deg, var(--s400), var(--s600) 55%, var(--s700));
  color: #fff;
  font-size: .82rem;
  letter-spacing: .14em;
  border-radius: 12px 12px 0 0;
  box-shadow: 0 -6px 18px -8px rgba(14, 165, 233, .55);
}
.cmp-eva-badge { font-size: .9em; margin-right: .15em; }
.cmp tbody tr { border-bottom: 1px solid rgba(2, 132, 199, .08); transition: background .18s var(--ease); }
.cmp tbody tr:nth-child(even) { background: rgba(224, 242, 254, .28); }
.cmp tbody tr:hover { background: rgba(186, 230, 253, .38); }
.cmp .is-eva {
  background: linear-gradient(90deg, #EAF6FF, #DDF1FE);
  box-shadow: inset 2px 0 0 rgba(14, 165, 233, .45), inset -2px 0 0 rgba(14, 165, 233, .45);
}
.cmp tbody tr:last-child .is-eva {
  border-radius: 0 0 12px 12px;
  box-shadow: inset 2px 0 0 rgba(14, 165, 233, .45), inset -2px 0 0 rgba(14, 165, 233, .45),
              inset 0 -2px 0 rgba(14, 165, 233, .45), 0 18px 26px -18px rgba(3, 105, 161, .6);
}
.cmp-ico {
  display: inline-block;
  width: 1.65em;
  font-size: 1.02em;
  filter: saturate(1.05);
}
/* veredito como selo: circulo colorido com o glifo, o texto ao lado */
.cmp .yes::before, .cmp .no::before, .cmp .man::before {
  display: inline-grid;
  place-items: center;
  width: 1.35em; height: 1.35em;
  margin-right: .45em;
  border-radius: 50%;
  font-size: .78em;
  font-weight: 900;
  color: #fff;
  vertical-align: -.18em;
}
.cmp .yes::before { content: '\2713'; background: linear-gradient(160deg, #22c55e, #15803d); box-shadow: 0 2px 6px -2px rgba(21, 128, 61, .6); }
.cmp .no::before { content: '\2715'; background: linear-gradient(160deg, #f87171, #b91c1c); box-shadow: 0 2px 6px -2px rgba(185, 28, 28, .55); }
.cmp .man::before { content: '\270B'; background: linear-gradient(160deg, #fbbf24, #b45309); box-shadow: 0 2px 6px -2px rgba(180, 83, 9, .55); font-size: .72em; }
.cmp .yes { color: var(--green-d); }
.cmp .no { color: #b91c1c; }
.cmp .man { color: #92400e; }

/* --- anotacoes ancoradas: a linha estica ate a borda do controle real */
.annot { transition: top .3s var(--ease); }
.annot-r::after { left: calc(-1 * var(--lead, 34px)); width: var(--lead, 34px); }
.annot-r::before { left: calc(-1 * var(--lead, 34px) - 2px); }

/* ==========================================================================
   REVISION 4 — 5+5 gallery, centred volume, centred transition demo,
   annotation spotlight, breathing pass
   ========================================================================== */

/* --- galeria de legendas: 5 em cima, 5 embaixo, centralizada */
@media (min-width: 880px) {
  .gal {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    max-width: 60rem;
    margin-inline: auto;
  }
}

/* --- volume no meio da secao */
.vol {
  grid-template-columns: auto 2rem auto;
  width: fit-content;
  margin-inline: auto;
}
@media (max-width: 700px) { .vol { grid-template-columns: 1fr; width: auto; } }

/* --- demo de transicoes: coluna unica, tudo centrado no clipe */
.trans-demo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .8rem;
  text-align: center;
}
.trans-demo .trans-stage {
  width: min(300px, 72vw);
  margin-inline: auto;
}
.trans-demo .trans-picker {
  max-width: 36rem;
  justify-content: center;
}
/* a faixa da juncao: qual take esta na tela, e o pulso no corte */
.trans-strip {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--f-mono);
  font-size: .6rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.ts-seg {
  padding: .32em .8em;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  color: var(--ink-3);
  background: #fff;
  transition: all .3s var(--ease);
}
.ts-seg.on {
  color: #fff;
  background: linear-gradient(160deg, var(--s400), var(--s600));
  border-color: var(--s500);
  box-shadow: 0 4px 10px -4px rgba(2, 132, 199, .5);
}
.ts-junction {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 0 rgba(245, 158, 11, .5);
}
.ts-junction.tick { animation: ts-pulse .9s var(--ease); }
@keyframes ts-pulse {
  0% { box-shadow: 0 0 0 0 rgba(245, 158, 11, .55); transform: scale(1); }
  40% { transform: scale(1.5); }
  100% { box-shadow: 0 0 0 14px rgba(245, 158, 11, 0); transform: scale(1); }
}
.trans-label.tick { animation: tl-pop .55s var(--ease); }
@keyframes tl-pop {
  0% { transform: scale(.92); opacity: .4; }
  100% { transform: scale(1); opacity: 1; }
}

/* --- anotacoes: o proprio controle acende dentro da janela */
.annot-spot {
  outline: 2px solid var(--s500) !important;
  outline-offset: 2px;
  border-radius: 8px;
  box-shadow: 0 0 0 5px rgba(14, 165, 233, .16) !important;
}
@media (max-width: 1100px) { .annot-spot { outline: none !important; box-shadow: none !important; } }

/* --- respiros, segunda passada, agora com os vaos MEDIDOS: as divisas
   estavam em 150-205px de vazio. Alvo: ~110-130px. O clamp original chegava
   a 8rem por secao (16rem por divisa). */
:root { --sec-y: clamp(2.6rem, 4.2vw, 3.6rem); }
#does .grid.g-3 { margin-top: 2rem !important; }
.gal + .hero-fine { margin-top: .7rem; }

/* ==========================================================================
   TESTIMONIALS — os prints reais, como telas de celular lado a lado
   ========================================================================== */
.testi-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(272px, 78vw);
  gap: 1rem;
  overflow-x: auto;
  padding: .4rem .2rem 1rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.testi-shot { scroll-snap-align: start; margin: 0; }
.testi-shot img {
  width: 100%;
  height: auto;
  border-radius: 18px;
  border: 1px solid var(--line-2);
  box-shadow: 0 18px 40px -18px rgba(3, 53, 80, .45);
  background: #0b141a;
}
.testi-shot:hover img { transform: translateY(-3px); transition: transform .3s var(--ease); }
.testi-shot figcaption {
  margin-top: .55rem;
  font-family: var(--f-mono);
  font-size: .6rem;
  line-height: 1.5;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
/* barra de rolagem discreta, combinando com o papel */
.testi-strip::-webkit-scrollbar { height: 8px; }
.testi-strip::-webkit-scrollbar-thumb { background: var(--s200); border-radius: 99px; }
.testi-strip::-webkit-scrollbar-track { background: transparent; }

/* ==========================================================================
   G01 — a captura real da fila, dentro do card escuro da secao batch
   ========================================================================== */
.g01-shot { margin: 0; }
.g01-shot video {
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(125, 211, 252, .35);
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .6);
  background: #0a1b28;
}
.g01-shot figcaption {
  margin-top: .7rem;
  font-size: .86rem;
  line-height: 1.55;
  color: #9dc3d9;
}
.g01-tag {
  display: inline-block;
  margin-right: .6rem;
  padding: .22em .7em;
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: .58rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fcd34d;
  border: 1px solid rgba(252, 211, 77, .4);
}

/* --- G02: a fila vazia virando fila cheia, na secao do problema */
.g02-shot { margin: 1.4rem 0 0; }
.g02-shot video {
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--line-2);
  box-shadow: var(--sh-2);
  background: #eaf6fd;
}
.g02-shot figcaption {
  margin-top: .6rem;
  font-size: .84rem;
  line-height: 1.55;
  color: var(--ink-3);
}

/* --- G03: estilos, cores e posicao da legenda, ao vivo, apos a galeria */
.g03-shot {
  margin: 1.6rem auto 0;
  max-width: 46rem;
}
.g03-shot video {
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--line-2);
  box-shadow: var(--sh-2);
  background: #eaf6fd;
}
.g03-shot figcaption {
  margin-top: .6rem;
  font-size: .84rem;
  line-height: 1.55;
  color: var(--ink-3);
}

/* --- 2026-08-20, fechamento: o bloco das legendas centrado como conjunto.
   A grade ja era centrada; o titulo e a nota ficavam a esquerda e
   desequilibravam a composicao. Vale para os sub-blocos do #does. */
#does h3.reveal { text-align: center; }
#does .lede.reveal { text-align: center; max-width: 46rem; margin-inline: auto; }
#does .hero-fine.reveal { text-align: center; }

/* --- 2026-08-20, fechamento 2: o problema em par (tabela = problema,
   G02 = o gesto que resolve), com o texto centrado em cima. */
.problem-head {
  text-align: center;
  max-width: 46rem;
  margin-inline: auto;
  margin-bottom: 2rem;
}
.problem-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.2rem, 3vw, 2.2rem);
  align-items: start;
  max-width: 66rem;
  margin-inline: auto;
}
@media (max-width: 860px) { .problem-pair { grid-template-columns: 1fr; } }
.pp-label {
  font-family: var(--f-mono);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: .55rem;
}

/* --- e o cabecalho do "It directs.": centrado e maior */
#does .sec-head {
  text-align: center;
  margin-inline: auto;
  max-width: 50rem;
}
#does .sec-head h2 { font-size: clamp(2.5rem, 5.2vw, 3.9rem); }
#does .sec-head .lede { margin-inline: auto; max-width: 42rem; }

/* --- hero em video real: a janela gravada, com a mesma moldura do resto */
.hero-app { margin: 0; }
.hero-app video {
  width: 100%;
  border-radius: 16px;
  border: 1px solid var(--line-2);
  box-shadow: 0 30px 70px -28px rgba(3, 53, 80, .5);
  background: #eaf6fd;
}

/* --- aviso publico de checkout em conexao (substitui a nota interna) */
.pending-note {
  border: 1px solid var(--s300);
  background: linear-gradient(160deg, #f0f9ff, #e0f2fe);
  border-radius: 12px;
  padding: .9rem 1.1rem;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--ink-2);
}
.pending-note b { color: var(--s700); }

/* --- botao de som do pipeline: os clipes tem audio real */
.pipe-sound {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
  font-family: var(--f-mono);
  font-size: .6rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(3, 37, 54, .82);
  border: 1px solid rgba(125, 211, 252, .45);
  border-radius: 999px;
  padding: .38em .8em;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: all .25s var(--ease);
}
.pipe-sound:hover { background: rgba(2, 62, 92, .92); border-color: var(--s300); }
.pipe-sound[aria-pressed="true"] {
  background: linear-gradient(160deg, var(--s400), var(--s600));
  border-color: var(--s300);
}

/* ==========================================================================
   VERSAO BR — hero de VSL: headline centrada, player central, CTA embaixo
   ========================================================================== */
.hero-vsl .hero-vsl-head {
  text-align: center;
  max-width: 52rem;
  margin-inline: auto;
}
.hero-vsl .hero-vsl-head .stamp { margin-inline: auto; }
.hero-vsl .hero-vsl-head .lede { margin-inline: auto; max-width: 44rem; }
.hero-vsl .stage {
  max-width: 56rem;
  margin: 1.6rem auto 0;
}
.hero-vsl .hero-vsl-foot { margin-top: 1.6rem; }
.specs-center { justify-content: center; margin-inline: auto; width: fit-content; }
.cta-center { justify-content: center; }

/* --- primeira dobra: headline compacta + VSL visivel sem rolar */
.hero-vsl { padding-top: clamp(1.6rem, 3.5vh, 2.6rem); }
.hero-vsl .hero-vsl-head h1 { font-size: clamp(1.7rem, 3.6vw, 2.7rem); }
.hero-vsl .stage { margin-top: 1.1rem; max-width: min(52rem, 78vh * 16 / 9); }
.hero-vsl .hero-vsl-foot { margin-top: 1.3rem; }