/* sealmerge.com (#424, #438): static, no JS but the contact form's. A plain
   warm page in the style of the best devtool landing pages; glass and the
   Sealmerge Teal glow only behind the hero's merge request and the feature
   visuals. Values from the app's web/src/styles.css, copied rather than
   imported. Light and dark follow the OS; under reduced transparency, more
   contrast or without backdrop-filter every surface is solid. Motion is
   CSS only and off under reduced motion. */

/* Geist Sans and Geist Mono (SIL OFL 1.1, fonts/OFL.txt): the variable
   fonts' Latin subset, from the site's own origin. scripts/site.mjs hashes
   them and rewrites these urls. */
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/geist-sans.19f9c92546.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/geist-mono.684ad5b531.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;
  --page: #f8f6f2;
  --foreground: oklch(0.21 0.006 75);
  --muted-foreground: oklch(0.45 0.008 75);
  --card: oklch(1 0 0);
  --surface: oklch(0.975 0.004 85);
  --border: oklch(0.9 0.004 90);
  --border-strong: oklch(0.83 0.005 90);
  --primary: oklch(0.48 0.1 185);
  --accent: oklch(0.93 0.03 185);
  --button: oklch(0.79 0.11 182);
  --button-foreground: oklch(0.2 0.03 190);
  --control: rgb(255 255 255 / 0.55);
  --destructive: oklch(0.52 0.19 27);
  --success: oklch(0.45 0.12 152);
  --warning: oklch(0.62 0.15 65);
  --diff-added: oklch(0.95 0.05 152);
  --diff-added-gutter: oklch(0.9 0.07 152);
  --diff-removed: oklch(0.95 0.04 25);
  --diff-removed-gutter: oklch(0.9 0.06 25);
  --glow-1: color-mix(in srgb, #5eead4 70%, transparent);
  --glow-2: color-mix(in srgb, #fdba74 62%, transparent);
  --glow:
    radial-gradient(closest-side at 28% 42%, var(--glow-1), transparent),
    radial-gradient(closest-side at 74% 62%, var(--glow-2), transparent);
  --glass-bg: rgb(255 255 255 / 0.45);
  --nav-bg: rgb(248 246 242 / 0.72);
  --glass-border: rgb(255 255 255 / 0.6);
  --glass-blur: blur(24px) saturate(180%);
  --glass-specular:
    0 2px 0 0 rgb(255 255 255 / 0.8) inset, 0 -1px 0 0 rgb(0 0 0 / 0.06) inset;
  --glass-shadow: 0 8px 32px rgb(0 0 0 / 0.1);
  --frame-shadow: 0 24px 64px -24px rgb(16 40 36 / 0.25);
  --ease-settle: cubic-bezier(0.22, 1, 0.36, 1);
  --font:
    "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --mono:
    "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
    "Liberation Mono", monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --page: #161513;
    --foreground: oklch(0.955 0.003 85);
    --muted-foreground: oklch(0.8 0.006 80);
    --card: oklch(0.215 0.004 75);
    --surface: oklch(0.245 0.004 75);
    --border: oklch(1 0 0 / 9%);
    --border-strong: oklch(1 0 0 / 17%);
    --primary: oklch(0.79 0.11 182);
    --accent: oklch(0.29 0.035 185);
    --control: rgb(0 0 0 / 0.15);
    --destructive: oklch(0.73 0.16 25);
    --success: oklch(0.8 0.13 152);
    --warning: oklch(0.8 0.14 75);
    --diff-added: oklch(0.3 0.06 155);
    --diff-added-gutter: oklch(0.35 0.07 155);
    --diff-removed: oklch(0.3 0.07 25);
    --diff-removed-gutter: oklch(0.35 0.08 25);
    --glow-1: color-mix(in srgb, #0d9488 45%, transparent);
    --glow-2: color-mix(in srgb, #b8873b 35%, transparent);
    --glass-bg: rgb(255 255 255 / 0.07);
    --nav-bg: rgb(22 21 19 / 0.7);
    --glass-border: rgb(255 255 255 / 0.12);
    --glass-blur: blur(20px) saturate(160%);
    --glass-specular: 0 1px 0 0 rgb(255 255 255 / 0.2) inset;
    --glass-shadow: 0 12px 40px rgb(0 0 0 / 0.35);
    --frame-shadow: 0 24px 64px -24px rgb(0 0 0 / 0.6);
  }
}

@supports not (backdrop-filter: blur(1px)) {
  :root {
    --glass-bg: var(--card);
    --nav-bg: var(--page);
    --glass-border: var(--border);
    --glass-blur: none;
    --glass-specular: 0 0 #0000;
    --glass-shadow: 0 0 #0000;
    --control: var(--card);
    --glow: none;
  }
}

@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  :root {
    --glass-bg: var(--card);
    --nav-bg: var(--page);
    --glass-border: var(--border);
    --glass-blur: none;
    --glass-specular: 0 0 #0000;
    --glass-shadow: 0 0 #0000;
    --control: var(--card);
    --glow: none;
  }
}

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

body {
  margin: 0;
  min-height: 100vh;
  background: var(--page);
  color: var(--foreground);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}

a:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: 10px;
}

code,
pre {
  font-family: var(--mono);
  font-size: 0.875em;
}

code {
  overflow-wrap: anywhere;
}

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.15;
  font-weight: 600;
}

h1 {
  font-size: clamp(2.375rem, 5.4vw, 4.25rem);
  letter-spacing: -0.04em;
  line-height: 1.04;
  max-width: 19ch;
  text-wrap: balance;
}

h2 {
  font-size: clamp(1.75rem, 3.4vw, 2.625rem);
  letter-spacing: -0.03em;
}

h3 {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  letter-spacing: -0.02em;
}

p {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.skip {
  position: absolute;
  left: -9999px;
}

.skip:focus {
  left: 16px;
  top: 16px;
  z-index: 20;
  padding: 8px 16px;
  background: var(--card);
  border-radius: 9999px;
}

.lead,
.meta,
.aside,
.row-text p {
  color: var(--muted-foreground);
}

/* The nav: a thin sticky bar, plain at the top of the page. Where the
   browser can tell it's stuck (a scroll-state query) it turns glass once
   the page scrolls; elsewhere it stays a plain bar. */
.top {
  position: sticky;
  top: 0;
  z-index: 10;
}

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  min-height: 60px;
  padding: 8px max(24px, calc((100% - 1200px) / 2));
  background: var(--page);
  border-bottom: 1px solid var(--border);
}

@supports (container-type: scroll-state) {
  .top {
    container-type: scroll-state;
  }

  .bar {
    background: transparent;
    border-bottom-color: transparent;
  }

  @container scroll-state(stuck: top) {
    .bar {
      background: var(--nav-bg);
      -webkit-backdrop-filter: var(--glass-blur);
      backdrop-filter: var(--glass-blur);
      border-bottom-color: var(--glass-border);
      box-shadow: var(--glass-shadow);
    }
  }
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 650;
  font-size: 1.125rem;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.top nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.top nav a:not(.button) {
  padding: 8px 12px;
  border-radius: 9999px;
  text-decoration: none;
  font-size: 0.9375rem;
}

.top nav a:not(.button):hover {
  background: var(--accent);
}

.top nav .button {
  margin-left: 8px;
}

/* sealmerge-web's answer page to the form without JS has the bar's brand
   right in the header. */
.top > .brand {
  margin: 16px 24px 0;
}

main {
  display: grid;
  gap: clamp(96px, 12vw, 160px);
  padding: 0 32px clamp(80px, 10vw, 128px);
}

main > section {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/* The hero: a centred promise over the merge request, coded in HTML. */
.hero {
  display: grid;
  justify-items: center;
  gap: clamp(48px, 6vw, 72px);
  padding-top: clamp(56px, 8vw, 112px);
  text-align: center;
}

.hero-text {
  display: grid;
  justify-items: center;
  gap: 24px;
}

.eyebrow {
  color: var(--primary);
  font-weight: 600;
  font-size: 0.9375rem;
}

.lead {
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  max-width: 44ch;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 24px;
  border-radius: 9999px;
  background: var(--button);
  color: var(--button-foreground);
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
}

.button.small {
  min-height: 40px;
  padding: 8px 18px;
  font-size: 0.9375rem;
}

.button:hover {
  background: color-mix(in oklab, var(--button) 88%, black);
}

.button.outline {
  background: var(--control);
  color: var(--foreground);
  border-color: var(--border-strong);
}

.button.outline:hover {
  background: var(--accent);
}

.facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 20px;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

.facts li::before {
  content: "✓";
  margin-right: 6px;
  color: var(--primary);
}

/* Glass and glow only here: behind the hero's merge request and the
   feature visuals. The glow is static radial gradients, no blur filter.
   Only the hero's plate (and the stuck nav) blur: over a soft glow a blur
   shows nothing, so the feature plates are translucent only. */
.visual {
  position: relative;
  isolation: isolate;
  width: 100%;
}

/* The glow bleeds sideways at most into the page's gutter. */
.visual::before {
  content: "";
  position: absolute;
  inset: -12% max(-8%, -32px);
  z-index: -1;
  background: var(--glow);
  pointer-events: none;
}

.plate {
  padding: 10px;
  border-radius: 28px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-specular), var(--glass-shadow);
}

.plate.glass {
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

.hero-visual {
  max-width: 1040px;
}

/* A merge request's Changes tab, GitLab-like in Sealmerge's tokens. */
.mr {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  text-align: left;
  box-shadow: var(--frame-shadow);
  font-size: 0.9375rem;
}

.mr-head {
  display: grid;
  gap: 2px;
  padding: 16px 20px 0;
  border-bottom: 1px solid var(--border);
}

.mr-path {
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}

.mr-ref {
  color: var(--foreground);
  font-weight: 600;
}

.mr-title {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.mr-tabs {
  display: flex;
  gap: 20px;
  margin-top: 10px;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

.mr-tabs span {
  padding-bottom: 8px;
  border-bottom: 2px solid transparent;
}

.mr-tabs .on {
  color: var(--foreground);
  font-weight: 600;
  border-bottom-color: var(--primary);
}

.summary-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  padding: 10px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  font-size: 0.875rem;
}

.summary-bar .who {
  font-weight: 600;
}

.risk,
.sev,
.outcome {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.risk i,
.outcome i {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: var(--destructive);
}

.sev i {
  width: 11px;
  height: 10px;
  background: var(--warning);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.outcome.posted i {
  background: var(--success);
}

.outcome.dropped i {
  background: var(--muted-foreground);
}

.file {
  margin: 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
}

.file-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
  padding: 8px 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.file-head code {
  font-weight: 600;
}

.added {
  color: var(--success);
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 600;
}

/* Diff lines wrap under their code (nothing scrolls or is cut off at
   phone width); the line number keeps its own column. */
.code {
  margin: 0;
  display: grid;
  font-size: 0.8125rem;
  line-height: 1.7;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.ln {
  display: grid;
  grid-template-columns: 4.5ch minmax(0, 1fr);
  padding-right: 14px;
}

.ln i {
  font-style: normal;
  text-align: right;
  padding-right: 1.25ch;
  color: var(--muted-foreground);
}

.ln.add {
  background: var(--diff-added);
}

.ln.add i {
  background: var(--diff-added-gutter);
}

.ln.del {
  background: var(--diff-removed);
}

.ln.del i {
  background: var(--diff-removed-gutter);
}

.hunk {
  padding: 2px 14px;
  background: var(--accent);
  color: var(--foreground);
}

/* Sealmerge's finding, under the line it is about. */
.thread {
  display: grid;
  gap: 8px;
  margin: 10px 14px 12px calc(4.5ch + 14px);
  padding: 14px 16px 16px;
  background: var(--card);
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  font-size: 0.9375rem;
}

.thread-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.handle {
  color: var(--muted-foreground);
  font-size: 0.875rem;
}

.finding-meta {
  display: flex;
  gap: 10px;
  font-size: 0.875rem;
}

.finding-meta span + span {
  color: var(--muted-foreground);
}

.finding-title {
  font-weight: 600;
  font-size: 1rem;
}

.evidence {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}

.suggestion {
  margin-top: 4px;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.suggestion-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 12px;
  padding: 6px 8px 6px 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  font-size: 0.875rem;
  font-weight: 600;
}

.fake-button {
  padding: 4px 14px;
  border-radius: 9999px;
  background: var(--button);
  color: var(--button-foreground);
  font-size: 0.8125rem;
}

/* What Sealmerge posts: rows of text beside a coded visual, sides swapping. */
.features {
  display: grid;
  gap: clamp(48px, 6vw, 80px);
}

.features > h2,
.data > h2,
.ask > h2 {
  text-align: center;
}

.rows {
  display: grid;
  gap: clamp(72px, 9vw, 128px);
}

.row {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-areas: "text visual";
  align-items: center;
  gap: 40px clamp(40px, 6vw, 96px);
}

.row:nth-child(even) {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-areas: "visual text";
}

.row-text {
  grid-area: text;
  display: grid;
  gap: 14px;
  max-width: 28rem;
}

.row-text p {
  font-size: 1.0625rem;
}

.row .visual {
  grid-area: visual;
}

.mini {
  display: grid;
  gap: 14px;
  padding: 20px 22px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 0.9375rem;
  box-shadow: var(--frame-shadow);
}

.mini-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}

.mini-foot {
  color: var(--muted-foreground);
  font-size: 0.875rem;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.reasons,
.checks {
  display: grid;
  gap: 10px;
}

.reasons li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
}

.checks li {
  display: grid;
  grid-template-columns: 1.5em minmax(0, 1fr);
  gap: 4px;
}

.checks .box {
  color: var(--muted-foreground);
}

.checks .done .box {
  color: var(--primary);
}

.by {
  display: block;
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}

.steps {
  counter-reset: step;
  gap: 0;
}

.steps li {
  position: relative;
  display: grid;
  gap: 2px;
  padding: 0 0 18px 40px;
}

.steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 9999px;
  background: var(--accent);
  color: var(--foreground);
  font-size: 0.8125rem;
  font-weight: 600;
}

.steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 12px;
  top: 30px;
  bottom: 4px;
  border-left: 1.5px solid var(--border-strong);
}

.steps .step {
  font-weight: 600;
}

.steps .outcomes {
  padding-bottom: 0;
  gap: 6px;
}

/* Where your code goes: a diagram, your server in the middle. */
.data {
  display: grid;
  gap: 40px;
  justify-items: center;
}

.diagram {
  width: 100%;
  display: grid;
  grid-template-columns:
    minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr)
    minmax(0, 2.4fr);
  align-items: center;
}

.node {
  display: grid;
  gap: 4px;
  padding: 16px 18px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
}

.node strong {
  font-weight: 600;
}

.node span {
  color: var(--muted-foreground);
  font-size: 0.875rem;
}

.node.sealmerge {
  justify-items: start;
  border-color: var(--primary);
}

.outs {
  display: grid;
  gap: 16px;
}

.outs li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  align-items: center;
}

/* An edge: its label over a line with an arrowhead (both ends between
   GitLab and Sealmerge; dashed where nothing goes). */
.edge {
  position: relative;
  padding: 0 14px 10px;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}

.edge::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-top: 1.5px solid var(--border-strong);
}

.edge::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: -4px;
  border: 5px solid transparent;
  border-right: 0;
  border-left: 7px solid var(--border-strong);
}

.edge .back {
  position: absolute;
  left: 0;
  bottom: -4px;
  border: 5px solid transparent;
  border-left: 0;
  border-right: 7px solid var(--border-strong);
}

.edge.none::after {
  border-top-style: dashed;
}

.aside {
  max-width: 60ch;
  text-align: center;
}

/* Questions beside the call to action. */
.ask {
  display: grid;
  gap: 40px;
}

.split {
  display: grid;
  gap: 24px;
  align-items: start;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 960px) {
  .split {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  }
}

.faq {
  display: grid;
  gap: 8px;
}

.faq details {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 0 20px;
}

.faq summary {
  cursor: pointer;
  padding: 16px 0;
  font-weight: 600;
}

.faq details p {
  padding-bottom: 16px;
  color: var(--muted-foreground);
}

.cta {
  border-radius: 28px;
  padding: clamp(24px, 4vw, 40px);
  display: grid;
  gap: 16px;
  background: var(--card);
  border: 1px solid var(--border);
}

.cta h3 {
  font-size: 1.375rem;
}

.cta .actions {
  justify-content: start;
}

/* The contact form (#435): plain controls on the call to action's card,
   translucent like the app's, never blurred. */
.contact {
  display: grid;
  gap: 16px;
}

.contact fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.contact legend,
.contact .field > label {
  font-weight: 600;
  font-size: 0.9375rem;
  padding: 0;
  margin-bottom: 6px;
}

.contact label span {
  font-weight: 400;
  color: var(--muted-foreground);
}

.contact .choice {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 16px;
  border-radius: 9999px;
  background: var(--control);
  border: 1px solid var(--border-strong);
  cursor: pointer;
}

.contact .choice:has(input:checked) {
  background: var(--accent);
  border-color: var(--primary);
}

.contact .field {
  display: grid;
}

.contact input[type="email"],
.contact input[type="text"],
.contact select,
.contact textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 9999px;
  background: var(--control);
  color: var(--foreground);
  border: 1px solid var(--border-strong);
  font: inherit;
}

.contact textarea {
  border-radius: 20px;
  resize: vertical;
}

.contact select option {
  background: var(--card);
  color: var(--foreground);
}

.contact input::placeholder,
.contact textarea::placeholder {
  color: var(--muted-foreground);
}

.contact input:focus-visible,
.contact select:focus-visible,
.contact textarea:focus-visible,
.contact .choice:has(input:focus-visible),
.button:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.contact .choice input:focus-visible {
  outline: 0;
}

.contact [aria-invalid="true"] {
  border-color: var(--destructive);
}

.contact .note,
.failed {
  color: var(--destructive);
  font-size: 0.9375rem;
}

.contact .note {
  flex-basis: 100%;
  margin-top: 4px;
}

.sent {
  font-weight: 600;
}

/* The status and the alert stay in the page (live regions), empty until
   the script fills one. */
.answer {
  display: grid;
  gap: 8px;
}

.answer:has(p:empty + p:empty) {
  margin-top: -16px;
}

/* The honeypot: out of sight and out of the tab order. */
.trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

button.button {
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

button.button:disabled {
  cursor: progress;
  opacity: 0.7;
}

/* sealmerge-web's answer to the form without JS. */
.result {
  max-width: 40rem;
}

.result h1 {
  font-size: clamp(1.5rem, 3.2vw, 2.125rem);
}

.notes {
  display: grid;
  gap: 8px;
  color: var(--destructive);
}

.notes strong {
  color: var(--foreground);
}

.address {
  font-weight: 600;
  color: var(--foreground);
  overflow-wrap: anywhere;
}

.foot {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 32px 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  font-size: 0.875rem;
  color: var(--muted-foreground);
  border-top: 1px solid var(--border);
}

.foot a {
  color: var(--foreground);
}

@media (max-width: 860px) {
  .row,
  .row:nth-child(even) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "text" "visual";
  }

  .diagram,
  .outs li {
    grid-template-columns: minmax(0, 1fr);
  }

  /* The branches hang off one line from Sealmerge: each goes its own way. */
  .outs {
    margin-left: 12px;
    padding-left: 16px;
    border-left: 1.5px solid var(--border-strong);
  }

  .edge {
    padding: 12px 0 12px 28px;
    text-align: left;
  }

  .edge::after {
    left: 12px;
    right: auto;
    top: 0;
    bottom: 0;
    border-top: 0;
    border-left: 1.5px solid var(--border-strong);
  }

  .edge.none::after {
    border-left-style: dashed;
  }

  .edge .back {
    left: 8px;
    top: -2px;
    bottom: auto;
    border: 5px solid transparent;
    border-top: 0;
    border-bottom: 7px solid var(--border-strong);
  }

  .edge::before {
    left: 8px;
    right: auto;
    bottom: -2px;
    border: 5px solid transparent;
    border-bottom: 0;
    border-top: 7px solid var(--border-strong);
  }
}

@media (max-width: 720px) {
  .top nav .section-link {
    display: none;
  }
}

@media (max-width: 640px) {
  .bar {
    padding: 8px 16px;
  }

  main {
    padding: 0 16px 64px;
  }

  .file {
    margin: 10px;
  }

  .visual::before {
    inset: -10% -16px;
  }

  .plate {
    padding: 6px;
    border-radius: 24px;
  }

  .thread {
    margin-left: 10px;
    margin-right: 10px;
  }

  .foot {
    padding: 24px 16px 32px;
  }
}

/* Motion (#438): the finding slides in under its line once, and the
   feature rows rise as they scroll into view where the browser has view
   timelines. Transform and opacity only, so nothing shifts; none at all
   under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .thread {
    animation: slide-in 400ms var(--ease-settle) 200ms backwards;
  }

  @supports (animation-timeline: view()) {
    .row {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 80%;
    }
  }
}

@keyframes slide-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(32px);
  }
}

@media (forced-colors: active) {
  .plate,
  .mr,
  .mini,
  .node,
  .faq details,
  .cta,
  .contact .choice {
    border: 1px solid CanvasText;
  }
}