/* Zirva website v2: more air, one idea per section (rhythm learned from Duolingo and Brilliant). */

/* rhythm */
.lp-sec{padding-top:168px}
.lp-sec:last-of-type{padding-bottom:140px}
@media (max-width:899px){.lp-sec{padding-top:104px}}
.lp-h2{font-size:56px;line-height:60px;max-width:14ch}
.lp-lead{font-size:20px;line-height:31px;max-width:46ch;margin-top:20px}
.lp-center{text-align:center}
.lp-center .lp-h2,.lp-center .lp-lead{margin-left:auto;margin-right:auto}
@media (max-width:640px){.lp-h2{font-size:36px;line-height:42px}.lp-lead{font-size:18px;line-height:28px}}

/* centred hero */
.lp-hero2{padding:88px 0 0;text-align:center;overflow:hidden}
.lp-hero2 h1{font:600 88px/88px var(--font-family-display);letter-spacing:-.05em;margin:24px auto 0;max-width:12ch}
.lp-hero2 h1 em{font-style:normal;color:var(--group-cobalt)}
.lp-hero2 .lp-lead{margin:24px auto 0;font-size:21px;line-height:32px;max-width:40ch}
.lp-roles{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:40px}
.lp-role{display:flex;align-items:center;gap:14px;min-width:250px;min-height:76px;padding:12px 22px 16px 14px;border-radius:22px;background:var(--color-surface);box-shadow:inset 0 0 0 2px var(--color-border-strong),inset 0 -5px 0 var(--color-surface-sunken);text-align:left;text-decoration:none;color:var(--color-text);transition:transform 120ms var(--ease-out)}
.lp-role:hover{transform:translateY(-2px)}
.lp-role:active{transform:translateY(2px)}
.lp-role .ic{width:48px;height:48px;border-radius:14px;flex:none;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-role b{display:block;font:600 18px/22px var(--font-family-ui)}
.lp-role small{font:var(--type-body-sm);color:var(--color-text-secondary)}
.lp-role .chev{margin-left:auto;font-size:20px;color:var(--color-text-tertiary)}
.lp-role.main{background:var(--color-text);color:var(--color-text-inverse);box-shadow:inset 0 -5px 0 rgba(255,255,255,.12)}
.lp-role.main small{color:rgba(255,255,255,.7)}
.lp-role.main .chev{color:rgba(255,255,255,.6)}
.lp-alt{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-top:14px;font:var(--type-label-md);color:var(--color-text-secondary)}
.lp-facts{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 24px;margin-top:28px}
.lp-facts span{display:inline-flex;align-items:center;gap:8px;font:var(--type-label-md);color:var(--color-text-secondary)}
.lp-facts i{font-size:18px;color:var(--color-text)}
@media (max-width:640px){.lp-hero2{padding-top:48px}.lp-hero2 h1{font-size:48px;line-height:52px}.lp-role{min-width:0;width:100%}}

/* fan of real screens */
.lp-fan{position:relative;height:520px;margin-top:72px;display:flex;justify-content:center;align-items:flex-end}
.lp-fan figure{position:absolute;bottom:0;left:50%;width:236px;margin:0;border-radius:30px;padding:6px;background:var(--color-text);box-shadow:0 30px 60px rgba(22,27,38,.18);transform:translateX(calc(-50% + var(--x))) translateY(var(--y)) rotate(var(--r));transform-origin:50% 100%;animation:fanin 900ms var(--ease-spring) var(--d) both;transition:transform 260ms var(--ease-out)}
.lp-fan figure:hover{transform:translateX(calc(-50% + var(--x))) translateY(calc(var(--y) - 18px)) rotate(var(--r)) scale(1.03);z-index:9}
.lp-fan img{display:block;width:100%;border-radius:25px}
.lp-fan figcaption{position:absolute;left:50%;bottom:-40px;transform:translateX(-50%);white-space:nowrap;font:var(--type-label-md);color:var(--color-text-secondary);opacity:0;transition:opacity 200ms ease}
.lp-fan figure:hover figcaption{opacity:1}
@keyframes fanin{from{opacity:0;transform:translateX(-50%) translateY(120px) rotate(0)}}
@media (max-width:899px){.lp-fan{height:auto;margin-top:48px;justify-content:flex-start;gap:14px;overflow-x:auto;padding:10px 24px 40px;scroll-snap-type:x mandatory}
  .lp-fan figure{position:relative;left:auto;flex:none;width:200px;transform:none;scroll-snap-align:center;animation:rise2 600ms var(--ease-out) var(--d) both}
  .lp-fan figure:hover{transform:none}}

/* one-idea sections */
.lp-idea{display:grid;gap:56px;align-items:center}
@media (min-width:980px){.lp-idea{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:96px}.lp-idea.rev>:first-child{order:2}}
.lp-idea .lp-h2{font-size:52px;line-height:56px}
@media (max-width:640px){.lp-idea .lp-h2{font-size:34px;line-height:40px}}
.lp-ticks{display:grid;gap:14px;margin-top:32px;padding:0;list-style:none}
.lp-ticks li{display:flex;gap:12px;align-items:flex-start;font:var(--type-body-lg)}
.lp-ticks li i{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--color-success-tint);color:var(--color-success);font-size:15px;margin-top:1px}
.lp-stagebox{position:relative;display:grid;place-items:center;min-height:580px;padding:40px 24px;border-radius:40px;background:var(--tint,var(--color-surface-sunken))}
.lp-stagebox .lp-phone{position:relative;left:auto;top:auto;animation:none}
.lp-stagebox .lp-demo{width:100%;max-width:440px;padding:28px;box-shadow:0 30px 60px rgba(22,27,38,.1)}
.lp-stagebox .lp-shot{max-width:100%}
.lp-stagebox .chip-f{position:absolute;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) var(--d,900ms) both}

/* question types */
.lp-qtypes{display:grid;gap:16px;margin-top:56px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
@media (min-width:1100px){.lp-qtypes{grid-template-columns:repeat(4,minmax(0,1fr))}}
.lp-qt{display:flex;flex-direction:column;padding:22px;border-radius:26px;background:var(--color-surface);box-shadow:inset 0 0 0 1px var(--color-border)}
.lp-qt .demo{flex:1;display:grid;place-items:center;min-height:170px;padding:16px;border-radius:18px;background:var(--color-canvas)}
.lp-qt h3{font:600 20px/26px var(--font-family-ui);margin-top:18px}
.lp-qt p{font:var(--type-body-md);color:var(--color-text-secondary);margin-top:6px}
.lp-qt .ans{min-height:48px;font-size:15px;width:100%}
.lp-qt .match{margin:0;padding:0;gap:8px;width:100%}
.lp-qt .match .col{gap:8px}
.lp-qt .mt{min-height:44px;font-size:15px}
.lp-qt .area{width:100%;min-height:96px;font:var(--type-body-sm);padding:12px;border-radius:12px;background:var(--color-surface);box-shadow:inset 0 0 0 1.5px var(--color-border-strong)}

/* what's included (tabs) */
.lp-incl{margin-top:48px}
.lp-incl .lp-tabs{margin-top:0}
.lp-list{display:grid;gap:10px 40px;margin-top:32px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.lp-list div{display:flex;gap:14px;align-items:flex-start;padding:18px 0;border-top:1px solid var(--color-border)}
.lp-list i{font-size:24px;flex:none;margin-top:1px}
.lp-list b{display:block;font:var(--type-label-lg)}
.lp-list span{font:var(--type-body-md);color:var(--color-text-secondary)}

/* beta timeline */
.lp-time{display:grid;gap:16px;margin-top:56px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));position:relative}
.lp-tl{position:relative;padding:24px;border-radius:24px;background:var(--color-surface);box-shadow:inset 0 0 0 1px var(--color-border)}
.lp-tl .n{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font:600 18px/1 var(--font-family-display);background:var(--color-surface-sunken);padding-bottom:0}
.lp-tl.now .n{background:var(--color-success);color:#fff;box-shadow:inset 0 -4px 0 rgba(0,0,0,.2);padding-bottom:4px}
.lp-tl small{display:block;margin-top:16px;font:var(--type-label-sm);color:var(--color-text-secondary)}
.lp-tl b{display:block;font:600 20px/26px var(--font-family-ui);margin-top:4px}
.lp-tl p{font:var(--type-body-md);color:var(--color-text-secondary);margin-top:6px}
.lp-tl.now{box-shadow:inset 0 0 0 2px var(--color-success)}

/* faq two columns */
.lp-faq2{display:grid;gap:40px}
@media (min-width:980px){.lp-faq2{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:80px}.lp-faq2 .lp-faq{margin-top:0}}

/* safety band */
.lp-safe{display:grid;gap:40px;padding:64px;border-radius:40px;background:var(--color-surface);box-shadow:inset 0 0 0 1px var(--color-border)}
@media (min-width:980px){.lp-safe{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:80px;align-items:center}}
@media (max-width:640px){.lp-safe{padding:32px 24px}}
.lp-safe .lp-rules{margin-top:0;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:640px){.lp-safe .lp-rules{grid-template-columns:1fr}}

.lp-final{padding:96px 32px}
.lp-final h2{font-size:64px;line-height:68px}
@media (max-width:640px){.lp-final h2{font-size:40px;line-height:44px}}

@media (prefers-reduced-motion:reduce){.lp-fan figure,.lp-stagebox .chip-f{animation:none}.lp-fan figure{transition:none}}

/* fixes after first look */
.lp-hero2 h1{max-width:none}
.lp-hero2 h1 em{display:block}
@media (min-width:980px){.lp-idea.rev{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}}
.lp-stagebox .lp-shot{width:100%}
.lp-stagebox .lp-try{text-align:left}
.lp-fan::after{content:"";position:absolute;left:0;right:0;bottom:0;height:90px;background:linear-gradient(transparent,var(--color-canvas));z-index:10;pointer-events:none}
@media (max-width:899px){.lp-fan::after{display:none}}