/* ==========================================================================
   ShirtShooter.co — brand stylesheet
   Palette sampled from the owner-approved homepage reference:
     yellow accent  #FDCA01
     near-black      #0B0B0B / #141414
     white           #FFFFFF
     off-white band  #F7F7F7
   ========================================================================== */

:root{
  --yellow:#FDCA01;
  --yellow-deep:#E8B400;
  --ink:#0B0B0B;
  --dark:#141414;
  --dark-2:#1C1C1C;
  --white:#FFFFFF;
  --band:#F7F7F7;
  --line:#E4E4E4;
  --text:#141414;
  --muted:#5A5A5A;
  --muted-d:#B9B9B9;

  --font-display:'Permanent Marker','Bangers','Arial Black',Impact,system-ui,sans-serif;
  --font-head:'Bangers','Permanent Marker','Arial Black',Impact,system-ui,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  --wrap:1200px;
  --radius:14px;
  --shadow:0 12px 34px rgba(0,0,0,.16);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
/* Belt-and-braces against horizontal overflow. Nothing in the layout should ever
   need to scroll sideways; overflow-x:clip on <html> keeps position:sticky working
   for the sticky header (overflow-x:hidden would turn <body> into a scrollport and
   break it), while the max-width guard caps the box in both directions. */
html{max-width:100%;overflow-x:clip}
body{
  margin:0;background:var(--white);color:var(--text);
  font-family:var(--font-body);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
  max-width:100%;overflow-x:clip;
}
img,svg,video,canvas{max-width:100%;height:auto;display:block}
svg{height:auto}
/* long unbreakable strings (email addresses, SKUs) must never widen the page */
p,li,h1,h2,h3,h4,span,a,blockquote,td,th,figcaption{overflow-wrap:break-word}
a{color:inherit}
h1,h2,h3,h4{line-height:1.08;margin:0 0 .5em}
p{margin:0 0 1em}
ul,ol{margin:0;padding:0;list-style:none}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 20px}
.wrap--narrow{max-width:820px}
.sec{padding:clamp(38px,5vw,72px) 0}
.center{text-align:center}
.skip{position:absolute;left:-9999px;top:0;background:var(--yellow);color:#000;padding:10px 16px;z-index:99;font-weight:700}
.skip:focus{left:8px;top:8px}

/* ------------------------------------------------------------ wordmark --- */
.wordmark{position:relative;display:inline-block;font-family:var(--font-display);
  font-size:clamp(20px,2.4vw,29px);line-height:1;letter-spacing:.5px;white-space:nowrap}
.wordmark__text{position:relative;z-index:2;color:#fff}
.wordmark__slash{position:absolute;left:-2%;right:-1%;bottom:.02em;height:.30em;z-index:1;
  background:var(--yellow);transform:rotate(-3.2deg);
  clip-path:polygon(0 55%,100% 0,100% 42%,0 100%)}
.brand--footer .wordmark__slash{background:var(--yellow)}

/* -------------------------------------------------------------- header --- */
.site-header{position:sticky;top:0;z-index:60;background:rgba(11,11,11,.94);
  backdrop-filter:saturate(150%) blur(8px);border-bottom:1px solid rgba(255,255,255,.09)}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;min-height:66px;gap:18px}
.brand{text-decoration:none;display:inline-block}
.site-nav ul{display:flex;align-items:center;gap:clamp(12px,2vw,30px)}
.site-nav a{color:#fff;text-decoration:none;font-size:13.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;padding:8px 2px;position:relative}
.site-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:2px;height:3px;background:var(--yellow);transition:right .18s ease}
.site-nav a:hover::after,.site-nav a[aria-current="page"]::after{right:0}
/* Mobile nav disclosure. CSS-only, no JavaScript: a visually-hidden checkbox
   that is still focusable/tab-reachable, plus a <label> the user can click.
   The label is hidden above the 900px breakpoint, so the desktop nav is untouched. */
.nav-toggle{position:absolute;width:1px;height:1px;margin:0;padding:0;border:0;
  opacity:0;clip-path:inset(50%);overflow:hidden;white-space:nowrap}
.nav-toggle__label{display:none;align-items:center;gap:9px;cursor:pointer;padding:10px;margin-right:-10px;
  color:#fff;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  line-height:1;-webkit-user-select:none;user-select:none}
.nav-toggle__bars{display:block;width:26px;flex:0 0 26px}
.nav-toggle__bars span{display:block;width:26px;height:3px;background:#fff;border-radius:2px;margin:5px 0;transition:.2s}
.nav-toggle__text{display:block}
.nav-toggle:checked ~ .nav-toggle__label .nav-toggle__bars span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav-toggle:checked ~ .nav-toggle__label .nav-toggle__bars span:nth-child(2){opacity:0}
.nav-toggle:checked ~ .nav-toggle__label .nav-toggle__bars span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ---------------------------------------------------------------- hero --- */
.hero{position:relative;background:var(--ink);color:#fff;overflow:hidden;isolation:isolate}
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center 38%;
  filter:saturate(1.06) contrast(1.04) blur(1.4px)}
.hero__veil{position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(100deg,rgba(6,6,6,.95) 0%,rgba(6,6,6,.86) 32%,rgba(6,6,6,.34) 58%,rgba(6,6,6,.06) 100%),
    linear-gradient(0deg,rgba(6,6,6,.82) 0%,rgba(6,6,6,.06) 32%,rgba(6,6,6,.34) 100%)}
.hero__inner{position:relative;z-index:3;display:block;padding:clamp(20px,2.6vw,40px) 0 clamp(32px,4.6vw,66px)}
.hero__copy{max-width:min(640px,58%)}
.hero__shirt{width:clamp(150px,17vw,224px);margin:0 0 4px -6px;
  filter:drop-shadow(0 16px 26px rgba(0,0,0,.45))}
.hero h1{font-family:var(--font-display);text-transform:uppercase;margin:0;
  font-size:clamp(26px,3.5vw,46px);letter-spacing:1px;text-shadow:0 3px 16px rgba(0,0,0,.6)}
.hero h1 .epic{display:block;color:var(--yellow);font-size:clamp(58px,11.5vw,150px);
  line-height:.84;margin-top:-.02em;letter-spacing:2px;text-shadow:0 6px 26px rgba(0,0,0,.55)}
.hero__sub{font-size:clamp(15px,1.45vw,19px);color:#EDEDED;margin:.85em 0 0;max-width:32ch;font-weight:500}
.hero__gun{position:absolute;z-index:2;right:clamp(-10px,.8vw,22px);bottom:clamp(18px,4.4vw,58px);
  width:min(53%,680px);pointer-events:none}
/* cannon-hero.png is the master with ONLY the flat light-grey plate keyed to
   transparency — the device itself is byte-identical to cannon-master.png. The
   old blend-mode multiply workaround is gone, and so are the brightness/contrast/
   saturate filters (they would recolour the device and are no longer needed).
   The drop shadow is on the composite only, so the cannon lifts off the crowd
   exactly like the approved reference. */
.hero__gun img{width:100%;filter:drop-shadow(0 16px 30px rgba(0,0,0,.55))}

/* ---------------------------------------------------------- price bar ---- */
.pricebar{display:flex;align-items:stretch;flex-wrap:wrap;gap:0;margin-top:22px;
  border:2px solid rgba(255,255,255,.34);border-radius:12px;overflow:hidden;
  background:rgba(10,10,10,.55);backdrop-filter:blur(3px);max-width:620px;min-width:0}
.price{display:flex;flex-direction:column;justify-content:center;padding:10px 20px;
  min-width:120px;flex:0 1 auto;text-decoration:none}
.price__label{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#CFCFCF;font-weight:700}
.price__value{font-family:var(--font-head);font-size:clamp(22px,2.6vw,30px);line-height:1.05;color:#fff;
  letter-spacing:1px;white-space:nowrap}
.price--ebay{border-right:1px solid rgba(255,255,255,.24)}
.price--ebay .price__value{color:#D9D9D9}
.price--ebay:hover .strike{color:#fff}
/* The struck-through eBay price must read as struck at every width:
   skip-ink off so the red rule crosses the digits instead of breaking around them. */
.strike{color:#B5B5B5;text-decoration:line-through;text-decoration-color:#FF5A5A;
  text-decoration-thickness:.14em;text-decoration-skip-ink:none;position:relative}
.price--direct .price__value{color:#fff}
.btn-stripe{flex:1 1 260px;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:12px;
  border:0;cursor:not-allowed;background:var(--yellow);color:#111;
  font-family:var(--font-body);font-weight:800;font-size:clamp(15px,1.5vw,19px);
  padding:14px 22px;letter-spacing:.01em;text-align:center}
.btn-stripe .btn__ico{width:20px;height:20px;flex:0 0 auto}
.btn-stripe .btn__chev{width:16px;height:16px;flex:0 0 auto}
.btn-stripe[aria-disabled="true"]{opacity:.96}
.pricebar__note{font-size:13.5px;color:#D2D2D2;margin:10px 0 0}
.pricebar__note a{color:var(--yellow);font-weight:600;text-decoration:none}
.pricebar__note a:hover{text-decoration:underline}
.ship-line{margin:12px 0 0;font-size:13px;letter-spacing:.13em;text-transform:uppercase;
  color:#E9E9E9;font-weight:700}
.ship-line b{color:var(--yellow)}

/* ---------------------------------------------------------- feature row -- */
.features{background:var(--band);padding:clamp(26px,3.4vw,46px) 0}
.features__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,30px)}
.feature{text-align:center;padding:6px 4px}
.feature .ico{width:clamp(40px,4.6vw,60px);height:clamp(40px,4.6vw,60px);color:#111;margin:0 auto 12px}
.feature h3{font-size:clamp(13.5px,1.35vw,17px);letter-spacing:.07em;text-transform:uppercase;
  font-weight:800;margin:0 0 6px}
.feature p{font-size:14px;color:#2C2C2C;margin:0;line-height:1.5}

/* ------------------------------------------------------- brush headings -- */
.brush{position:relative;display:inline-block;font-family:var(--font-display);text-transform:uppercase;
  font-size:clamp(28px,4.4vw,58px);letter-spacing:1px;margin:0 0 .5em;line-height:1.02}
.brush span{position:relative;z-index:2}
.brush__slash{position:absolute;left:-4%;width:74%;bottom:-.10em;height:.13em;background:var(--yellow);
  border-radius:40% 60% 55% 45%;transform:rotate(-1.4deg);z-index:1;
  clip-path:polygon(0 30%,62% 0,100% 22%,100% 74%,46% 100%,0 70%)}
.brush--sm{font-size:clamp(24px,3.2vw,40px)}
.brush--yellow{color:var(--yellow)}

/* ------------------------------------------------------- together tiles -- */
.together{background:#fff;padding:clamp(36px,4.6vw,68px) 0}
.together__lede{max-width:62ch;margin:0 auto 30px;text-align:center;color:#232323;font-size:17px}
.tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(8px,1.1vw,16px)}
.tile{position:relative;display:block;overflow:hidden;border-radius:8px;background:#111;
  aspect-ratio:4/3.28}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.tile:hover img{transform:scale(1.05)}
.tile__cap{position:absolute;left:0;right:0;bottom:0;padding:26px 8px 9px;text-align:center;
  background:linear-gradient(0deg,rgba(0,0,0,.9) 12%,rgba(0,0,0,.55) 55%,rgba(0,0,0,0) 100%)}
.tile__cap span{font-family:var(--font-head);color:#fff;letter-spacing:.09em;
  font-size:clamp(12.5px,1.16vw,19px);text-transform:uppercase;line-height:1.1;display:block}

/* -------------------------------------------------------- make it fly ---- */
.fly{position:relative;background:var(--dark);color:#fff;overflow:hidden;isolation:isolate}
.fly__bg{position:absolute;right:0;top:0;bottom:0;width:52%;z-index:0}
.fly__bg img{width:100%;height:100%;object-fit:cover;opacity:.5;filter:blur(1.6px) saturate(1.05)}
.fly__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--dark) 4%,rgba(20,20,20,.72) 46%,rgba(20,20,20,.28) 100%)}
.fly__inner{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(18px,3vw,48px);align-items:center;padding:clamp(38px,5vw,74px) 0}
.fly h2{font-family:var(--font-display);text-transform:uppercase;margin:0;
  font-size:clamp(38px,6.4vw,84px);line-height:.94;letter-spacing:1.5px}
.fly h2 .y{display:block;color:var(--yellow)}
.fly__col2 .wordmark{margin-bottom:10px}
.fly__col2 p{color:#DCDCDC;font-size:16.5px;max-width:44ch;margin:0 0 18px}
.pricebar--dark{background:rgba(0,0,0,.55);margin-top:0;max-width:640px}
.payments{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}
.pay{background:#fff;color:#101010;font-weight:800;font-size:12.5px;letter-spacing:.02em;
  padding:7px 13px;border-radius:6px;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.pay--visa{color:#1A1F71;font-style:italic;letter-spacing:.04em}
.pay--mastercard{color:#231F20}
.pay--americanexpress{color:#0F6DB4;font-size:11px;letter-spacing:.01em}
.pay--paypal{color:#003087;font-style:italic}
.pay--cashapp{color:#00A82D}
.pay--venmo{color:#3D95CE}
.pay--zelle{color:#6722BB}

/* ------------------------------------------------------------- badges ---- */
.badges{background:var(--dark);border-top:1px solid rgba(255,255,255,.12);padding:20px 0 26px}
.badges__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.badge{display:flex;align-items:center;justify-content:center;gap:9px;color:#fff;
  font-size:clamp(10.5px,1.05vw,13px);font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  border:1px solid rgba(255,255,255,.22);border-radius:8px;padding:11px 8px;text-align:center}
.badge .ico{width:22px;height:22px;color:#fff;flex:0 0 auto}

/* -------------------------------------------------------------- video ---- */
.video-sec{background:#fff;padding:clamp(34px,4.4vw,64px) 0}
/* 16:9 but capped at 420px tall (747px wide) so the placeholder does not leave a
   half-screen of dead space on desktop. Same wording, still no third-party video. */
.video-frame{border:2px dashed #D4D4D4;border-radius:16px;background:var(--band);
  aspect-ratio:16/9;width:min(100%,747px);max-height:420px;margin:0 auto;
  display:flex;align-items:center;justify-content:center;text-align:center;padding:20px}
.video-frame__play{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;
  border-radius:50%;background:var(--yellow);color:#111;margin:0 auto 14px}
.video-frame__play svg{width:28px;height:28px;margin-left:3px}
.video-frame__caption{font-weight:700;color:#3A3A3A;margin:0}
.video-frame__inner{display:flex;flex-direction:column;align-items:center}

/* ------------------------------------------------------------- footer ---- */
.site-footer{background:#0A0A0A;color:#BDBDBD;border-top:3px solid var(--yellow);padding:34px 0 26px}
.site-footer__top{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px;margin-bottom:18px}
.site-footer__tag{margin:0;font-size:14px;color:#9E9E9E;max-width:52ch}
.site-footer__nav ul{display:flex;flex-wrap:wrap;gap:8px 24px;font-size:14px}
.site-footer__nav a{text-decoration:none;color:#E4E4E4}
.site-footer__nav a:hover{color:var(--yellow);text-decoration:underline}
.site-footer__line{margin:20px 0 8px;font-size:13px;letter-spacing:.11em;text-transform:uppercase;
  color:#fff;font-weight:700;border-top:1px solid rgba(255,255,255,.14);padding-top:18px}
.site-footer__legal{margin:0;font-size:13px;color:#8C8C8C}
.site-footer__legal a{color:var(--yellow);text-decoration:none}

/* --------------------------------------------------------- inner pages --- */
.page-hero{background:var(--ink);color:#fff;padding:clamp(26px,4vw,54px) 0 clamp(26px,4vw,48px);
  position:relative;overflow:hidden}
.page-hero::after{content:"";position:absolute;inset:0;background:
  radial-gradient(120% 130% at 88% 0%,rgba(253,202,1,.16) 0%,rgba(253,202,1,0) 55%)}
.page-hero .wrap{position:relative;z-index:2}
.page-hero h1{font-family:var(--font-display);text-transform:uppercase;letter-spacing:1.2px;
  font-size:clamp(30px,5vw,60px);margin:.15em 0 .25em;line-height:1.03}
.page-hero p{color:#D5D5D5;max-width:66ch;font-size:17px;margin:0}
.crumbs{margin-bottom:14px}
.crumbs ol{display:flex;flex-wrap:wrap;gap:8px;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:#9C9C9C}
.crumbs li+li::before{content:"›";margin-right:8px;color:var(--yellow)}
.crumbs a{color:#CFCFCF;text-decoration:none}
.crumbs a:hover{color:var(--yellow);text-decoration:underline}
.crumbs [aria-current]{color:var(--yellow)}

.prose{max-width:74ch}
.prose h2{font-family:var(--font-head);text-transform:uppercase;letter-spacing:.06em;
  font-size:clamp(21px,2.4vw,31px);margin:1.5em 0 .45em;color:#111}
.prose h3{font-size:clamp(17px,1.6vw,20px);margin:1.3em 0 .35em;font-weight:800}
.prose ul{margin:0 0 1.1em;padding-left:1.15em;list-style:disc}
.prose li{margin:.28em 0}
.prose a{color:#0B5BD3}
.prose--legal .prose{}
.updated{font-size:13.5px;color:var(--muted);margin-bottom:1.6em}

.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:22px 0}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin:22px 0}
.card{border:1px solid var(--line);border-radius:var(--radius);padding:20px;background:#fff}
.card h3{margin-top:0;font-size:17px;letter-spacing:.03em;text-transform:uppercase;font-weight:800}
.card p{margin:0;font-size:15px;color:#333}
.card img{border-radius:10px;margin-bottom:14px;width:100%;height:232px;object-fit:cover;object-position:center 58%}

/* purchase call-to-action band reused on the seed pages */
.cta-band{background:var(--dark);color:#fff;padding:clamp(30px,4vw,56px) 0;isolation:isolate}
.cta-band h2{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(22px,3vw,38px);
  margin:0 0 .3em;letter-spacing:1px}
.cta-band p{color:#D6D6D6;max-width:62ch}
.cta-band .pricebar{margin-top:6px}
.cta-band .ship-line{color:#EDEDED}
.cta-links{margin-top:18px;font-size:14.5px;color:#D6D6D6}
.cta-links a{color:var(--yellow);text-decoration:none;font-weight:600}
.cta-links a:hover{text-decoration:underline}

/* ----------------------------------------------------------------- faq --- */
.sec--faq{background:var(--band)}
.faq{margin-top:12px}
.faq__item{background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:12px;overflow:hidden}
.faq__item summary{cursor:pointer;padding:16px 50px 16px 18px;position:relative;list-style:none}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%);
  font-size:24px;font-weight:700;color:var(--yellow-deep);line-height:1}
.faq__item[open] summary::after{content:"–"}
.faq__item h3{display:inline;font-size:16.5px;font-weight:800;margin:0;letter-spacing:.01em}
.faq__a{padding:0 18px 18px;color:#333;font-size:15.5px}
.faq__a p:last-child{margin-bottom:0}

/* ------------------------------------------------------------- contact --- */
.contact-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(20px,3vw,44px);
  align-items:start;margin-top:8px}
.contact-form{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}
.contact-form label{display:block;font-weight:700;font-size:13.5px;letter-spacing:.04em;
  text-transform:uppercase;margin:0 0 6px}
.contact-form .field{margin-bottom:16px}
.contact-form input,.contact-form textarea,.contact-form select{
  width:100%;padding:12px 13px;border:1px solid #CFCFCF;border-radius:9px;font:inherit;font-size:15.5px;background:#FCFCFC}
.contact-form textarea{min-height:132px;resize:vertical}
.contact-form button{background:var(--yellow);color:#111;border:0;border-radius:9px;
  padding:14px 24px;font:inherit;font-weight:800;font-size:16px;cursor:pointer;width:100%}
.contact-form .hint{font-size:13px;color:var(--muted);margin:10px 0 0}
.info-list li{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font-size:15.5px}
.info-list li:last-child{border-bottom:0}
.info-list .ico-sm{width:20px;height:20px;flex:0 0 auto;color:var(--yellow-deep);margin-top:3px}
.mailto-big{display:inline-block;font-weight:800;font-size:clamp(17px,2vw,22px);color:#111;
  text-decoration:none;border-bottom:3px solid var(--yellow);padding-bottom:2px;word-break:break-all}

/* ---------------------------------------------------------- responsive --- */
/* Nav disclosure: every one of the six header items must be reachable BELOW
   900px, while the desktop nav stays visually unchanged at 900px and above.
   (899.98px rather than 900px so exactly 900 counts as desktop.) */
@media (max-width:899.98px){
  .nav-toggle__label{display:inline-flex}
  .site-nav{position:absolute;left:0;right:0;top:100%;background:rgba(11,11,11,.985);
    border-bottom:1px solid rgba(255,255,255,.12);
    max-height:0;overflow:hidden;visibility:hidden;
    transition:max-height .25s ease,visibility .25s}
  .site-nav ul{flex-direction:column;align-items:flex-start;gap:0;padding:6px 20px 14px}
  .site-nav li{width:100%;border-bottom:1px solid rgba(255,255,255,.08)}
  .site-nav a{display:block;padding:14px 0;font-size:14px}
  /* visibility:hidden above also keeps the collapsed links out of the tab order,
     so keyboard users are not dropped into an invisible menu */
  .nav-toggle:checked ~ .site-nav{max-height:70vh;overflow:auto;visibility:visible}
  .nav-toggle:focus-visible ~ .nav-toggle__label{outline:2px solid var(--yellow);outline-offset:2px}
}
@media (max-width:1020px){
  .features__grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:26px}
  .tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tile{aspect-ratio:4/3.2}
  .fly__inner{grid-template-columns:1fr;gap:26px}
  .fly__bg{width:100%;opacity:.9}
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero__copy{max-width:min(560px,62%)}
  .hero__gun{width:min(48%,520px)}
}
@media (max-width:860px){
  .hero__inner{padding-bottom:30px}
  .hero__copy{max-width:none}
  .hero__gun{position:relative;z-index:3;width:min(calc(100% - 40px),540px);margin:12px auto 0;pointer-events:auto}
  .hero__gun img{filter:drop-shadow(0 14px 26px rgba(0,0,0,.5))}
  .hero__sub{max-width:none}
  .contact-grid{grid-template-columns:1fr}
  .badges__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-2{grid-template-columns:1fr}
}
@media (max-width:620px){
  body{font-size:16px}
  .features__grid{grid-template-columns:1fr 1fr;gap:18px}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .tile{aspect-ratio:1/1}
  .grid-3{grid-template-columns:1fr}
  .pricebar{flex-direction:column}
  .price{flex-direction:row;align-items:baseline;justify-content:space-between;gap:12px;
    width:100%;min-width:0;
    border-right:0;border-bottom:1px solid rgba(255,255,255,.24);padding:12px 18px}
  .btn-stripe{flex:0 0 auto;border-radius:0;padding:16px 18px}
  .hero__shirt{width:42vw;margin-bottom:6px}
  .payments{gap:7px}
  .pay{font-size:11.5px;padding:6px 10px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}