:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#20352e;background:#f7f8f5;font-synthesis:none;line-height:1.65}*{box-sizing:border-box}body{margin:0}a{color:#176650;text-underline-offset:4px}a:hover{color:#103f33}a:focus-visible,summary:focus-visible{outline:3px solid #c97828;outline-offset:5px;border-radius:3px}.skip{position:absolute;top:-80px;left:16px;background:white;padding:12px;z-index:10}.skip:focus{top:12px}.site-header{max-width:1200px;margin:auto;padding:23px 32px;display:flex;justify-content:space-between;align-items:center;gap:24px}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:800;letter-spacing:.08em;line-height:1.25}.brand-mark{display:grid;place-items:center;background:#176650;color:#fff;width:42px;height:42px;border-radius:10px;font-size:24px}.brand small{display:block;font-size:10px;font-weight:600;letter-spacing:.03em;margin-top:3px}nav{display:flex;gap:26px}nav a{font-size:14px;font-weight:650;text-decoration:none}.hero{max-width:1200px;margin:16px auto 0;padding:56px 32px 64px;display:grid;grid-template-columns:1.6fr 1fr;gap:56px;align-items:center}.eyebrow{text-transform:uppercase;font-size:11px;letter-spacing:.14em;font-weight:800;color:#176650;margin:0 0 14px}h1,h2,h3{line-height:1.16;letter-spacing:-.035em}h1{font-size:clamp(36px,4vw,54px);margin:0 0 24px}h1 em{font-style:normal;color:#176650}h2{font-size:32px;margin:0 0 18px}h3{font-size:23px;margin:0 0 12px}p{margin:0 0 18px}.intro{font-size:18px;color:#52635c;max-width:620px}.actions{display:flex;align-items:center;flex-wrap:wrap;gap:22px;margin:26px 0}.button{display:inline-flex;align-items:center;gap:22px;padding:13px 19px;border-radius:7px;background:#176650;color:white;font-size:14px;font-weight:700;text-decoration:none}.button:hover{background:#114c3c;color:white}.text-link{font-size:14px;font-weight:700}.byline{font-size:12px;color:#617067;margin-top:24px}.starting-note{position:relative;background:#e9efe7;padding:34px 30px;border:1px solid #d7e1d4;border-radius:12px}.starting-note h2{font-size:27px}.starting-note p{font-size:14px}.starting-note p:last-child{margin:0}.note-number{font-size:54px;font-weight:300;color:#71886a;line-height:1;display:block;margin-bottom:22px}.example{padding-left:16px;border-left:2px solid #91a385;font-style:italic;color:#3c5545}.guide-body{max-width:900px;margin:auto;padding:0 32px 64px}.jump-links{flex-wrap:wrap;border-top:1px solid #d8dfd6;border-bottom:1px solid #d8dfd6;padding:19px 0;margin-bottom:52px;gap:12px 30px}.jump-links a{font-size:13px}.steps>p{max-width:650px;color:#53635c}.step-list{list-style:none;margin:32px 0 0;padding:0}.step-list>li{display:grid;grid-template-columns:38px 1fr;gap:20px;padding:28px 0;border-top:1px solid #dce2d9}.step-list>li:last-child{padding-bottom:0}.step-number{width:36px;height:36px;display:grid;place-items:center;background:#e5ede3;border-radius:50%;color:#176650;font-weight:750;font-size:14px}.step-list p{color:#52615a;font-size:15px}.prompt{padding:14px 18px;background:#eef2ec;border-radius:6px}.step-list details{font-size:14px;color:#52615a;margin:12px 0 8px}.step-list summary{cursor:pointer;color:#176650;font-weight:650}.step-list details p{margin:12px 0 0;padding-left:16px;border-left:2px solid #becdb7}.sauce-note{background:#fff6e9;border:1px solid #eadcc6;border-radius:10px;padding:30px;margin:48px 0}.sauce-note .eyebrow{color:#835723}.sauce-note h2{font-size:27px}.sauce-note p{font-size:15px}.next-step{padding:15px 0 38px}.next-step>p{max-width:670px}.small{font-size:13px;color:#626f67}.resources{border-top:1px solid #d8dfd6;padding-top:36px}.resources h2{font-size:27px}.resources ul{padding:0;list-style:none;margin:24px 0}.resources li{margin:0 0 19px}.resources li a{font-size:15px;font-weight:650}.resources li span{display:block;font-size:13px;color:#626f67;margin-top:4px}footer{max-width:1136px;margin:auto;border-top:1px solid #d8dfd6;padding:26px 0;display:flex;justify-content:space-between;gap:20px;font-size:12px;color:#626f67}footer a{font-weight:700;text-decoration:none}section[id],aside[id]{scroll-margin-top:24px}@media(max-width:760px){.site-header{padding:18px 22px}.hero{grid-template-columns:1fr;padding:34px 22px 36px;gap:28px;margin-top:0}h1{font-size:39px}.intro{font-size:17px}.starting-note{padding:25px}.note-number{font-size:38px;margin-bottom:18px}.starting-note h2{font-size:25px}.guide-body{padding:0 22px 35px}.jump-links{margin-bottom:36px;gap:12px 22px}h2{font-size:28px}h3{font-size:21px}.step-list>li{grid-template-columns:30px 1fr;gap:12px}.step-number{width:29px;height:29px}.sauce-note{padding:24px;margin:35px 0}footer{margin:0 22px;flex-direction:column;gap:5px}.site-header nav{gap:16px}.actions{gap:18px}.button{font-size:13px}.text-link{font-size:13px}}@media print{body{background:white;font-size:11pt}.site-header nav,.jump-links,.actions,.byline{display:none}.hero{display:block;padding:0;margin:0}.starting-note{margin:20px 0}.guide-body{padding:0;max-width:none}.site-header{padding:0 0 20px}h1{font-size:28pt}h2{font-size:21pt}.step-list>li{break-inside:avoid}.sauce-note{break-inside:avoid}footer{margin-top:25px}a{color:inherit}}

/* Shared guide layout: align sections and use the available screen width. */
@media screen {
  .site-header,.hero,.guide-body,footer{width:100%;max-width:1440px;margin-left:auto;margin-right:auto;padding-left:clamp(22px,4vw,64px);padding-right:clamp(22px,4vw,64px)}
  .hero{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);padding-top:40px;padding-bottom:48px}
  .hero>* ,.step-list>li>div{min-width:0}
  .guide-body p,.step-list p{max-width:78ch}
  .guide-body a{overflow-wrap:anywhere}
  .application-note{border:1px solid #c4d5c0;border-radius:10px;background:#edf3e9;padding:clamp(24px,3vw,40px);margin:0 0 48px}
  .attachment-list{padding-left:24px;margin:24px 0}
  .attachment-list li{padding:6px 0 6px 8px}
  .application-note .small{margin:18px 0 0}
  footer{margin-top:0}
}
@media screen and (min-width:1100px){
  .step-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px}
  .step-list>li:last-child{grid-column:1/-1;padding-bottom:0}
}
@media screen and (max-width:760px){
  .hero{grid-template-columns:1fr;padding-top:30px;padding-bottom:36px}
  .site-header{flex-wrap:wrap;gap:16px}
  .site-header nav{flex-wrap:wrap}
  footer{margin-left:auto;margin-right:auto}
}