/* Zirva website v6: floating pill header, lean editorial landing, a footer that ends the story. */

/* ---------- floating pill header ---------- */
.lp-head.zh{position:fixed;top:14px;left:0;right:0;z-index:60;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;pointer-events:none;padding:0 16px}
.zh-in{pointer-events:auto;position:relative;max-width:1040px;margin:0 auto;display:flex;align-items:center;gap:6px;height:62px;padding:0 8px 0 22px;border-radius:999px;background:rgba(255,255,255,.74);backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);box-shadow:0 0 0 1px rgba(22,27,38,.06),0 10px 30px rgba(22,27,38,.07);transition:box-shadow 200ms ease,background-color 200ms ease}
.lp-head.zh.scrolled{box-shadow:none}
.lp-head.zh.scrolled .zh-in{background:rgba(255,255,255,.88);box-shadow:0 0 0 1px rgba(22,27,38,.08),0 14px 40px rgba(22,27,38,.12)}
.zh .lp-logo{font-size:19px;margin-right:8px}
.zh .lp-logo svg{width:30px;height:20px}
.zh .lp-links{margin-left:auto;gap:2px}
.zh .lp-links a{min-height:44px;padding:0 14px;font:var(--type-label-md)}
.zh .zh-cta{border-radius:999px;min-height:46px;padding:0 20px 3px;margin-left:6px}
.zh .lp-menu{border-radius:999px}
@media (max-width:899px){
  .zh-in{height:58px;padding:0 8px 0 18px}
  .zh .lp-links{position:absolute;left:0;right:0;top:68px;flex-direction:column;align-items:stretch;padding:10px;border-radius:28px;background:rgba(255,255,255,.96);box-shadow:0 0 0 1px rgba(22,27,38,.06),0 20px 40px rgba(22,27,38,.14)}
  .zh .lp-links a{min-height:52px;border-radius:18px;font-size:16px}
  .zh .lp-links .btn{border-radius:18px;margin-top:6px}
  .zh .zh-cta{display:none}
}
/* room for the floating header on every page */
.lp-hero2{padding-top:168px}
.lp-hero{padding-top:140px}
.lp-phero{padding-top:156px}
@media (max-width:640px){.lp-hero2{padding-top:120px}.lp-hero{padding-top:110px}.lp-phero{padding-top:116px}}

/* ---------- hero: one sentence, one button ---------- */
.zhero h1{font-size:104px;line-height:100px}
.zhero .lp-lead{margin-top:28px}
.zhero-act{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 28px;margin-top:36px}
.zhero-act .btn{border-radius:999px;padding:0 30px 4px}
.zlink{display:inline-flex;align-items:center;gap:8px;min-height:44px;font:var(--type-label-lg);color:var(--color-text);text-decoration:none;border-bottom:1.5px solid transparent;transition:border-color 150ms ease,gap 150ms var(--ease-out)}
.zlink:hover{border-color:currentColor;gap:12px}
@media (max-width:640px){.zhero h1{font-size:52px;line-height:54px}}

/* ---------- lean sections ---------- */
.zs{padding-top:176px}
@media (max-width:899px){.zs{padding-top:112px}}
.zs-n{display:block;font:500 14px/1 var(--font-family-mono);color:var(--color-text-tertiary);margin-bottom:20px;letter-spacing:.04em}
.zs .lp-h2{font-size:56px;line-height:60px;max-width:13ch}
.zs .lp-lead{max-width:42ch}
.zs-grid{display:grid;gap:56px;align-items:center}
@media (min-width:980px){.zs-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:96px}.zs-grid.rev .zs-text{order:2}}
@media (max-width:640px){.zs .lp-h2{font-size:36px;line-height:42px}}
.zs-vis{display:flex;justify-content:center}
.zcard{width:100%;max-width:460px;padding:30px;border-radius:30px;background:var(--color-surface);box-shadow:0 1px 0 var(--color-border),0 30px 70px rgba(22,27,38,.1)}
.zphones{gap:28px}
.zphones .lp-phone{position:relative;left:auto;top:auto;animation:none}
.zphones .lp-phone:nth-child(2){transform:translateY(48px)}
@media (max-width:640px){.zphones{gap:12px}.zphones .lp-phone{width:160px;height:340px;padding:6px;border-radius:30px}.zphones .lp-phone .scr{border-radius:24px}.zphones .lp-phone iframe{transform:scale(.379)}.zphones .lp-phone:nth-child(2){transform:translateY(28px)}}

/* dark section for the teacher demo */
.zdark{margin:176px 16px 0;padding:120px 0;border-radius:48px;background:var(--color-text);color:var(--color-text-inverse)}
.zdark .lp-h2{color:#fff}
.zdark .lp-lead{color:rgba(255,255,255,.7)}
.zdark .zs-n{color:rgba(255,255,255,.4)}
.zdark .zlink{color:#fff;margin-top:24px}
.zdark .gd-top{color:rgba(255,255,255,.6)}
.zdark .gd-count{color:#fff}
.zdark .gd-bar{background:rgba(255,255,255,.14)}
.zdark .gd-toast{background:#fff;color:var(--color-text)}
@media (max-width:899px){.zdark{margin:112px 8px 0;padding:72px 0;border-radius:32px}}

/* what's in beta: three plain columns */
.zi{display:grid;gap:40px;margin-top:56px}
@media (min-width:900px){.zi{grid-template-columns:repeat(3,minmax(0,1fr));gap:48px}}
.zi-col h3{font:600 24px/30px var(--font-family-display);letter-spacing:-.02em;padding-bottom:16px;border-bottom:2px solid var(--color-text)}
.zi-col ul{list-style:none;margin:0;padding:0}
.zi-col li{padding:15px 0;border-bottom:1px solid var(--color-border);font:var(--type-body-lg);color:var(--color-text)}

/* FAQ: plain two columns */
.zfaq{display:grid;gap:40px}
@media (min-width:980px){.zfaq{grid-template-columns:minmax(0,.55fr) minmax(0,1.45fr);gap:80px}}
.zfq{grid-template-columns:1fr!important;gap:0!important;margin:0!important}
.zfq details{border-radius:0;background:none;border-bottom:1px solid var(--color-border);box-shadow:none!important}
.zfq details:first-child{border-top:1px solid var(--color-border)}
.zfq summary{min-height:68px;padding:8px 0;font:600 18px/26px var(--font-family-ui)}
.zfq details p{padding:0 48px 22px 0;font:var(--type-body-lg)}
.zfq .fq-x{background:none;box-shadow:inset 0 0 0 1.5px var(--color-border-strong)}
.zfaq .fq-show{margin:20px 0 0;border-radius:999px}

/* the one closing call to action */
.zend{text-align:center;padding-bottom:40px}
.zend h2{font:600 72px/74px var(--font-family-display);letter-spacing:-.04em}
.zend p{font:var(--type-body-lg);color:var(--color-text-secondary);margin-top:14px}
.zend .lp-join{background:var(--color-surface);box-shadow:0 0 0 1px var(--color-border),0 20px 50px rgba(22,27,38,.08);margin-top:32px}
@media (max-width:640px){.zend h2{font-size:42px;line-height:46px}}

/* ---------- footer: the story ends with the road ---------- */
.zf{position:relative;margin-top:140px;padding-top:96px;background:var(--color-text);color:var(--color-text-inverse);overflow:hidden}
.zf-top{display:grid;gap:56px}
@media (min-width:980px){.zf-top{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:80px}}
.zf-big{font:600 64px/66px var(--font-family-display);letter-spacing:-.04em}
.zf-small{font:var(--type-body-lg);color:rgba(255,255,255,.6);margin-top:20px;max-width:36ch}
.zf-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.zf-cols nav{display:flex;flex-direction:column}
.zf-cols b{font:500 13px/1 var(--font-family-mono);letter-spacing:.04em;color:rgba(255,255,255,.4);margin-bottom:16px}
.zf-cols a{display:inline-flex;align-items:center;min-height:44px;font:var(--type-label-lg);color:rgba(255,255,255,.85);text-decoration:none;transition:color 150ms ease}
.zf-cols a:hover{color:#fff}
.zf-rules{list-style:none;display:flex;flex-wrap:wrap;gap:12px 32px;margin:72px 0 0;padding:28px 0 0;border-top:1px solid rgba(255,255,255,.12)}
.zf-rules li{display:inline-flex;align-items:center;gap:8px;font:var(--type-label-md);color:rgba(255,255,255,.75)}
.zf-rules i{color:var(--color-success);font-size:16px;filter:brightness(1.6)}
.zf-bottom{display:flex;gap:24px;margin-top:20px;font:var(--type-body-sm);color:rgba(255,255,255,.45)}
.zf-bottom a{color:rgba(255,255,255,.6);text-decoration:none}
.zf-word{position:relative;margin-top:56px;height:clamp(120px,21vw,300px);overflow:hidden}
.zf-word span{position:absolute;left:50%;bottom:-.22em;transform:translateX(-50%);font:600 clamp(140px,26vw,380px)/1 var(--font-family-display);letter-spacing:-.06em;color:#fff;white-space:nowrap}
.zf-road{position:absolute;left:0;top:0;width:100%;height:100%;z-index:1;pointer-events:none}
.zf-road path{fill:none;stroke:var(--color-success);stroke-width:22;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.zf.in .zf-road path{animation:draw 1600ms var(--ease-out) 200ms forwards}
@media (max-width:640px){.zf{padding-top:64px}.zf-big{font-size:42px;line-height:46px}.zf-cols{grid-template-columns:1fr 1fr}}

@media (prefers-reduced-motion:reduce){.zf-road path{stroke-dashoffset:0}.zf.in .zf-road path{animation:none}.zlink{transition:none}}

.zdark .gd-card,.zdark .gd-done{color:var(--color-text)}