/* Zirva website. Uses the product tokens and components; everything site-only is prefixed lp-. */
html{scroll-behavior:smooth}
body{height:auto;background:var(--color-canvas)}
*{scrollbar-width:none;-ms-overflow-style:none}*::-webkit-scrollbar{display:none;width:0;height:0}
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out 160ms var(--ease-out) both}
::view-transition-new(root){animation:vt-in 260ms var(--ease-out) both}

.lp-wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 24px}
.lp-sec{padding:112px 0 0;scroll-margin-top:72px}
.lp-sec:last-of-type{padding-bottom:112px}
.lp-eyebrow{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:0 12px;border-radius:999px;background:var(--color-surface);box-shadow:inset 0 0 0 1px var(--color-border);font:var(--type-label-md);color:var(--color-text)}
.lp-eyebrow i{width:8px;height:8px;border-radius:50%;background:var(--color-accent);box-shadow:0 0 0 3px var(--color-accent-tint)}
.lp-h2{font:600 44px/50px var(--font-family-display);letter-spacing:-.03em;max-width:18ch;margin-top:18px}
.lp-lead{font:400 19px/29px var(--font-family-ui);color:var(--color-text-secondary);max-width:52ch;margin-top:16px}
.lp-small{font:var(--type-body-sm);color:var(--color-text-secondary)}
a{color:inherit}

/* header */
.lp-head{position:sticky;top:0;z-index:40;background:rgba(246,243,236,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:box-shadow 200ms ease}
.lp-head.scrolled{box-shadow:0 1px 0 var(--color-border)}
.lp-head .lp-wrap{display:flex;align-items:center;gap:24px;min-height:68px}
.lp-logo{display:inline-flex;align-items:center;gap:10px;font:600 20px/1 var(--font-family-display);text-decoration:none;color:var(--color-text)}
.lp-logo svg{width:34px;height:23px}
.lp-links{display:flex;align-items:center;gap:4px;margin-left:auto}
.lp-links a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:999px;font:var(--type-label-md);color:var(--color-text-secondary);text-decoration:none;transition:background-color 150ms ease,color 150ms ease}
.lp-links a:hover,.lp-links a[aria-current="page"]{background:var(--color-surface-sunken);color:var(--color-text)}
.lp-head .btn{flex:none}
.lp-menu{display:none;margin-left:auto;width:44px;height:44px;border:0;border-radius:12px;background:var(--color-surface-sunken);place-items:center;font-size:22px}
@media (max-width:899px){
  .lp-links{display:none;position:absolute;left:0;right:0;top:68px;flex-direction:column;align-items:stretch;gap:2px;padding:10px 16px 16px;background:var(--color-canvas);box-shadow:0 12px 24px rgba(22,27,38,.08)}
  .lp-links.open{display:flex;animation:rise2 220ms var(--ease-out) both}
  .lp-links a{min-height:52px;font-size:16px}
  .lp-menu{display:grid}
  .lp-head .btn{display:none}
  .lp-links .btn{display:inline-flex;margin-top:8px}
}
@media (min-width:900px){.lp-links .btn{display:none}}

/* hero */
.lp-hero{padding:56px 0 0;overflow:hidden}
.lp-hero-in{display:grid;gap:48px;align-items:center}
@media (min-width:980px){.lp-hero-in{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}}
.lp-hero h1{font:600 76px/78px var(--font-family-display);letter-spacing:-.045em;margin-top:22px}
.lp-hero h1 span{display:block}
.lp-hero h1 span:nth-child(2){color:var(--group-cobalt)}
.lp-hero .lp-lead{font-size:20px;line-height:30px}
.lp-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.lp-cta+.lp-small{margin-top:14px}
@media (max-width:640px){.lp-hero h1{font-size:50px;line-height:54px}.lp-h2{font-size:34px;line-height:40px}.lp-cta .btn{flex:1}}
.lp-in>*{animation:rise2 520ms var(--ease-out) both}
.lp-in>*:nth-child(2){animation-delay:80ms}.lp-in>*:nth-child(3){animation-delay:160ms}.lp-in>*:nth-child(4){animation-delay:240ms}.lp-in>*:nth-child(5){animation-delay:320ms}

/* device stage */
.lp-stage{position:relative;min-height:560px}
.lp-desk{position:absolute;right:-60px;top:30px;width:640px;border-radius:18px;overflow:hidden;background:var(--color-surface);box-shadow:inset 0 0 0 1px var(--color-border),0 30px 60px rgba(22,27,38,.12);animation:deskin 900ms var(--ease-out) 200ms both}
.lp-desk img{display:block;width:100%}
@keyframes deskin{from{opacity:0;transform:translateX(40px)}}
.lp-phone{position:absolute;left:0;top:0;width:258px;height:546px;padding:8px;border-radius:44px;background:var(--color-text);box-shadow:0 40px 70px rgba(22,27,38,.28);animation:phonein 900ms var(--ease-spring) 350ms both}
.lp-phone .scr{position:relative;width:100%;height:100%;border-radius:36px;overflow:hidden;background:var(--color-canvas)}
.lp-phone iframe,.lp-phone img{position:absolute;left:0;top:0;width:390px;height:844px;border:0;transform-origin:0 0;transform:scale(.6205)}
.lp-phone img{width:390px;height:auto}
@keyframes phonein{from{opacity:0;transform:translateY(40px) rotate(-3deg)}}
.lp-float{position:absolute;z-index:3;display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:18px;background:var(--color-surface);box-shadow:inset 0 0 0 1.5px var(--color-border-strong),inset 0 -4px 0 var(--color-surface-sunken),0 16px 30px rgba(22,27,38,.1);font:var(--type-label-lg);animation:pop 520ms var(--ease-spring) both}
.lp-float.f1{left:220px;top:70px;animation-delay:1300ms}
.lp-float.f2{right:30px;bottom:96px;animation-delay:1500ms}
.lp-float.f3{left:200px;bottom:30px;animation-delay:1700ms}
.lp-float .num{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--color-success);color:#fff;font:600 18px/1 var(--font-family-display);box-shadow:inset 0 -3px 0 rgba(0,0,0,.2);padding-bottom:3px}
.lp-float small{display:block;font:var(--type-caption);color:var(--color-text-secondary)}
@media (max-width:979px){.lp-stage{min-height:600px;max-width:560px;margin:0 auto;width:100%}.lp-desk{right:-120px;width:520px;top:60px}}
@media (max-width:560px){.lp-stage{min-height:580px}.lp-desk{display:none}.lp-phone{left:50%;margin-left:-129px}.lp-float.f1{left:auto;right:0;top:40px}.lp-float.f2{right:auto;left:0;bottom:120px}.lp-float.f3{left:auto;right:0;bottom:20px}}

/* before / after */
.lp-vs{display:grid;gap:12px;margin-top:40px}
.lp-vs-row{display:grid;grid-template-columns:minmax(0,1fr) 40px minmax(0,1fr);align-items:center;gap:12px}
.lp-vs-row>div{display:flex;align-items:center;gap:12px;min-height:72px;padding:14px 18px;border-radius:18px;font:var(--type-body-md)}
.lp-old{color:var(--color-text-secondary);background:transparent;box-shadow:inset 0 0 0 1.5px var(--color-border)}
.lp-old i{font-size:22px;color:var(--color-text-tertiary)}
.lp-new{background:var(--color-surface);box-shadow:inset 0 0 0 1.5px var(--color-border-strong),inset 0 -4px 0 var(--color-surface-sunken);font-weight:500}
.lp-new i{font-size:22px;color:var(--color-success)}
.lp-vs-row>.arr{display:grid;place-items:center;font-size:22px;color:var(--color-text-tertiary);min-height:0;padding:0}
@media (max-width:700px){.lp-vs-row{grid-template-columns:1fr}.lp-vs-row>.arr{transform:rotate(90deg);height:24px}}

/* steps with a road */
.lp-steps{position:relative;margin-top:48px;display:grid;gap:28px}
.lp-step{position:relative;display:grid;grid-template-columns:64px minmax(0,1fr);gap:24px}
@media (min-width:900px){.lp-step{grid-template-columns:64px minmax(0,1fr) minmax(0,1.1fr);align-items:center;gap:32px}}
.lp-node{position:relative;z-index:1;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--color-success);color:#fff;font:600 24px/1 var(--font-family-display);box-shadow:inset 0 -6px 0 rgba(0,0,0,.2);padding-bottom:6px;align-self:start}
.lp-step h3{font:600 28px/34px var(--font-family-display);letter-spacing:-.02em}
.lp-step p{font:var(--type-body-lg);color:var(--color-text-secondary);margin-top:8px;max-width:40ch}
.lp-road{position:absolute;left:29px;top:32px;bottom:32px;width:6px;border-radius:3px;background:var(--color-border);overflow:hidden}
.lp-road i{position:absolute;inset:0;background:var(--color-success);transform-origin:top;transform:scaleY(0);transition:transform 1400ms var(--ease-out)}
.lp-steps.in .lp-road i{transform:none}
.lp-demo{grid-column:2;padding:22px;border-radius:24px;background:var(--color-surface);box-shadow:inset 0 0 0 1px var(--color-border)}
@media (min-width:900px){.lp-demo{grid-column:auto}}

/* try a question */
.lp-try .ans{width:100%}
.lp-try .answers{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.lp-try h4{font:600 20px/26px var(--font-family-ui)}
.lp-fb{display:none;align-items:center;gap:10px;margin-top:14px;padding:12px 14px;border-radius:14px;font:var(--type-label-lg)}
.lp-fb.ok{display:flex;background:var(--color-success-tint);color:var(--color-success);animation:rise2 300ms var(--ease-out) both}
.lp-fb.no{display:flex;background:var(--color-danger-tint);color:var(--color-danger);animation:rise2 300ms var(--ease-out) both}
.lp-try .ans.bad{box-shadow:inset 0 0 0 2px var(--color-danger),inset 0 -4px 0 var(--color-danger-tint);color:var(--color-danger)}
.lp-try .ans.bad .k{background:var(--color-danger);color:#fff}

/* split sections */
.lp-split{display:grid;gap:48px;align-items:center;margin-top:8px}
@media (min-width:980px){.lp-split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.lp-split.rev>:first-child{order:2}}
.lp-points{display:grid;gap:12px;margin-top:28px}
.lp-point{display:flex;gap:14px;align-items:flex-start}
.lp-point .ic{width:44px;height:44px;border-radius:14px;flex:none;display:grid;place-items:center;font-size:22px;color:#fff;box-shadow:inset 0 -3px 0 rgba(0,0,0,.18);padding-bottom:3px}
.lp-point b{display:block;font:var(--type-label-lg);margin-top:2px}
.lp-point span{font:var(--type-body-md);color:var(--color-text-secondary)}
.lp-media{position:relative;display:grid;place-items:center;min-height:540px;padding:24px;border-radius:32px;background:var(--color-surface-sunken)}
.lp-media .lp-phone{position:relative;left:auto;top:auto;animation:none}
.lp-shot{width:100%;border-radius:18px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--color-border),0 24px 50px rgba(22,27,38,.12);background:var(--color-surface)}
.lp-shot img{display:block;width:100%}

/* feature grid */
.lp-grid{display:grid;gap:14px;margin-top:40px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.lp-card{padding:22px;border-radius:22px;background:var(--color-surface);box-shadow:inset 0 0 0 1px var(--color-border);transition:transform 160ms var(--ease-out)}
.lp-card:hover{transform:translateY(-3px)}
.lp-card .ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;font-size:24px;color:#fff;box-shadow:inset 0 -4px 0 rgba(0,0,0,.18);padding-bottom:4px}
.lp-card h3{font:600 19px/25px var(--font-family-ui);margin-top:18px}
.lp-card p{font:var(--type-body-md);color:var(--color-text-secondary);margin-top:6px}

/* school teaser */
.lp-band{display:grid;gap:32px;align-items:center;padding:40px;border-radius:32px;background:var(--color-text);color:var(--color-text-inverse);overflow:hidden}
@media (min-width:980px){.lp-band{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);padding:56px}}
.lp-band .lp-h2{color:#fff;margin-top:0}
.lp-band .lp-lead{color:rgba(255,255,255,.72)}
.lp-band .btn-primary{background:#fff;color:var(--color-text);box-shadow:inset 0 -4px 0 rgba(0,0,0,.18)}
.lp-band .lp-shot{transform:rotate(1.5deg)}

/* principles */
.lp-rules{display:grid;gap:14px;margin-top:40px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.lp-rule{padding:24px;border-radius:22px;background:var(--color-surface);box-shadow:inset 0 0 0 1.5px var(--color-border-strong),inset 0 -5px 0 var(--color-surface-sunken)}
.lp-rule b{display:block;font:600 22px/28px var(--font-family-display);letter-spacing:-.02em}
.lp-rule p{font:var(--type-body-md);color:var(--color-text-secondary);margin-top:8px}

/* faq */
.lp-faq{margin-top:36px;display:grid;gap:10px;max-width:820px}
.lp-faq details{border-radius:18px;background:var(--color-surface);box-shadow:inset 0 0 0 1px var(--color-border)}
.lp-faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:0 20px;font:var(--type-label-lg);cursor:pointer;list-style:none}
.lp-faq summary::-webkit-details-marker{display:none}
.lp-faq summary i{font-size:20px;transition:transform 200ms var(--ease-out);flex:none}
.lp-faq details[open] summary i{transform:rotate(45deg)}
.lp-faq details p{padding:0 20px 20px;font:var(--type-body-md);color:var(--color-text-secondary);animation:rise2 260ms var(--ease-out) both}

/* final cta */
.lp-final{position:relative;padding:64px 32px;border-radius:36px;background:var(--group-cobalt);color:#fff;text-align:center;overflow:hidden}
.lp-final h2{font:600 52px/56px var(--font-family-display);letter-spacing:-.03em}
.lp-final p{font:var(--type-body-lg);opacity:.85;margin-top:12px}
.lp-join{display:flex;gap:8px;max-width:520px;margin:28px auto 0;padding:6px;border-radius:999px;background:#fff}
.lp-join input{flex:1;min-width:0;min-height:52px;padding:0 18px;border:0;background:none;font:var(--type-body-lg);color:var(--color-text);outline:none;border-radius:999px}
.lp-join .btn{border-radius:999px}
.lp-final .mark{position:absolute;width:280px;height:190px;color:rgba(255,255,255,.08);right:-40px;bottom:-40px}
@media (max-width:640px){.lp-final h2{font-size:36px;line-height:40px}.lp-join{flex-direction:column;border-radius:24px}.lp-join .btn{border-radius:18px}}

/* footer */
.lp-foot{padding:48px 0 56px;margin-top:80px;box-shadow:0 -1px 0 var(--color-border)}
.lp-foot .lp-wrap{display:flex;flex-wrap:wrap;align-items:center;gap:24px;justify-content:space-between}
.lp-foot nav{display:flex;flex-wrap:wrap;gap:4px}
.lp-foot nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;font:var(--type-label-md);color:var(--color-text-secondary);text-decoration:none}

/* reveal on scroll: product animations wait until the section is seen */
.lp-reveal{opacity:0;transform:translateY(18px);transition:opacity 600ms var(--ease-out),transform 600ms var(--ease-out)}
.lp-reveal.in{opacity:1;transform:none}
.lp-reveal *{animation-play-state:paused}
.lp-reveal.in *{animation-play-state:running}

/* tabs (schools) */
.lp-tabs{display:inline-flex;flex-wrap:wrap;gap:4px;margin-top:32px;padding:4px;border-radius:999px;background:var(--color-surface-sunken)}
.lp-tabs button{min-height:44px;padding:0 18px;border:0;border-radius:999px;background:none;font:var(--type-label-md);color:var(--color-text-secondary);cursor:pointer}
.lp-tabs button[aria-selected="true"]{background:var(--color-surface);color:var(--color-text);box-shadow:var(--elevation-e1)}
.lp-panel[hidden]{display:none}
.lp-panel{animation:rise2 320ms var(--ease-out) both}

/* page hero (subpages) */
.lp-phero{padding:72px 0 0}
.lp-phero h1{font:600 60px/64px var(--font-family-display);letter-spacing:-.04em;max-width:16ch;margin-top:20px}
@media (max-width:640px){.lp-phero h1{font-size:40px;line-height:44px}}

/* beta form */
.lp-form{max-width:620px;margin:40px auto 0;padding:28px;border-radius:28px;background:var(--color-surface);box-shadow:inset 0 0 0 1px var(--color-border),0 24px 50px rgba(22,27,38,.06)}
.lp-field{display:flex;flex-direction:column;gap:8px;margin-top:20px}
.lp-field label,.lp-field .lbl{font:var(--type-label-md)}
.lp-field input,.lp-field select{min-height:56px;padding:0 16px;border:0;border-radius:14px;background:var(--color-canvas);box-shadow:inset 0 0 0 1.5px var(--color-border-strong);font:var(--type-body-lg);color:var(--color-text);outline:none;transition:box-shadow 150ms ease}
.lp-field input:focus,.lp-field select:focus{box-shadow:inset 0 0 0 2px var(--color-text)}
.lp-field.err input{box-shadow:inset 0 0 0 2px var(--color-danger)}
.lp-field .msg{display:none;align-items:center;gap:6px;font:var(--type-label-md);color:var(--color-danger)}
.lp-field.err .msg{display:flex}
.lp-check{display:flex;gap:12px;align-items:flex-start;margin-top:22px;font:var(--type-body-sm);color:var(--color-text-secondary);cursor:pointer}
.lp-check input{width:22px;height:22px;margin:1px 0 0;accent-color:var(--color-text);flex:none}
.lp-form .seg{display:flex;width:100%}
.lp-form .seg button{flex:1}
.lp-form .btn-block{margin-top:26px}
.lp-done{display:none;text-align:center;padding:12px 0}
.lp-form.sent>.lp-fields{display:none}
.lp-form.sent .lp-done{display:block}
.lp-done h2{font:600 32px/38px var(--font-family-display);letter-spacing:-.02em;margin-top:20px}
.lp-done p{font:var(--type-body-lg);color:var(--color-text-secondary);margin-top:8px}

/* privacy */
.lp-doc{max-width:720px}
.lp-doc h2{font:600 24px/30px var(--font-family-display);letter-spacing:-.02em;margin-top:40px}
.lp-doc p,.lp-doc li{font:var(--type-body-lg);color:var(--color-text-secondary);margin-top:10px}
.lp-doc ul{padding-left:22px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .lp-in>*,.lp-desk,.lp-phone,.lp-float,.lp-links.open,.lp-panel,.lp-fb.ok,.lp-fb.no,.lp-faq details p{animation:none}
  .lp-reveal{opacity:1;transform:none;transition:none}
  .lp-road i{transition:none;transform:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* fixes after first look */
.lp-prompt{display:flex;align-items:center;gap:10px;min-height:56px;padding:6px 6px 6px 16px;border-radius:999px;background:var(--color-canvas);box-shadow:inset 0 0 0 1.5px var(--color-border-strong);font:var(--type-body-md)}
.lp-prompt>i{font-size:20px;color:var(--group-cobalt)}
.lp-prompt span{flex:1;min-width:0}
.lp-prompt b{display:inline-flex;align-items:center;min-height:44px;padding:0 18px 3px;border-radius:999px;background:var(--color-text);color:var(--color-text-inverse);font:var(--type-label-md);box-shadow:inset 0 -3px 0 rgba(255,255,255,.12)}
@media (min-width:900px){.lp-step{align-items:start}.lp-step>div:nth-child(2){padding-top:10px}}
@media (min-width:900px){.lp-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.lp-white{background:#fff;color:var(--color-text);box-shadow:inset 0 -4px 0 rgba(0,0,0,.15);padding-bottom:4px}
.lp-demo .lp-shot{box-shadow:inset 0 0 0 1px var(--color-border)}
.lp-form .pick{display:flex;flex-wrap:wrap;gap:8px}
.lp-form [hidden]{display:none!important}

.lp-hero h1.lp-h1-md{font-size:60px;line-height:64px}
@media (max-width:640px){.lp-hero h1.lp-h1-md{font-size:40px;line-height:44px}}
@media (max-width:420px){.lp-hero h1{font-size:42px;line-height:46px}.lp-hero h1.lp-h1-md{font-size:36px;line-height:40px}.lp-phero h1{font-size:36px;line-height:40px}.lp-h2{font-size:30px;line-height:36px}}