/* =========================================================
   DCB Guides — static SEO entry pages (/guides/<slug>)
   Editorial article layout, reuses the shared design system.
   Rendered by scripts/build-guides.mjs — do not hand-edit pages.
   ========================================================= */

/* longhand only: shorthand would zero out .wrap's horizontal gutter */
.guide-main{padding-top:118px;padding-bottom:40px}

/* breadcrumb */
.guide-crumb{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-family:var(--mono);
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.guide-crumb a{color:var(--muted);transition:color .25s}
.guide-crumb a:hover{color:var(--cyan)}
.guide-crumb .sep{color:var(--dim);opacity:.6}
.guide-crumb .cur{color:var(--text)}

/* header block */
.guide-head{max-width:820px;margin-top:22px}
.guide-eye{display:inline-flex;align-items:center;gap:11px;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--cyan)}
.guide-eye::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--cyan);
  box-shadow:0 0 10px var(--cyan-glow);flex:none}
.guide-h1{font-family:var(--display);font-weight:400;text-transform:uppercase;line-height:.94;
  letter-spacing:.005em;font-size:clamp(34px,5.4vw,66px);margin:18px 0 0;
  background:linear-gradient(176deg,#fff,#cfcfdb 55%,#9a9aac);-webkit-background-clip:text;
  background-clip:text;color:transparent}
.guide-meta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:20px;
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--muted)}
.guide-meta .mi{display:inline-flex;align-items:center;gap:7px}
.guide-meta .mi svg{color:var(--cyan);flex:none}
.guide-meta .price{color:var(--text)}
.guide-meta .price b{font-family:var(--display);font-size:16px;letter-spacing:.02em;color:#fff}
.guide-meta .price .cur{color:var(--lime);font-size:12px;margin-left:2px}

/* body */
.guide-body{max-width:760px;margin-top:34px}
.guide-lead{font-size:18px;line-height:1.6;color:var(--text)}
.guide-body h2{font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(22px,3vw,32px);line-height:1.02;letter-spacing:.01em;color:#fff;margin:44px 0 0}
.guide-body p{font-size:15.5px;line-height:1.72;color:var(--muted);margin-top:15px}
.guide-body p strong{color:var(--text);font-weight:600}
.guide-body a.ilink{color:var(--cyan);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(45,214,238,.4);transition:text-decoration-color .25s}
.guide-body a.ilink:hover{text-decoration-color:var(--cyan)}

/* key takeaways */
.guide-keys{margin-top:40px;border:1px solid var(--line);border-radius:16px;padding:26px 28px;
  background:radial-gradient(120% 140% at 0 0,rgba(205,242,58,.06),transparent 60%)}
.guide-keys .kt{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--lime)}
.guide-keys ul{list-style:none;margin-top:16px;display:flex;flex-direction:column;gap:13px}
.guide-keys li{display:flex;align-items:flex-start;gap:12px;font-size:15px;line-height:1.5;color:var(--text)}
.guide-keys li svg{color:var(--cyan);flex:none;margin-top:3px}

/* faq */
.guide-faq{max-width:760px;margin-top:46px}
.guide-faq h2{font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(22px,3vw,32px);color:#fff;margin-bottom:6px}
.guide-q{border-bottom:1px solid var(--line)}
.guide-q:first-of-type{border-top:1px solid var(--line)}
.guide-q summary{list-style:none;cursor:pointer;padding:18px 0;display:flex;justify-content:space-between;
  gap:20px;font-size:16px;color:var(--text)}
.guide-q summary::-webkit-details-marker{display:none}
.guide-q summary .plus{color:var(--cyan);font-size:21px;line-height:1;flex:none;transition:transform .3s}
.guide-q[open] summary .plus{transform:rotate(45deg)}
.guide-q .ans{font-size:14.5px;color:var(--muted);line-height:1.66;padding:0 0 19px;max-width:680px}

/* outbound money-page cards (funnel into the site) */
.guide-next{max-width:900px;margin-top:52px}
.guide-next .nt{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--violet)}
.guide-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}
.guide-card{border:1px solid var(--line);border-radius:14px;padding:20px 22px;display:block;
  background:linear-gradient(180deg,rgba(255,255,255,.02),transparent);
  transition:transform .3s,border-color .3s}
.guide-card:hover{transform:translateY(-4px);border-color:var(--cyan)}
.guide-card .ct{display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-family:var(--display);font-size:19px;text-transform:uppercase;color:#fff}
.guide-card .ct .arr{color:var(--cyan);font-size:16px}
.guide-card .cd{font-size:13.5px;color:var(--muted);line-height:1.5;margin-top:8px}

/* related guides */
.guide-related{max-width:900px;margin-top:44px}
.guide-related .rt{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted)}
.guide-related ul{list-style:none;margin-top:14px;display:flex;flex-direction:column;gap:2px}
.guide-related a{display:flex;align-items:center;gap:13px;padding:13px 6px;
  border-bottom:1px solid var(--line-soft);color:var(--text);font-size:15px;transition:.25s}
.guide-related a:hover{padding-left:12px;color:var(--cyan)}
.guide-related a .ix{font-family:var(--mono);font-size:11px;color:var(--dim)}
.guide-related a .chev{margin-left:auto;color:var(--dim)}

/* final CTA */
.guide-final{max-width:900px;margin-top:52px;border:1px solid var(--line);border-radius:20px;
  padding:34px 32px;position:relative;overflow:hidden;
  background:radial-gradient(130% 130% at 100% 0,rgba(45,214,238,.08),transparent 52%),
    radial-gradient(120% 120% at 0 100%,rgba(139,92,246,.08),transparent 55%)}
.guide-final h2{font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(24px,3.4vw,40px);line-height:.98;color:#fff}
.guide-final p{font-size:15px;color:var(--muted);margin:12px 0 22px;max-width:520px;line-height:1.55}
.guide-final .acts{display:flex;gap:13px;flex-wrap:wrap}

@media(max-width:720px){
  .guide-main{padding-top:104px;padding-bottom:30px}
  .guide-cards{grid-template-columns:1fr}
  .guide-lead{font-size:16.5px}
  .guide-final{padding:26px 22px}
}