/* 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.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/montserrat-600.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/montserrat-800.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;
}
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;
  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-header {
  position: sticky;
  top: 0;
  z-index: 20;
  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-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: 60%;
  background-image: url("/assets/img/patterns/hero-dark.svg");
  background-position: right center;
}
.home-field--corner {
  top: 0;
  right: 0;
  width: 340px;
  height: 220px;
  background-image: url("/assets/img/patterns/corner-light.svg");
  background-position: right top;
}
.home-field--corner-dark {
  top: 0;
  right: 0;
  width: 420px;
  height: 260px;
  background-image: url("/assets/img/patterns/band-dark.svg");
  background-position: right top;
}
.home-field--close {
  inset-inline: 0;
  bottom: 0;
  height: 120px;
  background-image: url("/assets/img/patterns/band-dark.svg");
  background-position: center bottom;
}
.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);
}
.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: var(--navy);
  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);
}
.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;
}
.card-icon {
  width: 6rem;
  height: 6rem;
  border-radius: var(--radius);
  display: block;
}
.app-section__inner,
.developer-section__inner,
.transparency-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;
}
.section-art {
  justify-self: center;
  width: min(16rem, 100%);
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  display: block;
}
/* §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;
}
.transparency-section__inner {
  grid-template-columns: minmax(12rem, 0.36fr) minmax(0, 1fr);
}
.close-section {
  text-align: center;
}
.close-section__inner {
  display: grid;
  justify-items: center;
  padding-bottom: calc(var(--space-2xl) + 120px);
}
.close-section h2 {
  max-width: 24ch;
}
.close-section p {
  max-width: 58ch;
}
.mission-line {
  margin-top: var(--space-l);
  padding-block: var(--space-m);
  border-block: var(--hairline) solid rgb(255 255 255 / 0.35);
  font-size: var(--step-1);
  font-weight: var(--fw-extrabold);
}

@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 /signer, /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,
  .developer-section__inner,
  .transparency-section__inner {
    grid-template-columns: 1fr;
  }
  .section-art,
  .app-art {
    justify-self: start;
  }
  .feature-grid,
  .usecase-grid,
  .site-footer__nav {
    grid-template-columns: 1fr;
  }
  .transparency-section__inner .section-art {
    order: 2;
  }
}

@media (max-width: 45rem) {
  .home-field--hero {
    inset-block: auto;
    top: 0;
    width: 100%;
    height: 130px;
    background-position: right top;
  }
  .home-hero__inner {
    padding-top: 170px;
  }
  .home-field--corner,
  .home-field--corner-dark {
    display: none;
  }
  .home-section__inner,
  .home-band__inner {
    padding-block: var(--space-xl);
  }
  .close-section__inner {
    padding-bottom: calc(var(--space-xl) + 120px);
  }
  .feature-card,
  .usecase-card {
    padding: var(--space-m);
  }
  .store-badge {
    width: min(100%, 11.25rem);
  }
}

/* ---------- 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);
}
.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);
}
.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-m);
}
.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__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.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);
}

/* ---------- Hero page-load reveal ---------- */
/* One orchestrated entrance: copy lines and the proof card fade up in sequence,
   ordered by --reveal-i. Neutralized by the reduced-motion guard above. */
@media (prefers-reduced-motion: no-preference) {
  .verify-hero .reveal {
    opacity: 0;
    transform: translateY(0.75rem);
    animation: hero-reveal 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: calc(var(--reveal-i, 0) * 90ms);
  }
}
/* Scroll-reveal for the sections below the hero. Gated on .reveal-ready (added
   by verify-reveal.js) so content is never hidden without JS; skipped under
   reduced motion. Direct children of [data-reveal] stagger in. */
@media (prefers-reduced-motion: no-preference) {
  .reveal-ready [data-reveal] > * {
    opacity: 0;
    transform: translateY(1rem);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .reveal-ready [data-reveal] > *:nth-child(2) { transition-delay: 0.06s; }
  .reveal-ready [data-reveal] > *:nth-child(3) { transition-delay: 0.12s; }
  .reveal-ready [data-reveal] > *:nth-child(4) { transition-delay: 0.18s; }
  .reveal-ready [data-reveal] > *:nth-child(5) { transition-delay: 0.24s; }
  .reveal-ready [data-reveal] > *:nth-child(6) { transition-delay: 0.3s; }
  .reveal-ready [data-reveal].is-visible > * {
    opacity: 1;
    transform: none;
  }
}

@keyframes hero-reveal {
  to {
    opacity: 1;
    transform: none;
  }
}

/* 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);
}
.doc-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-l);
  margin-top: var(--space-m);
}

/* 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;
}
.tier-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding: var(--space-l);
  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 {
  align-self: start;
  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;
}
.tier-note {
  margin-top: var(--space-l);
  font-size: var(--step--1);
  color: var(--grey);
  max-width: var(--measure);
}

/* 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;
  }
}

/* ---------- Signer page ---------- */
/* Launch-status line in the hero (pre-launch marker). */
.signer-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);
}
.signer-status__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--action); /* "almost here" marker, orange not green */
}
.signer-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); }
}

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