/* Zirva website v3: calmer surfaces, no labels above headings, the road as the brand motif. */

/* headings start their blocks now that the label chips are gone */
.lp-h2{margin-top:0}
.lp-hero2 h1,.lp-phero h1{margin-top:0}
.lp-hero2{padding-top:104px;position:relative}
.lp-hero2 h1{font-size:96px;line-height:94px}
@media (max-width:640px){.lp-hero2{padding-top:56px}.lp-hero2 h1{font-size:50px;line-height:52px}}
.lp-phero{padding-top:96px}

/* the road behind the hero: Zirva's path, drawn once */
.lp-heroroad{position:absolute;left:50%;top:330px;width:1600px;height:700px;transform:translateX(-50%);pointer-events:none;z-index:0}
.lp-heroroad path{fill:none;stroke-linecap:round}
.lp-heroroad .r1{stroke:var(--color-success-tint);stroke-width:64;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1600ms var(--ease-out) 200ms forwards}
.lp-heroroad .r2{stroke:var(--group-cobalt-tint);stroke-width:40;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1600ms var(--ease-out) 450ms forwards}
.lp-hero2 .lp-wrap,.lp-fan{position:relative;z-index:1}
@media (max-width:899px){.lp-heroroad{top:520px;width:1100px}}

/* comparison: one card, rows split by hairlines */
.lp-vs{gap:0;padding:8px 28px;border-radius:28px;background:var(--color-surface);box-shadow:0 1px 0 var(--color-border),0 24px 48px rgba(22,27,38,.06)}
.lp-vs-row{grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr);gap:16px;padding:20px 0;border-bottom:1px solid var(--color-border)}
.lp-vs-row:last-child{border-bottom:0}
.lp-vs-row>div{min-height:0;padding:0;border-radius:0;box-shadow:none;background:none}
.lp-old{color:var(--color-text-tertiary);text-decoration:line-through;text-decoration-color:var(--color-border-strong);text-decoration-thickness:1.5px}
.lp-old i{display:none}
.lp-new{font:600 17px/24px var(--font-family-ui)}
@media (max-width:700px){.lp-vs{padding:4px 20px}.lp-vs-row{gap:6px;padding:16px 0}.lp-vs-row>.arr{display:none}}

/* calmer tiles: fills instead of outlines; the 3D floor is kept only for things you press */
.lp-card,.lp-qt,.lp-tl,.lp-faq details{box-shadow:none;background:var(--color-surface)}
.lp-card{padding:28px}
.lp-rule{box-shadow:none;background:var(--color-canvas);padding:26px}
.lp-safe{box-shadow:none}
.lp-tl.now{box-shadow:inset 0 0 0 2px var(--color-success)}
.lp-list div{border-top-color:var(--color-border)}
.lp-faq summary{min-height:72px;padding:0 24px}
.lp-faq details p{padding:0 24px 24px}
.lp-stagebox{border-radius:44px}
.lp-demo{box-shadow:none}
.lp-stagebox .lp-demo{box-shadow:0 30px 60px rgba(22,27,38,.1)}

/* role buttons: one clear primary */
.lp-role{min-height:80px}
.lp-facts{margin-top:32px}

/* subpage steps: a little more room */
.lp-steps{gap:56px}
.lp-step h3{font-size:30px;line-height:36px}

@media (prefers-reduced-motion:reduce){.lp-heroroad path{animation:none;stroke-dashoffset:0}}

.lp-center .lp-h2{max-width:20ch}
.lp-ticks-row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 28px}
.lp-wide{position:relative;margin-top:56px;padding:40px;border-radius:44px;background:var(--color-surface-sunken)}
.lp-wide .lp-shot{box-shadow:0 30px 60px rgba(22,27,38,.12)}
.lp-wide .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}
.sc8{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--color-success);color:#fff;font:600 16px/1 var(--font-family-display);padding-bottom:3px;box-shadow:inset 0 -3px 0 rgba(0,0,0,.2)}
@media (max-width:640px){.lp-wide{padding:16px;border-radius:28px}.lp-wide .chip-f{position:relative;left:auto!important;bottom:auto!important;margin-top:14px;display:inline-flex}}