/* ============================================================
   CRO GUIDES — long-form article template (Invesp brand).
   Namespaced gd-*. Layout: navy hero → sticky related-guides
   rail → two columns (sticky sidebar: author + TOC + subscribe,
   and the article body) → footer. Shared by every guide; each
   guide supplies its own article content + TOC.
   ============================================================ */
:root{
  --gd-navy: 231 52% 25%;
  --gd-navy-edge: 233 56% 15%;
  --gd-violet: 263 75% 58%;
  --gd-amber: 36 100% 50%;
  --gd-green: 152 52% 40%;
  --gd-ink: 222 47% 12%;
  --gd-muted: 220 9% 42%;
  --gd-line: 220 16% 90%;
  --gd-tint: 220 24% 97%;
  --gd-display: 'Space Grotesk', 'Outfit', sans-serif;
}

/* ---------------- HERO ---------------- */
.gd-hero{
  position:relative; overflow:hidden; color:#fff; text-align:center;
  padding:128px 0 56px;
  background:
    radial-gradient(120% 130% at 84% -20%, hsl(219 92% 58% / .30) 0%, transparent 50%),
    linear-gradient(165deg, hsl(var(--gd-navy)) 0%, hsl(var(--gd-navy-edge)) 100%);
}
.gd-hero-ic{ width:54px; height:54px; margin:0 auto 22px; border-radius:14px; display:grid; place-items:center;
  background:hsl(0 0% 100% / .1); color:#fff; }
.gd-hero-ic svg{ width:26px; height:26px; }
.gd-hero h1{ font-family:var(--gd-display); font-weight:700; letter-spacing:-.025em;
  font-size:clamp(30px,4vw,48px); line-height:1.08; margin:0 auto; max-width:20ch; }
.gd-hero-meta{ display:flex; align-items:center; justify-content:center; gap:18px; margin-top:22px;
  font-size:14px; color:hsl(220 26% 78%); }
.gd-hero-meta .sep{ width:4px; height:4px; border-radius:999px; background:hsl(220 26% 60%); }
.gd-hero-meta .m{ display:inline-flex; align-items:center; gap:7px; }
.gd-hero-meta svg{ width:15px; height:15px; opacity:.8; }

/* ---------------- RELATED-GUIDES RAIL (sticky) ---------------- */
.gd-rail{ position:sticky; top:64px; z-index:30; background:hsl(var(--gd-navy));
  box-shadow:0 1px 0 hsl(0 0% 100% / .08) inset; }
.gd-rail-inner{ display:flex; align-items:center; gap:10px; padding:0 8px; }
.gd-rail-arrow{ flex:0 0 auto; width:34px; height:48px; display:grid; place-items:center; cursor:pointer;
  background:none; border:none; color:hsl(220 30% 78%); font-size:18px; }
.gd-rail-arrow:hover{ color:#fff; }
.gd-rail-list{ display:flex; gap:4px; overflow-x:auto; scroll-behavior:smooth; flex:1;
  scrollbar-width:none; }
.gd-rail-list::-webkit-scrollbar{ display:none; }
.gd-rail-list a{ flex:0 0 auto; white-space:nowrap; text-decoration:none; font-size:13.5px; font-weight:600;
  letter-spacing:.04em; text-transform:uppercase; color:hsl(220 30% 82%);
  padding:15px 16px; border-bottom:3px solid transparent; transition:color .15s, border-color .15s; }
.gd-rail-list a:hover{ color:#fff; }
.gd-rail-list a.is-active{ color:#fff; border-bottom-color:hsl(var(--gd-amber)); }

/* ---------------- LAYOUT ---------------- */
.gd-layout{ display:grid; grid-template-columns:300px 1fr; gap:56px; align-items:start;
  padding:56px 0 88px; }
@media (max-width:1000px){ .gd-layout{ grid-template-columns:1fr; gap:0; } }

/* ---------------- SIDEBAR ---------------- */
.gd-side{ position:sticky; top:128px; display:flex; flex-direction:column; gap:24px; }
@media (max-width:1000px){ .gd-side{ position:static; margin-bottom:40px; } }
.gd-breadcrumb{ font-size:13px; color:hsl(var(--gd-muted)); margin-bottom:4px; }
.gd-breadcrumb .sep{ margin:0 7px; opacity:.6; }

.gd-author{ display:flex; gap:14px; align-items:flex-start; padding-bottom:22px;
  border-bottom:1px solid hsl(var(--gd-line)); }
.gd-author img{ width:56px; height:56px; border-radius:999px; flex:0 0 auto; object-fit:cover; background:hsl(var(--gd-tint)); }
.gd-author .nm{ font-family:var(--gd-display); font-size:16px; font-weight:700; color:hsl(var(--gd-ink)); }
.gd-author .nm a{ color:inherit; text-decoration:none; }
.gd-author .bio{ font-size:13px; line-height:1.5; color:hsl(var(--gd-muted)); margin-top:4px; }

.gd-toc-title{ font-family:var(--gd-display); font-size:13px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:hsl(var(--gd-muted)); margin:0 0 14px; }
.gd-toc{ list-style:none; margin:0; padding:0; counter-reset:toc; display:flex; flex-direction:column; gap:2px; }
.gd-toc a{ display:flex; gap:11px; text-decoration:none; font-size:14.5px; line-height:1.4;
  color:hsl(222 22% 38%); padding:7px 10px; border-radius:8px; border-left:2px solid transparent;
  transition:background .15s, color .15s; }
.gd-toc a::before{ counter-increment:toc; content:counter(toc); font-variant-numeric:tabular-nums;
  font-weight:700; color:hsl(var(--gd-violet)); flex:0 0 auto; }
.gd-toc a:hover{ background:hsl(var(--gd-tint)); color:hsl(var(--gd-ink)); }
.gd-toc a.is-active{ background:hsl(var(--gd-violet) / .1); color:hsl(var(--gd-ink)); font-weight:600;
  border-left-color:hsl(var(--gd-violet)); }

.gd-sub{ background:hsl(var(--gd-tint)); border:1px solid hsl(var(--gd-line)); border-radius:16px; padding:22px; }
.gd-sub h3{ font-family:var(--gd-display); font-size:17px; font-weight:700; color:hsl(var(--gd-ink)); margin:0 0 8px; line-height:1.25; }
.gd-sub p{ font-size:13px; line-height:1.55; color:hsl(var(--gd-muted)); margin:0 0 16px; }
.gd-sub form{ display:flex; gap:8px; }
.gd-sub input{ flex:1; min-width:0; font:inherit; font-size:14px; padding:11px 13px; border-radius:10px;
  border:1.5px solid hsl(var(--gd-line)); background:#fff; }
.gd-sub input:focus{ outline:none; border-color:hsl(var(--gd-navy)); box-shadow:0 0 0 3px hsl(var(--gd-navy) / .12); }
.gd-sub button{ flex:0 0 auto; border:none; cursor:pointer; background:hsl(var(--gd-violet)); color:#fff;
  border-radius:10px; padding:0 14px; display:grid; place-items:center; }
.gd-sub button svg{ width:18px; height:18px; }

/* ---------------- ARTICLE ---------------- */
.gd-article{ min-width:0; max-width:820px; }
.gd-lede p{ font-size:20px; line-height:1.6; color:hsl(222 26% 26%); margin:0 0 18px; }
.gd-lede p:last-child{ margin-bottom:0; }
.gd-article h2{ font-family:var(--gd-display); font-size:clamp(25px,2.6vw,32px); font-weight:700;
  letter-spacing:-.02em; line-height:1.18; color:hsl(var(--gd-ink)); margin:52px 0 18px; scroll-margin-top:140px; }
.gd-article h3{ font-family:var(--gd-display); font-size:21px; font-weight:600; letter-spacing:-.01em;
  color:hsl(var(--gd-ink)); margin:34px 0 12px; }
.gd-article p{ font-size:18px; line-height:1.75; color:hsl(222 20% 28%); margin:0 0 20px; }
.gd-article a{ color:hsl(var(--gd-violet)); text-decoration:none; font-weight:500; }
.gd-article a:hover{ text-decoration:underline; }
.gd-article strong, .gd-article b{ font-weight:700; color:hsl(var(--gd-ink)); }
.gd-article ul{ margin:0 0 22px; padding:0; list-style:none; display:flex; flex-direction:column; gap:12px; }
.gd-article ul li{ position:relative; padding-left:30px; font-size:18px; line-height:1.65; color:hsl(222 20% 28%); }
.gd-article ul li::before{ content:''; position:absolute; left:4px; top:11px; width:8px; height:8px; border-radius:2px;
  background:hsl(var(--gd-violet)); }
.gd-article figure, .gd-article .gd-img{ margin:28px 0; }
.gd-article figure img, .gd-article > img, .gd-article p > img{ width:100%; height:auto; display:block;
  border-radius:14px; border:1px solid hsl(var(--gd-line)); background:#fff; }
.gd-article figcaption{ font-size:13.5px; color:hsl(var(--gd-muted)); text-align:center; margin-top:10px; }
.gd-related-inline{ font-size:16px; padding:14px 18px; background:hsl(var(--gd-tint)); border-radius:12px;
  border-left:3px solid hsl(var(--gd-violet)); margin:24px 0; }
.gd-related-inline b{ color:hsl(var(--gd-ink)); }
.gd-formula{ font-family:var(--gd-display); font-size:19px; font-weight:600; color:hsl(var(--gd-ink));
  background:hsl(var(--gd-navy) / .05); border-radius:12px; padding:18px 22px; margin:0 0 22px; }

/* ---------------- INLINE CTA BANNER ---------------- */
.gd-cta{ display:grid; grid-template-columns:1.1fr .9fr; gap:30px; align-items:center; margin:40px 0;
  border-radius:20px; overflow:hidden; color:#fff; padding:34px 36px;
  background:
    radial-gradient(120% 150% at 90% -30%, hsl(219 92% 58% / .3) 0%, transparent 55%),
    linear-gradient(150deg, hsl(var(--gd-navy)) 0%, hsl(var(--gd-navy-edge)) 100%); }
@media (max-width:680px){ .gd-cta{ grid-template-columns:1fr; gap:22px; text-align:center; } }
.gd-cta-head{ font-family:var(--gd-display); font-size:28px; font-weight:700; line-height:1.1; margin:0 0 18px; }
.gd-cta-head .hl{ color:hsl(var(--gd-amber)); }
.gd-cta-btn{ display:inline-flex; align-items:center; gap:9px; text-decoration:none; background:hsl(var(--gd-amber));
  color:hsl(28 60% 16%); font-weight:700; font-size:14px; letter-spacing:.04em; text-transform:uppercase;
  padding:14px 24px; border-radius:999px; }
.gd-cta-btn:hover{ filter:brightness(1.06); }
.gd-cta image-slot{ width:100%; height:160px; display:block; border-radius:14px; }
.gd-cta img{ width:100%; height:auto; display:block; border-radius:14px; }

/* ---------------- FAQ ---------------- */
.gd-faq{ margin-top:8px; }
.gd-faq details{ border-bottom:1px solid hsl(var(--gd-line)); }
.gd-faq summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  gap:20px; padding:22px 0; font-family:var(--gd-display); font-size:19px; font-weight:600; color:hsl(var(--gd-ink)); }
.gd-faq summary::-webkit-details-marker{ display:none; }
.gd-faq summary .ic{ flex:0 0 auto; color:hsl(var(--gd-violet)); transition:transform .25s; }
.gd-faq details[open] summary .ic{ transform:rotate(45deg); }
.gd-faq .gd-faq-a{ padding:0 0 24px; }
.gd-faq .gd-faq-a p{ margin:0 0 14px; }
.gd-faq .gd-faq-a ul{ margin-bottom:0; }

/* conclusion */
.gd-article .gd-conclusion h2{ margin-top:0; }

/* mobile sidebar reveal for TOC */
@media (max-width:1000px){
  .gd-toc-wrap{ border:1px solid hsl(var(--gd-line)); border-radius:14px; padding:6px 16px; }
  .gd-author, .gd-sub{ max-width:560px; }
}