/* ==========================================================================
   auth.css — Sign In / Register.  MEASURED off `Sign In - Desktop` 17564:13863
   Web/Header Compact 1920x90 · Web/Auth Card 440x472 · Web/Footer Compact 91
   ========================================================================== */

.authpage { min-height: 100vh; display: flex; flex-direction: column; background: #f8f8f8; }

/* ---- Web/Header Compact -------------------------------------------------- */
.authhd { height: 90px; flex: 0 0 90px; padding: 25px 185px; background: #fff;
          box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .07);
          display: flex; align-items: center; justify-content: space-between; }
.authhd__logo { display: inline-flex; }
.authhd__logo svg, .authhd__logo img { height: 40px; width: auto; }
.authhd__help { display: flex; align-items: center; gap: 6px; }
.authhd__help span { font: 500 14px/128% Inter, sans-serif; color: #656772; }
.authhd__help a    { font: 600 14px/128% Inter, sans-serif; color: #101828; text-decoration: none; }

/* ---- Content ------------------------------------------------------------- */
.authmain { flex: 1 1 auto; padding: 72px 185px 88px;
            display: flex; justify-content: center; }
.auth__col { width: 440px; max-width: 100%; display: flex; flex-direction: column; gap: 20px; }

/* ---- Web/Auth Card ------------------------------------------------------- */
.auth__card { padding: 32px; border-radius: 16px; background: #fff;
              box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .07);
              display: flex; flex-direction: column; gap: 20px; }
.auth__head  { display: flex; flex-direction: column; gap: 8px; }
.auth__title { font: 400 30px/128% Inter, sans-serif; color: #101828; margin: 0; }
.auth__sub   { font: 400 16px/128% Inter, sans-serif; color: #656772; margin: 0; }

.auth__fields { display: flex; flex-direction: column; gap: 16px; }
.auth__f   { display: flex; flex-direction: column; gap: 6px; }
.auth__fk  { font: 500 16px/1.2 Inter, sans-serif; color: #101828; }
.auth__fbox { height: 46px; display: flex; align-items: center; gap: 10px;
              padding: 0 14px; border-radius: 8px; background: #fff;
              box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.auth__fbox:focus-within { box-shadow: inset 0 0 0 1px #00805f; }
.auth__in { flex: 1 1 auto; min-width: 0; border: 0; background: none; outline: none;
            font: 400 16px/128% Inter, sans-serif; color: #101828; }
.auth__in::placeholder { color: #656772; }
.auth__eye { flex: 0 0 20px; height: 20px; padding: 0; border: 0; background: none;
             cursor: pointer; display: inline-flex; }
.auth__eye svg { fill: #656772; }
.auth__eye.is-on svg { fill: #00805f; }

.auth__err { font: 500 14px/128% Inter, sans-serif; color: #e02b2b; margin: 0; }

.auth__forgot { font: 600 14px/128% Inter, sans-serif; color: #00805f;
                text-decoration: none; align-self: flex-start; }
.auth__forgot:hover { text-decoration: underline; }

.auth__cta { height: 48px; border: 0; border-radius: 10px; background: #00805f;
             cursor: pointer; font: 600 16px/1 Inter, sans-serif; color: #fff; }
.auth__cta:hover { background: #006c50; }

.auth__alt { display: flex; align-items: center; justify-content: center; gap: 6px; }
.auth__alt span { font: 500 14px/128% Inter, sans-serif; color: #656772; }
.auth__alt a    { font: 600 14px/128% Inter, sans-serif; color: #00805f; text-decoration: none; }
.auth__alt a:hover { text-decoration: underline; }

/* ---- "Or continue with" -------------------------------------------------- */
.auth__div { display: flex; align-items: center; gap: 12px; }
.auth__div i { flex: 1 1 auto; height: 1px; background: rgba(0, 0, 0, .15); }
.auth__div span { font: 500 14px/128% Inter, sans-serif; color: #656772; }

/* ---- Web/Social Button --------------------------------------------------- */
.auth__social { display: flex; flex-direction: column; gap: 10px; }
.auth__soc { height: 46px; border: 0; border-radius: 8px; background: #fff;
             box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); cursor: pointer;
             display: flex; align-items: center; justify-content: center; gap: 10px;
             font: 500 16px/1 Inter, sans-serif; color: #101828; }
.auth__soc:hover { background: #f8f8f8; }
.auth__soc svg { flex: 0 0 20px; }
.auth__soc--google svg { fill: #4285f4; }
.auth__soc--apple  svg { fill: #000000; }
.auth__soc--amazon svg { fill: #ff9900; }

/* ---- prototype-only persona picker (not in Figma) ------------------------ */
.auth__demo { display: flex; flex-direction: column; gap: 8px; padding: 16px;
              border-radius: 12px; background: rgba(0, 0, 0, .03); }
.auth__demok { font: 600 11px/1 Inter, sans-serif; letter-spacing: .06em;
               text-transform: uppercase; color: #656772; }
.demo-pick { display: flex; align-items: center; gap: 10px; padding: 10px 12px;
             border: 0; border-radius: 10px; background: #fff; cursor: pointer;
             box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .07); text-align: left; }
.demo-pick:hover { box-shadow: inset 0 0 0 1px #00805f; }
.demo-pick__av { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 999px;
                 display: inline-grid; place-items: center; color: #fff;
                 font: 600 12px/1 Inter, sans-serif; }
.demo-pick__av.is-sales { background: #275cd3; }
.demo-pick__av.is-cust  { background: #00805f; }
.demo-pick__t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.demo-pick__t strong { font: 600 14px/1.25 Inter, sans-serif; color: #101828; }
.demo-pick__t small  { font: 400 12px/1.3 Inter, sans-serif; color: #656772;
                       overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo-pick__go { flex: 0 0 16px; color: #656772; }
.auth__note { font: 400 12px/1.4 Inter, sans-serif; color: #656772; margin: 4px 0 0; }

/* ---- Web/Footer Compact -------------------------------------------------- */
.authft { padding: 20px 185px; background: #2c2c35;
          display: flex; flex-direction: column; gap: 8px; }
.authft__top { display: flex; align-items: center; gap: 24px; }
.authft__pay { display: flex; align-items: center; gap: 10px; }
.authft__pay img { display: block; height: 28px; width: auto; }
.authft__links { display: flex; align-items: center; gap: 24px; }
.authft__links a { font: 400 14px/128% Inter, sans-serif;
                   color: rgba(255, 255, 255, .75); text-decoration: none; }
.authft__links a:hover { color: #fff; }
.authft__c { font: 400 12px/128% Inter, sans-serif; color: rgba(255, 255, 255, .75); }

@media (max-width: 1200px) {
  .authhd { padding: 25px 40px; }
  .authmain { padding: 48px 24px 64px; }
  .authft { padding: 20px 40px; }
  .authft__top { flex-wrap: wrap; gap: 16px; }
}

/* ==========================================================================
   Register flow — `Auth - Register flow`, measured off the mobile twins
   (17535:11115 · 18956:52835 · 17554:12507 / 12751 / 12846 · 17577:42155).
   Content pad 20/16/32/16 gap 20 on the step frames, 28/16/36/16 gap 24 on
   the entry frame. Card 358 r16 #fff with a 1px INSIDE #000@7% stroke.
   ========================================================================== */
.regmain { padding: 20px 16px 32px; background: #f8f8f8; }
.reg { display: flex; flex-direction: column; gap: 20px;
       width: 100%; max-width: 358px; margin: 0 auto; }
.reg--entry { gap: 24px; padding: 8px 0 4px; }

/* Data/Step Indicator, Device=Mobile — the same control the checkout uses */
.regstep { display: flex; flex-direction: column; gap: 8px; }
.regstep__t { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.regstep__n { font: 600 13px/1.28 Inter, sans-serif; color: #00805f; }
.regstep__l { font: 500 12px/1.28 Inter, sans-serif; color: #364153; }
.regstep__track { height: 6px; border-radius: 999px; background: #f0f0f0; overflow: hidden; }
.regstep__track i { display: block; height: 6px; border-radius: 999px; background: #00805f; }

.regcard { display: flex; flex-direction: column; gap: 20px; padding: 20px;
           border-radius: 16px; background: #fff;
           box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .07); }
.reg--entry .regcard { padding: 24px; }

.reghead { display: flex; flex-direction: column; gap: 6px; }
.reghead h1 { font: 400 22px/1.28 Inter, sans-serif; color: #101828; margin: 0; }
.reghead p  { font: 400 14px/1.28 Inter, sans-serif; color: #656772; margin: 0; }

.regform { display: flex; flex-direction: column; gap: 16px; }
.regrow  { display: flex; gap: 12px; }
.regrow > .regf { flex: 1 1 0; min-width: 0; }

/* Web/Field — label Medium 14, input 44 r8 with a 1px INSIDE stroke */
.regf { display: flex; flex-direction: column; gap: 6px; }
.regf__k { font: 500 14px/1.21 Inter, sans-serif; color: #101828; }
.regf__box { display: flex; align-items: center; gap: 10px; height: 44px;
             padding: 0 14px; border-radius: 8px; background: #fff;
             box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.regf--pw .regf__box { height: 46px; }        /* the 20px eye sets this one */
.regf__box:focus-within { box-shadow: inset 0 0 0 1.5px #00805f; }
.regf__in { flex: 1 1 auto; min-width: 0; border: 0; outline: none; background: none;
            font: 400 14px/1.28 Inter, sans-serif; color: #101828; }
.regf__in::placeholder { color: #656772; }
.regf__in:disabled { color: #656772; }
.regf__eye { flex: 0 0 20px; display: inline-grid; place-items: center; color: #656772; }
.regf__help { font: 400 11px/1.28 Inter, sans-serif; color: #656772; }

/* the six-box code row — 44x52 r8 gap 6, both axes fixed so a real border
   is safe here */
.regcode { display: flex; gap: 6px; }
.regcode__b { width: 44px; height: 52px; text-align: center; padding: 0;
              border: 1px solid rgba(0, 0, 0, .15); border-radius: 8px;
              background: #fff; box-sizing: border-box; outline: none;
              font: 600 20px/1 Inter, sans-serif; color: #101828; }
.regcode__b:focus { border: 2px solid #00805f; }

/* actions — primary first, then secondary, then the skip link */
.regacts { display: flex; flex-direction: column; gap: 12px; }
.regbtn { height: 48px; border: 0; cursor: pointer; border-radius: 10px;
          display: inline-flex; align-items: center; justify-content: center; gap: 8px;
          font: 600 14px/1 Inter, sans-serif; }
.regbtn--p { background: #00805f; color: #fff; }
.regbtn--p:hover { background: #006c50; }
.regbtn--p svg { stroke: currentColor; }
.regbtn--s { background: #fff; color: #364153;
             box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.regbtn--s:hover { background: #f8f8f8; }
.regskip { border: 0; background: none; cursor: pointer; padding: 0;
           font: 500 14px/1.21 Inter, sans-serif; color: #00805f; text-align: center; }

.reglegal { font: 400 11px/1.28 Inter, sans-serif; color: #656772; margin: 0; }
.regnote  { font: 500 12px/1.28 Inter, sans-serif; color: #364153; margin: 0; }
.regalt { display: flex; align-items: center; justify-content: center; gap: 6px; }
.regalt span { font: 500 12px/1.28 Inter, sans-serif; color: #656772; }
.regalt a { font: 600 13px/1.28 Inter, sans-serif; color: #00805f; text-decoration: none; }

/* Web/Checkbox State=On — 20px box r4 #00805f with a white tick */
.regcheck { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.regcheck input { position: absolute; opacity: 0; pointer-events: none; }
.regcheck__b { flex: 0 0 20px; width: 20px; height: 20px; border-radius: 4px;
               background: #fff; color: #fff;
               box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .15);
               display: grid; place-items: center; }
.regcheck__b svg { opacity: 0; }
.regcheck input:checked + .regcheck__b { background: #00805f; box-shadow: none; }
.regcheck input:checked + .regcheck__b svg { opacity: 1; }
.regcheck > span:last-child { font: 400 14px/1.28 Inter, sans-serif; color: #101828; }

/* Web/Payment Option — rows pad 13/14 gap 12 r8, the selected one tinted */
.regpay { display: flex; flex-direction: column; gap: 10px; }
.regpay__r { display: flex; align-items: center; gap: 12px; width: 100%;
             padding: 13px 14px; border: 0; cursor: pointer; text-align: left;
             border-radius: 8px; background: #fff;
             box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
             font: 500 14px/1.21 Inter, sans-serif; color: #101828; }
.regpay__r.is-on { background: rgba(0, 128, 95, .07);
                   box-shadow: inset 0 0 0 1.5px #00805f; }
/* the radio is an 18px ring 5px thick with a transparent hole */
.regpay__radio { flex: 0 0 18px; width: 18px; height: 18px; border-radius: 999px;
                 box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .25); }
.regpay__r.is-on .regpay__radio { box-shadow: inset 0 0 0 5px #00805f; }

.regcard__well { display: flex; flex-direction: column; gap: 12px; padding: 14px;
                 border-radius: 8px; background: #f8f8f8; }

/* the pitch beside the entry card — hero is a locked 4:3 */
.regpitch { display: flex; flex-direction: column; gap: 14px; }
/* the frame's own photo, exported from the hero node 18960:180906 */
.regpitch__hero { aspect-ratio: 4 / 3; border-radius: 12px;
                  background: #e9edf2 url(../img/site/register_hero.png) center/cover no-repeat; }
.regpitch h2 { font: 400 26px/1.28 Inter, sans-serif; color: #101828; margin: 0; }
.regpitch > p { font: 400 16px/1.28 Inter, sans-serif; color: #656772; margin: 0; }
.regben { display: flex; flex-direction: column; gap: 12px; }
.regben__r { display: flex; align-items: flex-start; gap: 8px; }
.regben__r svg { flex: 0 0 20px; stroke: #00805f; fill: none; }
.regben__t { display: flex; flex-direction: column; gap: 2px; }
.regben__t strong { font: 400 14px/1.28 Inter, sans-serif; color: #101828; }
.regben__t span   { font: 400 13px/1.28 Inter, sans-serif; color: #364153; }

/* Above the phone breakpoint the entry frame splits card | pitch — the
   desktop twins were not measured, so this is the frame's own note applied,
   not a reproduction of numbers I have. */
@media (min-width: 901px) {
  .reg { max-width: 420px; }
  .reg--entry { flex-direction: row; align-items: flex-start; gap: 48px; max-width: 980px; }
  .reg--entry > .regcard { flex: 0 0 420px; }
  .reg--entry > .regpitch { flex: 1 1 auto; }
}