/* =========================================================================
   زنجیره عادت — لندینگ پیج
   =========================================================================
   قاعده‌ی این فایل، همان قاعده‌ی دیزاین‌سیستم اپ است:
   هیچ رنگی خارج از بلوک توکن‌ها نوشته نمی‌شود. رنگی که در محل استفاده
   نوشته شود، تصمیمی درباره‌ی پالت است که جایی گرفته شده که پالت را نمی‌بیند.
   مقادیر از core_colors.dart و app_dimens.dart نقل شده‌اند.
   ========================================================================= */

/* ── ۱. توکن‌ها — پالت روشن (پیش‌فرض) ──────────────────────────────────── */
:root {
  /* سطوح — کاغذ گرم، نه سفید. همین رنگ است که لحن کل محصول را می‌سازد. */
  --bg: #F6F4EF;
  --surface: #FFFFFF;
  --surface-var: #FCFBF7;
  --surface-sunken: #EDEBE4;

  /* برند */
  --primary: #2E6A4C;
  --primary-dark: #1F4C37;
  --primary-pale: #DCEBE0;
  --achievement: #A8823A;
  --slate: #3B4256;
  --skipped: #C4643A;

  /* متن */
  --text: #1A1D18;
  --text-2: #5C6157;
  --text-muted: #8A8F84;
  --text-faint: #A9ADA3;
  --on-primary: #FFFFFF;

  /* تینت‌ها */
  --tint-primary: #E4EDE6;
  --tint-achievement: #F2EADA;
  --tint-skipped: #FBEAE1;
  --tint-slate: #E8EAF0;
  --tint-neutral: #F1EFE8;
  --tint-ranked: #EDE7F3;

  --on-tint-primary: #1F4C37;
  --on-tint-achievement: #8F6E2C;
  --on-tint-skipped: #B4552C;
  --on-tint-slate: #3B4256;
  --on-tint-neutral: #6B7065;
  --on-tint-ranked: #5B4A7A;

  /* ساختار */
  --border: rgba(26, 29, 24, .08);
  --border-strong: #E2DFD6;
  --divider: rgba(26, 29, 24, .06);
  --shadow: rgba(26, 29, 24, .07);
  --shadow-lift: rgba(26, 29, 24, .1);

  /* سمانتیک تقویم — «انجام نشد» هرگز رنگ «انجام دادم» را نمی‌گیرد،
     و «ثبت نشده» با هر سه‌ی پر شدن، بوردر و متن از «انجام نشد» جداست. */
  --cal-done-fill: #2E6A4C;
  --cal-done-text: #FFFFFF;
  --cal-skip-fill: #FBEAE1;
  --cal-skip-border: #E6B69C;
  --cal-skip-text: #B4552C;
  --cal-missed-border: #D8D5CC;
  --cal-missed-text: #B4B0A6;
  --cal-future-fill: #EFEDE6;
  --cal-future-text: #C6C3BA;

  /* روی سطح تیره (هدر گرادیانی، بلوک CTA) */
  --on-dark: #FFFFFF;
  --on-dark-2: rgba(255, 255, 255, .78);
  --on-dark-muted: rgba(255, 255, 255, .55);
  --on-dark-surface: rgba(255, 255, 255, .13);
  --on-dark-surface-strong: rgba(255, 255, 255, .2);
  --on-dark-border: rgba(255, 255, 255, .18);

  /* «انجام نشد» روی سطح تیره (حلقه‌های کارت زنجیره در ماکاپ) — همان
     skippedOnDark / skippedOnDarkFill اپ. */
  --skipped-on-dark: rgba(240, 181, 138, .8);
  --skipped-on-dark-fill: rgba(240, 181, 138, .25);

  /* بوردرهای رنگی */
  --border-primary: rgba(46, 106, 76, .22);
  --border-achievement: rgba(168, 130, 58, .26);
  --border-skipped: rgba(196, 100, 58, .22);
  --border-slate: rgba(59, 66, 86, .18);
  --border-ranked: rgba(91, 74, 122, .22);

  /* گرادیان‌ها — از بالا-راست به پایین-چپ، مثل اپ */
  --grad-hero: linear-gradient(to bottom left, #2E6A4C, #1F4C37);
  --grad-slate: linear-gradient(to bottom left, #3B4256, #2A3040);
  --grad-achievement: linear-gradient(to bottom left, #F7F0DF, #EDE0C2);

  /* نردبان رنگی نشان‌ها — از badge_tiers.dart اپ، عیناً.
     پنج رده، یک شکل: «کاغذ گرم → سبز آرام → سبز عمیق وارونه → قابِ طلا → طلای کامل».
     رنگ فقط نادر بودن را می‌گوید؛ رده‌ی ۴ و ۵ علاوه بر آن چهار تیکِ گوشه دارند.
     این‌ها نقش نیستند، نردبان‌اند — و به همین دلیل جدا از توکن‌های بالا نگه داشته
     شده‌اند تا کسی «سبز رده‌ی ۳» را برای تزئین برندارد. */
  --tier1-field: linear-gradient(to bottom left, #FFFDF7, #F2EFE6);
  --tier1-frame: rgba(26, 29, 24, .11);
  --tier1-ink: #2E6A4C;
  --tier2-field: linear-gradient(to bottom left, #F0F5F1, #E0EAE2);
  --tier2-frame: rgba(46, 106, 76, .26);
  --tier2-ink: #2E6A4C;
  --tier3-field: linear-gradient(to bottom left, #357254, #1F4C37);
  --tier3-frame: rgba(255, 255, 255, .22);
  --tier3-ink: #DCEBE0;
  --tier4-field: linear-gradient(to bottom left, #22523B, #143425);
  --tier4-frame: rgba(201, 164, 85, .48);
  --tier4-ink: #C9A455;
  --tier4-ticks: #C9A455;
  --tier5-field: linear-gradient(to bottom left, #CFAA58, #8F6E2C);
  --tier5-frame: rgba(255, 249, 234, .58);
  --tier5-ink: #FFF9EA;
  --tier5-ticks: #FFF3D6;

  /* شعاع */
  --r-xs: 4px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 26px;
  --r-xxl: 32px;
  --r-header: 34px;
  --r-pill: 999px;

  /* فاصله */
  --s-2: 2px;
  --s-4: 4px;
  --s-6: 6px;
  --s-8: 8px;
  --s-12: 12px;
  --s-16: 16px;
  --s-20: 20px;
  --s-26: 26px;
  --s-34: 34px;

  /* بوردر */
  --b-hairline: 1px;
  --b-thin: 1.5px;
  --b-focus: 2px;
  --b-accent: 3px;

  /* اندازه‌ها و چیدمان */
  --btn-h: 56px;
  --btn-h-sm: 52px;
  --nav-h: 68px;
  --maxw: 1120px;
  --gutter: var(--s-20);

  /* حرکت */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur-fast: 250ms;
  --dur: 400ms;
  --dur-slow: 600ms;
}

/* ── ۲. توکن‌ها — پالت تیره ────────────────────────────────────────────
   پس‌زمینه‌ی تیره گرم است، نه خاکستری خنثی. خنثی که شود، کل پالت سرد
   می‌شود و حس کاغذ از بین می‌رود. سبز و طلایی «بالا کشیده» شده‌اند، نه
   دوباره استفاده‌شده: #2E6A4C روی زمینه‌ی تیره کنتراست متن را رد می‌کند. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14150F;
    --surface: #1D1F18;
    --surface-var: #23261E;
    --surface-sunken: #2A2D24;

    --primary: #5E9B78;
    --primary-dark: #2E6A4C;
    --primary-pale: #DCEBE0;
    --achievement: #D3A855;
    --slate: #7A82A0;
    --skipped: #D98A5E;

    --text: #EDEBE2;
    --text-2: #B9BCB0;
    --text-muted: #8B8F84;
    --text-faint: #6B6F65;
    --on-primary: #10130D;

    --tint-primary: #1E3329;
    --tint-achievement: #332915;
    --tint-skipped: #3A241A;
    --tint-slate: #23273A;
    --tint-neutral: #262922;
    --tint-ranked: #2A2338;

    --on-tint-primary: #A9D6BB;
    --on-tint-achievement: #E3C079;
    --on-tint-skipped: #E8A67F;
    --on-tint-slate: #A8B0CC;
    --on-tint-neutral: #A8AC9F;
    --on-tint-ranked: #B9A6D6;

    --border: rgba(255, 255, 255, .12);
    --border-strong: #3A3D33;
    --divider: rgba(255, 255, 255, .08);
    --shadow: rgba(0, 0, 0, .4);
    --shadow-lift: rgba(0, 0, 0, .55);

    --cal-done-fill: #5E9B78;
    --cal-done-text: #10130D;
    --cal-skip-fill: #3A241A;
    --cal-skip-border: #7A4C33;
    --cal-skip-text: #E8A67F;
    --cal-missed-border: #3D4037;
    --cal-missed-text: #60645A;
    --cal-future-fill: #1F221B;
    --cal-future-text: #4A4E44;

    --skipped-on-dark: rgba(240, 181, 138, .8);
    --skipped-on-dark-fill: rgba(240, 181, 138, .25);

    --border-primary: rgba(94, 155, 120, .36);
    --border-achievement: rgba(211, 168, 85, .36);
    --border-skipped: rgba(217, 138, 94, .36);
    --border-slate: rgba(122, 130, 160, .36);
    --border-ranked: rgba(185, 166, 214, .36);

    --grad-hero: linear-gradient(to bottom left, #27563E, #17372A);
    --grad-slate: linear-gradient(to bottom left, #2C3145, #1C2030);
    --grad-achievement: linear-gradient(to bottom left, #3A3122, #2A2418);

    --tier1-field: linear-gradient(to bottom left, #242A22, #1B201A);
    --tier1-frame: rgba(255, 255, 255, .11);
    --tier1-ink: #7FB394;
    --tier2-field: linear-gradient(to bottom left, #23342A, #1A2A21);
    --tier2-frame: rgba(143, 191, 163, .3);
    --tier2-ink: #8FBFA3;
    --tier3-field: linear-gradient(to bottom left, #2E6A4C, #1B4331);
    --tier3-frame: rgba(255, 255, 255, .24);
    --tier3-ink: #DCEBE0;
    --tier4-field: linear-gradient(to bottom left, #22523B, #143425);
    --tier4-frame: rgba(201, 164, 85, .52);
    --tier4-ink: #D6B366;
    --tier4-ticks: #D6B366;
    --tier5-field: linear-gradient(to bottom left, #CFAA58, #8F6E2C);
    --tier5-frame: rgba(255, 249, 234, .58);
    --tier5-ink: #FFF9EA;
    --tier5-ticks: #FFF3D6;
  }
}

/* همان بلوک، این بار برای انتخاب صریح کاربر — تا تاگل در هر دو جهت برنده باشد. */
:root[data-theme="dark"] {
  --bg: #14150F;
  --surface: #1D1F18;
  --surface-var: #23261E;
  --surface-sunken: #2A2D24;

  --primary: #5E9B78;
  --primary-dark: #2E6A4C;
  --primary-pale: #DCEBE0;
  --achievement: #D3A855;
  --slate: #7A82A0;
  --skipped: #D98A5E;

  --text: #EDEBE2;
  --text-2: #B9BCB0;
  --text-muted: #8B8F84;
  --text-faint: #6B6F65;
  --on-primary: #10130D;

  --tint-primary: #1E3329;
  --tint-achievement: #332915;
  --tint-skipped: #3A241A;
  --tint-slate: #23273A;
  --tint-neutral: #262922;
  --tint-ranked: #2A2338;

  --on-tint-primary: #A9D6BB;
  --on-tint-achievement: #E3C079;
  --on-tint-skipped: #E8A67F;
  --on-tint-slate: #A8B0CC;
  --on-tint-neutral: #A8AC9F;
  --on-tint-ranked: #B9A6D6;

  --border: rgba(255, 255, 255, .12);
  --border-strong: #3A3D33;
  --divider: rgba(255, 255, 255, .08);
  --shadow: rgba(0, 0, 0, .4);
  --shadow-lift: rgba(0, 0, 0, .55);

  --cal-done-fill: #5E9B78;
  --cal-done-text: #10130D;
  --cal-skip-fill: #3A241A;
  --cal-skip-border: #7A4C33;
  --cal-skip-text: #E8A67F;
  --cal-missed-border: #3D4037;
  --cal-missed-text: #60645A;
  --cal-future-fill: #1F221B;
  --cal-future-text: #4A4E44;

  --skipped-on-dark: rgba(240, 181, 138, .8);
  --skipped-on-dark-fill: rgba(240, 181, 138, .25);

  --border-primary: rgba(94, 155, 120, .36);
  --border-achievement: rgba(211, 168, 85, .36);
  --border-skipped: rgba(217, 138, 94, .36);
  --border-slate: rgba(122, 130, 160, .36);
  --border-ranked: rgba(185, 166, 214, .36);

  --grad-hero: linear-gradient(to bottom left, #27563E, #17372A);
  --grad-slate: linear-gradient(to bottom left, #2C3145, #1C2030);
  --grad-achievement: linear-gradient(to bottom left, #3A3122, #2A2418);

  --tier1-field: linear-gradient(to bottom left, #242A22, #1B201A);
  --tier1-frame: rgba(255, 255, 255, .11);
  --tier1-ink: #7FB394;
  --tier2-field: linear-gradient(to bottom left, #23342A, #1A2A21);
  --tier2-frame: rgba(143, 191, 163, .3);
  --tier2-ink: #8FBFA3;
  --tier3-field: linear-gradient(to bottom left, #2E6A4C, #1B4331);
  --tier3-frame: rgba(255, 255, 255, .24);
  --tier3-ink: #DCEBE0;
  --tier4-field: linear-gradient(to bottom left, #22523B, #143425);
  --tier4-frame: rgba(201, 164, 85, .52);
  --tier4-ink: #D6B366;
  --tier4-ticks: #D6B366;
  --tier5-field: linear-gradient(to bottom left, #CFAA58, #8F6E2C);
  --tier5-frame: rgba(255, 249, 234, .58);
  --tier5-ink: #FFF9EA;
  --tier5-ticks: #FFF3D6;
}

/* ── ۳. فونت ───────────────────────────────────────────────────────────
   لوکال و بدون هیچ درخواست شبکه‌ای. برای تولید woff2 (سبک‌تر) README را
   ببین — بعد از ساختن فایل‌ها، فقط خط woff2 را قبل از ttf اضافه کن. */
@font-face {
  font-family: 'Vazirmatn';
  src: url('fonts/vazirmatn/Vazirmatn-Regular.woff2') format('woff2'),
       url('fonts/vazirmatn/Vazirmatn-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('fonts/vazirmatn/Vazirmatn-Medium.woff2') format('woff2'),
       url('fonts/vazirmatn/Vazirmatn-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('fonts/vazirmatn/Vazirmatn-SemiBold.woff2') format('woff2'),
       url('fonts/vazirmatn/Vazirmatn-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('fonts/vazirmatn/Vazirmatn-Bold.woff2') format('woff2'),
       url('fonts/vazirmatn/Vazirmatn-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('fonts/vazirmatn/Vazirmatn-ExtraBold.woff2') format('woff2'),
       url('fonts/vazirmatn/Vazirmatn-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* ── ۴. پایه ───────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* روی موبایل، ۱۰۰vh با نوار مرورگر می‌جنگد؛ این از پرش لِی‌اوت جلوگیری می‌کند. */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Vazirmatn', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 15px;
  font-weight: 400;
  /* فارسی زیر ۱.۶ خوانده نمی‌شود. */
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* هیچ بریک‌پوینتی نباید اسکرول افقی بسازد. `clip` به‌جای `hidden` چون
     hidden بدنه را به یک کانتینر اسکرول تبدیل می‌کند و sticky بودن نوار
     بالا را در بعضی مرورگرها می‌شکند. hidden فقط fallback است. */
  overflow-x: hidden;
  overflow-x: clip;
}

img,
svg {
  max-width: 100%;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  line-height: 1.55;
  font-weight: 800;
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: var(--primary);
  text-decoration: none;
}

button {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  border: none;
  background: none;
  cursor: pointer;
}

/* هر عنصر تعاملی باید مسیر کیبورد قابل دیدن داشته باشد. */
:focus-visible {
  outline: var(--b-focus) solid var(--primary);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

/* اعداد فارسی در شمارنده‌ها نباید موقع تغییر بلرزند. */
.num {
  font-variant-numeric: tabular-nums;
}

.skip-link {
  position: absolute;
  inset-inline-start: var(--s-16);
  top: var(--s-8);
  z-index: 200;
  padding: var(--s-12) var(--s-20);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text);
  font-weight: 700;
  border: var(--b-hairline) solid var(--border-strong);
  transform: translateY(-160%);
  transition: transform var(--dur-fast) var(--ease);
}
.skip-link:focus-visible {
  transform: none;
}

/* ── ۵. کمکی‌های چیدمان ───────────────────────────────────────────────── */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: clamp(56px, 9vw, 104px);
  /* نوار بالا نباید تیتر سکشن را بپوشاند. */
  scroll-margin-top: calc(var(--nav-h) + var(--s-12));
}

.section--sunken {
  background: var(--surface-var);
  border-block: var(--b-hairline) solid var(--divider);
}

.section-head {
  max-width: 60ch;
  margin-bottom: clamp(var(--s-26), 4vw, 52px);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-8);
  padding: var(--s-6) var(--s-12);
  margin-bottom: var(--s-16);
  border-radius: var(--r-sm);
  background: var(--tint-primary);
  color: var(--on-tint-primary);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.6;
}

.section-title {
  font-size: clamp(24px, 3.4vw, 34px);
}

.section-sub {
  margin-top: var(--s-12);
  color: var(--text-2);
  font-size: clamp(14.5px, 1.5vw, 16px);
  line-height: 1.85;
}

/* ── ۶. دکمه‌ها ────────────────────────────────────────────────────────
   شعاع ۲۰ — همان شعاع اینپوت‌ها. در این محصول دکمه‌ی قرص‌شکل نداریم؛
   آن نرمیِ کنترل‌شده بخشی از آرامش فرم‌هاست. */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-8);
  min-height: var(--btn-h);
  padding-inline: var(--s-26);
  border-radius: var(--r-lg);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  overflow: hidden;
  transition: transform var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease),
    background-color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease);
}

.btn:active {
  transform: scale(.975);
}

.btn--primary {
  background: var(--primary);
  color: var(--on-primary);
  box-shadow: 0 6px 18px var(--shadow);
}
.btn--primary:hover {
  background: var(--primary-dark);
  box-shadow: 0 10px 26px var(--shadow-lift);
}

.btn--ghost {
  background: transparent;
  color: var(--text);
  border: var(--b-thin) solid var(--border-strong);
}
.btn--ghost:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.btn--on-dark {
  background: var(--on-dark);
  color: var(--primary-dark);
}
.btn--on-dark:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px var(--shadow-lift);
}

.btn--sm {
  min-height: 44px;
  padding-inline: var(--s-16);
  font-size: 14px;
  border-radius: var(--r-md);
}

/* ریپل — با transform/opacity، بدون تغییر ابعاد. */
.ripple {
  position: absolute;
  border-radius: var(--r-pill);
  background: var(--on-dark-surface-strong);
  pointer-events: none;
  transform: scale(0);
  opacity: .7;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
}
.btn--ghost .ripple,
.btn--on-dark .ripple {
  background: var(--tint-primary);
}

.hint {
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.9;
}

/* ── ۷. نوار پیشرفت اسکرول ────────────────────────────────────────────── */
.scroll-progress {
  position: fixed;
  inset-inline: 0;
  top: 0;
  height: 2px;
  z-index: 120;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: right center;
  will-change: transform;
}

/* ── ۸. نوار بالا ─────────────────────────────────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: transparent;
  border-bottom: var(--b-hairline) solid transparent;
  transition: background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    backdrop-filter var(--dur) var(--ease);
}

/* بعد از ~۶۰px اسکرول، نوار روی محتوا می‌نشیند و باید خودش را از آن جدا کند. */
.nav.is-stuck {
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--border);
}

.nav__inner {
  display: flex;
  align-items: center;
  gap: var(--s-16);
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-8);
  color: var(--text);
  font-weight: 800;
  font-size: 16px;
  flex: none;
}

/* لوگوی اصلی اپلیکیشن، با رنگ خودش. ابعاد ثابت است تا موقع لود شدن
   تصویر، نوار بالا نپرد (CLS). */
.brand__mark {
  width: 34px;
  height: 34px;
  flex: none;
  object-fit: contain;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-inline: auto;
}

.nav__link {
  position: relative;
  display: block;
  padding: var(--s-8) var(--s-12);
  border-radius: var(--r-sm);
  color: var(--text-2);
  font-size: 14px;
  font-weight: 600;
  transition: color var(--dur-fast) var(--ease);
}
.nav__link:hover {
  color: var(--text);
}

/* آندرلاین متحرک: انیمیشن روی transform یک span، نه روی width. */
.nav__link::after {
  content: "";
  position: absolute;
  inset-inline: var(--s-12);
  bottom: 2px;
  height: 2px;
  border-radius: var(--r-pill);
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--dur-fast) var(--ease);
}
.nav__link.is-active {
  color: var(--primary);
}
.nav__link.is-active::after {
  transform: scaleX(1);
}

.nav__side {
  display: flex;
  align-items: center;
  gap: var(--s-8);
  flex: none;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  border: var(--b-hairline) solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  transition: color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease);
}
.icon-btn:hover {
  color: var(--primary);
  border-color: var(--border-primary);
}
.icon-btn:active {
  transform: scale(.94);
}

.theme-toggle__moon {
  display: none;
}
:root[data-theme="dark"] .theme-toggle__sun {
  display: none;
}
:root[data-theme="dark"] .theme-toggle__moon {
  display: block;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle__sun {
    display: none;
  }
  :root:not([data-theme="light"]) .theme-toggle__moon {
    display: block;
  }
}

.nav__burger {
  display: none;
}

/* ── ۹. منوی موبایل ───────────────────────────────────────────────────── */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 110;
  visibility: hidden;
}
.drawer.is-open {
  visibility: visible;
}

.drawer__scrim {
  position: absolute;
  inset: 0;
  background: var(--shadow-lift);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.drawer.is-open .drawer__scrim {
  opacity: 1;
}

.drawer__panel {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: min(340px, 88vw);
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
  padding: var(--s-20) var(--s-20) var(--s-34);
  background: var(--bg);
  border-inline-start: var(--b-hairline) solid var(--border);
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform var(--dur) var(--ease);
}
/* در RTL، «بیرون از قاب» سمت راست است. */
[dir="rtl"] .drawer__panel {
  transform: translateX(100%);
}
.drawer.is-open .drawer__panel {
  transform: none;
}

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--s-12);
}

.drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  padding: var(--s-12) var(--s-16);
  border-radius: var(--r-md);
  color: var(--text);
  font-size: 16px;
  font-weight: 600;
  border: var(--b-hairline) solid transparent;
  /* استگر: هر آیتم با تأخیر خودش می‌آید (متغیر --i از HTML). */
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease),
    background-color var(--dur-fast) var(--ease);
}
.drawer.is-open .drawer__link {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--i, 0) * 45ms + 90ms);
}
.drawer__link:hover {
  background: var(--tint-neutral);
}
.drawer__link svg {
  color: var(--text-faint);
}

.drawer__cta {
  margin-top: var(--s-16);
  width: 100%;
}

/* ── ۱۰. Hero ─────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  padding-block: clamp(var(--s-26), 5vw, 64px) clamp(56px, 8vw, 96px);
  overflow: hidden;
}

/* لکه‌های تزئینی — پارالاکس بسیار ملایم، حداکثر ۱۲px. */
.hero__blob {
  position: absolute;
  border-radius: var(--r-pill);
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}
.hero__blob--a {
  inset-inline-end: -80px;
  top: -40px;
  width: 380px;
  height: 380px;
  background: var(--tint-primary);
  opacity: .8;
}
.hero__blob--b {
  inset-inline-start: -120px;
  bottom: -60px;
  width: 320px;
  height: 320px;
  /* عمداً tint خنثی: طلایی رنگ دستاورد است و لکه‌ی تزئینی دستاورد نیست. */
  background: var(--tint-neutral);
  opacity: .8;
}

.hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  /* minmax(0, …) و نه 1fr: ماکاپ ۳۲۰ پیکسل عرض دارد و با 1fr ستون را از ۳۲۰ کوچک‌تر
     نمی‌گذارد؛ روی گوشی ۳۲۰تایی متن و دکمه‌ها از لبه‌ی چپ بیرون می‌زدند. */
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(var(--s-34), 5vw, 64px);
  align-items: center;
}

.hero__title {
  font-size: clamp(30px, 5.4vw, 60px);
  line-height: 1.42;
  letter-spacing: -.4px;
}
.hero__title em {
  font-style: normal;
  color: var(--primary);
}

.hero__sub {
  margin-top: var(--s-20);
  max-width: 46ch;
  color: var(--text-2);
  font-size: clamp(15px, 1.8vw, 18px);
  line-height: 1.9;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-12);
  margin-top: var(--s-26);
}

/* ── دریافت: هر دستگاه دکمه‌ی خودش را می‌بیند ─────────────────────────
   data-platform را اسکریپت اینلاین index.html روی <html> می‌گذارد؛ عنصری با data-for فقط
   روی دستگاه‌هایی که نام برده دیده می‌شود. بدون JS، data-platform نیست و همه پیدا هستند. */
[data-platform="android"] [data-for]:not([data-for~="android"]),
[data-platform="ios"] [data-for]:not([data-for~="ios"]),
[data-platform="desktop"] [data-for]:not([data-for~="desktop"]) {
  display: none;
}

/* سه قدم نصب فایل اندروید: هشدار «منبع ناشناس» بی‌توضیح، خیلی‌ها را برمی‌گرداند. */
.install {
  margin-top: var(--s-12);
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.9;
}
ol.install {
  padding-inline-start: 1.3em;
  list-style-type: persian;
}
.install--on-dark {
  width: fit-content;
  margin-inline: auto;
  text-align: start;
  color: var(--on-dark-2);
}

.hero__note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-8);
  margin-top: var(--s-16);
}
.hero__note span {
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
}
.hero__note i {
  width: var(--r-xs);
  height: var(--r-xs);
  border-radius: var(--r-pill);
  background: var(--text-faint);
}

/* ── ۱۱. ماکاپ موبایل ─────────────────────────────────────────────────
   از روی صفحه‌ی خانه‌ی امروزِ اپ ساخته شده (home_screen.dart و ویجت‌هایش)،
   با مقیاس حدود ۰٫۸۵: هدر ساده با نهال و سلام، کارت گرادیانی «بلندترین
   زنجیره‌ی زنده‌ات» با ۱۴ حلقه، کارت حلقه‌ی «امروز»، کارت‌های عادت با کنترل
   مربعی و دکمه‌ی کوچک «انجام نشد»، و داکِ شناور پایین که محتوا از پشتش رد
   می‌شود. اگر صفحه‌ی خانه عوض شد، این بلوک هم باید عوض شود تا ماکاپ دروغ
   نگوید. */
.mock {
  position: relative;
  justify-self: center;
  width: 320px;
  max-width: 100%;
  border-radius: 46px;
  padding: var(--s-8);
  background: var(--surface-sunken);
  border: var(--b-hairline) solid var(--border);
  box-shadow: 0 34px 70px var(--shadow-lift);
}

/* ارتفاع ثابت است، نه به خاطر زیبایی: داک روی محتوا می‌نشیند و کارت آخر باید
   از زیرش رد شود — همان چیزی که در اپ اتفاق می‌افتد. */
.mock__screen {
  position: relative;
  height: 720px;
  border-radius: 38px;
  background: var(--bg);
  padding: var(--s-12) var(--s-12) 0;
  overflow: hidden;
}

.mock__status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: var(--s-8);
  margin-bottom: var(--s-12);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 600;
}

/* هدر ساده: نهال به‌جای آواتار — تنها تصویری که این محصول از کاربر دارد. */
.mock__head {
  display: flex;
  align-items: center;
  gap: var(--s-12);
  margin-bottom: var(--s-16);
}
.mock__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: var(--r-md);
  background: var(--tint-neutral);
  border: var(--b-hairline) solid var(--border);
}
.mock__avatar img {
  width: 28px;
  height: 28px;
}
.mock__greet {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.5;
}
.mock__date {
  color: var(--text-2);
  font-size: 11.5px;
  line-height: 1.5;
}

/* کارت «بلندترین زنجیره‌ی زنده‌ات» */
.mock__hero {
  position: relative;
  border-radius: var(--r-xxl);
  padding: var(--s-20) var(--s-16) var(--s-16);
  background: var(--grad-hero);
  color: var(--on-dark);
  overflow: hidden;
}

/* دایره‌ی کم‌رنگ گوشه‌ی بالا-انتها که نهال در پایین-ابتدای آن نشسته —
   عیناً PositionedDirectional(top:-40, end:-40) اپ، در مقیاس ماکاپ. */
.mock__orb {
  position: absolute;
  inset-inline-end: -36px;
  top: -36px;
  width: 156px;
  height: 156px;
  border-radius: var(--r-pill);
  background: var(--on-dark-surface);
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: var(--s-12);
  pointer-events: none;
}
.mock__orb img {
  width: 96px;
  height: 96px;
}

.mock__label {
  position: relative;
  color: var(--on-dark-2);
  font-size: 11px;
  font-weight: 600;
}
.mock__streak {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: var(--s-8);
  margin-top: var(--s-6);
}
.mock__streakNum {
  font-size: 46px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -1px;
}
.mock__streakUnit {
  font-size: 15px;
  font-weight: 700;
  color: var(--on-dark-2);
}
.mock__habitName {
  position: relative;
  margin-top: var(--s-8);
  font-size: 13.5px;
  font-weight: 700;
}

/* ۱۴ حلقه‌ی اخیر: «انجام دادم» پُر، «انجام نشد» حلقه‌ی امبرِ نرم، «ثبت نشده»
   توخالی — سه ظاهر که هرگز یکی نمی‌شوند. خط بین‌شان همیشه هست؛ زنجیر است. */
.mock__chain {
  position: relative;
  display: flex;
  align-items: center;
  margin-top: var(--s-16);
}
.mock__link {
  display: flex;
  align-items: center;
  flex: 1;
}
.mock__link:last-of-type {
  flex: none;
}
.mock__dot {
  width: 12px;
  height: 12px;
  border-radius: var(--r-pill);
  border: var(--b-thin) solid var(--on-dark-muted);
  background: transparent;
  flex: none;
  transition: background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
.mock__dot.is-on {
  background: var(--primary-pale);
  border-color: var(--primary-pale);
}
.mock__dot.is-skip {
  background: var(--skipped-on-dark-fill);
  border-color: var(--skipped-on-dark);
}
.mock__bar {
  flex: 1;
  height: 2px;
  background: var(--primary-pale);
  opacity: .9;
}
.mock__caption {
  position: relative;
  margin-top: var(--s-12);
  color: var(--on-dark-muted);
  font-size: 10.5px;
  font-weight: 500;
}

.mock__ringTrack {
  stroke: var(--surface-sunken);
}
.mock__ringValue {
  stroke: var(--primary);
  stroke-linecap: round;
  transition: stroke-dashoffset var(--dur-slow) var(--ease);
}

/* «عادت‌ها | کارها» — AppTabs در خانه‌ی اپ: دو تب روی یک مسیر فرورفته، تبِ انتخاب‌شده مثل
   قرصی سفید بیرون آمده. حلقه و شمارنده‌ی هر تب همیشه دیده می‌شوند؛ حلقه‌ی تبِ انتخاب‌شده
   سبز است و بقیه خاکستری. */
.mock__tabs {
  display: flex;
  margin-top: var(--s-12);
  padding: var(--s-6);
  border-radius: var(--r-xl);
  background: var(--surface-sunken);
}
.mock__tabItem {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: var(--s-6);
  padding: var(--s-12) var(--s-6);
  border: var(--b-thin) solid transparent;
  border-radius: var(--r-lg);
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
}
.mock__tabItem.is-on {
  background: var(--surface);
  border-color: var(--border);
  color: var(--primary-dark);
}
.mock__tabRing {
  flex: none;
  width: 20px;
  height: 20px;
}
.mock__tabRing svg {
  display: block;
  width: 100%;
  height: 100%;
  /* شروع از بالا و در جهت عقربه‌ها، مثل CircularProgressIndicator. */
  transform: rotate(-90deg);
}
.mock__tabItem .mock__ringTrack {
  stroke: var(--border);
}
.mock__tabItem .mock__ringValue {
  stroke: var(--text-faint);
}
.mock__tabItem.is-on .mock__ringValue {
  stroke: var(--primary);
}
.mock__tabCount {
  padding: 1px var(--s-6);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text-faint);
  font-size: 11px;
  font-weight: 600;
}
.mock__tabItem.is-on .mock__tabCount {
  background: var(--tint-primary);
  color: var(--primary-dark);
}
.mock__habits {
  display: flex;
  flex-direction: column;
  gap: var(--s-12);
  margin-top: var(--s-12);
}

.mock__habit {
  display: flex;
  align-items: center;
  gap: var(--s-12);
  padding: var(--s-12) var(--s-12);
  border-radius: var(--r-xl);
  background: var(--surface);
  border: var(--b-hairline) solid var(--border);
  transition: border-color var(--dur) var(--ease);
}
.mock__habit.is-done {
  border-color: var(--border-primary);
}

/* «انجام دادم» مربع بزرگ است، «انجام نشد» مربع کوچک کنارش — هر دو ثبت‌اند،
   دومی آرام‌تر است چون کمیاب‌تر است، نه چون کم‌ارزش‌تر.
   در اپ مربعِ ۵۰ با گوشه‌ی ۲۰ است (نسبت ۰٫۴)؛ این‌جا ۴۲ است، پس گوشه‌ی ۱۶ نه ۲۰ —
   با ۲۰ تقریباً دایره می‌شود. */
.mock__check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--r-md);
  border: var(--b-focus) solid var(--border-strong);
  background: var(--bg);
  color: var(--text-faint);
  flex: none;
  transition: background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}
.mock__habit.is-done .mock__check {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-dark);
}

.mock__habitBody {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  min-width: 0;
  flex: 1;
}
.mock__habitTitle {
  font-size: 13.5px;
  font-weight: 700;
}
.mock__pill {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 2px var(--s-8);
  border-radius: var(--r-sm);
  background: var(--tint-primary);
  color: var(--primary-dark);
  font-size: 10.5px;
  font-weight: 600;
}

.mock__skip {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: var(--r-sm);
  background: var(--bg);
  border: var(--b-hairline) solid var(--border);
  color: var(--text-muted);
}
/* کارتِ ثبت‌شده در اپ به‌جای برچسبِ «انجام شد» مداد دارد (`_NoteButton` در habit_card.dart): همان
   گلیفِ `AppIcons.edit` (hugeicons، Edit02)، خاکستری تا یادداشتی نوشته شود، و جای دکمه‌ی
   «انجام نشد» را می‌گیرد. */
.mock__pencil {
  display: none;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: none;
  color: var(--text-muted);
}
.mock__habit.is-done .mock__skip {
  display: none;
}
.mock__habit.is-done .mock__pencil {
  display: flex;
}

/* «عادت تازه» — ته فهرست، نه دکمه‌ی شناور. */
.mock__add {
  display: flex;
  align-items: center;
  gap: var(--s-12);
  margin-top: var(--s-12);
  padding: var(--s-12);
  border-radius: var(--r-xl);
  background: var(--surface);
  border: var(--b-thin) solid var(--border-primary);
  font-size: 13.5px;
  font-weight: 700;
}
.mock__add span:first-child {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-md);
  background: var(--tint-primary);
  color: var(--primary);
}

/* داکِ شناور: قرص شیشه‌ای که محتوا از پشتش رد می‌شود. تب فعال، مثل خودِ اپ،
   قرصِ سبزِ کم‌رنگ با متنِ طلایی دارد — تنها جای صفحه که طلایی خارج از
   «دستاورد» آمده، و فقط چون ماکاپ باید عین اپ باشد. */
.mock__dock {
  position: absolute;
  inset-inline: var(--s-12);
  bottom: var(--s-12);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: 62px;
  padding: var(--s-6);
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: var(--b-hairline) solid var(--border);
  box-shadow: 0 8px 24px var(--shadow);
}
.mock__tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-radius: var(--r-pill);
  color: var(--text-2);
  font-size: 9.5px;
  font-weight: 600;
}
.mock__tab.is-on {
  background: var(--primary-pale);
  color: var(--on-tint-achievement);
}

.mock__legend {
  margin-top: var(--s-12);
  text-align: center;
  color: var(--text-faint);
  font-size: 11.5px;
}

/* ── ۱۲. کارت‌ها ──────────────────────────────────────────────────────── */
.card {
  padding: var(--s-20);
  border-radius: var(--r-xl);
  background: var(--surface);
  border: var(--b-hairline) solid var(--border);
  transition: transform var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease);
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px var(--shadow);
  border-color: var(--border-primary);
}

.card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--s-16);
  border-radius: var(--r-md);
  background: var(--tint-neutral);
  color: var(--on-tint-neutral);
}

.card__title {
  font-size: 16.5px;
  font-weight: 800;
}

.card__body {
  margin-top: var(--s-8);
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.95;
}

/* هر تینت، معنای خودش را دارد و بین سکشن‌ها جابه‌جا نمی‌شود. */
.tint-primary .card__icon {
  background: var(--tint-primary);
  color: var(--on-tint-primary);
}
/* عمداً کلاسِ کارتی برای امبر وجود ندارد: امبر فقط یعنی «انجام نشد»، و
   به محض اینکه آیکون یک کارت را رنگ کند، شروع می‌کند به خطا معنا دادن. */
.tint-slate .card__icon {
  background: var(--tint-slate);
  color: var(--on-tint-slate);
}
.tint-ranked .card__icon {
  background: var(--tint-ranked);
  color: var(--on-tint-ranked);
}
.tint-achievement .card__icon {
  background: var(--tint-achievement);
  color: var(--on-tint-achievement);
}

.grid {
  display: grid;
  gap: var(--s-20);
  grid-template-columns: 1fr;
}

/* ── ۱۳. چطور کار می‌کند ─────────────────────────────────────────────── */
.steps {
  position: relative;
  display: grid;
  gap: var(--s-20);
  grid-template-columns: 1fr;
}

/* امضای بصری صفحه: همان قصه‌ی لوگو — زنجیری از نُه حلقه‌ی در‌هم‌گرفته که آخرش رو به
   بالا فلش می‌شود. هر چهارمین حلقه یک قدم است (اول، پنجم، نهم)، چون قدم‌ها همین
   حلقه‌ها هستند. با اسکرول از راست کشیده می‌شود؛ یک نسخه‌ی کم‌رنگ زیرش همیشه هست
   تا قبل از کشیده شدن هم شکل معلوم باشد. هندسه‌اش در README، بخش «انیمیشن». */
.chain-band {
  margin-bottom: var(--s-16);
  padding-inline: var(--s-8);
}

.chainline {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  pointer-events: none;
}
.chainline__ghost {
  opacity: 0.16;
}
/* ماسکِ کشیدن: مسیرِ پهنی که با اسکرول از راست پیش می‌رود و زنجیر را پشت سرش پیدا می‌کند.
   سفید است چون ماسک روشنی را می‌خواند. */
.chainline__ink {
  fill: none;
  stroke: var(--on-dark);
  stroke-width: 220;
  stroke-linecap: butt;
  stroke-linejoin: miter;
  stroke-dasharray: var(--len, 3000);
  stroke-dashoffset: calc(var(--len, 3000) - var(--len, 3000) * var(--draw, 0));
}
/* لوله‌ی براق: روشن بالا، تیره پایین، همه از توکن‌های برند. بالا هم باید سبز بماند،
   وگرنه لبه‌ی بالای حلقه روی زمینه‌ی کاغذی گم می‌شود؛ برق را خط باریک سفید می‌دهد.
   خط اول جای رنگ برای مرورگری است که color-mix() را نمی‌شناسد. */
.chainline__hi {
  stop-color: var(--primary);
  stop-color: color-mix(in srgb, var(--primary) 64%, var(--on-dark));
}
.chainline__lit {
  stop-color: var(--primary);
  stop-color: color-mix(in srgb, var(--primary) 90%, var(--on-dark));
}
.chainline__mid {
  stop-color: var(--primary);
}
.chainline__lo {
  stop-color: var(--primary-dark);
}
.chainline__bounce {
  stop-color: var(--primary);
  stop-color: color-mix(in srgb, var(--primary-dark) 62%, var(--primary));
}
/* هاله‌ی نرمِ پشتِ حلقه‌ی هر قدم */
.chainline__halo {
  fill: url(#chainHalo);
}
.chainline__haloIn {
  stop-color: var(--tint-primary);
}
.chainline__haloOut {
  stop-color: var(--tint-primary);
  stop-opacity: 0;
}
.chainline__link {
  fill: none;
  stroke: url(#chainTube);
  stroke-width: 14;
}
.chainline__tube {
  fill: url(#chainTube);
}
.chainline__head {
  fill: url(#chainTube);
  stroke: url(#chainTube);
  stroke-width: 8;
  stroke-linejoin: round;
}
.chainline__shine,
.chainline__headShine {
  fill: none;
  stroke: var(--on-dark);
  stroke-width: 3.5;
  stroke-linecap: round;
  opacity: 0.55;
}
.chainline__shadow {
  fill: var(--shadow-lift);
  stroke: var(--shadow-lift);
}

.step {
  position: relative;
  padding: var(--s-26) var(--s-20);
  border-radius: var(--r-xl);
  background: var(--surface);
  border: var(--b-hairline) solid var(--border);
}

.step__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: var(--s-16);
  border-radius: var(--r-md);
  background: var(--tint-primary);
  color: var(--on-tint-primary);
  font-size: 19px;
  font-weight: 800;
}

.step__title {
  font-size: 18px;
}

.step__body {
  margin-top: var(--s-8);
  color: var(--text-2);
  font-size: 14.5px;
  line-height: 1.95;
}

/* ── ۱۴. زنجیره‌ی زنده ────────────────────────────────────────────────── */
.chain-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--s-6);
  max-width: 360px;
}

.day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  font-size: 12px;
  font-weight: 600;
  background: var(--cal-future-fill);
  border: var(--b-thin) solid transparent;
  color: var(--cal-future-text);
  transform: scale(.86);
  opacity: 0;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease),
    background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}
.day.is-in {
  opacity: 1;
  transform: none;
}
/* «انجام دادم» — پرِ سبز. */
.day--done {
  background: var(--cal-done-fill);
  border-color: var(--cal-done-fill);
  color: var(--cal-done-text);
}
/* «انجام نشد» — یک تصمیم محترم، نه خطا: امبرِ کم‌رنگ با بوردر. */
.day--skip {
  background: var(--cal-skip-fill);
  border-color: var(--cal-skip-border);
  color: var(--cal-skip-text);
}
/* «ثبت نشده» — نبودِ داده: فقط بوردر خاکستری. */
.day--missed {
  background: transparent;
  border-color: var(--cal-missed-border);
  color: var(--cal-missed-text);
}

.legend {
  display: flex;
  flex-direction: column;
  gap: var(--s-12);
  margin-top: var(--s-20);
}
.legend li {
  display: flex;
  align-items: center;
  gap: var(--s-12);
  font-size: 14px;
  color: var(--text-2);
}
.legend b {
  color: var(--text);
  font-weight: 700;
}
.legend i {
  width: 26px;
  height: 26px;
  border-radius: var(--s-8);
  flex: none;
  /* بوردر ضخیم‌تر از خودِ خانه‌ها: نمونه‌ی «ثبت نشده» و «هنوز نرسیده» فقط
     بوردر دارند و در اندازه‌ی کوچکِ راهنما باید دیده شوند. */
  border: var(--b-focus) solid transparent;
}
.legend i.day--done {
  opacity: 1;
  transform: none;
}
.legend i.day--skip {
  opacity: 1;
  transform: none;
}
.legend i.day--missed {
  opacity: 1;
  transform: none;
}
.legend i.day--future {
  background: var(--cal-future-fill);
  opacity: 1;
  transform: none;
}

.quote {
  margin-top: var(--s-26);
  padding-inline-start: var(--s-16);
  border-inline-start: var(--b-accent) solid var(--primary);
  color: var(--text);
  font-size: clamp(16px, 2vw, 19px);
  font-weight: 700;
  line-height: 1.9;
}

.chain-panel {
  padding: clamp(var(--s-20), 3vw, var(--s-34));
  border-radius: var(--r-xxl);
  background: var(--surface);
  border: var(--b-hairline) solid var(--border);
}

.chain-count {
  display: flex;
  align-items: baseline;
  gap: var(--s-8);
  margin-bottom: var(--s-20);
}
.chain-count b {
  font-size: clamp(34px, 5vw, 46px);
  font-weight: 800;
  line-height: 1.1;
  color: var(--primary);
}
.chain-count span {
  color: var(--text-2);
  font-size: 14px;
  font-weight: 600;
}

/* ── ۱۵. همراهی و کمپین‌ها ────────────────────────────────────────────
   این دو هرگز یک رنگ نمی‌گیرند: «رقابتی» با رنگ «همراهی» توضیح غلطی از
   ماهیت گروه می‌دهد. */
.duo {
  display: grid;
  gap: var(--s-20);
  grid-template-columns: 1fr;
}

.pane {
  padding: clamp(var(--s-20), 3vw, var(--s-34));
  border-radius: var(--r-xxl);
  border: var(--b-hairline) solid var(--border);
  /* «کمپین‌ها» یک پنل داخل سکشن است، نه خود سکشن — ولی هدفِ یکی از
     لینک‌های منوست و باید مثل بقیه زیر نوار بالا نرود. */
  scroll-margin-top: calc(var(--nav-h) + var(--s-12));
}
.pane--companion {
  background: var(--tint-primary);
  border-color: var(--border-primary);
}
.pane--campaign {
  background: var(--tint-ranked);
  border-color: var(--border-ranked);
}

.pane__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--s-6);
  padding: var(--s-4) var(--s-12);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: 12px;
  font-weight: 700;
}
.pane--companion .pane__tag {
  color: var(--on-tint-primary);
}
.pane--campaign .pane__tag {
  color: var(--on-tint-ranked);
}

.pane__title {
  margin-top: var(--s-16);
  font-size: clamp(21px, 2.6vw, 26px);
}
.pane--companion .pane__title {
  color: var(--on-tint-primary);
}
.pane--campaign .pane__title {
  color: var(--on-tint-ranked);
}

.pane__body {
  margin-top: var(--s-12);
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.95;
}

.pane__list {
  display: flex;
  flex-direction: column;
  gap: var(--s-12);
  margin-top: var(--s-20);
}
.pane__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-12);
  font-size: 14.5px;
  color: var(--text);
  line-height: 1.9;
}
.pane__list svg {
  flex: none;
  margin-top: 5px;
}
.pane--companion .pane__list svg {
  color: var(--on-tint-primary);
}
.pane--campaign .pane__list svg {
  color: var(--on-tint-ranked);
}

/* ── ۱۶. نشان‌ها ──────────────────────────────────────────────────────
   طلایی فقط اینجاست — دستاورد. هرگز تزئین، هرگز دکمه‌ی معمولی.
   کاشی‌ها از روی BadgeTile اپ ساخته شده‌اند: یک شکل، پنج رده؛ فقط رنگ
   عوض می‌شود و رده‌های ۴ و ۵ چهار تیکِ گوشه می‌گیرند. نماد، کپیِ همان فایلِ
   SVG تک‌رنگی است که اپ نشان می‌دهد (assets/img/badges/)، به رنگِ رده. */
.badges {
  padding: clamp(var(--s-20), 3vw, var(--s-34));
  border-radius: var(--r-xxl);
  background: var(--grad-achievement);
  border: var(--b-hairline) solid var(--border-achievement);
}

.badges__row {
  display: flex;
  gap: var(--s-12);
  margin-top: var(--s-20);
  padding-bottom: var(--s-8);
  /* محتوای پهن داخل خودش اسکرول می‌شود؛ بدنه‌ی صفحه هرگز افقی اسکرول نمی‌کند. */
  overflow-x: auto;
  scrollbar-width: thin;
}

.badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-8);
  width: 112px;
  flex: none;
  padding: var(--s-16) var(--s-8) var(--s-12);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: var(--b-hairline) solid var(--border-achievement);
  text-align: center;
  transition: transform var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease);
}
.badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px var(--shadow);
}

/* کاشی ۹۶ واحدی دیزاین در ۵۶px: شعاع ۳۵٫۴٪، قابِ تورفته ۷٫۳٪ با شعاع ۲۸٫۱٪.
   تیک‌ها فقط با کلاس رده‌ی ۴ و ۵ دیده می‌شوند. */
.tile {
  display: block;
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 35.4%;
  background: var(--tier1-field);
  color: var(--tier1-ink);
}
/* نماد: همان کاری که اپ با ColorFilter می‌کند، این‌جا با mask — فایل روی بومِ کاملِ ۹۶
   کشیده شده (نماد در جعبه‌ی ۵۲ وسطش) و ماسک لبه‌به‌لبه‌ی کاشی می‌نشیند؛ رنگ از `color`
   می‌آید، شفافیت‌های داخل فایل آلفای ماسک‌اند. یک فایل، پنج رده، هر دو تم.
   مسیرِ فایل عمداً این‌جاست و نه در یک متغیر: url() داخل custom property را مرورگرها
   نسبت به جاهای مختلفی resolve می‌کنند (کروم نسبت به همین شیت، نه سند) و ماسکِ
   پیدانشده یعنی کاشیِ خالی. url() مستقیم در شیت همه‌جا نسبت به خودِ شیت است. */
.tile__symbol {
  position: absolute;
  inset: 0;
  background: currentColor;
  -webkit-mask: center / 100% 100% no-repeat;
  mask: center / 100% 100% no-repeat;
  pointer-events: none;
}
.tile__symbol--streak_3 { -webkit-mask-image: url(img/badges/badge_streak_3.svg); mask-image: url(img/badges/badge_streak_3.svg); }
.tile__symbol--streak_7 { -webkit-mask-image: url(img/badges/badge_streak_7.svg); mask-image: url(img/badges/badge_streak_7.svg); }
.tile__symbol--streak_30 { -webkit-mask-image: url(img/badges/badge_streak_30.svg); mask-image: url(img/badges/badge_streak_30.svg); }
.tile__symbol--comeback { -webkit-mask-image: url(img/badges/badge_comeback.svg); mask-image: url(img/badges/badge_comeback.svg); }
.tile__symbol--first_habit { -webkit-mask-image: url(img/badges/badge_first_habit.svg); mask-image: url(img/badges/badge_first_habit.svg); }
.tile__symbol--first_challenge { -webkit-mask-image: url(img/badges/badge_first_challenge.svg); mask-image: url(img/badges/badge_first_challenge.svg); }
.tile__symbol--streak_100 { -webkit-mask-image: url(img/badges/badge_streak_100.svg); mask-image: url(img/badges/badge_streak_100.svg); }
.tile__symbol--streak_365 { -webkit-mask-image: url(img/badges/badge_streak_365.svg); mask-image: url(img/badges/badge_streak_365.svg); }
.tile::before {
  content: "";
  position: absolute;
  inset: 7.3%;
  border-radius: 28.1%;
  border: var(--b-hairline) solid var(--tier1-frame);
  pointer-events: none;
}
.tile__ticks {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
  color: var(--tier4-ticks);
  pointer-events: none;
}

.tile--2 { background: var(--tier2-field); color: var(--tier2-ink); }
.tile--2::before { border-color: var(--tier2-frame); }
.tile--3 { background: var(--tier3-field); color: var(--tier3-ink); }
.tile--3::before { border-color: var(--tier3-frame); }
.tile--4 { background: var(--tier4-field); color: var(--tier4-ink); }
.tile--4::before { border-color: var(--tier4-frame); }
.tile--4 .tile__ticks { display: block; color: var(--tier4-ticks); }
.tile--5 { background: var(--tier5-field); color: var(--tier5-ink); }
.tile--5::before { border-color: var(--tier5-frame); }
.tile--5 .tile__ticks { display: block; color: var(--tier5-ticks); }

.badge__name {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.6;
}
.badge__cond {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.6;
}
.badge__tier {
  margin-top: auto;
  padding: 2px var(--s-8);
  border-radius: var(--r-xs);
  background: var(--tint-neutral);
  color: var(--on-tint-neutral);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.6;
}
.badge__tier.is-rare {
  background: var(--tint-achievement);
  color: var(--on-tint-achievement);
}

.badges__note {
  margin-top: var(--s-20);
  color: var(--on-tint-achievement);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.9;
}

/* سه دسته‌ی نشان‌ها، همان‌طور که اپ زیر هم می‌چیند. */
.badges__groups {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-8) var(--s-20);
  margin-top: var(--s-12);
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.8;
}
.badges__groups b {
  color: var(--text);
  font-weight: 700;
}

/* ── ۱۷. پلن‌ها ───────────────────────────────────────────────────────── */
/* مقایسه‌ی رایگان و پرو: همان ردیف‌ها و همان ترتیبِ جدول «انتخاب اشتراک» اپ
   (plan.offers.compare.*). ستون پرو یک نوار رنگی پیوسته است، و ردیفی که فقط پرو
   دارد در ستون رایگان خط‌تیره می‌گیرد، نه ضربدر: رایگان چیزی را ندارد، خراب نیست. */
.compare {
  overflow: hidden;
  max-width: 820px;
  margin-inline: auto;
  border-radius: var(--r-xl);
  background: var(--surface);
  border: var(--b-hairline) solid var(--border);
}
.compare__table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 14px;
}
.compare__col {
  width: clamp(64px, 17vw, 150px);
}
.compare__table th,
.compare__table td {
  padding: var(--s-16) var(--s-8);
  border-top: var(--b-hairline) solid var(--divider);
  line-height: 1.8;
  text-align: center;
  vertical-align: middle;
}
.compare__table thead th,
.compare__table thead td {
  border-top: 0;
}
.compare__table thead th {
  font-weight: 600;
}
.compare__table tbody th {
  padding-inline: var(--s-20);
  color: var(--text);
  font-weight: 500;
  text-align: start;
}
.compare__free {
  color: var(--text-2);
}
.compare__pro {
  background: var(--tint-primary);
  color: var(--on-tint-primary);
  font-weight: 600;
}
.compare__table thead .compare__pro {
  font-weight: 800;
}
.compare__tick {
  display: inline-block;
  vertical-align: middle;
  color: var(--primary);
}
.compare__free .compare__tick {
  color: var(--text-2);
}
.compare__no {
  color: var(--text-faint);
}
.compare__table tfoot td {
  padding: var(--s-12) var(--s-20);
  background: var(--surface-var);
  color: var(--text-2);
  font-size: 13px;
  text-align: start;
}

.plan-note {
  max-width: 820px;
  margin-top: var(--s-26);
  margin-inline: auto;
  padding: var(--s-20);
  border-radius: var(--r-lg);
  background: var(--tint-neutral);
  border: var(--b-hairline) solid var(--border);
  color: var(--text-2);
  font-size: 14.5px;
  line-height: 1.95;
}
.plan-note b {
  color: var(--text);
}

/* ── ۱۸. سؤال‌های پرتکرار ─────────────────────────────────────────────── */
.faq {
  display: flex;
  flex-direction: column;
  gap: var(--s-12);
  max-width: 820px;
}

.qa {
  border-radius: var(--r-lg);
  background: var(--surface);
  border: var(--b-hairline) solid var(--border);
  overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease);
}
.qa:hover {
  border-color: var(--border-primary);
}

.qa__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-12);
  width: 100%;
  min-height: 60px;
  padding: var(--s-16) var(--s-20);
  text-align: start;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.8;
}

.qa__chev {
  flex: none;
  color: var(--text-muted);
  transition: transform var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.qa__q[aria-expanded="true"] .qa__chev {
  transform: rotate(180deg);
  color: var(--primary);
}

/* انیمیشن ارتفاع با grid-template-rows — بدون انیمیشنِ height. */
.qa__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur) var(--ease);
}
.qa.is-open .qa__a {
  grid-template-rows: 1fr;
}
.qa__aInner {
  overflow: hidden;
}
.qa__a p {
  padding: 0 var(--s-20) var(--s-20);
  color: var(--text-2);
  font-size: 14.5px;
  line-height: 2;
}

/* ── ۱۹. CTA پایانی و دانلود ──────────────────────────────────────────── */
.cta {
  position: relative;
  padding: clamp(var(--s-34), 6vw, 72px) var(--s-20);
  border-radius: var(--r-xxl);
  background: var(--grad-hero);
  color: var(--on-dark);
  text-align: center;
  overflow: hidden;
}

.cta__glow {
  position: absolute;
  inset-inline-end: -60px;
  top: -80px;
  width: 300px;
  height: 300px;
  border-radius: var(--r-pill);
  background: var(--on-dark-surface);
  pointer-events: none;
}

.cta__inner {
  position: relative;
  max-width: 620px;
  margin-inline: auto;
}

.cta__title {
  font-size: clamp(24px, 3.6vw, 36px);
  color: var(--on-dark);
}

.cta__body {
  margin-top: var(--s-16);
  color: var(--on-dark-2);
  font-size: clamp(14.5px, 1.7vw, 16.5px);
  line-height: 1.95;
}

.cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-12);
  margin-top: var(--s-26);
}

/* بله برای کسی که عمداً آن را می‌خواهد: یک خط، نه یک دکمه. */
.cta__alt {
  margin-top: var(--s-16);
  color: var(--on-dark-2);
  font-size: 13.5px;
}
.cta__alt a {
  color: var(--on-dark);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.stores {
  margin-top: clamp(var(--s-34), 5vw, 52px);
  padding-top: var(--s-26);
  border-top: var(--b-hairline) solid var(--on-dark-border);
}

.stores__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-8);
  color: var(--on-dark-2);
  font-size: 14px;
  font-weight: 700;
}

.stores__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-12);
  margin-top: var(--s-16);
}

.store {
  display: flex;
  align-items: center;
  gap: var(--s-12);
  min-width: 190px;
  min-height: var(--btn-h-sm);
  padding: var(--s-12) var(--s-16);
  border-radius: var(--r-lg);
  background: var(--on-dark-surface);
  border: var(--b-hairline) solid var(--on-dark-border);
  color: var(--on-dark);
  text-align: start;
  transition: transform var(--dur-fast) var(--ease),
    background-color var(--dur-fast) var(--ease);
}
.store:hover {
  transform: translateY(-2px);
  background: var(--on-dark-surface-strong);
}

/* «به‌زودی» — assets/links.js این کلاس را خودکار می‌گذارد وقتی مقدار لینک
   در HC_LINKS خالی باشد. فعال کردن یک لینک فقط مقداردهی در همان فایل است،
   نیازی به تغییر HTML یا این کلاس نیست. */
.is-soon {
  opacity: .55;
  cursor: default;
  pointer-events: none;
}

.btn.is-soon::after,
.footer__list a.is-soon::after {
  content: '(به‌زودی)';
  margin-inline-start: var(--s-6);
  font-size: .85em;
  font-weight: 500;
}

.store__name {
  display: block;
  font-size: 14px;
  font-weight: 700;
}
.store__sub {
  display: block;
  color: var(--on-dark-muted);
  font-size: 11.5px;
  font-weight: 500;
}

/* ── ۲۰. فوتر ─────────────────────────────────────────────────────────── */
.footer {
  padding-block: clamp(var(--s-34), 5vw, 64px) var(--s-34);
  border-top: var(--b-hairline) solid var(--border);
  background: var(--surface-var);
}

.footer__grid {
  display: grid;
  gap: var(--s-26);
  grid-template-columns: 1fr;
}

.footer__about {
  margin-top: var(--s-12);
  max-width: 40ch;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.95;
}

.footer__head {
  margin-bottom: var(--s-12);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
}

.footer__list {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
}
.footer__list a {
  display: inline-block;
  padding-block: var(--s-6);
  color: var(--text-2);
  font-size: 14px;
  font-weight: 500;
  transition: color var(--dur-fast) var(--ease);
}
.footer__list a:hover {
  color: var(--primary);
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-8) var(--s-16);
  justify-content: space-between;
  margin-top: var(--s-34);
  padding-top: var(--s-20);
  border-top: var(--b-hairline) solid var(--divider);
  color: var(--text-muted);
  font-size: 12.5px;
}

/* ── ۲۱. Scroll reveal ────────────────────────────────────────────────
   فقط وقتی JS اجرا شده باشد. اگر JS نیامد، هیچ چیزی نامرئی نمی‌ماند. */
.js-enabled .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.js-enabled .reveal.is-in {
  opacity: 1;
  transform: none;
}

/* ── ۲۲. بریک‌پوینت‌ها ────────────────────────────────────────────────── */
/* زیر ۹۰۰px: لینک‌های افقی جای خود را به همبرگر می‌دهند. */
@media (max-width: 899px) {
  .nav__links,
  .nav__cta {
    display: none;
  }
  .nav__burger {
    display: inline-flex;
  }
  .nav__side {
    margin-inline-start: auto;
  }
  .btn {
    min-height: var(--btn-h-sm);
  }
}

@media (min-width: 640px) {
  :root {
    --gutter: var(--s-26);
  }
  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer__grid {
    grid-template-columns: 1.4fr 1fr 1fr;
  }
}

@media (min-width: 900px) {
  .grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .steps {
    grid-template-columns: repeat(3, 1fr);
  }
  .duo {
    grid-template-columns: repeat(2, 1fr);
  }
  .chain-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(var(--s-26), 4vw, 52px);
    align-items: center;
  }
}

@media (min-width: 1000px) {
  .hero__grid {
    grid-template-columns: 1.05fr .95fr;
  }
  .mock {
    width: 340px;
  }
}

@media (min-width: 1200px) {
  .grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }
  /* Two plans, free and pro: two columns is as wide as this row goes. */
}

@media (max-width: 400px) {
  .hero__actions .btn {
    width: 100%;
  }
  .store {
    min-width: 100%;
  }
}

/* نوار «یک حساب» زیر تیتر «یک حساب، همه‌جا»: ربات بله در همین نوار و در یک جمله
   آمده، و همین نوار می‌گوید که با اپ یک حساب است. */
.sync {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-12);
  margin-top: var(--s-20);
  padding: var(--s-16) var(--s-20);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: var(--b-thin) solid var(--border-primary);
  color: var(--text-2);
  font-size: clamp(13.5px, 1.5vw, 15px);
  line-height: 1.85;
  text-align: center;
}
.sync svg {
  flex: none;
  color: var(--primary);
}
.sync strong {
  color: var(--text);
  font-weight: 700;
}

/* ── ۲۳. صفحه‌ی مربی‌ها ────────────────────────────────────────────────
   همان سیستم، با یک لهجه‌ی متفاوت: هرجا حرف از کمپین است، بنفشِ ranked —
   همان رنگی که در اپ هم «کمپین/رقابتی» را نشان می‌دهد. دکمه‌ها همچنان
   سبزند، چون سبز رنگ «کارِ اصلی» در کل محصول است. */

/* بلوکی که در صفحه‌ی اصلی، مربی را به صفحه‌ی خودش می‌فرستد */
.coach-band {
  display: grid;
  gap: clamp(var(--s-20), 3vw, var(--s-34));
  align-items: center;
  padding: clamp(var(--s-26), 4vw, 52px);
  border-radius: var(--r-xxl);
  background: var(--tint-ranked);
  border: var(--b-hairline) solid var(--border-ranked);
}

.coach-band__title {
  font-size: clamp(22px, 3vw, 30px);
  color: var(--on-tint-ranked);
}

.coach-band__body {
  margin-top: var(--s-12);
  color: var(--text-2);
  font-size: clamp(14.5px, 1.6vw, 16px);
  line-height: 1.95;
}

.coach-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-12);
  margin-top: var(--s-20);
}

.coach-band__list {
  display: flex;
  flex-direction: column;
  gap: var(--s-12);
}
.coach-band__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-12);
  padding: var(--s-16);
  border-radius: var(--r-md);
  background: var(--surface);
  border: var(--b-hairline) solid var(--border);
  font-size: 14px;
  line-height: 1.9;
}
.coach-band__list svg {
  flex: none;
  margin-top: 4px;
  color: var(--on-tint-ranked);
}

/* ماکاپ پنل دسکتاپ — مثل ماکاپ موبایل، HTML/CSS و نه تصویر.
   از روی پنلِ امروز: ریلِ سبزِ تیره (برند، کمپین فعال، داشبورد / اعضا /
   تمرین‌ها / ارسالی‌ها / پیام مربی، همه‌ی کمپین‌ها / حساب و اشتراک، چیپِ
   طلاییِ اشتراک) و داشبورد کمپین در ستون اصلی. اگر ناوبری پنل عوض شد،
   همین‌جا هم عوضش کن. */
.panelmock {
  border-radius: var(--r-xl);
  background: var(--bg);
  border: var(--b-hairline) solid var(--border);
  box-shadow: 0 26px 60px var(--shadow-lift);
  overflow: hidden;
}

.panelmock__bar {
  display: flex;
  align-items: center;
  gap: var(--s-8);
  padding: var(--s-8) var(--s-16);
  background: var(--surface);
  border-bottom: var(--b-hairline) solid var(--divider);
}
.panelmock__dot {
  width: var(--s-8);
  height: var(--s-8);
  border-radius: var(--r-pill);
  background: var(--border-strong);
}
.panelmock__url {
  margin-inline-start: var(--s-8);
  padding: var(--s-2) var(--s-12);
  border-radius: var(--r-sm);
  background: var(--surface-sunken);
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 600;
}

.panelmock__body {
  display: grid;
  grid-template-columns: 148px 1fr;
  min-height: 340px;
}

/* ریل — رنگ primary-dark، متن روی تیره. */
.panelmock__rail {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
  padding: var(--s-12);
  background: var(--primary-dark);
  color: var(--on-dark);
}
.panelmock__brand {
  display: flex;
  align-items: center;
  gap: var(--s-8);
  margin-bottom: var(--s-4);
}
.panelmock__brandMark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: var(--r-sm);
  background: var(--on-dark-surface);
  color: var(--primary-pale);
}
.panelmock__brandName {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
}
.panelmock__brandSub {
  color: var(--primary-pale);
  font-size: 9px;
  font-weight: 600;
  line-height: 1.4;
}

/* سوییچر کمپین: مربی از همین می‌فهمد به کدام گروه نگاه می‌کند. */
.panelmock__switcher {
  padding: var(--s-8) var(--s-12);
  border-radius: var(--r-sm);
  background: var(--on-dark-surface);
  border: var(--b-hairline) solid var(--on-dark-border);
}
.panelmock__switcherLabel {
  color: var(--on-dark-muted);
  font-size: 8.5px;
  font-weight: 600;
}
.panelmock__switcherName {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
}
.panelmock__switcherLine {
  color: var(--on-dark-2);
  font-size: 9px;
}

.panelmock__nav {
  display: flex;
  align-items: center;
  gap: var(--s-8);
  padding: var(--s-6) var(--s-8);
  border-radius: var(--r-sm);
  color: var(--on-dark-2);
  font-size: 10.5px;
  font-weight: 600;
}
.panelmock__nav.is-on {
  background: var(--on-dark-surface-strong);
  color: var(--on-dark);
  font-weight: 700;
}
.panelmock__nav svg {
  flex: none;
}
.panelmock__navBadge {
  margin-inline-start: auto;
  padding: 0 var(--s-6);
  border-radius: var(--r-xs);
  background: var(--on-dark-surface);
  font-size: 9px;
  font-weight: 700;
}
.panelmock__rule {
  height: var(--b-hairline);
  background: var(--on-dark-border);
  margin-block: var(--s-4);
}

/* چیپ اشتراک — طلایی، چون دیزاین طلایی را برای دستاورد نگه داشته و
   جایگاهِ خودِ مربی را هم جزو آن می‌داند. */
.panelmock__plan {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: var(--s-8);
  padding: var(--s-8) var(--s-12);
  border-radius: var(--r-sm);
  background: var(--tier4-frame);
  color: var(--tier4-ink);
}
.panelmock__planText {
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1.5;
}
.panelmock__planSub {
  display: block;
  font-size: 8.5px;
  font-weight: 500;
  opacity: .75;
}

/* ستون اصلی: داشبورد کمپین */
.panelmock__main {
  padding: var(--s-16);
  display: flex;
  flex-direction: column;
  gap: var(--s-12);
  min-width: 0;
}
.panelmock__h {
  font-size: 13.5px;
  font-weight: 800;
}

.panelmock__card {
  padding: var(--s-12);
  border-radius: var(--r-md);
  background: var(--surface);
  border: var(--b-hairline) solid var(--border);
  min-width: 0;
}

.panelmock__campaign {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-8);
  font-size: 11.5px;
  font-weight: 700;
}
.panelmock__chip {
  padding: 1px var(--s-8);
  border-radius: var(--r-xs);
  background: var(--tint-primary);
  color: var(--on-tint-primary);
  font-size: 9.5px;
  font-weight: 700;
}
.panelmock__meta {
  color: var(--text-muted);
  font-size: 9.5px;
  font-weight: 500;
}
.panelmock__code {
  margin-inline-start: auto;
  padding: 2px var(--s-8);
  border-radius: var(--r-xs);
  background: var(--surface-sunken);
  color: var(--text-2);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .5px;
}
.panelmock__progress {
  height: 6px;
  margin-top: var(--s-8);
  border-radius: var(--r-xs);
  background: var(--surface-sunken);
  overflow: hidden;
}
.panelmock__progress i {
  display: block;
  width: 43%;
  height: 100%;
  border-radius: var(--r-xs);
  background: var(--primary);
}

.panelmock__stats {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: var(--s-8);
}
.panelmock__stat {
  padding: var(--s-12);
  border-radius: var(--r-md);
  background: var(--surface);
  border: var(--b-hairline) solid var(--border);
  min-width: 0;
}
.panelmock__stat.is-emphasised {
  background: var(--tint-primary);
  border-color: var(--border-primary);
}
.panelmock__statLabel {
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 600;
  line-height: 1.5;
}
.panelmock__statValue {
  margin-top: var(--s-4);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.1;
}
.panelmock__stat.is-emphasised .panelmock__statValue {
  color: var(--on-tint-primary);
}
.panelmock__statUnit {
  color: var(--text-2);
  font-size: 9.5px;
  font-weight: 500;
  line-height: 1.5;
}
/* هفت میله‌ی روند: چند نفر هر روز فعال بوده‌اند. */
.panelmock__trend {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 22px;
  margin-top: var(--s-8);
}
.panelmock__trend i {
  flex: 1;
  border-radius: 2px;
  background: var(--primary);
  opacity: .55;
}
.panelmock__trend i:last-child {
  opacity: 1;
}

.panelmock__listHead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-8);
  margin-bottom: var(--s-8);
  font-size: 11px;
  font-weight: 800;
}
.panelmock__listHead b {
  font-weight: 800;
}
.panelmock__listHead span {
  color: var(--text-muted);
  font-size: 9.5px;
  font-weight: 500;
}
.panelmock__row {
  display: flex;
  align-items: center;
  gap: var(--s-8);
  padding: var(--s-6) 0;
  border-top: var(--b-hairline) solid var(--divider);
}
.panelmock__initial {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: var(--r-sm);
  background: var(--tint-neutral);
  color: var(--on-tint-neutral);
  font-size: 10px;
  font-weight: 700;
}
.panelmock__rowBody {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.panelmock__rowTitle {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
}
.panelmock__rowSub {
  color: var(--text-muted);
  font-size: 9.5px;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.panelmock__count {
  flex: none;
  padding: 1px var(--s-8);
  border-radius: var(--r-xs);
  background: var(--tint-slate);
  color: var(--on-tint-slate);
  font-size: 9.5px;
  font-weight: 700;
}

/* گروه‌هایی که محصول به دردشان می‌خورد */
.audience {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-12);
}
.audience li {
  display: flex;
  align-items: center;
  gap: var(--s-8);
  padding: var(--s-12) var(--s-16);
  border-radius: var(--r-md);
  background: var(--surface);
  border: var(--b-hairline) solid var(--border);
  font-size: 14.5px;
  font-weight: 600;
}
.audience svg {
  color: var(--primary);
  flex: none;
}

/* بلوک فعال‌سازی — عمداً بدون قیمت */
.activate {
  display: grid;
  gap: var(--s-20);
  align-items: center;
  padding: clamp(var(--s-20), 3vw, var(--s-34));
  border-radius: var(--r-xxl);
  background: var(--surface);
  border: var(--b-thin) solid var(--border-primary);
}
.activate__title {
  font-size: clamp(20px, 2.6vw, 25px);
}
.activate__body {
  margin-top: var(--s-12);
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.95;
}
.activate__note {
  margin-top: var(--s-16);
  padding-inline-start: var(--s-16);
  border-inline-start: var(--b-accent) solid var(--primary);
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.9;
}

@media (min-width: 900px) {
  .coach-band {
    grid-template-columns: 1.1fr .9fr;
  }
  .activate {
    grid-template-columns: 1.3fr .7fr;
  }
}

/* در عرض کم، ریلِ پنل جا نمی‌شود و فقط آیکون‌ها می‌مانند؛ سوییچر و چیپ
   اشتراک هم که متن‌اند، کنار می‌روند. */
@media (max-width: 560px) {
  .panelmock__body {
    grid-template-columns: 52px 1fr;
  }
  .panelmock__nav span,
  .panelmock__navBadge,
  .panelmock__brand > div,
  .panelmock__switcher,
  .panelmock__plan {
    display: none;
  }
  .panelmock__nav {
    justify-content: center;
  }
  .panelmock__stats {
    grid-template-columns: 1fr;
  }
}

/* ── ۲۴. احترام به prefers-reduced-motion ─────────────────────────────
   همه‌ی حرکت‌ها خاموش و محتوا در حالت نهایی. هیچ عنصری opacity:0 نمی‌ماند. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  .js-enabled .reveal,
  .js-enabled .reveal.is-in {
    opacity: 1 !important;
    transform: none !important;
  }

  .day {
    opacity: 1 !important;
    transform: none !important;
  }

  .drawer__link {
    opacity: 1 !important;
    transform: none !important;
  }

  .chainline__ink {
    stroke-dashoffset: 0 !important;
  }
  .mock__ringValue {
    transition: none !important;
  }

  .scroll-progress {
    display: none;
  }

  .hero__blob {
    transform: none !important;
  }
}