/*
 * /members — PAGE-SCOPED COMPONENT CSS.
 *
 * ⛔ GENERATED by tools/members/build-content.js. Edit that, not this.
 *
 * ⭐ A SUBSET OF tools/why-jumpsteps/pillar-parts/pillar-component.css, DUPLICATED ON PURPOSE
 * (founder ruling 2026-07-31): /why-jumpsteps.css is NOT touched, because a gate-proven page is not
 * edited for tidiness before a flip. The duplication is NAMED DEBT with a post-cutover
 * consolidation onto a shared pillar.css. members-contract-gate.js [5] asserts why-jumpsteps.css
 * stays byte-identical to HEAD, so the ruling is enforced rather than remembered.
 *
 * ⛔ THE :root BLOCK IS PART OF THE LIFT, NOT DECORATION. Every rule below resolves through it.
 * Lifting rules without their tokens yields CSS that parses cleanly and renders nothing.
 *
 * ⚠ The Omnisend block ships its own <style> inside content_source.html and is NOT styled here.
 * Its trigger button hardcodes #4d8990, which duplicates --teal (pillar-component.css:3, uppercase)
 * BY VALUE. Founder-ruled to leave it: the block travels verbatim with exactly one documented
 * comment change, and the modal TELEPORTS to <body> — where a var() would depend on the custom
 * property being visible at that scope and a literal depends on nothing. If the block is ever
 * rebuilt natively (post-cutover, with the --js-teal extraction), the token replaces it then.
 */

:root {
  --teal:        #4D8990;
  --teal-dark:   #3a6b71;
  --teal-light:  #A8DDE3;
  --teal-tint:   #EAF3F4;
  --teal-tint2:  rgba(77,137,144,0.08);
  --teal-border: rgba(77,137,144,0.25);
  --dark:        #1a1a1a;
  --dark2:       #1a3038;
  --body:        #3E3E3E;
  --muted:       #6e6e6e;
  --light:       #F5F5F5;
  --border:      #e2e2e2;
  --white:       #ffffff;
  --gold:        #FFD966;
  --gold-dark:   #c9a227;
  --gold-glow:   rgba(255,217,102,0.18);
  --green:       #27ae60;
  --r:           10px;
  --r-sm:        6px;
  --r-lg:        16px;
  --max:         1060px;
}

.jcp-wrap {
  font-family: 'Roboto', sans-serif;
  color: var(--body);
  line-height: 1.65;
  font-size: 15.5px;
  -webkit-font-smoothing: antialiased;
  max-width: var(--max);
  margin: 0 auto;
}

.jcp-wrap * { font-family: 'Roboto', sans-serif; }

.jcp-wrap a { color: var(--teal); text-decoration: none; }

.jcp-wrap a:hover { text-decoration: underline; }

/* ════════════════ HERO ════════════════ */
.jcp-hero {
  background: var(--dark); border-radius: var(--r-lg);
  padding: 60px 48px 56px; position: relative; overflow: hidden; margin-bottom: 18px;
}

.jcp-hero::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 85% 55% at 65% -12%, rgba(77,137,144,0.30) 0%, transparent 62%),
    radial-gradient(ellipse 45% 50% at 8% 105%, rgba(77,137,144,0.10) 0%, transparent 55%),
    radial-gradient(ellipse 30% 40% at 95% 90%, rgba(255,217,102,0.05) 0%, transparent 55%);
  pointer-events: none;
}

.jcp-hero::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(77,137,144,0.5), transparent);
}

.jcp-hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 44px;
  align-items: center;
}

.jcp-hero-copy { min-width: 0; max-width: 600px; }

.jcp-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 10px; font-weight: 700; letter-spacing: 2.8px; text-transform: uppercase;
  color: rgba(168,221,227,0.75); margin-bottom: 22px;
}

.jcp-hero h1 {
  color: var(--white); font-size: clamp(28px, 4.2vw, 44px); font-weight: 900;
  letter-spacing: -1.2px; line-height: 1.08; margin: 0 0 18px; max-width: 680px;
}

.jcp-hero h1 em { color: var(--teal-light); font-style: normal; }

.jcp-hero h1 .gold { color: var(--gold); }

.jcp-hero-sub {
  color: rgba(255,255,255,0.62); font-size: 16.5px; font-weight: 300;
  line-height: 1.8; max-width: 600px; margin: 0 0 32px;
}

.jcp-hero-sub strong { color: rgba(255,255,255,0.9); font-weight: 500; }

.sec-eyebrow {
  font-size: 10px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--teal); margin-bottom: 7px;
}

.sec-head {
  font-size: clamp(20px, 2.6vw, 28px); font-weight: 900; color: var(--dark);
  letter-spacing: -0.5px; margin: 0 0 12px; line-height: 1.18;
}

.sec-head em { color: var(--teal); font-style: normal; }

.sec-sub {
  font-size: 15.5px; color: var(--muted); line-height: 1.78; margin: 0 0 36px; max-width: 680px;
}

.sec-sub em { color: var(--body); font-style: italic; }

@media (max-width: 860px) {
  .jcp-hero-inner { grid-template-columns: 1fr; gap: 32px; }

  .jcp-hero-copy { max-width: 100%; }
}

@media (max-width: 560px) {
  .jcp-hero { padding: 40px 26px; }
}

/* ── the two rules .jcp-wrap CANNOT deliver ──────────────────────────────────
   Everything else the base layer used to carry here now comes from .jcp-wrap,
   lifted above. These two remain because the container cannot reach them. */

/* ⛔ THE TELEPORTED MODAL. It moves itself to <body> on load, so it inherits
   from body — NOT from .jcp-wrap, which is inside <main>. Container-level
   typography fixes the page and leaves the modal serif; members-modal-gate's
   --font-on-wrapper injection reproduces exactly that. Inherited, never forced:
   a `body *` blanket would override Claire's own stack. */
/* ⛔ PAGE-CLASS CONSTRAINER — CSS-ONLY, ADDED 2026-07-31 (founder-ruled).
 *
 * .jcp-wrap is in the RECORD and is the correct long-term container, but it only reaches the page
 * through a promote, and the promote is blocked on a separate unresolved failure (the save never
 * staged). Deleting .jsm-block's old private max-width in the same change left the page with NO
 * constrainer at all — flush against the viewport.
 *
 * ⭐ THE SHARED TOKEN, NOT A COPIED NUMBER. var(--max) is the same value .jcp-wrap resolves, so
 * this is a reference to the site's dimension rather than a private duplicate of it.
 *
 * ⚠ INTERIM BY DESIGN, AND HARMLESS WHEN THE WRAP LANDS: once .jcp-wrap publishes it nests inside
 * this, and an identical max-width on a nested element is a no-op. ⛔ REMOVING THIS ONCE THE WRAP
 * IS LIVE IS A POST-CUTOVER BOARD ITEM — deliberately NOT done tonight, because that would couple
 * a visual fix to a promote that is currently broken.
 */
.js-page--members-landing { max-width: var(--max); margin-inline: auto; }

/* ⛔ TOP-OF-PAGE CLEARANCE — A DELIBERATE MEMBERS-ONLY VALUE, NOT A COPIED ONE.
 *
 * MEASURED, and it is neither of the two cases the ruling anticipated:
 *   /banking header -> hero  125px   — NOT flush
 *   /members header -> hero    0px   — flush against the header
 *
 * ⭐ BUT /banking's 125px IS NOT PADDING. It is CONTENT: a breadcrumb (margin-top 8px) and a
 * section nav stacked above the hero inside .jcp-wrap. main padding-top is 0px on BOTH pages.
 * /members has neither element, so nothing pushes its hero down.
 *
 * ⛔ SO "MATCH /banking's VALUE" WOULD MEAN COPYING 125px OF EMPTY PADDING TO REPRODUCE A
 * DISTANCE THAT EXISTS BECAUSE OF COMPONENTS THIS PAGE DOES NOT HAVE — a number produced by a
 * different mechanism, which is the copied-dimension defect twice refused tonight.
 *
 * 60px is the founder's named value for the members-only call, symmetric with the chrome.css
 * bottom clearance. Raising it to 125px to match /banking optically is a one-word change.
 */
/* ⛔ THE 40px DID NOT GET DELETED — IT RELOCATED BELOW THE TRAIL (founder-ruled 2026-08-01).
 *
 * A breadcrumb now sits between header and hero, so the page-class padding-top is gone: the
 * breadcrumb owns that region. /banking puts the air BELOW the trail, not above it —
 *   header -> breadcrumb   8px   (the oracle rule's own margin-top; MATCHED)
 *   breadcrumb -> hero    15px   (founder call. Tightened 40 -> 30 -> 15, each step judged
 *                                 against the LIVE render; only the 40px was a simulation call.
 *                                 Close to the oracle rule's own 14px margin-bottom, arrived at
 *                                 independently by eye. /banking computes 117px there but most of
 *                                 it is a sticky section nav /members does not have, so it is NOT
 * a referent — the same reasoning that refused its 125px earlier.)
 *
 * ⚠ Breadcrumb rules below are lifted from the oracle BY HAND, because tools/members/
 * build-content.js is disabled by a hard throw. members.css is hand-maintained until the
 * verbatim-region property lands and the builder is re-enabled. Values copied verbatim from
 * pillar-component.css:44-51; only margin-bottom differs, and that difference is the ruling above. */
.jcp-breadcrumb {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  font-size: 13px; color: var(--muted); margin: 8px 0 15px;
}
.jcp-breadcrumb a { color: var(--teal); text-decoration: none; }
.jcp-breadcrumb a:hover { color: var(--teal-dark); text-decoration: underline; }
.jcp-breadcrumb-sep { color: #b0b0b0; user-select: none; }
.jcp-breadcrumb-current { color: var(--body); font-weight: 500; }
body { font-family: 'Roboto', sans-serif; }

/* ⛔ FORM CONTROLS DO NOT INHERIT font-family — the UA default wins, and it is
   Arial. Caught by members-modal-gate [8d] with everything else correct.
   public/chrome.css does the same for its own controls. This also reaches the
   fields Omnisend injects into the embed div at runtime — markup we never see
   and cannot class. */
button, input, select, textarea { font-family: inherit; }

/* ── /members-only components ────────────────────────────────────────────────
   No oracle equivalent: these two blocks are this page's own. Written against
   the lifted tokens above so they cannot drift from the pillar palette. */
/* ⛔ NO max-width / margin HERE. .jcp-wrap constrains the page; a second
   constrainer on the section was a PRIVATE DUPLICATE of the site's container
   dimensions, and it is what made the body sections and the hero disagree about
   their left edge. Padding only. */
/* ⛔ VERTICAL PADDING ONLY. The 20px horizontal inset was a private gutter: it put .sec-head at
   x=130 while the hero sat at x=110, re-creating the left-edge disagreement one layer in. The
   gutter is chrome.css's job on <main> (24px), and /banking's body sections declare no
   horizontal padding at all — measured. */
.jsm-block { padding: 40px 0; }

/* ⛔ TOP CLEARANCE — AND THE NODE IS NOT THE ONE THE RULING NAMED. MEASURED FIRST.
 *
 * The ruling asked for 60px on .js-page--members-landing, matching the chrome.css BOTTOM
 * clearance. But padding-top on the page container adds space ABOVE THE HERO — between header and
 * hero — which is a DIFFERENT GAP from the one described ("between the hero and ALREADY A
 * MEMBER?"). Shipping the named node would have left the described symptom untouched.
 *
 * WHAT ACTUALLY OWNS THAT GAP, measured:
 *   .jcp-hero margin-bottom  18px   (lifted from the oracle — /banking computes 18px too)
 *   .jsm-block padding-top   40px
 *   = 68px hero-bottom to eyebrow
 *
 * ⭐ THE HERO SPACING ALREADY MATCHES /banking EXACTLY, so widening .jcp-hero would have diverged
 * from the reference to fix a members-only complaint. The adjacent-sibling selector targets ONLY
 * the hero-to-first-section gap and leaves the block-to-block rhythm alone.
 */
.jcp-hero + .jsm-block { padding-top: 60px; }
.jsm-block + .jsm-block { border-top: 1px solid var(--border); }
.jsm-actions { margin-top: 20px; }
/* The Stripe region: a visible, deliberately EMPTY bordered slot. It reads as
   "nothing has been placed here yet" rather than as a broken component. */
.jsm-stripe-slot {
  border: 1px dashed var(--border);
  border-radius: var(--r);
  padding: 28px 20px;
  background: var(--light);
  color: var(--muted);
  text-align: center;
}
.jsm-price { font-weight: 600; color: var(--dark); }
