/* ────────────────────────────────────────────────────────────
   Surity360 Marketing Site — styles.css
   surity360.com.au
   Dark, Palantir-inspired. Inter font.
──────────────────────────────────────────────────────────── */

:root {
  --bg:          #080b10;
  --bg2:         #0a1614;
  --panel:       #111827;
  --card:        #141c28;
  --card-hover:  #1b2537;
  --border:      #1e2d3f;
  --border-hi:   #2c4060;

  --text:        #e6eaf0;
  --text-muted:  #b3bcc7;
  --text-faint:  #6b7686;
  --heading:     #f4f6fa;

  --teal:        #4eecc8;
  --teal-dim:    rgba(78, 236, 200, .14);
  --teal-glow:   rgba(78, 236, 200, .08);
  --blue:        #6aa7ff;
  --blue-dim:    rgba(106, 167, 255, .12);

  --radius-sm:   6px;
  --radius:      10px;
  --radius-lg:   16px;

  --font: 'Inter', system-ui, -apple-system, sans-serif;
  --max-w: 1120px;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  font-size: 16px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Apple-grade focus ring on every interactive element */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
.btn:focus-visible,
.feature-card:focus-visible,
.problem-card:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Tabular numerals for any stacked figures */
.tabular { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* Suppress default <summary> disclosure triangle across all accordions */
summary { list-style: none; display: block; }
summary::-webkit-details-marker { display: none; }
summary::marker { content: ''; }
details > summary { cursor: pointer; }

/* ── Utilities ── */
.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 1.5rem;
}
.eyebrow {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--teal);
  display: block;
  margin-bottom: .75rem;
}
.section-title {
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 700;
  color: var(--heading);
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}
.section-sub {
  font-size: 1.05rem;
  color: var(--text-muted);
  max-width: 640px;
  line-height: 1.7;
}
.teal { color: var(--teal); }
.blue { color: var(--blue); }
.muted { color: var(--text-muted); }

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  padding: 12px 24px;
  min-height: 44px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .2s ease-out, border-color .2s ease-out, color .2s ease-out, transform .15s ease-out, box-shadow .25s ease-out;
  text-decoration: none;
  line-height: 1.2;
  white-space: nowrap;
  letter-spacing: -0.005em;
}
.btn:active { transform: scale(0.97); transition-duration: .08s; }
.btn-primary {
  background: var(--teal);
  color: #06120e;
  border-color: var(--teal);
}
.btn-primary:hover {
  background: #62f0d0;
  border-color: #62f0d0;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(78, 236, 200, .22);
}
.btn-primary:active { transform: scale(0.97); box-shadow: none; }
.btn-secondary {
  background: transparent;
  color: var(--text);
  border-color: var(--border-hi);
}
.btn-secondary:hover {
  border-color: var(--text);
  color: var(--heading);
  text-decoration: none;
  transform: translateY(-1px);
}
.btn-ghost {
  background: transparent;
  color: var(--blue);
  border-color: transparent;
  padding: .7rem .75rem;
}
.btn-ghost:hover { color: var(--heading); text-decoration: none; }

/* ── Nav ── */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(8, 11, 16, .88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 62px;
  position: relative;
}
.nav-logo { display: flex; align-items: center; flex-shrink: 0; }
.site-nav .nav-inner { max-width: 1240px; }
.nav-links {
  display: flex;
  align-items: center;
  gap: .1rem;
  list-style: none;
  flex-wrap: nowrap;
}
.nav-links a {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-muted);
  padding: 9px 10px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  border-radius: var(--radius-sm);
  transition: color .2s ease-out;
  letter-spacing: -0.005em;
}
.nav-links a:hover { color: var(--heading); text-decoration: none; }
.nav-right { display: flex; align-items: center; gap: .75rem; }
.nav-cta { font-size: 13px; padding: 9px 15px; min-height: 40px; }

/* ── Mobile nav (CSS-only checkbox hack, no JS) ── */
.nav-toggle-cbx { position: absolute; opacity: 0; pointer-events: none; }
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  color: var(--text);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.nav-toggle svg { width: 24px; height: 24px; }
.nav-toggle .nav-toggle-close { display: none; }
.nav-toggle-cbx:checked ~ .nav-toggle .nav-toggle-open { display: none; }
.nav-toggle-cbx:checked ~ .nav-toggle .nav-toggle-close { display: block; }
.nav-toggle-cbx:focus-visible ~ .nav-toggle {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}

/* ── Hero ── */
.hero {
  position: relative;
  overflow: hidden;
  padding: 6rem 0 7rem;
  text-align: center;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 50% -10%, rgba(78, 236, 200, .08) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 80% 100%, rgba(106, 167, 255, .06) 0%, transparent 60%);
  pointer-events: none;
}
.hero-grid-lines {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity: .25;
  pointer-events: none;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 0%, transparent 80%);
}
.hero-inner { position: relative; z-index: 1; }
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--teal);
  border: 1px solid rgba(78, 236, 200, .3);
  border-radius: 99px;
  padding: .35rem .9rem;
  margin-bottom: 1.75rem;
  background: var(--teal-glow);
}
.hero-badge-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--teal);
  display: inline-block;
  animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .5; transform: scale(.7); }
}
.hero h1 {
  font-size: clamp(36px, 5.5vw, 64px);
  font-weight: 700;
  color: var(--heading);
  letter-spacing: -0.025em;
  line-height: 1.08;
  margin-bottom: 1.25rem;
}
.hero h1 span { color: var(--teal); }
.hero-sub {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: var(--text-muted);
  max-width: 640px;
  margin: 0 auto 1.5rem;
  line-height: 1.7;
}
.hero-arkie {
  font-size: .95rem;
  color: var(--text-faint);
  max-width: 640px;
  margin: 0 auto 2.25rem;
  line-height: 1.6;
  border-left: 2px solid var(--teal-dim);
  padding-left: .85rem;
}
.hero-arkie strong { color: var(--text-muted); font-weight: 600; }
.hero-arkie-link {
  color: var(--teal);
  font-weight: 500;
  white-space: nowrap;
}
.hero-arkie-link:hover { text-decoration: underline; }
.hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 3.5rem;
}
.hero-actions .btn { font-size: 1rem; padding: .85rem 1.8rem; }
.hero-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}
.hero-content { width: 100%; }
.hero-animation {
  margin: 0 auto 2.5rem;
  max-width: 500px;
  width: 100%;
}
.hero-animation img {
  display: block;
  width: 100%;
  height: auto;
}
@media (min-width: 1024px) {
  .hero-top {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 3.5rem;
    text-align: left;
    margin-bottom: 3rem;
  }
  .hero-top .hero-content {
    flex: 1 1 0;
    max-width: 600px;
    text-align: left;
  }
  .hero-top .hero-content .hero-badge,
  .hero-top .hero-content .hero-actions { justify-content: flex-start; }
  .hero-top .hero-content h1 { text-align: left; }
  .hero-top .hero-animation {
    flex: 0 0 480px;
    margin: 0;
  }
}
.hero-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
  overflow: hidden;
  max-width: 700px;
  margin: 0 auto;
}
.hero-stat {
  flex: 1;
  min-width: 150px;
  padding: 1.25rem 1.5rem;
  text-align: center;
  border-right: 1px solid var(--border);
}
.hero-stat:last-child { border-right: none; }
.hero-stat-value {
  font-size: 32px;
  font-weight: 700;
  color: var(--teal);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: .4rem;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.hero-stat-label {
  font-size: .75rem;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: .04em;
}

.hero-capacity-tagline {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
  text-align: center;
}
.hero-capacity-tagline p {
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}
.hero-capacity-tagline-accent {
  font-size: 1.35rem !important;
  font-weight: 600 !important;
  color: var(--heading) !important;
  margin-top: 0.25rem !important;
}

/* ── System Connector ── */
.connector-section {
  padding: 5rem 0;
  border-top: 1px solid var(--border);
}
.connector-section .section-title { text-align: center; }
.connector-section .section-sub { margin: 0 auto 3rem; text-align: center; }

/* ────────────────────────────────────────────────────────
   Acquisition Outcome Section — strategic / retirement cohort
   Sits between Hero and Problem. Visually echoes the hero
   (centred typography, dark background, teal accent on the
   second-half clause) so it reads as the strategic outcome
   that complements the hero's operational outcomes.
──────────────────────────────────────────────────────── */
.outcome-section {
  position: relative;
  padding: 4.5rem 0 5rem;
  background: var(--bg);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.outcome-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(78, 236, 200, .06) 0%, transparent 70%);
  pointer-events: none;
}
.outcome-inner {
  position: relative;
  z-index: 1;
  text-align: center;
}
.outcome-section .eyebrow {
  margin-bottom: 1.25rem;
}
.outcome-headline {
  font-size: clamp(28px, 4vw, 46px);
  font-weight: 700;
  color: var(--heading);
  letter-spacing: -0.025em;
  line-height: 1.12;
  margin: 0 auto 1.5rem;
  max-width: 880px;
}
.outcome-headline .teal { color: var(--teal); }
.outcome-body {
  font-size: clamp(1rem, 1.6vw, 1.1rem);
  color: var(--text-muted);
  max-width: 720px;
  margin: 0 auto 2.5rem;
  line-height: 1.7;
}
.outcome-body strong {
  color: var(--heading);
  font-weight: 600;
}
.outcome-pillars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  max-width: 880px;
  margin: 0 auto;
}
.outcome-pillar {
  text-align: left;
  padding: 1.25rem 1.5rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color .2s;
}
.outcome-pillar:hover { border-color: var(--border-hi); }
.outcome-pillar-key {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: .5rem;
}
.outcome-pillar-text {
  font-size: .9rem;
  color: var(--text-muted);
  line-height: 1.6;
}
.outcome-pillar-premium {
  border-color: rgba(78, 236, 200, .35);
  background: linear-gradient(135deg, var(--card), var(--teal-glow));
}
.outcome-pillar-premium .outcome-pillar-key { color: var(--teal); }
.outcome-pillar-premium .outcome-pillar-text { color: var(--text); }

/* Outcome accordion */
.outcome-accordion { border: none; }
.outcome-accordion > .outcome-accordion-body { padding-top: .25rem; }
.outcome-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  list-style: none;
  cursor: pointer;
  padding: .6rem 0 1.25rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.5rem;
  user-select: none;
}
.outcome-summary::-webkit-details-marker { display: none; }
.outcome-summary::marker { content: ''; }
.outcome-summary-label {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.outcome-summary-chevron {
  color: var(--text-faint);
  flex-shrink: 0;
  transition: transform .2s ease-out;
}
.outcome-accordion[open] .outcome-summary-chevron { transform: rotate(180deg); }
.outcome-accordion:not([open]) .outcome-body,
.outcome-accordion:not([open]) .outcome-pillars { display: none; }

@media (max-width: 640px) {
  .outcome-section { padding: 3rem 0 3.5rem; }
  .outcome-pillars { grid-template-columns: 1fr; }
}

/* ── Problem Section ── */
.problem-section {
  padding: 5rem 0;
  background: var(--bg2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.problem-section .section-title { margin-bottom: .75rem; }
.problem-section .section-sub { margin-bottom: 2.5rem; }
.problem-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
}
.problem-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  transition: border-color .2s;
}
.problem-card:hover { border-color: var(--border-hi); }
.problem-feel {
  font-size: .85rem;
  font-weight: 600;
  color: var(--heading);
  margin-bottom: .6rem;
  line-height: 1.4;
  font-style: italic;
}
.problem-feel::before {
  content: '"';
  color: var(--text-faint);
}
.problem-feel::after {
  content: '"';
  color: var(--text-faint);
}
.problem-reality {
  font-size: .82rem;
  color: var(--text-muted);
  line-height: 1.6;
  padding-top: .6rem;
  border-top: 1px solid var(--border);
}

.problem-accordion { margin-top: 2.5rem; }

/* ── Features Section ── */
.features-section {
  padding: 5rem 0;
}
.features-section .section-title { margin-bottom: .75rem; }
.features-section .section-sub { margin-bottom: 3rem; }
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1rem;
}
.feature-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.75rem;
  transition: border-color .2s, box-shadow .2s, transform .2s;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.feature-card:hover {
  border-color: var(--border-hi);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0,0,0,.4);
}
.feature-icon {
  width: 40px; height: 40px;
  border-radius: var(--radius-sm);
  background: var(--teal-dim);
  border: 1px solid rgba(78, 236, 200, .2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.feature-icon svg { width: 20px; height: 20px; }
.feature-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--heading);
  line-height: 1.3;
}
.feature-desc {
  font-size: .87rem;
  color: var(--text-muted);
  line-height: 1.65;
  flex: 1;
}
.feature-metric {
  font-size: .75rem;
  font-weight: 600;
  color: var(--teal);
  letter-spacing: .04em;
  padding: .3rem .65rem;
  background: var(--teal-glow);
  border: 1px solid rgba(78, 236, 200, .2);
  border-radius: 99px;
  align-self: flex-start;
}

/* ── Safety Section ── */
.safety-section {
  padding: 5rem 0;
  background: var(--bg2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.safety-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
}
.safety-risks h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--heading);
  margin-bottom: 1rem;
}
.risk-item {
  display: flex;
  gap: .85rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--border);
}
.risk-item:first-of-type { border-top: 1px solid var(--border); }
.risk-number {
  font-size: .8rem;
  font-weight: 700;
  color: var(--text-faint);
  min-width: 22px;
  padding-top: .1rem;
}
.risk-title {
  font-size: .9rem;
  font-weight: 600;
  color: var(--heading);
  margin-bottom: .25rem;
}
.risk-cost {
  font-size: .82rem;
  color: var(--text-muted);
  line-height: 1.55;
}
.safety-reasons h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--heading);
  margin-bottom: 1rem;
}
.reason-item {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--border);
}
.reason-item:first-of-type { border-top: 1px solid var(--border); }
.reason-check {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--teal-dim);
  border: 1px solid rgba(78, 236, 200, .3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: .1rem;
}
.reason-check svg { width: 11px; height: 11px; }
.reason-title {
  font-size: .9rem;
  font-weight: 600;
  color: var(--teal);
  margin-bottom: .2rem;
}
.reason-desc {
  font-size: .82rem;
  color: var(--text-muted);
  line-height: 1.55;
}

/* ── Pilot Steps ── */
.pilot-section {
  padding: 5rem 0;
}
.pilot-section .section-title { text-align: center; margin-bottom: .75rem; }
.pilot-section .section-sub { text-align: center; margin: 0 auto 3rem; }
.pilot-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0;
  position: relative;
  max-width: 900px;
  margin: 0 auto;
}
.pilot-steps::before {
  content: '';
  position: absolute;
  top: 22px;
  left: calc(10% + 20px);
  right: calc(10% + 20px);
  height: 2px;
  background: linear-gradient(to right, var(--teal), var(--blue));
  z-index: 0;
}
.pilot-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 1rem;
  position: relative;
  z-index: 1;
}
.pilot-step-num {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--card);
  border: 2px solid var(--teal);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  font-weight: 700;
  color: var(--teal);
  margin-bottom: 1rem;
  flex-shrink: 0;
}
.pilot-step-title {
  font-size: .88rem;
  font-weight: 700;
  color: var(--heading);
  margin-bottom: .35rem;
  line-height: 1.3;
}
.pilot-step-time {
  font-size: .75rem;
  color: var(--teal);
  font-weight: 600;
  margin-bottom: .35rem;
}
.pilot-step-desc {
  font-size: .78rem;
  color: var(--text-muted);
  line-height: 1.55;
}
.pilot-total {
  text-align: center;
  margin-top: 2.5rem;
  padding: 1.25rem 2rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  display: inline-block;
  margin-left: 50%;
  transform: translateX(-50%);
}
.pilot-total-label {
  font-size: .72rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: .35rem;
}
.pilot-total-value {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--heading);
}
.pilot-total-value span { color: var(--teal); }

/* ── FAQ ── */
.faq-section {
  padding: 5rem 0;
  background: var(--bg2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.faq-section .section-title { margin-bottom: 2rem; }
.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem 2.5rem;
  align-items: start;
}
.faq-item {
  border-bottom: 1px solid var(--border);
}
.faq-item summary {
  font-size: .92rem;
  font-weight: 600;
  color: var(--heading);
  padding: 1rem 0 1rem 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  list-style: none;
  line-height: 1.4;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--text-faint);
  flex-shrink: 0;
  transition: transform .2s, color .2s;
}
.faq-item[open] summary::after {
  transform: rotate(45deg);
  color: var(--teal);
}
.faq-item p {
  font-size: .85rem;
  color: var(--text-muted);
  padding-bottom: 1rem;
  line-height: 1.7;
}

/* ── Why Now ── */
.why-now-section {
  padding: 5rem 0;
}
.why-now-section .section-title { margin-bottom: .75rem; }
.why-now-section .section-sub { margin-bottom: 2.5rem; }
.why-now-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
@media (max-width: 1100px) {
  .why-now-grid { grid-template-columns: repeat(2, 1fr); }
}
.why-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.75rem;
  position: relative;
  overflow: hidden;
}
.why-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(to right, var(--teal), var(--blue));
}
.why-num {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--border-hi);
  line-height: 1;
  margin-bottom: .75rem;
}
.why-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--heading);
  margin-bottom: .5rem;
}
.why-desc {
  font-size: .85rem;
  color: var(--text-muted);
  line-height: 1.65;
}

/* ── Final CTA ── */
.cta-section {
  padding: 6rem 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 70% at 50% 50%, rgba(78, 236, 200, .07) 0%, transparent 70%);
  pointer-events: none;
}
.cta-inner { position: relative; z-index: 1; }
.cta-section h2 {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  color: var(--heading);
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin-bottom: 1rem;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.cta-section h2 span { color: var(--teal); }
.cta-sub {
  font-size: 1.05rem;
  color: var(--text-muted);
  max-width: 560px;
  margin: 0 auto 2.25rem;
  line-height: 1.7;
}
.cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}
.cta-actions .btn { font-size: 1.05rem; padding: .9rem 2rem; }
.cta-fine {
  font-size: .8rem;
  color: var(--text-faint);
}
.cta-fine a { color: var(--text-muted); }

/* ── Footer ── */
.site-footer {
  padding: 2rem 0;
  border-top: 1px solid var(--border);
  background: var(--bg);
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}
.footer-copy {
  font-size: .78rem;
  color: var(--text-faint);
}
.footer-links {
  display: flex;
  gap: 1.5rem;
  list-style: none;
}
.footer-links a {
  font-size: .78rem;
  color: var(--text-faint);
  transition: color .15s;
}
.footer-links a:hover { color: var(--text-muted); text-decoration: none; }
.footer-badge {
  font-size: .72rem;
  font-weight: 600;
  color: var(--text-faint);
  letter-spacing: .06em;
  border: 1px solid var(--border);
  padding: .25rem .6rem;
  border-radius: 4px;
}

/* ── Responsive ── */
/* ── Above / Below the Line ── */
.line-section {
  padding: 5rem 0;
  border-top: 1px solid var(--border);
}
.line-section .section-title { margin-bottom: .75rem; }
.line-section .section-sub { margin-bottom: 2.5rem; }
.line-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
.line-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem;
}
.line-card-above {
  border-color: rgba(78, 236, 200, .3);
  background: linear-gradient(135deg, var(--card), rgba(78,236,200,.04));
}
.line-label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: .5rem;
}
.line-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--heading);
  margin-bottom: 1rem;
}
.line-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-bottom: 1.25rem;
}
.line-list li {
  font-size: .87rem;
  color: var(--text-muted);
  padding-left: 1.1rem;
  position: relative;
}
.line-list li::before {
  content: '–';
  position: absolute;
  left: 0;
  color: var(--text-faint);
}
.line-quote {
  font-size: .82rem;
  color: var(--text-faint);
  font-style: italic;
  border-left: 2px solid rgba(78,236,200,.3);
  padding-left: .85rem;
}

/* Line-card accordion (Above / Below the Line) */
.line-card-details { padding: 0; }
.line-card-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.75rem 2rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.line-card-summary::-webkit-details-marker { display: none; }
.line-card-summary::marker { content: ''; }
.line-card-details[open] .line-card-summary { padding-bottom: 1rem; }
.line-card-details .line-list {
  margin: 0 0 1.25rem;
  padding: 0 2rem;
}
.line-card-details .line-quote {
  margin: 0;
  padding: 0 2rem 1.75rem;
  border-left: none;
  border-top: 1px solid var(--border);
  padding-top: .85rem;
}
.line-card-chevron {
  color: var(--text-faint);
  flex-shrink: 0;
  transition: transform .2s ease-out;
}
.line-card-details[open] .line-card-chevron { transform: rotate(180deg); }

/* ── In Practice (Use Cases) ── */
.use-cases-section {
  padding: 6rem 0 5rem;
  border-top: 1px solid var(--border);
}

.use-cases-list {
  margin-top: 3rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.use-case-item {
  border-bottom: 1px solid var(--border);
}

.use-case-item:last-child {
  border-bottom: none;
}

.use-case-summary {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.75rem 2rem;
  cursor: pointer;
  list-style: none;
  background: var(--panel);
  transition: background 0.15s ease;
}

.use-case-summary::-webkit-details-marker { display: none; }
.use-case-summary::marker { display: none; }

.use-case-summary:hover {
  background: var(--card);
}

.use-case-item[open] > .use-case-summary {
  background: var(--card);
  border-bottom: 1px solid var(--border);
}

.uc-number {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--teal);
  min-width: 2rem;
  flex-shrink: 0;
  padding-top: 0.15rem;
}

.uc-header {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}

.uc-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}

.uc-hook {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.use-case-item[open] .uc-title {
  color: var(--heading);
}

.use-case-item[open] .uc-hook {
  color: var(--teal);
}

.uc-saving-preview {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--teal);
  background: rgba(78, 236, 200, 0.08);
  border: 1px solid rgba(78, 236, 200, 0.3);
  border-radius: 2rem;
  padding: 0.2rem 0.65rem;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}
.uc-chevron {
  color: var(--text-faint);
  flex-shrink: 0;
  transition: transform 0.2s ease, color 0.15s ease;
  display: flex;
  align-items: center;
}

.use-case-item[open] .uc-chevron {
  transform: rotate(90deg);
  color: var(--teal);
}

.uc-body {
  padding: 2rem 2rem 2rem 5.25rem;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.uc-body p {
  color: var(--text-muted);
  font-size: 0.9375rem;
  line-height: 1.8;
  margin: 0;
}

.uc-body p strong {
  color: var(--text);
  font-weight: 600;
}

.uc-saving {
  margin-top: 0.75rem;
  padding: 1.1rem 1.25rem;
  border-left: 3px solid var(--teal);
  background: var(--teal-glow);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.uc-saving-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
}

.uc-saving-figure {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--heading);
  line-height: 1.3;
}

.uc-saving-note {
  font-size: 0.8125rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-top: 0.2rem;
}

/* ── System of Responsibility ── */
.sor-section {
  padding: 5rem 0;
  background: var(--bg2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.sor-section .section-title { margin-bottom: .75rem; }
.sor-section .section-sub { margin-bottom: 2.5rem; }
.sor-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 2.5rem;
}
.sor-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.75rem;
}
.sor-card-active {
  border-color: rgba(78, 236, 200, .4);
  background: linear-gradient(135deg, var(--card), rgba(78,236,200,.06));
  box-shadow: 0 0 30px rgba(78,236,200,.08);
}
.sor-label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: .6rem;
}
.sor-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--heading);
  margin-bottom: .4rem;
  line-height: 1.3;
}
.sor-examples {
  font-size: .75rem;
  color: var(--text-faint);
  margin-bottom: .85rem;
  letter-spacing: .04em;
}
.sor-desc {
  font-size: .85rem;
  color: var(--text-muted);
  line-height: 1.65;
}
.sor-quote {
  text-align: center;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--heading);
  font-style: italic;
  padding: 1.5rem 2rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  max-width: 700px;
  margin: 0 auto;
}

/* SoR: Discuss → Assemble → Prepare → Deliver — Byron-style stepped cards */
.sor-workflow { margin-top: 3rem; }
.sor-workflow-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: start;
  margin-bottom: 2rem;
}
.sor-workflow-title {
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  font-weight: 700;
  color: var(--heading);
  line-height: 1.15;
  letter-spacing: -.02em;
  margin: 0;
}
.sor-workflow-lead {
  font-size: 1rem;
  color: var(--text-muted);
  line-height: 1.65;
  margin: 0;
}
.sor-workflow-lead strong { color: var(--text); font-weight: 600; }

.sor-workflow-cards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 2.3fr;
  gap: 1rem;
  align-items: stretch;
}
.sor-step-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 220px;
  padding: 1.5rem 1.5rem 1.5rem;
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
}
.sor-step-auto {
  background: linear-gradient(165deg, rgba(78, 236, 200, .09), rgba(78, 236, 200, .04));
  border: 1px solid rgba(78, 236, 200, .22);
}
.sor-step-human {
  background: linear-gradient(165deg, rgba(106, 167, 255, .13), rgba(106, 167, 255, .05));
  border: 1px solid rgba(106, 167, 255, .35);
  box-shadow: 0 0 30px rgba(106, 167, 255, .06);
}
.sor-step-num {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--heading);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  letter-spacing: -.02em;
  line-height: 1;
  opacity: .7;
}
.sor-step-auto .sor-step-num { color: var(--teal); opacity: .85; }
.sor-step-human .sor-step-num { color: #9ec6ff; opacity: 1; }

.sor-step-body { padding: 1.25rem 0 .75rem; }
.sor-step-desc {
  font-size: .9rem;
  color: var(--text);
  line-height: 1.6;
  margin: .55rem 0 0;
}
.sor-step-foot {
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.sor-step-active .sor-step-foot { margin-top: 0; }
.sor-step-tag {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.sor-step-auto .sor-step-tag { color: rgba(78, 236, 200, .85); }
.sor-step-human .sor-step-tag { color: #9ec6ff; }
.sor-step-verb {
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--heading);
  letter-spacing: -.02em;
  line-height: 1.1;
}

@media (max-width: 900px) {
  .sor-workflow-intro { grid-template-columns: 1fr; gap: 1rem; }
  .sor-workflow-cards { grid-template-columns: 1fr 1fr; }
  .sor-step-card { min-height: 180px; }
  .sor-step-card.sor-step-active { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .sor-workflow-cards { grid-template-columns: 1fr 1fr; gap: .75rem; }
  .sor-step-card { min-height: 150px; padding: 1.1rem 1.1rem; }
  .sor-step-verb { font-size: 1.2rem; }
}

/* ── Differentiation ── */
.diff-section {
  padding: 5rem 0;
  border-top: 1px solid var(--border);
}
.diff-section .section-title { margin-bottom: .75rem; }
.diff-section .section-sub { margin-bottom: 2.5rem; }
.diff-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.diff-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  transition: border-color .2s;
}
.diff-card:hover { border-color: var(--border-hi); }
.diff-vs {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.diff-title {
  font-size: .95rem;
  font-weight: 700;
  color: var(--teal);
  line-height: 1.35;
}
.diff-desc {
  font-size: .85rem;
  color: var(--text-muted);
  line-height: 1.65;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .safety-inner { grid-template-columns: 1fr; gap: 2rem; }
  .faq-grid { grid-template-columns: 1fr; }
  .why-now-grid { grid-template-columns: 1fr; }
  .sor-grid { grid-template-columns: 1fr; }
  .diff-grid { grid-template-columns: 1fr; }
  .line-grid { grid-template-columns: 1fr; }
  .pilot-steps::before { display: none; }
  .pilot-steps { grid-template-columns: 1fr 1fr; }
  .pilot-step { flex-direction: row; text-align: left; gap: 1rem; }
  .pilot-step-num { margin-bottom: 0; flex-shrink: 0; }

}

@media (max-width: 1180px) {
  /* Collapse to the hamburger before the 10 links get cramped on the bar */
  .nav-toggle { display: inline-flex; }
  .nav-links {
    display: none;
    position: absolute;
    top: 62px;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    padding: .75rem 1.5rem 1.25rem;
    background: rgba(8, 11, 16, .98);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .35);
  }
  .nav-toggle-cbx:checked ~ .nav-links { display: flex; }
  .nav-links a {
    width: 100%;
    padding: 14px 12px;
    color: var(--text);
    white-space: normal;
    border-bottom: 1px solid var(--border);
  }
  .nav-links li:last-child a { border-bottom: none; }
}
@media (max-width: 640px) {
  body { font-size: 17px; }
  .section-sub { font-size: 1.05rem; }
  .hero { padding: 3.5rem 0 3rem; }
  .hero h1 { letter-spacing: -0.5px; }
  .hero-stats { flex-direction: column; }
  .hero-stat { border-right: none; border-bottom: 1px solid var(--border); }
  .hero-stat:last-child { border-bottom: none; }
  .pilot-steps { grid-template-columns: 1fr; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
}

/* ── Why Now — mobile accordion (cards collapse to headlines on mobile) ── */
.why-card-details > summary {
  display: block;
  list-style: none;
  cursor: default;
}
.why-card-details > summary::-webkit-details-marker { display: none; }
.why-card-details > summary::marker { content: ''; }
.why-card-details .why-num,
.why-card-details .why-title { display: block; }
.why-card-chevron { display: none; }
@media (max-width: 900px) {
  .why-card { padding: 1.25rem 1.5rem; }
  .why-card-details > summary {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
  }
  .why-card-details > summary > span:first-child {
    display: flex;
    align-items: baseline;
    gap: .75rem;
    min-width: 0;
  }
  .why-card-details .why-num {
    font-size: 1.5rem;
    margin-bottom: 0;
  }
  .why-card-details .why-title { margin-bottom: 0; }
  .why-card-chevron {
    display: inline-flex;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: transform .2s ease-out;
  }
  .why-card-details[open] .why-card-chevron { transform: rotate(180deg); }
  .why-card-details:not([open]) .why-desc { display: none; }
  .why-card-details[open] .why-desc { margin-top: 1rem; }
}

/* ── Predatory Marketing — sharp comparison styles ── */
.diff-card {
  position: relative;
  overflow: hidden;
}
.diff-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px;
  height: 100%;
  background: var(--teal);
  opacity: .35;
  transition: opacity .25s ease-out;
}
.diff-card:hover::before { opacity: 1; }
.diff-strength {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
  padding: .6rem .85rem;
  background: rgba(255,255,255,.02);
  border-left: 2px solid var(--border);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-style: italic;
}
.diff-pivot {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--teal);
  margin-top: .35rem;
}

/* Tax callout box (where your hours are going) */
.tax-callout {
  margin-top: 2.5rem;
  padding: 1.5rem 1.75rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--teal);
  border-radius: var(--radius);
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.tax-callout-icon {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--teal-glow);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--teal);
  font-weight: 700;
  font-size: 14px;
}
.tax-callout-body { flex: 1; }
.tax-callout-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: .35rem;
}
.tax-callout-text {
  font-size: 15px;
  color: var(--heading);
  line-height: 1.55;
  font-weight: 500;
}
.tax-callout-text strong { color: var(--teal); font-weight: 600; }

/* ──────────────────────────────────────────────────────────
   Live-today Manifesto Strip — between Why Now and About
   Single emphatic statement: live now, built for AU compliance,
   not retrofitted from a US product on a future Phase 1 release.
   Visually a thin band; no card, no eyebrow, no CTA.
────────────────────────────────────────────────────────── */
.manifesto-section {
  position: relative;
  padding: 3.5rem 0;
  background: var(--bg);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.manifesto-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 60% at 50% 50%, rgba(78, 236, 200, .05) 0%, transparent 70%);
  pointer-events: none;
}
.manifesto-inner {
  position: relative;
  z-index: 1;
  text-align: center;
}
.manifesto-text {
  font-size: clamp(1.05rem, 2.2vw, 1.45rem);
  font-weight: 500;
  color: var(--text-muted);
  line-height: 1.55;
  letter-spacing: -0.01em;
  max-width: 880px;
  margin: 0 auto;
}
.manifesto-text .teal {
  color: var(--teal);
  font-weight: 700;
}
.manifesto-emphasis {
  display: inline-block;
  margin-top: .35rem;
  color: var(--heading);
  font-weight: 600;
}
@media (max-width: 640px) {
  .manifesto-section { padding: 2.5rem 0; }
}

/* ── About Section ── */
.about-section {
  padding: 5rem 0;
  background: var(--bg2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.about-section .section-title { margin-bottom: .75rem; }
.about-section .section-sub { margin-bottom: 2.5rem; }

.about-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 2.5rem;
  overflow: hidden;
}
.about-stat {
  padding: 1.5rem 1.25rem;
  border-right: 1px solid var(--border);
}
.about-stat:last-child { border-right: none; }
.about-stat-value {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--teal);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  letter-spacing: -0.02em;
  margin-bottom: .35rem;
  line-height: 1.1;
}
.about-stat-label {
  font-size: .82rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.about-origin {
  margin-bottom: 3rem;
  padding: 2rem 2.25rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--teal);
  border-radius: var(--radius);
}
.about-origin-quote {
  font-size: 1.05rem;
  color: var(--heading);
  line-height: 1.7;
  font-weight: 400;
  font-style: italic;
  margin-bottom: .9rem;
}
.about-origin-attr {
  font-size: .78rem;
  color: var(--text-faint);
  font-weight: 600;
  letter-spacing: .04em;
}

.about-subhead {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--heading);
  letter-spacing: -0.01em;
  margin-bottom: 1.25rem;
}

.founders-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 2.5rem;
}
.founder-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  transition: border-color .2s;
}
.founder-card:hover { border-color: var(--border-hi); }
.founder-role {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--teal);
}
.founder-name {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--heading);
  letter-spacing: -0.01em;
}
.founder-meta {
  font-size: .8rem;
  color: var(--text-muted);
  margin-bottom: .35rem;
}
.founder-bio {
  font-size: .88rem;
  color: var(--text-muted);
  line-height: 1.65;
}
.founder-link {
  margin-top: .5rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--teal);
  letter-spacing: .02em;
}
.founder-link:hover { text-decoration: underline; }

.about-team {
  margin-bottom: 1.5rem;
  padding: 1.25rem 1.5rem;
  background: rgba(255,255,255,.02);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.about-team-label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: .4rem;
}
.about-team-text {
  font-size: .9rem;
  color: var(--text-muted);
  line-height: 1.65;
}

@media (max-width: 900px) {
  .about-stats { grid-template-columns: 1fr 1fr; }
  .about-stat { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
  .about-stat:nth-child(2n) { border-right: none; }
  .about-stat:nth-last-child(-n+2) { border-bottom: none; }
  .founders-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .about-stats { grid-template-columns: 1fr; }
  .about-stat { border-right: none; border-bottom: 1px solid var(--border); }
  .about-stat:last-child { border-bottom: none; }
  .about-origin { padding: 1.5rem 1.5rem; }
  .about-origin-quote { font-size: .98rem; }
}

/* ──────────────────────────────────────────────────────────
   Marketing diagrams — TODAY, Integration Overview, Pilot ROI
   Dark Palantir aesthetic. Reuse: --card, --border, --teal.
────────────────────────────────────────────────────────── */
.diagram {
  margin: 0 0 2.5rem;
  padding: 1.75rem 1.75rem 1.5rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.diagram-caption {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  margin-bottom: 1.5rem;
  text-align: center;
}
.diagram-eyebrow {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--teal);
}
.diagram-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--heading);
  letter-spacing: -0.01em;
}
.diagram-takeaway {
  font-size: .85rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}
.diagram-takeaway strong { color: var(--heading); font-weight: 600; }

/* Connection legend (shared) */
.diagram-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 1.5rem;
  align-items: center;
  margin-top: 1.25rem;
  padding: .85rem 1rem;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.diagram-legend-label {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.legend-item {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .78rem;
  color: var(--text-muted);
}
.legend-line {
  width: 28px; height: 2px;
  display: inline-block;
}
.legend-line-solid { background: var(--teal); }
.legend-line-dash {
  background-image: linear-gradient(to right, var(--teal) 50%, transparent 0%);
  background-size: 6px 2px;
  background-repeat: repeat-x;
}
.legend-line-none {
  background-image: linear-gradient(to right, var(--text-faint) 50%, transparent 0%);
  background-size: 4px 1px;
  background-repeat: repeat-x;
  opacity: .6;
}
.legend-line-manual {
  background-image: linear-gradient(to right, #ffb673 50%, transparent 0%);
  background-size: 8px 2px;
  background-repeat: repeat-x;
}
.legend-pill {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  padding: .15rem .5rem;
  border-radius: 99px;
  border: 1px solid;
  text-transform: uppercase;
}
.legend-pill-two-way {
  color: var(--teal);
  border-color: rgba(78, 236, 200, .35);
  background: var(--teal-glow);
}
.legend-pill-feed {
  color: var(--blue);
  border-color: rgba(106, 167, 255, .35);
  background: var(--blue-dim);
}
.legend-pill-limited {
  color: var(--text-muted);
  border-color: var(--border-hi);
  background: rgba(255,255,255,.02);
}

/* ── Diagram 1: TODAY ── */
.diagram-today-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 1.25rem;
  align-items: center;
}
.stack-tower {
  display: flex;
  flex-direction: column;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
}
.stack-card {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: .75rem;
  align-items: center;
  padding: .75rem .9rem;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.stack-card-icon {
  width: 28px; height: 28px;
  color: var(--text-faint);
  display: flex;
  align-items: center;
  justify-content: center;
}
.stack-card-icon svg { width: 22px; height: 22px; }
.stack-card-name {
  font-size: .88rem;
  font-weight: 700;
  color: var(--heading);
  line-height: 1.2;
}
.stack-card-role {
  font-size: .72rem;
  color: var(--text-faint);
  margin-top: .15rem;
}
.stack-link {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-faint);
  text-align: center;
  position: relative;
  padding: .35rem 0;
  list-style: none;
}
.stack-link::before,
.stack-link::after {
  content: '';
  display: block;
  height: 8px;
  border-left: 1px dashed var(--border-hi);
  margin: 0 auto;
  width: 0;
}
.stack-link::before { margin-bottom: .25rem; }
.stack-link::after  { margin-top: .25rem; }
.stack-link-limited {
  color: var(--teal);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
}
.stack-link-limited::before,
.stack-link-limited::after {
  border-left-style: dashed;
  border-left-color: var(--teal);
  opacity: .55;
}
.stack-link-detail {
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: none;
  color: var(--text-muted);
  font-style: italic;
}

.diagram-today-exception {
  margin-top: 1.25rem;
  padding: .85rem 1rem;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-left: 3px solid #ffb673;
  border-radius: var(--radius);
}
.diagram-today-exception-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.diagram-today-exception-summary::-webkit-details-marker { display: none; }
.diagram-today-exception-summary::marker { content: ''; }
.diagram-today-exception-chevron {
  color: #ffb673;
  flex-shrink: 0;
  opacity: .7;
  transition: transform .2s ease-out;
}
.diagram-today-exception[open] .diagram-today-exception-chevron { transform: rotate(180deg); }
.diagram-today-exception[open] .diagram-today-exception-text { margin-top: .5rem; }
.diagram-today-exception-label {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #ffb673;
  margin-bottom: 0;
}
.diagram-today-exception-text {
  font-size: .85rem;
  color: var(--text-muted);
  line-height: 1.6;
}

.diagram-today-arrow {
  width: 80px;
  height: 16px;
  align-self: center;
}
.diagram-today-arrow svg { width: 100%; height: 100%; }

.drag-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-left: 3px solid #ff9b6a;
  border-radius: var(--radius);
  padding: 1.25rem 1.25rem 1.1rem;
}
.drag-card-icon {
  color: #ff9b6a;
  width: 28px; height: 28px;
  margin-bottom: .5rem;
}
.drag-card-icon svg { width: 28px; height: 28px; }
.drag-card-title {
  font-size: .95rem;
  font-weight: 700;
  color: var(--heading);
  margin-bottom: .65rem;
  letter-spacing: -0.01em;
}
.drag-card-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.drag-card-list li {
  font-size: .82rem;
  color: var(--text-muted);
  position: relative;
  padding-left: 1rem;
  line-height: 1.5;
}
.drag-card-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .55rem;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #ff9b6a;
  opacity: .8;
}

/* ── Diagram 2: Integration Overview ── */
.diagram-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 1.5rem;
  align-items: stretch;
}
.overview-column {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.overview-column-label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: .35rem;
}
.overview-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .5rem;
  align-items: center;
}
.overview-card,
.overview-output {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: .75rem;
  align-items: center;
  padding: .7rem .85rem;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  flex: 1;
}
.overview-card-icon,
.overview-output-icon {
  width: 28px; height: 28px;
  color: var(--teal);
  display: flex;
  align-items: center;
  justify-content: center;
}
.overview-card-icon svg,
.overview-output-icon svg { width: 22px; height: 22px; }
.overview-card-name,
.overview-output-name {
  font-size: .85rem;
  font-weight: 700;
  color: var(--heading);
  line-height: 1.2;
}
.overview-card-role,
.overview-output-role {
  font-size: .7rem;
  color: var(--text-faint);
  margin-top: .15rem;
}
.overview-link {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .2rem .55rem;
  border-radius: 99px;
  border: 1px solid;
  white-space: nowrap;
}
.overview-link-two-way {
  color: var(--teal);
  border-color: rgba(78, 236, 200, .35);
  background: var(--teal-glow);
}
.overview-link-feed {
  color: var(--blue);
  border-color: rgba(106, 167, 255, .35);
  background: var(--blue-dim);
}
.overview-link-limited {
  color: var(--text-muted);
  border-color: var(--border-hi);
  background: rgba(255,255,255,.02);
}

.overview-core {
  align-self: center;
  border: 2px solid var(--teal);
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--card), var(--teal-glow));
  padding: 1.5rem 1.5rem 1.25rem;
  text-align: center;
  box-shadow: 0 0 40px rgba(78, 236, 200, .12);
  min-width: 200px;
}
.overview-core-icon {
  width: 36px; height: 36px;
  color: var(--teal);
  margin: 0 auto .5rem;
}
.overview-core-icon svg { width: 36px; height: 36px; }
.overview-core-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--heading);
  letter-spacing: -0.5px;
  line-height: 1;
}
.overview-core-title span { color: var(--teal); }
.overview-core-sub {
  font-size: .72rem;
  color: var(--text-muted);
  margin-top: .25rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 600;
}
.overview-core-list {
  list-style: none;
  margin: .85rem 0 0;
  padding: .85rem 0 0;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: .25rem;
  font-size: .78rem;
  color: var(--text-muted);
}

/* ── Diagram 3: Pilot ROI ── */
.diagram-pilot { padding-bottom: 1.75rem; }

.pilot-gap-flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
}
.pilot-gap-anchor {
  align-self: center;
  text-align: center;
  padding: .9rem 1.5rem;
  background: var(--bg2);
  border: 1px solid var(--border-hi);
  border-radius: var(--radius);
}
.pilot-gap-anchor-icon {
  width: 24px; height: 24px;
  color: var(--teal);
  margin: 0 auto .35rem;
}
.pilot-gap-anchor-icon svg { width: 24px; height: 24px; }
.pilot-gap-anchor-title {
  font-size: .95rem;
  font-weight: 700;
  color: var(--heading);
}
.pilot-gap-anchor-sub {
  font-size: .75rem;
  color: var(--text-muted);
  margin-top: .15rem;
}

.pilot-gap-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: .5rem;
  align-items: stretch;
  width: 100%;
}
.pilot-gap-step {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1rem .9rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
}
.pilot-gap-step-icon {
  width: 28px; height: 28px;
  color: var(--text-faint);
}
.pilot-gap-step-icon svg { width: 28px; height: 28px; }
.pilot-gap-step-target { border-color: rgba(78, 236, 200, .35); background: var(--teal-glow); }
.pilot-gap-step-target .pilot-gap-step-icon { color: var(--teal); }
.pilot-gap-step-title {
  font-size: .85rem;
  font-weight: 700;
  color: var(--heading);
  line-height: 1.25;
}
.pilot-gap-step-target .pilot-gap-step-title { color: var(--teal); }
.pilot-gap-step-sub {
  font-size: .72rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.pilot-gap-arrow {
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
  min-width: 90px;
}
.pilot-gap-arrow-label {
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--text-muted);
  text-align: center;
  padding: .15rem .4rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  line-height: 1.3;
}
.pilot-gap-arrow-dashed .pilot-gap-arrow-label { color: var(--text-faint); }
.pilot-gap-arrow svg { width: 100%; height: 12px; }

.pilot-roi {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--teal);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
}
.pilot-roi-header {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: .85rem;
  align-items: center;
  margin-bottom: 1.25rem;
}
.pilot-roi-header-icon {
  width: 36px; height: 36px;
  color: var(--teal);
}
.pilot-roi-header-icon svg { width: 36px; height: 36px; }
.pilot-roi-header-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--heading);
  letter-spacing: -0.01em;
}
.pilot-roi-header-sub {
  font-size: .82rem;
  color: var(--text-muted);
  margin-top: .15rem;
}
.pilot-roi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .85rem;
  margin-bottom: 1rem;
}
.pilot-roi-card {
  padding: 1rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.pilot-roi-card-icon {
  width: 24px; height: 24px;
  color: var(--teal);
  margin-bottom: .5rem;
}
.pilot-roi-card-icon svg { width: 24px; height: 24px; }
.pilot-roi-card-title {
  font-size: .85rem;
  font-weight: 700;
  color: var(--heading);
  margin-bottom: .35rem;
  line-height: 1.3;
}
.pilot-roi-card-text {
  font-size: .78rem;
  color: var(--text-muted);
  line-height: 1.55;
}
.pilot-roi-outcome {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .75rem;
  align-items: baseline;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.pilot-roi-outcome-label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--teal);
}
.pilot-roi-outcome-text {
  font-size: .9rem;
  color: var(--text-muted);
  line-height: 1.5;
}
.pilot-roi-outcome-text strong { color: var(--heading); font-weight: 700; }

/* Responsive — diagrams */
@media (max-width: 900px) {
  .diagram-today-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .diagram-today-arrow {
    width: 16px;
    height: 60px;
    margin: 0 auto;
    transform: rotate(90deg);
  }
  .diagram-overview-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .overview-core { min-width: 0; }
  .pilot-gap-row {
    grid-template-columns: 1fr;
    gap: .5rem;
  }
  .pilot-gap-arrow {
    transform: rotate(90deg);
    margin: .25rem auto;
  }
  .pilot-gap-arrow-label { transform: rotate(-90deg); white-space: nowrap; }
  .pilot-roi-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .diagram { padding: 1.25rem 1.1rem; }
  .pilot-roi-grid { grid-template-columns: 1fr; }
  .pilot-roi { padding: 1rem 1.1rem; }
  .diagram-legend { gap: .75rem 1rem; padding: .75rem .85rem; }
  .legend-item { font-size: .74rem; }
}

/* ──────────────────────────────────────────────────────────
   Architecture Section — agent-native from Day 0
   Pillars (Ontology / Practice Brain / Temporal compliance)
   + AI-on-CRM vs Agent-native contrast
   + Outcome-as-a-Service implication
   + closing tagline
────────────────────────────────────────────────────────── */
.architecture-section {
  position: relative;
  padding: 5.5rem 0 5rem;
  background: var(--bg2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.architecture-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(78, 236, 200, .05) 0%, transparent 70%),
    radial-gradient(ellipse 40% 35% at 90% 90%, rgba(106, 167, 255, .04) 0%, transparent 60%);
  pointer-events: none;
}
.architecture-section .container { position: relative; z-index: 1; }
.architecture-section .section-title {
  text-align: center;
  margin-bottom: .9rem;
}
.architecture-section .section-sub {
  text-align: center;
  margin: 0 auto 3rem;
}
.architecture-section > .container > .eyebrow { text-align: center; }

.arch-pillars {
  list-style: none;
  margin: 0 0 3rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.arch-pillar {
  padding: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--teal);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .2s ease-out;
  list-style: none;
}
.arch-pillar:hover { border-color: var(--border-hi); border-left-color: var(--teal); }
.arch-pillar-num {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--teal);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  letter-spacing: -0.02em;
  line-height: 1;
  opacity: .55;
}
.arch-pillar-name {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--teal);
}
.arch-pillar-headline {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--heading);
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 0;
}
.arch-pillar-text {
  font-size: .95rem;
  color: var(--text-muted);
  line-height: 1.7;
  margin: 0;
}
.arch-pillar-text em {
  color: var(--heading);
  font-style: italic;
}
.arch-pillar-quote {
  margin-top: .35rem;
  padding: .65rem .85rem;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-left: 2px solid var(--teal);
  border-radius: var(--radius-sm);
  font-size: .88rem;
  font-style: italic;
  color: var(--heading);
  font-weight: 500;
  line-height: 1.5;
}

/* Architecture pillar accordion */
.arch-pillar-details { display: block; }
.arch-pillar-summary {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  gap: .75rem 1.5rem;
  align-items: center;
  list-style: none;
  cursor: pointer;
  user-select: none;
  margin: 0;
  padding: 1.75rem 1.85rem;
}
.arch-pillar-summary::-webkit-details-marker { display: none; }
.arch-pillar-summary::marker { content: ''; }
.arch-pillar-summary-body { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.arch-pillar-chevron {
  color: var(--text-faint);
  flex-shrink: 0;
  transition: transform .2s ease-out;
}
.arch-pillar-details[open] .arch-pillar-chevron { transform: rotate(180deg); }
.arch-pillar-body {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: 0 1.85rem 1.75rem calc(90px + 1.85rem + 1.5rem);
}

/* Contrast block: AI-on-CRM vs Agent-native */
.arch-contrast {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1.5rem;
  align-items: stretch;
  margin-bottom: 2.5rem;
  padding: 1.75rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.arch-contrast-col { display: flex; flex-direction: column; gap: .85rem; }
.arch-contrast-label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.arch-contrast-them .arch-contrast-label { color: var(--text-faint); }
.arch-contrast-us .arch-contrast-label { color: var(--teal); }
.arch-contrast-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.arch-contrast-list li {
  position: relative;
  padding-left: 1.1rem;
  font-size: .9rem;
  line-height: 1.55;
}
.arch-contrast-them .arch-contrast-list li {
  color: var(--text-muted);
}
.arch-contrast-us .arch-contrast-list li {
  color: var(--text);
}
.arch-contrast-list li::before {
  content: '';
  position: absolute;
  left: 0; top: .55rem;
  width: 5px; height: 5px;
  border-radius: 50%;
}
.arch-contrast-them .arch-contrast-list li::before { background: var(--text-faint); opacity: .7; }
.arch-contrast-us .arch-contrast-list li::before { background: var(--teal); }
.arch-contrast-divider {
  width: 1px;
  background: var(--border-hi);
  align-self: stretch;
}

/* Outcome-as-a-Service callout */
/* "Why this is structurally different" — ontology vs tables explainer */
.arch-why {
  margin: 2.5rem 0 3rem;
  padding: 1.75rem 2rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--teal);
  border-radius: var(--radius);
}
.arch-why-label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: .55rem;
}
.arch-why-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--heading);
  letter-spacing: -0.02em;
  margin: 0 0 .85rem;
}
.arch-why-text {
  font-size: .98rem;
  color: var(--text);
  line-height: 1.7;
  margin: 0 0 1rem;
}
.arch-why-text:last-of-type { margin-bottom: 1.1rem; }
.arch-why-tag {
  font-size: .92rem;
  color: var(--text-muted);
  margin: 0;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.arch-why-tag em { color: var(--text); font-style: italic; }

/* arch-why accordion */
.arch-why-details { padding: 0; }
.arch-why-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.5rem 2rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.arch-why-summary::-webkit-details-marker { display: none; }
.arch-why-summary::marker { content: ''; }
.arch-why-summary-body { display: flex; flex-direction: column; gap: .55rem; }
.arch-why-summary .arch-why-label,
.arch-why-summary .arch-why-title { margin: 0; }
.arch-why-chevron {
  color: var(--teal);
  flex-shrink: 0;
  opacity: .7;
  transition: transform .2s ease-out;
}
.arch-why-details[open] .arch-why-chevron { transform: rotate(180deg); }
.arch-why-body {
  padding: 0 2rem 1.75rem;
  border-top: 1px solid var(--border);
  padding-top: 1.25rem;
}
.arch-why-body .arch-why-text:first-child { margin-top: 0; }

@media (max-width: 640px) {
  .arch-why { padding: 1.25rem 1.25rem; }
  .arch-why-title { font-size: 1.2rem; }
  .arch-why-summary { padding: 1.25rem 1.25rem; }
  .arch-why-body { padding: 1rem 1.25rem 1.25rem; }
}

.arch-oaas {
  margin-bottom: 2.5rem;
  padding: 1.75rem 2rem;
  background: linear-gradient(135deg, var(--card), var(--teal-glow));
  border: 1px solid var(--teal);
  border-radius: var(--radius);
  box-shadow: 0 0 30px rgba(78, 236, 200, .08);
}
.arch-oaas-label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: .35rem;
}
.arch-oaas-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--heading);
  letter-spacing: -0.02em;
  margin: 0 0 .65rem;
}
.arch-oaas-text {
  font-size: .98rem;
  color: var(--text);
  line-height: 1.7;
  margin: 0;
}
.arch-oaas-text strong { color: var(--teal); font-weight: 600; }

/* ── Meet Arkie callout ── */
.arch-arkie {
  margin: 2.5rem 0 0;
  padding: 2rem 2.25rem;
  border: 1px solid var(--border-hi);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(ellipse 60% 50% at 0% 0%, rgba(78, 236, 200, .07) 0%, transparent 65%),
    var(--card);
  position: relative;
}
.arch-arkie-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.arch-arkie-avatar {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--teal), #2bb89e);
  color: #062a23;
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: -.02em;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 24px rgba(78, 236, 200, .25);
}
.arch-arkie-headtext { display: flex; flex-direction: column; gap: .2rem; }
.arch-arkie-name {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--teal);
}
.arch-arkie-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--heading);
  letter-spacing: -.015em;
  line-height: 1.25;
  margin: 0;
}
.arch-arkie-prompts {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  margin-bottom: 1.5rem;
}
.arch-arkie-prompt {
  font-size: .92rem;
  color: var(--text);
  padding: .65rem 1rem;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 18px 18px 18px 4px;
  max-width: 75%;
  line-height: 1.5;
  position: relative;
}
.arch-arkie-prompt::before {
  content: 'Ask Arkie:';
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--teal);
  display: block;
  margin-bottom: .25rem;
  opacity: .8;
}
.arch-arkie-foot {
  font-size: .9rem;
  color: var(--text-muted);
  line-height: 1.65;
  margin: 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--border);
}
.arch-arkie-tag {
  display: block;
  margin-top: .55rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--text-faint);
}
@media (max-width: 640px) {
  .arch-arkie { padding: 1.5rem 1.25rem; }
  .arch-arkie-prompt { max-width: 100%; }
  .arch-arkie-title { font-size: 1.1rem; }
}

/* Closing mic-drop tagline */
.arch-mic-drop {
  text-align: center;
  font-size: 1.15rem;
  color: var(--text-muted);
  font-style: italic;
  margin: 0;
  letter-spacing: -0.005em;
  line-height: 1.5;
}
.arch-mic-drop span {
  color: var(--heading);
  font-weight: 600;
  font-style: normal;
}

/* Responsive — architecture */
@media (max-width: 900px) {
  .arch-pillar {
    grid-template-columns: 1fr;
    gap: .65rem;
    padding: 1.5rem 1.5rem;
  }
  .arch-pillar-num { font-size: 1.75rem; }
  .arch-pillar-summary { grid-template-columns: auto 1fr auto; gap: .5rem 1rem; }
  .arch-pillar-details .arch-pillar-body { padding-left: 0; }
  .arch-contrast {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .arch-contrast-divider {
    width: auto;
    height: 1px;
  }
}
@media (max-width: 640px) {
  .architecture-section { padding: 4rem 0 3.5rem; }
  .arch-pillar { padding: 1.25rem 1.1rem; }
  .arch-pillar-headline { font-size: 1.15rem; }
  .arch-oaas { padding: 1.4rem 1.25rem; }
  .arch-oaas-title { font-size: 1.2rem; }
  .arch-mic-drop { font-size: 1rem; }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .hero-badge-dot { animation: none; opacity: 1; }
}

/* ─────────────────────────────────────────────────────────────
   CAPACITY REFRAME
   Two-line demand/capacity contrast + supporting body paragraph.
   Sits between the hero stats row and the Outcome section.
   ───────────────────────────────────────────────────────────── */
.capacity-section {
  padding: 5rem 0 4.5rem;
  text-align: center;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.capacity-lead {
  font-size: clamp(1.35rem, 2.8vw, 1.9rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--text);
  margin: 0 0 .2rem;
  letter-spacing: -.02em;
}
.capacity-lead-accent {
  color: var(--teal);
  margin-bottom: 2rem;
}
.capacity-body {
  max-width: 720px;
  margin: 0 auto;
  color: var(--text-muted);
  font-size: 1.05rem;
  line-height: 1.8;
}

/* ─────────────────────────────────────────────────────────────
   PRICING SECTION (added 2026-05-01)
   Three-tier card grid + add-ons list + worked example +
   infrastructure-honesty block + bottom CTA. Sage + Ruler tone:
   single teal accent, single primary CTA, precise numbers.
   ───────────────────────────────────────────────────────────── */
.pricing-section {
  padding: 6rem 0 5rem;
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
  border-top: 1px solid var(--border);
}
.pricing-section .section-title { text-align: center; margin-bottom: .75rem; }
.pricing-section .section-sub { text-align: center; max-width: 820px; margin: 0 auto 3rem; }

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-bottom: 3rem;
}
.pricing-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: border-color .15s ease, transform .15s ease;
}
.pricing-card:hover {
  border-color: var(--border-hi);
  transform: translateY(-2px);
}
.pricing-card-top {
  border-color: rgba(78, 236, 200, .35);
  background: linear-gradient(180deg, var(--card) 0%, rgba(78, 236, 200, .04) 100%);
}
.pricing-card-top:hover { border-color: var(--teal); }

.pricing-card-head { padding-bottom: 1rem; border-bottom: 1px solid var(--border); }
.pricing-tier {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--teal);
  margin-bottom: .5rem;
}
.pricing-headline {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
  margin-bottom: .5rem;
}
.pricing-sub {
  font-size: .82rem;
  color: var(--text-muted);
  line-height: 1.5;
}
.pricing-includes {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.pricing-includes li {
  font-size: .85rem;
  color: var(--text);
  line-height: 1.45;
  padding-left: 1.4rem;
  position: relative;
}
.pricing-includes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .5rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
  opacity: .85;
}

.pricing-addons {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.75rem 1.75rem 1.5rem;
  margin-bottom: 2.25rem;
}
.pricing-addons-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 1rem;
  color: var(--text);
  letter-spacing: .01em;
}
.pricing-addons ul {
  list-style: none;
  padding: 0;
  margin: 0 0 .5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .65rem 1.5rem;
}
.pricing-addons ul li {
  font-size: .88rem;
  color: var(--text);
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
.pricing-addons-note {
  font-size: .78rem;
  color: var(--text-muted);
  font-style: italic;
  margin-left: .35rem;
}
.pricing-addons-flat {
  font-size: .78rem;
  color: var(--text-muted);
  margin: 1rem 0 0;
  text-align: right;
  font-style: italic;
}

.pricing-example {
  background: var(--bg2);
  border: 1px solid var(--teal);
  border-radius: 12px;
  padding: 1.5rem 1.75rem;
  margin-bottom: 2.25rem;
}
.pricing-example-head {
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--teal);
  margin-bottom: 1rem;
}
.pricing-example-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
}
.pricing-example-table td {
  padding: .55rem 0;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.pricing-example-table tr:last-child td { border-bottom: none; }
.pricing-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}
.pricing-example-total td {
  font-size: 1rem;
  font-weight: 700;
  color: var(--teal);
  padding-top: .85rem;
  border-top: 1px solid var(--border-hi);
}
.pricing-example-anchor td {
  font-size: .82rem;
  color: var(--text-muted);
  padding: .4rem 0;
}

.pricing-honesty {
  background: var(--bg2);
  border: 1px dashed var(--border-hi);
  border-radius: 12px;
  padding: 1.75rem;
  margin-bottom: 2.5rem;
}
.pricing-honesty h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 1rem;
  color: var(--text);
}
.pricing-honesty p {
  font-size: .92rem;
  color: var(--text);
  line-height: 1.6;
  margin: 0 0 .85rem;
}
.pricing-honesty p:last-child { margin-bottom: 0; }
.pricing-honesty strong { color: var(--teal); font-weight: 600; }

.pricing-cta-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}
.pricing-cta-note {
  font-size: .85rem;
  color: var(--text-muted);
}

/* ── Pilot fee note (added 2026-05-01) ── */
.pilot-fee-note {
  text-align: center;
  font-size: .9rem;
  color: var(--text-muted);
  max-width: 720px;
  margin: 1.75rem auto 0;
  line-height: 1.55;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}
.pilot-fee-note strong { color: var(--text); font-weight: 600; }

@media (max-width: 900px) {
  .pricing-grid { grid-template-columns: 1fr; }
  .pricing-addons ul { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .capacity-section { padding: 3.5rem 0 3rem; }
  .pricing-section { padding: 4rem 0 3.5rem; }
  .pricing-card { padding: 1.4rem 1.25rem; }
  .pricing-headline { font-size: 1.2rem; }
  .pricing-addons { padding: 1.4rem 1.25rem; }
  .pricing-example { padding: 1.25rem 1.1rem; }
  .pricing-honesty { padding: 1.4rem 1.25rem; }
}

/* ─────────────────────────────────────────────────────────────
   WHITEPAPER SECTION (added 2026-05-01)
   Single-column callout — compact, secondary to pricing.
   ───────────────────────────────────────────────────────────── */
.whitepaper-section {
  padding: 5rem 0 4.5rem;
  background: var(--bg);
  border-top: 1px solid var(--border);
}
.whitepaper-section .section-title { text-align: center; margin-bottom: .75rem; }
.whitepaper-section .section-sub { text-align: center; max-width: 720px; margin: 0 auto 2.5rem; }

.whitepaper-card {
  max-width: 720px;
  margin: 0 auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2rem 2rem 1.75rem;
  text-align: center;
}
.whitepaper-abstract {
  font-size: .95rem;
  color: var(--text);
  line-height: 1.65;
  margin: 0 0 1.25rem;
  text-align: left;
}
.whitepaper-meta {
  font-size: .82rem;
  color: var(--text-muted);
  font-style: italic;
  margin-bottom: 1.75rem;
  text-align: left;
}
.whitepaper-cta {
  display: inline-block;
  margin: .25rem 0 1.25rem;
}
.whitepaper-honesty {
  font-size: .78rem;
  color: var(--text-faint);
  margin: 0;
  line-height: 1.5;
}

@media (max-width: 640px) {
  .whitepaper-section { padding: 3.5rem 0 3rem; }
  .whitepaper-card { padding: 1.4rem 1.25rem 1.25rem; }
}

/* ─────────────────────────────────────────────────────────────
   VIGNETTE SECTION (added 2026-05-04)
   First-person narrative from Tessa, a composite illustrative
   persona. Sage + Ruler tone — single accent, calm, evidence-led.
   Layout: portrait left, narrative right; collapses to stacked
   on mobile.
   ───────────────────────────────────────────────────────────── */
.vignette-section {
  padding: 5rem 0 4.5rem;
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
  border-top: 1px solid var(--border);
}
.vignette-section .section-title { text-align: center; margin-bottom: .75rem; }
.vignette-section .section-sub { text-align: center; max-width: 720px; margin: 0 auto 2.5rem; }

.vignette-card {
  max-width: 980px;
  margin: 0 auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 2.25rem;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 2.25rem;
  align-items: start;
}
.vignette-portrait {
  text-align: center;
}
.vignette-portrait img,
.vignette-portrait video {
  display: block;
  width: 180px;
  height: 225px;
  border-radius: 10px;
  border: 1px solid var(--border-hi);
  margin: 0 auto .9rem;
  object-fit: cover;
  background: var(--card);
}
.vignette-name {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--text);
  letter-spacing: .02em;
}
.vignette-title {
  font-size: .78rem;
  color: var(--text-muted);
  margin-top: .35rem;
  line-height: 1.45;
}
.vignette-body p {
  font-size: .98rem;
  color: var(--text);
  line-height: 1.7;
  margin: 0 0 1.05rem;
}
.vignette-body p:last-of-type { margin-bottom: 0; }
.vignette-disclosure {
  font-size: .78rem !important;
  color: var(--text-faint) !important;
  line-height: 1.55 !important;
  padding-top: 1rem;
  border-top: 1px dashed var(--border);
  margin-top: 1.25rem !important;
}

@media (max-width: 760px) {
  .vignette-card {
    grid-template-columns: 1fr;
    padding: 1.5rem;
    gap: 1.5rem;
  }
  .vignette-portrait img,
  .vignette-portrait video { width: 140px; height: 175px; }
}
@media (max-width: 640px) {
  .vignette-section { padding: 3.5rem 0 3rem; }
}

@media (max-width: 900px) {
  .use-cases-section { padding: 4rem 0 3.5rem; }
  .uc-body { padding: 1.5rem 1.25rem 1.5rem 1.25rem; }
}

@media (max-width: 640px) {
  .use-case-summary { padding: 1.25rem; gap: 1rem; }
  .uc-number { min-width: 1.5rem; }
  .uc-hook { display: none; }
  .uc-saving-preview { display: none; }
  .uc-body { padding: 1.25rem; }
  .use-case-item[open] .uc-hook { display: block; font-size: 0.8rem; }
}

/* ──────────────────────────────────────────────────────────
   TRUST STRIP — security ticker + 3 design-principle cards
   Inspired by Byron's hero-adjacent trust layer; expressed
   in the Surity360 dark/teal voice.
────────────────────────────────────────────────────────── */
.trust-section {
  padding: 0 0 4.5rem;
  background: var(--bg);
}
.trust-ticker {
  overflow: hidden;
  background: linear-gradient(90deg, rgba(78,236,200,.03), rgba(78,236,200,.09), rgba(78,236,200,.03));
  border-top: 1px solid rgba(78,236,200,.18);
  border-bottom: 1px solid rgba(78,236,200,.18);
  padding: .85rem 0;
  margin-bottom: 4rem;
  position: relative;
}
.trust-ticker::before,
.trust-ticker::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100px;
  z-index: 2;
  pointer-events: none;
}
.trust-ticker::before { left: 0;  background: linear-gradient(90deg, var(--bg), transparent); }
.trust-ticker::after  { right: 0; background: linear-gradient(-90deg, var(--bg), transparent); }
.trust-ticker-track {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  white-space: nowrap;
  width: max-content;
  animation: trustTickerScroll 55s linear infinite;
}
.trust-ticker-item {
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--text-muted);
}
.trust-ticker-dot {
  color: var(--teal);
  opacity: .55;
  font-size: 1.1rem;
  line-height: 0;
}
@keyframes trustTickerScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .trust-ticker-track { animation: none; }
}

.trust-headline {
  text-align: center;
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  font-weight: 700;
  color: var(--heading);
  letter-spacing: -.02em;
  line-height: 1.25;
  margin: 0 auto 2.25rem;
  max-width: 720px;
}

.trust-cards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1.25rem;
}
.trust-card {
  padding: 2rem 1.75rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: border-color .2s ease-out, transform .2s ease-out;
}
.trust-card:hover {
  border-color: var(--border-hi);
  transform: translateY(-2px);
}
.trust-card-icon {
  color: var(--teal);
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(78, 236, 200, .08);
  border: 1px solid rgba(78, 236, 200, .22);
  flex-shrink: 0;
}
.trust-card-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--heading);
  letter-spacing: -.015em;
  line-height: 1.3;
  margin: 0;
}
.trust-card-text {
  font-size: .92rem;
  color: var(--text-muted);
  line-height: 1.65;
  margin: 0;
}
.trust-card-link {
  color: var(--teal);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px dashed rgba(78, 236, 200, .4);
  transition: color .15s ease-out, border-color .15s ease-out;
}
.trust-card-link:hover {
  color: var(--heading);
  border-bottom-color: var(--teal);
  text-decoration: none;
}

@media (max-width: 900px) {
  .trust-cards { grid-template-columns: 1fr; }
  .trust-ticker { margin-bottom: 2.5rem; }
}
@media (max-width: 640px) {
  .trust-section { padding-bottom: 3rem; }
  .trust-card { padding: 1.5rem 1.25rem; }
  .trust-ticker-item { font-size: .76rem; }
}

/* ──────────────────────────────────────────────────────────
   Section background alternation
   Hero + trust-section stay on --bg (the hero-adjacent block).
   From #outcome down, sections alternate --bg2 / --bg in page
   order so each section reads as its own panel without visually
   merging into the next. Source order makes this block win over
   per-section background declarations earlier in the file.
────────────────────────────────────────────────────────── */
.outcome-section     { background: var(--bg2); }
.use-cases-section   { background: var(--bg);  }
.lighthouse-section  { background: var(--bg);  }
.problem-section     { background: var(--bg2); }
.connector-section   { background: var(--bg);  }
.line-section        { background: var(--bg2); }
.features-section    { background: var(--bg);  }
.architecture-section{ background: var(--bg2); }
.sor-section         { background: var(--bg);  }
.vignette-section    { background: var(--bg2); }
.safety-section      { background: var(--bg);  }
.pilot-section       { background: var(--bg2); }
/* .diff-section removed May 2026 — competitor comparisons retired */
.why-now-section     { background: var(--bg2); }
.manifesto-section   { background: var(--bg);  }
.about-section       { background: var(--bg2); }
.pricing-section     { background: var(--bg);  }
.whitepaper-section  { background: var(--bg2); }
.faq-section         { background: var(--bg);  }
.arkie-section      { background: var(--bg2); }
.workflow-section    { background: var(--bg);  }
/* cta-section keeps its own visual treatment — gradient + glow */

/* ──────────────────────────────────────────────────────────
   Workflow section (top-of-page, after trust strip, before
   Meet Arkie). Owns the Discuss → Assemble → Prepare → Deliver
   4-card interactive stepper that previously lived inside the
   System of Responsibility section. The core "Surity360 absorbs
   the prep work" promise needs to land within one scroll, not at
   position #10.
────────────────────────────────────────────────────────── */
.workflow-section { padding: 5rem 0 5rem; }
.workflow-section .section-title {
  font-size: clamp(1.8rem, 3.5vw, 2.4rem);
  margin-bottom: 1rem;
}
.workflow-section .section-sub {
  max-width: 820px;
  margin: 0 0 2.5rem;
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.7;
}
.workflow-section .section-sub strong { color: var(--text); font-weight: 600; }
@media (max-width: 640px) {
  .workflow-section { padding: 3.5rem 0 3.5rem; }
}

/* ──────────────────────────────────────────────────────────
   Arkie section (top-of-page, after trust strip, before outcome).
   Owns the "Meet Arkie" callout that previously sat inside the
   Architecture section. Anchors the page to Step 1 (Discuss) of
   the Discuss → Assemble → Prepare → Deliver framework.
────────────────────────────────────────────────────────── */
.arkie-section { padding: 5rem 0 4.5rem; }
.arkie-section .eyebrow { display: block; margin-bottom: .8rem; }
.arkie-section .section-title { margin-bottom: 1rem; }
.arkie-section .section-sub {
  max-width: 760px;
  margin: 0 0 2.5rem;
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.7;
}
.arkie-section .section-sub strong { color: var(--text); font-weight: 600; }
.arkie-section .arch-arkie { margin-top: 0; }
@media (max-width: 640px) {
  .arkie-section { padding: 3.5rem 0 3rem; }
}

/* ──────────────────────────────────────────────────────────
   Architecture-section tweaks
   - arch-credit: the Palantir-architecture credibility line under
     the section title.
   - arch-mic-drop: extra top margin so it doesn't collide with the
     preceding contrast / arch-why block now that the Meet Arkie
     callout has moved out of this section.
────────────────────────────────────────────────────────── */
.arch-credit {
  text-align: center;
  margin: 0 auto 1.5rem;
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--teal);
  opacity: .9;
}
.arch-mic-drop { margin-top: 3rem; }
@media (max-width: 640px) {
  .arch-credit { font-size: .85rem; padding: 0 1rem; }
  .arch-mic-drop { margin-top: 2rem; }
}

/* ──────────────────────────────────────────────────────────
   Workflow section — deterministic-AI strapline
   Three-beat teal pill row sitting above the four-step stepper.
   Scannable on autopilot: "powered by deterministic AI — code with
   guardrails — without burning billions of tokens".
────────────────────────────────────────────────────────── */
.workflow-strap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .6rem .75rem;
  margin: 0 auto 2.25rem;
  max-width: 760px;
}
.workflow-strap-item {
  display: inline-block;
  padding: .4rem .85rem;
  border: 1px solid var(--teal);
  border-radius: var(--radius-sm);
  background: rgba(78, 236, 200, .07);
  color: var(--teal);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .workflow-strap { gap: .5rem; padding: 0 1rem; }
  .workflow-strap-item { font-size: .76rem; white-space: normal; }
}

/* ──────────────────────────────────────────────────────────
   Platform section — what it enables (four-bullet list)
────────────────────────────────────────────────────────── */
.platform-enables {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.5rem;
  max-width: 980px;
}
.platform-enables li {
  position: relative;
  padding: 1.1rem 1.25rem 1.1rem 2.2rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: .92rem;
  color: var(--text-muted);
  line-height: 1.6;
}
.platform-enables li::before {
  content: '';
  position: absolute;
  left: 1.1rem;
  top: 1.4rem;
  width: 8px;
  height: 8px;
  background: var(--teal);
  border-radius: 50%;
  opacity: .85;
}
.platform-enables li strong {
  display: block;
  color: var(--heading);
  font-weight: 700;
  margin-bottom: .25rem;
}
.platform-how {
  font-size: .92rem !important;
  color: var(--text-muted) !important;
  max-width: 820px;
  margin-top: 2rem !important;
  border-top: 1px solid var(--border);
  padding-top: 1.5rem;
}
@media (max-width: 900px) {
  .platform-enables { grid-template-columns: 1fr; }
}

/* ──────────────────────────────────────────────────────────
   Problem section — collapsible "six signals" accordion
   The 6 pain cards now collapse behind a single summary that
   sits just below the Fragmentation Tax callout.
────────────────────────────────────────────────────────── */
.problem-collapse {
  margin-top: 1.75rem;
  border: 1px solid var(--border-hi);
  border-radius: var(--radius-lg);
  background: var(--card);
  overflow: hidden;
  transition: border-color .15s ease-out;
}
.problem-collapse:hover { border-color: var(--teal); }
.problem-collapse-summary {
  display: block;
  padding: 0;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.problem-collapse-summary::-webkit-details-marker { display: none; }
.problem-collapse-summary::marker { content: ''; }
.problem-collapse-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem 1.85rem;
  transition: background-color .15s ease-out;
}
.problem-collapse-summary:hover .problem-collapse-inner { background: var(--card-hover); }
.problem-collapse-text { display: flex; flex-direction: column; gap: .45rem; min-width: 0; }
.problem-collapse-label {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--teal);
}
.problem-collapse-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--heading);
  letter-spacing: -.01em;
  line-height: 1.35;
}
.problem-collapse-chevron {
  color: var(--teal);
  flex-shrink: 0;
  opacity: .85;
  transition: transform .2s ease-out;
}
.problem-collapse[open] .problem-collapse-chevron { transform: rotate(180deg); }
.problem-collapse > .use-cases-list {
  margin: 0;
  border: none;
  border-top: 1px solid var(--border);
  border-radius: 0;
}
@media (max-width: 640px) {
  .problem-collapse-inner { padding: 1.15rem 1.25rem; gap: 1rem; }
  .problem-collapse-title { font-size: .95rem; }
}

/* ──────────────────────────────────────────────────────────
   Interactive steppers (CSS-only, no JS)
   Pattern: radio inputs (visually hidden) live above the .cards
   container. Each card is a <label for="..."> that toggles its
   corresponding radio. The :checked state expands that card
   (flex-grow) and reveals its body content with a slide animation.
   Used by:
     - SoR Discuss → Assemble → Prepare → Deliver (4 cards)
     - Trust strip (3 cards)
────────────────────────────────────────────────────────── */
.dapd-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  overflow: hidden;
}

/* SoR — 4-card interactive stepper (overrides grid layout earlier) */
.sor-workflow-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: stretch;
  grid-template-columns: none;
}
.sor-step-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1 1 0;
  min-width: 0;
  min-height: 220px;
  padding: 1.5rem;
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: flex-grow .4s cubic-bezier(.2,.7,.2,1), background .25s ease-out;
}
.sor-step-card .sor-step-desc {
  font-size: .9rem;
  color: var(--text);
  line-height: 1.6;
  margin: 0;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity .35s ease-out .15s, max-height .35s ease-out, margin .35s ease-out;
}
#sor-step-1:checked ~ .sor-workflow-cards .sor-step-card:nth-child(1),
#sor-step-2:checked ~ .sor-workflow-cards .sor-step-card:nth-child(2),
#sor-step-3:checked ~ .sor-workflow-cards .sor-step-card:nth-child(3),
#sor-step-4:checked ~ .sor-workflow-cards .sor-step-card:nth-child(4) {
  flex-grow: 2.4;
}
#sor-step-1:checked ~ .sor-workflow-cards .sor-step-card:nth-child(1) .sor-step-desc,
#sor-step-2:checked ~ .sor-workflow-cards .sor-step-card:nth-child(2) .sor-step-desc,
#sor-step-3:checked ~ .sor-workflow-cards .sor-step-card:nth-child(3) .sor-step-desc,
#sor-step-4:checked ~ .sor-workflow-cards .sor-step-card:nth-child(4) .sor-step-desc {
  opacity: 1;
  max-height: 240px;
  margin: 1rem 0 .5rem;
}
#sor-step-1:focus-visible ~ .sor-workflow-cards .sor-step-card:nth-child(1),
#sor-step-2:focus-visible ~ .sor-workflow-cards .sor-step-card:nth-child(2),
#sor-step-3:focus-visible ~ .sor-workflow-cards .sor-step-card:nth-child(3),
#sor-step-4:focus-visible ~ .sor-workflow-cards .sor-step-card:nth-child(4) {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}

/* Trust strip — 3-card interactive stepper (overrides 3-col grid) */
.trust-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: stretch;
  grid-template-columns: none;
}
.trust-card {
  flex: 1 1 0;
  min-width: 0;
  cursor: pointer;
  transition: flex-grow .4s cubic-bezier(.2,.7,.2,1), border-color .2s ease-out;
}
.trust-card .trust-card-text {
  opacity: 0;
  max-height: 0;
  margin: 0;
  overflow: hidden;
  transition: opacity .35s ease-out .1s, max-height .35s ease-out, margin .35s ease-out;
}
/* Reveal on hover or focus-within (keyboard) — user-initiated only */
.trust-card:hover .trust-card-text,
.trust-card:focus-within .trust-card-text {
  opacity: 1;
  max-height: 320px;
  margin-top: .6rem;
}
#trust-card-1:checked ~ .trust-cards .trust-card:nth-child(1),
#trust-card-2:checked ~ .trust-cards .trust-card:nth-child(2),
#trust-card-3:checked ~ .trust-cards .trust-card:nth-child(3) {
  flex-grow: 1.8;
}
#trust-card-1:checked ~ .trust-cards .trust-card:nth-child(1) .trust-card-text,
#trust-card-2:checked ~ .trust-cards .trust-card:nth-child(2) .trust-card-text,
#trust-card-3:checked ~ .trust-cards .trust-card:nth-child(3) .trust-card-text {
  opacity: 1;
  max-height: 320px;
  margin-top: .6rem;
}
#trust-card-1:focus-visible ~ .trust-cards .trust-card:nth-child(1),
#trust-card-2:focus-visible ~ .trust-cards .trust-card:nth-child(2),
#trust-card-3:focus-visible ~ .trust-cards .trust-card:nth-child(3) {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}

/* Mobile: stack, no flex-grow trick, all bodies visible */
@media (max-width: 900px) {
  .sor-workflow-cards { flex-direction: column; }
  .sor-step-card { flex: 1 1 auto; min-height: auto; }
  .sor-step-card .sor-step-desc { opacity: 1; max-height: 320px; margin: 1rem 0 .5rem; }
  #sor-step-1:checked ~ .sor-workflow-cards .sor-step-card:nth-child(1),
  #sor-step-2:checked ~ .sor-workflow-cards .sor-step-card:nth-child(2),
  #sor-step-3:checked ~ .sor-workflow-cards .sor-step-card:nth-child(3),
  #sor-step-4:checked ~ .sor-workflow-cards .sor-step-card:nth-child(4) { flex-grow: 1; }
  .trust-cards { flex-direction: column; }
  .trust-card { flex: 1 1 auto; }
  .trust-card .trust-card-text { opacity: 1; max-height: 320px; margin-top: .6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .sor-step-card,
  .sor-step-card .sor-step-desc,
  .trust-card,
  .trust-card .trust-card-text {
    transition: none !important;
  }
}

/* ──────────────────────────────────────────────────────────
   Whitepaper accordion — each card collapses to title + teaser;
   abstract + Request-the-paper button live in the body.
────────────────────────────────────────────────────────── */
.whitepaper-card-details {
  margin-bottom: 1.25rem;
  padding: 0;
  text-align: left;
}
.whitepaper-card-details:last-of-type { margin-bottom: 0; }
.whitepaper-summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem 1.75rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background-color .15s ease-out;
}
.whitepaper-summary:hover { background: var(--card-hover); }
.whitepaper-summary-text { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.whitepaper-summary .whitepaper-meta {
  text-align: left;
  margin: 0;
  font-style: italic;
}
.whitepaper-title {
  margin: .25rem 0 .25rem;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--heading);
  letter-spacing: -.015em;
  line-height: 1.3;
}
.whitepaper-teaser {
  font-size: .9rem;
  color: var(--text-muted);
  line-height: 1.55;
}
.whitepaper-chevron {
  color: var(--teal);
  flex-shrink: 0;
  opacity: .8;
  margin-top: .35rem;
  transition: transform .2s ease-out;
}
.whitepaper-card-details[open] .whitepaper-chevron { transform: rotate(180deg); }
.whitepaper-body {
  padding: 0 1.75rem 1.75rem;
  border-top: 1px solid var(--border);
  padding-top: 1.25rem;
}
.whitepaper-card-details .whitepaper-cta { display: inline-block; }
.whitepaper-card-details .whitepaper-honesty { text-align: left; }
@media (max-width: 640px) {
  .whitepaper-summary { padding: 1.25rem; gap: 1rem; }
  .whitepaper-body { padding: 1rem 1.25rem 1.5rem; }
  .whitepaper-title { font-size: 1.05rem; }
}

/* ──────────────────────────────────────────────────────────
   Lighthouse — pilot social proof
   Lives INSIDE the Safety section (per website/CLAUDE.md), three
   quote cards from NJBFS (the founder-operator's pilot tenant).
   Dark background, teal accent on attribution. No photography.
────────────────────────────────────────────────────────── */
.lighthouse-section { padding: 5rem 0; }
.lighthouse { margin: 0; }
@media (max-width: 640px) {
  .lighthouse-section { padding: 3.5rem 0; }
}
.lighthouse-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 2.5rem;
}
.lighthouse-head .eyebrow { display: block; margin-bottom: .75rem; }
.lighthouse-title {
  font-size: clamp(1.6rem, 2.8vw, 2rem);
  font-weight: 700;
  color: var(--heading);
  letter-spacing: -.02em;
  line-height: 1.2;
  margin: 0 0 .75rem;
}
.lighthouse-sub {
  font-size: 1rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}
.lighthouse-sub strong { color: var(--text); font-weight: 600; }
.lighthouse-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.lighthouse-card {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.75rem 1.75rem 1.5rem;
  background: var(--card);
  border: 1px solid var(--border-hi);
  border-left: 3px solid var(--teal);
  border-radius: var(--radius-lg);
  transition: border-color .2s ease-out, transform .2s ease-out;
}
.lighthouse-card:hover {
  transform: translateY(-2px);
  border-left-color: var(--teal);
}
.lighthouse-quote {
  font-size: .95rem;
  color: var(--text);
  line-height: 1.65;
  margin: 0;
  font-style: italic;
}
.lighthouse-attr { border-top: 1px solid var(--border); padding-top: 1rem; }
.lighthouse-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--heading);
  letter-spacing: -.01em;
}
.lighthouse-role {
  font-size: .8rem;
  color: var(--text-muted);
  margin-top: .15rem;
}
.lighthouse-outcome {
  margin-top: .75rem;
  padding-top: .75rem;
  border-top: 1px solid var(--border);
  font-size: .82rem;
  font-weight: 600;
  color: var(--teal);
  letter-spacing: .01em;
  line-height: 1.45;
}
@media (max-width: 900px) {
  .lighthouse-cards { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .lighthouse-card { padding: 1.4rem 1.25rem 1.25rem; }
  .lighthouse-quote { font-size: .9rem; }
}