/* Shared refinements keep every guide consistent. */
/* One content column and one masthead treatment across the index and guides. */
.top,.hero,main{width:100%;max-width:760px;margin-left:auto;margin-right:auto;padding-left:16px;padding-right:16px}
.top{display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;gap:24px;padding-top:24px;padding-bottom:24px}
.hero{margin-top:0}
.hero .in{padding:40px 32px;border-radius:6px}
.hero h1{font-size:clamp(30px,5vw,48px);line-height:1.12;letter-spacing:-1px;text-transform:none;margin:0 0 18px;padding-bottom:18px;overflow-wrap:anywhere;text-wrap:balance}
.hero p{max-width:56ch;margin:0;line-height:1.7}
.hero .sub{font-size:18px;line-height:1.5;margin:0 0 16px}
.hero .btn{margin-top:24px}
nav{width:calc(100% - 32px);max-width:728px;margin:24px auto 0;padding:4px 0;scroll-padding-inline:0}
nav a:focus-visible{outline:2px solid var(--blue);outline-offset:-3px}
.tagl{display:flex;flex-direction:column;gap:5px;text-align:left;font-size:11px;line-height:1.4;letter-spacing:0;text-transform:none;border-left:2px solid var(--green);padding-left:14px}
nav{justify-content:flex-start}
nav a{flex-shrink:0}
main,section,.card,.mini,.think,.panel,.tabset{min-width:0}
.grid{grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr))}
main{overflow-wrap:anywhere}
img,svg,canvas,video{max-width:100%;height:auto}
pre{white-space:pre-wrap;overflow-wrap:anywhere}
.pyr div{clip-path:none;height:auto;min-height:0;border-radius:6px;margin:6px 0}
.pyr2 div,.funnel div{max-width:100%;height:auto;overflow-wrap:anywhere}
.tw{max-width:100%}
textarea,.inp{max-width:100%;min-width:0}
.response-tools{border:1px solid var(--line);border-left:4px solid var(--green);border-radius:6px;padding:18px;margin:26px 0;background:var(--soft)}
.response-tools h2{border:0;font-size:20px;padding:0;margin:0 0 8px}
.response-tools p{font-size:14px;margin:0 0 12px}
.response-copy{border:1px solid #00669e;border-radius:4px;background:white;color:#00669e;padding:8px 12px;font:bold 12px Verdana;cursor:pointer;margin:5px 0 12px;white-space:normal}
.response-copy:hover{background:#e8f4fb}
.response-copy:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
.response-status{display:block;font-size:13px;color:var(--ink);min-height:1.8em}
@media(max-width:480px){.hero .in{padding:28px 22px}.hero h1{font-size:30px;letter-spacing:-.5px}.hero .sub{font-size:16px}h2{font-size:28px}.card{padding:16px}.rate span{min-width:0}.steps button{min-width:min(84px,100%)}}
@media print{nav,.response-copy,.response-tools,#bar{display:none!important}textarea{height:auto}}
/* Preserve the supplied logo proportions and its white clear space. */
.brand{display:flex;align-items:center;gap:16px;text-decoration:none;flex-shrink:0;max-width:100%}
.brand img{display:block;box-sizing:content-box;width:88px;height:auto;object-fit:contain;padding:5px 6px;background:#fff}
.brand span{font-size:11px;line-height:1.6;letter-spacing:1px;color:#00669e}
.brand:focus-visible{outline:3px solid var(--cyan);outline-offset:5px}
@media(max-width:600px){
  .top{flex-direction:column;align-items:flex-start;gap:16px;padding-top:20px;padding-bottom:20px}
  .brand{gap:14px}
  .brand img{width:72px}
  .tagl{align-self:stretch;flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px 14px;border-left:0;border-top:1px solid var(--line);padding:12px 0 0;text-align:left;font-size:10px}
  .tagl span{white-space:nowrap}
}
.proof-panel{max-width:1000px;margin:28px auto;padding:0 20px}
.proof-panel h1{font-size:28px;line-height:1.2}
.proof-panel label{font-weight:bold;display:block}
.proof-panel select{font:inherit;padding:10px;max-width:100%;margin:8px 0 16px}
.proof-key{display:flex;flex-wrap:wrap;gap:12px;margin:14px 0}
.proof-key span{padding:4px 9px;color:#1b2a41;border-radius:4px}
.proof-date{background:#fff0ad!important}
.proof-department{background:#dceffc!important}
.proof-person{background:#f4e0f1!important}
body.proofreading [data-proof]{color:#1b2a41!important;outline:2px solid #9d7000;outline-offset:3px;border-radius:2px}
.proof-notice{max-width:900px;margin:12px auto;padding:12px 16px;background:#fff0ad;color:#1b2a41;font-size:14px}
.proof-frame{width:100%;height:75vh;min-height:450px;border:1px solid #c9d3de;background:white}
