/* سایت عمومی املاگو — همان زبان بصری اپ (design/tokens.json v2، ADR-011):
   پس‌زمینهٔ تقریباً سفید با واش پاستلی، تایپ مشکی ۹۰۰، CTA قرص مشکی، خودکار قرمز معلم.
   مقدارها از tokens.json کپی شده‌اند؛ اگر آنجا عوض شد، این‌جا هم. */
@font-face{font-family:Vazirmatn;src:url(/a/fonts/vazirmatn-regular.woff2) format("woff2");font-weight:400 600;font-display:swap}
@font-face{font-family:Vazirmatn;src:url(/a/fonts/vazirmatn-bold.woff2) format("woff2");font-weight:700 800;font-display:swap}
@font-face{font-family:Vazirmatn;src:url(/a/fonts/vazirmatn-black.woff2) format("woff2");font-weight:900;font-display:swap}
@font-face{font-family:Naskh;src:url(/a/fonts/naskh.woff2) format("woff2");font-display:swap}

:root{
  --bg:#FCFCFC; --card:#FFFFFF; --ink:#111318; --gray:#6B6F78; --gray-2:#9CA0A8;
  --chip:#F2F3F5; --line:#ECEDEF; --rule:#C9D8E8; --accent:#F4570F; --pen:#E5484D; --success:#3E9C6E;
  --w-blue:#D9E7F5; --w-mint:#DEEEE2; --w-peach:#FFE4D1; --w-butter:#FBEFD9;
  --r-sm:9px; --r-md:12px; --r-lg:18px; --r-xl:26px; --r-sheet:32px;
  --sh-card:0 18px 40px -24px rgba(17,19,24,.22); --sh-btn:0 10px 24px -12px rgba(17,19,24,.35);
  --ease:cubic-bezier(.22,.9,.28,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; font:400 16px/1.9 Vazirmatn,system-ui,sans-serif; color:var(--ink); background:var(--bg);
  background-image:
    radial-gradient(60vmax 40vmax at 100% -10%, var(--w-blue), transparent 60%),
    radial-gradient(50vmax 40vmax at -10% 30%, var(--w-mint), transparent 60%);
  background-repeat:no-repeat; background-attachment:scroll;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
h1,h2,h3{line-height:1.35; margin:0 0 .4em; letter-spacing:-.3px}
h1{font-size:clamp(28px,5vw,42px); font-weight:900}
h2{font-size:clamp(21px,3vw,26px); font-weight:900}
h3{font-size:17px; font-weight:800}
.h1-sub{display:block; font-size:.48em; font-weight:700; color:var(--gray); margin-top:.35em; letter-spacing:0}
p{margin:0 0 1em}
.wrap{width:min(1080px,100%); margin-inline:auto; padding-inline:16px}
.muted{color:var(--gray)} .small{font-size:13.5px}
/* جداکننده به‌جای «·»: نقطهٔ وسط کنار عدد فارسی درست شکل «۰» است («۹۶ · درس» خوانده می‌شد «۹۶۰») */
.sep{display:inline-block; width:1.5px; height:.85em; background:currentColor; opacity:.35; margin:0 .5em; vertical-align:-.08em; border-radius:1px}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
.naskh{font-family:Naskh,"Noto Naskh Arabic",serif}
.eyebrow{font-size:13.5px; font-weight:800; color:var(--accent); margin:0 0 6px}
.eyebrow a{text-decoration:none}
.lede{font-size:clamp(16px,1.8vw,18px); color:#353841; max-width:62ch}

/* ── دکمه‌ها ── */
.pill{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px;
  padding:0 22px; border-radius:999px; border:0; background:var(--ink); color:#fff;
  font:800 15px Vazirmatn,sans-serif; text-decoration:none; cursor:pointer; box-shadow:var(--sh-btn);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.pill:hover{transform:translateY(-2px)}
.pill:focus-visible,.badge:focus-visible,a:focus-visible{outline:3px solid var(--accent); outline-offset:3px}
.pill-ghost{background:var(--card); color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--ink)}
.pill-sm{min-height:40px; padding:0 16px; font-size:14px}

/* ── سرصفحه ──
   قاعده: در هدر فقط یک چیز مشکی است و آن دکمهٔ نصب است. تب فعال سفید روی شیار خاکستری است
   (کنترل سگمنت، مثل اپ)، تا «کجا هستم» با «چه کار کنم» اشتباه نشود. */
.top{position:sticky; top:0; z-index:20; background:rgba(252,252,252,.72);
  backdrop-filter:saturate(1.6) blur(14px); -webkit-backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid transparent; transition:box-shadow .25s var(--ease), border-color .25s, background .25s}
.top.scrolled{background:rgba(252,252,252,.9); border-bottom-color:var(--line); box-shadow:0 10px 30px -22px rgba(17,19,24,.35)}
.top-in{display:flex; align-items:center; gap:18px; min-height:72px}
.brand{display:inline-flex; align-items:center; gap:10px; text-decoration:none; flex:none}
.brand img{border-radius:26%; box-shadow:0 6px 14px -6px rgba(29,78,199,.45); transition:rotate .3s var(--ease)}
.brand:hover img{rotate:-8deg}
.brand-txt{display:flex; flex-direction:column; line-height:1.15}
.brand-txt b{font-size:20px; font-weight:900; letter-spacing:-.3px}
.brand-txt small{font-size:11.5px; color:var(--gray); font-weight:500}

.nav{display:flex; align-items:center; gap:10px; margin-inline-start:auto; min-width:0}
.seg{display:flex; align-items:center; gap:2px; padding:4px; background:var(--chip); border-radius:999px;
  box-shadow:inset 0 1px 2px rgba(17,19,24,.06); overflow-x:auto; scrollbar-width:none}
.seg::-webkit-scrollbar{display:none}
.seg-label{font-size:12px; font-weight:800; color:var(--gray-2); padding:0 10px 0 6px; white-space:nowrap}
.seg a,.nav-blog{padding:6px 13px; border-radius:999px; text-decoration:none; font-size:14.5px; font-weight:700;
  color:var(--gray); white-space:nowrap; transition:background .2s, color .2s, box-shadow .2s}
.seg a:hover,.nav-blog:hover{color:var(--ink); background:rgba(255,255,255,.7)}
.seg a[aria-current]{background:var(--card); color:var(--ink);
  box-shadow:0 1px 2px rgba(17,19,24,.1), 0 4px 10px -4px rgba(17,19,24,.18)}
.nav-blog[aria-current]{color:var(--ink); box-shadow:inset 0 -2px 0 var(--pen); border-radius:0}

/* دکمهٔ نصب: تنها مشکیِ هدر + آیکون بازار + برقی که هر چند ثانیه یک بار رد می‌شود */
.get{position:relative; overflow:hidden; flex:none; display:inline-flex; align-items:center; gap:8px;
  min-height:46px; padding:0 14px 0 18px; border-radius:999px; background:var(--ink); color:#fff;
  text-decoration:none; font-weight:800; font-size:15px;
  box-shadow:0 10px 22px -10px rgba(17,19,24,.6), inset 0 1px 0 rgba(255,255,255,.12);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease)}
.get img{width:22px; height:22px; flex:none}
.get svg{width:16px; height:16px; opacity:.7; transition:transform .25s var(--ease), opacity .2s}
.get:hover{transform:translateY(-2px); box-shadow:0 16px 30px -12px rgba(17,19,24,.65), inset 0 1px 0 rgba(255,255,255,.12)}
.get:hover svg{transform:translateX(-3px); opacity:1}
.get:active{transform:translateY(0) scale(.98)}
.get::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, transparent 35%, rgba(255,255,255,.28) 50%, transparent 65%);
  transform:translateX(120%); animation:sheen 5.5s var(--ease) 1.2s infinite}
@keyframes sheen{0%{transform:translateX(120%)} 18%,100%{transform:translateX(-120%)}}
.get:focus-visible{outline:3px solid var(--accent); outline-offset:3px}

@media (max-width:980px){ .brand-txt small{display:none} .seg-label{display:none} }
.menu-btn,.nav-title{display:none}

/* موبایل: یک ردیف ۶۰px — لوگو، دکمهٔ نصب جمع‌وجور، منو. پایه‌ها در پنلی که از زیر هدر باز می‌شود. */
@media (max-width:360px){ .get-long{display:none} }
@media (max-width:760px){
  .top-in{min-height:60px; gap:10px; flex-wrap:nowrap; padding-block:0}
  .brand img{width:34px; height:34px}
  .brand-txt b{font-size:18px}
  .get{margin-inline-start:auto; min-height:40px; padding:0 10px 0 13px; font-size:14px; gap:6px}
  .get img{width:19px; height:19px}
  .get svg{display:none}
  .menu-btn{order:9; display:grid; place-content:center; gap:4px; width:42px; height:42px; flex:none; border:0; border-radius:50%;
    background:var(--chip); cursor:pointer; transition:background .2s}
  .menu-btn span{display:block; width:17px; height:2px; border-radius:2px; background:var(--ink); transition:transform .3s var(--ease), opacity .2s}
  .menu-open .menu-btn{background:var(--ink)}
  .menu-open .menu-btn span{background:#fff}
  .menu-open .menu-btn span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .menu-open .menu-btn span:nth-child(2){opacity:0}
  .menu-open .menu-btn span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  .menu-btn:focus-visible{outline:3px solid var(--accent); outline-offset:2px}

  .nav{position:absolute; top:100%; inset-inline:10px; margin:6px 0 0; padding:16px; display:grid; gap:12px;
    background:var(--card); border:1px solid var(--line); border-radius:var(--r-xl);
    box-shadow:0 30px 60px -24px rgba(17,19,24,.4), 0 0 0 100vmax rgba(17,19,24,0);
    opacity:0; transform:translateY(-8px) scale(.98); transform-origin:top; pointer-events:none; visibility:hidden;
    transition:opacity .22s, transform .28s var(--ease), visibility 0s .28s}
  .menu-open .nav{opacity:1; transform:none; pointer-events:auto; visibility:visible; transition:opacity .22s, transform .28s var(--ease), box-shadow .3s;
    box-shadow:0 30px 60px -24px rgba(17,19,24,.4), 0 0 0 100vmax rgba(17,19,24,.28)}
  .nav-title{display:block; margin:0; font-size:13px; font-weight:800; color:var(--gray)}
  .seg{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:0; background:none; box-shadow:none; overflow:visible}
  .seg-label{display:none}
  .seg a{display:grid; place-items:center; min-height:52px; padding:0; border-radius:var(--r-lg); background:var(--chip);
    font-size:16px; font-weight:800; color:var(--ink)}
  .seg a[aria-current]{background:var(--ink); color:#fff; box-shadow:none}
  .nav-blog{display:flex; align-items:center; justify-content:center; min-height:48px; border-radius:var(--r-lg);
    border:1px solid var(--line); font-size:15px; color:var(--ink)}
  .nav-blog[aria-current]{box-shadow:none; border-color:var(--pen); border-radius:var(--r-lg)}
}

/* ── مسیر ── */
.crumbs{display:flex; flex-wrap:wrap; gap:6px; font-size:13.5px; color:var(--gray); padding:18px 0 4px}
.crumbs a{text-decoration:none} .crumbs a:hover{color:var(--ink)}

/* ── قهرمانِ درس ── */
.lesson-hero{display:grid; grid-template-columns:1.25fr .9fr; gap:32px; align-items:center; padding:18px 0 28px}
.lesson-art{margin:0; border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--sh-card); background:var(--card); rotate:-1.5deg}
.facts{list-style:none; padding:0; margin:0 0 20px; display:flex; flex-wrap:wrap; gap:8px}
.facts li{background:var(--card); border:1px solid var(--line); border-radius:999px; padding:6px 14px; font-size:14px; color:var(--gray)}
.facts b{color:var(--ink); font-weight:900}
.actions{display:flex; flex-wrap:wrap; gap:10px}
.sign{font-family:Naskh,serif; font-size:1.3em; color:var(--pen)}
@media (max-width:820px){ .lesson-hero{grid-template-columns:1fr} .lesson-art{order:-1; rotate:0deg} }

/* ── برگه‌ها ── */
.sheet{background:var(--card); border:1px solid var(--line); border-radius:var(--r-sheet); padding:clamp(20px,4vw,36px); margin:0 0 22px; box-shadow:var(--sh-card)}
.groups{display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:14px; margin-top:16px}
.group{border:1px solid var(--line); border-radius:var(--r-lg); padding:16px 18px; background:var(--bg)}
.group h3{display:flex; align-items:center; gap:8px; margin:0 0 2px}
.count{font-size:12px; background:var(--chip); border-radius:999px; padding:1px 9px; color:var(--gray); font-weight:800}
.why{font-size:14px; color:var(--gray); margin:0 0 10px; line-height:1.7}
.words{list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:7px}
.words li{background:var(--card); border:1px solid var(--line); border-radius:var(--r-sm); padding:3px 11px; font-size:17px; font-weight:600}
.words li.new{border-color:var(--pen); color:var(--pen)}
.words-lg li{font-size:26px; padding:4px 16px; font-weight:400}

/* ── رایگان / پرو ── */
.tag{display:inline-block; vertical-align:2px; margin-inline-start:8px; padding:1px 9px; border-radius:999px; font-size:11.5px; font-weight:800; letter-spacing:0}
.tag-free{background:#E3F2EA; color:#23704C}
.tag-pro{background:var(--ink); color:#fff}
.words li.locked{padding:0; border-style:dashed; background:var(--bg)}
.words li.locked a{display:block; padding:3px 11px; text-decoration:none; color:var(--gray); font-size:14px; font-weight:700}
.words-lg li.locked a{font-family:Vazirmatn,sans-serif; font-size:15px; padding:9px 14px}
.words li.locked a:hover{color:var(--ink)}
.locked-panel{position:relative; margin-top:18px; border-radius:var(--r-xl); overflow:hidden; border:1px solid var(--line); background:var(--bg)}
.locked-ghost{padding:22px 46px 0 24px; display:grid; gap:26px; filter:blur(1.5px); opacity:.55;
  -webkit-mask-image:linear-gradient(to bottom,#000,transparent 85%); mask-image:linear-gradient(to bottom,#000,transparent 85%)}
.locked-ghost i{display:block; height:14px; width:var(--w); border-radius:7px; background:#D9DBE0}
.locked-body{position:relative; margin-top:-34px; padding:0 22px 24px; text-align:center}
.lock-ico{display:inline-grid; place-items:center; width:46px; height:46px; border-radius:50%; background:var(--ink); color:#fff; box-shadow:0 10px 20px -8px rgba(17,19,24,.5)}
.lock-ico svg{width:20px; height:20px}
.locked-title{font-weight:900; font-size:19px; margin:12px 0 4px}
.locked-sub{color:var(--gray); font-size:15px; max-width:46ch; margin:0 auto 16px}
.get-lg{min-height:50px; padding:0 18px 0 22px; font-size:15.5px; white-space:nowrap}
.lg-tag{position:absolute; top:10px; left:10px; z-index:1}
.lesson-grid a{position:relative}

/* دفتر: خط‌های آبی + دو خط قرمز حاشیه (قانون نمای دفتر، tokens.notebook) */
.dictation{
  list-style:none; counter-reset:n; margin:18px 0 0; padding:0 46px 0 0; position:relative;
  font-size:clamp(19px,2.4vw,23px); line-height:48px;
  background:repeating-linear-gradient(to bottom, transparent 0 47px, var(--rule) 47px 48px);
}
.dictation::before{content:""; position:absolute; top:0; bottom:0; right:30px; width:6.5px;
  border-inline:1.5px solid color-mix(in srgb, var(--pen) 45%, transparent)}
.dictation li{counter-increment:n; position:relative}
.dictation li::before{content:counter(n, persian); position:absolute; right:-46px; width:26px; text-align:center; color:var(--gray-2); font:600 14px Vazirmatn}
.script{list-style:persian; margin:14px 0 0; padding-inline-start:1.6em; font-size:20px; line-height:2}
.script li{margin-bottom:2px}
.dictation.naskh{font-size:clamp(22px,3vw,28px)}
mark{background:none; color:inherit; text-decoration:underline 2px var(--pen); text-underline-offset:7px}

/* ── معرفی برگهٔ PDF در صفحهٔ درس ── */
.sheet-promo{display:grid; grid-template-columns:170px 1fr; gap:26px; align-items:center; margin:26px 0; padding:22px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-sheet); box-shadow:var(--sh-card)}
.sp-thumb{display:block; rotate:-3deg; transition:rotate .3s var(--ease), transform .3s var(--ease)}
.sp-thumb:hover{rotate:0deg; transform:translateY(-4px)}
.sp-thumb img{border-radius:6px; box-shadow:0 18px 34px -16px rgba(17,19,24,.45), 0 0 0 1px var(--line)}
.sheet-promo h2{margin-bottom:.3em}
.sheet-promo .pill{margin-top:4px}
@media (max-width:560px){ .sheet-promo{grid-template-columns:110px 1fr; gap:16px; padding:16px} .sheet-promo h2{font-size:19px} .sheet-promo .muted{font-size:14px} }

/* ── بنر نصب با ماک‌آپ ── */
.cta{
  position:relative; overflow:hidden; display:grid; grid-template-columns:1.3fr .8fr; gap:24px; align-items:center;
  margin:34px 0; padding:clamp(24px,4vw,44px); border-radius:var(--r-sheet); background:var(--ink); color:#fff;
}
.cta::before{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(40vmax 30vmax at 0% 110%, rgba(244,87,15,.38), transparent 60%),
             radial-gradient(30vmax 26vmax at 100% -10%, rgba(217,231,245,.22), transparent 60%)}
.cta > *{position:relative}
.cta .eyebrow{color:#FFB38A}
.cta h2{font-size:clamp(22px,3.2vw,30px); color:#fff}
.ticks{list-style:none; padding:0; margin:0 0 22px}
.ticks li{position:relative; padding-inline-start:28px; margin-bottom:8px; color:#D9DBE0; line-height:1.7}
.ticks li::before{content:""; position:absolute; right:0; top:.45em; width:16px; height:16px; border-radius:50%;
  background:var(--success) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/11px no-repeat}
.cta-row{display:flex; flex-wrap:wrap; align-items:center; gap:14px}
.cta .muted{color:#A8ACB5}
.badge{display:inline-flex; align-items:center; gap:10px; background:#fff; color:var(--ink); text-decoration:none; border-radius:16px; padding:9px 20px 9px 22px; box-shadow:0 12px 30px -10px rgba(0,0,0,.5); transition:transform .2s var(--ease)}
.badge:hover{transform:translateY(-2px)}
.badge span{display:flex; flex-direction:column; line-height:1.2}
.badge small{font-size:11.5px; color:var(--gray)} .badge b{font-size:18px; font-weight:900}
.phone{justify-self:center; width:min(250px,100%); margin-bottom:-90px; rotate:-6deg}
.phone-frame{border-radius:38px; padding:9px; background:#26282E; box-shadow:0 30px 60px -20px rgba(0,0,0,.6), inset 0 0 0 1.5px #3A3D45}
.phone-frame img{border-radius:30px; width:100%}
@media (max-width:760px){
  .cta{grid-template-columns:1fr; padding-bottom:0}
  .phone{width:200px; margin-bottom:-120px; rotate:0deg}
}

/* ── متن بلند ── */
.prose{max-width:72ch; margin:0 0 26px}
.prose h2{margin-top:1.4em}
.prose ol,.prose ul{padding-inline-start:1.3em}
.prose li{margin-bottom:.55em}
.prose a{color:var(--ink); text-decoration-color:var(--accent); text-underline-offset:4px}
.prose a.pill{color:#fff; text-decoration:none}
.prose a.pill-ghost{color:var(--ink)}
.prose table{border-collapse:collapse; width:100%; margin:1em 0; font-size:15px}
.prose th,.prose td{border:1px solid var(--line); padding:8px 10px; text-align:start}
.prose img{max-width:min(420px,100%); margin:1.2em auto; border-radius:10px; box-shadow:0 22px 40px -22px rgba(17,19,24,.4), 0 0 0 1px var(--line)}
.prose blockquote{margin:1em 0; padding:10px 18px; border-inline-start:3px solid var(--pen); background:var(--card); border-radius:var(--r-md)}
.faq details{background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:0 18px; margin-bottom:10px; transition:border-color .2s}
.faq details[open]{border-color:#D9DBE0}
/* نشانگرِ پیش‌فرضِ مرورگر در RTL مثلثِ «◀» می‌شود و کنار متن می‌چسبد؛ به‌جایش +/− در انتهای ردیف */
.faq summary{cursor:pointer; font-weight:800; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:56px; padding:12px 0}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:""; flex:none; width:26px; height:26px; border-radius:50%; background:var(--chip) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111318' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/13px no-repeat; transition:rotate .25s var(--ease)}
.faq details[open] summary::after{rotate:45deg}
.faq summary:focus-visible{outline:3px solid var(--accent); outline-offset:4px; border-radius:8px}
.faq details p{margin:0; padding:0 0 16px; color:#353841}
.faq-home{display:grid; grid-template-columns:.8fr 1.5fr; gap:clamp(20px,5vw,60px); align-items:start}
.faq-home .faq-head{position:sticky; top:90px}
.faq-home .faq-head h2{font-size:clamp(26px,4vw,38px)}
@media (max-width:860px){ .faq-home{grid-template-columns:1fr} .faq-home .faq-head{position:static} }

/* ── پیمایش ── */
.pager{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:10px 0 28px}
.pager a{display:flex; flex-direction:column; padding:14px 18px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--card); text-decoration:none; font-weight:800}
.pager small{color:var(--gray); font-weight:500}
.pager-next{text-align:left}
.more{margin:0 0 30px}
.chips-list{list-style:none; padding:0; margin:12px 0 0; display:flex; flex-wrap:wrap; gap:8px}
.chips-list a{display:inline-block; padding:7px 14px; border-radius:999px; background:var(--chip); text-decoration:none; font-size:14.5px}
.chips-list a:hover{background:var(--ink); color:#fff}

/* ── هاب پایه ── */
.grade-hero{display:grid; grid-template-columns:170px 1fr; gap:28px; align-items:center; padding:18px 0 30px}
.cover{border-radius:var(--r-md); box-shadow:var(--sh-card); rotate:2deg}
@media (max-width:640px){ .grade-hero{grid-template-columns:1fr} .cover{width:120px} }
.lesson-grid{list-style:none; padding:0; margin:0 0 30px; display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px}
.lesson-grid a{display:flex; flex-direction:column; height:100%; background:var(--card); border:1px solid var(--line); border-radius:var(--r-xl); overflow:hidden; text-decoration:none; box-shadow:var(--sh-card); transition:transform .25s var(--ease)}
.lesson-grid a:hover{transform:translateY(-4px)}
.lesson-grid img{aspect-ratio:640/398; object-fit:cover; width:100%}
.sign-tile{display:grid; place-items:center; aspect-ratio:640/398; font-size:54px; color:var(--pen); background:var(--w-peach)}
.lg-no{padding:12px 16px 0; font-size:13px; font-weight:800; color:var(--accent)}
.lg-title{padding:0 16px; font-weight:900; font-size:17px; line-height:1.5}
.lg-meta{padding:2px 16px 14px; font-size:13.5px}
@media (max-width:560px){
  .lesson-grid{grid-template-columns:1fr 1fr; gap:10px}
  .lesson-grid a{border-radius:var(--r-lg)}
  .lg-no{padding:8px 11px 0; font-size:12px} .lg-title{padding:0 11px; font-size:15px} .lg-meta{padding:0 11px 10px; font-size:12.5px}
}

/* ── بلاگ ── */
.page-head{padding:22px 0 18px}
.post-list{list-style:none; padding:0; margin:0 0 30px; display:grid; gap:14px}
.post-list a{display:block; padding:20px 22px; background:var(--card); border:1px solid var(--line); border-radius:var(--r-xl); text-decoration:none}
.post-list h2,.post-list h3{margin:4px 0}
.post{padding:10px 0}
.post-cover{width:100%; max-width:72ch; aspect-ratio:1200/630; border-radius:var(--r-xl); margin:6px 0 28px; box-shadow:var(--sh-card); border:1px solid var(--line)}
.post-list a{display:grid; grid-template-columns:260px 1fr; column-gap:22px; align-items:center}
.post-list a > *:not(img){grid-column:2}
.post-list a img{grid-row:1 / span 3; border-radius:var(--r-lg); aspect-ratio:1200/630; width:100%; border:1px solid var(--line)}
@media (max-width:640px){ .post-list a{grid-template-columns:1fr} .post-list a > *{grid-column:1!important} .post-list a img{grid-row:auto; margin-bottom:10px} }

/* ── نمودار میله‌ای بلاگ (chart_html در build.py): یک سری، میلهٔ ≤۲۴px با سر گرد ۴px، متن با رنگ متن ── */
.chart{margin:1.6em 0; padding:20px 22px 16px; background:var(--card); border:1px solid var(--line); border-radius:var(--r-xl)}
.chart-title{font-weight:900; font-size:17px; margin-bottom:12px}
.bars{width:100%; border-collapse:separate; border-spacing:0 6px; margin:0!important; font-size:15px}
.bars th,.bars td{border:0!important; padding:0!important; vertical-align:middle}
.bars th{width:34%; font-weight:600; text-align:start; padding-inline-end:14px!important; color:#353841; white-space:nowrap}
.bars td{display:flex; align-items:center; gap:10px}
.bar{display:block; height:18px; width:var(--w); min-width:3px; background:#C9CCD3; border-radius:4px 0 0 4px; transition:background .2s}
.bars tr.hl .bar{background:var(--pen)}
.bars tr:hover .bar{background:#9CA0A8}
.bars tr.hl:hover .bar{background:#C93A3F}
.val{font-weight:800; font-size:14px; color:var(--ink); white-space:nowrap}
.chart-note{margin:10px 0 0!important; font-size:13px; color:var(--gray)}
@media (max-width:520px){ .bars th{width:40%; white-space:normal; font-size:14px} }
.post header{max-width:72ch; margin-bottom:10px}
.post .prose{font-size:17px}

/* ── دسته‌های بلاگ ── */
.cat-tabs{display:flex; gap:8px; margin:0 0 22px; overflow-x:auto; scrollbar-width:none; padding-bottom:2px}
.cat-tabs::-webkit-scrollbar{display:none}
.cat-tabs a{white-space:nowrap; flex:none}
.cat-tabs a{padding:7px 15px; border-radius:999px; background:var(--chip); text-decoration:none; font-weight:700; font-size:14.5px; color:var(--gray)}
.cat-tabs a:hover{color:var(--ink)}
.cat-tabs a[aria-current]{background:var(--ink); color:#fff}
.cat-chip{display:inline-block; padding:0 9px; border-radius:999px; background:var(--w-peach); color:#8A3A10; font-weight:800; font-size:12px; text-decoration:none; margin-inline-end:4px}

/* ── شبکهٔ کارت نوشته‌ها: عکس بالا، متن زیر؛ همهٔ کارت‌های یک ردیف هم‌قد ── */
.post-grid{list-style:none; padding:0; margin:0 0 34px; display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.post-grid > li{display:flex}
.pcard{display:flex; flex-direction:column; width:100%; background:var(--card); border:1px solid var(--line); border-radius:var(--r-xl);
  overflow:hidden; text-decoration:none; box-shadow:var(--sh-card); transition:transform .25s var(--ease), box-shadow .25s var(--ease)}
.pcard:hover{transform:translateY(-4px); box-shadow:0 26px 50px -26px rgba(17,19,24,.35)}
.pcard img{width:100%; aspect-ratio:1200/630; object-fit:cover; border-bottom:1px solid var(--line)}
.pcard-body{display:flex; flex-direction:column; gap:8px; padding:16px 18px 18px; flex:1}
.pcard .cat-chip{align-self:flex-start; margin:0}
.pcard-title{font-weight:900; font-size:17.5px; line-height:1.5; color:var(--ink)}
.pcard-desc{color:var(--gray); font-size:14.5px; line-height:1.8;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.pcard-meta{margin-top:auto; padding-top:6px; font-size:12.5px; color:var(--gray-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
@media (max-width:980px){ .post-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px){ .post-grid{grid-template-columns:1fr; gap:14px} .pcard-title{font-size:17px} }

/* ── کاربرگ در نوشته (worksheet_html) ── */
.ws{display:grid; grid-template-columns:220px 1fr; gap:22px; align-items:center; margin:1.6em 0; padding:18px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:var(--sh-card)}
.ws-paper{aspect-ratio:210/260; background:#fff; border:1px solid var(--line); border-radius:10px; padding:14px 16px; rotate:-2deg;
  box-shadow:0 18px 30px -18px rgba(17,19,24,.35);
  background-image:repeating-linear-gradient(to bottom, transparent 0 25px, var(--rule) 25px 26px); overflow:hidden}
.ws-paper ul{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:0 10px; font-family:Naskh,serif; font-size:16px; line-height:26px}
.ws-paper ul.trace li{color:var(--gray-2)}
.ws-paper .gap{color:var(--pen)}
.ws-paper li.more{color:var(--gray); font-family:Vazirmatn; font-size:13px}
.ws figcaption{display:flex; flex-direction:column; gap:6px; align-items:flex-start}
.ws figcaption b{font-size:19px; font-weight:900; line-height:1.5}
.ws-kind{font-size:12.5px; font-weight:800; color:var(--accent)}
.ws .pill{margin-top:8px}
@media (max-width:620px){ .ws{grid-template-columns:1fr} .ws-paper{max-width:220px; justify-self:center} }

/* ── پاصفحه ── */
.foot{border-top:1px solid var(--line); margin-top:50px; padding:34px 0 90px; background:var(--card)}
.foot-in{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:24px}
.foot ul{list-style:none; padding:0; margin:0}
.foot li a{color:var(--gray); text-decoration:none; font-size:14.5px; line-height:2.1}
.foot li a:hover{color:var(--ink)}
.foot-h{font-size:14px; margin:0 0 6px}
.foot p.muted{font-size:14px; max-width:36ch}
.fine{font-size:12.5px; color:var(--gray-2); margin-top:20px}
@media (max-width:760px){ .foot-in{grid-template-columns:1fr 1fr} .foot-in > div:first-child{grid-column:1/-1} }

/* ── نوار چسبان موبایل ── */
.sticky{display:none}
@media (max-width:760px){
  .sticky{
    position:fixed; z-index:30; inset-inline:12px; bottom:max(12px, env(safe-area-inset-bottom));
    display:flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:0 18px;
    border-radius:999px; background:var(--ink); color:#fff; text-decoration:none; font-weight:800; font-size:15px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    box-shadow:0 14px 34px -10px rgba(17,19,24,.55);
    transform:translateY(140%); transition:transform .35s var(--ease);
  }
  .sticky.on{transform:none}
}

.print-only{display:none}
@media print{
  .top,.foot,.sticky,.cta,.crumbs,.actions,.pager,.more,.prose,.lesson-art,.facts{display:none!important}
  body{background:#fff}
  .sheet{box-shadow:none; border:0; padding:0; break-inside:avoid}
  .print-only{display:block}
  @page{margin:12mm 12mm 14mm}
  body{background:#fff!important; background-image:none!important}
  /* سربرگ چاپی: برند + QR نصب، هر دو همیشه روی صفحهٔ اول (پایانِ برگه گاهی صفحهٔ اضافهٔ خالی می‌ساخت) */
  .print-brand{display:flex!important; align-items:center; gap:10px; padding-bottom:8px; margin-bottom:12px; border-bottom:2px solid #111318}
  .pb-logo{width:36px; height:36px; border-radius:24%}
  .pb-name{display:flex; flex-direction:column; line-height:1.3}
  .pb-name b{font-size:20px; font-weight:900}
  .pb-name span{color:#6B6F78; font-size:11px}
  .pb-qr{margin-inline-start:auto; display:flex; align-items:center; gap:10px; border:1.5px solid #111318; border-radius:10px; padding:5px 6px 5px 12px}
  .pb-qr p{margin:0; font-size:10px; color:#555; line-height:1.5; max-width:190px}
  .pb-qr strong{display:block; font-size:12px; color:#111318}
  .pb-qr img{width:64px; height:64px}
  .print-who{display:grid!important; grid-template-columns:2.2fr 1.3fr 1fr; border:1.2px solid #111318; border-radius:10px; margin:0 0 14px}
  .print-who > div{padding:6px 10px 8px; font-size:11px; font-weight:800; color:#6B6F78; min-height:44px}
  .print-who > div + div{border-inline-start:1px solid #E4E5E8}
  .pw-mark{display:flex; justify-content:flex-end; align-items:flex-end; gap:5px; direction:ltr; margin-top:6px}
  .pw-mark span{width:52px; border-bottom:1.3px dotted #111318; height:18px}
  .pw-mark b{font-family:Naskh,serif; font-size:17px; color:#E5484D; line-height:1}
  /* برگه‌ها در چاپ فشرده و قابل‌شکستن: قبلاً «break-inside:avoid» کل بخش کلمه‌ها را به صفحهٔ دوم می‌برد
     و صفحهٔ اول خالی می‌ماند */
  .lesson-hero{display:block; padding:0 0 6px}
  .lesson-hero h1{font-size:22px}
  .sheet{break-inside:auto!important; margin:0 0 10px}
  .sheet > .muted{display:none}
  .sheet h2{font-size:16px; margin-bottom:6px}
  .groups{display:block; margin-top:4px}
  .group{break-inside:avoid; border:0; background:none; padding:3px 0; display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px}
  .group h3{font-size:13px; margin:0; white-space:nowrap}
  .group .why,.group .count{display:none}
  .words li{font-size:14px; padding:1px 8px}
  .words-lg li{font-size:20px}
  .dictation{font-size:17px; line-height:38px; background:repeating-linear-gradient(to bottom, transparent 0 37px, #C9D8E8 37px 38px)}
  .dictation li{break-inside:avoid}
  .locked-panel{display:none}
  mark{text-decoration:none}
  .lede{display:none}
}
@media (prefers-reduced-motion:reduce){ *{transition:none!important; animation:none!important} .pen-draw path{stroke-dashoffset:0} }

/* ═════════ صفحهٔ اصلی ═════════ */
.home{background-image:
  radial-gradient(55vmax 45vmax at 100% -5%, var(--w-blue), transparent 60%),
  radial-gradient(45vmax 40vmax at -5% 20%, var(--w-mint), transparent 60%),
  radial-gradient(40vmax 30vmax at 50% 60%, var(--w-peach), transparent 65%)}
.hero{position:relative; padding:clamp(34px,6vw,76px) 0 clamp(40px,6vw,70px); overflow:hidden}
.hero-bg{position:absolute; inset:0; pointer-events:none; z-index:0}
.blob{position:absolute; border-radius:50%; filter:blur(60px); opacity:.75; animation:drift 18s ease-in-out infinite alternate}
.b1{width:420px; height:420px; background:var(--w-blue); top:-120px; left:8%}
.b2{width:360px; height:360px; background:var(--w-peach); bottom:-140px; left:32%; animation-delay:-6s}
.b3{width:300px; height:300px; background:var(--w-mint); top:10%; right:-80px; animation-delay:-11s}
@keyframes drift{from{transform:translate(0,0) scale(1)} to{transform:translate(40px,-30px) scale(1.12)}}
.hero-in{position:relative; z-index:1; display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(24px,5vw,64px); align-items:center}

.hero-chip{display:inline-flex; align-items:center; gap:8px; padding:6px 14px 6px 12px; border-radius:999px;
  background:rgba(255,255,255,.75); border:1px solid var(--line); font-size:13.5px; font-weight:800; color:#353841;
  box-shadow:0 6px 16px -10px rgba(17,19,24,.25); margin:0 0 18px}
.dot-live{width:8px; height:8px; border-radius:50%; background:var(--success); box-shadow:0 0 0 0 rgba(62,156,110,.5); animation:live 2s infinite}
@keyframes live{70%{box-shadow:0 0 0 8px rgba(62,156,110,0)} 100%{box-shadow:0 0 0 0 rgba(62,156,110,0)}}
.hero h1{font-size:clamp(36px,6vw,62px); line-height:1.28; letter-spacing:-1px; margin-bottom:.35em}
.rot{display:inline-block; position:relative; color:var(--accent)}
.rot span{display:inline-block; transition:opacity .22s, transform .22s var(--ease)}
.rot span.out{opacity:0; transform:translateY(-.35em)}
.rot span.in{animation:rotin .3s var(--ease)}
@keyframes rotin{from{opacity:0; transform:translateY(.35em)}}
.rot{min-width:4.6em}
.pen-word{position:relative; display:inline-block; white-space:nowrap; padding:0 .12em}
.pen-draw{position:absolute; inset:-.18em -.3em -.1em; width:calc(100% + .6em); height:calc(100% + .28em); overflow:visible; pointer-events:none}
.pen-draw path{fill:none; stroke:var(--pen); stroke-width:4.5; stroke-linecap:round; stroke-dasharray:820; stroke-dashoffset:820;
  animation:draw 1.3s .6s cubic-bezier(.6,.1,.3,1) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.hero .lede{margin:0 0 26px}
.badge-lg{padding:11px 24px 11px 26px; border-radius:18px}
.badge-lg b{font-size:20px}
.badge-dark{background:var(--ink); color:#fff}
.badge-dark small{color:#A8ACB5}
.link-arrow{font-weight:800; text-decoration:none; color:var(--ink); transition:color .2s}
.link-arrow:hover{color:var(--accent)}
.trust{list-style:none; padding:0; margin:22px 0 0; display:flex; flex-wrap:wrap; gap:6px 18px; color:var(--gray); font-size:14px}
.trust li::before{content:"✓ "; color:var(--success); font-weight:900}
@media (max-width:860px){ .hero-in{grid-template-columns:1fr} }
@media (max-width:760px){
  .hero{padding-top:22px}
  .hero-chip{margin-bottom:14px}
  .hero h1{margin-bottom:.3em}
  .hero .lede{font-size:15.5px; margin-bottom:20px}
  .hero .cta-row{gap:16px}
  .demo{margin-top:26px}
}

/* ── دموی تعاملی ── */
.demo{position:relative; justify-self:center; width:min(350px,calc(100% - 36px)); margin:10px 18px}
.demo-tabs{display:flex; gap:2px; padding:4px; margin:0 auto 16px; width:max-content; background:rgba(255,255,255,.7);
  border:1px solid var(--line); border-radius:999px; box-shadow:0 8px 20px -14px rgba(17,19,24,.3)}
.demo-tabs button{border:0; background:none; font:700 14px Vazirmatn,sans-serif; color:var(--gray); padding:6px 16px; border-radius:999px; cursor:pointer; transition:background .2s, color .2s, box-shadow .2s}
.demo-tabs button:hover{color:var(--ink)}
.demo-tabs button[aria-selected=true]{background:var(--ink); color:#fff; box-shadow:0 6px 14px -6px rgba(17,19,24,.5)}
.demo-phone{position:relative; background:var(--card); border-radius:38px; padding:20px 20px 18px;
  box-shadow:0 44px 80px -30px rgba(17,19,24,.38), 0 0 0 10px #26282E, 0 0 0 11px #3A3D45; transition:transform .5s var(--ease)}
.demo:hover .demo-phone{transform:translateY(-4px)}
.demo-top{display:flex; justify-content:space-between; gap:6px}
.demo-chip{background:var(--chip); border:0; border-radius:999px; padding:4px 11px; font:700 12px Vazirmatn,sans-serif; color:var(--gray)}
.demo-speed{cursor:pointer; transition:background .2s, transform .2s var(--ease)}
.demo-speed:hover{background:#E7E8EB; color:var(--ink)}
.demo-speed b{color:var(--ink)}
.demo-speed.bump{animation:bump .35s var(--ease)}
@keyframes bump{50%{transform:scale(1.12)}}
.demo-title{font-weight:900; font-size:22px; margin:14px 0 8px}
.demo-sheet{position:relative; min-height:156px; padding:0 30px 0 0;
  background:repeating-linear-gradient(to bottom, transparent 0 51px, var(--rule) 51px 52px)}
.demo-sheet::before{content:""; position:absolute; top:0; bottom:0; right:10px; width:5px;
  border-inline:1.5px solid color-mix(in srgb, var(--pen) 45%, transparent)}
.demo-line{font-family:Naskh,serif; font-size:24px; line-height:52px; margin:0}
.demo-line span{color:var(--gray-2); transition:color .2s; position:relative; padding:0 3px; cursor:pointer; border-radius:6px}
.demo-line span:hover{background:rgba(229,72,77,.07)}
.demo-line span.done{color:var(--ink)}
.demo-line span.now{color:var(--ink)}
.demo-line span.now::after{content:""; position:absolute; inset:4px -3px 2px; border:2px solid var(--pen);
  border-radius:50% 45% 50% 48%/55% 50% 52% 45%; rotate:-2deg; animation:circ .25s var(--ease)}
@keyframes circ{from{opacity:0; transform:scale(.7)}}
.demo-state{display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:800; margin-top:10px; min-height:26px}
.ring{width:22px; height:22px; rotate:-90deg}
.ring circle{fill:none; stroke-width:4}
.ring circle:first-child{stroke:var(--chip)}
#demo-ring{stroke:var(--accent); stroke-dasharray:94.25; stroke-dashoffset:94.25; stroke-linecap:round; transition:stroke-dashoffset .12s linear}
.demo.writing #demo-ring{stroke:var(--success)}
.demo-count{margin-inline-start:auto; font-size:12.5px; color:var(--gray); font-weight:700}
.demo-bar{height:5px; background:var(--chip); border-radius:99px; margin:10px 0 14px; overflow:hidden}
.demo-bar i{display:block; height:100%; width:0; background:var(--ink); border-radius:99px; transition:width .35s var(--ease)}
.demo-controls{display:flex; justify-content:center; align-items:center; gap:18px}
.demo-mute{display:flex; align-items:center; justify-content:center; gap:6px; margin:-4px 0 12px; font-size:11.5px; color:var(--gray-2); font-weight:600}
.demo-mute svg{width:14px; height:14px; flex:none}
.ctl{width:44px; height:44px; display:grid; place-items:center; border-radius:50%; border:0; background:var(--chip); color:var(--ink); cursor:pointer;
  transition:transform .15s var(--ease), background .2s}
.ctl:hover{background:#E4E5E8}
.ctl:active{transform:scale(.9)}
.ctl svg{width:20px; height:20px}
.ctl-play{width:60px; height:60px; background:var(--ink); color:#fff; box-shadow:0 10px 20px -8px rgba(17,19,24,.5)}
.ctl-play:hover{background:#262931}
.ctl-play .i-play{display:none}
.demo.paused .ctl-play .i-play{display:block}
.demo.paused .ctl-play .i-pause{display:none}
.ctl:focus-visible,.demo-tabs button:focus-visible,.demo-speed:focus-visible{outline:3px solid var(--accent); outline-offset:3px}
.demo-hint{position:absolute; bottom:-14px; right:50%; translate:50% 100%; margin:0; white-space:nowrap; transition:opacity .4s, translate .4s var(--ease)}
.demo-hint span{display:inline-block; background:var(--ink); color:#fff; font-size:12.5px; font-weight:700; padding:6px 13px; border-radius:999px; position:relative;
  animation:float 2.6s ease-in-out infinite}
.demo-hint span::before{content:""; position:absolute; top:-5px; right:50%; translate:50% 0; width:10px; height:10px; background:var(--ink); rotate:45deg; border-radius:2px}
.demo-hint.gone{opacity:0; translate:50% 130%; pointer-events:none}
@keyframes float{50%{transform:translateY(-4px)}}
.sticker{position:absolute; filter:drop-shadow(0 8px 12px rgba(17,19,24,.18)); transition:translate .3s ease-out; pointer-events:none}
.s1{top:36px; left:-34px; rotate:-14deg; width:78px}
.s2{bottom:70px; right:-30px; rotate:12deg; width:58px}
.s3{top:44%; left:-44px; rotate:8deg; width:64px}
@media (max-width:860px){ .s1{left:-12px; top:30px; width:60px} .s3{display:none} .s2{right:-14px} }

/* ── ظاهرشدن با اسکرول (فقط وقتی JS هست و حرکت کم نشده) ── */
.js-reveal [data-reveal]{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.js-reveal [data-reveal].in{opacity:1; transform:none}
/* هیرو به JS وابسته نیست (LCP): ورود با انیمیشن CSS که همان لحظه شروع می‌شود */
.hero-copy > *{animation:heroin .6s var(--ease) both}
.hero-copy > :nth-child(2){animation-delay:.05s} .hero-copy > :nth-child(3){animation-delay:.1s} .hero-copy > :nth-child(4){animation-delay:.15s}
.demo{animation:heroin .7s .15s var(--ease) both}
@keyframes heroin{from{opacity:0; transform:translateY(14px)}}
.grade-pick a{transform-style:preserve-3d; will-change:transform}
.faq details::details-content{transition:height .3s var(--ease), content-visibility .3s allow-discrete; height:0; overflow:clip}
.faq details[open]::details-content{height:auto}
.faq{interpolate-size:allow-keywords}

/* اعداد */
.proof{border-block:1px solid var(--line); background:rgba(255,255,255,.7)}
.proof-in{list-style:none; margin-block:0; display:grid; grid-template-columns:repeat(4,1fr); padding-block:22px; gap:10px; text-align:center}
.proof b{display:block; font-size:clamp(24px,3.4vw,34px); font-weight:900; letter-spacing:-.5px}
.proof span{color:var(--gray); font-size:14px}
@media (max-width:640px){ .proof-in{grid-template-columns:1fr 1fr; row-gap:18px} }

.block{padding:clamp(40px,7vw,80px) 16px 0}
.block > h2{font-size:clamp(26px,4vw,38px)}

.grade-pick{list-style:none; padding:0; margin:24px 0 0; display:grid; grid-template-columns:repeat(6,1fr); gap:14px}
.grade-pick a{display:flex; flex-direction:column; align-items:center; gap:4px; padding:14px 12px 16px; background:var(--card); border:1px solid var(--line); border-radius:var(--r-xl); text-decoration:none; box-shadow:var(--sh-card); transition:transform .25s var(--ease)}
.grade-pick a:hover{transform:translateY(-5px) rotate(-1deg)}
.grade-pick img{width:80%; border-radius:8px; box-shadow:0 8px 18px -8px rgba(17,19,24,.35); margin-bottom:6px}
.gp-name{font-size:20px; font-weight:900}
.gp-sub{font-size:13px}
@media (max-width:860px){ .grade-pick{grid-template-columns:repeat(3,1fr)} }

.steps{list-style:none; padding:0; margin:28px 0 0; display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.steps li{background:var(--card); border:1px solid var(--line); border-radius:var(--r-sheet); padding:22px 22px 0; overflow:hidden; display:flex; flex-direction:column-reverse; gap:18px; box-shadow:var(--sh-card)}
.steps img{width:72%; margin-inline:auto; border-radius:22px 22px 0 0; box-shadow:0 0 0 7px #26282E; margin-top:auto}
.step-n{display:inline-grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--ink); color:#fff; font-weight:900; margin-bottom:8px}
@media (max-width:860px){ .steps{grid-template-columns:1fr} .steps img{width:55%} }

.feature{display:grid; grid-template-columns:1.2fr .8fr; gap:40px; align-items:center; margin-bottom:40px}
.feature h3{font-size:clamp(22px,3vw,30px); font-weight:900}
.feature img{width:min(280px,80%); justify-self:center; border-radius:30px; box-shadow:0 0 0 9px #26282E, 0 30px 60px -25px rgba(17,19,24,.4)}
.feature:nth-child(2) > div{order:2}
@media (max-width:760px){ .feature{grid-template-columns:1fr} .feature:nth-child(2) > div{order:0} }

.trust-grid{list-style:none; padding:0; margin:26px 0 0; display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.trust-grid li{background:var(--card); border:1px solid var(--line); border-radius:var(--r-xl); padding:20px}
.trust-grid img{width:56px; margin-bottom:10px}
.trust-grid p{font-size:14.5px; margin:0}
@media (max-width:860px){ .trust-grid{grid-template-columns:1fr 1fr} }

.sample-grid{list-style:none; padding:0; margin:24px 0 0; display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.sample-grid a{display:flex; flex-direction:column; gap:2px; padding:16px 18px; background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); text-decoration:none}
.sample-grid a:hover{border-color:var(--ink)}
.sample-grid b{font-size:17px}
@media (max-width:760px){ .sample-grid{grid-template-columns:1fr} }

.final{display:flex; align-items:center; justify-content:space-between; gap:24px; margin:60px 0 0; padding:clamp(28px,5vw,48px); border-radius:var(--r-sheet); background:var(--ink); color:#fff; position:relative; overflow:hidden}
.final::before{content:""; position:absolute; inset:0; background:radial-gradient(40vmax 30vmax at 0% 120%, rgba(244,87,15,.4), transparent 60%); pointer-events:none}
.final > *{position:relative}
.final h2{font-size:clamp(26px,4vw,38px); color:#fff}
.final p{color:#C5C8CF}
.qr{margin:0; background:#fff; border-radius:var(--r-xl); padding:14px 14px 8px; text-align:center; color:var(--gray); font-size:12.5px}
.qr img{width:150px}
@media (max-width:760px){ .qr{display:none} }

/* ── ویدیوی معرفی (tools/promo): پوستر + دکمهٔ پخش؛ عمودی در گوشی، افقی در صفحهٔ پهن ── */
.intro-video{text-align:center}
.intro-video .muted{margin-inline:auto; max-width:52ch}
.vplayer{margin-top:22px; display:flex; justify-content:center}
.vbox{position:relative; border-radius:var(--r-xl); overflow:hidden; background:#0F1118;
  box-shadow:0 2px 4px rgba(17,19,24,.06),0 40px 80px -40px rgba(17,19,24,.55)}
.vbox video{display:block; width:100%; height:auto; aspect-ratio:var(--ar)}
.v-tall{--ar:9/16; width:min(330px,84%)}
.v-wide{--ar:16/9; width:min(920px,100%); display:none}
@media (min-width:760px) and (min-aspect-ratio:1/1){.v-tall{display:none} .v-wide{display:block}}
.vplay{position:absolute; inset:0; margin:auto; width:88px; height:88px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(255,255,255,.95); display:grid; place-items:center; box-shadow:0 18px 40px -12px rgba(0,0,0,.55);
  transition:transform .2s var(--ease)}
.vplay svg{width:38px; height:38px; margin-inline-start:6px; fill:var(--ink)}
.vplay::after{content:""; position:absolute; inset:-10px; border-radius:50%; border:3px solid rgba(255,255,255,.75);
  animation:vring 1.9s ease-out infinite}
@keyframes vring{from{transform:scale(.86); opacity:1} to{transform:scale(1.35); opacity:0}}
.vplay:hover{transform:scale(1.07)}
.vplay:focus-visible{outline:3px solid var(--accent); outline-offset:4px}
.vbox.playing .vplay{display:none}
@media (prefers-reduced-motion:reduce){.vplay::after{animation:none}}

/* ── «بشنوید»: تکهٔ صوتی بالای فهرست کلمه‌ها (آزمایش تبدیل، site/EXPERIMENTS.md).
   عیناً صفحهٔ دیکتهٔ اپ (app/lib/ui/widgets/notebook.dart): دفتر با خط کرسی آبی، حاشیهٔ قرمز دوتایی و
   سوراخ‌ها؛ بازهٔ فعال هلویی، دایرهٔ خودکار قرمز دور کلمه؛ کلمهٔ نخوانده کم‌رنگ. */
.listen{border-radius:var(--r-sheet); padding:clamp(18px,3.5vw,30px); margin:0 0 22px; border:1px solid var(--line);
  background:linear-gradient(160deg, var(--w-blue), var(--card) 45%, var(--w-peach))}
.listen-top{max-width:640px; margin-inline:auto}
.listen-chip{display:inline-flex; align-items:center; background:rgba(242,243,245,.9); color:var(--gray); border-radius:999px;
  padding:4px 14px; font-size:13.5px; font-weight:800; margin:0 0 10px}
.listen-top h2{font-size:clamp(22px,3.4vw,30px); margin:0 0 14px; text-wrap:balance}
.listen-bar{display:flex; gap:6px; margin:0 0 18px}
.listen-bar i{flex:1; height:6px; border-radius:9px; background:var(--line); transition:background .2s}
.listen-bar i.on{background:var(--accent)} .listen-bar i.done{background:rgba(244,87,15,.35)}

.nb{--lh:54px; --inset:40px; position:relative; max-width:640px; margin:0 auto; background:var(--card); border-radius:var(--r-xl);
  box-shadow:0 18px 40px -24px rgba(17,19,24,.18); padding:8px calc(var(--inset) + 20px) 8px 24px; overflow:hidden}
/* حاشیهٔ قرمز دوتایی */
.nb::before{content:""; position:absolute; top:0; bottom:0; right:calc(var(--inset) - 6.5px); width:6.5px;
  border-inline:1.5px solid rgba(229,72,77,.45)}
/* سوراخ‌های پانچ کنار عطف، هر ۴۴px */
.nb::after{content:""; position:absolute; top:17px; bottom:12px; right:12px; width:14px;
  background:radial-gradient(circle at 7px 7px, var(--bg) 0 6px, rgba(17,19,24,.12) 6px 7px, transparent 7.5px) 0 0/14px 44px repeat-y}
/* خط کرسی: یک خط آبی روی بیس‌لاین هر سطر، تا لبهٔ چپ کارت */
.nb-text{font-size:25px; line-height:var(--lh); min-height:calc(var(--lh) * 3); margin:0 0 0 -24px; padding-left:24px; color:#C6C9CF;
  background:linear-gradient(transparent calc(var(--lh) * .64), rgba(201,216,232,.55) 0 calc(var(--lh) * .64 + 1.5px), transparent 0) 0 0/100% var(--lh)}
.nb-text .ph{border-radius:8px; padding:6px 3px; -webkit-box-decoration-break:clone; box-decoration-break:clone; transition:background .2s}
.nb-text .ph.cur{background:rgba(244,87,15,.09); color:var(--gray-2)}
.nb-text .w{position:relative; transition:color .15s}
.nb-text .w.done, .nb-text .w.on{color:var(--ink)}
.nb-text .w.on{font-weight:500}
.nb-text .w.on::after{content:""; position:absolute; inset:-4px -10px -2px; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40' preserveAspectRatio='none'%3E%3Cpath d='M12 21C9 8 70 2 92 13c9 5 5 17-18 22-27 6-63 2-68-10C2 15 20 7 42 6' fill='none' stroke='%23E5484D' stroke-width='3' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.nb-more{color:#C6C9CF}
.nb-ctrl{display:flex; justify-content:center; align-items:center; gap:14px; margin:22px 0 6px}
.nb-btn{width:58px; height:58px; border-radius:50%; border:0; background:var(--card); color:var(--ink); cursor:pointer; display:grid; place-items:center;
  box-shadow:0 10px 24px -14px rgba(17,19,24,.35); transition:transform .2s var(--ease)}
.nb-btn:hover{transform:scale(1.06)}
.nb-btn:focus-visible{outline:3px solid var(--accent); outline-offset:3px}
.nb-play{width:76px; height:76px; background:var(--ink); color:#fff; box-shadow:var(--sh-btn)}
.nb-play .i-pause, .listen.playing .nb-play .i-play{display:none}
.listen.playing .nb-play .i-pause{display:block}
.listen:not(.playing):not(.played) .nb-play{animation:listen-pulse 2.4s var(--ease) infinite}
@keyframes listen-pulse{0%{box-shadow:0 0 0 0 rgba(229,72,77,.45)}70%{box-shadow:0 0 0 16px rgba(229,72,77,0)}100%{box-shadow:0 0 0 0 rgba(229,72,77,0)}}
.nb-hint{text-align:center; color:var(--gray); font-size:13.5px; margin:0 0 18px}
.listen-cta{display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:10px 16px}
.listen.played .listen-cta .pill{animation:listen-nudge .6s var(--ease) 1}
@keyframes listen-nudge{40%{transform:translateY(-4px) scale(1.04)}}
@media (max-width:520px){.nb{--lh:46px; --inset:34px; padding-left:16px} .nb-text{font-size:21px; margin-left:-16px; padding-left:16px}}
@media (prefers-reduced-motion:reduce){.nb-play,.listen.played .listen-cta .pill{animation:none!important}}
@media print{.listen{display:none!important}}

/* «از نگاه املا»: متن یکتای هر درس (خلاصهٔ خودمان + آمار همان درس) — ممیزی سئو ۱۴۰۵/۰۷/۱۴ */
.insight p{font-size:16.5px}
.insight-list{margin:0 0 18px; padding-inline-start:1.2em}
.insight-list li{margin:0 0 8px}
.insight-list b{font-weight:900}
.insight h3{margin-top:6px}

/* ── کیت معرفی برای همکاران (/kit/) */
.kit-hero{padding:28px 0 8px}
.kit-link{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:14px 18px; margin:6px 0 22px}
.kit-link b{font-size:18px; font-weight:900}
.kit-link small{flex-basis:100%}
.kit-frames{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin:10px 0 14px}
.kit-frames img{border-radius:var(--r-md); box-shadow:var(--sh-card); width:100%; height:auto}
.kit-frames figcaption{font-size:13.5px; margin-top:8px; line-height:1.7}
.kit-script{width:100%; border-collapse:collapse; font-size:15px}
.kit-script th,.kit-script td{border-bottom:1px solid var(--line); padding:10px 8px; text-align:start; vertical-align:top}
.kit-script td:first-child{white-space:nowrap; color:var(--gray)}
.kit-copy{background:var(--chip); border-radius:var(--r-md); padding:14px 16px; margin:8px 0 18px}
.kit-copy pre{white-space:pre-wrap; font:inherit; margin:0 0 10px}
.kit-dl li{margin-bottom:8px}
.kit-faq dt{font-weight:900; margin-top:10px}
.kit-faq dd{margin:2px 0 0}
@media (max-width:720px){.kit-frames{grid-template-columns:repeat(2,minmax(0,1fr))} .kit-script{font-size:14px}}
.kit-assets{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:16px; margin-top:10px}
.kit-assets figure{margin:0; text-align:center}
.kit-assets img,.kit-assets video{width:100%; height:auto; border-radius:var(--r-md); box-shadow:var(--sh-card); background:var(--chip)}
.kit-assets figcaption{font-size:13px; margin-top:8px; line-height:1.7}
.kit-assets .pill{margin-top:6px}