.wa-guide{
  --paper:#F2EDE3; --surface:#F8F6F1; --surface-2:#E8E5DE;
  --ink:#1A1A1A; --ink-2:#4A4841; --muted:#6A6A6A;
  --rule:#D8D3C8; --rule-soft:#E4E0D6;
  --green:#1D7A3F; --green-line:#4A9456; --green-deep:#162D1A; --green-soft:#DCEBDE;
  --brass:#7E6322; --brass-soft:#EFE6CC;
  --display:"Zilla Slab",Georgia,serif;
  --body:"Karla","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
}


.wa-guide *{box-sizing:border-box}
.wa-guide{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
.wa-guide .wrap{max-width:880px;margin:0 auto;padding:0 26px 90px}
@media(max-width:640px){.wa-guide .wrap{padding:0 18px 56px}}

.wa-guide .kicker{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--brass)}
.wa-guide header.mast{padding:54px 0 0}
.wa-guide h1{font-family:var(--display);font-weight:700;font-size:clamp(38px,6.2vw,60px);line-height:1.02;letter-spacing:-.02em;margin:14px 0 0;text-wrap:balance}
.wa-guide .lede{font-size:clamp(18px,2.1vw,21px);color:var(--ink-2);max-width:56ch;margin:20px 0 0}

.wa-guide .actions{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 0}
.wa-guide .btn{display:inline-block;font-family:var(--body);font-weight:600;font-size:16px;
  padding:14px 24px;text-decoration:none;border:2px solid var(--green);transition:background .15s ease}
.wa-guide .btn.primary{background:var(--green);color:var(--paper)}
.wa-guide .btn.primary:hover{background:var(--green-deep);border-color:var(--green-deep)}
.wa-guide .btn.ghost{color:var(--green);background:transparent}
.wa-guide .btn.ghost:hover{background:var(--green-soft)}

.wa-guide .stats{display:flex;flex-wrap:wrap;gap:0;margin:40px 0 0;border-top:2px solid var(--ink);border-bottom:1px solid var(--rule)}
.wa-guide .stats div{flex:1 1 150px;padding:18px 20px 16px;border-right:1px solid var(--rule)}
.wa-guide .stats div:last-child{border-right:0}
.wa-guide .stats b{display:block;font-family:var(--display);font-size:30px;font-weight:700;line-height:1;color:var(--green)}
.wa-guide .stats span{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-top:7px}

.wa-guide section{padding-top:52px}
.wa-guide h2{font-family:var(--display);font-weight:700;font-size:clamp(24px,3.4vw,33px);letter-spacing:-.015em;line-height:1.12;margin:0 0 14px;text-wrap:balance}
.wa-guide h3{font-family:var(--display);font-weight:600;font-size:19px;margin:0 0 5px}
.wa-guide p{margin:0 0 15px;max-width:66ch;color:var(--ink-2)}
.wa-guide p strong, .wa-guide p b{color:var(--ink);font-weight:600}
.wa-guide a{color:var(--green)}

.wa-guide .services{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:22px;margin-top:24px}
.wa-guide .services div{border-top:2px solid var(--rule)}
.wa-guide .services h3{padding-top:14px}
.wa-guide .services p{font-size:15.5px;margin:0}

.wa-guide .split{background:var(--surface);border:1px solid var(--rule);border-left:4px solid var(--green);padding:26px 28px;margin-top:24px}
.wa-guide .split p:last-child{margin-bottom:0}
.wa-guide .figures{display:flex;flex-wrap:wrap;gap:26px;margin:18px 0}
.wa-guide .figures div{flex:1 1 190px}
.wa-guide .figures b{display:block;font-family:var(--display);font-size:22px;font-weight:700;color:var(--green);line-height:1.2}
.wa-guide .figures span{display:block;font-size:14.5px;color:var(--ink-2);margin-top:3px}

.wa-guide .deep{background:var(--green-deep);padding:30px 32px;margin-top:24px}
.wa-guide .deep, .wa-guide .deep h2, .wa-guide .deep h3, .wa-guide .deep p, .wa-guide .deep b, .wa-guide .deep strong, .wa-guide .deep li{color:#F2EDE3 !important}
.wa-guide .deep .kicker{color:#7DC483 !important}
.wa-guide .deep p:last-child{margin-bottom:0}
@media(max-width:640px){.wa-guide .deep{padding:24px 20px}}

.wa-guide ul.plain{list-style:none;margin:0 0 15px;padding:0;display:grid;gap:8px;max-width:60ch}
.wa-guide ul.plain li{padding-left:19px;position:relative;color:var(--ink-2);font-size:16px}
.wa-guide ul.plain li::before{content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;background:var(--green)}

.wa-guide .faq{margin-top:22px;border-top:1px solid var(--rule)}
.wa-guide .faq div{border-bottom:1px solid var(--rule);padding:18px 0}
.wa-guide .faq h3{font-size:17.5px;margin-bottom:7px}
.wa-guide .faq p{margin:0;font-size:15.8px}

.wa-guide .cred{display:grid;gap:16px;margin-top:22px}
.wa-guide .cred div{padding-left:18px;border-left:3px solid var(--brass)}
.wa-guide .cred h3{font-size:17px;margin-bottom:3px}
.wa-guide .cred p{margin:0;font-size:15.5px}

.wa-guide .close{border-top:2px solid var(--ink);margin-top:56px;padding-top:30px}
.wa-guide .close h2{margin-bottom:10px}
.wa-guide footer{margin-top:44px;padding-top:16px;border-top:1px solid var(--rule);font-family:var(--mono);font-size:11px;color:var(--muted);line-height:1.75;max-width:72ch}
.wa-guide :focus-visible{outline:2px solid var(--green);outline-offset:3px}

/* ---------- additions for the credit page ---------- *
 * The dark panel inherits its text color from the .deep block above, but the
 * list bullets are drawn with a background rather than a color, so they keep
 * the deep green and vanish against the deep green ground. Same trap as the
 * text, one property along.                                                */
.wa-guide .deep ul.plain li::before{background:#7DC483}
.wa-guide .deep a{color:#7DC483}

/* The closing block carries buttons, which the service page's closing block
   does not, so it needs the spacing the header gets. */
.wa-guide .close .actions{margin-top:22px}

/* Sub-headings inside a section.
 *
 * .wa-guide h3 sets margin:0 0 5px, which is right for the card and service
 * blocks where an h3 opens its own box. The freeze walkthrough uses h3 as a
 * step heading part-way down a section, where a zero top margin runs it into
 * the paragraph above. The .services rule keeps its own spacing. */
.wa-guide section > h3 { margin-top: 28px; }
.wa-guide section > h3:first-child { margin-top: 0; }