/* ============================================================
   /crossing-readiness-score — Landing page styles
   Inherits site-wide tokens, header, footer styling from
   /briefings/_assets/briefing.css and Tailwind config.
   This file contains ONLY page-specific styles.
   ============================================================ */

/* ---- Container ---- */
.crs-container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}
@media (min-width: 1024px) {
  .crs-container { padding: 0 40px; }
}

/* ---- Hero ---- */
.crs-hero {
  padding: 96px 0 80px;
  border-bottom: 1px solid var(--soft-divider);
}
.crs-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--arc);
  text-transform: uppercase;
  margin: 0 0 28px;
}
.crs-eyebrow__rule {
  display: inline-block;
  width: 60px;
  height: 1px;
  background: var(--arc);
  flex-shrink: 0;
}
.crs-hero__title {
  font-family: 'Geist', ui-sans-serif, system-ui, sans-serif;
  font-size: 56px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 32px;
  max-width: 900px;
}
.crs-arc-dot { color: var(--arc); }

.crs-hero__lede {
  font-family: 'Geist', ui-sans-serif, system-ui, sans-serif;
  font-size: 20px;
  line-height: 1.55;
  color: rgba(21,23,27,0.78);
  max-width: 680px;
  margin: 0 0 48px;
}

.crs-hero__cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.crs-cta__meta {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: rgba(21,23,27,0.55);
  margin: 0;
}

/* ---- Primary CTA button ---- */
.crs-cta-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  color: #ffffff;
  font: 500 15px/1 'Geist', sans-serif;
  letter-spacing: 0.01em;
  padding: 18px 32px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 150ms ease, transform 150ms ease;
}
.crs-cta-primary:hover {
  background: var(--arc);
  transform: translateY(-1px);
}
.crs-cta-primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(91,108,242,0.4);
}

/* ---- Standard section ---- */
.crs-section {
  padding: 96px 0;
  border-bottom: 1px solid var(--soft-divider);
}
.crs-section__eyebrow {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--arc);
  text-transform: uppercase;
  margin: 0 0 24px;
}
.crs-section__title {
  font-family: 'Geist', ui-sans-serif, system-ui, sans-serif;
  font-size: 48px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 56px;
  max-width: 800px;
}
.crs-section__title em {
  font-style: italic;
  color: var(--arc);
  font-weight: 400;
}

/* ---- Three-column grid ---- */
.crs-three-col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
}
@media (max-width: 1023px) {
  .crs-three-col { grid-template-columns: 1fr; gap: 40px; }
}

.crs-col {
  border-top: 0.5px solid rgba(21,23,27,0.15);
  border-bottom: 0.5px solid rgba(21,23,27,0.15);
  padding: 1rem 0;
}
.crs-col__head {
  font-family: 'Geist', ui-sans-serif, system-ui, sans-serif;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 16px;
}
.crs-col__body {
  font-family: 'Geist', ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(21,23,27,0.72);
  margin: 0;
}

/* ---- CTA repeat section ---- */
.crs-cta-section {
  padding: 96px 0;
  text-align: center;
}
.crs-cta-section__title {
  font-family: 'Geist', ui-sans-serif, system-ui, sans-serif;
  font-size: 48px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 16px;
}
.crs-cta-section__lede {
  font-family: 'Geist', ui-sans-serif, system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.55;
  color: rgba(21,23,27,0.65);
  margin: 0 0 40px;
}

/* ---- Responsive ---- */
@media (max-width: 1023px) {
  .crs-hero { padding: 72px 0 64px; }
  .crs-hero__title { font-size: 56px; }
  .crs-hero__lede { font-size: 18px; }
  .crs-section { padding: 72px 0; }
  .crs-section__title { font-size: 36px; }
  .crs-cta-section { padding: 72px 0; }
  .crs-cta-section__title { font-size: 36px; }
}

@media (max-width: 767px) {
  .crs-hero { padding: 56px 0 48px; }
  .crs-hero__title { font-size: 36px; line-height: 1.15; }
  .crs-hero__lede { font-size: 17px; margin-bottom: 36px; }
  .crs-section { padding: 56px 0; }
  .crs-section__title { font-size: 32px; }
  .crs-cta-section { padding: 56px 0; }
  .crs-cta-section__title { font-size: 32px; }
}

/* ---- Lede paragraph beneath an H2 (sections with intro copy) ---- */
.crs-section__title--lede { margin-bottom: 20px; }
.crs-lede {
  font-family: 'Geist', ui-sans-serif, system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(21,23,27,0.72);
  max-width: 680px;
  margin: 0 0 48px;
}

/* ---- "How it works" — 2x2 mono-row grid ---- */
.crs-howgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 48px;
  border-bottom: 0.5px solid var(--soft-divider);
}
.crs-howrow {
  border-top: 0.5px solid var(--soft-divider);
  padding: 1rem 0;
}
.crs-howrow__label {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--arc);
  margin: 0 0 6px;
}
.crs-howrow__text {
  font-family: 'Geist', ui-sans-serif, system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
}
@media (max-width: 767px) {
  .crs-howgrid { grid-template-columns: 1fr; }
}

/* ---- "After the Score" — stacked rows ---- */
.crs-dolist {
  border-bottom: 0.5px solid var(--soft-divider);
}
.crs-dorow {
  border-top: 0.5px solid var(--soft-divider);
  padding: 1.25rem 0;
}
.crs-dorow__label {
  font-family: 'Geist', ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 6px;
}
.crs-dorow__text {
  font-family: 'Geist', ui-sans-serif, system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(21,23,27,0.72);
  max-width: 680px;
  margin: 0;
}

/* ---- Section 3 — Ink (dark) treatment ---- */
.crs-section--ink {
  background: var(--ink);
  color: #FAF7F2;
  border-bottom: none;
}
.crs-section--ink .crs-section__title { color: #FAF7F2; }
.crs-section--ink .crs-lede { color: rgba(250,247,242,0.72); }
.crs-section--ink .crs-howrow { border-top-color: rgba(250,247,242,0.16); }
.crs-section--ink .crs-howgrid { border-bottom-color: rgba(250,247,242,0.16); }
.crs-section--ink .crs-howrow__text { color: #FAF7F2; }

/* ── Section-boundary breathing room (Bone/Ink colour changes) ───
   96px each side of every colour-change boundary. Applied at desktop;
   mobile keeps each section's scaled padding. */
@media (min-width: 768px) {
  .crs-bpad-t { padding-top: 96px; }
  .crs-bpad-b { padding-bottom: 96px; }
}