/* wiggy.io — landing page styles. Ported from design/web/site.css; production additions are at the end.
   Tokens are copied from design/mobile/wiggy.css so the site and the app share one palette.
   If a token changes there, change it here too. Fonts: Bricolage Grotesque (display), Figtree (text), Caveat (handwriting).
   Other scripts swap these tokens in the Languages section at the end. */

:root {
  color-scheme: light;
  --yellow: #FFD23F; --yellow-press: #F2C114; --yellow-soft: #FFF4C7; --on-yellow: #1A1420;
  --pink: #FF4F8B; --pink-ink: #C81E5E; --pink-soft: #FFE4EE;
  --ground: #FFFFFF; --surface: #FFFFFF; --surface-2: #F5F3F6; --surface-3: #ECE8EF;
  --ink: #1A1420; --ink-2: #5E5566; --ink-3: #8A8190;
  --line: #E7E2EA; --line-strong: #CFC7D4;
  --pos: #1F7A4D; --pos-soft: #DDF2E6; --warn: #B45309; --warn-soft: #FDEBD8;
  --stage-a: #5B5064; --stage-b: #2C2632;
  --focus: #FF4F8B;
  --shadow: 0 18px 50px rgb(26 20 32 / .14), 0 2px 6px rgb(26 20 32 / .06);

  --font-display: "Bricolage Grotesque", "Figtree", system-ui, sans-serif;
  --font-text: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-hand: "Caveat", "Segoe Print", "Bradley Hand", cursive;
  --r-sm: 12px; --r-md: 16px; --r-card: 20px; --r-lg: 28px; --r-pill: 999px;
  --max: 1160px;
  --gutter: clamp(16px, 4vw, 40px);
  --ease: cubic-bezier(.2, .8, .2, 1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --yellow-soft: #3A3014; --pink: #FF6B9D; --pink-ink: #FF8DB4; --pink-soft: #3B1D2B;
    --ground: #141017; --surface: #1D1822; --surface-2: #26202C; --surface-3: #312938;
    --ink: #F4EFF6; --ink-2: #B7ADBE; --ink-3: #857B8C; --line: #332B3A; --line-strong: #4A4052;
    --pos: #5FD39A; --pos-soft: #16301F; --warn: #F7924A; --warn-soft: #3A2312;
    --shadow: 0 18px 50px rgb(0 0 0 / .5), 0 0 0 1px var(--line);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --yellow-soft: #3A3014; --pink: #FF6B9D; --pink-ink: #FF8DB4; --pink-soft: #3B1D2B;
  --ground: #141017; --surface: #1D1822; --surface-2: #26202C; --surface-3: #312938;
  --ink: #F4EFF6; --ink-2: #B7ADBE; --ink-3: #857B8C; --line: #332B3A; --line-strong: #4A4052;
  --pos: #5FD39A; --pos-soft: #16301F; --warn: #F7924A; --warn-soft: #3A2312;
  --shadow: 0 18px 50px rgb(0 0 0 / .5), 0 0 0 1px var(--line);
}

/* ───── Base ───── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--ground); color: var(--ink); font: 400 17px/1.6 var(--font-text); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul, ol, figure, dl, dd { margin: 0; }
img, svg { max-width: 100%; }
a { color: var(--pink-ink); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.icon { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Type scale: 14 · 17 · 20 · 28 · 44 · 76 */
.h-hero { font: 800 clamp(44px, 7.2vw, 84px)/.98 var(--font-display); letter-spacing: -.028em; text-wrap: balance; }
.h-section { font: 780 clamp(32px, 4.4vw, 50px)/1.04 var(--font-display); letter-spacing: -.02em; text-wrap: balance; }
.h-item { font: 700 22px/1.2 var(--font-display); letter-spacing: -.005em; text-wrap: balance; }
.lead { font-size: clamp(18px, 1.7vw, 21px); line-height: 1.5; color: var(--ink-2); max-width: 36ch; text-wrap: pretty; }
.body-2 { color: var(--ink-2); max-width: 62ch; text-wrap: pretty; }
.eyebrow { font: 700 13px/16px var(--font-text); letter-spacing: .09em; text-transform: uppercase; color: var(--pink-ink); }
.small { font-size: 14px; line-height: 20px; color: var(--ink-2); }

/* The wiggle from the mark: under a word, and as the "working" indicator */
.squig { position: relative; white-space: nowrap; }
.squig::after { content: ""; position: absolute; left: 2%; right: 2%; bottom: -.1em; height: .2em; background: var(--pink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12' viewBox='0 0 24 12'%3E%3Cpath d='M0 6 Q6 0 12 6 T24 6' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E") 0 50% / auto 100% repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12' viewBox='0 0 24 12'%3E%3Cpath d='M0 6 Q6 0 12 6 T24 6' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E") 0 50% / auto 100% repeat-x; }
.wiggle { display: inline-block; width: 48px; height: 12px; background: var(--pink); vertical-align: middle;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='12' viewBox='0 0 16 12'%3E%3Cpath d='M0 6 Q4 0 8 6 T16 6' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 16px 12px repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='12' viewBox='0 0 16 12'%3E%3Cpath d='M0 6 Q4 0 8 6 T16 6' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 16px 12px repeat-x;
  animation: wiggle 900ms linear infinite; }
@keyframes wiggle { to { -webkit-mask-position: 16px 0; mask-position: 16px 0; } }
@media (prefers-reduced-motion: reduce) { .wiggle { animation: none; } }

/* ───── Buttons ───── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; border: 0; border-radius: var(--r-pill);
  font: 650 17px/1 var(--font-text); text-decoration: none; cursor: pointer; transition: background .15s, transform .15s var(--ease); }
.btn:active { transform: scale(.98); }
.btn--primary { background: var(--yellow); color: var(--on-yellow); }
.btn--primary:hover { background: var(--yellow-press); }
.btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.btn--ghost:hover { background: var(--surface-2); }
.btn--ink { background: var(--on-yellow); color: #fff; }
.btn--ink:hover { background: #33283D; }
.btn--sm { min-height: 42px; padding: 0 18px; font-size: 15px; }
.btn .icon { width: 20px; height: 20px; }

/* ───── Nav ───── */
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid transparent; }
.nav.is-scrolled { border-bottom-color: var(--line); }
.nav__row { display: flex; align-items: center; gap: 28px; min-height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font: 800 24px/1 var(--font-display); letter-spacing: -.02em; }
.brand svg { width: 34px; height: 34px; }
.nav__links { display: flex; gap: 24px; margin-inline-start: auto; }
.nav__links a { color: var(--ink-2); text-decoration: none; font: 600 15px/1 var(--font-text); padding: 8px 0; }
.nav__links a:hover { color: var(--ink); }
@media (max-width: 760px) { .nav__links { display: none; } .nav__row { gap: 12px; } .lang { margin-inline-start: auto; } }

/* ───── Hero: the promise, a composer, and a strip of widgets people asked for ───── */
.hero { padding-block: clamp(40px, 7vw, 96px) 0; overflow: hidden; }
.hero__copy { display: grid; gap: 26px; justify-items: center; text-align: center; }
.hero .h-hero { max-width: 22ch; line-height: 1.04; }
.hero .lead { max-width: 40ch; }
.pill { display: inline-flex; align-items: center; gap: 8px; padding-block: 7px; padding-inline: 10px 14px; border-radius: var(--r-pill); background: var(--surface-2);
  font: 600 14px/18px var(--font-text); color: var(--ink-2); }
.pill .icon { width: 18px; height: 18px; color: var(--pos); }
.hero__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* The big composer: the whole product in one input */
.say { width: min(100%, 680px); display: flex; align-items: center; gap: 12px; margin-top: 10px; padding-block: 10px; padding-inline: 18px 10px; border-radius: 34px;
  background: var(--surface); box-shadow: var(--shadow), inset 0 0 0 1.5px var(--line); text-align: start; }
.say > svg { width: 34px; height: 34px; flex: none; }
.say__text { flex: 1; min-width: 0; min-height: 56px; display: flex; align-items: center; font: 500 clamp(17px, 2vw, 21px)/1.35 var(--font-text); }
.say__text::after { content: ""; width: 2px; height: 1.2em; margin-inline-start: 2px; background: var(--pink); animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.say__send { width: 56px; height: 56px; flex: none; border-radius: 50%; background: var(--yellow); color: var(--on-yellow); display: grid; place-items: center; }
.say__send .icon { width: 24px; height: 24px; }
@media (prefers-reduced-motion: reduce) { .say__text::after { animation: none; } }

.strip { margin-top: clamp(48px, 7vw, 80px); padding-block: 28px; background: radial-gradient(120% 140% at 50% 0%, var(--stage-a), var(--stage-b));
  -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.strip__track { display: flex; gap: 20px; width: max-content; align-items: center; animation: drift 60s linear infinite; }
.strip:hover .strip__track { animation-play-state: paused; }
@keyframes drift { to { transform: translateX(-50%); } }
[dir="rtl"] .strip__track { animation-name: drift-rtl; }
@keyframes drift-rtl { to { transform: translateX(50%); } }
@media (prefers-reduced-motion: reduce) { .strip__track { animation: none; } }

/* ───── Story: a pinned phone that changes as the steps scroll past ───── */
.story-head { padding-block: clamp(72px, 10vw, 128px) 0; }
.story-head .section__head { margin-bottom: 0; }
.story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); }
.story__stage { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 50vh - 330px); height: 660px; align-self: start; display: grid; justify-items: center; gap: 16px; order: 2; }
.story__steps { order: 1; }
.beat { min-height: 88vh; display: flex; flex-direction: column; justify-content: center; gap: 16px; max-width: 460px; padding-block: 40px; }
.beat:first-child { min-height: 60vh; justify-content: flex-start; padding-top: 12vh; }
.beat__n { font: 700 14px/1 var(--font-text); letter-spacing: .06em; color: var(--ink-3); }
.beat h3 { font: 780 clamp(30px, 3.6vw, 44px)/1.06 var(--font-display); letter-spacing: -.02em; text-wrap: balance; transition: color .3s; }
.beat p { color: var(--ink-2); font-size: 18px; text-wrap: pretty; }
.beat q { font-weight: 650; color: var(--ink); }
.beat:not(.is-on) h3 { color: var(--ink-3); }
.js .beat:not(.is-on) p { opacity: .55; }
.beat p { transition: opacity .3s; }

.rail { display: flex; gap: 6px; }
.rail i { width: 22px; height: 4px; border-radius: 2px; background: var(--line-strong); transition: background .3s, width .3s var(--ease); }
.rail i.is-on { width: 40px; background: var(--pink); }

@media (max-width: 900px) {
  .story { display: block; }
  .story__stage { top: calc(env(safe-area-inset-top, 0px) + 72px); height: auto; z-index: 1; padding-bottom: 10px; background: linear-gradient(var(--ground) 85%, transparent); }
  .story__stage .phone { zoom: .62; }
  .story__steps { position: relative; z-index: 2; }
  .beat, .beat:first-child { min-height: 75vh; justify-content: flex-end; padding-bottom: 8vh; }
  .beat > * { position: relative; }
  .beat__card { transition: opacity .3s; }
  .beat.is-past .beat__card { opacity: 0; }
  .beat__card { display: grid; gap: 12px; padding: 20px; border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow); }
}
@media (min-width: 901px) { .beat__card { display: contents; } }

/* The phone and its scenes */
.phone { position: relative; width: 320px; height: 660px; border-radius: 48px; padding: 10px; background: #0F0C12; flex: none;
  box-shadow: var(--shadow), inset 0 0 0 1.5px #3A3140; }
.phone__screen { position: relative; height: 100%; border-radius: 39px; overflow: hidden; background: #fff; }
.scene { position: absolute; inset: 0; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transition: opacity .45s var(--ease), visibility 0s .45s; }
.scene.is-on { opacity: 1; visibility: visible; transition: opacity .45s var(--ease), visibility 0s; }
@media (prefers-reduced-motion: reduce) { .scene, .scene.is-on { transition: none; } }
.bar-status { display: flex; justify-content: space-between; padding: 14px 26px 6px; font: 600 13px/16px var(--font-text); }
.bar-status i { display: block; width: 15px; height: 10px; border-radius: 2px; background: currentColor; opacity: .8; }

/* App scenes use the app's light palette in both page themes, like a screenshot */
.app { --a-ink: #1A1420; --a-ink2: #5E5566; --a-fill: #F5F3F6; --a-line: #E7E2EA; background: #fff; color: var(--a-ink); font-family: var(--font-text); }
.app__bar { display: flex; align-items: center; gap: 10px; padding: 8px 18px 12px; border-bottom: 1px solid var(--a-line); font: 650 16px/20px var(--font-text); }
.app__bar svg { width: 24px; height: 24px; }
.app__bar span { flex: 1; }
.app__bar b { font-weight: 800; letter-spacing: 1px; color: var(--a-ink2); }
.chat { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; padding: 16px; overflow: hidden; }
.u { align-self: flex-end; max-width: 86%; padding: 10px 14px; border-radius: 20px; border-end-end-radius: 6px; background: var(--a-fill); font: 400 15px/21px var(--font-text); }
.u__img { display: block; width: 120px; height: 80px; margin-bottom: 8px; border-radius: 12px; background: linear-gradient(160deg, #F7EFE3 0 40%, #FF48B0 40% 62%, #0078BF 62%); }
.chat .w { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; font: 400 15px/21px var(--font-text); }
.chat .w > svg { width: 26px; height: 26px; }
.w__body { display: grid; gap: 10px; min-width: 0; }
.work { display: grid; gap: 6px; font: 400 13.5px/18px var(--font-text); color: var(--a-ink2); }
.work span { display: flex; align-items: center; gap: 8px; }
.work .icon { width: 16px; height: 16px; color: #1F7A4D; stroke-width: 2.6; }
.work .now { color: var(--a-ink); font-weight: 650; }
.work .wiggle { width: 32px; height: 10px; -webkit-mask-size: 12px 10px; mask-size: 12px 10px; }
.plan { display: grid; gap: 10px; padding: 14px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--a-line), 0 2px 10px rgb(26 20 32 / .06); }
.plan__t { font: 700 16px/21px var(--font-display); }
.plan dl { display: grid; grid-template-columns: auto 1fr; gap: 5px 10px; font: 400 13px/18px var(--font-text); }
.plan dt { color: #8A8190; font-weight: 600; }
.plan .ok { color: #1F7A4D; font-weight: 650; }
.plan__btn { display: grid; place-items: center; min-height: 44px; border-radius: var(--r-pill); background: var(--yellow); color: var(--on-yellow); font: 650 15px/1 var(--font-text); }
.plan .wgt { width: 280px; zoom: .775; }
.ideas { display: flex; flex-wrap: wrap; gap: 6px; }
.ideas span { padding: 7px 12px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px #CFC7D4; font: 550 13px/16px var(--font-text); }
.composer { display: flex; align-items: center; gap: 8px; padding: 10px 12px 18px; border-top: 1px solid var(--a-line); }
.composer span { flex: 1; min-height: 44px; display: flex; align-items: center; padding: 0 16px; border-radius: 22px; background: var(--a-fill); color: #8A8190; font: 400 15px/1 var(--font-text); }
.composer i { width: 44px; height: 44px; border-radius: 50%; background: var(--yellow); display: grid; place-items: center; color: var(--on-yellow); }
.composer i .icon { width: 20px; height: 20px; }
.composer.is-typing span { color: var(--a-ink); }

.home { color: #fff; background: radial-gradient(130% 80% at 15% 0%, #7A6689 0%, #463A58 45%, #231D2C 100%); }
.home__body { flex: 1; display: flex; flex-direction: column; gap: 18px; padding: 8px 18px 18px; }
.home__date b { display: block; font: 700 40px/1 var(--font-display); letter-spacing: -.02em; padding-top: 14px; }
.home__date span { font: 500 14px/20px var(--font-text); opacity: .85; }
.home__row { display: flex; gap: 16px; }
.apps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 8px; justify-items: center; margin-top: auto; }
.apps i { width: 50px; height: 50px; border-radius: 50%; background: rgb(255 255 255 / .2); }
.apps svg { width: 54px; height: 54px; }
.dock { display: flex; align-items: center; min-height: 48px; padding: 0 16px; border-radius: var(--r-pill); background: rgb(255 255 255 / .16); font: 500 14px/1 var(--font-text); opacity: .9; }
.toast { align-self: center; display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--r-pill); background: rgb(255 255 255 / .94); color: #1A1420; font: 600 13px/16px var(--font-text); }
.toast .icon { width: 16px; height: 16px; color: #1F7A4D; stroke-width: 2.6; }
.pop { animation: pop .6s var(--ease) both; }
.scene:not(.is-on) .pop { animation: none; }
@keyframes pop { from { transform: scale(.92); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pop { animation: none; } }

/* ───── Intro video ───── */
.watch__head { justify-items: center; text-align: center; margin-inline: auto; }
.video { position: relative; display: block; max-width: 960px; margin-inline: auto; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: var(--r-lg); background: var(--yellow); box-shadow: var(--shadow); color: inherit; text-decoration: none; }
.video img, .video iframe { display: block; width: 100%; height: 100%; border: 0; object-fit: cover; }
/* In a corner, not the middle: the poster's headline is in the middle. Ink, because the poster is yellow. */
.video__play { position: absolute; inset-block-end: clamp(12px, 2.5vw, 24px); inset-inline-start: clamp(12px, 2.5vw, 24px); display: flex; align-items: center; gap: 10px;
  padding-block: 6px; padding-inline: 6px 18px; border-radius: var(--r-pill); background: var(--on-yellow); color: #fff; font: 700 15px/20px var(--font-text);
  box-shadow: 0 10px 30px rgb(26 20 32 / .3); transition: transform .2s var(--ease); }
.video__play i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--yellow); color: var(--on-yellow); }
.video__play .icon { width: 20px; height: 20px; fill: currentColor; stroke-width: 1.5; translate: 1.5px 0; }
.video__lang { font-weight: 500; color: #CFC6D6; }
.video:hover .video__play { transform: scale(1.04); }
:root:lang(en) .video__lang { display: none; }
@media (max-width: 560px) {
  .video__play { gap: 8px; padding-block: 4px; padding-inline: 4px 14px; font-size: 13px; }
  .video__play i { width: 32px; height: 32px; }
  .video__play .icon { width: 15px; height: 15px; }
}
@media (prefers-reduced-motion: reduce) { .video__play { transition: none; } }

/* ───── Freedom: the same data, as many ways as people ask ───── */
.freedom { padding-block: clamp(72px, 10vw, 128px); }
.styles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 36px 28px; }
.style { display: grid; gap: 12px; justify-items: start; align-content: start; }
.style q { font: 650 17px/1.35 var(--font-text); }
.style small { font: 500 14px/20px var(--font-text); color: var(--ink-3); }
.style .wgt { box-shadow: 0 10px 30px rgb(26 20 32 / .18); }
.style--you { display: grid; gap: 6px; width: 280px; max-width: 100%; height: 132px; align-content: center; justify-items: start; padding: 22px; min-height: 132px; border-radius: 22px; border: 2px dashed var(--line-strong); }
.style--you b { font: 750 20px/1.2 var(--font-display); }
.style--you span { color: var(--ink-2); font-size: 15px; line-height: 1.45; }
.section__head--wide { max-width: 820px; }
.section__head { display: grid; gap: 16px; margin-bottom: clamp(36px, 5vw, 56px); max-width: 720px; }
.section { padding-block: clamp(64px, 9vw, 120px); }

/* Gallery: the one dark band. Same stage colours in both themes, like the app's widget stage. */
.gallery { background: radial-gradient(90% 70% at 15% 0%, #5B5064 0%, #2C2632 60%, #1C1720 100%); color: #F4EFF6; }
.gallery .eyebrow { color: #FF8DB4; }
.gallery .body-2 { color: #CFC6D6; }
.board { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 40px 28px; align-items: start; }
.tile { display: grid; gap: 14px; justify-items: start; }
.tile figcaption { display: grid; gap: 6px; max-width: 34ch; }
.tile q { font: 600 16px/1.4 var(--font-text); color: #fff; }
.tile small { font: 500 13px/18px var(--font-text); color: #B7ADBE; }
.tile small b { font-weight: 700; color: #E3DAE9; }
.tile--pair { display: flex; gap: 16px; }
/* The way out to the gallery: every tile above is ours, the gallery is everyone's. */
.board__more { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px;
  margin-top: clamp(48px, 7vw, 80px); padding-top: clamp(28px, 4vw, 40px); border-top: 1px solid rgb(255 255 255 / .14); }
.board__more > div { display: grid; gap: 6px; }
.board__more h3 { font: 750 clamp(22px, 2.6vw, 28px)/1.2 var(--font-display); letter-spacing: -.01em; color: #fff; }
.board__more p { font-size: 16px; color: #CFC6D6; }
[dir="rtl"] .board__more .icon { transform: scaleX(-1); }

/* Data + privacy */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.split__copy { display: grid; gap: 22px; }
.sources { display: flex; flex-wrap: wrap; gap: 8px; }
.sources li { list-style: none; display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding-inline: 8px 14px; border-radius: var(--r-pill); background: var(--surface-2); font: 600 14px/1 var(--font-text); }
.sources li i { width: 22px; height: 22px; border-radius: 7px; flex: none; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .18); }
.sources { padding: 0; }
.sheet { width: min(100%, 420px); justify-self: center; display: grid; gap: 16px; padding: 22px 22px 20px; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow); }
.sheet__grip { justify-self: center; width: 36px; height: 4px; border-radius: 2px; background: var(--line-strong); margin-top: -8px; }
.sheet__head { display: flex; align-items: center; gap: 12px; }
.sheet__head i { width: 40px; height: 40px; border-radius: 12px; flex: none; background: conic-gradient(#EA4335 0 25%, #FBBC04 0 50%, #34A853 0 75%, #4285F4 0); }
.sheet__title { font: 700 20px/1.2 var(--font-display); }
.reads { display: grid; gap: 2px; padding: 0; }
.reads li { list-style: none; display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--line); font: 400 15px/21px var(--font-text); }
.reads li:last-child { border-bottom: 0; }
.box { width: 22px; height: 22px; flex: none; margin-top: 1px; border-radius: 7px; display: grid; place-items: center; background: var(--pink); color: #fff; }
.box .icon { width: 15px; height: 15px; stroke-width: 3; }
.reads .no { color: var(--ink-2); }
.reads .no .box { background: none; box-shadow: inset 0 0 0 2px var(--line-strong); color: var(--ink-3); }
.sheet .btn { width: 100%; }

.promises { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 48px); margin-top: clamp(56px, 7vw, 88px); padding-top: clamp(32px, 4vw, 44px); border-top: 1px solid var(--line); }
@media (max-width: 800px) { .promises { grid-template-columns: 1fr; } }
.promise { display: grid; gap: 10px; align-content: start; }
.promise > .icon { width: 28px; height: 28px; color: var(--pink-ink); }
.promise p { color: var(--ink-2); }

/* Keeps working */
.states { display: grid; gap: 18px; justify-items: center; padding: clamp(24px, 4vw, 40px); border-radius: var(--r-lg); background: radial-gradient(120% 90% at 20% 0%, var(--stage-a), var(--stage-b)); }
.states__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
.state { display: grid; gap: 8px; justify-items: center; }
.state > span { font: 600 13px/16px var(--font-text); color: #E3DAE9; }
.notif { width: min(100%, 360px); display: grid; grid-template-columns: 34px 1fr; gap: 2px 12px; padding: 14px 16px; border-radius: 22px; background: #FEF7FF; color: #1C1B1F; font-family: Roboto, system-ui, sans-serif; box-shadow: 0 8px 24px rgb(0 0 0 / .3); }
.notif__icon { grid-row: 1 / span 3; width: 34px; height: 34px; border-radius: 50%; background: #FF4F8B; color: #fff; display: grid; place-items: center; }
.notif__icon .icon { width: 20px; height: 20px; }
.notif__app { font: 400 12px/16px Roboto, system-ui, sans-serif; color: #49454F; }
.notif__title { font: 500 15px/20px Roboto, system-ui, sans-serif; }
.notif__text { font: 400 14px/20px Roboto, system-ui, sans-serif; color: #49454F; }
.facts { display: grid; gap: 18px; padding: 0; }
.facts li { list-style: none; display: grid; grid-template-columns: 28px 1fr; gap: 12px; }
.facts .icon { color: var(--pink-ink); margin-top: 2px; }
.facts b { display: block; font: 650 17px/1.35 var(--font-text); }
.facts span { color: var(--ink-2); }

/* FAQ */
.faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
@media (max-width: 900px) { .faq { grid-template-columns: 1fr; } }
.qa { border-top: 1px solid var(--line); }
.qa details { border-bottom: 1px solid var(--line); }
.qa summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 14px 0; cursor: pointer; list-style: none; font: 650 18px/1.35 var(--font-text); }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: ""; width: 12px; height: 12px; flex: none; margin-inline-end: 6px; border-right: 2.5px solid var(--ink-2); border-bottom: 2.5px solid var(--ink-2); transform: rotate(45deg) translateY(-3px); transition: transform .2s var(--ease); }
.qa details[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.qa details p { padding: 0 0 22px; color: var(--ink-2); max-width: 60ch; }

/* Closing band: the page's one big yellow thing */
.closer { background: var(--yellow); color: var(--on-yellow); }
.closer__inner { display: grid; justify-items: center; text-align: center; gap: 24px; padding-block: clamp(64px, 9vw, 112px); }
.closer .h-section { max-width: 16ch; }
.closer p { max-width: 44ch; color: #4A3B12; }
.closer .mark { width: 112px; height: 112px; margin-block: -24px -16px; }

.footer { padding-block: 36px 44px; border-top: 1px solid var(--line); }
.footer__row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.footer__row .brand { font-size: 20px; }
.footer__row .brand svg { width: 28px; height: 28px; }
.footer nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.footer nav a { color: var(--ink-2); text-decoration: none; font: 500 15px/1 var(--font-text); padding: 6px 0; }
.footer nav a:hover { color: var(--ink); }
.footer__meta { margin-inline-start: auto; font: 500 14px/20px var(--font-text); color: var(--ink-3); }

/* ───── Sample widgets. These are the user's widgets, so they keep their own colours in both themes.
   Same as design/mobile (wiggy.css .wgt, docs.css .wx-*), sized at real launcher cells. ───── */
.wgt { border-radius: 22px; overflow: hidden; position: relative; color: var(--wgt-ink, #fff); background: var(--wgt-bg, #222);
  box-shadow: 0 6px 18px rgb(0 0 0 / .25); font-family: var(--font-text); line-height: normal; flex: none; }
.wgt--2x2 { width: 132px; height: 132px; } .wgt--4x2 { width: 280px; max-width: 100%; height: 132px; }
.wgt.is-stale { filter: saturate(.55); opacity: .82; }
.wgt__stale { position: absolute; inset-inline-end: 10px; top: 10px; display: flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 999px; background: rgb(0 0 0 / .55); color: #fff; font: 600 10.5px/14px var(--font-text); }

.wx-rain { --wgt-bg: #0F2C4C; --wgt-ink: #EAF6FF; display: grid; grid-template-columns: 92px 1fr; gap: 12px; padding: 14px 16px 12px; }
.wx-rain .k { font: 700 10.5px/13px var(--font-text); letter-spacing: .08em; text-transform: uppercase; color: #9CC7E8; }
.wx-rain .v { font: 800 40px/40px var(--font-display); margin-top: 10px; font-variant-numeric: tabular-nums; }
.wx-rain .v small { font: 700 15px/1 var(--font-text); margin-inline-start: 2px; color: #9CC7E8; }
.wx-rain .s { font: 500 11.5px/15px var(--font-text); color: #CFE6F7; margin-top: 6px; }
.wx-bars { display: flex; align-items: flex-end; gap: 6px; height: 100%; }
.wx-bars div { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.wx-bars i { display: block; width: 100%; height: var(--h); border-radius: 5px; background: #7FD4FF; }
.wx-bars .hi i { background: #FFB84D; }
.wx-bars span { font: 700 10px/12px var(--font-text); color: #9CC7E8; }
.wx-bars .hi span { color: #FFB84D; }

.wx-trip { --wgt-bg: #1E6B5C; --wgt-ink: #F2FFF8; padding: 14px; display: flex; flex-direction: column; justify-content: space-between; }
.wx-trip .k { font: 700 10.5px/13px var(--font-text); letter-spacing: .08em; text-transform: uppercase; color: #A6E3CF; }
.wx-trip .v { font: 800 52px/48px var(--font-display); font-variant-numeric: tabular-nums; }
.wx-trip .s { font: 600 12px/15px var(--font-text); color: #D5F5EA; }
/* Poster style: the Lisbon countdown made from a travel-poster photo */
.wx-poster { --wgt-bg: #F2C14E; --wgt-ink: #1B2A2F; padding: 14px 16px; display: grid; grid-template-columns: 1fr auto; align-items: end;
  background: linear-gradient(180deg, transparent 58%, #1E6B5C 58% 76%, #E4572E 76%), radial-gradient(circle at 78% 30%, #FFF1C9 0 16%, transparent 17%), #F2C14E; }
.wx-poster .k { grid-column: 1 / -1; align-self: start; font: 800 13px/16px var(--font-display); letter-spacing: .14em; text-transform: uppercase; }
.wx-poster .v { font: 800 56px/48px var(--font-display); letter-spacing: -.03em; color: #FFF6E0; text-shadow: 0 2px 0 #1B2A2F; font-variant-numeric: tabular-nums; }
.wx-poster .s { font: 700 12px/15px var(--font-text); color: #FFF6E0; text-align: end; padding-bottom: 3px; }

.wx-prs { --wgt-bg: #F4F1FF; --wgt-ink: #221A45; padding: 12px 13px; display: grid; gap: 6px; align-content: start; }
.wx-prs .k { font: 700 10.5px/13px var(--font-text); letter-spacing: .08em; text-transform: uppercase; color: #6B5FB0; display: flex; justify-content: space-between; }
.wx-prs .r { display: flex; align-items: center; gap: 8px; font: 600 12.5px/16px var(--font-text); white-space: nowrap; overflow: hidden; }
.wx-prs .r i { width: 8px; height: 8px; border-radius: 50%; background: #6B5FB0; flex: none; }
.wx-prs .r.warn i { background: #E0663A; }

.wx-cal { --wgt-bg: #FFF7EC; --wgt-ink: #3A2412; padding: 14px 16px; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-content: start; }
.wx-cal .k { grid-column: 1 / -1; font: 700 10.5px/13px var(--font-text); letter-spacing: .08em; text-transform: uppercase; color: #B0642A; }
.wx-cal .t { font: 800 24px/28px var(--font-display); }
.wx-cal .in { font: 800 24px/28px var(--font-display); color: #D9531E; font-variant-numeric: tabular-nums; text-align: right; }
.wx-cal .s { font: 600 12px/16px var(--font-text); color: #7A5234; }
.wx-cal .n { grid-column: 1 / -1; margin-top: 8px; padding-top: 8px; border-top: 1px solid #F0DCC4; font: 600 12px/16px var(--font-text); color: #7A5234; display: flex; justify-content: space-between; }

.wx-classic { --wgt-bg: #3B1F2B; --wgt-ink: #F6EEDF; padding: 13px 16px; display: grid; align-content: start; gap: 1px; }
.wx-classic .k { font: 700 10.5px/13px var(--font-text); letter-spacing: .08em; text-transform: uppercase; color: #D9A441; margin-bottom: 5px; }
.wx-classic .c { font: 800 26px/28px var(--font-display); }
.wx-classic .w { font: 600 13px/17px var(--font-text); color: #F6EEDF; }
.wx-classic .p { font: 500 12px/16px var(--font-text); color: #CBB9A8; }
.wx-classic .why { margin-top: 7px; font: 600 11px/14px var(--font-text); color: #D9A441; }

.wx-visits { --wgt-bg: #FFFFFF; --wgt-ink: #202124; padding: 12px 13px 0; display: grid; grid-template-rows: auto auto 1fr; }
.wx-visits .k { font: 700 10.5px/13px var(--font-text); letter-spacing: .08em; text-transform: uppercase; color: #5F6368; }
.wx-visits .v { font: 800 32px/34px var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.wx-visits .d { font: 700 11.5px/14px var(--font-text); color: #188038; }
.wx-visits svg { align-self: end; width: calc(100% + 26px); margin-inline-start: -13px; height: 44px; display: block; }

.wx-moon { --wgt-bg: #0B0D1E; --wgt-ink: #EDE9FF; padding: 12px 13px; display: grid; grid-template-rows: auto 1fr auto; justify-items: start; }
.wx-moon .k { font: 700 10.5px/13px var(--font-text); letter-spacing: .08em; text-transform: uppercase; color: #9D97C9; }
.wx-moon .orb { align-self: center; justify-self: center; width: 54px; height: 54px; border-radius: 50%; background: #F3EBC8; box-shadow: inset -20px 0 0 0 #0B0D1E, 0 0 24px rgb(243 235 200 / .25); }
.wx-moon .s { font: 600 12px/15px var(--font-text); color: #CFC9F2; }

/* Styles from the "same rain, your way" row */
.wx-riso { --wgt-bg: #F7EFE3; --wgt-ink: #0078BF; padding: 12px 16px; display: grid; grid-template-columns: 96px 1fr; gap: 12px; }
.wx-riso .k { font: 800 12px/14px var(--font-display); letter-spacing: .12em; text-transform: uppercase; }
.wx-riso .v { font: 800 44px/40px var(--font-display); color: #FF48B0; mix-blend-mode: multiply; margin-top: 12px; text-shadow: 2px 2px 0 rgb(0 120 191 / .55); }
.wx-riso .s { font: 700 11px/14px var(--font-text); margin-top: 6px; }
.wx-riso .wx-bars i { background: #0078BF; border-radius: 0; opacity: .85; box-shadow: 3px -3px 0 rgb(255 72 176 / .7); }
.wx-riso .wx-bars .hi i { background: #FF48B0; box-shadow: 3px -3px 0 rgb(0 120 191 / .6); }
.wx-riso .wx-bars span, .wx-riso .wx-bars .hi span { color: #0078BF; }
.wx-plain { --wgt-bg: #111014; --wgt-ink: #FFFFFF; padding: 16px 18px; display: flex; flex-direction: column; justify-content: space-between; }
.wx-plain .t { font: 780 27px/29px var(--font-display); letter-spacing: -.02em; }
.wx-plain .t em { font-style: normal; color: #FFB84D; }
.wx-plain .s { font: 500 12px/15px var(--font-text); color: #A9A2AE; }
.wx-pixel { --wgt-bg: #9BBC0F; --wgt-ink: #0F380F; padding: 10px 12px; display: grid; grid-template-rows: auto 1fr; gap: 6px; font-family: ui-monospace, "SF Mono", Menlo, monospace; image-rendering: pixelated;
  box-shadow: inset 0 0 0 4px #8BAC0F, 0 6px 18px rgb(0 0 0 / .25); }
.wx-pixel .k { font: 800 11px/13px ui-monospace, Menlo, monospace; letter-spacing: .06em; display: flex; justify-content: space-between; }
.wx-pixel .wx-bars { gap: 5px; }
.wx-pixel .wx-bars i { border-radius: 0; background: repeating-linear-gradient(0deg, #306230 0 6px, transparent 6px 8px); }
.wx-pixel .wx-bars .hi i { background: repeating-linear-gradient(0deg, #0F380F 0 6px, transparent 6px 8px); }
.wx-pixel .wx-bars span, .wx-pixel .wx-bars .hi span { color: #0F380F; font: 800 10px/12px ui-monospace, Menlo, monospace; }
.wx-note { --wgt-bg: #FFE66D; --wgt-ink: #3B2F14; padding: 14px 16px; border-radius: 6px 6px 22px 6px; transform: rotate(-2deg);
  font: 600 20px/22px var(--font-hand); display: grid; align-content: center; gap: 4px; }
.wx-note b { font-size: 26px; font-weight: 700; color: #C0342B; }
/* Near-black widgets need an edge on the dark page */
.wx-plain, .wx-moon { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14), 0 6px 18px rgb(0 0 0 / .25); }

/* ───── Language menu ───── */
.lang { position: relative; }
.lang summary { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding-inline: 10px 12px; border-radius: var(--r-pill); list-style: none; cursor: pointer;
  color: var(--ink-2); font: 600 15px/1 var(--font-text); }
.lang summary::-webkit-details-marker { display: none; }
.lang summary:hover, .lang[open] summary { background: var(--surface-2); color: var(--ink); }
.lang summary .icon { width: 20px; height: 20px; }
.lang__menu { position: absolute; inset-inline-end: 0; top: calc(100% + 8px); z-index: 30; display: grid; min-width: 200px; padding: 6px; border-radius: var(--r-md);
  background: var(--surface); box-shadow: var(--shadow); }
.lang__menu a { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 42px; padding-inline: 12px; border-radius: var(--r-sm);
  color: var(--ink); text-decoration: none; font: 500 16px/1 system-ui, sans-serif; }
.lang__menu a:hover { background: var(--surface-2); }
.lang__menu a[aria-current="true"] { font-weight: 700; }
.lang__menu a[aria-current="true"]::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--pink); }
@media (max-width: 760px) { .lang__now { display: none; } .lang summary { padding-inline: 10px; } }

/* ───── Languages ─────
   Each stack puts the Latin brand face first, so "Wiggy", numbers and Latin words keep the brand look,
   and the script's own face draws everything the Latin face doesn't have.
   Non-Latin faces are Noto (what Android draws these scripts with), so the site matches the app.
   Handwriting gets a native face per script: a Latin script font can't fake Hangul or Arabic.
   The engine sets lang and dir on <html>; the rules below only read them. */

/* Latin languages: same faces. Long words (German, French) hyphenate in running text, never in headlines. */
:root:is(:lang(de), :lang(fr), :lang(es), :lang(pt)) :is(p, dd, .facts span, .qa p) { hyphens: auto; }
:root:is(:lang(de), :lang(fr)) :is(.h-hero, .h-section, .beat h3) { overflow-wrap: break-word; }

/* Quotation marks follow the language */
q { quotes: "“" "”" "‘" "’"; }
:root:lang(de) q { quotes: "„" "“" "‚" "‘"; }
:root:lang(fr) q { quotes: "«\202F" "\202F»" "“" "”"; }
:root:lang(ja) q { quotes: "「" "」" "『" "』"; }
:root:lang(ar) q { quotes: "«" "»" "“" "”"; }

/* Korean, Japanese, Chinese */
:root:lang(ko) { --font-display: "Bricolage Grotesque", "Noto Sans KR", sans-serif; --font-text: "Figtree", "Noto Sans KR", sans-serif; --font-hand: "Nanum Pen Script", cursive; }
:root:lang(ja) { --font-display: "Bricolage Grotesque", "Noto Sans JP", sans-serif; --font-text: "Figtree", "Noto Sans JP", sans-serif; --font-hand: "Yomogi", cursive; }
:root:lang(zh) { --font-display: "Bricolage Grotesque", "Noto Sans SC", sans-serif; --font-text: "Figtree", "Noto Sans SC", sans-serif; --font-hand: "Long Cang", cursive; }
/* Korean breaks between words, not inside them. Japanese breaks between phrases where the browser can. */
:root:lang(ko) { word-break: keep-all; overflow-wrap: break-word; }
:root:lang(ja) { word-break: auto-phrase; line-break: strict; }
:root:lang(zh) { line-break: strict; }
/* CJK glyphs fill the whole em, so headlines come down a size, open up and lose the tight tracking */
:root:is(:lang(ko), :lang(ja), :lang(zh)) .h-hero { font-size: clamp(36px, 6vw, 70px); line-height: 1.2; letter-spacing: -.01em; }
:root:is(:lang(ko), :lang(ja), :lang(zh)) .hero .h-hero { line-height: 1.2; }
:root:is(:lang(ko), :lang(ja), :lang(zh)) :is(.h-section, .beat h3) { font-size: clamp(28px, 3.8vw, 42px); line-height: 1.25; letter-spacing: -.01em; }
:root:is(:lang(ko), :lang(ja), :lang(zh)) .eyebrow { letter-spacing: .04em; }
:root:is(:lang(ko), :lang(ja), :lang(zh)) body { line-height: 1.7; }
/* Handwriting faces here come in one weight; don't let the browser fake bold */
:root:is(:lang(ko), :lang(ja), :lang(zh)) .wx-note { font-synthesis: none; font-weight: 400; }
:root:is(:lang(ko), :lang(ja), :lang(zh)) .wx-note b { font-weight: 400; }
:root:lang(ko) .wx-note { font-size: 24px; line-height: 24px; }
:root:lang(ko) .wx-note b { font-size: 30px; }
:root:lang(ja) .wx-note, :root:lang(zh) .wx-note { font-size: 17px; line-height: 22px; }
:root:lang(ja) .wx-note b, :root:lang(zh) .wx-note b { font-size: 22px; }

/* Arabic: right to left, never tracked (spacing breaks the joins), taller lines for the dots and marks */
:root:lang(ar) { --font-display: "Bricolage Grotesque", "Noto Kufi Arabic", sans-serif; --font-text: "Figtree", "Noto Sans Arabic", sans-serif; --font-hand: "Aref Ruqaa", serif; }
:root:lang(ar) :not(.brand, .brand *) { letter-spacing: 0 !important; }
:root:lang(ar) body { line-height: 1.8; }
:root:lang(ar) .h-hero, :root:lang(ar) .hero .h-hero { font-size: clamp(36px, 6vw, 70px); line-height: 1.35; }
:root:lang(ar) :is(.h-section, .beat h3) { font-size: clamp(28px, 3.8vw, 42px); line-height: 1.4; }
:root:lang(ar) .wx-note { font-size: 19px; line-height: 26px; }
:root:lang(ar) .wx-note b { font-size: 22px; }
/* The sticky note's folded corner mirrors with the text */
[dir="rtl"] .wx-note { border-radius: 6px 6px 6px 22px; transform: rotate(2deg); }

/* Arabic's plain widget: the Kufi line needs more height, so the type steps down */
:root:lang(ar) .wx-plain .t { font-size: 22px; line-height: 32px; }
/* The poster's sun sits opposite the label, so it moves to the left in right-to-left pages */
[dir="rtl"] .wx-poster { background: linear-gradient(180deg, transparent 58%, #1E6B5C 58% 76%, #E4572E 76%), radial-gradient(circle at 22% 30%, #FFF1C9 0 16%, transparent 17%), #F2C14E; }

/* ───── Production additions (not in the design file) ───── */
/* Language suggestion: shown once, in the visitor's language, instead of redirecting. */
.suggest { position: fixed; inset-inline: 0; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 40; width: max-content; max-width: calc(100% - 32px); margin-inline: auto;
  display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: var(--r-pill); background: var(--surface); box-shadow: var(--shadow), inset 0 0 0 1px var(--line); }
.suggest__go { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding-inline: 14px 16px; border-radius: var(--r-pill); background: var(--yellow); color: var(--on-yellow);
  font: 650 15px/1 var(--font-text); text-decoration: none; }
.suggest__go:hover { background: var(--yellow-press); }
.suggest__go .icon { width: 20px; height: 20px; }
.suggest__x { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--ink-2); cursor: pointer; }
.suggest__x:hover { background: var(--surface-2); color: var(--ink); }
.suggest__x .icon { width: 18px; height: 18px; }

/* 404 */
.nav__cta { margin-inline-start: auto; }
.lost__inner { display: grid; justify-items: center; text-align: center; gap: 22px; padding-block: clamp(56px, 10vw, 128px); }
.lost .wgt { margin-bottom: 18px; transform: rotate(-1.5deg); box-shadow: var(--shadow); }

/* Legal pages (src/legal/*.html): one readable column, a contents list, numbered sections. */
.legal__inner { padding-block: clamp(40px, 7vw, 88px) clamp(56px, 9vw, 112px); }
.legal article { max-width: 70ch; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; font-size: 17px; line-height: 1.65; }
.legal h1 { font: 780 clamp(36px, 5vw, 56px)/1.02 var(--font-display); letter-spacing: -.02em; text-wrap: balance; }
.legal__updated { font: 500 15px/20px var(--font-text); color: var(--ink-3); margin-top: -4px; }
.legal__summary { background: var(--yellow-soft); border-radius: var(--r-card); padding: 20px 24px; display: grid; gap: 10px; }
.legal .legal__summary h2 { font: 700 13px/16px var(--font-text); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2); margin: 0; }
.legal .legal__summary ul { margin: 0; padding-inline-start: 1.1em; display: grid; gap: 6px; }
.legal__toc { border-block: 1px solid var(--line); padding-block: 16px; }
.legal .legal__toc ol { display: block; margin: 0; padding-inline-start: 1.4em; columns: 2 16ch; column-gap: 32px; }
.legal__toc li { break-inside: avoid; padding-block: 3px; }
.legal__toc a { color: var(--ink-2); text-decoration: none; }
.legal__toc a:hover { color: var(--ink); text-decoration: underline; }
.legal h2 { font: 720 clamp(22px, 2.4vw, 26px)/1.2 var(--font-display); letter-spacing: -.01em; margin-top: 20px; scroll-margin-top: 84px; text-wrap: balance; }
.legal h3 { font: 700 18px/1.3 var(--font-text); margin-top: 6px; }
.legal p, .legal ul, .legal ol, .legal table { margin: 0; color: var(--ink); text-wrap: pretty; }
.legal ul, .legal ol { padding-inline-start: 1.3em; display: grid; gap: 6px; }
.legal__table { overflow-x: auto; }
.legal table { border-collapse: collapse; width: 100%; font-size: 15px; line-height: 1.5; }
.legal th, .legal td { text-align: start; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.legal th { font-weight: 700; color: var(--ink-2); background: var(--surface-2); }
.legal .todo { background: var(--warn-soft); color: var(--warn); border-radius: 6px; padding: 0 5px; font-weight: 600; }
.footer nav a[aria-current="page"] { color: var(--ink); }