/* =====================================================================================================
   t-login.css (hand-written, 21 Oct 2026): the Log in chooser (/login/), template "login", "the doorway".
   A full-height wine stage, the headline centred, three arched doors side by side (CatalyseAI, Sampleeye,
   PocketsFull), each lit from inside; a floor line under them; a quiet foot (you log in on each product's own site;
   talk to sales); then a short help block. Class prefix lo- ("login" itself is a homepage header class). Loads after
   wine-base.css. 21 Oct 2026 review fixes: .lo-own (was .lo-safe), the FAQ answer links, the members' help link,
   the dormant Google Play slot link, and no header progress bar.
   Never a form: the page holds links only.
   ===================================================================================================== */

/* ---------- the stage ---------- */
body.t-login .lo-stage {
  min-height: calc(100vh - 60px); display: flex; flex-direction: column; justify-content: center; padding: 124px 0 64px;
  /* our own symmetric version of the homepage hero: light rising behind the doors, crimson at both edges */
  background:
    radial-gradient(56% 46% at 50% 104%, rgba(214,51,94,.50) 0%, rgba(214,51,94,.16) 48%, rgba(214,51,94,0) 76%),
    radial-gradient(34% 48% at 100% 18%, rgba(176,32,92,.62) 0%, rgba(176,32,92,0) 80%),
    radial-gradient(34% 48% at 0% 26%, rgba(110,20,70,.70) 0%, rgba(110,20,70,0) 80%),
    radial-gradient(40% 30% at 50% 0%, #14040f 0%, rgba(20,4,15,0) 85%),
    linear-gradient(116deg, rgba(0,0,0,0) 22%, rgba(230,120,160,.10) 28%, rgba(0,0,0,0) 34%, rgba(0,0,0,0) 62%, rgba(235,130,170,.07) 68%, rgba(0,0,0,0) 74%),
    linear-gradient(180deg, #1a0616 0%, #22081d 38%, #2e0b25 66%, #3d0f2e 88%, #4a1238 100%);
}
.lo-stage__glow { position: absolute; z-index: -1; left: 50%; top: 34%; width: 1240px; height: 760px; margin-left: -620px; pointer-events: none; }
.lo-stage__glow i { display: block; width: 100%; height: 100%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(232,70,111,.30), rgba(232,70,111,.09) 55%, rgba(232,70,111,0)); }
.lo-stage__lines { position: absolute; z-index: -1; inset: 0; pointer-events: none; opacity: .55;
  -webkit-mask-image: radial-gradient(60% 55% at 50% 38%, #000 0%, rgba(0,0,0,0) 78%);
  mask-image: radial-gradient(60% 55% at 50% 38%, #000 0%, rgba(0,0,0,0) 78%); }
.lo-stage__wrap { position: relative; }

/* headline block, centred */
.lo-stage__head { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 900px; margin: 0 auto 44px; text-align: center; }
.lo-stage__head .wn-crumbs { justify-content: center; margin-bottom: 4px; }
.lo-stage__h1 { font-size: 60px; line-height: 66px; }
.lo-stage__lead { max-width: 680px; text-wrap: balance; }
.lo-help .wn-sub { text-wrap: pretty; }

/* ---------- the three doors ---------- */
.lo-doors { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px;
  max-width: 1180px; margin: 0 auto; }
.lo-doors__item { position: relative; display: flex; min-width: 0; }
/* the light each door throws on the floor */
.lo-doors__item::after { content: ""; position: absolute; z-index: -1; left: 6%; right: 6%; bottom: -34px; height: 52px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,128,165,.42), rgba(255,128,165,0)); opacity: .5; pointer-events: none;
  transition: opacity .5s var(--wn-ease-out); }
.lo-doors__item:hover::after, .lo-doors__item:focus-within::after { opacity: 1; }

.lo-door { --lo-c: 214, 51, 94; position: relative; isolation: isolate; flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden;
  border-radius: 50% 50% 28px 28px / 150px 150px 28px 28px;
  background: linear-gradient(180deg, rgba(62,16,47,.94) 0%, rgba(34,9,29,.96) 52%, rgba(22,5,18,.97) 100%);
  border: 1px solid rgba(255,179,199,.26);
  box-shadow: 0 30px 70px rgba(8,1,6,.55), inset 0 1px 0 rgba(255,179,199,.16);
  transition: transform .5s var(--wm-ease, ease), translate .5s var(--wn-ease-out), border-color .4s ease, box-shadow .5s var(--wn-ease-out); }
.lo-door--se { --lo-c: 232, 70, 111; }
.lo-door--pf { --lo-c: 255, 150, 180; }
/* the inner frame of the doorway */
.lo-door::before { content: ""; position: absolute; z-index: 0; inset: 12px; pointer-events: none;
  border-radius: 50% 50% 18px 18px / 140px 140px 18px 18px; border: 1px solid rgba(255,179,199,.15); transition: border-color .4s ease; }
/* the light inside the arch, and the pointer spotlight (t-login.js moves it; centred without JS) */
.lo-door__light { position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: 72%; pointer-events: none; opacity: .85;
  background: radial-gradient(72% 62% at 50% 0%, rgba(var(--lo-c), .58) 0%, rgba(var(--lo-c), .16) 46%, rgba(var(--lo-c), 0) 78%);
  transition: opacity .9s ease; }
.lo-door__spot { position: absolute; z-index: -1; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s ease;
  background: radial-gradient(240px circle at var(--lo-mx, 50%) var(--lo-my, 24%), rgba(255,179,199,.15), rgba(255,179,199,0) 72%); }

.lo-door__in { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 78px 34px 26px; }
.lo-door__mark { height: 58px; display: flex; align-items: center; justify-content: center; margin-bottom: 22px; }
.lo-door__mark img { display: block; width: auto; }
.lo-door--se .lo-door__mark img { height: 40px; }
.lo-door--pf .lo-door__mark img { height: 54px; }
.lo-word { font: 500 42px/1 var(--display); letter-spacing: -1.2px; color: #fff; white-space: nowrap; }
.lo-word b { font-weight: 600; color: var(--mint); }
.lo-door__who { font: 600 13px/18px var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--mint); margin-bottom: 10px; }
.lo-door__line { flex: 1; max-width: 310px; margin-bottom: 26px; font: 400 16px/25px var(--text); color: rgba(255,255,255,.82); }
.lo-door__btn { display: flex; width: 100%; }
.lo-door__btn[href^="http"]:hover .wn-arr { transform: translate(3px, -3px); }
.lo-door__dest { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; font: 500 13px/18px var(--text); color: rgba(255,255,255,.68); }
.lo-door__dico { flex: none; color: rgba(255,179,199,.8); }
/* a button that stays on this site has no host line: an empty spacer of the same height keeps the buttons level */
.lo-door__dest--none { height: 18px; margin-top: 12px; }
/* a quieter second link in the same slot (PocketsFull's Google Play link, once the owner confirms it; login.py PLAY_URL) */
.lo-door__alt { display: inline-flex; align-items: center; gap: 7px; color: rgba(255,255,255,.8); border-radius: 6px;
  text-decoration: underline; text-decoration-color: rgba(255,179,199,.45); text-underline-offset: 4px;
  transition: color .25s ease, text-decoration-color .25s ease; }
.lo-door__alt:hover { color: #fff; text-decoration-color: rgba(255,179,199,.9); }
.lo-door__alt:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }
.lo-door__aico { flex: none; color: rgba(255,179,199,.8); transition: transform .25s var(--wn-ease-out); }
.lo-door__alt:hover .lo-door__aico { transform: translate(2px, -2px); }

/* the header's "Log in" on its own page (t-login.js sets aria-current="page"): a soft rose tint, as an open menu */
body.t-login .login[aria-current="page"] { background: var(--blue10, #fbf0f3); color: var(--blue70, #8e1a47); }
body.t-login .login[aria-current="page"]:hover { background: var(--blue20, #f6c9d6); }

/* hover / keyboard focus: the door lifts, its frame and light brighten */
.lo-door:hover, .lo-door:focus-within { border-color: rgba(255,179,199,.56);
  box-shadow: 0 42px 84px rgba(8,1,6,.62), 0 0 0 1px rgba(var(--lo-c), .22), 0 0 64px rgba(var(--lo-c), .24), inset 0 1px 0 rgba(255,179,199,.3); }
.lo-door:hover::before, .lo-door:focus-within::before { border-color: rgba(255,179,199,.34); }
.lo-door:hover .lo-door__light, .lo-door:focus-within .lo-door__light { opacity: 1; transition-delay: 0s; transition-duration: .4s; }
.lo-door:hover .lo-door__spot { opacity: 1; }
@media (hover: hover) {
  .lo-door:hover, .lo-door:focus-within { translate: 0 -8px; }
}

/* motion: the doors rise one by one (data-reveal="stagger"), then their light switches on, then the floor line draws */
html.wm-on .lo-doors:not(.is-in) .lo-door__light { opacity: 0; }
html.wm-on .lo-doors .lo-door__light { transition: opacity 1.4s ease calc(var(--wm-i, 0) * 160ms + 650ms); }
html.wm-on .lo-doors .lo-door:hover .lo-door__light, html.wm-on .lo-doors .lo-door:focus-within .lo-door__light { transition: opacity .4s ease 0s; }

/* ---------- the floor line and the quiet foot ---------- */
.lo-floor { position: relative; max-width: 1240px; height: 1px; margin: 32px auto 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(255,179,199,0), rgba(255,179,199,.5) 30%, rgba(255,179,199,.5) 70%, rgba(255,179,199,0)); }
.lo-floor::after { content: ""; position: absolute; left: 20%; right: 20%; top: -10px; height: 20px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,140,175,.28), rgba(255,140,175,0)); }
html.wm-on .lo-floor { transform: scaleX(0); transition: transform 1.6s var(--wm-ease) .7s; }
html.wm-on .lo-doors.is-in + .lo-floor { transform: scaleX(1); }

.lo-stage__foot { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px 20px; margin-top: 22px; }
.lo-own, .lo-new { display: inline-flex; align-items: center; gap: 8px; font: 400 15px/22px var(--text); color: rgba(255,255,255,.76); }
.lo-own__ico { flex: none; color: var(--mint); }
.lo-stage__dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,179,199,.6); }
.lo-new .tlink { padding-top: 0; font-size: 15px; }

/* ---------- help: four questions from the content files ---------- */
.lo-help { padding: 104px 0 112px; background: var(--wn-page); }
.lo-faq .wn-faq__item summary span { font-weight: 600; }
.lo-key { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--wn-line); }
.lo-key__k { font: 600 13px/18px var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--grey70); margin-bottom: 14px; }
.lo-key ul { display: flex; flex-direction: column; gap: 12px; }
.lo-key__k--more { margin-top: 30px; }
/* the sites and "talk to our sales team" named in the answers are links (login.py _link_phrase), words unchanged */
.lo-faq .wn-faq__a a.lo-a { color: var(--wn-link, #b4235a); font-weight: 500; text-decoration: underline;
  text-decoration-color: rgba(180,35,90,.35); text-underline-offset: 4px; text-decoration-thickness: 1px;
  transition: color .2s ease, text-decoration-color .2s ease; }
.lo-faq .wn-faq__a a.lo-a:hover { color: var(--wn-deep, #8e1a47); text-decoration-color: currentColor; }
.lo-faq .wn-faq__a a.lo-a:focus-visible { outline: 2px solid var(--wn-link, #b4235a); outline-offset: 2px; border-radius: 3px; }

/* ---------- no scroll progress bar on this short page ----------
   render() returns progress: False, so <body> has .wn-noprogress and wine-motion.js adds no bar; the shared header
   carries its own bar (.sprog, wine-chrome.css), shown by "html:not(.nomo):not(.sm-js) .sprog" / "html.sp-js .sprog",
   which a plain body.wn-noprogress rule cannot outrank: hence !important. */
body.wn-noprogress .sprog { display: none !important; }

/* ---------- small laptops, tablets, phones (wine-base.css breakpoints) ---------- */
@media (max-width: 1199.98px) {
  .lo-doors { gap: 22px; }
  .lo-door__in { padding: 84px 24px 26px; }
  .lo-word { font-size: 36px; }
  .lo-door--pf .lo-door__mark img { height: 46px; }
  .lo-door--se .lo-door__mark img { height: 34px; }
}
@media (max-width: 1023.98px) {
  body.t-login .lo-stage { min-height: 0; padding: var(--wn-hdr-clear, 160px) 0 72px; }
  .lo-stage__h1 { font-size: clamp(34px, 3.21vw + 25.5px, 62px); line-height: 1.1; }
  .lo-stage__head { margin-bottom: 44px; }
  .lo-doors { grid-template-columns: minmax(0, 1fr); max-width: 520px; gap: 48px; }
  .lo-door { border-radius: 50% 50% 24px 24px / 120px 120px 24px 24px; }
  .lo-door::before { border-radius: 50% 50% 16px 16px / 110px 110px 16px 16px; }
  .lo-door__in { padding: 80px 32px 28px; }
  .lo-door__line { flex: none; }
  .lo-door__dest--none { display: none; }
  .lo-floor { display: none; }
  .lo-stage__glow { width: 900px; margin-left: -450px; }
  .lo-help { padding: 88px 0 96px; }
}
@media (max-width: 767.98px) {
  body.t-login .lo-stage { padding: var(--wn-hdr-clear-m, 136px) 0 56px; }
  .lo-stage__head { gap: 12px; margin-bottom: 36px; }
  .lo-doors { gap: 40px; }
  .lo-door { border-radius: 50% 50% 22px 22px / 96px 96px 22px 22px; }
  .lo-door::before { inset: 10px; border-radius: 50% 50% 14px 14px / 88px 88px 14px 14px; }
  .lo-door__in { padding: 68px 22px 24px; }
  .lo-door__mark { height: 52px; margin-bottom: 20px; }
  .lo-word { font-size: 32px; }
  .lo-door--pf .lo-door__mark img { height: 44px; }
  .lo-door--se .lo-door__mark img { height: 32px; }
  .lo-stage__foot { flex-direction: column; gap: 10px; }
  .lo-stage__dot { display: none; }
  .lo-own, .lo-new { font-size: 16px; justify-content: center; text-align: center; flex-wrap: wrap; }
  .lo-new .tlink { font-size: 16px; }
  .lo-help { padding: 72px 0 80px; }
}
@media (hover: none) and (pointer: coarse) {
  .lo-door:hover, .lo-door:focus-within { translate: none; }
  .lo-door__btn { min-height: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  .lo-door, .lo-door::before, .lo-door__light, .lo-door__spot, .lo-doors__item::after { transition: none !important; }
  .lo-door:hover, .lo-door:focus-within { translate: none; }
  .lo-floor { transform: none !important; }
}

/* @@ RESPONSIVE-HC BEGIN (phone and tablet pass, 21 Oct 2026; keep this block last in the file) @@ */
/* touch screens: "Talk to sales" in the foot gets the shared 44px tap area (.lo-new .tlink set padding-top 0, which
   cancelled wine-base.css's touch padding); negative margins keep the line where it is */
@media (hover: none) and (pointer: coarse) {
  .lo-new .tlink { padding-top: 11px; padding-bottom: 11px; margin-top: -11px; margin-bottom: -11px; }
}
/* @@ RESPONSIVE-HC END @@ */