/* runningbuddy.app. Brand: the app icon's lime and ink, the app's Volt cobalt; a warm paper ground so the lime
   stays a highlight (hero and the closing call) instead of the whole page. */
:root {
  --lime: #CBFF2F;
  --ink: #0D0D12;
  --paper: #F4F2EA;
  --ivory: #FFFDFA;
  --cobalt: #3430ED;
  --citron: #F5F58A;
  --pink: #FF4FA3;
  --muted: rgba(13, 13, 18, 0.68);
  --line: rgba(13, 13, 18, 0.09);
  --radius: 28px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-size: 18px;
  line-height: 1.5;
  overflow-x: clip;
}
/* height: auto keeps every picture's own proportions (width and height attributes are only for layout). */
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 3px; border-radius: 8px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { display: block; width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.brand-icon { fill: currentColor; stroke: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { max-width: 1160px; margin: 0 auto; padding-inline: 20px; }
.eyebrow { display: inline-block; font-weight: 800; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; background: var(--ink); color: var(--lime); }
h1, h2, h3 { margin: 0; letter-spacing: -0.035em; font-weight: 900; }
h2 { font-size: clamp(38px, 6vw, 72px); line-height: 0.98; margin: 16px 0 20px; max-width: 13em; }
.lede { font-size: clamp(19px, 2vw, 22px); color: var(--muted); max-width: 36em; margin: 0; }
.section { padding-block: clamp(64px, 9vw, 120px); }
.plus { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: 0.04em; padding: 3px 8px; border-radius: 999px; background: var(--cobalt); color: #fff; vertical-align: middle; }

/* Header */
.top { position: sticky; top: 0; z-index: 50; background: var(--lime); transition: background 0.3s, box-shadow 0.3s; }
.top.scrolled { background: rgba(244, 242, 234, 0.86); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 1px 0 var(--line); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 14px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 900; font-size: 20px; letter-spacing: -0.02em; text-decoration: none; white-space: nowrap; }
.brand img { width: 38px; height: 38px; border-radius: 10px; }
.nav { display: flex; align-items: center; gap: 20px; font-weight: 700; font-size: 16px; }
.nav > a { text-decoration: none; }
.nav > a:not(.button):hover { text-decoration: underline; text-underline-offset: 4px; }

.lang-menu { position: relative; }
.lang-menu summary { list-style: none; display: flex; align-items: center; gap: 6px; cursor: pointer; padding: 8px 12px; border-radius: 999px; box-shadow: inset 0 0 0 2px var(--ink); font-weight: 800; font-size: 14px; }
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu summary .icon { font-size: 18px; }
.lang-menu ul { position: absolute; inset-inline-end: 0; top: calc(100% + 10px); margin: 0; padding: 8px; list-style: none; background: var(--ivory); border-radius: 20px; box-shadow: 0 24px 50px -20px rgba(13, 13, 18, 0.45), 0 0 0 1px var(--line); display: grid; grid-template-columns: 1fr 1fr; gap: 2px; width: 320px; animation: pop 0.25s var(--spring); }
.lang-menu a { display: block; padding: 9px 12px; border-radius: 12px; text-decoration: none; font-weight: 600; font-size: 15px; }
.lang-menu a:hover { background: var(--paper); }
.lang-menu a[aria-current] { background: var(--lime); font-weight: 800; }

.button { display: inline-flex; align-items: center; gap: 8px; padding: 16px 26px; border-radius: 999px; font-weight: 800; text-decoration: none; border: 0; transition: transform 0.25s var(--spring), box-shadow 0.25s; }
.button:hover { transform: translateY(-2px) scale(1.02); }
.button:active { transform: scale(0.97); }
.button.primary { background: var(--ink); color: var(--lime); box-shadow: 0 10px 30px -12px rgba(13, 13, 18, 0.6); }
.button.secondary { background: transparent; box-shadow: inset 0 0 0 2px var(--ink); }
.button.small { padding: 10px 18px; font-size: 15px; }

/* Hero */
.hero-band { background: var(--lime); border-radius: 0 0 56px 56px; padding-bottom: 72px; position: relative; }
.hero { display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: 24px; padding-block: 16px 24px; }
.hero h1 { font-size: clamp(60px, 10vw, 132px); line-height: 0.9; letter-spacing: -0.05em; margin: 22px 0 24px; }
.hero h1 .word { display: inline-block; }
.hero .lede { margin-bottom: 32px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.facts { display: flex; flex-wrap: wrap; gap: 10px 16px; margin: 28px 0 0; padding: 0; list-style: none; font-weight: 700; font-size: 15px; }
.facts li { display: flex; align-items: center; gap: 8px; }
.fact-icon { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 8px; background: rgba(255, 253, 250, 0.66); color: var(--cobalt); box-shadow: inset 0 0 0 1px rgba(13, 13, 18, 0.08), 0 2px 3px -2px rgba(13, 13, 18, 0.12); }
.facts .icon { width: 17px; height: 17px; stroke-width: 1.8; }
.fact-icon--health { color: #DA315F; }
.fact-icon--health .icon { fill: currentColor; stroke: none; }
.fact-icon--watch { color: var(--ink); }

.stage { position: relative; aspect-ratio: 1; width: 100%; max-width: 540px; justify-self: center; }
.blob { position: absolute; inset: 7%; border-radius: 42% 58% 55% 45% / 48% 42% 58% 52%; background: var(--ivory); animation: morph 14s ease-in-out infinite; }
.buddy { position: absolute; inset: 0; padding: 0; border: 0; background: none; cursor: pointer; animation: bob 4.2s ease-in-out infinite; transform-origin: 50% 90%; -webkit-tap-highlight-color: transparent; }
.buddy img { position: absolute; inset: 6%; width: 88%; height: 88%; object-fit: contain; pointer-events: none; user-select: none; }
.buddy.hop { animation: hop 0.7s var(--spring); }
.bubble { position: absolute; inset-inline-start: -2%; top: 6%; max-width: 240px; margin: 0; padding: 14px 18px; border-radius: 22px 22px 22px 6px; background: var(--ink); color: var(--ivory); font-weight: 700; font-size: 16px; line-height: 1.3; box-shadow: 0 16px 40px -16px rgba(13, 13, 18, 0.6); transition: opacity 0.3s, transform 0.4s var(--spring); }
[dir=rtl] .bubble { border-radius: 22px 22px 6px 22px; }
.bubble.swap { opacity: 0; transform: translateY(6px) scale(0.96); }
.chip { position: absolute; padding: 10px 14px; border-radius: 16px; background: #fff; box-shadow: 0 14px 34px -18px rgba(13, 13, 18, 0.45); font-weight: 800; font-size: 15px; line-height: 1.2; animation: float 6s ease-in-out infinite; }
.chip small { display: block; font-weight: 600; font-size: 12px; color: var(--muted); }
.chip.c1 { inset-inline-end: 0; top: 24%; }
.chip.c2 { inset-inline-start: 0; bottom: 18%; animation-delay: -2s; }
.chip.c3 { inset-inline-end: 6%; bottom: 4%; animation-delay: -4s; background: var(--cobalt); color: #fff; }
.chip.c3 small { color: rgba(255, 255, 255, 0.75); }

/* Marquee: wider than the screen and tucked under the hero's rounded edge, so no corner ever shows. */
.marquee { position: relative; z-index: 2; width: 112vw; margin-top: -36px; margin-inline-start: -6vw; background: var(--ink); color: var(--lime); overflow: hidden; padding-block: 18px; transform: rotate(-2deg); box-shadow: 0 20px 40px -24px rgba(13, 13, 18, 0.6); }
.marquee .track { display: flex; width: max-content; animation: marquee 42s linear infinite; }
[dir=rtl] .marquee .track { animation-name: marquee-rtl; }
.marquee span { display: inline-flex; align-items: center; font-weight: 900; font-size: clamp(22px, 3vw, 32px); letter-spacing: -0.02em; white-space: nowrap; padding-inline-end: 40px; }
.marquee span::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--pink); margin-inline-start: 40px; }

/* Panels */
.panel { background: var(--ivory); border-radius: 44px; box-shadow: 0 1px 0 var(--line); }
.panel.ink { background: var(--ink); color: var(--ivory); }
.panel.ink .lede { color: rgba(255, 253, 250, 0.72); }
.panel.ink .eyebrow { background: var(--lime); color: var(--ink); }
.panel.cobalt { background: var(--cobalt); color: #fff; }
.panel.cobalt .lede { color: rgba(255, 255, 255, 0.8); }
.panel.cobalt .eyebrow { background: var(--lime); color: var(--ink); }

/* Plan explorer */
.plan { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: center; }
.planner { background: #fff; border: 1px solid var(--line); border-radius: 32px; padding: 28px; box-shadow: 0 30px 60px -40px rgba(13, 13, 18, 0.35); }
.planner .head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.planner .week { font-weight: 900; font-size: 44px; letter-spacing: -0.03em; line-height: 1; }
.planner .total { font-weight: 800; color: var(--cobalt); }
.planner .session { margin: 8px 0 22px; color: var(--muted); font-weight: 600; }
.bars { display: flex; gap: 3px; height: 64px; align-items: stretch; }
.bars i { display: block; border-radius: 8px; transition: flex-grow 0.6s var(--ease), background 0.4s; }
.bars .run, .legend b.run { background: var(--cobalt); }
.bars .walk, .legend b.walk { background: var(--citron); }
.legend { display: flex; gap: 18px; margin: 14px 0 22px; font-size: 14px; font-weight: 700; color: var(--muted); }
.legend b { display: inline-block; width: 12px; height: 12px; border-radius: 4px; margin-inline-end: 6px; vertical-align: -1px; }
input[type=range] { width: 100%; accent-color: var(--ink); height: 32px; cursor: grab; }
.ticks { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; color: var(--muted); padding-inline: 4px; }
.planner .note { margin: 18px 0 0; font-size: 15px; color: var(--muted); }

/* Phones */
.phone { position: relative; width: min(330px, 78vw); aspect-ratio: 640 / 1392; border-radius: 52px; padding: 11px; background: #1b1b22; box-shadow: 0 0 0 2px #2c2c36, 0 50px 90px -40px rgba(0, 0, 0, 0.9); justify-self: center; }
.phone video, .phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 42px; background: var(--cobalt); }
.phone::before { content: ""; position: absolute; top: 22px; left: 50%; width: 30%; height: 26px; transform: translateX(-50%); background: #000; border-radius: 20px; z-index: 2; }
.phone.light::before { display: none; }
.phone img { transition: opacity 0.35s var(--ease); }
.phone img.fading { opacity: 0; }

/* App tour */
.tour { display: grid; grid-template-columns: 1fr auto; gap: 56px; align-items: center; }
.tabs { display: grid; gap: 6px; margin-top: 28px; }
.tab { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center; text-align: start; padding: 12px 16px; border-radius: 20px; border: 0; background: transparent; color: inherit; transition: background 0.3s; position: relative; overflow: hidden; }
.tab .ico { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.08); font-size: 22px; transition: background 0.3s, color 0.3s; }
.tab strong { display: block; font-size: 19px; letter-spacing: -0.01em; }
.tab span.t { display: block; font-size: 15px; color: rgba(255, 253, 250, 0.62); line-height: 1.35; }
.tab:hover { background: rgba(255, 255, 255, 0.05); }
.tab[aria-selected=true] { background: rgba(255, 255, 255, 0.1); }
.tab[aria-selected=true] .ico { background: var(--lime); color: var(--ink); }
.tab .progress { position: absolute; inset-inline-start: 0; bottom: 0; height: 3px; width: 0; background: var(--lime); }

/* Languages */
.langs { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; }
.lang-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.lang-chip { border: 0; padding: 10px 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); color: #fff; font-weight: 700; font-size: 16px; transition: background 0.25s, color 0.25s, transform 0.25s var(--spring); }
.lang-chip:hover { background: rgba(255, 255, 255, 0.22); transform: translateY(-2px); }
.lang-chip[aria-pressed=true] { background: var(--lime); color: var(--ink); }

/* Split sections */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.points { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 16px; }
.points li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; font-size: 17px; }
.points li b { display: block; font-size: 18px; }
.points li .dot { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--lime); color: var(--ink); font-size: 22px; }
.points li span.d { color: var(--muted); }
.panel.ink .points li span.d { color: rgba(255, 253, 250, 0.7); }
.shot-stack { position: relative; justify-self: center; }
.shot-stack .sticker { position: absolute; width: 52%; inset-inline-end: -26%; bottom: -6%; animation: float 7s ease-in-out infinite; }

/* Watch */
.watches { display: flex; justify-content: center; align-items: flex-end; gap: 18px; }
.watch { width: 32%; max-width: 190px; border-radius: 38px; padding: 8px; background: #1b1b22; box-shadow: 0 0 0 2px #2c2c36, 0 30px 50px -30px rgba(0, 0, 0, 0.9); }
.watch img { border-radius: 30px; width: 100%; }
.watch:nth-child(2) { transform: translateY(-28px); }

/* Members */
.members { display: grid; grid-template-columns: repeat(7, 1fr); gap: 14px; margin-top: 40px; }
.member { display: block; perspective: 900px; background: none; border: 0; padding: 0; text-align: center; }
.member .card { display: block; position: relative; aspect-ratio: 3 / 4; transform-style: preserve-3d; transition: transform 0.7s var(--spring); }
.member.flipped .card { transform: rotateY(180deg); }
.member .face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 24px; background: #fff; display: grid; place-items: center; padding: 8px; box-shadow: 0 0 0 1px var(--line); }
.member .face.back { transform: rotateY(180deg); background: var(--lime); }
.member .face img { width: 100%; height: 100%; object-fit: contain; }
.member b { display: block; margin-top: 10px; font-size: 15px; line-height: 1.2; }
.member small { display: block; font-size: 13px; color: var(--muted); }

/* Themes */
.themes { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.swatches { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.swatch { width: 54px; height: 54px; border-radius: 50%; border: 0; box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.6), 0 0 0 2px var(--line); transition: transform 0.3s var(--spring), box-shadow 0.3s; }
.swatch:hover { transform: scale(1.1); }
.swatch[aria-pressed=true] { box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.6), 0 0 0 3px var(--ink); transform: scale(1.12); }
.swatch-name { margin-top: 16px; font-weight: 800; min-height: 1.5em; }
.mock { --bg: #3430ED; --surface: #FFFDFA; --onbg: #fff; --onsurface: #191923; --hi: #F5F58A; justify-self: center; width: min(340px, 84vw); border-radius: 40px; padding: 26px 20px; background: var(--bg); color: var(--onbg); transition: background 0.5s var(--ease), color 0.5s; box-shadow: 0 40px 70px -40px rgba(13, 13, 18, 0.6); }
.mock .mtitle { font-weight: 900; font-size: 30px; letter-spacing: -0.03em; }
.mock .rings { display: flex; justify-content: space-around; margin: 18px 0; }
.mock svg { width: 78px; height: 78px; }
.mock .ring-track { stroke: color-mix(in srgb, var(--onbg) 20%, transparent); }
.mock .ring { stroke: var(--hi); transition: stroke 0.5s, stroke-dashoffset 1.2s var(--ease); }
.mock .rlabel { text-align: center; font-size: 12px; font-weight: 700; opacity: 0.8; margin-top: 4px; }
.mock .mcard { background: var(--surface); color: var(--onsurface); border-radius: 26px; padding: 18px; transition: background 0.5s, color 0.5s; }
.mock .mcard small { font-weight: 700; opacity: 0.6; }
.mock .mcard .big { font-weight: 900; font-size: 40px; letter-spacing: -0.03em; line-height: 1; margin: 4px 0; }
.mock .mcard .big span { font-size: 18px; opacity: 0.6; }
.mock .mbtn { margin-top: 14px; padding: 12px; border-radius: 999px; text-align: center; font-weight: 800; background: var(--bg); color: var(--onbg); transition: background 0.5s, color 0.5s; }

/* Share: a fan of real cards from the app */
.share { overflow: hidden; }
.fan { display: flex; justify-content: center; padding: 40px 20px 20px; }
.fan img { width: 220px; margin-inline: -18px; border-radius: 22px; box-shadow: 0 30px 50px -28px rgba(13, 13, 18, 0.7); transition: transform 0.45s var(--spring), margin 0.45s var(--spring); transform-origin: 50% 100%; }
.fan img:nth-child(1) { transform: rotate(-12deg) translateY(30px); }
.fan img:nth-child(2) { transform: rotate(-7deg) translateY(10px); }
.fan img:nth-child(3) { transform: rotate(-2deg); z-index: 1; }
.fan img:nth-child(4) { transform: rotate(3deg); z-index: 1; }
.fan img:nth-child(5) { transform: rotate(8deg) translateY(10px); }
.fan img:nth-child(6) { transform: rotate(13deg) translateY(30px); }
.fan:hover img { margin-inline: 4px; }
.fan img:hover { transform: translateY(-24px) rotate(0) scale(1.06); z-index: 3; }
.share-note { text-align: center; color: var(--muted); font-size: 14px; margin-top: 18px; }

/* Free and Plus */
.tiers { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 40px; }
.tier { border-radius: 32px; padding: 32px; background: var(--ivory); box-shadow: 0 0 0 1px var(--line); }
.tier.plus-tier { background: var(--cobalt); color: #fff; box-shadow: none; }
.tier h3 { font-size: 32px; }
.tier .sub { margin: 4px 0 18px; font-weight: 700; opacity: 0.7; }
.tier ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.tier li { display: flex; gap: 10px; align-items: flex-start; }
.tier li .icon { width: 24px; height: 24px; padding: 4px; border-radius: 50%; background: var(--lime); color: var(--ink); stroke-width: 3.2; margin-top: 1px; }

/* FAQ */
.faq { max-width: 820px; margin: 36px auto 0; display: grid; gap: 12px; }
.faq details { background: var(--ivory); border-radius: 24px; padding: 0 24px; box-shadow: 0 0 0 1px var(--line); transition: box-shadow 0.3s; }
.faq details[open] { box-shadow: 0 0 0 1px var(--line), 0 20px 40px -30px rgba(13, 13, 18, 0.5); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 0; padding-inline-end: 40px; font-weight: 800; font-size: 19px; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; inset-inline-end: 0; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--lime); font-weight: 900; transition: transform 0.35s var(--spring); }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { margin: 0 0 22px; color: var(--muted); }

/* Final call */
.final-band { background: var(--lime); border-radius: 56px 56px 0 0; padding-block: 72px 96px; margin-top: 40px; }
.final { text-align: center; }
.final h2 { margin-inline: auto; }
.final .lede { margin: 0 auto 32px; }
.final .actions { justify-content: center; }
.final > img { width: min(280px, 66vw); margin: 0 auto 8px; animation: float 6s ease-in-out infinite; }
.confetti { position: fixed; top: 0; left: 0; width: 12px; height: 14px; border-radius: 3px; pointer-events: none; z-index: 100; }

/* "This page is in your language" */
.lang-suggest { position: fixed; inset-inline: 16px; bottom: 16px; z-index: 60; max-width: 420px; margin-inline: auto; display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 18px; border-radius: 20px; background: var(--ink); color: var(--ivory); box-shadow: 0 24px 50px -20px rgba(13, 13, 18, 0.7); font-weight: 600; animation: pop 0.4s var(--spring); }
.lang-suggest[hidden] { display: none; }
.lang-suggest a { margin-inline-start: auto; padding: 8px 14px; border-radius: 999px; background: var(--lime); color: var(--ink); text-decoration: none; font-weight: 800; white-space: nowrap; }
.lang-suggest button { border: 0; background: none; color: rgba(255, 253, 250, 0.6); font-size: 22px; line-height: 1; padding: 4px 6px; }

/* Plain pages (support) */
.page { background: var(--ivory); border-radius: 44px 44px 0 0; padding: 56px 0; }
.page .wrap { max-width: 760px; }
.page h1 { font-size: clamp(44px, 7vw, 72px); margin-bottom: 24px; }
.page h2 { font-size: 26px; margin: 40px 0 12px; letter-spacing: -0.01em; max-width: none; }
.page p, .page li { color: var(--muted); }
.contact { padding: 24px 28px; border-radius: var(--radius); background: var(--lime); }
.contact a { font-weight: 800; color: var(--ink); }

/* Footer */
footer { background: var(--ink); color: rgba(255, 253, 250, 0.7); padding: 48px 0; font-size: 15px; }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; }
footer a { color: var(--ivory); }
footer nav { display: flex; gap: 20px; flex-wrap: wrap; }

/* Scripts without Latin letter shapes: no tight tracking, roomier lines. */
:lang(ja) :is(h1, h2, h3), :lang(ko) :is(h1, h2, h3), :lang(zh-Hans) :is(h1, h2, h3), :lang(zh-Hant) :is(h1, h2, h3), :lang(th) :is(h1, h2, h3), :lang(ar) :is(h1, h2, h3) { letter-spacing: 0; line-height: 1.12; }
:lang(th) .hero h1, :lang(ar) .hero h1 { line-height: 1.2; }
:lang(ja) .hero h1, :lang(zh-Hans) .hero h1, :lang(zh-Hant) .hero h1, :lang(ko) .hero h1 { font-size: clamp(52px, 8vw, 104px); }
:lang(ar) .eyebrow, :lang(th) .eyebrow, :lang(ja) .eyebrow, :lang(ko) .eyebrow, :lang(zh-Hans) .eyebrow, :lang(zh-Hant) .eyebrow { letter-spacing: 0; }

/* Scroll reveal: only when scripts run (the html gets .js), so the page never stays hidden. */
.js .reveal { opacity: 0; transform: translateY(32px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
.js .reveal.d1 { transition-delay: 0.08s; }
.js .reveal.d2 { transition-delay: 0.16s; }
.js .reveal.d3 { transition-delay: 0.24s; }
.js .hero h1 .word { opacity: 0; transform: translateY(0.4em) rotate(4deg); transition: opacity 0.7s var(--ease), transform 0.8s var(--spring); }
.js .hero h1.in .word { opacity: 1; transform: none; }

@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-2.5%) rotate(1deg); } }
@keyframes hop { 0% { transform: translateY(0) scale(1); } 30% { transform: translateY(-9%) scale(0.97, 1.04); } 60% { transform: translateY(0) scale(1.04, 0.95); } 100% { transform: translateY(0) scale(1); } }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-12px) rotate(1deg); } }
@keyframes morph { 0%, 100% { border-radius: 42% 58% 55% 45% / 48% 42% 58% 52%; transform: rotate(0); } 50% { border-radius: 55% 45% 42% 58% / 52% 58% 42% 48%; transform: rotate(8deg); } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes marquee-rtl { to { transform: translateX(50%); } }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(0.96); } to { opacity: 1; transform: none; } }

@media (max-width: 900px) {
  .hero, .plan, .tour, .split, .themes, .langs { grid-template-columns: 1fr; }
  .hero { gap: 8px; }
  .stage { max-width: 380px; order: -1; }
  .nav .hide-sm { display: none; }
  .tour .phone, .langs .phone, .split .shot-stack { order: -1; }
  .members { grid-template-columns: repeat(4, 1fr); }
  .tiers { grid-template-columns: 1fr; }
  .shot-stack .sticker { inset-inline-end: -14%; width: 44%; }
  .fan { justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; padding-inline: 20px; scrollbar-width: none; }
  .fan::-webkit-scrollbar { display: none; }
  .fan img, .fan img:nth-child(n) { flex: 0 0 auto; width: 200px; margin: 0; transform: none; scroll-snap-align: center; }
  .fan:hover img { margin: 0; }
}
@media (max-width: 560px) {
  body { font-size: 17px; }
  .nav .hide-xs { display: none; }
  .members { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .bubble { font-size: 14px; max-width: 180px; padding: 10px 14px; }
  .chip { font-size: 13px; padding: 8px 11px; }
  .panel { border-radius: 32px; }
  .hero-band { border-radius: 0 0 36px 36px; }
  .planner { padding: 20px; }
  .lang-menu ul { width: min(300px, calc(100vw - 32px)); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .js .reveal, .js .hero h1 .word { opacity: 1; transform: none; }
}

/* Buddy AI: a sample chat that answers the tapped question */
.ai { display: grid; grid-template-columns: 1fr 0.9fr; gap: 56px; align-items: center; }
.chat { background: var(--cobalt); color: #fff; border-radius: 36px; padding: 18px; box-shadow: 0 40px 70px -40px rgba(13, 13, 18, 0.6); display: flex; flex-direction: column; min-height: 560px; }
.chat-head { display: flex; align-items: center; gap: 12px; padding: 6px 6px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.chat-head img { width: 40px; height: 40px; border-radius: 12px; }
.chat-head b { display: block; font-size: 18px; }
.chat-head small { display: block; font-size: 13px; color: rgba(255, 255, 255, 0.7); }
.chat-log { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 16px 4px; }
.msg { max-width: 86%; padding: 12px 16px; border-radius: 22px; font-size: 16px; line-height: 1.4; animation: pop 0.35s var(--spring); }
.msg.me { align-self: flex-end; background: var(--lime); color: var(--ink); border-end-end-radius: 6px; font-weight: 600; }
.msg.buddy { align-self: flex-start; background: #fff; color: var(--ink); border-end-start-radius: 6px; }
.msg .word { opacity: 0; transition: opacity 0.25s; }
.msg .word.on { opacity: 1; }
.typing { display: inline-flex; gap: 5px; padding: 6px 2px; }
.typing i { width: 8px; height: 8px; border-radius: 50%; background: var(--cobalt); opacity: 0.4; animation: blink 1s infinite; }
.typing i:nth-child(2) { animation-delay: 0.15s; }
.typing i:nth-child(3) { animation-delay: 0.3s; }
.chat-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 4px 12px; }
.chat-chip { border: 0; padding: 9px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); color: #fff; font-weight: 700; font-size: 14px; text-align: start; transition: background 0.25s, transform 0.25s var(--spring); }
.chat-chip:hover { background: rgba(255, 255, 255, 0.24); transform: translateY(-2px); }
.chat-chip[disabled] { opacity: 0.45; cursor: default; transform: none; }
.chat-input { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.7); font-weight: 600; }
.chat-input .icon { font-size: 24px; color: var(--lime); }

/* The little things */
.features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 40px; }
.feature { background: var(--ivory); border-radius: 26px; padding: 22px; box-shadow: 0 0 0 1px var(--line); display: flex; flex-direction: column; gap: 6px; transition: transform 0.35s var(--spring), box-shadow 0.35s; }
.feature:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--line), 0 24px 40px -28px rgba(13, 13, 18, 0.45); }
.feature .fi { width: 52px; height: 52px; border-radius: 17px; display: grid; place-items: center; background: var(--lime); font-size: 27px; margin-bottom: 10px; transition: transform 0.4s var(--spring); }
.feature:hover .fi { transform: translateY(-2px) rotate(-4deg); }
.feature:nth-child(4n+2) .fi { background: var(--cobalt); color: #fff; }
.feature:nth-child(4n+3) .fi { background: var(--ink); color: var(--lime); }
.feature:nth-child(4n+4) .fi { background: var(--citron); }
.feature b { font-size: 18px; letter-spacing: -0.01em; }
.feature span:last-child { font-size: 15px; color: var(--muted); line-height: 1.4; }

/* Runner number */
.lime-panel { background: var(--lime); box-shadow: none; }
.number { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; }
.steps { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 12px; counter-reset: none; }
.steps li { display: flex; align-items: center; gap: 14px; font-weight: 800; font-size: 19px; }
.steps li span { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--lime); font-weight: 900; }
.bib-stage { position: relative; display: grid; justify-items: center; }
.bib-buddy { width: min(300px, 70%); animation: float 7s ease-in-out infinite; }
.bib { position: relative; margin-top: -24px; width: min(380px, 92%); padding: 22px 26px 18px; border-radius: 18px; background: #FCF6E4; color: var(--ink); text-align: center; box-shadow: 0 30px 50px -30px rgba(13, 13, 18, 0.6), inset 0 0 0 3px var(--ink); transform: rotate(-3deg); }
.bib::before, .bib::after { content: ""; position: absolute; top: 12px; width: 12px; height: 12px; border-radius: 50%; background: #c9c9c9; box-shadow: inset 0 0 0 2px #888; }
.bib::before { left: 14px; }
.bib::after { right: 14px; }
.bib small { display: block; font-weight: 800; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.bib strong { display: block; font-size: clamp(56px, 9vw, 92px); line-height: 1; letter-spacing: -0.04em; font-weight: 900; font-variant-numeric: tabular-nums; margin: 6px 0; }
.bib .bib-note { text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 14px; }
.members-head { margin-top: clamp(56px, 8vw, 96px); }

/* Coming soon */
.soon { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 40px; }
.soon-card { position: relative; background: var(--ivory); border-radius: 32px; padding: 28px; box-shadow: 0 0 0 1px var(--line); overflow: hidden; }
.soon-card.big { background: var(--ink); color: var(--ivory); box-shadow: none; }
.soon-card.outfit { background: var(--cobalt); }
.soon-card h3 { display: flex; align-items: center; gap: 10px; font-size: 26px; margin-top: 12px; }
.soon-card p { margin: 8px 0 0; color: var(--muted); }
.soon-card.big p { color: rgba(255, 253, 250, 0.72); }
.badge { position: absolute; top: 20px; inset-inline-end: 20px; padding: 6px 12px; border-radius: 999px; background: var(--pink); color: #fff; font-weight: 800; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; z-index: 2; }
.trio { display: flex; justify-content: center; margin-top: 18px; }
.trio img { width: 34%; margin-inline: -4%; animation: run 0.9s ease-in-out infinite alternate; }
.trio img:nth-child(2) { animation-delay: -0.3s; transform: translateY(-6px); }
.trio img:nth-child(3) { animation-delay: -0.6s; }
.outfit-art { width: 62%; margin: 6px auto 0; transition: transform 0.5s var(--spring); }
.soon-card.outfit:hover .outfit-art { transform: rotate(-4deg) scale(1.05); }
.soon-icon { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: var(--lime); font-size: 28px; }
/* A small highlight gives each icon tile depth while keeping the glyph crisp. */
.feature .fi, .points li .dot, .soon-icon, .tab[aria-selected=true] .ico {
  background-image: linear-gradient(145deg, rgba(255, 255, 255, 0.2), transparent 65%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 0 0 1px rgba(13, 13, 18, 0.05), 0 5px 10px -8px rgba(13, 13, 18, 0.45);
}

@keyframes blink { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
@keyframes run { from { transform: translateY(0); } to { transform: translateY(-10px); } }

@media (max-width: 900px) {
  .ai, .number { grid-template-columns: 1fr; }
  .features { grid-template-columns: repeat(2, 1fr); }
  .soon { grid-template-columns: 1fr; }
  .chat { min-height: 500px; }
}
@media (max-width: 560px) {
  .features { gap: 10px; }
  .feature { padding: 18px; }
}

/* Social links (placeholders until the accounts exist: scripts/website/build.py SOCIAL) */
.follow-title { margin: 40px 0 12px; font-weight: 800; }
.social { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }
.social a { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--lime); font-size: 22px; transition: transform 0.3s var(--spring), background 0.3s; }
.social a:hover { transform: translateY(-3px) rotate(-6deg); }
.social.small { gap: 6px; }
.social.small a { width: 38px; height: 38px; font-size: 18px; background: rgba(255, 253, 250, 0.1); color: var(--ivory); }
.social.small a:hover { background: var(--lime); color: var(--ink); }

/* Language menu, round 2: flags, one tidy list, and a soft cross-fade between language pages. */
.flag { width: 20px; height: 20px; flex: none; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1px rgba(13, 13, 18, 0.12); }
.lang-menu summary { gap: 8px; padding: 7px 10px 7px 8px; transition: background 0.25s, box-shadow 0.25s; }
.lang-menu summary:hover { background: rgba(13, 13, 18, 0.06); }
.lang-menu summary .chevron { font-size: 16px; transition: transform 0.35s var(--spring); }
.lang-menu[open] summary .chevron { transform: rotate(180deg); }
.lang-menu ul { grid-template-columns: 1fr 1fr; width: 380px; padding: 10px; gap: 4px; border-radius: 24px; transform-origin: top right; animation: menu-in 0.32s var(--spring); }
[dir=rtl] .lang-menu ul { transform-origin: top left; }
.lang-menu a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; white-space: nowrap; transition: background 0.2s, transform 0.2s var(--spring); }
.lang-menu a:hover { transform: translateX(2px); }
[dir=rtl] .lang-menu a:hover { transform: translateX(-2px); }
.lang-menu a span { overflow: hidden; text-overflow: ellipsis; }
.lang-menu li { opacity: 0; animation: item-in 0.35s var(--ease) forwards; }
.lang-menu li:nth-child(2n) { animation-delay: 0.03s; }
.lang-menu li:nth-child(n+5) { animation-delay: 0.06s; }
.lang-menu li:nth-child(n+9) { animation-delay: 0.09s; }
.lang-menu li:nth-child(n+13) { animation-delay: 0.12s; }
.lang-chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px 9px 10px; }
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px) scale(0.94); } to { opacity: 1; transform: none; } }
@keyframes item-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
body.leaving main, body.leaving .hero-band, body.leaving .marquee { opacity: 0; transform: translateY(8px); transition: opacity 0.22s var(--ease), transform 0.22s var(--ease); }
@media (max-width: 560px) {
  .lang-menu ul { width: min(340px, calc(100vw - 24px)); inset-inline-end: -52px; }
}

/* Coming soon, round 2: six cards, each with "Notify me" */
.soon-icon.cobalt { background: var(--cobalt); color: #fff; }
.soon-icon.ink { background: var(--ink); color: var(--lime); }
.notify { margin-top: 18px; display: inline-flex; align-items: center; gap: 8px; border: 0; padding: 10px 16px; border-radius: 999px; background: var(--ink); color: var(--lime); font-weight: 800; font-size: 15px; transition: transform 0.25s var(--spring), background 0.25s; }
.notify:hover { transform: translateY(-2px); }
.notify .icon { font-size: 18px; }
.notify:hover .icon { animation: ring 0.6s ease-in-out; }
.soon-card.big .notify { background: var(--lime); color: var(--ink); }
@keyframes ring { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(14deg); } 50% { transform: rotate(-12deg); } 75% { transform: rotate(6deg); } }

/* Waitlist form */
.waitlist { max-width: 640px; margin: 0 auto; }
.wl-row { display: flex; gap: 10px; background: #fff; padding: 8px; border-radius: 999px; box-shadow: 0 20px 40px -24px rgba(13, 13, 18, 0.5), 0 0 0 2px var(--ink); }
.wl-row input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 18px; padding: 0 16px; color: var(--ink); outline: none; }
.wl-row .button { flex: none; }
.waitlist.invalid .wl-row { animation: shake 0.4s; box-shadow: 0 0 0 2px #C4303F; }
.picks { border: 0; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.picks legend { width: 100%; margin-bottom: 10px; font-weight: 800; }
.pick { position: relative; cursor: pointer; }
.pick input { position: absolute; opacity: 0; pointer-events: none; }
.pick span { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 999px; background: rgba(13, 13, 18, 0.08); font-weight: 700; font-size: 15px; transition: background 0.2s, color 0.2s, transform 0.25s var(--spring); }
.pick span::before { content: "+"; font-weight: 900; }
.pick input:checked + span { background: var(--ink); color: var(--lime); }
.pick input:checked + span::before { content: "✓"; }
.pick input:focus-visible + span { outline: 3px solid var(--cobalt); outline-offset: 2px; }
.pick.flash span { animation: pick-flash 0.8s var(--spring); }
/* The honeypot stays in place, clipped to nothing: a field pushed far to one side widened the right-to-left page. */
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; opacity: 0; pointer-events: none; }
.wl-status { min-height: 1.5em; margin: 16px 0 0; font-weight: 800; }
.wl-status.ok { color: var(--cobalt); }
.wl-status.err { color: #C4303F; }
.waitlist.done .wl-row, .waitlist.done .picks { opacity: 0.5; pointer-events: none; }
.wl-privacy { margin: 8px auto 0; max-width: 34em; font-size: 14px; color: var(--muted); }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
@keyframes pick-flash { 0% { transform: scale(1); } 40% { transform: scale(1.15); } 100% { transform: scale(1); } }
@media (max-width: 560px) {
  .wl-row { flex-direction: column; border-radius: 24px; }
  .wl-row input { padding: 12px 14px; }
  .wl-row .button { justify-content: center; }
}

/* Header: never wrap; longer languages drop the secondary links first. */
.nav > a, .nav .button { white-space: nowrap; }
@media (max-width: 1120px) { .nav .hide-md { display: none; } }

/* ===== Round 6 ===== */
.center-head { text-align: center; }
.center-head h2, .center-head .lede { margin-inline: auto; }

/* Support page */
.support-page .page { position: relative; margin-top: 0; }
.page-buddy { width: 150px; margin-bottom: -10px; animation: float 6s ease-in-out infinite; }
.faq.plain { margin: 32px 0 0; max-width: none; }

/* Themes: a phone that wears the picked theme, with named pills */
.theme-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.theme-pill { display: inline-flex; align-items: center; gap: 8px; border: 0; padding: 8px 14px 8px 8px; border-radius: 999px; background: rgba(13, 13, 18, 0.06); font-weight: 700; font-size: 15px; transition: background 0.25s, transform 0.25s var(--spring), box-shadow 0.25s; }
.theme-pill:hover { transform: translateY(-2px); }
.theme-pill i { width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5), 0 0 0 1px rgba(13, 13, 18, 0.12); }
.theme-pill small { font-size: 11px; font-weight: 800; padding: 2px 6px; border-radius: 999px; background: var(--cobalt); color: #fff; }
.theme-pill small.free { background: var(--lime); color: var(--ink); }
.theme-pill[aria-pressed=true] { background: var(--ink); color: var(--ivory); box-shadow: 0 10px 24px -14px rgba(13, 13, 18, 0.7); }
.theme-stage { display: grid; justify-items: center; gap: 14px; }
.theme-phone { --bg: #3430ED; --surface: #FFFDFA; --onbg: #fff; --onsurface: #191923; --ring: #F5F58A; --sleep: #FFB8CC; --btn: #F5F58A; --onbtn: #191923; width: min(300px, 74vw); }
.theme-phone::before { z-index: 3; }
.mock-screen { height: 100%; border-radius: 42px; background: var(--bg); color: var(--onbg); padding: 46px 16px 16px; display: flex; flex-direction: column; gap: 12px; overflow: hidden; transition: background 0.6s var(--ease), color 0.6s; }
.mock-status { display: flex; justify-content: space-between; font-size: 12px; font-weight: 800; margin-top: -30px; padding-inline: 10px; }
.mock-status i { width: 22px; height: 10px; border-radius: 3px; box-shadow: inset 0 0 0 1.5px currentColor; }
.theme-phone .mtitle { font-weight: 900; font-size: 30px; letter-spacing: -0.03em; margin-top: 10px; }
.theme-phone .rings { display: flex; justify-content: space-between; align-items: flex-end; }
.theme-phone .rings svg { width: 66px; height: 66px; }
.theme-phone .rings .big-ring svg { width: 86px; height: 86px; }
.theme-phone .ring-track { stroke: color-mix(in srgb, var(--onbg) 18%, transparent); transition: stroke 0.6s; }
.theme-phone .ring { stroke: var(--ring); transition: stroke 0.6s, stroke-dashoffset 1.2s var(--ease); }
.theme-phone .ring.sleep { stroke: var(--sleep); }
.theme-phone .rlabel { text-align: center; font-size: 11px; font-weight: 700; opacity: 0.85; margin-top: 2px; }
.theme-phone .mcard { background: var(--surface); color: var(--onsurface); border-radius: 22px; padding: 14px; display: grid; gap: 6px; transition: background 0.6s, color 0.6s; }
.theme-phone .mcard small { font-weight: 700; font-size: 12px; opacity: 0.65; }
.theme-phone .big { font-weight: 900; font-size: 34px; letter-spacing: -0.03em; line-height: 1; }
.theme-phone .big span { font-size: 15px; opacity: 0.6; }
.mstrip { display: flex; gap: 2px; height: 10px; }
.mstrip i { flex: 3; border-radius: 3px; background: color-mix(in srgb, var(--onsurface) 18%, transparent); }
.mstrip i.r { flex: 2; background: var(--btn); transition: background 0.6s; }
.theme-phone .mbtn { margin-top: 4px; padding: 10px; border-radius: 999px; text-align: center; font-weight: 800; font-size: 14px; background: var(--btn); color: var(--onbtn); transition: background 0.6s, color 0.6s; }
.mweek { display: flex; gap: 6px; align-items: flex-end; height: 54px; padding: 10px 12px; border-radius: 18px; background: color-mix(in srgb, var(--onbg) 10%, transparent); }
.mweek i { flex: 1; border-radius: 5px; background: var(--ring); transition: background 0.6s, height 0.8s var(--spring); }
.mweek i:nth-child(1) { height: 60%; } .mweek i:nth-child(2) { height: 18%; opacity: 0.35; } .mweek i:nth-child(3) { height: 85%; }
.mweek i:nth-child(4) { height: 18%; opacity: 0.35; } .mweek i:nth-child(5) { height: 70%; } .mweek i:nth-child(6) { height: 18%; opacity: 0.35; } .mweek i:nth-child(7) { height: 40%; }
.theme-name { margin: 0; font-weight: 800; }

/* Pricing */
.billing { display: inline-flex; gap: 4px; padding: 5px; margin-top: 28px; border-radius: 999px; background: rgba(13, 13, 18, 0.07); }
.billing button { border: 0; padding: 10px 18px; border-radius: 999px; background: transparent; font-weight: 800; font-size: 15px; display: inline-flex; align-items: center; gap: 8px; transition: background 0.3s, color 0.3s; }
.billing button b { font-size: 12px; padding: 3px 8px; border-radius: 999px; background: var(--lime); color: var(--ink); }
.billing button[aria-pressed=true] { background: var(--ink); color: var(--ivory); }
#pricing .tiers { align-items: stretch; max-width: 980px; margin-inline: auto; }
#pricing .tier { position: relative; display: flex; flex-direction: column; padding: 36px; overflow: hidden; }
#pricing .tier h3 { font-size: 30px; }
#pricing .tier ul { margin-bottom: 28px; flex: 1; }
.price { display: flex; align-items: baseline; gap: 8px; margin: 6px 0 4px; }
.price strong { font-size: clamp(48px, 6vw, 64px); font-weight: 900; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.price span { font-weight: 700; opacity: 0.7; }
.price-alt { margin: 0 0 22px; font-size: 15px; opacity: 0.8; min-height: 1.4em; }
.tier:not(.plus-tier) .price { margin-bottom: 44px; }
.plus-tier { background: linear-gradient(160deg, #4743FF 0%, var(--cobalt) 45%, #2420B8 100%); box-shadow: 0 40px 80px -40px rgba(52, 48, 237, 0.8); }
.plus-tier .badge { top: 24px; background: var(--lime); color: var(--ink); }
.tier-buddy { position: absolute; width: 120px; inset-inline-end: 14px; top: 118px; opacity: 0.95; transform: rotate(-8deg); pointer-events: none; animation: float 7s ease-in-out infinite; }
.plus-tier .price, .plus-tier .price-alt { padding-inline-end: 120px; }
.button.lime { background: var(--lime); color: var(--ink); box-shadow: 0 12px 30px -14px rgba(13, 13, 18, 0.6); }
.button.wide { justify-content: center; width: 100%; position: relative; z-index: 1; }
.price-note { text-align: center; color: var(--muted); font-size: 14px; margin-top: 18px; }

/* Privacy layout and motion: privacy-showcase.css. */

/* FAQ: two columns and a smooth accordion */
.faq-wrap { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 48px; align-items: start; }
.faq-side { position: sticky; top: 100px; }
.faq-side .lede a { color: var(--ink); font-weight: 800; }
.faq-side img { width: 170px; margin-top: 24px; animation: float 7s ease-in-out infinite; }
.faq-wrap .faq { margin: 0; max-width: none; gap: 10px; }
.faq details { padding: 0; overflow: hidden; }
.faq summary { padding: 20px 64px 20px 24px; font-size: 18px; transition: color 0.2s; }
[dir=rtl] .faq summary { padding: 20px 24px 20px 64px; }
.faq summary::after { inset-inline-end: 20px; }
.faq summary:hover { color: var(--cobalt); }
.faq .answer { overflow: hidden; }
.faq .answer p { margin: 0; padding: 0 24px 22px; color: var(--muted); }
.faq details[open] { background: #fff; }

@keyframes spin { to { rotate: 360deg; } }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(203, 255, 47, 0.5); } 50% { box-shadow: 0 0 0 16px rgba(203, 255, 47, 0); } }
@keyframes dash { to { background-position: 0 10px; } }

@media (max-width: 900px) {
  .faq-wrap { grid-template-columns: 1fr; }
  .faq-side { position: static; }
  .faq-side img { display: none; }
}
@media (max-width: 560px) {
  #pricing .tier { padding: 26px; }
  .tier-buddy { width: 110px; }
  .plus-tier .price, .plus-tier .price-alt { padding-inline-end: 80px; }
}

/* ===== Round 7: funnel and phones ===== */
/* Hero sign-up */
.hero-form { max-width: 520px; }
.hero-form .wl-row { box-shadow: 0 16px 34px -22px rgba(13, 13, 18, 0.6), 0 0 0 2px var(--ink); }
.hero-form .wl-status { margin-top: 10px; min-height: 0; }
.hero-note { margin: 12px 0 0; font-size: 14px; font-weight: 600; color: var(--muted); }
.invite { margin-top: 12px; display: inline-flex; align-items: center; gap: 8px; border: 0; padding: 10px 16px; border-radius: 999px; background: var(--cobalt); color: #fff; font-weight: 800; font-size: 15px; animation: pop 0.4s var(--spring); }
.invite[hidden] { display: none; }

/* Store buttons (lead to the waitlist until the apps are live) */
.stores { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.stores.center { justify-content: center; margin-top: 28px; }
.store { display: inline-flex; align-items: center; gap: 12px; padding: 11px 18px 11px 14px; border-radius: 12px; background: var(--ink); color: #fff; text-decoration: none; transition: transform 0.25s var(--spring), box-shadow 0.25s; min-width: 176px; min-height: 58px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); text-align: start; }
.store:hover { transform: translateY(-2px); }
.store .store-mark { width: 32px; height: 32px; object-fit: contain; flex: none; }
.store-ios .store-mark { width: 27px; margin-inline: 2px 3px; }
.store span { display: flex; flex-direction: column; gap: 2px; line-height: 1.1; font-weight: 700; font-size: 19px; letter-spacing: -0.025em; }
.store small { font-size: 11px; font-weight: 600; opacity: 0.75; }
.store.soon { margin-top: 0; }
.store.soon small { color: #fff; opacity: 0.78; letter-spacing: 0; }

/* Call-to-action strip between sections */
.cta-strip { padding-block: 8px; }
.strip { display: flex; align-items: center; gap: 20px; padding: 18px 22px; border-radius: 32px; background: var(--ink); color: var(--ivory); }
.strip img { width: 86px; flex: none; margin-block: -24px -10px; }
.strip div { flex: 1; display: flex; flex-direction: column; }
.strip b { font-size: 22px; letter-spacing: -0.02em; }
.strip span { color: rgba(255, 253, 250, 0.7); }

/* Sticky bar on phones */
.sticky-cta { display: none; }


@media (max-width: 900px) {
  /* Words and the sign-up first, Buddy after them. */
  .stage { order: 2; max-width: 320px; margin-top: 8px; }
  .hero { padding-top: 8px; }
  .hero-band { padding-bottom: 64px; }
  .hero .eyebrow { font-size: 12px; letter-spacing: 0.05em; }
  .hero h1 { margin: 16px 0 16px; }
  .hero .lede { margin-bottom: 22px; font-size: 18px; }
  .stores .store { flex: 1; min-width: 0; justify-content: center; }
  .facts { margin-top: 20px; gap: 8px 16px; font-size: 14px; }
  .sticky-cta { display: flex; position: fixed; z-index: 70; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); align-items: center; gap: 10px; padding: 10px 10px 10px 12px; border-radius: 22px; background: rgba(13, 13, 18, 0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: var(--ivory); box-shadow: 0 20px 40px -16px rgba(13, 13, 18, 0.6); transform: translateY(140%); transition: transform 0.45s var(--spring); }
  .sticky-cta.on { transform: none; }
  .sticky-cta img { width: 36px; height: 36px; border-radius: 10px; }
  .sticky-cta span { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
  .sticky-cta b { font-size: 15px; white-space: nowrap; }
  .sticky-cta small { font-size: 12px; color: rgba(255, 253, 250, 0.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sticky-cta .button { flex: none; background: var(--lime); color: var(--ink); }
  footer { padding-bottom: 110px; }
  /* App tour: the tabs become a row of pills under the phone. */
  .tabs { display: flex; overflow-x: auto; gap: 8px; margin: 22px -20px 0; padding: 0 20px 6px; scrollbar-width: none; scroll-snap-type: x proximity; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: none; grid-template-columns: 30px auto; gap: 8px; padding: 8px 14px 8px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); scroll-snap-align: start; }
  .tab .ico { width: 30px; height: 30px; border-radius: 50%; font-size: 16px; }
  .tab strong { font-size: 15px; white-space: nowrap; }
  .tab span.t { display: none; }
  /* Share cards: a smaller swipeable row with a short tail. */
  .fan { padding: 24px 20px 8px; }
  .fan img, .fan img:nth-child(n) { width: 170px; border-radius: 18px; }
  .share-note { margin-top: 10px; }
  .strip { flex-wrap: wrap; text-align: start; }
  .strip .button { width: 100%; justify-content: center; }
  .strip img { width: 70px; margin: -20px 0 -6px; }
  .theme-phone { width: min(270px, 72vw); }
  .themes .theme-stage { order: -1; }
  .section { padding-block: 56px; }
  h2 { font-size: clamp(34px, 9vw, 48px); }
}
@media (max-width: 560px) {
  .stores .store { padding: 8px 10px; gap: 8px; }
  .store .store-mark { width: 28px; height: 28px; }
  .store-ios .store-mark { width: 24px; }
  .stores .store { min-width: 0; min-height: 54px; }
  .store span { font-size: 16px; }
  .chip { display: none; }
  .chip.c1, .chip.c3 { display: block; }
  .bubble { top: 0; }
  .features { grid-template-columns: 1fr 1fr; }
  .feature { padding: 16px; }
  .feature b { font-size: 16px; }
  .feature span:last-child { font-size: 14px; }
  .lang-chips { gap: 6px; }
  .lang-chip { font-size: 14px; padding: 7px 12px 7px 8px; }
  .members-head { margin-top: 48px; }
  .bib strong { font-size: 52px; }
}

/* Waitlist success card (session 3a4997c2): the form gives way to a check, Buddy and ways to share. */
.wl-form.done > :not(.wl-success) { display: none; }
.wl-success { display: grid; justify-items: center; text-align: center; gap: 6px; padding: 26px 22px 22px; border-radius: 32px; background: var(--ivory); color: var(--ink); box-shadow: 0 30px 60px -36px rgba(13, 13, 18, 0.55), 0 0 0 2px var(--ink); opacity: 0; transform: translateY(14px) scale(0.96); transition: opacity 0.4s var(--ease), transform 0.55s var(--spring); }
.wl-success[hidden] { display: none; }
.wl-success.in { opacity: 1; transform: none; }
.ok-check { width: 64px; height: 64px; }
.ok-check circle { fill: var(--lime); stroke: var(--ink); stroke-width: 2.5; transform-origin: center; transform: scale(0.4); transition: transform 0.5s var(--spring) 0.1s; }
.ok-check path { fill: none; stroke: var(--ink); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 32; stroke-dashoffset: 32; transition: stroke-dashoffset 0.45s var(--ease) 0.35s; }
.wl-success.in .ok-check circle { transform: none; }
.wl-success.in .ok-check path { stroke-dashoffset: 0; }
.ok-buddy { width: 110px; margin: -8px 0 -4px; animation: float 6s ease-in-out infinite; }
.hero-form .ok-buddy { display: none; }
.ok-title { font-size: clamp(24px, 4vw, 30px); font-weight: 900; letter-spacing: -0.03em; line-height: 1.1; }
.ok-text { max-width: 30em; color: var(--muted); font-size: 16px; }
.ok-share { width: 100%; display: grid; justify-items: center; gap: 12px; margin-top: 14px; padding-top: 16px; border-top: 1px dashed var(--line); }
.ok-share-title { font-weight: 800; font-size: 15px; }
.share-native { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; max-width: 360px; border: 0; padding: 15px 22px; border-radius: 999px; background: var(--ink); color: var(--lime); font-weight: 800; font-size: 17px; box-shadow: 0 12px 26px -14px rgba(13, 13, 18, 0.7); transition: transform 0.25s var(--spring); }
.share-native[hidden] { display: none; }
.share-native:active { transform: scale(0.96); }
.share-native .icon { font-size: 20px; }
.share-row { display: flex; gap: 10px; }
.share-btn { width: 52px; height: 52px; border: 0; border-radius: 50%; display: grid; place-items: center; background: rgba(13, 13, 18, 0.07); color: var(--ink); font-size: 22px; transition: transform 0.3s var(--spring), background 0.25s, color 0.25s; }
.share-btn:hover { transform: translateY(-3px) rotate(-6deg); background: var(--ink); color: var(--lime); }
.share-btn:active { transform: scale(0.92); }
.share-btn.copy.done { background: var(--lime); }
.ok-copied { min-height: 1.2em; font-size: 14px; font-weight: 800; color: var(--cobalt); }
.wl-success.in .share-row > * { animation: pop 0.45s var(--spring) both; }
.wl-success.in .share-row > :nth-child(2) { animation-delay: 0.06s; }
.wl-success.in .share-row > :nth-child(3) { animation-delay: 0.12s; }
.wl-success.in .share-row > :nth-child(4) { animation-delay: 0.18s; }
/* Submit button while sending: a small spinner instead of the words. */
.button.loading { color: transparent !important; position: relative; pointer-events: none; }
.button.loading::after { content: ""; position: absolute; inset: 0; margin: auto; width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--lime); border-right-color: transparent; animation: spin 0.7s linear infinite; }

/* ===== Spacing and type polish (session 3a4997c2) =====
   One type scale, one rhythm: eyebrow → heading 16px, heading → lede 16px, lede → content 32–40px;
   sections 64–112px apart; panels padded inside instead of doubling the section padding. */
:root {
  --fs-h1: clamp(54px, 8.6vw, 120px);
  --fs-h2: clamp(34px, 5.2vw, 64px);
  --fs-lede: clamp(18px, 1.7vw, 21px);
  --gap-head: 16px;
  --gap-body: clamp(28px, 3.5vw, 40px);
  --pad-section: clamp(64px, 8vw, 112px);
  --pad-panel: clamp(22px, 5vw, 72px);
}
body { line-height: 1.55; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1, h2, h3, summary, .ok-title, .strip b, .feature b, .points b, .soon-card h3 { text-wrap: balance; }
p, .lede, .feature span, .points .d, .tier li, .faq .answer p, .chip small, .ok-text { text-wrap: pretty; }
h2 { font-size: var(--fs-h2); line-height: 1.02; letter-spacing: -0.032em; margin: var(--gap-head) 0; max-width: 14em; }
.lede { font-size: var(--fs-lede); line-height: 1.55; max-width: 34em; }
.eyebrow { line-height: 1.2; }

/* Sections and panels: the outer section only spaces the panel; the panel pads its own content. */
.section { padding-block: var(--pad-section); }
section.section:has(> .wrap > .panel):not(#members) { padding-block: clamp(16px, 2.4vw, 32px); }
.panel > .wrap { padding-inline: var(--pad-panel); }
.panel > .section { padding-block: clamp(48px, 7vw, 96px); }
.points, .theme-list, .lang-chips, .features, .members, .tiers, .soon, .faq-wrap .faq { margin-top: var(--gap-body); }
.points { gap: 18px; }
.points li { line-height: 1.45; }
.points li b { margin-bottom: 2px; }

/* Hero: the same steps between the words, the form, the stores and the small print. */
.hero h1 { font-size: var(--fs-h1); line-height: 0.92; letter-spacing: -0.045em; margin: 20px 0 22px; max-width: 9em; }
.hero .lede { margin-bottom: 28px; max-width: 30em; }
.stores { margin-top: 18px; }
.hero-note { margin-top: 14px; }
.facts { margin-top: 22px; }

/* Buddy AI: the chat sits level with the copy, without empty space on top. */
.ai { align-items: start; }
.chat { min-height: 0; position: sticky; top: 96px; }
.chat-log { min-height: 260px; }

/* Cards: one inner padding and one radius family. */
.feature { padding: 24px; border-radius: 24px; }
.feature b { font-size: 18px; line-height: 1.25; }
.tier li { font-size: 16px; line-height: 1.45; }
.faq summary { font-size: 18px; line-height: 1.35; }
.faq .answer p { line-height: 1.6; }

@media (max-width: 900px) {
  .hero h1 { max-width: none; }
  .chat { position: static; }
  .wrap:has(> .panel) { padding-inline: 12px; }
  .panel > .wrap { padding-inline: 20px; }
  .panel > .section { padding-block: 44px; }
  section.section:has(> .wrap > .panel):not(#members) { padding-block: 10px; }
}
@media (max-width: 560px) {
  :root { --fs-h2: clamp(32px, 9.4vw, 42px); }
  body { font-size: 17px; }
  .lede { font-size: 17px; }
  .faq summary { font-size: 17px; padding: 18px 56px 18px 20px; }
  [dir=rtl] .faq summary { padding: 18px 20px 18px 56px; }
  .faq .answer p { padding: 0 20px 20px; }
  .feature { padding: 18px; }
  .points li { font-size: 16px; }
}
/* Grid columns may shrink below their content (the tour's scrolling tab row once widened its column to 1100px). */
.hero > *, .plan > *, .tour > *, .split > *, .themes > *, .langs > *, .ai > *, .number > *, .faq-wrap > * { min-width: 0; }

/* FAQ icon, redrawn (session 3a4997c2): a plus made of two bars; opening draws the upright bar in, leaving a minus,
   and the circle turns ink. Follows the click at once (".closing" while the answer folds). */
.faq summary::after {
  content: ""; width: 32px; height: 32px; color: var(--ink);
  background:
    linear-gradient(currentColor, currentColor) center / 12px 2.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2.5px 12px no-repeat,
    var(--lime);
  transform: translateY(-50%);
  transition: transform 0.45s cubic-bezier(.2, .8, .2, 1), background-size 0.35s cubic-bezier(.2, .8, .2, 1), background-color 0.3s, color 0.3s, box-shadow 0.3s;
}
.faq summary:hover::after { box-shadow: 0 0 0 5px rgba(203, 255, 47, 0.35); }
.faq details[open]:not(.closing) summary::after {
  color: var(--lime); background-color: var(--ink);
  background-size: 12px 2.5px, 2.5px 0, auto;
  transform: translateY(-50%) rotate(180deg);
}
.faq summary:focus-visible { outline: none; }
.faq summary:focus-visible::after { box-shadow: 0 0 0 3px var(--cobalt); }

/* Plan explorer, smoother (session 3a4997c2): blocks stay in the row and shrink away, a custom range with a filled
   track, and week numbers placed exactly under each step of the thumb. */
.bars { gap: 0; }
.bars i { min-width: 0; margin-inline-end: 3px; transition: flex-grow 0.55s cubic-bezier(.2, .8, .2, 1), background-color 0.35s, opacity 0.35s, margin 0.55s cubic-bezier(.2, .8, .2, 1); }
.bars i:last-child, .bars i.gone { margin-inline-end: 0; }
.bars i.gone { opacity: 0; }
#plan-slider {
  --thumb: 26px; --p: 0%;
  -webkit-appearance: none; appearance: none; display: block; width: 100%; height: var(--thumb); margin: 26px 0 0; background: none; cursor: pointer; touch-action: pan-y;
}
#plan-slider::-webkit-slider-runnable-track {
  height: 6px; border-radius: 99px;
  background: linear-gradient(to right, var(--ink) 0 calc(var(--thumb) / 2 + (100% - var(--thumb)) * var(--pn, 0)), var(--line) 0);
}
#plan-slider::-moz-range-track { height: 6px; border-radius: 99px; background: var(--line); }
#plan-slider::-moz-range-progress { height: 6px; border-radius: 99px; background: var(--ink); }
#plan-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: var(--thumb); height: var(--thumb); margin-top: calc((6px - var(--thumb)) / 2); border-radius: 50%;
  background: var(--lime); border: 3px solid var(--ink); box-shadow: 0 6px 14px -6px rgba(13, 13, 18, 0.6);
  transition: transform 0.2s cubic-bezier(.2, .8, .2, 1), box-shadow 0.2s;
}
#plan-slider::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--lime); border: 3px solid var(--ink); }
#plan-slider:hover::-webkit-slider-thumb { transform: scale(1.08); }
#plan-slider:active::-webkit-slider-thumb { transform: scale(1.15); box-shadow: 0 0 0 8px rgba(203, 255, 47, 0.35), 0 6px 14px -6px rgba(13, 13, 18, 0.6); }
#plan-slider:focus-visible { outline: none; }
#plan-slider:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--cobalt); }
.planner .ticks { position: relative; display: block; height: 30px; margin-top: 8px; padding: 0; }
.planner .ticks span {
  position: absolute; top: 0; left: calc(13px + (100% - 26px) * var(--i) / 11); translate: -50% 0;
  min-width: 26px; height: 26px; display: grid; place-items: center; border-radius: 99px;
  cursor: pointer; transition: background-color 0.25s, color 0.25s;
}
.planner .ticks span:hover { color: var(--ink); }
.planner .ticks span.on { background: var(--ink); color: var(--lime); }
[dir=rtl] .planner .ticks span { left: auto; right: calc(13px + (100% - 26px) * var(--i) / 11); translate: 50% 0; }
@media (max-width: 400px) { .planner .ticks span { min-width: 22px; height: 22px; font-size: 11px; } }
[dir=rtl] #plan-slider::-webkit-slider-runnable-track { background: linear-gradient(to left, var(--ink) 0 calc(var(--thumb) / 2 + (100% - var(--thumb)) * var(--pn, 0)), var(--line) 0); }
.bars i, .bars i:last-child { margin-inline-end: 0; margin-inline-start: 3px; }
.bars i:first-child, .bars i.gone { margin-inline-start: 0; }

/* Buddy chat, smoother (session 3a4997c2): a fixed window; older messages slide up and fade under the header instead
   of spilling over it, new ones rise in softly, and the rest glide to their place (app.js). */
.chat-log { flex: none; height: 340px; min-height: 0; overflow: hidden; justify-content: flex-end; padding: 16px 4px 12px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 56px); mask-image: linear-gradient(to bottom, transparent 0, #000 56px); }
.msg { flex: none; animation: msg-in 0.42s cubic-bezier(.2, .8, .2, 1) both; transform-origin: bottom left; }
.msg.me { transform-origin: bottom right; }
@keyframes msg-in { from { opacity: 0; transform: translateY(12px) scale(0.96); } to { opacity: 1; transform: none; } }
.chat-chip { transition: background 0.25s, transform 0.3s cubic-bezier(.2, .8, .2, 1), opacity 0.3s; }
@media (max-width: 900px) { .chat-log { height: 320px; } }
@media (max-width: 400px) { .chat-log { height: 300px; } .msg { font-size: 15px; } }

/* Coming soon: every card a column, its "Notify me" pinned to the bottom so buttons in a row line up. */
.soon { align-items: stretch; }
.soon-card { display: flex; flex-direction: column; align-items: flex-start; }
.soon-card > p { margin-bottom: 24px; }
.soon-card .notify { margin-top: auto; min-height: 48px; padding: 0 20px; font-size: 16px; }
.soon-card .notify .icon { font-size: 19px; }
.soon-card > .trio { align-self: stretch; }
.soon-card > .outfit-art { align-self: center; }
/* The hero's ".buddy" (absolute, bobbing) also matched Buddy's chat bubbles and threw them out of the log. */
.msg.buddy { position: relative; inset: auto; cursor: default; animation: msg-in 0.42s cubic-bezier(.2, .8, .2, 1) both; transform-origin: bottom left; }

/* Language menu on phones (session 3a4997c2): anchored to the sticky header, not the button, so it keeps 12 px from
   both screen edges whatever the language puts where; scrolls inside on a short screen. */
@media (max-width: 640px) {
  .lang-menu { position: static; }
  .lang-menu ul {
    inset-inline: 12px; width: auto; top: calc(100% + 4px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: calc(100dvh - 90px); overflow-y: auto; overscroll-behavior: contain;
    transform-origin: top center;
  }
  [dir=rtl] .lang-menu ul { transform-origin: top center; }
  .lang-menu li, .lang-menu a { min-width: 0; }
  .lang-menu a { padding: 10px; gap: 8px; font-size: 15px; }
}
@media (max-width: 640px) {
  .lang-menu ul { padding: 8px; gap: 2px; }
  .lang-menu a { padding: 10px 8px; gap: 8px; white-space: normal; line-height: 1.2; }
  .lang-menu a .flag { flex: none; }
  .lang-menu a span { overflow: visible; text-overflow: clip; }
}
@media (max-width: 400px) { .lang-menu a { font-size: 14px; } }

/* Share cards that float (session 3a4997c2): each card drifts on its own slow beat. "translate" and "rotate" are
   separate properties, so the drift adds to the fan's own transforms and to the scale the carousel sets. */
@keyframes drift { 0%, 100% { translate: 0 0; rotate: -0.8deg; } 50% { translate: 0 -12px; rotate: 0.8deg; } }
.fan img { animation: drift 6s ease-in-out infinite; will-change: translate; }
.fan img:nth-child(2) { animation-duration: 6.8s; animation-delay: -1.2s; }
.fan img:nth-child(3) { animation-duration: 5.6s; animation-delay: -2.4s; }
.fan img:nth-child(4) { animation-duration: 7.2s; animation-delay: -0.6s; }
.fan img:nth-child(5) { animation-duration: 6.2s; animation-delay: -3.1s; }
.fan img:nth-child(6) { animation-duration: 6.6s; animation-delay: -1.8s; }
.fan-dots { display: none; }

/* Phones and tablets: one big card in the middle, its neighbours peeking, swiped and snapped to the centre. */
@media (max-width: 900px) {
  .fan, .fan:hover {
    --cw: min(74vw, 300px);
    display: flex; justify-content: flex-start; gap: 0; overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
    padding: 28px calc(50% - var(--cw) / 2) 34px;
  }
  .fan img, .fan img:nth-child(n), .fan:hover img, .fan img:hover {
    flex: 0 0 var(--cw); width: var(--cw); margin: 0 6px; border-radius: 24px; transform: none;
    scroll-snap-align: center; scroll-snap-stop: always;
    box-shadow: 0 34px 50px -30px rgba(13, 13, 18, 0.65);
    transition: none;
  }
  .fan-dots { display: flex; justify-content: center; gap: 8px; margin-top: 2px; }
  .fan-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px; background: rgba(13, 13, 18, 0.18); transition: width 0.35s cubic-bezier(.2, .8, .2, 1), background 0.35s; }
  .fan-dots button.on { width: 26px; background: var(--ink); }
  .share-note { margin-top: 14px; }
}
/* The carousel scrolls, so it clips: room below for the whole (softer) shadow, pulled back with a negative margin. */
@media (max-width: 900px) {
  .fan, .fan:hover { padding-top: 24px; padding-bottom: 56px; margin-bottom: -26px; }
  .fan img, .fan img:nth-child(n), .fan:hover img, .fan img:hover { box-shadow: 0 16px 28px -16px rgba(13, 13, 18, 0.5), 0 2px 6px rgba(13, 13, 18, 0.06); }
}

/* Store buttons the width of the form above them, half each (session 3a4997c2). */
.hero .stores, .stores.center { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; }
.hero .stores { max-width: 520px; }
.stores.center { max-width: 640px; margin-inline: auto; }
.stores .store, .stores .store:nth-child(n) { min-width: 0; min-height: 62px; justify-content: center; border-radius: 16px; padding: 10px 14px; transition: transform 0.3s cubic-bezier(.2, .8, .2, 1), box-shadow 0.3s; }
.stores .store:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 12px 22px -14px rgba(13, 13, 18, 0.7); }
.stores .store:active { transform: scale(0.97); }

/* The little things: a calm lift instead of a springy hop, the icon grows a touch without tilting. */
.feature { transition: transform 0.4s cubic-bezier(.2, .8, .2, 1), box-shadow 0.4s cubic-bezier(.2, .8, .2, 1), background-color 0.3s; }
.feature:hover { transform: translateY(-4px); background-color: #fff; box-shadow: 0 0 0 1px var(--line), 0 18px 34px -24px rgba(13, 13, 18, 0.35); }
.feature .fi { transition: transform 0.4s cubic-bezier(.2, .8, .2, 1); }
.feature:hover .fi { transform: scale(1.08); }
.feature:active { transform: scale(0.985); transition-duration: 0.15s; }
@media (hover: none) { .feature:hover { transform: none; background-color: var(--ivory); box-shadow: 0 0 0 1px var(--line); } .feature:hover .fi { transform: none; } }

/* Legal pages (session 3a4997c2): long reading, so a calm measure, clear headings and tables that scroll on phones. */
.legal { max-width: 760px; }
.legal h1 { font-size: clamp(38px, 6vw, 60px); margin: 8px 0 14px; }
.legal h1 + p { font-size: 14px; color: var(--muted); }
.legal h2 { font-size: 22px; margin: 44px 0 10px; scroll-margin-top: 90px; }
.legal p, .legal li { font-size: 16px; line-height: 1.65; color: #3b3b42; }
.legal p { margin: 0 0 14px; }
.legal ul { margin: 0 0 16px; padding-inline-start: 22px; display: grid; gap: 8px; }
.legal li::marker { color: var(--cobalt); }
.legal strong { color: var(--ink); }
.legal a { color: var(--cobalt); text-underline-offset: 3px; overflow-wrap: anywhere; }
.legal-draft { display: inline-block; margin: 0 0 18px !important; padding: 8px 14px; border-radius: 14px; background: var(--citron); color: var(--ink) !important; font-size: 14px !important; font-weight: 700; line-height: 1.4 !important; }
.legal .table { margin: 6px 0 20px; overflow-x: auto; border-radius: 16px; box-shadow: 0 0 0 1px var(--line); }
.legal table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.45; }
.legal th, .legal td { padding: 10px 12px; text-align: start; vertical-align: top; border-bottom: 1px solid var(--line); }
.legal th { background: var(--paper); font-weight: 800; }
.legal tr:last-child td { border-bottom: 0; }
@media (max-width: 640px) { .legal table { min-width: 560px; } .legal h2 { font-size: 20px; } .legal p, .legal li { font-size: 15px; } }

/* The little things, folded to eight (session 3a4997c2, T-349): the rest open with "Show all". */
#more #features-grid.folded > .feature:nth-child(n+9) { display: none; }
.more-toggle { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 22px auto 0; min-height: 48px; padding: 0 26px; border: 0; border-radius: 999px; background: var(--ink); color: var(--lime); font-weight: 800; font-size: 16px; cursor: pointer; transition: transform 0.3s cubic-bezier(.2, .8, .2, 1), box-shadow 0.3s; }
.more-toggle[hidden] { display: none; }
.more-toggle::after { content: ""; width: 8px; height: 8px; border: solid currentColor; border-width: 0 2.5px 2.5px 0; transform: translateY(-2px) rotate(45deg); transition: transform 0.3s cubic-bezier(.2, .8, .2, 1); }
.more-toggle[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
.more-toggle:hover { transform: translateY(-2px); box-shadow: 0 12px 22px -14px rgba(13, 13, 18, 0.7); }
.more-toggle:active { transform: scale(0.97); }
#more { scroll-margin-top: 80px; }
.features { scroll-margin-top: 90px; }

/* Plan explorer: "How are you feeling today?" shows the session the app would give, by its own rules
   (Workout.adjusted(.easy) for sore legs, a rest day when unwell). Dropped parts stay in the row, hatched. */
.planner .today { display: grid; gap: 12px; margin-top: 24px; padding: 18px 20px; border: 1px solid rgba(52, 48, 237, 0.14); border-radius: 22px; background: rgba(52, 48, 237, 0.045); }
.planner .today-label { font-weight: 800; font-size: 16px; letter-spacing: -0.01em; }
.feel-options { display: flex; flex-wrap: wrap; gap: 8px; }
.feel-options button { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 8px 15px; border: 1px solid rgba(13, 13, 18, 0.14); border-radius: 999px; background: #fff; color: var(--ink); font: inherit; font-size: 15px; font-weight: 700; line-height: 1.2; cursor: pointer; transition: background-color 0.25s, color 0.25s, border-color 0.25s, transform 0.25s var(--spring), box-shadow 0.25s; }
.feel-options button .icon { flex: none; width: 17px; height: 17px; }
.feel-options button:hover { border-color: rgba(13, 13, 18, 0.32); }
.feel-options button:active { transform: scale(0.96); }
.feel-options button[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--lime); box-shadow: 0 8px 18px -10px rgba(13, 13, 18, 0.55); }
.feel-options button:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 2px; }
.planner .today .why { margin: 0; color: var(--cobalt); font-weight: 750; font-size: 16px; line-height: 1.4; }
.planner[data-feel="sore"] .today .why { color: #9A5300; }
.planner[data-feel="unwell"] .today .why { color: var(--ink); }
.planner .today .data { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.planner .total { transition: color 0.3s; }
.planner[data-feel="sore"] .total { color: #9A5300; }
.planner[data-feel="unwell"] .total { color: var(--ink); }
.bars i.cut { background: repeating-linear-gradient(-45deg, rgba(52, 48, 237, 0.24) 0 5px, rgba(52, 48, 237, 0.07) 5px 10px); }
.bars i.walk.cut { background: repeating-linear-gradient(-45deg, rgba(222, 222, 92, 0.75) 0 5px, rgba(245, 245, 138, 0.3) 5px 10px); }
.plan-plus { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0; padding: 16px 20px; border-radius: 22px; background: var(--ink); color: rgba(255, 253, 250, 0.86); font-size: 15px; line-height: 1.45; }
.plan-plus .plus-tag { flex: none; padding: 4px 11px; border-radius: 999px; background: var(--lime); color: var(--ink); font-weight: 800; font-size: 13px; letter-spacing: 0.02em; }
.plan-plus .text { flex: 1 1 300px; min-width: 0; text-wrap: pretty; }
.plan-plus a { flex: none; color: var(--lime); font-weight: 800; text-decoration: none; white-space: nowrap; }
.plan-plus a::after { content: " →"; }
[dir=rtl] .plan-plus a::after { content: " ←"; }
.plan-plus a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 560px) {
  .planner .today { padding: 16px; }
  .feel-options button { padding: 8px 12px; font-size: 14px; }
  .plan-plus { padding: 16px; }
}

/* Walkthrough fixes (2026-10-19): a price and its unit stay together, the Plus Buddy sits beside the subtitle instead
   of on the price, the saving badge is readable, the phone's bottom bar shows its whole line, and the recovery
   sticker no longer covers the week's numbers on phones. */
.price { flex-wrap: wrap; row-gap: 2px; }
.price span { white-space: nowrap; }
.tier-buddy { top: 64px; width: 104px; }
.plus-tier .price, .plus-tier .price-alt { padding-inline-end: 0; }
.plus-tier .sub { padding-inline-end: 112px; min-height: 92px; }
#pricing .billing button b { font-size: 11px; }
@media (max-width: 560px) {
  .plus-tier .badge { position: static; align-self: flex-start; margin-bottom: 12px; }
  .tier-buddy { top: 104px; width: 78px; }
  .plus-tier .price, .plus-tier .price-alt { padding-inline-end: 0; }
  .plus-tier .sub { padding-inline-end: 84px; min-height: 78px; }
  .price strong { font-size: 44px; }
  #pricing .tier .button.wide { padding-inline: 16px; font-size: 15px; text-align: center; }
  #pricing .billing button b { font-size: 10.5px; }
}
@media (max-width: 1000px) {
  .sticky-cta small { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.25; }
  .split .shot-stack { margin-bottom: 52px; }
  .shot-stack .sticker { width: 30%; inset-inline-end: -6%; bottom: -15%; }
}

/* Structure pass (2026-10-19): the Buddy club lives inside the runner-number panel, and the roadmap is six equal
   compact cards instead of two illustrated and four tall ones. */
.members-block { padding-bottom: var(--pad-panel); }
.members-block .members { margin-top: 14px; }
.members-hint { margin: 0; font-weight: 700; font-size: 15px; color: rgba(13, 13, 18, 0.7); }
.lime-panel .member .face { box-shadow: 0 0 0 1px rgba(13, 13, 18, 0.08), 0 10px 22px -16px rgba(13, 13, 18, 0.45); }
.lime-panel .member .face.back { background: var(--ink); }
.lime-panel .member small { color: rgba(13, 13, 18, 0.62); }
.roadmap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: var(--gap-body); }
.road { display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: auto 1fr auto; column-gap: 14px; row-gap: 6px; align-content: start; padding: 20px; border-radius: 24px; background: var(--ivory); box-shadow: 0 0 0 1px var(--line); }
.road-icon { grid-row: 1 / 3; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--lime); color: var(--ink); }
.road-icon.cobalt { background: var(--cobalt); color: #fff; }
.road-icon.ink { background: var(--ink); color: var(--lime); }
.road-icon .icon { width: 22px; height: 22px; }
.road h3 { align-self: center; margin: 0; font-size: 18px; line-height: 1.25; letter-spacing: -0.01em; text-wrap: balance; }
.road p { grid-column: 2; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.45; text-wrap: pretty; }
.road .notify { grid-column: 2; justify-self: start; margin-top: 10px; padding: 8px 14px; font-size: 14px; }
@media (max-width: 1000px) { .roadmap { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  .roadmap { grid-template-columns: 1fr; gap: 10px; }
  .road { padding: 16px; column-gap: 12px; }
  .road-icon { width: 40px; height: 40px; border-radius: 12px; }
}
#more .features { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) { #more .features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  #more .features { grid-template-columns: 1fr; }
  .members > :last-child:nth-child(3n + 1) { grid-column: 2; }
}

/* Hero: the store buttons are a quiet "coming soon" row, so signing up stays the one loud action there. The
   closing call keeps the dark badges. */
.hero .stores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.hero .stores .store, .hero .stores .store:nth-child(n) { grid-template-columns: 30px minmax(0, 1fr); column-gap: 12px; min-height: 58px; padding: 9px 16px; border: 1px solid rgba(13, 13, 18, 0.14); background: rgba(13, 13, 18, 0.07); box-shadow: none; }
.hero .stores .store .store-mark { width: 30px; height: 30px; }
.hero .stores .store-ios .store-mark { filter: brightness(0); }
.hero .stores .store .store-copy { grid-template-rows: 13px 22px; gap: 1px; }
.hero .stores .store .store-copy small { color: rgba(13, 13, 18, 0.62); font-size: 10.5px; line-height: 13px; }
.hero .stores .store .store-name { color: var(--ink); font-size: 17px; line-height: 22px; }
.hero .stores .store:hover { background: rgba(13, 13, 18, 0.11); box-shadow: none; }
@media (max-width: 560px) {
  .hero .stores .store, .hero .stores .store:nth-child(n) { grid-template-columns: 26px minmax(0, 1fr); column-gap: 10px; min-height: 54px; padding: 8px 12px; }
  .hero .stores .store .store-mark { width: 26px; height: 26px; }
  .hero .stores .store .store-name { font-size: 15px; }
  .hero .stores.stores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Buddy AI chat: a sent question flies from where it was written (the field or a suggestion) into the log. */
.chat-ghost { position: absolute; z-index: 5; margin: 0; max-width: none; pointer-events: none; transform-origin: top left; animation: none; box-shadow: 0 12px 24px -12px rgba(13, 13, 18, 0.5); }
.chat-input span.typed { color: #fff; }
.chat-chip[hidden] { display: none; }
@media (max-width: 900px) { .chat { position: relative; } }
/* Runner number: the steps tick off while the bib counts, then the bib lands with a ring behind it. */
.steps li { transition: opacity 0.35s ease; }
.steps li span { transition: background-color 0.3s ease, color 0.3s ease; }
.steps.counting li:not(.done) { opacity: 0.45; }
.steps li.done span { background: #fff; color: var(--ink); animation: step-pop 0.45s var(--spring); }
@keyframes step-pop { 0% { transform: scale(0.7); } 60% { transform: scale(1.15); } 100% { transform: none; } }
.bib-ring { position: absolute; left: 50%; z-index: 0; border: 3px solid rgba(255, 255, 255, 0.9); border-radius: 26px; pointer-events: none; }
.bib { z-index: 1; }