:root {
  color-scheme: dark;
  --bg: #0b1640;
  --bg-deep: #050a22;
  --text: #eef2ff;
  --muted: #aab4dd;
  --accent: #5ab8ff;
}

* { box-sizing: border-box; }

html { min-height: 100%; background: var(--bg-deep); }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font: 17px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
  background: radial-gradient(ellipse at top, #1a2f86 0%, var(--bg) 45%, var(--bg-deep) 100%) fixed;
}

main {
  flex: 1;
  width: 100%;
  max-width: 40rem;
  margin: 0 auto;
  padding: 4rem 1.5rem 2rem;
  text-align: center;
}

.logo {
  border-radius: 22%;
  box-shadow: 0 12px 40px rgb(0 0 0 / 45%);
}

h1 {
  margin: 1.25rem 0 0.5rem;
  font-size: clamp(2.25rem, 7vw, 3.25rem);
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.lead {
  margin: 0 0 2rem;
  font-size: 1.25rem;
  line-height: 1.6;
  color: var(--muted);
}

.features {
  display: inline-block;
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
  text-align: left;
}

.features li {
  margin: 0.5rem 0;
  padding-left: 1.5rem;
  position: relative;
}

.features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--accent);
}

/* The home page's language figures: how many languages are heard, and how many captions translate into. */
.figures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  max-width: 28rem;
  margin: 0 auto 3rem;
  padding: 0;
  list-style: none;
  color: var(--muted);
  line-height: 1.35;
  text-wrap: balance;
}
.figures strong {
  display: block;
  margin-bottom: 0.25rem;
  font-size: clamp(2.25rem, 7vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--accent);
}
/* Each figure opens its list on /languages (owner, Oct 31, 2026: "user should be able to view each language supported"). */
.figures a { display: block; color: inherit; text-decoration: none; }
.figures a span { text-decoration: underline; text-decoration-color: rgb(255 255 255 / 30%); text-underline-offset: 0.2em; }
.figures a:hover span, .figures a:focus-visible span { color: var(--text); text-decoration-color: currentColor; }

/* /languages: each platform's languages and the spoken ones, A to Z, in columns. */
.doc h3 { margin: 1.5rem 0 0.25rem; font-size: 1.05rem; }
.language-list { columns: 3 8.5rem; column-gap: 1.25rem; margin: 0.5rem 0 1rem; padding-inline-start: 1.25rem; }
.doc .language-list li { margin: 0 0 0.3rem; break-inside: avoid; }

.platforms { color: var(--muted); }

/* Read by screen readers, not shown. */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* The bar at the top: the way to every page, and to Download. */
.top {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem max(1.25rem, calc((100vw - 64rem) / 2));
  background: rgb(8 16 52 / 72%);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgb(255 255 255 / 8%);
}
.top .brand img { display: block; border-radius: 22%; }
.top nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.35rem 1.1rem; font-size: 0.95rem; }
.top nav a { color: var(--muted); font-weight: 600; text-decoration: none; }
.top nav a:hover, .top nav a:focus-visible { color: var(--text); }
.top nav .nav-download { padding: 0.35rem 0.9rem; border-radius: 999px; background: var(--accent); color: var(--bg-deep); }
.top nav .nav-download:hover, .top nav .nav-download:focus-visible { background: #8fd0ff; color: var(--bg-deep); }
@media (max-width: 30rem) { .top nav a[href="/changelog"] { display: none; } }

.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin: 0 0 0.9rem; }
.button.ghost { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1px currentColor; }
.button.ghost:hover, .button.ghost:focus-visible { background: rgb(90 184 255 / 12%); }
.trust { margin: 0 0 2.5rem; font-size: 0.9rem; color: var(--muted); }

/* The four features as cards, wider than the text, like the cover. */
main > .features {
  position: relative;
  left: 50%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  width: min(56rem, 100vw - 3rem);
  transform: translateX(-50%);
}
main > .features li {
  margin: 0;
  padding: 1.1rem 1.1rem 1.2rem;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 1rem;
  background: rgb(255 255 255 / 4%);
  color: var(--muted);
  line-height: 1.45;
}
main > .features li::before { content: none; }
main > .features strong { color: var(--text); }
.features svg { display: block; width: 1.75rem; height: 1.75rem; margin-bottom: 0.6rem; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 52rem) { main > .features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 26rem) { main > .features { grid-template-columns: minmax(0, 1fr); } }

/* Free, or Pro: what each has. */
.everything, .faq { margin-top: 3.5rem; }
.everything h2, .faq h2 { margin: 0 0 1.25rem; font-size: 1.5rem; }
/* Everything Wuai does: one card, its list in two columns. */
.everything ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem 2rem; margin: 0; padding: 1.4rem 1.4rem 1.4rem 2.6rem; border: 1px solid rgb(255 255 255 / 12%); border-radius: 1rem; background: rgb(255 255 255 / 4%); text-align: left; }
@media (max-width: 34rem) { .everything ul { grid-template-columns: minmax(0, 1fr); } }

/* Questions: each opens by itself, with no script. */
.faq { text-align: left; }
.faq h2 { text-align: center; }
.faq details { border-bottom: 1px solid rgb(255 255 255 / 12%); }
.faq summary { padding: 0.9rem 0; font-weight: 700; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent); font-size: 1.3rem; line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: 0 0 1rem; color: var(--muted); }

/* What people use it for: the guides, from the home page. */
.uses { margin-top: 3.5rem; }
.uses h2 { margin: 0 0 1.25rem; font-size: 1.5rem; }
.uses ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin: 0; padding: 0; list-style: none; text-align: left; }
.uses li a { display: block; height: 100%; padding: 1rem 1.2rem; border: 1px solid rgb(255 255 255 / 12%); border-radius: 1rem; background: rgb(255 255 255 / 4%); color: var(--text); font-weight: 700; text-decoration: none; }
.uses li a::after { content: " →"; color: var(--accent); }
.uses li a:hover, .uses li a:focus-visible { border-color: var(--accent); }
/* Real-time translation, the key use, takes the whole first row: five cards leave no gap in two columns. */
.uses li:first-child { grid-column: 1 / -1; }
@media (max-width: 34rem) { .uses ul { grid-template-columns: minmax(0, 1fr); } }
.uses .in-languages { margin: 1.25rem 0 0; font-size: 0.9rem; color: var(--muted); line-height: 1.9; }
.guide h1 { line-height: 1.15; }
.guide .lead { margin-bottom: 1rem; color: var(--text); }
.guide .shots.videos { margin-top: 1.5rem; }

/* What's new (/changelog): each release, newest first. */
.release { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgb(255 255 255 / 12%); }
.release h2 { margin: 0; }
.release time { color: var(--muted); font-size: 0.9rem; }
.release ul { margin: 0.75rem 0 0; }

/* The home page's cover: a picture of Wuai at work right under the lead's buttons, wider than the text, that
   opens How it works (its label is for screen readers: See how it works is just above). */
.cover {
  display: block;
  position: relative;
  left: 50%;
  width: min(56rem, 100vw - 3rem);
  margin: 0 0 2.75rem;
  transform: translateX(-50%);
}
.cover img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1rem;
  box-shadow: 0 18px 50px rgb(0 0 0 / 50%);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cover:hover img, .cover:focus-visible img { transform: translateY(-3px); box-shadow: 0 0 0 3px var(--accent), 0 22px 60px rgb(0 0 0 / 55%); }
.cover:focus-visible { outline: none; }
@media (prefers-reduced-motion: reduce) { .cover img { transition: none; } .cover:hover img, .cover:focus-visible img { transform: none; } }

.download h2 { margin: 0 0 1rem; font-size: 1.5rem; }
h2[id] { scroll-margin-top: 5rem; }

/* Download for the visitor's device: the build's size, then the steps through each warning, numbered. */
.what { max-width: 34rem; margin: 0 auto 0.6rem; color: var(--text); }
.download .size { margin: 0.75rem 0 0; font-size: 0.9rem; color: var(--muted); }
.download .install { max-width: 34rem; margin: 1.25rem auto 0; padding-left: 1.4rem; text-align: start; color: var(--muted); }
.download .install li { margin: 0.45rem 0; padding-left: 0.2rem; }
.download .install li::marker { color: var(--accent); font-weight: 700; }
.download .install strong, .download .not-yet strong { color: var(--text); }
.download .not-yet { max-width: 34rem; margin: 0 auto 0.5rem; }
/* Windows' warning, drawn (not a screenshot): its two choices numbered as the steps are. */
.smartscreen { max-width: 26rem; margin: 1.5rem auto 1rem; }
.ss-window { padding: 1.1rem 1.25rem 1rem; border-radius: 0.4rem; background: #0b5cad; color: #fff; text-align: start; font-size: 0.85rem; line-height: 1.45; box-shadow: 0 10px 30px rgb(0 0 0 / 45%); }
.ss-window p { margin: 0 0 0.7rem; }
.ss-window .ss-title { font-size: 1.25rem; font-weight: 600; }
.ss-window .ss-link { text-decoration: underline; }
.ss-window .ss-app { opacity: 0.9; }
.ss-window .ss-buttons { display: flex; justify-content: flex-end; align-items: center; gap: 0.45rem; margin: 0; }
.ss-window .ss-button { padding: 0.35rem 0.9rem; border: 1px solid rgb(255 255 255 / 70%); }
.ss-window .ss-go { background: rgb(255 255 255 / 18%); }
.ss-window .step { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; margin: 0 0.45rem; border-radius: 50%; background: #ffd23f; color: #000; font-weight: 800; font-size: 0.8rem; }
.smartscreen figcaption { margin-top: 0.6rem; font-size: 0.85rem; color: var(--muted); }

.buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }

.button {
  min-width: 9rem;
  padding: 0.8rem 1.4rem;
  border-radius: 0.8rem;
  background: var(--accent);
  color: var(--bg-deep);
  font-weight: 700;
  text-decoration: none;
}

.button:hover, .button:focus-visible { background: #8fd0ff; }

.qr { margin: 1.5rem auto 0; }

.qr img { display: block; margin: 0 auto 0.5rem; border-radius: 0.6rem; background: #fff; }

.qr figcaption, .note { font-size: 0.9rem; color: var(--muted); }

/* On a phone the button is the way in: the code is for a computer's screen. */
@media (max-width: 40rem), (pointer: coarse) { .qr { display: none; } }

a { color: var(--accent); }

footer {
  padding: 1.5rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--muted);
}

footer nav { margin-bottom: 0.4rem; }
footer p { margin: 0; }
footer .languages { max-width: 44rem; margin: 0 auto 0.9rem; line-height: 1.9; }
footer .languages [aria-current] { color: var(--text); font-weight: 700; text-decoration: none; }

/* Privacy, Terms and Support: reading pages (and the guides, right to left in Arabic). */
.doc { max-width: 44rem; text-align: start; padding-top: 2.5rem; }
.doc h1 { margin-top: 0.5rem; }
.doc h2 { margin: 2rem 0 0.5rem; font-size: 1.25rem; }
.doc li { margin: 0.35rem 0; }
.doc .updated { color: var(--muted); font-size: 0.9rem; }
.doc code { padding: 0.1rem 0.35rem; border-radius: 0.3rem; background: rgb(255 255 255 / 8%); font-size: 0.9em; overflow-wrap: anywhere; }
main > .note { margin-top: 2rem; }

/* How it works (/demo): each feature's steps, then its videos playing, Windows beside Android. */
.demo { max-width: 68rem; padding-top: 2.5rem; }
.demo .jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin: 0 0 1rem; }
.demo .jump a { padding: 0.4rem 0.95rem; border: 1px solid rgb(255 255 255 / 18%); border-radius: 999px; color: var(--text); font-size: 0.95rem; font-weight: 600; text-decoration: none; }
.demo .jump a:hover, .demo .jump a:focus-visible { border-color: var(--accent); color: var(--accent); }
.demo section { margin-top: 4.5rem; }
.demo h2 { margin: 0 0 0.5rem; font-size: 1.75rem; scroll-margin-top: 5.5rem; }
.demo section > p { max-width: 38rem; margin: 0 auto 1.25rem; color: var(--muted); }
.demo section strong { color: var(--text); }
.demo .steps { max-width: 34rem; margin: 0 auto 1.75rem; padding-left: 1.4rem; text-align: start; color: var(--muted); }
.demo .steps li { margin: 0.35rem 0; padding-left: 0.2rem; }
.demo .steps li::marker { color: var(--accent); font-weight: 700; }
.demo section > p.more { margin: 1.25rem auto 0; font-size: 0.92rem; }
.demo .get { padding-top: 3rem; border-top: 1px solid rgb(255 255 255 / 10%); }
.demo .get .hero-actions { margin: 1.25rem auto 1.5rem; }
.shots { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.45fr); gap: 1.25rem; align-items: start; }
.shots.single { grid-template-columns: minmax(0, 18rem); justify-content: center; }
.shots figure { margin: 0; }
.shots img { display: block; width: 100%; height: auto; border-radius: 0.6rem; box-shadow: 0 10px 30px rgb(0 0 0 / 45%); }
.shots .phone img { border-radius: 1.2rem; }
.shots.videos { margin-top: 1.25rem; }
.shots.wide { grid-template-columns: minmax(0, 1fr); max-width: 56rem; margin-left: auto; margin-right: auto; }
.shots video { display: block; width: 100%; height: auto; border-radius: 0.6rem; background: #000; box-shadow: 0 10px 30px rgb(0 0 0 / 45%); }
.shots .phone video { border-radius: 1.2rem; }
.shots figcaption { margin-top: 0.6rem; font-size: 0.9rem; color: var(--muted); }
@media (max-width: 48rem) {
  .shots { grid-template-columns: minmax(0, 1fr); }
  .shots .phone { width: 100%; max-width: 18rem; margin: 0 auto; }
  /* On a phone's screen the phone's video comes first: the computer's is too small there to read. */
  .demo .shots .phone { order: -1; }
}

/* Wuai Pro's key on the thank-you page. */
.key-box { display: grid; gap: 0.5rem; margin: 1rem 0; }
.key-box textarea { width: 100%; box-sizing: border-box; padding: 0.75rem; border-radius: 0.6rem; border: 1px solid rgb(255 255 255 / 25%);
  background: rgb(255 255 255 / 8%); color: var(--text); font: 0.9rem/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; resize: vertical; overflow-wrap: anywhere; }
.doc .buttons { justify-content: flex-start; }
button.button { border: 0; cursor: pointer; font: inherit; font-weight: 700; }

/* Sites you can save from (/allowed-sites): by category, each site with what it offers and its terms. */
.sites .jump { display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; margin: 1.25rem 0 0; padding: 0; list-style: none; font-size: 0.95rem; }
.sites .jump li { margin: 0; }
.sites section { margin-top: 2.25rem; }
.sites h2 { margin-bottom: 0.25rem; }
.sites h3 { margin: 1.25rem 0 0.25rem; font-size: 0.95rem; color: var(--muted); }
.sites section > p { margin: 0 0 0.5rem; color: var(--muted); }
.site-list { margin: 0; padding: 0; list-style: none; }
.doc .site-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; margin: 0; padding: 0.6rem 0;
  border-bottom: 1px solid rgb(255 255 255 / 10%); }
.site-list li > a:first-child { font-weight: 700; }
.site-list li span { grid-column: 1; font-size: 0.9rem; color: var(--muted); }
.site-list .terms { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 0.9rem; }
/* Wuai compared (/compare): one table, scrolled sideways on a small screen with each row's name kept in sight;
   Wuai's column marked. */
.compare { max-width: 60rem; }
.table-scroll { overflow-x: auto; margin: 1.5rem 0 0.5rem; border-radius: 0.75rem; border: 1px solid rgb(255 255 255 / 12%); background: var(--bg); }
.compare-table { width: 100%; min-width: 46rem; border-collapse: collapse; font-size: 0.9rem; line-height: 1.4; }
.compare-table caption { padding: 0.75rem 1rem; text-align: start; font-weight: 700; }
.compare-table th, .compare-table td { padding: 0.6rem 0.75rem; text-align: start; vertical-align: top; border-top: 1px solid rgb(255 255 255 / 10%); }
.compare-table thead th { color: var(--muted); font-weight: 600; }
.compare-table tbody th { width: 11rem; color: var(--muted); font-weight: 600; }
.compare-table tbody th, .compare-table thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--bg); }
@media (max-width: 40rem) { .compare-table tbody th { width: 7.5rem; min-width: 7.5rem; } }
.compare-table .ours { background: rgb(90 184 255 / 10%); }
.compare-table thead .ours { color: var(--text); }
.doc .sources li { font-size: 0.95rem; }
/* Visits (/stats, the owner's page behind Cloudflare Access): worker/stats.mjs, its bars native meters (no inline style). */
.stats .jump { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0; }
.stats .jump a { padding: 0.35rem 0.9rem; border: 1px solid rgb(255 255 255 / 18%); border-radius: 999px; color: var(--text); font-size: 0.9rem; font-weight: 600; text-decoration: none; }
.stats .jump a[aria-current="page"] { border-color: var(--accent); color: var(--accent); }
.stats .totals { font-size: 1.05rem; }
.stats-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.stats-table th, .stats-table td { padding: 0.45rem 0.6rem; text-align: start; border-top: 1px solid rgb(255 255 255 / 10%); overflow-wrap: anywhere; }
.stats-table thead th { color: var(--muted); font-weight: 600; border-top: 0; }
.stats-table .n { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stats-table .bar { width: 30%; }
.stats-table th:first-child, .stats-table td:first-child { white-space: nowrap; }
@media (max-width: 30rem) { .stats-table th, .stats-table td { padding: 0.4rem 0.4rem; } .stats-table .bar { width: 18%; } }
.stats-table meter { display: block; width: 100%; min-width: 3rem; height: 0.7rem; appearance: none; border: 0; border-radius: 999px; background: rgb(255 255 255 / 10%); }
.stats-table meter::-webkit-meter-bar { border: 0; border-radius: 999px; background: rgb(255 255 255 / 10%); }
.stats-table meter::-webkit-meter-optimum-value { border-radius: 999px; background: var(--accent); }
.stats-table meter::-moz-meter-bar { border-radius: 999px; background: var(--accent); }

/* Skip link (site accessibility, Nov 1, 2026): first stop for the keyboard, shown when focused. */
.skip { position: absolute; left: 1rem; top: -3rem; z-index: 10; padding: 0.5rem 0.9rem; border-radius: 0.5rem;
  background: var(--accent); color: var(--bg-deep); font-weight: 600; text-decoration: none; }
.skip:focus { top: 1rem; }
/* Home hero (owner, Nov 1, 2026): the name above, captions as the headline, what it does as labels. */
.eyebrow { margin: 1rem 0 0; font-size: 0.95rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.eyebrow + h1 { margin-top: 0.35rem; }
.tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin: 0 0 1.5rem; padding: 0; list-style: none; }
.tags li { padding: 0.25rem 0.8rem; border: 1px solid rgb(90 184 255 / 45%); border-radius: 999px; font-size: 0.9rem; color: var(--text); background: rgb(90 184 255 / 8%); }
.trust a { color: var(--accent); }
/* Captions as they are made: a real recording on the home page. */
.live-demo { margin: 0 0 2.5rem; }
.live-demo h2 { font-size: 1.35rem; margin: 0 0 1rem; }
.live-demo figure { margin: 0; }
.live-demo video { display: block; width: 100%; height: auto; border-radius: 0.75rem; box-shadow: 0 18px 50px rgb(0 0 0 / 45%); }
.live-demo figcaption { margin-top: 0.6rem; font-size: 0.9rem; color: var(--muted); }
/* The home page's way to the live captions recording (/live-captions). */
.see-live { margin: 2.5rem 0 0; }