/* ===== Stogademy landing banner + motion =====
   Animations use opacity/transform wherever possible. Everything is switched off or simplified for
   prefers-reduced-motion, and the heavy layers are dropped on low-powered devices (html.lite). */
:root{--ease:cubic-bezier(.22,.68,.2,1)}
@property --p{syntax:'<number>';inherits:true;initial-value:0}

/* ---------- Mountain banner (matches the mockup) ---------- */
.mbanner{position:relative;overflow:hidden;min-height:260px;margin:22px 0 8px;border:1px solid #2a4db8;border-radius:18px;background:#070d3a;box-shadow:0 0 50px #2f4bff22;isolation:isolate}
.mscene{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.mbanner:before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(90deg,#030a2ee8 0%,#030a2eaa 38%,#030a2e22 66%,transparent)}
.mtxt{position:relative;z-index:1;max-width:620px;padding:30px 40px 30px}
.mtxt small{display:block;font-size:.75rem;font-weight:600;letter-spacing:.38em;text-transform:uppercase;color:#e8eeff}
.mtxt h1{margin:2px 0 8px;font-size:clamp(2.8rem,6vw,4.4rem);line-height:1.02;letter-spacing:-.04em;font-weight:700;color:#fff}
.mtxt h1 span{background:linear-gradient(90deg,#4f8cff,#a066ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.mtxt p{max-width:26em;margin:0 0 16px;font-size:1.05rem;line-height:1.4;color:#eaf1ff}
.mtxt .hs{width:min(520px,100%);height:50px;margin:0 0 14px;border:2px solid #3a63e0;border-radius:26px;background:#050e3ccc;backdrop-filter:blur(6px);color:#cdd7f5}
.mtxt .hs input::placeholder{color:#aebcf0}
.hgo{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#2a47c9;color:#fff;font-size:.9rem;flex:none}
.mtxt .h2btn .pri,.mtxt .h2btn .sec{padding:10px 18px;font-size:.9rem}
.hand2{position:absolute;z-index:1;top:26px;right:44px;margin:0;font:italic 1.35rem/1.3 "Segoe Script","Bradley Hand","Brush Script MT",cursive;color:#fff;transform:rotate(-8deg);text-shadow:0 2px 14px #0008}
.vall{margin-left:auto;display:inline-flex;align-items:center;gap:8px;border:0;background:none;color:#37a0ff;font:inherit;font-size:.95rem;padding:6px 4px}
.vall:hover{border:0;color:#7dc4ff}
.vall svg{transition:transform .25s var(--ease)}.vall:hover svg{transform:translateX(4px)}
.logo small{display:block;margin-top:2px;font-size:.5rem;letter-spacing:.24em;text-transform:uppercase;color:#9db2f0;font-weight:600;white-space:nowrap}
.logo span b{display:block;line-height:1}
@media(max-width:760px){.mtxt{padding:24px}.hand2{display:none}.mbanner{min-height:300px}}

/* ---------- Tool card illustrations ---------- */
.c-calc{--art:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 180 130%22 fill=%22none%22 stroke=%22%23fff%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M0 20V110M0 65H180%22 opacity=%22.5%22/%3E%3Cpath d=%22M0 65C15 5 40 5 55 65S95 125 110 65 150 5 165 65 180 85 180 65%22/%3E%3Cpath d=%22M0 65C20 30 40 30 60 65%22 opacity=%22.4%22/%3E%3C/svg%3E")}
.c-study{--art:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 180 130%22 fill=%22none%22 stroke=%22%23fff%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%2260%22 y=%2222%22 width=%2290%22 height=%2262%22 rx=%229%22 transform=%22rotate%2812 105 53%29%22 opacity=%22.4%22/%3E%3Crect x=%2248%22 y=%2232%22 width=%2290%22 height=%2262%22 rx=%229%22 transform=%22rotate%284 93 63%29%22 opacity=%22.7%22/%3E%3Crect x=%2238%22 y=%2246%22 width=%2290%22 height=%2262%22 rx=%229%22/%3E%3Cpath d=%22M54 66h54M54 80h38%22/%3E%3C/svg%3E")}
.c-notes{--art:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 180 130%22 fill=%22none%22 stroke=%22%23fff%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M30 30H150M30 52H150M30 74H120M30 96H90%22 opacity=%22.6%22/%3E%3Cpath d=%22M118 112L160 58l12 9-42 54-18 5z%22/%3E%3C/svg%3E")}
.c-science{--art:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 180 130%22 fill=%22none%22 stroke=%22%23fff%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cellipse cx=%22100%22 cy=%2265%22 rx=%2262%22 ry=%2222%22/%3E%3Cellipse cx=%22100%22 cy=%2265%22 rx=%2262%22 ry=%2222%22 transform=%22rotate%2860 100 65%29%22/%3E%3Cellipse cx=%22100%22 cy=%2265%22 rx=%2262%22 ry=%2222%22 transform=%22rotate%28-60 100 65%29%22/%3E%3Ccircle cx=%22100%22 cy=%2265%22 r=%227%22/%3E%3C/svg%3E")}
.c-ap{--art:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 180 130%22 fill=%22none%22 stroke=%22%23fff%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M20 52L100 18l80 34-80 34z%22/%3E%3Cpath d=%22M52 68v28c28 20 68 20 96 0V68%22 opacity=%22.7%22/%3E%3Cpath d=%22M168 56v36%22 opacity=%22.7%22/%3E%3C/svg%3E")}
.c-plan{--art:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 180 130%22 fill=%22none%22 stroke=%22%23fff%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%2228%22 y=%2224%22 width=%22124%22 height=%2288%22 rx=%2210%22/%3E%3Cpath d=%22M28 50H152M60 14v18M120 14v18%22/%3E%3Cpath d=%22M52 72h10M84 72h10M116 72h10M52 92h10M84 92h10%22 opacity=%22.7%22/%3E%3C/svg%3E")}
.c-code{--art:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 180 130%22 fill=%22none%22 stroke=%22%23fff%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M62 34L24 65l38 31M118 34l38 31-38 31%22/%3E%3Cpath d=%22M104 22L78 108%22 opacity=%22.7%22/%3E%3C/svg%3E")}
.c-lib{--art:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 180 130%22 fill=%22none%22 stroke=%22%23fff%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%2226%22 y=%2240%22 width=%2222%22 height=%2272%22 rx=%223%22/%3E%3Crect x=%2254%22 y=%2226%22 width=%2222%22 height=%2286%22 rx=%223%22/%3E%3Crect x=%2282%22 y=%2246%22 width=%2222%22 height=%2266%22 rx=%223%22/%3E%3Crect x=%22110%22 y=%2232%22 width=%2222%22 height=%2280%22 rx=%223%22 transform=%22rotate%288 121 72%29%22/%3E%3Cpath d=%22M20 112H160%22/%3E%3C/svg%3E")}
.card{overflow:hidden;transition:transform .38s var(--ease),box-shadow .38s var(--ease),border-color .3s,background-color .3s}
.card:before{content:"";position:absolute;right:-4px;top:-2px;width:64%;height:72%;z-index:0;pointer-events:none;background:var(--art,none) no-repeat right top/contain;opacity:.22;transition:opacity .4s;animation:artdrift 18s ease-in-out infinite alternate;will-change:transform}
.card .tile,.card b,.card small{position:relative;z-index:1}
.card .go,.card .star,.card .badge{z-index:2}
a.card:hover:before,a.card:focus-visible:before{opacity:.42}
@keyframes artdrift{from{transform:translate3d(0,0,0) rotate(0)}to{transform:translate3d(-9px,7px,0) rotate(3deg) scale(1.05)}}

/* ---------- Hover: lift, glow, moving border shimmer ---------- */
a.card:hover,a.card:focus-visible{transform:translateY(-6px);box-shadow:0 16px 36px #000a,0 0 28px color-mix(in srgb,var(--c,#4f8cff) 45%,transparent)}
.feats a{transition:transform .38s var(--ease),box-shadow .38s var(--ease),border-color .3s}
.feats a:hover{transform:translateY(-5px);box-shadow:0 14px 32px #0009,0 0 24px #2f8bff44}
.card:after,.feats a:after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;opacity:0;transition:opacity .3s;background:linear-gradient(115deg,transparent 35%,color-mix(in srgb,var(--c,#37a0ff) 55%,#fff) 50%,transparent 65%) 200% 0/250% 100%;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
a.card:hover:after,a.card:focus-visible:after,.feats a:hover:after{opacity:1;animation:shimmer 1.8s linear infinite}
@keyframes shimmer{to{background-position:-50% 0}}
.card .tile,.feats .tile,.qrow .tile{transition:transform .4s var(--ease),box-shadow .4s}
a.card:hover .tile{transform:scale(1.1) rotate(-6deg);box-shadow:0 0 24px color-mix(in srgb,var(--c) 75%,transparent)}
.feats a:hover .tile{transform:scale(1.08) rotate(-5deg);box-shadow:0 0 20px #2f8bff77}
.go svg,.feats .go svg,.qrow>svg.i,.feat+svg{transition:transform .28s var(--ease)}
a.card:hover .go svg,.feats a:hover .go svg{transform:translateX(4px)}
.go{transition:transform .3s var(--ease),filter .3s}a.card:hover .go{filter:brightness(1.25)}
.qrow{transition:transform .3s var(--ease),border-color .25s,box-shadow .3s,background-color .3s}
.qrow:hover{transform:translateX(4px);border-color:#37a0ff;box-shadow:0 6px 20px #0006}.qrow:hover>svg.i{transform:translateX(4px)}
.panel{transition:border-color .3s,box-shadow .35s}.panel:hover{border-color:#3a63e0;box-shadow:0 0 30px #2f4bff22}
.feat{transition:transform .3s var(--ease),box-shadow .3s}.feat:hover{transform:translateY(-2px);box-shadow:0 8px 24px #2f4bff44}
.star{transition:transform .25s var(--ease),color .2s}.star:hover{transform:scale(1.25) rotate(12deg)}.star:active{transform:scale(.9)}

/* ---------- Header: sliding underline ---------- */
.tl a{position:relative;padding:6px 0;transition:color .25s}
.tl a:after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;border-radius:2px;background:linear-gradient(90deg,#37e0ff,#7a5cff);transform:scaleX(0);transform-origin:left center;transition:transform .35s var(--ease)}
.tl a:hover:after,.tl a:focus-visible:after,.tl a.on:after{transform:scaleX(1)}
.logo img{transition:transform .5s var(--ease),filter .4s}.logo:hover img{transform:rotate(-8deg) scale(1.06);filter:drop-shadow(0 0 12px #4f8cff)}
/* sidebar (shown on small-screen menu): smooth selection */
nav a{transition:background-color .3s,color .25s,transform .25s var(--ease)}nav a:hover{transform:translateX(3px)}
nav{transition:transform .35s var(--ease)}

/* ---------- Buttons ---------- */
.h2btn .pri,.h2btn .sec,.start,.signin,.apri,.tabs button,.tabs2 button,.btns button{transition:transform .22s var(--ease),box-shadow .28s,filter .2s,border-color .2s,background-color .25s,color .2s}
.h2btn .pri:hover,.start:hover,.apri:hover{transform:translateY(-2px);filter:brightness(1.1);box-shadow:0 10px 28px #2f8bffaa}
.h2btn .sec:hover,.signin:hover,.tabs button:hover,.tabs2 button:hover,.btns button:hover{transform:translateY(-2px)}
.h2btn .pri:active,.h2btn .sec:active,.start:active,.signin:active,.apri:active,.tabs button:active,.tabs2 button:active,.btns button:active{transform:translateY(0) scale(.96);transition-duration:.08s}
.h2btn .pri svg{transition:transform .28s var(--ease)}.h2btn .pri:hover svg{transform:translateX(5px)}
.alink,.link{transition:color .2s,opacity .2s}
input,textarea,select{transition:border-color .22s,box-shadow .25s,background-color .25s}
input:focus-visible,textarea:focus-visible,select:focus-visible{box-shadow:0 0 0 3px #4f8cff33}

/* ---------- Search bar expands on focus ---------- */
.hs{transition:transform .4s var(--ease),box-shadow .4s,border-color .3s,background-color .3s;transform-origin:left center}
.hs:focus-within{transform:scale(1.035);border-color:#6b9bff;background:#07124fe6;box-shadow:0 0 0 4px #2f6bff2a,0 12px 40px #2f6bff55}
.hs:focus-within .hgo{background:#3b6bff}
.hgo{transition:background-color .3s,transform .3s var(--ease)}.hs:focus-within .hgo{transform:translateX(2px)}
/* results fade in */
@keyframes resIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
#none:not([hidden]){animation:resIn .35s var(--ease) both}

/* ---------- Goals: animated checkbox + ring ---------- */
.goals input[type=checkbox]{-webkit-appearance:none;appearance:none;display:grid;place-items:center;flex:none;width:19px;height:19px;padding:0;border:1.6px solid #4a63b8;border-radius:5px;background:transparent;transition:background-color .25s,border-color .25s,box-shadow .3s,transform .2s}
.goals input[type=checkbox]:after{content:"";width:10px;height:5px;margin-top:-2px;border:2.2px solid #fff;border-top:0;border-right:0;border-radius:1px;transform:rotate(-45deg) scale(0);transition:transform .3s var(--ease)}
.goals input[type=checkbox]:checked{background:#3b82f6;border-color:#3b82f6;box-shadow:0 0 12px #3b82f677}
.goals input[type=checkbox]:checked:after{transform:rotate(-45deg) scale(1)}
.goals input[type=checkbox]:hover{border-color:#7aa2ff}
.goals input.pop{animation:pop .4s var(--ease)}
@keyframes pop{0%{transform:scale(.8)}55%{transform:scale(1.28)}100%{transform:scale(1)}}
.goals label{transition:color .3s,opacity .3s}
.ring{transition:--p 1s var(--ease);filter:drop-shadow(0 0 10px #19e3c044)}

/* ---------- Page + tool transitions ---------- */
.pg-in{animation:pgIn .5s var(--ease) both}
@keyframes pgIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.pane:not([hidden]){animation:paneIn .38s var(--ease) both}
@keyframes paneIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.frame:not([hidden]){animation:fadeIn .45s ease both}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
#mmenu:not([hidden]){animation:resIn .2s var(--ease) both}

/* ---------- Scroll reveal / staggered entrance ---------- */
html.mo .rv{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0ms)}
html.mo .rv.in{opacity:1;transform:none}
html.mo .rv.rvf{transition-duration:.3s}
html.mo .rv.noanim{transition:none}

/* ---------- Modals, notifications ---------- */
#amodal{animation:fadeIn .25s ease both;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.acard{animation:modalIn .38s var(--ease) both}
@keyframes modalIn{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
#authmsg:not([hidden]){animation:toastIn .4s var(--ease) both}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,-10px)}to{opacity:1;transform:translate(-50%,0)}}
.ax{transition:background-color .2s,transform .3s var(--ease)}.ax:hover{transform:rotate(90deg)}

/* ---------- Background: drifting gradients, stars, particles, glow ---------- */
#fx{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;contain:strict}
#fx .bgdrift{position:absolute;inset:-25%;background:radial-gradient(40% 36% at 18% 28%,#1a3fc060,transparent 70%),radial-gradient(34% 34% at 82% 18%,#5a2fd058,transparent 70%),radial-gradient(46% 40% at 62% 86%,#0f2a9060,transparent 70%);animation:bgdrift 46s ease-in-out infinite alternate;will-change:transform}
@keyframes bgdrift{0%{transform:translate3d(-3%,-2%,0) rotate(0)}50%{transform:translate3d(3%,2%,0) rotate(5deg) scale(1.06)}100%{transform:translate3d(-2%,3%,0) rotate(-4deg) scale(1.02)}}
#fx .glow{position:absolute;width:560px;height:560px;border-radius:50%;opacity:.5;will-change:transform,opacity}
#fx .g1{left:-120px;top:20%;background:radial-gradient(circle,#2f6bff44,transparent 65%);animation:glowA 18s ease-in-out infinite alternate}
#fx .g2{right:-140px;top:-80px;background:radial-gradient(circle,#7a4cff44,transparent 65%);animation:glowA 22s ease-in-out -8s infinite alternate}
@keyframes glowA{from{transform:translate3d(0,0,0) scale(1);opacity:.35}to{transform:translate3d(60px,40px,0) scale(1.15);opacity:.7}}
#fx .stars{position:absolute;top:0;left:0;height:100%;background-repeat:repeat}
#fx .st1{width:calc(100% + 340px);background-image:radial-gradient(1px 1px at 20px 30px,#fff,transparent),radial-gradient(1px 1px at 130px 90px,#cfe0ff,transparent),radial-gradient(1.4px 1.4px at 230px 170px,#fff,transparent),radial-gradient(1px 1px at 300px 40px,#d8ccff,transparent),radial-gradient(1px 1px at 70px 215px,#fff,transparent);background-size:340px 260px;animation:starsA 220s linear infinite,twinkle 7s ease-in-out infinite alternate}
#fx .st2{width:calc(100% + 520px);background-image:radial-gradient(1.2px 1.2px at 60px 70px,#bcd2ff,transparent),radial-gradient(1px 1px at 250px 150px,#fff,transparent),radial-gradient(1.5px 1.5px at 400px 300px,#e0d4ff,transparent),radial-gradient(1px 1px at 470px 60px,#fff,transparent),radial-gradient(1px 1px at 150px 340px,#cfe0ff,transparent);background-size:520px 400px;opacity:.7;animation:starsB 340s linear infinite,twinkle 11s ease-in-out -4s infinite alternate}
@keyframes starsA{to{transform:translate3d(-340px,0,0)}}@keyframes starsB{to{transform:translate3d(-520px,0,0)}}
@keyframes twinkle{from{opacity:.35}to{opacity:.95}}
#fx .fxp{position:absolute;left:var(--x);bottom:-12px;width:var(--s);height:var(--s);border-radius:50%;background:#a8c4ff;box-shadow:0 0 8px #6b9bff;opacity:0;animation:fxfloat var(--dur) linear var(--del) infinite;will-change:transform,opacity}
@keyframes fxfloat{0%{transform:translate3d(0,0,0);opacity:0}12%{opacity:.7}85%{opacity:.5}100%{transform:translate3d(var(--dx),-105vh,0);opacity:0}}
html.paused #fx *,html.paused .mscene *{animation-play-state:paused!important}

/* banner: twinkling stars, shimmering lake, parallax layers */
.mscene .twk{animation:twinkle 4.5s ease-in-out infinite alternate}
.mscene .ripples rect{animation:ripple 7s ease-in-out infinite alternate;opacity:.35}
.mscene .ripples rect:nth-child(2){animation-delay:-2s}.mscene .ripples rect:nth-child(3){animation-delay:-4s}.mscene .ripples rect:nth-child(4){animation-delay:-5.5s}
@keyframes ripple{from{transform:translateX(-14px);opacity:.15}to{transform:translateX(14px);opacity:.5}}
.mscene .ml{transform:translate3d(calc(var(--px,0)*var(--k)*1px),calc((var(--py,0)*.5 + var(--sy,0))*var(--k)*-1px),0);transition:transform .35s ease-out}

/* ---------- Loading screen ---------- */
#boot{position:fixed;inset:0;z-index:300;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;pointer-events:none;background:radial-gradient(60% 50% at 50% 42%,#1226a066,transparent),#030a2e;animation:bootOut .55s ease 1.5s forwards}
#boot img{width:96px;height:96px;object-fit:contain;filter:drop-shadow(0 0 26px #4f8cff);animation:bootLogo 2s ease-in-out infinite}
#boot b{font-size:1.4rem;font-weight:600;letter-spacing:.03em;color:#fff;animation:fadeIn .8s ease both}
#boot .bar{width:200px;height:4px;border-radius:4px;background:#12307f;overflow:hidden}
#boot .bar i{display:block;width:100%;height:100%;border-radius:4px;background:linear-gradient(90deg,#37e0ff,#7a5cff);transform:scaleX(0);transform-origin:left center;animation:bootBar 1.4s var(--ease) forwards}
@keyframes bootBar{to{transform:scaleX(1)}}
@keyframes bootLogo{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.07) rotate(-4deg)}}
@keyframes bootOut{to{opacity:0;visibility:hidden}}

/* ---------- Low-power devices: keep it light ---------- */
html.lite #fx .fxp,html.lite #fx .st2,html.lite #fx .glow{display:none}
html.lite #fx .bgdrift{animation-duration:90s}
html.lite .card:before{animation:none}
html.lite .card:hover:after,html.lite .feats a:hover:after{animation:none}
html.lite .mscene .ripples,html.lite .mscene .twk{animation:none}

/* ---------- Accessibility: reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.001ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
  #fx .fxp,#boot{display:none!important}
  html.mo .rv{opacity:1;transform:none}
  a.card:hover,.feats a:hover,.qrow:hover{transform:none}
}

/* Install as app (Stogademy header) */
#installBtn{margin-left:auto;margin-right:10px;border:1px solid #2a4db8;background:transparent;color:#fff;padding:10px 18px;border-radius:12px;font:inherit;font-size:.95rem}
#installBtn[hidden]{display:none}
#installBtn+#signinBtn,#installBtn+.signin{margin-left:0}