/* ============================================================
   YouTube Summarizer — homepage
   Tokens → base → components → sections → responsive
   ============================================================ */

/* ---------- Tokens: light (default) ---------- */
:root {
  --bg:            #fbfbfd;
  --bg-alt:        #f3f4f7;
  --surface:       #ffffff;
  --surface-2:     #f7f8fa;
  --line:          #e6e7ec;
  --line-strong:   #d5d7de;

  --text:          #0e0f15;
  --text-2:        #4b4f5c;
  --text-3:        #80858f;

  --accent:        #e2242c;
  --accent-2:      #ff5a36;
  --accent-ink:    #ffffff;
  --accent-soft:   rgba(226, 36, 44, 0.08);
  --accent-line:   rgba(226, 36, 44, 0.22);

  --shadow-sm:  0 1px 2px rgba(16, 18, 28, .06), 0 1px 3px rgba(16, 18, 28, .05);
  --shadow-md:  0 4px 12px rgba(16, 18, 28, .07), 0 2px 4px rgba(16, 18, 28, .04);
  --shadow-lg:  0 18px 40px -12px rgba(16, 18, 28, .18), 0 4px 12px rgba(16, 18, 28, .06);
  --shadow-xl:  0 40px 80px -24px rgba(16, 18, 28, .24), 0 8px 24px rgba(16, 18, 28, .08);

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-full: 999px;

  --wrap: 1140px;
  --ease: cubic-bezier(.22, 1, .36, 1);

  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Instrument Serif", ui-serif, Georgia, "Times New Roman", serif;

  color-scheme: light;
}

/* ---------- Tokens: dark ---------- */
:root[data-theme="dark"] {
  --bg:            #08080c;
  --bg-alt:        #0d0e14;
  --surface:       #111219;
  --surface-2:     #171923;
  --line:          #23252f;
  --line-strong:   #32353f;

  --text:          #f2f3f7;
  --text-2:        #a8adba;
  --text-3:        #767c8a;

  --accent:        #ff3b3b;
  --accent-2:      #ff7a45;
  --accent-ink:    #ffffff;
  --accent-soft:   rgba(255, 59, 59, 0.12);
  --accent-line:   rgba(255, 59, 59, 0.3);

  --shadow-sm:  0 1px 2px rgba(0, 0, 0, .5);
  --shadow-md:  0 4px 14px rgba(0, 0, 0, .5);
  --shadow-lg:  0 20px 44px -14px rgba(0, 0, 0, .7), 0 4px 12px rgba(0, 0, 0, .4);
  --shadow-xl:  0 44px 88px -28px rgba(0, 0, 0, .85), 0 8px 28px rgba(0, 0, 0, .5);

  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            #08080c;
    --bg-alt:        #0d0e14;
    --surface:       #111219;
    --surface-2:     #171923;
    --line:          #23252f;
    --line-strong:   #32353f;

    --text:          #f2f3f7;
    --text-2:        #a8adba;
    --text-3:        #767c8a;

    --accent:        #ff3b3b;
    --accent-2:      #ff7a45;
    --accent-soft:   rgba(255, 59, 59, 0.12);
    --accent-line:   rgba(255, 59, 59, 0.3);

    --shadow-sm:  0 1px 2px rgba(0, 0, 0, .5);
    --shadow-md:  0 4px 14px rgba(0, 0, 0, .5);
    --shadow-lg:  0 20px 44px -14px rgba(0, 0, 0, .7), 0 4px 12px rgba(0, 0, 0, .4);
    --shadow-xl:  0 44px 88px -28px rgba(0, 0, 0, .85), 0 8px 28px rgba(0, 0, 0, .5);

    color-scheme: dark;
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
[hidden] { display: none !important; }

h1, h2, h3, h4 {
  margin: 0;
  line-height: 1.12;
  letter-spacing: -0.025em;
  font-weight: 700;
}
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: .88em;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: .08em .4em;
}

kbd {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 6px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  color: var(--text-2);
}

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

::selection { background: var(--accent); color: #fff; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 10px;
  z-index: 200;
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 10px 16px;
  border-radius: var(--r-sm);
  font-weight: 600;
}
.skip-link:focus { left: 16px; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 24px;
}
.wrap-narrow { max-width: 820px; }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  --btn-bd: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  padding: 0 18px;
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-full);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease),
              background-color .18s var(--ease), border-color .18s var(--ease),
              opacity .18s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  --btn-fg: var(--accent-ink);
  --btn-bd: transparent;
  background: linear-gradient(135deg, var(--accent-2), var(--accent) 60%);
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.btn-primary:hover { box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, .28); }

.btn-soft {
  --btn-bg: var(--surface);
  --btn-bd: var(--line);
  box-shadow: var(--shadow-sm);
}
.btn-soft:hover { --btn-bd: var(--line-strong); box-shadow: var(--shadow-md); }

.btn-ghost { --btn-fg: var(--text-2); }
.btn-ghost:hover { --btn-fg: var(--text); --btn-bg: var(--surface-2); }

.btn-lg { height: 54px; padding: 0 30px; font-size: 16px; border-radius: var(--r-full); }
.btn-block { display: flex; width: 100%; }

.btn[disabled] { opacity: .55; pointer-events: none; }

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: var(--r-full);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text-2);
  cursor: pointer;
  transition: color .18s, border-color .18s, background-color .18s, transform .18s var(--ease);
}
.icon-btn:hover { color: var(--text); border-color: var(--line-strong); transform: translateY(-1px); }

.link-btn {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-3);
  cursor: pointer;
  transition: color .18s;
}
.link-btn:hover { color: var(--accent); }

/* theme icon swap */
.i-moon { display: none; }
:root[data-theme="dark"] .i-sun { display: none; }
:root[data-theme="dark"] .i-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .i-sun { display: none; }
  :root:not([data-theme="light"]) .i-moon { display: block; }
  :root[data-theme="dark"] .i-sun { display: none; }
}

/* ---------- Brand ---------- */
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand-mark {
  display: grid;
  place-items: center;
  border-radius: 9px;
  /* Tint the shadow with the brand red so the mark sits on the page, not above it. */
  box-shadow: 0 2px 6px -1px rgba(226, 36, 44, .32), 0 1px 2px rgba(16, 18, 28, .12);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.brand:hover .brand-mark {
  transform: translateY(-1px) scale(1.04);
  box-shadow: 0 6px 16px -3px rgba(226, 36, 44, .42), 0 2px 4px rgba(16, 18, 28, .14);
}
.brand-text {
  font-weight: 700;
  font-size: 16.5px;
  letter-spacing: -0.03em;
}
/* Second half of the wordmark: lighter, but still readable in both themes. */
.brand-text span { color: var(--text-2); font-weight: 500; }

/* ---------- Nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s, background-color .25s;
}
.nav.is-stuck { border-bottom-color: var(--line); }

.nav-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 68px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-inline: auto;
}
.nav-links a {
  position: relative;
  padding: 8px 14px;
  border-radius: var(--r-full);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text-2);
  transition: color .18s, background-color .18s;
}
.nav-links a:hover { color: var(--text); background: var(--surface-2); }

.nav-actions { display: flex; align-items: center; gap: 10px; }
.menu-btn { display: none; }

.mobile-menu {
  display: grid;
  padding: 8px 24px 18px;
  border-top: 1px solid var(--line);
  background: var(--bg);
}
.mobile-menu a {
  padding: 12px 4px;
  font-weight: 500;
  color: var(--text-2);
  border-bottom: 1px solid var(--line);
}
.mobile-menu a:last-child { border-bottom: 0; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: clamp(48px, 8vw, 92px) 0 clamp(40px, 6vw, 72px);
  overflow: hidden;
}
.hero-glow {
  position: absolute;
  inset: -6% -8% auto -10%;
  height: 680px;
  pointer-events: none;
  /* A soft pool behind the headline, a fainter one behind the sheet. */
  background:
    radial-gradient(40% 48% at 24% 42%, color-mix(in srgb, var(--accent) 17%, transparent), transparent 72%),
    radial-gradient(32% 40% at 76% 30%, color-mix(in srgb, var(--accent-2) 11%, transparent), transparent 74%);
  filter: blur(16px);
  opacity: .9;
}

.hero-head { position: relative; text-align: center; max-width: 760px; margin-inline: auto; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 14px;
  margin-bottom: 26px;
  border-radius: var(--r-full);
  border: 1px solid var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: transform .2s var(--ease), background-color .2s;
}
.pill:hover { transform: translateY(-1px); }
.pill-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 var(--accent-line);
  animation: ping 2.4s var(--ease) infinite;
}
@keyframes ping {
  0%   { box-shadow: 0 0 0 0 var(--accent-line); }
  70%  { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* The H1 carries the search term, so it's longer than a pure brand line —
   sized to wrap to two lines at desktop rather than three. */
.hero h1 {
  font-size: clamp(34px, 6.4vw, 64px);
  font-weight: 800;
  letter-spacing: -0.042em;
  line-height: 1.04;
  text-wrap: balance;
}

/* The brand line, demoted from H1 but kept as the visual flourish. */
/* Sized off the H1, not independently — at 1280 this was 56px against
   the headline's 52px, which inverted the hierarchy. */
.hero-tagline {
  margin-top: 8px;
  font-size: clamp(24px, 3.4vw, 40px);
  line-height: 1.08;
}
.hero-tagline em,
.hero h1 em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.015em;
  background: linear-gradient(120deg, var(--accent-2), var(--accent) 70%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lede {
  margin: 22px auto 0;
  max-width: 600px;
  font-size: clamp(16px, 2vw, 18.5px);
  line-height: 1.62;
  color: var(--text-2);
  text-wrap: pretty;
}

/* ---------- Tool ---------- */
.tool {
  position: relative;
  max-width: 780px;
  margin: clamp(30px, 5vw, 46px) auto 0;
}

.tool-form { display: flex; gap: 10px; align-items: stretch; }

.field {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 54px;
  padding: 0 8px 0 16px;
  border-radius: var(--r-full);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-md);
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.field:focus-within {
  border-color: var(--accent);
  box-shadow: var(--shadow-lg), 0 0 0 4px var(--accent-soft);
}
.field.is-valid { border-color: color-mix(in srgb, var(--accent) 55%, var(--line-strong)); }
.field.is-error { border-color: #e0403f; box-shadow: 0 0 0 4px rgba(224, 64, 63, .12); }

.field-icon { flex: none; color: var(--text-3); }
.field:focus-within .field-icon { color: var(--accent); }

.field input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 15.5px;
  letter-spacing: -0.01em;
}
.field input:focus { outline: none; }
.field input::placeholder { color: var(--text-3); }

.paste-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  height: 36px;
  padding: 0 13px;
  border-radius: var(--r-full);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text-2);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: color .18s, border-color .18s, background-color .18s;
}
.paste-btn:hover { color: var(--text); border-color: var(--line-strong); }

/* submit button spinner state */
#submitBtn { position: relative; min-width: 158px; }
.spinner {
  position: absolute;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  opacity: 0;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
#submitBtn.is-busy .btn-label,
#submitBtn.is-busy .btn-arrow { opacity: 0; }
#submitBtn.is-busy .spinner { opacity: 1; }
#submitBtn .btn-label, #submitBtn .btn-arrow { transition: opacity .18s; }
.btn-arrow { transition: transform .2s var(--ease), opacity .18s; }
#submitBtn:hover .btn-arrow { transform: translateX(3px); }

.hint {
  margin-top: 14px;
  text-align: center;
  font-size: 13px;
  color: var(--text-3);
}
.hint kbd { margin: 0 1px; }

.samples {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
}
.samples-label { font-size: 13px; color: var(--text-3); }
.chip {
  height: 32px;
  padding: 0 14px;
  border-radius: var(--r-full);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text-2);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: color .18s, border-color .18s, transform .18s var(--ease), background-color .18s;
}
.chip:hover {
  color: var(--accent);
  border-color: var(--accent-line);
  background: var(--accent-soft);
  transform: translateY(-1px);
}

/* preview card */
.preview {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  padding: 10px 12px 10px 10px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  animation: pop .32s var(--ease) both;
}
@keyframes pop {
  from { opacity: 0; transform: translateY(8px) scale(.99); }
  to   { opacity: 1; transform: none; }
}
.preview-thumb {
  position: relative;
  flex: none;
  width: 112px;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface-2);
}
.preview-thumb img { width: 100%; height: 100%; object-fit: cover; }
.preview-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(transparent 40%, rgba(0, 0, 0, .35));
  text-shadow: 0 1px 6px rgba(0, 0, 0, .6);
}
.preview-meta { min-width: 0; flex: 1; }
.preview-title {
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: -0.01em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.preview-sub { font-size: 13px; color: var(--text-3); margin-top: 2px; }
.preview-clear { width: 32px; height: 32px; }

.error {
  margin-top: 14px;
  padding: 11px 15px;
  border-radius: var(--r-md);
  background: rgba(224, 64, 63, .08);
  border: 1px solid rgba(224, 64, 63, .24);
  color: #c22f2e;
  font-size: 14px;
  text-align: center;
}
:root[data-theme="dark"] .error { color: #ff8a87; }

/* ---------- Result ---------- */
/* Left-aligned to the hero column rather than centred, now that the
   hero above it is an asymmetric grid. */
.result {
  max-width: 880px;
  margin: 28px 0 0;
  border-radius: var(--r-xl);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  animation: pop .38s var(--ease) both;
}
.result-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  padding: 20px 22px 16px;
  border-bottom: 1px solid var(--line);
}
.result-title { flex: 1; min-width: 200px; }
.result-title h2 { font-size: 18px; letter-spacing: -0.02em; }
.result-sub { font-size: 13px; color: var(--text-3); margin-top: 3px; }
.result-actions { display: flex; gap: 8px; }
.result-actions .btn { height: 36px; padding: 0 14px; font-size: 13.5px; }

.tabs {
  display: flex;
  gap: 2px;
  padding: 10px 14px 0;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--line);
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  position: relative;
  flex: none;
  padding: 10px 14px 13px;
  border: 0;
  background: none;
  color: var(--text-3);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: color .18s;
}
.tab::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transition: transform .24s var(--ease);
}
.tab:hover { color: var(--text-2); }
.tab.is-active { color: var(--text); }
.tab.is-active::after { transform: scaleX(1); }

.panels { padding: 22px; }
.panel { animation: fade .3s var(--ease) both; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.panel h3 {
  font-size: 15px;
  margin: 22px 0 8px;
  letter-spacing: -0.015em;
}
.panel h3:first-child { margin-top: 0; }
.panel p { color: var(--text-2); font-size: 15.5px; line-height: 1.68; }
.panel p + p { margin-top: 12px; }

.lead-line {
  font-size: 17px !important;
  line-height: 1.6 !important;
  color: var(--text) !important;
  letter-spacing: -0.015em;
}

.bullets { display: grid; gap: 12px; }
.bullets li {
  position: relative;
  padding-left: 28px;
  color: var(--text-2);
  font-size: 15.5px;
  line-height: 1.6;
}
.bullets li::before {
  content: "";
  position: absolute;
  left: 6px; top: .62em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

.chapters { display: grid; gap: 4px; }
.chapters a {
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding: 11px 12px;
  border-radius: var(--r-md);
  transition: background-color .18s, transform .18s var(--ease);
}
.chapters a:hover { background: var(--surface-2); transform: translateX(3px); }
/* Same fix on real output, where timestamps run from 0:00 to 1:15:02 —
   without this the chapter titles go ragged the moment a video passes
   ten minutes. */
.chapters .ts {
  flex: none;
  min-width: 58px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 13px;
  color: var(--accent);
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--accent-soft);
}
.chapters .ch-title { font-weight: 600; font-size: 14.5px; }
.chapters .ch-desc { color: var(--text-3); font-size: 13.5px; margin-top: 2px; }

.result-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  padding: 14px 22px;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
  font-size: 12.5px;
  color: var(--text-3);
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--r-full);
  border: 1px solid var(--line);
  background: var(--surface);
  font-weight: 600;
}
.badge.is-demo { border-color: var(--accent-line); color: var(--accent); background: var(--accent-soft); }

/* skeleton */
.skel { display: grid; gap: 12px; }
.skel-line {
  height: 13px;
  border-radius: 7px;
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--line) 37%, var(--surface-2) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.3s ease-in-out infinite;
}
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* ---------- Recent ---------- */
.recent { max-width: 880px; margin: 26px 0 0; }
.recent-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.recent-head h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .09em; color: var(--text-3); }
.recent-list { display: grid; gap: 8px; }
.recent-list button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .18s, transform .18s var(--ease), box-shadow .18s;
}
.recent-list button:hover { border-color: var(--line-strong); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.recent-list img { width: 56px; aspect-ratio: 16/9; object-fit: cover; border-radius: 7px; flex: none; }
.recent-list .rt { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-list .rc { font-size: 12.5px; color: var(--text-3); }

/* ---------- Sections ---------- */
.section { padding: clamp(64px, 9vw, 108px) 0; }
.section-alt { background: var(--bg-alt); border-block: 1px solid var(--line); }

.section-head { text-align: center; max-width: 660px; margin: 0 auto clamp(38px, 5vw, 56px); }
.kicker {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
.section-head h2 {
  font-size: clamp(28px, 4.4vw, 42px);
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.section-lede {
  margin-top: 14px;
  color: var(--text-2);
  font-size: 16.5px;
  line-height: 1.6;
  text-wrap: pretty;
}

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

.card {
  padding: 26px 24px 28px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--line-strong);
}
.card-icon {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  margin-bottom: 18px;
  border-radius: var(--r-md);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--accent);
}
.card-icon svg { width: 21px; height: 21px; }
.card h3 { font-size: 17.5px; letter-spacing: -0.022em; margin-bottom: 9px; }
.card p { color: var(--text-2); font-size: 15px; line-height: 1.62; text-wrap: pretty; }

/* steps */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  counter-reset: step;
}
.step {
  position: relative;
  padding-top: 26px;
  border-top: 2px solid var(--line);
}
.step::before {
  content: "";
  position: absolute;
  left: 0; top: -2px;
  width: 44px; height: 2px;
  background: var(--accent);
}
.step-num {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--accent);
  margin-bottom: 12px;
}
.step h3 { font-size: 19px; letter-spacing: -0.025em; margin-bottom: 9px; }
.step p { color: var(--text-2); font-size: 15px; line-height: 1.62; text-wrap: pretty; }

/* use cases */
.ticks { margin-top: 22px; }

.ticks { display: grid; gap: 11px; }
.ticks li {
  position: relative;
  padding-left: 28px;
  font-size: 14.8px;
  color: var(--text-2);
  line-height: 1.5;
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 0; top: .3em;
  width: 17px; height: 17px;
  border-radius: 50%;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
}
.ticks li::after {
  content: "";
  position: absolute;
  left: 5px; top: .56em;
  width: 6px; height: 3.5px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

/* ---------- Pricing ---------- */
.toggle {
  display: inline-flex;
  gap: 3px;
  margin-top: 26px;
  padding: 4px;
  border-radius: var(--r-full);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.toggle-opt {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--r-full);
  background: none;
  color: var(--text-3);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: color .2s, background-color .2s, box-shadow .2s;
}
.toggle-opt.is-active {
  color: var(--accent-ink);
  background: linear-gradient(135deg, var(--accent-2), var(--accent) 65%);
  box-shadow: var(--shadow-sm);
}
.save {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--r-full);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--accent);
}
.toggle-opt.is-active .save { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .3); color: #fff; }

/* Old plan cards removed — both pricing surfaces use .rate* now. */
.fineprint { margin-top: 26px; text-align: center; font-size: 13px; color: var(--text-3); }

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 16px);
  z-index: 300;
  padding: 11px 20px;
  border-radius: var(--r-full);
  background: var(--text);
  color: var(--bg);
  font-size: 14px;
  font-weight: 600;
  box-shadow: var(--shadow-xl);
  opacity: 0;
  transition: opacity .24s var(--ease), transform .24s var(--ease);
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .features { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .nav-links { display: none; }
  .menu-btn { display: inline-grid; }
  .nav-inner { justify-content: space-between; }
  .steps { grid-template-columns: 1fr; gap: 26px; }
}

@media (max-width: 680px) {
  .wrap { padding-inline: 18px; }
  html { scroll-padding-top: 80px; }
  .hide-sm { display: none; }
  .features { grid-template-columns: 1fr; }
  .tool-form { flex-direction: column; }
  #submitBtn { width: 100%; }
  .field { height: 52px; }
  .result-head { flex-direction: column; }
  .panels { padding: 18px; }
  .uc-body { padding: 24px 20px; }
  .preview-thumb { width: 84px; }
}

@media (max-width: 420px) {
  .hide-xs { display: none; }
  .samples-label { display: none; }
}

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- Print ---------- */
@media print {
  .nav, .samples, .hint, .cta, .footer, .hero-facts, .toast, .result-actions { display: none !important; }
  body { background: #fff; color: #000; }
  .result { box-shadow: none; border: 1px solid #ccc; }
}

/* ============================================================
   Interior pages
   ============================================================ */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.pt-0 { padding-top: 0; }

/* current page in the nav */
.nav-links a[aria-current="page"] {
  color: var(--text);
  background: var(--surface-2);
}

/* ---------- Breadcrumbs ---------- */
.crumbs {
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 11px 0;
  font-size: 13px;
  color: var(--text-3);
}
.crumbs li + li::before {
  content: "/";
  margin-right: 6px;
  color: var(--line-strong);
}
.crumbs a { color: var(--text-2); transition: color .18s; }
.crumbs a:hover { color: var(--accent); }
.crumbs [aria-current="page"] { color: var(--text-3); }

/* ---------- Page header ---------- */
.page-head {
  position: relative;
  overflow: hidden;
  padding: clamp(46px, 7vw, 82px) 0 clamp(34px, 5vw, 54px);
  text-align: center;
}
.page-head.is-compact { padding-bottom: clamp(20px, 3vw, 30px); text-align: left; }
.page-head .kicker { margin-bottom: 14px; }
.page-head h1 {
  font-size: clamp(32px, 5.6vw, 56px);
  font-weight: 800;
  letter-spacing: -0.042em;
  text-wrap: balance;
}
.page-head .lede {
  margin: 20px auto 0;
  max-width: 620px;
  font-size: clamp(16px, 1.9vw, 18.5px);
  color: var(--text-2);
  text-wrap: pretty;
}
.page-head.is-compact .lede { margin-inline: 0; }
.page-head .toggle { margin-top: 28px; }
.updated { margin-top: 10px; font-size: 13.5px; color: var(--text-3); }

.head-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 30px;
}
.page-head.is-compact .head-actions { justify-content: flex-start; }

/* ---------- "See more" links ---------- */
.section-more { margin-top: 34px; text-align: center; }
.panel-more { margin-top: 20px; }
.section-more a, .panel-more a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 15px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: -0.01em;
}
.section-more a span, .panel-more a span {
  transition: transform .2s var(--ease);
  display: inline-block;
}
.section-more a:hover span, .panel-more a:hover span { transform: translateX(4px); }

/* ---------- Alternating feature rows ---------- */
.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(30px, 6vw, 72px);
  padding: clamp(34px, 5vw, 54px) 0;
  border-bottom: 1px solid var(--line);
}
.feature-row:last-child { border-bottom: 0; }
.feature-row.is-flipped .feature-copy { order: 2; }
.feature-copy h2 {
  font-size: clamp(23px, 3vw, 30px);
  letter-spacing: -0.032em;
  margin: 16px 0 12px;
  text-wrap: balance;
}
.feature-copy p {
  color: var(--text-2);
  font-size: 16px;
  line-height: 1.66;
  text-wrap: pretty;
}
.feature-copy p + p { margin-top: 12px; }
.feature-copy .ticks { margin-top: 20px; }
.feature-copy .ticks strong { color: var(--text); font-weight: 600; }
.note {
  margin-top: 16px !important;
  padding-left: 14px;
  border-left: 2px solid var(--accent-line);
  font-size: 14.5px !important;
  color: var(--text-3) !important;
}

.feature-visual {
  display: grid;
  gap: 8px;
  align-content: center;
  min-height: 190px;
  padding: 24px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
}
.mini-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 12px; }
.mini-tabs span {
  padding: 5px 11px;
  border-radius: var(--r-full);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-3);
  background: var(--surface-2);
}
.mini-tabs .on { background: var(--accent); color: #fff; }
.mini-lines { display: grid; gap: 9px; }
.mini-lines i { display: block; height: 9px; border-radius: 5px; background: var(--surface-2); }

.mini-chapter {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 11px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  font-size: 13.5px;
  color: var(--text-2);
}
.mini-chapter .ts {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 12px;
  color: var(--accent);
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--accent-soft);
}
.mini-quote { margin: 0; padding: 4px 0 0 18px; border-left: 3px solid var(--accent); }
.mini-quote p { font-size: 16px; line-height: 1.55; color: var(--text); font-style: italic; }
.mini-quote cite {
  display: inline-block;
  margin-top: 10px;
  font-style: normal;
  font-weight: 700;
  font-size: 12.5px;
  color: var(--accent);
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--accent-soft);
}
.lang-grid { display: flex; flex-wrap: wrap; gap: 7px; }
.lang-grid span {
  padding: 6px 12px;
  border-radius: var(--r-full);
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: 13px;
  color: var(--text-2);
}

/* ---------- Numbered flow ---------- */
.flow { display: grid; gap: 4px; }
.flow-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 22px;
  padding-bottom: 34px;
  position: relative;
}
.flow-step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 21px; top: 46px; bottom: 10px;
  width: 2px;
  background: linear-gradient(var(--line), transparent);
}
.flow-num {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--accent);
  font-weight: 700;
  font-size: 15px;
}
.flow-step h2, .flow-step h3 {
  font-size: clamp(19px, 2.4vw, 23px);
  letter-spacing: -0.028em;
  margin: 9px 0 10px;
}
.flow-step p {
  color: var(--text-2);
  font-size: 15.8px;
  line-height: 1.66;
  max-width: 62ch;
  text-wrap: pretty;
}
.flow-step p + p { margin-top: 11px; }

/* ---------- Prose ---------- */
.prose { max-width: 68ch; }
.prose h2 {
  font-size: clamp(22px, 2.8vw, 28px);
  letter-spacing: -0.032em;
  margin: 42px 0 14px;
  text-wrap: balance;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
  font-size: clamp(17px, 2.1vw, 19.5px);
  letter-spacing: -0.024em;
  margin: 30px 0 10px;
}
.prose p {
  color: var(--text-2);
  font-size: 16.5px;
  line-height: 1.72;
  margin-bottom: 15px;
  text-wrap: pretty;
}
.prose .lede {
  font-size: 18.5px;
  color: var(--text);
  line-height: 1.6;
  margin-bottom: 28px;
  letter-spacing: -0.012em;
}
.prose ul, .prose ol {
  margin: 0 0 18px;
  padding-left: 22px;
  list-style: disc;
}
.prose ol { list-style: decimal; }
.prose li {
  color: var(--text-2);
  font-size: 16.5px;
  line-height: 1.68;
  margin-bottom: 9px;
  padding-left: 4px;
}
.prose li strong { color: var(--text); }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { text-decoration-thickness: 2px; }
.prose blockquote {
  margin: 22px 0;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--accent-line);
}
.prose blockquote p { font-style: italic; color: var(--text-3); margin-bottom: 0; }
.prose em { color: var(--text); }

.prose.legal h2 { font-size: clamp(19px, 2.2vw, 22px); margin-top: 38px; }
.prose.legal h3 { font-size: 16.5px; margin-top: 24px; }
.prose.legal p, .prose.legal li { font-size: 15.8px; }

.legal-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 48px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  font-size: 14.5px;
  font-weight: 600;
}
.legal-nav a { color: var(--text-2); transition: color .18s; }
.legal-nav a:hover { color: var(--accent); }

/* ---------- Callout ---------- */
.callout {
  padding: 26px 28px;
  border-radius: var(--r-lg);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
}
.callout h2 { font-size: 19px; letter-spacing: -0.026em; margin-bottom: 10px; }
.callout p { color: var(--text-2); font-size: 15.8px; line-height: 1.66; text-wrap: pretty; }
.callout p + p { margin-top: 12px; }
.callout a { color: var(--accent); font-weight: 600; }

/* ---------- Principles ---------- */
.principles { display: grid; gap: 16px; margin: 8px 0 34px; }
.principle {
  padding: 24px 26px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.principle h3 { font-size: 17.5px; letter-spacing: -0.024em; margin-bottom: 9px; }
.principle p { color: var(--text-2); font-size: 15.5px; line-height: 1.64; text-wrap: pretty; }

/* ---------- Use-case cards ---------- */
.uc-grid { grid-template-columns: repeat(2, 1fr); }
.uc-card {
  display: flex;
  flex-direction: column;
  padding: 28px 26px 26px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s;
}
.uc-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--accent-line);
}
.uc-card h2, .uc-card h3 { font-size: 19px; letter-spacing: -0.026em; margin-bottom: 9px; }
.uc-card p { color: var(--text-2); font-size: 15px; line-height: 1.62; flex: 1; text-wrap: pretty; }
.uc-card-more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 18px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--accent);
}
.uc-card-more span { transition: transform .2s var(--ease); display: inline-block; }
.uc-card:hover .uc-card-more span { transform: translateX(4px); }

/* ---------- Comparison table ---------- */
.table-wrap {
  overflow-x: auto;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.compare {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.8px;
  min-width: 560px;
}
.compare th, .compare td {
  padding: 13px 18px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}
.compare thead th {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-3);
  background: var(--surface-2);
}
.compare tbody th {
  font-weight: 500;
  color: var(--text);
}
.compare td { color: var(--text-2); }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; }
.compare tbody tr:hover { background: var(--surface-2); }
.compare .y { color: var(--accent); font-weight: 600; }
.compare .n { color: var(--text-3); }

/* ---------- FAQ groups ---------- */
.faq-group {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 42px 0 14px;
}
.faq-group:first-of-type { margin-top: 0; }
.qa-body a { color: var(--accent); font-weight: 600; }

/* ---------- Contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: clamp(26px, 4vw, 48px);
  align-items: start;
}
.contact-form-wrap {
  padding: 30px 30px 32px;
  border-radius: var(--r-xl);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
}
.contact-form-wrap h2 { font-size: 21px; letter-spacing: -0.028em; margin-bottom: 20px; }
.stack { display: grid; gap: 16px; }
.field-group { display: grid; gap: 7px; }
.field-group label { font-size: 14px; font-weight: 600; color: var(--text-2); }
.field-group input, .field-group select, .field-group textarea {
  width: 100%;
  padding: 11px 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-strong);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 15px;
  transition: border-color .18s, box-shadow .18s;
}
.field-group textarea { resize: vertical; min-height: 120px; line-height: 1.6; }
.field-group input:focus, .field-group select:focus, .field-group textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.field-group select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 19px) 50%, calc(100% - 14px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 38px;
}
#cSubmit { position: relative; justify-self: start; }
#cSubmit.is-busy .btn-label { opacity: 0; }
#cSubmit.is-busy .spinner { opacity: 1; }
#cSubmit .btn-label { transition: opacity .18s; }

.form-note { font-size: 14px; line-height: 1.55; color: var(--text-3); }
.form-note.is-error { color: #c22f2e; }
:root[data-theme="dark"] .form-note.is-error { color: #ff8a87; }
.form-note.is-ok { color: var(--text-2); }

.contact-side { display: grid; gap: 14px; }
.contact-card {
  padding: 20px 22px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.contact-card h3 { font-size: 15.5px; letter-spacing: -0.022em; margin-bottom: 7px; }
.contact-card p { font-size: 14.2px; color: var(--text-2); line-height: 1.58; margin-bottom: 9px; }
.contact-card a { font-size: 14.2px; font-weight: 600; color: var(--accent); word-break: break-word; }
.contact-card a:hover { text-decoration: underline; text-underline-offset: 3px; }
.contact-meta { margin: 8px 0 0 !important; font-size: 12.5px !important; color: var(--text-3) !important; }

/* ---------- Quick links ---------- */
.quick-links { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.quick-links a {
  display: grid;
  gap: 4px;
  padding: 17px 20px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--line);
  transition: border-color .2s, transform .2s var(--ease), box-shadow .2s;
}
.quick-links a:hover {
  border-color: var(--accent-line);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.quick-links strong { font-size: 15px; letter-spacing: -0.02em; }
.quick-links span { font-size: 13.5px; color: var(--text-3); }

/* ---------- Blog ---------- */
.post-head { padding: clamp(40px, 6vw, 68px) 0 clamp(24px, 3vw, 34px); }
.post-head h1 {
  font-size: clamp(30px, 5vw, 48px);
  font-weight: 800;
  letter-spacing: -0.042em;
  text-wrap: balance;
}
.post-head .lede {
  margin-top: 18px;
  max-width: 62ch;
  font-size: clamp(16.5px, 2vw, 19px);
  color: var(--text-2);
  line-height: 1.6;
  text-wrap: pretty;
}
.post .prose { padding-bottom: 10px; }

.post-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
  align-items: center;
  margin: 34px 0 10px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.post-nav a { font-size: 14.5px; font-weight: 600; color: var(--text-2); transition: color .18s; }
.post-nav a:hover { color: var(--accent); }
.post-nav a span { display: block; font-size: 12px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 3px; }
.post-nav a strong { font-size: 15px; letter-spacing: -0.02em; }

/* ---------- 404 ---------- */
.error-page .kicker { font-size: 15px; letter-spacing: .14em; }

/* ---------- Interior responsive ---------- */
@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; }
  .feature-row { grid-template-columns: 1fr; gap: 26px; }
  .feature-row.is-flipped .feature-copy { order: 0; }
  .feature-visual { min-height: 0; }
}

@media (max-width: 680px) {
  .uc-grid { grid-template-columns: 1fr; }
  .quick-links { grid-template-columns: 1fr; }
  .flow-step { grid-template-columns: 1fr; gap: 12px; }
  .flow-step:not(:last-child)::before { display: none; }
  .flow-num { width: 38px; height: 38px; font-size: 14px; }
  .contact-form-wrap { padding: 24px 22px 26px; }
}

/* ============================================================
   Mobile refinements
   Verified against a real 360px and 390px viewport.
   ============================================================ */

@media (max-width: 680px) {

  /* --- iOS zooms the page when a focused input is under 16px. --- */
  .field input,
  .field-group input,
  .field-group select,
  .field-group textarea {
    font-size: 16px;
  }


  /* --- Result tabs: same problem, same fix. A segmented control
         reads better than underlines at this width. --- */
  .tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    padding: 12px 12px 0;
    overflow: visible;
  }
  .tab {
    padding: 11px 8px;
    border-radius: var(--r-md);
    background: var(--surface-2);
    text-align: center;
  }
  .tab::after { display: none; }
  .tab.is-active {
    background: var(--accent);
    color: var(--accent-ink);
  }
  .panels { padding-top: 18px; }

  /* --- Tap targets. Touch wants ~44px; several of these were 23-32. --- */
  .chip {
    height: 40px;
    padding: 0 16px;
    font-size: 14px;
  }
  .pill { height: 38px; padding: 0 16px; }
  .toggle-opt { height: 42px; }
  .nav-actions .icon-btn { width: 42px; height: 42px; }
  .paste-btn { height: 40px; padding: 0 14px; }

  /* Footer and inline links: grow the hit area without moving the text. */
  .legal-nav a,
  .post-nav a,
  .section-more a,
  .panel-more a { padding-block: 8px; }

  /* --- The keyboard hint is meaningless without a keyboard. --- */
  .kbd-hint { display: none; }

  /* --- Samples read better as a tidy column than a ragged centre. --- */
  .samples { gap: 7px; }

  /* --- Mobile menu --- */
  .mobile-menu a { padding: 15px 4px; font-size: 15.5px; }
  .mobile-menu .btn { margin-top: 14px; height: 48px; font-size: 15.5px; }

  /* --- Tighten the hero so the input is reachable sooner. --- */
  .hero { padding-top: 34px; }
  .lede { font-size: 16.5px; }
  .tool { margin-top: 26px; }

  /* --- Result header actions stay side by side, not stacked. --- */
  .result-head { flex-direction: column; align-items: stretch; }
  .result-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .result-actions .btn { height: 42px; }
}

/* Very small phones (iPhone SE and similar) */
@media (max-width: 400px) {
  .hero h1 { font-size: 30px; }
  .hero-tagline { font-size: 22px; }
  .chip { font-size: 13.5px; padding: 0 13px; }
  .tab { font-size: 13px; }
}

/* ============================================================
   Editorial section — the "what is it" spread.
   Magazine composition: asymmetric grid, hairline rules, a real
   figure, and one pull quote. No cards, no boxes, no borders
   beyond 1px hairlines.
   ============================================================ */

.editorial {
  padding-block: clamp(72px, 10vw, 128px);
}

/* ---------- Opening spread ---------- */
.ed-open {
  display: grid;
  grid-template-columns: 1fr 0.92fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}

.ed-lead .kicker { margin-bottom: 18px; }

.ed-lead h2 {
  font-size: clamp(30px, 4.2vw, 48px);
  letter-spacing: -0.038em;
  line-height: 1.06;
  margin-bottom: 26px;
  text-wrap: balance;
}
/* The serif italic picks up the hero's accent treatment. */
.ed-lead h2 em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  background: linear-gradient(120deg, var(--accent-2), var(--accent) 70%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ed-lead p {
  color: var(--text-2);
  font-size: 16.8px;
  line-height: 1.72;
  text-wrap: pretty;
}
.ed-lead p + p { margin-top: 18px; }

/* Drop cap — the single most "editorial" move available, used once.
   font-size x line-height is tuned to exactly two lines of body text
   (16.8px x 1.72 = 28.9px per line), so the third line starts flush
   rather than half-indented against the float. */
.ed-drop::first-letter {
  float: left;
  font-family: var(--serif);
  font-size: 4.3em;
  line-height: 0.8;
  padding-right: 0.08em;
  color: var(--accent);
}

/* ---------- The figure ---------- */
.ed-figure {
  margin: 0;
  padding-top: 8px;
  /* A single hairline instead of a card. */
  border-top: 1px solid var(--text);
}

.ed-figure-label {
  margin: 14px 0 26px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
}

.ed-bar + .ed-bar { margin-top: 26px; }

.ed-bar-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
}

.ed-figure-num {
  font-family: var(--serif);
  font-size: clamp(38px, 5vw, 54px);
  line-height: .9;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
  color: var(--text-3);
  transition: color .6s var(--ease);
}
.ed-bar.is-core .ed-figure-num { color: var(--accent); }

.ed-bar-key {
  font-size: 14.5px;
  color: var(--text-2);
  letter-spacing: -0.01em;
}

.ed-track {
  height: 6px;
  border-radius: var(--r-full);
  background: var(--line);
  overflow: hidden;
}
.ed-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--line-strong);
  /* Bars draw themselves in as the section arrives. */
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 1.1s var(--ease) .15s;
}
.ed-bar.is-core .ed-track span {
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
}
.reveal.is-in .ed-track span,
.ed-figure.is-in .ed-track span { transform: scaleX(1); }

/* The ratio stat — one closing number, set like a magazine sidebar. */
.ed-ratio {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.ed-ratio-num {
  flex: none;
  font-family: var(--serif);
  font-size: clamp(44px, 6vw, 64px);
  line-height: .85;
  letter-spacing: -0.02em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.ed-ratio-pct {
  font-size: .5em;
  color: var(--accent);
  margin-left: 2px;
}
.ed-ratio-key {
  font-size: 14.6px;
  line-height: 1.62;
  color: var(--text-2);
  text-wrap: pretty;
}

.ed-figure figcaption {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 14.2px;
  line-height: 1.66;
  color: var(--text-3);
  text-wrap: pretty;
}

/* ---------- Pull quote ---------- */
.ed-quote {
  margin: clamp(56px, 8vw, 96px) 0;
  padding: 0;
  border: 0;
  text-align: center;
}
.ed-quote p {
  margin: 0 auto;
  max-width: 19ch;
  font-family: var(--serif);
  font-size: clamp(30px, 5.4vw, 58px);
  font-style: italic;
  line-height: 1.12;
  letter-spacing: -0.022em;
  color: var(--text);
  text-wrap: balance;
}

/* ---------- The four things ---------- */
.ed-block-head {
  max-width: 62ch;
  margin-bottom: clamp(34px, 4vw, 52px);
}
.ed-block-head h3 {
  font-size: clamp(23px, 3vw, 32px);
  letter-spacing: -0.032em;
  margin-bottom: 14px;
  text-wrap: balance;
}
.ed-block-head p {
  color: var(--text-2);
  font-size: 16.3px;
  line-height: 1.7;
  text-wrap: pretty;
}

.ed-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 clamp(36px, 5vw, 72px);
  counter-reset: ed;
}
.ed-list li {
  position: relative;
  padding: 30px 0 32px;
  border-top: 1px solid var(--line);
}
/* Hairline runs the full width of the column, nothing boxed. */
.ed-list li:nth-child(-n + 2) { border-top-color: var(--text); }

.ed-num {
  display: block;
  font-family: var(--serif);
  font-size: 23px;
  letter-spacing: .07em;
  color: var(--text-3);
  margin-bottom: 14px;
  font-variant-numeric: tabular-nums;
}
.ed-list h4 {
  font-size: 18.5px;
  letter-spacing: -0.024em;
  line-height: 1.25;
  margin-bottom: 10px;
  text-wrap: balance;
}
.ed-list p {
  color: var(--text-2);
  font-size: 15.4px;
  line-height: 1.68;
  text-wrap: pretty;
}
.ed-list a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.ed-list a:hover { text-decoration-thickness: 2px; }

/* The differentiator gets weight, not a box. */
.ed-list li.is-marked .ed-num { color: var(--accent); }
.ed-list li.is-marked h4 { color: var(--text); }
.ed-list li.is-marked::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 52px;
  height: 1px;
  background: var(--accent);
}

/* ---------- Coda ---------- */
.ed-coda {
  max-width: 64ch;
  margin-top: clamp(50px, 7vw, 84px);
  padding-left: clamp(20px, 3vw, 34px);
  border-left: 1px solid var(--accent-line);
}
.ed-coda h3 {
  font-size: 19px;
  letter-spacing: -0.026em;
  margin-bottom: 12px;
}
.ed-coda p {
  color: var(--text-2);
  font-size: 16px;
  line-height: 1.72;
  text-wrap: pretty;
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .ed-open { grid-template-columns: 1fr; gap: 46px; }
  .ed-figure { max-width: 560px; }
}

@media (max-width: 760px) {
  .ed-list { grid-template-columns: 1fr; gap: 0; }
  .ed-list li:nth-child(-n + 2) { border-top-color: var(--line); }
  .ed-list li:first-child { border-top-color: var(--text); }
}

@media (max-width: 680px) {
  .editorial { padding-block: 64px; }
  .ed-lead h2 { font-size: 28px; }
  .ed-drop::first-letter { font-size: 3.4em; line-height: 1.01; }
  .ed-quote { margin-block: 52px; }
  .ed-quote p { font-size: 27px; max-width: 16ch; }
  .ed-figure-num { font-size: 34px; }
  .ed-list li { padding: 26px 0 28px; }
  .ed-coda { padding-left: 18px; }
  .ed-ratio { gap: 14px; }
  .ed-ratio-num { font-size: 40px; }
}

/* ============================================================
   Use-case index — an editorial contents page, not a tabbed card.
   All four entries are visible at once: better to scan, and
   crawlable, which tabbed panels were not.
   ============================================================ */

.ucx {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: clamp(40px, 6vw, 92px);
  align-items: start;
}

/* ---------- Left column ---------- */
.ucx-aside {
  position: sticky;
  top: 108px;
}
.ucx-aside .kicker { margin-bottom: 18px; }
.ucx-aside h2 {
  font-size: clamp(28px, 3.7vw, 42px);
  letter-spacing: -0.038em;
  line-height: 1.07;
  margin-bottom: 22px;
  text-wrap: balance;
}
.ucx-aside h2 em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  background: linear-gradient(120deg, var(--accent-2), var(--accent) 70%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ucx-intro {
  color: var(--text-2);
  font-size: 16.3px;
  line-height: 1.72;
  max-width: 44ch;
  text-wrap: pretty;
}
.ucx-all {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 26px;
  font-size: 15px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: -0.01em;
}
.ucx-all svg { transition: transform .22s var(--ease); }
.ucx-all:hover svg { transform: translateX(4px); }

/* ---------- The index ---------- */
.ucx-index {
  display: grid;
  /* A single hairline closes the list; each row draws its own top rule. */
  border-bottom: 1px solid var(--line);
}

.ucx-entry { border-top: 1px solid var(--line); }
.ucx-entry:first-child { border-top-color: var(--text); }

.ucx-entry a {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: clamp(18px, 2.4vw, 32px);
  padding: clamp(26px, 3vw, 34px) 0;
  transition: padding-left .34s var(--ease);
}

/* The accent rule draws in from the left on hover — the only motion here. */
.ucx-entry a::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .42s var(--ease);
}
.ucx-entry a:hover::before,
.ucx-entry a:focus-visible::before { transform: scaleX(1); }
.ucx-entry a:hover { padding-left: 14px; }

.ucx-num {
  font-family: var(--serif);
  font-size: 23px;
  letter-spacing: .07em;
  line-height: 1.5;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  transition: color .28s var(--ease);
}
.ucx-entry a:hover .ucx-num { color: var(--accent); }

.ucx-body { display: block; min-width: 0; }

.ucx-role {
  display: block;
  font-size: clamp(21px, 2.5vw, 26px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.2;
  margin-bottom: 8px;
}

.ucx-line {
  display: block;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-2);
  max-width: 46ch;
  text-wrap: pretty;
}

/* The distinguishing detail — what each role actually reaches for.
   Separated by space and colour rather than another rule; the section
   already carries enough horizontal lines. */
.ucx-detail {
  display: block;
  margin-top: 15px;
  font-size: 14.6px;
  line-height: 1.62;
  color: var(--text-3);
  max-width: 50ch;
  text-wrap: pretty;
}
.ucx-tag {
  display: inline-block;
  margin-right: 7px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
}

.ucx-arrow {
  align-self: center;
  flex: none;
  color: var(--text-3);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity .28s var(--ease), transform .28s var(--ease), color .28s;
}
.ucx-entry a:hover .ucx-arrow,
.ucx-entry a:focus-visible .ucx-arrow {
  opacity: 1;
  transform: none;
  color: var(--accent);
}

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .ucx { grid-template-columns: 1fr; gap: 44px; }
  .ucx-aside { position: static; }
  .ucx-intro { max-width: 60ch; }
}

@media (max-width: 680px) {
  .ucx-entry a {
    grid-template-columns: auto 1fr;
    gap: 14px;
    padding: 24px 0;
  }
  /* The arrow is a hover affordance; there's no hover on touch. */
  .ucx-arrow { display: none; }
  .ucx-entry a:hover { padding-left: 0; }
  .ucx-num { font-size: 19px; line-height: 1.35; }
  .ucx-role { font-size: 20px; }
  .ucx-line { font-size: 15.4px; }
  .ucx-detail { font-size: 14px; margin-top: 12px; padding-top: 11px; }
}

/* ============================================================
   Hero — asymmetric editorial composition.
   Replaces the centred stack, so the hero matches the sections
   below it instead of reading as a different template.
   ============================================================ */

.hero-grid {
  display: grid;
  grid-template-columns: 1.06fr 0.94fr;
  gap: clamp(40px, 5.5vw, 78px);
  align-items: center;
}

.hero-copy { min-width: 0; }

/* Left-aligned, and smaller than the old full-width centred version —
   it now lives in a ~630px column, so 64px overflowed to three lines. */
.hero h1 {
  text-align: left;
  text-wrap: balance;
  font-size: clamp(34px, 4.4vw, 52px);
}
.hero-tagline {
  text-align: left;
  margin-top: 4px;
}
.hero .lede {
  margin: 22px 0 0;
  max-width: 48ch;
  text-align: left;
  text-wrap: balance;
}

.hero .tool { margin: 30px 0 0; max-width: none; }

/* The form stacks in the narrower column rather than crowding. */
.hero .tool-form { flex-wrap: wrap; }
.hero .field { min-width: 260px; }

.hero .samples {
  justify-content: flex-start;
  margin-top: 16px;
}
.hero .hint { text-align: left; margin-top: 16px; font-size: 12.6px; }

/* ---------- The "what comes back" sheet ---------- */
.hp { margin: 0; }

.hp-cap {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--text);
}

/* One soft shadow, because this element is meant to read as a surface
   floating over the page. Nothing else in the hero carries one. */
.hp-sheet {
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 24px 56px -28px rgba(16, 18, 28, .28), 0 2px 8px rgba(16, 18, 28, .04);
  overflow: hidden;
}
:root[data-theme="dark"] .hp-sheet {
  box-shadow: 0 24px 60px -26px rgba(0, 0, 0, .8), 0 2px 8px rgba(0, 0, 0, .4);
}

.hp-tabs {
  display: flex;
  gap: 3px;
  padding: 12px 14px 0;
  border-bottom: 1px solid var(--line);
}
.hp-tabs button {
  padding: 8px 12px 11px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12.8px;
  font-weight: 600;
  color: var(--text-3);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.hp-tabs button:hover { color: var(--text-2); }
.hp-tabs button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: 6px;
}
.hp-tabs .is-on {
  color: var(--text);
  border-bottom-color: var(--accent);
}

/* A floor so switching tabs does not bounce the sheet height. */
.hp-body { min-height: 196px; }
.hp-panel { animation: hpIn .26s var(--ease) both; }
.hp-panel:focus-visible { outline: none; }
@keyframes hpIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

/* Takeaways */
.hp-points { display: grid; gap: 10px; }
.hp-points li {
  position: relative;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-2);
  text-wrap: pretty;
}
.hp-points li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* Notes */
.hp-notes h3 {
  font-size: 13.4px;
  letter-spacing: -0.015em;
  margin-bottom: 5px;
}
.hp-notes h3 + p { margin-bottom: 15px; }
.hp-notes p {
  font-size: 13.8px;
  line-height: 1.58;
  color: var(--text-2);
  text-wrap: pretty;
}
.hp-notes p:last-child { margin-bottom: 0; }

.hp-body { padding: 20px 20px 6px; }

.hp-tldr {
  font-size: 15.4px;
  line-height: 1.62;
  color: var(--text);
  letter-spacing: -0.012em;
  padding-bottom: 18px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}

.hp-chapters { display: grid; }
.hp-ch {
  display: flex;
  align-items: baseline;
  gap: 13px;
  padding: 10px 0;
  font-size: 14.2px;
  color: var(--text-2);
}
/* Fixed width so a 5-character timestamp doesn't push its chapter title
   out of line with the 4-character ones above it. */
.hp-ts {
  flex: none;
  min-width: 52px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 12px;
  color: var(--accent);
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--accent-soft);
}

.hp-foot {
  padding: 14px 20px;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
}
.hp-badge {
  font-size: 12.6px;
  font-weight: 600;
  color: var(--text-3);
}

/* ---------- Product facts ---------- */
/* Replaces the old usage-metric strip. These four are all verifiable
   elsewhere on the site; invented totals and a star rating were not. */
.hero-facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px clamp(20px, 3vw, 44px);
  margin-top: clamp(38px, 4.5vw, 58px);
  padding-top: 30px;
  border-top: 1px solid var(--line);
}
.hero-facts li {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.hf-num {
  flex: none;
  font-family: var(--serif);
  font-size: clamp(30px, 3.4vw, 40px);
  line-height: .9;
  letter-spacing: -0.02em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.hf-key {
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-3);
  text-wrap: pretty;
}

/* ---------- Responsive ---------- */
@media (max-width: 1040px) {
  .hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .hero .lede { max-width: 60ch; }
  .hp { max-width: 520px; }
  .hero-facts { grid-template-columns: repeat(2, 1fr); gap: 24px 36px; }
}

@media (max-width: 680px) {
  .hero-grid { gap: 36px; }
  /* wrap + column sizes the flex line to the widest item's max-content,
     so the field ignored its container and overflowed. */
  .hero .tool-form { flex-direction: column; flex-wrap: nowrap; }
  .hero .field { min-width: 0; }
  .hero-facts {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px 20px;
    margin-top: 44px;
    padding-top: 26px;
  }
  .hf-num { font-size: 28px; }
  .hf-key { font-size: 13.2px; }
  .hp-cap { margin-bottom: 14px; }
  .hp-body { padding: 18px 16px 4px; }
  .hp-tabs { padding: 10px 10px 0; }
  .hp-tabs span { padding: 7px 8px 10px; font-size: 12px; }
  .hp-foot { padding: 12px 16px; }
}

@media (max-width: 380px) {
  .hero-facts { grid-template-columns: 1fr; }
}

/* ============================================================
   Features — an editorial ledger rather than a card grid.
   The section's claim is a comparison, so it's set as one:
   key on the left, the common failure mode, then ours.
   ============================================================ */

.fx-head {
  max-width: 60ch;
  margin-bottom: clamp(38px, 5vw, 60px);
}
.fx-head .kicker { margin-bottom: 16px; }
.fx-head h2 {
  font-size: clamp(28px, 3.8vw, 44px);
  letter-spacing: -0.038em;
  line-height: 1.07;
  margin-bottom: 18px;
  text-wrap: balance;
}
/* The italic sits on "this" — the whole section is a contrast. */
.fx-head h2 em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  background: linear-gradient(120deg, var(--accent-2), var(--accent) 70%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.fx-lede {
  color: var(--text-2);
  font-size: 16.6px;
  line-height: 1.7;
  text-wrap: pretty;
}

/* ---------- The ledger ---------- */
.fx-ledger { border-bottom: 1px solid var(--line); }

.fx-labels,
.fx-row {
  display: grid;
  grid-template-columns: 168px 1fr 1.12fr;
  gap: clamp(20px, 3vw, 48px);
}

.fx-labels {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--text);
}
.fx-lab {
  font-size: 11.8px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--text-3);
}
.fx-lab.is-ours {
  color: var(--accent);
  text-transform: none;
  font-size: 13px;
  letter-spacing: -0.01em;
}

.fx-row {
  position: relative;
  align-items: start;
  padding: clamp(24px, 2.8vw, 32px) 0;
  border-top: 1px solid var(--line);
}
.fx-row:first-of-type { border-top: 0; }

/* A hairline that fills on hover — the same gesture as the use-case index,
   but here it marks the row you're reading across. */
.fx-row::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--ease);
}
.fx-row:hover::after { transform: scaleX(1); }

.fx-row h3 {
  font-size: 17.5px;
  letter-spacing: -0.024em;
  line-height: 1.3;
  padding-top: 1px;
}

.fx-them,
.fx-us {
  font-size: 15.3px;
  line-height: 1.66;
  text-wrap: pretty;
}
/* The contrast is carried by weight and colour, not by ticks and crosses. */
.fx-them { color: var(--text-3); }
.fx-us { color: var(--text); }


/* Row labels, shown only once the columns stack. */
.fx-mini { display: none; }

.fx-ledger + .section-more { margin-top: 36px; text-align: left; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .fx-labels { display: none; }
  .fx-row {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 26px 0;
  }
  .fx-row h3 { font-size: 19px; margin-bottom: 2px; }

  /* With the header row gone, each cell names itself. */
  .fx-mini {
    display: block;
    margin-bottom: 5px;
    font-size: 11.2px;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--text-3);
  }
  .fx-us .fx-mini { color: var(--accent); }
}

@media (max-width: 680px) {
  .fx-head { margin-bottom: 32px; }
  .fx-row { padding: 22px 0; }
  .fx-them, .fx-us { font-size: 14.8px; }
  .fx-ledger + .section-more { margin-top: 28px; }
}

/* ============================================================
   Pricing — a rate card, not three boxes.
   Columns divided by hairlines; the recommended plan is marked
   by an accent rule across its top rather than a badge sticker.
   Shared by the homepage section and /pricing.
   ============================================================ */

.rate-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: clamp(36px, 4.5vw, 54px);
}
.rate-head-copy { max-width: 46ch; }
.rate-head .kicker { margin-bottom: 15px; }
.rate-head h2 {
  font-size: clamp(28px, 3.8vw, 44px);
  letter-spacing: -0.038em;
  line-height: 1.07;
  text-wrap: balance;
}
.rate-head h2 em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  background: linear-gradient(120deg, var(--accent-2), var(--accent) 70%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* The toggle sits with the heading instead of centred under it. */
.rate-head .toggle { margin: 0; flex: none; }

/* ---------- The columns ---------- */
.rates {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.rate {
  display: flex;
  flex-direction: column;
  padding: 22px clamp(18px, 2.4vw, 34px) 0 0;
  border-top: 1px solid var(--line-strong);
}
.rate + .rate {
  padding-left: clamp(18px, 2.4vw, 34px);
  border-left: 1px solid var(--line);
}
/* The only mark the recommended plan gets. No badge, no box. */
.rate.is-featured { border-top: 2px solid var(--accent); }

.rate-tag {
  height: 17px;
  line-height: 17px;
  margin-bottom: 14px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--accent);
}

.rate h3 {
  font-size: 21px;
  letter-spacing: -0.028em;
  margin-bottom: 7px;
}
.rate-desc {
  font-size: 14.6px;
  line-height: 1.5;
  color: var(--text-3);
  min-height: 44px;
  text-wrap: pretty;
}

/* Serif figures, matching every other number on the site. */
.rate-price {
  display: flex;
  align-items: baseline;
  gap: 3px;
  margin: 20px 0 22px;
}
.rate-price .cur {
  font-family: var(--serif);
  font-size: 26px;
  color: var(--text-2);
  line-height: 1;
}
.rate-price .amt {
  font-family: var(--serif);
  font-size: clamp(44px, 5vw, 58px);
  line-height: .86;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  transition: opacity .18s;
}
.rate-price .per {
  font-size: 13.8px;
  color: var(--text-3);
  margin-left: 5px;
}
.rate.is-featured .rate-price .amt { color: var(--accent); }

.rate .btn { margin-bottom: 26px; }

/* Included items as hairline rows — no repeated tick icons.
   Top-aligned across columns: bottom-aligning left a ragged top edge
   on the plan with fewer lines. */
.rate-list { margin-top: 0; }
.rate-list li {
  padding: 11px 0;
  border-top: 1px solid var(--line);
  font-size: 14.4px;
  line-height: 1.5;
  color: var(--text-2);
  text-wrap: pretty;
}

.rate-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin-top: 34px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.rate-foot .section-more { margin: 0; text-align: left; }
.rate-foot .fineprint { margin: 0; text-align: right; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .rates { grid-template-columns: 1fr; }
  .rate {
    padding: 22px 0 28px;
  }
  .rate + .rate {
    padding-left: 0;
    border-left: 0;
  }
  .rate-desc { min-height: 0; }
  .rate-tag:empty { display: none; }
  .rate .btn { margin-bottom: 22px; }
  .rate-foot { margin-top: 10px; }
  .rate-foot .fineprint { text-align: left; }
}

@media (max-width: 680px) {
  .rate-head { align-items: flex-start; gap: 20px; }
  .rate-head .toggle { width: 100%; }
  .rate-head .toggle-opt { flex: 1; justify-content: center; }
  .rate h3 { font-size: 20px; }
  .rate-price .amt { font-size: 42px; }
}

/* ============================================================
   Footer — a colophon rather than a link dump.
   The brand block carries a serif sign-off and a way back into
   the tool, so the left half stops being dead space.
   ============================================================ */

.footer {
  border-top: 1px solid var(--line);
  background: var(--bg-alt);
  padding: clamp(52px, 7vw, 84px) 0 28px;
}

.foot-top {
  display: grid;
  grid-template-columns: 0.92fr 1.35fr;
  gap: clamp(36px, 6vw, 88px);
  padding-bottom: clamp(38px, 5vw, 56px);
}

/* ---------- Brand block ---------- */
.foot-brand { max-width: 34ch; }
.foot-brand .brand-text { font-size: 17.5px; }

/* The one editorial flourish down here: the sign-off set in serif. */
.foot-line {
  margin: 22px 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(21px, 2.4vw, 27px);
  line-height: 1.24;
  letter-spacing: -0.012em;
  color: var(--text-2);
  text-wrap: pretty;
}

.foot-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 24px;
  padding-bottom: 5px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--accent);
  border-bottom: 1px solid var(--accent-line);
  transition: border-color .22s var(--ease);
}
.foot-cta svg { transition: transform .22s var(--ease); }
.foot-cta:hover { border-bottom-color: var(--accent); }
.foot-cta:hover svg { transform: translateX(4px); }

/* ---------- Link columns ---------- */
.foot-nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}
.foot-nav div {
  display: grid;
  gap: 0;
  align-content: start;
}
.foot-nav h4 {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-3);
  padding-bottom: 13px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.foot-nav a {
  position: relative;
  padding: 8px 0;
  font-size: 14.6px;
  color: var(--text-2);
  width: fit-content;
  transition: color .2s var(--ease), transform .2s var(--ease);
}
.foot-nav a:hover { color: var(--accent); transform: translateX(3px); }

/* ---------- Bottom bar ---------- */
.foot-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--text-3);
}

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .foot-top { grid-template-columns: 1fr; gap: 42px; }
  .foot-brand { max-width: 46ch; }
}

@media (max-width: 680px) {
  .footer { padding-top: 48px; }
  .foot-nav { grid-template-columns: repeat(2, 1fr); gap: 30px 20px; }
  .foot-line { font-size: 20px; }
  .foot-nav a { padding: 9px 0; }
  .foot-bottom { font-size: 12.6px; }
}

/* ============================================================
   Closing CTA — an editorial sign-off band, not a floating card.
   Shared by 12 pages plus the three blog posts, so the close
   reads the same everywhere.

   The statement is set in Instrument Serif italic, which is the
   site's voice type: hero tagline, footer sign-off, and this.
   Sans carries information; serif carries the argument.
   ============================================================ */

.cta {
  padding: 0 0 clamp(66px, 9vw, 104px);
}

.cta-box,
.post-cta {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  grid-template-areas:
    "title body"
    "title action";
  column-gap: clamp(32px, 5vw, 76px);
  row-gap: 20px;
  align-items: center;

  /* One strong hairline to open it, one quiet one to close. No box. */
  padding: clamp(42px, 5.5vw, 62px) 0;
  border-top: 1px solid var(--text);
  border-bottom: 1px solid var(--line);

  /* explicitly undo the old card treatment */
  text-align: left;
  background: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  margin: 0;
}

.cta-box h2,
.post-cta h2 {
  grid-area: title;
  align-self: center;
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(30px, 4.6vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.022em;
  color: var(--text);
  text-wrap: balance;
}

.cta-box p,
.post-cta p {
  grid-area: body;
  align-self: end;
  margin: 0;
  max-width: 42ch;
  color: var(--text-2);
  font-size: 16.2px;
  line-height: 1.65;
  text-wrap: pretty;
}

/* On blog posts the post-nav directly below brings its own top rule,
   so this one would double up. */
.post-cta { border-bottom: 0; }

.cta-box .btn,
.post-cta .btn {
  grid-area: action;
  align-self: start;
  justify-self: start;
  margin: 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .cta-box,
  .post-cta {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "body"
      "action";
    row-gap: 18px;
    padding: 38px 0;
  }
  .cta-box h2,
  .post-cta h2 { align-self: start; }
  .cta-box p,
  .post-cta p { align-self: start; max-width: 54ch; }
}

@media (max-width: 680px) {
  .cta { padding-bottom: 60px; }
  .cta-box,
  .post-cta { padding: 34px 0; row-gap: 16px; }
  .cta-box h2,
  .post-cta h2 { font-size: 29px; }
  .cta-box p,
  .post-cta p { font-size: 15.4px; }
  .cta-box .btn,
  .post-cta .btn { width: 100%; }
}

/* ============================================================
   FAQ accordion — hairline rows, no boxes.
   Restyled globally, so /faq, /how-it-works and /pricing get the
   same treatment. The homepage adds a two-column grid on top.
   ============================================================ */

.faq {
  display: block;
  border-bottom: 1px solid var(--line);
}

.qa {
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
}
.qa:first-child { border-top-color: var(--text); }
.qa[open] { border-color: var(--line); box-shadow: none; }
.qa[open]:first-child { border-top-color: var(--text); }

.qa summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 19px 0;
  font-size: 16.2px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.015em;
  cursor: pointer;
  list-style: none;
  transition: color .18s var(--ease);
}
.qa summary:hover { color: var(--accent); }
.qa[open] > summary { color: var(--accent); }

/* Plus that becomes a minus. Thinner than before, and it picks up
   the accent as the row opens. */
.qa-chev {
  position: relative;
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 4px;
}
.qa-chev::before,
.qa-chev::after {
  content: "";
  position: absolute;
  background: var(--text-3);
  border-radius: 2px;
  transition: transform .3s var(--ease), background-color .2s;
}
.qa-chev::before { left: 0; top: 7px; width: 15px; height: 1.5px; }
.qa-chev::after { left: 6.75px; top: 0; width: 1.5px; height: 15px; }
.qa[open] .qa-chev::after { transform: rotate(90deg); }
.qa[open] .qa-chev::before,
.qa[open] .qa-chev::after { background: var(--accent); }
.qa summary:hover .qa-chev::before,
.qa summary:hover .qa-chev::after { background: var(--accent); }

.qa-body {
  padding: 0 44px 22px 0;
  animation: qaIn .32s var(--ease) both;
}
@keyframes qaIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}
.qa-body p {
  color: var(--text-2);
  font-size: 15.6px;
  line-height: 1.68;
  max-width: 62ch;
  text-wrap: pretty;
}
.qa-body p + p { margin-top: 12px; }

/* ---------- Homepage: masthead + two columns ---------- */
.qa-head {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(30px, 5vw, 76px);
  align-items: end;
  margin-bottom: clamp(34px, 4.5vw, 52px);
}
.qa-head .kicker { margin-bottom: 15px; }
.qa-head h2 {
  font-size: clamp(28px, 3.8vw, 44px);
  letter-spacing: -0.038em;
  line-height: 1.07;
  text-wrap: balance;
}
.qa-head h2 em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  background: linear-gradient(120deg, var(--accent-2), var(--accent) 70%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.qa-head-aside p {
  color: var(--text-2);
  font-size: 16px;
  line-height: 1.68;
  max-width: 44ch;
  text-wrap: pretty;
}
.qa-all {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 18px;
  padding-bottom: 5px;
  font-size: 15px;
  font-weight: 600;
  color: var(--accent);
  border-bottom: 1px solid var(--accent-line);
  transition: border-color .22s var(--ease);
}
.qa-all svg { transition: transform .22s var(--ease); }
.qa-all:hover { border-bottom-color: var(--accent); }
.qa-all:hover svg { transform: translateX(4px); }

/* Two explicit columns rather than multicol, so opening a row only
   reflows its own column. */
.qa-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 clamp(36px, 5vw, 76px);
  align-items: start;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .qa-head { grid-template-columns: 1fr; gap: 24px; align-items: start; }
  .qa-head-aside p { max-width: 58ch; }
  .qa-grid { grid-template-columns: 1fr; }
  /* The second column's first row would otherwise start a new strong rule. */
  .qa-grid .faq + .faq { border-top: 0; }
  .qa-grid .faq + .faq .qa:first-child { border-top-color: var(--line); }
}

@media (max-width: 680px) {
  .qa summary { font-size: 15.6px; padding: 17px 0; gap: 16px; }
  .qa-body { padding-right: 28px; padding-bottom: 19px; }
  .qa-body p { font-size: 15px; }
}

/* ============================================================
   Blog index — a dated archive, not a stack of cards.
   Date ledger on the left, the piece on the right, hairline rows.
   Same vocabulary as the use-case index and features ledger, but
   led by the date rather than a numeral.
   ============================================================ */

.post-index {
  border-bottom: 1px solid var(--line);
}

.post-row { border-top: 1px solid var(--line); }
.post-row:first-child { border-top-color: var(--text); }

.post-row a {
  position: relative;
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: clamp(20px, 3vw, 44px);
  align-items: start;
  padding: clamp(28px, 3.4vw, 38px) 0;
  transition: padding-left .34s var(--ease);
}

/* The accent rule fills across the row on hover — the same gesture
   the use-case index uses, so the two read as one family. */
.post-row a::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .42s var(--ease);
}
.post-row a:hover::before,
.post-row a:focus-visible::before { transform: scaleX(1); }
.post-row a:hover { padding-left: 14px; }

/* ---------- Date ledger ---------- */
.post-when {
  display: block;
  padding-top: 4px;
}
.post-when time {
  display: block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  transition: color .28s var(--ease);
}
.post-row a:hover .post-when time { color: var(--accent); }
.post-read {
  display: block;
  margin-top: 5px;
  font-size: 12.5px;
  color: var(--text-3);
}

/* ---------- The piece ---------- */
.post-body { display: block; min-width: 0; }

.post-title {
  display: block;
  font-size: clamp(21px, 2.5vw, 27px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.2;
  margin-bottom: 11px;
  text-wrap: balance;
}

.post-excerpt {
  display: block;
  font-size: 15.8px;
  line-height: 1.66;
  color: var(--text-2);
  max-width: 62ch;
  text-wrap: pretty;
}

.post-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 14.6px;
  font-weight: 600;
  color: var(--accent);
}
.post-more span {
  display: inline-block;
  transition: transform .2s var(--ease);
}
.post-row a:hover .post-more span { transform: translateX(4px); }

/* ---------- Responsive ---------- */
@media (max-width: 760px) {
  .post-row a {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 26px 0;
  }
  .post-row a:hover { padding-left: 0; }
  /* The date reads as a strap line above the title once stacked. */
  .post-when {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding-top: 0;
  }
  .post-when time { font-size: 13px; }
  .post-read { margin-top: 0; }
  .post-read::before { content: "·"; margin-right: 10px; }
  .post-title { font-size: 20px; }
  .post-excerpt { font-size: 15.2px; }
}

/* Five top-level items need 819px of bar — down from 954px when Features,
   How it works and Use cases each had their own slot. Measured to fit from
   ~900px, so the collapse to the menu button happens below that. */
@media (max-width: 900px) {
  .nav-links { display: none; }
  .menu-btn { display: inline-grid; }
  .nav-inner { justify-content: space-between; }
}

/* ============================================================
   Nav disclosure menu — the Product group.
   Styled as a quiet surface, not a chrome dropdown: one hairline,
   one soft shadow, the same radius as the hero sheet.
   ============================================================ */

.nav-has-menu { position: relative; }

.nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 0;
  border-radius: var(--r-full);
  background: none;
  color: var(--text-2);
  font: inherit;
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: color .18s, background-color .18s;
}
.nav-trigger svg { transition: transform .24s var(--ease); opacity: .7; }
.nav-trigger:hover { color: var(--text); background: var(--surface-2); }
.nav-trigger.is-current { color: var(--text); background: var(--surface-2); }
.nav-has-menu.is-open .nav-trigger { color: var(--text); background: var(--surface-2); }
.nav-has-menu.is-open .nav-trigger svg { transform: rotate(180deg); }

.nav-panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  z-index: 120;
  width: 306px;
  padding: 8px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 20px 44px -22px rgba(16, 18, 28, .3), 0 2px 8px rgba(16, 18, 28, .05);
  opacity: 0;
  transform: translate(-50%, -6px);
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
:root[data-theme="dark"] .nav-panel {
  box-shadow: 0 20px 48px -20px rgba(0, 0, 0, .85), 0 2px 8px rgba(0, 0, 0, .5);
}
.nav-has-menu.is-open .nav-panel {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* A small bridge so the pointer can cross the gap without the menu closing. */
.nav-panel::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
}

.nav-panel a {
  display: block;
  padding: 11px 13px;
  border-radius: var(--r-md);
  transition: background-color .16s;
}
.nav-panel a:hover { background: var(--surface-2); }
.nav-panel a[aria-current="page"] { background: var(--accent-soft); }

.np-label {
  display: block;
  font-size: 14.6px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text);
  margin-bottom: 2px;
}
.nav-panel a:hover .np-label,
.nav-panel a[aria-current="page"] .np-label { color: var(--accent); }

.np-blurb {
  display: block;
  font-size: 12.8px;
  line-height: 1.45;
  color: var(--text-3);
}

/* ---------- Mobile menu group labels ---------- */
.mm-label {
  margin: 16px 0 2px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.mobile-menu a[aria-current="page"] { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .nav-panel { transition: none; }
}

/* Early-access notice under the summarizer — stated plainly, not hidden in a
   tooltip, but quiet enough not to fight the call to action. */
.tool-notice {
  margin-top: 16px;
  padding: 12px 15px;
  border-radius: var(--r-md);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  font-size: 13.4px;
  line-height: 1.55;
  color: var(--text-2);
  max-width: 52ch;
  text-wrap: pretty;
}
.tool-notice strong { color: var(--accent); font-weight: 700; }

@media (max-width: 680px) {
  .tool-notice { font-size: 12.8px; padding: 11px 13px; }
}

/* ---------- Photography ----------
   Rendered by site/image-tag.js from a <!--image:slot--> token. The file is
   pre-cropped to --ph-ratio at fetch time, and width/height are set on the
   <img>, so the box is reserved before the bytes arrive; --ph-bg is the photo's
   own dominant colour, which fills that box in the meantime instead of a flash
   of white. */
.ph {
  margin: 0 0 8px;
}

.ph img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--ph-ratio, 16 / 9);
  object-fit: cover;
  background: var(--ph-bg, var(--surface-2));
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
}

.ph-credit {
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-3);
}

.ph-credit a {
  color: var(--text-2);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 2px;
}
.ph-credit a:hover { color: var(--text); text-decoration-color: currentColor; }

/* Dark mode: photographs sit brighter than the page, so take the edge off
   rather than leaving them glowing against near-black. */
:root[data-theme="dark"] .ph img {
  filter: brightness(.9) saturate(.95);
  box-shadow: var(--shadow-lg);
}

/* In-article photos sit inside .prose, so they inherit its 68ch measure —
   deliberately narrower than the lead photo above the article, which keeps the
   lead reading as the lead. They need their own rhythm against the text: a
   clear gap above, a tighter one below so the credit stays attached. A figure
   landing directly before a heading would otherwise double up on space. */
.prose .ph {
  margin: 34px 0 10px;
}
.prose .ph + h2 { margin-top: 30px; }
.prose .ph + h3 { margin-top: 24px; }
.prose .ph img { border-radius: var(--r-md); }