/* Shared design for the public pages (pricing, legal). System fonts and inline SVG only —
   the site is served cross-origin-isolated (COEP: require-corp), so no third-party assets. */
:root {
  --bg: #0b0d10;
  --surface: #14171c;
  --surface-2: #1b1f26;
  --fg: #e8eaee;
  --muted: #9aa3b0;
  --faint: #6b7280;
  --border: #262b33;
  --accent: #7c9cff;
  --accent-fg: #0b0d10;
  --pos: #4ade80;
  --warn: #f5a524;
  --radius: 16px;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f5f6f8;
    --surface: #ffffff;
    --surface-2: #eef0f4;
    --fg: #14181f;
    --muted: #5b6573;
    --faint: #8791a1;
    --border: #e2e5ea;
    --accent: #3457d5;
    --accent-fg: #ffffff;
    --pos: #15803d;
    --warn: #92400e;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
a { color: var(--accent); }
svg.i { width: 1em; height: 1em; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.15em; }

/* ---------- header (sticks to the top on every public page) ---------- */
:root { --gut: 20px; --hdr: 64px; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 var(--gut) 64px; }
header.top {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap;
  margin: 0 calc(-1 * var(--gut)) 8px; padding: 12px var(--gut);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
html { scroll-padding-top: calc(var(--hdr) + 12px); }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 650; font-size: 18px; color: var(--fg); text-decoration: none; }
.brand img { width: 28px; height: 28px; border-radius: 7px; }
nav.links { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: 14px; }
nav.links a {
  color: var(--muted); text-decoration: none; padding: 7px 12px; border-radius: 9px; transition: background .15s, color .15s;
}
nav.links a:hover { color: var(--fg); background: var(--surface-2); }
nav.links a[aria-current="page"] { color: var(--fg); background: var(--surface-2); font-weight: 600; }
nav.links a.cta { color: var(--accent-fg); background: var(--accent); font-weight: 600; }
nav.links a.cta:hover { filter: brightness(1.08); }

header.top .brand { order: 0; margin-right: auto; }
header.top nav.links { order: 1; }
header.top .lang { order: 2; margin: 0; }
@media (max-width: 640px) {
  /* phones: logo + language on the first row, the links on a second row that scrolls sideways instead of wrapping */
  header.top { padding-top: 8px; padding-bottom: 8px; row-gap: 4px; }
  header.top nav.links { order: 3; flex: 0 0 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -4px; }
  header.top nav.links::-webkit-scrollbar { display: none; }
  header.top nav.links a { flex: 0 0 auto; white-space: nowrap; }
}

/* language switch: three codes, so it reads the same in every language */
.lang { display: inline-flex; gap: 2px; padding: 3px; margin: 0 4px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); }
.lang button {
  font: inherit; font-size: 12.5px; font-weight: 700; letter-spacing: .03em; color: var(--muted); background: none; border: none;
  padding: 4px 8px; border-radius: 7px; cursor: pointer;
}
.lang button:hover { color: var(--fg); }
.lang button[aria-pressed="true"] { background: var(--accent); color: var(--accent-fg); }

/* "back to the home page" link at the top of pricing and legal */
a.back { display: inline-flex; align-items: center; gap: 6px; margin: 18px 0 0; color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 600; }
a.back:hover { color: var(--fg); }
a.back svg.i { width: 1em; height: 1em; }

/* ---------- hero ---------- */
.hero { padding: 28px 0 8px; max-width: 720px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent);
  padding: 5px 10px 5px 8px; border-radius: 999px; margin-bottom: 14px;
}
h1 { font-size: 34px; line-height: 1.15; margin: 0 0 10px; letter-spacing: -0.01em; }
.lede { color: var(--muted); font-size: 17px; line-height: 1.6; margin: 0; }
.updated { color: var(--faint); font-size: 13px; margin: 14px 0 0; }

/* ---------- generic content ---------- */
h2 { font-size: 21px; margin: 0 0 10px; letter-spacing: -0.01em; }
h3 { font-size: 15.5px; margin: 0; }
p, li { color: var(--fg); }
.muted { color: var(--muted); }
ul { padding-left: 22px; margin: 10px 0; }
li { margin: 5px 0; }
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; margin: 14px 0;
}
.note {
  display: flex; gap: 10px; align-items: flex-start;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); background: color-mix(in srgb, var(--accent) 8%, transparent);
  padding: 12px 14px; border-radius: 12px; margin: 16px 0; font-size: 14.5px;
}
.note svg.i { color: var(--accent); flex-shrink: 0; margin-top: 2px; width: 1.15em; height: 1.15em; }
.fill { background: color-mix(in srgb, var(--warn) 22%, transparent); color: var(--warn); border-radius: 4px; padding: 0 5px; font-weight: 600; }
table { width: 100%; border-collapse: collapse; margin: 4px 0; font-size: 14.5px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
th { font-size: 12.5px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }

/* ---------- highlight strip (quick facts before the fine print) ---------- */
.highlights { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 28px 0 8px; }
.highlight {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px;
}
.highlight svg.i { color: var(--pos); width: 1.3em; height: 1.3em; margin-bottom: 8px; }
.highlight h4 { margin: 0 0 4px; font-size: 14.5px; }
.highlight p { margin: 0; font-size: 13.5px; color: var(--muted); }

/* ---------- two-column docs layout: sticky nav + content ---------- */
.layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 40px; margin-top: 12px; align-items: start; }
.toc {
  position: sticky; top: calc(var(--hdr) + 16px); display: flex; flex-direction: column; gap: 2px;
  border-right: 1px solid var(--border); padding-right: 20px;
}
.toc a {
  display: flex; align-items: flex-start; gap: 9px; color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 500;
  padding: 9px 10px; border-radius: 9px; transition: background .15s, color .15s;
}
.toc a svg.i { width: 1.05em; height: 1.05em; flex-shrink: 0; margin-top: 0.15em; }
.toc a .label { display: flex; flex-direction: column; gap: 1px; }
.toc a .label small { font-size: 11px; font-weight: 400; color: var(--faint); }
.toc a:hover { color: var(--fg); background: var(--surface-2); }
.toc a.active { color: var(--fg); background: color-mix(in srgb, var(--accent) 14%, transparent); font-weight: 650; }
.toc a:focus-visible, .toc-mobile a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.toc-mobile { display: none; }
.toc-mobile a.active { color: var(--accent-fg); background: var(--accent); border-color: var(--accent); }

/* Only the selected document renders — that's what actually keeps the page short: one policy's
   clauses at a time (≤12 rows) instead of all three stacked (26+ rows). See the noscript override
   below for the no-JS fallback, which shows all three the old way. */
.doc { display: none; max-width: 700px; }
.doc.active { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .doc.active { animation: doc-in .22s ease both; }
}
@keyframes doc-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.doc-head { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.doc-head .ico {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0;
  background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent);
}
.doc-head .ico svg.i { width: 1.3em; height: 1.3em; }
.doc-head h2 { margin: 0; }
.doc-intro { color: var(--muted); font-size: 15px; margin: 10px 0 6px; }

/* ---------- clauses as native disclosure widgets: collapsed by default, so the page opens short ---------- */
details.clause {
  border-bottom: 1px solid var(--border); padding: 14px 2px;
}
details.clause:first-of-type { border-top: 1px solid var(--border); margin-top: 18px; }
details.clause > summary {
  display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; font-weight: 600; font-size: 15px;
  color: var(--fg);
}
details.clause > summary::-webkit-details-marker { display: none; }
details.clause > summary .chev {
  color: var(--faint); flex-shrink: 0; transition: transform .15s ease; width: 1em; height: 1em;
}
details.clause[open] > summary .chev { transform: rotate(90deg); color: var(--accent); }
details.clause .body { padding: 12px 0 2px 26px; color: var(--muted); font-size: 14.5px; }
details.clause .body p { margin: 0 0 10px; color: inherit; }
details.clause .body p:last-child { margin-bottom: 0; }
details.clause .body strong { color: var(--fg); }
.expand-all { font-size: 13px; color: var(--accent); background: none; border: none; cursor: pointer; padding: 4px 0; font-weight: 600; }

/* ---------- billing period toggle (pricing page) ---------- */
.billing-toggle {
  display: inline-flex; gap: 2px; padding: 4px; margin: 8px 0 24px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--border);
}
.billing-toggle .seg {
  display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 9px; border: none; background: none;
  color: var(--muted); font-size: 13.5px; font-weight: 600; cursor: pointer; font-family: inherit;
}
.billing-toggle .seg.active { background: var(--accent); color: var(--accent-fg); }
.billing-toggle .seg .save {
  font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 999px;
  background: color-mix(in srgb, var(--pos) 20%, transparent); color: var(--pos);
}
.billing-toggle .seg.active .save { background: color-mix(in srgb, black 15%, transparent); color: inherit; }

/* ---------- pricing cards ---------- */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 28px 0; }
.plan {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px;
  display: flex; flex-direction: column; position: relative;
}
.plan .badge {
  position: absolute; top: -11px; left: 20px; background: var(--accent); color: var(--accent-fg); font-size: 11.5px; font-weight: 700;
  padding: 3px 10px; border-radius: 999px; letter-spacing: .02em;
}
.plan h3 { margin: 4px 0 2px; font-size: 18px; }
.price { font-size: 30px; font-weight: 750; margin: 8px 0 2px; letter-spacing: -0.02em; }
.price small { font-size: 14px; font-weight: 500; color: var(--muted); }
.plan .sub { font-size: 13.5px; color: var(--muted); margin-bottom: 4px; }
.plan ul { margin: 14px 0 0; padding: 0; list-style: none; font-size: 14px; flex: 1; }
.plan ul li { display: flex; gap: 8px; align-items: flex-start; margin: 7px 0; }
.plan ul li svg.i { color: var(--pos); flex-shrink: 0; margin-top: 3px; width: 0.95em; height: 0.95em; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin-top: 16px; padding: 10px 16px;
  border-radius: 10px; text-decoration: none; font-weight: 600; font-size: 14.5px;
  background: var(--accent); color: var(--accent-fg); text-align: center; border: none; cursor: pointer;
}
.btn.ghost { background: transparent; color: var(--fg); border: 1px solid var(--border); }
.btn:hover { filter: brightness(1.06); }

footer.site {
  margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--border); color: var(--faint); font-size: 13.5px;
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
footer.site a { color: var(--faint); }
footer.site a:hover { color: var(--fg); }

@media (max-width: 860px) {
  .layout { display: block; }
  .toc { display: none; }
  .toc-mobile {
    display: flex; gap: 6px; overflow-x: auto; position: sticky; top: var(--hdr); z-index: 5; margin: 0 -20px 24px; padding: 10px 20px;
    background: var(--bg); border-bottom: 1px solid var(--border);
    -ms-overflow-style: none; scrollbar-width: none;
  }
  .toc-mobile::-webkit-scrollbar { display: none; }
  .toc-mobile a {
    flex-shrink: 0; display: flex; align-items: center; gap: 6px; color: var(--muted); text-decoration: none; font-size: 13.5px;
    font-weight: 600; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface);
  }
  .toc-mobile a svg.i { width: 1em; height: 1em; }
}
@media (max-width: 520px) {
  h1 { font-size: 26px; }
  .hero { padding-top: 24px; }
  :root { --gut: 16px; }
  .wrap { padding-bottom: 48px; }
  .toc-mobile { margin: 0 -16px 24px; padding: 10px 16px; }
  nav.links a { padding: 6px 8px; }
  .brand { font-size: 16px; }
  .doc + .doc { margin-top: 40px; padding-top: 28px; }
}

/* yearly plans: the monthly price crossed out, the lower monthly-equivalent price bold and green */
.plan .sub s { opacity: .7; }
.plan .sub .deal { color: var(--pos); font-size: 1.05em; font-weight: 700; }

/* the small note under a plan's button */
.plan-note { margin: .6rem 0 0; font-size: .8rem; color: var(--muted); text-align: center; }

.manage { margin: 4px 0 0; color: var(--muted); font-size: 14px; text-align: center; }
.soon { margin: 12px 0 0; padding: 6px 10px; border-radius: 8px; background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--warn); font-size: 12.5px; text-align: center; }
.soon[hidden], .soon-chip[hidden] { display: none; }
.soon-chip { margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; vertical-align: middle; }

/* the three plan cards are built the same: list on top, then one block with the button (same size and colour on every plan) and its notes,
   whose height is fixed so the buttons sit on one line across the cards. "Most popular" is only a badge. */
.plans { align-items: stretch; }
.plan-foot { margin-top: 18px; }
.plan-foot .btn { display: flex; width: 100%; height: 48px; margin: 0; padding: 0 14px; font-size: 15px; }
.plan-notes { min-height: 6.2rem; padding-top: 4px; }
.plan-notes .plan-note { margin: .6rem 0 0; }
.plan-notes .soon { margin-top: 8px; }