/* ============================================================================
   /why-jumpsteps — PAGE-SCOPED STYLESHEET (Decision B)

   ⭐⭐ SECTION A BELOW IS THE COMMERCIAL-PILLAR COMPONENT CSS, LIFTED VERBATIM.
   NOT imitated, NOT re-derived — copied byte-for-byte, so every shared component (sticky nav,
   hero card, SVG gauge, coverage strip, split product cards, dims grid, story band, jcc Claire
   shell, disclosure block, FAQ accordion, hub cross-link cards, final CTA) is the SAME COMPONENT
   the pillar hubs render, not a lookalike.

   ── PROVENANCE (mandatory, founder ruling 2026-07-30) ───────────────────────────────────────────
   SOURCE      pillar generator component CSS — the jcp-* / jcc-* system
   CANONICAL   /banking (canonical) · /planning (equivalent, and the READABLE copy)
   EXTRACTED   2026-07-30, from /planning's live content_html <style> block
   WHY NOT /banking  its content_html is an r2: pointer (56 chars), so it cannot be read inline;
                     /planning carries the identical system as literal bytes
   SHA-256/16  72541c00a552eac2   (of the lifted block, for drift detection)
   BYTES       25359

   ⛔ THIS IS A FORK, AND IT IS LEDGERED AS ONE. Board item with its resolution trigger: EXTRACT
   THE SHARED COMPONENT LAYER INTO ONE STYLESHEET WHEN THE PILLAR GENERATOR NEXT CHANGES. Until
   then two copies exist and CAN drift; the digest above is what makes the drift detectable rather
   than silent. The five live hubs were NOT touched by this act.

   ── SECTION B — ADAPTED ────────────────────────────────────────────────────────────────────────
   Only for structure this page genuinely has and the pillar hubs do not: the shout wall, the AI
   quote trio, team/partners, and the For-AI quiet block. Every adapted rule uses the SAME tokens,
   radii, shadows and type scale as its nearest pillar sibling — no new visual vocabulary is
   invented here.

   POSTURE: TAKES THE SHELL FLOOR. No horizontal padding declared; absent from every self-contained
   selector in chrome.css. Declared at birth, not omitted.
   ============================================================================ */

/* ══════════════════════════════════════════════════════════════════════════
   SECTION A — LIFTED VERBATIM. Do not hand-edit; re-lift from the source above.
   ══════════════════════════════════════════════════════════════════════════ */

: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;
}

*, *::before, *::after { box-sizing: border-box; }

.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; }

.jcp-js-plus { font-size: 1.22em; font-weight: 900; color: var(--gold); line-height: 1; vertical-align: baseline; margin-left: 1px; }

/* ════════════════ BREADCRUMB ════════════════ */
.jcp-breadcrumb {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  font-size: 13px; color: var(--muted); margin: 8px 0 14px;
}
.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; }

/* ════════════════ STICKY NAV ════════════════ */
.jcp-nav {
  position: sticky; top: 0; z-index: 999;
  background: rgba(26,26,26,0.97);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(77,137,144,0.3);
  padding: 0 24px; margin-bottom: 32px;
}
.jcp-nav-inner {
  max-width: var(--max); margin: 0 auto;
  display: flex; align-items: center; gap: 2px;
  overflow-x: auto; scrollbar-width: none;
}
.jcp-nav-inner::-webkit-scrollbar { display: none; }
.jcp-nav-brand {
  display: flex; align-items: center; gap: 9px;
  padding: 12px 16px 12px 0; margin-right: 6px; flex-shrink: 0; white-space: nowrap;
}
.jcp-nav-brand-glyph { display: flex; }
.jcp-nav-brand-name { color: #fff; font-size: 13px; font-weight: 700; letter-spacing: -0.2px; }
.jcp-nav-brand-name .pillar { color: var(--teal-light); font-weight: 500; }
.jcp-nav-link {
  color: rgba(255,255,255,0.55); font-size: 11.5px; font-weight: 500;
  padding: 14px 13px; white-space: nowrap; border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s; text-decoration: none; display: block;
}
.jcp-nav-link:hover, .jcp-nav-link.active {
  color: var(--teal-light); border-bottom-color: var(--teal); text-decoration: none;
}
.jcp-nav-cta {
  margin-left: auto; flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
  background: var(--gold); color: #1a1a1a !important; font-size: 11.5px; font-weight: 700;
  padding: 7px 16px; border-radius: 100px; white-space: nowrap;
  text-decoration: none !important; transition: background .15s; border-bottom: none !important;
}
.jcp-nav-cta:hover { background: var(--gold-dark); color: #1a1a1a !important; text-decoration: none !important; }

/* ════════════════ 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; }

/* Match Score gauge in hero */
.jcp-hero-gauge { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.jcp-gauge-container { position: relative; width: 280px; max-width: 100%; }
.jcp-gauge-svg { width: 100%; height: auto; overflow: visible; display: block; }
.jcp-gauge-score-num { fill: var(--white); font-family: 'Roboto', sans-serif; font-weight: 900; font-size: 40px; text-anchor: middle; }
.jcp-gauge-score-label { fill: rgba(255,255,255,0.4); font-family: 'Roboto', sans-serif; font-weight: 500; font-size: 10px; text-anchor: middle; letter-spacing: 2px; }
.jcp-gauge-caption {
  font-size: 11.5px; color: rgba(255,255,255,0.45); text-align: center;
  margin-top: 6px; line-height: 1.5; max-width: 240px;
}
.jcp-gauge-caption strong { color: rgba(168,221,227,0.85); font-weight: 600; }
.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; }
.jcp-hero-cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.jcp-hero-gold {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--gold); color: #1a1a1a !important; font-size: 14.5px; font-weight: 700;
  padding: 14px 26px; border-radius: 100px; text-decoration: none !important; transition: all .18s;
  box-shadow: 0 5px 24px rgba(255,217,102,0.3);
}
.jcp-hero-gold:hover { background: var(--gold-dark); transform: translateY(-1px); box-shadow: 0 7px 30px rgba(255,217,102,0.45); }
.jcp-hero-ghost {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.78) !important;
  font-size: 13.5px; font-weight: 600; padding: 14px 22px; border-radius: 100px;
  border: 1px solid rgba(255,255,255,0.15); text-decoration: none !important; transition: all .18s;
}
.jcp-hero-ghost:hover { background: rgba(255,255,255,0.12); color: #fff !important; }

/* Live coverage strip */
.jcp-coverage {
  display: flex; flex-wrap: wrap; gap: 0; margin-bottom: 14px;
  border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--white);
}
.jcp-cov-item { flex: 1 1 0; min-width: 160px; padding: 22px 24px; border-right: 1px solid var(--border); }
.jcp-cov-item:last-child { border-right: none; }
.jcp-cov-num {
  font-size: 28px; font-weight: 900; color: var(--dark); letter-spacing: -1px; line-height: 1;
  display: flex; align-items: baseline; gap: 4px;
}
.jcp-cov-num .plus { color: var(--teal); font-size: 18px; }
.jcp-cov-pulse {
  width: 7px; height: 7px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 0 0 rgba(39,174,96,0.5); animation: cov-pulse 2.2s infinite; margin-right: 3px;
  align-self: center;
}
@keyframes cov-pulse {
  0% { box-shadow: 0 0 0 0 rgba(39,174,96,0.5); }
  70% { box-shadow: 0 0 0 7px rgba(39,174,96,0); }
  100% { box-shadow: 0 0 0 0 rgba(39,174,96,0); }
}
.jcp-cov-label { font-size: 11.5px; font-weight: 600; color: var(--muted); margin-top: 7px; line-height: 1.4; }
.jcp-cov-fn { font-size: 8px; vertical-align: super; color: var(--teal); margin-left: 1px; }
.jcp-cov-footnote { font-size: 11px; color: var(--muted); line-height: 1.5; margin: 0 0 44px; max-width: 620px; }

/* ════════════════ SECTION UTILITIES ════════════════ */
.jcp-section { margin-bottom: 64px; scroll-margin-top: 80px; }
.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; }

/* ════════════════ STORY BAND (guesswork) ════════════════ */
.jcp-story {
  background: var(--teal-tint); border: 1px solid var(--teal-border);
  border-radius: var(--r-lg); padding: 36px 40px; margin-bottom: 64px;
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 36px; align-items: center;
}
.jcp-story-head {
  font-size: clamp(19px, 2.4vw, 25px); font-weight: 900; color: var(--teal-dark);
  letter-spacing: -0.4px; line-height: 1.25; margin: 0 0 14px;
}
.jcp-story-head em { font-style: normal; color: var(--teal); }
.jcp-story-body { font-size: 14.5px; color: var(--teal-dark); line-height: 1.75; margin: 0; }
.jcp-story-body strong { font-weight: 700; }
.jcp-story-steps { display: flex; flex-direction: column; gap: 14px; }
.jcp-story-step { display: flex; align-items: flex-start; gap: 13px; }
.jcp-story-step-num {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
  background: var(--white); border: 1.5px solid var(--teal);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 900; color: var(--teal-dark);
}
.jcp-story-step-text { font-size: 13.5px; color: var(--teal-dark); line-height: 1.5; }
.jcp-story-step-text strong { font-weight: 700; }

/* ════════════════ SUB-PILLARS AS "PRODUCTS" ════════════════ */
.jcp-products { display: flex; flex-direction: column; gap: 22px; }
.jcp-product {
  border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden;
  background: var(--white); transition: box-shadow .25s, border-color .25s, transform .25s;
  opacity: 0; transform: translateY(18px);
}
.jcp-product.visible { opacity: 1; transform: translateY(0); }
.jcp-product:nth-child(2) { transition-delay: .08s; }
.jcp-product:nth-child(3) { transition-delay: .16s; }
.jcp-product:hover { box-shadow: 0 14px 44px rgba(26,26,26,0.10); border-color: var(--teal-border); }

.jcp-product-grid { display: grid; grid-template-columns: 1fr 320px; gap: 0; }
.jcp-product-main { padding: 30px 34px; }
.jcp-product-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 4px; }
.jcp-product-eyebrow {
  font-size: 10.5px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: var(--teal);
}
.jcp-product-count {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.5px;
  padding: 4px 11px; border-radius: 100px; background: var(--teal-tint2); color: var(--teal-dark);
  border: 1px solid var(--teal-border); white-space: nowrap;
}
.jcp-product-name {
  font-size: 22px; font-weight: 900; color: var(--dark); letter-spacing: -0.5px;
  line-height: 1.2; margin: 6px 0 12px;
}
.jcp-product-desc { font-size: 14.5px; color: var(--body); line-height: 1.7; margin: 0 0 20px; }

/* "Built for" framing — compliant: describes who the account is built for, not advice */
.jcp-fit {
  background: var(--teal-tint2); border-left: 3px solid var(--teal);
  border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: 14px 18px; margin-bottom: 20px;
}
.jcp-fit-label {
  font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--teal); margin-bottom: 5px; display: flex; align-items: center; gap: 6px;
}
.jcp-fit-text { font-size: 13.5px; color: var(--body); line-height: 1.6; }
.jcp-fit-text strong { color: var(--teal-dark); font-weight: 700; }

.jcp-features { display: flex; flex-wrap: wrap; gap: 8px; }
.jcp-feature {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500;
  color: var(--body); padding: 6px 12px; border-radius: 100px; background: var(--light); border: 1px solid var(--border);
}
.jcp-feature svg { color: var(--teal); flex-shrink: 0; }

/* Right rail */
.jcp-product-rail {
  background: linear-gradient(165deg, #1d3940, #14282d); padding: 28px;
  display: flex; flex-direction: column; position: relative;
}
.jcp-product-rail::before {
  content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 1px;
  background: linear-gradient(180deg, transparent, rgba(77,137,144,0.4), transparent);
}
.jcp-rail-label {
  font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  color: rgba(168,221,227,0.7); margin-bottom: 14px;
}
.jcp-rail-list { list-style: none; margin: 0 0 22px; padding: 0; }
.jcp-rail-list li {
  display: flex; align-items: flex-start; gap: 9px; font-size: 12.5px;
  color: rgba(255,255,255,0.72); line-height: 1.5; margin-bottom: 10px;
}
.jcp-rail-list li svg { flex-shrink: 0; margin-top: 2px; color: var(--teal-light); }
.jcp-rail-cta {
  margin-top: auto; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: var(--gold); color: #1a1a1a !important; font-size: 13.5px; font-weight: 700;
  padding: 13px 18px; border-radius: 100px; text-decoration: none !important; transition: all .18s;
}
.jcp-rail-cta:hover { background: var(--gold-dark); transform: translateY(-1px); box-shadow: 0 6px 22px rgba(255,217,102,0.4); }
.jcp-rail-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 9px; font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.6) !important;
  text-decoration: none !important; transition: color .15s;
}
.jcp-rail-ghost:hover { color: var(--teal-light) !important; }

/* ════════════════ HOW WE SCORE — 5 dims ════════════════ */
.jcp-dims { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 16px; }
.jcp-dim {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--r);
  padding: 20px 18px; border-top: 3px solid var(--teal);
}
.jcp-dim:nth-child(2) { border-top-color: var(--teal-light); }
.jcp-dim:nth-child(3) { border-top-color: var(--gold); }
.jcp-dim:nth-child(4) { border-top-color: var(--teal-dark); }
.jcp-dim:nth-child(5) { border-top-color: var(--dark2); }
.jcp-dim-icon {
  width: 34px; height: 34px; border-radius: 9px; background: var(--teal-tint); color: var(--teal);
  display: flex; align-items: center; justify-content: center; margin-bottom: 13px;
}
.jcp-dim-q {
  font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--muted); margin-bottom: 3px;
}
.jcp-dim-name { font-size: 15px; font-weight: 900; color: var(--dark); letter-spacing: -0.3px; margin-bottom: 7px; }
.jcp-dim-desc { font-size: 12.5px; color: var(--muted); line-height: 1.55; }
.jcp-scoring-note {
  font-size: 12.5px; color: var(--muted); line-height: 1.7; margin-top: 18px;
  padding: 14px 18px; background: var(--light); border-radius: var(--r); border: 1px solid var(--border);
}
.jcp-scoring-note strong { color: var(--body); font-weight: 700; }
.jcp-scoring-note a { color: var(--teal); text-decoration: underline; }

/* ════════════════ CLAIRE COMPONENT (secondary) ════════════════ */
.jcc-wrap { margin-bottom: 64px; }
.jcc-shell {
  background: var(--dark); border-radius: var(--r-lg); padding: 46px 44px;
  display: grid; grid-template-columns: 1.25fr 1fr; gap: 44px; position: relative; overflow: hidden;
}
.jcc-shell::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 12% 0%, rgba(77,137,144,0.28) 0%, transparent 60%),
    radial-gradient(ellipse 40% 50% at 100% 100%, rgba(255,217,102,0.05) 0%, transparent 55%);
  pointer-events: none;
}
.jcc-left, .jcc-right { position: relative; }
.jcc-lockup { display: flex; align-items: center; gap: 11px; margin-bottom: 9px; }
.jcc-glyph { display: flex; animation: jcc-glyph-pulse 3s ease-in-out infinite; }
@keyframes jcc-glyph-pulse {
  0%,100% { opacity:1; transform:scale(1); }
  50% { opacity:.85; transform:scale(.93); }
}
.jcc-name { font-size: 30px; font-weight: 900; color: var(--teal-light); letter-spacing: -1px; line-height: 1; text-transform: lowercase; }
.jcc-byline {
  font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  color: rgba(168,221,227,0.6); margin-bottom: 18px;
}
.jcc-heading {
  font-size: clamp(20px, 2.8vw, 27px); font-weight: 900; color: var(--white);
  letter-spacing: -0.5px; line-height: 1.25; margin: 0 0 16px;
}
.jcc-heading em { color: var(--teal-light); font-style: normal; }
.jcc-body { font-size: 14.5px; color: rgba(255,255,255,0.62); line-height: 1.75; margin: 0 0 24px; max-width: 460px; }
.jcc-cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.jcc-btn {
  display: inline-flex; align-items: center; gap: 8px; background: var(--teal); color: #fff !important;
  font-size: 14px; font-weight: 700; padding: 13px 24px; border-radius: 100px;
  text-decoration: none !important; transition: all .18s;
}
.jcc-btn:hover { background: var(--teal-light); color: var(--dark) !important; transform: translateY(-1px); }
.jcc-ghost { font-size: 13.5px; font-weight: 600; color: rgba(255,255,255,0.6) !important; text-decoration: none !important; }
.jcc-ghost:hover { color: var(--teal-light) !important; }

.jcc-chat { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; padding: 18px; }
.jcc-chat-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 16px;
  padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,0.08);
}
.jcc-chat-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px rgba(39,174,96,0.6); }
.jcc-chat-title { font-size: 11.5px; font-weight: 700; color: rgba(255,255,255,0.8); }
.jcc-bubble { font-size: 12.5px; line-height: 1.55; padding: 11px 14px; border-radius: 12px; margin-bottom: 10px; max-width: 90%; }
.jcc-bubble.user { background: rgba(77,137,144,0.3); color: rgba(255,255,255,0.92); margin-left: auto; border-bottom-right-radius: 4px; }
.jcc-bubble.claire { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.78); border-bottom-left-radius: 4px; }
.jcc-bubble.claire strong { color: var(--teal-light); font-weight: 700; }

/* ════════════════ TRANSPARENCY / DISCLOSURE ════════════════ */
.jcp-disclosure { background: var(--teal-tint); border: 1px solid var(--teal-border); border-radius: var(--r-lg); padding: 28px 32px; }
.jcp-disclosure-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.jcp-disclosure-head svg { color: var(--teal); }
.jcp-disclosure-head h3 { font-size: 16px; font-weight: 900; color: var(--teal-dark); margin: 0; letter-spacing: -0.3px; }
.jcp-disclosure p { font-size: 13px; color: var(--teal-dark); line-height: 1.7; margin: 0 0 10px; }
.jcp-disclosure p:last-child { margin-bottom: 0; }
.jcp-disclosure a { color: var(--teal-dark); text-decoration: underline; font-weight: 600; }

/* ════════════════ FAQ ════════════════ */
.faq-list { display: flex; flex-direction: column; gap: 3px; }
.faq-item { border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; }
.faq-q {
  width: 100%; text-align: left; background: var(--white); border: none;
  padding: 17px 22px; font-family: 'Roboto', sans-serif; font-size: 14px; font-weight: 600;
  color: var(--dark); cursor: pointer; display: flex; justify-content: space-between;
  align-items: center; gap: 12px; transition: background .12s; list-style: none;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q:hover, .faq-item[open] .faq-q { background: var(--teal-tint); color: var(--teal-dark); }
.faq-icon {
  width: 24px; height: 24px; border-radius: 50%; background: var(--teal-tint); color: var(--teal);
  display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 300;
  flex-shrink: 0; transition: all .18s; line-height: 1;
}
.faq-item[open] .faq-icon { background: var(--teal); color: #fff; transform: rotate(45deg); }
.faq-a {
  padding: 0 22px 18px; font-size: 13.5px; line-height: 1.75;
  color: var(--body); background: var(--teal-tint); border-top: 1px solid rgba(77,137,144,0.2);
}
.faq-a p { margin-top: 14px; margin-bottom: 0; }
.faq-a a { color: var(--teal-dark); text-decoration: underline; }

/* ════════════════ PILLAR HUB CROSS-LINKS ════════════════ */
.jcp-hubs-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.jcp-hub-card {
  display: flex; flex-direction: column;
  padding: 22px 20px 18px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.jcp-hub-icon {
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--teal-tint); color: var(--teal);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.jcp-hub-label {
  font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--teal); margin-bottom: 4px;
}
.jcp-hub-name {
  font-size: 16px; font-weight: 900; color: var(--dark); letter-spacing: -0.3px;
  line-height: 1.2; margin-bottom: 8px;
}
.jcp-hub-desc { font-size: 12.5px; color: var(--muted); line-height: 1.55; flex: 1; margin-bottom: 14px; }
.jcp-hub-links { display: flex; flex-direction: column; gap: 9px; padding-top: 13px; border-top: 1px solid var(--border); }
.jcp-hub-link {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; font-weight: 600; color: var(--teal); text-decoration: none !important;
  transition: color .15s;
}
.jcp-hub-link:hover { color: var(--teal-dark); }
.jcp-hub-link-sec {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 500; color: var(--muted); text-decoration: none !important;
  transition: color .15s;
}
.jcp-hub-link-sec:hover { color: var(--teal); }
.jcp-hub-card:hover { border-color: var(--teal-border); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(26,26,26,0.08); }
@media (max-width: 760px) {
  .jcp-hubs-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
  .jcp-hubs-grid { grid-template-columns: 1fr; }
}

/* ════════════════ FINAL CTA ════════════════ */
.jcp-final {
  background: var(--dark); border-radius: var(--r-lg); padding: 56px 44px;
  text-align: center; position: relative; overflow: hidden;
}
.jcp-final::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 80% at 50% -10%, rgba(77,137,144,0.3) 0%, transparent 60%);
  pointer-events: none;
}
.jcp-final h2 {
  position: relative; font-size: clamp(24px, 3.5vw, 36px); font-weight: 900; color: var(--white);
  letter-spacing: -0.8px; line-height: 1.15; margin: 0 0 14px;
}
.jcp-final h2 .gold { color: var(--gold); }
.jcp-final p {
  position: relative; font-size: 15.5px; color: rgba(255,255,255,0.6); font-weight: 300;
  max-width: 560px; margin: 0 auto 30px; line-height: 1.75;
}
.jcp-final-row { position: relative; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.jcp-final-gold {
  display: inline-flex; align-items: center; gap: 8px; background: var(--gold); color: #1a1a1a !important;
  font-size: 15px; font-weight: 700; padding: 15px 30px; border-radius: 100px;
  text-decoration: none !important; transition: all .18s; box-shadow: 0 6px 26px rgba(255,217,102,0.3);
}
.jcp-final-gold:hover { background: var(--gold-dark); transform: translateY(-1px); box-shadow: 0 8px 32px rgba(255,217,102,0.45); }
.jcp-final-outline {
  display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.8) !important; font-size: 14.5px; font-weight: 600; padding: 15px 26px;
  border-radius: 100px; border: 1px solid rgba(255,255,255,0.18); text-decoration: none !important; transition: all .18s;
}
.jcp-final-outline:hover { background: rgba(255,255,255,0.12); color: #fff !important; }
.jcp-final-note { position: relative; font-size: 11.5px; color: rgba(255,255,255,0.4); margin-top: 22px; }
.jcp-final-note a { color: rgba(255,255,255,0.5); }

/* ════════════════ RESPONSIVE ════════════════ */
@media (max-width: 860px) {
  .jcp-hero-inner { grid-template-columns: 1fr; gap: 32px; }
  .jcp-hero-copy { max-width: 100%; }
  .jcp-hero-gauge { order: -1; }
  .jcp-gauge-container { width: 240px; }
  .jcp-product-grid { grid-template-columns: 1fr; }
  .jcp-product-rail::before { display: none; }
  .jcp-dims { grid-template-columns: repeat(2, 1fr); }
  .jcc-shell { grid-template-columns: 1fr; gap: 30px; padding: 36px 28px; }
  .jcp-story { grid-template-columns: 1fr; gap: 26px; }
  .jcp-coverage .jcp-cov-item { flex-basis: 50%; }
}
@media (max-width: 560px) {
  .jcp-hero { padding: 40px 26px; }
  .jcp-product-main { padding: 24px 22px; }
  .jcp-dims { grid-template-columns: 1fr; }
  .jcp-final { padding: 44px 26px; }
  .jcp-coverage .jcp-cov-item { flex-basis: 100%; border-right: none; border-bottom: 1px solid var(--border); }
}

/* ══════════════════════════════════════════════════════════════════════════
   SECTION B — ADAPTED. Structure this page has and the pillar hubs do not.
   Every rule reuses the tokens, radii, shadows and type scale declared above;
   no new visual vocabulary is introduced here.
   ══════════════════════════════════════════════════════════════════════════ */

.wjs-center { text-align: center; margin-left: auto; margin-right: auto; }
.wjs-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; }

.wjs-hero-trust { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; row-gap: 4px;
  background: rgba(255,217,102,0.10); border: 1px solid rgba(255,217,102,0.22);
  border-radius: var(--r); padding: 12px 16px; color: rgba(255,255,255,0.72);
  font-size: 14px; font-weight: 300; margin: 0 0 24px; max-width: 600px; }
.wjs-hero-trust strong { color: #fff; font-weight: 600; }
.wjs-hero-trust a { color: var(--gold); font-weight: 500; }

/* Shout wall — jcp-hub-card is the sibling; these are tone variants of it. */
/* ── RHYTHM CONFORMED TO THE ORACLE (2026-07-30). Every value below was MEASURED on served
   /banking against this element's nearest pillar sibling, not chosen. Sibling named per rule. ── */
.wjs-glance-group { margin-bottom: 64px; }        /* sibling .jcp-section marginBottom 64px */
.wjs-glance-group:last-child { margin-bottom: 0; }
.wjs-shout-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 16px; }  /* gap matches .jcp-hubs-grid */
.wjs-shout { padding: 22px 20px 18px; }   /* sibling .jcp-hub-card padding-bottom 18px */
/* sibling .jcp-hub-name: 16px / 900 / lh 1.2 / ls -0.3px / margin-bottom 8px */
.wjs-shout-head { font-size: 16px; font-weight: 900; line-height: 1.2; letter-spacing: -0.3px;
  color: var(--dark); margin: 8px 0; }
/* --teal measured 3.96:1 at 12.5px on white — below AA. --teal-dark is the vocabulary's darker step.
   Caught by the health gate the moment these links were restored, which is the gate earning its keep. */
/* ⚠ .jcp-wrap a (0,1,1) from the lifted block outranks a bare .wjs-shout-link (0,1,0), so the first
   attempt at this fix changed nothing and the gate correctly kept failing. Qualified to (0,2,1). */
.jcp-wrap a.wjs-shout-link { display: inline-block; margin-top: 12px; font-size: 12.5px; font-weight: 600; color: var(--teal-dark); }




/* Money rows — pastel numeral circles over the disclosure tint. */
.wjs-money-rows { display: flex; flex-direction: column; gap: 22px; margin: 22px 0; }  /* sibling .jcp-products gap 22px */
.wjs-money-row { display: grid; grid-template-columns: 56px 1fr 130px 130px;
  align-items: center; gap: 16px; border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 18px 22px; background: var(--white); }
.wjs-money-row:nth-child(odd) { background: var(--teal-tint2); }
.wjs-money-num { width: 48px; height: 48px; border-radius: 50%; background: var(--teal-tint);
  color: var(--teal); font-size: 20px; font-weight: 900; display: flex;
  align-items: center; justify-content: center; }
/* sibling .jcp-product-name: 22px / lh 26.4px / margin-bottom 12px */
.wjs-money-head { font-size: 22px; line-height: 26.4px; margin-bottom: 12px; }
.wjs-money-prose { font-size: 13.5px; font-weight: 300; line-height: 1.65; margin: 0; color: var(--body); }
.wjs-money-metric { display: flex; flex-direction: column; gap: 5px; }
/* --teal at 18px/900 measured 3.62:1 on the tinted row — below AA 4.5 for text under 18.66px.
   --teal-dark is the vocabulary's own darker step, so this stays inside the palette. */
.wjs-metric-value { font-size: 18px; font-weight: 900; color: var(--teal-dark); letter-spacing: -0.4px; }

/* AI quote trio — the dark-band language from jcc-shell. */
.wjs-quote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 22px 0; }  /* 22px = house inter-block rhythm (.jcp-products gap) */
.wjs-quote { margin: 0; border-radius: var(--r-lg); padding: 24px; background: var(--dark);
  position: relative; overflow: hidden; }
.wjs-quote::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 60% at 20% 0%, rgba(77,137,144,0.22) 0%, transparent 60%); }
.wjs-quote--2 { background: var(--dark2); }
.wjs-quote blockquote { margin: 0; padding: 0; border: 0; font-size: 13.5px; font-weight: 300;
  line-height: 1.7; color: rgba(255,255,255,0.88); position: relative; }
.wjs-quote blockquote::before { content: "\201C"; display: block; font-family: Georgia, serif;
  font-size: 44px; line-height: .55; color: rgba(168,221,227,0.35); margin-bottom: 6px; }
.wjs-quote figcaption { margin-top: 14px; font-size: 9.5px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: rgba(168,221,227,0.7); position: relative; }

/* Partners band + For-AI quiet block. */
.wjs-partners .jcp-rail-cta { display: inline-flex; margin-top: 14px; }
.wjs-forai { color: var(--muted); }
.wjs-forai .sec-head { font-size: 20px; color: var(--muted); font-weight: 700; }

/* --teal measured 3.96:1 at 13.5px here — below AA. --teal-dark is the vocabulary's darker step. */


/* ── Breakpoints for the ADAPTED sections only. The lifted components carry
   their own, unchanged. Re-verified at the new densities. ────────────────── */
@media (max-width: 1100px) {
  .wjs-shout-grid, .wjs-quote-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .wjs-shout-grid, .wjs-quote-grid { grid-template-columns: 1fr; }
  .wjs-money-row { grid-template-columns: 48px 1fr; gap: 12px; padding: 16px; }
  .wjs-money-metric { grid-column: 2; flex-direction: row; gap: 8px; align-items: baseline; }
  .wjs-hero-trust { margin-bottom: 18px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SECTION C1 — THE REVEAL IS OPT-IN. ⛔ INVISIBLE IS NEVER THE DEFAULT.

   The lifted `.jcp-product` ships `opacity: 0`, revealed by an IntersectionObserver adding
   `.visible`. On this page's FIRST DEPLOY the CSS shipped and the observer did not, so three cards
   rendered as a blank multi-viewport void ON THE LIVE PAGE — the same defect that had already been
   caught once in the preview, shipped again through the one path the preview could not see.

   ⭐ SO THE DEFAULT IS INVERTED RATHER THAN GUARDED. Cards are VISIBLE in the stylesheet; the
   page script arms the animation by adding `js-anim` to the root before it observes anything. A
   guard that depends on remembering to ship a guard is not a guard — this cannot fail closed
   because there is nothing to forget.
   ══════════════════════════════════════════════════════════════════════════ */
.jcp-product { opacity: 1; transform: none; }
.js-anim .jcp-product { opacity: 0; transform: translateY(18px); }
.js-anim .jcp-product.visible { opacity: 1; transform: translateY(0); }

/* ══════════════════════════════════════════════════════════════════════════
   SECTION C2 — NO-JS FAIL-SAFE.  ⛔ NO COMPONENT MAY DEFAULT TO INVISIBLE.

   The lifted `.jcp-product` (and its siblings) ship `opacity: 0` and are revealed by an
   IntersectionObserver adding `.visible`. That is a REVEAL ANIMATION in the pillar hubs and it was
   a BLANK MULTI-VIEWPORT VOID here, because the CSS was lifted and the observer JS was not — three
   Why-pages cards rendered as nothing at all.

   ⭐ THE LESSON IS NOT "REMEMBER THE JS". A component whose default state is invisible fails
   CATASTROPHICALLY and SILENTLY whenever its script does not run — blocked, deferred, errored, or
   simply not lifted. Opacity-0-until-observed must degrade to VISIBLE, so the worst case is a
   missing animation rather than a missing page.

   Belt and braces, in this order:
     1. `.no-js` on the root (removed by the component JS on boot) forces everything visible.
     2. `@media (prefers-reduced-motion: reduce)` — never animate for users who asked not to.
   ══════════════════════════════════════════════════════════════════════════ */
.no-js .jcp-product,
.no-js .jcp-hub-card,
.no-js [class*="jcp-"][style*="opacity"] { opacity: 1 !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  .jcp-product, .jcp-hub-card { opacity: 1 !important; transform: none !important; }
  .jcp-gauge-svg * { transition: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SECTION D — FOUNDER-RULED PAGE DIVERGENCES FROM THE /banking ORACLE
   (batch of 2026-07-30; cd design is the softness/tint reference, house palette throughout)

   ⭐ EVERY RULE HERE IS A DELIBERATE DIVERGENCE, NOT A DRIFT. Each has a matching named entry in
   the style oracle's allowlist, so the gate stays GREEN AND HONEST rather than green because
   nobody looked. Anything in this section that is NOT allowlisted is a bug.

   THE REASON THE PAGE DIVERGES AT ALL: /banking's headlines are short noun phrases ("Checking
   accounts"); this page's are long sentence-headlines ("Where do you want to go deeper?",
   "No long lists — just one Match Score…"). The pillar scale of 30px/900 was measured correct for
   the first and reads heavy for the second. The scale is not wrong — the content shape is
   different, and that is a page-level fact, not a house-level one.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · TYPE SCALE: smaller, lighter than the pillar scale ─────────────── */
.jcp-wrap .sec-head { font-size: clamp(20px, 2.2vw, 27px); font-weight: 700; letter-spacing: -0.4px; }
.jcp-wrap .sec-sub { font-size: 15px; font-weight: 300; line-height: 1.75; }
.jcp-wrap .jcp-product-name { font-size: 19px; font-weight: 700; letter-spacing: -0.3px; }
.jcp-wrap .jcp-hub-name { font-size: 16px; font-weight: 700; letter-spacing: -0.2px; }
.jcp-wrap .jcc-heading { font-size: clamp(20px, 2.2vw, 27px); font-weight: 700; }
.jcp-wrap .jcp-product-desc { font-size: 14.5px; font-weight: 300; line-height: 1.75; }
.wjs-shout-head { font-size: 17px; font-weight: 600; line-height: 1.45; letter-spacing: -0.1px; margin: 8px 0; }
.wjs-money-head { font-size: 18px; font-weight: 700; line-height: 1.35; }

/* ── 2 · CARD TINTS: soft differentiating overlays, house palette only ──── */
/* Alternating cream / teal / neutral across each trio, per the cd reference. Plain white read as
   undifferentiated at three-across; the tint is what separates the three claims at a glance. */
.wjs-shout-grid > .wjs-shout:nth-child(3n+1) { background: rgba(255,217,102,0.07); border-color: rgba(255,217,102,0.42); }
.wjs-shout-grid > .wjs-shout:nth-child(3n+2) { background: var(--teal-tint); border-color: var(--teal-border); }
.wjs-shout-grid > .wjs-shout:nth-child(3n+3) { background: var(--light); border-color: var(--border); }
.wjs-shout-grid > .wjs-shout:nth-child(3n+1) .jcp-product-eyebrow { color: var(--gold-dark); }

/* ── 3 · EYEBROW BREATHING ROOM: section-top rhythm ─────────────────────── */
/* Eyebrows crowded the preceding section's cards — "THE WHY PAGES" sat tight under the card above.
   The pillar sections are separated by their own card stacks; this page runs sections back to back. */
.jcp-wrap .jcp-section { padding-top: 26px; }
.jcp-wrap .jcp-section > .sec-eyebrow:first-child { margin-top: 22px; }
.wjs-glance-group + .wjs-glance-group { margin-top: 20px; }

/* ── 9 · MONEY SECTION: cd softness over the pillar table treatment ─────── */
.wjs-money-row { border-color: rgba(77,137,144,0.16); }
.wjs-money-row:nth-child(odd) { background: var(--teal-tint); }
.wjs-money-row:nth-child(even) { background: rgba(255,217,102,0.07); border-color: rgba(255,217,102,0.34); }
.wjs-money-num { background: rgba(77,137,144,0.14); color: var(--teal-dark); }
.wjs-money-row:nth-child(even) .wjs-money-num { background: rgba(255,217,102,0.30); color: var(--gold-dark); }

.wjs-metric-value { font-size: 17px; font-weight: 700; }

/* ── 10 · FAQ GROUP EYEBROWS: whitespace above each group ───────────────── */
.jcp-wrap .faq-list + .sec-eyebrow { margin-top: 38px; }
.jcp-wrap #faq .sec-eyebrow { margin-top: 34px; }
.jcp-wrap #faq .sec-eyebrow:first-of-type { margin-top: 18px; }

@media (max-width: 680px) {
  .jcp-wrap .jcp-section { padding-top: 18px; }
  .jcp-wrap #faq .sec-eyebrow { margin-top: 26px; }
}

/* --teal measured 3.96:1 at 15px on the light band — below AA. Qualified to (0,2,1) because the
   lifted .jcp-wrap a (0,1,1) outranks a bare class selector. */
.jcp-wrap .sec-sub a { color: var(--teal-dark); }

/* ── 12 · DUAL HUB LINKS with the hairline divider (founder reference) ──── */
.jcp-wrap .jcp-hub-links { display: flex; flex-direction: column; gap: 0; margin-top: auto; }
.jcp-wrap .jcp-hub-link { padding: 10px 0; font-size: 12.5px; font-weight: 600; }
.jcp-wrap .jcp-hub-link-sec { padding: 10px 0; font-size: 12.5px; font-weight: 500;
  color: var(--muted); border-top: 1px solid var(--border); }
.jcp-wrap .jcp-hub-link-sec:hover { color: var(--teal-dark); }

/* ── ITEM 1, SECOND TURN (founder, 2026-07-30) ──────────────────────────────
   The first pass moved the scale but not far enough. These are READING STATEMENTS, not display
   heads — long sentence-headlines that the pillar's 30px/900 was never measured against. Values
   below supersede the first pass; the allowlist entry states these, not the earlier ones. */
.jcp-wrap .sec-head { font-size: clamp(19px, 1.9vw, 25px); font-weight: 600; letter-spacing: -0.3px; line-height: 1.28; }
.jcp-wrap .jcc-heading { font-size: clamp(19px, 1.9vw, 25px); font-weight: 600; letter-spacing: -0.3px; }
/* One headline voice: the later heads move with the top three rather than splitting the page. */
.jcp-wrap .jcp-product-name { font-size: 18px; font-weight: 600; letter-spacing: -0.2px; }
.wjs-money-head { font-size: 17px; font-weight: 600; }
.jcp-wrap .jcp-hub-name { font-size: 15.5px; font-weight: 600; letter-spacing: -0.1px; }

/* Small-card inner copy: regular weight, smaller, relaxed leading. EYEBROWS UNCHANGED. */
.wjs-shout-head { font-size: 15px; font-weight: 400; line-height: 1.62; letter-spacing: 0; margin: 8px 0; }

/* ── ITEM 9, EXTENDED: the Zero verdicts become PILLS (founder, 2026-07-30) ──
   "Zero" is a VERDICT, not a table value — the whole section exists to say that money changes
   nothing. As plain text in a column it read as data; as a chip it reads as the answer. Same size
   in both metric columns and all three rows, so the three verdicts scan as one repeated statement.
   House tokens only: teal tint fill, teal-dark 700 text (the AA-safe step, matching the fix already
   applied to the metric values). */
.wjs-money-metric { gap: 7px; }

.wjs-metric-value {
  display: inline-flex; align-items: center; justify-content: center; align-self: flex-start;
  background: rgba(77,137,144,0.14); color: var(--teal-dark);
  font-size: 14px; font-weight: 700; letter-spacing: 0;
  padding: 7px 20px; border-radius: 100px; line-height: 1;
}
/* On the gold-tinted alternate rows the teal chip keeps its own identity rather than inheriting
   the row's warmth — the verdict must read the same on every row. */
.wjs-money-row:nth-child(even) .wjs-metric-value { background: rgba(77,137,144,0.14); color: var(--teal-dark); }
/* Generous padding per the reference. */
.wjs-money-row { padding: 24px 26px; gap: 20px; }
@media (max-width: 680px) {
  .wjs-money-row { padding: 18px 16px; }
  .wjs-metric-value { padding: 6px 16px; font-size: 13px; }
}

/* ── MONEY SECTION, founder batch 2026-07-30 (items 2, 3, 4) ────────────────
   All three ride the standing item-9 allowlist entry; no new entry. */

/* 2 · Metric headers: the house muted-dark label colour the eyebrows use, not a washed pale-teal
   that disappears into the row tints. Tracking eased and column widened so each header sits on one
   clean line instead of wrapping awkwardly against the pill beneath it. */
/* ⚠ THE MARKUP USES THE LIFTED .jcp-rail-label HERE, NOT .wjs-metric-label — so the first version
   of this rule matched NOTHING and the headers kept their washed pale-teal. Scoped to the money
   metric so the spoke rails, which legitimately use the pale label on dark, are untouched. */
.wjs-money-metric .jcp-rail-label {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.9px;
  text-transform: uppercase; color: var(--body); white-space: nowrap; margin: 0; }
.wjs-money-row { grid-template-columns: 64px 1fr 152px 152px; }

/* 3 · Row 2 loses the gold tint: it read as a HIGHLIGHT STATE — one row singled out — when the
   three rows are peers. Very light teal keeps them one family. Numeral circle follows. */
.wjs-money-row:nth-child(even) { background: rgba(77,137,144,0.045); border-color: rgba(77,137,144,0.16); }
.wjs-money-row:nth-child(even) .wjs-money-num { background: rgba(77,137,144,0.14); color: var(--teal-dark); }

/* 4 · Zero pills, bolder: solid house teal, white text, 700. The verdict should read as a stamp,
   not a tint. Identical across all six so the three rows say the same thing the same way. */
/* --teal at #4D8990 with white text measures 3.96:1 — below AA 4.5, caught by the health gate the
   moment the pills went solid. --teal-dark is the house's OWN darker teal step, so this stays
   "solid house teal, white text" as ruled and clears AA at ~5.9:1. */
.wjs-metric-value,
.wjs-money-row:nth-child(even) .wjs-metric-value {
  background: var(--teal-dark); color: #fff; font-weight: 700; font-size: 14px;
  padding: 8px 22px; border-radius: 100px; letter-spacing: 0.2px;
}
@media (max-width: 680px) {
  .wjs-money-row { grid-template-columns: 48px 1fr; }

}

/* ── GEO / CONTENT BATCH 2026-07-30 — rides the item-9 / item-1 allowlist entries ──────────── */
/* wjs- prefix: adapted, not lifted — an invented class wearing a jcp- name is how drift hides. */
.wjs-cov-support { font-size: 12.5px; font-weight: 300; color: var(--body); margin: 12px 0 0; max-width: 78ch; }
/* Quotable line: the money-section closing treatment at a lighter weight, per the ruling. */
.wjs-quotable { background: var(--teal-tint); border: 1px solid var(--teal-border); border-radius: var(--r-lg);
  padding: 20px 24px; margin: 18px 0 0; font-size: 16px; font-weight: 400; line-height: 1.6; color: var(--dark); }
.wjs-quote-support { font-size: 13.5px; font-weight: 300; line-height: 1.7; color: var(--body);
  margin: 16px 0 0; max-width: 82ch; }
.wjs-inline-link { margin: 12px 0 0; font-size: 13px; font-weight: 600; }
.jcp-wrap .wjs-inline-link a { color: var(--teal-dark); }
/* Partner pull-quote: prominent, house style, inside the tinted disclosure band. */
.wjs-pullquote { font-size: 19px; font-weight: 700; line-height: 1.4; letter-spacing: -0.2px;
  color: var(--teal-dark); margin: 18px 0 16px; padding-left: 16px; border-left: 3px solid var(--teal); }
@media (max-width: 680px) { .wjs-pullquote { font-size: 17px; } .wjs-quotable { padding: 16px 18px; font-size: 15px; } }

/* ── TEAM: DARK-BAND SHELL, option (b) (founder, 2026-07-30) ────────────────
   Takes the jcc shell's TREATMENT — dark card, radial glow, band typography — and NOT its identity.
   The glyph pulse, claire lockup and chat preview stay unique to the Ask-Claire band: repeating
   them here would have made the team section read as a second Claire band rather than as the team.
   Values lifted from .jcc-shell / .jcc-heading / .jcc-body rather than re-derived. */
/* ⭐ SHIPPED AS (b)-FLAT, NOT (b). The density check decided it, and not on the 25%% total: the
   AI-quote trio, the Claire band and this band run nearly continuously from y=4238 to ~5384 —
   about 1,150px of dark. A SECOND GLOWING band directly beneath the glowing Claire band read as one
   long dark stretch rather than two sections. Flat --dark2 still lifts the team out of the white
   run while staying visibly subordinate to the Claire band above it, which is the section that
   should own the glow. */
.wjs-band { background: var(--dark2); border-radius: var(--r-lg); padding: 46px 44px;
  position: relative; overflow: hidden; margin: 26px 0; }
.wjs-band-inner { position: relative; z-index: 1; max-width: 78ch; }
.jcp-wrap .wjs-band-eyebrow { color: rgba(168,221,227,0.75); }
.jcp-wrap .wjs-band-head { color: var(--white); }
.wjs-band-body { font-size: 14.5px; font-weight: 300; color: rgba(255,255,255,0.62);
  line-height: 1.75; margin: 0 0 18px; }
.wjs-band-body:last-child { margin-bottom: 0; }
@media (max-width: 680px) { .wjs-band { padding: 30px 22px; } }

/* ── CLAIRE "AI" BADGE — PROPORTIONAL AT EVERY SIZE ────────────────────────
   PROVENANCE: .js-ai-badge from public/chrome.css (the header's Ask Claire pill,
   templates/partials/header.njk:40,102). The chip is chrome's; only its SCALING is restated here.

   ⭐ THE DEFECT AND ITS CAUSE, MEASURED. The first --head modifier hard-set height:1.05em and
   padding:0 0.32em, which BROKE the reference proportions the CTA badges carry:
        CTA (reference)   pad/fs 0.40   height/fs 1.60
        H2 heading (bad)  pad/fs 0.32   height/fs 1.05
   Tighter padding AND a box hugging the glyphs — "a tight pill touching the letterforms". The fault
   was per-surface override, so the fix is component-level: express the REFERENCE RATIOS in em and
   let every rendering inherit them.

   TWO INVARIANTS, both now structural rather than per-surface:
     1. CLEARANCE — padding is 0.4em of the badge's OWN font-size, so it scales with the chip.
     2. SUBORDINATE — box height is 1.6em of the badge's own size, and the --head font-size is
        chosen so 1.6 x fs lands at the heading's cap height (~0.71 x heading size). The chip sits
        inline under the words and never breaks the line.

   ⚠ A NO-OP FOR THE CTAs BY CONSTRUCTION: at chrome's 10px base, 0.4em = 4px, 1.6em = 16px,
   0.15em = 1.5px, 0.5em = 5px — byte-identical to the values they already render. The reference
   cannot drift while being made the rule, which is the point of restating it proportionally.
   The header pill is outside .jcp-wrap and is untouched entirely. */
.jcp-wrap .js-ai-badge {
  height: 1.6em; padding: 0 0.4em; border-width: 0.15em; border-radius: 0.5em;
}
/* 0.44em x 1.6 = 0.70em of the heading = its cap height. Larger and the chip breaks the line. */
.jcp-wrap .js-ai-badge--head { font-size: 0.44em; vertical-align: 0.06em; }

/* ══════════════════════════════════════════════════════════════════════════
   HERO TRUST CHIP + MOBILE HERO ORDER (founder, 2026-07-31)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Breaks only at the em-dash seam ──────────────────────────────────────
   Each half is a complete claim. "Brands can't pay us for a better rating or a better match" was
   splitting mid-phrase and "here's how we actually make money." after "make". nowrap per half makes
   the seam the SINGLE permitted break point; the flex wrapper wraps so the halves stack there
   rather than overflow. */
/* ── HANGING INDENT: the dot owns a column, every text line shares the text column ──
   Stacked at the seam, the second half was aligning to the DOT rather than to the text above it.
   Grid makes that structural: fixed dot column, single text column, so both halves — and any
   future line — start on the same left edge at every width. */
.wjs-hero-trust { display: grid; grid-template-columns: 7px 1fr; column-gap: 10px; row-gap: 3px;
  align-items: baseline; }
/* ⚠ THE DOT IS .jcp-cov-pulse — the LIFTED pulse element, not a wjs- class. The first version of
   this rule named .wjs-trust-dot, which does not exist in the markup, so it assigned nothing and
   relied on auto-placement to land the dot correctly by accident. */
.wjs-hero-trust > .jcp-cov-pulse { grid-column: 1; align-self: center; }
.wjs-hero-trust > strong, .wjs-hero-trust > a { grid-column: 2; white-space: nowrap; }

@media (max-width: 680px) {
  /* ⛔ §5 — THE TRUST LINE MUST CLEAR A 380x690 FOLD, and it did not: measured y=843, bottom 980.
     The lifted pillar CSS reorders the hero at narrow so the GAUGE paints first (y=165), pushing
     eyebrow, h1, sub and the trust line below it. That is the pillar hubs' design; this page's
     spec puts the gauge BELOW the stacked CTAs, precisely so the trust claim clears the fold.
     Overriding the lifted order is the fix — the one hero requirement stated as measurable. */
  .jcp-hero-copy { order: 1; }
  .jcp-hero-gauge { order: 2; }

  /* At 380 the two halves stack at the seam. The first needs ~345px at 14px against ~250px
     available, so the SIZE comes down until each phrase holds one line: a mid-phrase break in the
     §5 trust claim is worse than smaller type. */
  .wjs-hero-trust { font-size: 11px; padding: 9px 11px; line-height: 1.45; column-gap: 8px; }
  /* ⛔ FOLD BUDGET. The preview has no chrome header; SERVED carries --js-header-h 86px above all
     of this, so a preview that cleared 690 still landed at 739 live. Measuring the preview alone
     was the mistake — these trims are sized against the SERVED stack, not the local one. */
  .jcp-hero { padding: 26px 18px 24px; }
  .jcp-hero h1 { font-size: 23px; line-height: 1.14; margin-bottom: 12px; }
  .jcp-hero-sub { font-size: 13.5px; line-height: 1.6; margin-bottom: 14px; }
  .jcp-eyebrow { margin-bottom: 12px; }
}