/* core-pages.css — /pricing, /about and /contact (2026-10-03, brand sheet
 * step 3).
 *
 * Loaded after store-mgmt.css, ai-page.css and hub-page.css, whose .smp
 * tokens, type, buttons, reviews, FAQ, track, two-ways split and index
 * panel these pages share. This file adds the section grounds and the
 * shapes only these pages have: plan cards, the facts panel, the story,
 * the principles band, the commitments, and the contact form. No :root,
 * reset or body{}.
 */

/* ── Section grounds: cream hero, white and cream, one dark band ───── */
.smp #pr-hero,
.smp #ab-hero,
.smp #ct-hero { background: var(--sm-cream); padding: 8.5rem 0 4.5rem; overflow: hidden; }
.smp #pr-hero { padding-bottom: 6rem; }
.smp #pr-help,
.smp #ab-commits { background: var(--sm-cream); }
.smp #pr-cta,
.smp #ab-principles,
.smp #ab-cta { background: var(--sm-dark); color: #F5F2ED; }

/* ── Pricing: the top, headline left and the ask on its baseline ──── */
.smp .cp-pr-top { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 64px; align-items: end; }
.smp .cp-pr-top .sm-h1 { margin-bottom: 0; }
.smp .cp-pr-ask .sm-lede { margin-top: 0; }

/* ── Pricing: the three plans, in the hero ──────────────────────────
   2026-10-03, after Alwaz found the first version "very light ... no
   focus": raised cards with real depth, and the one plan with a
   published rate set in ink so the eye lands on a price first. */
.smp .cp-plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  list-style: none;
  margin: 56px 0 0;
  padding: 0;
  align-items: stretch;
}
.smp .cp-plan {
  display: flex;
  flex-direction: column;
  padding: 34px 30px 30px;
  border-radius: 18px;
  background: var(--sm-paper);
  box-shadow: 0 34px 70px -34px rgba(22, 19, 15, .32), 0 0 0 1px rgba(22, 19, 15, .07);
  scroll-margin-top: 96px;
}
.smp .cp-plan-name {
  margin: 0;
  font: 500 13px/1.3 'DM Sans', sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sm-accent);
}
.smp .cp-price { margin: 14px 0 0; color: var(--sm-muted); font-size: 16px; }
.smp .cp-price strong {
  font-family: 'Sora', sans-serif;
  font-weight: 400;
  font-size: clamp(2.6rem, 4vw, 3.4rem);
  letter-spacing: -0.04em;
  line-height: 1.05;
  color: var(--sm-ink);
}
.smp .cp-line { margin: 14px 0 0; font-size: 16px; line-height: 1.55; color: var(--sm-body); }
.smp .cp-points { list-style: none; margin: 22px 0 0; padding: 20px 0 0; border-top: 1px solid var(--sm-line); flex: 1; }
.smp .cp-points li { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; font-size: 15.5px; line-height: 1.45; color: var(--sm-ink); }
.smp .cp-points svg { flex: none; margin-top: 2px; color: var(--sm-accent); }
.smp .cp-plan-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 28px; }
.smp .cp-plan-link { font-size: 15px; font-weight: 500; color: var(--sm-accent); text-decoration: none; }
.smp .cp-plan-link:hover { color: var(--sm-accent-hover); text-decoration: underline; text-underline-offset: 3px; }

/* The lead plan: ink card, cream type, the bright amber that is only
   for dark grounds. */
.smp .cp-plan-lead { background: var(--sm-ink); box-shadow: 0 40px 80px -36px rgba(22, 19, 15, .6); }
.smp .cp-plan-lead .cp-plan-name { color: var(--sm-amber); }
.smp .cp-plan-lead .cp-price { color: #CFC8BC; }
.smp .cp-plan-lead .cp-price strong { color: #FFFFFF; }
.smp .cp-plan-lead .cp-line { color: #E2DCD2; }
.smp .cp-plan-lead .cp-points { border-top-color: rgba(255, 255, 255, .14); }
.smp .cp-plan-lead .cp-points li { color: #F5F2ED; }
.smp .cp-plan-lead .cp-points svg { color: var(--sm-amber); }
.smp .cp-plan-lead .sm-split-label { background: #F5F2ED; color: var(--sm-ink); }
.smp .cp-plan-lead .sm-split:hover .sm-split-label { background: #FFFFFF; }
.smp .cp-plan-lead .cp-plan-link { color: #F5F2ED; }
.smp .cp-plan-lead .cp-plan-link:hover { color: var(--sm-amber); }

/* The split pill, a size down inside a card. */
.smp .cp-plan .sm-split-label { height: 48px; padding: 0 22px; font-size: 15px; }
.smp .cp-plan .sm-split-icon { width: 48px; height: 48px; }

/* The reviews block opens this section here; on store management it
   follows the stores and carries a rule and a gap above it. */
.smp #pr-reviews .sm-reviews-head { margin-top: 0; padding-top: 0; border-top: 0; }

/* ── Pricing: quiz and compare, on a LIGHT ground ───────────────────
   It was a dark band; Alwaz found it hard to read straight after the
   white (2026-10-03). The split is ai-page.css's, drawn for dark, so its
   colours are set back to the light ones here. */
.smp #pr-help .ai-ways { border-top-color: var(--sm-line); }
.smp #pr-help .ai-ways > div + div { border-left-color: var(--sm-line); }
.smp #pr-help .ai-ways .sm-h3 { color: var(--sm-ink); }
.smp #pr-help .ai-ways p { color: var(--sm-body); }
.smp #pr-help .ai-way-link,
.smp .cp-compare a { color: var(--sm-accent); }
.smp .cp-compare { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.smp .cp-compare a { font-size: 15.5px; font-weight: 500; text-decoration: none; }
.smp #pr-help .ai-way-link { font-weight: 500; }
.smp .cp-compare a:hover,
.smp #pr-help .ai-way-link:hover { color: var(--sm-accent-hover); text-decoration: underline; text-underline-offset: 3px; }

/* ── About: the facts panel ─────────────────────────────────────────── */
.smp .cp-facts {
  align-self: center;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0;
  padding: 10px 28px;
  border-radius: 14px;
  background: var(--sm-paper);
  box-shadow: 0 40px 80px -40px rgba(22, 19, 15, .35), 0 0 0 1px rgba(22, 19, 15, .08);
}
.smp .cp-facts > div { padding: 18px 0; border-bottom: 1px solid var(--sm-line); min-width: 0; }
.smp .cp-facts > div:nth-child(odd) { padding-right: 18px; }
.smp .cp-facts > div:nth-last-child(-n + 2) { border-bottom: 0; }
.smp .cp-facts dt { font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--sm-muted); }
.smp .cp-facts dd { margin: 6px 0 0; font-family: 'Sora', sans-serif; font-size: 1.12rem; letter-spacing: -0.015em; line-height: 1.3; color: var(--sm-ink); }
.smp .cp-facts a { color: inherit; text-decoration: underline; text-decoration-color: var(--sm-line); text-underline-offset: 4px; }
.smp .cp-facts a:hover { text-decoration-color: var(--sm-accent); }

/* ── About: the story ───────────────────────────────────────────────── */
.smp .cp-story { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr); gap: 64px; align-items: start; }
.smp .cp-story-side { position: sticky; top: 110px; }
.smp .cp-story-side .sm-byline { margin-top: 26px; }
.smp .cp-story-text p { margin: 0 0 18px; font-size: 17.5px; line-height: 1.7; color: var(--sm-body); max-width: 36em; }
.smp .cp-story-text p:first-child { font-size: 19px; color: var(--sm-ink); }

/* ── About: four principles on the dark band ────────────────────────── */
.smp .cp-principles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  border-top: 1px solid var(--sm-dark-line);
}
.smp .cp-principles li { padding: 28px 28px 0 0; min-width: 0; }
.smp .cp-principles li + li { padding-left: 28px; border-left: 1px solid var(--sm-dark-line); }
.smp .cp-principle-n { font-family: 'Sora', sans-serif; font-size: 1.3rem; color: var(--sm-amber); }
.smp .cp-principles .sm-h3 { margin: 14px 0 10px; font-size: 1.15rem; font-weight: 500; color: #F5F2ED; }
.smp .cp-principles p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--sm-dark-body); }

/* ── About: what we commit to ───────────────────────────────────────── */
.smp .cp-commits {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  list-style: none;
  margin: 40px 0 0;
  padding: 28px 0 0;
  border-top: 1px solid var(--sm-line);
}
.smp .cp-commits .cp-commit-n {
  margin: 0;
  font-family: 'Sora', sans-serif;
  font-size: clamp(2.2rem, 3.6vw, 3.2rem);
  letter-spacing: -0.045em;
  line-height: 1;
  color: var(--sm-ink);
}
.smp .cp-commits .sm-h3 { margin: 14px 0 8px; font-size: 1.05rem; font-weight: 600; }
.smp .cp-commits .sm-h3 a { color: inherit; text-decoration: none; }
.smp .cp-commits .sm-h3 a:hover { color: var(--sm-accent); }
.smp .cp-commits p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--sm-body); }

/* ── Contact ────────────────────────────────────────────────────────── */
.smp .cp-contact { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 64px; align-items: start; }
.smp .cp-contact-side { min-width: 0; }
/* Three steps, not the track's usual four. */
@media (min-width: 1025px) {
  .smp #ct-next .sm-track { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.smp .cp-reach { margin: 30px 0 0; border-top: 1px solid var(--sm-line); }
.smp .cp-reach > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--sm-line); }
.smp .cp-reach dt { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--sm-muted); padding-top: 2px; }
.smp .cp-reach dd { margin: 0; font-size: 16px; line-height: 1.5; color: var(--sm-ink); }
.smp .cp-reach a { color: var(--sm-ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--sm-line); }
.smp .cp-reach a:hover { text-decoration-color: var(--sm-accent); }
.smp .cp-social { display: flex; flex-wrap: wrap; gap: 6px 18px; }

.smp .cp-form-card {
  padding: 32px;
  border-radius: 14px;
  background: var(--sm-paper);
  box-shadow: 0 40px 80px -40px rgba(22, 19, 15, .35), 0 0 0 1px rgba(22, 19, 15, .08);
}
.smp .cp-form-title { margin: 0; font-size: 1.3rem; font-weight: 500; }
.smp .cp-form-intro { margin: 6px 0 22px; font-size: 15px; color: var(--sm-muted); }
.smp .cp-form { display: grid; gap: 16px; }
.smp .cp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.smp .cp-field { display: grid; gap: 6px; min-width: 0; }
.smp .cp-field > span { font-size: 14px; font-weight: 500; color: var(--sm-ink); }
.smp .cp-field i { font-style: normal; font-weight: 400; color: var(--sm-muted); }
.smp .cp-field input,
.smp .cp-field select,
.smp .cp-field textarea {
  width: 100%;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid #CFC8BC;
  border-radius: 10px;
  background: #FFFFFF;
  color: var(--sm-ink);
  font: 400 16px/1.4 'DM Sans', sans-serif;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.smp .cp-field textarea { resize: vertical; min-height: 128px; }
.smp .cp-field input::placeholder,
.smp .cp-field textarea::placeholder { color: #8A8378; }
.smp .cp-field input:focus,
.smp .cp-field select:focus,
.smp .cp-field textarea:focus { outline: none; border-color: var(--sm-accent); box-shadow: 0 0 0 3px rgba(180, 83, 9, .18); }
.smp .cp-field [aria-invalid="true"] { border-color: #B91C1C; }
.smp .cp-err { font-style: normal; font-size: 13px; color: #B91C1C; }
.smp .cp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.smp .cp-alert { margin: 0 0 18px; padding: 12px 14px; border-radius: 10px; font-size: 15px; line-height: 1.5; }
.smp .cp-alert-ok { background: #EAF4EC; color: #14532D; }
.smp .cp-alert-err { background: #FBECEC; color: #7F1D1D; }
.smp .cp-alert a { color: inherit; }
.smp .cp-alert[hidden],
.smp .cp-err[hidden] { display: none !important; }
/* The split pill is drawn for an <a>; as a <button> it needs the UA
   chrome taken off. */
.smp .cp-submit { justify-self: start; margin-top: 4px; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; }
.smp .cp-submit:disabled { opacity: .6; cursor: progress; }

/* ── /pricing: the floating panels (quiz, comparisons) ──────────────
   Native <dialog> in the top layer. It is a DOM child of .smp, so the
   --sm-* tokens inherit. Desktop: a centred card; phone: a sheet from the
   bottom. Scroll lives inside the panel, never the page behind it. */
.smp .cp-dialog {
  width: min(760px, calc(100vw - 32px));
  max-height: min(88vh, 880px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: var(--sm-paper);
  color: var(--sm-ink);
  box-shadow: 0 50px 100px -30px rgba(22, 19, 15, .55);
  overflow: hidden;
}
.smp .cp-dialog::backdrop { background: rgba(22, 19, 15, .55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.smp .cp-dialog[open] { animation: cpDialogIn .22s ease; }
@keyframes cpDialogIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
html.cp-dialog-open { overflow: hidden; }
.smp .cp-dialog-inner { position: relative; max-height: inherit; overflow-y: auto; overscroll-behavior: contain; padding: 40px 44px 36px; }
.smp .cp-dialog-close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--sm-cream);
  color: var(--sm-ink);
  cursor: pointer;
}
.smp .cp-dialog-close:hover { background: var(--sm-line); }
.smp .cp-dialog :focus-visible { outline: 2px solid var(--sm-accent); outline-offset: 2px; }

/* The quiz */
.smp .cp-quiz-progress { height: 4px; margin: 0 56px 28px 0; border-radius: 4px; background: var(--sm-cream); overflow: hidden; }
.smp .cp-quiz-progress span { display: block; height: 100%; width: 16%; background: var(--sm-accent); border-radius: inherit; transition: width .25s ease; }
.smp .cp-quiz-step { margin: 0; padding: 0; border: 0; min-width: 0; }
.smp .cp-quiz-step[hidden],
.smp .cp-quiz-result[hidden],
.smp .cp-quiz-mail[hidden] { display: none !important; }
.smp .cp-quiz-step legend { display: block; padding: 0; margin: 0 0 22px; }
.smp .cp-quiz-count { display: block; margin: 0 0 10px; font: 500 13px/1.3 'DM Sans', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--sm-accent); }
.smp .cp-quiz-q { display: block; font: 400 clamp(1.5rem, 3vw, 2rem)/1.2 'Sora', sans-serif; letter-spacing: -0.03em; color: var(--sm-ink); }
.smp .cp-quiz-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.smp .cp-quiz-option {
  min-height: 64px;
  padding: 16px 18px;
  border: 1px solid #D8D1C5;
  border-radius: 14px;
  background: #FFFFFF;
  color: var(--sm-ink);
  font: 500 16px/1.35 'DM Sans', sans-serif;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.smp .cp-quiz-option:hover { border-color: var(--sm-ink); transform: translateY(-1px); }
.smp .cp-quiz-option[aria-pressed="true"] { border-color: var(--sm-ink); background: var(--sm-ink); color: #FFFFFF; }
.smp .cp-quiz-back { margin-top: 20px; padding: 10px 0; border: 0; background: none; color: var(--sm-muted); font: 500 15px 'DM Sans', sans-serif; cursor: pointer; }
.smp .cp-quiz-back:hover { color: var(--sm-ink); }
.smp .cp-quiz-plan { margin: 0; font: 400 clamp(1.9rem, 3.6vw, 2.5rem)/1.1 'Sora', sans-serif; letter-spacing: -0.035em; outline: none; }
.smp .cp-quiz-why { margin: 14px 0 0; font-size: 16px; line-height: 1.6; color: var(--sm-body); max-width: 36em; }
.smp .cp-quiz-result .cp-points { flex: none; }
.smp .cp-quiz-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 26px; }
.smp .cp-quiz-again { padding: 10px 0; border: 0; background: none; color: var(--sm-ink); font: 500 15px 'DM Sans', sans-serif; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.smp .cp-quiz-mail { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--sm-line); }
.smp .cp-quiz-mail label { display: block; margin-bottom: 10px; font-size: 15px; font-weight: 500; }
.smp .cp-quiz-mail-row { display: flex; gap: 10px; }
.smp .cp-quiz-mail input {
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid #CFC8BC;
  border-radius: 10px;
  font: 400 16px/1.4 'DM Sans', sans-serif;
  color: var(--sm-ink);
}
.smp .cp-quiz-mail input:focus { outline: none; border-color: var(--sm-accent); box-shadow: 0 0 0 3px rgba(180, 83, 9, .18); }
.smp .cp-quiz-mail button {
  flex: none;
  min-height: 46px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: var(--sm-ink);
  color: #FFFFFF;
  font: 600 15px 'DM Sans', sans-serif;
  cursor: pointer;
}
.smp .cp-quiz-mail button:disabled { opacity: .6; }
.smp .cp-quiz-mail-note { min-height: 1.4em; margin: 10px 0 0; font-size: 14px; color: var(--sm-muted); }

/* A comparison */
.smp .cp-cmp-h { margin: 0 56px 0 0; font: 400 clamp(1.6rem, 3.2vw, 2.2rem)/1.15 'Sora', sans-serif; letter-spacing: -0.03em; }
.smp .cp-cmp-verdict { margin: 16px 0 0; font-size: 16.5px; line-height: 1.6; color: var(--sm-body); }
.smp .cp-cmp-table { margin-top: 26px; border-top: 1px solid var(--sm-line); }
.smp .cp-cmp-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) minmax(0, 1fr); gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--sm-line); font-size: 14.5px; line-height: 1.5; }
.smp .cp-cmp-head { padding: 10px 0; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--sm-muted); }
.smp .cp-cmp-head span:last-child { color: var(--sm-accent); }
.smp .cp-cmp-dim { font-weight: 600; color: var(--sm-ink); }
.smp .cp-cmp-them { color: var(--sm-body); }
.smp .cp-cmp-us { color: var(--sm-ink); }
.smp .cp-cmp-row em { display: none; }

/* ── Weight pass (2026-10-03, Alwaz: "way too light and thin") ───────
   Cream panel instead of white, heavier type, firmer borders, solid
   white answer tiles, and the comparison table on a raised white panel
   with an ink header row and our column tinted, so it reads first. */
.smp .cp-dialog { background: var(--sm-cream); }
.smp .cp-dialog-close { background: #FFFFFF; box-shadow: 0 0 0 1px rgba(22, 19, 15, .1); }
.smp .cp-dialog-close:hover { background: var(--sm-ink); color: #FFFFFF; }
.smp .cp-quiz-progress { height: 6px; background: var(--sm-line); }
.smp .cp-quiz-count { font-weight: 600; }
.smp .cp-quiz-q,
.smp .cp-quiz-plan,
.smp .cp-cmp-h { font-weight: 500; letter-spacing: -0.035em; }
.smp .cp-quiz-option {
  min-height: 72px;
  border: 1.5px solid #CFC8BC;
  background: #FFFFFF;
  font-size: 17px;
  font-weight: 600;
  box-shadow: 0 2px 0 rgba(22, 19, 15, .04);
}
.smp .cp-quiz-option:hover { border-color: var(--sm-ink); box-shadow: 0 10px 24px -14px rgba(22, 19, 15, .45); }
.smp .cp-quiz-back,
.smp .cp-quiz-again { color: var(--sm-ink); font-weight: 600; }
.smp .cp-quiz-why { color: var(--sm-ink); font-size: 16.5px; }
.smp .cp-dialog .cp-points { border-top-color: #D8D1C5; }
.smp .cp-dialog .cp-points li { font-weight: 500; }
.smp .cp-quiz-mail { border-top-color: #D8D1C5; }
.smp .cp-quiz-mail label { font-weight: 600; }
.smp .cp-quiz-mail input { background: #FFFFFF; border: 1.5px solid #CFC8BC; }

.smp .cp-cmp-verdict { color: var(--sm-ink); font-size: 17px; }
.smp .cp-cmp-table {
  margin-top: 26px;
  border: 0;
  border-radius: 14px;
  background: #FFFFFF;
  box-shadow: 0 24px 50px -30px rgba(22, 19, 15, .4), 0 0 0 1px rgba(22, 19, 15, .08);
  overflow: hidden;
}
.smp .cp-cmp-row { grid-template-columns: 150px minmax(0, 1fr) minmax(0, 1fr); gap: 0; padding: 0; border-bottom: 1px solid #E2DDD4; font-size: 15.5px; line-height: 1.55; }
.smp .cp-cmp-row:last-child { border-bottom: 0; }
.smp .cp-cmp-row > span { padding: 16px 18px; }
.smp .cp-cmp-head { background: var(--sm-ink); color: #F5F2ED; font-size: 13px; font-weight: 600; letter-spacing: .06em; }
.smp .cp-cmp-head > span { padding: 12px 18px; }
.smp .cp-cmp-head span:last-child { color: var(--sm-amber); background: transparent; }
.smp .cp-cmp-dim { font-weight: 700; color: var(--sm-ink); }
.smp .cp-cmp-them { color: #3D3832; }
.smp .cp-cmp-us { background: #FBF1E2; color: var(--sm-ink); font-weight: 500; }

@media (prefers-reduced-motion: reduce) {
  .smp .cp-dialog[open] { animation: none; }
  .smp .cp-quiz-progress span { transition: none; }
}

@media (max-width: 768px) {
  .smp .cp-dialog {
    width: 100vw;
    max-width: 100vw;
    max-height: 92vh;
    margin: auto 0 0;
    border-radius: 20px 20px 0 0;
  }
  .smp .cp-dialog-inner { padding: 26px 20px calc(24px + env(safe-area-inset-bottom, 0px)); }
  .smp .cp-dialog-close { top: 10px; right: 10px; }
  .smp .cp-quiz-progress { margin-bottom: 22px; }
  .smp .cp-quiz-options { grid-template-columns: 1fr; gap: 10px; }
  .smp .cp-quiz-option { min-height: 54px; padding: 13px 16px; }
  .smp .cp-quiz-mail-row { flex-direction: column; }
  .smp .cp-cmp-head { display: none; }
  .smp .cp-cmp-row { grid-template-columns: 1fr; gap: 0; }
  .smp .cp-cmp-row > span { padding: 10px 16px; }
  .smp .cp-cmp-dim { padding-top: 14px !important; padding-bottom: 4px !important; }
  .smp .cp-quiz-option { min-height: 60px; font-size: 16px; }
  .smp .cp-cmp-row em { display: block; font-style: normal; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--sm-muted); }
  .smp .cp-cmp-us em { color: var(--sm-accent); }
  /* home.css's blanket phone h2 size, again. */
  .smp .cp-quiz-plan { font-size: 1.9rem !important; }
  .smp .cp-cmp-h { font-size: 1.5rem !important; }
}

@media (max-width: 1024px) {
  .smp .cp-plans { grid-template-columns: 1fr; max-width: 620px; }
  .smp .cp-pr-top { grid-template-columns: 1fr; gap: 24px; }
  .smp .cp-story,
  .smp .cp-contact { grid-template-columns: 1fr; gap: 36px; }
  .smp .cp-story-side { position: static; }
  .smp .cp-principles,
  .smp .cp-commits { grid-template-columns: 1fr 1fr; }
  .smp .cp-principles li:nth-child(3) { padding-left: 0; border-left: 0; }
  .smp .cp-facts { max-width: 620px; }
}

/* ── Phone ─────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .smp #pr-hero,
  .smp #ab-hero,
  .smp #ct-hero { padding-top: 6.5rem !important; padding-bottom: 2.25rem !important; }
  /* The sticky bar is the phone's call to action, as on every rebuilt page. */
  .smp #ab-hero .sm-split { display: none; }
  .smp #ab-hero .sm-cta { margin-top: 18px; }
  .smp #pr-hero { padding-bottom: 2.75rem !important; }
  .smp .cp-pr-top { gap: 14px; }
  /* The sticky bar carries the booking button on a phone; each card
     keeps its own link. */
  .smp .cp-plan .sm-split { display: none; }
  .smp .cp-plan-foot { margin-top: 16px; }
  .smp .cp-price strong { font-size: 2.3rem; }
  /* home.css sets every h2 on a phone to clamp(1.9rem, ...) !important;
     the plan name is an h2 for the outline, set as a small label. */
  .smp .cp-plan-name { font-size: 13px !important; }

  /* Plans and principles become the site's snap row: one card, the next
     peeking 44px. */
  .smp .cp-plans,
  .smp .cp-principles {
    display: flex;
    gap: 12px;
    max-width: none;
    margin: 22px -20px 0;
    padding: 0 20px 30px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 20px;
    scrollbar-width: none;
    border-top: 0;
  }
  .smp .cp-plans::-webkit-scrollbar,
  .smp .cp-principles::-webkit-scrollbar { display: none; }
  .smp .cp-plan,
  .smp .cp-principles li { flex: 0 0 calc(100vw - 60px); scroll-snap-align: start; }
  .smp .cp-plan { padding: 24px 20px; }
  .smp .cp-points { margin-top: 14px; padding-top: 12px; }
  .smp .cp-points li { padding: 3px 0; font-size: 14.5px; }
  .smp .cp-principles li,
  .smp .cp-principles li + li { padding: 18px; border: 1px solid var(--sm-dark-line); border-radius: 12px; }
  .smp .cp-principles .sm-h3 { margin-top: 8px; }

  .smp .ai-ways .cp-compare { margin-top: 8px; }

  .smp .cp-facts { padding: 4px 16px; }
  .smp .cp-facts > div { padding: 12px 0; }
  .smp .cp-facts dd { font-size: 1rem; }
  .smp .cp-facts > div:nth-child(n + 5) { display: none; }
  .smp .cp-facts > div:nth-child(3),
  .smp .cp-facts > div:nth-child(4) { border-bottom: 0; }

  .smp .cp-story-text p { font-size: 16px; line-height: 1.65; margin-bottom: 14px; }
  .smp .cp-story-text p:first-child { font-size: 17px; }
  .smp .cp-story-side .sm-byline { margin-top: 14px; }

  .smp .cp-commits { grid-template-columns: 1fr 1fr; gap: 20px 16px; margin-top: 18px; padding-top: 18px; }
  .smp .cp-commits .cp-commit-n { font-size: 1.9rem; }
  .smp .cp-commits .sm-h3 { margin: 8px 0 4px; font-size: .98rem; }
  .smp .cp-commits p { font-size: 13.5px; line-height: 1.5; }

  .smp .cp-contact { gap: 24px; }
  .smp .cp-reach { margin-top: 18px; }
  .smp .cp-reach > div { grid-template-columns: 1fr; gap: 2px; padding: 10px 0; }
  .smp .cp-form-card { padding: 22px 18px; margin: 0 -4px; }
  .smp .cp-row { grid-template-columns: 1fr; }
}