/*
 * The blog, tool and content pages (layout.front). Loaded after home.css and
 * built on its tokens (--bg, --panel*, --stroke, --text, --muted, --purple*),
 * so both themes come for free. No colour below is new except inside
 * .post-body's legacy block, which stands in for the old theme's classes
 * that production posts still carry.
 */

.front-main{min-height:60vh}
.front-section{padding:24px clamp(18px,4.1vw,74px) 88px}

/* ---------- Page heading ---------- */
.page-hero{padding:48px clamp(18px,4.1vw,74px) 36px;max-width:980px}
.page-hero h1{font-size:clamp(30px,4.2vw,50px);line-height:1.35;font-weight:800;margin:0 0 14px;letter-spacing:-.01em;text-wrap:balance}
.page-hero>p{color:var(--muted);font-size:15px;line-height:1.95;max-width:720px;margin:0}
.hero-page{display:inline-block;margin-inline-start:12px;font-size:15px;font-weight:700;color:var(--muted);vertical-align:middle}
.crumbs ol{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-wrap:wrap;gap:6px;font-size:12px;color:var(--subtle)}
.crumbs li{display:flex;align-items:center;gap:6px}
.crumbs li+li:before{content:"‹";color:var(--subtle)}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--purple-soft)}
.crumbs [aria-current]{color:var(--text)}
.section-title{font-size:24px;margin:0 0 22px}
.section-head-row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:22px}
.section-head-row h2{font-size:26px;margin:0}

/* ---------- Topic chips ---------- */
.topic-chips{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.topic-chip{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border:1px solid var(--stroke);border-radius:999px;background:var(--panel);color:var(--muted);font-size:13px;font-weight:600;transition:color .18s,border-color .18s,background .18s}
.topic-chip:hover{color:var(--text);border-color:var(--purple-soft)}
.topic-chip.is-active{background:var(--purple);border-color:var(--purple);color:#fff}
.topic-chip:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* ---------- Post cards: the whole card is the title's link ---------- */
.post-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.post-card{position:relative;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--stroke);border-radius:20px;overflow:hidden;transition:transform .2s cubic-bezier(.2,.8,.2,1),border-color .2s,box-shadow .2s}
.post-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--purple) 55%,var(--stroke));box-shadow:var(--shadow)}
.post-card:focus-within{outline:2px solid var(--focus);outline-offset:3px}
.post-card-media{aspect-ratio:16/9;background:var(--panel-2);overflow:hidden}
.post-card-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.post-card:hover .post-card-media img{transform:scale(1.04)}
.post-card-placeholder{display:grid;place-items:center;width:100%;height:100%;background:radial-gradient(circle at 70% 30%,color-mix(in srgb,var(--purple) 28%,transparent),transparent 60%),var(--panel-2)}
.post-card-placeholder .logo-symbol{width:64px;height:68px;opacity:.9}
.post-card-body{display:flex;flex-direction:column;gap:10px;padding:18px 20px 20px;flex:1}
.post-card-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;color:var(--subtle);font-size:12px}
.post-chip{display:inline-flex;align-items:center;min-height:24px;padding:0 10px;border-radius:999px;background:color-mix(in srgb,var(--purple) 16%,transparent);color:var(--purple-soft);font-weight:700;font-size:11px}
.post-card-title{margin:0;font-size:17px;line-height:1.7;font-weight:800;color:var(--text)}
.post-card-link{color:inherit;outline:none}
.post-card-link:after{content:"";position:absolute;inset:0;z-index:1}
.post-card-excerpt{margin:0;color:var(--muted);font-size:13px;line-height:1.9;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.post-card-more{margin-top:auto;padding-top:6px;color:var(--purple-soft);font-size:13px;font-weight:700;display:inline-flex;gap:6px;align-items:center}
.post-card-more span{transition:transform .2s}
.post-card:hover .post-card-more span{transform:translateX(-4px)}
.post-card.is-featured{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);margin-bottom:20px}
.post-card.is-featured .post-card-media{aspect-ratio:auto;min-height:340px;position:relative}
.post-card.is-featured .post-card-media img{position:absolute;inset:0}
.post-card.is-featured .post-card-body{padding:32px;justify-content:center;gap:14px}
.post-card.is-featured .post-card-title{font-size:clamp(20px,2.2vw,28px);line-height:1.6}
.post-card.is-featured .post-card-excerpt{-webkit-line-clamp:3;font-size:14px}

/* ---------- Pagination ---------- */
.pager{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:44px}
.pager-pages{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:6px}
.pager-page,.pager-step{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:44px;height:44px;padding:0 12px;border:1px solid var(--stroke);border-radius:12px;background:var(--panel);color:var(--text);font-weight:700;font-size:14px;transition:border-color .18s,background .18s}
.pager a:hover{border-color:var(--purple-soft)}
.pager a:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.pager-page.is-current{background:var(--purple);border-color:var(--purple);color:#fff}
.pager-step.is-disabled{opacity:.4}
.pager-gap{color:var(--subtle);padding:0 4px}

/* ---------- Article ---------- */
.article{padding:0 clamp(18px,4.1vw,74px)}
.article-head{max-width:860px;padding-top:44px;margin:0 auto}
.article-head h1{font-size:clamp(28px,3.6vw,44px);line-height:1.45;font-weight:800;margin:0 0 16px;text-wrap:balance}
.article-lead{font-size:17px;line-height:2;color:var(--muted);margin:0 0 22px}
.article-meta{display:flex;align-items:center;gap:16px;padding:16px 0;border-top:1px solid var(--stroke);border-bottom:1px solid var(--stroke)}
.article-author{display:flex;align-items:center;gap:12px}
.article-author img{width:40px;height:40px;border-radius:50%;object-fit:cover;background:var(--panel-2)}
.article-author>span{display:flex;flex-direction:column;line-height:1.7}
.article-author a,.article-author strong{font-weight:700;color:var(--text);font-size:14px}
.article-author a:hover{color:var(--purple-soft)}
.article-author small{color:var(--subtle);font-size:12px}
.article-cover{max-width:1100px;margin:32px auto 0;border-radius:22px;overflow:hidden;background:var(--panel-2);aspect-ratio:16/9}
.article-cover img{width:100%;height:100%;object-fit:cover;display:block}
.article-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:48px;max-width:1100px;margin:40px auto 0;align-items:start}
.article-side{position:sticky;top:calc(var(--header-h,74px) + 20px);display:flex;flex-direction:column;gap:14px}
.article-main{min-width:0;max-width:760px}

.toc{background:var(--panel);border:1px solid var(--stroke);border-radius:16px;padding:6px 16px 14px}
.toc summary{cursor:pointer;list-style:none;font-weight:800;font-size:14px;padding:10px 0;display:flex;justify-content:space-between;align-items:center}
.toc summary::-webkit-details-marker{display:none}
.toc summary:after{content:"⌄";color:var(--muted);transition:transform .2s}
.toc[open] summary:after{transform:rotate(180deg)}
.toc ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;max-height:55vh;overflow:auto}
.toc a{display:block;padding:6px 10px;border-radius:9px;color:var(--muted);font-size:13px;line-height:1.8;border-inline-start:2px solid transparent}
.toc a:hover{background:var(--panel-2);color:var(--text);border-inline-start-color:var(--purple)}
.toc .is-sub a{padding-inline-start:22px;font-size:12px}

.share-box{background:var(--panel);border:1px solid var(--stroke);border-radius:16px;padding:14px 16px}
.share-label{display:block;font-size:13px;font-weight:800;margin-bottom:10px}
.share-row{display:flex;flex-wrap:wrap;gap:8px}
.share-btn{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--stroke);border-radius:12px;background:var(--panel-2);color:var(--muted);cursor:pointer;transition:color .18s,border-color .18s}
.share-btn:hover{color:var(--text);border-color:var(--purple-soft)}
.share-btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.share-btn svg{width:20px;height:20px;stroke-width:1.7}
.share-done{display:block;margin-top:8px;font-size:12px;color:var(--purple-soft)}

.article-tags{list-style:none;margin:36px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.author-box{display:flex;gap:16px;align-items:flex-start;margin-top:32px;padding:22px;background:var(--panel);border:1px solid var(--stroke);border-radius:18px}
.author-box img{width:64px;height:64px;border-radius:50%;object-fit:cover;flex:none;background:var(--panel-2)}
.author-box-label{display:block;font-size:11px;color:var(--subtle);font-weight:700}
.author-box strong{font-size:16px}
.author-box strong a:hover{color:var(--purple-soft)}
.author-box small{display:block;color:var(--muted);font-size:12px}
.author-box p{margin:8px 0 0;color:var(--muted);font-size:13px;line-height:1.9}

.tools-cta{margin-top:32px;padding:26px;border-radius:20px;border:1px solid color-mix(in srgb,var(--purple) 45%,var(--stroke));background:radial-gradient(circle at 12% 0%,color-mix(in srgb,var(--purple) 22%,transparent),transparent 55%),var(--panel)}
.tools-cta-head h2{font-size:22px;margin:0 0 6px}
.tools-cta-head p{margin:0 0 18px;color:var(--muted);font-size:13px}
.tools-cta-list{list-style:none;margin:0 0 16px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.mini-card{position:relative;display:flex;flex-direction:column;gap:4px;padding:14px 16px;border:1px solid var(--stroke);border-radius:14px;background:var(--panel-2);transition:border-color .18s,transform .18s}
.mini-card:hover{border-color:var(--purple-soft);transform:translateY(-2px)}
.mini-card:focus-within{outline:2px solid var(--focus);outline-offset:2px}
.mini-card-link{font-weight:800;font-size:14px;color:var(--text);line-height:1.7;outline:none}
.mini-card-link:after{content:"";position:absolute;inset:0}
.mini-card>span{color:var(--muted);font-size:12px;line-height:1.8}
.post-steps{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:32px}
.post-steps .is-next{text-align:left}
.post-steps-label{font-size:11px;color:var(--subtle);font-weight:700}
.related{padding-top:64px}

/* ---------- Article body ---------- */
.post-body{font-size:17px;line-height:2.05;color:var(--text);overflow-wrap:anywhere}
.post-body>*:first-child{margin-top:0}
.post-body p{margin:0 0 1.2em}
.post-body h2,.post-body h3,.post-body h4,.post-body .h5{line-height:1.6;font-weight:800;scroll-margin-top:calc(var(--header-h,74px) + 16px)}
.post-body h2{font-size:clamp(22px,2.4vw,27px);margin:2em 0 .7em}
.post-body h3{font-size:clamp(19px,2vw,22px);margin:1.7em 0 .6em}
.post-body h4,.post-body .h5{font-size:18px;margin:1.5em 0 .5em}
.post-body a{color:var(--purple-soft);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.post-body a:hover{text-decoration-thickness:2px}
.post-body ul,.post-body ol{margin:0 0 1.3em;padding-inline-start:1.5em}
.post-body li{margin:.35em 0}
.post-body li::marker{color:var(--purple-soft)}
.post-body strong,.post-body b{font-weight:800}
.post-body blockquote{margin:1.6em 0;padding:16px 22px;border-inline-start:3px solid var(--purple);background:var(--panel);border-radius:12px;color:var(--muted)}
.post-body img{max-width:100%;height:auto;border-radius:14px}
.post-body figure{margin:1.6em 0}
.post-body figcaption{font-size:13px;color:var(--subtle);text-align:center;margin-top:8px}
.post-body code{font-family:ui-monospace,Consolas,monospace;font-size:.88em;background:var(--panel-2);border:1px solid var(--stroke);border-radius:6px;padding:1px 6px;direction:ltr;unicode-bidi:plaintext}
.post-body pre{background:var(--panel-2);border:1px solid var(--stroke);border-radius:14px;padding:16px;overflow:auto;direction:ltr;text-align:left;line-height:1.7}
.post-body pre code{background:none;border:0;padding:0}
.post-body table{width:100%;border-collapse:collapse;margin:0;font-size:14px;line-height:1.8}
.post-body th,.post-body td{border:1px solid var(--stroke);padding:10px 12px;text-align:start;vertical-align:top}
.post-body th{background:var(--panel-2);font-weight:800}
.post-body hr{border:0;border-top:1px solid var(--stroke);margin:2em 0}

/* The old theme's classes that production posts still carry (the full
   list comes from the posts themselves). The decorative gradient layers
   they pinned in place are dropped, and dark: variants follow .dark,
   which layout.home keeps in step with the theme. */
.post-body .pointer-events-none.select-none,.post-body .absolute.pointer-events-none{display:none}
.post-body figure.table,.post-body .table-figure,.post-body .table-fw{display:block;width:100%;overflow-x:auto;margin:1.6em 0;border:1px solid var(--stroke);border-radius:14px}
.post-body figure.table table,.post-body .table-figure table,.post-body .table-fw table{border:0}
.post-body .table-figure th:first-child,.post-body .table-figure td:first-child{border-inline-start:0}
.post-body .toc-content,.post-body .rbtoc,.post-body .ruby-table-contents{background:var(--panel);border:1px solid var(--stroke);border-radius:16px;padding:16px 20px;margin:0 0 1.6em;font-size:15px}
.post-body .toc-content ul,.post-body .rbtoc ul,.post-body .ruby-table-contents ul{margin:0}
.post-body .card-item{background:var(--panel);border:1px solid var(--stroke);border-radius:18px;padding:20px;margin:1.2em 0}
.post-body .flex{display:flex}.post-body .flex-col{flex-direction:column}.post-body .items-center{align-items:center}.post-body .justify-center{justify-content:center}
.post-body .gap-8{gap:32px}.post-body .gap-10{gap:40px}
.post-body .space-y-2\.5>*+*{margin-top:10px}.post-body .space-y-3>*+*{margin-top:12px}.post-body .space-y-6>*+*{margin-top:24px}
.post-body .w-full{width:100%}.post-body .mx-auto{margin-inline:auto}.post-body .text-center{text-align:center}
.post-body .overflow-hidden{overflow:hidden}.post-body .object-cover{object-fit:cover}.post-body .relative{position:relative}
.post-body .rounded-\[20px\]{border-radius:20px}.post-body .size-10{width:40px;height:40px}.post-body .p-11{padding:44px}
.post-body .max-w-\[680px\]{max-width:680px}
.post-body .text-accent,.post-body .text-accent\/60{color:var(--muted)}
.post-body .bg-secondary{background:var(--panel-2)}
.post-body .text-heading-6{font-size:18px;font-weight:800}
@media(min-width:768px){.post-body .md\:flex-row{flex-direction:row}.post-body .md\:max-w-\[371px\]{max-width:371px}}
@media(min-width:1024px){.post-body .lg\:flex-row{flex-direction:row}.post-body .lg\:gap-8{gap:32px}.post-body .lg\:items-start{align-items:flex-start}.post-body .lg\:max-w-\[500px\]{max-width:500px}}

/* ---------- Author page ---------- */
.author-profile{display:flex;gap:24px;align-items:flex-start}
.author-profile img{width:96px;height:96px;border-radius:50%;object-fit:cover;flex:none;border:1px solid var(--stroke)}
.author-profile h1{font-size:clamp(28px,3.4vw,40px);margin:0 0 6px}
.author-role{color:var(--purple-soft);font-weight:700;margin:0 0 8px}
.author-profile p{color:var(--muted);line-height:1.95;margin:0}

/* ---------- Responsive ---------- */
@media(max-width:1100px){
  .post-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .article-layout{grid-template-columns:minmax(0,1fr);gap:24px}
  .article-side{position:static;order:-1}
  .article-main{max-width:none}
  .toc:not([open]){padding-bottom:6px}
}
@media(max-width:820px){
  .post-card.is-featured{grid-template-columns:1fr}
  .post-card.is-featured .post-card-media{min-height:0;aspect-ratio:16/9}
  .post-card.is-featured .post-card-media img{position:static}
  .post-card.is-featured .post-card-body{padding:20px}
  .tools-cta-list{grid-template-columns:1fr}
}
@media(max-width:620px){
  .page-hero{padding:28px 18px 20px}
  .front-section{padding:16px 18px 100px}
  .post-grid{grid-template-columns:1fr;gap:14px}
  .article{padding:0 18px}
  .article-head{padding-top:26px}
  .article-cover{border-radius:14px;margin-top:22px}
  .post-body{font-size:16px;line-height:2}
  .post-steps{grid-template-columns:1fr}
  .post-steps .is-next{text-align:start}
  .author-profile{flex-direction:column}
  .pager-step{padding:0 10px}
  .section-head-row{flex-direction:column;gap:6px}
}
@media(prefers-reduced-motion:reduce){.post-card,.post-card-media img,.mini-card{transition:none}.post-card:hover,.mini-card:hover{transform:none}.post-card:hover .post-card-media img{transform:none}}

/* Post text is written by editors: a Latin "o4-mini" or "GPT-5" must stay Latin
   (Dana draws ASCII digits as Persian). Numbers the page itself prints go through fa_digits(). */
.post-body,.post-card h2,.post-card h3,.article-head h1,.toc,.mini-card{font-family:"hn-latin-digits",Dana,system-ui,sans-serif}

/* ================= Tools (/tools, /tools/{slug}) ================= */
.tool-group{margin-bottom:56px}
.tool-group:last-child{margin-bottom:0}
.tool-group-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-bottom:20px}
.tool-group-head h2{font-size:24px;margin:0}
.tool-group-head span{color:var(--muted);font-size:13px}
.tool-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.tool-grid>li{display:flex}
.tool-card-link{flex:1;display:flex;flex-direction:column;gap:8px;padding:22px;background:var(--panel);border:1px solid var(--stroke);border-radius:20px;color:var(--text);transition:transform .2s cubic-bezier(.2,.8,.2,1),border-color .2s,box-shadow .2s}
.tool-card-link:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--purple) 55%,var(--stroke));box-shadow:var(--shadow)}
.tool-card-link:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.tool-card-art{width:56px;height:56px;object-fit:contain;margin-bottom:6px}
.tool-card-title{font-size:17px;line-height:1.6;margin:0;font-weight:800}
.tool-card-text{color:var(--muted);font-size:13.5px;line-height:1.9;flex:1}
.tool-card-more{color:var(--purple-soft);font-size:13px;font-weight:700;margin-top:4px}

.tool-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:center;padding:48px clamp(18px,4.1vw,74px) 40px}
.tool-hero h1{font-size:clamp(30px,4vw,48px);line-height:1.4;font-weight:800;margin:0 0 16px;text-wrap:balance}
.tool-lead{color:var(--muted);font-size:15.5px;line-height:2;margin:0 0 28px;max-width:640px}
.tool-actions{display:flex;flex-wrap:wrap;gap:10px}
.tool-preview{display:flex;justify-content:center;min-width:0}
.tool-preview>img{width:100%;max-width:360px;height:auto;object-fit:contain}

/* tools/previews/* are drawn with tools.css, which reads the old theme's
   palette. Same values as modern-theme's main.css, so nothing changes
   colour; plus the handful of layout utilities those partials use, which
   main.css provided and home.css does not. */
.tool-preview{--color-primary-400:#a585ff;--color-primary-500:#864ffe;--color-primary-600:#7c31f6;--color-secondary:#1a1a1c;--color-accent:#fcfcfc;--color-background-1:#fcfcfd;--color-background-2:#f9fafb;--color-background-3:#f4f5f8;--color-background-5:#13171e;--color-background-7:#181d26;--color-stroke-1:#dfe4eb;--color-stroke-2:#e3e7ed;--color-stroke-6:#202731}
.tool-preview .tp-mock{max-width:440px}
.tool-preview p{margin:0}
.tool-preview .flex{display:flex}.tool-preview .grid{display:grid}.tool-preview .block{display:block}
.tool-preview .flex-col{flex-direction:column}.tool-preview .flex-wrap{flex-wrap:wrap}.tool-preview .flex-1{flex:1 1 0%}
.tool-preview .items-start{align-items:flex-start}.tool-preview .items-center{align-items:center}.tool-preview .items-stretch{align-items:stretch}
.tool-preview .justify-between{justify-content:space-between}.tool-preview .justify-center{justify-content:center}
.tool-preview .grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.tool-preview .grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.tool-preview .gap-2{gap:8px}.tool-preview .gap-3{gap:12px}
.tool-preview .mb-2{margin-bottom:8px}.tool-preview .mb-3{margin-bottom:12px}.tool-preview .mb-4{margin-bottom:16px}.tool-preview .mb-5{margin-bottom:20px}.tool-preview .mb-6{margin-bottom:24px}.tool-preview .mb-8{margin-bottom:32px}
.tool-preview .mx-auto{margin-inline:auto}.tool-preview .text-center{text-align:center}.tool-preview .font-medium{font-weight:500}

.tool-band{margin:0 clamp(18px,4.1vw,74px);border-block:1px solid var(--stroke);padding:26px 0}
.tool-specs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin:0}
.tool-specs dt{color:var(--muted);font-size:12.5px;margin-bottom:6px}
.tool-specs dd{margin:0;font-weight:800;font-size:15px;line-height:1.7}

.tool-block{padding-top:56px;padding-bottom:0}
.tool-block>h2{font-size:clamp(22px,2.6vw,30px);line-height:1.5;margin:0 0 10px}
.tool-block-lead{color:var(--muted);font-size:14.5px;line-height:1.95;margin:0 0 26px}
.tool-block>h2+.tool-grid,.tool-block>h2+.tool-steps,.tool-block>h2+.faq-list{margin-top:24px}
.tool-tile{display:flex;align-items:flex-start;gap:14px;padding:18px;background:var(--panel);border:1px solid var(--stroke);border-radius:18px}
.tool-tile strong{display:block;font-size:15px;line-height:1.7;margin-bottom:4px}
.tool-tile span>span{display:block;color:var(--muted);font-size:13px;line-height:1.85}
.tool-model-code{flex-shrink:0;display:grid;place-items:center;min-width:42px;height:42px;padding:0 8px;border-radius:12px;background:color-mix(in srgb,var(--purple) 16%,transparent);color:var(--purple-soft);font-weight:800;font-size:13px;font-family:"hn-latin-digits",Dana,system-ui,sans-serif}
.tool-tile-icon{flex-shrink:0;display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:color-mix(in srgb,var(--purple) 16%,transparent);color:var(--purple-soft)}
.tool-tile-icon svg{width:20px;height:20px}
.tool-soon{display:inline-block;margin-inline-start:6px;padding:1px 8px;border-radius:999px;font-size:11px;font-weight:700;color:var(--muted);background:var(--panel-3);vertical-align:middle}
.tool-tile strong,.tool-formats .topic-chip{font-family:"hn-latin-digits",Dana,system-ui,sans-serif}

.tool-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.tool-steps li{position:relative;padding:22px;background:var(--panel);border:1px solid var(--stroke);border-radius:18px}
.tool-steps strong{display:block;font-size:16px;margin:12px 0 6px}
.tool-steps li>span:last-child{color:var(--muted);font-size:13.5px;line-height:1.9}
.tool-step-n{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--purple);color:#fff;font-weight:800}
.tool-formats-label{color:var(--muted);font-size:13px;margin:0}
.tool-formats .topic-chips{margin-top:12px}

.tool-prose{max-width:820px}
.tool-prose article+article{margin-top:40px}
.tool-prose h2{font-size:clamp(21px,2.4vw,27px);line-height:1.55;margin:0 0 14px}
.tool-prose p{color:var(--muted);font-size:15.5px;line-height:2.05;margin:0 0 14px}
#tool-faq{scroll-margin-top:96px}
#tool-faq .faq-list{max-width:860px}

.tool-cta{text-align:center;padding:48px 24px;border-radius:28px;border:1px solid color-mix(in srgb,var(--purple) 45%,var(--stroke));background:radial-gradient(120% 140% at 50% 0%,color-mix(in srgb,var(--purple) 22%,transparent),transparent 70%),var(--panel)}
.tool-cta h2{font-size:clamp(22px,2.8vw,32px);margin:0 0 8px}
.tool-cta p{color:var(--muted);margin:0 0 22px}

@media (max-width:1100px){.tool-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.tool-hero{grid-template-columns:1fr;gap:32px}.tool-specs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:820px){.tool-steps{grid-template-columns:1fr}}
@media (max-width:620px){.tool-grid{grid-template-columns:1fr}.tool-hero{padding-top:28px}.tool-block{padding-top:40px}.tool-actions .btn{flex:1}.tool-cta{padding:36px 18px}}
@media (prefers-reduced-motion:reduce){.tool-card-link{transition:none}.tool-card-link:hover{transform:none}}
/* Tool copy names models like "Minimax Music01" or "TTS 1 HD"; its own counts are already Persian digits. */
.tool-preview,.tool-card-text,.tool-card-title,.tool-lead,.tool-hero h1,.tool-tile,.tool-specs dd,.tool-block-lead,.tool-prose,.tool-steps,#tool-faq .faq-item{font-family:"hn-latin-digits",Dana,system-ui,sans-serif}

/* ================= CMS pages (/page/{slug}, /privacy-policy, /terms) ================= */
.cms-hero{padding-bottom:8px}
.cms-layout{display:grid;grid-template-columns:minmax(0,1fr);max-width:860px;padding-top:8px}
.cms-layout:has(.article-side){grid-template-columns:240px minmax(0,1fr);gap:48px;max-width:1160px;align-items:start}
.cms-body>:first-child{margin-top:0}
@media (max-width:1100px){.cms-layout:has(.article-side){grid-template-columns:minmax(0,1fr);gap:20px}.cms-layout .article-side{position:static}}

/* ================= One width for every page =================
   Home sections span the whole workspace with one side gutter
   (home.css .section: clamp(24px,4.1vw,74px), 30px under 1100px, 18px
   under 620px). Every blog, tool and content page uses the same gutter
   and no narrower box, so their edges line up with the home page, the
   header and the footer. */
:root{--hn-gutter:clamp(24px,4.1vw,74px)}
@media(max-width:1100px){:root{--hn-gutter:30px}}
@media(max-width:620px){:root{--hn-gutter:18px}}
.page-hero,.front-section,.tool-hero,.article{padding-inline:var(--hn-gutter);max-width:none}
.tool-band{margin-inline:var(--hn-gutter)}
.article-head,.article-cover,.article-layout,.article-main,.tool-prose,#tool-faq .faq-list,.cms-layout,.cms-layout:has(.article-side){max-width:none;margin-inline:0}
.article-layout,.cms-layout:has(.article-side){grid-template-columns:300px minmax(0,1fr)}
@media(max-width:1100px){.article-layout,.cms-layout:has(.article-side){grid-template-columns:minmax(0,1fr)}}

/* Author monogram, when the author has no picture of their own (App\Support\BlogMedia) */
.author-monogram{flex:none;border-radius:50%;display:block}
.author-profile .author-monogram{box-shadow:0 0 0 1px var(--stroke)}

/* Line length (2026-09-30): the page edges stay the same everywhere, but
   running text stops at a readable measure (~75 Persian characters). In RTL
   the text starts at the right edge, so that edge stays aligned; figures,
   tables and code keep the full width. rem, not ch: Dana's "0" is not a
   Persian letter's width. */
.post-body>p,.post-body>ul,.post-body>ol,.post-body>blockquote,.post-body>h2,.post-body>h3,.post-body>h4,.post-body>.h5,
.article-lead,.faq-answer{max-inline-size:46rem}
/* Tool pages: the text runs the full width of the sections around it (owner, 2026-09-30). */
#tool-faq .faq-answer{max-inline-size:none}