/* ============================================================
   ConnectWiz — Marketing Site
   Design system: "Every conversation, one wire"
   Bootstrap 5.3 layer + custom tokens. RTL-safe (logical props).
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
  /* Brand */
  --cw-ink: #0b0f1e;
  --cw-ink-2: #121734;
  --cw-ink-3: #1a2044;
  --cw-paper: #f7f8fc;
  --cw-card: #ffffff;
  --cw-primary: #5457e5;
  --cw-primary-deep: #4144c9;
  --cw-primary-bright: #8b8ef5;
  --cw-primary-tint: #eef0fe;
  --cw-live: #10b981;
  --cw-amber: #f59e0b;
  --cw-danger: #ef4444;

  /* Text */
  --cw-text: #141834;
  --cw-muted: #5b6178;
  --cw-text-on-ink: #eef0fa;
  --cw-muted-on-ink: #9aa1c2;

  /* Lines & shadows */
  --cw-border: rgba(20, 24, 52, 0.09);
  --cw-border-ink: rgba(255, 255, 255, 0.09);
  --cw-shadow-sm: 0 1px 2px rgba(13, 16, 38, 0.05), 0 1px 6px rgba(13, 16, 38, 0.04);
  --cw-shadow-md: 0 2px 6px rgba(13, 16, 38, 0.05), 0 12px 32px rgba(13, 16, 38, 0.09);
  --cw-shadow-lg: 0 4px 12px rgba(13, 16, 38, 0.08), 0 24px 64px rgba(13, 16, 38, 0.16);

  /* Channels — identity only, never status */
  --ch-whatsapp: #25d366;
  --ch-telegram: #26a5e4;
  --ch-messenger: #0084ff;
  --ch-instagram: #e4405f;
  --ch-email: #64748b;
  --ch-x: #111111;
  --ch-youtube: #ff0000;
  --ch-slack: #611f69;
  --ch-google: #4285f4;
  --ch-line: #06c755;
  --ch-wechat: #07c160;
  --ch-viber: #7360f2;
  --ch-zalo: #0068ff;
  --ch-sms: #f59e0b;
  --ch-phone: #10b981;
  --ch-widget: #5457e5;
  --ch-appstore: #0d96f6;
  --ch-play: #01875f;
  --ch-tiktok: #111111;
  --ch-linkedin: #0a66c2;
  --ch-threads: #111111;

  /* Type — IBM Plex Sans Arabic carries the RTL build */
  --cw-font-display: "Bricolage Grotesque", "IBM Plex Sans Arabic", "Inter", system-ui, sans-serif;
  --cw-font-body: "Inter", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Rhythm */
  --cw-radius: 0.75rem;
  --cw-radius-lg: 1.25rem;
  --cw-section-y: clamp(4rem, 9vw, 7.5rem);

  /* Bootstrap bridge */
  --bs-primary: #5457e5;
  --bs-primary-rgb: 84, 87, 229;
  --bs-body-font-family: var(--cw-font-body);
  --bs-body-color: var(--cw-text);
  --bs-body-bg: var(--cw-paper);
  --bs-border-radius: var(--cw-radius);
  --bs-link-color: var(--cw-primary);
  --bs-link-hover-color: var(--cw-primary-deep);
}

/* ---------- 2. Base ---------- */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
  /* `clip` stops decorative overflow from widening the mobile layout viewport
     without creating a scroll container (keeps position:sticky working). */
  overflow-x: hidden;
  overflow-x: clip;
}
body {
  font-family: var(--cw-font-body);
  color: var(--cw-text);
  background: var(--cw-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  overflow-x: clip;
}
::selection { background: var(--cw-primary); color: #fff; }

h1, h2, h3, .display-font {
  font-family: var(--cw-font-display);
  font-weight: 640;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
h4, h5, h6 { font-weight: 650; letter-spacing: -0.01em; }
.lead { color: var(--cw-muted); font-size: 1.125rem; line-height: 1.65; }
p { line-height: 1.65; }
.text-muted { color: var(--cw-muted) !important; }
.tnum { font-variant-numeric: tabular-nums; }

a { text-underline-offset: 3px; }
:focus-visible {
  outline: 2px solid var(--cw-primary);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- 3. Sections & headings ---------- */
.section { padding-block: var(--cw-section-y); position: relative; }
.section-tight { padding-block: calc(var(--cw-section-y) * 0.62); }

.section-ink {
  background:
    radial-gradient(1200px 500px at 80% -10%, rgba(84, 87, 229, 0.16), transparent 60%),
    radial-gradient(900px 420px at 8% 108%, rgba(16, 185, 129, 0.07), transparent 55%),
    var(--cw-ink);
  color: var(--cw-text-on-ink);
}
.section-ink .lead, .section-ink p { color: var(--cw-muted-on-ink); }
.section-ink h1, .section-ink h2, .section-ink h3 { color: #fff; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cw-primary);
  margin-block-end: 1rem;
}
.eyebrow::before {
  content: "";
  inline-size: 1.4rem;
  block-size: 2px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.85;
}
.section-ink .eyebrow { color: var(--cw-primary-bright); }

.section-head { max-inline-size: 46rem; margin-block-end: clamp(2.25rem, 5vw, 3.75rem); }
.section-head h2 { font-size: clamp(1.85rem, 3.6vw, 2.7rem); margin-block-end: 0.85rem; }
.section-head.text-center { margin-inline: auto; }

/* ---------- 4. Navbar ---------- */
.cw-nav {
  background: rgba(11, 15, 30, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-block-end: 1px solid transparent;
  transition: background 0.3s ease, border-color 0.3s ease;
  padding-block: 0.9rem;
}
.cw-nav.is-scrolled {
  background: rgba(11, 15, 30, 0.88);
  border-color: var(--cw-border-ink);
}
.cw-nav .navbar-brand { display: inline-flex; align-items: center; gap: 0.6rem; }
.cw-nav .nav-link {
  color: rgba(238, 240, 250, 0.82);
  font-weight: 530;
  font-size: 0.94rem;
  padding-inline: 0.85rem;
  transition: color 0.2s;
}
.cw-nav .nav-link:hover, .cw-nav .nav-link:focus,
.cw-nav .nav-link.active, .cw-nav .nav-link.show { color: #fff; }
.cw-nav .dropdown-menu {
  border: 1px solid var(--cw-border);
  border-radius: var(--cw-radius);
  box-shadow: var(--cw-shadow-lg);
  padding: 0.55rem;
  margin-block-start: 0.85rem;
}
.cw-nav .dropdown-item {
  border-radius: calc(var(--cw-radius) - 4px);
  padding: 0.62rem 0.8rem;
  font-weight: 530;
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.cw-nav .dropdown-item i { color: var(--cw-primary); font-size: 1.05rem; }
.cw-nav .dropdown-item:hover, .cw-nav .dropdown-item:focus { background: var(--cw-primary-tint); color: var(--cw-primary-deep); }
.cw-nav .dropdown-item small { display: block; font-weight: 450; color: var(--cw-muted); }

.brand-mark {
  inline-size: 34px;
  block-size: 34px;
  border-radius: 10px;
  display: inline-grid;
  place-items: center;
  background: linear-gradient(135deg, var(--cw-primary) 0%, var(--cw-primary-deep) 100%);
  box-shadow: 0 4px 14px rgba(84, 87, 229, 0.45);
}
.brand-word {
  font-family: var(--cw-font-display);
  font-weight: 700;
  font-size: 1.28rem;
  letter-spacing: -0.02em;
  color: #fff;
}
.brand-word .wiz { color: var(--cw-primary-bright); }

@media (max-width: 991.98px) {
  .cw-nav .navbar-collapse {
    background: var(--cw-ink-2);
    border: 1px solid var(--cw-border-ink);
    border-radius: var(--cw-radius);
    padding: 1rem;
    margin-block-start: 0.85rem;
  }
  .cw-nav .nav-link { padding-block: 0.55rem; }
}

/* ---------- Channels mega menu ---------- */
.cw-nav .mega-panel { background: #fff; }
@media (min-width: 992px) {
  .cw-nav .has-mega { position: static; }
  .cw-nav .mega-panel {
    position: absolute;
    inset-inline: 0;
    inset-block-start: 100%;
    inline-size: 100%;
    margin: 0;
    border: 0;
    border-block-start: 1px solid var(--cw-border);
    border-radius: 0 0 1.1rem 1.1rem;
    box-shadow: var(--cw-shadow-lg);
    padding: 1.7rem 0 1.5rem;
  }
}
@media (max-width: 991.98px) {
  .cw-nav .mega-panel {
    border: 1px solid var(--cw-border);
    border-radius: var(--cw-radius);
    padding: 1rem;
    max-block-size: 62vh;
    overflow-y: auto;
  }
}
@media (max-width: 575.98px) {
  /* Two 50% columns clip the status badges on phones — stack them instead. */
  .cw-nav .mega-panel .row > [class*="col-"] { flex: 0 0 100%; max-inline-size: 100%; }
  .cw-nav .mega-panel { overflow-x: hidden; }
}
.mega-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cw-muted);
  margin-block-end: 0.55rem;
  padding-inline-start: 0.55rem;
}
.mega-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.42rem 0.55rem;
  border-radius: 0.55rem;
  color: var(--cw-text);
  font-weight: 550;
  font-size: 0.9rem;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.mega-item i { font-size: 1.05rem; inline-size: 1.35rem; text-align: center; flex: 0 0 auto; }
.mega-item:hover, .mega-item:focus { background: var(--cw-primary-tint); color: var(--cw-primary-deep); }
.mega-badge {
  margin-inline-start: auto;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 999px;
  padding: 0.14rem 0.45rem;
  white-space: nowrap;
}
.mega-badge.premium { color: #92400e; background: rgba(245, 158, 11, 0.14); border: 1px solid rgba(245, 158, 11, 0.35); }
.mega-badge.review { color: var(--cw-muted); background: var(--cw-paper); border: 1px solid var(--cw-border); }
.mega-badge.early { color: #4338ca; background: rgba(84, 87, 229, 0.12); border: 1px solid rgba(84, 87, 229, 0.3); }
.mega-promo {
  display: block;
  background:
    radial-gradient(320px 160px at 90% 0%, rgba(139, 142, 245, 0.35), transparent 60%),
    linear-gradient(135deg, #171c3f 0%, var(--cw-ink) 100%);
  color: #fff;
  border: 1px solid var(--cw-border-ink);
  border-radius: 0.85rem;
  padding: 1.05rem 1.15rem;
  text-decoration: none;
  transition: filter 0.2s;
}
.mega-promo:hover, .mega-promo:focus { color: #fff; filter: brightness(1.12); }
.mega-promo .mp-title { font-weight: 680; font-size: 0.95rem; display: flex; align-items: center; gap: 0.5rem; }
.mega-promo .mp-text { color: var(--cw-muted-on-ink); font-size: 0.8rem; margin-block-start: 0.35rem; line-height: 1.5; }
.mega-links { display: grid; gap: 0.15rem; margin-block-start: 0.9rem; }
.mega-links a {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 620;
  color: var(--cw-primary-deep);
  text-decoration: none;
  font-size: 0.88rem;
  padding: 0.32rem 0.55rem;
  border-radius: 0.5rem;
}
.mega-links a:hover, .mega-links a:focus { background: var(--cw-primary-tint); }

/* ---------- Header action row ----------
   Never wraps: a second row here lands on top of the hero. Everything in it shrinks
   instead, and the pieces that can be dropped are dropped at the widths where they no
   longer fit. */
.cw-nav-actions { gap: 0.5rem; min-inline-size: 0; }
.cw-nav-actions .cw-search { min-inline-size: 0; }
.cw-nav-actions .cw-search .form-control {
  inline-size: clamp(7rem, 11vw, 13rem);
  min-inline-size: 0;
}
.cw-nav-actions .cw-login { padding-inline: 0.6rem; white-space: nowrap; }
.cw-nav-actions .cw-cta { white-space: nowrap; }
.cw-nav .navbar-nav { min-inline-size: 0; }
.cw-nav .navbar-nav .nav-link { white-space: nowrap; }

/* Tighten the row before anything is forced to drop out of it. */
@media (min-width: 992px) and (max-width: 1399.98px) {
  .cw-nav .nav-link { padding-inline: 0.55rem; font-size: 0.9rem; }
  .cw-nav-actions { gap: 0.35rem; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .brand-word { font-size: 1.1rem; }
  .cw-nav .nav-link { padding-inline: 0.42rem; font-size: 0.86rem; }
}

/* Language selector */
.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: rgba(238, 240, 250, 0.82);
  background: transparent;
  border: 1px solid var(--cw-border-ink);
  border-radius: 999px;
  padding: 0.34rem 0.7rem;
  font-size: 0.85rem;
  font-weight: 570;
  white-space: nowrap;
}
.lang-btn:hover, .lang-btn:focus { color: #fff; border-color: rgba(255, 255, 255, 0.28); }
.lang-flag {
  inline-size: 18px;
  block-size: 18px;
  border-radius: 3px;
  object-fit: cover;
  flex: 0 0 auto;
}

/* ---------- Language panel ----------
   Fifty-two languages in a single column runs off the bottom of the screen and cannot be
   reached. The panel is therefore a fixed-height, scrollable grid that gains columns with
   the viewport, with a filter box on top — at this many options, typing two letters beats
   any amount of scrolling. */
.lang-menu {
  inline-size: min(34rem, calc(100vw - 2rem));
  max-inline-size: none;
  padding: 0.6rem;
}
.lang-search {
  position: relative;
  display: flex;
  align-items: center;
  margin-block-end: 0.5rem;
}
.lang-search i {
  position: absolute;
  inset-inline-start: 0.7rem;
  color: var(--cw-muted);
  font-size: 0.9rem;
  pointer-events: none;
}
.lang-search input {
  inline-size: 100%;
  border: 1px solid var(--cw-border);
  border-radius: 999px;
  padding: 0.45rem 0.9rem 0.45rem 2.1rem;
  font-size: 0.9rem;
  background: var(--cw-paper);
  color: inherit;
}
.lang-search input:focus {
  outline: none;
  border-color: var(--cw-primary);
  box-shadow: 0 0 0 3px var(--cw-primary-tint);
}
.lang-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  gap: 0.15rem;
  max-block-size: min(60vh, 26rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.lang-option {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.6rem;
  border-radius: calc(var(--cw-radius) - 6px);
  font-size: 0.9rem;
  font-weight: 530;
  color: inherit;
  text-decoration: none;
  min-inline-size: 0;
}
.lang-option:hover, .lang-option:focus-visible {
  background: var(--cw-primary-tint);
  color: var(--cw-primary-deep);
}
.lang-option.is-current { background: var(--cw-primary); color: #fff; }
.lang-option.is-current .lang-tick { margin-inline-start: auto; }
.lang-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lang-option[hidden] { display: none; }
.lang-empty {
  margin: 0;
  padding: 0.9rem 0.6rem;
  text-align: center;
  color: var(--cw-muted);
  font-size: 0.9rem;
}

/* On a phone the panel is the screen, not a tooltip hanging off a button. */
@media (max-width: 575.98px) {
  .lang-menu {
    position: fixed !important;
    inset-block-end: 0;
    inset-inline: 0;
    inset-block-start: auto !important;
    transform: none !important;
    inline-size: 100%;
    max-inline-size: 100%;
    border-start-start-radius: var(--cw-radius);
    border-start-end-radius: var(--cw-radius);
    border-end-start-radius: 0;
    border-end-end-radius: 0;
    margin: 0;
    padding: 0.9rem;
  }
  .lang-grid {
    grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
    max-block-size: 50vh;
  }
  .lang-option { padding-block: 0.65rem; }
}
.lang-menu .dropdown-item.disabled { opacity: 0.55; }
.lang-menu .soon {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cw-muted);
  background: var(--cw-paper);
  border: 1px solid var(--cw-border);
  border-radius: 999px;
  padding: 0.1rem 0.45rem;
  margin-inline-start: auto;
}

/* ---------- 5. Buttons ---------- */
.btn { font-weight: 620; border-radius: 0.65rem; padding: 0.62rem 1.25rem; }
.btn-cw {
  background: linear-gradient(180deg, #6a6df0 0%, var(--cw-primary) 55%, var(--cw-primary-deep) 100%);
  border: 1px solid var(--cw-primary-deep);
  color: #fff;
  box-shadow: 0 6px 18px rgba(84, 87, 229, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}
.btn-cw:hover, .btn-cw:focus {
  color: #fff;
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(84, 87, 229, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.btn-cw:active { transform: translateY(0); }
.btn-ghost-ink {
  color: var(--cw-text-on-ink);
  border: 1px solid var(--cw-border-ink);
  background: rgba(255, 255, 255, 0.03);
}
.btn-ghost-ink:hover, .btn-ghost-ink:focus { color: #fff; border-color: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.07); }
.btn-ghost-light { color: var(--cw-text); border: 1px solid rgba(20, 24, 52, 0.16); background: #fff; }
.btn-ghost-light:hover, .btn-ghost-light:focus { border-color: var(--cw-primary); color: var(--cw-primary-deep); background: #fff; }
.btn-lg { padding: 0.8rem 1.65rem; font-size: 1.02rem; }
.btn-link-arrow {
  font-weight: 620;
  color: var(--cw-primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.btn-link-arrow i { transition: transform 0.2s; }
.btn-link-arrow:hover i { transform: translateX(3px); }
[dir="rtl"] .btn-link-arrow:hover i { transform: translateX(-3px) scaleX(-1); }

/* An arrow is not Bidi_Mirrored, so the bidi algorithm never flips it: `bi-arrow-right`
   keeps pointing right in Hebrew and Arabic, where forward is LEFT. It therefore read as
   "back" on every card and CTA — 25 of them on the Hebrew home page alone. Four call
   sites emit the glyph (helper.php:734 and :941, cw_logo_band.php:41, cw_cta.php:31) and
   only one sits inside .btn-link-arrow, so the hover mirror above never reached the rest.
   Flip the glyph itself; the <i> is inline by default and a transform would not apply. */
[dir="rtl"] .bi-arrow-right { display: inline-block; transform: scaleX(-1); }

/* Two things no translator can write around, because neither is a translatable segment.
   Both were found by reading RTL pages through a bidi renderer, not by reading the map.

   1. `<code>` is code, and code is left-to-right. In an RTL paragraph `</body>` draws as
      `<body/>` — mirrored AND reordered — and a bare `!important` draws `important!`.
      Every wording that was tried was equal or worse, in fa, ar, he and ur alike.
   2. A stat value is usually a figure, but sometimes a phrase. `★1–5` draws `5–1★` and
      `~97` draws `97~`, while the same class elsewhere holds real Hebrew (`עד 30 דקות`)
      that must stay RTL. `unicode-bidi: plaintext` takes the direction from the element's
      own first strong character and falls back to the `direction` below when there is
      none — so a figure goes LTR and a sentence stays RTL, with no markup change. */
[dir="rtl"] code,
[dir="rtl"] pre { direction: ltr; unicode-bidi: isolate; text-align: left; }

[dir="rtl"] .mini-stat .v,
[dir="rtl"] .tnum { direction: ltr; unicode-bidi: plaintext; }

/* The chat mocks quote real customer messages in Chinese, Vietnamese and Arabic, and the
   same markup serves all 52 locales. In an RTL page a Chinese bubble ending `吗？` draws
   its question mark at the far LEFT, because full-width `？` and `。` are neutrals that
   take the paragraph level. Four RTL locales shipped it, and no translator can fix it
   without mutilating the quoted message.

   `plaintext` gives each bidi paragraph — and `<br>` starts one — the direction of its
   own first strong character: the Latin agent tag reads LTR, the Chinese line reads LTR
   with its punctuation attached, an Arabic line still reads RTL. `direction` is left
   alone so the bubbles keep their right-aligned layout. */
[dir="rtl"] .bubble { unicode-bidi: plaintext; }

/* ---------- 6. Hero ---------- */
.hero {
  padding-block-start: clamp(7rem, 14vw, 10.5rem);
  padding-block-end: clamp(4rem, 8vw, 7rem);
  overflow: hidden;
}
.hero h1 {
  font-size: clamp(2.4rem, 5.4vw, 4.05rem);
  line-height: 1.06;
  margin-block-end: 1.35rem;
}
.hero .lead { font-size: clamp(1.05rem, 1.6vw, 1.22rem); max-inline-size: 36rem; }

.rotator {
  display: inline-block;
  position: relative;
  color: var(--cw-primary-bright);
  min-inline-size: 6ch;
}
.rotator .word {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  opacity: 0;
  transform: translateY(0.6em);
  transition: opacity 0.4s ease, transform 0.4s ease;
  white-space: nowrap;
}
.rotator .word.is-active { position: relative; opacity: 1; transform: translateY(0); }
.rotator .word.is-leaving { opacity: 0; transform: translateY(-0.6em); }

.hero-badges { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-block-start: 1.9rem; }
.trust-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.83rem;
  font-weight: 560;
  color: var(--cw-muted-on-ink);
  border: 1px solid var(--cw-border-ink);
  border-radius: 999px;
  padding: 0.38rem 0.85rem;
  background: rgba(255, 255, 255, 0.03);
}
.trust-chip i { color: var(--cw-live); }

/* ---------- 7. Inbox mockup ---------- */
.mock-window {
  background: #fdfdff;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 1.1rem;
  box-shadow: 0 40px 90px rgba(3, 5, 16, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  color: var(--cw-text);
  font-size: 0.8rem;
}
.mock-titlebar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.9rem;
  background: var(--cw-ink);
  color: var(--cw-muted-on-ink);
}
.mock-dots { display: flex; gap: 0.32rem; }
.mock-dots span { inline-size: 9px; block-size: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.22); }
.mock-body { display: grid; grid-template-columns: 200px 1fr; min-block-size: 380px; }
@media (max-width: 575.98px) { .mock-body { grid-template-columns: 1fr; } .mock-list { display: none; } }

.mock-list { border-inline-end: 1px solid var(--cw-border); background: #fafbff; padding: 0.55rem; }
.mock-conv {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.55rem;
  border-radius: 0.55rem;
  transition: background 0.25s;
}
.mock-conv.active { background: var(--cw-primary-tint); }
.mock-conv .avatar {
  position: relative;
  flex: 0 0 auto;
  inline-size: 30px;
  block-size: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 700;
  font-size: 0.72rem;
}
.mock-conv .avatar .ch {
  position: absolute;
  inset-block-end: -3px;
  inset-inline-end: -3px;
  inline-size: 15px;
  block-size: 15px;
  border-radius: 50%;
  border: 2px solid #fafbff;
  display: grid;
  place-items: center;
  font-size: 8px;
  color: #fff;
}
.mock-conv .meta { min-inline-size: 0; }
.mock-conv .meta .name { font-weight: 640; font-size: 0.76rem; line-height: 1.2; }
.mock-conv .meta .prev {
  color: var(--cw-muted);
  font-size: 0.7rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-inline-size: 118px;
}
.mock-thread { display: flex; flex-direction: column; }
.mock-thread-head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.65rem 0.95rem;
  border-block-end: 1px solid var(--cw-border);
  background: #fff;
}
.mock-thread-head .status { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.7rem; font-weight: 600; color: var(--cw-live); }
.pulse-dot { inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--cw-live); position: relative; }
.pulse-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--cw-live);
  opacity: 0;
  animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse { 0% { transform: scale(0.5); opacity: 0.8; } 70%, 100% { transform: scale(1.25); opacity: 0; } }

.mock-msgs { flex: 1; padding: 0.95rem; display: flex; flex-direction: column; gap: 0.6rem; background: #fdfdff; }
.bubble {
  max-inline-size: 78%;
  padding: 0.55rem 0.8rem;
  border-radius: 0.85rem;
  font-size: 0.78rem;
  line-height: 1.45;
  box-shadow: var(--cw-shadow-sm);
  opacity: 0;
  transform: translateY(10px) scale(0.97);
}
.bubble.shown { opacity: 1; transform: none; transition: opacity 0.4s ease, transform 0.4s ease; }
.bubble-in { align-self: flex-start; background: #fff; border: 1px solid var(--cw-border); border-start-start-radius: 0.25rem; }
.bubble-out { align-self: flex-end; background: linear-gradient(135deg, #6a6df0, var(--cw-primary-deep)); color: #fff; border-start-end-radius: 0.25rem; }
.bubble-out .tick { opacity: 0.75; font-size: 0.68rem; margin-inline-start: 0.3rem; }
.bubble-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-block-end: 0.25rem;
  opacity: 0.85;
}
.typing { display: inline-flex; gap: 4px; padding: 0.62rem 0.85rem; }
.typing span { inline-size: 6px; block-size: 6px; border-radius: 50%; background: #b6bad1; animation: blink 1.2s infinite; }
.typing span:nth-child(2) { animation-delay: 0.18s; }
.typing span:nth-child(3) { animation-delay: 0.36s; }
@keyframes blink { 0%, 80%, 100% { opacity: 0.25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }

.mock-composer {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  border-block-start: 1px solid var(--cw-border);
  background: #fff;
  padding: 0.6rem 0.8rem;
  color: var(--cw-muted);
  font-size: 0.76rem;
}
.mock-composer .send {
  margin-inline-start: auto;
  inline-size: 30px;
  block-size: 30px;
  border-radius: 8px;
  background: var(--cw-primary);
  color: #fff;
  display: grid;
  place-items: center;
}

/* Floating channel chips around the mock */
.hero-mock-wrap { position: relative; }
.float-chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: #fff;
  color: var(--cw-text);
  font-size: 0.78rem;
  font-weight: 640;
  border-radius: 999px;
  padding: 0.42rem 0.85rem;
  box-shadow: var(--cw-shadow-md);
  border: 1px solid var(--cw-border);
  animation: floaty 6s ease-in-out infinite;
  z-index: 2;
}
.float-chip i { font-size: 1rem; }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@media (max-width: 991.98px) { .float-chip { display: none; } }

/* ---------- 8. Channel chips & marquee ---------- */
.ch-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 620;
  font-size: 0.92rem;
  padding: 0.55rem 1.05rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--cw-border);
  box-shadow: var(--cw-shadow-sm);
  white-space: nowrap;
}
.ch-chip i { font-size: 1.12rem; }
.section-ink .ch-chip { background: rgba(255, 255, 255, 0.05); border-color: var(--cw-border-ink); color: var(--cw-text-on-ink); box-shadow: none; }

.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track { display: flex; gap: 0.85rem; inline-size: max-content; animation: marquee 38s linear infinite; padding-block: 0.5rem; }
.marquee-track.reverse { animation-direction: reverse; animation-duration: 46s; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
[dir="rtl"] .marquee-track { animation-name: marquee-rtl; }
@keyframes marquee-rtl { to { transform: translateX(50%); } }

/* ---------- 9. Cards ---------- */
.cw-card {
  background: var(--cw-card);
  border: 1px solid var(--cw-border);
  border-radius: var(--cw-radius-lg);
  box-shadow: var(--cw-shadow-sm);
  padding: 1.75rem;
  block-size: 100%;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.cw-card:hover { transform: translateY(-4px); box-shadow: var(--cw-shadow-md); border-color: rgba(84, 87, 229, 0.28); }
.cw-card h3, .cw-card h4 { font-size: 1.12rem; margin-block: 1rem 0.5rem; }
.cw-card p { color: var(--cw-muted); font-size: 0.94rem; margin-block-end: 0; }
.cw-card .icon-tile {
  inline-size: 46px;
  block-size: 46px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 1.3rem;
  color: var(--cw-primary);
  background: var(--cw-primary-tint);
  border: 1px solid rgba(84, 87, 229, 0.18);
}
.section-ink .cw-card { background: var(--cw-ink-2); border-color: var(--cw-border-ink); }
.section-ink .cw-card h3, .section-ink .cw-card h4 { color: #fff; }
.section-ink .cw-card p { color: var(--cw-muted-on-ink); }
.section-ink .cw-card .icon-tile { background: rgba(84, 87, 229, 0.16); border-color: rgba(139, 142, 245, 0.3); color: var(--cw-primary-bright); }

.feature-row { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (min-width: 992px) { .feature-row { grid-template-columns: 1fr 1fr; } }
.feature-row + .feature-row { margin-block-start: clamp(3.5rem, 7vw, 6rem); }
.feature-row h3 { font-size: clamp(1.45rem, 2.4vw, 1.9rem); margin-block-end: 0.9rem; }
.check-list { list-style: none; padding: 0; margin: 1.25rem 0 0; display: grid; gap: 0.7rem; }
.check-list li { display: flex; gap: 0.65rem; align-items: flex-start; color: var(--cw-text); font-size: 0.97rem; }
.check-list li i { color: var(--cw-live); margin-block-start: 0.15rem; }
.section-ink .check-list li { color: var(--cw-text-on-ink); }

/* Panel-style visual frames used in feature rows */
.frame {
  border-radius: var(--cw-radius-lg);
  border: 1px solid var(--cw-border);
  background: #fff;
  color: var(--cw-text); /* frames are always light surfaces, even inside ink sections */
  box-shadow: var(--cw-shadow-md);
  overflow: hidden;
}
.section-ink .frame p, .frame p { color: var(--cw-muted); }
.frame-pad { padding: 1.4rem; }
.frame-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 1.1rem;
  border-block-end: 1px solid var(--cw-border);
  background: #fafbff;
  font-weight: 640;
  font-size: 0.88rem;
}
.frame-head i { color: var(--cw-primary); }

/* ---------- 10. Stats ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--cw-border-ink); border: 1px solid var(--cw-border-ink); border-radius: var(--cw-radius-lg); overflow: hidden; }
@media (min-width: 768px) { .stat-grid { grid-template-columns: repeat(4, 1fr); } }
.stat-cell { background: var(--cw-ink-2); padding: 1.9rem 1.5rem; }
.stat-cell .num {
  font-family: var(--cw-font-display);
  font-variant-numeric: tabular-nums;
  font-size: clamp(2rem, 3.6vw, 2.7rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
}
.stat-cell .num .suffix { color: var(--cw-primary-bright); }
.stat-cell .lbl { color: var(--cw-muted-on-ink); font-size: 0.88rem; margin-block-start: 0.3rem; }

/* ---------- 11. Steps ---------- */
.step-card { position: relative; padding-inline-start: 3.4rem; }
.step-card .n {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: -0.2rem;
  font-family: var(--cw-font-display);
  font-size: 2.1rem;
  font-weight: 700;
  color: transparent;
  -webkit-text-stroke: 1.4px var(--cw-primary);
  font-variant-numeric: tabular-nums;
}
.step-card h4 { font-size: 1.08rem; }
.step-card p { color: var(--cw-muted); font-size: 0.94rem; }

/* ---------- 12. Tabs showcase ---------- */
.cw-tabs .nav-pills { gap: 0.5rem; }
.cw-tabs .nav-link {
  color: var(--cw-text);
  font-weight: 600;
  border: 1px solid var(--cw-border);
  border-radius: 999px;
  background: #fff;
  padding: 0.55rem 1.15rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.cw-tabs .nav-link.active { background: var(--cw-ink); border-color: var(--cw-ink); color: #fff; }
.cw-tabs .tab-pane { padding-block-start: 2.25rem; }

/* ---------- 13. Testimonials ---------- */
.quote-card { display: flex; flex-direction: column; gap: 1.1rem; }
.quote-card .stars { color: var(--cw-amber); font-size: 0.9rem; letter-spacing: 2px; }
.quote-card blockquote { font-size: 1rem; line-height: 1.6; color: var(--cw-text); margin: 0; }
.section-ink .quote-card blockquote { color: var(--cw-text-on-ink); }
.section-ink .quote-card .who .rl { color: var(--cw-muted-on-ink); }
.quote-card .who { display: flex; align-items: center; gap: 0.75rem; margin-block-start: auto; }
.quote-card .who .avatar {
  inline-size: 40px;
  block-size: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  color: #fff;
  font-size: 0.85rem;
}
.quote-card .who .nm { font-weight: 650; font-size: 0.92rem; line-height: 1.25; }
.quote-card .who .rl { color: var(--cw-muted); font-size: 0.8rem; }

/* ---------- 14. Pricing ---------- */
.billing-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: #fff;
  border: 1px solid var(--cw-border);
  border-radius: 999px;
  padding: 0.3rem;
}
.billing-toggle button {
  border: 0;
  background: transparent;
  font-weight: 620;
  font-size: 0.92rem;
  color: var(--cw-muted);
  border-radius: 999px;
  padding: 0.5rem 1.2rem;
  transition: all 0.2s;
}
.billing-toggle button.active { background: var(--cw-ink); color: #fff; }
.billing-toggle .save {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--cw-live);
  background: rgba(16, 185, 129, 0.1);
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  margin-inline-start: 0.35rem;
}
.billing-toggle button.active .save { color: #86efac; background: rgba(16, 185, 129, 0.22); }

.price-card { position: relative; display: flex; flex-direction: column; padding: 2rem 1.75rem; }
.price-card .plan-name { font-weight: 700; font-size: 1.05rem; display: flex; align-items: center; gap: 0.5rem; }
.price-card .plan-for { color: var(--cw-muted); font-size: 0.85rem; margin-block: 0.25rem 1.25rem; }
.price-card .price { font-family: var(--cw-font-display); font-variant-numeric: tabular-nums; font-size: 2.55rem; font-weight: 700; line-height: 1; }
.price-card .price .cur { font-size: 1.3rem; vertical-align: 0.5em; margin-inline-end: 0.1rem; }
.price-card .price .per { font-family: var(--cw-font-body); font-size: 0.85rem; font-weight: 500; color: var(--cw-muted); }
.price-card .plan-cta { margin-block: 1.4rem; }
.price-card .inc { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cw-muted); margin-block-end: 0.7rem; }
.price-card .check-list li { font-size: 0.9rem; }
.price-card.featured { border-color: var(--cw-primary); border-width: 2px; box-shadow: 0 12px 44px rgba(84, 87, 229, 0.2); }
.price-card.featured:hover { transform: translateY(-4px); }
.plan-flag {
  position: absolute;
  inset-block-start: -0.85rem;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  background: var(--cw-primary);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 0.3rem 0.9rem;
  white-space: nowrap;
}
[dir="rtl"] .plan-flag { transform: translateX(50%); }

.compare-table { font-size: 0.92rem; }
.compare-table th { font-weight: 650; }
.compare-table thead th { border-block-end: 2px solid var(--cw-ink) !important; padding-block: 1rem; }
.compare-table td, .compare-table th { padding: 0.8rem 1rem; vertical-align: middle; }
.compare-table .group-row th {
  background: var(--cw-primary-tint);
  color: var(--cw-primary-deep);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.compare-table i.bi-check-lg { color: var(--cw-live); font-size: 1.15rem; }
.compare-table i.bi-dash { color: #c3c7d9; font-size: 1.15rem; }

/* ---------- 15. FAQ / accordion ---------- */
.cw-accordion .accordion-item {
  border: 1px solid var(--cw-border);
  border-radius: var(--cw-radius) !important;
  margin-block-end: 0.75rem;
  overflow: hidden;
  background: #fff;
}
.cw-accordion .accordion-button {
  font-weight: 630;
  font-size: 1rem;
  color: var(--cw-text);
  background: #fff;
  padding: 1.15rem 1.4rem;
  box-shadow: none;
}
.cw-accordion .accordion-button:not(.collapsed) { color: var(--cw-primary-deep); background: #fff; }
.cw-accordion .accordion-button:focus { box-shadow: none; }
.cw-accordion .accordion-body { color: var(--cw-muted); padding: 0 1.4rem 1.3rem; line-height: 1.65; }

/* ---------- 16. CTA band ---------- */
.cta-band {
  border-radius: calc(var(--cw-radius-lg) * 1.2);
  background:
    radial-gradient(700px 300px at 85% 0%, rgba(139, 142, 245, 0.28), transparent 60%),
    radial-gradient(500px 260px at 10% 100%, rgba(16, 185, 129, 0.12), transparent 55%),
    linear-gradient(135deg, #171c3f 0%, var(--cw-ink) 100%);
  border: 1px solid var(--cw-border-ink);
  padding: clamp(2.5rem, 6vw, 4.5rem);
  color: var(--cw-text-on-ink);
  position: relative;
  overflow: hidden;
}
.cta-band h2 { color: #fff; font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.cta-band p { color: var(--cw-muted-on-ink); }

/* ---------- 17. Footer ---------- */
.cw-footer { background: var(--cw-ink); color: var(--cw-muted-on-ink); border-block-start: 1px solid var(--cw-border-ink); }
.cw-footer .foot-title { color: #fff; font-weight: 650; font-size: 0.9rem; margin-block-end: 1rem; }
.cw-footer a { color: var(--cw-muted-on-ink); text-decoration: none; font-size: 0.9rem; transition: color 0.2s; }
.cw-footer a:hover, .cw-footer a:focus { color: #fff; }
.cw-footer .foot-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; }
.cw-footer .foot-bottom { border-block-start: 1px solid var(--cw-border-ink); font-size: 0.84rem; }
.cw-footer .soc a {
  display: inline-grid;
  place-items: center;
  inline-size: 38px;
  block-size: 38px;
  border-radius: 10px;
  border: 1px solid var(--cw-border-ink);
  font-size: 1.05rem;
}
.cw-footer .soc a:hover { border-color: rgba(255, 255, 255, 0.35); color: #fff; }
.compliance-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.78rem;
  font-weight: 600;
  border: 1px solid var(--cw-border-ink);
  border-radius: 8px;
  padding: 0.42rem 0.75rem;
  color: var(--cw-muted-on-ink);
}
.compliance-chip i { color: var(--cw-live); }

/* ---------- 18. Page hero (subpages) ---------- */
.page-hero { padding-block-start: clamp(6.5rem, 12vw, 9rem); padding-block-end: clamp(3rem, 6vw, 5rem); }
.page-hero h1 { font-size: clamp(2.1rem, 4.6vw, 3.3rem); line-height: 1.08; }
.page-hero .lead { max-inline-size: 40rem; }
.breadcrumb { --bs-breadcrumb-divider-color: var(--cw-muted-on-ink); font-size: 0.84rem; }
.breadcrumb a { color: var(--cw-muted-on-ink); text-decoration: none; }
.breadcrumb a:hover { color: #fff; }
.breadcrumb .active { color: var(--cw-text-on-ink); }

/* ---------- 19. Channel grid ---------- */
.channel-card { position: relative; display: flex; flex-direction: column; gap: 0.65rem; padding: 1.4rem; }
.channel-card h3 a:hover { color: var(--cw-primary-deep); }
.channel-card .top { display: flex; align-items: center; gap: 0.75rem; }
.channel-card .glyph {
  inline-size: 44px;
  block-size: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 1.25rem;
  flex: 0 0 auto;
}
.channel-card h3 { font-size: 1.02rem; margin: 0; }
.channel-card .tagline { font-size: 0.8rem; color: var(--cw-muted); }
.channel-card p { font-size: 0.88rem; }
.channel-card .caps { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-block-start: 0.25rem; }
.cap-chip {
  font-size: 0.7rem;
  font-weight: 620;
  color: var(--cw-muted);
  background: var(--cw-paper);
  border: 1px solid var(--cw-border);
  border-radius: 999px;
  padding: 0.16rem 0.55rem;
}
.badge-soon {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--cw-amber);
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 999px;
  padding: 0.18rem 0.6rem;
}

/* ---------- 20. Forms ---------- */
.form-control, .form-select {
  border: 1px solid rgba(20, 24, 52, 0.16);
  border-radius: 0.65rem;
  padding: 0.7rem 0.95rem;
  font-size: 0.95rem;
}
.form-control:focus, .form-select:focus { border-color: var(--cw-primary); box-shadow: 0 0 0 0.25rem rgba(84, 87, 229, 0.14); }
.form-label { font-weight: 600; font-size: 0.88rem; }

/* ---------- 21. Reveal animations ---------- */
/* Hidden state applies only when JS is running (html.js-enabled) — content is
   always visible for no-JS visitors and crawlers. */
.reveal { transition: opacity 0.7s cubic-bezier(0.2, 0.6, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.6, 0.2, 1); }
.js-enabled .reveal { opacity: 0; transform: translateY(26px); }
.js-enabled .reveal.in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: 0.08s; }
.reveal-d2 { transition-delay: 0.16s; }
.reveal-d3 { transition-delay: 0.24s; }
.reveal-d4 { transition-delay: 0.32s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .js-enabled .reveal { opacity: 1; transform: none; transition: none; }
  .marquee-track, .float-chip, .pulse-dot::after, .typing span { animation: none !important; }
  .bubble { opacity: 1; transform: none; }
  .rotator .word { transition: none; }
}

/* ---------- 22. Utilities ---------- */
.grid-fade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(900px 480px at 50% 0%, #000 30%, transparent 75%);
  mask-image: radial-gradient(900px 480px at 50% 0%, #000 30%, transparent 75%);
}
.divider-soft { border: 0; border-block-start: 1px solid var(--cw-border); opacity: 1; margin: 0; }
.mw-46 { max-inline-size: 46rem; }
.avatar-a { background: linear-gradient(135deg, #f472b6, #db2777); }
.avatar-b { background: linear-gradient(135deg, #60a5fa, #2563eb); }
.avatar-c { background: linear-gradient(135deg, #34d399, #059669); }
.avatar-d { background: linear-gradient(135deg, #fbbf24, #d97706); }
.avatar-e { background: linear-gradient(135deg, #a78bfa, #7c3aed); }

.logo-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2.25rem 3rem; opacity: 0.75; }
.logo-strip .word-logo {
  font-family: var(--cw-font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: var(--cw-muted-on-ink);
  white-space: nowrap;
}

/* Sticky side nav on long pages */
@media (min-width: 992px) {
  .sticky-aside { position: sticky; inset-block-start: 6.5rem; }
}

/* ---------- 23. Blog ---------- */
.post-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.post-cover {
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 2.6rem;
  position: relative;
}
.post-cover img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
.post-cover .cover-badge { z-index: 1; }
.post-cover-fallback-icon { position: relative; }
.post-cover .cover-badge {
  position: absolute;
  inset-block-start: 0.9rem;
  inset-inline-start: 0.9rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  background: rgba(11, 15, 30, 0.55);
  backdrop-filter: blur(6px);
  color: #fff;
  border-radius: 999px;
  padding: 0.28rem 0.7rem;
}
.post-pad { padding: 1.4rem 1.5rem 1.5rem; display: flex; flex-direction: column; gap: 0.6rem; flex: 1; }
.post-card h3 { font-size: 1.12rem; margin: 0; line-height: 1.35; }
.post-card h3 a { color: var(--cw-text); text-decoration: none; }
.post-card h3 a:hover { color: var(--cw-primary-deep); }
.post-card .excerpt { color: var(--cw-muted); font-size: 0.9rem; margin: 0; }
.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  color: var(--cw-muted);
  font-size: 0.8rem;
  margin-block-start: auto;
  padding-block-start: 0.5rem;
}
.post-meta .dot { inline-size: 3px; block-size: 3px; border-radius: 50%; background: currentColor; opacity: 0.5; }

.featured-post { display: grid; overflow: hidden; padding: 0; }
@media (min-width: 992px) { .featured-post { grid-template-columns: 1.15fr 1fr; } }
.featured-post .post-cover { aspect-ratio: auto; min-block-size: 260px; font-size: 3.4rem; }
.featured-post .post-pad { padding: 2rem; }
.featured-post h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.featured-post h2 a { color: var(--cw-text); text-decoration: none; }
.featured-post h2 a:hover { color: var(--cw-primary-deep); }

/* Content imagery */
.img-frame {
  display: block;
  inline-size: 100%;
  block-size: auto;
  border-radius: var(--cw-radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 24px 60px rgba(3, 5, 16, 0.45);
}
.section .img-frame { border-color: var(--cw-border); box-shadow: var(--cw-shadow-md); }
.post-hero-img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  border-radius: var(--cw-radius-lg);
  border: 1px solid var(--cw-border);
  box-shadow: var(--cw-shadow-lg);
  margin-block-start: clamp(-4.5rem, -6vw, -2rem);
  position: relative;
}

/* Post detail typography */
.post-hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; font-size: 0.86rem; color: var(--cw-muted-on-ink); }
.post-body { max-inline-size: 44rem; margin-inline: auto; font-size: 1.04rem; line-height: 1.8; color: var(--cw-text); }
.post-body .lede { font-size: 1.18rem; color: var(--cw-muted); line-height: 1.7; }
.post-body h2 {
  font-size: 1.55rem;
  margin-block: 2.6rem 0.9rem;
  letter-spacing: -0.01em;
}
.post-body h3 { font-size: 1.18rem; margin-block: 2rem 0.7rem; }
.post-body p { margin-block-end: 1.2rem; }
.post-body ul, .post-body ol { margin-block-end: 1.2rem; padding-inline-start: 1.4rem; display: grid; gap: 0.45rem; }
.post-body a { color: var(--cw-primary-deep); }
.post-body blockquote {
  border-inline-start: 3px solid var(--cw-primary);
  background: var(--cw-primary-tint);
  border-radius: 0 var(--cw-radius) var(--cw-radius) 0;
  padding: 1rem 1.25rem;
  margin-block: 1.6rem;
  font-weight: 550;
  color: var(--cw-primary-deep);
}
[dir="rtl"] .post-body blockquote { border-radius: var(--cw-radius) 0 0 var(--cw-radius); }
.post-body .callout {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  border: 1px solid var(--cw-border);
  background: #fff;
  border-radius: var(--cw-radius);
  padding: 1.1rem 1.25rem;
  margin-block: 1.6rem;
  box-shadow: var(--cw-shadow-sm);
  font-size: 0.95rem;
}
.post-body .callout i { color: var(--cw-primary); font-size: 1.2rem; margin-block-start: 0.1rem; }
.post-body table { inline-size: 100%; font-size: 0.92rem; margin-block: 1.4rem; }
.post-body table th { background: var(--cw-primary-tint); color: var(--cw-primary-deep); font-weight: 650; }
.post-body table th, .post-body table td { border: 1px solid var(--cw-border); padding: 0.6rem 0.8rem; }
.post-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }

/* ---------- 24. Channel detail pages ---------- */
.channel-hero-glyph {
  inline-size: 64px;
  block-size: 64px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 2rem;
  box-shadow: 0 12px 32px rgba(3, 5, 16, 0.45);
  flex: 0 0 auto;
}
.mini-stat {
  background: #fff;
  border: 1px solid var(--cw-border);
  border-radius: var(--cw-radius);
  padding: 1rem 1.2rem;
}
.mini-stat .v { font-family: var(--cw-font-display); font-weight: 700; font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.mini-stat .k { color: var(--cw-muted); font-size: 0.8rem; }

/* Sticky in-page section nav (deep channel pages) */
.subnav {
  position: sticky;
  inset-block-start: 4.7rem; /* sits under the fixed main nav */
  z-index: 1010;
  background: rgba(247, 248, 252, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-block-end: 1px solid var(--cw-border);
}
.subnav .subnav-track {
  display: flex;
  gap: 0.4rem;
  overflow-x: auto;
  padding-block: 0.65rem;
  scrollbar-width: none;
}
.subnav .subnav-track::-webkit-scrollbar { display: none; }
.subnav a {
  flex: 0 0 auto;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--cw-muted);
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  white-space: nowrap;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}
.subnav a:hover, .subnav a:focus { color: var(--cw-primary-deep); background: var(--cw-primary-tint); }
.subnav a.is-active { color: #fff; background: var(--cw-ink); border-color: var(--cw-ink); }
.anchor-target { scroll-margin-block-start: 9.5rem; }

/* Fee explainer table */
.fee-table { font-size: 0.92rem; }
.fee-table th, .fee-table td { padding: 0.75rem 1rem; vertical-align: top; }
.fee-table thead th { border-block-end: 2px solid var(--cw-ink) !important; }
.fee-free { color: var(--cw-live); font-weight: 650; white-space: nowrap; }
.fee-paid { color: var(--cw-amber); font-weight: 650; white-space: nowrap; }

/* Chat demo loops — conversation frames that replay themselves.
   Armed only when JS runs; markup ships fully visible for no-JS/crawlers.
   All steps keep their layout slot while hidden (opacity only), and the
   typing indicator is absolutely positioned OVER the upcoming bubble's
   slot — the frame's height never changes during the loop. */
.chat-demo-armed { position: relative; }
.js-enabled .chat-demo-armed > :not(.bubble) {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.js-enabled .chat-demo-armed > :not(.bubble).chat-shown { opacity: 1; transform: none; }
.chat-demo-typing {
  position: absolute;
  margin: 0;
  background: #fff;
  border: 1px solid var(--cw-border);
  border-start-start-radius: 0.25rem;
}
.chat-demo-typing.t-out {
  background: var(--cw-primary-tint);
  border-color: rgba(84, 87, 229, 0.3);
  border-start-start-radius: 0.85rem;
  border-start-end-radius: 0.25rem;
}
.chat-demo-typing.t-out span { background: var(--cw-primary); opacity: 0.7; }
@media (prefers-reduced-motion: reduce) {
  .js-enabled .chat-demo-armed > :not(.bubble) { opacity: 1; transform: none; transition: none; }
}

/* Premium channel ribbon */
.premium-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fcd34d;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 999px;
  padding: 0.3rem 0.8rem;
}

/* ---------- Stage scenes — bespoke per-page hero animations ----------
   A .stage holds absolutely-positioned scenery; children with data-s are
   revealed in order by main.js (2s hold, then replay). Everything is laid
   out up-front and only fades/transforms, so the frame height never moves. */
.stage { position: relative; inline-size: 100%; }
.stage-armed [data-s] { opacity: 0; transform: translateY(12px); transition: opacity .55s ease, transform .55s ease; }
.stage-armed [data-s].on { opacity: 1; transform: none; }
.stage-armed .sg-pop[data-s] { transform: scale(.55); }
.stage-armed .sg-pop[data-s].on { transform: scale(1); }
.stage-armed .sg-left[data-s] { transform: translateX(-18px); }
.stage-armed .sg-right[data-s] { transform: translateX(18px); }
.stage-armed .sg-left[data-s].on, .stage-armed .sg-right[data-s].on { transform: none; }
/* SVG stroke draw-in (set --len to the path length) */
.stage-armed .sg-draw[data-s] { opacity: 1; transform: none; stroke-dasharray: var(--len, 140); stroke-dashoffset: var(--len, 140); transition: stroke-dashoffset .9s ease .1s; }
.stage-armed .sg-draw[data-s].on { stroke-dashoffset: 0; }

/* Scene widgets */
.sg-node {
  position: absolute; display: inline-flex; align-items: center; gap: .45rem;
  padding: .45rem .65rem; background: var(--cw-card); border: 1px solid var(--cw-border);
  border-radius: .6rem; font-size: .78rem; font-weight: 600; color: var(--cw-text);
  box-shadow: var(--cw-shadow-sm); white-space: nowrap;
}
.sg-node i { color: var(--cw-primary); }
.sg-node.ok { border-color: rgba(16,185,129,.45); }
.sg-node.ok i { color: var(--cw-live); }
.sg-node.dim { opacity: .55 !important; }
.sg-node.warn i { color: var(--cw-amber); }
.sg-chip {
  position: absolute; display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 600;
  background: var(--cw-paper); border: 1px solid var(--cw-border); color: var(--cw-muted);
  white-space: nowrap;
}
.sg-chip.live { color: var(--cw-live); border-color: rgba(16,185,129,.35); }
.sg-card {
  position: absolute; padding: .6rem .75rem; background: var(--cw-card);
  border: 1px solid var(--cw-border); border-radius: .7rem; box-shadow: var(--cw-shadow-sm);
  font-size: .78rem; color: var(--cw-text); max-inline-size: 78%;
}
.sg-card .t { font-weight: 700; font-size: .74rem; display: flex; align-items: center; gap: .4rem; }
.sg-card .b { color: var(--cw-muted); font-size: .74rem; margin-block-start: .15rem; }
.sg-barrow { position: absolute; display: flex; gap: .3rem; align-items: flex-end; }
.sg-bar { inline-size: .55rem; border-radius: .3rem .3rem 0 0; background: var(--cw-primary); opacity: .85; }
.sg-star { color: var(--cw-amber); font-size: 1.05rem; }
.sg-svg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
.sg-svg path, .sg-svg line { fill: none; stroke: rgba(84,87,229,.5); stroke-width: 2; }

/* Continuous ambient effects (run regardless of steps) */
.fx-dash { stroke-dasharray: 6 7 !important; animation: fxFlow 1.1s linear infinite; }
@keyframes fxFlow { to { stroke-dashoffset: -13; } }
.fx-travel { position: absolute; inline-size: 10px; block-size: 10px; border-radius: 50%;
  background: var(--cw-live); box-shadow: 0 0 10px rgba(16,185,129,.9);
  offset-rotate: 0deg; animation: fxTravel 3.2s ease-in-out infinite; }
@keyframes fxTravel { 0% { offset-distance: 0%; opacity: 0; } 12% { opacity: 1; }
  88% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
.fx-ripple { position: relative; }
.fx-ripple::before, .fx-ripple::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  border: 2px solid currentColor; opacity: 0; animation: fxRipple 2.2s ease-out infinite;
}
.fx-ripple::after { animation-delay: 1.1s; }
@keyframes fxRipple { 0% { transform: scale(.7); opacity: .75; } 100% { transform: scale(1.65); opacity: 0; } }
.fx-orbit { animation: fxOrbit 9s linear infinite; transform-origin: center; }
@keyframes fxOrbit { to { transform: rotate(360deg); } }
.fx-orbit-r { animation: fxOrbitR 11s linear infinite; transform-origin: center; }
@keyframes fxOrbitR { to { transform: rotate(-360deg); } }
.fx-pulse { animation: fxPulse 2.1s ease-in-out infinite; }
@keyframes fxPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.07); opacity: .82; } }
.fx-blink { animation: fxBlink 1.15s steps(2, start) infinite; }
@keyframes fxBlink { to { visibility: hidden; } }
.fx-eq { display: inline-flex; align-items: flex-end; gap: 3px; block-size: 16px; }
.fx-eq span { inline-size: 3px; border-radius: 2px; background: currentColor; animation: fxEq 1s ease-in-out infinite; }
.fx-eq span:nth-child(2) { animation-delay: .15s; } .fx-eq span:nth-child(3) { animation-delay: .3s; }
.fx-eq span:nth-child(4) { animation-delay: .45s; } .fx-eq span:nth-child(5) { animation-delay: .6s; }
@keyframes fxEq { 0%, 100% { block-size: 4px; } 50% { block-size: 15px; } }
.fx-scan { position: relative; overflow: hidden; }
.fx-scan::after { content: ""; position: absolute; inset-inline: 0; block-size: 26%;
  inset-block-start: -30%; background: linear-gradient(to bottom, transparent, rgba(16,185,129,.35), transparent);
  animation: fxScan 2.6s ease-in-out infinite; }
@keyframes fxScan { 55%, 100% { inset-block-start: 105%; } }
.fx-ring { position: absolute; border: 2px dashed rgba(84,87,229,.55); border-radius: 50%; }
.fx-tick2 { position: relative; display: inline-block; }
.fx-tick2 i + i { margin-inline-start: -8px; }
.fx-tick2 i { animation: fxTick 3.4s ease infinite; }
.fx-tick2 i:last-child { animation-name: fxTick2; }
@keyframes fxTick { 0%, 18% { color: var(--cw-muted); } 30%, 100% { color: var(--cw-muted); } 55%, 90% { color: #34b7f1; } }
@keyframes fxTick2 { 0%, 34% { opacity: 0; } 44%, 100% { opacity: 1; } 55%, 90% { color: #34b7f1; } }
.fx-float { animation: fxFloat 4.5s ease-in-out infinite; }
@keyframes fxFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.fx-count { --p: 0%; background: conic-gradient(var(--cw-live) var(--p), rgba(84,87,229,.18) 0); animation: fxCount 6s linear infinite; border-radius: 50%; }
@keyframes fxCount { from { --p: 0%; } to { --p: 100%; } }

@media (prefers-reduced-motion: reduce) {
  .fx-dash, .fx-travel, .fx-ripple::before, .fx-ripple::after, .fx-orbit, .fx-orbit-r,
  .fx-pulse, .fx-blink, .fx-eq span, .fx-scan::after, .fx-tick2 i, .fx-float, .fx-count { animation: none !important; }
  .fx-travel { display: none; }
}

/* Stage extras */
.stage-armed .sg-wide[data-s] { transform: scaleX(.12); transform-origin: left center; opacity: .35; }
.stage-armed .sg-wide[data-s].on { transform: scaleX(1); opacity: 1; }
.sg-fieldbar { block-size: .55rem; border-radius: .3rem; background: var(--cw-primary-tint); border: 1px solid rgba(84,87,229,.25); }
.sg-fieldbar.f2 { background: rgba(16,185,129,.15); border-color: rgba(16,185,129,.3); }
.sg-cell { position: absolute; border-radius: .45rem; background: var(--cw-paper); border: 1px solid var(--cw-border); }
.sg-cell.ok { background: rgba(16,185,129,.14); border-color: rgba(16,185,129,.45); }
.sg-cell.bad { background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.45); }
.sg-phone { position: absolute; border: 2px solid var(--cw-border); border-radius: 1.1rem; background: var(--cw-card); box-shadow: var(--cw-shadow-md); }
.sg-glyph { position: absolute; display: grid; place-items: center; border-radius: 50%; color: #fff; }
.fx-react { position: absolute; font-size: 1.05rem; animation: fxReact 3.6s ease-in-out infinite; opacity: 0; }
@keyframes fxReact { 0%, 55% { opacity: 0; transform: translateY(6px) scale(.6); }
  63%, 86% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(-8px) scale(.9); } }
.fx-push { animation: fxPush 1.6s ease-in-out infinite; display: inline-block; }
@keyframes fxPush { 0%, 100% { transform: translateX(0); opacity: 1; } 55% { transform: translateX(9px); opacity: .55; } }
@property --p { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
.glyph-rings::before, .glyph-rings::after {
  content: ""; position: absolute; inset: -7px; border-radius: inherit;
  border: 2px dashed rgba(255,255,255,.55); animation: fxOrbit 10s linear infinite;
}
.glyph-rings::after { inset: -13px; border-color: rgba(255,255,255,.3); animation: fxOrbitR 14s linear infinite; }
.glyph-story::after {
  content: ""; position: absolute; inset: -6px; border-radius: inherit;
  border: 3px solid transparent;
  background: conic-gradient(from 0deg, #f58529, #dd2a7b, #8134af, #515bd4, #f58529) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: fxOrbit 6s linear infinite;
}
.channel-hero-glyph { position: relative; }
@media (prefers-reduced-motion: reduce) {
  .fx-react, .fx-push, .glyph-rings::before, .glyph-rings::after, .glyph-story::after { animation: none !important; }
}
.fx-travel-svg { fill: var(--cw-live); filter: drop-shadow(0 0 6px rgba(16,185,129,.9));
  offset-rotate: 0deg; animation: fxTravel 3.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .fx-travel-svg { display: none; } }

/* Product mega panel — grouped columns of rich items */
.mega-panel .dropdown-item { padding: .5rem .6rem; margin-block-end: .15rem; }
.mega-panel .dropdown-item small { display: block; font-weight: 450; color: var(--cw-muted); font-size: .74rem; }
.mega-badge.soon { color: var(--cw-muted); background: var(--cw-paper); border: 1px solid var(--cw-border); }

/* Real brand logos (assets/img/brands.svg sprite) */
.brand-logo { inline-size: 1em; block-size: 1em; fill: currentColor; flex: 0 0 auto; display: inline-block; vertical-align: -0.125em; }
.mega-item .brand-logo { font-size: 1.02rem; inline-size: 1.35rem; }
.channel-hero-glyph .brand-logo { font-size: 2.35rem; }
.sg-glyph .brand-logo { font-size: 1.4rem; }

/* Homepage integrations logo band */
.logo-band { display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: center; }
.logo-chip {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.6rem 1rem; background: #fff; border: 1px solid var(--cw-border);
  border-radius: 999px; color: var(--cw-text); text-decoration: none;
  font-weight: 600; font-size: 0.92rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.logo-chip:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(11, 15, 30, 0.10); border-color: var(--cw-primary); color: var(--cw-text); }
.logo-chip .brand-logo, .logo-chip i { font-size: 1.05rem; }
.logo-chip .mega-badge { margin-inline-start: 0.15rem; }

/* Accessibility: skip link (visible only on keyboard focus) */
.skip-link {
  position: absolute; inset-block-start: -100px; inset-inline-start: 1rem;
  z-index: 3000; padding: 0.6rem 1.1rem; border-radius: 0 0 10px 10px;
  background: var(--cw-primary); color: #fff; font-weight: 600; text-decoration: none;
  transition: inset-block-start 0.15s ease;
}
.skip-link:focus { inset-block-start: 0; color: #fff; }
a.compliance-chip { text-decoration: none; }
a.compliance-chip:hover { border-color: var(--cw-primary-bright); color: #fff; }

/* ---- Currency after the amount, for the locales that write it that way ----
   A price card is three separate text nodes:
     <span class="cur">$</span><span class="tnum">29</span><span class="per">/mo</span>
   Only the last one carries a letter, so only it is translatable — German shipped
   "$29/Monat", mixing two conventions in one price. The figure must not move, so
   reorder the nodes instead of rewriting them. Scoped to the listed locales: making
   .price a flex container everywhere would drop the raised-symbol look that
   .cur{vertical-align} gives English, where the symbol leads. Not every locale
   that uses a decimal comma puts the symbol after: nl writes `$ 19` and pt-br `US$ 29`
   across their whole copy, so both are left out (pt-br by :not, since :lang(pt) matches
   it). Turkish writes `29$` with no gap, hence its margin override below. */
:root:is(:lang(de), :lang(fr), :lang(es), :lang(it), :lang(pt):not(:lang(pt-BR)), :lang(pl), :lang(cs), :lang(sk), :lang(sl), :lang(hr), :lang(sr), :lang(bg), :lang(ro), :lang(hu), :lang(fi), :lang(sv), :lang(no), :lang(da), :lang(et), :lang(lv), :lang(lt), :lang(is), :lang(sq), :lang(mk), :lang(ru), :lang(uk), :lang(el), :lang(tr)) .price-card .price { display: inline-flex; align-items: baseline; }
:root:is(:lang(de), :lang(fr), :lang(es), :lang(it), :lang(pt):not(:lang(pt-BR)), :lang(pl), :lang(cs), :lang(sk), :lang(sl), :lang(hr), :lang(sr), :lang(bg), :lang(ro), :lang(hu), :lang(fi), :lang(sv), :lang(no), :lang(da), :lang(et), :lang(lv), :lang(lt), :lang(is), :lang(sq), :lang(mk), :lang(ru), :lang(uk), :lang(el), :lang(tr)) .price-card .price .cur { order: 2; vertical-align: baseline; margin-inline: 0.12rem 0; }
/* Without an explicit order the period stays at 0 and the symbol lands after it. */
:root:is(:lang(de), :lang(fr), :lang(es), :lang(it), :lang(pt):not(:lang(pt-BR)), :lang(pl), :lang(cs), :lang(sk), :lang(sl), :lang(hr), :lang(sr), :lang(bg), :lang(ro), :lang(hu), :lang(fi), :lang(sv), :lang(no), :lang(da), :lang(et), :lang(lv), :lang(lt), :lang(is), :lang(sq), :lang(mk), :lang(ru), :lang(uk), :lang(el), :lang(tr)) .price-card .price .per { order: 3; }
/* :is() takes the specificity of its heaviest argument (`:lang(pt):not(…)`, two), so the
   override needs two pseudo-classes of its own to win — the :not is only a weight. */
:root:lang(tr):not(:lang(pt-BR)) .price-card .price .cur { margin-inline: 0; }

/* Georgian: no uppercase. Mkhedruli has no case in ordinary typography; since Unicode 11
   `text-transform: uppercase` maps it to Mtavruli (U+1C90–U+1CBF), a separate set of glyphs.
   Inter and Bricolage carry no Georgian at all, so those letters fall to whatever system
   font the reader has — and many older ones have Mkhedruli but not Mtavruli, which draws
   every eyebrow, badge and mega-menu title as empty boxes. `!important` because the eleven
   uppercase rules above have specificities up to (0,3,0) and this is a script-wide rule,
   not a per-component one. */
:root:lang(ka) *,
:root:lang(ka) *::before,
:root:lang(ka) *::after { text-transform: none !important; }