/* One identity, three pages. The page is light and editorial; the product is
   dark and shown as itself. That contrast is the brand — the screenshots are
   the only saturated thing on the site. */

:root {
  color-scheme: light dark;
  --ink: #14161c;
  --dim: #565d6b;
  --faint: #838b99;
  --ground: #f7f8f9;
  --paper: #ffffff;
  --line: #e0e3e8;
  --accent: #16594f;        /* deep teal — buttons, links, emphasis */
  --accent-ink: #f2f7f5;
  --bad: #b4472f;
  --good: #1c7a4a;
  --shadow: 0 18px 44px rgba(20, 25, 35, .10);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #e9ecf1; --dim: #a2aab8; --faint: #7b8494;
    --ground: #0f1115; --paper: #171a20; --line: #272b34;
    --accent: #4bbfa8; --accent-ink: #07211d;
    --bad: #e08469; --good: #52c08a;
    --shadow: 0 18px 44px rgba(0, 0, 0, .45);
  }
}
:root[data-theme="dark"] {
  --ink: #e9ecf1; --dim: #a2aab8; --faint: #7b8494;
  --ground: #0f1115; --paper: #171a20; --line: #272b34;
  --accent: #4bbfa8; --accent-ink: #07211d;
  --bad: #e08469; --good: #52c08a;
  --shadow: 0 18px 44px rgba(0, 0, 0, .45);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 17px/1.62 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 1000px; margin: 0 auto; padding: 0 24px; }
section { padding: 68px 0; border-top: 1px solid var(--line); scroll-margin-top: 76px; }
section:first-of-type { border-top: 0; }

h1, h2, h3 { letter-spacing: -0.022em; text-wrap: balance; }
h1 { font-family: Georgia, "Times New Roman", serif; font-size: clamp(32px, 4.4vw, 50px); line-height: 1.08; margin: 0 0 20px; }
h2 { font-size: clamp(24px, 2.8vw, 31px); line-height: 1.18; margin: 0 0 22px; }
h3 { font-size: 18px; margin: 0 0 8px; }
p { margin: 0 0 16px; max-width: 66ch; }
.lead { font-size: 19px; color: var(--dim); max-width: 56ch; }
.muted { color: var(--dim); }
.small { font-size: 14px; color: var(--faint); }
a { color: var(--accent); }

.eyebrow {
  font: 600 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .16em; text-transform: uppercase; color: var(--faint);
  display: block; margin-bottom: 18px;
}

/* ---------- header ---------- */
header.site {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--line);
}
header.site .row { display: flex; align-items: center; gap: 24px; height: 60px; }
header.site .logo { font-weight: 700; letter-spacing: -0.02em; text-decoration: none; color: var(--ink); }
header.site nav { margin-left: auto; display: flex; gap: 20px; align-items: center; font-size: 14.5px; }
header.site nav a { color: var(--dim); text-decoration: none; }
header.site nav a:hover { color: var(--ink); }
/* Header CTA: always white text so it reads as the action button, with its own
   padding so it does not blend into the menu links. In dark mode the accent is
   light, so the text flips to the dark accent-ink to stay readable. */
header.site nav .btn,
header.site .btn {
  color: #ffffff;
  padding: 8px 16px;
  font-size: 14px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) header.site nav .btn,
  :root:not([data-theme="light"]) header.site .btn { color: var(--accent-ink); }
}
:root[data-theme="dark"] header.site nav .btn,
:root[data-theme="dark"] header.site .btn { color: var(--accent-ink); }

/* ---------- buttons ---------- */
.btn {
  display: inline-block; background: var(--accent); color: var(--accent-ink);
  font-weight: 600; padding: 14px 26px; border-radius: 8px; border: 0;
  text-decoration: none; cursor: pointer; font-size: 16px; font-family: inherit;
}
.btn:hover { filter: brightness(1.07); }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }

/* ---------- hero ---------- */
/* padding-block, not the shorthand. The hero element is `class="hero wrap"`, and
   a shorthand here sets left/right to 0 — which beats .wrap on source order and
   silently strips the only horizontal padding on the page's first screen. On
   desktop the 1000px max-width hides it; below that the hero ran edge to edge
   while every other section stayed inset. */
.hero { padding-block: 66px 56px; }
.hero .cols { display: grid; grid-template-columns: 1.02fr .98fr; gap: 48px; align-items: center; }
.hero .micro { font-size: 14px; color: var(--faint); margin-top: 14px; }

/* ---------- the product, drawn in its own colours ---------- */
.overlay {
  background: #1a1d2b; border: 1px solid #2f3550; border-radius: 12px;
  padding: 15px; box-shadow: var(--shadow); color: #eef1f6;
}
.overlay .bar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.overlay .pill { background: #262b40; border-radius: 6px; padding: 5px 11px; font-size: 12px; color: #c9cee0; }
.overlay .dots { margin-left: auto; display: flex; gap: 6px; }
.overlay .dots i { width: 9px; height: 9px; border-radius: 3px; background: #333a55; display: block; }
.overlay .said {
  font-size: 13.5px; color: #8f96ad; border-left: 2px solid #3a4160;
  padding-left: 11px; margin-bottom: 13px;
}
.overlay .what {
  font: 600 10.5px/1 ui-monospace, Menlo, monospace; letter-spacing: .12em;
  text-transform: uppercase; color: #ffb454; margin-bottom: 8px;
}
.overlay ul { margin: 0; padding-left: 18px; font-size: 14.5px; line-height: 1.55; }
.overlay li { margin-bottom: 8px; }
.overlay li:last-child { margin-bottom: 0; }
.overlay .status {
  margin-top: 13px; padding-top: 11px; border-top: 1px solid #2b3048;
  font: 11px/1 ui-monospace, Menlo, monospace; color: #67c23a;
}

/* ---------- generic blocks ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: 11px; padding: 24px; }
.card p { font-size: 15.5px; color: var(--dim); margin: 0; }

.steps { counter-reset: step; display: grid; gap: 26px; }
.step { display: grid; grid-template-columns: 42px 1fr; gap: 18px; align-items: start; }
.step .n {
  counter-increment: step; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--line); display: grid; place-items: center;
  font: 600 13px/1 ui-monospace, Menlo, monospace; color: var(--accent);
}
.step .n::before { content: counter(step); }
.step p { margin: 0; color: var(--dim); font-size: 16px; }

/* comparison: the one place two colours are allowed to disagree */
.vs { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 26px 0; }
.vs .col { background: var(--paper); border: 1px solid var(--line); border-radius: 11px; padding: 22px; }
.vs .col.win { border-color: var(--good); }
.vs .label {
  font: 600 11px/1 ui-monospace, Menlo, monospace; letter-spacing: .12em;
  text-transform: uppercase; margin-bottom: 14px;
}
.vs .lose .label { color: var(--bad); }
.vs .win .label { color: var(--good); }
.vs p { font-size: 15.5px; margin: 0; }
.vs .meta { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); font-size: 13px; color: var(--faint); }

.note {
  display: block;                 /* was a span: inline padding overlapped the text around it */
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: 0 9px 9px 0; padding: 18px 22px; background: var(--paper);
  color: var(--dim); font-size: 15.5px; max-width: 68ch;
  margin: 22px 0;
}
.note b { color: var(--ink); }

.figures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line);
           border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.fig { background: var(--paper); padding: 26px 24px; }
.fig .num { font-size: 33px; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.fig .num.hl { color: var(--accent); }
.fig .cap { color: var(--dim); font-size: 14px; margin-top: 8px; line-height: 1.45; }

/* privacy panels: what stays here, what is sent */
.panels { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.panel { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 22px; }
.panel .cap { font: 600 11px/1 ui-monospace, Menlo, monospace; letter-spacing: .12em;
              text-transform: uppercase; margin-bottom: 14px; }
.panel.here .cap { color: var(--accent); }
.panel.out .cap { color: var(--bad); }
.panel p { font-size: 15px; line-height: 1.6; }
.mask { background: color-mix(in srgb, var(--ink) 8%, transparent); border: 1px dashed var(--line);
        border-radius: 4px; padding: 1px 6px; font: 12.5px ui-monospace, Menlo, monospace; }
.keep { border-bottom: 2px solid var(--accent); }

/* the translation sequence */
.seq { display: grid; gap: 10px; }
.seq .row { background: var(--paper); border: 1px solid var(--line); border-radius: 11px;
            padding: 15px 18px; display: grid; grid-template-columns: 58px 1fr; gap: 14px; align-items: start; }
.seq .t { font: 600 10.5px/1.6 ui-monospace, Menlo, monospace; color: var(--faint); }
.seq .what { font: 600 10.5px/1 ui-monospace, Menlo, monospace; letter-spacing: .12em;
             text-transform: uppercase; color: var(--faint); margin-bottom: 7px; }
.seq .row p { margin: 0; font-size: 15px; }
.seq .row.ans { border-color: var(--accent); }
.seq .row.ans .what { color: var(--accent); }

/* pricing */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
.plan { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 26px; }
.plan.featured { border-color: var(--accent); box-shadow: var(--shadow); }
.plan .name { font-weight: 650; margin-bottom: 6px; }
.plan .price { font-size: 32px; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.plan .per { color: var(--faint); font-size: 14px; }
.plan ul { margin: 16px 0 0; padding-left: 18px; color: var(--dim); font-size: 15px; }
.plan li { margin-bottom: 7px; }

/* FAQ */
.faq details { border-bottom: 1px solid var(--line); padding: 16px 0; }
.faq summary { cursor: pointer; font-weight: 600; font-size: 16.5px; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "+ "; color: var(--accent); font-family: ui-monospace, Menlo, monospace; }
.faq details[open] summary::before { content: "− "; }
.faq p { margin: 12px 0 0; color: var(--dim); font-size: 15.5px; }

/* signup */
.signup { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 28px; max-width: 560px; }
.signup form { display: flex; gap: 10px; flex-wrap: wrap; }
.signup input {
  flex: 1 1 240px; padding: 13px 15px; border-radius: 8px; font-size: 16px; font-family: inherit;
  border: 1px solid var(--line); background: var(--ground); color: var(--ink);
}
.signup input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.signup .result { margin: 14px 0 0; font-size: 15px; min-height: 22px; }
.signup .result.ok { color: var(--good); }
.signup .result.err { color: var(--bad); }

footer.site { border-top: 1px solid var(--line); padding: 40px 0 60px; color: var(--faint); font-size: 14.5px; }
footer.site a { color: var(--dim); }
footer.site .row { display: flex; gap: 26px; flex-wrap: wrap; }

@media (max-width: 880px) {
  .hero .cols, .grid-3, .grid-2, .vs, .panels, .figures, .plans { grid-template-columns: 1fr; }
  header.site nav a.hide-sm { display: none; }
  section { padding: 52px 0; }
  .hero { padding-block: 44px 44px; }
}

/* Phones. The desktop spacing was tuned against a 1000px column: at 360px the
   same 24px gutters and 24-28px card padding leave a text column barely half
   the screen wide, and the vertical rhythm pushes the product screenshot below
   the fold. Everything here is the same design at a smaller scale — no rules
   are switched off. */
@media (max-width: 560px) {
  .wrap { padding: 0 18px; }
  section { padding: 40px 0; }
  .hero { padding-block: 32px 36px; }
  .hero .cols { gap: 28px; }
  h1 { font-size: clamp(28px, 8vw, 34px); }
  .lead { font-size: 17.5px; }

  /* Inner chrome shrinks with the gutters, or the boxes read as padding with a
     little text in them rather than as content. */
  .card, .vs .col, .panel, .plan, .signup { padding: 18px; }
  .fig { padding: 20px 18px; }
  .note { padding: 16px 18px; }
  .overlay { padding: 13px; }

  /* The timestamp column costs 72px of a 324px row; stacking gives it back. */
  .seq .row { grid-template-columns: 1fr; gap: 6px; padding: 14px 16px; }

  /* Full-width tap targets: a 26px-padded button on a phone is a small target
     floating in a wide empty row. */
  .btn { display: block; text-align: center; }
  header.site .btn, header.site nav .btn { display: inline-block; padding: 8px 14px; }
  header.site .row { gap: 14px; }
  header.site nav { gap: 14px; }

  .signup input, .signup .btn { flex: 1 1 100%; width: 100%; }
  footer.site { padding: 32px 0 44px; }
  footer.site .row { gap: 10px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}