/*
 * Home page (landing) styles — the prove.art v2 redesign.
 *
 * Palette: plaster wall / ink / Klein blue / archive grey
 * Type:    EB Garamond (display) · Archivo (body) · IBM Plex Mono (record data)
 *
 * Kept in its own file rather than folded into styles.css: the landing page is
 * a full-bleed editorial layout with its own type scale and rhythm, while
 * styles.css dresses the container-based public pages. The two share the type
 * system (partials/fonts.ejs) and the Klein blue accent, nothing else.
 *
 * The design shipped with its CSS in an inline <style> block. It lives here
 * because the app's Content-Security-Policy allows styles from 'self' only.
 */

:root {
  --plaster: #f7f6f1;
  --plaster-deep: #efede5;
  --ink: #16150f;
  --ink-soft: #3a382f;
  --grey: #6e6b60;
  --line: #dddace;
  /* The accent. Shared with the rest of the site — styles.css, verify.css and
     app.css all carry the same --klein, so the mark reads identically inside
     and outside the login wall. */
  --klein: #2626c4;
  --klein-deep: #1b1b8f;
  /* The accent lightened for ink-coloured surfaces, where the full-strength
     blue has too little contrast to read. */
  --klein-light: #9c9cf0;
  --verified: #1e7a46;
  --white: #ffffff;
  --danger: #b23a2e;
  --ff-display: 'EB Garamond', Georgia, serif;
  --ff-body: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --ff-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --maxw: 1120px;
}

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

html {
  scroll-behavior: smooth;
}

body {
  background: var(--plaster);
  color: var(--ink);
  font-family: var(--ff-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--klein);
  color: var(--white);
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: var(--klein);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--klein);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Keyboard users get the same skip target the application pages offer. */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 99;
  background: var(--ink);
  color: var(--plaster);
  padding: 0.6rem 1rem;
  text-decoration: none;
}
.skip-link:focus {
  left: 0;
}

/* ── SHARED ── */
.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

section {
  padding: 104px 0;
}

.eyebrow {
  font-family: var(--ff-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--klein);
  margin-bottom: 1.1rem;
}

h2 {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(1.9rem, 3.6vw, 2.7rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  max-width: 19em;
}

.btn {
  display: inline-block;
  font-family: var(--ff-body);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.95rem 1.7rem;
  border-radius: 2px;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid var(--ink);
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.btn-primary {
  background: var(--ink);
  color: var(--plaster);
}
.btn-primary:hover {
  background: var(--klein);
  border-color: var(--klein);
  color: var(--white);
}
.btn-ghost {
  background: transparent;
  color: var(--ink);
}
.btn-ghost:hover {
  background: var(--ink);
  color: var(--plaster);
}

/* ── NAV ── */
nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding: 18px 24px;
  background: rgba(247, 246, 241, 0.9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

/* The drawn wordmark (partials/logo.ejs), 2rem tall — the same height as
   .brand (styles.css) and .app-brand (app.css), so the mark does not change
   size as a visitor moves between the three headers. Width follows from the
   4.692:1 aspect ratio in the svg's viewBox. */
.nav-logo {
  display: flex;
  align-items: center;
  color: var(--ink);
  text-decoration: none;
}
.nav-logo .logo {
  display: block;
  height: 2rem;
  width: auto;
}

/* Account actions sit beside the section anchors in the same understated
   idiom, so the landing page still opens the door to the signed-in
   application. */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.nav-link {
  font-size: 0.9rem;
  color: var(--ink-soft);
  text-decoration: none;
}
.nav-link:hover {
  color: var(--klein);
}

.nav-signout {
  display: flex;
}

.nav-signout-btn {
  font-family: var(--ff-body);
  font-size: 0.9rem;
  color: var(--ink-soft);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.nav-signout-btn:hover {
  color: var(--klein);
}

.nav-cta {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--plaster);
  background: var(--ink);
  padding: 0.55rem 1.1rem;
  border-radius: 2px;
  text-decoration: none;
  white-space: nowrap;
}
.nav-cta:hover {
  background: var(--klein);
}

/* The hamburger. Hidden while the bar can hold the links itself; the narrow
   view at the foot of this section switches it on. Both glyphs live in the one
   button, and `body.nav-open` decides which of them is drawn. */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  background: none;
  border: 1px solid transparent;
  border-radius: 2px;
  color: var(--ink);
  cursor: pointer;
}
.nav-toggle:hover {
  color: var(--klein);
  border-color: var(--line);
}
.nav-toggle-close {
  display: none;
}
body.nav-open .nav-toggle-open {
  display: none;
}
body.nav-open .nav-toggle-close {
  display: block;
}

.nav-scrim {
  display: none;
}

/* Under the breakpoint the bar keeps only the wordmark and the hamburger, and
   the links become a panel that drops out of the bar's underside — dismissed
   by the hamburger again, by the scrim, by Escape, or by following any link in
   it. The in-page anchors come back here: the panel has the room the bar did
   not, so the whole marketing route stays reachable on a handset.

   `body.nav-open` is the whole of the state. public/js/home.js sets and clears
   that one class; every rule below reads it. */
@media (max-width: 780px) {
  .nav-toggle {
    display: inline-flex;
  }

  /* visibility, not opacity alone: a panel folded away must not keep handing
     its links to the keyboard. Its two transitions are lopsided for the same
     reason app.css's drawer is — opening flips visibility at once so home.js
     can move focus inside on the same tick, closing holds it for the length of
     the fade so the panel is still drawn while it leaves. */
  .nav-actions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 2;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 0;
    padding: 0.4rem 24px 1.4rem;
    background: var(--plaster);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 20px 40px -30px rgba(22, 21, 15, 0.6);
    /* The panel scrolls itself rather than pushing the page sideways when a
       short landscape handset cannot hold the whole list. */
    max-height: calc(100vh - 100%);
    max-height: calc(100dvh - 100%);
    overflow-y: auto;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-0.5rem);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
  }
  body.nav-open .nav-actions {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s;
  }

  /* Stacked, each one a full-width row with a tap target to match. */
  .nav-link,
  .nav-signout-btn {
    display: block;
    width: 100%;
    padding: 0.85rem 0;
    font-size: 1rem;
    text-align: left;
    border-bottom: 1px solid var(--line);
  }
  .nav-signout {
    display: block;
  }
  .nav-cta {
    margin-top: 1.2rem;
    padding: 0.9rem 1.1rem;
    font-size: 0.95rem;
    text-align: center;
  }

  .nav-scrim {
    display: block;
    position: fixed;
    inset: 0;
    /* Below the bar's own z-index, so the wordmark and the hamburger that
       closes the panel stay legible over the dimmed page. */
    z-index: 40;
    background: rgba(22, 21, 15, 0.38);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0s linear 0.2s;
  }
  body.nav-open .nav-scrim {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s ease, visibility 0s;
  }

  /* The page behind the panel must not scroll away under it. */
  body.nav-open {
    overflow: hidden;
  }
}

/* ── FLASH MESSAGES ── */
/* Logout and a few other redirects land on "/", so the landing page has to be
   able to show a flash without importing the application's styling. */
.flashes {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 24px 24px 0;
}

.flash {
  font-size: 0.92rem;
  padding: 14px 20px;
  background: var(--plaster-deep);
  border-left: 2px solid var(--klein);
  color: var(--ink-soft);
}
.flash + .flash {
  margin-top: 2px;
}
.flash-error {
  border-left-color: var(--danger);
}

/* ── HERO ── */
.hero {
  padding: 110px 0 90px;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 64px;
  align-items: center;
}
.hero h1 {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(2.5rem, 5.2vw, 3.9rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
}
.hero h1 em {
  font-style: italic;
  color: var(--klein);
}
.hero-sub {
  color: var(--ink-soft);
  font-size: 1.08rem;
  max-width: 33em;
  margin: 1.4rem 0 2.1rem;
}
.hero-cta-wrap {
  display: flex;
  gap: 0.9rem;
  flex-wrap: wrap;
  align-items: center;
}
.hero-note {
  font-size: 0.85rem;
  color: var(--grey);
  margin-top: 1rem;
  max-width: 32em;
}

/* ── SIGNATURE ELEMENT: the tap-to-verify plate ── */
.plate {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 3px;
  box-shadow: 0 24px 60px -30px rgba(22, 21, 15, 0.25);
  padding: 26px;
  user-select: none;
}
.plate-art {
  position: relative;
  border: 1px solid var(--line);
  background: var(--plaster-deep);
  cursor: pointer;
}
.plate-art svg {
  width: 100%;
  height: auto;
}
.chip {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
}
.chip svg {
  width: 18px;
  height: 18px;
}
.chip-pulse {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--klein);
  opacity: 0;
}
.verifying .chip-pulse {
  animation: chip-pulse 1.1s ease-out 2;
}
@keyframes chip-pulse {
  0% {
    transform: scale(0.6);
    opacity: 0.9;
  }
  100% {
    transform: scale(1.9);
    opacity: 0;
  }
}
.plate-caption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-family: var(--ff-mono);
  font-size: 0.7rem;
  color: var(--grey);
  margin-top: 12px;
  letter-spacing: 0.05em;
}
.plate-tap {
  margin-top: 16px;
  width: 100%;
  font-family: var(--ff-body);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.8rem;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.plate-tap:hover {
  background: var(--ink);
  color: var(--plaster);
}

/* Collapsed by default and opened by public/js/home.js adding .open — the
   design's inline max-height animation, moved into a class so the CSP does not
   have to allow style attributes. */
.record {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.6s ease;
}
.record.open {
  max-height: 420px;
}
.record-inner {
  border-top: 1px solid var(--line);
  margin-top: 18px;
  padding-top: 16px;
}
.record-status {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--ff-mono);
  font-size: 0.78rem;
  color: var(--verified);
  letter-spacing: 0.06em;
}
.record-status svg {
  width: 15px;
  height: 15px;
}
.record dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35rem 1.2rem;
  margin-top: 0.9rem;
  font-size: 0.85rem;
}
.record dt {
  font-family: var(--ff-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey);
  padding-top: 0.15em;
}
.record dd {
  color: var(--ink);
}
.record dd.mono {
  font-family: var(--ff-mono);
  font-size: 0.78rem;
  color: var(--ink-soft);
}

/* ── TRUST BAR ── */
.trust {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 22px 0;
  background: var(--plaster-deep);
}
.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2.6rem;
  justify-content: center;
}
.trust-item {
  font-family: var(--ff-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.trust-item::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--klein);
  border-radius: 50%;
  flex: none;
}

/* ── PROBLEM ── */
.problem-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.6rem;
  margin-top: 3.4rem;
}
.problem-item h3 {
  font-family: var(--ff-display);
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1.25;
  margin-bottom: 0.7rem;
}
.problem-item p {
  color: var(--ink-soft);
  font-size: 0.97rem;
}
.problem-stat {
  margin-top: 3.6rem;
  border-left: 2px solid var(--klein);
  padding: 0.4rem 0 0.4rem 1.4rem;
  color: var(--grey);
  font-size: 0.95rem;
  max-width: 44em;
}
.problem-stat strong {
  color: var(--ink);
  font-weight: 600;
}

/* ── POSITIONING TABLE ── */
.compare {
  background: var(--white);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.compare-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 3rem;
  font-size: 0.93rem;
}
.compare-table th,
.compare-table td {
  padding: 1rem 1.2rem;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.compare-table thead th {
  font-family: var(--ff-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grey);
  font-weight: 500;
}
.compare-table thead th.col-prove {
  color: var(--klein);
}
.compare-table td {
  color: var(--grey);
}
.compare-table td:first-child {
  color: var(--ink);
  font-weight: 500;
  width: 30%;
}
.compare-table td.col-prove {
  color: var(--ink);
  font-weight: 500;
  background: rgba(38, 38, 196, 0.045);
}
.compare-note {
  margin-top: 2rem;
  color: var(--ink-soft);
  max-width: 44em;
  font-size: 0.97rem;
}
.table-scroll {
  overflow-x: auto;
}

/* ── HOW IT WORKS ── */
.how-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.6rem;
  margin-top: 3.4rem;
}
.how-step .step-n {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--klein);
  border-bottom: 1px solid var(--line);
  display: block;
  padding-bottom: 0.6rem;
  margin-bottom: 1rem;
}
.how-step h3 {
  font-family: var(--ff-display);
  font-size: 1.3rem;
  font-weight: 500;
  margin-bottom: 0.6rem;
  line-height: 1.25;
}
.how-step p {
  color: var(--ink-soft);
  font-size: 0.96rem;
}

/* ── FOR THE TRADE ── */
.for-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
  margin-top: 3.2rem;
}
.for-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 2rem 1.8rem;
}
.for-card h3 {
  font-family: var(--ff-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: 0.9rem;
  font-weight: 500;
}
.for-card .for-lead {
  font-family: var(--ff-display);
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1.25;
  margin-bottom: 1.1rem;
}
.for-card ul {
  list-style: none;
}
.for-card li {
  position: relative;
  padding-left: 1.3rem;
  margin-bottom: 0.65rem;
  font-size: 0.93rem;
  color: var(--ink-soft);
}
.for-card li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 7px;
  height: 7px;
  background: var(--klein);
}

/* ── FOUNDING PROGRAMME ── */
.founding {
  background: var(--ink);
  color: var(--plaster);
}
.founding .eyebrow {
  color: var(--klein-light);
}
.founding h2 {
  color: var(--plaster);
}
.founding-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 64px;
  align-items: start;
  margin-top: 1rem;
}
.founding p {
  color: #c9c7bc;
  max-width: 36em;
  margin-top: 1.1rem;
}
.founding ul {
  list-style: none;
  margin-top: 0.4rem;
}
.founding li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.9rem;
  color: #e8e6dc;
}
.founding li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--klein-light);
}
.founding .btn-light {
  background: var(--plaster);
  color: var(--ink);
  border-color: var(--plaster);
  margin-top: 2rem;
}
.founding .btn-light:hover {
  background: var(--klein-light);
  border-color: var(--klein-light);
  color: var(--ink);
}

/* ── PRICING ── */
/* The cards stretch to the tallest tier so the three columns read as one
   block and their calls to action land on the same line. */
.price-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
  margin-top: 3.2rem;
  align-items: stretch;
}
.price-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 2.1rem 1.9rem;
  position: relative;
  display: flex;
  flex-direction: column;
}
/* The middle tier is the one most buyers land on, so it is the one the eye
   is sent to. */
.price-card-featured {
  border-color: var(--klein);
  box-shadow: 0 20px 50px -30px rgba(38, 38, 196, 0.35);
}
.price-badge {
  position: absolute;
  top: -11px;
  left: 1.9rem;
  background: var(--klein);
  color: var(--white);
  font-family: var(--ff-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  border-radius: 2px;
}
.price-name {
  font-family: var(--ff-display);
  font-size: 1.5rem;
  font-weight: 500;
}
.price-amount-row {
  margin: 0.9rem 0 0.2rem;
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.price-from {
  font-size: 0.85rem;
  color: var(--grey);
}
.price-amount {
  font-family: var(--ff-display);
  font-size: 2.2rem;
  font-weight: 500;
}
.price-period {
  color: var(--grey);
  font-size: 0.9rem;
}
.price-perwork {
  font-family: var(--ff-mono);
  font-size: 0.72rem;
  color: var(--klein);
  letter-spacing: 0.04em;
  margin-bottom: 1rem;
}
.price-for {
  color: var(--ink-soft);
  font-size: 0.93rem;
  margin-bottom: 1.2rem;
}
.price-inherits {
  font-family: var(--ff-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--grey);
  margin-bottom: 0.8rem;
}
.price-list {
  list-style: none;
  margin-bottom: 0;
}
.price-list li {
  position: relative;
  padding-left: 1.3rem;
  margin-bottom: 0.6rem;
  font-size: 0.92rem;
  color: var(--ink-soft);
}
.price-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 7px;
  height: 7px;
  background: var(--klein);
}
/* Everything from the rule downwards is one closing block, held at the foot of
   the card. `margin-top: auto` takes up the slack left by a shorter list, which
   is also what opens the gap between the last option and the rule. */
.price-foot {
  margin-top: auto;
  padding-top: 2.4rem;
}
.price-overage {
  font-family: var(--ff-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--grey);
  border-top: 1px solid var(--line);
  padding-top: 0.9rem;
  margin: 0 0 1.4rem;
}
.price-quote {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: 1.02rem;
  color: var(--ink);
  border-left: 2px solid var(--klein);
  padding-left: 1rem;
  margin-bottom: 1.6rem;
  line-height: 1.4;
}
/* Last element of the pinned foot, so the CTAs sit on one line across tiers. */
.price-cta {
  display: block;
  text-align: center;
}
.price-included {
  font-size: 0.9rem;
  color: var(--grey);
  margin-top: 1.2rem;
  max-width: 46em;
}
.price-reversal {
  margin-top: 3rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 1.4rem 1.8rem;
  font-size: 0.95rem;
  color: var(--ink-soft);
  max-width: 52em;
}
.price-reversal strong {
  color: var(--ink);
}

/* ── FAQ ── */
.faq {
  background: var(--white);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.faq-list {
  margin-top: 2.6rem;
  max-width: 52em;
}
.faq-item {
  border-bottom: 1px solid var(--line);
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding: 1.3rem 0;
  font-family: var(--ff-display);
  font-size: 1.18rem;
  font-weight: 500;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary::after {
  content: '+';
  font-family: var(--ff-mono);
  color: var(--klein);
  font-size: 1.2rem;
  flex: none;
  transition: transform 0.25s ease;
}
.faq-item[open] summary::after {
  transform: rotate(45deg);
}
.faq-item p {
  color: var(--ink-soft);
  font-size: 0.96rem;
  padding: 0 2.5rem 1.4rem 0;
  max-width: 46em;
}

/* ── CONTACT ── */
.contact-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 64px;
  margin-top: 1rem;
}
.contact-left p {
  color: var(--ink-soft);
  max-width: 30em;
  margin-top: 1.1rem;
}
.contact-detail {
  margin-top: 2.4rem;
  font-size: 0.9rem;
  color: var(--grey);
}
.contact-detail strong {
  display: block;
  font-family: var(--ff-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 0.25rem;
}
.contact-detail a {
  color: var(--klein);
  text-decoration: none;
}

/* ── FORM ── */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
  margin-bottom: 1.1rem;
}
.form-row.single {
  grid-template-columns: 1fr;
}
/* The honeypot in the enquiry form. A form-filling script reads the HTML and
   never this file, so the field is there to be filled — for everyone else it
   does not exist. */
.form-hp {
  display: none;
}
.form-field {
  display: flex;
  flex-direction: column;
}
.form-label {
  font-family: var(--ff-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: 0.45rem;
}
/* "(optional)" is said, not shouted: it sits inside an uppercase mono label
   without competing with the field name it qualifies. */
.form-optional {
  text-transform: none;
  letter-spacing: 0.02em;
  opacity: 0.7;
}
.form-input,
.form-textarea,
.form-select {
  font-family: var(--ff-body);
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 0.8rem 0.9rem;
  width: 100%;
}
.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  border-color: var(--klein);
}
.form-textarea {
  min-height: 120px;
  resize: vertical;
}
.form-textarea::placeholder,
.form-input::placeholder {
  color: #b6b3a8;
}
.form-select {
  cursor: pointer;
  /* The native arrow is painted against the border box and ignores padding, so
     the only way to move it off the edge is to draw our own. The chevron is a
     data: URI — no extra request, and img-src already permits data: — matched
     to --grey, and background-position is what actually sets the gap. The
     padding-right then keeps a long option from running underneath it. */
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%236e6b60' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.75 6 6.25 11 1.75'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 11px 7px;
  padding-right: 2.4rem;
}

/* Marks a field the client-side check rejected. Replaces the inline border the
   original script assigned. */
.form-input.invalid {
  border-color: var(--danger);
}

.form-submit {
  font-family: var(--ff-body);
  font-weight: 600;
  font-size: 0.95rem;
  background: var(--ink);
  color: var(--plaster);
  border: 1px solid var(--ink);
  border-radius: 2px;
  padding: 0.95rem 1.8rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.form-submit:hover {
  background: var(--klein);
  border-color: var(--klein);
}
.form-submit:disabled {
  cursor: wait;
}
.form-submit-arrow {
  font-size: 1.05rem;
}

.form-reassure {
  font-size: 0.83rem;
  color: var(--grey);
  margin-top: 0.9rem;
}

/*
 * reCAPTCHA v3 disclosure, and the badge it replaces. Google permits hiding the
 * floating badge only where the notice is shown beside the form, so these are a
 * pair. The badge is hidden because it floats over the bottom-right of every
 * page, above the footer and the pricing cards.
 */
.grecaptcha-badge {
  visibility: hidden;
}

.form-legal {
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--grey);
  margin-top: 0.55rem;
}

.form-legal a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.form-legal a:hover,
.form-legal a:focus-visible {
  color: var(--ink);
}

/* Success state */
.form-success {
  display: none;
}
.form-success.visible {
  display: block;
}
.form-success-title {
  font-family: var(--ff-display);
  font-size: 1.9rem;
  font-weight: 500;
  font-style: italic;
  color: var(--ink);
  margin-bottom: 0.6rem;
}
.form-success-body {
  font-size: 0.95rem;
  color: var(--ink-soft);
}

/* Hides the form once the enquiry is accepted. */
.contact-form.sent {
  display: none;
}

.form-error {
  color: var(--danger);
  font-size: 0.85rem;
  margin-top: 1rem;
}
.form-error:empty {
  margin-top: 0;
}

/* ── FOOTER ── */
footer {
  border-top: 1px solid var(--line);
  padding: 2.2rem 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  max-width: var(--maxw);
  margin: 0 auto;
}
/* Smaller than the header's, but no smaller: the brand package sets the floor
   at a 16px cap height, which this drawing reaches at 26px tall. */
.footer-logo {
  display: inline-flex;
  align-items: center;
  color: var(--ink);
  text-decoration: none;
}
.footer-logo .logo {
  display: block;
  height: 26px;
  width: auto;
}
.footer-copy {
  font-size: 0.8rem;
  color: var(--grey);
}

/* ── SCROLL REVEAL ── */
/* Only hide elements up-front when the user is OK with motion AND JS is active
   (html.anim-ready). Otherwise everything renders normally — no flash, no
   content trapped at opacity 0. */
@media (prefers-reduced-motion: no-preference) {
  html.anim-ready .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.7s ease, transform 0.7s ease;
    will-change: opacity, transform;
  }
  html.anim-ready .reveal.in-view {
    opacity: 1;
    transform: none;
  }
}

/* ── RESPONSIVE ── */
@media (max-width: 960px) {
  .for-grid,
  .price-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .hero {
    padding: 70px 0 60px;
  }
  .hero-grid,
  .founding-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .problem-grid,
  .how-grid {
    grid-template-columns: 1fr;
    gap: 2.2rem;
  }
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 2.6rem;
  }
  .form-row {
    grid-template-columns: 1fr;
  }
  section {
    padding: 72px 0;
  }
}

@media (max-width: 720px) {
  .compare-table {
    min-width: 640px;
  }
}

@media (max-width: 620px) {
  nav {
    padding: 14px 20px;
    gap: 1rem;
  }
  /* The bar's own padding narrows here; the panel hangs off the bar, so its
     rows have to line up with the wordmark above them. */
  .nav-actions {
    padding-left: 20px;
    padding-right: 20px;
  }
  footer {
    flex-direction: column;
    text-align: center;
  }
}

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