/* guides.css — shared styles for the "How to Use ListsGenie" guide pages.
   Loaded alongside index.css (which provides the shared header + ft2 footer).
   All classes are namespaced with hg- so they never collide with index.css. */

.hg-wrap { --hg-primary:#0364ff; --hg-dark:#0f172a; --hg-gray:#64748b; --hg-light:#f1f5f9; color:var(--hg-dark); }

/* Hero */
.hg-hero { color:#fff; padding:7rem 1.5rem 3.2rem; text-align:center; background:linear-gradient(135deg,#0364ff 0%,#0251d9 100%); }
.hg-hero.ext    { background:linear-gradient(135deg,#0364ff 0%,#0251d9 100%); }
.hg-hero.geniex { background:linear-gradient(135deg,#4f46e5 0%,#0364ff 100%); }
.hg-hero.image  { background:linear-gradient(135deg,#0891b2 0%,#0364ff 100%); }
.hg-hero.tag    { background:linear-gradient(135deg,#7c3aed 0%,#0364ff 100%); }
.hg-eyebrow { font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; opacity:.9; margin-bottom:.7rem; }
.hg-hero h1 { font-size:clamp(1.8rem,4vw,2.6rem); font-weight:800; margin-bottom:.7rem; line-height:1.15; }
.hg-hero p { font-size:1.05rem; opacity:.92; max-width:640px; margin:0 auto; line-height:1.6; }
.hg-meta { margin-top:1.3rem; display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; }
.hg-pill { background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.25); padding:.35rem .85rem; border-radius:999px; font-size:.8rem; font-weight:600; }

/* Layout */
.hg-page { max-width:860px; margin:0 auto; padding:2.5rem 1.5rem 1rem; line-height:1.7; }
.hg-lead { font-size:1.08rem; color:#334155; margin-bottom:1.5rem; }
.hg-cat { font-size:.75rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--hg-primary); margin:2.6rem 0 1rem; }
.hg-cat:first-child { margin-top:0; }
.hg-sec { font-size:1.5rem; font-weight:800; margin:2.6rem 0 .5rem; letter-spacing:-.01em; }
.hg-par { color:#334155; margin-bottom:1rem; font-size:.98rem; }

/* Steps */
.hg-steps { counter-reset:step; margin:1.2rem 0; }
.hg-step { position:relative; border:1px solid #e2e8f0; border-radius:16px; padding:1.4rem 1.4rem 1.4rem 3.7rem; margin-bottom:1rem; background:#fff; }
.hg-step::before { counter-increment:step; content:counter(step); position:absolute; left:1.1rem; top:1.3rem; width:1.9rem; height:1.9rem; background:var(--hg-primary); color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.95rem; }
.hg-step h3 { font-size:1.12rem; font-weight:700; margin-bottom:.4rem; }
.hg-step p { color:#334155; font-size:.95rem; }
.hg-step .hg-shot { margin-top:1rem; }

/* Screenshot frame */
.hg-shot { border:1px solid #e2e8f0; border-radius:12px; overflow:hidden; box-shadow:0 12px 34px -18px rgba(15,23,42,.35); background:#f8fafc; }
.hg-shot img { display:block; width:100%; height:auto; }
.hg-shot figcaption { font-size:.8rem; color:var(--hg-gray); padding:.6rem .9rem; border-top:1px solid #e2e8f0; background:#fff; }

/* Feature grid */
.hg-feature-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem; margin:1.2rem 0; }
.hg-feature { border:1px solid #e2e8f0; border-radius:14px; padding:1.2rem; background:#fff; }
.hg-feature .ico { width:2.2rem; height:2.2rem; border-radius:9px; background:#eff5ff; color:var(--hg-primary); display:flex; align-items:center; justify-content:center; margin-bottom:.7rem; font-weight:800; }
.hg-feature h4 { font-size:1rem; font-weight:700; margin-bottom:.3rem; }
.hg-feature p { font-size:.88rem; color:var(--hg-gray); }
.hg-feature .cmd { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.85rem; color:var(--hg-primary); font-weight:700; }

/* Callout / info box */
.hg-callout { border:1px solid #dbe6ff; background:linear-gradient(180deg,#f5f9ff,#ffffff); border-radius:14px; padding:1.2rem 1.3rem; margin:1.4rem 0; }
.hg-callout h4 { font-size:.95rem; font-weight:800; margin-bottom:.6rem; color:var(--hg-dark); }
.hg-callout table { width:100%; border-collapse:collapse; font-size:.92rem; }
.hg-callout td { padding:.5rem .2rem; border-bottom:1px solid #e8eefb; color:#334155; }
.hg-callout tr:last-child td { border-bottom:none; }
.hg-callout td.k { font-weight:600; color:var(--hg-dark); }
.hg-badge { display:inline-block; padding:.2rem .6rem; border-radius:999px; font-size:.78rem; font-weight:700; }
.hg-badge.paid { background:#eff5ff; color:var(--hg-primary); }
.hg-badge.free { background:#ecfdf5; color:#059669; }
.hg-badge.low  { background:#fef9ec; color:#b45309; }

/* Tip */
.hg-tip { border-left:4px solid var(--hg-primary); background:var(--hg-light); border-radius:0 10px 10px 0; padding:.9rem 1.1rem; margin:1rem 0; font-size:.92rem; color:#334155; }
.hg-tip strong { color:var(--hg-dark); }

/* Mini FAQ */
.hg-faq { border:1px solid #e2e8f0; border-radius:12px; margin-bottom:.6rem; overflow:hidden; }
.hg-faq .q { padding:1rem 1.2rem; font-weight:700; font-size:.98rem; cursor:pointer; display:flex; justify-content:space-between; gap:1rem; align-items:center; }
.hg-faq .q:hover { background:var(--hg-light); }
.hg-faq .a { padding:0 1.2rem 1.1rem; color:#334155; font-size:.93rem; display:none; }
.hg-faq .a.open { display:block; }
.hg-faq .a a { color:var(--hg-primary); }
.hg-faq .arw { transition:transform .2s; color:var(--hg-gray); }
.hg-faq .arw.open { transform:rotate(180deg); }

/* Other-guides switcher */
.hg-guides-nav { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:.8rem; margin:1.2rem 0; }
.hg-guides-nav a { border:1px solid #e2e8f0; border-radius:12px; padding:1rem; text-decoration:none; color:var(--hg-dark); font-weight:700; font-size:.95rem; display:flex; align-items:center; gap:.6rem; transition:.15s; }
.hg-guides-nav a:hover { border-color:var(--hg-primary); color:var(--hg-primary); transform:translateY(-2px); }
.hg-guides-nav a.current { background:var(--hg-light); border-color:#cbd5e1; }
.hg-guides-nav .g-ico { font-size:1.2rem; }

/* CTA band */
.hg-cta { background:linear-gradient(135deg,#0f172a,#1e3a8a); color:#fff; border-radius:20px; padding:2.4rem 1.5rem; text-align:center; max-width:860px; margin:2.6rem auto 3rem; }
.hg-cta h2 { font-size:1.6rem; margin-bottom:.6rem; }
.hg-cta p { color:rgba(255,255,255,.82); max-width:520px; margin:0 auto 1.5rem; }
.hg-cta a { display:inline-block; background:#fff; color:var(--hg-primary); font-weight:800; padding:.85rem 2rem; border-radius:12px; text-decoration:none; }