/* Three upper cards and two wide lower cards, following the supplied reference. */
.why.section{background:#f8f7f8;padding-top:64px;padding-bottom:64px}
.why h2{max-width:none;font-size:clamp(27px,calc(3.8 * var(--layout-unit)),54px);letter-spacing:-.055em;line-height:1.18}
.why h2 em{display:inline-block;white-space:nowrap}
.why .benefits-lead{margin:12px 0 0;font:23px/1.35 Arial,Helvetica,sans-serif;color:#625775}
.why .benefits{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;margin-top:24px;align-items:stretch}
.why .benefit{position:relative;grid-column:span 2;min-height:380px;padding:22px 20px;border:0;border-radius:12px;isolation:isolate;overflow:hidden;background:linear-gradient(125deg,#7124da,#6524d6);color:white}
.why .benefit:nth-child(2n){background:#fff;color:#000}
.why .benefit:nth-child(n+4){grid-column:span 3;min-height:248px}
.why .benefit:last-child{background:linear-gradient(120deg,#d1fa33,#bdf600);color:#000}
.why .benefit::after{display:none}
.benefit-copy{position:relative;z-index:2;width:61%}
.benefit-number{display:inline-flex;align-items:center;justify-content:center;padding:5px 16px;margin-bottom:9px;border-radius:40px;background:var(--acid);color:#000;font:700 16px/1 Arial,Helvetica,sans-serif}
.benefit-support .benefit-number{background:#f4ffd3}
.why .benefit h3{min-height:0;margin:0 0 14px;font-size:25px;line-height:1.12;letter-spacing:-.035em;overflow-wrap:normal}
@container page (min-width:1101px) and (max-width:1340px){.why .benefit h3{font-size:clamp(19px,calc(1.7 * var(--layout-unit)),23px)}}
.why .benefit p{margin:0;font:16px/1.35 Arial,Helvetica,sans-serif;max-width:none}
.benefit-tags{position:relative;z-index:3;display:flex;flex-direction:column;align-items:flex-start;gap:5px;list-style:none;margin:18px 0 0;padding:0;width:max-content;max-width:100%}
.benefit-tags li{display:flex;align-items:center;gap:8.1px;min-height:28.8px;padding:4.5px 11.7px;border-radius:25.2px;background:#fbfafb;color:#101010;font:10.8px/1.3 Arial,Helvetica,sans-serif;max-width:100%}
.benefit-brand .benefit-tags li,.benefit-ingredients .benefit-tags li{background:#f1eff1}
.benefit-tags li span{flex:none;color:var(--purple);font:700 20.7px/1 Arial,Helvetica,sans-serif}
.benefit-tags svg{flex:none;width:19.8px;height:19.8px;fill:none;stroke:var(--purple);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.benefit-art{position:absolute;inset:0;z-index:1;pointer-events:none}
.why .benefit img{position:absolute;display:block;max-width:none;width:auto;height:auto;object-fit:contain}
.why .benefit-product img{height:365px;right:8px;bottom:-23px;transform:rotate(13deg);filter:drop-shadow(0 9px 8px #0003)}
.why .benefit-brand img{width:51.7%;right:4px;bottom:29px;filter:drop-shadow(0 8px 6px #0002)}
.why .benefit-production img{height:330px;right:-27px;bottom:-26px}
.benefit-note{position:absolute;z-index:2;right:19px;top:26px;transform:rotate(-13deg);font:italic 700 17px/1.2 'Anonymous Pro',monospace;text-transform:uppercase;text-align:center;color:inherit;pointer-events:none}
.benefit-brand .benefit-note,.benefit-ingredients .benefit-note{color:var(--purple)}
.benefit-product .benefit-note{top:auto;bottom:16px;left:24px;right:auto;font-size:19px}
.why .benefit-ingredients .benefit-copy{width:45%}
.why .benefit-ingredients img{width:43%;right:-9px;bottom:5px}
.benefit-ingredients .benefit-note{top:42px;right:32%;font-size:14px;max-width:130px}
.why .benefit:nth-child(n+4) .benefit-tags{flex-direction:row;flex-wrap:wrap;margin-top:12px}
.why .benefit-support .benefit-copy{width:37%}
.why .benefit-support img{width:40.96%;right:45px;top:auto;bottom:78px}
@container page (min-width:1101px){.why .benefit-support img{width:min(40.96%,calc(63% - 156px));right:120px}}
.benefit-support .benefit-note{top:17px;right:29%;color:#000}
@container page (min-width:1101px){.benefit-support .benefit-note{left:calc(37% + 32px);right:auto}}
.benefit-stamp{position:absolute;z-index:2;right:13px;bottom:62px;display:grid;justify-items:center;align-content:center;width:91px;height:91px;clip-path:polygon(50% 0%,60% 5%,72% 3%,79% 13%,90% 17%,93% 30%,100% 40%,96% 52%,100% 64%,90% 73%,87% 85%,74% 89%,64% 98%,51% 95%,40% 100%,30% 92%,18% 89%,13% 77%,4% 69%,6% 55%,0% 44%,8% 33%,10% 20%,23% 15%,33% 4%,43% 7%);background:#000;color:#fff;transform:rotate(-9deg);text-align:center;text-transform:uppercase;font:700 11px/1.1 Arial,Helvetica,sans-serif}
.benefit-stamp b{font-size:33px;line-height:.8;color:var(--acid);margin-bottom:5px}
@container page (max-width:1100px){
  .why .benefits{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Copy owns its row. Pictures and badges share a separate, clipped row:
     changing orientation or wrapping the copy cannot move art over the text. */
  .why .benefit{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(330px,1fr);gap:18px;grid-column:auto;min-height:0}
  .why .benefit:nth-child(n+4){grid-column:auto;min-height:0}
  .why .benefit:last-child{grid-column:1/-1;min-height:0}
  .benefit-copy,.why .benefit-ingredients .benefit-copy,.why .benefit-support .benefit-copy{grid-row:1;grid-column:1;width:100%;max-width:none}
  .why .benefit .benefit-tags{grid-row:2;grid-column:1;align-self:start;margin:0;max-width:100%}
  .benefit-art{position:relative;grid-row:2;grid-column:1;inset:auto;min-width:0;min-height:330px;overflow:hidden}
  .why .benefit-product .benefit-art,.why .benefit-production .benefit-art{overflow:visible}
  .benefit-note{display:none}
  .why .benefit-product img{height:330px;right:0;bottom:-25px}
  .why .benefit-brand img{width:min(60%,220px);bottom:20px;right:0}
  .why .benefit-production img{width:auto;height:350px;bottom:-20px;right:-20px}
  .why .benefit-ingredients img{width:min(90%,350px);bottom:-25px;right:-20px}
  .benefit-ingredients .benefit-note{top:auto;bottom:110px;right:15px}
  .why .benefit-ingredients .benefit-tags{flex-direction:column}
  .why .benefit-support img{width:min(48%,240px);bottom:40px;right:12px}
}
@container page (max-width:650px){
  .why.section{padding-top:40px;padding-bottom:40px}
  .why .benefits-lead{font-size:18px}
  .why .benefits{grid-template-columns:minmax(0,1fr);gap:16px}
  .why .benefit,.why .benefit:nth-child(n+4),.why .benefit:last-child{grid-column:auto;min-height:520px;padding:22px}
  .why .benefit h3{font-size:25px}
  .why .benefit p{font-size:17px}
  .benefit-copy,.why .benefit-ingredients .benefit-copy,.why .benefit-support .benefit-copy{width:100%;max-width:320px}
  .benefit-copy p{padding-right:0}
  .benefit-tags,.why .benefit:nth-child(n+4) .benefit-tags{flex-direction:column;margin-top:18px;gap:7px;max-width:70%}
  .benefit-tags li{font-size:10.8px}
  .why .benefit-product img{height:365px;bottom:-38px;right:14px}
  .why .benefit-brand img{width:min(55%,210px);bottom:105px;right:-5px}
  .why .benefit-production img{width:auto;height:365px;bottom:-25px;right:-45px}
  .why .benefit-ingredients img{width:min(90%,360px);bottom:-28px;right:-26px}
  .why .benefit-support img{width:min(48%,190px);top:auto;bottom:90px;right:12px}
  .benefit-note{display:none}
  .benefit-stamp{width:73px;height:73px;bottom:20px;right:16px;font-size:9px}
  .benefit-stamp b{font-size:25px}
}
/* The support illustration and seal need their own tracks, not an overlay.
   Its shorter visual row also removes the large empty landscape gap. */
@container page (max-width:1100px){
  .why .benefit-support:last-child{grid-template-columns:minmax(0,1fr) 91px;grid-template-rows:auto auto 190px;min-height:0;gap:14px}
  .why .benefit-support .benefit-copy{grid-column:1/-1;grid-row:1}
  .why .benefit-support .benefit-tags{grid-column:1/-1;grid-row:2}
  .why .benefit-support .benefit-art{grid-column:1;grid-row:3;min-height:0;height:190px}
  .why .benefit-support img{width:min(100%,240px);height:auto;right:0;bottom:0;top:auto}
  .why .benefit-support .benefit-stamp{position:relative;grid-column:2;grid-row:3;align-self:end;justify-self:center;right:auto;bottom:auto;margin-bottom:10px;transform:none}
}
@container page (max-width:650px){
  .why .benefit-support:last-child{grid-template-columns:minmax(0,1fr) 73px}
  .why .benefit-support img{width:min(100%,190px)}
}