/* Install page: the light base it shares with no one else, then its blocks. */
.cab { --bg: #f6f9fc; --surface: #ffffff; --ink: #101418; --muted: #5b636b; --line: #e2e9ed; --soft: #f4f8fa;
  color-scheme: light; color: var(--ink); background: #f6f9fc; overflow-x: hidden; }
.cab::before { content: ""; position: absolute; inset: 0 0 auto; height: 400px; z-index: -1;
  background: radial-gradient(50% 70% at 20% 0%, #0b78d0 0%, transparent 70%), linear-gradient(180deg, #1e9cf0 0px, #1e9cf0 90px, rgba(120,196,248,.6) 210px, rgba(160,215,250,0) 100%); }
.cab-main { max-width: 1240px; margin: 0 auto; padding: 112px 24px 60px; }
.cab [hidden] { display: none !important; }

/* Install page */
.install { max-width: 980px; }
.ins-hero { text-align: center; padding: 20px 0 32px; }
.ins-hero h1 { font-size: clamp(36px, 5vw, 60px); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; margin: 8px 0 16px; }
.ins-hero h1 em { font-style: normal; color: var(--blue); }
.ins-hero .muted { max-width: 620px; margin: 0 auto 24px; }
.ins-cta { display: grid; justify-items: center; gap: 8px; }
.ins-cta .btn { font-size: 18px; padding: 16px 28px; }
.ins-browsers { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ins-browsers button { all: unset; cursor: pointer; padding: 8px 16px; border-radius: 999px; background: #fff; border: 1px solid #dfe8f0; font-size: 14px; font-weight: 600; }
.ins-browsers button.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.ins-browsers button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.ins-steps { padding: 28px; border-radius: 28px; background: #fff; text-align: left; }
.ins-steps h2 { margin: 0 0 16px; font-size: 22px; }
.ins-steps ol { margin: 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 12px; }
.ins-steps li { counter-increment: s; position: relative; padding-left: 44px; min-height: 30px; padding-top: 4px; }
.ins-steps li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 14px; background: linear-gradient(180deg, #3fb0f5, var(--blue)); }
.ins-steps code { background: #eef4f9; padding: 2px 8px; border-radius: 8px; font-size: 14px; }
.ins-note { margin: 16px 0 0; }
.ins-faq { margin-top: 28px; display: grid; gap: 12px; }
.ins-faq details { background: #fff; border-radius: 22px; box-shadow: 0 14px 36px rgba(20,60,110,.07); text-align: left; }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.cab .lang { min-width: 44px; height: 44px; }
@media (max-width: 560px) { .cab-main { padding: 84px 16px 40px; } }
@media (max-width: 340px) { .top .logo { font-size: 18px; } }

/* light glass of the install page */
.cab .glass-card { background: linear-gradient(180deg, rgba(255,255,255,.74), rgba(255,255,255,.56)); border: 1px solid rgba(255,255,255,.85); -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%);
  box-shadow: 0 14px 36px rgba(20,86,160,.12), 0 2px 6px rgba(20,86,160,.05), inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(255,255,255,.35); }

.ins-phone { display: none; margin: 12px 0 0; }
.ins-phone a { color: #0b67b0; font-weight: 600; }
@media (pointer: coarse) and (max-width: 900px) { .ins-phone { display: block; } }