/* Dirtcon picker — their own brand, matte black and chrome, read from their
   live stylesheet. The SEO and comparison sections inject their own scoped
   styles and deliberately keep a different look, so nothing here touches them. */
:root{
  --matte:#0A0A0A; --carbon:#171717; --raise:#212121; --line:#2E2E2E;
  --chrome:#C8CCD1; --chrome-dim:#ACB1B8; --steel:#6E7277; --ink:#FFFFFF;
  --sheen:linear-gradient(135deg,#c8ccd1 0%,#fff 50%,#a8afb7 100%);
  --disp:'Bebas Neue',Impact,sans-serif; --body:'Archivo',system-ui,sans-serif;
  --max:1180px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--matte);color:var(--ink);font:400 17px/1.65 var(--body);
  overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{width:min(100% - 40px,var(--max));margin-inline:auto}
.wrap-n{width:min(100% - 40px,900px)}

.pk-hd{position:sticky;top:0;z-index:50;background:rgba(10,10,10,.9);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.pk-hd-in{display:flex;align-items:center;gap:18px;min-height:66px}
.pk-brand{display:flex;align-items:center;min-height:46px}
.pk-brand img{height:34px;width:auto}
.pk-nav{display:flex;gap:20px;margin-left:auto;flex-wrap:wrap}
.pk-nav a{font-size:13px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--chrome-dim);text-decoration:none;display:inline-flex;align-items:center;min-height:46px}
.pk-nav a:hover{color:var(--ink)}

.pk-hero{padding:78px 0 56px;background-image:url("/jimmy-media/art/strata.svg");
  background-size:cover;background-position:bottom;background-repeat:no-repeat}
.pk-eyebrow{margin:0 0 16px;font-size:12.5px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--chrome-dim)}
h1{margin:0;font-family:var(--disp);font-weight:400;line-height:.92;letter-spacing:.01em;
  font-size:clamp(44px,7.4vw,104px)}
.pk-lede{margin:22px 0 0;max-width:64ch;font-size:clamp(16px,1.8vw,18.5px);color:#C0C4C8}
.pk-facts{margin-top:36px;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line)}
.pk-facts div{background:var(--matte);padding:18px 20px}
.pk-facts b{display:block;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--steel)}
.pk-facts span{display:block;margin-top:6px;font-size:14.5px;color:var(--chrome)}

.pk-note{padding:44px 0;background:var(--carbon);border-block:1px solid var(--line)}
.pk-note h2{margin:0 0 14px;font-family:var(--disp);font-weight:400;font-size:clamp(26px,3.4vw,40px);letter-spacing:.02em}
.pk-note p{margin:0 0 14px;max-width:78ch;font-size:16px;color:#BFC3C7}
.pk-note p:last-child{margin-bottom:0}
.pk-note i{font-style:normal;font-family:ui-monospace,Menlo,monospace;font-size:14.5px;color:var(--chrome)}
.pk-note b{color:var(--ink)}

.pk-sec{padding:76px 0}
.pk-sec-alt{background:var(--carbon);border-block:1px solid var(--line)}
.pk-h2{margin:0;font-family:var(--disp);font-weight:400;line-height:.98;
  font-size:clamp(32px,4.6vw,62px);letter-spacing:.01em}
.pk-sub{margin:14px 0 0;max-width:62ch;color:#B0B4B8;font-size:16.5px}

.pk-grid{margin-top:44px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pk-card{border:1px solid var(--line);background:var(--carbon);display:flex;flex-direction:column;
  transition:border-color .25s,transform .25s}
.pk-card:hover{border-color:var(--chrome-dim);transform:translateY(-3px)}
.pk-shot{aspect-ratio:1200/630;overflow:hidden;background:var(--raise);border-bottom:1px solid var(--line)}
.pk-shot img{width:100%;height:100%;object-fit:cover;object-position:top}
.pk-body{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1}
.pk-k{margin:0;display:flex;align-items:center;gap:10px;font-size:12.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--steel)}
.pk-k span{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:22px;
  background:var(--sheen);color:var(--matte);border-radius:2px;letter-spacing:.04em}
.pk-body h3{margin:10px 0 10px;font-family:var(--disp);font-weight:400;font-size:34px;letter-spacing:.02em}
.pk-d{margin:0;font-size:15px;color:#B0B4B8}
.pk-f{margin:16px 0 20px;padding:0;list-style:none}
.pk-f li{position:relative;padding:6px 0 6px 20px;font-size:14px;color:var(--chrome-dim);
  border-top:1px solid var(--line)}
.pk-f li::before{content:"";position:absolute;left:2px;top:15px;width:7px;height:7px;
  background:var(--chrome);transform:rotate(45deg)}
.pk-go{margin-top:auto;display:inline-flex;align-items:center;justify-content:center;min-height:52px;
  padding:0 22px;font-family:var(--disp);font-size:23px;letter-spacing:.05em;text-decoration:none;
  background:var(--sheen);color:var(--matte);border-radius:2px}

.pk-two{margin-top:36px;display:grid;grid-template-columns:1fr 1fr;gap:20px}
.pk-col{border:1px solid var(--line);background:var(--matte);padding:24px 26px}
.pk-col-x{border-left:3px solid var(--steel)}
.pk-col h3{margin:0 0 14px;font-family:var(--disp);font-weight:400;font-size:27px;letter-spacing:.02em}
.pk-col ul{margin:0;padding:0;list-style:none}
.pk-col li{position:relative;padding:9px 0 9px 22px;font-size:15px;color:#B0B4B8;border-top:1px solid var(--line)}
.pk-col li::before{content:"";position:absolute;left:3px;top:17px;width:8px;height:1.6px;background:var(--chrome)}
.pk-col-x li::before{background:var(--steel)}
.pk-fine{margin:26px 0 0;font-size:14px;color:var(--steel);max-width:80ch}

.pk-ft{background:var(--carbon);border-top:1px solid var(--line);padding:34px 0}
.pk-ft-in{display:flex;flex-wrap:wrap;align-items:center;gap:20px}
.pk-mark{height:38px;width:auto}
.pk-ft-t{flex:1;min-width:240px}
.pk-ft-t p{margin:0;font-size:14.5px;color:#A6AAAE}
.pk-ft-t b{color:var(--ink)}
.pk-ft-c{margin-top:5px !important;color:var(--steel) !important;font-size:14px !important}
.byscalus{font-size:13.5px;color:var(--steel)}
.byscalus a{color:var(--chrome);font-weight:700;text-decoration:none}

@media(max-width:1000px){
  .pk-grid{grid-template-columns:1fr;gap:18px}
  .pk-two{grid-template-columns:1fr}
  .pk-facts{grid-template-columns:1fr}
}
@media(max-width:640px){
  body{font-size:16px}
  .wrap,.wrap-n{width:calc(100% - 32px)}
  .pk-hero{padding:48px 0 40px}
  .pk-sec{padding:52px 0}
  .pk-note{padding:34px 0}
  .pk-nav{gap:14px}
  .pk-brand img{height:30px}
  /* phone standard: nothing a visitor reads goes under 12px */
  .pk-eyebrow,.pk-nav a,.pk-facts b,.pk-k,.pk-fine,.byscalus,.pk-ft-c{font-size:12.5px}
}