:root {
  --bro13-space: max(15vh, 120px);
}

.bro13-page h1,
.bro13-page h2,
.bro13-page p,
.bro13-page blockquote,
.bro13-page figure { margin-top: 0; }

.bro13-page h2 {
  max-width: 16ch;
  margin-bottom: 34px;
  font-size: clamp(2.8rem, 5vw, 5.4rem);
  line-height: 1.06;
  letter-spacing: -.07em;
  font-weight: 800;
}

.bro13-eyebrow {
  margin-bottom: 24px;
  color: var(--cobalt);
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .03em;
}

.bro13-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  isolation: isolate;
  background: var(--charcoal) url("bro13-hero.webp") center / cover no-repeat;
  color: var(--white);
}

.bro13-hero-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(28, 26, 23, .84) 0%, rgba(28, 26, 23, .5) 48%, rgba(28, 26, 23, .18) 100%);
}

.bro13-hero-copy {
  width: min(900px, 70vw);
  padding: 152px var(--gutter) max(12vh, 90px);
}

.bro13-hero h1 {
  max-width: 11ch;
  margin: 0 0 32px;
  font-size: clamp(4rem, 6.4vw, 7.7rem);
  line-height: .98;
  letter-spacing: -.08em;
  font-weight: 800;
}

.bro13-hero-copy > p:not(.bro13-eyebrow) {
  max-width: 35ch;
  color: rgba(246, 241, 231, .86);
}

.bro13-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 34px;
}

.bro13-actions .button { width: auto; min-width: 250px; }
.bro13-text-link,
.bro13-related-links a { padding-bottom: 4px; border-bottom: 1px solid currentColor; font-weight: 700; }

.bro13-section {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--bro13-space) var(--gutter);
}

.bro13-problem {
  min-height: 84svh;
  display: grid;
  grid-template-columns: .5fr 2fr;
  align-items: center;
  gap: clamp(40px, 7vw, 120px);
}

.bro13-section-number { align-self: start; color: var(--cobalt); font-weight: 800; }
.bro13-copy { max-width: 800px; }
.bro13-copy > p:not(.bro13-eyebrow),
.bro13-section-heading > p,
.bro13-video-copy > p:not(.bro13-eyebrow) { max-width: 40ch; color: rgba(28, 26, 23, .72); }
.bro13-lead { font-size: clamp(1.3rem, 2vw, 1.8rem); line-height: 1.6; font-weight: 700; color: var(--charcoal) !important; }

.bro13-video-section {
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(380px, .96fr);
  background: var(--charcoal);
  color: var(--white);
}

.bro13-video-wrap { min-height: 100svh; overflow: hidden; background: var(--charcoal); }
.bro13-video-wrap video { width: 100%; height: 100%; min-height: 100svh; display: block; object-fit: cover; }
.bro13-video-copy { display: flex; flex-direction: column; justify-content: center; padding: var(--bro13-space) var(--gutter); }
.bro13-video-copy p:not(.bro13-eyebrow) { color: rgba(246, 241, 231, .76); }

.bro13-section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .48fr);
  align-items: end;
  gap: clamp(48px, 8vw, 130px);
  margin-bottom: max(9vh, 76px);
}

.bro13-section-heading h2,
.bro13-section-heading p { margin-bottom: 0; }

.bro13-structure-grid {
  display: grid;
  grid-template-columns: 1fr .62fr 1.2fr .62fr 1fr;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(28, 26, 23, .28);
}

.bro13-zone {
  min-height: 210px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 24px 16px;
  border: 1px solid rgba(28, 26, 23, .22);
  text-align: center;
}

.bro13-zone strong { font-size: clamp(1.2rem, 2vw, 1.8rem); }
.bro13-zone span { font-size: .86rem; opacity: .72; }
.bro13-zone-active { background: var(--cobalt); color: var(--white); border-color: var(--cobalt); }
.bro13-zone-shield { background: var(--charcoal); color: var(--white); }

.bro13-proof-grid {
  display: grid;
  grid-template-columns: 1fr .8fr;
  gap: clamp(28px, 5vw, 74px);
  margin-top: max(10vh, 80px);
}

.bro13-proof-grid figure { display: flex; flex-direction: column; }
.bro13-proof-grid img { width: 100%; flex: 1; object-fit: cover; }
.bro13-patent img { object-fit: contain; background: var(--white); }
.bro13-proof-grid figcaption,
.bro13-material-grid figcaption { margin-top: 16px; color: rgba(28, 26, 23, .65); font-size: .82rem; }

.bro13-use {
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(400px, .82fr);
  background: var(--charcoal);
  color: var(--white);
}

.bro13-use-media { min-height: 100svh; overflow: hidden; }
.bro13-use-media img { width: 100%; height: 100%; min-height: 100svh; object-fit: cover; }
.bro13-use-copy { display: flex; align-items: center; padding: var(--bro13-space) var(--gutter); }
.bro13-use-list { margin: 32px 0 0; padding: 0; list-style: none; border-bottom: 1px solid rgba(246, 241, 231, .3); }
.bro13-use-list li { display: flex; justify-content: space-between; gap: 24px; padding: 22px 0; border-top: 1px solid rgba(246, 241, 231, .3); }
.bro13-use-list span { color: rgba(246, 241, 231, .7); text-align: right; }

.bro13-reviews {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: var(--bro13-space) var(--gutter);
  background: var(--cobalt);
  color: var(--white);
}

.bro13-review-inner { width: min(1180px, 100%); }
.bro13-reviews .bro13-eyebrow { color: var(--white); opacity: .76; }
.bro13-review-heading { margin-bottom: max(8vh, 64px); }
.bro13-review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.bro13-review-card { min-height: 330px; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(28px, 3.5vw, 50px); border: 1px solid rgba(246, 241, 231, .45); }
.bro13-review-card p { max-width: 30ch; font-size: clamp(1.25rem, 1.8vw, 1.65rem); line-height: 1.55; font-weight: 700; }
.bro13-review-card footer,
.bro13-review-note { font-size: .78rem; color: rgba(246, 241, 231, .75); }
.bro13-review-note { margin: 24px 0 0; }

.bro13-storage {
  min-height: 100svh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(60px, 9vw, 145px);
}

.bro13-storage-media { min-height: min(74svh, 780px); overflow: hidden; }
.bro13-storage-media img { width: 100%; height: 100%; min-height: min(74svh, 780px); object-fit: cover; }
.bro13-spec-list { margin: 44px 0 34px; border-bottom: 1px solid rgba(28, 26, 23, .28); }
.bro13-spec-list div { display: flex; justify-content: space-between; gap: 30px; padding: 18px 0; border-top: 1px solid rgba(28, 26, 23, .28); }
.bro13-spec-list dt { font-weight: 700; }
.bro13-spec-list dd { margin: 0; color: var(--cobalt); font-weight: 800; }
.bro13-caution { margin-top: 28px; padding-top: 24px; border-top: 1px solid rgba(28, 26, 23, .28); font-size: .9rem; }

.bro13-material-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 74px); }
.bro13-material-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.bro13-gift img { object-position: center; }

.bro13-faq { min-height: 100svh; }
.bro13-faq-list { max-width: 940px; margin-left: auto; border-bottom: 1px solid rgba(28, 26, 23, .28); }
.bro13-faq details { border-top: 1px solid rgba(28, 26, 23, .28); }
.bro13-faq summary { padding: 30px 52px 30px 0; cursor: pointer; font-size: clamp(1.12rem, 1.55vw, 1.42rem); font-weight: 750; list-style: none; }
.bro13-faq summary::-webkit-details-marker { display: none; }
.bro13-faq summary::after { content: "+"; float: right; margin-right: -48px; color: var(--cobalt); font-size: 1.5rem; font-weight: 500; }
.bro13-faq details[open] summary::after { content: "−"; }
.bro13-faq details p { max-width: 40ch; margin-bottom: 30px; color: rgba(28, 26, 23, .72); }

.bro13-cta {
  min-height: 92svh;
  display: grid;
  place-items: center;
  padding: var(--bro13-space) var(--gutter);
  background: var(--charcoal);
  color: var(--white);
  text-align: center;
}

.bro13-cta-inner { display: flex; flex-direction: column; align-items: center; }
.bro13-cta h2 { max-width: 17ch; }
.bro13-cta-inner > p:not(.bro13-eyebrow) { max-width: 36ch; color: rgba(246, 241, 231, .72); }
.bro13-cta .button { width: auto; min-width: 300px; margin-top: 26px; }
.bro13-related-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 28px; margin-top: 34px; color: rgba(246, 241, 231, .76); font-size: .9rem; }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .bro13-review-card { transition: transform .28s ease, background-color .28s ease; }
  .bro13-review-card:hover { transform: translateY(-6px); background: rgba(246, 241, 231, .08); }
}

@media (max-width: 960px) {
  .bro13-video-section,
  .bro13-use { grid-template-columns: 1fr; }
  .bro13-video-wrap,
  .bro13-video-wrap video { min-height: 74svh; max-height: 900px; }
  .bro13-video-copy,
  .bro13-use-copy { min-height: 70svh; }
  .bro13-use-media,
  .bro13-use-media img { min-height: 72svh; }
  .bro13-review-grid { grid-template-columns: 1fr; }
  .bro13-review-card { min-height: 250px; }
}

@media (max-width: 700px) {
  :root { --bro13-space: max(15svh, 96px); }
  .bro13-page h2 { max-width: 13ch; font-size: clamp(2.6rem, 12vw, 3.75rem); }
  .bro13-hero {
    background-image: url("bro13-hand.webp");
    background-position: center 34%;
  }
  .bro13-hero-scrim { background: linear-gradient(0deg, rgba(28, 26, 23, .9) 0%, rgba(28, 26, 23, .5) 62%, rgba(28, 26, 23, .18) 100%); }
  .bro13-hero-copy { width: 100%; padding: 138px 22px 72px; }
  .bro13-hero h1 { max-width: 8.5ch; font-size: clamp(3.2rem, 14.2vw, 4.5rem); }
  .bro13-actions { width: 100%; align-items: flex-start; flex-direction: column; }
  .bro13-actions .button { width: 100%; min-width: 0; }
  .bro13-problem { min-height: auto; grid-template-columns: 1fr; gap: 40px; }
  .bro13-section-number { align-self: auto; }
  .bro13-video-wrap,
  .bro13-video-wrap video { min-height: 76svh; max-height: none; }
  .bro13-video-wrap video { object-position: center; }
  .bro13-video-copy,
  .bro13-use-copy { min-height: auto; padding: var(--bro13-space) 22px; }
  .bro13-section-heading { grid-template-columns: 1fr; align-items: start; gap: 30px; margin-bottom: 66px; }
  .bro13-structure-grid { grid-template-columns: 1fr; }
  .bro13-zone { min-height: 132px; }
  .bro13-zone-shield { min-height: 92px; }
  .bro13-proof-grid,
  .bro13-storage,
  .bro13-material-grid { grid-template-columns: 1fr; }
  .bro13-patent img { max-height: 70svh; }
  .bro13-use-media { min-height: auto; background: var(--charcoal); }
  .bro13-use-media img {
    min-height: 0;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    object-position: center;
  }
  .bro13-use-list li { flex-direction: column; gap: 5px; }
  .bro13-use-list span { text-align: left; }
  .bro13-review-card { min-height: 270px; }
  .bro13-storage { min-height: auto; gap: 70px; }
  .bro13-storage-media,
  .bro13-storage-media img { min-height: 58svh; }
  .bro13-gift img { aspect-ratio: 4 / 3; }
  .bro13-faq summary { padding-top: 24px; padding-bottom: 24px; }
  .bro13-cta { min-height: 100svh; }
  .bro13-cta .button { width: 100%; min-width: 0; }
  .bro13-related-links { flex-direction: column; align-items: center; }
}

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