/* What Kuiri is (src/about/page.ts): /sobre, /about, and kuiri.com.br while no live is on or coming. Ten screens on
   the dark stage, each a whole screen, each idea shown on a phone drawn with the live page's own look (tokens only,
   design.md 2: yellow for the one action and the point, red only for live, green and red only at a reveal).
   public/about.js plays a screen once as it comes into view (html.anim); without it, or with reduced motion, every
   piece shows its last frame, so the defaults below ARE the last frames and the keyframes start from elsewhere. */

/* A whole screen at a time, on every device: the page always comes to rest on one screen, never between two (the
   founder, 2026-10-14: "not fun to be stuck in interstitial states"), and one gesture moves one screen. The scroll
   stays the browser's own (a wheel, a trackpad, a finger, the keys), never taken over by a script. */
html.abDoc { background: var(--canvas); scroll-snap-type: y mandatory; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html.abDoc { scroll-behavior: auto; } }
/* --t: when a piece starts in its screen, written on the piece by the page (src/about/page.ts). */
.abPage { --t: 0s; --t0: 0s; --from: 0px; margin: 0; background: var(--canvas); color: var(--ink); font-family: var(--ui); line-height: 1.45;
  -webkit-text-size-adjust: 100%; overflow-wrap: anywhere; }
.abPage *, .abPage *::before, .abPage *::after { box-sizing: border-box; }
.abPage a { color: inherit; }
.abPage a:focus-visible, .abPage button:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 8px; }

/* ------------------------------------------------------------ the top, the dots */
.abTop { position: fixed; z-index: 20; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: max(8px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 8px max(18px, env(safe-area-inset-left));
  background: color-mix(in srgb, var(--canvas) 90%, transparent); }
.abMark { font-family: var(--display); font-weight: 800; font-size: 28px; letter-spacing: -.045em; line-height: 1; text-decoration: none;
  min-height: 44px; display: inline-flex; align-items: center; flex: none; }
.abTopR { display: flex; align-items: center; gap: 12px; min-width: 0; }
/* Kuiri's mark beside the wordmark, as HOME and a live show it: set with the word as one line of type, it stands on the
   word's baseline as a letter would (its round foot a hair below, as an o's), its top level with the k's, so neither the
   k nor the dots of the i lift it (the founder, 2026-10-15: "tem que ser tudo muito bem alinhadinho"). */
.abWord, .phMark { white-space: nowrap; }
.abWord { display: inline-block; }
/* Then optically, as on HOME (his note, 2026-10-15: "a little high and detached… lower the symbol about 2 pixels…
   tighten the gap 10–15%"), then tuned by his eye in ever smaller steps (from "too low" to "better! we are so close now,
   tad higher"): .019em below the baseline-set place (0.57 px at 30 px), the gap .15em instead of .17em, the same as
   HOME's (lives.css .lvMk). */
.abMk, .phMk { transform: translateY(.019em); display: inline-block; width: .78em; height: .78em; margin: 0 0 -.055em .15em; vertical-align: baseline; }
:is(.abMk, .phMk) .mkC { fill: var(--signal); }
.abLang { flex: none; display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 600; color: var(--ink-soft) !important;
  text-decoration: none; }
.abNext { display: inline-flex; align-items: center; gap: 8px; min-width: 0; min-height: 36px; padding: 0 4px 0 12px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--line); text-decoration: none; font-size: 13px; font-weight: 600; }
.abNext i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--signal); }
.abNext.on i { background: var(--live); }
.abNext span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.abNext b { flex: none; padding: 6px 12px; border-radius: var(--r-pill); background: var(--signal); color: var(--on-signal); font-size: 12px; }
.abDots { position: fixed; z-index: 15; right: max(4px, env(safe-area-inset-right)); top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px; }
.abDotList { display: flex; flex-direction: column; }
.abDots a { --mag: 1; position: relative; display: block; width: 20px; height: 20px; }
/* The dots as a scrubber (the founder, 2026-10-15: "when you put your thumb on the … index balls … a really cool, funky,
   interactive widget. Maybe even with haptics … kind of like the Mac's dock"): held by a finger or a mouse, the column
   lifts onto a strip of glass, the dots swell around the finger as the Dock's icons do, bulging out to the left, and
   the one under it lights yellow with its number, its name beside it; released, the page goes there; a light tick for
   each screen passed (public/about.js). A tap is still a tap. */
.abDotList { position: relative; border-radius: 99px; touch-action: none; transition: background-color .2s ease, box-shadow .2s ease; }
.abDotList::before { content: ""; position: absolute; inset: -16px -8px -16px -26px; }   /* a thumb's room around the dots */
.abDotList.scrub { margin: -6px 0; padding: 6px 0; background: color-mix(in srgb, var(--canvas) 74%, transparent); box-shadow: var(--plate-rim); }
.abDotList.scrub a { transform-origin: 75% 50%; transform: translateX(calc((1 - var(--mag)) * 9px)) scale(var(--mag)); transition: transform .09s linear; }
.abDotList.scrub a::after { background: var(--ink-soft); }
.abDotList.scrub a.pick { z-index: 2; }
.abDotList.scrub a.pick b { opacity: 1; transform: none; background: var(--signal); color: var(--on-signal); }
.abDotList.scrub a.pick::after { opacity: 0; }
/* Where the page is now, while the finger looks elsewhere: a bright dot instead of its number. */
.abDotList.scrub a.on:not(.pick) b { opacity: 0; }
.abDotList.scrub a.on:not(.pick)::after { opacity: 1; background: var(--ink); }
.abDotList.scrub a::before { opacity: 0 !important; }   /* a mouse's own labels give way to the scrubber's */
.abScrubName { position: absolute; right: calc(100% + 30px); top: 0; padding: 8px 14px; border-radius: var(--r-pill); background: var(--surface);
  border: 1px solid var(--line); box-shadow: var(--sheet-lift); color: var(--ink); font-size: 14px; font-weight: 800; white-space: nowrap;
  pointer-events: none; opacity: 0; transform: translate(10px, -50%) scale(.92); transition: opacity .15s ease, transform .2s cubic-bezier(.2, .8, .2, 1), top .09s linear; }
.abDotList.scrub .abScrubName { opacity: 1; transform: translate(0, -50%); }
/* Slide numbers (the founder, 2026-10-14: "números nas bolinhas de navegação … assim a pessoa sabe em que página
   está"): the screen in view is its number in a filled circle, springing into place; resting a mouse on the column
   turns every dot into its number, and the one under the cursor says its name. */
.abDots { --bd: 24px; }
.abDots a::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--ink-dim);
  transition: opacity .2s, background-color .25s; }
.abDots a b { position: absolute; left: 50%; top: 50%; width: var(--bd); height: var(--bd); margin: calc(var(--bd) / -2) 0 0 calc(var(--bd) / -2);
  display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--canvas); font-size: calc(var(--bd) * .46);
  font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; pointer-events: none;
  opacity: 0; transform: scale(.3); transition: opacity .25s ease, transform .45s cubic-bezier(.3, 1.6, .5, 1), background-color .25s, color .25s; }
.abDots a.on b { opacity: 1; transform: none; }
.abDots a.on::after { opacity: 0; }
@media (hover: hover) and (pointer: fine) {
  .abDots:hover a:not(.on)::after { opacity: 0; }
  .abDots:hover a:not(.on) b { opacity: 1; transform: scale(.82); background: transparent; color: var(--ink-soft); }
  .abDots a:not(.on):hover b { background: var(--raised); color: var(--ink); transform: none; }
  .abDots a::before { content: attr(data-name); position: absolute; right: calc(100% + 12px); top: 50%; padding: 6px 12px; border-radius: var(--r-pill);
    background: var(--surface); border: 1px solid var(--line); color: var(--ink); font-size: 12px; font-weight: 700; white-space: nowrap;
    pointer-events: none; opacity: 0; transform: translate(6px, -50%); transition: opacity .2s ease, transform .3s ease; }
  .abDots a:hover::before { opacity: 1; transform: translate(0, -50%); }
}
/* ↑ and ↓ for a mouse (a finger swipes, a keyboard has its arrows): one screen each, dim at either end. */
.abArrow { display: none; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 50%; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); cursor: pointer; transition: background-color .2s, opacity .2s; }
.abArrow .ic { width: 18px; height: 18px; }
.abArrow:hover { background: var(--raised); }
.abArrow:disabled { opacity: .3; cursor: default; }
.abArrow.go-1 .ic { animation: k-hop-up .4s cubic-bezier(.3, 1.5, .5, 1); }
.abArrow.go1 .ic { animation: k-hop-down .4s cubic-bezier(.3, 1.5, .5, 1); }
@media (pointer: fine) { .abArrow { display: grid; } }
/* The screen's edges, for a mouse (the founder, 2026-10-14: "as the cursor rests around these areas … a discreet elegant
   slow fade in"): a cursor resting at the top or the foot of a screen, in the middle, slowly brings up a chevron and the
   name of the screen above or below, and a click there goes to it. Passing through shows nothing; a phone or a tablet,
   with no cursor to rest, never has them (the keys and the ↑ ↓ buttons say the same to everyone). */
.abEdge { display: none; }
@media (hover: hover) and (pointer: fine) {
  .abEdge { position: fixed; z-index: 14; left: 37vw; right: 37vw; height: 13vh; min-height: 84px; display: flex; justify-content: center;
    padding: 0; border: 0; background: transparent; color: var(--ink); font: inherit; cursor: pointer; }
  .abEdge[hidden] { display: none; }
  /* The top one reaches the window's top, through the empty middle of the top bar, which lets a mouse through there
     (the founder, 2026-10-14: the foot showed its way and the top did not, a mouse going up landed on the bar); what
     it shows still sits under the bar. */
  .abEdge.up { --bar: calc(max(8px, env(safe-area-inset-top)) + 58px); top: 0; height: calc(13vh + var(--bar)); min-height: calc(84px + var(--bar));
    padding-top: var(--bar); align-items: flex-start; }
  .abTop { pointer-events: none; }
  .abTop > * { pointer-events: auto; }
  .abEdge.down { bottom: 0; align-items: flex-end; padding-bottom: max(16px, env(safe-area-inset-bottom)); }
  .abEdgeIn { display: flex; flex-direction: column; align-items: center; gap: 6px; opacity: 0; transform: translateY(var(--from));
    transition: opacity .25s ease, transform .25s ease; }
  .abEdge.up .abEdgeIn { --from: 8px; }
  .abEdge.down .abEdgeIn { --from: -8px; }
  .abEdge:hover .abEdgeIn { opacity: 1; transform: none;
    transition: opacity .8s ease .3s, transform 1.1s cubic-bezier(.2, .8, .2, 1) .3s; }
  .abEdge .ic { width: 30px; height: 30px; color: var(--ink-soft); transition: color .3s; }
  .abEdge:hover .ic { color: var(--ink); }
  .abEdgeName { max-width: 26vw; font-size: 13px; font-weight: 600; color: var(--ink-soft); white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; }
  .abEdge.go-1 .ic { animation: k-hop-up .4s cubic-bezier(.3, 1.5, .5, 1); }
  .abEdge.go1 .ic { animation: k-hop-down .4s cubic-bezier(.3, 1.5, .5, 1); }
}

/* ------------------------------------------------------------ a screen */
.sc { position: relative; min-height: 100vh; min-height: 100dvh; scroll-snap-align: start; scroll-snap-stop: always;
  display: flex; flex-direction: column; gap: 14px;
  padding: calc(max(8px, env(safe-area-inset-top)) + 66px) 24px max(20px, env(safe-area-inset-bottom)); }
.scText { flex: none; max-width: 540px; }
.scKick { margin: 0 0 8px; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--ink-soft); }
.scKick::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--signal); }
.sc h2 { margin: 0 0 10px; font-family: var(--display); font-weight: 800; font-size: clamp(26px, min(8.2vw, 9vh), 64px); line-height: 1.04;
  letter-spacing: -.035em; text-wrap: balance; }
.scBody { margin: 0; max-width: 32em; font-size: clamp(14px, min(4.1vw, 3.3vh), 19px); line-height: 1.45; color: var(--ink-soft); text-wrap: pretty; }
.scStage { position: relative; flex: 1 1 auto; min-height: 0; container-type: size; display: grid; place-items: center; }
/* Ver de novo: once a screen has played, a round button at its stage's foot plays it again. */
.scReplay { position: absolute; z-index: 5; right: 0; bottom: 0; width: 44px; height: 44px; display: none; place-items: center; padding: 0;
  border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; }
.scReplay .ic { width: 20px; height: 20px; }
.anim .sc.done .scReplay { display: grid; }
/* A screen with a phone or the club's cards is exactly one screen tall: what is left under its words is the stage,
   and the phone takes the stage's height (a container's height only counts when it is definite). */
.sc:not(.scHero):not(.scWho):not(.scTalk) { height: 100vh; height: 100dvh; }
.ic { display: block; flex: none; }

/* ------------------------------------------------------------ the opening */
.scHero { justify-content: center; align-items: center; text-align: center; gap: 0; }
.heroIn { display: flex; flex-direction: column; align-items: center; }
.heroMark { width: clamp(64px, min(26vw, 17vh), 148px); height: auto; margin: 0 0 26px; overflow: visible; }
.mkDot { fill: var(--ink); fill-opacity: .78; transform-box: fill-box; transform-origin: center; }
.mkRing { fill: none; stroke: var(--ink); stroke-opacity: .86; stroke-width: 8.5; stroke-dasharray: 138.3; stroke-dashoffset: 0; }
.mkCore { fill: var(--signal); transform-box: fill-box; transform-origin: center; }
.heroTitle { margin: 0; max-width: 11em; font-family: var(--display); font-weight: 800; font-size: clamp(34px, min(12.4vw, 12.5vh), 104px); line-height: .98;
  letter-spacing: -.045em; text-wrap: balance; }
.heroLede { margin: 20px auto 0; max-width: 31em; font-size: clamp(15px, min(4.5vw, 3.4vh), 22px); line-height: 1.45; color: var(--ink-soft); text-wrap: balance; }
.heroCtas { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 30px; }
.abBtn { display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 52px; padding: 0 26px; border-radius: var(--r-pill);
  font-weight: 700; font-size: 17px; text-decoration: none; }
.abBtn .ic { width: 1.2em; height: 1.2em; }
.abBtn.go { background: var(--signal); color: var(--on-signal) !important; }
.abBtn.ghost { box-shadow: inset 0 0 0 1.5px var(--field-edge); }
.abBtn:active { transform: scale(.98); }
.heroDown { position: absolute; left: 0; right: 0; margin: 0 auto; bottom: max(14px, env(safe-area-inset-bottom)); width: 44px; height: 44px;
  display: grid; place-items: center; color: var(--ink-soft); }
.heroDown .ic { width: 26px; height: 26px; }
@media (max-height: 620px) {
  .heroMark { margin-bottom: 16px; }
  .heroCtas { margin-top: 20px; }
  .heroDown { display: none; }
}

/* The yellow point that goes along with the reader (about.js, *the yellow point leads the way*): it hops from screen
   to screen as a ball does, dropping dots that fade, and lands on each screen's own dot. It shows only while it
   travels; leaving the opening, it is the logo's middle that sets off. Under the dots and the header; nothing to press. */
.guide { position: fixed; z-index: 12; inset: 0; pointer-events: none; }
.guideDot, .guideCrumb { position: absolute; left: 0; top: 0; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
  background: var(--signal); opacity: 0; will-change: transform, opacity; }
.guideDot { box-shadow: 0 0 18px color-mix(in srgb, var(--signal) 45%, transparent); transition: opacity .2s ease; }
.guideTip { position: absolute; left: 0; top: 0; margin-top: -.62em; font-family: var(--display); font-weight: 800; font-size: clamp(24px, 6vw, 44px);
  letter-spacing: -.03em; line-height: 1.2; white-space: nowrap; color: var(--signal); opacity: 0; will-change: transform, opacity;
  text-shadow: 0 0 18px var(--canvas), 0 0 6px var(--canvas); }
.guide.on .guideDot { opacity: 1; transition-duration: .1s; }
/* The screens it sets off from and lands on: their own dot is the one travelling. */
.scHero.lent .mkCore, .sc.lent .scKick::before { visibility: hidden; }
html:not(.anim) .guide { display: none; }

/* ------------------------------------------------------------ the phone */
.ph { position: relative; width: min(100cqw, calc(100cqh * 9 / 19.5), 340px); aspect-ratio: 9 / 19.5;
  border-radius: 13% / 6%; background: var(--raised); box-shadow: 0 0 0 1px var(--line); }
/* The screen is the container its pieces are measured by (cqw: a hundredth of the screen's width), so a phone of any
   size draws the same live page. */
.phScr { position: absolute; inset: 1.4% 3.1%; overflow: hidden; container-type: inline-size; border-radius: 10.5% / 4.8%;
  background: var(--canvas); color: var(--ink); font-family: var(--ui); line-height: 1.25; }
.phScr p { margin: 0; }
/* The host's camera, drawn as the live page draws a camera that is off: a figure in the light. */
.phHost { position: absolute; inset: 0; background: radial-gradient(75% 48% at 50% 36%, color-mix(in srgb, var(--ink) 36%, var(--canvas)),
  color-mix(in srgb, var(--ink) 10%, var(--canvas)) 62%, var(--canvas)); }
.phHost::before, .phHost::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  background: color-mix(in srgb, var(--ink) 13%, var(--canvas)); }
.phHost::before { top: 29%; width: 31cqw; height: 31cqw; border-radius: 50%; }
.phHost::after { top: 51%; width: 104cqw; height: 90cqw; border-radius: 50% 50% 0 0; }
.phTop { position: absolute; z-index: 3; left: 4cqw; right: 4cqw; top: 4.4cqw; display: flex; align-items: center; gap: 2.4cqw; }
.phMark { font-family: var(--display); font-weight: 800; font-size: 7.6cqw; letter-spacing: -.045em; line-height: 1; }
.phLive { display: inline-flex; align-items: center; gap: 1.4cqw; padding: 1.3cqw 2.8cqw; border-radius: 99px;
  background: color-mix(in srgb, var(--canvas) 82%, transparent); font-size: 2.9cqw; font-weight: 800; letter-spacing: .02em; }
.phLive i { width: 2.1cqw; height: 2.1cqw; border-radius: 50%; background: var(--live); }
.phEye { margin-left: auto; display: inline-flex; align-items: center; gap: 1.3cqw; padding: 1.5cqw 3cqw; border-radius: 99px;
  border: 1px solid var(--line); background: color-mix(in srgb, var(--canvas) 72%, transparent); font-size: 3.4cqw; font-weight: 700; }
.phEye .ic { width: 4.2cqw; height: 4.2cqw; }
.phShow { position: absolute; z-index: 3; left: 4cqw; top: 15.5cqw; max-width: 80cqw; display: inline-flex; align-items: center; gap: 2cqw;
  padding: 1.2cqw 3.6cqw 1.2cqw 1.2cqw; border-radius: 99px; border: 1px solid var(--line);
  background: color-mix(in srgb, var(--canvas) 82%, transparent); font-size: 3.3cqw; white-space: nowrap; overflow: hidden; }
.phShow i, .lkHostChip i, .lkHead i { flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--canvas);
  font-style: normal; font-weight: 800; }
.phShow i { width: 6.4cqw; height: 6.4cqw; font-size: 2.9cqw; }
.phShow span { color: var(--ink-soft); }
.tap { position: absolute; z-index: 9; width: 14cqw; height: 14cqw; margin: -7cqw 0 0 -7cqw; border-radius: 50%; pointer-events: none;
  background: color-mix(in srgb, var(--ink) 55%, transparent); }
.pbtn { display: inline-flex; align-items: center; justify-content: center; gap: 1.6cqw; min-height: 10.4cqw; padding: 0 4.4cqw; border-radius: 99px;
  font-size: 3.8cqw; font-weight: 800; white-space: nowrap; }
.pbtn.go { background: var(--signal); color: var(--on-signal); }
.pbtn.alt { background: var(--raised); color: var(--ink); }
.pbtn .ic { width: 4.2cqw; height: 4.2cqw; }

/* The why: eight people, each alone in a floating bubble (a thin rim, a curved shine, a glint); Kuiri's point lands,
   its ripple runs out, each bubble pops in a splash as the ripple reaches it, and the eight gather around the point,
   which is Kuiri's mark (public/logo.svg's proportions, in hundredths of the stage's shorter side). */
.mf { --x0: 0; --y0: 0; --x1: 0; --y1: 0; --a: 0deg; --bob: 1s; --round: 1.7s; position: relative; width: 100cqw; height: 100cqh; }
.mfP, .mfRing, .mfCore { position: absolute; left: 50%; top: 50%; border-radius: 50%; }
.mfP { width: 11.2cqmin; height: 11.2cqmin; margin: -5.6cqmin 0 0 -5.6cqmin; transform: translate(var(--x1), var(--y1)); }
.mfBob { position: absolute; inset: 0; }
.mfFace { position: absolute; inset: 0; border-radius: 50%; background: color-mix(in srgb, var(--ink) 78%, var(--canvas)); }
.mfBub { position: absolute; left: 50%; top: 50%; width: 28cqmin; height: 28cqmin; margin: -14cqmin 0 0 -14cqmin; border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--ink) 42%, transparent);
  background: radial-gradient(circle, transparent 56%, color-mix(in srgb, var(--ink) 10%, transparent)); }
.mfBub::before { content: ""; position: absolute; inset: 9%; border-radius: 50%; border: .55cqmin solid transparent;
  border-top-color: color-mix(in srgb, var(--ink) 70%, transparent); transform: rotate(-42deg); }
.mfBub::after { content: ""; position: absolute; left: 24%; top: 21%; width: 2.2cqmin; height: 2.2cqmin; border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 85%, transparent); }
.mfDrops { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.mfDrops i { position: absolute; left: -.8cqmin; top: -.8cqmin; width: 1.6cqmin; height: 1.6cqmin; border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 75%, transparent); opacity: 0; transform: rotate(var(--a)) translateX(21cqmin) scale(.4); }
/* Kuiri's point: its round from bubble to bubble is the page's own keyframes (k-round, src/about/page.ts). */
.mfKuiri { position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 2; }
.mfRing { width: 36.9cqmin; height: 36.9cqmin; margin: -18.45cqmin 0 0 -18.45cqmin;
  border: 5.97cqmin solid color-mix(in srgb, var(--ink) 86%, var(--canvas)); }
.mfCore { width: 17.6cqmin; height: 17.6cqmin; margin: -8.8cqmin 0 0 -8.8cqmin; background: var(--signal); }
.mfKuiri .mfCore { left: 0; top: 0; }
.mfAlone { margin: 0 0 14px; font-size: clamp(18px, 4.8vw, 26px); font-weight: 700; line-height: 1.3; text-wrap: balance; }
/* *juntos.*: the paragraph's last word, at twice its size, its full stop the yellow point: an empty box
   sits on the baseline, as a period does. */
.mfTogether { display: inline-block; white-space: nowrap; margin-left: .06em; font-family: var(--display); font-weight: 800;
  font-size: 2em; line-height: 0; letter-spacing: -.04em; color: var(--ink); vertical-align: baseline; }
/* Every line the same distance from the next (the founder: "esses espaços devem ser iguais"): the big word takes no
   height of its own (line-height 0), it rises into the room the paragraph's lines all have. */
.mfBody { line-height: 1.85; }
.mfStop { display: inline-block; width: .22em; height: .22em; margin-left: .05em; border-radius: 50%; background: var(--signal);
  vertical-align: baseline; }
/* Read, not seen. */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* 1 · the link: a message with the live's link, a tap, and the live's poster */
.lkChat { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; background: var(--surface); }
.lkHead { display: flex; align-items: center; gap: 2.6cqw; padding: 11cqw 4.4cqw 3.4cqw; border-bottom: 1px solid var(--line); font-size: 4.2cqw; }
.lkHead i { width: 9cqw; height: 9cqw; font-size: 3.8cqw; background: var(--raised); }
.lkMsgs { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 2.6cqw;
  padding: 4cqw 4.4cqw 12cqw; }
.bub { max-width: 80%; padding: 2.8cqw 3.8cqw; border-radius: 4.4cqw 4.4cqw 4.4cqw 1.2cqw; background: var(--raised); font-size: 3.9cqw; line-height: 1.3; }
.lkCard { display: flex; flex-direction: column; gap: 2.2cqw; padding: 1.8cqw; width: 80%; }
.lkThumb { display: grid; place-items: center; height: 34cqw; border-radius: 3cqw; background: var(--canvas); }
.lkThumb i { width: 13cqw; height: 13cqw; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 2.4cqw var(--canvas), 0 0 0 4.4cqw var(--ink); }
.lkMeta { display: flex; flex-direction: column; gap: .8cqw; padding: 0 1.6cqw 1.2cqw; }
.lkMeta b { font-size: 4cqw; }
.lkMeta small { font-size: 3.1cqw; color: var(--ink-soft); }
/* The live's description, as a link's preview and the live's poster show it (the founder, 2026-10-14). */
.lkDesc { font-size: 3cqw; line-height: 1.3; color: var(--ink-soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lkAbout { margin: 0 0 4cqw !important; font-size: 3.7cqw; line-height: 1.38; color: var(--ink); }
.lkTap { left: 44%; bottom: 30cqw; }
.lkPoster { position: absolute; inset: 0; z-index: 2; }
.lkPoster::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, var(--canvas) 62%); }
.lkBody { position: absolute; z-index: 3; left: 5cqw; right: 5cqw; bottom: 6cqw; }
.chip { display: inline-flex; align-items: center; gap: 1.6cqw; padding: 1.6cqw 3.2cqw; border-radius: 99px; border: 1px solid var(--line);
  background: color-mix(in srgb, var(--canvas) 80%, transparent); font-size: 3.4cqw; font-weight: 700; }
.chip .ic { width: 3.9cqw; height: 3.9cqw; }
.lkTitle { margin: 3.4cqw 0 2.4cqw !important; font-family: var(--display); font-weight: 800; font-size: 10.4cqw; line-height: 1; letter-spacing: -.035em; }
.lkHostChip { display: inline-flex; align-items: center; gap: 2cqw; padding: 1.2cqw 3.8cqw 1.2cqw 1.2cqw; border-radius: 99px; border: 1px solid var(--line);
  background: color-mix(in srgb, var(--canvas) 80%, transparent); font-size: 3.6cqw; }
.lkHostChip i { width: 7cqw; height: 7cqw; font-size: 3.2cqw; }
.lkClock { display: flex; align-items: baseline; gap: 3cqw; margin: 4.4cqw 0 3cqw !important; }
.lkClock span { font-size: 4.4cqw; color: var(--ink-soft); }
.lkClock b { font-size: 11.4cqw; font-weight: 800; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.lkBtns { display: flex; gap: 2.4cqw; }
.lkBtns .pbtn { min-height: 11.4cqw; padding: 0 3.6cqw; font-size: 3.4cqw; }
.lkBtns .go { flex: 1; }

/* 2 · the game, and 6 · a brand's question: the question on the glass, the answers on plates */
.gm { position: absolute; z-index: 4; left: 3.4cqw; right: 3.4cqw; bottom: 4cqw; display: flex; flex-direction: column; gap: 2.2cqw; }
.gmCard { padding: 3.8cqw 4.2cqw; border-radius: 4.8cqw; background: var(--glass); box-shadow: var(--plate-rim); }
.gmRail { display: flex; align-items: center; gap: 3cqw; font-size: 3cqw; font-weight: 800; color: var(--ink-soft); }
.gmTime { flex: 1; height: 1.5cqw; border-radius: 99px; background: var(--line); overflow: hidden; }
.gmTime i { display: block; height: 100%; background: var(--signal); transform-origin: left; transform: scaleX(0); }
.gmQ { margin: 2.6cqw 0 2cqw !important; font-size: 5.1cqw; font-weight: 800; line-height: 1.22; text-wrap: balance; }
.gmPeople { display: grid; font-size: 3.2cqw; font-weight: 700; color: var(--ink-soft); }
.gmPeople span { grid-area: 1 / 1; }
.gmFast { align-self: flex-start; display: inline-flex; align-items: center; gap: 1.6cqw; padding: 1.5cqw 3.2cqw; border-radius: 99px;
  border: 1px solid color-mix(in srgb, var(--signal) 55%, transparent); background: color-mix(in srgb, var(--canvas) 82%, transparent);
  font-size: 3.2cqw; font-weight: 800; }
.gmFast .ic { width: 3.8cqw; height: 3.8cqw; color: var(--signal); }
.gmAns { position: relative; display: flex; flex-direction: column; gap: 2.2cqw; }
.ans { position: relative; display: flex; align-items: center; gap: 3.2cqw; min-height: 12.4cqw; padding: 0 4.2cqw; border-radius: 3.4cqw; overflow: hidden;
  background: var(--glass); box-shadow: var(--plate-rim); font-size: 4.4cqw; font-weight: 800; }
.ans i { position: relative; z-index: 1; width: 6.8cqw; height: 6.8cqw; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line);
  font-style: normal; font-size: 3cqw; }
.ans b { position: relative; z-index: 1; }
.ansBed { position: absolute; inset: 0; background: var(--right); }
.ansDim { position: absolute; inset: 0; z-index: 2; background: color-mix(in srgb, var(--canvas) 50%, transparent); }
.ansPick { position: absolute; inset: 0; z-index: 2; border-radius: inherit; box-shadow: inset 0 0 0 .9cqw var(--signal); }
.ans.right b, .ans.right i, .ansOk { color: var(--on-right); }
.ans.right i { border-color: color-mix(in srgb, var(--on-right) 45%, transparent); }
.ansOk { position: relative; z-index: 1; margin-left: auto; width: 6.4cqw; height: 6.4cqw; }
.ansOk .ic { width: 100%; height: 100%; stroke-width: 3; }
.gmTap { left: 52%; top: 50%; }
/* A question about a picture (the brands'): the picture whole, above the question. */
.gmCard .gmPic { width: 58cqw; aspect-ratio: 1; margin: 2.6cqw auto 0; border-radius: 3cqw; overflow: hidden; box-shadow: var(--plate-rim); }
.gmPic img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* The finger going to your answer: it rests on the middle one. */
.gmAns .finger { right: auto; bottom: auto; left: 52%; top: 50%; margin: -6.5cqw 0 0 -6.5cqw; --fx: 16cqw; --fy: -48cqw; }
/* The brands' question: your finger goes to the last answer, the right one. */
#marcas .gmAns .finger, #marcas .gmTap { top: 85%; }
.spons { display: inline-flex; align-items: center; gap: 1.6cqw; font-size: 3.1cqw; font-weight: 800; color: var(--ink-soft); }
.spons .ic { width: 4.2cqw; height: 4.2cqw; }
.prize { align-self: flex-start; display: inline-flex; align-items: center; gap: 1.8cqw; padding: 1.8cqw 3.6cqw; border-radius: 99px;
  background: var(--ink); color: var(--canvas); font-size: 3.4cqw; font-weight: 800; }
.prize .ic { width: 4.2cqw; height: 4.2cqw; }
/* The festival's mark (a koala) on the oferecimento and on the question. */
.brandMark { flex: none; display: inline-grid; place-items: center; width: 5.6cqw; height: 5.6cqw; border-radius: 1.6cqw; background: var(--ink); color: var(--canvas); }
.brandMark .ic { width: 78%; height: 78%; stroke-width: 2.2; }
.bump { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; }
.bumpIn { display: flex; flex-direction: column; align-items: center; gap: 2.4cqw; padding: 6cqw 7cqw 7cqw; border-radius: 6cqw; background: var(--glass);
  box-shadow: var(--plate-rim); }
.bumpIn small { font-size: 3cqw; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.bumpMark { display: flex; align-items: center; gap: 2.6cqw; white-space: nowrap; }
.bumpMark .brandMark { width: 11cqw; height: 11cqw; border-radius: 3cqw; }
.bumpMark b { font-family: var(--display); font-size: 8.4cqw; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
/* Your pick, wrong: red at the reveal, its ring gone. */
.ansBad { position: absolute; inset: 0; background: var(--wrong); }
.ansPickW { position: absolute; inset: 0; z-index: 2; }
.ans.wrong b, .ans.wrong i, .ans.wrong .ansOk { color: var(--on-wrong); }
.ans.wrong i { border-color: color-mix(in srgb, var(--on-wrong) 45%, transparent); }
/* The winner's moment, as the live page's (public/celebrate.js): the face in the yellow ring, the prize flying onto
   it, the name, what they took; over the host, with the chat still in view below. */
.cel { position: absolute; z-index: 6; left: 0; right: 0; top: 27cqw; display: flex; flex-direction: column; align-items: center; gap: 1.4cqw;
  padding: 6cqw 0 8cqw; background: radial-gradient(closest-side, color-mix(in srgb, var(--canvas) 78%, transparent), transparent); }
.celFace { position: relative; width: 30cqw; height: 30cqw; display: grid; place-items: center; border-radius: 50%; background: var(--raised);
  box-shadow: 0 0 0 1.2cqw var(--signal); }
.celFace > b { font-family: var(--display); font-size: 13cqw; font-weight: 800; }
.celBadge { position: absolute; right: -4cqw; bottom: -3cqw; width: 14cqw; height: 14cqw; display: grid; place-items: center; border-radius: 3.6cqw;
  background: var(--ink); color: var(--canvas); box-shadow: 0 0 0 .9cqw var(--canvas), 0 0 0 1.8cqw var(--signal); }
.celBadge .ic { width: 66%; height: 66%; }
.celBadge path { fill: var(--canvas); }
.celBadge .lbl { fill: var(--ink); stroke: none; }
/* A ticket's perforation, drawn on the ticket. */
:is(.prodPic, .celBadge) .cut { fill: none; stroke: var(--ink); stroke-dasharray: 1.6 1.7; }
.celName { margin-top: 3cqw !important; font-size: 7.4cqw; font-weight: 800; letter-spacing: -.01em; text-shadow: var(--text-rim); }
.celWhat { font-size: 4cqw; font-weight: 700; text-shadow: var(--text-rim); }
.celWhat b { color: var(--signal); }
/* The second question: four pictures in a square, your pick red, the answer green, and why, above. */
.pics { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 2.2cqw; }
.pic { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 3.2cqw; background: var(--raised); box-shadow: var(--plate-rim); }
.pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pic > i { position: absolute; left: 2cqw; top: 2cqw; z-index: 2; width: 6.4cqw; height: 6.4cqw; display: grid; place-items: center; border-radius: 50%;
  background: var(--glass); font-style: normal; font-size: 3cqw; font-weight: 800; }
.picPick, .picBad, .picGood, .picDim { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.picPick { box-shadow: inset 0 0 0 1cqw var(--signal); }
.picBad { display: grid; place-items: center; background: color-mix(in srgb, var(--wrong) 55%, transparent); box-shadow: inset 0 0 0 1cqw var(--wrong); color: var(--on-wrong); }
.picBad .ic { width: 12cqw; height: 12cqw; stroke-width: 3; }
.picGood { box-shadow: inset 0 0 0 1.2cqw var(--right); }
.picGood .ic { position: absolute; right: 2cqw; top: 2cqw; width: 7cqw; height: 7cqw; padding: 1.2cqw; border-radius: 50%; background: var(--right); color: var(--on-right); stroke-width: 3.2; }
.picDim { background: color-mix(in srgb, var(--canvas) 55%, transparent); }
.picTap { left: 74%; top: 26%; }
.why2 { position: absolute; left: 0; right: 0; bottom: calc(100% + 2.2cqw); display: flex; flex-direction: column; gap: 1.4cqw; padding: 3.6cqw 4cqw;
  border-radius: 4.8cqw; background: var(--sheet); border: 1px solid var(--sheet-edge); font-size: 3.5cqw; line-height: 1.32; color: var(--ink-soft); }
.why2 b { font-size: 4.2cqw; color: var(--ink); }

/* 3 · the shop: the product on screen, two taps, the chat says who bought */
.chat { position: absolute; z-index: 3; left: 3.4cqw; right: 16cqw; bottom: 48cqw; display: flex; flex-direction: column; align-items: flex-start; gap: 1.8cqw; }
.cl { display: inline-flex; align-items: center; gap: 1.6cqw; padding: 1.2cqw 3.2cqw 1.2cqw 1.2cqw; border-radius: 3.9cqw; background: var(--chat-bed);
  font-size: 3.1cqw; color: var(--ink-soft); }
.cl i { flex: none; width: 5.4cqw; height: 5.4cqw; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--canvas);
  font-style: normal; font-size: 2.7cqw; font-weight: 800; }
.cl b { color: var(--ink); }
.cl > span { min-width: 0; }
.clHost { display: inline-block; margin-right: 1.3cqw; padding: 0 1.3cqw; border-radius: 99px; background: var(--ink); color: var(--canvas);
  font-style: normal; font-size: 2.5cqw; font-weight: 800; letter-spacing: .02em; line-height: 3.8cqw; vertical-align: .3cqw; }
/* A busy chat (the auction's and the brands'): each line arrives at the bottom and pushes the others up, the oldest
   fading out at the top, as the live page's chat does. */
.feed { position: absolute; z-index: 3; left: 3.4cqw; right: 14cqw; display: flex; flex-direction: column; justify-content: flex-end;
  align-items: flex-start; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, transparent, var(--ink) 30%);
  mask-image: linear-gradient(to bottom, transparent, var(--ink) 30%); }
.feed .cl { flex: none; max-height: 24cqw; margin-top: 1.6cqw; overflow: hidden; }   /* up to five lines, as the host's offer */
.lotFeed { bottom: 57cqw; height: 46cqw; }
.brandFeed { bottom: 41cqw; height: 88cqw; }
/* The offer's clock, over the ticket's card. */
.offer { position: absolute; z-index: 4; left: 3.4cqw; bottom: 31.5cqw; font-variant-numeric: tabular-nums; }
/* The live page's celebration (public/celebrate.js, its win set): emojis rain over the screen for a few seconds, never
   in the way; the last frame has none. */
.rain { --x: 0%; --s: 8cqw; --d: 2s; --dx: 0cqw; --r: 0deg; position: absolute; inset: 0; z-index: 8; pointer-events: none; overflow: hidden; }
.rain i { position: absolute; top: 0; left: var(--x); font-style: normal; font-size: var(--s); line-height: 1; opacity: 0; }
.say { position: absolute; z-index: 3; left: 3.4cqw; right: 16cqw; bottom: 34cqw; padding: 2.8cqw 4.2cqw; border-radius: 99px; border: 1px solid var(--field-edge);
  background: color-mix(in srgb, var(--canvas) 72%, transparent); font-size: 3.6cqw; color: var(--placeholder); }
.prod { position: absolute; z-index: 4; left: 3.4cqw; right: 3.4cqw; bottom: 4cqw; display: flex; align-items: center; gap: 3cqw; padding: 3cqw;
  border-radius: 4.8cqw; background: var(--glass); box-shadow: var(--plate-rim); }
.prodPic { flex: none; width: 17cqw; height: 17cqw; display: grid; place-items: center; border-radius: 3cqw; background: var(--ink); color: var(--canvas); }
.prodPic svg { width: 66%; height: 66%; }
.prodPic path { fill: var(--canvas); }
.prodPic .lbl { fill: var(--ink); stroke: none; }
.prodPic .band { fill: none; }
.prodTxt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .7cqw; }
.prodTxt > b { font-size: 4cqw; line-height: 1.15; }
.prodTxt small { font-size: 3cqw; color: var(--ink-soft); }
.prodTxt small s { white-space: nowrap; }
.prodTxt .prodPrice { display: inline-flex; align-items: center; gap: 1.4cqw; font-size: 3.8cqw; }
.prodPrice i { width: 2.1cqw; height: 2.1cqw; border-radius: 50%; background: var(--signal); }
/* The discount, against the price the same thing has elsewhere (struck through above it): green, as a shop shows it. */
.prodOff { padding: .3cqw 1.4cqw; border-radius: 99px; background: var(--right); color: var(--on-right); font-style: normal; font-size: 2.9cqw; font-weight: 800; }
.prodBuy { flex: none; display: flex; flex-direction: column; align-items: center; gap: 1.2cqw; }
.prodBuy small { font-size: 2.6cqw; color: var(--ink-soft); white-space: nowrap; }
.shopTap { right: 18.8cqw; bottom: 18.1cqw; margin: 0 -7cqw -7cqw 0; }
.payTap { right: 50cqw; bottom: 42.4cqw; margin: 0 -7cqw -7cqw 0; }   /* on Apple Pay's button */
/* A finger, as a screen recording shows one: it comes into view, glides to what it will press, presses and lifts, so
   the eye is on the button before anything happens. It rests where it presses (right, bottom: the button's middle);
   --fx and --fy are where it comes from. */
.finger { --fx: 0cqw; --fy: 0cqw; position: absolute; z-index: 9; width: 13cqw; height: 13cqw; margin: 0 -6.5cqw -6.5cqw 0; border-radius: 50%;
  pointer-events: none; opacity: 0; background: color-mix(in srgb, var(--ink) 42%, transparent);
  box-shadow: 0 0 0 .8cqw color-mix(in srgb, var(--ink) 80%, transparent), 0 1.4cqw 4cqw color-mix(in srgb, var(--canvas) 65%, transparent); }
.shopFinger { right: 18.8cqw; bottom: 18.1cqw; --fx: -19cqw; --fy: -62cqw; }
.payFinger { right: 50cqw; bottom: 42.4cqw; --fx: 14cqw; --fy: -30cqw; }
.pay { position: absolute; z-index: 6; inset: 0; display: flex; align-items: flex-end; }
/* The page dims behind the sheet only while the sheet is up. */
.payScrim { position: absolute; inset: 0; background: var(--sheet-scrim); }
.paySheet { position: relative; z-index: 1; }
.paySheet { width: 100%; padding: 5cqw 5cqw 6cqw; border-radius: 6cqw 6cqw 0 0; background: var(--sheet); border: 1px solid var(--sheet-edge);
  border-bottom: 0; box-shadow: var(--sheet-lift); }
.payHead { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4cqw !important; font-size: 4.2cqw; }
/* The checkout: Apple Pay's button first (white on the dark sheet, Apple's own style), the other ways below. */
.apl { display: block; fill: currentColor; stroke: none; }
.apBtn { display: flex; align-items: center; justify-content: center; gap: .9cqw; height: 11.4cqw; border-radius: 2.6cqw; background: var(--ink);
  color: var(--canvas); }
.apBtn .apl, .apMark .apl { width: 4.6cqw; height: 4.6cqw; margin-top: -.7cqw; }
.apBtn b, .apMark b { font-size: 5.2cqw; font-weight: 600; letter-spacing: -.02em; }
.payOr { margin: 3.4cqw 0 1.4cqw !important; font-size: 3cqw; color: var(--ink-soft); text-align: center; }
.payWay { display: flex; align-items: center; gap: 2.8cqw; padding: 3cqw .6cqw; border-top: 1px solid var(--line); font-size: 3.7cqw; }
.payWay b { flex: 1; font-weight: 600; }
.payWay .ic { width: 4.6cqw; height: 4.6cqw; }
.payWay .ic:last-child { width: 4cqw; height: 4cqw; color: var(--ink-dim); }
/* Apple's own sheet over it, dark as an iPhone's at night, confirmed with the side button. */
.apSheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 4.4cqw 5cqw 5cqw; border-radius: 6cqw 6cqw 0 0;
  background: var(--canvas); border: 1px solid var(--sheet-edge); border-bottom: 0; box-shadow: var(--sheet-lift); }
.apTop { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3.4cqw !important; }
.apMark { display: inline-flex; align-items: center; gap: .9cqw; }
.apX { width: 6.4cqw; height: 6.4cqw; display: grid; place-items: center; border-radius: 50%; background: var(--raised); color: var(--ink-soft); }
.apX .ic { width: 3.4cqw; height: 3.4cqw; }
.apCard { display: flex; align-items: center; gap: 3cqw; padding: 2.8cqw 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.apCardPic { flex: none; width: 13cqw; height: 8.2cqw; border-radius: 1.3cqw;
  background: linear-gradient(135deg, var(--signal), color-mix(in srgb, var(--live) 70%, var(--canvas))); }
.apCard span { flex: 1; display: flex; flex-direction: column; gap: .5cqw; }
.apCard b { font-size: 3.7cqw; }
.apCard small { font-size: 3.1cqw; color: var(--ink-soft); }
.apCard > .ic { width: 4cqw; height: 4cqw; color: var(--ink-dim); }
.apSum { display: flex; justify-content: space-between; align-items: baseline; padding: 3.2cqw 0 2cqw; font-size: 3.4cqw; color: var(--ink-soft); }
.apSum b { font-size: 5.4cqw; color: var(--ink); }
.apFoot { display: grid; place-items: center; height: 17cqw; }
.apFoot > p { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; gap: 1.6cqw; font-size: 3.2cqw; color: var(--ink-soft); }
.apFoot .ic { width: 7cqw; height: 7cqw; }
.apDone { color: var(--ink) !important; font-weight: 700; }
.apDone .ic { width: 9cqw; height: 9cqw; padding: 1.8cqw; border-radius: 50%; box-shadow: inset 0 0 0 .55cqw var(--ink); stroke-width: 3; }
/* *Clique duas vezes para pagar*, by the side button, as an iPhone says it. */
.apHintW { position: absolute; z-index: 9; right: 0; top: 51.3cqw; }   /* level with the side button */
.apHint { display: flex; align-items: center; gap: 2cqw; }
.apHint span { max-width: 30cqw; font-size: 3.2cqw; font-weight: 700; line-height: 1.2; text-align: right; color: var(--ink); text-shadow: var(--text-rim); }
.apHint i { width: 1.3cqw; height: 11cqw; border-radius: 99px 0 0 99px; background: var(--ink); }
/* The phone's side button, clicked twice. */
.phSide { position: absolute; right: -1.1%; top: 21%; width: 1.5%; height: 10%; border-radius: 0 4px 4px 0;
  background: color-mix(in srgb, var(--raised) 60%, var(--ink)); }

/* 4 · the auction: one card, the slide, the hammer */
.lot { position: absolute; z-index: 4; left: 3.4cqw; right: 3.4cqw; bottom: 4cqw; padding: 4cqw; border-radius: 4.8cqw; background: var(--glass);
  box-shadow: var(--plate-rim); }
.lotL1 { display: flex; align-items: center; justify-content: space-between; gap: 2cqw; margin-bottom: 3.2cqw !important; font-size: 3.8cqw; color: var(--ink-soft); }
.lotL1 small { flex: none; font-size: 3.2cqw; }
.lotWho { display: grid; }
.lotWho > span { grid-area: 1 / 1; }
.lotWon { display: inline-flex; align-items: center; gap: 1.6cqw; color: var(--ink); font-weight: 800; }
.lotWon i { width: 2.5cqw; height: 2.5cqw; border-radius: 50%; background: var(--signal); }
.lotL2 { display: flex; align-items: center; gap: 3cqw; }
.lotPic { flex: none; width: 15cqw; height: 15cqw; display: grid; place-items: center; border-radius: 3cqw; background: var(--ink); }
.lotPic svg { width: 74%; height: 74%; }
.lotPic img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.lotPic path { fill: var(--canvas); }
.lotPic circle { fill: var(--ink); }
.lotTxt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .6cqw; }
.lotTxt > b { font-size: 4.4cqw; }
.lotTxt small { font-size: 3.2cqw; color: var(--ink-soft); }
.lotNum { flex: none; display: flex; flex-direction: column; align-items: flex-end; font-variant-numeric: tabular-nums; }
.lotNum > b { font-size: 6.8cqw; font-weight: 800; letter-spacing: -.02em; }
.lotNum small { font-size: 4.6cqw; font-weight: 800; }
.lotL3 { display: grid; margin-top: 3.8cqw; }
.lotL3 > * { grid-area: 1 / 1; }
.slide { --run: 66cqw; position: relative; height: 12.4cqw; border-radius: 99px; background: var(--signal); color: var(--on-signal); overflow: hidden; }
.slideFill { position: absolute; inset: 0; background: color-mix(in srgb, var(--on-signal) 22%, transparent); transform-origin: left; }
.slideTxt { position: absolute; inset: 0; display: grid; place-items: center; padding-left: 9cqw; font-size: 4cqw; font-weight: 800; }
.knob { position: absolute; left: 1.2cqw; top: 1.2cqw; width: 10cqw; height: 10cqw; display: grid; place-items: center; border-radius: 50%;
  background: var(--on-signal); color: var(--signal); transform: translateX(var(--run)); }
.knob .ic { width: 5.2cqw; height: 5.2cqw; stroke-width: 2.6; }
.lotSwap { display: grid; }
.lotLead, .lotSold, .lotRival { display: grid; place-items: center; height: 12.4cqw; border-radius: 99px; font-size: 4cqw; font-weight: 800; }
.lotRival { display: flex; justify-content: center; align-items: center; gap: 2cqw; color: var(--ink-soft); box-shadow: inset 0 0 0 .5cqw var(--line); }
.lotRival i { width: 6.4cqw; height: 6.4cqw; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--canvas);
  font-style: normal; font-size: 3cqw; }
.lotLead { box-shadow: inset 0 0 0 .8cqw var(--signal); }
.lotSold { background: var(--raised); }

/* 5 · the club: three cards, numbered like a membership card */
.club { position: relative; width: min(100cqw, 620px); height: min(100cqh, 460px); }
/* A wallet: each card shows its head (the tier, its number, its price) above the next one. */
.tier { --to: none; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width: min(92cqw, 340px); height: min(25cqh, 52cqw, 200px);
  display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border-radius: 18px;
  background: var(--surface); border: 1px solid var(--line); transform: var(--to); }
.tier.t1 { --to: translate(-3%, -62%) rotate(-3deg); }
.tier.t2 { --to: none; z-index: 2; background: var(--raised); }
.tier.t3 { --to: translate(3%, 62%) rotate(2.5deg); z-index: 3; }
.tierHead { display: flex; align-items: center; gap: 10px; margin: 0; }
.tierMark { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; border: 5px solid var(--ink); }
.tierMark i { width: 9px; height: 9px; border-radius: 50%; background: var(--signal); }
.tier b { min-width: 0; font-family: var(--display); font-weight: 800; font-size: 22px; letter-spacing: -.02em; line-height: 1.05;
  white-space: nowrap; overflow-wrap: normal; }
.tierPrice { margin-left: auto; flex: none; font-size: 15px; font-weight: 700; white-space: nowrap; }
.tierFoot { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin: auto 0 0; }
.tierFoot small { font-size: 13px; line-height: 1.3; color: var(--ink-soft); }
.tierNo { flex: none; font-size: 12px; letter-spacing: .1em; color: var(--ink-dim); font-variant-numeric: tabular-nums; }
/* A short stage (a small phone): the cards keep their heads, the rest folds away. */
@container (max-height: 420px) {
  .tierFoot { display: none; }
}
@container (max-height: 300px) {
  .tier { padding: 9px 14px; border-radius: 14px; }
  .tier b { font-size: 17px; }
  .tierPrice { font-size: 13px; }
  .tierMark { width: 22px; height: 22px; border-width: 4px; }
  .tierFoot { display: none; }
  .clubLock { padding: 7px 12px; font-size: 13px; }
}
.clubLock { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; width: max-content; margin: 0 auto; display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: var(--r-pill); background: var(--ink); color: var(--canvas); font-size: 14px; font-weight: 800; }
.clubLock .ic { width: 18px; height: 18px; }

/* who it is for */
.scWho .scStage { container-type: normal; place-items: start stretch; min-height: 0; }
.whos { list-style: none; margin: 0; padding: 0; width: 100%; max-width: 1040px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* Each stage: its icon beside its name, what it does below (the founder's longer words, 2026-10-14, kept whole). */
.who { display: grid; grid-template-columns: auto 1fr; align-items: center; align-content: start; column-gap: 10px; row-gap: 6px; padding: 14px; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--line); }
.who .ic { width: 22px; height: 22px; }
.who b { font-size: 15px; line-height: 1.2; }
.who span { grid-column: 1 / -1; font-size: 13px; line-height: 1.35; color: var(--ink-soft); }
/* The dots under the row of cards (a phone, or a very short window, below), lit for the card in view. */
.whoDots { display: none; justify-content: center; gap: 2px; margin-top: 8px; }
.whoDots button { width: 26px; height: 26px; padding: 0; border: 0; background: none; display: grid; place-items: center; cursor: pointer; }
.whoDots button::after { content: ""; width: 7px; height: 7px; border-radius: 99px; background: var(--ink-dim); transition: width .25s ease, background .25s ease; }
.whoDots button.on::after { width: 18px; background: var(--ink); }
/* A phone: the six are a row of whole cards, each with its words, swiped one by one, the next one showing at the
   edge; dots below go to each (public/about.js) (the founder, 2026-10-14: "we need the content"). */
@media (max-width: 719px) {
  .scWho .scStage { display: block; min-width: 0; }
  .whos { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 80%; gap: 10px; margin: 0 -24px; padding: 2px 24px 4px;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding: 0 24px; scrollbar-width: none; }
  .whos::-webkit-scrollbar { display: none; }
  .who { scroll-snap-align: start; padding: 14px; row-gap: 6px; }
  .who span { font-size: 14px; line-height: 1.4; }
  .whoDots { display: flex; }
}

/* 9 · how to reach us, and the foot */
.scTalk { justify-content: space-between; }
.talk { margin: auto 0; max-width: 640px; }
.talk h2 { font-size: clamp(26px, min(9.4vw, 9.5vh), 72px); }
.talkStat { margin: 0 0 18px; font-size: clamp(15px, 4vw, 18px); color: var(--ink); }
.talkStat a { color: var(--ink-soft); text-decoration: underline 1px; text-decoration-color: color-mix(in srgb, var(--ink-soft) 55%, transparent);
  text-underline-offset: 3px; white-space: nowrap; }
.talkBody { margin: 0 0 12px; font-size: clamp(16px, 4.4vw, 20px); color: var(--ink); }   /* as the facts above it (the founder: "a cor dessa fonte tá diferente?") */
/* The two lines of the pitch, apart as the facts and the pitch are (the founder, 2026-10-14: "logo antes de Criadores…
   o mesmo espaço"): every size below gives .talkGap the facts' own space. */
.talkBody.talkGap { margin-bottom: 18px; }
/* The yellow point arriving on the last screen lands in its first button (public/about.js, `merge`): the button
   catches it as a jelly would, a few drops splash out past its edge, and its chat bubble pops and types for a moment
   (the founder, 2026-10-14: "something a little more whimsical / cooler motion on the button"). */
.abIc { position: relative; display: inline-grid; place-items: center; }
.abTyping { position: absolute; left: 52%; top: 48%; display: flex; gap: .09em; transform: translate(-50%, -50%); opacity: 0; }
.abTyping i { width: .15em; height: .15em; border-radius: 50%; background: currentColor; }
.abSplash { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.abSplash i { --a: 0deg; --r: 60px; position: absolute; left: -4.5px; top: -4.5px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--signal); opacity: 0; }
.abBtn.go.merge { transform-origin: 50% 100%; animation: k-jelly .8s cubic-bezier(.2, .7, .3, 1); }
.abBtn.go.merge .ic { animation: k-icpop .7s cubic-bezier(.3, 1.5, .5, 1) .05s; }
.abBtn.go.merge .abTyping { animation: k-typing 1.7s ease .25s; }
.abBtn.go.merge .abTyping i { animation: k-tdot .42s ease-in-out .3s 3; }
.abBtn.go.merge .abTyping i:nth-child(2) { animation-delay: .42s; }
.abBtn.go.merge .abTyping i:nth-child(3) { animation-delay: .54s; }
.abBtn.go.merge .abSplash i { animation: k-splash .8s cubic-bezier(.12, .75, .3, 1); }
@keyframes k-jelly { 0% { transform: none; } 16% { transform: scale(1.1, .82); } 34% { transform: scale(.93, 1.09); }
  50% { transform: scale(1.04, .96); } 66% { transform: scale(.98, 1.02); } 100% { transform: none; } }
@keyframes k-icpop { 0% { transform: none; } 35% { transform: scale(1.45) rotate(-14deg); } 60% { transform: scale(.92) rotate(7deg); }
  100% { transform: none; } }
@keyframes k-typing { 0%, 100% { opacity: 0; } 12%, 82% { opacity: 1; } }
@keyframes k-tdot { 0%, 100% { transform: none; } 50% { transform: translateY(-.12em); } }
@keyframes k-splash { 0% { opacity: 1; transform: rotate(var(--a)) translateX(6px) scale(1); } 55% { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--r)) scale(.55); } }
.talkCta { margin: 0 0 26px; font-size: clamp(18px, 5vw, 24px); font-weight: 800; color: var(--ink); }
.talkBtns { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
/* A short phone: the contact screen tightens so it stays one screen, every line kept. */
@media (max-width: 719px) and (max-height: 700px) {
  .talk h2 { font-size: 27px; margin-bottom: 8px; }
  .talkStat { font-size: 14px; margin-bottom: 10px; }
  .talkBody { font-size: 14px; margin-bottom: 8px; }
  .talkBody.talkGap { margin-bottom: 10px; }
  .talkCta { font-size: 16px; margin-bottom: 14px; }
  .talkBtns .abBtn { min-height: 44px; padding: 0 18px; font-size: 15px; }
  .abFoot { padding-top: 10px; }
}
/* The smallest phones (320 × 568): a step smaller still, every line kept. */
@media (max-width: 359px) and (max-height: 600px) {
  .talk h2 { font-size: 24px; margin-bottom: 6px; }
  .talkStat { font-size: 12.5px; line-height: 1.4; margin-bottom: 8px; }
  .talkBody { font-size: 12.5px; margin-bottom: 6px; }
  .talkBody.talkGap { margin-bottom: 8px; }
  .talkCta { font-size: 15px; margin-bottom: 10px; }
  .talkBtns .abBtn { min-height: 40px; padding: 0 14px; font-size: 14px; }
}
.abFoot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 18px; padding-top: 16px; border-top: 1px solid var(--line);
  font-size: 13px; color: var(--ink-soft); }
.abFoot a { color: var(--ink-soft); text-underline-offset: 2px; }

/* ------------------------------------------------------------ wider screens */
@media (min-width: 720px) {
  .abTop { padding-left: max(28px, env(safe-area-inset-left)); padding-right: max(28px, env(safe-area-inset-right)); }
  .abDots { right: 14px; }
  .sc { padding: 92px 64px 32px; }
  .whos { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .who { padding: 22px; gap: 8px; }
  .who .ic { width: 26px; height: 26px; }
  .who b { font-size: 18px; }
  .who span { font-size: 15px; }
}
/* Side by side from 960 px wide, and on any window wider than tall from 600 px (a zoomed browser, a small laptop, a
   tablet held sideways), where a phone stacked under the words would shrink to nothing (the founder, 2026-10-14:
   "if the browser has zoom in (cmd+) the site is all broken"). */
@media (min-width: 960px), (min-width: 600px) and (min-aspect-ratio: 5/4) {
  .sc { flex-direction: row; align-items: center; gap: 6vw; padding: 96px 9vw 40px; }
  .sc:nth-of-type(odd):not(.scHero):not(.scTalk):not(.scWho) { flex-direction: row-reverse; }
  /* Ver de novo on the outer side of the stage, away from the screen's foot in the middle (the edges, above). */
  .sc:nth-of-type(odd):not(.scHero):not(.scTalk):not(.scWho) .scReplay { right: auto; left: 0; }
  .scText { flex: 0 1 460px; }
  .scStage { flex: 1 1 0; align-self: stretch; min-height: 0; }
  .scWho { flex-direction: column; align-items: stretch; justify-content: center; gap: clamp(28px, 2.5vw, 64px); }
  @media (max-height: 800px) { .scWho { gap: 20px; } .scWho .who { padding: 12px 14px; } }
  .scWho .scText { flex: none; max-width: 760px; }
  .scWho .scStage { flex: none; }
  .scHero, .scTalk { flex-direction: column; gap: 0; }
  .scTalk { align-items: stretch; }
  .ph { width: min(100cqw, calc(100cqh * 9 / 19.5), 330px); }
}

/* A very short window, not a phone (a laptop's browser zoomed to 125 or 150 %): the screens' margins, the opening and
   the contact screen tighter, every word kept; Para quem's cards in a row to go through, three at a time. */
@media (min-width: 600px) and (max-height: 620px) {
  .sc { padding-top: calc(max(8px, env(safe-area-inset-top)) + 62px); padding-bottom: 12px; }
  .heroMark { margin-bottom: 12px; }
  .heroLede { margin-top: 8px; }
  .heroCtas { margin-top: 14px; }
  .abBtn { min-height: 42px; padding: 0 18px; font-size: 15px; }
  .talk h2 { font-size: min(8.5vh, 56px); margin-bottom: 6px; }
  .talkStat { font-size: 13px; line-height: 1.4; margin-bottom: 8px; }
  .talkBody { font-size: 13.5px; margin-bottom: 6px; }
  .talkBody.talkGap { margin-bottom: 8px; }
  .talkCta { font-size: 15px; margin-bottom: 10px; }
  .talkBtns .abBtn { min-height: 40px; padding: 0 16px; font-size: 14px; }
  .abFoot { padding-top: 8px; font-size: 12px; }
  .scWho .scStage { display: block; min-width: 0; }
  .whos { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - 20px) / 3.15); gap: 10px; max-width: none;
    padding: 2px 0 4px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .whos::-webkit-scrollbar { display: none; }
  .who { scroll-snap-align: start; }
  .whoDots { display: flex; margin-top: 4px; }
}
/* Shorter still (150 %): two of Para quem's cards at a time, wider, so their words take fewer lines. */
@media (min-width: 600px) and (max-height: 480px) {
  .whos { grid-auto-columns: calc((100% - 10px) / 2.15); }
  .scWho .scBody { font-size: 13px; }
  .who span { font-size: 12.5px; line-height: 1.3; }
}
/* A short window, not a phone (a zoomed browser, a small laptop): the who tiles and the contact screen tighter, every
   word kept, so each stays one screen. */
@media (min-width: 720px) and (max-height: 760px) {
  .scWho { gap: 14px; }
  .whos { gap: 10px; }
  .who, .scWho .who { padding: 10px 14px; row-gap: 4px; }
  .who .ic { width: 20px; height: 20px; }
  .who b { font-size: 15px; }
  .who span { font-size: 13px; line-height: 1.3; }
  .talkStat { font-size: 14.5px; margin-bottom: 10px; }
  .talkBody { font-size: 15px; margin-bottom: 8px; }
  .talkBody.talkGap { margin-bottom: 10px; }
  .talkCta { font-size: 17px; margin-bottom: 14px; }
  .talkBtns .abBtn { min-height: 44px; padding: 0 20px; font-size: 15px; }
  .abFoot { padding-top: 10px; }
}

/* ------------------------------------------------------------ big screens: everything grows with the screen
   The sizes a 1280 px laptop shows, as a share of the screen's width, so a 1920 or 2560 px screen is the same page,
   larger, never a small page lost in the middle of it. */
@media (min-width: 1281px) {
  .abMark { font-size: clamp(28px, 2.19vw, 56px); min-height: clamp(44px, 3.4vw, 88px); }
  .abLang { font-size: clamp(14px, 1.1vw, 28px); min-height: clamp(44px, 3.4vw, 88px); }
  .abNext { font-size: clamp(13px, 1.02vw, 26px); min-height: clamp(36px, 2.8vw, 72px); gap: clamp(8px, .63vw, 16px); }
  .abNext b { font-size: clamp(12px, .94vw, 24px); padding: clamp(6px, .47vw, 12px) clamp(12px, .94vw, 24px); }
  .abDots a { width: clamp(20px, 1.56vw, 40px); height: clamp(20px, 1.56vw, 40px); }
  .abDots { --bd: clamp(24px, 1.9vw, 48px); }
  .abDots a::after { inset: 35%; }
  .abDots a::before { font-size: clamp(12px, .94vw, 24px); padding: clamp(6px, .47vw, 12px) clamp(12px, .94vw, 24px); }
  .abArrow { width: clamp(36px, 2.8vw, 72px); height: clamp(36px, 2.8vw, 72px); }
  .abArrow .ic { width: 50%; height: 50%; }
  .abEdge .ic { width: clamp(30px, 2.34vw, 60px); height: clamp(30px, 2.34vw, 60px); }
  .abEdgeName { font-size: clamp(13px, 1.02vw, 26px); }
  .sc { padding: clamp(96px, 7.5vw, 192px) 9vw clamp(40px, 3.1vw, 80px); }
  .scText { flex-basis: clamp(460px, 36vw, 920px); max-width: none; }
  .scKick { font-size: clamp(13px, 1.02vw, 26px); gap: .6em; margin-bottom: .6em; }
  .scKick::before { width: .62em; height: .62em; }
  .sc h2 { font-size: clamp(40px, min(5vw, 9.5vh), 128px); }
  .scBody { font-size: clamp(16px, min(1.48vw, 3.2vh), 38px); }
  .heroMark { width: clamp(90px, min(11.6vw, 18vh), 300px); margin-bottom: clamp(26px, 2vw, 52px); }
  .heroTitle { font-size: clamp(60px, min(8.1vw, 13.5vh), 210px); }
  .heroLede { font-size: clamp(17px, min(1.72vw, 3.4vh), 44px); margin-top: clamp(20px, 1.56vw, 40px); }
  .heroCtas { gap: clamp(10px, .78vw, 20px); margin-top: clamp(30px, 2.34vw, 60px); }
  .abBtn { min-height: clamp(52px, 4.06vw, 104px); padding: 0 clamp(26px, 2.03vw, 52px); font-size: clamp(17px, 1.33vw, 34px); }
  .heroDown { width: clamp(44px, 3.4vw, 88px); height: clamp(44px, 3.4vw, 88px); }
  .heroDown .ic { width: 60%; height: 60%; }
  .ph { width: min(100cqw, calc(94cqh * 9 / 19.5), clamp(330px, 25.8vw, 660px)); }
  .scReplay { width: clamp(44px, 3.4vw, 88px); height: clamp(44px, 3.4vw, 88px); }
  .scReplay .ic { width: 45%; height: 45%; }
  .mfAlone { font-size: clamp(26px, 2.03vw, 52px); }
  .club { width: min(100cqw, clamp(620px, 48vw, 1240px)); height: min(100cqh, clamp(460px, 36vw, 920px)); }
  .tier { width: min(92cqw, clamp(340px, 26.6vw, 680px)); height: min(25cqh, 52cqw, clamp(200px, 15.6vw, 400px));
    padding: clamp(16px, 1.25vw, 32px) clamp(18px, 1.4vw, 36px); border-radius: clamp(18px, 1.4vw, 36px); gap: clamp(6px, .47vw, 12px); }
  .tierHead { gap: clamp(10px, .78vw, 20px); }
  .tier b { font-size: clamp(22px, 1.72vw, 44px); }
  .tierPrice { font-size: clamp(15px, 1.17vw, 30px); }
  .tierFoot small { font-size: clamp(13px, 1.02vw, 26px); }
  .tierNo { font-size: clamp(12px, .94vw, 24px); }
  .tierMark { width: clamp(26px, 2.03vw, 52px); height: clamp(26px, 2.03vw, 52px); border-width: clamp(5px, .39vw, 10px); }
  .tierMark i { width: clamp(9px, .7vw, 18px); height: clamp(9px, .7vw, 18px); }
  .clubLock { font-size: clamp(14px, 1.1vw, 28px); padding: clamp(10px, .78vw, 20px) clamp(16px, 1.25vw, 32px); gap: clamp(8px, .63vw, 16px); }
  .clubLock .ic { width: clamp(18px, 1.4vw, 36px); height: clamp(18px, 1.4vw, 36px); }
  .scWho .scText { max-width: clamp(760px, 62vw, 1600px); }
  .whos { max-width: clamp(1040px, 81vw, 2080px); gap: clamp(16px, 1.25vw, 32px); }
  .who { padding: clamp(20px, 1.4vw, 36px); gap: clamp(8px, .55vw, 14px); border-radius: clamp(16px, 1.25vw, 32px); }
  .who .ic { width: clamp(26px, 2.03vw, 52px); height: clamp(26px, 2.03vw, 52px); }
  .who b { font-size: clamp(18px, 1.4vw, 36px); }
  .who span { font-size: clamp(15px, 1.17vw, 30px); }
  .talk { max-width: clamp(640px, 50vw, 1280px); }
  .talk h2 { font-size: clamp(44px, min(5.6vw, 10vh), 144px); }
  .talkStat { font-size: clamp(18px, 1.4vw, 36px); margin-bottom: clamp(18px, 1.4vw, 36px); }
  .talkBody { font-size: clamp(20px, 1.56vw, 40px); margin-bottom: clamp(12px, .94vw, 24px); }
  .talkBody.talkGap { margin-bottom: clamp(18px, 1.4vw, 36px); }
  .talkCta { font-size: clamp(24px, 1.88vw, 48px); margin-bottom: clamp(26px, 2vw, 52px); }
  .talkBtns { gap: clamp(10px, .78vw, 20px); }
  .abFoot { font-size: clamp(13px, 1.02vw, 26px); padding-top: clamp(16px, 1.25vw, 32px); }
}

/* ------------------------------------------------------------ inside HOME's sheet (?app=1) */
.abApp .abTop { position: sticky; }
.abApp .sc { min-height: 100vh; min-height: 100dvh; }

/* ------------------------------------------------------------ motion: from elsewhere to the last frame */
.a-out, .a-left, .a-down, .a-tap, .a-burst { opacity: 0; visibility: hidden; }
.a-left { transform: translateX(-35%); }
.anim .a-up { animation: k-up .6s cubic-bezier(.2, .8, .2, 1) var(--t, 0s) both; }
.anim .a-pop { animation: k-pop .5s cubic-bezier(.3, .9, .4, 1.2) var(--t, 0s) both; }
.anim .a-in { animation: k-in .3s ease-out var(--t, 0s) both; }
.anim .a-out { animation: k-out .25s ease-in var(--t, 0s) both; }
.anim .a-tap { animation: k-tap .7s ease-out var(--t, 0s) both; }
.anim .a-left { animation: k-left .45s cubic-bezier(.4, 0, .2, 1) var(--t, 0s) both; }
.anim .a-fromR { animation: k-fromR .45s cubic-bezier(.4, 0, .2, 1) var(--t, 0s) both; }
.anim .a-down { animation: k-down .35s ease-in var(--t, 0s) both; }
.anim .a-timer { animation: k-timer 3.4s linear var(--t, 0s) both; }
.anim .a-knob { animation: k-knob .9s cubic-bezier(.6, 0, .2, 1) var(--t, 0s) both; }
.anim .a-fill { animation: k-fill .9s cubic-bezier(.6, 0, .2, 1) var(--t, 0s) both; }
.anim .a-ring { animation: k-ring .8s ease-out var(--t, 0s) both; }
.anim .a-deal { animation: k-deal .65s cubic-bezier(.2, .8, .2, 1) var(--t, 0s) both; }
.anim .a-gather { animation: k-in .45s ease-out var(--t0, 0s) both, k-gather 1.15s cubic-bezier(.6, 0, .2, 1) var(--t, 0s) both; }
.anim .a-burst { animation: k-burst .3s ease-out var(--t, 0s) both; }
.anim .a-bob { animation: k-bob var(--bob, 1s) ease-in-out var(--t, 0s) 2 alternate both; }
.anim .a-drop { animation: k-drop .55s cubic-bezier(.2, .8, .3, 1) var(--t, 0s) both; }
.anim .a-round { animation: k-round var(--round, 1.7s) linear var(--t, 0s) both; }
.anim .a-line { animation: k-line .34s cubic-bezier(.2, .8, .2, 1) var(--t, 0s) both; }
.anim .a-finger { animation: k-finger 2s cubic-bezier(.45, 0, .25, 1) var(--t, 0s) both; }
.anim .a-finger.quick { animation-duration: 1.4s; }
/* The shop's finger walks to Comprar at half the speed (the founder, 2026-10-14: "pode demorar o dobro… na metade da
   velocidade"), and presses it at the same moment as before: it only sets off earlier. */
.anim .a-finger.slow { animation-name: k-finger-slow; animation-duration: 2.9s; }
.anim .a-press { animation: k-press .36s ease-out var(--t, 0s) both; }
.anim .a-rise { animation: k-rise .42s cubic-bezier(.2, .8, .2, 1) var(--t, 0s) both; }
.anim .a-nudgeX { animation: k-nudgeX .5s ease-in-out var(--t, 0s) 2 both; }
.anim .a-dbl { animation: k-dbl .6s ease-in-out var(--t, 0s) both; }
.anim .a-fly { animation: k-fly .95s cubic-bezier(.3, .7, .3, 1) var(--t, 0s) both; }
.anim .rain i { animation: k-rain var(--d) linear var(--t, 0s) both; }
.anim .ans.right b, .anim .ans.right i { animation: k-dark .3s ease-out 4.5s both; }
.anim #marcas .ans.right b, .anim #marcas .ans.right i { animation-delay: 7.4s; }   /* the brands' question has its own moment */
.anim .heroDown { animation: k-nudge 1.4s ease-in-out 2.2s 2 both; }
/* A screen not playing waits on its first frame; a reset starts every piece over (public/about.js). */
.anim .sc:not(.play) :is(.a-up, .a-pop, .a-in, .a-out, .a-tap, .a-left, .a-fromR, .a-down, .a-timer, .a-knob, .a-fill, .a-ring,
  .a-deal, .a-gather, .a-burst, .a-bob, .a-drop, .a-round, .a-line, .a-fly, .a-finger, .a-press, .a-rise, .a-nudgeX, .a-dbl, .heroDown),
  .anim .sc:not(.play) .rain i,
  .anim .sc:not(.play) :is(.ans.right, .ans.wrong) :is(b, i) { animation-play-state: paused !important; }
.anim .sc.reset :is(.a-up, .a-pop, .a-in, .a-out, .a-tap, .a-left, .a-fromR, .a-down, .a-timer, .a-knob, .a-fill, .a-ring,
  .a-deal, .a-gather, .a-burst, .a-bob, .a-drop, .a-round, .a-line, .a-fly, .a-finger, .a-press, .a-rise, .a-nudgeX, .a-dbl, .heroDown),
  .anim .sc.reset .rain i,
  .anim .sc.reset :is(.ans.right, .ans.wrong) :is(b, i) { animation: none !important; }

/* Between two screens, tied to the scroll itself (a wheel, a trackpad, a finger, the keys or the arrows alike): the
   screen leaving lifts its words and fades them while its phone flies up faster (two speeds, a depth), and the
   one arriving brings its phone up from below. Where a browser cannot tie motion to the scroll (or a person asks
   for less motion) the screens simply scroll. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .anim .sc > .scText, .anim .sc > .heroIn, .anim .sc > .talk {
      animation: k-leave-words linear both; animation-timeline: view(); animation-range: exit 0% exit 70%; }
    .anim .sc > .scStage {
      animation: k-arrive-stage linear both, k-leave-stage linear both; animation-timeline: view(), view();
      animation-range: entry 20% entry 100%, exit 0% exit 80%; }
  }
}
@keyframes k-leave-words { to { opacity: 0; transform: translateY(-9vh); } }
@keyframes k-arrive-stage { from { opacity: .2; transform: translateY(16vh) scale(.94); } }
@keyframes k-leave-stage { to { opacity: 0; transform: translateY(-24vh) scale(.94); } }
@keyframes k-hop-up { 40% { transform: translateY(-5px); } }
@keyframes k-hop-down { 40% { transform: translateY(5px); } }

@keyframes k-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes k-pop { 0% { opacity: 0; transform: scale(.5); } 70% { opacity: 1; transform: scale(1.08); } 100% { opacity: 1; transform: none; } }
@keyframes k-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes k-out { from { opacity: 1; visibility: visible; } to { opacity: 0; visibility: hidden; } }
@keyframes k-tap { 0% { opacity: 0; visibility: visible; transform: scale(.3); } 25% { opacity: .9; transform: scale(.75); }
  100% { opacity: 0; visibility: hidden; transform: scale(1.5); } }
@keyframes k-left { from { opacity: 1; visibility: visible; transform: none; } to { opacity: 0; visibility: hidden; transform: translateX(-35%); } }
@keyframes k-fromR { from { transform: translateX(100%); } to { transform: none; } }
@keyframes k-down { from { opacity: 1; visibility: visible; transform: none; } to { opacity: 0; visibility: hidden; transform: translateY(10%); } }
@keyframes k-timer { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes k-knob { from { transform: translateX(0); } to { transform: translateX(var(--run)); } }
@keyframes k-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes k-ring { from { stroke-dashoffset: 138.3; } to { stroke-dashoffset: 0; } }
@keyframes k-deal { from { opacity: 0; transform: translateY(60%) scale(.86); } to { opacity: 1; transform: var(--to); } }
@keyframes k-dark { from { color: var(--ink); } to { color: var(--on-right); } }
@keyframes k-darkW { from { color: var(--ink); } to { color: var(--on-wrong); } }
@keyframes k-finger { 0% { opacity: 0; transform: translate(var(--fx), var(--fy)) scale(1.25); }
  15% { opacity: 1; transform: translate(var(--fx), var(--fy)) scale(1); } 60% { transform: translate(0, 0) scale(1); }
  75% { transform: scale(.76); } 85% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.06); } }
@keyframes k-finger-slow { 0% { opacity: 0; transform: translate(var(--fx), var(--fy)) scale(1.25); }
  10.34% { opacity: 1; transform: translate(var(--fx), var(--fy)) scale(1); } 72.41% { transform: translate(0, 0) scale(1); }
  82.76% { transform: scale(.76); } 89.66% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.06); } }
@keyframes k-press { 0%, 100% { transform: none; } 45% { transform: scale(.9); } }
@keyframes k-rise { from { transform: translateY(105%); } to { transform: none; } }
@keyframes k-nudgeX { 50% { transform: translateX(-1.4cqw); } }
@keyframes k-dbl { 0%, 34%, 68%, 100% { transform: none; box-shadow: none; }
  17%, 51% { transform: translateX(-45%); box-shadow: 0 0 10px var(--signal); } }
@keyframes k-line { from { max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; opacity: 0; transform: translateY(35%); } }
@keyframes k-fly { 0% { opacity: 0; transform: translate(-24cqw, -42cqw) scale(2.6) rotate(-14deg); } 18% { opacity: 1; }
  74% { transform: translate(0, 0) scale(.9) rotate(0deg); } 88% { transform: scale(1.14); } 100% { opacity: 1; transform: none; } }
@keyframes k-rain { from { opacity: 1; transform: translate(0, -16cqw) rotate(0deg); } to { opacity: 1; transform: translate(var(--dx), 236cqw) rotate(var(--r)); } }
@keyframes k-nudge { 0%, 100% { transform: none; } 50% { transform: translateY(8px); } }
@keyframes k-gather { from { transform: translate(var(--x0), var(--y0)); } to { transform: translate(var(--x1), var(--y1)); } }
@keyframes k-burst { from { opacity: 1; visibility: visible; transform: scale(1); } 45% { opacity: 1; transform: scale(1.14); }
  to { opacity: 0; visibility: hidden; transform: scale(1.32); } }
@keyframes k-bob { from { transform: translate(0, 0); } to { transform: translate(.9cqmin, -3.2cqmin); } }
@keyframes k-drop { 0% { opacity: 0; visibility: visible; transform: rotate(var(--a)) translateX(14cqmin) scale(1); }
  8% { opacity: 1; } 100% { opacity: 0; visibility: hidden; transform: rotate(var(--a)) translateX(22cqmin) scale(.35); } }
 }