.cs-header {
  padding-top: var(--sp-24);
  padding-bottom: var(--sp-16);
  border-bottom: 1px solid var(--color-border);
}

.cs-header__back {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-body-sm);
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: var(--sp-12);
  transition: color 0.2s ease;
}

.cs-header__back:hover {
  color: var(--accent);
}

.cs-header__eyebrow {
  margin-bottom: var(--sp-4);
}

.cs-header__title {
  font-size: var(--fs-display);
  max-width: 18ch;
  margin-bottom: var(--sp-6);
}

.cs-header__summary {
  font-size: var(--fs-body-lg);
  color: var(--color-text-secondary);
  max-width: 62ch;
  margin-bottom: var(--sp-12);
}

.cs-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-12);
}

.cs-meta__item dt {
  font-size: var(--fs-footnote);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin-bottom: var(--sp-1);
}

.cs-meta__item dd {
  margin: 0;
  font-size: var(--fs-body-sm);
  color: var(--color-text-primary);
  max-width: 32ch;
}

.cs-note {
  margin-top: var(--sp-8);
  padding: var(--sp-4) var(--sp-6);
  border-left: 3px solid var(--accent);
  background: var(--accent-subtle);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: var(--fs-body-sm);
  color: var(--color-text-secondary);
  max-width: 62ch;
}

.cs-section {
  padding-top: var(--sp-16);
  padding-bottom: var(--sp-16);
  border-bottom: 1px solid var(--color-border);
}

.cs-section:last-of-type {
  border-bottom: none;
}

.cs-section--image-end,
.cs-header--image-end {
  padding-bottom: 0;
}

.cs-hero-strip {
  display: block;
  width: 100%;
  height: auto;
  margin-top: var(--sp-12);
}

.cs-section__label {
  font-size: var(--fs-footnote);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--sp-4);
}

.cs-section__heading {
  font-size: var(--fs-h1);
  max-width: 24ch;
  margin-bottom: var(--sp-6);
}

.cs-section__body {
  font-size: var(--fs-body-lg);
  color: var(--color-text-secondary);
  max-width: 68ch;
}

.cs-section__body + .cs-section__body {
  margin-top: var(--sp-4);
}

.cs-figure + .cs-section__body {
  margin-top: var(--sp-8);
}

.cs-section__list {
  font-size: var(--fs-body-lg);
  color: var(--color-text-secondary);
  line-height: 1.7;
  max-width: 68ch;
  margin: var(--sp-4) 0;
  padding-left: 1.2em;
}

.cs-section__list li {
  margin-bottom: var(--sp-2);
}

.cs-section__list li::marker {
  color: var(--accent);
}

/* Beats the list's own 16px bottom margin, which would otherwise collapse
   with this one and leave the paragraph reading as another bullet */
.cs-section__list + .cs-section__body {
  margin-top: var(--sp-6);
}

.cs-figure {
  margin: var(--sp-8) 0 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-card);
}

.cs-figure--tight {
  margin-top: var(--sp-4);
}

.cs-figure img,
.cs-figure video {
  width: 100%;
  display: block;
}

.cs-figure__caption {
  padding: var(--sp-4) var(--sp-6);
  font-size: var(--fs-body-sm);
  color: var(--color-text-secondary);
  border-top: 1px solid var(--color-border);
}

/* Device frame, the same accent outline used on the phones in the hero strip.
   Sits directly on the page, no figure card around it. */
.cs-device {
  width: 100%;
  max-width: 320px;
  border: 3px solid var(--accent);
  border-radius: 36px;
  overflow: hidden;
  background: var(--color-card);
  box-shadow: var(--shadow-md);
}

/* Recordings already include the notch and home indicator, so the frame is outline only */
.cs-device__media {
  display: block;
  width: 100%;
  height: auto;
}

.cs-placeholder {
  margin-top: var(--sp-8);
  aspect-ratio: 16 / 9;
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--sp-2);
  color: var(--color-text-tertiary);
  background: var(--color-surface-alt);
  text-align: center;
  padding: var(--sp-6);
}

.cs-placeholder strong {
  color: var(--color-text-secondary);
  font-size: var(--fs-body-sm);
  font-weight: 600;
}

.cs-placeholder span {
  font-size: var(--fs-footnote);
  max-width: 40ch;
}

.cs-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-8);
}

.cs-stack {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}

.cs-outcome-list {
  list-style: none;
  margin: var(--sp-6) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-6);
}

.cs-outcome-list li {
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--color-border);
  font-size: var(--fs-body-sm);
  color: var(--color-text-secondary);
}

.cs-outcome-list li strong {
  color: var(--color-text-primary);
}

.cs-outcome-subheading {
  font-size: var(--fs-h4);
  margin: var(--sp-12) 0 0;
}

.cs-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--sp-6);
  margin: var(--sp-6) 0 var(--sp-8);
}

.cs-stat-tile {
  padding: var(--sp-6) var(--sp-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-card);
}

.cs-stat-tile__value {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
  color: var(--accent);
}

.cs-stat-tile__value svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

.cs-stat-tile__label {
  display: block;
  margin-top: var(--sp-2);
  font-size: var(--fs-body-sm);
  color: var(--color-text-secondary);
}

/* Modules carry their own separation, from each other and from the section intro
   above them, so a module's heading never has to supply it */
.cs-module + .cs-module,
.cs-section__body + .cs-module {
  margin-top: var(--sp-24);
}

.cs-module__title {
  font-size: var(--fs-h2);
  margin: 0 0 var(--sp-3);
}

/* Split module: copy on one side, a phone-sized asset on the other, for assets
   too narrow to carry the full column on their own. The copy track is capped
   rather than flexible so the phone sits next to the text instead of being
   pushed out to the far margin. Leftover width collects at the outer edge,
   which keeps both variants anchored to the left margin. */
.cs-module--split {
  display: grid;
  grid-template-columns: minmax(0, 520px) 320px;
  gap: var(--sp-16);
  align-items: center;
}

/* Alternating rhythm for consecutive split modules: phone left, copy right.
   DOM order stays copy-first so the heading still leads for screen readers
   and in the stacked mobile layout; only the desktop placement flips. */
.cs-module--split-reverse {
  grid-template-columns: 320px minmax(0, 520px);
}

.cs-module--split-reverse .cs-device {
  order: -1;
}

.cs-module__copy > *:first-child {
  margin-top: 0;
}

.cs-link {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cs-link:hover {
  color: var(--accent-strong);
}

.cs-footer-nav {
  padding-top: var(--sp-16);
  padding-bottom: var(--sp-32);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cs-footer-nav a {
  font-size: var(--fs-body-sm);
  font-weight: 600;
  color: var(--color-text-secondary);
  transition: color 0.2s ease;
}

.cs-footer-nav a:hover {
  color: var(--accent);
}

/* Flagship-only interactive module */
.cs-live {
  margin-top: var(--sp-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-card);
}

.cs-live__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-6);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-alt);
}

.cs-live__toolbar span {
  font-size: var(--fs-footnote);
  font-weight: 600;
  color: var(--color-text-secondary);
}

.cs-live__frame {
  padding: var(--sp-8);
}

@media (max-width: 900px) {
  .cs-grid-2,
  .cs-outcome-list {
    grid-template-columns: 1fr;
  }

  .cs-module--split,
  .cs-module--split-reverse {
    grid-template-columns: 1fr;
    gap: var(--sp-16);
  }

  .cs-module--split .cs-device {
    margin-inline: auto;
    order: 0;
  }
}

@media (max-width: 640px) {
  .cs-header {
    padding-top: var(--sp-16);
    padding-bottom: var(--sp-12);
  }

  .cs-header--image-end {
    padding-bottom: 0;
  }
}