/*
Theme Name: Abri
Theme URI: https://example.com/abri
Author: Farsad
Description: قالب فارسی و راست‌چین برای پلتفرم‌های گفتگو با مشتری و کسب‌وکارهای SaaS. طراحی تمیز و روشن، بدون وابستگی به صفحه‌ساز. صفحهٔ اصلی شامل هیرو، مشکلات، سه گام راه‌اندازی، کانال‌ها، قابلیت‌ها، مزایا، مخاطبان، تعرفه‌ها، نظر مشتریان، سوالات متداول و بلاگ — همه از بخش «سفارشی‌سازی» قابل ویرایش.
Version: 2.3.0
Requires at least: 5.9
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: abri
Tags: rtl-language-support, custom-colors, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, blog, business
*/

/* ==========================================================================
   1. Fonts
   ========================================================================== */

@font-face {
  font-family: "Vazirmatn";
  src: url("assets/fonts/Vazirmatn-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Vazirmatn";
  src: url("assets/fonts/Vazirmatn-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Vazirmatn";
  src: url("assets/fonts/Vazirmatn-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Vazirmatn";
  src: url("assets/fonts/Vazirmatn-ExtraBold.woff2") format("woff2");
  font-weight: 800;
  font-display: swap;
}

/* Variable font (single file covers weight 400–800) used on the English
   pages — closest free/open alternative to a twkLausanne-style grotesk. */
@font-face {
  font-family: "Manrope";
  src: url("assets/fonts/Manrope-Variable.woff2") format("woff2-variations"), url("assets/fonts/Manrope-Variable.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}

/* ==========================================================================
   2. Design tokens — white & blue
   ========================================================================== */

:root {
  --p-50:  #eaf1fa;
  --p-75:  #b6cfec;
  --p-100: #8cb2e0;
  --p-200: #4a81c4;
  --p-300: #1d5fa8;
  --p-400: #164a83;
  --p-500: #123a66;

  --s-50:  #fef6ef;
  --s-75:  #fad9be;
  --s-100: #f9c9a3;
  --s-200: #f6b27c;
  --s-300: #f4a261;
  --s-400: #ab7144;

  --m-50:  #efefef;
  --m-75:  #bdbdbd;
  --m-100: #a2a2a2;
  --m-200: #7a7979;
  --m-300: #5f5e5e;
  --m-400: #434242;
  --m-500: #3a3939;

  /* semantic alias used by the newer (leadochat-style) sections */
  --brand: var(--p-300);
  --brand-dark: var(--p-400);
  --brand-10: rgba(29, 95, 168, .08);
  --brand-16: rgba(29, 95, 168, .14);
  --brand-30: rgba(29, 95, 168, .3);
  --danger: #d65a4a;
  --danger-10: rgba(214, 90, 74, .08);
  --danger-30: rgba(214, 90, 74, .3);

  --bg: #ffffff;
  --bg-soft: #f7fafc;
  --ink: #1b2b33;
  --ink-soft: var(--m-300);
  --label: var(--m-200);
  --line: #e6ecf0;

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-full: 999px;

  --shadow-sm: 0 1px 2px rgba(16, 42, 55, .06);
  --shadow: 0 6px 24px rgba(16, 42, 55, .07);
  --shadow-lg: 0 18px 50px rgba(16, 42, 55, .10);
  --glow: 0 8px 20px rgba(29, 95, 168, .28);

  --wrap: 1200px;
  --gutter: 24px;
  --section-y: 88px;

  --font: "Vazirmatn", "IRANSansX", "Segoe UI", Tahoma, sans-serif;
  --font-en: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
}

/* English pages (header.php sets lang="en" dir="ltr" when abri_lang() is 'en') */
html[lang="en"] {
  --font: var(--font-en);
}

/* ==========================================================================
   3. Reset & base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

/* overflow-x: hidden here (not just on .skip-link's own box) because the
   skip-link's -9999px offset otherwise expands the document's own
   scrollable width — a real horizontal-scroll bug on every page, not
   just a side effect of that one element. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.9;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--p-400); text-decoration: none; transition: color .18s ease; }
a:hover { color: var(--p-300); }

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 .6em;
  line-height: 1.45;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: 0;
}

h1 { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.1rem); line-height: 1.35; }
h2 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); }
h3 { font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

ul, ol { padding-inline-start: 1.4em; }

hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }

::selection { background: var(--p-75); color: var(--p-500); }

:focus-visible {
  outline: 3px solid var(--p-200);
  outline-offset: 2px;
  border-radius: 4px;
}

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  z-index: 999;
  background: var(--p-400);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}
.skip-link:focus { inset-inline-start: 16px; color: #fff; }

/* Latin runs (numbers, emails, brand names) read left-to-right inside RTL text */
.ltr, code, kbd, samp, pre {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: start;
}

/* ==========================================================================
   4. Layout primitives
   ========================================================================== */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--soft { background: var(--bg-soft); }
.section--tint { background: var(--p-50); }

.section__head {
  max-width: 760px;
  margin-inline: auto;
  margin-bottom: 56px;
  text-align: center;
}
.section__head p {
  color: var(--ink-soft);
  font-size: 1.05rem;
  margin: 0;
}

/* Messenger animation: keep heading + gif inside one desktop viewport */
#messenger-animation { padding-block: 40px; }
#messenger-animation .section__head { margin-bottom: 20px; }
#messenger-animation .messenger-animation__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-width: 760px;
  margin-inline: auto;
}

.eyebrow {
  display: inline-block;
  font-size: .82rem;
  font-weight: 700;
  color: var(--p-400);
  background: var(--p-50);
  border: 1px solid var(--p-75);
  padding: 6px 16px;
  border-radius: var(--radius-full);
  margin-bottom: 18px;
}

.grid { display: grid; gap: 24px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ==========================================================================
   5. Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  padding: 15px 30px;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--p-300);
  color: #fff;
  box-shadow: var(--glow);
}
.btn--primary:hover { background: var(--p-400); color: #fff; }

.btn--secondary {
  background: var(--s-300);
  color: #4a2f16;
  box-shadow: 0 8px 20px rgba(244, 162, 97, .3);
}
.btn--secondary:hover { background: var(--s-200); color: #4a2f16; }

.btn--ghost {
  background: #fff;
  color: var(--p-400);
  border-color: var(--p-75);
}
.btn--ghost:hover { background: var(--p-50); color: var(--p-500); }

.btn--on-dark {
  background: rgba(255, 255, 255, .12);
  color: #fff;
  border-color: rgba(255, 255, 255, .35);
}
.btn--on-dark:hover { background: rgba(255, 255, 255, .2); color: #fff; }

/* ==========================================================================
   6. Header
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}

/* stretched (not centered): every top-level nav <li> needs to be exactly as
   tall as the header itself, because a compact mega panel is anchored to its
   own <li> and uses top:100% to sit right under it. A shorter, vertically
   centred <li> made that percentage land inside the header instead of below
   it — see the .nav-main > ul > li rule further down. */
.site-header__inner {
  display: flex;
  align-items: stretch;
  gap: 28px;
  min-height: 74px;
}

/* Mark and wordmark are one lockup: a tight gap and a shared optical centre so
   they read as a single logo rather than two stacked items. */
.site-brand { display: flex; align-items: center; flex-shrink: 0; }
.site-brand__lockup { display: inline-flex; align-items: center; gap: 7px; }
.site-brand img { max-height: 40px; width: auto; }
.site-brand__mark { display: block; flex-shrink: 0; }
.site-brand__mark svg { width: 34px; height: 34px; display: block; }
.site-brand__name {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--p-500);
  line-height: 1;
  /* Vazirmatn sits slightly high next to the round mark */
  transform: translateY(1px);
}

.nav-main { margin-inline-end: auto; display: flex; align-items: stretch; }
.nav-main a.nav-main__cta {
  display: none;
  color: #fff;
  padding: 15px 30px;
}
.nav-main ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: stretch;
  gap: 4px;
}
.nav-main li { position: relative; }
/* the trigger/link inside still centres its own label+icon; this just makes
   the <li> itself full header height so top:100% is accurate for its panel */
.nav-main > ul > li { display: flex; align-items: center; }
.nav-main a {
  display: block;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  color: var(--m-400);
  font-weight: 500;
  font-size: .97rem;
}
.nav-main a:hover,
.nav-main .current-menu-item > a {
  color: var(--p-400);
  background: var(--p-50);
}

/* plain dropdowns (depth-2 menus outside a mega panel) */
.nav-main .sub-menu {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-start: 0;
  min-width: 220px;
  flex-direction: column;
  gap: 2px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.nav-main li:hover > .sub-menu,
.nav-main li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* --- mega menu ---------------------------------------------------------- */

.mega__trigger {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: inherit;
  font-size: .97rem;
  font-weight: 500;
  color: var(--m-400);
  background: none;
  border: 0;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.mega__trigger:hover,
.has-mega.is-open > .mega__trigger {
  color: var(--p-400);
  background: var(--p-50);
}

.mega__caret {
  width: 7px; height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .2s ease;
}
.has-mega.is-open .mega__caret { transform: rotate(-135deg) translate(-2px, -2px); }

/* Every panel is anchored under its own trigger and sized to its content —
   none of them stretch full-bleed across the header, regardless of how many
   columns it has. `.mega` is always `.mega--compact` in the markup now; the
   split class stays only so a data-cols count can size the grid below. */
.nav-main .has-mega { position: relative; }

/* The panel itself is only a positioning shell; .mega__inner carries the paint
   so it can shrink to its content instead of a full-bleed backdrop. */
.mega {
  position: absolute;
  inset-inline: auto;
  top: 100%;
  padding-top: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .22s ease, transform .22s cubic-bezier(.2, .8, .3, 1), visibility .22s;
  pointer-events: none;
}
.has-mega:hover > .mega,
.has-mega:focus-within > .mega,
.has-mega.is-open > .mega {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.mega__inner {
  width: max-content;
  max-width: 92vw;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px -12px rgba(16, 42, 55, .18), 0 0 0 1px rgba(16, 42, 55, .02);
  overflow: hidden;
}
.mega .wrap { padding-inline: 0; max-width: none; }

/* column width per data-cols — a plain link list (1) reads narrower than a
   grid of icon tiles (2–3), so each gets its own comfortable measure */
.mega[data-cols="1"] .mega__grid { grid-template-columns: minmax(220px, 280px); }
.mega[data-cols="2"] .mega__grid { grid-template-columns: repeat(2, minmax(210px, 260px)); }
.mega[data-cols="3"] .mega__grid { grid-template-columns: repeat(3, minmax(220px, 260px)); }

.mega__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 34px;
  padding: 30px 30px 26px;
}

/* hairline rules between columns, drawn on the gap rather than the card edge.
   Each non-first column gets a rule on its START side (the gap it shares with
   the PREVIOUS column) — inline-end was wrong: it drew col2's rule off the
   end of the grid entirely (nothing to its right) and left the col0/col1 gap
   bare, which read as "the line moved to the end". */
.mega__col + .mega__col { position: relative; }
.mega__col + .mega__col::before {
  content: "";
  position: absolute;
  inset-block: 4px;
  inset-inline-start: -17px;
  width: 1px;
  background: var(--line);
}

.mega__col-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .78rem;
  font-weight: 700;
  color: var(--m-200);
  padding: 0 12px;
  margin-bottom: 10px;
}
.mega__col-title::before {
  content: "";
  width: 3px;
  height: 13px;
  border-radius: 2px;
  background: var(--p-300);
  flex-shrink: 0;
}
a.mega__col-title:hover { color: var(--p-400); }

/* ".nav-main ul" above (0,1,1) outranks a bare ".mega__links" (0,1,0) and forces
   flex on every <ul> under .nav-main, including this one — scoping under .mega
   (0,2,0) is what actually wins the cascade and keeps items stacked. */
.mega .mega__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.mega__links a {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  color: var(--ink);
  transition: background .16s ease;
}
.mega__links a:hover { background: var(--p-50); color: var(--p-400); }

/* icon tile — tinted at rest, solid brand on hover */
.mega__ico {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: var(--p-50);
  color: var(--p-300);
  transition: background .16s ease, color .16s ease, transform .16s ease;
}
.mega__ico svg { width: 17px; height: 17px; }
.mega__links a:hover .mega__ico {
  background: var(--p-300);
  color: #fff;
  transform: translateY(-1px);
}

.mega__body { min-width: 0; flex: 1; }

/* chevron that slides in on hover; pointing is direction-aware */
.mega__go {
  flex-shrink: 0;
  align-self: center;
  width: 7px;
  height: 7px;
  margin-inline-start: 2px;
  border-inline-start: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  transform: rotate(45deg) translateX(-3px);
  opacity: 0;
  transition: opacity .16s ease, transform .16s ease;
}
.mega__links a:hover .mega__go { opacity: .55; transform: rotate(45deg) translateX(0); }

/* colour is inherited so top-level plain links keep their own hover state */
.mega__item-title {
  display: block;
  font-weight: 600;
  font-size: .93rem;
  color: inherit;
  line-height: 1.55;
}

.mega__item-desc {
  display: block;
  font-size: .79rem;
  color: var(--m-200);
  line-height: 1.6;
  margin-top: 1px;
}

.mega__foot {
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, var(--bg-soft), #fff);
}
.mega__foot-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 30px;
}
.mega__foot-note { font-size: .84rem; color: var(--m-200); }
.mega__foot-note::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--p-300);
  margin-inline-end: 8px;
  vertical-align: middle;
}

.header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.header-actions .btn { padding: 11px 22px; font-size: .93rem; }
.header-actions__link {
  color: var(--m-400);
  font-weight: 500;
  font-size: .93rem;
  padding: 10px 6px;
  white-space: nowrap;
}
.header-actions__link:hover { color: var(--p-400); }

.lang-switch { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.lang-switch__item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 9px;
  border-radius: var(--radius-full);
  color: var(--m-300);
  font-size: .82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.lang-switch__item svg { border-radius: 50%; flex-shrink: 0; }
.lang-switch__item:hover { color: var(--ink); background: var(--bg-soft); }
.lang-switch__item.is-active { color: var(--p-400); background: var(--p-50); }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.nav-toggle span {
  display: block;
  width: 20px; height: 2px;
  background: var(--m-400);
  border-radius: 2px;
  position: relative;
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  width: 20px; height: 2px;
  background: var(--m-400);
  border-radius: 2px;
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }

/* ==========================================================================
   7. Hero
   ========================================================================== */

.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1100px 460px at 85% -12%, var(--p-50), transparent 62%),
    radial-gradient(760px 380px at 8% 8%, var(--s-50), transparent 58%);
  padding-block: 84px 96px;
}

/* Two columns by default — template-product.php uses this hero too. The
   front page opts into the stacked respond.io layout with .hero--stacked. */
.hero__inner {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 56px;
  align-items: center;
}

.hero h1 { margin-bottom: .5em; }
.hero h1 .accent { color: var(--p-300); }

.hero__lead {
  font-size: 1.15rem;
  color: var(--ink-soft);
  max-width: 56ch;
  margin-bottom: 32px;
}

.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 30px; }

.hero__notes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: .93rem;
  color: var(--m-300);
}
.hero__notes li { display: flex; align-items: center; gap: 7px; }
.hero__notes svg { flex-shrink: 0; color: var(--p-300); }

/* Framed panel for the plain-image hero (product pages). */
.hero__media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: #fff;
}
/* Direct child only: as ".hero__media img" this is (0,1,1) and would beat
   .laptop__shot's own width, stretching the screenshot past the bezel. */
.hero__media > img { width: 100%; }

/* ---- Front page: copy on top, device mockup underneath, at every width ---- */
.hero--stacked .hero__inner {
  grid-template-columns: 1fr;
  gap: 44px;
  justify-items: center;
}
.hero--stacked .hero__copy { text-align: center; max-width: 920px; }
.hero--stacked .hero__lead { max-width: 78ch; margin-inline: auto; }
.hero--stacked .hero__cta { justify-content: center; margin-bottom: 0; }
.hero--stacked .hero__notes { justify-content: center; margin-top: 26px; }
/* The mockup brings its own frame and shadow, so drop the panel treatment. */
.hero--stacked .hero__media {
  width: 100%;
  max-width: 960px;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
  background: none;
}

/* The stage: the product shot at full size, with a small floating card on top
   holding the messenger animation and the "watch the film" link. */
/* MacBook Air mockup.
   assets/img/mockups/macbook-air-nim.svg has a 1920x1300 viewBox and carries
   the screenshot itself, in a screen rect at x=160 y=116 w=1600 h=992. The
   percentages below are that geometry divided by the viewBox, so an optional
   Customizer image lands exactly on top of the baked one. */
.laptop {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 1300;
}
.laptop__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  /* drop-shadow rather than box-shadow: it follows the device silhouette
     instead of the transparent margins around it in the viewBox. */
  filter: drop-shadow(0 24px 38px rgba(8, 24, 45, .22));
}

/* 160/1920, 116/1300, 1600/1920, 992/1300 — and rx 15 on each axis. */
.laptop__shot {
  position: absolute;
  z-index: 1;
  left: 8.3333%;
  top: 8.9231%;
  width: 83.3333%;
  height: 76.3077%;
  object-fit: cover;
  border-radius: .78125% / 1.1538%;
}

/* Centred on the screen rect, not the whole mockup: (112 + 1000/2) / 1300. */
.hero__stage-card {
  position: absolute;
  z-index: 3;
  top: 47.0769%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(240px, 41%, 470px);
  padding: 14px 14px 16px;
  border-radius: var(--radius);
  background: #fff;
  box-shadow: 0 24px 60px rgba(8, 24, 45, .3);
  text-align: center;
}

.hero__stage-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--p-500);
}
/* The bundled animation is a fixed-size document that does not reflow, so it
   is rendered at its design width and scaled to the card by theme.js. */
.hero__stage-anim {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 960px;
  height: 540px;
  border: 0;
  transform: translate(-50%, -50%) scale(var(--anim-scale, 1));
  transform-origin: center;
}

.hero__video-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  font-size: .92rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--p-400);
  cursor: pointer;
}
.hero__video-link:hover { color: var(--p-300); }
.hero__video-link:hover span:last-child { text-decoration: underline; text-underline-offset: 4px; }

.hero__video-play {
  position: relative;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--p-300);
  color: #fff;
  box-shadow: 0 4px 12px rgba(29, 95, 168, .42);
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
/* Radar ping so the play button reads as the thing to click. Killed by the
   prefers-reduced-motion block in section 24. */
.hero__video-play::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid var(--p-300);
  animation: abri-play-ping 2.1s cubic-bezier(.3, 0, .2, 1) infinite;
}
@keyframes abri-play-ping {
  0%       { transform: scale(1); opacity: .65; }
  70%, 100% { transform: scale(2.1); opacity: 0; }
}
.hero__video-link:hover .hero__video-play {
  transform: scale(1.12);
  background: var(--p-400);
  box-shadow: 0 7px 18px rgba(29, 95, 168, .55);
}
.hero__video-link:active .hero__video-play { transform: scale(1.02); }
.hero__video-play svg { width: 15px; height: 15px; }
html[dir="rtl"] .hero__video-play svg { transform: scaleX(-1); }

.hero__media--empty {
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  background: linear-gradient(140deg, var(--p-50), #fff 55%, var(--s-50));
  border: 1px solid var(--line);
  color: var(--m-100);
  font-size: .9rem;
  text-align: center;
  padding: 24px;
}

/* ==========================================================================
   8. Logo strip
   ========================================================================== */

.logos { padding-block: 48px; border-block: 1px solid var(--line); background: #fff; }
.logos__title {
  text-align: center;
  font-size: .93rem;
  color: var(--m-200);
  /* No margin-bottom here: the marquee sits outside .wrap so it can run full
     bleed, which makes this the last child and hands "p:last-child { margin-
     bottom: 0 }" (0,1,1) the win over this class (0,1,0). The gap lives on
     .logos__marquee instead, where nothing competes for it. */
  margin: 0;
}
/* Marquee: two identical rows inside one track, translated by half its width
   so the loop has no seam. Runs at every width — phones included. */
.logos__marquee {
  margin-top: 34px;
  overflow: hidden;
  /* Forced LTR on the frame, not just the track: a block wider than its
     containing block is positioned by the *container's* direction, so under
     RTL the track starts pinned to the right and overflows leftwards —
     translateX(-50%) then slides it clean off and leaves the strip empty
     halfway through the loop. Logos carry no reading order, so laying the
     strip out LTR is the simplest way to keep the loop seamless. */
  direction: ltr;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}
.logos__track {
  display: flex;
  width: max-content;
}
/* theme.js adds .is-ready once it has cloned the row enough times to fill the
   viewport twice over. Animating before that would translate by -50% of a
   track that is too short and leave a visible gap. */
.logos__marquee.is-ready .logos__track {
  animation: abri-logo-marquee var(--logos-duration, 42s) linear infinite;
}
.logos__marquee.is-ready:hover .logos__track { animation-play-state: paused; }

/* The track always moves right-to-left visually; direction must not flip it,
   or the two copies would wrap in the wrong order in RTL. */
@keyframes abri-logo-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.logos__row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 52px;
  padding-inline-end: 52px;
}
.logos__row img {
  max-height: 40px;
  width: auto;
  flex-shrink: 0;
  filter: grayscale(1);
  opacity: .62;
  transition: filter .2s ease, opacity .2s ease;
}
.logos__row img:hover { filter: grayscale(0); opacity: 1; }

/* ==========================================================================
   9. Cards (features)
   ========================================================================== */

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 26px;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  height: 100%;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: var(--p-75);
}
.card h3 { margin-bottom: .4em; }
.card p { color: var(--ink-soft); font-size: .96rem; margin: 0; }

.card__icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  background: var(--p-50);
  color: var(--p-300);
  margin-bottom: 18px;
}
.card__icon svg { width: 26px; height: 26px; }
.card:nth-child(3n + 2) .card__icon { background: var(--s-50); color: var(--s-400); }

/* ==========================================================================
   9b. Feature showcase (dark product-preview cards)
   ========================================================================== */

.section--dark { background: #10262f; color: #b9c8ce; }
.section--dark .section__head h2, .section--dark .section__head p { color: #fff; }
.section--dark .section__head p { color: #b9c8ce; }
.section__head-btn { margin-top: 26px; }

.feature-card {
  background: #16303b;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: background .3s ease;
}
.feature-card:hover { background: #1c3944; }

/* Linked cards are <a>, so the base link colour has to be neutralised and the
   card given a real click affordance. */
.feature-card--link {
  color: inherit;
  text-decoration: none;
  transition: background .3s ease, transform .2s ease, border-color .2s ease;
}
.feature-card--link:hover {
  color: inherit;
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, .2);
}
.feature-card--link:hover .feature-card__head svg { transform: translateX(-4px); }
html[dir="rtl"] .feature-card--link:hover .feature-card__head svg { transform: translateX(4px); }
.feature-card--link:focus-visible {
  outline: 2px solid var(--p-200);
  outline-offset: 3px;
}

/* Mobile-only stand-in for the preview mockups — see the 700px block in 23b. */
.feature-card__icon { display: none; }

.feature-card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.feature-card__head h3 { color: #fff; font-size: 1.1rem; margin: 0; }
.feature-card__head svg { width: 16px; height: 16px; color: var(--p-200); flex-shrink: 0; transition: transform .2s ease; }

.feature-card__text { margin: 8px 0 20px; font-size: .82rem; color: #b9c8ce; }

.feature-card__preview {
  background: #1c3944;
  border-radius: var(--radius);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.feature-card__preview--fixed { height: 180px; overflow: hidden; }
.feature-card__preview--center { align-items: center; justify-content: center; text-align: center; }

.mockup-row { display: flex; align-items: center; gap: 10px; background: #22434f; border-radius: var(--radius-sm); padding: 8px 10px; width: 100%; }
.mockup-row--dim { background: #1c3944; }
.mockup-row--plain { background: none; padding: 0; }
.mockup-row--plain > svg { width: 16px; height: 16px; color: var(--p-200); flex-shrink: 0; }
.mockup-row__text { font-size: .68rem; color: #fff; flex: 1; }
.mockup-row--dim .mockup-row__text { color: #b9c8ce; }

.mockup-avatar {
  width: 26px; height: 26px; flex-shrink: 0;
  border-radius: var(--radius-full);
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .1);
  color: #b9c8ce;
}
.mockup-avatar--accent { background: var(--p-300); color: #fff; }
.mockup-avatar--muted { background: rgba(255, 255, 255, .16); }
.mockup-avatar svg { width: 14px; height: 14px; }

.mockup-avatar-stack { display: flex; flex-shrink: 0; }
.mockup-avatar-stack .mockup-avatar { border: 2px solid #22434f; margin-inline-start: -10px; }
.mockup-avatar-stack .mockup-avatar:first-child { margin-inline-start: 0; }
.mockup-avatar--telegram { background: #26a5e4; color: #fff; }
.mockup-avatar--whatsapp { background: #25d366; color: #fff; }
.mockup-avatar--bale { background: #3f9998; color: #fff; }

.tag { display: inline-flex; align-items: center; font-size: .62rem; font-weight: 700; padding: 3px 10px; border-radius: var(--radius-full); }
.tag--accent { background: rgba(29, 95, 168, .28); color: var(--p-100); }
.tag--neutral { background: rgba(255, 255, 255, .1); color: #b9c8ce; }
.tag--outline { border: 1px solid rgba(255, 255, 255, .25); color: #b9c8ce; }

.mockup-divider { display: flex; align-items: center; justify-content: center; width: 100%; }
.mockup-divider svg { width: 14px; height: 14px; color: #7a9099; transform: rotate(-90deg); }

.mockup-dots { display: flex; justify-content: center; gap: 8px; width: 100%; }
.mockup-dot { width: 26px; height: 26px; border-radius: var(--radius-full); background: rgba(255, 255, 255, .16); }
.mockup-dot--more { display: grid; place-items: center; font-size: .6rem; color: #b9c8ce; }
.mockup-dot--photo { overflow: hidden; }
.mockup-dot--photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.agent-row { display: flex; align-items: center; gap: 8px; }
.agent-photo { position: relative; flex-shrink: 0; width: 28px; height: 28px; }
.agent-photo img { width: 28px; height: 28px; border-radius: var(--radius-full); object-fit: cover; display: block; }
.agent-photo .agent-dot {
  position: absolute;
  inset-inline-end: -1px;
  bottom: -1px;
  border: 2px solid #22434f;
}
.agent-dot { width: 8px; height: 8px; border-radius: var(--radius-full); flex-shrink: 0; background: rgba(255, 255, 255, .3); }
.agent-dot--on { background: var(--p-300); }
.agent-dot--busy { background: #7a9099; }
.agent-row__meta { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.agent-row__status { font-size: .68rem; color: #fff; }
.agent-bar { display: block; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.agent-bar__fill { display: block; height: 100%; background: var(--p-200); }
.agent-row__count { font-size: .68rem; color: #b9c8ce; }

.code-block { background: #1c3944; border-radius: var(--radius-sm); padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.code-block__bar { display: block; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .16); }
.code-block__bar--accent { background: var(--p-200); }

.bot-bubble { font-size: .68rem; color: #fff; background: #22434f; border-radius: var(--radius-sm); padding: 6px 10px; }
.bot-reply { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.bot-reply__label { font-size: .58rem; color: #7a9099; }

.kv-list { background: #1c3944; border-radius: var(--radius); padding: 18px; display: flex; flex-direction: column; gap: 10px; font-size: .75rem; color: #b9c8ce; }
.kv-row { display: flex; align-items: center; justify-content: space-between; }
.kv-row__value { color: #fff; }

/* ==========================================================================
   10. Problems ("مدیریت سنتی … فلج می‌کند")
   ========================================================================== */

.problem {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 24px;
  height: 100%;
  box-shadow: var(--shadow-sm);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.problem:hover { transform: translateY(-4px); border-color: var(--danger-30); box-shadow: var(--shadow); }
.problem__icon {
  width: 46px; height: 46px;
  border-radius: var(--radius-full);
  display: grid;
  place-items: center;
  background: var(--danger-10);
  color: var(--danger);
  margin-bottom: 16px;
}
.problem__icon svg { width: 22px; height: 22px; }
.problem h3 { font-size: 1.08rem; margin-bottom: .35em; }
.problem p { color: var(--ink-soft); font-size: .94rem; margin: 0; }

/* ==========================================================================
   11. Steps ("در ۳ مرحلهٔ ساده")
   ========================================================================== */

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  position: relative;
}
/* connecting rail behind the numbers */
.steps::before {
  content: "";
  position: absolute;
  top: 30px;
  inset-inline: 12%;
  height: 2px;
  background: linear-gradient(to left, transparent, var(--line) 12%, var(--line) 88%, transparent);
  z-index: 0;
}
.step { position: relative; z-index: 1; text-align: center; }
.step__num {
  width: 60px; height: 60px;
  margin: 0 auto 20px;
  border-radius: var(--radius-full);
  display: grid;
  place-items: center;
  font-size: 1.3rem;
  font-weight: 800;
  color: #fff;
  background: var(--p-300);
  box-shadow: var(--glow);
  border: 4px solid #fff;
}
.step h3 { margin-bottom: .4em; }
.step p { color: var(--ink-soft); font-size: .96rem; max-width: 34ch; margin-inline: auto; }

/* ==========================================================================
   13. Benefits (big stat highlight + stat grid)
   ========================================================================== */

.stat-hero {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.stat-hero__item {
  background: linear-gradient(140deg, var(--p-50), #fff 60%, var(--s-50));
  border: 1px solid var(--p-75);
  border-radius: var(--radius-lg);
  padding: 40px 24px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.stat-hero__num {
  font-size: 3rem;
  font-weight: 800;
  color: var(--p-300);
  line-height: 1.2;
  display: block;
}
.stat-hero__label { color: var(--ink-soft); font-size: 1rem; margin-top: 6px; display: block; }

.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 24px; }
.stat {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 24px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.stat__num {
  font-size: 2.3rem;
  font-weight: 800;
  color: var(--p-300);
  line-height: 1.2;
  display: block;
}
.stat__label { color: var(--ink-soft); font-size: .93rem; }

/* Uptime boxes: the figure is pulled from the live monitor, so it links out
   to it. The icon sits beside the number rather than under the label so the
   two read as one unit. */
.stat__head { display: flex; align-items: center; justify-content: center; gap: 8px; }
.stat__source {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  color: var(--p-300);
  background: var(--p-50);
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.stat__source svg { width: 14px; height: 14px; }
.stat__source:hover {
  background: var(--p-300);
  color: #fff;
  transform: translateY(-1px);
}
.stat--live:hover { border-color: var(--p-75); }

/* ==========================================================================
   14. Audiences ("برای چه کسانی ایده‌آل است؟")
   ========================================================================== */

.audience {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 24px;
  height: 100%;
  box-shadow: var(--shadow-sm);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.audience:hover { border-color: var(--p-75); box-shadow: var(--shadow); transform: translateY(-4px); }
.audience__icon {
  flex-shrink: 0;
  width: 48px; height: 48px;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  background: var(--p-50);
  color: var(--p-300);
}
.audience__icon svg { width: 24px; height: 24px; }
.audience__icon--emoji { font-size: 22px; line-height: 1; background: none; }
.audience h3 { font-size: 1.05rem; margin-bottom: .3em; }
.audience p { color: var(--ink-soft); font-size: .93rem; margin: 0; }

/* ==========================================================================
   15. Pricing
   ========================================================================== */

.plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; align-items: start; }

.plan {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px 26px 30px;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-shadow: var(--shadow-sm);
}
.plan--featured {
  border-color: var(--p-300);
  background: linear-gradient(180deg, var(--p-50), #fff 42%);
  box-shadow: var(--glow);
}
.plan__badge {
  position: absolute;
  top: -13px;
  inset-inline-start: 50%;
  transform: translateX(50%);
  background: var(--p-300);
  color: #fff;
  font-size: .78rem;
  font-weight: 700;
  padding: 5px 18px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}
.plan__name { font-size: 1.12rem; font-weight: 700; margin-bottom: 14px; }
.plan__price {
  font-size: 2rem;
  font-weight: 800;
  color: var(--p-400);
  line-height: 1.3;
  display: block;
}
.plan__period { color: var(--m-200); font-size: .86rem; display: block; margin-bottom: 22px; }

/* The pre-discount figure, struck through above the effective monthly price. */
.plan__price-was {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: var(--m-100);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  line-height: 1.4;
}
.plan__price-was[hidden] { display: none; }
.plan__price-now { display: block; }

/* Billing period switch.
   The border is an inset shadow rather than a real border so the padding box
   and the border box share an origin — that keeps the sliding thumb's
   measurements honest in both RTL and LTR. */
.billing {
  position: relative;
  display: inline-flex;
  margin-top: 26px;
  padding: 5px;
  border-radius: var(--radius-full);
  background: var(--bg-soft);
  box-shadow: inset 0 0 0 1px var(--line);
}

.billing__thumb {
  position: absolute;
  z-index: 0;
  top: 5px;
  left: 0;
  bottom: 5px;
  width: 0;
  border-radius: var(--radius-full);
  background: var(--p-300);
  box-shadow: 0 4px 14px rgba(29, 95, 168, .35);
  opacity: 0;
  transition:
    transform .38s cubic-bezier(.34, 1.32, .5, 1),
    width .38s cubic-bezier(.34, 1.32, .5, 1),
    opacity .2s ease;
}
.billing.is-ready .billing__thumb { opacity: 1; }

.billing__opt {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border: 0;
  border-radius: var(--radius-full);
  background: none;
  font: inherit;
  font-size: .95rem;
  font-weight: 700;
  color: var(--m-300);
  cursor: pointer;
  white-space: nowrap;
  transition: color .28s ease;
}
.billing__opt:hover { color: var(--p-300); }
.billing__opt.is-active { color: #fff; }
.billing__opt:focus-visible { outline: 2px solid var(--p-300); outline-offset: 3px; }

/* Without JS the thumb never gets sized, so the active option keeps a real
   background of its own until .is-ready says the thumb has taken over. */
.billing:not(.is-ready) .billing__opt.is-active { background: var(--p-300); }

.billing__save {
  font-size: .72rem;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: var(--radius-full);
  background: var(--p-50);
  color: var(--p-400);
  transition: background .28s ease, color .28s ease;
}
.billing__opt.is-active .billing__save { background: rgba(255, 255, 255, .22); color: #fff; }
.plan__features {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  display: grid;
  gap: 11px;
  font-size: .91rem;
  color: var(--ink-soft);
  flex-grow: 1;
  border-top: 1px solid var(--line);
  padding-top: 22px;
}
.plan__features li { display: flex; gap: 9px; align-items: flex-start; }
.plan__features li::before {
  content: "";
  flex-shrink: 0;
  width: 16px; height: 16px;
  margin-top: 7px;
  border-radius: var(--radius-full);
  background: var(--p-50);
  box-shadow: inset 0 0 0 3px var(--p-300);
}
.plan__features li.plan__feature--instagram::before { content: none; }
.plan__feature-icon {
  flex-shrink: 0;
  width: 16px; height: 16px;
  margin-top: 2px;
  color: var(--p-300);
}
.plan__feature-icon svg { width: 16px; height: 16px; }
.plan .btn { width: 100%; }

/* ==========================================================================
   15b. Pricing calculator
   ========================================================================== */

.calc-wrap { max-width: 640px; margin: 0 auto; }

.calc-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 24px;
}
.calc-field label { display: block; font-weight: 600; margin-bottom: 12px; font-size: 1.02rem; }
.calc-field input {
  width: 100%;
  padding: 16px 20px;
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  font-family: inherit;
  color: var(--ink);
}
.calc-field input:focus { outline: none; border-color: var(--p-300); }

.calc-result { display: none; margin-top: 26px; }
.calc-result.is-visible { display: block; }

.calc-total {
  background: linear-gradient(135deg, var(--p-300), var(--p-400));
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 26px;
  text-align: center;
  margin-bottom: 16px;
}
.calc-total__label { opacity: .85; font-size: .92rem; }
.calc-total__value { font-size: 2.3rem; font-weight: 800; margin: 6px 0 0; }

.calc-avg {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--p-50);
  border: 1px solid var(--brand-16);
  border-radius: var(--radius);
  padding: 14px 20px;
  font-weight: 600;
  margin-bottom: 22px;
}
.calc-avg span:last-child { color: var(--p-400); font-size: 1.1rem; font-weight: 800; }

.calc-breakdown h3 { font-size: 1.02rem; margin-bottom: 14px; }
.calc-breakdown-rows { display: grid; gap: 10px; }
.calc-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-soft);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: .92rem;
  color: var(--ink-soft);
}
.calc-row span:last-child { font-weight: 700; color: var(--ink); }

.calc-tiers { display: grid; gap: 12px; }
.calc-tier {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-radius: var(--radius);
  background: var(--bg-soft);
  font-weight: 600;
}
.calc-tier strong { color: var(--p-400); }

/* ==========================================================================
   16. Testimonials
   ========================================================================== */

.quote {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 28px;
  box-shadow: var(--shadow-sm);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.quote__mark { color: var(--p-100); font-size: 2.6rem; line-height: 1; margin-bottom: 8px; }
.quote__text { color: var(--m-400); margin-bottom: 22px; flex-grow: 1; }
.quote__who { display: flex; align-items: center; gap: 12px; }
.quote__avatar {
  width: 46px; height: 46px;
  border-radius: var(--radius-full);
  object-fit: cover;
  background: var(--p-50);
  flex-shrink: 0;
}
.quote__name { font-weight: 700; font-size: .96rem; }
.quote__role { color: var(--m-200); font-size: .86rem; }

/* ==========================================================================
   17. FAQ
   ========================================================================== */

.faq { max-width: 860px; margin-inline: auto; display: grid; gap: 14px; }
.faq__item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.faq__item[open] { border-color: var(--p-75); box-shadow: var(--shadow-sm); }
.faq__q {
  list-style: none;
  cursor: pointer;
  padding: 20px 24px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.faq__q::-webkit-details-marker { display: none; }
/* physical borders on purpose: the chevron must point down in both directions */
.faq__q::after {
  content: "";
  flex-shrink: 0;
  width: 11px; height: 11px;
  border-right: 2px solid var(--p-300);
  border-bottom: 2px solid var(--p-300);
  transform: rotate(45deg);
  transition: transform .22s ease;
  margin-block-start: -5px;
}
.faq__item[open] .faq__q::after { transform: rotate(-135deg); margin-block-start: 3px; }
.faq__a { padding: 0 24px 22px; color: var(--ink-soft); }

/* ==========================================================================
   18. CTA band
   ========================================================================== */

.cta-band {
  background: linear-gradient(135deg, var(--p-500), var(--p-300));
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 56px 48px;
  text-align: center;
  box-shadow: var(--shadow-lg);
}
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255, 255, 255, .88); max-width: 60ch; margin-inline: auto; }
.cta-band__buttons { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 30px; }
.cta-band .btn--primary { background: #fff; color: var(--p-500); box-shadow: none; }
.cta-band .btn--primary:hover { background: var(--p-50); color: var(--p-500); }

/* ==========================================================================
   19. Posts
   ========================================================================== */

.post-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform .2s ease, box-shadow .2s ease;
}
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.post-card__thumb { aspect-ratio: 16 / 9; overflow: hidden; background: var(--p-50); }
.post-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.post-card__body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex-grow: 1; }
.post-card__meta { font-size: .84rem; color: var(--m-200); margin-bottom: 10px; }
.post-card__meta a { color: var(--m-200); }
.post-card__meta a:hover { color: var(--p-400); }
.post-card__title { font-size: 1.08rem; margin-bottom: .5em; }
.post-card__title a { color: var(--ink); }
.post-card__title a:hover { color: var(--p-400); }
.post-card__excerpt { color: var(--ink-soft); font-size: .94rem; flex-grow: 1; margin-bottom: 16px; }
.post-card__more { font-weight: 700; font-size: .92rem; }

/* single / page */
.entry { max-width: 800px; margin-inline: auto; }
.entry__header { margin-bottom: 32px; text-align: center; }
.entry__meta { color: var(--m-200); font-size: .9rem; }
.entry__thumb { border-radius: var(--radius); overflow: hidden; margin-bottom: 34px; }
.entry__content > * + * { margin-top: 1.15em; }
.entry__content h2 { margin-top: 1.8em; }
.entry__content h3 { margin-top: 1.5em; }
.entry__content img { border-radius: var(--radius); }
.entry__content blockquote {
  margin: 1.6em 0;
  padding: 18px 24px;
  border-inline-start: 4px solid var(--p-300);
  background: var(--p-50);
  border-radius: var(--radius-sm);
  color: var(--m-400);
}
.entry__content table { width: 100%; border-collapse: collapse; }
.entry__content th, .entry__content td { border: 1px solid var(--line); padding: 10px 14px; text-align: start; }
.entry__content th { background: var(--bg-soft); }
.entry__content code { background: var(--bg-soft); padding: 2px 7px; border-radius: 6px; font-size: .9em; }

/* product landing pages (template-product.php): stat row under the hero,
   and Media & Text / Columns / Quote get the same card language as the
   homepage's .feature-card / .benefit so admins can build alternating
   feature rows and bento-style grids straight from the block editor. */
.stats--product { margin-top: 0; }

.entry--product { max-width: none; }
.entry--product .entry__content { max-width: 800px; margin-inline: auto; }
.entry--product .entry__content > .alignwide { max-width: 1100px; }
.entry--product .entry__content > .alignfull { max-width: none; }

.entry--product .entry__content .wp-block-media-text {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}
.entry--product .entry__content .wp-block-media-text.has-media-on-the-right {
  grid-template-areas: "content media";
}
.entry--product .entry__content .wp-block-media-text.has-media-on-the-right > .wp-block-media-text__media { grid-area: media; }
.entry--product .entry__content .wp-block-media-text.has-media-on-the-right > .wp-block-media-text__content { grid-area: content; }
.entry--product .entry__content .wp-block-media-text__media img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  display: block;
}
.entry--product .entry__content .wp-block-media-text__content { padding: 0; }
.entry--product .entry__content .wp-block-media-text__content > * + * { margin-top: 1em; }

.entry--product .entry__content .wp-block-columns {
  gap: 24px;
  margin-top: 1.6em;
}
.entry--product .entry__content .wp-block-column {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 26px 24px;
}
.entry--product .entry__content .wp-block-column > * + * { margin-top: .7em; }
.entry--product .entry__content .wp-block-column h2,
.entry--product .entry__content .wp-block-column h3,
.entry--product .entry__content .wp-block-column h4 { margin-top: 0; }

@media (max-width: 720px) {
  .entry--product .entry__content .wp-block-media-text,
  .entry--product .entry__content .wp-block-media-text.has-media-on-the-right {
    grid-template-columns: 1fr;
    grid-template-areas: "media" "content";
    gap: 20px;
  }
}

.page-hero {
  background: var(--p-50);
  padding-block: 56px;
  text-align: center;
  border-bottom: 1px solid var(--line);
}
.page-hero h1 { margin: 0; }
.page-hero h1 .accent { color: var(--p-300); }
.page-hero p { color: var(--ink-soft); margin-top: 10px; }

/* pagination */
.pagination { display: flex; justify-content: center; gap: 8px; margin-top: 48px; flex-wrap: wrap; }
.pagination .page-numbers {
  min-width: 42px;
  height: 42px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--m-400);
  font-weight: 500;
}
.pagination .page-numbers:hover { border-color: var(--p-200); color: var(--p-400); }
.pagination .current { background: var(--p-300); border-color: var(--p-300); color: #fff; }

/* comments */
.comments { max-width: 800px; margin: 64px auto 0; }
.comments ol { list-style: none; padding: 0; margin: 0; }
.comments .comment-body {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-bottom: 16px;
  background: #fff;
}
.comments .children { padding-inline-start: 32px; }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea,
.search-field,
input[type="search"] {
  width: 100%;
  font-family: inherit;
  font-size: 1rem;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink);
}
.comment-form label { display: block; margin-bottom: 6px; font-weight: 500; font-size: .93rem; }
.comment-form p { margin-bottom: 16px; }
.comment-form .submit {
  font-family: inherit;
  font-weight: 700;
  padding: 14px 32px;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--p-300);
  color: #fff;
  cursor: pointer;
}

/* ==========================================================================
   20. Footer
   ========================================================================== */

.site-footer {
  background: #10262f;
  color: #b9c8ce;
  padding-block: 64px 0;
  margin-top: 0;
}
.site-footer a { color: #b9c8ce; }
.site-footer a:hover { color: #fff; }
.site-footer h3 {
  color: #fff;
  font-size: 1rem;
  margin-bottom: 18px;
}

.footer__top {
  display: grid;
  grid-template-columns: 1fr minmax(140px, max-content) minmax(140px, max-content);
  gap: 40px;
  padding-bottom: 22px;
}
.footer__top:has(.footer__badges) {
  grid-template-columns: 1fr minmax(140px, max-content) minmax(140px, max-content) minmax(160px, max-content);
}

.footer__brand-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.footer__brand-head .site-brand__mark svg { width: 32px; height: 32px; display: block; }
.footer__wordmark {
  color: #fff;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: .01em;
}
.footer__about { font-size: .94rem; margin: 0; max-width: 44ch; }

/* Small heading over a row of pills (contact details, social links). */
.footer__pill-title {
  font-size: .86rem;
  font-weight: 700;
  color: #8fa3ab;
  margin: 22px 0 10px;
}
.footer__pill-title--social { margin-top: 0; }

.footer__contact { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 0; }

/* Connection status: a live-looking readout rather than a plain text link. */
.footer__status-item { margin-top: 2px; }
.footer__status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 12px;
  border-radius: var(--radius-full);
  background: rgba(45, 200, 130, .1);
  border: 1px solid rgba(45, 200, 130, .3);
  color: #d6f4e6;
}
.footer__status:hover { background: rgba(45, 200, 130, .18); color: #fff; }
.footer__status-dot {
  position: relative;
  width: 9px;
  height: 9px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: #2dc882;
  box-shadow: 0 0 0 0 rgba(45, 200, 130, .7);
  animation: abri-status-pulse 1.9s ease-out infinite;
}
@keyframes abri-status-pulse {
  0%       { box-shadow: 0 0 0 0 rgba(45, 200, 130, .7); }
  70%, 100% { box-shadow: 0 0 0 8px rgba(45, 200, 130, 0); }
}
.footer__status-value {
  font-weight: 800;
  font-size: .82rem;
  color: #2dc882;
  margin-inline-start: 2px;
}

.footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; font-size: .94rem; }

.footer__badges {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  height: 100%;
  text-align: center;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .03);
}
.footer__badges img {
  height: 68px;
  width: auto;
  background: #fff;
  border-radius: var(--radius-sm);
  padding: 6px;
}

.footer__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 255, 255, .16);
  font-size: .85rem;
  line-height: 1.4;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
a.footer__pill:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .32); }
.footer__pill svg { width: 16px; height: 16px; flex-shrink: 0; }

.footer__bottom-links { display: flex; flex-wrap: wrap; gap: 10px; padding-bottom: 22px; }

.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding-block: 22px;
}
.footer__copy { font-size: .88rem; color: #b9c8ce; }

/* ==========================================================================
   21. Widgets
   ========================================================================== */

.widget { margin-bottom: 32px; }
.widget-title { font-size: 1.05rem; margin-bottom: 14px; }
.widget ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; font-size: .95rem; }

/* ==========================================================================
   22. "Request a demo" modal
   ========================================================================== */

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gutter);
  background: rgba(16, 42, 55, .5);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity .2s ease;
}
.modal-backdrop[hidden] { display: none; }
.modal-backdrop.is-open { opacity: 1; }

.modal {
  width: 100%;
  max-width: 440px;
  max-height: calc(100vh - var(--gutter) * 2);
  overflow-y: auto;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 36px 32px 32px;
  position: relative;
  transform: translateY(12px) scale(.98);
  opacity: 0;
  transition: transform .22s cubic-bezier(.2, .8, .3, 1), opacity .2s ease;
}
.modal-backdrop.is-open .modal { transform: translateY(0) scale(1); opacity: 1; }

.modal__close {
  position: absolute;
  inset-inline-end: 16px;
  inset-block-start: 16px;
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.modal__close:hover { background: var(--bg-soft); color: var(--ink); }
.modal__close svg { width: 16px; height: 16px; }

.modal__lead { color: var(--ink-soft); font-size: .95rem; margin-bottom: 22px; }

.modal__error {
  color: var(--danger);
  background: var(--danger-10);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: .88rem;
  margin-bottom: 16px;
}
.modal__error[hidden] { display: none; }

.modal__body--success { text-align: center; }
.modal__success-icon {
  width: 56px; height: 56px;
  margin: 0 auto 18px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  background: var(--p-50);
  color: var(--p-300);
}
.modal__success-icon svg { width: 26px; height: 26px; }
.modal__body--success .modal__lead { margin-bottom: 26px; }

.field { margin-bottom: 16px; }
.field > label {
  display: block;
  font-size: .85rem;
  font-weight: 700;
  color: var(--ink-soft);
  margin-bottom: 7px;
}
.field--trap {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

.input {
  width: 100%;
  font: inherit;
  font-size: .95rem;
  color: var(--ink);
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--bg-soft);
  transition: border-color .15s ease, background .15s ease;
}
.input:hover { border-color: var(--p-75); }
.input:focus-visible { border-color: var(--p-300); background: #fff; outline: none; }
textarea.input { resize: vertical; min-height: 80px; }

.btn-block { width: 100%; margin-top: 6px; }
.btn[disabled] { opacity: .6; cursor: not-allowed; transform: none; }

@media (max-width: 480px) {
  .modal-backdrop { padding: 0; align-items: flex-end; }
  .modal {
    max-width: none;
    width: 100%;
    max-height: 88vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: 28px 22px 26px;
    transform: translateY(100%);
  }
  .modal-backdrop.is-open .modal { transform: translateY(0); }
}

/* ==========================================================================
   23. Responsive
   ========================================================================== */

@media (max-width: 1100px) {
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
  :root { --section-y: 68px; }
  .hero__inner { grid-template-columns: 1fr; gap: 40px; }
  .grid--4, .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__top,
  .footer__top:has(.footer__badges) { grid-template-columns: 1fr 1fr; gap: 34px; }
}

@media (max-width: 860px) {
  .header-actions { margin-inline-start: auto; }
  .nav-toggle { display: inline-flex; }
  .header-actions .btn--ghost,
  .header-actions .btn--primary,
  .header-actions__link { display: none; }
  .lang-switch { display: flex; }
  .site-brand__name { display: none; }

  .nav-main a.nav-main__cta { display: block; margin-top: 16px; }

  .nav-main {
    position: fixed;
    inset: 74px 0 auto 0;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
    padding: 12px var(--gutter) 22px;
    display: none;
    max-height: calc(100vh - 74px);
    overflow-y: auto;
  }
  .nav-main.is-open { display: block; }
  .nav-main > ul { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav-main a { padding: 13px 12px; }
  .nav-main .sub-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    border-inline-start: 2px solid var(--line);
    border-radius: 0;
    padding: 0;
    margin-inline-start: 12px;
  }

  /* the mega panel becomes a plain accordion on small screens */
  .mega__trigger { width: 100%; justify-content: space-between; padding: 13px 12px; }
  .nav-main .has-mega,
  .nav-main .has-mega:has(> .mega--compact) { position: relative; }
  .mega, .mega--compact {
    position: static;
    inset-inline: auto;
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    padding-top: 0;
    pointer-events: auto;
    border-inline-start: 2px solid var(--line);
    margin-inline-start: 12px;
  }
  .has-mega:hover > .mega,
  .has-mega:focus-within > .mega { display: none; }
  .has-mega.is-open > .mega { display: block; }
  .mega__inner,
  .mega--compact .mega__inner {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    width: auto;
    max-width: none;
  }
  .mega .wrap { padding-inline: 0; }
  /* must out-specify the desktop .mega[data-cols="N"] .mega__grid rules
     (0,3,0) above, otherwise a 3-column panel stays 3 columns wide in the
     single-column mobile accordion */
  .nav-main .mega[data-cols] .mega__grid {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 6px 0 12px;
  }
  /* the column rules only make sense side by side */
  .mega__col + .mega__col::before { display: none; }
  .mega__links a { padding: 8px 10px; }
  .mega__ico { width: 28px; height: 28px; border-radius: 7px; }
  .mega__ico svg { width: 15px; height: 15px; }
  .mega__item-desc, .mega__go, .mega__foot { display: none; }

  /* the rail only reads correctly on a horizontal row */
  .steps { grid-template-columns: 1fr; gap: 34px; }
  .steps::before { display: none; }
}

@media (max-width: 700px) {
  :root { --section-y: 56px; --gutter: 18px; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .plans { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat-hero { grid-template-columns: 1fr; }
  .stat-hero__num { font-size: 2.4rem; }
  .cta-band { padding: 40px 24px; }
  .footer__top,
  .footer__top:has(.footer__badges) { grid-template-columns: 1fr; }
  .section__head { margin-bottom: 36px; }
  .hero { padding-block: 56px 64px; }
  .hero__copy { text-align: center; }
  .hero h1 { font-size: 2.35rem; }
  .hero__lead { margin-inline: auto; font-size: 1rem; max-width: 42ch; }
  .hero__cta { justify-content: center; }
  .hero__notes { justify-content: center; }

  /* The bundled animation's own content is a fixed pixel size (it doesn't
     resize with its container), so at phone widths it renders small with
     empty space on the sides. Scale the iframe up and clip the overflow to
     make the icons themselves bigger instead of just the empty frame. */
  #messenger-animation .messenger-animation__frame {
    max-width: none;
    overflow: hidden;
  }
  #messenger-animation .messenger-animation__iframe {
    transform: scale(1.5);
    transform-origin: center;
  }
}

/* ==========================================================================
   23b. Homepage refresh
   Unified-inbox mockup, testimonial clamp/rail, compact mobile footer, and
   the two-up card grids. Kept after section 23 so the mobile overrides here
   land after the generic ".grid--N { 1fr }" rule above.
   ========================================================================== */

/* -- Feature card 1: channels funnelling into a single inbox --------------- */
.unify { display: flex; flex-direction: column; align-items: center; gap: 9px; width: 100%; }
.unify__sources { display: flex; gap: 8px; }
.unify__src {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-full);
  display: grid;
  place-items: center;
  color: #fff;
  flex-shrink: 0;
}
.unify__src svg { width: 16px; height: 16px; }
.unify__src--whatsapp { background: #25d366; }
.unify__src--instagram { background: #d9317f; }
.unify__src--telegram { background: #26a5e4; }
.unify__src--bale { background: #3f9998; }
.unify__funnel {
  width: 0;
  height: 0;
  border-inline: 40px solid transparent;
  border-top: 20px solid rgba(255, 255, 255, .16);
}
.unify__inbox {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--p-300);
  color: #fff;
}
.unify__inbox svg { width: 16px; height: 16px; }
.unify__inbox-icon { display: grid; place-items: center; flex-shrink: 0; }
.unify__inbox-text { font-size: .72rem; font-weight: 700; }

/* -- Testimonials: clamp long quotes behind a "more" button ---------------- */
.quote__text.is-clamped {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
}
.quote__more {
  align-self: flex-start;
  margin: 10px 0 22px;
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  font-size: .9rem;
  font-weight: 700;
  color: var(--p-300);
  cursor: pointer;
}
.quote__more:hover { color: var(--p-400); }
.quote__more[hidden] { display: none; }
/* the button takes over the bottom margin when it is shown */
.quote:has(.quote__more:not([hidden])) .quote__text { margin-bottom: 0 !important; }

/* -- Video lightbox -------------------------------------------------------- */
.modal--video {
  max-width: 900px;
  width: 100%;
  padding: 0;
  overflow: hidden;
  background: #000;
}
.modal--video .modal__close {
  background: rgba(0, 0, 0, .55);
  color: #fff;
  border-color: rgba(255, 255, 255, .25);
  z-index: 2;
}
.modal--video .modal__close:hover { background: rgba(0, 0, 0, .8); color: #fff; }
.modal__video { display: block; width: 100%; max-height: 80vh; background: #000; }
.modal__video-empty {
  padding: 52px 28px;
  text-align: center;
  color: #fff;
  font-size: .95rem;
  line-height: 1.9;
}

/* -- Footer: two link columns side by side, collapsible social row --------- */
.footer__cols { display: contents; }
/* Class-only selector on purpose: the mobile override below is also a single
   class, so a ".footer__social > summary" descendant selector here would
   out-specify it and keep the summary hidden on phones. */
.footer__social-summary { display: none; }
.footer__social-summary::-webkit-details-marker { display: none; }

/* -- Two-up card grids on phones (keeps the homepage short) ---------------- */
@media (max-width: 700px) {
  #problems .grid--4,
  #audiences .grid--2,
  .feature-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

  .problem, .audience, .feature-card { padding: 18px 16px; }
  .problem h3, .audience h3 { font-size: .95rem; }
  .problem p, .audience p { font-size: .82rem; }
  .audience { flex-direction: column; gap: 12px; }
  /* The preview mockups are laid out for a ~330px card; the two-up grid gives
     them ~130px, where every row wraps one word per line. Swap them for the
     card's own icon rather than shipping a squeezed mockup. */
  .feature-card__preview { display: none; }
  .feature-card__head svg { display: none; }
  .feature-card__icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    margin-bottom: 12px;
    border-radius: 11px;
    background: rgba(255, 255, 255, .1);
    color: var(--p-100);
  }
  .feature-card__icon svg { width: 20px; height: 20px; }
  .feature-card__head h3 { font-size: .95rem; }
  .feature-card__text { font-size: .76rem; margin: 8px 0 0; }

  /* Testimonials become a swipeable rail instead of a tall stack. */
  .quotes-rail {
    grid-auto-flow: column;
    grid-auto-columns: 84%;
    grid-template-columns: none;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
  }
  .quotes-rail .quote { scroll-snap-align: start; }

  /* Footer: quick links and technical resources share a row. */
  .footer__cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 24px;
  }
  .footer__social-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    list-style: none;
    cursor: pointer;
    padding: 14px 0;
    font-weight: 700;
    font-size: .95rem;
    color: #fff;
    border-top: 1px solid rgba(255, 255, 255, .12);
  }
  .footer__social-summary::after {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    margin-block-start: -4px;
    transition: transform .2s ease;
  }
  .footer__social[open] .footer__social-summary::after { transform: rotate(-135deg); margin-block-start: 2px; }
  .footer__bottom-links { gap: 8px; }
  /* The accordion summary already carries this heading on phones. */
  .footer__pill-title--social { display: none; }

  /* The laptop screen is only ~195px tall at phone width, so the video card
     drops out of the mockup and sits under it instead of covering the
     screenshot. The mockup itself stays. */
  .hero__stage-card {
    position: static;
    transform: none;
    width: 86%;
    margin: 16px auto 0;
    padding: 10px 10px 12px;
  }
  .hero__video-link { font-size: .82rem; margin-top: 10px; }
  .hero h1 { font-size: 2.05rem; }
}

/* ==========================================================================
   24. Motion & print
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Per-device section visibility, set from Customize → each front-page
   section's "hide on …" checkboxes. Breakpoints match section 22 above:
   mobile ≤700px, tablet 701–1024px, desktop ≥1025px. */
@media (min-width: 1025px) {
  .hide-desktop { display: none !important; }
}
@media (min-width: 701px) and (max-width: 1024px) {
  .hide-tablet { display: none !important; }
}
@media (max-width: 700px) {
  .hide-mobile { display: none !important; }
}

@media print {
  .site-header, .site-footer, .cta-band, .nav-toggle { display: none !important; }
  body { color: #000; }
}