/* ==========================================================
   TRam V14 - AUDITED shared visual system
   Approved homepage is the reference.
   ========================================================== */
:root{
  --tram-navy:#06101d;
  --tram-navy2:#081426;
  --tram-card-dark:#0c1a2e;
  --tram-blue:#536fff;
  --tram-blue2:#456bff;
  --tram-purple:#755cf6;
  --tram-purple2:#7358f4;
  --tram-text:#111827;
  --tram-muted:#536074;
  --tram-light:#f6f7fa;
  --tram-line:#d5dce6;
  --tram-dark-text:#f7f9fc;
  --tram-dark-muted:#aebbd0;

  /* legacy variables normalized */
  --navy:#06101d!important;
  --navy-mid:#081426!important;
  --navy-light:#102746!important;
  --gold:#536fff!important;
  --gold-light:#818cff!important;
  --gold-pale:#eef0ff!important;
  --steel:#536fff!important;
  --steel-light:#7888ff!important;
  --off-white:#f7f9fc!important;
  --cream:#ffffff!important;
  --white:#ffffff!important;
  --gray-100:#f4f6f9!important;
  --gray-200:#d5dce6!important;
  --gray-400:#8190a4!important;
  --gray-600:#59667a!important;
  --gray-800:#273448!important;
  --text:#111827!important;
}
html,body{margin:0;background:#fff;color:var(--tram-text);font-family:'DM Sans',system-ui,sans-serif}
*{box-sizing:border-box}
h1,h2,h3,h4,h5,h6{font-family:'DM Sans',system-ui,sans-serif;letter-spacing:-.035em}
a{color:var(--tram-blue)}
a:hover{color:var(--tram-purple)}

/* ===== EXACT SAME MENU SIZE ON EVERY PAGE ===== */
.nav.tram-uniform-nav{
  position:sticky!important;top:0!important;z-index:1000!important;
  background:#050b15!important;
  border-bottom:1px solid #172236!important;
  backdrop-filter:blur(14px)!important;
  box-shadow:none!important;
}
.nav.tram-uniform-nav .nav-inner{
  max-width:1380px!important;
  margin:0 auto!important;
  padding:12px 28px!important;
  min-height:56px!important;
  display:flex!important;
  align-items:center!important;
  gap:24px!important;
}
.nav.tram-uniform-nav .logo{
  display:flex!important;align-items:center!important;gap:10px!important;
  flex:none!important;text-decoration:none!important;
}
.nav.tram-uniform-nav .logo-mark{
  width:28px!important;height:28px!important;
  border-radius:7px!important;
  display:grid!important;place-items:center!important;
  background:linear-gradient(135deg,var(--tram-blue2),var(--tram-purple2))!important;
  color:#fff!important;border:0!important;
  font:800 9px/1 'DM Sans',system-ui,sans-serif!important;
}
.nav.tram-uniform-nav .logo-text{
  color:#fff!important;
  font:700 16px/1 'DM Sans',system-ui,sans-serif!important;
  letter-spacing:-.025em!important;
  white-space:nowrap!important;
}
.nav.tram-uniform-nav .nav-links{
  margin:0 0 0 auto!important;padding:0!important;list-style:none!important;
  display:flex!important;align-items:center!important;gap:19px!important;
}
.nav.tram-uniform-nav .nav-links>li{position:relative!important;list-style:none!important}
.nav.tram-uniform-nav .nav-links>li>a{
  display:inline-flex!important;align-items:center!important;
  color:#e0e6ef!important;text-decoration:none!important;
  text-transform:none!important;letter-spacing:0!important;
  font:600 11.5px/1 'DM Sans',system-ui,sans-serif!important;
  white-space:nowrap!important;min-height:32px!important;
}
.nav.tram-uniform-nav .nav-links>li>a:hover,
.nav.tram-uniform-nav .nav-links>li>a.nav-studio{color:#fff!important}
.nav.tram-uniform-nav .has-dropdown>a::after{
  content:"▾"!important;margin-left:6px!important;font-size:9px!important;opacity:.65!important;
}
.nav.tram-uniform-nav .dropdown{
  display:block!important;
  position:absolute!important;top:calc(100% + 7px)!important;left:-12px!important;
  min-width:215px!important;margin:0!important;padding:8px!important;list-style:none!important;
  background:#091629!important;border:1px solid #29415f!important;border-radius:10px!important;
  box-shadow:0 20px 55px rgba(0,0,0,.35)!important;
  opacity:0!important;visibility:hidden!important;transform:translateY(6px)!important;
  transition:.15s ease!important;z-index:1100!important;
}
.nav.tram-uniform-nav .has-dropdown:hover>.dropdown,
.nav.tram-uniform-nav .has-dropdown:focus-within>.dropdown{
  opacity:1!important;visibility:visible!important;transform:translateY(0)!important;
}
.nav.tram-uniform-nav .dropdown li{display:block!important;margin:0!important;padding:0!important}
.nav.tram-uniform-nav .dropdown a{
  display:block!important;padding:9px 10px!important;border-radius:7px!important;
  color:#b9c5d7!important;background:transparent!important;
  font:500 11.5px/1.35 'DM Sans',system-ui,sans-serif!important;
  text-transform:none!important;letter-spacing:0!important;text-decoration:none!important;
}
.nav.tram-uniform-nav .dropdown a:hover{background:#102440!important;color:#fff!important}
.nav.tram-uniform-nav .nav-cta{
  padding:9px 13px!important;min-height:auto!important;
  border-radius:7px!important;border:0!important;
  background:linear-gradient(135deg,var(--tram-blue2),var(--tram-purple2))!important;
  color:#fff!important;box-shadow:0 8px 20px rgba(75,92,244,.22)!important;
}
.nav.tram-uniform-nav .nav-cta.nav-login{
  background:transparent!important;border:1px solid #526989!important;box-shadow:none!important;
}
.nav.tram-uniform-nav .hamburger{display:none!important}

/* ===== SAME VISUAL RHYTHM AS HOMEPAGE ===== */
/* dark heroes */
.page-hero,.article-hero,.uc-hero,.studio-try-section,.hero,.hero-section{
  background:
    radial-gradient(circle at 82% 18%,rgba(117,92,246,.20),transparent 29rem),
    radial-gradient(circle at 14% 24%,rgba(72,130,255,.10),transparent 25rem),
    linear-gradient(115deg,var(--tram-navy),var(--tram-navy2))!important;
  color:#fff!important;
}
.page-hero h1,.page-hero h2,.article-hero h1,.uc-hero h1,.hero h1,.hero h2,.hero-section h1{
  color:#fff!important;
}
.page-hero p,.article-hero p,.uc-hero p,.hero p,.hero-section p,.article-meta{
  color:var(--tram-dark-muted)!important;
}
.page-hero-eyebrow,.article-tag{color:#8995ff!important}

/* content sections remain LIGHT, like the homepage middle */
main{background:#fff!important}
.section,.services-detail,.article-layout,.contact-section,.packages-section,.whitepapers-section,
.assessment-section,.about-section,.consultation-section,.insights-section,.content-section,
.platform-content,.use-cases-section,.article-body,.legal-content{
  background:#fff!important;color:var(--tram-text)!important;
}
.section:nth-of-type(even),.section-alt,.section-light,.light-section,.alt-section{
  background:var(--tram-light)!important;
}
.section h1,.section h2,.section h3,.section h4,
.services-detail h2,.article-layout h2,.article-layout h3,
.contact-section h2,.packages-section h2,.insights-section h2{
  color:var(--tram-text)!important;
}
.section p,.section li,.section-sub,.services-detail p,.services-detail li,
.article-content p,.article-content li,.contact-section p,.packages-section p,
.insights-section p,.content-section p{
  color:var(--tram-muted)!important;
}

/* cards - clean light enterprise style */
.service-card,.founder-card,.insight-card,.insight-featured,.package-card,.whitepaper-card,
.uc-card,.studio-uc-card,.contact-info,.contact-form,.assessment-card,.result-card,
.article-sidebar-card,.card,.panel,.feature-card,.comparison-card,.pricing-card,
.process-card,.metric-card,.stat-card,.faq-item{
  background:#fff!important;
  border:1px solid var(--tram-line)!important;
  color:var(--tram-text)!important;
  border-radius:10px!important;
  box-shadow:0 10px 30px rgba(31,45,68,.06)!important;
}
.service-card:hover,.insight-card:hover,.uc-card:hover,.studio-uc-card:hover,.card:hover{
  border-color:#9ba7ff!important;
  box-shadow:0 18px 42px rgba(31,45,68,.12)!important;
}
.service-card h3,.insight-card h3,.uc-card h3,.studio-uc-card h3,.card h3,
.package-card h3,.whitepaper-card h3{color:var(--tram-text)!important}
.service-card p,.insight-card p,.uc-card p,.studio-uc-card p,.card p,
.package-card p,.whitepaper-card p{color:var(--tram-muted)!important}

/* all legacy teal/gold accent classes become blue/purple */
.service-num,.service-icon,.service-arrow,.insight-tag,.credential,.badge,.tag,.pill,
.uc-tag,.studio-tag,.kicker,.eyebrow,.teal,.text-teal,.cyan,.text-cyan,.studio-teal,
.uc-teal,.accent,.accent-text,.link-accent{
  color:var(--tram-blue)!important;
}
.credential,.badge,.tag,.pill,.uc-tag,.studio-tag,.bg-teal,.bg-cyan,.teal-bg,.gold-pale{
  background:#eef0ff!important;border-color:#dce1ff!important;
}
.border-teal,.border-cyan,.gold-border{border-color:#8998ff!important}
.service-card::after,.accent-bar,.progress-fill,.gradient-accent{
  background:linear-gradient(135deg,var(--tram-blue2),var(--tram-purple2))!important;
}
.callout-gold,.service-detail-led,.article-callout,.highlight-box{
  background:#f1f3ff!important;border-color:#d8ddff!important;color:#26354d!important;
}
.article-pullquote{border-left-color:#6478ff!important;color:#26354d!important}

/* forms/tables */
input,textarea,select{
  background:#fff!important;color:var(--tram-text)!important;
  border:1px solid #cbd5e3!important;border-radius:8px!important;
}
input:focus,textarea:focus,select:focus{
  border-color:#6578ff!important;box-shadow:0 0 0 3px rgba(83,111,255,.12)!important;outline:none!important;
}
table{background:#fff!important;color:var(--tram-text)!important}
thead,th{background:#f2f5fa!important;color:#1c2739!important}
td{color:#4d5a6e!important;border-color:#dfe5ed!important}

/* buttons */
.btn-primary,.btn-accent,.btn-studio,.nav-cta:not(.nav-login),button[type="submit"]{
  background:linear-gradient(135deg,var(--tram-blue2),var(--tram-purple2))!important;
  color:#fff!important;border-color:transparent!important;
}
.btn-ghost-dark,.btn-outline,.nav-login,.btn-studio-ghost{
  background:transparent!important;color:#243047!important;border-color:#8290a7!important;
}

/* Studio / use case status colors:
   success stays green, errors red; brand teal is removed */
.studio-page .section-label,.studio-page .uc-go,.studio-page .studio-link,
.uc-links a,.studio-window-url,.stc-who{color:var(--tram-blue)!important}
.studio-page .studio-window,.studio-page .studio-try-window{
  border-color:#31517a!important;
}
.studio-page .stc-agent,.studio-page .stc-user{
  border-color:#31517a!important;
}

/* chatbot */
#tram-chat{
  --tc-navy:#071426!important;--tc-navy2:#08182d!important;--tc-navy3:#102746!important;
  --tc-line:#31517a!important;--tc-gold:#5b6fff!important;--tc-gold-l:#9c91ff!important;
  --tc-ink:#f7f9fc!important;--tc-muted:#a7b5c9!important;--tc-dim:#7488a7!important;
}
#tram-chat .tc-fab{
  background:linear-gradient(135deg,#4a6bff,#755cf6)!important;
  box-shadow:0 14px 34px rgba(75,91,244,.38)!important;
}
#tram-chat .tc-panel{background:linear-gradient(180deg,#09182d,#071426)!important;border-color:#355985!important}
#tram-chat .tc-head{background:linear-gradient(180deg,#0d1e39,#0a1930)!important}
#tram-chat .tc-msg.bot{background:linear-gradient(145deg,#132a4e,#18375f)!important}
#tram-chat .tc-msg.user{background:linear-gradient(135deg,#4a68ff,#735bf5)!important}
#tram-chat .tc-send{background:linear-gradient(135deg,#4a6bff,#755cf6)!important}

/* footer */
.tram-uniform-footer{
  background:#050d18!important;color:#fff!important;
  border-top:1px solid #1d3049!important;padding:48px 28px 20px!important;
}
.tram-footer-grid{
  max-width:1240px;margin:auto;
  display:grid;grid-template-columns:1.3fr repeat(3,1fr) 1.15fr;gap:38px;align-items:start;
}
.tram-footer-logo{display:flex;align-items:center;gap:10px;color:#fff!important;text-decoration:none!important;font-weight:700}
.tram-footer-mark{
  width:31px;height:31px;border-radius:8px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--tram-blue2),var(--tram-purple2));color:#fff;font-size:9px;font-weight:800;
}
.tram-footer-brand p{color:#8fa0b8!important;font-size:12px;line-height:1.6;max-width:255px}
.tram-footer-col h4,.tram-footer-partner strong{color:#fff!important;font-size:12px;margin:0 0 14px}
.tram-footer-col a{display:block;color:#99a9bd!important;text-decoration:none!important;font-size:11.5px;margin-bottom:8px}
.tram-footer-col a:hover{color:#fff!important}
.tram-footer-partner{border-left:1px solid #20344e;padding-left:24px}
.tram-footer-partner span{display:block;color:#8fa0b8!important;font-size:11px;line-height:1.55}
.tram-footer-partner b{display:block;color:#929cff!important;margin:7px 0;font-size:13px}
.tram-footer-bottom{
  max-width:1240px;margin:38px auto 0;padding-top:18px;border-top:1px solid #1c2f47;
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;color:#71859f;font-size:10.5px;
}
.tram-footer-bottom a{color:#8293aa!important;text-decoration:none!important;margin-left:20px}

/* Homepage approved contrast restored explicitly */
body.tram-v4 .vhero{background:radial-gradient(circle at 83% 18%,rgba(102,56,213,.25),transparent 30rem),linear-gradient(115deg,#07101d,#06101d 70%,#0d0920)!important}
body.tram-v4 .vwhite{background:#fff!important;color:#111827!important}
body.tram-v4 .vwhite h2,body.tram-v4 .vwhite h3{color:#111827!important}
body.tram-v4 .vwhite p{color:#536074!important}
body.tram-v4 .vwhite .vcard{background:#fff!important;border-color:#d5dce6!important}
body.tram-v4 .vms{background:#f6f7fa!important;color:#111827!important}
body.tram-v4 .vms strong,body.tram-v4 .vms b{color:#111827!important}
body.tram-v4 .vms span,body.tram-v4 .vms .vmpn{color:#4f5b6d!important}
body.tram-v4 .vms .vmpn b,body.tram-v4 .vms .vazure strong{color:#425fff!important}
body.tram-v4 .vdark{background:radial-gradient(circle at 90% 40%,rgba(94,48,205,.22),transparent 25rem),#07101e!important;color:#fff!important}
body.tram-v4 .vcta{background:#fff!important;color:#111827!important}
body.tram-v4 .vcta h2{color:#111827!important}
body.tram-v4 .vcta p{color:#59667a!important}

@media(max-width:1050px){
  .nav.tram-uniform-nav .nav-links{gap:12px!important}
  .nav.tram-uniform-nav .nav-links>li>a{font-size:10.5px!important}
}
@media(max-width:860px){
  .nav.tram-uniform-nav .nav-links{display:none!important}
  .nav.tram-uniform-nav .hamburger{display:block!important;margin-left:auto!important;background:none!important;border:0!important}
  .nav.tram-uniform-nav .hamburger span{display:block!important;width:22px!important;height:2px!important;background:#fff!important;margin:4px 0!important}
  .tram-footer-grid{grid-template-columns:1fr 1fr}
  .tram-footer-brand,.tram-footer-partner{grid-column:1/-1}
  .tram-footer-partner{border-left:0;padding-left:0}
}



/* ==========================================================
   TRam V15 — Logo, Header, Hero Typography, Dropdown UX
   ========================================================== */

/* --- Logo: inspired by the provided square-mark + wordmark reference --- */
.nav.tram-uniform-nav .tram-logo{
  gap:11px!important;
  text-decoration:none!important;
}
.nav.tram-uniform-nav .tram-logo-mark{
  width:34px!important;
  height:34px!important;
  border-radius:0!important;
  background:linear-gradient(135deg,#536fff 0%,#6b65f2 100%)!important;
  color:#ffffff!important;
  border:0!important;
  display:grid!important;
  place-items:center!important;
  font-family:Georgia,'Times New Roman',serif!important;
  font-size:11px!important;
  line-height:1!important;
  font-weight:700!important;
  letter-spacing:.03em!important;
  box-shadow:none!important;
}
.nav.tram-uniform-nav .tram-logo-text{
  color:#f7f9fc!important;
  font-family:Georgia,'Times New Roman',serif!important;
  font-size:18px!important;
  line-height:1!important;
  font-weight:700!important;
  letter-spacing:-.01em!important;
  white-space:nowrap!important;
}

/* --- Header/menu: slightly larger than V14, still compact and enterprise --- */
.nav.tram-uniform-nav .nav-inner{
  max-width:1380px!important;
  padding:14px 30px!important;
  min-height:64px!important;
}
.nav.tram-uniform-nav .nav-links{
  gap:22px!important;
}
.nav.tram-uniform-nav .nav-links>li>a{
  min-height:36px!important;
  font-size:12.5px!important;
  font-weight:600!important;
}
.nav.tram-uniform-nav .nav-cta{
  padding:10px 15px!important;
  font-size:12px!important;
}

/* --- Dropdown: no dead hover gap; submenu stays open while pointer moves into it --- */
.nav.tram-uniform-nav .has-dropdown{
  padding-bottom:0!important;
}
.nav.tram-uniform-nav .has-dropdown>.dropdown{
  top:100%!important;
  margin-top:0!important;
  padding-top:8px!important;
  min-width:225px!important;
  pointer-events:auto!important;
}
/* Invisible bridge extends hit area from parent to dropdown */
.nav.tram-uniform-nav .has-dropdown::after{
  content:""!important;
  position:absolute!important;
  left:-12px!important;
  right:-12px!important;
  top:100%!important;
  height:10px!important;
  z-index:1099!important;
}
.nav.tram-uniform-nav .has-dropdown:hover>.dropdown,
.nav.tram-uniform-nav .has-dropdown:focus-within>.dropdown{
  opacity:1!important;
  visibility:visible!important;
  transform:translateY(0)!important;
}
.nav.tram-uniform-nav .dropdown a{
  font-size:12px!important;
  padding:10px 11px!important;
}

/* --- Hero typography: same type scale/treatment as approved index hero --- */
.page-hero h1,
.article-hero h1,
.uc-hero h1,
.hero h1,
.hero-section h1,
.studio-try-section h1{
  font-family:'DM Sans',system-ui,sans-serif!important;
  font-size:52px!important;
  line-height:1.12!important;
  letter-spacing:-.045em!important;
  font-weight:700!important;
  margin-top:0!important;
  margin-bottom:22px!important;
}
.page-hero p,
.article-hero p,
.uc-hero p,
.hero p,
.hero-section p,
.studio-try-section p{
  font-family:'DM Sans',system-ui,sans-serif!important;
  font-size:18px!important;
  line-height:1.62!important;
  font-weight:400!important;
}
.page-hero-eyebrow,
.article-tag,
.hero .eyebrow,
.hero-section .eyebrow,
.uc-hero .eyebrow{
  font-family:'DM Sans',system-ui,sans-serif!important;
  font-size:12px!important;
  line-height:1.2!important;
  letter-spacing:.14em!important;
  text-transform:uppercase!important;
  font-weight:600!important;
}

/* If hero headings use <em>, match index gradient treatment */
.page-hero h1 em,
.article-hero h1 em,
.uc-hero h1 em,
.hero h1 em,
.hero-section h1 em,
.studio-try-section h1 em{
  font-style:normal!important;
  background:linear-gradient(90deg,#4b8dff,#7b58f5)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  color:transparent!important;
}

@media(max-width:1050px){
  .nav.tram-uniform-nav .nav-links{gap:14px!important}
  .nav.tram-uniform-nav .nav-links>li>a{font-size:11.5px!important}
  .nav.tram-uniform-nav .tram-logo-text{font-size:17px!important}
}
@media(max-width:760px){
  .page-hero h1,.article-hero h1,.uc-hero h1,.hero h1,.hero-section h1,.studio-try-section h1{
    font-size:40px!important;
  }
  .page-hero p,.article-hero p,.uc-hero p,.hero p,.hero-section p,.studio-try-section p{
    font-size:16px!important;
  }
}

.nav.tram-uniform-nav .has-dropdown.tram-menu-open>.dropdown{opacity:1!important;visibility:visible!important;transform:translateY(0)!important;}


/* ==========================================================
   TRam V16 — Footer logo + dark-box readability correction
   ========================================================== */

/* Footer logo is now the same design language and proportions as header */
.tram-uniform-footer .tram-footer-logo{
  display:flex!important;
  align-items:center!important;
  gap:11px!important;
  color:#f7f9fc!important;
  text-decoration:none!important;
}
.tram-uniform-footer .tram-footer-mark{
  width:34px!important;
  height:34px!important;
  border-radius:0!important;
  display:grid!important;
  place-items:center!important;
  background:linear-gradient(135deg,#536fff 0%,#6b65f2 100%)!important;
  color:#fff!important;
  font-family:Georgia,'Times New Roman',serif!important;
  font-size:11px!important;
  line-height:1!important;
  font-weight:700!important;
  letter-spacing:.03em!important;
  box-shadow:none!important;
}
.tram-uniform-footer .tram-footer-wordmark{
  color:#f7f9fc!important;
  font-family:Georgia,'Times New Roman',serif!important;
  font-size:18px!important;
  line-height:1!important;
  font-weight:700!important;
  letter-spacing:-.01em!important;
}

/* Any heading/title rendered inside a dark box must be white */
[style*="background:#0"] h1,[style*="background: #0"] h1,
[style*="background:#0"] h2,[style*="background: #0"] h2,
[style*="background:#0"] h3,[style*="background: #0"] h3,
[style*="background:#0"] h4,[style*="background: #0"] h4,
.dark-box h1,.dark-box h2,.dark-box h3,.dark-box h4,
.dark-card h1,.dark-card h2,.dark-card h3,.dark-card h4,
.cta-dark h1,.cta-dark h2,.cta-dark h3,.cta-dark h4,
.cta-box h1,.cta-box h2,.cta-box h3,.cta-box h4,
.dark-section h1,.dark-section h2,.dark-section h3,.dark-section h4,
.article-cta h1,.article-cta h2,.article-cta h3,.article-cta h4,
.assessment-cta h1,.assessment-cta h2,.assessment-cta h3,.assessment-cta h4,
.package-cta h1,.package-cta h2,.package-cta h3,.package-cta h4,
.final-cta h1,.final-cta h2,.final-cta h3,.final-cta h4{
  color:#ffffff!important;
}

/* Dark outlined/black buttons: label must always be white */
.btn-dark,.btn-black,.btn-outline-dark,.btn-ghost-dark,
.dark-box .btn-outline,.dark-card .btn-outline,.cta-dark .btn-outline,
.cta-box .btn-outline,.dark-section .btn-outline,.article-cta .btn-outline,
.assessment-cta .btn-outline,.package-cta .btn-outline,.final-cta .btn-outline,
a[style*="background:#0"],a[style*="background: #0"],
button[style*="background:#0"],button[style*="background: #0"]{
  color:#ffffff!important;
}
.btn-dark *, .btn-black *, .btn-outline-dark *, .btn-ghost-dark *,
.dark-box .btn-outline *, .dark-card .btn-outline *, .cta-dark .btn-outline *,
.cta-box .btn-outline *, .dark-section .btn-outline *, .article-cta .btn-outline *,
.assessment-cta .btn-outline *, .package-cta .btn-outline *, .final-cta .btn-outline *{
  color:#ffffff!important;
}

/* Common dark CTA/card containers across legacy pages */
.cta-section,.cta-panel,.cta-content,.dark-panel,.assessment-cta,.article-cta,
.package-cta,.final-cta,.consultation-cta,.governance-cta{
  color:#f7f9fc!important;
}
.cta-section h1,.cta-section h2,.cta-section h3,
.cta-panel h1,.cta-panel h2,.cta-panel h3,
.cta-content h1,.cta-content h2,.cta-content h3,
.dark-panel h1,.dark-panel h2,.dark-panel h3,
.assessment-cta h1,.assessment-cta h2,.assessment-cta h3,
.article-cta h1,.article-cta h2,.article-cta h3,
.package-cta h1,.package-cta h2,.package-cta h3,
.final-cta h1,.final-cta h2,.final-cta h3,
.consultation-cta h1,.consultation-cta h2,.consultation-cta h3,
.governance-cta h1,.governance-cta h2,.governance-cta h3{
  color:#ffffff!important;
}

/* Audited inline dark containers */
.service-detail-led h1,.service-detail-led h2,.service-detail-led h3,.service-detail-led h4{color:#fff!important;}
.service-detail-led .btn,.service-detail-led button,.service-detail-led a.btn{color:#fff!important;}
.sidebar-author-avatar h1,.sidebar-author-avatar h2,.sidebar-author-avatar h3,.sidebar-author-avatar h4{color:#fff!important;}
.sidebar-author-avatar .btn,.sidebar-author-avatar button,.sidebar-author-avatar a.btn{color:#fff!important;}


/* ==========================================================
   TRam V17 — screenshot audit corrections
   ========================================================== */

/* 1) FLAT ENTERPRISE UI — no rounded rectangles anywhere in marketing UI */
.btn,.nav-cta,.dropdown,.service-card,.founder-card,.insight-card,.insight-featured,
.package-card,.whitepaper-card,.uc-card,.studio-uc-card,.contact-info,.contact-form,
.assessment-card,.result-card,.article-sidebar-card,.article-callout,.card,.panel,
.feature-card,.comparison-card,.pricing-card,.process-card,.metric-card,.stat-card,
.faq-item,.tier-card,.tier-badge,.tier-enterprise,.compare-col,.pricing-card,
.studio-window,.studio-try-window,.stc-bubble,.studio-eyebrow,.hero-badge,.hero-studio-pill,
.studio-transform .to,.service-detail-led,.contact-note-box,.contact-availability,
input,textarea,select,button,.tc-panel,.tc-peek,.tc-chip,.tc-foot input,.tc-send{
  border-radius:0!important;
}
/* status dots / browser lights remain circular by design */
.tc-dot,.tc-badge,.badge-dot,.eyebrow .dot,.panel-bar i,.studio-window-bar i,.step .tick,
.venn-circle{border-radius:50%!important}

/* 2) HEADER SPACING — centered, never clipped, consistent at desktop widths */
.nav.tram-uniform-nav{width:100%!important;overflow:visible!important}
.nav.tram-uniform-nav .nav-inner{
  width:100%!important;max-width:1280px!important;margin:0 auto!important;
  padding:14px 24px!important;min-height:64px!important;box-sizing:border-box!important;
}
.nav.tram-uniform-nav .logo{margin-left:0!important;transform:none!important}
.nav.tram-uniform-nav .nav-links{min-width:0!important;gap:18px!important}
@media(max-width:1200px){
  .nav.tram-uniform-nav .nav-inner{padding-left:18px!important;padding-right:18px!important}
  .nav.tram-uniform-nav .nav-links{gap:12px!important}
  .nav.tram-uniform-nav .nav-links>li>a{font-size:11px!important}
  .nav.tram-uniform-nav .nav-cta{padding:9px 10px!important;font-size:11px!important}
  .nav.tram-uniform-nav .tram-logo-text{font-size:17px!important}
}
@media(max-width:1020px){
  .nav.tram-uniform-nav .nav-links{display:none!important}
  .nav.tram-uniform-nav .hamburger{display:block!important;margin-left:auto!important}
}

/* 3) TYPOGRAPHY — eliminate old display serif from page UI and components */
h1,h2,h3,h4,.tier-price-num,.compare-head,.vc-label,.venn-overlap span,
.studio-title,.studio-cta h3,.faq-item summary,.agent-title h3{
  font-family:'DM Sans',system-ui,sans-serif!important;
}

/* 4) OUTLINE BUTTON CONTRAST — default is dark text on light surfaces */
.btn-ghost-dark,.btn-outline-dark,.btn-ghost,.btn-outline,
.article-callout .btn-ghost-dark,.tier-card .btn-ghost-dark,
.service-detail-right .btn-ghost-dark,.pricing-card .btn-ghost-dark,
.whitepaper-card .btn-ghost-dark,.package-card .btn-ghost-dark{
  color:#172033!important;background:transparent!important;border:1px solid #6f8099!important;
}
.btn-ghost-dark:hover,.btn-outline-dark:hover,.btn-ghost:hover,.btn-outline:hover{
  color:#fff!important;background:#172033!important;border-color:#172033!important;
}
/* dark surfaces get white outline labels */
.hero .btn-ghost,.hero-section .btn-ghost,.studio-section .btn-ghost,
.diff-section .btn-ghost,.tier-enterprise .btn-ghost-dark,.article-cta .btn-ghost-dark,
.cta-section .btn-ghost-dark,.cta-band .btn-ghost,.contact-availability .btn{
  color:#fff!important;border-color:#7083a2!important;background:transparent!important;
}

/* 5) PLATFORM pricing + enterprise band */
.tier-card,.tier-enterprise,.faq-item{border-radius:0!important}
.tier-card .tier-cta{color:#172033!important;min-height:46px!important;display:flex!important;align-items:center!important;justify-content:center!important}
.tier-card.featured .tier-cta{color:#fff!important}
.tier-enterprise h3{color:#fff!important;font-family:'DM Sans',system-ui,sans-serif!important;font-weight:700!important}
.tier-enterprise p{color:#b7c3d3!important}
.tier-enterprise .btn-primary{color:#fff!important}
.faq-item summary{font-family:'DM Sans',system-ui,sans-serif!important;font-weight:600!important}

/* 6) WHITE PAPERS / LIGHT CALLOUTS */
.article-callout{background:#f3f5ff!important;border:1px solid #cfd6ff!important;padding:26px 28px!important}
.article-callout h2,.article-callout h3{color:#172033!important}
.article-callout p{color:#3f4e65!important}
.article-callout .btn{min-height:44px!important;align-items:center!important;justify-content:center!important}
.article-callout .btn-ghost-dark{color:#172033!important;background:transparent!important}

/* 7) CONSULTATION — remove legacy green/gold and unreadable dark text */
.hero{padding-top:0!important;margin-top:0!important}
.hero-grid{background-image:linear-gradient(rgba(83,111,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(83,111,255,.05) 1px,transparent 1px)!important}
.hero-orb-2{background:rgba(117,92,246,.18)!important}
.hero-badge{background:rgba(83,111,255,.09)!important;border-color:rgba(83,111,255,.35)!important;color:#8f9cff!important}
.badge-dot{background:#536fff!important}
.hero-title em{font-style:normal!important;background:linear-gradient(90deg,#4b8dff,#7b58f5)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important}
.hero-studio-pill{background:#0d1c34!important;border:1px solid #38527b!important;color:#dce5f2!important}
.hero-studio-pill .hsp-tag{background:#536fff!important;color:#fff!important}
.hero-studio-pill .hsp-arrow{color:#8f9cff!important}
.stat-num{font-family:'DM Sans',system-ui,sans-serif!important;color:#8292ff!important}
.diff-bg{background:linear-gradient(135deg,#07101d 0%,#0b1930 55%,#1d285c 100%)!important}
/* .diff-section renders on #f6f7fa (light) on the only page that has one
   (consultation.html) — these were written for a dark panel and made the
   heading white-on-near-white. Measured 2026-08-12. */
.diff-section .section-title.light,.diff-section h2{color:#111827!important}
.diff-section .section-sub.light,.diff-section p{color:#536074!important}
.diff-list li{color:#c3cedc!important}.diff-list .check{color:#7185ff!important}
.vc-left{background:rgba(63,112,190,.28)!important;border-color:rgba(83,111,255,.65)!important}
.vc-right{background:rgba(117,92,246,.22)!important;border-color:rgba(117,92,246,.65)!important}
.venn-overlap{background:#0c1a31!important;border-color:#7b70ff!important}.venn-overlap span{color:#a79fff!important}
.studio-orb-1{background:rgba(83,111,255,.18)!important}.studio-orb-2{background:rgba(117,92,246,.16)!important}
.studio-eyebrow{color:#8f9cff!important;border-color:#40568b!important;background:#111d3c!important}
.studio-eyebrow .dot{background:#536fff!important;box-shadow:none!important}
.studio-title{font-family:'DM Sans',system-ui,sans-serif!important;color:#fff!important;font-weight:700!important}
.studio-title em{font-style:normal!important;background:linear-gradient(90deg,#4b8dff,#7b58f5)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important}
.studio-transform .arrow{color:#8292ff!important}.studio-transform .to{color:#dce5ff!important;background:#111d3c!important;border-color:#5268a8!important;box-shadow:none!important}
.btn-studio{background:linear-gradient(135deg,#456bff,#7358f4)!important;color:#fff!important}.btn-studio:hover{background:linear-gradient(135deg,#5579ff,#836af7)!important;box-shadow:none!important}
.btn-studio-ghost{color:#fff!important;border-color:#687b99!important}.btn-studio-ghost:hover{color:#fff!important;border-color:#8494ff!important;background:#101c35!important}
.studio-window{border-color:#31517a!important;background:#0b1729!important;box-shadow:0 24px 60px rgba(0,0,0,.35)!important}
.studio-window-bar .y,.studio-window-bar .g{background:#536fff!important}
.stc-agent .stc-who,.studio-window-url{color:#8292ff!important}
.stc-bubble{border-color:#31517a!important}

/* 8) STUDIO PAGE — replace amber/teal legacy token colors */
body.studio-page{--accent:#536fff!important;--accent2:#818cff!important;--accentdim:#1d2a57!important;--amber:#8f84ff!important;--purple:#9aa5ff!important}
body.studio-page .hero::before{background:radial-gradient(ellipse at center,rgba(83,111,255,.12),transparent 62%)!important}
body.studio-page .eyebrow{border-color:#3a4f83!important;background:#111d3b!important;border-radius:0!important}
body.studio-page .panel,body.studio-page .fgrid,body.studio-page .stats,body.studio-page .cmp-col,body.studio-page .dcard,body.studio-page .cta-band{border-radius:0!important}
body.studio-page .ic-hum{background:rgba(117,92,246,.14)!important;color:#a89fff!important}
body.studio-page .ic-slk{background:rgba(83,111,255,.14)!important;color:#8292ff!important}
body.studio-page .btn-accent{color:#fff!important;background:linear-gradient(135deg,#456bff,#7358f4)!important}
body.studio-page .panel-live{border-radius:0!important}
body.studio-page .step .ic{border-radius:0!important}

/* 9) AI SOLUTIONS — clean old green strips and button visibility */
.service-detail-led{background:#101d36!important;color:#fff!important;border-left:3px solid #536fff!important}
.service-detail-led::before{background:#536fff!important}
.service-detail-right .btn-ghost-dark{color:#172033!important;border-color:#6f8099!important}

/* 10) USE-CASE pages — remove teal from demo windows */
body.studio-page .studio-try-section .section-label,.uc-links a,.uc-n,.stc-agent .stc-who{color:#536fff!important}
body.studio-page .studio-window,body.studio-page .studio-try-window{border-color:#31517a!important;border-radius:0!important}
body.studio-page .stc-user .stc-bubble{background:#17244d!important;border-color:#536fff!important;color:#fff!important}
body.studio-page .stc-agent .stc-bubble{background:#0e1c31!important;color:#fff!important}

/* 11) ARTICLE / FRACTIONAL CTO card geometry */
.faq-block .faq-item,.compare-col,.pricing-card,.article-sidebar-card{border-radius:0!important}
.faq-block .faq-item{padding:18px 0!important;background:transparent!important;border-left:0!important;border-right:0!important}

/* 12) CONTACT — square cards, balanced spacing */
.contact-section{padding:84px 0!important}
.contact-inner{gap:56px!important;align-items:start!important}
.contact-info,.contact-form{border-radius:0!important}
.contact-info{padding:0!important;box-shadow:none!important;border:0!important}
.contact-info h2{margin-top:0!important}
.contact-form{padding:40px!important}
.contact-availability{margin-top:32px!important;border-top:3px solid #536fff!important}
.contact-availability h4{color:#8f9cff!important}
.contact-note-box{border-left:3px solid #536fff!important;background:#f1f3ff!important}
.contact-point-icon{background:#071426!important;color:#8292ff!important}

/* 13) Chat follows same square geometry */
#tram-chat .tc-panel,#tram-chat .tc-peek,#tram-chat .tc-chip,#tram-chat .tc-foot input,#tram-chat .tc-send{border-radius:0!important}



/* ==========================================================
   TRam V18 — screenshot follow-up fixes
   ========================================================== */

/* 1) Consultation hero metric strip: more breathing room */
.hero-studio-pill{
  margin-top:34px!important;
  margin-bottom:26px!important;
}
.hero-stats{
  margin-top:8px!important;
  padding-top:18px!important;
  padding-bottom:12px!important;
  gap:20px!important;
}
.hero-stats .stat{
  min-width:96px!important;
  padding:0 12px!important;
}
.hero-stats .stat-div{
  margin:0 4px!important;
}

/* 2) Platform hero secondary button must remain readable on dark */
.page-hero .btn-ghost-dark,
.page-hero .btn-outline-dark,
.page-hero .btn-ghost,
.page-hero .btn-outline{
  color:#ffffff!important;
  border-color:#7f91ad!important;
  background:rgba(255,255,255,.02)!important;
}
.page-hero .btn-ghost-dark:hover,
.page-hero .btn-outline-dark:hover,
.page-hero .btn-ghost:hover,
.page-hero .btn-outline:hover{
  color:#ffffff!important;
  background:#13233b!important;
  border-color:#93a2ba!important;
}

/* 3/4) Pricing buttons: all four use one treatment, white text */
.tier-card .tier-cta,
.tier-card.featured .tier-cta{
  background:linear-gradient(135deg,#456bff,#7358f4)!important;
  border:1px solid transparent!important;
  color:#ffffff!important;
  min-height:48px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  padding:12px 16px!important;
}
.tier-card .tier-cta:hover,
.tier-card.featured .tier-cta:hover{
  background:linear-gradient(135deg,#5878ff,#8268fa)!important;
  color:#ffffff!important;
}
.tier-card .tier-cta *,
.tier-card.featured .tier-cta *{
  color:#ffffff!important;
}

/* 5) Platform hero: substantially more top/bottom air */
body:not(.studio-page) .page-hero{
  padding-top:108px!important;
  padding-bottom:116px!important;
}
.platform-page .page-hero,
body:has(#pricing) .page-hero{
  padding-top:118px!important;
  padding-bottom:126px!important;
}
.page-hero .container{
  position:relative!important;
  z-index:2!important;
}

/* Give the first white section after platform hero some dark visual weight on the right */
body:has(#pricing) .problem-section{
  position:relative!important;
  overflow:hidden!important;
}
body:has(#pricing) .problem-section::after{
  content:""!important;
  position:absolute!important;
  top:0!important;
  right:0!important;
  width:25%!important;
  height:100%!important;
  background:
    linear-gradient(180deg,rgba(7,16,29,.96),rgba(16,34,62,.93))!important;
  z-index:0!important;
}
body:has(#pricing) .problem-section>.container{
  position:relative!important;
  z-index:1!important;
}
body:has(#pricing) .problem-grid{
  position:relative!important;
  z-index:1!important;
}

/* Keep marketing UI square ... */
.btn,.card,.panel,.tier-card,.tier-enterprise,.faq-item,.problem-card,.function-card,
.service-card,.package-card,.whitepaper-card,.contact-info,.contact-form,
.article-callout,.article-sidebar-card,.studio-window,.studio-try-window,
.hero-studio-pill,.pricing-card,.compare-col,.cmp-col,.dcard{
  border-radius:0!important;
}

/* ...but explicitly preserve rounded chatbot affordances/messages */
#tram-chat .tc-peek{border-radius:12px!important}
#tram-chat .tc-fab{border-radius:50%!important}
#tram-chat .tc-dot{border-radius:50%!important}
#tram-chat .tc-badge{border-radius:11px!important}
#tram-chat .tc-panel{border-radius:16px!important}
#tram-chat .tc-ico{border-radius:6px!important}
#tram-chat .tc-msg{border-radius:14px!important}
#tram-chat .tc-msg.bot{border-bottom-left-radius:4px!important}
#tram-chat .tc-msg.user{border-bottom-right-radius:4px!important}
#tram-chat .tc-typing{border-radius:14px!important;border-bottom-left-radius:4px!important}
#tram-chat .tc-typing span{border-radius:50%!important}
#tram-chat .tc-chip{border-radius:20px!important}
#tram-chat .tc-foot input{border-radius:24px!important}
#tram-chat .tc-send{border-radius:50%!important}
#tram-chat.tc-popout .tc-panel{border-radius:0!important}

/* Prevent legacy dark-button rule from washing out pricing labels */
.packages-section .tier-card .btn,
.packages-section .tier-card .btn *,
#pricing .tier-card .btn,
#pricing .tier-card .btn *{
  color:#ffffff!important;
}

/* ==========================================================================
   Shared token aliases + small shared components.
   WHY: index.html and studio.html declare their own --accent/--mono/--ink/etc
   in inline <style> blocks. Every other page loads only styles.css +
   tram-audited.css, where those names never existed — so markup written
   against them (the Microsoft partner credential lines, the footer legal
   links) silently fell back to browser defaults. These aliases give the whole
   site the same names, pointing at the same values.
   ========================================================================== */
:root{
  --accent:#536fff;
  --accent-2:#755cf6;
  --accent-dim:#3d55d8;
  --ink:#111827;
  --muted:#536074;
  --dim:#8190a4;
  --line:#d5dce6;
  --mono:'DM Mono',ui-monospace,monospace;
  --sans:'DM Sans',system-ui,sans-serif;
  --serif:'Cormorant Garamond',Georgia,serif;
}

/* Microsoft partner / credential line — one definition, used on every page. */
.mpn-line{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.04em;
  color:var(--muted);
  margin-top:14px;
}
.mpn-line-lg{ font-size:12.5px; margin-top:10px; }
.mpn-line strong{ color:var(--ink); font-weight:600; }

/* Credential lines placed on dark hero backgrounds.
   Explicit colors prevent the light-section --ink/--muted palette from
   making Marketplace and partner text disappear against navy. */
.mpn-line--dark{ color:#c7d2ee; }
.mpn-line--dark strong{ color:#f7f9ff; }
.mpn-line--dark a,
.mpn-line--dark a strong{ color:#9fb0ff; text-decoration:none; }
.mpn-line--dark a:hover,
.mpn-line--dark a:hover strong{ color:#c7d2ff; text-decoration:underline; }

/* Footer legal links: spaced, not run together. */
.ft-legal{ display:flex; flex-wrap:wrap; gap:6px 18px; }
.ft-legal a{ text-decoration:none; border-bottom:1px solid transparent; }
.ft-legal a:hover{ border-bottom-color:var(--accent); }

/* ==========================================================================
   Button safety net.
   WHY: `.btn` is used on 48 pages but had no rule of its own — all styling
   lived in modifiers. Two modifiers (.btn-ghost, .btn-outline-light) set a
   white text colour with a transparent background, so on a light section they
   rendered white-on-cream and were invisible. These rules give every button a
   guaranteed floor, and make the light-section variants self-defending.
   ========================================================================== */
.btn{
  display:inline-block;
  font-family:var(--sans);
  font-size:14px;
  line-height:1.2;
  padding:13px 22px;
  text-decoration:none;
  cursor:pointer;
  transition:.2s;
}

/* A ghost button on a light background must never be white-on-white. */
.section-light .btn-ghost,
.services-detail .btn-ghost,
.packages-section .btn-ghost,
[class*="light"] .btn-ghost{
  color:var(--ink)!important;
  border-color:rgba(17,24,39,.28)!important;
}
.section-light .btn-ghost:hover,
.services-detail .btn-ghost:hover,
.packages-section .btn-ghost:hover,
[class*="light"] .btn-ghost:hover{
  background:rgba(17,24,39,.06)!important;
  border-color:var(--accent)!important;
}

/* Buttons must always declare both halves of the pair. */
.btn-primary,.btn-accent,.btn-studio,.nav-cta{ color:#fff!important; }
.btn-ghost-dark{ color:var(--ink)!important; border-color:rgba(17,24,39,.35)!important; }
.btn-ghost-dark:hover{ background:var(--ink)!important; color:#fff!important; }

/* ==========================================================================
   Readability pass (measured, not guessed).
   Rendered all 55 pages in a headless browser and computed the contrast of
   every text element against its real background. The brand indigo #536fff
   is 4.13:1 on white — under the 4.5:1 AA threshold for normal text — and it
   is used for headings, section labels, links and numbering on light
   sections across the site. These rules keep #536fff for FILLS (buttons,
   logo marks, accents) and use a darker indigo for TEXT on light
   backgrounds, where it measures 5.4-6.0:1.
   ========================================================================== */
:root{
  --accent-text:#4453dd;     /* 5.95:1 on white, 5.56:1 on #f6f7fa */
  --accent-fill:#4a5ae8;     /* white text on this = 5.4:1 */
  --muted-strong:#6b7a90;    /* 4.36:1 on white (was #8190a4 at 3.25) */
}

/* Accent-coloured TEXT on light surfaces */
.section-label,.service-detail-num,.uc-go,.credential,
.package-price,.package-price-note,.insight-tag,.article-tag,
.function-card-eyebrow,.tier-name,.sidebar-cta-label,
h2 em,h1 em,h3 em,
.content-body a,.article-body a,.legal-body a,
main a:not(.btn):not(.nav-link):not([class*="footer"]){
  color:var(--accent-text)!important;
}

/* Small print that was too pale to read */
.package-price-note,.ideal-for,.insight-meta,.article-meta,.mpn-line{
  color:var(--muted-strong)!important;
}

/* White text on an accent fill needs the darker fill to clear AA */
.btn-primary,.btn-accent,.btn-studio,.nav-cta,.logo-mark,.tram-footer-mark,
.hero-studio-pill .hsp-tag,.tier-cta{
  background:var(--accent-fill)!important;
  color:#fff!important;
}
.nav-cta{ color:#fff!important; }

/* Accent text on DARK surfaces: lighten instead of darken */
.hero .section-label,.page-hero .section-label,.cta-section .section-label,
.article-cta .section-label,[class*="dark"] .section-label,
.uc-n,.stc-who,.stc-cite,.tc-stat{
  color:#96a4ff!important;      /* 6.9:1 on #0c1f3f */
}

/* Any heading or link rendering accent-on-light. The bare-element selectors
   are needed because much of the article markup carries no class. */
h4,.content-body h4,.article-body h4,.sidebar-related h4,.uc-links a{
  color:var(--accent-text)!important;
}
/* ...but not inside dark panels, where it must go lighter instead. */
.cta-section h4,.article-cta h4,.hero h4,.page-hero h4,.dark-panel h4,
.tram-uniform-footer h4,footer h4,[class*="dark"] h4{
  color:#96a4ff!important;
}

/* Nav CTA label was #e0e6ef on indigo (3.65:1) */
.nav-cta,.nav-cta *{ color:#fff!important; }

/* Article back-links were rgba(255,255,255,.45) on #222b5f (3.92:1) */
.article-back,.article-meta span,.article-author{ color:rgba(255,255,255,.82)!important; }

/* ==========================================================================
   Surface-aware text colours (measured, 2026-08-12).
   Every page was rendered in a headless browser and each text element's
   colour compared with the background actually behind it — including
   absolutely-positioned backdrop layers, which is why these cases survived
   earlier passes. Each selector below rendered under 3:1 and is corrected
   toward the surface it actually sits on.
   ========================================================================== */

/* On DARK surfaces — text was near-black on near-black */
.article-callout .btn,
.article-cta .btn,
.article-hero .article-tag,
.cmp-col .cmp-li,
.contact-availability p,
.cta-band h2,
.cta-band p,
.dcard h3,
.dcard p,
.fcell h3,
.fcell p,
.founder-header .founder-initials,
.founder-header .founder-title,
.hero .eyebrow,
.hh .g,
.insight-img .insight-img-label,
.package-outcome p,
.philosophy-inner .btn,
.philosophy-inner .section-sub,
.stat .sl,
.stat .sv,
.studio-cta .studio-cta-note,
.vactions .btn{
  color:#f7f9fc!important;
}
.article-callout .btn,
.article-cta .btn,
.philosophy-inner .btn,
.vactions .btn{
  border-color:rgba(255,255,255,.38)!important;
}

/* On LIGHT surfaces — text was near-white on near-white */
.agent-api .btn,
.cta-text h2,
.diff-list li,
.diff-text .section-sub,
.diff-text .section-title,
.sidebar-author .sidebar-author-avatar,
.step .ic,
.studio-cta-actions .btn,
.vc-items span,
.venn-circle .vc-label{
  color:#111827!important;
}
.agent-api .btn,
.studio-cta-actions .btn{
  border-color:rgba(17,24,39,.32)!important;
}

/* --------------------------------------------------------------------------
   Surface-independent fixes.
   These five appear on a light surface on one page and a dark one on another,
   so no single text colour works. Giving them their own background removes
   the dependency instead of guessing which page wins.
   -------------------------------------------------------------------------- */
.article-callout .btn,
.studio-cta-actions .btn{
  background:#4a5ae8!important;
  color:#fff!important;
  border-color:#4a5ae8!important;
}
.article-callout .btn:hover,
.studio-cta-actions .btn:hover{ background:#3f4ed6!important; }

.sidebar-author .sidebar-author-avatar{
  background:#4a5ae8!important;
  color:#fff!important;
}

/* consultation.html difference panel sits on a light surface */
.diff-text .section-title{ color:#111827!important; }
.diff-text .section-sub{ color:#536074!important; }

/* hero em safety: the accent-on-light rule above must not apply inside dark heroes */
.vhero h1 em,.hero h1 em,.hero h2 em,.cta-section h2 em,
.article-hero h1 em,.studio-hero h1 em,
.cta-inner em{ color:#96a4ff!important; }
/* consultation.html hero-title renders on a DARK hero (confirmed by pixels) */
h1.hero-title em,.hero-title em{ color:#96a4ff!important; }
/* platform.html's .cta-text renders on white, not on the dark band */
.cta-text h2 em,.cta-text em{ color:#4453dd!important; }

/* .page-hero renders on a light surface on every page that has one (measured) */
.page-hero em,.page-hero h1 em{ color:#4453dd!important; }


/* ========================================================================
   consultation.html — dark "Our Difference" panel contrast repair
   2026-08-25
   The section uses a dark navy/indigo gradient. Earlier generic audit rules
   incorrectly treated it as a light surface and forced dark text onto it.
   Scope the correction to consultation.html so other pages remain unchanged.
   ======================================================================== */
.consultation-page .diff-section .section-label.light{
  color:#8fa4ff!important;
}
.consultation-page .diff-section .section-label.light::before{
  background:#607cff!important;
}
.consultation-page .diff-section .section-title.light,
.consultation-page .diff-section .diff-text .section-title,
.consultation-page .diff-section h2{
  color:#f7f9ff!important;
}
.consultation-page .diff-section .section-sub.light,
.consultation-page .diff-section .diff-text .section-sub,
.consultation-page .diff-section .diff-text > p{
  color:#c7d2e5!important;
}
.consultation-page .diff-section .diff-list li{
  color:#e1e8f4!important;
}
.consultation-page .diff-section .diff-list .check{
  color:#6f8cff!important;
}
.consultation-page .diff-section .btn-ghost-dark{
  color:#f7f9ff!important;
  border-color:rgba(200,214,238,.55)!important;
  background:rgba(255,255,255,.03)!important;
}
.consultation-page .diff-section .btn-ghost-dark:hover{
  color:#fff!important;
  border-color:#8fa4ff!important;
  background:rgba(111,140,255,.14)!important;
}
.consultation-page .diff-section .venn-circle .vc-label{
  color:#f8faff!important;
}
.consultation-page .diff-section .vc-items span{
  color:#c9d4e6!important;
}
.consultation-page .diff-section .venn-overlap{
  background:#101b3a!important;
  border-color:#7f73ff!important;
  box-shadow:0 10px 30px rgba(0,0,0,.22)!important;
}
.consultation-page .diff-section .venn-overlap span{
  color:#c0baff!important;
}