/* Landing page. Shares the app's palette and its two looks, so the product
   does not look like a different piece of software once you sign in. Paper,
   soft off-white with dark text, is the default and is declared on :root so
   a browser with storage blocked still gets it; Ink is the dark original,
   applied as `data-theme="ink"` on <html> by a head script before first
   paint, from the choice made on the console's settings page. */
:root {
  color-scheme: light;
  --bg: #f4f1e9;
  --panel: #fbf9f4;
  --panel-2: #ebe6da;
  --border: #d9d3c4;
  --text: #252a33;
  --muted: #6e6a5e;
  --accent: #2f6fdf;
  --speaker: #2f6fdf;
  --green: #0f9d76;
  --amber: #b45309;
  /* The bar over the page, the lift under the screenshot, and the text that
     sits on a green tag: the three places a colour was written for a dark
     page rather than taken from a token. */
  --nav-bg: rgba(244, 241, 233, 0.9);
  --shadow: 0 24px 60px rgba(70, 58, 30, 0.16);
  --on-green: #ffffff;
}
html[data-theme="ink"] {
  color-scheme: dark;
  --bg: #0e1117;
  --panel: #161b24;
  --panel-2: #1d2430;
  --border: #2a3342;
  --text: #e6ebf2;
  --muted: #8b96a8;
  --accent: #4f8cff;
  --speaker: #4f8cff;
  --green: #2dd4a7;
  --amber: #ffb454;
  --nav-bg: rgba(14, 17, 23, 0.88);
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.42);
  --on-green: #06251d;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

/* ---------- Navigation ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--nav-bg);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 62px;
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 650;
  font-size: 16px;
  text-decoration: none;
  white-space: nowrap;
}
.nav-links { display: flex; gap: 16px; margin-left: 10px; }
/* A section link is a phrase, not a paragraph: it may be dropped from the bar
   but never broken across lines. Without this, a signed-in visitor's address
   squeezes the row until "How it works" stacks into three lines. */
.nav-links a { color: var(--muted); text-decoration: none; font-size: 14px; white-space: nowrap; }
.nav-links a:hover { color: var(--text); }
.nav-cta { margin-left: auto; display: flex; align-items: center; gap: 12px; }

/* One thing on the right of the bar, whoever is looking. Signed out it is
   "Start free"; a separate "Sign in" opened the same page, so it went. Signed
   in it is the visitor's email address, which opens the translator; the
   "Open the translator" button beside it went for the same reason.

   The address can be any length, so it is the one thing in the bar allowed
   to give up width: capped, and ellipsed when there is no room. */
#navAccount {
  min-width: 0;
  max-width: 22em;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-links { flex-shrink: 0; }
.nav-cta { flex-shrink: 0; }
/* The cluster may only shrink when it holds the address — otherwise it would
   shrink with nothing inside it able to, and the button would spill off the
   edge of a phone. */
.nav-cta.has-account { flex-shrink: 1; min-width: 0; }
.nav-cta > *:not(#navAccount) { flex-shrink: 0; }
/* Below this the five links cannot fit beside the brand and the button. The
   page still scrolls to every section they point at. */
@media (max-width: 1024px) {
  .nav-links { display: none; }
}

/* On a phone the bar is the brand, the language, and the one button: "Start
   free", or the address cut shorter. The brand is what gives up the last of
   the width, rather than the bar running off-screen. */
@media (max-width: 560px) {
  #navAccount { max-width: 10.5em; }
  .nav .wrap { padding: 0 14px; }
  .nav-inner { gap: 10px; }
  .nav-cta { gap: 8px; }
  .nav-brand { min-width: 0; }
  .nav-brand .brand-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}

.btn {
  display: inline-block;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  border-radius: 9px;
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 550;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { border-color: var(--accent); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { filter: brightness(1.1); }
.btn.ghost { background: none; border-color: transparent; color: var(--muted); }
.btn.ghost:hover { color: var(--text); }
.btn.lg { padding: 13px 24px; font-size: 15.5px; }

/* ---------- Hero ---------- */
.hero { padding: 76px 0 64px; }
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 52px;
  align-items: center;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(79, 140, 255, 0.12);
  color: var(--accent);
  border-radius: 999px;
  padding: 5px 13px;
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 20px;
}
h1 {
  font-size: clamp(34px, 4.6vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
  font-weight: 700;
}
h1 .hl { color: var(--green); }
.lede { font-size: 18px; color: var(--muted); margin: 0 0 28px; max-width: 30em; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.hero-note { margin-top: 16px; font-size: 13.5px; color: var(--muted); }

/* A still of the interpreter, built from the same parts as the real UI. */
.shot {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  box-shadow: var(--shadow);
}
.shot-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
  font-size: 12px;
  color: var(--muted);
}
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--panel-2); }
.dot.live { background: var(--green); }
.turn {
  border: 1px solid var(--border);
  border-left: 3px solid var(--speaker);
  border-radius: 10px;
  padding: 11px 13px;
  margin-bottom: 11px;
  background: linear-gradient(90deg, rgba(79, 140, 255, 0.06), transparent 45%) var(--panel);
}
.turn.alt {
  border-left-color: var(--green);
  background: linear-gradient(270deg, rgba(45, 212, 167, 0.06), transparent 45%) var(--panel);
}
.turn-head {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 7px;
}
.role {
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(79, 140, 255, 0.16);
  color: var(--speaker);
  font-weight: 600;
}
.turn.alt .role { background: rgba(45, 212, 167, 0.16); color: var(--green); }
.said { font-size: 14px; margin: 0 0 7px; }
.rendered {
  font-size: 14px;
  margin: 0;
  padding-left: 10px;
  border-left: 2px solid var(--border);
  color: var(--muted);
}
.shot-flag {
  display: flex;
  gap: 7px;
  font-size: 11.5px;
  color: var(--amber);
  background: rgba(255, 180, 84, 0.1);
  border-radius: 8px;
  padding: 7px 10px;
}

/* ---------- Sections ---------- */
section { padding: 62px 0; border-top: 1px solid var(--border); }
.sec-head { margin-bottom: 38px; }
/* The heading has the whole width so it fits on one line; the lede under it
   stays a readable measure. */
.sec-head p { max-width: 34em; }
h2 {
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0 0 12px;
  font-weight: 680;
}
.sec-head p { color: var(--muted); margin: 0; font-size: 16px; }

.grid { display: grid; gap: 18px; }
.grid.three { grid-template-columns: repeat(3, 1fr); }
.grid.two { grid-template-columns: repeat(2, 1fr); }

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 22px;
}
.card h3 { margin: 0 0 8px; font-size: 16.5px; font-weight: 620; }
.card p { margin: 0; color: var(--muted); font-size: 14.5px; }
.card .icon { font-size: 22px; display: block; margin-bottom: 12px; }
.card code {
  background: var(--panel-2);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 13px;
  color: var(--text);
}

/* Numbered steps. */
.steps { counter-reset: step; }
.step { position: relative; padding-left: 52px; }
.step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--accent);
  font-weight: 700;
  display: grid;
  place-items: center;
}
.step h3 { margin: 4px 0 6px; font-size: 16.5px; }
.step p { margin: 0; color: var(--muted); font-size: 14.5px; }

/* ---------- Pricing ---------- */
.plans { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; align-items: start; }
.plan {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px;
  position: relative;
}
.plan.featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.plan-tag {
  position: absolute;
  top: -11px;
  left: 28px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 3px 11px;
  border-radius: 999px;
  background: var(--green);
  color: var(--on-green);
}
.plan.featured .plan-tag { background: var(--accent); color: #fff; }
.plan h3 { margin: 6px 0 4px; font-size: 20px; font-weight: 660; }
.plan .price { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; margin: 12px 0 2px; }
.plan .price small { font-size: 15px; font-weight: 500; color: var(--muted); }
.plan .price-sub { color: var(--muted); font-size: 13.5px; margin: 0 0 20px; }
.plan ul { list-style: none; margin: 0 0 24px; padding: 0; }
.plan li {
  padding-left: 26px;
  position: relative;
  margin-bottom: 10px;
  font-size: 14.5px;
  color: var(--muted);
}
.plan li strong { color: var(--text); font-weight: 600; }
.plan li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--green);
  font-weight: 700;
}
.plan li.muted::before { content: "•"; color: var(--muted); }
.plan .btn { width: 100%; text-align: center; }
.plan-foot { margin: 14px 0 0; font-size: 12.5px; color: var(--muted); text-align: center; }

/* ---------- FAQ ---------- */
details {
  border-bottom: 1px solid var(--border);
  padding: 16px 0;
}
summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 15.5px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; color: var(--muted); font-weight: 400; font-size: 20px; line-height: 1; }
details[open] summary::after { content: "–"; }
details p { color: var(--muted); margin: 12px 0 0; font-size: 14.5px; max-width: 62em; }

/* ---------- Closing CTA + footer ---------- */
.cta-band { text-align: center; }
.cta-band h2 { margin-bottom: 10px; }
.cta-band p { color: var(--muted); margin: 0 0 26px; }

footer {
  border-top: 1px solid var(--border);
  padding: 34px 0 46px;
  color: var(--muted);
  font-size: 13px;
}
.foot-top { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.foot-links { margin-left: auto; display: flex; gap: 18px; }
.foot-links a { text-decoration: none; }
.foot-links a:hover { color: var(--text); }
.disclaimer { max-width: 62em; margin: 0; line-height: 1.65; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .grid.three, .grid.two, .plans { grid-template-columns: 1fr; }
  .nav-links { display: none; }
  .hero { padding: 52px 0 44px; }
  section { padding: 48px 0; }
}

/* Interface-language picker in the top bar. */
.lang-select {
  background: var(--panel-2);
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 8px 10px;
  font-size: 13.5px;
  cursor: pointer;
}
.lang-select:hover { color: var(--text); border-color: var(--accent); }
@media (max-width: 900px) { .lang-select { max-width: 7.5em; } }

/* ---------- A user's quote ----------
   Between what the record looks like and what it costs, beside a photo of
   the translator running on a phone in a meeting. */
.quote-row {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 56px;
  align-items: center;
  max-width: 880px;
  margin: 0 auto;
}
.quote-shot { width: 100%; height: auto; display: block; }
.quote { margin: 0; }
.quote blockquote { margin: 0; }
.quote p { font-size: 22px; line-height: 1.5; margin: 0 0 16px; }
.quote figcaption { color: var(--muted); font-size: 15px; font-weight: 600; }
@media (max-width: 760px) {
  .quote-row { grid-template-columns: 1fr; gap: 28px; text-align: center; }
  .quote-shot { width: 240px; margin: 0 auto; }
  .quote p { font-size: 18px; }
}

/* ---------- The record a visit leaves behind ----------
   Three points beside a sample of an exported transcript, so the claim is
   visible rather than only described. */
.record-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 28px;
  align-items: start;
}
.record-grid .grid.three { grid-template-columns: 1fr; }

.record-sheet {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  font-size: 13.5px;
  position: sticky;
  top: 86px;
}
.sheet-head {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--muted);
  font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.sheet-row {
  display: flex;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.sheet-row:last-child { border-bottom: none; }
.sheet-time {
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  padding-top: 2px;
  white-space: nowrap;
}
.sheet-said { margin: 0 0 5px; line-height: 1.5; }
.sheet-rendered {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
  padding-left: 10px;
  border-left: 2px solid var(--border);
}

@media (max-width: 900px) {
  .record-grid { grid-template-columns: 1fr; gap: 22px; }
  .record-sheet { position: static; }
}

/* The `hidden` attribute must win.
   A class that sets `display` outranks the browser's own
   `[hidden] { display: none }`, so an element written as hidden — the quota
   notice, the account bar, the allowance meter — renders anyway, as an empty
   band. Stating it here, with the weight to beat a class, keeps `hidden`
   meaning hidden however an element is styled later. */
[hidden] {
  display: none !important;
}

/* The hero's translation stack: one spoken line rendered into several
   languages, each with a small label naming which. */
.turn.alt .rendered + .rendered { margin-top: 9px; }
.rendered-lang {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 2px;
}

/* The trial, from the landing page: one green button straight into the
   console, beside the account. */
.btn.go { background: #22c55e; border-color: #22c55e; color: #fff; font-weight: 700; }
.btn.go:hover { filter: brightness(1.06); }
.btn.ghost.lg { padding-left: 12px; padding-right: 12px; }

/* ---------- Screenshots under the steps ----------
   Both three-step panels (how it works, and uploading a recording) carry a
   fragment of the real screen under each step. The fragments are all the
   same size, and the steps share one grid (subgrid), so the three headings
   sit on one line, the three texts on another, and the three screenshots
   on a third, whatever the length of the text above them. They are
   screenshots of the Paper look, so they keep a light frame in Ink too. */
.walk,
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.walk { list-style: none; margin: 0; padding: 0; counter-reset: walk; }
.walk-step,
.step {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  align-content: start;
}
.walk-step { counter-increment: walk; }
.walk-step h3 { margin: 0 0 6px; font-size: 16.5px; display: flex; align-items: baseline; gap: 10px; }
.walk-step h3::before {
  content: counter(walk);
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translateY(2px);
}
.walk-step p { margin: 0 0 16px; color: var(--muted); font-size: 14.5px; }
.step p { margin-bottom: 16px; }
/* The step's text is indented past its number; the screenshot is not. */
.step-shot { margin-left: -52px; width: calc(100% + 52px); }
.walk-shot,
.step-shot {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 826 / 640;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  align-self: start;
}
.walk-note { margin: 28px 0 0; color: var(--muted); font-size: 14px; }
@media (max-width: 860px) {
  .walk, .steps { grid-template-columns: 1fr; gap: 34px; }
  .walk-shot, .step-shot { max-width: 420px; }
}