/* Home page for library owners. Uses only the theme variables, so it follows the active theme.
   Text is larger than in the app (19 to 23px) so it is easy to read.
   Animations: every animated element has the class "a". It waits (paused) until app.js marks its section
   with "is-in". Without JavaScript the animations simply run once on load. With reduced motion the rule in
   components.css switches all animations off, and the base styles below are the finished picture. */

.lp-body{font-size:19px;line-height:1.5}
.lp-wrap{max-width:1160px;margin:0 auto;padding:0 20px}
@media (min-width:600px){.lp-wrap{padding:0 32px}}

/* Brand bar on the home page: wider, with the two log in links */
.lp-bar{max-width:1160px;padding:12px 20px;gap:12px}
@media (min-width:600px){.lp-bar{padding:12px 32px}}
.lp-nav{display:flex;align-items:center;gap:6px}
.lp-navlink{font-size:16px;font-weight:600;text-decoration:none;color:var(--text);padding:0 10px}
.lp-navlink:hover{text-decoration:underline}
.lp-nav-owner{display:none}
@media (min-width:640px){.lp-nav-owner{display:inline-flex}}

.lp-main{display:block;overflow-x:clip}

/* Sections */
.lp-hero{padding:clamp(40px,8vw,104px) 0 clamp(48px,8vw,96px)}
.lp-band{padding:clamp(56px,9vw,120px) 0;border-top:var(--divider)}
.lp-split{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
@media (min-width:900px){
  .lp-split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .lp-flip > .lp-copy{order:2}
}
.lp-copy{display:flex;flex-direction:column;gap:20px;min-width:0}
.lp-copy p{max-width:30em;font-size:clamp(19px,2.1vw,22px)}
.lp-visual{min-width:0;display:flex;justify-content:center}

/* Type */
.lp-h1{margin:0;font-family:var(--font-display);font-weight:var(--dw);letter-spacing:var(--track);line-height:1.02;font-size:clamp(42px,9.5vw,80px);max-width:11em}
.lp-h2{margin:0;font-family:var(--font-display);font-weight:var(--dw);letter-spacing:var(--track);line-height:1.06;font-size:clamp(34px,6.4vw,58px);max-width:13em}
.lp-lead{font-size:clamp(20px,2.4vw,24px) !important}
.lp-note{font-size:17px !important;color:var(--muted)}
.lp-cta{display:flex;flex-wrap:wrap;gap:12px}
.lp-btn{min-height:58px;padding:0 28px;font-size:18px}
@media (max-width:479px){.lp-cta .lp-btn{flex:1 1 100%}}

/* ---------- Hero: the seat map that fills up ---------- */
.lp-map{position:relative;width:100%;max-width:520px;padding:clamp(16px,3vw,24px);display:flex;flex-direction:column;gap:14px}
.lp-map-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:17px}
.lp-map-head strong{font-family:var(--font-display);font-weight:var(--dw);font-size:22px}
.lp-seats{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:clamp(4px,1vw,8px)}
.lp-seat{display:flex;align-items:center;justify-content:center;aspect-ratio:1;border:1.5px solid var(--seat-free-bd);border-radius:max(4px,calc(var(--r-btn) / 2));background:var(--bg);color:var(--text);font-weight:700;font-size:clamp(12px,2.6vw,15px);font-variant-numeric:tabular-nums}
.s-m{background:var(--info-bg);color:var(--on-info);border-color:var(--info-bg)}
.s-e{background:var(--warn-bg);color:var(--on-warn);border-color:var(--warn-bg)}
.s-f{background:var(--good-bg);color:var(--on-good);border-color:var(--good-bg)}
.lp-seat.s-x{background:var(--bg);color:var(--text);border-color:var(--seat-free-bd)}
.lp-legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:15px}
.lp-legend span{display:inline-flex;align-items:center;gap:6px}
.lp-legend i{display:inline-block;width:14px;height:14px;border-radius:4px;border:1.5px solid var(--seat-free-bd)}
.lp-legend i.s-x{background:var(--bg)}
.lp-toast{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:12px 14px;border-radius:var(--r-btn);background:var(--bg);border:1.5px solid var(--line);font-size:16px;font-weight:600}
.lp-ask{outline:3px solid var(--focus);outline-offset:2px}

.lp-seat.a{animation:lp-seat .45s cubic-bezier(.3,1.4,.5,1) both}
.lp-seat.s-x.a{animation:none}
.lp-seat.lp-ask.a{animation:lp-ask 1.1s ease-in-out 2.4s 3 both}
.d0{animation-delay:.30s !important}.d1{animation-delay:.43s !important}.d2{animation-delay:.56s !important}.d3{animation-delay:.69s !important}
.d4{animation-delay:.82s !important}.d5{animation-delay:.95s !important}.d6{animation-delay:1.08s !important}.d7{animation-delay:1.21s !important}
.d8{animation-delay:1.34s !important}.d9{animation-delay:1.47s !important}.d10{animation-delay:1.60s !important}.d11{animation-delay:1.73s !important}
.lp-seat.lp-ask.a{animation-delay:2.4s !important}
@keyframes lp-seat{from{background:var(--bg);color:var(--text);border-color:var(--seat-free-bd);transform:scale(.8)}60%{transform:scale(1.08)}}
@keyframes lp-ask{0%,100%{outline-color:var(--focus);outline-offset:2px}50%{outline-color:transparent;outline-offset:6px}}
.lp-toast.a{animation:lp-pop .5s cubic-bezier(.3,1.4,.5,1) 2.5s both}
@keyframes lp-pop{from{opacity:0;transform:translateY(12px) scale(.96)}}

/* ---------- One seat, two students ---------- */
.lp-pair{width:100%;max-width:440px;padding:clamp(18px,3vw,26px);display:flex;flex-direction:column;gap:12px}
.lp-pair-no{font-family:var(--font-display);font-weight:var(--dw);letter-spacing:var(--track);font-size:clamp(26px,4vw,34px)}
.lp-half{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:16px;align-items:center;padding:16px 18px;border-radius:var(--r-btn)}
.lp-half span{grid-row:1 / 3;font-weight:700;font-size:17px}
.lp-half strong{font-size:22px}
.lp-half small{font-size:16px}
.lp-clash{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;padding:14px 18px;border:2px dashed var(--line);border-radius:var(--r-btn);font-weight:600;font-size:17px}
.lp-clash .badge{font-size:14px}
.lp-half-1.a{animation:lp-slide .6s cubic-bezier(.2,.8,.2,1) .2s both}
.lp-half-2.a{animation:lp-slide .6s cubic-bezier(.2,.8,.2,1) .7s both}
.lp-clash.a{animation:lp-pop .45s ease-out 1.3s both,lp-shake .5s ease-in-out 1.8s both}
@keyframes lp-slide{from{opacity:0;transform:translateX(-28px)}}
@keyframes lp-shake{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}

/* ---------- Pay link and the owner's row ---------- */
.lp-pay{flex-direction:column;align-items:center;gap:18px}
.lp-phone{width:100%;max-width:330px;padding:22px;display:flex;flex-direction:column;gap:8px;border-radius:calc(var(--r) + 10px)}
.lp-phone .label{font-size:15px}
.lp-phone-hi{font-size:22px}
.lp-phone-amt{font-family:var(--font-display);font-weight:var(--dw);font-size:clamp(40px,7vw,52px);line-height:1.1}
.lp-phone-btn{position:relative;overflow:hidden;margin-top:6px;min-height:52px;font-size:17px;pointer-events:none}
.lp-tap{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:currentColor;opacity:0}
.lp-tap.a{animation:lp-tap .7s ease-out .8s both}
@keyframes lp-tap{from{opacity:.45;transform:scale(.2)}to{opacity:0;transform:scale(5)}}
.lp-row{width:100%;max-width:440px;display:flex;align-items:center;gap:14px;padding:16px 18px;font-size:18px}
.lp-row-name{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}
.lp-row-name small{font-size:15px;color:var(--muted)}
.lp-flipbadge{display:grid;justify-items:end}
.lp-flipbadge > *{grid-area:1 / 1;font-size:14px}
.lp-b1{opacity:0}
.lp-b1.a{animation:lp-out .3s ease-in 1.6s both}
.lp-b2.a{animation:lp-pop .45s cubic-bezier(.3,1.4,.5,1) 1.75s both}
@keyframes lp-out{from{opacity:1}to{opacity:0;transform:scale(.8)}}

/* ---------- WhatsApp reminder ---------- */
.lp-chat{width:100%;max-width:440px;display:flex;flex-direction:column;gap:16px}
.lp-remind{pointer-events:none}
.lp-remind.a{animation:lp-press .35s ease-in-out .3s both}
@keyframes lp-press{50%{transform:scale(.92)}}
.lp-bubble{position:relative;align-self:flex-end;max-width:92%;min-height:64px;padding:16px 18px;border-radius:18px 18px 4px 18px;background:var(--good-bg);color:var(--on-good);font-size:18px;line-height:1.45}
.lp-dots{position:absolute;left:18px;top:24px;display:flex;gap:6px;opacity:0}
.lp-dots i{width:9px;height:9px;border-radius:50%;background:currentColor}
.lp-dots.a{animation:lp-dots 1.1s ease-in-out .6s both}
.lp-dots.a i{animation:lp-bob .5s ease-in-out .6s 2 both}
.lp-dots.a i:nth-child(2){animation-delay:.72s}
.lp-dots.a i:nth-child(3){animation-delay:.84s}
@keyframes lp-dots{0%{opacity:0}10%,85%{opacity:1}100%{opacity:0}}
@keyframes lp-bob{50%{transform:translateY(-6px)}}
.lp-msg.a{animation:lp-msg .5s ease-out 1.65s both}
@keyframes lp-msg{from{opacity:0;transform:translateY(8px)}}

/* ---------- Today numbers ---------- */
.lp-kpis{width:100%;max-width:480px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.lp-kpi{display:flex;flex-direction:column;justify-content:space-between;gap:10px;min-height:136px;padding:18px}
.lp-kpi span{font-size:17px;font-weight:600}
.lp-kpi strong{font-family:var(--font-display);font-weight:var(--dw);font-size:clamp(44px,7vw,60px);line-height:1}

/* ---------- Gate poster ---------- */
.lp-poster{width:100%;max-width:340px;background:#FFFFFF;color:#1E1E1C;border:1px solid var(--line);border-radius:6px;box-shadow:0 18px 40px rgba(30,30,28,.16);overflow:hidden}
.lp-poster-band{padding:22px;background:#233A73;color:#FFFFFF;font-family:'Bricolage Grotesque',var(--font-display);font-weight:800;font-size:clamp(26px,4vw,32px);line-height:1.1}
.lp-poster-body{display:flex;flex-direction:column;align-items:center;gap:12px;padding:24px;font-weight:700;font-size:16px}
.lp-qr{width:min(200px,60vw);aspect-ratio:1;background:repeating-conic-gradient(#1E1E1C 0 25%,#FFFFFF 0 50%) 0 0 / 25% 25%}
.js .lp-qr:has(svg){background:none}
.lp-qr svg{display:block;width:100%;height:100%}
.lp-poster.a{animation:lp-print 1.6s steps(12,end) .2s both}
@keyframes lp-print{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}

/* ---------- Steps (a real sequence, so numbered) ---------- */
.lp-steps{list-style:none;margin:clamp(28px,4vw,48px) 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:clamp(20px,3vw,36px)}
.lp-steps li{display:flex;flex-direction:column;gap:8px;padding-top:18px;border-top:3px solid var(--text)}
.lp-steps .num{font-family:var(--font-display);font-weight:var(--dw);font-size:clamp(40px,6vw,56px);line-height:1}
.lp-steps strong{font-size:clamp(21px,2.4vw,24px)}
.lp-steps li > span:last-child{font-size:18px}

/* ---------- Closing call ---------- */
.lp-last{border-top:0;padding-top:0}
.lp-end{display:flex;flex-direction:column;align-items:flex-start;gap:28px;padding:clamp(28px,6vw,72px)}
.lp-end .lp-h2{max-width:14em}

/* ---------- Footer ---------- */
.lp-foot{border-top:var(--divider);padding:28px 0 40px}
.lp-foot-in{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 24px;font-size:17px}
.lp-foot a{font-weight:700}
.lp-foot-brand{font-family:var(--font-display);font-weight:var(--dw);color:var(--muted)}

/* Wait for the section to be on screen before playing its animation */
.js [data-demo]:not(.is-in) .a,.js [data-demo]:not(.is-in) .a i{animation-play-state:paused}