/* =====================================================================
   piRevenue — enterprise site layer (extends pirevenue.css)
   Uses the SAME design tokens (--brand, --accent, --agent, --surface…)
   so every page reads as one system in light + dark.
   ===================================================================== */

/* ---------- brand logo (theme-swapped <img> lockups) ---------- */
.wordmark { display: inline-flex; align-items: center; }
.brand-logo { height: 40px; width: auto; display: block; }
.footer-brand .brand-logo { height: 46px; }
@media (max-width: 460px) { .brand-logo { height: 34px; } }
.brand-logo--dark { display: none; }
:root[data-theme="dark"] .brand-logo--light { display: none; }
:root[data-theme="dark"] .brand-logo--dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand-logo--light { display: none; }
  :root:not([data-theme="light"]) .brand-logo--dark { display: block; }
}

/* ---------- skip link ---------- */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--brand); color: #fff; padding: 0.6rem 1rem; border-radius: 0 0 8px 0; font-weight: 600;
}
.skip-link:focus { left: 0; }

/* ---------- announcement bar ---------- */
.announce {
  background: linear-gradient(90deg, var(--brand-ink), var(--agent-ink));
  color: #fff; font-size: 0.82rem; text-align: center; padding: 0.5rem 1rem;
  display: flex; align-items: center; justify-content: center; gap: 0.5rem; flex-wrap: wrap;
}
.announce a { text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
.announce .announce-pill {
  font-family: var(--font-mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: .08em;
  background: rgba(255,255,255,.18); padding: 0.16em 0.55em; border-radius: 999px;
}

/* ---------- enterprise nav: dropdowns ---------- */
.nav-links > li.has-menu { position: relative; }
.nav-links .menu-trigger {
  display: inline-flex; align-items: center; gap: 0.32rem; background: none; border: 0; cursor: pointer;
  font-size: 0.92rem; color: var(--text-muted); font-family: inherit; padding: 0.3rem 0.05rem;
}
.nav-links .menu-trigger:hover, .nav-links li.open .menu-trigger { color: var(--brand-ink); }
.nav-links .menu-trigger .caret { width: 0.6em; height: 0.6em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-1px); transition: transform .2s ease; }
.nav-links li.open .menu-trigger .caret { transform: rotate(-135deg) translateY(-1px); }

.mega {
  position: absolute; top: calc(100% + 0.7rem); left: 50%; transform: translateX(-50%) translateY(6px);
  min-width: 560px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: 0 30px 70px -34px var(--shadow); padding: 1.1rem; z-index: 60;
  opacity: 0; visibility: hidden; transition: opacity .2s ease, transform .2s ease, visibility .2s;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem 1.4rem;
}
.mega.mega-1 { min-width: 320px; grid-template-columns: 1fr; }
.nav-links li.open .mega { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.mega::before { content:""; position:absolute; top:-0.7rem; left:0; right:0; height:0.7rem; }
.mega-link { display: flex; gap: 0.7rem; padding: 0.6rem 0.7rem; border-radius: 10px; align-items: flex-start; }
.mega-link:hover { background: var(--surface-2); }
.mega-link .mi { flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--brand-tint); color: var(--brand-ink); }
.mega-link .mi svg { width: 17px; height: 17px; }
.mega-link .mt { font-size: 0.9rem; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 0.4rem; }
.mega-link .md { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.15rem; line-height: 1.4; }
.mega-foot { grid-column: 1 / -1; margin-top: 0.4rem; border-top: 1px solid var(--border); padding-top: 0.8rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.mega-foot .mf-note { font-size: 0.78rem; color: var(--text-muted); }

/* ---------- mobile nav ---------- */
.nav-burger { display: none; width: 40px; height: 38px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); position: relative; }
.nav-burger span, .nav-burger span::before, .nav-burger span::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 17px; height: 2px; background: var(--text);
  border-radius: 2px; transform: translate(-50%, -50%); transition: transform .25s ease, opacity .2s ease;
}
.nav-burger span::before { transform: translate(-50%, -7px); }
.nav-burger span::after { transform: translate(-50%, 5px); }
body.nav-open .nav-burger span { background: transparent; }
body.nav-open .nav-burger span::before { transform: translate(-50%, -50%) rotate(45deg); }
body.nav-open .nav-burger span::after { transform: translate(-50%, -50%) rotate(-45deg); }

@media (max-width: 899px) {
  .nav-links { display: none; }
  .nav-burger { display: block; }
  .site-nav .nav-cta.desktop-cta { display: none; }
  .mobile-drawer {
    position: fixed; inset: 0 0 0 auto; width: min(88vw, 360px); background: var(--surface);
    border-left: 1px solid var(--border); box-shadow: -20px 0 60px -30px var(--shadow); z-index: 120;
    transform: translateX(102%); transition: transform .3s cubic-bezier(.16,.84,.44,1);
    display: flex; flex-direction: column; padding: 1.4rem 1.2rem; overflow-y: auto; gap: 0.2rem;
  }
  body.nav-open .mobile-drawer { transform: translateX(0); }
  .mobile-scrim { position: fixed; inset: 0; background: rgba(2,6,23,.5); backdrop-filter: blur(2px); z-index: 110; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s; }
  body.nav-open .mobile-scrim { opacity: 1; visibility: visible; }
}
@media (min-width: 900px) { .mobile-drawer, .mobile-scrim { display: none; } }
.mobile-drawer .md-group > .md-head { width: 100%; text-align: left; display: flex; justify-content: space-between; align-items: center; padding: 0.85rem 0.4rem; font-weight: 600; color: var(--text); border-bottom: 1px solid var(--border); }
.mobile-drawer .md-group .md-sub { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.mobile-drawer .md-group.open .md-sub { max-height: 620px; }
.mobile-drawer .md-sub a, .mobile-drawer > a.md-link { display: block; padding: 0.6rem 0.9rem; color: var(--text-muted); font-size: 0.92rem; }
.mobile-drawer > a.md-link { padding: 0.85rem 0.4rem; border-bottom: 1px solid var(--border); color: var(--text); font-weight: 600; }
.mobile-drawer .md-cta { margin-top: 1rem; display: grid; gap: 0.6rem; }

/* ---------- generic page hero (interior pages) ---------- */
.page-hero { position: relative; padding: clamp(2.4rem, 6vw, 4.4rem) 0 clamp(1.8rem, 4vw, 3rem); overflow: hidden; background: var(--bg); }
.page-hero .hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 42px 42px; mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, black 30%, transparent 88%); }
.page-hero .wrap { position: relative; z-index: 1; }
.page-hero h1 { font-size: clamp(2rem, 4.6vw, 3.2rem); line-height: 1.08; margin-top: 0.7rem; max-width: 20ch;
  background: linear-gradient(100deg, var(--brand-ink) 0%, var(--agent-ink) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.page-hero .page-lede { font-size: clamp(1.05rem, 2vw, 1.25rem); color: var(--text-muted); margin-top: 1rem; max-width: 60ch; }
.page-hero .hero-ctas { margin-top: 1.6rem; display: flex; flex-wrap: wrap; gap: 0.85rem; }

/* ---------- breadcrumb ---------- */
.breadcrumb { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-faint); display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--brand-ink); }
.breadcrumb .sep { opacity: .5; }

/* ---------- trust / logo cloud ---------- */
.trustbar { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: clamp(1.4rem,3vw,2.2rem) 0; }
.trustbar .tb-label { text-align: center; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 1.1rem; }
.logo-cloud { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(1.4rem, 4vw, 3rem); }
.logo-cloud .lc { font-weight: 700; font-size: clamp(0.95rem,1.6vw,1.15rem); color: var(--text-muted); letter-spacing: -0.01em; opacity: .82; display: inline-flex; align-items: center; gap: 0.4rem; }
.logo-cloud .lc .dotmark { width: 12px; height: 12px; border-radius: 3px; background: var(--brand); opacity: .7; }

/* ---------- metric band ---------- */
.metric-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem,3vw,2.2rem); }
@media (max-width: 720px) { .metric-band { grid-template-columns: repeat(2, 1fr); } }
.metric-band .mb { text-align: center; }
.metric-band .mb .mb-num { font-family: var(--font-mono); font-weight: 700; font-size: clamp(2rem, 4.4vw, 3rem); color: var(--brand-ink); line-height: 1; }
.metric-band .mb .mb-lbl { color: var(--text-muted); font-size: 0.88rem; margin-top: 0.5rem; }

/* ---------- feature / pillar rows ---------- */
.pillar { display: grid; grid-template-columns: 1fr; gap: clamp(1.6rem,4vw,3rem); align-items: center; }
@media (min-width: 900px) { .pillar { grid-template-columns: 1fr 1fr; } .pillar.flip .pillar-media { order: 2; } }
.pillar + .pillar { margin-top: clamp(2.6rem,6vw,4.6rem); }
.pillar-eyebrow { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-ink); font-weight: 600; }
.pillar h3 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin-top: 0.6rem; }
.pillar p { color: var(--text-muted); margin-top: 0.9rem; font-size: 1.02rem; max-width: 52ch; }
.pillar ul.ticks { margin-top: 1.1rem; display: grid; gap: 0.6rem; }
.pillar ul.ticks li { position: relative; padding-left: 1.7rem; color: var(--text); font-size: 0.94rem; }
.pillar ul.ticks li::before { content: ""; position: absolute; left: 0; top: 0.15em; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--brand-tint);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234338CA' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); background-size: 0.72rem; background-repeat: no-repeat; background-position: center; }
.pillar-media { position: relative; }
.pillar-media img { width: 100%; height: auto; border-radius: 16px; border: 1px solid var(--border); box-shadow: 0 30px 60px -34px var(--shadow); display: block; }
.pillar-media .media-tag { position: absolute; left: 1rem; bottom: 1rem; background: color-mix(in srgb, var(--surface) 90%, transparent); backdrop-filter: blur(6px); border: 1px solid var(--border); border-radius: 999px; padding: 0.35rem 0.8rem; font-family: var(--font-mono); font-size: 0.68rem; color: var(--text); display: inline-flex; align-items: center; gap: 0.4rem; }

/* ---------- image with human presence ---------- */
figure.photo { margin: 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--border); position: relative; }
figure.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
figure.photo figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 0.8rem 1rem; font-size: 0.78rem; color: #fff;
  background: linear-gradient(0deg, rgba(2,6,23,.72), transparent); }
.avatar-photo { width: 100%; aspect-ratio: 1/1; border-radius: 50%; object-fit: cover; border: 2px solid var(--border); background: var(--surface-2); }

/* ---------- quote / testimonial ---------- */
.quote-card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: clamp(1.5rem,3.5vw,2.4rem); position: relative; }
.quote-card::before { content: "\201C"; position: absolute; top: 0.1rem; left: 1.1rem; font-size: 4.5rem; color: var(--brand-tint); font-family: Georgia, serif; line-height: 1; }
.quote-card blockquote { margin: 0; font-size: clamp(1.15rem, 2.3vw, 1.55rem); font-weight: 600; letter-spacing: -0.01em; line-height: 1.4; position: relative; }
.quote-card .qc-attr { margin-top: 1.4rem; display: flex; align-items: center; gap: 0.9rem; }
.quote-card .qc-attr img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border); }
.quote-card .qc-name { font-weight: 600; font-size: 0.95rem; }
.quote-card .qc-role { color: var(--text-muted); font-size: 0.82rem; }

/* ---------- CTA band ---------- */
.cta-band { position: relative; overflow: hidden; border-radius: 22px; padding: clamp(2.2rem,5vw,3.6rem); text-align: center;
  background: radial-gradient(120% 140% at 50% 0%, color-mix(in srgb, var(--brand) 22%, transparent), transparent 60%), var(--vision-bg); color: var(--vision-text); border: 1px solid var(--vision-line); }
.cta-band h2 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); color: var(--vision-text); max-width: 22ch; margin: 0 auto; }
.cta-band p { color: var(--vision-muted); margin: 0.9rem auto 0; max-width: 52ch; }
.cta-band .hero-ctas { margin-top: 1.7rem; justify-content: center; }

/* ---------- pricing ---------- */
.pricing-grid { display: grid; grid-template-columns: 1fr; gap: 1.3rem; }
@media (min-width: 820px) { .pricing-grid { grid-template-columns: repeat(3, 1fr); align-items: start; } }
.price-card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 1.7rem; display: flex; flex-direction: column; gap: 0.8rem; position: relative; }
.price-card.featured { border-color: color-mix(in srgb, var(--brand) 55%, transparent); box-shadow: 0 24px 60px -34px color-mix(in srgb, var(--brand) 45%, transparent); }
.price-card .pc-badge { position: absolute; top: -0.8rem; left: 1.5rem; background: var(--brand); color: #fff; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: .08em; text-transform: uppercase; padding: 0.28em 0.7em; border-radius: 999px; }
.price-card .pc-name { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-ink); }
.price-card .pc-price { font-size: clamp(2rem,4vw,2.6rem); font-weight: 700; letter-spacing: -0.02em; }
.price-card .pc-price span { font-size: 0.95rem; color: var(--text-muted); font-weight: 500; }
.price-card .pc-desc { color: var(--text-muted); font-size: 0.9rem; }
.price-card ul { display: grid; gap: 0.55rem; margin-top: 0.4rem; }
.price-card ul li { position: relative; padding-left: 1.6rem; font-size: 0.9rem; color: var(--text); }
.price-card ul li::before { content:""; position:absolute; left:0; top:0.15em; width:1.05rem; height:1.05rem; border-radius:50%; background: var(--brand-tint);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234338CA' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); background-size:0.7rem; background-repeat:no-repeat; background-position:center; }
.price-card .btn { margin-top: auto; }

/* ---------- blog index ---------- */
.post-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; }
.post-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; }
@media (prefers-reduced-motion: no-preference) { .post-card { transition: transform .25s var(--ease-signature), border-color .25s, box-shadow .25s; } .post-card:hover { transform: translateY(-5px); border-color: var(--border-strong); box-shadow: 0 24px 46px -30px var(--shadow); } }
.post-card .pc-media { aspect-ratio: 16/9; overflow: hidden; background: var(--surface-2); }
.post-card .pc-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-card .pc-body { padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; gap: 0.6rem; flex: 1; }
.post-card .pc-cat { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); font-weight: 600; }
.post-card h3 { font-size: 1.14rem; line-height: 1.3; }
.post-card p { color: var(--text-muted); font-size: 0.9rem; flex: 1; }
.post-card .pc-meta { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.4rem; font-size: 0.78rem; color: var(--text-faint); }
.post-card .pc-meta img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.post-card.feature { grid-column: 1 / -1; }
@media (min-width: 820px) { .post-card.feature { display: grid; grid-template-columns: 1.15fr 1fr; } .post-card.feature .pc-media { aspect-ratio: auto; height: 100%; min-height: 300px; } }

/* category filter pills */
.cat-pills { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-bottom: 1.8rem; }
.cat-pills a { font-family: var(--font-mono); font-size: 0.74rem; padding: 0.4rem 0.85rem; border-radius: 999px; border: 1px solid var(--border-strong); color: var(--text-muted); }
.cat-pills a.active, .cat-pills a:hover { border-color: var(--brand); color: var(--brand-ink); background: var(--brand-tint); }

/* ---------- article ---------- */
.article-wrap { max-width: 760px; margin: 0 auto; }
.article-hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem; margin-top: 1rem; font-size: 0.82rem; color: var(--text-muted); }
.article-hero-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--text-faint); }
.article-cat { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); font-weight: 600; }
.article-figure { margin: 1.8rem 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--border); }
.article-figure img { width: 100%; display: block; }
.article-figure figcaption { padding: 0.7rem 1rem; font-size: 0.78rem; color: var(--text-muted); background: var(--surface); border-top: 1px solid var(--border); }

.prose { font-size: 1.08rem; line-height: 1.75; color: var(--text); }
.prose > * + * { margin-top: 1.25rem; }
.prose h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin-top: 2.4rem; letter-spacing: -0.02em; }
.prose h3 { font-size: clamp(1.15rem, 2.2vw, 1.4rem); margin-top: 1.8rem; }
.prose p { color: var(--text); }
.prose a { color: var(--brand-ink); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.prose strong { color: var(--text); }
.prose ul, .prose ol { padding-left: 1.3rem; display: grid; gap: 0.5rem; }
.prose ul li { list-style: disc; } .prose ol li { list-style: decimal; }
.prose blockquote { border-left: 3px solid var(--brand); padding: 0.4rem 0 0.4rem 1.2rem; margin: 1.6rem 0; font-size: 1.2rem; font-weight: 600; color: var(--text); font-style: normal; }
.prose blockquote cite { display: block; margin-top: 0.5rem; font-size: 0.85rem; font-weight: 500; color: var(--text-muted); font-style: normal; }
.prose .pull { background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px; padding: 1.2rem 1.4rem; font-size: 0.98rem; }
.prose .pull b { color: var(--brand-ink); }
.prose hr { border: 0; border-top: 1px solid var(--border); margin: 2.2rem 0; }
.prose code { font-family: var(--font-mono); font-size: 0.9em; background: var(--surface-2); padding: 0.1em 0.4em; border-radius: 5px; }

.article-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 2.2rem; }
.article-tags a { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-muted); border: 1px solid var(--border); border-radius: 999px; padding: 0.3rem 0.7rem; }
.article-tags a:hover { border-color: var(--brand); color: var(--brand-ink); }

.author-box { margin-top: 2.4rem; padding: 1.4rem; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); display: flex; gap: 1.1rem; align-items: flex-start; }
.author-box img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; flex: none; border: 2px solid var(--border); }
.author-box .ab-name { font-weight: 600; }
.author-box .ab-role { font-size: 0.82rem; color: var(--brand-ink); font-family: var(--font-mono); }
.author-box .ab-bio { font-size: 0.88rem; color: var(--text-muted); margin-top: 0.4rem; }

.toc { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 1.1rem 1.3rem; margin: 1.8rem 0; }
.toc .toc-h { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 0.6rem; }
.toc ol { display: grid; gap: 0.4rem; counter-reset: toc; }
.toc ol li a { color: var(--text-muted); font-size: 0.9rem; }
.toc ol li a:hover { color: var(--brand-ink); }

/* ---------- glossary ---------- */
.az-index { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 2rem; }
.az-index a { width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 8px; border: 1px solid var(--border); font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-muted); }
.az-index a:hover { border-color: var(--brand); color: var(--brand-ink); background: var(--brand-tint); }
.az-index a.disabled { opacity: .35; pointer-events: none; }
.glossary-group { margin-bottom: 2.4rem; }
.glossary-group .gg-letter { font-family: var(--font-mono); font-size: 1.4rem; font-weight: 700; color: var(--brand-ink); border-bottom: 1px solid var(--border); padding-bottom: 0.4rem; margin-bottom: 1rem; }
.term-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.term-card { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 1.1rem 1.2rem; }
.term-card:hover { border-color: var(--brand); box-shadow: 0 16px 34px -26px var(--shadow); }
.term-card h3 { font-size: 1.02rem; font-weight: 600; }
.term-card p { color: var(--text-muted); font-size: 0.86rem; margin-top: 0.4rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.term-card .tc-more { display: inline-block; margin-top: 0.6rem; font-family: var(--font-mono); font-size: 0.72rem; color: var(--brand-ink); }
.definition-box { background: var(--surface-2); border: 1px solid var(--border-strong); border-left: 4px solid var(--brand); border-radius: 12px; padding: 1.2rem 1.4rem; margin: 1.4rem 0; }
.definition-box .db-term { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-ink); }
.definition-box .db-def { font-size: 1.1rem; font-weight: 500; margin-top: 0.4rem; }
.related-terms { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.related-terms a { font-family: var(--font-mono); font-size: 0.74rem; color: var(--brand-ink); background: var(--brand-tint); border-radius: 999px; padding: 0.32rem 0.75rem; }

/* ---------- footer expansion ---------- */
.footer-brand .footer-tagline { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: .04em; color: var(--accent-text); margin-top: 0.8rem; }
.footer-legal { margin-top: 2.6rem; padding-top: 1.4rem; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.footer-legal .fl-copy { font-size: 0.8rem; color: var(--text-faint); }
.footer-legal .fl-links { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.footer-legal .fl-links a { font-size: 0.8rem; color: var(--text-muted); }
.footer-legal .fl-links a:hover { color: var(--brand-ink); }
.footer-social { display: flex; gap: 0.6rem; margin-top: 1rem; }
.footer-social a { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--border); display: grid; place-items: center; color: var(--text-muted); }
.footer-social a:hover { border-color: var(--brand); color: var(--brand-ink); }
.footer-social svg { width: 16px; height: 16px; }

/* ---------- small utilities ---------- */
.section-tight { padding: clamp(1.6rem, 4vw, 3rem) 0; }
.text-center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }
.maxw-720 { max-width: 720px; }
.eyebrow-center { justify-content: center; }
.grid-gap-lg { gap: 1.5rem; }
.divider { border: 0; border-top: 1px solid var(--border); margin: 0; }
.badge-new { background: var(--accent-tint); color: var(--accent-text); }

/* =====================================================================
   LOCALIZATION — language/country selector, RTL, script-aware fonts
   ===================================================================== */

/* Script-aware font stacks: Latin + Devanagari + Arabic + SE-Asian all
   resolved through Noto fallbacks so glyph boxes stay consistent and
   aspect ratios/line-heights hold after translation. */
:root {
  --font-sans: 'IBM Plex Sans', 'Noto Sans', 'Noto Sans Devanagari', 'Noto Sans Arabic',
               'Noto Sans Thai', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}
:root[lang="ar"] { --font-sans: 'Noto Sans Arabic', 'IBM Plex Sans', system-ui, sans-serif; }
:root[lang="hi"] { --font-sans: 'Noto Sans Devanagari', 'IBM Plex Sans', system-ui, sans-serif; }

/* keep type from ballooning in verbose languages so boxes don't blow out */
html[lang="de"], html[lang="vi"], html[lang="fr"], html[lang="pt"], html[lang="es"] { --i18n-tighten: -0.005em; }
[data-i18n] { letter-spacing: var(--i18n-tighten, inherit); }

/* RTL (Arabic) */
[dir="rtl"] .breadcrumb, [dir="rtl"] .article-hero-meta, [dir="rtl"] .hero-ctas,
[dir="rtl"] .nav-links, [dir="rtl"] .footer-legal .fl-links { flex-direction: row-reverse; }
[dir="rtl"] .pillar ul.ticks li, [dir="rtl"] .price-card ul li { padding-left: 0; padding-right: 1.7rem; }
[dir="rtl"] .pillar ul.ticks li::before, [dir="rtl"] .price-card ul li::before { left: auto; right: 0; }
[dir="rtl"] .prose ul, [dir="rtl"] .prose ol { padding-left: 0; padding-right: 1.3rem; }
[dir="rtl"] .prose blockquote { border-left: 0; border-right: 3px solid var(--brand); padding: 0.4rem 1.2rem 0.4rem 0; }
[dir="rtl"] .definition-box { border-left: 1px solid var(--border-strong); border-right: 4px solid var(--brand); }
[dir="rtl"] .quote-card::before { left: auto; right: 1.1rem; }
[dir="rtl"] .mega { text-align: right; }
[dir="rtl"] .skip-link { left: auto; right: 0; border-radius: 0 0 0 8px; }
[dir="rtl"] .mobile-drawer { inset: 0 auto 0 0; border-left: 0; border-right: 1px solid var(--border); transform: translateX(-102%); }
[dir="rtl"] body.nav-open .mobile-drawer { transform: translateX(0); }

/* locale selector (globe) */
.locale-select { position: relative; }
.locale-trigger {
  display: inline-flex; align-items: center; gap: 0.4rem; height: 38px; padding: 0 0.7rem;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text);
  font-size: 0.82rem; cursor: pointer;
}
.locale-trigger:hover { border-color: var(--border-strong); }
.locale-trigger svg { width: 16px; height: 16px; }
.locale-trigger .lt-code { font-family: var(--font-mono); text-transform: uppercase; font-size: 0.72rem; letter-spacing: .04em; }
@media (max-width: 440px) { .locale-trigger .lt-code { display: none; } }
.locale-panel {
  position: absolute; top: calc(100% + 0.6rem); right: 0; width: min(92vw, 460px);
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: 0 30px 70px -34px var(--shadow); padding: 1rem; z-index: 80;
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s, transform .2s, visibility .2s;
}
[dir="rtl"] .locale-panel { right: auto; left: 0; }
.locale-select.open .locale-panel { opacity: 1; visibility: visible; transform: translateY(0); }
.locale-panel .lp-h { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); margin: 0.2rem 0.3rem 0.5rem; }
.locale-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.25rem; }
@media (max-width: 460px) { .locale-grid { grid-template-columns: 1fr; } }
.locale-grid button {
  display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.7rem; border-radius: 10px;
  background: none; border: 0; cursor: pointer; text-align: left; color: var(--text); font: inherit; width: 100%;
}
.locale-grid button:hover { background: var(--surface-2); }
.locale-grid button.active { background: var(--brand-tint); }
.locale-grid button .flag { font-size: 1.05rem; line-height: 1; flex: none; }
.locale-grid button .ln { font-size: 0.9rem; font-weight: 600; }
.locale-grid button .lc-native { font-size: 0.76rem; color: var(--text-muted); }
.locale-panel .lp-foot { border-top: 1px solid var(--border); margin-top: 0.7rem; padding-top: 0.7rem; }
.locale-panel .lp-foot label { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); display: block; margin: 0 0.3rem 0.4rem; }
.locale-panel .lp-foot select { width: 100%; padding: 0.55rem 0.7rem; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; }

/* machine-translation review flag ribbon */
.mt-flag { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent-text); background: var(--accent-tint); border-radius: 999px; padding: 0.2em 0.6em; display: none; }
:root[data-mt="1"] .mt-flag { display: inline-flex; }

/* footer grid accommodates the added "Explore" column (5 link columns) */
@media (min-width: 760px) { .footer-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .footer-grid { grid-template-columns: 1.5fr repeat(5, 1fr); } }

/* =====================================================================
   POST-LAUNCH FIXES — light-only theme, alternating white/blue, stable
   funnel frame, rationalised metric type, consistent section rhythm.
   ===================================================================== */

/* light-only: white ground; alternation comes from .band-dark navy sections */
:root[data-theme="light"] {
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #EEF2FB;
  --hero-glow-1: rgba(99,102,241,.20);
  --hero-glow-2: rgba(249,115,22,.12);
}

/* alternating DARK navy-blue band — scoped dark tokens make every component inside
   (cards, text, badges, constellation, leak) flip to dark automatically */
.band-dark {
  --bg: #0F172A; --surface: #1B2436; --surface-2: #24304A;
  --text: #F1F5F9; --text-muted: rgba(241,245,249,.70); --text-faint: rgba(241,245,249,.58);
  --border: rgba(241,245,249,.14); --border-strong: rgba(241,245,249,.26);
  --brand: #818CF8; --brand-ink: #A5B4FC; --brand-tint: rgba(129,140,248,.18);
  --accent: #F97316; --accent-text: #FDBA74; --accent-tint: rgba(249,115,22,.20);
  --agent: #A5B4FC; --agent-ink: #C7D2FE; --agent-tint: rgba(129,140,248,.22);
  --coral-text: #FDBA74; --shadow: rgba(0,0,0,.55); --grid-line: rgba(241,245,249,.06);
  background: #0F172A; color: var(--text);
  border-top: 1px solid rgba(241,245,249,.10); border-bottom: 1px solid rgba(241,245,249,.10);
}
.band-dark h1, .band-dark h2, .band-dark h3, .band-dark h4 { color: var(--text); }
html, body { color-scheme: light; }
/* logo always the light-background variant (dark never renders) */
.brand-logo--dark { display: none !important; }
.brand-logo--light { display: block !important; }

/* #2 consistent vertical rhythm across every band */
.section { padding: clamp(2.8rem, 6vw, 4.6rem) 0; }
.trustbar { padding: clamp(2.2rem, 5vw, 3.4rem) 0; }
.page-hero { padding: clamp(2.6rem, 6vw, 4rem) 0 clamp(2rem, 4vw, 3rem); }

/* #1 stable funnel frame — fixed column height so moving cards never reflow the board */
.board-col { height: 300px; min-height: 300px; overflow: hidden; }
.board-col-body { overflow: hidden; }
@media (max-width: 520px) { .board-col { height: 240px; min-height: 240px; } }

/* #7 rationalise the 72%-problem metric numbers (were oversized / overflowing) */
.metric-band { gap: clamp(1rem, 2.5vw, 1.8rem); }
.metric-band .mb .mb-num { font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.05; overflow-wrap: break-word; }
.metric-band .mb .mb-lbl { font-size: 0.84rem; }

/* =====================================================================
   REMI — the piRevenue mascot, interspersed like a guide across the site
   ===================================================================== */
.remi-band { position: relative; overflow: hidden; border-radius: 22px; color: var(--vision-text);
  background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--brand) 30%, transparent), transparent 55%), var(--vision-bg);
  border: 1px solid var(--vision-line); padding: clamp(1.6rem,4vw,2.6rem);
  display: grid; grid-template-columns: 1fr; gap: 1.4rem; align-items: center; }
@media (min-width: 840px) { .remi-band { grid-template-columns: 290px 1fr; gap: 2.2rem; } }
.remi-figure { position: relative; justify-self: center; }
.remi-figure img { width: min(290px, 70vw); height: auto; display: block; border-radius: 16px; }
.remi-bubble { position: absolute; top: 4%; right: -4%; background: #fff; color: var(--text);
  border-radius: 14px 14px 14px 4px; padding: 0.5rem 0.8rem; font-size: 0.8rem; font-weight: 600;
  max-width: 165px; box-shadow: 0 12px 30px rgba(0,0,0,.35); }
.remi-copy .eyebrow { color: var(--vision-accent); }
.remi-copy .eyebrow::before { background: var(--vision-accent); }
.remi-copy h2 { color: var(--vision-text); font-size: clamp(1.6rem,3.4vw,2.4rem); margin-top: 0.5rem; }
.remi-copy > p { color: var(--vision-muted); margin-top: 0.8rem; max-width: 52ch; }
.remi-verbs { display: grid; grid-template-columns: repeat(2,1fr); gap: 1rem 1.4rem; margin-top: 1.4rem; }
@media (min-width: 560px) { .remi-verbs { grid-template-columns: repeat(4,1fr); } }
.remi-verb b { color: var(--vision-accent); font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: .06em; text-transform: uppercase; display: block; margin-bottom: 0.2rem; }
.remi-verb span { color: var(--vision-muted); font-size: 0.82rem; }
.remi-kicker { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--vision-accent); margin-top: 1.3rem; }

/* small Remi speech callout for light sections */
.remi-callout { display: flex; align-items: center; gap: 1rem; background: var(--surface);
  border: 1px solid var(--border); border-radius: 16px; padding: 1rem 1.3rem;
  box-shadow: 0 16px 36px -28px var(--shadow); max-width: 620px; }
.remi-callout.center { margin-inline: auto; }
.remi-av { width: 66px; height: 66px; border-radius: 50%; object-fit: cover; object-position: top center;
  background: var(--surface-2); border: 2px solid color-mix(in srgb, var(--brand) 42%, transparent); flex: none; }
.remi-callout .rc-txt { font-size: 0.97rem; color: var(--text); }
.remi-callout .rc-txt b { color: var(--brand-ink); }
.remi-name { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); display: block; margin-top: 0.35rem; }

/* #3 "piRevenue on screen" — a branded product mini-UI overlaid on photos so
   every human shot reads as a person working WITH piRevenue */
.pillar-media { position: relative; }
.screen-thumb {
  position: absolute; top: 14px; left: 14px; width: min(46%, 220px); aspect-ratio: 16 / 10;
  border-radius: 10px; border: 1px solid rgba(255,255,255,.55); background: #fff center/cover no-repeat;
  box-shadow: 0 14px 30px -12px rgba(15,23,42,.55); overflow: hidden;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 200'%3E%3Crect width='320' height='200' fill='%23ffffff'/%3E%3Crect width='320' height='30' fill='%23F5F7FB'/%3E%3Ccircle cx='18' cy='15' r='7' fill='%236366F1'/%3E%3Crect x='31' y='11' width='60' height='8' rx='4' fill='%2348566A'/%3E%3Ccircle cx='300' cy='15' r='5' fill='%2322C55E'/%3E%3Cg%3E%3Crect x='12' y='42' width='68' height='120' rx='6' fill='%23EEF1F8'/%3E%3Crect x='90' y='42' width='68' height='120' rx='6' fill='%23EEF1F8'/%3E%3Crect x='168' y='42' width='68' height='120' rx='6' fill='%23EEF1F8'/%3E%3Crect x='246' y='42' width='62' height='120' rx='6' fill='%23E0E7FF'/%3E%3C/g%3E%3Cg fill='%23ffffff' stroke='%23E2E8F0'%3E%3Crect x='18' y='50' width='56' height='26' rx='4'/%3E%3Crect x='96' y='50' width='56' height='26' rx='4'/%3E%3Crect x='96' y='82' width='56' height='26' rx='4'/%3E%3Crect x='174' y='50' width='56' height='26' rx='4'/%3E%3Crect x='252' y='50' width='50' height='26' rx='4'/%3E%3C/g%3E%3Crect x='12' y='170' width='120' height='18' rx='5' fill='%236366F1'/%3E%3Crect x='140' y='170' width='168' height='18' rx='5' fill='%23F97316' opacity='.85'/%3E%3C/svg%3E");
}
@media (max-width: 620px) { .screen-thumb { width: 52%; } }

/* Remi-in-action trio — the agentic AI visual, on-brand and royalty-clean */
.remi-actions { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 1.4rem; }
@media (min-width: 640px) { .remi-actions { grid-template-columns: repeat(3, 1fr); } }
.remi-action { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 1.1rem 1rem; text-align: center; }
.remi-action img { width: 100%; max-width: 168px; height: auto; margin: 0 auto 0.6rem; display: block; border-radius: 12px; background: var(--surface-2); }
.remi-action b { display: block; color: var(--brand-ink); font-size: 0.98rem; }
.remi-action span { color: var(--text-muted); font-size: 0.85rem; }

/* =====================================================================
   FEEDBACK FLOATER (sample-group testing) — bottom-right service-desk widget
   ===================================================================== */
.pi-fab { position: fixed; right: clamp(1rem, 3vw, 1.6rem); bottom: clamp(1rem, 3vw, 1.6rem); z-index: 200;
  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1.05rem; border-radius: 999px;
  background: var(--brand); color: #fff; font: 600 0.92rem/1 var(--font-sans); border: 0; cursor: pointer;
  box-shadow: 0 14px 34px -12px rgba(79,70,229,.6); }
.pi-fab:hover { background: color-mix(in srgb, var(--brand) 88%, black 6%); }
.pi-fab .pi-fab-ic svg { width: 18px; height: 18px; display: block; }
@media (max-width: 520px) { .pi-fab .pi-fab-tx { display: none; } .pi-fab { padding: 0.8rem; } }
@media (prefers-reduced-motion: no-preference) { .pi-fab { transition: transform .15s ease, background .2s ease; } .pi-fab:active { transform: scale(.95); } }

.pi-fbp { position: fixed; right: clamp(1rem, 3vw, 1.6rem); bottom: calc(clamp(1rem, 3vw, 1.6rem) + 3.4rem); z-index: 201;
  width: min(94vw, 380px); background: var(--surface); color: var(--text); border: 1px solid var(--border);
  border-radius: 18px; box-shadow: 0 40px 80px -30px rgba(15,23,42,.5); overflow: hidden; }
:root { color-scheme: light; }
.pi-fbp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.6rem; padding: 1rem 1.1rem 0.7rem;
  background: linear-gradient(120deg, var(--brand-ink), var(--agent-ink)); color: #fff; }
.pi-fbp-head strong { display: block; font-size: 1rem; }
.pi-fbp-head span { display: block; font-size: 0.78rem; opacity: .85; margin-top: 0.15rem; }
.pi-fbp-x { background: rgba(255,255,255,.18); color: #fff; width: 26px; height: 26px; border-radius: 50%; border: 0; cursor: pointer; font-size: 1.1rem; line-height: 1; flex: none; }
.pi-fbp-body { padding: 1rem 1.1rem 1.1rem; display: grid; gap: 0.75rem; }
.pi-fbp-body label { display: grid; gap: 0.3rem; font-size: 0.78rem; font-weight: 600; color: var(--text-muted); }
.pi-fbp-body label span { font-weight: 400; color: var(--text-faint); }
.pi-fbp-body select, .pi-fbp-body input, .pi-fbp-body textarea {
  font: inherit; font-weight: 400; font-size: 0.9rem; color: var(--text); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: 9px; padding: 0.55rem 0.65rem; width: 100%; }
.pi-fbp-body textarea { resize: vertical; min-height: 78px; }
.pi-fbp-body select:focus, .pi-fbp-body input:focus, .pi-fbp-body textarea:focus { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--brand); }
.pi-fbp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.pi-fbp-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-top: 0.2rem; }
.pi-fbp-ctx { font-size: 0.68rem; color: var(--text-faint); font-family: var(--font-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 48%; }
.pi-fbp-foot .btn { padding: 0.55rem 1rem; font-size: 0.88rem; }
.pi-fbp-done { padding: 1.6rem 1.2rem; text-align: center; display: grid; gap: 0.4rem; justify-items: center; }
.pi-fbp-tick { width: 46px; height: 46px; border-radius: 50%; background: color-mix(in srgb, var(--jade) 18%, transparent); color: var(--jade); display: grid; place-items: center; font-size: 1.4rem; font-weight: 700; }
.pi-fbp-done span { color: var(--text-muted); font-size: 0.88rem; }
.pi-fbp-done .btn { margin-top: 0.5rem; }

/* =====================================================================
   PANEL-REVIEW FIXES
   ===================================================================== */
/* trust: visible "illustrative persona" flag on blog article bylines */
.persona-flag { display: inline-flex; align-items: center; gap: 0.3rem; font-family: var(--font-mono);
  font-size: 0.6rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-text);
  background: var(--accent-tint); border-radius: 999px; padding: 0.18em 0.6em; white-space: nowrap; }
.persona-flag::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }

/* legibility: glossary A–Z disabled letters read as intentional, not broken */
.az-index a.disabled { opacity: 1; color: var(--text-faint); background: var(--surface-2); border-color: transparent; }

/* transparency: methodology/disclaimer text should not hide in the faintest token */
.leak-note, .hero-stat-src, .board-caption { color: var(--text-muted); }

/* single brand dot in the market strip (no rainbow) */
.logo-cloud .lc .dotmark { background: var(--brand) !important; opacity: .75; }

/* IA: labelled sub-groups inside the Solutions mega (role vs industry) */
.mega-group-label { grid-column: 1 / -1; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-faint); padding: 0.35rem 0.7rem 0.1rem; }
.mega-group-label:not(:first-child) { border-top: 1px solid var(--border); margin-top: 0.3rem; padding-top: 0.6rem; }

/* design: unify blog thumbnails with a subtle brand tint (kills the stock grab-bag look) */
.post-card .pc-media { position: relative; }
.post-card .pc-media::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(99,102,241,.06), rgba(15,23,42,.10)); mix-blend-mode: multiply; }
.post-card .pc-media img { filter: saturate(.92); }

/* brand: trim the subpage hero Remi orbit so it supports rather than dominates */
.page-hero-viz { width: clamp(190px, 20vw, 260px); }

/* conversion: in-article CTA band (lighter than the dark cta-band, sits inside prose flow) */
.article-cta { margin: 2.4rem 0 0.6rem; border: 1px solid var(--border); border-left: 4px solid var(--brand);
  border-radius: 14px; background: var(--surface-2); padding: 1.3rem 1.5rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.article-cta .ac-txt strong { display: block; font-size: 1.08rem; }
.article-cta .ac-txt span { color: var(--text-muted); font-size: 0.9rem; }
.article-cta .ac-btns { display: flex; gap: 0.6rem; flex-wrap: wrap; }

/* expanded market strip (navy band) grouped by region */
.market-regions { display: grid; gap: 0.9rem; max-width: 980px; margin: 0.2rem auto 0; }
.mr-group { display: grid; grid-template-columns: 140px 1fr; gap: 0.9rem; align-items: baseline; }
@media (max-width: 620px) { .mr-group { grid-template-columns: 1fr; gap: 0.15rem; } }
.mr-label { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-text); }
.mr-list { color: var(--text-muted); font-size: 0.92rem; line-height: 1.7; }
.mr-list .mc { white-space: nowrap; }
.mr-list .mc::before { content: "•"; color: color-mix(in srgb, var(--brand) 60%, transparent); margin: 0 0.4rem 0 0; }

/* ---- standardise on ONE typeface: IBM Plex Sans (mono usages now render in sans) ---- */
:root, :root[data-theme="light"], :root[data-theme="dark"] { --font-mono: var(--font-sans); }

/* ---- larger, more-noticeable section eyebrow/kicker labels ---- */
.eyebrow { font-size: 0.95rem; letter-spacing: 0.06em; font-weight: 700; }
.eyebrow::before { width: 1.6em; }
.pillar-eyebrow, .leak-eyebrow, .constel-eyebrow, .t-eyebrow { font-size: 0.9rem; letter-spacing: 0.05em; font-weight: 700; }
.tb-label { font-size: 0.85rem; letter-spacing: 0.06em; }
.article-cat, .pc-cat { font-size: 0.8rem; letter-spacing: 0.05em; }

/* ── The Math: stack-layer cards (structured, saffron cost) ── */
.stack-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:1.1rem; align-items:stretch; }
.stack-card { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:1.35rem 1.4rem 1.25rem; display:flex; flex-direction:column; gap:0.55rem; position:relative; overflow:hidden; }
.band-dark .stack-card { background:rgba(255,255,255,0.045); border-color:var(--vision-line); }
.stack-card::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent); opacity:.9; }
.sc-top { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; }
.sc-layer { font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.09em; text-transform:uppercase; color:var(--text-faint); }
.sc-cost { font-family:var(--font-mono); font-weight:600; font-size:1.55rem; line-height:1; color:var(--accent); white-space:nowrap; }
.sc-cost small { font-size:0.7rem; font-weight:400; opacity:.85; margin-left:2px; }
.stack-card h3 { font-size:1.1rem; margin:0.15rem 0 0; }
.sc-solves { color:var(--text-muted); font-size:0.9rem; line-height:1.5; margin:0; flex:1; }
.sc-foot { display:flex; flex-direction:column; gap:0.15rem; padding-top:0.7rem; margin-top:0.3rem; border-top:1px dashed var(--border-strong); }
.band-dark .sc-foot { border-top-color:var(--vision-line); }
.sc-prod { font-weight:600; font-size:0.88rem; }
.sc-note { font-family:var(--font-mono); font-size:0.72rem; color:var(--text-faint); }
.sc-total { margin-top:1.9rem; color:var(--text-muted); max-width:76ch; }

/* ── Dynamic hero visuals (viz.js) ── */
.page-hero-viz .viz-frame { position:relative; border-radius:24px; padding:clamp(1rem,2vw,1.5rem); background:linear-gradient(160deg, color-mix(in srgb,var(--brand) 9%,var(--surface)), var(--surface)); border:1px solid var(--border); box-shadow:0 30px 60px -42px var(--shadow); }
.band-dark .page-hero-viz .viz-frame { background:linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); border-color:var(--vision-line); }
.page-hero-viz svg.viz { width:100%; height:auto; display:block; overflow:visible; }
@keyframes viz-dash { to { stroke-dashoffset:-40; } }
@keyframes viz-pulse { 0%,100%{opacity:.4} 50%{opacity:1} }
@keyframes viz-rise { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
@keyframes viz-draw { from { stroke-dashoffset:520; } to { stroke-dashoffset:0; } }
@keyframes viz-sweep { to { transform:rotate(360deg); } }
.viz .flow { stroke-dasharray:5 6; animation:viz-dash 1.7s linear infinite; }
.viz .puls { animation:viz-pulse 2.4s ease-in-out infinite; }
.viz .rise { animation:viz-rise 4.5s ease-in-out infinite; }
.viz .draw { stroke-dasharray:520; animation:viz-draw 3.4s ease-in-out infinite alternate; }
.viz .sweep { animation:viz-sweep 6s linear infinite; }
@media (prefers-reduced-motion: reduce){ .viz * { animation:none !important; } }

/* ── Region strip (saffron) — replaces old country lists on sub-pages ── */
.region-strip { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.45rem 1.2rem; }
.region-strip .rg { font-family:var(--font-mono); font-weight:600; font-size:clamp(1rem,2.3vw,1.35rem); color:var(--accent); letter-spacing:.005em; white-space:nowrap; }
.region-strip .rg-sep { color:var(--text-faint); font-size:1.1rem; }
.region-tag { text-align:center; margin:1rem auto 0; max-width:60ch; color:var(--text-muted); font-size:.95rem; }
.band-dark .region-tag { color:var(--vision-text); opacity:.85; }

/* ── Aha callout: reuse of the "Remi here" box to surface a page's key insight ── */
.remi-callout.aha { border-left:4px solid var(--accent); }
.remi-callout.aha .rc-txt b { color:var(--accent-text, var(--accent)); }

/* subpage hero right-side visual — Remi in a floating orbit frame (fills the empty right) */
.page-hero { position: relative; }
.page-hero-viz { position: absolute; top: 50%; right: clamp(1.5rem, 5vw, 4.5rem); transform: translateY(-50%);
  width: clamp(230px, 26vw, 330px); z-index: 1; pointer-events: none; display: none; }
@media (min-width: 1040px) {
  .page-hero-viz { display: block; }
  .page-hero .wrap > .breadcrumb, .page-hero .wrap > .eyebrow, .page-hero .wrap > h1,
  .page-hero .wrap > .page-lede, .page-hero .wrap > .hero-ctas { max-width: 62%; }
}
.page-hero-viz .pv-frame { position: relative; border-radius: 24px; padding: clamp(1rem,2vw,1.4rem);
  background: radial-gradient(120% 120% at 28% 18%, color-mix(in srgb, var(--brand) 15%, var(--surface)), var(--surface));
  border: 1px solid var(--border); box-shadow: 0 34px 64px -36px var(--shadow); }
.page-hero-viz .pv-frame img { width: 100%; height: auto; display: block; border-radius: 14px; position: relative; z-index: 1; }
.page-hero-viz .pv-orbit { position: absolute; inset: 8%; border: 1.5px dashed color-mix(in srgb, var(--agent) 38%, transparent); border-radius: 50%; }
.page-hero-viz .pv-orbit::before { content: ""; position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-tint); }
.page-hero-viz .pv-orbit::after { content: ""; position: absolute; bottom: -5px; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px var(--brand-tint); }
@media (prefers-reduced-motion: no-preference) {
  @keyframes pv-float { 0%,100% { transform: translateY(-50%); } 50% { transform: translateY(-58%); } }
  @keyframes pv-spin { to { transform: rotate(360deg); } }
  .page-hero-viz { animation: pv-float 6s ease-in-out infinite; }
  .page-hero-viz .pv-orbit { animation: pv-spin 22s linear infinite; }
}