/* ==========================================================================
   AETHR lead form
   Drop-in conversion form. Pairs with js/lead.js and api/lead.js.

   Portable by design: every brand value falls back to a literal, so the
   component can be pasted onto any page whether or not that page defines the
   site variables.

   Progressive enhancement: with no JS every step renders stacked and the form
   posts natively. js/lead.js adds .Lead--js, which turns it into the stepped
   experience. Never style the stepped state as the default.
   ========================================================================== */

.Lead{
  --l-cream:var(--cream,#F4EEE2);
  --l-esp:var(--esp,#1C1813);
  --l-ox:var(--ox,#7E1F33);
  --l-ox-hi:var(--ox-hi,#9A2840);
  --l-ox-lt:var(--ox-lt,#A84258);
  --l-rose:var(--rose,#E0BFC7);
  --l-line:rgba(244,238,226,.14);
  --l-line-hi:rgba(244,238,226,.28);
  --l-decel:var(--e-decel,cubic-bezier(0.16,1,0.3,1));
  position:relative;
  border-radius:26px;
  padding:clamp(22px,2.6vw,34px);
  /* two layers: the cream wash for the glass, over a dark base so the panel
     still reads as a panel when it sits on the bright ember CTA gradient and
     not only on the espresso page background */
  background:linear-gradient(180deg,rgba(244,238,226,.075),rgba(244,238,226,.028)),rgba(18,14,11,.62);
  border:1px solid var(--l-line);
  backdrop-filter:blur(14px) saturate(1.15);
  -webkit-backdrop-filter:blur(14px) saturate(1.15);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.9);
  isolation:isolate;
}
/* the ember bloom: a free floating glow, no hard edge */
.Lead::before{
  content:"";position:absolute;z-index:-1;inset:-14% -10% auto -10%;height:62%;
  background:radial-gradient(60% 100% at 50% 0%,rgba(154,40,64,.5),transparent 72%);
  filter:blur(46px);pointer-events:none;
}

/* --- panel head ------------------------------------------------------- */
.Lead__head{margin-bottom:22px;}
.Lead__eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--f-disp,'Gilroy',system-ui,sans-serif);font-weight:800;
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--l-ox-lt);margin-bottom:14px;
}
.Lead__eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--l-ox-lt);flex:none;}
/* .Lead-prefixed so it beats the host page's own `.Cta h2` rule, which is
   (0,1,1) and would otherwise render this step heading at 66px UPPERCASE
   inside every closing CTA */
.Lead .Lead__q{
  font-family:var(--f-disp,'Gilroy',system-ui,sans-serif);font-weight:800;
  font-size:clamp(21px,2.2vw,27px);line-height:1.12;letter-spacing:-.02em;
  text-transform:none;margin:0;color:var(--l-cream);
}
.Lead__hint{font-size:14px;line-height:1.5;color:rgba(244,238,226,.6);margin-top:9px;max-width:44ch;}

/* progress: only meaningful once JS owns the steps */
.Lead__prog{display:none;}
.Lead--js .Lead__prog{display:flex;align-items:center;gap:13px;margin-bottom:16px;}
.Lead__track{position:relative;flex:1;height:3px;border-radius:3px;background:rgba(244,238,226,.13);overflow:hidden;}
.Lead__bar{
  position:absolute;inset:0;transform-origin:left center;transform:scaleX(.3333);
  background:linear-gradient(90deg,var(--l-ox),var(--l-ox-lt));border-radius:3px;
  transition:transform .5s var(--l-decel);
}
.Lead__count{
  font-family:var(--f-disp,'Gilroy',system-ui,sans-serif);font-weight:800;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(244,238,226,.5);font-variant-numeric:tabular-nums;flex:none;
}

/* --- steps ------------------------------------------------------------ */
/* fieldset carries an intrinsic min-width that breaks grid and flex children */
.Lead fieldset{border:0;min-width:0;padding:0;margin:0;}
.Lead legend{padding:0;}
.Lead__step{display:block;}
.Lead__step + .Lead__step{margin-top:30px;}
.Lead--js .Lead__step{display:none;}
.Lead--js .Lead__step.is-active{display:block;animation:leadIn .42s var(--l-decel) both;}
.Lead--js .Lead__step + .Lead__step{margin-top:0;}
@keyframes leadIn{from{opacity:0;transform:translateY(9px);}to{opacity:1;transform:none;}}

/* without JS each step needs its own visible heading */
.Lead__steplabel{
  font-family:var(--f-disp,'Gilroy',system-ui,sans-serif);font-weight:800;
  font-size:15px;letter-spacing:-.01em;color:var(--l-cream);margin-bottom:14px;
}
.Lead--js .Lead__steplabel{display:none;}

/* --- chips ------------------------------------------------------------ */
.Lead__chips{display:flex;flex-wrap:wrap;gap:9px;}
.Lead__chip{
  display:inline-flex;align-items:center;gap:8px;
  min-height:44px;padding:10px 17px;border-radius:999px;
  background:rgba(244,238,226,.045);border:1px solid var(--l-line);
  color:rgba(244,238,226,.86);
  font-family:var(--f-body,'Gilroy',system-ui,sans-serif);font-weight:300;font-size:14.5px;
  line-height:1.2;cursor:pointer;text-align:left;
  transition:background .2s ease-out,border-color .2s ease-out,color .2s ease-out,transform .2s var(--l-decel);
}
.Lead__chip::before{
  content:"";width:0;height:0;border-radius:50%;background:var(--l-cream);flex:none;
  transition:width .22s var(--l-decel),height .22s var(--l-decel);
}
@media (hover:hover){
  .Lead__chip:hover{background:rgba(244,238,226,.085);border-color:var(--l-line-hi);color:var(--l-cream);transform:translateY(-1px);}
}
/* The chip is a label wrapping a real checkbox or radio, so selection works
   with no JS, keyboard and screen readers come free, and a native post
   carries the values. */
.Lead__opt{position:relative;display:inline-flex;cursor:pointer;}
.Lead__opt input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;}
.Lead__opt input:checked + .Lead__chip{background:var(--l-ox);border-color:var(--l-ox-hi);color:var(--l-cream);}
.Lead__opt input:checked + .Lead__chip::before{width:6px;height:6px;}
.Lead__opt input:focus-visible + .Lead__chip{box-shadow:0 0 0 2px var(--l-esp),0 0 0 4px var(--l-ox-lt);}
@media (hover:hover){
  .Lead__opt:hover input:checked + .Lead__chip{background:var(--l-ox-hi);}
}
/* the heading takes programmatic focus on step change; never show a ring for it */
.Lead__q:focus{outline:none;}

/* --- fields ----------------------------------------------------------- */
.Lead__fields{display:grid;gap:16px;}
.Lead__row{display:grid;gap:16px;grid-template-columns:1fr 1fr;}
@media(max-width:560px){.Lead__row{grid-template-columns:1fr;}}
.Lead__field{display:flex;flex-direction:column;gap:7px;min-width:0;}
.Lead__label{
  font-family:var(--f-disp,'Gilroy',system-ui,sans-serif);font-weight:800;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(244,238,226,.62);
}
.Lead__label i{font-style:normal;font-weight:300;letter-spacing:.06em;color:rgba(244,238,226,.38);text-transform:none;}
/* the word carries the meaning, so this never depends on colour alone */
.Lead__label em{font-style:normal;font-weight:800;letter-spacing:.06em;color:var(--l-ox-lt);text-transform:none;}
.Lead__input{
  width:100%;padding:13px 15px;border-radius:14px;
  background:rgba(20,16,13,.5);border:1px solid var(--l-line);
  color:var(--l-cream);
  font-family:var(--f-body,'Gilroy',system-ui,sans-serif);font-weight:300;
  /* 16px keeps iOS Safari from zooming the viewport on focus */
  font-size:16px;line-height:1.45;
  transition:border-color .2s ease-out,background .2s ease-out,box-shadow .2s ease-out;
}
.Lead__input::placeholder{color:rgba(244,238,226,.3);}
.Lead__input:focus{
  outline:none;border-color:var(--l-ox-lt);background:rgba(20,16,13,.72);
  box-shadow:0 0 0 3px rgba(168,66,88,.24);
}
textarea.Lead__input{min-height:112px;resize:vertical;}
.Lead__input[aria-invalid="true"]{border-color:var(--l-ox-lt);background:rgba(126,31,51,.16);}
.Lead__err{
  display:none;align-items:flex-start;gap:7px;
  font-size:13px;line-height:1.4;color:var(--l-rose);
}
.Lead__err.is-on{display:flex;}
.Lead__err::before{
  content:"!";flex:none;width:15px;height:15px;margin-top:2px;border-radius:50%;
  background:var(--l-ox);color:var(--l-cream);
  font-family:var(--f-disp,'Gilroy',system-ui,sans-serif);font-weight:800;font-size:10px;
  display:grid;place-items:center;
}

/* honeypot: off screen for eyes, hidden from assistive tech, skipped by tab */
.Lead__hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}

/* --- footer / actions ------------------------------------------------- */
.Lead__foot{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-top:24px;}
.Lead__btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:48px;padding:13px 26px;border-radius:999px;border:1px solid transparent;
  font-family:var(--f-disp,'Gilroy',system-ui,sans-serif);font-weight:800;font-size:14px;
  letter-spacing:.01em;cursor:pointer;
  transition:background .25s ease-out,border-color .25s ease-out,color .25s ease-out,transform .25s var(--l-decel),opacity .25s;
}
.Lead__btn--go{background:var(--l-ox);color:var(--l-cream);flex:1 1 auto;}
@media (hover:hover){.Lead__btn--go:hover{background:var(--l-ox-hi);transform:translateY(-2px);}}
.Lead__btn--go:active{transform:translateY(0);}
.Lead__btn--ghost{background:transparent;border-color:var(--l-line);color:rgba(244,238,226,.78);flex:none;}
@media (hover:hover){.Lead__btn--ghost:hover{border-color:var(--l-line-hi);color:var(--l-cream);}}
.Lead__btn[disabled],.Lead__btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none;}
.Lead__btn svg{width:16px;height:16px;flex:none;}

/* stepped nav only exists once JS is running */
.Lead__back,.Lead__next{display:none;}
.Lead--js .Lead__next{display:inline-flex;}
.Lead--js .Lead__back.is-on{display:inline-flex;}
.Lead--js .Lead__send{display:none;}
.Lead--js .Lead__send.is-on{display:inline-flex;}

/* sending state: three settling dots, calmer than a spinner */
.Lead__dots{display:inline-flex;gap:4px;}
.Lead__dots span{width:5px;height:5px;border-radius:50%;background:currentColor;animation:leadDot 1s infinite ease-in-out;}
.Lead__dots span:nth-child(2){animation-delay:.15s;}
.Lead__dots span:nth-child(3){animation-delay:.3s;}
@keyframes leadDot{0%,60%,100%{opacity:.3;}30%{opacity:1;}}

.Lead__trust{
  display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:18px;
  padding-top:16px;border-top:1px solid rgba(244,238,226,.1);
  font-size:12.5px;color:rgba(244,238,226,.5);
}
.Lead__trust span{display:inline-flex;align-items:center;gap:7px;}
.Lead__trust span::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--l-ox-lt);flex:none;}

/* form-level error, shown when the network or the server fails */
.Lead__alert{
  display:none;gap:11px;align-items:flex-start;margin-top:18px;padding:14px 16px;
  border-radius:14px;background:rgba(126,31,51,.2);border:1px solid rgba(168,66,88,.45);
  font-size:14px;line-height:1.5;color:var(--l-cream);
}
.Lead__alert.is-on{display:flex;}
.Lead__alert a{color:var(--l-rose);text-decoration:underline;text-underline-offset:3px;}

/* --- success ---------------------------------------------------------- */
.Lead__done{display:none;text-align:left;}
.Lead__done.is-on{display:block;animation:leadIn .5s var(--l-decel) both;}
.Lead__tick{width:52px;height:52px;margin-bottom:20px;}
.Lead__tick circle{stroke:var(--l-ox-lt);stroke-width:2;fill:rgba(126,31,51,.22);}
.Lead__tick path{
  stroke:var(--l-cream);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:26;stroke-dashoffset:26;animation:leadTick .5s .18s var(--l-decel) forwards;
}
@keyframes leadTick{to{stroke-dashoffset:0;}}
.Lead__done h3{
  font-family:var(--f-disp,'Gilroy',system-ui,sans-serif);font-weight:800;
  font-size:clamp(24px,2.6vw,32px);line-height:1.08;letter-spacing:-.02em;color:var(--l-cream);
}
.Lead__done p{margin-top:12px;font-size:15px;line-height:1.6;color:rgba(244,238,226,.72);max-width:46ch;}
.Lead__next-list{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:11px;}
.Lead__next-list li{
  display:flex;gap:11px;align-items:flex-start;
  font-size:14px;line-height:1.5;color:rgba(244,238,226,.72);
}
.Lead__next-list li::before{
  content:"";flex:none;width:6px;height:6px;margin-top:8px;border-radius:50%;background:var(--l-ox-lt);
}
.Lead__done .Lead__foot{margin-top:26px;}

/* ==========================================================================
   .LeadBlock
   The closing-CTA layout every page shares: the pitch and the WhatsApp button
   on the left, the form on the right, stacking on narrow. Lives here rather
   than in each page's inline <style> so the rollout stays one file.
   ========================================================================== */
.LeadBlock{
  display:grid;align-items:start;text-align:left;
  grid-template-columns:1fr 1.04fr;
  grid-template-areas:"intro form" "aside form";
  /* auto/1fr, not auto/auto: the form spans both rows and is usually the tallest
     thing here, and without this the surplus height is split between the rows,
     opening a gap between the pitch and the points under it */
  grid-template-rows:auto 1fr;
  gap:clamp(22px,2.6vw,34px) clamp(36px,5vw,72px);
  /* keeps the fixed header off the panel when a step change scrolls it in */
  scroll-margin-top:96px;
}
.LeadBlock__intro{grid-area:intro;}
.LeadBlock__form{grid-area:form;}
.LeadBlock__aside{grid-area:aside;}
/* stacked: the form comes straight after the pitch, and the supporting detail
   plus the WhatsApp button move below it rather than burying it */
@media(max-width:980px){
  .LeadBlock{grid-template-columns:1fr;grid-template-areas:"intro" "form" "aside";gap:26px;}
}
/* the host section centres its own content; inside the block we go left */
.LeadBlock .Cta__row,
.LeadBlock .cta-row{justify-content:flex-start;}

/* the WebGL home: sits inside .Outro, above the outro canvas, between the
   animated #outro-cta and the footer */
.LeadHome{
  position:relative;z-index:3;
  padding:0 clamp(20px,5vw,48px) clamp(48px,7vh,88px);
}
.LeadHome__wrap{max-width:1200px;margin:0 auto;}
.LeadHome .LeadBlock__intro h2{
  font-size:clamp(26px,3.4vw,44px);text-align:left;margin-bottom:16px;
}
/* the host `.Cta h2` is sized for a full width centred block; in a half width
   column that wraps badly and the Good Night ascender clips the line above */
.LeadBlock__intro h2{
  font-size:clamp(28px,3.5vw,46px);line-height:1.08;margin-bottom:18px;
}
.LeadBlock__sub{
  font-size:clamp(15px,1.3vw,17px);line-height:1.6;max-width:44ch;
  color:rgba(244,238,226,.78);margin-bottom:24px;
}
.LeadBlock__points{list-style:none;display:grid;gap:9px;margin:0 0 22px;padding:0;max-width:44ch;}
.LeadBlock__points li{
  display:flex;gap:11px;align-items:flex-start;
  font-size:14.5px;line-height:1.5;color:rgba(244,238,226,.74);
}
.LeadBlock__points li::before{
  content:"";flex:none;width:6px;height:6px;margin-top:7px;border-radius:50%;
  background:var(--rose,#E0BFC7);
}

/* --- reduced motion --------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .Lead__chip,.Lead__btn,.Lead__input,.Lead__bar{transition-duration:.01ms;}
  .Lead--js .Lead__step.is-active,.Lead__done.is-on{animation:none;}
  .Lead__tick path{animation:none;stroke-dashoffset:0;}
  .Lead__dots span{animation:none;opacity:.6;}
  @media (hover:hover){
    .Lead__chip:hover,.Lead__btn--go:hover{transform:none;}
  }
}