/* ============================================================
   /guides — long-form help articles for Shopify merchants.
   Loaded after styles.css and built on its .doc page and tokens;
   this file only adds what an article needs that a legal page
   doesn't: breadcrumbs, copyable email templates, a callout, the
   hub's cards and a closing call to action.
   ============================================================ */

.crumbs{font-size:13.5px; color:var(--text-3); margin-bottom:18px}
.crumbs ol{display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0; list-style:none}
.crumbs li+li::before{content:'/'; margin-right:6px; color:var(--text-3)}
.doc .crumbs a{color:var(--text-2); text-decoration:none}
.doc .crumbs a:hover{color:var(--mint)}

.doc h2{scroll-margin-top:calc(var(--nav-h) + 16px)}
.doc h3{scroll-margin-top:calc(var(--nav-h) + 16px)}
.doc ol.doc__list{list-style:decimal}

/* ---- Email template ---- */
.tpl{
  margin:18px 0 26px; border-radius:16px; overflow:hidden;
  background:rgba(255,255,255,.035); border:1px solid var(--line-2);
}
.tpl__head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 12px 10px 18px; border-bottom:1px solid var(--line);
  font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3);
}
.tpl__copy{
  font:inherit; font-size:13px; letter-spacing:0; text-transform:none;
  color:var(--mint); background:rgba(93,233,201,.08); border:1px solid var(--line-mint);
  border-radius:9px; padding:6px 12px; cursor:pointer;
}
.tpl__copy:hover{background:rgba(93,233,201,.16); color:#fff}
.tpl__copy:focus-visible{outline:2px solid var(--mint); outline-offset:2px}
.tpl__body{padding:18px 20px 6px; font-size:15.5px}
.doc .tpl__body p{color:var(--text); margin-bottom:12px}
.doc .ph{color:var(--amber)}

/* ---- Callout ---- */
.callout{
  margin:22px 0 26px; padding:18px 22px; border-radius:14px;
  background:rgba(93,233,201,.06); border:1px solid var(--line-mint);
}
.doc .callout p{margin-bottom:8px; color:var(--text-2)}
.doc .callout p:last-child{margin-bottom:0}

/* ---- Hub cards ---- */
.guides{display:grid; gap:18px; margin:36px 0 12px}
.guide-card{
  display:block; padding:24px 26px; border-radius:var(--r); text-decoration:none;
  background:rgba(255,255,255,.035); border:1px solid var(--line);
  transition:border-color .25s var(--ease), transform .25s var(--ease), background .25s var(--ease);
}
.guide-card:hover{border-color:var(--line-mint); background:rgba(93,233,201,.05); transform:translateY(-2px)}
.doc .guide-card h2{font-size:20px; margin:0 0 8px; color:var(--text)}
.doc .guide-card p{margin:0; color:var(--text-2)}
.doc .guide-card .guide-card__more{margin-top:12px; color:var(--mint); font-size:14.5px}

/* ---- Closing call to action (no form: script.js isn't loaded here) ---- */
.guide-cta{margin-top:64px; padding:56px 32px 52px}
.doc .guide-cta h2{font-size:clamp(26px,1.6vw + 14px,36px); margin:0 auto 16px}
.doc .guide-cta .cta__sub{margin:0 auto 30px}
.doc .guide-cta p{color:var(--text-2)}
.guide-cta__row{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.doc .guide-cta a.btn{text-decoration:none}
.doc .guide-cta a.btn--mint{color:var(--on-mint)}
.doc .guide-cta a.btn--ghost{color:var(--text)}

@media (max-width:760px){
  .tpl__body{padding:16px 16px 4px; font-size:15px}
  .guide-cta{padding:44px 20px 40px}
}
@media (prefers-reduced-motion:reduce){
  .guide-card:hover{transform:none}
}