/* Site-wide polish from the design sweep. Loaded last on every page. */

/* Headings break more evenly; paragraphs avoid lonely last words */
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

/* Never scroll sideways on phones (rotated photos and shadows can poke out) */
html, body { overflow-x: clip; }

/* Visible keyboard focus everywhere */
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid #ff735c; outline-offset: 3px;
}

@media (max-width: 600px) {
  /* Easier-to-read small labels */
  .eyebrow, .label, .lbl, .logo span { font-size: 12px !important; letter-spacing: 1.4px !important; }

  /* Bigger tap targets: menu links, footer links, small text links */
  .site-links a:not(.btn), .navlinks.open a:not(.btn):not(.pill), #navlinks a:not(.btn):not(.pill) { display: block; padding: 10px 0; font-size: 14px !important; }
  .site-foot nav a, .site-foot a, .footer a { display: inline-block; padding: 10px 4px; }
  .site-foot nav { gap: 6px 14px !important; }
  .linkbtn { padding: 8px 0; }
  .check input[type="checkbox"], .check input[type="radio"] { width: 22px; height: 22px; }

  /* Shorter page heroes so the content starts on the first screen */
  .page-hero { min-height: 0 !important; }
  .page-hero-main { padding: 26px 22px 28px !important; }
  .page-hero h1 { font-size: clamp(42px, 12vw, 54px) !important; margin: 14px 0 12px !important; }
  .page-hero p { font-size: 16px !important; }
  .marquee { display: none; }

  /* Homepage: the sticker panel was taller than the phone screen */
  .hero-art { min-height: 0 !important; padding: 28px 16px 52px !important; }
  .hero-art .sticker { width: 210px !important; height: 210px !important; padding: 22px !important; }
  .hero-art .sticker strong { font-size: 26px !important; letter-spacing: -1px !important; }
  .hero-art .sticker small { font-size: 9px !important; letter-spacing: 1.2px !important; margin-bottom: 6px !important; }
  .hero-art .sticker small[style] { margin-top: 8px !important; }
  .hero-copy { padding-bottom: 26px !important; }

  /* About page photo: keep the tilt from pushing past the edge */
  .duo { transform: none !important; box-shadow: 6px 6px 0 #201e1b !important; }
}

/* Build 4: readable small print in the Kit page join box */
.v22-join .fine{color:inherit}