:root {
  color-scheme: light dark;
  /* Forest Moon brand — from the shared Android app palette */
  --brand-forest: #182418;
  --brand-forest-mid: #243024;
  --brand-pine: #2f4636;
  --brand-pine-mid: #3d5846;
  --brand-pine-soft: #e7eee8;
  --brand-cream: #f4ecdc;
  --brand-cream-soft: #faf6ee;
  --brand-gold: #c19c62;
  --brand-gold-strong: #9a7840;
  --brand-gold-soft: #f3e6cc;
  --brand-brown: #6c4824;
  --brand-brown-strong: #543c18;
  --brand-ink: #182418;
  --brand-muted: #5a6658;
  --brand-border: #cfc6b4;
  --brand-border-soft: #e8e0d0;

  /* App aliases */
  --vcf-primary: var(--brand-pine);
  --vcf-primary-strong: var(--brand-forest-mid);
  --vcf-primary-soft: var(--brand-pine-soft);
  --vcf-ink: var(--brand-ink);
  --vcf-muted: var(--brand-muted);
  --vcf-canvas: var(--brand-cream);
  --vcf-surface: #fffdf8;
  --vcf-border: var(--brand-border);
  --vcf-border-soft: var(--brand-border-soft);
  --vcf-radius: var(--cds-alias-object-border-radius-100, 4px);
  --vcf-shadow: 0 1px 3px rgba(24, 36, 24, .12);
  --vcf-accent: var(--brand-gold);
  --vcf-warm: var(--brand-brown);
  --vcf-warm-strong: var(--brand-brown-strong);
  --vcf-warm-soft: var(--brand-gold-soft);

  /* Clarity / CDS semantic remaps so components follow the brand */
  --cds-alias-status-info: var(--brand-pine);
  --cds-alias-status-info-tint: var(--brand-pine-soft);
  --cds-alias-status-info-shade: var(--brand-forest-mid);
  --cds-alias-status-success: #4a6248;
  --cds-alias-status-warning: var(--brand-brown);
  --cds-alias-object-app-background: var(--brand-cream);
  --cds-alias-object-container-background: #fffdf8;
  --cds-alias-object-border-color: var(--brand-border);
  --cds-alias-object-interaction-color: var(--brand-pine);
  --cds-alias-object-interaction-color-hover: var(--brand-forest-mid);
  --cds-alias-object-interaction-background-hover: var(--brand-pine-soft);
  --cds-alias-object-interaction-background-highlight: var(--brand-gold-soft);

  --clr-btn-primary-bg-color: var(--brand-pine);
  --clr-btn-primary-border-color: var(--brand-pine);
  --clr-btn-primary-color: #fff;
  --clr-btn-primary-hover-bg-color: var(--brand-forest-mid);
  --clr-btn-primary-hover-color: #fff;
  --clr-btn-primary-active-bg-color: var(--brand-forest);
  --clr-btn-primary-active-color: #fff;
  --clr-btn-primary-checked-bg-color: var(--brand-pine);
  --clr-btn-primary-checked-color: #fff;
  --clr-btn-primary-disabled-bg-color: #a8b5aa;
  --clr-btn-primary-disabled-border-color: #a8b5aa;
  --clr-btn-primary-disabled-color: #fff;
  --clr-btn-primary-outline-bg-color: transparent;
  --clr-btn-primary-outline-border-color: var(--brand-pine);
  --clr-btn-primary-outline-color: var(--brand-pine);
  --clr-btn-primary-outline-hover-bg-color: var(--brand-pine-soft);
  --clr-btn-primary-outline-hover-color: var(--brand-forest-mid);
  --clr-btn-primary-outline-active-bg-color: var(--brand-gold-soft);
  --clr-btn-primary-outline-active-color: var(--brand-forest);
  --clr-btn-link-color: var(--brand-pine);
  --clr-btn-link-hover-color: var(--brand-forest-mid);
  --clr-link-color: var(--brand-pine);
  --clr-link-hover-color: var(--brand-forest-mid);
  --clr-label-info-bg-color: var(--brand-pine-soft);
  --clr-label-info-color: var(--brand-forest-mid);
  --clr-label-info-border-color: #b7c7ba;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--vcf-canvas);
  color: var(--vcf-ink);
  font-family: "Clarity City", Metropolis, "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  line-height: 1.5;
}
a { color: var(--vcf-primary); }
a:hover { color: var(--vcf-primary-strong); }
:focus-visible { outline: 3px solid var(--vcf-accent); outline-offset: 2px; }

.skip-link {
  position: absolute; top: -100px; left: 12px; z-index: 1000;
  padding: 10px 14px; background: var(--vcf-surface); border-radius: var(--vcf-radius);
}
.skip-link:focus { top: 8px; }

.site-header {
  height: 64px; padding: 0 24px;
  background: linear-gradient(180deg, var(--brand-forest) 0%, var(--brand-forest-mid) 100%);
  border-bottom: 1px solid rgba(193, 156, 98, .28);
}
.site-header .branding { min-width: 0; padding: 0; }
.site-header .branding .nav-link { display: flex; align-items: center; gap: 10px; padding: 8px 10px; text-decoration: none; }
.brand-mark {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 36px;
  width: 36px; height: 36px; border-radius: var(--vcf-radius);
  background: var(--brand-gold); color: var(--brand-forest); font-size: 17px;
}
.brand-copy { display: inline-flex; flex-direction: column; line-height: 1.15; }
.brand-copy .title { color: #fff; font-size: 17px; font-weight: 600; }
.brand-copy .subtitle { color: rgba(243, 230, 204, .72); font-size: 11px; letter-spacing: .25px; }
.site-header .header-actions { margin-left: auto; padding: 0; gap: 4px; align-items: center; }
.site-header .header-actions .nav-link {
  display: inline-flex; align-items: center; height: 64px; padding: 0 14px;
  color: rgba(250, 246, 238, .78); font-size: 13px; text-decoration: none;
  border-bottom: 3px solid transparent;
}
.site-header .header-actions .nav-link:hover,
.site-header .header-actions .nav-link.active {
  color: #fff; border-bottom-color: var(--brand-gold); background: rgba(193, 156, 98, .12);
}

.disclaimer {
  display: flex; gap: 10px; align-items: flex-start; padding: 10px 24px;
  background: var(--brand-gold-soft); color: var(--brand-brown-strong);
  border-bottom: 1px solid #e0cfa8; font-size: 12px; line-height: 1.5;
}
.disclaimer-icon { color: var(--brand-brown); font-weight: 700; }

main { max-width: 1280px; margin: 0 auto; padding: 42px 32px 64px; }
.hero {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr); min-height: 400px; overflow: hidden;
  background: var(--vcf-surface); border: 1px solid var(--vcf-border); border-radius: var(--vcf-radius); box-shadow: var(--vcf-shadow);
}
.hero-copy {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding: 54px 58px; background: linear-gradient(135deg, #fffdf8 0%, var(--brand-pine-soft) 100%);
}
.eyebrow { color: var(--vcf-warm-strong); font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; }
.hero h1 { max-width: 700px; margin: 10px 0 16px; font-size: 44px; line-height: 1.08; font-weight: 600; letter-spacing: -.025em; }
.hero p { max-width: 62ch; margin: 0 0 24px; color: var(--vcf-muted); font-size: 16px; line-height: 1.7; }
.btn { border-radius: var(--vcf-radius); font-weight: 500; }
.hero-visual {
  position: relative; display: flex; flex-direction: column; justify-content: center; gap: 38px;
  padding: 50px; background: var(--brand-pine-soft);
}
.hero-visual::before {
  content: ""; position: absolute; inset: 0; opacity: .45;
  background-image: linear-gradient(var(--brand-border) 1px, transparent 1px), linear-gradient(90deg, var(--brand-border) 1px, transparent 1px);
  background-size: 32px 32px;
}
.stack-card {
  position: relative; z-index: 1; padding: 21px 24px; background: var(--vcf-surface);
  border: 1px solid var(--vcf-border); border-left: 4px solid var(--vcf-primary);
  border-radius: var(--vcf-radius); box-shadow: 0 4px 12px rgba(24,36,24,.12);
}
.stack-card span { display: block; color: var(--vcf-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .8px; }
.stack-card strong { display: block; margin-top: 4px; font-size: 16px; font-weight: 600; }
.stack-b { margin-left: 44px; border-left-color: var(--brand-brown); }
.stack-line { position: absolute; z-index: 0; left: 50%; top: 42%; width: 2px; height: 78px; background: var(--vcf-primary); transform: rotate(-22deg); }
.tools-section, .principles { padding-top: 64px; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 22px; }
.section-heading h2 { margin: 5px 0 0; font-size: 28px; line-height: 1.2; font-weight: 600; }
.section-heading p { max-width: 520px; margin: 0; color: var(--vcf-muted); font-size: 13px; }
.tool-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.tool-card {
  display: flex; flex-direction: column; min-width: 0; margin: 0;
  border: 1px solid var(--vcf-border); border-radius: var(--vcf-radius);
  box-shadow: var(--vcf-shadow); background: var(--vcf-surface);
  transition: transform .15s, box-shadow .15s;
}
.tool-card:hover { transform: translateY(-2px); box-shadow: 0 5px 16px rgba(24, 36, 24, .14); }
.tool-card .card-block { flex: 1; padding: 28px 30px 20px; }
.tool-icon {
  float: right; display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: var(--vcf-radius); color: #fff; font-size: 22px; font-weight: 600;
}
.ports-icon { background: var(--brand-pine); }
.compliance-icon { background: var(--brand-brown); }
.tool-card h3 { clear: both; margin: 20px 0 9px; font-size: 21px; font-weight: 600; }
.tool-card p { color: var(--vcf-muted); font-size: 13px; line-height: 1.65; }
.feature-list { margin: 18px 0 0; padding: 0; list-style: none; color: var(--vcf-ink); font-size: 12px; }
.feature-list li { position: relative; padding: 7px 0 7px 22px; border-top: 1px solid var(--vcf-border-soft); }
.feature-list li::before { content: "✓"; position: absolute; left: 2px; color: #4a6248; font-weight: 600; }
.card-footer {
  display: flex; align-items: center; gap: 8px; padding: 16px 24px;
  background: var(--brand-cream-soft); border-top: 1px solid var(--vcf-border-soft);
}
.label-blue, .label.label-info {
  background: var(--brand-pine-soft) !important;
  color: var(--brand-forest-mid) !important;
  border-color: #b7c7ba !important;
}
.label-purple {
  background: var(--brand-gold-soft) !important;
  color: var(--brand-brown-strong) !important;
  border-color: #e0cfa8 !important;
}
.principles { padding-bottom: 8px; }
.principle-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--vcf-border); border-radius: var(--vcf-radius); background: var(--vcf-surface);
}
.principle-grid div { padding: 22px; }
.principle-grid div + div { border-left: 1px solid var(--vcf-border-soft); }
.principle-grid strong { display: block; margin-bottom: 5px; font-size: 14px; font-weight: 600; }
.principle-grid span { color: var(--vcf-muted); font-size: 12px; line-height: 1.55; }
.site-footer {
  display: flex; justify-content: space-between; gap: 24px;
  padding: 24px max(32px, calc((100vw - 1216px) / 2));
  border-top: 1px solid var(--vcf-border); background: var(--vcf-surface);
  color: var(--vcf-muted); font-size: 12px;
}
.site-footer strong, .site-footer span { display: block; }
.site-footer strong { color: var(--vcf-ink); font-size: 13px; }
.site-footer p { margin: 0; text-align: right; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .hero-visual { min-height: 280px; }
  .principle-grid { grid-template-columns: repeat(2, 1fr); }
  .principle-grid div + div { border-left: 0; }
  .principle-grid div:nth-child(even) { border-left: 1px solid var(--vcf-border-soft); }
  .principle-grid div:nth-child(n+3) { border-top: 1px solid var(--vcf-border-soft); }
}
@media (max-width: 680px) {
  .site-header { height: auto; min-height: 56px; padding: 6px 12px; }
  .brand-copy .subtitle, .hide-mobile { display: none !important; }
  .site-header .header-actions .nav-link { height: 52px; padding: 0 8px; font-size: 12px; }
  .disclaimer { padding: 10px 16px; }
  main { padding: 24px 16px 48px; }
  .hero { min-height: 0; }
  .hero-copy { padding: 34px 24px; }
  .hero h1 { font-size: 32px; }
  .hero-visual { min-height: 240px; padding: 24px; }
  .tool-grid, .principle-grid { grid-template-columns: 1fr; }
  .principle-grid div:nth-child(even) { border-left: 0; }
  .principle-grid div + div { border-top: 1px solid var(--vcf-border-soft); }
  .section-heading, .site-footer { display: block; }
  .section-heading p { margin-top: 10px; }
  .site-footer { padding: 22px 16px; }
  .site-footer p { margin-top: 10px; text-align: left; }
}
@media (max-width: 440px) {
  .brand-copy { display: none; }
  .site-header .header-actions .nav-link { padding: 0 5px; font-size: 11.5px; }
}

/* ---------- Theme switcher ---------- */
.theme-switcher{
  display:inline-flex;align-items:center;align-self:center;margin:0 4px 0 10px;padding:3px;
  border:1px solid rgba(243,230,204,.28);border-radius:var(--vcf-radius,4px);background:rgba(0,0,0,.18);
}
.theme-switcher button{
  appearance:none;border:0;margin:0;padding:6px 10px;border-radius:3px;
  background:transparent;color:rgba(250,246,238,.72);font:600 11px/1.2 inherit;
  letter-spacing:.02em;cursor:pointer;
}
.theme-switcher button:hover{color:#fff;background:rgba(193,156,98,.14)}
.theme-switcher button.active{color:var(--brand-forest,#182418);background:var(--brand-gold,#c19c62)}
.theme-switcher button:focus-visible{outline:2px solid var(--brand-gold,#c19c62);outline-offset:1px}
@media (max-width:680px){
  .theme-switcher{margin-left:4px}
  .theme-switcher button{padding:6px 7px;font-size:10.5px}
}

/* ---------- Forest Moon dark ---------- */
[cds-theme~="dark"]{
  color-scheme:dark;
  --brand-pine-soft:#2a382e;
  --brand-gold-soft:#3a3220;
  --brand-cream-soft:#1a241c;
  --brand-ink:#f4ecdc;
  --brand-muted:#aab6a8;
  --brand-border:#3a4a3c;
  --brand-border-soft:#2c3a30;

  --vcf-primary:var(--brand-gold);
  --vcf-primary-strong:#e4cc90;
  --vcf-primary-soft:var(--brand-pine-soft);
  --vcf-ink:var(--brand-ink);
  --vcf-muted:var(--brand-muted);
  --vcf-canvas:#121a14;
  --vcf-surface:#1c281f;
  --vcf-border:var(--brand-border);
  --vcf-border-soft:var(--brand-border-soft);
  --vcf-shadow:0 1px 3px rgba(0,0,0,.35);
  --vcf-accent:var(--brand-gold);
  --vcf-warm:var(--brand-gold);
  --vcf-warm-strong:#e4cc90;
  --vcf-warm-soft:var(--brand-gold-soft);

  --vp-primary:var(--brand-gold);
  --vp-primary-strong:#e4cc90;
  --vp-primary-soft:var(--brand-pine-soft);
  --vp-teal:#8fad96;
  --vp-ink:var(--brand-ink);
  --vp-muted:var(--brand-muted);
  --vp-faint:#8a9688;
  --vp-canvas:#121a14;
  --vp-surface:#1c281f;
  --vp-border:var(--brand-border);
  --vp-border-soft:var(--brand-border-soft);
  --vp-warm:var(--brand-gold);
  --vp-warm-strong:#e4cc90;
  --vp-warm-soft:var(--brand-gold-soft);
  --vp-accent:var(--brand-gold);
  --vp-shadow:0 1px 2px rgba(0,0,0,.35);

  --cds-alias-status-info:var(--brand-gold);
  --cds-alias-status-info-tint:var(--brand-pine-soft);
  --cds-alias-status-info-shade:#e4cc90;
  --cds-alias-status-success:#8fad96;
  --cds-alias-status-warning:var(--brand-gold);
  --cds-alias-object-app-background:#121a14;
  --cds-alias-object-container-background:#1c281f;
  --cds-alias-object-border-color:var(--brand-border);
  --cds-alias-object-interaction-color:var(--brand-gold);
  --cds-alias-object-interaction-color-hover:#e4cc90;
  --cds-alias-object-interaction-background-hover:var(--brand-pine-soft);
  --cds-alias-object-interaction-background-highlight:var(--brand-gold-soft);

  --clr-btn-primary-bg-color:var(--brand-gold);
  --clr-btn-primary-border-color:var(--brand-gold);
  --clr-btn-primary-color:var(--brand-forest);
  --clr-btn-primary-hover-bg-color:#e4cc90;
  --clr-btn-primary-hover-color:var(--brand-forest);
  --clr-btn-primary-active-bg-color:#9a7840;
  --clr-btn-primary-active-color:#fff;
  --clr-btn-primary-checked-bg-color:var(--brand-gold);
  --clr-btn-primary-checked-color:var(--brand-forest);
  --clr-btn-primary-disabled-bg-color:#4a564c;
  --clr-btn-primary-disabled-border-color:#4a564c;
  --clr-btn-primary-disabled-color:#aab6a8;
  --clr-btn-primary-outline-bg-color:transparent;
  --clr-btn-primary-outline-border-color:var(--brand-gold);
  --clr-btn-primary-outline-color:var(--brand-gold);
  --clr-btn-primary-outline-hover-bg-color:var(--brand-pine-soft);
  --clr-btn-primary-outline-hover-color:#e4cc90;
  --clr-btn-primary-outline-active-bg-color:var(--brand-gold-soft);
  --clr-btn-primary-outline-active-color:#e4cc90;
  --clr-btn-link-color:var(--brand-gold);
  --clr-btn-link-hover-color:#e4cc90;
  --clr-link-color:var(--brand-gold);
  --clr-link-hover-color:#e4cc90;
  --clr-label-info-bg-color:var(--brand-pine-soft);
  --clr-label-info-color:#e4cc90;
  --clr-label-info-border-color:#3a4a3c;
}

[cds-theme~="dark"] .disclaimer{
  background:var(--brand-gold-soft);color:#e4cc90;border-bottom-color:#4a4030;
}
[cds-theme~="dark"] .disclaimer-icon{color:var(--brand-gold)}
[cds-theme~="dark"] .hero-copy{
  background:linear-gradient(135deg,var(--vcf-surface,#1c281f) 0%,var(--brand-pine-soft) 100%);
}
[cds-theme~="dark"] .card-footer,
[cds-theme~="dark"] .coverage-item{background:var(--brand-cream-soft)}
[cds-theme~="dark"] .label-blue,
[cds-theme~="dark"] .label.label-info{
  background:var(--brand-pine-soft)!important;color:#e4cc90!important;border-color:#3a4a3c!important;
}
[cds-theme~="dark"] .label-purple{
  background:var(--brand-gold-soft)!important;color:#e4cc90!important;border-color:#4a4030!important;
}
[cds-theme~="dark"] table.table tbody tr:nth-child(even),
[cds-theme~="dark"] .connection-table tbody tr:nth-child(even){background:#182218}
[cds-theme~="dark"] table.table thead th,
[cds-theme~="dark"] .connection-table th,
[cds-theme~="dark"] .matrix-table th{background:var(--brand-pine-soft);color:var(--brand-muted)}
[cds-theme~="dark"] .matrix-table tbody th{background:var(--vcf-surface,#1c281f)}
[cds-theme~="dark"] .density-one{background:#243024;color:#e4cc90}
[cds-theme~="dark"] .density-few{background:#2f4636;color:#f4ecdc}
[cds-theme~="dark"] .density-many{background:var(--brand-gold);color:var(--brand-forest)}
[cds-theme~="dark"] .topology-scroll{background:linear-gradient(180deg,#182218,#121a14)}
[cds-theme~="dark"] .topology .zone{fill:#1c281f;stroke:#3a4a3c}
[cds-theme~="dark"] .topology .zone-fleet{fill:#243024}
[cds-theme~="dark"] .topology .zone-instance{fill:#1f2c22;stroke:#5a6e5c}
[cds-theme~="dark"] .topology .zone-inner{fill:#182218;stroke:#3a4a3c}
[cds-theme~="dark"] .topology .zone-platform{fill:#24301f}
[cds-theme~="dark"] .topology .zone-external{fill:#1a2218}
[cds-theme~="dark"] .topology .zone-title{fill:#e4cc90}
[cds-theme~="dark"] .topology .inner-title{fill:#aab6a8}
[cds-theme~="dark"] .topology .link{stroke:#6e7f6c}
[cds-theme~="dark"] .topology .edge.highlighted .link{stroke:var(--brand-gold)}
[cds-theme~="dark"] .topology .edge:hover .link,
[cds-theme~="dark"] .topology .edge:focus .link{stroke:#e4cc90}
[cds-theme~="dark"] .topology .edge-label{fill:#e4cc90;stroke:#1c281f}
[cds-theme~="dark"] .topology .node rect{fill:#1c281f;stroke:#5a6e5c}
[cds-theme~="dark"] .topology .node text{fill:#f4ecdc}
[cds-theme~="dark"] .topology .node .node-count{fill:#aab6a8}
[cds-theme~="dark"] .topology .node:hover rect,
[cds-theme~="dark"] .topology .node:focus rect{stroke:var(--brand-gold)}
[cds-theme~="dark"] .topology .node.selected rect{fill:var(--brand-gold);stroke:#9a7840}
[cds-theme~="dark"] .topology .node.selected text{fill:var(--brand-forest)}
[cds-theme~="dark"] .topology .node.connected rect{fill:#2f4636;stroke:var(--brand-gold)}
[cds-theme~="dark"] .direction-group>summary{background:#182218}
[cds-theme~="dark"] .port-chip{background:var(--brand-pine-soft);color:var(--brand-ink)}
[cds-theme~="dark"] .protocol-badge{border-color:#3a4a3c;background:var(--brand-pine-soft);color:#e4cc90}
[cds-theme~="dark"] .classification-badge{background:var(--brand-pine-soft);color:var(--brand-muted)}
[cds-theme~="dark"] .domain-badge.broadcom{background:var(--brand-pine-soft);border-color:#3a4a3c;color:#e4cc90}
[cds-theme~="dark"] .count-badge{background:var(--brand-pine-soft);color:var(--brand-muted)}
[cds-theme~="dark"] .view-tab.active{color:var(--brand-forest)}
[cds-theme~="dark"] .matrix-cell{border-color:#3a4a3c;background:var(--brand-pine-soft);color:#e4cc90}
[cds-theme~="dark"] .legend-box{background:#1c281f;border-color:#5a6e5c}
[cds-theme~="dark"] .hero-visual{background:var(--brand-pine-soft)}
[cds-theme~="dark"] .stack-card{background:var(--vcf-surface,#1c281f)}
[cds-theme~="dark"] .feature-list li::before{color:#8fad96}