/* gitroots log in, password reset, plans and sign-up ("Ink & Paper"),
   from the Log in and Sign up boards of the Claude Design canvas "gitroots landing page v2". */
body{margin:0;background:#FAFAF9}
*{box-sizing:border-box}
:root{--ease:cubic-bezier(.22,1,.36,1);--ease-io:cubic-bezier(.65,0,.35,1)}
a{color:#0C0D0F;text-decoration:none}a:hover{color:#3A3C42}
.au{min-height:100vh;background:#FAFAF9;font-family:Inter,system-ui,-apple-system,'Segoe UI',sans-serif;color:#0C0D0F;-webkit-font-smoothing:antialiased}
.disp{font-family:'Inter Tight',Inter,system-ui,sans-serif;letter-spacing:-0.035em;font-weight:600;margin:0;text-wrap:balance}
.mono{font-family:'IBM Plex Mono',ui-monospace,Menlo,monospace}
.eyebrow{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#62656C;display:flex;align-items:center;gap:10px}
.eyebrow i{display:block;width:6px;height:6px;background:#0C0D0F;border-radius:1px}
.lead{margin:0;font-size:16px;line-height:1.6;color:#4A4D54}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* buttons and links */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 22px;border-radius:9px;font:500 15px/1 Inter,system-ui,sans-serif;cursor:pointer;transition:background .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease)}
.btn svg{display:block;flex:none;transition:transform .45s var(--ease)}.btn:hover svg.arr{transform:translateX(3px)}
.btn-ink{background:#0C0D0F;color:#FFFFFF;border:1px solid #0C0D0F}.btn-ink:hover{background:#2A2C31;color:#FFFFFF;transform:translateY(-1px);box-shadow:0 10px 24px -12px rgba(12,13,15,.45)}
.btn-line{background:#FFFFFF;color:#0C0D0F;border:1px solid #D4D4D0}.btn-line:hover{border-color:#0C0D0F;color:#0C0D0F}
.btn[aria-busy="true"]{pointer-events:none;opacity:.85}
.btn:focus-visible,.lnk:focus-visible,.fld input:focus-visible,.eye:focus-visible,.pc:focus-visible,.pm:focus-visible,.seg button:focus-visible,.chk input:focus-visible+.bx{outline:2px solid #0C0D0F;outline-offset:2px}
.lnk{font-size:14px;color:#0C0D0F;font-weight:500;background:none;border:0;padding:8px 0;cursor:pointer;font-family:Inter,sans-serif;border-bottom:1px solid transparent;transition:border-color .3s}
.lnk:hover{border-bottom-color:#0C0D0F}
.ul{font-weight:500;border-bottom:1px solid #0C0D0F}
.back{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:#4A4D54;min-height:44px}

/* fields */
.fld{display:flex;flex-direction:column;gap:7px}
.fld label{font-size:13px;font-weight:500;color:#3A3C42}
.fld .box{position:relative;display:flex;align-items:center}
.fld input{width:100%;height:48px;padding:0 14px;border:1px solid #D4D4D0;border-radius:9px;background:#FFFFFF;font:400 15px/1 Inter,sans-serif;color:#0C0D0F;transition:border-color .35s var(--ease),box-shadow .35s var(--ease)}
.fld input::placeholder{color:#9A9DA4}
.fld input:hover{border-color:#A8ABB2}
.fld input:focus{outline:none;border-color:#0C0D0F;box-shadow:0 0 0 4px rgba(12,13,15,.08)}
.fld input:-webkit-autofill{-webkit-text-fill-color:#0C0D0F;-webkit-box-shadow:0 0 0 1000px #FFFFFF inset}
.fld.err input,.fld.err .pre{border-color:#D92D20}
.fld .msg{font-size:12.5px;color:#B42318}
.fld .hint{font-size:12.5px;color:#62656C}
.eye{position:absolute;right:6px;width:36px;height:36px;border:0;border-radius:7px;background:transparent;color:#62656C;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .3s var(--ease),color .3s}
.eye:hover{background:#F2F2F0;color:#0C0D0F}
.chk{display:inline-flex;align-items:center;gap:10px;min-height:44px;font:400 14px/1 Inter,sans-serif;color:#3A3C42;cursor:pointer;position:relative}
.chk .bx{width:20px;height:20px;border-radius:6px;border:1px solid #BDBDB8;display:flex;align-items:center;justify-content:center;color:transparent;transition:background .3s var(--ease),border-color .3s var(--ease),color .3s}
.chk input:checked+.bx{background:#0C0D0F;border-color:#0C0D0F;color:#FFFFFF}
.or{display:flex;align-items:center;gap:14px;font-size:12px;color:#8A8D94}
.or:before,.or:after{content:"";flex:1;height:1px;background:#E6E6E3}
.urlbox{display:flex}
.pre{display:flex;align-items:center;padding:0 12px;border:1px solid #D4D4D0;border-right:0;border-radius:9px 0 0 9px;background:#F6F6F4;font:400 14px/1 'IBM Plex Mono',monospace;color:#62656C;white-space:nowrap}
.urlbox input{border-radius:0 9px 9px 0;font-family:'IBM Plex Mono',monospace;font-size:14px;min-width:0}
.note{padding:14px 16px;border:1px solid #E6E6E3;border-radius:10px;background:#FFFFFF;font-size:14px;line-height:1.55;color:#3A3C42}
.note.bad{border-color:#FECDCA;background:#FEF3F2;color:#B42318}

/* split layout: log in and password pages */
.split{display:flex;flex-wrap:wrap}
.split main{flex:1 1 520px;min-width:0;display:flex;flex-direction:column;padding:32px 40px 40px}
.split .top{display:flex;align-items:center;justify-content:space-between;gap:16px}
.split .stage{flex:1;display:flex;align-items:center;justify-content:center;padding:48px 0}
.split .col{width:100%;max-width:420px;display:flex;flex-direction:column;gap:28px}
.split .legal{margin:0;font-size:12.5px;color:#62656C;text-align:center}
.split .legal a{text-decoration:underline}
.side{flex:1 1 560px;min-width:0;position:relative;overflow:hidden;background:#0E0F11;color:#EDEEF0;display:flex;flex-direction:column;justify-content:center;gap:48px;padding:64px 0 64px 64px;margin:12px;border-radius:22px}
.side .dotbg{position:absolute;inset:0;background-image:radial-gradient(#FFFFFF10 1px,transparent 1px);background-size:22px 22px;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 60% 50%,#000 15%,transparent 75%);mask-image:radial-gradient(ellipse 70% 60% at 60% 50%,#000 15%,transparent 75%)}
.phone{background:#0E0F11;border-radius:40px;padding:8px;box-shadow:0 0 0 1px #2A2C31,0 40px 80px -30px rgba(0,0,0,.6)}
.pscreen{aspect-ratio:390/844;border-radius:32px;overflow:hidden;background:#030806}
.pscreen img,.win img{display:block;width:100%;height:100%;object-fit:cover}
.win{border-radius:12px;overflow:hidden;border:1px solid #2A2C31;box-shadow:0 40px 80px -30px rgba(0,0,0,.6);aspect-ratio:16/10;background:#FFFFFF}
.badge{width:56px;height:56px;border-radius:14px;background:#0C0D0F;color:#FFFFFF;display:flex;align-items:center;justify-content:center}

/* flow layout: plans, sign-up and payment */
.flow{display:flex;flex-direction:column}
.flow header{border-bottom:1px solid #E6E6E3;background:rgba(250,250,249,.9)}
.flow .hd{max-width:1200px;margin:0 auto;padding:0 32px;height:84px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.stepwrap{max-width:1200px;width:100%;margin:0 auto;padding:0 32px}
.colwrap{max-width:1200px;width:100%;margin:0 auto;padding:0 32px 72px;display:flex;flex-wrap:wrap;gap:48px;align-items:flex-start}
.colwrap>main{flex:999 1 520px;min-width:0;display:flex;flex-direction:column;gap:28px;padding-top:16px}
.summary{flex:1 1 320px;min-width:0;position:sticky;top:24px;background:#0E0F11;color:#EDEEF0;border-radius:16px;padding:28px;display:flex;flex-direction:column;gap:20px}
.summary .chg{background:none;border:0;color:#EDEEF0;font:500 13px Inter,sans-serif;cursor:pointer;padding:8px 0;border-bottom:1px solid #3A3D44}
.summary .chg:hover{color:#FFFFFF}
.seg{display:inline-flex;padding:4px;border:1px solid #D4D4D0;border-radius:10px;background:#FFFFFF;gap:4px}
.seg button{height:38px;padding:0 14px;border:0;border-radius:7px;background:transparent;font:500 14px/1 Inter,sans-serif;color:#4A4D54;cursor:pointer;transition:background .45s var(--ease),color .45s var(--ease)}
.seg button.is-on{background:#0C0D0F;color:#FFFFFF}
.pc{width:100%;display:flex;align-items:center;gap:16px;padding:20px;border:1px solid #E6E6E3;border-radius:12px;background:#FFFFFF;cursor:pointer;text-align:left;font:inherit;color:#0C0D0F;transition:border-color .45s var(--ease),box-shadow .45s var(--ease),transform .45s var(--ease)}
.pc:hover{border-color:#A8ABB2;transform:translateY(-1px)}
.pc.is-on{border-color:#0C0D0F;box-shadow:0 0 0 1px #0C0D0F,0 16px 32px -24px rgba(12,13,15,.4)}
.rad{width:20px;height:20px;border-radius:50%;border:1px solid #BDBDB8;flex:none;transition:border-width .35s var(--ease),border-color .35s}
.is-on .rad{border:6px solid #0C0D0F}
.pm{flex:1;min-width:180px;display:flex;align-items:center;gap:14px;padding:18px;border:1px solid #E6E6E3;border-radius:12px;background:#FFFFFF;font:inherit;color:#0C0D0F;text-align:left}
.pm.is-on{border-color:#0C0D0F;box-shadow:0 0 0 1px #0C0D0F}
.steps{display:flex;align-items:center;gap:0;list-style:none;margin:0;padding:28px 0}
.steps li{display:flex;align-items:center;gap:10px;font-size:13px;color:#8A8D94;white-space:nowrap;transition:color .5s var(--ease)}
.steps li .dot{width:26px;height:26px;border-radius:50%;border:1px solid #D4D4D0;display:flex;align-items:center;justify-content:center;font:500 12px/1 'IBM Plex Mono',monospace;background:#FFFFFF;transition:background .5s var(--ease),border-color .5s var(--ease),color .5s var(--ease)}
.steps li.cur{color:#0C0D0F}.steps li.cur .dot{border-color:#0C0D0F;color:#0C0D0F}
.steps li.done{color:#3A3C42}.steps li.done .dot{background:#0C0D0F;border-color:#0C0D0F;color:#FFFFFF}
.steps .bar{flex:1;min-width:24px;height:1px;background:#E6E6E3;margin:0 14px;position:relative;overflow:hidden}
.steps .bar i{position:absolute;inset:0;background:#0C0D0F;transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease)}
.steps .bar.done i{transform:scaleX(1)}
.sum li{display:flex;gap:10px;font-size:14px;line-height:1.45;color:#C9CBD0}
.sum li.off{color:#6B6E75}
.ck{display:flex;gap:14px;align-items:flex-start;padding:16px 0;border-top:1px solid #EDEDEA}
.ck:last-child{border-bottom:1px solid #EDEDEA}
.ck .c{width:26px;height:26px;border-radius:50%;border:1px solid #D4D4D0;flex:none;display:flex;align-items:center;justify-content:center;font:500 12px/1 'IBM Plex Mono',monospace;color:#62656C}
.ck.ok .c{background:#0C0D0F;border-color:#0C0D0F;color:#FFFFFF}

/* motion */
@keyframes up{from{opacity:0;transform:translateY(22px);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes swC{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes swD{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.in1{animation:up .9s var(--ease) .05s both}.in2{animation:up .9s var(--ease) .15s both}.in3{animation:up 1.1s var(--ease) .3s both}
.qA .sw{animation:swC .5s var(--ease) both}.qB .sw{animation:swD .5s var(--ease) both}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.fl1{animation:floaty 8s var(--ease-io) infinite}.fl2{animation:floaty 8s var(--ease-io) -3s infinite}
@keyframes spin{to{transform:rotate(360deg)}}.spin{animation:spin .8s linear infinite}
@keyframes pop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.08);opacity:1}100%{transform:scale(1)}}.pop{animation:pop .7s var(--ease) both}

@media (max-width:900px){.side{display:none !important}}
@media (max-width:760px){.steps li span.lab{display:none}.stepwrap{padding:0 20px}.colwrap{padding:0 20px 56px}.flow .hd{padding:0 20px}.navcta-sec{display:none}}
@media (max-width:560px){.split main{padding:24px 20px 32px}.disp.h{font-size:36px !important}}
@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation:none !important;transition:none !important}}
[hidden]{display:none !important}
.sumbox{display:flex;flex-direction:column;gap:20px}