/* Querymemo: quiet, typographic. One accent (ink blue) for actions and the product's own voice;
   amber only for "not yet" and "could be noise", red and green only for losses and gains.
   Newsreader for headlines, Inter Tight for small headings, Inter for reading, JetBrains Mono for
   terminal output and commands. */

@font-face {
  font-family: "Inter Tight";
  src: url("/fonts/inter-tight.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("/fonts/newsreader.woff2") format("woff2");
  font-weight: 400 560;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/jetbrains-mono.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}
/* Metric-matched fallbacks so the swap doesn't move the layout. */
@font-face {
  font-family: "Inter Tight Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 99%;
  ascent-override: 97%;
  descent-override: 24%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

:root {
  --ink: #121514;
  --ink-2: #3a3f3c;
  --muted: #5b615d;
  --line: #e2e4e1;
  --line-2: #cfd3cf;
  --paper: #ffffff;
  --band: #f5f6f4;
  --accent: #2343c4;
  --accent-ink: #19309a;
  --accent-wash: #eef1fc;
  --amber: #8a5300;
  --amber-wash: #fbf3e4;
  --term: #101312;
  --term-2: #1a1e1c;
  --term-text: #e6e9e6;
  --term-muted: #9aa29d;
  --term-accent: #9db0ff;
  --display: "Inter Tight", "Inter Tight Fallback", system-ui, sans-serif;
  --body: "Inter", "Inter Fallback", system-ui, sans-serif;
  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --loss: #c5362e;
  --gain: #0f8a5f;
  --navy: #0b1229;
  --radius: 10px;
  --wrap: 1180px;
  --gutter: clamp(20px, 4vw, 40px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: light;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 80px;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1rem/1.62 var(--body);
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection {
  background: var(--accent-wash);
  color: var(--accent-ink);
}
img,
svg {
  display: block;
  max-width: 100%;
}
a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:hover {
  color: var(--accent-ink);
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: 620;
  letter-spacing: -0.028em;
  line-height: 1.06;
  margin: 0;
  text-wrap: balance;
  color: var(--ink);
}
h1,
h2 {
  font-family: var(--serif);
  font-weight: 450;
  letter-spacing: -0.018em;
}
h1 {
  font-size: clamp(2.5rem, 1.6rem + 3.9vw, 4.6rem);
  letter-spacing: -0.026em;
  line-height: 1.02;
}
h2 {
  font-size: clamp(1.85rem, 1.3rem + 1.9vw, 2.8rem);
  line-height: 1.08;
}
h3 {
  font-size: 1.18rem;
  letter-spacing: -0.012em;
  line-height: 1.3;
  font-weight: 600;
}
p {
  margin: 0;
  text-wrap: pretty;
}
code,
kbd,
pre {
  font-family: var(--mono);
  font-size: 0.9em;
}
:not(pre) > code {
  background: var(--band);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 0.08em 0.36em;
  white-space: nowrap;
}
.tnum {
  font-variant-numeric: tabular-nums;
}
.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.skip {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 20;
  background: var(--ink);
  color: #fff;
  padding: 8px 14px;
  border-radius: 6px;
}
.skip:focus {
  left: 12px;
}
.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;
}

/* ---- header ---------------------------------------------------------------------------- */
.site-head {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgb(255 255 255 / 0.92);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-head .wrap {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 64px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  font: 640 1.12rem/1 var(--display);
  letter-spacing: -0.02em;
  min-height: 44px;
}
.brand:hover {
  color: var(--ink);
}
.brand svg {
  width: 26px;
  height: 26px;
}
.nav {
  display: flex;
  gap: 4px;
  margin-left: auto;
  align-items: center;
}
.nav a {
  color: var(--ink-2);
  text-decoration: none;
  font-size: 0.94rem;
  padding: 10px 12px;
  border-radius: 8px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.nav a:hover,
.nav a[aria-current="page"] {
  color: var(--ink);
  background: var(--band);
}
.nav .btn {
  margin-left: 8px;
}

/* ---- buttons --------------------------------------------------------------------------- */
.btn {
  --bg: var(--ink);
  --fg: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid var(--bg);
  background: var(--bg);
  color: var(--fg) !important;
  font: 560 0.95rem/1 var(--body);
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.35s var(--ease),
    background-color 0.2s,
    box-shadow 0.35s var(--ease);
  box-shadow: 0 1px 2px rgb(16 20 18 / 0.12);
}
.btn:hover {
  --bg: #000;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -6px rgb(16 20 18 / 0.35);
}
.btn:active {
  transform: translateY(0);
}
.btn.ghost {
  --bg: transparent;
  --fg: var(--ink);
  border-color: var(--line-2);
  box-shadow: none;
}
.btn.ghost:hover {
  --bg: var(--band);
}
.btn.accent {
  --bg: var(--accent);
}
.btn.accent:hover {
  --bg: var(--accent-ink);
}
.btn svg {
  width: 16px;
  height: 16px;
}
.btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

/* ---- hero ------------------------------------------------------------------------------ */
.hero {
  padding: clamp(48px, 7vw, 96px) 0 clamp(40px, 5vw, 64px);
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(32px, 4vw, 56px);
}
.hero h1 .quiet {
  color: var(--muted);
  display: block;
}
.lede {
  font-size: clamp(1.08rem, 1rem + 0.35vw, 1.24rem);
  color: var(--ink-2);
  max-width: 40rem;
  margin-top: 22px;
  line-height: 1.55;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
  align-items: center;
}
.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: 0.92rem;
}
.facts li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.facts svg {
  width: 16px;
  height: 16px;
  color: var(--accent);
  flex: none;
}

/* ---- terminal (the product's real output) ---------------------------------------------- */
.term {
  background: var(--term);
  color: var(--term-text);
  border-radius: 14px;
  box-shadow:
    0 1px 0 rgb(255 255 255 / 0.06) inset,
    0 30px 60px -30px rgb(16 20 18 / 0.45),
    0 12px 24px -16px rgb(16 20 18 / 0.3);
  overflow: hidden;
  font: 400 0.86rem/1.62 var(--mono);
}
.term-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--term-2);
  border-bottom: 1px solid rgb(255 255 255 / 0.06);
  color: var(--term-muted);
  font-size: 0.78rem;
}
.term-dots {
  display: flex;
  gap: 6px;
}
.term-dots i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #3a403d;
}
.term-title {
  flex: 1;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.term-body {
  padding: 20px clamp(16px, 2.4vw, 26px) 22px;
  overflow-x: auto;
}
.term-body p {
  margin: 0;
}
.term .prompt {
  color: var(--term-text);
}
.term .prompt::before {
  content: "> ";
  color: var(--term-accent);
}
.term .call {
  margin-top: 14px;
  color: var(--term-muted);
}
.term .call b {
  color: var(--term-accent);
  font-weight: 500;
}
.term .head {
  margin-top: 12px;
  color: var(--term-muted);
}
.term ol {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 14px;
}
.term li {
  display: grid;
  grid-template-columns: 2ch minmax(0, 1fr);
  gap: 0 1ch;
}
.term li > span:first-child {
  color: var(--term-muted);
}
.term .page {
  color: #fff;
}
.term .gain {
  color: var(--term-accent);
}
.term .dim {
  color: var(--term-muted);
}
.term .keep {
  color: #cfd5d1;
}
.term .cursor {
  display: inline-block;
  width: 0.6em;
  height: 1.1em;
  vertical-align: -0.2em;
  background: var(--term-accent);
  margin-top: 14px;
  animation: blink 1.1s steps(2, start) infinite;
}
@keyframes blink {
  to {
    visibility: hidden;
  }
}
.term-note {
  margin-top: 14px;
  color: var(--muted);
  font-size: 0.86rem;
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.term-note svg {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 3px;
}

/* ---- install block --------------------------------------------------------------------- */
.install {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
  overflow: hidden;
}
.install [role="tablist"] {
  display: flex;
  gap: 2px;
  padding: 6px;
  background: var(--band);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
}
.install [role="tab"] {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-2);
  font: 520 0.92rem/1 var(--body);
  padding: 0 14px;
  min-height: 40px;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
}
.install [role="tab"][aria-selected="true"] {
  background: var(--paper);
  color: var(--ink);
  box-shadow:
    0 1px 2px rgb(16 20 18 / 0.08),
    0 0 0 1px var(--line);
}
.install [role="tabpanel"] {
  padding: 16px;
}
.cmd {
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.cmd pre {
  flex: 1;
  margin: 0;
  background: var(--term);
  color: var(--term-text);
  border-radius: 8px;
  padding: 13px 14px;
  overflow-x: auto;
  font-size: 0.85rem;
  line-height: 1.5;
  white-space: pre;
}
.cmd pre::before {
  content: "$ ";
  color: var(--term-muted);
}
.copy {
  flex: none;
  appearance: none;
  border: 1px solid var(--line-2);
  background: var(--paper);
  color: var(--ink);
  border-radius: 8px;
  min-width: 88px;
  min-height: 44px;
  padding: 0 14px;
  font: 560 0.88rem/1 var(--body);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition:
    background-color 0.2s,
    border-color 0.2s;
}
.copy:hover {
  background: var(--band);
}
.copy[data-done] {
  border-color: var(--accent);
  color: var(--accent-ink);
  background: var(--accent-wash);
}
.copy svg {
  width: 15px;
  height: 15px;
}
.install-foot {
  margin-top: 12px;
  color: var(--muted);
  font-size: 0.88rem;
}

/* ---- sections -------------------------------------------------------------------------- */
.section {
  padding: clamp(56px, 8vw, 104px) 0;
}
.section + .section {
  border-top: 1px solid var(--line);
}
.band {
  background: var(--band);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px 64px;
}
.split > header p {
  color: var(--muted);
  margin-top: 14px;
  max-width: 30rem;
}
.rows {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.rows > li {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px 32px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.rows h3 {
  font-size: 1.06rem;
}
.rows p {
  color: var(--ink-2);
}
.rows .tool {
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--accent-ink);
}
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 560 0.74rem/1 var(--body);
  letter-spacing: 0.01em;
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--band);
  color: var(--ink-2);
  border: 1px solid var(--line);
  vertical-align: 0.15em;
}
.tag.amber {
  background: var(--amber-wash);
  color: var(--amber);
  border-color: #efdcb8;
}
.tag.accent {
  background: var(--accent-wash);
  color: var(--accent-ink);
  border-color: #d7def8;
}
.prose {
  max-width: 44rem;
}
.prose h2 {
  font-size: clamp(1.45rem, 1.2rem + 0.9vw, 1.9rem);
  margin: 2.6em 0 0.6em;
}
.prose h3 {
  margin: 1.9em 0 0.5em;
}
.prose p,
.prose ul,
.prose ol {
  margin: 0 0 1em;
  color: var(--ink-2);
}
.prose li + li {
  margin-top: 0.35em;
}
.prose blockquote {
  margin: 1.2em 0;
  padding: 2px 0 2px 18px;
  border-left: 1px solid var(--line-2);
  color: var(--ink-2);
}
.prose table,
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.94rem;
  margin: 1em 0 1.4em;
}
.prose th,
.prose td,
.table th,
.table td {
  text-align: left;
  vertical-align: top;
  padding: 11px 12px 11px 0;
  border-bottom: 1px solid var(--line);
}
.prose th,
.table th {
  font-weight: 600;
  color: var(--ink);
  font-size: 0.86rem;
}
.table-scroll {
  overflow-x: auto;
}
.answer {
  font-size: 1.08rem;
  color: var(--ink);
  max-width: 44rem;
}
.answer strong {
  font-weight: 620;
}

/* ---- pricing --------------------------------------------------------------------------- */
.plans {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--paper);
}
.plan {
  padding: 28px 26px 30px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.plan + .plan {
  border-top: 1px solid var(--line);
}
.plan h3 {
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  gap: 10px;
}
.price {
  font: 620 2.5rem/1 var(--display);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.price small {
  font: 400 0.95rem/1 var(--body);
  color: var(--muted);
  letter-spacing: 0;
}
.plan .under {
  color: var(--muted);
  font-size: 0.92rem;
}
.plan ul {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  display: grid;
  gap: 8px;
  font-size: 0.95rem;
  color: var(--ink-2);
}
.plan li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
}
.plan li svg {
  width: 16px;
  height: 16px;
  margin-top: 4px;
  color: var(--accent);
}
.plan li.no svg {
  color: var(--amber);
}
.plan .btn {
  margin-top: auto;
  align-self: flex-start;
}

/* ---- forms ----------------------------------------------------------------------------- */
.form {
  display: grid;
  gap: 12px;
  max-width: 34rem;
}
.form label {
  font-weight: 560;
  font-size: 0.92rem;
}
.field {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.field input[type="email"],
.field select {
  flex: 1 1 14rem;
  min-height: 46px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  padding: 0 14px;
  font: 400 1rem var(--body);
  color: var(--ink);
  background: var(--paper);
}
.field select {
  flex: 0 1 11rem;
}
.field input:focus-visible,
.field select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.hp {
  position: absolute;
  left: -9999px;
}
.note {
  font-size: 0.9rem;
  color: var(--muted);
}
.flash {
  border: 1px solid var(--line);
  background: var(--band);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 18px;
}
.flash.ok {
  background: var(--accent-wash);
  border-color: #d7def8;
  color: var(--accent-ink);
}
.flash.warn {
  background: var(--amber-wash);
  border-color: #efdcb8;
  color: var(--amber);
}

/* ---- dark close + footer --------------------------------------------------------------- */
.close {
  background: var(--term);
  color: var(--term-text);
  padding: clamp(56px, 8vw, 96px) 0;
}
.close h2 {
  color: #fff;
}
.close p {
  color: var(--term-muted);
  margin-top: 14px;
  max-width: 34rem;
}
.close .btn {
  --bg: #fff;
  --fg: var(--ink);
  border-color: #fff;
}
.close .btn:hover {
  --bg: #e9ece9;
}
.close .hero-actions {
  margin-top: 26px;
}
.site-foot {
  padding: 40px 0 56px;
  color: var(--muted);
  font-size: 0.9rem;
}
.site-foot .wrap {
  display: grid;
  gap: 22px;
}
.foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.foot-links a {
  color: var(--ink-2);
  text-decoration: none;
  display: inline-block;
  padding: 6px 0;
}
.foot-links a:hover {
  color: var(--ink);
  text-decoration: underline;
}
.byline strong {
  color: var(--ink);
  font-weight: 600;
}

/* ---- docs ------------------------------------------------------------------------------ */
.page-head {
  padding: clamp(40px, 6vw, 72px) 0 clamp(20px, 3vw, 32px);
}
.page-head h1 {
  font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.4rem);
}
.page-head .lede {
  margin-top: 16px;
}
.crumbs {
  font-size: 0.86rem;
  color: var(--muted);
  margin-bottom: 18px;
}
.crumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
}
.crumbs li + li::before {
  content: "/";
  margin-right: 6px;
  color: var(--line-2);
}
.crumbs a {
  color: var(--muted);
}
.docs {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px 56px;
  padding-bottom: 80px;
}
.toc {
  font-size: 0.92rem;
}
.toc .toc-title {
  font: 600 0.82rem/1 var(--body);
  letter-spacing: 0.02em;
  color: var(--muted);
  margin: 0 0 12px;
}
.toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.toc a {
  color: var(--ink-2);
  text-decoration: none;
  display: block;
  padding: 6px 0;
}
.toc a:hover {
  color: var(--accent);
}
.example {
  margin: 0.4em 0 1.6em;
  background: var(--term);
  color: var(--term-text);
  border-radius: 10px;
  padding: 16px 18px;
  font: 400 0.82rem/1.6 var(--mono);
  overflow-x: auto;
  white-space: pre-wrap;
}
.example .dim {
  color: var(--term-muted);
}

/* ---- mobile action bar (thumb zone) ---------------------------------------------------- */
.mbar {
  display: none;
}

@media (max-width: 720px) {
  .nav a:not(.btn) {
    display: none;
  }
  .site-head .wrap {
    gap: 12px;
  }
  .mbar {
    display: flex;
    position: sticky;
    bottom: 0;
    z-index: 9;
    gap: 10px;
    padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
    background: rgb(255 255 255 / 0.94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--line);
  }
  .mbar .btn {
    flex: 1;
  }
  .mnav {
    display: flex;
    gap: 2px;
    overflow-x: auto;
    padding: 0 var(--gutter) 10px;
    margin-top: -2px;
  }
  .mnav a {
    color: var(--ink-2);
    text-decoration: none;
    font-size: 0.9rem;
    padding: 10px 10px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
  }
  .cmd {
    flex-direction: column;
  }
  .copy {
    align-self: flex-start;
  }
}
@media (min-width: 721px) {
  .mnav {
    display: none;
  }
}
@media (min-width: 880px) {
  .split {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
  .split > header {
    position: sticky;
    top: 104px;
    align-self: start;
  }
  .rows > li {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
  .plans {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .plan + .plan {
    border-top: 0;
    border-left: 1px solid var(--line);
  }
  .docs {
    grid-template-columns: 220px minmax(0, 1fr);
  }
  .toc {
    position: sticky;
    top: 96px;
    align-self: start;
  }
  .site-foot .wrap {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }
}
@media (min-width: 1080px) {
  .hero-grid {
    grid-template-columns: minmax(0, 11fr) minmax(0, 13fr);
    align-items: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ---- home sections (v2) ---------------------------------------------------------------- */
.hero h1 {
  max-width: 17ch;
}
.hero-grid {
  margin-top: clamp(28px, 3.5vw, 44px);
}
.hero-copy .lede {
  margin-top: 0;
}
.section-head {
  max-width: 46rem;
  margin-bottom: clamp(28px, 4vw, 44px);
}
.section-head p {
  color: var(--ink-2);
  margin-top: 14px;
  font-size: 1.06rem;
}
.decisions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-top: 1px solid var(--line);
}
.decision {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px 48px;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.decision .tool {
  font: 500 0.8rem/1 var(--mono);
  color: var(--accent-ink);
  margin-bottom: 10px;
}
.decision h3 {
  font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.45rem);
  letter-spacing: -0.02em;
}
.decision p:not(.tool) {
  color: var(--ink-2);
  margin-top: 10px;
  max-width: 34rem;
}
.snippet {
  margin: 0;
  background: var(--term);
  color: var(--term-text);
  border-radius: 10px;
  padding: 16px 18px;
  font: 400 0.82rem/1.65 var(--mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  box-shadow: 0 14px 30px -22px rgb(16 20 18 / 0.5);
}
.snippet .dim {
  color: var(--term-muted);
}
.more {
  margin-top: 24px;
  color: var(--ink-2);
  max-width: 50rem;
}
.where {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
  overflow: hidden;
}
.where > div {
  padding: 24px 24px 26px;
}
.where > div + div {
  border-top: 1px solid var(--line);
}
.where h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.05rem;
  margin-bottom: 12px;
}
.where h3 svg {
  width: 18px;
  height: 18px;
  color: var(--accent);
}
.where ul {
  margin: 0;
  padding: 0 0 0 1.1em;
  color: var(--ink-2);
  display: grid;
  gap: 6px;
}
.where > div:last-child h3 svg {
  color: var(--muted);
}
.grid4 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-top: 1px solid var(--line);
}
.grid4 > div {
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}
.grid4 p {
  color: var(--ink-2);
  margin-top: 8px;
}
.cmd pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
@media (min-width: 880px) {
  .decision {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  }
  .where {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .where > div + div {
    border-top: 0;
    border-left: 1px solid var(--line);
  }
  .grid4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 48px;
  }
}
.hero-term {
  margin: 0;
}
@media (max-width: 720px) {
  .mnav {
    justify-content: space-between;
    padding: 0 calc(var(--gutter) - 8px) 8px;
  }
  .mnav a {
    padding: 10px 8px;
  }
  .term {
    font-size: 0.78rem;
  }
  .term-body {
    padding: 16px 14px 18px;
  }
  .snippet {
    font-size: 0.76rem;
    padding: 14px;
  }
}

/* ---- critique round 1 fixes (2026-10-28) ----------------------------------------------- */
html,
body {
  overflow-x: clip;
}
h1,
h2,
h3 {
  text-wrap: balance;
}
:not(pre) > code {
  padding: 0.04em 0.28em;
}
.prose :not(pre) > code,
.lede :not(pre) > code,
.note :not(pre) > code,
.more :not(pre) > code,
.flash :not(pre) > code {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* hero: headline, lede, actions and facts in one column; the real answer beside it, top-aligned */
.hero h1 {
  max-width: 20ch;
  font-size: clamp(2.15rem, 1.4rem + 2.4vw, 3.3rem);
  line-height: 1.04;
  letter-spacing: -0.034em;
}
.hero-grid {
  margin-top: 0;
}
.hero-copy .lede {
  margin-top: 22px;
}
@media (min-width: 1080px) {
  .hero-grid {
    grid-template-columns: minmax(0, 23fr) minmax(0, 21fr);
    align-items: start;
    gap: 56px;
  }
  .hero-term {
    margin-top: 8px;
  }
}
@media (max-width: 640px) {
  .hero h1 {
    font-size: 2.15rem;
    line-height: 1.08;
    letter-spacing: -0.03em;
  }
  .page-head h1 {
    line-height: 1.08;
  }
}

/* install: the copy button lives inside the dark command box at every width */
.cmd {
  position: relative;
  display: block;
  background: var(--term);
  border-radius: 10px;
}
.cmd pre {
  background: transparent;
  padding: 13px 96px 13px 14px;
  white-space: pre-wrap;
  overflow-wrap: normal;
  word-break: normal;
}
.copy {
  position: absolute;
  top: 7px;
  right: 7px;
  min-width: 76px;
  min-height: 34px;
  padding: 0 12px;
  background: var(--term-2);
  color: var(--term-text);
  border-color: rgb(255 255 255 / 0.16);
  font-size: 0.84rem;
}
.copy:hover {
  background: #272c2a;
}
.copy[data-done] {
  background: var(--term-2);
  color: #c4cfff;
  border-color: var(--term-accent);
}
.copy:focus-visible {
  outline: 2px solid var(--term-accent);
  outline-offset: 2px;
}
.prose .cmd {
  margin: 14px 0 22px;
}
.prose .example {
  margin: 14px 0 24px;
}
@media (max-width: 420px) {
  .install [role="tab"] {
    padding: 0 11px;
    font-size: 0.88rem;
  }
}

/* decision snippets: the same terminal language as the hero, with the verdict in the accent */
figure.snippet {
  margin: 0;
  padding: 0;
  background: var(--term);
  border-radius: 10px;
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.06),
    0 14px 30px -22px rgb(16 20 18 / 0.5);
}
figure.snippet figcaption {
  font: 400 0.76rem/1.3 var(--mono);
  color: var(--term-muted);
  padding: 11px 16px;
  background: var(--term-2);
  border-bottom: 1px solid rgb(255 255 255 / 0.07);
}
figure.snippet pre {
  margin: 0;
  padding: 14px 16px 16px;
  font: 400 0.82rem/1.65 var(--mono);
  color: var(--term-text);
  white-space: pre-wrap;
  overflow-wrap: normal;
}
figure.snippet .v {
  color: var(--term-accent);
}

/* docs: contents column on desktop, a closed disclosure on phones; header aligned with the body */
.docs .toc {
  padding-top: clamp(40px, 6vw, 72px);
}
.toc .toc-title {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
}
.toc-m {
  display: none;
}
@media (max-width: 879px) {
  .docs .toc {
    display: none;
  }
  .toc-m {
    display: block;
    margin: 0 0 28px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--paper);
  }
  .toc-m summary {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 16px;
    cursor: pointer;
    font-weight: 560;
    font-size: 0.92rem;
  }
  .toc-m ol {
    list-style: none;
    margin: 0;
    padding: 0 16px 10px;
    border-top: 1px solid var(--line);
  }
  .toc-m a {
    display: flex;
    align-items: center;
    min-height: 40px;
    color: var(--ink-2);
    text-decoration: none;
  }
}

/* tables stack into label/value blocks on phones */
@media (max-width: 640px) {
  table.stack thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  table.stack,
  table.stack tbody,
  table.stack tr,
  table.stack td {
    display: block;
    width: 100%;
  }
  table.stack tr {
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
  }
  table.stack td {
    border: 0;
    padding: 3px 0;
  }
  table.stack td::before {
    content: attr(data-label);
    display: block;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--muted);
  }
  table.stack td:first-child {
    font-weight: 600;
    color: var(--ink);
  }
  table.stack td:first-child::before {
    display: none;
  }
}

/* pricing: the waitlist form on one row, matching pill radii; FAQ with hairlines */
.field input[type="email"],
.field select {
  border-radius: 999px;
  padding: 0 18px;
}
.form {
  max-width: 40rem;
}
@media (min-width: 640px) {
  .field {
    flex-wrap: nowrap;
  }
  .field input[type="email"] {
    flex: 1 1 auto;
    min-width: 0;
  }
  .field select {
    flex: 0 0 auto;
  }
  .field .btn {
    flex: none;
  }
}
.faq h3 {
  margin: 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.faq h3:first-child {
  padding-top: 0;
  border-top: 0;
}
.faq h3 + p {
  margin: 8px 0 20px;
}
.facts {
  display: grid;
  gap: 10px;
}
.term-note span {
  text-wrap: pretty;
}
@media (min-width: 880px) {
  .split.split-wide {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  }
}
.foot-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(8rem, max-content));
  gap: 0 56px;
  font-size: 0.9rem;
}
.foot-h {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.foot-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.foot-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--ink-2);
  text-decoration: none;
}
.foot-nav a:hover {
  color: var(--ink);
  text-decoration: underline;
}
.toc a {
  color: var(--muted);
  font-size: 0.88rem;
}
.toc a:hover {
  color: var(--ink);
}

/* ---- critique round 2 fixes ------------------------------------------------------------ */
.nw {
  white-space: nowrap;
}
figure.snippet {
  white-space: normal;
}
.snip {
  padding: 14px 16px 16px;
  font: 400 0.82rem/1.65 var(--mono);
  color: var(--term-text);
}
.snip p {
  margin: 0;
  color: inherit;
  max-width: none;
}
.snip .i {
  padding-left: 3ch;
}
.snip .v,
.snip .v .v {
  color: var(--term-accent);
}
.snip .i .v {
  padding-left: 0;
}
@media (max-width: 480px) {
  .snip,
  figure.snippet figcaption {
    font-size: 0.74rem;
  }
  .snip {
    padding: 12px 14px 14px;
  }
}
/* inline code: short commands stay whole; long ones (URLs) may wrap, with clean edges */
:not(pre) > code {
  white-space: nowrap;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.prose :not(pre) > code,
.lede :not(pre) > code,
.note :not(pre) > code,
.more :not(pre) > code,
.flash :not(pre) > code {
  white-space: nowrap;
  overflow-wrap: normal;
}
:not(pre) > code.long {
  white-space: normal;
  overflow-wrap: anywhere;
}
.prose {
  line-height: 1.7;
}
/* disclosure affordance */
.toc-m summary {
  justify-content: space-between;
  list-style: none;
}
.toc-m summary::-webkit-details-marker {
  display: none;
}
.toc-m summary::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s var(--ease);
}
.toc-m[open] summary::after {
  transform: translateY(2px) rotate(225deg);
}
/* select with its own chevron, clear of the pill edge */
.field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23565c59' stroke-width='1.5'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}
@media (max-width: 639px) {
  .field select {
    flex: 1 1 10rem;
  }
}
/* pricing: aligned subcopy so checklists and buttons share lines */
@media (min-width: 880px) {
  .plan .under {
    min-height: 2.9em;
  }
}
/* the home price table on phones: tag under the plan name */
@media (max-width: 480px) {
  .table .tag {
    display: table;
    margin-top: 4px;
  }
}
/* footer hairline on every page */
.site-foot {
  border-top: 1px solid var(--line);
}
.close + .site-foot {
  border-top: 0;
}
.end-space {
  height: clamp(40px, 7vw, 80px);
}
.decision .snip p {
  margin: 0;
  max-width: none;
  color: var(--term-text);
}
.decision .snip p.v,
.decision .snip .v {
  color: var(--term-accent);
}
@media (max-width: 480px) {
  figure.snippet figcaption {
    font-size: 0.7rem;
    padding: 10px 14px;
  }
}

/* ---- critique round 3 fixes ------------------------------------------------------------ */
.plans-note {
  margin-top: 14px;
}
.waitlist .section-head {
  margin-bottom: 22px;
}
@media (max-width: 640px) {
  .hero h1 .quiet {
    font-size: 0.8em;
    margin-top: 6px;
    line-height: 1.1;
  }
  .hero .term li:nth-child(3) {
    display: none;
  }
}
@media (max-width: 480px) {
  .cmd pre {
    padding: 13px 14px 50px;
  }
  .copy {
    top: auto;
    bottom: 7px;
  }
}
@media (max-width: 639px) {
  .field .btn {
    flex: 1 1 100%;
  }
}
/* WCAG 2.4.11: keyboard focus never hides under the sticky header or the phone action bar */
@media (max-width: 720px) {
  html {
    scroll-padding-top: 128px;
    scroll-padding-bottom: 96px;
  }
}
.close-note {
  color: var(--term-muted);
  font-size: 0.92rem;
}

/* pre-launch install card: what each CLI runs, no runnable command yet */
.install-soon {
  padding: 8px 18px 16px;
}
.install-soon ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.install-soon li {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.install-soon li b {
  min-width: 7.5rem;
  font-weight: 600;
}
.install-soon li span {
  color: var(--ink-2);
}
.install-soon .install-foot {
  margin-top: 14px;
}

/* ---- home v3 (2026-10-28): attrival-level craft ------------------------------------------ */
/* Centred serif hero over soft colour, a looping product film, a four-step story on a dotted
   rail, real tool answers as report cards, one dark statement band, then trust and price. */
.h-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(56px, 8vw, 112px) 0 clamp(48px, 6vw, 88px);
}
.h-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.h-glow i {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.75;
}
.h-glow i:nth-child(1) {
  width: 560px;
  height: 420px;
  left: -160px;
  top: 40px;
  background: #dbe6ff;
}
.h-glow i:nth-child(2) {
  width: 520px;
  height: 380px;
  right: -140px;
  top: -60px;
  background: #ece3ff;
}
.h-glow i:nth-child(3) {
  width: 640px;
  height: 360px;
  left: 50%;
  top: 520px;
  transform: translateX(-50%);
  background: #d9f3ec;
  opacity: 0.55;
}
.h-hero-in {
  position: relative;
  text-align: center;
}
.h-hero h1 {
  font-size: clamp(2.7rem, 1.3rem + 5vw, 5.4rem);
  line-height: 1;
  letter-spacing: -0.03em;
  max-width: 14ch;
  margin: 0 auto;
}
.h-hero h1 em,
.h-section h2 em {
  font-style: normal;
  color: var(--accent);
}
.h-dot {
  color: var(--accent);
}
.h-kicker {
  display: table;
  margin: 0 auto 26px;
  padding: 7px 14px 7px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgb(255 255 255 / 0.72);
  font: 540 0.84rem/1.2 var(--body);
  letter-spacing: 0;
  color: var(--ink-2);
  backdrop-filter: blur(6px);
}
.h-live {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gain);
  margin-right: 8px;
  vertical-align: 1px;
  box-shadow: 0 0 0 3px rgb(15 138 95 / 0.16);
}
.h-lede {
  max-width: 40rem;
  margin: 24px auto 0;
  font-size: clamp(1.04rem, 0.98rem + 0.3vw, 1.16rem);
  color: var(--ink-2);
}
.h-form,
.h-actions {
  display: flex;
  gap: 8px;
  max-width: 31rem;
  margin: 30px auto 0;
  justify-content: center;
}
.h-form input[type="email"] {
  flex: 1;
  min-width: 0;
  height: 48px;
  padding: 0 20px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: #fff;
  font: 400 1rem var(--body);
  color: var(--ink);
  box-shadow: 0 1px 2px rgb(18 21 40 / 0.06);
}
.h-form input[type="email"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.h-form .btn,
.h-actions .btn {
  height: 48px;
  padding: 0 22px;
  --bg: var(--accent);
  border-color: var(--accent);
}
.h-form .btn:hover,
.h-actions .btn:hover {
  --bg: var(--accent-ink);
}
.h-note {
  max-width: 34rem;
  margin: 16px auto 0;
  font-size: 0.88rem;
  color: var(--muted);
  text-wrap: balance;
}
.h-note svg {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 6px;
  vertical-align: -2px;
}

/* the film */
.h-film {
  position: relative;
  margin: clamp(40px, 6vw, 72px) auto 0;
  max-width: 1100px;
}
.h-film-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 22px;
  overflow: hidden;
  /* the poster sits behind the video (a poster attribute can't switch with the phone cut) */
  background:
    url("/media/hero-poster.webp") center / cover no-repeat,
    radial-gradient(60% 70% at 25% 30%, #e3ebff, transparent 70%),
    radial-gradient(50% 60% at 80% 75%, #e6f6ef, transparent 70%),
    #f6f7fb;
  border: 1px solid rgb(18 21 40 / 0.06);
  box-shadow:
    0 1px 2px rgb(18 21 40 / 0.06),
    0 30px 60px -28px rgb(26 40 110 / 0.35);
}
.h-film video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.h-film-toggle {
  position: absolute;
  left: 16px;
  bottom: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  background: rgb(255 255 255 / 0.92);
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 2px 10px rgb(18 21 40 / 0.18);
  transition: transform 0.3s var(--ease);
}
.h-film-toggle:hover {
  transform: scale(1.06);
}
.h-film-toggle svg {
  width: 15px;
  height: 15px;
}
.h-film-toggle .i-play,
.h-film-toggle[data-paused] .i-pause {
  display: none;
}
.h-film-toggle[data-paused] .i-play {
  display: block;
}
.h-film figcaption {
  max-width: 44rem;
  margin: 18px auto 0;
  text-align: center;
  font-size: 0.88rem;
  color: var(--muted);
  text-wrap: pretty;
}
.h-film figcaption b {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.92em;
  color: var(--ink-2);
}

/* shared section frame */
.h-section {
  padding: clamp(64px, 9vw, 128px) 0 0;
}
.h-section.h-tight {
  padding-top: clamp(56px, 7vw, 96px);
}
.h-center {
  text-align: center;
}
.h-center-head {
  text-align: center;
  max-width: 44rem;
  margin: 0 auto clamp(32px, 4vw, 52px);
}
.h-center-head p {
  margin-top: 14px;
  color: var(--ink-2);
}
.h-link {
  margin-top: 26px;
  font-size: 0.94rem;
}
.h-link a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 560;
  text-decoration: none;
}
.h-link a:hover {
  text-decoration: underline;
}
.h-link svg {
  width: 14px;
  height: 14px;
}
.h-section h2.h-center {
  max-width: 24ch;
  margin: 0 auto;
}

/* the story: dotted rail on the left, a visual on a tinted panel on the right */
.h-steps {
  list-style: none;
  margin: clamp(40px, 5vw, 72px) 0 0;
  padding: 0 0 0 34px;
  position: relative;
  display: grid;
  gap: clamp(48px, 7vw, 104px);
}
.h-steps::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 8px;
  bottom: 8px;
  border-left: 2px dotted #c9cfdc;
}
.h-step {
  display: grid;
  gap: 24px;
  align-items: center;
  position: relative;
}
.h-step-copy {
  position: relative;
  max-width: 27rem;
}
.h-step-copy::before {
  content: "";
  position: absolute;
  left: -34px;
  top: 34px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  background: #fff;
}
.h-step-n {
  font: 600 0.78rem/1 var(--body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}
.h-step h3 {
  font: 450 clamp(1.6rem, 1.3rem + 1vw, 2.15rem) / 1.1 var(--serif);
  letter-spacing: -0.015em;
  margin-top: 12px;
}
.h-step-copy > p:last-child {
  margin-top: 12px;
  color: var(--ink-2);
}
.h-panel {
  border-radius: 22px;
  padding: clamp(22px, 3.4vw, 44px);
  min-height: 300px;
  display: grid;
  place-items: center;
  background: radial-gradient(55% 65% at 18% 20%, #e1e9ff, transparent 70%), radial-gradient(50% 60% at 85% 85%, #e5f5ee, transparent 70%), #f5f7fb;
  border: 1px solid rgb(18 21 40 / 0.05);
  box-shadow: 0 24px 48px -32px rgb(26 40 110 / 0.3);
}
.h-panel-2 {
  background: radial-gradient(55% 65% at 80% 15%, #ece4ff, transparent 70%), radial-gradient(50% 60% at 15% 85%, #e1e9ff, transparent 70%), #f6f6fb;
}
.h-panel-3 {
  background: radial-gradient(55% 65% at 20% 80%, #fdf0dc, transparent 70%), radial-gradient(50% 60% at 85% 20%, #e1e9ff, transparent 70%), #f8f7f4;
}
.h-panel-4 {
  background: radial-gradient(55% 65% at 80% 80%, #dcf3ea, transparent 70%), radial-gradient(50% 60% at 15% 15%, #e1e9ff, transparent 70%), #f4f8f6;
}
.h-panel > * {
  width: 100%;
  max-width: 520px;
}

/* step 1: terminal */
.h-term {
  background: var(--term);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 18px 40px -18px rgb(10 14 30 / 0.55);
  font: 400 0.8rem/1.65 var(--mono);
  color: var(--term-text);
}
.h-term-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: var(--term-2);
  color: var(--term-muted);
  font-size: 0.72rem;
}
.h-term-bar i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #3a403d;
}
.h-term-bar span {
  margin-left: 8px;
}
.h-term-body {
  padding: 16px 18px 18px;
  display: grid;
  gap: 8px;
}
.h-q {
  color: #fff;
}
.h-q::before {
  content: "› ";
  color: var(--term-accent);
}
.h-call {
  color: var(--term-muted);
}
.h-call b {
  color: var(--term-accent);
  font-weight: 600;
}
.h-a b {
  color: #7fe0b5;
  font-weight: 600;
}
.h-dim {
  color: var(--term-muted);
}

/* step 2: where the data goes */
.h-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px minmax(0, 0.92fr);
  grid-template-areas:
    "fg . ."
    "fw1 . ."
    "fq fw3 fs"
    "fw2 . ."
    "fc . .";
  align-items: center;
}
.fg {
  grid-area: fg;
}
.fq {
  grid-area: fq;
}
.fc {
  grid-area: fc;
}
.fs {
  grid-area: fs;
}
.fw1 {
  grid-area: fw1;
}
.fw2 {
  grid-area: fw2;
}
.fw3 {
  grid-area: fw3;
}
.h-node {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 11px 14px;
  box-shadow: 0 2px 6px rgb(18 21 40 / 0.05);
}
.h-node span {
  display: block;
  font-size: 0.74rem;
  color: var(--muted);
}
.h-node b {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.3;
}
.h-node small {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  font-size: 0.74rem;
  color: var(--ink-2);
}
.h-node small svg {
  width: 12px;
  height: 12px;
}
.h-node-main {
  border-color: var(--accent);
  background: var(--accent-wash);
  box-shadow: 0 0 0 4px rgb(35 67 196 / 0.08);
}
.h-node-off {
  border-style: dashed;
  background: rgb(255 255 255 / 0.6);
  box-shadow: none;
}
.h-node-off b {
  color: var(--ink-2);
  font-weight: 560;
}
.h-wire {
  position: relative;
  height: 40px;
  margin-left: 26px;
  border-left: 2px solid var(--accent);
}
.h-wire::after {
  content: "";
  position: absolute;
  left: -6px;
  bottom: 0;
  border: 5px solid transparent;
  border-top: 6px solid var(--accent);
  border-bottom: 0;
}
.h-wire em {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font: 500 0.72rem/1 var(--mono);
  font-style: normal;
  color: var(--accent-ink);
  white-space: nowrap;
}
.h-wire-off {
  height: 0;
  margin: 0;
  border-left: 0;
  border-top: 2px dashed var(--line-2);
}
.h-wire-off::after {
  display: none;
}

/* step 3: rows and finished days */
.h-rows {
  background: #fff;
  border-radius: 16px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  box-shadow: 0 12px 30px -20px rgb(18 21 40 / 0.35);
}
.h-vcap {
  font-size: 0.78rem;
  color: var(--muted);
}
.h-bars {
  margin-top: 12px;
  display: grid;
  gap: 12px;
}
.h-bar-row {
  display: grid;
  grid-template-columns: 6.4rem minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  font-size: 0.84rem;
}
.h-bar-row b {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  min-width: 5.6rem;
  text-align: right;
}
.h-bar {
  height: 10px;
  border-radius: 99px;
  background: #edf0f6;
  overflow: hidden;
}
.h-bar i {
  display: block;
  height: 100%;
  border-radius: 99px;
}
.h-bar .full {
  width: 100%;
  background: var(--accent);
}
.h-bar .part {
  width: var(--w);
  background: #9aa3b5;
}
.h-days {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.h-cells {
  display: grid;
  grid-template-columns: repeat(30, minmax(0, 1fr));
  gap: 3px;
}
.h-cells i {
  height: 18px;
  border-radius: 3px;
  background: var(--accent);
  opacity: 0.82;
}
.h-cells i.fresh {
  opacity: 1;
  background: repeating-linear-gradient(-45deg, #f3dfb8 0 3px, #fbf3e4 3px 6px);
  outline: 1px dashed #d8b679;
  outline-offset: -1px;
}
.h-days p {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 8px;
  font-size: 0.76rem;
  color: var(--muted);
}
.h-fresh-label {
  color: var(--amber);
}

/* step 4 and the question cards: memos */
.h-memo {
  background: #fff;
  border-radius: 16px;
  border: 1px solid var(--line);
  padding: clamp(18px, 2.4vw, 26px);
  box-shadow:
    0 1px 2px rgb(18 21 40 / 0.05),
    0 22px 44px -28px rgb(26 40 110 / 0.35);
  text-align: left;
}
.h-memo-sm {
  padding: 18px 20px;
}
.h-memo-head {
  font: 400 0.74rem/1.5 var(--mono);
  color: var(--muted);
}
.h-memo-line {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 0.9rem;
}
.h-memo-figs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 14px;
}
.h-memo-figs span {
  font: 600 1.35rem/1.1 var(--body);
  font-variant-numeric: tabular-nums;
}
.h-memo-figs small {
  display: block;
  font: 400 0.72rem/1.4 var(--body);
  color: var(--muted);
  margin-bottom: 2px;
}
.h-check {
  display: grid;
  gap: 14px;
  justify-items: center;
}
.h-match {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #bfe3d2;
  color: var(--gain);
  font-size: 0.86rem;
  font-weight: 560;
  box-shadow: 0 6px 16px -10px rgb(15 138 95 / 0.5);
}
.h-match svg {
  width: 15px;
  height: 15px;
}

/* the questions */
.h-qgrid {
  display: grid;
  gap: 28px;
}
.h-qtabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.h-qtabs button {
  flex: none;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  text-align: left;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 14px;
  padding: 14px 16px;
  cursor: pointer;
  color: var(--muted);
  font: 450 1.14rem/1.25 var(--serif);
  transition:
    background-color 0.25s,
    box-shadow 0.35s var(--ease),
    color 0.2s;
}
.h-qtabs button:hover {
  color: var(--ink);
}
.h-qtabs button[aria-selected="true"] {
  color: var(--ink);
  background: #fff;
  border-color: var(--line);
  box-shadow: 0 10px 26px -18px rgb(18 21 40 / 0.45);
}
.h-qmark {
  flex: none;
  width: 12px;
  height: 12px;
  margin-top: 6px;
  border-radius: 50%;
  border: 2px solid #b9c0cf;
}
.h-qtabs button[aria-selected="true"] .h-qmark {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: 0 0 0 4px rgb(35 67 196 / 0.12);
}
.h-qtext code {
  display: block;
  margin-top: 6px;
  background: none;
  border: 0;
  padding: 0;
  font-size: 0.74rem;
  color: var(--accent);
}
.h-qmore {
  display: none;
  font-size: 0.88rem;
  color: var(--muted);
  padding: 14px 16px 0 42px;
}
.h-qpanels {
  border-radius: 24px;
  padding: clamp(14px, 3vw, 40px);
  background: radial-gradient(60% 55% at 85% 10%, #dfe8ff, transparent 70%), radial-gradient(55% 60% at 10% 95%, #e4f4ee, transparent 70%), #f5f7fb;
  border: 1px solid rgb(18 21 40 / 0.05);
}
.h-qpanel:focus-visible {
  outline-offset: 6px;
  border-radius: 16px;
}
.h-memo-top {
  display: flex;
  align-items: center;
  gap: 12px;
}
.h-avatar {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: #fff;
  font: 600 0.78rem/1 var(--body);
}
.h-memo-site {
  min-width: 0;
}
.h-memo-site b {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
}
.h-memo-site small {
  display: block;
  font-size: 0.76rem;
  color: var(--muted);
}
.h-memo-tool {
  margin-left: auto;
  font: 500 0.72rem/1 var(--mono);
  color: var(--accent-ink);
  background: var(--accent-wash);
  border-radius: 999px;
  padding: 7px 10px;
  white-space: nowrap;
}
.h-verdict {
  margin-top: 18px;
  font: 450 clamp(1.18rem, 1.05rem + 0.5vw, 1.45rem) / 1.3 var(--serif);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.h-verdict b {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.82em;
  color: var(--accent-ink);
}
.h-verdict b.h-loss {
  font-family: var(--serif);
  font-size: 1em;
  font-weight: 500;
  color: var(--loss);
}
.h-kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 18px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.h-kpis > div {
  padding: 12px 12px 12px 0;
  min-width: 0;
}
.h-kpis small {
  display: block;
  font-size: 0.74rem;
  color: var(--muted);
}
.h-kpis b {
  display: block;
  margin-top: 2px;
  font: 600 1.32rem/1.2 var(--body);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.h-kpis b.h-kpi-path {
  font: 500 0.84rem/1.6 var(--mono);
  overflow-wrap: anywhere;
}
.h-gain {
  color: var(--gain);
}
.h-loss {
  color: var(--loss);
}
.h-sub {
  margin-top: 18px;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--muted);
}
.h-qbars,
.h-ctr {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 9px;
}
.h-qbars li,
.h-ctr li {
  display: grid;
  grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) 3.4rem;
  gap: 12px;
  align-items: center;
  font-size: 0.84rem;
}
.h-qbars li span,
.h-ctr li span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.h-qbars i,
.h-ctr i {
  display: block;
  height: 8px;
  width: var(--w);
  border-radius: 99px;
  background: var(--accent);
}
.h-ctr i.now {
  background: var(--loss);
}
.h-ctr i.own {
  background: #9aa3b5;
}
.h-qbars b,
.h-ctr b {
  text-align: right;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.h-fine {
  margin-top: 14px;
  font-size: 0.82rem;
  color: var(--ink-2);
}
.h-fine code {
  font-size: 0.78rem;
}
.h-also {
  margin: 8px 0 0;
  padding: 0 0 0 1.3em;
  font-size: 0.86rem;
  display: grid;
  gap: 6px;
}
.h-also li::marker {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.h-also b {
  font-weight: 600;
}
.h-also span {
  display: block;
  color: var(--muted);
  font-size: 0.8rem;
}
.h-chart {
  margin: 18px 0 0;
}
.h-chart svg {
  width: 100%;
  height: auto;
  overflow: visible;
}
.h-chart rect.b {
  fill: var(--accent);
  opacity: 0.85;
}
.h-chart rect.a {
  fill: var(--loss);
  opacity: 0.85;
}
.h-chart line.m {
  stroke: var(--ink-2);
  stroke-width: 1.4;
  stroke-dasharray: 4 4;
}
.h-chart line.cut {
  stroke: var(--loss);
  stroke-width: 1.4;
  stroke-dasharray: 2 3;
}
.h-chart text {
  font: 400 11px var(--body);
  fill: var(--muted);
}
.h-chart figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin-top: 6px;
  font-size: 0.74rem;
  color: var(--muted);
}
.h-chart .k {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
}
.h-chart .k.b {
  background: var(--accent);
}
.h-chart .k.a {
  background: var(--loss);
  margin-left: 6px;
}
.h-chart .k.m {
  height: 0;
  border-top: 2px dashed var(--ink-2);
  border-radius: 0;
  margin-left: 6px;
}

/* the statement band */
.h-band {
  margin-top: clamp(64px, 9vw, 128px);
  padding: clamp(64px, 9vw, 120px) 0;
  color: #fff;
  background:
    radial-gradient(rgb(157 176 255 / 0.22) 1px, transparent 1.3px) right top / 16px 16px,
    radial-gradient(70% 90% at 0% 0%, #1a2a66, transparent 70%),
    var(--navy);
}
.h-band-k {
  font-size: 0.92rem;
  color: #aebbea;
}
.h-band h2 {
  margin-top: 14px;
  max-width: 22ch;
  color: #fff;
  font-size: clamp(2rem, 1.2rem + 3vw, 3.6rem);
  line-height: 1.08;
}
.h-band .h-dot {
  color: var(--term-accent);
}

/* works with */
.h-pills {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 52rem;
}
.h-pills li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px 7px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-weight: 560;
  font-size: 0.95rem;
  box-shadow: 0 2px 8px -4px rgb(18 21 40 / 0.18);
}
.h-mono {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: var(--accent-wash);
  color: var(--accent-ink);
}
.h-mono svg {
  width: 17px;
  height: 17px;
}
.h-soon {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--amber-wash);
  color: var(--amber);
  font-size: 0.72rem;
  font-weight: 600;
}

/* privacy band */
.h-priv {
  display: grid;
  gap: 28px;
  padding: clamp(28px, 5vw, 56px);
  border-radius: 24px;
  background: radial-gradient(60% 80% at 100% 0%, #dfe8ff, transparent 70%), var(--accent-wash);
}
.h-priv h2 {
  max-width: 16ch;
}
.h-priv-note {
  margin-top: 14px;
  max-width: 26rem;
  font-size: 0.92rem;
  color: var(--ink-2);
}
.h-checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
}
.h-checks li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 12px;
}
.h-checks svg {
  width: 18px;
  height: 18px;
  margin-top: 3px;
  color: var(--accent);
}
.h-checks p {
  color: var(--ink-2);
  font-size: 0.95rem;
}
.h-checks b {
  color: var(--ink);
  font-weight: 600;
}

/* plans */
.h-plans {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: grid;
  gap: 14px;
  max-width: 56rem;
}
.h-plans li {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px 24px;
  background: #fff;
}
.h-plans li.on {
  border-color: var(--accent);
  background: linear-gradient(180deg, var(--accent-wash), #fff 70%);
  box-shadow: 0 0 0 4px rgb(35 67 196 / 0.07);
}
.h-plan-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}
.h-plan-price {
  margin-top: 10px;
  color: var(--muted);
}
.h-plan-price b {
  font: 450 2.4rem/1 var(--serif);
  color: var(--ink);
  margin-right: 4px;
}
.h-plan-sites {
  margin-top: 6px;
  font-size: 0.9rem;
  color: var(--ink-2);
}

/* FAQ */
.h-faq-wrap {
  max-width: 820px;
}
.h-faq {
  margin-top: clamp(28px, 4vw, 44px);
  border-top: 1px solid var(--line);
}
.h-faq details {
  border-bottom: 1px solid var(--line);
}
.h-faq summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 60px;
  padding: 14px 2px;
  cursor: pointer;
  font-weight: 600;
  font-size: 1.02rem;
}
.h-faq summary::-webkit-details-marker {
  display: none;
}
.h-plus {
  flex: none;
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  transition:
    transform 0.35s var(--ease),
    background-color 0.2s;
}
.h-plus::before,
.h-plus::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 11px;
  height: 1.6px;
  background: var(--ink);
  transform: translate(-50%, -50%);
}
.h-plus::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.h-faq details[open] .h-plus {
  transform: rotate(45deg);
  background: var(--band);
}
.h-faq summary:hover .h-plus {
  background: var(--band);
}
.h-faq details p {
  padding: 0 46px 20px 2px;
  color: var(--ink-2);
}

/* the dark closing card (every page) */
.close {
  background: none;
  color: var(--term-text);
  padding: clamp(64px, 9vw, 120px) 0 clamp(48px, 6vw, 80px);
}
.close-card {
  text-align: center;
  border-radius: 26px;
  padding: clamp(44px, 7vw, 88px) clamp(22px, 5vw, 64px);
  background:
    radial-gradient(rgb(157 176 255 / 0.18) 1px, transparent 1.3px) right top / 16px 16px,
    radial-gradient(80% 100% at 100% 100%, #1e3380, transparent 70%),
    var(--navy);
  box-shadow: 0 30px 60px -36px rgb(11 18 41 / 0.7);
}
.close-card h2 {
  max-width: 20ch;
  margin: 0 auto;
  font-size: clamp(2rem, 1.3rem + 2.6vw, 3.3rem);
}
.close-card p {
  margin: 14px auto 0;
  color: #b9c3e6;
}
.close-card .hero-actions {
  justify-content: center;
  flex-wrap: wrap;
}
.close-card .close-note {
  color: #9aa6cf;
  width: 100%;
  text-align: center;
}

/* footer: light grey, columns */
.site-foot {
  background: #f5f6f8;
  border-top: 1px solid var(--line);
  padding: 56px 0 calc(40px + env(safe-area-inset-bottom));
}
.close + .site-foot {
  border-top: 1px solid var(--line);
}
.site-foot .wrap {
  display: grid;
  gap: 32px;
}
.foot-top {
  display: grid;
  gap: 12px;
}
.foot-top p {
  max-width: 26rem;
  color: var(--muted);
}
.foot-nav {
  grid-template-columns: repeat(2, minmax(8rem, max-content));
  gap: 22px 64px;
}
.foot-bottom {
  display: grid;
  gap: 6px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 0.84rem;
}

/* larger screens */
@media (min-width: 640px) {
  .h-kpis {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .h-kpis > div + div {
    padding-left: 14px;
    border-left: 1px solid var(--line);
  }
  .h-plans {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .foot-nav {
    grid-template-columns: repeat(3, minmax(8rem, max-content));
  }
}
@media (min-width: 960px) {
  .h-step {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(32px, 5vw, 72px);
  }
  .h-steps {
    padding-left: 48px;
  }
  .h-step-copy::before {
    left: -48px;
  }
  .h-panel {
    min-height: 380px;
  }
  .h-qgrid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: clamp(24px, 3vw, 44px);
    align-items: start;
  }
  .h-qtabs {
    flex-direction: column;
    overflow: visible;
    position: sticky;
    top: 96px;
  }
  .h-qtabs button {
    font-size: 1.42rem;
    padding: 18px 20px;
  }
  .h-qmore {
    display: block;
  }
  .h-priv {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: center;
  }
  .site-foot .wrap {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .foot-bottom {
    grid-column: 1 / -1;
    grid-template-columns: 1fr auto;
  }
}

/* phones */
@media (max-width: 959px) {
  .h-qtabs {
    flex-direction: column;
    gap: 4px;
  }
  .h-qtabs button {
    padding: 12px 14px;
    font-size: 1.08rem;
  }
}
@media (max-width: 560px) {
  .h-kicker {
    font-size: 0.78rem;
  }
  .h-form {
    flex-direction: column;
  }
  .h-form input[type="email"] {
    flex: none;
  }
  .h-form .btn {
    width: 100%;
  }
  .h-film-frame {
    aspect-ratio: 4 / 5;
    border-radius: 16px;
    background-image:
      url("/media/hero-poster-m.webp"),
      radial-gradient(60% 70% at 25% 30%, #e3ebff, transparent 70%),
      radial-gradient(50% 60% at 80% 75%, #e6f6ef, transparent 70%);
  }
  .h-flow {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "fg" "fw1" "fq" "fw2" "fc" "fs";
  }
  .fw3 {
    display: none;
  }
  .fs {
    margin-top: 16px;
  }
  .h-qbars li,
  .h-ctr li {
    grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr) 3rem;
    gap: 8px;
  }
  .h-bar-row {
    grid-template-columns: 5.6rem minmax(0, 1fr);
  }
  .h-bar-row b {
    grid-column: 2;
    text-align: left;
    font-size: 0.78rem;
    margin-top: -6px;
  }
  .h-memo-tool {
    display: none;
  }
  .h-faq details p {
    padding-right: 4px;
  }
}

/* motion: content rises in as it scrolls into view, where the browser supports scroll timelines */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .h-panel,
    .h-qpanels,
    .h-priv,
    .h-plans li {
      animation: h-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 45%;
    }
  }
}
@keyframes h-rise {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}