/* =============================================================================
   Start with Standard — Page Styles
   Gold is this page's signature (design-verdict §3).
   Gold appears ONLY on this page; never touches style.css or other pages.
   ============================================================================= */

/* =============================================================================
   0. GOLD EYEBROW ON DARK SECTIONS
   Foundation's `.section--dark .eyebrow` (blue) out-specifies `.eyebrow--gold`,
   so gold eyebrows inside dark sections render blue. Restore the page's
   signature gold accent on dark surfaces.
   ============================================================================= */
.section--dark .eyebrow--gold { color: var(--c-gold); }

/* =============================================================================
   1. HERO — gold accent
   ============================================================================= */

.sws-hero {
  position: relative;
  padding-bottom: 0;
  overflow: hidden;
  /* Cap the hero content on wide displays so the headline and image don't
     spread to opposite edges (matches the 1440px tile cap). */
  max-width: var(--w-wide);
  margin-inline: auto;
}

.sws-hero .hero__inner {
  padding-block: calc(var(--nav-h) + var(--sp-3)) var(--sp-6);
}

/* Gold underline on h1 */
.sws-hero h1 {
  position: relative;
  display: inline-block;
  margin-bottom: var(--sp-3);
}

.sws-hero h1::after {
  content: "";
  display: block;
  margin-top: 0.55rem;
  width: 56px;
  height: 3px;
  background: var(--c-gold);
  border-radius: 2px;
}

.sws-hero__media {
  margin-top: var(--sp-5);
}

.sws-hero__placeholder,
.sws-hero__picture {
  display: block;
  border-radius: var(--r-lg);
  overflow: hidden;
}

.sws-hero__picture img {
  display: block;
  width: 100%;
  height: auto;
}

/* =============================================================================
   2. PROBLEM SECTION
   ============================================================================= */

.sws-problem {
  background: var(--c-bg-alt);   /* light-gray to set the Problem section apart */
}

.sws-problem .eyebrow {
  display: block;
  margin-bottom: var(--sp-2);
}

.sws-problem h2 {
  margin-bottom: var(--sp-3);
}

/* =============================================================================
   2b. TILE GRID — full-bleed tile component (mirrors the home lineup).
   Shared: the Benefits section here and the Proof Point grid (§4) both use it.
   ============================================================================= */

.sws-benefits {
  background: var(--c-bg);
  padding-bottom: 0;   /* tiles meet the next (dark Program) section directly —
                          no white gap below the tile band */
}

/* Full-bleed 2-up grid — the 12px gap shows the section background as a seam.
   The grid sits outside .container so the tiles run edge to edge. */
.sws-benefits__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* `.sws-benefit` carries `aspect-ratio: 1/1` so every tile is square;
     no need to equalise row heights here. */
  gap: 12px;
  padding-inline: 12px;              /* white seam on the L/R sides; NO top/bottom
                                        frame — outer tile edges meet the gray
                                        band directly (no notch) */
  margin-top: var(--sp-6);
  max-width: var(--w-wide);          /* stop tiles ballooning on wide displays */
  margin-inline: auto;               /* centre the capped grid in its gray band */
  background: var(--c-bg);           /* white seams sit over the gray band */
}

/* Light-gray tile — square corners. No align-content:center: the inner
   stretches to the full tile height so the graphic can be pinned to the
   bottom. grid-template-columns gives a definite column the inner inherits;
   min-width:0 keeps the parent grid's two 1fr columns equal. */
.sws-benefit {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  /* No fixed aspect-ratio: a rigid 1/1 made each tile an independent square,
     so when content outgrew the square (at sub-1440 widths) tiles overflowed
     by different amounts and their heights diverged. Letting the grid row
     stretch (align-items defaults to stretch) keeps the two tiles in a row
     equal height — near-square at the capped width, content-driven below it. */
  height: 100%;
  background: var(--c-bg-alt);
  padding: clamp(2.75rem, 4vw, 5rem) clamp(1.5rem, 3vw, 3rem);
  text-align: center;
}

/* Flex column filling the tile. width:100% gives a definite width, so every
   tile's graphic slot is identical. Auto top-margins on the eyebrow and on
   the graphic split the slack evenly: the text block centres in the upper
   area and the graphic is pinned to the bottom edge — so the lower edges of
   the graphics line up across neighbouring tiles. */
.sws-benefit__inner {
  width: 100%;
  max-width: 640px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
}

.sws-benefit .eyebrow { margin-top: auto; }

.sws-benefit__title {
  font-size: var(--t-h3);
}

.sws-benefit__desc {
  color: var(--c-ink-2);
  max-width: 46ch;
}

/* Picture slot — keeps the .placeholder texture; 16/7 like the home tiles. */
.sws-benefit__visual {
  width: 100%;
  margin-top: auto;          /* pin to the tile's bottom edge */
  aspect-ratio: 16 / 7;
}

/* RFQ Cycle Graphic — Claude Design handover, inlined SVG (see markup in
   start-with-standard.html). 1:1 slot instead of 16:7. Text-class styles and
   the drop-shadow filter are scoped under this modifier so the handover's
   class names (.stage-label, .node-num, .center-headline…) can't leak. */
.sws-benefit__visual--cycle {
  aspect-ratio: 1000 / 840;    /* viewBox -100 -20 1000 840 gives the side labels room */
  max-width: 55%;              /* sized so the 2-line "Shorter RFQ and Procurement
                                   Cycles" tile lands at ~702 with aspect-ratio:1/1
                                   on the tile — matches --bids for visual parity. */
  margin-inline: auto;
  overflow: visible;           /* let the float-shadow extend past the box */
}

.sws-benefit__visual--cycle svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.sws-benefit__visual--cycle svg text {
  font-family: var(--f-display);
}

.sws-benefit__visual--cycle .float-shadow {
  filter:
    drop-shadow(0 22px 38px rgba(74, 155, 209, 0.22))
    drop-shadow(0 8px 14px  rgba(15, 23, 42,  0.08));
}

.sws-benefit__visual--cycle .stage-label {
  font-weight: 600;
  font-size: 22px;
  fill: #1F2937;
  letter-spacing: -0.005em;
}

.sws-benefit__visual--cycle .stage-sub {
  font-weight: 500;
  font-size: 14px;
  fill: #64748B;
  letter-spacing: 0.01em;
}

.sws-benefit__visual--cycle .node-num {
  font-weight: 700;
  font-size: 28px;
  fill: #1F2937;
}

.sws-benefit__visual--cycle .center-kicker {
  font-size: 13px;
  font-weight: 600;
  fill: #4A9BD1;
  letter-spacing: 0.22em;
}

.sws-benefit__visual--cycle .center-headline {
  font-weight: 700;
  font-size: 64px;
  fill: #1F2937;
  letter-spacing: -0.025em;
}

.sws-benefit__visual--cycle .center-sub {
  font-weight: 500;
  font-size: 22px;
  fill: #64748B;
  letter-spacing: -0.005em;
}

/* Price Control Graphic — three vendor quote cards under "same scope" /
   "same basis" brackets. Content fits inside 0–800 viewBox (no expansion
   needed). Same square-keeping max-width approach as the Cycle graphic. */
.sws-benefit__visual--bids {
  aspect-ratio: 800 / 672;     /* viewBox is cropped to 800×672 (was 800×800); same
                                   visible content, smaller empty padding, so the
                                   slot can be wider and the SVG renders larger
                                   while the tile stays square. */
  max-width: 55%;              /* matches --cycle so the two row-1 SVG tiles share size */
  margin-inline: auto;
  overflow: visible;           /* let the float-shadow extend past the box */
}

.sws-benefit__visual--bids svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.sws-benefit__visual--bids svg text {
  font-family: var(--f-display);
}

.sws-benefit__visual--bids .float-shadow {
  filter:
    drop-shadow(0 22px 38px rgba(74, 155, 209, 0.22))
    drop-shadow(0 8px 14px  rgba(15, 23, 42,  0.08));
}

.sws-benefit__visual--bids .vendor-label,
.sws-benefit__visual--bids .total-label,
.sws-benefit__visual--bids .bracket-label {
  font-size: 11px;
  font-weight: 600;
  fill: #4A9BD1;
  letter-spacing: 0.22em;
}

.sws-benefit__visual--bids .bracket-label {
  font-size: 12px;            /* brackets sit 1px larger than the inner labels */
}

.sws-benefit__visual--bids .vendor-letter {
  font-weight: 700;
  font-size: 26px;
  fill: #1F2937;
}

.sws-benefit__visual--bids .line-item {
  font-size: 14px;
  font-weight: 500;
  fill: #64748B;
  letter-spacing: -0.005em;
}

.sws-benefit__visual--bids .caption {
  font-size: 18px;
  font-weight: 500;
  fill: #64748B;
  letter-spacing: -0.005em;
}

/* Photo benefit tiles (Inventory, Cross-training). 16:9 images at near-full
   tile width so the slot height lands ~344 — that keeps the tile ≈square
   (714×714). The two slots share identical CSS, and .sws-benefit__visual's
   `margin-top: auto` pins both to their tiles' bottoms, so the row's stretch
   to equal heights makes the picture tops AND bottoms align across the row. */
.sws-benefit__visual--photo {
  aspect-ratio: 16 / 9;
  max-width: 80%;             /* tile aspect-ratio is 1/1 so the slot size
                                  doesn't drive tile height — chosen for
                                  presence (~424×239) with room left for the
                                  2–3-line cross-training title above. */
  margin-inline: auto;
  border-radius: var(--r-lg);
  overflow: hidden;
}

.sws-benefit__visual--photo picture,
.sws-benefit__visual--photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 768px) {
  .sws-benefits__grid { grid-template-columns: 1fr; }
}

/* =============================================================================
   3. PROGRAM — GESTURE-STEPPED CARDS
   The four step-cards are a pinned sequence: one scroll gesture advances
   exactly one card. Engine: js/step-scroller.js · wiring: js/sws-program.js
   ============================================================================= */

.sws-program {
  padding-bottom: 0;   /* stepper runs flush to the section below */
}

.sws-program .section-head {
  padding-bottom: var(--sp-5);
}

.sws-program .section-head p {
  color: var(--c-on-dark-2);
}

/* --- Stepper scaffold --- */
.sws-stepper { position: relative; }

.sws-stepper__stage {
  position: sticky;
  top: var(--nav-h);
  height: calc(100svh - var(--nav-h));
  /* clip (not hidden) so a scaled card never spills — and never turns the
     stage into a scroll container, which would break position: sticky. */
  overflow: clip;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The runway: one spacer block per step. The negative margin pulls the
   runway up over the sticky stage's own flow box (one viewport tall), so the
   first step begins exactly where the stage pins. Without it there is ~1
   viewport of dead scroll — stage pinned, card 1 showing, but the engine not
   yet engaged — that swallows the first scroll gesture on entry and exit. */
.sws-stepper__track {
  margin-top: calc(-100svh + var(--nav-h));
  pointer-events: none;   /* pure scroll spacer — never intercept the stage */
}
.sws-stepper__block { height: 100svh; }

.sws-stepper__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--sp-6);
  width: 100%;
}

/* --- Step diagram (pinned, left) --- */
.sws-step-diagram {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 480px;
}

.sws-step-diagram__svg {
  width: 100%;
  max-width: 440px;
  height: auto;
}

/* --- Stepped cards (right) ---
   Every card shares one grid cell so they stack; the column sizes to the
   tallest. Only the active card is opaque. */
.sws-stepper__cards { display: grid; }

.sws-stepper__card {
  grid-area: 1 / 1;
  align-self: center;
  max-width: 460px;
  padding: var(--sp-4) var(--sp-5);
  background: rgba(240, 200, 21, 0.06);
  border: 1px solid var(--c-line-dark);
  border-left: 3px solid var(--c-gold);
  border-radius: var(--r-lg);
  display: grid;
  gap: var(--sp-2);
  /* Three frames per card — incoming (here: offset toward the viewer,
     transparent), is-active (settled), is-passed (drifted away). The
     classes are set by sws-program.js; the transition is time-based so a
     card always flies in fully, at any scroll speed. */
  opacity: 0;
  transform: translateY(44px) scale(0.97);
  transition: opacity 0.5s ease,
              transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
}

.sws-stepper__card.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.sws-stepper__card.is-passed {
  opacity: 0;
  transform: translateY(-44px) scale(0.97);
}

.sws-stepper__card h3 {
  color: var(--c-on-dark);
  font-size: var(--t-h3);
}

.sws-stepper__card p {
  color: var(--c-on-dark-2);
}

.sws-step-num {
  display: block;
  color: var(--c-gold);
  margin-bottom: 0.25rem;
}

/* Override schematic colors for dark background */
.sws-program .schematic .node {
  stroke: var(--c-gold);
  stroke-width: 1.5;
}

.sws-program .schematic .wire {
  stroke: rgba(245, 245, 247, 0.28);
}

.sws-program .schematic .label {
  fill: var(--c-on-dark-2);
}

.sws-node-num {
  fill: var(--c-gold);
  font-family: var(--f-mono);
  font-size: 13px;
  font-weight: 400;
}

/* Step label — main text (e.g. "ASSESSMENT") */
.sws-label-main {
  font-family: var(--f-mono);
  font-size: 11px;
  fill: var(--c-on-dark);
  letter-spacing: 0.08em;
}

.sws-step-sub {
  fill: rgba(245, 245, 247, 0.44);
  font-family: var(--f-mono);
  font-size: 9px;
}

/* Per-node highlight rings — only the active one is visible. data-active
   (1-based) is set on .sws-stepper by sws-program.js; before the stepper
   engages, ring 1 shows by default. */
.sws-highlight-ring {
  stroke: var(--c-gold);
  stroke-width: 2;
  fill: rgba(240, 200, 21, 0.08);
  opacity: 0;
  transition: opacity 300ms var(--ease-out);
}
.sws-stepper:not([data-active]) .sws-highlight-ring--1,
.sws-stepper[data-active="1"] .sws-highlight-ring--1,
.sws-stepper[data-active="2"] .sws-highlight-ring--2,
.sws-stepper[data-active="3"] .sws-highlight-ring--3,
.sws-stepper[data-active="4"] .sws-highlight-ring--4 { opacity: 1; }

/* --- Static fallback: reduced motion AND no-JS ---
   step-scroller.js is inert under prefers-reduced-motion, so the CSS must
   stand in: unpin the stage, drop the scroll runway, and unstack the cards
   so every step is visible and legible. Same treatment for no-JS. */
@media (prefers-reduced-motion: reduce) {
  .sws-stepper__stage {
    position: static;
    height: auto;
    overflow: visible;
  }
  .sws-stepper__track { display: none; }
  .sws-stepper__layout { align-items: start; }
  .sws-stepper__cards { gap: var(--sp-3); }
  .sws-stepper__card {
    grid-area: auto;
    opacity: 1 !important;
    transform: none !important;
    max-width: 100%;
  }
}
.no-js .sws-stepper__stage {
  position: static;
  height: auto;
  overflow: visible;
}
.no-js .sws-stepper__track { display: none; }
.no-js .sws-stepper__layout { align-items: start; }
.no-js .sws-stepper__cards { gap: var(--sp-3); }
.no-js .sws-stepper__card {
  grid-area: auto;
  opacity: 1;
  transform: none;
  max-width: 100%;
}

/* =============================================================================
   4. PROOF POINT — four-tile grid (reuses the .sws-benefit tile component, §2b)
   ============================================================================= */

.sws-possible {
  background: var(--c-bg);
  padding-bottom: 0;   /* tiles meet the next (Who It's For) section directly —
                          no white gap below the tile band */
}

/* Proof-point count-up block — recoloured to match the Claude Design palette
   used by the .sws-benefit__visual--cycle / --bids and .aeos-savings graphics
   above (pale-blue ground, dark-slate display numbers, light-blue accents,
   muted-slate labels). Sits in the same 16/7 slot the other tiles use. */
.sws-proof__stat {
  width: 100%;
  margin-top: auto;          /* pin to the tile's bottom edge */
  aspect-ratio: 16 / 7;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  background: #F2F9FD;       /* pale-blue ground from the Claude Design palette */
  border: 1px solid #CFE6F4;
  border-radius: var(--r-lg);
}
.sws-proof__stat .sws-countup__arrow,
.sws-proof__stat .sws-countup__label { color: #64748B; }

/* --- Count-up --- */
.sws-countup-group {
  text-align: center;
}

.sws-countup {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  justify-content: center;
  flex-wrap: wrap;
}

/* Display numbers — dark slate (matches the "80%" hero in the AEOS Savings
   graphic). Compound selector lifts specificity above the foundation's
   `.section:not(.section--dark) .stat__num` ink override and the legacy
   `.stat__num--gold` colour. */
.sws-countup .sws-countup__from,
.sws-countup .sws-countup__to,
.section:not(.section--dark) .sws-countup__from.stat__num,
.section:not(.section--dark) .sws-countup__to.stat__num {
  font-family: var(--f-display);
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #1F2937;
}

.sws-countup__arrow {
  font-family: var(--f-display);
  font-size: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  color: #7CC0E8;            /* light-blue accent — matches the flow arrows in
                                 the cycle, bids, and savings graphics */
  line-height: 1;
}

.sws-countup__label {
  margin-top: var(--sp-2);
  font-family: var(--f-mono);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748B;            /* muted slate */
  max-width: 32ch;
  margin-inline: auto;
}

/* =============================================================================
   5. WHO IT'S FOR
   ============================================================================= */

.sws-who {
  text-align: left;
}

.sws-who .eyebrow {
  display: block;
  margin-bottom: var(--sp-2);
}

.sws-who h2 {
  margin-bottom: var(--sp-3);
}

.sws-who .lead {
  margin-bottom: var(--sp-4);
}

/* =============================================================================
   6. AEOS CROSS-LINK BAND
   ============================================================================= */

.sws-aeos-band {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--sp-6);
  align-items: center;
  background: var(--c-bg-alt);
  padding: var(--sp-6);
  border-radius: var(--r-xl);
}

.sws-aeos-band .eyebrow {
  display: block;
  margin-bottom: var(--sp-2);
}

.sws-aeos-band .cross-link__title {
  font-size: var(--t-h2);
  margin-bottom: var(--sp-3);
}

.sws-aeos-band .cross-link__body {
  margin-bottom: var(--sp-4);
  font-size: var(--t-lead);
  line-height: 1.5;
}

.sws-aeos-band__diagram {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  align-items: center;
}

/* Old .sws-aeos-schematic styles — retained in case the legacy schematic
   ever needs to come back. Current "what comes next" diagram is .aeos-savings. */
.sws-aeos-schematic .node       { stroke: var(--c-accent); }
.sws-aeos-schematic .wire       { stroke: var(--c-ink-3); }
.sws-aeos-schematic .wire-arrow { fill: var(--c-ink-3); }
.sws-aeos-schematic .label      { fill: var(--c-ink-2); }

/* AEOS Savings Graphic — Claude Design handover (inlined SVG, see markup).
   1:1 viewBox 800×800; the text-class names are scoped under the parent so
   they can't leak elsewhere on the page. */
.aeos-savings {
  display: block;
  width: 100%;
  height: auto;
  max-width: 480px;
  margin-inline: auto;
  overflow: visible;          /* let the float-shadow extend past the box */
}

.aeos-savings text {
  font-family: var(--f-display);
}

.aeos-savings .float-shadow {
  filter:
    drop-shadow(0 22px 38px rgba(74, 155, 209, 0.22))
    drop-shadow(0 8px 14px  rgba(15, 23, 42,  0.08));
}

.aeos-savings .kicker,
.aeos-savings .bracket-label {
  font-size: 12px;
  font-weight: 600;
  fill: #4A9BD1;
  letter-spacing: 0.22em;
}

.aeos-savings .kicker {        /* top kicker sits 1px larger */
  font-size: 13px;
}

.aeos-savings .pill-title {
  font-size: 14px;
  font-weight: 700;
  fill: #1F2937;
  letter-spacing: 0.04em;
}

.aeos-savings .pill-sub {
  font-size: 11px;
  font-weight: 500;
  fill: #64748B;
  letter-spacing: 0.12em;
}

.aeos-savings .pill-title-white {
  font-size: 26px;
  font-weight: 700;
  fill: #ffffff;
  letter-spacing: 0.04em;
}

.aeos-savings .pill-sub-white {
  font-size: 11px;
  font-weight: 600;
  fill: #ffffff;
  fill-opacity: 0.92;
  letter-spacing: 0.14em;
}

.aeos-savings .bar-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.aeos-savings .pct {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* =============================================================================
   7. CTA / ASSESSMENT
   ============================================================================= */

.sws-assessment .cta-band__inner {
  max-width: 760px;
}

.sws-assessment .eyebrow {
  display: block;
  margin-bottom: var(--sp-2);
}

.sws-assessment h2 {
  color: var(--c-on-dark);
  margin-bottom: var(--sp-2);
}

.sws-assessment p {
  color: var(--c-on-dark-2);
  font-size: var(--t-lead);
  margin-bottom: var(--sp-4);
}

/* --- Assessment form ---
   Custom-styled form submitted to the HubSpot Forms API by js/forms.js (the
   same .cta-form component as the home contact form). Styled for this dark
   section: white fields, light labels, gold focus + accents. */
.cta-form {
  margin: 0 auto;
  max-width: 540px;
  text-align: left;
}

.cta-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.cta-form__row--single { grid-template-columns: 1fr; }

.cta-form__field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.cta-form__label {
  font-family: var(--f-mono);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-on-dark-2);
}

.cta-form input:not([type="checkbox"]),
.cta-form select,
.cta-form textarea {
  width: 100%;
  padding: 0.72rem 0.9rem;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--c-ink);
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  -webkit-appearance: none;
  appearance: none;
}

.cta-form textarea {
  resize: vertical;
  min-height: 6.5rem;
}

.cta-form input::placeholder,
.cta-form textarea::placeholder { color: var(--c-ink-3); }

.cta-form input:not([type="checkbox"]):focus,
.cta-form select:focus,
.cta-form textarea:focus {
  outline: none;
  border-color: var(--c-gold);
  box-shadow: 0 0 0 3px rgba(240, 200, 21, 0.25);
}

/* Custom caret for the role dropdown */
.cta-form select {
  cursor: pointer;
  padding-right: 2.4rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23515154' stroke-width='1.6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.95rem center;
}

/* Consent checkbox */
.cta-form__group {
  border: 0;
  margin: 0 0 var(--sp-4);
  padding: 0;
}
.cta-form__check {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--c-on-dark-2);
  cursor: pointer;
}
.cta-form__check input {
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0.15rem;
  flex-shrink: 0;
  accent-color: var(--c-gold);
  cursor: pointer;
}

.cta-form__submit { width: 100%; }

/* Submit feedback — success / error messages set by js/forms.js */
.cta-form__status {
  margin: var(--sp-3) 0 0;
  font-size: 0.95rem;
  line-height: 1.5;
  text-align: center;
  color: var(--c-on-dark-2);
}
.cta-form__status--ok {
  color: #4ade80;
  font-weight: 600;
}
.cta-form__status--error { color: #fca5a5; }
.cta-form__status a { color: inherit; }

@media (max-width: 560px) {
  .cta-form__row { grid-template-columns: 1fr; }
}

/* =============================================================================
   8. RESPONSIVE
   ============================================================================= */

@media (max-width: 1024px) {
  .sws-stepper__layout {
    gap: var(--sp-4);
  }

  .sws-aeos-band {
    grid-template-columns: 1fr;
  }

  .sws-aeos-band__diagram {
    display: none;   /* hide schematic at tablet — text carries the message */
  }
}

@media (max-width: 768px) {
  /* Drop the hero image on mobile: side-by-side it crushes the headline into a
     narrow column next to a useless thumbnail. Hidden, the text uses the full
     width. */
  .sws-hero__media { display: none; }

  .sws-hero h1::after {
    width: 40px;
  }

  /* Single column — the card carries the section; the step diagram is
     decorative (aria-hidden), so drop it rather than cramp the layout. */
  .sws-stepper__layout {
    grid-template-columns: 1fr;
  }

  .sws-stepper__diagram {
    display: none;
  }

  .sws-stepper__card {
    max-width: 100%;
    padding: var(--sp-4);
  }

  .sws-aeos-band {
    padding: var(--sp-4);
    border-radius: var(--r-lg);
  }

  .sws-countup {
    gap: var(--sp-2);
  }
}