:root{
  /* =========================================
     CORE PALETTE (SURFACES MUST STAY DARK)
     ========================================= */
  --ink:     #0F0E0D;  /* near-black */
  --frame:   #2B2F34;  /* charcoal surface */
  --frame-2: #1E1C19;  /* deep charcoal surface */
  --frame-3: #141311;  /* near-black charcoal surface */

  /* =========================================
     GOLD SYSTEM (ACCENTS ONLY — NEVER SURFACES)
     ========================================= */
  --gold:    #C8A12B;  /* brand gold */
  --gold-2:  #A88433;  /* deeper gold */
  --accent:  #8A651F;  /* CTA bronze */

  /* Gold-tinted borders (safe: borders only) */
  --frame-border:        rgba(200,161,43,.28);
  --frame-border-strong: rgba(200,161,43,.55);

  /* =========================================
     LIGHT SURFACES
     ========================================= */
  --sheet:   #FFFEFC;
  --surface: #FFFFFF;

  /* =========================================
     TEXT
     ========================================= */
  --text:  #11100F;
  --muted: #4B4944;

  /* =========================================
     LINES / BORDERS (NEUTRAL — NOT GOLD)
     ========================================= */
  --border:   rgba(20,19,18,.16);
  --hairline: rgba(20,19,18,.10);
  --line:     rgba(20,19,18,.14);
  --line-2:   rgba(20,19,18,.10);

  /* Block outlines */
  --blk-outline:       rgba(0,0,0,.55);
  --blk-outline-soft:  rgba(0,0,0,.32);
  --blk-edge:          var(--blk-outline);
  --blk-edge-soft:     var(--blk-outline-soft);

  /* Effects */
  --fog:    rgba(255,247,236,.52);

  /* Grid + dust overlays */
  --grid-1: rgba(255,252,248,.045);
  --grid-2: rgba(255,252,248,.028);

  --dust-1: rgba(200,161,43,.60);
  --dust-2: rgba(200,161,43,.40);
  --dust-3: rgba(200,161,43,.26);

  /* Font */
  --font-sans: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  /* Radii / spacing */
  --r-xl: 22px;
  --r-lg: 16px;
  --r-md: 12px;

  --pad-xl: 30px;
  --pad-lg: 22px;
  --pad-md: 16px;

  --max: 1040px;
  --edge: 14px;
  --gap: 14px;

  --rail-w: 170px;
  --topbar-h: 72px;
  --stack-gap: 18px;

  /* Motion */
  --t-fast: .14s ease;
  --t-med:  .18s ease;

  /* Shadows */
  --shadow-soft: 0 12px 30px rgba(0,0,0,.10);
  --shadow-deep: 0 34px 90px rgba(0,0,0,.48), 0 12px 30px rgba(0,0,0,.24);
}

/* =========================================================
   GOLD BORDER APPLICATION (BORDERS ONLY)
   IMPORTANT: do NOT set background here
   ========================================================= */
.page{
  border: 1px solid var(--frame-border-strong) !important;
}

.topbar{
  border: 1px solid var(--frame-border) !important;
}

:where(.hero-panel,.section-head,.notice,.how-strip,.stack-strip,.panel,.product-inner,.product-card,.site-footer){
  border: 1px solid var(--frame-border) !important;
}

/* =========================================================
   SAFETY LOCK — PREVENT GOLD SURFACES FROM TOKENS
   (keeps future patches from accidentally making slabs gold)
   ========================================================= */
:root{
  --frame:   #2B2F34;
  --frame-2: #1E1C19;
  --frame-3: #141311;
}

/* =========================
   REQUEST — hero spacing (same as other pages)
   ========================= */
.site-hero.hero-panel .hero-inner{
  padding: 28px;
  display: grid;
  gap: 14px;
}
@media (max-width: 720px){
  .site-hero.hero-panel .hero-inner{
    padding: 18px;
    gap: 12px;
  }
}

  /* =========================================================
   LEGAL / LONGFORM RHYTHM
   Use on privacy/terms pages so paragraphs/bullets breathe
   ========================================================= */

.legal{
  max-width: 80ch;
}

.legal :where(p, ul, ol){
  margin: 0 0 14px !important;
}

.legal :where(ul, ol){
  padding-left: 1.15em !important;
}

.legal :where(li){
  margin: 0 0 8px !important;
}

.legal :where(h2, h3){
  margin: 22px 0 10px !important;
}

.legal .kicker{
  margin: 0 0 8px !important;
}

.legal .desc{
  line-height: 1.68 !important;
}

/* Make inline links read premium + consistent */
.legal a{
  text-underline-offset: 3px;
}


  /* Outer console background (dark, dimensional) */
  --bg-console:
    radial-gradient(1200px 820px at 50% 10%, rgba(255,255,255,.10) 0%, transparent 60%),
    radial-gradient(1100px 800px at 50% 14%, rgba(200,161,43,.16) 0%, transparent 62%),
    radial-gradient(900px 650px  at 20% 18%, rgba(200,161,43,.09) 0%, transparent 58%),
    radial-gradient(1400px 1000px at 50% 28%, transparent 34%, rgba(0,0,0,.62) 100%),
    linear-gradient(180deg, #1E1C19 0%, #1B1916 55%, #100F0E 100%);

  /* “Finished paper” card surface (off-white + sheen) */
  --paper-finish:
    radial-gradient(1200px 600px at 50% 0%, rgba(200,161,43,.06) 0%, transparent 58%),
    radial-gradient(900px 420px at 18% 0%, rgba(0,0,0,.04) 0%, transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.86) 100%);

  /* Optional: subtle top-edge sheen band for cards/panels */
  --sheen-band:
    linear-gradient(180deg, rgba(255,255,255,.70) 0%, rgba(255,255,255,0) 80%);
}

/* =========================================================
   LEGAL HERO (Privacy / Terms)
   ========================================================= */

.hero-legal{
  padding: 28px !important;              /* makes the header breathe */
}

.hero-legal .hero-title{
  margin: 0 0 10px !important;
}

.hero-legal .hero-kicker{
  margin: 0 !important;
  max-width: 72ch;
}

.hero-legal .legal-head{
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1.35fr .65fr;   /* title left, summary right */
  gap: 14px;
  align-items: start;
}

@media (max-width: 900px){
  .hero-legal .legal-head{
    grid-template-columns: 1fr;
  }
}

.hero-legal .notice{
  margin: 0 !important;
}

/* “Last updated” line */
.legal-meta{
  margin-top: 12px;
  display: inline-flex;
  gap: 10px;
  align-items: baseline;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.08);
  border: 1px solid rgba(0,0,0,.10);
}

.legal-meta__label{
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

.legal-meta__value{
  font-weight: 800;
  color: var(--text);
}

/* HERO spacing on legal pages */
.site-hero.hero-panel .hero-inner{
  padding: 28px;              /* matches your global hero content pad */
  display: grid;
  gap: 14px;
}

@media (max-width: 720px){
  .site-hero.hero-panel .hero-inner{
    padding: 18px;
    gap: 12px;
  }
}

/* =========================
   REQUEST — banner head background
   Set your image path here if you have one.
   If you don’t, it still looks “banner” due to the overlay.
   ========================= */
.section-head--request{
  position: relative;
  overflow: hidden;
  border-radius: 16px;
}

/* OPTIONAL: add an image like the other pages.
   If you have /assets/request.png, use it.
   If not, leave it and it’ll just be the dark gradient banner. */
.section-head--request .section-head__bg{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.48), rgba(0,0,0,.74)),
    url("/assets/request.png") center / cover no-repeat;
  opacity: .96;
  z-index: 0;
}

/* Keep banner text above */
.section-head--request h2,
.section-head--request p{
  position: relative;
  z-index: 1;
  color: rgba(255,255,255,.94);
}
.section-head--request p.muted{
  color: rgba(255,255,255,.78) !important;
}

/* Ensure banner padding matches your global rhythm */
.section-head--banner{
  padding: 18px var(--content-pad) !important;
}

/* =========================
   REQUEST — form panel layout
   ========================= */
.request-panel{
  max-width: 720px;
  margin: 0 auto;
  padding: 22px;
}

/* Honeypot utility */
.hp{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

/* Two-column name/email, collapses on mobile */
#request .form-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 720px){
  #request .form-grid{ grid-template-columns: 1fr; }
}

/* CONTACT layout + spacing (drop into overrides.css) */
#contact .section-head{
  margin-bottom: 14px !important; /* removes the “giant space” feeling */
}

/* email/address line */
.contact-meta{
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.contact-link{
  font-weight: 800;
  text-decoration: none;
  color: color-mix(in srgb, var(--text) 70%, var(--gold) 30%);
}
.contact-link:hover{ text-decoration: underline; }
.contact-sep{ opacity: .55; }

/* form + map grid */
.contact-grid{
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 14px;
  align-items: start;
}
@media (max-width: 980px){
  .contact-grid{ grid-template-columns: 1fr; }
}

/* map frame matches your “panel” feel */
.contact-map__frame{
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--paper-1), var(--paper-2));
  box-shadow: 0 1px 0 rgba(255,255,255,.72) inset, 0 14px 34px rgba(0,0,0,.10);
}
.contact-map__frame iframe{
  display: block;
  width: 100%;
  height: 320px;
}
@media (max-width: 980px){
  .contact-map__frame iframe{ height: 260px; }
}

.contact-map__hint{
  margin: 10px 2px 0;
  max-width: 60ch;
}

/* optional: ensure form doesn't look cramped beside map */
.contact-form{
  margin: 0;
}

/* CONTACT: remove extra gap between H2 and the muted line */
#contact .section-head{
  margin-bottom: 14px !important;          /* space after the head block */
  padding-bottom: 0 !important;
}

#contact .section-head h2{
  margin: 0 0 6px !important;              /* THIS is the key */
  line-height: 1.08;
}

#contact .section-head p.muted{
  margin: 0 !important;                    /* kills any top-margin */
}

/* If you added contact-meta under the paragraph, keep it tight */
#contact .contact-meta{
  margin-top: 10px !important;
}

/* =========================
   GLOBAL BLOCK OUTLINE (page blocks only) — SAFE
   Goal: crisp black edge on main page blocks without fighting component borders
   ========================= */

/* 1) Ensure these blocks actually have a border to tint */
:where(
  .page,
  .hero-panel,
  .notice,
  .section-head,
  .how-strip,
  .stack-strip,
  .service-card,
  .product-inner,
  .product-card,
  .insight-card,
  .form,
  .site-footer
){
  border-style: solid;
  border-width: 1px;
}

/* 2) Apply your outline as the *default* border color (no !important) */
:where(
  .page,
  .hero-panel,
  .notice,
  .section-head,
  .how-strip,
  .stack-strip,
  .service-card,
  .product-inner,
  .product-card,
  .insight-card,
  .form,
  .site-footer
){
  border-color: var(--blk-outline);
}

/* 3) Soften only the ones you want softer */
:where(.section-head, .notice){
  border-color: var(--blk-outline-soft);
}

/* 4) Exclusions: do not apply the global outline to rails/drawers
      (but DON'T wipe borders inside them) */
.right-rail,
.rail-drawer,
.rail-card,
.bottom-rail{
  border-color: initial;
}

/* =========================
   1) BASE / RESET (STABLE)
   ========================= */
html, body{ height:100%; }
*{ box-sizing:border-box; }
img{ max-width:100%; display:block; }
a{ color:inherit; }

/* Make scrolling/padding predictable with fixed bars */
html{ scroll-padding-top: calc(var(--edge) + var(--topbar-h) + var(--stack-gap) + 12px); }

body{
  margin:0;
  font-family: var(--font-sans);

  /* IMPORTANT: default document text is dark (your “paper system”) */
  color: var(--text);
  line-height: 1.55;

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x:hidden;

  /* reserve space for fixed topbar + bottom dock CTA */
  padding-top: calc(var(--edge) + var(--topbar-h) + var(--stack-gap));
  padding-right: 0;
  padding-bottom: calc(var(--edge) + 24px);

  /* Background: secure console (token-driven, not hard-coded) */
  background:
    radial-gradient(1200px 820px at 50% 10%, rgba(255,255,255,.10) 0%, transparent 60%),
    radial-gradient(1100px 800px at 50% 14%, rgba(200,161,43,.16) 0%, transparent 62%),
    radial-gradient(900px 650px  at 20% 18%, rgba(200,161,43,.09) 0%, transparent 58%),
    radial-gradient(1400px 1000px at 50% 28%, transparent 34%, rgba(0,0,0,.62) 100%),
    linear-gradient(180deg, var(--frame-2) 0%, var(--frame-2) 55%, var(--frame-3) 100%);

  background-attachment: fixed;
}

/* Typography */
h1, h2, h3{
  margin:0;
  letter-spacing:-0.02em;
  font-family: var(--font-sans);
}

p{ margin:0 0 12px; }
p, li{ font-size:16px; line-height:1.62; }

/* Muted copy: stable on light surfaces */
.muted{
  color: color-mix(in srgb, var(--muted) 92%, var(--text) 8%);
}

/* Accessibility */
.sr-only{
  position:absolute!important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--gold) 80%, white 20%);
  outline-offset: 3px;
}

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

/* =========================
   2) GLOBAL OVERLAYS (grid + dust) — SAFE
   ========================= */

/* Create a tiny z-index “contract” so overlays never fight drawers/modals */
:root{
  --z-overlay-grid: 1;
  --z-overlay-dust: 2;
  --z-content: 5;
  --z-fixed-ui: 3000;   /* topbar etc */
  --z-drawer: 5000;     /* rail drawer panel */
  --z-scrim: 4900;      /* rail overlay/scrim */
}

body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-overlay-grid);

  background:
    linear-gradient(to right, var(--grid-1) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-2) 1px, transparent 1px);
  background-size: 110px 110px;

  opacity: .06;
  mix-blend-mode: overlay;
}

body::after{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-overlay-dust);

  background:
    radial-gradient(3px 3px at 12% 22%, var(--dust-1) 40%, transparent 72%),
    radial-gradient(2px 2px at 18% 58%, var(--dust-2) 45%, transparent 78%),
    radial-gradient(3px 3px at 26% 38%, var(--dust-1) 35%, transparent 72%),
    radial-gradient(2px 2px at 62% 28%, var(--dust-3) 40%, transparent 78%),
    radial-gradient(3px 3px at 74% 62%, var(--dust-1) 35%, transparent 72%),
    radial-gradient(2px 2px at 86% 44%, var(--dust-2) 45%, transparent 78%),
    radial-gradient(900px 900px at 50% 78%, rgba(200,161,43,.10) 0%, transparent 60%);

  opacity: .40;
  mix-blend-mode: soft-light;
  filter: blur(.25px);
}

/* Ensure main content sits above overlays */
.page, .topbar, footer{ position: relative; z-index: var(--z-content); }

/* If you have any scrims/drawers/modals, force them above overlays */
.rail-overlay{ z-index: var(--z-scrim); }
.rail-drawer{ z-index: var(--z-drawer); }
.topbar{ z-index: var(--z-fixed-ui); }

/* Optional: if blend modes look bad on a device, you can flip this on */
@media (prefers-reduced-transparency: reduce){
  body::before, body::after{ mix-blend-mode: normal; opacity: .14; }
}
/* =========================
   3) PAGE CONTAINER (centered) — CLEAN DEPTH CONTRACT
   ========================= */

.page{
  width: min(var(--max), calc(100% - (var(--edge) * 2)));
  margin: var(--stack-gap) auto;
  padding: 30px 32px;

  /* “finished” paper slab with gold bloom */
  background:
    radial-gradient(1200px 600px at 50% 0%, rgba(200,161,43,.06) 0%, transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.86) 100%);

  border: 1px solid rgba(0,0,0,.12);
  border-radius: var(--r-lg);

  /* Page gets the deep shadow (ONLY here) */
  box-shadow:
    0 0 0 1px var(--blk-edge),
    0 34px 90px rgba(0,0,0,.48),
    0 12px 30px rgba(0,0,0,.24);
}

main{ padding-bottom: 10px; }

/* ---------- Inner block outline: crisp edge only ---------- */
/* Don’t force huge shadows onto everything; just give them the edge */
:where(
  .hero-panel,
  .notice,
  .how-strip,
  .stack-strip,
  .service-card,
  .product-inner,
  .product-card,
  .insight-card,
  .form,
  .site-footer,
  .section-head
){
  box-shadow: 0 0 0 1px var(--blk-edge);
}

/* Softer edge on these (without nuking other shadows they may define later) */
:where(.notice, .section-head){
  box-shadow: 0 0 0 1px var(--blk-edge-soft);
}

/* ---------- Optional: gentle lift ONLY where the block has no shadow already ---------- */
/* Use this class on blocks you want slightly floating, instead of forcing it everywhere */
.lift{
  box-shadow:
    0 0 0 1px var(--blk-edge),
    0 18px 44px rgba(0,0,0,.14);
}


/* =========================
   4) TOP RAIL (fixed, 4 elements)
   - dash (drawer)
   - Pattern & Edge chip (distinct finish)
   - center box
   - Run a decision (link)
   ========================= */

.topbar{
  position: fixed;
  top: var(--edge);
  left: 50%;
  transform: translateX(-50%);

  /* narrower than page so it never kisses the viewport edge */
  width: min(960px, calc(100% - (var(--edge) * 2)));
  z-index: 3000;

  padding: 10px 12px;
  border-radius: var(--r-lg);
  border: 1px solid rgba(255,255,255,.12);

  background:
    radial-gradient(900px 320px at 18% 0%, rgba(200,161,43,.10) 0%, transparent 62%),
    linear-gradient(180deg, rgba(43,47,52,.92) 0%, rgba(35,39,43,.92) 100%);

  box-shadow:
    0 18px 52px rgba(0,0,0,.42),
    0 1px 0 rgba(255,255,255,.06) inset;

  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* Kill legacy brand-in-topbar elements if they still exist */
.topbar .brand-link,
.topbar .brand,
.topbar .brand-mark,
.topbar .brand-name,
.topbar .brand-tagline,
.topbar .mark-link{
  display:none !important;
}

.topbar-rail{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;                 /* tighter so it fits */
  min-width: 0;              /* allows center box to ellipsis */
}

/* 1) DASH BUTTON (drawer toggle) */
.topbar-dash{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;

  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset;
  cursor: pointer;

  position: relative;
  flex: 0 0 auto;
}
.topbar-dash::before{
  content:"";
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: rgba(255,255,255,.80);
  opacity: .95;
}
body.nav-open .topbar-dash::before{ transform: rotate(45deg); }
body.nav-open .topbar-dash::after{
  content:"";
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: rgba(255,255,255,.80);
  position: absolute;
  transform: rotate(135deg);
}

/* 2) PATTERN & EDGE CHIP (distinct color, not gray-on-gray) */
.topbar-brand{
  display: inline-flex;
  align-items: center;
  text-decoration: none;

  height: 44px;
  padding: 0 12px;
  border-radius: 14px;

  /* “finished” bronze chip */
  border: 1px solid rgba(200,161,43,.50);
  background:
    radial-gradient(140% 140% at 20% 20%, rgba(200,161,43,.28), transparent 58%),
    linear-gradient(180deg, rgba(22,20,18,.92), rgba(12,11,10,.98));

  box-shadow:
    0 1px 0 rgba(255,255,255,.08) inset,
    0 14px 34px rgba(0,0,0,.22);

  flex: 0 0 auto;
  max-width: 220px;          /* prevents edge collisions */
}
.topbar-brand__name{
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(255,255,255,.94);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 3) CENTER BOX (flexes + ellipsis) */
.topbar-box{
  flex: 1 1 auto;
  min-width: 0;

  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);

  background:
    radial-gradient(140% 140% at 18% 20%, rgba(200,161,43,.16), transparent 58%),
    linear-gradient(180deg, rgba(17,16,15,.92), rgba(12,11,10,.96));

  box-shadow:
    0 1px 0 rgba(255,255,255,.08) inset,
    0 18px 44px rgba(0,0,0,.20);

  display: flex;
  align-items: center;
  padding: 0 14px;
  overflow: hidden;
  gap: 10px;
}
.topbar-box__label{
  color: rgba(255,255,255,.92) !important;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 11px;
  text-shadow: 0 1px 0 rgba(0,0,0,.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar-box__dash{
  color: rgba(255,255,255,.70);
  font-weight: 900;
  letter-spacing: .06em;
  flex: 0 0 auto;
}

/* 4) RUN A DECISION (right CTA) */
.cta-run-top{
  display: inline-flex;
  align-items: center;
  gap: 10px;

  height: 44px;
  padding: 0 14px;
  border-radius: 14px;
  text-decoration: none;

  border: 1px solid rgba(200,161,43,.42);
  background:
    radial-gradient(140% 140% at 20% 20%, rgba(200,161,43,.18), transparent 58%),
    linear-gradient(180deg, rgba(17,16,15,.95), rgba(12,11,10,.98));

  box-shadow:
    0 1px 0 rgba(255,255,255,.08) inset,
    0 18px 42px rgba(0,0,0,.20);

  flex: 0 0 auto;
  white-space: nowrap;
}
.cta-run-top__label{
  font-weight: 950;
  letter-spacing: .10em;
  text-transform: uppercase;
  font-size: 11px;
  color: rgba(255,255,255,.92);
}
.cta-run-top__arrow{
  font-weight: 900;
  color: rgba(255,255,255,.82);
  transform: translateY(-1px);
}

/* Hover polish (both chips) */
.topbar-brand:hover,
.cta-run-top:hover{
  filter: brightness(1.06);
}

/* Responsive: keep it clean when tight */
@media (max-width: 520px){
  .topbar{ width: calc(100% - (var(--edge) * 2)); }
  .topbar-brand{ max-width: 160px; }
  .cta-run-top{ padding: 0 12px; }
  .cta-run-top__label{ letter-spacing: .08em; }
}

/* =========================
   TOP RAIL (canonical)
   - Brand chip
   - Center box
   - Run a decision
   - Menu (hamburger) LAST
   ========================= */

.topbar{
  position: fixed;
  top: var(--edge);
  left: 50%;
  transform: translateX(-50%);
  width: min(960px, calc(100% - (var(--edge) * 2)));
  z-index: 3000;

  padding: 10px 12px;
  border-radius: var(--r-lg);
  border: 1px solid rgba(255,255,255,.12);

  background:
    radial-gradient(900px 320px at 18% 0%, rgba(200,161,43,.10) 0%, transparent 62%),
    linear-gradient(180deg, rgba(43,47,52,.92) 0%, rgba(35,39,43,.92) 100%);

  box-shadow:
    0 18px 52px rgba(0,0,0,.42),
    0 1px 0 rgba(255,255,255,.06) inset;

  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* Kill legacy brand-in-topbar elements if they still exist */
.topbar .brand-link,
.topbar .brand,
.topbar .brand-mark,
.topbar .brand-name,
.topbar .brand-tagline,
.topbar .mark-link{
  display:none !important;
}

.topbar-rail{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

/* Brand chip */
.topbar-brand{
  display: inline-flex;
  align-items: center;
  text-decoration: none;

  height: 44px;
  padding: 0 12px;
  border-radius: 14px;

  border: 1px solid rgba(200,161,43,.50);
  background:
    radial-gradient(140% 140% at 20% 20%, rgba(200,161,43,.28), transparent 58%),
    linear-gradient(180deg, rgba(22,20,18,.92), rgba(12,11,10,.98));

  box-shadow:
    0 1px 0 rgba(255,255,255,.08) inset,
    0 14px 34px rgba(0,0,0,.22);

  flex: 0 0 auto;
  max-width: 220px;
}
.topbar-brand__name{
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(255,255,255,.94);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Center box */
.topbar-box{
  flex: 1 1 auto;
  min-width: 0;

  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);

  background:
    radial-gradient(140% 140% at 18% 20%, rgba(200,161,43,.16), transparent 58%),
    linear-gradient(180deg, rgba(17,16,15,.92), rgba(12,11,10,.96));

  box-shadow:
    0 1px 0 rgba(255,255,255,.08) inset,
    0 18px 44px rgba(0,0,0,.20);

  display: flex;
  align-items: center;
  padding: 0 14px;
  overflow: hidden;
  gap: 10px;
}
.topbar-box__label{
  color: rgba(255,255,255,.92) !important;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 11px;
  text-shadow: 0 1px 0 rgba(0,0,0,.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar-box__dot{
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(200,161,43,.85);
  box-shadow: 0 0 0 3px rgba(200,161,43,.18);
  flex: 0 0 auto;
}
.topbar-box__sub{
  color: rgba(255,255,255,.72);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Right cluster */
.topbar-actions{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

/* Run a decision */
.cta-run-top{
  display: inline-flex;
  align-items: center;
  gap: 10px;

  height: 44px;
  padding: 0 14px;
  border-radius: 14px;
  text-decoration: none;

  border: 1px solid rgba(200,161,43,.42);
  background:
    radial-gradient(140% 140% at 20% 20%, rgba(200,161,43,.18), transparent 58%),
    linear-gradient(180deg, rgba(17,16,15,.95), rgba(12,11,10,.98));

  box-shadow:
    0 1px 0 rgba(255,255,255,.08) inset,
    0 18px 42px rgba(0,0,0,.20);

  white-space: nowrap;
}
.cta-run-top__label{
  font-weight: 950;
  letter-spacing: .10em;
  text-transform: uppercase;
  font-size: 11px;
  color: rgba(255,255,255,.92);
}
.cta-run-top__arrow{
  font-weight: 900;
  color: rgba(255,255,255,.82);
  transform: translateY(-1px);
}

/* MENU BUTTON (hamburger) — LAST */
.topbar-menu{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;

  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset;
  cursor: pointer;

  position: relative;
  flex: 0 0 auto;
}

/* hamburger icon: 3 lines */
.icon-burger{
  width: 18px;
  height: 12px;
  position: relative;
  display: inline-block;
}
.icon-burger::before,
.icon-burger::after,
.icon-burger span{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:2px;
  border-radius:2px;
  background: rgba(255,255,255,.86);
}
.icon-burger::before{ top:0; }
.icon-burger span{ top:5px; }
.icon-burger::after{ bottom:0; }

/* open state -> X (support BOTH body classes in case your JS toggles either) */
body.rail-open .icon-burger::before,
body.nav-open  .icon-burger::before{
  top:5px;
  transform: rotate(45deg);
}
body.rail-open .icon-burger span,
body.nav-open  .icon-burger span{
  opacity:0;
}
body.rail-open .icon-burger::after,
body.nav-open  .icon-burger::after{
  bottom:auto;
  top:5px;
  transform: rotate(-45deg);
}

/* Hover polish (chips + menu) */
.topbar-brand:hover,
.cta-run-top:hover,
.topbar-menu:hover{
  filter: brightness(1.06);
}

/* Responsive */
@media (max-width: 520px){
  .topbar{ width: calc(100% - (var(--edge) * 2)); }
  .topbar-brand{ max-width: 160px; }
  .cta-run-top{ padding: 0 12px; }
  .cta-run-top__label{ letter-spacing: .08em; }
}

/* =========================
   DRAWER LINK CONSISTENCY
   Fix "randomly lit" links:
   - normalize hover/focus/current for ALL rail links
   - ensure aria-current + :is() styles match
   ========================= */

.rail-drawer .rail-link{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;

  color: rgba(255,255,255,.86);
  border-radius: 12px;
  padding: 10px 12px;

  border: 1px solid transparent;
  background: transparent;

  transition: background .15s ease, border-color .15s ease, transform .15s ease, color .15s ease;
}

.rail-drawer .rail-link:hover,
.rail-drawer .rail-link:focus-visible{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.10);
  color: rgba(255,255,255,.94);
  transform: translateY(-1px);
  outline: none;
}

/* current page (works whether you use aria-current="page" or .is-active) */
.rail-drawer .rail-link[aria-current="page"],
.rail-drawer .rail-link.is-active{
  background:
    radial-gradient(140% 140% at 20% 20%, rgba(200,161,43,.18), transparent 58%),
    rgba(255,255,255,.06);
  border-color: rgba(200,161,43,.26);
  color: rgba(255,255,255,.96);
}

/* make sure divider and foot always read the same */
.rail-divider{ opacity: .75; }
.rail-foot .rail-cta{
  display:flex;
  justify-content:center;
  text-decoration:none;
}

/* =========================
   5) SKIP LINK (always visible on focus, above rails/overlays)
   ========================= */
.skip-link{
  position: fixed;
  left: -999px;
  top: calc(var(--edge) + 6px);

  padding: 10px 12px;
  border-radius: 12px;

  background:
    radial-gradient(140% 140% at 18% 20%, rgba(200,161,43,.10), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.90));
: 0 16px 40px rgba(0,0,0,.22);

  z-index: 10000; /* above topbar + rail overlay/drawer */
}

.skip-link:focus,
.skip-link:focus-visible{
  left: var(--edge);
  outline: 2px solid color-mix(in srgb, var(--gold) 82%, white 18%);
  outline-offset: 2px;
}

/* ========================
   7) SECTIONS / RHYTHM / GRIDS (token-driven, works on paper + charcoal)
   ========================= */

/* Anchor offset for fixed topbar */
:root{
  --anchor-offset: calc(var(--edge) + var(--topbar-h) + 14px);
}

section{
  padding: 58px 0;
  position: relative;

  /* use your border system instead of hard-coded black */
  border-top: 1px solid color-mix(in srgb, var(--line) 55%, transparent 45%);
  scroll-margin-top: var(--anchor-offset);
}

/* gold “registration” hairline */
section::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height: 1px;

  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--gold) 46%, transparent 54%),
    transparent 72%
  );
  opacity: .55;
  pointer-events: none;
}

/* Hero rhythm */
.site-hero{
  padding: 18px 0 28px;
  border-top: 0;
}
.site-hero::before{ display:none; }

/* Generic grids */
.grid,
.grid-2{
  display:grid;
  gap: var(--gap);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}
.grid-3{
  display:grid;
  gap: var(--gap);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}

/* Optional: responsive collapse */
@media (max-width: 900px){
  .grid-3{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .grid, .grid-2, .grid-3{ grid-template-columns: 1fr; }
}

/* Divider rule */
.rule{
  height: 1px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--gold) 60%, transparent 40%),
    transparent 70%
  );
  margin: 18px 0;
}

/* Section header */
.section-head{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.section-head .muted{
  margin: 0;
  max-width: 72ch;
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow
}
/* =========================
   8) HERO (finished slab, token-driven)
   ========================= */

.hero-panel{
  position: relative;
  margin-top: var(--gap);
  padding: 30px 30px 26px;
  border-radius: var(--r-lg);
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent 30%);

  background:
    /* sheen sweep */
    linear-gradient(135deg, rgba(255,255,255,.34) 0%, transparent 46%),
    /* gold bloom */
    radial-gradient(1100px 520px at 18% 0%,
      color-mix(in srgb, var(--gold) 22%, transparent 78%) 0%,
      transparent 62%),
    /* depth falloff */
    radial-gradient(900px 520px at 78% 120%,
      rgba(0,0,0,.06) 0%,
      transparent 58%),
    /* finished paper slab */
    linear-gradient(180deg,
      color-mix(in srgb, var(--sheet) 92%, white 8%) 0%,
      color-mix(in srgb, var(--sheet) 78%, var(--surface) 22%) 100%);

  box-shadow:
    0 18px 52px rgba(0,0,0,.14),
    0 1px 0 rgba(255,255,255,.70) inset;
}

/* Inner “sheen + edge registration” */
.hero-panel::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;

  background:
    /* top sheen */
    radial-gradient(1200px 420px at 50% 0%,
      rgba(255,255,255,.55) 0%,
      transparent 55%),
    /* bottom falloff */
    radial-gradient(900px 520px at 50% 120%,
      rgba(0,0,0,.06) 0%,
      transparent 60%);

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.45);
  opacity: .92;
}

/* Gold “cap” hint (keeps your premium top band) */
.hero-panel::after{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height: 72px;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  pointer-events:none;

  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--gold) 18%, transparent 82%),
      transparent 58%),
    linear-gradient(180deg,
      rgba(0,0,0,.06),
      transparent);

  opacity: .75;
}

/* Type */
.hero-title{
  margin: 0 0 6px;
  font-size: clamp(40px, 4.6vw, 54px);
  line-height: 1.05;
  letter-spacing: -0.04em;
  font-weight: 950;
  color: var(--text);
}

.hero-kicker,
.hero-tagline{
  color: var(--muted);
  max-width: 68ch;
}

.hero-kicker{
  margin: 0 0 8px;
  line-height: 1.6;
  opacity: .92;
}

.hero-thesis{
  margin: 10px 0 10px;
  font-size: clamp(18px, 2.1vw, 22px);
  line-height: 1.32;
  color: var(--text);
  font-weight: 800;
  max-width: 62ch;
}

.hero-actions{
  margin-top: 14px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* =========================
   9) BADGES + NOTICE (finish-safe, works on paper OR dark)
   ========================= */

.badges{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  margin: 12px 0 0;
}

/* One chip system that still reads as “premium hardware” */
.badge{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 7px 11px;
  border-radius: 999px;

  /* crisp edge + soft inner sheen */
  border: 1px solid rgba(20,19,18,.14);
  background:
    radial-gradient(140% 140% at 22% 18%, rgba(200,161,43,.14), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.62));

  box-shadow:
    0 1px 0 rgba(255,255,255,.65) inset,
    0 10px 24px rgba(0,0,0,.08);

  font-size: 12px;
  font-weight: 900;
  letter-spacing: .01em;
  color: rgba(15,14,13,.90);
}

/* If badges appear on a DARK panel (like if you later move them), this keeps them readable */
.hero-panel.is-dark .badge,
.page.is-dark .badge,
[data-surface="dark"] .badge{
  border-color: rgba(255,255,255,.14);
  background:
    radial-gradient(140% 140% at 22% 18%, rgba(200,161,43,.18), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  box-shadow:
    0 1px 0 rgba(255,255,255,.08) inset,
    0 14px 34px rgba(0,0,0,.20);
  color: rgba(255,255,255,.88);
}

/* NOTICE: reads like a “protocol card” */
.notice{
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 14px;

  border: 1px solid rgba(20,19,18,.14);
  background:
    radial-gradient(120% 160% at 18% 0%, rgba(200,161,43,.10), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.58));

  box-shadow:
    0 1px 0 rgba(255,255,255,.62) inset,
    0 16px 40px rgba(0,0,0,.10);
}

.notice strong{ font-weight: 950; }

.notice p{
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(15,14,13,.78);
}

/* Dark-context notice support */
.hero-panel.is-dark .notice,
.page.is-dark .notice,
[data-surface="dark"] .notice{
  border-color: rgba(255,255,255,.14);
  background:
    radial-gradient(120% 160% at 18% 0%, rgba(200,161,43,.16), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.05));
  box-shadow:
    0 1px 0 rgba(255,255,255,.08) inset,
    0 18px 44px rgba(0,0,0,.22);
}

.hero-panel.is-dark .notice p,
.page.is-dark .notice p,
[data-surface="dark"] .notice p{
  color: rgba(255,255,255,.76);
}
/* =========================
   10) BUTTONS (GLASS SYSTEM — single style language)
   Goal:
   - base .btn = glass (works on dark + light)
   - .primary = glass with gold rim (NOT gold fill)
   - .ghost = lighter glass, quieter
   - keep your timings + weight
   ========================= */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;

  height: 46px;
  padding: 0 18px;
  border-radius: 12px;
  text-decoration:none;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;

  font-weight: 950;
  letter-spacing: .02em;

  /* GLASS BASE */
  color: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.18);

  background:
    radial-gradient(120% 160% at 22% 18%, rgba(255,255,255,.10), rgba(255,255,255,.06) 55%, rgba(255,255,255,.04) 100%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.05));

  box-shadow:
    0 1px 0 rgba(255,255,255,.12) inset,
    0 14px 34px rgba(0,0,0,.22);

  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);

  transition:
    transform var(--t-fast),
    border-color var(--t-fast),
    background var(--t-fast),
    box-shadow var(--t-fast),
    filter var(--t-fast);
}

.btn:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.26);

  background:
    radial-gradient(120% 160% at 22% 18%, rgba(255,255,255,.14), rgba(255,255,255,.08) 55%, rgba(255,255,255,.06) 100%),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));

  box-shadow:
    0 1px 0 rgba(255,255,255,.16) inset,
    0 18px 44px rgba(0,0,0,.26);
}

.btn:active{
  transform: translateY(0px);
  filter: brightness(.99);

  box-shadow:
    0 1px 0 rgba(255,255,255,.10) inset,
    0 10px 26px rgba(0,0,0,.22);

  background:
    radial-gradient(120% 160% at 22% 18%, rgba(255,255,255,.10), rgba(255,255,255,.06) 55%, rgba(255,255,255,.04) 100%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.05));
}

.btn:focus-visible{
  outline: 2px solid rgba(200,161,43,.70);
  outline-offset: 3px;
}

/* ---------- PRIMARY (glass + gold rim, NOT gold fill) ---------- */
.btn.primary{
  color: rgba(255,255,255,.94);
  border-color: rgba(200,161,43,.55);

  /* same glass, with a faint gold sheen */
  background:
    radial-gradient(120% 160% at 22% 18%, rgba(200,161,43,.14), rgba(255,255,255,.06) 55%, rgba(255,255,255,.04) 100%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.05));

  box-shadow:
    0 1px 0 rgba(255,255,255,.14) inset,
    0 18px 46px rgba(0,0,0,.26),
    0 0 0 1px rgba(200,161,43,.18) inset;
}

.btn.primary:hover{
  border-color: rgba(200,161,43,.72);
  box-shadow:
    0 1px 0 rgba(255,255,255,.18) inset,
    0 24px 62px rgba(0,0,0,.30),
    0 0 0 1px rgba(200,161,43,.22) inset;
}

.btn.primary:active{
  filter: brightness(.99);
  box-shadow:
    0 1px 0 rgba(255,255,255,.12) inset,
    0 14px 36px rgba(0,0,0,.26),
    0 0 0 1px rgba(200,161,43,.18) inset;
}

/* ---------- GHOST (quiet glass, minimal sheen) ---------- */
.btn.ghost{
  color: rgba(255,255,255,.88);
  border-color: rgba(255,255,255,.14);

  background:
    radial-gradient(120% 160% at 22% 18%, rgba(255,255,255,.08), rgba(255,255,255,.04) 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.04));

  box-shadow:
    0 1px 0 rgba(255,255,255,.10) inset,
    0 12px 30px rgba(0,0,0,.18);

  font-weight: 900;
}

.btn.ghost:hover{
  border-color: rgba(255,255,255,.22);
  box-shadow:
    0 1px 0 rgba(255,255,255,.14) inset,
    0 16px 40px rgba(0,0,0,.22);
}

/* ---------- SECONDARY / TERTIARY ----------
   Keep as aliases of base glass unless you want variants.
*/
.btn.secondary,
.btn.tertiary{
  /* inherit base .btn look */
}

/* =========================
   11) CARDS / PANELS (shared — premium paper, no color-mix)
   ========================= */

.kicker{
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-weight: 950;

  /* muted + a touch of gold without color-mix */
  color: rgba(75,73,68,.86);
  text-shadow: 0 1px 0 rgba(255,255,255,.55);
}

.title{
  font-size: 18px;
  font-weight: 950;
  margin-top: 6px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: rgba(17,16,15,.96);
}

.desc{
  margin-top: 8px;
  line-height: 1.55;
  color: rgba(75,73,68,.92);
}

/* Shared slab finish */
.card, .panel, .lane-card, .insight-card{
  border: 1px solid rgba(20,19,18,.16);
  border-radius: var(--r-lg);

  background:
    radial-gradient(1000px 420px at 14% 0%, rgba(200,161,43,.08), transparent 62%),
    radial-gradient(900px 520px at 80% 140%, rgba(0,0,0,.035), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.72));

  box-shadow:
    0 1px 0 rgba(255,255,255,.70) inset,
    0 14px 34px rgba(0,0,0,.10);

  transition:
    transform var(--t-med),
    box-shadow var(--t-med),
    border-color var(--t-med);
}

/* Add a subtle “clearcoat” highlight band (optional but premium) */
.card::before,
.panel::before,
.lane-card::before,
.insight-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.55), transparent 42%);
  opacity: .55;
}

/* ensure pseudo-element doesn’t break layout */
.card, .panel, .lane-card, .insight-card{ position: relative; }

.card, .panel, .lane-card{ padding: var(--pad-lg); }

.card{
  min-height: 132px;
  text-decoration: none;
  color: var(--text);

  display:flex;
  flex-direction: column;
  align-items:flex-start;
}

.card .meta{
  margin-top: auto;
  font-size: .95rem;
  opacity: .78;
  padding-top: 12px;
}

/* Lift states */
.panel--lift, .lane-card, .insight-card{
  /* inherits transition */
}

.card:hover,
.panel--lift:hover,
.lane-card:hover,
.insight-card:hover{
  transform: translateY(-2px);

  box-shadow:
    0 1px 0 rgba(255,255,255,.72) inset,
    0 20px 50px rgba(0,0,0,.14);

  border-color: rgba(200,161,43,.50);
}

/* Strong edge variant */
.panel--strong{
  border-color: rgba(0,0,0,.14);
}

/* =========================
   HOW STRIP — connected flow (desktop)
   ========================= */

@media (min-width: 861px){
  .how-step{ z-index: 1; }

  /* Flow line across the row */
  .how-strip{
    position: relative;
  }
  .how-strip::before{
    content:"";
    position:absolute;
    left: 18px;
    right: 18px;
    top: 34px;                 /* aligns near the kicker line */
    height: 1px;
    background: linear-gradient(
      90deg,
      rgba(200,161,43,.35),
      rgba(20,19,18,.10),
      rgba(200,161,43,.28)
    );
    opacity: .55;
    pointer-events:none;
    z-index: 0;
  }

  /* Small nodes (one per step) */
  .how-step::after{
    content:"";
    position:absolute;
    left: 18px;
    top: 29px;                 /* sits on the flow line */
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: rgba(200,161,43,.82);
    box-shadow:
      0 0 0 4px rgba(200,161,43,.12),
      0 2px 8px rgba(0,0,0,.18);
    pointer-events:none;
    opacity: .90;
  }

  /* Slightly different “strength” by step */
  .how-step:nth-child(2)::after{ opacity: .80; }
  .how-step:nth-child(3)::after{ opacity: .72; }
}

/* Kill the connector when the grid collapses */
@media (max-width: 860px){
  .how-strip::before{ display:none; }
  .how-step::after{ display:none; }
}

.how-step:hover{
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.74) inset,
    0 20px 46px rgba(0,0,0,.14);
  border-color: rgba(200,161,43,.42);
}

.how-step .kicker{
  font-size:11px;
  letter-spacing:.18em;
  opacity:.92;
}

.how-step .title{
  margin-top: 7px;
  font-size: 15px;
  font-weight: 950;
  line-height: 1.25;
}

/* =========================
   HOW STRIP — chevrons between steps (desktop)
   ========================= */
@media (min-width: 861px){
  .how-strip{ position: relative; }

  /* one chevron between 1→2 and 2→3 */
  .how-strip::after{
    content:"";
    position:absolute;
    left: 0;
    right: 0;
    top: 25px;                 /* aligns with the flow line */
    height: 22px;
    pointer-events:none;
    z-index: 0;

    /* two tiny chevrons drawn via background gradients */
    background:
      /* chevron 1 */
      linear-gradient(45deg, transparent 46%, rgba(200,161,43,.55) 47%, rgba(200,161,43,.55) 53%, transparent 54%) 34% 50% / 14px 14px no-repeat,
      linear-gradient(-45deg, transparent 46%, rgba(200,161,43,.55) 47%, rgba(200,161,43,.55) 53%, transparent 54%) 34% 50% / 14px 14px no-repeat,

      /* chevron 2 */
      linear-gradient(45deg, transparent 46%, rgba(200,161,43,.45) 47%, rgba(200,161,43,.45) 53%, transparent 54%) 67% 50% / 14px 14px no-repeat,
      linear-gradient(-45deg, transparent 46%, rgba(200,161,43,.45) 47%, rgba(200,161,43,.45) 53%, transparent 54%) 67% 50% / 14px 14px no-repeat;

    opacity: .70;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.18));
  }
}

@media (max-width: 860px){
  .how-strip::after{ display:none; }
}

/* =========================
   13) PILLS + STACK STRIP (premium finish)
   ========================= */
.pills{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  margin-top: 10px;
}

.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 7px 10px;
  border-radius: 999px;

  /* edge + finish */
  border: 1px solid color-mix(in srgb, var(--gold) 18%, rgba(0,0,0,.18) 82%);
  background:
    radial-gradient(120% 140% at 22% 18%, rgba(255,255,255,.82) 0%, rgba(255,255,255,.62) 42%, rgba(255,255,255,.44) 100%),
    linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.56));
  box-shadow:
    0 1px 0 rgba(255,255,255,.78) inset,
    0 10px 22px rgba(0,0,0,.08);

  font-size: 12px;
  font-weight: 950;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 92%, var(--muted) 8%);
}

.stack-strip{
  margin-top: 18px;
  padding: 14px 14px 12px;
  border-radius: var(--r-lg);

  border: 1px solid color-mix(in srgb, var(--gold) 14%, var(--border) 86%);
  background:
    radial-gradient(900px 380px at 18% 0%, rgba(200,161,43,.10) 0%, transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.76), rgba(255,255,255,.58));
  box-shadow:
    0 1px 0 rgba(255,255,255,.72) inset,
    0 12px 26px rgba(0,0,0,.10);
}

.stack-flow{
  margin-top: 10px;
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
}

.flow-chip{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 999px;

  border: 1px solid color-mix(in srgb, var(--gold) 18%, rgba(0,0,0,.18) 82%);
  background:
    radial-gradient(120% 140% at 22% 18%, rgba(255,255,255,.78) 0%, rgba(255,255,255,.58) 45%, rgba(255,255,255,.44) 100%),
    linear-gradient(180deg, rgba(255,255,255,.70), rgba(255,255,255,.54));
  box-shadow:
    0 1px 0 rgba(255,255,255,.75) inset,
    0 10px 22px rgba(0,0,0,.08);

  font-weight: 900;
  font-size: 13px;
  color: color-mix(in srgb, var(--text) 92%, var(--muted) 8%);
}

/* --- Flow chips: tiny left notch + micro tick before the MONO word --- */

.flow-chip{
  position: relative;
  padding-left: 14px; /* gives room so the notch doesn't crowd text */
}

/* tiny left notch (a small cut + highlight, not a big tab) */
.flow-chip::before{
  content:"";
  position:absolute;
  left: -1px;               /* sits on the border */
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 16px;
  border-radius: 10px;
  background:
    linear-gradient(180deg,
      rgba(0,0,0,.08),
      rgba(0,0,0,.00)
    );
  opacity: .55;
  pointer-events:none;
}

/* micro tick mark before the mono word */
.flow-chip .mono{
  position: relative;
  padding-left: 10px; /* space for the tick */
}

.flow-chip .mono::before{
  content:"";
  position:absolute;
  left: 0;
  top: 55%;
  transform: translateY(-50%);
  width: 7px;
  height: 1px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--gold) 55%, var(--text) 45%);
  opacity: .75;
  box-shadow: 0 1px 0 rgba(255,255,255,.35); /* tiny “finish” */
}

.mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
  font-weight: 950;
  letter-spacing: .02em;
  text-transform: uppercase;
  font-size: 12px;
  color: color-mix(in srgb, var(--text) 85%, var(--gold) 15%);
}

/* =========================
   14) PRODUCT BAND (brand-safe + finished sheen)
   ========================= */

.product-band{
  padding: 0;
  border-top: 1px solid var(--hairline);
}

/* The slab: no random hues, just ink + gold bloom + paper sheen */
.product-inner{
  position: relative;
  border-radius: var(--r-lg);
  border: 1px solid rgba(0,0,0,.10);
  padding: 26px;

  background:
    /* gold bloom (top-left) */
    radial-gradient(1100px 520px at 18% 0%, rgba(200,161,43,.12) 0%, transparent 62%),
    /* slight vignette (bottom) */
    radial-gradient(900px 520px at 60% 120%, rgba(0,0,0,.06) 0%, transparent 62%),
    /* finished paper slab */
    linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.76) 100%);

  box-shadow:
    0 1px 0 rgba(255,255,255,.70) inset,
    0 18px 44px rgba(0,0,0,.12);

  display:grid;
  grid-template-columns: 1.35fr .65fr;
  gap: 14px;
  align-items: start;
}

/* Optional: a subtle “sheen band” across the top (reads premium, not glossy) */
.product-inner::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height: 64px;
  border-top-left-radius: var(--r-lg);
  border-top-right-radius: var(--r-lg);
  pointer-events:none;

  background:
    linear-gradient(90deg, rgba(200,161,43,.10), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.55), transparent);
  opacity: .55;
}

/* Points */
.product-points{
  margin-top: 10px;
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
}
.product-point{
  border: 1px solid rgba(0,0,0,.14);
  background: rgba(255,255,255,.80);
  border-radius: 999px;
  padding: 8px 10px;
  font-weight: 900;
  font-size: 13px;
  box-shadow: 0 1px 0 rgba(255,255,255,.65) inset;
}

/* Side card */
.product-card{
  border: 1px solid rgba(0,0,0,.12);
  border-radius: var(--r-lg);
  padding: 16px;

  background:
    radial-gradient(700px 240px at 18% 0%, rgba(200,161,43,.08), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.74));

  box-shadow:
    0 1px 0 rgba(255,255,255,.70) inset,
    0 12px 26px rgba(0,0,0,.10);
}

.mini-rows{
  margin-top: 12px;
  display:grid;
  gap: 8px;
}
.mini-row{
  display:grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: baseline;
  padding-top: 8px;
  border-top: 1px solid var(--hairline);
}
.mini-row:first-child{ border-top:0; padding-top:0; }
/* =========================================================
   ALIAS: map system-* styling onto existing service-* HTML
   (so cards become equal width + padding/typography matches)
   ========================================================= */

/* Grid */
.services-grid{
  display:grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin-top: 12px !important;
  align-items: stretch !important;
}
@media (max-width: 980px){
  .services-grid{ grid-template-columns: 1fr !important; }
}

/* Card */
.service-card{
  position: relative !important;
  overflow: hidden !important;

  border-radius: var(--r-xl) !important;
  padding: var(--pad-lg) !important;

  border: 1px solid color-mix(in srgb, var(--line) 70%, rgba(0,0,0,.10) 30%) !important;

  background:
    radial-gradient(900px 360px at 22% 0%,
      color-mix(in srgb, var(--gold) 28%, transparent) 0%,
      transparent 62%),
    linear-gradient(180deg, var(--paper-1), var(--paper-2)) !important;

  box-shadow:
    0 1px 0 rgba(255,255,255,.72) inset,
    0 14px 34px rgba(0,0,0,.10) !important;

  transition:
    transform var(--t-med),
    box-shadow var(--t-med),
    border-color var(--t-med) !important;
}

.service-card:hover{
  transform: translateY(-2px) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.72) inset,
    0 20px 46px rgba(0,0,0,.14) !important;
  border-color: color-mix(in srgb, var(--gold) 34%, rgba(0,0,0,.16) 66%) !important;
}

/* Finish band */
.service-card::before{
  content:"" !important;
  position:absolute !important;
  left:0; right:0; top:0 !important;
  height: 72px !important;
  pointer-events:none !important;
  border-top-left-radius: var(--r-xl) !important;
  border-top-right-radius: var(--r-xl) !important;

  background:
    linear-gradient(180deg, rgba(255,255,255,.60), transparent 70%),
    linear-gradient(115deg, rgba(200,161,43,.10), transparent 45%) !important;
  opacity: .48 !important;
}

/* Accent bar */
.service-card::after{
  content:"" !important;
  position:absolute !important;
  left:0; top:0; bottom:0 !important;
  width: 6px !important;
  border-top-left-radius: var(--r-xl) !important;
  border-bottom-left-radius: var(--r-xl) !important;
  background: rgba(200,161,43,.62) !important;
  opacity: .95 !important;
}

/* Variants */
.service-card.pkg-dais::after{ background: rgba(200,161,43,.70) !important; }
.service-card.pkg-janus::after{ background: color-mix(in srgb, var(--ink) 65%, var(--gold) 35%) !important; }
.service-card.pkg-hold::after{ background: color-mix(in srgb, var(--frame) 65%, var(--gold) 35%) !important; }

/* Header */
.service-head{
  display:flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 12px !important;
  flex-wrap: wrap !important;

  padding-bottom: 10px !important;
  margin-bottom: 12px !important;
  border-bottom: 1px solid var(--line-2) !important;
}

/* Titles */
.service-name{
  font-size: 19px !important;
  font-weight: 950 !important;
  letter-spacing: -0.02em !important;
}
.service-tag{
  font-size: 11px !important;
  font-weight: 950 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  opacity: .95 !important;
  color: color-mix(in srgb, var(--muted) 72%, var(--gold) 28%) !important;
}

/* Bands */
.service-body{ display:grid !important; gap:0 !important; }
.service-band{ padding: 14px 0 !important; }
.service-band + .service-band{ border-top: 1px solid var(--hairline) !important; }

/* Footer */
.service-footer{
  margin-top: 6px !important;
  padding-top: 14px !important;
  border-top: 1px solid var(--hairline) !important;
  display:grid !important;
  gap: 10px !important;
}
.service-row{ display:grid !important; gap: 6px !important; }

.service-label{
  font-size: 11px !important;
  font-weight: 950 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: color-mix(in srgb, var(--muted) 80%, var(--text) 20%) !important;
}
.service-text{
  margin: 0 !important;
  color: color-mix(in srgb, var(--muted) 88%, var(--text) 12%) !important;
  line-height: 1.58 !important;
}


/* =========================
   Brand-safe engine variants
   ========================= */

/* NOTE:
   This section assumes --paper-1 and --paper-2 exist earlier.
   If they don't, these variants will fall back badly. This section does NOT redefine them.
*/

/* DAIS — gold bloom on paper */
.system-card.pkg-dais{
  background:
    radial-gradient(900px 360px at 25% 0%, rgba(200,161,43,.14), transparent 62%),
    linear-gradient(180deg, var(--paper-1), var(--paper-2));
}
.system-card.pkg-dais::after{
  background: rgba(200,161,43,.70);
}

/* JANUS — ink bloom + restrained gold (no blue) */
.system-card.pkg-janus{
  background:
    radial-gradient(900px 360px at 25% 0%, rgba(15,14,13,.12), transparent 62%),
    radial-gradient(900px 360px at 40% 10%, rgba(200,161,43,.10), transparent 62%),
    linear-gradient(180deg, var(--paper-1), var(--paper-2));
}
.system-card.pkg-janus::after{
  background: linear-gradient(180deg, rgba(15,14,13,.70), rgba(200,161,43,.72));
}

/* HOLD — quiet (low bloom), still gold/ink only */
.system-card.pkg-hold{
  background:
    radial-gradient(900px 360px at 25% 0%, rgba(0,0,0,.06), transparent 62%),
    radial-gradient(900px 360px at 18% 0%, rgba(200,161,43,.08), transparent 62%),
    linear-gradient(180deg, var(--paper-1), var(--paper-2));
}
.system-card.pkg-hold::after{
  background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(200,161,43,.55));
}

/* Featured card
   Keep hover behavior from base .system-card:hover (avoid fighting it with permanent lift),
   but give a clear "selected" edge + steady lift that won't stack weirdly.
*/
.system-card.is-featured{
  border-color: rgba(200,161,43,.55);
  box-shadow:
    0 1px 0 rgba(255,255,255,.70) inset,
    0 18px 44px rgba(0,0,0,.14);
  transform: translateY(-2px);
}
@media (min-width: 981px){
  .system-card.is-featured{ transform: translateY(-6px); }
}

/* When featured is also hovered, keep the lift consistent (no sudden jump) */
.system-card.is-featured:hover{
  box-shadow:
    0 1px 0 rgba(255,255,255,.72) inset,
    0 22px 52px rgba(0,0,0,.16);
  border-color: rgba(200,161,43,.62);
}

/* Pin footer in grid cards */
.system-grid .system-card{
  display:flex;
  flex-direction:column;
  height:100%;
}
.system-grid .system-card .system-body{
  display:flex;
  flex-direction:column;
  flex:1;
}
.system-grid .system-card .system-footer{
  margin-top:auto;
}
/* =========================
   16) INSIGHTS (corrected + stable)
   ========================= */
.hero-boundary{
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--hairline);
  max-width: 78ch;
}

.insights-controls{
  margin-top: 14px;
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
}

/* ---- Filter chips ---- */
.chip{
  appearance:none;
  -webkit-appearance:none;

  border: 1px solid rgba(0,0,0,.14);
  background: rgba(255,255,255,.78);

  /* stable (no color-mix) */
  color: rgba(17,16,15,.86);

  border-radius: 999px;
  padding: 9px 12px;

  font: inherit;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .10em;
  text-transform: uppercase;

  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color: transparent;

  box-shadow: 0 1px 0 rgba(255,255,255,.70) inset;
  transition:
    transform var(--t-fast),
    background var(--t-fast),
    border-color var(--t-fast),
    box-shadow var(--t-fast),
    filter var(--t-fast);
}

.chip:hover{
  transform: translateY(-1px);
  border-color: rgba(200,161,43,.35);
  background: rgba(200,161,43,.10);
}

.chip.is-active{
  border-color: rgba(200,161,43,.70);
  background: rgba(200,161,43,.18);
  box-shadow:
    0 1px 0 rgba(255,255,255,.70) inset,
    0 10px 22px rgba(0,0,0,.10);
}

.chip:focus-visible{
  outline: 2px solid rgba(200,161,43,.70);
  outline-offset: 3px;
}

/* ---- Grid ---- */
.insights-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 12px;
  align-items: stretch;
}

/* ---- Card ---- */
.insight-card{
  overflow:hidden;
  text-decoration:none;
  color: inherit;

  display:grid;
  grid-template-rows: auto 1fr;

  /* stabilize surface so it doesn't inherit "dark section" text rules */
  border: 1px solid rgba(20,19,18,.16);
  border-radius: var(--r-lg);

  background:
    radial-gradient(900px 360px at 18% 0%, rgba(200,161,43,.08) 0%, transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.90), rgba(255,255,255,.76));

  box-shadow:
    0 1px 0 rgba(255,255,255,.70) inset,
    0 14px 34px rgba(0,0,0,.10);

  transition:
    transform var(--t-med),
    box-shadow var(--t-med),
    border-color var(--t-med);
}

.insight-card:hover{
  transform: translateY(-2px);
  border-color: rgba(200,161,43,.45);
  box-shadow:
    0 1px 0 rgba(255,255,255,.72) inset,
    0 20px 50px rgba(0,0,0,.14);
}

.insight-thumb{
  background: rgba(0,0,0,.04);
  aspect-ratio: 16 / 10;
  overflow:hidden;
}

.insight-thumb img{
  width:100%;
  height:100%;
  object-fit: cover;

  /* prevent small subpixel wobble */
  transform: scale(1.02);
  transform-origin: center;
  transition: transform .22s ease;
}

.insight-card:hover .insight-thumb img{
  transform: scale(1.06);
}

/* ---- Body ---- */
.insight-body{
  padding: 14px 16px 14px;
  display:grid;
  gap: 6px;

  /* stable text on light card */
  color: rgba(17,16,15,.86);
}

.insight-body .kicker{
  font-size:11px;
  letter-spacing:.18em;
  color: rgba(75,73,68,.82);
}

.insight-body .title{
  font-size:16px;
  font-weight:950;
  color: rgba(17,16,15,.96);
}

.insight-body .desc{
  margin:0;
  color: rgba(75,73,68,.92);
}

.insight-body .meta{
  margin-top:6px;
  font-size:14px;
  opacity:.78;
  color: rgba(75,73,68,.84);
}

@media (max-width: 980px){
  .insights-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px){
  .insights-grid{ grid-template-columns: 1fr; }
}
/* =========================
   17) FORMS (corrected + stable)
   ========================= */
.form{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-width: 640px;
  margin-top: 12px;

  /* form is a light surface: lock readable text */
  color: rgba(17,16,15,.86);
}

.form label{
  display:flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;

  /* label text readable on light surface */
  color: rgba(17,16,15,.86);
}

/* Optional helper if you use a small label line */
.form .service-label,
.form .label,
.form .hint{
  color: rgba(17,16,15,.70);
}

.form input,
.form textarea,
.form select{
  width:100%;
  font: inherit;

  padding: 12px;
  border: 1px solid rgba(0,0,0,.16);
  border-radius: 12px;
  outline:none;

  background: var(--sheet);
  color: rgba(17,16,15,.92);

  /* remove iOS glow/weirdness */
  -webkit-appearance: none;
  appearance: none;

  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}

.form textarea{
  min-height: 132px;
  resize: vertical;
}

.form input::placeholder,
.form textarea::placeholder{
  color: rgba(17,16,15,.45);
}

/* Focus: remove color-mix dependency, keep the same visual intent */
.form input:focus,
.form textarea:focus,
.form select:focus{
  border-color: rgba(200,161,43,.85);
  box-shadow: 0 0 0 3px rgba(200,161,43,.22);
}

/* Disabled */
.form input:disabled,
.form textarea:disabled,
.form select:disabled{
  opacity: .65;
  cursor: not-allowed;
  background: rgba(255,255,255,.70);
}

/* Layout helpers */
.form .span-2{ grid-column: 1 / -1; }

.form .form-actions{
  grid-column: 1 / -1;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
}

/* If you have button(s) inside the form, keep them consistent */
.form .btn{
  height: 46px; /* matches your global buttons */
}

/* Mobile collapse */
@media (max-width: 700px){
  .form{ grid-template-columns: 1fr; }
}

/* =========================
   18) FOOTER (corrected + stable)
   - removes color-mix dependency
   - footer is a LIGHT surface (your page/card system), so lock dark text
   ========================= */

.site-footer{
  margin-top: 18px;
  padding: 26px 0 10px;
  font-size: 13px;

  /* light-surface text contract */
  color: rgba(17,16,15,.72);

  border-top: 1px solid var(--hairline);
}

.footer-grid{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 18px;
  padding: 18px 0 4px;
}

.footer-brand{ padding-right: 10px; }

.footer-name{
  font-size: 14px;
  font-weight: 950;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(17,16,15,.90);
}

.footer-muted{
  margin: 10px 0 0;
  max-width: 52ch;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(17,16,15,.66);
}

.footer-mini{
  margin-top: 12px;
  font-size: 13px;
  color: rgba(17,16,15,.62);
}

.footer-head{
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 10px;
  color: rgba(17,16,15,.74);
}

.footer-col{
  display:grid;
  align-content:start;
}

.footer-link{
  display:inline-block;
  text-decoration:none;

  padding: 8px 10px;
  margin: 2px 0;
  border-radius: 10px;

  border: 1px solid transparent;
  color: rgba(17,16,15,.82);

  transition:
    background var(--t-fast),
    border-color var(--t-fast),
    transform var(--t-fast);
}

.footer-link:hover{
  background: rgba(200,161,43,.10);
  border-color: rgba(200,161,43,.25);
  transform: translateY(-1px);
}

/* Optional: keyboard focus that matches your gold system */
.footer-link:focus-visible{
  outline: 2px solid rgba(200,161,43,.70);
  outline-offset: 2px;
}

@media (max-width: 980px){
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 700px){
  .footer-grid{ grid-template-columns: 1fr; }
  .footer-brand{ padding-right: 0; }
}

/* =========================
   19) MOBILE / RESPONSIVE (corrected + hardened)
   - no rewrites of your system
   - fixes common “drawer won’t click / overlay missing / scroll bleed”
   - adds missing backdrop + safe-area padding
   ========================= */

/* ===== 19A) <= 900px layout switches ===== */
@media (max-width: 900px){
  body{ padding-right: 0; }
  body::after{ display:none; }

  .topbar{ width: calc(100% - (var(--edge) * 2)); }

  /* Hide fixed desktop rail */
  .right-rail{ display:none; }

  /* Drawer trigger */
  .rail-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.92);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    cursor:pointer;
    touch-action: manipulation;
  }

  .rail-toggle-bars{ display:block; width:18px; height:12px; position:relative; }
  .rail-toggle-bars::before,
  .rail-toggle-bars::after,
  .rail-toggle-bars span{
    content:"";
    position:absolute;
    left:0; right:0;
    height:2px;
    border-radius:2px;
    background: rgba(255,255,255,.86);
  }
  .rail-toggle-bars::before{ top:0; }
  .rail-toggle-bars span{ top:5px; }
  .rail-toggle-bars::after{ bottom:0; }

  .page{
    width: calc(100% - (var(--edge) * 2));
    margin-left: var(--edge);
    margin-right: var(--edge);
  }
}

/* ===== 19B) Drawer shell ===== */
.rail-drawer{
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  justify-content: end;
  pointer-events: none;
}

/* IMPORTANT: backdrop element (must exist in HTML as .rail-overlay) */
.rail-overlay{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.46);
  opacity:0;
  transition: opacity .22s ease;
  pointer-events:none;
}

body.rail-open .rail-drawer{ pointer-events: auto; }
body.rail-open .rail-overlay{
  opacity:1;
  pointer-events:auto;
}

/* Prevent page scroll behind the drawer */
body.rail-open{
  overflow:hidden;
  /* on iOS this helps too */
  touch-action: none;
}

/* ===== 19C) Drawer card ===== */
.rail-card{
  height: 100vh;
  width: min(420px, 92vw);
  background: var(--sheet);
  border-left: 1px solid rgba(0,0,0,.18);
  box-shadow: -18px 0 40px rgba(0,0,0,.18);
  transform: translateX(102%);
  transition: transform .22s ease;
  display: grid;
  grid-template-rows: auto 1fr auto;
  position: relative;
  z-index: 1;
  /* safe areas */
  padding-bottom: env(safe-area-inset-bottom);
}

body.rail-open .rail-card{ transform: translateX(0); }

/* Header */
.rail-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px;
  border-bottom: 1px solid rgba(0,0,0,.12);
}

.rail-title{
  font-weight: 800;
  letter-spacing: .02em;
  color: rgba(17,16,15,.88);
}

.rail-x{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.18);
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
}

.rail-x:focus-visible{
  outline: 2px solid rgba(200,161,43,.70);
  outline-offset: 2px;
}

/* Scrollable nav body */
.rail-body{
  padding: 14px 10px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.rail-link{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 12px;
  border-radius: 14px;
  text-decoration: none;
  color: var(--text);
}

.rail-link:hover{ background: rgba(0,0,0,.05); }
.rail-link:focus-visible{
  outline: 2px solid rgba(200,161,43,.55);
  outline-offset: 2px;
}

/* Footer CTA */
.rail-foot{
  padding: 14px 16px;
  border-top: 1px solid rgba(0,0,0,.12);
}

.rail-cta{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 14px;
  border-radius: 14px;
  text-decoration: none;
  background: var(--ink);
  color: white;
  font-weight: 800;
}

.rail-cta:focus-visible{
  outline: 2px solid rgba(200,161,43,.70);
  outline-offset: 2px;
}

/* ===== 19D) <= 700px refinements ===== */
@media (max-width: 700px){
  :root{ --edge: 12px; --stack-gap: 14px; }

  .page{ padding: 18px 16px; }
  .topbar{ padding: 12px 14px; }

  section{ padding: 54px 0; }
  .grid, .grid-2, .grid-3{ grid-template-columns: 1fr; }

  .hero-panel{ padding: 20px 16px 18px; border-radius: var(--r-lg); }
  .hero-panel::before{ border-radius: var(--r-lg); }
  .hero-panel::after{
    height: 64px;
    border-top-left-radius: var(--r-lg);
    border-top-right-radius: var(--r-lg);
  }

  .hero-actions{
    display:grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .btn{ width:100%; justify-content:center; }

  .how-strip{ grid-template-columns: 1fr; }
  .card{ min-height:0; }

  /* keep your continuation below as-is */
}
/* =========================
   20) RAIL DRAWER (mobile)
   ========================= */

/* Overlay (fixed on top of the page when the drawer is open) */
.rail-overlay {
  position: fixed;
  inset: 0;
  z-index: 4990; /* Ensure it's above content */
  background: rgba(0, 0, 0, .42);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}

body.rail-open .rail-overlay {
  opacity: 1;
  pointer-events: auto;
}

/* Drawer container */
.rail-drawer {
  position: fixed;
  inset: 0;
  z-index: 5000; /* Ensure it’s above overlay */
  display: grid;
  justify-content: end;
  pointer-events: none;
  transition: transform .22s ease;
}

/* Slide panel that holds the navigation */
.rail-card {
  position: relative;
  height: 100vh;
  width: min(420px, 92vw);
  background: var(--sheet);
  border-left: 1px solid rgba(0,0,0,.12);
  box-shadow: -18px 0 40px rgba(0,0,0,.18);
  transform: translateX(102%);
  transition: transform .22s ease;
  display: grid;
  grid-template-rows: auto 1fr auto;
  pointer-events: auto;
}

body.rail-open .rail-card {
  transform: translateX(0);
}

/* Header inside the rail drawer */
.rail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid rgba(0,0,0,.12);
}

.rail-title {
  font-weight: 800;
  letter-spacing: .02em;
  color: rgba(17,16,15,.88);
}

.rail-x {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.18);
  background: transparent;
  cursor: pointer;
}

/* Close button focus */
.rail-x:focus-visible {
  outline: 2px solid rgba(200,161,43,.70);
  outline-offset: 2px;
}

/* Nav body with scrollable content */
.rail-body {
  padding: 14px 10px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* Links inside the drawer */
.rail-link {
  display: block;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.78);
  text-decoration: none;
  font-weight: 950;
}

.rail-link:hover {
  background: rgba(200,161,43,.10);
  border-color: rgba(200,161,43,.35);
}

.rail-link:focus-visible {
  outline: 2px solid rgba(200,161,43,.55);
  outline-offset: 2px;
}

/* Footer panel */
.rail-foot {
  padding: 14px 16px;
  border-top: 1px solid rgba(0,0,0,.12);
}

.rail-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 14px;
  border-radius: 14px;
  text-decoration: none;
  font-weight: 950;
  background: rgba(200,161,43,.16);
  border: 1px solid rgba(200,161,43,.55);
}

.rail-cta:focus-visible {
  outline: 2px solid rgba(200,161,43,.70);
  outline-offset: 2px;
}

/* ===== Mobile Styles: Ensure things work on smaller screens ===== */
@media (max-width: 700px) {
  /* Ensure spacing between elements is tighter */
  .rail-card {
    width: min(410px, 94vw);
  }

  .rail-body {
    padding: 12px;
  }

  .rail-link {
    padding: 12px;
    font-size: 1rem;
  }

  .rail-cta {
    padding: 12px 14px;
    font-size: .92rem;
  }
}
/* =========================
   22) FLOATING CTA (mobile only)
   ========================= */
.cta-float{
  position: fixed;
  left: 50%;
  bottom: calc(14px + env(safe-area-inset-bottom));
  transform: translateX(-50%) translateY(10px); /* CLOSED: sit slightly lower */
  z-index: 2500;

  height: 52px;
  padding: 0 18px;
  border-radius: 999px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  text-decoration:none;
  font-weight: 950;
  letter-spacing:.02em;
  color: var(--ink);

  background:
    radial-gradient(520px 220px at 30% 20%, rgba(200,161,43,.30) 0%, transparent 58%),
    linear-gradient(180deg, rgba(200,161,43,.26), rgba(200,161,43,.10));
  border: 1px solid rgba(200,161,43,.92);
  box-shadow: 0 18px 44px rgba(0,0,0,.22), 0 1px 0 rgba(255,255,255,.70) inset;

  opacity: 0;
  pointer-events:none;

  transition: opacity var(--t-fast), transform var(--t-fast);

  /* mobile tap quality */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

body.show-float-cta .cta-float{
  opacity: 1;
  pointer-events:auto;
  transform: translateX(-50%) translateY(0);
}

@media (min-width: 901px){
  .cta-float{ display:none; }
}

/* =========================
   CTA DOCK (DESKTOP only)
   Bottom-right fixed button
   ========================= */
.cta-dock{
  position: fixed;
  right: calc(var(--edge) + env(safe-area-inset-right));
  bottom: calc(var(--edge) + env(safe-area-inset-bottom));
  z-index: 4000;

  display: inline-flex;
  align-items: center;
  gap: 10px;

  height: 54px;
  padding: 0 16px;

  border-radius: 16px;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;

  border: 1px solid rgba(200,161,43,.42);
  background:
    radial-gradient(140% 140% at 20% 20%, rgba(200,161,43,.18), transparent 58%),
    linear-gradient(180deg, rgba(17,16,15,.95), rgba(12,11,10,.98));

  box-shadow:
    0 1px 0 rgba(255,255,255,.08) inset,
    0 18px 42px rgba(0,0,0,.22);

  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease, filter .14s ease;
}

/* Never let dock intercept clicks when drawer is open */
body.rail-open .cta-dock{ pointer-events:none; }

.cta-dock:hover{
  transform: translateY(-1px);
  border-color: rgba(200,161,43,.70);
  box-shadow:
    0 1px 0 rgba(255,255,255,.10) inset,
    0 22px 52px rgba(0,0,0,.26);
  filter: saturate(1.06);
}

.cta-dock:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 3px rgba(200,161,43,.26),
    0 22px 52px rgba(0,0,0,.26),
    inset 0 1px 0 rgba(255,255,255,.10);
}

.cta-dock__label{
  font-weight: 950;
  letter-spacing: .10em;
  text-transform: uppercase;
  font-size: 11px;
  color: rgba(255,255,255,.92);
}

.cta-dock__arrow{
  font-weight: 900;
  color: rgba(255,255,255,.82);
  transform: translateY(-1px);
}

/* Desktop-only: hide dock on mobile */
@media (max-width: 900px){
  .cta-dock{ display:none; }
}

/* Mobile comfort (only relevant if you ever show it on mobile later) */
@media (max-width: 700px){
  .cta-dock{
    height: 48px;
    padding: 0 14px;
    border-radius: 14px;
  }
}

/* =========================
   TOP RAIL (matches current index.html markup)
   ========================= */

/* topbar strip */
.topbar{
  width: min(var(--max), calc(100% - (var(--edge) * 2)));
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 12px;
}

/* if any legacy nav UI exists, hide it */
.site-nav,
.topbar .nav-link,
.nav-dd,
.nav-dd-menu,
.nav-dd-btn{ display:none !important; }

.topbar-rail{
  width: 100%;
  display:flex;
  align-items:center;
  gap: 12px;
}

/* 1) Dash button (your #railToggle) */
.topbar-dash{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.topbar-dash::before{
  content:"";
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: rgba(255,255,255,.78);
}

/* 2) Brand chip */
.topbar-brand{
  display:inline-flex;
  align-items:center;
  text-decoration:none;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset;
}
.topbar-brand__name{
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(255,255,255,.92);
}

/* 3) Center box (your label · dot · sub) */
.topbar-box{
  flex: 1;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(140% 140% at 18% 20%, rgba(200,161,43,.14), transparent 58%),
    linear-gradient(180deg, rgba(17,16,15,.92), rgba(12,11,10,.96));
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset;
  display:flex;
  align-items:center;
  padding: 0 14px;
  gap: 10px;
  overflow:hidden;
  min-width: 0;
}
.topbar-box__label{
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 11px;
  color: rgba(255,255,255,.92);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar-box__dot{
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: rgba(200,161,43,.92);
  flex: 0 0 auto;
}
.topbar-box__sub{
  font-weight: 800;
  letter-spacing: .10em;
  text-transform: uppercase;
  font-size: 10px;
  color: rgba(255,255,255,.72);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* 4) Top CTA */
.cta-run-top{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  height: 44px;
  padding: 0 14px;
  border-radius: 14px;
  text-decoration:none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;

  border: 1px solid rgba(200,161,43,.42);
  background:
    radial-gradient(140% 140% at 20% 20%, rgba(200,161,43,.18), transparent 58%),
    linear-gradient(180deg, rgba(17,16,15,.95), rgba(12,11,10,.98));
  box-shadow:
    0 1px 0 rgba(255,255,255,.08) inset,
    0 18px 42px rgba(0,0,0,.20);
}
.cta-run-top__label{
  font-weight: 950;
  letter-spacing: .10em;
  text-transform: uppercase;
  font-size: 11px;
  color: rgba(255,255,255,.92);
}
.cta-run-top__arrow{
  font-weight: 900;
  color: rgba(255,255,255,.82);
}

/* =========================================================
   Pattern & Edge — overrides.css (CLEAN, SINGLE-LAYER)
   Goals:
   - premium bronze primary, glass secondary, true ghost
   - no global text nukes
   - surface-aware text only where needed
   - rail drawer + topbar remain readable and clickable
   Keep this file LAST in <head>
   ========================================================= */

/* =========================
   1) TOKEN STABILIZER (minimal)
   ========================= */
:root{
  --ink:  #0F0E0D;
  --text: #11100F;
  --muted:#4B4944;

  --gold:   #C8A12B;
  --gold-2: #A88433;

  /* CTA gold (slightly deeper so white text holds if needed) */
  --cta-gold:   #A88433;
  --cta-gold-2: #8F6F2B;
}

/* =========================
   2) HERO BADGES / PILLS
   (your HTML uses .badge, not .pill)
   ========================= */
.badge{
  border-radius: 999px;
  padding: 7px 11px;

  background:
    radial-gradient(220px 120px at 18% 20%, rgba(200,161,43,.12), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.70), rgba(255,255,255,.48));
  border: 1px solid rgba(0,0,0,.14);
  box-shadow:
    0 1px 0 rgba(255,255,255,.70) inset,
    0 10px 22px rgba(0,0,0,.08);

  color: color-mix(in srgb, var(--text) 84%, var(--muted) 16%);
  font-weight: 900;
  letter-spacing: .04em;
}

.badge:hover{
  transform: translateY(-1px);
  border-color: rgba(200,161,43,.35);
  background:
    radial-gradient(220px 120px at 18% 20%, rgba(200,161,43,.18), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.54));
}

/* Keep insights filter chips readable (they are light pills) */
.chip{
  color: rgba(17,16,15,.90);
}

/* Flow chips (Outputs are bounded) are light pills -> dark text */
.flow-chip,
.flow-chip .mono{
  color: rgba(17,16,15,.92);
}

/* =========================
   3) BUTTON TIERS (stable)
   ========================= */
.btn{ border-radius: 14px; }

/* Primary = bronze (dark text, premium) */
.btn.primary{
  background:
    radial-gradient(520px 220px at 30% 20%, rgba(200,161,43,.30) 0%, transparent 58%),
    linear-gradient(180deg, rgba(200,161,43,.26), rgba(200,161,43,.10));
  border-color: rgba(200,161,43,.92);
  color: var(--ink);
}

/* Secondary = glass */
.btn.secondary{
  background:
    radial-gradient(520px 220px at 30% 20%, rgba(200,161,43,.10) 0%, transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.10));
  border: 1px solid rgba(0,0,0,.16);
  color: color-mix(in srgb, var(--text) 86%, var(--muted) 14%);
  box-shadow: 0 1px 0 rgba(255,255,255,.55) inset;
}
.btn.secondary:hover{
  border-color: rgba(200,161,43,.45);
  transform: translateY(-1px);
}

/* Ghost = true ghost */
.btn.ghost{
  background: transparent;
  border: 1px solid rgba(0,0,0,.16);
  color: color-mix(in srgb, var(--text) 80%, var(--muted) 20%);
}
.btn.ghost:hover{
  background: rgba(0,0,0,.04);
  border-color: rgba(0,0,0,.20);
}

/* Tertiary = "Request" color (you currently use .btn.tertiary for Request) */
:root{
  --req-1: #2C5EA8;
  --req-2: #214B86;
}
.btn.tertiary{
  background: linear-gradient(180deg, var(--req-1), var(--req-2));
  border: 1px solid rgba(0,0,0,.35);
  color: rgba(255,255,255,.96);
  box-shadow:
    0 1px 0 rgba(255,255,255,.14) inset,
    0 16px 34px rgba(0,0,0,.22);
}
.btn.tertiary:hover{ filter: brightness(1.06) saturate(1.04); }

/* =========================
   4) TOP RAIL CTA (keep it dark-premium)
   ========================= */
.cta-run-top{
  border: 1px solid rgba(200,161,43,.42);
  background:
    radial-gradient(140% 140% at 20% 20%, rgba(200,161,43,.18), transparent 58%),
    linear-gradient(180deg, rgba(17,16,15,.95), rgba(12,11,10,.98));
}
.cta-run-top__label,
.cta-run-top__arrow{
  color: rgba(255,255,255,.92);
}

/* =========================
   5) SURFACE-AWARE TEXT (surgical, no global nukes)
   Your service cards + insight cards are light surfaces in your CSS,
   so enforce dark text INSIDE THEM only.
   ========================= */
.service-card,
.service-card *{
  color: inherit;
}
.service-card{
  color: rgba(17,16,15,.86);
}
.service-card .service-name,
.service-card .service-tag,
.service-card .service-label{
  color: rgba(17,16,15,.92);
}
.service-card .service-text{
  color: rgba(17,16,15,.62);
}

/* Insights cards are light surfaces -> dark text inside */
.insight-card{
  color: rgba(17,16,15,.86);
}
.insight-card .title,
.insight-card .kicker,
.insight-card .meta{
  color: rgba(17,16,15,.92);
}
.insight-card .desc{
  color: rgba(17,16,15,.62);
}

/* Form is a light surface in your current styles -> dark text inside */
.form{
  color: rgba(17,16,15,.86);
}
.form .service-label{ color: rgba(17,16,15,.92); }
.form input,
.form textarea,
.form select{
  color: rgba(17,16,15,.92);
}
.form input::placeholder,
.form textarea::placeholder{
  color: rgba(17,16,15,.45);
}

/* =========================
   6) FOOTER polish (keep yours, lighter touch)
   ========================= */
.site-footer{
  padding: 34px 26px 38px;
  margin-top: 26px;
  border-radius: 18px;
}
.footer-grid{
  grid-template-columns: 1.2fr .9fr .9fr .8fr;
  gap: 26px;
}
@media (max-width: 980px){
  .footer-grid{ grid-template-columns: 1fr 1fr; gap: 18px; }
}
@media (max-width: 640px){
  .site-footer{ padding: 26px 18px 30px; }
  .footer-grid{ grid-template-columns: 1fr; gap: 16px; }
}

/* =========================
   7) NAV "color blocks" (safe, no nth-of-type traps)
   Use explicit selectors by href (matches your HTML)
   ========================= */

/* Base pill feel for drawer links */
.rail-link{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
}
.rail-link:hover{
  border-color: rgba(200,161,43,.55);
  background: rgba(255,255,255,.10);
}

/* Drawer pills by destination */
.rail-body .rail-link[href="index.html"]{
  background: linear-gradient(180deg, rgba(59,70,84,.92), rgba(59,70,84,.70));
}
.rail-body .rail-link[href="system.html"]{
  background: linear-gradient(180deg, rgba(47,78,124,.92), rgba(47,78,124,.70));
}
.rail-body .rail-link[href="insights.html"]{
  background: linear-gradient(180deg, rgba(63,58,116,.92), rgba(63,58,116,.70));
}
.rail-body .rail-link[href="request.html"]{
  background: linear-gradient(180deg, rgba(46,94,87,.92), rgba(46,94,87,.70));
}

/* Rail CTA stays gold */
.rail-cta{
  background: linear-gradient(180deg, var(--cta-gold), var(--cta-gold-2));
  border: 1px solid rgba(0,0,0,.45);
  color: rgba(255,255,255,.94);
}
/* =========================================================
   RESTORE — GUTTER / PAGE CARD / LINES / BRAND CHIP
   (safe: no global * color bombs)
   ========================================================= */

/* 1) White perimeter + centered inner page card (your “dimensions”) */
html, body{
  background: var(--sheet) !important; /* white perimeter */
}

body{
  padding: clamp(14px, 2.2vw, 28px) !important; /* visible gutter */
}

/* Inner page card stays your dark frame */
.page{
  width: min(var(--max, 1100px), 100%) !important;
  margin: 0 auto !important;
  background: var(--frame-3, #1C1F23) !important;
  border: 1px solid var(--blk-outline, rgba(0,0,0,.55)) !important; /* restore lines */
  border-radius: 18px !important;
  overflow: hidden !important;
}

/* Keep topbar aligned to the page card */
.topbar{
  width: min(var(--max, 1100px), 100%) !important;
  margin: 0 auto !important;
  border-radius: 18px !important;
  overflow: hidden !important;
}

/* Small screens: tighter gutter */
@media (max-width: 720px){
  body{ padding: 10px !important; }
  .page, .topbar{ border-radius: 14px !important; }
}

/* 2) Restore crisp outlines on key blocks (your “lines”) */
:where(
  .hero-panel,
  .notice,
  .section-head,
  .how-strip,
  .stack-strip,
  .service-card,
  .insight-card,
  .form,
  .site-footer
){
  border: 1px solid var(--blk-outline, rgba(0,0,0,.55)) !important;
}

/* Slightly softer for smaller heads/notes if desired */
:where(.section-head, .notice){
  border-color: var(--blk-outline-soft, rgba(0,0,0,.32)) !important;
}

/* 3) Restore “Pattern & Edge” brand chip color (top button) */
.topbar-brand{
  border: 1px solid rgba(200,161,43,.45) !important;
  background:
    radial-gradient(140% 140% at 18% 20%, rgba(200,161,43,.22), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05)) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.10) inset,
    0 14px 34px rgba(0,0,0,.18) !important;
}

.topbar-brand__name{
  color: rgba(255,255,255,.94) !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.55) !important;
}

/* 4) Keep top CTA “Run a Decision” looking premium (dark/bronze edge) */
.cta-run-top{
  border-color: rgba(200,161,43,.42) !important;
  background:
    radial-gradient(140% 140% at 20% 20%, rgba(200,161,43,.18), transparent 58%),
    linear-gradient(180deg, rgba(17,16,15,.95), rgba(12,11,10,.98)) !important;
}
.cta-run-top__label,
.cta-run-top__arrow{
  color: rgba(255,255,255,.92) !important;
}

/* 5) Restore the “breathing room” you liked (dimensions/padding) */
:root{ --blk-gap: 14px; }

.page{
  padding: calc(30px + var(--blk-gap)) calc(32px + var(--blk-gap)) !important;
}

section{
  padding: calc(58px + var(--blk-gap)) 0 !important;
}
/* =========================================================
   FINAL LAYER LOCK (ONLY ONE PATCH)
   Put this at the VERY BOTTOM of styles.css
   ========================================================= */

/* Outer gutter */
html, body{
  background: linear-gradient(180deg, #F6F5F2 0%, #F1EFEB 100%) !important;
}

/* Gutter space */
body{
  padding: clamp(14px, 2.2vw, 28px) !important;
}

/* Inner page card */
.page{
  width: min(var(--max, 1100px), 100%) !important;
  margin: 0 auto !important;
  border-radius: 18px !important;
  overflow: hidden !important;

  background: linear-gradient(180deg, #3A3D41 0%, #2F3236 100%) !important;
  border: 1px solid rgba(0,0,0,.22) !important;

  box-shadow:
    0 34px 90px rgba(0,0,0,.28),
    0 10px 26px rgba(0,0,0,.16),
    0 1px 0 rgba(255,255,255,.10) inset !important;
}

/* Default text on gray surfaces */
.page{ color: rgba(255,255,255,.90) !important; }
.page .muted, .page .desc, .page .meta{ color: rgba(255,255,255,.70) !important; }

/* Blocks inside page: slightly lighter gray (NOT white) */
:where(.hero-panel,.section-head,.notice,.how-strip,.stack-strip,.panel,.service-card,.product-inner,.product-card,.insight-card,.form){
  background:
    radial-gradient(900px 420px at 18% 0%, rgba(200,161,43,.10), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.06)) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}

/* Footer styled separately (safer) */
.site-footer{
  background:
    radial-gradient(900px 420px at 18% 0%, rgba(200,161,43,.10), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.06)) !important;
  border-top: 1px solid rgba(255,255,255,.10) !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
}

/* Topbar aligns to page and stays dark */
.topbar{
  width: min(var(--max, 1100px), 100%) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  border-radius: 18px !important;

  background:
    radial-gradient(900px 320px at 18% 0%, rgba(200,161,43,.12) 0%, transparent 62%),
    linear-gradient(180deg, rgba(27,29,31,.94) 0%, rgba(16,16,16,.94) 100%) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
}

/* Restore the long black “system” block */
.topbar-box{
  background:
    radial-gradient(140% 140% at 18% 20%, rgba(200,161,43,.18), transparent 58%),
    linear-gradient(180deg, rgba(12,11,10,.96), rgba(8,7,6,.98)) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
}

/* Run a Decision stays bronze */
.cta-run-top{
  background: linear-gradient(180deg, rgba(200,161,43,.98), rgba(168,132,51,.96)) !important;
  border: 1px solid rgba(0,0,0,.45) !important;
  color: rgba(17,16,15,.92) !important;
}
.cta-run-top__label, .cta-run-top__arrow{ color: rgba(17,16,15,.92) !important; }

@media (max-width: 720px){
  body{ padding: 10px !important; }
  .page, .topbar{ border-radius: 14px !important; }
}
/* =========================================================
   PATCH — PREMIUM PERIMETER + GRAY PAGE CARD + BRAND CHIP
   Paste at the VERY BOTTOM of overrides.css
   ========================================================= */

:root{
  /* Premium perimeter (off-white with finish, not flat white) */
  --gutter-1: #F6F5F2;
  --gutter-2: #EFEDE7;

  /* Page card gray (restore tone) */
  --page-1: #3A3D41;
  --page-2: #2F3236;

  /* Topbar deep (keeps rail readable) */
  --topbar-1: rgba(27,29,31,.94);
  --topbar-2: rgba(16,16,16,.94);

  /* Soft “finish” highlight */
  --sheen: rgba(255,255,255,.55);
}

/* 1) PERIMETER = premium off-white with a subtle finish */
html, body{
  background: linear-gradient(180deg, var(--gutter-1) 0%, var(--gutter-2) 100%) !important;
}
body{
  padding: clamp(14px, 2.2vw, 28px) !important; /* visible perimeter */
  /* subtle sheen so it feels coated, not matte */
  background-image:
    radial-gradient(900px 520px at 50% 0%, rgba(255,255,255,.70) 0%, transparent 60%),
    radial-gradient(1200px 800px at 50% 18%, rgba(200,161,43,.08) 0%, transparent 62%),
    linear-gradient(180deg, var(--gutter-1) 0%, var(--gutter-2) 100%) !important;
  background-attachment: fixed !important;
}

/* 2) INNER PAGE CARD = restore gray tone */
.page{
  width: min(var(--max, 1100px), 100%) !important;
  margin: 0 auto !important;
  border-radius: 18px !important;
  overflow: hidden !important;

  background: linear-gradient(180deg, var(--page-1) 0%, var(--page-2) 100%) !important;
  border: 1px solid rgba(0,0,0,.22) !important;

  box-shadow:
    0 34px 90px rgba(0,0,0,.28),
    0 10px 26px rgba(0,0,0,.16),
    0 1px 0 rgba(255,255,255,.10) inset !important;

  /* default text on gray */
  color: rgba(255,255,255,.90) !important;
}
.page .muted, .page .desc, .page .meta{
  color: rgba(255,255,255,.70) !important;
}

/* 3) TOPBAR stays dark + aligns to the page card */
.topbar{
  width: min(var(--max, 1100px), 100%) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  border-radius: 18px !important;

  background:
    radial-gradient(900px 320px at 18% 0%, rgba(200,161,43,.12) 0%, transparent 62%),
    linear-gradient(180deg, var(--topbar-1) 0%, var(--topbar-2) 100%) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
}

/* 4) RESTORE “Pattern & Edge” brand chip as a distinct block */
.topbar-brand{
  border: 1px solid rgba(200,161,43,.45) !important;
  background:
    radial-gradient(140% 140% at 18% 20%, rgba(200,161,43,.22), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05)) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.10) inset,
    0 14px 34px rgba(0,0,0,.18) !important;
}
.topbar-brand__name{
  color: rgba(255,255,255,.94) !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.55) !important;
}

/* 5) Keep interior blocks “glass on charcoal” (subtle, not whiteout) */
:where(.hero-panel,.section-head,.notice,.how-strip,.stack-strip,.panel,.product-inner,.product-card,.site-footer){
  background:
    radial-gradient(900px 420px at 18% 0%, rgba(200,161,43,.10), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.06)) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}

/* 6) Mobile radii */
@media (max-width: 720px){
  body{ padding: 10px !important; }
  .page, .topbar{ border-radius: 14px !important; }
}
/* HERO: white text, but don’t blanket-select everything */
.hero{
  color: #fff;
}

.hero h1,
.hero h2,
.hero h3,
.hero h4,
.hero h5,
.hero h6{
  color: #fff;
}

.hero p,
.hero li,
.hero small,
.hero .muted,
.hero .subhead{
  color: rgba(255,255,255,.78);
}

.hero a{
  color: rgba(255,255,255,.92);
}
.hero a:hover{
  color: #fff;
}
.hero, .hero * { color: #fff !important; }
.hero p, .hero .muted { color: rgba(255,255,255,.78) !important; }
/* =========================================================
   HERO TEXT = WHITE (correct selector)
   Paste at VERY BOTTOM of overrides.css
   ========================================================= */

.hero-panel{
  color: rgba(255,255,255,.94) !important;
}

.hero
/* =========================================================
   HERO TYPE OVERRIDE — force white (only hero text)
   ========================================================= */

.hero-panel .hero-title{
  color: rgba(255,255,255,.98) !important;
}

.hero-panel .hero-thesis{
  color: rgba(255,255,255,.92) !important;
}

.hero-panel .hero-kicker,
.hero-panel .hero-tagline{
  color: rgba(255,255,255,.78) !important;
}
/* HERO: force the main headline (and any spans inside it) to white */
.hero-panel h1,
.hero-panel h1 * ,
.hero-panel h2,
.hero-panel h2 *{
  color: rgba(255,255,255,.98) !important;
}
/* =========================================================
   GLOBAL: Any pill/button that isn't a LIGHT surface => WHITE TEXT
   Exceptions:
   - light pills: .badge, .chip, .flow-chip stay dark text
   - bronze primary: .btn.primary stays dark text
   ========================================================= */

/* ---------- BUTTONS ---------- */
/* Default all buttons to white type */
.btn{
  color: rgba(255,255,255,.92) !important;
}
.btn *{
  color: inherit !important;
}

/* Exception: bronze primary uses dark type */
.btn.primary{
  color: var(--ink) !important;
}
.btn.primary *{
  color: inherit !important;
}

/* Keep your blue request white (already true, but explicit) */
.btn.tertiary{
  color: rgba(255,255,255,.96) !important;
}
.btn.tertiary *{
  color: inherit !important;
}

/* If you ever have a truly light button variant, add it here to keep dark text:
.btn.light{ color: rgba(17,16,15,.92) !important; }
*/


/* ---------- PILLS ---------- */
/* Default “pills” to white type */
:where(.pill, .note, .notice, .rules, .rules-pill, .rules-box, .rule, .rule-pill){
  color: rgba(255,255,255,.88) !important;
}
:where(.pill, .note, .notice, .rules, .rules-pill, .rules-box, .rule, .rule-pill) *{
  color: inherit !important;
}

/* Exception: LIGHT pills stay dark text (these are your white/cream chips) */
.badge,
.chip,
.flow-chip,
.flow-chip .mono{
  color: rgba(17,16,15,.92) !important;
}
.badge *,
.chip *,
.flow-chip *,
.flow-chip .mono *{
  color: inherit !important;
}
/* =========================================================
   HARD FIX: any CTA / nav / chip / link label inside the dark page = white
   (catches cases where it's not .btn or .pill)
   ========================================================= */

.page :where(
  a,
  button,
  .cta,
  .cta *,
  .rail-link,
  .rail-link *,
  .nav a,
  .nav a *,
  .menu a,
  .menu a *,
  .topbar a,
  .topbar a *,
  .rail-cta,
  .rail-cta *,
  .link,
  .link *
){
  color: rgba(255,255,255,.92) !important;
}
/* =========================================================
   FORCE WHITE: all "clickable UI" text on dark surfaces
   + handles SVG (fill/stroke) too
   ========================================================= */

/* 1) Make common clickable containers white even if they're div/span-based */
.page :where(
  a, button,
  [role="button"],
  [role="link"],
  .btn,
  .cta, .cta *,
  .rail-link, .rail-link *,
  .rail-cta, .rail-cta *,
  .topbar a, .topbar a *,
  .nav a, .nav a *,
  .menu a, .menu a *,
  .action, .action *,
  .tab, .tab *,
  .tag, .tag *,
  .pill, .pill *,
  .rule, .rule *,
  .rules, .rules *
){
  color: rgba(255,255,255,.92) !important;
}

/* 2) If any of those labels/icons are inline SVG, force them to follow currentColor */
.page :where(
  a, button, [role="button"], [role="link"],
  .btn, .cta, .rail-link, .rail-cta, .tab, .tag, .pill, .rules, .rule
) svg{
  color: inherit !important; /* gives currentColor a value */
}

.page :where(
  a, button, [role="button"], [role="link"],
  .btn, .cta, .rail-link, .rail-cta, .tab, .tag, .pill, .rules, .rule
) svg :where(text, tspan, path, rect, circle, line, polyline, polygon){
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* 3) PROTECT light surfaces so they stay dark text */
:where(.service-card, .insight-card, .form) :where(a,button,[role="button"],[role="link"],span,div,p,li,label,strong,b,svg,svg *){
  color: rgba(17,16,15,.86) !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}
/* =========================================================
   FINAL CTA TYPE RULE:
   Any pill/button with a non-white fill should have white text.
   - Bronze primary: WHITE text
   - Secondary/ghost: WHITE text
   - Top rail Run a Decision: WHITE text
   Exceptions kept: light chips/badges stay dark.
   ========================================================= */

/* 1) Buttons: default white text (covers <a> and <button>) */
.btn,
.btn *{
  color: rgba(255,255,255,.92) !important;
}

/* 2) Bronze primary specifically (was being forced to black) */
.btn.primary,
.btn.primary *{
  color: rgba(255,255,255,.96) !important;
}

/* 3) Top rail “RUN A DECISION” (was being forced to black) */
.cta-run-top,
.cta-run-top__label,
.cta-run-top__arrow{
  color: rgba(255,255,255,.94) !important;
}

/* 4) Pills / notices / rules: white text */
:where(.pill, .note, .notice, .rules, .rules-pill, .rules-box, .rule, .rule-pill),
:where(.pill, .note, .notice, .rules, .rules-pill, .rules-box, .rule, .rule-pill) *{
  color: rgba(255,255,255,.88) !important;
}

/* 5) Keep LIGHT pills/chips dark (they sit on light backgrounds) */
.badge,
.chip,
.flow-chip,
.flow-chip .mono{
  color: rgba(17,16,15,.92) !important;
}
.badge *,
.chip *,
.flow-chip *,
.flow-chip .mono *{
  color: inherit !important;
}
/* =========================================================
   GLOBAL TYPE RULE:
   If it's not a light surface, it should read as WHITE.
   Light surfaces are explicitly forced to dark text.
   ========================================================= */

/* 1) Default site text on dark surfaces */
.page{
  color: rgba(255,255,255,.90) !important;
}
.page :where(h1,h2,h3,h4,h5,h6){
  color: rgba(255,255,255,.96) !important;
}
.page :where(p,li,small,span,div,label){
  color: inherit !important;
}
.page :where(.muted,.desc,.meta){
  color: rgba(255,255,255,.72) !important;
}

/* 2) Light surfaces: force DARK text inside (your “white background” areas) */
:where(.service-card,.insight-card,.form){
  color: rgba(17,16,15,.86) !important;
}
:where(.service-card,.insight-card,.form) :where(h1,h2,h3,h4,h5,h6,.title,.kicker,.meta,.service-name,.service-tag,.service-label){
  color: rgba(17,16,15,.92) !important;
}
:where(.service-card,.insight-card,.form) :where(p,.desc,.service-text,.muted){
  color: rgba(17,16,15,.62) !important;
}

/* Inputs on light surfaces */
:where(.form) :where(input,textarea,select){
  color: rgba(17,16,15,.92) !important;
}
:where(.form) :where(input::placeholder,textarea::placeholder){
  color: rgba(17,16,15,.45) !important;
}

/* 3) Light chips/badges stay dark (they are light pills) */
.badge,
.chip,
.flow-chip,
.flow-chip .mono{
  color: rgba(17,16,15,.92) !important;
}
.badge *,
.chip *,
.flow-chip *,
.flow-chip .mono *{
  color: inherit !important;
}
/* =========================
   HOW STRIP — unified baseline (desktop)
   Fixes: misaligned line/chevrons/nodes
   ========================= */

@media (min-width: 861px){
  .how-strip{
    position: relative;
    --flow-y: 34px;           /* single baseline for line + chevrons + nodes */
  }

  /* Flow line */
  .how-strip::before{
    content:"";
    position:absolute;
    left: 18px;
    right: 18px;
    top: var(--flow-y);
    height: 1px;
    background: linear-gradient(
      90deg,
      rgba(200,161,43,.35),
      rgba(255,255,255,.14),
      rgba(200,161,43,.28)
    );
    opacity: .55;
    pointer-events:none;
    z-index: 0;
  }

  /* Chevrons sit on same baseline */
  .how-strip::after{
    content:"";
    position:absolute;
    left: 0;
    right: 0;
    top: calc(var(--flow-y) - 10px);  /* centers 14px chevron over 1px line */
    height: 22px;
    pointer-events:none;
    z-index: 0;

    background:
      linear-gradient(45deg, transparent 46%, rgba(200,161,43,.55) 47%, rgba(200,161,43,.55) 53%, transparent 54%) 34% 50% / 14px 14px no-repeat,
      linear-gradient(-45deg, transparent 46%, rgba(200,161,43,.55) 47%, rgba(200,161,43,.55) 53%, transparent 54%) 34% 50% / 14px 14px no-repeat,

      linear-gradient(45deg, transparent 46%, rgba(200,161,43,.45) 47%, rgba(200,161,43,.45) 53%, transparent 54%) 67% 50% / 14px 14px no-repeat,
      linear-gradient(-45deg, transparent 46%, rgba(200,161,43,.45) 47%, rgba(200,161,43,.45) 53%, transparent 54%) 67% 50% / 14px 14px no-repeat;

    opacity: .70;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.18));
  }

  /* Nodes: pin them to the same baseline */
  .how-step{
    position: relative;
    z-index: 1;
  }
  .how-step::after{
    content:"";
    position:absolute;

    /* anchor node to the left padding inside each card */
    left: 18px;
    top: calc(var(--flow-y) - 3px); /* 7px node centered on 1px line */
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: rgba(200,161,43,.82);
    box-shadow:
      0 0 0 4px rgba(200,161,43,.12),
      0 2px 8px rgba(0,0,0,.18);
    pointer-events:none;
    opacity: .90;
  }

  .how-step:nth-child(2)::after{ opacity: .80; }
  .how-step:nth-child(3)::after{ opacity: .72; }
}

/* Replace X with clean chevrons between steps (desktop) */
@media (min-width: 861px){
  .how-strip::after{ display:none !important; } /* kill the X system */

  .how-step{ position: relative; }

  /* one chevron after step 1 and 2 */
  .how-step:not(:last-child)::before{
    content: "›";
    position: absolute;
    right: -18px;              /* sits in the gap between cards */
    top: 26px;                 /* align near the Step label line */
    font-weight: 900;
    font-size: 18px;
    line-height: 1;
    color: rgba(200,161,43,.70);
    text-shadow: 0 2px 8px rgba(0,0,0,.22);
    pointer-events: none;
  }

  .how-step::after{
    content:"";
    position:absolute;
    left: 18px;
    top: 33px;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: rgba(200,161,43,.82);
    box-shadow: 0 0 0 4px rgba(200,161,43,.12);
    pointer-events:none;
  }
}
/* HOW STRIP: move gold node OUTSIDE the card so it's visible */
@media (min-width: 861px){
  .how-step{
    position: relative;
    padding-left: 34px;          /* makes room for outside dot */
  }

  .how-step::after{
    content:"";
    position:absolute;
    left: -10px;                 /* OUTSIDE the card */
    top: 28px;                   /* near the STEP line */
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: rgba(200,161,43,.88);
    box-shadow:
      0 0 0 5px rgba(200,161,43,.14),
      0 2px 10px rgba(0,0,0,.22);
    pointer-events:none;
    opacity: .95;
  }
}

/* Mobile: hide nodes (optional) */
@media (max-width: 860px){
  .how-step{ padding-left: 0; }
  .how-step::after{ display: none !important; }
}
/* Section-head with banner image overlay */
.section-head--banner{
  position: relative;
  overflow: hidden;
}

/* banner image layer */
.section-head--banner .section-head__bg{
  position: absolute;
  inset: 0;
  background: url("/assets/how.png") center / cover no-repeat;
  opacity: .95;
  z-index: 0;
}

/* darken it so text stays readable */
.section-head--banner .section-head__bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.65));
}

/* keep the text above the image */
.section-head--banner h2,
.section-head--banner p{
  position: relative;
  z-index: 1;
  color: rgba(255,255,255,.94);
}

.section-head--banner p.muted{
  color: rgba(255,255,255,.78) !important;
}
/* =========================================================
   GLOBAL RHYTHM + ALIGNMENT
   Goal: all section text aligns with hero content, with consistent spacing
   ========================================================= */

:root{
  --content-pad: 28px;     /* matches .hero-plate__content padding */
  --section-gap: 64px;     /* vertical space between sections */
  --block-gap: 18px;       /* spacing within section heads */
}

/* 1) Sections: consistent vertical rhythm */
.page > main > section{
  padding-top: var(--section-gap) !important;
  padding-bottom: var(--section-gap) !important;
}

/* 2) Default content alignment: same left/right inset as hero */
.page > main > section > :where(.section-head, .how-strip, .stack-strip, .services-grid, .insights-controls, .insights-grid, .form, .site-footer){
  padding-left: var(--content-pad) !important;
  padding-right: var(--content-pad) !important;
}

/* 3) Section head: nicer spacing */
.section-head{
  margin-bottom: calc(var(--block-gap) + 6px) !important;
}
.section-head h2{
  margin: 0 0 8px !important;
}
.section-head p{
  margin: 0 !important;
  max-width: 72ch;
}

/* 4) Banner head still aligns, but keeps its background full-width INSIDE the head */
.section-head--banner{
  padding: 18px var(--content-pad) !important; /* text inset */
}

/* 5) Mobile: slightly tighter */
@media (max-width: 720px){
  :root{
    --content-pad: 18px;
    --section-gap: 44px;
  }
}
/* HOW STEPS: plate background image */
.how-step{
  position: relative;
  overflow: hidden;
}

.how-step::before{
  content:"";
  position:absolute;
  inset:0;
  background: url("/assets/steps.png") center / cover no-repeat;
  opacity: .95;
  z-index: 0;
}

/* Dark overlay so text stays readable */
.how-step::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.70));
  z-index: 1;
}

.how-step > *{
  position: relative;
  z-index: 2;
}

/* Type on image */
.how-step .kicker,
.how-step .title{
  color: rgba(255,255,255,.94) !important;
}
.how-step .desc{
  color: rgba(255,255,255,.78) !important;
}

/* =========================================================
   HOW STEPS: even image framing + consistent spacing
   ========================================================= */

.how-strip{
  gap: 18px !important;                 /* consistent spacing between cards */
}

.how-step{
  position: relative;
  overflow: hidden;
  border-radius: 16px !important;
  padding: 18px 18px 16px !important;   /* consistent inner spacing */
  min-height: 180px;                    /* keeps all cards same height */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Background image fills the card evenly */
.how-step::before{
  content:"";
  position:absolute;
  inset: 0;
  background: url("/assets/steps.png") center / cover no-repeat;
  transform: scale(1.03);               /* avoids edge seams */
  z-index: 0;
}

/* Overlay to help text readability */
.how-step::after{
  content:"";
  position:absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.52), rgba(0,0,0,.72));
  z-index: 1;
}

/* Foreground content */
.how-step > *{
  position: relative;
  z-index: 2;
}

/* Ensure kicker/title/desc spacing is consistent */
.how-step .kicker{ margin: 0 0 8px !important; }
.how-step .title{ margin: 0 0 10px !important; }
.how-step .desc{ margin: 0 !important; }

/* Optional: vary crop slightly per card so they don't look identical */
@media (min-width: 861px){
  .how-step:nth-child(1)::before{ background-position: 35% 45%; }
  .how-step:nth-child(2)::before{ background-position: 50% 50%; }
  .how-step:nth-child(3)::before{ background-position: 65% 55%; }
}
/* =========================================================
   ALIAS: map system-* styling onto existing service-* HTML
   (so cards become equal width + padding/typography matches)
   ========================================================= */

/* Grid */
.services-grid{
  display:grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin-top: 12px !important;
  align-items: stretch !important;
}
@media (max-width: 980px){
  .services-grid{ grid-template-columns: 1fr !important; }
}

/* Card */
.service-card{
  position: relative !important;
  overflow: hidden !important;

  border-radius: var(--r-xl) !important;
  padding: var(--pad-lg) !important;

  border: 1px solid color-mix(in srgb, var(--line) 70%, rgba(0,0,0,.10) 30%) !important;

  background:
    radial-gradient(900px 360px at 22% 0%,
      color-mix(in srgb, var(--gold) 28%, transparent) 0%,
      transparent 62%),
    linear-gradient(180deg, var(--paper-1), var(--paper-2)) !important;

  box-shadow:
    0 1px 0 rgba(255,255,255,.72) inset,
    0 14px 34px rgba(0,0,0,.10) !important;

  transition:
    transform var(--t-med),
    box-shadow var(--t-med),
    border-color var(--t-med) !important;
}

.service-card:hover{
  transform: translateY(-2px) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.72) inset,
    0 20px 46px rgba(0,0,0,.14) !important;
  border-color: color-mix(in srgb, var(--gold) 34%, rgba(0,0,0,.16) 66%) !important;
}

/* Finish band */
.service-card::before{
  content:"" !important;
  position:absolute !important;
  left:0; right:0; top:0 !important;
  height: 72px !important;
  pointer-events:none !important;
  border-top-left-radius: var(--r-xl) !important;
  border-top-right-radius: var(--r-xl) !important;

  background:
    linear-gradient(180deg, rgba(255,255,255,.60), transparent 70%),
    linear-gradient(115deg, rgba(200,161,43,.10), transparent 45%) !important;
  opacity: .48 !important;
}

/* Accent bar */
.service-card::after{
  content:"" !important;
  position:absolute !important;
  left:0; top:0; bottom:0 !important;
  width: 6px !important;
  border-top-left-radius: var(--r-xl) !important;
  border-bottom-left-radius: var(--r-xl) !important;
  background: rgba(200,161,43,.62) !important;
  opacity: .95 !important;
}

/* Variants */
.service-card.pkg-dais::after{ background: rgba(200,161,43,.70) !important; }
.service-card.pkg-janus::after{ background: color-mix(in srgb, var(--ink) 65%, var(--gold) 35%) !important; }
.service-card.pkg-hold::after{ background: color-mix(in srgb, var(--frame) 65%, var(--gold) 35%) !important; }

/* Header */
.service-head{
  display:flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 12px !important;
  flex-wrap: wrap !important;

  padding-bottom: 10px !important;
  margin-bottom: 12px !important;
  border-bottom: 1px solid var(--line-2) !important;
}

/* Titles */
.service-name{
  font-size: 19px !important;
  font-weight: 950 !important;
  letter-spacing: -0.02em !important;
}
.service-tag{
  font-size: 11px !important;
  font-weight: 950 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  opacity: .95 !important;
  color: color-mix(in srgb, var(--muted) 72%, var(--gold) 28%) !important;
}

/* Bands */
.service-body{ display:grid !important; gap:0 !important; }
.service-band{ padding: 14px 0 !important; }
.service-band + .service-band{ border-top: 1px solid var(--hairline) !important; }

/* Footer */
.service-footer{
  margin-top: 6px !important;
  padding-top: 14px !important;
  border-top: 1px solid var(--hairline) !important;
  display:grid !important;
  gap: 10px !important;
}
.service-row{ display:grid !important; gap: 6px !important; }

.service-label{
  font-size: 11px !important;
  font-weight: 950 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: color-mix(in srgb, var(--muted) 80%, var(--text) 20%) !important;
}
.service-text{
  margin: 0 !important;
  color: color-mix(in srgb, var(--muted) 88%, var(--text) 12%) !important;
  line-height: 1.58 !important;
}
/* =========================================================
   HOW STEPS: reduce height + make steps.png fill evenly
   ========================================================= */

@media (min-width: 861px){
  /* 1) Make each card height driven by content (no tall empty boxes) */
  .how-step{
    padding: 16px 18px 14px !important;
    min-height: 0 !important;       /* remove any forced tall card */
    height: auto !important;
  }

  /* 2) Background fills full card */
  .how-step::before{
    inset: 0 !important;
    transform: none !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;

    /* push crop DOWN so image isn't "too high" */
    background-position: 50% 68% !important;
    opacity: .95 !important;
  }

  /* 3) Overlay stays full card */
  .how-step::after{
    inset: 0 !important;
    background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.72)) !important;
  }

  /* 4) Trim internal margins so content doesn't inflate height */
  .how-step .kicker{ margin: 0 0 6px !important; }
  .how-step .title{  margin: 0 0 8px !important; }
  .how-step .desc{   margin: 0 !important; }
}

/* If you also want them tighter on mobile */
@media (max-width: 860px){
  .how-step{
    padding: 16px 16px 14px !important;
    min-height: 0 !important;
  }
}
@media (min-width: 861px){
  .how-strip{ align-items: stretch; }
  .how-step{ min-height: 160px !important; } /* adjust up/down */
}
/* HOW STEPS: make background image fit the card perfectly */
.how-step{
  overflow: hidden !important;
  border-radius: 16px !important;
}

.how-step::before{
  inset: 0 !important;                     /* fill the full card */
  width: 100% !important;
  height: 100% !important;

  background-size: cover !important;       /* fills width/height */
  background-repeat: no-repeat !important;
  background-position: 50% 65% !important; /* adjust crop vertical */
}
/* HOW banner background fills the section-head box */
.section-head--banner{
  overflow: hidden !important;
  border-radius: 16px !important;
}

.section-head--banner .section-head__bg{
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: 50% 50% !important;
}
/* =========================================================
   HOW STEPS: make steps.png truly fill each card (no pseudo)
   ========================================================= */

/* Kill any previous pseudo-based image layers so nothing conflicts */
.how-step::before,
.how-step::after{
  content: none !important;
}

/* Put the image directly on the card so it always fills */
.how-step{
  position: relative;
  overflow: hidden;
  border-radius: 16px !important;

  /* This is the key: gradient overlay + image */
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.50), rgba(0,0,0,.74)),
    url("/assets/steps.png") !important;

  background-repeat: no-repeat !important;
  background-size: cover !important;          /* image fits the box */
  background-position: 50% 70% !important;    /* pushes crop down (adjust as needed) */

  /* keep your spacing consistent */
  padding: 16px 18px 14px !important;
}

/* Text contrast on image */
.how-step .kicker,
.how-step .title{
  color: rgba(255,255,255,.95) !important;
}
.how-step .desc{
  color: rgba(255,255,255,.78) !important;
}
/* =========================================================
   HOW STEPS: force steps.png to fill each card (hard override)
   ========================================================= */

/* Card */
.how-step{
  position: relative !important;
  overflow: hidden !important;
  border-radius: 16px !important;

  /* wipe any earlier slab backgrounds */
  background: none !important;

  /* apply image + overlay as the ONLY background */
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.48), rgba(0,0,0,.76)),
    url("/assets/steps.png") !important;

  background-repeat: no-repeat !important;
  background-size: cover !important;        /* fills the box */
  background-position: 50% 70% !important;  /* crop lower so it’s not too high */

  padding: 16px 18px 14px !important;
  min-height: 0 !important;                 /* removes forced tall cards */
}

/* Kill any pseudo elements that might still be drawing over/under */
.how-step::before,
.how-step::after{
  display: none !important;
  content: none !important;
}

/* Text contrast */
.how-step .kicker,
.how-step .title{
  color: rgba(255,255,255,.95) !important;
}
.how-step .desc{
  color: rgba(255,255,255,.78) !important;
}

/* Tighten margins so height stays compact */
.how-step .kicker{ margin: 0 0 6px !important; }
.how-step .title{ margin: 0 0 8px !important; }
.how-step .desc{ margin: 0 !important; }
/* HOW: wider-feel cards */
.how-strip{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
  width: 100% !important;
}

.how-step{
  min-height: 150px !important;     /* makes them less tall */
  padding: 16px 20px 14px !important;
}

/* Tablet: 2 across */
@media (max-width: 980px){
  .how-strip{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* Mobile: 1 across */
@media (max-width: 640px){
  .how-strip{ grid-template-columns: 1fr !important; }
}
/* HOW: box-shaped cards */
.how-strip{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

.how-step{
  aspect-ratio: 4 / 3 !important;   /* boxy */
  min-height: unset !important;
  padding: 18px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}

/* Mobile stacking */
@media (max-width: 980px){
  .how-strip{ grid-template-columns: 1fr !important; }
  .how-step{ aspect-ratio: auto !important; }
}
/* Let the HOW cards use full section width (still aligned overall) */
.page > main > section#how > .how-strip{
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* =========================================================
   HOW STRIP: overlay gold chevrons + subtle line ON TOP
   ========================================================= */
@media (min-width: 861px){
  .how-strip{
    position: relative !important;
    overflow: visible !important;
    --flow-y: 34px; /* adjust up/down if needed */
  }

  /* subtle connector line (optional) */
  .how-strip::before{
    content:"";
    position:absolute;
    left: 18px;
    right: 18px;
    top: var(--flow-y);
    height: 1px;
    background: linear-gradient(90deg,
      rgba(200,161,43,.34),
      rgba(255,255,255,.12),
      rgba(200,161,43,.28)
    );
    opacity: .55;
    pointer-events:none;
    z-index: 5;  /* on top of cards */
  }

  /* two chevrons between 1→2 and 2→3 */
  .how-strip::after{
    content:"";
    position:absolute;
    left: 0;
    right: 0;
    top: calc(var(--flow-y) - 10px);
    height: 24px;
    pointer-events:none;
    z-index: 6;

    /* Use chevron shape, not X */
    background:
      /* chevron 1 */
      linear-gradient(45deg, transparent 48%, rgba(200,161,43,.62) 49%, rgba(200,161,43,.62) 54%, transparent 55%) 34% 50% / 14px 14px no-repeat,
      linear-gradient(-45deg, transparent 48%, rgba(200,161,43,.62) 49%, rgba(200,161,43,.62) 54%, transparent 55%) 34% 50% / 14px 14px no-repeat,

      /* chevron 2 */
      linear-gradient(45deg, transparent 48%, rgba(200,161,43,.52) 49%, rgba(200,161,43,.52) 54%, transparent 55%) 67% 50% / 14px 14px no-repeat,
      linear-gradient(-45deg, transparent 48%, rgba(200,161,43,.52) 49%, rgba(200,161,43,.52) 54%, transparent 55%) 67% 50% / 14px 14px no-repeat;

    opacity: .85;
    filter: drop-shadow(0 2px 10px rgba(0,0,0,.30));
  }
}

@media (max-width: 860px){
  .how-strip::before,
  .how-strip::after{
    display:none !important;
  }
}
/* HOW steps: force steps.png to render as the card background */
.how-step{
  /* wipe any competing backgrounds */
  background-color: transparent !important;

  /* IMPORTANT: overlay first, image second */
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.72)),
    url("/assets/steps.png") !important;

  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: 50% 65% !important;
}
/* Desktop: 3 across */
@media (min-width: 861px){
  .how-strip{ grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
}

/* Mobile/tablet: stacked */
@media (max-width: 860px){
  .how-strip{ grid-template-columns: 1fr !important; }
}
/* SYSTEM banner image */
.section-head--system{
  position: relative;
  overflow: hidden;
}

.section-head--system .section-head__bg{
  position: absolute;
  inset: 0;
  background: url("/assets/system.png") center / cover no-repeat;
  opacity: .95;
  z-index: 0;
}

/* overlay for readability */
.section-head--system .section-head__bg::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.50), rgba(0,0,0,.70));
}

/* keep text above */
.section-head--system h2,
.section-head--system p{
  position: relative;
  z-index: 1;
  color: rgba(255,255,255,.94);
}
.section-head--system p.muted{
  color: rgba(255,255,255,.78) !important;
}
/* FORCE System banner image (overrides the generic banner) */
#system .section-head--system .section-head__bg{
  background-image: url("/assets/system.png") !important;
  background-size: cover !important;
  background-position: 50% 50% !important;
  background-repeat: no-repeat !important;
}
/* =========================================================
   SYSTEM CARDS (DAIS/JANUS/HOLD): use steps.png as plate bg
   ========================================================= */

/* Put image + overlay on each card */
.service-card{
  background: none !important;
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.42), rgba(0,0,0,.78)),
    url("/assets/steps.png") !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: 50% 60% !important;

  /* text becomes white on the plate */
  color: rgba(255,255,255,.90) !important;
}

/* Make the internal text inherit white */
.service-card *{
  color: inherit !important;
}

/* So small muted text still reads “muted” but white */
.service-card .service-text{
  color: rgba(255,255,255,.76) !important;
}
.service-card .service-tag{
  color: rgba(255,255,255,.78) !important;
}
.service-card .service-label{
  color: rgba(255,255,255,.80) !important;
}

/* Keep your borders readable on image */
.service-card{
  border-color: rgba(255,255,255,.14) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.10) inset,
    0 18px 40px rgba(0,0,0,.18) !important;
}

/* Keep the accent bar you already have */
.service-card::after{
  opacity: .95 !important;
}

/* Make the "finish band" subtle so it doesn't fight the image */
.service-card::before{
  opacity: .20 !important;
}
/* =========================================================
   GLOBAL PLATE: apply steps.png to major section blocks
   (NOT the whole section, so hero/banner still work)
   ========================================================= */

:root{
  --plate-img: url("/assets/steps.png");
  --plate-overlay: linear-gradient(180deg, rgba(0,0,0,.42), rgba(0,0,0,.78));
  --plate-pos: 50% 60%;
}

/* Apply to the “block” containers inside sections */
:where(
  .hero-panel:not(.hero-plate), /* excludes your hero image plate */
  .section-head:not(.section-head--banner),
  .how-strip,
  .stack-strip,
  .services-grid,
  .service-card,
  .insights-grid,
  .insight-card,
  .form,
  .site-footer
){
  background: none !important;
  background-image: var(--plate-overlay), var(--plate-img) !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: var(--plate-pos) !important;

  color: rgba(255,255,255,.90) !important;
  border-color: rgba(255,255,255,.14) !important;
}

/* Keep text readable everywhere inside those blocks */
:where(
  .section-head:not(.section-head--banner),
  .how-strip, .how-step,
  .stack-strip,
  .services-grid, .service-card,
  .insights-grid, .insight-card,
  .form,
  .site-footer
) *{
  color: inherit !important;
}

/* Re-introduce muted hierarchy */
:where(.section-head, .service-text, .desc, .muted, .meta, .footer-muted){
  color: rgba(255,255,255,.74) !important;
}
/* =========================================================
   GLOBAL BREATHING ROOM: padding + type rhythm inside blocks
   ========================================================= */

/* 1) Give all major blocks consistent inner padding */
:where(
  .section-head,
  .how-strip,
  .stack-strip,
  .services-grid,
  .service-card,
  .insights-controls,
  .insights-grid,
  .insight-card,
  .form,
  .site-footer
){
  padding: 24px var(--content-pad, 28px) !important;
}

/* Cards inside grids shouldn’t double-pad */
:where(.how-strip, .services-grid, .insights-grid){
  padding: 22px !important;                 /* grid container padding */
}
:where(.how-strip .how-step,
       .services-grid .service-card,
       .insights-grid .insight-card){
  padding: 22px !important;                 /* card padding */
}

/* 2) Increase line height globally for readability */
.page{
  line-height: 1.58;
}

/* 3) Smooth the “starts abruptly” feel: consistent spacing */
.section-head h2{
  margin: 0 0 10px !important;
}
.section-head p{
  margin: 0 !important;
  line-height: 1.55;
  max-width: 72ch;
}

/* 4) Give paragraphs a little space inside cards */
:where(.how-step, .service-card, .insight-card, .form) p{
  margin-top: 10px;
}

/* 5) Mobile: slightly tighter */
@media (max-width: 720px){
  :where(
    .section-head,
    .how-strip,
    .stack-strip,
    .services-grid,
    .service-card,
    .insights-controls,
    .insights-grid,
    .insight-card,
    .form,
    .site-footer
  ){
    padding: 18px var(--content-pad, 18px) !important;
  }

  :where(.how-strip, .services-grid, .insights-grid){ padding: 16px !important; }
  :where(.how-strip .how-step,
         .services-grid .service-card,
         .insights-grid .insight-card){ padding: 18px !important; }
}
/* =========================================================
   PILL TEXT AUTO-COLOR
   - Default: pills are light -> dark text
   - Only force white text when the pill is explicitly dark
   ========================================================= */

/* 1) Reset pills to a sane default (works for Decision Run Output) */
.pill,
.pill-gray,
.rules-pill,
.rule-pill,
.flow-chip,
.product-point{
  color: rgba(17,16,15,.92) !important; /* dark ink for light surfaces */
}

/* Ensure nested spans/icons inherit */
.pill * ,
.pill-gray * ,
.rules-pill * ,
.rule-pill * ,
.flow-chip * ,
.product-point *{
  color: inherit !important;
}

/* 2) If a pill is on a dark surface or you intentionally make it dark, force white */
.pill.is-dark,
.pill[data-tone="dark"],
.flow-chip.is-dark,
.product-point.is-dark{
  color: rgba(255,255,255,.92) !important;
}

/* 3) Automatic “dark background => white text” (covers most cases) */
.pill,
.pill-gray,
.rules-pill,
.rule-pill,
.flow-chip,
.product-point{
  /* if background is darkened anywhere else, this keeps text readable */
  mix-blend-mode: normal;
}
/* =========================================================
   CONTACT: remove "giant gap" + add layout for meta + map
   Works with your exact index.html markup
   ========================================================= */

/* (A) Reduce the big global section padding JUST for contact (optional but usually the real culprit) */
.page > main > section#contact{
  padding-top: 36px !important;   /* was var(--section-gap) */
  padding-bottom: 56px !important;
}

/* (B) Tighten Contact header spacing (kills the space between H2 and the muted line) */
#contact .section-head{
  margin-bottom: 16px !important;
}

#contact .section-head h2{
  margin: 0 0 6px !important;
  line-height: 1.08;
}

#contact .section-head p.muted{
  margin: 0 !important;
}

/* (C) Direct contact line styling */
#contact .contact-meta{
  margin-top: 10px !important;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

#contact .contact-link{
  font-weight: 800;
  text-decoration: none;
  color: color-mix(in srgb, var(--text) 78%, var(--gold) 22%);
  border-bottom: 1px solid color-mix(in srgb, var(--gold) 38%, transparent);
}

#contact .contact-link:hover{
  border-bottom-color: color-mix(in srgb, var(--gold) 70%, transparent);
}

#contact .contact-sep{
  opacity: .55;
}

/* (D) Two-column form + map */
#contact .contact-grid{
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 16px;
  align-items: start;
}

/* Map frame */
#contact .contact-map__frame{
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--line) 70%, rgba(0,0,0,.10) 30%);
  box-shadow: 0 14px 34px rgba(0,0,0,.10);
  background: linear-gradient(180deg, var(--paper-1), var(--paper-2));
}

#contact .contact-map__frame iframe{
  width: 100%;
  height: 320px;
  display: block;
}

#contact .contact-map__hint{
  margin: 10px 0 0 !important;
}

/* Mobile: stack */
@media (max-width: 860px){
  .page > main > section#contact{
    padding-top: 28px !important;
    padding-bottom: 44px !important;
  }
  #contact .contact-grid{
    grid-template-columns: 1fr;
  }
  #contact .contact-map__frame iframe{
    height: 260px;
  }
}
/* =========================================================
   CONTACT: remove "giant gap" + add layout for meta + map
   Works with your exact index.html markup
   ========================================================= */

/* (A) Reduce the big global section padding JUST for contact (optional but usually the real culprit) */
.page > main > section#contact{
  padding-top: 36px !important;   /* was var(--section-gap) */
  padding-bottom: 56px !important;
}

/* (B) Tighten Contact header spacing (kills the space between H2 and the muted line) */
#contact .section-head{
  margin-bottom: 16px !important;
}

#contact .section-head h2{
  margin: 0 0 6px !important;
  line-height: 1.08;
}

#contact .section-head p.muted{
  margin: 0 !important;
}

/* (C) Direct contact line styling */
#contact .contact-meta{
  margin-top: 10px !important;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

#contact .contact-link{
  font-weight: 800;
  text-decoration: none;
  color: color-mix(in srgb, var(--text) 78%, var(--gold) 22%);
  border-bottom: 1px solid color-mix(in srgb, var(--gold) 38%, transparent);
}

#contact .contact-link:hover{
  border-bottom-color: color-mix(in srgb, var(--gold) 70%, transparent);
}

#contact .contact-sep{
  opacity: .55;
}

/* (D) Two-column form + map */
#contact .contact-grid{
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 16px;
  align-items: start;
}

/* Map frame */
#contact .contact-map__frame{
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--line) 70%, rgba(0,0,0,.10) 30%);
  box-shadow: 0 14px 34px rgba(0,0,0,.10);
  background: linear-gradient(180deg, var(--paper-1), var(--paper-2));
}

#contact .contact-map__frame iframe{
  width: 100%;
  height: 320px;
  display: block;
}

#contact .contact-map__hint{
  margin: 10px 0 0 !important;
}

/* Mobile: stack */
@media (max-width: 860px){
  .page > main > section#contact{
    padding-top: 28px !important;
    padding-bottom: 44px !important;
  }
  #contact .contact-grid{
    grid-template-columns: 1fr;
  }
  #contact .contact-map__frame iframe{
    height: 260px;
  }
}
/* =========================
   RAIL DRAWER — BRAND COLORS
   ========================= */

.rail-card{
  background: linear-gradient(180deg, var(--paper-1), var(--paper-2)) !important;
  border: 1px solid color-mix(in srgb, var(--line) 70%, rgba(0,0,0,.14) 30%) !important;
  box-shadow: 0 18px 54px rgba(0,0,0,.26) !important;
}

.rail-head{
  border-bottom: 1px solid var(--hairline) !important;
}

.rail-title{
  color: var(--text) !important;
  letter-spacing: -0.01em;
}
/* Links (default) */
.rail-link{
  color: color-mix(in srgb, var(--text) 88%, var(--muted) 12%) !important;
  text-decoration: none !important;

  border-radius: 12px;
  padding: 10px 12px !important;

  transition: background-color var(--t-med), color var(--t-med), border-color var(--t-med), transform var(--t-med);
}

/* Hover / focus */
.rail-link:hover,
.rail-link:focus-visible{
  background: color-mix(in srgb, var(--gold) 10%, transparent) !important;
  color: var(--text) !important;
  outline: none !important;
  transform: translateY(-1px);
}

/* Active page */
.rail-link[aria-current="page"]{
  background: color-mix(in srgb, var(--gold) 14%, transparent) !important;
  color: var(--text) !important;
  border: 1px solid color-mix(in srgb, var(--gold) 34%, var(--line) 66%) !important;
}

/* Strong link (your “Run a Decision” item) */
.rail-link-strong{
  color: var(--ink) !important;
  background: color-mix(in srgb, var(--gold) 18%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--gold) 42%, var(--line) 58%) !important;
}

.rail-link-strong:hover,
.rail-link-strong:focus-visible{
  background: color-mix(in srgb, var(--gold) 26%, transparent) !important;
}
.rail-x{
  color: var(--text) !important;
  background: color-mix(in srgb, var(--paper-2) 70%, transparent 30%) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: 12px;
  padding: 8px 10px;
}

.rail-x:hover,
.rail-x:focus-visible{
  background: color-mix(in srgb, var(--gold) 12%, transparent) !important;
  border-color: color-mix(in srgb, var(--gold) 30%, var(--hairline) 70%) !important;
  outline: none !important;
}

.rail-divider{
  background: var(--hairline) !important;
  height: 1px !important;
}
/* =========================
   RAIL DRAWER — WHITE TYPE
   ========================= */

/* Darken the drawer surface so white text has contrast */
.rail-card{
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--ink) 92%, #000 8%),
    color-mix(in srgb, var(--frame-3) 92%, #000 8%)
  ) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}

/* Head + title */
.rail-title{
  color: rgba(255,255,255,.96) !important;
}

/* All links white by default */
.rail-link{
  color: rgba(255,255,255,.92) !important;
}

/* Muted bits inside the drawer (if any) */
.rail-card .muted,
.rail-card .meta{
  color: rgba(255,255,255,.70) !important;
}

/* Hover/focus: subtle gold wash, still white text */
.rail-link:hover,
.rail-link:focus-visible{
  background: color-mix(in srgb, var(--gold) 14%, rgba(255,255,255,.06) 86%) !important;
  color: rgba(255,255,255,.98) !important;
  outline: none !important;
}

/* Active page: stronger gold edge */
.rail-link[aria-current="page"]{
  background: color-mix(in srgb, var(--gold) 18%, rgba(255,255,255,.06) 82%) !important;
  color: rgba(255,255,255,.98) !important;
  border: 1px solid rgba(200,161,43,.55) !important;
}

/* Strong link (Run a Decision in the drawer) */
.rail-link-strong{
  color: rgba(255,255,255,.98) !important;
  background: color-mix(in srgb, var(--gold) 24%, rgba(255,255,255,.06) 76%) !important;
  border: 1px solid rgba(200,161,43,.70) !important;
}

/* Close button to match */
.rail-x{
  color: rgba(255,255,255,.92) !important;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
}
.rail-x:hover,
.rail-x:focus-visible{
  background: color-mix(in srgb, var(--gold) 16%, rgba(255,255,255,.08) 84%) !important;
  border-color: rgba(200,161,43,.55) !important;
  outline: none !important;
}

/* Divider line */
.rail-divider{
  background: rgba(255,255,255,.10) !important;
}
/* ---------- PRICING (page-only) ---------- */
.pricing-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}
@media (max-width: 980px){
  .pricing-grid{ grid-template-columns: 1fr; }
}

.price-card{
  border-radius: 16px;
  border: 1px solid rgba(20,19,18,.14);
  background: rgba(255,255,255,.86);
  box-shadow: 0 10px 28px rgba(20,19,18,.08);
  overflow:hidden;
}
.price-card.is-featured{
  border-color: rgba(200,161,43,.28);
  box-shadow: 0 16px 44px rgba(20,19,18,.12);
}
.price-card__head{
  padding: 14px 16px 12px;
  border-bottom: 1px solid rgba(20,19,18,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.78));
}
.price-card__body{ padding: 14px 16px 16px; }
.price{
  display:flex;
  align-items:baseline;
  gap:10px;
  flex-wrap:wrap;
}
.price .amt{ font-size: 30px; font-weight: 900; letter-spacing:.01em; }
.price .per{ font-size: 13px; opacity:.75; }
.price .small{ font-size: 12px; opacity:.72; }
.price-pills{
  display:flex; flex-wrap:wrap; gap:8px; margin-top:10px;
}
.price-pills .pill{ background: rgba(255,255,255,.72); }
.price-actions{ margin-top: 12px; display:flex; gap:10px; flex-wrap:wrap; }

.fineprint{
  margin-top: 10px;
  font-size: 12px;
  opacity: .78;
  line-height: 1.35;
}
/* =========================================================
   PORTAL — DARK GLASS SKIN (page-scoped)
   Fix: white cards on white text; match site’s dark plate vibe
   ========================================================= */

.page-portal{
  color: rgba(255,255,255,.92);
}

/* Make section heads read correctly on dark */
.page-portal .section-head .muted,
.page-portal .muted{
  color: rgba(255,255,255,.72) !important;
}

/* ---------- DARK GLASS PANELS ---------- */
.page-portal .portal-card,
.page-portal .panel,
.page-portal .product-card{
  background:
    linear-gradient(180deg, rgba(15,14,13,.62), rgba(15,14,13,.78)) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.30) !important;
  color: rgba(255,255,255,.92) !important;
}

/* portal card head/body separation stays, but dark */
.page-portal .portal-card__head{
  background: linear-gradient(180deg, rgba(0,0,0,.24), rgba(0,0,0,.10)) !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
}
.page-portal .portal-card__body{
  background: transparent !important;
}

/* inner “sub items” (Recent list) */
.page-portal .sub-item{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}

/* status pill */
.page-portal .status-pill{
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.88) !important;
}

/* ---------- FORMS (inputs/textarea) ---------- */
.page-portal .form input,
.page-portal .form textarea,
.page-portal .form select{
  background: rgba(0,0,0,.22) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: rgba(255,255,255,.92) !important;
  box-shadow: none !important;
}

.page-portal .form input::placeholder,
.page-portal .form textarea::placeholder{
  color: rgba(255,255,255,.55) !important;
}

.page-portal .form input:focus,
.page-portal .form textarea:focus,
.page-portal .form select:focus{
  outline: none !important;
  border-color: rgba(200,161,43,.55) !important;
  box-shadow: 0 0 0 3px rgba(200,161,43,.18) !important;
}

/* labels */
.page-portal .service-label{
  color: rgba(255,255,255,.78) !important;
}

/* ---------- PRODUCT BAND / PRICING AREA ---------- */
/* If your product-band is still light, force it to match plate */
.page-portal .product-band{
  background:
    radial-gradient(900px 360px at 25% 0%, rgba(200,161,43,.12), transparent 62%),
    linear-gradient(180deg, rgba(15,14,13,.56), rgba(15,14,13,.78)) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
}

/* Points inside product band */
.page-portal .product-point{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.88) !important;
}

/* mini rows in the preview card */
.page-portal .mini-row{
  border-top: 1px solid rgba(255,255,255,.10) !important;
}

/* Notices on portal: keep them readable but on-brand */
.page-portal .notice{
  background: rgba(0,0,0,.28) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.90) !important;
}

/* Links */
.page-portal a{
  color: rgba(255,255,255,.92);
}
.page-portal a:hover{
  color: rgba(255,255,255,1);
}
.page-portal .page{
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(200,161,43,.10), transparent 60%),
    linear-gradient(180deg, rgba(15,14,13,.18), rgba(15,14,13,.22));
}
.page-portal .page{
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(200,161,43,.10), transparent 60%),
    linear-gradient(180deg, rgba(15,14,13,.18), rgba(15,14,13,.22));
}
/* =========================================================
   MOBILE FULL-BLEED (remove gray gutters, edge-to-edge page)
   Put this LAST in your CSS
   ========================================================= */

@media (max-width: 720px){

  /* 1) Stop showing the outer frame color as side gutters */
  html, body{
    background: var(--sheet) !important;  /* or #FFFEFC */
  }

  /* 2) Kill centering/caps that create gutters */
  .wrap,
  .layout,
  .shell,
  .frame,
  .container,
  main{
    max-width: none !important;
    width: 100% !important;
  }

  /* 3) Make the “page card” go full width */
  .page{
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: 0 !important; /* optional: looks more native on mobile */
  }

  /* If you use any inner padding wrapper around the page */
  .page-inner,
  .page-pad{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* 4) If you have a general “side padding” variable on mobile */
  :root{
    --page-pad: 16px; /* harmless if unused */
  }
}
/* Hide the extra top-rail tagline on mobile */
@media (max-width: 720px){
  .topbar .tagline,
  .topbar .rail-tagline,
  .topbar .subline,
  .topbar .kicker{
    display: none !important;
  }
}
/* Mobile: remove the extra topbar subline (no space) */
@media (max-width: 720px){
  .topbar-box__sub{ 
    display: none !important; 
  }
}
@media (max-width: 720px){
  .topbar-box{
    white-space: nowrap;
  }
  .topbar-box__label{
    letter-spacing: .08em; /* optional: reduces visual noise when tight */
  }
  .topbar-box__dot{
    display: none; /* optional: if it still feels cramped */
  }
}
/* =========================================================
   HARD MOBILE FULL-BLEED OVERRIDE
   (undoes mobile gutters caused by --edge + body padding)
   ========================================================= */
@media (max-width: 900px){

  /* remove outer gutters */
  body{
    padding: 0 !important;
  }

  /* topbar + page go edge-to-edge */
  .topbar,
  .page{
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* optional: make it truly full-bleed cardless */
  .page{
    border-radius: 0 !important;
  }
}
/* MOBILE LAYOUT RAIL (single source of truth) */
:root{
  --m-gutter: 16px;
  --m-max: 420px;         /* feels premium; not too wide */
  --card-r: 22px;
  --card-pad: 18px;
  --card-gap: 14px;
  --stroke: rgba(255,255,255,.10);
  --stroke-2: rgba(200,161,43,.22);
}

@media (max-width: 720px){
  .page,
  main,
  .wrap,
  .section,
  .block,
  .stack,
  .pricing,
  .portal,
  .content{
    width: min(var(--m-max), calc(100vw - (var(--m-gutter) * 2)));
    margin-inline: auto;
  }

  /* if any sections are going full-bleed, clamp them back */
  .page > *{
    width: 100%;
  }
}
@media (max-width: 720px){
  .card,
  .panel,
  .box,
  .pricing-card,
  .system-card,
  .credits-card{
    border-radius: var(--card-r);
    padding: var(--card-pad);
    border: 1px solid var(--stroke);
    background: rgba(15,14,13,.62);
    box-shadow: 0 10px 28px rgba(0,0,0,.35);
    backdrop-filter: blur(10px);
  }

  .card + .card,
  .panel + .panel,
  .box + .box{
    margin-top: var(--card-gap);
  }
}
/* =========================================================
   GLOBAL GLASS UI OVERRIDE
   - makes all buttons + pills + badges consistent "glass"
   - keeps ONE gold primary variant as the CTA
   Paste this at the very bottom of overrides.css
   ========================================================= */

:root{
  /* Glass surfaces */
  --glass-bg: rgba(255,255,255,.08);
  --glass-bg-hover: rgba(255,255,255,.11);
  --glass-border: rgba(255,255,255,.18);
  --glass-border-strong: rgba(255,255,255,.26);
  --glass-text: rgba(255,255,255,.92);
  --glass-muted: rgba(255,255,255,.72);

  /* Shadows */
  --glass-shadow: 0 14px 36px rgba(0,0,0,.35);
  --glass-shadow-soft: 0 10px 26px rgba(0,0,0,.28);
}

/* -------------------------
   1) Unify ALL clickable UI
   ------------------------- */

/* Your site uses various classes; this catches most patterns */
a.btn, button.btn,
.btn,
.badge,
.chip,
.flow-chip,
.pill,
.tag,
.rail-cta,
.footer-link.btn,
.hero-actions a,
.actions a{
  background: var(--glass-bg) !important;
  color: var(--glass-text) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow-soft) !important;
  backdrop-filter: blur(12px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(120%) !important;
  text-decoration: none !important;
}

/* Hover / active */
a.btn:hover, button.btn:hover,
.btn:hover,
.badge:hover,
.chip:hover,
.flow-chip:hover,
.pill:hover,
.tag:hover,
.rail-cta:hover,
.hero-actions a:hover,
.actions a:hover{
  background: var(--glass-bg-hover) !important;
  border-color: var(--glass-border-strong) !important;
  transform: translateY(-1px);
}

/* Prevent “jumping” if some buttons already had transforms */
a.btn, button.btn,
.btn,
.hero-actions a,
.actions a{
  transition: transform .12s ease, background .12s ease, border-color .12s ease, filter .12s ease !important;
}

a.btn:active, button.btn:active,
.btn:active{
  transform: translateY(0px);
}

/* Focus ring */
a.btn:focus-visible, button.btn:focus-visible,
.btn:focus-visible,
.badge:focus-visible,
.chip:focus-visible{
  outline: 2px solid rgba(200,161,43,.70) !important;
  outline-offset: 3px !important;
}

/* -------------------------
   2) Keep ONE gold CTA style
   ------------------------- */

/* If you have a "primary" style, preserve it as gold */
.btn.primary,
a.btn.primary,
button.btn.primary{
  background: linear-gradient(180deg, var(--gold), var(--gold-2)) !important;
  color: var(--ink) !important;
  border-color: rgba(0,0,0,.18) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.38) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* If you want PRIMARY also glass sometimes, comment block above
   and instead use a dedicated class like .btn.cta */

/* -------------------------
   3) Pills/badges tighter look
   ------------------------- */

.badge,
.chip,
.flow-chip,
.pill,
.tag{
  box-shadow: none !important;
  font-weight: 700;
  letter-spacing: .02em;
}

/* Ensure badges don’t turn into opaque white chips from older rules */
.badge{
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(255,255,255,.16) !important;
}

/* Optional: make secondary/ghost always glass */
.btn.secondary,
.btn.ghost,
a.btn.secondary,
a.btn.ghost{
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.16) !important;
  color: rgba(255,255,255,.90) !important;
}
/* =========================================================
   NEXT STRIP — match the black plate treatment (no gray)
   ========================================================= */
.next-strip{
  border: 1px solid rgba(255,255,255,.12) !important;
  background:
    radial-gradient(900px 360px at 20% 0%, rgba(200,161,43,.12), transparent 62%),
    radial-gradient(900px 520px at 80% 120%, rgba(255,255,255,.06), transparent 62%),
    linear-gradient(180deg, rgba(15,14,13,.70), rgba(15,14,13,.86)) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: rgba(255,255,255,.92);
}

/* make all text inside read as white */
.next-strip .k,
.next-strip .m{
  color: rgba(255,255,255,.92) !important;
}
.next-strip .m{ opacity: .82; }

/* if any links inside exist, keep them white */
.next-strip a{ color: rgba(255,255,255,.92) !important; }

/* OPTIONAL: if your buttons inherit dark text on light surfaces,
   force them to use your existing glass/dark variants */
.next-strip .btn.ghost,
.next-strip .btn.tertiary,
.next-strip .btn.secondary{
  color: rgba(255,255,255,.92) !important;
  border-color: rgba(255,255,255,.16) !important;
  background: rgba(255,255,255,.06) !important;

}/* =========================================================
   TOP RAIL: Back arrow button (matches Overview)
   ========================================================= */
.topbar-back{
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(15,14,13,.16);
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.topbar-back:hover{ background: rgba(15,14,13,.24); }

/* Back arrow icon */
.topbar-back .icon-back{
  width: 18px;
  height: 18px;
  position: relative;
  display: inline-block;
}
.topbar-back .icon-back::before{
  content:"";
  position:absolute;
  left: 2px;
  top: 50%;
  width: 14px;
  height: 2px;
  background: rgba(255,255,255,.86);
  transform: translateY(-50%);
  border-radius: 2px;
}
.topbar-back .icon-back::after{
  content:"";
  position:absolute;
  left: 2px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-left: 2px solid rgba(255,255,255,.86);
  border-bottom: 2px solid rgba(255,255,255,.86);
  transform: translateY(-50%) rotate(45deg);
  border-radius: 1px;
}

/* =========================
   CONTACT — black/ink panel treatment (matches your other sections)
   ========================= */

.page-contact .contact-card{
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(900px 360px at 18% 0%, rgba(200,161,43,.10), transparent 62%),
    linear-gradient(180deg, rgba(17,16,15,.96), rgba(12,11,10,.98));
  box-shadow:
    0 18px 52px rgba(0,0,0,.38),
    0 1px 0 rgba(255,255,255,.06) inset;
}

.page-contact .contact-card__head{
  padding: 18px 18px 14px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(700px 260px at 22% 0%, rgba(200,161,43,.14), transparent 60%),
    linear-gradient(180deg, rgba(22,20,18,.78), rgba(12,11,10,.90));
}

.page-contact .contact-card__body{
  padding: 18px;
  background:
    linear-gradient(180deg, rgba(15,14,13,.55), rgba(12,11,10,.70));
}

/* Force readable text inside the card */
.page-contact .contact-card .kicker,
.page-contact .contact-card .title,
.page-contact .contact-card p,
.page-contact .contact-card label,
.page-contact .contact-card .service-label{
  color: rgba(255,255,255,.92);
}

.page-contact .contact-card .muted{
  color: rgba(255,255,255,.72) !important;
}

.page-contact .contact-card a{
  color: rgba(255,255,255,.92);
  text-decoration-color: rgba(200,161,43,.55);
}
.page-contact .contact-card a:hover{
  text-decoration-color: rgba(200,161,43,.85);
}

/* Notice inside the form: keep it dark and consistent */
.page-contact .contact-card .notice{
  background: rgba(0,0,0,.26);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
}

/* The “Prefer the structured path?” strip — make it match */
.page-contact .min-strip{
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(700px 240px at 18% 0%, rgba(200,161,43,.10), transparent 60%),
    linear-gradient(180deg, rgba(17,16,15,.82), rgba(12,11,10,.90));
}

.page-contact .min-strip .title{
  margin: 0;
  font-weight: 900;
  letter-spacing: .02em;
  color: rgba(255,255,255,.92);
}

.page-contact .min-strip .muted{
  margin: 6px 0 0;
  color: rgba(255,255,255,.72) !important;
}
/* =========================
   DRAWER STATE STABILIZER
   ========================= */
.rail-drawer a,
.rail-drawer button{
  color: inherit;
  text-decoration: none;
}

.rail-drawer a:visited{
  color: inherit;
}

.rail-drawer a:hover,
.rail-drawer a:focus,
.rail-drawer a:focus-visible,
.rail-drawer button:hover,
.rail-drawer button:focus,
.rail-drawer button:focus-visible{
  outline: none;
  box-shadow: none;
  filter: none;
  text-decoration: none;
}
/* =========================================================
   FINAL OVERRIDE — RAIL DRAWER COLOR + STATES (LAST WINS)
   Paste this as the LAST block in overrides.css
   Purpose:
   - Force consistent link/text color in the OPEN drawer
   - Kill blue/purple visited + random hover/focus styling
   - Add one controlled brand-safe hover/focus highlight
   ========================================================= */

body.rail-open #railDrawer,
body.rail-open #railDrawer *{
  color: #FFFEFC !important;
  -webkit-text-fill-color: #FFFEFC !important;
  text-decoration-color: rgba(255,254,252,.65) !important;
  caret-color: #FFFEFC !important;
}

/* Normalize all link states */
body.rail-open #railDrawer a:link,
body.rail-open #railDrawer a:visited,
body.rail-open #railDrawer a:hover,
body.rail-open #railDrawer a:active,
body.rail-open #railDrawer a:focus,
body.rail-open #railDrawer a:focus-visible{
  color: #FFFEFC !important;
  -webkit-text-fill-color: #FFFEFC !important;
  text-decoration: none !important;
  outline: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Ensure clickable items look consistent */
body.rail-open #railDrawer a,
body.rail-open #railDrawer button{
  background: transparent !important;
  border-color: transparent !important;
}

/* Controlled hover/focus highlight (premium, brand-safe) */
body.rail-open #railDrawer a:hover,
body.rail-open #railDrawer a:focus-visible{
  background: rgba(200,161,43,.14) !important;
  box-shadow: inset 0 0 0 1px rgba(200,161,43,.22) !important;
  border-radius: 12px !important;
}

/* Optional: spacing so highlight looks intentional */
body.rail-open #railDrawer a{
  display: block !important;
  padding: 12px 14px !important;
  border-radius: 12px !important;
}
/* =========================================================
   FINAL OVERRIDE — FASTER / SMOOTHER DRAWER TRACKING
   (snappier open/close + GPU promotion)
   ========================================================= */

#railDrawer{
  transition: transform 140ms cubic-bezier(.2,.9,.2,1) !important; /* faster */
  will-change: transform !important;
  transform: translate3d(110%,0,0) !important; /* GPU */
  backface-visibility: hidden !important;
  contain: paint !important;
}

body.rail-open #railDrawer{
  transform: translate3d(0,0,0) !important;
}

#railOverlay{
  transition: opacity 120ms linear !important;
  will-change: opacity !important;
}

/* Optional: reduce “animation overhead” for users who prefer it */
@media (prefers-reduced-motion: reduce){
  #railDrawer, #railOverlay{ transition: none !important; }
}
/* ============================================
   IMAGE "BROKEN LINE" / SEAM KILL SWITCH
   - fixes inline-image baseline gap
   - fixes 1px seam under rounded containers
   - prevents link underline/border sneaking in
   ============================================ */

/* 1) Baseline gap: make images not inline */
img, svg, video, canvas{
  display:block;
  vertical-align: middle;
}

/* 2) Common card/media wrappers: ensure no seam + no underline artifacts */
.hero-plate__media,
.hero-panel .media,
.card-media,
.thumb,
.figure,
.image,
.image-wrap,
.hero-image,
.product-media,
.service-media{
  overflow:hidden;
  line-height:0;            /* kills “text baseline” space if wrapper is inline-ish */
  text-decoration:none;     /* if wrapper is <a> */
  border-bottom:0;          /* if underline is implemented as border */
}

/* 3) If your image is inside a link, kill default underline behavior */
a img{
  border:0;
}
.brand-mark img{
  display:block;      /* kills baseline gap */
  height:auto;
}

.brand-mark{
  display:flex;
  align-items:center;
  gap:12px;           /* if you want spacing */
}

.brand-plate__row{
  line-height:0;      /* prevents text-baseline artifacts inside the row */
}

.brand-mark > div{
  line-height:1.2;    /* restore readable text line-height for the text column */
}
/* WIDEN THE PAGE (global) */
:root{
  --page-max: 1320px; /* try 1240 / 1320 / 1440 */
  --page-pad: 24px;   /* side padding */
}

.page,
.shell,
.container,
.wrap,
.main{
  max-width: var(--page-max) !important;
  width: min(100%, var(--page-max)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--page-pad) !important;
  padding-right: var(--page-pad) !important;
}
/* =========================
   CORPORATE MOTION: GUTTER TEXTURE ONLY
   ========================= */

/* video layer sits behind everything */
.bg-motion{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: var(--frame-3, #141311); /* fallback */
}

.bg-motion__vid{
  position: absolute;
  inset: -12%;
  width: 124%;
  height: 124%;
  object-fit: cover;
  filter: blur(22px) saturate(0.85) contrast(1.06);
  opacity: 0.14;              /* keep it subtle */
  transform: translateZ(0);
}

/* dark wash for readability + brand tone */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 520px at 18% 0%, rgba(200,161,43,.06), transparent 60%),
    linear-gradient(180deg, rgba(15,14,13,.78), rgba(15,14,13,.88));
}

/* keep ALL site content above motion layer */
body{ position: relative; }
.page, .shell, .wrap, .container, header, main, footer{
  position: relative;
  z-index: 1;
}
/* Mobile rail simplification: remove the long text block */
@media (max-width: 720px){
  .topbar-box{ display: none !important; }

  /* tighten spacing so brand + actions fit clean */
  .topbar-rail{ gap: 10px !important; }
  .topbar-brand__name{ letter-spacing: .06em; font-size: 12px; }
  .topbar-actions{ gap: 8px; }
  .cta-run-top{ padding: 10px 12px; }
}
/* =========================================================
   GLOBAL LAYOUT LOCK (center + fit screen)
   Paste at END of overrides.css
   ========================================================= */

/* 1) A single container width system */
:root{
  --page-max: 1320px;
  --page-pad: 16px; /* mobile */
}

/* 2) Center the main page wrapper and keep it within viewport */
.page{
  width: min(var(--page-max), calc(100vw - (var(--page-pad) * 2))) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* 3) Ensure all major blocks/cards stretch to container width (no “floating left”) */
.page > main,
.page > main > section,
.hero-panel,
.site-section,
.section-head,
.how-strip,
.stack-strip,
.services-grid,
.insights-grid,
.next-strip,
.site-footer{
  width: 100% !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* 4) Kill accidental horizontal scroll from wide children */
html, body{
  max-width: 100%;
  overflow-x: hidden;
}
.page *{
  max-width: 100%;
  box-sizing: border-box;
}
img, video, svg, canvas{
  max-width: 100%;
  height: auto;
}

/* 5) Make grids collapse cleanly on mobile */
@media (max-width: 900px){
  .services-grid,
  .insights-grid{
    grid-template-columns: 1fr !important;
  }
}

/* 6) Keep comfortable side padding by screen size */
@media (min-width: 721px){
  :root{ --page-pad: 24px; }
}
@media (min-width: 1100px){
  :root{ --page-pad: 28px; }
}
/* =========================================================
   MOBILE TOP RAIL: MENU ON LEFT (replaces back)
   ========================================================= */
@media (max-width: 720px){

  /* 1) Remove back button */
  #railBack{ display: none !important; }

  /* 2) Hide the center text box (if you haven’t already) */
  .topbar-box{ display: none !important; }

  /* 3) Make rail the positioning context */
  .topbar-rail{
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding-left: 56px !important;  /* space reserved for left menu button */
  }

  /* 4) Put hamburger on the left (same button, just repositioned) */
  #railToggle{
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }

  /* 5) Keep brand centered */
  .topbar-brand{
    margin: 0 auto !important;
  }

  /* 6) Keep actions on the right, but don’t “own” the left anymore */
  .topbar-actions{
    margin-left: auto !important;
    gap: 8px !important;
  }

  /* Optional: tighten CTA so it fits */
  .cta-run-top{ padding: 10px 12px !important; }
  .topbar-brand__name{ font-size: 12px !important; letter-spacing: .06em !important; }
}
/* =========================================================
   GLOBAL MOBILE TEXT FIT + CENTER (no overflow)
   ========================================================= */
@media (max-width: 720px){

  /* 1) No horizontal overflow from long strings */
  .page, .page *{
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Allow breaking anywhere when needed (emails/urls/long tokens) */
  p, li, a, .muted, .desc, .service-text, .footer-muted, .chip-lite, .flow-chip{
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    hyphens: auto;
  }

  /* 2) Center text inside the main “section box” components */
  .section-head,
  .hero-lockup,
  .notice,
  .credits-strip,
  .next-strip,
  .how-step,
  .service-card,
  .insight-card,
  .site-footer{
    text-align: center !important;
  }

  /* 3) Center common inner rows/chips/buttons so they don’t look off */
  .hero-actions,
  .badges,
  .stack-flow,
  .credits-strip .credits-chips{
    justify-content: center !important;
  }

  /* 4) Remove left-indents that cause “looks off-center” */
  .credits-strip .credits-left{
    min-width: 0 !important;
  }

  /* 5) Slightly tighter line-height + padding so copy fits better */
  .hero-thesis{ font-size: 16px !important; line-height: 1.45 !important; }
  .hero-kicker{ font-size: 13px !important; line-height: 1.55 !important; }

  .section-head,
  .how-step,
  .service-card,
  .insight-card{
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}/* FIX: “INSTALL / PROXY / DEFER / REJECT” labels readable on mobile */
@media (max-width: 720px){

  /* The whole “Bounded rulings” chip row */
  .stack-flow,
  .flow-chip{
    color: rgba(255,255,255,.92) !important;
  }

  /* The mono token inside each chip (INSTALL/PROXY/DEFER/REJECT) */
  .flow-chip .mono{
    color: rgba(255,255,255,.92) !important;
    opacity: 1 !important;
  }

  /* If the token is coming from another element (common) */
  .flow-chip strong,
  .flow-chip b,
  .flow-chip .kicker,
  .flow-chip .tag{
    color: rgba(255,255,255,.92) !important;
  }
}
@media (max-width: 720px){
  #how .stack-flow .flow-chip,
  #how .stack-flow .flow-chip *{
    color: rgba(255,255,255,.92) !important;
  }
}
/* MOBILE: center ALL System cards (JANUS / HOLD / DAIS) */
@media (max-width: 720px){

  /* 1) One column, full width */
  .services-grid{
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    gap: 14px !important;
  }

  /* 2) Every card centered and same width */
  .services-grid .service-card{
    width: 100% !important;
    max-width: 520px !important;  /* adjust: 480–560 */
    margin: 0 auto !important;
  }

  /* 3) Kill any “featured” special sizing/offset on mobile */
  .services-grid .service-card.is-featured{
    grid-column: auto !important;
    transform: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
/* =========================================================
   GLOBAL: center mobile section title cards (all pages)
   ========================================================= */
@media (max-width: 720px){

  /* Center all section header/title blocks */
  .section-head,
  .section-head--banner,
  .section-head--system,
  .hero-panel .section-head,
  .site-hero .section-head{
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    max-width: 520px !important; /* keeps it visually centered */
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* Center the actual heading + subtitle text */
  .section-head h1,
  .section-head h2,
  .section-head h3,
  .section-head p,
  .section-head .muted{
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* If any title cards use a background layer, keep it centered too */
  .section-head__bg{
    left: 50% !important;
    transform: translateX(-50%) !important;
    right: auto !important;
  }
}
@media (max-width: 720px){
  .site-section > h2,
  .site-section > .muted{
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
/* =========================================================
   MOBILE FOOTER: 3 stacked sections (Start / Learn / Support)
   Each section uses 2-column links
   ========================================================= */
@media (max-width: 720px){

  /* overall footer layout becomes a single column stack */
  .site-footer .footer-grid{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    text-align: left !important;
  }

  /* brand stays on top, centered */
  .site-footer .footer-brand{
    text-align: center !important;
    padding-bottom: 6px !important;
    border-bottom: 1px solid rgba(255,255,255,.10) !important;
  }

  /* each section becomes its own “row card” */
  .site-footer .footer-col{
    padding: 14px 12px !important;
    border-radius: 16px !important;
    background: rgba(255,255,255,.04) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
  }

  /* section header centered */
  .site-footer .footer-head{
    text-align: center !important;
    letter-spacing: .12em !important;
    font-weight: 900 !important;
    margin-bottom: 10px !important;
  }

  /* 2-column link layout inside each section */
  .site-footer .footer-col{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px 10px !important;
    align-items: start !important;
  }

  /* keep the header spanning both columns */
  .site-footer .footer-col .footer-head{
    grid-column: 1 / -1 !important;
    margin: 0 0 10px 0 !important;
  }

  /* each link becomes a compact chip */
  .site-footer .footer-link{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 10px 10px !important;
    border-radius: 12px !important;
    background: rgba(0,0,0,.22) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    color: rgba(255,255,255,.90) !important;
    text-decoration: none !important;
  }

  .site-footer .footer-link:active{
    transform: translateY(1px);
  }

  /* small footer mini line */
  .site-footer .footer-mini{
    margin-top: 10px !important;
    opacity: .78 !important;
  }
}
/* MOBILE: force HOLD card to align exactly like the others */
@media (max-width: 720px){

  /* Target HOLD specifically */
  .service-card.pkg-hold{
    width: 100% !important;
    max-width: 520px !important;
    margin-left: auto !important;
    margin-right: auto !important;

    left: auto !important;
    right: auto !important;
    transform: none !important;
    justify-self: center !important;
  }

  /* If HOLD has an accent strip/pseudo-element that is shifting the box */
  .service-card.pkg-hold::before,
  .service-card.pkg-hold::after{
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
  }
}
@media (max-width: 720px)
  .service-card.pkg-hold .service-head,
  .service-card.pkg-hold .service-body,
  .service-card.pkg-hold .service-footer{
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center !important;
  }
/* =========================================================
   MOBILE FIX: pills/bubbles + buttons should contain text
   ========================================================= */
@media (max-width: 720px)

  /* 1) Buttons: never let label escape */
  .hero-actions{
    display: grid;
    grid-template-columns: 1fr; /* stack */
    gap: 10px;
  }
  .hero-actions .btn{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100%;
    min-height: 48px;      /* avoid fixed-height clipping */
    height: auto !important;

    padding: 12px 14px !important;
    line-height: 1.15 !important;
    text-align: center;

    white-space: normal !important;   /* allow wrapping */
    overflow: hidden;                 /* contain */
    text-overflow: ellipsis;
  }

  /* 2) “Bubbles” (pills/chips/points): make them real containers */
  .pills, .stack-flow, .product-points{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-start;
  }

  .pill,
  .flow-chip,
  .stack-chip,
  .product-point{
    display: inline-flex !important;
    align-items: center !important;

    max-width: 100%;
    padding: 8px 10px !important;

    line-height: 1.15 !important;
    white-space: normal !important;     /* wrap inside bubble */
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  /* 3) If your pill style uses pseudo-elements, stop them from clipping text */
  .pill::before, .pill::after,
  .product-point::before, .product-point::after,
  .flow-chip::before, .flow-chip::after{
    max-width: 100%;
  }
  /* =========================================================
   MOBILE: pills should stretch to fit text (no overflow look)
   ========================================================= */
@media (max-width: 720px){

  /* make the container lay out rows cleanly */
  .pills, .stack-flow, .product-points{
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: stretch !important;
  }

  /* OPTION A (recommended): pills become full-width rows on mobile */
  .pill,
  .flow-chip,
  .stack-chip,
  .product-point{
    display: inline-flex !important;
    align-items: center !important;

    flex: 1 1 100% !important;   /* <-- forces a proper stretched pill row */
    width: 100% !important;
    max-width: 100% !important;

    padding: 10px 12px !important;
    line-height: 1.2 !important;

    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;

    height: auto !important;     /* let the pill grow with wrapped text */
    min-height: 0 !important;
  }

  /* If any global styles are clipping the pill’s background */
  .pill, .flow-chip, .stack-chip, .product-point{
    overflow: visible !important;
  }
}
/* =========================================================
   MOBILE FIX: kill circle bubbles + stop mid-word breaks
   ========================================================= */
@media (max-width: 720px){

  /* --- 1) Deliverable "bubbles" should be pills, not circles --- */
  .product-points{
    display: grid !important;
    gap: 10px !important;
  }

  /* these are your “bubbles” in the deliverable list */
  .product-point{
    /* remove anything that forces a circle */
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;

    /* make it a real pill row */
    display: block !important;
    border-radius: 999px !important;
    padding: 10px 14px !important;

    /* keep text readable */
    line-height: 1.25 !important;
    text-align: left !important;

    /* IMPORTANT: no breaking inside words */
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }

  /* --- 2) Pills/chips elsewhere: also stop breaking inside words --- */
  .pill, .flow-chip, .stack-chip{
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
    line-height: 1.2 !important;
  }

  /* --- 3) Buttons: prevent “Decisio n” word splitting --- */
  .hero-actions{
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .hero-actions .btn{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    min-height: 48px !important;
    height: auto !important;

    padding: 12px 14px !important;
    line-height: 1.15 !important;
    text-align: center !important;

    /* prevent mid-word breaks */
    white-space: normal !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }

}

@media (max-width: 720px){
  .product-point{
    text-align: center !important;
    justify-content: center !important; /* harmless if display:block */
  }

  /* if your <strong> makes the first line look “off-center”, normalize it */
  .product-point strong{
    display: inline; /* keep natural flow */
  }
}
/* =========================================================
   MOBILE CONTACT FORM — HARD CONTAIN + CENTER (NO :has)
   Put this at the END of overrides.css
   ========================================================= */

@media (max-width: 720px){

  /* 0) Make width math sane */
  *, *::before, *::after{ box-sizing: border-box; }

  /* 1) Pick your “contact panel” wrappers (safe list)
        Add/remove classnames that match YOUR contact section */
  .contact-form,
  .form-card,
  .portal-card,
  .form,
  #contactForm,
  .contact-box,
  .contact-card{
    width: calc(100% - 28px) !important;   /* 14px gutters */
    max-width: 560px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    box-sizing: border-box !important;

    /* If a parent is flex/grid and squeezing weirdly, this prevents “won’t shrink” overflow */
    min-width: 0 !important;
  }

  /* 2) If your form or its direct child is a flex item, it can overflow.
        This forces shrink-to-fit behavior. */
  .contact-form form,
  .form-card form,
  .portal-card form,
  #contactForm form,
  form#contactForm{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 auto !important;
  }

  /* 3) THE IMPORTANT PART: clamp the white inputs/textarea/select */
  .contact-form input,
  .contact-form textarea,
  .contact-form select,
  .form-card input,
  .form-card textarea,
  .form-card select,
  .portal-card input,
  .portal-card textarea,
  .portal-card select,
  #contactForm input,
  #contactForm textarea,
  #contactForm select,
  form#contactForm input,
  form#contactForm textarea,
  form#contactForm select{
    display: block !important;

    /* overrides any 100vw / fixed widths */
    width: 100% !important;
    max-width: 100% !important;

    /* prevents flex overflow + long placeholder overflow */
    min-width: 0 !important;

    /* if you had padding + width issues, this fixes it */
    box-sizing: border-box !important;
  }

  /* 4) Clamp the submit button inside the same container */
  .contact-form button,
  .form-card button,
  .portal-card button,
  #contactForm button,
  form#contactForm button{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* 5) Last resort: if something still pushes left, stop horizontal page bleed */
  body{ overflow-x: hidden; }
}
/* =========================================================
   CONTACT PAGE — MOBILE CONTAIN + STACK ACTIONS (TOPBAR SAFE)
   Paste at VERY END of overrides.css
   Requires: <body class="page-contact"> on contact.html
   ========================================================= */

@media (max-width: 720px){

  /* 0) Stop page-level horizontal bleed (contact only) */
  body.page-contact{ overflow-x: hidden; }
  body.page-contact *,
  body.page-contact *::before,
  body.page-contact *::after{ box-sizing: border-box !important; }

  /* 1) Center + constrain the contact card/window itself */
  body.page-contact .contact-card{
    width: calc(100% - 28px) !important;   /* 14px gutters */
    max-width: 560px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* 2) Make sure inner containers can shrink (fix flex/grid squeeze) */
  body.page-contact .contact-card__body,
  body.page-contact form.form{
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* 3) HARD CONTAIN: kill the usual overflow culprits on fields */
  body.page-contact form.form :is(input, textarea, select){
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: block !important;
    box-sizing: border-box !important;

    /* kill “center hacks” that push left/right */
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    position: static !important;
  }

  /* 4) STACK the 3 action buttons on mobile (prevents row overflow) */
  body.page-contact .form-actions{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    align-items: stretch !important;
  }

  body.page-contact .form-actions :is(.btn, button, a.btn){
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;

    /* allow long labels to wrap instead of spilling */
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  /* 5) Safety: NEVER let this patch touch topbar sizing */
  body.page-contact .topbar :is(a, button, .btn){
    width: auto !important;
    max-width: none !important;
    white-space: nowrap !important;
  }
}
/* =========================================================
   BG MOTION — EDGE CALIBRATION PASS (MOTION-SAFE DROP-IN)
   Replace ALL your existing bg-motion CSS with this block.

   Guarantees motion:
   - DOES NOT pin dashoffset with !important
   - Includes CSS fallback animation (runs if JS doesn’t)
   - JS can still override by writing dashoffset every frame
   - NEVER touches topbar/rail positioning
   ========================================================= */

/* Background layer: fixed, no layout impact */
.bg-motion{
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Paint order only (do NOT set position on topbar here) */
.page{ position: relative; z-index: 1; }
.topbar, .rail-drawer, .rail-overlay{ z-index: 10; }

/* Ink base */
.bg-motion::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(110% 70% at 30% 10%,
      rgba(200,161,43,.08),
      rgba(15,14,13,.05) 45%,
      rgba(15,14,13,0) 72%
    ),
    radial-gradient(80% 60% at 70% 90%,
      rgba(200,161,43,.04),
      rgba(15,14,13,0) 70%
    ),
    linear-gradient(180deg,
      var(--ink, #0F0E0D),
      #0B0A09 65%,
      #070606
    );
}

/* SVG overlay fills viewport */
.bg-motion__svg{
  position:absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display:block;
}

/* Perimeter track (faint) */
.bg-motion__track{
  fill: none;
  stroke: rgba(200,161,43,.16);
  stroke-width: 3px;
  vector-effect: non-scaling-stroke;
}

/* =========================================================
   MAIN SWEEP
   - JS animates stroke-dashoffset (preferred)
   - CSS fallback animation also provided (so motion still exists
     even if JS doesn’t run on some pages)
   ========================================================= */

.bg-motion__sweep{
  fill: none;
  stroke: var(--gold, #C8A12B);
  stroke-width: 3.8px;
  vector-effect: non-scaling-stroke;

  /* machinist vibe */
  stroke-linecap: butt;
  stroke-linejoin: miter;
  stroke-miterlimit: 2;

  /* segment geometry (works with rect pathLength=384) */
  stroke-dasharray: 64 520;

  /* IMPORTANT: do NOT lock dashoffset with !important */
  stroke-dashoffset: 0;

  will-change: stroke-dashoffset;

  filter:
    drop-shadow(0 0 6px rgba(200,161,43,.18))
    drop-shadow(0 0 12px rgba(200,161,43,.10));

  /* CSS fallback motion (JS will visually “take over” if running) */
  animation: bgPerimeterFallback 7s linear infinite;
}

/* Ghost for “double registration” beats */
.bg-motion__sweep-ghost{
  fill: none;
  stroke: var(--gold, #C8A12B);
  stroke-width: 3.8px;
  vector-effect: non-scaling-stroke;

  stroke-linecap: butt;
  stroke-linejoin: miter;
  stroke-miterlimit: 2;

  stroke-dasharray: 64 520;
  stroke-dashoffset: 0;

  opacity: 0;
  filter: none;

  will-change: stroke-dashoffset, transform, opacity;

  /* keep ghost aligned with fallback when JS is absent */
  animation: bgPerimeterFallback 7s linear infinite;
}

/* CSS fallback (pathLength=384) */
@keyframes bgPerimeterFallback{
  to { stroke-dashoffset: -384; }
}

/* Micro ticks (JS pops opacity on individual <line> elements) */
.bg-motion__ticks line{
  stroke: rgba(200,161,43,.70);
  stroke-width: 2px;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  transition: opacity 90ms linear;
}

/* Probe path (JS toggles .is-on) */
.bg-motion__probe{
  fill: none;
  stroke: var(--gold, #C8A12B);
  stroke-width: 3.25px;
  vector-effect: non-scaling-stroke;

  stroke-linecap: butt;
  stroke-linejoin: miter;
  stroke-miterlimit: 2;

  opacity: 0;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;

  will-change: stroke-dashoffset, opacity;
}

/* Probe animation */
.bg-motion__probe.is-on{
  opacity: .95;
  animation: bgProbeRun 900ms linear forwards;
}

@keyframes bgProbeRun{
  0%   { stroke-dashoffset: 1;     opacity: 0; }
  10%  { opacity: .95; }
  55%  { stroke-dashoffset: 0.15; }
  100% { stroke-dashoffset: -0.85; opacity: 0; }
}

/* Reduced motion (keeps static perimeter, stops fallback + probe anim) */
@media (prefers-reduced-motion: reduce){
  .bg-motion__sweep,
  .bg-motion__sweep-ghost{ animation: none !important; }
  .bg-motion__probe{ animation: none !important; }
}
/* ===== Fix: bottom white strip during scroll (mobile) ===== */
html{
  background: var(--ink);
  background-color: var(--ink);
  height: 100%;
}

body{
  background: var(--ink);
  background-color: var(--ink);
  min-height: 100%;
  margin: 0;
  overflow-x: hidden;
}

/* If you have a main wrapper, make sure it can't be transparent */
.page, #main, main{
  background: transparent;
}
/* Prevent overscroll background reveal */
html, body{
  overscroll-behavior-y: none;
}
 /* Background layer guard (only if you use a bg pseudo element) */
body::before{
  content: "";
  position: fixed;
  inset: 0;
  background: var(--ink);
  z-index: -1;
  transform: translateZ(0);
}
/* Cheaper glass on mobile */
@media (max-width: 720px){
  .glass, .hero-glass, .card-glass{
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}
/* Promote fixed + heavy elements */
.topbar, .bottom-rail, .rail, .hero-video, video{
  transform: translateZ(0);
  will-change: transform;
}
/* Apply to large sections/cards lists */
.section, .block, .panel, .card{
  content-visibility: auto;
  contain-intrinsic-size: 800px; /* rough placeholder height */
}
/* ============================================
   Global Desktop Normalizer (layout, not zoom)
   Paste at bottom of overrides.css
   ============================================ */

@media (min-width: 1024px){
  /* 1) Keep page from feeling “too close” by clamping content width */
  :root{
    --page-max: 1180px;  /* try 1120–1280 depending on your design */
    --page-pad:  28px;
  }

  /* 2) Let background breathe full width, but keep content centered */
  body{
    overflow-x: hidden;
  }

  /* If you have a standard wrapper/container class, this hits most sites */
  .page, .wrap, .container, .shell, main{
    width: min(var(--page-max), calc(100% - (var(--page-pad) * 2)));
    margin-left: auto;
    margin-right: auto;
  }

  /* 3) Prevent accidental “viewport-width” sections from forcing everything wide */
  section, header, footer{
    max-width: 100%;
  }

  /* 4) If any big blocks are using 100vw, make them behave */
  .fullbleed, .hero, .topbar, .bottombar{
    width: 100%;
    max-width: 100%;
  }

  /* 5) Safety: if something set a global scale, neutralize it */
  html, body{
    transform: none !important;
    zoom: 1 !important;
  }
}
/* =========================================================
   INSIGHTS — Style ONLY .insights-scope (footer untouched)
   Requires: <body class="insights">
   ========================================================= */

body.insights{ background: var(--ink); }

/* Everything we change is ONLY inside .insights-scope */
body.insights .insights-scope{
  color: var(--sheet);
}

body.insights .insights-scope > *{
  background: linear-gradient(180deg, var(--frame-2), var(--frame-3)) !important;
  border: 1px solid rgba(200,161,43,.18) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.35) !important;
  border-radius: 18px;
}

body.insights .insights-scope > * > *{
  background: transparent !important;
}

body.insights .insights-scope :where(h1,h2,h3){
  color: var(--sheet) !important;
}

body.insights .insights-scope :where(p,li,small,span){
  color: rgba(255,254,252,.88) !important;
}

body.insights .insights-scope a{
  color: var(--gold) !important;
}
body.insights .insights-scope a:hover{
  color: var(--gold-2) !important;
}
/* =========================================================
   INSIGHTS — Company Black-Box Treatment (MAIN ONLY)
   - Requires: <body class="insights">
   - Guaranteed: does NOT change footer (no footer rules at all)
   ========================================================= */

/* Page background only (safe) */
body.insights{
  background: var(--ink);
}

/* IMPORTANT: text color is scoped to MAIN only (prevents footer inheritance) */
body.insights main,
body.insights #main{
  color: var(--sheet);
}

/* ---- Content blocks: style only children of MAIN, and exclude footer wrappers ---- */
body.insights main > *:not(footer):not(.site-footer):not(.footer){
  background: linear-gradient(180deg, var(--frame-2), var(--frame-3)) !important;
  border: 1px solid rgba(200,161,43,.18) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.35) !important;
  border-radius: 18px;
}

/* If you have nested wrappers inside each section, prevent double backgrounds */
body.insights main > *:not(footer):not(.site-footer):not(.footer) > *{
  background: transparent !important;
}

/* Typography ONLY in MAIN (footer untouched) */
body.insights main :where(h1,h2,h3){
  color: var(--sheet) !important;
}
body.insights main :where(p,li,small,span){
  color: rgba(255,254,252,.88) !important;
}

/* Links ONLY in MAIN (footer untouched) */
body.insights main a{
  color: var(--gold) !important;
}
body.insights main a:hover{
  color: var(--gold-2) !important;
}
/* SOCIAL ICON ROW */
.social{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:12px;
}

.social-link{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:999px;

  /* glassy chip */
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);

  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}

.social-link svg{
  width:18px;
  height:18px;
  fill: currentColor;
  color: rgba(255,255,255,.85); /* assumes dark footer */
}

.social-link:hover{
  transform: translateY(-1px);
  border-color: rgba(200,161,43,.45); /* your gold */
  background: rgba(200,161,43,.10);
}

.social-link:focus-visible{
  outline: 2px solid rgba(200,161,43,.75);
  outline-offset: 3px;
}
/* =========================================================
   index-overrides.css  (INDEX-ONLY POP)
   Keep this AFTER your inline <style> or as the LAST file.
   Scope: index page only (uses existing classes: .stage/.lockup/.btn/.shade)
   ========================================================= */

/* 1) Slight lift in contrast + warmth */
.stage{
  background: #000;
}

/* 2) Make the readability shade feel “premium” (richer left focus) */
.shade{
  background:
    radial-gradient(980px 720px at 18% 44%,
      rgba(200,161,43,.10),
      rgba(0,0,0,.82) 70%),
    radial-gradient(900px 620px at 78% 18%,
      rgba(255,255,255,.06),
      rgba(0,0,0,.64) 58%),
    linear-gradient(90deg,
      rgba(0,0,0,.72),
      rgba(0,0,0,.20) 58%,
      rgba(0,0,0,.62));
}

/* 3) Give the lockup a “halo edge” and more depth (no layout changes) */
.lockup{
  position: relative;
  border-color: rgba(255,255,255,.18);
  box-shadow:
    0 40px 120px rgba(0,0,0,.72),
    0 14px 40px rgba(0,0,0,.35);
}

.lockup::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: inherit;
  pointer-events:none;
  /* subtle gold edge + cool highlight for glass */
  background:
    linear-gradient(180deg, rgba(200,161,43,.22), rgba(255,255,255,.10) 48%, rgba(200,161,43,.12));
  /* show only as a thin rim */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  padding:1px;
  opacity:.85;
}

.lockup::after{
  content:"";
  position:absolute;
  inset:-18px;
  border-radius: 32px;
  pointer-events:none;
  /* soft bloom behind the card */
  background:
    radial-gradient(420px 240px at 22% 22%,
      rgba(200,161,43,.16),
      transparent 70%),
    radial-gradient(520px 300px at 70% 72%,
      rgba(255,255,255,.06),
      transparent 72%);
  filter: blur(10px);
  opacity:.9;
  z-index:-1;
}

/* 4) Headline: tiny glow + tighter tracking */
h1{
  letter-spacing: -0.028em;
  text-shadow:
    0 2px 18px rgba(0,0,0,.55),
    0 0 34px rgba(200,161,43,.12);
}

/* 5) Subhead: slightly brighter + cleaner */
.subhead{
  color: rgba(255,255,255,.86);
}

/* 6) Buttons: add “pressable” feel and a premium sheen */
.btn{
  transform: translateZ(0);
}

.btn.primary{
  box-shadow:
    0 14px 30px rgba(0,0,0,.44),
    0 0 0 1px rgba(0,0,0,.25) inset;
  position:relative;
  overflow:hidden;
}

.btn.primary::after{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  /* moving sheen on hover (subtle) */
  background: linear-gradient(110deg,
    transparent 0%,
    rgba(255,255,255,.20) 28%,
    transparent 52%);
  transform: translateX(-46%);
  opacity:0;
  transition: transform .35s ease, opacity .2s ease;
}

.btn.primary:hover::after{
  transform: translateX(46%);
  opacity:.65;
}

.btn.secondary{
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 10px 20px rgba(0,0,0,.26);
}

.btn.secondary:hover{
  border-color: rgba(200,161,43,.28);
}

/* 7) Actions row: a touch more separation */
.actions{
  gap: 14px;
}

/* 8) Fineprint: cleaner, less “dead” */
.fineprint{
  color: rgba(255,255,255,.62);
}

/* 9) Optional: micro “film grain” overlay for richness (very subtle) */
.stage::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:3;
  opacity:.06;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.10) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,.08) 0 1px, transparent 1px),
    radial-gradient(circle at 40% 80%, rgba(255,255,255,.06) 0 1px, transparent 1px);
  background-size: 220px 220px, 260px 260px, 300px 300px;
  mix-blend-mode: overlay;
}

/* Mobile polish */
@media (max-width: 520px){
  .lockup{
    border-radius: 22px;
  }
  .actions{
    gap: 10px;
  }
}
/* ALT CTA (use for SIGN IN): glass/dark, not gold */
.cta-run-top.cta-run-top--alt{
  border: 1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(140% 140% at 20% 20%, rgba(255,255,255,.10), transparent 58%),
    linear-gradient(180deg, rgba(43,47,52,.90), rgba(20,19,18,.96));
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 18px 42px rgba(0,0,0,.22);
}

.cta-run-top.cta-run-top--alt .cta-run-top__label{
  color: rgba(255,255,255,.92);
}

.cta-run-top.cta-run-top--alt .cta-run-top__arrow{
  color: rgba(255,255,255,.78);
}
/* =========================================================
   SIGN IN — GLOBAL BUTTON OVERRIDE
   Makes ALL buttons on signin page use the cool black style
   ========================================================= */
.page-signin .btn,
.page-signin a.btn,
.page-signin button.btn{
  color: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(255,255,255,.16) !important;

  background:
    radial-gradient(140% 140% at 20% 20%, rgba(255,255,255,.08), transparent 58%),
    linear-gradient(180deg, rgba(22,20,18,.95), rgba(12,11,10,.98)) !important;

  box-shadow:
    0 1px 0 rgba(255,255,255,.08) inset,
    0 18px 42px rgba(0,0,0,.20) !important;

  text-decoration: none;
}

/* Keep hover consistent */
.page-signin .btn:hover{
  filter: brightness(1.06);
}

/* If you have CTA chips/rail buttons on signin that use .cta-run-top */
.page-signin .cta-run-top{
  border-color: rgba(255,255,255,.16) !important;
  background:
    radial-gradient(140% 140% at 20% 20%, rgba(255,255,255,.08), transparent 58%),
    linear-gradient(180deg, rgba(22,20,18,.95), rgba(12,11,10,.98)) !important;
}

/* Optional: ensure any "primary/secondary/ghost" variants don't fight it */
.page-signin .btn.primary,
.page-signin .btn.secondary,
.page-signin .btn.ghost,
.page-signin .btn.tertiary{
  background:
    radial-gradient(140% 140% at 20% 20%, rgba(255,255,255,.08), transparent 58%),
    linear-gradient(180deg, rgba(22,20,18,.95), rgba(12,11,10,.98)) !important;
  border-color: rgba(255,255,255,.16) !important;
  color: rgba(255,255,255,.92) !important;
}
/* NEXT STEP: keep the three buttons on one line (desktop/tablet), stack only on mobile */
.next-strip .row{
  align-items: center;
}

.next-actions{
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 10px !important;
  justify-content: flex-end;
  align-items: center;
  width: auto;
}

.next-actions .btn{
  white-space: nowrap;
  padding-left: 14px;
  padding-right: 14px;
}

/* On small screens, allow wrapping so buttons don’t overflow */
@media (max-width: 720px){
  .next-actions{
    flex-wrap: wrap !important;
    justify-content: flex-start;
  }
}
/* NEXT STEP: force the CTA buttons into a single row (override global hero-actions) */
.next-strip .row .hero-actions.next-actions{
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 10px !important;
  align-items: center !important;
  justify-content: flex-end !important;
  width: auto !important;
}

.next-strip .row .hero-actions.next-actions > .btn{
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

/* Mobile: allow wrapping so it doesn't overflow */
@media (max-width: 720px){
  .next-strip .row .hero-actions.next-actions{
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
  }
}
/* =========================================================
   GLOBAL: any button/link that goes to signin.html = black style
   (matches top-rail SIGN IN look)
   ========================================================= */

/* 1) Anchor buttons that link to signin */
a.btn[href$="signin.html"],
a.btn[href*="signin.html#"],
a.btn[href*="signin.html?"]{
  color: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  background:
    radial-gradient(140% 140% at 20% 20%, rgba(255,255,255,.08), transparent 58%),
    linear-gradient(180deg, rgba(22,20,18,.95), rgba(12,11,10,.98)) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.08) inset,
    0 18px 42px rgba(0,0,0,.20) !important;
  text-decoration: none;
}

a.btn[href$="signin.html"]:hover,
a.btn[href*="signin.html#"]:hover,
a.btn[href*="signin.html?"]:hover{
  filter: brightness(1.06);
}

/* 2) If any "SIGN IN" is using your topbar CTA class, keep it consistent */
a.cta-run-top[href$="signin.html"],
a.cta-run-top[href*="signin.html#"],
a.cta-run-top[href*="signin.html?"]{
  border-color: rgba(255,255,255,.16) !important;
  background:
    radial-gradient(140% 140% at 20% 20%, rgba(255,255,255,.08), transparent 58%),
    linear-gradient(180deg, rgba(22,20,18,.95), rgba(12,11,10,.98)) !important;
}
/* =========================================================
   Minimal modal (glass) — Pause Protocol
   ========================================================= */
.pe-modal{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
}
.pe-modal.is-open{ display: block; }

.pe-modal__overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
  border: 0;
}

.pe-modal__panel{
  position: relative;
  width: min(720px, calc(100% - 28px));
  margin: 10vh auto 0;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  box-shadow: 0 40px 120px rgba(0,0,0,.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: rgba(255,255,255,.92);
  overflow: hidden;
}

.pe-modal__head{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 10px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.pe-modal__title{
  margin: 0;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: .01em;
  font-weight: 900;
}
.pe-modal__close{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(15,14,13,.18);
  color: rgba(255,255,255,.92);
  cursor: pointer;
}

.pe-modal__body{
  padding: 14px 16px 4px;
}
.pe-modal__list{
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 10px;
}
.pe-modal__list strong{ color: rgba(255,255,255,.95); }

.pe-modal__foot{
  padding: 12px 16px 16px;
  display:flex;
  justify-content: flex-end;
  border-top: 1px solid rgba(255,255,255,.10);
}

@media (max-width: 720px){
  .pe-modal__panel{ margin-top: 8vh; }
}
/* =========================================================
   Packs: shift the left labels ("Price", "Good for") inward
   (the "most inner box" text padding)
   ========================================================= */
.packs-layout .packs-grid .service-band .service-row .service-label{
  padding-left: 10px !important;   /* move "Price" / "Good for" right */
}

/* Optional: if you also want the value column nudged */
.packs-layout .packs-grid .service-band .service-row .service-text{
  padding-left: 6px !important;
}
/* Drawer footer: stack CTAs nicely */
.rail-foot{
  display:grid;
  gap:12px;
}

/* Secondary CTA styling (inherits your base rail-cta look, just calmer) */
.rail-cta.rail-cta-secondary{
  opacity:.9;
  filter:saturate(.95);
}
/* Topbar CTAs: no arrow, slightly tighter */
.topbar-actions .cta-run-top{ padding-right: 14px; }

/* =========================================================
   TOP RAIL — Mobile fit (Option A: hide brand pill)
   Drop into overrides.css
   ========================================================= */
@media (max-width: 520px){
  /* tighten topbar container */
  .topbar{
    padding: 10px 10px !important;
  }

  /* ensure the rail row can breathe */
  .topbar .topbar-inner,
  .topbar .topbar-row{
    gap: 10px !important;
    align-items: center !important;
  }

  /* hide the big brand pill on mobile */
  .topbar .brand-pill,
  .topbar a.brand-pill,
  .topbar .topbar-brand,
  .topbar a.topbar-brand,
  .topbar a[href*="overview"],
  .topbar a[href*="index"]{
    display: none !important;
  }

  /* keep menu button compact */
  .topbar .rail-open,
  .topbar #railOpen{
    width: 44px !important;
    height: 44px !important;
    border-radius: 14px !important;
  }

  /* make CTA pills smaller */
  .topbar .topbar-cta,
  .topbar a.topbar-cta,
  .topbar .btn,
  .topbar a.btn{
    padding: 10px 12px !important;
    font-size: 13px !important;
    line-height: 1 !important;
    border-radius: 16px !important;
    min-height: 44px !important; /* thumb friendly */
  }
}
/* =========================================================
   MOBILE TEXT UNIFY PATCH (CENTER)
   Fix: some sections right-aligned, some centered.
   Scope: main content only (not topbar/drawer/footer).
   Put at VERY BOTTOM of overrides.css
   ========================================================= */

@media (max-width: 720px){

  /* 1) Hard stop: prevent random right-align on mobile */
  .page :where(main, .main, .content, .site-main, .wrap, .container)
        :where(h1,h2,h3,h4,h5,h6,p,small,li,dt,dd,label,blockquote,figcaption){
    text-align: center !important;
  }

  /* 2) Make common “card/section” shells inherit centered text */
  .page :where(main, .main, .content, .site-main)
        :where(section, .section, .panel, .card, .glass, .hero-glass, .service-card, .stack-card, .pack-card, .note-card){
    text-align: center !important;
  }

  /* 3) Center the little meta rows (PRICE / GOOD FOR / tags) */
  .page :where(main, .main, .content, .site-main)
        :where(.meta, .meta-row, .kv, .kv-row, .service-head, .service-body, .service-foot, .service-kv, .pill-row, .chip-row){
    justify-content: center !important;
    text-align: center !important;
  }

  /* 4) Prevent “floating” narrow text blocks that look off-center */
  .page :where(main, .main, .content, .site-main)
        :where(p, .service-text, .lede, .sub, .copy, .smallcopy){
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 34ch; /* keeps center copy looking intentional */
  }

  /* 5) Lists: keep bullet text readable while still globally centered */
  .page :where(main, .main, .content, .site-main) ul,
  .page :where(main, .main, .content, .site-main) ol{
    list-style-position: inside;
    padding-left: 0;
    margin-left: 0;
    margin-right: 0;
    text-align: center !important;
  }

  /* 6) Do NOT affect nav/top rail/drawer/footer */
  .topbar, .rail-drawer, footer, .site-footer{
    text-align: inherit !important;
  }
/* =========================================================
   SYSTEMS — BOUNDED TAB: stop "DECISIO\nN" wrapping (robust)
   Put at VERY BOTTOM of overrides.css
   ========================================================= */

@media (max-width: 720px){

  /* 1) Scope to the Systems page + the Bounded tab panel
        Works whether you used ids, data-attrs, or simple section wrappers */
  body.system :where(#bounded, #tab-bounded, [data-tab="bounded"], .tab-bounded, .bounded-tab, .bounded-panel, .panel-bounded, .bounded){
    /* no-op anchor */
  }

  /* 2) Make each “line item” behave like: [LABEL] [description…] */
  body.system :where(#bounded, #tab-bounded, [data-tab="bounded"], .tab-bounded, .bounded-tab, .bounded-panel, .panel-bounded, .bounded)
    :where(li, .item, .row, .line, .entry, .callout, .pill){
    display: flex !important;
    align-items: baseline !important;
    gap: 12px !important;
    min-width: 0 !important;
  }

  /* 3) The LABEL token (first strong/b/span) NEVER wraps */
  body.system :where(#bounded, #tab-bounded, [data-tab="bounded"], .tab-bounded, .bounded-tab, .bounded-panel, .panel-bounded, .bounded)
    :where(li, .item, .row, .line, .entry, .callout, .pill)
    > :where(strong, b, span):first-child{
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
    flex: 0 0 auto !important;
    min-width: 9ch !important; /* enough for DECISION */
  }

  /* 4) The description column is what wraps */
  body.system :where(#bounded, #tab-bounded, [data-tab="bounded"], .tab-bounded, .bounded-tab, .bounded-panel, .panel-bounded, .bounded)
    :where(li, .item, .row, .line, .entry, .callout, .pill)
    > :where(*):nth-child(2){
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }
}
/* =========================================================
   PORTAL PAGE — dark treatment / same shell feel as site
   ========================================================= */

/* Add class="portal-page" to <body> in portal.html */
body.portal-page{
  background: #08090b;
  color: rgba(255,254,252,.92);
}

/* Keep page content above bg motion */
body.portal-page .page{
  position: relative;
  z-index: 1;
}

/* Main portal spacing */
body.portal-page main{
  padding-top: 96px; /* clears fixed top rail */
}

/* Portal panels / cards */
body.portal-page .portal-panel,
body.portal-page .portal-card,
body.portal-page .portal-shell,
body.portal-page .site-section{
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  box-shadow: 0 18px 48px rgba(0,0,0,.35);
  color: inherit;
}

/* Headings / labels */
body.portal-page h1,
body.portal-page h2,
body.portal-page h3,
body.portal-page .portal-title{
  color: rgba(255,254,252,.96);
}

body.portal-page p,
body.portal-page .muted,
body.portal-page .portal-muted{
  color: rgba(255,254,252,.78);
}

/* Tables / ledger rows */
body.portal-page table{
  width: 100%;
  border-collapse: collapse;
  color: inherit;
}

body.portal-page th{
  color: rgba(255,254,252,.76);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 12px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  padding: 10px 8px;
}

body.portal-page td{
  border-bottom: 1px solid rgba(255,255,255,.06);
  padding: 10px 8px;
  color: rgba(255,254,252,.88);
}

/* Inputs */
body.portal-page input,
body.portal-page select,
body.portal-page textarea{
  background: rgba(255,255,255,.06);
  color: rgba(255,254,252,.94);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
}

body.portal-page input::placeholder,
body.portal-page textarea::placeholder{
  color: rgba(255,254,252,.45);
}

/* Make accidental white utility blocks dark */
body.portal-page .notice,
body.portal-page .next-strip,
body.portal-page .status-card,
body.portal-page .history-card{
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: inherit;
}

/* Footer should stay dark + readable */
body.portal-page .site-footer,
body.portal-page footer{
  background: transparent;
  color: rgba(255,254,252,.86);
}

body.portal-page .site-footer a,
body.portal-page footer a{
  color: rgba(255,254,252,.90);
}

/* Mobile spacing */
@media (max-width: 720px){
  body.portal-page main{
    padding-top: 84px;
  }
}
body.portal-page .next-strip{
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}
body.portal-page .next-strip{
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}
/* =========================================================
   PORTAL — Need Credits section background treatment
   Add class="need-credits-card" to that block in portal.html
   ========================================================= */

body.portal-page .need-credits-card{
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  box-shadow:
    0 18px 44px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.03);
  padding: 16px 18px;
}

/* soft dark base wash */
body.portal-page .need-credits-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(120% 120% at 8% 18%, rgba(208,166,44,.10), transparent 42%),
    radial-gradient(90% 120% at 92% 85%, rgba(255,255,255,.03), transparent 48%),
    linear-gradient(135deg, rgba(8,9,11,.72), rgba(8,9,11,.32) 55%, rgba(8,9,11,.62));
  opacity: .95;
}

/* subtle line-grid / instrument feel */
body.portal-page .need-credits-card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.16;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 28px 28px, 28px 28px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), rgba(0,0,0,.6));
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), rgba(0,0,0,.6));
}

/* keep content above overlays */
body.portal-page .need-credits-card > *{
  position: relative;
  z-index: 1;
}

/* text polish inside that area */
body.portal-page .need-credits-card h3,
body.portal-page .need-credits-card .k,
body.portal-page .need-credits-card strong{
  color: rgba(255,254,252,.95);
}

body.portal-page .need-credits-card p,
body.portal-page .need-credits-card .m{
  color: rgba(255,254,252,.78);
}

/* links/buttons inside that strip */
body.portal-page .need-credits-card a{
  color: rgba(255,254,252,.94);
}

/* optional: if you're reusing .hero-actions inside it */
body.portal-page .need-credits-card .hero-actions{
  margin-top: 10px;
}
/* =========================================================
   MOBILE TOP RAIL — FORCE BRAND CHIP VISIBLE
   Pattern & Edge button/chip should remain visible on mobile
   Paste at VERY BOTTOM of overrides.css
   ========================================================= */
@media (max-width: 720px){

  /* 0) Topbar shell */
  .topbar{
    padding: 8px 10px !important;
  }

  /* 1) Rail row: handle BOTH flex and grid implementations */
  .topbar-rail,
  .topbar-inner,
  .topbar-row{
    min-width: 0 !important;
    gap: 8px !important;
    align-items: center !important;
  }

  /* If your rail is grid, compress columns safely */
  .topbar-rail,
  .topbar-inner,
  .topbar-row{
    grid-template-columns: auto minmax(0,1fr) auto auto !important;
  }

  /* If your rail is flex, keep one line */
  .topbar-rail,
  .topbar-inner,
  .topbar-row{
    flex-wrap: nowrap !important;
  }

  /* 2) FORCE brand chip/button visible (cover common class names) */
  .topbar-brand,
  .brand-chip,
  .topbar .brand,
  .topbar a[aria-label*="Pattern"],
  .topbar a[href*="overview"]{
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;

    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: 140px !important;

    height: 40px !important;
    padding: 0 10px !important;
    border-radius: 12px !important;
    align-items: center !important;
    justify-content: center !important;

    white-space: nowrap !important;
    overflow: hidden !important;
  }

  /* Brand text inside chip (cover common variants) */
  .topbar-brand__name,
  .brand-chip__label,
  .brand-chip span,
  .topbar-brand span{
    font-size: 10px !important;
    letter-spacing: .10em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-width: 0 !important;
  }

  /* 3) Center status box (the middle panel) should shrink first */
  .topbar-box,
  .topbar-center,
  .topbar-status{
    flex: 1 1 auto !important;
    min-width: 0 !important;

    height: 40px !important;
    padding: 0 10px !important;
    gap: 8px !important;

    overflow: hidden !important;
  }

  .topbar-box__label,
  .topbar-center__label,
  .topbar-status__label{
    min-width: 0 !important;
    font-size: 10px !important;
    letter-spacing: .08em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Hide sublabel first */
  .topbar-box__sub,
  .topbar-center__sub,
  .topbar-status__sub{
    display: none !important;
  }

  /* 4) Compress CTA (New Decision / Credits / etc.) */
  .cta-run-top,
  .topbar-cta,
  .cta-top{
    height: 40px !important;
    padding: 0 10px !important;
    gap: 6px !important;

    flex: 0 0 auto !important;
    min-width: 40px !important;
    max-width: 44px !important; /* arrow-only mode */
    overflow: hidden !important;
  }

  .cta-run-top__label,
  .topbar-cta__label,
  .cta-top__label{
    display: none !important;
  }

  .cta-run-top__arrow,
  .topbar-cta__arrow,
  .cta-top__arrow{
    font-size: 14px !important;
    margin: 0 !important;
  }

  /* 5) Menu button / rail toggle */
  .topbar-menu,
  .topbar-dash,
  .menu-btn,
  #railToggle{
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    flex: 0 0 40px !important;
    border-radius: 12px !important;
  }

  /* 6) Safety: prevent hidden overflow from clipping chip */
  .topbar *,
  .topbar-rail *,
  .topbar-inner *{
    min-width: 0;
  }
}
/* =========================================================
   MOBILE TOP RAIL — RESTORE TEXT FOR RIGHT BUTTONS
   (Use after the "FORCE BRAND CHIP VISIBLE" patch)
   ========================================================= */
@media (max-width: 720px){

  /* 1) Hide center status box to free space (best tradeoff on mobile) */
  .topbar-box,
  .topbar-center,
  .topbar-status{
    display: none !important;
  }

  /* 2) Keep the brand visible but slightly tighter */
  .topbar-brand,
  .brand-chip,
  .topbar .brand,
  .topbar a[aria-label*="Pattern"],
  .topbar a[href*="overview"]{
    max-width: 118px !important;   /* tune 108–124 if needed */
    height: 38px !important;
    padding: 0 8px !important;
  }

  .topbar-brand__name,
  .brand-chip__label,
  .brand-chip span,
  .topbar-brand span{
    font-size: 9px !important;
    letter-spacing: .08em !important;
  }

  /* 3) Restore right-side CTA sizing (undo arrow-only clamp) */
  .cta-run-top,
  .topbar-cta,
  .cta-top{
    max-width: none !important;     /* removes 44px clamp */
    min-width: 0 !important;
    height: 38px !important;
    padding: 0 8px !important;
    gap: 4px !important;
    flex: 0 1 auto !important;
    overflow: visible !important;
  }

  /* 4) SHOW labels again */
  .cta-run-top__label,
  .topbar-cta__label,
  .cta-top__label{
    display: inline !important;
    font-size: 10px !important;
    letter-spacing: .04em !important;
    white-space: nowrap !important;
    line-height: 1 !important;
  }

  /* 5) Optional: hide arrows on mobile so text fits */
  .cta-run-top__arrow,
  .topbar-cta__arrow,
  .cta-top__arrow{
    display: none !important;
  }

  /* 6) If your actions wrapper exists, tighten spacing */
  .topbar-actions,
  .top-actions,
  .topbar-right{
    gap: 6px !important;
    min-width: 0 !important;
  }
}

/* =========================================================
   DRAWER CANON (single source of truth)
   Matches HTML: #railDrawer .rail-card .rail-head .rail-stack
   ========================================================= */

/* Overlay shell */
#railDrawer.rail-drawer{
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  justify-content: end;
  pointer-events: none;
}

#railOverlay.rail-overlay{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(201,163,59,.10), transparent 55%),
    rgba(0,0,0,.52);
  opacity: 0;
  transition: opacity .22s ease;
  pointer-events: none;
}

body.rail-open #railDrawer{ pointer-events: auto; }
body.rail-open #railOverlay{
  opacity: 1;
  pointer-events: auto;
}

/* Drawer panel (THIS is the width target, not the full-screen shell) */
#railDrawer .rail-card{
  height: 100dvh;
  width: min(94vw, 420px);
  max-width: 420px;
  box-sizing: border-box;

  color: rgba(255,255,255,.92);
  background:
    radial-gradient(130% 110% at 85% 10%, rgba(201,163,59,.06), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)),
    #090909;

  border-left: 1px solid rgba(255,255,255,.10);
  box-shadow: -18px 0 40px rgba(0,0,0,.35);

  transform: translateX(102%);
  transition: transform .22s ease;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: env(safe-area-inset-bottom);
}

body.rail-open #railDrawer .rail-card{ transform: translateX(0); }

#railDrawer .rail-card::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-left: 1px solid rgba(201,163,59,.08);
}

/* Header */
#railDrawer .rail-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
}

/* Brand chip */
#railDrawer .rail-title{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 13px;

  color: #f4f4f4;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: .04em;
  line-height: 1;

  border: 1px solid rgba(201,163,59,.45);
  background: linear-gradient(180deg, rgba(201,163,59,.14), rgba(201,163,59,.04));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.03),
    0 10px 24px rgba(0,0,0,.20);
}

/* Close button */
#railDrawer .rail-x{
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  color: rgba(255,255,255,.92);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Main vertical stack */
#railDrawer .rail-stack{
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  padding-left: 12px;
  padding-right: 12px;
  box-sizing: border-box;
}

/* Nav area scrolls; footer stays below */
#railDrawer .rail-body{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  display: flex;
  flex-direction: column;
  gap: 6px;

  padding: 12px 0 10px;
}

/* Links */
#railDrawer .rail-link{
  display: flex;
  align-items: center;
  text-decoration: none;
  color: rgba(255,255,255,.92);

  min-height: 44px;
  padding: 0 12px;
  border-radius: 12px;

  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.2;

  border: 1px solid transparent;
  background: transparent;
  transition: background .15s ease, border-color .15s ease, transform .12s ease;
}

#railDrawer .rail-link:hover,
#railDrawer .rail-link:focus-visible{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.08);
  outline: none;
}

#railDrawer .rail-link[aria-current="page"]{
  background:
    radial-gradient(140% 140% at 20% 20%, rgba(201,163,59,.12), transparent 58%),
    rgba(255,255,255,.04);
  border-color: rgba(201,163,59,.22);
}

#railDrawer .rail-link--sub{
  font-weight: 600;
  font-size: .98rem;
  color: rgba(255,255,255,.84);
}

/* Divider */
#railDrawer .rail-divider{
  height: 1px;
  margin: 8px 0 10px;
  background: rgba(255,255,255,.08);
}

/* Account note panel */
#railDrawer .rail-account-note{
  margin-top: 8px;
  width: 100%;
  box-sizing: border-box;

  padding: 14px 14px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);

  background:
    radial-gradient(120% 140% at 0% 0%, rgba(255,255,255,.07), rgba(255,255,255,0) 55%),
    linear-gradient(180deg, rgba(201,163,59,.07), rgba(201,163,59,.02)),
    rgba(255,255,255,.015);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 12px 28px rgba(0,0,0,.18);
}

#railDrawer .rail-account-note__kicker{
  margin: 0 0 8px 0;
  color: rgba(255,255,255,.95);
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1.2;
  text-align: left;
}

#railDrawer .rail-account-note__text{
  margin: 0;
  color: rgba(255,255,255,.88);
  font-size: 14px;
  line-height: 1.42;
  text-align: left;
}

/* CTA row */
#railDrawer .rail-cta-zone{
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
}

#railDrawer .rail-cta{
  min-height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: .03em;
  padding: 0 12px;
  white-space: nowrap;
}

#railDrawer .rail-cta--ghost{
  color: rgba(255,255,255,.95);
  border: 1px solid rgba(201,163,59,.35);
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)),
    rgba(201,163,59,.06);
}

#railDrawer .rail-cta--solid{
  color: #111;
  border: 1px solid rgba(255,255,255,.45);
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.78));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    0 8px 20px rgba(0,0,0,.22);
}

/* Desktop tuning */
@media (min-width: 721px){
  #railDrawer .rail-card{
    width: min(92vw, 460px);
    max-width: 460px;
  }

  #railDrawer .rail-stack{
    padding-left: 16px;
    padding-right: 16px;
  }

  #railDrawer .rail-title{
    min-height: 44px;
    padding: 0 16px;
    font-size: 1.05rem;
  }
}

/* Mobile tuning */
@media (max-width: 720px){
  #railDrawer .rail-card{
    width: min(94vw, 410px);
  }

  #railDrawer .rail-head{
    padding: 12px;
  }

  #railDrawer .rail-title{
    min-height: 40px;
    padding: 0 12px;
    font-size: .98rem;
  }

  #railDrawer .rail-link{
    min-height: 42px;
    font-size: 1rem;
  }

  #railDrawer .rail-cta{
    min-height: 42px;
    font-size: .95rem;
  }
  }