/* ============================================================
   Score landing, Design B: "editorial premium"
   Same copy as A. Differences: 2 tones only (near-black / surface-light),
   split hero, editorial two-column sections, hairline lists instead of
   card boxes, one type scale, one container, one radius, motion layer.
   Tokens only (styles.css). John asked for a second look to choose 2026-10-22.
   ============================================================ */
.sc-b {
  --b-wrap: 1160px;
  --b-r: 12px;
  --b-pad: clamp(88px, 10vw, 136px);
  --t-display: clamp(40px, 5vw, 68px);
  --t-h2: clamp(30px, 3.4vw, 46px);
  --t-lead: clamp(17px, 1.35vw, 19px);
  --t-body: 16px;
  --t-small: 13px;
  --b-dark: var(--near-black);
  --b-light: var(--surface-light);
  --b-line-d: rgba(245,246,248,0.12);
  --b-line-l: rgba(18,20,26,0.12);
}
.sc-b .container { max-width: var(--b-wrap) !important; }
.sc-b section { padding: var(--b-pad) 0; border-top: 0 !important; }

/* ---------- Two tones, alternating on purpose ---------- */
.sc-b .as-hero, .sc-b .sc-wrong, .sc-b .sc-case, .sc-b section[style*="--white"], .sc-b .f-footer { background: var(--b-dark) !important; color: var(--surface-light); }
.sc-b .sc-pain, .sc-b .gap, .sc-b .sc-doc, .sc-b .f-cta { background: var(--b-light) !important; color: var(--ink); }

/* Type on light sections */
.sc-b .sc-pain h2, .sc-b .gap h2, .sc-b .sc-doc h2, .sc-b .f-cta h2 { color: var(--ink); }
.sc-b .sc-pain .sc-sub, .sc-b .gap .f-turn, .sc-b .sc-doc p, .sc-b .f-cta .lead, .sc-b .sc-doc .sc-role { color: var(--l-body) !important; }
.sc-b .f-cta .f-hero-note { color: var(--l-mute) !important; opacity: 1; }
/* Type on dark sections */
.sc-b section[style*="--white"] h2, .sc-b section[style*="--white"] h3 { color: var(--surface-light); }
.sc-b section[style*="--white"] .as-step p { color: var(--l-d-body) !important; }

/* ---------- One type scale ---------- */
.sc-b h2 { font-size: var(--t-h2) !important; line-height: 1.08 !important; letter-spacing: -0.015em; text-wrap: balance; }
.sc-b .sc-sub, .sc-b .lead, .sc-b .f-turn { font-size: var(--t-lead) !important; line-height: 1.6; }
.sc-b p { font-size: var(--t-body); }
.sc-b .sc-disc, .sc-b .f-hero-note, .sc-b .f-footer .copy, .sc-b .f-footer .disc { font-size: var(--t-small) !important; }

/* ---------- Hero: split, left-aligned ---------- */
@media (min-width: 960px) {
  .sc-b .as-hero { min-height: auto; padding-top: 168px; padding-bottom: 88px; text-align: left; }
  .sc-b .as-hero > .container {
    display: grid; grid-template-columns: 1fr 1.05fr; column-gap: 64px; align-items: center;
    grid-template-areas: "h v" "s v" "c v" "n v" "n2 v" "t t";
  }
  .sc-b .as-hero h1 { grid-area: h; text-align: left; margin: 0 !important; max-width: 13ch !important; font-size: var(--t-display) !important; line-height: 1.02 !important; }
  .sc-b .as-hero h1 .accent { font-size: 0.5em !important; margin-top: 18px !important; }
  .sc-b .as-hero .d-br { display: none; }
  .sc-b .as-hero .f-hero-sub { grid-area: s; text-align: left; margin: 26px 0 30px !important; max-width: 44ch; text-wrap: pretty; }
  .sc-b .as-hero .f-hero-sub .sub-br { display: none; }
  .sc-b .as-hero .f-hero-sub .sub-step { display: block; margin-top: 10px; }
  .sc-b .as-hero .sc-lp-video { grid-area: v; max-width: none !important; margin: 0 !important; border-radius: var(--b-r) !important; }
  .sc-b .as-hero .as-cta { grid-area: c; justify-self: start; }
  .sc-b .as-hero .f-hero-note { grid-area: n; text-align: left; margin: 16px 0 0 !important; max-width: 46ch; }
  .sc-b .as-hero .sc-note-2 { grid-area: n2; margin-top: 6px !important; }
  .sc-b .as-hero .sc-trust { grid-area: t; max-width: none; margin-top: 88px; padding-top: 36px; border-top: 1px solid var(--b-line-d); display: grid; grid-template-columns: 260px 1fr; gap: 40px; align-items: center; }
  .sc-b .as-hero .sc-trust-line { text-align: left; margin: 0; font-size: var(--t-small) !important; line-height: 1.55; }
  .sc-b .as-hero .sc-logos { padding: 0; }
}

/* ---------- Editorial two-column sections ---------- */
@media (min-width: 960px) {
  .sc-b .sc-pain > .container, .sc-b .gap > .container, .sc-b .sc-wrong > .container {
    display: grid; grid-template-columns: 5fr 7fr; column-gap: 80px; align-items: start; max-width: var(--b-wrap) !important;
  }
  /* left column: heading (+ sub), sticky while the right column scrolls */
  .sc-b .sc-pain .sc-head, .sc-b .gap .so-head, .sc-b .sc-wrong h2 {
    grid-column: 1; grid-row: 1 / span 6; position: sticky; top: 120px; text-align: left !important; margin: 0 !important; max-width: none;
  }
  .sc-b .sc-pain .sc-head h2, .sc-b .gap .so-head h2 { text-align: left; }
  .sc-b .sc-pain .sc-sub { margin: 22px 0 0 !important; text-align: left; }
  .sc-b .sc-pain > .container > *:not(.sc-head), .sc-b .gap > .container > *:not(.so-head), .sc-b .sc-wrong > .container > *:not(h2) { grid-column: 2; }
  .sc-b .sc-pain-close, .sc-b .f-turn, .sc-b .sc-wrong .lead { text-align: left !important; margin-left: 0 !important; }
  .sc-b .f-section-cta { text-align: left !important; justify-content: flex-start !important; }
}
.sc-b .gap br { display: none; }

/* Hairline lists replace card boxes */
.sc-b .sc-pain-grid, .sc-b .so-grid { display: block !important; gap: 0; margin: 0 0 40px; }
.sc-b .sc-pain-card, .sc-b .so-card {
  background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  padding: 28px 0 !important; border-top: 1px solid var(--b-line-l) !important;
}
.sc-b .sc-pain-card:last-child, .sc-b .so-card:last-child { border-bottom: 1px solid var(--b-line-l) !important; }
.sc-b .sc-pain-card h3 { font-family: var(--font-display); font-weight: 400; font-size: 24px !important; line-height: 1.2; margin: 0 0 10px !important; color: var(--ink); }
.sc-b .so-card .so-label { display: block; font-family: var(--font-display); font-weight: 400; font-size: 24px; color: var(--blue-deep); margin-bottom: 8px; text-transform: none; letter-spacing: 0; }
.sc-b .sc-pain-close { font-size: var(--t-lead); margin: 0 0 28px; }
.sc-b .f-turn { font-family: var(--font-sans) !important; color: var(--l-body); max-width: 56ch; margin: 0 0 28px !important; }

/* Wrong problem: anchor becomes a pull quote, no box */
.sc-b .sc-wrong > .container { max-width: var(--b-wrap) !important; }
.sc-b .sc-wrong .lead { color: var(--l-d-body) !important; }
.sc-b .sc-anchor { background: none !important; border: 0 !important; border-left: 2px solid var(--blue-light) !important; border-radius: 0 !important; padding: 4px 0 4px 26px !important; margin: 36px 0 !important; }
.sc-b .sc-anchor-k { font-family: var(--font-display); font-size: 28px !important; line-height: 1.2; color: var(--surface-light); margin-bottom: 10px; }
.sc-b .sc-anchor p:not(.sc-anchor-k) { font-size: var(--t-lead); color: var(--l-d-body); }

/* Case: tighter, numbers line up */
.sc-b .sc-case .sc-head { text-align: left !important; margin: 0 auto 56px !important; max-width: var(--b-wrap); }
.sc-b .sc-case .sc-head h2, .sc-b .sc-case .sc-head .sc-sub { text-align: left; margin-left: 0; max-width: 40ch; }
.sc-b .sc-case .sc-head .sc-sub { max-width: 62ch; }
.sc-b .sc-case-grid, .sc-b .sc-doc-grid { max-width: var(--b-wrap) !important; gap: 72px !important; }
.sc-b .sc-case-stats { border-top: 1px solid var(--b-line-d); border-bottom: 1px solid var(--b-line-d); padding: 24px 0; }
.sc-b .sc-case-stats b { font-variant-numeric: tabular-nums lining-nums; }
.sc-b .sc-case-photo img, .sc-b .sc-doc-photo img { border-radius: var(--b-r) !important; }

/* Doc on light */
.sc-b .sc-doc h2 { color: var(--ink); }
.sc-b .sc-doc .sc-doc-body p { color: var(--l-body) !important; }

/* Steps on dark: track colors for dark ground */
.sc-b .as-steps::before { background: var(--b-line-d) !important; }
.sc-b .as-step::before { box-shadow: 0 0 0 5px var(--b-dark) !important; background: var(--blue-light) !important; }
.sc-b .as-step:last-child::before { background: var(--cta) !important; }
.sc-b section[style*="--white"] .center h2 { text-align: left; }
.sc-b section[style*="--white"] .center { text-align: left !important; max-width: var(--b-wrap); }

/* Final CTA on light, footer dark */
.sc-b .f-cta h2 { color: var(--ink); }
.sc-b .f-footer { border-top: 0 !important; }

/* ---------- Nav: glass, hides on scroll down ---------- */
.sc-b .nav { transition: transform .35s var(--ease), background var(--dur-ui) var(--ease); }
.sc-b .nav.nav-hide { transform: translate(-50%, -140%); }

/* ---------- Motion layer ---------- */
@keyframes bUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.rv-on .sc-b .as-hero h1 { animation: bUp .8s var(--ease) both; }
.rv-on .sc-b .as-hero .f-hero-sub { animation: bUp .8s var(--ease) .12s both; }
.rv-on .sc-b .as-hero .sc-lp-video { animation: bUp .9s var(--ease) .2s both; }
.rv-on .sc-b .as-hero .as-cta { animation: bUp .8s var(--ease) .28s both; }
.rv-on .sc-b .as-hero .f-hero-note { animation: bUp .8s var(--ease) .34s both; }
.rv-on .sc-b .rv { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.rv-on .sc-b .rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .sc-b .as-hero * { animation: none !important; }
  .sc-b .rv { opacity: 1 !important; transform: none !important; }
}

/* ---------- Mobile ---------- */
@media (max-width: 959px) {
  .sc-b section { padding: 80px 0; }
  .sc-b .sc-pain .sc-head, .sc-b .gap .so-head, .sc-b .sc-case .sc-head { text-align: left !important; }
  .sc-b .sc-pain .sc-head h2, .sc-b .gap h2, .sc-b .sc-wrong h2, .sc-b .sc-case h2, .sc-b section[style*="--white"] h2, .sc-b .sc-pain .sc-sub, .sc-b .sc-wrong .lead, .sc-b .sc-pain-close, .sc-b .f-turn { text-align: left !important; }
  .sc-b section[style*="--white"] .center { text-align: left !important; }
  .sc-b .sc-pain-card h3, .sc-b .so-card .so-label { font-size: 21px !important; }
  .sc-b .sc-anchor-k { font-size: 23px !important; }
}
/* fixes after first B inspect */
@media (min-width: 960px) {
  .sc-b .as-hero h1 { font-size: clamp(40px, 4.2vw, 60px) !important; max-width: 15ch !important; }
  .sc-b .as-hero .d-br { display: inline; }
}
.sc-b .sc-quote p { font-size: clamp(19px, 1.6vw, 23px) !important; line-height: 1.35; }
.sc-b .as-steps { max-width: none !important; margin: 0 !important; }
.sc-b .as-steps::before { left: 8px; }
@media (min-width: 960px) {
  .sc-b .as-hero h1 { font-size: clamp(40px, 3.9vw, 56px) !important; max-width: none !important; }
}
@media (max-width: 959px) {
  .sc-b .as-hero { text-align: left; }
  .sc-b .as-hero h1, .sc-b .as-hero .f-hero-sub, .sc-b .as-hero .f-hero-note, .sc-b .as-hero .sc-trust-line { text-align: left !important; margin-left: 0 !important; }
  .sc-b .as-hero h1 { max-width: none !important; }
  .sc-b .gap .so-head, .sc-b .sc-pain .sc-head { margin-bottom: 28px !important; }
}
@media (min-width: 960px) {
  body.sc-b .as-hero h1.as-h1-long { font-size: clamp(40px, 3.9vw, 56px) !important; max-width: none !important; line-height: 1.04 !important; }
}
@media (min-width: 960px) {
  body.sc-b .as-hero > .container { grid-template-columns: 1.15fr 1fr; }
  body.sc-b .as-hero h1.as-h1-long { font-size: clamp(40px, 3.6vw, 52px) !important; }
}