:root{
  --navy:#0b2a59;
  --muted:#65789a;
  --green:#0b8e4f;
  --green-dark:#087642;
  --soft:#f2fbf6;
  --border:#e2e9f1;
  --surface:#ffffff;
  --page:#f8fafc;
  --shadow:0 18px 48px rgba(20,48,87,.10);
  --container:1380px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-width:320px;
  overflow-x:hidden;
  color:var(--navy);
  background:var(--page);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
button,input{font:inherit}
button{touch-action:manipulation}
img{display:block;max-width:100%;height:auto}
.container{
  width:min(var(--container),calc(100% - 56px));
  margin-inline:auto;
}

.header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,255,255,.95);
  border-bottom:1px solid #e9eef4;
  backdrop-filter:blur(18px);
}
.header__inner{
  min-height:88px;
  display:flex;
  align-items:center;
  gap:28px;
}
.brand{
  display:flex;
  align-items:center;
  flex:0 1 auto;
  min-width:0;
  color:inherit;
  text-decoration:none;
}
.brand__logo{
  width:48px;
  height:52px;
  flex:0 0 auto;
  object-fit:contain;
  margin-right:12px;
}
.brand__name{
  white-space:nowrap;
  font-size:24px;
  font-weight:800;
  letter-spacing:-.035em;
}
.brand__tagline{
  margin-left:18px;
  padding-left:18px;
  border-left:1px solid #c9d3df;
  color:var(--muted);
  font-size:13px;
  line-height:1.4;
  white-space:nowrap;
}
.nav{
  display:flex;
  align-items:center;
  gap:30px;
  margin-left:auto;
}
.nav a{
  white-space:nowrap;
  color:var(--navy);
  text-decoration:none;
  font-size:15px;
  font-weight:650;
}
.nav a:hover{color:var(--green)}

.button{
  min-height:50px;
  border-radius:12px;
  padding:0 24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:28px;
  border:0;
  font-weight:750;
  cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
.button:focus-visible,.answer:focus-visible,.menu-button:focus-visible,
.telegram-help__toggle:focus-visible{
  outline:3px solid rgba(11,142,79,.28);
  outline-offset:3px;
}
.button--outline{
  background:#fff;
  border:1.5px solid var(--green);
  color:var(--green);
}
.button--outline:hover{background:var(--soft)}
.button--primary{
  color:#fff;
  background:linear-gradient(180deg,#109b56,var(--green-dark));
  box-shadow:0 13px 28px rgba(11,142,79,.20);
}
.button--primary:hover{
  transform:translateY(-1px);
  box-shadow:0 17px 34px rgba(11,142,79,.24);
}
.header__cta{white-space:nowrap}
.menu-button{
  display:none;
  width:46px;
  height:46px;
  border:0;
  background:none;
  padding:8px;
  cursor:pointer;
}
.menu-button span{
  display:block;
  height:3px;
  border-radius:99px;
  background:var(--navy);
  margin:6px 0;
}

.hero{
  background:linear-gradient(180deg,#fff 0%,#f8fbfd 100%);
  overflow:hidden;
}
.hero__layout{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(520px,.92fr);
  grid-template-areas:
    "content quiz"
    "visual quiz"
    "trust quiz";
  column-gap:44px;
  row-gap:14px;
  padding-top:48px;
  padding-bottom:30px;
}
.hero__content{
  grid-area:content;
  position:relative;
  z-index:4;
  max-width:660px;
}
.hero h1{
  margin:0 0 20px;
  max-width:680px;
  font-size:clamp(42px,3.75vw,56px);
  line-height:1.08;
  letter-spacing:-.048em;
}
.hero__lead{
  margin:0 0 24px;
  max-width:570px;
  color:var(--muted);
  font-size:19px;
  line-height:1.52;
}
.hero__button{
  width:305px;
  max-width:100%;
  font-size:19px;
  justify-content:space-between;
}
.benefits{
  display:grid;
  gap:12px;
  margin-top:25px;
}
.benefit{
  display:flex;
  align-items:center;
  gap:13px;
  min-height:52px;
}
.benefit img{
  width:46px;
  height:46px;
  flex:0 0 46px;
  object-fit:contain;
  border-radius:50%;
  padding:0;
  background:#fff;
  border:1px solid #edf2f6;
  box-shadow:0 4px 12px rgba(20,48,87,.06);
}
.benefit strong,.benefit span{display:block}
.benefit strong{font-size:16px;margin-bottom:3px}
.benefit span{color:var(--muted);font-size:14px;line-height:1.35}

.hero__visual{
  grid-area:visual;
  position:relative;
  z-index:2;
  width:min(520px,88%);
  justify-self:center;
  pointer-events:none;
}
.hero__visual img{
  width:100%;
  height:auto;
  aspect-ratio:960/695;
  object-fit:contain;
  mix-blend-mode:multiply;
}

.trust-card{
  grid-area:trust;
  z-index:5;
  width:min(430px,100%);
  display:flex;
  align-items:center;
  gap:13px;
  padding:14px 17px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:0 9px 24px rgba(20,48,87,.06);
}
.trust-card img{
  width:44px;
  height:44px;
  flex:0 0 44px;
  object-fit:contain;
  border-radius:50%;
  padding:0;
  background:#fff;
  border:1px solid #edf2f6;
}
.trust-card strong,.trust-card span{display:block}
.trust-card strong{font-size:14px;margin-bottom:4px}
.trust-card span{color:var(--muted);font-size:12px;line-height:1.4}

.quiz{
  grid-area:quiz;
  position:relative;
  z-index:6;
  align-self:start;
  width:100%;
  min-height:610px;
  padding:28px 30px 18px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:20px;
  box-shadow:var(--shadow);
}
.quiz__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  font-size:15px;
  font-weight:750;
}
.quiz__time{
  display:flex;
  align-items:center;
  gap:7px;
  white-space:nowrap;
}
.quiz__time img{
  width:21px;
  height:21px;
  object-fit:contain;
}
.progress{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:8px;
  margin:17px 0 25px;
}
.progress span{
  height:6px;
  border-radius:99px;
  background:#e5ebf1;
  transition:.25s;
}
.progress span.is-active{background:var(--green)}
.quiz h2,.lead-form h2,.success h2{
  margin:0 0 19px;
  font-size:clamp(29px,2.35vw,35px);
  line-height:1.15;
  letter-spacing:-.038em;
}
.answers{
  display:grid;
  gap:9px;
}
.answer{
  width:100%;
  min-height:68px;
  padding:8px 14px;
  display:flex;
  align-items:center;
  gap:13px;
  color:var(--navy);
  background:#fff;
  text-align:left;
  border:1px solid #dfe7ef;
  border-radius:13px;
  cursor:pointer;
  transition:.18s ease;
}
.answer:hover{
  border-color:#79bd99;
  background:#f9fcfa;
  transform:translateX(2px);
}
.answer img{
  width:48px;
  height:48px;
  flex:0 0 48px;
  object-fit:contain;
  border-radius:50%;
  padding:0;
  background:#fff;
  border:1px solid #edf2f6;
  box-shadow:0 4px 12px rgba(20,48,87,.06);
}
.answer__label{
  flex:1;
  min-width:0;
  font-size:16px;
  font-weight:650;
  line-height:1.3;
}
.answer__arrow{
  flex:0 0 auto;
  font-size:28px;
  line-height:1;
}
.quiz__footer{margin-top:10px}
.quiz__back{
  border:0;
  background:none;
  color:var(--muted);
  font-size:14px;
  font-weight:700;
  padding:5px 0 9px;
  cursor:pointer;
}
.quiz__privacy{
  min-height:45px;
  padding-top:12px;
  border-top:1px solid #e9eef3;
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--muted);
  font-size:12px;
  line-height:1.35;
}
.quiz__privacy img,.lead-form__privacy img{
  width:23px;
  height:23px;
  flex:0 0 23px;
  object-fit:contain;
}

.lead-form,.success{
  padding:3px 10px;
  text-align:center;
}
.lead-form__check{
  width:68px;
  height:68px;
  margin:0 auto 19px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:var(--green);
  background:var(--soft);
  font-size:36px;
  font-weight:800;
}
.lead-form p,.success p{
  max-width:510px;
  margin:0 auto 21px;
  color:var(--muted);
  font-size:15px;
  line-height:1.5;
}
.lead-form form{
  display:grid;
  gap:13px;
  text-align:left;
}
.lead-form label{
  display:grid;
  gap:7px;
  color:var(--muted);
  font-size:13px;
}
.lead-form input{
  width:100%;
  height:58px;
  border:1px solid var(--border);
  border-radius:13px;
  padding:0 15px;
  color:var(--navy);
  outline:0;
  background:#fff;
}
.lead-form input:focus{
  border-color:var(--green);
  box-shadow:0 0 0 3px rgba(11,142,79,.1);
}
.lead-form__submit{
  width:100%;
  font-size:17px;
  margin-top:1px;
}
#form-error{
  margin:10px 0 0;
  color:#b42318;
  font-size:14px;
  font-weight:600;
  text-align:center;
}
.telegram-help{
  margin-top:-1px;
  padding:12px 14px;
  border:1px solid #dce9e2;
  border-radius:12px;
  background:#f7fcf9;
}
.telegram-help__toggle{
  width:100%;
  padding:0;
  border:0;
  background:none;
  color:var(--green);
  text-align:left;
  font-weight:750;
  cursor:pointer;
}
.telegram-help__toggle::after{
  content:"＋";
  float:right;
}
.telegram-help__toggle[aria-expanded="true"]::after{content:"−"}
.telegram-help__content{
  display:grid;
  gap:6px;
  padding-top:10px;
  color:var(--muted);
  font-size:12px;
  line-height:1.45;
}
.telegram-help__content strong{color:var(--navy)}
.lead-form__privacy{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top:1px;
  color:var(--muted);
  font-size:11px;
  line-height:1.35;
  text-align:center;
}
.success{padding-top:62px}
.success .button{margin-top:4px}

.process{
  padding-bottom:42px;
  background:#f8fbfd;
}
.process__panel{
  padding:22px 28px 27px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:0 9px 25px rgba(20,48,87,.055);
}
.process h2{
  margin:0 0 21px;
  text-align:center;
  font-size:30px;
  letter-spacing:-.03em;
}
.process__grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:22px;
}
.process-item{
  display:flex;
  align-items:flex-start;
  gap:12px;
  min-width:0;
}
.process-item__icon{
  position:relative;
  flex:0 0 auto;
}
.process-item__icon img{
  width:50px;
  height:50px;
  object-fit:contain;
  border-radius:50%;
  padding:0;
  background:#fff;
  border:1px solid #edf2f6;
  box-shadow:0 4px 12px rgba(20,48,87,.06);
}
.process-item__icon span{
  position:absolute;
  right:-4px;
  bottom:-4px;
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--green);
  color:#fff;
  font-size:12px;
  font-weight:800;
}
.process-item strong{
  display:block;
  font-size:14px;
  line-height:1.35;
}
.process-item p{
  margin:5px 0 0;
  color:var(--muted);
  font-size:12px;
  line-height:1.42;
}

.footer{
  padding:30px 0 20px;
  background:#fff;
  border-top:1px solid var(--border);
}
.footer__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.footer__inner strong,.footer__inner span{display:block}
.footer__inner strong{font-size:23px;margin-bottom:5px}
.footer__inner span{color:var(--muted);font-size:14px}
.footer__legal{
  margin-top:18px;
  color:#8897ad;
  font-size:11px;
}

[hidden]{display:none!important}

/* Tablet */
@media (max-width:1180px){
  .container{width:min(940px,calc(100% - 40px))}
  .brand__tagline{display:none}
  .nav{
    display:none;
    position:absolute;
    top:78px;
    left:20px;
    right:20px;
    margin:0;
    padding:17px;
    flex-direction:column;
    align-items:flex-start;
    background:#fff;
    border:1px solid var(--border);
    border-radius:16px;
    box-shadow:var(--shadow);
  }
  .nav.is-open{display:flex}
  .header__cta{display:none}
  .menu-button{display:block;margin-left:auto}
  .hero__layout{
    grid-template-columns:minmax(0,1fr) minmax(440px,.95fr);
    grid-template-areas:
      "content quiz"
      "visual quiz"
      "trust quiz";
    column-gap:28px;
    padding-top:34px;
  }
  .hero h1{font-size:43px}
  .hero__lead{font-size:17px}
  .hero__visual{width:min(470px,96%)}
  .quiz{padding:25px 23px 17px}
  .answer{min-height:65px}
  .process__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Mobile */
@media (max-width:760px){
  .container{width:calc(100% - 28px)}
  .header__inner{min-height:74px}
  .brand__logo{width:39px;height:42px;margin-right:9px}
  .brand__name{font-size:19px}
  .menu-button{width:44px;height:44px}
  .nav{top:68px;left:14px;right:14px}

  .hero__layout{
    display:grid;
    grid-template-columns:1fr;
    grid-template-areas:
      "content"
      "visual"
      "trust"
      "quiz";
    gap:18px;
    padding-top:24px;
    padding-bottom:23px;
  }
  .hero__content{max-width:none}
  .hero h1{
    margin-bottom:16px;
    font-size:clamp(34px,10.2vw,42px);
    line-height:1.11;
  }
  .hero__lead{
    margin-bottom:19px;
    font-size:16px;
    line-height:1.48;
  }
  .hero__button{
    width:100%;
    min-height:60px;
    font-size:18px;
  }
  .benefits{
    gap:9px;
    margin-top:18px;
  }
  .benefit{
    min-height:57px;
    gap:11px;
  }
  .benefit img{
    width:48px;
    height:48px;
    flex-basis:48px;
    padding:8px;
  }
  .benefit strong{font-size:14px}
  .benefit span{font-size:12px}

  .hero__visual{
    width:min(560px,100%);
    margin:0 auto;
  }
  .hero__visual img{
    width:100%;
    height:auto;
    aspect-ratio:960/695;
    object-fit:contain;
  }
  .trust-card{
    width:100%;
    padding:14px 13px;
  }

  .quiz{
    width:100%;
    min-height:0;
    padding:20px 14px 15px;
    border-radius:17px;
  }
  .quiz__header{font-size:13px}
  .quiz h2,.lead-form h2,.success h2{
    font-size:28px;
    line-height:1.16;
  }
  .progress{margin:14px 0 21px;gap:6px}
  .answer{
    min-height:65px;
    padding:8px 10px;
    gap:10px;
  }
  .answer img{
    width:46px;
    height:46px;
    flex-basis:46px;
    padding:8px;
  }
  .answer__label{font-size:14px}
  .answer__arrow{font-size:26px}
  .quiz__privacy{font-size:10.5px}

  .lead-form,.success{padding:2px 0}
  .lead-form input{height:56px}
  .telegram-help{padding:11px 12px}
  .telegram-help__toggle{font-size:13px}

  .process{padding-bottom:28px}
  .process__panel{padding:20px 15px}
  .process h2{font-size:28px}
  .process__grid{
    grid-template-columns:1fr;
    gap:18px;
  }
  .process-item__icon img{
    width:54px;
    height:54px;
    padding:0;
  }
  .process-item strong{font-size:14px}
  .process-item p{font-size:12px}

  .footer{padding-top:26px}
  .footer__inner{
    flex-direction:column;
    align-items:stretch;
    gap:18px;
  }
  .footer .button{width:100%}
}

@media (max-width:380px){
  .container{width:calc(100% - 20px)}
  .brand__name{font-size:18px}
  .hero h1{font-size:33px}
  .quiz{padding-inline:11px}
  .answer{padding-inline:8px}
  .answer img{width:43px;height:43px;flex-basis:43px}
}

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

/* Final desktop composition: the illustration belongs to the hero scene and
   does not stretch the first screen vertically. */
@media (min-width:1181px){
  .hero__layout{
    grid-template-columns:minmax(0,1fr) minmax(520px,.92fr);
    grid-template-areas:"content quiz";
    min-height:835px;
    align-items:start;
    padding-top:48px;
    padding-bottom:24px;
  }
  .hero__content{
    grid-area:content;
    max-width:650px;
  }
  .hero__visual{
    grid-area:auto;
    position:absolute;
    left:clamp(235px,20vw,285px);
    bottom:64px;
    width:clamp(430px,35vw,500px);
    margin:0;
  }
  .trust-card{
    grid-area:auto;
    position:absolute;
    left:0;
    bottom:24px;
  }
  .quiz{
    grid-area:quiz;
  }
}


/* Motion system */
.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:
    opacity .55s cubic-bezier(.22,.61,.36,1),
    transform .55s cubic-bezier(.22,.61,.36,1);
}
.reveal.is-visible{
  opacity:1;
  transform:none;
}
.reveal--hero{transition-delay:.02s}
.reveal--visual{transition-delay:.10s}
.reveal--trust{transition-delay:.16s}
.reveal--quiz{transition-delay:.08s}

.quiz{
  transition:
    box-shadow .25s ease,
    transform .25s ease,
    border-color .25s ease;
}
.quiz:focus-within{
  border-color:rgba(11,142,79,.28);
  box-shadow:0 24px 58px rgba(20,48,87,.14);
}

.progress span{
  transform-origin:left center;
  transition:
    background .28s ease,
    transform .28s ease;
}
.progress span.is-active{
  transform:scaleX(1);
  animation:progress-fill .32s ease both;
}
@keyframes progress-fill{
  from{transform:scaleX(.18);opacity:.5}
  to{transform:scaleX(1);opacity:1}
}

.quiz__stage{
  will-change:transform,opacity;
}
.quiz__stage.is-leaving{
  opacity:0;
  transform:translateX(-22px);
  transition:opacity .18s ease,transform .18s ease;
}
.quiz__stage.is-leaving-back{
  opacity:0;
  transform:translateX(22px);
  transition:opacity .18s ease,transform .18s ease;
}
.quiz__stage.is-entering{
  opacity:0;
  transform:translateX(22px);
}
.quiz__stage.is-entering-back{
  opacity:0;
  transform:translateX(-22px);
}

.answer{
  position:relative;
  overflow:hidden;
}
.answer::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,transparent,rgba(11,142,79,.07),transparent);
  transform:translateX(-120%);
  transition:transform .45s ease;
}
.answer:hover::after{transform:translateX(120%)}
.answer.is-selected{
  border-color:var(--green);
  background:var(--soft);
  transform:scale(.992);
}
.answer.is-selected img{
  transform:scale(1.08);
  box-shadow:0 7px 18px rgba(11,142,79,.16);
}
.answer:disabled{cursor:default}
.answer img{
  transition:transform .2s ease,box-shadow .2s ease;
}

.quiz__selection{
  min-height:22px;
  margin-top:8px;
  color:var(--green);
  font-size:12px;
  font-weight:700;
  opacity:0;
  transform:translateY(4px);
  transition:opacity .2s ease,transform .2s ease;
}
.quiz__selection.is-visible{
  opacity:1;
  transform:none;
}

.quiz__back{
  transition:color .18s ease,transform .18s ease;
}
.quiz__back:hover{
  color:var(--green);
  transform:translateX(-3px);
}

#quiz-view.is-fading-out{
  opacity:0;
  transform:translateY(-10px);
  transition:opacity .22s ease,transform .22s ease;
}
#lead-form-view.is-fading-in,
#success-view.is-fading-in{
  opacity:0;
  transform:translateY(12px);
}
#lead-form-view,
#success-view{
  transition:opacity .3s ease,transform .3s ease;
}

.lead-form__check{
  animation:check-pop .48s cubic-bezier(.22,.8,.32,1.25) both;
}
@keyframes check-pop{
  0%{opacity:0;transform:scale(.65)}
  70%{transform:scale(1.08)}
  100%{opacity:1;transform:scale(1)}
}

.process-item{
  opacity:0;
  transform:translateY(14px);
  transition:
    opacity .45s ease var(--delay,0ms),
    transform .45s ease var(--delay,0ms);
}
.process__panel.is-visible .process-item{
  opacity:1;
  transform:none;
}
.process-item__icon img{
  transition:transform .22s ease,box-shadow .22s ease;
}
.process-item:hover .process-item__icon img{
  transform:translateY(-3px) rotate(-2deg);
  box-shadow:0 9px 22px rgba(20,48,87,.11);
}

.button{
  position:relative;
  overflow:hidden;
}
.button::after{
  content:"";
  position:absolute;
  top:-70%;
  left:-35%;
  width:24%;
  height:240%;
  background:rgba(255,255,255,.22);
  transform:rotate(18deg) translateX(-220%);
  transition:transform .55s ease;
}
.button:hover::after{
  transform:rotate(18deg) translateX(620%);
}

@media(max-width:760px){
  .quiz__stage.is-leaving{transform:translateX(-14px)}
  .quiz__stage.is-leaving-back{transform:translateX(14px)}
  .quiz__stage.is-entering{transform:translateX(14px)}
  .quiz__stage.is-entering-back{transform:translateX(-14px)}
}

@media(prefers-reduced-motion:reduce){
  .reveal,
  .process-item{
    opacity:1!important;
    transform:none!important;
  }
  .hero__visual img,
  .lead-form__check{
    animation:none!important;
  }
  .quiz__stage,
  #quiz-view,
  #lead-form-view,
  #success-view{
    transform:none!important;
    opacity:1!important;
  }
}


/* Final interaction refinements */
.hero__visual img{
  animation:none!important;
  transform:none!important;
}

.progress span{
  opacity:.72;
  transform:scaleY(.72);
  transition:
    background-color .32s cubic-bezier(.22,.61,.36,1),
    opacity .32s ease,
    transform .32s cubic-bezier(.22,.61,.36,1);
}
.progress span.is-active{
  opacity:1;
  transform:scaleY(1);
  animation:none;
  background:var(--green);
}

.quiz__stage{
  transition:
    opacity .21s cubic-bezier(.4,0,.2,1),
    transform .21s cubic-bezier(.4,0,.2,1);
}
.quiz__stage.is-leaving{
  opacity:0;
  transform:translate3d(-20px,0,0);
}
.quiz__stage.is-leaving-back{
  opacity:0;
  transform:translate3d(20px,0,0);
}
.quiz__stage.is-entering{
  opacity:0;
  transform:translate3d(20px,0,0);
}
.quiz__stage.is-entering-back{
  opacity:0;
  transform:translate3d(-20px,0,0);
}

.answer{
  animation:answer-enter .34s cubic-bezier(.22,.61,.36,1) both;
  animation-delay:var(--answer-delay,0ms);
}
@keyframes answer-enter{
  from{opacity:0;transform:translate3d(0,8px,0)}
  to{opacity:1;transform:none}
}

.consent{
  display:grid!important;
  grid-template-columns:20px minmax(0,1fr);
  align-items:start;
  gap:10px!important;
  padding:12px 13px;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fbfcfe;
  color:var(--muted)!important;
  font-size:12px!important;
  line-height:1.45;
  cursor:pointer;
}
.consent input{
  appearance:none;
  width:20px!important;
  height:20px!important;
  margin:0;
  padding:0!important;
  border:1.5px solid #b8c5d4;
  border-radius:5px;
  background:#fff;
  display:grid;
  place-items:center;
  cursor:pointer;
}
.consent input::before{
  content:"";
  width:10px;
  height:6px;
  border-left:2px solid #fff;
  border-bottom:2px solid #fff;
  transform:rotate(-45deg) scale(0);
  transition:transform .16s ease;
}
.consent input:checked{
  border-color:var(--green);
  background:var(--green);
}
.consent input:checked::before{
  transform:rotate(-45deg) scale(1);
}
.consent input:focus-visible{
  outline:3px solid rgba(11,142,79,.20);
  outline-offset:2px;
}
.consent a{
  color:var(--green);
  font-weight:700;
}
.consent--optional{background:#fff}

.footer__legal{
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:center;
}
.footer__legal a{
  color:var(--green);
  font-weight:700;
  text-decoration:none;
}
.footer__legal a:hover{text-decoration:underline}

@media(max-width:760px){
  .footer__legal{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }
}