/* not.bot design system. Implements WEBSITE_FOUNDATION.md §6.
 *
 * Principles encoded here:
 * - Color encodes product identity only: blue = not.bot, green = honest.bot
 *   (reserved). Orange is the single primary-action color. Status is never
 *   color or greying — hierarchy comes from Montserrat weight and size.
 * - Neutrals carry most surfaces (white page, light-grey panels, navy anchor,
 *   dark-grey structure-only). Text is always black or white.
 * - Squint test: a page should read as white + light grey, a navy anchor, and
 *   a few small spots of color.
 *
 * Note: per the strict "text is always black or white" rule, links are black
 * with an underline rather than a brand color. Easy to relax to not.bot blue if
 * we decide links count as an identity accent rather than body text.
 */

/* ---------- Fonts (self-hosted, no third-party requests) ---------- */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/montserrat-400.e66bcd2761.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/montserrat-600.d857325c36.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/montserrat-800.ba826fb84c.woff2") format("woff2");
}

/* ---------- Tokens ---------- */
:root {
  /* Identity + action colors */
  --notbot-blue: #3386fc;
  --honestbot-green: #02bc5f;
  --action: #ff931d;

  /* Neutrals, each with one job (§6) */
  --navy: #262649; /* anchor dark surface (hero band, footer) */
  --grey: #676767; /* structural chrome only: borders, hairlines */
  --light-grey: #ebebed; /* secondary surfaces: panels, code, inputs */
  --white: #ffffff;
  --black: #000000;

  /* Semantic roles */
  --bg-page: var(--white);
  --bg-surface: var(--light-grey);
  --bg-anchor: var(--navy);
  --border: var(--grey);
  --text: var(--black);
  --text-inverse: var(--white);
  --action-label: var(--black); /* black on orange passes WCAG AA */
  --focus-ring: var(--notbot-blue);

  /* Type */
  --font-sans: "Montserrat", Arial, system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --fw-regular: 400;
  --fw-semibold: 600;
  --fw-extrabold: 800;

  /* Modular type scale */
  --step--1: 0.833rem;
  --step-0: 1rem;
  --step-1: 1.2rem;
  --step-2: 1.44rem;
  --step-3: 1.728rem;
  --step-4: 2.074rem;

  /* Spacing */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-s: 0.75rem;
  --space-m: 1rem;
  --space-l: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;

  /* Layout */
  --measure: 70ch;
  --container: 72rem;
  --radius: 6px;
  --hairline: 1px;
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  min-height: 100vh;
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--text);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
}
/* Equal vertical breathing space below the header for every page. */
main {
  padding-block-start: var(--space-xl);
}
img,
svg {
  max-width: 100%;
  display: block;
}
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ---------- Base typography ---------- */
h1,
h2,
h3,
h4 {
  line-height: 1.15;
  font-weight: var(--fw-extrabold);
  text-wrap: balance;
}
h1 {
  font-size: var(--step-4);
}
h2 {
  font-size: var(--step-2);
  margin-top: var(--space-xl);
}
h3 {
  font-size: var(--step-1);
  font-weight: var(--fw-semibold);
  margin-top: var(--space-l);
}
p,
ul,
ol {
  margin-block: var(--space-m);
}
:is(p, li) {
  max-width: var(--measure);
}
a {
  color: var(--text);
  text-underline-offset: 0.15em;
}
a:hover {
  text-decoration-thickness: 2px;
}
.glossary-term {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--border);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  cursor: help;
}
.glossary-term:hover,
.glossary-term:focus-visible,
.glossary-term[aria-expanded="true"] {
  color: var(--text);
  text-decoration-color: var(--action);
  text-decoration-thickness: 1px;
}
.glossary-popover {
  position: fixed;
  z-index: 1000;
  width: min(22rem, calc(100vw - 24px));
  padding: var(--space-s) var(--space-m);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-page);
  color: var(--text);
  box-shadow: 0 14px 36px rgba(20, 28, 45, 0.16);
  font-size: var(--step--1);
  line-height: 1.55;
}
.glossary-popover[hidden] {
  display: none;
}
.glossary-popover__term {
  margin: 0 0 var(--space-2xs);
  font-weight: var(--fw-semibold);
  max-width: none;
}
.glossary-popover__definition {
  margin: 0;
  max-width: none;
}
.glossary-popover__link {
  display: inline-block;
  margin-top: var(--space-xs);
  font-weight: var(--fw-semibold);
}
strong,
b {
  font-weight: var(--fw-semibold);
}
code,
kbd,
pre {
  font-family: var(--font-mono);
}
code {
  background: var(--bg-surface);
  padding: 0.1em 0.35em;
  border-radius: 4px;
  font-size: 0.9em;
}
pre {
  background: var(--bg-surface);
  padding: var(--space-m);
  border-radius: var(--radius);
  overflow-x: auto;
}
pre code {
  background: none;
  padding: 0;
  font-size: var(--step--1);
}
hr {
  border: 0;
  border-top: var(--hairline) solid var(--border);
  margin-block: var(--space-xl);
}

/* ---------- Skip link (a11y) ---------- */
.skip-link {
  position: absolute;
  left: var(--space-s);
  top: -3rem;
  z-index: 30;
  background: var(--navy);
  color: var(--text-inverse);
  padding: var(--space-xs) var(--space-m);
  border-radius: var(--radius);
  transition: top 0.15s ease;
}
.skip-link:focus {
  top: var(--space-s);
}

/* ---------- Header ---------- */
.site-chrome {
  position: sticky;
  top: 0;
  z-index: 20;
}
.site-banner {
  background: var(--action);
  color: var(--action-label);
  border-bottom: var(--hairline) solid rgb(0 0 0 / 0.2);
}
.site-banner__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-s);
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--space-xs) var(--space-l);
  text-align: center;
  font-size: var(--step--1);
  font-weight: var(--fw-semibold);
  line-height: 1.35;
}
.site-banner__inner a {
  color: inherit;
  font-weight: var(--fw-extrabold);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.16em;
}
.site-header {
  border-bottom: var(--hairline) solid var(--border);
  background: var(--bg-page);
}
.site-header__inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-m) var(--space-l);
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--space-m) var(--space-l);
}
.site-header__brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.site-header__brand img {
  height: 3rem;
  width: auto;
  display: block;
}
.site-header__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-m);
  margin-right: auto;
}
.site-header__group {
  position: relative;
}
.site-header__toplink {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  min-height: 3rem;
  text-decoration: none;
  font-weight: var(--fw-semibold);
  color: var(--text);
}
.site-header__group .site-header__toplink::after {
  content: "";
  width: 0.45em;
  height: 0.45em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-0.1em);
}
.site-header__toplink:hover {
  text-decoration: underline;
}
.site-header__menu {
  position: absolute;
  left: 0;
  top: calc(100% - 0.1rem);
  min-width: 18rem;
  display: none;
  gap: var(--space-xs);
  padding: var(--space-s);
  background: var(--bg-page);
  border: var(--hairline) solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 12px 30px rgb(0 0 0 / 0.12);
}
.site-header__group:hover .site-header__menu,
.site-header__group:focus-within .site-header__menu {
  display: grid;
}
.site-header__menu a {
  display: grid;
  gap: 0.15rem;
  padding: var(--space-xs);
  color: var(--text);
  text-decoration: none;
  border-radius: var(--radius);
}
.site-header__menu a:hover {
  background: var(--bg-surface);
}
.site-header__menu span {
  font-size: var(--step--1);
}
.site-header__login {
  color: var(--navy);
  min-height: 3rem;
  display: inline-flex;
  align-items: center;
  padding: var(--space-xs) 0;
  font-weight: var(--fw-semibold);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}
/* No-JS mobile nav toggle: hidden on desktop, where hover/focus drives the
   dropdowns. Shown only below the breakpoint (see the media query). */
.site-header__toggle,
.site-header__hamburger {
  display: none;
}
.site-header__hamburger {
  width: 2.75rem;
  height: 2.75rem;
  margin-left: auto;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}
.site-header__hamburger span {
  display: block;
  width: 1.5rem;
  height: 2px;
  background: var(--text);
}

/* ---------- Footer (navy anchor) ---------- */
.site-footer {
  margin-top: var(--space-2xl);
  padding-block: var(--space-xl);
  background: var(--bg-anchor);
  color: var(--text-inverse);
}
.site-footer__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-l);
  display: grid;
  gap: var(--space-xl);
}
.site-footer__brand {
  display: grid;
  gap: var(--space-m);
}
.site-footer__brand img {
  width: 9rem;
  filter: brightness(0) invert(1);
}
.site-footer__brand p,
.site-footer__fineprint {
  margin: 0;
}
.site-footer__nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: var(--space-l);
}
.site-footer__nav div {
  display: grid;
  align-content: start;
  gap: var(--space-xs);
}
.site-footer__nav h2 {
  margin: 0 0 var(--space-xs);
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.site-footer a {
  color: var(--text-inverse);
}
/* Copyright line + social icons share a baseline row, wrapping on narrow screens. */
.site-footer__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  padding-top: var(--space-l);
  border-top: var(--hairline) solid rgb(255 255 255 / 0.15);
}
.site-footer__social {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-footer__social a {
  display: inline-flex;
  opacity: 0.8;
}
.site-footer__social a:hover {
  opacity: 1;
}

/* ---------- Homepage ---------- */
.home {
  margin-block-start: calc(var(--space-xl) * -1);
}
.home-main {
  position: relative;
}
.home-main > .home-section::after,
.home-main > .home-band--dark::after,
.home > .close-section::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset-block: 0;
  right: 0;
  width: min(7rem, 9vw);
  pointer-events: none;
  background-position: right top;
  background-repeat: repeat-y;
  background-size: 7rem auto;
}
.home-main > .home-section::after {
  background-image: url("/assets/img/patterns/side-light.ae424d7121.svg");
}
.home-main > .home-band--dark::after,
.home > .close-section::after {
  background-image: url("/assets/img/patterns/side-dark.bba43551ba.svg");
}
.home-main .home-section__inner,
.home-main .home-band__inner,
.home > .close-section .home-band__inner {
  z-index: 3;
}
.home-band,
.home-section {
  position: relative;
  overflow: hidden;
}
.home-band--dark {
  background: var(--bg-anchor);
  color: var(--text-inverse);
}
.home-band__inner,
.home-section__inner {
  position: relative;
  z-index: 1;
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--space-2xl) var(--space-l);
}
.home-section--surface {
  background: var(--bg-surface);
}
.home-field {
  position: absolute;
  pointer-events: none;
  background-repeat: no-repeat;
}
.home-field--hero {
  inset-block: 0;
  right: 0;
  width: min(52vw, 70rem);
  background-image: url("/assets/img/patterns/hero-dark.5c9c02e9fe.svg");
  background-position: right center;
  background-size: auto 100%;
  opacity: 0.82;
}
.home-hero__inner {
  min-height: min(38rem, calc(100vh - 5rem));
  display: grid;
  align-items: center;
}
.home-hero__copy {
  max-width: 46rem;
}
.home-hero h1 {
  max-width: 20ch;
  font-size: var(--step-4);
}
.home-hero h1 span {
  display: block;
}
.home-hero p {
  margin-top: var(--space-l);
  max-width: 48ch;
  font-size: var(--step-1);
}
/* LLM invitation band, directly under the hero. The callout idiom promoted
   to a full-width narrow band, accented in brand blue (orange is reserved
   for CTAs); the whole thing is semibold so it reads as deliberate, not
   boilerplate. */
.home-agents {
  background: var(--bg-surface);
}
.home-agents__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--space-l);
  border-left: 4px solid var(--notbot-blue);
  font-weight: var(--fw-semibold);
}
.home-agents h2 {
  margin: 0 0 var(--space-s);
  font-size: var(--step-2);
}
.home-agents p {
  margin: 0;
  max-width: var(--measure);
}
.home-agents p + p {
  margin-top: var(--space-s);
}
.home-agents strong {
  font-weight: var(--fw-extrabold);
}

/* ---------- Homepage hero: threat variant ---------- */
.home-hero--threat .home-hero__copy {
  max-width: 52rem;
}
.home-hero--threat .home-hero__inner {
  min-height: min(40rem, calc(100vh - 5rem));
}
.home-hero--threat h1 {
  max-width: 17ch;
  font-size: clamp(2.45rem, 1.5rem + 3.5vw, 4.15rem);
  line-height: 1.05;
}
.home-hero--threat h1 span {
  white-space: nowrap;
}
.home-hero--threat .hero-warning {
  display: inline-block;
  max-width: 100%;
  margin: var(--space-m) 0 0;
  padding: 0.32em 0.45em 0.36em;
  background: var(--white);
  color: var(--navy);
  font-size: clamp(1.05rem, 0.72rem + 1.45vw, 1.52rem);
  font-weight: var(--fw-extrabold);
  line-height: 1.05;
  white-space: nowrap;
}
.home-hero--threat .hero-warning__line {
  display: inline;
}
.home-hero--threat .hero-warning__line + .hero-warning__line::before {
  content: " ";
}
.home-hero--threat .hero-triad {
  margin-top: var(--space-l);
  max-width: none;
  font-size: clamp(1.3rem, 1.05rem + 1.1vw, 2rem);
  font-weight: var(--fw-semibold);
  color: rgb(255 255 255 / 0.92);
  line-height: 1.22;
}
.home-hero--threat .hero-triad span {
  display: block;
  width: max-content;
  max-width: 100%;
  white-space: nowrap;
}
.home-hero--threat .hero-triad span + br + span {
  margin-top: var(--space-2xs);
}
.home-hero--threat .hero-triad br {
  display: none;
}
.home-hero--threat .hero-warning + .hero-triad {
  margin-top: var(--space-m);
}
.hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-m);
  margin-top: var(--space-xl);
}
.button-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  margin-top: var(--space-l);
  padding: var(--space-s) var(--space-l);
  border-radius: var(--radius);
  background: var(--action);
  color: var(--action-label);
  font-weight: var(--fw-semibold);
  text-decoration: none;
}
.button-primary:hover,
.site-header__login:hover {
  text-decoration: underline;
}
.text-link {
  display: inline-block;
  margin-top: var(--space-l);
  color: var(--notbot-blue);
  font-weight: var(--fw-semibold);
}
.eyebrow {
  margin: 0 0 var(--space-s);
  color: #1862d4;
  font-size: var(--step--1);
  font-weight: var(--fw-extrabold);
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}
.home-section__header {
  max-width: 58rem;
}
.home-section h2,
.home-band h2 {
  margin-top: 0;
  max-width: 22ch;
  font-size: var(--step-3);
}
.feature-grid,
.usecase-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-l);
  margin-top: var(--space-xl);
}
.feature-card,
.usecase-card {
  display: grid;
  align-content: start;
  gap: var(--space-m);
  min-height: 100%;
  padding: var(--space-l);
  border-radius: var(--radius);
  background: var(--bg-surface);
  overflow: hidden; /* clip the bleeding icon band to the card's rounded corners */
}
.home-section--surface .usecase-card,
.home-section--surface .feature-card {
  background: var(--bg-page);
}
.feature-card h3,
.usecase-card h3 {
  margin: 0;
}
.feature-card p,
.usecase-card p {
  margin: 0;
}
.contact-card__email {
  font-weight: var(--fw-semibold);
  font-size: var(--step-1);
  color: var(--notbot-blue);
  text-decoration: none;
  word-break: break-word;
}
.contact-card__email:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}
/* Generated block-field icons are wide bands (viewBox 3:1) that bleed to the
   card edges and spread left/right — see tools/graphics/. aspect-ratio pins the
   band shape regardless of any width/height attrs on the <img>. */
.card-icon {
  width: calc(100% + 2 * var(--space-l));
  /* Override the global `img, svg { max-width: 100% }` reset, which would
     otherwise clamp the bleed width back to 100% and leave the band short of
     the card's right edge (the negative margin still shifts it left). */
  max-width: none;
  height: auto;
  aspect-ratio: 3 / 1;
  margin: calc(-1 * var(--space-l)) calc(-1 * var(--space-l)) 0;
  border-radius: var(--radius) var(--radius) 0 0;
  display: block;
}
/* Homepage verifier catch section. */
.home-section--verifier {
  background: var(--bg-page);
}
.verifier-intro {
  max-width: 58rem;
}
.verifier-intro h2 {
  max-width: 14ch;
}
.verifier-intro p {
  max-width: 46rem;
  margin-top: var(--space-l);
}
.verifier-demo-label {
  margin: var(--space-2xl) 0 0;
  color: var(--navy);
  font-size: var(--step--1);
  font-weight: var(--fw-extrabold);
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}
.verifier-demo {
  display: grid;
  grid-template-columns: minmax(14rem, 19rem) minmax(16rem, 24rem);
  align-items: start;
  gap: var(--space-l);
  margin-top: var(--space-l);
}
.signature-sample {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: var(--space-s);
  max-width: 19rem;
  margin: 0;
  padding: var(--space-m);
  border: var(--hairline) solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-surface);
}
.signature-sample__asset {
  display: block;
  justify-self: center;
  width: min(100%, 13.5rem);
  height: auto;
  border-radius: var(--radius);
  background: var(--white);
}
.signature-sample figcaption {
  max-width: 36rem;
  font-size: var(--step-0);
  line-height: 1.45;
}
.scan-result-sample {
  display: grid;
  justify-items: center;
  gap: var(--space-m);
}
.scan-result-sample__label {
  width: min(100%, 24rem);
  margin: 0;
  font-size: var(--step--1);
  font-weight: var(--fw-semibold);
}
.scan-result-sample__device {
  position: relative;
  width: min(100%, 24rem);
  padding-bottom: 0.45rem;
}
.scan-result-sample__crop {
  position: relative;
  max-height: 32rem;
  overflow: hidden;
  border: 2px solid var(--black);
  border-radius: 2rem 2rem 0 0;
  background: var(--black);
  box-shadow: 0 0.85rem 2rem rgb(38 38 73 / 0.16);
}
.scan-result-sample__crop::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset-inline: 0;
  bottom: 0;
  height: 1.4rem;
  pointer-events: none;
  background: linear-gradient(to bottom, rgb(255 255 255 / 0), rgb(38 38 73 / 0.16));
}
.scan-result-sample__device::after {
  content: "";
  position: absolute;
  left: -0.35rem;
  right: -0.35rem;
  bottom: 0.32rem;
  height: 2px;
  background: var(--black);
  border-radius: 999px;
  box-shadow: 0 0.35rem 0.75rem rgb(38 38 73 / 0.2);
}
.scan-result-sample__crop img {
  display: block;
  width: 100%;
  height: auto;
}
.verifier-proof {
  max-width: 58rem;
  margin-top: var(--space-2xl);
}
.verifier-accordion {
  display: grid;
  gap: var(--space-s);
  max-width: 58rem;
  margin-top: var(--space-xl);
}
.verifier-accordion details {
  border: var(--hairline) solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-surface);
}
.verifier-accordion summary {
  min-height: 3.25rem;
  padding: var(--space-m) var(--space-l);
  cursor: pointer;
  font-weight: var(--fw-extrabold);
  color: var(--black);
}
.verifier-accordion details[open] summary {
  border-bottom: var(--hairline) solid rgb(103 103 103 / 0.35);
}
.verifier-accordion p {
  max-width: none;
  margin: 0;
  padding: var(--space-l);
}
.verifier-cta {
  margin-top: var(--space-xl);
}
.verifier-cta p {
  max-width: 48rem;
  margin-bottom: 0;
  font-size: var(--step-1);
  font-weight: var(--fw-semibold);
}
.app-section__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(12rem, 0.42fr);
  align-items: center;
  gap: var(--space-2xl);
}
.store-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m);
  margin-top: var(--space-l);
}
.store-badge {
  display: block;
  width: 11.25rem;
  text-decoration: none;
}
.store-badge svg {
  width: 100%;
  height: auto;
}
/* §4 phone: clip the empty lower screen so the device bleeds off the bottom */
.app-art {
  justify-self: center;
  align-self: center;
  max-height: 19.5rem;
  overflow: hidden;
}
.app-art img {
  display: block;
  width: 100%;
  max-width: 15rem;
}
/* ---------- Homepage: differentiators ---------- */
.diff-list {
  display: grid;
  gap: var(--space-m);
  max-width: 50rem;
  margin: var(--space-xl) 0 0;
  padding: 0;
  list-style: none;
}
.diff-list li {
  position: relative;
  padding: var(--space-l) var(--space-2xl) var(--space-l) var(--space-l);
  background: var(--bg-page);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: var(--step-2);
  font-weight: var(--fw-semibold);
  line-height: 1.22;
}
/* Signature-code glyph: a small brand-blue pixel cluster dissolving into the
   top-right corner, echoing the hero field and the QR/JAB signature motif. */
.diff-list li::after {
  content: "";
  position: absolute;
  top: var(--space-m);
  right: var(--space-m);
  width: 6px;
  height: 6px;
  background: var(--notbot-blue);
  box-shadow:
    -9px 0 0 var(--notbot-blue),
    0 9px 0 rgb(51 134 252 / 0.45),
    -9px 9px 0 rgb(51 134 252 / 0.22);
}
.diff-cta {
  margin-top: var(--space-2xl);
}
.diff-cta > p {
  margin: 0;
  font-size: var(--step-1);
  font-weight: var(--fw-semibold);
}
.diff-cta__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-l);
}
.diff-cta__links .text-link {
  margin-top: var(--space-m);
}
.close-section {
  text-align: center;
}
.close-section__inner {
  display: grid;
  justify-items: center;
  padding-bottom: var(--space-2xl);
}
.close-section h2 {
  max-width: 24ch;
}
.close-section p {
  max-width: 58ch;
}
@media (max-width: 58rem) {
  .site-header {
    position: static;
  }
  .site-header__inner {
    align-items: center;
  }
  /* Touch has no hover, so the dropdowns can't open inline without making the
     header enormous. Instead the whole nav collapses behind a hamburger and is
     hidden by default (hero stays above the fold); tapping it reveals every
     link — including the Products children /sign-my-work, /verify, /app — with the
     submenus expanded as an indented accordion. No JS. */
  .site-header__hamburger {
    display: flex;
  }
  /* The checkbox is the real control: visually hidden but still focusable and
     exposed to assistive tech (it carries the accessible name), so the menu
     opens by keyboard (Tab to it, Space to toggle), not just by pointer. */
  .site-header__toggle {
    display: inline-block;
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .site-header__toggle:focus-visible + .site-header__hamburger {
    outline: 2px solid var(--navy);
    outline-offset: 3px;
  }
  .site-header__nav {
    order: 3;
    width: 100%;
    display: none;
    flex-direction: column;
    align-items: flex-start;
  }
  .site-header__toggle:checked ~ .site-header__nav {
    display: flex;
  }
  .site-header__group {
    width: 100%;
  }
  .site-header__menu {
    position: static;
    display: grid;
    min-width: 0;
    margin-top: var(--space-2xs);
    padding: 0 0 0 var(--space-m);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
  }
  .site-header__menu a {
    padding: var(--space-2xs) 0;
  }
  .site-header__menu a:hover {
    background: transparent;
    text-decoration: underline;
  }
  .site-header__group .site-header__toplink::after {
    display: none;
  }
  .home-hero__inner,
  .app-section__inner,
  .verifier-demo {
    grid-template-columns: 1fr;
  }
  .home-main > .home-section::after,
  .home-main > .home-band--dark::after,
  .home > .close-section::after {
    display: none;
  }
  .app-art {
    justify-self: start;
  }
  .scan-result-sample {
    justify-items: start;
  }
  .feature-grid,
  .usecase-grid,
  .site-footer__nav {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 45rem) {
  .home-field--hero {
    inset: 0;
    width: 100%;
    background-image: url("/assets/img/patterns/hero-dark-mobile.875b51c110.svg");
    background-position: right center;
    background-size: auto 100%;
  }
  .home-hero--threat .home-hero__inner {
    min-height: auto;
    align-items: start;
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
  }
  .home-hero--threat h1 {
    font-size: clamp(2.05rem, 10vw, 2.55rem);
  }
  .home-hero--threat h1 span {
    white-space: normal;
  }
  .home-hero--threat .hero-warning {
    display: inline-grid;
    margin-top: var(--space-m);
    padding: 0.3em 0.35em 0.34em;
    font-size: clamp(1rem, 4.4vw, 1.18rem);
    line-height: 1.03;
  }
  .home-hero--threat .hero-warning__line {
    display: block;
  }
  .home-hero--threat .hero-warning__line + .hero-warning__line::before {
    content: none;
  }
  .home-hero--threat .hero-warning__line--lead {
    font-size: 1.17em;
  }
  .home-hero--threat .hero-triad {
    margin-top: var(--space-m);
    font-size: clamp(1rem, 4.8vw, 1.15rem);
  }
  .home-hero--threat .hero-actions {
    margin-top: var(--space-m);
  }
  .home-hero--threat .hero-actions .button-primary {
    margin-top: 0;
  }
  .home-section__inner,
  .home-band__inner {
    padding-block: var(--space-xl);
  }
  .verifier-demo {
    gap: var(--space-xl);
    margin-top: var(--space-xl);
  }
  .signature-sample {
    max-width: 17.5rem;
    padding: var(--space-s);
  }
  .signature-sample__asset {
    width: min(100%, 12.5rem);
  }
  .scan-result-sample__crop {
    max-height: 28rem;
    border-radius: 1.5rem 1.5rem 0 0;
  }
  .verifier-accordion summary,
  .verifier-accordion p {
    padding-inline: var(--space-m);
  }
  .close-section__inner {
    padding-bottom: var(--space-xl);
  }
  .feature-card,
  .usecase-card {
    padding: var(--space-m);
  }
  .store-badge {
    width: min(100%, 11.25rem);
  }
}

@media (max-width: 45rem) and (max-height: 720px) {
  .home-hero--threat .home-hero__inner {
    padding-top: var(--space-l);
    padding-bottom: var(--space-l);
  }
  .home-hero--threat h1 {
    font-size: clamp(1.95rem, 10vw, 2.4rem);
  }
  .home-hero--threat .hero-warning {
    margin-top: var(--space-s);
    font-size: clamp(0.94rem, 4.15vw, 1.08rem);
  }
  .home-hero--threat .hero-triad,
  .home-hero--threat .hero-actions {
    margin-top: var(--space-s);
  }
}

/* ---------- Docs layout: sidebar + content ---------- */
.doc-shell {
  display: grid;
  grid-template-columns: 16rem minmax(0, 1fr);
  gap: var(--space-xl);
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-l);
}
@media (max-width: 48rem) {
  .doc-shell {
    grid-template-columns: 1fr;
  }
}

.docs-sidebar {
  border-right: var(--hairline) solid var(--border);
  padding-right: var(--space-m);
}
@media (max-width: 48rem) {
  .docs-sidebar {
    border-right: 0;
    border-bottom: var(--hairline) solid var(--border);
    padding: 0 0 var(--space-m);
  }
}
.docs-sidebar__group {
  margin-bottom: var(--space-l);
}
/* The pinned "Start here" shortcut sits above the section groups, set off by a
   hairline so it reads as a fast path rather than part of the section nav. */
.docs-sidebar__group--pinned {
  padding-bottom: var(--space-m);
  border-bottom: var(--hairline) solid var(--border);
}
.docs-sidebar__heading {
  font-size: var(--step--1);
  font-weight: var(--fw-extrabold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 0; /* override default h2 margin-top; inter-group spacing comes from group margin-bottom */
  margin-bottom: var(--space-xs);
}
.docs-sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-2xs);
}
.docs-sidebar a {
  text-decoration: none;
}
.docs-sidebar a:hover {
  text-decoration: underline;
}
/* Active page: typographic emphasis, never color (§6). */
.docs-sidebar li[aria-current="page"] a {
  font-weight: var(--fw-extrabold);
}

/* ---------- Doc content ---------- */
.doc {
  max-width: var(--measure);
  /* Grid item: without this, a wide child (a .table-wrap holding the
     evaluation framework's 14-column matrix) expands the column past the
     viewport instead of scrolling inside its own container. */
  min-width: 0;
}
.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  font-size: var(--step--1);
  margin-bottom: var(--space-m);
}
.breadcrumbs a {
  text-decoration: none;
}
.breadcrumbs a:hover {
  text-decoration: underline;
}
.doc h1 {
  margin-bottom: var(--space-xs);
}
.doc-meta {
  margin-bottom: var(--space-l);
  font-size: var(--step--1);
  color: var(--grey);
}
.doc-raw-link {
  margin-top: var(--space-2xl);
  padding-top: var(--space-m);
  border-top: var(--hairline) solid var(--border);
  font-size: var(--step--1);
}

/* ---------- Legal / policy pages (/privacy, /terms, /web-policies) ---------- */
/* Standalone pages, not docs: centered prose with no sidebar. Reuses .doc for
   readable line length. */
.legal-shell {
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--space-2xl) var(--space-l);
}

/* ---------- Docs index (section landing: /learn, /technology) ---------- */
/* Anchored groups clear the header when jumped to from the nav dropdowns. */
.docs-index__group {
  scroll-margin-top: var(--space-xl);
  margin-bottom: var(--space-xl);
}
.docs-index__group ul {
  list-style: none;
  padding: 0;
}
.docs-index__group li {
  margin-bottom: var(--space-xs);
  max-width: var(--measure);
}

/* ---------- Error page ---------- */
.error-page {
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--space-l);
}

/* ---------- Mermaid diagrams (build-time SVG) ---------- */
.mermaid-figure {
  margin-block: var(--space-xl);
  margin-inline: 0;
  overflow-x: auto; /* wide diagrams scroll rather than overflow the column */
  text-align: center;
}
.mermaid-figure svg {
  max-width: 100%;
  height: auto;
}

/* ---------- Verify page ---------- */
/* On-dark variants of shared bits */
.eyebrow--on-dark {
  color: rgb(255 255 255 / 0.7);
}
.text-link--on-dark {
  color: #8fc0ff; /* lightened not.bot blue for contrast on navy */
}

/* Hero: copy + proof artifact */
.verify-hero__inner {
  min-height: min(34rem, calc(100vh - 5rem));
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(18rem, 0.9fr);
  align-items: center;
  gap: var(--space-2xl);
}
.verify-hero .home-hero__copy h1 {
  max-width: 18ch;
  font-size: var(--step-4);
}
.verify-hero .home-hero__copy h1 span {
  display: block;
}
.verify-hero .home-hero__copy > p {
  margin-top: var(--space-l);
  max-width: 46ch;
  font-size: var(--step-1);
}
.verify-hero__price {
  margin: var(--space-m) 0 0;
  font-size: var(--step--1);
  color: rgb(255 255 255 / 0.75);
}
.verify-hero__price strong {
  color: var(--white);
  font-weight: var(--fw-extrabold);
}
.verify-hero__actions {
  display: flex;
  align-items: center;
  gap: var(--space-l);
  flex-wrap: wrap;
}
.verify-hero__actions .text-link {
  margin-top: var(--space-l);
}

/* Live verification stream — hero chrome. A loop of signed responses arriving
   and being judged: requests in, verdict on top, JSON payload below. Decorative
   (aria-hidden); injected by /assets/js/verify-stream.5b97c91ee4.js. */
.verify-hero__artifact {
  justify-self: end;
  width: min(24rem, 100%);
}
.vstream {
  border: 1px solid rgb(255 255 255 / 0.1);
  border-top: 3px solid var(--notbot-blue); /* "signed" seam — identity accent */
  border-radius: var(--radius);
  background: var(--navy); /* solid: the shape-field must not show through */
  box-shadow: 0 24px 60px rgb(0 0 0 / 0.35);
  padding: var(--space-s) var(--space-s) 0;
}
.vstream__head {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-2xs) var(--space-2xs) var(--space-s);
}
.vstream__bug {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
}
.vstream__live {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--step--1);
  font-weight: var(--fw-extrabold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
}
.vstream__dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--notbot-blue);
}
@media (prefers-reduced-motion: no-preference) {
  .vstream__dot {
    animation: vstream-pulse 1.8s ease-in-out infinite;
  }
}
@keyframes vstream-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.7); }
}
.vstream__label {
  margin-inline-start: auto;
  font-size: var(--step--1);
  color: rgb(255 255 255 / 0.55);
}
.vstream__feed {
  height: 22rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 64%, transparent);
  mask-image: linear-gradient(to bottom, #000 64%, transparent);
}
.vstream__card {
  margin-bottom: var(--space-s);
}
.vstream__card.is-entering {
  transition:
    margin-top 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.5s ease;
}

/* Verdict on top — the system's response to the payload below. */
.vstream__output {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin: 0 0 var(--space-2xs);
  padding-inline: var(--space-2xs);
  font-weight: var(--fw-extrabold);
  font-size: var(--step-0);
  color: var(--white);
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.vstream__output.is-shown {
  opacity: 1;
  transform: none;
}
.vstream__arrow {
  color: var(--notbot-blue);
}

/* The gray data box: the signed response's fields. */
.vstream__json {
  margin-top: var(--space-xs);
  padding: var(--space-s) var(--space-m);
  border-radius: var(--radius);
  background: var(--light-grey);
  color: var(--navy);
}
.vstream__json dl {
  margin: 0;
  display: grid;
  gap: 0.2rem;
}
.vstream__json dl > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-m);
}
.vstream__json dt {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--grey);
}
.vstream__json dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: var(--fw-semibold);
  color: var(--navy);
  white-space: nowrap;
}
/* Verified tick is navy, weight-driven. Emerald is reserved for honest.bot. */
.vstream__tick {
  color: var(--navy);
  font-weight: var(--fw-extrabold);
}
/* Field highlights: brand accents used as data emphasis (syntax-highlight
   register), the one place color carries meaning on this page. cyan = the
   matching sitepass; pink = the failing age threshold. */
.vstream__hl {
  padding: 0 0.25rem;
  border-radius: 3px;
  font-weight: var(--fw-extrabold);
}
.vstream__hl--cyan {
  background: #1affd5;
  color: var(--navy);
}
.vstream__hl--pink {
  background: #ee2677;
  color: var(--white);
}

/* ── §2 signature section: request list + frozen specimen ───────────── */
.sig-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: start;
  margin-top: var(--space-xl);
}
/* let the grid tracks shrink below the specimen's nowrap min-content instead of
   forcing the shared column (and the request list) wider than the viewport */
.sig-layout > * { min-width: 0; }
/* the mono specimen can't wrap; on narrow screens scroll it inside its own box */
.sig-spec__box { overflow-x: auto; }
@media (min-width: 56rem) {
  .sig-layout {
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--space-2xl);
  }
}
.sig-asks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-l);
}
.sig-ask {
  display: flex;
  gap: var(--space-m);
  align-items: flex-start;
}
.sig-ask__icon {
  flex: none;
  width: 2rem;    /* vertical 1:3 band — a tall pixel-field rail beside each item */
  height: 6rem;
}
.sig-ask__body {
  min-width: 0; /* let the text wrap inside the flex row instead of overflowing */
}
.sig-ask__body h3 {
  margin: 0 0 0.25rem;
  font-size: var(--step-1);
}
.sig-ask__body p {
  margin: 0;
  color: var(--grey);
}

/* the frozen specimen — a single signature, echoing the hero stream */
.sig-spec {
  margin: 0;
  border: 1px solid rgb(0 0 0 / 0.08);
  border-top: 3px solid var(--notbot-blue); /* same "signed" seam as the stream */
  border-radius: var(--radius);
  background: var(--navy);
  box-shadow: 0 24px 60px rgb(0 0 0 / 0.25);
  padding: var(--space-s);
  position: sticky;
  top: var(--space-l);
}
.sig-spec__cap {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin: 0 0 var(--space-s);
  padding-inline: var(--space-2xs);
  font-weight: var(--fw-extrabold);
  font-size: var(--step-0);
  color: var(--white);
}
.sig-spec__arrow { color: var(--notbot-blue); }
.sig-spec__box { margin: 0; }
.sig-spec__legend {
  margin: var(--space-s) 0 0;
  padding-inline: var(--space-2xs);
  font-size: var(--step--1);
  line-height: 1.5;
  color: rgb(255 255 255 / 0.7);
}
.sig-spec__legend strong {
  font-family: var(--font-mono);
  font-weight: var(--fw-semibold);
  color: var(--white);
}

/* keep it / publish it */
.sig-uses {
  display: grid;
  gap: var(--space-l);
  margin-top: var(--space-2xl);
}
@media (min-width: 44rem) {
  .sig-uses {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
  }
}
.sig-use {
  border-top: 2px solid rgb(0 0 0 / 0.14); /* neutral rule — blue reserved for links/eyebrows/identity seam */
  padding-top: var(--space-s);
}
.sig-use h3 {
  margin: 0 0 0.35rem;
  font-size: var(--step-1);
}
.sig-use p {
  margin: 0;
  color: var(--grey);
}
.sig-eng {
  margin-top: var(--space-2xl);
  padding-top: var(--space-m);
  border-top: 1px solid rgb(0 0 0 / 0.1);
  font-size: var(--step--1);
  color: var(--grey);
}
/* A .text-link used inline at the end of a sentence (sig-eng, the buyer's-case
   cards) should not carry the standalone top margin it uses as a block link in
   doc-link rows — that margin was opening a big gap when the link wrapped. */
p .text-link {
  margin-top: 0;
}

/* Galois logo chip in the MPC trust card — small, on Galois's own footer grey
   (#21272C), which is the dark backing their transparent PNG is built for. */
.galois-logo {
  display: inline-block;
  justify-self: center; /* grid item: shrink-wrap to the logo and center it in the card */
  margin-top: var(--space-s);
  padding: 0.55rem; /* even margin on all four sides of the logo */
  background: #21272C; /* Galois's own footer grey — the backing their PNG is built for */
  border-radius: 0; /* square-cornered box */
  line-height: 0;
}
.galois-logo img {
  display: block;
  width: 104px;
  height: auto;
}

/* ── §2 round-trip storyboard (Sign My Work) ───────────────────────────
   Three device frames telling the signature's round trip: signed content in
   the wild (laptop) → scan result + View Original (reused scanphone) → the
   original pulled back in-app. Frames are decorative; captions carry meaning. */
.roundtrip { margin-top: var(--space-xl); }
.filmstrip {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-l);
}
.filmstrip__step {
  width: 100%;
  max-width: 20rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}
.filmstrip__cap {
  margin: 0;
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--grey);
  text-align: center;
}
.filmstrip__cap strong { color: var(--navy); }
.filmstrip__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--step--1);
  font-weight: var(--fw-semibold);
  color: var(--notbot-blue);
  white-space: nowrap;
}
.filmstrip__arrow {
  font-size: var(--step-1);
  line-height: 1;
  transform: rotate(90deg); /* points down when the strip is stacked */
}
/* Both storyboard phones are the same box: one phone aspect ratio, one fixed
   width at every breakpoint. Pinning the width keeps the fixed-rem card content
   in the same proportion to the box, so frame 2 looks identical on mobile and
   desktop instead of leaving a big gap in a wider box. */
.filmstrip .scanphone__device { width: min(15rem, 100%); }
.filmstrip .scanphone__screen {
  min-height: 0;
  aspect-ratio: 9 / 20;
}
/* Tighten frame 2's card so it fits the phone box without clipping, then scale
   the whole card down a notch from the top: the type shrinks proportionally and
   the freed space falls below the View Original button so it isn't crowded into
   the bottom edge. */
.filmstrip .scanphone__body {
  padding: 0.9rem 1rem 1rem;
  gap: 0.4rem;
  transform: scale(0.9);
  transform-origin: top center;
}
.filmstrip .scanphone__bug { width: 3.4rem; margin-top: 0.1rem; }

@media (min-width: 62rem) {
  .filmstrip {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--space-m);
  }
  .filmstrip__step { flex: 1 1 0; }
  .filmstrip__step:first-child { max-width: 26rem; } /* laptop reads wider */
  .filmstrip__step:not(:first-child) { max-width: 15rem; }
  .filmstrip__link { align-self: center; }
  .filmstrip__arrow { transform: none; }
}

/* Laptop frame: a landscape screen on a short base. */
.frame-laptop { width: 100%; }
.frame-laptop__screen {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 0.5rem solid #0e0e12;
  border-radius: 0.7rem;
  background: #0e0e12;
  box-shadow: 0 20px 45px rgb(0 0 0 / 0.3);
}
.frame-still { display: block; width: 100%; height: 100%; object-fit: cover; }
.frame-qr {
  position: absolute;
  right: 0.55rem;
  bottom: 0.55rem;
  width: 3.4rem;
  height: 3.4rem;
  padding: 0.18rem;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.4);
}
.frame-laptop__base {
  display: block;
  width: 64%;
  height: 0.55rem;
  margin: 0 auto;
  background: #0e0e12;
  clip-path: polygon(7% 0, 93% 0, 100% 100%, 0 100%);
}

/* Frame 3: the original shown in the phone, letterboxed, under a not.bot banner.
   Shares the phone aspect ratio above; the media area flexes to fill. */
.scanphone--media .scanphone__media {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #000;
}
.scanphone--media .scanphone__media .frame-still {
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
}
.appbanner {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.85rem;
  background: var(--notbot-blue);
  color: var(--white);
  font-weight: var(--fw-extrabold);
  font-size: var(--step--1);
}
.appbanner img { display: block; }
/* The logo is a solid blue wordmark; force it white on the blue banner. */
.appbanner__logo {
  height: 1.15rem;
  width: auto;
  filter: brightness(0) invert(1);
}
.roundtrip__note {
  margin: var(--space-2xl) 0 0;
  padding-top: var(--space-m);
  border-top: 1px solid rgb(0 0 0 / 0.1);
  font-size: var(--step--1);
  color: var(--grey);
  text-align: center;
}

/* ── §4 "What you can sign": ruled items in two independent column stacks
      (Video/Images/PDFs left, a richer Links item right) ──────────────── */
.signlist {
  margin: var(--space-xl) 0 0;
  display: grid;
  gap: var(--space-l) var(--space-2xl);
}
@media (min-width: 44rem) {
  .signlist {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}
.signlist__col {
  display: grid;
  gap: var(--space-l);
  align-content: start;
}
.signlist__item {
  border-top: 2px solid rgb(0 0 0 / 0.14); /* neutral rule; blue stays reserved */
  padding-top: var(--space-s);
}
.signlist__item h3 {
  margin: 0 0 0.35rem;
  font-size: var(--step-1);
}
.signlist__item p {
  margin: 0;
  color: var(--grey);
}
.signlist__uses {
  list-style: none;
  margin: var(--space-s) 0 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}
.signlist__uses li {
  position: relative;
  padding-left: 1rem;
  color: var(--grey);
}
.signlist__uses li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 0.4rem;
  height: 0.4rem;
  background: var(--notbot-blue);
}
.signlist__uses strong {
  color: var(--navy);
  font-weight: var(--fw-semibold);
}

/* ── §5 Signed links: verifiable claims, on the dark band ─────────────── */
/* Headline + intro + claims share the left column so the phone (right column,
   grid align-items:start) top-aligns with the subhead. */
.claims-main > h2 { margin-top: 0; }
.claims-intro {
  margin: var(--space-s) 0 0;
  max-width: 34rem;
  color: rgb(255 255 255 / 0.82);
}
.claims-main > .claims { margin-top: var(--space-xl); }
.claims {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-l);
}
.claims h3 {
  margin: 0 0 0.3rem;
  font-size: var(--step-1);
  color: var(--white);
}
.claims p {
  margin: 0;
  color: rgb(255 255 255 / 0.72);
}

/* ── Sticky purchase path ───────────────────────────────────────────── */
.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-l);
  padding: var(--space-s) var(--space-l);
  background: var(--navy);
  color: var(--white);
  box-shadow: 0 -10px 30px rgb(0 0 0 / 0.22);
  transition: transform 0.3s ease;
}
.sticky-cta--hidden {
  transform: translateY(110%);
}
.sticky-cta__text {
  margin: 0;
  font-size: var(--step-0);
}
.sticky-cta__text strong {
  font-weight: var(--fw-extrabold);
}
.sticky-cta__btn.button-primary {
  margin: 0;
  min-height: 2.5rem;
  flex: none;
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .sticky-cta { transition: none; }
}
@media (max-width: 32rem) {
  .sticky-cta {
    gap: var(--space-s);
    padding: var(--space-2xs) var(--space-s);
    justify-content: space-between;
  }
  .sticky-cta__text { font-size: var(--step--1); }
  .sticky-cta__brand { display: none; } /* keep the bar to one slim line on phones */
}

/* ── Stat band: sourced stakes, on dark ─────────────────────────────── */
.statband__grid {
  margin: var(--space-xl) 0 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}
@media (min-width: 52rem) {
  .statband__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2xl);
  }
}
.stat {
  border-top: 2px solid rgb(255 255 255 / 0.22); /* neutral rule on dark — blue is reserved */
  padding-top: var(--space-s);
}
.stat__num {
  margin: 0;
  font-size: var(--step-4);
  font-weight: var(--fw-extrabold);
  line-height: 1;
  color: var(--white);
}
.stat__txt {
  margin: var(--space-xs) 0 0;
  color: rgb(255 255 255 / 0.82);
}
.stat__src {
  display: block;
  margin-top: var(--space-xs);
  font-size: var(--step--1);
  color: rgb(255 255 255 / 0.5);
}
.statband__kicker {
  margin: var(--space-2xl) 0 0;
  max-width: 46rem;
  font-size: var(--step-1);
  font-weight: var(--fw-semibold);
  color: var(--white);
}

/* ── §4.5 buyer's case: trust without added risk (text columns, no cards) ── */
.bizcase__grid {
  margin-top: var(--space-xl);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}
@media (min-width: 52rem) {
  .bizcase__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2xl);
  }
}
.bizcase__item h3 {
  margin: 0 0 var(--space-xs);
  font-size: var(--step-1);
}
.bizcase__item p {
  margin: 0;
  color: var(--grey);
}

/* Six-card use-case grid keeps the 3-col rhythm (inherits .usecase-grid) */

/* How-it-works steps */
.steps {
  list-style: none;
  padding: 0;
  margin: var(--space-xl) 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-l);
}
.step {
  display: grid;
  gap: var(--space-s);
  align-content: start;
  max-width: none;
}
.step__n {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  font-weight: var(--fw-extrabold);
}
.step p {
  margin: 0;
  max-width: none;
}
.callout {
  margin-top: var(--space-xl);
  padding: var(--space-l);
  border-left: 4px solid var(--action);
  background: var(--bg-surface);
  border-radius: var(--radius);
}
.callout p {
  margin: 0;
  max-width: var(--measure);
}
/* On this page the callout sits in a full-width section; without this the grey
   box spans the whole grid while the text caps at --measure, leaving an empty
   right half. Cap the box to the text measure + its padding so it hugs the copy. */
.sign-my-work .callout,
.home.app .callout {
  max-width: calc(var(--measure) + 2 * var(--space-l));
}
/* In the safety section the callout closes a 46rem chat thread; match that
   width exactly so its right edge aligns with the answer avatars. */
.home.app .app-trust .callout {
  max-width: 46rem;
}
.doc-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-l);
  margin-top: var(--space-m);
}

/* ---------- About: partners / advisors (text only, no photos) ---------- */
/* A lighter register than the founder cards: hairline-ruled rows, no surface
   fill, so the founders read as the primary group and contributors as a list. */
.people-block {
  margin-top: var(--space-2xl);
}
.people-block__title {
  margin: 0 0 var(--space-m);
}
.people {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-m) var(--space-2xl);
}
.people li {
  display: grid;
  gap: var(--space-2xs);
  padding-top: var(--space-m);
  border-top: var(--hairline) solid var(--border);
  max-width: none;
}
.people li strong {
  font-weight: var(--fw-extrabold);
}
.people li span {
  font-size: var(--step--1);
}
@media (max-width: 48rem) {
  .people {
    grid-template-columns: 1fr;
  }
}

/* Trust band cards on dark */
.feature-card--on-dark {
  background: rgb(255 255 255 / 0.06);
  border: var(--hairline) solid rgb(255 255 255 / 0.18);
}

/* Pricing tiers */
.tier-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-l);
  margin-top: var(--space-xl);
  align-items: stretch;
}
/* On this page the plans sit on a white section (the grey slot in the
   alternation belongs to Recovery), so the cards get the same soft shadow
   the page's mockup cards use to stand off white. CTAs pin under the price
   like /verify, so they align across cards. */
.home.app .tier-card {
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.1);
}
.home.app .tier-card > a.button-primary,
.home.app .tier-card > a.button-ghost {
  margin-top: var(--space-2xs);
  /* "Upgrade in the app" must not wrap; trade side padding for one line. */
  white-space: nowrap;
  padding-inline: var(--space-s);
}
.tier-card {
  position: relative; /* anchors the flag pill */
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding: var(--space-l);
  /* Every card reserves the flag band, so names align across cards
     whether or not a card carries a pill. */
  padding-top: calc(var(--space-l) + 2.1rem);
  border-radius: var(--radius);
  background: var(--bg-page);
  border: var(--hairline) solid var(--border);
}
.tier-card--featured {
  border: 2px solid var(--navy);
}
.tier-card__flag {
  position: absolute;
  top: var(--space-l);
  left: var(--space-l);
  margin: 0;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: var(--navy);
  color: var(--white);
  font-size: var(--step--1);
  font-weight: var(--fw-extrabold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.tier-card__name {
  margin: 0;
  font-size: var(--step-1);
  font-weight: var(--fw-extrabold);
}
.tier-card__price {
  margin: 0;
}
.tier-card__amount {
  font-size: var(--step-3);
  font-weight: var(--fw-extrabold);
}
.tier-card__per {
  color: var(--grey);
}
.tier-card__pitch {
  margin: 0;
  font-size: var(--step--1);
  color: var(--text);
  max-width: none;
}
.tier-card__list {
  list-style: none;
  padding: 0;
  margin: var(--space-xs) 0 var(--space-m);
  display: grid;
  gap: var(--space-2xs);
}
.tier-card__list li {
  max-width: none;
  padding-block: var(--space-2xs);
  border-top: var(--hairline) solid var(--light-grey);
}
.tier-card a {
  justify-self: stretch;
  margin-top: auto;
}
.button-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: var(--space-s) var(--space-l);
  border-radius: var(--radius);
  border: var(--hairline) solid var(--navy);
  background: transparent;
  color: var(--navy);
  font-weight: var(--fw-semibold);
  text-decoration: none;
}
.is-soon {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}
/* /verify: CTA sits at the top of each card (under the price), not pinned to
   the bottom — overrides the shared `.tier-card a { margin-top:auto }` + the
   button's own top margin. Scoped so other pages' tier cards are untouched. */
.verify .tier-card > a.button-primary,
.verify .tier-card > a.button-ghost {
  margin-top: var(--space-2xs);
}
/* "Start here" flag on Sandbox — distinct from the navy "Most popular" pill */
.tier-card__flag--start {
  background: transparent;
  color: var(--navy);
  border: 2px solid var(--navy);
  padding: 0.1rem 0.55rem;
}
.tier-reassure {
  margin-top: var(--space-l);
  font-weight: var(--fw-semibold);
}
.tier-note {
  margin-top: var(--space-s);
  font-size: var(--step--1);
  color: var(--grey);
  max-width: var(--measure);
}

/* Doc tables: markdown-generated tables are wrapped in .table-wrap by
   lib/markdown.js so a wide table (the evaluation framework's 14-column
   matrix) scrolls inside its own container, never the page body. */
.table-wrap {
  overflow-x: auto;
}
.table-wrap table {
  border-collapse: collapse;
}
.table-wrap th,
.table-wrap td {
  padding: var(--space-xs) var(--space-s);
  text-align: left;
  border-bottom: var(--hairline) solid var(--border);
  min-width: 8ch;
}
.table-wrap th {
  font-weight: var(--fw-extrabold);
}

/* Comparison table */
.compare-wrap {
  margin-top: var(--space-xl);
  overflow-x: auto;
}
.compare {
  width: 100%;
  border-collapse: collapse;
  min-width: 36rem;
}
.compare th,
.compare td {
  padding: var(--space-s) var(--space-m);
  text-align: left;
  border-bottom: var(--hairline) solid var(--border);
}
.compare thead th {
  font-weight: var(--fw-extrabold);
}
.compare tbody th {
  font-weight: var(--fw-semibold);
  color: var(--grey);
}

/* FAQ */
.faq {
  margin-top: var(--space-xl);
  display: grid;
  gap: 0;
  max-width: var(--measure);
}
.faq__item {
  border-top: var(--hairline) solid var(--border);
  padding-block: var(--space-s);
}
.faq__item:last-child {
  border-bottom: var(--hairline) solid var(--border);
}
.faq__item summary {
  cursor: pointer;
  font-weight: var(--fw-semibold);
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: var(--space-m);
}
.faq__item summary::after {
  content: "+";
  font-weight: var(--fw-extrabold);
}
.faq__item[open] summary::after {
  content: "\2212";
}
.faq__item summary::-webkit-details-marker {
  display: none;
}
.faq__item p {
  margin: var(--space-s) 0 0;
}

.team-role {
  margin: 0;
  color: var(--grey);
  font-weight: var(--fw-semibold);
  font-size: var(--step--1);
}

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

@media (max-width: 58rem) {
  .verify-hero__inner {
    grid-template-columns: 1fr;
  }
  .verify-hero__artifact {
    justify-self: start;
    width: min(24rem, 100%);
  }
  .steps {
    grid-template-columns: 1fr;
  }
  .tier-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 38rem) {
  .tier-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Sign My Work page ---------- */
/* Launch-status line in the hero (pre-launch marker). */
.sign-my-work-status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: var(--space-l);
  font-size: var(--step--1);
  font-weight: var(--fw-extrabold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.7);
}
.sign-my-work-status__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--action); /* "almost here" marker, orange not green */
}
/* Trust grid holds four cards; lay them out 2x2 instead of the default 3-up
   (which would strand the fourth card alone on a second row). */
@media (min-width: 58rem) {
  .sign-my-work-trust .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.sign-my-work-trust__note {
  margin: var(--space-xl) 0 0;
  max-width: var(--measure);
  color: rgb(255 255 255 / 0.6);
  font-size: var(--step--1);
}

/* Hero proof artifact: the not.bot app's scan result for a signed item, in a phone
   frame. Mirrors the live app — cyan-on-teal is the reserved "Verified Signer" signal,
   used nowhere else. The result resolves once on load, as if a scan just completed. */
.scanphone {
  margin: 0;
}
.scanphone__device {
  width: min(17rem, 100%);
  margin-inline: auto;
  position: relative;
  padding: 0.6rem;
  background: #0e0e12;
  border-radius: 2.4rem;
  box-shadow: 0 24px 60px rgb(0 0 0 / 0.45);
}
.scanphone__notch {
  position: absolute;
  z-index: 3;
  top: 0.6rem;
  left: 50%;
  transform: translateX(-50%);
  width: 38%;
  height: 1.05rem;
  background: #0e0e12;
  border-radius: 0 0 0.8rem 0.8rem;
}
.scanphone__screen {
  position: relative;
  overflow: hidden;
  min-height: 30rem;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: 1.8rem;
}
.scanphone__statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.45rem 1.1rem 0.2rem;
  background: #2f89fa;
  color: var(--white);
  font-size: 0.72rem;
  font-weight: var(--fw-semibold);
}
.scanphone__signal {
  display: inline-flex;
  align-items: flex-end;
  gap: 0.12rem;
  height: 0.6rem;
}
.scanphone__signal i {
  width: 0.18rem;
  background: var(--white);
  border-radius: 1px;
  opacity: 0.9;
}
.scanphone__signal i:nth-child(1) { height: 0.3rem; }
.scanphone__signal i:nth-child(2) { height: 0.42rem; }
.scanphone__signal i:nth-child(3) { height: 0.52rem; }
.scanphone__signal i:nth-child(4) { height: 0.6rem; }
.scanphone__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.35rem 1.1rem 0.85rem;
  background: #2f89fa;
  color: var(--white);
  font-weight: var(--fw-extrabold);
  font-size: var(--step-0);
}
.scanphone__close {
  position: relative;
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  border: 2px solid rgb(255 255 255 / 0.85);
  border-radius: 4px;
}
.scanphone__close::before,
.scanphone__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.55rem;
  height: 2px;
  background: var(--white);
}
.scanphone__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.scanphone__close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.scanphone__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1.3rem 1.1rem 1.6rem;
  text-align: center;
  color: #1a1a1a;
}
.scanphone__bug {
  width: 4.2rem;
  height: auto;
  margin-top: 0.3rem;
}
.scanphone__verified {
  margin: 0;
  font-weight: var(--fw-extrabold);
  font-size: var(--step-1);
  color: #111;
}
.scanphone__badge {
  width: 100%;
  display: grid;
  gap: 0.1rem;
  margin-top: 0.3rem;
  padding: 0.55rem 0.8rem;
  text-align: left;
  background: #0a5462; /* reserved Verified-Signer teal */
  border-radius: 8px;
}
.scanphone__badge-label {
  font-size: var(--step--1);
  font-weight: var(--fw-semibold);
  color: #0ea8b5;
}
.scanphone__badge-name {
  font-weight: var(--fw-extrabold);
  color: #19f0f0;
}
.scanphone__created {
  width: 100%;
  margin: 0;
  text-align: left;
  font-size: var(--step--1);
  color: #333;
}
.scanphone__msg-label {
  width: 100%;
  margin: 0.2rem 0 0;
  text-align: left;
  font-weight: var(--fw-extrabold);
  font-size: var(--step--1);
}
.scanphone__msg {
  width: 100%;
  text-align: left;
  font-size: var(--step--1);
  color: #222;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--light-grey);
  border-radius: 6px;
}
.scanphone__view {
  align-self: stretch;
  margin-top: 0.7rem;
  padding: 0.6rem 1rem;
  text-align: center;
  background: #2f89fa;
  color: var(--white);
  font-weight: var(--fw-extrabold);
  border-radius: 8px;
}
/* Scan line + staggered resolve: one pass on load, then the result sits still. */
.scanphone__scan { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .scanphone__scan {
    display: block;
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    height: 2.5rem;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent, rgb(47 137 250 / 0.3), transparent);
    animation: scanphone-sweep 1.7s ease-out 0.1s 1 both;
  }
  .scanphone__body > * {
    opacity: 0;
    animation: scanphone-rise 0.5s ease forwards;
  }
  .scanphone__bug { animation-delay: 0.2s; }
  .scanphone__verified { animation-delay: 0.36s; }
  .scanphone__badge { animation-delay: 0.52s; }
  .scanphone__created { animation-delay: 0.66s; }
  .scanphone__msg-label { animation-delay: 0.78s; }
  .scanphone__msg { animation-delay: 0.9s; }
  /* View Original is the point: once the result settles, pulse it to pull the eye. */
  .scanphone__view {
    animation:
      scanphone-rise 0.5s ease 1.06s both,
      scanphone-tap 2.2s ease-out 1.7s infinite;
  }
}
@keyframes scanphone-sweep {
  0% { transform: translateY(-3rem); opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { transform: translateY(30rem); opacity: 0; }
}
@keyframes scanphone-rise {
  from { opacity: 0; transform: translateY(0.5rem); }
  to { opacity: 1; transform: none; }
}
@keyframes scanphone-tap {
  0% { box-shadow: 0 0 0 0 rgb(47 137 250 / 0.5); }
  60% { box-shadow: 0 0 0 0.6rem rgb(47 137 250 / 0); }
  100% { box-shadow: 0 0 0 0 rgb(47 137 250 / 0); }
}

/* ---------- App page ---------- */
/* Consumer front door. Most graphic-forward page; trust arc (§3–§5) is the spine.
   Built on the shared home-* system; these rules add the page-specific pieces. */

/* Shared inline-SVG art */
.art-svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Hero: copy + phone, with the de-risk triad */
.app-hero__inner {
  min-height: min(36rem, calc(100vh - 5rem));
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(14rem, 0.85fr);
  align-items: center;
  gap: var(--space-2xl);
}
.app-hero .home-hero__copy {
  max-width: 42rem;
}
.app-hero h1 {
  max-width: 16ch;
  font-size: var(--step-4);
}
.app-hero h1 span {
  display: block;
}
.app-hero .home-hero__copy > p {
  margin-top: var(--space-l);
  max-width: 42ch;
  font-size: var(--step-1);
}
.triad {
  list-style: none;
  margin: var(--space-xl) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
}
.triad__chip {
  display: grid;
  gap: 0.1rem;
  flex: 1 1 9rem;
  max-width: none;
  padding: var(--space-s) var(--space-m);
  border-radius: var(--radius);
  background: rgb(255 255 255 / 0.06);
  border: var(--hairline) solid rgb(255 255 255 / 0.18);
}
.triad__k {
  font-weight: var(--fw-extrabold);
  color: var(--white);
}
.triad__v {
  font-size: var(--step--1);
  color: rgb(255 255 255 / 0.72);
  line-height: 1.4;
}
/* De-risk tags — plain inline row, no chips/cards */
.hero-tags {
  list-style: none;
  margin: var(--space-l) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-m);
  font-size: var(--step--1);
  font-weight: var(--fw-extrabold);
  color: rgb(255 255 255 / 0.88);
}
.hero-tags li + li::before {
  content: "\00b7";
  margin-right: var(--space-m);
  color: rgb(255 255 255 / 0.4);
}
.app-hero__elig {
  margin-top: var(--space-l);
  max-width: 46ch;
  font-size: var(--step--1);
  color: rgb(255 255 255 / 0.6);
}
.app-hero__art {
  justify-self: center;
  align-self: end;
  max-height: 30rem;
  overflow: hidden;
}
.app-hero__phone {
  width: auto;
  max-height: 30rem;
  filter: drop-shadow(0 28px 60px rgb(0 0 0 / 0.45));
}

/* Official store badges (height-matched, replacing the fixed-width SVG rule) */
.store-badge--img {
  width: auto;
}
.store-badge--img img {
  display: block;
  height: 2.9rem;
  width: auto;
}
.store-badge--play img {
  height: 2.9rem;
}

/* §3 aliases — Me-screen mockup + trait definitions + facts */
.alias-explain {
  margin-top: var(--space-m);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.75fr);
  grid-template-rows: auto 1fr;
  column-gap: var(--space-2xl);
  align-items: start;
}
/* Lead paragraph sits beside the demo card's top edge; traits follow below it. */
.alias-explain__lead {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
}
.alias-traits {
  grid-column: 1;
  grid-row: 2;
  margin-top: var(--space-xl);
  display: grid;
  gap: var(--space-l);
  align-content: start;
}
.alias-trait {
  padding-top: var(--space-m);
  border-top: 3px solid var(--navy);
}
.alias-trait h3 {
  margin: 0 0 var(--space-2xs);
  font-size: var(--step-0);
}
.alias-trait p {
  margin: 0;
  max-width: var(--measure);
  font-size: var(--step--1);
}
/* The demo card imitates the app's My Aliases screen, so it uses the app's
   blue chrome (--notbot-blue) rather than the site's action orange. */
.alias-demo {
  grid-column: 2;
  grid-row: 1 / span 2;
  margin: 0;
  padding: var(--space-l);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 0 18px 44px rgb(0 0 0 / 0.14);
  max-width: 24rem;
  justify-self: center;
  width: 100%;
}
.alias-demo__title {
  margin: 0 0 var(--space-s);
  font-weight: var(--fw-extrabold);
  font-size: var(--step-1);
}
.alias-demo__create {
  margin: 0 0 var(--space-s);
  padding: var(--space-xs) var(--space-s);
  border: 2px solid var(--notbot-blue);
  border-radius: 10px;
  color: var(--notbot-blue);
  font-weight: var(--fw-semibold);
  font-size: var(--step--1);
  text-align: center;
}
.alias-demo__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.alias-demo__list li {
  display: grid;
  grid-template-columns: 3.25rem 1fr;
  gap: var(--space-s);
  align-items: center;
  padding: var(--space-s);
  border-bottom: 1px solid var(--light-grey);
  /* The app marks each alias's kind with a colored bar on the row's left edge
     (10dp in the app; colors from NbColors in the app's design tokens). */
  border-left: 10px solid transparent;
}
.alias-demo__list li:last-child {
  border-bottom: 0;
}
.alias-demo__list .alias-demo__row--normal {
  border-left-color: var(--notbot-blue); /* NbColors.primary #3386FC */
}
.alias-demo__list .alias-demo__row--hidden {
  border-left-color: #45006d; /* NbColors.secondaryPurple */
  background: rgb(0 0 0 / 0.12); /* the app tints hidden rows with black12 */
}
.alias-demo__list .alias-demo__row--signer {
  border-left-color: #065560; /* NbColors.secondaryDarkCyan */
}
.alias-demo__list img {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 6px;
  image-rendering: pixelated;
}
.alias-demo__names {
  display: grid;
  gap: 0.1rem;
  font-size: var(--step--1);
}
.alias-demo__names strong {
  font-size: var(--step-0);
}
.alias-demo__names span {
  color: var(--grey);
  overflow-wrap: anywhere;
}
.alias-demo__note {
  margin-top: var(--space-m);
  font-size: var(--step--1);
  color: var(--grey);
}
.alias-facts {
  margin-top: var(--space-xl);
  padding: var(--space-l);
  border-radius: var(--radius);
  background: var(--bg-page); /* white panel; the aliases section sits on surface grey */
  max-width: calc(var(--measure) + 2 * var(--space-l));
}
.alias-facts ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-s);
}
.alias-facts li {
  max-width: var(--measure);
}
.alias-facts strong {
  color: var(--navy);
}

/* §4 prove you're human to sites — steps + Signature Request mockup + powers */
.verify-explain {
  margin-top: var(--space-m);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.72fr);
  column-gap: var(--space-2xl);
  align-items: start;
}
.verify-explain__lead {
  margin: 0;
}
.verify-explain__main .how-steps {
  margin-top: var(--space-xl);
}
/* The demo card imitates the app's Signature Request screen; app chrome blue. */
.verify-demo {
  margin: 0;
  padding: var(--space-l);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 0 18px 44px rgb(0 0 0 / 0.14);
  max-width: 24rem;
  justify-self: center;
  width: 100%;
  font-size: var(--step--1);
}
.verify-demo__title {
  margin: 0 0 var(--space-s);
  font-weight: var(--fw-extrabold);
  font-size: var(--step-1);
}
.verify-demo__from {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-s);
  align-items: center;
  padding: var(--space-s) var(--space-m);
  border: 1px solid #b8d3fb;
  border-radius: 10px;
  background: #e9f1fe; /* the app's pale-blue request banner */
  overflow-wrap: anywhere;
}
.verify-demo__shield {
  color: var(--notbot-blue);
  display: grid;
}
.verify-demo__from-label {
  display: block;
  color: var(--grey);
}
.verify-demo__label {
  margin: var(--space-m) 0 var(--space-2xs);
  font-weight: var(--fw-extrabold);
}
.verify-demo__message {
  margin: 0;
  padding: var(--space-s) var(--space-m);
  border: 1px solid var(--light-grey);
  border-radius: 10px;
  background: #fafafa;
}
.verify-demo__claims {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-xs);
  font-weight: var(--fw-semibold);
}
.verify-demo__tick {
  display: inline-grid;
  place-content: center;
  width: 1.25rem;
  height: 1.25rem;
  margin-right: 0.35rem;
  border: 2px solid var(--notbot-blue);
  border-radius: 50%;
  color: var(--notbot-blue);
  font-size: 0.7rem;
}
.verify-demo__claim--sitepass {
  color: var(--action); /* the app marks Site Pass in its orange */
}
.verify-demo__claim--sitepass .verify-demo__tick {
  border-color: var(--action);
  color: var(--action);
}
.verify-demo__expires {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: var(--space-m) 0 0;
  padding: var(--space-xs) var(--space-m);
  border: 1px solid #b8d3fb;
  border-radius: 10px;
  background: #e9f1fe;
  color: #1d5fc4;
}
.verify-demo__actions {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: var(--space-s);
  margin-top: var(--space-m);
}
.verify-demo__btn {
  padding: var(--space-xs) 0;
  border-radius: 10px;
  text-align: center;
  font-weight: var(--fw-semibold);
}
.verify-demo__btn--reject {
  border: 2px solid var(--notbot-blue);
  color: var(--notbot-blue);
}
.verify-demo__btn--continue {
  background: var(--notbot-blue);
  color: var(--white);
}
.verify-demo__note {
  margin-top: var(--space-m);
  color: var(--grey);
}
.verify-powers {
  margin-top: var(--space-xl);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-l);
}
.verify-power {
  padding: var(--space-l);
  border-radius: var(--radius);
  background: var(--bg-surface); /* grey panel; the verify section sits on page white */
}
.verify-power h3 {
  margin: 0 0 var(--space-xs);
  font-size: var(--step-1);
}
.verify-power p {
  margin: 0;
  max-width: none;
  font-size: var(--step--1);
}

/* §2 how signing works — vertical numbered explainer */
.how-steps {
  list-style: none;
  margin: var(--space-xl) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-l);
}
.how-step {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: var(--space-m);
  align-items: start;
}
.how-step__body h3 {
  margin: 0 0 var(--space-2xs);
}
.how-step__body p {
  margin: 0;
  max-width: var(--measure);
}
.sig-forms {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-l);
  margin-top: var(--space-m);
}
.sig-form {
  margin: 0;
  text-align: center;
}
.sig-form img {
  height: 7rem;
  width: auto;
  display: block;
  border-radius: 8px;
  background: var(--white);
  padding: var(--space-2xs);
  box-shadow: 0 8px 20px rgb(0 0 0 / 0.12);
  image-rendering: pixelated;
}
.sig-form figcaption {
  margin-top: var(--space-xs);
  font-size: var(--step--1);
  font-weight: var(--fw-extrabold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #676767;
}
/* Good-message guide — surface panel, distinct from the accent callout */
.msg-guide {
  margin-top: var(--space-xl);
  padding: var(--space-l);
  border-radius: var(--radius);
  background: var(--bg-surface);
  max-width: calc(var(--measure) + 2 * var(--space-l));
}
.msg-guide h3 {
  margin: 0 0 var(--space-s);
}
.msg-guide p {
  margin: 0;
  max-width: var(--measure);
}
.msg-ladder {
  list-style: none;
  margin: var(--space-s) 0;
  padding: 0;
  display: grid;
  gap: var(--space-xs);
}
.msg-ladder li {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: var(--space-s);
  align-items: baseline;
}
.msg-ladder__k {
  font-weight: var(--fw-extrabold);
  color: var(--navy);
}

/* §3 scan sequence */
.scan-seq {
  list-style: none;
  margin: var(--space-xl) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-l);
}
.scan-step {
  display: grid;
  gap: var(--space-m);
  align-content: start;
  max-width: none;
}
.scan-step__art {
  padding: var(--space-m);
  border-radius: var(--radius);
  background: var(--bg-page);
}
/* The app's instructional animations bring their own background; bleed them to
   the box edge so they don't read as a card within a card. */
.scan-step__art--anim {
  position: relative; /* anchors the replay button */
  padding: 0;
  overflow: hidden;
}
.scan-step__art--anim video {
  display: block;
  width: 100%;
  height: auto;
}
/* Replay control, created by scan-anim.js after an animation finishes. */
.anim-replay {
  position: absolute;
  right: 0.6rem;
  bottom: 0.6rem;
  display: grid;
  place-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--white);
  color: var(--navy);
  box-shadow: 0 4px 14px rgb(0 0 0 / 0.22);
  cursor: pointer;
}
.anim-replay:hover {
  color: var(--notbot-blue);
}
.anim-replay:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}
.anim-replay[hidden] {
  display: none;
}
.scan-step__body {
  display: grid;
  gap: var(--space-xs);
}
.scan-step__body h3 {
  margin: 0;
}
.scan-step__body p {
  margin: 0;
  max-width: none;
}

/* §6 safety — the trust spine as a chat thread */
.safety-chat {
  margin-top: var(--space-xl);
  max-width: 46rem;
  display: grid;
  gap: var(--space-s);
}
.chat-row {
  display: grid;
  gap: var(--space-s);
  align-items: end;
}
.chat-row--q {
  grid-template-columns: auto 1fr;
  justify-items: start;
}
.chat-row--q:not(:first-child) {
  margin-top: var(--space-l);
}
.chat-row--a {
  grid-template-columns: 1fr auto;
  justify-items: end;
}
.chat-avatar {
  display: grid;
  place-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  overflow: hidden;
}
.chat-avatar--you {
  background: var(--light-grey);
  color: var(--grey);
}
.chat-avatar--nb img {
  display: block;
  width: 2.5rem;
  height: 2.5rem;
}
.chat-bubble {
  margin: 0;
  padding: var(--space-s) var(--space-m);
  border-radius: 18px;
  max-width: 36rem;
}
.chat-bubble--q {
  background: var(--bg-surface);
  border-bottom-left-radius: 4px;
  font-weight: var(--fw-semibold);
}
.chat-bubble--a {
  background: #e9f1fe; /* the app's pale request-banner blue */
  border-bottom-right-radius: 4px;
}
/* App-page section subheads: balance wrapped lines so a lone word never
   orphans onto the last line (e.g. "...doesn't go with / them."). */
.home.app .home-section__header > p {
  text-wrap: balance;
}
/* Callout copy gets the gentler form: avoid a lone last word without
   re-ragging every line (no-op in browsers without text-wrap: pretty). */
.home.app .callout p {
  text-wrap: pretty;
}

/* §7 recovery — three moments, border-top columns */
.recovery-moments {
  margin-top: var(--space-xl);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-xl);
}
.recovery-moment {
  padding-top: var(--space-m);
  border-top: 3px solid var(--navy);
}
.recovery-moment h3 {
  margin: 0 0 var(--space-xs);
  font-size: var(--step-0);
}
.recovery-moment p {
  margin: 0;
  max-width: none;
  font-size: var(--step--1);
}
/* Callout on a surface-grey section: flip its panel to white so it reads. */
.callout--on-surface {
  background: var(--bg-page);
}

/* §5 eligibility */
.enroll-status {
  margin-top: var(--space-xl);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xl);
}
.enroll-status__col {
  padding-top: var(--space-m);
  border-top: 3px solid var(--navy);
}
/* Both columns share the same solid rule; the Today / This year labels carry the
   present-vs-future distinction (a dashed rule here read as a render glitch). */
.enroll-status__col p {
  max-width: none;
}
.enroll-status__label {
  margin: 0 0 var(--space-xs);
  font-size: var(--step--1);
  font-weight: var(--fw-extrabold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* §7 close */
.close-section__badges {
  justify-content: center;
  margin-top: var(--space-l);
}
.close-section__handoff {
  margin-top: var(--space-l);
  color: rgb(255 255 255 / 0.7);
}
.close-section__handoff a {
  color: var(--white);
}

@media (max-width: 58rem) {
  .app-hero__inner {
    grid-template-columns: 1fr;
  }
  .app-hero__art {
    justify-self: start;
    align-self: start;
    max-height: 22rem;
  }
  .app-hero__phone {
    max-height: 22rem;
  }
  .scan-seq,
  .recovery-moments {
    grid-template-columns: 1fr;
  }
  /* Aliases: stack lead → demo card → traits (source order) on narrow screens. */
  .alias-explain {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }
  .alias-explain__lead,
  .alias-demo,
  .alias-traits {
    grid-column: auto;
    grid-row: auto;
  }
  .alias-demo {
    margin-top: var(--space-l);
  }
  .alias-traits {
    margin-top: var(--space-l);
  }
  /* Verify: stack lead + steps, then the request mockup, then the powers. */
  .verify-explain {
    grid-template-columns: 1fr;
  }
  .verify-demo {
    margin-top: var(--space-l);
  }
  .verify-powers {
    grid-template-columns: 1fr;
  }
  .enroll-status {
    grid-template-columns: 1fr;
    gap: var(--space-l);
  }
}
@media (max-width: 38rem) {
  .usecase-grid--four {
    grid-template-columns: 1fr;
  }
  .triad__chip {
    flex-basis: 100%;
  }
}

/* ---------- Videos (/vid) ---------- */
.vid-stage__inner {
  display: flex;
  flex-direction: column;
}
.vid-title {
  margin-bottom: var(--space-l);
}
/* Container is a neutral block; the 16:9 frame is only drawn once a video
   loads (.vid-frame), so the not-found state isn't a tall empty box. */
.vid-player {
  width: 100%;
}
.vid-frame {
  width: 100%;
  max-width: 1280px;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--black);
}
.vid-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.vid-notfound p {
  margin-top: var(--space-m);
  max-width: var(--measure);
}
.vid-notfound code {
  padding: 0.1em 0.35em;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.12);
  font-family: var(--font-mono);
  font-size: var(--step--1);
}
.vid-notfound a {
  color: var(--notbot-blue);
  font-weight: var(--fw-semibold);
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}