/* ===========================================================================
   JP2BA — base
   Tokens transcribed from the design system's authored token files, and the
   component classes transcribed from the component sources. Values come from
   those sources; nothing here is invented.
   Appendix H governs: charcoal ~65-70%, light neutral ~20-25%, copper <=10%.
   =========================================================================== */

/* --- Brand palette (Appendix H, section 10) ------------------------------ */
:root {
  --jp2ba-charcoal: #121212;
  --jp2ba-graphite: #222222;
  --jp2ba-copper: #A05726;
  --jp2ba-copper-dark: #703F29;
  --jp2ba-soft-white: #E9E9E8;
  --jp2ba-white: #FFFFFF;
  --jp2ba-gray: #9F9F9E;
  --jp2ba-dark-gray: #595958;

  --neutral-000: #FFFFFF; --neutral-050: #F4F4F3; --neutral-100: #E9E9E8;
  --neutral-200: #CFCFCE; --neutral-300: #9F9F9E; --neutral-400: #7A7A79;
  --neutral-500: #595958; --neutral-600: #3A3A39; --neutral-700: #2C2C2B;
  --neutral-800: #222222; --neutral-900: #181818; --neutral-950: #121212;

  --copper-100: #E8CBB4; --copper-300: #C98A55; --copper-500: #A05726;
  --copper-700: #703F29; --copper-900: #3A2216;

  --surface-page: var(--jp2ba-charcoal);
  --surface-raised: var(--jp2ba-graphite);
  --surface-card: var(--jp2ba-graphite);
  --surface-inset: #191919;
  --surface-light: var(--jp2ba-white);
  --surface-light-alt: var(--neutral-050);
  --surface-accent: var(--jp2ba-copper);
  --surface-overlay: rgba(18, 18, 18, .86);

  --text-heading: var(--jp2ba-white);
  --text-body: var(--jp2ba-soft-white);
  --text-muted: var(--jp2ba-gray);
  --text-accent: var(--jp2ba-copper);
  --text-on-accent: var(--jp2ba-white);
  --text-on-light: var(--jp2ba-charcoal);
  --text-on-light-muted: var(--neutral-500);

  --border-subtle: #2E2E2D;
  --border-default: var(--jp2ba-dark-gray);
  --border-strong: var(--neutral-300);
  --border-accent: var(--jp2ba-copper);
  --rule-copper: var(--jp2ba-copper);

  --action-primary: var(--jp2ba-copper);
  --action-primary-hover: var(--jp2ba-copper-dark);
  --action-primary-press: #5C3421;
  --action-secondary-border: var(--jp2ba-copper);
  --focus-ring: var(--copper-300);

  --status-success: #4E7A3F; --status-warning: #C98A55;
  --status-danger: #8E3B24;  --status-info: var(--neutral-300);
}

/* --- Type (Appendix H, section 13) --------------------------------------- */
:root {
  --font-display: "Anton", "Arial Narrow", Impact, sans-serif;
  --font-condensed: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "Barlow", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --text-3xs: 11px; --text-2xs: 12px; --text-xs: 13px; --text-sm: 15px;
  --text-md: 17px; --text-lg: 19px; --text-xl: 22px; --text-2xl: 28px;
  --text-3xl: 36px; --text-4xl: 48px; --text-5xl: 64px; --text-6xl: 84px;
  --text-7xl: 112px;

  --weight-regular: 400; --weight-medium: 500;
  --weight-semibold: 600; --weight-bold: 700;

  --leading-tight: 0.92; --leading-snug: 1.08; --leading-heading: 1.15;
  --leading-body: 1.6; --leading-loose: 1.75;

  --tracking-display: -0.01em; --tracking-heading: 0.01em;
  --tracking-label: 0.14em; --tracking-eyebrow: 0.22em; --tracking-body: 0;

  --type-hero: italic var(--weight-regular) var(--text-7xl)/var(--leading-tight) var(--font-display);
  --type-display: var(--weight-regular) var(--text-5xl)/var(--leading-tight) var(--font-display);
  --type-h1: var(--weight-bold) var(--text-4xl)/var(--leading-heading) var(--font-condensed);
  --type-h2: var(--weight-bold) var(--text-3xl)/var(--leading-heading) var(--font-condensed);
  --type-h3: var(--weight-semibold) var(--text-xl)/var(--leading-snug) var(--font-condensed);
  --type-eyebrow: var(--weight-bold) var(--text-2xs)/1.2 var(--font-condensed);
  --type-label: var(--weight-semibold) var(--text-xs)/1.2 var(--font-condensed);
  --type-body: var(--weight-regular) var(--text-md)/var(--leading-body) var(--font-body);
  --type-body-sm: var(--weight-regular) var(--text-sm)/var(--leading-body) var(--font-body);
  --type-button: var(--weight-bold) var(--text-sm)/1 var(--font-condensed);
  --type-stat: var(--weight-bold) var(--text-4xl)/1 var(--font-condensed);
}

/* --- Spacing, radii, rules ----------------------------------------------- */
:root {
  --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px;
  --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px;
  --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px;
  --space-24: 96px; --space-32: 128px;

  --section-y: 96px; --section-y-tight: 64px;
  --container-max: 1200px; --container-narrow: 760px; --gutter: 24px;

  --radius-none: 0; --radius-xs: 2px; --radius-sm: 4px; --radius-md: 6px;
  --radius-lg: 10px; --radius-pill: 999px;

  --border-width: 1px; --border-width-thick: 2px; --rule-height: 2px;
}

/* --- Elevation ------------------------------------------------------------ */
:root {
  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .45);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, .45);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, .55);
  --shadow-copper: 0 6px 20px rgba(160, 87, 38, .32);
  --shadow-print: 0 1px 3px rgba(18, 18, 18, .18);
  --overlay-scrim: linear-gradient(180deg, rgba(18,18,18,0) 0%, rgba(18,18,18,.55) 55%, rgba(18,18,18,.95) 100%);
  --overlay-copper: linear-gradient(180deg, rgba(160,87,38,.18) 0%, rgba(18,18,18,.85) 100%);
  --grain: radial-gradient(circle at 30% 20%, rgba(255,255,255,.035), transparent 60%);
}

/* --- Motion (restrained by brand standard) -------------------------------- */
:root {
  --duration-fast: 120ms; --duration-base: 180ms; --duration-slow: 320ms;
  --ease-standard: cubic-bezier(.2, .6, .2, 1);
  --ease-out: cubic-bezier(0, .6, .3, 1);
  --ease-in: cubic-bezier(.5, 0, 1, .5);
  --transition-interactive:
    background-color var(--duration-base) var(--ease-standard),
    color var(--duration-base) var(--ease-standard),
    border-color var(--duration-base) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

/* The shipped page raises the four smallest steps to a 15px floor. This is a
   deliberate legibility decision from the built site's helmet, not the design
   system default — it makes labels, eyebrows and fine print readable on a dark
   ground. Removing it shrinks every label on the page. */
:root {
  --text-3xs: 15px; --text-2xs: 15px; --text-xs: 15px; --text-sm: 15px;
}

/* --- Reset and page ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* No font declaration here, deliberately. The design sets `font:` on every text
   element, and the approved page leaves body at the browser default. Declaring
   a body font changes the inherited strut and shifts inline line boxes — it
   cost 4px per membership card before this was removed. */
body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  overflow-x: clip;
}

img { max-width: 100%; }

a { color: var(--copper-300); }
a:hover { color: var(--copper-100); }

:focus-visible { outline: 2px solid var(--copper-300); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

@media print {
  @page { margin: 0.5cm; }
  figure, table { break-inside: avoid; }
}

/* --- Layout helpers ------------------------------------------------------- */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding: var(--section-y) var(--gutter); }
.section-tight { padding: var(--section-y-tight) var(--gutter); }
.section-raised { background: var(--surface-raised); }
.section-bordered { border-bottom: 1px solid var(--border-subtle); }

/* Named .jp-skip in the approved template's markup; keep the name so the
   theme's header.php can reuse that markup verbatim. */
.jp-skip { position: absolute; left: -9999px; top: 0; }
.jp-skip:focus {
  left: var(--gutter); top: 8px; z-index: 40;
  background: var(--action-primary); color: var(--jp2ba-white);
  padding: 10px 16px; border-radius: var(--radius-sm);
  font: var(--type-label); text-transform: uppercase;
  letter-spacing: var(--tracking-label); text-decoration: none;
}

/* --- Button (components/core/Button.jsx) ---------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  font: var(--type-button);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  border: var(--border-width-thick) solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: var(--transition-interactive);
}
.btn-sm { padding: 9px 16px; font-size: var(--text-2xs); }
.btn-md { padding: 14px 26px; font-size: var(--text-sm); }
.btn-lg { padding: 18px 36px; font-size: var(--text-md); }
.btn-block { width: 100%; }

.btn-primary {
  background: var(--action-primary); color: var(--text-on-accent);
  border-color: var(--action-primary);
}
.btn-primary:hover {
  background: var(--action-primary-hover); border-color: var(--action-primary-hover);
  color: var(--text-on-accent);
}

.btn-secondary {
  background: transparent; color: var(--text-heading);
  border-color: var(--action-secondary-border);
}
.btn-secondary:hover {
  background: var(--action-primary); border-color: var(--action-primary);
  color: var(--text-on-accent);
}

.btn-ghost {
  background: transparent; color: var(--text-accent);
  border-color: transparent; padding: 8px 4px;
}
.btn-ghost:hover { color: var(--copper-300); }

.btn-onlight {
  background: var(--action-primary); color: var(--jp2ba-white);
  border-color: var(--action-primary);
}
.btn-onlight:hover {
  background: var(--action-primary-hover); border-color: var(--action-primary-hover);
}

.btn:active:not([disabled]) { transform: translateY(1px); }
.btn[disabled], .btn.is-disabled { opacity: 0.45; cursor: not-allowed; }

/* --- Badge (components/core/Badge.jsx) ------------------------------------ */
.badge {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font: var(--type-label); text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  padding: 7px 12px; border-radius: var(--radius-sm);
}
.badge-credential { background: transparent; color: var(--text-body); border: 1px solid var(--border-default); }
.badge-copper { background: var(--action-primary); color: var(--text-on-accent); border: 1px solid var(--action-primary); }
.badge-outline { background: transparent; color: var(--text-accent); border: 1px solid var(--border-accent); }
.badge-solid { background: var(--surface-inset); color: var(--text-body); border: 1px solid var(--border-subtle); }

/* --- Card (components/core/Card.jsx) -------------------------------------- */
.card {
  border-radius: var(--radius-md); padding: var(--space-8);
  position: relative; overflow: hidden; box-shadow: var(--shadow-none);
}
.card-graphite { background: var(--surface-card); color: var(--text-body); border: 1px solid var(--border-subtle); }
.card-inset { background: var(--surface-inset); color: var(--text-body); border: 1px solid var(--border-subtle); }
.card-light { background: var(--surface-light); color: var(--text-on-light); border: 1px solid var(--neutral-200); }
.card-accent { background: var(--surface-accent); color: var(--text-on-accent); border: 1px solid var(--action-primary); }
.card-elevated { box-shadow: var(--shadow-md); }

/* The signature copper rule, flush to the top edge of a featured card. */
.card-toprule::before {
  content: ""; position: absolute; inset-inline: 0; top: 0;
  height: var(--rule-height); background: var(--rule-copper);
}

/* --- SectionHeading (components/core/SectionHeading.jsx) ------------------- */
.section-heading { text-align: left; }
.section-heading-center {
  text-align: center; max-width: var(--container-narrow); margin-inline: auto;
}
.section-eyebrow {
  font: var(--type-eyebrow); letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: var(--text-accent);
  margin-bottom: var(--space-3);
}
.section-title {
  font: var(--type-h1); text-transform: uppercase;
  letter-spacing: var(--tracking-heading); color: var(--text-heading); margin: 0;
}
.section-title-onlight { color: var(--text-on-light); }
.section-rule {
  width: 64px; height: var(--rule-height); background: var(--rule-copper);
  margin-top: var(--space-4);
}
.section-heading-center .section-rule { margin-inline: auto; }
.section-intro {
  font: var(--type-body); color: var(--text-body);
  margin: var(--space-4) 0 0; max-width: 680px; text-wrap: pretty;
}
.section-heading-center .section-intro { margin-inline: auto; }
.section-intro-onlight { color: var(--text-on-light-muted); }

/* --- Rule (components/core/Rule.jsx) -------------------------------------- */
.rule { display: block; width: 100%; height: var(--rule-height); background: var(--rule-copper); }
.rule-subtle { background: var(--border-subtle); }
.rule-default { background: var(--border-default); }

/* --- Logo (components/core/Logo.jsx) -------------------------------------- */
/* Supplied artwork. Never redraw, recolor, stretch or reconstruct it. */
.logo { display: inline-flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; }
.logo img { width: auto; display: block; }
.logo-slogan {
  font: var(--type-label); text-transform: uppercase;
  letter-spacing: var(--tracking-label); color: var(--text-muted);
}

/* --- Form fields (components/forms/*.jsx) --------------------------------- */
/* Class contract shared with the MOJO base theme so the form-plugin bridge
   ports across projects: .form-field / .field-label / .field-input. */
.form-field { display: flex; flex-direction: column; gap: var(--space-2); }
.field-label {
  font: var(--type-label); text-transform: uppercase;
  letter-spacing: var(--tracking-label); color: var(--text-muted);
}
.field-required { color: var(--text-accent); }

.field-input, .field-select {
  font: var(--type-body-sm); color: var(--text-heading);
  background: var(--surface-inset);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: 12px 14px; outline: none;
  transition: var(--transition-interactive);
}
.field-input:focus, .field-select:focus { border-color: var(--border-accent); }

.field-select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--jp2ba-copper) 50%),
    linear-gradient(135deg, var(--jp2ba-copper) 50%, transparent 50%);
  background-position: calc(100% - 18px) 21px, calc(100% - 12px) 21px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.field-hint { font: var(--type-body-sm); font-size: var(--text-2xs); color: var(--text-muted); }

/* Light (document / on-white) variants. */
.form-field-onlight .field-label { color: var(--text-on-light-muted); }
.form-field-onlight .field-input,
.form-field-onlight .field-select {
  color: var(--text-on-light); background: var(--surface-light);
  border-color: var(--neutral-200);
}

/* --- StatBlock (components/brand/StatBlock.jsx) --------------------------- */
.stat { text-align: left; }
.stat-center { text-align: center; }
.stat-value {
  font: var(--type-stat); text-transform: uppercase;
  color: var(--text-accent); letter-spacing: var(--tracking-heading);
}
.stat-label {
  font: var(--type-label); text-transform: uppercase;
  letter-spacing: var(--tracking-label); color: var(--text-heading);
  margin-top: var(--space-2);
}
.stat-detail {
  font: var(--type-body-sm); font-size: var(--text-2xs);
  color: var(--text-muted); margin-top: var(--space-1);
}

/* --- PricingCard (components/brand/PricingCard.jsx) ----------------------- */
.pricing-card {
  display: flex; flex-direction: column; gap: var(--space-4);
  background: var(--surface-card); border-radius: var(--radius-md);
  padding: var(--space-8); border: 1px solid var(--border-subtle);
  position: relative; overflow: hidden;
}
.pricing-card-featured { border-color: var(--border-accent); }
.pricing-card-featured::before {
  content: ""; position: absolute; inset-inline: 0; top: 0;
  height: var(--rule-height); background: var(--rule-copper);
}
.pricing-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
}
.pricing-name {
  font: var(--type-h3); text-transform: uppercase;
  letter-spacing: var(--tracking-heading); color: var(--text-heading); margin: 0;
}
.pricing-price { font: var(--type-stat); font-size: var(--text-3xl); color: var(--text-heading); }
.pricing-freq { font: var(--type-body-sm); color: var(--text-muted); margin-left: var(--space-2); }
.pricing-desc {
  font: var(--type-body-sm); color: var(--text-body);
  margin: 0; flex: 1; text-wrap: pretty;
}

/* --- Testimonial (components/brand/Testimonial.jsx) ----------------------- */
/* Authentic, permissioned and attributed only — placeholders are prohibited. */
.testimonial {
  margin: 0; padding: var(--space-8); background: var(--surface-card);
  border-left: 2px solid var(--rule-copper);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.testimonial-quote {
  margin: 0; font: var(--type-body); font-size: var(--text-lg);
  color: var(--text-heading); text-wrap: pretty;
}
.testimonial-caption {
  margin-top: var(--space-5); font: var(--type-label);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  color: var(--text-accent);
}
.testimonial-meta { display: block; color: var(--text-muted); margin-top: var(--space-1); }

.testimonial-onlight { background: var(--surface-light); }
.testimonial-onlight .testimonial-quote { color: var(--text-on-light); }
.testimonial-onlight .testimonial-meta { color: var(--text-on-light-muted); }

/* --- RGRChain (components/brand/RGRChain.jsx) ----------------------------- */
/* The seven indicators appear in one order that must never change:
   Decide -> Create -> Protect -> Connect -> Move -> Adapt -> Finish. */
.rgr-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-3);
}
.rgr-card {
  display: flex; gap: var(--space-3); padding: 12px;
  border-radius: var(--radius-sm); border: 1px solid var(--border-subtle);
  background: var(--surface-inset);
}
.rgr-card:last-child { grid-column: 1 / -1; }
.rgr-card-name {
  font: var(--type-label); text-transform: uppercase;
  letter-spacing: var(--tracking-label); color: var(--text-heading);
}
.rgr-card-desc { font: var(--type-body-sm); color: var(--text-body); margin: var(--space-2) 0 0; }

.rgr-cards-onlight .rgr-card { background: var(--surface-light); border-color: var(--neutral-200); }
.rgr-cards-onlight .rgr-card-name { color: var(--text-on-light); }
.rgr-cards-onlight .rgr-card-desc { color: var(--text-on-light-muted); }

.rgr-icon { flex: none; margin-top: 2px; }

.rgr-chain { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--space-2); }
.rgr-chip {
  padding: 12px 18px; border-radius: var(--radius-sm);
  background: var(--surface-inset); border: 1px solid var(--border-subtle);
  color: var(--text-body); transition: var(--transition-interactive);
  cursor: default;
}
.rgr-chip-sm { padding: 8px 12px; }
.rgr-chip-active {
  background: var(--action-primary); border-color: var(--action-primary);
  color: var(--text-on-accent);
}
.rgr-chip-name {
  font: var(--type-label); font-size: var(--text-sm);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
}
.rgr-chip-sm .rgr-chip-name { font-size: var(--text-2xs); }
/* The arrow between indicators is part of the brand language, in copper. */
.rgr-arrow { align-self: center; color: var(--text-accent); font: var(--type-label); }

/* --- FaqAccordion (components/brand/FaqAccordion.jsx) --------------------- */
.faq { border-top: 1px solid var(--border-subtle); }
.faq-item { border-bottom: 1px solid var(--border-subtle); }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); background: transparent; border: 0; cursor: pointer;
  padding: var(--space-5) 0; text-align: left;
  font: var(--type-h3); font-size: var(--text-lg); color: var(--text-heading);
  text-transform: uppercase; letter-spacing: var(--tracking-heading);
  transition: var(--transition-interactive);
}
.faq-item.is-open .faq-q { color: var(--text-accent); }
.faq-toggle {
  color: var(--text-accent); font: var(--type-h3);
  transition: transform var(--duration-base) var(--ease-standard);
}
.faq-item.is-open .faq-toggle { transform: rotate(45deg); }
.faq-a {
  font: var(--type-body); color: var(--text-body);
  margin: 0 0 var(--space-6); max-width: 760px; text-wrap: pretty;
}

/* Closed rows keep their answer in the DOM — the approved page rendered only
   the open one, which is a side effect of its client-side accordion. Keeping
   all of them indexable and readable without JavaScript costs nothing
   visually, since a closed answer is display:none. */
.faq-item:not(.is-open) .faq-a { display: none; }

/* --- Site chrome -----------------------------------------------------------
   Header, footer and the page wrapper live in header.php and footer.php, so
   they render on every template — a 404, a post, anything. They belong here
   and not in page-home.css, which is only enqueued on the front page.
   -------------------------------------------------------------------------- */
.nav-link { font:var(--type-label); text-transform:uppercase; letter-spacing:var(--tracking-label); text-decoration:none; color:var(--text-body); }
.page-1 { background:#121212; min-height:100vh; overflow-x:clip; --text-accent:#C98A55; --text-3xs:15px; --text-2xs:15px; --text-xs:15px; --text-sm:15px; }
.page-2 { position:sticky; top:0; z-index:20; background:rgba(18,18,18,.94); backdrop-filter:blur(8px); border-bottom:1px solid var(--border-subtle); }
.page-3 { max-width:var(--container-max); margin:0 auto; padding:14px var(--gutter); display:flex; align-items:center; justify-content:space-between; gap:var(--space-6); }
.page-4 { display:flex; flex:none; }
.page-5 { height:clamp(56px, 13vw, 176px); }
.page-6 { display:flex; gap:var(--space-6); flex-wrap:wrap; align-items:center; justify-content:flex-end; }
.page-7 { display:block; outline:none; }
.final-6 { background:#121212; border-top:1px solid var(--border-subtle); padding:var(--space-16) var(--gutter) var(--space-10); }
.final-7 { max-width:var(--container-max); margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--space-12); }
.final-8 { min-width:0; }
.final-9 { height:120px; }
.final-10 { font: var(--type-label); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--surface-light); margin-top: var(--space-4); max-width: 100%; }
.final-11 { font:var(--type-body-sm); color:var(--text-muted); max-width:380px; }
.final-12 { display: grid; gap: var(--space-2); align-content: start; min-width: 0; }
.final-13 { font:var(--type-body-sm); color:var(--text-muted); text-decoration:none; display:inline-flex; align-items:center; gap:6px; }
.final-14 { display:grid; gap:var(--space-2); align-content:start; min-width:0; }
.final-15 { max-width: var(--container-max); margin: 0 auto; font: var(--type-body-sm); font-size: var(--text-2xs); color: var(--text-muted); margin-top: 15px; margin-bottom: 15px; }
.footer-link { font:var(--type-body-sm); color:var(--text-muted); text-decoration:none; }
.label-heading { font:var(--type-label); text-transform:uppercase; letter-spacing:var(--tracking-label); color:var(--text-heading); margin:0 0 var(--space-2); }
.nav-link:hover { color:var(--text-accent); }

/* --- Compact header (below 940px) ------------------------------------------
   The approved page switched between a full nav row and a call-plus-toggle
   row by measuring window.innerWidth in JavaScript, at 940. Here both are in
   the markup and a media query at the same breakpoint picks one, so the layout
   is right before any script runs. Only the toggle needs JavaScript.
   Values below are the template's own.
   -------------------------------------------------------------------------- */
.jp-compact-actions { display: none; align-items: center; gap: var(--space-3); flex: none; }
.jp-compact-nav { display: none; }

.jp-menu-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; flex: none;
  background: transparent;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-heading);
  cursor: pointer;
  transition: var(--transition-interactive);
}
.jp-menu-toggle:hover { border-color: var(--border-accent); color: var(--text-accent); }

@media (max-width: 939px) {
  .page-6,
  .jp-cta-wide { display: none; }

  .jp-compact-actions { display: flex; }
  .jp-cta-compact { padding: 14px 18px; }

  .jp-compact-nav {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-6) var(--gutter) var(--space-8);
    border-top: 1px solid var(--border-subtle);
  }
  /* [hidden] must win over the grid above. */
  .jp-compact-nav[hidden] { display: none; }

  .jp-compact-nav .nav-link { padding: 10px 0; }
}