/* PausEvo site. Dark, matches the app. No web fonts, no external files. */
:root {
  --bg: #121114;
  --surface: #1e1d21;
  --surface2: #29272d;
  --line: #3a373e;
  --text: #ece6e2;
  --muted: #b3aba6;
  --brand: #2a9d8f;
  --link: #5cc8b9;
  --red: #ff6b61;
  --teal: #00544b;
  --mint: #7fe3cf;
  --radius: 18px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  overflow-wrap: break-word;
}
a { color: var(--link); }
a:hover { color: #9fe3d9; }
a:focus-visible, summary:focus-visible, .shots:focus-visible { outline: 3px solid var(--mint); outline-offset: 2px; border-radius: 6px; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; }
h2 { font-size: 1.6rem; margin-top: 1.8em; }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; }
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 16px; }
.muted { color: var(--muted); }
.small { font-size: .9rem; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; inset-inline-start: 8px; top: 0; transform: translateY(-120%); background: var(--brand); color: #000; padding: 8px 12px; z-index: 10; }
.skip:focus { transform: none; }

/* wordmark */
.word { font-weight: 800; letter-spacing: -.01em; color: var(--text); }
.word b { color: var(--brand); font-weight: 800; }
.logo-mark { width: 32px; height: 32px; flex: none; }

/* header */
.top { border-bottom: 1px solid var(--line); background: var(--bg); }
.top-in { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; min-height: 60px; padding-top: 8px; padding-bottom: 8px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-size: 1.3rem; }
.nav { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-inline-start: auto; }
.nav a { color: var(--text); text-decoration: none; padding: 6px 2px; }
.nav a:hover { color: var(--link); }
.langs { position: relative; }
.langs summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--text); font-size: .95rem; }
.langs summary::-webkit-details-marker { display: none; }
.langs ul { position: absolute; inset-inline-end: 0; top: calc(100% + 6px); z-index: 5; margin: 0; padding: 6px; list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; width: 220px; max-height: 70vh; overflow: auto; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.langs li a { display: block; padding: 8px 10px; color: var(--text); text-decoration: none; border-radius: 8px; }
.langs li a:hover, .langs li a[aria-current] { background: var(--surface2); }
.langs li a[aria-current] { color: var(--link); font-weight: 700; }
@media (max-width: 600px) {
  .nav { order: 3; width: 100%; margin: 0; }
  .langs { margin-inline-start: auto; }
}

/* language suggestion */
.suggest { background: var(--teal); color: #fff; text-align: center; padding: 10px 16px; }
.suggest a { color: #fff; font-weight: 700; }
.suggest button { background: none; border: 0; color: #fff; font-size: 1.2rem; cursor: pointer; margin-inline-start: 8px; padding: 0 6px; }

/* hero */
.hero { padding: 40px 0 24px; background: radial-gradient(ellipse at 70% 0%, rgba(42,157,143,.22), transparent 60%); }
.hero-in { display: flex; flex-wrap: wrap; align-items: center; gap: 32px; }
.hero-text { flex: 1 1 340px; }
.hero h1 { font-size: 3rem; margin-bottom: .3em; }
.hero h1 .word { display: block; }
.hero h1 .tag { display: block; font-size: 1.35rem; font-weight: 600; color: var(--muted); margin-top: .25em; }
.lead { font-size: 1.2rem; }
.pitch { font-weight: 700; color: var(--mint); font-size: 1.1rem; }
.hero-shot { flex: 0 1 280px; margin: 0 auto; }
.hero-shot img, .shot img { border-radius: 26px; border: 6px solid #000; box-shadow: 0 0 0 1px var(--line), 0 18px 40px rgba(0,0,0,.55); background: #000; }

/* store badges */
.badges { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0 10px; }
.badge { display: inline-flex; flex-direction: column; justify-content: center; min-width: 160px; min-height: 52px; padding: 6px 16px; border-radius: 12px; background: #000; color: #fff; border: 1px solid #555; text-decoration: none; font-weight: 700; }
.badge.off { opacity: .75; cursor: default; }
.b-store { font-size: 1.05rem; }
.b-soon { font-size: .78rem; font-weight: 600; color: var(--red); text-transform: uppercase; letter-spacing: .04em; }

/* screenshots strip */
.band { padding: 24px 0; }
.shots { display: flex; gap: 18px; overflow-x: auto; padding: 6px 4px 14px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.shot { margin: 0; flex: 0 0 60%; max-width: 240px; scroll-snap-align: center; text-align: center; }
.shot figcaption { color: var(--muted); font-size: .9rem; margin-top: 10px; }
@media (min-width: 900px) { .shots { justify-content: center; overflow: visible; } .shot { flex-basis: 220px; } }

/* features */
.cards { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 16px; }
.card { flex: 1 1 280px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.card p { color: var(--muted); margin: 0; }
.ic { display: inline-block; width: 40px; height: 40px; border-radius: 12px; background: var(--teal) center / 24px no-repeat; margin-bottom: 10px; }
.ic-bell { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%237fe3cf' d='M12 22a2 2 0 0 0 2-2h-4a2 2 0 0 0 2 2zm6-6V11c0-3.1-1.6-5.6-4.5-6.3V4a1.5 1.5 0 0 0-3 0v.7C7.6 5.4 6 7.9 6 11v5l-2 2v1h16v-1l-2-2z'/%3E%3C/svg%3E"); }
.ic-lock { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%237fe3cf' d='M18 8h-1V6a5 5 0 0 0-10 0v2H6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2zm-6 9a2 2 0 1 1 0-4a2 2 0 0 1 0 4zm3.1-9H8.9V6a3.1 3.1 0 0 1 6.2 0v2z'/%3E%3C/svg%3E"); }
.ic-fire { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%237fe3cf' d='M20.6 14.9 22 13.5 20.6 12 17 15.6 8.4 7 12 3.4 10.6 2 9.1 3.4 7.7 2 5.6 4.1 4.1 2.7 2.7 4.1l1.4 1.5L2 7.7l1.4 1.4L2 10.6 3.4 12 7 8.4l8.6 8.6L12 20.6l1.4 1.4 1.5-1.4 1.4 1.4 2.1-2.1 1.5 1.4 1.4-1.4-1.4-1.5 2.1-2.1z'/%3E%3C/svg%3E"); }
.ic-sauna { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%237fe3cf' d='M13.5.7s.7 2.6.7 4.8c0 2-1.3 3.7-3.4 3.7S7.3 7.5 7.3 5.5l.1-.4C5.3 7.5 4 10.6 4 14a8 8 0 0 0 16 0c0-5.4-2.6-10.2-6.5-13.3zM11.7 19c-1.8 0-3.2-1.4-3.2-3.1 0-1.6 1-2.8 2.8-3.1s3.6-1.2 4.6-2.6c.4 1.3.6 2.7.6 4.1 0 2.6-2.1 4.7-4.8 4.7z'/%3E%3C/svg%3E"); }
.ic-shield { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%237fe3cf' d='M12 1 3 5v6c0 5.6 3.8 10.7 9 12 5.2-1.3 9-6.4 9-12V5l-9-4zm-2 16-4-4 1.4-1.4 2.6 2.6 6.6-6.6L18 9l-8 8z'/%3E%3C/svg%3E"); }
.ic-globe { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%237fe3cf' d='M12.9 15.1 10.3 12.6v-.1A17.6 17.6 0 0 0 14 6h3V4h-7V2H8v2H1v2h11.2c-.7 1.9-1.7 3.8-3.2 5.4-1-1.1-1.8-2.3-2.4-3.4h-2c.7 1.6 1.7 3.2 3 4.6l-5.1 5L4 19l5-5 3.1 3.1.8-2zM18.5 10h-2L12 22h2l1.1-3h4.8l1.1 3h2l-4.5-12zm-2.6 7 1.6-4.3 1.6 4.3h-3.2z'/%3E%3C/svg%3E"); }
.ic-mail { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%237fe3cf' d='M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E"); }

/* steps */
.steps { counter-reset: s; list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 16px; }
.steps li { counter-increment: s; flex: 1 1 240px; display: flex; gap: 14px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.steps li::before { content: counter(s); flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--brand); color: #04201c; font-weight: 800; display: flex; align-items: center; justify-content: center; }

/* plans */
.plans { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 12px; }
.plan { flex: 1 1 280px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.plan.pro { border: 2px solid var(--brand); }
.plan h3 { font-size: 1.5rem; margin: 0; }
.plan.pro h3 { color: var(--link); }
.price { color: var(--muted); font-weight: 600; }
.ticks { list-style: none; padding: 0; margin: 0; }
.ticks li { position: relative; padding-inline-start: 28px; margin: 8px 0; }
.ticks li::before { content: "✓"; position: absolute; inset-inline-start: 0; color: var(--brand); font-weight: 800; }

/* callout */
.callout { display: flex; gap: 16px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; margin: 32px 0; }
.callout h2 { margin-top: 0; font-size: 1.35rem; }
.callout .ic { flex: none; }
.callout p:last-child { margin-bottom: 0; }

/* documents (privacy, support) */
.doc { max-width: 760px; padding-top: 28px; padding-bottom: 20px; }
.doc h1 { font-size: 2.2rem; }
.doc h2 { font-size: 1.35rem; margin-top: 1.6em; }
.doc h3 { margin-top: 1.2em; color: var(--muted); }
.doc ul { padding-inline-start: 1.3em; }
.doc li { margin: .3em 0; }
.note { background: var(--surface2); border-inline-start: 4px solid var(--brand); padding: 10px 14px; border-radius: 8px; font-size: .95rem; }
.tbl { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .95rem; }
th, td { text-align: start; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line); }
thead th { color: var(--muted); font-weight: 600; }
tbody th { font-weight: 700; width: 38%; }
.faq { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; margin: 10px 0; }
.faq summary { cursor: pointer; padding: 14px 16px; font-weight: 700; list-style-position: inside; }
.faq p { padding: 0 16px 14px; margin: 0; color: var(--muted); }
.center { text-align: center; }
.btn { display: inline-block; background: var(--brand); color: #04201c; text-decoration: none; font-weight: 800; padding: 12px 22px; border-radius: 999px; }

/* footer */
.foot { border-top: 1px solid var(--line); margin-top: 48px; padding: 28px 0 40px; }
.foot-brand { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.foot-brand .logo-mark { width: 26px; height: 26px; }

@media (max-width: 480px) {
  body { font-size: 16px; }
  .hero h1 { font-size: 2.4rem; }
  .hero-shot { flex-basis: 220px; }
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
.doc .callout h2 { margin-top: 0; }

/* mascot (inline SVG). Its animation CSS is appended by build.py from the SVG files. */
.mascot { display: block; width: 100%; height: auto; }
.hero-mascot { width: 120px; margin-bottom: 4px; }
@media (min-width: 700px) { .hero-mascot { width: 150px; } }
.steps li.has-m { flex-direction: column; align-items: center; text-align: center; }
.steps .m { width: 120px; }
.nf-m { width: 160px; margin: 0 auto; }
.plan.pro { position: relative; }
.pro-m { position: absolute; top: -34px; inset-inline-end: 8px; width: 96px; }
.mascot .blinker{transform-box:fill-box;transform-origin:center;animation:m-blink 4.8s infinite}
@keyframes m-blink{0%,42%,48%,92%,100%{transform:scaleY(1)}45%,95%{transform:scaleY(.08)}}
.mascot .tail{transform-origin:160px 78px;animation:m-tail .4s ease-in-out infinite alternate}
@keyframes m-tail{from{transform:rotate(-12deg)}to{transform:rotate(14deg)}}
.mascot .tailslow{transform-origin:160px 78px;animation:m-tailslow 2.4s ease-in-out infinite alternate}
@keyframes m-tailslow{from{transform:rotate(10deg)}to{transform:rotate(24deg)}}
.mascot .sweat{animation:m-drip 1.6s ease-in infinite}
@keyframes m-drip{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(16px)}}
.mascot .d1{animation-delay:-.5s}.mascot .d2{animation-delay:-1.1s}
.mascot .lift{animation:m-lift 1.6s ease-in-out infinite}
@keyframes m-lift{0%,100%{transform:translateY(16px)}50%{transform:translateY(0)}}
.mascot .squash{transform-origin:120px 230px;animation:m-squash 1.6s ease-in-out infinite}
@keyframes m-squash{0%,100%{transform:scale(1.04,.96)}50%{transform:scale(.98,1.03)}}
.mascot .effN{animation:m-effN 1.6s infinite}
@keyframes m-effN{0%,28%,72%,100%{opacity:1}36%,64%{opacity:0}}
.mascot .effE{animation:m-effE 1.6s infinite}
@keyframes m-effE{0%,28%,72%,100%{opacity:0}36%,64%{opacity:1}}
.mascot .blush{animation:m-blush 1.6s ease-in-out infinite}
@keyframes m-blush{0%,100%{opacity:.45}50%{opacity:.95}}
.mascot .breathe{transform-origin:120px 225px;animation:m-breathe 2.4s ease-in-out infinite}
@keyframes m-breathe{0%,100%{transform:scale(1,1)}50%{transform:scale(1.03,1.05)}}
.mascot .headbob{transform-origin:120px 148px;animation:m-bob 4.8s ease-in-out infinite}
@keyframes m-bob{0%,100%{transform:rotate(0)}50%{transform:rotate(6deg)}}
.mascot .bubble{transform-box:fill-box;transform-origin:0% 60%;animation:m-bubble 2.4s ease-in-out infinite}
@keyframes m-bubble{0%{transform:scale(.15);opacity:.95}68%{transform:scale(1.15);opacity:.95}74%{transform:scale(1.4);opacity:0}100%{transform:scale(.15);opacity:0}}
.mascot .z{opacity:0;animation:m-zz 2.4s ease-out infinite}.mascot .z2{animation-delay:-.8s}.mascot .z3{animation-delay:-1.6s}
@keyframes m-zz{0%{opacity:0;transform:translate(0,0) scale(.6)}20%{opacity:1}100%{opacity:0;transform:translate(16px,-34px) scale(1.2)}}
.mascot .sway{transform-origin:120px 214px;animation:m-sway 4.8s ease-in-out infinite}
@keyframes m-sway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
.mascot .steam{opacity:0;animation:m-steam 2.4s ease-out infinite}.mascot .s2{animation-delay:-.8s}.mascot .s3{animation-delay:-1.6s}
@keyframes m-steam{0%{opacity:0;transform:translateY(10px)}30%{opacity:.75}100%{opacity:0;transform:translateY(-36px)}}
.mascot .heat{animation:m-heat 2.4s ease-in-out infinite}
@keyframes m-heat{0%,100%{opacity:.45}50%{opacity:1}}
.mascot .knob{transform-box:fill-box;transform-origin:50% 100%;animation:m-knob 1.2s ease-in-out infinite alternate}
@keyframes m-knob{from{transform:rotate(-10deg)}to{transform:rotate(10deg)}}
.mascot .jump{transform-origin:120px 230px;animation:m-jump .6s ease-in-out infinite}
@keyframes m-jump{0%,100%{transform:translateY(0) scale(1.07,.93)}20%{transform:translateY(-5px) scale(.96,1.05)}50%{transform:translateY(-18px) scale(1,1)}80%{transform:translateY(-5px) scale(.98,1.02)}}
.mascot .shadow{transform-box:fill-box;transform-origin:center;animation:m-shadow .6s ease-in-out infinite}
@keyframes m-shadow{0%,100%{transform:scaleX(1);opacity:.25}50%{transform:scaleX(.7);opacity:.12}}
.mascot .armL{transform-origin:84px 150px;animation:m-armL .3s ease-in-out infinite alternate}
@keyframes m-armL{from{transform:rotate(-14deg)}to{transform:rotate(8deg)}}
.mascot .armR{transform-origin:156px 150px;animation:m-armR .3s ease-in-out infinite alternate}
@keyframes m-armR{from{transform:rotate(14deg)}to{transform:rotate(-8deg)}}
.mascot .flash{animation:m-flash .3s steps(2) infinite}
@keyframes m-flash{0%{opacity:1}50%{opacity:.15}}
.mascot .ring{transform-origin:40px 204px;animation:m-ring .2s linear infinite alternate}
@keyframes m-ring{from{transform:rotate(-14deg)}to{transform:rotate(14deg)}}
.mascot .flexB{transform-origin:0 0;animation:m-flexB 1.2s ease-in-out infinite}
@keyframes m-flexB{0%,100%{transform:scale(.9,.55)}50%{transform:scale(1.1,1.25)}}
.mascot .curlL{transform-origin:44px 140px;animation:m-curlL 1.2s ease-in-out infinite}
@keyframes m-curlL{0%,100%{transform:rotate(0)}50%{transform:rotate(12deg)}}
.mascot .curlR{transform-origin:196px 140px;animation:m-curlR 1.2s ease-in-out infinite}
@keyframes m-curlR{0%,100%{transform:rotate(0)}50%{transform:rotate(-12deg)}}
.mascot .bounce{transform-origin:120px 230px;animation:m-bounce 1.2s ease-in-out infinite}
@keyframes m-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.mascot .spark{transform-box:fill-box;transform-origin:center;animation:m-spark 1.2s ease-in-out infinite}
.mascot .k2{animation-delay:-.4s}.mascot .k3{animation-delay:-.8s}
@keyframes m-spark{0%,100%{transform:scale(0) rotate(0)}50%{transform:scale(1) rotate(45deg)}}
.mascot .conf{animation:m-conf 2.4s linear infinite}
@keyframes m-conf{0%{transform:translateY(-30px) rotate(0);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateY(240px) rotate(540deg);opacity:0}}
@media (prefers-reduced-motion:reduce){.mascot *{animation:none!important}.mascot .z,.mascot .steam{opacity:1}.mascot .effE{opacity:0}}
.mascot .ms0{animation-delay:-0.0s;transform-box:fill-box;transform-origin:center}
.mascot .ms1{animation-delay:-0.3s;transform-box:fill-box;transform-origin:center}
.mascot .ms2{animation-delay:-0.6s;transform-box:fill-box;transform-origin:center}
.mascot .ms3{animation-delay:-0.9s;transform-box:fill-box;transform-origin:center}
.mascot .ms4{animation-delay:-1.2s;transform-box:fill-box;transform-origin:center}
.mascot .ms5{animation-delay:-1.5s;transform-box:fill-box;transform-origin:center}
.mascot .ms6{animation-delay:-1.8s;transform-box:fill-box;transform-origin:center}
.mascot .ms7{animation-delay:-2.1s;transform-box:fill-box;transform-origin:center}