/* why-wait — BUILD-SECTION (developer), 2026-09-15. Source: brief/why-wait.md + cache/why-wait.desktop.json.
   Desktop 3271:515 DRAWN (image | text split, 576 / 89 / 555). Mobile DERIVED per BA-1 from care-journey 3271:767.
   Bands: 0–767 mobile (anchor 390) · 768–1023 pseudo-tablet (row split, mobile design per half, D-6) · 1024+ desktop (1619).
   Every rule is scoped under .why-wait (GLOBAL-SCOPE LOCK). */

/* ---------------------------------------------------------------------------
   SECTION TOKENS — moved out of the page's tokens.css.

   Read by THIS block and nothing else on the site, so they belong here rather
   than in a site-wide :root. In Shopify a section can be dropped onto any
   template from the theme editor, so a section that reads a token from a
   page-level scope breaks the moment it is moved; scoped to the block's own
   class, it travels with it.

   EVERY band is carried verbatim from the old tokens.css, in that file's own
   order — so the cascade is unchanged whether the page was written
   desktop-first (base + max-width overrides) or mobile-first (base +
   min-width overrides). Verified by computed-style diff at
   375/768/1024/1440/1920.
--------------------------------------------------------------------------- */

.why-wait {
  --font-serif:     'Roboto Serif', Georgia, 'Times New Roman', serif;
  --font-mono:      'Roboto Mono', ui-monospace, 'Courier New', monospace;
  --c-eyebrow:      #b3aeae;
  --radius-md-m:    16px;
  --radius-card-d:  24px;
  --shadow-media-m: 0 16px 48px rgba(0,0,0,.11);
  --text-h2:        clamp(18px, calc(22px + (var(--max-vw) - 390px) * 0.015), 43px);
  --lh-h2:          1.2;
  --ls-h2:          -0.025em;
  --text-eyebrow:   clamp(8px, calc(10px + (var(--max-vw) - 390px) * 0.015), 20px);
  --lh-eyebrow:     1.5;
  --ls-eyebrow:     0.2em;
  --ls-lead:        0;
  --text-subnote:   clamp(8px, calc(10px + (var(--max-vw) - 390px) * 0.015), 20px);
  --lh-subnote:     1.5;
  --ls-subnote:     0;
  --section-pad-y:  clamp(26px, calc(32px + (var(--max-vw) - 390px) * 0.015), 63px);
}

@media (min-width: 768px) and (max-width: 1023px) {
  .why-wait {
    --text-h2:       clamp(22px, calc(22px + (var(--max-vw) - 768px) * 0.025), 46.425px);
    --text-eyebrow:  clamp(10px, calc(10px + (var(--max-vw) - 768px) * 0.025), 21.493px);
    --text-subnote:  clamp(10px, calc(10px + (var(--max-vw) - 768px) * 0.025), 13.639px);
    --section-pad-y: clamp(32px, calc(32px + (var(--max-vw) - 768px) * 0.025), 75px);
  }
}

@media (min-width: 1024px) {
  .why-wait {
    --text-h2:       clamp(29px, calc(46.425px * (var(--max-vw) / var(--vw-base))), 55px);
    --lh-h2:         1.16;
    --ls-h2:         -0.012em;
    --text-eyebrow:  clamp(14px, calc(21.493px * (var(--max-vw) / var(--vw-base))), 25px);
    --lh-eyebrow:    normal;
    --ls-eyebrow:    0.1em;
    --ls-lead:       0;
    --text-subnote:  clamp(9px, calc(13.639px * (var(--max-vw) / var(--vw-base))), 16px);
    --lh-subnote:    normal;
    --ls-subnote:    -0.03em;
    --section-pad-y: clamp(47px, calc(75px * (var(--max-vw) / var(--vw-base))), 89px);
  }
}

/* ---------- section-local tokens: mobile band (M-base @390; M-min/M-max = v*320/390, v*767/390) ---------- */
.why-wait {
  --ww-col-gap: 0px;
  --ww-content-top: clamp(20px, calc(24px + (var(--max-vw) - 390px) * 0.015), 47px);   /* media -> overline, 3271:775 pt 24 */
  --ww-title-top: clamp(7px, calc(8px + (var(--max-vw) - 390px) * 0.015), 16px);        /* 3271:777 pt 8 */
  --ww-text-top: clamp(10px, calc(12px + (var(--max-vw) - 390px) * 0.015), 24px);       /* 3271:779 pt 12 */
  --ww-actions-top: clamp(16px, calc(20px + (var(--max-vw) - 390px) * 0.015), 39px);    /* body -> sub-note, 3271:838 pt 20 */
  --ww-subnote-gap: clamp(10px, calc(12px + (var(--max-vw) - 390px) * 0.015), 24px);    /* sub-note -> CTA, 3271:838 pb 12 */
  --ww-para-gap: 1.55em;                                                                /* one empty lead line (lh 20.15 @13) */
  --ww-media-r: var(--radius-md-m);
  --ww-media-shadow: var(--shadow-media-m);
}

/* ---------- section box (Pattern A — padding longhands only) ---------- */
.why-wait {
  padding-top: var(--section-pad-y);
  padding-bottom: var(--section-pad-y);
}

.why-wait__grid {
  display: block;
}

/* ---------- media card (3271:523 / 524 / 525) ---------- */
.why-wait__media {
  aspect-ratio: 576 / 517.64;                   /* D-why-wait-2: desktop aspect on every band */
  border-radius: var(--ww-media-r);
  box-shadow: var(--ww-media-shadow);
  background: #ffffff;                          /* D-why-wait-3 */
  overflow: hidden;                             /* clips the img to the radius (brief §5) */
}

.why-wait__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;                            /* Figma scaleMode FILL (D-why-wait-7) */
}

/* ---------- content column (3271:516) ---------- */
.why-wait__content {
  margin-top: var(--ww-content-top);
  min-width: 0;
}

.why-wait__eyebrow {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--text-eyebrow);
  line-height: var(--lh-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-eyebrow);
}

.why-wait__title {
  margin-top: var(--ww-title-top);
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--text-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  color: var(--c-ink);
}

.why-wait__text {
  margin-top: var(--ww-text-top);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-lead);
  line-height: var(--lh-lead);
  letter-spacing: var(--ls-lead);
  color: var(--c-text);
}

.why-wait__text p + p {
  margin-top: var(--ww-para-gap);               /* D-why-wait-5: the drawn "\n\n" */
}

/* ---------- CTA + sub-note (mobile: sub-note ABOVE the CTA, BA-why-wait-1) ---------- */
.why-wait__actions {
  display: flex;
  flex-direction: column;
  margin-top: var(--ww-actions-top);
}

.why-wait__subnote {
  order: -1;
  margin-bottom: var(--ww-subnote-gap);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-subnote);
  line-height: var(--lh-subnote);
  letter-spacing: var(--ls-subnote);
  text-align: center;
  color: var(--c-text);
}

/* ---------- pseudo-tablet (768–1023): row split, each half keeps the mobile design (D-6) ---------- */
@media (min-width: 768px) and (max-width: 1023px) {
  .why-wait {
    --ww-col-gap: clamp(20px, calc(20px + (var(--max-vw) - 768px) * 0.025), 89px);
    --ww-content-top: 0px;
    --ww-title-top: clamp(8px, calc(8px + (var(--max-vw) - 768px) * 0.025), 10px);
    --ww-text-top: clamp(12px, calc(12px + (var(--max-vw) - 768px) * 0.025), 28.3px);
    --ww-actions-top: clamp(20px, calc(20px + (var(--max-vw) - 768px) * 0.025), 37px);
    --ww-subnote-gap: clamp(12px, calc(12px + (var(--max-vw) - 768px) * 0.025), 24px);
  }

  .why-wait__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--ww-col-gap);
    align-items: start;
  }
}

/* ---------- desktop (1024+): drawn geometry, D-base @1619 ---------- */
@media (min-width: 1024px) {
  .why-wait {
    --ww-col-gap: clamp(56px, calc(89px * (var(--max-vw) / var(--vw-base))), 106px);
    --ww-content-top: clamp(23px, calc(37px * (var(--max-vw) / var(--vw-base))), 44px);       /* 3271:516.y */
    --ww-title-top: clamp(6px, calc(10px * (var(--max-vw) / var(--vw-base))), 12px);           /* 39 - rendered overline 29 */
    --ww-text-top: clamp(18px, calc(28.3px * (var(--max-vw) / var(--vw-base))), 34px);         /* 175 - 39 - rendered heading 107.7 */
    --ww-actions-top: clamp(23px, calc(37px * (var(--max-vw) / var(--vw-base))), 44px);        /* body -> CTA */
    --ww-subnote-gap: clamp(5px, calc(8.68px * (var(--max-vw) / var(--vw-base))), 10px);       /* CTA -> sub-note */
    --ww-subnote-left: clamp(3px, calc(5.49px * (var(--max-vw) / var(--vw-base))), 7px);       /* 3271:522.x */
    --ww-title-max: clamp(285px, calc(451px * (var(--max-vw) / var(--vw-base))), 535px);       /* 3271:517 w */
    --ww-text-max: clamp(344px, calc(544px * (var(--max-vw) / var(--vw-base))), 645px);        /* 3271:518 w */
    --ww-para-gap: 1.21em;                                                                       /* one Inter "normal" line */
    --ww-media-r: var(--radius-card-d);
    --ww-media-shadow: 21.689px 27.529px 114.953px 0 rgba(0, 0, 0, 0.13);                       /* get_design_context 3271:524 */
  }

  .why-wait__grid {
    display: grid;
    grid-template-columns: minmax(0, 576fr) minmax(0, 555fr);   /* 576 + 89 + 555 = 1220 at 1619 */
    column-gap: var(--ww-col-gap);
    align-items: start;
  }

  .why-wait__eyebrow {
    white-space: nowrap;                        /* drawn single line, whitespace-nowrap in design context */
  }

  .why-wait__title {
    max-width: var(--ww-title-max);
  }

  .why-wait__text {
    max-width: var(--ww-text-max);
  }

  .why-wait__actions {
    align-items: flex-start;
  }

  /* D-why-wait-6: CTA box drawn at k = 1.0301 (398.33 x 59.59, r 8.364) — re-declare the .btn properties in scope */
  .why-wait .why-wait__cta {
    --btn-w: clamp(252px, calc(398.33px * (var(--max-vw) / var(--vw-base))), 472px);
    --btn-h: clamp(38px, calc(59.59px * (var(--max-vw) / var(--vw-base))), 71px);
    --btn-r: 8.364px;
  }

  .why-wait__subnote {
    order: 0;
    width: fit-content;
    margin-top: var(--ww-subnote-gap);
    margin-bottom: 0;
    margin-left: var(--ww-subnote-left);
    text-align: left;
  }
}