/* Sign in + Join pages */
.auth-page { min-height: 100vh; background: var(--cream); } /* solid (owner, 9 Oct 2026): the sky-blue top showed as a hazy band under the top bar on iPad */
.auth-page .nav { position: sticky; }
.auth-wrap { width: min(1100px, 100% - 32px); margin: 36px auto 70px; display: grid; grid-template-columns: 1fr 1.05fr; gap: 0;
  border: 4px solid var(--ink); border-radius: 34px; overflow: hidden; background: #fff; box-shadow: 0 12px 0 var(--purple); }

.auth-art { position: relative; overflow: hidden; padding: 40px 34px; color: #fff; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  background: linear-gradient(160deg, #8b5cf6, #6d3fe0 60%, #4c2bb4); min-height: 560px; }
.auth-art.art-pink { background: linear-gradient(160deg, #ff7ab6, #e11d74 65%, #b3125a); }
.auth-art::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.22) 2px, transparent 2.5px); background-size: 30px 30px; }
.auth-art h2 { position: relative; font-size: clamp(1.8rem, 3vw, 2.4rem); color: #fff; margin: 8px 0 4px; }
.auth-art p { position: relative; font-weight: 700; opacity: .95; margin: 0; max-width: 32ch; }
.art-circles { position: absolute; inset: 0; }
.ac { position: absolute; border-radius: 50%; object-fit: cover; object-position: 50% 25%; border: 5px solid #fff; box-shadow: 0 10px 24px rgba(0,0,0,.25); animation: acFloat 6s ease-in-out infinite; }
.ac1 { width: 150px; height: 150px; top: 36px; left: 28px; }
.ac2 { width: 120px; height: 120px; top: 70px; right: 34px; animation-delay: -2s; }
.ac3 { width: 96px; height: 96px; top: 210px; left: 42%; animation-delay: -4s; }
@keyframes acFloat { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-12px) rotate(3deg); } }
.art-bee { position: relative; margin-top: 120px; }

.auth-card { padding: 34px 38px 30px; display: flex; flex-direction: column; }
.auth-card h1 { font-size: clamp(2rem, 4vw, 2.6rem); margin: 18px 0 10px; }
.auth-tabs { display: flex; gap: 6px; background: #f3effd; border: 3px solid var(--ink); border-radius: 999px; padding: 5px; align-self: flex-start; }
.auth-tab { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-family: var(--head); font-weight: 800; padding: 6px 18px; border-radius: 999px; color: var(--ink-soft); transition: background .2s, color .2s; }
.auth-tab.active { background: var(--ink); color: #fff; }
.auth-tab:not(.active):hover { background: #fff; color: var(--ink); }
.auth-help { font-weight: 700; color: var(--ink-soft); margin: 0 0 14px; }
.auth-form label { display: block; font-weight: 800; margin-bottom: 14px; }
.auth-form input { display: block; width: 100%; margin-top: 6px; font: inherit; font-weight: 700; color: var(--ink); border: 3px solid #d9d1f5; border-radius: 14px; padding: .7em .9em; background: #fbf9ff; }
.auth-form input:focus { outline: none; border-color: var(--purple); box-shadow: 0 0 0 4px rgba(139,92,246,.2); }
.auth-form .btn-big { width: 100%; justify-content: center; }
.auth-card .form-note { text-align: center; }
.auth-switch { margin-top: auto; padding-top: 18px; text-align: center; font-weight: 700; color: var(--ink-soft); }
.auth-switch a { font-weight: 800; color: var(--purple); }
.auth-setup p { font-weight: 800; color: var(--ink-soft); }
.auth-card .demo-accounts { grid-template-columns: 1fr 1fr; }

.plan-mini { position: relative; border: 3px solid var(--ink); border-radius: 22px; padding: 14px 18px; margin-bottom: 14px; background: #fff4fa; box-shadow: 0 5px 0 var(--pink); }
.plan-mini .plan-flag { top: -16px; right: 16px; font-size: .85rem; }
.pm-price { font-family: var(--head); font-size: 1.2rem; }
.pm-price b { font-size: 2.2rem; }
.pm-price s { opacity: .5; }
.pm-price small { font-weight: 700; color: var(--ink-soft); }
.plan-mini ul { list-style: none; padding: 0; margin: 6px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
.plan-mini li { font-weight: 700; font-size: .92rem; display: flex; gap: 6px; }
.plan-mini li i { color: var(--pink); margin-top: 3px; }
.join-steps { list-style: none; padding: 0; display: flex; gap: 8px; margin: 4px 0 16px; }
.join-steps li { flex: 1; display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: .88rem; color: var(--ink-soft); }
.join-steps span { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--ink); background: #fff; flex: none; }
.join-steps li.on { color: var(--ink); }
.join-steps li.on span { background: var(--yellow); }
.auth-card .secure { text-align: center; margin-top: 10px; }

/* Join flow: sign up → pay */
.join-steps li.done { color: var(--ink); }
.join-steps li.done span { background: var(--teal); color: #fff; font-size: 0; }
.join-steps li.done span::before { content: "✓"; font-size: .85rem; font-weight: 800; }
.join-panel h1 { margin-top: 4px; }
.join-panel.center { text-align: center; display: flex; flex-direction: column; align-items: center; padding-top: 10px; }
.google-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 12px; font: inherit; font-family: var(--head); font-weight: 800; font-size: 1.15rem;
  color: var(--ink); background: #fff; border: 3px solid var(--ink); border-radius: 999px; padding: .75em 1em; cursor: pointer; box-shadow: 0 5px 0 var(--ink); transition: transform .15s, box-shadow .15s; }
.google-btn:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--ink); }
.google-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--ink); }
.google-demo { font-weight: 700; font-size: .92rem; color: #8a5a00; background: #fff6d6; border: 2px dashed #f5b301; border-radius: 14px; padding: 8px 12px; margin: 12px 0 0; }
.or { display: flex; align-items: center; gap: 12px; margin: 18px 0 14px; color: var(--ink-soft); font-weight: 800; font-size: .9rem; }
.or::before, .or::after { content: ""; flex: 1; height: 2px; background: #e6e0f7; }
.big-ico { width: 84px; height: 84px; border-radius: 26px; display: grid; place-items: center; font-size: 42px; color: #fff; border: 3px solid var(--ink);
  background: linear-gradient(145deg, var(--c1), var(--c2)); box-shadow: 0 6px 0 var(--ink); margin-bottom: 8px; animation: acFloat 4s ease-in-out infinite; }
.signed-as { font-weight: 700; color: var(--ink-soft); margin: 0 0 14px; }
.signed-as i { color: var(--teal); }
.signed-as a { color: var(--purple); font-weight: 800; }
.order { border: 3px solid var(--ink); border-radius: 20px; padding: 6px 18px 12px; background: #fbf9ff; margin-bottom: 16px; }
.order-row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 2px dashed #e1d9f7; font-weight: 800; }
.order-row i { color: var(--pink); }
.order-row s { opacity: .45; margin-right: 4px; }
.order-row.total { font-family: var(--head); font-size: 1.35rem; border-bottom: 0; }
.order-note { margin: 0; font-size: .88rem; font-weight: 700; color: var(--ink-soft); }
.btn.wide { width: 100%; justify-content: center; }
.back-btn { margin-top: 10px; }
.demo-banner { font-weight: 700; color: #6b3fd6; background: #f1ebff; border: 2px dashed var(--purple); border-radius: 14px; padding: 10px 14px; margin: 0 0 14px; }

@media (max-width: 860px) {
  .auth-wrap { grid-template-columns: 1fr; }
  .auth-art { min-height: 300px; padding: 26px; }
  .art-bee { margin-top: 70px; }
  .ac1 { width: 100px; height: 100px; } .ac2 { width: 84px; height: 84px; } .ac3 { display: none; }
  .auth-card { padding: 24px 18px; }
  .auth-card .demo-accounts, .plan-mini ul { grid-template-columns: 1fr; }
}

.pm-trial { margin: 2px 0 6px; font-weight: 800; color: #e11d74; }
.pm-trial i { margin-right: 4px; }

/* ============ Two doors: grown-up or reader ============ */
.doors { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 6px; }
.door { font: inherit; cursor: pointer; background: #fff; color: var(--ink); border: 3px solid var(--ink); border-radius: 24px; padding: 22px 14px 18px; text-align: center; box-shadow: 0 6px 0 var(--c); transition: transform .2s cubic-bezier(.3,1.6,.5,1); }
.door:hover { transform: translateY(-4px); }
.door-ico { width: 78px; height: 78px; border-radius: 24px; margin: 0 auto 10px; display: grid; place-items: center; font-size: 2.4rem; color: #fff; background: var(--c); border: 3px solid var(--ink); transform: rotate(-4deg); }
.door b { display: block; font-family: var(--head); font-size: 1.35rem; }
.door small { display: block; color: var(--ink-soft); font-weight: 700; margin-top: 2px; }
.door-back { align-self: flex-start; font: 800 .95rem var(--head); color: var(--ink-soft); background: none; border: 0; padding: 0; margin-top: 16px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.door-back:hover { color: var(--ink); }
#grownPane h1, #kidPane h1 { margin-top: 8px; }
/* kids: pick yourself, then your pictures or numbers */
.kid-picks { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin: 6px 0 4px; }
.kid-pick { font: inherit; cursor: pointer; background: none; border: 0; padding: 0; width: 132px; text-align: center; color: var(--ink); }
.kid-face { width: 116px; height: 116px; margin: 0 auto; border-radius: 50%; background: #fff4a8; border: 4px solid var(--ink); box-shadow: 0 6px 0 var(--pink); display: grid; place-items: center; overflow: hidden; transition: transform .25s cubic-bezier(.3,1.6,.5,1); }
.kid-face svg { width: 100px; height: 100px; }
.kid-pick:hover .kid-face { transform: scale(1.06) rotate(-3deg); }
.kid-pick b { display: block; font-family: var(--head); font-size: 1.25rem; margin-top: 8px; }
.kid-other { text-align: center; margin-top: 14px; }
.kid-other a { color: var(--purple); font-weight: 800; }
.kid-me { width: 120px; height: 120px; margin: 4px auto 0; border-radius: 50%; background: #fff4a8; border: 4px solid var(--ink); display: grid; place-items: center; overflow: hidden; }
.kid-me svg { width: 104px; height: 104px; }
#kidLock h1 { text-align: center; font-size: clamp(1.4rem, 3vw, 1.8rem); }
@media (max-width: 520px) { .doors { grid-template-columns: 1fr; } .kid-pick { width: 110px; } .kid-face { width: 96px; height: 96px; } .kid-face svg { width: 84px; height: 84px; } }

/* Google's own "Continue with Google" button */
.gsi-slot { display: flex; justify-content: center; min-height: 44px; margin: 6px 0 4px; }
.gsi-slot[hidden] { display: none; }
.reader-input { font-family: var(--head) !important; font-weight: 800; font-size: 1.3rem !important; letter-spacing: .06em; text-transform: uppercase; }

/* ---------- Sign in (owner's choice from mockups/login-flow.html): the "Welcome to a world of stories!" card ---------- */
.auth-wrap.lf { grid-template-columns: 1.1fr 1fr; min-height: 560px; }
.lf .auth-card { padding: 34px 40px 26px; justify-content: center; }
.lf .auth-card h1 { margin: 6px 0 18px; line-height: 1.1; }
.lf-doors { display: grid; gap: 16px; }
.lf-big { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; border: 4px solid var(--ink); border-radius: 999px; padding: 16px 20px; font: 800 1.6rem var(--head); cursor: pointer; background: #fff; color: var(--ink); box-shadow: 0 6px 0 var(--ink); transition: transform .15s, box-shadow .15s; position: relative; }
.lf-big:hover { transform: translateY(-2px); box-shadow: 0 8px 0 var(--ink); }
.lf-big:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--ink); }
.lf-big i { font-size: 1.5rem; }
.lf-big.kid { background: var(--pink); color: #fff; }
.lf-big.kid::after { content: "✦"; position: absolute; right: 30px; top: -12px; color: var(--yellow); font-size: 1.8rem; text-shadow: 0 0 2px var(--ink); }
.lf-link { text-align: center; margin: 18px 0 0; font-weight: 800; }
.lf-link a, .lf-links a, .lf-email-link, #forgotLink, #forgotBack { color: var(--purple); font-weight: 800; }
.lf-center { text-align: center; }
.lf-email-link { text-decoration: none; font-size: 1.1rem; }
.lf-hr { width: 120px; height: 2px; background: #e6e0f7; margin: 16px auto 10px; }
.lf-links { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.lf .auth-form input { margin: 0 0 12px; }
.lf-pass { position: relative; }
.lf-pass input { padding-right: 52px; }
.lf-eye { position: absolute; right: 10px; top: 50%; transform: translateY(calc(-50% - 6px)); width: 36px; height: 36px; border: 0; background: none; color: var(--purple); font-size: 1.3rem; cursor: pointer; display: grid; place-items: center; }
.lf .legal-links { margin-top: 18px; }
.lf-art { position: relative; overflow: hidden; display: grid; place-items: center; background: #c9b6ff; background: radial-gradient(circle at 50% 40%, #ffe9f3, #c9b6ff 78%); }
.lf-swirl { position: absolute; inset: -60px; border-radius: 50%; background: conic-gradient(from 30deg, #ff5fa2, #ffd23f, #17b3a3, #7c4dff, #ff5fa2); opacity: .22; filter: blur(14px); }
.lf-crowd { position: relative; display: grid; grid-template-columns: repeat(3, 110px); justify-items: center; align-items: end; gap: 6px; }
.lf-crowd .lf-bz { grid-column: 1 / -1; animation: lfFloat 4s ease-in-out infinite; }
.lf-crowd svg, .lf-crowd img.buddy { width: 100%; height: auto; display: block; }
.lf-crowd > span { width: 100px; } .lf-crowd > .lf-bz { width: 160px; }
@keyframes lfFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
/* kids */
.lf-bee { display: flex; justify-content: center; }
.lf-bee svg, .lf-bee img.buddy { width: 110px; height: 110px; }
#kidName h1, #kidAsk h1, #kidPick h1 { text-align: center; }
.lf-name { text-align: center; font-size: 1.8rem !important; letter-spacing: .1em; border-width: 4px !important; border-color: var(--purple) !important; background: #fff !important; padding: .45em .6em !important; }
.lf-help { display: flex; align-items: center; gap: 12px; margin: 16px auto 0; border: 3px solid var(--purple); border-radius: 20px; padding: 6px 18px 6px 8px; background: #fff; cursor: pointer; font: 800 1.05rem var(--head); color: var(--purple); }
.lf-help-face svg, .lf-help-face img.buddy { width: 48px; height: 48px; display: block; }
.lf-ask { text-align: center; font-weight: 700; color: var(--ink-soft); background: #fff; border: 3px solid var(--ink); border-radius: 20px; padding: 14px 18px; box-shadow: 0 6px 0 var(--yellow); margin: 0 0 22px; }
.lf-parent-btn { width: 100%; justify-content: center; background: var(--ink); color: #fff; }
@media (max-width: 860px) {
  .auth-wrap.lf { grid-template-columns: 1fr; min-height: 0; }
  .lf-art { order: -1; min-height: 0; padding: 14px 0 6px; }
  .lf-crowd { grid-template-columns: repeat(4, 64px); gap: 4px; }
  .lf-crowd > span { width: 62px; } .lf-crowd > .lf-bz { grid-column: auto; width: 76px; }
  .lf .auth-card { padding: 24px 20px 20px; }
}
@media (max-width: 520px) { .lf-big { font-size: 1.35rem; padding: 14px 16px; } .lf-name { font-size: 1.5rem !important; } }
@media (max-width: 860px) { body[data-pane="kid"] .lf-art, body[data-pane="grown"] .lf-art { display: none; } }

/* the kid characters are round pictures that fill their circle */
.kid-face .kf-img, .kid-me .kf-img { width: 100%; height: 100%; display: block; }

/* ---------- Sign in (owner's pick, 10 Oct 2026): the E1 card from mockups/login-ideas-5.html on F6 of mockups/login-ideas-7.html,
   numbers and signs glowing as they float up a starry night sky. No reading buddies or book covers behind it. ---------- */
.num-page { background: #13183f; overflow-x: hidden; }
.num-sky { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  background: radial-gradient(ellipse at 20% 0%, rgba(139,92,246,.35), transparent 55%), radial-gradient(ellipse at 90% 100%, rgba(255,92,157,.22), transparent 50%), linear-gradient(180deg, #0e1235, #1a1f5c 70%, #2a2470); }
.ns-dust i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff; animation: nsTw 3s ease-in-out infinite; }
.ns-up { position: absolute; bottom: -120px; font-family: var(--head); font-weight: 800; line-height: 1; text-shadow: 0 0 8px currentColor, 0 0 22px currentColor; animation: nsRise linear infinite; }
@keyframes nsTw { 50% { opacity: .15; transform: scale(.6); } }
@keyframes nsRise { to { transform: translateY(calc(-100vh - 240px)) rotate(var(--r, 10deg)); } }
.num-page .nav, .num-page main { position: relative; z-index: 2; }
/* the card sits in the middle of the screen on every device (owner, 10 Oct 2026): the page is a column, the card's auto margins share the space */
.num-page { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; padding-bottom: 34px; }
.num-page .nav { margin-bottom: 22px; }
.num-page main.auth-wrap.lf { margin: auto; }
.num-page .nav { position: sticky; }
.num-page .auth-wrap.lf { grid-template-columns: 1fr; width: min(480px, 100% - 32px); min-height: 0; border: 3px solid var(--ink); border-radius: 30px; box-shadow: 0 10px 0 var(--yellow), 0 10px 0 3px var(--ink); }
.num-page .lf .auth-card { padding: 26px 30px 22px; }
.num-page .lf .auth-card h1 { font-size: clamp(1.8rem, 3.6vw, 2.2rem); margin: 4px 0 6px; }
.lf-tabs { display: grid; grid-template-columns: 1fr 1fr; background: #f3ecff; border: 2px solid var(--ink); border-radius: 999px; padding: 4px; margin-bottom: 18px; }
.lf-tab { display: flex; align-items: center; justify-content: center; gap: 6px; border: 0; background: none; color: var(--ink); padding: 9px 8px; border-radius: 999px; font: 800 1.05rem var(--head); cursor: pointer; }
.lf-tab.on { background: var(--ink); color: #fff; }
.lf-tab.kid.on { background: var(--pink); }
.lf-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: -2px 0 14px; font-weight: 700; }
.auth-form .lf-remember { display: flex; align-items: center; gap: 8px; margin: 0; cursor: pointer; }
.auth-form .lf-remember input { flex: none; width: 22px; height: 22px; margin: 0; padding: 0; accent-color: var(--purple); }
.num-page #googleWrap .or span { font-weight: 800; }
@media (max-width: 520px) { .num-page .lf .auth-card { padding: 22px 18px 18px; } .ns-up { scale: .7; } .lf-tab { font-size: .95rem; } }
@media (prefers-reduced-motion: reduce) { .ns-dust i, .ns-up { animation: none; } .ns-up { bottom: auto; top: var(--still, 20%); } }

/* ---------- the website's "Knock Knock!" door (owner's pick, mockups/login-web-e.html): two floating blob pictures, Parent or Kid,
   then the sign-in card. Only on the website (html.web-door, set in login.html); the apps get their own designs. ---------- */
.kk-door, .door-back { display: none; }
.web-door .num-page { background: #fff8ec; }
.web-door .num-sky, .web-door .lf-tabs { display: none; }
.web-door:not(.door-open) main.auth-wrap { display: none; }
.web-door:not(.door-open) .kk-door { display: flex; }
.web-door .door-back { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 0; margin: 0 0 10px; color: var(--ink-soft); font: 800 1rem var(--head); cursor: pointer; }
.kk-door { position: relative; z-index: 2; flex-direction: column; align-items: center; text-align: center; margin: auto; padding: 10px 16px 30px; }
.kk-door h1 { font: 800 clamp(2.4rem, 6vw, 3.4rem) var(--head); color: var(--purple); margin: 0; line-height: 1; }
.door-sub { font-weight: 700; font-size: 1.2rem; color: var(--ink-soft); margin: 10px 0 34px; }
.door-picks { display: flex; justify-content: center; gap: clamp(28px, 10vw, 120px); }
.door-pick { display: flex; flex-direction: column; align-items: center; gap: 12px; border: 0; background: none; padding: 0; cursor: pointer; color: var(--ink); font: inherit; }
.door-pic { width: min(230px, 40vw); aspect-ratio: 230 / 205; background-size: cover; background-position: center; animation: doorFloat 4s ease-in-out infinite; }
.door-pick.grown .door-pic { border-radius: 58% 42% 55% 45% / 50% 60% 40% 50%; box-shadow: 12px 12px 0 #d9ccff; }
.door-pick.kid .door-pic { border-radius: 45% 55% 40% 60% / 60% 45% 55% 40%; box-shadow: -12px 12px 0 #ffd0e2; background-position: center 28%; animation-delay: -2s; }
.door-pick b { font: 800 clamp(1.2rem, 3vw, 1.5rem) var(--head); white-space: nowrap; }
.door-btn { display: inline-flex; align-items: center; gap: 6px; color: #fff; font: 800 1.05rem var(--head); border-radius: 999px; padding: 8px 22px; transition: transform .15s; }
.door-pick.grown .door-btn { background: var(--purple); box-shadow: 0 5px 0 #6a3fd6; }
.door-pick.kid .door-btn { background: var(--pink); box-shadow: 0 5px 0 #d83d7c; }
.door-pick:hover .door-btn, .door-pick:focus-visible .door-btn { transform: translateY(-2px); }
.door-pick:focus-visible { outline: 3px solid var(--purple); outline-offset: 8px; border-radius: 24px; }
.door-new { font: 800 1.1rem var(--head); color: var(--purple); margin: 34px 0 0; }
.door-new a { color: var(--pink); }
@keyframes doorFloat { 50% { transform: translateY(-8px) rotate(-2deg); } }
@media (max-width: 520px) { .door-btn { font-size: .95rem; padding: 7px 16px; } .door-sub { font-size: 1.05rem; margin-bottom: 26px; } }
@media (prefers-reduced-motion: reduce) { .door-pic { animation: none; } }

/* ---------- the website's parent card, P3 of mockups/login-parent-card.html (owner's pick): soft card, purple band on top with
   "Welcome back!" and the parent's blob picture on its edge, icons in the boxes, a purple "Log in" (no wobble). Website only. ---------- */
.lf-head-face { display: none; }
.web-door .num-page .auth-wrap.lf { border: 0; border-radius: 32px; overflow: hidden; background: #fff; box-shadow: 0 18px 40px rgba(45,31,94,.14); }
.web-door .lf .auth-card { position: relative; }
.web-door .lf .door-back { position: absolute; top: 18px; left: 28px; z-index: 2; margin: 0; color: #fff; }
.web-door .lf .door-back:hover { color: #fff; opacity: .85; }
.web-door .lf-head { position: relative; margin: -26px -30px 44px; padding: 50px 30px 46px; background: linear-gradient(135deg, #a78bfa, #8b5cf6); color: #fff; text-align: left; }
.web-door .lf-head h1, .web-door .lf-head p { text-align: left; color: #fff; }
.web-door .num-page .lf .lf-head h1 { margin: 0; }
.web-door .lf-head p { margin: 4px 0 0; padding-right: 120px; opacity: .95; }
.web-door .lf-head-face { display: block; position: absolute; right: 22px; bottom: -34px; width: 110px; height: 98px; border: 5px solid #fff; background: url(assets/art/kid-reader.jpg) center / cover; border-radius: 58% 42% 55% 45% / 50% 60% 40% 50%; }
.web-door .lf #grownPane .auth-form input { border: 2px solid #e3dbf5; background: #fff; }
.web-door .lf #grownPane .auth-form input:focus { border-color: var(--purple); }
.web-door .lf #grownPane input[type="email"] { padding-left: 44px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238b5cf6'%3E%3Cpath d='M3 5h18a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1zm1 2.2V17h16V7.2l-8 5.3z M4.6 7h14.8L12 11.9z'/%3E%3C/svg%3E") 14px center / 20px no-repeat; }
.web-door .lf #grownPane input[name="password"] { padding-left: 44px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238b5cf6'%3E%3Cpath d='M12 2a5 5 0 0 1 5 5v3h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h1V7a5 5 0 0 1 5-5zm0 2a3 3 0 0 0-3 3v3h6V7a3 3 0 0 0-3-3zm0 9.5a1.5 1.5 0 0 0-.8 2.8V18h1.6v-1.7a1.5 1.5 0 0 0-.8-2.8z'/%3E%3C/svg%3E") 14px center / 20px no-repeat; }
.web-door #grownPane .btn-pink { background: var(--purple); border-color: transparent; box-shadow: 0 5px 0 #6a3fd6; }
.web-door #grownPane .btn-pink:hover { transform: translateY(-2px); box-shadow: 0 7px 0 #6a3fd6; }
.web-door .lf-links { display: block; color: var(--ink-soft); font-weight: 700; margin-top: 4px; }
.web-door .lf-links a { color: var(--pink); }
@media (max-width: 520px) {
  .web-door .lf-head { margin: -22px -18px 44px; padding: 48px 18px 40px; }
  .web-door .lf .door-back { left: 18px; }
  .web-door .lf-head-face { width: 92px; height: 82px; right: 14px; bottom: -30px; }
  .web-door .lf-head p { padding-right: 96px; }
}

/* ---------- the website's kids card, K1 of mockups/login-kid-card.html (owner's pick): the parent card's shape in pink, Tommy's blob
   on the band, one big picture of the child with "That's me!", the match-3 pictures as bright tiles. Website only. ---------- */
.lf-kidhead, .kid-yes { display: none; }
.web-door .lf-kidhead { display: block; background: linear-gradient(135deg, #ff8fbd, #ff5c9d); }
.web-door .lf-kidhead .lf-head-face { background-image: url(assets/art/tommy-dance.jpg); background-position: center 28%; border-radius: 45% 55% 40% 60% / 60% 45% 55% 40%; }
.web-door #kidPick > h1, .web-door #kidName > h1, .web-door #kidName .lf-bee { display: none; }
.web-door .kid-face { border: 4px solid #fff; box-shadow: 0 0 0 4px var(--pink), 0 8px 16px rgba(255,92,157,.3); }
.web-door .kid-pick { width: auto; }
.web-door .kid-pick .kid-face { width: 130px; height: 130px; } .web-door .kid-pick .kid-face svg { width: 112px; height: 112px; }
.web-door .kid-pick b { font-size: 1.5rem; }
.web-door .kid-yes { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; color: #fff; font: 800 1.15rem var(--head); border-radius: 999px; padding: 9px 26px; background: var(--pink); box-shadow: 0 5px 0 #d83d7c; transition: transform .15s; }
.web-door .kid-pick:hover .kid-yes { transform: translateY(-2px); }
.web-door .kid-me { border: 4px solid #fff; box-shadow: 0 0 0 4px var(--pink); width: 84px; height: 84px; } .web-door .kid-me svg { width: 72px; height: 72px; }
.web-door #kidLock h1 { margin: 10px 0 12px; font-size: 1.35rem; }
.web-door .kl-slots i.kl-want { border: 3px dashed #f3c6da; background: #fff; }
.web-door .kl-slots i.kl-done { border: 3px solid #22c55e; background: #effdf3; }
.web-door .kl-pic { background: var(--c); color: #fff; border: 0; box-shadow: 0 4px 0 rgba(45,31,94,.18); }
.web-door #nameForm .btn-pink { border-color: transparent; box-shadow: 0 5px 0 #d83d7c; }
.web-door #nameForm .btn-pink:hover { transform: translateY(-2px); }
/* "Let's find your grown-up!": soft and warm on the website, no hard outline */
.web-door #askFace { display: none; }
.web-door #kidAsk h1 { margin: 6px 0 12px; font-size: 1.6rem; color: var(--pink); }
.web-door .lf-ask { border: 0; box-shadow: none; background: #fff0f6; border-radius: 22px; padding: 16px 20px; color: var(--ink); line-height: 1.5; }
.web-door .lf-parent-btn { background: var(--purple); border-color: transparent; box-shadow: 0 5px 0 #6a3fd6; }
.web-door .lf-parent-btn:hover { transform: translateY(-2px); box-shadow: 0 7px 0 #6a3fd6; }
.web-door .lf-help-face { display: none; }   /* no buddies on the sign-in page */

/* the owner's own round badges (10 Oct 2026): the family for Parents, the girl and boy for Kids, on the door and on the cards' bands */
.door-pick .door-pic, .door-pick.grown .door-pic, .door-pick.kid .door-pic { border-radius: 50%; aspect-ratio: 1; width: min(230px, 40vw); background-size: contain; background-position: center; box-shadow: none; filter: drop-shadow(0 10px 14px rgba(45,31,94,.18)); }
.web-door .lf-head-face, .web-door .lf-kidhead .lf-head-face { width: 104px; height: 104px; border: 0; border-radius: 50%; background: url(assets/login/parent.webp) center / contain no-repeat; filter: drop-shadow(0 6px 10px rgba(45,31,94,.25)); }
.web-door .lf-kidhead .lf-head-face { background-image: url(assets/login/kids.webp); }
@media (max-width: 520px) { .web-door .lf-head-face, .web-door .lf-kidhead .lf-head-face { width: 88px; height: 88px; } }

/* ---------- Join page, J1 of mockups/join-ideas.html in GREEN (owner, 10 Oct 2026): the same soft card as Parent Log In,
   a green band with the band words per step and the family badge, no bee or story pictures, no Sign in / Join tabs.
   Each page has its color: Parent purple, Kids pink, Join green. ---------- */
.join-page { background: #fff8ec; display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; padding-bottom: 34px; }
.join-page .nav { margin-bottom: 22px; position: sticky; }
.join-page main.auth-wrap { grid-template-columns: 1fr; width: min(470px, 100% - 32px); margin: auto; border: 0; border-radius: 32px; overflow: hidden; background: #fff; box-shadow: 0 18px 40px rgba(45,31,94,.14); min-height: 0; }
.join-page .auth-card { position: relative; padding: 26px 30px 22px; }
.jn-head { position: relative; margin: -26px -30px 22px; padding: 50px 30px 44px; background: linear-gradient(135deg, #5ee29a, #1fb46a); color: #fff; }
.jn-head h1 { margin: 0; color: #fff; font-size: clamp(1.8rem, 3.6vw, 2.2rem); line-height: 1.05; }
.jn-head p { margin: 4px 0 0; font-weight: 700; padding-right: 120px; opacity: .96; }
.jn-back { position: absolute; top: 18px; left: 28px; display: inline-flex; align-items: center; gap: 6px; color: #fff; font: 800 1rem var(--head); text-decoration: none; }
.jn-back:hover { opacity: .85; }
.jn-face { position: absolute; right: 22px; bottom: -34px; width: 104px; height: 104px; border-radius: 50%; background: url(assets/login/parent.webp) center / contain no-repeat; filter: drop-shadow(0 6px 10px rgba(45,31,94,.25)); }
.join-page .join-panel > h1 { display: none; }
.join-page .join-steps { justify-content: center; gap: 10px; margin: 0 0 16px; padding-right: 96px; }
.join-page .join-steps li { flex: none; font-size: .82rem; color: #a79fc6; }
.join-page .join-steps span { width: 22px; height: 22px; border: 0; background: #eef7f1; font-size: .78rem; }
.join-page .join-steps li.on { color: var(--ink); } .join-page .join-steps li.on span { background: #1fb46a; color: #fff; }
.join-page .join-steps li.done span { background: #1fb46a; }
.join-page .plan-mini { border: 0; box-shadow: none; background: #eefaf2; border-radius: 20px; }
.join-page .plan-mini li i, .join-page .order-row i, .join-page .signed-as i { color: #1fb46a; }
.join-page .google-btn { border: 2px solid #dadce0; box-shadow: none; font: 600 1rem system-ui, sans-serif; color: #3c4043; }
.join-page .google-btn:hover { transform: none; box-shadow: none; background: #f8faf9; }
.join-page .auth-form input { border: 2px solid #d7eedf; background: #fff; }
.join-page .auth-form input:focus { border-color: #1fb46a; box-shadow: 0 0 0 4px rgba(31,180,106,.18); }
.join-page .auth-form input[type="email"] { padding-left: 44px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2316a34a'%3E%3Cpath d='M3 5h18a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1zm1 2.2V17h16V7.2l-8 5.3z M4.6 7h14.8L12 11.9z'/%3E%3C/svg%3E") 14px center / 20px no-repeat; }
.join-page .auth-form input[type="password"] { padding-left: 44px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2316a34a'%3E%3Cpath d='M12 2a5 5 0 0 1 5 5v3h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h1V7a5 5 0 0 1 5-5zm0 2a3 3 0 0 0-3 3v3h6V7a3 3 0 0 0-3-3zm0 9.5a1.5 1.5 0 0 0-.8 2.8V18h1.6v-1.7a1.5 1.5 0 0 0-.8-2.8z'/%3E%3C/svg%3E") 14px center / 20px no-repeat; }
.join-page .auth-form input[name="name"] { padding-left: 44px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2316a34a'%3E%3Ccircle cx='12' cy='8' r='4.5'/%3E%3Cpath d='M3 21c0-4.4 4-7.5 9-7.5s9 3.1 9 7.5z'/%3E%3C/svg%3E") 14px center / 20px no-repeat; }
.join-page .btn-pink { background: #1fb46a; border-color: transparent; box-shadow: 0 5px 0 #148a50; color: #fff; }
.join-page .btn-pink:hover { transform: translateY(-2px); box-shadow: 0 7px 0 #148a50; }
.join-page .order { border: 0; background: #f6faf7; }
.join-page .order-row { border-bottom: 1px solid #e3f1e8; }
.join-page .big-ico { border: 0; }
.join-page .auth-switch a { color: var(--pink); }
@media (max-width: 520px) {
  .join-page .auth-card { padding: 22px 18px 18px; }
  .jn-head { margin: -22px -18px 22px; padding: 48px 18px 40px; } .jn-back { left: 18px; }
  .jn-face { width: 88px; height: 88px; right: 14px; bottom: -30px; } .jn-head p { padding-right: 96px; }
  .join-page .join-steps { padding-right: 80px; gap: 6px; } .join-page .join-steps li { font-size: .74rem; }
}
.join-page .plan-mini .plan-flag { top: 12px; right: 14px; border-width: 2px; box-shadow: none; }
.join-page .pm-trial, .join-page .pm-trial i { color: #16a34a; }
/* the price box: just the price and the free trial (owner, 10 Oct 2026), the trial line in pink, the opposite of the green */
.join-page .pm-trial, .join-page .pm-trial i { color: #e11d74; }
.join-page .plan-mini { padding: 16px 18px; }
.join-page .plan-mini .pm-trial { margin: 4px 0 0; font-size: 1.1rem; }
/* the owner's "Join Us" badge on the green band (10 Oct 2026); not round, so no circle crop */
.jn-face { width: 128px; height: 128px; bottom: -40px; right: 16px; border-radius: 0; background-image: url(assets/login/join.webp); }
.join-page .jn-head p { padding-right: 140px; }
@media (max-width: 520px) { .jn-face { width: 104px; height: 104px; bottom: -34px; right: 10px; } .join-page .jn-head p { padding-right: 108px; } }
@media (max-width: 520px) { .join-page .join-steps { justify-content: flex-start; padding-right: 100px; gap: 6px; margin-top: 2px; } .join-page .join-steps li { font-size: .72rem; gap: 4px; } .join-page .join-steps span { width: 20px; height: 20px; } }
@media (max-width: 520px) { .join-page .join-steps { justify-content: center; padding-right: 0; margin-top: 18px; } }
/* "Create my account": big and sunny yellow with a sparkle (owner, 10 Oct 2026) */
.join-page .btn-pink.jn-create { background: #ffd23f; color: var(--ink); box-shadow: 0 5px 0 #e0a800; font-size: 1.45rem; padding-top: 13px; padding-bottom: 13px; }
.join-page .btn-pink.jn-create:hover { box-shadow: 0 7px 0 #e0a800; }
.join-page .jn-create .ph-sparkle { color: #ff8a1f; font-size: 1.3em; }
.join-page { overflow-x: clip; }   /* a sliding step never makes the page wobble sideways */

/* the sign-in and Join pages fade in once our fonts are ready (no jump from a plain font to Baloo on iPad) */
.fonts-wait .kk-door, .fonts-wait main.auth-wrap { opacity: 0; }
.kk-door, main.auth-wrap { transition: opacity .25s ease; }
/* the floating badges: a plain round shadow instead of a filter, which iPad Safari redraws (and shimmers) on every frame */
.door-pick .door-pic, .door-pick.grown .door-pic, .door-pick.kid .door-pic { filter: none; box-shadow: 0 12px 22px rgba(45,31,94,.16); will-change: transform; backface-visibility: hidden; }
.web-door, .join-page { overscroll-behavior: none; }

/* Google's own button keeps changing its height by a pixel or two on iPad, and the centered card hopped up and down with it
   (owner's screen recording, 10 Oct 2026). Its spot now has a fixed height, so nothing around it can move. */
.gsi-slot:not([hidden]) { height: 44px; min-height: 44px; overflow: hidden; align-items: center; }

/* ---------- Join page on sideways screens (iPad landscape, laptops): L1 of mockups/join-landscape.html (owner's pick, 10 Oct 2026).
   The green band becomes a tall panel on the left with the big Join Us badge; the steps, price, Google and the form sit on the right,
   so it fits without scrolling. The words inside the boxes replace the little labels above them. Phones keep the single column. ---------- */
@media (min-width: 900px) and (min-aspect-ratio: 1/1) {
  .join-page main.auth-wrap { width: min(1000px, 100% - 40px); }
  .join-page .auth-card { display: grid; grid-template-columns: .95fr 1.15fr; column-gap: 36px; align-items: start; padding: 26px 34px 20px 0; }
  .join-page .auth-card > * { grid-column: 2; }
  .join-page .jn-head { grid-column: 1; grid-row: 1 / span 20; align-self: stretch; margin: -26px 0 -20px 0; padding: 70px 30px 30px; display: flex; flex-direction: column; justify-content: center; text-align: center; }
  .join-page .jn-head p { padding-right: 0; }
  .join-page .jn-face { position: static; width: 210px; height: 210px; margin: 18px auto 0; }
  .join-page .join-steps { padding-right: 0; justify-content: flex-start; margin-top: 4px; }
  .join-page .auth-form label { font-size: 0; margin: 0; }
  .join-page .auth-form label input { font-size: 1rem; margin-top: 0; }
  .join-page .auth-switch { padding-top: 10px; }
  .join-page .legal-links { margin-top: 6px; }
}
/* size the sign-in and Join pages to the steady screen height (svh), not the live one (dvh): on iPad the browser bars change size
   when Google's sign-in window opens and closes, and the centered card shook for a moment as the live height changed */
.num-page, .join-page { min-height: 100vh; min-height: 100svh; }

/* ---------- Join steps with fewer words (owner's picks from mockups/join-simpler.html, 10 Oct 2026) ---------- */
.join-page .jn-dots { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font: 800 .82rem var(--head); color: #a79fc6; }
.join-page .jn-dots .join-steps { margin: 0; padding: 0; gap: 6px; justify-content: flex-start; }
.join-page .jn-dots .join-steps li { font-size: 0; gap: 0; }
.join-page .jn-dots .join-steps span { width: 10px; height: 10px; font-size: 0; background: #dfeee5; transition: width .25s; }
.join-page .jn-dots .join-steps li.on span { width: 26px; border-radius: 99px; background: #1fb46a; }
.join-page .jn-dots .join-steps li.done span { background: #1fb46a; }
.join-page .jn-dots .join-steps li.done span::before { content: none; }
.join-page .jn-price { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; }
.join-page .jn-price .plan-flag { position: static; display: inline-block; font-size: .78rem; padding: 1px 10px; }
.join-page .jn-price-r { text-align: right; }
.join-page .jn-price .pm-trial { margin: 4px 0 0; font-size: 1rem; }
.join-page .auth-form label { font-size: 0; margin: 0; }
.join-page .auth-form label input { font-size: 1rem; margin: 0 0 10px; }
.join-page .jn-bill { background: #f6faf7; border-radius: 18px; padding: 4px 18px; margin: 0 0 12px; }
.join-page .jn-bill > div { display: flex; justify-content: space-between; gap: 10px; padding: 11px 0; font-weight: 800; border-top: 1px solid #e3f1e8; }
.join-page .jn-bill > div:first-child { border-top: 0; }
.join-page .jn-bill s { color: #a79fc6; margin-right: 4px; }
.join-page .jn-due { font: 800 1.2rem var(--head); }
.join-page .jn-say { font-weight: 700; color: var(--ink-soft); margin: 0 0 14px; }
.join-page .jn-say b { color: var(--ink); }
.join-page .jn-tiny { text-align: center; font-size: .82rem; font-weight: 700; color: #9a90bd; margin: 12px 0 0; }
.join-page .jn-tiny i { color: #1fb46a; } .join-page .jn-tiny a { color: inherit; }
.join-page .jn-who { text-align: center; font-size: .88rem; font-weight: 700; color: var(--ink-soft); margin: 8px 0 0; }
.join-page .jn-who a { color: var(--purple); font-weight: 800; }
.join-page .jn-back-link { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 14px auto 0; border: 0; background: none; color: var(--ink-soft); font: 800 1rem var(--head); cursor: pointer; }
.join-page .legal-links { display: none; }
@media (max-width: 520px) { .join-page .jn-dots { margin-top: 18px; } }

/* the clear top-right "Back" (B1 of mockups/back-button.html, owner 10 Oct 2026); the small white "Back" on the bands is gone */
.nav-back { display: none; }
.web-door.door-open .nav-back { display: inline-flex; }
.web-door .lf .door-back { display: none; }
.web-door .lf-head { padding-top: 30px; } .jn-head { padding-top: 30px; }
@media (max-width: 520px) { .web-door .lf-head, .jn-head { padding-top: 26px; } }
/* the soft purple and pink shapes behind the two pictures, as in E1 of mockups/login-web-e.html (owner, 10 Oct 2026) */
.door-pick.grown .door-pic { box-shadow: 14px 14px 0 #d9ccff; }
.door-pick.kid .door-pic { box-shadow: -14px 14px 0 #ffd0e2; }
@media (max-width: 520px) { .door-pick.grown .door-pic { box-shadow: 9px 9px 0 #d9ccff; } .door-pick.kid .door-pic { box-shadow: -9px 9px 0 #ffd0e2; } }

/* ---------- the final Knock Knock look (owner, 10 Oct 2026; mockups/login-door-final.html): D5's sprinkles + D2's wobbly blobs ---------- */
.door-dots { display: none; }
.web-door .door-dots { display: block; position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.door-dots i { position: absolute; border-radius: 50%; opacity: .55; }
.door-blob { position: relative; display: grid; place-items: center; width: min(240px, 42vw); aspect-ratio: 1 / .93; animation: doorFloat 4s ease-in-out infinite; will-change: transform; backface-visibility: hidden; }
.door-pick.kid .door-blob { animation-delay: -2s; }
.door-blob::before { content: ""; position: absolute; inset: 0; background: #d9ccff; border-radius: 58% 42% 55% 45% / 50% 60% 40% 50%; transform: rotate(-8deg); }
.door-pick.kid .door-blob::before { background: #ffd0e2; border-radius: 45% 55% 40% 60% / 60% 45% 55% 40%; transform: rotate(8deg); }
.door-pick .door-pic, .door-pick.grown .door-pic, .door-pick.kid .door-pic { position: relative; width: 86%; animation: none; box-shadow: 0 10px 18px rgba(45,31,94,.16); }
@media (max-width: 520px) { .door-pick .door-pic, .door-pick.grown .door-pic, .door-pick.kid .door-pic { box-shadow: 0 8px 14px rgba(45,31,94,.16); } }
@media (prefers-reduced-motion: reduce) { .door-blob { animation: none; } }

/* ---------- the apps' first-open welcome (owner, 10 Oct 2026): your "Welcome! Let's play and learn!" picture, then
   "Made for little ones" with three equal colored pills (T6 of mockups/little-ones-cards.html). Apps only, once. ---------- */
.aw { display: none; }
.app-welcome .aw { display: flex; position: fixed; inset: 0; z-index: 60; flex-direction: column; background: #fff8ec; overflow: hidden;
  padding: env(safe-area-inset-top) 0 max(20px, env(safe-area-inset-bottom)); }
.app-welcome .kk-door, .app-welcome .nav { visibility: hidden; }
.aw-dots { position: absolute; inset: 0; pointer-events: none; }
.aw-dots i { position: absolute; border-radius: 50%; opacity: .55; }
.aw-skip { position: absolute; z-index: 2; top: max(16px, env(safe-area-inset-top)); right: 18px; border: 0; background: none; font: 800 1.05rem var(--head); color: var(--ink-soft); padding: 8px; cursor: pointer; }
.aw-track { position: relative; flex: 1; display: flex; width: 200%; transition: transform .45s cubic-bezier(.3,1.2,.5,1); }
.aw-slide { width: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 50px 22px 10px; }
.aw-pic { width: min(330px, 72vw, 44vh); aspect-ratio: 640 / 635; background: url(assets/login/welcome-app.webp) center / contain no-repeat; animation: doorFloat 4s ease-in-out infinite; }
.aw-sub { font-weight: 800; color: var(--ink-soft); font-size: clamp(1rem, 2.6vw, 1.25rem); margin: 18px 0 0; max-width: 420px; }
.aw-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 18px 0 0; }
.aw-chips span { display: inline-flex; align-items: center; gap: 6px; background: #fff; border-radius: 999px; padding: 7px 14px; font: 800 1rem var(--head); color: var(--ink); box-shadow: 0 4px 10px rgba(45,31,94,.1); }
.aw-next, .aw-go { display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 999px; padding: 13px 34px; margin-top: 28px; font: 800 1.2rem var(--head); cursor: pointer; min-height: 48px; }
.aw-next { background: var(--purple); color: #fff; box-shadow: 0 5px 0 #6a3fd6; }
.aw-go { background: #ffd23f; color: var(--ink); box-shadow: 0 5px 0 #e0a800; } .aw-go i { color: #ff8a1f; }
.aw-kids { width: min(130px, 30vw); aspect-ratio: 1; border-radius: 50%; background: url(assets/login/kids.webp) center / cover; box-shadow: 0 8px 16px rgba(45,31,94,.16); }
.aw-title { font: 800 clamp(1.9rem, 5.5vw, 2.6rem) var(--head); color: var(--purple); margin: 14px 0 20px; line-height: 1.05; }
.aw-pills { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; width: min(340px, 100%); }
.aw-pills li { display: flex; align-items: center; gap: 10px; background: var(--c); color: #fff; border-radius: 999px; padding: 11px 18px 11px 10px; font: 800 1.1rem var(--head); text-align: left; }
.aw-pills i { flex: none; width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.28); display: grid; place-items: center; font-size: 1.1rem; }
.aw-pager { position: relative; display: flex; justify-content: center; gap: 7px; padding: 8px 0 4px; }
.aw-pager i { width: 10px; height: 10px; border-radius: 50%; background: #dcd3f2; transition: width .25s; }
.aw-pager i.on { width: 28px; border-radius: 99px; background: var(--purple); }
@media (max-height: 560px) { .aw-pic { width: min(200px, 34vh); } .aw-slide { padding-top: 30px; } .aw-next, .aw-go { margin-top: 14px; } }
@media (prefers-reduced-motion: reduce) { .aw-track { transition: none; } .aw-pic { animation: none; } }

/* preview of the tall-screen Knock Knock looks (login.html?look=s2 / ?look=s4; mockups/login-fill-space.html), upright screens only */
@media (orientation: portrait) {
  .look-s2 .kk-door, .look-s4 .kk-door { justify-content: center; padding-top: 4vh; }
  .look-s2.web-door:not(.door-open) .nav, .look-s4.web-door:not(.door-open) .nav { display: none; }
  .look-s2 .kk-door::before, .look-s4 .kk-door::before { content: ""; display: block; width: min(52vw, 26vh); aspect-ratio: 1.073; background: url(assets/brand/whizzbee-logo-b-3x.png) center / contain no-repeat; margin-bottom: 2vh; }
  .look-s2 .kk-door h1 { font-size: clamp(2.8rem, 10vw, 5.2rem); }
  .look-s2 .door-sub { font-size: clamp(1.15rem, 3.2vw, 1.7rem); margin-bottom: 6vh; }
  .look-s2 .door-picks { gap: 6vw; }
  .look-s2 .door-blob { width: min(44vw, 32vh); }
  .look-s2 .door-pick b { font-size: clamp(1.4rem, 4vw, 2.1rem); }
  .look-s2 .door-btn, .look-s4 .door-btn { font-size: clamp(1.05rem, 2.8vw, 1.4rem); padding: 12px 30px; }
  .look-s2 .door-new, .look-s4 .door-new { margin-top: 5vh; font-size: clamp(1.05rem, 2.8vw, 1.4rem); }
  .look-s4 .kk-door h1 { font-size: clamp(2.6rem, 9vw, 4.6rem); }
  .look-s4 .door-sub { font-size: clamp(1.1rem, 3vw, 1.6rem); margin-bottom: 4vh; }
  .look-s4 .door-picks { flex-direction: column; gap: 3.5vh; width: min(600px, 92vw); }
  .look-s4 .door-pick { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 6vw; align-items: center; text-align: left; background: rgba(255,255,255,.55); border-radius: 34px; padding: 2.4vh 5vw; }
  .look-s4 .door-pick .door-blob { grid-row: 1 / span 2; width: min(34vw, 19vh); }
  .look-s4 .door-pick b { align-self: end; font-size: clamp(1.4rem, 4.6vw, 2.2rem); white-space: normal; }
  .look-s4 .door-pick .door-btn { align-self: start; justify-self: start; }
  .look-s4 .door-pick.kid { grid-template-columns: 1fr auto; text-align: right; }
  .look-s4 .door-pick.kid .door-blob { grid-column: 2; }
  .look-s4 .door-pick.kid b, .look-s4 .door-pick.kid .door-btn { grid-column: 1; justify-self: end; }
}
/* smaller logo, and S2/S4 always fit one screen with no scroll (owner, 10 Oct 2026) */
@media (orientation: portrait) {
  .look-s2 .kk-door::before, .look-s4 .kk-door::before { width: min(34vw, 15vh); margin-bottom: 1.5vh; }
  .look-s2 .kk-door, .look-s4 .kk-door { padding: 2vh 16px 2vh; }
  .look-s2.web-door:not(.door-open), .look-s4.web-door:not(.door-open) { height: 100svh; overflow: hidden; }   /* the cards after it can still scroll */
  .look-s2:not(.door-open) .num-page, .look-s4:not(.door-open) .num-page { min-height: 0; height: 100svh; padding-bottom: 0; }
  .look-s4 .door-sub { margin-bottom: 3vh; }
  .look-s4 .door-picks { gap: 2.5vh; }
  .look-s4 .door-pick { padding: 1.8vh 5vw; }
  .look-s4 .door-pick .door-blob { width: min(32vw, 17vh); }
  .look-s4 .door-new, .look-s2 .door-new { margin-top: 3.5vh; }
  .look-s2 .door-sub { margin-bottom: 4.5vh; }
  .look-s2 .door-blob { width: min(42vw, 30vh); }
}