/* cambioadolar.com — sits on top of smbs_base's Bootstrap 5. Tokens first,
   dark mode redefines them; components only reference tokens. */
:root {
  color-scheme: light;
  --cad-bg: #f6f7f5;
  --cad-surface: #ffffff;
  --cad-surface-2: #eef2ee;
  --cad-border: #dfe4df;
  --cad-text: #12201a;
  --cad-text-2: #4a5852;
  --cad-muted: #6b7872;
  --cad-brand: #0b6b43;
  --cad-brand-strong: #08552f;
  --cad-brand-soft: #e3f3ea;
  --cad-accent: #c98a00;
  --cad-up: #0b7a3e;
  --cad-down: #c0392b;
  --cad-series: #2a78d6;
  --cad-grid: #e6e9e6;
  --cad-shadow: 0 1px 2px rgba(16, 32, 26, .06), 0 4px 16px rgba(16, 32, 26, .05);
  --cad-radius: 14px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --cad-bg: #0f1412;
    --cad-surface: #171e1b;
    --cad-surface-2: #1f2824;
    --cad-border: #2b3631;
    --cad-text: #edf2ef;
    --cad-text-2: #b9c6bf;
    --cad-muted: #93a19a;
    --cad-brand: #3fbf7f;
    --cad-brand-strong: #6fd6a0;
    --cad-brand-soft: #173326;
    --cad-accent: #e3a92b;
    --cad-up: #4cc985;
    --cad-down: #f07a6d;
    --cad-series: #3987e5;
    --cad-grid: #26302c;
    --cad-shadow: 0 1px 2px rgba(0, 0, 0, .3);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --cad-bg: #0f1412;
  --cad-surface: #171e1b;
  --cad-surface-2: #1f2824;
  --cad-border: #2b3631;
  --cad-text: #edf2ef;
  --cad-text-2: #b9c6bf;
  --cad-muted: #93a19a;
  --cad-brand: #3fbf7f;
  --cad-brand-strong: #6fd6a0;
  --cad-brand-soft: #173326;
  --cad-accent: #e3a92b;
  --cad-up: #4cc985;
  --cad-down: #f07a6d;
  --cad-series: #3987e5;
  --cad-grid: #26302c;
  --cad-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}

/* Bootstrap 5.3 reads these, so every stock component (pagination,
   form-check, dropdowns, focus rings, btn-close) follows the brand in both
   color schemes without per-component overrides. */
:root, [data-bs-theme] {
  --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --bs-body-bg: var(--cad-bg);
  --bs-body-color: var(--cad-text);
  --bs-secondary-color: var(--cad-text-2);
  --bs-tertiary-bg: var(--cad-surface-2);
  --bs-border-color: var(--cad-border);
  --bs-emphasis-color: var(--cad-text);
  --bs-primary: var(--cad-brand);
  --bs-primary-rgb: 11, 107, 67;
  --bs-link-color: var(--cad-brand);
  --bs-link-color-rgb: 11, 107, 67;
  --bs-link-hover-color: var(--cad-brand-strong);
  --bs-link-hover-color-rgb: 8, 85, 47;
  --bs-focus-ring-color: color-mix(in srgb, var(--cad-brand) 28%, transparent);
  --bs-border-radius: .6rem;
  --bs-border-radius-sm: .45rem;
  --bs-border-radius-lg: .8rem;
  --bs-pagination-active-bg: var(--cad-brand);
}
[data-bs-theme="dark"] {
  --bs-primary-rgb: 63, 191, 127;
  --bs-link-color-rgb: 63, 191, 127;
  --bs-link-hover-color-rgb: 111, 214, 160;
}

body {
  background: var(--cad-bg);
  color: var(--cad-text);
  font-family: var(--bs-body-font-family);
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, .h1, .h2, .h3, .h4, .h5 { letter-spacing: -.015em; }
.btn { font-weight: 600; }
a { color: var(--cad-brand); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--cad-brand-strong); }
/* Underline only where links sit inside running text; cards, lists and
   nav are already clearly interactive. */
.cad-card a, .link-grid a, .cad-footer a, .casa-card a, .rate-hero a, .cad-breadcrumb a, .section-link { text-decoration: none; }
.cad-card a:hover, .cad-footer a:hover, .rate-hero a:hover, .section-link:hover { text-decoration: underline; }
.lead a { font-weight: 600; }
.bi { line-height: 1; vertical-align: -.125em; }
.pagination { --bs-pagination-active-bg: var(--cad-brand); --bs-pagination-active-border-color: var(--cad-brand);
  --bs-pagination-color: var(--cad-brand); --bs-pagination-bg: var(--cad-surface); --bs-pagination-border-color: var(--cad-border); }
.form-check-input:checked { background-color: var(--cad-brand); border-color: var(--cad-brand); }
.visually-hidden-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.text-muted, .form-text { color: var(--cad-muted) !important; }
.tabular { font-variant-numeric: tabular-nums; }

/* Bootstrap bridges so forms/tables follow the tokens in dark mode */
.form-control, .form-select {
  background-color: var(--cad-surface); color: var(--cad-text); border-color: var(--cad-border);
}
.form-control:focus, .form-select:focus {
  background-color: var(--cad-surface); color: var(--cad-text);
  border-color: var(--cad-brand); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--cad-brand) 25%, transparent);
}
.form-control::placeholder { color: var(--cad-muted); }
.table { --bs-table-bg: transparent; --bs-table-color: var(--cad-text); border-color: var(--cad-border); }
.btn-primary {
  --bs-btn-bg: var(--cad-brand); --bs-btn-border-color: var(--cad-brand);
  --bs-btn-hover-bg: var(--cad-brand-strong); --bs-btn-hover-border-color: var(--cad-brand-strong);
  --bs-btn-active-bg: var(--cad-brand-strong); --bs-btn-color: #fff; --bs-btn-hover-color: #fff;
}
:root[data-theme="dark"] .btn-primary { --bs-btn-color: #06140d; --bs-btn-hover-color: #06140d; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn-primary { --bs-btn-color: #06140d; --bs-btn-hover-color: #06140d; }
}
.btn-outline-primary {
  --bs-btn-color: var(--cad-brand); --bs-btn-border-color: var(--cad-brand);
  --bs-btn-hover-bg: var(--cad-brand); --bs-btn-hover-border-color: var(--cad-brand);
}
.alert { border-radius: 10px; }

/* Header */
.cad-header {
  background: var(--cad-surface); border-bottom: 1px solid var(--cad-border);
  position: sticky; top: 0; z-index: 1020;
}
.cad-header .navbar { padding: .55rem 0; }
.cad-brand {
  display: inline-flex; align-items: center; gap: .5rem; font-weight: 800; font-size: 1.2rem;
  color: var(--cad-text); text-decoration: none; letter-spacing: -.01em;
}
.cad-brand:hover { color: var(--cad-text); }
.cad-brand-mark {
  width: 32px; height: 32px; border-radius: 9px; background: var(--cad-brand); color: #fff;
  display: inline-grid; place-items: center; font-weight: 800; font-size: 1.05rem;
}
.cad-brand span em { font-style: normal; color: var(--cad-brand); }
.cad-header .nav-link { color: var(--cad-text-2); font-weight: 500; }
.cad-header .nav-link:hover, .cad-header .nav-link.active { color: var(--cad-brand); }
.cad-header .navbar-toggler { border-color: var(--cad-border); }
.cad-header .dropdown-menu {
  background: var(--cad-surface); border-color: var(--cad-border); box-shadow: var(--cad-shadow);
  max-height: 70vh; overflow-y: auto;
}
.cad-header .dropdown-item { color: var(--cad-text); }
.cad-header .dropdown-item:hover { background: var(--cad-surface-2); color: var(--cad-text); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .navbar-toggler-icon { filter: invert(1); }
}
:root[data-theme="dark"] .navbar-toggler-icon { filter: invert(1); }

/* Layout pieces */
.cad-main { padding: 1.5rem 0 2rem; }
.cad-hero { padding: 1.25rem 0 .5rem; }
.cad-hero h1 { font-weight: 800; letter-spacing: -.025em; font-size: clamp(1.8rem, 4.2vw, 2.75rem); line-height: 1.1; margin-bottom: .6rem; }
.cad-hero .lead { color: var(--cad-text-2); max-width: 44rem; font-size: clamp(1rem, 1.6vw, 1.15rem); line-height: 1.6; }
.cad-eyebrow { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 600; color: var(--cad-brand);
  background: var(--cad-brand-soft); border-radius: 999px; padding: .25rem .7rem; margin-bottom: .75rem; }
.cad-card {
  background: var(--cad-surface); border: 1px solid var(--cad-border); border-radius: var(--cad-radius);
  box-shadow: var(--cad-shadow); padding: 1.25rem;
}
.cad-card + .cad-card { margin-top: 1rem; }
.cad-section { margin-top: 2rem; }
.cad-section h2, .cad-card > h2 { font-size: 1.3rem; font-weight: 750; letter-spacing: -.01em; margin-bottom: .9rem; }
.cad-breadcrumb { font-size: .875rem; margin-bottom: .5rem; }
.cad-breadcrumb ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.cad-breadcrumb li + li::before { content: "›"; color: var(--cad-muted); margin-right: .35rem; }
.cad-breadcrumb a { color: var(--cad-text-2); text-decoration: none; }
.cad-breadcrumb li[aria-current] { color: var(--cad-muted); }

/* Headline rate */
.rate-hero {
  background: linear-gradient(135deg, var(--cad-brand-soft), var(--cad-surface) 70%);
  border: 1px solid var(--cad-border); border-radius: var(--cad-radius); padding: 1.5rem; box-shadow: var(--cad-shadow);
}
.rate-hero .rate-label { color: var(--cad-text-2); font-weight: 600; font-size: .95rem; }
.rate-hero .rate-value {
  font-size: clamp(2.4rem, 8vw, 3.8rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.rate-hero .rate-unit { font-size: 1.05rem; color: var(--cad-text-2); font-weight: 600; }
.rate-pair { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1rem; }
.rate-pair > div {
  flex: 1 1 140px; background: var(--cad-surface); border: 1px solid var(--cad-border); border-radius: 10px; padding: .7rem .9rem;
}
.rate-pair .k { font-size: .8rem; color: var(--cad-muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.rate-pair .v { font-size: 1.35rem; font-weight: 750; font-variant-numeric: tabular-nums; }
.rate-meta { font-size: .85rem; color: var(--cad-muted); margin-top: .75rem; }
.rate-change { font-size: .9rem; font-weight: 600; white-space: nowrap; }
.rate-change.up { color: var(--cad-up); }
.rate-change.down { color: var(--cad-down); }
.live-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--cad-up);
  margin-right: .35rem; vertical-align: middle; animation: cad-pulse 2s infinite;
}
@keyframes cad-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }
.flash { animation: cad-flash 1.2s ease-out; }
@keyframes cad-flash { from { background: color-mix(in srgb, var(--cad-accent) 30%, transparent); } to { background: transparent; } }

/* Country table */
.rates-table { margin: 0; }
.rates-table thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--cad-muted); font-weight: 600; border-bottom-width: 1px; }
.rates-table td { vertical-align: middle; padding-top: .7rem; padding-bottom: .7rem; }
.rates-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rates-table .country-link { color: var(--cad-text); text-decoration: none; font-weight: 600; }
.rates-table .country-link:hover { color: var(--cad-brand); }
.rates-table tr.is-mine { background: var(--cad-brand-soft); }
.flag { font-size: 1.25rem; margin-right: .35rem; }
@media (max-width: 575.98px) {
  .rates-table .hide-sm { display: none; }
}

/* Search */
.search-box {
  background: var(--cad-surface); border: 1px solid var(--cad-border); border-radius: var(--cad-radius);
  padding: 1rem; box-shadow: var(--cad-shadow);
}
.search-box .form-control { min-height: 48px; }
.search-box .btn { min-height: 48px; }
.my-country {
  display: none; border: 1px solid var(--cad-brand); background: var(--cad-brand-soft); border-radius: var(--cad-radius); padding: 1rem 1.25rem;
}
.my-country.show { display: block; }

/* Casa cards */
.casa-card {
  background: var(--cad-surface); border: 1px solid var(--cad-border); border-radius: var(--cad-radius);
  padding: 1rem 1.1rem; height: 100%; display: flex; flex-direction: column; gap: .5rem;
}
.casa-card h3 { font-size: 1.05rem; font-weight: 700; margin: 0; }
.casa-card h3 a { color: var(--cad-text); text-decoration: none; }
.casa-card h3 a:hover { color: var(--cad-brand); }
.casa-card .addr { font-size: .87rem; color: var(--cad-text-2); }
.casa-prices { display: flex; gap: .5rem; }
.casa-prices > div { flex: 1; background: var(--cad-surface-2); border-radius: 8px; padding: .45rem .6rem; }
.casa-prices .k { font-size: .72rem; color: var(--cad-muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.casa-prices .v { font-size: 1.15rem; font-weight: 750; font-variant-numeric: tabular-nums; }
.casa-logo { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; border: 1px solid var(--cad-border); }
.badge-soft {
  display: inline-block; font-size: .72rem; font-weight: 600; padding: .2rem .5rem; border-radius: 999px;
  background: var(--cad-surface-2); color: var(--cad-text-2);
}
.badge-soft.ok { background: var(--cad-brand-soft); color: var(--cad-brand-strong); }
.badge-soft.warn { background: color-mix(in srgb, var(--cad-accent) 18%, transparent); color: var(--cad-text); }
.badge-soft.closed { background: color-mix(in srgb, var(--cad-down) 14%, transparent); color: var(--cad-text); }

/* Chart (single series, see exchange/_history_chart.html) */
.viz { position: relative; }
.viz svg { display: block; width: 100%; height: auto; overflow: visible; }
.viz .grid line { stroke: var(--cad-grid); stroke-width: 1; }
.viz .axis text { fill: var(--cad-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.viz .series { fill: none; stroke: var(--cad-series); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.viz .area { fill: var(--cad-series); opacity: .08; }
.viz .end-dot { fill: var(--cad-series); stroke: var(--cad-surface); stroke-width: 2; }
.viz .end-label { fill: var(--cad-text); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.viz .crosshair { stroke: var(--cad-text-2); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0; }
.viz .hover-dot { fill: var(--cad-series); stroke: var(--cad-surface); stroke-width: 2; opacity: 0; }
.viz.hovering .crosshair, .viz.hovering .hover-dot { opacity: 1; }
.viz-tooltip {
  position: absolute; pointer-events: none; background: var(--cad-surface); color: var(--cad-text);
  border: 1px solid var(--cad-border); border-radius: 8px; padding: .35rem .55rem; font-size: .82rem;
  box-shadow: var(--cad-shadow); white-space: nowrap; opacity: 0; transform: translate(-50%, -110%);
}
.viz.hovering .viz-tooltip { opacity: 1; }
.viz-tooltip b { font-variant-numeric: tabular-nums; }

/* Converter */
.converter .input-group-text { background: var(--cad-surface-2); color: var(--cad-text-2); border-color: var(--cad-border); min-width: 4.2rem; justify-content: center; font-weight: 600; }
.converter .form-control { font-size: 1.2rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.swap-btn { border-radius: 999px; width: 40px; height: 40px; padding: 0; }

/* FAQ */
.faq details { border-bottom: 1px solid var(--cad-border); padding: .85rem 0; }
.faq details:last-child { border-bottom: 0; }
.faq summary { font-weight: 650; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--cad-muted); font-weight: 400; font-size: 1.2rem; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: .6rem 0 0; color: var(--cad-text-2); }

/* Link grids (internal linking for SEO) */
.link-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .35rem 1rem; padding: 0; list-style: none; margin: 0; }
.link-grid a { text-decoration: none; color: var(--cad-text-2); display: block; padding: .25rem 0; }
.link-grid a:hover { color: var(--cad-brand); }

/* Footer */
.cad-footer { background: var(--cad-surface); border-top: 1px solid var(--cad-border); margin-top: 3rem; padding: 2rem 0 1.5rem; font-size: .9rem; }
.cad-footer h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--cad-muted); font-weight: 700; margin-bottom: .75rem; }
.cad-footer .disclaimer { color: var(--cad-muted); font-size: .8rem; margin-top: 1.5rem; }

/* Owner area */
.step-pill { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--cad-brand); color: #fff; font-weight: 700; font-size: .9rem; }
.map-picker { height: 300px; border-radius: 10px; border: 1px solid var(--cad-border); }
.map-embed { width: 100%; height: 280px; border: 0; border-radius: 10px; }
.hours-table td { vertical-align: middle; }

/* Country cell: name with the currency underneath (replaces a separate column) */
.country-cell { display: flex; align-items: center; gap: .65rem; }
.country-cell .flag { font-size: 1.5rem; margin: 0; line-height: 1; }
.country-cell small { display: block; color: var(--cad-muted); font-size: .8rem; font-weight: 400; }
.rates-table tbody tr { transition: background-color .15s ease; }
.rates-table tbody tr:hover { background: var(--cad-surface-2); }
.market-list { color: var(--cad-text-2); line-height: 1.5; }
.market-list strong { color: var(--cad-text); }

/* Filter chips (ordering) — scroll sideways on phones instead of wrapping */
.chip-row { display: flex; gap: .5rem; align-items: center; overflow-x: auto; padding-bottom: .25rem; scrollbar-width: none; }
.chip-row::-webkit-scrollbar { display: none; }
.chip { flex: 0 0 auto; border: 1px solid var(--cad-border); background: var(--cad-surface); color: var(--cad-text-2);
  border-radius: 999px; padding: .4rem .9rem; font-size: .875rem; font-weight: 500; text-decoration: none; white-space: nowrap; }
.chip:hover { border-color: var(--cad-brand); color: var(--cad-brand); }
.chip.active { background: var(--cad-brand); border-color: var(--cad-brand); color: #fff; }
[data-bs-theme="dark"] .chip.active { color: #06140d; }

/* Country pills (directory link grids) */
.pill-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); grid-auto-rows: 1fr; gap: .5rem; list-style: none; padding: 0; margin: 0; }
.pill-grid a { height: 100%; display: flex; align-items: center; gap: .5rem; padding: .6rem .8rem; border: 1px solid var(--cad-border); border-radius: 10px;
  background: var(--cad-surface); color: var(--cad-text); text-decoration: none; font-weight: 500; transition: border-color .15s, transform .15s; }
.pill-grid a:hover { border-color: var(--cad-brand); color: var(--cad-brand); transform: translateY(-1px); }
.pill-grid .flag { margin: 0; }

/* Cards lift slightly on hover where the whole card is a destination */
.casa-card { transition: border-color .15s ease, box-shadow .15s ease; }
.casa-card:hover { border-color: color-mix(in srgb, var(--cad-brand) 45%, var(--cad-border)); box-shadow: var(--cad-shadow); }
.icon-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.icon-list li { display: flex; gap: .6rem; align-items: center; }
.icon-list .bi { color: var(--cad-brand); font-size: 1.05rem; width: 1.2rem; text-align: center; }

/* Auth pages (login / signup) */
.auth-wrap { max-width: 480px; margin: 1.5rem auto 0; }
.auth-wrap.wide { max-width: 640px; }
.auth-card { background: var(--cad-surface); border: 1px solid var(--cad-border); border-radius: 18px; box-shadow: var(--cad-shadow); padding: 2rem; }
.auth-card h1 { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; margin-bottom: .35rem; }
.auth-divider { display: flex; align-items: center; gap: .75rem; color: var(--cad-muted); font-size: .85rem; margin: 1.25rem 0; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--cad-border); }
.btn-google { display: flex; align-items: center; justify-content: center; gap: .6rem; width: 100%; min-height: 46px; font-weight: 600;
  background: var(--cad-surface); color: var(--cad-text); border: 1px solid var(--cad-border); border-radius: .6rem; text-decoration: none; }
.btn-google:hover { background: var(--cad-surface-2); color: var(--cad-text); }
.auth-card .form-control { min-height: 46px; }
.auth-card label { font-weight: 600; font-size: .9rem; margin-bottom: .35rem; }
.auth-benefits { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .4rem; font-size: .9rem; color: var(--cad-text-2); }
.auth-benefits .bi { color: var(--cad-brand); margin-right: .4rem; }

/* smbs_base cookie banner, restyled to the brand (markup overridden in templates/smbs_base/cookie_consent.html) */
.smbs-cookie-consent { background: var(--cad-surface); color: var(--cad-text); border-top: 1px solid var(--cad-border);
  box-shadow: 0 -8px 24px rgba(16, 32, 26, .08); font-family: var(--bs-body-font-family); }
.smbs-cookie-consent__text { color: var(--cad-text-2); font-size: .88rem; }
.smbs-cookie-consent__btn { border-radius: .55rem !important; font-weight: 600; padding: .45rem 1.1rem !important; }
.smbs-cookie-consent__btn--decline { background: transparent !important; border-color: var(--cad-border) !important; color: var(--cad-text) !important; }
.smbs-cookie-consent__btn--accept { background: var(--cad-brand) !important; border-color: var(--cad-brand) !important; color: #fff !important; }
[data-bs-theme="dark"] .smbs-cookie-consent__btn--accept { color: #06140d !important; }

/* Guides (smbs_blog) */
.guide-card { display: flex; flex-direction: column; height: 100%; background: var(--cad-surface); border: 1px solid var(--cad-border);
  border-radius: var(--cad-radius); box-shadow: var(--cad-shadow); overflow: hidden; color: var(--cad-text); text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.guide-card:hover { border-color: var(--cad-brand); transform: translateY(-2px); color: var(--cad-text); }
.guide-cover { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; background: var(--cad-surface-2); }
.guide-cover-empty { display: grid; place-items: center; font-size: 2.25rem; color: var(--cad-brand);
  background: linear-gradient(135deg, var(--cad-brand-soft), var(--cad-surface-2)); }
.guide-body { display: flex; flex-direction: column; flex: 1; padding: 1.1rem 1.25rem 1.25rem; }
.guide-date { font-size: .8rem; color: var(--cad-muted); }
.guide-title { font-size: 1.15rem; font-weight: 750; letter-spacing: -.01em; line-height: 1.3; margin: .35rem 0 .5rem; }
.guide-excerpt { color: var(--cad-text-2); font-size: .95rem; line-height: 1.55; margin-bottom: 1rem; }
.guide-more { margin-top: auto; font-weight: 600; font-size: .9rem; color: var(--cad-brand); }
.guide-article { max-width: 46rem; margin: 0 auto; }
.guide-meta { font-size: .9rem; color: var(--cad-muted); border-top: 1px solid var(--cad-border); padding-top: .75rem; margin-top: 1rem; }
.guide-hero-img { margin: 1.25rem 0; }
.guide-hero-img img { width: 100%; height: auto; border-radius: var(--cad-radius); border: 1px solid var(--cad-border); }
.guide-content { font-size: 1.075rem; line-height: 1.75; color: var(--cad-text); margin-top: 1.25rem; overflow-wrap: anywhere; }
.guide-content h2 { font-size: 1.5rem; font-weight: 750; letter-spacing: -.015em; margin: 2rem 0 .75rem; }
.guide-content h3 { font-size: 1.2rem; font-weight: 700; margin: 1.5rem 0 .5rem; }
.guide-content p, .guide-content ul, .guide-content ol { margin-bottom: 1.1rem; }
.guide-content a { color: var(--cad-brand); text-underline-offset: 2px; }
.guide-content img { max-width: 100%; height: auto; border-radius: 10px; }
.guide-content blockquote { border-left: 3px solid var(--cad-brand); padding: .25rem 0 .25rem 1rem; color: var(--cad-text-2); }
.guide-content table { width: 100%; margin-bottom: 1.1rem; }
.guide-share { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; border-top: 1px solid var(--cad-border); margin-top: 2rem; padding-top: 1rem; }
.guide-share .list-inline { margin: 0; }
.guide-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; max-width: 46rem; margin-left: auto; margin-right: auto; }
.guide-share .smbs-social-icon { width: 36px; height: 36px; margin: 0; }
.guide-related { max-width: 46rem; margin-left: auto; margin-right: auto; }