/* Extracted verbatim from the single-file index.html. The content, the
   markup and these rules are Daw's; only the layout of the repository
   changed. Repainted to the shared design system in a later commit — see
   docs/design-system.md. */

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

/* ===========================================================================
   docsdone — the marketing site

   The content, the markup and the drawings on this page are Daw's. The paint
   is the shared design system: docs/design-system.md is canonical and is
   byte-identical to the copy in the product monorepo, so the two surfaces
   stay one product without importing anything from each other.
   `make brand` checks this stylesheet against that document.

   Two materials, not two colour schemes.

     LIGHT — printed paper, lightly bleached blue: the paper of a ruled
             exercise book. The DEFAULT, and the unstamped :root, so a browser
             that never runs a theme script still lands on it.
     DARK  — an engraved plate. The ink that WAS the ruling becomes the
             ground, and gold and cyan are metal exposed by the cut lines.

   Three marks, three jobs, and none shares a job with another:

     --action     the PRIMARY ACTION. A sheet of paper, in both materials. On
                  paper a white fill is 1.00:1 against the panel it sits on,
                  so the RULE around it does the work and it reads as a field
                  on a printed form.
     --accent     SEALED, and only that. A fill, a mark, a wax seal — never a
                  button. It meant "sealed" and "press this" at once once, and
                  a mark that means two things means neither.
     --accent-ink the accent that has to be READ. It follows the RULING of the
                  material: navy on paper, gold on the plate.

   The neutrals are cool on purpose. Warm hairlines are what made this page
   read yellow long after the gold came out of the accents — a border covers
   more pixels than any accent does.
   ======================================================================== */

/* --- printed paper: the default ------------------------------------------ */
:root {
  color-scheme: light;
  --bg:             #f9fbfe;
  --surface:        #ffffff;
  --surface-2:      #edf1f8;
  --border:         #b9c4db;
  --border-strong:  #a3b0cf;

  --text:           #10152e;
  --text-dim:       #4c5474;
  --text-faint:     #636a86;

  --action:         #fcfdff;
  --on-action:      #10152e;
  /* The label on an --accent-ink FILL. --accent-ink follows the material's
     ruling, so its label has to follow too; --on-action sits on paper, which
     is near-white in both, and --on-accent sits on the seal, which is gold in
     both. Only this one swaps. See the same block in the app's stylesheet. */
  --on-accent-ink:  #fcfdff;   /* on navy: 6.85:1 */
  --action-line:    #10152e;
  --action-hover:   #edf1f8;

  --accent:         #ffc31f;
  --accent-ink:       #2f56a7;
  /* The accent used as a FIELD rather than a mark — the closing band, and
     nothing else so far. Deliberately the same value in both materials: a
     band is one object, and it does not become a different colour because
     the page around it changed. */
  --accent-field:     #2f56a7;
  /* The filled primary action. It is the read accent because the read accent
     is already the page's colour — gold means sealed and cannot be a button. */
  --accent-ink-hover: #24438a;
  --on-accent:      #1b1200;
  --good-fill:      #25e6d0;
  --good:           #0b6e64;
  --bad:            #c02d12;

  /* Ink drawn on paper in the mock, so it is fixed with the paper the way the
     signature pad's stroke is in the app. */
  --signature:      var(--text);

  --display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --sans:    "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono:    "Martian Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Corners curve. This was 2px and 3px — hard edges — for as long as the
     engraved-plate idea carried the page; with that gone, the shapes were the
     last thing still braced against a design that is not there any more.
     8px reads as considered rather than as a default; --radius-lg is for the
     larger objects, and a chip is a pill because a chip is a thing you could
     pick up off the page. */
  --radius: 4px;
  --radius-lg: 6px;
  /* A chip stays a pill: it is a small thing you could pick up off the page,
     and at this size a 5px corner just reads as a slightly soft rectangle. */
  --radius-chip: 999px;
  --max: 1120px;
}

/* --- the engraved plate -------------------------------------------------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:             #080d24;
  --surface:        #0e1533;
  --surface-2:      #151d42;
  --border:         #242f63;
  --border-strong:  #33407e;

  --text:           #eef1ff;
  --text-dim:       #9aa5d6;
  --text-faint:     #8e99c9;

  --action:         #fffdf6;
  --on-accent-ink:  #10152e;   /* on gold: 11.19:1 */
  --action-line:    #fffdf6;
  --action-hover:   #ede9dc;

  --accent-ink:       #ffc31f;
  --accent-field:     #2f56a7;
  --accent-ink-hover: #ffd35c;
  --good:           #25e6d0;
  --bad:            #ff5334;
}

/* --- headings take the display face -------------------------------------
   Bricolage Grotesque is variable across weight AND width, which is why it is
   the display face: a heading can be set tight and heavy without reaching for
   a second family. Body copy stays Instrument Sans, and Martian Mono is for
   the parts that behave like a printed record.

   This rule did not exist. The face was loaded from Google and named in the
   token block, and nothing referenced it, so every heading kept the body font
   and the entire type half of the port was invisible.
   ---------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--display);
  /* Bricolage is already tight at wdth 100; -0.03em on top of a condensed
     width is what made the hero look packed. */
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h1 { font-variation-settings: "wght" 700, "wdth" 100; }
h2, h3 { font-variation-settings: "wght" 650, "wdth" 100; }

html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Nav */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 250, 249, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 40px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.03em;
  text-decoration: none;
  color: var(--text);
  font-family: var(--display);
  font-variation-settings: "wght" 700, "wdth" 92;
}
/* Two tones, because the name is two words. "done" takes the read accent —
   the same blue as the emphasis in the headline.

   The word is wrapped in its own span: .logo is a flex row with a 10px gap
   for the mark, and a bare <em> becomes a flex item, which puts that gap
   through the middle of the name. */
.logo-word { display: inline; }
.logo em { font-style: normal; color: var(--accent-ink); }

.logo-mark {
  width: 28px;
  height: 28px;
  /* The same blue as the emphasis in the headline. The glyph took
     fill="white" as an attribute, which no CSS colour could reach, so it is
     currentColor now and this sets it. */
  background: var(--accent-ink);
  color: var(--on-accent-ink);
  border-radius: var(--radius);
  display: grid;
  place-items: center;
}
.logo-mark svg { display: block; }
.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
  /* Beside the wordmark, not adrift in the middle: this pushes the actions
     to the right instead of centring the nav between them. */
  margin-right: auto;
}
.nav-links a {
  text-decoration: none;
  color: var(--text-dim);
  font-size: 14px;
  font-weight: 500;
  transition: color 0.15s;
}
.nav-links a:hover { color: var(--text); }
.nav-actions { display: flex; align-items: center; gap: 12px; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.btn-primary {
  background: var(--accent-ink);
  color: var(--on-accent-ink);
  border: 1px solid var(--accent-ink);
}
.btn-primary:hover { background: var(--accent-ink-hover); border-color: var(--accent-ink-hover); }
.btn-ghost { background: transparent; color: var(--text-dim); }
.btn-ghost:hover { color: var(--text); }
/* Quieter than the primary, not louder. Three CTAs sit side by side on the
   pricing cards and the primary's ink rule has to lead — so the secondary
   takes the hairline and the dimmer label rather than the strong border,
   which was close enough to read as equal weight. */
.btn-outline {
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--border);
}
.btn-outline:hover { color: var(--text); border-color: var(--border-strong); }
.btn-lg { padding: 14px 28px; font-size: 15px; }

/* Layout */
.container { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
section { padding: 96px 0; }
section.compact { padding: 64px 0; }

/* Hero */
.hero {
  padding: 80px 0 96px;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.hero-badge,
.sol-badge {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-chip);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-dim);
  margin-bottom: 24px;
}
.hero-badge .dot {
  width: 6px;
  height: 6px;
  background: var(--good);
  border-radius: 50%;
}
.hero h1 {
  font-size: clamp(36px, 4.4vw, 48px);
  font-weight: 700;
  font-variation-settings: "wght" 700, "wdth" 100;
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin-bottom: 22px;
}
.hero h1 em {
  font-style: normal;
  color: var(--accent-ink);
}
.hero-sub {
  font-size: 18px;
  color: var(--text-dim);
  line-height: 1.6;
  margin-bottom: 32px;
  max-width: 440px;
}
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 40px; }
.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
/* A ticked claim. There are three places on this page that assert something
   with a tick beside it, and they were dressed three different ways — chips
   in the hero, bare rows in the mobile section, and a ::before pseudo in the
   pricing cards carrying a hardcoded green inside a data URI. One shape now,
   one rule, and the check in scripts/brand-drift.py fails if a fourth appears
   wearing something else. */
.trust-item,
.mobile-bullet {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px 7px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius-chip);
  background: var(--surface);
  font-size: 13px;
  color: var(--text-dim);
  font-weight: 500;
  white-space: nowrap;
}
.trust-item svg { flex-shrink: 0; color: var(--good); }

/* Product demo */
.demo-frame {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 20px 40px -16px rgba(15, 23, 42, 0.14);
  animation: heroFloat 5s ease-in-out infinite;
}
@keyframes heroFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
/* Depictions keep their shape as well as their colour: a phone has round
   corners, a browser's traffic lights are circles, an iOS bubble is an iOS
   bubble. Squaring these would make the drawing a lie, exactly as repainting
   them would. Everything that is our INTERFACE is hard-edged. */
.demo-chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.demo-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong); }
.demo-dot:first-child { background: var(--bad); }
.demo-dot:nth-child(2) { background: var(--accent); }
.demo-dot:nth-child(3) { background: var(--good-fill); }
.demo-chrome-label {
  flex: 1;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}
.demo-body { padding: 28px; }
.demo-doc {
  background: #FFFFFF;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 28px;
  min-height: 300px;
  position: relative;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.demo-doc-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
  letter-spacing: -0.02em;
}
.demo-doc-lines {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.demo-line {
  height: 7px;
  background: var(--border);
  border-radius: 4px;
}
.demo-line.short { width: 60%; }
.demo-line.shorter { width: 40%; }
.sig-field {
  position: absolute;
  bottom: 28px;
  right: 28px;
  width: 200px;
  height: 72px;
  border: 2px dashed var(--accent-ink);
  border-radius: var(--radius);
  background: rgba(37, 99, 235, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.sig-field-label {
  position: absolute;
  top: -20px;
  left: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent-ink);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.sig-stroke {
  stroke: var(--signature);
  stroke-width: 2.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  animation: drawSig 2.5s ease-in-out 0.5s forwards;
}
@keyframes drawSig {
  to { stroke-dashoffset: 0; }
}
.demo-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--accent) 60%, var(--border));
  border-radius: var(--radius-chip);
  font-size: 13px;
  font-weight: 600;
}
.status-meta { font-size: 12px; color: var(--text-dim); }

/* iPhone mockups */
.phone-mock {
  background: linear-gradient(160deg, var(--surface) 0%, var(--bg) 100%);
  border-radius: 48px;
  padding: 3px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 32px 64px -12px rgba(15, 23, 42, 0.22),
    0 12px 24px -8px rgba(15, 23, 42, 0.08);
  position: relative;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', system-ui, sans-serif;
}
.phone-screen {
  background: var(--surface-2);
  border-radius: 45px;
  overflow: hidden;
  min-height: 200px;
  position: relative;
  display: flex;
  flex-direction: column;
}
.ios-status {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 10px 18px 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.02em;
}
.ios-time { justify-self: start; }
.ios-dynamic-island {
  width: 68px;
  height: 20px;
  background: #000;
  border-radius: 999px;
  justify-self: center;
}
.ios-status-icons {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 4px;
}
.ios-status-icons svg { display: block; }

.ios-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 12px 8px;
  background: var(--surface-2);
  border-bottom: 0.5px solid var(--ios-separator);
  min-height: 36px;
}
.ios-nav-back {
  display: flex;
  align-items: center;
  gap: 2px;
  color: var(--accent-ink);
  font-size: 11px;
  font-weight: 400;
}
.ios-nav-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.02em;
}
.ios-nav-action {
  font-size: 11px;
  color: var(--accent-ink);
  font-weight: 400;
  min-width: 40px;
  text-align: right;
}

.phone-content {
  padding: 12px 14px 8px;
  flex: 1;
  background: #FFFFFF;
}
.phone-content.ios-messages {
  background: #FFFFFF;
  padding: 8px 12px 12px;
}
.phone-content.ios-signing {
  background: var(--surface-2);
  padding: 0;
}

.ios-msg-header {
  text-align: center;
  padding: 8px 0 12px;
}
.ios-msg-contact {
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
}
.ios-msg-sub {
  font-size: 9px;
  color: var(--ios-secondary);
  margin-top: 2px;
}
.ios-bubble {
  max-width: 88%;
  background: var(--surface-2);
  border-radius: 18px;
  border-bottom-left-radius: 4px;
  padding: 8px 11px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--text);
}
.ios-bubble a, .ios-bubble-link {
  color: var(--accent-ink);
  text-decoration: none;
  word-break: break-all;
}
.ios-bubble-time {
  font-size: 9px;
  color: var(--ios-secondary);
  margin-top: 4px;
  text-align: right;
}

.ios-doc-card {
  margin: 12px;
  background: #FFFFFF;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.ios-doc-preview {
  padding: 14px;
  border-bottom: 0.5px solid var(--ios-separator);
}
.phone-doc-title {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 4px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--text);
}
.phone-doc-sub {
  font-size: 11px;
  color: var(--ios-secondary);
  font-weight: 400;
}
.phone-line {
  height: 5px;
  background: var(--ios-separator);
  border-radius: 3px;
  margin-bottom: 6px;
}
.phone-line.short { width: 65%; }
.ios-sig-section {
  padding: 12px 14px 14px;
}
.ios-sig-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--ios-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.phone-sig-area {
  height: 52px;
  border: 1px dashed rgba(0, 122, 255, 0.45);
  border-radius: 12px;
  background: rgba(0, 122, 255, 0.03);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.phone-sig-stroke {
  stroke: var(--text);
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: drawSigPhone 3s ease-in-out 0.8s infinite;
}
@keyframes drawSigPhone {
  0%, 20% { stroke-dashoffset: 200; }
  60%, 100% { stroke-dashoffset: 0; }
}
.ios-sign-footer {
  padding: 12px 14px 16px;
  background: var(--surface-2);
}
.phone-sign-btn {
  width: 100%;
  padding: 11px;
  background: var(--accent-ink);
  color: var(--on-accent-ink);
  border: none;
  border-radius: 12px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  animation: btnPulse 3s ease-in-out infinite;
}
@keyframes btnPulse {
  0%, 55%, 100% { transform: scale(1); opacity: 1; }
  65% { transform: scale(0.98); opacity: 0.92; }
  75% { transform: scale(1); opacity: 1; }
}
.ios-success-banner {
  margin-top: 10px;
  padding: 10px 12px;
  background: rgba(52, 199, 89, 0.12);
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--good);
  text-align: center;
  animation: toastIn 3s ease-in-out infinite;
}
@keyframes toastIn {
  0%, 65% { opacity: 0; transform: translateY(4px); }
  75%, 100% { opacity: 1; transform: translateY(0); }
}

.ios-home-indicator {
  width: 96px;
  height: 4px;
  background: #000;
  border-radius: 999px;
  margin: 6px auto 8px;
  opacity: 0.18;
  flex-shrink: 0;
}
.phone-screen.ios-dark-home .ios-home-indicator {
  background: #fff;
  opacity: 0.22;
}

/* Legacy aliases — hide old chrome */
.phone-notch, .phone-home-bar, .phone-status-bar, .phone-toast { display: none; }

/* Mobile showcase section */
.mobile-showcase {
  padding: 80px 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.mobile-showcase-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.mobile-showcase-copy h2 {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 16px;
}
.mobile-showcase-copy p {
  color: var(--text-dim);
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 24px;
}
.mobile-bullets {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.mobile-bullet svg,
.trust-item svg { color: var(--good); flex-shrink: 0; }
.mobile-phones {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 520px;
}
.phone-mock.showcase-phone-main {
  width: 260px;
  margin-left: 72px;
  z-index: 2;
  animation: phoneFloat 6s ease-in-out infinite;
}
.phone-mock.showcase-phone-main .phone-screen {
  min-height: 520px;
}

/* Floating SMS card — no phone chrome */
.sms-card {
  position: absolute;
  left: 24px;
  top: 56px;
  width: 228px;
  z-index: 1;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  animation: smsFloat 6s ease-in-out infinite 0.4s;
}
@keyframes smsFloat {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-6px) rotate(-2deg); }
}
.sms-card-inner {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: 22px;
  padding: 14px 16px 16px;
  box-shadow:
    0 16px 40px -8px rgba(15, 23, 42, 0.14),
    0 0 0 1px rgba(0, 0, 0, 0.04);
}
.sms-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.sms-app-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: linear-gradient(180deg, var(--good-fill) 0%, var(--good) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(52, 199, 89, 0.35);
}
.sms-app-icon svg { display: block; }
.sms-sender {
  font-size: 14px;
  font-weight: 600;
  color: #000;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.sms-meta {
  font-size: 11px;
  color: rgba(60, 60, 67, 0.6);
  margin-top: 1px;
}
.sms-bubble {
  /* An iOS incoming bubble, and a picture of a phone is not interface chrome —
     the same rule that keeps .pdf-canvas and .sig-pad literal in the app. The
     text beside it is already Apple's own #000 and rgba(60,60,67,.6), so a
     themed GROUND under literal text is the mismatch: on the plate it resolved
     to #151d42 and put that black text at 1.29:1. Latent only because the dark
     block is unreachable here, which is not a reason to leave it. */
  background: #e9e9eb;
  border-radius: 18px;
  border-bottom-left-radius: 5px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.45;
  color: #000;
  letter-spacing: -0.01em;
}
.sms-bubble-link {
  color: var(--accent-ink);
  font-weight: 500;
}
.sms-time {
  font-size: 11px;
  color: rgba(60, 60, 67, 0.45);
  text-align: right;
  margin-top: 8px;
}
.sms-connector {
  position: absolute;
  right: -28px;
  top: 50%;
  width: 32px;
  height: 1px;
  background: linear-gradient(90deg, rgba(60, 60, 67, 0.2), transparent);
}
.sms-connector::after {
  content: '';
  position: absolute;
  right: 0;
  top: -3px;
  width: 7px;
  height: 7px;
  border-top: 1.5px solid rgba(60, 60, 67, 0.25);
  border-right: 1.5px solid rgba(60, 60, 67, 0.25);
  transform: rotate(45deg);
}
@keyframes phoneFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* Testimonial strip */
.quote-strip {
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 40px 0;
}
.quote-inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.quote-text {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.01em;
  margin-bottom: 16px;
}
.quote-attr { font-size: 14px; color: var(--text-dim); }

/* Section headers */
.section-label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--good);
  margin-bottom: 14px;
}
.section-title {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 16px;
}
.section-desc {
  font-size: 16px;
  color: var(--text-dim);
  max-width: 520px;
}
.section-header { margin-bottom: 48px; }
.section-header.center { text-align: center; }
.section-header.center .section-desc { margin: 0 auto; }

/* Steps — unified accordion + visual */
.workflow-unified {
  display: grid;
  grid-template-columns: minmax(300px, 40%) 1fr;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  min-height: 480px;
}
.workflow-nav {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border-right: 1px solid var(--border);
}
.accord-item {
  border-bottom: 1px solid var(--border);
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.accord-item:last-child { border-bottom: none; }
.accord-item.active {
  background: var(--surface);
}
.accord-item.active::after {
  content: '';
  position: absolute;
  top: 0;
  right: -1px;
  bottom: 0;
  width: 2px;
  background: var(--action);
  z-index: 2;
}
.accord-trigger {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 24px 24px 16px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--sans);
  transition: background 0.2s;
}
.accord-trigger:hover { background: rgba(255,255,255,0.5); }
.accord-item.active .accord-trigger { padding-bottom: 8px; }
.accord-num {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  min-width: 22px;
  padding-top: 2px;
}
.accord-item.active .accord-num { color: var(--accent-ink); }
.accord-heading { flex: 1; min-width: 0; }
.accord-title {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
  margin-bottom: 0;
  transition: color 0.2s;
}
.accord-item:not(.active) .accord-title { color: var(--text-dim); }
.accord-item.active .accord-title { color: var(--text); }
.accord-chevron {
  width: 18px;
  height: 18px;
  color: var(--text-dim);
  transition: transform 0.25s ease, color 0.2s;
  flex-shrink: 0;
  margin-top: 2px;
  opacity: 0;
}
.accord-item.active .accord-chevron {
  opacity: 1;
  transform: rotate(180deg);
  color: var(--accent-ink);
}
.accord-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.35s ease, opacity 0.3s ease;
  padding: 0 24px 0 60px;
  opacity: 0;
}
.accord-item.active .accord-body {
  max-height: 100px;
  padding: 0 24px 20px 60px;
  opacity: 1;
}
.accord-body p {
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.6;
}
.accord-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--border);
}
.accord-progress::after {
  content: '';
  display: block;
  height: 100%;
  width: 0;
  background: var(--action);
}
.accord-item.active .accord-progress.animating::after {
  animation: accordProgress 5s linear forwards;
}
@keyframes accordProgress {
  from { width: 0; }
  to { width: 100%; }
}

.workflow-visual {
  position: relative;
  background: var(--surface);
  min-height: 480px;
}
.workflow-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, var(--border) 1px, transparent 0);
  background-size: 24px 24px;
  opacity: 0.45;
  pointer-events: none;
}
.stage-panel {
  position: absolute;
  inset: 0;
  padding: 40px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.98);
  transition: opacity 0.45s ease, transform 0.45s ease, visibility 0.45s;
  z-index: 1;
}
.stage-panel.active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}
.stage-label {
  position: absolute;
  top: 20px;
  left: 24px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  z-index: 2;
}
.stage-demo-desktop {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.06);
}
.stage-demo-bar {
  padding: 10px 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  font-family: var(--mono);
  color: var(--text-dim);
}
.stage-demo-content { padding: 24px; min-height: 220px; position: relative; background: var(--bg); }
.stage-phone { width: 260px; box-shadow: 0 16px 40px rgba(15, 23, 42, 0.1); }
.stage-phone .phone-screen { min-height: 320px; }
.stage-phone .phone-doc-title { font-size: 12px; }
.stage-phone .phone-sign-btn { font-size: 12px; padding: 10px; }

.stage-drop-zone {
  border: 2px dashed var(--accent-ink);
  border-radius: var(--radius);
  height: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--accent-ink);
  font-size: 14px;
  font-weight: 600;
}
.stage-panel.active .stage-drop-zone {
  animation: stageDropPulse 2s ease-in-out infinite;
}
@keyframes stageDropPulse {
  0%, 100% { border-color: var(--accent-ink); background: rgba(37,99,235,0.04); }
  50% { border-color: var(--accent-ink); background: rgba(37,99,235,0.1); }
}
.stage-panel.active .stage-file-icon {
  animation: stageFileLand 2.5s ease-in-out infinite;
}
@keyframes stageFileLand {
  0%, 20% { transform: translateY(-24px); opacity: 0; }
  35%, 80% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}
.stage-placed-field {
  position: absolute;
  bottom: 28px;
  right: 28px;
  width: 140px;
  height: 52px;
  border: 2px dashed var(--accent-ink);
  border-radius: var(--radius);
  background: rgba(37,99,235,0.06);
  opacity: 0;
}
.stage-panel.active .stage-placed-field {
  animation: fieldAppear 0.6s ease forwards 0.8s;
}
@keyframes fieldAppear {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}
.stage-send-form { display: flex; flex-direction: column; gap: 14px; }
.stage-field-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.stage-recipient-wrap { position: relative; }
.stage-recipient-input {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  min-height: 44px;
}
.stage-recipient-input svg { flex-shrink: 0; color: var(--text-dim); }
.stage-contact-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 4px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-chip);
  font-size: 13px;
  color: var(--text);
}
.stage-contact-avatar {
  width: 26px;
  height: 26px;
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 600;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.stage-contact-chip-meta {
  font-size: 12px;
  color: var(--text-dim);
  font-weight: 400;
}
.stage-contact-hint {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 6px;
}
.stage-send-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
}
.stage-send-note {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.4;
}
.stage-send-btn {
  padding: 10px 18px;
  background: var(--action);
  color: var(--on-action);
  border: none;
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}
.stage-panel.active .stage-send-btn {
  animation: sendBtnPulse 3s ease-in-out infinite;
}
@keyframes sendBtnPulse {
  0%, 55%, 100% { transform: scale(1); }
  65% { transform: scale(0.97); }
  75% { transform: scale(1); }
}
.stage-link-sent {
  margin-top: 16px;
  padding: 10px 14px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 600;
  color: var(--good);
  opacity: 0;
}
.stage-panel.active .stage-link-sent {
  animation: stageLinkSent 3s ease-in-out infinite;
}
@keyframes stageLinkSent {
  0%, 40% { opacity: 0; transform: translateY(8px); }
  55%, 90% { opacity: 1; transform: translateY(0); }
  100% { opacity: 1; transform: translateY(0); }
}
.stage-reminder-sent {
  margin-top: 10px;
  padding: 10px 14px;
  background: color-mix(in srgb, var(--good-fill) 14%, transparent);
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 600;
  color: var(--good);
  opacity: 0;
}
.stage-panel.active .stage-reminder-sent {
  animation: stageReminderSent 3s ease-in-out infinite;
}
@keyframes stageReminderSent {
  0%, 55% { opacity: 0; transform: translateY(8px); }
  70%, 90% { opacity: 1; transform: translateY(0); }
  100% { opacity: 1; transform: translateY(0); }
}
.stage-done-badge {
  opacity: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--accent);
  color: var(--on-accent);
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 16px;
}
.stage-panel.active .stage-done-badge {
  animation: stageDonePop 0.5s ease forwards 0.2s;
}
@keyframes stageDonePop {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
@keyframes toastIn {
  0%, 65% { opacity: 0; transform: translateY(4px); }
  75%, 100% { opacity: 1; transform: translateY(0); }
}
.stage-panel.active .phone-sig-stroke {
  animation: drawSigPhone 2.5s ease-in-out 0.4s infinite;
}
.stage-panel:not(.active) .phone-sig-stroke,
.stage-panel:not(.active) .sig-stroke { animation: none; stroke-dashoffset: 200; }

/* App showcase strip */
.app-showcase {
  padding: 64px 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.showcase-inner {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 48px;
  align-items: center;
}
.showcase-copy h2 {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
.showcase-copy p {
  color: var(--text-dim);
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 20px;
}
.showcase-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.showcase-tab {
  padding: 8px 14px;
  border-radius: var(--radius-chip);
  font-size: 13px;
  font-weight: 600;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-dim);
  cursor: default;
}
.showcase-tab.active {
  background: var(--action);
  border-color: var(--accent-ink);
  color: var(--on-action);
}
.dashboard-mock {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  animation: floatMock 6s ease-in-out infinite;
}
@keyframes floatMock {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.dash-sidebar {
  width: 52px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}
.dash-nav-item {
  width: 32px;
  height: 32px;
  border-radius: var(--radius);
  background: var(--bg);
}
.dash-nav-item.active { background: rgba(37,99,235,0.1); border: 1px solid rgba(37,99,235,0.2); }
.dash-layout { display: flex; min-height: 280px; }
/* Two fixed columns with no breakpoint: at 390px .dash-main sat 89px past the
   viewport and an ancestor's overflow:hidden quietly ate it, so the right-hand
   third of this mock — including every status chip — was simply not on the
   page. Nothing scrolled, which is why no scrollWidth assertion saw it. */
@media (max-width: 700px) {
  .dash-layout { flex-direction: column; }
  .dash-sidebar { flex-direction: row; flex-wrap: wrap; width: auto; }
}
.dash-main { flex: 1; padding: 16px; }
.dash-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.dash-header h4 { font-size: 14px; font-weight: 600; }
.dash-rows { display: flex; flex-direction: column; gap: 8px; }
.dash-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 12px;
}
.dash-row-icon {
  width: 28px;
  height: 28px;
  background: var(--bg);
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.dash-row-text { flex: 1; min-width: 0; }
.dash-row-title { font-weight: 600; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-row-sub { font-size: 10px; color: var(--text-dim); }
.dash-status {
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: var(--radius-chip);
  flex-shrink: 0;
}
.dash-status.pending { background: color-mix(in srgb, var(--good-fill) 14%, transparent); color: var(--good); }
.dash-status.signed { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-ink); }
.dash-status.viewed { background: var(--surface-2); color: var(--text-dim); }
@keyframes statusPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}
.dash-row:nth-child(2) { animation: rowHighlight 4s ease-in-out infinite; }
@keyframes rowHighlight {
  0%, 30%, 100% { border-color: var(--border); }
  40%, 60% { border-color: var(--accent-ink); background: rgba(37,99,235,0.02); }
}

/* Vertical cards */
.verticals {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.vertical-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s;
}
.vertical-card:hover { border-color: var(--border-strong); }
.vertical-icon {
  width: 40px;
  height: 40px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  margin-bottom: 16px;
  color: var(--accent-ink);
}
.vertical-card h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 6px;
}
.vertical-card p { font-size: 13px; color: var(--text-dim); line-height: 1.5; }

/* Features */
.features {
  display: grid;
  gap: 24px;
}
.features-primary {
  grid-template-columns: repeat(6, 1fr);
}
.features-primary .feature {
  grid-column: span 2;
}
.features-primary .feature:nth-child(4) {
  grid-column: 2 / span 2;
}
.features-primary .feature:nth-child(5) {
  grid-column: 4 / span 2;
}
.features-technical-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 16px 0 8px;
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.features-technical-divider::before,
.features-technical-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.features-technical {
  grid-template-columns: repeat(2, 1fr);
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
}
.feature {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color 0.2s;
}
.feature:hover { border-color: var(--border-strong); }
.feature-graphic {
  height: 140px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow: hidden;
}
.feature-graphic svg { max-width: 100%; max-height: 108px; width: auto; height: auto; }
.feature-body { padding: 20px 24px 24px; }
.feature h3 {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 6px;
}
.feature p { font-size: 13px; color: var(--text-dim); line-height: 1.55; }
.feature.technical .feature-graphic { background: var(--surface-2); }
.feature.technical .feature-body h3 { color: var(--text); }

/* Feature SVG animations */
.anim-link-pulse { animation: linkPulse 2s ease-in-out infinite; }
@keyframes linkPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.anim-doc-stack { animation: docStack 3s ease-in-out infinite; }
@keyframes docStack {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
@keyframes trackDot {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.3); opacity: 1; }
}
.anim-track-dot { animation: trackDot 2s ease-in-out infinite; }
.anim-track-dot:nth-child(2) { animation-delay: 0.3s; }
.anim-track-dot:nth-child(3) { animation-delay: 0.6s; }
.anim-remind-pulse { animation: remindPulse 2s ease-in-out infinite; }
.anim-remind-arrow { animation: remindArrow 2s ease-in-out infinite; }
@keyframes remindPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
@keyframes remindArrow {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}
.anim-template-select { animation: templateSelect 3s ease-in-out infinite; }
@keyframes templateSelect {
  0%, 30%, 100% { stroke: var(--border-strong); fill: white; }
  40%, 60% { stroke: var(--accent-ink); fill: rgba(37,99,235,0.06); }
}
.anim-seal-spin { animation: sealSpin 8s linear infinite; transform-origin: center; }
@keyframes sealSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.anim-hash-flow { animation: hashFlow 2s linear infinite; }
@keyframes hashFlow {
  from { stroke-dashoffset: 20; }
  to { stroke-dashoffset: 0; }
}
.anim-shield-glow { animation: shieldGlow 2.5s ease-in-out infinite; }
@keyframes shieldGlow {
  0%, 100% { opacity: 0.15; }
  50% { opacity: 0.35; }
}

/* Pricing */
.pricing-builder {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  margin-bottom: 8px;
  padding: 28px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.pricing-builder-controls {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.pricing-axis {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
}
.pricing-axis:first-child {
  padding-top: 0;
}
.pricing-axis:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.pricing-axis-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.pricing-axis-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
}
.pricing-axis-value {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--accent-ink);
  flex-shrink: 0;
}
.pricing-axis-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.pricing-tip-wrap {
  position: relative;
  flex-shrink: 0;
}
.pricing-tip-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.pricing-tip-btn:hover {
  color: var(--accent-ink);
  border-color: var(--accent-ink);
}
.pricing-tip-btn:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 2px;
}
.pricing-tip-panel {
  position: absolute;
  z-index: 4;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: min(16rem, 70vw);
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.pricing-tip-panel[hidden] {
  display: none !important;
}
.pricing-advanced {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.pricing-advanced > summary {
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  list-style: none;
  padding: 10px 0;
}
.pricing-advanced > summary::-webkit-details-marker {
  display: none;
}
.pricing-advanced > summary::after {
  content: 'Show';
  float: right;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-ink);
}
.pricing-advanced[open] > summary::after {
  content: 'Hide';
}
.pricing-advanced-lead {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.45;
}
.pricing-advanced .pricing-axis:first-of-type {
  padding-top: 8px;
}
.pricing-advanced .pricing-axis:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
/* Range sliders: native accent was --action (near-white), which read as a thin
   pill on a dark bar. Track fill uses --accent-ink; thumb is paper with an ink
   ring so it matches buttons and focus elsewhere on the site. */
.pricing-range {
  --range-track-h: 6px;
  --range-thumb: 20px;
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 2px;
}
.pricing-range input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 2.75rem;
  margin: 0;
  cursor: pointer;
  background: transparent;
  --range-pct: 50%;
}
.pricing-range input[type="range"]:focus {
  outline: none;
}
.pricing-range input[type="range"]:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 4px;
  border-radius: var(--radius);
}
.pricing-range input[type="range"]::-webkit-slider-runnable-track {
  height: var(--range-track-h);
  border-radius: var(--radius-chip);
  border: 1px solid var(--border);
  background: linear-gradient(
    to right,
    var(--accent-ink) 0%,
    var(--accent-ink) var(--range-pct),
    var(--surface-2) var(--range-pct),
    var(--surface-2) 100%
  );
}
.pricing-range input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: var(--range-thumb);
  height: var(--range-thumb);
  margin-top: calc((var(--range-track-h) - var(--range-thumb)) / 2 - 1px);
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--accent-ink);
  box-shadow: 0 1px 4px color-mix(in srgb, var(--text) 14%, transparent);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.pricing-range input[type="range"]:active::-webkit-slider-thumb {
  transform: scale(1.06);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent-ink) 35%, transparent);
}
.pricing-range input[type="range"]::-moz-range-track {
  height: var(--range-track-h);
  border-radius: var(--radius-chip);
  border: 1px solid var(--border);
  background: var(--surface-2);
}
.pricing-range input[type="range"]::-moz-range-progress {
  height: var(--range-track-h);
  border-radius: var(--radius-chip);
  background: var(--accent-ink);
}
.pricing-range input[type="range"]::-moz-range-thumb {
  width: var(--range-thumb);
  height: var(--range-thumb);
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--accent-ink);
  box-shadow: 0 1px 4px color-mix(in srgb, var(--text) 14%, transparent);
}
.pricing-range--steps input[type="range"]::-webkit-slider-runnable-track {
  background:
    linear-gradient(
      to right,
      var(--accent-ink) 0%,
      var(--accent-ink) var(--range-pct),
      var(--surface-2) var(--range-pct),
      var(--surface-2) 100%
    ),
    repeating-linear-gradient(
      to right,
      transparent 0,
      transparent calc(50% - 0.5px),
      var(--border) calc(50% - 0.5px),
      var(--border) calc(50% + 0.5px),
      transparent calc(50% + 0.5px),
      transparent 100%
    );
}
.pricing-segment {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.pricing-segment-btn {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  padding: 10px 14px;
  border: 1px solid transparent;
  border-radius: calc(var(--radius) - 2px);
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.pricing-segment-btn:hover:not(.is-active) {
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
}
.pricing-segment-btn.is-active {
  background: var(--accent-ink);
  color: var(--on-accent-ink);
  border-color: var(--accent-ink);
}
.pricing-segment-btn:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 2px;
}
.pricing-axis-hints {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-dim);
  letter-spacing: 0.01em;
}
.pricing-axis-hints-ticks span:nth-child(2) {
  text-align: center;
  flex: 1;
}
.pricing-axis-hints-ticks span:last-child {
  text-align: right;
}
.pricing-builder-estimate {
  padding: 24px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.pricing-builder-estimate-title {
  margin: 0 0 4px;
  font-size: 1.125rem;
}
.pricing-builder-estimate-note {
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--text-dim);
}
.pricing-lines {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.pricing-line {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  font-size: 14px;
}
.pricing-line-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.pricing-line-label {
  font-weight: 600;
  color: var(--text);
}
.pricing-line-detail {
  font-size: 12px;
  color: var(--text-dim);
}
.pricing-line-amount {
  font-family: 'Martian Mono', ui-monospace, monospace;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.pricing-line-preset {
  align-items: center;
}
.pricing-builder-total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 15px;
  font-weight: 600;
}
.pricing-builder-total {
  font-family: 'Martian Mono', ui-monospace, monospace;
  font-size: 2rem;
  line-height: 1;
  color: var(--accent-ink);
}
.pricing-builder-annual {
  margin: 8px 0 12px;
  font-size: 13px;
}
.pricing-builder-preset-note {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.45;
}
.pricing-builder-cta {
  width: 100%;
  margin-bottom: 12px;
}
.pricing-builder-foot {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
}
.pricing-builder-foot a {
  color: var(--accent-ink);
}
.pricing-trial-note {
  max-width: 42rem;
  margin: 12px auto 0;
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.5;
}
.pricing-carousel {
  position: relative;
}
.pricing-carousel-ui {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
}
.pricing-carousel-ui[hidden] {
  display: none !important;
}
.pricing-carousel-btn {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.pricing-carousel-btn:hover {
  border-color: var(--border-strong);
  background: var(--surface-2);
}
.pricing-carousel-btn:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 2px;
}
.pricing-carousel-dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 16rem;
}
.pricing-carousel-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--border-strong);
  cursor: pointer;
}
.pricing-carousel-dot[aria-selected="true"] {
  width: 24px;
  background: var(--action);
}
.pricing-carousel-dot:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 2px;
}
.pricing {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
}
.price-annual {
  font-size: 12px;
  margin: 0 0 12px;
  min-height: 1.25rem;
}
.price-amount-custom {
  font-size: 40px;
  line-height: 1;
}
.pricing-included {
  margin-top: 24px;
  padding: 28px 32px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.pricing-included h3 {
  margin: 0 0 12px;
  font-size: 15px;
}
.pricing-included ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.pricing-included li {
  font-size: 13px;
  color: var(--text-dim);
  padding-left: 24px;
  position: relative;
}
.pricing-included li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  width: 16px;
  height: 16px;
  background: var(--good);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.75.75 0 0 1 1.06-1.06L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.75.75 0 0 1 1.06-1.06L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.muted { color: var(--text-dim); }
.price-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px 22px 22px;
  overflow: hidden;
}
.price-card-head {
  flex-shrink: 0;
}
.price-card-head .price-desc {
  min-height: 2.75em;
  margin-bottom: 20px;
}
.price-card-foot {
  margin-top: auto;
  padding-top: 8px;
  flex-shrink: 0;
}
.price-card-badge {
  margin: -24px -22px 20px;
  padding: 10px 16px;
  background: var(--action);
  color: var(--on-action);
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.price-card.featured {
  border: 2px solid var(--accent-ink);
  padding: 28px 26px 26px;
  background: color-mix(in srgb, var(--accent-field) 5%, var(--surface));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent-ink) 18%, transparent),
    0 16px 40px color-mix(in srgb, var(--accent-field) 22%, transparent);
}
.price-card.featured .price-card-badge {
  margin: -28px -26px 22px;
  padding: 12px 16px;
  font-size: 12px;
}
.price-card.featured .price-amount {
  font-size: 44px;
}
.price-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dim);
  margin-bottom: 8px;
}
.price-amount {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 4px;
}
.price-amount span { font-size: 16px; font-weight: 500; color: var(--text-dim); }
.price-desc { font-size: 13px; color: var(--text-dim); line-height: 1.45; }
.price-features {
  list-style: none;
  margin: 0 0 16px;
  flex: 1 1 auto;
}
.price-features li {
  font-size: 13px;
  color: var(--text-dim);
  padding: 6px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.price-features li::before {
  content: '';
  width: 16px;
  height: 16px;
  /* A MASK, not a background image: the colour then comes from a token
     instead of being baked into the URI, where it survived the whole port
     unnoticed because the literals check greps for "#" and this said %23. */
  background: var(--good);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.75.75 0 0 1 1.06-1.06L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.75.75 0 0 1 1.06-1.06L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z'/%3E%3C/svg%3E") center/contain no-repeat;
  flex-shrink: 0;
}
.price-card-foot .btn { width: 100%; }

/* CTA */
/* A piece of the ENGRAVED PLATE set into the paper.
   It was `background: var(--text)` — the darkest ink on the page borrowed as
   a surface, which is why it read as a slab dropped onto the layout rather
   than a panel belonging to it, and why everything inside it had to be
   patched one property at a time to stay legible.
   Scoping the dark material's tokens here instead means the band is simply
   the other material, and everything in it resolves correctly on its own. */
/* The closing ask, at field scale.
   This band used to be the dark material — #080d24, the engraved plate's own
   ground — dropped into a light page, on the argument that the two materials
   may sit side by side. In the app that argument holds: the plate is a real
   theme somebody chose. On a page where nothing else is dark it does not. One
   near-black slab is not "the other material", it is a foreign object; and it
   was a THIRD colour besides, neither the ground nor the accent, so it
   belonged to nothing above it.
   The band is the accent instead. It is the last thing on the page and it is
   the ask, so it should be the loudest thing on the page — and the colour to
   be loud in is the one already meaning "press this", which is the colour of
   every primary button above it. Every value here is mixed from
   --accent-field, so the band cannot drift away from the palette. */
.cta-section {
  --bg:          var(--accent-field);
  --surface:     color-mix(in srgb, #ffffff 12%, var(--accent-field));
  --surface-2:   color-mix(in srgb, #ffffff 6%, var(--accent-field));
  --border:      color-mix(in srgb, #ffffff 28%, var(--accent-field));
  --text:        #ffffff;
  --text-dim:    color-mix(in srgb, #ffffff 80%, var(--accent-field));
  --text-faint:  color-mix(in srgb, #ffffff 75%, var(--accent-field));

  background: var(--bg);
  color: var(--text);
  border-radius: var(--radius-lg);
  padding: 64px;
  text-align: center;
  margin: 0 24px 96px;
  max-width: calc(var(--max) - 48px);
  margin-left: auto;
  margin-right: auto;
}
.cta-section h2 {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
.cta-section p {
  color: var(--text-dim);
  font-size: 16px;
  margin-bottom: 32px;
}
/* The one place the paper button is right: on the plate a sheet is the bright
   object at 18.9:1, which is the whole reason --action still exists. */
.cta-section .btn-primary {
  background: var(--action);
  color: var(--on-action);
  border-color: var(--action);
}
.cta-section .btn-primary:hover { background: var(--action-hover); border-color: var(--action-hover); }

/* Footer */
footer {
  border-top: 1px solid var(--border);
  padding: 48px 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: 48px;
}
.footer-brand p {
  font-size: 14px;
  color: var(--text-dim);
  margin-top: 12px;
  max-width: 280px;
  line-height: 1.6;
}
.footer-col h4 {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 16px;
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 10px; }
.footer-col a {
  text-decoration: none;
  color: var(--text-dim);
  font-size: 14px;
}
.footer-col a:hover { color: var(--text); }
.footer-bottom {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--text-dim);
}

@media (max-width: 960px) {
  .pricing-builder {
    grid-template-columns: 1fr;
    padding: 20px 16px;
  }
  .hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .mobile-showcase-inner { grid-template-columns: 1fr; gap: 40px; }
  .mobile-phones { flex-direction: column; align-items: center; min-height: auto; padding: 0 16px; }
  .sms-card { position: relative; left: auto; top: auto; margin-bottom: 24px; animation: none; }
  .phone-mock.showcase-phone-main { margin-left: 0; width: 240px; }
  .showcase-inner { grid-template-columns: 1fr; }
  .workflow-unified { grid-template-columns: 1fr; min-height: auto; }
  .workflow-nav { border-right: none; border-bottom: 1px solid var(--border); }
  .accord-item { flex: none; }
  .accord-item.active::after { display: none; }
  .workflow-visual { min-height: 360px; }
  .verticals, .features-primary, .features-technical { grid-template-columns: 1fr 1fr; }
  .pricing-carousel-ui:not([hidden]) {
    display: flex;
  }
  .pricing {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    padding: 8px max(16px, env(safe-area-inset-right)) 20px max(16px, env(safe-area-inset-left));
    margin-inline: -16px;
    scrollbar-width: none;
  }
  .pricing::-webkit-scrollbar {
    display: none;
  }
  .pricing .price-card {
    flex: 0 0 min(100% - 32px, 22rem);
    scroll-snap-align: center;
    scroll-margin-inline: 16px;
    min-height: 26rem;
  }
  .features-primary .feature,
  .features-primary .feature:nth-child(4),
  .features-primary .feature:nth-child(5) { grid-column: auto; }
  .features-technical { max-width: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .nav-links { display: none; }
}
@media (max-width: 600px) {
  .verticals, .features-primary, .features-technical { grid-template-columns: 1fr; }
  .pricing .price-card {
    flex-basis: calc(100% - 40px);
    min-height: 24rem;
  }
  .cta-section { padding: 40px 24px; margin: 0 16px 64px; }
}