/* ------------------------------------------------------------------------- *
 * Cyber Readiness Check, unit bands: the hero and the closing band.
 *
 * Verbatim from docs/readiness-review/prototype, in this order:
 * 1. index-v2.html <style id="crc-page">, the rules of these two sections;
 * 2. parts/hero.css;
 * 3. parts/v2/v2.css, the rules of these two sections.
 * The shared .crc-h1, .crc-lede, .crc-cta, .crc-link and .crc-actions are in
 * base.css. Not ported, dead in V2: .stepped__window, its rect, .trust*.
 * ------------------------------------------------------------------------- */

/* Stepped grid band (hero and closing) */
.stepped{position:relative; overflow:hidden; background-color:var(--navy);
	background-image:var(--grain);
	background-size:160px 160px;
	padding:calc(var(--ch)*5) var(--gutter); text-align:center}
.stepped--end{padding-block:calc(var(--ch)*4)}
.stepped__content{position:relative}
/* Flat Vallem blue band: no window, no grain */
.stepped.flat{background:var(--blue); background-image:none; padding-block:clamp(5.5rem,10vw,9rem)}
.stepped--end.flat{padding-block:clamp(4.5rem,8vw,7rem)}
/* Benefits under the buttons */
.perks{display:flex; flex-wrap:wrap; justify-content:center; gap:12px 28px; margin:2.25rem 0 0; padding:0; list-style:none}
.perks li{display:inline-flex; align-items:center; gap:10px; color:#fff; font-size:1rem; font-weight:500; letter-spacing:-.011em}
.perks li::before{content:""; flex:none; width:20px; height:20px; border-radius:50%; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.8 10.3l2.8 2.8 5.6-5.7' fill='none' stroke='%23183CDD' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat}
@media (max-width:600px){.perks{flex-direction:column; align-items:center; gap:10px}}
.stepped .crc-lede{color:var(--on-blue)}
.stepped--hero .crc-lede{max-width:44em}
.stepped .crc-link::before{border-left-color:#fff}

/* parts/hero.css */

/* Hero and closing band: the price card's tile field. Hero: strongest in the top-right and bottom-left corners and gone
   by the middle, so the copy sits on clean Vallem blue; the closing band has it
   coming in from the left and right around a faded middle. parts/hero.js draws it once per size;
   without JS the band stays flat blue. The earlier contour map is kept in parts/alt/. */
.stepped--hero .hero-tiles,.stepped--end .hero-tiles{position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none}

/* Google review badge above the closing heading (Nol), at the size the theme's proof band uses it, a touch larger. */
.stepped--end .crc-end__badge{display:block; width:112px; height:auto; margin:0 auto 1.75rem; border-radius:6px}

/* parts/v2/v2.css */

/* Next-step line under every intake button. */
.stepped .v2-next{text-align:center}

/* Hero perks are longer now; keep them on one row at desktop widths. */
.stepped--hero .perks{gap:12px 24px}

/* Editor only. The front end has no flow classes and unwraps the phone link and the badge
   (hooks/bands.json); the editor keeps core's flow margins, the paragraph round the link and the
   figure round the badge. */
.editor-styles-wrapper .stepped .crc-actions,.editor-styles-wrapper .stepped .perks{margin-top:2.25rem}
.editor-styles-wrapper .stepped p.crc-link a{color:inherit; text-decoration:none}
.editor-styles-wrapper .stepped--end .crc-end__badge img{display:block; width:100%; height:auto; border-radius:6px}