/* ==========================================================================
   Greeks Vault — Sign In / Create Account
   Left: the painted journey (the story). Right: a quiet form. The big motion
   happens during authentication, not while typing.
   ========================================================================== */
body.auth{background:var(--paper);overflow-x:hidden}
.auth-grid{display:grid;grid-template-columns:minmax(0,52fr) minmax(0,48fr);min-height:100vh}

/* ---- scene ---------------------------------------------------------------- */
.scene{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--paper);border-right:1px solid var(--hair)}
.scene .brand{position:absolute;left:max(24px,4vw);top:28px;z-index:3}
.scene-copy{position:absolute;left:max(24px,4vw);top:clamp(120px,17vh,190px);z-index:3;width:min(470px,62%)}
/* an ivory wash keeps the copy legible whatever the viewport shape; the painting rises beneath it */
.scene::before{content:"";position:absolute;left:0;right:0;top:0;height:52%;z-index:2;pointer-events:none;background:linear-gradient(180deg,var(--paper) 0,var(--paper) 42%,rgba(248,247,243,.92) 62%,rgba(248,247,243,0) 100%)}
.scene-copy .eyebrow{margin-bottom:18px}
.scene-copy .display{font-size:clamp(38px,4.2vw,66px)}
.scene-copy .lede{margin-top:18px;font-size:15.5px;max-width:30rem}
.scene-art{position:absolute;left:0;right:0;bottom:0;top:0;will-change:transform}
.pic{position:absolute;left:0;bottom:0;width:100%;aspect-ratio:788 / 1024}
.scene-art img{position:absolute;inset:0;width:100%;height:100%;max-width:none;user-select:none;-webkit-user-drag:none;
  transition:filter 1.2s var(--ease),transform 1.6s var(--ease);transform-origin:50% 100%}
.scene.arrived .scene-art img{filter:brightness(1.03) saturate(1.06);transform:scale(1.015)}
.scene-art svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;will-change:transform}
.jr-ghost{fill:none;stroke:var(--gold);stroke-opacity:.35;stroke-width:1.2;stroke-dasharray:2 6}
.jr-path{fill:none;stroke:var(--gold);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.jr-ring{fill:var(--paper);stroke:var(--gold);stroke-width:1.6;transition:fill .5s var(--ease),stroke .5s var(--ease)}
.jr-ring.done{fill:var(--gold)}
.jr-ring.on{fill:var(--gold)}
.jr-halo{fill:none;stroke:var(--gold);stroke-width:1.2;opacity:0}
.jr-halo.on{animation:halo 2.4s var(--ease) infinite}
.jr-flag{transform-box:fill-box;transform-origin:0% 100%;transform:scaleY(0);transition:transform .8s var(--ease) .2s}
.scene.arrived .jr-flag{transform:scaleY(1)}
.scene-foot{position:absolute;left:max(24px,4vw);bottom:22px;z-index:3;font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-3);line-height:2}
.scene-hand{position:absolute;left:max(24px,4vw);top:calc(52% - 10px);z-index:3;font-family:"Caveat",cursive;font-size:24px;line-height:1.05;color:#3B4A77;transform:rotate(-6deg);transform-origin:left bottom;text-shadow:0 0 12px var(--paper),0 0 4px var(--paper)}
@media (max-height:760px){.scene-hand{display:none}}
.scene-hand::after{content:"";display:block;width:70px;height:1px;background:var(--gold);margin-top:6px}
.scene-foot b{color:var(--ink);font-weight:500}

/* ---- panel ---------------------------------------------------------------- */
.panel{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;padding:96px clamp(24px,5vw,72px) 56px;min-height:100vh}
.back{position:absolute;right:clamp(24px,4vw,56px);top:30px;font-size:13.5px;color:var(--ink-2);display:inline-flex;gap:8px;align-items:center}
.back:hover{color:var(--ink)}
.card{width:min(440px,100%);justify-self:center;transition:opacity .6s var(--ease),transform .6s var(--ease)}
.card.leaving{opacity:0;transform:translateY(-10px)}
.tabs{display:grid;grid-template-columns:1fr 1fr;background:var(--ivory-2);border-radius:12px;padding:4px;margin-bottom:40px}
.tabs a{text-align:center;padding:12px 10px;border-radius:9px;font-size:14px;color:var(--ink-2);border:1px solid transparent;transition:all .35s var(--ease)}
.tabs a[aria-current="page"]{background:#fff;color:var(--ink);border-color:var(--gold-line);font-weight:500}
.card h1{font-family:var(--serif);font-weight:400;font-size:clamp(34px,3vw,44px);line-height:1.05;margin:0;color:var(--ink);text-align:center}
.card .sub{text-align:center;color:var(--ink-2);margin:10px 0 30px;font-size:15px}
.signup .card h1,.signup .card .sub{text-align:left}
.f{display:grid;gap:8px;margin-bottom:18px}
.f label{font-size:13px;color:var(--ink);font-weight:500;display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:2px 10px}
.f label small{font-weight:400;color:var(--ink-3);font-size:12px}
.in{position:relative;display:flex;align-items:center;gap:10px;height:50px;padding:0 14px;min-width:0;background:#fff;border:1px solid var(--hair-2);border-radius:10px;transition:border-color .35s var(--ease),box-shadow .35s var(--ease)}
.in:focus-within{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-soft)}
.in.ok{border-color:var(--gold-line)}
.in.bad{border-color:#D9A8A1}
.in svg{width:16px;height:16px;color:var(--ink-3);flex:none}
.in input{flex:1;width:100%;min-width:0;border:0;background:none;font:inherit;font-size:14.5px;color:var(--ink);outline:none}
.in input::placeholder{color:var(--ink-4)}
.in .tick{width:16px;height:16px;color:var(--gold-ink);opacity:0;transform:scale(.6);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.in.ok .tick{opacity:1;transform:none}
.in .eye{width:26px;height:26px;display:grid;place-items:center;color:var(--ink-3);border-radius:6px}
.in .eye:hover{color:var(--ink)}
.f .msg{font-size:12px;color:#A94B42;min-height:0;transition:opacity .3s}
.f .msg:empty{display:none}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.two > .f{min-width:0}
.strength{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;align-items:center;margin-top:2px}
.strength i{height:3px;border-radius:2px;background:var(--hair-2);transition:background .4s}
.strength.s1 i:nth-child(-n+1),.strength.s2 i:nth-child(-n+2),.strength.s3 i:nth-child(-n+3),.strength.s4 i:nth-child(-n+4){background:var(--gold)}
.strength .l{grid-column:1 / -1;font-size:11px;color:var(--ink-3);margin-top:2px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--ink-2);margin:6px 0 22px;cursor:pointer}
.check input{appearance:none;width:18px;height:18px;border:1px solid var(--hair-2);border-radius:5px;background:#fff;flex:none;margin-top:1px;display:grid;place-items:center;transition:all .3s var(--ease);cursor:pointer}
.check input::after{content:"";width:9px;height:5px;border-left:1.6px solid #fff;border-bottom:1.6px solid #fff;transform:rotate(-45deg) translate(1px,-1px);opacity:0}
.check input:checked{background:var(--gold);border-color:var(--gold)}
.check input:checked::after{opacity:1}
.check a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--gold-line)}
.submit{width:100%;height:54px;border-radius:14px;background:var(--ink);color:#fff;font-size:15px;font-weight:500;display:inline-flex;align-items:center;justify-content:center;gap:10px;transition:background .35s,opacity .35s;position:relative;overflow:hidden}
.submit:hover{background:#000}
.submit:disabled{opacity:.7;cursor:default}
.submit .arr{transition:transform .35s var(--ease)}
.submit:hover .arr{transform:translateX(3px)}
.submit .prog{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--gold);transition:width 1.8s var(--ease)}
.submit.busy .prog{width:100%}
.form-msg{margin:14px 0 0;font-size:13px;color:#A94B42;text-align:center;min-height:1.4em}
.form-msg.info{color:var(--ink-2)}
.alt{text-align:center;margin:26px 0 0;font-size:14px;color:var(--ink-2)}
.alt a{color:var(--gold-ink);margin-left:6px}
.legal{margin:34px 0 0;text-align:center;font-size:12px;color:var(--ink-3);line-height:1.6}
.legal a{color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--gold-line)}
.help{text-align:center;font-size:12.5px;color:var(--ink-3);margin-top:12px}
.help a{color:var(--ink-2)}

/* country + phone */
.in.sel{padding-right:10px}
.in.sel select{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:14px;color:var(--ink);outline:none;appearance:none;-webkit-appearance:none;padding-right:18px;cursor:pointer}
.in.sel .chev{position:absolute;right:14px;top:50%;width:7px;height:7px;border-right:1px solid var(--ink-3);border-bottom:1px solid var(--ink-3);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.in .dial{font-family:var(--mono);font-size:13px;color:var(--ink-2);flex:none;padding-right:8px;border-right:1px solid var(--hair);margin-right:2px}

/* social sign-in — rendered only for providers the server has configured */
.social{margin-top:18px}
.social[hidden]{display:none}
.or{display:flex;align-items:center;gap:14px;font-size:12.5px;color:var(--ink-3);margin-bottom:12px}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--hair)}
.soc-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px}
.soc{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:46px;border:1px solid var(--hair-2);border-radius:12px;background:#fff;font-size:13.5px;color:var(--ink);transition:border-color .35s var(--ease),box-shadow .35s var(--ease)}
.soc:hover{border-color:var(--ink);box-shadow:0 10px 24px -18px rgba(17,24,39,.4)}
.soc svg{width:18px;height:18px}
.soc[hidden]{display:none}
.soc.wait{opacity:.6;pointer-events:none}
.signup .social{margin-top:14px}
.signup .soc{height:42px}
.signup .or{margin-bottom:10px}
.form-msg.info{color:var(--ink-2)}

/* sign-up fits one screen: tighter rhythm, no page scroll on desktop */
.signup .panel{padding:clamp(48px,7vh,88px) clamp(24px,5vw,72px) clamp(20px,3vh,40px)}
.signup .tabs{margin-bottom:clamp(16px,2.6vh,30px)}
.signup .tabs a{padding:10px}
.signup .card h1{font-size:clamp(28px,2.6vw,36px)}
.signup .card .sub{margin:8px 0 clamp(14px,2.4vh,22px);font-size:14px}
.signup .f{gap:6px;margin-bottom:clamp(10px,1.6vh,14px)}
.signup .in{height:44px}
.signup .strength{margin-top:0}
.signup .check{margin:4px 0 14px;font-size:13px}
.signup .submit{height:48px}
.signup .form-msg{min-height:0;margin:8px 0 0}
.signup .form-msg:empty{display:none}
.signup .alt{margin-top:clamp(12px,2vh,20px);font-size:13.5px}
.signup .legal{margin-top:clamp(10px,1.8vh,18px);font-size:11px;line-height:1.5}
@media (min-width:1025px) and (max-height:760px){
  .signup .panel{padding-top:44px}
  .signup .card .sub{display:none}
  .signup .card h1{margin-bottom:14px}
  .signup .strength .l{display:none}
  .signup .legal{display:none}
  .signup .f label small{display:none}
}
@media (min-width:1025px){
  .auth-grid{height:100vh}
  .signup .panel{min-height:0;height:100vh;overflow:hidden}
  .signup .card{max-height:100%}
}

/* right rail */
.rail{position:relative;align-self:stretch;width:150px;margin-left:24px;border-left:1px solid var(--hair);padding-left:26px;display:flex;flex-direction:column;justify-content:center}
.rail .words{font-size:10.5px;letter-spacing:.32em;text-transform:uppercase;color:var(--ink-3);line-height:2;position:relative;z-index:1}
.rail .words::after{content:"";display:block;width:44px;height:1px;background:var(--gold);margin-top:10px}
.rail svg{position:absolute;left:14px;right:0;bottom:8%;height:44%;width:auto;opacity:.5}

/* ---- the transition into the workspace ------------------------------------- */
.enter{position:fixed;inset:0;z-index:100;background:var(--paper);opacity:0;pointer-events:none;transition:opacity .7s var(--ease);display:grid;place-items:center}
.enter.show{opacity:1;pointer-events:auto}
.enter .box{text-align:center}
.enter .box .eyebrow{margin-bottom:12px}
.enter .box .display{font-size:clamp(30px,3.6vw,52px)}
.enter .line{width:min(420px,70vw);height:1px;background:var(--hair);margin:26px auto 0;position:relative;overflow:hidden}
.enter .line i{position:absolute;left:0;top:0;height:100%;width:0;background:var(--gold);transition:width 1.4s var(--ease)}
.enter.show .line i{width:100%}

@media (max-width:1024px){
  .auth-grid{grid-template-columns:minmax(0,1fr)}
  .scene{position:relative;height:min(58vh,560px);border-right:0;border-bottom:1px solid var(--hair)}
  .pic{left:auto;right:0;width:auto;height:100%}
  .scene::before{height:40%;background:linear-gradient(180deg,var(--paper) 0,rgba(248,247,243,.7) 60%,rgba(248,247,243,0) 100%)}
  .scene-copy{width:min(420px,52%)}
  .scene-copy{top:clamp(96px,14vh,150px);width:min(560px,86%)}
  .scene-copy .display{font-size:clamp(34px,7vw,56px)}
  .scene-copy .lede{font-size:15px}
  .scene-hand{display:none}
  .panel{min-height:0;padding:56px 20px 48px;grid-template-columns:minmax(0,1fr)}
  .rail{display:none}
  .back{top:18px;right:20px;background:rgba(248,247,243,.9);padding:6px 10px;border-radius:999px}
}
@media (max-width:560px){
  .scene{height:min(52vh,460px)}
  .pic{left:0;right:auto;width:100%;height:auto}
  .scene-copy{width:min(420px,86%)}
  .scene-copy{top:84px}
  .scene-copy .lede{display:none}
  .two{grid-template-columns:1fr}
  .tabs{margin-bottom:28px}
}
html.reduced .jr-flag{transform:scaleY(1)}

/* ==========================================================================
   single-column flow pages: forgot · reset · verify · welcome
   ========================================================================== */
body.flow{min-height:100vh}
.flow-col{position:relative;width:min(560px,100%);min-height:100vh;margin:0 auto;display:grid;grid-template-rows:auto auto 1fr;overflow:hidden}
.flow-top{display:flex;justify-content:space-between;align-items:center;padding:28px 24px 0;position:relative;z-index:3}
.flow-top .brand img{width:34px}
.back-in{font-size:13px;color:var(--ink-2)}
.back-in:hover{color:var(--ink)}
.created{font-size:13px;color:var(--ink-2);display:inline-flex;gap:6px;align-items:center}
.flow-main{position:relative;z-index:3;padding:clamp(40px,7vh,72px) 24px 0}
.flow-main .display{font-size:clamp(38px,5vw,52px)}
.flow-main .lede{margin-top:16px;font-size:15.5px;max-width:30rem}
.flow-main .lede b{color:var(--ink);font-weight:500}
.flow-main form{margin-top:26px}
.flow-main .alt{margin-top:14px}
.or-line{display:flex;align-items:center;gap:14px;font-size:12.5px;color:var(--ink-3);margin-top:22px}
.or-line::before,.or-line::after{content:"";flex:1;height:1px;background:var(--hair)}
.sent{margin-top:26px;padding:18px 20px;border:1px solid var(--gold-line);border-radius:12px;background:var(--gold-soft)}
.sent[hidden]{display:none}
.sent-t{margin:0;font-family:var(--serif);font-size:24px;color:var(--ink)}
.sent-s{margin:6px 0 0;font-size:13.5px;color:var(--ink-2)}
.resend{margin-top:26px;display:grid;grid-template-columns:auto 1fr;gap:12px 14px;align-items:center;padding:16px 18px;border:1px solid var(--hair);border-radius:12px;background:#fff;font-size:13px;color:var(--ink-3)}
.resend .fi{width:38px;height:38px;border-radius:50%;background:var(--gold-soft);color:var(--gold-ink);display:grid;place-items:center}
.resend .fi svg{width:18px;height:18px}
.resend b{display:block;font-weight:500;color:var(--ink);font-size:14px}
.resend form{grid-column:1 / -1}
.resend .soc{width:100%;height:42px}
.resend .soc:disabled{opacity:.55;pointer-events:none}
.pillars{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;text-align:center;font-size:12.5px;color:var(--ink-2);line-height:1.35}
.pillars .fi{width:52px;height:52px;border-radius:50%;background:var(--gold-soft);color:var(--gold-ink);display:grid;place-items:center;margin:0 auto 10px}
.pillars .fi svg{width:22px;height:22px}
.submit.go{margin-top:28px;text-decoration:none}
.flow-scene{position:relative;z-index:1;min-height:360px;margin-top:-24px;overflow:hidden}
.verify .flow-scene{min-height:420px}
.verify .flow-scene img{top:0;bottom:auto}
.verify .flow-scene svg{top:0;bottom:auto}
.flow-scene img{position:absolute;left:0;bottom:0;width:100%;height:auto;max-width:none;user-select:none}
.flow-scene svg{position:absolute;left:0;bottom:0;width:100%;height:auto;overflow:visible;pointer-events:none}
.flow-scene .scene-hand{position:absolute;left:24px;top:auto;bottom:38%;font-size:22px;text-shadow:0 0 10px #F8F7F3}
.flow-scene .scene-hand.fl{color:#3B4A77}
.flag-draw .ring{opacity:0}
.welcome .flag-draw.in .ring{animation:halo 2.6s var(--ease) 3}
.plane-path path{stroke-dashoffset:0}
@media (max-height:760px){.flow-scene .scene-hand{display:block}}
@media (max-width:420px){.f label small{display:none}}
@media (min-width:1025px){body.flow .auth-grid{display:block}}