/* =====================================================================
   ویراشو — the platform's public site: home, pricing, terms.

   One stylesheet for every page of the site so the header, the footer,
   the buttons and the signup modal are one design, cached once.
   The look comes from the logo: its royal blue and its teal leaf, a navy
   for words, one gradient between the two colours used sparingly, soft
   light behind the first screen, white space everywhere else.
   ===================================================================== */

/* ویراشو: Yekan Bakh (Fontiran, licensed). Four files cover every weight the pages use: 400-500, 600, 700, 800-900. */
@font-face { font-family: YekanBakh; src: url(/themes/aria/fonts/yekanbakh-regular.woff2) format("woff2"); font-weight: 400 500; font-display: swap; }
@font-face { font-family: YekanBakh; src: url(/themes/aria/fonts/yekanbakh-semibold.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: YekanBakh; src: url(/themes/aria/fonts/yekanbakh-bold.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: YekanBakh; src: url(/themes/aria/fonts/yekanbakh-extrabold.woff2) format("woff2"); font-weight: 800 900; font-display: swap; }
/* kept only as the fallback: it is fetched when a glyph is missing, never otherwise */
@font-face { font-family: Vazirmatn; src: url(/themes/aria/fonts/vazirmatn-regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: Vazirmatn; src: url(/themes/aria/fonts/vazirmatn-medium.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: Vazirmatn; src: url(/themes/aria/fonts/vazirmatn-bold.woff2) format("woff2"); font-weight: 600 900; font-display: swap; }

:root {
  --ink:    #0c1838;   /* the wordmark's navy: headings */
  --text:   #3b4661;   /* body — 9:1 on white */
  --muted:  #5e6882;   /* secondary — 5.6:1 on white */
  --blue:   #0b57e3;   /* the V: the action colour — 5.9:1 with white */
  --blue-h: #0848bf;
  --sky:    #0a7cff;
  --teal:   #10d0bb;   /* the leaf: light, glows, ticks — never text on white */
  --teal-d: #067a6e;   /* the leaf as text — 5.1:1 on white */
  --red:    #c62828;
  --grad:   linear-gradient(120deg, #0b57e3 10%, #0a7cff 45%, #10c9b6 95%);
  --soft:   #f5f7fc;
  --line:   #e6e9f2;
  --wrap:   1160px;
  --r:      20px;
  --shadow: 0 1px 2px rgb(12 24 56 / .05), 0 10px 30px rgb(12 24 56 / .08);
  --shadow-lg: 0 2px 6px rgb(12 24 56 / .05), 0 30px 70px rgb(12 24 56 / .14);
}
*, *::before, *::after { box-sizing: border-box; }
/* Yekan Bakh's letters are about 6% larger than Vazirmatn's at the same size: the root is scaled so every rem keeps its look */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; font-size: 93.75%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body {
  margin: 0; background: #fff; color: var(--text);
  font-family: YekanBakh, Vazirmatn, system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  font-size: 1rem; line-height: 1.9; overflow-x: clip; -webkit-font-smoothing: antialiased;
}
body.has-modal { overflow: hidden; }
h1, h2, h3 { color: var(--ink); line-height: 1.4; margin: 0; font-weight: 800; letter-spacing: 0; }
p { margin: 0; }
a { color: var(--blue); }
img, svg { display: block; max-inline-size: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--blue) 45%, transparent); outline-offset: 3px; border-radius: 8px; }
.wrap { inline-size: 100%; max-inline-size: var(--wrap); margin-inline: auto; padding-inline: 24px; }
.sr-only { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; inset-inline-start: 12px; inset-block-start: -60px; z-index: 100; padding: .5rem 1rem; border-radius: 10px; background: var(--ink); color: #fff; }
.skip:focus { inset-block-start: 12px; }
.grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---- buttons ---------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-block-size: 52px; padding-inline: 1.6rem; border: 0; border-radius: 14px;
  background: var(--blue); color: #fff; font: inherit; font-weight: 700; font-size: 1rem;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  box-shadow: 0 1px 0 rgb(255 255 255 / .25) inset, 0 8px 20px color-mix(in srgb, var(--blue) 28%, transparent);
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.btn:hover { background: var(--blue-h); transform: translateY(-1px); color: #fff; }
.btn:active { transform: none; }
.btn:disabled { opacity: .7; cursor: progress; transform: none; }
.btn svg { inline-size: 18px; block-size: 18px; }
.btn--ghost { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn--ghost:hover { background: var(--soft); color: var(--ink); }
.btn--sm { min-block-size: 44px; padding-inline: 1.15rem; font-size: .92rem; border-radius: 12px; box-shadow: none; }
.btn--light { background: #fff; color: var(--ink); box-shadow: 0 10px 30px rgb(0 0 0 / .18); }
.btn--light:hover { background: #f1f5ff; color: var(--ink); }
.btn--wide { inline-size: 100%; }
.link-btn { display: inline-flex; align-items: center; min-block-size: 44px; padding: 0 .3rem; border: 0; background: none; color: var(--blue); font: inherit; font-weight: 700; cursor: pointer; }

/* ---- header ----------------------------------------------------------- */
.hd {
  position: sticky; inset-block-start: 0; z-index: 50;
  background: rgb(255 255 255 / .8); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-block-end: 1px solid transparent; transition: border-color .2s ease, background .2s ease;
}
.hd.is-scrolled, .hd--solid { border-color: var(--line); background: rgb(255 255 255 / .92); }
.hd__in { display: flex; align-items: center; gap: 2rem; min-block-size: 76px; }
.logo { display: inline-flex; align-items: center; gap: .6rem; min-block-size: 44px; color: var(--ink); font-weight: 900; font-size: 1.35rem; text-decoration: none; }
.logo img { inline-size: auto; block-size: 34px; }
.nav { display: flex; gap: .15rem; margin-inline-start: .5rem; }
.nav a { display: inline-flex; align-items: center; min-block-size: 44px; padding-inline: .85rem; border-radius: 10px; color: var(--text); font-size: .95rem; font-weight: 500; text-decoration: none; }
.nav a:hover { color: var(--ink); background: var(--soft); }
.nav a[aria-current="page"] { color: var(--blue); font-weight: 700; }
.hd__acts { display: flex; align-items: center; gap: .4rem; margin-inline-start: auto; }
.hd__login { display: inline-flex; align-items: center; min-block-size: 44px; padding-inline: .9rem; color: var(--ink); font-weight: 600; text-decoration: none; border-radius: 12px; }
.hd__login:hover { background: var(--soft); }

/* ---- sections ----------------------------------------------------------- */
.sec { padding-block: clamp(80px, 11vw, 136px); }
.sec--soft { background: var(--soft); }
.sec__head { max-inline-size: 40rem; margin-inline: auto; margin-block-end: clamp(44px, 6vw, 68px); text-align: center; }
.eyebrow { display: inline-block; margin-block-end: .8rem; padding: .2rem .8rem; border-radius: 999px; background: color-mix(in srgb, var(--teal) 14%, #fff); color: var(--teal-d); font-size: .85rem; font-weight: 700; }
.sec--soft .eyebrow { background: #fff; }
.sec__head h2 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); text-wrap: balance; }
.sec__head p { margin-block-start: .9rem; color: var(--muted); font-size: 1.06rem; text-wrap: balance; }

/* inner pages: a quiet first screen with the same light as the home page */
.page-hero { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(56px, 8vw, 96px) clamp(40px, 5vw, 64px); text-align: center; }
.page-hero::before {
  content: ''; position: absolute; inset: -30% -10% 0; z-index: -1;
  background:
    radial-gradient(36% 50% at 80% 20%, color-mix(in srgb, var(--sky) 16%, transparent), transparent 70%),
    radial-gradient(30% 50% at 18% 40%, color-mix(in srgb, var(--teal) 18%, transparent), transparent 70%);
}
.page-hero h1 { font-size: clamp(2rem, 4.6vw, 3.2rem); text-wrap: balance; }
.page-hero p { max-inline-size: 38rem; margin: 1rem auto 0; color: var(--text); font-size: 1.08rem; text-wrap: balance; }

/* ---- hero (home) -------------------------------------------------------- */
.hero { position: relative; isolation: isolate; padding-block: clamp(56px, 8vw, 96px) 0; text-align: center; overflow: hidden; }
.hero::before {
  content: ''; position: absolute; inset: -20% -10% 30%; z-index: -2;
  background:
    radial-gradient(38% 42% at 78% 22%, color-mix(in srgb, var(--sky) 20%, transparent), transparent 70%),
    radial-gradient(34% 40% at 18% 38%, color-mix(in srgb, var(--teal) 22%, transparent), transparent 70%);
}
.hero::after {
  content: ''; position: absolute; inset: 0 0 35%; z-index: -1;
  background-image: radial-gradient(rgb(12 24 56 / .10) 1px, transparent 1.2px); background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(60% 70% at 50% 30%, #000, transparent 75%); mask-image: radial-gradient(60% 70% at 50% 30%, #000, transparent 75%);
}
.pill {
  display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: .55rem; padding: .4rem .6rem .4rem 1rem; border-radius: 999px;
  background: #fff; color: var(--ink); font-size: .88rem; font-weight: 600; box-shadow: var(--shadow);
}
.pill b { padding: .1rem .6rem; border-radius: 999px; background: color-mix(in srgb, var(--teal) 18%, #fff); color: var(--teal-d); font-weight: 700; }
.hero h1 { margin-block: 1.6rem 1.2rem; font-size: clamp(2.1rem, 5.6vw, 4rem); line-height: 1.35; text-wrap: balance; }
.hero h1 .grad-text { display: inline-block; padding-block-end: .1em; }
.hero__sub { max-inline-size: 36rem; margin-inline: auto; font-size: clamp(1.02rem, 1.6vw, 1.2rem); color: var(--text); text-wrap: balance; }
.start {
  display: flex; align-items: center; gap: .4rem; max-inline-size: 31rem; margin: 2.4rem auto 0; padding: .4rem;
  border-radius: 20px; background: #fff; box-shadow: var(--shadow-lg); border: 1px solid var(--line);
}
.start:focus-within { border-color: var(--blue); box-shadow: var(--shadow-lg), 0 0 0 4px color-mix(in srgb, var(--blue) 18%, transparent); }
.start input {
  flex: 1 1 auto; min-inline-size: 0; min-block-size: 52px; padding-inline: 1rem; border: 0; border-radius: 14px; background: transparent;
  color: var(--ink); font: inherit; font-size: 1.08rem; text-align: left; letter-spacing: .05em;
}
.start input::placeholder { color: #737c93; letter-spacing: 0; }
.start input:placeholder-shown { direction: rtl; text-align: right; }
.start__hint { margin-block-start: .7rem; color: var(--muted); font-size: .85rem; }
.start input:focus { outline: none; }
.checks { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.4rem; margin: 1.2rem 0 0; padding: 0; list-style: none; color: var(--muted); font-size: .9rem; }
.checks li { display: inline-flex; align-items: center; gap: .4rem; }
.checks svg { inline-size: 16px; block-size: 16px; color: var(--teal-d); }
.hero__alt { margin-block-start: .4rem; font-size: .9rem; color: var(--muted); }
.hero__alt a { display: inline-block; padding: .65rem .3rem; font-weight: 700; }

/* the drawing: a store in a browser, a phone, an order, a checkout */
.win { position: relative; border-radius: 20px; background: #fff; box-shadow: var(--shadow-lg); border: 1px solid var(--line); overflow: hidden; text-align: start; }
.win__bar { display: flex; align-items: center; gap: .45rem; padding: .75rem 1rem; background: #fafbfe; border-block-end: 1px solid var(--line); }
.win__bar i { inline-size: 10px; block-size: 10px; border-radius: 50%; background: #dfe3ec; }
.win__url { margin-inline: auto; display: inline-flex; align-items: center; gap: .4rem; padding: .25rem 1.2rem; border-radius: 9px; background: #fff; border: 1px solid var(--line); color: var(--muted); font-size: .78rem; direction: ltr; }
.win__url svg { inline-size: 12px; block-size: 12px; color: var(--teal-d); }
/* the drawn search page: an illustration, never a copy of a real site's address bar */
.win__url--fa { direction: rtl; }
.win__url--fa svg { color: var(--muted); }
.sf { padding: 18px 24px 28px; }
.sf__hd { display: flex; align-items: center; gap: 22px; font-size: .85rem; color: var(--muted); }
.sf__hd strong { color: var(--ink); font-size: 1rem; }
.sf__hd span:last-child { margin-inline-start: auto; display: grid; place-items: center; inline-size: 34px; block-size: 34px; border-radius: 50%; background: var(--soft); color: var(--ink); }
.sf__hd span:last-child svg { inline-size: 18px; block-size: 18px; }
.sf__hero { display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: 20px; margin-block: 18px 22px; padding: 26px 28px; border-radius: 16px; background: linear-gradient(120deg, #eef4ff, #e8fbf7); }
.sf__hero small { color: var(--teal-d); font-weight: 700; font-size: .78rem; }
.sf__hero b { display: block; margin-block: .2rem .7rem; color: var(--ink); font-size: 1.35rem; font-weight: 800; line-height: 1.5; }
.sf__hero em { display: inline-flex; padding: .4rem 1rem; border-radius: 10px; background: var(--ink); color: #fff; font-style: normal; font-size: .8rem; font-weight: 700; }
.sf__art { justify-self: end; inline-size: 170px; block-size: 124px; position: relative; border-radius: 16px; overflow: hidden; box-shadow: 0 14px 30px rgb(12 24 56 / .14); }
.sf__art img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; animation: sf-zoom 14s ease-in-out infinite alternate; }
@keyframes sf-zoom { from { transform: scale(1); } to { transform: scale(1.08); } }
.sf__art i { position: absolute; border-radius: 16px; }
.sf__art i:nth-child(1) { inset: 10px 0 0 40px; background: linear-gradient(160deg, #0a7cff, #0b57e3); }
.sf__art i:nth-child(2) { inset: 36px 60px 0 0; background: linear-gradient(160deg, #3ce3cf, #10b8a6); border-radius: 50%; }
.sf__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.pc { font-size: .8rem; }
.pc__img { position: relative; aspect-ratio: 1; border-radius: 14px; overflow: hidden; margin-block-end: 10px; }
.pc__img::after { content: ''; position: absolute; inset: 28% 28% 22%; border-radius: 14px 14px 40% 40%; background: rgb(255 255 255 / .55); }
.pc:nth-child(1) .pc__img { background: linear-gradient(150deg, #ffe1cf, #ffc3a6); }
.pc:nth-child(2) .pc__img { background: linear-gradient(150deg, #dde8ff, #bcd2ff); }
.pc:nth-child(2) .pc__img::after { border-radius: 50%; inset: 26%; }
.pc:nth-child(3) .pc__img { background: linear-gradient(150deg, #d9f7f0, #b2eee1); }
.pc:nth-child(3) .pc__img::after { border-radius: 10px; inset: 30% 34% 18%; }
.pc:nth-child(4) .pc__img { background: linear-gradient(150deg, #f4e4fb, #e5c9f5); }
.pc:nth-child(4) .pc__img::after { border-radius: 50% 50% 12px 12px; inset: 24% 30% 22%; }
.pc__img--photo { background: #f3efe8; }
.pc__img--photo::after { content: none; }
.pc__img--photo img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.pc b { display: block; color: var(--ink); font-weight: 700; }
.pc span { color: var(--muted); }

/* steps */
.steps { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; list-style: none; margin: 0; padding: 0; counter-reset: s; }
.steps::before { content: ''; position: absolute; inset-inline: 16%; inset-block-start: 31px; block-size: 2px; background: repeating-linear-gradient(to left, var(--line) 0 8px, transparent 8px 16px); }
.steps li { position: relative; text-align: center; padding-inline: 12px; }
.steps li::before {
  counter-increment: s; content: counter(s, persian);
  position: relative; display: grid; place-items: center; inline-size: 64px; block-size: 64px; margin: 0 auto 22px; border-radius: 20px;
  background: #fff; color: var(--blue); font-size: 1.6rem; font-weight: 900; box-shadow: var(--shadow); border: 1px solid var(--line);
}
.steps li:last-child::before { background: var(--grad); color: #fff; border: 0; }
.steps h3 { font-size: 1.15rem; margin-block-end: .4rem; }
.steps p { color: var(--muted); font-size: .96rem; max-inline-size: 18rem; margin-inline: auto; }

/* features */
.feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feat { display: flex; flex-direction: column; padding: 14px 14px 26px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); transition: box-shadow .2s ease, transform .2s ease; }
.feat:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.feat__art { display: flex; flex-direction: column; justify-content: center; gap: 8px; min-block-size: 168px; padding: 18px; border-radius: 14px; background: var(--soft); margin-block-end: 22px; font-size: .8rem; color: var(--text); }
.feat h3 { font-size: 1.12rem; margin-block-end: .4rem; padding-inline: 12px; }
.feat p { color: var(--muted); font-size: .95rem; padding-inline: 12px; }
.row { display: flex; align-items: center; gap: .6rem; padding: .55rem .8rem; border-radius: 11px; background: #fff; box-shadow: 0 1px 2px rgb(12 24 56 / .05); }
.row b { color: var(--ink); font-weight: 600; }
.row .tag { margin-inline-start: auto; padding: .1rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 700; white-space: nowrap; }
.tag--blue { background: color-mix(in srgb, var(--blue) 10%, #fff); color: var(--blue); }
.tag--teal { background: color-mix(in srgb, var(--teal) 18%, #fff); color: var(--teal-d); }
.tag--amber { background: #fff4df; color: #8a5300; }
.radio { inline-size: 16px; block-size: 16px; flex: none; border-radius: 50%; border: 2px solid #c9d0de; }
.radio.on { border: 5px solid var(--blue); }
.coupon { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.2rem; border-radius: 14px; background: var(--grad); color: #fff; }
.coupon::before, .coupon::after { content: ''; position: absolute; inset-block-start: 50%; inline-size: 18px; block-size: 18px; margin-block-start: -9px; border-radius: 50%; background: var(--soft); }
.coupon::before { inset-inline-start: -9px; }
.coupon::after { inset-inline-end: -9px; }
.coupon b { font-size: 1.1rem; letter-spacing: .08em; direction: ltr; }
.coupon span { font-weight: 800; font-size: 1.05rem; }
.serp { padding: .9rem 1rem; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgb(12 24 56 / .05); }
.serp small { color: var(--teal-d); direction: ltr; display: block; text-align: start; }
.serp b { display: block; color: #1a3fb0; font-size: .92rem; font-weight: 600; }
.serp span { color: var(--muted); font-size: .76rem; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips span { padding: .25rem .7rem; border-radius: 999px; background: #fff; color: var(--ink); font-weight: 600; font-size: .76rem; box-shadow: 0 1px 2px rgb(12 24 56 / .05); }
.bio { display: flex; flex-direction: column; gap: 6px; align-items: stretch; max-inline-size: 190px; margin-inline: auto; inline-size: 100%; }
.bio em { display: grid; place-items: center; inline-size: 40px; block-size: 40px; margin: 0 auto 4px; border-radius: 50%; background: var(--grad); }
.bio span { padding: .4rem; border-radius: 10px; background: #fff; text-align: center; color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgb(12 24 56 / .05); }
.ai { display: inline-flex; align-self: center; align-items: center; gap: .35rem; margin-block-start: 4px; padding: .3rem .8rem; border-radius: 999px; background: #fff; color: var(--blue); font-weight: 700; box-shadow: 0 1px 2px rgb(12 24 56 / .05); }
.ai svg { inline-size: 14px; block-size: 14px; }

/* themes: their colours, and a live demo when one exists */
.pals { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.pal { position: relative; display: flex; align-items: center; gap: .8rem; min-block-size: 64px; padding: .8rem .9rem; border-radius: 16px; background: #fff; border: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
a.pal:hover { border-color: color-mix(in srgb, var(--blue) 35%, var(--line)); box-shadow: var(--shadow); transform: translateY(-2px); color: var(--ink); }
.pal__dots { display: flex; flex: none; }
.pal__dots i { inline-size: 26px; block-size: 26px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgb(12 24 56 / .08); }
.pal__dots i + i { margin-inline-start: -9px; }
.pal b { display: block; font-weight: 700; font-size: .95rem; line-height: 1.5; }
.pal small { display: inline-flex; align-items: center; gap: .3rem; color: var(--blue); font-size: .8rem; font-weight: 700; white-space: nowrap; }
.pal small svg { inline-size: 12px; block-size: 12px; }

/* price teaser */
.price { position: relative; max-inline-size: 46rem; margin-inline: auto; padding: clamp(36px, 5vw, 56px) 24px; border-radius: 28px; text-align: center; background: #fff; box-shadow: var(--shadow); }
.price::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: var(--grad); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.price h2 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); }
.price__from { margin-block-start: 1.2rem; color: var(--muted); }
.price__from strong { color: var(--ink); font-size: clamp(1.9rem, 4vw, 2.7rem); font-weight: 900; margin-inline: .35rem; }
.price__trial { max-inline-size: 30rem; margin: .5rem auto 0; color: var(--text); text-wrap: balance; }
.price__acts { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-block-start: 1.8rem; }

/* faq */
.faq { max-inline-size: 48rem; margin-inline: auto; display: grid; gap: 12px; }
.faq details { border-radius: 18px; background: #fff; border: 1px solid var(--line); transition: box-shadow .2s ease; }
.faq details[open] { box-shadow: var(--shadow); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-block-size: 64px; padding: .8rem 1.4rem;
  color: var(--ink); font-weight: 700; font-size: 1.03rem; cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { position: relative; flex: none; inline-size: 30px; block-size: 30px; border-radius: 50%; background: var(--soft); }
.faq summary i::before, .faq summary i::after { content: ''; position: absolute; inset: 0; margin: auto; inline-size: 12px; block-size: 2px; border-radius: 2px; background: var(--ink); transition: transform .2s ease; }
.faq summary i::after { transform: rotate(90deg); }
.faq details[open] summary i::after { transform: rotate(0); }
.faq details p { padding: 0 1.4rem 1.3rem; color: var(--text); }

/* last call */
.end { position: relative; isolation: isolate; overflow: hidden; border-radius: 32px; padding: clamp(48px, 8vw, 96px) 24px; background: var(--grad); color: rgb(255 255 255 / .92); text-align: center; }
.end::before { content: ''; position: absolute; inset-inline-start: -4%; inset-block-end: -30%; inline-size: 34%; aspect-ratio: 1; z-index: -1; background: url(/images/logo-mark.webp) center / contain no-repeat; opacity: .14; transform: rotate(-12deg); }
.end h2 { color: #fff; font-size: clamp(1.7rem, 4vw, 2.8rem); text-wrap: balance; }
.end p { margin-block: .9rem 2.1rem; font-size: 1.1rem; font-weight: 600; }

/* ---- pricing page: plan cards -------------------------------------------
   Each card is four rows — name, price, button, list — on a SUBGRID, so
   the prices, the buttons and the lists of all cards sit on the same lines
   whatever one card's text does. The button is right under the price (the
   decision point), the list underneath explains it. */
.plans { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 0 22px; align-items: stretch; }
.plan {
  position: relative; display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0;
  padding: 30px 26px 28px; border-radius: 24px; background: #fff; border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgb(12 24 56 / .04); transition: box-shadow .2s ease, transform .2s ease;
}
.plan:hover { box-shadow: var(--shadow); }
.plan--pick { border-color: transparent; box-shadow: var(--shadow-lg); }
.plan--pick:hover { box-shadow: var(--shadow-lg); }
.plan--pick::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 2px; background: var(--grad); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
@media (min-width: 981px) { .plan--pick { transform: translateY(-10px); } }
.plan__badge {
  position: absolute; inset-block-start: -14px; inset-inline-start: 50%; translate: 50% 0;
  padding: .2rem .95rem; border-radius: 999px; background: var(--grad); color: #fff; font-size: .8rem; font-weight: 800;
  box-shadow: 0 6px 16px rgb(11 87 227 / .25); white-space: nowrap;
}
.plan__head { display: grid; align-content: start; gap: .25rem; }
.plan__name { font-size: 1.3rem; }
.plan--pick .plan__name { color: var(--blue); }
.plan__for { color: var(--muted); font-size: .9rem; line-height: 1.8; }
.plan__cta { padding-block: .2rem 1.4rem; }
.plan__body { border-block-start: 1px solid var(--line); padding-block-start: 1.3rem; }
.plan__inc { margin-block-end: .7rem; color: var(--ink); font-size: .85rem; font-weight: 800; }
.plan__list { display: grid; gap: .7rem; margin: 0; padding: 0; list-style: none; font-size: .95rem; }
.plan__list li { display: flex; align-items: flex-start; gap: .6rem; line-height: 1.7; }
.plan__list b { color: var(--ink); font-weight: 800; }
.plan__ic { flex: none; display: grid; place-items: center; inline-size: 20px; block-size: 20px; margin-block-start: .15rem; border-radius: 50%; background: color-mix(in srgb, var(--teal) 18%, #fff); color: var(--teal-d); }
.plan__ic svg { inline-size: 12px; block-size: 12px; }
.plan__ic--off { background: #f1f3f8; color: #a3abbd; }
.plan__list li.is-off { color: #98a1b3; }
.plans__note { margin-block-start: 1.6rem; text-align: center; color: var(--muted); font-size: .9rem; }

/* ---- pricing page: the comparison table -----------------------------------
   It FITS the width (fixed layout, no minimum), so nothing is cut off and
   nothing scrolls sideways; the wrapper only clips (overflow: clip is not a
   scroll box), so the head row can stay pinned under the site header while
   the long list scrolls past. */
.cmp-wrap { overflow: clip; border-radius: 22px; border: 1px solid var(--line); background: #fff; box-shadow: 0 1px 2px rgb(12 24 56 / .04); }
.cmp { inline-size: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: .95rem; }
.cmp col.cmp__label { inline-size: 38%; }
.cmp th, .cmp td { padding: .8rem 1rem; text-align: center; vertical-align: middle; border-block-end: 1px solid var(--line); }
.cmp thead th {
  position: sticky; inset-block-start: 76px; z-index: 3; padding-block: 1.1rem 1rem;
  background: #fff; border-block-end: 1px solid var(--line); vertical-align: bottom;
  box-shadow: 0 6px 12px -10px rgb(12 24 56 / .25);
}
.cmp thead th.is-pick { background: color-mix(in srgb, var(--blue) 5%, #fff); }
.cmp__corner { text-align: start !important; color: var(--muted); font-size: .9rem; font-weight: 700; }
.cmp__pick { display: inline-block; margin-block-end: .35rem; padding: .05rem .65rem; border-radius: 999px; background: var(--grad); color: #fff; font-size: .72rem; font-weight: 800; }
.cmp__name { display: block; color: var(--ink); font-size: 1.05rem; font-weight: 900; }
.cmp thead th.is-pick .cmp__name { color: var(--blue); }
.cmp__price { display: block; margin-block-start: .1rem; color: var(--muted); font-size: .8rem; font-weight: 600; }
.cmp__cta { margin-block-start: .7rem; inline-size: 100%; min-block-size: 40px; font-size: .85rem; }
.cmp__cta.btn--ghost { box-shadow: inset 0 0 0 1.5px var(--line); }
.cmp th[scope="row"] { text-align: start; font-weight: 500; color: var(--text); line-height: 1.75; }
.cmp tbody tr:not(.cmp__group):hover > * { background: #f8faff; }
.cmp col.is-pick { background: color-mix(in srgb, var(--blue) 3.5%, transparent); }
.cmp .cmp__group th {
  padding-block: 1.4rem .6rem; background: var(--soft); color: var(--ink); font-size: .95rem; font-weight: 900; text-align: start;
  border-block-end: 1px solid var(--line);
}
.cmp td b { color: var(--ink); font-weight: 800; }
.cmp .yes { display: inline-grid; place-items: center; inline-size: 24px; block-size: 24px; border-radius: 50%; background: color-mix(in srgb, var(--teal) 18%, #fff); color: var(--teal-d); }
.cmp .yes svg { inline-size: 14px; block-size: 14px; }
.cmp .no { display: inline-block; inline-size: 14px; block-size: 2px; border-radius: 2px; background: #c3c9d6; font-size: 0; vertical-align: middle; }
.cmp tr:last-child th, .cmp tr:last-child td { border-block-end: 0; }
.cmp s, .cmp .was { display: block; color: #98a1b3; font-size: .8rem; }

/* ---- terms page ------------------------------------------------------- */
.doc { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.toc { position: sticky; inset-block-start: 96px; display: grid; gap: .15rem; }
.toc a { display: flex; align-items: center; min-block-size: 44px; padding-inline: .9rem; border-radius: 10px; color: var(--text); text-decoration: none; font-size: .95rem; border-inline-start: 2px solid var(--line); border-radius: 0 10px 10px 0; }
.toc a:hover { background: var(--soft); color: var(--ink); }
.toc a.is-on { border-color: var(--blue); color: var(--blue); font-weight: 700; background: color-mix(in srgb, var(--blue) 6%, #fff); }
.doc__body { display: grid; gap: 22px; max-inline-size: 46rem; }
.doc__sec { scroll-margin-block-start: 96px; padding: clamp(24px, 4vw, 36px); border-radius: 22px; background: #fff; border: 1px solid var(--line); }
.doc__sec h2 { display: flex; align-items: center; gap: .7rem; margin-block-end: 1rem; font-size: 1.35rem; }
.doc__sec h2 span { display: grid; place-items: center; flex: none; inline-size: 40px; block-size: 40px; border-radius: 12px; background: color-mix(in srgb, var(--teal) 14%, #fff); color: var(--teal-d); }
.doc__sec h2 span svg { inline-size: 20px; block-size: 20px; }
.doc__sec h3 { margin-block: 1.2rem .4rem; font-size: 1.05rem; }
.doc__sec p + p { margin-block-start: .7rem; }
.doc__note { margin-block-start: 1rem; padding: .9rem 1.1rem; border-radius: 14px; background: var(--soft); color: var(--muted); font-size: .92rem; }
.timeline { position: relative; display: grid; gap: 1rem; margin: 1.2rem 0; padding: 0; list-style: none; }
.timeline li { position: relative; padding-inline-start: 2.2rem; }
.timeline li::before { content: ''; position: absolute; inset-inline-start: 6px; inset-block-start: .55rem; inline-size: 12px; block-size: 12px; border-radius: 50%; background: #fff; border: 3px solid var(--blue); }
.timeline li:not(:last-child)::after { content: ''; position: absolute; inset-inline-start: 11px; inset-block: 1.4rem -1.2rem; inline-size: 2px; background: var(--line); }
.timeline li:last-child::before { border-color: var(--red); }
.timeline b { color: var(--ink); }

/* ---- footer ----------------------------------------------------------- */
.ft { padding-block: 56px 28px; background: var(--soft); color: var(--muted); font-size: .92rem; border-block-start: 1px solid var(--line); }
.ft__grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr) auto; gap: 28px; }
/* the trust seal: a white tile so the badge reads on the soft footer; a fixed box so nothing moves when it loads */
.ft__trust { align-items: flex-start; }
.ft__seal { display: inline-grid; place-items: center; inline-size: 126px; block-size: 126px; padding: 8px; border-radius: 16px; background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 2px rgb(12 24 56 / .04); transition: border-color .2s, box-shadow .2s; }
.ft__seal:hover { border-color: var(--blue); box-shadow: var(--shadow); }
.ft__seal img { display: block; inline-size: 110px; block-size: 110px; object-fit: contain; }
.ft__brand p { max-inline-size: 22rem; margin-block-start: .8rem; line-height: 2; }
.ft__logo img { inline-size: auto; block-size: 72px; }
.ft__col { display: flex; flex-direction: column; }
.ft__title { margin-block-end: .4rem; color: var(--ink); font-weight: 800; font-size: .95rem; }
.ft__col a { display: inline-flex; align-items: center; min-block-size: 44px; color: var(--text); text-decoration: none; }
.ft__col a:hover { color: var(--blue); }
.ft__copy { margin-block-start: 36px; padding-block-start: 22px; border-block-start: 1px solid var(--line); font-size: .85rem; text-align: center; }

/* ---- the phone's menu ----------------------------------------------------- */
.hd__menu { display: none; place-items: center; inline-size: 44px; block-size: 44px; border: 0; border-radius: 12px; background: transparent; color: var(--ink); cursor: pointer; }
.hd__menu:hover { background: var(--soft); }
.hd__menu svg { inline-size: 22px; block-size: 22px; }
.mnav { border-block-start: 1px solid var(--line); background: #fff; box-shadow: var(--shadow); }
.mnav .wrap { display: grid; gap: .1rem; padding-block: .6rem 1rem; }
.mnav a:not(.btn) { display: flex; align-items: center; min-block-size: 48px; padding-inline: .6rem; border-radius: 10px; color: var(--ink); font-weight: 600; text-decoration: none; }
.mnav a:not(.btn):hover, .mnav a[aria-current="page"] { background: var(--soft); color: var(--blue); }
.mnav .btn { margin-block-start: .6rem; }

/* ---- plan price block (pricing cards + home preview) --------------------- */
.plan__price { display: grid; align-content: start; gap: .15rem; padding-block: 1.2rem 1.3rem; }
.plan__price p { margin: 0; }
.plan__was { display: flex; align-items: center; gap: .5rem; min-block-size: 1.7rem; color: #8a93a8; font-size: .9rem; }
.plan__was.is-empty { visibility: hidden; }
.plan__was s { text-decoration-thickness: 1.5px; text-decoration-color: #c0392b; }
.plan__off { padding: .05rem .6rem; border-radius: 999px; background: #fdecec; color: #b42318; font-size: .76rem; font-weight: 800; }
.plan__now { display: flex; align-items: flex-end; gap: .5rem; flex-wrap: wrap; }
.plan__now strong { color: var(--ink); font-size: clamp(1.9rem, 2.6vw, 2.35rem); font-weight: 900; line-height: 1.25; letter-spacing: -.01em; }
.plan__unit { display: grid; color: var(--muted); font-size: .85rem; font-weight: 700; line-height: 1.35; padding-block-end: .2rem; }
.plan__unit small { color: #8a93a8; font-size: .75rem; font-weight: 600; }
.plan__month { margin-block-start: .25rem !important; color: var(--teal-d); font-size: .86rem; font-weight: 700; }
.plan__until { display: inline-flex; align-items: center; gap: .35rem; justify-self: start; margin-block-start: .55rem !important; padding: .2rem .7rem; border-radius: 999px; background: #fff4df; color: #7a4a00; font-size: .76rem; font-weight: 700; }
.plan__until svg { inline-size: 14px; block-size: 14px; flex: none; }

/* ---- the one dark band: themes ------------------------------------------- */
.sec--ink { position: relative; isolation: isolate; overflow: hidden; background: var(--ink); color: #c9d3e8; }
.sec--ink::before { content: ''; position: absolute; inset: -30% auto auto -10%; inline-size: 55%; aspect-ratio: 1; z-index: -1; background: radial-gradient(closest-side, color-mix(in srgb, var(--sky) 35%, transparent), transparent); }
.sec--ink::after { content: ''; position: absolute; inset: auto -10% -40% auto; inline-size: 45%; aspect-ratio: 1; z-index: -1; background: radial-gradient(closest-side, color-mix(in srgb, var(--teal) 28%, transparent), transparent); }
.sec--ink .sec__head h2 { color: #fff; }
.sec--ink .sec__head p { color: #b9c4dc; }
.sec--ink .eyebrow { background: rgb(255 255 255 / .1); color: #9ff3e7; }
.sec--ink .pal { background: rgb(255 255 255 / .06); border-color: rgb(255 255 255 / .12); color: #fff; }
.sec--ink a.pal:hover { background: rgb(255 255 255 / .1); border-color: rgb(255 255 255 / .28); color: #fff; box-shadow: none; }
.sec--ink .pal small { color: #8fd8ff; }
.sec--ink .pal__dots i { border-color: var(--ink); box-shadow: 0 0 0 1px rgb(255 255 255 / .15); }
.sec--ink :focus-visible { outline-color: #8fd8ff; }

/* ---- home: the plan preview ------------------------------------------------ */
.plans--home .plan { padding: 28px 22px 24px; }
.plans__more { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .5rem 1.2rem; margin-block-start: 1.6rem; color: var(--muted); }
.plans__more a { display: inline-flex; align-items: center; gap: .35rem; min-block-size: 44px; font-weight: 700; white-space: nowrap; }
.plans__more svg { inline-size: 18px; block-size: 18px; flex: none; }
.plans__more span { text-align: center; }

/* ---- the signup modal ---------------------------------------------------- */
.modal { position: fixed; inset: 0; z-index: 90; display: none; align-items: center; justify-content: center; padding: 20px; }
.modal.is-open { display: flex; }
.modal__scrim { position: absolute; inset: 0; background: rgb(12 24 56 / .45); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: m-fade .2s ease; }
.modal__box {
  position: relative; inline-size: min(100%, 440px); max-block-size: calc(100vh - 40px); overflow-y: auto;
  padding: 34px 30px 28px; border-radius: 26px; background: #fff; box-shadow: var(--shadow-lg); text-align: start;
  animation: m-rise .24s cubic-bezier(.2, .8, .3, 1);
}
.modal__box--wide { inline-size: min(100%, 560px); }
.modal__x { position: absolute; inset-block-start: 12px; inset-inline-end: 12px; display: grid; place-items: center; inline-size: 44px; block-size: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; text-decoration: none; }
.modal__x:hover { background: var(--soft); color: var(--ink); }
.modal__x svg { inline-size: 20px; block-size: 20px; }
.modal__mark { inline-size: auto; block-size: 40px; margin-block-end: 14px; }
.modal h2 { font-size: 1.4rem; }
.modal__lead { margin-block: .4rem 1.4rem; color: var(--muted); font-size: .95rem; }
.modal__lead bdi { color: var(--ink); font-weight: 700; }
.field { display: grid; gap: .35rem; margin-block-end: .9rem; }
.field > span { color: var(--ink); font-weight: 600; font-size: .9rem; }
.field input {
  inline-size: 100%; min-block-size: 50px; padding-inline: 1rem; border: 1.5px solid var(--line); border-radius: 13px;
  background: #fff; color: var(--ink); font: inherit; font-size: 1rem;
}
.field input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 14%, transparent); }
.field input[dir="ltr"] { text-align: left; }
.field input.is-code { text-align: center; letter-spacing: .5em; font-size: 1.3rem; font-weight: 700; }
.field small { color: var(--muted); font-size: .8rem; }
.field-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .8rem; }
.slug { display: flex; align-items: stretch; direction: ltr; border: 1.5px solid var(--line); border-radius: 13px; overflow: hidden; }
.slug:focus-within { border-color: var(--blue); box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 14%, transparent); }
.slug input { border: 0; border-radius: 0; min-inline-size: 0; flex: 1; }
.slug input:focus { box-shadow: none; }
.slug span { display: flex; align-items: center; padding-inline: .8rem; background: var(--soft); color: var(--muted); font-size: .88rem; white-space: nowrap; }
.pw { position: relative; display: block; }
/* The password box is dir="ltr" (a password is Latin), so its dots start at
   the LEFT — which in this RTL page is inline-end, where the «نمایش» button
   sat: it covered the first characters. Physical sides on purpose: the
   button lives on the right, the input keeps that side clear. */
.pw input { padding-right: 4.4rem; }
.pw button { position: absolute; inset-block: 0; right: 3px; left: auto; margin-block: auto; block-size: 44px; padding-inline: .7rem; border: 0; border-radius: 10px; background: transparent; color: var(--blue); font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; }
.pw button:hover { background: var(--soft); }
/* «موضوع فروشگاه» in the signup modal: the box + chips that fill it. */
.topic__chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-block-start: .55rem; }
.topic__chip { min-block-size: 36px; padding-inline: .85rem; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; color: var(--text); font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; transition: all .15s ease; }
.topic__chip:hover { border-color: var(--blue); color: var(--blue); }
.topic__chip[aria-pressed="true"] { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 8%, #fff); color: var(--blue); }
.topic__chip:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 30%, transparent); outline: 0; }
.packs { display: flex; flex-wrap: wrap; gap: .45rem; margin: .2rem 0 1.2rem; padding: 0; border: 0; }
.packs legend { margin-block-end: .5rem; padding: 0; color: var(--ink); font-weight: 600; font-size: .9rem; }
.packs label { position: relative; }
.packs input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.packs span { display: inline-flex; align-items: center; min-block-size: 40px; padding-inline: .95rem; border-radius: 999px; border: 1.5px solid var(--line); color: var(--text); font-size: .88rem; font-weight: 600; transition: all .15s ease; }
.packs input:checked + span { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 8%, #fff); color: var(--blue); }
.packs input:focus-visible + span { box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 30%, transparent); }
.alert { margin-block-end: 1rem; padding: .75rem 1rem; border-radius: 12px; font-size: .92rem; }
.alert--bad { background: #fdecec; color: #9b1c1c; }
.alert--ok { background: #e6f7f2; color: #0a5c50; }
.modal__alt { margin-block-start: .9rem; text-align: center; color: var(--muted); font-size: .9rem; }
.modal__alt a, .modal__fine a { display: inline-block; padding-block: .7rem; font-weight: 600; }
.modal__sep { display: flex; align-items: center; gap: .8rem; margin-block: 1.1rem; color: var(--muted); font-size: .85rem; }
.modal__sep::before, .modal__sep::after { content: ''; flex: 1; block-size: 1px; background: var(--line); }
.modal__fine { margin-block-start: 1rem; color: var(--muted); font-size: .8rem; text-align: center; }
@keyframes m-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes m-rise { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }

.dock { display: none; }

/* ---- Google section: a search that ends on the merchant's shop ---------- */
/* SEO: the promise (sec__head), then the proof card beside the drawn
   Google page, then six tiles of what the shop does for it. */
.seo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.seo__proof { position: relative; padding: clamp(24px, 3vw, 36px); border-radius: 24px; background: #fff; border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgb(12 24 56 / .04), 0 24px 48px -28px rgb(12 24 56 / .22); }
.seo__claim { margin: 0; color: var(--ink); font-size: clamp(1.3rem, 2.3vw, 1.7rem); font-weight: 800; line-height: 1.6; text-wrap: balance; }
.seo__claim b { font-weight: 900; }
.seo__sub { margin: 1.1rem 0 .7rem; color: var(--muted); font-size: .92rem; }
.seo__kw { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.seo__kw li { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-block-size: 46px; padding: .4rem .5rem .4rem .75rem;
  border-radius: 12px; background: var(--soft); border: 1px solid var(--line); }
.seo__kw-q { display: inline-flex; align-items: center; gap: .45rem; min-inline-size: 0; color: var(--ink); font-size: .9rem; font-weight: 700; white-space: nowrap; }
.seo__kw-q svg { flex: none; inline-size: 15px; block-size: 15px; color: var(--muted); }
.seo__kw-on { display: inline-flex; align-items: center; gap: .2rem; flex: none; padding: .15rem .5rem; border-radius: 999px;
  background: color-mix(in srgb, var(--teal) 14%, #fff); color: var(--teal-d); font-size: .7rem; font-weight: 800; white-space: nowrap; }
.seo__kw-on svg { inline-size: 12px; block-size: 12px; }
.seo__kw .seo__kw-more { justify-content: center; background: none; border-style: dashed; color: var(--muted); font-size: .86rem; font-weight: 600; }
.seo__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; list-style: none; }
.seo__tiles li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .9rem; align-items: start; padding: 20px; border-radius: 18px;
  background: var(--soft); transition: background .2s ease, box-shadow .2s ease; }
.seo__tiles li:hover { background: #fff; box-shadow: 0 0 0 1px var(--line), 0 14px 30px -18px rgb(12 24 56 / .25); }
.seo__ico { grid-row: span 2; display: grid; place-items: center; inline-size: 44px; block-size: 44px; border-radius: 13px; background: #fff;
  color: var(--blue); box-shadow: 0 0 0 1px var(--line); }
.seo__ico svg { inline-size: 22px; block-size: 22px; }
.seo__tiles b { color: var(--ink); font-size: 1rem; line-height: 1.6; }
.seo__tiles p { margin: .2rem 0 0; color: var(--muted); font-size: .88rem; line-height: 1.85; }
.gwin { position: relative; isolation: isolate; }
.gwin::before { content: ''; position: absolute; inset: -12% -8%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--sky) 16%, transparent), transparent); }
.gs { padding: 18px 20px 22px; }
.gs__bar { display: flex; align-items: center; gap: .6rem; padding: .55rem .6rem .55rem 1rem; border-radius: 999px;
  border: 1px solid #dfe3ec; box-shadow: 0 2px 8px rgb(12 24 56 / .08); background: #fff; }
.gs__q { flex: 1; min-inline-size: 0; display: flex; align-items: center; color: var(--ink); font-weight: 600; font-size: .95rem; white-space: nowrap; overflow: hidden; }
.gs__caret { inline-size: 2px; block-size: 1.15em; margin-inline-start: 2px; background: var(--blue); opacity: 0; }
.gs__go { display: grid; place-items: center; flex: none; inline-size: 36px; block-size: 36px; border-radius: 50%; background: var(--soft); color: var(--blue); transition: transform .2s ease, background .2s ease; }
.gs__go svg { inline-size: 18px; block-size: 18px; }
.gs__tabs { display: flex; gap: 1.1rem; margin-block-start: .9rem; padding-inline: .4rem; border-block-end: 1px solid var(--line); font-size: .8rem; color: var(--muted); }
.gs__tabs span { padding-block-end: .45rem; }
.gs__tabs .on { color: var(--blue); font-weight: 700; box-shadow: inset 0 -2px 0 var(--blue); }
.gs__load { block-size: 3px; margin-block: 0 .6rem; border-radius: 3px; background: linear-gradient(90deg, transparent, var(--blue), transparent) no-repeat; background-size: 40% 100%; opacity: 0; }
.gs__res { display: grid; gap: .7rem; margin: 0; padding: 0; list-style: none; }
.r { position: relative; padding: .85rem .95rem; border-radius: 14px; transition: opacity .35s ease, transform .35s ease; }
.r--me { background: #fff; box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--teal) 70%, transparent), 0 12px 30px rgb(16 208 187 / .16); }
.r__badge { position: absolute; inset-block-start: -11px; inset-inline-end: 14px; padding: .05rem .65rem; border-radius: 999px;
  background: var(--grad); color: #fff; font-size: .72rem; font-weight: 800; box-shadow: 0 6px 14px rgb(11 87 227 / .25); }
.r__site { display: flex; align-items: center; gap: .55rem; }
.r__fav { display: grid; place-items: center; flex: none; inline-size: 28px; block-size: 28px; border-radius: 50%;
  background: color-mix(in srgb, var(--blue) 10%, #fff); color: var(--blue); font-style: normal; font-weight: 800; font-size: .8rem; }
.r__site span { display: grid; line-height: 1.45; }
.r__site b { color: var(--ink); font-size: .82rem; }
.r__site small { color: var(--muted); font-size: .72rem; direction: ltr; text-align: end; unicode-bidi: plaintext; }
.r__title { display: block; margin-block-start: .4rem; color: #1a3fb0; font-size: 1rem; font-weight: 600; line-height: 1.6; }
.r__desc { margin-block-start: .2rem; color: var(--muted); font-size: .8rem; line-height: 1.8; }
.r__rich { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .7rem; margin-block-start: .35rem; font-size: .76rem; color: var(--muted); }
.r__stars { color: #f5a524; letter-spacing: 1px; }
.r__ok { color: var(--teal-d); font-weight: 700; }
.r--x { display: grid; gap: .45rem; padding-block: .9rem; }
.r--x i { block-size: 9px; border-radius: 6px; background: #edf0f6; }
.r--x i:nth-child(1) { inline-size: 34%; }
.r--x i:nth-child(2) { inline-size: 78%; block-size: 12px; background: #e3e8f5; }
.r--x i:nth-child(3) { inline-size: 92%; }
.gs__cursor { position: absolute; inset-block-start: 100%; inset-inline-start: 20%; inline-size: 24px; block-size: 24px; opacity: 0; pointer-events: none; }

/* The scenes (set by the script; with none set, the finished picture shows). */
.gwin[data-state="typing"] .gs__caret { opacity: 1; animation: gs-blink .9s steps(1) infinite; }
/* While typing, the page waits: only the grey lines; the result arrives after the search. */
.gwin[data-state="typing"] .r--me { opacity: 0; transform: translateY(10px); }
.gwin[data-state="typing"] .r__badge { opacity: 0; }
.gwin[data-state="loading"] .r { opacity: 0; transform: translateY(10px); }
.gwin[data-state="loading"] .gs__load { opacity: 1; animation: gs-load .75s ease-in-out infinite; }
.gwin[data-state="loading"] .gs__go { transform: scale(.88); background: color-mix(in srgb, var(--blue) 14%, #fff); }
.gwin[data-state="shown"] .r, .gwin[data-state="click"] .r { animation: gs-in .45s ease both; }
.gwin[data-state="shown"] .r:nth-child(2), .gwin[data-state="click"] .r:nth-child(2) { animation-delay: .12s; }
.gwin[data-state="shown"] .r:nth-child(3), .gwin[data-state="click"] .r:nth-child(3) { animation-delay: .24s; }
.gwin[data-state="shown"] .r__badge { animation: gs-pop .5s .5s cubic-bezier(.3, 1.6, .5, 1) both; }
.gwin[data-state="click"] .r__badge { animation: none; }
.gwin[data-state="click"] .gs__cursor { animation: gs-cursor 1.1s ease forwards; }
.gwin[data-state="click"] .r__title { animation: gs-hit .3s .95s ease forwards; }
.gwin[data-state="click"] .r--me { animation: gs-press .3s .95s ease; }
@keyframes gs-blink { 50% { opacity: 0; } }
@keyframes gs-load { from { background-position: -40% 0; } to { background-position: 140% 0; } }
@keyframes gs-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes gs-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes gs-cursor { 0% { opacity: 0; inset-block-start: 120%; inset-inline-start: 10%; } 25% { opacity: 1; } 100% { opacity: 1; inset-block-start: 3.9rem; inset-inline-start: 46%; } }
@keyframes gs-hit { to { text-decoration: underline; color: #0b2f8f; } }
@keyframes gs-press { 50% { transform: scale(.985); } }

/* ---- theme gallery: each theme as its real demo shop --------------------
   The desktop shot is the top 2400 px of the demo's home page at 1280 wide
   (ratio 1.875); the window shows its top, and on hover it slides to the
   bottom — the visitor sees the whole page. -65% = (1.875 - 1/1.524) / 1.875. */
.tgal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 26px; }
.tgal.is-clamped .tcard.is-more { display: none; }
/* The category filter above the gallery: one row of pills, the chosen one
   lit. A theme may be in several categories; a card out of the chosen one
   leaves the grid (and the phone row) entirely. */
.tcats {
  display: flex; flex-wrap: nowrap; gap: 2px; inline-size: max-content; max-inline-size: 100%; margin: -6px auto 34px; padding: 5px;
  border-radius: 999px; background: rgb(255 255 255 / .05); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .11);
  overflow-x: auto; scrollbar-width: none;
}
.tcats::-webkit-scrollbar { display: none; }
.tcats[hidden] { display: none; }
.tcats__chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: .4rem; min-block-size: 42px; padding: 0 .85rem; border: 0; border-radius: 999px;
  background: transparent; color: #c9d3e8; font: inherit; font-size: .9rem; font-weight: 600; white-space: nowrap; cursor: pointer;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.tcats__chip:hover { background: rgb(255 255 255 / .08); color: #fff; }
.tcats__chip:active { transform: scale(.97); }
.tcats__chip:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
.tcats__chip[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 6px 18px -8px rgb(16 208 187 / .55); }
/* the count: a quiet number beside the word, not a second badge */
.tcats__n { color: inherit; font-size: .76rem; font-weight: 700; font-variant-numeric: tabular-nums; opacity: .55; }
.tcats__chip[aria-pressed="true"] .tcats__n { color: var(--teal-d); opacity: 1; }
/* Narrower than the one-row bar (~1070px): a sideways-scrolling row of
   separate pills, edge to edge, so the cut-off pill says «there is more». */
@media (max-width: 1120px) {
  .tcats { inline-size: auto; max-inline-size: none; margin: -6px -18px 22px; padding: 2px 18px 6px; gap: 8px; border-radius: 0;
    background: none; box-shadow: none; scroll-snap-type: x proximity; }
  .tcats__chip { scroll-snap-align: start; font-size: .86rem; padding: 0 .95rem; background: rgb(255 255 255 / .07); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14); }
}
.tgal .tcard.is-out { display: none !important; }
.tcard.is-in { animation: tcard-in .38s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes tcard-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tcard.is-in { animation: none; } .tcats__chip { transition: none; } }
.tcard {
  display: grid; gap: 1.1rem; padding: 14px 14px 16px; border-radius: 24px; color: #fff; text-decoration: none;
  background: rgb(255 255 255 / .05); border: 1px solid rgb(255 255 255 / .1);
  transition: transform .25s ease, background .25s ease, border-color .25s ease;
}
a.tcard:hover, a.tcard:focus-visible { transform: translateY(-4px); background: rgb(255 255 255 / .08); border-color: rgb(255 255 255 / .24); color: #fff; }
.tcard__shot { position: relative; margin-block-end: 6px; }
.tcard__bar { display: flex; align-items: center; gap: 5px; padding: 8px 10px; border-radius: 12px 12px 0 0; background: #eef1f7; }
.tcard__bar i { inline-size: 7px; block-size: 7px; border-radius: 50%; background: #cfd5e2; }
.tcard__bar span { margin-inline: auto; padding: 0 .7rem; border-radius: 6px; background: #fff; color: #7a8399; font-size: .62rem; line-height: 1.7; direction: ltr; }
.tcard__view { position: relative; aspect-ratio: 1.524; overflow: hidden; border-radius: 0 0 12px 12px; background: #fff; }
.tcard__view img { inline-size: 100%; block-size: auto; max-inline-size: none; transform: translateY(0); transition: transform 1.2s cubic-bezier(.4, 0, .2, 1); }
a.tcard:hover .tcard__view img, a.tcard:focus-visible .tcard__view img { transform: translateY(-65%); transition-duration: 6s; }
.tcard__blank { position: absolute; inset: 0; background: linear-gradient(135deg, var(--a), var(--b)); }
.tcard__phone {
  position: absolute; inset-inline-end: -10px; inset-block-end: -16px; inline-size: 25%; block-size: auto;
  border: 4px solid #0b1430; border-radius: 16px; background: #0b1430;
  box-shadow: 0 14px 30px rgb(0 0 0 / .45); transition: transform .3s ease;
}
a.tcard:hover .tcard__phone { transform: translateY(-6px) rotate(-1.5deg); }
.tcard__meta { display: flex; align-items: center; gap: .75rem; padding-inline: 4px; }
.tcard__dots { display: flex; flex: none; }
.tcard__dots i { inline-size: 16px; block-size: 16px; border-radius: 50%; border: 2px solid var(--ink); box-shadow: 0 0 0 1px rgb(255 255 255 / .18); }
.tcard__dots i + i { margin-inline-start: -6px; }
.tcard__name { display: grid; min-inline-size: 0; line-height: 1.5; }
.tcard__name b { font-size: 1.02rem; font-weight: 800; }
.tcard__name small { color: #a9b5cf; font-size: .82rem; }
.tcard__go { display: inline-flex; align-items: center; gap: .3rem; margin-inline-start: auto; flex: none; color: #8fd8ff; font-size: .82rem; font-weight: 700; white-space: nowrap; }
.tcard__go svg { inline-size: 14px; block-size: 14px; }
.tgal__more { display: flex; justify-content: center; margin-block-start: 34px; }
.btn--glass { background: rgb(255 255 255 / .1); color: #fff; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .22); }
.btn--glass:hover { background: rgb(255 255 255 / .16); color: #fff; }
@media (prefers-reduced-motion: reduce) { a.tcard:hover .tcard__view img { transform: none; } }

/* ---- tablets and phones ------------------------------------------------ */
@media (max-width: 980px) {
  .nav { display: none; }
  .hd__menu { display: grid; }
  .ft__grid { grid-template-columns: 1fr 1fr; }
  .ft__brand { grid-column: 1 / -1; }
  .ft__trust { grid-column: 1 / -1; align-items: center; }
  .feats { grid-template-columns: repeat(2, 1fr); }
  .tgal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seo { grid-template-columns: 1fr; }
  .seo__proof { max-inline-size: 560px; margin-inline: auto; inline-size: 100%; }
  .seo__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gwin { max-inline-size: 560px; margin-inline: auto; inline-size: 100%; }
  .plans { grid-template-columns: 1fr; max-inline-size: 30rem; margin-inline: auto;  row-gap: 0; }
  .plan + .plan { margin-block-start: 26px; }
  .plan__was.is-empty { display: none; }
  .doc { grid-template-columns: 1fr; }
  .toc { position: static; display: flex; overflow-x: auto; gap: .4rem; scrollbar-width: none; }
  .toc::-webkit-scrollbar { display: none; }
  .toc a { flex: none; border: 1px solid var(--line); border-radius: 999px; }
  .toc a.is-on { border-color: var(--blue); }
}
@media (max-width: 640px) {
  .wrap { padding-inline: 18px; }
  .hd__in { min-block-size: 66px; gap: 1rem; }
  .hd__acts .btn { display: none; }
  .hd__acts .hd__login { display: none; }
  .logo img { block-size: 30px; }
  .start { flex-direction: column; align-items: stretch; padding: .5rem; }
  .start input { text-align: center; }
  .start .btn { inline-size: 100%; }
  .stage { padding-inline: 12px; }
  .sf { padding: 12px 12px 18px; }
  .sf__hd { gap: 12px; }
  .sf__hd span:not(:first-child):not(:last-child) { display: none; }
  .sf__hero { grid-template-columns: 1fr auto; padding: 16px; gap: 10px; }
  .sf__hero b { font-size: 1rem; }
  .sf__art { inline-size: 84px; block-size: 84px; border-radius: 12px; }
  .sf__art i:nth-child(1) { inset: 6px 0 0 22px; }
  .sf__art i:nth-child(2) { inset: 22px 32px 0 0; }
  .sf__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .pc:nth-child(n+3) { display: none; }
  .steps { grid-template-columns: 1fr; gap: 36px; }
  .steps::before { display: none; }
  .feats { grid-template-columns: 1fr; }
  .gs { padding: 14px 12px 18px; min-block-size: 0; }
  .gs__tabs { gap: .8rem; }
  .r { padding: .75rem .7rem; }
  .r__title { font-size: .92rem; }
  .r--x:nth-child(3) { display: none; }
  .seo__tiles { grid-template-columns: 1fr; gap: 10px; }
  .seo__tiles li { padding: 16px; }
  /* two a row on a phone: the claim above already says «صفحه‌ی اول» */
  .seo__kw-on { display: none; }
  .seo__kw li { justify-content: flex-start; min-block-size: 42px; padding-inline: .7rem; }
  .seo__kw-q { font-size: .86rem; }
  .seo__kw .seo__kw-more { grid-column: 1 / -1; min-block-size: 40px; }
  .pals { grid-template-columns: 1fr; gap: 10px; }
  /* one swipeable row of every theme; the «show all» button has no job here */
  .tgal, .tgal.is-clamped { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; gap: 14px;
    overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -18px; padding: 4px 18px 18px; scrollbar-width: none; }
  .tgal::-webkit-scrollbar { display: none; }
  .tgal.is-clamped .tcard.is-more { display: grid; }
  /* the filter on a phone: one sideways-scrolling row of pills */
  .tcard { scroll-snap-align: center; }
  .tgal__more { display: none; }
  .end { border-radius: 24px; }
  .price__acts .btn { inline-size: 100%; }
  .ft__logo img { block-size: 60px; }
  .ft__grid { gap: 8px 16px; }
  .ft__brand { text-align: center; }
  .ft__brand .ft__logo { display: inline-block; }
  .ft__brand p { margin-inline: auto; }
  .ft__brand { margin-block-end: 16px; }
  .cmp { font-size: .82rem; }
  .cmp col.cmp__label { inline-size: 40%; }
  .cmp th, .cmp td { padding: .65rem .35rem; }
  .cmp th[scope="row"] { padding-inline-start: .8rem; }
  .cmp thead th { inset-block-start: 66px; padding: .8rem .3rem .7rem; }
  .cmp__corner { padding-inline-start: .8rem !important; font-size: .8rem; }
  .cmp__name { font-size: .88rem; line-height: 1.5; }
  .cmp__price span, .cmp__cta { display: none; }
  .cmp__price { font-size: .7rem; }
  .cmp__pick { font-size: .62rem; padding-inline: .45rem; }
  .cmp .cmp__group th { padding-inline-start: .8rem; }
  .modal { align-items: flex-end; padding: 0; }
  .modal__box, .modal__box--wide { inline-size: 100%; max-block-size: 92vh; border-radius: 26px 26px 0 0; padding: 30px 20px calc(22px + env(safe-area-inset-bottom, 0px)); }
  .field-2 { grid-template-columns: 1fr; }
  .dock {
    position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 60; display: block;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: rgb(255 255 255 / .94);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-block-start: 1px solid var(--line);
    transform: translateY(110%); visibility: hidden; transition: transform .25s ease, visibility .25s;
  }
  .dock.is-on { transform: none; visibility: visible; }
  .dock .btn { inline-size: 100%; }
  body.has-dock { padding-block-end: 78px; }
}

/* =====================================================================
   گفتگوی سایت (sitechat.js) — the button and the panel
   ===================================================================== */
.sc-fab {
  position: fixed; inset-inline-end: 20px; inset-block-end: 20px; z-index: 70;
  display: inline-flex; align-items: center; gap: .55rem; min-block-size: 54px; padding-inline: 1.15rem 1.3rem;
  border: 0; border-radius: 999px; background: var(--blue); color: #fff; font: inherit; font-weight: 700; cursor: pointer;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--blue) 35%, transparent), 0 1px 0 rgb(255 255 255 / .25) inset;
  transition: transform .15s ease, background .15s ease;
}
.sc-fab:hover { background: var(--blue-h); transform: translateY(-2px); }
.sc-fab svg { inline-size: 24px; block-size: 24px; }
.sc-fab__dot { position: absolute; inset-block-start: 8px; inset-inline-start: 10px; inline-size: 12px; block-size: 12px; border-radius: 50%; background: #ff5a4f; border: 2px solid #fff; }
body.has-dock .sc-fab { inset-block-end: 92px; }
.sc-panel {
  position: fixed; inset-inline-end: 20px; inset-block-end: 20px; z-index: 71;
  display: flex; flex-direction: column; inline-size: min(380px, calc(100vw - 24px)); block-size: min(600px, calc(100dvh - 40px));
  background: #fff; border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow-lg); overflow: hidden;
}
.sc-panel[hidden] { display: none; }
.sc-head { display: flex; align-items: center; gap: .75rem; padding: .9rem 1.1rem; background: linear-gradient(120deg, #0b57e3, #0a7cff 60%, #10c9b6); color: #fff; }
.sc-head__t { flex: 1; display: grid; line-height: 1.5; }
.sc-head__t b { font-size: 1.02rem; }
.sc-head__t small { opacity: .88; font-size: .78rem; }
.sc-x { inline-size: 44px; block-size: 44px; border: 0; border-radius: 12px; background: rgb(255 255 255 / .16); color: #fff; font: inherit; font-size: 1.6rem; line-height: 1; cursor: pointer; }
.sc-x:hover { background: rgb(255 255 255 / .28); }
.sc-log { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .6rem; background: var(--soft); overscroll-behavior: contain; }
.sc-m { max-inline-size: 86%; padding: .6rem .9rem; border-radius: 16px; font-size: .94rem; line-height: 1.85; background: #fff; border: 1px solid var(--line); color: var(--ink); align-self: flex-start; }
.sc-m p { white-space: pre-wrap; overflow-wrap: anywhere; }
.sc-m small { display: block; color: var(--teal-d); font-weight: 700; font-size: .75rem; }
.sc-m--visitor { align-self: flex-end; background: var(--blue); border-color: var(--blue); color: #fff; border-end-end-radius: 6px; }
.sc-m--bot, .sc-m--expert { border-end-start-radius: 6px; }
.sc-m--expert { border-color: color-mix(in srgb, var(--teal) 55%, #fff); background: color-mix(in srgb, var(--teal) 10%, #fff); }
.sc-m--system { align-self: center; max-inline-size: 94%; background: transparent; border: 0; color: var(--muted); font-size: .84rem; text-align: center; }
.sc-m--wait { color: var(--muted); }
.sc-chips { display: flex; flex-wrap: wrap; gap: .45rem; padding: .6rem 1rem 0; background: #fff; }
.sc-chip { min-block-size: 44px; padding: .35rem .95rem; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--blue); font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer; }
.sc-chip:hover { background: color-mix(in srgb, var(--blue) 8%, #fff); border-color: var(--blue); }
.sc-err { margin: .5rem 1rem 0; padding: .5rem .8rem; border-radius: 10px; background: #fef3f2; color: var(--red); font-size: .88rem; }
.sc-gate { display: grid; gap: .55rem; padding: 1rem 1.1rem 1.2rem; background: #fff; border-block-start: 1px solid var(--line); }
.sc-gate p { font-size: .9rem; color: var(--text); }
.sc-lbl { font-weight: 700; color: var(--ink); font-size: .9rem; }
.sc-in, .sc-ta {
  inline-size: 100%; min-block-size: 48px; padding: .6rem .9rem; border: 1px solid #cdd3e2; border-radius: 12px; background: #fff;
  font: inherit; font-size: 1rem; color: var(--ink);
}
.sc-in:focus, .sc-ta:focus { outline: 3px solid color-mix(in srgb, var(--blue) 30%, transparent); border-color: var(--blue); }
.sc-form { display: flex; align-items: flex-end; gap: .5rem; padding: .7rem 1rem 1rem; background: #fff; }
.sc-ta { flex: 1; resize: none; max-block-size: 120px; line-height: 1.7; }
.sc-send { min-block-size: 48px; padding-inline: 1.1rem; border: 0; border-radius: 12px; background: var(--blue); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.sc-send:hover { background: var(--blue-h); }
.sc-send:disabled { opacity: .6; cursor: default; }
.sc-send--wide { inline-size: 100%; }
@media (max-width: 520px) {
  .sc-panel { inset: 0; inline-size: 100%; block-size: 100dvh; border-radius: 0; border: 0; }
  .sc-fab { inset-inline-end: 14px; }
  .sc-fab__t { display: none; }
  .sc-fab { padding-inline: 0; inline-size: 56px; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .sc-fab { transition: none; } }

/* ---- the button is a face (and says what it is for) — overrides the first draft above ---------------------- */
.sc-fab {
  inset-inline-end: 22px; inset-block-end: 22px; min-block-size: 68px; padding: 6px 18px 6px 8px; gap: .7rem;
  background: #fff; color: var(--ink); border: 1px solid var(--line);
  box-shadow: 0 14px 36px rgb(12 24 56 / .18), 0 2px 6px rgb(12 24 56 / .08);
}
[dir="rtl"] .sc-fab, .sc-fab { padding-inline: 8px 18px; }
.sc-fab:hover { background: #fff; transform: translateY(-3px); box-shadow: 0 18px 40px rgb(12 24 56 / .22), 0 2px 6px rgb(12 24 56 / .08); }
.sc-fab__av { position: relative; inline-size: 56px; block-size: 56px; flex: none; border-radius: 50%; padding: 3px; background: var(--grad); }
.sc-fab__av img { inline-size: 100%; block-size: 100%; border-radius: 50%; object-fit: cover; border: 2px solid #fff; background: #fff; }
.sc-fab__av::after {            /* a calm ring that breathes: «somebody is there» */
  content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--teal) 70%, transparent);
  animation: sc-breathe 2.8s ease-out infinite; pointer-events: none;
}
@keyframes sc-breathe { 0% { transform: scale(.92); opacity: .9; } 70%, 100% { transform: scale(1.22); opacity: 0; } }
.sc-fab__on { position: absolute; inset-block-end: 1px; inset-inline-end: 1px; inline-size: 14px; block-size: 14px; border-radius: 50%; background: #22c55e; border: 2px solid #fff; z-index: 1; }
.sc-fab__t { display: grid; text-align: start; line-height: 1.45; }
.sc-fab__t b { font-size: .98rem; color: var(--ink); }
.sc-fab__t small { font-size: .78rem; color: var(--muted); font-weight: 500; }
.sc-fab__dot { inset-block-start: 6px; inset-inline-start: 6px; }
.sc-tip {
  position: fixed; inset-inline-end: 22px; inset-block-end: 104px; z-index: 70; display: flex; align-items: flex-start; gap: .25rem;
  max-inline-size: min(300px, calc(100vw - 44px)); padding: .3rem .3rem .3rem .3rem; background: #fff; border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 14px 36px rgb(12 24 56 / .18); animation: sc-pop .35s cubic-bezier(.2, .9, .3, 1.2) both;
}
.sc-tip::after { content: ""; position: absolute; inset-block-end: -8px; inset-inline-end: 128px; inline-size: 14px; block-size: 14px; background: #fff; border-inline-end: 1px solid var(--line); border-block-end: 1px solid var(--line); transform: rotate(45deg); }
.sc-tip__b { flex: 1; min-block-size: 48px; padding: .6rem .9rem; border: 0; background: transparent; font: inherit; font-size: .95rem; font-weight: 600; line-height: 1.8; color: var(--ink); text-align: start; cursor: pointer; border-radius: 14px; }
.sc-tip__b:hover { background: var(--soft); }
.sc-tip__x { inline-size: 36px; block-size: 36px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font: inherit; font-size: 1.3rem; line-height: 1; cursor: pointer; }
.sc-tip__x:hover { background: var(--soft); color: var(--ink); }
@keyframes sc-pop { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
body.has-dock .sc-tip { inset-block-end: 166px; }

.sc-head { gap: .8rem; }
.sc-head__av { position: relative; inline-size: 48px; block-size: 48px; flex: none; border-radius: 50%; }
.sc-head__av img { inline-size: 100%; block-size: 100%; border-radius: 50%; object-fit: cover; border: 2px solid rgb(255 255 255 / .85); background: #fff; }
.sc-head__av .sc-fab__on { inline-size: 12px; block-size: 12px; border-color: #0b57e3; }

.sc-m--bot, .sc-m--expert { margin-inline-start: 38px; position: relative; }
.sc-m--bot.sc-m--first::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline-start: -38px; inline-size: 30px; block-size: 30px; border-radius: 50%;
  background: var(--av) center / cover, #fff; border: 1px solid var(--line);
}
.sc-m--expert::before {
  content: "ک"; position: absolute; inset-block-start: 0; inset-inline-start: -38px; inline-size: 30px; block-size: 30px; border-radius: 50%;
  display: grid; place-items: center; background: var(--teal-d); color: #fff; font-weight: 800; font-size: .85rem;
}
.sc-m--wait p::after { content: "…"; display: inline-block; animation: sc-dots 1.2s steps(4, end) infinite; overflow: hidden; vertical-align: bottom; inline-size: 0; }
@keyframes sc-dots { to { inline-size: 1.2em; } }
@media (max-width: 520px) {
  .sc-fab { inset-inline-end: 14px; inset-block-end: 14px; min-block-size: 0; padding: 0; inline-size: auto; border-radius: 50%; }
  .sc-fab__t { display: none; }
  .sc-fab__av { inline-size: 64px; block-size: 64px; }
  .sc-tip { inset-inline-end: 14px; inset-block-end: 92px; }
  .sc-tip::after { inset-inline-end: 24px; }
  body.has-dock .sc-fab { inset-block-end: 90px; }
  body.has-dock .sc-tip { inset-block-end: 168px; }
}
@media (prefers-reduced-motion: reduce) { .sc-fab__av::after, .sc-tip, .sc-m--wait p::after { animation: none; } }

/* ---- the phone number (PlatformContact: one number, three places) ------------------------------------------
   Header: wide screens only — under 1121px the nav is already full and the menu + footer carry it.
   Menu: a full-width tap-to-call row. Footer: a card under the brand, the last thing on every public page. */
.hd__phone { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-block-size: 44px; min-inline-size: 44px; padding-inline: .6rem; border-radius: 10px; color: var(--ink); font-weight: 700; font-size: .92rem; text-decoration: none; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hd__phone svg { inline-size: 1.15rem; block-size: 1.15rem; color: var(--blue); flex: none; }
.hd__phone:hover { background: var(--soft); }
.hd__phone-n { font-weight: 600; letter-spacing: 0; word-spacing: .12em; white-space: nowrap; }
.hd__ac { color: var(--muted); font-weight: 600; }
.hd__phone-n b { font-weight: 800; color: var(--ink); }
.hd__phone-l { display: none; font-weight: 700; }
@media (max-width: 640px) { .hd__phone { padding-inline: .35rem; gap: .35rem; } .hd__phone-n { font-size: .84rem; } }
/* under 350px the whole number does not fit beside the logo: the word replaces it, never a CUT number */
@media (max-width: 349px) { .hd__phone-n { display: none; } .hd__phone-l { display: inline; } }
.mnav .mnav__call { display: flex; align-items: center; gap: .6rem; min-block-size: 52px; padding-inline: .8rem; border-radius: 12px; background: var(--soft); color: var(--ink); text-decoration: none; font-weight: 600; }
.mnav .mnav__call svg { inline-size: 1.25rem; block-size: 1.25rem; color: var(--blue); flex: none; }
.mnav .mnav__call b { margin-inline-start: auto; font-size: 1.02rem; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.ft__call { display: inline-flex; align-items: center; gap: .8rem; margin-block-start: 1rem; min-block-size: 56px; padding: .6rem 1.1rem; border: 1px solid var(--line); border-radius: 14px; background: #fff; color: var(--ink); text-decoration: none; box-shadow: 0 1px 2px rgb(12 24 56 / .04); }
.ft__call:hover { border-color: var(--blue); }
.ft__call svg { inline-size: 1.4rem; block-size: 1.4rem; color: var(--blue); flex: none; }
.ft__call span { display: grid; line-height: 1.5; }
.ft__call small { color: var(--muted); font-size: .78rem; }
.ft__call b { font-size: 1.12rem; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
@media (max-width: 640px) { .ft__call { display: flex; inline-size: fit-content; margin-inline: auto; } }

/* home: the number where the visitor is deciding — under the form, one tap */
.hero__call { margin-block-start: .2rem; font-size: .92rem; color: var(--text); }
.hero__call a { display: inline-flex; align-items: center; gap: .4rem; min-block-size: 44px; color: var(--ink); font-weight: 600; text-decoration: none; }
.hero__call a:hover span { color: var(--blue); text-decoration: underline; }
.hero__call b { font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .02em; }

/* the chat launcher hides while the page scrolls (phones: it sat on the edge of the line under it) */
@media (max-width: 980px) { .sc-fab { transition: opacity .18s ease, transform .18s ease; } .sc-fab.is-scrolling { opacity: 0; pointer-events: none; transform: scale(.9); } }

/* pricing: a sub-heading inside the «in every plan» block, and the «و N امکان دیگر» line */
.cmp .cmp__group--sub th { font-weight: 600; font-size: .85rem; background: transparent; color: var(--muted, #556a8c); }
.plan__list li.is-more { color: var(--muted, #556a8c); }

/* pricing: the shared list, closed by default */
.cmp-all { margin-block-start: 1.5rem; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.cmp-all > summary { cursor: pointer; padding: 1rem 1.2rem; font-weight: 800; color: var(--ink); min-block-size: 48px; display: flex; align-items: center; }
.cmp-all__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.2rem 2rem; padding: .4rem 1.2rem 1.4rem; }
.cmp-all h3 { margin: 0 0 .5rem; font-size: .95rem; }
.cmp-all ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.cmp-all li { display: flex; gap: .5rem; align-items: flex-start; font-size: .9rem; line-height: 1.7; }
.cmp-all .yes { flex: none; display: inline-grid; place-items: center; inline-size: 22px; block-size: 22px; border-radius: 50%; background: color-mix(in srgb, var(--teal) 18%, #fff); color: var(--teal-d); }
.cmp-all .yes svg { inline-size: 13px; block-size: 13px; }

/* ---- the full comparison (_compare.php): every feature, plan by plan ---------------------------------- */
.fx { --col: 140px; max-inline-size: 980px; margin-inline: auto; }
.fx-head {
  position: sticky; inset-block-start: 72px; z-index: 5;
  display: grid; grid-template-columns: minmax(0, 1fr) repeat(var(--n), var(--col)); align-items: end; gap: 0;
  padding: .7rem 1rem; background: rgb(255 255 255 / .96); backdrop-filter: blur(8px);
  border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow);
}
.fx-head__label { color: var(--muted); font-size: .88rem; }
.fx-head__label b { color: var(--ink); font-size: 1.05rem; }
.fx-head__plan { display: grid; justify-items: center; text-align: center; line-height: 1.5; }
.fx-head__plan b { color: var(--ink); font-weight: 900; }
.fx-head__plan small { color: var(--muted); font-size: .74rem; font-weight: 600; }
.fx-head__plan.is-pick b { color: var(--blue); }
.fx-nav { display: flex; flex-wrap: wrap; gap: .45rem; margin: 1.1rem 0 1.2rem; }
.fx-nav a {
  display: inline-flex; align-items: center; min-block-size: 36px; padding-inline: .8rem; border-radius: 999px;
  background: var(--soft); color: var(--text); text-decoration: none; font-size: .86rem; font-weight: 600;
}
.fx-nav a:hover { background: #e9efff; color: var(--blue); }
.fx-group { margin-block-end: 1rem; border: 1px solid var(--line); border-radius: 16px; background: #fff; scroll-margin-block-start: 150px; }
.fx-group > summary {
  list-style: none; cursor: pointer; padding: .9rem 1.1rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .9rem;
  min-block-size: 52px;
}
.fx-group > summary::-webkit-details-marker { display: none; }
.fx-group > summary::after {
  content: ""; flex: none; margin-inline-start: auto; align-self: center; inline-size: 9px; block-size: 9px;
  border: solid var(--muted); border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); transition: transform .2s;
}
.fx-group[open] > summary::after { transform: translateY(2px) rotate(225deg); }
.fx-group__t { color: var(--ink); font-weight: 900; font-size: 1.05rem; }
.fx-group__s { color: var(--muted); font-size: .86rem; }
.fx-table { inline-size: 100%; border-collapse: collapse; table-layout: fixed; }
.fx-table col.fx-col { inline-size: var(--col); }
.fx-table th[scope="row"] { text-align: start; font-weight: 500; color: var(--text); padding: .55rem 1.1rem; line-height: 1.8; font-size: .94rem; }
.fx-table th[scope="row"] small { display: block; color: var(--muted); font-size: .8rem; line-height: 1.6; }
.fx-table td { text-align: center; padding: .45rem 0; }
.fx-table td b { color: var(--ink); font-weight: 800; font-size: .92rem; }
.fx-table tr + tr > * { border-block-start: 1px solid var(--line); }
.fx-table td.is-pick { background: color-mix(in srgb, var(--blue) 4%, transparent); }
.fx-table .yes { display: inline-grid; place-items: center; inline-size: 24px; block-size: 24px; border-radius: 50%; background: color-mix(in srgb, var(--teal) 18%, #fff); color: var(--teal-d); }
.fx-table .yes svg { inline-size: 14px; block-size: 14px; }
.fx-table .no { color: #b3bacb; font-weight: 700; }
.fx-cta { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; margin-block-start: 1.4rem; padding: 1.2rem 1.4rem; border-radius: 16px; background: var(--soft); }
.fx-cta p { margin: 0; color: var(--ink); font-weight: 700; }
@media (max-width: 640px) {
  .fx { --col: 58px; }
  .fx-head { padding: .55rem .6rem; inset-block-start: 64px; }
  .fx-head__label { font-size: .78rem; }
  .fx-head__plan small { font-size: .66rem; }
  .fx-table th[scope="row"] { padding-inline: .7rem; font-size: .88rem; }
  .fx-group > summary { padding-inline: .8rem; }
  .fx-table td b { font-size: .8rem; }
}

@media (max-width: 640px) {
  .fx-nav { flex-wrap: nowrap; overflow-x: auto; padding-block-end: .3rem; scrollbar-width: thin; }
  .fx-nav a { flex: none; }
}
@media (max-width: 360px) {
  .fx { --col: 50px; }
}

/* pricing: the short shared list and the closed full comparison */
.shared { list-style: none; margin: 0 auto; padding: 0; max-inline-size: 860px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem 2rem; }
.shared li { display: flex; gap: .6rem; align-items: flex-start; line-height: 1.8; font-size: .96rem; }
.shared .plan__ic { flex: none; }
@media (max-width: 640px) { .shared { grid-template-columns: 1fr; } }
.fx-all { margin: 1.8rem auto 0; max-inline-size: 980px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.fx-all > summary {
  list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .9rem;
  padding: 1rem 1.2rem; min-block-size: 56px; font-weight: 900; color: var(--ink); font-size: 1.05rem;
}
.fx-all > summary::-webkit-details-marker { display: none; }
.fx-all > summary small { color: var(--muted); font-weight: 600; font-size: .86rem; }
.fx-all > summary::after {
  content: ""; flex: none; margin-inline-start: auto; align-self: center; inline-size: 11px; block-size: 11px;
  border: solid var(--blue); border-width: 0 2.5px 2.5px 0; transform: translateY(-3px) rotate(45deg); transition: transform .2s;
}
.fx-all[open] > summary::after { transform: translateY(3px) rotate(225deg); }
.fx-all[open] > summary { border-block-end: 1px solid var(--line); }
.fx-all > .fx { padding: 1rem; max-inline-size: none; }

/* ---- the drawn shop is alive (CSS only; prefers-reduced-motion switches every animation off above) ------------ */
.win { animation: st-float 9s ease-in-out infinite; }
@keyframes st-float { 50% { transform: translateY(-6px); } }

/* the four products take turns being picked up, and the cart counts them */
.pc { animation: pc-lift 8s ease-in-out infinite; }
.pc:nth-child(2) { animation-delay: 2s; }
.pc:nth-child(3) { animation-delay: 4s; }
.pc:nth-child(4) { animation-delay: 6s; }
@keyframes pc-lift { 0% { transform: none; } 5%, 20% { transform: translateY(-7px); } 26%, 100% { transform: none; } }
.pc__img { animation: pc-glow 8s ease-in-out infinite; }
.pc:nth-child(2) .pc__img { animation-delay: 2s; }
.pc:nth-child(3) .pc__img { animation-delay: 4s; }
.pc:nth-child(4) .pc__img { animation-delay: 6s; }
@keyframes pc-glow { 0% { box-shadow: none; } 5%, 20% { box-shadow: 0 14px 26px rgb(12 24 56 / .16); } 26%, 100% { box-shadow: none; } }
.sf__cart { position: relative; }
.sf__badge {
  position: absolute; inset-block-start: -5px; inset-inline-end: -5px; inline-size: 17px; block-size: 17px; border-radius: 50%;
  background: var(--blue); color: #fff; font-style: normal; font-size: .62rem; font-weight: 800; line-height: 1;
}
.sf__badge b { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; }
.sf__badge b:nth-child(1) { animation: bd-1 8s linear infinite; }
.sf__badge b:nth-child(2) { animation: bd-2 8s linear infinite; }
.sf__badge b:nth-child(3) { animation: bd-3 8s linear infinite; }
@keyframes bd-1 { 0%, 22% { opacity: 0; } 25%, 47% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes bd-2 { 0%, 47% { opacity: 0; } 50%, 72% { opacity: 1; } 75%, 100% { opacity: 0; } }
@keyframes bd-3 { 0%, 72% { opacity: 0; } 75%, 97% { opacity: 1; } 100% { opacity: 0; } }
.sf__hero em { animation: cta-pulse 3.2s ease-in-out infinite; }
@keyframes cta-pulse { 50% { transform: scale(1.06); } }
.sf__art i:nth-child(1) { animation: art-a 7s ease-in-out infinite; }
.sf__art i:nth-child(2) { animation: art-b 7s ease-in-out infinite; }
@keyframes art-a { 50% { transform: translate(-6px, -6px) rotate(5deg); } }
@keyframes art-b { 50% { transform: translate(8px, 4px) scale(1.07); } }


/* ---- /status ------------------------------------------------------------------------------------------------ */
.st-hero { text-align: center; padding-block: clamp(40px, 7vw, 72px) clamp(28px, 4vw, 44px); background: linear-gradient(180deg, #ecfbf6, #fff); }
.st-hero--degraded { background: linear-gradient(180deg, #fff6e0, #fff); }
.st-hero--incident { background: linear-gradient(180deg, #ffe9e7, #fff); }
.st-hero__icon { display: inline-grid; place-items: center; inline-size: 68px; block-size: 68px; margin: 0 0 1rem; border-radius: 50%; background: #10b8a6; color: #fff; box-shadow: 0 10px 30px rgb(16 184 166 / .35); }
.st-hero--degraded .st-hero__icon { background: #e9a100; box-shadow: 0 10px 30px rgb(233 161 0 / .35); }
.st-hero--incident .st-hero__icon { background: var(--red); box-shadow: 0 10px 30px rgb(198 40 40 / .3); }
.st-hero__icon svg { inline-size: 34px; block-size: 34px; }
.st-hero h1 { margin: 0 0 .5rem; color: var(--ink); font-size: clamp(1.45rem, 3.4vw, 2.1rem); font-weight: 900; line-height: 1.5; }
.st-hero__sub { margin: 0 auto; max-inline-size: 640px; color: var(--text); }
.st-hero__meta { margin: .9rem 0 0; color: var(--muted); font-size: .86rem; }
.st-body { padding-block-start: 0; }
.st-wrap { max-inline-size: 860px; display: grid; gap: 1.1rem; }
.st-card { border: 1px solid var(--line); border-radius: 18px; background: #fff; padding: 1.2rem 1.3rem; box-shadow: var(--shadow); }
.st-card h2 { margin: 0 0 .9rem; font-size: 1.1rem; color: var(--ink); }
.st-card--open { border-color: #f1c4bf; background: #fffafa; }
.st-muted { color: var(--muted); font-size: .86rem; margin: .5rem 0 0; }
.st-pill { display: inline-flex; align-items: center; padding: .2rem .7rem; border-radius: 999px; font-size: .8rem; font-weight: 700; white-space: nowrap; }
.st-pill--ok { background: #dff6ee; color: #0a6d5c; }
.st-pill--warn { background: #fff0cc; color: #8a5a00; }
.st-pill--bad { background: #ffe0dd; color: #a02020; }
.st-services { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.st-services li { display: flex; align-items: center; gap: .9rem; padding: .85rem .2rem; border-block-start: 1px solid var(--line); }
.st-services li:first-child { border-block-start: 0; }
.st-services__ic { flex: none; display: grid; place-items: center; inline-size: 40px; block-size: 40px; border-radius: 12px; background: var(--soft); color: var(--blue); }
.is-bad .st-services__ic { background: #ffe9e7; color: var(--red); }
.st-services__ic svg { inline-size: 20px; block-size: 20px; }
.st-services__t { flex: 1 1 auto; min-inline-size: 0; display: grid; line-height: 1.6; }
.st-services__t b { color: var(--ink); }
.st-services__t small { color: var(--muted); font-size: .82rem; }
.st-strip { display: grid; grid-template-columns: repeat(90, minmax(0, 1fr)); gap: 2px; direction: ltr; }
.st-strip__d { display: block; block-size: 34px; border-radius: 3px; background: #bfe9dc; }
.st-strip__d--1 { background: #f2c14e; }
.st-strip__d--2 { background: #e0564b; }
.st-strip__legend { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin: .8rem 0 0; font-size: .82rem; color: var(--muted); }
.st-strip__legend span { display: inline-flex; align-items: center; gap: .4rem; }
.st-strip__legend .st-strip__d { inline-size: 12px; block-size: 12px; border-radius: 3px; }
.st-inc + .st-inc { margin-block-start: 1rem; padding-block-start: 1rem; border-block-start: 1px solid var(--line); }
.st-inc header { display: flex; flex-wrap: wrap; gap: .4rem .8rem; align-items: center; }
.st-inc h3 { margin: 0; font-size: 1.02rem; color: var(--ink); }
.st-steps { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: .8rem 0; padding: 0; }
.st-steps li { padding: .25rem .75rem; border-radius: 999px; background: var(--soft); color: var(--muted); font-size: .8rem; }
.st-steps li.is-done { background: #dff6ee; color: #0a6d5c; }
.st-steps li.is-now { background: var(--ink); color: #fff; font-weight: 700; }
.st-list { list-style: none; margin: 0; padding: 0; }
.st-list li { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) auto; gap: .8rem; align-items: baseline; padding: .6rem 0; border-block-start: 1px solid var(--line); }
.st-list li:first-child { border-block-start: 0; }
.st-list__date { color: var(--muted); font-size: .86rem; }
.st-list__title { color: var(--ink); }
.st-help ol { margin: 0; padding-inline-start: 1.3rem; display: grid; gap: .45rem; line-height: 1.9; }
.st-note { text-align: center; max-inline-size: 640px; margin-inline: auto; }
@media (max-width: 640px) {
  .st-services li { flex-wrap: wrap; }
  .st-services__t { flex-basis: calc(100% - 60px); }
  .st-services li .st-pill { margin-inline-start: 54px; }
  .st-strip { gap: 1px; }
  .st-strip__d { block-size: 26px; }
  .st-list li { grid-template-columns: 1fr auto; }
  .st-list__date { grid-column: 1 / -1; }
}


@media (max-width: 640px) {
  .fx-head__plan small { display: none; }
  .fx-head { align-items: center; }
}

/* ---- the blog and the academy ------------------------------------------------------------------------------ */
.wrap--narrow { max-inline-size: 760px; }
.ct-hero p { max-inline-size: 640px; margin-inline: auto; }
.ct-hero__meta { color: var(--muted); font-size: .92rem; }
.ct-search { display: flex; gap: .5rem; max-inline-size: 460px; margin: 1.4rem auto 0; padding: .35rem; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: var(--shadow); }
.ct-search input { flex: 1 1 auto; min-inline-size: 0; border: 0; background: transparent; padding-inline: .8rem; font: inherit; color: var(--ink); outline: none; }
.ct-search .btn { min-block-size: 42px; padding-inline: 1.1rem; }
.ct-list { padding-block-start: 0; }
.ct-cats { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.6rem; }
.ct-cats a { display: inline-flex; align-items: center; gap: .4rem; min-block-size: 38px; padding-inline: .95rem; border-radius: 999px; background: var(--soft); color: var(--text); text-decoration: none; font-weight: 600; font-size: .9rem; }
.ct-cats a small { color: var(--muted); font-weight: 600; }
.ct-cats a:hover { background: #e9efff; color: var(--blue); }
.ct-cats a[aria-current="page"] { background: var(--ink); color: #fff; }
.ct-cats a[aria-current="page"] small { color: rgb(255 255 255 / .7); }
.ct-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.ct-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 18px; background: #fff; overflow: hidden; transition: box-shadow .2s, transform .2s; }
.ct-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.ct-card__img { display: block; aspect-ratio: 16 / 9; background: linear-gradient(135deg, #e8f0ff, #e2fbf6); overflow: hidden; }
.ct-card__img img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.ct-card__img.is-none { display: grid; place-items: center; color: var(--blue); font-size: 3rem; font-weight: 900; }
.ct-card__body { display: flex; flex-direction: column; gap: .5rem; padding: 1.1rem 1.2rem 1.2rem; flex: 1 1 auto; }
.ct-card__tags { margin: 0; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; font-size: .8rem; }
.ct-card__tags a { color: var(--teal-d); font-weight: 700; text-decoration: none; }
.ct-level { padding: .1rem .55rem; border-radius: 999px; background: #fff0cc; color: #8a5a00; font-size: .76rem; font-weight: 700; }
.ct-card h2 { margin: 0; font-size: 1.08rem; line-height: 1.7; }
.ct-card h2 a { color: var(--ink); text-decoration: none; }
.ct-card h2 a:hover { color: var(--blue); }
.ct-card__ex { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.9; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ct-card__meta { margin: auto 0 0; padding-block-start: .5rem; display: flex; flex-wrap: wrap; gap: .2rem .9rem; color: var(--muted); font-size: .8rem; }
.ct-empty { text-align: center; color: var(--muted); padding-block: 3rem; }
.ct-pager { display: flex; justify-content: center; align-items: center; gap: 1.2rem; margin-block-start: 2rem; }
.ct-pager a { display: inline-flex; align-items: center; min-block-size: 42px; padding-inline: 1.1rem; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); text-decoration: none; font-weight: 700; }
.ct-series { margin-block-end: 2rem; }
.ct-series h2 { font-size: 1.15rem; margin: 0 0 .8rem; }
.ct-series__row { display: flex; gap: 14px; overflow-x: auto; padding-block-end: .4rem; }
.ct-series__card { flex: 0 0 230px; display: grid; gap: .2rem; padding: 1rem 1.1rem; border-radius: 16px; background: linear-gradient(135deg, #0b57e3, #0a7cff 60%, #10c9b6); color: #fff; text-decoration: none; }
.ct-series__card b { font-size: 1rem; line-height: 1.6; }
.ct-series__card span { opacity: .85; font-size: .82rem; }
.ct-steps { list-style: none; margin: 0 auto; padding: 0; max-inline-size: 760px; display: grid; gap: 14px; }
.ct-steps li { display: flex; gap: 1rem; padding: 1.1rem 1.2rem; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.ct-steps__n { flex: none; display: grid; place-items: center; inline-size: 38px; block-size: 38px; border-radius: 50%; background: var(--ink); color: #fff; font-weight: 800; }
.ct-steps h2 { margin: 0 0 .3rem; font-size: 1.05rem; }
.ct-steps h2 a { color: var(--ink); text-decoration: none; }
.ct-steps p { margin: 0 0 .3rem; color: var(--muted); font-size: .92rem; }
.ct-steps small { color: var(--muted); }
.ct-avatar { inline-size: 32px; block-size: 32px; border-radius: 50%; object-fit: cover; vertical-align: middle; }
.ct-avatar--lg { inline-size: 72px; block-size: 72px; }

.ct-preview { margin: 0; padding: .6rem 1rem; text-align: center; background: #fff0cc; color: #6b4600; font-weight: 700; font-size: .9rem; }
.ct-post__head { padding-block: clamp(28px, 5vw, 56px) 1.2rem; background: linear-gradient(180deg, #f3f7ff, #fff); }
.ct-crumbs { display: flex; flex-wrap: wrap; gap: .4rem; font-size: .84rem; color: var(--muted); margin-block-end: .9rem; }
.ct-crumbs a { color: var(--muted); text-decoration: none; }
.ct-crumbs a:hover { color: var(--blue); }
.ct-post h1 { font-size: clamp(1.5rem, 3.4vw, 2.2rem); line-height: 1.6; font-weight: 900; margin: 0 0 .6rem; }
.ct-post__lead { margin: 0 0 1rem; font-size: 1.05rem; color: var(--text); line-height: 2; }
.ct-post__meta { display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: center; margin: 0; font-size: .84rem; color: var(--muted); }
.ct-post__by { display: inline-flex; align-items: center; gap: .5rem; color: var(--ink); font-weight: 700; text-decoration: none; }
.ct-cover { margin-block: 0 1.5rem; }
.ct-cover img { inline-size: 100%; block-size: auto; border-radius: 18px; display: block; }
.ct-post__main { padding-block-end: 2.5rem; }
.ct-course { margin-block-end: 1.4rem; padding: 1rem 1.2rem; border-radius: 16px; background: var(--soft); }
.ct-course p { margin: 0 0 .5rem; }
.ct-course ol { margin: 0; padding-inline-start: 1.3rem; display: grid; gap: .25rem; font-size: .92rem; }
.ct-course li[aria-current="step"] { font-weight: 800; }
.ct-toc { margin-block-end: 1.6rem; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.ct-toc summary { cursor: pointer; padding: .8rem 1.1rem; font-weight: 800; color: var(--ink); }
.ct-toc ol { margin: 0; padding: 0 1.1rem 1rem 1.1rem; padding-inline-start: 2.2rem; display: grid; gap: .35rem; font-size: .93rem; }
.ct-toc__l3 { margin-inline-start: 1.1rem; font-size: .88rem; }
.ct-toc a { color: var(--text); text-decoration: none; }
.ct-toc a:hover { color: var(--blue); }
.ct-body { font-size: 1.04rem; line-height: 2.1; color: var(--text); overflow-wrap: anywhere; }
.ct-body h2 { font-size: 1.45rem; margin: 2.2rem 0 .8rem; line-height: 1.7; scroll-margin-block-start: 96px; }
.ct-body h3 { font-size: 1.15rem; margin: 1.7rem 0 .6rem; line-height: 1.7; scroll-margin-block-start: 96px; }
.ct-body p { margin: 0 0 1.1rem; }
.ct-body a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.ct-body ul, .ct-body ol { margin: 0 0 1.2rem; padding-inline-start: 1.6rem; }
.ct-body ol { list-style: persian; }   /* ۱ ۲ ۳ in a Persian article, not 1 2 3 */
.ct-body li { margin-block-end: .35rem; }
.ct-body img, .ct-body video { max-inline-size: 100%; block-size: auto; border-radius: 14px; }
.ct-body figure { margin: 1.4rem 0; }
.ct-body figcaption { color: var(--muted); font-size: .86rem; text-align: center; margin-block-start: .4rem; }
.ct-body blockquote { margin: 1.4rem 0; padding: .9rem 1.2rem; border-inline-start: 4px solid var(--teal); background: var(--soft); border-radius: 0 12px 12px 0; color: var(--ink); }
.ct-body table { inline-size: 100%; border-collapse: collapse; margin: 1.3rem 0; font-size: .95rem; display: block; overflow-x: auto; }
.ct-body th, .ct-body td { border: 1px solid var(--line); padding: .55rem .8rem; text-align: start; }
.ct-body th { background: var(--soft); color: var(--ink); }
.ct-body hr { border: 0; border-block-start: 1px solid var(--line); margin: 2rem 0; }
.ct-body iframe { max-inline-size: 100%; border: 0; border-radius: 14px; }
.ct-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin: 1.4rem 0; }
.ct-gallery img { inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.ct-body .pnote { margin: 1.4rem 0; padding: .9rem 1.1rem; border-radius: 14px; border: 1px solid var(--line); background: var(--soft); }
.ct-body .pnote__t { display: block; margin-block-end: .3rem; color: var(--ink); }
.ct-body .pnote--warn { background: #fff7e0; border-color: #f1d58a; }
.ct-body .pnote--tip { background: #e8f9f4; border-color: #b6e8dc; }
.ct-body .pnote__b > :last-child { margin-block-end: 0; }
.ct-body .pfaq { margin: 1.4rem 0; display: grid; gap: .5rem; }
.ct-body .pfaq__i { border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.ct-body .pfaq__i summary { cursor: pointer; padding: .7rem 1rem; font-weight: 700; color: var(--ink); }
.ct-body .pfaq__a { padding: 0 1rem .8rem; }
.ct-body .pmap { margin: 1.4rem 0; }
.ct-body .pmap__frame iframe { inline-size: 100%; block-size: 320px; }
.ct-body .pmap__go { display: flex; gap: .8rem; align-items: center; font-size: .86rem; margin-block-start: .5rem; }
.ct-body .cta { margin: 1.4rem 0; }
.ct-body .ptabs { margin: 1.6rem 0; }
.ct-body .ptabs > input { position: absolute; opacity: 0; pointer-events: none; }
.ct-body .ptabs__tabs { display: flex; flex-wrap: wrap; gap: .3rem; border-block-end: 1px solid var(--line); }
.ct-body .ptabs__tab { cursor: pointer; padding: .55rem 1rem; border-block-end: 2px solid transparent; color: var(--muted); font-weight: 700; }
.ct-body .ptabs__pane { display: none; padding-block: 1rem 0; }
.ct-body .ptabs > input:nth-of-type(1):checked ~ .ptabs__tabs > .ptabs__tab:nth-child(1) { color: var(--blue); border-color: var(--blue); }
.ct-body .ptabs > input:nth-of-type(1):checked ~ .ptabs__panes > .ptabs__pane:nth-child(1) { display: block; }
.ct-body .ptabs > input:nth-of-type(2):checked ~ .ptabs__tabs > .ptabs__tab:nth-child(2) { color: var(--blue); border-color: var(--blue); }
.ct-body .ptabs > input:nth-of-type(2):checked ~ .ptabs__panes > .ptabs__pane:nth-child(2) { display: block; }
.ct-body .ptabs > input:nth-of-type(3):checked ~ .ptabs__tabs > .ptabs__tab:nth-child(3) { color: var(--blue); border-color: var(--blue); }
.ct-body .ptabs > input:nth-of-type(3):checked ~ .ptabs__panes > .ptabs__pane:nth-child(3) { display: block; }
.ct-body .ptabs > input:nth-of-type(4):checked ~ .ptabs__tabs > .ptabs__tab:nth-child(4) { color: var(--blue); border-color: var(--blue); }
.ct-body .ptabs > input:nth-of-type(4):checked ~ .ptabs__panes > .ptabs__pane:nth-child(4) { display: block; }
.ct-body .ptabs > input:nth-of-type(5):checked ~ .ptabs__tabs > .ptabs__tab:nth-child(5) { color: var(--blue); border-color: var(--blue); }
.ct-body .ptabs > input:nth-of-type(5):checked ~ .ptabs__panes > .ptabs__pane:nth-child(5) { display: block; }
.ct-body .ptabs > input:nth-of-type(6):checked ~ .ptabs__tabs > .ptabs__tab:nth-child(6) { color: var(--blue); border-color: var(--blue); }
.ct-body .ptabs > input:nth-of-type(6):checked ~ .ptabs__panes > .ptabs__pane:nth-child(6) { display: block; }
.ct-body .ptabs > input:nth-of-type(7):checked ~ .ptabs__tabs > .ptabs__tab:nth-child(7) { color: var(--blue); border-color: var(--blue); }
.ct-body .ptabs > input:nth-of-type(7):checked ~ .ptabs__panes > .ptabs__pane:nth-child(7) { display: block; }
.ct-body .ptabs > input:nth-of-type(8):checked ~ .ptabs__tabs > .ptabs__tab:nth-child(8) { color: var(--blue); border-color: var(--blue); }
.ct-body .ptabs > input:nth-of-type(8):checked ~ .ptabs__panes > .ptabs__pane:nth-child(8) { display: block; }

.ct-faq { margin-block: 2rem; }
.ct-faq h2 { font-size: 1.3rem; margin: 0 0 .8rem; }
.ct-faq details { border: 1px solid var(--line); border-radius: 12px; background: #fff; margin-block-end: .5rem; }
.ct-faq summary { cursor: pointer; padding: .75rem 1rem; font-weight: 700; color: var(--ink); }
.ct-faq details p { margin: 0; padding: 0 1rem .9rem; color: var(--text); line-height: 2; }
.ct-helpful { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-block: 1.8rem; padding: .9rem 1.1rem; border-radius: 14px; background: var(--soft); }
.ct-helpful__btns { display: inline-flex; gap: .5rem; }
.ct-share { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-block-end: 1.6rem; font-size: .9rem; color: var(--muted); }
.ct-share a, .ct-share button { color: var(--blue); background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-decoration: none; font-weight: 700; }
/* real icons beside the words: Telegram, WhatsApp, copy link (2026-10-17) */
.ct-share__b { display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .8rem .35rem .9rem !important; border-radius: 999px; background: #f1f5fb !important; min-block-size: 40px; transition: background .15s; }
.ct-share__b svg { inline-size: 1.15rem; block-size: 1.15rem; flex: none; }
.ct-share__b--tg svg { color: #229ED9; }
.ct-share__b--wa svg { color: #25D366; }
.ct-share__b--copy svg { color: var(--blue); }
.ct-share__b:hover, .ct-share__b:focus-visible { background: #e3ebf8 !important; }
.ct-cta { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; margin-block: 1.6rem; padding: 1.2rem 1.4rem; border-radius: 18px; background: linear-gradient(120deg, #0b57e3, #0a7cff 55%, #10c9b6); color: #fff; }
.ct-cta b { font-size: 1.15rem; }
.ct-cta p { margin: .2rem 0 0; opacity: .9; font-size: .92rem; }
.ct-cta .btn { background: #fff; color: var(--blue); }
.ct-author { display: flex; gap: 1rem; padding: 1.1rem 1.2rem; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.ct-author b a { color: var(--ink); text-decoration: none; }
.ct-author small { display: block; color: var(--muted); }
.ct-author p { margin: .4rem 0 0; color: var(--text); font-size: .94rem; line-height: 1.95; }
.ct-related { background: var(--soft); }
.ct-related h2 { margin: 0 0 1.2rem; font-size: 1.3rem; }
@media (max-width: 900px) { .ct-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .ct-grid { grid-template-columns: 1fr; }
  .ct-body { font-size: 1rem; }
  .ct-body h2 { font-size: 1.28rem; }
  .ct-cta { flex-direction: column; align-items: flex-start; }
  .ct-cta .btn { inline-size: 100%; }
  .ct-author { flex-direction: column; }
}

/* ---- liveliness: motion that answers the visitor (all of it stands down for prefers-reduced-motion) ----------- */
/* the stars in the drawn Google result are in no brand font: keep them out of the font queue */
.r__stars { font-family: "Segoe UI Symbol", "Apple Symbols", system-ui, sans-serif; }

/* pages cross-fade instead of cutting; the header stays put */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .hd { view-transition-name: site-hd; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .2s; }
  ::view-transition-group(site-hd) { animation-duration: 0s; }
}

/* settle in once, from below (site-fx.js adds .rv only to what starts off-screen) */
.rv { opacity: 0; transform: translateY(20px); transition: opacity .55s cubic-bezier(.2, .7, .2, 1), transform .55s cubic-bezier(.2, .7, .2, 1); }
.rv.rv-in { opacity: 1; transform: none; }

/* a press is felt */
.btn:active { transform: translateY(1px) scale(.985); }

/* the drawn mini-screens in the feature cards lean in when the card is hovered */
.feat__art .row, .feat__art .chips span, .feat__art .coupon { transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.feat:hover .feat__art .row:nth-child(1) { transform: translateX(-5px); }
.feat:hover .feat__art .row:nth-child(2) { transform: translateX(-9px); transition-delay: .04s; }
.feat:hover .feat__art .row:nth-child(3) { transform: translateX(-5px); transition-delay: .08s; }
.feat:hover .feat__art .chips span:nth-child(odd) { transform: translateY(-3px); }
.feat:hover .feat__art .coupon { transform: rotate(-1.2deg) scale(1.02); }

/* an answer opens instead of jumping (browsers without ::details-content just snap, as before) */
@supports selector(::details-content) {
  :root { interpolate-size: allow-keywords; }
  .faq details::details-content, .ct-faq details::details-content, .fx-group::details-content, .ct-toc::details-content {
    block-size: 0; overflow: hidden; transition: block-size .28s ease, content-visibility .28s allow-discrete;
  }
  .faq details[open]::details-content, .ct-faq details[open]::details-content,
  .fx-group[open]::details-content, .ct-toc[open]::details-content { block-size: auto; }
}

/* the phone number says what is wrong, where you typed it */
.fx-err { margin: .55rem 0 0; color: var(--red); font-size: .88rem; font-weight: 700; text-align: center; animation: fx-in .25s ease; }
.is-shake { animation: fx-shake .38s cubic-bezier(.36, .07, .19, .97); }
input[aria-invalid="true"] { outline: 2px solid var(--red); outline-offset: 2px; }
@keyframes fx-shake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-6px); } 40%, 60% { transform: translateX(6px); } }
@keyframes fx-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* where you are in the long list */
.fx-nav a[aria-current="true"] { background: var(--ink); color: #fff; }

/* reading progress on an article: a thin line that fills as the page scrolls (CSS only) */
.ct-progress { position: fixed; inset-block-start: 0; inset-inline: 0; block-size: 3px; z-index: 60; transform-origin: right center;
  transform: scaleX(0); background: linear-gradient(90deg, var(--blue), var(--teal)); pointer-events: none; }
@supports (animation-timeline: scroll()) {
  .ct-progress { animation: ct-prog linear both; animation-timeline: scroll(root); }
  @keyframes ct-prog { to { transform: scaleX(1); } }
}

/* touch: the chips are a real target */
@media (max-width: 640px) {
  .fx-nav a, .ct-cats a { min-block-size: 44px; }
  .ft__col a { display: inline-block; padding-block: .35rem; }
}
.ft__call, .hd__phone { min-block-size: 44px; display: inline-flex; align-items: center; }

@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
  .ct-progress { display: none; }
}

/* ---- the drawn shop: a store in the middle, the merchant's panel on the right, the customer's phone on the left -- */
/* two cards, not five: one shows the merchant's day, one shows what happens after a payment. Nothing floats over a product. */
.stage { position: relative; max-inline-size: 1180px; margin: clamp(52px, 7vw, 84px) auto 8px; padding: 0 24px 30px; }
.scene { position: relative; display: grid; grid-template-columns: 236px minmax(0, 1fr) 236px; gap: 22px; align-items: center; }
.scene::before {
  content: ''; position: absolute; inset: 8% -2% -8%; z-index: -1; border-radius: 40px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 8%, #fff), color-mix(in srgb, var(--teal) 13%, #fff));
}
.win { animation: st-float 9s ease-in-out infinite; }
.side { display: grid; gap: 18px; align-content: center; }
.side--a { z-index: 2; margin-inline-end: -22px; }
.side--b { z-index: 2; margin-inline-start: -22px; }

.lc { position: relative; padding: 1rem 1.05rem; border-radius: 18px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-lg); text-align: start; font-size: .82rem; transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s; }
.lc:hover { transform: translateY(-4px); box-shadow: 0 2px 6px rgb(12 24 56 / .06), 0 36px 70px rgb(12 24 56 / .18); }
.lc__t { display: flex; align-items: center; gap: .5rem; margin: 0 0 .6rem; color: var(--ink); font-weight: 800; font-size: .84rem; }
.lc__t em { display: grid; place-items: center; inline-size: 26px; block-size: 26px; border-radius: 9px; background: color-mix(in srgb, var(--teal) 18%, #fff); color: var(--teal-d); font-style: normal; }
.lc__t em svg { inline-size: 15px; block-size: 15px; }
.lc__t em.is-blue { background: color-mix(in srgb, var(--blue) 10%, #fff); color: var(--blue); }

/* the merchant's day: today's sales, then the orders as they arrive — each paid a different way */
.lc-dash__n { display: block; margin: -.2rem 0 .55rem; color: var(--ink); font-size: 1.25rem; font-weight: 900; font-variant-numeric: tabular-nums; animation: stat-bump 4s ease-in-out infinite; }
.lc-dash__n small { color: var(--muted); font-size: .74rem; font-weight: 600; }
@keyframes stat-bump { 0%, 8% { transform: none; } 3% { transform: scale(1.06); color: var(--teal-d); } }
.f-stat__bars { display: flex; align-items: flex-end; gap: 6px; block-size: 46px; }
.f-stat__bars i { flex: 1; border-radius: 4px; background: linear-gradient(180deg, var(--sky), var(--blue)); transform-origin: bottom; animation: bar-grow 6s ease-in-out infinite; }
.f-stat__bars i:nth-child(1) { block-size: 40%; animation-delay: 0s; }
.f-stat__bars i:nth-child(2) { block-size: 62%; animation-delay: .15s; }
.f-stat__bars i:nth-child(3) { block-size: 48%; animation-delay: .3s; }
.f-stat__bars i:nth-child(4) { block-size: 78%; animation-delay: .45s; }
.f-stat__bars i:nth-child(5) { block-size: 66%; animation-delay: .6s; }
.f-stat__bars i:nth-child(6) { block-size: 100%; animation-delay: .75s; background: linear-gradient(180deg, #3ce3cf, #10b8a6); }
@keyframes bar-grow { 0% { transform: scaleY(.2); } 25%, 85% { transform: scaleY(1); } 100% { transform: scaleY(.2); } }
.lc-dash__orders { margin-block-start: .9rem; padding-block-start: .8rem; border-block-start: 1px solid var(--line); }
.lc-dash__orders .lc__t { margin-block-end: .4rem; }
.lc-dash__orders .lc__t em { animation: ord-ping 4s ease-in-out infinite; }
@keyframes ord-ping { 0%, 6% { transform: scale(1); } 2% { transform: scale(1.22); } }
.lc-orders__list { position: relative; margin: 0; padding: 0; list-style: none; block-size: 2.7rem; }
.lc-orders__list li { position: absolute; inset: 0; display: grid; align-content: center; opacity: 0; }
.lc-orders__list b { display: block; color: var(--ink); font-size: .86rem; }
.lc-orders__list small { color: var(--muted); font-size: .76rem; }
.lc-orders__list li:nth-child(1), .lc-next__list > div:nth-child(1) { animation: ord-1 12s ease-in-out infinite; }
.lc-orders__list li:nth-child(2), .lc-next__list > div:nth-child(2) { animation: ord-2 12s ease-in-out infinite; }
.lc-orders__list li:nth-child(3), .lc-next__list > div:nth-child(3) { animation: ord-3 12s ease-in-out infinite; }
@keyframes ord-1 { 0% { opacity: 0; transform: translateY(8px); } 4%, 30% { opacity: 1; transform: none; } 34%, 100% { opacity: 0; transform: translateY(-8px); } }
@keyframes ord-2 { 0%, 33% { opacity: 0; transform: translateY(8px); } 37%, 63% { opacity: 1; transform: none; } 67%, 100% { opacity: 0; transform: translateY(-8px); } }
@keyframes ord-3 { 0%, 66% { opacity: 0; transform: translateY(8px); } 70%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-8px); } }

/* after a payment: the parcel, the discount, the text to the customer — one card, three moments, in step with the orders */
.lc-next__list { position: relative; block-size: 4.6rem; }
.lc-next__list > div { position: absolute; inset: 0; display: grid; grid-template-columns: auto 1fr; gap: .2rem .6rem; align-content: center; opacity: 0; }
.lc-next__list i { grid-row: 1 / 3; align-self: start; margin-block-start: .2rem; display: grid; place-items: center; inline-size: 30px; block-size: 30px; border-radius: 10px; font-style: normal; }
.lc-next__list i svg { inline-size: 16px; block-size: 16px; }
.lc-next__list i.is-blue { background: color-mix(in srgb, var(--blue) 10%, #fff); color: var(--blue); }
.lc-next__list i.is-rose { background: #ffe4ec; color: #b4234f; }
.lc-next__list i.is-teal { background: color-mix(in srgb, var(--teal) 18%, #fff); color: var(--teal-d); }
.lc-next__list b { color: var(--ink); font-size: .86rem; }
.lc-next__list small { color: var(--muted); font-size: .76rem; line-height: 1.6; }
.lc-next__list small s { color: #a4acc0; }
.lc-next__code { display: inline-block; padding: 0 .4rem; border: 1.5px dashed #b4234f; border-radius: 6px; color: #b4234f; font-weight: 800; letter-spacing: .05em; direction: ltr; }

/* the customer's phone: a real product, and the button answers */
.phone { position: relative; z-index: 3; inline-size: 160px; margin: 0 auto -6px 12px; padding: 7px; border-radius: 30px; background: var(--ink); box-shadow: 0 30px 60px rgb(12 24 56 / .3); animation: ph-bob 7s ease-in-out infinite; }
.phone__scr { border-radius: 24px; background: #fff; padding: 20px 11px 11px; text-align: start; font-size: .72rem; }
.phone__scr .pc__img { margin-block-end: 8px; aspect-ratio: 1; }
.phone__scr b { display: block; color: var(--ink); font-size: .78rem; }
.phone__scr small { display: block; color: var(--muted); font-size: .7rem; }
.phone__scr span { display: grid; place-items: center; block-size: 32px; margin-block-start: 10px; border-radius: 10px; background: var(--blue); color: #fff; font-weight: 700; }
@keyframes ph-bob { 50% { transform: translateY(-9px) rotate(-1deg); } }
.phone__btn { position: relative; animation: btn-bg 6s ease-in-out infinite; }
.phone__btn u { position: absolute; inset: 0; display: grid; place-items: center; text-decoration: none; }
.phone__btn u:first-child { animation: btn-a 6s ease-in-out infinite; }
.phone__btn u:last-child { opacity: 0; animation: btn-b 6s ease-in-out infinite; }
@keyframes btn-a { 0%, 45% { opacity: 1; } 52%, 92% { opacity: 0; } 100% { opacity: 1; } }
@keyframes btn-b { 0%, 45% { opacity: 0; } 52%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes btn-bg { 0%, 45% { background: var(--blue); } 52%, 92% { background: var(--teal-d); } 100% { background: var(--blue); } }

/* the scene assembles once on load: the store first, then the rest */
.scene > * { animation: sc-in .7s cubic-bezier(.2, .7, .2, 1) both; }
.scene .win { animation: sc-in .7s cubic-bezier(.2, .7, .2, 1) both, st-float 9s ease-in-out .7s infinite; }
.side--a .lc { animation-delay: .25s; }
.side--b .phone { animation: sc-in .7s cubic-bezier(.2, .7, .2, 1) .3s both, ph-bob 7s ease-in-out 1s infinite; }
.side--b .lc { animation-delay: .45s; }
@keyframes sc-in { from { opacity: 0; transform: translateY(26px) scale(.97); } to { opacity: 1; transform: none; } }

@media (max-width: 1240px) {
  .scene { grid-template-columns: 212px minmax(0, 1fr) 212px; gap: 14px; }
  .side--a { margin-inline-end: -12px; } .side--b { margin-inline-start: -12px; }
  .sf { padding: 16px 18px 22px; }
  .sf__hero { padding: 20px 22px; }
  .sf__hero b { font-size: 1.2rem; }
  .sf__grid { gap: 12px; }
}
/* tablet and phone: the store on top, the two cards side by side beneath it; the phone steps aside */
@media (max-width: 1000px) {
  .scene { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
  .scene::before { inset: 10% -2% -4%; }
  .win { grid-column: 1 / -1; order: -1; }
  .side { display: contents; }
  .side--a, .side--b { margin: 0; }
  .phone { display: none; }
  .scene > * { animation-delay: 0s; }
  .side .lc { animation-delay: .25s; }
}
@media (max-width: 640px) {
  .stage { padding-inline: 12px; }
  .scene { gap: 10px; }
  .scene::before { border-radius: 26px; }
  .lc { padding: .8rem .85rem; border-radius: 14px; }
  .lc__t { font-size: .8rem; margin-block-end: .45rem; }
  .lc-dash__n { font-size: 1.05rem; }
  .f-stat__bars { block-size: 36px; }
  .lc-next__list { block-size: 5.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .scene > *, .scene .win, .side--b .phone, .sf__art img, .lc-orders__list li, .lc-next__list > div, .lc-dash__orders .lc__t em, .lc-dash__n, .f-stat__bars i, .phone__btn, .phone__btn u { animation: none; }
  .lc-orders__list li:first-child, .lc-next__list > div:first-child { opacity: 1; }
}