/* OHFR? site. Black ink on white paper, the stipple of Fery everywhere.
   The landing part is the approved page (landing-gato/06-mistura) moved here as it was; the
   sides are logical (inline-start/end) so right-to-left languages mirror. Join, legal and 404
   pages, the language picker and the per-script typography come after it. */
@font-face {
  font-family: "Bricolage";
  src: url("fonts/bricolage-grotesque-vietnamese-standard-normal.woff2") format("woff2");
  font-weight: 200 800; font-stretch: 75% 100%; font-style: normal; font-display: swap;
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Bricolage";
  src: url("fonts/bricolage-grotesque-latin-ext-standard-normal.woff2") format("woff2");
  font-weight: 200 800; font-stretch: 75% 100%; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Bricolage";
  src: url("fonts/bricolage-grotesque-latin-standard-normal.woff2") format("woff2");
  font-weight: 200 800; font-stretch: 75% 100%; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* The serif italic word in the titles. Self-hosted (OFL, see fonts/instrument-serif-OFL.txt). */
@font-face {
  font-family: "Instrument Serif";
  src: url("fonts/instrument-serif-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}

/* Black ink on white paper. Color is a riso accent: a few people in the crowd, the unseen stories,
   the chosen contact (pink), the safety checks (blue). Fery's own colors come from his moods. */
:root {
  --paper: #fff;
  --ink: #000;
  --text: #121212;
  --muted: #4f4f4f;
  --hair: rgba(0, 0, 0, .16);
  --orange: #FF5A1F;
  --blue: #3D7BFF;
  --pink: #FF4F9A;
  --yellow: #FFC93C;
  --sans: "Bricolage", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --gut: clamp(20px, 5vw, 64px);
  --max: 1180px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --rise: cubic-bezier(.3, 1.32, .5, 1);
  --sink: cubic-bezier(.5, 0, .75, 0);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--paper); color: var(--text);
  font: 400 17px/1.55 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip;
}
/* Clip inside the body: overflow on body itself goes to the viewport, and a phone would still zoom out. */
main { overflow-x: clip; }
h1, h2, h3, p, ul, ol, figure, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, canvas { display: block; max-width: 100%; }
a { color: inherit; }
em { font-family: var(--serif); font-style: italic; font-weight: 400; font-stretch: 100%; letter-spacing: -.01em; }
::selection { background: #000; color: #fff; }
:focus-visible { outline: 2px solid #000; outline-offset: 3px; }
[hidden] { display: none !important; }
.stip { image-rendering: pixelated; pointer-events: none; max-width: none; }
.wrap { width: min(calc(100% - 2 * var(--gut)), var(--max)); margin-inline: auto; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- type ---------- */
.h1 {
  font-weight: 230; font-stretch: 86%; font-size: clamp(42px, min(6.2vw, 8.6svh), 84px);
  line-height: .94; letter-spacing: -.045em;
}
.h1 .ln { display: block; width: fit-content; margin-inline: auto; }
.h1 em { font-size: 1.1em; letter-spacing: -.025em; }
h2 {
  font-weight: 250; font-stretch: 88%; font-size: clamp(36px, 5vw, 70px);
  line-height: .98; letter-spacing: -.04em; text-wrap: balance;
}
h2 em { font-size: 1.08em; letter-spacing: -.02em; }
h3 { font-weight: 560; font-size: 16px; line-height: 1.3; letter-spacing: -.005em; }
.day {
  font-family: var(--serif); font-style: italic; font-size: clamp(21px, 1.8vw, 25px); line-height: 1;
  display: flex; align-items: center; gap: 14px; margin-bottom: clamp(18px, 2vw, 26px);
}
.day::after { content: ""; height: 1px; background: #000; flex: 0 0 56px; transform-origin: 0 50%; }
[dir="rtl"] .day::after { transform-origin: 100% 50%; }
.center .day { justify-content: center; }
.center .day::before { content: ""; height: 1px; background: #000; flex: 0 0 56px; transform-origin: 100% 50%; }
[dir="rtl"] .center .day::before { transform-origin: 0 50%; }
.body { color: var(--muted); max-width: 31em; margin-top: 22px; }
.center { text-align: center; }
.center .body { margin-inline: auto; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 30px;
  border-radius: 999px; background: #000; color: #fff; text-decoration: none;
  font: 500 16px/1 var(--sans); letter-spacing: .005em;
  transition: transform .3s var(--ease), background-color .2s;
}
.btn:hover { background: #222; transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn-line {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px;
  border-radius: 999px; background: #fff; color: #000; border: 1px solid #000; cursor: pointer;
  font: 500 15px/1 var(--sans); transition: background-color .2s, color .2s, transform .2s var(--ease);
}
.btn-line:hover { background: #000; color: #fff; }
.btn-line:active { transform: scale(.97); }

/* ---------- opening ---------- */
.opening { display: none; }
.js .opening { display: block; position: fixed; inset: 0; z-index: 60; background: #fff; overflow: hidden; }
.js .opening:not(.run) { animation: op-safety .4s 3s forwards; }
@keyframes op-safety { to { opacity: 0; visibility: hidden; } }
.op-l, .op-r { position: absolute; top: 0; height: 100%; width: 75%; opacity: 0; transition: opacity .32s ease-out; }
.op-l { left: 0; }
.op-r { right: 0; }
.op-l.ok, .op-r.ok { opacity: 1; }
.op-logo {
  position: absolute; left: 50%; top: 50%; width: min(60vw, 40vh, 300px); aspect-ratio: 1;
  transform: translate(-50%, -50%);
}
.opening.part { background-color: rgba(255, 255, 255, 0); transition: background-color .4s .12s linear; }
.opening.part .op-l { transform: translateX(-82vw); transition: transform .62s cubic-bezier(.6, 0, .25, 1); }
.opening.part .op-r { transform: translateX(82vw); transition: transform .62s cubic-bezier(.6, 0, .25, 1); }
.opening.part .op-logo { opacity: 0; transform: translate(-50%, -54%) scale(.94); transition: opacity .28s, transform .4s var(--ease); }
.opening.fade { opacity: 0; transition: opacity .3s; }

/* ---------- header ---------- */
.top {
  position: absolute; inset: 0 0 auto 0; z-index: 8;
  display: flex; align-items: center; justify-content: space-between; padding: 16px var(--gut);
  pointer-events: none;
}
.brand { pointer-events: auto; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; margin-inline-start: -14px; border-radius: 999px; background: #fff; }
.brand img { width: 104px; height: auto; }

/* ---------- Fery's speech bubble ----------
   A crisp white card with a hairline, a stippled print shadow and a stippled tail, all drawn on the
   little canvas behind it so the tail can point at whichever Fery is talking. Text is typed in. */
.bub {
  position: absolute; z-index: 7; width: max-content; max-width: min(250px, calc(100vw - 40px));
  pointer-events: none; visibility: hidden; opacity: 0;
}
.bub.on { visibility: visible; opacity: 1; }
.bub-dots { position: absolute; left: -44px; top: -44px; image-rendering: pixelated; pointer-events: none; max-width: none; }
.bub-t {
  position: relative; margin: 0; padding: 10px 15px 11px; background: #fff; color: #000;
  border: 1.5px solid #000; border-radius: 18px;
  font: 500 15px/1.36 var(--sans); letter-spacing: -.003em; text-align: start; text-wrap: pretty; overflow-wrap: break-word;
}
.t-off { color: transparent; }

/* ---------- Fery behind an edge (from the bichinho version) ---------- */
.peek { position: absolute; bottom: 0; left: calc(50% - var(--S) / 2); width: var(--S); height: calc(var(--S) * var(--show) + var(--under)); pointer-events: none; }
.peek-clip { position: absolute; inset: 0; overflow: hidden; z-index: 2; }
.peek-clip canvas { position: absolute; left: 0; top: 0; display: block; max-width: none; transition: transform .9s var(--rise); }
.peek .peek-clip canvas { width: var(--S); height: var(--S); }
.peek.peeking .peek-clip canvas { transform: translateY(14%); transition: transform .5s var(--rise); }
.peek.down .peek-clip canvas, .slot .peek-clip canvas.down { transform: translateY(102%); transition: transform .38s var(--sink); }
.peek-clip canvas.snap { transition: none !important; }
.peek.down ~ .bub.on { opacity: 0; transition: opacity .2s; }

/* A ledge: a black rule Fery hides behind. The slot sits right on top of it. */
.ledge { position: relative; border-top: 1px solid #000; }
.slot { position: absolute; z-index: 4; bottom: 100%; inset-inline-end: 0; width: var(--R); height: calc(var(--R) * .66); pointer-events: none; }
.slot[data-at="start"] { inset-inline-end: auto; inset-inline-start: 0; }
.slot[data-at="center"] { inset-inline: calc(50% - var(--R) / 2) auto; }
.slot .peek-clip canvas { width: var(--R); height: var(--R); }
.slot .bub { bottom: 30%; inset-inline-end: 86%; }
.slot[data-bub="end"] .bub { inset-inline-end: auto; inset-inline-start: 86%; }
.slot[data-bub="top"] .bub { bottom: 92%; inset-inline: auto; left: 50%; translate: -50% 0; }

/* ---------- hero ---------- */
.hero {
  --S: clamp(240px, min(46vw, calc((100svh - 556px) / .72)), 680px);
  --show: .72; --hillH: 104px; --under: 72px;
  position: relative; isolation: isolate; overflow: hidden; text-align: center;
  min-height: 100svh; display: flex; flex-direction: column; align-items: center;
  padding: 76px var(--gut) 0;
}
.sky { position: absolute; z-index: 0; top: -4%; height: 108%; width: 64%; }
.sky-l { left: -8%; }
.sky-r { right: -8%; }
@media (prefers-reduced-motion: no-preference) {
  .sky-l { animation: drift 17s ease-in-out infinite alternate; }
  .sky-r { animation: drift 21s ease-in-out -6s infinite alternate-reverse; }
}
@keyframes drift { from { translate: -12px 0; } to { translate: 12px 0; } }
.hero-copy { position: relative; z-index: 5; display: flex; flex-direction: column; align-items: center; }
.lead { max-width: 39em; margin-top: 22px; font-size: clamp(16px, 1.2vw, 17.5px); color: #262626; }
.cta-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px 20px; margin-top: 24px; }
.note { max-width: 25ch; font-size: 14px; line-height: 1.4; color: var(--muted); text-align: start; }
.stage-hero { position: relative; z-index: 2; align-self: stretch; flex: 1 0 auto; margin: 6px calc(var(--gut) * -1) 0; min-height: calc(var(--S) * var(--show) + var(--under) + 8px); }
.rays { position: absolute; z-index: 1; left: 0; bottom: 0; width: 100%; height: calc(var(--S) * 1.15 + var(--under)); }
.hill { position: absolute; z-index: 3; left: 0; bottom: 0; width: 100%; height: var(--hillH); }
.crowd { position: absolute; inset: 0; pointer-events: none; }
.crowd-hero { z-index: 4; top: auto; height: var(--hillH); }
.bub-hero { inset-inline-start: calc(50% + var(--S) * .31); bottom: calc(var(--under) + var(--S) * .42); }
.bub-end { inset-inline-start: calc(50% + var(--S) * .33); bottom: calc(var(--S) * .3); }

/* People: an anchor at the feet (placement, moves), a box that pops and breathes, the dots. */
.pp { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.pp.move { transition: transform .95s cubic-bezier(.45, 0, .2, 1); }
.pp i { position: absolute; display: block; transform-origin: 50% calc(100% - 3px); }
.pp canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; max-width: none; }
.js .crowd:not(.in) .pp i { scale: 0; }
@media (prefers-reduced-motion: no-preference) {
  .crowd.in .pp i { animation: pop .55s var(--spring) calc(var(--k, 0) * 28ms) both, bob var(--bd, 2.4s) steps(1, end) var(--bo, 0s) infinite; }
}
@keyframes pop { from { scale: 0; } to { scale: 1; } }
@keyframes bob { 0% { translate: 0 0; } 50% { translate: 0 -1px; } }

/* ---------- tape ---------- */
.fita { overflow: hidden; border-block: 1px solid #000; }
.fita-in { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 0; padding: 15px var(--gut); font-size: 15px; letter-spacing: .01em; }
.fita-in span + span::before { content: "\00B7"; margin: 0 14px; }
.fita.run .fita-in { flex-wrap: nowrap; justify-content: flex-start; width: max-content; padding-inline: 0; animation: marquee 46s linear infinite; }
.fita.run .fita-in span { white-space: nowrap; }
.fita.run .fita-in span::before { content: "\00B7"; margin: 0 14px; }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes marquee-rtl { to { transform: translateX(50%); } }
[dir="rtl"] .fita.run .fita-in { animation-name: marquee-rtl; }

/* ---------- sections ---------- */
.sec { position: relative; padding-block: clamp(84px, 9vw, 136px); }
.two { display: grid; gap: 48px; align-items: center; }
@media (min-width: 900px) {
  .two { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(48px, 6vw, 104px); }
}

/* reveal */
@media (prefers-reduced-motion: no-preference) {
  .js .rv { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--d, 0) * 80ms); }
  .js .rv.in { opacity: 1; transform: none; }
  .js .day::after, .js .day::before { transform: scaleX(0); transition: transform .8s var(--ease) .25s; }
  .js .day.in::after, .js .day.in::before { transform: none; }
}

/* dia 1 */
.l-where { --R: clamp(132px, 13vw, 188px); margin-top: calc(var(--R) * .66 + 20px); padding-top: 22px; }
.where { border: 0; padding: 0; min-width: 0; }
.where legend { padding: 0; margin-bottom: 12px; font-weight: 560; font-size: 15px; }
.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border: 1px solid #000; border-radius: 999px; }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.seg span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 999px;
  font-weight: 500; font-size: 15px; transition: background-color .25s, color .25s;
}
.seg input:checked + span { background: #000; color: #fff; }
.seg label:hover input:not(:checked) + span { background: #f1f1f1; }
.seg input:focus-visible + span { outline: 2px solid #000; outline-offset: 3px; }
.where-note { margin-top: 14px; color: var(--muted); font-size: 15.5px; }
.where .n-mundo { display: none; }
.where:has(input[value="mundo"]:checked) .n-mundo { display: block; }
.where:has(input[value="mundo"]:checked) .n-perto { display: none; }
.art-1 { position: relative; aspect-ratio: 5 / 4; }
.art-1 > canvas.a1-back, .a15 > canvas.a15-back { position: absolute; inset: 0; width: 100%; height: 100%; }
.cl { position: absolute; z-index: 1; aspect-ratio: 2 / 1; }
@media (prefers-reduced-motion: no-preference) {
  .cl { animation: drift var(--dd, 19s) ease-in-out var(--dl, 0s) infinite alternate; }
}
.cl-a { inset-inline-start: 3%; top: 3%; width: 31%; --dd: 18s; }
.cl-b { inset-inline-end: 2%; top: 0; width: 21%; --dd: 23s; --dl: -9s; }
.crowd-1 { z-index: 2; }

/* dia 2 ao 13: the group, inside the giant phone */
.stage { position: relative; width: min(100%, 720px); margin: clamp(48px, 7vw, 96px) auto 0; aspect-ratio: 100 / 147; container-type: inline-size; }
.giant { position: absolute; z-index: 1; inset-inline-start: 1cqw; top: -3cqw; width: 49cqw; height: 49cqw; transform: scale(2); transform-origin: 0 0; image-rendering: pixelated; max-width: none; }
[dir="rtl"] .giant { transform-origin: 100% 0; }
.bank { position: absolute; z-index: 2; left: -16cqw; top: 66cqw; width: 132cqw; height: 52cqw; }
.phone { --bez: 1.45cqw; --rad: 6.5cqw; position: absolute; z-index: 3; left: 29cqw; top: 53cqw; width: 42cqw; height: 88cqw; font-size: 2.05cqw; }
.phone-frame { position: absolute; left: -2.6cqw; top: -2.6cqw; width: calc(100% + 5.2cqw); height: calc(100% + 5.2cqw); }
.screen { position: absolute; inset: var(--bez); border-radius: calc(var(--rad) - var(--bez)); background: #fff; overflow: hidden; display: flex; flex-direction: column; color: #000; }
.island { position: absolute; top: .6em; left: 50%; transform: translateX(-50%); width: 6.2em; height: 1.8em; border-radius: 1em; background: #000; }
.status { display: flex; justify-content: space-between; align-items: center; padding: 1em 1.6em .2em 1.9em; font: 600 .78em/1 var(--sans); }
.status svg { height: .9em; width: auto; }
.apphd { display: flex; align-items: center; gap: .6em; padding: .9em 1em .7em; border-bottom: 1px solid #e6e6e6; }
.apphd b { display: block; font-weight: 650; font-size: 1em; line-height: 1.1; letter-spacing: -.01em; }
.apphd small { display: block; font-size: .72em; color: #555; margin-top: .15em; }
.stack { margin-inline-start: auto; display: flex; }
.stack .av { margin-inline-start: -.5em; }
.av.c-o { --c: var(--orange); }
.av.c-b { --c: var(--blue); }
.av.c-y { --c: var(--yellow); }
.av.c-p { --c: var(--pink); }
.av {
  flex: none; display: inline-block; width: 1.8em; height: 1.8em; border-radius: 50%; background: var(--c, #000);
  -webkit-mask: var(--dots-disc, radial-gradient(#000 69%, transparent 71%)) center / 100% 100% no-repeat; mask: var(--dots-disc, radial-gradient(#000 69%, transparent 71%)) center / 100% 100% no-repeat;
}
.chat { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: .5em; padding: .7em .8em .5em; overflow: hidden; transition: opacity .5s; }
.chat.fade { opacity: 0; }
.msg { display: flex; gap: .42em; align-items: flex-end; max-width: 90%; }
.msg.bot { max-width: 94%; }
.msg.bot .av { display: none; }
.bb { padding: .5em .8em .58em; border-radius: 1.05em; border-end-start-radius: .3em; background: #f0f0f0; font-size: .86em; line-height: 1.3; overflow-wrap: break-word; min-width: 0; }
.bb .who { display: block; font-weight: 650; font-size: .86em; margin-bottom: .1em; }
.msg.bot .bb { background: #000; color: #fff; }
.msg.bot .who { color: #d6d6d6; }
.msg.in { animation: msg-in .5s var(--spring) both; transform-origin: 0 100%; }
[dir="rtl"] .msg.in { transform-origin: 100% 100%; }
@keyframes msg-in { from { opacity: 0; transform: translateY(.8em) scale(.88); } }
.typing .bb { padding: .72em .9em; }
.typing i { display: inline-block; width: .42em; height: .42em; margin: 0 .1em; border-radius: 50%; background: #8a8a8a; animation: dot 1s infinite; }
.msg.bot.typing i { background: #bbb; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-.25em); opacity: 1; } }
.input { display: flex; align-items: center; gap: .5em; padding: .5em .8em 1.5em; }
.input span { flex: 1; border: 1px solid #ddd; border-radius: 1.4em; padding: .62em 1em; font-size: .8em; color: #666; }
.send-b { flex: none; width: 2.3em; height: 2.3em; border-radius: 50%; display: grid; place-items: center; background: #000; }
.send-b svg { width: 1em; }
[dir="rtl"] .send-b svg { scale: -1 1; }
.homebar { position: absolute; bottom: .55em; left: 50%; width: 36%; height: .3em; border-radius: 1em; background: #111; transform: translateX(-50%); }
.bub-giant { inset-inline-start: -6cqw; top: 25cqw; max-width: 30cqw; }

/* Fery's lines, in his bubbles, around the rule he pops up from */
.ditos-wrap { --R: clamp(170px, 17vw, 236px); max-width: 1080px; margin: clamp(88px, 10vw, 140px) auto 0; }
.ditos { display: grid; grid-template-columns: minmax(0, 1fr) calc(var(--R) + 28px) minmax(0, 1fr); align-items: start; gap: 30px 20px; min-height: calc(var(--R) * .66 + 140px); padding-bottom: 22px; }
.dito.bub { position: relative; z-index: 1; max-width: 330px; visibility: visible; opacity: 1; }
.js .dito.bub:not(.on) { visibility: hidden; opacity: 0; }
.dito .bub-t { padding: 17px 21px 18px; border-radius: 22px; font-weight: 330; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.3; letter-spacing: -.012em; }
.dito:nth-child(1) { grid-column: 1; grid-row: 1; justify-self: end; }
.dito:nth-child(2) { grid-column: 3; grid-row: 1; justify-self: start; margin-top: 46px; }
.dito:nth-child(3) { grid-column: 1; grid-row: 2; justify-self: end; margin-inline-end: 9%; }
.dito:nth-child(4) { grid-column: 3; grid-row: 2; justify-self: start; margin-inline-start: 9%; margin-top: 14px; }
.send { margin-top: clamp(96px, 11vw, 150px); display: grid; justify-items: center; gap: 18px; text-align: center; }
.send ul {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; width: min(100%, 860px);
  background: var(--hair); border-block: 1px solid #000;
}
@media (min-width: 720px) { .send ul { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.send li { background: #fff; padding: 16px 8px; font-size: clamp(17px, 1.6vw, 21px); font-weight: 300; letter-spacing: -.01em; overflow-wrap: anywhere; hyphens: auto; }
.stories { margin-top: clamp(64px, 8vw, 104px); display: grid; justify-items: center; gap: 18px; text-align: center; }
.st-box { position: relative; width: min(100%, 820px); }
.st-back { width: 100%; aspect-ratio: 6 / 1.22; }
@media (max-width: 519px) { .st-back { aspect-ratio: 3 / 2.15; } }
/* Each story ring is its own little print, so it can spin. */
.ring { position: absolute; left: 0; top: 0; pointer-events: none; }
.ring canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; max-width: none; }
.ring .r-dash { opacity: 0; }
.stories p { color: var(--muted); }

/* dia 14 */
.libera { margin-top: 34px; }
.rules { margin-top: 30px; border-top: 1px solid #000; }
.rules li { padding: 14px 0; border-bottom: 1px solid var(--hair); }
.libera ul { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.libera li { padding: 8px 14px; border: 1px solid var(--hair); border-radius: 999px; font-size: 15px; transition: border-color .3s, background-color .3s, color .3s; }
.libera.open li { border-color: #000; }
.teste { --R: clamp(140px, 14vw, 196px); display: grid; justify-items: center; margin-top: calc(var(--R) * .66 + 10px); padding: 28px 0 32px; border-bottom: 1px solid #000; }
.pessoas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(2px, 1.2vw, 14px); width: min(100%, 540px); }
.pessoa {
  appearance: none; background: none; border: 0; padding: 0 0 4px; margin: 0; cursor: pointer; color: #000;
  display: grid; justify-items: center; gap: 4px; border-radius: 14px; font: 500 15px/1 var(--sans);
}
.pessoa canvas { width: 100%; aspect-ratio: 3 / 4; transition: transform .3s var(--ease); }
.pessoa:hover:not([aria-disabled="true"]) canvas { transform: translateY(-4px); }
.pessoa span { display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border-radius: 999px; transition: background-color .2s, color .2s; }
.pessoa:hover span, .pessoa.picked span { background: #000; color: #fff; }
.teste[data-state="accepted"] .pessoa.picked span { background: #000; color: #fff; box-shadow: 0 0 0 3px #fff, 0 0 0 4.5px var(--pink); }
.pessoa.ghost span { color: #696969; }
.pessoa[aria-disabled="true"] { cursor: default; }
.pessoa[aria-disabled="true"]:not(.picked):hover span { background: none; color: #696969; }
@media (prefers-reduced-motion: no-preference) {
  .teste[data-state="waiting"] .pessoa.picked canvas { animation: waiting 1s ease-in-out infinite; }
}
@keyframes waiting { 50% { transform: translateY(-5px) scale(1.03); } }
.teste-status { min-height: 1.6em; margin-top: 18px; font-size: 17px; text-align: center; padding-inline: 8px; }
.again { margin-top: 16px; }

/* dia 15 */
.art-15 { margin-top: clamp(36px, 5vw, 64px); }
.a15 { position: relative; aspect-ratio: 1180 / 340; }
@media (max-width: 639px) { .a15 { aspect-ratio: 4 / 3; } }
.cl-c { inset-inline-start: 2%; top: 2%; width: 22%; --dd: 21s; }
.cl-d { inset-inline-end: 1%; top: -4%; width: 15%; --dd: 25s; --dl: -11s; }
@media (max-width: 639px) { .cl-c { width: 40%; } .cl-d { width: 28%; top: -2%; } }
.crowd-15 { z-index: 2; }
.l15 { --R: clamp(92px, 9vw, 126px); }
.sortear { display: flex; justify-content: center; margin-top: 30px; }

/* redes */
.redes .wrap { --R: clamp(88px, 8vw, 116px); display: grid; gap: 22px; padding-top: 44px; }
@media (min-width: 900px) { .redes .wrap { grid-template-columns: 1fr 1fr; align-items: end; gap: 64px; } .redes .body { margin-top: 0; } }

/* segurança */
.l-seg { --R: clamp(140px, 14vw, 194px); margin-top: max(clamp(40px, 5vw, 64px), calc(var(--R) * .66 + 14px)); }
.seg-list { display: grid; }
.seg-list li { display: grid; gap: 8px; padding: 28px 0 30px; border-bottom: 1px solid var(--hair); }
.seg-list h3 { display: flex; align-items: center; gap: 12px; font-size: clamp(18px, 1.6vw, 21px); font-weight: 500; }
.seg-list p { color: var(--muted); max-width: 30em; }
.chk { display: none; }
.js .chk {
  display: inline-block; flex: none; width: 28px; height: 28px; background: var(--blue);
  -webkit-mask: var(--dots-85, linear-gradient(#000, #000)) 0 0 / 40px 40px repeat, var(--check) center / contain no-repeat; -webkit-mask-composite: source-in;
  mask: var(--dots-85, linear-gradient(#000, #000)) 0 0 / 40px 40px repeat, var(--check) center / contain no-repeat; mask-composite: intersect;
}
:root { --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.5 12.8l5.6 5.6L20.8 6.2' fill='none' stroke='black' stroke-width='4.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
@media (min-width: 760px) {
  .seg-list { grid-template-columns: 1fr 1fr; }
  .seg-list li:nth-child(odd) { padding-inline-end: 40px; border-inline-end: 1px solid var(--hair); }
  .seg-list li:nth-child(even) { padding-inline-start: 40px; }
}

/* fim */
.fim {
  --S: clamp(220px, min(26vw, calc((100svh - 420px) / .62)), 390px); --show: .62; --under: 0px;
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: center; text-align: center;
  min-height: max(660px, 100svh); padding: clamp(110px, 12vw, 170px) var(--gut) 0;
}
.fim-c { position: absolute; z-index: 0; bottom: -6%; height: 112%; width: 62%; }
.fim-l { left: -6%; }
.fim-r { right: -6%; }
@media (prefers-reduced-motion: no-preference) {
  .fim-l { animation: drift 19s ease-in-out infinite alternate; }
  .fim-r { animation: drift 23s ease-in-out -8s infinite alternate-reverse; }
}
.fim-copy { position: relative; z-index: 5; display: grid; justify-items: center; }
.fim-copy .body { margin-bottom: 30px; }
.stage-end { position: relative; z-index: 2; align-self: stretch; flex: 1 0 auto; margin: 24px calc(var(--gut) * -1) 0; min-height: calc(var(--S) * var(--show) + 10px); }

/* footer */
.foot { border-top: 1px solid #000; padding: 10px 0 18px; font-size: 14px; position: relative; background: #fff; }
.foot .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; }
.foot a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.foot a:hover { text-decoration: underline; text-underline-offset: 3px; }
.foot .c { margin-inline-start: auto; }

/* ---------- entrance (after the clouds part) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .enter .h1 .ln { animation: rise .8s var(--ease) both; }
  .enter .h1 .ln:nth-child(1) { animation-delay: .1s; }
  .enter .h1 .ln:nth-child(2) { animation-delay: .18s; }
  .enter .h1 .ln:nth-child(3) { animation-delay: .26s; }
  .enter .lead { animation: rise .8s var(--ease) .34s both; }
  .enter .cta-row { animation: rise .8s var(--ease) .42s both; }
}
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }

/* ---------- small screens ---------- */
@media (max-width: 899px) {
  .ditos { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-bottom: calc(var(--R) * .66 + 10px); gap: 22px; }
  .dito:nth-child(n) { grid-column: 1; grid-row: auto; justify-self: start; margin: 0; max-width: min(340px, calc(100vw - 2 * var(--gut) - 34px)); }
  .dito:nth-child(even) { justify-self: end; }
  .l-ditos .slot { inset-inline: auto 0; }
  .l-ditos .slot .bub { bottom: 30%; inset-inline: auto 86%; translate: none; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  /* Phones: Fery right under the headline, so he is on the first screen, above the text and the button. */
  .hero { --S: clamp(210px, min(70vw, calc((100svh - 470px) / .72)), 300px); --hillH: 70px; --under: 46px; padding-top: 84px; }
  .hero-copy { display: contents; }
  .hero .h1 { order: 1; position: relative; z-index: 5; text-align: center; }
  .stage-hero { order: 2; flex: 0 0 auto; margin-top: 4px; min-height: calc(var(--S) * var(--show) + var(--under) + 6px); }
  .hero .lead { order: 3; position: relative; z-index: 5; text-align: center; margin-top: 14px; }
  .hero .cta-row { order: 4; position: relative; z-index: 5; align-items: center; margin-top: 18px; }
  .cta-row { flex-direction: column; gap: 12px; }
  .note { text-align: center; max-width: 32ch; }
  .bub-hero { inset-inline: auto 2vw; bottom: calc(var(--under) + var(--S) * .42); max-width: min(190px, 48vw); }
  .bub-end { inset-inline: auto 3vw; bottom: calc(var(--S) * .55); max-width: min(230px, 64vw); }
  .brand img { width: 92px; }
  .seg span { padding: 0 16px; }
  .fita-in { font-size: 13px; padding-inline: 10px; letter-spacing: 0; }
  .fita-in span + span::before, .fita.run .fita-in span::before { margin: 0 7px; }
  .stage { width: 100vw; margin-inline: calc(50% - 50vw); aspect-ratio: 100 / 214; }
  .giant { inset-inline-start: -6cqw; top: -2cqw; width: 56cqw; height: 56cqw; }
  .bank { left: -12cqw; width: 124cqw; top: 76cqw; height: 74cqw; }
  .phone { --bez: 2.5cqw; --rad: 11.3cqw; left: 13cqw; top: 63cqw; width: 74cqw; height: 146cqw; font-size: 3.6cqw; }
  .phone-frame { left: -4cqw; top: -4cqw; width: calc(100% + 8cqw); height: calc(100% + 8cqw); }
  .bub-giant { inset-inline-start: 3cqw; top: 1cqw; max-width: 46cqw; }
  .slot .bub { bottom: 6%; max-width: min(220px, calc(100vw - var(--R) * .86 - 2 * var(--gut) - 10px)); }
  .l-seg { margin-top: calc(var(--R) * .66 + 40px); }
  .bub-t { font-size: 14.5px; }
  .fim { --S: clamp(220px, 74vw, 340px); }
}
/* ---------- more life ----------
   Fery's body: gestures (hop, tilt, the arrival arc) animate the canvas's own translate, scale and
   rotate; the wrapper carries a slow spring (leaning toward what you point at, jelly when you
   scroll). The clips get headroom above (and on the sides for the roaming one) so a hop never cuts
   his ears; the bottom edge stays exactly where it was. */
.peek { transform-origin: 50% calc(100% - var(--under)); }
.peek .peek-clip { top: calc(var(--S) * -.16); }
.peek .peek-clip canvas { top: calc(var(--S) * .16); transform-origin: 50% calc(var(--show) * 100%); }
.slot .peek-clip { inset: calc(var(--R) * -.34) calc(var(--R) * -.16) 0; transform-origin: 50% 100%; }
.slot .peek-clip canvas { top: calc(var(--R) * .34); left: calc(var(--R) * .16); transform-origin: 50% 66%; }

/* People lean toward Fery when he talks (rotate from the feet, with a spring). */
.pp i { transition: rotate .8s cubic-bezier(.3, 1.45, .45, 1) var(--ld, 0s); }
@media (prefers-reduced-motion: no-preference) {
  .crowd.in .pp i { animation: pop .72s ease-out calc(var(--k, 0) * 28ms) both, bob var(--bd, 3.4s) steps(1, end) var(--bo, 0s) infinite; }
}
@keyframes pop {
  0% { scale: 0 0; }
  42% { scale: .78 1.24; }
  66% { scale: 1.16 .84; }
  84% { scale: .96 1.04; }
  100% { scale: 1 1; }
}

/* The tape is driven by the scroll (see the script). */
.fita.run.drive .fita-in { animation: none; }
.fita.run.drive .fita-in span { transform: skewX(var(--sk, 0deg)); }

/* Birds and dust: tiny prints that drift through the scenes. */
.birds { position: absolute; z-index: 0; inset: 0; pointer-events: none; overflow: hidden; contain: strict; }
.bird { position: absolute; left: 0; top: 0; width: 22px; height: 14px; }
.bird b { display: block; width: 100%; height: 100%; background: var(--bird) 0 0 / 200% 100% no-repeat; image-rendering: pixelated; animation: flap var(--fl, .3s) steps(1, end) infinite; }
@keyframes flap { 50% { background-position: 100% 0; } }
.birds.front { z-index: 1; }
.mote { position: absolute; left: 0; top: 0; width: 2px; height: 2px; background: #000; opacity: 0; }

/* Section titles print themselves from flying dots; the type takes over at the end. */
.js h2.dt { position: relative; color: transparent; }
.js h2.dt.dt-in { color: var(--text); transition: color .55s var(--ease); }
.dt-cv { position: absolute; z-index: 1; pointer-events: none; max-width: none; transition: opacity .5s; }

/* Dia 1: the black pill slides (and stretches) between the two options. */
.seg { position: relative; }
.seg-thumb { position: absolute; z-index: 0; left: 0; top: 0; width: 0; height: 0; border-radius: 999px; background: #000; pointer-events: none; transition: left .5s cubic-bezier(.3, 1.4, .5, 1), width .5s cubic-bezier(.3, 1.4, .5, 1); }
.seg.thumbed label { z-index: 1; }
.seg.thumbed span { transition: color .14s .2s; }
.seg.thumbed input:checked + span { background: none; color: #fff; transition: color .14s .08s; }
.seg.thumbed label:hover input:not(:checked) + span { background: none; }

/* Dia 14: the five wobble from the feet; a pink burst when your contact accepts. */
.pessoa canvas { transform-origin: 50% 94%; }
.spark { position: absolute; z-index: 3; left: 0; top: 0; width: 3px; height: 3px; background: var(--pink); pointer-events: none; }

/* A few small clouds keep the sky going through the quiet part of the page. */
.cl-e { inset-inline-end: 7%; top: 30px; width: clamp(84px, 9vw, 132px); --dd: 22s; }
.cl-f { inset-inline-start: 40%; top: 46px; width: clamp(80px, 8vw, 118px); --dd: 20s; --dl: -7s; }
.cl-g { inset-inline-end: 22%; top: 64px; width: clamp(80px, 9vw, 128px); --dd: 24s; --dl: -12s; }
@media (max-width: 640px) {
  .cl-e { inset-inline-end: 5%; top: 12px; }
  .cl-f { inset-inline-start: 5%; top: 10px; }
  .cl-g { inset-inline-end: 6%; top: 14px; }
}

@media (prefers-reduced-motion: no-preference) {
  .libera.open li { animation: bump .6s cubic-bezier(.3, 1.5, .5, 1) both; }
  .libera.open li:nth-child(2) { animation-delay: .07s; }
  .libera.open li:nth-child(3) { animation-delay: .14s; }
  .libera.open li:nth-child(4) { animation-delay: .21s; }
  .js .seg-list li.rv .chk { scale: 0; }
  .js .seg-list li.rv.in .chk { animation: chk .75s cubic-bezier(.3, 1.6, .5, 1) .35s both; }
}
@keyframes bump { 40% { scale: 1.12 .9; } 70% { scale: .96 1.05; } }
@keyframes chk { from { scale: 0; rotate: -35deg; } to { scale: 1; rotate: 0deg; } }

@media (prefers-reduced-motion: reduce) {
  .btn, .btn-line, .seg span, .pessoa canvas, .libera li, .op-l, .op-r { transition: none; }
  .pp i, .seg-thumb, .dt-cv { transition: none !important; }
  .peek-clip canvas, .pp.move { transition: none !important; }
  .msg.in, .typing i { animation: none; }
}

/* ═════════════════════════════════════════════════════════════════════════════════════════════
   The rest of the site, in the same ink
   ═════════════════════════════════════════════════════════════════════════════════════════════ */
:root {
  --err: #b3141c;
  --line: rgba(0, 0, 0, .46);
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.skip {
  position: absolute; z-index: 100; top: 12px; inset-inline-start: 12px; padding: 12px 18px; border-radius: 999px;
  background: #000; color: #fff; font-weight: 500; text-decoration: none; transform: translateY(-160%);
}
.skip:focus { transform: none; }
h1, h2, h3, p, li, legend, label, .btn, .btn-line { overflow-wrap: break-word; }
.end-count { margin-top: 18px; font-size: 14px; color: var(--muted); }

/* ---------- language picker (top, at the inline end) ---------- */
.lang { pointer-events: auto; position: relative; display: inline-flex; }
.lang select {
  appearance: none; -webkit-appearance: none; min-height: 44px; max-width: min(48vw, 230px); margin: 0;
  padding-block: 0; padding-inline: 16px 34px; border: 1px solid #000; border-radius: 999px;
  background: #fff var(--chev) no-repeat right 14px center / 10px 6px; color: #000;
  font: 500 14px/1 var(--sans); text-overflow: ellipsis; cursor: pointer;
}
[dir="rtl"] .lang select { background-position: left 14px center; }
.lang select:hover { background-color: #f1f1f1; }
.lang select:focus-visible { outline: 2px solid #000; outline-offset: 3px; }
.top:has(.lang) { gap: 12px; }

/* ---------- footer ---------- */
.foot nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; }

/* ---------- join ---------- */
.jhero {
  position: relative; isolation: isolate; overflow: hidden; text-align: center;
  padding: clamp(118px, 12vw, 170px) var(--gut) clamp(64px, 7vw, 104px);
}
.jhero-copy { position: relative; z-index: 5; display: grid; justify-items: center; }
.h-join { max-width: 12em; font-size: clamp(50px, min(6.6vw, 11svh), 96px); }
.jhero .lead { max-width: 33em; }
@media (prefers-reduced-motion: no-preference) {
  .jhero .h-join, .jhero .lead { animation: rise .8s var(--ease) both; }
  .jhero .lead { animation-delay: .1s; }
}
.jgrid { display: grid; padding-bottom: clamp(80px, 9vw, 136px); }
.jhost { --R: clamp(150px, 15vw, 214px); padding-top: calc(var(--R) * .66 + 10px); }
/* On a phone he peeks over the card's top edge, clear of its rounded corner. */
.jhost .slot { inset-inline-start: 22px; }
.l-host { border-top: 0; }
.bub-host .bub-t { font-size: 15.5px; }
html:not(.js) .bub-host, .bub-host.on { visibility: visible; opacity: 1; }
@media (min-width: 900px) {
  .jgrid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(40px, 5vw, 88px); align-items: start; }
  .jhost { --R: clamp(180px, 17vw, 250px); position: sticky; top: 24px; padding-top: calc(var(--R) * .66 + 96px); }
  .jhost .slot { inset-inline-start: 0; }
  .l-host { border-top: 1px solid #000; }
  .jhost .slot .bub { max-width: min(250px, calc((min(100vw - 2 * var(--gut), var(--max)) - 88px) * .3636 - var(--R) * .86 + 60px)); }
}
.join-card {
  position: relative; background: #fff; border: 1.5px solid #000; border-radius: 28px;
  padding: clamp(22px, 4vw, 44px);
}
/* a stippled print shadow, like the bubbles */
.join-card::before {
  content: ""; position: absolute; z-index: -1; inset: -1.5px; border-radius: 28px; background: #000; translate: 7px 9px;
  -webkit-mask: var(--dots-40, linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .2))) 0 0 / 40px 40px repeat;
  mask: var(--dots-40, linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .2))) 0 0 / 40px 40px repeat;
  pointer-events: none;
}
.field { border: 0; padding: 0; margin: 0 0 26px; min-width: 0; }
.field > label, .field > legend { display: block; padding: 0; margin-bottom: 9px; font-weight: 560; font-size: 15.5px; line-height: 1.3; }
.field input[type="email"], .field input[type="text"] {
  display: block; width: 100%; min-height: 54px; margin: 0; padding: 0 18px; border: 1px solid #000; border-radius: 16px;
  background: #fff; color: #000; font: 400 17px/1.2 var(--sans);
  transition: box-shadow .2s, border-color .2s;
}
.field input::placeholder { color: #707070; opacity: 1; }
.field input:hover { box-shadow: inset 0 0 0 1px #000; }
.field input:focus { outline: none; box-shadow: inset 0 0 0 1px #000; }
.field input:focus-visible { outline: 2px solid #000; outline-offset: 3px; }
.field input[aria-invalid="true"] { border-color: var(--err); box-shadow: inset 0 0 0 1px var(--err); }
.hint { margin-top: 8px; font-size: 14px; line-height: 1.4; color: var(--muted); }
.err { margin-top: 7px; font-size: 14.5px; line-height: 1.4; font-weight: 500; color: var(--err); }
.err:empty { display: none; }
.err-form { margin: 0 0 16px; }
.at-input { position: relative; }
.at-input > span { position: absolute; top: 50%; inset-inline-start: 18px; translate: 0 -52%; font-size: 17px; pointer-events: none; }
.at-input input { padding-inline-start: 38px !important; }
/* An e-mail and an @ read left to right in every language. */
[dir="rtl"] .at-input, [dir="rtl"] .field input[type="email"], [dir="rtl"] .done-link input { direction: ltr; }
[dir="rtl"] .field input[type="email"] { text-align: right; }
[dir="rtl"] .at-input > span { inset-inline-start: 18px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.chip { position: relative; display: inline-flex; }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip span {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--line); border-radius: 999px; font-size: 15px; line-height: 1.2;
  transition: background-color .2s, color .2s, border-color .2s;
}
.chip span i { font-style: normal; filter: grayscale(1); }
.chip:hover input:not(:checked):not(:disabled) + span { border-color: #000; background: #f4f4f4; }
.chip input:checked + span { background: #000; color: #fff; border-color: #000; }
.chip input:focus-visible + span { outline: 2px solid #000; outline-offset: 3px; }
.chip input:disabled { cursor: not-allowed; }
.chip input:disabled + span { opacity: .38; }
.is-invalid .chip span { border-color: var(--err); }
.chips-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; margin-top: 6px; font-size: 14px; color: var(--muted); }
.link-btn {
  appearance: none; background: none; border: 0; margin: 0; padding: 0 2px; min-height: 44px; cursor: pointer;
  color: #000; font: 500 14.5px/1 var(--sans); text-decoration: underline; text-underline-offset: 3px;
}
.link-btn:hover { text-decoration-thickness: 2px; }
.turnstile { margin-bottom: 18px; }
.btn { border: 0; cursor: pointer; }
.btn-block { width: 100%; min-height: 58px; font-size: 17px; }
.btn[aria-busy="true"] { cursor: progress; background: #333; }
.legal-line { margin-top: 16px; font-size: 13.5px; line-height: 1.5; color: var(--muted); text-align: center; }
.legal-line a { color: #000; text-underline-offset: 2px; }
.done { display: grid; justify-items: center; text-align: center; }
.done:focus { outline: none; }
.done-check {
  width: 68px; height: 68px; margin-bottom: 18px; background: var(--blue);
  -webkit-mask: var(--dots-85, linear-gradient(#000, #000)) 0 0 / 40px 40px repeat, var(--check) center / contain no-repeat; -webkit-mask-composite: source-in;
  mask: var(--dots-85, linear-gradient(#000, #000)) 0 0 / 40px 40px repeat, var(--check) center / contain no-repeat; mask-composite: intersect;
}
.done h2 { font-size: clamp(34px, 4.2vw, 56px); }
.done-body { margin-top: 16px; max-width: 30em; color: var(--muted); overflow-wrap: anywhere; }
.done-pos { margin-top: 14px; font-weight: 560; }
.done-share { width: 100%; margin-top: 30px; padding-top: 24px; border-top: 1px solid #000; }
.done-share h3 { font-size: 18px; }
.done-share > p { margin-top: 6px; color: var(--muted); }
.done-link { margin-top: 16px; }
.done-link input {
  display: block; width: 100%; min-height: 50px; margin: 0; padding: 0 14px; border: 1px solid #000; border-radius: 14px;
  background: #fff; color: #000; font: 400 15px/1.2 var(--sans); text-align: center;
}
.done-link input:focus-visible { outline: 2px solid #000; outline-offset: 3px; }
.done-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 12px; }
.done-actions .btn-line { min-height: 54px; padding: 0 28px; font-size: 16px; }
.done-demo { margin-top: 20px; padding: 8px 16px; border: 1px dashed #000; border-radius: 999px; font-size: 14px; }
.done-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 24px; margin-top: 22px; }
.done-back { display: inline-flex; align-items: center; min-height: 44px; font-size: 14.5px; font-weight: 500; text-underline-offset: 3px; }
.burst { position: fixed; inset: 0; z-index: 70; pointer-events: none; }
.burst i { position: absolute; width: 4px; height: 4px; }

/* ---------- 404 (the end of the landing, with another line) ---------- */
.h-nf { font-weight: 250; font-stretch: 88%; font-size: clamp(38px, 5vw, 70px); line-height: .98; letter-spacing: -.04em; text-wrap: balance; }
.h-nf em { font-size: 1.08em; letter-spacing: -.02em; }
.nf .fim-copy .body { margin-bottom: 30px; }
html:not(.js) .nf .bub-end { visibility: visible; opacity: 1; }
.page-nf .fim { min-height: max(600px, calc(100svh - 70px)); }

/* ---------- terms and privacy ---------- */
.legal { padding: clamp(112px, 12vw, 156px) 0 clamp(72px, 9vw, 120px); }
.legal-in { max-width: 720px; }
.legal h1 { font-weight: 250; font-stretch: 88%; font-size: clamp(40px, 5vw, 64px); line-height: 1; letter-spacing: -.035em; text-wrap: balance; }
.legal .updated { margin-top: 14px; font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--muted); }
.legal h2 { margin-top: 44px; padding-top: 14px; border-top: 1px solid #000; font-weight: 560; font-stretch: 100%; font-size: 19px; line-height: 1.3; letter-spacing: -.01em; }
.legal p, .legal ul { margin-top: 12px; color: #262626; }
.legal ul { list-style: disc; padding-inline-start: 1.2em; }
.legal li + li { margin-top: 6px; }
.legal a { text-underline-offset: 3px; }
.legal mark { background: #ffe58a; padding: 0 3px; }
.legal-back { margin-top: 48px; }

/* ---------- per-script typography ----------
   Bricolage and Instrument Serif are Latin faces; other scripts use the system's fonts. Those have
   no light condensed cut and need room: no negative tracking, more line height, and line breaks
   that keep words and phrases whole. */
:lang(de) :is(h1, h2, h3, p, li), :lang(ru) :is(h1, h2, h3, p, li), :lang(uk) :is(h1, h2, h3, p, li),
:lang(nl) :is(h1, h2, h3, p, li), :lang(pl) :is(h1, h2, h3, p, li), :lang(tr) :is(h1, h2, h3, p, li),
:lang(sw) :is(h1, h2, h3, p, li), :lang(id) :is(h1, h2, h3, p, li) { hyphens: auto; }
:is(:lang(ja), :lang(zh), :lang(ko)) :is(.h1, h2, .h-nf, .legal h1) { line-height: 1.24; letter-spacing: 0; }
:is(:lang(ja), :lang(zh), :lang(ko)) :is(.h1 em, h2 em, .h-nf em) { letter-spacing: 0; }
:is(:lang(ja), :lang(zh)) :is(h1, h2, h3, .bub-t, .lead, .body) { line-break: strict; }
:lang(ja) :is(h1, h2, h3, .bub-t) { word-break: auto-phrase; }
:lang(ko) { word-break: keep-all; }
:lang(ja) em { font-family: "Instrument Serif", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "Noto Serif JP", "Noto Serif CJK JP", serif; font-style: normal; }
:lang(zh-Hans) em { font-family: "Instrument Serif", "Songti SC", STSong, "Noto Serif SC", "Noto Serif CJK SC", serif; font-style: normal; }
:lang(zh-Hant) em { font-family: "Instrument Serif", "Songti TC", "Noto Serif TC", "Noto Serif CJK TC", PMingLiU, serif; font-style: normal; }
:lang(ko) em { font-family: "Instrument Serif", AppleMyungjo, "Nanum Myeongjo", "Noto Serif KR", "Noto Serif CJK KR", Batang, serif; font-style: normal; }
/* Arabic letters join: any tracking breaks them apart. */
:is(:lang(ar), :lang(fa)) * { letter-spacing: 0 !important; }
:is(:lang(ar), :lang(fa)) :is(.h1, h2, .h-nf, .legal h1) { line-height: 1.3; }
:is(:lang(ar), :lang(fa)) em { font-family: "Instrument Serif", "Noto Naskh Arabic", "Geeza Pro", "Times New Roman", serif; font-style: normal; }
:lang(he) :is(.h1, h2, .h-nf, .legal h1) { line-height: 1.1; letter-spacing: -.01em; }
:lang(he) em { font-family: "Instrument Serif", "Noto Serif Hebrew", "Times New Roman", serif; font-style: normal; }
:is(:lang(hi), :lang(bn), :lang(th)) :is(.h1, h2, .h-nf, .legal h1) { line-height: 1.32; letter-spacing: 0; }
:is(:lang(hi), :lang(bn), :lang(th)) :is(.h1 em, h2 em, .h-nf em) { letter-spacing: 0; font-style: normal; }
:is(:lang(hi), :lang(bn), :lang(th)) .bub-t { line-height: 1.5; }
:lang(th) :is(h1, h2, h3, .bub-t) { line-break: strict; }
/* The serif italic labels (day, date) stay upright where the script has no italic. */
:is(:lang(ar), :lang(fa), :lang(he), :lang(ja), :lang(zh), :lang(ko), :lang(hi), :lang(bn), :lang(th)) :is(.day, .legal .updated) { font-style: normal; }
:lang(vi) em { font-family: "Noto Serif", "Times New Roman", Georgia, serif; }
:is(:lang(ru), :lang(uk)) em { font-family: "Instrument Serif", Georgia, "Times New Roman", serif; }

/* Short phones (a small iPhone with the browser bars open) shrink Fery, and his bubble, up to four
   lines, would climb into the headline: the stage keeps room for it. Taller phones are unchanged. */
@media (max-width: 640px) and (max-height: 760px) {
  .stage-hero { min-height: max(calc(var(--S) * var(--show) + var(--under) + 6px), calc(var(--under) + var(--S) * .42 + 118px)); }
}