*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 6rem; -webkit-text-size-adjust: 100%; }

body { margin: 0; background: var(--ui-color-background); color: var(--ui-color-text); font-family: var(--pr-text); font-size: var(--ui-size-body); line-height: 1.6; font-kerning: normal; }

h1, h2 { margin: 0 0 .4em; font-family: var(--pr-display); font-weight: 800; letter-spacing: -.005em; line-height: .92; text-transform: none; text-wrap: balance; }
h2 { font-size: var(--pr-size-h2); }
h3 { margin: 0 0 .4em; font-family: var(--pr-text); font-size: var(--pr-size-h3); font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }
p { margin: 0 0 1em; text-wrap: pretty; }
a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: .22em; }
a:focus-visible, input:focus-visible, select:focus-visible, button:focus-visible { outline: 3px solid var(--pr-asphalt); outline-offset: 3px; }
img { max-width: 100%; height: auto; display: block; }

.pr-site { overflow-x: clip; }
.pr-main { display: block; }
.pr-main:focus { outline: none; }
.pr-glyph { width: 1.25em; height: 1.25em; flex: none; }

.pr-skip { position: absolute; left: 1rem; top: -4rem; z-index: 40; padding: .75rem 1rem; background: var(--pr-tip-yellow); color: var(--pr-asphalt); font-weight: 800; }
.pr-skip:focus { top: 1rem; }

.pr-header { position: relative; z-index: 30; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .75rem var(--pr-inset); border-bottom: var(--pr-rule); background: var(--pr-concrete); }
.pr-wordmark { display: inline-flex; align-items: center; gap: .6rem; margin-right: auto; text-decoration: none; }
.pr-wordmark img { width: 2.25rem; height: 2.25rem; }
.pr-wordmark__name { font-family: var(--pr-display); font-size: clamp(1.5rem, 1.3rem + .6vw, 1.9rem); font-weight: 800; letter-spacing: .04em; line-height: 1; text-transform: uppercase; }
.pr-nav { order: 3; flex-basis: 100%; overflow-x: auto; }
.pr-nav ul { display: flex; gap: 1rem; margin: 0; padding: 0; list-style: none; white-space: nowrap; }
.pr-nav a, .pr-header__signin { padding-block: .4rem; font-size: .8rem; font-weight: 800; letter-spacing: .1em; text-decoration: none; text-transform: uppercase; }
.pr-nav a:hover, .pr-header__signin:hover { text-decoration: underline; }

.pr-pill, .pr-button { display: inline-flex; align-items: center; gap: .55rem; border: 2px solid var(--pr-asphalt); background: var(--pr-tip-yellow); color: var(--pr-asphalt); font-weight: 800; text-decoration: none; white-space: nowrap; transition: background-color .2s var(--pr-ease), color .2s var(--pr-ease); }
.pr-pill { padding: .5rem 1rem; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; }
.pr-button { padding: .85rem 1.4rem .75rem; font-size: 1.05rem; }
.pr-pill:hover, .pr-button:hover { background: var(--pr-asphalt); color: var(--pr-tip-yellow); }
.pr-button--quiet, .pr-button--line { background: transparent; color: inherit; border-color: currentColor; }
.pr-button--quiet:hover, .pr-button--line:hover { background: var(--pr-asphalt); color: var(--pr-concrete); }
.pr-button--dark { background: var(--pr-asphalt); color: var(--pr-tip-yellow); }
.pr-button--dark:hover { background: var(--pr-white); color: var(--pr-asphalt); }

.pr-soon { display: inline-flex; flex-wrap: wrap; gap: .35rem; align-items: baseline; margin: 0; padding: .4rem .75rem .3rem; border: 2px dashed var(--pr-asphalt); color: var(--pr-asphalt); font-size: var(--pr-size-small); line-height: 1.45; }
.pr-soon strong { font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }

.pr-tip { display: inline-flex; align-items: center; gap: .6rem; font-size: .8rem; font-weight: 800; letter-spacing: .1em; line-height: 1; text-transform: uppercase; }
.pr-tip__fan { flex: none; width: 3rem; height: 1.5rem; overflow: visible; }
.pr-tip__spray { fill: var(--tip, var(--pr-tip-yellow)); stroke: var(--pr-asphalt); stroke-width: 1.5; stroke-linejoin: round; }
.pr-tip__nozzle { fill: var(--pr-asphalt); }
.pr-tip__angle { min-width: 2.2em; font-family: var(--pr-display); font-size: 1.6em; letter-spacing: 0; }
.pr-tip--red { --tip: var(--pr-tip-red); }
.pr-tip--yellow { --tip: var(--pr-tip-yellow); }
.pr-tip--green { --tip: var(--pr-tip-green); }
.pr-tip--white { --tip: var(--pr-white); }
.pr-tip--soap { --tip: var(--pr-asphalt); }

.pr-heading { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem 4rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); padding-top: 1.25rem; border-top: var(--pr-rule); }
.pr-heading h2 { margin: 0; max-width: 14ch; }
.pr-heading p { margin: 0; max-width: 34rem; color: var(--pr-ink-muted); font-size: var(--pr-size-lede); line-height: 1.55; }

.pr-footer { padding: clamp(3rem, 6vw, 5rem) var(--pr-inset) 2rem; background: var(--pr-asphalt); color: var(--pr-on-dark); }
.pr-footer__top { display: grid; gap: 2.5rem; padding-bottom: 2.5rem; border-bottom: 1px solid var(--pr-asphalt-soft); }
.pr-footer__brand p { max-width: 24rem; margin: 1rem 0 0; color: var(--pr-on-dark-muted); }
.pr-footer__nav ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem 2rem; margin: 0; padding: 0; list-style: none; }
.pr-footer__nav a { font-weight: 700; text-decoration: none; }
.pr-footer__nav li:last-child { grid-column: 1 / -1; }
.pr-footer__nav a:hover { text-decoration: underline; }
.pr-footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; padding-top: 1.5rem; font-size: var(--pr-size-small); }
.pr-credit { margin: 0; font-weight: 800; }
.pr-credit a { color: var(--pr-tip-yellow); }
.pr-footer__legal { margin: 0; color: var(--pr-on-dark-muted); }
.pr-footer a:focus-visible { outline-color: var(--pr-tip-yellow); }

@media (min-width: 60rem) {
  .pr-header { position: sticky; top: 0; column-gap: 1.75rem; }
  .pr-nav { order: 0; flex-basis: auto; margin-right: 1rem; }
  .pr-nav ul { gap: 2rem; }
  .pr-heading { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; }
  .pr-heading > .pr-tip { grid-column: 1 / -1; }
  .pr-footer__top { grid-template-columns: 1fr auto; }
  .pr-footer__nav ul { grid-template-columns: repeat(3, auto); }
  .pr-footer__nav li:last-child { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}