/* Modern homepage styles — pairs with modern-base.css.
   Tokens, nav, footer, buttons come from modern-base.css. */

.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}
body.modern-home section { padding: 96px 0; }
body.modern-home section.section-tight { padding-top: 48px; }
body.modern-home img,
body.modern-home svg { display: block; max-width: 100%; }

/* ─── HERO ─── */
.hero {
  padding: 72px 0 96px;
  position: relative;
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.25fr minmax(0, 460px);
  gap: 64px;
  align-items: center;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12.5px;
  color: var(--ink-2);
  margin-bottom: 28px;
  font-variant-numeric: tabular-nums;
}
.hero-badge .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent);
}
.hero-badge .pill {
  margin-left: 6px;
  padding: 2px 7px;
  background: var(--surface-2);
  border-radius: 999px;
  font-size: 11px;
  color: var(--ink-3);
  font-family: var(--mono);
}
.hero-title {
  font-size: clamp(42px, 4.6vw, 64px);
  line-height: 1.02;
  font-weight: 600;
  letter-spacing: -0.03em;
  margin-bottom: 24px;
  color: var(--ink);
  text-wrap: balance;
}
.hero-sub {
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 520px;
  margin-bottom: 32px;
  text-wrap: pretty;
}
.hero-cta {
  display: flex;
  gap: 10px;
}
/* Small proof caption below the CTA. Deliberately quiet so it supports the
   headline instead of competing with it. */
.hero-replace {
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--ink-3);
  letter-spacing: -0.005em;
  max-width: 520px;
}

/* Detection-lead proof band, aggregated from caught-first.json. Sits between
   the hero and the operating-scale logos strip as the single biggest "we
   actually do what we claim" signal. */
.detection-band {
  display: block;
  margin-top: 40px;
  padding: 16px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, transform 0.15s;
  position: relative;
}
.detection-band:hover {
  border-color: var(--ink-2);
}
.detection-band-head {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 10px;
}
.detection-band-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px 32px;
  align-items: start;
}
.detection-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.detection-stat .val {
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  color: var(--ink-1);
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.detection-stat .lab {
  font-size: 12.5px;
  color: var(--ink-3);
  letter-spacing: -0.005em;
}
.detection-band-cta {
  position: absolute;
  top: 16px;
  right: 22px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent, #2F6FED);
  letter-spacing: -0.005em;
}
@media (max-width: 640px) {
  .detection-band-cta { position: static; margin-top: 16px; display: inline-block; }
  .detection-stat .val { font-size: 30px; }
}

/* Monitor card */
.monitor-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 6px;
  box-shadow:
    0 1px 2px rgba(15,15,14,0.04),
    0 12px 32px -12px rgba(15,15,14,0.12),
    0 32px 80px -24px rgba(15,15,14,0.15);
}
.mc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 12px;
}
.mc-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.mc-title .muted { font-weight: 400; color: var(--ink-3); }
.live {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ok);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 50%, transparent); }
  50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--ok) 0%, transparent); }
}
.mc-tabs {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--surface-2);
  border-radius: 8px;
}
.mc-tab {
  padding: 4px 10px;
  font-size: 11.5px;
  color: var(--ink-3);
  border-radius: 6px;
  font-family: var(--mono);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.mc-tab.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.05); }

.mc-row {
  display: grid;
  /* Fixed status-pill column so rows with longer labels (Maintenance,
     Degraded) keep the bars column the same width as rows with shorter
     labels (Major, OK). Otherwise the pill 'auto' reflow staggers the
     bar strips. */
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr) 96px;
  align-items: center;
  gap: 16px;
  padding: 12px 12px;
  border-top: 1px solid var(--line);
}
.mc-row:first-of-type { border-top: 1px solid var(--line); }
.svc { display: flex; align-items: center; gap: 10px; min-width: 0; }
.avatar {
  width: 28px; height: 28px; border-radius: 7px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.svc .name { font-size: 13.5px; font-weight: 500; letter-spacing: -0.005em; }
.svc .sub { font-size: 11.5px; color: var(--ink-3); font-family: var(--mono); }

/* Hero card history strip — matches the dashboard's .ext-bars / .bars
   treatment so the same visual language appears on the marketing page
   and the authed dashboard. */
.mc-bars {
  display: flex;
  align-items: stretch;
  gap: 2px;
  height: 10px;
}
.mc-bars .b {
  flex: 1;
  min-width: 2px;
  background: var(--ok);
  opacity: .9;
  border-radius: 1px;
  height: 100%;
}
.mc-bars .b.w { background: var(--warn); opacity: .85; }
.mc-bars .b.x { background: var(--danger); opacity: .9; }
.mc-bars .b.nodata { background: var(--line-2); opacity: .5; }

.mc-status {
  font-size: 11px;
  font-weight: 500;
  font-family: var(--mono);
  padding: 3px 8px;
  text-align: center;
  justify-self: stretch;
  border-radius: 5px;
  background: color-mix(in srgb, var(--ok) 10%, transparent);
  color: var(--ok);
  letter-spacing: 0.02em;
}
.mc-status.w { background: color-mix(in srgb, var(--warn) 10%, transparent); color: var(--warn); }
.mc-status.x { background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--danger); }

.mc-foot {
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  color: var(--ink-3);
  font-family: var(--mono);
}
.mc-uptime { color: var(--ink-2); }

/* Operating-scale proof band — sibling of .detection-band above. Same
   shape, same containment, but four cells with icon + value + label so
   it reads as a stats block, not a tagline strip. */
.proof-band {
  margin-top: 12px;
  padding: 16px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.proof-band-head {
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
  margin-bottom: 10px;
  text-align: center;
}
.proof-band-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  align-items: start;
}
.proof-stat {
  display: grid;
  grid-template-columns: 18px 1fr;
  align-items: center;
  column-gap: 10px;
  row-gap: 1px;
  text-align: left;
}
.proof-stat-icon {
  width: 18px;
  height: 18px;
  color: var(--accent);
  grid-row: span 2;
  align-self: center;
}
.proof-stat-val {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.05;
  color: var(--ink-1);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.proof-stat-lab {
  font-size: 12px;
  color: var(--ink-3);
  font-weight: 500;
  letter-spacing: -0.005em;
}
@media (max-width: 720px) {
  .proof-band-grid { grid-template-columns: repeat(2, 1fr); gap: 16px 14px; }
  .proof-band { padding: 14px 14px; }
  .proof-stat-val { font-size: 20px; }
}

/* ─── Section head ─── */
.sec-head {
  max-width: 760px;
  margin: 0 auto 64px;
  text-align: center;
}
.sec-label {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
  font-weight: 600;
}
.sec-title {
  font-size: clamp(36px, 4vw, 52px);
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.028em;
  margin-bottom: 16px;
  text-wrap: balance;
}
.sec-sub {
  font-size: 17px;
  color: var(--ink-2);
  max-width: 580px;
  margin: 0 auto;
  text-wrap: pretty;
}

/* ─── Pillars ─── */
.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.pillar {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 28px 24px;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.pillar:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px -16px rgba(15,15,14,0.12);
  border-color: var(--line-2);
}
.p-num {
  font-size: 11.5px;
  color: var(--ink-3);
  font-family: var(--mono);
  letter-spacing: 0.06em;
  margin-bottom: 24px;
}
.p-icon {
  width: 36px; height: 36px;
  border-radius: 9px;
  background: var(--accent-soft);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.p-indigo .p-icon { background: rgba(99, 102, 241, 0.1); color: #6366F1; }
.p-teal .p-icon { background: rgba(14, 159, 110, 0.1); color: #0E9F6E; }
.p-amber .p-icon { background: rgba(245, 158, 11, 0.10); color: #f59e0b; }
.pillar h3 {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-bottom: 10px;
}
.pillar > p {
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.55;
  margin-bottom: 20px;
  text-wrap: pretty;
}
.pillar ul {
  list-style: none;
  border-top: 1px solid var(--line);
  padding-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.pillar li {
  font-size: 13px;
  color: var(--ink-2);
  padding-left: 18px;
  position: relative;
  line-height: 1.5;
}
.pillar li::before {
  content: '';
  position: absolute;
  left: 0; top: 7px;
  width: 10px; height: 6px;
  border-left: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  transform: rotate(-45deg);
}
.p-indigo li::before { border-color: #6366F1; }
.p-teal li::before { border-color: #0E9F6E; }
.p-amber li::before { border-color: #f59e0b; }

/* ─── Split sections ─── */
.split {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 80px;
  align-items: center;
}
.split.reverse { grid-template-columns: 1.2fr 1fr; }
.split.reverse .split-text { order: 2; }
.split-text h2 {
  font-size: clamp(32px, 3.4vw, 44px);
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.028em;
  margin-bottom: 16px;
  text-wrap: balance;
}
.split-text p {
  font-size: 16px;
  color: var(--ink-2);
  line-height: 1.6;
  margin-bottom: 24px;
  max-width: 460px;
  text-wrap: pretty;
}
.checklist {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 28px;
}
.checklist li {
  font-size: 14px;
  color: var(--ink);
  padding-left: 24px;
  position: relative;
  line-height: 1.5;
}
.checklist li::before {
  content: '';
  position: absolute;
  left: 0; top: 4px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--accent-soft);
}
.checklist li::after {
  content: '';
  position: absolute;
  left: 4px; top: 8px;
  width: 8px; height: 4px;
  border-left: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  transform: rotate(-45deg);
}
.split-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--accent);
  padding-bottom: 2px;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  transition: border-color .2s, gap .2s;
}
.split-link:hover { border-color: var(--accent); gap: 10px; }

/* Dashboard panel */
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(15,15,14,0.04),
    0 24px 60px -20px rgba(15,15,14,0.12);
}
.panel-chrome {
  padding: 10px 14px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 12px;
}
.dots { display: flex; gap: 5px; }
.dots span {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--line-2);
}
.panel-chrome .url {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-3);
  letter-spacing: 0;
}
.panel-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.chart-card {
  padding: 18px 18px 10px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
}
.cc-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 14px;
}
.cc-head h4 {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin-bottom: 2px;
}
.cc-sub { font-size: 11.5px; color: var(--ink-3); font-family: var(--mono); }
.cc-val {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
}
.cc-val .ok {
  margin-left: 8px;
  font-size: 11.5px;
  color: var(--ok);
  font-family: var(--mono);
  font-weight: 500;
  vertical-align: middle;
}

.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.stat {
  padding: 14px 16px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
}
.stat .lab {
  font-size: 11.5px;
  color: var(--ink-3);
  font-family: var(--mono);
  letter-spacing: 0.02em;
  margin-bottom: 6px;
}
.stat .val {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
}
.stat .delta {
  font-size: 11.5px;
  color: var(--ok);
  font-family: var(--mono);
}
.stat .delta.x { color: var(--danger); }

.timeline {
  padding: 14px 16px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
}
.timeline-head {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  color: var(--ink-3);
  font-family: var(--mono);
  margin-bottom: 10px;
}
.timeline-head span:last-child { color: var(--ink-2); }
.track {
  position: relative;
  height: 18px;
  background: var(--surface);
  border-radius: 4px;
  border: 1px solid var(--line);
  overflow: hidden;
}
.seg {
  position: absolute;
  top: 0; bottom: 0;
  background: var(--ok);
}
.seg.w { background: var(--warn); }
.seg.x { background: var(--danger); }
.labels {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 10.5px;
  color: var(--ink-4);
  font-family: var(--mono);
}

/* Command-center panel v2: show every signal type in one frame.
   The 'side by side' promise made literal via 4 signal counters + combined
   sparkline + cross-signal feed. */
.signal-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 16px;
}
.sig {
  background: var(--surface);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sig-lab {
  font-size: 11px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.sig-val {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink-1);
  letter-spacing: -0.015em;
  display: flex;
  align-items: baseline;
  gap: 8px;
  line-height: 1.1;
}
.sig-sub {
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.sig-sub.ok { background: rgba(14, 159, 110, 0.12); color: #0E9F6E; }
.sig-sub.w  { background: rgba(217, 119, 6, 0.12);  color: #D97706; }
.sig-sub.x  { background: rgba(239, 68, 68, 0.12);  color: #EF4444; }
.sig-foot {
  font-size: 11px;
  color: var(--ink-3);
  font-family: var(--mono);
}

.chart-card-compact { padding-bottom: 12px; }
.chart-card-compact .cc-head { padding-bottom: 8px; }

.sig-feed {
  margin-top: 14px;
  border-top: 1px dashed var(--line);
  padding-top: 12px;
}
.sig-feed-head {
  font-size: 11px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  margin-bottom: 8px;
}
.sig-row {
  display: grid;
  grid-template-columns: auto 62px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 7px 0;
  font-size: 12.5px;
  border-top: 1px solid var(--line-soft, rgba(15,15,14,0.04));
}
.sig-row:first-of-type { border-top: none; }
.sig-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ok);
}
.sig-dot.w  { background: var(--warn); }
.sig-dot.x  { background: var(--danger); }
.sig-dot.ok { background: var(--ok); }
.sig-kind {
  font-size: 10.5px;
  color: var(--ink-3);
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.sig-body { color: var(--ink-2); }
.sig-body strong { color: var(--ink-1); font-weight: 600; }
.sig-age {
  font-size: 11px;
  color: var(--ink-3);
  font-family: var(--mono);
}
@media (max-width: 640px) {
  .signal-grid { grid-template-columns: 1fr; }
  .sig-row { grid-template-columns: auto 1fr auto; }
  .sig-row .sig-kind { display: none; }
}

/* Threats list */
.threats {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15,15,14,0.04), 0 24px 60px -20px rgba(15,15,14,0.12);
}
.threats-head {
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface-2);
}
.threats-head h4 {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.threats-head .ct {
  font-size: 11px;
  padding: 3px 8px;
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  color: var(--danger);
  border-radius: 5px;
  font-family: var(--mono);
  font-weight: 500;
}
.threat {
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 14px;
  transition: background .15s;
}
.threat:hover { background: var(--surface-2); }
.threat:last-child { border-bottom: 0; }
.dom {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 12.5px;
  min-width: 0;
}
.dom .fake { color: var(--ink); font-weight: 500; }
.dom .arrow {
  color: var(--ink-4);
  font-family: var(--sans);
  font-size: 11px;
}
.dom .real { color: var(--ink-3); }
.sev {
  font-size: 10.5px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 4px;
  font-family: var(--mono);
  letter-spacing: 0.02em;
}
.sev.h { background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--danger); }
.sev.m { background: color-mix(in srgb, var(--warn) 12%, transparent); color: var(--warn); }
.sev.l { background: var(--surface-2); color: var(--ink-3); border: 1px solid var(--line); }
.age {
  font-size: 11px;
  color: var(--ink-3);
  font-family: var(--mono);
  min-width: 28px;
  text-align: right;
}

/* Quote */
.quote-block {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
  padding: 40px 32px;
}
.quote-block blockquote {
  font-family: var(--serif);
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 28px;
  text-wrap: balance;
}
.quote-attrib {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.who-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, #F5F4F0, #EDEBE4);
  border: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 12px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.who b {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.who span {
  font-size: 12.5px;
  color: var(--ink-3);
}

/* Channels: 3 featured cards for the 80% case (Slack/Teams/Email),
   compact inline list for the rest. Hierarchy > uniformity. */
.channels {
  display: grid;
  gap: 12px;
}
.channels-featured {
  grid-template-columns: repeat(3, 1fr);
}
.channel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 20px 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: border-color .2s, transform .2s;
}
.channel:hover { border-color: var(--line-2); transform: translateY(-2px); }
.channel .ico {
  width: 40px; height: 40px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.channel h4 {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin-bottom: 3px;
}
.channel p {
  font-size: 12px;
  color: var(--ink-3);
  font-family: var(--mono);
  line-height: 1.45;
}

/* Compact "also" row for the secondary channels. Caption-weight. */
.channels-more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-top: 16px;
  padding: 12px 16px;
  background: transparent;
  font-size: 12.5px;
  color: var(--ink-3);
}
.channels-more-label {
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 11px;
  color: var(--ink-3);
  margin-right: 4px;
}
.ch-mini {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-2);
  white-space: nowrap;
}
.ch-mini svg { flex-shrink: 0; }

/* Pricing */
.pricing {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
.price {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
}
.price.featured {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--bg);
  box-shadow: 0 12px 40px -12px rgba(15,15,14,0.25);
}
.price .badge {
  position: absolute;
  top: -10px;
  left: 24px;
  background: var(--accent);
  color: #fff;
  font-size: 10.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.tier {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin-bottom: 12px;
  color: var(--ink-2);
}
.price.featured .tier { color: #B0B0A8; }
.amt {
  font-size: 40px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 10px;
  font-variant-numeric: tabular-nums;
}
.amt .per {
  font-size: 13px;
  font-weight: 400;
  color: var(--ink-3);
  letter-spacing: 0;
}
.price.featured .amt .per { color: #B0B0A8; }
.tagline {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.5;
  margin-bottom: 20px;
  min-height: 52px;
  text-wrap: pretty;
}
.price.featured .tagline { color: #D0D0C8; }
.price ul {
  list-style: none;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
}
.price li {
  font-size: 13px;
  padding-left: 20px;
  position: relative;
  color: var(--ink-2);
  line-height: 1.5;
}
.price.featured li { color: #D0D0C8; }
.price li::before {
  content: '';
  position: absolute;
  left: 0; top: 6px;
  width: 10px; height: 6px;
  border-left: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  transform: rotate(-45deg);
}
.cta {
  display: block;
  text-align: center;
  padding: 11px 16px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--ink);
  border: 1px solid var(--line-2);
  transition: background .15s;
}
.cta:hover { background: var(--surface-3); }
.price.featured .cta {
  background: var(--bg);
  color: var(--ink);
  border-color: var(--bg);
}
.price.featured .cta:hover { background: #fff; }

/* CTA card */
.cta-card {
  background: var(--ink);
  color: var(--bg);
  border-radius: var(--radius-lg);
  padding: 80px 56px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%),
    radial-gradient(circle at 80% 70%, rgba(99, 102, 241, 0.18), transparent 60%);
  pointer-events: none;
}
.cta-card h2 {
  font-size: clamp(36px, 4vw, 52px);
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.028em;
  margin-bottom: 14px;
  position: relative;
  text-wrap: balance;
}
.cta-card h2 em { color: #B0B0A8; }
.cta-card p {
  font-size: 17px;
  color: #B0B0A8;
  max-width: 520px;
  margin: 0 auto 32px;
  position: relative;
  text-wrap: pretty;
}
.cta-btns {
  display: flex;
  justify-content: center;
  gap: 12px;
  position: relative;
}
.cta-card .btn {
  background: var(--bg);
  color: var(--ink);
  border-color: var(--bg);
}
.cta-card .btn:hover { background: #fff; }
.cta-card .btn-ghost {
  background: transparent;
  color: var(--bg);
  border-color: rgba(255,255,255,0.2);
}
.cta-card .btn-ghost:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.35); }

/* Responsive */
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .pillars { grid-template-columns: 1fr; }
  .split, .split.reverse { grid-template-columns: 1fr; gap: 48px; }
  .split.reverse .split-text { order: 0; }
  .channels-featured { grid-template-columns: 1fr; }
  .pricing { grid-template-columns: 1fr 1fr; gap: 16px; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .nav-links { display: none; }
  body.modern-home section { padding: 64px 0; }
  body.modern-home section.section-tight { padding-top: 32px; }
}
@media (max-width: 600px) {
  .channels-featured, .pricing, .foot-grid { grid-template-columns: 1fr; }
  .wrap { padding: 0 20px; }
  .cta-card { padding: 48px 24px; }
  .cta-btns { flex-direction: column; }
  .foot-bottom { flex-direction: column; gap: 8px; }
}