/* ============================================================
   BECCA CLOUD — SHARED STYLESHEET
   Used by every page in the site. Component names are consistent
   across pages so markup can be copied between them safely.
============================================================ */

:root{
  --ink: #f5f8fc;
  --ink-soft: #ffffff;
  --panel: #ffffff;
  --panel-2: #eef5fb;
  --line: rgba(16,42,67,0.12);
  --line-strong: rgba(16,42,67,0.25);
  --paper: #102a43;
  --paper-dim: #62748a;
  --paper-faint: #8294a8;
  --brass: #0b74de;
  --brass-bright: #2689ed;
  --brass-dim: #0759a9;
  --teal: #2f9e7b;
  --teal-dim: #23765e;
  --brick: #b45b56;
  --brick-dim: #7f3c39;

  --font-display: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'Cascadia Mono', 'Consolas', 'Liberation Mono', monospace;

  --maxw: 1180px;
  --radius-sm: 3px;
  --radius-md: 6px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* Light BECCA portal presentation override */
body{background:#f5f8fc;color:#102a43;}
.nav,.gov-strip,.hero-panel,.sec-card,.pkg-card,.journey-panel,.form-card,.footer{background:#fff!important;color:#102a43;border-color:#d9e5f0!important;}
.nav-links a,.hero-sub,p,.sec-card p,.footer,.footer a{color:#62748a;}
h1,h2,h3,h4,.brand,.hero-panel h3,.sec-card h3{color:#102a43;}
.btn-primary{background:#0b74de;color:#fff;border-color:#0b74de;}
.btn-ghost{color:#102a43;border-color:#b8c8d8;}
.badge--gated{color:#0759a9;border-color:#8bbce8;background:#eef6ff;}
.cloud-bg{opacity:.32;}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}

/* The dark tone is used strictly as a background wash here — a fallback
   behind the cloud layer, never painted over content as a solid block. */
body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  position:relative;
}

img,svg{display:block; max-width:100%;}
a{color:inherit;}
button{font-family:inherit;}

.container{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 28px;
}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  color:var(--paper);
  margin:0;
  letter-spacing:0.002em;
}

p{color:var(--paper-dim); margin:0;}

::selection{background:var(--brass-dim); color:var(--ink);}

:focus-visible{
  outline:2px solid var(--teal);
  outline-offset:3px;
  border-radius:2px;
}

.skip-link{
  position:absolute; left:12px; top:-48px;
  background:var(--brass); color:#20160A;
  padding:10px 16px; border-radius:3px;
  font-size:13.5px; font-weight:600; text-decoration:none;
  z-index:200; transition:top .18s var(--ease);
}
.skip-link:focus{top:12px;}

/* ============================================================
   ICONOGRAPHY
============================================================ */
.icon{ width:22px; height:22px; flex-shrink:0; color:var(--paper-dim); }
.icon-brass{color:var(--brass);}
.icon-teal{color:var(--teal);}
.icon-paper{color:var(--paper);}
.icon-faint{color:var(--paper-faint);}

/* ============================================================
   FLOW LINES — the shared "data in motion" language used across
   diagrams, the BCC meter and the security chain
============================================================ */
.flow-line{ fill:none; stroke-width:1.4; stroke-dasharray:5 6; animation:flow-dash 2.6s linear infinite; }
.flow-line--slow{animation-duration:4.4s;}
@keyframes flow-dash{ to{ stroke-dashoffset:-44; } }
.flow-pulse{ animation:flow-pulse-op 2.6s ease-in-out infinite; }
@keyframes flow-pulse-op{ 0%,100%{opacity:.35;} 50%{opacity:1;} }
@media (prefers-reduced-motion: reduce){
  .flow-line{ animation:none; }
  .flow-pulse{ animation:none; opacity:.8; }
}

/* ============================================================
   BADGES — status legend used consistently across the site
============================================================ */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-body); font-size:12.5px; font-weight:600;
  padding:4px 9px 4px 7px; border-radius:20px; line-height:1.4; white-space:nowrap;
}
.badge svg{width:12px; height:12px; flex-shrink:0;}
.badge--sim{ color:var(--paper-dim); border:1px dashed var(--line-strong); background:transparent; }
.badge--gated{ color:var(--brass-bright); border:1px solid rgba(201,161,90,0.45); background:rgba(201,161,90,0.08); }
.badge--approval{ color:var(--teal); border:1px solid rgba(76,174,156,0.45); background:rgba(76,174,156,0.08); }
.badge--off{ color:#C98D84; border:1px solid rgba(165,84,74,0.5); background:rgba(165,84,74,0.1); }
.badge--live{ color:#8FD4A6; border:1px solid rgba(93,196,131,0.5); background:rgba(93,196,131,0.1); }

/* ============================================================
   NAV
============================================================ */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,0.92);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 28px; max-width:var(--maxw); margin:0 auto;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-display); font-size:19px; font-weight:600; color:var(--paper);
  text-decoration:none;
}
.brand-mark{ width:26px; height:26px; flex-shrink:0; }
.nav-links{ display:flex; align-items:center; gap:24px; list-style:none; margin:0; padding:0; }
.nav-links a{ text-decoration:none; color:var(--paper-dim); font-size:14px; transition:color .18s var(--ease); }
.nav-links a:hover, .nav-links a[aria-current="page"]{color:var(--paper);}
.nav-links a[aria-current="page"]{ position:relative; }
.nav-links a[aria-current="page"]::after{
  content:""; position:absolute; left:0; right:0; bottom:-19px; height:2px; background:var(--brass);
}
.nav-actions{display:flex; align-items:center; gap:12px;}
.nav-toggle{
  display:none; background:none; border:1px solid var(--line-strong);
  border-radius:var(--radius-sm); width:38px; height:34px; color:var(--paper); cursor:pointer;
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 18px; border-radius:3px; font-size:14.5px; font-weight:600;
  text-decoration:none; cursor:pointer; border:1px solid transparent;
  transition:transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
  white-space:nowrap;
}
.btn:active{transform:translateY(1px);}
.btn-primary{ background:var(--brass); color:#20160A; border-color:var(--brass); }
.btn-primary:hover{background:var(--brass-bright); border-color:var(--brass-bright);}
.btn-ghost{ background:transparent; color:var(--paper); border-color:var(--line-strong); }
.btn-ghost:hover{border-color:var(--paper-dim); background:rgba(255,255,255,0.03);}
.btn-sm{padding:7px 13px; font-size:13px;}
.btn-block{width:100%;}

/* ============================================================
   GOVERNANCE STRIP
============================================================ */
.gov-strip{ background:var(--panel); border-bottom:1px solid var(--line); }
.gov-strip-row{
  max-width:var(--maxw); margin:0 auto; padding:9px 28px;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  font-size:13px; color:var(--paper-faint);
}
.gov-strip strong{color:var(--paper-dim); font-weight:600;}

/* ============================================================
   PAGE HEADER — used on every interior page below the nav
============================================================ */
.page-head{ padding:64px 0 48px; border-bottom:1px solid var(--line); position:relative; }
.page-kicker{
  font-family:var(--font-display); font-style:italic; font-size:16px; color:var(--brass-bright);
}
.page-head h1{ font-size:clamp(2rem, 3.6vw, 2.9rem); line-height:1.14; max-width:20ch; margin-top:12px; }
.page-head-sub{ margin-top:18px; font-size:16.5px; line-height:1.65; max-width:62ch; color:var(--paper-dim); }
.page-head-badges{ display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }

/* ============================================================
   HERO (home page)
============================================================ */
.hero{ padding:80px 0 76px; position:relative; overflow:hidden; border-bottom:1px solid var(--line); }
.hero-inner{ position:relative; display:grid; grid-template-columns:1.15fr 0.85fr; gap:56px; align-items:end; }
.hero-tag{
  font-family:var(--font-body); font-size:13.5px; color:var(--brass-bright); font-weight:600;
  letter-spacing:0.01em; margin-bottom:22px; display:flex; align-items:center; gap:10px;
  opacity:0; transform:translateY(10px); animation:rise .7s var(--ease) forwards;
}
.hero-tag::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--brass); box-shadow:0 0 0 4px rgba(201,161,90,0.18); }
.hero h1{ font-size:clamp(2.3rem, 4.4vw, 3.6rem); line-height:1.08; max-width:15ch; opacity:0; transform:translateY(14px); animation:rise .8s .08s var(--ease) forwards; }
.hero-sub{ margin-top:24px; font-size:17.5px; line-height:1.65; max-width:52ch; color:var(--paper-dim); opacity:0; transform:translateY(14px); animation:rise .8s .18s var(--ease) forwards; }
.hero-ctas{ margin-top:34px; display:flex; gap:14px; flex-wrap:wrap; opacity:0; transform:translateY(14px); animation:rise .8s .26s var(--ease) forwards; }
@keyframes rise{ to{ opacity:1; transform:translateY(0);} }

.hero-panel{
  background:linear-gradient(180deg, var(--panel), var(--panel-2));
  border:1px solid var(--line-strong); border-radius:var(--radius-md);
  padding:26px 26px 8px; opacity:0; transform:translateY(16px); animation:rise .8s .3s var(--ease) forwards;
}
.hero-panel-label{ font-family:var(--font-display); font-style:italic; font-size:15px; color:var(--paper-dim); margin-bottom:18px; }
.stat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0; }
.stat{ padding:0 0 18px; border-top:1px solid var(--line); padding-top:16px; }
.stat:nth-child(1), .stat:nth-child(2){border-top:none; padding-top:0;}
.stat:nth-child(odd){padding-right:18px;}
.stat-num{ font-family:var(--font-mono); font-size:24px; color:var(--brass-bright); font-weight:600; }
.stat-label{ font-size:12.5px; color:var(--paper-faint); margin-top:4px; }

.diagram-svg{width:100%; height:auto; display:block; margin-bottom:6px;}
.diagram-svg .node-box{ fill:var(--ink-soft); stroke:var(--line-strong); stroke-width:1.2; }
.diagram-svg .node-box--control{ fill:rgba(201,161,90,0.07); stroke:rgba(201,161,90,0.55); stroke-dasharray:3 3; }
.diagram-svg text{ font-family:var(--font-body); fill:var(--paper-dim); }
.diagram-svg .lbl-strong{fill:var(--paper); font-weight:600;}
.diagram-svg .lbl-tiny{font-size:8.5px; fill:var(--paper-faint);}
.diagram-svg .lbl-sm{font-size:9.5px;}
.diagram-svg .flow-line{stroke:var(--brass);}
.diagram-svg .flow-line--teal{stroke:var(--teal);}

/* ============================================================
   SECTION SCAFFOLD
============================================================ */
.section{ padding:88px 0; border-bottom:1px solid var(--line); position:relative; }
.section-alt{background:var(--ink-soft);}
.cloud-section{
  overflow:hidden;
  isolation:isolate;
}
.cloud-section::before,
.cloud-section::after{
  content:"";
  position:absolute;
  left:-12%;
  right:-12%;
  top:34%;
  height:300px;
  pointer-events:none;
  z-index:0;
  opacity:.72;
  background:
    radial-gradient(ellipse at 5% 57%, rgba(156,166,178,.70) 0 64px, transparent 65px),
    radial-gradient(ellipse at 10% 51%, rgba(156,166,178,.58) 0 92px, transparent 93px),
    radial-gradient(ellipse at 16% 59%, rgba(156,166,178,.64) 0 70px, transparent 71px),
    radial-gradient(ellipse at 32% 56%, rgba(156,166,178,.56) 0 88px, transparent 89px),
    radial-gradient(ellipse at 40% 50%, rgba(156,166,178,.48) 0 116px, transparent 117px),
    radial-gradient(ellipse at 56% 58%, rgba(156,166,178,.60) 0 76px, transparent 77px),
    radial-gradient(ellipse at 72% 54%, rgba(156,166,178,.54) 0 96px, transparent 97px),
    radial-gradient(ellipse at 88% 59%, rgba(156,166,178,.62) 0 74px, transparent 75px),
    linear-gradient(180deg, transparent 0 52%, rgba(156,166,178,.22) 53% 72%, transparent 73%);
  filter:blur(1.5px);
  animation:site-cloud-drift 80s linear infinite;
}
.cloud-section::after{
  top:55%;
  height:230px;
  opacity:.46;
  transform:translateX(-16%);
  animation-duration:120s;
}
@keyframes site-cloud-drift{
  from{transform:translateX(0)}
  to{transform:translateX(-45%)}
}
.cloud-section-gray{
  background:
    linear-gradient(180deg, rgba(247,249,252,.94), rgba(232,237,244,.92)),
    #e8edf4;
}
.cloud-section>.container{
  position:relative;
  z-index:1;
}
.cloud-bg-section{position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,#f7f9fc 0%,#e6ebf2 100%);opacity:.78}
.cloud-bg-section .cloud-layer{top:50%;height:180px;align-items:flex-end;padding-bottom:18px}
.cloud-bg-section .cloud-layer.back{opacity:.24}
.cloud-bg-section .cloud-layer.mid{opacity:.34}
.cloud-bg-section .cloud-layer.front{opacity:.44}
.cloud-section::before,.cloud-section::after{display:none}
.cloud-panel-frame{
  position:relative;
  max-width:640px;
  margin:0 auto;
  border-radius:18px;
  overflow:hidden;
  background:linear-gradient(180deg,#e7f3ff,#f8fbff);
  box-shadow:0 24px 55px rgba(20,52,84,.10);
}
.cloud-panel-frame iframe{
  display:block;
  width:100%;
  height:540px;
  border:0;
  background:transparent;
}
.section-head{ display:grid; grid-template-columns:0.42fr 0.58fr; gap:48px; margin-bottom:52px; align-items:start; }
.section-kicker{ font-family:var(--font-display); font-style:italic; font-size:16px; color:var(--brass-bright); }
.section-head h2{ font-size:clamp(1.7rem, 2.6vw, 2.3rem); line-height:1.16; margin-top:10px; }
.section-head-copy p{max-width:58ch; font-size:16px;}
.section-head-copy p + p{margin-top:14px;}

/* ============================================================
   FEATURE / LINK CARDS (home page overview grid)
============================================================ */
.link-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; }
.link-card{
  background:var(--panel); border:1px solid var(--line-strong); border-radius:var(--radius-md);
  padding:26px; text-decoration:none; display:flex; flex-direction:column; gap:12px;
  transition:border-color .18s var(--ease), transform .18s var(--ease);
}
.link-card:hover{ border-color:var(--paper-dim); transform:translateY(-2px); }
.link-card .sec-icon-ring{margin-bottom:2px;}
.link-card h3{font-size:16.5px;}
.link-card p{font-size:14px; line-height:1.6;}
.link-card-go{ margin-top:auto; font-size:13px; color:var(--brass-bright); font-weight:600; }

/* ============================================================
   HOW IT WORKS / narrative block (platform page)
============================================================ */
.how-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
.how-copy p{font-size:16px; max-width:52ch;}
.how-copy p + p{margin-top:16px;}
.how-list{ list-style:none; margin:26px 0 0; padding:0; display:flex; flex-direction:column; gap:14px; }
.how-list li{ display:flex; gap:12px; font-size:15px; color:var(--paper-dim); padding-bottom:14px; border-bottom:1px solid var(--line); }
.how-list li:last-child{border-bottom:none;}
.how-list b{color:var(--paper); font-weight:600;}
.how-mark{ color:var(--brass); font-family:var(--font-mono); font-size:14px; flex-shrink:0; padding-top:1px; }

.device-card{ background:var(--panel); border:1px solid var(--line-strong); border-radius:var(--radius-md); padding:28px; }
.device-row{ display:flex; justify-content:space-between; align-items:center; padding:13px 0; border-top:1px solid var(--line); font-size:14.5px; }
.device-row:first-child{border-top:none;}
.device-row span:first-child{color:var(--paper-faint);}
.device-row span:last-child{color:var(--paper); font-family:var(--font-mono); font-size:13.5px;}

/* ---- workstation / edge node relationship diagram ---- */
.rel-diagram-wrap{
  margin-top:40px; border:1px solid var(--line-strong); border-radius:var(--radius-md);
  background:var(--panel); padding:8px 26px 4px;
}
.rel-diagram-wrap.cloud-panel-frame{
  border:0;
  padding:0;
  background:linear-gradient(180deg,#e7f3ff,#f8fbff);
  overflow:hidden;
}
.rel-diagram-wrap.cloud-panel-frame iframe{
  display:block;
  width:100%;
  height:540px;
  border:0;
  background:transparent;
}

/* Clean outer cloud band; the embedded Cloud Core panel keeps its own blue/white scene. */
.cloud-section::before,.cloud-section::after{left:0;right:0;top:46%;height:190px;opacity:.72;filter:none;background:
  linear-gradient(180deg,transparent 40%,rgba(164,173,184,.30) 41%,rgba(164,173,184,.30) 78%,transparent 79%),
  radial-gradient(ellipse 90px 52px at 4% 74%,rgba(164,173,184,.70) 0 68%,transparent 70%),
  radial-gradient(ellipse 58px 38px at 1% 60%,rgba(180,188,198,.62) 0 68%,transparent 70%),
  radial-gradient(ellipse 62px 42px at 8% 59%,rgba(180,188,198,.62) 0 68%,transparent 70%),
  radial-gradient(ellipse 96px 54px at 26% 71%,rgba(164,173,184,.64) 0 68%,transparent 70%),
  radial-gradient(ellipse 60px 40px at 22% 58%,rgba(180,188,198,.56) 0 68%,transparent 70%),
  radial-gradient(ellipse 62px 42px at 30% 58%,rgba(180,188,198,.56) 0 68%,transparent 70%),
  radial-gradient(ellipse 100px 56px at 51% 73%,rgba(164,173,184,.66) 0 68%,transparent 70%),
  radial-gradient(ellipse 62px 42px at 47% 59%,rgba(180,188,198,.58) 0 68%,transparent 70%),
  radial-gradient(ellipse 64px 42px at 55% 59%,rgba(180,188,198,.58) 0 68%,transparent 70%),
  radial-gradient(ellipse 92px 52px at 76% 72%,rgba(164,173,184,.64) 0 68%,transparent 70%),
  radial-gradient(ellipse 60px 40px at 72% 59%,rgba(180,188,198,.56) 0 68%,transparent 70%),
  radial-gradient(ellipse 64px 42px at 80% 59%,rgba(180,188,198,.56) 0 68%,transparent 70%),
  radial-gradient(ellipse 88px 50px at 98% 73%,rgba(164,173,184,.62) 0 68%,transparent 70%);
  animation:site-cloud-drift 95s linear infinite;
}
.cloud-section::after{top:55%;height:140px;opacity:.34;transform:translateX(-9%);animation-duration:130s}
.rel-diagram{width:100%; height:auto; display:block;}
.rel-diagram .node-box{ fill:var(--ink-soft); stroke:var(--line-strong); stroke-width:1.2; }
.rel-diagram .node-box--control{ fill:rgba(201,161,90,0.07); stroke:rgba(201,161,90,0.55); stroke-dasharray:3 3; }
.rel-diagram text{ font-family:var(--font-body); fill:var(--paper-dim); }
.rel-diagram .lbl-strong{fill:var(--paper); font-weight:600;}
.rel-diagram .lbl-tiny{font-size:9px; fill:var(--paper-faint);}

/* ============================================================
   WORKLOAD JOURNEY — plan / connect / approve / run / measure
============================================================ */
.journey-tabs{ display:flex; border:1px solid var(--line-strong); border-radius:var(--radius-md); overflow:hidden; margin-bottom:2px; }
.journey-tab{
  flex:1; display:flex; align-items:center; gap:10px; padding:16px 14px;
  background:var(--panel); border:none; border-right:1px solid var(--line);
  color:var(--paper-faint); cursor:pointer; text-align:left;
  transition:background .18s var(--ease), color .18s var(--ease);
}
.journey-tab:last-child{border-right:none;}
.journey-tab .icon{width:20px; height:20px; color:inherit; transition:color .18s var(--ease);}
.journey-tab-label{display:flex; flex-direction:column; gap:1px; font-size:13.5px; font-weight:600; line-height:1.3;}
.journey-tab-label em{ font-style:normal; font-family:var(--font-mono); font-size:10.5px; color:var(--paper-faint); font-weight:500; }
.journey-tab:hover{background:var(--panel-2); color:var(--paper-dim);}
.journey-tab.is-active{
  background:linear-gradient(180deg, rgba(201,161,90,0.1), transparent); color:var(--paper);
  box-shadow:inset 0 -2px 0 var(--brass);
}
.journey-tab.is-active .icon{color:var(--brass-bright);}

.journey-panel{
  border:1px solid var(--line-strong); border-top:none; border-radius:0 0 var(--radius-md) var(--radius-md);
  background:var(--panel); padding:32px; min-height:220px;
}
.journey-panel-item{display:none;}
.journey-panel-item.is-active{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
.journey-panel-copy h3{font-size:19px; margin-bottom:10px;}
.journey-panel-copy p{font-size:14.5px; line-height:1.65; max-width:44ch;}
.journey-panel-copy .rail-badges{margin-top:14px; display:flex; flex-wrap:wrap; gap:6px;}

.journey-mini{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:10px;
  background:var(--ink-soft); border:1px solid var(--line); border-radius:var(--radius-sm); padding:26px 18px;
}
.mini-chip{ display:flex; flex-direction:column; align-items:center; gap:8px; width:84px; }
.mini-chip-ring{ width:48px; height:48px; border-radius:50%; border:1px solid var(--line-strong); background:var(--panel); display:flex; align-items:center; justify-content:center; }
.mini-chip .icon{width:22px; height:22px;}
.mini-chip span{font-size:11px; color:var(--paper-faint); text-align:center; line-height:1.3;}
.mini-arrow{ position:relative; width:30px; height:1px; background-image:repeating-linear-gradient(90deg, var(--line-strong) 0 4px, transparent 4px 8px); flex-shrink:0; }
.mini-arrow::after{ content:""; position:absolute; top:-2.5px; left:-2px; width:5px; height:5px; border-radius:50%; background:var(--brass); animation:mini-flow 1.8s linear infinite; }
@keyframes mini-flow{ 0%{ left:-2px; opacity:0; } 12%{ opacity:1; } 88%{ opacity:1; } 100%{ left:28px; opacity:0; } }
@media (prefers-reduced-motion: reduce){ .mini-arrow::after{ animation:none; left:12px; opacity:.9; } }

/* ---- five-step rail summary (workflow page) ---- */
.rail{ position:relative; display:grid; grid-template-columns:repeat(5, 1fr); gap:20px; margin-top:48px; }
.rail::before{ content:""; position:absolute; top:23px; left:5%; right:5%; height:1px; background:var(--line-strong); }
.rail-step{ position:relative; display:flex; flex-direction:column; gap:14px; }
.rail-dot{
  width:46px; height:46px; border-radius:50%; background:var(--panel); border:1px solid var(--line-strong);
  display:flex; align-items:center; justify-content:center; z-index:1;
}
.rail-step h4{font-size:14.5px; color:var(--paper); margin-bottom:4px;}
.rail-step p{font-size:13px; line-height:1.55;}
.rail-badges{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px;}

/* ============================================================
   BCC — CREDIT MODEL
============================================================ */
.bcc-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
.bcc-copy p{font-size:16px; max-width:50ch;}
.bcc-copy p + p{margin-top:15px;}
.bcc-price{ margin-top:26px; display:flex; align-items:baseline; gap:10px; font-family:var(--font-mono); }
.bcc-price .n{font-size:30px; color:var(--brass-bright); font-weight:600;}
.bcc-price .u{font-size:14px; color:var(--paper-faint);}

.alloc-panel{ background:var(--panel); border:1px solid var(--line-strong); border-radius:var(--radius-md); padding:26px; }
.alloc-title{ font-size:13px; color:var(--paper-faint); display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; gap:10px; flex-wrap:wrap;}
.alloc-bar{ display:flex; height:14px; border-radius:3px; overflow:hidden; border:1px solid var(--line); margin-bottom:20px; }
.alloc-seg{height:100%;}
.alloc-legend{ display:grid; grid-template-columns:1fr 1fr; gap:12px 18px; }
.alloc-item{ display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--paper-dim); }
.alloc-dot{width:9px; height:9px; border-radius:2px; flex-shrink:0;}
.alloc-item b{color:var(--paper); font-family:var(--font-mono); font-weight:600; margin-left:auto;}

.bcc-meter-wrap{ margin-top:32px; background:var(--panel); border:1px solid var(--line-strong); border-radius:var(--radius-md); padding:26px 26px 18px; }
.bcc-meter{width:100%; height:auto; display:block;}
.bcc-meter .tank-shell{fill:var(--ink-soft); stroke:var(--line-strong); stroke-width:1.4;}
.bcc-meter .tank-fill{fill:var(--brass); opacity:.85;}
.bcc-meter .gauge-bg{stroke:var(--line-strong);}
.bcc-meter .gauge-fg{stroke:var(--brass);}
.bcc-meter .meter-ring{fill:var(--panel); stroke:var(--line-strong); stroke-width:1.2;}
.bcc-meter text{font-family:var(--font-body); fill:var(--paper-dim);}
.bcc-meter .lbl-strong{fill:var(--paper); font-weight:600;}
.bcc-meter .lbl-tiny{font-size:9px; fill:var(--paper-faint);}
.bcc-meter .lbl-num{font-family:var(--font-mono); fill:var(--brass-bright); font-weight:600;}

/* ============================================================
   ROI / usage flow
============================================================ */
.roi-grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; align-items:start; }
.roi-copy p{font-size:16px; max-width:52ch;}
.roi-copy p + p{margin-top:15px;}
.roi-formula{ margin-top:22px; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-sm); padding:16px 18px; font-family:var(--font-mono); font-size:13.5px; color:var(--paper-dim); line-height:1.8; }
.roi-panel{ background:var(--panel); border:1px solid var(--line-strong); border-radius:var(--radius-md); padding:26px; }
.roi-row{ display:flex; justify-content:space-between; padding:12px 0; border-top:1px solid var(--line); font-size:14.5px; }
.roi-row:first-child{border-top:none;}
.roi-row span:first-child{color:var(--paper-faint);}
.roi-row span:last-child{color:var(--paper); font-family:var(--font-mono);}
.roi-total{ margin-top:6px; padding-top:16px; border-top:1px solid var(--line-strong); display:flex; justify-content:space-between; align-items:baseline; }
.roi-total .n{font-family:var(--font-mono); font-size:22px; color:var(--brass-bright);}

/* ---- planning -> connect -> approve -> run -> measure flow strip ---- */
.usage-flow{ display:flex; align-items:stretch; justify-content:space-between; gap:0; margin-top:44px; flex-wrap:wrap; }
.usage-flow-step{ flex:1; min-width:150px; background:var(--panel); border:1px solid var(--line-strong); padding:20px 18px; position:relative; }
.usage-flow-step:not(:last-child){border-right:none;}
.usage-flow-step:first-child{border-radius:var(--radius-md) 0 0 var(--radius-md);}
.usage-flow-step:last-child{border-radius:0 var(--radius-md) var(--radius-md) 0;}
.usage-flow-step h4{font-size:13.5px; margin-bottom:6px;}
.usage-flow-step p{font-size:12px; line-height:1.5;}
.usage-flow-num{font-family:var(--font-mono); font-size:11px; color:var(--brass); margin-bottom:8px; display:block;}

/* ============================================================
   CATALOGUE / PACKAGES
============================================================ */
.cat-controls{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; margin-bottom:22px; }
.tier-tabs{ display:flex; gap:8px; flex-wrap:wrap; }
.tier-tab{
  background:transparent; border:1px solid var(--line-strong); color:var(--paper-dim);
  padding:8px 15px; border-radius:20px; font-size:13.5px; cursor:pointer; transition:all .18s var(--ease);
}
.tier-tab:hover{color:var(--paper); border-color:var(--paper-dim);}
.tier-tab.is-on{ background:var(--brass); border-color:var(--brass); color:#20160A; font-weight:600; }
.cat-meta{font-size:13px; color:var(--paper-faint);}

.cat-table-wrap{ border:1px solid var(--line-strong); border-radius:var(--radius-md); overflow:hidden; }
table.cat-table{ width:100%; border-collapse:collapse; font-size:14px; }
.cat-table thead th{
  text-align:left; font-family:var(--font-body); font-weight:600; font-size:12.5px; color:var(--paper-faint);
  background:var(--panel-2); padding:13px 16px; border-bottom:1px solid var(--line-strong); white-space:nowrap;
}
.cat-table tbody td{ padding:15px 16px; border-bottom:1px solid var(--line); color:var(--paper-dim); vertical-align:top; }
.cat-table tbody tr{background:var(--panel); transition:background .15s var(--ease);}
.cat-table tbody tr:hover{background:var(--panel-2);}
.cat-table tbody tr:last-child td{border-bottom:none;}
.pkg-name{color:var(--paper); font-weight:600; font-family:var(--font-body); font-size:14.5px;}
.pkg-tier{display:block; font-size:12px; color:var(--paper-faint); margin-top:2px; font-weight:400;}
.mono{font-family:var(--font-mono); color:var(--paper); font-size:13.5px;}
.cat-table .price-cell{color:var(--brass-bright); font-family:var(--font-mono); font-weight:600;}
.cat-table .tax-cell{font-size:12px; color:var(--paper-faint); max-width:190px;}
.row-hidden{display:none;}

.cat-foot{ margin-top:16px; font-size:12.5px; color:var(--paper-faint); display:flex; gap:8px; align-items:flex-start; }

.view-toggle{ display:inline-flex; border:1px solid var(--line-strong); border-radius:20px; overflow:hidden; }
.view-toggle button{ background:transparent; border:none; color:var(--paper-faint); padding:7px 14px; font-size:13px; cursor:pointer; transition:all .18s var(--ease); }
.view-toggle button.is-on{background:var(--panel-2); color:var(--paper);}
.view-hidden{display:none !important;}

.pkg-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; }
.pkg-card{
  background:var(--panel); border:1px solid var(--line-strong); border-radius:var(--radius-md);
  padding:20px; display:flex; flex-direction:column; gap:12px; transition:border-color .18s var(--ease);
}
.pkg-card:hover{border-color:var(--paper-dim);}
.pkg-card-top{display:flex; justify-content:space-between; align-items:flex-start; gap:8px;}
.pkg-card-name{font-size:15px; font-weight:600; color:var(--paper); line-height:1.3;}
.pkg-card-tier{font-size:11.5px; color:var(--paper-faint); margin-top:3px;}
.pkg-card-cap{font-size:12.5px; color:var(--paper-dim); line-height:1.5; min-height:38px;}
.pkg-card-figures{ display:flex; justify-content:space-between; align-items:baseline; padding-top:10px; border-top:1px solid var(--line); }
.pkg-card-price{font-family:var(--font-mono); color:var(--brass-bright); font-size:19px; font-weight:600;}
.pkg-card-period{font-size:11px; color:var(--paper-faint);}
.pkg-card-bcc{font-family:var(--font-mono); font-size:12.5px; color:var(--paper);}
.pkg-card-value{ font-size:11px; color:var(--teal); padding-top:8px; border-top:1px solid var(--line); }
.pkg-card-tax{font-size:10.5px; color:var(--paper-faint);}

/* ---- compare tray ---- */
.compare-tray{
  position:sticky; bottom:0; margin-top:26px; background:var(--panel-2);
  border:1px solid var(--line-strong); border-radius:var(--radius-md);
  padding:16px 20px; display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
}
.compare-tray.is-empty{display:none;}
.compare-chips{display:flex; gap:8px; flex-wrap:wrap;}
.compare-chip{
  display:flex; align-items:center; gap:8px; background:var(--panel); border:1px solid var(--line-strong);
  border-radius:20px; padding:6px 8px 6px 12px; font-size:12.5px; color:var(--paper);
}
.compare-chip button{ background:none; border:none; color:var(--paper-faint); cursor:pointer; font-size:14px; line-height:1; padding:2px; }
.pkg-card-pick{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--paper-faint); cursor:pointer; }
.pkg-card-pick input{accent-color:var(--brass);}

.compare-table-wrap{ margin-top:26px; border:1px solid var(--line-strong); border-radius:var(--radius-md); overflow-x:auto; }

/* ============================================================
   SECURITY
============================================================ */
.sec-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:1px; background:var(--line-strong); border:1px solid var(--line-strong); border-radius:var(--radius-md); overflow:hidden; }
.sec-card{ background:var(--panel); padding:28px 24px; }
.sec-icon-ring{ width:44px; height:44px; border-radius:50%; border:1px solid var(--line-strong); display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.sec-icon-ring .icon{width:22px; height:22px;}
.sec-card h3{font-size:16.5px; margin-bottom:10px; line-height:1.3;}
.sec-card p{font-size:14px; line-height:1.6;}
.sec-card .badge{margin-top:14px;}

.sec-diagram-wrap{ margin-bottom:32px; border:1px solid var(--line-strong); border-radius:var(--radius-md); background:var(--panel); padding:8px 26px 4px; }
.sec-diagram{width:100%; height:auto; display:block;}
.sec-diagram .chain-ring{fill:var(--ink-soft); stroke:var(--line-strong); stroke-width:1.3;}
.sec-diagram text{font-family:var(--font-body); fill:var(--paper-dim);}
.sec-diagram .lbl-strong{fill:var(--paper); font-weight:600;}
.sec-diagram .lbl-tiny{font-size:9px; fill:var(--paper-faint);}
.sec-diagram .chain-flow{stroke:var(--brass);}

/* ---- governance decision flow (approval chain) ---- */
.gov-flow{ display:flex; flex-wrap:wrap; gap:0; margin-top:20px; border:1px solid var(--line-strong); border-radius:var(--radius-md); overflow:hidden; }
.gov-flow-step{ flex:1; min-width:160px; background:var(--panel); padding:22px 20px; border-right:1px solid var(--line); }
.gov-flow-step:last-child{border-right:none;}
.gov-flow-step h4{font-size:14px; margin-bottom:8px;}
.gov-flow-step p{font-size:12.5px; line-height:1.55;}

/* ============================================================
   PORTAL
============================================================ */
.portal-band{
  background:linear-gradient(135deg, var(--panel-2), var(--panel)); border:1px solid var(--line-strong);
  border-radius:var(--radius-md); padding:44px; display:grid; grid-template-columns:1.3fr 0.7fr; gap:40px; align-items:center;
}
.portal-url{ font-family:var(--font-mono); font-size:15px; color:var(--teal); margin-top:12px; display:block; }
.portal-band h2{font-size:clamp(1.5rem,2.4vw,2rem);}
.portal-band p{margin-top:14px; max-width:48ch; font-size:15.5px;}
.portal-notes{ display:flex; flex-direction:column; gap:10px; }
.portal-note{ font-size:13px; color:var(--paper-faint); display:flex; gap:8px; padding:10px 0 0; }

.preview-frame{ margin-top:36px; border:1px solid var(--line-strong); border-radius:var(--radius-md); overflow:hidden; background:var(--panel); }
.preview-chrome{ display:flex; align-items:center; gap:12px; padding:12px 16px; background:var(--panel-2); border-bottom:1px solid var(--line-strong); }
.preview-dots{display:flex; gap:6px;}
.preview-dots span{width:9px; height:9px; border-radius:50%; background:var(--line-strong);}
.preview-url{ flex:1; display:flex; align-items:center; gap:8px; background:var(--ink-soft); border:1px solid var(--line); border-radius:20px; padding:5px 12px; font-family:var(--font-mono); font-size:12px; color:var(--paper-faint); }
.preview-url .icon{width:12px; height:12px; color:var(--brass-bright);}
.preview-flag{ font-size:11.5px; font-weight:600; color:var(--brass-bright); white-space:nowrap; }
.preview-body{padding:24px;}
.preview-note{ display:flex; gap:8px; align-items:flex-start; font-size:12.5px; color:var(--paper-faint); margin-bottom:20px; padding-bottom:18px; border-bottom:1px solid var(--line); }
.dash-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; }
.dash-budget-bar{ position:relative; height:8px; border-radius:4px; background:var(--panel-2); border:1px solid var(--line); margin:10px 0 8px; overflow:visible; }
.dash-budget-fill{ height:100%; border-radius:4px; background:linear-gradient(90deg, var(--teal), var(--brass)); }
.dash-budget-mark{ position:absolute; top:-3px; width:1px; height:14px; background:var(--paper-faint); }
.dash-card{ background:var(--ink-soft); border:1px solid var(--line); border-radius:var(--radius-sm); padding:18px; }
.dash-card h4{ font-size:12px; color:var(--paper-faint); font-weight:600; margin-bottom:14px; display:flex; justify-content:space-between; align-items:center; }
.dash-node-row{ display:flex; align-items:center; justify-content:space-between; padding:7px 0; font-size:13px; color:var(--paper-dim); border-top:1px solid var(--line); }
.dash-node-row:first-of-type{border-top:none;}
.dash-dot{width:7px; height:7px; border-radius:50%; flex-shrink:0; margin-right:8px;}
.dash-dot--on{background:var(--teal);}
.dash-dot--off{background:var(--paper-faint);}
.dash-node-name{display:flex; align-items:center; font-family:var(--font-mono); font-size:12px;}
.dash-usage-num{ font-family:var(--font-mono); font-size:26px; color:var(--brass-bright); font-weight:600; }
.dash-usage-sub{font-size:12px; color:var(--paper-faint); margin-top:2px;}
.dash-spark{width:100%; height:44px; display:block; margin-top:10px;}
.dash-approval-row{ display:flex; justify-content:space-between; align-items:center; padding:6px 0; font-size:12.5px; color:var(--paper-dim); border-top:1px solid var(--line); }
.dash-approval-row:first-of-type{border-top:none;}

/* ============================================================
   FORM
============================================================ */
.form-wrap{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:56px; align-items:start; }
.form-card{ background:var(--panel); border:1px solid var(--line-strong); border-radius:var(--radius-md); padding:32px; }
.field{margin-bottom:18px;}
.field label{ display:block; font-size:13px; color:var(--paper-dim); margin-bottom:7px; font-weight:600; }
.field input, .field select, .field textarea{
  width:100%; background:var(--ink-soft); border:1px solid var(--line-strong); border-radius:3px;
  color:var(--paper); padding:11px 12px; font-size:14.5px; font-family:inherit; transition:border-color .16s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--teal); }
.field textarea{resize:vertical; min-height:90px;}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.form-note{ margin-top:16px; font-size:12.5px; color:var(--paper-faint); display:flex; gap:8px; }
.form-success{
  display:none; border:1px solid rgba(76,174,156,0.4); background:rgba(76,174,156,0.08);
  border-radius:var(--radius-sm); padding:16px 18px; margin-top:18px; font-size:14px; color:var(--paper);
}
.form-success.is-shown{display:block;}
.form-success b{color:var(--teal);}
.checkbox-row{ display:flex; align-items:flex-start; gap:10px; font-size:13px; color:var(--paper-dim); margin-bottom:18px; }
.checkbox-row input{margin-top:3px; accent-color:var(--brass);}

/* ============================================================
   SUPPORT / DOCS
============================================================ */
.docs-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; }
.docs-card{ background:var(--panel); border:1px solid var(--line-strong); border-radius:var(--radius-md); padding:26px; }
.docs-card h3{font-size:15.5px; margin-bottom:8px;}
.docs-card p{font-size:13.5px; line-height:1.6;}
.docs-card ul{ list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:9px; }
.docs-card a{ font-size:13.5px; color:var(--paper-dim); text-decoration:none; display:flex; gap:8px; align-items:center; }
.docs-card a:hover{color:var(--paper);}

.faq-item{ border-bottom:1px solid var(--line); }
.faq-item:last-child{border-bottom:none;}
.faq-q{
  width:100%; text-align:left; background:none; border:none; color:var(--paper); cursor:pointer;
  padding:20px 0; font-size:15.5px; font-family:var(--font-display); font-weight:600;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
}
.faq-q .icon{ width:18px; height:18px; transition:transform .2s var(--ease); flex-shrink:0; }
.faq-item.is-open .faq-q .icon{transform:rotate(45deg);}
.faq-a{ max-height:0; overflow:hidden; transition:max-height .25s var(--ease); }
.faq-item.is-open .faq-a{max-height:280px;}
.faq-a p{ padding:0 0 20px; font-size:14.5px; max-width:64ch; }

.contact-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; margin-top:16px; }
.contact-card{ background:var(--panel); border:1px solid var(--line-strong); border-radius:var(--radius-md); padding:22px; }
.contact-card h4{font-size:14px; margin-bottom:6px;}
.contact-card p{font-size:13px; line-height:1.55;}
.contact-card .mono{display:block; margin-top:10px; font-size:13px;}

/* ============================================================
   FOOTER
============================================================ */
.footer{ padding:56px 0 40px; position:relative; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:40px; border-bottom:1px solid var(--line); }
.footer-brand p{margin-top:14px; font-size:14px; max-width:36ch;}
.footer-col h4{font-size:13.5px; color:var(--paper); margin-bottom:14px;}
.footer-col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;}
.footer-col a{font-size:13.5px; color:var(--paper-dim); text-decoration:none;}
.footer-col a:hover{color:var(--paper);}
.footer-legend{ display:flex; flex-wrap:wrap; gap:10px; padding:24px 0; border-bottom:1px solid var(--line); }
.footer-bottom{ padding-top:22px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:12.5px; color:var(--paper-faint); }

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 980px){
  .hero-inner{grid-template-columns:1fr; gap:40px;}
  .section-head{grid-template-columns:1fr; gap:20px;}
  .how-grid, .bcc-wrap, .roi-grid, .form-wrap{grid-template-columns:1fr; gap:36px;}
  .sec-grid{grid-template-columns:1fr 1fr;}
  .rail{grid-template-columns:1fr 1fr; row-gap:36px;}
  .rail::before{display:none;}
  .footer-grid{grid-template-columns:1fr 1fr; row-gap:32px;}
  .portal-band{grid-template-columns:1fr;}
  .pkg-grid, .link-grid, .docs-grid, .contact-grid{grid-template-columns:repeat(2, 1fr);}
  .dash-grid{grid-template-columns:repeat(2, 1fr);}
  .journey-panel-item.is-active{grid-template-columns:1fr; gap:28px;}
  .journey-mini{padding:22px 14px;}
  .usage-flow{flex-direction:column;}
  .usage-flow-step{border-right:1px solid var(--line-strong) !important; border-radius:0 !important;}
  .usage-flow-step:first-child{border-radius:var(--radius-md) var(--radius-md) 0 0 !important;}
  .usage-flow-step:last-child{border-radius:0 0 var(--radius-md) var(--radius-md) !important;}
}
@media (max-width: 720px){
  .nav-links{
    position:fixed; top:65px; left:0; right:0; bottom:0; background:var(--ink);
    flex-direction:column; align-items:flex-start; padding:28px; gap:22px;
    transform:translateX(100%); transition:transform .28s var(--ease); overflow-y:auto;
  }
  .nav-links.is-open{transform:translateX(0);}
  .nav-links a{font-size:17px;}
  .nav-links a[aria-current="page"]::after{display:none;}
  .nav-toggle{display:block;}
  .nav-actions .btn-ghost{display:none;}
  .hero{padding:56px 0 48px;}
  .page-head{padding:44px 0 36px;}
  .section{padding:60px 0;}
  .stat-grid{grid-template-columns:1fr 1fr;}
  .sec-grid{grid-template-columns:1fr;}
  .rail{grid-template-columns:1fr;}
  .field-row{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .cat-table-wrap{overflow-x:auto;}
  table.cat-table{min-width:760px;}
  .alloc-legend{grid-template-columns:1fr;}
  .pkg-grid, .link-grid, .docs-grid, .contact-grid{grid-template-columns:1fr;}
  .dash-grid{grid-template-columns:1fr;}

  .hero-panel{overflow-x:auto;}
  .diagram-svg{min-width:420px;}
  .bcc-meter-wrap{overflow-x:auto;}
  .bcc-meter{min-width:700px;}
  .sec-diagram-wrap{overflow-x:auto; padding-bottom:4px;}
  .sec-diagram{min-width:600px;}
  .rel-diagram-wrap{overflow-x:auto;}
  .rel-diagram{min-width:600px;}

  .journey-tabs{overflow-x:auto; -webkit-overflow-scrolling:touch;}
  .journey-tab{flex:0 0 auto; min-width:132px;}
  .journey-panel{padding:22px;}

  .preview-chrome{flex-wrap:wrap; row-gap:8px; height:auto; padding:12px 16px;}
  .preview-flag{margin-left:0;}
}

/* Final light portal theme overrides */
body{background:#f5f8fc!important;color:#102a43!important;}
.nav,.gov-strip,.hero-panel,.sec-card,.pkg-card,.journey-panel,.form-card,.footer{background:#fff!important;color:#102a43!important;border-color:#d9e5f0!important;}
.nav-links a,.hero-sub,.sec-card p,.footer,.footer a{color:#62748a!important;}
h1,h2,h3,h4,.brand,.hero-panel h3,.sec-card h3{color:#102a43!important;}
.btn-primary{background:#0b74de!important;color:#fff!important;border-color:#0b74de!important;}
.btn-ghost{color:#102a43!important;border-color:#b8c8d8!important;}
.badge--gated{color:#0759a9!important;border-color:#8bbce8!important;background:#eef6ff!important;}
.cloud-bg{opacity:.32!important;}

/* Shared light treatment for Cloud Core, Metering and Governance panels */
.panel,.network-scene,.metering-panel,.governance-panel{background:#fff!important;color:#102a43!important;border-color:#d9e5f0!important;}
.panel-title,.panel p,.gov-sub,.balance-label,.gauge-sub,.stat-label,.stat-pct{color:#62748a!important;}
.node-icon,.gov-icon,.balance-pill{background:#eef6ff!important;border-color:#b8d8f2!important;}
.flow-line,.link-path,.ring-bg,.gauge-bg{stroke:#c4d9ec!important;background-color:#c4d9ec!important;}
.flow-dash,.gauge-fill,.ring-fill{stroke:#0b74de!important;filter:drop-shadow(0 0 4px #0b74de)!important;}
.node-label,.gov-title,.stat-label{color:#102a43!important;}
.node-sub,.status-strip,.stat-pct{color:#62748a!important;}
.node.core .node-icon{background:#eef6ff!important;border-color:#77b6ed!important;}
.node.core .node-label{color:#0b74de!important;}
.node.sat .node-icon svg,.stat-icon svg{stroke:#0b74de!important;}
.network-scene{background:#f5f8fc!important;}
.network-scene .grid{opacity:.22!important;}
/* Fit the wrapper to the embedded cloud panel; remove the old SVG surround. */
.rel-diagram-wrap:has(iframe),
.bcc-meter-wrap:has(iframe),
.sec-diagram-wrap:has(iframe){
  width:100%;
  max-width:640px;
  margin-left:auto;
  margin-right:auto;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:hidden;
  border-radius:18px;
}
.bcc-meter-wrap:has(iframe)>:not(iframe){display:none;}
.hero-panel:has(iframe){
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.hero-panel:has(iframe)>.hero-panel-label{padding:16px 20px 0;}
.hero-panel:has(iframe)>.stat-grid{padding:16px 20px;}
iframe[src*="becca-"][src*="-panel.html"]{
  background:transparent!important;
  vertical-align:top;
}
/* Readable text palette for the light website. */
:root{--paper:#102a43;--paper-dim:#344b63;--paper-faint:#435970;--brass:#075caf;--brass-bright:#075caf;--teal:#17664f;}
.nav-links a,.hero-sub,.sec-card p,.footer,.footer a{color:#344b63!important;}
.section-kicker,.hero-tag,.link-card-go,.stat-num,.pkg-card-price{color:#075caf;}
.badge--approval{color:#17664f;background:#edf8f2;}
.badge--off{color:#8c3028;background:#fff2ef;}
.btn-primary{background:#075caf!important;border-color:#075caf!important;color:#fff!important;}
input,textarea,select{color:#102a43;}
input::placeholder,textarea::placeholder{color:#52677b;opacity:1;}
:focus-visible{outline:3px solid #075caf;outline-offset:3px;}