@font-face{font-family:'DM Sans';font-style:normal;font-weight:400 700;
  font-display:swap;src:url("/assets/DMSans-latin.woff2") format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
  U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,
  U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400 700;
  font-display:swap;src:url("/assets/DMSans-latin-ext.woff2") format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
  U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,
  U+2C60-2C7F,U+A720-A7FF;}
:root{--yp-accent:#0F5C5E;--yp-gold:#C9A227;--yp-graphite:#28251D;--yp-answer:#FF0000;--yp-box-text:#F7F6F2;--yp-paper:#F7F6F2;--yp-font-title:'DM Sans',system-ui,sans-serif;--yp-font-body:Arial,sans-serif;}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0;background:var(--yp-paper);color:var(--yp-graphite);
     font:16px/1.65 var(--yp-font-body);}
img{max-width:100%;height:auto;}
a{color:var(--yp-accent);}

.wrap{max-width:760px;margin:0 auto;padding:0 20px;}
.skip{position:absolute;left:-9999px;}
.skip:focus{left:12px;top:12px;background:#fff;padding:8px 12px;z-index:20;}

header.site{background:#fff;border-bottom:1px solid #e3e1dc;}
header.site .wrap{display:flex;align-items:center;gap:16px;
                  min-height:64px;flex-wrap:wrap;}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;
       font:700 1.1rem var(--yp-font-title);color:var(--yp-graphite);}
.brand img{width:34px;}
header.site nav{margin-left:auto;display:flex;gap:18px;}
header.site nav a{text-decoration:none;font-size:.95rem;}
header.site nav a:hover{text-decoration:underline;}

main{padding:40px 0 8px;}

/* Gold is the brand accent, but gold on paper is 2.24:1 — under WCAG AA's 4.5:1
   for text this size, and under even the 3:1 large-text floor, so no font-size
   would rescue it. It carries the kicker as a rule instead: a non-text mark, to
   which the contrast minima do not apply. The words are graphite (14.2:1). */
.kicker{display:flex;align-items:center;gap:.7em;
        font:700 .78rem var(--yp-font-title);letter-spacing:.14em;
        text-transform:uppercase;color:var(--yp-graphite);margin:0 0 .5em;}
.kicker::before{content:"";flex:none;width:28px;height:3px;border-radius:2px;
                background:var(--yp-gold);}
h1{font:700 2.1rem/1.15 var(--yp-font-title);color:var(--yp-graphite);
   margin:0 0 .35em;}
h2{font:700 1.3rem var(--yp-font-title);color:var(--yp-accent);
   margin:2.2rem 0 .6rem;}
h3{font:700 1.02rem var(--yp-font-title);color:var(--yp-graphite);
   margin:1.4rem 0 .3rem;}
.lead{font-size:1.15rem;color:#4a4740;margin:0 0 1.4em;}
p{margin:.7em 0;}
ul{padding-left:1.15em;}
li{margin:.45em 0;}

.actions{display:flex;flex-wrap:wrap;gap:12px;margin:1.6em 0 0;}
.btn{display:inline-block;padding:12px 20px;border-radius:6px;
     text-decoration:none;font-weight:700;font-family:var(--yp-font-title);
     border:2px solid var(--yp-accent);}
.btn.primary{background:var(--yp-accent);color:var(--yp-box-text);}
.btn.primary:hover{filter:brightness(1.12);}
.btn.ghost{background:transparent;color:var(--yp-accent);}
.btn.ghost:hover{background:#fff;}

.note{border-left:3px solid var(--yp-gold);background:#fff;
      padding:14px 18px;margin:1.4rem 0;border-radius:0 6px 6px 0;}
.note p:first-child{margin-top:0;}
.note p:last-child{margin-bottom:0;}

footer.site{margin-top:56px;border-top:1px solid #e3e1dc;background:#fff;
            padding:26px 0 34px;}
footer.site .links{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:14px;
                   font-size:.95rem;}
.fine{font-size:.8rem;color:#6a675f;margin:.5em 0 0;}

@media (max-width:520px){
  h1{font-size:1.7rem;}
  main{padding-top:28px;}
  .btn{flex:1 1 100%;text-align:center;}
}