/* OwnershipGuide — global styles (v1) */

:root{
  --bg:#f6f7f9;
  --text:#111827;
  --muted:#4b5563;
  --link:#1d4ed8;
  --linkHover:#1e40af;
  --border:#e5e7eb;
  --card:#f9fafb;
  --max: 900px;
}

*{ box-sizing:border-box; }

html,body{
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  line-height:1.6;
}
.eyebrow{
  margin: 18px 0 0;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}


.container{
  max-width: var(--max);
  margin: 0 auto;
  padding: 20px 16px 64px;
}

a{
  color:var(--link);
  text-decoration: underline;
  text-underline-offset: 2px;
}
a:hover{ color:var(--linkHover); }

small, .muted{ color:var(--muted); }

hr{
  border:none;
  border-top:1px solid var(--border);
  margin: 18px 0;
}

h1,h2,h3{
  line-height:1.25;
  margin: 18px 0 10px;
}

h1{ font-size: 34px; letter-spacing:-0.02em; }
h2{ font-size: 24px; letter-spacing:-0.01em; }
h3{ font-size: 18px; }

ul{ padding-left: 20px; }

.nav{
  font-size: 14px;
  margin-bottom: 12px;
}
.nav a{
  text-decoration:none;
}
.nav a:hover{
  text-decoration:underline;
}

.meta{
  font-size: 14px;
  color: var(--muted);
  margin-top: 6px;
}

.box{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  margin: 14px 0;
}

input[type="text"], input[type="number"]{
  width: 100%;
  max-width: 420px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 16px;
}

button{
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #111827;
  color: white;
  font-size: 16px;
  cursor: pointer;
}
button:hover{ opacity: 0.92; }

/* Button + link-button system */
a.btn, button.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #111827;
  color: #ffffff;
  font-size: 16px;
  text-decoration: none;
  cursor: pointer;
}
a.btn:hover, button.btn:hover{ opacity: 0.92; }

button.btn:disabled{
  opacity: 1;
  cursor: not-allowed;
  background: #e5e7eb;
  border-color: #e5e7eb;
  color: #9ca3af;
}
button.btn:disabled:hover{ background: #e5e7eb; border-color:#e5e7eb; color:#9ca3af; }

a.btn.btn-secondary, button.btn.btn-secondary{
  background: #ffffff;
  color: #111827;
}
a.btn.btn-secondary:hover, button.btn.btn-secondary:hover{ background: #f3f4f6; }

/* Primary variant (explicit) */
a.btn.btn-primary, button.btn.btn-primary{
  background: #111827;
  color: #ffffff;
}


.btn-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.footer{
  margin-top: 32px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  font-size: 14px;
  color: var(--muted);
}

.announcement{
  border:1px solid #d7d7d7;
  background:#fafafa;
  padding:10px 12px;
  border-radius:10px;
  margin-bottom:14px;
}

.ad-slot{
  border:1px dashed #d7d7d7;
  background:#fff;
  padding:14px 12px;
  border-radius:10px;
  margin:14px 0;
}

.site-header .nav a.active{
  text-decoration: underline;
  font-weight: 700;
}

.related-box{
  border:1px solid #d7d7d7;
  background:#fafafa;
  padding:14px 14px;
  border-radius:10px;
  margin-top:16px;
}

/* Calculator CTA (injected near end of transport articles) */
.cta-box{
  border:1px solid #d7d7d7;
  background:#ffffff;
  padding:14px 14px;
  border-radius:10px;
  margin-top:16px;
}

.cta-box h3{
  margin:0 0 8px;
  font-size:18px;
}

.cta-box p{
  margin:0 0 10px;
}

.cta-button{
  display:inline-block;
  padding:10px 12px;
  border:1px solid #111;
  border-radius:10px;
  text-decoration:none;
  font-weight:600;
}

.related-box h3{
  margin:0 0 10px;
  font-size:18px;
}

.related-box ul{
  margin:0 0 0 18px;
}

/* =========================
   Header Navigation Upgrade
========================= */

.site-header {
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 100;
}

.site-header .nav {
  display: flex;
  gap: 14px;
  align-items: center;
  font-weight: 500;
}

.site-header .nav a {
  text-decoration: none;
  color: #1f2937;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  transition: all 0.15s ease;
}

.site-header .nav a:hover {
  color: #000;
  border-bottom: 2px solid #cbd5e1;
}

.site-header .nav a.active {
  font-weight: 600;
  border-bottom: 2px solid #111;
  color: #111;
}

/* =========================
   Header Site Search (v0031)
========================= */

.nav-spacer{ flex: 1 1 auto; }

.site-search{
  position: relative;
  display: flex;
  align-items: center;
}

.site-search input[type="search"]{
  width: 260px;
  max-width: 260px;
  padding: 8px 38px 8px 10px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  font-size: 14px;
  background: #fff;
}

/* Hide the native browser clear ("x") for search inputs so we only show our custom clear button */
.site-search input[type="search"]::-webkit-search-cancel-button,
.site-search input[type="search"]::-webkit-search-decoration,
.site-search input[type="search"]::-webkit-search-results-button,
.site-search input[type="search"]::-webkit-search-results-decoration{
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

.site-search input[type="search"]::-ms-clear,
.site-search input[type="search"]::-ms-reveal{
  display: none;
  width: 0;
  height: 0;
}


.site-search-clear{
  position: absolute;
  right: 10px;
  height: 28px;
  width: 28px;
  border: 0;
  background: transparent;
  border-radius: 999px;
  font-size: 18px;
  line-height: 28px;
  cursor: pointer;
  color: #6b7280;
}

.site-search-clear:hover{
  background: #f3f4f6;
}

.site-search-results{
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 360px;
  max-width: calc(100vw - 32px);
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.12);
  overflow: hidden;
  display: none;
  z-index: 999;
  max-height: min(520px, 70vh);
  overflow-y: auto;
}

.site-search-results.open{ display: block; }

.site-search-results .sr-head{
  padding: 10px 12px;
  border-bottom: 1px solid #e5e7eb;
  font-size: 12px;
  color: #6b7280;
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
}

.site-search-results .sr-count{ color: #9ca3af; }

.site-search-results .sr-empty{
  padding: 10px 12px;
}

.site-search-results a{
  display: block;
  padding: 10px 12px;
  text-decoration: none;
  color: #111827;
  border-bottom: 1px solid #f3f4f6;
}

.site-search-results a:hover,
.site-search-results a.active{
  background: #f9fafb;
}

.site-search-results .sr-title{ font-weight: 700; font-size: 14px; }
.site-search-results .sr-meta{ font-size: 12px; color: #6b7280; margin-top: 4px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

.site-search-results .sr-badge{
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  color: #374151;
}

.site-search-results .sr-meta-text{ color:#6b7280; }

.site-search-results mark{
  background: rgba(255, 214, 102, 0.55);
  padding: 0 2px;
  border-radius: 4px;
}

@media (max-width: 760px){
  .site-header .nav{ flex-wrap: wrap; gap: 10px; }
  .nav-spacer{ display:none; }
  .site-search{ width: 100%; }
  .site-search input[type="search"]{ width: 100%; max-width: none; }
  .site-search-results{ width: 100%; right: auto; left: 0; }
}

/* =========================
   Typography Upgrade
========================= */

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Arial, sans-serif;
  color: #1f2937;
  background: #f9fafb;
}

.container {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 20px 60px;
  background: #ffffff;
}

h1 {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 10px;
}

h2 {
  font-size: 22px;
  margin-top: 36px;
}

h3 {
  font-size: 18px;
  margin-top: 24px;
}

.meta {
  color: #6b7280;
  font-size: 14px;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 14px;
}

th, td {
  padding: 10px 12px;
  border-bottom: 1px solid #e5e7eb;
  text-align: left;
}

th {
  font-weight: 600;
  background: #f3f4f6;
}

.related-box {
  margin-top: 40px;
  padding: 20px;
  border-radius: 10px;
  background: #f3f4f6;
}

/* =========================
   Footer Upgrade
========================= */

.footer {
  margin-top: 60px;
  padding: 40px 0;
  font-size: 0.95rem;
  text-align: center;
}

.footer-clusters-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 18px auto;
  max-width: 980px;
}
@media (min-width: 860px){
  .footer-clusters-grid{
    grid-template-columns: repeat(2, 1fr);
    text-align: left;
  }
}

.footer-cluster{
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 12px;
  background: rgba(17,24,39,0.02);
}
.footer-cluster p{ margin: 0 0 6px; }
.footer-cluster .small{ margin: 0; }

.footer-links {
  margin: 15px 0;
}

.footer-links a {
  margin: 0 8px;
  text-decoration: none;
}

.footer-links a:hover {
  text-decoration: underline;
}

.small {
  font-size: 0.85rem;
}

/* =========================
   Ad slot placeholder (pre-approval friendly)
========================= */

.ad-slot{
  min-height: 120px;        /* keeps layout stable before ads fill */
  display: flex;
  align-items: center;
  justify-content: center;
}

.ad-slot::before{
  content: "Advertisement";
  font-size: 12px;
  color: #9ca3af;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}


/* =========================
   Homepage cards (v0008)
   ========================= */
.card-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 18px 0;
}
@media (min-width: 860px){
  .card-grid{
    grid-template-columns: repeat(3, 1fr);
  }
}

.start-here-lanes{
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 860px){
  .start-here-lanes{
    grid-template-columns: repeat(2, minmax(280px, 1fr));
    justify-content: center;
  }
}
.card{
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 14px;
  padding: 18px;
  background: #ffffff;
  box-shadow: 0 8px 22px rgba(0,0,0,0.06);
}
.card h2{
  margin-top: 0;
}

.card ul{
  margin: 10px 0 12px;
  padding-left: 18px;
}
.card li{
  margin: 6px 0;
}
.micro-links{
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}
.micro-links .label{
  font-weight: 800;
  color: var(--text);
}
.micro-links .spacer{
  height: 6px;
}
.button{
  display: inline-block;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.14);
  background: rgba(17,24,39,0.04);
  text-decoration: none;
}
.button:hover{
  text-decoration: none;
  filter: brightness(0.98);
}

/* =========================
   Homepage polish (v0008_patch2)
   Keep changes scoped to the homepage only.
========================= */

body.home{
  background: #f3f4f6;
}

body.home .container{
  background: transparent;
  max-width: 980px;
}

.home-hero{
  padding: 14px 0 6px;
}

.home-hero h1{
  margin-top: 10px;
  font-size: 42px;
  letter-spacing: -0.03em;
}

.lead{
  margin: 8px 0 8px;
  font-size: 18px;
  color: #111827;
}

body.home .meta{
  margin-top: 0;
}

body.home .card-grid{
  margin-top: 18px;
}

body.home .card{
  border-radius: 16px;
  box-shadow: 0 14px 28px rgba(0,0,0,0.08);
}

.home-footnav{
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #e5e7eb;
}


/* ============================
   Calculator UI System (v0024)
   ============================ */
.result-card{
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 14px;
  background: #fff;
}
.result-title{
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.result-divider{
  height: 1px;
  background: #e5e7eb;
  margin: 12px 0;
}
.badge{
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 900;
  border: 1px solid #e5e7eb;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.badge.safe{ background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.badge.borderline{ background: #fffbeb; border-color: #fde68a; color: #92400e; }
.badge.risky{ background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.interpret{
  margin-top: 12px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 12px;
}
.interpret strong{ display: block; margin-bottom: 6px; }
.interpret p{ margin: 0; font-size: 13px; color: #111827; }

/* =========================
   Decision Engine UI blocks (v0040)
========================= */

.og-quicknav{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin: 8px 0 14px;
}

.og-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  text-decoration:none;
  font-size: 13px;
  color: #111827;
}

.og-chip:hover{ background:#f9fafb; text-decoration:none; }

.og-hero{
  border: 1px solid #e5e7eb;
  background: linear-gradient(180deg, rgba(17,24,39,0.03), rgba(17,24,39,0.00));
  border-radius: 16px;
  padding: 14px 14px;
  margin: 14px 0;
}

.og-hero p{ margin: 0 0 10px; }

.og-hero-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.og-primary, .og-secondary{
  display:inline-block;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration:none;
  border: 1px solid rgba(0,0,0,0.14);
}

.og-pill{
  display:inline-flex;
  align-items:center;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.18);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  background: rgba(255,255,255,0.7);
}


.og-primary{
  background:#111827;
  color:#fff;
}

.og-primary:hover{ opacity:0.92; }

.og-secondary{
  background: rgba(17,24,39,0.04);
  color:#111827;
}

.og-secondary:hover{ filter: brightness(0.98); }

.og-card-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 12px 0 6px;
}

.og-card-grid.three{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.og-card-grid.one{
  grid-template-columns: 1fr;
}

.og-card-wide{ grid-column: 1 / -1; }

.og-card{
  display:block;
  padding: 14px 14px;
  border-radius: 16px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  text-decoration:none;
  box-shadow: 0 10px 26px rgba(0,0,0,0.06);
}

.og-card:hover{ text-decoration:none; transform: translateY(-1px); }

.og-card-title{ font-weight: 800; font-size: 15px; color:#111827; }
.og-card-meta{ font-size: 13px; color:#6b7280; margin-top: 6px; }


.og-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.14);
  text-decoration:none;
  font-weight: 800;
  font-size: 13px;
  width: fit-content;
  margin-top: 10px;
}

.og-card-links{
  margin-top: 10px;
  font-size: 13px;
  color: #6b7280;
}

.og-card-links a{
  font-weight: 700;
}


@media (max-width: 760px){
  .og-card-grid{ grid-template-columns: 1fr; }
}

/* =========================
   Comparison tables
========================= */
.og-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #ffffff;
}

.og-table th,
.og-table td {
  border-bottom: 1px solid #e5e7eb;
}

.og-table tr:last-child td {
  border-bottom: none;
}

.og-table thead th {
  background: #f9fafb;
}


/* OG checklist + FAQ (comparisons consistency) */
.og-checklist {
  margin: 0;
}
.og-checklist ul,
.og-checklist ol {
  margin: 0;
  padding-left: 0;
  list-style: none;
}
.og-checklist li {
  padding-left: 28px;
  position: relative;
  margin: 10px 0;
}
.og-checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
}

.og-faq details {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 12px 14px;
  background: #ffffff;
  margin: 10px 0;
}
.og-faq summary {
  cursor: pointer;
  font-weight: 700;
}
.og-faq p {
  margin: 10px 0 0 0;
  color: #374151;
}


/* Inline SVG icons (Next steps module) */
.og-card-title{
  display:flex;
  align-items:center;
  gap:10px;
}
.og-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  flex:0 0 18px;
  color:inherit;
}
.og-icon svg{ display:block; }


/* Next steps: related links (financing loop) */
.og-nextsteps-related{
  margin-top:16px;
  padding:14px 16px;
  border:1px solid var(--border, rgba(0,0,0,0.08));
  border-radius:14px;
  background: rgba(0,0,0,0.02);
}
.og-nextsteps-related-label{
  font-weight:600;
  margin-bottom:6px;
}
.og-nextsteps-related-links a{
  text-decoration: underline;
}


/* v0064: small section label */
.section-kicker{margin:18px 0 10px;font-weight:700;color:var(--text,#111827);opacity:.75;letter-spacing:.02em;text-transform:uppercase;font-size:12px;}


/* v0081: calculator layout helpers (used across new + existing calculators) */
.og-form-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px;
}
.og-form-grid label{
  display:block;
  font-weight:600;
  margin-bottom:6px;
}
.og-form-grid input,
.og-form-grid select{
  width:100%;
}
@media (max-width: 900px){
  .og-form-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px){
  .og-form-grid{ grid-template-columns: 1fr; }
}

.og-kpi-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:12px;
}
@media (max-width: 900px){
  .og-kpi-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px){
  .og-kpi-grid{ grid-template-columns: 1fr; }
}

.kpi{
  border:1px solid rgba(0,0,0,0.08);
  border-radius:14px;
  background: rgba(0,0,0,0.02);
  padding:12px;
}
.kpi-label{ font-size:12px; opacity:.75; font-weight:700; text-transform:uppercase; letter-spacing:.02em; }
.kpi-value{ font-size:24px; font-weight:800; margin-top:6px; }
.kpi-sub{ margin-top:6px; font-size:13px; opacity:.8; }

.pill{display:inline-flex;align-items:center;gap:6px;font-size:14px;}


/* === Quick decision wizard (hub pages) === */
.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}
.og-wizard{
  border:1px solid rgba(0,0,0,0.10);
  border-radius:16px;
  background: rgba(0,0,0,0.02);
  padding:14px;
  margin: 14px 0 18px;
}
.og-wizard-title{
  font-weight:900;
  font-size:16px;
  margin-bottom:6px;
}
.og-wizard-sub{
  margin:0 0 12px;
  opacity:.85;
}
.og-wizard-row{
  display:grid;
  grid-template-columns: 1fr auto;
  gap:10px;
  align-items:center;
}
.og-wizard select{
  width:100%;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,0.14);
  background:#fff;
  font-size:16px;
}
.btn.is-disabled{
  pointer-events:none;
  opacity: .55;
}
.og-wizard-foot{
  margin:12px 0 0;
  font-size:13px;
  opacity:.85;
}
@media (max-width: 640px){
  .og-wizard-row{ grid-template-columns: 1fr; }
  .og-wizard .btn{ width:100%; text-align:center; }
}



/* Editorial blocks (AdSense quality layer) */
.og-divider{ height:1px; background:var(--border); margin:28px 0; }
.og-last-updated{ color:var(--muted); margin:0 0 12px; font-size:14px; }
.og-bullets{ padding-left:18px; }
.og-callout{ border:1px solid var(--border); background: #fff; border-radius:16px; padding:14px 16px; }
.og-callout-title{ margin:0 0 6px; font-weight:700; }
.og-faq details{ border:1px solid var(--border); background:#fff; border-radius:14px; padding:10px 12px; margin:10px 0; }
.og-faq summary{ cursor:pointer; font-weight:600; }
.og-faq-a{ margin-top:8px; color:var(--muted); }


/* =========================
   Visual System Rebalance + Hub UX helpers (v0159)
========================= */
:root{
  --bg:#f6f8fc;
  --bgAccent:#eef3fb;
  --surface:#ffffff;
  --surfaceSoft:#f8fbff;
  --text:#0f172a;
  --muted:#475569;
  --link:#1d4ed8;
  --linkHover:#1e3a8a;
  --border:#dde5f0;
  --borderStrong:#c8d4e5;
  --brand:#142a5c;
  --brand2:#7ee0cf;
  --shadowSm:0 8px 22px rgba(15,23,42,0.05);
  --shadowMd:0 16px 36px rgba(15,23,42,0.08);
  --radius:18px;
  --max: 860px;
}

html{ background: linear-gradient(180deg, #f9fbfe 0%, #f4f7fb 100%); }
body{
  background: transparent;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.container{
  max-width: var(--max);
  padding: 28px 18px 72px;
  background: transparent;
}

main.container > h1,
main.container > p,
main.container > ul,
main.container > ol,
main.container > .meta,
main.container > .eyebrow,
main.container > hr,
main.container > h2,
main.container > h3,
main.container > table{
  max-width: 760px;
}
main.container > .box,
main.container > .card-grid,
main.container > .og-card-grid,
main.container > .og-hero,
main.container > .related-box,
main.container > .cta-box,
main.container > .hub-hero,
main.container > .hub-strip{
  max-width: 100%;
}

h1{ font-size: clamp(2.2rem, 4vw, 3rem); letter-spacing:-0.035em; margin: 14px 0 12px; }
h2{ font-size: clamp(1.45rem, 2.35vw, 1.85rem); letter-spacing:-0.02em; margin-top: 34px; }
h3{ font-size: 1.1rem; letter-spacing:-0.01em; }
p, li{ color:#1f2937; }
.lead{ font-size: 1.125rem; color:#0f172a; }
a{ color:var(--link); }
a:hover{ color:var(--linkHover); }

.site-header{
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(200,212,229,0.9);
  box-shadow: 0 8px 24px rgba(15,23,42,0.04);
}
.site-header .container{
  padding-top: 12px;
  padding-bottom: 12px;
}
.site-header hr{ display:none; }
.site-header .nav{
  gap: 10px;
  align-items: center;
}
.site-header .nav > .muted{ display:none; }
.site-header .nav a{
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  color:#334155;
}
.site-header .nav a:hover{
  color:#0f172a;
  background: rgba(20,42,92,0.04);
  border-color: rgba(200,212,229,0.95);
}
.site-header .nav a.active{
  background:#ffffff;
  border-color: rgba(20,42,92,0.12);
  box-shadow: 0 4px 12px rgba(15,23,42,0.04);
}
.site-brand{
  display:inline-flex !important;
  align-items:center;
  gap:10px;
  font-weight: 800;
  color: var(--brand) !important;
  margin-right: 2px;
}
.site-brand img{
  width: 22px;
  height: 22px;
  border-radius: 7px;
  flex: 0 0 22px;
  box-shadow: 0 4px 10px rgba(20,42,92,0.14);
}
.site-brand span{ white-space: nowrap; }
.site-search input[type="search"]{
  border-radius: 999px;
  border-color: var(--border);
  background: #ffffff;
  box-shadow: inset 0 1px 2px rgba(15,23,42,0.03);
}
.site-search-results{
  border-color: var(--borderStrong);
  box-shadow: 0 20px 40px rgba(15,23,42,0.10);
}

.box,
.card,
.related-box,
.cta-box,
.result-card,
.og-card,
.og-hero,
.interpret,
.og-faq details,
.og-nextsteps-related,
.hub-hero,
.hub-strip,
.route-list{
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadowSm);
}
.box,
.card,
.related-box,
.cta-box,
.result-card,
.og-hero,
.interpret,
.og-nextsteps-related,
.hub-hero,
.hub-strip,
.route-list{ padding: 18px; }

.card-grid{ gap: 18px; }
.card,
.og-card{
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.card:hover,
.og-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadowMd);
  border-color: var(--borderStrong);
}

.button,
a.btn.btn-secondary,
button.btn.btn-secondary,
.og-secondary,
.og-chip{
  background: #ffffff;
  border: 1px solid var(--borderStrong);
  color: var(--text);
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(15,23,42,0.04);
}
.button,
.og-primary,
.og-secondary,
a.btn,
button.btn{
  font-weight: 700;
}
.og-primary,
a.btn.btn-primary,
button.btn.btn-primary,
a.btn,
button.btn{
  background: linear-gradient(135deg, var(--brand), #1f3d80);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 10px 22px rgba(20,42,92,0.18);
}
.button:hover,
.og-secondary:hover,
.og-chip:hover{ background:#fff; }
.og-primary:hover,
a.btn.btn-primary:hover,
button.btn.btn-primary:hover,
a.btn:hover,
button.btn:hover{ opacity: 0.97; filter: brightness(1.02); }

.eyebrow,
.og-pill,
.badge{
  color: var(--brand);
}
.eyebrow{ font-weight: 700; letter-spacing:0.12em; }
.og-pill,
.badge{
  background: rgba(20,42,92,0.05);
  border-color: rgba(20,42,92,0.10);
}
.badge.safe{ background:#ecfdf5; }
.badge.borderline{ background:#fffbeb; }
.badge.risky{ background:#fef2f2; }

hr{
  border-top: 1px solid rgba(200,212,229,0.95);
  margin: 24px 0;
}

table,
.og-table{
  background:#fff;
  border:1px solid var(--border);
  border-radius: 16px;
  overflow:hidden;
  box-shadow: var(--shadowSm);
}
th{ background:#f7faff; }

.home-hero{
  padding: 20px 0 14px;
}
body.home .container{ max-width: 1040px; }
body.home .home-hero{
  position: relative;
  padding: 30px;
  border-radius: 28px;
  background:
    radial-gradient(circle at top right, rgba(126,224,207,0.14), transparent 26%),
    linear-gradient(135deg, rgba(20,42,92,0.98), rgba(34,66,132,0.96));
  color:#fff;
  box-shadow: 0 22px 46px rgba(20,42,92,0.20);
}
body.home .home-hero p,
body.home .home-hero .lead,
body.home .home-hero .eyebrow,
body.home .home-hero a{ color: rgba(255,255,255,0.94); }
body.home .home-hero .eyebrow{ opacity:0.86; }
body.home .home-hero .button{
  background: rgba(255,255,255,0.10);
  color:#fff;
  border-color: rgba(255,255,255,0.15);
  box-shadow:none;
}
body.home .home-hero .button:hover{ background: rgba(255,255,255,0.16); }
body.home .box{ background: #ffffff; }

.hub-hero{
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(249,251,255,0.98));
}
.hub-hero h1,
.hub-hero p,
.hub-hero .lead,
.hub-hero .eyebrow{ max-width: 760px; }
.hub-hero .btn-row{ margin-top: 12px; }
.hub-hero .btn-row .button{ margin-right: 8px; }
.hub-strip{
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.hub-stat-title{ font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; }
.hub-stat-value{ margin-top: 6px; font-size: 16px; font-weight: 800; color: var(--text); line-height: 1.35; }
.route-list{ padding: 0; overflow: hidden; }
.route-list h3{ margin: 0; padding: 18px 18px 0; }
.route-list p{ margin: 8px 18px 0; color: var(--muted); }
.route-list ul,
.route-list ol{ margin: 12px 18px 18px; }
.route-list li{ margin: 8px 0; }
.route-list .button,
.route-list .og-chip{ margin: 0 18px 18px; }
.section-intro{ color: var(--muted); margin-top: -4px; }
.split-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:18px; margin: 18px 0; }
.link-columns{ columns: 2; column-gap: 28px; }
.link-columns li{ break-inside: avoid; }
.compact-links{ display:flex; flex-wrap:wrap; gap:8px 14px; }
.compact-links a{ white-space: nowrap; }

.route-list--structured p:last-of-type{ margin-bottom: 0; }
.route-buckets{ display:grid; gap:12px; margin: 14px 18px 18px; }
.route-bucket{ padding:14px 16px; border:1px solid var(--border); border-radius: 14px; background:#fff; box-shadow: var(--shadowSm); }
.route-bucket h4{ margin:0 0 8px; font-size: 15px; color: var(--text); }
.route-bucket ul{ margin:0; padding-left: 18px; }
.route-bucket li{ margin: 6px 0; }

.footer{
  border-top: 1px solid rgba(200,212,229,0.9);
  color: var(--muted);
}
.footer-links a{ color: var(--link); }
.footer-cluster{
  border-color: var(--border);
  background: #ffffff;
}

@media (max-width: 900px){
  .site-header .nav{ gap: 8px; }
  .site-brand span{ max-width: 140px; overflow:hidden; text-overflow:ellipsis; }
  .hub-strip{ grid-template-columns: 1fr; }
}
@media (max-width: 760px){
  .container{ padding: 22px 16px 56px; }
  .site-header .container{ padding-top: 10px; padding-bottom: 10px; }
  .site-header .nav a{ padding: 7px 10px; }
  body.home .home-hero,
  .hub-hero{ padding: 22px 18px; border-radius: 22px; }
  .box, .card, .related-box, .cta-box, .result-card, .og-hero, .interpret, .og-nextsteps-related, .route-list, .hub-strip{ padding: 16px; }
  .split-grid{ grid-template-columns: 1fr; }
  .link-columns{ columns: 1; }
}

/* =========================
   Nav Topics Dropdown (v0210.2 — CSS-only, no JS required)
========================= */

.nav-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.nav-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: none;
  color: #334155;
  font-size: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.nav-dropdown-trigger:hover,
.nav-dropdown-trigger:focus {
  color: #0f172a;
  background: rgba(20,42,92,0.04);
  border-color: rgba(200,212,229,0.95);
  outline: none;
}
.nav-dropdown-arrow {
  font-size: 10px;
  opacity: 0.6;
}

.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  padding-top: 6px;
  left: 0;
  min-width: 160px;
  background: #ffffff;
  border: 1px solid rgba(200,212,229,0.9);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(15,23,42,0.10);
  padding: 6px;
  z-index: 200;
  flex-direction: column;
}

/* Open on hover (desktop) or when trigger/menu has focus (click + keyboard) */
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.hover-open .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  display: flex;
}

.nav-dropdown-menu a {
  display: block;
  padding: 8px 12px;
  border-radius: 8px;
  color: #334155;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: background 0.1s ease;
  white-space: nowrap;
}
.nav-dropdown-menu a:hover {
  background: rgba(20,42,92,0.05);
  color: #0f172a;
}
.nav-dropdown-menu a.active,
.nav-dropdown-menu a[data-nav].active {
  background: rgba(20,42,92,0.07);
  color: #0f172a;
  font-weight: 600;
}

@media (max-width: 760px) {
  .nav-dropdown-menu {
    position: fixed;
    top: auto;
    left: 8px;
    right: 8px;
    width: auto;
    min-width: unset;
  }
}