/* ==========================================================================
   OrienHost design layer for WStyle (v2 · 2026-11-03)
   Loaded after the theme CSS. Previous version: orien_theme_backup_20261103.
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root,
[data-bs-theme="light"] {
  --oh-bg: #f4f6f8;
  --oh-bg-alt: #eaeef2;
  --oh-surface: #ffffff;
  --oh-surface-2: #f7f9fb;
  --oh-surface-3: #eef2f5;
  --oh-border: #dbe1e8;
  --oh-border-strong: #c3ccd6;
  --oh-text: #2a3340;
  --oh-heading: #0d1520;
  --oh-muted: #566273;
  --oh-faint: #728092;
  --oh-accent: #0c8478;
  --oh-accent-rgb: 12, 132, 120;
  --oh-accent-hover: #0a6f65;
  --oh-accent-soft: rgba(12, 132, 120, .09);
  --oh-accent-line: rgba(12, 132, 120, .32);
  --oh-accent-ink: #ffffff;
  --oh-accent-text: #0a6f65;
  --oh-sky: #0b6aa2;
  --oh-ok: #157a3c;
  --oh-ok-soft: rgba(21, 122, 60, .10);
  --oh-warn: #9a5b06;
  --oh-header-bg: rgba(255, 255, 255, .9);
  --oh-hero-tint: radial-gradient(1100px 420px at 85% -10%, rgba(12, 132, 120, .10), transparent 60%),
                  radial-gradient(800px 380px at -10% 0%, rgba(11, 106, 162, .07), transparent 60%);
  --oh-shadow-sm: 0 1px 2px rgba(15, 23, 34, .05);
  --oh-shadow: 0 1px 2px rgba(15, 23, 34, .05), 0 6px 18px rgba(15, 23, 34, .06);
  --oh-shadow-lg: 0 12px 36px rgba(15, 23, 34, .12);
  --oh-focus: 0 0 0 3px rgba(12, 132, 120, .28);
  --oh-radius-sm: 8px;
  --oh-radius: 12px;
  --oh-radius-lg: 16px;
  --oh-font: "Manrope", "Manrope Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --oh-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --oh-container: 1200px;
  color-scheme: light;
}

[data-bs-theme="dark"] {
  --oh-bg: #0b0f14;
  --oh-bg-alt: #0e1319;
  --oh-surface: #12181f;
  --oh-surface-2: #161d25;
  --oh-surface-3: #1b232c;
  --oh-border: #222b35;
  --oh-border-strong: #2e3945;
  --oh-text: #c6cfd9;
  --oh-heading: #f0f3f7;
  --oh-muted: #8d99a8;
  --oh-faint: #707c8b;
  --oh-accent: #2bc2b0;
  --oh-accent-rgb: 43, 194, 176;
  --oh-accent-hover: #4fd2c2;
  --oh-accent-soft: rgba(43, 194, 176, .10);
  --oh-accent-line: rgba(43, 194, 176, .38);
  --oh-accent-ink: #04201c;
  --oh-accent-text: #5fd6c8;
  --oh-sky: #6bbcf0;
  --oh-ok: #5ad08a;
  --oh-ok-soft: rgba(90, 208, 138, .10);
  --oh-warn: #f2b65a;
  --oh-header-bg: rgba(11, 15, 20, .88);
  --oh-hero-tint: radial-gradient(1100px 440px at 85% -10%, rgba(43, 194, 176, .09), transparent 60%),
                  radial-gradient(800px 380px at -10% 0%, rgba(107, 188, 240, .05), transparent 60%);
  --oh-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --oh-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 24px rgba(0, 0, 0, .25);
  --oh-shadow-lg: 0 16px 40px rgba(0, 0, 0, .45);
  --oh-focus: 0 0 0 3px rgba(43, 194, 176, .30);
  color-scheme: dark;
}

/* Map design tokens onto the theme + Bootstrap variables */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
  --wstyle-primary: var(--oh-accent);
  --wstyle-primary-rgb: var(--oh-accent-rgb);
  --wstyle-secondary: var(--oh-sky);
  --wstyle-font-family: var(--oh-font);
  --wstyle-font-size-base: 1rem;
  --wstyle-body-color: var(--oh-text);
  --wstyle-heading-color: var(--oh-heading);
  --wstyle-muted-color: var(--oh-muted);
  --wstyle-body-bg: var(--oh-bg);
  --wstyle-surface-bg: var(--oh-surface);
  --wstyle-border-color: var(--oh-border);
  --wstyle-chrome-bg: var(--oh-bg);
  --wstyle-chrome-bg-deep: var(--oh-bg-alt);
  --wstyle-chrome-color: var(--oh-heading);
  --wstyle-chrome-muted: var(--oh-muted);
  --wstyle-chrome-border: var(--oh-border);
  --wstyle-radius: var(--oh-radius);
  --wstyle-primary-hover: var(--oh-accent-hover);
  --wstyle-primary-active: var(--oh-accent-hover);
  --wstyle-primary-subtle: var(--oh-accent-soft);
  --wstyle-primary-emphasis: var(--oh-accent-text);
  --wstyle-primary-text: var(--oh-accent-text);
  --wstyle-on-primary: var(--oh-accent-ink);
  --wstyle-focus-ring: var(--oh-focus);
  --wstyle-shadow-sm: var(--oh-shadow-sm);
  --wstyle-shadow: var(--oh-shadow);
  --wstyle-shadow-lg: var(--oh-shadow-lg);

  --bs-body-font-family: var(--oh-font);
  --bs-body-font-size: 1rem;
  --bs-body-line-height: 1.6;
  --bs-body-bg: var(--oh-bg);
  --bs-body-color: var(--oh-text);
  --bs-emphasis-color: var(--oh-heading);
  --bs-heading-color: var(--oh-heading);
  --bs-secondary-color: var(--oh-muted);
  --bs-tertiary-color: var(--oh-faint);
  --bs-secondary-bg: var(--oh-surface-2);
  --bs-tertiary-bg: var(--oh-surface-3);
  --bs-border-color: var(--oh-border);
  --bs-border-color-translucent: var(--oh-border);
  --bs-link-color: var(--oh-accent-text);
  --bs-link-color-rgb: var(--oh-accent-rgb);
  --bs-link-hover-color: var(--oh-accent-hover);
  --bs-primary: var(--oh-accent);
  --bs-primary-rgb: var(--oh-accent-rgb);
  --bs-primary-text-emphasis: var(--oh-accent-text);
  --bs-primary-bg-subtle: var(--oh-accent-soft);
  --bs-primary-border-subtle: var(--oh-accent-line);
  --bs-success-text-emphasis: var(--oh-ok);
  --bs-success-bg-subtle: var(--oh-ok-soft);
  --bs-secondary-bg-subtle: var(--oh-surface-3);
  --bs-secondary-text-emphasis: var(--oh-muted);
  --bs-border-radius: var(--oh-radius-sm);
  --bs-border-radius-lg: var(--oh-radius);
  --bs-card-bg: var(--oh-surface);
  --bs-focus-ring-color: rgba(var(--oh-accent-rgb), .3);
}

/* ---------- 2. Base & typography ---------------------------------------- */
html { scroll-padding-top: 88px; }
body {
  background: var(--oh-bg) !important;
  color: var(--oh-text);
  font-family: var(--oh-font);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--oh-heading);
  font-family: var(--oh-font);
  font-weight: 700;
  letter-spacing: -.018em;
  line-height: 1.2;
}
h1, .h1 { font-size: clamp(2rem, 1.3rem + 2.4vw, 3.1rem); letter-spacing: -.028em; }
h2, .h2 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.25rem); letter-spacing: -.024em; }
h3, .h3 { font-size: clamp(1.3rem, 1.1rem + .7vw, 1.6rem); }
h4, .h4 { font-size: 1.2rem; }
h5, .h5 { font-size: 1.05rem; }
p { color: inherit; }
a { color: var(--oh-accent-text); text-underline-offset: 3px; }
a:hover { color: var(--oh-accent-hover); }
.text-body-secondary, .text-muted { color: var(--oh-muted) !important; }
.fs-8 { font-size: .8125rem !important; }
.fs-7 { font-size: .875rem !important; }
::selection { background: rgba(var(--oh-accent-rgb), .25); }
:focus-visible { outline: none; box-shadow: var(--oh-focus) !important; border-radius: 6px; }
.container { max-width: var(--oh-container); padding-inline: 20px; }
@media (max-width: 575.98px) { .container { padding-inline: 16px; } }
.tracking-tight { letter-spacing: -.024em; }
.num-tabular { font-variant-numeric: tabular-nums; }
hr { border-color: var(--oh-border); opacity: 1; }

/* Old decorative layers are retired */
.oh-3d-bg, body.oh-has-3d canvas, .hero-media video, .band-bg, .page-hero-media,
.page-hero-scrim, .auth-stage-video, .auth-stage-scrim { display: none !important; }

/* Section rhythm */
main > section, main > div > section { position: relative; }
.py-5 { padding-top: clamp(3rem, 2rem + 3vw, 5rem) !important; padding-bottom: clamp(3rem, 2rem + 3vw, 5rem) !important; }
.section-head { max-width: 720px; margin: 0 auto 2.5rem; text-align: center; }
.section-head-start { margin-inline: 0; text-align: start; }
.section-head h2 { margin-bottom: .6rem; }
.section-lead, .section-head p { color: var(--oh-muted); font-size: 1.05rem; line-height: 1.65; margin: 0; }
.eyebrow, .oh-kicker, .hero-eyebrow, .newsletter-kicker {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .78rem !important; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--oh-accent-text) !important; background: none !important; border: 0 !important;
  padding: 0 !important; margin-bottom: .75rem;
}
.eyebrow::before, .oh-kicker::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: currentColor; opacity: .7; }

/* Surfaces alternate for a calm rhythm */
.bg-surface { background: var(--oh-surface) !important; }
.band-dark, .chrome-dark:not(.site-header):not(.topbar) { background: transparent !important; }

/* ---------- 3. Buttons --------------------------------------------------- */
.btn {
  --bs-btn-font-weight: 650;
  --bs-btn-border-radius: 10px;
  --bs-btn-padding-y: .62rem;
  --bs-btn-padding-x: 1.15rem;
  --bs-btn-font-size: .95rem;
  letter-spacing: -.005em;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
  box-shadow: none;
}
.btn-lg { --bs-btn-padding-y: .8rem; --bs-btn-padding-x: 1.45rem; --bs-btn-font-size: 1rem; --bs-btn-border-radius: 11px; }
.btn-sm { --bs-btn-padding-y: .4rem; --bs-btn-padding-x: .8rem; --bs-btn-font-size: .85rem; --bs-btn-border-radius: 8px; }
.btn-primary {
  --bs-btn-bg: var(--oh-accent); --bs-btn-border-color: var(--oh-accent); --bs-btn-color: var(--oh-accent-ink);
  --bs-btn-hover-bg: var(--oh-accent-hover); --bs-btn-hover-border-color: var(--oh-accent-hover); --bs-btn-hover-color: var(--oh-accent-ink);
  --bs-btn-active-bg: var(--oh-accent-hover); --bs-btn-active-border-color: var(--oh-accent-hover); --bs-btn-active-color: var(--oh-accent-ink);
  --bs-btn-disabled-bg: var(--oh-accent); --bs-btn-disabled-border-color: var(--oh-accent); --bs-btn-disabled-color: var(--oh-accent-ink);
  background-image: none !important;
}
.btn-light, .btn-soft, .btn-secondary, .btn-outline-secondary, .btn-outline-oh, .btn-outline-primary, .btn-ghost {
  --bs-btn-bg: var(--oh-surface); --bs-btn-color: var(--oh-heading); --bs-btn-border-color: var(--oh-border-strong);
  --bs-btn-hover-bg: var(--oh-surface-2); --bs-btn-hover-color: var(--oh-heading); --bs-btn-hover-border-color: var(--oh-accent-line);
  --bs-btn-active-bg: var(--oh-surface-3); --bs-btn-active-color: var(--oh-heading); --bs-btn-active-border-color: var(--oh-accent-line);
  background-image: none !important;
}
.btn-ghost { --bs-btn-bg: transparent; --bs-btn-border-color: transparent; }
.btn-link { --bs-btn-color: var(--oh-accent-text); --bs-btn-hover-color: var(--oh-accent-hover); }
.link-arrow { color: var(--oh-accent-text); font-weight: 650; text-decoration: none; }
.link-arrow:hover { color: var(--oh-accent-hover); text-decoration: underline; }
.scroll-top {
  width: 44px; height: 44px; border-radius: 12px !important; box-shadow: var(--oh-shadow) !important;
  --bs-btn-bg: var(--oh-surface); --bs-btn-color: var(--oh-heading); --bs-btn-border-color: var(--oh-border);
  --bs-btn-hover-bg: var(--oh-surface-2); --bs-btn-hover-color: var(--oh-heading);
}

/* ---------- 4. Forms ----------------------------------------------------- */
.form-control, .form-select, .input-group-text {
  background-color: var(--oh-surface) !important;
  border: 1px solid var(--oh-border-strong) !important;
  color: var(--oh-heading) !important;
  border-radius: 10px;
  min-height: 46px;
  font-size: .975rem;
  box-shadow: none;
}
.input-group-text { color: var(--oh-muted) !important; background: var(--oh-surface-2) !important; }
textarea.form-control { min-height: 120px; }
.form-control::placeholder { color: var(--oh-faint); opacity: 1; }
.form-control:focus, .form-select:focus { border-color: var(--oh-accent) !important; box-shadow: var(--oh-focus) !important; }
.form-label, label { color: var(--oh-heading); font-weight: 600; font-size: .9rem; }
.form-text { color: var(--oh-muted); }
.form-check-input { background-color: var(--oh-surface); border-color: var(--oh-border-strong); }
.form-check-input:checked { background-color: var(--oh-accent); border-color: var(--oh-accent); }
.form-check-input:focus { box-shadow: var(--oh-focus); border-color: var(--oh-accent); }
.alert { border-radius: var(--oh-radius); border-width: 1px; }

/* ---------- 5. Cards, tables, badges ------------------------------------ */
.card {
  --bs-card-bg: var(--oh-surface);
  --bs-card-border-color: var(--oh-border);
  --bs-card-border-radius: var(--oh-radius);
  --bs-card-inner-border-radius: calc(var(--oh-radius) - 1px);
  background: var(--oh-surface);
  border-color: var(--oh-border);
  color: var(--oh-text);
  box-shadow: var(--oh-shadow-sm);
}
.hover-lift { transition: border-color .15s ease, box-shadow .15s ease; }
.hover-lift:hover { transform: none !important; border-color: var(--oh-accent-line) !important; box-shadow: var(--oh-shadow) !important; }
.table { --bs-table-bg: transparent; --bs-table-color: var(--oh-text); --bs-table-border-color: var(--oh-border); --bs-table-striped-bg: var(--oh-surface-2); --bs-table-hover-bg: var(--oh-surface-2); }
.table > :not(caption) > * > * { padding: .7rem .85rem; }
.table thead th { color: var(--oh-muted); font-weight: 650; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; }
.badge { font-weight: 650; border-radius: 6px; padding: .32em .55em; }
.dropdown-menu {
  --bs-dropdown-bg: var(--oh-surface);
  --bs-dropdown-border-color: var(--oh-border);
  --bs-dropdown-color: var(--oh-text);
  --bs-dropdown-link-color: var(--oh-heading);
  --bs-dropdown-link-hover-bg: var(--oh-surface-2);
  --bs-dropdown-link-hover-color: var(--oh-heading);
  --bs-dropdown-link-active-bg: var(--oh-accent-soft);
  --bs-dropdown-link-active-color: var(--oh-accent-text);
  --bs-dropdown-border-radius: var(--oh-radius);
  background: var(--oh-surface) !important;
  border: 1px solid var(--oh-border) !important;
  box-shadow: var(--oh-shadow-lg) !important;
  color: var(--oh-text);
  padding: .5rem;
}
.dropdown-item { border-radius: 8px; padding: .55rem .7rem; color: var(--oh-heading); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--oh-surface-2); color: var(--oh-heading); }
.icon-disc {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 34px; width: 34px; height: 34px;
  border-radius: 9px; background: var(--oh-accent-soft) !important; color: var(--oh-accent-text) !important; border: 0 !important;
}
.item-title { color: var(--oh-heading); font-weight: 650; }
.item-desc { color: var(--oh-muted); font-size: .84rem; }
.modal-content { background: var(--oh-surface); border: 1px solid var(--oh-border); border-radius: var(--oh-radius-lg); color: var(--oh-text); }
.nav-pills .nav-link, .nav-tabs .nav-link { color: var(--oh-muted); font-weight: 650; }
.nav-pills .nav-link.active { background: var(--oh-accent-soft); color: var(--oh-accent-text); }

/* ---------- 6. Header & navigation -------------------------------------- */
.topbar { display: none !important; }
.site-header,
.chrome-overlay .site-header.chrome-dark,
.site-header.chrome-dark,
.site-header.is-scrolled {
  position: sticky !important; top: 0; z-index: 1030;
  background: var(--oh-header-bg) !important;
  -webkit-backdrop-filter: saturate(160%) blur(12px); backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--oh-border) !important;
  box-shadow: none !important;
  color: var(--oh-heading);
}
.site-header > nav.container { min-height: 68px; padding-top: .5rem !important; padding-bottom: .5rem !important; gap: .5rem; }
.site-brand { margin-inline-end: 1.75rem !important; }
.site-logo { height: 34px !important; width: auto !important; max-height: 32px; }
.site-header .site-logo-light, .site-header .site-logo-dark, .site-header .site-logo-ink { display: none !important; }
[data-bs-theme="dark"] .site-header .site-logo-dark { display: inline-block !important; }
[data-bs-theme="light"] .site-header .site-logo-ink { display: inline-block !important; }
[data-bs-theme="light"] .site-header:not(:has(.site-logo-ink)) .site-logo-dark { display: inline-block !important; filter: brightness(.25) saturate(1.4); }

.site-nav { gap: .15rem; background: none !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; }
.site-nav .nav-link,
.chrome-dark .site-nav .nav-link {
  color: var(--oh-text) !important; font-weight: 600; font-size: .95rem;
  padding: .5rem .8rem !important; border-radius: 9px; background: none !important;
}
.site-nav .nav-link:hover, .site-nav .nav-link:focus-visible, .site-nav .show > .nav-link {
  color: var(--oh-heading) !important; background: var(--oh-surface-2) !important;
}
.site-nav .nav-link .badge, .site-nav .nav-link [class*="label"] { display: none !important; }
.nav-dropdown { min-width: 280px; }
.header-icon-btn,
.chrome-dark .header-icon-btn {
  width: 40px; height: 40px; padding: 0 !important; display: inline-flex !important; align-items: center; justify-content: center;
  border-radius: 10px !important; border: 1px solid var(--oh-border) !important; background: var(--oh-surface) !important;
  color: var(--oh-heading) !important; font-size: 1.05rem;
}
@media (min-width: 992px) { .site-header .drawer-toggle { display: none !important; } }
.header-icon-btn:hover { border-color: var(--oh-accent-line) !important; background: var(--oh-surface-2) !important; }
.site-header .d-flex.ms-auto { gap: .5rem !important; }
.cart-count { background: var(--oh-accent) !important; color: var(--oh-accent-ink) !important; }
.oh-theme-toggle .oh-ico-light, .oh-theme-toggle .oh-ico-dark { display: none; }
[data-bs-theme="dark"] .oh-theme-toggle .oh-ico-light { display: inline-block; }
[data-bs-theme="light"] .oh-theme-toggle .oh-ico-dark { display: inline-block; }
.header-locale .locale-toggle, .header-locale-btn {
  height: 40px; border-radius: 10px !important; border: 1px solid var(--oh-border) !important;
  background: var(--oh-surface) !important; color: var(--oh-heading) !important; font-weight: 650; font-size: .85rem;
  padding: 0 .75rem !important; display: inline-flex; align-items: center; gap: .3rem;
}
.oh-head-cta { white-space: nowrap; }
@media (max-width: 991.98px) { .oh-head-cta { display: none !important; } }
@media (max-width: 767.98px) { .header-locale { display: none !important; } }

/* Mega menu (markup rendered from the menu manager, classes .ohm-*) */
.dropdown-menu:has(.ohm), .nav-mega:has(.ohm) { padding: 0 !important; overflow: hidden; width: min(760px, 94vw) !important; min-width: 0 !important; left: 160px !important; right: auto !important; }
.oh-mega, .ohm { width: min(760px, 92vw); background: var(--oh-surface) !important; color: var(--oh-text) !important; border-radius: var(--oh-radius-lg); }
.ohm { display: grid; grid-template-columns: 1.55fr 1fr; }
.ohm-main { padding: 20px; }
.ohm-side { padding: 20px; background: var(--oh-surface-2); border-inline-start: 1px solid var(--oh-border); }
.ohm-label { font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--oh-faint); margin: 0 0 10px 4px; }
.ohm-item { display: flex; gap: 12px; align-items: flex-start; padding: 11px 12px; border-radius: 10px; text-decoration: none !important; color: var(--oh-heading) !important; }
.ohm-item:hover { background: var(--oh-surface-2); }
.ohm-side .ohm-item:hover { background: var(--oh-surface); }
.ohm-ico { flex: 0 0 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--oh-accent-soft); color: var(--oh-accent-text); font-size: 1.05rem; }
.ohm-t { display: block; font-weight: 700; font-size: .95rem; line-height: 1.3; }
.ohm-d { display: block; color: var(--oh-muted); font-size: .84rem; line-height: 1.45; margin-top: 2px; }
.ohm-p { margin-inline-start: auto; white-space: nowrap; font-size: .8rem; color: var(--oh-muted); align-self: center; }
.ohm-p b { color: var(--oh-heading); font-size: .9rem; }
.ohm-foot { margin-top: 10px; padding: 12px; border-top: 1px solid var(--oh-border); font-size: .8rem; color: var(--oh-muted); }
@media (max-width: 991.98px) { .ohm { grid-template-columns: 1fr; width: 100%; } .ohm-side { border-inline-start: 0; border-top: 1px solid var(--oh-border); } }

/* Mobile drawer */
.site-drawer, .site-drawer.offcanvas {
  background: var(--oh-surface) !important; color: var(--oh-text) !important; border-inline-start: 1px solid var(--oh-border) !important;
  width: min(380px, 92vw) !important;
}
.site-drawer .offcanvas-header { border-bottom: 1px solid var(--oh-border); min-height: 64px; }
.site-drawer .btn-close { filter: none; }
[data-bs-theme="dark"] .site-drawer .btn-close { filter: invert(1) grayscale(1) brightness(1.6); }
.drawer-nav { gap: 2px; }
.drawer-link {
  display: flex; align-items: center; gap: .6rem; min-height: 48px; padding: .7rem .85rem !important; border-radius: 10px;
  color: var(--oh-heading) !important; font-weight: 650; font-size: 1rem; text-decoration: none; background: none !important;
}
.drawer-link:hover, .drawer-link[aria-expanded="true"] { background: var(--oh-surface-2) !important; }
.site-drawer .dropdown-item, .site-drawer .drawer-sub a { min-height: 44px; display: flex; align-items: center; }
.offcanvas-backdrop.show { opacity: .5; background: #05080b; }
.oh-drawer-services { display: grid; gap: 8px; margin: 4px 0 16px; }
.oh-drawer-services a { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--oh-border); border-radius: 12px; text-decoration: none; color: var(--oh-heading); }
.oh-drawer-services a:hover { border-color: var(--oh-accent-line); }
.oh-drawer-services small { display: block; color: var(--oh-muted); font-size: .8rem; }
.oh-drawer-services b { display: block; font-size: .95rem; }
.oh-drawer-services .ohm-p { font-size: .78rem; white-space: nowrap; text-align: end; margin-inline-start: auto; }
.oh-drawer-services .ohm-p b { display: inline; font-size: .92rem; }
.drawer-link .badge, .drawer-nav .badge { display: none !important; }
@media (max-width: 767.98px) {
  section[data-billing] .nav-pills, section[data-billing] .nav-tabs, .rack-bar .nav { flex-wrap: wrap !important; overflow: visible; justify-content: center; }
  section[data-billing] .nav-link { padding: .5rem .7rem !important; font-size: .86rem; }
}

/* ---------- 7. Home hero ------------------------------------------------- */
.oh-hero { background: var(--oh-hero-tint), var(--oh-bg); border-bottom: 1px solid var(--oh-border); padding: clamp(2.75rem, 1.5rem + 4vw, 5.5rem) 0 clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.oh-hero-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(2rem, 1rem + 3vw, 4rem); align-items: center; }
.oh-hero-title { font-size: clamp(2.1rem, 1.2rem + 2.7vw, 3.2rem); line-height: 1.1; letter-spacing: -.03em; margin: 0 0 1.1rem; max-width: 19ch; text-wrap: balance; }
.oh-hero-title em { font-style: normal; color: var(--oh-accent-text); }
.oh-hero-lead { font-size: clamp(1.02rem, .95rem + .3vw, 1.15rem); color: var(--oh-muted); max-width: 54ch; margin: 0 0 1.75rem; }
.oh-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 2rem; }
.oh-facts { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem 1.5rem; max-width: 560px; }
.oh-facts li { display: flex; gap: .6rem; align-items: flex-start; font-size: .92rem; color: var(--oh-text); line-height: 1.45; }
.oh-facts i { color: var(--oh-accent-text); font-size: 1rem; margin-top: .1rem; }
.oh-facts b { color: var(--oh-heading); font-weight: 700; }

.oh-chooser { background: var(--oh-surface); border: 1px solid var(--oh-border); border-radius: var(--oh-radius-lg); box-shadow: var(--oh-shadow); overflow: hidden; }
.oh-chooser-head { padding: 18px 20px 14px; border-bottom: 1px solid var(--oh-border); }
.oh-chooser-head strong { display: block; color: var(--oh-heading); font-size: 1.02rem; }
.oh-chooser-head span { color: var(--oh-muted); font-size: .86rem; }
.oh-svc { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto 18px; gap: 14px; align-items: center; padding: 16px 20px; text-decoration: none !important; color: var(--oh-heading) !important; border-bottom: 1px solid var(--oh-border); transition: background-color .15s ease; }
.oh-svc:last-of-type { border-bottom: 0; }
.oh-svc:hover { background: var(--oh-surface-2); }
.oh-svc:hover .oh-svc-go { color: var(--oh-accent-text); transform: translateX(2px); }
.oh-svc-ico { width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--oh-accent-soft); color: var(--oh-accent-text); font-size: 1.2rem; }
.oh-svc-t { display: block; font-weight: 700; font-size: 1rem; }
.oh-svc-d { display: block; color: var(--oh-muted); font-size: .85rem; line-height: 1.4; margin-top: 2px; }
.oh-svc-price { text-align: end; line-height: 1.15; }
.oh-svc-price small { display: block; color: var(--oh-faint); font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.oh-svc-price b { font-size: 1.15rem; color: var(--oh-heading); font-variant-numeric: tabular-nums; }
.oh-svc-price span { color: var(--oh-muted); font-size: .8rem; }
.oh-svc-go { color: var(--oh-faint); transition: transform .15s ease, color .15s ease; }
.oh-chooser-foot { padding: 12px 20px; background: var(--oh-surface-2); border-top: 1px solid var(--oh-border); font-size: .8rem; color: var(--oh-muted); display: flex; gap: .5rem; align-items: flex-start; }
.oh-chooser-foot i { color: var(--oh-accent-text); }
@media (max-width: 991.98px) {
  .oh-hero-grid { grid-template-columns: 1fr; }
  .oh-hero-title { max-width: 18ch; }
}
@media (max-width: 575.98px) {
  .oh-facts { grid-template-columns: 1fr; }
  .oh-hero-actions .btn { flex: 1 1 100%; }
  .oh-svc { grid-template-columns: 40px minmax(0, 1fr) auto; padding: 14px 16px; gap: 12px; }
  .oh-svc-go { display: none; }
  .oh-svc-ico { width: 40px; height: 40px; }
}

/* ---------- 8. Page hero (service & content pages) ---------------------- */
.page-hero, .page-hero.chrome-dark {
  background: var(--oh-hero-tint), var(--oh-bg) !important; color: var(--oh-text) !important;
  border-bottom: 1px solid var(--oh-border); padding: clamp(2.25rem, 1.5rem + 2.5vw, 4rem) 0 clamp(2rem, 1.25rem + 2vw, 3.25rem) !important;
  min-height: 0 !important;
}
.chrome-overlay .page-hero, .page-hero { margin-top: 0 !important; }
.chrome-overlay .page-hero { padding-top: clamp(2.25rem, 1.5rem + 2.5vw, 4rem) !important; }
.page-hero-title { font-size: clamp(2rem, 1.3rem + 2.2vw, 2.9rem); color: var(--oh-heading) !important; margin-bottom: .6rem !important; }
.page-hero-lead { color: var(--oh-muted) !important; font-size: 1.08rem; max-width: 62ch; }
.breadcrumb { --bs-breadcrumb-divider-color: var(--oh-faint); --bs-breadcrumb-item-active-color: var(--oh-muted); font-size: .85rem; margin-bottom: 1rem; }
.breadcrumb a { color: var(--oh-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--oh-accent-text); }

/* ---------- 9. Domain band ---------------------------------------------- */
.domain-band { background: var(--oh-surface) !important; border-bottom: 1px solid var(--oh-border); }
.domain-band .section-head { margin-bottom: 1.5rem; }
.domain-search, .domain-band-search .input-group, .domain-band-search form > div:first-child {
  background: var(--oh-surface) !important; border: 1px solid var(--oh-border-strong) !important; border-radius: 14px !important;
  box-shadow: var(--oh-shadow-sm) !important; padding: 6px !important;
}
.domain-search .form-control, .domain-band-search .form-control { border: 0 !important; background: transparent !important; min-height: 48px; font-size: 1.02rem; box-shadow: none !important; }
.domain-search .btn { border-radius: 10px !important; min-height: 48px; padding-inline: 1.3rem; }
.tld-row { gap: 10px !important; }
.tld-tile {
  background: var(--oh-surface-2) !important; border: 1px solid var(--oh-border) !important; border-radius: 12px !important;
  box-shadow: none !important; padding: 12px 14px !important; color: var(--oh-heading) !important;
}
.tld-tile:hover { border-color: var(--oh-accent-line) !important; }
.tld-tile-head, .tld-tile-head * { color: var(--oh-heading) !important; font-weight: 750; }
.tld-price, .tld-tile-price { color: var(--oh-muted) !important; font-weight: 650; font-size: .88rem; }
.tld-logo { filter: none !important; max-height: 22px; }
.tld-tile-more { background: transparent !important; border-style: dashed !important; }

/* ---------- 10. Plans (home + service pages) ---------------------------- */
.plans-rack, .plans-rack.chrome-dark, section[data-billing] { background: var(--oh-bg) !important; background-image: none !important; color: var(--oh-text) !important; }
.plans-rack::before, .plans-rack::after, section[data-billing]::before, section[data-billing]::after { display: none !important; background: none !important; }
.rack-shell { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
.rack-shell::before, .rack-shell::after, .rack-bar::before, .rack-bar::after { display: none !important; }
.rack-bar { background: none !important; border: 0 !important; padding: 0 !important; margin-bottom: 1.5rem !important; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.plans-rack .nav, .rack-bar .nav, section[data-billing] .nav-pills, section[data-billing] .nav-tabs {
  background: var(--oh-surface) !important; border: 1px solid var(--oh-border) !important; border-radius: 12px; padding: 4px !important; gap: 2px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
}
section[data-billing] .nav-link {
  border: 0 !important; border-radius: 9px !important; color: var(--oh-muted) !important; font-weight: 650; font-size: .92rem;
  padding: .55rem .95rem !important; white-space: nowrap; background: none !important; box-shadow: none !important;
}
section[data-billing] .nav-link.active { background: var(--oh-accent-soft) !important; color: var(--oh-accent-text) !important; }
section[data-billing] .nav-link i { margin-inline-end: .35rem; }
.billing-toggle {
  display: inline-flex; background: var(--oh-surface) !important; border: 1px solid var(--oh-border) !important; border-radius: 12px !important; padding: 4px !important; gap: 2px; box-shadow: none !important;
}
.billing-option {
  border: 0 !important; background: none !important; color: var(--oh-muted) !important; font-weight: 650; font-size: .88rem;
  padding: .5rem .85rem !important; border-radius: 9px !important; white-space: nowrap; box-shadow: none !important; min-height: 36px;
}
.billing-option:hover { color: var(--oh-heading) !important; }
.billing-option.active, .billing-option[aria-pressed="true"] { background: var(--oh-heading) !important; color: var(--oh-bg) !important; }
.oh-cycle-note { font-size: .84rem; color: var(--oh-muted); margin: -0.5rem 0 1.5rem; text-align: center; }
.oh-cycle-note i { color: var(--oh-accent-text); }

.plan-grid { --bs-gutter-x: 1rem; --bs-gutter-y: 1rem; }
.plan-card, .plan-card.card {
  background: var(--oh-surface) !important; border: 1px solid var(--oh-border) !important; border-radius: var(--oh-radius-lg) !important;
  box-shadow: var(--oh-shadow-sm) !important; color: var(--oh-text) !important; overflow: visible; position: relative;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.plan-card:hover { border-color: var(--oh-border-strong) !important; box-shadow: var(--oh-shadow) !important; transform: none !important; }
.plan-card .card-body { padding: 22px !important; gap: 1rem !important; }
.plan-card h4 { font-size: 1.2rem; margin: 0 0 .2rem !important; color: var(--oh-heading) !important; }
.plan-card h4 + p { color: var(--oh-muted) !important; font-size: .9rem !important; min-height: 2.7em; line-height: 1.45; }
.plan-popular, .plan-card.plan-popular { border: 1.5px solid var(--oh-accent) !important; box-shadow: 0 0 0 4px var(--oh-accent-soft), var(--oh-shadow-sm) !important; }
.plan-popular::before, .plan-popular::after { display: none !important; }
.plan-badge {
  position: absolute !important; top: -12px !important; left: 22px !important; right: auto !important; transform: none !important; width: max-content !important; max-width: max-content !important; display: inline-flex !important; align-items: center; gap: .3rem;
  background: var(--oh-accent) !important; color: var(--oh-accent-ink) !important; border: 0 !important; border-radius: 999px !important;
  font-size: .72rem !important; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; padding: .3rem .7rem !important; box-shadow: none !important; width: auto !important;
}
.plan-price, .price-band { background: none !important; border: 0 !important; padding: 0 !important; margin: 0 !important; border-radius: 0 !important; }
.plan-price { padding-top: 1rem !important; border-top: 1px solid var(--oh-border) !important; }
.price-now { font-size: 2.15rem !important; font-weight: 750; letter-spacing: -.03em; color: var(--oh-heading) !important; line-height: 1.05; }
[data-role="price-suffix"] { color: var(--oh-muted) !important; font-size: .9rem !important; font-weight: 600; }
.price-was { color: var(--oh-faint) !important; font-size: .88rem; }
.plan-price .badge { background: var(--oh-ok-soft) !important; color: var(--oh-ok) !important; border: 0 !important; }
.billing-compare { color: var(--oh-accent-text) !important; font-size: .8rem !important; }
.plan-billing-table { font-size: .84rem; margin: .6rem 0 0; }
.plan-billing-table td, .plan-billing-table th { padding: .4rem .5rem !important; }
.oh-bill-note { display: block; margin-top: .55rem; font-size: .82rem; color: var(--oh-muted); line-height: 1.45; }
.oh-bill-note b { color: var(--oh-heading); font-weight: 700; font-variant-numeric: tabular-nums; }

.oh-specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; list-style: none; padding: 0; margin: 0; }
.oh-specs li { background: var(--oh-surface-2); border: 1px solid var(--oh-border); border-radius: 10px; padding: 9px 10px; line-height: 1.25; }
.oh-specs b { display: block; color: var(--oh-heading); font-size: 1rem; font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; }
.oh-specs span { display: block; color: var(--oh-muted); font-size: .74rem; margin-top: 2px; }
.plan-features { list-style: none; padding: 0 !important; margin: 0 !important; display: grid; gap: .5rem; font-size: .88rem; }
.plan-features li { display: block !important; position: relative; padding: 0 0 0 1.55rem !important; color: var(--oh-text) !important; line-height: 1.45; border: 0 !important; }
.plan-features li > i, .plan-features li > .bi { position: absolute; left: 0; top: .12rem; color: var(--oh-accent-text) !important; margin: 0 !important; }
.plan-features li small { font-size: .78rem; margin-left: .2rem; }
.plan-features li small, .plan-features .oh-note { color: var(--oh-faint); }
.plan-card .btn:not(.btn-link):not(.billing-compare) { width: 100%; min-height: 46px; }
.plan-card .billing-compare { background: none !important; border: 0 !important; width: auto !important; min-height: 0 !important; padding: 0 !important; }
.plan-card .btn-light { background-color: transparent !important; border-color: var(--oh-accent-line) !important; color: var(--oh-accent-text) !important; }
.plan-card .btn-light:hover { background-color: var(--oh-accent-soft) !important; }
.plan-popular .btn-light { background-color: var(--oh-accent) !important; border-color: var(--oh-accent) !important; color: var(--oh-accent-ink) !important; }
.plan-popular .btn-light:hover { background-color: var(--oh-accent-hover) !important; }
.plan-card .btn-light.oh-x { --bs-btn-bg: transparent; --bs-btn-border-color: var(--oh-accent-line); --bs-btn-color: var(--oh-accent-text); --bs-btn-hover-bg: var(--oh-accent-soft); --bs-btn-hover-color: var(--oh-accent-text); --bs-btn-hover-border-color: var(--oh-accent); }
.plan-popular .btn-light, .plan-popular .btn:not(.btn-link):not(.billing-compare) { --bs-btn-bg: var(--oh-accent); --bs-btn-border-color: var(--oh-accent); --bs-btn-color: var(--oh-accent-ink); --bs-btn-hover-bg: var(--oh-accent-hover); --bs-btn-hover-border-color: var(--oh-accent-hover); --bs-btn-hover-color: var(--oh-accent-ink); }

/* Comparison table */
.oh-compare-wrap { margin-top: 1.75rem; }
.oh-compare-toggle { display: flex; justify-content: center; }
.oh-compare-toggle .btn i { transition: transform .2s ease; }
.oh-compare-toggle .btn[aria-expanded="true"] i { transform: rotate(180deg); }
.oh-compare { margin-top: 1rem; background: var(--oh-surface); border: 1px solid var(--oh-border); border-radius: var(--oh-radius-lg); overflow: hidden; }
.oh-compare[hidden] { display: none; }
.oh-compare-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.oh-compare table { width: 100%; min-width: 640px; border-collapse: separate; border-spacing: 0; font-size: .9rem; }
.oh-compare th, .oh-compare td { padding: .8rem 1rem; border-bottom: 1px solid var(--oh-border); text-align: center; vertical-align: middle; color: var(--oh-text); }
.oh-compare tr:last-child td, .oh-compare tr:last-child th { border-bottom: 0; }
.oh-compare thead th { background: var(--oh-surface-2); color: var(--oh-heading); font-weight: 750; font-size: .95rem; position: sticky; top: 0; }
.oh-compare thead th small { display: block; color: var(--oh-muted); font-weight: 600; font-size: .78rem; margin-top: 2px; }
.oh-compare tbody th { text-align: start; color: var(--oh-muted); font-weight: 600; white-space: nowrap; position: sticky; inset-inline-start: 0; background: var(--oh-surface); z-index: 1; }
.oh-compare td b { color: var(--oh-heading); font-variant-numeric: tabular-nums; }
.oh-compare .oh-yes { color: var(--oh-ok); font-size: 1.1rem; }
.oh-compare .is-pop { background: var(--oh-accent-soft); }
.oh-compare-hint { display: none; font-size: .78rem; color: var(--oh-faint); padding: .5rem 1rem; border-top: 1px solid var(--oh-border); }
.oh-cmp-m { display: none; }

/* ---------- 11. Home content blocks ------------------------------------- */
.oh-pillars { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px !important; }
@media (max-width: 1199.98px) { .oh-pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .oh-pillars { grid-template-columns: 1fr; } }
.why-card::before, .why-card::after, .band-visual::before, .band-visual::after, .site-footer::before, .site-footer::after, .newsletter-band::before, .newsletter-band::after, .domain-band::before, .domain-band::after, .page-hero::before, .page-hero::after { display: none !important; }
.why-card { background-image: none !important; height: 100%; }
.btn.rounded-pill { border-radius: 10px !important; }
.plan-badge .badge { background: none !important; color: inherit !important; padding: 0 !important; font-size: inherit !important; border: 0 !important; }
.oh-pillar, .why-card, .contact-card, .post-row, .faq-card {
  background: var(--oh-surface) !important; border: 1px solid var(--oh-border) !important; border-radius: var(--oh-radius) !important;
  box-shadow: none !important; color: var(--oh-text) !important; backdrop-filter: none !important;
}
.oh-pillar, .why-card { padding: 22px !important; }
.oh-pillar h3, .why-card h3, .why-card h5, .why-card .h5 { font-size: 1.05rem !important; color: var(--oh-heading) !important; margin: .9rem 0 .4rem; }
.oh-pillar p, .why-card p { color: var(--oh-muted) !important; font-size: .92rem; margin: 0; line-height: 1.55; }
.oh-pillar-ico, .why-card-ico, .contact-ico {
  width: 42px; height: 42px; border-radius: 11px !important; display: inline-flex; align-items: center; justify-content: center;
  background: var(--oh-accent-soft) !important; color: var(--oh-accent-text) !important; border: 0 !important; box-shadow: none !important; font-size: 1.15rem;
}
.oh-cta { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }
.band-visual, .band-visual.chrome-dark { background: var(--oh-surface) !important; border-block: 1px solid var(--oh-border); color: var(--oh-text) !important; }
.band-visual img { border-radius: var(--oh-radius-lg); }
.band-title { color: var(--oh-heading) !important; }
.band-lead { color: var(--oh-muted) !important; }
.stat-value { color: var(--oh-heading) !important; }
.brand-dock, .brand-strip { background: none !important; border: 0 !important; }
.brand-logo { filter: grayscale(1); opacity: .65; }
[data-bs-theme="dark"] .brand-logo { filter: grayscale(1) invert(1) brightness(1.6); opacity: .55; }
.post-feed { gap: 12px; }
.post-row { padding: 16px 18px !important; }
.post-title { color: var(--oh-heading) !important; font-weight: 700; }
.post-date { color: var(--oh-faint) !important; font-size: .82rem; }

/* FAQ (native details) */
.oh-faq { display: grid; gap: 10px; max-width: 860px; margin: 0 auto; }
.oh-faq details { background: var(--oh-surface); border: 1px solid var(--oh-border); border-radius: var(--oh-radius); }
.oh-faq details[open] { border-color: var(--oh-border-strong); }
.oh-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 16px 20px; color: var(--oh-heading); font-weight: 700; font-size: 1rem; }
.oh-faq summary::-webkit-details-marker { display: none; }
.oh-faq summary i { color: var(--oh-muted); transition: transform .2s ease; flex: 0 0 auto; }
.oh-faq details[open] summary i { transform: rotate(45deg); color: var(--oh-accent-text); }
.oh-faq .oh-faq-a { padding: 0 20px 18px; color: var(--oh-muted); font-size: .95rem; line-height: 1.65; }
.accordion { --bs-accordion-bg: var(--oh-surface); --bs-accordion-border-color: var(--oh-border); --bs-accordion-color: var(--oh-text); --bs-accordion-btn-color: var(--oh-heading); --bs-accordion-active-bg: var(--oh-surface-2); --bs-accordion-active-color: var(--oh-heading); --bs-accordion-border-radius: var(--oh-radius); --bs-accordion-btn-focus-box-shadow: var(--oh-focus); }
.accordion-button { font-weight: 700; }

/* Category content blocks */
.category-content { color: var(--oh-text); }
.category-content h2 { margin-bottom: .75rem; }
.category-content p { color: var(--oh-muted); font-size: 1rem; max-width: 72ch; }
.oh-fit { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 1.5rem 0; }
.oh-fit > div { background: var(--oh-surface); border: 1px solid var(--oh-border); border-radius: var(--oh-radius); padding: 20px; }
.oh-fit h3 { font-size: 1rem; margin: .75rem 0 .35rem; }
.oh-fit p { font-size: .9rem !important; margin: 0; color: var(--oh-muted); }
.oh-fit i { width: 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--oh-accent-soft); color: var(--oh-accent-text); }
.oh-note-box { border: 1px solid var(--oh-border); border-inline-start: 3px solid var(--oh-accent); background: var(--oh-surface-2); border-radius: 10px; padding: 14px 16px; font-size: .9rem; color: var(--oh-text); }
@media (max-width: 767.98px) { .oh-fit { grid-template-columns: 1fr; } }

/* Contact cards + newsletter */
.contact-card { padding: 18px 20px !important; }
.contact-label { color: var(--oh-muted) !important; font-size: .8rem; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; }
.contact-value { color: var(--oh-heading) !important; font-weight: 750; }
.contact-sub { color: var(--oh-faint) !important; font-size: .84rem; }
.contact-arrow { color: var(--oh-faint) !important; }
.newsletter-band { background: var(--oh-bg) !important; }
.newsletter-panel {
  background: var(--oh-surface) !important; border: 1px solid var(--oh-border) !important; border-radius: var(--oh-radius-lg) !important;
  box-shadow: none !important; color: var(--oh-text) !important; padding: clamp(1.5rem, 1rem + 2vw, 2.5rem) !important;
}
.newsletter-panel::before, .newsletter-panel::after { display: none !important; }
.newsletter-panel .h3, .newsletter-panel h3 { color: var(--oh-heading) !important; }
.newsletter-sub { color: var(--oh-muted) !important; }

/* ---------- 12. Footer --------------------------------------------------- */
.site-footer, .site-footer.chrome-dark {
  background: var(--oh-bg-alt) !important; color: var(--oh-muted) !important; border-top: 1px solid var(--oh-border);
  --wstyle-chrome-color: var(--oh-heading); --wstyle-chrome-muted: var(--oh-muted);
}
.footer-powered-band { background: transparent !important; border-top: 1px solid var(--oh-border); color: var(--oh-faint) !important; text-align: center; padding: .55rem 0 !important; }
.footer-powered-band a { color: var(--oh-muted) !important; }
.footer-top { padding: clamp(2.5rem, 2rem + 2vw, 3.75rem) 0 2rem !important; gap: 2.5rem !important; }
.footer-brand-desc { color: var(--oh-muted) !important; max-width: 34ch; font-size: .9rem !important; }
.site-footer .site-logo-light, .site-footer .site-logo-dark, .site-footer .site-logo-ink { display: none !important; }
[data-bs-theme="dark"] .site-footer .site-logo-dark { display: inline-block !important; }
[data-bs-theme="light"] .site-footer .site-logo-ink { display: inline-block !important; }
[data-bs-theme="light"] .site-footer .site-brand:not(:has(.site-logo-ink)) .site-logo-dark { display: inline-block !important; filter: brightness(.25) saturate(1.4); }
.footer-heading { color: var(--oh-heading) !important; font-size: .8rem !important; font-weight: 750 !important; letter-spacing: .08em; text-transform: uppercase; margin-bottom: .9rem !important; }
.footer-link { color: var(--oh-muted) !important; font-size: .92rem; text-decoration: none; padding: .2rem 0; display: inline-block; }
.footer-link:hover { color: var(--oh-accent-text) !important; }
.footer-phone { color: var(--oh-heading) !important; font-weight: 700; }
.footer-base { border-top: 1px solid var(--oh-border) !important; padding: 1.1rem 0 1.5rem !important; color: var(--oh-faint) !important; font-size: .82rem; }
.footer-status { display: none !important; }
.footer-appearance { background: var(--oh-surface) !important; border: 1px solid var(--oh-border) !important; border-radius: 10px !important; padding: 3px !important; }
.footer-appearance-btn { border-radius: 8px !important; color: var(--oh-muted) !important; width: 34px; height: 32px; }
.footer-appearance-btn[aria-pressed="true"], .footer-appearance-btn.active { background: var(--oh-accent-soft) !important; color: var(--oh-accent-text) !important; }
.footer-locale .locale-toggle { border: 1px solid var(--oh-border) !important; background: var(--oh-surface) !important; color: var(--oh-heading) !important; border-radius: 10px !important; }
.oh-pay-note { display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; color: var(--oh-faint); }

/* Locale menu */
.locale-menu { min-width: 280px; }
.locale-tabs .nav-link { color: var(--oh-muted); }
.locale-tabs .nav-link.active { color: var(--oh-accent-text); background: var(--oh-accent-soft); }
.locale-list a, .locale-list button { border-radius: 8px; color: var(--oh-heading); }

/* Cookie notice */
.cookie-notice-card { background: var(--oh-surface) !important; border: 1px solid var(--oh-border) !important; color: var(--oh-text) !important; border-radius: var(--oh-radius-lg) !important; box-shadow: var(--oh-shadow-lg) !important; }
.cookie-btn-solid { background: var(--oh-accent) !important; color: var(--oh-accent-ink) !important; border-color: var(--oh-accent) !important; }
.cookie-btn-ghost { background: var(--oh-surface) !important; color: var(--oh-heading) !important; border-color: var(--oh-border-strong) !important; }

/* ---------- 13. Checkout / order ---------------------------------------- */
.checkout-shell { background: var(--oh-bg) !important; }
.checkout-shell .site-header, .checkout-header { background: var(--oh-header-bg) !important; border-bottom: 1px solid var(--oh-border) !important; }
.checkout-split { gap: 0; }
.checkout-split-main { background: var(--oh-bg) !important; }
.checkout-split-aside { background: var(--oh-surface) !important; border-inline-start: 1px solid var(--oh-border) !important; color: var(--oh-text); }
.config-section-head h2, .config-section-head .h5, .config-section-head h3 { color: var(--oh-heading) !important; font-size: 1.1rem; }
.config-section-head p { color: var(--oh-muted) !important; }
.option-card, .billing-cycle-card {
  background: var(--oh-surface) !important; border: 1px solid var(--oh-border-strong) !important; border-radius: var(--oh-radius) !important;
  color: var(--oh-text) !important; box-shadow: none !important; transition: border-color .15s ease, box-shadow .15s ease; cursor: pointer;
}
.option-card:hover, .billing-cycle-card:hover { border-color: var(--oh-accent-line) !important; }
.option-card:has(input:checked), .billing-cycle-card:has(input:checked), .option-card.is-selected, .option-card.active {
  border-color: var(--oh-accent) !important; box-shadow: 0 0 0 3px var(--oh-accent-soft) !important; background: var(--oh-surface) !important;
}
.billing-cycle-name { color: var(--oh-heading) !important; font-weight: 700; }
.billing-cycle-price { color: var(--oh-heading) !important; font-weight: 750; font-size: 1.25rem; }
.billing-cycle-permonth { color: var(--oh-muted) !important; }
.price-chip { background: var(--oh-ok-soft) !important; color: var(--oh-ok) !important; border: 0 !important; border-radius: 6px !important; }
.domain-result, .ns-item { background: var(--oh-surface) !important; border: 1px solid var(--oh-border) !important; border-radius: var(--oh-radius) !important; color: var(--oh-text) !important; }
.domain-result-available { border-color: rgba(21, 122, 60, .4) !important; }
.checkout-split-aside { --bs-heading-color: var(--oh-heading); --bs-body-color: var(--oh-text); --bs-emphasis-color: var(--oh-heading); }
.checkout-split-aside :is(h1, h2, h3, h4, h5, h6, .h5, .h6, .text-white, strong) { color: var(--oh-heading) !important; }
.checkout-split-aside :is(.summary-sub, .text-white-50, small, .form-text) { color: var(--oh-muted) !important; }
.checkout-split-aside a:not(.btn) { color: var(--oh-accent-text) !important; }
.summary-label { color: var(--oh-muted) !important; }
.summary-value { color: var(--oh-heading) !important; font-weight: 700; }
.summary-rule { border-color: var(--oh-border) !important; }
.checkout-split-aside .btn-primary { min-height: 50px; font-size: 1rem; width: 100%; background-color: var(--oh-accent) !important; border-color: var(--oh-accent) !important; color: var(--oh-accent-ink) !important; }
.checkout-split-aside .btn-primary:hover { background-color: var(--oh-accent-hover) !important; border-color: var(--oh-accent-hover) !important; }
.checkout-split-aside { align-items: flex-start !important; }
.checkout-split-aside-inner { margin-top: 0 !important; margin-bottom: auto !important; position: sticky; top: 24px; width: 100%; }
@media (min-width: 992px) { .checkout-split-aside-inner { padding-top: clamp(2rem, 1rem + 3vw, 4.5rem) !important; } }
.wstyle-empty-state { background: var(--oh-surface) !important; border: 1px dashed var(--oh-border-strong) !important; border-radius: var(--oh-radius-lg) !important; color: var(--oh-muted) !important; }
.checkout-steps, [class*="checkout-step"] { color: var(--oh-muted); }
@media (max-width: 991.98px) {
  .checkout-split-aside { border-inline-start: 0 !important; border-top: 1px solid var(--oh-border) !important; }
}

/* ---------- 14. Auth (login / register) ---------------------------------- */
.auth-split { background: var(--oh-bg) !important; min-height: 100vh; }
.auth-stage {
  background: var(--oh-hero-tint), var(--oh-bg-alt) !important; color: var(--oh-text) !important; border-inline-end: 1px solid var(--oh-border);
}
.auth-stage-title { color: var(--oh-heading) !important; font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.4rem) !important; letter-spacing: -.025em; }
.auth-stage-text, .auth-stage-foot { color: var(--oh-muted) !important; }
.auth-stage .site-logo-light, .auth-stage .site-logo-dark, .auth-stage .site-logo-ink { display: none !important; }
[data-bs-theme="dark"] .auth-stage .site-logo-dark { display: inline-block !important; }
[data-bs-theme="light"] .auth-stage .site-logo-light { display: inline-block !important; filter: brightness(.25) saturate(1.4); }
.auth-form { background: var(--oh-surface) !important; color: var(--oh-text) !important; }
.auth-form-bar { border-bottom: 1px solid var(--oh-border) !important; }
.auth-form-inner { max-width: 440px; }
.auth-form h1, .auth-form h2 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2rem); }
.auth-divider { color: var(--oh-faint) !important; }
.auth-divider::before, .auth-divider::after { background: var(--oh-border) !important; border-color: var(--oh-border) !important; }
.auth-form .btn-primary { min-height: 50px; width: 100%; }
.auth-alert { border-radius: var(--oh-radius) !important; }
.otp-input { background: var(--oh-surface) !important; border: 1px solid var(--oh-border-strong) !important; color: var(--oh-heading) !important; border-radius: 10px !important; }

/* ---------- 15. Client area & misc pages -------------------------------- */
.client-topbar, .client-sidebar { background: var(--oh-surface) !important; border-color: var(--oh-border) !important; color: var(--oh-text) !important; }
.client-sidebar a { color: var(--oh-text); }
.client-sidebar a.active, .client-sidebar .active > a { background: var(--oh-accent-soft) !important; color: var(--oh-accent-text) !important; }
.wstyle-skeleton { background: var(--oh-surface-2) !important; }
.pagination { --bs-pagination-bg: var(--oh-surface); --bs-pagination-border-color: var(--oh-border); --bs-pagination-color: var(--oh-heading); --bs-pagination-hover-bg: var(--oh-surface-2); --bs-pagination-active-bg: var(--oh-accent); --bs-pagination-active-border-color: var(--oh-accent); --bs-pagination-active-color: var(--oh-accent-ink); }
.page-content, .article-body, .contract-body { color: var(--oh-text); }
.article-body h2, .article-body h3, .contract-body h2, .contract-body h3 { margin-top: 2rem; }

/* ---------- 16. Motion & accessibility ---------------------------------- */
.reveal, [data-reveal] { opacity: 1 !important; transform: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ---------- 17. Mobile refinements -------------------------------------- */
@media (max-width: 991.98px) {
  .site-header > nav.container { min-height: 62px; }
  .rack-bar { flex-direction: column; align-items: stretch; }
  .billing-toggle { width: 100%; overflow-x: auto; scrollbar-width: none; }
  .billing-option { flex: 1 0 auto; }
}
@media (max-width: 575.98px) {
  body { font-size: .98rem; }
  .section-head { margin-bottom: 1.75rem; }
  .price-now { font-size: 1.95rem !important; }
  .plan-card .card-body { padding: 18px !important; }
  .oh-specs b { font-size: .95rem; }
  .footer-top { gap: 1.75rem !important; }
}
img, svg, video, iframe { max-width: 100%; }
body { overflow-x: clip; }

/* ---------- 18. CTA band, about page, misc -------------------------------- */
.cta-band {
  background: var(--oh-surface) !important; background-image: none !important; color: var(--oh-text) !important;
  border: 1px solid var(--oh-border) !important; border-radius: var(--oh-radius-lg) !important; box-shadow: none !important;
  padding: clamp(1.75rem, 1.25rem + 2vw, 3rem) !important; text-align: center;
}
.cta-band::before, .cta-band::after { display: none !important; }
.cta-band .cta-title { color: var(--oh-heading) !important; }
.cta-band .cta-text, .cta-band p { color: var(--oh-muted) !important; opacity: 1 !important; }
.cta-band .btn-light { --bs-btn-bg: var(--oh-accent); --bs-btn-border-color: var(--oh-accent); --bs-btn-color: var(--oh-accent-ink); --bs-btn-hover-bg: var(--oh-accent-hover); --bs-btn-hover-border-color: var(--oh-accent-hover); --bs-btn-hover-color: var(--oh-accent-ink); }
.cta-band .btn-outline-light { --bs-btn-bg: transparent; --bs-btn-border-color: var(--oh-border-strong); --bs-btn-color: var(--oh-heading); --bs-btn-hover-bg: var(--oh-surface-2); --bs-btn-hover-border-color: var(--oh-accent-line); --bs-btn-hover-color: var(--oh-heading); }
.oh-about { max-width: 760px; }
.oh-about h2 { margin-bottom: .75rem; }
.oh-about .lead { color: var(--oh-text); font-size: 1.12rem; margin-bottom: 1.75rem; }
.oh-about h3 { font-size: 1.1rem; margin: 1.75rem 0 .5rem; }
.oh-about p { color: var(--oh-muted); }
.oh-about .oh-note-box { margin-top: 2rem; }
.page-content .card, .content-card { background: var(--oh-surface) !important; border-color: var(--oh-border) !important; }

/* ---------- 19. Status page & legal pages --------------------------------- */
.oh-status { max-width: 820px; }
.oh-status-head { display: flex; align-items: center; gap: .75rem; padding: 18px 20px; background: var(--oh-surface); border: 1px solid var(--oh-border); border-radius: var(--oh-radius) var(--oh-radius) 0 0; }
.oh-status-head strong { color: var(--oh-heading); font-size: 1.05rem; }
.oh-status-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--oh-border); border-top: 0; border-radius: 0 0 var(--oh-radius) var(--oh-radius); background: var(--oh-surface); }
.oh-status-list li { display: flex; align-items: center; gap: .85rem; padding: 14px 20px; border-top: 1px solid var(--oh-border); }
.oh-status-list li:first-child { border-top: 0; }
.oh-status-name { display: flex; flex-direction: column; min-width: 0; }
.oh-status-name b { color: var(--oh-heading); font-weight: 650; }
.oh-status-name small { color: var(--oh-faint); font-size: .8rem; font-family: var(--oh-mono); }
.oh-status-state { margin-left: auto; color: var(--oh-muted); font-size: .88rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.oh-status-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 10px; background: var(--oh-faint); }
.oh-status-dot.is-ok { background: var(--oh-ok); box-shadow: 0 0 0 4px var(--oh-ok-soft); }
.oh-status-dot.is-down { background: #d9534f; box-shadow: 0 0 0 4px rgba(217, 83, 79, .14); }
.oh-status-dot.is-wait { background: var(--oh-faint); animation: ohPulse 1.2s ease-in-out infinite; }
@keyframes ohPulse { 50% { opacity: .35; } }
.oh-status-note { margin-top: 1rem; font-size: .85rem; color: var(--oh-muted); }
.oh-status-info { margin-top: 2rem; }
.oh-status-info h2 { font-size: 1.15rem; margin-bottom: .5rem; }
.oh-legal-meta { color: var(--oh-muted); font-size: .9rem; padding-bottom: 1rem; border-bottom: 1px solid var(--oh-border); }
.contract-body h2, .page-content h2, .article-body h2 { font-size: 1.2rem; margin-top: 2rem; }
.contract-body h3, .page-content h3 { font-size: 1.02rem; margin-top: 1.25rem; }
.contract-body ul, .page-content ul { padding-left: 1.2rem; }
.contract-body li, .page-content li { margin: .35rem 0; }
.oh-footer-nav { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem 2rem; }
.oh-footer-nav .footer-col { display: flex; flex-direction: column; gap: .1rem; }
@media (max-width: 991.98px) { .oh-footer-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .oh-footer-nav { grid-template-columns: 1fr 1fr; gap: 1.25rem 1rem; } }
@media (max-width: 575.98px) { .oh-status-list li { flex-wrap: wrap; } .oh-status-state { margin-left: 1.6rem; width: 100%; } }


/* ---------- 20. Mobile plan comparison ------------------------------------ */
@media (max-width: 767.98px) {
  .oh-compare { border: 0; background: transparent; overflow: visible; }
  .oh-compare-scroll, .oh-compare-hint { display: none !important; }
  .oh-cmp-m { display: block; }
  .oh-cmp-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 4px; padding: 4px; background: var(--oh-surface-2); border: 1px solid var(--oh-border); border-radius: 12px; }
  .oh-cmp-tab { min-width: 0; border: 0; background: transparent; color: var(--oh-muted); font-weight: 700; font-size: .88rem; padding: .6rem .25rem; border-radius: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .oh-cmp-tab[aria-selected="true"] { background: var(--oh-surface); color: var(--oh-heading); box-shadow: 0 1px 2px rgba(0, 0, 0, .12), inset 0 0 0 1px var(--oh-accent-line); }
  .oh-cmp-tab:focus-visible { outline: 2px solid var(--oh-accent); outline-offset: 1px; }
  .oh-cmp-card { margin-top: .75rem; background: var(--oh-surface); border: 1px solid var(--oh-border); border-radius: var(--oh-radius-lg); overflow: hidden; }
  .oh-cmp-card[hidden] { display: none; }
  .oh-cmp-head { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; padding: .9rem 1rem; background: var(--oh-surface-2); border-bottom: 1px solid var(--oh-border); }
  .oh-cmp-head strong { color: var(--oh-heading); font-size: 1.05rem; }
  .oh-cmp-head span { color: var(--oh-muted); font-size: .85rem; font-weight: 600; white-space: nowrap; }
  .oh-cmp-card ul { list-style: none; margin: 0; padding: 0; }
  .oh-cmp-card li { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: .7rem 1rem; border-bottom: 1px solid var(--oh-border); font-size: .9rem; }
  .oh-cmp-card li:last-child { border-bottom: 0; }
  .oh-cmp-card li span { color: var(--oh-muted); min-width: 0; overflow-wrap: anywhere; }
  .oh-cmp-card li b { color: var(--oh-heading); text-align: end; flex: 0 0 auto; max-width: 55%; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
  .oh-cmp-card .oh-cmp-yes { color: var(--oh-ok); font-weight: 650; white-space: nowrap; }
}

/* ---------- 21. Footer ambient glow -------------------------------------- */
footer.site-footer { position: relative; isolation: isolate; overflow: hidden; }
footer.site-footer::before, footer.site-footer::after {
  content: "" !important; display: block !important; position: absolute; top: 0; height: 200%; width: min(26vw, 300px);
  pointer-events: none; z-index: -1; will-change: transform; background-repeat: repeat-y; background-size: 100% 50%;
  --oh-glow: 220, 38, 38; --oh-glow-a: .20; --oh-glow-b: .12;
  animation: ohGlowRise 30s linear infinite;
}
footer.site-footer::before {
  left: 0;
  background-image:
    radial-gradient(70% 22% at 0% 22%, rgba(var(--oh-glow), var(--oh-glow-a)), transparent 72%),
    radial-gradient(55% 16% at 0% 70%, rgba(var(--oh-glow), var(--oh-glow-b)), transparent 72%);
}
footer.site-footer::after {
  right: 0; animation-duration: 38s; animation-delay: -12s;
  background-image:
    radial-gradient(70% 20% at 100% 40%, rgba(var(--oh-glow), var(--oh-glow-a)), transparent 72%),
    radial-gradient(55% 15% at 100% 88%, rgba(var(--oh-glow), var(--oh-glow-b)), transparent 72%);
}
[data-bs-theme="light"] footer.site-footer::before, [data-bs-theme="light"] footer.site-footer::after { --oh-glow: 225, 29, 72; --oh-glow-a: .08; --oh-glow-b: .05; }
@keyframes ohGlowRise {
  0% { transform: translate3d(0, 0, 0); }
  25% { transform: translate3d(10px, -12.5%, 0); }
  50% { transform: translate3d(0, -25%, 0); }
  75% { transform: translate3d(-10px, -37.5%, 0); }
  100% { transform: translate3d(0, -50%, 0); }
}
@media (max-width: 575.98px) { footer.site-footer::before, footer.site-footer::after { width: 34vw; --oh-glow-a: .16; --oh-glow-b: .09; } }
@media (prefers-reduced-motion: reduce) { footer.site-footer::before, footer.site-footer::after { animation: none !important; } }

/* ---------- 22. Hosting advisor ----------------------------------------- */
.oh-advisor { max-width: 960px; margin: 0 auto; }
.oh-adv-form { background: var(--oh-surface); border: 1px solid var(--oh-border); border-radius: var(--oh-radius-lg); padding: clamp(1.1rem, .8rem + 1.5vw, 2rem); }
.oh-adv-intro { color: var(--oh-muted); margin-bottom: 1rem; }
.oh-adv-lbl, .oh-adv-q legend { display: block; font-weight: 700; color: var(--oh-heading); font-size: .95rem; margin-bottom: .45rem; }
.oh-adv-count { text-align: end; font-size: .78rem; color: var(--oh-faint); margin-top: .25rem; }
.oh-adv-count.is-over { color: #d9534f; }
.oh-adv-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.oh-adv-q { border: 0; padding: 0; margin: 1.25rem 0 0; min-width: 0; }
.oh-adv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem 1rem; }
.oh-adv-grid label { display: flex; flex-direction: column; gap: .35rem; font-size: .86rem; color: var(--oh-muted); font-weight: 600; min-width: 0; }
.oh-adv-grid label[hidden] { display: none; }
.oh-adv-actions { margin-top: 1.4rem; display: flex; justify-content: flex-end; }
.oh-adv-msg { display: flex; gap: .55rem; align-items: flex-start; margin-top: 1rem; padding: .75rem .9rem; border-radius: 10px; font-size: .9rem; border: 1px solid var(--oh-border); background: var(--oh-surface-2); color: var(--oh-text); }
.oh-adv-msg.is-error { border-color: rgba(217, 83, 79, .45); background: rgba(217, 83, 79, .08); }
.oh-adv-msg.is-ok { border-color: var(--oh-accent-line); background: var(--oh-accent-soft); }
.oh-adv-msg.is-loading i { animation: ohPulse 1.2s ease-in-out infinite; }
.oh-adv-ai .oh-adv-msg { margin-top: 0; margin-bottom: 1rem; }
.oh-adv-result { margin-top: 1.5rem; }
.oh-adv-sec { margin-top: 1.75rem; }
.oh-adv-sec h2 { font-size: 1.25rem; margin-bottom: .9rem; }
.oh-adv-summary, .oh-adv-note, .oh-adv-exceeds, .oh-adv-why { background: var(--oh-surface); border: 1px solid var(--oh-border); border-radius: var(--oh-radius-lg); padding: 1rem 1.15rem; margin-top: 1rem; }
.oh-adv-summary p, .oh-adv-exceeds p { margin: .35rem 0 0; color: var(--oh-text); }
.oh-adv-qs { color: var(--oh-muted); font-size: .9rem; }
.oh-adv-exceeds { border-color: rgba(217, 83, 79, .4); }
.oh-adv-why ul { margin: .5rem 0 0; padding-left: 1.2rem; }
.oh-adv-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.oh-adv-plan { position: relative; display: flex; flex-direction: column; gap: .5rem; background: var(--oh-surface); border: 1px solid var(--oh-border); border-radius: var(--oh-radius-lg); padding: 1.15rem; min-width: 0; }
.oh-adv-plan.is-primary { border-color: var(--oh-accent-line); box-shadow: 0 0 0 1px var(--oh-accent-line); }
.oh-adv-plan.is-selected { box-shadow: 0 0 0 2px var(--oh-accent); }
.oh-adv-plan-tag { align-self: flex-start; font-size: .72rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: var(--oh-accent-text); background: var(--oh-accent-soft); border-radius: 999px; padding: .2rem .6rem; }
.oh-adv-plan h3 { font-size: 1.15rem; margin: 0; }
.oh-adv-plan-line { color: var(--oh-muted); font-size: .86rem; margin: 0; }
.oh-adv-price b { font-size: 1.45rem; color: var(--oh-heading); }
.oh-adv-price small { display: block; color: var(--oh-muted); font-size: .8rem; }
.oh-adv-feats { list-style: none; padding: 0; margin: .25rem 0 .5rem; font-size: .86rem; color: var(--oh-text); flex: 1; }
.oh-adv-feats li { padding: .25rem 0; border-bottom: 1px dashed var(--oh-border); overflow-wrap: anywhere; }
.oh-adv-feats li:last-child { border-bottom: 0; }
.oh-adv-ideas h3 { font-size: 1rem; margin: 0 0 .35rem; }
.oh-adv-small { font-size: .82rem; color: var(--oh-muted); }
.oh-adv-dlist { list-style: none; padding: 0; margin: .5rem 0 0; border: 1px solid var(--oh-border); border-radius: var(--oh-radius-lg); background: var(--oh-surface); overflow: hidden; }
.oh-adv-dlist li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: .5rem .9rem; padding: .7rem 1rem; border-bottom: 1px solid var(--oh-border); }
.oh-adv-dlist li:last-child { border-bottom: 0; }
.oh-adv-dlist li.is-selected { background: var(--oh-accent-soft); }
.oh-adv-dn { min-width: 0; }
.oh-adv-dn b { color: var(--oh-heading); overflow-wrap: anywhere; }
.oh-adv-dn small { display: block; color: var(--oh-muted); font-size: .8rem; }
.oh-adv-ds { font-size: .8rem; font-weight: 700; border-radius: 999px; padding: .2rem .6rem; white-space: nowrap; background: var(--oh-surface-2); color: var(--oh-muted); }
.oh-adv-ds.is-available { background: var(--oh-ok-soft); color: var(--oh-ok); }
.oh-adv-ds.is-registered { background: rgba(217, 83, 79, .1); color: #d9534f; }
.oh-adv-ds.is-unknown { background: rgba(240, 173, 78, .14); color: #b9770e; }
[data-bs-theme="dark"] .oh-adv-ds.is-unknown { color: #f0ad4e; }
.oh-adv-ds.is-wait { animation: ohPulse 1.2s ease-in-out infinite; }
.oh-adv-inline { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.oh-adv-inline label, .oh-adv-own { display: flex; flex-direction: column; gap: .35rem; font-size: .86rem; font-weight: 600; color: var(--oh-muted); min-width: 0; }
.oh-adv-row { display: flex; gap: .5rem; min-width: 0; }
.oh-adv-row .form-control { min-width: 0; }
.oh-adv-own { margin-top: 1rem; }
.oh-adv-go { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; padding-top: 1.25rem; border-top: 1px solid var(--oh-border); }
.oh-adv-go p { color: var(--oh-muted); font-size: .85rem; margin: 0; }
@media (max-width: 991.98px) { .oh-adv-plans { grid-template-columns: 1fr; } }
@media (max-width: 767.98px) {
  .oh-adv-grid, .oh-adv-inline { grid-template-columns: 1fr; }
  .oh-adv-actions .btn, .oh-adv-go .btn { width: 100%; }
  .oh-adv-dlist li { grid-template-columns: minmax(0, 1fr) auto; }
  .oh-adv-dlist li .btn { grid-column: 1 / -1; width: 100%; }
}
.oh-adv-ds { white-space: normal; border-radius: 10px; text-align: end; line-height: 1.25; }
.oh-adv-ds small { display: block; font-weight: 550; font-size: .72rem; opacity: .85; }