/* The front door. The home page a stranger sees, sign-in and sign-up, the
   confirm-your-email screen, and the what is new panel. */

#gate{position:fixed;inset:0;background:var(--bg);z-index:65;display:none;
  align-items:flex-start;justify-content:center;padding:20px;overflow-y:auto;
  padding-top:calc(20px + var(--sat));padding-bottom:calc(20px + var(--sab));}
#gate.show{display:flex;}
/* The gate is fixed to the window, but the path behind it is thirty-six
   skills tall and still scrollable — so the bar you could see belonged to the
   page underneath, not to the sign-in form. Nothing behind a full-screen
   overlay should scroll. */
html.overlay-open,body.overlay-open{overflow:hidden;height:100%;}
/* And while the gate is up, the app is not merely covered — it is not there.

   Covering it was not enough, twice. #gate used to be a child of #app, and
   #app carries a zoom for the text-size setting, which makes it the
   containing block for its own fixed children: inset:0 then meant "the size
   of #app", not "the size of the window", and #app is as tall as thirty-six
   skills. Whatever the exact geometry on a given screen, the app was
   reachable underneath a sign-in screen, which is the one place it must
   never be.

   The gate is outside #app now, so it is fixed to the window like it always
   said it was. This rule stays anyway, and is stronger for it: the app is
   not merely covered, it is not rendered. Two independent reasons the app
   cannot be touched behind the door, which for the one screen that separates
   an account from no account is the right number. */
html.gated #app{display:none !important;}
@media(min-width:520px){
  #gate{left:50%;right:auto;width:480px;transform:translateX(-50%);
        top:24px;bottom:24px;border-radius:20px;}
}
.gate-box{max-width:21rem;width:100%;margin:auto 0;}

/* Shown once, on the first start after an update. Same footing as the other
   full-screen overlays, and above the gate: it only ever appears after the
   gate has been satisfied. */
#whatsnew{position:fixed;inset:0;background:rgba(var(--scrim-ink),.55);z-index:72;
  display:none;align-items:flex-start;justify-content:center;overflow-y:auto;
  padding:24px;padding-top:calc(24px + var(--sat));padding-bottom:calc(24px + var(--sab));}
#whatsnew.show{display:flex;}
.wn-box{background:var(--panel);color:var(--ink);border:1px solid var(--line);
  border-radius:16px;padding:22px;max-width:22rem;width:100%;margin:auto 0;
  box-shadow:0 18px 40px rgba(var(--scrim-ink),.28);}
.wn-ver{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.8px;
  color:var(--ink-soft);margin-bottom:6px;}
.wn-box h2{font-family:'Space Grotesk',sans-serif;font-size:18px;margin:0 0 12px;
  line-height:1.3;}
.wn-box ul{margin:0 0 16px;padding-left:18px;}
.wn-box li{font-size:13.5px;line-height:1.55;margin-bottom:8px;color:var(--ink);}

/* The home page. Scrolls, unlike the sign-in box, because it has something to
   say — so #gate keeps its own overflow and the box is not vertically
   centred here. */
.home{max-width:34rem;width:100%;margin:0 auto;}
.home-bar{display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-bottom:26px;}
.home-bar .gate-mark{margin-bottom:0;}
/* Sized against the wordmark it sits next to, not against the .btn it
   borrows from: 8px of padding on a 13px face made it half again as tall as
   the Ohmmy mark, so the loudest thing on a page selling the free account was
   the way in for people who already have one. */
.home-login{width:auto;padding:5px 11px;font-size:12.5px;border-radius:8px;
  line-height:1.35;}
.home-hero{text-align:center;}
.home-mascot{margin-bottom:10px;}
.home-hero h1{font-family:'Space Grotesk',sans-serif;font-size:27px;line-height:1.2;
  margin:0 0 10px;color:var(--ink);}
.home-sub{font-size:14.5px;line-height:1.6;color:var(--ink-soft);margin:0 0 18px;}
.home-note{font-size:12px;color:var(--ink-soft);margin:8px 0 0;}
.linkish{background:none;border:none;padding:0;cursor:pointer;font:inherit;
  color:var(--blue-deep);text-decoration:underline;}
.home-stats{display:flex;gap:10px;margin:26px 0;text-align:center;}
.home-stats>div{flex:1;background:var(--surface-2);border:1px solid var(--line);
  border-radius:12px;padding:12px 6px;}
.home-stats b{display:block;font-family:'Space Grotesk',sans-serif;font-size:21px;
  color:var(--ink);}
.home-stats span{font-size:11.5px;color:var(--ink-soft);}
.home-sec{margin:30px 0;}
.home-sec h2{font-family:'Space Grotesk',sans-serif;font-size:17px;margin:0 0 12px;
  color:var(--ink);}
.home-list{list-style:none;padding:0;margin:0;}
.home-list li{display:flex;gap:10px;align-items:flex-start;font-size:14px;
  line-height:1.5;margin-bottom:9px;color:var(--ink);}
.home-num{flex-shrink:0;width:22px;height:22px;border-radius:50%;background:var(--tint);
  color:var(--blue-deep);font-family:'IBM Plex Mono',monospace;font-size:12px;
  font-weight:700;display:flex;align-items:center;justify-content:center;}
.home-why>div{font-size:13.5px;line-height:1.6;color:var(--ink-soft);
  padding:12px 14px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:12px;margin-bottom:9px;}
.home-why b{color:var(--ink);}
.plans{display:grid;gap:12px;}
@media(min-width:560px){.plans{grid-template-columns:repeat(3,1fr);}}
.plan{border:1px solid var(--line);border-radius:14px;padding:15px;
  background:var(--panel);display:flex;flex-direction:column;}
.plan-on{border-color:var(--amber);box-shadow:0 0 0 1px var(--amber);}
.plan-name{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:16px;
  color:var(--ink);}
.plan-line{font-size:12.5px;color:var(--ink-soft);margin:3px 0 10px;line-height:1.45;}
.plan ul{list-style:none;padding:0;margin:0 0 13px;flex:1;}
.plan li{font-size:12.5px;line-height:1.5;color:var(--ink);padding-left:16px;
  position:relative;margin-bottom:6px;}
.plan li:before{content:'';position:absolute;left:0;top:7px;width:6px;height:6px;
  border-radius:50%;background:var(--amber);}
/* .btn:disabled already says so — grey ground, soft ink, a border. The extra
   opacity halved a ratio that was only just adequate and took "Planned" down
   to 2.0:1, which is not a label anybody reads. */
.plan .btn:disabled{cursor:default;}
.home-end{text-align:center;padding-bottom:10px;}
.gate-box h2{font-family:'Space Grotesk',sans-serif;font-size:20px;margin:0 0 5px;color:var(--ink);}
.gate-box .set-hint{margin:0 0 12px;}
.gate-mark{display:flex;align-items:center;gap:8px;font-weight:700;font-size:15px;
  font-family:'Space Grotesk',sans-serif;color:var(--ink);margin-bottom:16px;}
.gate-mark svg{width:22px;height:22px;}

/* Show what you typed. A password you cannot see is a password you retype
   three times on a phone keyboard, and this form is the first thing anyone
   meets. The button says Show or Hide rather than carrying an eye icon,
   because the word is unambiguous and needs no legend. */
.pw-wrap{position:relative;}
.pw-wrap .code-box{padding-right:64px;}
.pw-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);
  background:none;border:none;padding:7px 9px;cursor:pointer;border-radius:7px;
  font-family:'IBM Plex Sans',sans-serif;font-size:12px;font-weight:600;
  color:var(--blue-deep);}
.pw-eye:hover{background:var(--tint);}

/* The screen an emailed link lands on. Same footing as the setup overlay:
   it covers everything, because arriving from an email is not a moment to
   also be looking at a lesson. */
/* Fixed for the same reason as #gate: absolute would size it to #app, which
   is as tall as the whole path. */
#mailflow{position:fixed;inset:0;background:var(--panel);z-index:70;display:none;
  align-items:flex-start;justify-content:center;padding:24px;overflow-y:auto;
  padding-top:calc(24px + var(--sat));padding-bottom:calc(24px + var(--sab));}
#mailflow.show{display:flex;}
@media(min-width:520px){
  #mailflow{left:50%;right:auto;width:480px;transform:translateX(-50%);
            top:24px;bottom:24px;border-radius:20px;}
}
.mf-box{max-width:22rem;width:100%;margin:auto 0;}
.mf-box h2{font-family:'Space Grotesk',sans-serif;font-size:19px;margin:0 0 10px;color:var(--ink);}

/* Fixed to the window, not to #app. inset:0 on an absolutely positioned
   element sizes it to its containing block, and #app is as tall as the path
   behind it — so .pl-body's own overflow never engaged, the page scrolled
   instead, Continue sat below the fold, and you could scroll far past the end
   of the questions into empty space. Same bug the sign-in screen had. */