/* Premium contact-section direction, 4 Oct 2026. Scoped to [data-cx="c"] on <html> (now hardcoded
   in index.html; directions A and B lost the 5 Oct pick and were removed). Copy is locked: every
   rule below is layout, colour, shadow, texture or a decorative crop, never a new/changed word.
   Sweep: Knowledge/Frameworks/website-build-rules.md rules 2,3,11,21; brand/DESIGN.md tokens;
   relayfi-com (elevated card language) + stripe.com (restraint) teardowns. See report for full citations. */

/* ---------- shared base, all three directions ---------- */
/* decorative elements added to the DOM for direction B/C: hidden everywhere by default,
   only direction-B's own block below turns the connector on. Must be unconditional (not
   scoped to [data-cx]) so the default/today page and directions A and C never see them. */
.steps-connector{display:none}
.next-step-media{display:none}
[data-cx] .contact-section{overflow:visible}
[data-cx] .lead-progress,[data-cx] .lead-privacy{font-size:14px}
[data-cx] .lead-step legend{outline:none} /* programmatic focus() in lead-flow.js is for AT announcement, not a visible control; the UA default ring read as a stray black box once the legend grew past the card (direction B) */
[data-cx] #lead-form{position:relative}
[data-cx] #lead-form>*{position:relative;z-index:1}
[data-cx] .next-steps{position:relative}

/* one shared grain texture (feTurbulence), reused by A and C so the two "material" surfaces agree */
:root{--grain-img:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* =========================================================================
   C. PRODUCT-LED — steps as small cards carrying a real product crop
   (the only direction left; A/B removed 5 Oct 2026 once Max picked C)
   ========================================================================= */
/* Floating-card shadow recipe (4 Oct refinement, cream-on-green still locked).
   Source: Instagram DdrkwlhuZMl... no — Ddy5RJOha1U "Same button. Six decisions",
   UPGRADE 04 DEPTH: "a flat fill looks printed on the page; a recessed track, a lit
   top edge and a downward shadow say push me" (shadow y:8 blur:24, falls down; lit
   top edge 1px white ~16%). Translated from a button onto a card: one TIGHT contact
   shadow close to the edge (reads as "sitting on" the surface right beneath it) plus
   one BROAD soft ambient shadow (reads as "lifted off" the surface), both tinted
   toward --co-green/--co-dark (rgb(16,33,24)) rather than neutral grey/black, plus a
   1px inner top highlight standing in for the "lit edge". relayfi.com's account/
   expense cards (generous white space, crisp 12-16px radius, no hairline, the card's
   own soft shadow IS its border) set the "no hairline, shadow is the only edge" rule;
   stripe.com set the restraint (one shadow depth site-wide, nothing heavier). */
:root{--cx-c-shadow-tint:16,33,24}
/* Three elevation steps, not one shared shadow (rule 11: "if everything is elevated, nothing
   is"). Step 1 (highest) = form: biggest footprint, softest/widest ambient throw. Step 2
   (middle) = step cards: tighter, smaller blur, reads as "closer to the ground" than the form.
   Step 3 (lowest) = product image crops, their own small contact shadow, set where they're
   used below so each card's image reads as a THIRD surface above the card itself. */
[data-cx="c"] #lead-form{
 --cx-c-shadow:
   0 1px 1px rgba(var(--cx-c-shadow-tint),.08),
   0 4px 10px rgba(var(--cx-c-shadow-tint),.10),
   0 20px 38px -8px rgba(var(--cx-c-shadow-tint),.20),
   0 48px 84px -18px rgba(var(--cx-c-shadow-tint),.28);
}
[data-cx="c"] .next-step{
 --cx-c-shadow:
   0 1px 1px rgba(var(--cx-c-shadow-tint),.06),
   0 2px 5px rgba(var(--cx-c-shadow-tint),.08),
   0 9px 18px -5px rgba(var(--cx-c-shadow-tint),.12),
   0 18px 30px -10px rgba(var(--cx-c-shadow-tint),.16);
 --cx-c-shadow-hover:
   0 1px 1px rgba(var(--cx-c-shadow-tint),.07),
   0 3px 8px rgba(var(--cx-c-shadow-tint),.09),
   0 14px 24px -6px rgba(var(--cx-c-shadow-tint),.15),
   0 26px 42px -10px rgba(var(--cx-c-shadow-tint),.20);
}
[data-cx="c"] #lead-form{
 position:relative;border-radius:16px;border:none;
 box-shadow:var(--cx-c-shadow),inset 0 1px 0 rgba(255,255,255,.55);
}
/* Overlap #2 (free, per rule 11): the form crosses the section's own top boundary rather than
   sitting flush inside it -- "extends past the section's top padding". Desktop only: in the
   2-col grid the form is the right-hand item, so this rises into blank green space above the
   heading, never across its own text. Cancelled on the stacked mobile layout below, where the
   same rise would land on top of the intro paragraph.
   -8px, not -34px (4 Oct round 5, Max: form card sits too high, its top is above the title's
   top). Measured on the live render at 1440: with align-items:start and zero extra margin the
   card (height 232px) and the heading block (height 231px) already match within 1px, so the
   card's natural top already equals the heading's own top (65px) and its centre already equals
   the heading's centre (181px) -- the -34px was moving the card a further 34px up from that
   balanced position, which is the exact amount Max saw as "too high". -8px keeps a small,
   deliberate lift (still an overlap, still "rises into blank green space") while staying within
   ~8px of both the title's own top and the heading's centre -- re-measure if the copy length
   changes either block's height materially. */
@media(min-width:820px){
 [data-cx="c"] #lead-form{margin-top:-8px}
}

/* Ground isn't flat (rule 11 tool 4): 4-5% feTurbulence grain so the green doesn't band, plus a
   soft light pool roughly under the form card so it has something to visibly lift off. Both live
   on ::before/::after so they paint behind the grid's real content (z-index:-1 inside the new
   stacking context) without touching it. */
/* position:relative alone does NOT create a stacking context (z-index:auto) -- without an
   explicit z-index here too, the ::before/::after below (z-index:-1) escape to the nearest
   ANCESTOR stacking context instead of sitting just above this section's own green fill, and
   paint invisibly behind something else entirely. Caught by sampling the rendered screenshot:
   luminance was flat 0.0 std even at opacity:1. z-index:0 scopes them correctly. */
[data-cx="c"] .contact-section{position:relative;z-index:0}
[data-cx="c"] .contact-section::before{
 content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
 /* Measured, not eyeballed (REASONING 4c/4b): the rule-11 "4-5%" figure reads as flat 0.0
    luminance std in a real screenshot sample against this dark green, even at full opacity --
    traced to position:relative alone NOT creating a stacking context, so this layer (z-index:-1)
    was escaping to an ancestor's stacking context and painting behind something else entirely
    (fixed above with z-index:0). With that fixed, 4-5% is still sub-1-level here (std 0.0 at
    .05); .1 is the first value that measures non-flat (std ~1.2, range 76-84) and reads as a
    genuine subtle speckle rather than a flat fill at 5x zoom -- kept here over the literal
    figure because the rule's INTENT (texture so it doesn't band) needs an actual nonzero value. */
 background-image:var(--grain-img);background-size:140px 140px;opacity:.1;
}
/* Same measured correction as the grain above: .16 peak alpha measured as flat (no delta vs a
   baseline patch) even well inside the gradient's own radius -- .22 is the first value that
   showed a clear, still-soft brightening (+9.8 luminance levels) in a real screenshot sample. */
[data-cx="c"] .contact-section::after{
 content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
 background:radial-gradient(760px 520px at 82% 8%,rgba(255,255,255,.22),rgba(255,255,255,0) 72%);
}
@media(max-width:819px){
 [data-cx="c"] .contact-section::after{background:radial-gradient(480px 380px at 50% 18%,rgba(255,255,255,.2),rgba(255,255,255,0) 74%)}
}

/* Safe default for ALL variants/breakpoints (never cx-scoped): invisible to layout, so num/h3/p
   stay direct flex items of `.next-step` exactly as before this wrapper existed. Desktop cx="c"
   and variants a/b never override this -- only the mobile cx="c" block below does, where the
   wrapper needs to become a REAL box (see that block's comment). */
.next-step-body{display:contents}
[data-cx="c"] .next-steps{background:transparent;box-shadow:none;border:0;padding:0}
/* Clearance above the grid for the floated objects (round 5b/fix: the tallest object, the
   portrait PIN card, can now stand ~250px clear above its own card -- see the overlap comment
   below). Re-measure if the PIN card asset or its max-height changes. */
[data-cx="c"] .next-steps-grid{row-gap:24px;margin-top:280px}
/* round 5b fix pass (Max: the box is gone but the empty space moved INTO the card -- cards 2/3
   had a tall blank WHITE area above their short objects, because the old fixed-height rail still
   reserved 340px of in-flow card space and just hid its own background; a short object merely
   sat at the BOTTOM of that reserved space, bottom-aligned, with the card's own white surface
   showing through the empty top of the rail instead of the section's green). Fix: the object is
   no longer in flow at all. `.next-step-media` is `position:absolute`, anchored so its OWN
   bottom edge always sits a fixed 48px below the card's top edge (`bottom:calc(100% - 48px)` --
   100% of the card's height minus 48px, measured from the card's own bottom, which places the
   far edge exactly 48px under the top regardless of card height) -- never a tall reserved box.
   Whatever is above that line is simply the section's own green background, because nothing
   draws over it. padding-top on the card (64px = 48px overlap + 16px breathing gap) is what
   keeps the numeral row clear of the object's bottom edge; it no longer depends on the object's
   own height at all, which is also why the three numerals stay level regardless of which object
   is tallest (round 5b's original requirement, unchanged -- see the HTML's data-cx="c" cards). */
[data-cx="c"] .next-step{
 background:var(--co-paper);border-radius:16px;padding:64px 22px 24px;border:none;
 box-shadow:var(--cx-c-shadow),inset 0 1px 0 rgba(255,255,255,.55);
 transition:box-shadow 220ms cubic-bezier(.23,1,.32,1),transform 220ms cubic-bezier(.23,1,.32,1);
}
@media(hover:hover) and (pointer:fine){
 [data-cx="c"] .next-step:hover{transform:translateY(-3px);box-shadow:var(--cx-c-shadow-hover),inset 0 1px 0 rgba(255,255,255,.6)}
}
@media(prefers-reduced-motion:reduce){
 [data-cx="c"] .next-step{transition:none}
 [data-cx="c"] .next-step:hover{transform:none}
}
[data-cx="c"] .next-step-num{color:var(--co-green);font-size:clamp(26px,2.6vw,34px)}
[data-cx="c"] .next-step:not(:last-child) .next-step-num::after{display:none}
[data-cx="c"] .next-step h3{color:var(--co-ink);font-size:16px}
[data-cx="c"] .next-step p{color:#4E5B51}
/* The clickable area spans the card's full width (left:0;right:0) so the hit target stays
   generous even for a narrow object, but it is NOT a visible box -- background/box-shadow:none,
   height:auto (shrink-to-fit the real object). `.next-step-media-frame` (shrink-wrapped, hugs
   just the image) is what the expand icon anchors to, so it sits at the IMAGE's own corner even
   when the image is narrower than the card (the tilted PIN card) -- at the button's own corner
   it would float in empty air next to those. Now a <button>, not a <span>: clicking the whole
   thumbnail (or the small corner icon) opens the real full-size sample in the dialog below. */
[data-cx="c"] .next-step-media{
 display:flex;justify-content:center;position:absolute;left:0;right:0;top:auto;
 bottom:calc(100% - 48px);z-index:2;margin:0;border:0;padding:0;cursor:pointer;
 background:none;box-shadow:none;
}
[data-cx="c"] .next-step-media-frame{position:relative;display:inline-block;line-height:0;transition:transform 180ms cubic-bezier(.23,1,.32,1)}
/* Width caps at the card's own content width, height caps at 260px so a tall portrait object
   (the PIN card) floats clear above the card rather than ballooning to full card width --
   whichever axis hits its limit first decides the render size, the other axis follows the
   image's real aspect ratio so nothing stretches or crops. */
[data-cx="c"] .next-step-media img{display:block;max-width:100%;max-height:260px;width:auto;height:auto;border-radius:10px}
/* Round 5c (Max: steps 2 and 3 don't have to be flush with the cards, more natural like the PIN
   card). Step 1's own aspect ratio already keeps it well short of the card's width; 2 and 3 are
   landscape/wide objects that hit the width cap instead of the height cap, so they rendered at a
   measured 100% of the card (378.66px at 1440) -- flush, reading as part of the card rather than
   an object sitting on it.
   The % constraint goes on `.next-step-media-frame` (the flex ITEM), never on the `img` (the flex
   item's descendant) -- measured why: `.next-step-media` is `display:flex;justify-content:center`,
   and a percentage on a descendant's width/max-width is indeterminate for the frame's own
   max-content sizing (CSS2.1 10.3.3), so the browser falls back to the img's unconstrained
   intrinsic width for that calc. For these two wide/landscape images that unconstrained width
   (493-776px at max-height:260) overflows the 378px card, so flex-shrink squeezes the FRAME back
   out to the full container width, and the actually-narrower img then sits flush-LEFT inside that
   full-width frame with no space left for justify-content:center to distribute -- narrower, but
   not centred (confirmed: measured imgLeft==cardLeft). Setting width on the frame itself is a
   definite flex-basis (not derived from content), so no circularity: the frame reports its real
   85% size to the flex container, which then has genuine leftover space to centre it. 85%
   (measured ~322px at 1440) sits in the 82-88% band Max asked for; img stays width:100% of that
   frame, height:auto so aspect ratio and shadow are untouched. */
[data-cx="c"] .next-step:nth-child(2) .next-step-media-frame,
[data-cx="c"] .next-step:nth-child(3) .next-step-media-frame{width:85%}
[data-cx="c"] .next-step:nth-child(2) .next-step-media img,
[data-cx="c"] .next-step:nth-child(3) .next-step-media img{width:100%;max-width:100%}
@media(hover:hover) and (pointer:fine){
 [data-cx="c"] .next-step-media:hover .next-step-media-frame{transform:translateY(-2px)}
}
[data-cx="c"] .next-step-media:focus-visible{outline:none}
[data-cx="c"] .next-step-media:focus-visible .next-step-media-frame{outline:2px solid var(--co-green);outline-offset:3px;border-radius:12px}
[data-cx="c"] .next-step-expand{
 position:absolute;right:8px;bottom:8px;width:26px;height:26px;border-radius:50%;
 background:rgba(250,248,244,.92);display:flex;align-items:center;justify-content:center;
 box-shadow:0 1px 2px rgba(20,24,20,.18);color:var(--co-green);pointer-events:none;
}
[data-cx="c"] .next-step-expand svg{width:13px;height:13px}
@media(prefers-reduced-motion:reduce){
 [data-cx="c"] .next-step-media-frame{transition:none}
 [data-cx="c"] .next-step-media:hover .next-step-media-frame{transform:none}
}
/* Three WHOLE real product renders, Playwright off the live local demo, pixel-exact, never
   redrawn/AI-generated (rule 23). Steps 1 and 3 unchanged since round 5: the full tenant PIN
   card (pin-card-fictional.html, demo/sample data only, "Sample Tenant" + PIN 000000), top to
   bottom; one complete report row with its status chip ("In progress"), full card including its
   left urgency edge and metoo count, nothing cut. Step 2, round 5b: desktop visitors now get the
   DESKTOP Centre Board (DemoPhone's own "native" mount, `scale:false` -- no phone chrome, real
   admin/manager board layout, centre-board-screen.html?embed=1&view=manager&native=1&bare=1 at
   1280 wide), phones keep the existing portrait phone board -- picked by `<picture>`/`media` on
   the thumbnail and by `matchMedia` at dialog-open time for the overlay (markup above, script
   below). The desktop board's OWN image is cropped (header + 3 rows, ending on a row boundary)
   for the thumbnail only -- the overlay dialog still shows the whole captured board. */
[data-cx="c"] .next-step:nth-child(1) .next-step-media img{
 box-shadow:0 1px 1px rgba(var(--cx-c-shadow-tint),.08),0 4px 10px rgba(var(--cx-c-shadow-tint),.12),0 14px 26px -6px rgba(var(--cx-c-shadow-tint),.20);
}
[data-cx="c"] .next-step:nth-child(2) .next-step-media img,
[data-cx="c"] .next-step:nth-child(3) .next-step-media img{
 box-shadow:0 1px 1px rgba(var(--cx-c-shadow-tint),.07),0 3px 7px rgba(var(--cx-c-shadow-tint),.10),0 10px 18px -5px rgba(var(--cx-c-shadow-tint),.16);
}

/* ---------- the full-size sample overlay, native <dialog> (rule: focus trap + Esc + backdrop
   close are the browser's own, no JS needed for any of the three) ---------- */
[data-cx="c"] dialog.sample-dialog{
 border:0;padding:0;background:transparent;max-width:min(92vw,720px);max-height:88vh;margin:auto;
 opacity:1;transform:scale(1);
 transition:opacity 200ms cubic-bezier(.23,1,.32,1),transform 200ms cubic-bezier(.23,1,.32,1),overlay 200ms allow-discrete,display 200ms allow-discrete;
}
[data-cx="c"] dialog.sample-dialog:not([open]){opacity:0;transform:scale(.96)}
@starting-style{
 [data-cx="c"] dialog.sample-dialog[open]{opacity:0;transform:scale(.96)}
}
[data-cx="c"] dialog.sample-dialog::backdrop{background:rgba(16,33,24,.6);opacity:1;transition:opacity 200ms cubic-bezier(.23,1,.32,1),overlay 200ms allow-discrete,display 200ms allow-discrete}
@starting-style{
 [data-cx="c"] dialog.sample-dialog[open]::backdrop{opacity:0}
}
[data-cx="c"] .sample-dialog-card{position:relative;display:block;line-height:0}
[data-cx="c"] .sample-dialog-img{display:block;max-width:min(92vw,720px);max-height:88vh;width:auto;height:auto;border-radius:14px;box-shadow:0 20px 60px rgba(8,16,10,.45)}
/* 5 Oct round 5 fix pass: was top:-14px/right:-14px, positioned OUTSIDE the card's own box --
   at 1440 on the tall portrait board image (step 2) and at 390 generally, that put half the
   circle past the dialog's own edge (clipped by the dialog's max-width/max-height, or by the
   viewport). Now INSET from the card's top-right corner (12px breathing room, same on both
   breakpoints) so it always sits on top of the image itself, fully visible, never outside the
   box it belongs to. 44px tap target (was 36px) per the a11y touch-target floor; the visible
   circle stays smaller (32px) with the extra hit area transparent, so it doesn't read as an
   oversized button sitting on a small image like the report row. */
[data-cx="c"] .sample-dialog-close{
 position:absolute;top:12px;right:12px;width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;
 display:flex;align-items:center;justify-content:center;
}
/* no z-index here on purpose: ::before paints first (document order), the real svg content
   after it paints on top automatically -- a negative z-index on this pseudo-element would risk
   it escaping this button's own stacking context and painting behind the sample image sibling
   instead (the exact bug already documented above on .contact-section's own ::before/::after). */
[data-cx="c"] .sample-dialog-close::before{
 content:"";position:absolute;inset:6px;border-radius:50%;background:var(--co-paper);box-shadow:0 2px 8px rgba(8,16,10,.3);
}
[data-cx="c"] .sample-dialog-close svg{width:16px;height:16px;color:var(--co-ink);position:relative}
[data-cx="c"] .sample-dialog-close:focus-visible{outline:2px solid var(--co-paper);outline-offset:2px}
@media(prefers-reduced-motion:reduce){
 [data-cx="c"] dialog.sample-dialog,[data-cx="c"] dialog.sample-dialog::backdrop{transition:none}
}

@media(max-width:819px){
 /* Last-round fix (Max: the desktop absolute-overlap trick, with ONE row-gap sized for the
    tallest object, left ~300px of dead green above the SHORT report-row card -- one gap cannot
    fit three different object heights). Mechanism swap, desktop untouched: media goes back into
    NORMAL FLOW as the card's first child, with a small negative margin-bottom so it overlaps
    the text surface below it by a fixed ~40px -- a classic "image breaks out above a card" lift,
    not an absolute float. The white surface (background/radius/shadow) moves OFF `.next-step`
    (now just a transparent flow wrapper -- its own background/shadow/padding/border-radius are
    all reset to nothing here) and ONTO `.next-step-body` (num+h3+p, see the HTML's new wrapper),
    which starts its own box exactly where the overlap ends. Each card's total height is now its
    own object's real height + its own text, so one modest, uniform row-gap below works for every
    card regardless of which object is tallest -- no more hand-fitting the worst case. */
 [data-cx="c"] .next-steps-grid{row-gap:44px;margin-top:40px}
 [data-cx="c"] .next-step{display:block;background:none;box-shadow:none;border-radius:0;padding:0}
 [data-cx="c"] .next-step:hover{transform:none;box-shadow:none}
 [data-cx="c"] .next-step-media{
  position:relative;display:flex;justify-content:center;left:auto;right:auto;bottom:auto;
  margin:0 0 -40px;z-index:2;
 }
 [data-cx="c"] .next-step-media img{max-height:none}
 /* explicit width fractions (Max: legible but not full-bleed) replace the old height cap
    entirely on mobile -- natural height follows from the real aspect ratio. */
 /* 6 Oct: flat (no tilt, Max) and the 70% moved onto the frame -- on the img it hit the same
    flex circularity as steps 2/3 below and sat flush-left on a real iPhone. */
 [data-cx="c"] .next-step:nth-child(1) .next-step-media-frame{width:70%}
 [data-cx="c"] .next-step:nth-child(1) .next-step-media img{width:100%;max-width:100%}
 /* Round 5c: same "not flush" fix as desktop -- step 2 was 67% and step 3 was 100% (flush,
    measured), both now 85% to match the desktop value. Same circularity issue as desktop's
    comment above applies here too (mobile also drops max-height, so the unconstrained intrinsic
    width is the images' full native pixel size, which overflows the card every time): the % goes
    on `.next-step-media-frame` (the flex item), not the `img`, or the frame gets squeezed to the
    full card width by flex-shrink and the img sits flush-left inside it with no space left to
    centre into. Confirmed by measurement: step 2 at a plain `img{width:67%}` was already
    flush-left (imgLeft==cardLeft) even before this round touched it -- a pre-existing, unrelated
    centering gap this fix also closes for 2 and 3. */
 [data-cx="c"] .next-step:nth-child(2) .next-step-media-frame,
 [data-cx="c"] .next-step:nth-child(3) .next-step-media-frame{width:85%}
 [data-cx="c"] .next-step:nth-child(2) .next-step-media img,
 [data-cx="c"] .next-step:nth-child(3) .next-step-media img{width:100%}
 /* the card's white box, scoped to just the text now -- same background/radius/shadow recipe
    the OUTER card used before (--cx-c-shadow inherits down from `.next-step`), plus the num/h3/p
    2-col grid the base mobile rule used to put directly on `.next-step` (now on this wrapper
    instead, since num/h3/p live one level deeper -- see the HTML). */
 [data-cx="c"] .next-step-body{
  display:grid;grid-template-columns:auto 1fr;column-gap:14px;row-gap:8px;align-items:center;
  position:relative;z-index:1;background:var(--co-paper);border-radius:16px;padding:58px 18px 20px;
  box-shadow:var(--cx-c-shadow),inset 0 1px 0 rgba(255,255,255,.55);
 }
 [data-cx="c"] .next-step-num{grid-column:1;grid-row:1}
 [data-cx="c"] .next-step h3{grid-column:2;grid-row:1}
 [data-cx="c"] .next-step p{grid-column:1/-1;grid-row:2}
}


/* 6 Oct (Max: "the title separation to the 1 2 3 section"): "What happens next" was a 12px
   label sitting under the form, so the three cards did not read as their own section. Now a real
   title in the section display face (smaller than the "Get CentreOS" h2), with clear air above it. */
[data-cx="c"] .next-steps{margin-top:120px}
[data-cx="c"] .next-steps .next-steps-title{font:400 clamp(36px,3.4vw,48px)/1.15 CentreDisplay,Georgia,serif;letter-spacing:normal;color:var(--co-ink);margin:0 0 24px}
@media(max-width:819px){
 [data-cx="c"] .next-steps{margin-top:72px}
}

/* 6 Oct (Max: "there should be something to separate the section"): a full-width darker band
   behind "What happens next" (blocks, never a rule line). The section is clipped on x so the
   100vw band cannot cause sideways scroll; floating samples only rise upward, so nothing is cut. */
[data-cx="c"] .contact-section{overflow:clip}
[data-cx="c"] .next-steps::before{content:"";position:absolute;z-index:-1;pointer-events:none;top:-72px;bottom:-2000px;left:calc(50% - 50vw);width:100vw;background:var(--co-stone-deep,#E8E4DB)}
@media(max-width:819px){[data-cx="c"] .next-steps::before{top:-48px}}
/* 6 Oct (Max picked option A): the band is the brand stone scale's deepest step (#E8E4DB,
   brand/DESIGN.md paper scale), so no new colour; on it the title goes green, the cards go white
   so they pop, and the "Got a question" line goes ink. */
[data-cx="c"] .contact-section .second-option,[data-cx="c"] .contact-section .second-option a{color:var(--co-ink)}
@media(min-width:820px){[data-cx="c"] .next-step{background-color:#fff}}
@media(max-width:819px){[data-cx="c"] .next-step-body{background-color:#fff}}