/* Protagonist Ink — The Protagonist Sprint (/services/sprint/).
   Loads after ../../styles.css and ../services.css, which supply the tokens,
   type, header, footer, buttons, .btn--paper, the .svc-faq disclosures and the
   .svc-invite close. This file adds only the page's own compositions, following
   the "Sprint Sales Page · Oct 22" canvas: Opening → We get it → What you get →
   How the Sprint works → Price band (indigo) → Questions → Inquiry (charcoal). */

/* ---------- Shared pieces ---------- */
/* Eyebrows are red on paper (4.8:1); on the indigo and charcoal bands they
   switch to paper-muted, since red text never sits on a dark field. */
.spr-eyebrow { margin-bottom: var(--space-4); color: var(--red); }
.spr-price__eyebrow { margin-bottom: var(--space-4); color: var(--paper-muted); }
.spr-lede { font-size: clamp(1.3125rem, 2vw, 1.5625rem); line-height: 1.4; text-wrap: pretty; }
.spr-body { display: flex; flex-direction: column; gap: var(--space-4); font-size: 1.1875rem; line-height: 1.55; }
.spr-note { font-size: 0.875rem; line-height: 1.45; color: var(--graphite); }
/* Section headlines break evenly, so none ends on a lone word. */
.statement { text-wrap: balance; }
.dark .spr-note { color: var(--paper-muted); }

/* Sections share one rhythm: no rules between them, just space. */
.spr-recognition, .spr-included, .spr-process { padding-bottom: var(--space-9); }

/* ---------- 1. Opening ----------
   The page's one oversized headline, broken at the thought on wide screens.
   Lede left; description, button and reply note right. */
.spr-opening { padding-block: var(--space-7) var(--space-9); }
.spr-opening .spr-eyebrow { margin-bottom: var(--space-5); }
.spr-opening__title { font-size: clamp(3rem, 7.5vw, 6.75rem); line-height: 0.98; letter-spacing: -0.02em; }
.spr-opening__grid { margin-top: clamp(48px, 5vw, 72px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--space-5); align-items: start; }
.spr-opening__grid .spr-lede { grid-column: 1 / span 6; max-width: 31ch; }
.spr-opening__action { grid-column: 8 / span 5; max-width: 30rem; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); font-size: 1.1875rem; line-height: 1.55; }
.spr-opening__action > p:first-child { margin-bottom: var(--space-3); }

/* ---------- 2. We get it ----------
   Photograph on the left (columns 1–7), copy on the right (8–12). The copy
   comes first in the source so phones read heading before picture. */
.spr-recognition { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--space-6); align-items: center; }
.spr-recognition__copy { grid-column: 8 / span 5; grid-row: 1; }
.spr-recognition__copy .statement { margin-bottom: var(--space-5); }
.spr-recognition__photo { grid-column: 1 / span 7; grid-row: 1; margin: 0; aspect-ratio: 3 / 2; }
.spr-recognition__photo img { object-position: 55% 40%; }

/* ---------- 3. What you get ----------
   Two deliverables at a larger size, the two inclusions quieter beneath. */
.spr-included__title { max-width: 16ch; }
.spr-included__list { margin: var(--space-7) 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-7) var(--space-8); }
.spr-item dt { margin-bottom: 10px; font-size: 1.3125rem; font-weight: 500; line-height: 1.3; }
.spr-item dd { margin: 0; max-width: 54ch; font-size: 1.0625rem; line-height: 1.55; }
.spr-item--major dt { margin-bottom: var(--space-3); font-size: clamp(1.5rem, 2.2vw, 1.875rem); line-height: 1.2; letter-spacing: -0.015em; }
.spr-item--major dd { font-size: 1.1875rem; }

/* ---------- 4. How the Sprint works ---------- */
.spr-process { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--space-5); align-items: start; }
.spr-process__head { grid-column: 1 / span 5; }
.spr-process__body { grid-column: 7 / span 6; max-width: 62ch; padding-top: 42px; }

/* ---------- 5. Price band ----------
   Deep blue rather than the .dark charcoal, so the price doesn't run into the
   charcoal inquiry two sections later. Paper type only (12.9:1). */
.spr-price { background: var(--indigo); padding-block: clamp(80px, 9vw, 136px); }
.spr-price__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--space-6); align-items: end; }
.spr-price__head { grid-column: 1 / span 6; }
.spr-price__amount { font-family: var(--font-serif); font-weight: 400; font-size: clamp(4.5rem, 7.5vw, 6.75rem); line-height: 0.98; letter-spacing: -0.02em; }
.spr-price__head .spr-lede { margin-top: 20px; }
.spr-price__action { grid-column: 8 / span 5; max-width: 30rem; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); font-size: 1.1875rem; line-height: 1.55; }
.spr-price__action > p:first-child { margin-bottom: var(--space-3); }

/* ---------- 6. Questions ----------
   The Services disclosures; answers that end in a link keep it inside the
   answer's padding. */
.spr-faq { padding-block: var(--space-9); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--space-6); align-items: start; }
.spr-faq__head { grid-column: 1 / span 4; }
.spr-faq__head .statement { max-width: 12ch; }
.spr-faq__list { grid-column: 5 / span 8; }
.spr-faq__answer { display: flex; flex-direction: column; gap: var(--space-2); padding: 0 3rem var(--space-5) 0; }
.svc-faq__item .spr-faq__answer p { padding: 0; }

/* ---------- 7. Inquiry ---------- */
.spr-invite__lede { max-width: 34em; font-size: clamp(1.25rem, 1.8vw, 1.375rem); line-height: 1.45; }

/* ---------- Tablet ---------- */
@media (max-width: 1099px) {
  .spr-opening__grid .spr-lede { grid-column: 1 / span 6; }
  .spr-opening__action { grid-column: 7 / span 6; }
  .spr-recognition__copy { grid-column: 7 / span 6; }
  .spr-recognition__photo { grid-column: 1 / span 6; }
  .spr-included__list { column-gap: var(--space-7); }
  .spr-process__head { grid-column: 1 / span 4; }
  .spr-process__body { grid-column: 6 / span 7; }
  .spr-price__head { grid-column: 1 / span 6; }
  .spr-price__action { grid-column: 7 / span 6; }
  .spr-faq__head { grid-column: 1 / -1; }
  .spr-faq__list { grid-column: 1 / -1; }
}

/* ---------- Phones and small tablets: one column ----------
   Copy before pictures; buttons go full width; nothing depends on hover. */
@media (max-width: 899px) {
  .spr-br { display: none; }
  .spr-opening { padding-block: var(--space-5) var(--space-8); }
  .spr-opening .spr-eyebrow { margin-bottom: var(--space-4); }
  .spr-opening__title { font-size: clamp(2.75rem, 12.5vw, 4rem); line-height: 1; text-wrap: balance; }
  .spr-opening__grid,
  .spr-recognition,
  .spr-process,
  .spr-price__grid,
  .spr-faq { grid-template-columns: minmax(0, 1fr); }
  .spr-opening__grid > *,
  .spr-recognition > *,
  .spr-process > *,
  .spr-price__grid > *,
  .spr-faq > * { grid-column: 1 !important; grid-row: auto !important; }
  .spr-opening__action, .spr-price__action { align-items: stretch; max-width: none; }
  .spr-body, .spr-opening__action, .spr-price__action { font-size: 1.125rem; }
  /* One column runs wide on small tablets; hold running copy to a reading
     measure (about 69 characters; Satoshi's wide zero makes ch run long)
     while the buttons keep the full width. */
  .spr-body > p, .spr-opening__action > p, .spr-price__action > p, .spr-invite__lede { max-width: 32em; }

  .spr-recognition, .spr-included, .spr-process { padding-bottom: var(--space-8); }
  .spr-included__list { grid-template-columns: minmax(0, 1fr); margin-top: var(--space-6); row-gap: var(--space-6); }
  .spr-item--major dd { font-size: 1.125rem; }
  .spr-process__body { padding-top: 0; }
  .spr-price { padding-block: var(--space-8); }
  .spr-faq { padding-block: var(--space-8); row-gap: var(--space-5); }
  .spr-faq__answer { padding-right: 0; }
  .spr-invite__lede { font-size: 1.25rem; }
}

/* ---------- Phones ----------
   The photograph switches to its 4:5 crop (founder and listener), so the
   gesture still reads at phone width. */
@media (max-width: 599px) {
  .spr-recognition__photo { aspect-ratio: 4 / 5; }
  .spr-recognition__photo img { object-position: 50% 50%; }
}