/* ======================================================================
   Landing / guide pages only. Loaded after the inline homepage styles,
   so it only adds to them. The homepage never loads this file.
   ====================================================================== */

/* hero: longer, question-shaped titles need a smaller size */
header.hero{padding-top:56px}
header.hero h1{font-size:clamp(32px,4.4vw,50px);line-height:1.08;max-width:22ch;
  margin-inline:auto}
.crumbs{font-size:13.5px;color:var(--muted-2);margin-bottom:22px}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--accent);text-decoration:underline}
.crumbs span{margin:0 6px;color:var(--line-2)}
.hero-cta{margin-top:34px}
.hero-cta .hint{margin-top:14px}

/* long-form article: left-aligned, readable measure */
.seo{margin-top:96px}
.article{max-width:780px;margin:0 auto;text-align:left}
.article h2{max-width:none;margin:72px 0 18px;font-size:clamp(24px,2.6vw,32px);
  text-align:left}
.article > h2:first-child{margin-top:0}
.article h3{margin:34px 0 10px;font-size:18px}
.article p,.article li{color:var(--ink-2);font-size:17px;line-height:1.72}
.article p{margin:0 0 18px}
.article ul.plain{margin:0 0 22px;padding-left:22px}
.article ul.plain li{margin-bottom:8px}
.article strong{color:var(--ink);font-weight:600}
.article code{background:var(--tint);border:1px solid var(--line);border-radius:6px;
  padding:1px 7px;font-size:.9em;color:var(--ink);word-break:break-word}
.article .steps{margin:26px 0 0;max-width:none}
.article .steps li{color:var(--muted);font-size:15.5px}
.article .fmt{margin:26px 0 8px}
.article .fmt td:first-child{white-space:normal;width:36%}
.article .faq{margin:26px 0 0;max-width:none}
.article .faq p{color:var(--muted);font-size:15px;margin:14px 0 0 28px}
.article .video{margin:26px 0 0;max-width:none}
.article .warn{font-size:15px}
.article .warn p{color:var(--amber-ink);font-size:15px;margin:0}
.vidnote{font-size:14px!important;color:var(--muted)!important;margin-top:12px!important}
.answer{background:var(--accent-wash);border-radius:var(--r);padding:22px 26px;
  margin:0 0 28px}
.answer p{margin:0;color:var(--ink)!important}

/* comparison table with two value columns */
.fmt.vs td:first-child{width:auto;color:var(--ink);font-weight:600}
.fmt.vs th:not(:first-child),.fmt.vs td:not(:first-child){width:36%}

/* related guides as cards */
.cards.related{margin-top:22px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.cards.related .card{text-decoration:none;display:block;padding:24px 22px}
.cards.related .card h3{margin:0 0 8px;font-size:16px;color:var(--ink)}
.cards.related .card p{font-size:14px;color:var(--muted)}
.cards.related .card:hover h3{color:var(--accent)}

.cta-end{margin:80px 0 0;text-align:center;background:var(--tint);
  border:1px solid var(--line);border-radius:var(--r-lg);padding:44px 24px}
.cta-end p{margin:0 0 18px!important;font-size:18px!important;color:var(--ink)!important;
  font-weight:600}

@media (max-width:640px){
  .article .fmt{display:block;overflow-x:auto}
  .article .fmt th,.article .fmt td{padding:14px 14px}
  .fmt.vs th:not(:first-child),.fmt.vs td:not(:first-child){min-width:160px}
}
@media (max-width:900px){
  header.hero{padding-top:36px}
  .seo{margin-top:64px}
  .article h2{margin-top:56px}
}