/* ==========================================================================
   ConTess — marketing site
   Tokens, type scale, spacing and motion are taken from design_handoff_contess_v2.
   Single stylesheet, no dependencies, no external requests.
   ========================================================================== */

:root {
  /* surfaces */
  --bg: #ffffff;
  --bg-alt: #f5f5f7;
  --bg-dark: #000000;

  /* ink */
  --ink: #1d1d1f;
  --ink-2: #6e6e73;
  --ink-3: #86868b;

  /* ink on black */
  --dk-ink: #f5f5f7;
  --dk-ink-2: #a1a1a6;
  --dk-list: #d6d6db;
  --dk-meta: #8e8e93;

  /* accent */
  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --accent-dark: #2f7cf6;   /* headings/kickers on black */
  --accent-dark-2: #7fb0ff; /* small text on black */
  --accent-tint: rgba(37, 99, 235, 0.09);
  --accent-tint-2: rgba(37, 99, 235, 0.10);

  --green: #22c55e;
  --green-2: #16a34a;

  --line: rgba(0, 0, 0, 0.06);
  --line-2: rgba(0, 0, 0, 0.09);
  --line-3: rgba(0, 0, 0, 0.12);
  --line-dk: rgba(255, 255, 255, 0.08);
  --line-dk-2: rgba(255, 255, 255, 0.12);

  /* shadows */
  --sh-hero: 0 40px 90px -30px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.06);
  --sh-fig: 0 30px 70px -30px rgba(0, 0, 0, 0.32);
  --sh-mock: 0 24px 60px -28px rgba(0, 0, 0, 0.28);
  --sh-panel: 0 20px 50px -35px rgba(0, 0, 0, 0.35);
  --sh-btn: 0 6px 20px rgba(37, 99, 235, 0.28);
  --sh-btn-lg: 0 8px 26px rgba(37, 99, 235, 0.3);

  --wrap: 1120px;
  --wrap-narrow: 1060px;
  --gutter: 24px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text',
    'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Monaco, monospace;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 17px;
  line-height: 1.5;
}

::selection { background: rgba(37, 99, 235, 0.18); }

img, video { max-width: 100%; height: auto; display: block; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }

/* Never ship the browser default ring. */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

h1, h2, h3, p { margin: 0; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.wrap-narrow { max-width: var(--wrap-narrow); margin: 0 auto; padding: 0 var(--gutter); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ── header ─────────────────────────────────────────────────────────────── */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 500; height: 52px;
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line);
}
.site-header .row {
  max-width: var(--wrap); height: 52px; margin: 0 auto; padding: 0 var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.wordmark {
  font-size: 19px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink);
}
.wordmark:hover { text-decoration: none; color: var(--ink); }
.wordmark b { color: var(--accent); font-weight: 700; }
.nav { display: flex; align-items: center; gap: 26px; }
.nav a { font-size: 13px; color: var(--ink); }
.nav a:hover { color: var(--accent); text-decoration: none; }
.nav a.cta { font-weight: 600; color: var(--accent); }
/* margin-left:auto so the hamburger is hard right once .nav is hidden on mobile.
   It used to land in the middle: the row is space-between, and with the nav gone
   the remaining children were wordmark, toggle and the language picker, which put
   the toggle in the centre. The picker has moved into the nav, so this is now
   belt and braces rather than the fix. */
.nav-toggle { display: none; margin-left: auto; }

/* ── language picker ────────────────────────────────────────────────────── */
/* Lives at the end of the nav, after Pricing, and reads as one more nav item
   rather than a control. The old version was a filled pill segmented control
   sitting between the wordmark and the nav — the loudest thing in the header, for
   the least important choice on the page. Same understated treatment as the app.
   Keeping the three buttons rather than a dropdown means i18n.js's wiring, which
   binds [data-lang] and toggles .active, is untouched. */
/* A squircle showing the current language, opening a dropdown. Same shape and
   behaviour as the app's language button, so the two feel like one product. Three
   always-visible buttons put the least important choice on the page permanently in
   the header; this shows one glyph and gets out of the way. */
.lang-pick { position: relative; display: inline-flex; margin-left: 4px; }
.lang-btn {
  width: 32px; height: 32px; display: grid; place-items: center;
  /* A superellipse-ish radius rather than a circle or a rounded rect: same corner
     feel as macOS app icons, which is what "squircle" means here. */
  border-radius: 10px; border: 1px solid var(--line-2);
  background: rgba(0, 0, 0, 0.03); cursor: pointer; font: inherit;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.03em; color: var(--ink-2);
  transition: background 0.15s var(--ease), color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.lang-btn:hover { background: rgba(0, 0, 0, 0.06); color: var(--ink); }
.lang-btn[aria-expanded="true"] { background: #fff; border-color: var(--line-3); color: var(--accent); }

.lang-menu {
  position: absolute; top: 40px; right: 0; z-index: 600;
  display: flex; flex-direction: column; gap: 2px; padding: 5px;
  min-width: 148px; background: #fff;
  border: 1px solid var(--line-2); border-radius: 12px;
  box-shadow: 0 12px 34px -10px rgba(0, 0, 0, 0.28);
}
.lang-menu[hidden] { display: none; }
.lang-menu button {
  border: 0; background: none; cursor: pointer; font: inherit;
  font-size: 13.5px; font-weight: 500; color: var(--ink);
  text-align: left; padding: 8px 11px; border-radius: 8px; white-space: nowrap;
  transition: background 0.12s var(--ease);
}
.lang-menu button:hover { background: var(--bg-alt); }
.lang-menu button.active { color: var(--accent); font-weight: 600; }


/* ── buttons ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 980px; padding: 13px 26px;
  font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1.2;
  cursor: pointer; transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.btn-primary { background: var(--accent); color: #fff; box-shadow: var(--sh-btn); }
.btn-primary:hover { background: var(--accent-hover); color: #fff; text-decoration: none; }
.btn-lg { padding: 15px 32px; font-size: 16px; box-shadow: var(--sh-btn-lg); }
.btn-ghost { background: rgba(0, 0, 0, 0.05); color: var(--ink); }
.btn-ghost:hover { background: rgba(0, 0, 0, 0.09); color: var(--ink); text-decoration: none; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.btn-block { width: 100%; }

/* ── shared section furniture ───────────────────────────────────────────── */
.section { padding: 110px 0; }
.section-lg { padding: 140px 0; }
.section-alt { background: var(--bg-alt); }
.kicker {
  font-size: 13px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--accent);
}
h2.h2 { font-size: 56px; line-height: 1.06; font-weight: 700; letter-spacing: -0.032em; }
.lead { font-size: 19px; line-height: 1.55; color: var(--ink-2); }
.meta { font-size: 13px; color: var(--ink-3); }

figure.shot { margin: 0; }
figure.shot img {
  margin: 0 auto; border-radius: 14px;
  border: 1px solid var(--line-2); box-shadow: var(--sh-fig);
}

/* ── hero ───────────────────────────────────────────────────────────────── */
.hero {
  padding: 148px 0 0;
  background: linear-gradient(180deg, #fff, var(--bg-alt));
  text-align: center;
}
.badge {
  display: inline-block; padding: 6px 14px; border-radius: 980px;
  background: var(--accent-tint-2); color: var(--accent);
  font-size: 12.5px; font-weight: 600;
}
.hero h1 {
  margin: 22px auto 0; max-width: 900px;
  font-size: 84px; line-height: 1.03; font-weight: 700; letter-spacing: -0.035em;
  text-wrap: balance;
}
.hero h1 em { font-style: normal; color: var(--accent); }
.hero .sub { margin: 26px auto 0; max-width: 660px; font-size: 21px; line-height: 1.5; color: var(--ink-2); }
.hero .sub b { color: var(--ink); font-weight: 600; }
.hero .sub .accent { color: var(--accent); font-weight: 400; }
.hero .sub p + p { margin-top: 1em; }
.hero .actions { margin-top: 30px; display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.hero .no-sub { margin-top: 26px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.hero figure {
  margin: 52px auto -120px; max-width: 842px;
}
.hero figure img {
  border-radius: 18px; border: 1px solid var(--line-2); box-shadow: var(--sh-hero);
}
.hero-spacer { height: 160px; background: var(--bg); }

/* ── proof stats ────────────────────────────────────────────────────────── */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.stats .cell { text-align: center; }
.stats .num {
  font-size: 46px; font-weight: 700; letter-spacing: -0.03em; color: var(--accent);
}
.stats .cell p { margin-top: 10px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }

/* ── dark privacy section ───────────────────────────────────────────────── */
.dark { background: var(--bg-dark); color: var(--dk-ink); padding: 130px 0; }
.dark .grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 80px; align-items: center;
}
.dark .kicker { color: var(--accent-dark); }
.dark h2 {
  margin-top: 18px;
  font-size: 60px; line-height: 1.05; font-weight: 700; letter-spacing: -0.032em;
}
.dark p.body { margin-top: 26px; font-size: 19px; line-height: 1.55; color: var(--dk-ink-2); }
.dark p.body + p.body { margin-top: 18px; }
.dark ul { margin: 30px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.dark ul li { font-size: 16px; color: var(--dk-list); padding-left: 24px; position: relative; }
.dark ul li::before { content: '—'; position: absolute; left: 0; color: var(--accent-dark-2); }

.diagram {
  border-radius: 20px; padding: 34px 30px;
  background: linear-gradient(160deg, rgba(47, 124, 246, 0.16), rgba(255, 255, 255, 0.03));
  border: 1px solid var(--line-dk-2);
}
/* The connector rules have a min-width, and the nodes and gaps are sized to leave
   room for them. They are flex:1 with no basis, so in the narrow right-hand column
   of the split layout the nodes, pill and gaps consumed the entire row and all
   three collapsed to 0px — the diagram rendered as four disconnected boxes with no
   lines between them, which is most of its meaning gone. */
.diagram .flow { display: flex; align-items: center; gap: 8px; }
.diagram .node {
  flex: 0 0 auto; width: 54px; height: 54px; border-radius: 15px;
  background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line-dk-2);
  display: grid; place-items: center; font-size: 10.5px; font-weight: 600;
  color: var(--dk-ink); text-align: center; line-height: 1.22; padding: 5px;
}
.diagram .rule {
  flex: 1 1 auto; min-width: 16px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(47, 124, 246, 0.15), rgba(47, 124, 246, 0.75));
}
.diagram .rule.rev {
  background: linear-gradient(90deg, rgba(47, 124, 246, 0.75), rgba(47, 124, 246, 0.15));
}
.diagram .pill {
  /* Allowed to shrink, unlike the nodes: if the column gets tight, the label
     giving up a few pixels is far better than the connector lines vanishing. */
  flex: 0 1 auto; min-width: 0; padding: 6px 11px; border-radius: 999px;
  background: rgba(47, 124, 246, 0.16); border: 1px solid rgba(47, 124, 246, 0.35);
  font-size: 11.5px; font-weight: 600; color: var(--accent-dark-2); white-space: nowrap;
}
.diagram .caption { margin-top: 22px; font-size: 13.5px; color: var(--dk-meta); }
.card-dk {
  margin-top: 20px; border-radius: 20px; padding: 26px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line-dk);
}
.card-dk h3 { font-size: 16px; font-weight: 600; color: var(--dk-ink); }
.card-dk p { margin-top: 10px; font-size: 15px; line-height: 1.5; color: var(--dk-ink-2); }

/* ── menu bar section ───────────────────────────────────────────────────── */
.menubar { text-align: center; }
.menubar h2 { margin: 18px auto 0; font-size: 58px; line-height: 1.06; font-weight: 700; letter-spacing: -0.032em; }
.menubar .lead { margin: 26px auto 0; max-width: 680px; }
.mb-mock {
  margin: 52px auto 0; max-width: 760px; background: #fff; border-radius: 16px;
  border: 1px solid var(--line-2); box-shadow: var(--sh-mock); overflow: hidden;
  text-align: left;
}
.mb-strip {
  background: rgba(246, 246, 248, 0.98); border-bottom: 1px solid var(--line);
  padding: 8px 14px; display: flex; align-items: center; justify-content: flex-end; gap: 16px;
}
.mb-chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px;
  border-radius: 999px; background: var(--accent-tint); color: var(--accent);
  font-size: 12.5px; font-weight: 600;
}
.mb-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.mb-strip svg { opacity: 0.45; }
.mb-clock { font-size: 12.5px; color: var(--ink); }
.mb-body { padding: 18px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.mb-tile { background: var(--bg-alt); border-radius: 12px; padding: 14px; }
.mb-tile .k { font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); }
.mb-tile .v { margin-top: 7px; font-size: 15px; font-weight: 600; color: var(--ink); }

/* ── insights ───────────────────────────────────────────────────────────── */
.insights { padding: 170px 0; }
.insight + .insight { margin-top: 170px; }
.insight h2 { margin-top: 18px; }
.insight .lead { margin-top: 24px; max-width: 680px; }
.insight figure { margin-top: 56px; }
.insight-centered { text-align: center; }
.insight-centered .lead { margin-left: auto; margin-right: auto; }
.insight-split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 72px; align-items: end;
}
.feature-row {
  margin-top: 44px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px;
}
.feature-row.three { grid-template-columns: repeat(3, 1fr); }
.insight-centered .feature-row { text-align: left; }
.feature h3 { font-size: 16px; font-weight: 600; }
.feature p { margin-top: 8px; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }

/* ── controls ───────────────────────────────────────────────────────────── */
.controls h2 { margin-top: 18px; }
.controls .lead { margin-top: 24px; max-width: 720px; }
.pills { margin-top: 44px; display: flex; flex-wrap: wrap; gap: 12px; }
.pills span {
  background: #fff; border: 1px solid var(--line-2); border-radius: 999px;
  padding: 11px 18px; font-size: 15px; font-weight: 500;
}
.cards-3 { margin-top: 52px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.card {
  background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 30px;
}
.card h3 { font-size: 17px; font-weight: 600; }
.card p { margin-top: 12px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }

/* ── closing ────────────────────────────────────────────────────────────── */
.close { text-align: center; padding: 140px 0; }
.close h2 { font-size: 66px; line-height: 1.04; font-weight: 700; letter-spacing: -0.035em; }
.close .lead { margin: 26px auto 0; max-width: 620px; }
.close .actions { margin-top: 34px; }
.reqs {
  margin-top: 26px; display: flex; justify-content: center; flex-wrap: wrap;
  gap: 8px 22px; font-size: 12.5px; color: var(--ink-3);
}

/* ── footer ─────────────────────────────────────────────────────────────── */
.site-footer {
  background: var(--bg-alt); border-top: 1px solid var(--line);
  padding: 44px 0; font-size: 12.5px; color: var(--ink-3);
}
/* Wordmark and links share one line; the trademark notice runs the full width
   beneath them. It used to sit in a 620px column beside the links, which left the
   longest text on the page in the narrowest space. */
.site-footer .row {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.site-footer .wordmark { display: inline-block; font-size: 15px; }
.site-footer .legal {
  line-height: 1.55; margin-top: 22px; padding-top: 20px;
  border-top: 1px solid var(--line);
}
.site-footer .links { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.site-footer a { color: var(--ink-3); }
.site-footer a:hover { color: var(--ink); }

/* ── "for Tesla, not by Tesla" ───────────────────────────────────────────── */
/* Stated in plain sight, not only in the footer's legal block. */
.for-tesla {
  margin: 16px auto 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-3);
}
.for-tesla b { color: var(--ink-2); font-weight: 600; }
.for-tesla-doc { margin: 10px 0 0; }

/* ── pre-launch notice ──────────────────────────────────────────────────── */
.notice {
  margin: 0 0 26px; padding: 16px 20px; border-radius: 14px;
  background: rgba(245, 179, 1, 0.10);
  border: 1px solid rgba(200, 138, 6, 0.35);
  font-size: 14.5px; line-height: 1.55; color: var(--ink-2);
}
.notice b { color: var(--ink); font-weight: 600; }
.order-soon { margin-top: 10px; text-align: center; }

/* ── text pages (privacy, support) ──────────────────────────────────────── */
.doc { padding: 128px 0 110px; }
.doc .inner { max-width: 720px; margin: 0 auto; }
.doc h1 { font-size: 44px; line-height: 1.08; font-weight: 700; letter-spacing: -0.03em; }
.doc .updated { margin-top: 14px; font-size: 13px; color: var(--ink-3); }
.doc h2 {
  margin-top: 48px; font-size: 22px; font-weight: 600; letter-spacing: -0.015em;
}
.doc h3 { margin-top: 28px; font-size: 17px; font-weight: 600; }
.doc p { margin-top: 14px; font-size: 16.5px; line-height: 1.6; color: var(--ink-2); }
.doc p b, .doc li b { color: var(--ink); font-weight: 600; }
.doc ul { margin: 14px 0 0; padding-left: 22px; }
.doc li { margin-top: 9px; font-size: 16.5px; line-height: 1.6; color: var(--ink-2); }
/* .doc-lang-note is gone: it styled an "available in English only" notice that no
   page has ever contained, and the text pages are fully translated. */
.doc .callout {
  margin-top: 24px; background: var(--bg-alt); border-radius: 14px; padding: 20px 22px;
  border: 1px solid var(--line);
}
.doc .callout p { margin-top: 0; font-size: 15px; }
.doc .callout p + p { margin-top: 10px; }
.doc a { text-decoration: underline; }

/* ── licence recovery (support page) ────────────────────────────────────────
   Self-contained on purpose: the visually similar form on the checkout page is
   styled in checkout.css, which this page does not load, and loading a whole
   checkout stylesheet for one form would be the more expensive mistake. */
.recover {
  margin-top: 20px; padding: 22px; background: var(--bg-alt);
  border: 1px solid var(--line); border-radius: 14px;
}
.recover-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.recover-label {
  display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 7px;
}
.recover-input {
  width: 100%; font: inherit; font-size: 15px; color: var(--ink);
  padding: 11px 13px; border: 1px solid var(--line-3); border-radius: 10px;
  background: #fff;
}
.recover-input:focus {
  outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent);
}
.recover-input[aria-invalid="true"] { border-color: #dc2626; }
.recover .btn { margin-top: 16px; }
.recover-msg { margin-top: 12px; font-size: 13.5px; color: #dc2626; }
.recover-msg[hidden] { display: none; }
.recover-result { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.recover-result[hidden] { display: none; }
.recover-key-label {
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-3);
}
/* A signed licence is ~250 characters of base64url with no spaces in it: it has to
   break anywhere, and scroll rather than stretch the panel. */
.recover-key {
  margin-top: 10px; font-family: var(--mono); font-size: 12.5px; line-height: 1.55;
  color: var(--ink); word-break: break-all; overflow-wrap: anywhere;
  max-height: 132px; overflow-y: auto; user-select: all;
  background: #fff; border: 1px solid var(--line-2); border-radius: 10px;
  padding: 12px 14px;
}
.recover-copy {
  background: #fff; color: var(--ink); border: 1px solid var(--line-3);
  font-size: 13.5px; padding: 9px 16px; border-radius: 10px;
}
.recover-copy:hover { border-color: rgba(0, 0, 0, 0.22); }

@media (max-width: 680px) {
  .doc { padding: 104px 0 80px; }
  .doc h1 { font-size: 32px; }
  .doc h2 { font-size: 19px; margin-top: 36px; }
  .doc p, .doc li { font-size: 16px; }
  .recover-fields { grid-template-columns: 1fr; }
}

/* ── motion ─────────────────────────────────────────────────────────────── */
@keyframes rise {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: none; }
}
.rise { animation: rise 0.95s var(--ease) both; }
.rise-1 { animation: rise 0.8s var(--ease) both; }
.d-0 { animation-delay: 0s; }
.d-1 { animation-delay: 0.08s; }
.d-2 { animation-delay: 0.18s; }
.d-3 { animation-delay: 0.28s; }
.d-4 { animation-delay: 0.36s; }

/* Sections lift in once, when scrolled to (set by site.js). */
.reveal { opacity: 0; transform: translateY(28px); }
.reveal.in { opacity: 1; transform: none; transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rise, .rise-1 { animation: none; }
  .reveal { opacity: 1; transform: none; }
  .reveal.in { transition: none; }
}

/* ── responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .hero h1 { font-size: 52px; }
  .hero .sub { font-size: 19px; }
  h2.h2, .dark h2, .menubar h2 { font-size: 40px; }
  .close h2 { font-size: 44px; }
  .dark .grid, .insight-split { grid-template-columns: 1fr; gap: 40px; align-items: start; }
  .insights { padding: 100px 0; }
  .insight + .insight { margin-top: 100px; }
  .feature-row { grid-template-columns: repeat(2, 1fr); gap: 26px; }
  .cards-3 { grid-template-columns: 1fr; }
  .section, .section-lg, .dark, .close { padding: 80px 0; }
  .hero figure { margin-bottom: -60px; }
  .hero-spacer { height: 90px; }
}
@media (max-width: 680px) {
  /* In the open mobile nav the squircle sits on its own row, aligned with the links
     above it, and its menu opens downward from there rather than being pinned to
     the right edge of a full-width nav. */
  .lang-pick {
    margin: 6px 0 2px; padding: 10px var(--gutter) 0;
    border-top: 1px solid var(--line); align-self: stretch;
  }
  .lang-menu { top: 48px; right: auto; left: var(--gutter); }
  .hero { padding-top: 116px; }
  .hero h1 { font-size: 40px; letter-spacing: -0.03em; }
  h2.h2, .dark h2, .menubar h2 { font-size: 32px; }
  .close h2 { font-size: 34px; }
  .stats { grid-template-columns: 1fr; gap: 34px; }
  .feature-row { grid-template-columns: 1fr; }
  .mb-body { grid-template-columns: 1fr; }
  .nav { display: none; }
  .nav.open {
    display: flex; position: absolute; top: 52px; left: 0; right: 0;
    flex-direction: column; gap: 0; align-items: stretch;
    background: rgba(255, 255, 255, 0.97);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--line);
    padding: 8px 0;
  }
  .nav.open a { padding: 12px var(--gutter); font-size: 15px; }
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border: 0; background: transparent;
    border-radius: 9px; cursor: pointer; color: var(--ink);
  }
  .nav-toggle:hover { background: rgba(0, 0, 0, 0.05); }
  .diagram { padding: 24px 20px; }
  .diagram .flow { flex-wrap: wrap; justify-content: center; gap: 12px; }
  .diagram .rule { min-width: 40px; }
}