/* Project page template (/business-solutions/<project>/), copy v3. Loads after base.css and showpieces.css.
   Order (round 5): hero, intro, showpiece (optional), the live check (Visibility Check only), problem, how it works, how we built it, credit (Nick's role + status), flyer (Gift Card Platform only), CTA.
   Website Enhancements (slug website-rebuilds, round 7): hero, intro, showpiece, problem, how it works, showcase (the before/after comparisons, #bs-compare, in the How we built it slot), credit, CTA.
   Every rule is scoped under #bs-main.bs-tool so text rules beat the shell's `body, p { color }` and
   `h1-h6 { font-family !important; uppercase }` in /features.css. */
#bs-main.bs-tool :is(#bs-show, #bs-compare, #bs-tool, #bs-problem, #bs-intro, #bs-how, #bs-built, #bs-credit, #bs-flyer) { scroll-margin-top: 100px; }

/* Hero: the overview's calm navy field and single radial, shorter, no fragments, no button.
   The H1 only (round 6: no status pill; the status lives in the credit band); the intro headline is said once, lower down, as the intro H2.
   Project names run longer than the old tool names, so the column is wider and the type a step smaller. */
#bs-main.bs-tool .bs-hero--tool { min-height: min(70svh, 640px); }
#bs-main.bs-tool .bs-hero--tool .bs-hero-inner { max-width: 880px; width: 100%; }
#bs-main.bs-tool .bs-hero--tool .bs-h1 { max-width: 20ch; font-size: clamp(2.25rem, 5vw, 4rem); line-height: 1.04; }

/* Bands: navy hero, then the intro and its showpiece share one white band (the intro leads straight into the demo),
   then paper / white alternate from the problem on, navy CTA. The credit band is white so its card turns paper. */
.bs-tool .bs-tool-show, .bs-tool .bs-tool-sec { padding: clamp(4rem, 9vw, 7rem) 1.25rem; }
.bs-tool .bs-tool-show { background: #fff; padding-top: clamp(3rem, 6vw, 4.5rem); }
.bs-tool #bs-intro + #bs-show { padding-top: 0; }
/* Visibility Check: the demo showpiece, then the real check in its own white section (#bs-tool) right under it. */
.bs-tool #bs-show:has(+ #bs-tool) { padding-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.bs-tool #bs-show + #bs-tool { padding-top: 0; }
.bs-tool #bs-show + #bs-tool .bs-rc { padding-top: clamp(2.5rem, 5vw, 3.5rem); border-top: 1px solid rgba(9, 64, 132, .10); }
.bs-tool #bs-intro, .bs-tool #bs-how, .bs-tool #bs-credit { background: #fff; }
.bs-tool #bs-problem, .bs-tool #bs-built, .bs-tool #bs-flyer { background: var(--hge-paper); }
#bs-main.bs-tool #bs-credit .bs-credit { background: var(--hge-paper); }
/* Website Enhancements: the shared bands (intro and showpiece white, problem paper, how white, credit white with its paper card);
   the showcase takes the How we built it slot, so it is paper, with full section padding above its heading. */
.bs-tool[data-tool="website-rebuilds"] #bs-compare { background: var(--hge-paper); padding-top: clamp(4rem, 9vw, 7rem); }

/* Showpiece intro line: sits above the pinned lead so the scroll cue is read before the scroll. */
#bs-main.bs-tool .bs-tool-cap { max-width: 72ch; margin: 0 auto; text-align: center; text-wrap: balance; }
.bs-tool .bs-tool-cap + .bs-show { margin-top: 1.5rem; }

/* Embedded Website Visibility Check: the tool's own eyebrow, heading and lead are hidden; the page hero introduces it. */
#bs-main.bs-tool .bs-rc.rc-section { margin: 0 auto; padding: 0; background: #fff; }
#bs-main.bs-tool #bs-tool .rc-eyebrow, #bs-main.bs-tool #bs-tool .rc-heading, #bs-main.bs-tool #bs-tool .rc-section-inner > .rc-lead { display: none; }
#bs-main.bs-tool #bs-tool .rc-section-inner { margin: 0 auto; max-width: 720px; }

/* Body copy: one readable measure everywhere. */
#bs-main.bs-tool .bs-tool-sec .bs-lead { max-width: 66ch; margin: 0; font-size: 1.0625rem; line-height: 1.7; color: var(--hgb-muted); }
#bs-main.bs-tool .bs-tool-sec .bs-lead + .bs-lead { margin-top: 1.25rem; }

/* Split sections (problem, how it works, how we built it): heading left, copy right from 900px. */
.bs-tool .bs-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
@media (min-width: 900px) {
  .bs-tool .bs-split { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 4rem; align-items: start; }
}
#bs-main.bs-tool .bs-split .bs-h2 { font-size: clamp(1.75rem, 3vw, 2.25rem); }

/* Intro: the project's headline statement, centered, with its body under it. */
#bs-main.bs-tool .bs-tool-intro .bs-wrap { max-width: 860px; text-align: center; }
#bs-main.bs-tool .bs-tool-intro .bs-h2 { max-width: 24ch; margin: 0 auto; }
#bs-main.bs-tool .bs-tool-intro .bs-lead { margin: 1.5rem auto 0; font-size: 1.1875rem; }


/* Website Enhancements showcase: heading, body and a small note above the before/after showpiece. */
#bs-main.bs-tool .bs-showcase-head { max-width: 860px; margin: 0 auto clamp(2rem, 4vw, 3rem); text-align: center; }
#bs-main.bs-tool .bs-showcase-head .bs-h2 { max-width: 24ch; margin: 0 auto; }
#bs-main.bs-tool .bs-showcase-head .bs-lead { max-width: 66ch; margin: 1.25rem auto 0; font-size: 1.0625rem; line-height: 1.7; color: var(--hgb-muted); }
#bs-main.bs-tool .bs-showcase-note { margin: .875rem 0 0; font-family: var(--hge-body); font-size: .875rem; line-height: 1.5; color: var(--hgb-muted); }

/* How it works: numbered steps drawn by a counter, so the copy stays verbatim. A lead-in line may sit above the list. */
#bs-main.bs-tool .bs-body > .bs-lead + .bs-flow { margin-top: 1.75rem; }
#bs-main.bs-tool .bs-flow .bs-lead strong { font-weight: 600; color: var(--hge-navy); }
#bs-main.bs-tool .bs-flow { counter-reset: bs-flow; display: grid; gap: 1.75rem; margin: 0; padding: 0; list-style: none; }
#bs-main.bs-tool .bs-flow li { counter-increment: bs-flow; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 1.25rem; align-items: start; margin: 0; padding: 0; }
#bs-main.bs-tool .bs-flow li::before { content: counter(bs-flow); display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 10px; background: #E4F6EA; color: var(--hgb-green-deep); font-family: var(--hge-display); font-size: 1.125rem; font-weight: 600; line-height: 1; }

/* How we built it: plain paragraphs, or a quiet ruled list for the Visibility Check. */
#bs-main.bs-tool .bs-built-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
#bs-main.bs-tool .bs-built-list li { margin: 0; padding: 1.25rem 0; border-top: 1px solid rgba(9, 64, 132, .10); }
#bs-main.bs-tool .bs-built-list li:first-child { padding-top: 0; border-top: 0; }

/* Credit band: Nick's role (a subtle credit card) and status share one band, two columns from 900px. */
.bs-tool .bs-tool-credit { padding: clamp(3rem, 7vw, 5rem) 1.25rem; }
.bs-tool .bs-credit-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
@media (min-width: 900px) {
  .bs-tool .bs-credit-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3.5rem; align-items: start; }
  .bs-tool .bs-status { padding-top: 1.5rem; }
}
#bs-main.bs-tool .bs-credit { max-width: 860px; padding: 1.5rem 1.75rem; background: #fff; border: 1px solid rgba(9, 64, 132, .10); border-radius: var(--hge-radius); }
#bs-main.bs-tool .bs-credit-h, #bs-main.bs-tool .bs-status-h { margin: 0; font-family: var(--hge-display) !important; font-size: 1rem; font-weight: 600; line-height: 1.2; letter-spacing: .06em; text-transform: uppercase; color: var(--hge-navy); }
#bs-main.bs-tool .bs-credit-p { max-width: 68ch; margin: .75rem 0 0; font-family: var(--hge-body); font-size: 1rem; font-weight: 400; line-height: 1.65; letter-spacing: 0; color: var(--hgb-muted); text-wrap: pretty; }
#bs-main.bs-tool .bs-credit-p a { color: var(--hge-navy); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(9, 64, 132, .35); text-underline-offset: .2em; transition: text-decoration-color .2s ease; }
#bs-main.bs-tool .bs-credit-p a:hover { text-decoration-color: currentColor; }

/* Status: a label pill and one sentence. Green-deep on a .14 green tint over white is 4.59:1; navy on its tint is well above 4.5:1. */
#bs-main.bs-tool .bs-status-line { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin: .875rem 0 0; font-family: var(--hge-body); font-size: 1.0625rem; font-weight: 400; line-height: 1.6; letter-spacing: 0; color: var(--hge-navy); }
#bs-main.bs-tool .bs-pill { display: inline-flex; align-items: center; gap: .5rem; padding: .375rem .875rem; border-radius: 999px; font-family: var(--hge-body); font-size: .875rem; font-weight: 600; line-height: 1.2; letter-spacing: .02em; white-space: nowrap; }
#bs-main.bs-tool .bs-pill::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
#bs-main.bs-tool .bs-pill--live { background: linear-gradient(rgba(61, 192, 102, .14), rgba(61, 192, 102, .14)), #fff; color: var(--hgb-green-deep); }
#bs-main.bs-tool .bs-pill--dev { background: linear-gradient(rgba(9, 64, 132, .08), rgba(9, 64, 132, .08)), #fff; color: var(--hge-navy); }
#bs-main.bs-tool .bs-status-text { min-width: 0; max-width: 66ch; color: var(--hge-navy); }

/* Gift Card Platform: the pilot flyer download, a paper band before the CTA. Navy on paper is about 8.6:1. */
#bs-main.bs-tool .bs-flyer-row { margin: 1.75rem 0 0; }
#bs-main.bs-tool .bs-flyer-link { display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; padding: .8rem 1.5rem; border: 1.5px solid var(--hge-navy); border-radius: 999px; background: #fff; color: var(--hge-navy); font-family: var(--hge-display); font-size: .9rem; font-weight: 600; line-height: 1.2; letter-spacing: .07em; text-transform: uppercase; text-decoration: none; transition: background-color .25s ease, color .25s ease; }
#bs-main.bs-tool .bs-flyer-link:hover { background: var(--hge-navy); color: #fff; }

/* CTA: the navy band, the overview's closing question over the button(s). */
.bs-tool .bs-cta--tool { padding: clamp(3.5rem, 8vw, 5.5rem) 1.25rem; }
#bs-main.bs-tool .bs-cta--tool .bs-h2 { max-width: 28ch; margin: 0 auto 2.25rem; font-size: clamp(1.75rem, 3.4vw, 2.5rem); }
#bs-main.bs-tool .bs-cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
#bs-main.bs-tool .bs-cta--tool .bs-h2:has(+ .bs-lead) { margin-bottom: 0; }
#bs-main.bs-tool .bs-cta--tool .bs-lead { max-width: 56ch; margin: 1rem auto 2.25rem; font-size: 1.0625rem; line-height: 1.6; color: rgba(255, 255, 255, .82); }

@media (max-width: 767px) {
  #bs-main.bs-tool .bs-credit { padding: 1.25rem 1.25rem 1.25rem 1.375rem; }
  #bs-main.bs-tool .bs-flow li { grid-template-columns: 2.25rem minmax(0, 1fr); gap: 1rem; }
  #bs-main.bs-tool .bs-flow li::before { width: 2.25rem; height: 2.25rem; }
  #bs-main.bs-tool .bs-tool-intro .bs-lead { font-size: 1.0625rem; }
  #bs-main.bs-tool .bs-cta-row .bs-btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  #bs-main.bs-tool .bs-credit-p a, #bs-main.bs-tool .bs-flyer-link { transition: none; }
}