/* Www leftovers on top of the Look-Kit (WW-22). Kit tokens only, no colour literals. */
.wrap{max-width:65rem;margin-inline:auto;padding-inline:var(--gutter)}
.skip{position:absolute;left:var(--gutter);top:-100px;z-index:30;display:inline-flex;align-items:center;min-height:var(--tap);
  padding:0 var(--s-4);border-radius:var(--r-lg);background:var(--brand);color:var(--on-brand)}
.skip:focus{top:var(--s-2)}
.site-top{border-bottom:1px solid var(--line)}
.bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-3);
  min-height:calc(var(--tap) + var(--s-4))}
.brand{display:flex;align-items:center;gap:var(--s-3)}
.mark{font-family:var(--font-display);font-size:var(--fs-heading);font-weight:700;color:var(--text);text-decoration:none}
.pill{display:inline-block;align-self:flex-start;border:1px solid var(--edge);border-radius:var(--r-lg);padding:0 var(--s-2);
  font-size:var(--fs-small);font-weight:700;color:var(--text)}
.brand .pill{align-self:center}
.site-nav a{display:inline-flex;align-items:center;min-height:var(--tap);font-weight:700;text-decoration:underline}
.hero{padding-block:var(--s-6)}
.hero h1{font-size:var(--fs-hero)}
.lead{max-width:var(--measure);margin:var(--s-4) 0 0;color:var(--text-2);font-size:var(--fs-reading);line-height:var(--lh-reading);text-wrap:balance}
.hero .actions{margin-top:var(--s-5)}
.sec{padding-block:var(--s-6);border-top:1px solid var(--line)}
.sec h2{margin-bottom:var(--s-4)}
.cards{display:grid;grid-template-columns:1fr;gap:var(--s-4)}
.cards .card{display:flex;flex-direction:column;gap:var(--s-3);border-top:4px solid var(--brand)}
.cards .card h3{font-family:var(--font-display);font-size:var(--fs-heading)}
.cards .card p{margin:0;color:var(--text-2)}
.cards .btn{margin-top:auto}
.two{display:grid;grid-template-columns:1fr;gap:var(--s-6)}
.how{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-4)}
.how li{max-width:var(--measure)}
.how b{display:block}
.how span{color:var(--text-2)}
.keep{margin:0}
.keep-item{padding-block:var(--s-4);border-top:1px solid var(--line)}
.keep-item:first-child{border-top:0;padding-top:0}
.keep dt{margin-bottom:var(--s-1);font-weight:700}
.keep dd{max-width:var(--measure);margin:0;color:var(--text-2)}
.legal{max-width:var(--measure);padding-block:var(--s-5) var(--s-7);font-size:var(--fs-reading);line-height:var(--lh-reading)}
.legal h2{margin:var(--s-5) 0 var(--s-2);font-size:var(--fs-heading)}
.legal p{margin:0 0 var(--s-3)}
.legal ul{margin:0 0 var(--s-3);padding-left:var(--s-5)}
.legal li{margin-bottom:var(--s-2)}
.upd{margin-top:var(--s-5);color:var(--muted)}
.site-foot{border-top:1px solid var(--line);padding-block:var(--s-6) var(--s-7)}
.site-foot .wrap{display:grid;gap:var(--s-2)}
.site-foot p{margin:0}
.legal a,.site-foot a{overflow-wrap:anywhere}
.site-foot a{display:inline-block;min-width:24px;min-height:24px;padding:var(--s-2) var(--s-1);text-decoration:underline}
@media (max-width:599px){
  .hero .actions{flex-direction:column;align-items:stretch}
}
@media (min-width:768px){
  .wrap{padding-inline:var(--s-6)}
  .hero{padding-block:var(--s-7)}
  .sec{padding-block:var(--s-7)}
  .cards{grid-template-columns:repeat(3,1fr);gap:var(--s-5)}
  .two{grid-template-columns:1fr 1.6fr;gap:var(--s-7)}
  .keep-item{display:grid;grid-template-columns:8.5rem 1fr;gap:var(--s-5)}
  .keep dt{margin:0}
}