/* SEO guide pages (/<slug>/) — layered on site.css tokens and components. Generated pages: scripts/build-seo.mjs */

.crumbs{padding:18px var(--gutter) 0;font-size:13px;color:var(--ink-3)}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 0}
.crumbs li{display:inline-flex;align-items:center;min-width:0}
.crumbs li+li::before{content:'/';margin:0 8px;color:var(--line)}
.crumbs a{text-decoration:none;color:var(--ink-2)}
.crumbs a:hover{text-decoration:underline}
.crumbs [aria-current]{color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.seo-head{padding-top:clamp(24px,4vw,56px)}
.seo-head .lede{max-width:680px}
.seo-head .lede a,.seo-article a,.faq-list a,.seo-empty a{color:var(--ink)}

/* template grid: reserve a row so cards streaming in don't push the page */
.seo-tpls .tpl-grid{min-height:340px}
.seo-tpls .tpl-grid[hidden]+.seo-empty{display:flex}
.seo-empty{min-height:200px;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;border-radius:var(--r-card);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink-2);font-size:15px;padding:24px;text-align:center}
.seo-more{margin-top:28px}
.seo-names{margin:16px 0 0;padding-left:20px;color:var(--ink-2);font-size:15px}

/* how it works: 4 → 2 → 1 columns */
@media (max-width:980px){.seo-how .steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.seo-how .steps{grid-template-columns:1fr}.seo-how .steps li{padding:20px}.seo-how .step-n{margin-bottom:16px}}

/* long-form guide */
.seo-article{max-width:740px}
.seo-article>p:first-child{font-size:18px;color:var(--ink);line-height:1.6}
.seo-article h2{font-size:clamp(24px,2.4vw,32px);letter-spacing:-.03em;margin:44px 0 14px}
.seo-article h2:first-child{margin-top:0}
.seo-article p,.seo-article li{font-size:16.5px;line-height:1.72;color:var(--ink-2);text-wrap:pretty}
.seo-article p+p{margin-top:14px}
.seo-article ul{margin:16px 0 0;padding-left:0;list-style:none;display:grid;gap:10px}
.seo-article li{position:relative;padding-left:22px}
.seo-article li::before{content:'';position:absolute;left:2px;top:.72em;width:7px;height:7px;border-radius:50%;background:var(--gold)}
.seo-article strong{color:var(--ink);font-weight:600}

/* wordings */
.wordings{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.wording{position:relative;margin:0;padding:22px 22px 18px;border-radius:var(--r-card);background:#fffcf6;box-shadow:inset 0 0 0 1px var(--line);display:flex;flex-direction:column;min-width:0}
.wording figcaption{font-size:13px;font-weight:600;color:var(--ink-2);padding-right:64px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.w-lang{font-weight:500;font-size:11.5px;color:var(--accent);padding:1px 8px;border-radius:99px;background:#fbeef0}
.w-text{margin-top:14px;white-space:pre-line;font-size:15.5px;line-height:1.65;color:var(--ink);overflow-wrap:anywhere;flex:1}
.w-text:lang(hi),.w-text:lang(mr),.w-text:lang(sd){font-size:16.5px;line-height:1.8}
.w-copy{display:none;position:absolute;top:16px;right:16px;font-size:12.5px;font-weight:600;padding:6px 12px;border-radius:99px;background:var(--card);color:var(--ink);transition:background .2s}
.js .w-copy{display:inline-flex}
.w-copy:hover{background:var(--card-2)}
.w-copy.ok{background:var(--ink);color:#fff}

/* hub directory */
.seo-hub h3{font-size:15px;color:var(--ink-3);font-weight:600;letter-spacing:0;margin:34px 0 12px}
.seo-hub h3:first-of-type{margin-top:0}
.seo-dir{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.seo-dir a{display:flex;flex-direction:column;gap:6px;height:100%;padding:18px 20px;border-radius:16px;box-shadow:inset 0 0 0 1px var(--line);text-decoration:none;transition:background .2s}
.seo-dir a:hover{background:var(--card)}
.seo-dir b{font-size:15.5px;letter-spacing:-.01em}
.seo-dir span{font-size:13.5px;line-height:1.5;color:var(--ink-2)}

/* related */
.seo-rel{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.seo-rel a{display:inline-flex;padding:10px 16px;border-radius:99px;box-shadow:inset 0 0 0 1px var(--line);text-decoration:none;font-size:14.5px;color:var(--ink);transition:background .2s}
.seo-rel a:hover{background:var(--card)}

@media (max-width:640px){
  .seo-head h1{font-size:clamp(36px,10.5vw,52px)}
  .seo-head .cta-row .btn{flex:1 1 auto}
  .seo-tpls .tpl-grid{min-height:300px}
  .wordings{grid-template-columns:1fr}
  .wording{padding:18px 18px 16px}
  .seo-article p,.seo-article li{font-size:16px}
}