/* The storefront's stylesheet.
   ------------------------------------------------------------------
   Deliberately NOT style.css. That file dresses the reader — panes, editor
   chrome, a code-theme switcher, print rules — and none of it applies to four
   static pages that sell a download. Sharing it would mean every change to the
   app's layout risks the page that takes money, which is the wrong coupling in
   the wrong direction.

   No web fonts, no icon set, no framework. The whole site is four documents and
   a form; a 200 KB dependency to round some corners would be the single largest
   thing on the page. `system-ui` renders as the platform's own UI font, which is
   also the honest look for an app whose pitch is "it runs on your machine".
   The polish lives in this file instead: a real type scale, one accent
   gradient, and depth from shadows — all of it CSS, none of it downloaded.

   Colours are declared light-first on :root and overridden under
   prefers-color-scheme, rather than the reverse — a visitor with no preference
   expressed gets the light palette, and nothing here reads a stored theme
   because the site has no settings to store one in. */

:root {
  --bg:        #ffffff;
  --bg-soft:   #f7f7fb;
  --bg-sunk:   #eef0f6;
  --fg:        #17181d;
  --fg-muted:  #5b6069;
  --line:      #e3e5ec;
  --accent:    #5b54e8;          /* the app's own violet, darkened for AA on white */
  --accent-soft: #eeedfc;
  --accent-2:  #0e9384;          /* teal, the gradient's far end */
  --accent-fg: #ffffff;
  --grad:      linear-gradient(120deg, #5b54e8, #0e9384);
  --ok:        #15803d;
  --warn:      #b45309;
  --err:       #b91c1c;
  --radius:    14px;
  --radius-sm: 10px;
  --page:      68rem;
  --shadow-1:  0 1px 2px rgba(23, 24, 29, 0.05), 0 4px 16px rgba(23, 24, 29, 0.06);
  --shadow-2:  0 2px 4px rgba(23, 24, 29, 0.07), 0 12px 32px rgba(23, 24, 29, 0.10);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:       #131419;
    --bg-soft:  #1a1c23;
    --bg-sunk:  #22242d;
    --fg:       #e9eaef;
    --fg-muted: #9ba1ad;
    --line:     #2c2f3a;
    --accent:   #8d87ff;
    --accent-soft: #23223a;
    --accent-2: #2dd4bf;
    --accent-fg:#0b0c12;
    --grad:     linear-gradient(120deg, #8d87ff, #2dd4bf);
    --ok:       #4ade80;
    --warn:     #fbbf24;
    --err:      #f87171;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.35);
    --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.5), 0 12px 32px rgba(0, 0, 0, 0.45);
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--accent); }
::selection { background: var(--accent); color: var(--accent-fg); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.wrap { max-width: var(--page); margin: 0 auto; padding: 0 1.5rem; }

/* Anchored sections land below the sticky header, not underneath it. */
section[id] { scroll-margin-top: 5rem; }

/* ── Header / footer ─────────────────────────────────────────── */

header.site {
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 10;
}

header.site .wrap {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: 64px;
}

.brand {
  font-weight: 700;
  font-size: 1.08rem;
  letter-spacing: -0.01em;
  color: var(--fg);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.brand img { width: 28px; height: 28px; border-radius: 7px; box-shadow: var(--shadow-1); }

header.site nav { margin-left: auto; display: flex; gap: 0.35rem; align-items: center; }
header.site nav a {
  color: var(--fg-muted);
  text-decoration: none;
  font-size: 0.93rem;
  font-weight: 500;
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  transition: color 0.15s, background-color 0.15s;
}
header.site nav a:hover, header.site nav a[aria-current="page"] {
  color: var(--fg);
  background: var(--bg-sunk);
}

/* Four nav links and a brand must share 360px on the smallest phones. */
@media (max-width: 32rem) {
  header.site .wrap { gap: 0.5rem; padding: 0 0.75rem; }
  .brand { font-size: 0.98rem; gap: 0.45rem; }
  .brand img { width: 24px; height: 24px; }
  header.site nav { gap: 0; }
  header.site nav a { padding: 0.4rem 0.45rem; font-size: 0.84rem; }
}

footer.site {
  border-top: 1px solid var(--line);
  margin-top: 6rem;
  padding: 3rem 0;
  color: var(--fg-muted);
  font-size: 0.88rem;
  background: var(--bg-soft);
}

footer.site .wrap { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center; }
footer.site nav { margin-left: auto; display: flex; gap: 1.5rem; flex-wrap: wrap; }
footer.site a { color: var(--fg-muted); text-decoration: none; }
footer.site a:hover { color: var(--fg); }

/* ── Type ────────────────────────────────────────────────────── */

h1 {
  font-size: clamp(2.3rem, 5.5vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 750;
  margin: 0 0 1.25rem;
}

/* The one phrase the gradient is spent on. Plain text underneath for any
   engine that skips background-clip. */
.grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

h2 { font-size: clamp(1.5rem, 3vw, 1.9rem); letter-spacing: -0.02em; font-weight: 700; margin: 0 0 0.75rem; }
h3 { font-size: 1.05rem; font-weight: 650; margin: 0 0 0.4rem; }

/* Small caps line above a section heading, so the page has a rhythm the eye
   can skim by. */
.eyebrow {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.6rem;
}

section.wrap { margin-top: 5.5rem; }

.lede { font-size: 1.16rem; color: var(--fg-muted); max-width: 42rem; margin: 0 0 2rem; }
.muted { color: var(--fg-muted); }
.small { font-size: 0.88rem; }

/* ── Buttons ─────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.4rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  color: var(--fg);
  font: inherit;
  font-weight: 600;
  font-size: 0.97rem;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.15s, border-color 0.15s, filter 0.15s;
}

.btn:hover { border-color: var(--fg-muted); transform: translateY(-1px); box-shadow: var(--shadow-1); }
.btn:active { transform: translateY(0); }

.btn.primary {
  background: var(--grad);
  border: none;
  color: var(--accent-fg);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 35%, transparent);
}
.btn.primary:hover { filter: brightness(1.07); box-shadow: 0 6px 20px color-mix(in srgb, var(--accent) 45%, transparent); }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }
.btn.wide { width: 100%; }

/* ── Hero ────────────────────────────────────────────────────── */

/* One soft wash of the accent behind the opening screen, fading to nothing
   before the first section. Pure gradient — no image, nothing fetched. */
.hero-bg {
  position: absolute;
  inset: 0 0 auto 0;
  height: 44rem;
  z-index: -1;
  background:
    radial-gradient(52rem 30rem at 18% -6rem, color-mix(in srgb, var(--accent) 13%, transparent), transparent 68%),
    radial-gradient(46rem 28rem at 88% 2rem,  color-mix(in srgb, var(--accent-2) 11%, transparent), transparent 66%);
  pointer-events: none;
}

body { position: relative; }

.hero {
  padding: 5.5rem 0 1rem;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 3.5rem;
  align-items: center;
}

@media (max-width: 56rem) {
  .hero { grid-template-columns: 1fr; padding-top: 3.5rem; gap: 2.75rem; }
}

.hero .lede { margin-bottom: 2.25rem; }

/* The row of platform names under the pitch — facts, quietly. */
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}
.hero-meta li {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--fg-muted);
  border: 1px solid var(--line);
  background: var(--bg);
  border-radius: 999px;
  padding: 0.28rem 0.75rem;
}

.cta-row { display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: center; }

.dl-others { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 1rem; font-size: 0.9rem; }

/* ── The window mock ─────────────────────────────────────────────
   A picture of the product drawn in markup: markdown on the left, the render
   on the right. Decorative (aria-hidden in the HTML) and honest — it shows
   nothing the app does not do. */

.window {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  box-shadow: var(--shadow-2);
  overflow: hidden;
  font-size: 0.78rem;
}

.window-bar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--line);
  background: var(--bg-soft);
}
.window-bar span { width: 10px; height: 10px; border-radius: 50%; background: var(--bg-sunk); border: 1px solid var(--line); }
.window-bar span:nth-child(1) { background: #f87171; border-color: #f87171; }
.window-bar span:nth-child(2) { background: #fbbf24; border-color: #fbbf24; }
.window-bar span:nth-child(3) { background: #4ade80; border-color: #4ade80; }
.window-bar em { font-style: normal; color: var(--fg-muted); margin-left: 0.5rem; font-size: 0.75rem; }

.window-body { display: grid; grid-template-columns: 1fr 1fr; min-height: 15rem; }

.pane-src {
  margin: 0;
  padding: 1rem 1.1rem;
  border-right: 1px solid var(--line);
  background: var(--bg-soft);
  color: var(--fg-muted);
  font: 0.74rem/1.7 ui-monospace, "Cascadia Code", Consolas, monospace;
  white-space: pre;
  overflow: hidden;
}
.pane-src b { color: var(--accent); font-weight: 650; }

.pane-render { padding: 1rem 1.1rem; overflow: hidden; }
.pane-render h4 { margin: 0 0 0.5rem; font-size: 0.95rem; letter-spacing: -0.01em; }
.pane-render .checks { list-style: none; margin: 0 0 0.8rem; padding: 0; }
.pane-render .checks li { padding: 0.16rem 0 0.16rem 1.5rem; position: relative; color: var(--fg-muted); }
.pane-render .checks li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.34rem;
  width: 0.85rem; height: 0.85rem;
  border: 1.5px solid var(--line);
  border-radius: 4px;
  background: var(--bg);
}
.pane-render .checks li.on { color: var(--fg); }
.pane-render .checks li.on::before { background: var(--accent); border-color: var(--accent); }
.pane-render .checks li.on::after {
  content: "";
  position: absolute;
  left: 0.26rem; top: 0.5rem;
  width: 0.32rem; height: 0.18rem;
  border-left: 2px solid var(--accent-fg);
  border-bottom: 2px solid var(--accent-fg);
  transform: rotate(-45deg);
}
.code-chip {
  font: 0.72rem/1.5 ui-monospace, "Cascadia Code", Consolas, monospace;
  background: var(--bg-sunk);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.7rem;
  color: var(--fg-muted);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ── Cards ───────────────────────────────────────────────────── */

.grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }

.card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.4rem 1.4rem 1.5rem;
  background: var(--bg);
  box-shadow: var(--shadow-1);
  transition: transform 0.15s, box-shadow 0.2s, border-color 0.2s;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
}

.card p { margin: 0; color: var(--fg-muted); font-size: 0.94rem; }

/* The little tinted tile a feature icon sits in. */
.card-icon {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft);
  color: var(--accent);
  margin-bottom: 0.9rem;
}
.card-icon svg { width: 1.25rem; height: 1.25rem; }

/* ── Pricing ─────────────────────────────────────────────────── */

.plans { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr)); align-items: stretch; }

.plan {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem;
  background: var(--bg);
  box-shadow: var(--shadow-1);
  display: flex;
  flex-direction: column;
  transition: transform 0.15s, box-shadow 0.2s;
}
.plan:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }

.plan.featured {
  border-color: transparent;
  background:
    linear-gradient(var(--bg), var(--bg)) padding-box,
    var(--grad) border-box;
  border: 2px solid transparent;
  box-shadow: var(--shadow-2);
}
/* site.js draws the cards from PLANS and knows nothing of chips; the label on
   the featured one is this stylesheet's, and it names the discount the plan
   data actually carries (one month free). */
.plan.featured::before {
  content: "Best value";
  position: absolute;
  top: -0.75rem;
  left: 1.25rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-fg);
  background: var(--grad);
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
}

.plan h3 { font-size: 1rem; }
.plan .price { font-size: 2.2rem; font-weight: 750; letter-spacing: -0.03em; margin: 0.35rem 0 0.1rem; }
.plan .price span { font-size: 0.95rem; font-weight: 450; letter-spacing: 0; color: var(--fg-muted); }
.plan ul { list-style: none; padding: 0; margin: 1.25rem 0; flex: 1; }
.plan li { padding: 0.32rem 0 0.32rem 1.5rem; position: relative; font-size: 0.94rem; }
.plan li::before { content: "✓"; position: absolute; left: 0; color: var(--ok); font-weight: 700; }
.plan li.no { color: var(--fg-muted); }
.plan li.no::before { content: "—"; color: var(--fg-muted); font-weight: 400; }

.free-note {
  margin: 2.25rem 0 0;
  padding: 1.1rem 1.4rem;
  border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line));
  border-left: 4px solid var(--accent);
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
}

/* ── Account ─────────────────────────────────────────────────── */

.panel {
  max-width: 26rem;
  margin: 3.5rem auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2rem;
  background: var(--bg);
  box-shadow: var(--shadow-1);
}

.panel h1 { font-size: 1.45rem; margin-bottom: 0.5rem; }

.field { margin: 0 0 1rem; }
.field label { display: block; font-size: 0.88rem; font-weight: 550; margin-bottom: 0.35rem; color: var(--fg-muted); }

.field input {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--fg);
  font: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.field input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}

/* Status lines are a live region in the markup. Colour alone must not be the
   only signal — the text always says what happened, which is also what a screen
   reader announces. */
.status { margin: 1rem 0 0; font-size: 0.9rem; min-height: 1.2em; }
.status.err { color: var(--err); }
.status.ok  { color: var(--ok); }
.status.work { color: var(--fg-muted); }

.row { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }
.row .btn { flex: 1; }

.sub-state { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 1.1rem 1.3rem; background: var(--bg-soft); margin: 1.25rem 0; }
.sub-state dt { font-size: 0.82rem; color: var(--fg-muted); }
.sub-state dd { margin: 0 0 0.75rem; font-weight: 600; }
.sub-state dd:last-child { margin-bottom: 0; }

/* ── Legal pages ─────────────────────────────────────────────── */

.prose { max-width: 44rem; }
.prose h2 { font-size: 1.25rem; margin-top: 2.5rem; }
.prose li { margin: 0.35rem 0; }
.prose table { border-collapse: collapse; width: 100%; margin: 1rem 0; font-size: 0.94rem; }
.prose th, .prose td { border: 1px solid var(--line); padding: 0.55rem 0.7rem; text-align: left; vertical-align: top; }
.prose th { background: var(--bg-soft); }

/* A viewer who asked the OS for less motion gets none of the lifts. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .card, .plan { transition: none; }
  .btn:hover, .card:hover, .plan:hover { transform: none; }
}

[hidden] { display: none !important; }