@font-face{font-family:Vazirmatn;src:url(/assets/vazirmatn.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{
  --bg:#f4f8fc;--navy:#10233a;--ink:#4d5d73;--blue:#1a6fd0;--green:#127a3e;--link:#1458b8;
  --grad:linear-gradient(135deg,#1a6fd0,#127a3e);--line:rgb(16 35 58/.09);
  --glass:rgb(255 255 255/.66);--glass-border:rgb(255 255 255/.92);
  --shadow:0 12px 34px -14px rgb(24 70 140/.28),inset 0 1px 0 rgb(255 255 255/.95);
  --r:22px;--max:1120px;--gutter:clamp(16px,4vw,32px)
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--navy);font:400 17px/1.85 Vazirmatn,Tahoma,system-ui,sans-serif;overflow-x:hidden}
a{color:var(--link)}
img,svg{display:block}
.wrap{width:min(var(--max),100% - 2*var(--gutter));margin-inline:auto}
.skip{position:absolute;inset-inline-start:-999px;top:8px;background:#fff;padding:8px 14px;border-radius:12px;z-index:50}
.skip:focus{inset-inline-start:8px}
:focus-visible{outline:3px solid rgb(26 111 208/.45);outline-offset:3px;border-radius:12px}

/* header */
.top{position:sticky;top:0;z-index:20;background:rgb(244 248 252/.72);backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:20px;min-height:66px}
.brand{display:flex;align-items:center}
.brand img{height:34px;width:auto}
.nav{display:flex;gap:22px;margin-inline-start:auto}
.nav a{color:var(--ink);text-decoration:none;font-size:15px;font-weight:500}
.nav a:hover{color:var(--navy)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 22px;border-radius:16px;font:inherit;font-weight:700;font-size:16px;text-decoration:none;white-space:nowrap;transition:transform .2s,box-shadow .2s}
.btn svg{width:20px;height:20px;flex:none}
.btn.primary{background:var(--grad);color:#fff;box-shadow:0 12px 26px -10px rgb(26 111 208/.65)}
.btn.primary:hover{transform:translateY(-2px);box-shadow:0 16px 32px -10px rgb(26 111 208/.7)}
.btn.ghost{background:var(--glass);color:var(--navy);border:1px solid var(--glass-border);box-shadow:var(--shadow)}
.btn.small{padding:9px 16px;font-size:15px;border-radius:14px}
@media (max-width:820px){.nav{display:none}.top .btn.small{margin-inline-start:auto}}

/* hero */
.hero{position:relative;isolation:isolate;padding:clamp(40px,7vw,88px) 0 clamp(56px,8vw,104px);overflow:hidden}
.sky{position:absolute;inset:0;z-index:-2;background:
  radial-gradient(60% 55% at 85% 20%,rgb(26 111 208/.22),transparent 70%),
  radial-gradient(50% 50% at 10% 70%,rgb(18 122 62/.16),transparent 70%),
  radial-gradient(40% 40% at 50% 0%,rgb(140 190 250/.35),transparent 70%),var(--bg)}
#sky{position:absolute;inset:0;width:100%;height:100%;z-index:-1;opacity:0;transition:opacity 1.2s}
#sky.on{opacity:1}
.hero::after{content:"";position:absolute;inset:auto 0 0;height:120px;z-index:-1;background:linear-gradient(transparent,var(--bg))}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,64px);align-items:center}
.chip{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;background:var(--glass);border:1px solid var(--glass-border);box-shadow:var(--shadow);font-size:14px;font-weight:600;color:var(--ink)}
.chip i{width:8px;height:8px;border-radius:50%;background:var(--grad)}
h1{font-size:clamp(34px,5.2vw,58px);line-height:1.35;font-weight:900;margin:18px 0 18px;letter-spacing:-.5px}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{font-size:clamp(17px,1.6vw,19px);color:var(--ink);margin:0 0 28px;max-width:34em}
.ctas{display:flex;flex-wrap:wrap;gap:12px}
.note{margin-top:18px;font-size:14px;color:var(--ink);display:flex;flex-wrap:wrap;gap:6px 16px}
.note span{display:inline-flex;align-items:center;gap:6px}
.note svg{width:16px;height:16px;color:var(--green)}
@media (max-width:900px){.hero .wrap{grid-template-columns:1fr}.stage{margin-inline:auto}}

/* The whole purchase as the customer and the seller see it: the customer's Instagram chat, the payment page that opens from
   the invoice (a sheet over the chat), and the seller's Telegram (a card beside the phone). Texts as Ousta sends them. */
.stage{position:relative;width:min(340px,100%);display:flex;flex-direction:column;align-items:center;gap:16px}
/* min-height:0 on both: the phone keeps its ratio and the chat scrolls inside it, instead of both growing with the messages */
.phone{width:100%;aspect-ratio:9/18.5;min-height:0;border-radius:44px;padding:12px;background:linear-gradient(160deg,#1d2b3f,#0d1726);box-shadow:0 40px 80px -30px rgb(16 35 58/.55),0 0 0 1px rgb(255 255 255/.06) inset;position:relative}
.screen{height:100%;border-radius:34px;background:#fff;overflow:hidden;display:flex;flex-direction:column;direction:rtl;position:relative}
.bar{display:flex;align-items:center;gap:10px;padding:14px 16px 12px;border-bottom:1px solid #eef1f5}
.av{width:34px;height:34px;border-radius:50%;background:conic-gradient(from 210deg,#f9a03f,#e1306c,#833ab4,#f9a03f);padding:2px}
.av b{display:block;width:100%;height:100%;border-radius:50%;background:#fde8ef;border:2px solid #fff}
.bar strong{font-size:14px;line-height:1.3}
.bar small{display:block;font-size:11px;color:#8a97a8;font-weight:400}
.chat{flex:1;min-height:0;padding:14px 12px;display:flex;flex-direction:column;gap:8px;overflow-y:auto;scrollbar-width:none;font-size:13px;line-height:1.75}
.chat::-webkit-scrollbar{display:none}
.chat>*{flex:none}
.js .chat [data-step]:not(.show){display:none}
.chat .show{animation:pop .42s cubic-bezier(.2,.7,.2,1)}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.98)}}
.msg{max-width:82%;padding:8px 13px;border-radius:20px;overflow:hidden}
/* the customer's own phone: their messages in Instagram's colour on the right, the shop's (the assistant's) grey on the left */
.msg.me{align-self:flex-start;background:linear-gradient(135deg,#3b6cf6,#7a45e6);color:#fff;border-end-start-radius:6px}
.msg.bot{align-self:flex-end;background:#efefef;color:#111;border-end-end-radius:6px}
.msg.wide{max-width:88%;font-size:12.5px}
.msg .dim{color:#5d6876}
.msg .rule{display:block;height:1px;margin:6px 0;background:#cfd5dc}
.msg bdi{font-size:11.5px;font-weight:700;letter-spacing:.2px}
.stage bdi{white-space:nowrap}  /* an order code breaks at its hyphens, and the bidi order then puts a «-» first */
.btns{display:flex;flex-direction:column;margin:9px -13px -8px;border-top:1px solid #dcdfe4}
.btns span,.tg-btns span{position:relative;padding:8px 6px;text-align:center;font-weight:700;font-size:12.5px;color:#1b2430;background:#fafafa;transition:background .2s}
.btns span+span{border-top:1px solid #e3e6ea}
.card{align-self:flex-end;width:78%;border-radius:18px;overflow:hidden;border:1px solid #eceff3;background:#fff}
.card .pic{height:128px;display:grid;place-items:center;background:#fff;border-bottom:1px solid #f0f2f5}
.card .pic img{height:118px;width:auto}
.card .tx{padding:8px 12px 4px;font-size:12.5px;line-height:1.7;color:#1b2430}
.card .tx b{display:block;font-size:13px}
.card .go{position:relative;margin:6px 10px 10px;padding:7px;border-radius:12px;background:#f2f4f7;text-align:center;font-size:12.5px;font-weight:700;color:#1b2430;transition:background .2s}
/* a tap: the button darkens under a growing ring */
.tap{background:#dfe5ee!important}
.tap::after{content:"";position:absolute;inset-inline-start:50%;top:50%;width:26px;height:26px;margin:-13px;border-radius:50%;background:rgb(26 111 208/.35);animation:ring .5s ease-out}
@keyframes ring{from{transform:scale(.3);opacity:1}to{transform:scale(2.2);opacity:0}}
.typing{align-self:flex-end;display:none;gap:4px;padding:11px 14px;border-radius:20px;background:#f0f2f5}
.typing.show{display:flex}
.typing i{width:6px;height:6px;border-radius:50%;background:#9aa6b5;animation:dot 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-4px);opacity:1}}

/* the payment page, opened from the invoice's button */
.sheet{position:absolute;inset:9% 0 0;z-index:3;background:#f5f7fa;border-radius:22px 22px 0 0;box-shadow:0 -16px 40px -12px rgb(16 35 58/.35);transform:translateY(104%);transition:transform .6s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;font-size:11.5px;line-height:1.6;color:#1b2430}
.sheet.open{transform:none}
.sh-top{display:flex;justify-content:space-between;align-items:center;padding:12px 14px 8px;font-size:11px;color:#5d6876}
.sh-top b{font-size:12.5px;color:#1b2430}
.sh-steps{display:flex;gap:4px;list-style:none;margin:0;padding:0 12px 8px}
.sh-steps li{flex:1;text-align:center;font-size:9.5px;padding-top:6px;border-top:3px solid #dfe4ea;color:#8a97a8}
/* once the receipt is sent the page's stepper is at «تأیید فروشگاه» (receipt_submitted), as on the real page */
.sh-steps li.on,.sheet.sent .sh-steps li:nth-child(3){border-color:#1a6fd0;color:#1a6fd0;font-weight:700}
.sh-body{flex:1;overflow:hidden;padding:0 12px 12px;display:flex;flex-direction:column;gap:6px}
.sh-amount{background:linear-gradient(135deg,#1a6fd0,#127a3e);color:#fff;border-radius:14px;padding:9px 12px}
.sh-amount small{display:block;opacity:.85;font-size:10.5px}
.sh-amount b{display:block;font-size:15px}
.sh-amount span{font-size:10.5px;opacity:.9}
.sh-h{margin:4px 0 0;font-weight:800;font-size:11.5px}
.sh-field{background:#fff;border:1px solid #e3e7ec;border-radius:10px;padding:4px 10px;min-height:42px}
.sh-field small{display:block;font-size:9.5px;color:#8a97a8}
.sh-field i{font-style:normal;font-size:11.5px;min-height:18px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sh-pick{border:1.5px dashed #b9c4d2;border-radius:10px;padding:7px;text-align:center;color:#4d5d73;font-weight:700;transition:all .3s}
.sh-pick.ok{border-style:solid;border-color:#127a3e;color:#127a3e;background:rgb(18 122 62/.06)}
.sh-send{position:relative;margin-top:auto;padding:9px;border-radius:12px;background:linear-gradient(135deg,#1a6fd0,#127a3e);color:#fff;text-align:center;font-weight:800;font-size:12px;overflow:hidden}
.sh-done{display:none;flex:1;padding:22px 16px;text-align:center;flex-direction:column;gap:8px;align-items:center}
.sheet.sent .sh-body{display:none}
.sheet.sent .sh-done{display:flex}
.sh-done b{font-size:13px}
.sh-done p{margin:0;color:#4d5d73}
.sh-code{background:#fff;border:1px solid #e3e7ec;border-radius:12px;padding:8px 12px;width:100%}
.sh-code small{display:block;color:#8a97a8;font-size:10px}

/* the seller's Telegram, beside the phone: high up, so the chat's newest message (the approval DM) stays in sight under it */
.seller{position:absolute;z-index:4;inset-inline-end:-34px;top:7%;width:244px;border-radius:18px;background:#fff;border:1px solid #e3e8ef;box-shadow:0 24px 50px -18px rgb(16 35 58/.45);font-size:11.5px;line-height:1.65;color:#1b2430;overflow:hidden;opacity:0;visibility:hidden;transform:translateX(-14px) scale(.96);transition:opacity .45s,transform .45s,visibility .45s}
.seller.on{opacity:1;visibility:visible;transform:none}
.tg-head{display:flex;align-items:center;gap:9px;padding:9px 12px;background:linear-gradient(135deg,#2aabee,#229ed9);color:#fff}
.tg-head img{width:30px;height:30px;border-radius:50%}
.tg-head small{display:block;font-size:10px;opacity:.9}
.tg-body{padding:10px 12px}
.tg-photo{height:46px;border-radius:10px;margin-bottom:8px;background:repeating-linear-gradient(0deg,#eef1f5 0 6px,#e4e8ee 6px 7px);display:grid;place-items:center;font-size:18px}
.tg-body p{margin:0}
.tg-ok{display:none;margin-top:6px!important;color:#127a3e;font-weight:700}
.seller.done .tg-ok{display:block}
.seller.done .tg-btns{display:none}
.tg-btns{display:flex;border-top:1px solid #edf0f3}
.tg-btns span{flex:1;background:#fff}
.tg-btns span+span{border-inline-start:1px solid #edf0f3}
/* the seller's panel (the Telegram Mini App) on the order: «🚚 ارسال شد» is what sends the customer the shipped DM */
.app-top{display:flex;align-items:center;gap:6px;color:#5d6876}
.badge{margin-inline-start:auto;padding:0 9px;border-radius:99px;background:rgb(18 122 62/.1);color:#127a3e;font-size:10.5px;font-weight:700}
.seller.done .was,.seller:not(.done) .now,.seller.done [data-tap="ship"]{display:none}  /* as the app redraws it */
.app-sum{font-size:15px;font-weight:800}
.tg-body .app-h{margin-top:6px;font-weight:800}
.app-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:4px}
.app-grid span{position:relative;padding:5px 2px;border-radius:9px;background:#f2f4f7;text-align:center;font-weight:700;font-size:10.5px;white-space:nowrap;transition:background .2s}
.app-grid .no{color:#b4232a}
.replay{font:inherit;font-weight:700;font-size:14px;color:var(--link);background:var(--glass);border:1px solid var(--glass-border);box-shadow:var(--shadow);padding:8px 18px;border-radius:999px;cursor:pointer;visibility:hidden}
.replay.on{visibility:visible}
/* on a phone there is no room beside it: it comes down over the top of the screen, like a notification */
@media (max-width:520px){.seller{inset-inline:14px;width:auto;transform:translateY(-14px) scale(.96)}}
.compose{margin:8px 12px 14px;padding:9px 14px;border-radius:999px;border:1px solid #e6e9ee;font-size:12.5px;color:#a0aab7}

/* sections */
section{padding:clamp(56px,8vw,104px) 0;scroll-margin-top:70px}
.kicker{font-size:14px;font-weight:700;color:var(--blue);letter-spacing:.3px;margin:0 0 8px}
h2{font-size:clamp(27px,3.4vw,40px);line-height:1.45;font-weight:850;margin:0 0 14px}
.sub{color:var(--ink);max-width:40em;margin:0}
.head{margin-bottom:clamp(28px,4vw,48px)}
.glass{background:var(--glass);border:1px solid var(--glass-border);box-shadow:var(--shadow);border-radius:var(--r);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}

.who{padding-top:0}
.tags{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.tags span{padding:9px 18px;border-radius:999px;background:#fff;border:1px solid var(--line);font-weight:600;font-size:15px;color:var(--navy)}
.who p{text-align:center;color:var(--ink);margin:0 0 18px;font-size:15px}

.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:1000px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.grid{grid-template-columns:1fr}}
.feat{padding:24px 22px 22px}
.ico{width:46px;height:46px;border-radius:14px;background:var(--grad);display:grid;place-items:center;color:#fff;margin-bottom:16px;box-shadow:0 10px 20px -10px rgb(26 111 208/.7)}
.ico svg{width:24px;height:24px}
.feat h3{font-size:18px;line-height:1.6;margin:0 0 6px;font-weight:800}
.feat p{margin:0;color:var(--ink);font-size:15.5px;line-height:1.85}

.how{background:linear-gradient(180deg,transparent,rgb(26 111 208/.05) 30%,rgb(18 122 62/.05) 70%,transparent)}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:s;position:relative}
.steps::before{content:"";position:absolute;top:27px;inset-inline:12% 12%;height:3px;border-radius:3px;background:var(--line)}
.steps::after{content:"";position:absolute;top:27px;inset-inline-start:12%;height:3px;border-radius:3px;background:var(--grad);width:0;transition:width 1.6s cubic-bezier(.2,.7,.2,1) .2s}
.steps.in::after{width:76%}
.steps li{counter-increment:s;position:relative;text-align:center;padding:0 6px}
.steps li::before{content:counter(s,persian);display:grid;place-items:center;width:56px;height:56px;margin:0 auto 16px;border-radius:50%;background:#fff;border:3px solid transparent;background-image:linear-gradient(#fff,#fff),var(--grad);background-origin:border-box;background-clip:padding-box,border-box;font-weight:900;font-size:22px;color:var(--blue);position:relative;z-index:1;box-shadow:0 10px 24px -12px rgb(24 70 140/.4)}
.steps h3{font-size:18px;margin:0 0 6px;font-weight:800;line-height:1.6}
.steps p{margin:0;color:var(--ink);font-size:15.5px}
@media (max-width:860px){.steps{grid-template-columns:1fr;gap:26px}.steps::before,.steps::after{display:none}.steps li{text-align:start;padding-inline-start:76px;min-height:56px}.steps li::before{position:absolute;inset-inline-start:0;top:0;margin:0}}

.panel .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,64px);align-items:center}
@media (max-width:860px){.panel .wrap{grid-template-columns:1fr}}
.checks{list-style:none;padding:0;margin:22px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:480px){.checks{grid-template-columns:1fr}}
.checks li{display:flex;gap:10px;align-items:flex-start;font-weight:600;font-size:15.5px}
.checks svg{width:22px;height:22px;flex:none;color:var(--green);margin-top:3px}
.tg{padding:22px;display:grid;gap:12px}
.tg .row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;background:#fff;border:1px solid var(--line)}
.tg .row b{font-size:15px}
.tg .row small{display:block;color:var(--ink);font-size:13px;font-weight:400}
.tg .dot{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:#fff;flex:none}
.tg .dot svg{width:21px;height:21px}
.tg .pill{margin-inline-start:auto;font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;background:rgb(18 122 62/.1);color:var(--green)}

.faq .wrap{max-width:820px}
details{border-radius:18px;background:#fff;border:1px solid var(--line);margin-bottom:12px;transition:box-shadow .2s}
details[open]{box-shadow:var(--shadow)}
summary{list-style:none;cursor:pointer;padding:18px 22px;font-weight:800;font-size:17px;display:flex;align-items:center;gap:12px}
summary::-webkit-details-marker{display:none}
summary::after{content:"";margin-inline-start:auto;width:11px;height:11px;border-inline-end:2.5px solid var(--blue);border-bottom:2.5px solid var(--blue);transform:rotate(45deg);transition:transform .25s;flex:none}
details[open] summary::after{transform:rotate(-135deg)}
details p{margin:0;padding:0 22px 20px;color:var(--ink)}

.final{padding-top:0;padding-bottom:clamp(64px,8vw,110px)}
.final .box{position:relative;overflow:hidden;border-radius:30px;padding:clamp(34px,6vw,64px);background:var(--grad);color:#fff;text-align:center;box-shadow:0 30px 60px -28px rgb(26 111 208/.7)}
.final .box::before{content:"";position:absolute;inset:-40%;background:radial-gradient(35% 35% at 30% 30%,rgb(255 255 255/.22),transparent 70%),radial-gradient(30% 30% at 75% 70%,rgb(255 255 255/.14),transparent 70%);animation:drift 14s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate(6%,-4%) rotate(8deg)}}
.final h2{color:#fff;position:relative}
.final p{position:relative;margin:0 auto 26px;max-width:32em;color:rgb(255 255 255/.9)}
.final .btn{position:relative;background:#fff;color:var(--navy);box-shadow:0 14px 30px -12px rgb(0 0 0/.35)}
.final .handle{position:relative;display:block;margin-top:14px;font-size:15px;color:rgb(255 255 255/.85);direction:ltr}
.final .help{position:relative;display:block;margin-top:6px;font-size:14px;color:rgb(255 255 255/.8)}
.final .help a{color:#fff;font-weight:700}

footer{border-top:1px solid var(--line);padding:26px 0 calc(26px + env(safe-area-inset-bottom));color:var(--ink);font-size:14px}
footer .wrap{display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;align-items:center}
footer a{text-decoration:none}
footer .mark{display:inline-flex;align-items:center;gap:12px}
footer .mark img{height:24px;width:auto}
footer .links{display:flex;flex-wrap:wrap;gap:6px 20px}

/* scroll reveal: only when the script runs, so the page reads without it */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{opacity:1;transform:none}
.js .grid .reveal:nth-child(4n+2),.js .steps li:nth-child(2){transition-delay:.08s}
.js .grid .reveal:nth-child(4n+3),.js .steps li:nth-child(3){transition-delay:.16s}
.js .grid .reveal:nth-child(4n+4),.js .steps li:nth-child(4){transition-delay:.24s}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none}.chat .show{animation:none}.final .box::before{animation:none}.steps::after{transition:none}}

/* «دایرکت هوشمند اینستاگرام چیست»: the answer first, then the difference in a table (answer engines quote both) */
.what .wrap{max-width:900px}
.answer{font-size:clamp(17px,1.7vw,19px);color:var(--navy);margin:0 0 22px}
.compare{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;font-size:15px}
.compare th,.compare td{padding:12px 14px;text-align:start;vertical-align:top;border-bottom:1px solid var(--line)}
.compare tr:last-child td{border-bottom:0}
.compare thead th{background:#f3f7fc;font-weight:800}
.compare td:first-child{font-weight:700;width:30%}
.compare td.us{color:var(--green);font-weight:700}
@media (max-width:640px){.compare{font-size:13.5px}.compare th,.compare td{padding:10px 9px}}

/* the about page */
.doc{padding:clamp(36px,6vw,72px) 0}
.doc .wrap{max-width:820px}
.doc h1{font-size:clamp(30px,4.4vw,46px);margin-top:6px}
.doc h2{margin-top:40px;font-size:clamp(23px,2.8vw,30px)}
.doc p{color:var(--ink)}
.doc .answer{color:var(--navy)}
.crumbs{font-size:14px;color:var(--ink)}
.crumbs a{text-decoration:none}
.facts{display:grid;grid-template-columns:max-content 1fr;gap:10px 22px;margin:0;padding:24px}
.facts dt{font-weight:800}
.facts dd{margin:0;color:var(--ink)}
@media (max-width:560px){.facts{grid-template-columns:1fr;gap:2px}.facts dd{margin-bottom:12px}}
.doc ul{padding-inline-start:22px;color:var(--ink)}
.doc li{margin-bottom:6px}

/* links between pages: business types, «more» under a feature, related pages, the footer's list (tools/site_pages.py) */
.tags a{padding:9px 18px;border-radius:999px;background:#fff;border:1px solid var(--line);font-weight:600;font-size:15px;color:var(--link);text-decoration:none}
.tags a:hover{border-color:var(--link)}
.feat .more{display:inline-block;margin-top:10px;margin-inline-end:14px;font-weight:700;font-size:14.5px;text-decoration:none}
.related{margin-top:48px}
.related ul{list-style:none;padding:0;margin:14px 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;color:inherit}
.related li{margin:0}
.related a{display:block;height:100%;padding:14px 16px;border-radius:16px;background:#fff;border:1px solid var(--line);text-decoration:none;color:var(--navy);font-weight:800;box-shadow:var(--shadow)}
.related a small{display:block;color:var(--ink);font-weight:400;font-size:13.5px;margin-top:4px}
.faq-block{margin-top:40px}
.faq-block h2{margin-bottom:14px}
.price td:nth-child(n+3){white-space:nowrap}
.doc .final{margin-top:clamp(40px,6vw,64px)}
.foot-nav{display:flex;flex-wrap:wrap;gap:6px 18px;width:100%;padding-bottom:14px;margin-bottom:4px;border-bottom:1px solid var(--line);font-size:14px}
.foot-nav:empty{display:none}
.doc .final p{color:rgb(255 255 255/.9)}
.doc .final h2{margin-top:0}

/* articles (tools/site_pages.py): date line, numbered steps, ready messages, figures, sources, the list of articles */
.doc .meta{font-size:14px;color:var(--ink);margin:-6px 0 18px}
.doc ol{padding-inline-start:24px;color:var(--ink);list-style-type:persian}
.doc ol li{margin-bottom:8px}
.doc h3{margin:26px 0 8px;font-size:18px;color:var(--navy)}
.tpl{margin:0 0 8px;padding:14px 18px;border-radius:16px;background:#fff;border:1px solid var(--line);border-inline-start:4px solid var(--green);color:var(--navy);font-size:15.5px;line-height:2}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin:18px 0}
.stats div{padding:16px 18px;border-radius:16px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}
.stats b{display:block;font-size:30px;line-height:1.3;color:var(--navy)}
.stats span{display:block;font-size:14px;color:var(--ink);margin-top:4px}
.doc .note{font-size:13.5px}
.sources{margin-top:40px}
.sources ol{font-size:14px;overflow-wrap:anywhere}
.doc .cards{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:12px}
.cards li{margin:0}
.cards a{display:block;padding:16px 18px;border-radius:16px;background:#fff;border:1px solid var(--line);text-decoration:none;color:var(--navy);font-weight:800;font-size:18px;box-shadow:var(--shadow)}
.cards a small{display:block;color:var(--ink);font-weight:400;font-size:14px;margin-top:6px}