/* Tires and wheels landing pages (Nov 11 2026): the kit's family and design sections above the catalog. */
.lp .lp-row{margin:44px 0 0;font-family:var(--disp);font-size:clamp(22px,2vw,28px);text-transform:uppercase;color:#0E0D0B}
.lp-grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:18px}
.lp .tn-card-art.lp-photo{background:#fff;border-bottom:1px solid #DDE1E6;height:210px;padding:10px}
.lp .tn-card-art.lp-photo img{max-height:190px;object-fit:contain}
.lp .tn-card h3{font-size:clamp(22px,2vw,27px)}
.lp-w{font-family:var(--body);font-size:14px;color:#5F6369}
.lp-w b{font-family:var(--disp);font-weight:800;font-size:30px;letter-spacing:-.01em;color:#0E0D0B;margin-right:4px}
.fam-hero .tn-jump{position:relative;z-index:2}
.fam-hero .tn-stats{position:relative;z-index:2;margin-top:32px;border-color:rgba(255,255,255,.22)}
.fam-hero .tn-stats div{border-color:rgba(255,255,255,.22)}
.fam-hero .tn-stats b{color:#fff}.fam-hero .tn-stats span{color:#E4E6EA}
.fam-hero .tn-jump a{background:rgba(14,13,11,.62);border-color:rgba(255,255,255,.28);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
@media(max-width:1100px){.lp-grid4{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.lp-grid4{grid-template-columns:1fr}}
.lp h2,.lp h3{text-transform:uppercase}
.lp h2{font-family:var(--disp);font-weight:800;font-size:clamp(30px,3.6vw,48px);line-height:1.02;letter-spacing:-.01em}

/* icon pack parts E and F (Nov 11 2026): row icons, and the paddle scene beside the lineup heading */
.lp .lp-row{display:flex;align-items:center;gap:10px}
.lp .lp-row img{width:30px;height:30px;flex:none}
.lp a.tn-more img{width:20px;height:20px}
.lp-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:32px;align-items:end}
.lp-scene{display:block}
.lp-scene img{display:block;width:100%;height:auto}
@media(max-width:820px){.lp-head{grid-template-columns:1fr;gap:16px}.lp-scene{max-width:360px}}
/* Scott's family logos on the lineup cards (Nov 11 2026) */
.lp .tn-card-art.lp-photo{position:relative}
.lp .tn-card-art.lp-photo img.lp-fam{position:absolute;left:10px;top:10px;width:64px;height:auto;max-height:48px;object-fit:contain;object-position:left top}

/* Nov 12 2026 (Scott): "make sure these three stats stack horizontally on mobile… push all the text down so the hero's open
   full screen and all the text anchors to the bottom." The hero fills the screen under the 92px the nav takes (the video
   already runs up behind it), the copy sits on the bottom edge, and the stats stay one row of three on phones. */
.fam-hero{min-height:calc(100vh - 92px - env(safe-area-inset-top,0px));min-height:calc(100svh - 92px - env(safe-area-inset-top,0px) + var(--pp-bleed,0px));align-items:flex-end;padding:140px 0 clamp(24px,4.5vh,52px)}
@media(max-width:640px){
  .fam-hero{padding:40px 0 calc(88px + var(--pp-bleed,0px))}               /* the floating nav ends ~16px into the hero; 88px keeps the stats clear of Ask Packard */
  .fam-hero .tn-stats{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:22px}
  .fam-hero .tn-stats div,.fam-hero .tn-stats div+div{padding:12px 10px 4px;border-bottom:0;border-right:1px solid rgba(255,255,255,.22)}
  .fam-hero .tn-stats div:first-child{padding-left:0}
  .fam-hero .tn-stats div:last-child{padding-right:0;border-right:0}
  .fam-hero .tn-stats b{font-size:clamp(26px,8vw,36px)}
  .fam-hero .tn-stats span{font-size:12.5px;line-height:1.3;margin-top:6px}
}
@media(max-width:640px) and (max-height:700px){.fam-hero h1{font-size:34px;margin:6px 0 8px}.fam-hero .lede{font-size:15px;line-height:1.45}.fam-hero .tn-stats{margin-top:14px}.fam-hero .tn-jump{margin-top:16px}}
/* Nov 12 2026: same as every pp-hero landing — on phones the chips ride one sideways-scrolling row so the stats make the first screen */
@media(max-width:640px){
  .fam-hero .tn-jump{gap:8px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:calc(-1 * var(--gut,16px));padding-right:var(--gut,16px);
    -webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent)}
  .fam-hero .tn-jump::-webkit-scrollbar{display:none}
  .fam-hero .tn-jump li{flex:none}
  .fam-hero>.wrap{min-width:0;width:100%}   /* the hero is a flex row: without this the one-line chip row widens the copy past the screen */
  .fam-hero .tn-jump a{padding:9px 13px;font-size:13.5px;white-space:nowrap}
}