:root{
  --ink:#263238;
  --muted:#66747a;
  --teal:#007f78;
  --teal-2:#00a397;
  --purple:#ae61b7;
  --purple-soft:#c98fda;
  --paper:rgba(255,255,255,.91);
  --line:rgba(79,74,88,.13);
  --shadow:0 22px 65px rgba(37,57,69,.14);
  font-family:"Exo 2",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  color:var(--ink);
}
*{box-sizing:border-box}
html{
  margin:0;
  min-height:100%;
  min-height:-webkit-fill-available;
  background:#f5fbfa;
  -webkit-text-size-adjust:100%;
}
body{
  margin:0;
  min-height:100vh;
  min-height:100dvh;
  background:linear-gradient(135deg,#fbf7fc 0%,#ffffff 48%,#eefbf9 100%);
  color:var(--ink);
  overflow-x:hidden;
}
a{color:inherit}
button,input,textarea{font:inherit}
button{cursor:pointer}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

.landing-shell{
  position:relative;
  isolation:isolate;
  min-height:100vh;
  min-height:100dvh;
  overflow:hidden;
  padding:max(30px,env(safe-area-inset-top)) 18px max(92px,calc(env(safe-area-inset-bottom) + 56px));
  background:transparent;
}
/* Real circular ambience layers: fully transparent at their edges, so there
   is no rectangular animated boundary. */
.landing-orb{
  position:absolute;
  z-index:0;
  pointer-events:none;
  border-radius:50%;
  transform:translate3d(0,0,0);
  will-change:transform,opacity;
}
.landing-orb-purple{
  width:118vw;
  height:118vw;
  left:-72vw;
  top:-49vw;
  background:radial-gradient(circle,
    rgba(201,143,218,.48) 0%,
    rgba(201,143,218,.31) 31%,
    rgba(201,143,218,.13) 51%,
    rgba(201,143,218,0) 71%);
  opacity:.88;
  animation:vvPurpleOrb 6.2s ease-in-out infinite alternate;
}
.landing-orb-teal{
  width:126vw;
  height:126vw;
  right:-78vw;
  bottom:-70vw;
  background:radial-gradient(circle,
    rgba(42,205,193,.48) 0%,
    rgba(42,205,193,.30) 31%,
    rgba(42,205,193,.12) 52%,
    rgba(42,205,193,0) 72%);
  opacity:.88;
  animation:vvTealOrb 6.8s ease-in-out infinite alternate;
}
.landing-glow{
  position:absolute;
  z-index:0;
  left:12%;
  top:8%;
  width:76%;
  height:46%;
  pointer-events:none;
  border-radius:50%;
  background:radial-gradient(ellipse at center,
    rgba(255,255,255,.80) 0%,
    rgba(255,255,255,.45) 42%,
    rgba(255,255,255,0) 76%);
  opacity:.82;
  animation:vvWhiteBreath 5.8s ease-in-out infinite alternate;
}
@keyframes vvPurpleOrb{
  from{transform:translate3d(-3vw,-1vh,0) scale(.98);opacity:.68}
  45%{opacity:.92}
  to{transform:translate3d(19vw,9vh,0) scale(1.08);opacity:.82}
}
@keyframes vvTealOrb{
  from{transform:translate3d(4vw,4vh,0) scale(1.02);opacity:.66}
  52%{opacity:.92}
  to{transform:translate3d(-19vw,-10vh,0) scale(1.10);opacity:.84}
}
@keyframes vvWhiteBreath{
  from{transform:scale(.96);opacity:.58}
  to{transform:scale(1.08);opacity:.92}
}
.landing-content{
  position:relative;
  z-index:1;
  width:min(100%,520px);
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.landing-logo-link{
  position:relative;
  isolation:isolate;
  display:block;
  text-decoration:none;
  text-align:center;
}
.landing-logo-link::before{
  content:"";
  position:absolute;
  z-index:-1;
  left:50%;
  top:48%;
  width:108%;
  height:76%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(ellipse at center,
    rgba(255,255,255,.94) 0%,
    rgba(255,255,255,.79) 35%,
    rgba(255,255,255,.46) 54%,
    rgba(255,255,255,.17) 68%,
    rgba(255,255,255,0) 82%);
  pointer-events:none;
}
.landing-logo{
  display:block;
  width:min(78vw,360px);
  max-height:190px;
  object-fit:contain;
  margin:0 auto;
  filter:drop-shadow(0 11px 20px rgba(37,57,69,.08));
}
.landing-tagline{
  position:relative;
  z-index:2;
  margin:18px 0 27px;
  font-size:clamp(20px,5.5vw,27px);
  font-weight:760;
  letter-spacing:.01em;
  color:#294047;
}
.landing-tagline strong{font-weight:850}
.landing-tagline .tagline-shop{color:var(--teal)}
.landing-tagline .tagline-save{color:var(--purple)}

.auth-card{
  width:100%;
  padding:24px;
  border:1px solid rgba(255,255,255,.70);
  border-radius:25px;
  background:var(--paper);
  box-shadow:var(--shadow);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.auth-tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  padding:5px;
  margin:0 0 22px;
  border-radius:15px;
  background:rgba(38,50,56,.065);
}
.auth-tab{
  width:100%;
  margin:0;
  padding:11px 12px;
  border:0;
  border-radius:11px;
  background:transparent;
  color:#526067;
  font-weight:800;
}
.auth-tab.is-active{
  background:#fff;
  color:var(--teal);
  box-shadow:0 5px 14px rgba(37,57,69,.09);
}
.auth-card h1{
  margin:0 0 7px;
  text-align:center;
  font-size:clamp(27px,7vw,34px);
  line-height:1.08;
  letter-spacing:-.035em;
}
.auth-copy{
  margin:0 0 19px;
  text-align:center;
  color:#5e6c72;
  font-size:15px;
  line-height:1.45;
}
input,textarea{
  width:100%;
  border:1px solid rgba(70,82,88,.23);
  background:rgba(255,255,255,.95);
  border-radius:13px;
  padding:14px 15px;
  color:var(--ink);
  outline:none;
  transition:border .15s,box-shadow .15s;
}
input:focus,textarea:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(0,127,120,.12)}
textarea{resize:vertical;min-height:96px}
#consumer-submit,.business-form button{
  width:100%;
  border:0;
  border-radius:13px;
  padding:14px 18px;
  margin-top:11px;
  background:linear-gradient(135deg,#006b65,#00978d);
  color:#fff;
  font-weight:850;
  box-shadow:0 10px 22px rgba(0,127,120,.16);
}
button:disabled{opacity:.62;cursor:wait}
.form-status{min-height:0;margin-top:12px;font-size:14px;line-height:1.45;text-align:center;font-weight:720}
.form-status:not(:empty){min-height:20px}
.form-status.success{color:#08766f}.form-status.error{color:#a72d28}
.email-sent-panel{
  margin:0 0 18px;
  padding:18px 17px;
  border:2px solid rgba(0,127,120,.24);
  border-radius:17px;
  background:linear-gradient(145deg,rgba(233,250,247,.98),rgba(255,255,255,.98));
  box-shadow:0 10px 24px rgba(0,127,120,.10);
  text-align:center;
  color:#27484a;
}
.email-sent-icon{
  width:48px;
  height:48px;
  margin:0 auto 10px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:linear-gradient(135deg,#006b65,#00978d);
  color:#fff;
  font-size:25px;
  line-height:1;
  box-shadow:0 8px 18px rgba(0,127,120,.18);
}
.email-sent-title{
  margin:0 0 7px;
  font-size:24px;
  line-height:1.1;
  font-weight:900;
  color:var(--teal);
  letter-spacing:-.025em;
}
.email-sent-copy{
  font-size:14px;
  line-height:1.45;
  color:#52666a;
}
.email-sent-copy strong{
  display:block;
  margin-top:3px;
  color:#263238;
  overflow-wrap:anywhere;
}
.email-sent-action{
  margin-top:10px;
  font-size:16px;
  line-height:1.4;
  color:var(--purple);
  font-weight:780;
}
.email-sent-action strong{
  color:inherit;
  font-weight:900;
}
.security-note{margin:10px 0 0;text-align:center;color:#7a8589;font-size:12px}
.browse-link{margin:19px 0 17px;text-decoration:none;color:#275d59;font-size:14px;font-weight:780;border-bottom:1px solid rgba(39,93,89,.25)}

.business-panel{
  width:100%;
  border:1px solid rgba(255,255,255,.62);
  border-radius:20px;
  background:rgba(255,255,255,.65);
  box-shadow:0 12px 34px rgba(37,57,69,.08);
  overflow:hidden;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.business-panel summary{
  list-style:none;
  cursor:pointer;
  padding:18px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  color:#34474d;
}
.business-panel summary::-webkit-details-marker{display:none}
.business-panel summary span{font-size:14px;font-weight:700}
.business-panel summary strong{color:var(--purple);font-size:14px;white-space:nowrap}
.business-panel[open] summary{border-bottom:1px solid var(--line)}
.business-panel-body{padding:19px 20px 21px;background:rgba(255,255,255,.72)}
.business-intro{margin:0 0 17px;color:#5b696f;font-size:14px;line-height:1.45}
.business-form label{display:block;margin:13px 0 6px;font-size:13px;font-weight:800;color:#47585e}
.business-form label:first-child{margin-top:0}
.business-form .form-status{text-align:left}

@media(max-width:640px){
  .auth-card,.business-panel{
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
}
@media(max-width:520px){
  .landing-shell{padding-left:14px;padding-right:14px}
  .landing-logo{width:min(82vw,330px)}
  .auth-card{padding:20px 18px;border-radius:22px}
  .landing-tagline{margin-bottom:23px}
}
@media(prefers-reduced-motion:reduce){
  .landing-shell{animation:vvLandingBackgroundShift 8s ease-in-out infinite alternate}
  .landing-shell::before{animation:vvLandingGradientFlow 8s ease-in-out infinite alternate}
  .landing-glow{animation:vvLandingGlowDrift 9s ease-in-out infinite alternate}
}
@media(prefers-reduced-transparency:reduce){.auth-card,.business-panel{backdrop-filter:none;-webkit-backdrop-filter:none;background:#fff}}


/* v0.64.14 — keep motion accessible if the device explicitly requests less motion. */
@media(prefers-reduced-motion:reduce){
  .landing-orb-purple{animation:vvPurpleOrb 18s ease-in-out infinite alternate}
  .landing-orb-teal{animation:vvTealOrb 20s ease-in-out infinite alternate}
  .landing-glow{animation:vvWhiteBreath 18s ease-in-out infinite alternate}
}


/* ==========================================================
   v0.64.15 — stronger colour + clearly visible edge-free motion
   ========================================================== */
html{
  background:#dff4f1 !important;
}
body{
  background:linear-gradient(135deg,#f1d7f5 0%,#fbf8fc 45%,#d5f3ef 100%) !important;
}

/* Keep the colour fields completely soft-edged, but bring more of each
   circle into the viewport so their movement can actually be seen. */
.landing-orb-purple{
  width:108vw !important;
  height:108vw !important;
  left:-48vw !important;
  top:-27vw !important;
  background:radial-gradient(circle,
    rgba(190,112,207,.68) 0%,
    rgba(190,112,207,.46) 30%,
    rgba(190,112,207,.22) 50%,
    rgba(190,112,207,.07) 64%,
    rgba(190,112,207,0) 76%) !important;
  opacity:.96 !important;
  animation:vvPurpleOrb15 4.8s ease-in-out -1.4s infinite alternate !important;
}
.landing-orb-teal{
  width:116vw !important;
  height:116vw !important;
  right:-50vw !important;
  bottom:-37vw !important;
  background:radial-gradient(circle,
    rgba(38,196,184,.64) 0%,
    rgba(38,196,184,.43) 30%,
    rgba(38,196,184,.20) 51%,
    rgba(38,196,184,.06) 65%,
    rgba(38,196,184,0) 77%) !important;
  opacity:.96 !important;
  animation:vvTealOrb15 5.3s ease-in-out -2.1s infinite alternate !important;
}
.landing-glow{
  left:8% !important;
  top:6% !important;
  width:84% !important;
  height:50% !important;
  background:radial-gradient(ellipse at center,
    rgba(255,255,255,.84) 0%,
    rgba(255,255,255,.47) 40%,
    rgba(255,255,255,.10) 65%,
    rgba(255,255,255,0) 78%) !important;
  animation:vvWhiteBreath15 4.4s ease-in-out -1.1s infinite alternate !important;
}

@keyframes vvPurpleOrb15{
  0%{
    transform:translate3d(-2vw,-2vh,0) scale(.96);
    opacity:.76;
  }
  50%{opacity:1}
  100%{
    transform:translate3d(25vw,13vh,0) scale(1.10);
    opacity:.90;
  }
}
@keyframes vvTealOrb15{
  0%{
    transform:translate3d(4vw,5vh,0) scale(.98);
    opacity:.74;
  }
  50%{opacity:1}
  100%{
    transform:translate3d(-25vw,-15vh,0) scale(1.11);
    opacity:.91;
  }
}
@keyframes vvWhiteBreath15{
  0%{transform:scale(.96);opacity:.56}
  100%{transform:scale(1.07);opacity:.88}
}

/* If Reduce Motion is enabled we still retain a gentle ambient change,
   because this specific branded background motion is deliberately requested. */
@media(prefers-reduced-motion:reduce){
  .landing-orb-purple{animation:vvPurpleOrb15 8s ease-in-out -2s infinite alternate !important}
  .landing-orb-teal{animation:vvTealOrb15 9s ease-in-out -3s infinite alternate !important}
  .landing-glow{animation:vvWhiteBreath15 8s ease-in-out -2s infinite alternate !important}
}


/* ==========================================================
   v0.64.16 — static brand gradient + soft logo-shaped halo
   ========================================================== */
html,
body{
  background:
    radial-gradient(circle at 9% 18%,
      rgba(190,112,207,.58) 0%,
      rgba(190,112,207,.39) 24%,
      rgba(190,112,207,.17) 43%,
      rgba(190,112,207,0) 63%),
    radial-gradient(circle at 92% 82%,
      rgba(38,196,184,.56) 0%,
      rgba(38,196,184,.37) 25%,
      rgba(38,196,184,.15) 45%,
      rgba(38,196,184,0) 65%),
    radial-gradient(ellipse at 54% 34%,
      rgba(255,255,255,.88) 0%,
      rgba(255,255,255,.54) 34%,
      rgba(255,255,255,.15) 57%,
      rgba(255,255,255,0) 72%),
    linear-gradient(135deg,#efd4f4 0%,#faf8fc 47%,#ccefeb 100%) !important;
  background-color:#d9f1ee !important;
  background-attachment:scroll !important;
}

/* The experimental moving colour layers are no longer used. */
.landing-orb,
.landing-glow{
  display:none !important;
  animation:none !important;
  transform:none !important;
}

/* Remove the broad oval glow. */
.landing-logo-link::before{
  display:none !important;
}

/* A softer halo now follows the transparent edge of the real logo itself. */
.landing-logo{
  filter:
    drop-shadow(0 0 9px rgba(255,255,255,.62))
    drop-shadow(0 0 20px rgba(255,255,255,.36))
    drop-shadow(0 9px 18px rgba(37,57,69,.07)) !important;
}


/* ==========================================================
   v0.64.17 — slightly lighter gradient + stronger soft logo glow
   ========================================================== */
html,
body{
  background:
    radial-gradient(circle at 9% 18%,
      rgba(190,112,207,.52) 0%,
      rgba(190,112,207,.34) 24%,
      rgba(190,112,207,.14) 43%,
      rgba(190,112,207,0) 63%),
    radial-gradient(circle at 92% 82%,
      rgba(38,196,184,.50) 0%,
      rgba(38,196,184,.32) 25%,
      rgba(38,196,184,.13) 45%,
      rgba(38,196,184,0) 65%),
    radial-gradient(ellipse at 54% 34%,
      rgba(255,255,255,.92) 0%,
      rgba(255,255,255,.60) 34%,
      rgba(255,255,255,.18) 57%,
      rgba(255,255,255,0) 72%),
    linear-gradient(135deg,#f2dbf7 0%,#fcfbfd 47%,#d5f3ef 100%) !important;
  background-color:#e0f4f1 !important;
}

/* Keep the glow around the real logo shape, but strengthen it slightly. */
.landing-logo{
  filter:
    drop-shadow(0 0 12px rgba(255,255,255,.74))
    drop-shadow(0 0 26px rgba(255,255,255,.44))
    drop-shadow(0 0 44px rgba(255,255,255,.18))
    drop-shadow(0 9px 18px rgba(37,57,69,.08)) !important;
}


/* ==========================================================
   v0.64.18 — stronger but softer logo glow
   ========================================================== */
.landing-logo{
  filter:
    drop-shadow(0 0 16px rgba(255,255,255,.72))
    drop-shadow(0 0 34px rgba(255,255,255,.42))
    drop-shadow(0 0 58px rgba(255,255,255,.20))
    drop-shadow(0 10px 20px rgba(37,57,69,.07)) !important;
}


/* ==========================================================
   v0.64.19 — brighter centre separation + larger soft logo halo
   ========================================================== */
html,
body{
  background:
    radial-gradient(ellipse at 50% 47%,
      rgba(255,255,255,.99) 0%,
      rgba(255,255,255,.96) 23%,
      rgba(255,255,255,.80) 37%,
      rgba(255,255,255,.34) 50%,
      rgba(255,255,255,0) 62%),
    radial-gradient(circle at 5% 14%,
      rgba(190,112,207,.52) 0%,
      rgba(190,112,207,.34) 22%,
      rgba(190,112,207,.14) 38%,
      rgba(190,112,207,0) 55%),
    radial-gradient(circle at 95% 86%,
      rgba(38,196,184,.50) 0%,
      rgba(38,196,184,.32) 23%,
      rgba(38,196,184,.13) 40%,
      rgba(38,196,184,0) 57%),
    linear-gradient(135deg,#f2dbf7 0%,#ffffff 49%,#d5f3ef 100%) !important;
  background-color:#eef9f7 !important;
}

/* A broad, feathered glow gives the whole logo more separation without
   creating a hard white oval. */
.landing-logo-link::before{
  display:block !important;
  content:"";
  position:absolute;
  z-index:-1;
  left:50%;
  top:47%;
  width:122%;
  height:90%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(ellipse at center,
    rgba(255,255,255,.86) 0%,
    rgba(255,255,255,.68) 29%,
    rgba(255,255,255,.38) 49%,
    rgba(255,255,255,.16) 66%,
    rgba(255,255,255,0) 84%);
  filter:blur(8px);
  opacity:.92;
  pointer-events:none;
}

/* Keep a second, logo-shaped glow close to the actual transparent artwork. */
.landing-logo{
  filter:
    drop-shadow(0 0 18px rgba(255,255,255,.82))
    drop-shadow(0 0 38px rgba(255,255,255,.48))
    drop-shadow(0 0 66px rgba(255,255,255,.22))
    drop-shadow(0 10px 20px rgba(37,57,69,.06)) !important;
}


/* v0.64.20 — do not auto-open the iOS keyboard when switching Join/Sign in.
   When the user deliberately taps the email field, leave Safari room to position it. */
#consumer-email{
  scroll-margin-top:18vh;
  scroll-margin-bottom:34vh;
}

/* ==========================================================
   v0.64.41 — Safari-safe homepage logo halo
   ========================================================== */

/*
  iOS Safari can intermittently rasterise the PNG's multi-layer drop-shadow
  into the image's own rectangular compositing box, which makes the soft halo
  look abruptly cropped. Keep the logo itself completely unfiltered and draw
  the glow on separate, oversized gradient layers instead.
*/
.landing-logo-link{
  overflow:visible !important;
  isolation:isolate;
}

.landing-logo{
  -webkit-filter:none !important;
  filter:none !important;
  position:relative;
  z-index:2;
}

/* Broad feathered halo — no blur/filter, so Safari has no bitmap edge to clip. */
.landing-logo-link::before{
  display:block !important;
  content:"";
  position:absolute;
  z-index:0;
  left:50%;
  top:49%;
  width:145%;
  height:128%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:
    radial-gradient(
      ellipse at center,
      rgba(255,255,255,.82) 0%,
      rgba(255,255,255,.67) 30%,
      rgba(255,255,255,.38) 50%,
      rgba(255,255,255,.15) 67%,
      rgba(255,255,255,0) 86%
    );
  -webkit-filter:none !important;
  filter:none !important;
  opacity:.94;
  pointer-events:none;
}

/* Smaller inner glow adds the brighter centre separation previously supplied
   by the PNG drop-shadows, again without a clipped filter layer. */
.landing-logo-link::after{
  content:"";
  position:absolute;
  z-index:1;
  left:50%;
  top:49%;
  width:116%;
  height:82%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:
    radial-gradient(
      ellipse at center,
      rgba(255,255,255,.64) 0%,
      rgba(255,255,255,.38) 44%,
      rgba(255,255,255,.12) 68%,
      rgba(255,255,255,0) 88%
    );
  pointer-events:none;
}


/* v0.64.44 privacy links at collection points */
.privacy-note{
  margin:9px 0 0;
  color:#6c767a;
  font-size:11px;
  line-height:1.4;
  text-align:center;
}
.privacy-note a{
  color:#007f78;
  font-weight:750;
  text-underline-offset:2px;
}
.business-privacy-note{
  margin-top:10px;
  text-align:left;
}


/* v1.1.50 — expanded business-form branding */
.business-panel-logo{
  display:block;
  width:min(220px,62%);
  height:auto;
  margin:0 auto 18px;
}