/* Mobile layouts, shared across the four landing pages. Brand type stays large;
   cards and grids adapt around it instead of squeezing text into desktop columns. */
.review-controls{display:none}
[data-page="gruns"] .tab{min-height:44px}

@media(max-width:900px){
  .hero-grid>*,.buybox>*,.fit-card>*,.plan .top>*{min-width:0}
  .wrap,.ed-body{max-width:720px}
  .hero-grid>.hero-art img{max-width:360px;margin-inline:auto}
  .buybox>div:first-child img{width:100%;max-width:300px;margin-inline:auto}
  .sticky .btn{min-height:52px;padding:14px 16px;line-height:1.35;letter-spacing:.02em;font-weight:700}
  .sticky .btn:not(.ghost){background:var(--apricot);color:var(--display-ink)}
  body{padding-bottom:var(--sticky-clearance,100px)}
  :is(a,button,summary):focus-visible{outline:3px solid var(--ink);outline-offset:4px}
  .faq summary{min-height:48px;align-items:center}
  .faq summary::after{flex:none}
}

@media(max-width:620px){
  .wrap,.ed-body{padding-inline:18px}
  section{padding-block:40px}
  h1,h2,h3{overflow-wrap:break-word}
  .eyebrow{letter-spacing:.09em;line-height:1.4}
  .hero{padding-top:24px}
  .hero-grid{gap:24px}
  .hero .btn,.layers .btn,.note-leaf .btn{display:block;width:100%}
  .btn{padding:16px 14px;line-height:1.35;letter-spacing:.02em;font-weight:700;min-height:52px}
  .btn:not(.ghost){background:var(--apricot);color:var(--display-ink)}
  .hero .cta-note{text-align:center}
  .hero-grid>.hero-art img{max-width:240px}
  /* Bring the product ahead of the certification list on the two product heroes. */
  :is([data-page="built-for-pee"],[data-page="twice-the-protection"]) .hero-grid{gap:0}
  :is([data-page="built-for-pee"],[data-page="twice-the-protection"]) .hero-grid>div:first-child{display:contents;opacity:1;transform:none}
  :is([data-page="built-for-pee"],[data-page="twice-the-protection"]) .hero-art{order:1;margin-top:22px}
  :is([data-page="built-for-pee"],[data-page="twice-the-protection"]) .hero .badges{order:2;margin-top:22px}
  .hero .badges.mini{gap:8px}
  .hero .badges.mini .badge{border-radius:10px;line-height:1.35;min-height:48px;height:auto!important;padding:10px 12px!important}
  .hero .rating-line{line-height:1.45}
  .strip .items{gap:20px 16px}
  .strip .items>div{min-width:0}
  .strip span{line-height:1.45}

  /* A thumbnail belongs beside the product name, not beside every paragraph. */
  .fit-card{grid-template-columns:72px minmax(0,1fr);gap:12px 16px;padding:18px}
  .fit-card>div{display:contents}
  .fit-card>img{grid-column:1;grid-row:1;width:72px}
  .fit-card .fit-top{grid-column:2;grid-row:1;display:grid;gap:8px;justify-content:start}
  .fit-card .use,.fit-card .spec{grid-column:1/-1;margin:0}
  .fit-card .spec{padding-top:10px;border-top:1px solid rgba(51,49,46,.16)}
  .fit-card .nm{font-size:calc(22px * var(--fs,1))}
  .fit-card .drops{gap:4px}

  /* Short exclusions remain easy to scan. Longer certification names get a row. */
  .nots{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .nots .not{border-radius:8px;align-items:flex-start;padding:12px 10px;line-height:1.4;text-wrap:wrap}
  .nots .not::before{margin-top:4px}
  .nots .not:nth-child(n+11){grid-column:1/-1;align-items:center}

  /* Keep the value label adjacent to its bar, with the full phone width for scale. */
  .ladder{gap:20px}
  .rung{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"nm cap" "track track";gap:8px 16px}
  .rung .cap{text-align:right}
  .rung .track{height:22px}
  .tool{padding:20px 16px}
  .tool-head{gap:12px}
  .steps{letter-spacing:.06em}
  .qs{gap:28px}
  .q .opts{display:grid;grid-template-columns:1fr;gap:9px}
  .q .opt{width:100%;border-radius:10px;text-align:left;padding:14px 16px;min-height:50px}
  .q .opt[aria-checked="true"]{padding:13px 15px;box-shadow:inset 4px 0 var(--ink)}
  .q[data-q="when"] .opts{grid-template-columns:repeat(3,minmax(0,1fr))}
  .q[data-q="when"] .opt{text-align:center;padding-inline:6px}
  .recs.pair .rec{padding:18px 16px}
  .minirange{gap:14px 10px}
  [data-page="twice-the-protection"] [data-track="compare"] .card{display:grid;grid-template-columns:88px minmax(0,1fr);gap:12px 16px;align-items:center}
  [data-page="twice-the-protection"] [data-track="compare"] .card>img{grid-row:1/3;width:88px;margin:0!important}
  [data-page="twice-the-protection"] [data-track="compare"] .card h3{margin:0}
  [data-page="twice-the-protection"] [data-track="compare"] .card p{margin:0!important}
  [data-page="twice-the-protection"] [data-track="compare"] .better{grid-column:1/-1;margin:0}

  /* Nearly a full card is visible, with a small next-card peek and tap controls. */
  .review{flex-basis:calc(100% - 24px);padding:22px;display:flex;flex-direction:column}
  .review .who{margin-top:auto;padding-top:18px}
  .review-controls{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:20px}
  .review-controls button{width:48px;height:48px;border:1px solid var(--hair);border-radius:50%;background:var(--paper);color:var(--ink);font:inherit;font-size:26px;cursor:pointer}
  .review-controls button:disabled{opacity:.35;cursor:default}
  .review-controls output{font-size:calc(18px * var(--fs,1));color:var(--ink-soft)}
  .reviews~.swipe-hint{display:none}

  /* Price never competes with a long subscription label for a narrow row. */
  .offer>.wrap{padding-inline:14px}
  .buybox{padding:22px 18px;gap:24px}
  .buybox>div:first-child img{max-width:220px}
  .plan{padding:16px}
  .plan .top{display:block}
  .plan .price{display:block;margin-top:6px}
  .plan b{line-height:1.35}
  .plan small{line-height:1.5}
  .plan .tag{border-radius:6px;letter-spacing:.06em;line-height:1.3;background:var(--apricot);color:var(--ink)}
  .buybox .cta-note{line-height:1.5}

  /* Editorial masthead and metadata each have a deliberate line. */
  .ed-masthead .row{display:grid;grid-template-columns:38px minmax(0,1fr);gap:4px 12px;padding:14px 18px}
  .ed-masthead .logo{grid-row:1/3;width:32px;height:auto}
  .ed-masthead .ed-label{font-size:18px;letter-spacing:.07em;white-space:normal;line-height:1.3}
  .ed-masthead .ed-label:last-child{margin-left:0!important;letter-spacing:.04em}
  .ed-body h1{font-size:calc(clamp(30px,7.9vw,38px) * var(--fs,1));line-height:1.14}
  .ed-body .byline{font-size:calc(18px * var(--fs,1));line-height:1.55}
  .byline span{display:inline-block}
  .ed-body .pull{font-size:calc(23px * var(--fs,1));line-height:1.35;padding-left:16px}
  .ed-body figure{margin-block:26px}
  .ed-body figcaption{text-wrap:pretty;line-height:1.45}
  .quote-card{padding:22px 18px}
  .quote-card .disclosure{font-size:18px;line-height:1.5}
  .foot .fine{line-height:1.55}

  /* The fourth page has its own product gallery and feature panels. */
  [data-page="gruns"] .hero-art>img{max-width:none;aspect-ratio:1/1;object-position:center 20%}
  [data-page="gruns"] .hero-clin{position:static;width:100%;margin-top:12px;padding:18px;box-shadow:none}
  [data-page="gruns"] .hero-clin p,[data-page="gruns"] .hero-clin small{font-size:18px;line-height:1.45}
  [data-page="gruns"] .hero-clin .cc{width:132px;height:43px;margin:0 0 12px}
  [data-page="gruns"] .hero-tag{font-size:18px;color:var(--ink)}
  [data-page="gruns"] .ratepill{font-size:18px;line-height:1.45}
  [data-page="gruns"] .riskfree{font-size:18px;flex-wrap:wrap;gap:8px}
  [data-page="gruns"] .pdp-gallery{gap:16px}
  [data-page="gruns"] .pdp-main{order:0}
  [data-page="gruns"] .pdp-thumbs{order:1;max-width:none;gap:8px}
  [data-page="gruns"] .pdp-thumbs img{min-height:44px}
  [data-page="gruns"] .pdp-thumbs img:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
  [data-page="gruns"] .pdp-main img{max-width:280px}
  [data-page="gruns"] .chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  [data-page="gruns"] .chip{font-size:18px;min-height:48px;padding:12px 10px}
  [data-page="gruns"] .chip[aria-pressed="true"]{padding:11px 9px}
  [data-page="gruns"] :is(.chosen,.selector .lb small,.plan-head,.plan .why,.assure div,.proof .fig span,.films figcaption,.fineprint,.whycard h3,.tab,.taglist span,.rail div){font-size:18px;line-height:1.45}
  [data-page="gruns"] .tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  [data-page="gruns"] .tab{padding:12px 10px;border-radius:10px;text-transform:none;letter-spacing:0;min-height:52px}
  [data-page="gruns"] .panel{padding:22px 18px}
  [data-page="gruns"] .rail{gap:16px}
  [data-page="gruns"] .rail>div{display:flex;align-items:center;gap:16px;text-align:left;letter-spacing:.02em}
  [data-page="gruns"] .rail .ic{flex:0 0 38px;width:38px;height:38px;margin:0}
  [data-page="gruns"] .films{display:flex;overflow-x:auto;gap:14px;scroll-snap-type:x mandatory;padding-bottom:12px}
  [data-page="gruns"] .films figure{flex:0 0 82%;scroll-snap-align:start}
  [data-page="gruns"] .films img{max-width:none;aspect-ratio:4/5}

  /* The comparison becomes labelled rows, with every category visible. */
  [data-page="gruns"] .vscroll{overflow:visible}
  [data-page="gruns"] .vstable{display:block;min-width:0;background:none;box-shadow:none;overflow:visible}
  [data-page="gruns"] .vstable thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  [data-page="gruns"] .vstable tbody{display:grid;gap:14px}
  [data-page="gruns"] .vstable tr{display:block;background:var(--paper);border:1px solid var(--hair);border-radius:8px;padding:18px}
  [data-page="gruns"] .vstable tbody th{display:block;width:auto;padding:0 0 12px;font-weight:700;font-size:20px;border:0}
  [data-page="gruns"] .vstable td{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0;text-align:right;font-size:18px;line-height:1.4;border-bottom:1px solid var(--hair)}
  [data-page="gruns"] .vstable td::before{content:attr(data-label);text-align:left;max-width:65%;color:var(--ink)}
  [data-page="gruns"] .vstable td:last-child{border:0;padding-bottom:0}
  [data-page="gruns"] .vstable .yes,[data-page="gruns"] .vstable .no{flex:none}
  [data-page="gruns"] .vscroll+.swipe-hint{display:none}
  [data-page="gruns"] .vs h2{color:var(--ink)!important}
  [data-page="gruns"] .joinbar .row{padding:24px 18px}
  [data-page="gruns"] .joinbar .btn{width:100%}
}

@media(max-width:359px){
  .wrap,.ed-body{padding-inline:16px}
  .q[data-q="when"] .opts{grid-template-columns:1fr}
  .q[data-q="when"] .opt{text-align:left;padding-inline:16px}
  .nots .not{padding:10px 8px;gap:6px}
  .nots .not:nth-child(10){grid-column:1/-1}
  .fit-card{padding:16px;grid-template-columns:58px minmax(0,1fr);gap:12px}
  .fit-card>img{width:58px}
  .fit-card .drops{gap:3px}
  .fit-card .drop{width:12px}
  .buybox{padding-inline:16px}
}