/* /tools/ and /guides/ — the search landing pages (generated by
   scripts/seo_build.py). Builds on landing.css: .page, .page-hero, .section-h,
   .about-grid/.about-card, .who-row/.who, .svc-grid/.svc-card, .page-cta. */

.seo-page{ padding-top:clamp(1.4rem,4vw,2.6rem); }

.crumbs{ display:flex; flex-wrap:wrap; align-items:center; gap:.45rem; font:500 .82rem/1.4 var(--font);
  color:var(--muted); margin:0 auto clamp(1.6rem,4vw,2.4rem); max-width:1180px; }
.crumbs a{ color:var(--soft); text-decoration:none; }
.crumbs a:hover{ color:var(--navy); text-decoration:underline; }
.crumbs .sep{ opacity:.6; }
.crumbs [aria-current]{ color:var(--ink); font-weight:600; }

.hero-actions{ margin-top:1.8rem; }
.hero-note{ font:500 .84rem/1.4 var(--mono) !important; color:var(--muted) !important; margin-top:1rem !important; }
.page-hero p a, .about-card p a, .who i a, .steps a, .faq-d a, .guide a{ color:var(--navy); font-weight:600;
  text-decoration:underline; text-underline-offset:2px; }

.seo-sec{ margin-top:clamp(3.5rem,7vw,5.5rem); }
.about-card .ac-ic{ font-size:1.25rem; }

/* numbered steps */
.steps{ list-style:none; counter-reset:st; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1rem; max-width:1080px; margin:0 auto; padding:0; }
.steps li{ counter-increment:st; position:relative; background:var(--card); border:1px solid var(--line);
  border-radius:18px; padding:1.5rem 1.3rem 1.3rem; box-shadow:var(--shadow-s); }
.steps li::before{ content:counter(st); display:grid; place-items:center; width:34px; height:34px; border-radius:50%;
  font:800 .95rem/1 var(--font); color:#fff; background:var(--iris); margin-bottom:.9rem; }
.steps b{ display:block; font-size:1.05rem; letter-spacing:-.01em; color:var(--ink); }
.steps span{ display:block; color:var(--soft); font-size:.92rem; line-height:1.6; margin-top:.4rem; }

/* FAQ — native <details>, readable without JavaScript */
.faq-wrap{ max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:.7rem; }
.faq-d{ border:1px solid var(--line); border-radius:16px; background:var(--card); overflow:hidden; }
.faq-d summary{ cursor:pointer; list-style:none; padding:1.05rem 3rem 1.05rem 1.3rem; position:relative;
  font:600 1rem/1.45 var(--font); color:var(--ink); }
.faq-d summary::-webkit-details-marker{ display:none; }
.faq-d summary::after{ content:"+"; position:absolute; right:1.2rem; top:50%; transform:translateY(-50%);
  width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font-weight:700;
  background:var(--bg-2); color:var(--navy); transition:transform .25s; }
.faq-d[open] summary::after{ transform:translateY(-50%) rotate(45deg); }
.faq-d p{ padding:0 1.3rem 1.2rem; color:var(--soft); font-size:.95rem; line-height:1.65; margin:0; }

/* guides */
.guide{ max-width:760px; margin:0 auto; }
.g-head h1{ font-size:clamp(2rem,4.6vw,3.1rem); font-weight:800; letter-spacing:-.03em; line-height:1.08;
  margin-top:.2rem; color:var(--ink); }
.g-meta{ font:500 .84rem/1.4 var(--mono); color:var(--muted); margin-top:1rem; }
.g-lede{ font-size:1.14rem; line-height:1.7; color:var(--soft); margin-top:1.3rem; }
.g-toc{ margin:2rem 0 .5rem; padding:1.2rem 1.4rem; border:1px solid var(--line); border-radius:16px;
  background:var(--bg-2); }
.g-toc b{ font:700 .72rem/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
/* section titles carry their own numbers — the list adds none */
.g-toc ol{ margin:.8rem 0 0; padding-left:0; list-style:none; columns:2; column-gap:2rem; }
.g-toc li{ margin:.25rem 0; break-inside:avoid; }
.g-toc a{ text-decoration:none !important; font-weight:500 !important; }
.g-sec{ margin-top:2.6rem; scroll-margin-top:90px; }
.g-sec h2{ font-size:clamp(1.4rem,2.8vw,1.8rem); font-weight:800; letter-spacing:-.02em; color:var(--ink); }
.g-sec h3{ font-size:1.15rem; font-weight:700; margin-top:1.4rem; color:var(--ink); }
.g-sec p, .g-sec li{ color:var(--soft); font-size:1.02rem; line-height:1.75; }
.g-sec p{ margin-top:.9rem; }
.g-sec ul, .g-sec ol{ margin:.9rem 0 0; padding-left:1.3rem; }
.g-sec li{ margin:.45rem 0; }
.g-sec strong{ color:var(--ink); }
.guide code{ font:500 .9em/1.4 var(--mono); background:var(--bg-2); border:1px solid var(--line);
  border-radius:6px; padding:.08rem .35rem; }
.guide pre{ margin:1rem 0 0; padding:1rem 1.1rem; overflow-x:auto; border-radius:14px; background:#0f1424;
  border:1px solid rgba(255,255,255,.08); }
.guide pre code{ background:none; border:0; padding:0; color:#e4e8f5; font-size:.86rem; line-height:1.6;
  white-space:pre; }

@media(max-width:640px){
  .g-toc ol{ columns:1; }
  .steps{ grid-template-columns:1fr; }
}