@font-face{font-family:'Vazirmatn RD';src:url('/assets/fonts/Vazirmatn-RD-Light.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Vazirmatn RD';src:url('/assets/fonts/Vazirmatn-RD-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Vazirmatn RD';src:url('/assets/fonts/Vazirmatn-RD-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Vazirmatn RD';src:url('/assets/fonts/Vazirmatn-RD-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
:root{--cream:#FAF6EF;--cream-deep:#F4EEE3;--paper:#fff;--terracotta:#A74F2B;--teal:#1F8FA0;
 --navy:#2E3256;--ink:#22303F;--muted:#6C7A8A;--line:#E6DDCE;
 --flat:0 1px 2px rgba(20,35,60,.09);--lift:0 6px 22px rgba(13,35,64,.22);--r:12px}
*{box-sizing:border-box}
html{direction:rtl;scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);line-height:1.85;font-size:16px;
 font-family:'Vazirmatn RD','Vazirmatn',Tahoma,sans-serif;-webkit-font-smoothing:antialiased}
.wrap{max-width:1080px;margin-inline:auto;padding-inline:20px}
/* NOTE: this rule exists TWICE — here and in site/index.html's own <style>.
   The landing page's inline copy comes after this stylesheet and wins at equal
   specificity, so a change made only here does nothing to the page most people
   land on. Change both, or neither. */
/* ── THE PAGE USES THE SCREEN IT IS GIVEN ────────────────────────────────
   1080 was the whole site at any width, so a 1600px screen spent 260px of
   empty gutter on each side and a 1920 spent 420. «full viewport on website».
   Safe to widen here in a way it was not in the app, and measured rather than
   assumed: every long text block on this page already carries its own cap —
   .lede and .shead at 60–62ch — so the worst line on the page measures 146
   characters at 1080 and the same 146 at 1440. Widening the shell moves the
   cards and the grids and leaves the reading measure alone.
   Capped rather than literally 100%: past about 1600 a header stretched to the
   glass reads as a broken layout rather than a generous one, and the gutter is
   what stops the first word sitting against the bezel. */
@media (min-width:1200px){
  .wrap{max-width:min(1600px, 100% - 96px)}
}
h1,h2,h3{color:var(--navy);font-weight:700;line-height:1.5;margin:0}
a{color:var(--teal)}
.en{direction:ltr;unicode-bidi:isolate;text-transform:uppercase;letter-spacing:.14em;
 font-size:11.5px;color:var(--muted)}
.topbar{position:sticky;inset-block-start:0;z-index:50;background:rgba(255,255,255,.92);
 backdrop-filter:saturate(160%) blur(10px);border-block-end:1px solid var(--line)}
.nav-row{display:flex;align-items:center;gap:16px;padding-block:11px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:0 0 auto}
.brand img{inline-size:42px;block-size:42px;object-fit:contain}
.brand-txt{display:flex;flex-direction:column;line-height:1.45}
.brand-txt b{color:var(--navy);font-size:14.5px}
.brand-txt i{color:var(--muted);font-size:12px;font-style:normal}
.btn{display:inline-block;border-radius:999px;padding:12px 26px;font-size:15px;font-weight:700;
 text-decoration:none;border:1px solid transparent;cursor:pointer;font-family:inherit;transition:.16s}
.btn-main{background:var(--teal);color:#fff;box-shadow:var(--flat)}
.btn-main:hover{background:#1a7d8c}
.btn-ghost{background:transparent;color:var(--terracotta);border-color:var(--terracotta)}
.card{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:24px;
 box-shadow:var(--flat)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:18px}
/* footer{} used to live here. It painted --navy, which the bridge below maps
   to --y-text — fine on paper, a near-white slab the moment a page went dark.
   assets/css/footer.css is the one definition; link it on any page with a
   footer. Only the gap above it stays a per-page decision. */
footer{margin-block-start:60px}

/* ---- button loading state: spinner must contrast with EVERY button variant ---- */
.btn.busy{position:relative;color:transparent !important;pointer-events:none}
.btn.busy::after{content:"";position:absolute;inset-block-start:50%;inset-inline-start:50%;
 inline-size:16px;block-size:16px;margin:-8px 0 0 -8px;border-radius:50%;
 border:2px solid rgba(255,255,255,.45);border-block-start-color:#fff;
 animation:btnspin .7s linear infinite}
/* light or transparent backgrounds need a dark spinner or it disappears */
.btn-ghost.busy::after,
.btn.on-light.busy::after,
.readybar .btn.busy::after,
.btn[style*="background:#fff"].busy::after{
 border-color:rgba(20,112,126,.28);border-block-start-color:#14707e}
.btn-danger.busy::after{border-color:rgba(200,72,76,.28);border-block-start-color:#C8484C}
@keyframes btnspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.btn.busy::after{animation:none}}

/* ---- the generative-AI tool card: a mark, and a border thick enough to see ----
   The gradient lives in the border box, so the border has to carry real width or
   there is nothing to paint it on: at 1px it read as no border at all. */
.tool.ai{position:relative;border:3px solid transparent;border-radius:16px;
 background:linear-gradient(var(--paper),var(--paper)) padding-box,
            linear-gradient(115deg,#2E3256,#1F8FA0,#C0912F,#A74F2B,#2E3256) border-box;
 background-size:auto,300% 100%;animation:aiedge 9s linear infinite}
@keyframes aiedge{to{background-position:0 0,300% 0}}
.tool.ai:hover{box-shadow:0 8px 26px rgba(46,50,86,.24)}
/* the mark alone — the words «هوش مصنوعی مولد» live in aria-label and title */
.ai-badge{display:inline-flex;align-items:center;justify-content:center;position:absolute;
 inset-block-start:-15px;inset-inline-start:18px;inline-size:30px;block-size:30px;
 background:linear-gradient(120deg,#2E3256,#1F8FA0);border-radius:50%;
 border:2px solid var(--paper);box-shadow:0 3px 12px rgba(31,143,160,.4)}
.ai-badge svg{inline-size:16px;block-size:16px}
@media (prefers-reduced-motion:reduce){.tool.ai{animation:none;background-position:0 0,50% 0}}

/* The account corner (credit badge + profile chip) lives in
   /assets/css/account.css — credits.js links it wherever it mounts, so the
   canvas tools that cannot load this file still get the same chip. */


/* ═══════════════════════════════════════════════════════════════════════════
   THE BRIDGE — site.css on the design system
   ───────────────────────────────────────────────────────────────────────────
   The five pages that load this file carry 244 references to the old token
   names inside their own <style> blocks. Rewriting those by hand would be a
   large edit with nothing to check it, so the names stay and only their
   DESTINATION moves. A page opts in by adding data-surface to <html>; without
   it every rule above still applies exactly as before, which is what lets
   these five migrate together and the rest wait.

   Same specificity as :root, declared later, so it wins on html[data-surface].
   One note on a mapping that inverts: --cream-deep used to be slightly DARKER
   than the page. On the paper surface a raised plane is LIGHTER than the
   ground, so it maps to --y-raise and the relationship flips. It stays subtle
   either way, but that is why it looks different rather than wrong.
   ═══════════════════════════════════════════════════════════════════════════ */
[data-surface]{
  --cream:var(--y-ground);
  --cream-deep:var(--y-raise);
  --paper:var(--y-panel);
  --navy:var(--y-text);
  --ink:var(--y-text);
  --muted:var(--y-muted);
  --line:var(--y-rule);
  /* The brand has ONE accent now. Teal was the primary and terracotta the
     secondary; both become the accent, and the difference between a filled and
     an outlined button carries what colour used to. */
  --teal:var(--y-accent);
  --terracotta:var(--y-accent);
  --r:var(--y-radius);
  /* warm shadows on a warm ground; the old ones were mixed from a blue ink */
  --flat:0 1px 2px rgba(36,31,29,.10);
  --lift:0 6px 22px rgba(36,31,29,.20);
}

/* Values written as literals above, which a token swap cannot reach. */
[data-surface] .topbar{background:var(--y-panel);backdrop-filter:none;}
[data-surface] .btn{border-radius:var(--y-radius-btn);}
[data-surface] .btn-main{background:var(--y-accent);color:var(--y-on-accent);box-shadow:none;}
[data-surface] .btn-main:hover{background:var(--y-accent);filter:brightness(1.08);}
[data-surface] .card{box-shadow:none;}
/* The footer is assets/css/footer.css now, on every page that has one, and it
   is a dark panel rather than an inverted plate. The bridge rule that used to
   live here painted its text --y-ground — correct when the footer was a light
   band under a paper page, near-black on the panel it is today — and it beat
   footer.css on specificity, so the tools footer had black text on dark while
   the landing's did not. A bridge outliving the thing it bridged.
   Nothing here styles the footer any more; footer.css owns it. */
/* The spinner has to contrast with whatever it is spinning on, and the old
   rules named teal and a red by hex. */
[data-surface] .btn.busy::after{
  border-color:rgba(255,248,245,.45);border-block-start-color:var(--y-on-accent);
}
[data-surface] .btn-ghost.busy::after,
[data-surface] .btn.on-light.busy::after,
[data-surface] .readybar .btn.busy::after,
[data-surface] .btn-danger.busy::after{
  border-color:rgba(179,69,21,.3);border-block-start-color:var(--y-accent);
}
/* The generative-AI card's edge was a five-stop gradient of the old palette.
   One accent means one edge; the animation stays. */
[data-surface] .tool.ai{
  border-radius:var(--y-radius);
  background:linear-gradient(var(--y-panel),var(--y-panel)) padding-box,
             linear-gradient(115deg,var(--y-text),var(--y-accent),var(--y-text)) border-box;
}
[data-surface] .tool.ai:hover{box-shadow:var(--lift);}
[data-surface] .ai-badge{background:var(--y-accent);border-color:var(--y-panel);box-shadow:none;}