/* ============================================================================
   Product page
   ---------------------------------------------------------------------------
   The nine-section rhythm shared by SmartComply and SmartBot: a two-column
   banner, a challenge with three cards, a demonstration on the yellow band, a
   capability grid, outcomes on the dark band, a numbered process, a proof
   section, an FAQ over the park photograph, and a closing form.

   Both owners' documents describe the same nine sections, so the two pages run
   one stylesheet rather than a copy each — a change to the rhythm reaches both.
   The `sc-` prefix predates the second page; it reads as "section", not as
   SmartComply. Anything true of only one page lives in that page's own
   stylesheet.

   The palette is SmartRoots' own, at the owner's instruction — brand blue
   (--blue-500, #2369D2) and the yellow accent — on the same tokens as every
   other page, rather than the mockups' colours.
   ========================================================================= */

.sc-hero__inner>*,
.sc-demo__pair>*,
.sc-out__grid>*,
.sc-pilot__grid>*,
.sc-close__grid>* {
  min-width: 0;
}

/* --- Shared ------------------------------------------------------------------ */

.sc-eyebrow {
  margin: 0;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--blue-600);
}

.sc-title {
  margin: 1rem 0 0;
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 96, 'wdth' 100;
  font-size: clamp(1.6rem, 1.2rem + 1.7vw, 2.5rem);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  text-wrap: balance;
}

.sc-title--left {
  text-wrap: pretty;
}

.sc-head {
  max-width: 54rem;
}

/* The title's top margin is the gap under an eyebrow. The demonstration has no
   eyebrow, so there it would start 1rem low and break the section rhythm. */
.sc-head> :first-child .sc-title,
.sc-head>.sc-title:first-child {
  margin-top: 0;
}

.sc-head--center {
  margin-inline: auto;
  text-align: center;
}

.sc-head__body {
  margin: 1rem auto 0;
  max-width: 62ch;
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--text-secondary);
}

.sc-note {
  margin: 0.6rem 0 0;
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--text-muted);
}

.sc-note--center {
  text-align: center;
}

/* --- The page's field -------------------------------------------------------
   Every section below the banner shares one full-width pale field rather than
   sitting in its own rounded box, so the page reads as continuous bands. The
   white cards inside them carry the structure the boxes used to.

   Because the sections are the positioned ancestors now, the park line art in
   `.cpark` anchors to the full width of the page rather than to the container's
   edges.                                                                     */

.sc-chal,
.sc-demo,
.sc-caps,
.sc-out,
.sc-proc,
.sc-pilot,
.sc-faq,
.sc-close {
  position: relative;
  overflow: hidden;
  background: var(--blue-50);
}

/* The first band starts white, exactly as the banner above it ends, and eases
   into the field over its first quarter — otherwise the two meet in a hard
   horizontal line across the page. */
.sc-chal {
  background: linear-gradient(180deg, var(--white) 0%, var(--blue-50) 26%);
}

/* Kept as a plain wrapper: the box it used to draw now belongs to the section,
   and it must not be the positioned ancestor of the park art. */
.sc-panel {
  position: static;
}

.sc-panel__inner {
  position: relative;
  z-index: 1;
}

/* White cards, used by the challenge, the capabilities and the pilot. */
.sc-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border-radius: var(--r-xl);
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--border);
  transition: box-shadow var(--d-base) var(--ease-out-soft),
    transform var(--d-base) var(--ease-out-soft);
}

.sc-card:hover {
  transform: translateY(-3px);
  box-shadow: inset 0 0 0 1px var(--blue-300), var(--e-1);
}

/* The owner's icons come with their own pale circle, so they stand in for the
   glyph tile rather than sitting inside one. */
.sc-card__icon {
  display: block;
  flex: none;
  width: 4.5rem;
  height: 4.5rem;
  margin: -0.35rem 0 -0.15rem -0.35rem;
  /* the art is inset in its own circle */
}

.sc-card__k {
  margin: 1rem 0 0;
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.35;
  color: var(--blue-700);
}

.sc-card__d {
  margin: 0.5rem 0 0;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-secondary);
}

.sc-cta-row {
  display: flex;
  justify-content: center;
  margin-top: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
}

.sc-cta-row--stack {
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  text-align: center;
}

.sc-checks {
  display: grid;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sc-check {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  min-width: 0;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--text-secondary);
}

.sc-check__mark {
  flex: none;
  margin-top: 0.1rem;
  color: var(--blue-500);
}

/* --- 1. Banner ---------------------------------------------------------------- */

.sc-hero {
  position: relative;
  overflow: hidden;
  padding-top: clamp(7rem, 5rem + 8vw, 11rem);
  padding-bottom: clamp(2.5rem, 2rem + 3vw, 4rem);
  /* The bare fallback. Every page on the site now adds `--wash` below; this
     stays white so a hero built without it still has a defined ground. */
  background: var(--white);
}

.sc-hero__field {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* The banner field recLite established and every product and audience page now
   takes: the page grey under the site's two blooms. It requires banner artwork
   whose paper ground is keyed out — otherwise the picture reads as a white box
   sitting on the tint. SmartComply was the last holdout on white for exactly
   that reason; its banner is now a keyed WebP, so the whole family matches. */
.sc-hero--wash {
  background: var(--page);
}

.sc-hero--wash .sc-hero__field {
  background: var(--page-wash);
}

.sc-hero__inner {
  position: relative;
  display: grid;
  gap: clamp(2.5rem, 1.5rem + 4vw, 4rem);
  align-items: center;
}

.sc-hero__title {
  margin: 1.1rem 0 0;
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 96, 'wdth' 100;
  font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3.1rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: var(--blue-700);
}

.sc-hero__lead {
  margin-top: 1.35rem;
  max-width: 52ch;
}

.sc-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem;
  margin-top: 2rem;
}

.sc-play {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 3rem;
  padding: 0.7rem 1.4rem;
  border-radius: var(--r-pill);
  background: var(--white);
  box-shadow: inset 0 0 0 1.5px var(--border-strong);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-900);
  text-decoration: none;
  transition: box-shadow var(--d-fast) var(--ease-out-soft),
    background-color var(--d-fast) var(--ease-out-soft);
}

.sc-play:hover {
  box-shadow: inset 0 0 0 1.5px var(--blue-400);
  background: var(--blue-50);
}

.sc-play__mark {
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--blue-500);
  color: #fff;
}

.sc-hero__assurances {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.9rem 1.5rem;
  margin: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem) 0 0;
  padding: 0;
  list-style: none;
}

.sc-hero__assurances li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--text-secondary);
}

.sc-hero__assurance-icon {
  flex: none;
  color: var(--blue-600);
}

/* The owner's banner artwork, used as supplied. It carries its own white
   ground, which is why the section above is white — the two meet with no
   visible edge and the picture needs no masking. */
.sc-hero__visual img {
  display: block;
  width: 100%;
  height: auto;
}

.sc-hero__caption {
  margin: 0.9rem 0 0;
  font-size: var(--fs-sm);
  font-weight: 700;
  text-align: center;
  color: var(--blue-700);
}

.sc-hero__visual .sc-note {
  text-align: center;
  margin-top: 0.15rem;
}

@media (min-width: 1024px) {
  .sc-hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  }
}

/* --- 2. The challenge --------------------------------------------------------- */

/* The owner's backdrop, spanning the section. Transparent behind the drawing,
   so it merges with the page's field on its own. */
.sc-chal__bg {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  width: 100%;
  max-width: none;
  height: auto;
  pointer-events: none;
  opacity: .5;
  /* Its pale ground is filled to the picture's own bottom edge, which would
     leave a faint step where this section meets the next. Fading the last
     fifth dissolves that edge; the drawing above it is untouched. */
  -webkit-mask-image: linear-gradient(to bottom, #000 90%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 90%, transparent 100%);
}

/* The design sets this intro on a wide measure, so each of its two paragraphs
   falls in two lines — four in total. Scoped to this section: the other heads
   carry shorter leads that read better on the narrower measure. */
.sc-chal .sc-head {
  max-width: 72rem;
}

.sc-chal .sc-head__body {
  max-width: 70rem;
  /* Evens the two lines rather than leaving a long first line and a short
     second, which is how the design sets them. */
  text-wrap: balance;
}

.sc-chal__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: clamp(0.85rem, 0.7rem + 0.7vw, 1.25rem);
  margin: clamp(2rem, 1.5rem + 2vw, 3rem) 0 0;
  padding: 0;
  list-style: none;
}

/* --- 3. Demonstration --------------------------------------------------------- */

/* The design's own field colour, at the owner's instruction — the one section
   on the page that steps off the pale blue. Its edges are meant to be crisp:
   this is a band, not a blend, so nothing softens the boundaries with the
   sections above and below.

   Consecutive `--flow` sections drop their top padding, which is right while
   they share a field: the rhythm comes from the one gap between them. A band
   is a visible container, so it needs its own air at the top, and so does the
   section that follows it — otherwise both read as crowded against the edge.
   Two bands on this page: the yellow one here and the dark outcomes one, so
   four sections are involved — each band and each section after one.
   Three classes to clear `.section--flow + .section--flow` in base.css. */
.sc-demo {
  background: #F5F5C6;
}

.sc-demo.section.section--flow,
.sc-caps.section.section--flow,
.sc-out.section.section--flow,
.sc-proc.section.section--flow {
  padding-top: var(--section-y);
}

/* The halftone corners, matched to the live SmartComply page: one fan out of
   the top right, one out of the bottom left. What makes it a halftone rather
   than a dot grid is that the dots change SIZE — heavy at the corner, fine as
   they travel away from it — which is the light-and-dark shading the owner
   asked for. Measured off the live page: 13.5px pitch, dots from roughly 5.6px
   across down to under 2px, in a solid #D8D834 with no opacity fade.

   Three layers rather than one, because a CSS dot pattern has a single fixed
   radius. Each layer draws the same lattice at a different radius, and each is
   masked to a different reach from the corner: the heavy dots are confined to
   the corner itself, the medium ones travel further, the fine ones furthest.
   Where the layers overlap they share centres, so the largest simply wins and
   the eye reads one field of dots that grows toward the corner.

   A mask on the element also clips its own pseudo-elements, so the element
   carries the widest reach (the fine layer) and each pseudo-element narrows it
   from there. `.sc-panel__inner` already carries z-index 1, so all of this
   sits behind the copy. */
.sc-halftone {
  --dot: #D8D834;
  --pitch: 13.5px;
  position: absolute;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, var(--dot) 0.9px, transparent 1.05px);
  background-size: var(--pitch) var(--pitch);
}

.sc-halftone::before,
.sc-halftone::after {
  content: '';
  position: absolute;
  inset: 0;
  background-size: var(--pitch) var(--pitch);
}

.sc-halftone::before {
  background-image: radial-gradient(circle, var(--dot) 1.8px, transparent 1.95px);
}

.sc-halftone::after {
  background-image: radial-gradient(circle, var(--dot) 2.8px, transparent 2.95px);
}

.sc-halftone--tr {
  top: 0;
  right: 0;
  width: 34rem;
  height: 29rem;
  -webkit-mask-image: radial-gradient(78% 78% at 100% 0%, #000 42%, transparent 100%);
  mask-image: radial-gradient(78% 78% at 100% 0%, #000 42%, transparent 100%);
}

.sc-halftone--tr::before {
  -webkit-mask-image: radial-gradient(52% 52% at 100% 0%, #000 34%, transparent 100%);
  mask-image: radial-gradient(52% 52% at 100% 0%, #000 34%, transparent 100%);
}

.sc-halftone--tr::after {
  -webkit-mask-image: radial-gradient(30% 30% at 100% 0%, #000 26%, transparent 100%);
  mask-image: radial-gradient(30% 30% at 100% 0%, #000 26%, transparent 100%);
}

.sc-halftone--bl {
  bottom: 0;
  left: 0;
  width: 26rem;
  height: 24rem;
  -webkit-mask-image: radial-gradient(78% 78% at 0% 100%, #000 42%, transparent 100%);
  mask-image: radial-gradient(78% 78% at 0% 100%, #000 42%, transparent 100%);
}

.sc-halftone--bl::before {
  -webkit-mask-image: radial-gradient(52% 52% at 0% 100%, #000 34%, transparent 100%);
  mask-image: radial-gradient(52% 52% at 0% 100%, #000 34%, transparent 100%);
}

.sc-halftone--bl::after {
  -webkit-mask-image: radial-gradient(30% 30% at 0% 100%, #000 26%, transparent 100%);
  mask-image: radial-gradient(30% 30% at 0% 100%, #000 26%, transparent 100%);
}

/* Below this the copy runs the full width and the corners are not free. */
@media (max-width: 899px) {
  .sc-halftone {
    display: none;
  }
}

.sc-demo__pair {
  display: grid;
  gap: clamp(1rem, 0.8rem + 1vw, 1.5rem);
  margin-top: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
}

@media (min-width: 900px) {
  .sc-demo__pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.sc-demo__side {
  padding: clamp(0.9rem, 0.75rem + 0.6vw, 1.25rem);
  border-radius: var(--r-xl);
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--border);
}

/* Both screens are the same height natively, so at their own size the two
   panels line up. Stretching them to the card width would not — one is
   portrait, the other landscape. */
.sc-demo__shot {
  display: block;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
  border-radius: var(--r-md);
}

.sc-demo__label {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--blue-700);
}

.sc-demo__sub {
  margin: 0.15rem 0 0.75rem;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.sc-demo__tools {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: clamp(0.9rem, 0.75rem + 0.8vw, 1.5rem);
  margin: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem) 0 0;
  padding: 0;
  list-style: none;
}

.sc-demo__tools>li {
  display: grid;
  grid-template-columns: 22px 1fr;
  column-gap: 10px;
  align-items: start;
}

.sc-demo__tools .sc-tool__icon {
  grid-column: 1;
  grid-row: 1 / span 2;
}

.sc-demo__tools .sc-tool__k {
  grid-column: 2;
  margin: 0;
}

.sc-demo__tools .sc-tool__d {
  grid-column: 2;
  margin: 4px 0 0;
}

.sc-tool__k {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-900);
}

.sc-tool__d {
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--text-secondary);
}

.sc-demo__tools {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: clamp(0.9rem, 0.75rem + 0.8vw, 1.5rem);
  margin: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem) 0 0;
  padding: 0;
  list-style: none;
}

.sc-tool {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  min-width: 0;
}

.sc-tool__icon {
  flex: none;
  color: var(--blue-600);
}

.sc-tool__text {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.sc-tool__k {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-900);
}

.sc-tool__d {
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--text-secondary);
}

/* --- 4. Capabilities ----------------------------------------------------------- */

/* Six cards, so the track minimum is set to land on three columns at desktop
   and two below it — four across would leave the last row half empty. */
.sc-caps__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21.5rem), 1fr));
  gap: clamp(0.85rem, 0.7rem + 0.7vw, 1.25rem);
  margin: clamp(2rem, 1.5rem + 2vw, 3rem) 0 0;
  padding: 0;
  list-style: none;
}

.sc-example {
  display: grid;
  gap: 0.2rem;
  margin: 0.9rem 0 0;
  padding: 0.6rem 0.75rem;
  border-radius: var(--r-md);
  background: var(--blue-50);
}

.sc-example__label {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

.sc-example__q {
  font-size: var(--fs-xs);
  font-weight: 650;
  color: var(--blue-700);
}

.sc-caps .sc-note--center {
  margin-top: clamp(1.25rem, 1rem + 1vw, 1.75rem);
}

/* --- 5. Outcomes ----------------------------------------------------------------
   The dark band, as the live SmartComply page has it. Its base is that page's
   own #10429B; the light-and-dark comes from two soft blooms sampled off it —
   a cooler, greyer lift out of the top left and a brighter blue out of the
   bottom right — over a base that deepens slightly toward the foot. Measured
   against the live render, the bottom-right bloom lands within a few units of
   it; the top-left one is lighter here because the original appears to carry a
   texture there rather than a gradient, and a texture would be a second thing
   to maintain for no gain.

   Everything from here to the end of the section exists because the field
   flipped: type, rules, tiles and panels were all set for a pale ground.     */

.sc-out {
  background:
    radial-gradient(75% 90% at 8% 4%, rgba(86, 132, 200, .38) 0%, rgba(86, 132, 200, 0) 60%),
    radial-gradient(80% 95% at 98% 100%, rgba(45, 110, 215, .45) 0%, rgba(45, 110, 215, 0) 62%),
    linear-gradient(180deg, #10429B 0%, #0E3A88 100%);
}

.sc-out .sc-eyebrow {
  color: var(--yellow-300);
}

.sc-out .sc-title {
  color: #fff;
}

.sc-out .sc-head__body {
  color: #DCE8FB;
}

/* Solid rather than a veil of white: composited over the panel a .62 white
   lands at 4.42:1 against this band, just under AA for 13px type. */
.sc-out .sc-note {
  color: #B9C8E6;
}

/* Panels rather than cards: a white card on this field would sit on the page
   like a cut-out. These hold the same structure at a fraction of the weight. */
.sc-out .sc-out__col {
  background: rgba(255, 255, 255, .07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
}

.sc-out .sc-out__title {
  color: #fff;
}

.sc-out .sc-check {
  color: #E4EDFC;
}

/* The mark is a filled disc with a white tick cut into it, so on this field the
   disc goes to a veil of white and the tick keeps its contrast against the
   band showing through. Brand blue here would sit on navy and disappear. */
.sc-out .sc-check__mark {
  color: rgba(255, 255, 255, .20);
}

.sc-out__grid {
  display: grid;
  gap: clamp(1rem, 0.8rem + 1vw, 1.5rem);
  margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
}

@media (min-width: 900px) {
  .sc-out__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Each panel takes its own height rather than stretching to the taller one.
     The two previews are the same height now, so this changes nothing today —
     it is here so that a difference in list length shows up as two panels of
     honest height rather than as a hole above the shorter one's preview. */
  .sc-out__grid {
    align-items: start;
  }
}

.sc-out__col {
  display: flex;
  flex-direction: column;
  padding: clamp(1.25rem, 1rem + 1vw, 1.9rem);
  border-radius: var(--r-2xl);
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--border);
}

.sc-out__title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1.25rem;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--blue-700);
}

.sc-out__preview {
  margin-top: auto;
  padding-top: 1.5rem;
}

/* The owner's own cards, drawn to the same height as each other.

   The two files are not the same proportion — the reader is 2.51:1 and the
   inventory 2.28:1 — so at a shared width they drew to different heights. Both
   boxes take the wider proportion and `contain` fits each card inside, which
   means the drawn height matches and the deeper card simply sits a little
   narrower. Cropping or stretching would have been the alternatives, and both
   would have damaged artwork that is already finished.

   The corner rounding is baked into the files rather than set here: `contain`
   leaves the inventory card narrower than its box, and a radius on the box
   would no longer follow the card's own edges. */
.sc-out__shot {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 478;
  object-fit: contain;
}

/* --- 6. Delivery ------------------------------------------------------------------ */

.sc-proc__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: clamp(0.85rem, 0.7rem + 0.8vw, 1.5rem);
  margin: clamp(2rem, 1.5rem + 2vw, 3rem) 0 0;
  padding: 0;
  list-style: none;
}

.sc-step {
  position: relative;
  min-width: 0;
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border-radius: var(--r-xl);
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--border);
  text-align: center;
}

.sc-step__n {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--blue-500);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 800;
}

/* Both pages now use the owner's own step icons, which bring their pale circle
   with them, so no tile is drawn behind them. */
.sc-step__icon {
  display: block;
  width: 4.25rem;
  height: 4.25rem;
  margin: 0.65rem auto 0;
}

.sc-step__k {
  margin: 1rem 0 0;
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--blue-700);
}

.sc-step__d {
  margin: 0.5rem 0 0;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-secondary);
}

/* The arrow sits in the gap between two cards, so it only exists where the
   cards are actually side by side. */
.sc-step__arrow {
  display: none;
}

@media (min-width: 1100px) {
  .sc-step__arrow {
    position: absolute;
    top: 50%;
    right: calc(clamp(0.85rem, 0.7rem + 0.8vw, 1.5rem) / -2);
    display: grid;
    place-items: center;
    transform: translate(50%, -50%);
    color: var(--blue-400);
  }
}

.sc-keep {
  display: grid;
  gap: clamp(1rem, 0.8rem + 1vw, 1.75rem);
  align-items: center;
  margin-top: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border-radius: var(--r-xl);
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--border);
}

.sc-keep__icon {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--r-lg);
  background: var(--blue-50);
  color: var(--blue-600);
}

.sc-keep__k {
  margin: 0;
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--blue-700);
}

.sc-keep__d {
  margin: 0.4rem 0 0;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-secondary);
}

.sc-keep__chips {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 900px) {
  .sc-keep {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
}

.sc-proc .sc-note--center {
  margin-top: clamp(1.25rem, 1rem + 1vw, 1.75rem);
}

/* --- 7. Proof ---------------------------------------------------------------------- */

.sc-pilot__grid {
  display: grid;
  gap: clamp(1.25rem, 1rem + 1.5vw, 2.5rem);
  align-items: center;
  margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
}

@media (min-width: 900px) {
  .sc-pilot__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.sc-pilot__left {
  padding: clamp(1.25rem, 1rem + 1vw, 1.9rem);
  border-radius: var(--r-2xl);
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--border);
}

/* The 5–10 figure, laid over the middle sheet of the drawn fan. The fan is
   centred in its own viewBox, so centring the label on the box puts it on that
   sheet at every width without a measurement. */
.sc-stack {
  position: relative;
  max-width: 26rem;
  margin: 0 auto;
}

/* The middle sheet spans 120..240 of the drawing's 360, so 30% centred sits
   inside it with a margin either side; 47% down is its vertical centre. */
.sc-stack__label {
  position: absolute;
  top: 47%;
  left: 50%;
  display: grid;
  justify-items: center;
  gap: 0.15rem;
  width: 30%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.sc-stack__v {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--blue-700);
}

.sc-stack__d {
  font-size: clamp(0.5rem, 0.4rem + 0.35vw, 0.7rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--text-muted);
}

/* Two across, as the design has them — four in a row made each card too narrow
   for its label to sit beside the icon. */
.sc-kinds {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 479px) {
  .sc-kinds {
    grid-template-columns: minmax(0, 1fr);
  }
}

.sc-kind {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  padding: 0.9rem 1rem;
  border-radius: var(--r-lg);
  background: var(--blue-50);
  box-shadow: inset 0 0 0 1px var(--blue-200);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-900);
}

.sc-kind__icon {
  flex: none;
  color: var(--blue-600);
}

.sc-pilot__sub {
  margin: 0 0 1.25rem;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--blue-700);
}

.sc-eval {
  display: grid;
  gap: 1.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sc-eval__item {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  min-width: 0;
}

.sc-eval__text {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
}

.sc-eval__k {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--blue-700);
}

.sc-eval__d {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-secondary);
}

/* --- 8. FAQs ------------------------------------------------------------------------ */

/* The park photograph, as the section's background.

   It is covered by a scrim of the page's own field colour: heaviest behind the
   heading, lightest across the lower third where the park reads, then closing
   back to the field at the very bottom so the picture dissolves into the
   section below instead of ending on a cut edge.

   It never clears completely. The closing line sits at 83% of the section's
   height, over grass, and at the scrim's lightest that line still measures
   above 4.5:1 — a photograph carrying body copy at full strength would fail at
   some window size no matter how it were tuned. The questions are opaque cards
   for the same reason.

   The scrim is `::after` rather than `::before`: both it and the image sit at
   z-index 0, so painting order decides, and `::before` would end up under the
   photograph instead of over it. */
.sc-faq__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 60%;
  pointer-events: none;
}

.sc-faq::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
      rgb(242 247 255 / .97) 0%,
      rgb(242 247 255 / .93) 38%,
      rgb(242 247 255 / .70) 62%,
      rgb(242 247 255 / .62) 88%,
      rgb(242 247 255 / .93) 97%,
      rgb(242 247 255 / 1) 100%);
}

.sc-faq__list {
  display: grid;
  gap: 0.6rem;
  margin: clamp(2rem, 1.5rem + 2vw, 3rem) auto 0;
  padding: 0;
  max-width: 54rem;
  list-style: none;
}

.sc-q {
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--border);
  transition: box-shadow var(--d-fast) var(--ease-out-soft);
}

.sc-q[open] {
  box-shadow: inset 0 0 0 1px var(--blue-300);
}

.sc-q__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.25rem;
  padding: 0.9rem clamp(0.9rem, 0.8rem + 0.5vw, 1.35rem);
  cursor: pointer;
  list-style: none;
}

.sc-q__head::-webkit-details-marker {
  display: none;
}

.sc-q__text {
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.4;
  color: var(--blue-700);
}

.sc-q__mark {
  flex: none;
  color: var(--blue-500);
}

/* The vertical bar of the plus disappears when the question is open. */
.sc-q__bar {
  transition: opacity var(--d-fast) var(--ease-out-soft);
}

.sc-q[open] .sc-q__bar {
  opacity: 0;
}

.sc-q__a {
  margin: 0;
  padding: 0 clamp(0.9rem, 0.8rem + 0.5vw, 1.35rem) 1.1rem;
  max-width: 68ch;
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--text-secondary);
}

/* This line lands low in the section, where the scrim is lightest and the
   photograph's darkest values are — over the bench's shadow it measured 2:1.
   Rather than flatten the picture everywhere to protect one sentence, the line
   takes the same opaque ground the questions above it use, sized to its own
   text and centred. */
.sc-faq__foot {
  width: max-content;
  max-width: 100%;
  margin: clamp(1.5rem, 1.2rem + 1vw, 2.25rem) auto 0;
  padding: 0.7rem clamp(1rem, 0.8rem + 0.8vw, 1.4rem);
  border-radius: var(--r-pill);
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--border);
  font-size: var(--fs-sm);
  text-align: center;
  color: var(--text-secondary);
}

.sc-faq__link,
.sc-ask__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  color: var(--blue-600);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  transition: gap var(--d-base) var(--ease-out-expo);
}

.sc-faq__link:hover,
.sc-ask__link:hover {
  gap: 0.6rem;
  color: var(--blue-700);
}

/* --- 9. Final conversion -------------------------------------------------------------- */

.sc-close__grid {
  display: grid;
  gap: clamp(1.75rem, 1.4rem + 2vw, 3rem);
  align-items: start;
}

@media (min-width: 1024px) {
  .sc-close__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.sc-close__lead {
  margin: 1.1rem 0 0;
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--text-secondary);
}

.sc-pilot-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-top: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  padding: clamp(1.1rem, 0.9rem + 0.8vw, 1.5rem);
  border-radius: var(--r-xl);
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--border);
}

.sc-pilot-card__k {
  margin: 0;
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--blue-700);
}

.sc-pilot-card__d {
  margin: 0.4rem 0 0;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-secondary);
}

.sc-next {
  margin-top: clamp(1.5rem, 1.2rem + 1vw, 2rem);
}

.sc-next__k {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink-900);
}

.sc-next__d {
  margin: 0.5rem 0 0;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-secondary);
}

.sc-ask {
  margin: clamp(1.25rem, 1rem + 1vw, 1.75rem) 0 0;
  font-size: var(--fs-sm);
}

.sc-ask__lead {
  display: block;
  color: var(--text-secondary);
}

.sc-ask__link {
  margin-top: 0.2rem;
}

/* The form card */
.scf {
  padding: clamp(1.35rem, 1.1rem + 1.2vw, 2rem);
  border-radius: var(--r-2xl);
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--border), var(--e-2);
}

.scf__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--blue-700);
}

.scf__lead {
  margin: 0.4rem 0 1.4rem;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}

.scf__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

.scf__field {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.scf__field--wide {
  grid-column: 1 / -1;
}

@media (max-width: 479px) {
  .scf__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.scf__label {
  margin-bottom: 0.4rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--ink-900);
}

.scf__req {
  color: var(--blue-600);
}

.scf__opt {
  font-weight: 500;
  color: var(--text-muted);
}

.scf__control {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.6rem 0.8rem;
  border: 0;
  border-radius: var(--r-md);
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--border-strong);
  font-family: inherit;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--ink-900);
  transition: box-shadow var(--d-fast) var(--ease-out-soft);
}

.scf__control::placeholder {
  color: var(--text-muted);
}

.scf__control:hover {
  box-shadow: inset 0 0 0 1px var(--blue-300);
}

.scf__control:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--blue-500);
}

.scf__control.is-bad {
  box-shadow: inset 0 0 0 2px var(--danger, #C0392B);
}

textarea.scf__control {
  min-height: 5.5rem;
  resize: vertical;
}

.scf__error {
  margin: 0.35rem 0 0;
  font-size: var(--fs-xs);
  color: var(--danger, #C0392B);
}

.scf__required {
  margin: 0.9rem 0 0;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.scf__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 3rem;
  margin-top: 1rem;
  padding: 0.75rem 1.5rem;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--yellow-300);
  color: var(--ink-900);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--e-yellow);
  transition: gap var(--d-base) var(--ease-out-expo),
    background-color var(--d-fast) var(--ease-out-soft);
}

.scf__submit:hover {
  gap: 0.85rem;
  background: var(--yellow-400);
}

.scf__note {
  margin: 0.7rem 0 0;
  font-size: var(--fs-xs);
  text-align: center;
  color: var(--text-muted);
}

@media (prefers-reduced-motion: reduce) {

  .sc-card,
  .sc-card:hover {
    transition: none;
    transform: none;
  }
}