/* ===========================================================================
   OppBox marketing site · "The Ledger", public edition
   Tokens and component classes ported verbatim from the app design system
   (DESIGN.md + web/src/index.css). Marketing-scale type and layout are the
   only additions · same fonts, same palette, same sharp hairline geometry.
   =========================================================================== */

:root {
  /* Surface · the warm paper canvas is the brand floor */
  --paper: #f7f3ec;
  --paper-2: #ede7dc;
  --cream: #fdfaf3;

  /* Ink · text + the dark-surface role */
  --ink: #1a1814;
  --ink-2: #3a342c;
  --ink-3: #7a6f5f;
  --ink-faint: #a89d8a;

  /* Hairlines · one elevation step, not ink lines */
  --line: #d8cfbe;
  --line-soft: #e6dfd0;
  --line-dark: rgba(253, 250, 243, 0.1);
  --line-dark-strong: rgba(253, 250, 243, 0.18);

  /* Brand accents */
  --rust: #b8421f;
  --olive: #5a6d3f;
  --sand: #c9a96e;
  --plum: #6b3a52;
  --teal: #3f6d6d;
  --stone: #867a6a;

  /* Dark surface */
  --surface-dark: #1a1814;
  --surface-dark-2: #252019;
  --on-dark: #fdfaf3;
  --on-dark-soft: #a89d8a;

  /* Primary action · the one scarce filled CTA. Rust, never coral. */
  --primary: #b8421f;
  --primary-active: #93351a;
  --on-primary: #fdfaf3;

  /* Semantic tier */
  --success: #5a6d3f;
  --warning: #c9a96e;
  --error: #a33b2e;
  --info: #3f6d6d;
  --focus-ring: rgba(184, 66, 31, 0.35);

  /* Status palette */
  --status-qualified: #5a6d3f;
  --status-warm: #c9a96e;
  --status-hot: #9a3518;
  --status-waiting: #867a6a;
  --status-at-risk: #a33b2e;

  /* Motion · two easings, three durations */
  --ease-swift: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out: cubic-bezier(0.165, 0.84, 0.44, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;

  /* Fonts */
  --font-display: 'Fraunces', Georgia, serif;
  --font-ui: 'Inter Tight', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

/* ---------------------------------------------------------------------------
   Base · unlike the app shell, the marketing page scrolls.
   --------------------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Paper grain · the one piece of texture in the system */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection {
  background: rgba(184, 66, 31, 0.18);
}

:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-thumb {
  background: var(--line);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--ink-faint);
}

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

/* display-setting classes (.badge etc) must not defeat the hidden attribute */
[hidden] {
  display: none !important;
}

a {
  color: inherit;
}

p {
  margin: 0 0 14px;
}

/* ---------------------------------------------------------------------------
   Typography · Fraunces display, Inter Tight body, load-bearing JetBrains Mono
   --------------------------------------------------------------------------- */

.font-display {
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 48;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--ink);
  margin: 0;
}

.h-hero {
  font-size: clamp(46px, 7.2vw, 88px);
  line-height: 1.02;
  letter-spacing: -0.022em;
  font-weight: 480;
  font-variation-settings: 'opsz' 144, 'SOFT' 40;
}

.h-page {
  font-size: clamp(38px, 5.4vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 480;
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
}

.h-section {
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  font-weight: 500;
  font-variation-settings: 'opsz' 96;
}

.h-sub {
  font-size: clamp(20px, 2.6vw, 27px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-weight: 500;
  font-variation-settings: 'opsz' 48;
}

.h-card {
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1.2;
  letter-spacing: -0.2px;
  font-weight: 500;
  font-variation-settings: 'opsz' 36;
}

.lead {
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.6;
  color: var(--ink-2);
}

.text-soft {
  color: var(--ink-3);
}
.text-faint {
  color: var(--ink-faint);
}
.text-rust {
  color: var(--rust);
}

.serif-italic {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 480;
}

/* The mono section eyebrow */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.eyebrow-dark {
  color: var(--on-dark-soft);
}
.eyebrow-rust {
  color: var(--rust);
}

.mono {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.3px;
}

.caption {
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: 0.3px;
  color: var(--ink-3);
}

/* ---------------------------------------------------------------------------
   Buttons · mono uppercase, squared, hairline. Ported, with marketing sizes.
   --------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: 0;
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-swift),
    color var(--dur-fast) var(--ease-swift),
    border-color var(--dur-fast) var(--ease-swift),
    transform var(--dur-fast) var(--ease-swift);
}

.btn-lg {
  font-size: 11px;
  padding: 14px 24px;
  letter-spacing: 0.09em;
}

/* THE one scarce filled action per context */
.btn-primary {
  background: var(--primary);
  color: var(--on-primary);
  border-color: var(--primary);
}
.btn-primary:hover {
  background: var(--primary-active);
  border-color: var(--primary-active);
}

/* Default button · cream chassis, inverts to ink on hover */
.btn-ghost {
  background: var(--cream);
  color: var(--ink-2);
  border-color: var(--line);
}
.btn-ghost:hover {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}

.btn-outline-rust {
  background: transparent;
  color: var(--rust);
  border-color: var(--rust);
}
.btn-outline-rust:hover {
  background: rgba(184, 66, 31, 0.08);
}

/* Ghost on dark surfaces */
.btn-ghost-dark {
  background: transparent;
  color: var(--on-dark-soft);
  border-color: var(--line-dark-strong);
}
.btn-ghost-dark:hover {
  background: var(--on-dark);
  color: var(--ink);
  border-color: var(--on-dark);
}

.btn-quiet {
  border: none;
  padding: 4px 2px;
  background: transparent;
  color: var(--ink-faint);
}
.btn-quiet:hover {
  color: var(--ink-2);
}

/* ---------------------------------------------------------------------------
   Badges · mono uppercase micro-labels, tinted by MEANING
   --------------------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  line-height: 1.4;
  padding: 2px 7px;
  border-radius: 0;
  white-space: nowrap;
}
.badge-alert {
  background: rgba(184, 66, 31, 0.1);
  color: var(--rust);
}
.badge-warn {
  background: rgba(201, 169, 110, 0.22);
  color: var(--ink-2);
}
.badge-ok {
  background: rgba(90, 109, 63, 0.1);
  color: var(--olive);
}
.badge-info {
  background: rgba(63, 109, 109, 0.1);
  color: var(--teal);
}
.badge-plum {
  background: rgba(107, 58, 82, 0.1);
  color: var(--plum);
}
.badge-neutral {
  background: var(--paper-2);
  color: var(--ink-3);
}
.badge-dark {
  background: rgba(253, 250, 243, 0.1);
  color: var(--on-dark-soft);
}

/* Keyboard chip */
.kbd {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.3;
  padding: 1px 7px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  color: var(--ink-3);
}
.kbd-dark {
  background: rgba(253, 250, 243, 0.12);
  border: 1px solid var(--line-dark-strong);
  border-bottom-width: 2px;
  color: var(--on-dark);
}

/* ---------------------------------------------------------------------------
   Surfaces
   --------------------------------------------------------------------------- */

.card-tile {
  position: relative;
  background: var(--cream);
  border: 1px solid var(--line-soft);
  border-radius: 0;
  transition: transform var(--dur-base) var(--ease-swift),
    box-shadow var(--dur-base) var(--ease-swift),
    border-color var(--dur-base) var(--ease-swift);
}
.card-tile:hover {
  transform: translateY(-2px);
  border-color: var(--line);
  box-shadow: 0 10px 28px -14px rgba(26, 24, 20, 0.22);
}

.marque {
  position: absolute;
  top: 0;
  left: 18px;
  right: 18px;
  height: 2px;
}

.surface-dark-zone {
  background: var(--surface-dark);
  color: var(--on-dark);
}

.rule-ledger {
  border-bottom: 1px solid var(--line);
  box-shadow: 0 3px 0 -2px var(--line-soft);
}
.rule-ledger-dark {
  border-bottom: 1px solid var(--line-dark-strong);
  box-shadow: 0 3px 0 -2px var(--line-dark);
}

/* ---------------------------------------------------------------------------
   Layout
   --------------------------------------------------------------------------- */

.wrap {
  width: min(1160px, calc(100% - 48px));
  margin: 0 auto;
}
.wrap-narrow {
  width: min(880px, calc(100% - 48px));
  margin: 0 auto;
}

.section {
  padding: clamp(64px, 9vw, 120px) 0;
}
.section-tight {
  padding: clamp(44px, 6vw, 72px) 0;
}

.section-head {
  max-width: 720px;
  margin-bottom: clamp(36px, 5vw, 64px);
}
.section-head .eyebrow {
  display: block;
  margin-bottom: 16px;
}
.section-head .h-section {
  margin-bottom: 16px;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

@media (max-width: 920px) {
  .grid-3,
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------------------
   Nav · the ink spine, rotated horizontal. Paper page, ink bar.
   --------------------------------------------------------------------------- */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--surface-dark);
  color: var(--on-dark);
  border-bottom: 1px solid var(--line-dark);
}
.site-nav .wrap {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 58px;
}

.wordmark {
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 60, 'SOFT' 60;
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -0.3px;
  color: var(--on-dark);
  text-decoration: none;
  line-height: 1;
}
.wordmark .stop {
  color: var(--rust);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 12px;
}
.nav-links a {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-dark-soft);
  text-decoration: none;
  padding: 8px 10px;
  transition: color var(--dur-fast) var(--ease-swift);
}
.nav-links a:hover {
  color: var(--on-dark);
}
.nav-links a.active {
  color: var(--on-dark);
  box-shadow: inset 0 -2px 0 var(--rust);
}

.nav-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav-burger {
  display: none;
  margin-left: auto;
  background: none;
  border: 1px solid var(--line-dark-strong);
  color: var(--on-dark);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 12px;
  cursor: pointer;
}

@media (max-width: 860px) {
  .nav-links,
  .nav-actions {
    display: none;
  }
  .nav-burger {
    display: block;
  }
  .site-nav.open .nav-links,
  .site-nav.open .nav-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    position: absolute;
    left: 0;
    right: 0;
    background: var(--surface-dark);
    border-bottom: 1px solid var(--line-dark-strong);
    padding: 12px 24px 20px;
  }
  .site-nav.open .nav-links {
    top: 58px;
  }
  .site-nav.open .nav-actions {
    top: auto;
    position: static;
    padding-top: 8px;
  }
  .site-nav.open .wrap {
    flex-wrap: wrap;
  }
}

/* ---------------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------------- */

.hero {
  padding: clamp(64px, 9vw, 128px) 0 clamp(40px, 5vw, 72px);
  position: relative;
  overflow: hidden;
}

/* Ledger columns · faint vertical hairlines behind the hero, like ruled stock */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    90deg,
    transparent 0,
    transparent calc(100% / 12 - 1px),
    var(--line-soft) calc(100% / 12 - 1px),
    var(--line-soft) calc(100% / 12)
  );
  opacity: 0.5;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), transparent 80%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), transparent 80%);
}

/* Dark hero variant · the ink spine extended into the opening band. The nav
   above it is the same ink, so the page opens as one continuous dark plate
   with the ledger stripes in translucent cream. */
.hero-dark {
  background: var(--surface-dark);
  color: var(--on-dark);
}
.hero-dark::before {
  background-image: repeating-linear-gradient(
    90deg,
    transparent 0,
    transparent calc(100% / 12 - 1px),
    rgba(253, 250, 243, 0.055) calc(100% / 12 - 1px),
    rgba(253, 250, 243, 0.055) calc(100% / 12)
  );
  opacity: 1;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.95), transparent 92%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.95), transparent 92%);
}
.hero-dark h1 {
  color: var(--on-dark);
}
.hero-dark .lead {
  color: var(--on-dark-soft);
}
.hero-dark .eyebrow {
  color: var(--on-dark-soft);
}
.hero-dark .eyebrow .tick {
  background: var(--line-dark-strong);
}
.hero-dark .hero-micro {
  color: var(--on-dark-soft);
}
.hero-dark .demo-frame {
  border-color: var(--surface-dark-2);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(253, 250, 243, 0.07);
}

.hero-inner {
  position: relative;
  text-align: center;
  max-width: 880px;
  margin: 0 auto;
}

.hero .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 26px;
}
.hero .eyebrow .tick {
  width: 18px;
  height: 1px;
  background: var(--ink-faint);
  display: inline-block;
}

.hero h1 {
  margin-bottom: 24px;
}
.hero .lead {
  max-width: 640px;
  margin: 0 auto 36px;
}

.hero-ctas {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.hero-micro {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}

/* ---------------------------------------------------------------------------
   The demo frame · a believable miniature of the app, pure HTML/CSS
   --------------------------------------------------------------------------- */

.demo-stage {
  margin-top: clamp(40px, 6vw, 72px);
  position: relative;
}

.demo-frame {
  position: relative;
  background: var(--cream);
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: 0 40px 80px -48px rgba(26, 24, 20, 0.45),
    0 8px 24px -12px rgba(26, 24, 20, 0.18);
  overflow: hidden;
  font-size: 12px;
  line-height: 1.45;
  text-align: left;
}

.demo-chrome {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 14px;
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
}
.demo-chrome .dot {
  width: 8px;
  height: 8px;
  border: 1px solid var(--line);
  background: var(--cream);
}
.demo-chrome .url {
  margin-left: 10px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}

.demo-body {
  display: grid;
  grid-template-columns: 168px 320px 1fr;
  /* Fixed, not min · the frame must hold one height through every act of the
     click-through (the All split would otherwise stretch it). Overflowing
     list rows clip inside .demo-list / .demo-main. */
  height: 480px;
}

/* Rail · the ink spine */
.demo-rail {
  background: var(--surface-dark);
  color: var(--on-dark);
  padding: 16px 0;
  display: flex;
  flex-direction: column;
}
.demo-rail .wordmark {
  font-size: 17px;
  padding: 0 16px 14px;
}
.demo-rail-compose {
  margin: 0 16px 16px;
  background: var(--primary);
  color: var(--on-primary);
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  padding: 7px 0;
}
.demo-rail-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 16px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-dark-soft);
  position: relative;
}
.demo-rail-item .n {
  font-size: 8.5px;
  color: var(--on-dark-soft);
  opacity: 0.7;
}
.demo-rail-item.active {
  background: var(--surface-dark-2);
  color: var(--on-dark);
}
.demo-rail-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--rust);
}
.demo-rail-sep {
  margin: 12px 16px;
  border-top: 1px solid var(--line-dark);
}

/* Two-pane variant · rail + main view area */
.demo-body-2 {
  grid-template-columns: 168px 1fr;
}

/* The switchable view area · inbox and stage live here, one shown at a time */
.demo-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}
.demo-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.demo-split {
  flex: 1;
  display: grid;
  grid-template-columns: 320px 1fr;
  min-height: 0;
}
@media (max-width: 920px) {
  .demo-split {
    grid-template-columns: 1fr;
  }
}

/* The demo cursor · glides between targets and "clicks" them */
.demo-cursor {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 40;
  pointer-events: none;
  transition: transform 0.7s var(--ease-out);
  filter: drop-shadow(0 2px 4px rgba(26, 24, 20, 0.35));
}
.demo-cursor.clicking svg {
  transform: scale(0.82);
}
.demo-cursor svg {
  transition: transform 0.12s var(--ease-swift);
}
.demo-cursor .ripple {
  position: absolute;
  top: -4px;
  left: -4px;
  width: 26px;
  height: 26px;
  border-radius: 9999px;
  border: 2px solid var(--rust);
  opacity: 0;
  pointer-events: none;
}
.demo-cursor.clicking .ripple {
  animation: cursor-ripple 0.45s var(--ease-out) both;
}
@keyframes cursor-ripple {
  from {
    opacity: 0.8;
    transform: scale(0.3);
  }
  to {
    opacity: 0;
    transform: scale(1.4);
  }
}

/* Deal workspace view · activity timeline + brief */
.demo-dealstrip .strip-btn {
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 10px;
  background: var(--primary);
  color: var(--on-primary);
  border: 1px solid var(--primary);
  white-space: nowrap;
}
.deal-grid {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 270px;
  gap: 14px;
  padding: 14px 16px;
  align-items: start;
  min-height: 0;
  background: var(--paper);
}
.act-head {
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 3px 0 -2px var(--line-soft);
  margin-bottom: 4px;
}
.act-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 9px 2px;
  border-bottom: 1px solid var(--line-soft);
}
.act-row:last-child {
  border-bottom: none;
}
.act-row .when {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.4px;
  color: var(--ink-faint);
  width: 38px;
  flex: none;
  padding-top: 2px;
}
.act-row .what {
  flex: 1;
  min-width: 0;
}
.act-row .what .t {
  font-size: 12px;
  color: var(--ink);
  font-weight: 500;
}
.act-row .what .s {
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 1px;
}
.act-row .badge {
  flex: none;
  margin-top: 2px;
}

/* Right column of the deal workspace · brief or the opened note */
.deal-side {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

/* People rail · who's on the deal, tinted by engagement */
.act-people {
  border: 1px solid var(--line);
  background: var(--paper-2);
  padding: 10px 12px 6px;
}
.act-people .ph {
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-bottom: 7px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 2px;
}
.act-people .p-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line-soft);
}
.act-people .p-row:last-child {
  border-bottom: none;
}
.act-people .p-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: none;
}
.act-people .p-who {
  flex: 1;
  min-width: 0;
}
.act-people .p-who .n {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.act-people .p-who .r {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.3px;
  color: var(--ink-faint);
}
.act-people .badge {
  flex: none;
}

/* An activity row that has been clicked open */
.act-row.open {
  background: var(--cream);
  box-shadow: inset 2px 0 0 var(--rust);
  padding-left: 8px;
}

/* The opened Granola note · paper card, plum marque */
.act-note {
  position: relative;
  background: var(--cream);
  border: 1px solid var(--line);
  padding: 14px 14px 12px;
  font-size: 11.5px;
}
.act-note .bar {
  position: absolute;
  top: 0;
  left: 14px;
  right: 14px;
  height: 2px;
  background: var(--plum);
}
.act-note .nh {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
}
.act-note .nh .t {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.2px;
}
.act-note .att {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.3px;
  color: var(--ink-faint);
  margin-bottom: 8px;
}
.act-note ul {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
}
.act-note ul li {
  position: relative;
  padding: 4px 0 4px 14px;
  color: var(--ink-2);
  font-size: 11px;
  line-height: 1.45;
}
.act-note ul li::before {
  content: '';
  position: absolute;
  left: 1px;
  top: 10px;
  width: 7px;
  height: 1.5px;
  background: var(--plum);
}
.act-note .nf {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.4px;
  color: var(--ink-faint);
  border-top: 1px solid var(--line-soft);
  padding-top: 8px;
}

/* The brief panel · the ink zone speaking, compact */
.act-brief {
  background: var(--surface-dark);
  color: var(--on-dark);
  border: 1px solid var(--surface-dark-2);
  padding: 12px 14px 14px;
  font-size: 11.5px;
}
.act-brief .bh {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 8px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--line-dark);
}
.act-brief .bh .t {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.2px;
}
.act-brief .sec {
  margin-bottom: 10px;
}
.act-brief .sec:last-child {
  margin-bottom: 0;
}
.act-brief .sl {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark-soft);
  margin-bottom: 3px;
}
.act-brief .st {
  color: var(--on-dark);
  opacity: 0.92;
  font-size: 11px;
  line-height: 1.5;
}
@media (max-width: 920px) {
  .deal-grid {
    grid-template-columns: 1fr;
  }
}

/* The kanban board · Opps by stage */
.demo-board {
  background: var(--paper);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.demo-board-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 12px 14px 16px;
  align-items: start;
  flex: 1;
}
.kb-col {
  min-width: 0;
}
.kb-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 2px 2px 8px;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 3px 0 -2px var(--line-soft);
  margin-bottom: 10px;
  white-space: nowrap;
}
.kb-head .dot {
  width: 7px;
  height: 7px;
  flex: none;
}
.kb-head .kb-stats {
  margin-left: auto;
  color: var(--ink-faint);
  font-weight: 400;
  letter-spacing: 0.04em;
}
.kb-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 40px;
}
.kb-card {
  position: relative;
  background: var(--cream);
  border: 1px solid var(--line-soft);
  padding: 11px 12px 9px;
  transition: transform var(--dur-base) var(--ease-swift),
    box-shadow var(--dur-base) var(--ease-swift),
    border-color var(--dur-base) var(--ease-swift);
}
.kb-card:hover {
  transform: translateY(-1px);
  border-color: var(--line);
  box-shadow: 0 6px 18px -10px rgba(26, 24, 20, 0.18);
}
.kb-card .bar {
  position: absolute;
  top: 0;
  left: 12px;
  right: 12px;
  height: 2px;
}
.kb-card .nm {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: -0.1px;
}
.kb-card .nm .amt {
  font-size: 11.5px;
  flex: none;
}
.kb-card .mt {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.3px;
  color: var(--ink-faint);
  margin-top: 3px;
}
.kb-card .sigs {
  display: flex;
  gap: 4px;
  margin-top: 7px;
  flex-wrap: wrap;
}

@media (max-width: 920px) {
  .demo-body-2 {
    grid-template-columns: 132px 1fr;
  }
  .demo-board-cols {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .demo-body-2 {
    grid-template-columns: 1fr;
  }
}

/* List pane */
.demo-list {
  border-right: 1px solid var(--line-soft);
  background: var(--paper);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.demo-list-head {
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 3px 0 -2px var(--line-soft);
}
.demo-list-head .t {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 300;
  font-variation-settings: 'opsz' 48;
  letter-spacing: -0.2px;
}
.demo-list-head .c {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.3px;
  color: var(--ink-faint);
  margin-top: 2px;
}

/* Split-inbox tabs · All / Opps / Team */
.demo-splits {
  display: flex;
  gap: 2px;
  margin-top: 8px;
}
.split-tab {
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 4px 8px 6px;
  cursor: default;
  transition: color var(--dur-fast) var(--ease-swift);
}
.split-tab i {
  font-style: normal;
  color: var(--ink-faint);
  margin-left: 3px;
}
.split-tab.active {
  color: var(--ink);
  box-shadow: inset 0 -2px 0 var(--rust);
}
.split-tab.active i {
  color: var(--rust);
}

.demo-row {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-soft);
  position: relative;
  cursor: default;
  transition: background-color var(--dur-base) var(--ease-swift);
}
.demo-row .from {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: -0.1px;
}
.demo-row .from .dot-unread {
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: var(--rust);
  flex: none;
}
.demo-row .from .when {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 8.5px;
  color: var(--ink-faint);
  font-weight: 400;
}
.demo-row .subj {
  font-size: 11.5px;
  color: var(--ink-2);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.demo-row .meta {
  display: flex;
  gap: 5px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.demo-row.selected {
  background: var(--cream);
}
.demo-row.selected::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--rust);
}

/* Reader pane */
.demo-reader {
  background: var(--cream);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* The deal strip · mail bound to money goes ink */
.demo-dealstrip {
  background: var(--surface-dark);
  color: var(--on-dark);
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.demo-dealstrip .acct {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.2px;
}
.demo-dealstrip .amt {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--on-dark);
}
.demo-dealstrip .stage {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 2px 7px;
  background: rgba(253, 250, 243, 0.1);
  color: var(--on-dark-soft);
}
.demo-dealstrip .spacer {
  margin-left: auto;
}
.demo-dealstrip .sig {
  display: inline-flex;
  gap: 5px;
}

.demo-thread {
  padding: 16px 18px;
  flex: 1;
}
.demo-msg {
  margin-bottom: 14px;
}
.demo-msg .who {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 500;
}
.demo-msg .who .em {
  font-family: var(--font-mono);
  font-size: 8.5px;
  color: var(--ink-faint);
  font-weight: 400;
}
.demo-msg .body {
  font-size: 11.5px;
  color: var(--ink-2);
  margin-top: 4px;
  max-width: 52ch;
}
.demo-msg .body p {
  margin: 0 0 6px;
}

.demo-actions {
  display: flex;
  gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid var(--line-soft);
}
.demo-actions .b {
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 10px;
  border: 1px solid var(--line);
  background: var(--cream);
  color: var(--ink-2);
}
.demo-actions .b.primary {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
}
/* Keyboard hint inside an action chip · the product's real bindings
   (R reply, E done, H snooze). currentColor keeps it legible on both the
   cream chips and the filled primary. */
.demo-actions .b i {
  font-style: normal;
  display: inline-block;
  margin-left: 5px;
  padding: 0 4px;
  font-size: 8px;
  line-height: 1.5;
  border: 1px solid currentColor;
  opacity: 0.55;
}

@media (max-width: 920px) {
  .demo-body {
    grid-template-columns: 132px 1fr;
  }
  .demo-reader {
    display: none;
  }
}
@media (max-width: 560px) {
  .demo-body {
    grid-template-columns: 1fr;
  }
  .demo-rail {
    display: none;
  }
}

/* Floating signal chips around the hero demo */
.demo-float {
  position: absolute;
  z-index: 5;
  background: var(--cream);
  border: 1px solid var(--line);
  box-shadow: 0 12px 28px -16px rgba(26, 24, 20, 0.28);
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 8px;
  animation: float-bob 7s ease-in-out infinite;
}
.demo-float b {
  color: var(--ink);
  font-weight: 500;
}
.demo-float .pip {
  width: 7px;
  height: 7px;
  flex: none;
}
.demo-float.f1 {
  top: -46px;
  left: -28px;
  animation-delay: 0s;
}
/* JT: the three signal chips must never touch the frame · they read as
   features, not UI. f1 floats above; f2/f3 float fully below with a gap
   (chip height 36px, so -52px leaves 16px of clear air). The float-bob
   rise is -8px · still clear at the top of the bob. */
.demo-float.f2 {
  bottom: -52px;
  right: -28px;
  animation-delay: 1.8s;
}
.demo-float.f3 {
  bottom: -52px;
  left: 10%;
  animation-delay: 3.2s;
}
@media (max-width: 1240px) {
  .demo-float {
    display: none;
  }
}
/* When the chips render, the hero needs enough bottom padding to hold the
   two below-frame chips (52px drop + breathing room) without clipping. */
@media (min-width: 1241px) {
  .hero-dark {
    padding-bottom: max(clamp(40px, 5vw, 72px), 84px);
  }
}

@keyframes float-bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

/* ---------------------------------------------------------------------------
   Stats strip
   --------------------------------------------------------------------------- */

.stats-strip {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--cream);
}
.stats-strip .wrap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  text-align: center;
}
.stats-strip .stat {
  padding: 28px 12px;
  border-left: 1px solid var(--line-soft);
}
.stats-strip .stat:first-child {
  border-left: none;
}
.stats-strip .n {
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 500;
  letter-spacing: -0.5px;
  font-variation-settings: 'opsz' 96;
}
.stats-strip .l {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 6px;
}
@media (max-width: 720px) {
  .stats-strip .wrap {
    grid-template-columns: repeat(2, 1fr);
  }
  .stats-strip .stat:nth-child(3) {
    border-left: none;
  }
}

/* ---------------------------------------------------------------------------
   Feature blocks · alternating editorial rows
   --------------------------------------------------------------------------- */

.feature-row {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  padding: clamp(40px, 6vw, 80px) 0;
  border-top: 1px solid var(--line-soft);
}
.feature-row:first-of-type {
  border-top: none;
}
.feature-row.flip {
  grid-template-columns: 6fr 5fr;
}
.feature-row.flip .feature-copy {
  order: 2;
}
.feature-row .eyebrow {
  display: block;
  margin-bottom: 14px;
}
.feature-row .h-sub {
  margin-bottom: 14px;
}
.feature-row ul {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
}
.feature-row ul li {
  position: relative;
  padding: 7px 0 7px 22px;
  color: var(--ink-2);
  font-size: 14px;
  border-top: 1px solid var(--line-soft);
}
.feature-row ul li:first-child {
  border-top: none;
}
.feature-row ul li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 14px;
  width: 8px;
  height: 1.5px;
  background: var(--rust);
}
@media (max-width: 860px) {
  .feature-row,
  .feature-row.flip {
    grid-template-columns: 1fr;
  }
  .feature-row.flip .feature-copy {
    order: 0;
  }
}

/* Mini demo panels inside feature rows */
.panel-demo {
  background: var(--cream);
  border: 1px solid var(--line);
  box-shadow: 0 24px 56px -36px rgba(26, 24, 20, 0.4);
  font-size: 12px;
  overflow: hidden;
}
.panel-demo .ph {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 3px 0 -2px var(--line-soft);
}
.panel-demo .ph .t {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 400;
  font-variation-settings: 'opsz' 48;
  letter-spacing: -0.2px;
}
.panel-demo .ph .mono {
  font-size: 8.5px;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Signal ledger rows */
.sig-ledger {
  padding: 6px 0;
}
.sig-ledger .r {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--line-soft);
}
.sig-ledger .r:last-child {
  border-bottom: none;
}
.sig-ledger .id {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.4px;
  color: var(--ink-faint);
  width: 52px;
  flex: none;
}
.sig-ledger .nm {
  font-size: 12px;
  color: var(--ink-2);
  flex: 1;
}
.sig-ledger .vl {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
}

/* Meetings ledger · the spoken-words demo rows */
.meet-ledger .r {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line-soft);
}
.meet-ledger .r:last-child {
  border-bottom: none;
}
.meet-ledger .when {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.4px;
  color: var(--ink-faint);
  width: 58px;
  flex: none;
}
.meet-ledger .who {
  flex: 1;
  min-width: 0;
}
.meet-ledger .who .nm {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.1px;
}
.meet-ledger .who .sub {
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 1px;
}
.meet-ledger .tags {
  display: flex;
  gap: 5px;
  flex: none;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Ghosted cards demo */
.gcards {
  padding: 14px;
  display: grid;
  gap: 10px;
}
.gcard {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  padding: 12px 14px 10px;
}
.gcard .bar {
  position: absolute;
  top: 0;
  left: 14px;
  right: 14px;
  height: 2px;
}
.gcard .nm {
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.1px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.gcard .nm .amt {
  font-size: 12px;
}
.gcard .why {
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 3px;
}
.gcard .sigs {
  display: flex;
  gap: 5px;
  margin-top: 8px;
  flex-wrap: wrap;
}

/* Brief demo · the dark zone speaking */
.brief-demo {
  background: var(--surface-dark);
  color: var(--on-dark);
  border: 1px solid var(--surface-dark-2);
  box-shadow: 0 24px 56px -36px rgba(26, 24, 20, 0.55);
  overflow: hidden;
  font-size: 12px;
}
.brief-demo .bh {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-dark);
}
.brief-demo .bh .t {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.2px;
}
.brief-demo .bb {
  padding: 14px 16px 18px;
}
.brief-demo .sec {
  margin-bottom: 12px;
}
.brief-demo .sec .sl {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark-soft);
  margin-bottom: 4px;
}
.brief-demo .sec .st {
  font-size: 11.5px;
  color: var(--on-dark);
  opacity: 0.92;
  max-width: 56ch;
}
.brief-demo .caret {
  display: inline-block;
  width: 7px;
  height: 13px;
  background: var(--rust);
  vertical-align: text-bottom;
  animation: caret-blink 0.9s steps(1) infinite;
}
@keyframes caret-blink {
  50% {
    opacity: 0;
  }
}

/* ---------------------------------------------------------------------------
   Integration marquee
   --------------------------------------------------------------------------- */

.marquee {
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--cream);
  padding: 18px 0;
  position: relative;
}
.marquee::before,
.marquee::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}
.marquee::before {
  left: 0;
  background: linear-gradient(90deg, var(--cream), transparent);
}
.marquee::after {
  right: 0;
  background: linear-gradient(270deg, var(--cream), transparent);
}
.marquee-track {
  display: flex;
  gap: 56px;
  width: max-content;
  animation: marquee-scroll 36s linear infinite;
}
.marquee:hover .marquee-track {
  animation-play-state: paused;
}
.marquee-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.2px;
  color: var(--ink-3);
  white-space: nowrap;
}
.marquee-item .mono {
  font-size: 8.5px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ink-faint);
}
@keyframes marquee-scroll {
  to {
    transform: translateX(-50%);
  }
}

/* ---------------------------------------------------------------------------
   Dark bands · security teaser, final CTA
   --------------------------------------------------------------------------- */

.band-dark {
  background: var(--surface-dark);
  color: var(--on-dark);
  position: relative;
  overflow: hidden;
}
.band-dark .h-section,
.band-dark .h-sub,
.band-dark h2,
.band-dark h3 {
  color: var(--on-dark);
}
.band-dark .lead {
  color: var(--on-dark-soft);
}

/* faint ledger columns on ink */
.band-dark::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    90deg,
    transparent 0,
    transparent calc(100% / 12 - 1px),
    rgba(253, 250, 243, 0.04) calc(100% / 12 - 1px),
    rgba(253, 250, 243, 0.04) calc(100% / 12)
  );
}

.tile-dark {
  border: 1px solid var(--line-dark);
  padding: 22px 22px 20px;
  background: rgba(253, 250, 243, 0.02);
  transition: border-color var(--dur-base) var(--ease-swift),
    background-color var(--dur-base) var(--ease-swift);
}
.tile-dark:hover {
  border-color: var(--line-dark-strong);
  background: rgba(253, 250, 243, 0.04);
}
.tile-dark .h-card {
  color: var(--on-dark);
  margin: 10px 0 8px;
}
.tile-dark p {
  color: var(--on-dark-soft);
  font-size: 13.5px;
  margin: 0;
}

/* ---------------------------------------------------------------------------
   Plain tiles on paper
   --------------------------------------------------------------------------- */

.tile {
  border: 1px solid var(--line-soft);
  background: var(--cream);
  padding: 24px 24px 22px;
  position: relative;
  transition: transform var(--dur-base) var(--ease-swift),
    box-shadow var(--dur-base) var(--ease-swift),
    border-color var(--dur-base) var(--ease-swift);
}
.tile:hover {
  transform: translateY(-2px);
  border-color: var(--line);
  box-shadow: 0 10px 28px -14px rgba(26, 24, 20, 0.2);
}
.tile .h-card {
  margin: 12px 0 8px;
}
.tile p {
  color: var(--ink-3);
  font-size: 13.5px;
  margin: 0;
}
.tile .glyph {
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  color: var(--rust);
  background: var(--paper);
}

/* ---------------------------------------------------------------------------
   Pricing
   --------------------------------------------------------------------------- */

.bill-toggle {
  display: inline-flex;
  border: 1px solid var(--line);
  background: var(--cream);
}
.bill-toggle button {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 16px;
  background: transparent;
  border: none;
  color: var(--ink-3);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-swift),
    color var(--dur-fast) var(--ease-swift);
}
.bill-toggle button.on {
  background: var(--ink);
  color: var(--cream);
}
.bill-toggle .save {
  color: var(--olive);
}
.bill-toggle button.on .save {
  color: var(--sand);
}

.price-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--line);
  background: var(--cream);
}
.price-col {
  padding: 32px 28px 28px;
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  position: relative;
}
.price-col:first-child {
  border-left: none;
}
.price-col.feature-tier {
  background: var(--surface-dark);
  color: var(--on-dark);
  margin: -1px;
  border: 1px solid var(--surface-dark);
  z-index: 1;
}
.price-col .tier {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.price-col.feature-tier .tier {
  color: var(--on-dark-soft);
}
.price-col .amount {
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 480;
  letter-spacing: -1.5px;
  line-height: 1;
  font-variation-settings: 'opsz' 144;
}
.price-col .amount .cur {
  font-size: 26px;
  vertical-align: 18px;
  letter-spacing: 0;
}
.price-col .per {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  margin-top: 8px;
  min-height: 28px;
}
.price-col.feature-tier .per {
  color: var(--on-dark-soft);
}
.price-col .blurb {
  font-size: 13.5px;
  color: var(--ink-3);
  margin: 14px 0 18px;
  min-height: 60px;
}
.price-col.feature-tier .blurb {
  color: var(--on-dark-soft);
}
.price-col ul {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  flex: 1;
}
.price-col ul li {
  font-size: 13px;
  color: var(--ink-2);
  padding: 6.5px 0 6.5px 20px;
  position: relative;
  border-top: 1px solid var(--line-soft);
}
.price-col ul li:first-child {
  border-top: none;
}
.price-col ul li::before {
  content: '';
  position: absolute;
  left: 1px;
  top: 14px;
  width: 8px;
  height: 1.5px;
  background: var(--olive);
}
.price-col.feature-tier ul li {
  color: var(--on-dark);
  opacity: 0.92;
  border-top-color: var(--line-dark);
}
.price-col.feature-tier ul li::before {
  background: var(--sand);
}
.price-col ul li.muted {
  color: var(--ink-faint);
}
.price-col ul li.muted::before {
  background: var(--line);
}
.price-col .cta {
  margin-top: auto;
}

@media (max-width: 920px) {
  .price-grid {
    grid-template-columns: 1fr;
  }
  .price-col {
    border-left: none;
    border-top: 1px solid var(--line);
  }
  .price-col:first-child {
    border-top: none;
  }
}

/* Comparison table */
.cmp {
  width: 100%;
  border-collapse: collapse;
  background: var(--cream);
  border: 1px solid var(--line);
  font-size: 13px;
}
.cmp th,
.cmp td {
  padding: 11px 16px;
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
}
.cmp th {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 1px solid var(--line);
}
.cmp td:not(:first-child),
.cmp th:not(:first-child) {
  text-align: center;
  width: 17%;
}
.cmp .group td {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  background: var(--paper);
  padding-top: 14px;
}
.cmp .yes {
  color: var(--olive);
  font-weight: 600;
}
.cmp .no {
  color: var(--line);
}
.cmp .lim {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-3);
}

/* FAQ */
.faq {
  border-top: 1px solid var(--line);
}
.faq details {
  border-bottom: 1px solid var(--line);
}
.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 4px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.2px;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: '+';
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--rust);
  transition: transform var(--dur-base) var(--ease-swift);
}
.faq details[open] summary::after {
  transform: rotate(45deg);
}
.faq .a {
  padding: 0 4px 20px;
  color: var(--ink-2);
  font-size: 14px;
  max-width: 68ch;
}

/* ---------------------------------------------------------------------------
   Security page specifics
   --------------------------------------------------------------------------- */

.sec-ledger {
  border: 1px solid var(--line);
  background: var(--cream);
}
.sec-ledger .row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  padding: 22px 24px;
  border-top: 1px solid var(--line-soft);
}
.sec-ledger .row:first-child {
  border-top: none;
}
.sec-ledger .k {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rust);
  padding-top: 3px;
}
.sec-ledger .v h3 {
  font-size: 17px;
  letter-spacing: -0.2px;
  margin-bottom: 6px;
}
.sec-ledger .v p {
  font-size: 13.5px;
  color: var(--ink-2);
  margin: 0 0 8px;
  max-width: 72ch;
}
.sec-ledger .v p:last-child {
  margin-bottom: 0;
}
@media (max-width: 700px) {
  .sec-ledger .row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* ---------------------------------------------------------------------------
   Integrations page
   --------------------------------------------------------------------------- */

.int-card {
  border: 1px solid var(--line-soft);
  background: var(--cream);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform var(--dur-base) var(--ease-swift),
    box-shadow var(--dur-base) var(--ease-swift),
    border-color var(--dur-base) var(--ease-swift);
}
.int-card:hover {
  transform: translateY(-2px);
  border-color: var(--line);
  box-shadow: 0 10px 28px -14px rgba(26, 24, 20, 0.2);
}
.int-card .top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.int-card .nm {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.2px;
}
.int-card .role {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.int-card p {
  font-size: 13px;
  color: var(--ink-3);
  margin: 0;
  flex: 1;
}

/* ---------------------------------------------------------------------------
   MCP page
   --------------------------------------------------------------------------- */

.codeblock {
  position: relative;
  background: var(--surface-dark);
  color: var(--on-dark);
  border: 1px solid var(--surface-dark-2);
  padding: 18px 20px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.7;
  overflow-x: auto;
}
.codeblock .cm {
  color: var(--on-dark-soft);
}
.codeblock .hl {
  color: var(--sand);
}
.codeblock .copy {
  position: absolute;
  top: 10px;
  right: 10px;
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--line-dark-strong);
  color: var(--on-dark-soft);
  padding: 5px 9px;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-swift);
}
.codeblock .copy:hover {
  background: var(--on-dark);
  color: var(--ink);
  border-color: var(--on-dark);
}

.tool-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--cream);
  border: 1px solid var(--line);
  font-size: 13px;
}
.tool-table td {
  padding: 10px 16px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}
.tool-table td:first-child {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink);
  white-space: nowrap;
  width: 220px;
}
.tool-table td:last-child {
  color: var(--ink-2);
}
.tool-table .group td {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  background: var(--paper);
}

/* Agent transcript demo */
.agent-demo {
  background: var(--surface-dark);
  color: var(--on-dark);
  border: 1px solid var(--surface-dark-2);
  box-shadow: 0 24px 56px -36px rgba(26, 24, 20, 0.55);
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.7;
  padding: 20px 22px;
  overflow: hidden;
}
.agent-demo .u {
  color: var(--sand);
}
.agent-demo .a {
  color: var(--on-dark);
  opacity: 0.92;
}
.agent-demo .tool {
  color: var(--on-dark-soft);
  font-size: 10px;
}
.agent-demo .tool::before {
  content: '⊙ ';
  color: var(--teal);
}
.agent-demo .line {
  opacity: 0;
  transform: translateY(4px);
}
.agent-demo.play .line {
  animation: rise-in 0.4s var(--ease-out) forwards;
}

/* ---------------------------------------------------------------------------
   Step list (how it works)
   --------------------------------------------------------------------------- */

.steps {
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--line);
  background: var(--cream);
}
.steps .step {
  counter-increment: step;
  padding: 28px 26px 26px;
  border-left: 1px solid var(--line);
  position: relative;
}
.steps .step:first-child {
  border-left: none;
}
.steps .step::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--rust);
}
.steps .step h3 {
  font-size: 18px;
  letter-spacing: -0.2px;
  margin: 10px 0 8px;
}
.steps .step p {
  font-size: 13.5px;
  color: var(--ink-3);
  margin: 0;
}
@media (max-width: 860px) {
  .steps {
    grid-template-columns: 1fr;
  }
  .steps .step {
    border-left: none;
    border-top: 1px solid var(--line);
  }
  .steps .step:first-child {
    border-top: none;
  }
}

/* ---------------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------------- */

.site-footer {
  background: var(--surface-dark);
  color: var(--on-dark-soft);
  padding: 56px 0 32px;
}
.site-footer .cols {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--line-dark);
}
.site-footer .tag {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
  color: var(--on-dark-soft);
  margin-top: 12px;
  max-width: 30ch;
}
.site-footer h4 {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-dark-soft);
  margin: 0 0 14px;
  opacity: 0.7;
}
.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-footer ul li {
  margin-bottom: 9px;
}
.site-footer ul a {
  color: var(--on-dark-soft);
  text-decoration: none;
  font-size: 13px;
  transition: color var(--dur-fast) var(--ease-swift);
}
.site-footer ul a:hover {
  color: var(--on-dark);
}
.site-footer .legal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-top: 24px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  flex-wrap: wrap;
}
@media (max-width: 760px) {
  .site-footer .cols {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------------------------------------------------------------------------
   Page hero (interior pages)
   --------------------------------------------------------------------------- */

.page-hero {
  padding: clamp(56px, 8vw, 104px) 0 clamp(36px, 5vw, 64px);
}
.page-hero .eyebrow {
  display: block;
  margin-bottom: 18px;
}
.page-hero .h-page {
  margin-bottom: 20px;
  max-width: 18ch;
}
.page-hero .lead {
  max-width: 640px;
}

/* ---------------------------------------------------------------------------
   Scroll reveal choreography
   --------------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.65s var(--ease-out), transform 0.65s var(--ease-out);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}
.reveal-d1 {
  transition-delay: 0.08s;
}
.reveal-d2 {
  transition-delay: 0.16s;
}
.reveal-d3 {
  transition-delay: 0.24s;
}
.reveal-d4 {
  transition-delay: 0.32s;
}

/* Hero load-in cascade (no observer needed · plays on load) */
.rise {
  animation: rise-in 0.7s var(--ease-out) both;
}
.rise-1 {
  animation-delay: 0.05s;
}
.rise-2 {
  animation-delay: 0.15s;
}
.rise-3 {
  animation-delay: 0.25s;
}
.rise-4 {
  animation-delay: 0.35s;
}
.rise-5 {
  animation-delay: 0.5s;
}

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Staggered list reveal inside demo frames */
.stagger-in > * {
  animation: rise-in 0.4s var(--ease-out) both;
}
.stagger-in > :nth-child(1) { animation-delay: 0.05s; }
.stagger-in > :nth-child(2) { animation-delay: 0.11s; }
.stagger-in > :nth-child(3) { animation-delay: 0.17s; }
.stagger-in > :nth-child(4) { animation-delay: 0.23s; }
.stagger-in > :nth-child(5) { animation-delay: 0.29s; }
.stagger-in > :nth-child(6) { animation-delay: 0.35s; }

/* The olive live dot */
.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 9999px;
  background: var(--olive);
  display: inline-block;
  animation: pulse 2.4s var(--ease-out) infinite;
}
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(90, 109, 63, 0.6);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(90, 109, 63, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(90, 109, 63, 0);
  }
}

/* ===========================================================================
   Homepage redesign · each section gets its own layout
   New classes only · the blocks below are index.html-specific and must not
   restyle classes shared with the interior pages.
   =========================================================================== */

/* ===== problem ledger · asymmetric editorial, sticky lede ===== */

.problem-ledger {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.problem-lede {
  position: sticky;
  top: 96px;
}
.problem-lede .eyebrow {
  display: block;
  margin-bottom: 16px;
}
.h-problem {
  font-family: var(--font-display);
  font-size: clamp(32px, 3.8vw, 46px);
  line-height: 1.05;
  letter-spacing: -0.018em;
  font-weight: 500;
  font-variation-settings: 'opsz' 110;
  margin: 0 0 18px;
}
.problem-item {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 16px;
  padding: 28px 0;
  border-top: 1px solid var(--line);
}
.problem-item .idx {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0.04em;
  color: var(--rust);
}
.problem-item .body h3 {
  margin-bottom: 8px;
}
.problem-item .body p {
  margin: 0;
  font-size: 14px;
  color: var(--ink-2);
  max-width: 58ch;
}
@media (max-width: 920px) {
  .problem-ledger {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .problem-lede {
    position: static;
  }
  .problem-item {
    grid-template-columns: 44px 1fr;
    padding: 22px 0;
  }
  .problem-item .idx {
    font-size: 18px;
  }
}

/* ===== pipeline band · how it works as a schematic ===== */

.pipeline-band {
  background: var(--paper-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.pipeline-band .section-head {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.pipe {
  display: flex;
  align-items: stretch;
}
.pipe-node {
  flex: 1;
  min-width: 0;
  background: var(--cream);
  border: 1px solid var(--line);
  padding: 16px 14px 15px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}
.pipe-node .t {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.2px;
  line-height: 1.15;
}
.pipe-node .s {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--ink-faint);
  line-height: 1.5;
}
/* Connector · hairline with a small rust arrowhead riding it */
.pipe-link {
  flex: 0 0 clamp(28px, 4vw, 56px);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pipe-link::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: var(--line);
}
.pipe-link .arr {
  position: relative;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1;
  color: var(--rust);
  background: var(--paper-2);
  padding: 2px 3px;
}

/* The three step paragraphs · a slim ruled row under the diagram */
.pipe-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  margin-top: clamp(32px, 4vw, 48px);
}
.pipe-step {
  padding: 20px 26px 0;
  border-left: 1px solid var(--line);
}
.pipe-step:first-child {
  padding-left: 0;
  border-left: none;
}
.pipe-step:last-child {
  padding-right: 0;
}
.pipe-step .n {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--rust);
}
.pipe-step h3 {
  font-size: 16px;
  letter-spacing: -0.2px;
  margin: 8px 0 6px;
}
.pipe-step p {
  font-size: 13px;
  color: var(--ink-3);
  margin: 0;
}
@media (max-width: 920px) {
  /* Vertical pipeline · nodes stacked, connectors rotate */
  .pipe {
    flex-direction: column;
    max-width: 420px;
    margin: 0 auto;
  }
  .pipe-link {
    flex: 0 0 36px;
    width: 100%;
  }
  .pipe-link::before {
    left: 50%;
    right: auto;
    top: 0;
    bottom: 0;
    width: 1px;
    height: auto;
  }
  .pipe-link .arr {
    transform: rotate(90deg);
  }
  .pipe-steps {
    grid-template-columns: 1fr;
  }
  .pipe-step {
    padding: 18px 0 0;
    border-left: none;
    border-top: 1px solid var(--line);
    margin-top: 18px;
  }
  .pipe-step:first-child {
    border-top: none;
    margin-top: 0;
  }
}

/* ===== signal sheet · fourteen signals as a specimen table ===== */

.sheet {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.sheet-col {
  min-width: 0;
}
.sheet-col + .sheet-col {
  border-left: 1px solid var(--line-soft);
}
.sheet-row {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 44px;
  padding: 6px 18px;
  border-top: 1px solid var(--line-soft);
  transition: background-color var(--dur-fast) var(--ease-swift);
}
.sheet-row:first-child {
  border-top: none;
}
.sheet-row:hover {
  background: var(--cream);
}
.sheet-row .id {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.4px;
  color: var(--rust);
  width: 52px;
  flex: none;
}
.sheet-row .q {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sheet-row .badge {
  flex: none;
}
.sheet-caption {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 14px 0 0;
}
@media (max-width: 920px) {
  .sheet {
    grid-template-columns: 1fr;
  }
  .sheet-col + .sheet-col {
    border-left: none;
  }
  .sheet-col + .sheet-col .sheet-row:first-child {
    border-top: 1px solid var(--line-soft);
  }
  .sheet-row {
    padding: 6px 12px;
  }
}
@media (max-width: 560px) {
  .sheet-row .q {
    white-space: normal;
    line-height: 1.35;
  }
}

/* ===== feature rows · extra air between the numbered rows ===== */

#product .feature-row {
  padding-top: calc(clamp(40px, 6vw, 80px) + 24px);
  padding-bottom: calc(clamp(40px, 6vw, 80px) + 24px);
}

/* ===== feature-row-ink · the AI row goes full-bleed ink ===== */

.feature-row-ink {
  background: var(--surface-dark);
  color: var(--on-dark);
}
.feature-row-ink .feature-row {
  border-top: none;
}
.feature-row-ink .h-sub {
  color: var(--on-dark);
}
.feature-row-ink .feature-copy p {
  color: var(--on-dark-soft);
}
.feature-row-ink .feature-copy strong {
  color: var(--on-dark);
}
.feature-row-ink .feature-row ul li {
  color: var(--on-dark);
  opacity: 0.92;
  border-top-color: var(--line-dark);
}
.feature-row-ink .feature-row ul li::before {
  background: var(--sand);
}
/* The dark brief panel needs a cream hairline to hold its edge on ink */
.feature-row-ink .brief-demo {
  border-color: var(--line-dark-strong);
  box-shadow: 0 0 0 1px rgba(253, 250, 243, 0.28),
    0 24px 56px -36px rgba(0, 0, 0, 0.8);
}

/* ===== mcp terminal · centred head, full-width transcript ===== */

.mcp-terminal .section-head {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.agent-demo-wide {
  max-width: 860px;
  margin: 0 auto;
  font-size: 12.5px;
  padding: 26px 30px;
}

/* ===== audit list · the security band reads like an audit document ===== */

.audit-list {
  border-bottom: 1px solid var(--line-dark-strong);
  position: relative;
}
.audit-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 28px;
  align-items: start;
  padding: 28px 4px;
  border-top: 1px solid var(--line-dark-strong);
}
.audit-row .badge {
  justify-self: start;
  margin-top: 3px;
}
.audit-row .body h3 {
  color: var(--on-dark);
  margin-bottom: 6px;
}
.audit-row .body p {
  color: var(--on-dark-soft);
  font-size: 13.5px;
  margin: 0;
  max-width: 72ch;
}
@media (max-width: 920px) {
  .audit-row {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 22px 0;
  }
}

/* ===== rate card · one bordered card, three ruled columns ===== */

.rate-card {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--line);
  background: var(--cream);
}
.rate-col {
  position: relative;
  padding: 32px 30px 30px;
  border-left: 1px solid var(--line-soft);
}
.rate-col:first-child {
  border-left: none;
}
.rate-col .eyebrow {
  display: block;
  margin-bottom: 12px;
}
.rate-col .h-card {
  margin: 0 0 8px;
}
.rate-col p {
  font-size: 13.5px;
  color: var(--ink-3);
  margin: 0;
}
/* The Core column wears the rust marque */
.rate-core::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 2px;
  background: var(--rust);
}
.rate-tag {
  position: absolute;
  top: 10px;
  right: 12px;
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rust);
}
@media (max-width: 920px) {
  .rate-card {
    grid-template-columns: 1fr;
  }
  .rate-col {
    border-left: none;
    border-top: 1px solid var(--line-soft);
  }
  .rate-col:first-child {
    border-top: none;
  }
  .rate-core::before {
    top: 0;
  }
}

/* Reduced motion · structure stays, choreography goes */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ---------------------------------------------------------------------------
   Waitlist page · the ticket as the pitch
   --------------------------------------------------------------------------- */

/* Tighter dark hero than the homepage's · the ticket carries the weight */
.hero-waitlist {
  padding: clamp(48px, 7vw, 96px) 0 clamp(48px, 6vw, 80px);
}
.hero-waitlist .hero-inner {
  max-width: 720px;
}
.hero-waitlist h1 {
  margin-bottom: 20px;
}
.hero-waitlist .lead {
  max-width: 520px;
  margin-bottom: 0;
}

/* The ticket · a printed artefact, nobody's yet */
.ticket-stage {
  display: flex;
  justify-content: center;
  margin-top: clamp(40px, 5.5vw, 60px);
  /* room for the rotation's corners */
  padding: 8px 4px;
}

.ticket {
  position: relative;
  width: min(440px, 100%);
  background: var(--surface-dark-2);
  border: 1px solid rgba(253, 250, 243, 0.16);
  transform: rotate(-1.5deg);
  box-shadow: 0 34px 70px -32px rgba(0, 0, 0, 0.85),
    0 10px 24px -14px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  text-align: left;
}

/* Printed-paper grain, heavier than the page's · plus a faint top sheen */
.ticket::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.09;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* The printed double-rule · a faint sand inner frame under the sheen */
.ticket::after {
  content: '';
  position: absolute;
  inset: 4px;
  pointer-events: none;
  border: 1px solid rgba(201, 169, 110, 0.16);
  background: linear-gradient(168deg, rgba(253, 250, 243, 0.05), transparent 45%);
}

.ticket-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 20px;
  border-bottom: 1px solid rgba(253, 250, 243, 0.12);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.ticket-head .brand {
  color: var(--on-dark-soft);
}
.ticket-head .entry {
  color: var(--sand);
}

.ticket-no {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 26px 20px 20px;
  font-family: var(--font-display);
  font-size: clamp(58px, 9vw, 78px);
  line-height: 0.9;
  font-weight: 480;
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
}
.ticket-no .sign {
  color: var(--sand);
}
.ticket-no .dots {
  color: var(--cream);
  letter-spacing: 0.08em;
}

.ticket-of {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 20px;
  padding: 12px 0 14px;
  border-top: 1px solid rgba(253, 250, 243, 0.12);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-dark-soft);
}
.ticket-of .status {
  color: var(--sand);
}

/* The stub · perforated dashed tear line with punched side notches */
.ticket-stub {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 20px 13px;
  border-top: 1px dashed rgba(253, 250, 243, 0.3);
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--on-dark-soft);
}
.ticket-stub::before,
.ticket-stub::after {
  content: '';
  position: absolute;
  top: -8px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--surface-dark);
  border: 1px solid rgba(253, 250, 243, 0.16);
}
.ticket-stub::before {
  left: -9px;
}
.ticket-stub::after {
  right: -9px;
}

.ticket-ctas {
  margin-top: clamp(32px, 4vw, 44px);
  text-align: center;
}
.ticket-ctas .hero-micro {
  margin: 14px 0 0;
}

/* Step strip · the homepage's ruled columns, standing alone */
.wl-steps {
  margin-top: 0;
}

/* The quiet questions · ledger line items */
.wl-faq {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.wl-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 20px;
  align-items: baseline;
  padding: 18px 4px;
}
.wl-row + .wl-row {
  border-top: 1px solid var(--line-soft);
}
.wl-row .q {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rust);
}
.wl-row .a {
  margin: 0;
  font-size: 14px;
  color: var(--ink-2);
  max-width: 60ch;
}
@media (max-width: 640px) {
  .wl-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}