@import url("fonts.css");
:root{--font-body:"General Sans";--font-display:"Cabinet Grotesk"}body{margin:0}button,input{font-family:inherit}[hidden]{display:none!important}

.gate{--auth-display:var(--font-display);--auth-body:var(--font-body);--pine:#25302a;--muted:#626a64;box-sizing:border-box;min-height:100dvh;padding:20px 28px 28px;gap:22px;display:grid;grid-template-columns:minmax(0,1fr) minmax(440px,1fr);grid-template-rows:auto 1fr;background:#fff;color:var(--pine);font-family:var(--auth-body),Arial,sans-serif}
.gate *{box-sizing:border-box}.gate ::selection{background:#c6e7d8;color:#072929}
.gate-art{position:relative;min-height:570px;overflow:hidden;border-radius:28px;background:#edf0e9;color:#25302a;display:flex;flex-direction:column;justify-content:space-between;padding:44px}
.gate-art-image{position:absolute;left:50%;top:53%;width:auto;height:82%;max-width:94%;object-fit:contain;transform:translate(-50%,-50%);mix-blend-mode:multiply;-webkit-mask-image:radial-gradient(ellipse closest-side,#000 66%,transparent 100%);mask-image:radial-gradient(ellipse closest-side,#000 66%,transparent 100%)}
.gate-art-top{position:relative;z-index:1}.gate-art-top{font-family:var(--auth-display),Arial,sans-serif;font-size:30px;letter-spacing:-.035em;display:flex;gap:12px;align-items:center}
.gate-panel{padding:34px clamp(32px,5vw,80px);border-radius:28px;background:#f5f5f2;display:flex;flex-direction:column;min-width:0}
.gate-header{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;padding:15px 24px;border:1px solid #dedfd9;border-radius:22px;min-height:76px}.gate-header-label{font-size:13px;color:#626a64}.gate-brand{display:flex;align-items:center;gap:13px}.gate-mark{width:22px;height:39px;object-fit:contain}.gate-name{font-family:var(--auth-display),Arial,sans-serif;font-size:28px;font-weight:800;letter-spacing:-.04em;line-height:1.1}
.gate-card{width:100%;max-width:380px;margin:auto; padding:24px 0}.gate-kicker{font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin:0 0 18px}.gate-title{font-family:var(--auth-display),Arial,sans-serif;font-size:clamp(40px,4vw,60px);font-weight:500;letter-spacing:-.035em;line-height:1.08;margin:0 0 18px;text-wrap:balance}.gate-line{font-size:14px;line-height:1.75;color:var(--muted);margin:0 0 34px;max-width:36ch}
.gate-form{display:grid;gap:10px}.gate-label{font-size:12px;font-weight:600}.gate-field{width:100%;height:54px;padding:0 16px;border:1px solid #aab9b1;border-radius:12px;background:#fff;color:var(--pine);font:inherit;font-size:15px;caret-color:#08765b;outline:none}.gate-field::placeholder{color:#65756e}.gate-field:focus-visible{border-color:#176f65;box-shadow:0 0 0 3px #176f6520}.gate-enter{height:54px;margin-top:10px;padding:0 18px;border:1px solid #293c34;border-radius:100px;background:#293c34;color:#f5f5f0;font:inherit;font-size:14px;font-weight:600;cursor:pointer;display:flex;justify-content:space-between;align-items:center;text-decoration:none}.gate button:disabled{opacity:.6;cursor:wait}.gate-enter:hover{background:#154a42}.gate-enter:focus-visible,.gate-quiet:focus-visible{outline:2px solid #176f65;outline-offset:4px}
.gate-help{font-size:12px;line-height:1.7;color:var(--muted);margin:20px 0 0}.gate-note{margin:0 0 22px;padding:13px 15px;border-left:3px solid #b2583d;background:#f5e7df;color:#853d2c;font-size:13px;line-height:1.6}.gate-foot{padding-top:22px;border-top:1px solid #d8dfd8;display:flex;justify-content:space-between;gap:12px;font-size:11px;color:var(--muted)}.gate-code{letter-spacing:.45em;text-align:center;font-size:23px;font-variant-numeric:tabular-nums}.gate-row{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:22px}.gate-quiet{border:0;background:none;padding:3px 0;color:#225f50;font:inherit;font-size:12px;font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:4px}.gate-quiet:hover{color:#072929}
/* One canvas for every sign-in state: the email step's frame. The artwork and
   the form panel keep its size; the panel itself scrolls if content ever exceeds it. */
.gate{height:max(738px,100dvh);grid-template-rows:76px minmax(0,1fr)}
.gate-art,.gate-panel{min-height:0}
.gate-panel{overflow-y:auto}
@media(min-width:601px){.gate-card{padding-top:0;padding-bottom:0}.gate--code .gate-title{font-size:clamp(40px,3.4vw,50px)}.gate--code .gate-line{margin-bottom:22px}.gate--code .gate-row{margin-top:16px}.gate--code .gate-help{margin-top:10px}}
@media(min-width:851px) and (max-height:860px){.gate--code .gate-title{font-size:clamp(36px,3.2vw,46px);margin-bottom:14px}.gate--code .gate-line{margin-bottom:18px}.gate--code .gate-note{margin-bottom:16px;padding:10px 14px}.gate--code .gate-row{margin-top:16px}}
.gate-enter{transition:background-color 180ms ease,transform 180ms ease,box-shadow 180ms ease;transform:translateY(0)}
@media(hover:hover){.gate-enter:hover{transform:translateY(-2px);box-shadow:0 6px 16px #293c3424}}
.gate-enter:active:not(:disabled){transform:translateY(0) scale(.985);box-shadow:0 1px 4px #293c3420;transition-duration:80ms}
@media(prefers-reduced-motion:reduce){.gate-enter{transition:none}.gate .gate-enter:hover,.gate .gate-enter:active{transform:none}}
@media(min-width:1600px){.gate{padding:24px 40px 32px}.gate-art{padding:56px}.gate-panel{padding-top:44px;padding-bottom:44px}}
@media(max-width:850px){.gate{grid-template-columns:minmax(0,.85fr) minmax(0,1fr);padding:12px}.gate-panel{padding:28px}.gate-art{padding:28px;min-height:0}}
@media(max-width:600px){.gate{display:flex;flex-direction:column;height:auto;padding:12px;gap:12px;min-height:100dvh}.gate-header{order:0;padding:12px 16px;min-height:66px;border-radius:18px}.gate-header-label{font-size:10px;max-width:85px;text-align:right}.gate-art{order:2;min-height:300px;border-radius:22px;padding:24px;justify-content:flex-end}.gate-art-image{height:96%;top:50%}.gate-art-top{display:none}.gate-panel{order:1;padding:28px 24px;flex:none;height:auto;min-height:592px;overflow:visible;border-radius:22px}.gate-card{padding:22px 0 34px;max-width:none}.gate--code .gate-card{padding-top:16px;padding-bottom:10px}.gate--code .gate-line{margin-bottom:22px}.gate--code .gate-note{margin-bottom:14px;padding:10px 12px}.gate--code .gate-help{margin-top:10px}.gate-title{font-size:38px}.gate-line{margin-bottom:26px}.gate-field{font-size:16px}.gate-code{font-size:23px}.gate-foot{font-size:10px}}

.gate-row{flex-wrap:nowrap;overflow-x:auto}.gate-row>*{flex-shrink:0}.gate-quiet:disabled{cursor:default}.gate-note:empty{display:none}