/* css1/account.css */




.ak-overlay:not([hidden]) {
  display: block;
  opacity: 1;
}

/* Hidden means hidden. Period. */

#account-overlay[hidden],
#signin-mobile-toast-overlay[hidden],
#account-wrap[hidden],
#subscription-wrap[hidden],
#plans-wrap[hidden],
#projects-wrap[hidden] {
  display: none !important;
}


/* ===========================
   ACCOUNT OVERLAY + PANEL
   =========================== */

/* Hidden means hidden. Period. */
#howitworks-wrap[hidden],
#account-overlay[hidden],
#signin-mobile-toast-overlay[hidden],
#subscription-wrap[hidden],
#projects-wrap[hidden],
#account-wrap[hidden] {
  display: none !important;
}

/* Overlay (fade in when not hidden) */
/* stylelint-disable-next-line no-duplicate-selectors */
#account-overlay.ak-overlay,
#signin-mobile-toast-overlay.ak-overlay {
  backdrop-filter: blur(var(--s6-p-));
  background: rgba(0, 0, 0, 0.748);
  inset: 0;
  opacity: 0;
  position: fixed;
  transition: opacity 180ms ease;
  z-index: 996;     
  pointer-events: auto;   
}

#account-overlay.ak-overlay:not([hidden]),
#signin-mobile-toast-overlay.ak-overlay:not([hidden]) {
  display: block !important;
  opacity: 1;
}

#plans-wrap.account-panel,
#account-wrap.account-panel{
  z-index: 997; 
}

#subscription-wrap.account-panel{
  z-index: 997;
}





.account-panel {
  display: flex;
  flex-direction: column;
  position: fixed;

  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  /* size */
  width: min(480px, calc(100vw - 32px));
  height: 620px;            
  overflow: hidden;

  --panel-pad-x: 32px;
  --panel-pad-y: 32px;

    background-color: var(--ak-white-sec);
}

#howitworks-wrap.account-panel {
  width: min(560px, calc(100vw - 32px));  /* ← change here */
  height: calc(100vh - var(--s48-p-) * 2);
  max-height: calc(100vh - var(--s48-p-) * 2);
}



#plans-wrap.account-panel,
#projects-wrap.account-panel{
  z-index: 970; /* width comes from .account-panel */
    width: min(720px, calc(100vw - 32px));

}

/* add-project/add-area now use ak-modal markup; no account-panel overrides */



/* Header never scrolls */
.account-panel>.floating-panel__header {
  flex: 0 0 auto;
}

.account-panel>.floating-panel__body {
  padding: var(--panel-pad-y) var(--panel-pad-x);
  display: block;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;

}

/* Account panel must NOT scroll */
#account-wrap.account-panel > .floating-panel__body{
  overflow-y: hidden;
}



#projects-wrap.account-panel>.floating-panel__body::-webkit-scrollbar,
#account-wrap.account-panel>.floating-panel__body::-webkit-scrollbar {
  width: 10px;
}



#projects-wrap.account-panel>.floating-panel__body::-webkit-scrollbar-track,
#account-wrap.account-panel>.floating-panel__body::-webkit-scrollbar-track {
  background: transparent;
}


#projects-wrap.account-panel>.floating-panel__body::-webkit-scrollbar-thumb,
#account-wrap.account-panel>.floating-panel__body::-webkit-scrollbar-thumb {
  background: #797979 !important;
  border: none;
  border-radius: 999px;
}


#projects-wrap.account-panel>.floating-panel__body::-webkit-scrollbar-thumb:hover,
#account-wrap.account-panel>.floating-panel__body::-webkit-scrollbar-thumb:hover {
  background: rgb(0, 0, 0) !important;
}

#account-wrap.account-panel:not(.is-signedin) {
  background-image: url("/media/projw.png");
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 100% auto;
  background-origin: border-box;
  background-clip: border-box;
}

#signin-wrap.account-panel > .floating-panel__body,
#plans-wrap.account-panel > .floating-panel__body,
#signin-toast.account-panel > .floating-panel__body {
  background-image: url("/media/projw.png");
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 100% auto; /* width = panel width, height scales to keep aspect */
  background-origin: border-box; /* position relative to panel box so top:0 aligns */
  background-clip: border-box;
  background-color: transparent;
}

#howitworks-wrap.account-panel > .floating-panel__body{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 0;
  background-image: url("/media/calcufloorplan.webp");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  overflow: hidden;
  min-height: 0;
}
#howitworks-wrap .hiw2{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1 1 auto;
  min-height: 0;
}

#howitworks-wrap .hiw2__hero {
  flex: 0 0 auto;
  padding: var(--s48-p-) var(--s12-p-) 0 var(--s54-p-);
  background: linear-gradient(to bottom, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0) 100%);
}

#howitworks-wrap .hiw2__logo {
  display: block;
  height: var(--s24-p-);
  width: auto;
  margin-bottom: var(--s16-p-);
}

#howitworks-wrap .hiw2__ticker {
  overflow: hidden;
  height: 1.1em;
  font-size: var(--s48-p-);
  font-weight: var(--ak--font-weight_200);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--ak-dark);
}

#howitworks-wrap .hiw2__ticker-list {
  display: flex;
  flex-direction: column;
  animation: hiw-ticker 9s linear infinite;
}

#howitworks-wrap .hiw2__ticker-item {
  height: 1.1em;
  line-height: 1.1;
  flex-shrink: 0;
}

#howitworks-wrap .hiw2__tagline {
  margin: 0.5em 0 0;
  font-size: clamp(1.5rem, 6vw, 2.2rem);
 font-weight: var(--ak--font-weight_600);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--ak-dark);
}

@keyframes hiw-ticker {
  0%    { transform: translateY(0);       animation-timing-function: ease-in-out; }
  24%   { transform: translateY(0);       animation-timing-function: ease-in-out; }
  33%   { transform: translateY(-1.1em);  animation-timing-function: ease-in-out; }
  57%   { transform: translateY(-1.1em);  animation-timing-function: ease-in-out; }
  66%   { transform: translateY(-2.2em);  animation-timing-function: ease-in-out; }
  90%   { transform: translateY(-2.2em);  animation-timing-function: ease-in-out; }
  100%  { transform: translateY(-3.3em);  }
}

@media (prefers-reduced-motion: reduce) {
  #howitworks-wrap .hiw2__ticker-list { animation: none; }
  #howitworks-wrap .hiw2__ticker { height: auto; }
  #howitworks-wrap .hiw2__ticker-item:not(:first-child) { display: none; }
}

#howitworks-wrap .hiw2__cta{
  flex: 0 0 auto;
  padding: var(--s16-p-);
  padding-bottom: max(var(--s16-p-), env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: var(--s16-p-);
  background: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

}

#howitworks-wrap .howitworks-start,
#signin-mobile-toast .howitworks-start{
  width: 100%;
  height: var(--s48-p-);
  border: 0;
  border-radius: var(--ak-radius-panel);
  background: var(--ak-dark);
  color: var(--ak-white) !important;
  font: inherit;
  font-size: var(--b-size);
   font-weight: var(--ak--font-weight_200);
  letter-spacing: var(--h1-letter-spacing);
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(0,0,0,0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  background-clip: border-box;
  border: var(--s1-p-) solid rgba(0, 0, 0, 0.491);

}

#howitworks-wrap .hiw2__meta{
  margin: 0;
  text-align: center;
  font-size: var(--account-size_small);
  line-height: 1.3;
  color: var(--ak-dark);
}

#howitworks-wrap .hiw2__meta a{
  color: var(--ak-dark);
   font-weight: var(--ak--font-weight_200);
  text-decoration: underline;
  text-underline-offset: 2px;
}

#howitworks-wrap .hiw2__meta strong{
     font-weight: var(--ak--font-weight_200);
  color: var(--ak-dark);
}
/* ===========================
   PLANS PANEL (account skin)
   =========================== */
.step-btn {
  position: relative;
  padding-left: var(--s12-p-);
  padding-right: var(--s12-p-);
}

.step-btn.active {
  background: var(--ak-accent);
  color: var(--ak-white);
}

.step-btn.active .step-icon-left,
.step-btn.active .step-icon-right {
  filter: invert(1) brightness(2);
}

.step-icon-left,
.step-icon-right {
  width: var(--s16-p-);
  height: var(--s16-p-);
  flex-shrink: 0;
}

.step-icon-left {
  margin-right: var(--s8-p-);
}

.step-icon-right {
  margin-left: var(--s8-p-);
}

/* step content card */
.howitworks-step {
  display: none;
  position: absolute;
  inset: 0;
  padding: var(--s12-p-);
  background: var(--ak-white);
  border-radius: var(--ak-radius-panel);
  box-shadow: var(--ak-shadow-soft);
  text-align: center;
}

.howitworks-step.active {
  display: block;
}

.howitworks-video {
  max-width: 100%;
  height: 240px;
  margin: 0 auto;
  background: var(--ak-offwhite);
}


/* Make panel body a flex column so we can pin footer */

#account-wrap.account-panel > .floating-panel__body,
#signin-mobile-toast.account-panel > .floating-panel__body{
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* DO NOT center the whole stack */
  padding: var(--panel-pad-y) var(--panel-pad-x);
}

#plans-wrap.account-panel > .floating-panel__body,
#projects-wrap.account-panel > .floating-panel__body,
#subscription-wrap.account-panel > .floating-panel__body{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: var(--s16-p-) var(--panel-pad-x) var(--panel-pad-y);
  position: relative;
}

#plans-wrap.account-panel > .floating-panel__body{
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--panel-pad-y) var(--panel-pad-x);
}

#subscription-wrap.account-panel > .floating-panel__body{
  background: var(--ak-white-sec);
  background-image: none;
  overflow-y: hidden;
}



#account-wrap .auth-module,
#signin-toast .auth-module{
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  gap: 0;
  text-align: left;
  /* Only affects header placement; keeps auth block centered */
  --auth-head-top: 0px;        
  --auth-head-reserve: 20px;  
  padding-top: var(--auth-head-reserve);
}


#signin-mobile-toast .auth-module{
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  gap: 0;
  text-align: left;
  /* Only affects header placement; keeps auth block centered */
  --auth-head-top: 0px;        
  --auth-head-reserve: 40px;  
  padding-top: var(--auth-head-reserve);
}

/* header placement tied to #account-wrap state */
#account-wrap:not(.is-signedin) .auth-head,
#signin-toast .auth-head{
  position: absolute;
  top: var(--auth-head-top);
  left: 0; right: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  /* auth view reserves head space */
}


#signin-mobile-toast .auth-head{
  position: absolute;
  top: var(--s12-p-);
  left: var(--s12-p-); right: var(--s12-p-);
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
}



#account-wrap.is-signedin .auth-module{ padding-top: 0; }
#account-wrap.is-signedin .auth-head{ position: static; margin-bottom: var(--s18-p-); }

/* prevent overlap during state transitions */
#account-wrap[hidden] { display: none !important; }



#plans-wrap .auth-head__kicker,
#subscription-wrap .auth-head__kicker,
#account-wrap .auth-head__kicker,
#projects-wrap .auth-head__kicker,
#signin-toast .auth-head__kicker{
  font-size: var(--a-size);
   font-weight: var(--ak--font-weight_200);
  color: var(--ak-dark);
  letter-spacing: var(--h1-letter-spacing);
  margin-bottom: var(--s18-p-);
}

#signin-mobile-toast .auth-head__kicker{
  padding: var(--s42-p-) 0 0 var(--s12-p-);
  font-size: var(--a-size);
   font-weight: var(--ak--font-weight_200);
  color: var(--ak-dark);
  letter-spacing: var(--h1-letter-spacing);
  margin-bottom: var(--s9-p-);
}

#account-wrap .auth-head__title,
#signin-toast .auth-head__title,
#signin-toast .signin-toast__title,
#signin-mobile-toast .auth-head__title{
  font-size: var(--b-size);
   font-weight: var(--ak--font-weight_200);
  color: var(--ak-dark);
  letter-spacing: var(--h1-letter-spacing);
}

#account-wrap .auth-head__meta,
#signin-toast .auth-head__meta,
#signin-mobile-toast .auth-head__meta{
  margin-top: var(--s30-p-);
  font-size: var(--font1-size);
  font-weight: var(--ak--font-weight_100);
  
}

#account-wrap .auth-block,
#signin-mobile-toast .auth-block{
  flex: 1 1 auto;          /* critical: take remaining height after reserved header */
  display: flex;
  justify-content: center; /* horizontal centering */
  align-items: center;     /* vertical centering */
}

#account-wrap .auth-block > #auth-mount{
  width: 100%;
  max-width: 420px;
}

/* Continue-without-account bar: full-width strip at the bottom of the panel body */
#account-wrap .auth-foot,
#signin-mobile-toast .auth-foot{
  margin-top: auto;
  width: 100%;
  padding-top: 0;
}

#signin-mobile-toast .auth-foot{
  margin-top: 0;
}

#account-wrap .auth-guestbar,
#signin-mobile-toast .auth-guestbar{
  margin-left: calc(var(--panel-pad-x) * -1);
  margin-right: calc(var(--panel-pad-x) * -1);
  margin-bottom: calc(var(--panel-pad-y) * -1);
  background: rgb(224, 224, 224);
  padding: 18px 24px;
  border: 0;
  display: flex;
  justify-content: center;
}

#account-wrap .auth-guestbar__btn{
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  font: inherit;
color: #5a5a5a;
  text-decoration: none;   /* matches your expected bar style */
  cursor: pointer;
}




#account-wrap .auth-guestbar__btn:focus-visible{
  outline: none;

}


#account-wrap .auth-link{
  display: inline;
  width: auto;
  margin: 0;
  line-height: 1.2;
}




/* Footer link: keep it visually separate */
#continue-no-account{
  font-size: var(--h3-size);
   font-weight: var(--ak--font-weight_400);
}

/* When plans panel is open, dim account panel a bit (optional, but clear) */
#projects-wrap.ak-under,
#account-wrap.ak-under{
  opacity: 0.25;
  filter: blur(0.2px);
}
/* ===========================
   ACCOUNT/PLANS PANELS ONLY
   =========================== */

/* Make header taller + ensure absolute positioning is possible */
#projects-wrap .floating-panel__header,
#subscription-wrap .floating-panel__header{
  position: relative;
  padding: var(--s16-p-) var(--s20-p-);
  min-height: 0;
}

#plans-wrap .floating-panel__header{
  position: relative;
  padding: var(--s28-p-) var(--s28-p-);
  min-height: 72px;
}

#account-wrap .floating-panel__header{
  position: relative;
  padding: var(--s16-p-) var(--s20-p-);   /* tighter */
  min-height: 0;        /* no forced empty height */
}

/* Put the close button top-right */
#projects-wrap .floating-panel__header-buttons,
#plans-wrap .floating-panel__header-buttons,
#subscription-wrap .floating-panel__header-buttons{
  position: absolute;
  top: var(--s12-p-);
  right: var(--s12-p-);
  display: flex;
  gap: var(--s6-p-);
}

#account-wrap .floating-panel__header-buttons{
  position: absolute;
  top: var(--s12-p-);
  right: var(--s12-p-);
  display: flex;
  gap: var(--s6-p-);
}
#account-wrap:not(.is-signedin) .floating-panel__header-buttons{
  display: none;
}

/* Optional: make the icon/button a clean click target */
#projects-wrap .floating-panel__btn,
#account-wrap .floating-panel__btn,
#plans-wrap .floating-panel__btn,
#subscription-wrap .floating-panel__btn{
  width: var(--s40-p-);
  height: var(--s40-p-);
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}


#projects-wrap .floating-panel__btn img,
#account-wrap .floating-panel__btn img,
#plans-wrap .floating-panel__btn img,
#subscription-wrap .floating-panel__btn img{
  width: var(--s24-p-);
  height: var(--s24-p-);
  display: block;
}

.auth-substep[aria-hidden="true"] { display: none; }
.auth-substep[aria-hidden="false"] { display: flex; flex-direction: column; gap: var(--s12-p-); }
.auth-error { min-height: 1.2em; }

#auth-form #btn-email-next[aria-hidden="true"] { display: none !important; }


#account-wrap .auth-disclosure{
  text-align: left;
  margin-top: var(--s8-p-);
}
/* single source of truth: state lives on #account-wrap */
#account-wrap.is-signedin .auth-module { display: none !important; }   /* hide auth when signed in */
#account-wrap.is-signedin #account-mount { display: flex !important; } /* show account view */

#account-wrap:not(.is-signedin) .auth-module { display: flex !important; }  /* show auth when signed out */
#account-wrap:not(.is-signedin) #account-mount { display: none !important; }/* hide account view */

#account-mount { flex: 1 1 auto; min-height: 0; } /* retain layout when visible */


#account-wrap.account-panel.is-signedin > .floating-panel__body{
  padding-top: var(--s16-p-);
}


/* ===========================
   ACCOUNT VIEW (SIGNED IN)
   =========================== */

#account-wrap #account-mount{
  width: 100%;
  max-width: 640px;
  margin: 0 auto;

  /* critical: allow footer push-down */
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

#account-wrap .account-divider{
  width: 100%;
  border-bottom: var(--s1-p-) solid rgba(0,0,0,0.14);
  margin: var(--s12-p-) 0;
}

/* Add divider directly under the "Account" title (no extra markup) */
#account-wrap #account-mount::before{
  content: "";
  display: block;
  border-bottom: var(--s1-p-) solid rgba(0,0,0,0.14);
  margin: var(--s18-p-) 0 var(--s10-p-) 0;
}

/* Rows are flat (no cards). 2 columns by default: label + value */
#account-wrap .account-row{
  display: grid;
  align-items: center;
  padding: var(--s14-p-) 0;

}

/* Key/Value rows (Username/Company + Sign-in): 2nd column narrower */
#account-wrap .account-row--kv,
#account-wrap .account-row--signin{
  grid-template-columns: minmax(180px, 1fr) minmax(120px, 200px);
  column-gap: var(--s20-p-);
}

/* Plan row: left text + right button */
#account-wrap .account-row--plan{
  grid-template-columns: minmax(180px, 1fr) 1fr;
  column-gap: var(--s20-p-);
}

#account-wrap .account-row--plan .account-row__action{
  justify-self: start;
}

/* Labels */
#account-wrap .account-row__label{
  font-size: var(--account-size_reg);
    font-weight: var(--ak--font-weight_200);
  color: var(--ak-dark);
  line-height: var(--lh-1-1);
}

/* Optional "(optional)" tag */
#account-wrap .account-row__opt{
  color: rgba(0,0,0,0.45);
   font-weight: var(--ak--font-weight_200);
}

/* Values: never wrap into vertical nonsense */
#account-wrap .account-row__value{
    font-size: var(--account-size_reg);
   font-weight: var(--ak--font-weight_200);
  letter-spacing: var(--account--letter-spacing_small);
  color: var(--ak-dark);
  line-height: var(--lh-1-1);

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

#account-wrap .account-row__value--action{
  display: inline-flex;
  align-items: center;
  overflow: visible;
}

#account-wrap #account-provider.account-provider--google{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

#account-wrap .account-provider-icon{
  width: var(--s12-p-);
  height: var(--s12-p-);
  flex: 0 0 var(--s12-p-);
}

#account-wrap .account-row__value .account-row--plan
{
    font-size: var(--account-size_large);
}


/* Plan button */
#account-wrap .account-pill{
  appearance: none;
  border: var(--s1-p-) solid var(--ak-dark);
  background: transparent;
  color: var(--ak-dark);
  height: var(--s40-p-);
  width: var(--s160-p-);

  border-radius: 999px;
  font: inherit;
  font-size: var(--account-size_reg);
  font-weight: var(--font3-weight);

  cursor: pointer;
}


#account-wrap .account-pill:hover{ background: var(--ak-hover); }
#account-wrap .account-pill:active{ background: rgba(0,0,0,0.07); }

/* Sign-in method: put reset button on its own line under the row */
#account-wrap .account-row--signin .account-row__action{
  grid-column: 1 / -1;
  margin-top: var(--s42-p-);
}

/* reset password chip */
#account-wrap .account-chip{
  appearance: none;
  border: 0;
  background:var(--ak-vertex-light);
  color: var(--ak-dark);

  height: var(--s28-p-);
  padding: 0 var(--s14-p-);
   border-radius: 999px;

  font: inherit;
  font-size: var(--account-size_small);
  letter-spacing: var(--account--letter-spacing_small);
  font-weight: var(--account--font-weight_1);
  cursor: pointer;
}

#account-wrap .account-chip:hover{

  background:var(--ak-accent);

}

/* Footer actions: two grey pills at bottom */
#account-wrap .account-actions{
  margin-top: auto;
  padding-top: var(--s28-p-);
  display: flex;
  justify-content: flex-start;
}

#account-wrap .account-signout{
  appearance: none;
  border: 0;
  height: var(--s36-p-);
  padding: 0 var(--s16-p-);
  border-radius: var(--ak-radius-pill);
  font: inherit;
    font-size: var(--account-size_small);
  font-weight: var(--account--font-weight_1);
  cursor: pointer;
}

#account-wrap .account-signout{
  display: inline-flex;
  align-items: center;
  gap: var(--s12-p-);
  background: var(--ak-vertex-light);
  color: var(--ak-inactive);

}


#account-wrap .account-signout__icon{
  width: var(--s18-p-);
  height: var(--s18-p-);
  flex: 0 0 var(--s18-p-);
}

#account-wrap .account-delete-row{
  padding-top: var(--s14-p-);
}

#account-wrap .account-delete-link{
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  color: var(--ak-dark);
  font: inherit;
  font-size: var(--account-size_reg);
  font-weight: var(--ak--font-weight_200);
  text-decoration: none;
  cursor: pointer;
}

#account-wrap .account-delete-link:hover{
  color: rgb(175, 48, 48);
  font-weight: var(--ak--font-weight_600);
  text-decoration: none;
}

#account-wrap .account-delete-link:active{
  color: rgba(175, 48, 48, 0.7);
  text-decoration: none;
}


#account-wrap .account-signout:hover
{ background: var(--ak-accent);
  color: var(--ak-dark);
}


#account-wrap .account-signout:active
{ background: rgba(0,0,0,0.14); }

#account-wrap .account-view{
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
#account-wrap .account-input{
  appearance: none;
  border: 0;
  outline: none;
  background: transparent;
  padding: 0;
  margin: 0;
  width: 100%;

  font: inherit;        /* you control weight/color elsewhere */
  color: inherit;
  font-weight: inherit;
}

#account-wrap .account-plan__brand{
  font-weight: var(--account--font-weight_1) !important;
  font-size: var(--account-size_large);
}

#account-wrap .account-plan__name.is-free{
  font-weight: var(--account--font-weight_2) !important;
  font-size: var(--account-size_large);
  color: var(--ak-Litesub);
}
#account-wrap .account-plan__name.is-plus{
  color: #1f9d55;
  font-weight: var(--ak--font-weight_400);
  font-size: var(--account-size_large);
}

#account-wrap #account-planbtn-b.is-plus{
  font-weight: var(--ak--font-weight_400);
}

#account-wrap .account-plan__name.is-pro{
  font-weight: var(--account--font-weight_2) !important;
  font-size: var(--account-size_large);
}

/* make hidden steps truly non-hit-testable */
.auth-start[hidden],
.auth-emailstep[hidden],
.auth-substep[hidden] { display: none !important; pointer-events: none !important; }

/* belt-and-suspenders: keep inputs above neighbors */
#account-wrap .auth-input { position: relative; z-index: 1; pointer-events: auto; }

/* Manage popover (Invoices / Cancel) */
.export-manage-menu,
.account-manage-menu {
  position: fixed;
  width: 240px;
  max-width: calc(100vw - 24px);
  background: var(--ak-white-sec, #fff);
  border: var(--s1-p-, 1px) solid rgba(0,0,0,0.14);
  border-radius: var(--ak-radius-pill);
  box-shadow: 0 10px 28px rgba(0,0,0,0.18);
  padding: var(--s8-p-);
  z-index: 1001;
}


.export-manage-menu__item,
.account-manage-menu__item {
  display: block;
  width: 100%;
  text-align: left;
  appearance: none;
  border: 0;
  background: transparent;
  border-radius: var(--ak-radius-pill);
  padding: var(--s10-p-) var(--s12-p-);
  font: inherit;
  font-size: var(--account-size_reg, 14px);
  line-height: 1.2;
  color: var(--ak-dark, #111);
  cursor: pointer;
}
.export-manage-menu__item:hover,
.export-manage-menu__item:focus,
.account-manage-menu__item:hover,
.account-manage-menu__item:focus {
  background: var(--ak-hover, rgba(0,0,0,0.06));
  outline: none;
}


.account-manage-menu__item.is-danger { color: #b52318; }

.export-manage-menu__item.is-danger:hover,
.export-manage-menu__item.is-danger:focus,
.account-manage-menu__item.is-danger:hover,
.account-manage-menu__item.is-danger:focus { background: rgba(181,35,24,0.08); }
.account-manage-menu__note {
  display: block;
  padding: var(--s8-p-) var(--s12-p-) var(--s6-p-) var(--s12-p-);
  font-size: var(--account-size_small, 12px);
  line-height: 1.2;
  color: rgba(0,0,0,0.66);
  pointer-events: none;
}



#account-wrap .account-plan__sub{
  margin-top: var(--s4-p-);
  font-size: var(--account-size_small);
  line-height: var(--lh-1-1);
  color: var(--ak-mid-gray);
}

#account-wrap .account-plan__sub.is-cancelled{
  color: #b33; /* or a token like var(--ak-danger) */
  font-weight: var(--account--font-weight_1);
}

/* Optional: note inside the Manage menu ("Ends DD-MM-YY") */
.account-manage-menu__note{
  padding: var(--s8-p-) var(--s12-p-);
  font-size: var(--account-size_small);
  color: var(--ak-mid-gray);
  pointer-events: none;
}


/* ===========================
   PLANS PANEL (account skin)
   =========================== */
#signin-toast .plans-ui,
#plans-wrap .plans-ui{
  width: 100%;
}

#signin-toast .plans-ui{
  margin-top: var(--s90-p-);
}

#signin-toast .plans-title,
#plans-wrap .plans-title{
  margin: 0 0 var(--s18-p-);
  font-size: var(--a-size);
  font-weight: var(--account--font-weight_1);
  letter-spacing: var(--h1-letter-spacing);
  color: var(--ak-dark);
}
#signin-toast .plans-cards,
#plans-wrap .plans-cards{
  display: grid;
  gap: var(--s20-p-);
}
#signin-toast .plans-card,
#plans-wrap .plans-card{
  background: var(--ak-glass-bg);
  border: var(--s1-p-) solid rgba(0,0,0,0.08);
  border-radius: var(--ak-radius-card);
  box-shadow: 0 var(--s5-p-) var(--s16-p-) rgba(0,0,0,.06);
  padding: var(--s18-p-);
  display: grid;
  grid-template-columns: 1fr 180px;
  column-gap: var(--s18-p-);
  row-gap: var(--s12-p-);
  align-items: flex-start;

}

#signin-toast .plans-card,
#plans-wrap .plans-card {
  background-color: rgba(255,255,255,0.65); /* translucent base so blur shows through */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: var(--s1-p-) solid rgba(0,0,0,0.06);
}

#signin-toast .plans-card__top,
#plans-wrap .plans-card__top,
#subscription-wrap .plans-card__top{
  grid-column: 1 / 3;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s18-p-);
  margin-bottom: 0;
}
#signin-toast .plans-card__plan,
#plans-wrap .plans-card__plan,
#subscription-wrap .plans-card__plan{
  font-size: var(--b-size);
  font-weight: var(--account--font-weight_2);
  color: var(--ak-dark);
}

#signin-toast .plans-card__plan--lite,
#plans-wrap .plans-card__plan--lite,
#subscription-wrap .plans-card__plan--lite{
  color: var(--ak-Litesub);
}
#signin-toast .plans-card__slash,
#signin-toast .plans-card__mode,
#plans-wrap .plans-card__slash,
#plans-wrap .plans-card__mode,
#subscription-wrap .plans-card__slash,
#subscription-wrap .plans-card__mode{
  font-size: var(--b-size);
  font-weight: var(--account--font-weight_0);
  color: var(--ak-dark)
}
#signin-toast .plans-card__slash,
#plans-wrap .plans-card__slash{ margin: 0px; }

#signin-toast .plans-card__sub,
#plans-wrap .plans-card__sub{
  margin-top: var(--s4-p-);
  font-size: var(--account-size_small);
  color: var(--ak-dark);
}
#signin-toast .plans-card__price,
#plans-wrap .plans-card__price{
  text-align: right;
  white-space: nowrap;
}
#signin-toast .plans-card__amount,
#plans-wrap .plans-card__amount{
  font-size: var(--a-size);
  font-weight: var(--account--font-weight_1);
  letter-spacing: var(--account--letter-spacing_small);
  color: var(--ak-dark);
}
#signin-toast .plans-card__per,
#plans-wrap .plans-card__per{
  font-size: var(--account-size_small);
    font-weight: var(--account--font-weight_0);
  letter-spacing: var(--account--letter-spacing_small);
  color: var(--ak-dark);
  margin-left: 0px;
}
#signin-toast .plans-btn,
#plans-wrap .plans-btn{
  grid-column: 2 / 3;
  justify-self: stretch;
  align-self: center;
  width: 100%;
  padding: 0 var(--s24-p-);
  height: var(--ak-height-pill);
  border-radius: calc(var(--ak-radius-pill) * 1.8);
  border: var(--s1-p-) solid var(--ak-dark);
  background: var(--ak-white-sec);
  color: var(--ak-dark);
  font: inherit;
  font-size: var(--account-size_reg);
  font-weight: var(--account--font-weight_1);
  cursor: pointer;
  box-shadow: var(--ak-shadow-soft);
  margin: 0;

  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1;
  white-space: nowrap;
}
#signin-toast .plans-btn:hover,
#plans-wrap .plans-btn:hover{
  background: var(--ak-hover);
}
#signin-toast .plans-btn--primary,
#plans-wrap .plans-btn--primary{
  background: var(--ak-dark);
  color: var(--ak-white);
  border-color: transparent;
}

/* ===========================
   SUBSCRIPTION PANEL
   =========================== */

#subscription-wrap .subscription-view{
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

#subscription-wrap .subscription-divider{
  width: 100%;
  border-bottom: var(--s1-p-) solid rgba(0,0,0,0.14);
  margin: var(--s12-p-) 0;
}

#subscription-wrap .subscription-divider--footer{
  margin-top: auto;
  margin-bottom: var(--s16-p-);
}

#subscription-wrap .subscription-row{
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(180px, 240px);
  column-gap: var(--s24-p-);
  align-items: flex-start;
  padding: var(--s10-p-) 0;
}

#subscription-wrap .subscription-row__label{
  min-width: 0;
}

#subscription-wrap .subscription-row__eyebrow{
  margin-bottom: var(--s8-p-);
  font-size: var(--account-size_small);
  line-height: 1.2;
  color: rgba(0,0,0,0.42);
}

#subscription-wrap .subscription-row__plan{
  display: flex;
  align-items: baseline;
  gap: 0;
  font-size: var(--account-size_large);
  line-height: 1.15;
  color: var(--ak-dark);
}

#subscription-wrap .subscription-row__brand{
  font-weight: var(--account--font-weight_1);
}

#subscription-wrap .subscription-row__tier{
  font-weight: var(--account--font-weight_2);
}

#subscription-wrap .subscription-row__tier--lite{
  color: var(--ak-Litesub);
}

#subscription-wrap .subscription-row__content{
  display: flex;
  flex-direction: column;
  gap: var(--s14-p-);
  min-width: 0;
}

#subscription-wrap .subscription-row__item{
  font-size: var(--account-size_reg);
    font-weight: var(--ak--font-weight_200);
  line-height: 1.3;
  color: var(--ak-dark);
}

#subscription-wrap .subscription-row__item--strong{
  font-weight: var(--ak--font-weight_200);
}

#subscription-wrap .subscription-actions{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 250px);
  column-gap: var(--s24-p-);
  align-items: center;
  padding: var(--s32-p-) 0 var(--s18-p-);
}

#subscription-wrap .subscription-price__line{
  display: flex;
  align-items: baseline;
  gap: var(--s5-p-);
  color: var(--ak-dark);
}

#subscription-wrap .subscription-price__amount{
 font-size: var(--a-size);
  line-height: 1;
    font-weight: var(--ak--font-weight_200);
}

#subscription-wrap .subscription-price__per{
  font-size: var(--c-size);
  line-height: 1;
    font-weight: var(--ak--font-weight_100);
  color: rgba(0,0,0,0.52);
}

#subscription-wrap .subscription-price__meta{
  margin-top: var(--s8-p-);
  font-size: var(--account-size_small);
  line-height: 1.2;
  color: rgba(0,0,0,0.46);
}

#subscription-wrap .account-pill.subscription-cta{
  appearance: none;
  justify-self: end;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 250px;
  height: var(--s40-p-);
  padding: 0 var(--s48-p-) 0 var(--s24-p-);
  border: var(--s1-p-) solid var(--ak-dark);
  border-radius: 999px;
  background: transparent;
  color: var(--ak-dark);
  font: inherit;
  font-size: var(--account-size_reg);
  font-weight: var(--account--font-weight_1);
  cursor: pointer;
}

#subscription-wrap .account-pill.subscription-cta::after{
  content: "";
  position: absolute;
  right: var(--s18-p-);
  top: 50%;
  transform: translateY(-50%);
  width: var(--s16-p-);
  height: var(--s16-p-);
  background-color: var(--ak-icon-default);
  mask: url("/icons/chevron-right.svg") center/contain no-repeat;
  -webkit-mask: url("/icons/chevron-right.svg") center/contain no-repeat;
}

#subscription-wrap .account-pill.subscription-cta:hover{
  background: var(--ak-hover);
}

#subscription-wrap .subscription-trust{
  padding: var(--s18-p-) 0 var(--s24-p-);
  text-align: center;
  font-size: var(--account-size_small);
  line-height: 1.25;
  color: rgba(0,0,0,0.58);
}

#subscription-wrap .subscription-trust strong{
  color: var(--ak-dark);
  font-weight: var(--account--font-weight_2);
}

#subscription-wrap .subscription-trust__brand{
  display: inline-block;
  width: var(--s32-p-);
  height: auto;
  vertical-align: -2px;
}

#subscription-wrap .subscription-footer{
  text-align: center;
  font-size: var(--account-size_small);
  line-height: 1.35;
  color: rgba(0,0,0,0.56);
}

#subscription-wrap .subscription-footer a{
  color: inherit;
  text-decoration: underline;
  text-underline-offset: var(--s4-p-);
}

.contact-form-host{
  position: absolute;
  right: var(--s24-p-);
  bottom: var(--s24-p-);
  z-index: 2;
}

.contact-form-host[data-contact-form-placement="floating"],
.contact-form-host--fixed{
  position: fixed;
  right: var(--s24-p-);
  bottom: var(--s24-p-);
  z-index: 40;
}

.contact-widget{
  position: relative;
  display: flex;
  justify-content: flex-end;
}

.contact-widget__toggle,
.contact-widget__submit{
  appearance: none;
  border: 0;
  border-radius: 999px;
  font: inherit;
}

.contact-widget__toggle{
  width: var(--s42-p-);
  height: var(--s42-p-);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: var(--float-svg-default);
  color: var(--ak-white);
  box-shadow: var(--ak-shadow-strong);
  cursor: pointer;
  font-size: var(--app_font_mid-size-ui);
  line-height: 1;
}

.contact-widget__toggle-icon{
  display: block;
  width: var(--s20-p-);
  height: var(--s20-p-);
  background-color: currentColor;
  mask: url("/icons/contact.svg") center/contain no-repeat;
  -webkit-mask: url("/icons/contact.svg") center/contain no-repeat;
}

.contact-widget__toggle:hover,
.contact-widget__toggle:focus-visible,
.contact-widget.is-open .contact-widget__toggle{
  background: var(--ak-accent);
  color: var(--ak-white);
}

.contact-widget__panel{
  position: absolute;
  right: 0;
  bottom: calc(100% + var(--s10-p-));
  width: min(320px, calc(100vw - var(--s48-p-)));
  display: flex;
  flex-direction: column;
  gap: var(--s32-p-);
  padding: var(--s18-p-);
  border: var(--s1-p-) solid rgba(0,0,0,0.08);
  border-radius: var(--ak-radius-panel);
  background: var(--ak-offwhite);
  box-shadow: var(--ak-shadow-strong);
}

.contact-widget__panel[hidden]{
  display: none;
}

.contact-widget__title{
  color: var(--ak-dark);
  font-size: var(--b-size);
  font-weight: var(--ak--font-weight_200);
  letter-spacing: var(--h2--letter-spacing);
  padding-left: var(--s12-p-);
    padding-top: var(--s12-p-);
  line-height: 1.1;
}

.contact-widget__input,
.contact-widget__textarea{
  width: 100%;
  border: var(--s1-p-) solid rgba(0,0,0,0.12);
  border-radius: var(--ak-radius-card);
  background: var(--ak-offwhite);
  color: var(--ak-dark);
  font: inherit;
  font-size: var(--account-size_reg);
  line-height: 1.35;
  box-sizing: border-box;
}

.contact-widget__input{
  height: var(--s42-p-);
  padding: 0 var(--s12-p-);
}

.contact-widget__textarea{
  min-height: calc(var(--s72-p-) + var(--s20-p-));
  resize: vertical;
  padding: var(--s10-p-) var(--s12-p-);
}

.contact-widget__input::placeholder,
.contact-widget__textarea::placeholder{
  color: rgba(0,0,0,0.42);
}

.contact-widget__input[aria-invalid="true"],
.contact-widget__textarea[aria-invalid="true"]{
  border-color: rgba(220, 60, 60, 0.65);
}

.contact-widget__actions{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s10-p-);
}

.contact-widget__submit{
  min-width: calc(var(--s64-p-) + var(--s18-p-));
  height: var(--s36-p-);
  padding: 0 var(--s16-p-);
  background: var(--ak-white);
    border: var(--s1-p-) solid rgba(0,0,0,0.08);
  color: var(--ak-dark);
  cursor: pointer;
}

.contact-widget__submit:hover,
.contact-widget__submit:focus-visible{
  background: var(--ak-accent);
}

.contact-widget__submit:disabled{
  opacity: 0.6;
  cursor: default;
}

.contact-widget__status{
  min-width: var(--s42-p-);
  color: var(--ak-dark);
  font-size: var(--account-size_small);
  line-height: 1.2;
  text-align: right;
}

@media (max-width: 640px) {
  .contact-form-host{
    right: var(--s16-p-);
    bottom: var(--s16-p-);
  }

.contact-form-host[data-contact-form-placement="floating"],
  .contact-form-host--fixed{
    right: var(--s16-p-);
    bottom: var(--s16-p-);
  }

  .contact-widget__panel{
    width: min(300px, calc(100vw - var(--s32-p-)));
  }
  #howitworks-wrap .hiw2__ticker {
  overflow: hidden;
  height: 1.1em;
  font-size: var(--s36-p-);
  font-weight: var(--ak--font-weight_200);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--ak-dark);
}
}

@media (max-width: 640px) {
  #subscription-wrap .subscription-row,
  #subscription-wrap .subscription-actions{
    grid-template-columns: 1fr;
    row-gap: var(--s16-p-);
  }

  #subscription-wrap .account-pill.subscription-cta{
    justify-self: stretch;
    max-width: none;
  }
}
#signin-toast .plans-btn--primary:hover,
#plans-wrap .plans-btn--primary:hover{
  background: var(--ak-hover);
  color: var(--ak-dark);
}
#signin-toast .plans-list,
#plans-wrap .plans-list{
  grid-column: 1 / 2;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--s10-p-);
  font-size: var(--account-size_small);
  font-weight: var(--account--font-weight_2);
  color: var(--ak-dark)
}

#signin-toast .plans-list li,
#plans-wrap .plans-list li{
  display: flex;
  gap: var(--s10-p-);
  align-items: flex-start;
}
#signin-toast .plans-list li::before,
#plans-wrap .plans-list li::before{
  content: "✓";
  display: inline-block;
  width: 1.2em;
  color: var(--ak-dark);
  opacity: 0.9;
}
#signin-toast .plans-list .plans-list__note,
#plans-wrap .plans-list .plans-list__note{
  color: var(--ak-vertex-light);
}
#signin-toast .plans-list .plans-list__note::before,
#plans-wrap .plans-list .plans-list__note::before{
  content: none;
}



@media (max-width: 420px){
  #account-wrap .account-row--kv,
  #account-wrap .account-row--signin{
    grid-template-columns: 1fr;
  }
  #account-wrap .account-actions{
    grid-template-columns: 1fr;
  }
}

#signin-toast.signin-toast.account-panel {
  left: 50%;
  top: 50%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
  width: min(480px, calc(100vw - 32px));
  height: 720px;
  min-height: 0;
  z-index: 995;
}

#signin-toast[hidden] {
  display: none !important;
  pointer-events: none !important;
}

#signin-toast:not([hidden]) {
  display: flex !important;
  pointer-events: auto;
}

#signin-toast .signin-toast__header {
  min-height: 0;
  padding: 10px 14px 0 14px;
}

#signin-toast .signin-toast__bodywrap {
  padding: var(--panel-pad-y) var(--panel-pad-x);
  overflow-y: hidden;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

#signin-toast .signin-toast__body {
  font-size: var(--font1-size);
  font-weight: var(--ak--font-weight_200);
  color: var(--ak-dark);
  margin: 0 0 14px 0;
  display: none;
}

#signin-toast .auth-foot {
  margin-top: auto;
  width: 100%;
  padding-top: 0;
}

#signin-toast .auth-guestbar {
  margin-left: calc(var(--panel-pad-x) * -1);
  margin-right: calc(var(--panel-pad-x) * -1);
  margin-bottom: calc(var(--panel-pad-y) * -1);
  background: var(--ak-offwhite);
  padding: 18px 24px;
  border: 0;
  display: flex;
  justify-content: center;
}

#signin-toast .signin-toast__block {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
}

#signin-toast .signin-toast__cta {
  width: 100%;
}

#signin-toast .signin-toast__dismiss,
#signin-mobile-toast .signin-toast__dismiss {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  font: inherit;
  color: #5a5a5a;
  text-decoration: none;
  cursor: pointer;
}

#signin-mobile-toast.signin-mobile-toast.account-panel {
  z-index: 997;
  height: 320px;
  background-image: url("/media/mprojo.webp");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
  background-origin: border-box;
  background-clip: border-box;
}

#signin-mobile-toast[hidden] {
  display: none !important;
  pointer-events: none !important;
}

#signin-mobile-toast:not([hidden]) {
  display: flex !important;
  pointer-events: auto;
}

#signin-mobile-toast .signin-mobile-toast__module {
  flex: 1 1 auto;
  min-height: 0;
}

#signin-mobile-toast .signin-mobile-toast__block {
  flex: 1 1 auto;
  justify-content: center;
}

#signin-mobile-toast .signin-mobile-toast__cta {
  width: 100%;
}

@media (max-width: 821px) {

#howitworks-wrap.account-panel {
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100vh !important;
  height: 100svh !important;
  max-height: 100svh !important;
  top: 0 !important;
  left: 0 !important;
  transform: none !important;
  border-radius: 0 !important;
}

#howitworks-wrap .hiw2__feature{
  grid-template-columns: 88px minmax(0, 1fr);
  min-height: 0;
}

#howitworks-wrap .hiw2__media{
  min-height: 0;
  height: 100%;
}

#howitworks-wrap .hiw2__img{
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
}




  #signin-toast .plans-btn,
  #plans-wrap .plans-btn {
    grid-column: 1 / 4;
    justify-self: stretch;
    align-self: start;
  }

  #signin-toast .plans-list,
  #plans-wrap .plans-list {
    grid-column: 1 / 4;
  }

  #signin-toast.signin-toast.account-panel {
    width: min(480px, calc(100vw - 32px));
    height: 580px;
  }
#signin-mobile-toast.signin-mobile-toast.account-panel {
  height: 540px;
}
#plans-wrap.account-panel,
#projects-wrap.account-panel,
  .account-panel {
  height: 580px;            
}
#signin-toast .plans-ui{
  margin-top: var(--s36-p-);
}


.account-panel {
  display: flex;
  flex-direction: column;
  position: fixed;

  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  /* size */
  width: min(480px, calc(100vw - 32px));
  height: 640px;            
  overflow: hidden;

  --panel-pad-x: 12px;
  --panel-pad-y: 12px;

    background-color: var(--ak-white-sec);
}
}

@media (min-width: 822px) {
  #signin-mobile-toast-overlay,
  #signin-mobile-toast {
    display: none !important;
    pointer-events: none !important;
  }
}