/* guides: the article pages and their index. Shared tokens/utilities come from base.css. */
.guide-hero{text-align:left;padding:64px 0 68px}
.guide-hero .wrap{max-width:820px}
.guide-hero .sub{margin:0;max-width:640px}
.guide-byline{margin-top:22px;font-size:var(--t-small);color:var(--sage-lift)}
.guide-byline a{color:var(--white);text-decoration:underline;text-underline-offset:2px}

.guide-prose{max-width:720px;margin:0 auto;font-size:var(--t-body);color:var(--teal);line-height:1.8}
.guide-prose h2{color:var(--teal);font-size:var(--t-h3);margin:44px 0 14px;line-height:1.25}
.guide-prose h3{color:var(--teal);font-size:var(--t-h4);margin:28px 0 8px;line-height:1.3}
.guide-prose p{margin-bottom:16px}
.guide-prose ul,.guide-prose ol{margin:0 0 18px;padding-left:22px}
.guide-prose li{margin-bottom:8px}
.guide-prose strong{color:var(--teal);font-weight:var(--w-med)}
.guide-prose a{color:var(--sage);font-weight:var(--w-med);text-decoration:underline;text-underline-offset:2px}

/* the short answer, first thing on the page */
.guide-answer{background:var(--mist);border-left:3px solid var(--lime);border-radius:0 var(--r-lg) var(--r-lg) 0;padding:20px 24px;margin:0 0 30px}
.guide-answer .lbl{display:block;font-size:var(--t-fine);font-weight:var(--w-med);letter-spacing:.14em;text-transform:uppercase;color:var(--sage);margin-bottom:6px}
.guide-answer p:last-child{margin-bottom:0}

/* worked numbers */
.guide-math{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);padding:18px 24px;margin:0 0 20px}
.guide-math p{margin-bottom:6px}
.guide-math p:last-child{margin-bottom:0}

.guide-faq h3{margin-top:24px}

/* closing call to action */
.guide-cta{background:var(--teal-900);color:var(--sage-lift);border-radius:var(--r-lg);padding:30px 32px;margin:48px 0 0}
.guide-cta h2{color:var(--white);margin:0 0 10px}
.guide-cta p{color:var(--sage-lift);margin-bottom:18px}
.guide-btn{display:inline-flex;align-items:center;justify-content:center;font-size:var(--t-small);font-weight:var(--w-btn);padding:14px 24px;border-radius:var(--r);background:var(--lime);color:var(--teal-900) !important;text-decoration:none !important;transition:transform .15s ease,background .15s ease}
.guide-btn:hover{background:var(--lime-deep);transform:translateY(-2px)}
.guide-btn:focus-visible{outline:2px solid var(--lime);outline-offset:4px}
.guide-cta .fine{font-size:var(--t-fine);margin:12px 0 0}

/* more guides */
.guide-more{max-width:720px;margin:48px auto 0;padding-top:28px;border-top:1px solid var(--border)}
.guide-more h2{font-size:var(--t-h4);margin:0 0 14px;color:var(--teal)}

/* index list */
.guide-list{max-width:720px;margin:0 auto;display:grid;gap:16px;list-style:none;padding:0}
.guide-card{display:block;background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);padding:24px 26px;text-decoration:none;color:var(--teal);transition:transform .15s ease,border-color .15s ease}
.guide-card:hover{transform:translateY(-2px);border-color:var(--sage)}
.guide-card:focus-visible{outline:2px solid var(--lime);outline-offset:4px}
.guide-card h2,.guide-card h3{font-size:var(--t-h4);margin:0 0 6px;color:var(--teal);line-height:1.3}
.guide-card p{margin:0;color:var(--teal);opacity:.82;line-height:1.6}

@media(max-width:600px){
  .wrap{padding:0 16px}
  .guide-hero{padding:48px 0 52px}
  .guide-cta{padding:24px 20px}
  .guide-answer{padding:16px 18px}
}

/* mailing list sign-up, under the trial box */
.guide-list-cta{background:var(--mist);border:1px solid var(--border);border-radius:var(--r-lg);padding:26px 32px;margin:20px 0 0}
.guide-list-cta h2{font-size:var(--t-h4);color:var(--teal);margin:0 0 8px}
.guide-list-cta p{margin-bottom:16px}
.guide-btn--ghost{background:var(--teal-900);color:var(--white) !important}
.guide-btn--ghost:hover{background:var(--teal);}
@media(max-width:600px){.guide-list-cta{padding:22px 20px}}