/* ============================================================
   TrueMetriks - /simple (plain-language landing page variant)
   Loaded ONLY by simple.html, on top of marketing.css. Adds the
   pieces marketing.css does not have: stat cards, the three-step
   row, the scenario cards, the "yes" list, the founder note, the
   mini plan row and the P.S. block.

   All colors via tokens.css. Cards stay WHITE in dark mode (site
   rule) via a scoped re-pin at the bottom of this file that mirrors
   the components.css literal list - scoped here so this test page
   does not force a components.css cache bump on every page.
   ============================================================ */

/* --- Hero tweaks: centered, a little roomier than the default marketing hero --- */
.simple .marketing-hero__container { text-align: center; max-width: 1000px; }
.simple .marketing-hero h1 { font-size: clamp(38px, 5.2vw, 66px); margin-bottom: var(--space-5); }
.simple .marketing-hero__lead { font-size: 22px; max-width: 66ch; margin-inline: auto; }
.simple .marketing-hero__lead + .marketing-hero__lead { margin-top: var(--space-4); }

/* Wider prose column + bigger body type than the default marketing pages
   (Fahir, 2026-09-23: the 720px column read cramped and the 18px text too
   small). Mobile stays at the site-wide 17px. */
.simple .marketing-section__container { max-width: var(--container-base); }
.simple .marketing-section h2 { font-size: clamp(30px, 3.2vw, 40px); margin-bottom: var(--space-5); }
.simple .marketing-section p { font-size: 20px; line-height: 1.7; margin-bottom: var(--space-5); }
.simple .marketing-section p:last-child { margin-bottom: 0; }
.simple .marketing-section > .simple-wide + .marketing-section__container p { margin-top: var(--space-6); }
.simple .marketing-hero__lead + .marketing-hero__lead { margin-top: var(--space-4); }
@media (max-width: 768px) {
  .simple .marketing-hero__lead { font-size: 17px; }
}

.simple-hero__deal {
  display: inline-block;
  color: var(--color-brand);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-3);
}
[data-theme="dark"] .simple-hero__deal { color: var(--color-accent-amber); }

/* CTA rows (hero + close) - matched pair, full-width stack on mobile */
.simple-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  margin-top: var(--space-6);
}
.simple-cta .btn { min-width: 240px; }
.simple-cta__meta {
  margin-top: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-text-subtle);
}
/* Mid-page CTA rows, repeated after most sections */
.simple-cta-block { text-align: center; margin-top: var(--space-8); }
.simple-cta-block .simple-cta { margin-top: 0; }
.simple-cta-block--wide { margin-bottom: var(--space-8); }
@media (max-width: 768px) {
  .simple-cta { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
  .simple-cta .btn { width: 100%; min-width: 0; }
}

/* --- Section eyebrow (matches the hero eyebrow treatment) --- */
.simple-eyebrow {
  display: inline-block;
  color: var(--color-brand);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-3);
}
[data-theme="dark"] .simple-eyebrow { color: var(--color-accent-amber); }

/* Mobile body copy = 17px (site standard) */
@media (max-width: 768px) {
  .simple .marketing-section p,
  .simple-money li,
  .simple-yes li,
  .simple-yes__ans,
  .simple-note p,
  .simple-close p { font-size: 17px; }
  .simple-yes small { font-size: 15px; }
  .simple .simple-close p { font-size: 19px; }
}

/* A wider container for the card rows (the prose stays at --container-narrow) */
.simple-wide {
  width: 100%;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--space-5);
}
@media (min-width: 768px) {
  .simple-wide { padding-inline: var(--space-6); }
}

/* --- Shared white card --- */
.simple-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
}
@media (max-width: 768px) {
  .simple-card { padding: var(--space-5); }
}

/* --- Stat cards (3-up) --- */
.simple-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-6);
}
.simple-stat__num {
  display: block;
  font-size: clamp(36px, 4vw, 48px);
  font-weight: var(--font-weight-extra);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--color-brand);
  margin-bottom: var(--space-3);
}
.simple-stat p { font-size: 16px; line-height: var(--line-height-relaxed); color: var(--color-text-muted); margin: 0; }
/* Small headline that introduces the compare dashboard under the stat cards */
.simple-dash__intro {
  margin-top: var(--space-8);
  font-size: 22px;
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
  color: var(--color-text);
}
.simple-dash--after-intro { margin-top: var(--space-5); }
@media (max-width: 768px) {
  .simple-dash__intro { font-size: 19px; margin-top: var(--space-7); }
}
@media (max-width: 900px) {
  .simple-stats { grid-template-columns: 1fr; gap: var(--space-4); }
}

/* --- Three steps --- */
.simple-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-6);
  list-style: none;
  padding: 0;
  margin-inline: 0;
}
.simple-step__label {
  display: inline-block;
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: var(--font-weight-semibold);
  color: var(--color-brand);
  margin-bottom: var(--space-3);
}
.simple-step h3 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.02em;
  line-height: var(--line-height-snug);
  margin-bottom: var(--space-3);
}
.simple-step p { font-size: 16px; line-height: var(--line-height-relaxed); color: var(--color-text-muted); margin: 0; }
@media (max-width: 900px) {
  .simple-steps { grid-template-columns: 1fr; gap: var(--space-4); }
}

/* --- Scenario cards ("here is what changes") --- */
.simple-scenes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-6);
}
.simple-scene h3 {
  font-size: 21px;
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
  margin-bottom: var(--space-3);
}
.simple-scene p { font-size: 16px; line-height: var(--line-height-relaxed); color: var(--color-text-muted); margin: 0; }
@media (max-width: 900px) {
  .simple-scenes { grid-template-columns: 1fr; gap: var(--space-4); }
}

/* --- Money list (where the extra money comes from) --- */
.simple-money {
  list-style: none;
  padding: 0;
  margin: var(--space-5) 0 0;
  display: grid;
  gap: var(--space-5);
}
.simple-money li {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: var(--space-3);
  align-items: start;
  font-size: 20px;
  line-height: var(--line-height-relaxed);
}
.simple-money li b { display: block; }
.simple-money__ic {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--gradient-brand);
  color: var(--color-text-on-brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-sm);
  margin-top: 2px;
}
@media (max-width: 768px) {
  .simple-money li { font-size: 17px; }
}

/* --- The "yes" list --- */
.simple-yes {
  list-style: none;
  padding: 0;
  margin: var(--space-5) 0 0;
  border-top: 1px solid var(--color-border);
}
.simple-yes li {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: var(--space-4);
  align-items: baseline;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 20px;
  line-height: var(--line-height-relaxed);
}
.simple-yes__ans {
  font-weight: var(--font-weight-extra);
  color: var(--color-brand);
  font-size: 23px;
}
[data-theme="dark"] .simple-yes__ans { color: var(--color-accent-amber); }
.simple-yes li > span:last-child { font-size: 23px; font-weight: var(--font-weight-bold); color: var(--color-text); }
.simple-yes small { display: block; color: var(--color-text); font-weight: var(--font-weight-regular); font-size: 18px; margin-top: 6px; }
.simple-yes a { color: var(--color-link-bright); font-weight: var(--font-weight-semibold); }
.simple-yes a:hover { color: var(--color-link-bright-hover); }
@media (max-width: 768px) {
  .simple-yes li { grid-template-columns: 52px 1fr; font-size: 17px; }
  .simple .simple-yes__ans,
  .simple-yes li > span:last-child { font-size: 20px; }
  .simple-yes small { font-size: 17px; }
}

/* --- Founder note --- */
.simple-note { margin-top: var(--space-5); }
.simple-note p { font-size: 20px; }
.simple-note__sig {
  margin-top: var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.simple-note__avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: var(--gradient-brand);
  color: var(--color-text-on-brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-weight-bold);
  flex: 0 0 48px;
}
.simple-note__who b { display: block; }
.simple-note__who span { font-size: var(--font-size-sm); color: var(--color-text-subtle); }

/* --- Mini plan row --- */
.simple-plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-6);
}
.simple-plan { text-align: center; }
.simple-plan h3 { font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); margin-bottom: var(--space-2); }
.simple-plan__price {
  font-size: clamp(32px, 3.6vw, 40px);
  font-weight: var(--font-weight-extra);
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.simple-plan__price small { font-size: var(--font-size-sm); font-weight: var(--font-weight-regular); color: var(--color-text-subtle); letter-spacing: 0; }
.simple-plan p { font-size: 16px; color: var(--color-text-muted); margin: var(--space-3) 0 0; }
.simple-plan .simple-plan__meta { font-size: 14px; color: var(--color-text-subtle); margin: var(--space-2) 0 0; }
.simple-plan .plan-save-note { min-height: 20px; margin: var(--space-1) 0 0; }
.simple-plan--pop { border-color: var(--color-brand); box-shadow: var(--shadow-brand); position: relative; }
.simple-plan__badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gradient-brand);
  color: var(--color-text-on-brand);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  padding: 4px 12px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}
.simple-plan { display: flex; flex-direction: column; }
.simple-plan__cta { margin-top: auto; padding-top: var(--space-5); }
.simple-plan__cta .btn { width: 100%; justify-content: center; }
.simple-plan .simple-plan__note { font-size: 14px; color: var(--color-text-subtle); margin: var(--space-2) 0 0; }
.simple-compare-table { margin-top: var(--space-8); }
/* Solid white card with solid column tints (same treatment as /analytics), so the
   table does not melt into the tinted section background (marketing.css uses see-through tints) */
.simple-compare-table .compare-wrapper {
  background: #FFFFFF;
  border: 1px solid #C9D0EA;
  border-radius: 16px;
  box-shadow: var(--shadow-md);
}
.simple-compare-table .compare-table { background: #FFFFFF; border: 0; border-radius: 0; }
.simple-compare-table .compare-table th,
.simple-compare-table .compare-table td { border-bottom-color: #E3E7F3; }
.simple-compare-table .compare-table th[scope="row"] { background: #FFFFFF; border-right-color: #E3E7F3; }
.simple-compare-table .compare-table thead th.compare-table__feature-col { background: #F4F6FC; }
.simple-compare-table .compare-table td:nth-child(2), .simple-compare-table .compare-table thead th:nth-child(2) { background: #F7F8FA; }
.simple-compare-table .compare-table td:nth-child(3), .simple-compare-table .compare-table thead th:nth-child(3) { background: #F0F2FF; }
.simple-compare-table .compare-table td:nth-child(4), .simple-compare-table .compare-table thead th:nth-child(4) { background: #F7F4FF; }
.simple-compare-table .compare-table thead th:nth-child(3) { background: #E6E9FF; }
.simple-compare-table .compare-table td:nth-child(n+2) { border-left: 1px solid #E3E7F3; }
.simple-compare-table .compare-table__category { background: #EEF1FA; border-top: 1px solid #E3E7F3; color: #2E3340; }
.simple-compare-table .compare-table tr.compare-table__gap td { background: #FFFFFF; height: 12px; }
.simple-compare-table .compare-table tbody:last-child tr:last-child th,
.simple-compare-table .compare-table tbody:last-child tr:last-child td { border-bottom: 0; }
@media (max-width: 900px) {
  .simple-plans { grid-template-columns: 1fr; gap: var(--space-5); }
}

/* --- Billing-cycle toggle (mirror of home.css; this page does not load home.css).
   pricing-cycle.js drives it via .js-cycle / [data-price] / [data-meta] / [data-save]. --- */
.cycle-toggle { display: flex; justify-content: center; margin: var(--space-6) 0 0; }
.cycle-toggle__inner {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  border-radius: var(--radius-full);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
.cycle-toggle__btn {
  appearance: none;
  border: 0;
  cursor: pointer;
  background: transparent;
  color: var(--color-text-muted);
  font-family: inherit;
  font-size: 15px;
  font-weight: var(--font-weight-semibold);
  padding: 9px 20px;
  border-radius: var(--radius-full);
  transition: background .18s ease, color .18s ease;
  white-space: nowrap;
}
.cycle-toggle__btn:hover { color: var(--color-text); }
[data-theme="dark"] .cycle-toggle__inner { background: #FFFFFF; border-color: #D5DAEB; }
[data-theme="dark"] .cycle-toggle__btn { color: #2E3340; }
[data-theme="dark"] .cycle-toggle__btn:hover { color: #0F0F0F; }
.cycle-toggle__btn[aria-pressed="true"] {
  background: var(--gradient-brand);
  color: var(--color-text-on-brand);
  box-shadow: 0 6px 18px -8px rgba(34, 51, 255, .8);
}
.cycle-toggle__save {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  background: #C7F2E2;
  color: #05603A;
  border: 1px solid #8FE0C4;
  font-size: 12.5px;
  font-weight: 800;
}
.plan-save-note.plan-save-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-brand);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.plan-save-note--link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--color-brand);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --- Close + P.S. --- */
.simple-close .marketing-cta__container { max-width: 820px; }
.simple-close h2 { font-size: var(--font-size-3xl); }
@media (max-width: 768px) {
  .simple-close h2 { font-size: 30px; }
}
.simple-close p {
  font-size: 22px;
  line-height: 1.7;
  color: var(--color-text-muted);
  max-width: 62ch;
  margin-inline: auto;
}
.simple-ps { padding-top: var(--space-6); padding-bottom: var(--space-8); }
.simple-ps p { color: var(--color-text-muted); }
.simple-ps p b { color: var(--color-text); }

/* --- Dashboard mockups (HTML/CSS, no images) --- */
.simple-dash {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  text-align: left;
  margin-top: var(--space-7);
}
.simple-dash--hero { max-width: 820px; margin-inline: auto; }
.simple-dash__bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px 16px;
  background: var(--color-surface-alt);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-xs);
  color: var(--color-text-subtle);
}
.simple-dash__brand { font-weight: var(--font-weight-extra); color: var(--color-text); font-size: 13px; letter-spacing: -0.02em; }
.simple-dash__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.simple-dash__chip {
  padding: 2px 10px;
  border-radius: var(--radius-full);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}
.simple-dash__chip--green { color: var(--color-success); border-color: var(--color-success); }
.simple-dash__rows { padding: 16px 20px 8px; display: grid; gap: 10px; }
.simple-dash__foot {
  padding: 12px 20px 16px;
  font-size: 14px;
  line-height: var(--line-height-normal);
  color: var(--color-text-subtle);
  border-top: 1px solid var(--color-border);
  margin-top: 8px;
}

/* source row: dot + name | bar | value | sub */
.simple-srow {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) 76px 60px;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: var(--font-weight-semibold);
}
.simple-srow--sm { grid-template-columns: 138px minmax(0, 1fr) 44px; font-size: 13px; }
.simple-srow__name { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.simple-srow__name i { width: 10px; height: 10px; border-radius: 50%; flex: none; display: inline-block; }
.simple-srow__track { display: block; height: 10px; border-radius: 999px; background: rgba(34, 51, 255, 0.08); overflow: hidden; }
.simple-srow__track i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--color-brand), var(--color-brand-2)); }
.simple-srow__track--gray { background: rgba(75, 81, 96, 0.10); }
.simple-srow__track--gray i { background: #94A3B8; }
.simple-srow b { text-align: right; font-weight: var(--font-weight-extra); }
.simple-srow small { font-size: 12px; color: var(--color-text-subtle); font-weight: var(--font-weight-regular); text-align: right; }
@media (max-width: 600px) {
  .simple-dash__rows { padding-inline: 14px; }
  .simple-dash__foot { padding-inline: 14px; }
  .simple-srow { grid-template-columns: 108px minmax(0, 1fr) 62px; gap: 8px; font-size: 12px; }
  .simple-srow__name { white-space: normal; overflow: visible; line-height: 1.2; align-items: flex-start; }
  .simple-srow__name i { margin-top: 3px; }
  .simple-srow small { display: none; }
  .simple-srow--sm { grid-template-columns: 108px minmax(0, 1fr) 36px; font-size: 12px; }
  .simple-dash__chip { display: none; }
}

/* compare: analytics vs reality */
.simple-compare { display: grid; grid-template-columns: 1fr 1fr; }
.simple-compare__col { padding: 16px 20px; display: grid; gap: 10px; align-content: start; }
.simple-compare__col--them { border-right: 1px solid var(--color-border); }
.simple-compare__head { font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: var(--font-weight-semibold); color: var(--color-text-subtle); margin-bottom: 4px; }
.simple-compare__col--us .simple-compare__head { color: var(--color-brand); }
@media (max-width: 768px) {
  .simple-compare { grid-template-columns: 1fr; }
  .simple-compare__col { padding-inline: 14px; }
  .simple-compare__col--them { border-right: 0; border-bottom: 1px solid var(--color-border); }
}

/* journey: one person, every touch */
.simple-journey {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  padding: 18px 20px 12px;
  position: relative;
}
.simple-jstep { position: relative; padding-top: 20px; min-width: 0; }
.simple-jstep::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 0;
  right: -8px;
  height: 2px;
  background: var(--color-border-strong);
}
.simple-jstep:last-child::before { right: 0; }
.simple-jstep__dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 3px solid var(--color-surface);
  box-shadow: 0 0 0 1px var(--color-border-strong);
  z-index: 1;
}
.simple-jstep b { display: block; font-size: 13px; line-height: 1.3; }
.simple-jstep small { display: block; font-size: 11px; color: var(--color-text-subtle); margin-top: 2px; }
.simple-jstep--sale b { color: var(--color-success); }
@media (max-width: 768px) {
  .simple-journey { grid-template-columns: 1fr; gap: 10px; padding-inline: 14px; }
  .simple-jstep { padding-top: 0; padding-left: 28px; }
  .simple-jstep::before { top: 8px; bottom: -14px; left: 7px; right: auto; width: 2px; height: auto; }
  .simple-jstep:last-child::before { display: none; }
  .simple-jstep__dot { top: 1px; }
}

/* table: every source, green and red */
.simple-table { padding: 8px 0 4px; }
.simple-trow {
  display: grid;
  grid-template-columns: minmax(0, 2.4fr) 0.7fr 1fr 1fr 1fr;
  gap: 10px;
  align-items: center;
  padding: 9px 20px;
  font-size: 14px;
  font-weight: var(--font-weight-semibold);
  border-bottom: 1px solid var(--color-border);
}
.simple-trow:last-child { border-bottom: 0; }
.simple-trow span { text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.simple-trow span:first-child { text-align: left; display: flex; align-items: center; gap: 8px; }
.simple-trow span:first-child i { width: 10px; height: 10px; border-radius: 50%; flex: none; display: inline-block; }
.simple-trow--head { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-text-subtle); font-weight: var(--font-weight-semibold); }
.simple-trow--good span:last-child { color: var(--color-success); }
.simple-trow--bad span:last-child { color: var(--color-danger); }
.simple-trow--good { background: rgba(16, 185, 129, 0.05); }
.simple-trow--bad { background: rgba(239, 68, 68, 0.06); }
.simple-trow--head { background: transparent; }
@media (max-width: 600px) {
  .simple-trow { grid-template-columns: minmax(0, 2.1fr) 0.85fr 1.2fr; padding-inline: 14px; font-size: 13px; gap: 8px; }
  .simple-trow--head span { letter-spacing: 0.04em; font-size: 10px; }
  .simple-trow span:first-child { white-space: normal; overflow: visible; line-height: 1.25; align-items: flex-start; }
  .simple-trow span:first-child i { margin-top: 4px; }
  .simple-trow__hide, .simple-trow__hide-m { display: none; }
}

/* --- Who is this for (3x2 grid) --- */
.simple-who {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-6);
}
.simple-who__ic { display: block; font-size: 28px; line-height: 1; margin-bottom: var(--space-3); }
.simple-who__item h3 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
  margin-bottom: var(--space-2);
}
.simple-who__item p { font-size: 16px; line-height: var(--line-height-relaxed); color: var(--color-text-muted); margin: 0; }
@media (max-width: 900px) {
  .simple-who { grid-template-columns: 1fr; gap: var(--space-4); }
}

/* ------------------------------------------------------------
   DARK MODE: cards stay white (site rule). Scoped mirror of the
   components.css re-pin literals - keep in sync with that list.
   ------------------------------------------------------------ */
[data-theme="dark"] .simple-card,
[data-theme="dark"] .simple-dash {
  --surface-tint-1:      #FFFFFF;
  --surface-tint-2:      #F0F3FF;
  --surface-tint-3:      #E1E6FF;
  --color-bg:            #F0F3FF;
  --color-surface:       #FFFFFF;
  --color-surface-alt:   #E1E6FF;
  --color-border:        #D5DAEB;
  --color-border-strong: #B7BFE0;
  --color-text:          #0F0F0F;
  --color-text-muted:    #2E3340;
  --color-text-subtle:   #4B5160;
  color: var(--color-text);
}
/* The brand-blue accents inside a white card must NOT go amber in dark mode
   (amber is for text sitting on the dark page wash, not on a white card). */
[data-theme="dark"] .simple-card .simple-stat__num,
[data-theme="dark"] .simple-card .simple-step__label,
[data-theme="dark"] .simple-dash .simple-compare__col--us .simple-compare__head { color: var(--color-brand); }

/* --- "You don't have to be a programmer" line under the three steps --- */
.simple-steps__note {
  margin: var(--space-6) auto 0;
  max-width: 62ch;
  text-align: center;
  font-size: 20px;
  line-height: var(--line-height-relaxed);
  color: var(--color-text-muted);
}
.simple-steps__note b { color: var(--color-text); }
.simple-steps__note--follow { margin-top: var(--space-4); }
@media (max-width: 768px) {
  .simple-steps__note { font-size: 17px; }
}

/* --- "What counts as an event?" pill on the plan cards (modal: events-explainer.css) --- */
.simple-plan .simple-plan__events { margin: var(--space-3) 0 0; }

/* Bigger "Start free trial" text on the plan cards (Fahir, 2026-10-04) */
.simple-plan__cta .btn { font-size: 18px; padding-block: var(--space-4); }