/* ============================================================
   unwind — shared stylesheet for the guide pages.
   Same tokens as index.html. White sheet on the blue gradient,
   because long-form white-on-blue is tiring to read and the card
   grammar is already established by the Paddle block on the home
   page. No JavaScript on these pages at all.
   ============================================================ */
:root{
  --blue-hi:#3D74F6; --blue:#2B5FE8; --blue-deep:#1B43C4;
  --ink:#0C1E56; --ink2:#2A3872; --ink3:#8A95C4; --btn:#0F2C7E; --btn-deep:#0A1E5C;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Quicksand',sans-serif;color:#fff;
  background:radial-gradient(130% 100% at 50% 18%, var(--blue-hi) 0%, var(--blue) 55%, var(--blue-deep) 100%);
  background-attachment:fixed;
  min-height:100vh;padding:1.5rem 1.2rem 3rem;
}
.top{max-width:720px;margin:0 auto 1.3rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{color:#fff;text-decoration:none;font-weight:700;font-size:.78rem;letter-spacing:.3em;opacity:.85}
.brand:hover{opacity:1}
.top .home{font-size:.78rem;font-weight:600;color:rgba(255,255,255,.75);text-decoration:none}
.top .home:hover{color:#fff}

.sheet{
  max-width:720px;margin:0 auto;background:#fff;color:var(--ink);
  border-radius:22px;padding:2.4rem 2.2rem;box-shadow:0 18px 44px rgba(4,12,44,.28);
}
.crumbs{font-size:.72rem;font-weight:600;color:var(--ink3);margin-bottom:1rem}
.crumbs a{color:var(--ink3);text-decoration:none}
.crumbs a:hover{color:var(--blue)}
h1{font-size:clamp(1.5rem,4.6vw,2.05rem);line-height:1.25;letter-spacing:-.01em;margin-bottom:.85rem;font-weight:700}
.lede{font-size:1.02rem;line-height:1.8;font-weight:600;color:#3B4A86;margin-bottom:1.6rem}
h2{font-size:1.1rem;font-weight:700;margin:2rem 0 .7rem;color:var(--ink)}
p{line-height:1.85;font-weight:500;color:var(--ink2);margin-bottom:1rem}
ul,ol{margin:0 0 1.1rem 1.15rem}
li{line-height:1.8;font-weight:500;color:var(--ink2);margin-bottom:.45rem}
li::marker{color:var(--ink3)}
.sheet a{color:var(--blue);font-weight:700;text-decoration:none;border-bottom:1px solid rgba(43,95,232,.28)}
.sheet a:hover{border-bottom-color:var(--blue)}
strong{color:var(--ink);font-weight:700}
.pull{background:#F2F5FF;border-radius:14px;padding:1.1rem 1.2rem;margin:1.4rem 0;font-size:.93rem;line-height:1.75;font-weight:600;color:#3B4A86}

.cta{
  display:block;margin:2rem 0 .5rem;text-align:center;
  background:linear-gradient(180deg,var(--btn) 0%,var(--btn-deep) 100%);
  color:#CFE0FF !important;font-weight:700;font-size:1rem;letter-spacing:.03em;
  padding:1.05rem 1.4rem;border-radius:12px;border-bottom:none !important;
  box-shadow:0 10px 26px rgba(4,12,44,.3);
  transition:transform .18s, filter .18s;
}
.cta:hover{transform:translateY(-2px);filter:brightness(1.12)}
.cta-note{text-align:center;font-size:.8rem;font-weight:600;color:var(--ink3)}

.next{max-width:720px;margin:1.5rem auto 0;display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.next a{
  display:block;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.26);
  border-radius:14px;padding:1rem 1.1rem;color:#fff;text-decoration:none;
  font-weight:600;font-size:.92rem;line-height:1.45;transition:background .2s,transform .2s;
}
.next a:hover{background:rgba(255,255,255,.17);transform:translateY(-2px)}
.next a span{display:block;font-size:.66rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;opacity:.6;margin-bottom:.4rem}

footer{max-width:720px;margin:2rem auto 0;text-align:center;font-size:.8rem;font-weight:600;color:rgba(255,255,255,.55);line-height:2}
footer a{color:rgba(255,255,255,.8);text-decoration:none}
footer a:hover{color:#fff}

@media(max-width:620px){
  .sheet{padding:1.7rem 1.35rem;border-radius:18px}
  .next{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}