:root {
  --rosa-primary: #FD237E;
  --rosa-primary-hover: #ED1370;
  --rosa-primary-press: #D10A60;
  --rosa-deep: #C1117A;
  --rosa-whisper: #FFE4F0;
  --rosa-soft: #FDA8C8;
  --whisper-warm: #FFF0F7;
  --whisper-edge: #F8D2E4;
  --charcoal: #1A1A2E;
  --charcoal-90: #2D2D45;
  --charcoal-70: #4A4A63;
  --charcoal-50: #7A7A8C;
  --charcoal-30: #B5B5C0;
  --charcoal-15: #D9D9DF;
  --charcoal-08: #ECECEF;
  --cream: #FAF7F2;
  --cream-deep: #F2EDE3;
  --cream-edge: #E8E1D2;
  --success: #2F8F6B; --success-bg: #E5F2EC;
  --warning: #C68A1C; --warning-bg: #FBF1DC;
  --info: #3D5A99; --info-bg: #E5EBF5;
  --tier-b: #C9748C;
  --shadow-sm: 0 2px 4px rgba(26,26,46,0.05), 0 1px 2px rgba(26,26,46,0.04);
  --shadow-md: 0 6px 16px rgba(26,26,46,0.06), 0 2px 4px rgba(26,26,46,0.04);
  --shadow-lg: 0 16px 36px rgba(26,26,46,0.08), 0 4px 8px rgba(26,26,46,0.04);
  --shadow-xl: 0 32px 64px rgba(26,26,46,0.16), 0 8px 16px rgba(26,26,46,0.08);
  --shadow-rosa: 0 12px 32px rgba(253,35,126,0.22), 0 2px 6px rgba(253,35,126,0.12);
  --font-display: 'Fraunces', Georgia, serif;
  --font-sans: 'Manrope', -apple-system, sans-serif;
  --font-rounded: 'Nunito', sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--charcoal-90);
  background: var(--cream);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
.wrap-narrow { max-width: 700px; margin: 0 auto; padding: 0 32px; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; color: var(--charcoal); margin: 0; }

.eyebrow {
  font-family: var(--font-sans); font-weight: 700; font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--rosa-primary);
}
.stat { font-family: var(--font-display); font-style: italic; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--charcoal); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 26px; border-radius: 10px; font-size: 15px; font-weight: 700;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: all 150ms ease-out; white-space: nowrap;
}
.btn:active { transform: scale(0.985); }
.btn-primary { background: var(--rosa-primary); color: #fff; box-shadow: var(--shadow-rosa); }
.btn-primary:hover { background: var(--rosa-primary-hover); }
.btn-charcoal { background: var(--charcoal); color: var(--cream); }
.btn-charcoal:hover { background: var(--charcoal-90); }
.btn-outline { background: transparent; color: var(--charcoal); border-color: var(--charcoal-15); }
.btn-outline:hover { border-color: var(--charcoal-70); }
.btn-sm { padding: 9px 18px; font-size: 13px; border-radius: 8px; }

/* Header + nav */
header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(250, 247, 242, 0.86);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--cream-edge);
}
header .bar { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand img { height: 22px; width: auto; }
nav.primary-nav { display: flex; align-items: center; gap: 32px; }
nav.primary-nav a.navlink { font-size: 14px; font-weight: 700; color: var(--charcoal-70); text-decoration: none; }
nav.primary-nav a.navlink:hover { color: var(--charcoal); }
nav.primary-nav a.navlink.active { color: var(--charcoal); }
.nav-actions { display: flex; align-items: center; gap: 12px; }

.dropdown { position: relative; }
.dropdown-toggle {
  font-family: var(--font-sans); font-size: 14px; font-weight: 700; color: var(--charcoal-70);
  background: none; border: none; cursor: pointer; padding: 6px 2px; display: flex; align-items: center; gap: 5px;
  border-radius: 6px;
}
.dropdown-toggle:hover { color: var(--charcoal); }
.dropdown-toggle:focus-visible { outline: 2px solid var(--rosa-primary); outline-offset: 3px; }
.dropdown-toggle .caret { font-size: 9px; margin-top: 1px; color: var(--charcoal-30); transition: transform 220ms cubic-bezier(0.22,1,0.36,1); }
.dropdown.open .dropdown-toggle { color: var(--charcoal); }
.dropdown.open .dropdown-toggle .caret { transform: rotate(180deg); color: var(--rosa-primary); }
.dropdown-panel {
  position: absolute; top: calc(100% + 14px); left: 50%;
  width: 300px; background: #fff; border: 1px solid var(--cream-edge); border-radius: 14px;
  box-shadow: var(--shadow-lg); padding: 10px; text-align: left;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateX(-50%) translateY(-6px);
  transition: opacity 180ms ease-out, transform 180ms ease-out, visibility 0s linear 180ms;
}
.dropdown.open .dropdown-panel {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition: opacity 180ms ease-out, transform 180ms ease-out, visibility 0s linear 0s;
}
.dropdown-panel a {
  display: block; padding: 10px 12px; border-radius: 9px; text-decoration: none;
}
.dropdown-panel a:hover, .dropdown-panel a:focus-visible { background: var(--cream-deep); }
.dropdown-panel a:focus-visible { outline: 2px solid var(--rosa-primary); outline-offset: -2px; }
.dropdown-panel .d-title { font-size: 13.5px; font-weight: 800; color: var(--charcoal); }
.dropdown-panel .d-sub { display: block; font-size: 12px; color: var(--charcoal-50); margin-top: 2px; }

/* Mobile nav toggle (hamburger). Hidden on desktop, shown under the 980px
   breakpoint where nav-collapse switches from an inline flex row (via
   display:contents, so desktop layout is untouched) to a slide-down panel. */
.mobile-nav-toggle {
  display: none; background: none; border: none; cursor: pointer; padding: 8px; margin-left: 4px; border-radius: 8px;
}
.mobile-nav-toggle:focus-visible { outline: 2px solid var(--rosa-primary); outline-offset: 2px; }
.mobile-nav-toggle .bar { display: block; width: 20px; height: 2px; background: var(--charcoal); border-radius: 2px; margin: 4px 0; transition: transform 220ms ease-out, opacity 150ms ease-out; }
.mobile-nav-toggle[aria-expanded="true"] .bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.mobile-nav-toggle[aria-expanded="true"] .bar:nth-child(2) { opacity: 0; }
.mobile-nav-toggle[aria-expanded="true"] .bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.nav-collapse { display: contents; }

.seat-tag {
  display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-rounded); font-weight: 800;
  font-size: 11.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--rosa-deep);
  background: var(--whisper-warm); border-radius: 999px; padding: 6px 14px 6px 10px; margin-bottom: 22px;
}
.seat-tag .seat-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--rosa-primary); }

/* Hero */
.hero { padding: 96px 0 0; text-align: center; overflow: hidden; }
.hero .eyebrow { display: inline-block; margin-bottom: 22px; }
.hero h1 { font-size: 3.6rem; line-height: 1.08; max-width: 900px; margin: 0 auto 24px; }
.hero .sub { font-size: 1.15rem; color: var(--charcoal-70); max-width: 620px; margin: 0 auto 36px; }
.hero .cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 16px; }
.hero .cta-note { font-size: 0.88rem; color: var(--charcoal-50); margin-bottom: 64px; }

.hero-split { padding: 72px 0 88px; overflow-x: hidden; }
.hero-split .grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
.hero-split .grid > * { min-width: 0; }
.hero-split h1 { font-size: 3rem; line-height: 1.1; text-align: left; margin: 0 0 20px; max-width: none; }
.hero-split .sub { font-size: 1.1rem; color: var(--charcoal-70); text-align: left; margin: 0 0 32px; max-width: 52ch; }
.hero-split .cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.hero-split .cta-note { font-size: 0.88rem; color: var(--charcoal-50); }

/* App window mockup */
.app-window {
  max-width: 1040px; margin: 0 auto; border-radius: 18px; overflow: hidden;
  box-shadow: var(--shadow-xl); border: 1px solid var(--cream-edge);
  text-align: left; background: #fff;
}
.app-window.hero-window { border-radius: 18px 18px 0 0; border-bottom: none; }
.app-titlebar { background: var(--charcoal); padding: 12px 18px; display: flex; gap: 7px; }
.app-titlebar .dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.18); }
.app-body { display: flex; min-height: 420px; }
.app-sidebar { width: 208px; background: var(--cream); border-right: 1px solid var(--cream-edge); padding: 20px 14px; flex-shrink: 0; }
.app-sidebar .mini-logo { height: 16px; width: auto; margin: 4px 8px 20px; }
.app-nav-item {
  display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: 8px;
  font-family: var(--font-rounded); font-size: 12.5px; font-weight: 700; color: var(--charcoal-70); margin-bottom: 3px;
}
.app-nav-item .dot-icon { width: 7px; height: 7px; border-radius: 2px; background: var(--charcoal-30); flex-shrink: 0; }
.app-nav-item.active { background: var(--rosa-whisper); color: var(--charcoal); position: relative; }
.app-nav-item.active .dot-icon { background: var(--rosa-primary); }
.app-nav-item.active::before { content: ""; position: absolute; left: -14px; top: 8px; bottom: 8px; width: 3px; background: var(--rosa-primary); border-radius: 0 3px 3px 0; }
.app-nav-label { font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--charcoal-30); margin: 18px 12px 8px; }
.app-main { flex: 1; padding: 26px 30px; background: var(--cream); min-width: 0; }
.app-main .greet { font-family: var(--font-display); font-size: 22px; font-weight: 600; margin-bottom: 4px; }
.app-main .greet-sub { font-size: 12.5px; color: var(--charcoal-50); margin-bottom: 22px; }

.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 22px; }
.stat-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.stat-card { background: #fff; border: 1px solid var(--cream-edge); border-radius: 12px; padding: 16px; box-shadow: var(--shadow-sm); }
.stat-card .k { font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--charcoal-50); margin-bottom: 8px; }
.stat-card .v { font-size: 26px; }
.stat-card .v.warm { color: var(--rosa-deep); }

.mini-table { background: #fff; border: 1px solid var(--cream-edge); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-sm); }
.mini-table .t-row { display: flex; align-items: center; justify-content: space-between; padding: 11px 16px; border-bottom: 1px solid var(--cream-edge); font-size: 12.5px; gap: 10px; }
.mini-table .t-row:last-child { border-bottom: none; }
.t-name { font-weight: 700; color: var(--charcoal); display: flex; align-items: center; gap: 8px; }
.t-avatar { width: 20px; height: 20px; border-radius: 50%; background: var(--rosa-whisper); flex-shrink: 0; }

.pill { display: inline-flex; align-items: center; padding: 4px 11px; border-radius: 999px; font-family: var(--font-rounded); font-size: 10.5px; font-weight: 800; white-space: nowrap; }
.pill-success { background: var(--success-bg); color: var(--success); }
.pill-warning { background: var(--warning-bg); color: var(--warning); }
.pill-info { background: var(--info-bg); color: var(--info); }
.pill-rosa { background: var(--rosa-whisper); color: var(--rosa-deep); }
.tier { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 999px; font-family: var(--font-rounded); font-weight: 800; font-size: 10px; color: #fff; flex-shrink: 0; }
.tier-s { background: var(--rosa-primary); }
.tier-a { background: var(--rosa-deep); }
.tier-b { background: var(--tier-b); }

/* Statement */
.statement { padding: 96px 0 36px; text-align: center; }
.statement h2 { font-size: 2.2rem; line-height: 1.3; font-weight: 500; max-width: 720px; margin: 0 auto; }
.statement .italic-accent { font-style: italic; font-family: var(--font-display); color: var(--rosa-deep); font-weight: 500; }

section { padding: 88px 0; }
.section-alt { background: var(--cream-deep); }
.section-head { text-align: center; max-width: 640px; margin: 0 auto 64px; }
.section-head.left { text-align: left; margin: 0 0 48px; max-width: none; }
.section-head .eyebrow { display: block; margin-bottom: 14px; }
.section-head h2 { font-size: 2.3rem; }
.section-head p.lede { color: var(--charcoal-70); font-size: 1.05rem; margin: 16px auto 0; max-width: 56ch; }
.section-head.left p.lede { margin-left: 0; }

.props { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.prop { background: #fff; border: 1px solid var(--cream-edge); border-radius: 16px; padding: 30px; box-shadow: var(--shadow-sm); }
.prop .num { font-size: 2rem; margin-bottom: 16px; display: block; }
.prop h3 { font-size: 1.15rem; margin-bottom: 10px; font-family: var(--font-sans); font-weight: 800; letter-spacing: -0.01em; }
.prop p { color: var(--charcoal-70); font-size: 0.95rem; margin: 0; }

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.step { background: #fff; border: 1px solid var(--cream-edge); border-radius: 14px; padding: 24px 20px; }
.step .step-num { font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: 1.5rem; color: var(--rosa-primary); display: block; margin-bottom: 14px; }
.step h4 { font-size: 1rem; margin-bottom: 8px; }
.step p { font-size: 0.88rem; color: var(--charcoal-70); margin: 0; }

/* Feature showcase */
.showcase { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; padding: 56px 0; border-bottom: 1px solid var(--cream-edge); }
.showcase > * { min-width: 0; }
.showcase:last-child { border-bottom: none; }
.showcase.reverse .showcase-copy { order: 2; }
.showcase.reverse .showcase-visual { order: 1; }
.showcase-copy .tag {
  display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--rosa-deep); background: var(--whisper-warm); border-radius: 999px; padding: 5px 14px; margin-bottom: 16px;
}
.showcase-copy h3 { font-size: 1.7rem; margin-bottom: 14px; line-height: 1.18; }
.showcase-copy p { color: var(--charcoal-70); font-size: 1rem; margin: 0 0 14px; }
.showcase-copy p:last-child { margin-bottom: 0; }
.showcase-copy ul.check-list { list-style: none; padding: 0; margin: 18px 0 0; }
.showcase-copy ul.check-list li { font-size: 0.94rem; color: var(--charcoal-70); padding: 6px 0 6px 26px; position: relative; }
.showcase-copy ul.check-list li::before { content: "\2713"; position: absolute; left: 0; top: 6px; color: var(--rosa-primary); font-weight: 800; }
.showcase-visual { background: #fff; border: 1px solid var(--cream-edge); border-radius: 16px; box-shadow: var(--shadow-md); padding: 20px; }

/* Kanban mimic */
.kanban { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.kcol { background: var(--cream-deep); border-radius: 10px; padding: 10px; }
.kcol .kcol-head { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--charcoal-50); margin-bottom: 8px; padding: 0 2px; }
.kcard { background: #fff; border: 1px solid var(--cream-edge); border-radius: 8px; padding: 10px; margin-bottom: 8px; box-shadow: var(--shadow-sm); }
.kcard .kname { font-size: 12px; font-weight: 700; color: var(--charcoal); margin-bottom: 4px; }
.kcard .kval { font-size: 11px; color: var(--charcoal-50); }

/* Share bars */
.share-bar-row { margin-bottom: 16px; }
.share-bar-row:last-child { margin-bottom: 0; }
.share-bar-label { display: flex; justify-content: space-between; font-size: 12.5px; font-weight: 700; color: var(--charcoal); margin-bottom: 6px; }
.share-bar-track { height: 8px; border-radius: 999px; background: var(--cream-deep); overflow: hidden; }
.share-bar-fill { height: 100%; border-radius: 999px; background: var(--rosa-primary); }

/* Compose score panel */
.subscore-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.subscore { background: var(--cream-deep); border-radius: 8px; padding: 8px 12px; display: flex; justify-content: space-between; font-size: 12px; }
.subscore .sk { color: var(--charcoal-70); font-weight: 600; }
.subscore .sv { font-weight: 800; color: var(--rosa-deep); }

/* Heat list mimic (sales) */
.heat-list { display: flex; flex-direction: column; gap: 10px; }
.heat-row { display: flex; align-items: center; justify-content: space-between; background: #fff; border: 1px solid var(--cream-edge); border-radius: 10px; padding: 12px 14px; box-shadow: var(--shadow-sm); }
.heat-name { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; color: var(--charcoal); }
.heat-name .h-sub { display: block; font-size: 11px; font-weight: 500; color: var(--charcoal-50); margin-top: 1px; }
.heat-score { font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: 15px; color: var(--rosa-deep); }

/* Roadmap */
.roadmap { text-align: center; margin-top: 56px; }
.roadmap p { font-size: 13px; color: var(--charcoal-50); margin-bottom: 18px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.chip { border: 1px dashed var(--charcoal-15); background: #fff; border-radius: 999px; padding: 8px 18px; font-size: 13px; color: var(--charcoal-70); }

.founder-note { text-align: center; padding: 64px 0; }
.founder-note .badge {
  display: inline-block; background: var(--whisper-warm); color: var(--rosa-deep);
  font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  border-radius: 999px; padding: 6px 16px; margin-bottom: 18px;
}
.founder-note p { font-size: 1.1rem; color: var(--charcoal-70); max-width: 540px; margin: 0 auto; }

/* Persona split (index routing) */
.persona-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.persona-card {
  background: #fff; border: 1px solid var(--cream-edge); border-radius: 16px; padding: 30px;
  box-shadow: var(--shadow-sm); text-decoration: none; display: flex; flex-direction: column;
  transition: box-shadow 150ms ease-out, transform 150ms ease-out;
}
.persona-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.persona-card .p-eyebrow { font-family: var(--font-rounded); font-weight: 800; font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rosa-deep); margin-bottom: 12px; }
.persona-card h3 { font-size: 1.35rem; margin-bottom: 10px; }
.persona-card p { color: var(--charcoal-70); font-size: 0.94rem; margin: 0 0 20px; flex: 1; }
.persona-card .p-link { font-size: 13.5px; font-weight: 800; color: var(--rosa-primary); display: flex; align-items: center; gap: 6px; }
.persona-card .p-link .arrow { transition: transform 150ms ease-out; }
.persona-card:hover .p-link .arrow { transform: translateX(3px); }

/* ROI box */
.roi-box {
  background: var(--charcoal); border-radius: 20px; padding: 48px; color: var(--cream);
  display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center;
}
.roi-copy h3 { color: #fff; font-size: 1.6rem; margin-bottom: 12px; }
.roi-copy p { color: var(--charcoal-08); font-size: 0.98rem; max-width: 46ch; margin: 0; }
.roi-math { display: flex; align-items: center; gap: 18px; }
.roi-figure { text-align: center; }
.roi-figure .rf-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--charcoal-30); margin-bottom: 8px; }
.roi-figure .rf-value { font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 2rem; color: #fff; }
.roi-op { font-family: var(--font-display); font-style: italic; font-size: 1.6rem; color: var(--rosa-soft); }
.roi-note { grid-column: 1 / -1; font-size: 12px; color: var(--charcoal-30); border-top: 1px solid var(--charcoal-70); padding-top: 18px; margin-top: 4px; }

/* ROI box, interactive calculator variant ("plug in your own numbers", literally) */
.roi-box--interactive { grid-template-columns: 1fr; }
.roi-calc { margin-top: 8px; border-top: 1px solid var(--charcoal-70); padding-top: 28px; }
.roi-calc-label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.roi-calc-label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--charcoal-30); }
.roi-calc-value { font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 1.4rem; color: #fff; font-variant-numeric: tabular-nums; }
.roi-slider {
  -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px;
  background: var(--charcoal-70); outline: none; cursor: pointer; margin: 0 0 26px; display: block;
}
.roi-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--rosa-primary); box-shadow: var(--shadow-rosa); border: 3px solid #fff;
  cursor: pointer; transition: transform 150ms ease-out;
}
.roi-slider::-webkit-slider-thumb:hover { transform: scale(1.12); }
.roi-slider::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%; background: var(--rosa-primary);
  border: 3px solid #fff; cursor: pointer;
}
.roi-slider::-moz-range-track { background: var(--charcoal-70); height: 6px; border-radius: 999px; }
.roi-calc-sentence { font-size: 1.2rem; line-height: 1.55; color: var(--cream); margin: 0; font-weight: 500; }
.roi-calc-num {
  font-family: var(--font-display); font-style: italic; font-weight: 600; color: var(--rosa-soft); font-size: 1.15em;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 560px) {
  .roi-calc-sentence { font-size: 1.05rem; }
}

/* FAQ */
.faq-list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq-item { background: #fff; border: 1px solid var(--cream-edge); border-radius: 12px; padding: 4px 22px; }
.faq-item summary {
  cursor: pointer; list-style: none; padding: 18px 26px 18px 0; font-weight: 700; font-size: 1rem;
  color: var(--charcoal); position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: 0; top: 16px; font-size: 1.3rem; color: var(--rosa-primary); font-weight: 700; }
.faq-item[open] summary::after { content: "\2212"; }
.faq-item p { color: var(--charcoal-70); font-size: 0.95rem; margin: 0 0 20px; padding-right: 20px; }

.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.price-card { background: #fff; border: 1px solid var(--cream-edge); border-radius: 16px; padding: 32px 28px; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); }
.price-card.featured { background: var(--charcoal); border-color: var(--charcoal); color: var(--cream); box-shadow: var(--shadow-xl); position: relative; }
.price-card.featured::before {
  content: "Most teams start here"; position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--rosa-primary); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: 0.03em;
  padding: 5px 14px; border-radius: 999px; white-space: nowrap;
}
.price-card .plan-name { font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--charcoal-50); margin-bottom: 14px; }
.price-card.featured .plan-name { color: var(--charcoal-30); }
.price-card .price { font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 2.4rem; color: var(--charcoal); margin-bottom: 4px; }
.price-card.featured .price { color: #fff; }
.price-card .price span { font-family: var(--font-sans); font-style: normal; font-weight: 500; font-size: 1rem; color: var(--charcoal-50); }
.price-card.featured .price span { color: var(--charcoal-30); }
.price-card .plan-desc { font-size: 0.9rem; color: var(--charcoal-70); margin-bottom: 20px; }
.price-card.featured .plan-desc { color: var(--charcoal-30); }
.price-card ul { list-style: none; padding: 0; margin: 0 0 26px; flex: 1; }
.price-card li { font-size: 0.9rem; color: var(--charcoal-70); padding: 8px 0 8px 24px; position: relative; border-top: 1px solid var(--cream-edge); }
.price-card.featured li { color: var(--charcoal-08); border-top-color: var(--charcoal-70); }
.price-card li:first-child { border-top: none; }
.price-card li::before { content: "+"; position: absolute; left: 0; top: 8px; color: var(--rosa-primary); font-weight: 800; }
.plans-note { text-align: center; font-size: 0.88rem; color: var(--charcoal-50); margin-top: 24px; }

.final-cta { text-align: center; }
.final-cta h2 { font-size: 2.5rem; margin-bottom: 16px; }
.final-cta .sub { color: var(--charcoal-70); font-size: 1.1rem; max-width: 520px; margin: 0 auto 32px; }
.final-cta .cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.final-cta .cta-note { font-size: 0.88rem; color: var(--charcoal-50); margin-top: 20px; }

footer { border-top: 1px solid var(--cream-edge); padding: 72px 0 32px; background: var(--cream-deep); }
.footer-top { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 56px; padding-bottom: 44px; border-bottom: 1px solid var(--cream-edge); margin-bottom: 28px; }
.footer-brand { max-width: 280px; }
.footer-brand img { height: 20px; margin-bottom: 14px; }
.footer-brand .tagline { font-family: var(--font-display); font-style: italic; font-size: 14px; color: var(--rosa-deep); margin-bottom: 10px; }
.footer-brand .footer-desc { font-size: 13px; color: var(--charcoal-50); line-height: 1.6; margin: 0; }
.footer-links { display: flex; gap: 56px; flex-wrap: wrap; }
.footer-col h5 { font-size: 11.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--charcoal-30); margin: 0 0 16px; }
.footer-col a { display: block; font-size: 14px; font-weight: 600; color: var(--charcoal-70); text-decoration: none; margin-bottom: 12px; transition: color 150ms ease-out; }
.footer-col a:last-child { margin-bottom: 0; }
.footer-col a:hover { color: var(--rosa-deep); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--charcoal-50); flex-wrap: wrap; gap: 12px; }
.footer-bottom-left { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.footer-status {
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-rounded); font-weight: 800;
  font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--rosa-deep);
}
.footer-status .footer-status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--rosa-primary); }

@media (max-width: 720px) {
  .footer-top { flex-direction: column; gap: 36px; }
  .footer-links { gap: 40px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 980px) {
  .hero h1 { font-size: 2.6rem; }
  .hero-split .grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-split h1 { font-size: 2.4rem; }
  .app-sidebar { display: none; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .props, .persona-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .showcase, .showcase.reverse { grid-template-columns: 1fr; gap: 28px; }
  .showcase.reverse .showcase-copy, .showcase .showcase-copy { order: 1; }
  .showcase.reverse .showcase-visual, .showcase .showcase-visual { order: 2; }
  .kanban { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: 1fr; }
  .roi-box { grid-template-columns: 1fr; text-align: center; }
  .roi-math { justify-content: center; flex-wrap: wrap; }

  /* Mobile nav: nav-collapse switches from display:contents (an inline
     participant in .bar's flex row on desktop) to a fixed slide-down panel
     toggled by the hamburger button. Previously nav.primary-nav was simply
     display:none under this breakpoint with no way to reach it at all, so
     the Solutions dropdown (and every other nav link) was unreachable on
     mobile; this restores it as an accordion inside the panel. */
  .mobile-nav-toggle { display: block; }
  .nav-collapse {
    display: block; position: fixed; top: 65px; left: 0; right: 0;
    max-height: calc(100vh - 65px); overflow-y: auto;
    background: #fff; border-bottom: 1px solid var(--cream-edge); box-shadow: var(--shadow-lg);
    opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-8px);
    transition: opacity 220ms ease-out, transform 220ms ease-out, visibility 0s linear 220ms;
  }
  .nav-collapse.mobile-open {
    opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
    transition: opacity 220ms ease-out, transform 220ms ease-out, visibility 0s linear 0s;
  }
  nav.primary-nav { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 14px 24px 6px; }
  nav.primary-nav a.navlink { padding: 14px 4px; border-bottom: 1px solid var(--cream-edge); }
  .dropdown-toggle { width: 100%; justify-content: space-between; padding: 14px 4px; border-bottom: 1px solid var(--cream-edge); border-radius: 0; }
  .dropdown-panel {
    position: static; width: auto; box-shadow: none; border: none; border-radius: 0;
    padding: 0 4px 0 16px; margin: 0; transform: none; max-height: 0; overflow: hidden;
    opacity: 1; visibility: visible; pointer-events: auto;
    transition: max-height 240ms ease-out;
  }
  .dropdown.open .dropdown-panel { max-height: 320px; padding: 8px 4px 10px 16px; transform: none; transition: max-height 280ms ease-out; }
  .nav-actions { flex-direction: column; align-items: stretch; gap: 10px; padding: 18px 24px 24px; }
  .nav-actions .btn { width: 100%; }
}
@media (max-width: 560px) {
  .wrap, .wrap-narrow { padding: 0 20px; }
  .hero { padding: 72px 0 0; }
  .hero h1 { font-size: 2rem; }
  .statement h2 { font-size: 1.6rem; }
  .section-head h2 { font-size: 1.8rem; }
  .steps { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .roi-math { gap: 10px; }
  .roi-figure .rf-value { font-size: 1.5rem; }
}

/* ============================================================
   v3 additions: weak-signals-to-intent narrative + resonance/echo
   storytelling + before/after comparisons + live score animation.
   All motion is scroll-triggered (.in-view, added by a small inline
   IntersectionObserver script) and fully neutralized under
   prefers-reduced-motion below.
   ============================================================ */

/* Generic scroll reveal */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 700ms ease-out, transform 700ms ease-out; }
.reveal.in-view { opacity: 1; transform: translateY(0); }

/* Mini-story (pain scenario, told as a short timeline of lines) */
.story { max-width: 660px; margin: 0 auto; }
.story-line {
  display: flex; gap: 18px; align-items: flex-start; margin-bottom: 16px; font-size: 1.02rem;
  color: var(--charcoal-70); opacity: 0; transform: translateY(10px);
  transition: opacity 550ms ease-out, transform 550ms ease-out;
}
.story-line:last-child { margin-bottom: 0; }
.story-time {
  flex-shrink: 0; min-width: 78px; padding-top: 3px; font-family: var(--font-rounded); font-weight: 800;
  font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--charcoal-30);
}
.story-line--pain { color: var(--charcoal); font-weight: 700; }
.story-line--pain .story-time { color: var(--rosa-soft); }
.story-line--turn { color: var(--rosa-deep); font-family: var(--font-display); font-style: italic; font-size: 1.12rem; font-weight: 500; }
.story-line--turn .story-time { color: var(--rosa-deep); }
.story.in-view .story-line { opacity: 1; transform: none; }
.story.in-view .story-line:nth-child(1) { transition-delay: 0.05s; }
.story.in-view .story-line:nth-child(2) { transition-delay: 0.4s; }
.story.in-view .story-line:nth-child(3) { transition-delay: 0.75s; }
.story.in-view .story-line:nth-child(4) { transition-delay: 1.1s; }
.story.in-view .story-line:nth-child(5) { transition-delay: 1.45s; }

/* Weak-signals-to-intent visual: scattered dots converging into one glowing signal */
.intent-signal { text-align: center; }
.signal-field { position: relative; height: 260px; max-width: 540px; margin: 0 auto 36px; }
.signal-dot {
  position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; border-radius: 50%;
  background: var(--charcoal-30);
  transform: translate(calc(-50% + var(--sx)), calc(-50% + var(--sy))) scale(1);
  opacity: 0.5;
  transition: transform 1500ms cubic-bezier(0.16,1,0.3,1), opacity 1200ms ease-out, background-color 1200ms ease-out;
  transition-delay: var(--d, 0s);
}
.intent-signal.in-view .signal-dot {
  transform: translate(-50%, -50%) scale(0.55);
  opacity: 0.9;
  background: var(--rosa-primary);
}
.signal-core {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  opacity: 0; transition: opacity 700ms ease-out; transition-delay: 1.6s;
}
.intent-signal.in-view .signal-core { opacity: 1; }
.core-glow { width: 48px; height: 48px; border-radius: 50%; background: var(--rosa-primary); }
.intent-signal.in-view .core-glow { animation: signal-pulse 2.4s ease-out 1.7s infinite; }
@keyframes signal-pulse {
  0% { box-shadow: 0 0 0 0 rgba(253,35,126,0.45); }
  70% { box-shadow: 0 0 0 24px rgba(253,35,126,0); }
  100% { box-shadow: 0 0 0 0 rgba(253,35,126,0); }
}
.core-label {
  font-family: var(--font-rounded); font-weight: 800; font-size: 12.5px; color: var(--charcoal);
  background: #fff; border: 1px solid var(--cream-edge); padding: 6px 14px; border-radius: 999px;
  white-space: nowrap; box-shadow: var(--shadow-sm);
}
.signal-caption { max-width: 520px; margin: 0 auto; }
.signal-line {
  display: block; font-size: 0.98rem; color: var(--charcoal-70); opacity: 0; transform: translateY(8px);
  transition: opacity 550ms ease-out, transform 550ms ease-out; margin-bottom: 6px;
}
.intent-signal.in-view .signal-line:nth-child(1) { transition-delay: 0.1s; }
.intent-signal.in-view .signal-line:nth-child(2) { transition-delay: 0.55s; }
.intent-signal.in-view .signal-line:nth-child(3) { transition-delay: 1.7s; }
.intent-signal.in-view .signal-line { opacity: 1; transform: none; }
.signal-line--strong {
  font-weight: 600; color: var(--charcoal); font-family: var(--font-display); font-style: italic;
  font-size: 1.08rem; margin-top: 4px;
}

/* Resonance / echo timeline: scattered weak pulses vs. one synchronized wave */
.echo-timeline { display: flex; flex-direction: column; gap: 20px; }
.echo-lane { background: #fff; border: 1px solid var(--cream-edge); border-radius: 14px; padding: 20px 22px; box-shadow: var(--shadow-sm); }
.echo-lane-label { display: block; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--charcoal-50); margin-bottom: 14px; }
.echo-track { position: relative; height: 56px; background: var(--cream-deep); border-radius: 8px; overflow: hidden; }
.echo-pulse {
  position: absolute; top: 50%; left: var(--px); width: 8px; height: 8px; margin: -4px 0 0 -4px;
  border-radius: 50%; background: var(--charcoal-30); transform: scale(0); opacity: 0;
}
.echo-timeline.in-view .echo-pulse { animation: echo-pulse-in 800ms ease-out var(--d, 0s) forwards; }
@keyframes echo-pulse-in {
  0% { transform: scale(0); opacity: 0; }
  45% { transform: scale(1.4); opacity: 0.75; }
  100% { transform: scale(1); opacity: 0.4; }
}
.echo-ripple {
  position: absolute; top: 50%; left: var(--px); width: 8px; height: 8px; margin: -4px 0 0 -4px;
  border-radius: 50%; background: var(--rosa-primary); transform: scale(0); opacity: 0;
}
.echo-timeline.in-view .echo-ripple {
  animation: echo-ripple-in 650ms ease-out var(--d, 0s) forwards, echo-ripple-wave 2.6s ease-out calc(var(--d, 0s) + 0.55s) infinite;
}
@keyframes echo-ripple-in { to { transform: scale(1); opacity: 1; } }
@keyframes echo-ripple-wave {
  0% { box-shadow: 0 0 0 0 rgba(253,35,126,0.4); }
  100% { box-shadow: 0 0 0 28px rgba(253,35,126,0); }
}
.echo-lane-result { display: block; margin-top: 12px; font-size: 13px; font-weight: 700; color: var(--charcoal-70); }
.echo-lane--strong .echo-lane-result { color: var(--rosa-deep); }

/* Before / After comparison device */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.compare-col { border-radius: 16px; padding: 28px 26px; }
.compare-col--without { background: var(--cream-deep); border: 1px dashed var(--charcoal-15); }
.compare-col--with { background: #fff; border: 1px solid var(--rosa-soft); box-shadow: var(--shadow-md); }
.compare-label { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 16px; }
.compare-col--without .compare-label { color: var(--charcoal-50); }
.compare-col--with .compare-label { color: var(--rosa-deep); }
.compare-col ul { list-style: none; padding: 0; margin: 0; }
.compare-col li { font-size: 0.95rem; padding: 9px 0 9px 26px; position: relative; color: var(--charcoal-70); }
.compare-col--without li::before { content: "\2715"; position: absolute; left: 0; color: var(--charcoal-30); font-weight: 800; }
.compare-col--with li::before { content: "\2713"; position: absolute; left: 0; color: var(--rosa-primary); font-weight: 800; }
.compare-metric { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--charcoal-15); }
.compare-col--with .compare-metric { border-top-color: var(--rosa-soft); }
.compare-metric .v { display: block; font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 1.7rem; color: var(--charcoal); }
.compare-col--with .compare-metric .v { color: var(--rosa-deep); }
.compare-metric .k { display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--charcoal-50); margin-top: 3px; }

/* Live score ring: animated fill + staggered sub-score reveal */
.live-score-top { display: flex; align-items: center; gap: 22px; margin-bottom: 18px; }
.live-score-ring-wrap { position: relative; width: 84px; height: 84px; flex-shrink: 0; }
.live-score-svg { width: 84px; height: 84px; }
.live-score-track { fill: none; stroke: var(--cream-deep); stroke-width: 8; }
.live-score-fill {
  fill: none; stroke: var(--rosa-primary); stroke-width: 8; stroke-linecap: round;
  stroke-dasharray: 264; stroke-dashoffset: 264; transform: rotate(-90deg); transform-origin: 50% 50%;
  transition: stroke-dashoffset 1500ms cubic-bezier(0.16,1,0.3,1);
}
.live-score.in-view .live-score-fill { stroke-dashoffset: var(--offset, 0); }
.live-score-num {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 20px;
}
.live-score-title { font-weight: 700; font-size: 14px; color: var(--charcoal); margin-bottom: 2px; }
.live-score-sub { font-size: 12.5px; color: var(--charcoal-50); }
.live-score-subs .subscore {
  opacity: 0; transform: translateY(8px); transition: opacity 500ms ease-out, transform 500ms ease-out;
}
.live-score.in-view .live-score-subs .subscore { opacity: 1; transform: none; }
.live-score.in-view .live-score-subs .subscore:nth-child(1) { transition-delay: 1.3s; }
.live-score.in-view .live-score-subs .subscore:nth-child(2) { transition-delay: 1.48s; }
.live-score.in-view .live-score-subs .subscore:nth-child(3) { transition-delay: 1.66s; }
.live-score.in-view .live-score-subs .subscore:nth-child(4) { transition-delay: 1.84s; }

@media (max-width: 720px) {
  .compare { grid-template-columns: 1fr; }
  .live-score-top { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   v4 additions: the Voice pillar diagram (four voice types
   feeding one resonance wave), the resonance-to-revenue act
   split (banners, act tags, arc divider flow diagram), and the
   sales autopilot journey. Motion follows the same pattern as
   v3: scroll-triggered via .in-view, neutralized under
   prefers-reduced-motion by the global rule above.
   ============================================================ */

/* Voice pillar: four voice types feeding one resonance signal.
   Laid out on a true square (aspect-ratio, not a fixed height) so the SVG's
   400x400 viewBox maps 1:1 onto the container: previously the container was
   taller than wide, so the browser letterboxed the square viewBox inside it
   and every percentage-positioned label drifted out of alignment with the
   connector lines under it. Geometry is a clean compass cross (N/E/S/W into
   the center) instead of four diagonals crossing behind the core, so nothing
   overlaps and every line reads as its own lane. */
.voice-wave { position: relative; width: 100%; max-width: 440px; aspect-ratio: 1 / 1; height: auto; margin: 0 auto 8px; }
.voice-wave::before {
  content: ""; position: absolute; inset: 12%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(253,35,126,0.10) 0%, rgba(253,35,126,0) 72%);
}
.voice-wave-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.voice-link {
  fill: none; stroke: var(--rosa-soft); stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 44; stroke-dashoffset: 44;
  transition: stroke-dashoffset 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.voice-wave.in-view .voice-link { stroke-dashoffset: 0; }
.voice-wave.in-view .voice-link:nth-of-type(1) { transition-delay: 0.16s; }
.voice-wave.in-view .voice-link:nth-of-type(2) { transition-delay: 0.24s; }
.voice-wave.in-view .voice-link:nth-of-type(3) { transition-delay: 0.32s; }
.voice-wave.in-view .voice-link:nth-of-type(4) { transition-delay: 0.4s; }
.voice-node {
  position: absolute; transform: translate(-50%, -50%) scale(0.75); display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--cream-edge); border-radius: 999px; padding: 8px 16px 8px 10px;
  box-shadow: var(--shadow-sm); font-family: var(--font-rounded); font-weight: 800; font-size: 12.5px;
  color: var(--charcoal); white-space: nowrap; opacity: 0;
  transition: opacity 500ms ease-out, transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}
.voice-wave.in-view .voice-node { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.voice-wave.in-view .voice-node:nth-child(2) { transition-delay: 0s; }
.voice-wave.in-view .voice-node:nth-child(3) { transition-delay: 0.06s; }
.voice-wave.in-view .voice-node:nth-child(4) { transition-delay: 0.12s; }
.voice-wave.in-view .voice-node:nth-child(5) { transition-delay: 0.18s; }
.voice-node--company { left: 50%; top: 16.5%; }
.voice-node--employees { left: 83.5%; top: 50%; }
.voice-node--external { left: 50%; top: 83.5%; }
.voice-node--partners { left: 16.5%; top: 50%; }
.voice-node-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rosa-primary); flex-shrink: 0; }
/* .voice-core is a zero-size anchor pinned on the diagram's exact centre,
   which is also where the four SVG connector lines converge. It used to be a
   flex column holding the dot AND the "One resonance" label, so its centre
   was the centre of dot-plus-gap-plus-label: the dot itself sat well above
   the point the lines pointed at, and the pulse rings sat well below it. Dot,
   rings and converge point are now the same point by construction, and the
   label hangs off that anchor without moving anything. */
.voice-core { position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 2; }
/* Concentricity fix (v11): the ripples used to be positioned against
   .voice-core, whose box is the dot PLUS the gap PLUS the "One resonance"
   label underneath. Its 50%/50% is therefore roughly 18px below the dot's
   own centre, so every pulse ring sat visibly low. The dot and the rings now
   share a dedicated square anchor (.voice-core-orb, exactly the dot's size),
   and the rings are centred inside it with translate(-50%, -50%) carried
   through every keyframe, so they are concentric at every frame and at every
   viewport width regardless of how the label below wraps. */
.voice-core-orb {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: block; width: 52px; height: 52px;
}
.voice-ripple {
  position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; pointer-events: none;
  border-radius: 50%; border: 1.5px solid var(--rosa-primary); opacity: 0;
  transform: translate(-50%, -50%) scale(0.7);
}
.voice-wave.in-view .voice-ripple { animation: voice-ripple-out 3.2s cubic-bezier(0.22, 1, 0.36, 1) infinite; }
.voice-wave.in-view .voice-ripple:nth-child(1) { animation-delay: 0.9s; }
.voice-wave.in-view .voice-ripple:nth-child(2) { animation-delay: 2.5s; }
@keyframes voice-ripple-out {
  0% { opacity: 0.5; transform: translate(-50%, -50%) scale(0.7); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2.4); }
}
.voice-core-mark {
  position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #FF6BA6 0%, var(--rosa-primary) 55%, var(--rosa-primary-press) 100%);
  box-shadow: var(--shadow-rosa); display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 450ms ease-out, transform 450ms cubic-bezier(0.22, 1, 0.36, 1); transform: scale(0.7);
}
.voice-wave.in-view .voice-core-mark { opacity: 1; transform: scale(1); transition-delay: 0.5s; }
.voice-core-label {
  position: absolute; left: 50%; top: 42px; transform: translateX(-50%);
  font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 15px; color: var(--charcoal);
  background: #fff; border: 1px solid var(--cream-edge); border-radius: 999px; padding: 5px 16px;
  box-shadow: var(--shadow-sm); white-space: nowrap; opacity: 0; transition: opacity 450ms ease-out; transition-delay: 0.65s;
}
.voice-wave.in-view .voice-core-label { opacity: 1; }

/* Act framing: the resonance/revenue backbone split */
.act-banner {
  display: flex; align-items: baseline; gap: 12px; justify-content: center; margin-bottom: 12px;
}
.act-banner .act-num { font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 1.1rem; }
.act-banner--resonance .act-num { color: var(--rosa-primary); }
.act-banner--revenue .act-num { color: var(--rosa-deep); }
.act-banner .act-label { font-family: var(--font-sans); font-weight: 800; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--charcoal-50); }

.act-tag {
  display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; font-family: var(--font-rounded); font-weight: 800;
  font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; border-radius: 999px; padding: 5px 12px 5px 8px;
}
.act-tag .act-tag-dot { width: 6px; height: 6px; border-radius: 50%; }
.act-tag--resonance { background: var(--whisper-warm); color: var(--rosa-primary); }
.act-tag--resonance .act-tag-dot { background: var(--rosa-primary); }
.act-tag--revenue { background: var(--rosa-whisper); color: var(--rosa-deep); }
.act-tag--revenue .act-tag-dot { background: var(--rosa-deep); }

.act-nod { text-align: center; margin-top: 40px; color: var(--charcoal-50); font-size: 0.95rem; }
.act-nod a { color: var(--rosa-deep); font-weight: 700; text-decoration: none; }

/* Arc divider: the turn from resonance into revenue.
   v11 (2026-08-01): the rising-curve SVG was replaced by the Resonue logo
   mark's own vocabulary. The mark is a set of rounded vertical bars, so the
   graphic starts as vertically centred bars (the echo, an equaliser reading
   of resonance) and morphs into a bottom-aligned bar chart whose bars grow
   left to right (the pipeline). One CSS animation per bar drives the whole
   transformation: it breathes on the centreline, then drops to the baseline
   and grows, deepening from rosa primary to rosa deep exactly like the mark's
   tall right-hand bar. Heights and offsets are percentages of the chart box,
   so the geometry is identical at every width. Fill mode is forwards and the
   final keyframe IS the pipeline state, so under prefers-reduced-motion (the
   global rule collapses duration and iteration count) the chart simply renders
   as the finished bar chart with no motion at all. */
.arc-divider { text-align: center; padding: 24px 0 8px; }
.arc-divider .arc-eyebrow { display: block; margin-bottom: 18px; }
.arc-divider h2 { font-size: 2.1rem; max-width: 680px; margin: 0 auto 8px; line-height: 1.2; }
.arc-divider h2 .italic-accent { font-style: italic; font-family: var(--font-display); }

.turn-flow { max-width: 620px; margin: 36px auto 0; }
.turn-chart {
  position: relative; display: flex; align-items: stretch; gap: 12px;
  height: 168px; width: 100%;
}
.turn-slot { position: relative; flex: 1 1 0; min-width: 0; }
.turn-bar {
  position: absolute; left: 0; right: 0; border-radius: 999px;
  background-color: var(--rosa-primary); opacity: 0;
  height: calc(var(--echo) * 1%);
  bottom: calc((100% - var(--echo) * 1%) / 2);
}
.arc-divider.in-view .turn-bar {
  animation: turn-morph 2600ms both;
  animation-delay: calc(var(--i) * 70ms);
}
@keyframes turn-morph {
  0% {
    opacity: 0; height: 0%; bottom: 50%;
    background-color: var(--rosa-primary); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  12% {
    opacity: 1; height: calc(var(--echo) * 1.28%); bottom: calc((100% - var(--echo) * 1.28%) / 2);
    animation-timing-function: ease-in-out;
  }
  28% {
    opacity: 1; height: calc(var(--echo) * 0.72%); bottom: calc((100% - var(--echo) * 0.72%) / 2);
    animation-timing-function: ease-in-out;
  }
  44% {
    opacity: 1; height: calc(var(--echo) * 1%); bottom: calc((100% - var(--echo) * 1%) / 2);
    background-color: var(--rosa-primary); animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }
  100% {
    opacity: 1; height: calc(var(--pipe) * 1%); bottom: 0;
    background-color: var(--c, var(--rosa-primary));
  }
}
.turn-baseline {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 999px;
  background: var(--charcoal-15); opacity: 0;
}
.arc-divider.in-view .turn-baseline { animation: turn-baseline-in 2600ms ease-out both; }
@keyframes turn-baseline-in { 0%, 44% { opacity: 0; } 100% { opacity: 1; } }
.turn-labels {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px;
  font-family: var(--font-rounded); font-weight: 800; font-size: 11.5px;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.turn-label { display: inline-flex; align-items: center; gap: 8px; }
.turn-label-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.turn-label--start { color: var(--rosa-primary); }
.turn-label--end { color: var(--rosa-deep); }
.turn-caption {
  max-width: 54ch; margin: 22px auto 0; color: var(--charcoal-50); font-size: 0.95rem;
}

@media (max-width: 720px) {
  .voice-wave { max-width: 320px; }
  .voice-node { font-size: 11px; padding: 7px 13px 7px 9px; }
  .act-banner { flex-wrap: wrap; }
}
@media (max-width: 500px) {
  .turn-chart { height: 124px; gap: 7px; }
  .turn-labels { font-size: 10px; letter-spacing: 0.05em; }
}

/* Sales autopilot journey: three clearly separated cards, each ending on
   the outcome the rep walks away with. Replaced the old continuous
   border-divided list (numbers in a side column, long unbroken paragraphs)
   with independent cards and a two-column copy/visual layout per step,
   matching the showcase pattern used everywhere else on the site. */
.journey { display: flex; flex-direction: column; gap: 28px; }
.journey-step {
  background: #fff; border: 1px solid var(--cream-edge); border-radius: 20px;
  padding: 40px 44px; box-shadow: var(--shadow-sm);
}
.journey-step-head { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; }
.journey-marker-num {
  width: 44px; height: 44px; border-radius: 50%; background: var(--charcoal); color: #fff;
  display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-style: italic;
  font-weight: 700; font-size: 1.15rem; flex-shrink: 0;
}
.journey-step-head .journey-kicker { font-family: var(--font-sans); font-weight: 800; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rosa-deep); }
.journey-step-body { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
.journey-copy h3 { font-size: 1.5rem; margin-bottom: 12px; line-height: 1.2; }
.journey-copy p { color: var(--charcoal-70); font-size: 1rem; margin: 0 0 12px; max-width: 48ch; }
.journey-copy .story { margin: 0 0 16px; }
.journey-outcome {
  display: inline-flex; align-items: center; gap: 8px; background: var(--whisper-warm);
  color: var(--rosa-deep); font-weight: 700; font-size: 0.92rem; border-radius: 999px;
  padding: 10px 18px 10px 16px; margin-top: 8px;
}
.journey-outcome::before { content: "\2192"; font-weight: 800; }
.journey-copy .act-nod { text-align: left; margin-top: 22px; font-size: 0.85rem; }
.journey-promise { text-align: center; padding: 8px 0; }
.journey-promise h3 { font-size: 1.7rem; max-width: 640px; margin: 0 auto; line-height: 1.3; font-weight: 500; }
.journey-promise .italic-accent { font-style: italic; font-family: var(--font-display); color: var(--rosa-deep); font-weight: 500; }

@media (max-width: 720px) {
  .journey-step { padding: 30px 24px; }
  .journey-step-body { grid-template-columns: 1fr; gap: 22px; }
}

/* ============================================================
   v6 additions: briefs calendar (date-range, priority-coded),
   per-voice personalized draft cards, a looping intent-signal
   variant, the rebuilt buying-committee arrow diagram, the
   fictional-scenario timeline, and the compact pricing teaser
   for the new dedicated pricing.html. Same conventions as v3-v5:
   scroll-triggered via .in-view, neutralized under
   prefers-reduced-motion by the existing global rule.
   ============================================================ */

/* Briefs calendar: mirrors the real product's date-range briefs
   (Brief.startDate/endDate) laid out like a sprint chart, color-coded
   by BriefPriority (HIGH/MEDIUM/LOW, same mapping as the in-app
   PRIORITY_BG in components/briefs/BriefCalendar.tsx). */
.brief-calendar { background: #fff; }
.bc-scale { display: flex; justify-content: space-between; font-size: 10.5px; font-weight: 800; color: var(--charcoal-30); letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 10px; }
.bc-track {
  position: relative; height: 118px; border-radius: 10px; background: var(--cream-deep);
  background-image: repeating-linear-gradient(to right, var(--cream-edge) 0, var(--cream-edge) 1px, transparent 1px, transparent calc(100% / 7));
}
.bc-bar { position: absolute; left: var(--start); right: calc(100% - var(--end)); height: 36px; border-radius: 8px; display: flex; align-items: center; padding: 0 12px; box-shadow: var(--shadow-sm); overflow: hidden; }
.bc-bar--high { top: 16px; background: var(--rosa-deep); }
.bc-bar--medium { top: 66px; background: var(--warning); }
.bc-bar-label { font-family: var(--font-rounded); font-weight: 800; font-size: 11.5px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bc-bar-meta { display: block; font-weight: 600; font-size: 9.5px; color: rgba(255,255,255,0.85); margin-top: 2px; }
.bc-legend { display: flex; gap: 18px; margin-top: 14px; flex-wrap: wrap; }
.bc-legend-item { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--charcoal-70); }
.bc-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.bc-legend-item--high .bc-dot { background: var(--rosa-deep); }
.bc-legend-item--medium .bc-dot { background: var(--warning); }
.bc-legend-item--low .bc-dot { background: var(--charcoal-50); }

/* Per-voice personalized draft cards: each voice's own generated draft,
   built from their own top posts, not a shared template. */
.voice-drafts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.vd-card { background: #fff; border: 1px solid var(--cream-edge); border-radius: 12px; padding: 14px; box-shadow: var(--shadow-sm); }
.vd-head { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.vd-avatar { width: 22px; height: 22px; border-radius: 50%; background: var(--rosa-whisper); flex-shrink: 0; }
.vd-name { font-size: 12px; font-weight: 800; color: var(--charcoal); line-height: 1.3; }
.vd-role { display: block; font-size: 10px; font-weight: 500; color: var(--charcoal-50); }
.vd-snippet { font-size: 11.5px; color: var(--charcoal-70); line-height: 1.55; margin: 0 0 10px; font-family: var(--font-display); font-style: italic; }
.vd-tag {
  display: inline-block; font-family: var(--font-rounded); font-weight: 800; font-size: 9.5px;
  letter-spacing: 0.03em; text-transform: uppercase; color: var(--rosa-deep); background: var(--whisper-warm);
  border-radius: 999px; padding: 4px 10px;
}
@media (max-width: 720px) {
  .voice-drafts { grid-template-columns: 1fr; }
}

/* Looping variant of .intent-signal: for the one instance (for-sales.html,
   "I know who to contact") that should keep converging continuously
   instead of firing once and settling. Dots cycle scatter -> converge ->
   hold -> scatter via keyframes (infinite) instead of the base
   component's one-shot transition; the shared core-glow pulse (already
   infinite once .in-view) is reused unchanged. */
.intent-signal--loop .signal-dot { transition: none; }
.intent-signal--loop.in-view .signal-dot {
  animation: signal-converge-loop 5.5s cubic-bezier(0.65, 0, 0.35, 1) infinite;
  animation-delay: var(--d, 0s);
}
@keyframes signal-converge-loop {
  0%, 100% { transform: translate(calc(-50% + var(--sx)), calc(-50% + var(--sy))) scale(1); opacity: 0.5; background-color: var(--charcoal-30); }
  40%, 80% { transform: translate(-50%, -50%) scale(0.55); opacity: 0.9; background-color: var(--rosa-primary); }
}

/* Buying committee diagram: 4 distinct, named engagers with animated
   arrows drawing in toward a larger central account dot, looping.
   Replaces the generic scattered-dots intent-signal on the RevOps page's
   "Buying committee detection" showcase with something that actually
   shows the mechanism (4+ named people, 3+ posts, one account). */
.committee-form { position: relative; width: 100%; max-width: 480px; height: 300px; margin: 0 auto 8px; }
.committee-form-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cf-arrow { fill: none; stroke: var(--rosa-soft); stroke-width: 2; stroke-linecap: round; opacity: 0; }
.committee-form.in-view .cf-arrow {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: cf-arrow-draw 4.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.committee-form.in-view .cf-arrow:nth-of-type(1) { animation-delay: 0s; }
.committee-form.in-view .cf-arrow:nth-of-type(2) { animation-delay: 0.22s; }
.committee-form.in-view .cf-arrow:nth-of-type(3) { animation-delay: 0.44s; }
.committee-form.in-view .cf-arrow:nth-of-type(4) { animation-delay: 0.66s; }
@keyframes cf-arrow-draw {
  0% { stroke-dashoffset: 1; opacity: 0; }
  12% { opacity: 1; }
  45%, 75% { stroke-dashoffset: 0; opacity: 1; }
  96%, 100% { stroke-dashoffset: 1; opacity: 0; }
}
.cf-dot {
  position: absolute; transform: translate(-50%, -50%) scale(0.8); display: flex; flex-direction: column; align-items: center; gap: 6px;
  opacity: 0; transition: opacity 500ms ease-out, transform 500ms cubic-bezier(0.22,1,0.36,1);
}
.committee-form.in-view .cf-dot { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.committee-form.in-view .cf-dot--1 { transition-delay: 0s; }
.committee-form.in-view .cf-dot--2 { transition-delay: 0.08s; }
.committee-form.in-view .cf-dot--3 { transition-delay: 0.16s; }
.committee-form.in-view .cf-dot--4 { transition-delay: 0.24s; }
.cf-dot--1 { left: 15%; top: 15%; }
.cf-dot--2 { left: 85%; top: 15%; }
.cf-dot--3 { left: 15%; top: 85%; }
.cf-dot--4 { left: 85%; top: 85%; }
.cf-dot-mark { width: 14px; height: 14px; border-radius: 50%; background: var(--rosa-primary); box-shadow: var(--shadow-sm); }
.cf-dot-label {
  font-family: var(--font-rounded); font-weight: 800; font-size: 11px; color: var(--charcoal); text-align: center;
  background: #fff; border: 1px solid var(--cream-edge); border-radius: 10px; padding: 5px 9px; white-space: nowrap;
  box-shadow: var(--shadow-sm);
}
.cf-dot-label em { display: block; font-style: normal; font-weight: 600; font-size: 9.5px; color: var(--charcoal-50); margin-top: 1px; }
.cf-core {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  opacity: 0; transition: opacity 500ms ease-out; transition-delay: 0.4s;
}
.committee-form.in-view .cf-core { opacity: 1; }
.cf-core-inner { position: relative; width: 56px; height: 56px; }
.cf-core-glow { position: absolute; inset: 0; border-radius: 50%; background: var(--rosa-primary); z-index: 0; }
.committee-form.in-view .cf-core-glow { animation: signal-pulse 2.6s ease-out 0.6s infinite; }
.cf-core-mark {
  position: relative; z-index: 1; width: 56px; height: 56px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #FF6BA6 0%, var(--rosa-primary) 55%, var(--rosa-primary-press) 100%);
  box-shadow: var(--shadow-rosa);
}
.cf-core-label {
  font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 14px; color: var(--charcoal);
  background: #fff; border: 1px solid var(--cream-edge); border-radius: 999px; padding: 5px 14px;
  white-space: nowrap; box-shadow: var(--shadow-sm);
}
@media (max-width: 560px) {
  .committee-form { height: 320px; }
  .cf-dot-label { font-size: 10px; padding: 4px 7px; }
}

/* Fictional-scenario vertical timeline, for the illustrative worked
   example (use-cases.html). Kept visually distinct from .story (which is
   a compact inline pain/turn narrative) since this one needs room for a
   full multi-month walkthrough plus a stat callout at the end. */
.scenario-timeline { position: relative; max-width: 680px; margin: 0 auto; }
.scenario-timeline::before { content: ""; position: absolute; left: 17px; top: 6px; bottom: 6px; width: 2px; background: var(--cream-edge); }
.st-item { position: relative; display: flex; gap: 24px; padding-bottom: 44px; opacity: 0; transform: translateY(14px); transition: opacity 600ms ease-out, transform 600ms ease-out; }
.scenario-timeline.in-view .st-item { opacity: 1; transform: none; }
.scenario-timeline.in-view .st-item:nth-child(1) { transition-delay: 0.05s; }
.scenario-timeline.in-view .st-item:nth-child(2) { transition-delay: 0.25s; }
.scenario-timeline.in-view .st-item:nth-child(3) { transition-delay: 0.45s; }
.scenario-timeline.in-view .st-item:nth-child(4) { transition-delay: 0.65s; }
.scenario-timeline.in-view .st-item:nth-child(5) { transition-delay: 0.85s; }
.scenario-timeline.in-view .st-item:nth-child(6) { transition-delay: 1.05s; }
.st-item:last-child { padding-bottom: 0; }
.st-marker { position: relative; flex-shrink: 0; width: 34px; }
.st-marker-dot {
  position: absolute; left: 0; top: 2px; width: 34px; height: 34px; border-radius: 50%;
  background: #fff; border: 2px solid var(--rosa-primary); display: flex; align-items: center; justify-content: center; z-index: 1;
}
.st-item--stat .st-marker-dot { background: var(--rosa-primary); border-color: var(--rosa-primary); }
.st-marker-dot .st-marker-mark { width: 7px; height: 7px; border-radius: 50%; background: var(--rosa-primary); }
.st-item--stat .st-marker-dot .st-marker-mark { background: #fff; }
.st-body { flex: 1; padding-top: 4px; }
.st-date { display: block; font-family: var(--font-rounded); font-weight: 800; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rosa-deep); margin-bottom: 8px; }
.st-body h4 { font-size: 1.2rem; margin-bottom: 8px; line-height: 1.25; }
.st-body p { color: var(--charcoal-70); font-size: 0.98rem; margin: 0; }
.st-stat-row { display: flex; gap: 32px; margin-top: 16px; flex-wrap: wrap; }
.st-stat-row--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 32px; }
.st-stat .v { font-size: 1.9rem; display: block; }
.st-stat .k { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--charcoal-50); margin-top: 4px; }
@media (max-width: 560px) {
  .scenario-timeline::before { left: 15px; }
  .st-item { gap: 16px; }
}

/* Compact pricing teaser: replaces the full pricing-grid on index.html,
   linking out to the new dedicated pricing.html. Reuses the .roi-box
   charcoal treatment for visual consistency with the rest of the site's
   "the math" moments. */
.pricing-teaser { background: var(--charcoal); border-radius: 20px; padding: 48px; color: var(--cream); display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; }
.pt-copy .eyebrow { color: var(--rosa-soft); display: block; margin-bottom: 10px; }
.pt-copy h2 { color: #fff; font-size: 2rem; margin: 0 0 14px; }
.pt-copy p { color: var(--charcoal-08); font-size: 1rem; max-width: 46ch; margin: 0 0 26px; }
.pt-figure { text-align: center; padding-left: 32px; border-left: 1px solid var(--charcoal-70); }
.pt-price { display: flex; align-items: baseline; justify-content: center; gap: 4px; }
.pt-price-num { font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 2.8rem; color: #fff; }
.pt-price-suffix { font-size: 1rem; color: var(--charcoal-30); }
.pt-price-note { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--charcoal-30); margin-top: 10px; }
@media (max-width: 720px) {
  .pricing-teaser { grid-template-columns: 1fr; text-align: center; padding: 36px 28px; }
  .pt-copy p { margin-left: auto; margin-right: auto; }
  .pt-figure { border-left: none; border-top: 1px solid var(--charcoal-70); padding-left: 0; padding-top: 24px; }
}

/* ============================================================
   v8 additions: the Talk to Sales page (talk-to-sales.html).
   A two-column pitch + form layout, a zero-friction three-field
   form, and a client-side reveal of the booking step. The
   booking step structurally hosts a Calendly iframe (URL wired
   by Fred later); until the real URL is set, a clean pending
   panel renders instead of a broken iframe. Same conventions:
   scroll reveals via .in-view, motion neutralized under
   prefers-reduced-motion by the existing global rule.
   ============================================================ */

.talk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.talk-grid > * { min-width: 0; }
.talk-pitch h2 { font-size: 1.9rem; margin-bottom: 14px; line-height: 1.2; }
.talk-pitch p { color: var(--charcoal-70); font-size: 1rem; margin: 0 0 14px; max-width: 52ch; }
.talk-steps { list-style: none; padding: 0; margin: 26px 0 0; counter-reset: talkstep; }
.talk-steps li { position: relative; padding: 0 0 22px 52px; counter-increment: talkstep; }
.talk-steps li:last-child { padding-bottom: 0; }
.talk-steps li::before {
  content: counter(talkstep); position: absolute; left: 0; top: -2px; width: 34px; height: 34px;
  border-radius: 50%; background: var(--charcoal); color: #fff; display: flex; align-items: center;
  justify-content: center; font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: 1rem;
}
.talk-steps .ts-title { display: block; font-weight: 800; font-size: 0.98rem; color: var(--charcoal); margin-bottom: 3px; }
.talk-steps .ts-body { display: block; font-size: 0.93rem; color: var(--charcoal-70); }

.talk-card {
  background: #fff; border: 1px solid var(--cream-edge); border-radius: 20px;
  padding: 36px; box-shadow: var(--shadow-md);
}
.talk-card h3 { font-size: 1.3rem; margin-bottom: 6px; }
.talk-card .talk-card-sub { font-size: 0.92rem; color: var(--charcoal-50); margin: 0 0 24px; }
.field { margin-bottom: 18px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field label { display: block; font-size: 13px; font-weight: 700; color: var(--charcoal); margin-bottom: 6px; }
.field input {
  width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1px solid var(--charcoal-15);
  border-radius: 10px; font-family: var(--font-sans); font-size: 15px; color: var(--charcoal);
  background: #fff; transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}
.field input::placeholder { color: var(--charcoal-30); }
.field input:focus { outline: none; border-color: var(--rosa-primary); box-shadow: 0 0 0 3px rgba(253,35,126,0.28); }
.field .field-hint { font-size: 12px; color: var(--charcoal-50); margin-top: 6px; }
.talk-card .btn { width: 100%; }
.talk-form-note { text-align: center; font-size: 12.5px; color: var(--charcoal-50); margin: 14px 0 0; }

/* Two client-side steps: form first, booking after the click. */
.talk-step { display: none; }
.talk-step.active { display: block; animation: talk-step-in 320ms ease-out; }
@keyframes talk-step-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.talk-book-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.talk-book-head h3 { margin-bottom: 0; }
.talk-book-edit {
  background: none; border: none; padding: 0; cursor: pointer; font-family: var(--font-sans);
  font-size: 12.5px; font-weight: 700; color: var(--rosa-deep); text-decoration: underline;
}
.booking-iframe { width: 100%; height: 620px; border: 0; border-radius: 14px; background: var(--cream); display: block; }
.booking-pending {
  border: 1px dashed var(--charcoal-15); border-radius: 14px; background: var(--cream-deep);
  padding: 56px 28px; text-align: center;
}
.booking-pending .bp-mark {
  width: 44px; height: 44px; border-radius: 12px; background: var(--rosa-whisper); margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
}
.booking-pending .bp-mark span { width: 10px; height: 10px; border-radius: 50%; background: var(--rosa-primary); }
.booking-pending .bp-title { font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 1.25rem; color: var(--charcoal); margin: 0 0 6px; }
.booking-pending .bp-sub { font-size: 0.9rem; color: var(--charcoal-50); margin: 0; }

@media (max-width: 980px) {
  .talk-grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 560px) {
  .talk-card { padding: 26px 20px; }
  .field-row { grid-template-columns: 1fr; }
  .booking-iframe { height: 560px; }
}

/* ============================================================
   v10 additions: the two-segment pricing tabs and the partner
   ROI calculator on pricing.html. The tab switcher is a
   segmented pill control; each panel hosts one dark math box
   (the existing deal calculator, or the new partner-budget
   calculator). ARIA tabs pattern, vanilla JS, motion
   neutralized under prefers-reduced-motion globally.
   ============================================================ */

.pricing-tabs-head { text-align: center; margin-bottom: 28px; }
.pricing-tabs-head .eyebrow { display: block; margin-bottom: 12px; }
.pricing-tabs-head h2 { font-size: 1.9rem; margin: 0; }
.seg-control {
  display: inline-flex; background: var(--cream-deep); border: 1px solid var(--cream-edge);
  border-radius: 999px; padding: 5px; gap: 4px; margin: 22px auto 0;
}
.seg-btn {
  font-family: var(--font-sans); font-size: 14px; font-weight: 700; color: var(--charcoal-70);
  background: transparent; border: none; border-radius: 999px; padding: 10px 22px; cursor: pointer;
  transition: background 180ms ease-out, color 180ms ease-out, box-shadow 180ms ease-out;
  white-space: nowrap;
}
.seg-btn:hover { color: var(--charcoal); }
.seg-btn:focus-visible { outline: 2px solid var(--rosa-primary); outline-offset: 2px; }
.seg-btn[aria-selected="true"] { background: #fff; color: var(--charcoal); box-shadow: var(--shadow-sm); }
.price-tab-panel[hidden] { display: none; }
.price-tab-panel { animation: talk-step-in 320ms ease-out; }

/* Partner calculator internals (reuses .roi-box / .roi-calc chrome) */
.pcalc-inputs { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 28px; margin-bottom: 26px; }
.pcalc-input .roi-calc-label-row { margin-bottom: 10px; }
.pcalc-cascade { border-top: 1px solid var(--charcoal-70); padding-top: 22px; display: flex; flex-direction: column; gap: 10px; }
.pcalc-line { font-size: 1.05rem; color: var(--cream); margin: 0; }
.pcalc-line .roi-calc-num { font-size: 1.1em; }
.pcalc-line--verdict { font-size: 1.2rem; font-weight: 600; margin-top: 6px; }
.pcalc-line--verdict .pcalc-good { color: var(--rosa-soft); font-family: var(--font-display); font-style: italic; }
@media (max-width: 860px) {
  .pcalc-inputs { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 560px) {
  .seg-btn { padding: 9px 14px; font-size: 12.5px; }
  .pcalc-line { font-size: 0.98rem; }
  .pcalc-line--verdict { font-size: 1.08rem; }
}

/* ============================================================
   v11 additions (2026-08-01): the build board.
   Replaces the flat "Coming, not shipped yet" chip row on the
   landing page with a graphic, three-lane board. The chip row
   (.roadmap / .chip above) stays as-is on the persona and
   Content Partners pages, where the roadmap note is a short
   contextual footnote rather than a section of its own.
   Honesty rules, non-negotiable and locked in messaging.md:
   the board renders no product UI and no mock screenshots, only
   an abstract three-bar glyph borrowed from the logo mark, it
   carries no dates, no percentages and no completion metaphor,
   and the lane names describe where the work stands internally,
   not how close anything is to shipping.
   ============================================================ */
.build-board {
  position: relative; overflow: hidden; margin-top: 72px;
  background: var(--charcoal); border-radius: 24px; padding: 48px 48px 40px; color: var(--cream);
  box-shadow: var(--shadow-lg);
}
.build-board::after {
  content: ""; position: absolute; top: -140px; right: -120px; width: 420px; height: 420px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(253,35,126,0.22) 0%, rgba(253,35,126,0) 68%);
}
/* The reveal is anchored to .bb-head, not to .build-board itself, on purpose.
   The shared IntersectionObserver fires at a 0.35 ratio, and the board is
   taller than the viewport (well over 3000px once the lanes stack at mobile
   width), so an element that tall can never reach 35% intersection and would
   stay invisible forever. .bb-head is short, always crosses the threshold,
   and the cards ride off it through the sibling selector below. */
.bb-head { position: relative; z-index: 1; max-width: 640px; margin-bottom: 38px; }
.bb-flag {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px;
  border: 1px dashed var(--charcoal-70); border-radius: 999px; padding: 6px 16px 6px 12px;
  font-family: var(--font-rounded); font-weight: 800; font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--rosa-soft);
}
.bb-flag-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--rosa-soft); }
.bb-head h3 { color: #fff; font-size: 1.9rem; line-height: 1.22; margin-bottom: 14px; }
.bb-head h3 .italic-accent { font-style: italic; font-family: var(--font-display); color: var(--rosa-soft); }
.bb-head p { color: var(--charcoal-30); font-size: 0.98rem; margin: 0; }

.bb-lanes { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.bb-lane { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.bb-lane-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-bottom: 12px; border-bottom: 1px solid var(--charcoal-70);
}
.bb-lane-name {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-rounded); font-weight: 800; font-size: 11.5px;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--charcoal-30);
}
.bb-lane--now .bb-lane-name { color: var(--rosa-primary); }
.bb-lane--next .bb-lane-name { color: var(--rosa-soft); }
.bb-lane-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.bb-lane--now .bb-lane-dot { animation: bb-pulse 2.4s ease-out infinite; }
@keyframes bb-pulse {
  0% { box-shadow: 0 0 0 0 rgba(253,35,126,0.5); }
  70% { box-shadow: 0 0 0 9px rgba(253,35,126,0); }
  100% { box-shadow: 0 0 0 0 rgba(253,35,126,0); }
}
.bb-lane-count {
  font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 1.05rem;
  font-variant-numeric: tabular-nums; color: var(--charcoal-30);
}
.bb-card {
  background: rgba(255,255,255,0.045); border: 1px solid var(--charcoal-70); border-radius: 14px;
  padding: 16px 18px 18px; opacity: 0; transform: translateY(12px);
  transition: opacity 550ms ease-out, transform 550ms cubic-bezier(0.22, 1, 0.36, 1),
              border-color 200ms ease-out, background 200ms ease-out;
}
.bb-head.in-view ~ .bb-lanes .bb-card { opacity: 1; transform: translateY(0); }
.bb-card:hover { border-color: var(--rosa-primary); background: rgba(253,35,126,0.07); }
.bb-lane--now .bb-card { border-color: rgba(253,35,126,0.4); background: rgba(253,35,126,0.06); }
.bb-lane--soon .bb-card { border-style: dashed; }
.bb-card h4 { color: #fff; font-size: 1.02rem; line-height: 1.3; margin: 10px 0 6px; }
.bb-card p { color: var(--charcoal-30); font-size: 0.88rem; line-height: 1.5; margin: 0; }
.bb-glyph { display: inline-flex; align-items: center; gap: 3px; height: 20px; }
.bb-glyph i {
  display: block; width: 4px; border-radius: 999px; background: var(--rosa-soft);
  height: calc(var(--h) * 1%);
  transition: height 340ms cubic-bezier(0.22, 1, 0.36, 1);
}
.bb-glyph i:nth-child(2) { transition-delay: 60ms; }
.bb-glyph i:nth-child(3) { transition-delay: 120ms; }
.bb-card:hover .bb-glyph i { height: 100%; }
.bb-lane--soon .bb-glyph i { background: var(--charcoal-50); }
/* "Already shipped" counterweight, sits under the short first lane. It is the
   honesty guardrail made visual: the live product on the left, the roadmap on
   the right, no ambiguity about which is which. Every chip here maps to a
   shipped claim in marketing/messaging.md. */
.bb-shipped {
  margin-top: 10px; border: 1px solid var(--charcoal-70); border-radius: 14px;
  padding: 18px; background: rgba(255,255,255,0.02);
  opacity: 0; transform: translateY(12px);
  transition: opacity 550ms ease-out, transform 550ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: 0.18s;
}
.bb-head.in-view ~ .bb-lanes .bb-shipped { opacity: 1; transform: translateY(0); }
.bb-shipped-label {
  display: block; font-family: var(--font-rounded); font-weight: 800; font-size: 10.5px;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--rosa-soft); margin-bottom: 14px;
}
.bb-shipped-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.bb-shipped-chips span {
  border: 1px solid rgba(253,168,200,0.35); border-radius: 999px; padding: 5px 12px;
  font-size: 11.5px; font-weight: 600; color: var(--cream); background: rgba(253,35,126,0.08);
}
.bb-shipped p { margin: 16px 0 0; font-size: 0.85rem; line-height: 1.5; color: var(--charcoal-30); }

.bb-foot {
  position: relative; z-index: 1; margin-top: 34px; padding-top: 22px;
  border-top: 1px solid var(--charcoal-70); display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between; gap: 14px;
  font-size: 12.5px; color: var(--charcoal-30);
}
.bb-foot a { color: var(--rosa-soft); font-weight: 700; text-decoration: none; }
.bb-foot a:hover { text-decoration: underline; }

/* Card entrance stagger, lane by lane then card by card. Cards are
   .bb-card:nth-child(2..n) because each lane opens with its .bb-lane-head. */
.bb-head.in-view ~ .bb-lanes .bb-lane:nth-child(1) .bb-card:nth-child(2) { transition-delay: 0.06s; }
.bb-head.in-view ~ .bb-lanes .bb-lane:nth-child(1) .bb-card:nth-child(3) { transition-delay: 0.12s; }
.bb-head.in-view ~ .bb-lanes .bb-lane:nth-child(2) .bb-card:nth-child(2) { transition-delay: 0.18s; }
.bb-head.in-view ~ .bb-lanes .bb-lane:nth-child(2) .bb-card:nth-child(3) { transition-delay: 0.24s; }
.bb-head.in-view ~ .bb-lanes .bb-lane:nth-child(2) .bb-card:nth-child(4) { transition-delay: 0.30s; }
.bb-head.in-view ~ .bb-lanes .bb-lane:nth-child(2) .bb-card:nth-child(5) { transition-delay: 0.36s; }
.bb-head.in-view ~ .bb-lanes .bb-lane:nth-child(2) .bb-card:nth-child(6) { transition-delay: 0.42s; }
.bb-head.in-view ~ .bb-lanes .bb-lane:nth-child(2) .bb-card:nth-child(7) { transition-delay: 0.48s; }
.bb-head.in-view ~ .bb-lanes .bb-lane:nth-child(3) .bb-card:nth-child(2) { transition-delay: 0.54s; }
.bb-head.in-view ~ .bb-lanes .bb-lane:nth-child(3) .bb-card:nth-child(3) { transition-delay: 0.60s; }
.bb-head.in-view ~ .bb-lanes .bb-lane:nth-child(3) .bb-card:nth-child(4) { transition-delay: 0.66s; }
.bb-head.in-view ~ .bb-lanes .bb-lane:nth-child(3) .bb-card:nth-child(5) { transition-delay: 0.72s; }

@media (max-width: 900px) {
  .build-board { padding: 38px 28px 32px; }
  .bb-lanes { grid-template-columns: 1fr; gap: 30px; }
  .bb-head h3 { font-size: 1.6rem; }
}
@media (max-width: 500px) {
  .build-board { padding: 30px 20px 26px; border-radius: 18px; margin-top: 52px; }
  .bb-head h3 { font-size: 1.42rem; }
  .bb-head p { font-size: 0.92rem; }
  .bb-foot { font-size: 12px; }
}

/* ============================================================
   AGENTIC VARIANT additions (agentic_version/, 2026-08-18).
   This file is a fork of marketing/website/v2/shared.css, taken
   byte for byte and appended to. Everything above this banner is
   the live site's stylesheet, untouched, so the two can diverge
   without either one dragging the other. Everything below exists
   only for the agentic home page.

   Register: the live site shows you a product. This variant shows
   you a system that is already running. So the new devices are
   telemetry-shaped (a run log, a 24 hour dial, a delivery receipt,
   a permission ledger) rather than screenshot-shaped, and the one
   place the human appears in them is deliberately the loudest.
   Motion follows the same contract as the rest of the site:
   scroll-triggered via .in-view, neutralized by the global
   prefers-reduced-motion rule.

   PASS TWO (2026-08-18, Fred's second brief): the terminal register
   was carried across the whole page instead of living only in the
   hero run log. The rule that holds it together, applied everywhere
   and never broken:

     MONO   is what the machine emitted. Timestamps, agent names,
            cron expressions, field names, counts, statuses, tokens.
     SANS   (Manrope) is every sentence a person has to read. No
            paragraph, lede or FAQ answer is ever set in mono.
     SERIF  (Fraunces, italic) keeps the brand's signature numbers:
            the dial's 6h, the draft score, the act numerals, the
            price, the totals. The machine's own tabular values gave
            way to mono; the display numbers did not.

   The mono face is the app's own --font-mono token from
   app/globals.css, extended with the Windows and Linux faces a
   public web page needs and the app does not. No downloaded
   terminal font, no green on black: cream stays the paper, charcoal
   stays the ink, rosa stays a marker.
   ============================================================ */

:root {
  /* app/globals.css line 205, plus the fallbacks a browser we do not
     control will actually need. Courier New is the last resort and
     nothing on the page depends on it looking good. */
  --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, 'Cascadia Mono',
               'Segoe UI Mono', Consolas, 'Roboto Mono', 'DejaVu Sans Mono', monospace;
}

/* ---- Shared small parts ------------------------------------ */

/* Cadence chip. The single most repeated element on the page: every
   autonomous thing Resonue does gets one, so the reader always knows
   how often it happens before they know what it does. */
.cadence {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-rounded); font-weight: 800; font-size: 11px;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--rosa-deep); background: var(--whisper-warm);
  border: 1px solid var(--whisper-edge); border-radius: 999px; padding: 6px 14px 6px 11px;
}
.cadence-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--rosa-primary); flex-shrink: 0;
  animation: cad-pulse 2.6s ease-out infinite;
}
.cadence--dark { color: var(--rosa-soft); background: rgba(253,35,126,0.10); border-color: rgba(253,168,200,0.30); }
.cadence--human { color: var(--charcoal-70); background: var(--cream-deep); border-color: var(--cream-edge); }
.cadence--human .cadence-dot { background: var(--charcoal-50); animation: none; }
@keyframes cad-pulse {
  0% { box-shadow: 0 0 0 0 rgba(253,35,126,0.45); }
  70% { box-shadow: 0 0 0 8px rgba(253,35,126,0); }
  100% { box-shadow: 0 0 0 0 rgba(253,35,126,0); }
}

/* ---- Hero run log ------------------------------------------ */
/* Replaces the live page's dashboard mockup. The point of the hero on
   this variant is not "here is a screen", it is "here is a night of
   work you did not do", so the hero visual is a log of runs, and the
   last line of it is a person. */
.runlog {
  max-width: 900px; margin: 0 auto; text-align: left;
  background: var(--charcoal); border-radius: 20px 20px 0 0; overflow: hidden;
  box-shadow: var(--shadow-xl); border: 1px solid var(--charcoal-90); border-bottom: none;
}
.runlog-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 15px 24px; border-bottom: 1px solid var(--charcoal-70);
  background: rgba(255,255,255,0.02);
}
.runlog-title {
  font-family: var(--font-mono); font-weight: 500; font-size: 11.5px;
  letter-spacing: 0.02em; color: var(--charcoal-30);
}
.runlog-title .rl-slash { color: var(--charcoal-70); margin: 0 4px; }
.runlog-live {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-weight: 500; font-size: 11px;
  letter-spacing: 0.02em; color: var(--rosa-soft);
}
/* One caret on the whole page. It sits at the end of the run log head,
   where a terminal would actually put it, and it is the only piece of
   ornament the terminal register is allowed. */
.rl-caret {
  display: inline-block; width: 7px; height: 13px; background: var(--rosa-primary);
  margin-left: 2px; animation: rl-blink 1.15s steps(1) infinite;
}
@keyframes rl-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.runlog-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--rosa-primary); animation: cad-pulse 2.6s ease-out infinite; }
.runlog-body { padding: 10px 0 12px; }
.runlog-row {
  display: grid; grid-template-columns: 76px 100px 1fr auto; gap: 14px; align-items: baseline;
  padding: 9px 24px;
  opacity: 0; transform: translateY(6px);
  transition: opacity 460ms ease-out, transform 460ms ease-out;
}
.runlog.in-view .runlog-row { opacity: 1; transform: none; }
.runlog.in-view .runlog-row:nth-child(1) { transition-delay: 0.05s; }
.runlog.in-view .runlog-row:nth-child(2) { transition-delay: 0.16s; }
.runlog.in-view .runlog-row:nth-child(3) { transition-delay: 0.27s; }
.runlog.in-view .runlog-row:nth-child(4) { transition-delay: 0.38s; }
.runlog.in-view .runlog-row:nth-child(5) { transition-delay: 0.49s; }
.runlog.in-view .runlog-row:nth-child(6) { transition-delay: 0.60s; }
.runlog.in-view .runlog-row:nth-child(7) { transition-delay: 0.71s; }
.runlog.in-view .runlog-row:nth-child(8) { transition-delay: 0.86s; }
.rl-time {
  font-family: var(--font-mono); font-size: 12px;
  font-variant-numeric: tabular-nums; color: var(--charcoal-50); white-space: nowrap;
}
/* The agent name is its own column, because that is the one thing a log
   gives you that a feature list does not: who did it. */
.rl-agent {
  font-family: var(--font-mono); font-size: 11.5px; color: var(--rosa-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rl-what { font-size: 13.5px; color: var(--charcoal-08); line-height: 1.5; min-width: 0; }
.rl-what b { color: #fff; font-weight: 800; }
.rl-out {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--charcoal-30); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.rl-out b { color: #fff; font-weight: 600; }
/* The human row. Everything above it happened on a schedule; this one
   only happens because a person showed up. It is styled to break the
   rhythm on purpose. */
.runlog-row--human {
  margin-top: 8px; padding-top: 16px; padding-bottom: 4px;
  border-top: 1px solid var(--charcoal-70);
}
.runlog-row--human .rl-time { color: var(--rosa-primary); }
.runlog-row--human .rl-agent { color: var(--rosa-primary); }
.runlog-row--human .rl-what { color: #fff; font-weight: 700; }
.runlog-row--human .rl-out { color: var(--cream); }
.runlog-note {
  max-width: 900px; margin: 0 auto; text-align: left;
  background: var(--cream-deep); border: 1px solid var(--cream-edge); border-top: none;
  border-radius: 0 0 20px 20px; padding: 13px 24px;
  font-size: 12px; color: var(--charcoal-50);
}

/* ---- The agents: one card per scheduled agent ----------------- */
.agent-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.agent-card {
  background: #fff; border: 1px solid var(--cream-edge); border-radius: 18px;
  box-shadow: var(--shadow-sm); padding: 28px 26px 0; display: flex; flex-direction: column;
  position: relative; overflow: hidden; min-width: 0;
  transition: box-shadow 180ms ease-out, transform 180ms ease-out;
}
.agent-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.agent-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--rosa-primary);
  transform: scaleX(0); transform-origin: left; transition: transform 420ms cubic-bezier(0.22,1,0.36,1);
}
.agent-card.in-view::before { transform: scaleX(1); }
/* Anchored to the short section head, never to the grid itself: the grid is
   taller than 2.5 viewports once the three cards stack at mobile width, and
   the shared IntersectionObserver fires at a 0.35 ratio, which an element
   that tall can never reach. Same trap the build board hit in v11. */
.section-head.in-view ~ .agent-grid .agent-card::before { transform: scaleX(1); }
.agent-card .cadence { align-self: flex-start; margin-bottom: 18px; }
.agent-card h3 { font-size: 1.3rem; line-height: 1.2; margin-bottom: 10px; }
.agent-card .agent-lede { font-size: 0.94rem; color: var(--charcoal-70); margin: 0 0 20px; }
/* flex:1 plus margin-top:auto on the stop row keeps "Stops at" flush with the
   bottom edge of every card whatever the spec above it weighs, so the three
   stop conditions line up as one row across the grid. That alignment is the
   argument of the section, it should not drift with copy length. */
.agent-spec { list-style: none; padding: 0; margin: 0 -26px; display: flex; flex-direction: column; flex: 1; }
.agent-spec li.cs-stop { margin-top: auto; border-radius: 0 0 17px 17px; }
.agent-spec li {
  display: grid; grid-template-columns: 82px 1fr; gap: 14px; align-items: baseline;
  padding: 11px 26px; border-top: 1px solid var(--cream-edge); font-size: 0.88rem;
}
.agent-spec .cs-k {
  font-family: var(--font-mono); font-weight: 500; font-size: 11px;
  letter-spacing: 0.01em; color: var(--charcoal-30);
}
/* The real cron expressions, from workers/cron/wrangler.jsonc. They are
   the most credible detail available and they cost nothing to verify. */
code.cron {
  font-family: var(--font-mono); font-size: 11.5px; color: var(--rosa-deep);
  background: var(--whisper-warm); border: 1px solid var(--whisper-edge);
  border-radius: 5px; padding: 1px 6px; white-space: nowrap;
}
.agent-spec .cs-v { color: var(--charcoal-70); line-height: 1.5; min-width: 0; }
.agent-spec li.cs-stop { background: var(--cream-deep); }
.agent-spec li.cs-stop .cs-k { color: var(--rosa-deep); }
.agent-spec li.cs-stop .cs-v { color: var(--charcoal); font-weight: 700; }

/* ---- The chain you start yourself -------------------------- */
/* Engager capture is the one job that is not on a timer, because it
   costs money per call. Presenting it as a chain rather than a loop is
   the honest shape: one human click, then four steps nobody supervises. */
.chain {
  margin-top: 34px; background: var(--charcoal); color: var(--cream);
  border-radius: 20px; padding: 34px 36px; box-shadow: var(--shadow-lg);
  position: relative; overflow: hidden;
}
.chain::after {
  content: ""; position: absolute; bottom: -160px; left: -100px; width: 380px; height: 380px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(193,17,122,0.24) 0%, rgba(193,17,122,0) 70%);
}
.chain-head { position: relative; z-index: 1; max-width: 62ch; margin-bottom: 26px; }
.chain-head h3 { color: #fff; font-size: 1.5rem; margin-bottom: 10px; }
.chain-head p { color: var(--charcoal-30); font-size: 0.96rem; margin: 0; }
.chain-steps { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; }
.chain-step { padding: 0 18px 0 0; position: relative; min-width: 0; }
.chain-step::after {
  content: ""; position: absolute; top: 13px; right: 8px; width: 10px; height: 10px;
  border-top: 1.5px solid var(--charcoal-70); border-right: 1.5px solid var(--charcoal-70);
  transform: rotate(45deg);
}
.chain-step:last-child::after { display: none; }
.chain-step .cst-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; margin-bottom: 12px;
  font-family: var(--font-mono); font-weight: 500; font-size: 11px;
  background: rgba(253,35,126,0.14); color: var(--rosa-soft); border: 1px solid rgba(253,168,200,0.35);
}
.chain-step--human .cst-n { background: var(--rosa-primary); color: #fff; border-color: var(--rosa-primary); }
.chain-step h4 { color: #fff; font-family: var(--font-sans); font-weight: 800; font-size: 0.94rem; margin-bottom: 6px; }
.chain-step p { color: var(--charcoal-30); font-size: 0.85rem; line-height: 1.5; margin: 0; }
.chain-step--human h4 { color: var(--rosa-soft); }

/* ---- The 24 hour dial --------------------------------------- */
/* One workspace day, drawn as a clock face rather than a list, because
   the argument of the section is "this never stops", and a list of
   times reads like a settings page. */
.daydial-wrap { display: grid; grid-template-columns: 380px 1fr; gap: 56px; align-items: center; }
.daydial-wrap > * { min-width: 0; }
.daydial-col { min-width: 0; }
.daydial { position: relative; width: 100%; max-width: 380px; margin: 0 auto; aspect-ratio: 1; }
.daydial svg { width: 100%; height: 100%; display: block; overflow: visible; }
.dd-face { fill: none; stroke: var(--cream-edge); stroke-width: 1.5; }
.dd-tick { stroke: var(--charcoal-15); stroke-width: 1.5; stroke-linecap: round; }
.dd-tick--major { stroke: var(--charcoal-30); stroke-width: 2; }
.dd-label {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500; fill: var(--charcoal-30);
  text-anchor: middle; dominant-baseline: middle; letter-spacing: 0.02em;
}
.dd-event { fill: var(--rosa-primary); }
.dd-event--night { fill: var(--rosa-deep); stroke: var(--cream-deep); stroke-width: 2.5; }
.dd-halo { fill: var(--rosa-primary); opacity: 0.16; }
.dd-halo--night { fill: var(--rosa-deep); }
.dd-label--night { fill: var(--rosa-deep); }
/* The sweep hand is a segment, not a spoke: it starts outside the centre
   label so it can rotate for a full day without ever crossing the type. */
.dd-hand { stroke: var(--rosa-primary); stroke-width: 2.5; stroke-linecap: round; transform-origin: 50% 50%; animation: dd-sweep 24s linear infinite; }
.dd-hub { fill: var(--charcoal); }
@keyframes dd-sweep { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.dd-center {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; pointer-events: none;
}
.dd-center .dd-num { font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 2.6rem; color: var(--charcoal); line-height: 1; }
.dd-center .dd-cap { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.02em; color: var(--charcoal-50); margin-top: 10px; max-width: 16ch; }

.dd-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; margin-top: 18px; }
.dd-legend span { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11.5px; color: var(--charcoal-50); }
.dd-legend i { width: 9px; height: 9px; border-radius: 50%; background: var(--rosa-primary); flex-shrink: 0; }
.dd-legend i.is-night { background: var(--rosa-deep); box-shadow: 0 0 0 2px var(--cream-deep); }

.daylist { list-style: none; padding: 0; margin: 0; }
.daylist li { display: flex; gap: 16px; align-items: flex-start; padding: 16px 0; border-top: 1px solid var(--cream-edge); }
.daylist li:first-child { border-top: none; padding-top: 0; }
.daylist .dl-when {
  flex-shrink: 0; min-width: 132px; font-family: var(--font-mono); font-size: 13px;
  color: var(--rosa-deep); font-variant-numeric: tabular-nums; padding-top: 2px;
}
.daylist .dl-cron { display: block; margin-top: 4px; font-size: 11px; color: var(--charcoal-30); }
.daylist .dl-what { font-size: 0.95rem; color: var(--charcoal-70); }
.daylist .dl-what b { display: block; color: var(--charcoal); font-family: var(--font-sans); font-weight: 800; font-size: 0.98rem; margin-bottom: 3px; }

/* ---- The Monday handoff (delivery receipt) ------------------ */
.handoff { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: center; }
.handoff > * { min-width: 0; }
.mailcard {
  background: #fff; border: 1px solid var(--cream-edge); border-radius: 16px;
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.mailcard-head { padding: 16px 22px; border-bottom: 1px solid var(--cream-edge); background: var(--cream); }
.mailcard-from { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 11.5px; color: var(--charcoal-50); margin-bottom: 8px; }
.mailcard-avatar { width: 22px; height: 22px; border-radius: 50%; background: var(--rosa-whisper); border: 1px solid var(--whisper-edge); flex-shrink: 0; }
.mailcard-subject { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--charcoal); }
.mailcard-body { padding: 6px 22px 20px; }
.mail-sec { padding: 14px 0 4px; border-bottom: 1px solid var(--cream-edge); }
.mail-sec:last-child { border-bottom: none; }
.mail-sec h4 { font-family: var(--font-mono); font-weight: 500; font-size: 11.5px; letter-spacing: 0.01em; color: var(--charcoal-50); margin-bottom: 9px; }
.mail-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 12.5px; color: var(--charcoal-70); }
.mail-row span + span { font-family: var(--font-mono); font-size: 11.5px; text-align: right; }
.mail-row .mr-name { font-weight: 700; color: var(--charcoal); }
.mailcard-foot {
  padding: 13px 22px; background: var(--cream-deep); border-top: 1px solid var(--cream-edge);
  font-size: 11.5px; color: var(--charcoal-50);
}

/* ---- The permission ledger ---------------------------------- */
/* Three columns, in this order on purpose: what it reads, what it
   writes, and then the longest column of the three, what it will not
   do. On an agentic page the third column is the product. */
/* align-items:start so each column is only as tall as its own list. The
   "never" column ending up visibly longest than the other two is the
   section's argument, not an accident to be evened out. */
.ledger { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: start; }
/* Generic italic accent. Deliberately lower specificity than the existing
   .statement / .bb-head scoped rules above, so those still win. */
.italic-accent { font-family: var(--font-display); font-style: italic; font-weight: 500; color: var(--rosa-deep); }
.ledger-col {
  border-radius: 18px; padding: 26px 24px; min-width: 0;
  background: #fff; border: 1px solid var(--cream-edge); box-shadow: var(--shadow-sm);
}
.ledger-col h3 {
  font-family: var(--font-sans); font-weight: 800; font-size: 1.02rem; letter-spacing: -0.01em;
  display: flex; align-items: center; gap: 10px; margin-bottom: 6px;
}
.ledger-mark {
  width: 24px; height: 24px; border-radius: 6px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-weight: 600; font-size: 12px; color: #fff;
  background: var(--rosa-primary);
}
.ledger-col--write .ledger-mark { background: var(--rosa-deep); }
.ledger-col--never { background: var(--charcoal); border-color: var(--charcoal); color: var(--cream); }
.ledger-col--never h3 { color: #fff; }
.ledger-col--never .ledger-mark { background: var(--rosa-soft); color: var(--charcoal); }
.ledger-col > p { font-size: 0.86rem; color: var(--charcoal-50); margin: 0 0 18px; }
.ledger-col--never > p { color: var(--charcoal-30); }
.ledger-list { list-style: none; padding: 0; margin: 0; }
.ledger-list li {
  font-size: 0.9rem; color: var(--charcoal-70); line-height: 1.55;
  padding: 11px 0; border-top: 1px solid var(--cream-edge);
}
/* Each line is prefixed with the verb the system would log, so the three
   columns read as one permission table rather than three bullet lists.
   The "deny" column carrying the most tokens is the section's argument. */
.lg-tok {
  display: inline-block; margin-right: 9px; transform: translateY(-1px);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--rosa-deep);
  background: var(--whisper-warm); border: 1px solid var(--whisper-edge);
  border-radius: 4px; padding: 2px 6px; vertical-align: middle;
}
.ledger-col--never .ledger-list li { color: var(--charcoal-08); border-top-color: var(--charcoal-70); }
.ledger-col--never .lg-tok { color: var(--charcoal); background: var(--rosa-soft); border-color: var(--rosa-soft); }
.ledger-foot {
  grid-column: 1 / -1; margin-top: 6px; text-align: center;
  font-size: 0.9rem; color: var(--charcoal-50);
}

/* ---- Reasonating: Rosa's thinking state, on the site --------- */
/* Borrowed from components/rosa/Reasonating.tsx, the app's own word for
   the moment Rosa is working. The site should say it the way the
   product says it, not "AI is thinking". */
.reasonating-demo {
  background: var(--charcoal); border-radius: 18px; padding: 28px 26px; color: var(--cream);
  box-shadow: var(--shadow-lg);
}
.reasonating {
  display: inline-flex; align-items: center; gap: 11px;
  font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 1.15rem;
  color: var(--rosa-soft);
}
.reasonating-orb {
  width: 12px; height: 12px; border-radius: 50%; background: var(--rosa-primary);
  animation: reason-breathe 1.8s ease-in-out infinite; flex-shrink: 0;
}
@keyframes reason-breathe {
  0%, 100% { transform: scale(0.72); opacity: 0.55; }
  50% { transform: scale(1); opacity: 1; }
}
/* Letter by letter, 80ms apart, the way components/rosa/Reasonating.tsx
   does it in the app. The word is the animation: it should read as Rosa
   working through something, not as a spinner. */
.reasonating i {
  display: inline-block; font-style: italic; opacity: 0.48;
  animation: reason-wave 2s ease-in-out infinite;
}
.reasonating i:nth-child(1) { animation-delay: 0.00s; }
.reasonating i:nth-child(2) { animation-delay: 0.08s; }
.reasonating i:nth-child(3) { animation-delay: 0.16s; }
.reasonating i:nth-child(4) { animation-delay: 0.24s; }
.reasonating i:nth-child(5) { animation-delay: 0.32s; }
.reasonating i:nth-child(6) { animation-delay: 0.40s; }
.reasonating i:nth-child(7) { animation-delay: 0.48s; }
.reasonating i:nth-child(8) { animation-delay: 0.56s; }
.reasonating i:nth-child(9) { animation-delay: 0.64s; }
.reasonating i:nth-child(10) { animation-delay: 0.72s; }
.reasonating i:nth-child(11) { animation-delay: 0.80s; }
.reasonating i:nth-child(12) { animation-delay: 0.88s; }
@keyframes reason-wave { 0%, 60%, 100% { opacity: 0.48; } 25% { opacity: 1; } }
.reasonating-sub {
  display: block; margin-top: 8px; font-family: var(--font-sans); font-style: normal;
  font-size: 12px; font-weight: 600; letter-spacing: 0.03em; color: var(--charcoal-30);
}
.reasonating-out {
  margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--charcoal-70);
  font-size: 0.95rem; color: var(--charcoal-08); line-height: 1.6;
}
.reasonating-out b { color: #fff; }
.reasonating-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.reasonating-actions span {
  border: 1px solid var(--charcoal-70); border-radius: 999px; padding: 6px 14px;
  font-size: 11.5px; font-weight: 700; color: var(--charcoal-08);
}
.reasonating-actions span.is-human { border-color: var(--rosa-primary); background: rgba(253,35,126,0.12); color: #fff; }

/* ---- The human gate ----------------------------------------- */
.gate-strip {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border: 1px solid var(--cream-edge); border-radius: 18px; overflow: hidden; background: #fff;
  box-shadow: var(--shadow-sm);
}
.gate-cell { padding: 30px 28px; border-left: 1px solid var(--cream-edge); min-width: 0; }
.gate-cell:first-child { border-left: none; }
.gate-arrow {
  display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-bottom: 16px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.01em;
}
.gate-arrow .ga-agent { color: var(--rosa-deep); }
.gate-arrow .ga-sep { color: var(--charcoal-15); }
.gate-arrow .ga-you { color: var(--charcoal); font-weight: 600; }
/* The stop is drawn, not described: every one of the three flows has the
   same token in the middle of it, in the same place. */
.gate-arrow .ga-halt {
  color: #fff; background: var(--charcoal); border-radius: 4px; padding: 2px 7px;
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
}
.gate-cell h3 { font-family: var(--font-sans); font-weight: 800; font-size: 1.05rem; letter-spacing: -0.01em; margin-bottom: 9px; }
.gate-cell p { font-size: 0.92rem; color: var(--charcoal-70); margin: 0; }
/* A split bar showing "this much runs without you, this much is yours" was
   drafted here and cut: any ratio on it would have been an invented
   statistic dressed as a measurement, which is exactly the failure mode
   an agentic page invites. The three cells make the point without a number. */

/* ---- Audit / traceability rail ------------------------------ */
.audit-rail { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: start; }
.audit-card {
  background: var(--cream-deep); border: 1px solid var(--cream-edge); border-radius: 16px; padding: 26px 24px; min-width: 0;
}
.audit-foot { grid-column: 1 / -1; text-align: center; font-size: 0.86rem; color: var(--charcoal-50); margin-top: 2px; }
.audit-card h4 { font-family: var(--font-sans); font-weight: 800; font-size: 1rem; margin-bottom: 8px; }
.audit-card p { font-size: 0.93rem; color: var(--charcoal-70); margin: 0 0 16px; }
.audit-math { background: #fff; border: 1px solid var(--cream-edge); border-radius: 12px; padding: 4px 16px; }
.audit-math-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--cream-edge); font-size: 12.5px; color: var(--charcoal-70); }
.audit-math-row:first-child { border-top: none; }
.audit-math-row .am-v { font-family: var(--font-mono); font-size: 12px; color: var(--charcoal); font-variant-numeric: tabular-nums; }
.audit-math-row--total { border-top: 1px solid var(--charcoal-15); font-weight: 800; color: var(--charcoal); }
.audit-math-row--total .am-v { font-family: var(--font-display); font-style: italic; font-weight: 600; color: var(--rosa-deep); font-size: 1.1rem; }
.audit-src { display: block; font-family: var(--font-mono); font-size: 11px; color: var(--charcoal-50); margin-bottom: 7px; }

/* ---- Responsive --------------------------------------------- */
@media (max-width: 980px) {
  .agent-grid { grid-template-columns: 1fr; }
  .daydial-wrap { grid-template-columns: 1fr; gap: 40px; }
  .daydial { max-width: 320px; }
  .handoff { grid-template-columns: 1fr; gap: 32px; }
  .ledger { grid-template-columns: 1fr; }
  .gate-strip { grid-template-columns: 1fr; }
  .gate-cell { border-left: none; border-top: 1px solid var(--cream-edge); }
  .gate-cell:first-child { border-top: none; }
  .audit-rail { grid-template-columns: 1fr; }
  .chain-steps { grid-template-columns: 1fr; gap: 22px; }
  .chain-step { padding: 0 0 0 0; }
  .chain-step::after { display: none; }
  .chain { padding: 28px 24px; }
}
@media (max-width: 560px) {
  /* The run log's own narrow-width rules moved into the pass two block
     at the end of this file, where the four column layout lives. */
  .agent-spec li { grid-template-columns: 1fr; gap: 4px; }
  .dd-center .dd-num { font-size: 2rem; }
}

/* ============================================================
   PASS TWO: the terminal layer
   Everything below carries the machine register out of the hero
   run log and across the rest of the page. It is deliberately all
   in one block so it can be lifted back out in one move if Fred
   decides the register is too much.

   The rule, again, because it is the only thing keeping this
   readable: mono is what the machine emitted, sans is what a
   person has to read, Fraunces italic is still the signature on
   display numbers. No paragraph on this page is set in mono.
   ============================================================ */

/* ---- Section signature -------------------------------------- */
/* Replaces the rosa uppercase eyebrow on every section head with an
   index, a slug, a hairline and a status token. The eyebrow's job
   (name the section, in rosa) is unchanged, the face and the framing
   are what moved. Every status token says something true about the
   section under it, so the device carries information rather than
   decorating. */
.eyebrow--mono {
  font-family: var(--font-mono); font-weight: 500; font-size: 11.5px;
  letter-spacing: 0.03em; text-transform: none;
}
.sig, .section-head .sig {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px;
  font-family: var(--font-mono); font-weight: 500; font-size: 11.5px;
  letter-spacing: 0.02em; text-transform: none; margin-bottom: 16px;
}
.sig .sig-i { color: var(--charcoal-30); }
.sig .sig-name { color: var(--rosa-primary); }
.sig .sig-rule { flex: 1 1 30px; height: 1px; background: var(--cream-edge); }
.sig .sig-st { color: var(--charcoal-50); }
.arc-divider .sig { justify-content: flex-start; }

/* ---- Console chrome ----------------------------------------- */
/* The showcase visuals were floating panels. Each one now carries a
   header bar naming the thing that produced it and, on the right, one
   honest note about it. Same device on five blocks: the page reads as
   a series of readouts rather than a series of illustrations. */
.showcase-visual.is-console { padding: 0; overflow: hidden; }
.showcase-visual.is-console .console-body { padding: 20px; }
.console-bar {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 10px 16px; background: var(--cream-deep);
  border-bottom: 1px solid var(--cream-edge);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.01em;
  color: var(--charcoal-50);
}
.console-bar .cb-name { color: var(--charcoal-70); white-space: nowrap; }
.console-bar .cb-out { color: var(--rosa-deep); text-align: right; }
.reasonating-demo { overflow: hidden; }
.console-bar--dark {
  margin: -28px -26px 22px; padding: 11px 26px;
  background: rgba(255,255,255,0.03); border-bottom-color: var(--charcoal-70);
}
.console-bar--dark .cb-name { color: var(--charcoal-30); }
.console-bar--dark .cb-out { color: var(--rosa-soft); }

/* ---- Agent identity ----------------------------------------- */
/* A process name and its schedule, in that order, at the top of every
   agent card. Deliberately NOT a control: there is no agent list in the
   product, nothing to open, nothing to configure per agent, and the
   copy under it says so. This is a label, not an affordance, so it gets
   no hover state, no border, no chevron and nothing that reads clickable. */
.agent-id {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.01em;
}
.agent-card .agent-id { margin-bottom: 16px; }
.agent-id .agent-id-name { color: var(--rosa-deep); }
.agent-id .agent-id-sched { display: inline-flex; align-items: center; gap: 7px; color: var(--charcoal-50); white-space: nowrap; }
.agent-id .agent-id-sched::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
  background: var(--rosa-primary); animation: cad-pulse 2.6s ease-out infinite;
}
.chain-head .agent-id { justify-content: flex-start; gap: 16px; margin-bottom: 14px; }
/* A per-agent status board was designed for the top of this section, a strip
   of four agents each with a live-looking state, and cut. It would have been
   the best looking thing on the page and it would have implied an agent
   console that does not exist: there is no agent list in the product, no
   per-agent settings and no way to pause one. Naming the agents is honest,
   drawing a cockpit for them is not. Do not add it back. */
.agent-id--dark .agent-id-name { color: var(--rosa-soft); }
.agent-id--dark .agent-id-sched { color: var(--charcoal-30); }

/* ---- Machine token ------------------------------------------ */
.tok {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 20px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.02em;
  color: var(--rosa-deep); background: var(--whisper-warm);
  border: 1px solid var(--whisper-edge); border-radius: 6px; padding: 7px 13px;
}
.tok .tok-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--rosa-primary); animation: cad-pulse 2.6s ease-out infinite; }

/* ---- Existing v2 components, re-faced ----------------------- */
/* Only the typeface moves. Colour, size and spacing stay where the live
   site put them, so the page still reads as the same design system. */
.showcase-copy .tag { font-family: var(--font-mono); font-weight: 500; font-size: 11px; letter-spacing: 0.02em; text-transform: none; border-radius: 6px; }
.act-banner .act-label { font-family: var(--font-mono); font-weight: 500; font-size: 11.5px; letter-spacing: 0.02em; text-transform: none; }
.pill { font-family: var(--font-mono); font-weight: 500; font-size: 10.5px; border-radius: 5px; }
.tier { font-family: var(--font-mono); font-weight: 600; font-size: 10px; border-radius: 5px; }
.kcol .kcol-head { font-family: var(--font-mono); font-weight: 500; font-size: 10.5px; letter-spacing: 0.02em; text-transform: none; }
.kcard .kval { font-family: var(--font-mono); font-size: 10.5px; }
.share-bar-label { font-family: var(--font-mono); font-weight: 500; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.subscore .sk { font-family: var(--font-mono); font-weight: 500; font-size: 11px; }
.subscore .sv { font-family: var(--font-mono); font-weight: 600; font-size: 11px; }
.live-score-title { font-family: var(--font-mono); font-weight: 500; font-size: 11.5px; letter-spacing: 0.02em; }
.core-label { font-family: var(--font-mono); font-weight: 600; }
.turn-labels { font-family: var(--font-mono); font-weight: 500; text-transform: none; letter-spacing: 0.02em; }
.persona-card .p-eyebrow { font-family: var(--font-mono); font-weight: 500; font-size: 11px; letter-spacing: 0.02em; text-transform: none; }
.founder-note .badge { font-family: var(--font-mono); font-weight: 500; font-size: 11px; letter-spacing: 0.02em; text-transform: none; border-radius: 6px; }
.pt-price-note { font-family: var(--font-mono); font-weight: 500; font-size: 11px; letter-spacing: 0.02em; text-transform: none; }
.footer-status { font-family: var(--font-mono); font-weight: 500; font-size: 10.5px; letter-spacing: 0.02em; text-transform: none; }
.bb-flag { font-family: var(--font-mono); font-weight: 500; letter-spacing: 0.02em; text-transform: none; }
.bb-lane-name { font-family: var(--font-mono); font-weight: 500; letter-spacing: 0.02em; text-transform: none; }
.bb-lane-count { font-family: var(--font-mono); font-weight: 500; }
.bb-shipped-label { font-family: var(--font-mono); font-weight: 500; letter-spacing: 0.02em; text-transform: none; }
.bb-shipped-chips span { font-family: var(--font-mono); font-weight: 500; font-size: 10.5px; letter-spacing: 0.01em; border-radius: 5px; }

/* ---- FAQ, numbered like a list of returns ------------------- */
.faq-item summary .q-n { font-family: var(--font-mono); font-weight: 500; font-size: 11px; color: var(--rosa-primary); margin-right: 12px; }

/* ---- Final CTA: three machine facts ------------------------- */
/* Deliberately three statements of when, not three benefits: the whole
   page argues that the schedule is the product, so the last thing on
   it is the schedule. */
.startup-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 26px auto 0; max-width: 720px; }
.startup-strip span {
  display: inline-flex; flex-direction: column; gap: 5px; text-align: left;
  font-family: var(--font-mono); font-size: 11.5px; color: var(--charcoal-50);
  background: var(--cream-deep); border: 1px solid var(--cream-edge);
  border-radius: 8px; padding: 11px 15px;
}
.startup-strip b { color: var(--rosa-deep); font-weight: 500; }

/* ---- Footer: the three schedules actually deployed ---------- */
.footer-sched { display: flex; flex-direction: column; gap: 7px; margin-top: 18px; font-family: var(--font-mono); font-size: 11px; color: var(--charcoal-30); }
.footer-sched span { display: flex; justify-content: space-between; gap: 14px; max-width: 250px; }
.footer-sched b { color: var(--charcoal-50); font-weight: 500; }

/* ---- Responsive, pass two ----------------------------------- */
@media (max-width: 980px) {
  .console-bar { font-size: 10.5px; }
}
@media (max-width: 620px) {
  /* Mono does not reflow like prose: a log line that wraps mid-token is
     unreadable, so at narrow widths the four columns become four stacked
     rows instead, each one still a whole field. */
  .runlog-row { grid-template-columns: 74px 1fr; gap: 6px 12px; padding: 11px 18px; }
  .rl-agent { grid-column: 2; }
  .rl-what { grid-column: 2; }
  .rl-out { grid-column: 2; justify-self: start; white-space: normal; }
  .runlog-head, .runlog-note { padding-left: 18px; padding-right: 18px; }
  .rl-what { font-size: 13px; }
  .sig .sig-rule { display: none; }
  .console-bar { flex-direction: column; align-items: flex-start; gap: 3px; }
  .console-bar .cb-out { text-align: left; }
  .agent-id { flex-wrap: wrap; gap: 8px 14px; justify-content: flex-start; }
  .daylist .dl-when { min-width: 108px; font-size: 12px; }
  .startup-strip span { width: 100%; }
  .footer-sched span { max-width: none; }
}

/* ============================================================
   PASS THREE (2026-08-18): the rest of the site.
   The agentic home stopped being one page. Everything below is
   what the other ten pages needed that the home did not, added
   to this one stylesheet rather than forked per page, same as
   the live site. The type rule from pass two is unchanged and
   still governs everything here: MONO is what the machine
   emitted, MANROPE is every sentence a person reads, FRAUNCES
   ITALIC is the verdict number only, never the detail rows.

   Three components carry most of the pass, and each one exists
   because a page type genuinely needed it, not because it looked
   agentic:

     .chainline   the whole flow of a page in one line, ending on
                  the same HALT token the home page uses. It is a
                  hero device: a persona lands and sees, in one
                  glance, which side of the stop they are on.
     .journey-run who ran this step and on what schedule, in the
                  step head next to the number. It turns a numbered
                  narrative into an attributed one.
     .trace       one record followed through the system, with the
                  real cadences. This is the how-it-works device:
                  the home page argues "things run", this argues
                  "here is what happened to your reaction, and
                  when, and who did it".
   ============================================================ */

/* ---- Chainline: the page's whole flow, in one line ---------- */
/* Human at both ends by construction. Every page that carries one
   ends the machine side on HALT, because there is no page on this
   site where the machine is the last actor. */
.chainline {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px 10px;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.01em;
  background: #fff; border: 1px solid var(--cream-edge); border-radius: 12px;
  padding: 12px 18px; margin: 30px auto 0; box-shadow: var(--shadow-sm);
}
.chainline .cl-a { color: var(--rosa-deep); }
.chainline .cl-you { color: var(--charcoal); font-weight: 600; }
.chainline .cl-sep { color: var(--charcoal-15); }
.chainline .cl-halt,
.trace .tr-halt {
  color: #fff; background: var(--charcoal); border-radius: 4px; padding: 2px 7px;
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
}
.chainline--dark { background: rgba(255,255,255,0.04); border-color: var(--charcoal-70); box-shadow: none; }
.chainline--dark .cl-a { color: var(--rosa-soft); }
.chainline--dark .cl-you { color: var(--cream); }
.chainline--dark .cl-sep { color: var(--charcoal-50); }
.chainline--dark .cl-halt { background: var(--cream); color: var(--charcoal); }

/* ---- Journey run attribution -------------------------------- */
/* Sits at the far end of the step head, so the four step numbers
   read down the left and the four actors read down the right. The
   human steps are charcoal and the agent steps are rosa: on every
   journey on this site the first and last step are the human ones,
   and that shape is the argument. */
.journey-run {
  margin-left: auto; display: inline-flex; align-items: baseline; gap: 14px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.01em;
  text-align: right; min-width: 0;
}
.journey-run .jr-who { color: var(--rosa-deep); white-space: nowrap; }
.journey-run .jr-when { color: var(--charcoal-50); white-space: nowrap; }
.journey-run--human .jr-who { color: var(--charcoal); font-weight: 600; }

/* ---- Console panel (standalone) ----------------------------- */
/* The home page's console bar only ever sat on .showcase-visual. The
   other pages need the same header on a panel that is not a showcase,
   so this is the free-standing version of the same device. */
.console-panel {
  background: #fff; border: 1px solid var(--cream-edge); border-radius: 16px;
  overflow: hidden; box-shadow: var(--shadow-sm); min-width: 0;
}
.console-panel > .console-body { padding: 20px; }
.console-panel .mini-table, .console-panel .kanban { margin: 0; }
.console-panel--flush > .console-body { padding: 0; }

/* ---- Trace: one record through the system ------------------- */
/* Deliberately not the home page's run log. The run log answers
   "what happened last night across the workspace"; the trace answers
   "what happened to this one reaction, in order". Same materials,
   different question, so it is a different component rather than a
   variant: three columns (when, who, what) instead of four, and the
   human rows are shaded rather than accented, because on this device
   the human rows are frequent and the point is the alternation. */
.trace { border: 1px solid var(--cream-edge); border-radius: 18px; background: #fff; box-shadow: var(--shadow-sm); overflow: hidden; }
.trace-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 12px 24px; background: var(--cream-deep); border-bottom: 1px solid var(--cream-edge);
  font-family: var(--font-mono); font-size: 11px; color: var(--charcoal-50);
}
.trace-head .th-name { color: var(--charcoal-70); }
.trace-head .th-out { color: var(--rosa-deep); text-align: right; }
.trace-row {
  display: grid; grid-template-columns: 100px 116px 1fr; gap: 4px 18px;
  padding: 15px 24px; border-top: 1px solid var(--cream-edge); align-items: baseline;
}
.trace-row:first-of-type { border-top: none; }
.trace .tr-t { font-family: var(--font-mono); font-size: 11.5px; color: var(--charcoal-50); white-space: nowrap; font-variant-numeric: tabular-nums; }
.trace .tr-a { font-family: var(--font-mono); font-size: 11.5px; color: var(--rosa-deep); white-space: nowrap; }
.trace .tr-w { font-size: 0.93rem; color: var(--charcoal-70); line-height: 1.55; }
.trace .tr-w b { color: var(--charcoal); font-weight: 700; }
.trace-row--human { background: var(--cream-deep); }
.trace-row--human .tr-a { color: var(--charcoal); font-weight: 600; }
.trace-note { font-size: 0.85rem; color: var(--charcoal-50); margin: 14px 0 0; }

@media (max-width: 820px) {
  /* Same rule as the run log: mono does not reflow, so the columns
     stack into whole fields rather than wrapping mid-token. */
  .trace-row { grid-template-columns: 1fr; gap: 5px; padding: 14px 18px; }
  .trace .tr-t, .trace .tr-a { display: inline-block; margin-right: 12px; }
  .trace-head { padding-left: 18px; padding-right: 18px; flex-direction: column; gap: 3px; }
  .trace-head .th-out { text-align: left; }
  .journey-run { margin-left: 0; width: 100%; text-align: left; justify-content: flex-start; }
  .journey-step-head { flex-wrap: wrap; }
}

/* ---- More v2 components, re-faced for pass three ------------ */
/* Same rule as pass two: only the typeface moves, colour and size and
   spacing stay where the live site put them. These are all labels the
   system would print, not sentences a person reads. */
.journey-step-head .journey-kicker { font-family: var(--font-mono); font-weight: 500; font-size: 11.5px; letter-spacing: 0.02em; text-transform: none; }
.compare-label { font-family: var(--font-mono); font-weight: 500; font-size: 11px; letter-spacing: 0.02em; text-transform: none; }
.roadmap-label { font-family: var(--font-mono); font-weight: 500; letter-spacing: 0.02em; text-transform: none; }
.roadmap-chips span { font-family: var(--font-mono); font-weight: 500; font-size: 10.5px; letter-spacing: 0.01em; border-radius: 5px; }
.scenario-when { font-family: var(--font-mono); font-weight: 500; letter-spacing: 0.02em; text-transform: none; }
.plan-badge { font-family: var(--font-mono); font-weight: 500; font-size: 10.5px; letter-spacing: 0.02em; text-transform: none; border-radius: 5px; }
.seg-btn { font-family: var(--font-mono); font-weight: 500; letter-spacing: 0.01em; }
.calc-label { font-family: var(--font-mono); font-weight: 500; letter-spacing: 0.02em; text-transform: none; }

/* ---- Runbill: what the price buys, as a standing order ------ */
/* The pricing page's own device. A price list of runs rather than a
   price list of features: agent, its real cron expression, what the run
   does, and how often it fires. The last row is the capture agent, shaded
   like the human rows everywhere else on this site, because it is the one
   the customer starts.

   The frequency column is arithmetic on the deployed cron and NOT a quota:
   the note under the block says so in as many words. There is no per-run
   metering, no rate limit and no usage cap in the product, and this block
   is the single most likely place on the site for someone to later add one
   by accident. Do not turn the right column into a number with a ceiling. */
.runbill { border: 1px solid var(--cream-edge); border-radius: 18px; background: #fff; box-shadow: var(--shadow-sm); overflow: hidden; }
.runbill-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 12px 24px; background: var(--cream-deep); border-bottom: 1px solid var(--cream-edge);
  font-family: var(--font-mono); font-size: 11px; color: var(--charcoal-50);
}
.runbill-head .rb-name { color: var(--charcoal-70); }
.runbill-head .rb-out { color: var(--rosa-deep); text-align: right; }
.runbill-row {
  display: grid; grid-template-columns: 122px 132px 1fr 132px; gap: 6px 20px;
  padding: 17px 24px; border-top: 1px solid var(--cream-edge); align-items: baseline;
}
.runbill-row:first-of-type { border-top: none; }
.runbill .rb-agent { font-family: var(--font-mono); font-size: 11.5px; color: var(--rosa-deep); white-space: nowrap; }
.runbill .rb-cron { font-family: var(--font-mono); font-size: 11.5px; color: var(--charcoal-50); white-space: nowrap; }
.runbill .rb-what { font-size: 0.93rem; color: var(--charcoal-70); line-height: 1.55; }
.runbill .rb-n { font-family: var(--font-mono); font-size: 11.5px; color: var(--charcoal); text-align: right; white-space: nowrap; }
.runbill-row--human { background: var(--cream-deep); }
.runbill-row--human .rb-agent { color: var(--charcoal); font-weight: 600; }
.runbill-note { font-size: 0.85rem; color: var(--charcoal-50); margin: 14px 0 0; max-width: 760px; }

@media (max-width: 900px) {
  .runbill-row { grid-template-columns: 1fr; gap: 5px; padding: 15px 18px; }
  .runbill .rb-agent, .runbill .rb-cron { display: inline-block; margin-right: 14px; }
  .runbill .rb-n { text-align: left; }
  .runbill-head { padding-left: 18px; padding-right: 18px; flex-direction: column; gap: 3px; }
  .runbill-head .rb-out { text-align: left; }
}

/* ---- Step attribution --------------------------------------- */
/* The numbered .steps row on the Revenue Ops page becomes attributed:
   who runs this step and on what schedule, between the number and the
   heading. Human steps take the same charcoal treatment as everywhere
   else on the site, so the alternation reads at a glance. */
.step .step-agent {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px 10px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.01em;
  color: var(--charcoal-50); margin: 10px 0 8px;
}
.step .step-agent b { color: var(--rosa-deep); font-weight: 500; }
.step .step-agent--human b { color: var(--charcoal); font-weight: 600; }

/* ---- Scenario actor ----------------------------------------- */
/* The use-case pages stay in the immersive register Fred locked: no
   disclaimer block, present tense, named placeholder characters. What the
   agentic version adds is one mono line per beat naming who ran it, so a
   scenario reads as a sequence of runs and human decisions rather than as
   a story where things happen by themselves. Human beats take charcoal,
   scheduled beats rosa, exactly as everywhere else on the site. */
.st-actor {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.01em;
  color: var(--charcoal-50); margin: 2px 0 10px;
}
.st-actor b { color: var(--rosa-deep); font-weight: 500; }
.st-actor--human b { color: var(--charcoal); font-weight: 600; }
.st-actor code.cron { font-size: 11px; }

/* ---- Talk to sales: who does each step ---------------------- */
/* The three-step list gains the same actor label the rest of the site
   uses. The middle step is the only one that is not the visitor, and
   labelling it "before the call" rather than naming an agent is
   deliberate: preparing a demo workspace is a sales process, not one of
   the three deployed crons, and it must not be dressed as one. */
.talk-steps .ts-actor {
  display: block; font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.02em; color: var(--rosa-deep); margin-bottom: 5px;
}