@import url('/css/brand-divider.css');
@import url('/css/components.css');
/* ==========================================================================
   style-v2.css — Rebrand component layer
   Extracted from source/rebrand-exploration/assets/style.css (Phase 1).

   LOAD ORDER: after css/tokens.css and css/styles.css — this file adds
   new structural components and does not redefine any token already in
   tokens.css. Deduplication against styles.css is deferred to Phase 2.

   Colour variables used here (--gold, --green, --amber, --bg, --border,
   --text, --grey) are expected to resolve from tokens.css / styles.css
   when both are loaded together with this file.
   ========================================================================== */


/* --------------------------------------------------------------------------
   CHROME PARTIALS
   -------------------------------------------------------------------------- */

/* Ribbon strapline — replaces inline styles in _partials/ribbon.html */
.ribbon {
  background: #0E1A0A;
  border-top: 1px solid #2A2A2A;
  border-bottom: 1px solid #2A2A2A;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-investpuppy);
  font-size: 11px;
  font-weight: 400;
  color: var(--verdigris);
  letter-spacing: 0.02em;
}

/* Footer callout heading — replaces inline style in _partials/footer.html */
.callout__heading {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}


/* --------------------------------------------------------------------------
   STRUCTURAL BACKGROUNDS
   -------------------------------------------------------------------------- */

/* Warmth-zone: radial gradient overlay, default gold, .green variant */
.warmth-zone {
  position: relative;
  padding: 56px 40px;
  margin: 0 auto;
  max-width: 860px;
}
.warmth-zone::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 640px 320px at 12% 15%, rgba(200,169,110,0.10), transparent 65%);
  pointer-events: none;
}
.warmth-zone.green::before {
  background: radial-gradient(ellipse 640px 320px at 12% 15%, rgba(133,209,85,0.16), transparent 65%);
}
.warmth-zone > * {
  position: relative;
  z-index: 1;
}

/* Band: textured repeating-diagonal-stripe section */
.band {
  background: #0D0D0B;
  position: relative;
  padding: 56px 40px;
  margin: 0 auto;
  max-width: 860px;
  background-image: repeating-linear-gradient(
    115deg,
    rgba(133,209,85,0.05) 0px, rgba(133,209,85,0.05) 1px,
    transparent 1px, transparent 90px
  );
}


/* --------------------------------------------------------------------------
   CARDS AND CONTAINERS
   -------------------------------------------------------------------------- */

/* Standard card — gold top-stripe accent
   Rebrand direction confirmed 26 Sep 2026. Overrides styles.css's flat version
   (no stripe, padding:24px) — styles.css dedup deferred to Phase 2. */
.card {
  background: #111109;
  border: 1px solid var(--border);
  padding: 26px 22px;
  border-radius: 6px;
  position: relative;
  min-width: 0;
  overflow-wrap: break-word;
}
.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 22px;
  width: 26px;
  height: 2px;
  background: var(--gold);
}
.card h4 {
  font-size: 15px;
  font-weight: 600;
  margin: 12px 0 8px;
}
.card p {
  font-size: 14px;
  color: var(--grey);
  margin: 0;
}

/* Scope card — amber/green left-border chip */
.scope-card {
  background: #111109;
  border: 1px solid var(--border);
  border-left: 3px solid var(--amber);
  border-radius: 4px;
  padding: 18px 22px;
  margin-bottom: 12px;
}
.scope-card.yes { border-left-color: var(--green); }
.scope-card .tag {
  font-size: 11px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--amber);
  font-weight: 600;
  margin-bottom: 6px;
  display: block;
}
.scope-card.yes .tag { color: var(--green); }
.scope-card h4 {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 6px;
  color: var(--text);
}
.scope-card p {
  font-size: 14px;
  color: var(--grey);
  margin: 0;
}

/* Chapter card — page-to-page reading flow
   Rebrand direction confirmed 26 Sep 2026. Overrides styles.css version:
   padding 24px 26px vs 40px 44px; max-width 860px vs 720px; no transition.
   Child selectors target .eyebrow/.cta-line (non-BEM), not the BEM
   .chapter-card__* classes styles.css already handles — parallel, no conflict. */
.chapter-card {
  display: block;
  background: #111109;
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: 6px;
  padding: 24px 26px;
  text-decoration: none;
  margin: 0 auto;
  max-width: 860px;
}
.chapter-card .eyebrow {
  font-size: 11px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 8px;
  display: block;
}
.chapter-card h4 {
  font-size: 19px;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--text);
}
.chapter-card p {
  font-size: 14px;
  color: var(--grey);
  margin: 0 0 10px;
}
.chapter-card .cta-line {
  font-size: 13px;
  color: var(--gold);
  font-weight: 600;
}

/* Series card — Unvarnished paper listing */
.series-card {
  display: flex;
  gap: 18px;
  background: #111109;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 20px 24px;
  margin-bottom: 14px;
}
.series-card .num {
  font-size: 11px;
  font-weight: 700;
  color: var(--grey);
  white-space: nowrap;
  min-width: 56px;
}
.series-card h4 {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 6px;
}
.series-card p {
  font-size: 13px;
  color: var(--grey);
  margin: 0 0 8px;
}
.series-card a { font-size: 12px; }

/* Story box — evidence/narrative callout */
.story-box {
  background: #0D0D0B;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 22px 26px;
  margin: 24px 0;
}
.story-box .label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: 10px;
  display: block;
}
.story-box p {
  font-size: 15px;
  color: var(--text);
  margin: 0;
}

/* Screenshot frame — annotated platform image */
.shot-frame {
  background: #0D0D0B;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  margin: 24px 0;
  box-shadow: 0 18px 40px -20px rgba(0,0,0,0.6);
}
.shot-frame img {
  display: block;
  width: 100%;
  border-radius: 5px;
}
.shot-caption { padding: 14px 6px 4px; }
.shot-caption .tag {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 4px;
  display: block;
}
.shot-caption h4 {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 6px;
  color: var(--text);
}
.shot-caption p {
  font-size: 14px;
  color: var(--grey);
  margin: 0;
}


/* --------------------------------------------------------------------------
   STATUS AND CLASSIFICATION
   -------------------------------------------------------------------------- */

/* Pinned-tag device — six-state inline status chip */
.status-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 3px;
  margin-left: 8px;
  vertical-align: middle;
}
.status-badge.live         { background: rgba(133,209,85,0.15);  color: var(--green); border: 1px solid var(--green); }
.status-badge.validated    { background: rgba(200,169,110,0.15); color: var(--gold);  border: 1px solid var(--gold); }
.status-badge.demonstrated { background: rgba(200,169,110,0.15); color: var(--gold);  border: 1px solid var(--gold); }
.status-badge.designed     { background: rgba(212,145,91,0.15);  color: var(--amber); border: 1px solid var(--amber); }
.status-badge.roadmap      { background: rgba(154,152,143,0.15); color: var(--grey);  border: 1px solid var(--grey); }
.status-badge.out-of-scope { background: rgba(154,152,143,0.10); color: #6B6A63;      border: 1px solid var(--border); }


/* Capability status grid — three-column live/next/roadmap layout
   Rebrand direction confirmed 26 Sep 2026. Overrides styles.css gap:32px → 20px.
   .status-col adds card background/border/radius — not in styles.css at all.
   .status-col .status-label targets the non-BEM class; styles.css's
   .status-col__label (BEM) remains parallel, no conflict. */
.status-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 24px 0;
}
.status-col {
  background: #111109;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 20px 22px;
}
.status-col .status-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
  display: block;
}
.status-col ul {
  margin: 0;
  padding: 0 0 0 18px;
  font-size: 13px;
  color: var(--grey);
  line-height: 1.7;
}
.status-col li { margin-bottom: 8px; }


/* --------------------------------------------------------------------------
   NAVIGATION AIDS
   -------------------------------------------------------------------------- */

/* Paw divider — between narrative sections */
.paw-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 8px auto;
  max-width: 860px;
  opacity: .85;
}
.paw-divider .line {
  flex: 1;
  max-width: 160px;
  height: 1px;
  background: var(--border);
}

/* Section mark — structured/enumerable pages only */
.section-mark {
  font-family: 'Courier New', monospace;
  font-size: 12px;
  color: var(--gold);
  letter-spacing: .05em;
  margin-bottom: 8px;
  display: block;
  opacity: .85;
}


/* --------------------------------------------------------------------------
   TYPOGRAPHY AND DISPLAY
   -------------------------------------------------------------------------- */

.pull-quote {
  font-size: 18px;
  font-weight: 600;
  color: var(--gold);
  line-height: 1.5;
  margin: 28px 0;
  padding-left: 18px;
  border-left: 2px solid var(--gold);
}
.master-proposition {
  color: var(--gold);
  font-weight: 600;
  font-size: 16px;
  margin-top: 18px;
  max-width: 600px;
}
/* Note: .eyebrow may already exist in styles.css; carried here as-is,
   Phase 2 deduplication applies. */
.eyebrow {
  color: var(--green);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 16px;
  font-weight: 600;
}
.tag-sm {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
}
.note-gold {
  font-size: 12px;
  color: var(--gold);
}


/* --------------------------------------------------------------------------
   ILLUSTRATIONS
   -------------------------------------------------------------------------- */

.illustration-panel {
  text-align: center;
  padding: 8px 20px 32px;
}
.illustration-panel .frame {
  display: inline-block;
  background: #0D0D0B;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  border-top-width: 2px;
}
.illustration-panel.editorial .frame   { border-top-color: var(--green); }
.illustration-panel.explanatory .frame { border-top-color: var(--gold); }
.illustration-panel img {
  max-width: 280px;
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  opacity: 0.9;
}


/* --------------------------------------------------------------------------
   DATA DISPLAYS
   -------------------------------------------------------------------------- */

/* Proof log — timestamped live-track-record rows */
.proof-log {
  background: #0D0D0B;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 20px;
  margin: 20px 0;
}
.proof-row {
  display: flex;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
  align-items: baseline;
  flex-wrap: wrap;
}
.proof-row:last-child { border-bottom: none; }
.proof-row .time {
  font-family: 'Courier New', monospace;
  font-size: 12px;
  color: var(--gold);
  white-space: nowrap;
}
.proof-row .mkt {
  font-family: 'Courier New', monospace;
  font-weight: 700;
  font-size: 14px;
  min-width: 60px;
}
.proof-row .detail {
  flex: 1;
  min-width: 160px;
  font-size: 14px;
  color: #C9C7C0;
}


/* --------------------------------------------------------------------------
   DIAGRAMS
   -------------------------------------------------------------------------- */

/* Steps diagram — workflow role visualisation */
.steps-diagram {
  display: flex;
  gap: 8px;
  margin: 32px 0 12px;
  flex-wrap: wrap;
}
.step-node {
  flex: 1;
  min-width: 78px;
  text-align: center;
}
.step-node .dot {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #1A1810;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.step-node.analyst .dot { background: rgba(200,169,110,0.18); border-color: var(--gold);  color: var(--gold); }
.step-node.pm .dot      { background: rgba(232,232,236,0.12);  border-color: var(--platinum); color: var(--platinum); }
.step-node.ops .dot     { background: rgba(154,152,143,0.18); border-color: var(--grey);  color: var(--grey); }
.step-node .label {
  font-size: 11px;
  color: var(--grey);
  line-height: 1.3;
}
.step-legend {
  display: flex;
  gap: 22px;
  font-size: 12px;
  color: var(--grey);
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.step-legend span { display: inline-flex; align-items: center; gap: 6px; }
.step-legend i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.step-legend .i-analyst { background: var(--gold); }
.step-legend .i-pm      { background: var(--platinum); }
.step-legend .i-ops     { background: var(--grey); }


/* --------------------------------------------------------------------------
   TONE CLASSIFIERS — empty rule bodies, classification markers only
   -------------------------------------------------------------------------- */
.tone-personality   {}
.tone-product       {}
.tone-institutional {}


/* --------------------------------------------------------------------------
   RESPONSIVE OVERRIDES
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  .warmth-zone,
  .band           { padding: 40px 20px; margin: 0; }
  .series-card    { flex-direction: column; gap: 8px; }
  .steps-diagram  { gap: 14px 8px; }
  .step-node      { min-width: 60px; }
  .status-grid    { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   TEXT-VALUED KPI TILES + MOBILE DOC LINKS (28 Sep 2026, panel review)
   Long text values (e.g. "3 markets, 1 session") no longer inherit the 44px
   numeric size; long document links wrap instead of forcing sideways scroll.
   -------------------------------------------------------------------------- */
.metric__value--text { font-size: 28px; line-height: 1.2; }
@media (max-width: 640px) {
  .doc-row__link { white-space: normal; }
}

/* --------------------------------------------------------------------------
   MOBILE CHROME (28 Sep 2026, panel review)
   Slimmer sticky header (same controls, tighter rows). The rail itself no
   longer scrolls (see the journey rail block below). The FAB's empty box
   no longer swallows taps.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .navbar__logo img { height: 40px; }
  .navbar__inner { padding-top: 6px; padding-bottom: 6px; row-gap: 6px; }
  .navbar__inner > div { padding-top: 6px; row-gap: 4px; justify-content: space-between; }
  .navbar__inner > div > a { margin-right: 0 !important; font-size: 11px !important; white-space: nowrap; display: inline-flex; align-items: center; min-height: 24px; }
  .navbar__inner .ip-currency-wrap { margin-left: 0; }
  .navbar__inner .ip-everything-toggle { margin-left: 0; padding: 6px 8px; }
  .navbar__inner .ip-currency-toggle { min-height: 24px; }
  .navbar__step-row { padding-top: 4px; padding-bottom: 4px; gap: 10px; font-size: 11px; }
  .navbar__step-row > span:empty { display: none; }
}
.fab-speed-dial { pointer-events: none; }
.fab-speed-dial .fab-main-toggle { pointer-events: auto; }

/* --------------------------------------------------------------------------
   ACCENT BY SPEAKER (28 Sep 2026, design panel)
   Pages that set <body data-accent="green"> (company voice) use green for
   InvestPuppy's own voice; gold stays for anything commercial or product
   (decision 0105). Scoped by the body attribute, so every other page is
   unaffected. Two !important overrides exist only because "On the Name" and
   the brand-story link are styled inline.
   -------------------------------------------------------------------------- */
body[data-accent="green"] div.page-hero__tag,
body[data-accent="green"] .philosophy-card__label,
body[data-accent="green"] .founder-creds span,
body[data-accent="green"] .mark-col:nth-child(n+2) .mark-col__role,
body[data-accent="green"] .mark-col a,
body[data-accent="green"] .chapter-card--secondary .chapter-card__eyebrow,
body[data-accent="green"] .chapter-card--secondary .chapter-card__cta { color: var(--green); }
body[data-accent="green"] .warmth-zone.green p[style*="color:var(--gold)"] { color: var(--green) !important; }
body[data-accent="green"] a[href*="brand-story"] { color: var(--green) !important; }
body[data-accent="green"] .warmth-zone.green .callout,
body[data-accent="green"] .chapter-card--secondary { border-left-color: var(--green); }
/* Green-tinted card fills inside company-voice zones */
body[data-accent="green"] .warmth-zone.green .philosophy-card,
body[data-accent="green"] .warmth-zone.green .callout { background: #0F170C; }
body[data-accent="green"] .warmth-zone.green div[style*="background:var(--table-bg)"] { background: #0F170C !important; }

/* --------------------------------------------------------------------------
   TYPE RAMP (28 Sep 2026, WEB-129, design panel)
   Override layer over the literal sizes in styles.css and inline styles; the
   real fix is to migrate those onto the tokens.css scale. Steps used:
   12px floor (--text-floor), 13px notes (--text-sm), 14px secondary body
   (--text-base), 15px body from 1024px (--text-body).
   Every selector is prefixed with "body" so it also beats page-level <style> blocks.
   -------------------------------------------------------------------------- */
:root { --text-floor: 0.75rem; --text-body: 0.9375rem; }

/* 1. Floor: no text under 12px, on every viewport */
body #reg-sidebar .reg-sidebar__field label,
body #reg-sidebar .reg-sidebar__privacy,
body #reg-sidebar h4,
body .ask-btn,
body .bilateral-col__label,
body .bw-card__num,
body .bw-coda__num,
body .bw-coda__tag,
body .bw-full-card__label,
body .bw-full-card__num,
body .bw-full-card__share,
body .bw-page-hero__series,
body .bw-provenance__label,
body .bw-section-tag,
body .bw-series-close__label,
body .chapter-card__eyebrow,
body .dm-select-card__badge,
body .doc-share-bar__btn,
body .doc-share-bar__btn--clear,
body .doc-share-bar__privacy,
body .hp-progress-dots a .hp-label,
body .ip-brand-tag,
body .ip-currency-note,
body .ip-everything-toggle,
body .is-block__label,
body .knowledge-date,
body .mark-col__role,
body .not-block__label,
body .page-hero__tag,
body .paper-item__num,
body .pricing-table th,
body .process-step__num,
body .research-card__cat,
body .research-card__label,
body .research-card__num,
body .ribbon,
body .screenshot-caption__step,
body .section-nav__label,
body .share-preview-modal__label,
body .stage-item__gate,
body .stage-item__num,
body .status-col__label,
body .wf-badge,
body .wf-name,
body .wf-role,
body .wyh-hero__eyebrow,
body .wyh-series__num,
body .wyh-story__label,
body h4,
body .ip-currency-toggle { font-size: var(--text-floor); }
[style*="font-size:9px"], [style*="font-size:10px"], [style*="font-size:11px"],
[style*="font-size: 9px"], [style*="font-size: 10px"], [style*="font-size: 11px"] { font-size: var(--text-floor) !important; }
body .process-step__num, body .wyh-series__num { flex-shrink: 0; }
/* Softer tracking on the uppercase labels the floor lifted */
body #reg-sidebar .reg-sidebar__field label,
body #reg-sidebar h4,
body .ask-btn,
body .bilateral-col__label,
body .bw-coda__tag,
body .bw-full-card__label,
body .bw-page-hero__series,
body .bw-provenance__label,
body .bw-section-tag,
body .bw-series-close__label,
body .chapter-card__eyebrow,
body .dm-select-card__badge,
body .ip-brand-tag,
body .is-block__label,
body .mark-col__role,
body .not-block__label,
body .page-hero__tag,
body .paper-item__num,
body .pricing-table th,
body .research-card__cat,
body .research-card__label,
body .section-nav__label,
body .share-preview-modal__label,
body .status-col__label,
body .wf-badge,
body .wf-role,
body .wyh-hero__eyebrow,
body .wyh-series__num,
body .wyh-story__label,
body h4 { letter-spacing: 0.06em; }
/* Keep hierarchy where the floor lifted labels level with their neighbours */
body .wf-name { font-size: var(--text-sm); }
body .research-card__cat { text-transform: none; letter-spacing: 0.02em; padding: 2px 6px; }

/* 2. Notes: sentence-length text at 12px moves to 13px */
body .aum-footnote,
body .footer__copy,
body .hp-cta-band .hp-sub,
body .privacy-note,
body .research-card__desc,
body .trust-tag .disclosure-body p,
body .ip-currency-note,
body .stage-item__gate { font-size: var(--text-sm); }
p[style*="font-size:12px"], li[style*="font-size:12px"], p[style*="font-size: 12px"],
p[style*="font-size:10px"], p[style*="font-size:11px"], p[style*="font-size: 10px"], p[style*="font-size: 11px"],
li[style*="font-size:11px"], li[style*="font-size: 11px"] { font-size: var(--text-sm) !important; }

/* 3. Body: +1px from 1024px up (14 to 15, 13 to 14) */
@media (min-width: 1024px) {
body .bilateral-col li,
body .bw-provenance__text,
body .bw-series-close__sub,
body .dm-select-card__who,
body .founder-creds li,
body .hp-cta-band p,
body .is-block p,
body .mark-col p,
body .not-block p,
body .philosophy-card p,
body .pricing-from__sub,
body .process-step__content p,
body .screenshot-caption__desc,
body .stage-item__body,
body .status-col li { font-size: var(--text-body); }
body .bw-card__desc,
body .bw-coda__card-desc,
body .bw-full-card__desc,
body .chapter-card--secondary .chapter-card__teaser,
body .dm-compare-section .dm-sub,
body .doc-row__desc,
body .example-chip .example-a,
body .hp-fit-card,
body .idx-entry__desc,
body .mid-impl,
body .paper-item__desc,
body .pricing-note-row,
body .wyh-series__desc { font-size: var(--text-base); }
p[style*="font-size:14px"], li[style*="font-size:14px"], p[style*="font-size: 14px"] { font-size: var(--text-body) !important; }
p[style*="font-size:13px"], li[style*="font-size:13px"], p[style*="font-size: 13px"] { font-size: var(--text-base) !important; }
}

/* 4. Measure: about 70 characters per line */
body main p, body main li, body .callout p,
body .screenshot-caption__desc, body .stage-item__body, body .tsf-callout__body { max-width: 66ch; }
body :is([style*="text-align:center"], [style*="text-align: center"], .hp-cta-band) :is(p, li),
body p:is([style*="text-align:center"], [style*="text-align: center"]) { margin-left: auto !important; margin-right: auto !important; }
/* Three rows that would otherwise let a button jump to the far right beside a capped paragraph */
body .pricing-mode-bar > :first-child,
body .pricing-from > :first-child,
body div[style*="justify-content:space-between"][style*="flex-wrap:wrap"] > div:first-child:has(> h4) { flex: 1 1 100%; }

/* 5. Header controls and Ask button at the 12px floor, without wrapping the header */
@media (max-width: 640px) {
  body .navbar__inner > div > a { font-size: var(--text-floor) !important; }
  body .navbar__inner .ip-everything-toggle { padding: 6px 4px; letter-spacing: 0; }
  body .navbar__inner .ip-currency-toggle { padding: 4px 4px; letter-spacing: 0; }
}
body .ask-btn { padding-left: 16px; padding-right: 16px; }

/* --------------------------------------------------------------------------
   BELOW 480px (13 Oct 2026, decisions 0177 and 0180)
   0177: the header keeps the logo, "Show us a mandate" and "Everything";
   Jurisdictions and the currency selector move into the Everything panel.
   0180: the scrolling rail and the sticky step row give way to a compact
   journey component (current step, previous, next, full-site escape).
   From 480px up nothing here applies.
   -------------------------------------------------------------------------- */
.journey-mobile,
.everything-panel__mobile-only { display: none; }

/* Journey pages carry one navigation model (decision 0181): the six-step rail with an explicit
   full-site escape. On-page section strips are not shown beside it at any width. */
body:has(.journey-rail) .plat-nav-desktop,
body:has(.journey-rail) .plat-nav-mobile { display: none !important; }
.journey-rail__browse {
  margin-left: auto; flex-shrink: 0; align-self: center;
  background: none; border: 0; padding: 6px 0 6px 16px; cursor: pointer;
  font: inherit; font-size: 13px; color: var(--grey);
  text-decoration: underline; text-underline-offset: 3px; white-space: nowrap;
}
.journey-rail__browse:hover, .journey-rail__browse:focus-visible { color: var(--text); }
/* Journey rail (panel review, 14 Oct 2026). Compact mode from 480px: all six numbers, the current step's label,
   and a second line with "Step N of 6 · Next: …" and Browse everything. Full mode only where every label and
   Browse fit on one line: 1100px, and 1240px on Home (its "Explore Vektor" label needs more room). Never scrolls or wraps.
   Touch targets: the visible controls keep their size; an invisible ::before adds a hit area of about 44px. */
.journey-rail { overflow-x: visible; }
.journey-rail::after { content: none; }
.journey-rail__inner { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; row-gap: 14px; overflow: visible; scroll-snap-type: none; padding-top: 6px; padding-bottom: 6px; padding-right: var(--site-pad); }
.journey-rail__eyebrow { grid-column: 1; grid-row: 1; }
.journey-rail__nav { grid-column: 1 / -1; grid-row: 1; min-width: 0; }
.journey-rail--entry .journey-rail__nav { grid-column: 2 / -1; }
.journey-rail__list { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; white-space: nowrap; }
.journey-rail__item { display: flex; align-items: center; }
.journey-rail__item + .journey-rail__item::before { content: "\203A"; margin: 0 1px; font-size: 14px; line-height: 1; color: var(--grey); opacity: .45; }
.journey-rail__step { position: relative; padding: 6px 8px; }
.journey-rail__step::before { content: ""; position: absolute; inset: -6px -3px -10px; }
.journey-rail__step--visited { color: var(--platinum); }
.journey-rail__step--visited .journey-rail__step__num { border-color: var(--platinum); color: var(--platinum); background: rgba(232,232,236,0.12); }
.journey-rail .journey-rail__step:not(.journey-rail__step--active) .journey-rail__step__label { display: none !important; }
.journey-rail__summary { display: block; grid-column: 1 / 3; grid-row: 2; margin: 0; padding: 0; max-width: none; text-align: left; font-size: 12px; font-weight: 600; color: var(--grey); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.journey-rail__browse { grid-column: 3; grid-row: 2; position: relative; margin-left: 0; padding: 6px 0 6px 16px; }
.journey-rail__browse::before { content: ""; position: absolute; inset: -4px -4px -9px; }
.journey-rail__step:focus-visible, .journey-rail__browse:focus-visible, .journey-rail__start:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.journey-rail__start { position: relative; color: var(--gold); text-decoration: none; }
.journey-rail__start:hover { text-decoration: underline; text-underline-offset: 3px; }
.journey-rail__start::before { content: ""; position: absolute; inset: -4px -4px -27px; }
.journey-rail--entry .journey-rail__summary { overflow: visible; }
@media (min-width: 1100px) {
  .journey-rail:not(.journey-rail--entry) .journey-rail__inner { display: flex; padding-top: 10px; padding-bottom: 10px; }
  .journey-rail:not(.journey-rail--entry) .journey-rail__nav { min-width: auto; }
  .journey-rail:not(.journey-rail--entry) .journey-rail__step:not(.journey-rail__step--active) .journey-rail__step__label { display: inline !important; }
  .journey-rail:not(.journey-rail--entry) .journey-rail__summary { display: none; }
  .journey-rail:not(.journey-rail--entry) .journey-rail__step { padding: 6px 10px; }
  .journey-rail:not(.journey-rail--entry) .journey-rail__item + .journey-rail__item::before { margin: 0 4px; }
  .journey-rail:not(.journey-rail--entry) .journey-rail__browse { margin-left: auto; }
}
@media (min-width: 1240px) {
  .journey-rail--entry .journey-rail__inner { display: flex; padding-top: 10px; padding-bottom: 10px; }
  .journey-rail--entry .journey-rail__nav { min-width: auto; }
  .journey-rail--entry .journey-rail__step:not(.journey-rail__step--active) .journey-rail__step__label { display: inline !important; }
  .journey-rail--entry .journey-rail__summary { display: none; }
  .journey-rail--entry .journey-rail__step { padding: 6px 10px; }
  .journey-rail--entry .journey-rail__item + .journey-rail__item::before { margin: 0 4px; }
  .journey-rail--entry .journey-rail__browse { margin-left: auto; }
}
@media (max-width: 479.98px) {
  body .navbar__inner .navbar__jurisdiction-link,
  body .navbar__inner .ip-currency-wrap { display: none !important; }
  body .navbar__step-row,
  body .navbar__step-row--visible { display: none !important; }
  body .journey-rail { display: none !important; }
  body:has(.journey-mobile) .scroll-rail { display: none !important; }
  /* Decision 0180: section-strip navigation is not shown at the same time as journey navigation. */
  body:has(.journey-mobile) .plat-nav-mobile,
  body:has(.journey-mobile) .pp-nav-mobile,
  body:has(.journey-mobile) .section-nav { display: none !important; }

  body .journey-mobile { display: block; padding: 12px var(--site-pad, 20px); border-bottom: 1px solid var(--border); background: var(--bg); }
  .journey-mobile__step { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); }
  .journey-mobile__links { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
  .journey-mobile__links a { position: relative; display: inline-flex; align-items: center; min-height: 32px; font-size: 14px; color: var(--text); text-decoration: none; }
  .journey-mobile__links a::after, .journey-mobile__browse::after, .journey-mobile__begin::after { content: ""; position: absolute; inset: -6px -4px; }
  .journey-mobile__next { margin-left: auto; color: var(--gold) !important; font-weight: 600; }
  .journey-mobile a:focus-visible, .journey-mobile__browse:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
  .journey-mobile__browse { position: relative; display: inline-flex; align-items: center; min-height: 32px; margin-top: 12px; padding: 0; background: none; border: 0; font: inherit; font-size: 13px; color: var(--text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

  body .everything-panel__mobile-only { display: flex; }
  .everything-panel__currency { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
  .everything-panel__currency .ip-currency-option { display: inline-flex; align-items: center; justify-content: center; width: auto; min-width: 52px; min-height: 32px; padding: 4px 10px; background: none; border: 1px solid var(--border); border-radius: 4px; font: inherit; font-size: 13px; color: var(--text); cursor: pointer; }
  .everything-panel__currency .ip-currency-option.active { border-color: var(--gold); color: var(--gold); }
}

/* --------------------------------------------------------------------------
   HOME ENTRY STATE AND LEVEL 1 HERO (14 Oct 2026, decision 0182)
   Home carries the six-step rail with no step current; below 480px a pre-entry
   component replaces it. The hero is the first Level 1 field, so its width and
   padding are restored over the warmth-zone defaults.
   -------------------------------------------------------------------------- */
.journey-rail__eyebrow { flex-shrink: 0; align-self: center; padding-right: 16px; font-size: var(--text-floor); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey); white-space: nowrap; }
.journey-mobile__title { margin: 0 0 2px; font-size: var(--text-lg); font-weight: 600; color: var(--text); }
.journey-mobile--entry .journey-mobile__desc { margin: 0 0 10px; font-size: var(--text-base); color: var(--grey); }
.journey-mobile__begin { position: relative; display: flex; width: fit-content; align-items: center; min-height: 32px; font-size: var(--text-base); font-weight: 600; color: var(--gold); text-decoration: none; }
.hero__content.warmth-zone { max-width: 900px; margin: 0 auto; padding: 0 var(--site-pad); }
/* Level 1 fields on Home fade out inside their own box, so no edge shows (decision 0182). The glow layer is capped at 620px so tall zones keep it near the top. */
body:has(.journey-rail--entry) .warmth-zone::before{inset:0 0 auto 0;height:min(100%,620px);background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(200,169,110,0.15),transparent 100%);}
body:has(.journey-rail--entry) .warmth-zone.green::before{background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(133,209,85,0.21),transparent 100%);}
/* Home primary descriptive copy sits between --grey and --text, from existing tokens (brief section 5); metadata and tertiary controls keep --grey. */
body:has(.journey-rail--entry) .hero__sub{color:color-mix(in srgb,var(--text) 50%,var(--grey));}