/*
  Public CMS site: header, footer, page-builder blocks, blog and help center.
  Every color, font and radius comes from the active theme's custom properties (CmsThemeCss),
  with defaults here matching the Core SaaS Platform theme. Logical properties (inline-start/end) keep
  one stylesheet correct for both left-to-right and Arabic right-to-left pages.
*/
.cms-site {
  --cms-primary: #0b464a; --cms-primary-contrast: #fff; --cms-secondary: #0f4f53;
  --cms-accent: #a8f61d; --cms-accent-contrast: #12200f; --cms-bg: #f3f5f9; --cms-surface: #fff;
  --cms-text: #11141a; --cms-muted: #4d5966; --cms-border: #dbe2ea;
  --cms-header-bg: #0b464a; --cms-header-text: #f2feff; --cms-footer-bg: #0b464a; --cms-footer-text: #d8f0f2;
  --cms-font-heading: "Manrope", "IBM Plex Sans Arabic", "Segoe UI", system-ui, sans-serif;
  --cms-font-body: var(--cms-font-heading);
  --cms-font-size: 16px; --cms-scale: 1.25; --cms-heading-weight: 800; --cms-line-height: 1.65;
  --cms-radius: 16px; --cms-button-radius: 8px; --cms-container: 1240px; --cms-section-space: 4rem;
  --cms-shadow: 0 14px 30px rgba(15, 23, 42, .08);

  background: var(--cms-bg);
  color: var(--cms-text);
  font-family: var(--cms-font-body);
  font-size: var(--cms-font-size);
  line-height: var(--cms-line-height);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

/* Header/footer embedded in a hand-built page (the home page): the wrapper only carries the
   theme variables, and display: contents keeps the sticky header sticky against the page. */
.cms-site.cms-site--embedded { display: contents; min-height: 0; }

.cms-site *, .cms-site *::before, .cms-site *::after { box-sizing: border-box; }
.cms-site h1, .cms-site h2, .cms-site h3 { font-family: var(--cms-font-heading); font-weight: var(--cms-heading-weight); line-height: 1.15; color: inherit; margin: 0 0 .6em; }
.cms-site h1 { font-size: clamp(2rem, calc(1rem * var(--cms-scale) * var(--cms-scale) * var(--cms-scale) * var(--cms-scale) * 1.15), 3.8rem); }
.cms-site h2 { font-size: clamp(1.5rem, calc(1rem * var(--cms-scale) * var(--cms-scale) * var(--cms-scale)), 2.6rem); }
.cms-site h3 { font-size: calc(1rem * var(--cms-scale)); }
.cms-site p { margin: 0 0 1em; }
.cms-site a { color: inherit; }
.cms-site img { max-width: 100%; height: auto; display: block; }
.cms-main { flex: 1 0 auto; }
.cms-container { width: min(var(--cms-container), calc(100% - 2rem)); margin-inline: auto; }
.cms-muted { color: var(--cms-muted); }
.is-center { text-align: center; }
.cms-skip-link { position: absolute; inset-inline-start: -9999px; top: 0; z-index: 100; background: var(--cms-accent); color: var(--cms-accent-contrast); padding: .6rem 1rem; }
.cms-skip-link:focus { inset-inline-start: 1rem; }
.cms-site .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Buttons, chips ---------- */
.cms-btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .7rem 1.15rem; border-radius: var(--cms-button-radius); font-weight: 700; text-decoration: none; border: 1px solid transparent; cursor: pointer; font-size: .95rem; line-height: 1.2; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.cms-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(0, 0, 0, .12); }
.cms-btn:focus-visible { outline: 3px solid var(--cms-accent); outline-offset: 2px; }
.cms-btn--lg { padding: .9rem 1.5rem; font-size: 1rem; }
.cms-btn--block { width: 100%; }
.cms-btn--accent { background: var(--cms-accent); color: var(--cms-accent-contrast) !important; }
.cms-btn--primary { background: var(--cms-primary); color: var(--cms-primary-contrast) !important; }
.cms-btn--outline { background: transparent; color: var(--cms-primary) !important; border-color: var(--cms-primary); }
.cms-btn--ghost { background: rgba(255, 255, 255, .1); color: inherit !important; border-color: currentColor; }
.cms-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.cms-actions.is-center, .is-center .cms-actions { justify-content: center; }
.cms-chip { display: inline-flex; align-items: center; padding: .2rem .65rem; border-radius: 999px; background: color-mix(in srgb, var(--cms-primary) 10%, transparent); color: var(--cms-primary) !important; font-size: .78rem; font-weight: 700; text-decoration: none; }
.cms-chip.is-active { background: var(--cms-primary); color: var(--cms-primary-contrast) !important; }
.cms-eyebrow { display: inline-block; font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; padding: .25rem .75rem; border-radius: 999px; border: 1px solid currentColor; opacity: .85; margin-bottom: 1rem; }
.cms-link-arrow { font-weight: 700; text-decoration: none; color: var(--cms-primary) !important; }
.cms-link-arrow::after { content: " →"; }
[dir="rtl"] .cms-link-arrow::after { content: " ←"; }

/* ---------- Top strip & header (16 layouts, see CmsLayoutCatalog) ---------- */
.cms-topstrip { background: color-mix(in srgb, var(--cms-header-bg) 80%, #fff 20%); color: var(--cms-header-text); font-size: .82rem; }
.cms-topstrip__inner { min-height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.cms-topstrip__links { display: flex; gap: 1rem; }
.cms-topstrip a { color: inherit; text-decoration: none; opacity: .92; }
.cms-topstrip a:hover { opacity: 1; text-decoration: underline; }
.cms-topstrip .btn, .cms-top-links .btn { padding: .15rem .55rem !important; font-size: .78rem; }

.cms-header { --cms-hbar-bg: color-mix(in srgb, var(--cms-header-bg) 55%, #9aa1a9); background: var(--cms-header-bg); color: var(--cms-header-text); z-index: 60; position: relative; }
.cms-header.is-sticky { position: sticky; top: 0; }
.cms-header--light { --cms-header-bg: var(--cms-surface); --cms-header-text: var(--cms-text); --cms-hbar-bg: var(--cms-bg); box-shadow: 0 1px 0 var(--cms-border); }
.cms-header--transparent { background: color-mix(in srgb, var(--cms-header-bg) 82%, transparent); backdrop-filter: saturate(140%) blur(6px); }

.cms-hrow__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 1.25rem; }
.cms-hrow--main .cms-hrow__inner { min-height: 72px; }
.cms-hrow--top { font-size: .85rem; border-bottom: 1px solid color-mix(in srgb, currentColor 14%, transparent); }
.cms-hrow--top .cms-hrow__inner { min-height: 42px; }
.cms-hrow--bar { background: var(--cms-hbar-bg); }
.cms-header--dark .cms-hrow--bar, .cms-header--transparent .cms-hrow--bar { color: #fff; }
.cms-hrow--bar .cms-hrow__inner { min-height: 48px; }
.cms-hrow--mobile, .cms-drawer { display: none; }
.cms-slot { display: flex; align-items: center; gap: 1.25rem; min-width: 0; }
.cms-slot--center { justify-content: center; }
.cms-slot--end { justify-content: flex-end; }
/* Empty start/end slots stay in the grid so a centre-only row (menu bar, logo bar) is truly centred. */
/* A row with nothing centred: start and end share the width, start can grow (wide search). */
.cms-hrow__inner:has(> .cms-slot--center:empty) { grid-template-columns: minmax(0, 1fr) auto; }
.cms-hrow__inner:has(> .cms-slot--center:empty) > .cms-slot--center { display: none; }
.cms-hrow__inner:has(> .cms-slot--center:empty) > .cms-slot--start { flex: 1; }

.cms-logo { font-family: var(--cms-font-heading); font-weight: 800; font-size: 1.6rem; text-decoration: none; color: inherit !important; white-space: nowrap; flex: 0 0 auto; }
.cms-logo img { max-height: 40px; width: auto; }
.cms-logo--bar { font-size: 1.4rem; }
.cms-nav__list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: .15rem; flex-wrap: wrap; }
.cms-nav__item { position: relative; }
.cms-nav__link { display: inline-flex; align-items: center; gap: .35rem; padding: .5rem .75rem; border-radius: 8px; color: inherit !important; text-decoration: none; font-weight: 600; font-size: .95rem; cursor: pointer; white-space: nowrap; }
.cms-nav__link:hover, .cms-nav__link.is-active, .cms-nav__item:focus-within > .cms-nav__link { background: color-mix(in srgb, currentColor 10%, transparent); }
.cms-caret { width: .45rem; height: .45rem; border-inline-end: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.cms-dropdown { position: absolute; top: calc(100% + .4rem); inset-inline-start: 0; min-width: 300px; background: var(--cms-surface); color: var(--cms-text); border: 1px solid var(--cms-border); border-radius: var(--cms-radius); box-shadow: 0 24px 48px rgba(15, 23, 42, .18); padding: .5rem; display: grid; gap: .15rem; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .15s ease, transform .15s ease, visibility .15s; z-index: 5; }
.cms-slot--end .cms-dropdown { inset-inline-start: auto; inset-inline-end: 0; }
.cms-nav__item.has-children:hover > .cms-dropdown, .cms-nav__item.has-children:focus-within > .cms-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.cms-dropdown__item { display: flex; gap: .75rem; align-items: flex-start; padding: .65rem .75rem; border-radius: calc(var(--cms-radius) - 6px); text-decoration: none; color: inherit !important; }
.cms-dropdown__item:hover, .cms-dropdown__item:focus-visible { background: color-mix(in srgb, var(--cms-primary) 7%, transparent); }
.cms-dropdown__item strong { display: block; font-size: .95rem; }
.cms-dropdown__item small { display: block; color: var(--cms-muted); font-size: .82rem; line-height: 1.4; }
.cms-dropdown__icon { color: var(--cms-primary); }

.cms-header__actions { display: flex; align-items: center; gap: .6rem; flex: 0 0 auto; }
.cms-header .cms-btn { padding: .55rem 1.1rem; border-radius: 999px; font-size: .88rem; }
.cms-btn--light { background: var(--cms-header-text); color: var(--cms-header-bg) !important; }
.cms-header-search { position: relative; display: flex; align-items: center; min-width: 0; }
.cms-header-search input { width: 210px; padding: .5rem .8rem; padding-inline-start: 2.1rem; border-radius: 999px; border: 1px solid color-mix(in srgb, currentColor 22%, transparent); background: color-mix(in srgb, var(--cms-surface) 92%, transparent); color: var(--cms-text); font-size: .88rem; }
.cms-header-search.is-wide { flex: 1; }
.cms-header-search.is-wide input { width: 100%; border-radius: 8px; }
.cms-header-search__icon { position: absolute; inset-inline-start: .7rem; color: var(--cms-muted); display: inline-flex; }
.cms-icon-btn, .cms-avatar-btn, .cms-cart-link, .cms-menu-btn, .cms-account-link { color: inherit !important; text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; font-size: .9rem; cursor: pointer; flex: 0 0 auto; }
.cms-icon-btn, .cms-cart-link__icon { position: relative; display: inline-flex; }
.cms-icon-btn i.ki-duotone, .cms-cart-link i.ki-duotone, .cms-menu-btn i.ki-duotone, .cms-account-link i.ki-duotone, .cms-avatar-btn i.ki-duotone, .cms-location i.ki-duotone { color: inherit !important; }
.cms-icon-btn__dot { position: absolute; top: -2px; inset-inline-end: -3px; width: 8px; height: 8px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 2px var(--cms-header-bg); }
.cms-menu-btn__lines { display: inline-grid; gap: 3px; width: 18px; }
.cms-menu-btn__lines i { display: block; height: 2px; border-radius: 2px; background: currentColor; }
.cms-avatar-btn { width: 36px; height: 36px; border-radius: 50%; justify-content: center; background: color-mix(in srgb, currentColor 14%, transparent); font-weight: 800; }
.cms-location { display: inline-flex; align-items: center; gap: .35rem; opacity: .9; font-size: .88rem; white-space: nowrap; }
.cms-top-links { display: flex; align-items: center; gap: .5rem; }
.cms-top-links .cms-nav__link { font-size: .85rem; padding: .3rem .6rem; }

/* Drawer: the phone menu for every layout, and the desktop menu for the "Menu" layouts. */
.cms-nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.cms-burger { display: inline-flex; width: 44px; height: 44px; border-radius: 10px; cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 5px; border: 1px solid color-mix(in srgb, currentColor 25%, transparent); }
.cms-burger span { width: 20px; height: 2px; background: currentColor; transition: transform .2s ease, opacity .2s ease; }
.cms-nav-toggle:checked ~ .cms-hrow--mobile .cms-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.cms-nav-toggle:checked ~ .cms-hrow--mobile .cms-burger span:nth-child(2) { opacity: 0; }
.cms-nav-toggle:checked ~ .cms-hrow--mobile .cms-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.cms-nav-toggle:focus-visible ~ .cms-hrow--mobile .cms-burger { outline: 3px solid var(--cms-accent); }
.cms-drawer { position: absolute; inset-inline: 0; top: 100%; background: var(--cms-header-bg); color: var(--cms-header-text); border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent); box-shadow: 0 24px 40px rgba(15, 23, 42, .18); max-height: calc(100vh - 72px); overflow-y: auto; }
.cms-nav-toggle:checked ~ .cms-drawer { display: block; }
.cms-drawer__inner { display: grid; gap: 1rem; padding-block: 1rem 1.25rem; }
.cms-nav__list.is-vertical { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 0; }
.cms-nav__list.is-vertical .cms-nav__link { width: 100%; padding: .8rem .25rem; border-radius: 0; border-bottom: 1px solid color-mix(in srgb, currentColor 10%, transparent); }
.cms-nav__list.is-vertical .cms-caret { display: none; }
.cms-nav__list.is-vertical .cms-dropdown { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; background: transparent; color: inherit; min-width: 0; padding: 0 0 .5rem; padding-inline-start: .75rem; }
.cms-nav__list.is-vertical .cms-dropdown__item small { color: inherit; opacity: .75; }
.cms-nav__list.is-vertical .cms-dropdown__icon { color: inherit; }
.cms-drawer__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.cms-drawer__secondary .cms-nav__link { font-weight: 500; opacity: .85; }

@media (min-width: 992px) {
  /* "Menu" layouts open the drawer as a panel at the end of the header. */
  .cms-header.has-menu-drawer .cms-drawer { inset-inline: auto; inset-inline-end: max(1rem, calc((100% - var(--cms-container)) / 2)); width: min(380px, calc(100% - 2rem)); border-radius: 0 0 var(--cms-radius) var(--cms-radius); }
  .cms-header.has-menu-drawer .cms-drawer .cms-header-search { display: none; }
}

@media (max-width: 991px) {
  .cms-hrow:not(.cms-hrow--mobile) { display: none; }
  .cms-hrow--mobile { display: block; }
  .cms-hrow--mobile .cms-hrow__inner { min-height: 64px; grid-template-columns: minmax(0, 1fr) auto; }
  .cms-drawer .cms-header__actions { flex-wrap: wrap; }
  .cms-drawer .cms-header__actions .cms-btn { flex: 1; }
  .cms-topstrip__text { display: none; }
}

/* ---------- Footer (12 layouts, see CmsLayoutCatalog) ---------- */
.cms-footer { background: var(--cms-footer-bg); color: var(--cms-footer-text); margin-top: auto; padding-block: 2.25rem; font-size: .92rem; }
.cms-footer--light { --cms-footer-bg: var(--cms-surface); --cms-footer-text: var(--cms-muted); border-top: 1px solid var(--cms-border); }
.cms-footer a { color: inherit; text-decoration: none; }
.cms-footer a:hover { text-decoration: underline; }
.cms-footer .cms-logo { color: var(--cms-footer-heading, #fff) !important; font-size: 1.5rem; }
.cms-footer--light .cms-logo, .cms-footer--light h3 { --cms-footer-heading: var(--cms-text); color: var(--cms-text) !important; }
.cms-frow { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 1rem 2rem; padding-block: .6rem; }
.cms-frow--tight { padding-top: 0; }
.cms-frow:has(> .cms-slot--center:empty) { grid-template-columns: minmax(0, 1fr) auto; }
.cms-frow:has(> .cms-slot--center:empty) > .cms-slot--center { display: none; }
.cms-frow .cms-slot { flex-wrap: wrap; gap: .75rem 1.5rem; }
.cms-frow-divider { border: 0; border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent); margin: 1.25rem 0; opacity: 1; }
.cms-copyright { opacity: .9; }
.cms-footer-links { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.cms-footer-links a { font-weight: 500; }
.cms-social { display: flex; flex-wrap: wrap; gap: .85rem; align-items: center; }
.cms-social a { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; opacity: .9; }
.cms-social a:hover { opacity: 1; text-decoration: none; }
.cms-social i.ki-duotone { color: inherit !important; }
.cms-social__mark { font-weight: 800; font-size: .95rem; }
.cms-newsletter { display: flex; align-items: center; gap: .5rem; position: relative; flex: 0 1 440px; width: min(440px, 100%); }
.cms-newsletter .cms-btn { flex: 0 0 auto; }
.cms-newsletter input { flex: 1; min-width: 200px; padding: .65rem .9rem; padding-inline-start: 2.2rem; border-radius: 8px; border: 1px solid var(--cms-border); background: var(--cms-surface); color: var(--cms-text); font-size: .9rem; }
.cms-newsletter__icon { position: absolute; inset-inline-start: .75rem; color: var(--cms-muted); display: inline-flex; }
.cms-fcolumns { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 2rem; padding-block: .5rem; }
.cms-fcolumn h3 { font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: #fff; margin-bottom: 1rem; }
.cms-fcolumn ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.cms-fcolumn p { margin: 0 0 .5rem; }
.cms-fcolumn .cms-social { margin-top: .75rem; }

@media (max-width: 767px) {
  .cms-frow, .cms-frow:has(> .cms-slot--center:empty) { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .cms-frow .cms-slot { justify-content: center; }
  .cms-frow > .cms-slot:empty { display: none; }
  .cms-fcolumns { grid-template-columns: 1fr 1fr; }
  .cms-newsletter { width: 100%; }
}

/* ---------- Sections ---------- */
.cms-section { padding-block: var(--cms-section-space); }
.cms-space-sm { padding-block: calc(var(--cms-section-space) * .5); }
.cms-space-lg { padding-block: calc(var(--cms-section-space) * 1.5); }
.cms-space-none { padding-block: 0; }
.cms-bg-default { background: transparent; }
.cms-bg-surface { background: var(--cms-surface); }
.cms-bg-primary { background: linear-gradient(180deg, var(--cms-primary), color-mix(in srgb, var(--cms-primary) 82%, #000)); color: var(--cms-primary-contrast); }
.cms-bg-accent { background: color-mix(in srgb, var(--cms-accent) 22%, var(--cms-bg)); }
.cms-bg-dark { background: color-mix(in srgb, var(--cms-secondary) 75%, #000); color: #fff; }
.cms-bg-primary .cms-card, .cms-bg-dark .cms-card { color: var(--cms-text); }
.cms-heading { max-width: 760px; margin-bottom: 2.25rem; }
.cms-heading.is-center { margin-inline: auto; text-align: center; }
.cms-heading p { color: inherit; opacity: .8; font-size: 1.08rem; }
.cms-grid { display: grid; gap: 1.25rem; }
.cms-grid--1 { grid-template-columns: minmax(0, 720px); justify-content: center; }
.cms-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cms-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cms-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 991px) { .cms-grid--3, .cms-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cms-grid--2, .cms-grid--3, .cms-grid--4 { grid-template-columns: 1fr; } }
.cms-card { background: var(--cms-surface); border: 1px solid var(--cms-border); border-radius: var(--cms-radius); padding: 1.5rem; box-shadow: var(--cms-shadow); }
.cms-placeholder { display: block; width: 100%; aspect-ratio: 16 / 10; border-radius: var(--cms-radius); background: linear-gradient(135deg, color-mix(in srgb, var(--cms-primary) 22%, #fff), color-mix(in srgb, var(--cms-accent) 30%, #fff)); }

/* Hero */
.cms-hero__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: center; }
.cms-hero__grid.is-single { grid-template-columns: 1fr; max-width: 860px; }
.cms-hero__grid.is-center { margin-inline: auto; text-align: center; }
.cms-hero__grid.is-center .cms-actions { justify-content: center; }
.cms-hero h1, .cms-hero__title { font-size: clamp(2.2rem, 5vw, 4rem); max-width: 18ch; }
.cms-hero__grid.is-center h1, .cms-hero__grid.is-center .cms-hero__title { margin-inline: auto; }
.cms-hero__lead { font-size: 1.15rem; opacity: .88; max-width: 58ch; }
.cms-hero__grid.is-center .cms-hero__lead { margin-inline: auto; }
.cms-hero__media img { border-radius: calc(var(--cms-radius) + 6px); box-shadow: 0 30px 60px rgba(0, 0, 0, .25); }
@media (max-width: 991px) { .cms-hero__grid { grid-template-columns: 1fr; } }

/* Features */
.cms-feature h3 { margin-top: .75rem; }
.cms-feature p { color: var(--cms-muted); }
.cms-feature__icon { width: 52px; height: 52px; border-radius: calc(var(--cms-radius) - 4px); display: inline-grid; place-items: center; background: color-mix(in srgb, var(--cms-primary) 10%, transparent); color: var(--cms-primary); }
.cms-feature__icon i, .cms-feature__icon .ki-duotone { color: inherit !important; }

/* Image + text */
.cms-split { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.cms-split.is-reversed .cms-split__media { order: -1; }
.cms-split__media img { border-radius: calc(var(--cms-radius) + 4px); box-shadow: var(--cms-shadow); }
@media (max-width: 991px) { .cms-split { grid-template-columns: 1fr; } .cms-split.is-reversed .cms-split__media { order: 0; } }
.cms-checklist { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: .6rem; }
.cms-checklist li { position: relative; padding-inline-start: 1.6rem; }
.cms-checklist li::before { content: ""; position: absolute; inset-inline-start: 0; top: .45em; width: .9rem; height: .9rem; border-radius: 50%; background: var(--cms-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cms-accent) 25%, transparent); }

/* Stats */
.cms-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1.5rem; margin: 0; text-align: center; }
.cms-stats__item { display: flex; flex-direction: column-reverse; }
.cms-stats dd { font-family: var(--cms-font-heading); font-weight: var(--cms-heading-weight); font-size: clamp(2rem, 4vw, 3rem); margin: 0; line-height: 1.1; }
.cms-stats dt { font-weight: 500; opacity: .75; }

/* Steps */
.cms-steps { list-style: none; counter-reset: step; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; }
.cms-steps__item { counter-increment: step; position: relative; padding-top: 3.5rem; }
.cms-steps__item::before { content: counter(step); position: absolute; top: 0; inset-inline-start: 0; width: 2.75rem; height: 2.75rem; border-radius: 50%; display: grid; place-items: center; background: var(--cms-accent); color: var(--cms-accent-contrast); font-weight: 800; }
.cms-steps__item p { opacity: .8; }

/* Pricing */
.cms-plan { position: relative; display: flex; flex-direction: column; gap: .5rem; }
.cms-plan.is-highlighted { border: 2px solid var(--cms-accent); transform: translateY(-6px); }
.cms-plan__badge { position: absolute; top: -.8rem; inset-inline-end: 1.25rem; background: var(--cms-accent); color: var(--cms-accent-contrast); font-size: .75rem; font-weight: 800; padding: .2rem .7rem; border-radius: 999px; }
.cms-plan__price strong { font-size: 2.4rem; font-family: var(--cms-font-heading); }
.cms-plan__price span { color: var(--cms-muted); margin-inline-start: .25rem; }
.cms-plan__description { color: var(--cms-muted); }
.cms-plan .cms-checklist { flex: 1; }

/* Testimonials */
.cms-quote { margin: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 1.25rem; }
.cms-quote blockquote { margin: 0; font-size: 1.05rem; }
.cms-quote blockquote::before { content: "“"; display: block; font-size: 3rem; line-height: 1; color: var(--cms-accent); }
.cms-quote figcaption { display: flex; align-items: center; gap: .75rem; }
.cms-quote figcaption img, .cms-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.cms-avatar { display: grid; place-items: center; background: var(--cms-primary); color: var(--cms-primary-contrast); font-weight: 800; }
.cms-quote small { display: block; color: var(--cms-muted); }

/* Logos */
.cms-logos__title { text-align: center; font-weight: 700; letter-spacing: .04em; opacity: .75; margin-bottom: 1.5rem; }
.cms-logos { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2.5rem; }
.cms-logos img { max-height: 40px; width: auto; filter: grayscale(1); opacity: .75; transition: filter .2s, opacity .2s; }
.cms-logos a:hover img { filter: none; opacity: 1; }
.cms-logos span { font-weight: 800; font-size: 1.2rem; opacity: .7; }

/* FAQ */
.cms-faq { display: grid; gap: .75rem; max-width: 860px; margin-inline: auto; }
.cms-faq__item { background: var(--cms-surface); border: 1px solid var(--cms-border); border-radius: calc(var(--cms-radius) - 4px); padding: 0 1.25rem; color: var(--cms-text); }
.cms-faq__item summary { cursor: pointer; list-style: none; padding: 1.05rem 0; font-weight: 700; display: flex; justify-content: space-between; gap: 1rem; }
.cms-faq__item summary::-webkit-details-marker { display: none; }
.cms-faq__item summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--cms-primary); transition: transform .2s; }
.cms-faq__item[open] summary::after { transform: rotate(45deg); }
.cms-faq__item .cms-prose { padding-bottom: 1rem; color: var(--cms-muted); }
.cms-faq__group { margin-top: 2rem; font-size: 1.25rem; }

/* CTA, contact */
.cms-cta { display: flex; justify-content: space-between; align-items: center; gap: 2rem; flex-wrap: wrap; }
.cms-cta h2 { margin-bottom: .35rem; }
.cms-cta p { opacity: .85; margin: 0; max-width: 60ch; }
.cms-cta .cms-actions { margin-top: 0; }
.cms-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; }
.cms-contact__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.cms-contact__list li { background: var(--cms-bg); border-radius: var(--cms-radius); padding: 1rem 1.25rem; display: grid; }
.cms-contact__list span { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--cms-muted); font-weight: 700; }
.cms-contact__list address { font-style: normal; white-space: pre-line; }
@media (max-width: 767px) { .cms-contact { grid-template-columns: 1fr; } }

/* Video */
.cms-video { margin: 0 auto; max-width: 960px; }
.cms-video__frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--cms-radius); overflow: hidden; box-shadow: var(--cms-shadow); background: #000; }
.cms-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cms-video figcaption { text-align: center; color: var(--cms-muted); margin-top: .75rem; }

/* Prose (rich text from editors) */
.cms-prose { font-size: 1.05rem; overflow-wrap: anywhere; }
.cms-prose--narrow { max-width: 780px; margin-inline: auto; }
.cms-prose h2 { margin-top: 2rem; } .cms-prose h3 { margin-top: 1.5rem; }
.cms-prose a { color: var(--cms-primary); text-decoration: underline; text-underline-offset: 3px; }
.cms-bg-primary .cms-prose a, .cms-bg-dark .cms-prose a { color: inherit; }
.cms-prose img, .cms-prose figure { border-radius: var(--cms-radius); margin-block: 1.5rem; }
.cms-prose blockquote { border-inline-start: 4px solid var(--cms-accent); margin: 1.5rem 0; padding: .25rem 0; padding-inline-start: 1.25rem; color: var(--cms-muted); font-style: italic; }
.cms-prose pre, .cms-prose code { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: .9em; direction: ltr; text-align: left; }
.cms-prose pre { background: #0f172a; color: #e2e8f0; padding: 1rem 1.25rem; border-radius: calc(var(--cms-radius) - 4px); overflow-x: auto; }
.cms-prose :not(pre) > code { background: color-mix(in srgb, var(--cms-primary) 8%, transparent); padding: .1rem .35rem; border-radius: 4px; }
.cms-prose table { width: 100%; border-collapse: collapse; margin-block: 1.5rem; display: block; overflow-x: auto; }
.cms-prose th, .cms-prose td { border: 1px solid var(--cms-border); padding: .6rem .8rem; text-align: start; }
.cms-prose th { background: var(--cms-bg); }
.cms-prose ul, .cms-prose ol { padding-inline-start: 1.4rem; }
.cms-prose iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--cms-radius); }

/* ---------- Listing pages: blog & help ---------- */
.cms-page-title { background: var(--cms-surface); border-bottom: 1px solid var(--cms-border); padding-block: 3rem 2rem; }
.cms-listing-hero p, .cms-help-hero p { opacity: .85; font-size: 1.1rem; max-width: 62ch; }
.cms-help-hero.is-center p, .cms-help-hero .is-center p { margin-inline: auto; }
.cms-breadcrumbs { display: flex; flex-wrap: wrap; gap: .4rem; font-size: .88rem; margin-bottom: 1rem; opacity: .85; }
.cms-breadcrumbs a { color: inherit; text-decoration: none; }
.cms-breadcrumbs a:hover { text-decoration: underline; }
.cms-breadcrumbs a + a::before { content: "/"; margin-inline-end: .4rem; opacity: .6; }
.cms-search { display: flex; gap: .5rem; max-width: 620px; margin-top: 1.5rem; }
.is-center .cms-search, .cms-search.cms-search--lg { margin-inline: auto; }
.cms-search input { flex: 1; min-width: 0; padding: .8rem 1rem; border-radius: var(--cms-button-radius); border: 1px solid var(--cms-border); font-size: 1rem; color: var(--cms-text); background: var(--cms-surface); }
.cms-search input:focus { outline: 3px solid color-mix(in srgb, var(--cms-accent) 60%, transparent); outline-offset: 1px; }
.cms-sidebar .cms-search { margin-top: 0; }
.cms-search--lg input { padding: 1rem 1.25rem; font-size: 1.05rem; }
.cms-blog-layout, .cms-help-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 2.5rem; align-items: start; }
@media (max-width: 991px) { .cms-blog-layout, .cms-help-layout { grid-template-columns: 1fr; } }
.cms-sidebar { display: grid; gap: 1.25rem; position: sticky; top: 96px; }
.cms-sidebar h2 { font-size: 1.05rem; }
.cms-sidebar__list { list-style: none; padding: 0; margin: 0; display: grid; gap: .25rem; }
.cms-sidebar__list a { display: flex; justify-content: space-between; padding: .45rem .6rem; border-radius: 8px; text-decoration: none; }
.cms-sidebar__list a:hover, .cms-sidebar__list a.is-active { background: color-mix(in srgb, var(--cms-primary) 8%, transparent); color: var(--cms-primary); }
.cms-sidebar__list span { color: var(--cms-muted); font-size: .85rem; }
.cms-tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.cms-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; font-size: .85rem; }
.cms-meta--muted { color: var(--cms-muted); }
.cms-meta--muted span + span::before { content: "·"; margin-inline-end: .6rem; }
.cms-post-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; transition: transform .2s ease, box-shadow .2s ease; }
.cms-post-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(15, 23, 42, .12); }
.cms-post-card__media img, .cms-post-card__media .cms-placeholder { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; border-radius: 0; }
.cms-post-card__body { padding: 1.25rem 1.4rem 1.4rem; display: grid; gap: .6rem; }
.cms-post-card h3 { margin: 0; font-size: 1.2rem; }
.cms-post-card h3 a { text-decoration: none; }
.cms-post-card h3 a:hover { color: var(--cms-primary); }
.cms-post-card p { color: var(--cms-muted); margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cms-featured-post { padding: 0; overflow: hidden; display: grid; grid-template-columns: 1.1fr 1fr; margin-bottom: 1.5rem; }
.cms-featured-post__media img, .cms-featured-post__media .cms-placeholder { width: 100%; height: 100%; object-fit: cover; border-radius: 0; min-height: 260px; }
.cms-featured-post__body { padding: 2rem; }
.cms-featured-post__body .cms-eyebrow { color: var(--cms-primary); }
.cms-featured-post h2 a { text-decoration: none; }
@media (max-width: 767px) { .cms-featured-post { grid-template-columns: 1fr; } }
.cms-pagination { display: flex; justify-content: center; align-items: center; gap: 1rem; margin-top: 2rem; }
.cms-pagination a { padding: .5rem 1rem; border-radius: var(--cms-button-radius); border: 1px solid var(--cms-border); text-decoration: none; background: var(--cms-surface); font-weight: 600; }
.cms-empty { text-align: center; padding: 3rem 1rem; }
.cms-empty__code { display: block; font-size: 5rem; font-weight: 800; color: var(--cms-primary); line-height: 1; opacity: .25; }

/* Article (blog post) */
.cms-article__container { max-width: 820px; }
.cms-article__lead { font-size: 1.2rem; opacity: .88; }
.cms-author { display: flex; align-items: center; gap: .75rem; margin-top: 1.5rem; }
.cms-author img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.cms-author strong { display: block; }
.cms-author span { opacity: .8; font-size: .9rem; }
.cms-article__cover { max-width: 1000px; margin-top: -1.5rem; }
.cms-article__cover img { border-radius: calc(var(--cms-radius) + 4px); box-shadow: var(--cms-shadow); width: 100%; }
.cms-article__tags { margin-top: 2rem; }
.cms-share { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--cms-border); font-weight: 600; }
.cms-share a { color: var(--cms-primary); }
.cms-tldr { background: color-mix(in srgb, var(--cms-accent) 18%, var(--cms-surface)); border-inline-start: 4px solid var(--cms-accent); border-radius: calc(var(--cms-radius) - 6px); padding: 1rem 1.25rem; margin-bottom: 2rem; }
.cms-tldr strong { display: block; margin-bottom: .25rem; }
.cms-tldr p { margin: 0; }

/* Help center */
.cms-topic { text-decoration: none; display: grid; gap: .5rem; align-content: start; transition: transform .2s ease, border-color .2s ease; }
.cms-topic:hover { transform: translateY(-4px); border-color: var(--cms-primary); }
.cms-topic h2 { font-size: 1.2rem; margin: .5rem 0 0; }
.cms-topic p { color: var(--cms-muted); margin: 0; }
.cms-topic__count { color: var(--cms-primary); font-weight: 700; font-size: .88rem; }
.cms-article-list { list-style: none; padding: 0; margin: 0 0 2rem; display: grid; gap: .6rem; }
.cms-article-list--columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 767px) { .cms-article-list--columns { grid-template-columns: 1fr; } }
.cms-article-list a { display: grid; gap: .2rem; padding: 1rem 1.25rem; border: 1px solid var(--cms-border); border-radius: calc(var(--cms-radius) - 4px); background: var(--cms-surface); text-decoration: none; transition: border-color .15s; }
.cms-article-list a:hover { border-color: var(--cms-primary); }
.cms-article-list small { color: var(--cms-muted); }
.cms-results { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.cms-results a { display: grid; gap: .35rem; padding: 1.25rem; border: 1px solid var(--cms-border); border-radius: var(--cms-radius); background: var(--cms-surface); text-decoration: none; }
.cms-results a:hover { border-color: var(--cms-primary); }
.cms-results strong { font-size: 1.1rem; }
.cms-results p { margin: 0; color: var(--cms-muted); }
.cms-results .cms-chip { justify-self: start; }
.cms-help-article h1 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); }
.cms-breadcrumbs--dark { color: var(--cms-muted); margin: 0; }
.cms-feedback { margin-top: 2.5rem; padding: 1.25rem; border: 1px solid var(--cms-border); border-radius: var(--cms-radius); background: var(--cms-surface); }
.cms-feedback form { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin: 0; }
.cms-feedback form span { font-weight: 700; margin-inline-end: auto; }
.cms-feedback p { margin: 0; font-weight: 700; color: var(--cms-primary); }

/* Admin preview */
.is-hidden-preview { opacity: .45; outline: 2px dashed #f59e0b; outline-offset: -2px; }
.cms-unknown-block { padding: 1rem; border: 1px dashed #ef4444; color: #ef4444; }

@media (prefers-reduced-motion: reduce) {
  .cms-site * { transition: none !important; animation: none !important; }
}

/* ---------- Home section blocks (styles from home-blocks.css, scoped to .soldi-home) ---------- */
.soldi-home.cms-home-block.cms-bg-original { background: transparent; }
.soldi-home .hero-grid.is-single { grid-template-columns: 1fr; }
.soldi-home .faq-list details { background: color-mix(in srgb, var(--cms-accent) 18%, var(--cms-surface)); color: var(--cms-text); border-radius: 12px; padding: .85rem 1rem; border: 1px solid color-mix(in srgb, var(--cms-accent) 30%, var(--cms-surface)); }
.soldi-home .faq-list details summary { list-style: none; cursor: pointer; }
.soldi-home .faq-list details summary::-webkit-details-marker { display: none; }
.soldi-home .faq-list details summary h3 { margin: 0; font-size: 1.05rem; }
.soldi-home .faq-list details > div { margin-top: .45rem; }
.soldi-home .faq-list details > div p:last-child { margin-bottom: 0; }
.soldi-home .faq-list > .btn-lime { justify-self: start; }
.soldi-home .cms-payment-strip { padding-block: 1.25rem; }

/* ---- Block background & text colour (section settings) ---- */
/* Home blocks paint their colour on the wrapper, so the section's own design background steps aside. */
.cms-home-block.cms-bg-set > section,
.cms-home-block.cms-bg-set > div { background: transparent; border-color: transparent; }
/* Same presets as .cms-bg-*, made specific enough to beat home-blocks.css's own .soldi-home background. */
.soldi-home.cms-home-block.cms-bg-default { background: var(--cms-bg); }
.soldi-home.cms-home-block.cms-bg-surface { background: var(--cms-surface); }
.soldi-home.cms-home-block.cms-bg-primary { background: linear-gradient(180deg, var(--cms-primary), color-mix(in srgb, var(--cms-primary) 82%, #000)); }
.soldi-home.cms-home-block.cms-bg-accent { background: color-mix(in srgb, var(--cms-accent) 22%, var(--cms-bg)); }
.soldi-home.cms-home-block.cms-bg-dark { background: color-mix(in srgb, var(--cms-secondary) 75%, #000); }
.cms-section.cms-tone-light { color: #fff; }
.cms-section.cms-tone-dark { color: var(--cms-text); }

/* Light text: chosen explicitly, or automatic on the dark presets. */
:is(.cms-home-block.cms-tone-light, .cms-home-block.cms-bg-primary:not(.cms-tone-dark), .cms-home-block.cms-bg-dark:not(.cms-tone-dark))
    :is(.hero-title, .hero-copy, .center-title h2, .center-title > p, .api-copy h2, .api-copy p,
        .platform-services-head h2, .platform-services-head p, .plan-head h2, .plan-head p,
        .services-head h2, .services-head p, .number-bar h3, .number-bar p, .pay-strip > span) { color: #fff; }
:is(.cms-home-block.cms-tone-light, .cms-home-block.cms-bg-primary:not(.cms-tone-dark), .cms-home-block.cms-bg-dark:not(.cms-tone-dark))
    :is(.hero-copy, .center-title > p, .api-copy p, .platform-services-head p, .plan-head p, .services-head p, .number-bar p) { opacity: .85; }

/* Dark text: chosen explicitly, or automatic on the light presets. */
:is(.cms-home-block.cms-tone-dark, .cms-home-block.cms-bg-default:not(.cms-tone-light), .cms-home-block.cms-bg-surface:not(.cms-tone-light), .cms-home-block.cms-bg-accent:not(.cms-tone-light))
    :is(.hero-title, .hero-copy, .center-title h2, .center-title > p, .api-copy h2, .api-copy p,
        .platform-services-head h2, .platform-services-head p, .plan-head h2, .plan-head p,
        .services-head h2, .services-head p, .number-bar h3, .number-bar p, .pay-strip > span) { color: var(--cms-text, #132f36); }

/* ---------- Live data widgets: currency converter, rates table, subscription plans ----------
   Shared by the generic blocks and the home hero. Cards carry their own surface colour, so the
   widgets read well on every section background (or none). */
.cms-fx-live { display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; font-weight: 700; color: var(--cms-muted); }
.cms-fx-live i { width: .5rem; height: .5rem; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgba(34, 197, 94, .5); animation: cms-fx-pulse 2s infinite; }
@keyframes cms-fx-pulse { 70% { box-shadow: 0 0 0 .45rem rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } }

.cms-fx-field { display: grid; gap: .35rem; min-width: 0; }
.cms-fx-field > label { font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--cms-muted); }
.cms-fx-input { width: 100%; min-height: 3rem; border: 1px solid var(--cms-border); border-radius: calc(var(--cms-radius) * .6); background: var(--cms-bg); color: var(--cms-text); padding: .6rem .85rem; font: inherit; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.cms-fx-input:hover { border-color: color-mix(in srgb, var(--cms-primary) 35%, var(--cms-border)); }
.cms-fx-input:focus, .cms-fx-input:focus-visible { outline: none; border-color: var(--cms-primary); background: var(--cms-surface); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cms-primary) 18%, transparent); }
.cms-fx-icon { display: inline-grid; place-items: center; flex: none; min-width: 1.75rem; height: 1.75rem; border-radius: 50%; overflow: hidden; background: color-mix(in srgb, var(--cms-primary) 8%, var(--cms-surface)); color: var(--cms-primary); font-size: .62rem; font-weight: 800; }
.cms-fx-icon img { width: 100%; height: 100%; object-fit: cover; }

/* Segmented control (rate type, billing cycle) */
.cms-fx-segment { display: inline-flex; flex-wrap: wrap; gap: .25rem; padding: .3rem; border-radius: 999px; background: color-mix(in srgb, var(--cms-primary) 7%, var(--cms-surface)); border: 1px solid var(--cms-border); }
.cms-fx-segment button { display: inline-flex; align-items: center; gap: .45rem; border: 0; border-radius: 999px; padding: .5rem 1rem; background: transparent; color: var(--cms-muted); font: inherit; font-size: .88rem; font-weight: 700; cursor: pointer; transition: background .15s ease, color .15s ease, box-shadow .15s ease; }
.cms-fx-segment button:hover { color: var(--cms-text); }
.cms-fx-segment button.is-active { background: var(--cms-primary); color: var(--cms-primary-contrast); box-shadow: 0 6px 14px color-mix(in srgb, var(--cms-primary) 30%, transparent); }
.cms-fx-segment button:focus-visible { outline: 3px solid var(--cms-accent); outline-offset: 1px; }

/* Converter */
.cms-fx-converter-band__inner { display: grid; grid-template-columns: 1fr minmax(0, 520px); gap: 3rem; align-items: center; }
.cms-fx-converter-band__inner.is-single { grid-template-columns: minmax(0, 560px); justify-content: center; }
.cms-fx-converter-band__copy h2 { max-width: 18ch; }
.cms-fx-converter-band__copy p { opacity: .8; font-size: 1.08rem; max-width: 52ch; }
.cms-fx-converter { position: relative; background: var(--cms-surface); color: var(--cms-text); border: 1px solid var(--cms-border); border-radius: calc(var(--cms-radius) * 1.25); padding: 1.5rem; box-shadow: 0 24px 48px -18px rgba(15, 23, 42, .28); text-align: start; overflow: visible; }
.cms-fx-converter::before { content: ""; position: absolute; inset: 0 1.25rem auto; height: 4px; border-radius: 0 0 4px 4px; background: linear-gradient(90deg, var(--cms-primary), var(--cms-accent)); }
.cms-fx-converter__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; }
.cms-fx-converter .cms-fx-converter__head h3 { margin: 0; font-size: 1.15rem; color: var(--cms-text); }
.cms-fx-converter form { display: grid; gap: 1rem; }
.cms-fx-input--amount { font-size: 1.35rem; font-weight: 800; font-family: var(--cms-font-heading); }
.cms-fx-pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: .6rem; align-items: end; }
.cms-fx-swap { width: 2.75rem; height: 2.75rem; margin-bottom: .125rem; border-radius: 50%; border: 1px solid var(--cms-border); background: var(--cms-surface); color: var(--cms-primary); font-size: 1.15rem; cursor: pointer; transition: transform .25s ease, background .15s ease, color .15s ease; }
.cms-fx-swap:hover { background: var(--cms-primary); color: var(--cms-primary-contrast); transform: rotate(180deg); }
.cms-fx-swap:focus-visible { outline: 3px solid var(--cms-accent); outline-offset: 2px; }
.cms-fx-picker { position: relative; }
.cms-fx-picker__toggle { display: flex; align-items: center; gap: .5rem; text-align: start; cursor: pointer; }
.cms-fx-picker__code { font-weight: 800; }
.cms-fx-picker__name { flex: 1; min-width: 0; color: var(--cms-muted); font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cms-fx-picker__caret { color: var(--cms-muted); font-size: .7rem; transition: transform .15s ease; }
.cms-fx-picker.is-open .cms-fx-picker__caret { transform: rotate(180deg); }
.cms-fx-picker__menu { position: absolute; top: calc(100% + .4rem); inset-inline: 0 auto; z-index: 30; width: max(100%, 260px); background: var(--cms-surface); border: 1px solid var(--cms-border); border-radius: calc(var(--cms-radius) * .75); box-shadow: 0 18px 36px rgba(15, 23, 42, .18); padding: .5rem; }
.cms-fx-pair .cms-fx-field:last-child .cms-fx-picker__menu { inset-inline: auto 0; }
.cms-fx-picker__search { min-height: 2.5rem; }
.cms-fx-picker__list { margin-top: .4rem; max-height: 240px; overflow: auto; display: grid; gap: .15rem; }
.cms-fx-picker__item { display: flex; align-items: center; gap: .55rem; border: 0; border-radius: 8px; background: transparent; color: var(--cms-text); padding: .45rem .55rem; font: inherit; font-size: .88rem; text-align: start; cursor: pointer; }
.cms-fx-picker__item span:last-child { color: var(--cms-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cms-fx-picker__item:hover { background: color-mix(in srgb, var(--cms-primary) 7%, transparent); }
.cms-fx-picker__item.is-active { background: color-mix(in srgb, var(--cms-accent) 25%, transparent); }
.cms-fx-result { margin-top: 1.1rem; padding: 1rem 1.1rem; border-radius: calc(var(--cms-radius) * .75); background: linear-gradient(135deg, color-mix(in srgb, var(--cms-primary) 9%, var(--cms-surface)), color-mix(in srgb, var(--cms-accent) 14%, var(--cms-surface))); display: grid; gap: .15rem; }
.cms-fx-result > span { color: var(--cms-muted); font-size: .85rem; }
.cms-fx-result strong { font-family: var(--cms-font-heading); font-size: clamp(1.4rem, 3vw, 1.9rem); line-height: 1.2; color: var(--cms-primary); overflow-wrap: anywhere; }
.cms-fx-result small { color: var(--cms-muted); font-size: .78rem; }

/* Rates table */
.cms-fx-rates { background: var(--cms-surface); color: var(--cms-text); border: 1px solid var(--cms-border); border-radius: calc(var(--cms-radius) * 1.25); box-shadow: var(--cms-shadow); overflow: hidden; text-align: start; }
.cms-fx-rates__toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: 1rem; padding: 1.25rem 1.25rem .75rem; }
.cms-fx-rates__base { flex: 1 1 260px; max-width: 360px; }
.cms-fx-rates__refresh { margin-inline-start: auto; min-height: 3rem; }
.cms-fx-refresh-icon { display: inline-block; font-size: 1.05rem; line-height: 1; }
.cms-fx-refresh-icon.is-spinning { animation: cms-fx-spin .9s linear infinite; }
@keyframes cms-fx-spin { to { transform: rotate(360deg); } }
.cms-fx-rates__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem; padding: 0 1.25rem 1rem; font-size: .85rem; color: var(--cms-muted); border-bottom: 1px solid var(--cms-border); }
.cms-fx-rates__meta strong { color: var(--cms-text); }
.cms-fx-rates__scroll { max-height: 560px; overflow: auto; }
.cms-fx-table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: .93rem; }
.cms-fx-table th { position: sticky; top: 0; z-index: 1; background: color-mix(in srgb, var(--cms-primary) 5%, var(--cms-surface)); color: var(--cms-muted); font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; text-align: start; padding: .8rem 1.25rem; border-bottom: 1px solid var(--cms-border); }
.cms-fx-table td { padding: .85rem 1.25rem; border-bottom: 1px solid color-mix(in srgb, var(--cms-border) 70%, transparent); vertical-align: middle; }
.cms-fx-table tbody tr { transition: background .15s ease; }
.cms-fx-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--cms-bg) 55%, transparent); }
.cms-fx-table tbody tr:hover { background: color-mix(in srgb, var(--cms-accent) 12%, transparent); }
.cms-fx-table tbody tr:last-child td { border-bottom: 0; }
.cms-fx-table .is-num { text-align: end; font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.cms-fx-table__empty { text-align: center !important; color: var(--cms-muted); padding: 2.5rem 1rem !important; }
.cms-fx-currency { display: flex; align-items: center; gap: .75rem; }
.cms-fx-currency .cms-fx-icon { width: 20px; min-width: 20px; height: 20px; font-size: .5rem; }
.cms-fx-currency b { display: block; line-height: 1.2; }
.cms-fx-currency small { display: block; color: var(--cms-muted); font-size: .8rem; }
.cms-fx-type { display: inline-block; padding: .2rem .65rem; border-radius: 999px; font-size: .74rem; font-weight: 800; background: color-mix(in srgb, var(--cms-primary) 10%, transparent); color: var(--cms-primary); }
.cms-fx-type.is-real { background: #e0f2fe; color: #075985; }
.cms-fx-type.is-metal { background: #fef3c7; color: #92400e; }
.cms-fx-type.is-crypto { background: #ede9fe; color: #5b21b6; }

/* Subscription plans */
.cms-fx-plans__toggle { display: flex; flex-direction: column; align-items: center; gap: .6rem; margin-bottom: 2.25rem; }
.cms-fx-plans__discount { padding: .1rem .5rem; border-radius: 999px; background: var(--cms-accent); color: var(--cms-accent-contrast); font-size: .7rem; font-weight: 800; }
.cms-fx-plans__grid { align-items: stretch; }
.cms-fx-plan { position: relative; display: flex; flex-direction: column; gap: .75rem; padding: 1.75rem 1.5rem 1.5rem; background: var(--cms-surface); color: var(--cms-text); border: 1px solid var(--cms-border); border-radius: calc(var(--cms-radius) * 1.25); box-shadow: var(--cms-shadow); text-align: start; transition: transform .2s ease, box-shadow .2s ease; }
.cms-fx-plan:hover { transform: translateY(-4px); box-shadow: 0 24px 44px -20px rgba(15, 23, 42, .35); }
.cms-fx-plan h3 { margin: 0; font-size: .95rem; letter-spacing: .08em; text-transform: uppercase; color: var(--cms-primary); }
.cms-fx-plan__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: .35rem; margin: 0; padding-bottom: 1rem; border-bottom: 1px dashed var(--cms-border); }
.cms-fx-plan__price strong { font-family: var(--cms-font-heading); font-size: clamp(2rem, 3.2vw, 2.6rem); line-height: 1; }
.cms-fx-plan__currency { align-self: flex-start; font-size: .8rem; font-weight: 800; color: var(--cms-muted); }
.cms-fx-plan__price > span:last-child { color: var(--cms-muted); font-size: .88rem; }
.cms-fx-plan__features { flex: 1; margin: .25rem 0 .75rem; font-size: .93rem; }
.cms-fx-plan__badge { position: absolute; top: 0; inset-inline-end: 1.25rem; transform: translateY(-50%); background: var(--cms-accent); color: var(--cms-accent-contrast); font-size: .72rem; font-weight: 800; letter-spacing: .04em; padding: .3rem .8rem; border-radius: 999px; box-shadow: 0 6px 14px rgba(0, 0, 0, .15); }
.cms-fx-plan.is-highlighted { background: linear-gradient(165deg, var(--cms-primary), color-mix(in srgb, var(--cms-primary) 78%, #000)); color: var(--cms-primary-contrast); border-color: transparent; box-shadow: 0 28px 50px -20px color-mix(in srgb, var(--cms-primary) 70%, transparent); }
.cms-fx-plan.is-highlighted h3 { color: inherit; opacity: .85; }
.cms-fx-plan.is-highlighted .cms-fx-plan__price { border-color: rgba(255, 255, 255, .22); }
.cms-fx-plan.is-highlighted :is(.cms-fx-plan__currency, .cms-fx-plan__price > span:last-child) { color: inherit; opacity: .75; }
@media (min-width: 992px) { .cms-fx-plan.is-highlighted { transform: scale(1.03); } .cms-fx-plan.is-highlighted:hover { transform: scale(1.03) translateY(-4px); } }

@media (max-width: 991px) { .cms-fx-converter-band__inner { grid-template-columns: 1fr; gap: 2rem; } }
@media (max-width: 560px) {
  .cms-fx-converter { padding: 1.15rem; }
  .cms-fx-pair { grid-template-columns: 1fr; }
  .cms-fx-swap { justify-self: center; transform: rotate(90deg); margin: 0; }
  .cms-fx-swap:hover { transform: rotate(270deg); }
  .cms-fx-picker__menu, .cms-fx-pair .cms-fx-field:last-child .cms-fx-picker__menu { inset-inline: 0; width: auto; }
  .cms-fx-rates__toolbar { padding: 1rem; }
  .cms-fx-rates__refresh { margin-inline-start: 0; width: 100%; }
  .cms-fx-rates__meta { padding-inline: 1rem; }
}