@charset "utf-8";
/* ==========================================================================
   page-book.css — "Book a mapping call"  ·  LIGHT-PRIMARY
   Page-scoped styles. Theme variables only; nothing hardcoded except the
   documented light-band diagram fallbacks behind --rf-* theme vars.

   01  Hero band ............ .bhero
   02  The form plate ....... .bform · .wform
   03  After you send ....... .afters
   04  Call diagram ......... .callplate · .callfield
   05  Outcomes ............. .outcomes
   06  Bring / During ....... .bring · .during
   07  FAQ + Not ready ...... .faq · .notready
   08  Closing band ......... .bclose
   09  Responsive ........... 1180 / 1024 / 768 / 560
   10  Reduced motion
   ========================================================================== */


/* ==========================================================================
   01 · HERO
   ========================================================================== */

/* Tightened at the top so the form's submit button clears the 1440 fold — the
   50ms rule wants the primary CTA on the first screen, and on this page the
   primary CTA is "Send the workflow", not the nav button. */
.bhero {
  position: relative;
  overflow: hidden;
  padding-top: clamp(2.25rem, 3.6vw, 3.5rem);
  padding-bottom: var(--s-16);
}

.bhero__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: start;
  gap: clamp(2.5rem, 4.5vw, 4.5rem);
}

/* --- copy column ---------------------------------------------------------- */

.bhero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 34rem;
  padding-top: var(--s-2);
}

.bhero__title {
  margin: 0;
  max-width: 17ch;
  font-size: clamp(2.75rem, 4.5vw, 4.35rem);
  line-height: 1.02;
  letter-spacing: -0.032em;
  text-wrap: balance;
}

/* second line of the h1 — inked DOWN toward navy, never glowing up */
.bhero__title-accent {
  display: block;
  margin-top: var(--s-2);
  max-width: 16ch;
  text-wrap: balance;
  font-size: clamp(2.1rem, 3.4vw, 3.3rem);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.022em;
  color: var(--blue-deep);
}

.bhero__lead {
  margin: var(--s-6) 0 0;
  max-width: 40ch;
  color: var(--body);
}

.bhero__lead strong {
  color: var(--ink);
  font-weight: 600;
}

.bhero__facts {
  list-style: none;
  width: 100%;
  margin: var(--s-8) 0 0;
  padding: var(--s-5) 0 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5) var(--s-10);
}

.bhero__facts > li {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  min-width: 7.5rem;
}

.bhero__fact-k {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.bhero__fact-v {
  font-size: var(--t-body);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.35;
}

/* what this is NOT — three quiet chips, not a bullet wall */
.nots {
  list-style: none;
  margin: var(--s-6) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.nots > li {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0.42rem 0.8rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-pill);
  background: var(--bg-card);
  color: var(--body);
  font-size: var(--t-sm);
  line-height: 1.3;
  white-space: nowrap;
}

.nots > li::before {
  content: "";
  flex: none;
  width: 10px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.5;
}

.bhero__who {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  margin: var(--s-8) 0 0;
  padding: var(--s-4) var(--s-5);
  max-width: 42ch;
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--blue-deep);
  border-radius: var(--r-md);
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
  color: var(--body);
  font-size: var(--t-sm);
  line-height: 1.55;
}

/* Navy, not amber. The first screen gets exactly ONE amber mark — the 30-minute
   stamp on the form — so the eye lands where the decision is made. This note is
   trust, not the human-gate. */
.bhero__who-dot {
  flex: none;
  width: 9px;
  height: 9px;
  margin-top: 0.42em;
  border-radius: 50%;
  background: var(--blue-deep);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue-deep) 18%, transparent);
}

/* A second, non-form path out of the hero: the work itself. The page is a lead
   form, so the reader who is not ready to type gets a way to see the builds. */
.bhero__proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-4);
  margin: var(--s-5) 0 0;
  color: var(--muted);
  font-size: var(--t-sm);
  line-height: 1.5;
}

.bhero__jump {
  margin-top: var(--s-8);
}


/* ==========================================================================
   02 · THE FORM PLATE  (the page's centre of gravity)
   ========================================================================== */

.bform {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: clamp(1.4rem, 2.6vw, 2.1rem);
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  background: var(--paper-card, var(--bg-card));
  box-shadow: var(--shadow-lift);
  scroll-margin-top: 6rem;
}

/* a hairline of brand colour along the top edge of the plate.
   Navy → blue only: amber is reserved for the 30-minute stamp and the human
   gate, and must never be spent on decoration. */
.bform::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  border-radius: var(--r-2xl) var(--r-2xl) 0 0;
  background: linear-gradient(90deg, var(--blue-deep), var(--blue));
}

.bform__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
}

.bform__title {
  margin: 0;
  letter-spacing: -0.018em;
}

.bform__stamp {
  flex: none;
  display: inline-flex;
  align-items: baseline;
  gap: 0.15em;
  padding: 0.45rem 0.7rem;
  border: 1px solid color-mix(in srgb, var(--amber) 45%, transparent);
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--amber) 12%, transparent);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--amber-ink, #8A5D05);
}

.bform__stamp b {
  font-family: var(--font-display);
  font-size: var(--t-title-2);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.bform__lead {
  margin: 0;
  max-width: 52ch;
  color: var(--body);
  font-size: var(--t-sm);
  line-height: 1.6;
}

.wform {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: var(--s-3) var(--s-5);
}

.wform__wide {
  grid-column: 1 / -1;
}

.field__opt {
  margin-left: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 400;
}

.wform .input,
.wform .select,
.wform .textarea {
  transition:
    border-color var(--d-2) var(--e-out),
    box-shadow var(--d-2) var(--e-out),
    background-color var(--d-2) var(--e-out);
}

.wform .input:hover,
.wform .select:hover,
.wform .textarea:hover {
  border-color: var(--line-strong);
}

/* Optional fields fold away. The visible ask is three fields and a consent box;
   anyone who wants to say more opens this. Styled as a quiet row, not a card,
   so it never competes with the submit. */
.wform__more {
  margin: var(--s-1) 0 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}

.wform__more > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-1) var(--s-3);
  min-height: 48px;
  padding: var(--s-3) 2rem var(--s-3) 0;
  position: relative;
  cursor: pointer;
  list-style: none;
}

.wform__more > summary::-webkit-details-marker { display: none; }
.wform__more > summary::marker { content: ""; }

.wform__more-t {
  color: var(--ink);
  font-size: var(--t-sm);
  font-weight: 500;
}

.wform__more-s {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.wform__more > summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: calc(50% - 6px);
  width: 8px;
  height: 8px;
  border-right: 1.75px solid var(--muted);
  border-bottom: 1.75px solid var(--muted);
  rotate: 45deg;
  transition: rotate var(--d-2) var(--e-out), border-color var(--d-2) var(--e-out);
}

.wform__more:hover > summary::after,
.wform__more > summary:focus-visible::after { border-color: var(--link); }
.wform__more[open] > summary::after { rotate: -135deg; }

.wform__more-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: var(--s-3) var(--s-5);
  padding: var(--s-1) 0 var(--s-5);
}

.wform__consent {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  /* the consent box carries an 11px transparent halo (see below), so the plate
     edge gains that 11px back and the tick stays optically where it was */
  padding-left: calc(var(--s-4) + 11px);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  background: var(--bg-card-2);
}

/* ---- consent checkbox: 22px mark, 44px target ---------------------------
   A thumb needs 44px; the design needs a 22px mark. The input's border box is
   grown to 44x44 with an 11px transparent border and pulled back by an equal
   negative margin, so the hit area is full-size while the drawn box, the row
   height and the text position are all unchanged. The mark itself is the
   padding box, coloured from the theme only. */
.wform__consent .check {
  position: relative;
}

.wform__consent .check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  flex: none;
  width: 44px;
  height: 44px;
  margin: -11px;
  border: 11px solid transparent;
  border-radius: 17px; /* 11px halo + 6px on the drawn box */
  background-color: var(--bg-card);
  background-clip: padding-box;
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
  cursor: pointer;
  transition:
    background-color var(--d-2) var(--e-out),
    box-shadow var(--d-2) var(--e-out);
}

.wform__consent .check:hover input[type="checkbox"] {
  box-shadow: inset 0 0 0 1.5px var(--blue-deep);
}

.wform__consent .check input[type="checkbox"]:checked {
  background-color: var(--blue-deep);
  box-shadow: inset 0 0 0 1.5px var(--blue-deep);
}

.wform__consent .check input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: -8px;
}

/* the tick, drawn on the label so it can take a theme colour */
.wform__consent .check::before {
  content: "";
  position: absolute;
  left: 5.5px;
  top: 6.5px;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--bg-card);
  border-bottom: 2px solid var(--bg-card);
  border-radius: 1px;
  rotate: -45deg;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--d-2) var(--e-out);
}

.wform__consent .check:has(input[type="checkbox"]:checked)::before {
  opacity: 1;
}

.wform__consent label,
.wform__consent .field__label {
  margin: 0;
  color: var(--body);
  font-size: var(--t-sm);
  line-height: 1.55;
}

.wform__submit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line-soft);
}

.wform__submit .btn--primary {
  box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--blue) 65%, transparent);
}

.wform__submit > p {
  margin: 0;
  max-width: 34ch;
  color: var(--muted);
}

.notice {
  margin: 0;
}

.notice:empty {
  display: none;
}

.notice:not(:empty) {
  display: block;
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  border-radius: var(--r-md);
  background: var(--bg-card-2);
  color: var(--body);
  font-size: var(--t-sm);
  line-height: 1.6;
}

/* Both caveats now sit in ONE fine-print block below the plate's rule, at the
   same weight as the privacy line. The pending-plumbing note used to run as a
   pill-badged panel, which read as a debug artifact shipped as layout; it is
   the same sentence, set as fine print. */
.bform__fine {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin: 0;
  padding-top: var(--s-4);
  border-top: 1px solid var(--line-soft);
}

.bform__fine > p {
  margin: 0;
  max-width: 72ch;
  color: var(--muted);
  font-size: var(--t-xs);
  line-height: 1.65;
}

/* Fine print still has to be tappable. Vertical padding on an inline link grows
   the hit rectangle to 44px without touching the line box, so the paragraph
   sets exactly as before and the two legal links stop being 16px slivers. */
.bform__fine a {
  padding-block: 0.95rem;
  padding-inline: 2px;
  margin-inline: -2px;
}

/* Size only — the flag's colour stays exactly as the site defines it. At its
   default size the two pending-plumbing tokens were the loudest marks on the
   plate, which is what made the block read as a debug panel. */
.bform__fine .placeholder-flag {
  font-size: 0.95em;
  padding-block: 0.05em;
}

.bform__fine-k {
  color: var(--body);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.bform__fine-k::after {
  content: " —";
}


/* ==========================================================================
   03 · AFTER YOU SEND
   ========================================================================== */

/* Lifted out of the hero copy column so the first screen carries ONE idea.
   Reads as a three-port channel spanning the full hero width. */
.afters-strip {
  grid-column: 1 / -1;
  min-width: 0;
  margin-top: var(--s-12);
  padding-top: var(--s-6);
  border-top: 1px solid var(--line);
}

.afters__label {
  margin: 0;
}

.afters {
  list-style: none;
  width: 100%;
  margin: var(--s-6) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-6) var(--s-8);
}

.afters__step {
  position: relative;
  min-width: 0;
  padding-top: var(--s-8);
}

/* The channel the three ports sit on — teal, from the theme, never hardcoded.
   Same 2.5px weight and same colour ramp as the .dg-channel strokes in the call
   figure, so this strip reads as the same drawing system rather than a hairline
   rule. It was at 0.55 opacity and effectively disappeared. */
.afters__step::before {
  content: "";
  position: absolute;
  left: 0;
  right: calc(var(--s-8) * -1);
  top: 0.95rem;
  height: 2.5px;
  border-radius: 2px;
  background: var(--rf-ch-1, var(--line));
  opacity: 0.9;
}

/* the run ends: a stub, not a line trailing into nothing */
.afters__step:last-child::before {
  right: auto;
  width: 1.9rem;
}

.afters__n {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border: 1.5px solid color-mix(in srgb, var(--rf-port, var(--accent)) 50%, transparent);
  border-radius: 50%;
  background: var(--bg-card);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  color: var(--accent);
}

.afters__t {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--t-title-3);
  font-weight: 500;
  line-height: 1.35;
}

.afters__b {
  margin: var(--s-2) 0 0;
  max-width: 34ch;
  color: var(--muted);
  font-size: var(--t-sm);
  line-height: 1.6;
}


/* ==========================================================================
   04 · THE CALL DIAGRAM
   ========================================================================== */

/* The figure uses the shared kit only: .figure / .figure__scroll / .figure__cap
   for the plate, and .dg-channel / .dg-port / .dg-node / .dg-ring / .dg-human /
   .dg-label / .dg-plate for the marks. No colours are declared here — every
   stroke and fill resolves from the theme's --rf-* vars, so the figure flips
   correctly with the band. Page CSS only sets layout and the focal pulse. */

/* The plate hugs the figure instead of the figure being stretched to the plate.
   Rendering the 620-unit viewBox at ~680px keeps scale ≈1.1, so the kit's
   2.5 strokes and 10.5px labels land at the SAME weight as every other diagram
   on the site. Blowing it up to full band width was the drop-off. */
.callplate {
  max-width: 800px;
  margin: 0 auto var(--s-12);
}

.callplate .figure__scroll .callfield {
  display: block;
  width: 100%;
  max-width: 680px;
  margin-inline: auto;
  overflow: visible;
}

.callplate .figure__scroll .callfield--tall {
  display: none;
  max-width: 320px;
}

/* the one focal point: the amber gate breathes */
@media (prefers-reduced-motion: no-preference) {
  .callfield .dg-human-dot {
    animation: cf-gate 4.8s var(--e-inout) infinite;
    transform-box: fill-box;
    transform-origin: center;
  }
  @keyframes cf-gate {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
  }
}


/* ==========================================================================
   05 · OUTCOMES
   ========================================================================== */

.outcomes {
  align-items: stretch;
}

.outcome {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  min-width: 0;
  transition:
    transform var(--d-2) var(--e-out),
    box-shadow var(--d-2) var(--e-out),
    border-color var(--d-2) var(--e-out);
}

.outcome:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
}

.outcome > .card__index {
  color: var(--accent);
}

/* Icon-system plate (ICON-SYSTEM.md). The card is a flex column, so without an
   explicit align-self the 44px plate would stretch to the card's full width.
   The plate itself — size, radius, background and the `color` the glyph
   inherits through currentColor — comes from the shared .card__icon rule; this
   only places it and closes the gap to the index line above the heading. */
.outcome > .card__icon {
  align-self: flex-start;
  margin-bottom: calc(var(--s-1) * -1);
}

/* The row is four cards wide, and at that width some titles take one line and
   some take two — which dropped card 02's body a line below its neighbours and
   broke the row's baseline. The title band now reserves two lines at every
   width where the row is 3-up or 4-up, so every body copy starts on the same
   line regardless of how the title breaks. */
.outcome h3,
.outcome .title-2 {
  margin: 0;
  color: var(--ink);
  font-size: var(--t-title-2);
  line-height: 1.3;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

@media (min-width: 721px) {
  .outcomes .outcome h3,
  .outcomes .outcome .title-2 {
    min-height: 2.6em; /* exactly two lines at line-height 1.3 */
  }
}

.outcome p {
  margin: 0;
  color: var(--body);
  font-size: var(--t-sm);
  line-height: 1.6;
}


/* ==========================================================================
   06 · WHAT TO BRING  /  WHAT HAPPENS DURING
   ========================================================================== */

.bring {
  align-items: start;
}

.bring__list-wrap {
  min-width: 0;
}

.bring__list {
  list-style: none;
  margin: var(--s-6) 0 0;
  padding: 0;
  border-top: 1px solid var(--line-soft);
}

.bring__list > li {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  align-items: baseline;
  gap: var(--s-3);
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--line-soft);
  transition: border-color var(--d-2) var(--e-out);
}

.bring__list > li:hover {
  border-bottom-color: var(--line-strong);
}

.bring__n {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  color: var(--accent);
}

.bring__t {
  color: var(--ink);
  font-size: var(--t-title-2);
  line-height: 1.4;
}

.bring__foot {
  margin: var(--s-6) 0 0;
  max-width: 48ch;
  color: var(--muted);
  font-size: var(--t-sm);
  line-height: 1.65;
}

.during {
  min-width: 0;
  padding: clamp(1.25rem, 2.4vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--paper-card, var(--bg-card));
  box-shadow: var(--shadow-card);
}

.during__rail {
  margin: var(--s-5) 0 0;
}


/* ==========================================================================
   07 · FAQ  +  NOT READY YET
   ========================================================================== */

.faq-grid {
  align-items: start;
}

.faq {
  min-width: 0;
  border-top: 1px solid var(--line-soft);
}

.faq__item {
  border-bottom: 1px solid var(--line-soft);
}

.faq__item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  min-height: 56px;
  padding: var(--s-4) 0;
  cursor: pointer;
  list-style: none;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--t-title-3);
  font-weight: 500;
  line-height: 1.4;
  transition: color var(--d-2) var(--e-out);
}

.faq__item > summary::-webkit-details-marker { display: none; }
.faq__item > summary::marker { content: ""; }

.faq__item > summary::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  margin-right: 4px;
  border-right: 1.75px solid var(--muted);
  border-bottom: 1.75px solid var(--muted);
  rotate: 45deg;
  translate: 0 -2px;
  transition: rotate var(--d-2) var(--e-out), border-color var(--d-2) var(--e-out);
}

.faq__item:hover > summary { color: var(--link); }
.faq__item:hover > summary::after { border-color: var(--link); }

.faq__item[open] > summary::after {
  rotate: -135deg;
  translate: 0 2px;
}

.faq__item > :not(summary) {
  margin: 0;
  padding: 0 clamp(1.5rem, 4vw, 3rem) var(--s-6) 0;
  max-width: 62ch;
  color: var(--body);
  font-size: var(--t-sm);
  line-height: 1.7;
}

.notready {
  min-width: 0;
  align-self: start;
}

.notready > h3 { margin: 0; }

.notready > p {
  color: var(--body);
  font-size: var(--t-sm);
  line-height: 1.65;
}

.notready__links {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.notready__links > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  min-height: 48px;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: var(--bg-card-2);
  color: var(--ink);
  font-size: var(--t-sm);
  text-decoration: none;
  transition:
    border-color var(--d-2) var(--e-out),
    background-color var(--d-2) var(--e-out),
    transform var(--d-2) var(--e-out);
}

.notready__links > a:hover {
  border-color: var(--line-strong);
  background: var(--bg-card-3);
  transform: translateX(3px);
}

.notready__foot {
  margin: var(--s-6) 0 0;
  padding-top: var(--s-5);
  border-top: 1px solid var(--line-soft);
  line-height: 1.7;
}


/* ==========================================================================
   08 · CLOSING BAND
   ========================================================================== */

.bclose {
  position: relative;
  overflow: hidden;
}


/* ==========================================================================
   09 · RESPONSIVE
   ========================================================================== */

@media (max-width: 1180px) {
  .bhero__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-12);
  }

  .bhero__copy {
    max-width: 46rem;
  }

  .bform {
    max-width: 46rem;
  }
}

@media (max-width: 1024px) {
  .bring__list,
  .bring__foot,
  .faq {
    max-width: 46rem;
  }
}

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

  /* below this width the wide figure would either squash its labels under 9px
     or hide its payoff off the right edge — so the one-column variant runs */
  .callplate .figure__scroll .callfield--wide { display: none; }
  .callplate .figure__scroll .callfield--tall { display: block; }
}

@media (max-width: 560px) {
  .bhero__title {
    max-width: none;
  }

  /* The channel turns vertical rather than squashing three columns — and it
     stays a CHANNEL. Previously the stub was exactly the width of the port
     circle, so on mobile the connector vanished behind it and the strip
     degraded into three loose numbers. Now the ports sit on a spine, the same
     way the mobile call figure stacks. */
  .afters {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-6);
  }

  .afters__step {
    padding-top: 0;
    padding-left: 3.1rem;
    min-height: 1.9rem;
  }

  .afters__step::before {
    left: 0.95rem;
    right: auto;
    top: 1.9rem;
    bottom: calc(var(--s-6) * -1);
    width: 2.5px;
    height: auto;
    transform: translateX(-50%);
  }

  .afters__step:last-child::before {
    display: none;
  }

  .nots > li {
    white-space: normal;
  }

  /* key/value spec table instead of a ragged wrap */
  .bhero__facts {
    flex-direction: column;
    gap: 0;
    padding-top: var(--s-4);
  }

  .bhero__facts > li {
    min-width: 0;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-4);
    padding: var(--s-3) 0;
    border-bottom: 1px solid var(--line-soft);
  }

  .bhero__facts > li:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }

  .bform,
  .during {
    padding: var(--s-5);
    border-radius: var(--r-xl);
  }

  /* the field list would wrap to a second mono line and leave the chevron
     stranded on the first — the label alone carries it at this width */
  .wform__more-s {
    display: none;
  }

  .bform__head {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: var(--s-3);
  }

  .wform__submit .btn {
    width: 100%;
  }

  .bring__list > li {
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: var(--s-2);
  }

  .faq__item > summary {
    font-size: var(--t-body);
    gap: var(--s-3);
  }

  .faq__item > :not(summary) {
    padding-right: var(--s-2);
  }
}


/* ==========================================================================
   10 · REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .faq__item > summary,
  .faq__item > summary::after,
  .notready__links > a,
  .outcome,
  .bring__list > li {
    transition: none;
  }

  .notready__links > a:hover { transform: none; }
  .outcome:hover { transform: none; }
}