/* Audifort Promo Landing — Apple-like, conversion-first, SEO-safe.
   Notes:
   - No horizontal scroll on 360px (overflow-x: clip + safe fixed elements).
   - Mobile typography scales down to ~12px base at 360px.
*/
:root{
  --bg:#F7FAFB;
  --surface:#FFFFFF;
  --surface-2:#F1F6F8;
  --text:#0B1220;
  --muted:#425466;
  --line:rgba(11,18,32,.10);
  --accent-1:#60BDD7;
  --accent-2:#0E5566;
  --accent-3:#D8750C;
  --cta: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  --shadow: 0 10px 30px rgba(11,18,32,.10);
  --radius-xl: 22px;
  --radius-lg: 18px;
  --radius-md: 14px;
  --container: 1120px;
  --fs-base: clamp(12px, 1.2vw + 8px, 16px);
  --fs-small: clamp(11px, 1vw + 7px, 14px);
  --fs-h1: clamp(30px, 3.2vw + 10px, 56px);
  --fs-h2: clamp(22px, 2vw + 10px, 34px);
  --fs-h3: clamp(16px, 1.2vw + 10px, 22px);
  --ease: cubic-bezier(.2,.8,.2,1);
}

*{ box-sizing:border-box; }
html, body{
  margin:0;
  padding:0;
  overflow-x: clip; /* safety net */
  background:
    radial-gradient(900px 520px at 18% -8%, rgba(96,189,215,.22), transparent 60%),
    radial-gradient(900px 520px at 88% 6%, rgba(216,117,12,.14), transparent 58%),
    linear-gradient(180deg, var(--bg) 0%, #F2F7F8 100%);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  font-size: var(--fs-base);
  line-height: 1.55;
}
img{ max-width:100%; height:auto; display:block; }
a{ color: inherit; text-decoration:none; }
button, a{ -webkit-tap-highlight-color: transparent; }
::selection{ background: rgba(96,189,215,.30); }

.skip-link{
  position:absolute;
  left:-999px;
  top:auto;
  width:1px;height:1px;
  overflow:hidden;
}
.skip-link:focus{
  left:12px; top:12px; width:auto; height:auto;
  padding:10px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  z-index: 9999;
  box-shadow: var(--shadow);
}

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}
@media (max-width: 420px){
  .container{ padding: 0 16px; }
}

header{
  position: sticky;
  top:0;
  z-index: 50;
  border-bottom: 1px solid rgba(11,18,32,.06);
  background: rgba(247,250,251,.92);
}
@media (min-width: 900px){
  header{
    background: rgba(247,250,251,.78);
    backdrop-filter: blur(10px);
  }
}
.header-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding: 14px 0;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  min-width: 0;
}
.brand img{ width: 220px; height: 44px; }
.nav{
  display:flex;
  align-items:center;
  gap:14px;
}
.nav a{
  font-weight: 650;
  color: rgba(11,18,32,.82);
  padding: 10px 10px;
  border-radius: 12px;
}
.nav a:hover{ background: rgba(96,189,215,.10); }
.lang{
  display:flex;
  align-items:center;
  gap:10px;
}
.lang select{
  appearance:none;
  border:1px solid rgba(11,18,32,.14);
  background: var(--surface);
  color: var(--text);
  border-radius: 12px;
  padding: 10px 34px 10px 12px;
  font-weight: 650;
  font-size: var(--fs-small);
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(11,18,32,.55) 50%),
    linear-gradient(135deg, rgba(11,18,32,.55) 50%, transparent 50%);
  background-position:
    calc(100% - 16px) calc(50% - 2px),
    calc(100% - 11px) calc(50% - 2px);
  background-size: 5px 5px;
  background-repeat:no-repeat;
}
.lang select:focus{ outline: 3px solid rgba(96,189,215,.35); outline-offset:2px; }

.hamburger{
  display:none;
  border:1px solid rgba(11,18,32,.14);
  background: var(--surface);
  width: 44px;
  height: 44px;
  border-radius: 14px;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.hamburger:focus{ outline: 3px solid rgba(96,189,215,.35); outline-offset:2px; }
.hamburger span{
  display:block;
  width: 18px;
  height: 2px;
  background: rgba(11,18,32,.75);
  position: relative;
}
.hamburger span::before,
.hamburger span::after{
  content:"";
  position:absolute;
  left:0;
  width: 18px;
  height: 2px;
  background: rgba(11,18,32,.75);
}
.hamburger span::before{ top:-6px; }
.hamburger span::after{ top:6px; }

@media (max-width: 900px){
  .nav{ display:none; }
  .lang{ display:none; } /* header CTA replaced by hamburger on mobile */
  .hamburger{ display:flex; }
  .brand img{ width: 190px; height:auto; }
}

.mobile-drawer{
  display:none;
}
body.menu-open .mobile-drawer{
  display:block;
  position: fixed;
  inset: 72px 12px auto 12px;
  max-width: 520px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid rgba(11,18,32,.12);
  border-radius: 18px;
  box-shadow: 0 16px 40px rgba(11,18,32,.14);
  overflow:hidden;
  z-index: 60;
}
.drawer-inner{
  padding: 12px;
  display:grid;
  gap: 8px;
}
.drawer-inner a{
  padding: 12px 12px;
  border-radius: 14px;
  font-weight: 700;
  color: rgba(11,18,32,.88);
  background: rgba(96,189,215,.08);
}
.drawer-inner a:hover{ background: rgba(96,189,215,.12); }
.drawer-inner .drawer-row{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  padding-top:6px;
}
.drawer-inner label{ font-weight: 700; color: rgba(11,18,32,.70); }
.drawer-inner select{ width: 160px; }

.progress{
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:2px;
  background: rgba(96,189,215,.18);
  transform-origin: left;
}
.progress > i{
  display:block;
  height:100%;
  width:100%;
  transform: scaleX(0);
  transform-origin: left;
  background: var(--cta);
}

/* Sections */
main{ display:block; }
.section{
  padding: 84px 0;
  content-visibility: auto;
  contain-intrinsic-size: 800px;
}
@media (max-width: 900px){
  .section{ padding: 64px 0; }
}

.hero{
  padding-top: 48px;
  padding-bottom: 28px;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 34px;
  align-items:center;
}
@media (max-width: 900px){
  .hero-grid{
    grid-template-columns: 1fr;
    text-align:center;
    gap: 26px;
  }
}
.kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(11,18,32,.12);
  background: rgba(255,255,255,.8);
  font-weight: 750;
  color: rgba(11,18,32,.78);
}
.kicker i{
  width: 10px; height: 10px;
  border-radius: 10px;
  background: var(--cta);
  display:inline-block;
}
h1{
  margin: 16px 0 10px;
  font-size: var(--fs-h1);
  line-height: 1.04;
  letter-spacing: -0.025em;
}
.lead{
  color: rgba(11,18,32,.74);
  font-size: clamp(13px, 1.25vw + 8px, 18px);
  max-width: 56ch;
}
@media (max-width: 900px){
  .lead{ margin: 0 auto; }
}
.bullets{
  margin: 18px 0 22px;
  padding:0;
  list-style:none;
  display:grid;
  gap: 10px;
}
.bullets li{
  display:flex;
  align-items:flex-start;
  gap: 10px;
  color: rgba(11,18,32,.80);
  font-weight: 650;
}
.bullets li svg{ flex:0 0 18px; margin-top: 2px; }
@media (max-width: 900px){
  .bullets{ justify-content:center; }
  .bullets li{ justify-content:center; }
}
.cta-row{
  display:flex;
  gap: 12px;
  align-items:center;
  flex-wrap: wrap;
}
@media (max-width: 900px){
  .cta-row{ justify-content:center; }
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  border-radius: 16px;
  padding: 12px 16px;
  font-weight: 800;
  border: 1px solid rgba(11,18,32,.14);
  background: var(--surface);
  box-shadow: 0 12px 26px rgba(11,18,32,.10);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.btn:hover{ transform: translateY(-1px); box-shadow: 0 18px 40px rgba(11,18,32,.14); border-color: rgba(96,189,215,.35); }
.btn:focus{ outline: 3px solid rgba(96,189,215,.35); outline-offset:2px; }
.btn.primary{
  border: none;
  background: var(--cta);
  color: #04161F;
  box-shadow: 0 18px 46px rgba(14,85,102,.25);
}
.btn.primary:hover{ box-shadow: 0 26px 64px rgba(14,85,102,.30); }
.btn.small{ padding: 10px 12px; border-radius: 14px; font-size: var(--fs-small); box-shadow:none; }

.hero-media{
  position:relative;
  border-radius: var(--radius-xl);
  background: radial-gradient(1200px 600px at 20% 20%, rgba(96,189,215,.30), transparent 55%),
              radial-gradient(900px 500px at 70% 40%, rgba(216,117,12,.22), transparent 55%),
              linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.3));
  border: 1px solid rgba(11,18,32,.10);
  overflow:hidden;
  box-shadow: var(--shadow);
  min-height: 420px;
}
.hero-media .ring{
  position:absolute;
  inset: -80px -120px auto auto;
  width: 520px;
  height: 520px;
  border-radius: 999px;
  border: 1px solid rgba(96,189,215,.24);
  filter: blur(.2px);
}
.hero-media .ring::before,
.hero-media .ring::after{
  content:"";
  position:absolute;
  inset: 72px;
  border-radius: inherit;
  border: 1px solid rgba(96,189,215,.18);
}
.hero-media .ring::after{
  inset: 142px;
  border-color: rgba(96,189,215,.14);
}
.hero-media .shot{
  position:absolute;
  left: 50%;
  top: 48%;
  transform: translate(-50%, -50%);
  width: min(420px, 72%);
  pointer-events: none;
}
.hero-media .shot img{
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  object-position: center;
}
@media (max-width: 900px){
  .hero-media{
    min-height: 360px;
    max-width: 560px;
    margin: 0 auto;
  }
  .hero-media .shot{
    top: 46%;
    width: min(360px, 78%);
  }
}

/* Social proof row */
.pills{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin-top: 18px;
}
.pills span{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.80);
  border: 1px solid rgba(11,18,32,.10);
  color: rgba(11,18,32,.72);
  font-weight: 700;
  font-size: var(--fs-small);
}
.pills svg{ width: 16px; height: 16px; }

/* Experience scrollytelling */
.experience{
  background: linear-gradient(180deg, rgba(241,246,248,.0), rgba(241,246,248,.75), rgba(241,246,248,.0));
}
.ex-grid{
  display:grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 26px;
  align-items:start;
}
@media (max-width: 900px){
  .ex-grid{ grid-template-columns: 1fr; }
}
.sticky-media{
  position: sticky;
  top: 88px;
  border-radius: var(--radius-xl);
  background: radial-gradient(800px 500px at 25% 15%, rgba(96,189,215,.24), transparent 55%),
              radial-gradient(800px 500px at 75% 40%, rgba(14,85,102,.14), transparent 55%),
              #fff;
  border:1px solid rgba(11,18,32,.10);
  box-shadow: var(--shadow);
  overflow:hidden;
  min-height: 420px;
}
@media (max-width: 900px){
  .sticky-media{ position:relative; top:auto; min-height: 340px; }
}
.media-inner{
  padding: 18px;
  display:grid;
  gap: 12px;
}
.media-badge{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}
.media-badge strong{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  font-size: var(--fs-small);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: rgba(11,18,32,.70);
}
.dot{
  width: 10px; height: 10px; border-radius: 999px;
  background: var(--cta);
}
.media-stage{
  display:grid;
  place-items:center;
  padding: 10px 8px 0;
}
.media-stage img{
  width: min(360px, 78%);
  filter: drop-shadow(0 30px 70px rgba(11,18,32,.22));
}
.media-caption{
  color: rgba(11,18,32,.72);
  font-weight: 650;
  font-size: var(--fs-small);
}
.steps{
  display:grid;
  gap: 12px;
}
.step{
  border-radius: var(--radius-lg);
  border: 1px solid rgba(11,18,32,.10);
  background: rgba(255,255,255,.72);
  padding: 14px 14px;
  transition: transform .22s var(--ease), border-color .22s var(--ease), background .22s var(--ease);
}
.step h3{
  margin: 0 0 6px;
  font-size: var(--fs-h3);
  letter-spacing:-0.01em;
}
.step p{
  margin:0;
  color: rgba(11,18,32,.70);
}
.step.is-active{
  border-color: rgba(96,189,215,.40);
  background: rgba(96,189,215,.10);
  transform: translateY(-1px);
}

/* Cards / grids */
h2{
  margin:0 0 10px;
  font-size: var(--fs-h2);
  letter-spacing:-0.02em;
  line-height: 1.15;
}
.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 14px;
  margin-bottom: 22px;
}
.section-head p{
  margin: 0;
  color: rgba(11,18,32,.72);
  max-width: 66ch;
}
@media (max-width: 900px){
  .section-head{ flex-direction:column; align-items:center; text-align:center; }
}

.grid-3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 900px){
  .grid-3{ grid-template-columns: 1fr; }
}

.card{
  border-radius: var(--radius-xl);
  border: 1px solid rgba(11,18,32,.10);
  background: var(--surface);
  box-shadow: 0 14px 40px rgba(11,18,32,.08);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-width:0;
}
.card .pad{ padding: 18px; }
.card h3{ margin: 0 0 6px; font-size: var(--fs-h3); letter-spacing:-0.01em; }
.card p{ margin:0; color: rgba(11,18,32,.72); }
.card .media{
  background: rgba(241,246,248,.8);
  border-bottom: 1px solid rgba(11,18,32,.08);
  display:grid;
  place-items:center;
  padding: 14px;
}
.card .media img{ width: 92px; height: 92px; border-radius: 18px; object-fit: cover; border:1px solid rgba(11,18,32,.10); }
.card .cta{
  padding: 18px;
  padding-top: 0;
  margin-top: auto; /* baseline align */
}
.card .cta .btn{ width:100%; box-shadow:none; }

/* How-to split */
.split{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 18px;
  align-items:start;
}
@media (max-width: 900px){
  .split{ grid-template-columns: 1fr; text-align:center; }
}
.figure{
  border-radius: var(--radius-xl);
  overflow:hidden;
  border: 1px solid rgba(11,18,32,.10);
  background: #fff;
  box-shadow: var(--shadow);
}
.figure .cap{
  padding: 10px 12px;
  font-size: var(--fs-small);
  color: rgba(11,18,32,.70);
  border-top: 1px solid rgba(11,18,32,.08);
  background: rgba(241,246,248,.75);
}

/* Pricing */
.pricing{
  background: radial-gradient(900px 450px at 20% 20%, rgba(96,189,215,.18), transparent 60%),
              radial-gradient(700px 400px at 80% 30%, rgba(216,117,12,.12), transparent 60%);
}
.price-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 900px){
  .price-grid{ grid-template-columns: 1fr; }
}
.price-card{
  display:flex;
  flex-direction:column;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(11,18,32,.10);
  background: rgba(255,255,255,.84);
  box-shadow: 0 18px 48px rgba(11,18,32,.10);
  overflow:hidden;
  min-width:0;
}
.price-card .top{
  padding: 18px 18px 10px;
  border-bottom: 1px solid rgba(11,18,32,.08);
  background: rgba(241,246,248,.7);
}
.badge{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 800;
  font-size: var(--fs-small);
  border: 1px solid rgba(11,18,32,.10);
  background: rgba(255,255,255,.75);
}
.badge.best{ background: rgba(96,189,215,.16); border-color: rgba(96,189,215,.35); }
.badge.pop{ background: rgba(216,117,12,.14); border-color: rgba(216,117,12,.28); }
.price-card h3{
  margin: 10px 0 2px;
  font-size: clamp(18px, 1.4vw + 12px, 24px);
  letter-spacing:-0.01em;
}
.price-card .sub{
  margin: 0;
  color: rgba(11,18,32,.70);
  font-weight: 650;
  font-size: var(--fs-small);
}
.price-card .mid{
  padding: 16px 18px;
  display:grid;
  gap: 10px;
}
.price-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap: 10px;
}
.price{
  font-size: clamp(26px, 2.4vw + 10px, 40px);
  font-weight: 900;
  letter-spacing:-0.03em;
}
.per{
  color: rgba(11,18,32,.70);
  font-weight: 750;
}
.kv{
  display:grid;
  gap:6px;
  color: rgba(11,18,32,.72);
  font-weight: 650;
  font-size: var(--fs-small);
}
.kv b{ color: rgba(11,18,32,.86); }
.price-card .img{
  display:grid;
  place-items:center;
  padding: 10px 18px 0;
}
.price-card .img img{
  width: min(320px, 86%);
  filter: drop-shadow(0 28px 70px rgba(11,18,32,.20));
}
.price-card .bottom{
  padding: 18px;
  padding-top: 10px;
  display:grid;
  gap: 10px;
  margin-top:auto;
}
.price-card .fine{
  color: rgba(11,18,32,.60);
  font-size: var(--fs-small);
}
.price-card .btn{ width:100%; margin-top:auto; }
.price-card.is-featured{
  border-color: rgba(96,189,215,.45);
  box-shadow: 0 26px 70px rgba(14,85,102,.18);
}

/* Guarantee */
.guarantee{
  display:grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 18px;
  align-items:center;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(11,18,32,.10);
  border-radius: var(--radius-xl);
  padding: 18px;
  box-shadow: var(--shadow);
}
@media (max-width: 900px){
  .guarantee{ grid-template-columns: 1fr; text-align:center; }
  .guarantee img{ margin: 0 auto; }
}
.guarantee img{ width: 160px; height: auto; }
.guarantee p{ margin:0; color: rgba(11,18,32,.72); }

/* FAQ */
.faq{
  border-radius: var(--radius-xl);
  border: 1px solid rgba(11,18,32,.10);
  background: rgba(255,255,255,.85);
  box-shadow: 0 14px 44px rgba(11,18,32,.08);
  overflow:hidden;
}
.faq-item{ border-top: 1px solid rgba(11,18,32,.08); }
.faq-item:first-child{ border-top: none; }
.faq-q{
  width:100%;
  text-align:left;
  padding: 16px 16px;
  background: transparent;
  border: none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  font-weight: 850;
  color: rgba(11,18,32,.88);
  font-size: clamp(14px, 1.1vw + 10px, 18px);
}
.faq-q:focus{ outline: 3px solid rgba(96,189,215,.35); outline-offset: -3px; }
.faq-q i{
  width: 28px; height: 28px;
  border-radius: 999px;
  background: rgba(96,189,215,.14);
  border: 1px solid rgba(96,189,215,.25);
  position: relative;
  flex:0 0 28px;
}
.faq-q i::before,
.faq-q i::after{
  content:"";
  position:absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 2px;
  background: rgba(11,18,32,.75);
  transform: translate(-50%,-50%);
}
.faq-q i::after{
  transform: translate(-50%,-50%) rotate(90deg);
  transition: transform .18s var(--ease), opacity .18s var(--ease);
}
.faq-item[open] .faq-q i::after{ transform: translate(-50%,-50%) rotate(90deg) scaleX(0.1); opacity:0.05; }
.faq-a{
  padding: 0 16px 16px;
  color: rgba(11,18,32,.72);
}
.faq-a p{ margin:0; }

/* Footer */
footer{
  padding: 38px 0 88px; /* space for mobile sticky */
  border-top: 1px solid rgba(11,18,32,.08);
  background: rgba(241,246,248,.65);
}
.footer-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 18px;
}
@media (max-width: 900px){
  footer{ padding-bottom: 120px; }
  .footer-grid{ grid-template-columns: 1fr; text-align:center; }
}
.footer-links{
  display:flex;
  flex-wrap:wrap;
  gap: 10px 14px;
}
.footer-links a{
  color: rgba(11,18,32,.72);
  font-weight: 750;
}
.footer-links a:hover{ color: rgba(11,18,32,.92); text-decoration: underline; }
.small{
  font-size: var(--fs-small);
  color: rgba(11,18,32,.68);
}

/* Mobile sticky CTA (inset + max-width, no transforms) */
.sticky-cta{
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  max-width: 520px;
  margin: 0 auto;
  z-index: 55;
  display:none;
}
@media (max-width: 900px){
  .sticky-cta{ display:block; }
}
.sticky-cta .bar{
  display:flex;
  gap: 10px;
  align-items:center;
  justify-content:space-between;
  padding: 10px 10px;
  border-radius: 18px;
  border: 1px solid rgba(11,18,32,.14);
  background: rgba(255,255,255,.92);
  box-shadow: 0 16px 44px rgba(11,18,32,.16);
}
.sticky-cta .bar .txt{
  display:grid;
  gap: 2px;
  min-width:0;
}
.sticky-cta .bar .txt b{
  font-size: 13px;
  letter-spacing:-0.01em;
}
.sticky-cta .bar .txt span{
  font-size: 12px;
  color: rgba(11,18,32,.62);
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
  max-width: 34ch;
}
.sticky-cta .bar .btn{ padding: 10px 12px; border-radius: 14px; font-size: 13px; white-space: nowrap; }

/* Reveal animation */
[data-reveal]{
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: no-preference){
  [data-reveal]{
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
    will-change: transform, opacity;
  }
  [data-reveal].is-revealed{
    opacity: 1;
    transform: translateY(0);
  }
}

/* Utility */
.center{ text-align:center; }
.desktop-left{ text-align:left; }
@media (max-width: 900px){
  .desktop-left{ text-align:center; }
}
.visually-hidden{
  position:absolute; width:1px; height:1px;
  margin:-1px; border:0; padding:0;
  white-space:nowrap; clip-path: inset(50%); clip: rect(0 0 0 0);
  overflow:hidden;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}


/* Label key ingredients list */
.label-keys{margin:12px 0 0; padding-left:18px; display:grid; grid-template-columns: 1fr 1fr; gap:8px 18px;}
.label-keys li{color: rgba(11,18,32,.78); font-weight:650;}
@media (max-width: 520px){.label-keys{grid-template-columns:1fr;}}