/* صفحهٔ تعرفه‌ها و مشاوره
   سیستم طراحی: design-system/nariman-yadollahi/MASTER.md */

/* ══ PAGE HEAD ══════════════════════════════════════════════════════ */
.page-head {
  padding: var(--space-2xl) 0 var(--space-xl);
  border-block-end: 1px solid var(--color-border);
}
.page-hl {
  font-size: var(--text-hero);
  font-weight: var(--weight-display);
  line-height: 1.35;
  max-width: 18ch;
  margin-bottom: var(--space-md);
}
.page-hl span { color: var(--color-accent); }
.page-lead { color: var(--color-fg-muted); max-width: 62ch; }

/* هشدار موقت بودن قیمت‌ها — تا رسیدن اعداد واقعی */
.notice {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: var(--space-md);
  padding: 14px var(--space-sm);
  border: 1px dashed var(--color-border-strong);
  border-radius: 12px;
  color: var(--color-fg-subtle);
  font-size: var(--text-small);
  max-width: 62ch;
}
.notice svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 3px; color: var(--color-fg-muted); }

/* ══ PRICE GROUP ════════════════════════════════════════════════════ */
.price-group { padding-block: var(--space-2xl); border-block-end: 1px solid var(--color-border); }
.price-group.alt { background: var(--color-surface-1); }

.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); align-items: start; }

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 18px;
  padding: var(--space-md);
  transition: border-color .3s ease-out;
}
@media (hover: hover) {
  .plan:hover { border-color: var(--color-border-strong); }
}

/* پلن پیشنهادی: علاوه بر رنگ، برچسب و حاشیهٔ ضخیم‌تر هم دارد —
   اتکای صرف به رنگ معیار WCAG 1.4.1 را رد می‌کند. MASTER §۱۱
   حاشیهٔ دوم با box-shadow است تا محتوا یک پیکسل جابه‌جا نشود. */
.plan.featured {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px var(--color-accent);
  background: var(--color-surface-3);
}
/* برچسب روی لبهٔ بالای کارت می‌نشیند، نه در جریان محتوا —
   تا قیمت و فهرست کارت‌های هم‌ردیف هم‌تراز بمانند. */
.plan-tag {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: var(--space-md);
  transform: translateY(-50%);
  font-size: 0.75rem;
  font-weight: var(--weight-label);
  line-height: 1.6;
  background: var(--color-accent);
  color: var(--color-on-accent);
  border-radius: 40px;
  padding: 3px 12px;
  white-space: nowrap;
}

.plan h3 { font-size: var(--text-h3); font-weight: bold; margin-bottom: 6px; }
.plan-for { color: var(--color-fg-subtle); font-size: var(--text-small); margin-bottom: var(--space-sm); }

.plan-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  padding-block: var(--space-sm);
  border-block: 1px solid var(--color-border);
  margin-bottom: var(--space-sm);
}
.plan-num { font-size: 1.75rem; font-weight: var(--weight-display); line-height: 1.3; }
.plan-unit { color: var(--color-fg-subtle); font-size: var(--text-small); }
.plan-from { color: var(--color-fg-subtle); font-size: var(--text-small); }

.plan ul { list-style: none; display: grid; gap: 10px; margin-bottom: var(--space-md); flex-grow: 1; }
.plan li {
  position: relative;
  padding-inline-start: 26px;
  color: var(--color-fg-muted);
  font-size: 0.9375rem;
  line-height: 1.8;
}
.plan li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.6em;
  width: 14px; height: 8px;
  /* جهت فیزیکی: تیک شکل است، نه متن — در RTL نباید برگردد */
  border-left: 2px solid var(--color-accent);
  border-bottom: 2px solid var(--color-accent);
  transform: rotate(-45deg);
}
/* موردی که در این پلن نیست */
.plan li.off { color: var(--color-fg-subtle); }
.plan li.off::before {
  border: none;
  inset-block-start: 0.85em;
  width: 12px; height: 2px;
  background: var(--color-border-strong);
  transform: none;
}
.plan .cta-btn, .plan .btn-ghost { width: 100%; box-shadow: none; }
/* هم‌قدی با دکمهٔ ghost که حاشیهٔ ۱ پیکسلی دارد */
.plan .cta-btn { border: 1px solid transparent; }

/* ══ CONSULT ════════════════════════════════════════════════════════ */
.consult-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: var(--space-xl);
  align-items: start;
}
.consult-points { display: grid; gap: var(--space-sm); margin-top: var(--space-md); }
.consult-point {
  border-inline-start: 2px solid var(--color-accent);
  padding-inline-start: var(--space-sm);
}
.consult-point h3 { font-size: 1rem; font-weight: bold; margin-bottom: 4px; }
.consult-point p { color: var(--color-fg-muted); font-size: 0.9375rem; }

/* ══ FORM CARD ══════════════════════════════════════════════════════ */
.form-card {
  background: var(--color-surface-3);
  border: 1px solid var(--color-border);
  border-radius: 18px;
  padding: var(--space-md);
}
.form-card h3 { font-size: var(--text-h3); font-weight: bold; margin-bottom: 8px; }
.form-card > p { color: var(--color-fg-muted); font-size: 0.9375rem; margin-bottom: var(--space-md); }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); }

/* ══ FAQ ════════════════════════════════════════════════════════════ */
.faq { display: grid; gap: 12px; max-width: 68ch; }
.faq details {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .3s ease-out;
}
.faq details[open] { border-color: var(--color-border-strong); }
.faq summary {
  cursor: pointer;
  padding: var(--space-sm) var(--space-md);
  font-weight: var(--weight-label);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 12px;
}
.faq summary::-webkit-details-marker { display: none; }
/* نشانهٔ باز/بسته — علاوه بر تغییر حالت، دیداری هم هست */
.faq summary::before {
  content: "";
  flex-shrink: 0;
  width: 9px; height: 9px;
  /* جهت فیزیکی: بسته رو به پایین، باز رو به بالا — در RTL نباید به چپ/راست بچرخد */
  border-right: 2px solid var(--color-accent);
  border-bottom: 2px solid var(--color-accent);
  transform: rotate(45deg);
  transition: transform .2s ease-out;
}
.faq details[open] summary::before { transform: rotate(-135deg); }
.faq summary:hover { color: var(--color-accent); }
/* details با overflow:hidden حلقهٔ بیرونی را می‌بُرد؛ حلقه درون کادر کشیده می‌شود */
.faq summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -3px; border-radius: 13px; }
.faq .answer {
  padding: 0 var(--space-md) var(--space-md);
  color: var(--color-fg-muted);
  font-size: 0.9375rem;
}

/* پرسش‌ها و ستون کناری «سؤال دیگری دارید؟» */
.faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 68ch) minmax(240px, 1fr);
  gap: var(--space-lg);
  align-items: start;
}
.faq-layout .faq { max-width: none; }
.faq-aside {
  position: sticky;
  top: 96px;
  background: var(--color-surface-3);
  border: 1px solid var(--color-border);
  border-radius: 18px;
  padding: var(--space-md);
}
.faq-aside h3 { font-size: var(--text-h3); font-weight: bold; margin-bottom: 8px; }
.faq-aside p { color: var(--color-fg-muted); font-size: 0.9375rem; margin-bottom: var(--space-md); }
.faq-aside .btn-ghost { width: 100%; }

/* ══ چهار پلن (لوگو و وب‌سایت) ═══════════════════════════════════════ */
.plans.four { grid-template-columns: repeat(4, 1fr); gap: var(--space-sm); }
.plans.four .plan { padding-inline: 20px; }
.plans.four .plan-tag { inset-inline-start: 20px; }
.plans.four .plan-num { font-size: 1.5rem; }
/* ردیف‌های داخلی کارت‌ها (عنوان، توضیح، قیمت، زمان، فهرست، دکمه) میان
   کارت‌های هم‌ردیف مشترک است؛ اگر توضیح یک کارت دوخطی شود، قیمت همهٔ
   کارت‌ها با هم پایین می‌آید و هم‌تراز می‌ماند. */
@supports (grid-template-rows: subgrid) {
  .plans.four .plan {
    display: grid;
    grid-row: span 6;
    grid-template-rows: subgrid;
    row-gap: 0;
    align-content: start;
  }
  /* فهرست در ردیف کشیده‌شده نباید فاصلهٔ آیتم‌ها را باز کند */
  .plans.four .plan ul { align-content: start; }
}
/* در نمایشگر پهن، ردیف چهارکارتی و جدول نرخ‌ها از ستون متن بیرون می‌زنند
   تا هر کارت جای نفس داشته باشد؛ تیترها با ناوبری هم‌تراز می‌مانند. */
@media (min-width: 1280px) {
  .plans.four, .plans.four ~ .rates { margin-inline: -60px; }
}
/* در ستون ۲۳۵ پیکسلی، فاصلهٔ داخلی دکمهٔ اصلی متن را دوخطی می‌کرد */
.plans.four .cta-btn, .plans.four .btn-ghost { padding-inline: 16px; white-space: nowrap; }

/* پلن VIP: علاوه بر رنگ، برچسب متنی دارد (WCAG 1.4.1) */
.plan.vip { border-color: var(--color-border-strong); background: linear-gradient(180deg, var(--color-surface-3), var(--color-surface-2)); }
.plan.vip .plan-tag { background: var(--color-surface-3); color: var(--color-fg); border: 1px solid var(--color-border-strong); }

.plan-time { color: var(--color-fg-subtle); font-size: var(--text-small); margin-top: -6px; margin-bottom: var(--space-sm); }

/* ══ جدول نرخ اقلام چاپی ══════════════════════════════════════════════ */
.rates {
  margin-top: var(--space-xl);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 16px;
}
.rates summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-md);
  cursor: pointer;
  list-style: none;
}
.rates summary::-webkit-details-marker { display: none; }
.rates summary:hover .rates-title { color: var(--color-accent); }
.rates summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 16px; }
.rates-head { display: grid; gap: 4px; }
.rates-title { font-size: var(--text-h3); font-weight: bold; transition: color .2s; }
.rates-sub { color: var(--color-fg-subtle); font-size: var(--text-small); }
.rates-arrow {
  width: 38px; height: 38px; flex-shrink: 0;
  padding: 8px;
  border: 1px solid var(--color-border-strong);
  border-radius: 50%;
  transition: transform .25s ease-out;
}
.rates[open] .rates-arrow { transform: rotate(180deg); }
.rates .rate-list, .rates .rate-notes { margin-inline: var(--space-md); }
.rates .rate-notes { margin-bottom: var(--space-md); }
@media (prefers-reduced-motion: reduce) { .rates-arrow { transition: none; } }
.rate-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 var(--space-lg);
  border-block-start: 1px solid var(--color-border);
}
.rate-list div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-sm);
  padding-block: 12px;
  border-block-end: 1px solid var(--color-border);
}
.rate-list dt { color: var(--color-fg-muted); font-size: 0.9375rem; }
.rate-list dt small { display: block; color: var(--color-fg-subtle); font-size: var(--text-small); }
.rate-list dd { font-weight: bold; white-space: nowrap; font-size: 0.9375rem; }
.rate-notes { margin-top: var(--space-md); display: grid; gap: 6px; color: var(--color-fg-subtle); font-size: var(--text-small); }

/* ══ RESPONSIVE ═════════════════════════════════════════════════════ */
.plans-pager { display: none; }   /* فقط در موبایل، زیر لغزندهٔ پلن‌ها */
@media (max-width: 1024px) {
  .plans.four { grid-template-columns: repeat(2, 1fr); gap: var(--space-md); }
}
@media (max-width: 900px) {
  .plans { grid-template-columns: 1fr; }
  .plans.four { grid-template-columns: repeat(2, 1fr); }
  .consult-grid { grid-template-columns: 1fr; gap: var(--space-lg); }
}
@media (max-width: 900px) {
  .faq-layout { grid-template-columns: 1fr; }
  .faq-aside { position: static; }
}
@media (max-width: 640px) {
  .form-row { grid-template-columns: 1fr; }
  .rate-list { grid-template-columns: 1fr; }

  /* ردیف چهارکارتی در موبایل: لغزندهٔ افقی با قفل روی هر کارت.
     کارت بعدی از لبه پیداست و نقطه‌ها جای کاربر را نشان می‌دهند.
     جهت پیمایش در RTL خودبه‌خود از راست است. */
  .plans.four {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 84%;
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-inline: -36px;
    padding: 16px 36px 6px;   /* بالا: جای برچسب روی لبهٔ کارت */
    scroll-padding-inline: 36px;
  }
  .plans.four::-webkit-scrollbar { display: none; }
  .plans.four:focus-visible { outline-offset: -2px; border-radius: 18px; }
  .plans.four .plan { scroll-snap-align: center; }
  .plans-pager {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
  }
  .plans-pager i {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--color-border-strong);
    transition: width .2s ease-out, background .2s;
  }
  .plans-pager i.on { width: 20px; border-radius: 4px; background: var(--color-accent); }
}
/* حرکت دکمه و کارت فقط برای نشانگر واقعی؛ در لمسی hover چسبنده می‌ماند */
@media (hover: none) {
  .cta-btn:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cta-btn, .cta-btn:hover { transition: none; transform: none; }
  .plan, .faq details, .faq summary::before, .rates-title, .plans-pager i { transition: none; }
  .plans.four { scroll-behavior: auto; }
}

/* جایگزین سبک‌های درون‌خطی */
.consult-price { max-width: 320px; }
.cta-final .eyebrow { justify-content: center; }

/* ══════════════════════════════════════════════════════════════════════
   استودیوی هوش مصنوعی — حال‌وهوای هیگزفیلد
   جزیره‌ای تیره‌تر از بقیهٔ صفحه، با نور لیمویی و صورتی پشت کارت‌ها.
   رنگ‌ها فقط در همین بخش تعریف می‌شوند تا بقیهٔ صفحه دست نخورد.
   کنتراست: لیمویی روی مشکی ۱۶:۱، متن کم‌رنگ ۷:۱.
   ══════════════════════════════════════════════════════════════════════ */
.ai-studio {
  --hf-bg: #050506;
  --hf-card: rgba(255,255,255,.035);
  --hf-line: rgba(255,255,255,.09);
  --hf-text: #f4f4f2;
  --hf-muted: #a9aaa6;
  --hf-dim: #7d7e7a;
  --hf-lime: #d1fe17;
  --hf-pink: #ff5ec4;
  --hf-violet: #8b5cff;
  position: relative;
  isolation: isolate;
  /* clip هاله‌ها را می‌بُرد ولی ظرف پیمایش نمی‌سازد؛ با hidden، خلاصهٔ
     سفارش و نوار پایین موبایل (position: sticky) نمی‌چسبیدند */
  overflow: hidden;
  overflow: clip;
  background: var(--hf-bg);
  color: var(--hf-text);
  border-block: 1px solid var(--hf-line);
}
/* هاله‌ها با گرادیان شعاعی، نه filter: blur — همان نرمی، بی هزینهٔ
   رندر سنگین روی موبایل */
.ai-studio::before, .ai-studio::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 960px; height: 960px;
  border-radius: 50%;
  pointer-events: none;
}
.ai-studio::before {
  background: radial-gradient(closest-side, rgba(209,254,23,.2), rgba(209,254,23,.08) 45%, transparent);
  inset-block-start: -440px; inset-inline-end: -340px;
}
.ai-studio::after {
  background: radial-gradient(closest-side, rgba(255,94,196,.16), rgba(255,94,196,.06) 45%, transparent);
  inset-block-end: -480px; inset-inline-start: -380px;
}
@media (max-width: 640px) {
  .ai-studio::before, .ai-studio::after { width: 560px; height: 560px; }
  .ai-studio::before { inset-block-start: -240px; inset-inline-end: -260px; }
  .ai-studio::after  { inset-block-end: -260px; inset-inline-start: -280px; }
}

.ai-studio .eyebrow { color: var(--hf-lime); }
.ai-studio .section-hl { color: var(--hf-text); }
.ai-lead { color: var(--hf-muted); max-width: 680px; margin-bottom: var(--space-lg); }

/* نوار کنترل: نرخ، ارز، دورهٔ پرداخت */
.ai-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}
.ai-switches { display: flex; flex-wrap: wrap; gap: 10px; }
.ai-fx { display: flex; align-items: flex-start; gap: 8px; color: var(--hf-muted); font-size: var(--text-small); }
/* نقطه کنار سطر اول می‌نشیند، نه وسط متن چندخطی */
.fx-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--hf-dim); flex-shrink: 0; margin-top: .6em; margin-top: calc(.5lh - 4px); }
.fx-dot.live { background: var(--hf-lime); animation: fx-pulse 2s infinite; }
@keyframes fx-pulse {
  0% { box-shadow: 0 0 0 0 rgba(209,254,23,.6); }
  70% { box-shadow: 0 0 0 8px rgba(209,254,23,0); }
  100% { box-shadow: 0 0 0 0 rgba(209,254,23,0); }
}

.seg {
  display: inline-flex;
  padding: 4px;
  gap: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--hf-line);
}
.seg button {
  border: 0;
  background: transparent;
  color: var(--hf-muted);
  font: inherit;
  font-size: var(--text-small);
  font-weight: var(--weight-label);
  padding: 8px 16px;
  min-height: 44px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  transition: background .2s, color .2s;
}
.seg button[aria-pressed="true"] { background: var(--hf-text); color: #000; }
.seg button:focus-visible { outline: 2px solid var(--hf-lime); outline-offset: 2px; }
.seg .save { background: var(--hf-lime); color: #000; font-size: .7rem; font-weight: bold; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }

/* کارت‌ها: سه پلن در یک ردیف، MAX تمام‌عرض زیرشان */
.ai-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-sm); align-items: stretch; }
.ai-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 26px 22px;
  border-radius: 22px;
  background: var(--hf-card);
  border: 1px solid var(--hf-line);
  transition: transform .25s ease-out, border-color .25s;
}
@media (hover: hover) {
  .ai-card:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.2); }
}
.ai-card.popular {
  border: 1px solid transparent;
  background:
    linear-gradient(#0d0b10, #0d0b10) padding-box,
    linear-gradient(160deg, var(--hf-pink), var(--hf-violet) 55%, rgba(255,255,255,.08)) border-box;
  box-shadow: 0 0 70px -14px rgba(255,94,196,.45);
}
.ai-card.max {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--space-lg);
  border: 1px solid transparent;
  background:
    linear-gradient(#0b0d07, #0b0d07) padding-box,
    linear-gradient(120deg, var(--hf-lime), rgba(209,254,23,.15) 55%, rgba(255,255,255,.06)) border-box;
  box-shadow: 0 0 70px -16px rgba(209,254,23,.32);
}
.ai-card.max > div { display: flex; flex-direction: column; }
.ai-tag {
  align-self: flex-start;
  font-size: .72rem;
  font-weight: bold;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 12px;
  background: rgba(255,255,255,.08);
  color: var(--hf-text);
}
.ai-card.popular .ai-tag { background: var(--hf-pink); color: #000; }
.ai-card.max .ai-tag { background: var(--hf-lime); color: #000; }
.ai-card h3 { font-size: var(--text-h3); font-weight: bold; display: flex; align-items: baseline; gap: 8px; }
.ai-card h3 small { font-size: .72rem; color: var(--hf-dim); font-weight: normal; letter-spacing: .1em; }
.ai-for { color: var(--hf-muted); font-size: var(--text-small); margin: 4px 0 16px; min-height: 2.6em; }

.ai-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; }
.ai-price [data-num] { font-size: 2.2rem; font-weight: var(--weight-display); line-height: 1.1; }
.ai-price [data-cur] { color: var(--hf-muted); font-size: var(--text-small); }
.ai-price [data-was] { color: var(--hf-dim); text-decoration: line-through; font-size: .95rem; }
.ai-toman { color: var(--hf-text); opacity: .82; font-size: var(--text-small); margin-top: 4px; min-height: 1.5em; }
/* بلوک قیمت: عدد و معادل تومانی پررنگ؛ صورت‌حساب کم‌رنگ؛ «ارزش» در یک
   برچسب کوچک — تا پنج سطر ریز پشت هم یک دیوار متن نسازند. */
.ai-bill { color: var(--hf-dim); font-size: .76rem; margin: 2px 0 10px; min-height: 1.4em; }
.ai-anchor {
  align-self: flex-start;
  font-size: .74rem;
  line-height: 1.7;
  color: var(--hf-muted);
  padding: 3px 10px;
  border-radius: 10px;
  background: rgba(209,254,23,.06);
  border: 1px solid rgba(209,254,23,.16);
  margin-bottom: 18px;
}
.ai-anchor s { color: var(--hf-dim); }
.ai-anchor b { color: var(--hf-lime); font-weight: bold; }

.ai-card ul {
  list-style: none; display: grid; gap: 9px; margin-bottom: 18px; flex-grow: 1;
  align-content: start;
  padding-block-start: 16px;
  border-block-start: 1px solid var(--hf-line);
}
.ai-card li { position: relative; padding-inline-start: 22px; color: #d7d7d3; font-size: .9rem; }
.ai-card li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .45em;
  width: 11px; height: 6px;
  /* جهت فیزیکی: تیک شکل است، نه متن — در RTL نباید برگردد */
  border-left: 2px solid var(--hf-lime);
  border-bottom: 2px solid var(--hf-lime);
  transform: rotate(-45deg);
}
.ai-card li.off { color: var(--hf-dim); }
.ai-card li.off::before { border: 0; height: 2px; background: #4a4b48; transform: none; inset-block-start: .75em; }
.ai-card li b { color: var(--hf-text); }

.hf-btn {
  width: 100%;
  border: 0;
  border-radius: 14px;
  padding: 14px 16px;
  font: inherit;
  font-weight: bold;
  cursor: pointer;
  white-space: nowrap;
  transition: box-shadow .2s, background .2s, opacity .2s;
}
.hf-btn:focus-visible { outline: 2px solid var(--hf-text); outline-offset: 3px; }
.hf-btn.lime { background: var(--hf-lime); color: #000; }
.hf-btn.lime:hover { box-shadow: 0 0 28px rgba(209,254,23,.45); }
.hf-btn.pink { background: var(--hf-pink); color: #000; }
.hf-btn.pink:hover { box-shadow: 0 0 28px rgba(255,94,196,.5); }
.hf-btn.ghost { background: rgba(255,255,255,.08); color: var(--hf-text); }
.hf-btn.ghost:hover { background: rgba(255,255,255,.15); }
/* لیموییِ پُر فقط برای MAX و پیش‌فاکتور؛ پلن امضا حاشیهٔ لیمویی دارد */
.hf-btn.outline { background: transparent; color: var(--hf-lime); box-shadow: inset 0 0 0 1.5px var(--hf-lime); }
.hf-btn.outline:hover { background: rgba(209,254,23,.1); }
.hf-btn:disabled { opacity: .35; cursor: not-allowed; box-shadow: none; }

/* لغزندهٔ MAX */
.max-vol { display: flex; align-items: baseline; gap: 8px; }
.max-vol [data-vol] { font-size: 2.4rem; font-weight: var(--weight-display); color: var(--hf-lime); line-height: 1.1; }
.max-vol span:last-child { color: var(--hf-muted); font-size: var(--text-small); }
.max-mix { color: #d7d7d3; font-size: .85rem; min-height: 1.6em; margin: 4px 0 6px; }
.hf-range {
  --fill: 0%;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  /* ناحیهٔ لمس ۴۰ پیکسل؛ مسیر دیداری همان ۸ پیکسل (content-box) */
  height: 40px;
  padding-block: 16px;
  box-sizing: border-box;
  background-clip: content-box;
  border-radius: 999px;
  margin: 0;
  /* در RTL مسیر از راست پر می‌شود */
  background-image: linear-gradient(to left, var(--hf-lime) var(--fill), rgba(255,255,255,.12) var(--fill));
  background-color: transparent;
  cursor: pointer;
}
.hf-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: #fff;
  border: 5px solid var(--hf-lime);
  box-shadow: 0 0 18px rgba(209,254,23,.65);
}
.hf-range::-moz-range-thumb {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 5px solid var(--hf-lime);
  box-shadow: 0 0 18px rgba(209,254,23,.65);
}
.hf-range:focus-visible { outline: 2px solid var(--hf-lime); outline-offset: -4px; }
.range-ends { display: flex; justify-content: space-between; color: var(--hf-dim); font-size: .72rem; margin-bottom: 14px; }
.max-unit { color: var(--hf-muted); font-size: .78rem; margin-bottom: 14px; }
.max-more { color: var(--hf-muted); font-size: .8rem; margin-top: 10px; }
.max-more .link-btn {
  /* ناحیهٔ لمس ۴۴ پیکسلی بی‌آنکه سطر جابه‌جا شود */
  display: inline-block;
  min-height: 44px;
  padding: 10px 6px; margin: -10px -6px;
  border: 0; background: none;
  font: inherit; color: var(--hf-lime); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.max-more .link-btn:focus-visible { outline: 2px solid var(--hf-lime); outline-offset: 3px; }

/* واحد محتوا */
.ai-units {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: center;
  margin-top: var(--space-md);
  padding: 14px 18px;
  border-radius: 16px;
  border: 1px dashed var(--hf-line);
  color: var(--hf-muted);
  font-size: .82rem;
}
.ai-units b { color: var(--hf-text); }
.ai-units span b { color: var(--hf-lime); }

/* ══ نوار پیشنهاد (بالای بخش) ══════════════════════════════════════════
   حاشیهٔ گرادیان صورتی ← لیمویی با border-box؛ بی blur. درخشش برچسب فقط
   دو بار هنگام ورود اجرا می‌شود و در حالت کاهش حرکت خاموش است. */
.promo-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-bottom: var(--space-lg);
  padding: 14px 18px;
  border-radius: 18px;
  border: 1px solid transparent;
  background:
    linear-gradient(#0d0a0f, #0d0a0f) padding-box,
    linear-gradient(100deg, var(--hf-pink), rgba(255,94,196,.25) 45%, rgba(209,254,23,.55)) border-box;
}
.promo-strip p { flex: 1 1 260px; color: var(--hf-text); font-size: var(--text-small); line-height: 1.8; }
.promo-tag {
  position: relative;
  isolation: isolate;
  flex-shrink: 0;
  padding: 4px 14px;
  font-size: .76rem;
  font-weight: bold;
  color: #000;
  white-space: nowrap;
}
/* شکل کج فقط برای پس‌زمینه؛ متن فارسی صاف می‌ماند */
.promo-tag::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 6px;
  transform: skewX(-12deg);
  background: linear-gradient(100deg, var(--hf-pink) 0 40%, #ffb3e4 50%, var(--hf-pink) 60% 100%);
  background-size: 250% 100%;
  background-position: 100% 0;
}
.promo-strip.vis .promo-tag::before { animation: promo-shine 1.6s ease-out .4s 2; }
@keyframes promo-shine { to { background-position: -50% 0; } }
.promo-time {
  font-size: .76rem; font-weight: bold; color: var(--hf-lime);
  padding: 3px 10px; border-radius: 999px; border: 1px solid rgba(209,254,23,.35);
}
.promo-go {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 4px;
  color: var(--hf-lime); font-size: var(--text-small); font-weight: bold;
  text-decoration: underline; text-underline-offset: 4px;
}
.promo-go:focus-visible { outline: 2px solid var(--hf-lime); outline-offset: 2px; }

/* هدیهٔ قرارداد سالانه روی کارت پلن */
.ai-card li.gift { color: var(--hf-text); }
.ai-card li.gift::before {
  border: 0; transform: none;
  width: 12px; height: 12px; inset-block-start: .4em;
  border-radius: 3px;
  background: var(--hf-pink);
  box-shadow: inset 0 0 0 3px #0d0b10;
}
.ai-card li.gift b { color: var(--hf-pink); }

/* ══ سازندهٔ سفارش سفارشی ═══════════════════════════════════════════ */
.ob {
  position: relative;
  margin-top: var(--space-lg);
  padding: 26px;
  border-radius: 22px;
  background: var(--hf-card);
  border: 1px solid var(--hf-line);
  scroll-margin-top: 90px;
}
/* display:grid/flex روی گام‌ها نباید ویژگی hidden را بی‌اثر کند */
.ob [hidden], .promo-strip [hidden] { display: none !important; }
.ob-head h3 { font-size: var(--text-h3); font-weight: bold; margin-bottom: 4px; }
.ob-head p { color: var(--hf-muted); font-size: var(--text-small); margin-bottom: 18px; max-width: 70ch; }

/* نمونه‌های آماده */
.ob-presets {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 22px;
}
.ob-presets button {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--hf-line);
  background: rgba(255,255,255,.03);
  color: var(--hf-text);
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.ob-presets b { font-size: .88rem; }
.ob-presets small { color: var(--hf-muted); font-size: .72rem; line-height: 1.6; }
.ob-presets button[aria-checked="true"] {
  border-color: var(--hf-lime);
  background: rgba(209,254,23,.07);
  box-shadow: inset 0 0 0 1px var(--hf-lime);
}
.ob-presets button[aria-checked="true"] b::after { content: " ✓"; color: var(--hf-lime); }
.ob-presets button:focus-visible { outline: 2px solid var(--hf-lime); outline-offset: 2px; }
@media (hover: hover) { .ob-presets button:hover { border-color: rgba(255,255,255,.25); } }

.ob-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--space-md); align-items: start; }

/* فرم */
.ob-form { display: grid; gap: 4px; transition: opacity .2s; }
.ob-form.is-idle { opacity: .55; }
.ob-step {
  border: 0;
  border-block-start: 1px solid var(--hf-line);
  padding: 14px 0 12px;
  margin: 0;
  min-width: 0;
  display: grid;
  gap: 10px;
  animation: ob-in .18s ease-out;
}
.ob-step legend {
  float: left;   /* با float، legend «legend رندرشده» روی حاشیه نیست و یک ردیف عادی شبکه می‌شود؛ عرض کامل، پس جهت مهم نیست */
  width: 100%;
  padding: 0;
  font-size: var(--text-small);
  font-weight: bold;
  color: var(--hf-text);
}
@keyframes ob-in { from { opacity: 0; transform: translateY(6px); } }
.ob-help { color: var(--hf-muted); font-size: .76rem; line-height: 1.7; }
/* گفتار: سه گزینهٔ هم‌عرض؛ در موبایل متن دوخطی می‌شود، نه دکمه‌ها */
.ob-seg-wrap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: 16px; }
.ob-seg-wrap button { justify-content: center; text-align: center; white-space: normal; line-height: 1.5; border-radius: 12px; padding-inline: 10px; }
.ob-form .seg { justify-self: start; max-width: 100%; }
.ob-form .seg button[disabled] { opacity: .35; cursor: not-allowed; }

.ob-dur { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.ob-dur output { font-size: 1.6rem; font-weight: var(--weight-display); color: var(--hf-lime); line-height: 1.2; }
.ob-dur span { color: var(--hf-muted); font-size: var(--text-small); }
.ob-snaps { display: flex; flex-wrap: wrap; gap: 6px; }
.ob-snaps button {
  min-height: 36px; padding: 4px 12px;
  border-radius: 999px; border: 1px solid var(--hf-line);
  background: transparent; color: var(--hf-muted);
  font: inherit; font-size: .76rem; cursor: pointer;
}
.ob-snaps button[aria-pressed="true"] { color: #000; background: var(--hf-lime); border-color: var(--hf-lime); }
.ob-snaps button:focus-visible { outline: 2px solid var(--hf-lime); outline-offset: 2px; }
.ob-count { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }

.ob-select, .ob-text {
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid var(--hf-line);
  background: rgba(255,255,255,.04);
  color: var(--hf-text);
  font: inherit;
  font-size: var(--text-small);
  max-width: 320px;
  width: 100%;
}
.ob-select option { background: #111; color: var(--hf-text); }
.ob-select:focus-visible, .ob-text:focus-visible { outline: 2px solid var(--hf-lime); outline-offset: 1px; }

/* گزینه‌های بیشتر */
.ob-more { border-block-start: 1px solid var(--hf-line); }
.ob-more > summary {
  display: flex; align-items: center; gap: 8px;
  min-height: 48px;
  cursor: pointer;
  list-style: none;
  font-size: var(--text-small);
  font-weight: bold;
  color: var(--hf-text);
}
.ob-more > summary::-webkit-details-marker { display: none; }
.ob-more > summary::before {
  content: "";
  width: 8px; height: 8px;
  border-right: 2px solid var(--hf-lime);
  border-bottom: 2px solid var(--hf-lime);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .2s;
}
.ob-more[open] > summary::before { transform: rotate(-135deg); }
.ob-more > summary:focus-visible { outline: 2px solid var(--hf-lime); outline-offset: 2px; border-radius: 8px; }
.ob-morecount { color: var(--hf-lime); font-weight: normal; font-size: .76rem; }
.ob-more-body { display: grid; gap: 4px; padding-block-end: 8px; }
.ob-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ob-chip { position: relative; cursor: pointer; }
.ob-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ob-chip span {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px;
  border-radius: 999px; border: 1px solid var(--hf-line);
  color: var(--hf-muted); font-size: .8rem;
}
.ob-chip input:checked + span { color: #000; background: var(--hf-lime); border-color: var(--hf-lime); }
.ob-chip input:focus-visible + span { outline: 2px solid var(--hf-lime); outline-offset: 2px; }
.ob-opts { display: grid; gap: 2px; padding-block: 6px; }
.ob-opt {
  display: flex; align-items: flex-start; gap: 10px;
  min-height: 44px; padding: 8px 0;
  cursor: pointer;
}
.ob-opt input[type=checkbox] { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--hf-lime); flex-shrink: 0; }
.ob-opt > span { display: grid; gap: 1px; }
.ob-opt b { font-size: .86rem; color: var(--hf-text); font-weight: 600; }
.ob-opt small { color: var(--hf-muted); font-size: .74rem; line-height: 1.6; }
.ob-opt-step { justify-content: space-between; align-items: center; cursor: default; }
.ob-note-field { display: grid; gap: 6px; padding-block: 8px; font-size: .8rem; color: var(--hf-muted); }
.ob-note-field .ob-text { max-width: none; }
.ob-add { margin-top: 12px; white-space: normal; }
.ob-limit { margin-top: 10px; color: var(--hf-muted); font-size: .78rem; }
.ob-limit .link-btn {
  display: inline-block; min-height: 44px; padding: 10px 6px; margin: -10px -6px;
  border: 0; background: none; font: inherit; color: var(--hf-lime); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.ob-limit .link-btn:focus-visible { outline: 2px solid var(--hf-lime); outline-offset: -4px; }
/* «۴ و بیشتر» کاراکتر: پیام گفت‌وگو در همان گام */
.ob-more-chars { margin-top: 8px; padding: 8px 12px; border-radius: 12px; border: 1px dashed var(--hf-line); color: var(--hf-text); font-size: .8rem; }
.ob-more-chars .link-btn {
  display: inline-block; min-height: 44px; padding: 10px 6px; margin: -10px -6px;
  border: 0; background: none; font: inherit; color: var(--hf-lime); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.ob-more-chars .link-btn:focus-visible { outline: 2px solid var(--hf-lime); outline-offset: -4px; }

/* خلاصه */
.ob-sum {
  display: flex; flex-direction: column; gap: 10px;
  padding: 20px;
  border-radius: 18px;
  background: rgba(0,0,0,.45);
  border: 1px solid var(--hf-line);
  position: sticky;
  top: 90px;
  scroll-margin-top: 90px;
}
.ob-sum h4 { font-size: 1rem; font-weight: bold; }
.ob-lines { list-style: none; display: grid; gap: 8px; margin: 0; padding: 0; }
.ob-line {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--hf-line);
}
.ob-line.is-draft { border-style: dashed; border-color: rgba(209,254,23,.35); }
.ob-line b { display: block; font-size: .86rem; }
.ob-line small { display: block; color: var(--hf-muted); font-size: .74rem; line-height: 1.7; }
.ob-drafttag { display: inline-block; font-size: .66rem; color: var(--hf-lime); margin-bottom: 2px; }
.ob-lineprice { font-size: .86rem; font-weight: bold; white-space: nowrap; }
.ob-acts { grid-column: 1 / -1; display: flex; gap: 14px; }
.ob-acts button {
  min-height: 32px; padding: 0;
  border: 0; background: none; cursor: pointer;
  color: var(--hf-muted); font: inherit; font-size: .74rem;
  text-decoration: underline; text-underline-offset: 3px;
}
.ob-acts button:hover { color: var(--hf-text); }
.ob-acts button:focus-visible { outline: 2px solid var(--hf-lime); outline-offset: 2px; }
.ob-empty { color: var(--hf-muted); font-size: .8rem; padding: 6px 0; }
.ob-rows { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin: 0; font-size: var(--text-small); }
.ob-rows:empty { display: none; }
.ob-rows dt { color: var(--hf-muted); }
.ob-rows dd { margin: 0; text-align: end; white-space: nowrap; color: var(--hf-text); }
.ob-rows .is-promo { color: var(--hf-pink); }
.ob-total {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 10px;
  border-block-start: 1px solid var(--hf-line); padding-block-start: 12px;
  color: var(--hf-muted); font-size: var(--text-small);
}
.ob-total > span:first-child { white-space: nowrap; }
.ob-total > span:last-child { margin-inline-start: auto; white-space: nowrap; }
.ob-total b { color: var(--hf-text); font-size: 1.7rem; font-weight: var(--weight-display); }
.ob-total s { color: var(--hf-pink); opacity: .85; font-size: .9rem; }
.ob-toman { text-align: end; color: var(--hf-text); opacity: .82; font-size: var(--text-small); min-height: 1.4em; }
.ob-saved { color: var(--hf-lime); font-size: .82rem; font-weight: bold; }
.ob-gift {
  padding: 8px 12px; border-radius: 12px;
  border: 1px dashed rgba(209,254,23,.4);
  color: var(--hf-lime); font-size: .78rem;
}
.ob-msg { font-size: .8rem; color: var(--hf-muted); }
.ob-msg:empty { display: none; }
.ob-msg.warn { color: var(--hf-pink); }
.ob-msg.good { color: var(--hf-lime); }
.ob-check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: .82rem; color: var(--hf-text); cursor: pointer; }
.ob-check input { width: 20px; height: 20px; accent-color: var(--hf-lime); }
.ob-nudge { font-size: .8rem; color: var(--hf-muted); line-height: 1.8; }
.ob-nudge.good { color: var(--hf-lime); }
.ob-nudge a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.ob-ref { color: var(--hf-dim); font-size: .72rem; line-height: 1.7; }

/* نوار ثابت پایین در موبایل و تبلت */
.ob-bar { display: none; }

/* پیام مودال تماس: مشخصات چندخطی سفارش */
#contactModal .modal-plan { white-space: pre-line; border-radius: 14px; line-height: 1.9; max-height: 32vh; overflow: auto; }

.calc-pay {
  color: var(--hf-text);
  font-size: .8rem;
  line-height: 1.7;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--hf-line);
}
.calc-final { color: var(--hf-dim); font-size: .74rem; text-align: center; }

.stepper { display: inline-flex; align-items: center; border: 1px solid var(--hf-line); border-radius: 12px; overflow: hidden; }
.stepper button {
  width: 44px; height: 44px;
  border: 0;
  background: rgba(255,255,255,.06);
  color: var(--hf-text);
  font-size: 1.15rem;
  cursor: pointer;
}
.stepper button:hover { background: rgba(255,255,255,.15); }
.stepper button:focus-visible { outline: 2px solid var(--hf-lime); outline-offset: -2px; }
.stepper input {
  width: 52px; height: 44px;
  border: 0;
  background: transparent;
  color: var(--hf-text);
  text-align: center;
  font: inherit;
  font-weight: bold;
}

.ai-why { margin-top: var(--space-md); color: var(--hf-muted); font-size: .8rem; max-width: 820px; display: grid; gap: 6px; }
.ai-why b { color: var(--hf-text); }
.ai-terms summary { cursor: pointer; color: var(--hf-text); font-weight: bold; padding-block: 4px; }
.ai-terms summary:focus-visible { outline: 2px solid var(--hf-lime); outline-offset: 2px; }
.ai-terms ul { margin: 6px 0 0; padding-inline-start: 18px; display: grid; gap: 6px; line-height: 1.8; }

@media (max-width: 1024px) {
  .ai-plans { grid-template-columns: 1fr 1fr; }
}
/* تبلت: کارت آخرِ پیش از MAX اگر در ردیف تنها بماند، تمام‌عرض و دوستونه
   می‌شود (اطلاعات قیمت یک سو، فهرست و دکمه سوی دیگر) — هم‌خانوادهٔ MAX */
@media (min-width: 641px) and (max-width: 1024px) {
  .ai-plans > .ai-card:not(.max):nth-last-child(2):nth-child(odd) {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    column-gap: var(--space-lg);
    align-content: start;
  }
  .ai-plans > .ai-card:not(.max):nth-last-child(2):nth-child(odd) > * { grid-column: 1; }
  .ai-plans > .ai-card:not(.max):nth-last-child(2):nth-child(odd) > .ai-tag { justify-self: start; }
  .ai-plans > .ai-card:not(.max):nth-last-child(2):nth-child(odd) > .ai-anchor { justify-self: start; }
  .ai-plans > .ai-card:not(.max):nth-last-child(2):nth-child(odd) > ul { grid-column: 2; grid-row: 1 / span 6; }
  .ai-plans > .ai-card:not(.max):nth-last-child(2):nth-child(odd) > .hf-btn { grid-column: 2; grid-row: 7; align-self: end; }
}
@media (max-width: 1024px) {
  .ai-card.max { grid-template-columns: 1fr; gap: 0; }
  .ob-presets { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ob-grid { grid-template-columns: 1fr; }
  .ob-sum { position: static; }
  /* نوار ثابت پایین: مبلغ و راه رسیدن به خلاصه، تا وقتی خلاصه دیده نشده */
  .ob-bar {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 16px -26px -26px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    border-radius: 0 0 22px 22px;
    background: rgba(5,5,6,.94);
    border-block-start: 1px solid var(--hf-line);
    transition: opacity .2s, visibility .2s;
  }
  .ob-bar.is-off { opacity: 0; visibility: hidden; }
  .ob-bar span { display: grid; line-height: 1.4; }
  .ob-bar small { color: var(--hf-muted); font-size: .72rem; }
  .ob-bar b { font-size: 1.15rem; }
  .ob-bar .hf-btn { width: auto; display: inline-flex; align-items: center; min-height: 44px; padding: 10px 18px; text-decoration: none; }
}
@media (max-width: 640px) {
  .ai-plans { grid-template-columns: 1fr; }
  .ai-controls { flex-direction: column; align-items: stretch; }
  .ai-switches { flex-direction: column; }
  .seg { justify-content: center; }
  .seg button { flex: 1; justify-content: center; }
  .ob { padding: 18px; }
  .ob-bar { margin: 16px -18px -18px; }
  /* نمونه‌ها: نوار افقی پیمایش‌پذیر، تمام‌عرض */
  .ob-presets {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    margin-inline: -18px;
    padding-inline: 18px;
    scroll-padding-inline: 18px;
  }
  .ob-presets::-webkit-scrollbar { display: none; }
  .ob-presets button { flex: 0 0 auto; width: 46%; scroll-snap-align: start; }
  .ob-form .seg { justify-self: stretch; }
  .promo-strip { padding: 12px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .fx-dot.live { animation: none; }
  .ai-card, .ai-card:hover { transition: none; transform: none; }
  .promo-strip.vis .promo-tag::before { animation: none; }
  .ob-step { animation: none; }
  .ob-form, .ob-bar, .ob-presets button, .ob-more > summary::before { transition: none; }
}