/* Kaizo — beta page (/beta, /fr/beta). Loaded after landing.css (brand v2 tokens, header, footer, faq, final).
   No inline styles (strict CSP). App screenshots only, no photos of people. */

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ------------------------------------------------------------ hero */
.b-hero .hero-slash { position: absolute; top: -10%; right: -6%; width: 46%; height: 120%; background: var(--grad-v); clip-path: polygon(62% 0, 78% 0, 38% 100%, 22% 100%); opacity: .2; pointer-events: none; }
.b-hero .hero-text, .b-visual { position: relative; }
.b-visual { width: 100%; max-width: 520px; margin: 0 auto; }
.b-visual::before { content: ""; position: absolute; left: 4%; right: 4%; top: 6%; bottom: 6%; background: var(--grad); clip-path: polygon(30% 0, 100% 0, 70% 100%, 0 100%); opacity: .28; filter: blur(2px); }
@media (min-width: 960px) { .b-visual { max-width: none; } }
@media (max-width: 959px) { .b-visual { max-width: 420px; } }

/* ------------------------------------------------------------ what you get / what we ask */
.b-perks { padding: clamp(72px, 10vw, 130px) 0; background: linear-gradient(180deg, var(--night), var(--ink)); border-top: 1px solid var(--line); }
.b-perks .container { display: grid; gap: clamp(56px, 7vw, 80px); }
.b-grid { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 16px; }
.b-grid li { padding: 26px 24px; }
.b-grid .ico { width: 46px; height: 46px; padding: 11px; margin-bottom: 18px; border-radius: 14px; background: var(--grad); color: var(--on-orange); }
.b-grid p { margin: 0; color: var(--muted); font-size: 16px; }
.b-ask .kicker span { background: var(--cyan); color: var(--on-cyan); }
.b-ask .b-grid .ico { background: var(--cyan-soft); color: var(--cyan); }
@media (min-width: 760px) { .b-grid { grid-template-columns: repeat(3, 1fr); } }

/* ------------------------------------------------------------ 3 steps */
.b-steps-sec { position: relative; padding: clamp(72px, 10vw, 130px) 0; overflow: clip; }
.b-steps-sec::before { content: ""; position: absolute; top: 0; left: 0; width: 38%; height: 10px; background: var(--grad); }
.b-steps { list-style: none; margin: 36px 0 0; padding: 0; display: grid; gap: 18px; counter-reset: none; }
.b-step { display: grid; grid-template-columns: auto 1fr; column-gap: 20px; padding: 28px 24px; }
.b-step .step-num { font: italic 900 72px/.8 var(--display); background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: 6px; min-width: 44px; }
.b-step-body { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.b-step h3 { margin: 4px 0 10px; }
.b-step p { margin: 0 0 22px; color: var(--muted); font-size: 16px; flex: 1; }
.b-step .btn { max-width: 100%; }
.b-step .btn .ico { width: 18px; height: 18px; }
.b-foot { display: flex; gap: 12px; align-items: flex-start; margin: 26px 0 0; color: var(--muted); font-size: 15px; max-width: 46em; }
.b-foot + .b-foot { margin-top: 12px; }
.b-foot .ico { flex: none; width: 22px; height: 22px; color: var(--orange); }
.b-iphone .ico { color: var(--cyan); }
@media (min-width: 900px) {
  .b-steps { grid-template-columns: repeat(3, 1fr); }
  .b-step { grid-template-columns: 1fr; row-gap: 18px; }
}

/* ------------------------------------------------------------ final */
.beta .final h2 { max-width: 10em; }