/* Burt marketing site, 2026-11 system. Stone + Charcoal: light stone fields, a warm ground, charcoal primary, steel-blue links.
   Faces are served from /assets/fonts (all SIL OFL 1.1). Tokens are documented in docs/marketing/DESIGN.md (kept out of the published folder). */

@font-face {
  font-family: "Schibsted Grotesk";
  src: url("/assets/fonts/schibsted-grotesk-latin-wght-normal.woff2") format("woff2-variations"),
       url("/assets/fonts/schibsted-grotesk-latin-wght-normal.woff2") format("woff2");
  font-weight: 400 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Libre Franklin";
  src: url("/assets/fonts/libre-franklin-latin-wght-normal.woff2") format("woff2-variations"),
       url("/assets/fonts/libre-franklin-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/assets/fonts/geist-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/assets/fonts/geist-mono-latin-500-normal.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

:root {
  /* colour: Stone + Charcoal (owner ruling 2026-11-06, palette option 4). Neutral at least 90 % of any view;
     the steel-blue accent stays under 2 % (links, focus, selection). */
  --field: #ebe7df;          /* hero, page heads, the case-file band, the closer */
  --field-raised: #e2ddd3;   /* the darker band under the hero screens, raised surfaces on the field */
  --deep: #1f1d1a;           /* footer, code blocks */
  --deep-raised: #2a2724;
  --on-field: #1f1d1a;
  --on-field-2: #4d4842;
  --on-field-3: #6a645c;
  --ground: #faf9f6;         /* body */
  --surface: #f2efe9;        /* alternate sections */
  --paper: #ffffff;          /* window backs, the featured plan, inputs */
  --ink: #1f1d1a;
  --muted: #57524b;
  --subtle: #6b655d;
  --line: #e4e0d8;
  --line-strong: #d2ccc1;
  --btn: #22201d;            /* the one primary action */
  --btn-ink: #faf9f6;
  --btn-hover: #3a3733;
  --btn-press: #12110f;
  --link: #31506f;           /* muted steel blue: links, focus, selection */
  --link-hover: #233c55;
  --focus: #31506f;
  --selection: #d6dfe9;     /* a pale tint of the link colour */
  --success: #2f6a4a;
  --warning: #8a5a00;
  --error: #a3261f;
  --on-deep: #f4f1ec;
  --on-deep-2: #cdc7bd;
  --on-deep-3: #a69f94;
  --line-deep: rgba(244, 241, 236, 0.14);
  --line-field: rgba(31, 29, 26, 0.14);

  /* type */
  --font-display: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Libre Franklin", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --text-body: 1.125rem;      /* 18px */
  --text-small: 1.0625rem;    /* 17px, the floor for reading text */
  --text-label: 0.8125rem;    /* 13px, mono data only */
  --h1: clamp(2.375rem, 3.75vw, 3.875rem);
  --h2: clamp(1.875rem, 2.9vw, 2.875rem);
  --h3: 1.375rem;
  --lead: clamp(1.1875rem, 1.35vw, 1.3125rem);

  /* space (8pt) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px; --s11: 160px;
  --section: clamp(80px, 10vw, 144px);
  --gutter: clamp(16px, 4vw, 40px);
  --max: 1200px;

  /* shape + depth: one radius language */
  --r: 12px;
  --r-sm: 8px;
  /* depth on a light field: a hairline frame plus a warm, offset, soft shadow (owner: screens must still stand out) */
  --frame: 0 0 0 1px rgba(31, 29, 26, 0.10);
  --shadow-window: var(--frame), 0 1px 2px rgba(31, 29, 26, 0.06), 0 12px 28px -8px rgba(31, 29, 26, 0.16), 0 40px 80px -28px rgba(31, 29, 26, 0.26);
  --shadow-window-lift: var(--frame), 0 2px 4px rgba(31, 29, 26, 0.08), 0 20px 40px -12px rgba(31, 29, 26, 0.24), 0 64px 120px -40px rgba(31, 29, 26, 0.36);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --overlap: clamp(48px, 5vw, 80px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 132px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.6;
  font-weight: 400;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-optical-sizing: auto;
}
img, picture { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 400; }
::selection { background: var(--selection); color: var(--ink); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: var(--r-sm); }
.footer :focus-visible { outline-color: var(--on-deep); }
html { scrollbar-color: var(--line-strong) transparent; }

.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip {
  position: absolute; left: var(--s4); top: -100px; z-index: 100;
  background: var(--btn); color: var(--btn-ink); padding: var(--s3) var(--s4);
  border-radius: var(--r-sm); font-weight: 600; text-decoration: none;
}
.skip:focus { top: var(--s4); }

.display { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.03em; line-height: 1.08; text-wrap: balance; }
.h2 { font-family: var(--font-display); font-size: var(--h2); font-weight: 400; letter-spacing: -0.03em; line-height: 1.1; text-wrap: balance; }
.h3 { font-family: var(--font-body); font-size: var(--h3); font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.lead { font-size: var(--lead); line-height: 1.55; color: var(--muted); text-wrap: pretty; }
.mono { font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.measure { max-width: 62ch; }
.nb { white-space: nowrap; }
/* wrapping: headings balance their lines, reading text avoids a one-word last line (polish pass 2026-11-07) */
h1, h2, h3, summary, caption, dt, th { text-wrap: balance; }
p, li, dd, td, figcaption, blockquote { text-wrap: pretty; }
.trio strong, .steps strong, .pillar-list strong, .promises strong, .figures .figure-label { text-wrap: balance; }

/* ── buttons ──────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 48px; padding: 0 var(--s5);
  border-radius: var(--r-sm); border: 1px solid transparent;
  font: 600 1.0625rem/1 var(--font-body); letter-spacing: -0.005em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color 0.2s var(--ease-out), border-color 0.2s var(--ease-out), color 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--btn); color: var(--btn-ink); }
.btn-primary:hover { background: var(--btn-hover); }
.btn-primary:active { background: var(--btn-press); }
.btn-outline { border-color: rgba(31, 29, 26, 0.42); color: var(--ink); background: transparent; }
.btn-outline:hover { background: rgba(31, 29, 26, 0.05); border-color: var(--ink); }
.btn-ghost-light { border-color: rgba(31, 29, 26, 0.32); color: var(--ink); background: var(--paper); }
.btn-ghost-light:hover { border-color: var(--ink); }
.btn-sm { min-height: 40px; padding: 0 var(--s4); font-size: 1rem; }
.link {
  color: var(--link); font-weight: 600; text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 4px;
}
.link:hover { color: var(--link-hover); text-decoration-thickness: 2px; }

/* ── nav ──────────────────────────────────────────────────────────────────── */
/* the header sticks to the top of every page (L4): a stone bar that gains a hairline once the page scrolls */
.nav { position: sticky; top: 0; z-index: 40; color: var(--on-field); background: var(--field); transition: box-shadow 0.2s var(--ease-out); }
.nav[data-stuck="true"] { box-shadow: 0 1px 0 var(--line-field), 0 8px 24px -16px rgba(31, 29, 26, 0.28); }
.nav-row { display: flex; align-items: center; gap: var(--s5); min-height: 68px; }
.nav .wrap { max-width: calc(min(87vw, 1400px) + 2 * var(--gutter)); }
.nav-row { position: relative; }
.nav-row > nav { flex: 1; display: flex; justify-content: center; }
@media (min-width: 901px) { .nav-row > nav { position: absolute; left: 50%; transform: translateX(-50%); } .nav-end { margin-left: auto; } }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font-family: var(--font-display); font-weight: 600; font-size: 1.875rem; letter-spacing: -0.03em; line-height: 1; }
.brand svg { width: 42px; height: 42px; flex: none; }
.brand span { transform: none; }
.nav-links { display: flex; gap: clamp(18px, 2.4vw, 40px); margin: 0; padding: 0; list-style: none; }
.nav-links a { text-decoration: none; font-size: 1.0625rem; letter-spacing: -0.005em; font-weight: 500; color: var(--on-field); padding: var(--s2) 0; }
.nav-links a:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.nav-end { display: flex; align-items: center; gap: var(--s5); }
.nav-login { text-decoration: none; font-weight: 500; font-size: 1.0625rem; }
.nav-login:hover { text-decoration: underline; text-underline-offset: 6px; }
.nav-toggle { display: none; }

@media (max-width: 900px) {
  .nav-links, .nav-login { display: none; }
  .nav-end { margin-left: auto; gap: var(--s3); }
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: var(--r-sm);
    background: transparent; border: 1px solid var(--line-field); color: var(--on-field); cursor: pointer;
  }
  .nav-toggle svg { width: 20px; height: 20px; }
  .nav[data-open="true"] .nav-sheet { display: block; }
}
.nav-sheet {
  display: none; position: absolute; left: var(--gutter); right: var(--gutter); top: 72px;
  background: var(--paper); color: var(--ink); border-radius: var(--r);
  padding: var(--s3); box-shadow: var(--shadow-window);
}
.nav-sheet ul { list-style: none; margin: 0; padding: 0; }
.nav-sheet a { display: block; padding: 14px var(--s4); text-decoration: none; font-size: 1.125rem; border-radius: var(--r-sm); }
.nav-sheet a:hover { background: var(--surface); }
.nav-sheet hr { border: 0; border-top: 1px solid var(--line); margin: var(--s2) 0; }

/* ── hero ─────────────────────────────────────────────────────────────────── */
.hero { position: relative; background: var(--field); color: var(--on-field); overflow-x: clip; }
.hero-copy { position: relative; text-align: center; padding-top: clamp(16px, 1.4vw, 24px); }
.hero h1 { font-size: var(--h1); line-height: 1.04; letter-spacing: -0.035em; color: var(--on-field); max-width: 14.5em; margin: 0 auto; }
.hero-sub { margin: clamp(12px, 0.9vw, 16px) auto 0; max-width: 32em; font-size: var(--lead); line-height: 1.38; color: var(--on-field-2); text-wrap: balance; }
@media (max-width: 640px) { .hero-sub { text-wrap: pretty; } }
.hero-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s4); margin-top: clamp(28px, 2.4vw, 36px); }
.hero-ctas .btn { min-height: 44px; font-size: 1.125rem; padding: 0 26px; }
.hero-note { margin-top: 12px; font-size: 1.0625rem; color: var(--on-field-2); }

/* The hero stage (light field, owner ruling 2026-11-06). One scale rule for every product screen: shown at 85-100 %
   of its captured CSS size at the 1440 reference, cropped (never shrunk) to the region that tells the story, and no
   window ever clips live text behind another. The dashboard is cropped to 1400 x 784 CSS px of the 1440 capture (it
   ends between the last bubble and the sidebar's Help link); the widget (its 400 x 604 panel, shown at 107 % of the
   dashboard's scale) covers the dashboard's right-hand panel exactly, from the pane gutter (x 1099) and the gap above
   the Team card (y 136) down to the crop's bottom edge, so nothing peeks out around it. Units are capture CSS px:
   stage = 1528 x 784. At 1440 the dashboard shows at 85 % and the widget at 91 %. */
.stage {
  position: relative; z-index: 2;
  width: min(1300px, calc(100vw - 2 * var(--gutter)));
  left: 50%; transform: translateX(-50%);
  margin: clamp(32px, 3vw, 44px) 0 calc(-1 * var(--overlap));
  aspect-ratio: 1528 / 784;
}
/* the slightly darker band under the screens: the field steps down once behind their lower half */
.stage::before {
  content: ""; position: absolute; z-index: -1; left: 50%; width: 100vw; transform: translateX(-50%);
  top: 46%; bottom: var(--overlap); background: var(--field-raised); border-top: 1px solid var(--line-field);
}
.window { position: relative; border-radius: var(--r); overflow: hidden; background: var(--paper); }
.window img { width: 100%; height: auto; }
.stage .dash { position: absolute; left: 0; top: 0; width: 91.623%; box-shadow: var(--shadow-window-lift); }
.stage .chat { position: absolute; right: 0; top: 17.347%; bottom: 0; width: 28.085%; box-shadow: var(--shadow-window-lift); }
.stage .chat img { height: 100%; object-fit: cover; object-position: top; }

/* the quiet four-item row under the hero stage: the stage hangs into it by the overlap */
.facts { position: relative; padding: calc(var(--overlap) + var(--s7)) 0 0; }

/* ── sections ─────────────────────────────────────────────────────────────── */
.section { padding: var(--section) 0; }
.section-surface { background: var(--surface); }
.section-head { max-width: 46rem; }
.section-head .lead { margin-top: var(--s5); }
.center { text-align: center; margin-left: auto; margin-right: auto; }

/* problem as a scene */
.scene { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s7); }
.scene h2 { max-width: 15em; }
.scene-body { max-width: 52rem; }
.scene h2 { font-size: clamp(2.25rem, 4.2vw, 4rem); line-height: 1.06; }
.scene-body p + p { margin-top: var(--s4); }
.scene-body { color: var(--muted); font-size: var(--text-body); }
.scene-body strong { color: var(--ink); font-weight: 600; }
/* the one footnoted stat, set inline in the prose (no hero-metric tile, design review M6) */
.stat-line { margin-top: var(--s5); color: var(--muted); }
.stat-inline { font-family: var(--font-display); font-weight: 400; font-size: 1.75em; line-height: 1; letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; margin-right: 0.12em; }
.scene-body .source { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--line); font-size: 0.9375rem; line-height: 1.5; color: var(--subtle); }
.scene-body .source .mono { color: var(--subtle); margin-right: 4px; }
sup.fn { font-family: var(--font-mono); font-size: 0.7em; line-height: 0; vertical-align: super; }
sup.fn a { text-decoration: none; color: var(--link); padding: 0 2px; }
sup.fn a:hover { text-decoration: underline; }

/* how it works: real screens, read on the left, shown on the right */
.how { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); margin-top: var(--s8); }

.how-step { padding: var(--s7) 0; border-top: 1px solid var(--line-strong); min-height: 62vh; display: flex; flex-direction: column; justify-content: center; }
.how-step:first-child { border-top: 0; padding-top: 0; justify-content: flex-start; min-height: 52vh; }
.how-step:last-child { min-height: 58vh; }
.how-step h3 { font-family: var(--font-display); font-size: clamp(1.625rem, 2.2vw, 2.125rem); font-weight: 400; letter-spacing: -0.015em; line-height: 1.15; transition: color 0.4s var(--ease-out); }
.how-step p { margin-top: var(--s4); color: var(--muted); max-width: 34rem; }

/* the frame stays put while all three steps are read: the steps are tall enough to give it room to stick, and it never
   grows past the screen (owner 2026-11-07: it scrolled away and was cut off) */
.how-frame { position: sticky; top: max(84px, calc(50vh - 330px)); height: min(690px, calc(100vh - 140px)); }
.how-frame figure {
  position: absolute; inset: 0; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  opacity: 0; transform: translateY(16px) scale(0.985);
  transition: opacity 0.6s var(--ease-out), transform 0.8s var(--ease-out);
}
.how-frame figure[data-active="true"] { opacity: 1; transform: none; }
.how-frame .window { box-shadow: var(--shadow-window); max-height: 100%; }
/* every frame at its captured size (one scale rule): the card 324, evidence 520, alerts 384 CSS px */

/* in the sticky frame the tall video card shrinks with a short screen so it and its caption always fit */

.shot-evidence { width: 486px; max-width: 100%; }

.js .how-step:not([data-active="true"]) h3 { color: var(--subtle); }
.caption { margin-top: var(--s3); color: var(--subtle); font-size: 0.9375rem; line-height: 1.5; }
.how-frame .caption { position: absolute; left: 0; right: 0; bottom: -36px; text-align: center; }

/* the case file, on the stone band */

.fields { list-style: none; margin: var(--s7) 0 0; padding: 0; border-top: 1px solid var(--line-field); }
.fields li { display: grid; grid-template-columns: 9.5rem 1fr; gap: var(--s4); padding: var(--s4) 0; border-bottom: 1px solid var(--line-field); }

.fields span:last-child { color: var(--on-field-2); font-size: var(--text-small); }

/* English and Spanish */
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 400px)); justify-content: center; gap: clamp(20px, 4vw, 56px); margin: var(--s8) auto 0; }
.duo figure { margin: 0; }
.duo .window { box-shadow: var(--shadow-window); }
.duo figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s4); margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--line); }
.duo figcaption strong { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; letter-spacing: -0.01em; }
.duo figcaption span { color: var(--subtle); font-size: 1rem; }

/* takeover */
.takeover { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.takeover .lead { margin-top: var(--s5); }

/* you stay the lawyer */
.lawyer { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); }
.promises { list-style: none; margin: 0; padding: 0; }
.promises li { display: grid; grid-template-columns: 28px 1fr; gap: var(--s4); padding: var(--s5) 0; border-top: 1px solid var(--line); }
.promises li:last-child { border-bottom: 1px solid var(--line); }
.promises svg { width: 22px; height: 22px; margin-top: 3px; color: var(--muted); }
.promises strong { display: block; font-weight: 600; color: var(--ink); }
.promises p { color: var(--muted); margin-top: var(--s1); }

/* pricing teaser */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--s8); border-top: 1px solid var(--line-strong); }
.plan { padding: var(--s6) clamp(16px, 2.4vw, 36px) var(--s6); display: flex; flex-direction: column; gap: var(--s4); }
.plan + .plan { border-left: 1px solid var(--line); }
.plan-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); }
.plan h3 { font-family: var(--font-display); font-size: 1.75rem; font-weight: 400; letter-spacing: -0.01em; }
.plan-tag { color: var(--muted); }
.price { display: flex; align-items: baseline; gap: var(--s2); color: var(--ink) !important; }
.price b { font-family: var(--font-display); font-weight: 400; font-size: 3.25rem; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.price .unit { color: var(--subtle); font-size: 1rem; }
.plan p { color: var(--muted); }
.plan ul { list-style: none; margin: 0; padding: 0; color: var(--muted); font-size: var(--text-small); }
.plan li { padding: var(--s2) 0 var(--s2) 22px; position: relative; }
.plan li::before { content: ""; position: absolute; left: 2px; top: 0.95em; width: 10px; height: 2px; background: var(--subtle); }
.plan .btn { margin-top: auto; align-self: flex-start; }
.plan-featured { background: var(--paper); box-shadow: inset 0 1px 0 var(--ink); }

/* FAQ */
.faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 6vw, 96px); }
.faq-list { border-top: 1px solid var(--line-strong); }
.faq details { border-bottom: 1px solid var(--line-strong); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--s5);
  padding: var(--s5) 0; font-family: var(--font-display); font-size: clamp(1.25rem, 1.6vw, 1.5rem); letter-spacing: -0.01em; line-height: 1.3;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--muted); }
.faq summary svg { width: 20px; height: 20px; flex: none; color: var(--muted); transition: transform 0.3s var(--ease-out); }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq .answer { padding: 0 var(--s8) var(--s6) 0; color: var(--muted); max-width: 62ch; }
.faq .answer p + p { margin-top: var(--s3); }

/* closing CTA */
.closer { background: var(--field); color: var(--on-field); text-align: center; padding: clamp(80px, 8vw, 120px) 0; position: relative; overflow: hidden; }
.closer h2 { position: relative; font-size: clamp(2.5rem, 4.6vw, 4.25rem); }
.closer .lead { position: relative; color: var(--on-field-2); margin: var(--s5) auto 0; max-width: 30em; }
.closer .hero-ctas, .closer .hero-note { position: relative; }

/* footnotes */
.notes { border-top: 1px solid var(--line); padding: var(--s6) 0; background: var(--ground); }
.notes ol { margin: 0; padding: 0; list-style: none; color: var(--subtle); font-size: 0.9375rem; line-height: 1.55; }
.notes li { display: grid; grid-template-columns: 2rem 1fr; }
.notes li:target { color: var(--ink); }

/* footer */
.footer { background: var(--deep); color: var(--on-deep-2); padding: var(--s9) 0 var(--s6); }
.footer-top { display: grid; grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2fr)); gap: var(--s6); }
.footer .brand { color: var(--on-deep); }
.footer-blurb { margin-top: var(--s4); max-width: 22rem; font-size: var(--text-small); }
.footer-col { display: flex; flex-direction: column; gap: var(--s2); align-items: flex-start; }
.footer-col strong { color: var(--on-deep); font-weight: 600; font-size: 1rem; margin-bottom: var(--s2); }
.footer-col a, .footer-link-btn { color: var(--on-deep-2); text-decoration: none; font-size: 1.0625rem; padding: 2px 0; }
.footer-col a:hover, .footer-link-btn:hover { color: var(--on-deep); text-decoration: underline; text-underline-offset: 4px; }
.footer-link-btn { background: none; border: 0; margin: 0; cursor: pointer; font-family: inherit; text-align: left; line-height: 1.5; }
.footer-legal { margin-top: var(--s8); padding-top: var(--s5); border-top: 1px solid var(--line-deep); display: flex; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; font-size: 0.9375rem; color: var(--on-deep-3); }

/* ── motion: one entrance, from an already-visible default ───────────────── */
@media (prefers-reduced-motion: no-preference) {
  .js .stage .dash { animation: rise 1.1s var(--ease-out) 0.08s both; }
  .js .stage .chat { animation: rise-chat 1.2s var(--ease-out) 0.32s both; }
  @keyframes rise { from { transform: translateY(28px); opacity: 0.001; } to { transform: none; opacity: 1; } }
  /* the chat card is opaque from the first frame, so the dashboard never shows through it (L13) */
  @keyframes rise-chat { from { transform: translate(14px, 36px); } to { transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  .how-frame figure { transition: none; }
  .btn, .faq summary svg, .how-step h3 { transition: none; }
}

/* ── responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .footer-top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .scene, .takeover, .lawyer, .faq { grid-template-columns: minmax(0, 1fr); }

  

  
  
  .how { grid-template-columns: minmax(0, 1fr); margin-top: var(--s7); }
  
  .how-step, .how-step:first-child, .how-step:last-child { min-height: 0; padding: var(--s7) 0; }
  .how-step:first-child { padding-top: 0; }

  /* the sample video card stays under ~70 % of a phone screen (design re-review N2) */
  
  .js .how-step:not([data-active="true"]) h3 { color: inherit; }
  .plans { grid-template-columns: minmax(0, 1fr); }
  .plan + .plan { border-left: 0; border-top: 1px solid var(--line); }
  .plan { padding-left: 0; padding-right: 0; }
  .plan-featured { padding-left: 0; }
}
@media (max-width: 640px) {
  :root { --text-body: 1.0625rem; }
  .nav-row { min-height: 68px; }
  .brand { font-size: 1.5rem; }
  .brand svg { width: 32px; height: 32px; }
  .nav-end .btn { min-height: 40px; padding: 0 var(--s4); font-size: 1rem; }
  .hero-copy { text-align: left; }
  .hero h1 { margin: 0; }
  .hero-sub { margin-left: 0; }
  .hero-ctas { justify-content: flex-start; }
  .hero-ctas .btn { flex: 1 1 auto; }
  /* phone stage: one real 390 capture of the widget, shown at 87 %, crossing the hero edge; no desktop window at all */
  .stage { aspect-ratio: auto; width: min(340px, 100%); left: 0; transform: none; margin: var(--s7) auto calc(-1 * var(--overlap)); }
  .stage::before { display: none; } /* one field behind the phone, no stripes (design re-review N5b) */
  .stage .chat { display: none; }
  .stage .dash { position: relative; width: 100%; }
  :root { --overlap: 64px; }
  .facts { padding-top: calc(var(--overlap) + var(--s6)); }
  .fields li { grid-template-columns: minmax(0, 1fr); gap: var(--s1); }
  .duo { grid-template-columns: minmax(0, 1fr); gap: var(--s7); }
  .duo figure { max-width: 400px; width: 100%; margin: 0 auto; }

  .faq .answer { padding-right: 0; }
  .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  
}

/* ══ Part 2: interior pages (product, pricing, trust, install, about, partners, get started, legal) ══ */

/* page heads: the stone field, shorter than the home hero, left-aligned */
.nav-links a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.nav-sheet a[aria-current="page"] { background: var(--surface); }
.page-head { display: flow-root; padding-top: clamp(40px, 6vw, 88px); padding-bottom: var(--s9); }
.page-head h1 { margin: 0; font-size: var(--h1); line-height: 1.04; letter-spacing: -0.035em; color: var(--on-field); max-width: 15em; }
.page-head .lead { margin-top: var(--s5); max-width: 36em; color: var(--on-field-2); }
.page-head .hero-ctas { justify-content: flex-start; }
.page-head .hero-note { margin-top: 10px; }
.page-head.has-stage { padding-bottom: 0; }
.page-head .crumb { display: inline-block; margin-bottom: var(--s5); color: var(--on-field-2); font-size: 1.0625rem; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.page-head .crumb:hover { color: var(--on-field); }
.page-stage { position: relative; z-index: 2; margin: var(--s8) 0 calc(-1 * var(--overlap)); }
.page-stage .window { box-shadow: var(--shadow-window-lift); }
.after-stage { padding-top: calc(var(--overlap) + var(--section)); }

.page-stage.stage-center { margin-left: auto; margin-right: auto; }
.page-stage .stage-792 { max-width: 792px; margin: 0 auto; }
/* a centred head window: the figure takes the window's width, so its caption lines up with the window's edge */
.page-stage.stage-center:has(> .stage-792) { max-width: 792px; }
.page-stage.stage-center:has(> .stage-735) { max-width: 735px; }
.page-head .crumb-after { margin-top: var(--s5); }
.page-head .crumb-after .crumb { margin: 0; }
.page-head .crumb-plain { text-decoration: none; }
.page-stage .caption { position: absolute; left: 0; right: 0; top: calc(100% + var(--s2)); text-align: right; }
/* a dense rules list in two hairline columns, then one quiet line (design review H4: break the text walls) */

.statement-sub { margin: var(--s5) auto 0; max-width: 40rem; text-align: center; color: var(--muted); }

/* about: "Who builds Burt" set as a short signed letter (design re-review L7) */

/* inner-page heads vary per page (design re-review N8): a wide centred window (about, partners), the artifact beside the
   h1 (trust), a centred head over a centred card (get-started) */
.page-stage.stage-wide { max-width: 1020px; margin-left: auto; margin-right: auto; }

.page-stage .stage-735 { max-width: 735px; margin: 0 auto; }
.head-center { text-align: center; }
.head-center h1 { margin-left: auto; margin-right: auto; max-width: 14em; }
.head-center .lead { margin: var(--s5) auto 0; }
.head-center .hero-ctas { justify-content: center; }
/* phones: centred heads go left like the home hero (one alignment rule under 640px) */
@media (max-width: 640px) {
  .head-center { text-align: left; }
  .head-center h1, .head-center .lead { margin-left: 0; }
  .head-center .hero-ctas { justify-content: flex-start; }
}
.head-side { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 64px); align-items: end; }
.head-side-copy { padding-bottom: calc(var(--overlap) + var(--s8)); }
.head-side-copy .lead { margin-top: var(--s5); }
.head-side .page-stage { margin-top: 0; justify-self: end; width: 100%; max-width: 735px; }
.feature-top h2 .tag { font-family: var(--font-body); font-size: 1rem; letter-spacing: 0; font-weight: 400; margin-left: 0.25em; }
/* the sample video greeting is labelled where it shows (owner ruling, fix round 2) */

/* the closer's phone: the real phone dashboard in the 28px frame */
.window.phone-frame { width: 340px; max-width: calc(100% - 16px); border-radius: 28px; box-shadow: var(--shadow-window-lift), 0 0 0 8px var(--deep); }
@media (max-width: 900px) {
  .head-side { grid-template-columns: minmax(0, 1fr); }
  .head-side-copy { padding-bottom: 0; }
  .head-side .page-stage { margin-top: var(--s8); justify-self: stretch; }
}
@media (max-width: 640px) {
  /* captions under a head window sit in the flow, left-aligned (design re-review N1) */
  .page-stage .caption { position: static; margin-top: var(--s3); text-align: left; }
  .after-stage { padding-top: calc(var(--overlap) + var(--s9)); }
  .window.phone-frame { width: 300px; }
}
/* round 3 heads (re-review O2): install = copy beside a small code window; about = the phone first, copy after */

.head-side-flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; }
.head-side-flip .head-side-copy { padding-bottom: 0; }

.head-side .page-stage.stage-phone { max-width: 356px; justify-self: center; margin-top: var(--s4); }
.page-stage.stage-phone .window.phone-frame { margin: 0 auto; }
.page-stage.stage-phone .caption { text-align: center; top: calc(100% + var(--s4)); }
@media (max-width: 900px) {
   .head-side-flip { grid-template-columns: minmax(0, 1fr); }
  .head-side-flip .head-side-copy { order: -1; }
}
@media (max-width: 640px) {
  /* the phone hero's lift shadow spread across the whole field and banded it (re-review O7) */
  .stage .dash { box-shadow: var(--shadow-window); }
  .page-stage.stage-phone .caption { text-align: center; }
}
.statement { background: var(--ground); padding: clamp(64px, 7vw, 104px) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.statement-line { font-family: var(--font-display); font-size: clamp(1.875rem, 3.4vw, 3rem); line-height: 1.12; letter-spacing: -0.03em; text-align: center; color: var(--ink); text-wrap: balance; max-width: 22em; margin: 0 auto; }
.head-split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.head-split > div { padding-top: 0.35em; }
.head-split .lead { margin-top: 0; }

/* the "on this page" row under a head: one sticky row; it scrolls sideways on phones, never wraps (design review M8) */
.jump { position: sticky; top: 68px; z-index: 15; border-bottom: 1px solid var(--line); background: var(--ground); }
.jump ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: nowrap; gap: var(--s6); overflow-x: auto; scrollbar-width: none; }
.jump ul::-webkit-scrollbar { display: none; }
@media (max-width: 900px) { .jump ul { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%); padding: 0 24px; } }
.jump li { flex: none; }
.jump a { color: var(--muted); text-decoration: none; font-size: 1rem; padding: var(--s4) 0 calc(var(--s4) - 2px); display: inline-block; border-bottom: 2px solid transparent; white-space: nowrap; }
.jump a:hover { color: var(--ink); }
.jump a[aria-current="true"] { color: var(--ink); border-bottom-color: var(--ink); }

/* feature rows: copy beside a real window, alternating sides */
.feature { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: center; padding: var(--s9) 0; }
.feature + .feature { border-top: 1px solid var(--line); }
.feature:first-child { padding-top: 0; }
.feature:last-child { padding-bottom: 0; }
.feature.flip .feature-shot { order: -1; }
.feature-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s4); }
.feature h2 { font-family: var(--font-display); font-size: clamp(1.75rem, 2.5vw, 2.375rem); font-weight: 400; letter-spacing: -0.025em; line-height: 1.12; text-wrap: balance; }
.feature-copy > p { margin-top: var(--s4); color: var(--muted); max-width: 34rem; }
.feature-copy > p:first-of-type { margin-top: var(--s5); }
.tag { color: var(--muted); font-size: 1rem; white-space: nowrap; }
.ticks { list-style: none; margin: var(--s5) 0 0; padding: 0; color: var(--muted); font-size: var(--text-small); max-width: 34rem; }
.ticks li { position: relative; padding: var(--s2) 0 var(--s2) 22px; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: 0.95em; width: 10px; height: 2px; background: var(--subtle); }
.feature-shot { margin: 0; }
.feature-shot .window { box-shadow: var(--shadow-window); }
.feature-shot.narrow .window { max-width: 400px; margin: 0 auto; }

/* wide rows: an 8/12 shot column, so a 792-CSS-px settings capture shows at 93 % (one scale rule) */
.feature.wide { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
.feature.wide.flip { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
.feature.wide .feature-shot > .window { max-width: 792px; margin: 0 auto; }

.feature-shot .shot-thread { max-width: 520px; margin: 0 auto; box-shadow: var(--shadow-window); }
.feature-shot .caption { text-align: center; }

.section-surface .feature + .feature { border-top-color: var(--line-strong); }

/* hairline trio: three short points side by side (no cards) */
.trio { list-style: none; margin: var(--s8) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line-strong); }
.trio li { padding: var(--s6) clamp(16px, 2.4vw, 36px) 0; color: var(--muted); }
.trio li:first-child { padding-left: 0; }
.trio li + li { border-left: 1px solid var(--line); }
.trio strong { display: block; color: var(--ink); font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; letter-spacing: -0.015em; line-height: 1.2; margin-bottom: var(--s3); }

/* full comparison table (pricing) */
.compare-wrap { position: relative; margin-top: var(--s8); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.compare { width: 100%; min-width: 680px; border-collapse: collapse; font-size: var(--text-small); }
.compare caption { text-align: left; color: var(--subtle); font-size: 0.9375rem; padding-bottom: var(--s4); }
.compare th, .compare td { padding: var(--s4) var(--s4); border-bottom: 1px solid var(--line); text-align: center; vertical-align: top; color: var(--muted); }
.compare th[scope="row"] { text-align: left; font-weight: 400; color: var(--ink); width: 40%; }
.compare thead th:not(:first-child), .compare td { width: 20%; }
.compare thead th { position: sticky; top: 0; z-index: 1; background: var(--surface); border-bottom: 1px solid var(--line-strong); vertical-align: bottom; text-align: center; padding-top: var(--s5); }
.compare thead th:first-child { text-align: left; }
.compare thead .plan-name { display: block; font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; color: var(--ink); letter-spacing: -0.01em; }
.compare thead .mono { color: var(--subtle); font-size: 0.9375rem; }
.compare .is-featured { box-shadow: inset 0 2px 0 var(--ink); }
.compare tbody .group th { text-align: left; background: var(--field-raised); color: var(--ink); font-weight: 600; padding-top: var(--s3); padding-bottom: var(--s3); border-bottom: 0; }
.compare svg { width: 20px; height: 20px; color: var(--ink); vertical-align: -4px; }
.compare .no { color: var(--subtle); }
.compare td small { display: block; color: var(--subtle); font-size: 0.9375rem; line-height: 1.45; margin-top: 2px; }

/* long-form reading: docs, legal, install guides */
/* reading measure: about 68-72 characters (Libre Franklin's '0' is wide, so 68ch ran ~90 characters; design review M10) */
.prose { max-width: 36em; color: var(--muted); }
.prose > * + * { margin-top: var(--s4); }
.prose h2 { font-family: var(--font-display); font-size: clamp(1.625rem, 2.2vw, 2rem); font-weight: 400; letter-spacing: -0.02em; line-height: 1.15; color: var(--ink); margin-top: var(--s8); scroll-margin-top: 0; }
.prose h3 { font-family: var(--font-body); font-size: 1.25rem; font-weight: 600; color: var(--ink); margin-top: var(--s6); line-height: 1.3; scroll-margin-top: 0; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li + li { margin-top: var(--s2); }
.prose li::marker { color: var(--subtle); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a:not(.btn) { color: var(--link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose a:not(.btn):hover { text-decoration-thickness: 2px; }
.prose table { width: 100%; border-collapse: collapse; font-size: 1rem; display: block; overflow-x: auto; }
.prose th, .prose td { text-align: left; padding: var(--s3) var(--s4) var(--s3) 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { color: var(--ink); font-weight: 600; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: var(--s7) 0; }
.prose dl > div { padding: var(--s4) 0; border-top: 1px solid var(--line); }
.prose dt { color: var(--ink); font-weight: 600; }
.prose dd { margin: var(--s1) 0 0; }
.prose .small, .prose small { font-size: 0.9375rem; color: var(--subtle); }
code { font-family: var(--font-mono); font-size: 0.875em; background: var(--surface); color: var(--ink); padding: 2px 6px; border-radius: var(--r-sm); overflow-wrap: anywhere; }
pre.code { margin: 0; background: var(--deep); color: var(--on-deep); border-radius: var(--r-sm); padding: var(--s5); overflow-x: auto; font-family: var(--font-mono); font-size: 0.875rem; line-height: 1.6; white-space: pre; }
pre.code code { background: none; color: inherit; padding: 0; font-size: inherit; overflow-wrap: normal; }
.prose pre.code { margin-top: var(--s5); }

/* docs layout: a sticky table of contents beside the reading column */
.docs { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.toc { position: sticky; top: 100px; }
.toc p { font-weight: 600; color: var(--ink); font-size: 1rem; }
.toc ul { list-style: none; margin: var(--s3) 0 0; padding: 0; border-left: 1px solid var(--line-strong); }
.toc a { display: block; padding: 6px 0 6px var(--s4); color: var(--muted); text-decoration: none; font-size: 1rem; line-height: 1.4; }
.toc a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

/* the install guides: one row per site builder */
.guide { padding: var(--s7) 0; border-top: 1px solid var(--line); scroll-margin-top: 0; }
.guide:first-of-type { border-top: 0; padding-top: 0; }
.guide h2 { margin-top: 0; }

/* forms (demo request, partner application) */
.form { display: grid; gap: var(--s4); max-width: 34rem; }
.form label { display: grid; gap: var(--s2); color: var(--ink); font-weight: 600; font-size: 1.0625rem; }
.form label .opt { font-weight: 400; color: var(--subtle); }
.form label .label-text { display: block; }

 .form-gap { margin-top: var(--s6); }
.form input, .form textarea {
  width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--paper); color: var(--ink); font: 400 1.0625rem/1.4 var(--font-body);
  transition: border-color 0.2s var(--ease-out);
}
.form textarea { min-height: 112px; resize: vertical; }
.form input:hover, .form textarea:hover { border-color: var(--subtle); }
.form input:focus-visible, .form textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--ink); }
.form ::placeholder { color: var(--subtle); }
.form .btn { justify-self: start; margin-top: var(--s2); }
.form-note { color: var(--subtle); font-size: 0.9375rem; }
.form-sent { padding: var(--s5) 0; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); max-width: 34rem; }
.form-sent strong { display: block; font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; color: var(--ink); }
.form-sent p { margin-top: var(--s2); color: var(--muted); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* two-up split used by get-started, partners, about */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.split-even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.split h2 + .lead, .split h2 + p { margin-top: var(--s5); }

/* numbers that are data (partner earnings, plan limits) */
.figures { list-style: none; margin: var(--s7) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line-strong); }
.figures li { padding: var(--s6) clamp(16px, 2.4vw, 36px) 0; color: var(--muted); }
.figures li:first-child { padding-left: 0; }
.figures li + li { border-left: 1px solid var(--line); }
.figures b { display: block; font-family: var(--font-display); font-weight: 400; font-size: clamp(2.5rem, 3.6vw, 3.25rem); line-height: 1; letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; margin-bottom: var(--s3); }
.figures .figure-label { display: block; color: var(--ink); font-weight: 600; margin-bottom: var(--s2); }

/* plan list on the pricing page sits on paper, not mist */
.plans-page { margin-top: 0; }
.plan .plan-for { color: var(--ink); font-weight: 600; }
.plan .plan-note { color: var(--subtle); font-size: 0.9375rem; }

/* legal pages: the restyled policy text */
.legal-meta { color: var(--on-field-2); margin-top: var(--s4); font-size: 1.0625rem; max-width: 40em; }

@media (max-width: 900px) {
  .feature, .feature.wide, .feature.wide.flip, .head-split, .docs, .split, .split-even { grid-template-columns: minmax(0, 1fr); }
  .feature.flip .feature-shot { order: 0; }
  .feature { padding: var(--s8) 0; }
  .toc { position: static; }
  .toc ul { display: flex; flex-wrap: wrap; gap: 0 var(--s4); border-left: 0; }
  .toc a { padding-left: 0; }
  .trio, .figures{ grid-template-columns: minmax(0, 1fr); }
  .trio li, .figures li { padding: var(--s5) 0; }
  .trio li + li, .figures li + li { border-left: 0; border-top: 1px solid var(--line); }
  
}
@media (max-width: 640px) {
  
  .page-head .hero-ctas .btn { flex: 1 1 auto; }
  .feature-shot .shot-thread { max-width: 340px; }
  .jump ul { gap: var(--s5); }
}
.after-stage-jump { margin-top: calc(var(--overlap) + var(--s7)); border-top: 1px solid var(--line); }

/* legal / policy text carried over word for word: its own small vocabulary */

.legal-body .tile { padding: var(--s5) var(--s5) var(--s5) 0; border-bottom: 1px solid var(--line); }
.legal-body .tile h3 { margin: 0; font-size: 1.125rem; }
.legal-body .tile p { margin-top: var(--s2); font-size: var(--text-small); }

.legal-body .callout { background: var(--surface); border-radius: var(--r); padding: var(--s5); }
.legal-body .plan-tag { font-family: var(--font-mono); font-size: var(--text-label); font-weight: 400; margin-left: var(--s2); }
.legal-body dl { margin: 0; }
.legal-body dl > div:last-child { border-bottom: 1px solid var(--line); }
.legal-body .cookie-table { font-size: 1.0625rem; }
.legal-body .footer-link-btn { color: var(--link); }

@media print {
  .nav, .footer, .skip, .consent-banner, .consent-toast { display: none !important; }
  .hero { background: none !important; color: var(--ink) !important; }
  .hero h1, .hero .lead, .page-head .legal-meta, .page-head .crumb { color: var(--ink) !important; }
  .page-head { padding: 0 0 var(--s5); }
  .section { padding: var(--s5) 0; }
  body { font-size: 11pt; }
}
/* the plan switch: phones only, with JS; without JS the table scrolls sideways in its own region */
.compare-switch { display: none; }
@media (max-width: 760px) {
  .js .compare-switch { display: inline-flex; margin-top: var(--s7); border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: 3px; background: var(--paper); }
  .js .compare-switch button { font: 600 1rem/1 var(--font-body); color: var(--muted); background: none; border: 0; border-radius: var(--r-sm); padding: 12px 18px; min-height: 44px; cursor: pointer; }
  .js .compare-switch button[aria-pressed="true"] { background: var(--btn); color: var(--btn-ink); }
  .js .compare-wrap { margin-top: var(--s5); }
  .js .compare { min-width: 0; }
  .js .compare-wrap[data-show="free"] .compare tr > :nth-child(3), .js .compare-wrap[data-show="free"] .compare tr > :nth-child(4),
  .js .compare-wrap[data-show="pro"] .compare tr > :nth-child(2), .js .compare-wrap[data-show="pro"] .compare tr > :nth-child(4),
  .js .compare-wrap[data-show="premium"] .compare tr > :nth-child(2), .js .compare-wrap[data-show="premium"] .compare tr > :nth-child(3) { display: none; }
  .js .compare .group th[colspan] { display: table-cell !important; }
  .js .compare th[scope="row"] { width: 52%; }
  .js .compare td { width: 48%; text-align: left; }
  .js .compare thead th:not(:first-child) { text-align: left; width: 48%; }
}
/* pricing: the plans themselves cross the head's bottom edge (design review H4) */
.page-head.has-lift { padding-bottom: calc(var(--s10) + var(--s6)); }
.plans-lift-section { padding-top: 0; }
.plans-lift { margin-top: calc(-1 * var(--s10)); position: relative; z-index: 2; background: var(--paper); border-top: 0; border-radius: var(--r); box-shadow: var(--shadow-window); overflow: hidden; }
.plans-lift .plan-featured { background: var(--paper); box-shadow: inset 0 2px 0 var(--ink); }
.plans-lift .plan + .plan { border-left-color: var(--line); }
@media (max-width: 900px) { .plans-lift .plan, .plans-lift .plan-featured { padding-left: var(--s5); padding-right: var(--s5); } }

.feature-shot.narrow .window:has(img[src*="video-card"]) { max-width: 324px; }

/* the chat panel keeps its own 14px corner (the widget's), so the frame follows the screenshot's edge instead of cutting
   inside it (design re-review M7) */
.duo .window, .stage .window.chat { border-radius: 14px; }

/* phones: one chat at a time with a working language switch, instead of two near-identical tall panels (N16) */
.duo-switch { display: none; }
@media (max-width: 640px) {
  .js .duo-switch { display: flex; justify-content: center; width: max-content; margin: var(--s7) auto 0; border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: 3px; background: var(--paper); }
  .js .duo-switch button { font: 600 1rem/1 var(--font-body); color: var(--muted); background: none; border: 0; border-radius: var(--r-sm); padding: 12px 18px; min-height: 44px; cursor: pointer; }
  .js .duo-switch button[aria-pressed="true"] { background: var(--btn); color: var(--btn-ink); }
  .js .duo { margin-top: var(--s5); }
  .js .duo[data-show="0"] figure:nth-child(2), .js .duo[data-show="1"] figure:nth-child(1) { display: none; }
}

/* ══ fix round 4 (buyer review, 2026-11-07) ══ */

/* footer: the company behind Burt, on every page (C1) */
.footer-company { margin-top: var(--s5); font-style: normal; display: grid; gap: 2px; font-size: 1rem; line-height: 1.55; color: var(--on-deep-2); }
.footer-company a { color: var(--on-deep-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; display: inline-block; padding: 6px 0; }
.footer-company a:hover { color: var(--on-deep); }
/* every footer link is a 44 px tap target (L11) */
.footer-col a, .footer-link-btn { min-height: 40px; display: inline-flex; align-items: center; padding: 4px 0; }
.footer-col { gap: 0; }

/* the tertiary "Try a live demo" link under the hero buttons (H5) */
.hero-demo { margin-top: var(--s3); font-size: 1.0625rem; }
.hero-demo a { color: var(--on-field); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; display: inline-block; padding: 10px 2px; }
.hero-demo a:hover { text-decoration-thickness: 2px; }
.hero-note + .hero-demo { margin-top: 2px; }

/* inline links and footnote markers get a 44 px hit area without moving the text (L11) */
sup.fn a { position: relative; }
sup.fn a::after { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
.link { padding: 10px 0; }

/* booking: our own dialog around the Google appointment page, opened only on a click (M10). Full-screen sheet on phones. */
html.is-locked { overflow: hidden; }
.book-dialog { width: min(760px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 32px); padding: 0; border: 0; border-radius: var(--r); background: var(--paper); color: var(--ink); box-shadow: var(--shadow-window); overflow: hidden; }
.book-dialog::backdrop { background: rgba(31, 29, 26, 0.55); }
.book-dialog[open] { display: flex; flex-direction: column; }
.book-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding: var(--s3) var(--s3) var(--s3) var(--s5); border-bottom: 1px solid var(--line); }
.book-head h2 { font-family: var(--font-display); font-size: 1.5rem; letter-spacing: -0.015em; line-height: 1.2; }
.book-close { flex: none; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--paper); color: var(--ink); cursor: pointer; }
.book-close:hover { border-color: var(--ink); }
.book-close svg { width: 18px; height: 18px; }
.book-frame { display: block; width: 100%; height: min(760px, calc(100vh - 160px)); border: 0; background: var(--paper); }
.book-foot { padding: var(--s3) var(--s5); border-top: 1px solid var(--line); font-size: 0.9375rem; color: var(--subtle); }
.book-foot a { color: var(--link); }
@media (max-width: 640px) {
  .book-dialog { width: 100vw; height: 100dvh; max-height: none; max-width: none; margin: 0; border-radius: 0; }
  .book-frame { flex: 1; height: auto; min-height: 0; }
}

/* the founder on /about (C1): an owner-supplied photograph, captioned */
.founder { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: start; }
.founder-photo { margin: 0; }
.founder-photo img { width: 280px; height: auto; border-radius: var(--r); background: var(--surface); }
.founder-photo figcaption { margin-top: var(--s3); color: var(--subtle); font-size: 0.9375rem; }

@media (max-width: 640px) {
  .founder { grid-template-columns: minmax(0, 1fr); }
  .founder-photo img { width: 220px; }
  
}

/* contact options (contact, get-started): hairline rows, never cards */
.reach { list-style: none; margin: var(--s6) 0 0; padding: 0; border-top: 1px solid var(--line-strong); }
.reach li { padding: var(--s4) 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--s4); align-items: baseline; }
.reach strong { color: var(--ink); font-weight: 600; }
.reach span { color: var(--muted); }
@media (max-width: 640px) { .reach li { grid-template-columns: minmax(0, 1fr); gap: 2px; } }

/* "What if Burt gets it wrong?" (H7): blunt questions as headings, plain answers */
.fears { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 5vw, 72px); margin-top: var(--s7); border-top: 1px solid var(--line-strong); }
.fears > div { padding: var(--s6) 0; border-bottom: 1px solid var(--line); }
.fears h3 { font-family: var(--font-display); font-size: clamp(1.375rem, 1.8vw, 1.625rem); font-weight: 400; letter-spacing: -0.015em; line-height: 1.2; color: var(--ink); }
.fears p, .fears ul { margin-top: var(--s3); color: var(--muted); }
.fears ul { padding-left: 1.2em; }
.fears li + li { margin-top: var(--s1); }
.fears .small { font-size: 0.9375rem; color: var(--subtle); }
@media (max-width: 900px) { .fears { grid-template-columns: minmax(0, 1fr); } }

/* a linked product screen reads as a link (M15) */

/* the 404 page */
.nf { padding-top: clamp(64px, 10vw, 140px); padding-bottom: clamp(64px, 10vw, 140px); }
.nf h1 { margin: 0; text-align: left; font-size: var(--h1); line-height: 1.04; letter-spacing: -0.035em; max-width: 14em; }
.nf .lead { margin-top: var(--s5); }
.nf ul { list-style: none; margin: var(--s6) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s6); }

/* the code snippet on /install wraps on phones instead of scrolling sideways (L15) */
@media (max-width: 640px) { pre.code.wrap { white-space: pre-wrap; overflow-wrap: anywhere; } }
.copy-btn { margin-top: var(--s3); }

/* the header on narrow phones: the start button shortens so the menu button never runs off the edge (M12) */
@media (max-width: 380px) {
  .nav-row { gap: var(--s3); }
  .nav-end { gap: var(--s2); }
  .nav-end .btn { padding: 0 12px; font-size: 0.9375rem; }
  .brand { font-size: 1.375rem; gap: 8px; }
  .brand svg { width: 28px; height: 28px; }
}

/* tablets: a softer shadow under the hero screens, so no ghost band shows behind the facts row (L13) */
@media (max-width: 1100px) { .stage .dash, .stage .chat { box-shadow: var(--shadow-window); } }
.notes a { display: inline-block; padding: 12px 6px; margin: -12px 0; }

/* the two co-founders on /about: same 4:5 crop, side by side, each with name, role and a one-line bio */
.founders { display: grid; grid-template-columns: repeat(2, minmax(0, 280px)); gap: clamp(24px, 4vw, 64px); margin-top: var(--s7); }
.founder-card { margin: 0; }
.founder-card img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r); background: var(--surface); }
.founder-card figcaption { margin-top: var(--s4); display: grid; gap: 2px; }
.founder-card strong { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; letter-spacing: -0.015em; color: var(--ink); }
.founder-role { color: var(--ink); font-weight: 600; font-size: 1rem; }
.founder-bio { margin-top: var(--s2); color: var(--muted); font-size: var(--text-small); }

.founder-pair { display: grid; grid-template-columns: repeat(2, 132px); gap: var(--s4); align-content: start; }
.founder-pair img { width: 132px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r); }
.founder-pair span { display: block; margin-top: var(--s2); font-size: 0.9375rem; color: var(--muted); text-wrap: balance; }
.founder-pair figcaption { grid-column: 1 / -1; }
@media (max-width: 640px) { .founders { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); } .founder-card strong { font-size: 1.25rem; } }

/* ══ /install redesign (owner 2026-11-07: "so overly complicated") ══ */
/* the three steps reuse .trio; inline UI names read as ink */
.install-steps .trio { margin-top: var(--s7); }
.install-steps .trio b { color: var(--ink); font-weight: 600; }
/* the example snippet, shown once, with a working Copy button */
/* the hero's artifact: the example snippet itself, sitting inside the stone band (no window, no overlap) */
.head-side-snippet { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; }
.head-side-snippet .head-side-copy { padding-bottom: 0; }
.snippet { max-width: 44rem; }
.hero-snippet { justify-self: end; width: 100%; max-width: 30rem; }
.hero-snippet pre.code { font-size: 0.875rem; padding: var(--s5); }
.hero-snippet .snippet-foot p { color: var(--on-field-2); }
.snippet pre.code { white-space: pre-wrap; overflow-wrap: anywhere; }
.snippet-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); margin-top: var(--s4); }
.snippet-foot p { flex: 1 1 22rem; color: var(--subtle); font-size: 0.9375rem; line-height: 1.5; }
.snippet .copy-btn { margin-top: 0; min-width: 7rem; }

/* three ways to get it on the site: hairline columns, each ending on its action */
.ways { list-style: none; margin: var(--s7) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line-strong); }
.ways li { display: flex; flex-direction: column; align-items: flex-start; padding: var(--s6) clamp(16px, 2.4vw, 36px) 0; color: var(--muted); }
.ways li:first-child { padding-left: 0; }
.ways li + li { border-left: 1px solid var(--line-strong); }
.ways h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; letter-spacing: -0.015em; line-height: 1.2; color: var(--ink); }
.ways h3 .tag { display: block; margin: var(--s2) 0 0; font-family: var(--font-body); font-size: 1rem; letter-spacing: 0; white-space: normal; }
.ways p { margin-top: var(--s3); }
.ways b { color: var(--ink); font-weight: 600; }
.ways .link { margin-top: var(--s2); }

/* the platform picker: with JS a tablist beside one panel (vertical on desktop, wrapping buttons on phones);
   without JS the tablist is not shown and every platform's steps stack */
.picker { scroll-margin-top: 96px; }
.picker-side .lead { margin-top: var(--s4); }
.picker-panels { margin-top: var(--s7); }
.picker-tabs { display: none; }
.picker-panel + .picker-panel { margin-top: var(--s7); padding-top: var(--s7); border-top: 1px solid var(--line); }
.picker-panel .picker-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 2vw, 1.75rem); letter-spacing: -0.015em; }
.picker-panel ol li::marker { color: var(--muted); font-weight: 600; }
.js .picker { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.js .picker-tabs { display: flex; flex-direction: column; gap: 4px; margin-top: var(--s6); max-width: 18rem; }
.js .picker-panels { margin-top: 0; padding-top: var(--s2); }
.js .picker-tabs button {
  font: 600 1.0625rem/1.25 var(--font-body); color: var(--muted); text-align: left; background: transparent;
  border: 1px solid transparent; border-radius: var(--r-sm); padding: 11px 16px; min-height: 44px; cursor: pointer;
  transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.js .picker-tabs button:hover { color: var(--ink); background: var(--surface); }
.js .picker-tabs button[aria-selected="true"] { background: var(--btn); color: var(--btn-ink); }
.js .picker-panel { display: none; }
.js .picker-panel.is-active { display: block; }
.js .picker-panel + .picker-panel { margin-top: 0; padding-top: 0; border-top: 0; }
.js .picker-panel .picker-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.js .picker-panel > .picker-title + * { margin-top: 0; }
.picker-panel:focus-visible { outline-offset: 8px; }
@media (max-width: 900px) {
  .js .picker { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
  .head-side-snippet { grid-template-columns: minmax(0, 1fr); gap: var(--s7); }
  .hero-snippet { justify-self: stretch; max-width: none; }
  .js .picker-tabs { flex-direction: row; flex-wrap: wrap; gap: var(--s2); max-width: none; }
  .js .picker-panels { padding-top: 0; }
  .js .picker-tabs button { border-color: var(--line-strong); background: var(--paper); color: var(--ink); padding: 10px 14px; font-size: 1rem; }
  .js .picker-tabs button[aria-selected="true"] { border-color: var(--btn); }
  .ways { grid-template-columns: minmax(0, 1fr); }
  .ways li { padding: var(--s5) 0; }
  .ways li + li { border-left: 0; border-top: 1px solid var(--line-strong); }
}
@media (prefers-reduced-motion: reduce) { .js .picker-tabs button { transition: none; } }

/* this page is a quick scan: tighter section rhythm than the long marketing pages */
.install .section { padding: clamp(64px, 7vw, 104px) 0; }

/* "Chat not showing up?" reuses the FAQ accordion */
.faq-lead { margin-top: var(--s5); }
.help-more { margin-top: var(--s5); color: var(--muted); font-size: 1.0625rem; }

/* ══ simplification pass (owner 2026-11-07: "make all the simplification changes") ══ */
/* the quick-scan rhythm the /install page set, on the sales pages too */
.tight .section { padding: clamp(64px, 7vw, 104px) 0; }
.tight .section.slim { padding: clamp(48px, 5vw, 72px) 0; }
/* the section right under the home hero's stage: the stage hangs into it by the overlap */
.tight .section.after-stage-tight { padding-top: calc(var(--overlap) + clamp(64px, 7vw, 104px)); }

.tight .section.plans-lift-section { padding-top: 0; }

/* a real screen cropped to the part that tells the story (one scale rule: cropped, never shrunk); the cut edge fades */
.window.crop::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 64px; pointer-events: none; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--paper)); }

.crop-phone { max-height: 600px; }
.crop-widget { max-height: 440px; }
.crop-thread { max-height: 600px; }
.crop-kb { max-height: 600px; }
.window.chat-window { border-radius: 14px; }
.shot { margin: 0; }
.shot .window { box-shadow: var(--shadow-window); }
.shot .window.phone-frame { box-shadow: var(--shadow-window), 0 0 0 8px var(--deep); }
.shot-center { justify-self: center; }
.shot-center .window { margin: 0 auto; }
.shot-center .caption { text-align: center; }

.shot .window.chat-window { width: 400px; max-width: 100%; }
.shot .window.crop-thread { width: 520px; max-width: 100%; }

/* home "How Burt works": three short steps beside one screen */
.how-simple { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-strong); }
.steps li { padding: var(--s5) 0; border-bottom: 1px solid var(--line-strong); color: var(--muted); }
.steps strong { display: block; color: var(--ink); font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; letter-spacing: -0.015em; line-height: 1.2; margin-bottom: var(--s2); }

/* copy beside one screen (home takeover and Spanish) */
.duo-row { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.duo-row-copy .lead { margin-top: var(--s5); }
.duo-row-copy .ticks { margin-top: var(--s5); }

/* the one price line on home */
.price-strip { text-align: center; }
.price-row { list-style: none; margin: var(--s6) auto 0; padding: 0; display: flex; justify-content: center; flex-wrap: wrap; }
.price-row li { display: grid; justify-items: center; align-content: start; gap: 2px; padding: 0 clamp(20px, 4vw, 56px); }
.price-row li + li { border-left: 1px solid var(--line-strong); }
.price-row span { color: var(--ink); font-weight: 600; }
.price-row b { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.5rem, 3.6vw, 3.25rem); line-height: 1.05; letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.price-row .unit { color: var(--subtle); font-weight: 400; font-size: 1rem; }
.price-strip-note { margin-top: var(--s5); color: var(--muted); }
.price-strip .link { display: inline-block; margin-top: var(--s2); }

/* a plan limit at the start of a line: a small body-face chip, never in a heading */
.chip { display: inline-block; margin-right: var(--s2); padding: 3px 8px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--paper); color: var(--ink); font: 600 0.9375rem/1.3 var(--font-body); white-space: nowrap; vertical-align: 1px; }

/* a small disclosure for fine print (texting rules) and the pricing feature table */
.disclose { margin-top: var(--s5); max-width: 34rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.disclose summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--s4); min-height: 48px; color: var(--ink); font-weight: 600; font-size: var(--text-small); }
.disclose summary::-webkit-details-marker { display: none; }
.disclose summary svg { width: 18px; height: 18px; flex: none; color: var(--muted); transition: transform 0.3s var(--ease-out); }
.disclose[open] summary svg { transform: rotate(45deg); }
.disclose .disclose-body { padding: 0 0 var(--s4); color: var(--muted); font-size: var(--text-small); }
.disclose .disclose-body p + p { margin-top: var(--s2); }

/* a flipped feature keeps the wide column for its screen */
@media (min-width: 901px) { .tight .feature.flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }

.tight .feature-shot .window.crop-kb { max-width: 760px; margin: 0 auto; }

/* product: one Start free between the sections, not a block */
.mid-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s3) var(--s5); padding: var(--s7) 0 0; border-top: 1px solid var(--line); }
.mid-cta p { color: var(--muted); }

/* pricing: the one plain line under the plans, and the feature table behind one disclosure */
.plans-rule { margin-top: var(--s5); max-width: 62ch; color: var(--muted); }
.compare-more { margin-top: var(--s6); }
.compare-more > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: var(--s3); min-height: 48px; padding: 0 var(--s5); border: 1px solid rgba(31, 29, 26, 0.32); border-radius: var(--r-sm); background: var(--paper); color: var(--ink); font: 600 1.0625rem/1 var(--font-body); }
.compare-more > summary::-webkit-details-marker { display: none; }
.compare-more > summary:hover { border-color: var(--ink); }
.compare-more > summary svg { width: 18px; height: 18px; transition: transform 0.3s var(--ease-out); }
.compare-more[open] > summary svg { transform: rotate(45deg); }
.compare-more .compare-wrap { margin-top: var(--s6); }
.compare-more .compare thead th { background: var(--ground); }
.plan-lists { display: none; }
.plan-list + .plan-list { margin-top: var(--s6); }
.plan-list h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; letter-spacing: -0.015em; color: var(--ink); padding-bottom: var(--s3); border-bottom: 1px solid var(--line-strong); }
.plan-list h3 .mono { color: var(--subtle); font-size: 0.9375rem; margin-left: var(--s2); }
.plan-list ul { list-style: none; margin: 0; padding: 0; color: var(--muted); font-size: var(--text-small); }
.plan-list li { position: relative; padding: var(--s2) 0 var(--s2) 22px; border-bottom: 1px solid var(--line); }
.plan-list li::before { content: ""; position: absolute; left: 2px; top: 1.05em; width: 10px; height: 2px; background: var(--subtle); }
@media (max-width: 760px) {
  .compare-more .compare-desktop { display: none; }
  .plan-lists { display: block; margin-top: var(--s6); }
}
@media (prefers-reduced-motion: reduce) { .compare-more > summary svg { transition: none; } }

/* 404: Spanish on its own line, one button, then the links */
.nf .nf-es { margin-top: var(--s2); }
.nf .hero-ctas { justify-content: flex-start; }

/* contact: the two co-founders beside the head */
.head-founders { align-items: end; }
.head-founders .lead { margin-top: var(--s5); }
.head-founders .founder-pair { justify-self: end; }
.head-founders .founder-pair span { color: var(--on-field-2); }
.founder-pair span b { display: block; color: var(--on-field); font-weight: 600; }
@media (max-width: 900px) { .head-founders .founder-pair { justify-self: start; margin-top: var(--s6); } }

/* get started: two choices side by side in hairline columns (the /install "ways" pattern), one button each */
.page-head-short { padding-bottom: var(--s8); }
.choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line-strong); }
.choice { display: flex; flex-direction: column; align-items: flex-start; padding: var(--s6) clamp(16px, 3vw, 48px) 0; }
.choice:first-child { padding-left: 0; }
.choice + .choice { border-left: 1px solid var(--line-strong); }
.choice .lead { margin-top: var(--s4); }
.choice .steps { margin: var(--s5) 0 0; align-self: stretch; }
.choice .steps li { padding: var(--s3) 0; }
.choice .btn { margin-top: var(--s6); }
.choice-note { margin-top: var(--s4); color: var(--muted); }
.help-strip { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s3) var(--s7); color: var(--muted); }
.tight .section.choices-section { padding-top: clamp(48px, 5vw, 72px); }

@media (max-width: 900px) {
  .choices { grid-template-columns: minmax(0, 1fr); }
  .choice, .choice:first-child { padding: var(--s6) 0; }
  .choice + .choice { border-left: 0; border-top: 1px solid var(--line-strong); }
}
@media (max-width: 900px) {
  .how-simple, .duo-row{ grid-template-columns: minmax(0, 1fr); }
  .shot-center { justify-self: stretch; }
}
@media (max-width: 640px) {
  
  .crop-phone { max-height: 540px; }
  .crop-widget { max-height: 420px; }
  .crop-thread { max-height: 520px; }
  .crop-kb { max-height: 520px; }
  .price-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .price-row li { padding: 0 var(--s2); }
}
@media (prefers-reduced-motion: reduce) { .disclose summary svg { transition: none; } }

/* the header's Book a demo: an outline small button beside Start free, wide desktops only (phones keep one button) */
.nav-end .nav-book { display: none; }
@media (min-width: 1320px) { .nav[data-lang="en"] .nav-end .nav-book { display: inline-flex; } .nav[data-lang="en"] .nav-end { gap: var(--s4); } }
/* the Spanish labels are longer: below 1280px the bar's links would run under "Iniciar sesión", so the menu button takes over */
@media (min-width: 901px) and (max-width: 1279px) {
  .nav[data-lang="es"] .nav-links, .nav[data-lang="es"] .nav-login { display: none; }
  .nav[data-lang="es"] .nav-end { margin-left: auto; gap: var(--s3); }
  .nav[data-lang="es"] .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--r-sm); background: transparent; border: 1px solid var(--line-field); color: var(--on-field); cursor: pointer; }
  .nav[data-lang="es"] .nav-toggle svg { width: 20px; height: 20px; }
  .nav[data-lang="es"][data-open="true"] .nav-sheet { display: block; }
}

/* ══ simplification pass B: trust, security, legal, partners, webhooks (owner 2026-11-07) ══ */
/* a list inside a trio column (/trust "What Burt never does") */
.trio li ul { margin: 0; padding-left: 1.15em; }
.trio li ul li { padding: 0; border: 0; }
.trio li ul li + li { margin-top: var(--s2); border: 0; }
.trio-after { margin-top: var(--s6); max-width: 62ch; color: var(--muted); }

/* four short rows in a 2 x 2 hairline grid (/trust "Who can see what people tell Burt") */

.grid2-after { margin-top: var(--s6); max-width: 62ch; color: var(--muted); }

/* "In plain words": the summary box at the top of a policy (/privacy, /terms, /security) */
.summary-box { background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r); padding: var(--s5) var(--s6); }
.summary-box h2 { margin: 0 0 var(--s3); font-family: var(--font-display); font-size: clamp(1.5rem, 2vw, 1.75rem); font-weight: 400; letter-spacing: -0.02em; color: var(--ink); scroll-margin-top: 0; }
.summary-box ul { list-style: none; margin: 0; padding: 0; }
.summary-box li { padding: var(--s3) 0; border-top: 1px solid var(--line); color: var(--muted); }
.summary-box li + li { margin-top: 0; }
.summary-box li b { color: var(--ink); font-weight: 600; }
.summary-box li::marker { content: none; }
.summary-note { margin-top: var(--s4); font-size: var(--text-small); color: var(--subtle); }
.prose .summary-box + .summary-note { margin-top: var(--s3); }
@media (max-width: 640px) { .summary-box { padding: var(--s4) var(--s5); } }

/* the table of contents: sticky beside the text on desktop, one closed "On this page" row on phones */
.toc-mobile { display: none; }
@media (max-width: 900px) {
  .docs > .toc { display: none; }
  .toc-mobile { display: block; margin-bottom: var(--s6); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .toc-mobile summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; min-height: 48px; color: var(--ink); font-weight: 600; }
  .toc-mobile summary::-webkit-details-marker { display: none; }
  .toc-mobile summary svg { width: 18px; height: 18px; color: var(--muted); transition: transform 0.3s var(--ease-out); }
  .toc-mobile[open] summary svg { transform: rotate(45deg); }
  .toc-mobile ul { list-style: none; margin: 0; padding: 0 0 var(--s4); }
  .toc-mobile a { display: block; padding: 10px 0; color: var(--muted); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
}
@media (prefers-reduced-motion: reduce) { .toc-mobile summary svg { transition: none; } }

/* policy tables become stacked cards on phones, instead of scrolling sideways */
@media (max-width: 640px) {
  .legal-body .cookie-table { display: block; overflow: visible; }
  .legal-body .cookie-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .legal-body .cookie-table tbody, .legal-body .cookie-table tr { display: block; }
  .legal-body .cookie-table tr { padding: var(--s3) 0; border-top: 1px solid var(--line-strong); }
  .legal-body .cookie-table td { display: block; border: 0; padding: 2px 0; }
  .legal-body .cookie-table td[data-label]::before { content: attr(data-label) ": "; color: var(--ink); font-weight: 600; }
}

/* security details: the controls list, sub-rows, and the print button */
.overview dd ul { margin-top: var(--s2); }
.overview .sub { margin-top: var(--s3); }
.overview .sub b { color: var(--ink); font-weight: 600; }
.security-intro .lead { max-width: 40em; }
.provider-table td:first-child { color: var(--ink); font-weight: 600; white-space: nowrap; }

/* webhooks: the developer half, closed by default */
.dev-list { margin-top: var(--s5); border-top: 1px solid var(--line-strong); }
.dev-list > details { border-bottom: 1px solid var(--line-strong); }
.dev-list > details > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--s4); min-height: 56px; padding: var(--s3) 0; font-family: var(--font-display); font-size: clamp(1.25rem, 1.6vw, 1.5rem); letter-spacing: -0.015em; color: var(--ink); }
.dev-list > details > summary::-webkit-details-marker { display: none; }
.dev-list > details > summary:hover { color: var(--muted); }
.dev-list > details > summary svg { width: 20px; height: 20px; flex: none; color: var(--muted); transition: transform 0.3s var(--ease-out); }
.dev-list > details[open] > summary svg { transform: rotate(45deg); }
.dev-list .dev-body { padding: 0 0 var(--s6); }
.dev-list .dev-body > * + * { margin-top: var(--s4); }
@media (prefers-reduced-motion: reduce) { .dev-list > details > summary svg { transition: none; } }

/* partners: the fine print one tap away under the figures */
.figures-after { margin-top: var(--s6); max-width: 62ch; color: var(--muted); }

@media print {
  .closer, .toc, .toc-mobile, .jump, [data-print] { display: none !important; }
  .docs { display: block; }
  .summary-box { break-inside: avoid; }
}

.page-stage.caption-flow .caption { position: static; margin-top: var(--s3); text-align: center; }
@media (min-width: 901px) { .fears.fears-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.prose .summary-box + dl, .prose .summary-note + h2 { margin-top: var(--s7); }
.plan-list-plus { color: var(--ink); font-weight: 600; font-size: var(--text-small); padding: var(--s3) 0 var(--s2); }
@media (min-width: 901px) and (max-width: 1023px) { .nav[data-lang="en"] .nav-links { gap: 16px; } .nav[data-lang="en"] .nav-links a { font-size: 1rem; } }

/* ══ competitor do-now fixes (owner 2026-11-07) ══ */
/* home: four true facts in the quiet hairline row under the hero stage; each links to its page or /trust row */
.trust-strip { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(4, auto); justify-content: center; align-items: center; }
.trust-strip li { padding: var(--s2) clamp(16px, 3vw, 48px); text-align: center; font-size: clamp(1.0625rem, 1.2vw, 1.25rem); line-height: 1.3; letter-spacing: -0.01em; text-wrap: balance; }
.trust-strip li + li { border-left: 1px solid var(--line-strong); }
.trust-strip a { display: inline-block; max-width: 17em; padding: var(--s2) 0; color: var(--ink); font-weight: 450; text-decoration: underline; text-decoration-color: var(--line-strong); text-decoration-thickness: 1px; text-underline-offset: 6px; transition: text-decoration-color 0.2s var(--ease-out); }
.trust-strip a:hover { text-decoration-color: currentColor; }
@media (max-width: 1100px) {
  .trust-strip { grid-template-columns: repeat(2, minmax(0, 20rem)); row-gap: var(--s3); }
  .trust-strip li:nth-child(3) { border-left: 0; }
}
@media (max-width: 640px) {
  .trust-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; column-gap: var(--s5); row-gap: 0; }
  .trust-strip li, .trust-strip li + li { padding: var(--s2) 0; text-align: left; border-left: 0; border-top: 1px solid var(--line-strong); font-size: var(--text-small); }
}

/* home "Made for law firms": three statements beside the real evidence list */
.pillars { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); align-items: start; margin-top: var(--s7); }
.pillar-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-strong); }
.pillar-list li { padding: var(--s5) 0; border-bottom: 1px solid var(--line-strong); color: var(--muted); }
.pillar-list strong { display: block; color: var(--ink); font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; letter-spacing: -0.015em; line-height: 1.2; margin-bottom: var(--s2); text-wrap: balance; }
.pillar-list .link { display: inline; }
.pillar-shot { justify-self: center; position: sticky; top: calc(68px + var(--s6)); }
.pillar-shot .window { margin: 0 auto; }
.pillar-shot .caption { max-width: 486px; }
@media (max-width: 900px) { .pillars { grid-template-columns: minmax(0, 1fr); } .pillar-shot { position: static; justify-self: center; width: min(486px, 100%); } }

/* home: today vs with Burt, a real table */
.vs { width: 100%; border-collapse: collapse; font-size: var(--text-body); }
.vs caption { text-align: left; color: var(--ink); font-weight: 600; padding-bottom: var(--s3); }
.vs th, .vs td { text-align: left; vertical-align: top; padding: var(--s4) var(--s5) var(--s4) 0; border-bottom: 1px solid var(--line-strong); line-height: 1.4; }
.vs thead th { color: var(--subtle); font-weight: 600; font-size: 0.9375rem; padding-top: 0; padding-bottom: var(--s3); }
.vs tbody th { color: var(--ink); font-weight: 600; width: 28%; }
.vs tbody td { color: var(--muted); width: 36%; }
.vs tbody td:last-child { color: var(--ink); }
.scene-body .vs + .stat-line { margin-top: var(--s6); }
/* phones: each row reads as its label over the two answers, each answer named, instead of three cramped columns */
@media (max-width: 640px) {
  .vs thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .vs tbody, .vs tr { display: block; }
  .vs tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s5); padding: var(--s4) 0; border-bottom: 1px solid var(--line-strong); }
  .vs tr:first-child { border-top: 1px solid var(--line-strong); }
  .vs tbody th { grid-column: 1 / -1; width: auto; padding: 0 0 var(--s2); border: 0; }
  .vs tbody td { width: auto; padding: 0; border: 0; font-size: var(--text-small); }
  .vs td[data-label]::before { content: attr(data-label); display: block; color: var(--subtle); font-size: 0.9375rem; font-weight: 600; }
}

/* home "How Burt works": a short real recording in the phone frame; the poster stands in under reduced motion */
.demo-frame { aspect-ratio: 680 / 1472; }
.demo-frame video, .demo-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.demo-poster { display: none !important; }
.demo-loop .caption { max-width: 360px; margin-left: auto; margin-right: auto; }
.demo-toggle { display: block; width: 340px; max-width: calc(100% - 16px); margin: 0 auto var(--s3); text-align: right; padding: 6px 2px; background: none; border: 0; color: var(--link); font: 600 0.9375rem/1.4 var(--font-body); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.demo-toggle:hover { color: var(--link-hover); }
@media (prefers-reduced-motion: reduce) {
  .demo-video { display: none !important; }
  .demo-poster { display: block !important; }
  .demo-toggle { display: none; }
}

/* /pricing: the four facts under the head line */
.trust-bar { list-style: none; margin: var(--s4) 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s2); color: var(--on-field); font-weight: 600; }
.trust-bar li { position: relative; padding-left: 26px; }
.trust-bar li::before { content: ""; position: absolute; left: 2px; top: 0.45em; width: 12px; height: 7px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }

/* /trust: who can see what, as a real table */
.who-wrap { margin-top: var(--s7); overflow-x: auto; }
.who-table { width: 100%; border-collapse: collapse; }
.who-table th, .who-table td { text-align: left; vertical-align: top; padding: var(--s4) var(--s5) var(--s4) 0; border-bottom: 1px solid var(--line); }
.who-table thead th { border-bottom: 1px solid var(--line-strong); color: var(--subtle); font-size: 0.9375rem; font-weight: 600; padding-top: 0; }
.who-table tbody th { color: var(--ink); font-weight: 600; width: 13rem; }
.who-table tbody td { color: var(--muted); }
.who-table tr { scroll-margin-top: 140px; }
@media (max-width: 640px) {
  .who-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .who-table, .who-table tbody, .who-table tr, .who-table th, .who-table td { display: block; width: auto; }
  .who-table tr { padding: var(--s4) 0; border-bottom: 1px solid var(--line); }
  .who-table th, .who-table td { padding: 0; border: 0; }
  .who-table td { margin-top: var(--s1); }
}

/* /about: on phones the phone ends inside the stone field instead of grazing its edge */
@media (max-width: 900px) {
  .page-head.page-head-side:has(.stage-phone) { padding-bottom: var(--s8); }
  .page-stage.stage-phone { margin-bottom: 0; }
  .page-stage.stage-phone .caption { color: var(--on-field-2); }
  .hero:has(.stage-phone) + main .section.after-stage-tight { padding-top: clamp(64px, 7vw, 104px); }
}

/* home on phones: the recording already shows the product, so the takeover row keeps its copy and drops its screen */
@media (max-width: 640px) { .demo-toggle { width: 300px; } }
@media (max-width: 640px) { #takeover .shot, #intervenir .shot { display: none; } }

/* how it works: the heading + steps are the left column; the phone video starts level with the heading and is exactly
   as tall as that column (owner 2026-11-07). On desktop the figure's parts join the section grid: the frame is
   size-contained so the left column alone sets row 1's height, and its width follows the 680:1472 screen; the caption and
   pause control sit in their own rows under it. Stacked layout below 901px is unchanged. */
.how-copy .section-head { margin-bottom: var(--s6); }
@media (min-width: 901px) {
  .how-simple { grid-template-rows: auto auto auto; row-gap: 0; }
  .how-simple .how-copy { grid-column: 1; grid-row: 1; }
  .how-simple .demo-loop { display: contents; }
  .how-simple .demo-loop .demo-frame { grid-column: 2; grid-row: 1; contain: size; height: 100%; width: auto; max-width: 100%; margin: 0; justify-self: center; }
  .how-simple .demo-loop .caption { grid-column: 2; grid-row: 2; margin: var(--s3) auto 0; }
  .how-simple .demo-loop .demo-toggle { grid-column: 2; grid-row: 3; width: auto; margin: var(--s2) auto 0; text-align: center; }
}