/* ===========================================================
   landing.css — the public landing page of a demo deployment
   (js/landing.js) and the sign-in page's demo additions (Back link,
   legal links). Loaded right after ui.css.

   v2 tokens only (styles.css): neutrals, --brand-* and --grad (runtime brand),
   --viz-primary-dark for brand marks on navy, --focus, --fh/--fb, radii,
   shadows. The dark bands use the sidebar navy (#0B1120 / #0F172A), the
   same surface as the sign-in brand panel. One loud element: the
   "Try Demo as Admin" button (the brand gradient).

   The demo countdown banner (js/demo-ui.js) sits above everything:
   sticky elements here start at var(--demo-banner-h, 0px).
   =========================================================== */

/* The app shell never scrolls the document (styles.css: html,body{overflow:hidden}); the landing page is a normal,
   document-scrolling page, so it lifts that while it is shown (js/landing.js sets html.is-landing). */
@media screen{
  html.is-landing{overflow-x:hidden; overflow-y:auto}
  html.is-landing body{overflow:visible; height:auto; min-height:100%}
}

.lp{
  --lp-navy:#0B1120; --lp-navy-2:#111A2E; --lp-bezel:#151E31; --lp-bezel-line:#27324A;
  --lp-on-dark:#E2E8F0; --lp-on-dark-2:#CBD5E1; --lp-on-dark-3:#94A3B8;
  --lp-overlap:clamp(56px,12vw,200px);
  --lp-gutter:24px; --lp-header-h:65px;
  display:block; min-height:100vh; background:var(--card); color:var(--ink); font:var(--t-body);
  overflow-x:clip;
}
.lp *{min-width:0}
.lp-wrap{width:100%; max-width:1200px; margin-inline:auto; padding-inline:var(--lp-gutter)}
.lp-top{position:absolute; top:0; left:0; width:1px; height:1px}
.lp [id^="landing-"]{scroll-margin-top:calc(var(--demo-banner-h, 0px) + 80px)}
.lp a{text-decoration:none}
.lp a:hover{text-decoration:none}
.lp a:focus-visible,.lp button:focus-visible{outline:2px solid var(--focus); outline-offset:2px}
.lp [data-surface="dark"] a:focus-visible,.lp [data-surface="dark"] button:focus-visible,
.lp-header a:focus-visible,.lp-header button:focus-visible{outline-color:var(--viz-primary-dark)}
.lp [tabindex="-1"]:focus{outline:none}
.lp .sr-only{position:absolute!important}
.lp-nowrap{white-space:nowrap}

/* ---------- Header (sticky, navy glass) ---------- */
.lp-header{position:sticky; top:var(--demo-banner-h, 0px); z-index:var(--z-topbar); margin-bottom:calc(-1 * var(--lp-header-h)); color:var(--lp-on-dark);
  background:rgba(11,17,32,.96); border-bottom:1px solid rgba(255,255,255,.08)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .lp-header{background:rgba(11,17,32,.9); -webkit-backdrop-filter:saturate(160%) blur(16px); backdrop-filter:saturate(160%) blur(16px)}
}
.lp-header-in{display:flex; align-items:center; gap:24px; height:calc(var(--lp-header-h) - 1px)}
.lp-home{display:inline-flex; align-items:center; color:inherit; border-radius:10px; flex:0 1 auto; overflow:hidden}
.lp-lockup{display:inline-flex; align-items:center; gap:10px; overflow:hidden}
.lp-mark{display:inline-flex; flex:none; line-height:0}
.lp-mark .brand-logo{width:32px; height:32px; border-radius:9px}
.lp-lockup-text{display:flex; flex-direction:column; line-height:1.2; overflow:hidden}
.lp-lockup-name{font:700 15px/19px var(--fh); letter-spacing:-.01em; color:#FFFFFF; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.lp-lockup-suffix{font:500 11.5px/15px var(--fb); color:var(--lp-on-dark-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.lp-nav{display:flex; align-items:center; gap:2px; flex:none}
.lp-nav a{display:inline-flex; align-items:center; min-height:36px; padding:0 12px; border-radius:8px; color:var(--lp-on-dark-2); font:500 14px/20px var(--fb); transition:color var(--dur-1),background-color var(--dur-1)}
.lp-nav a:hover{color:#FFFFFF; background:rgba(255,255,255,.06)}
.lp-header-actions{display:flex; align-items:center; gap:8px; margin-left:auto; flex:none}
.lp-signin{display:inline-flex; align-items:center; gap:8px; min-height:36px; padding:0 12px; border-radius:8px; color:var(--lp-on-dark); font:600 14px/20px var(--fb); transition:background-color var(--dur-1),color var(--dur-1)}
.lp-signin:hover{background:rgba(255,255,255,.08); color:#FFFFFF}
.lp-header .lp-cta-sm{display:none}
.lp-header.is-past-hero .lp-cta-sm{display:inline-flex; animation:lpFade var(--dur-2) var(--ease-out)}
@keyframes lpFade{from{opacity:0}to{opacity:1}}

/* ---------- Buttons ---------- */
.lp .lp-cta{gap:10px; border:0; text-decoration:none}
.lp .lp-cta-lg{min-height:52px; padding:0 22px 0 24px; border-radius:12px; font:600 16px/22px var(--fb);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .18),0 0 0 1px rgb(var(--brand-rgb) / .55),0 12px 32px -10px rgb(var(--brand-rgb) / .7)}
.lp .lp-cta-sm{min-height:36px; padding:0 14px; border-radius:9px; font:600 13.5px/20px var(--fb);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .16),0 0 0 1px rgb(var(--brand-rgb) / .5)}
.lp .lp-cta .lp-cta-ico{transition:transform var(--dur-2) var(--ease-out)}
.lp .lp-cta:hover:not(:disabled) .lp-cta-ico[data-ico="arrow-right"],.lp .lp-cta:hover:not(:disabled) .lp-cta-ico:not([data-ico]){transform:translateX(3px)}
.lp .lp-cta:disabled{opacity:1; cursor:progress; filter:saturate(.85) brightness(.96)}
.lp-spin{animation:lpSpin .9s linear infinite}
@keyframes lpSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.lp-spin{animation:none}}
.lp-ghost{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:52px; padding:0 20px; border-radius:12px;
  border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.03); color:var(--lp-on-dark); font:600 15px/22px var(--fb);
  transition:background-color var(--dur-1),border-color var(--dur-1)}
.lp-ghost:hover{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.28); color:#FFFFFF}
.lp-cta-row{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px; margin-top:36px}

/* ---------- Hero (navy band; the screenshot straddles into the next section) ---------- */
.lp-hero{position:relative; z-index:1; display:flow-root; background:var(--lp-navy); color:var(--lp-on-dark); padding-top:calc(var(--lp-header-h) + clamp(40px,5.5vw,88px))}
.lp-hero-bg{position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none}
.lp-hero-bg::before{content:""; position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:40px 40px; background-position:center -1px;
  -webkit-mask-image:radial-gradient(ellipse 75% 70% at 50% 0%,#000 30%,transparent 100%); mask-image:radial-gradient(ellipse 75% 70% at 50% 0%,#000 30%,transparent 100%)}
.lp-hero-bg::after{content:""; position:absolute; left:50%; top:-360px; width:1200px; height:820px; transform:translateX(-50%);
  background:radial-gradient(closest-side,rgb(var(--brand-rgb) / .42),rgb(var(--brand-rgb) / .12) 58%,transparent 100%)}
.lp-hero-in{display:flex; flex-direction:column; align-items:center; text-align:center}
.lp-eyebrow{display:inline-flex; align-items:center; gap:10px; padding:6px 14px 6px 10px; margin-bottom:28px; border-radius:var(--radius-pill);
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.05); color:var(--lp-on-dark-2); font:500 13px/18px var(--fb)}
.lp-live{flex:none; width:8px; height:8px; border-radius:50%; background:#4ADE80; box-shadow:0 0 0 4px rgba(74,222,128,.16)}
.lp-title{font-family:var(--fh); color:#FFFFFF; text-wrap:balance}
.lp-title-a{display:block; font-weight:800; font-size:clamp(36px,5.2vw + 14px,78px); line-height:1.02; letter-spacing:-.042em}
.lp-title-b{display:block; margin-top:.18em; font-weight:650; font-size:clamp(21px,3vw + 9px,46px); line-height:1.12; letter-spacing:-.03em; color:var(--viz-primary-dark)}
.lp-lead{max-width:640px; margin-top:26px; color:var(--lp-on-dark-2); font:400 clamp(17px,.5vw + 15px,20px)/1.6 var(--fb); text-wrap:balance}
.lp-hero-meta{display:flex; flex-wrap:wrap; justify-content:center; gap:8px 24px; margin-top:24px; color:var(--lp-on-dark-3); font:500 13.5px/20px var(--fb)}
.lp-hero-meta li{display:inline-flex; align-items:center; gap:8px}
.lp-hero-meta .i{flex:none; color:var(--viz-primary-dark)}
.lp-hero-shot-wrap{margin-top:clamp(40px,5vw,72px)}
.lp-hero-shot{max-width:1200px; margin:0 auto calc(-1 * var(--lp-overlap))}
.lp-frame-dark{padding:clamp(4px,.6vw,8px); border-radius:clamp(12px,1.4vw,18px); background:var(--lp-bezel); border:1px solid var(--lp-bezel-line);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 40px 90px -40px rgba(2,6,23,.55),0 12px 32px -20px rgba(15,23,42,.35)}
.lp-frame-dark .lp-shot-img{display:block; width:100%; height:auto; border-radius:clamp(8px,1vw,11px); background:var(--bg)}
.lp-error{display:flex; align-items:flex-start; gap:8px; max-width:560px; margin-top:18px; padding:10px 14px; border-radius:10px; text-align:left;
  background:rgba(248,113,113,.12); border:1px solid rgba(248,113,113,.4); color:#FECACA; font:500 14px/20px var(--fb)}
.lp-error .i{flex:none; margin-top:2px; color:#FCA5A5}

/* ---------- Section heads ---------- */
.lp-section-head{max-width:740px; margin:0 auto clamp(48px,6vw,80px); text-align:center}
.lp-section-kicker{margin-bottom:12px; color:var(--brand-text); font:600 14px/20px var(--fb)}
.lp-h2{font:750 clamp(29px,2.6vw + 10px,46px)/1.1 var(--fh); letter-spacing:-.032em; color:var(--ink); text-wrap:balance}
.lp-section-sub{margin-top:16px; color:var(--muted); font:400 clamp(16px,.3vw + 15px,18px)/1.65 var(--fb); text-wrap:pretty}

/* ---------- Features: spotlights ---------- */
.lp-features{position:relative; z-index:0; background:var(--card); padding:calc(var(--lp-overlap) + clamp(64px,8vw,120px)) 0 clamp(72px,9vw,128px)}
.lp-spots{display:flex; flex-direction:column; gap:clamp(72px,9vw,128px)}
.lp-spot{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); align-items:center; gap:clamp(32px,5vw,72px)}
.lp-spot.is-flip{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.lp-spot.is-flip .lp-spot-text{order:2}
.lp-kicker{display:inline-flex; align-items:center; gap:8px; margin-bottom:14px; color:var(--brand-text); font:600 14px/20px var(--fb)}
.lp-spot-title{font:700 clamp(24px,1.2vw + 15px,32px)/1.18 var(--fh); letter-spacing:-.026em; color:var(--ink); text-wrap:balance}
.lp-spot-body{margin-top:16px; color:var(--muted); font:400 16.5px/1.65 var(--fb)}
.lp-points{display:grid; gap:12px; margin-top:22px}
.lp-points li{display:flex; align-items:flex-start; gap:12px; color:var(--ink-2); font:500 15px/22px var(--fb)}
.lp-points .i{flex:none; margin-top:3px; color:var(--brand-text)}
.lp-try{display:flex; align-items:baseline; gap:10px; margin-top:24px; padding:12px 14px; border-radius:10px; background:var(--card-2); border:1px solid var(--line); color:var(--ink-2); font:400 14px/20px var(--fb)}
.lp-try-k{flex:none; padding:2px 8px; border-radius:var(--radius-pill); background:var(--brand-soft); color:var(--brand-text); font:600 12px/16px var(--fb)}
/* the screenshot "peeks" out of a tinted panel and bleeds off its far edge */
.lp-spot-media{position:relative; padding:clamp(18px,2.4vw,32px) 0 0 clamp(18px,2.4vw,32px); border-radius:20px; background:var(--bg); border:1px solid var(--line); overflow:hidden}
.lp-spot-media .lp-frame{border:1px solid var(--line-2); border-right:0; border-bottom:0; border-radius:12px 0 0 0; background:var(--card); overflow:hidden;
  box-shadow:0 1px 2px rgba(15,23,42,.05),0 24px 60px -28px rgba(15,23,42,.35)}
.lp-spot-media .lp-shot-img{display:block; width:112%; max-width:none; height:auto}

/* ---------- Features: card grid ---------- */
.lp-cards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:clamp(72px,9vw,128px)}
.lp-card{display:flex; flex-direction:column; border:1px solid var(--line); border-radius:18px; background:var(--card); overflow:hidden;
  transition:border-color var(--dur-2),box-shadow var(--dur-2)}
.lp-card:hover{border-color:var(--line-2); box-shadow:var(--shadow-md)}
.lp-card-text{padding:24px}
.lp-chip{display:inline-grid; place-items:center; width:40px; height:40px; border-radius:11px; background:var(--brand-soft); color:var(--brand-text); border:1px solid var(--brand-line)}
.lp-chip-quiet{background:var(--card-2); color:var(--ink-2); border-color:var(--line)}
.lp-card-title{margin-top:18px; font:650 18px/26px var(--fh); letter-spacing:-.015em; color:var(--ink)}
.lp-card-body{margin-top:8px; color:var(--muted); font:400 14.5px/22px var(--fb)}
.lp-card-try{display:flex; align-items:baseline; gap:8px; margin-top:14px; color:var(--ink-2); font:400 13px/18px var(--fb)}
.lp-card-shot{position:relative; flex:none; aspect-ratio:16/10; margin:auto 0 0 24px; border:1px solid var(--line-2); border-right:0; border-bottom:0;
  border-radius:12px 0 0 0; background:var(--bg); overflow:hidden}
.lp-card-shot .lp-shot-img{display:block; width:122%; max-width:none; height:auto}

/* ---------- How the demo works ---------- */
.lp-how{background:var(--bg); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:clamp(72px,9vw,120px) 0}
.lp-steps{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px; padding:0; margin:0; list-style:none}
.lp-step{display:flex; flex-direction:column; padding:22px 20px 24px; border-radius:16px; background:var(--card); border:1px solid var(--line)}
.lp-step-top{display:flex; align-items:center; justify-content:space-between}
.lp-step-n{font:600 13px/16px var(--fh); letter-spacing:.02em; color:var(--faint)}
.lp-step-title{margin-top:18px; font:650 16px/22px var(--fh); letter-spacing:-.01em; color:var(--ink)}
.lp-step-body{margin-top:8px; color:var(--muted); font:400 14px/21px var(--fb)}
.lp-how-note{display:flex; align-items:flex-start; justify-content:center; gap:10px; max-width:780px; margin:32px auto 0; color:var(--muted); font:400 14px/21px var(--fb)}
.lp-how-note .i{flex:none; margin-top:3px; color:var(--ink-2)}

/* ---------- Final call to action (navy band) ---------- */
.lp-final{position:relative; isolation:isolate; overflow:hidden; background:var(--lp-navy); color:var(--lp-on-dark); padding:clamp(72px,9vw,120px) 0; text-align:center}
.lp-final::before{content:""; position:absolute; inset:0; z-index:-1;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size:40px 40px;
  -webkit-mask-image:radial-gradient(ellipse 60% 80% at 50% 100%,#000 25%,transparent 100%); mask-image:radial-gradient(ellipse 60% 80% at 50% 100%,#000 25%,transparent 100%)}
.lp-final::after{content:""; position:absolute; z-index:-1; left:50%; bottom:-420px; width:1100px; height:760px; transform:translateX(-50%);
  background:radial-gradient(closest-side,rgb(var(--brand-rgb) / .38),rgb(var(--brand-rgb) / .1) 60%,transparent 100%)}
.lp-final-in{display:flex; flex-direction:column; align-items:center}
.lp-final-title{max-width:820px; color:#FFFFFF}
.lp-final-sub{max-width:580px; margin-top:16px; color:var(--lp-on-dark-2); font:400 clamp(16px,.3vw + 15px,18px)/1.6 var(--fb)}
.lp-final-note{display:inline-flex; align-items:center; gap:8px; margin-top:22px; color:var(--lp-on-dark-3); font:500 13.5px/20px var(--fb)}
.lp-final-note .i{flex:none; color:var(--viz-primary-dark)}

/* ---------- Footer ---------- */
.lp-footer{background:var(--card); padding:44px 0 36px; color:var(--muted)}
.lp-footer-in{display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:24px 40px}
.lp-footer-side{display:flex; flex-direction:column; align-items:flex-end; gap:10px}
.lp-footer .lp-lockup-name{color:var(--ink)}
.lp-footer .lp-lockup-suffix{color:var(--muted)}
.lp-footer-copy{margin-top:12px; font:400 13px/20px var(--fb)}
.lp-footer-nav{display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px}
.lp-footer-nav a{display:inline-flex; align-items:center; min-height:32px; padding:0 8px; border-radius:6px; color:var(--ink-2); font:500 14px/20px var(--fb); transition:color var(--dur-1),background-color var(--dur-1)}
.lp-footer-nav a:hover{color:var(--brand-text); background:var(--hover)}
.lp-footer-cookies{display:inline-flex; align-items:center; gap:8px; padding-right:8px; color:var(--muted); font:500 13px/20px var(--fb)}
.lp-footer-cookies .i{flex:none; color:var(--ink-2)}
.lp-footer-fine{margin-top:28px}
.lp-footer-fine-in{display:grid; gap:6px; padding-top:20px; border-top:1px solid var(--line); color:var(--faint); font:400 12.5px/19px var(--fb)}

/* ---------- Sign-in page additions (index.html #gate; spec §7.15 keeps the rest) ---------- */
.gate-main{position:relative}
.gate-back{display:inline-flex; align-items:center; gap:8px; min-height:36px; padding:0 12px 0 10px; border-radius:8px; color:var(--ink-2); font:600 13.5px/20px var(--fb); text-decoration:none}
.gate-back:hover{background:var(--hover); color:var(--ink); text-decoration:none}
.gate-back:focus-visible,.gate-legal a:focus-visible{outline:2px solid var(--focus); outline-offset:2px}
@media (min-width:1024px){ .gate-back{position:absolute; top:24px; left:24px} }
@media (max-width:1023px){
  .gate-back{align-self:center; width:min(100%,420px); margin-bottom:-12px}
}
.gate-legal{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:4px 8px; margin-top:-16px; color:var(--line-3); font:500 12.5px/18px var(--fb)}
.gate-legal a{display:inline-flex; align-items:center; min-height:24px; color:var(--muted)}
.gate-legal a:hover{color:var(--brand-text); text-decoration:underline; text-underline-offset:3px}
.gate-legal-note{flex-basis:100%; text-align:center; color:var(--faint)}

/* ---------- Responsive (spec §2.1.8 breakpoints) ---------- */
/* laptop screens (1366 × 768, 1536 × 864): keep the product shot peeking above the fold */
@media (min-width:1024px) and (max-height:880px){
  .lp-hero{padding-top:calc(var(--lp-header-h) + 40px)}
  .lp-eyebrow{margin-bottom:22px}
  .lp-lead{margin-top:20px}
  .lp-cta-row{margin-top:28px}
  .lp-hero-meta{margin-top:18px}
  .lp-hero-shot-wrap{margin-top:44px}
}
@media (max-width:1180px){
  .lp-steps{grid-template-columns:repeat(6,minmax(0,1fr))}
  .lp-step:nth-child(-n+3){grid-column:span 2}
  .lp-step:nth-child(n+4){grid-column:span 3}
}
@media (max-width:1023px){
  .lp{--lp-gutter:20px}
  .lp-nav{display:none}
  .lp-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .lp-spot,.lp-spot.is-flip{grid-template-columns:minmax(0,1fr)}
  .lp-spot.is-flip .lp-spot-text{order:0}
  .lp-spot-text{max-width:640px}
}
@media (max-width:767px){
  .lp{--lp-gutter:16px}
  .lp{--lp-header-h:61px}
  .lp-header-in{gap:12px}
  .lp-header.is-past-hero .lp-cta-sm{display:none}
  .lp-signin{padding:0 10px}
  .lp-cta-row{flex-direction:column; align-items:stretch; width:100%; max-width:420px}
  .lp .lp-cta-lg,.lp-ghost{width:100%; justify-content:center; min-height:52px}
  .lp-hero-meta{flex-direction:column; align-items:center; gap:8px}
  .lp-hero-meta li{display:block; max-width:340px}
  .lp-hero-meta .i{display:inline-block; margin-right:6px; vertical-align:-3px}
  /* phones: show the top-left of the command centre at a readable scale instead of the whole window */
  .lp-frame-dark{aspect-ratio:4/3.1; overflow:hidden}
  .lp-frame-dark .lp-shot-img{width:190%; max-width:none; border-radius:8px 0 0 0}
  .lp-cards{grid-template-columns:minmax(0,1fr)}
  .lp-steps{grid-template-columns:minmax(0,1fr)}
  .lp-step:nth-child(n){grid-column:auto}
  .lp-footer-side{align-items:flex-start}
  .lp-footer-nav{margin-left:-8px}
  .lp-error{max-width:none; width:100%}
}
@media (max-width:480px){
  .lp-eyebrow{font-size:12.5px}
  .lp-card-text{padding:20px}
  .lp-card-shot{margin-left:20px}
  .lp-step{padding:20px 18px 22px}
}