/* the entry funnel: the deep-sea scene all the way, one thing per screen, the call to action always under the thumb */
.fun { min-height:100dvh; display:flex; flex-direction:column; background:radial-gradient(120% 70% at 85% 0%, var(--sea-2) 0%, var(--sea) 60%); color:var(--on-sea); }
.fun-top { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; max-width:560px; width:100%; margin:0 auto; padding:calc(14px + env(safe-area-inset-top)) 18px 8px; }
.fun-top .wordmark { color:var(--on-sea); justify-self:center; grid-column:2; } .fun-top .wm { height:32px; width:77px; }
.fun-top #fnCount { color:var(--on-sea-soft); font:500 13px var(--body); justify-self:start; grid-column:3; }
.fun-top #fnBack, .fun-top #fnLogin { color:var(--on-sea-soft); background:none; border:0; font:600 14px var(--body); min-height:44px; cursor:pointer; grid-row:1; }
.fun-top #fnBack { grid-column:1; justify-self:end; } .fun-top #fnLogin { grid-column:3; justify-self:end; text-decoration:underline; text-underline-offset:4px; }
.fun-bar { position:relative; height:4px; background:rgba(255,255,255,.12); max-width:560px; width:calc(100% - 36px); margin:0 auto; border-radius:2px; }
.fun-bar i { position:absolute; inset-block:0; inset-inline-start:0; width:calc(var(--p, 0) * 100%); background:var(--nacre); border-radius:2px; transition:width .4s cubic-bezier(.3,.8,.3,1); }
.fun-body { flex:1; max-width:560px; width:100%; margin:0 auto; padding:22px 18px calc(120px + env(safe-area-inset-bottom)); animation:rise .35s ease-out both; }
.fun-body h1 { color:var(--on-sea); font-size:clamp(28px,7.4vw,42px); line-height:1.22; margin:8px 0 10px; }
.flede { color:var(--on-sea-soft); font-size:17px; margin:0 0 14px; }
.ffacts { display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 22px; } .ffacts span { font:600 13px var(--body); border:1px solid rgba(255,255,255,.2); border-radius:999px; padding:4px 12px; color:var(--on-sea); background:rgba(255,255,255,.05); }
.fq-t { font:600 17px/1.5 var(--body); color:var(--on-sea); margin:20px 0 8px; } .fq-t.big { font:700 22px/1.45 var(--display); margin:10px 0 14px; }
.fopts { display:grid; gap:10px; }
.fopt { position:relative; text-align:start; font:inherit; color:var(--on-sea); background:rgba(255,255,255,.06); border:1.5px solid rgba(255,255,255,.18); border-radius:var(--r); padding:15px 18px; min-height:58px; cursor:pointer; display:flex; flex-direction:column; justify-content:center; gap:2px; transition:border-color .15s, background .15s, transform .1s; }
.fopt b { font:600 17px/1.5 var(--body); } .fopt small { color:var(--on-sea-soft); font:400 13px/1.45 var(--body); }
.fopt:hover { border-color:#B3E9E4; } .fopt:active { transform:scale(.99); }
.fopt.on { border-color:#B3E9E4; background:rgba(179,233,228,.14); padding-inline-end:48px; }
.fopt.on::after { content:""; position:absolute; inset-inline-end:16px; top:50%; width:22px; height:22px; margin-top:-11px; border-radius:50%; background:#B3E9E4 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-6.5' fill='none' stroke='%230A1433' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat; }
.fin { width:100%; font:inherit; font-size:16px; color:var(--on-sea); background:rgba(255,255,255,.07); border:1.5px solid rgba(255,255,255,.2); border-radius:var(--r); padding:13px 16px; min-height:52px; }
.fin::placeholder { color:var(--on-sea-soft); opacity:.7; } .fin:focus-visible { outline:none; border-color:#B3E9E4; box-shadow:0 0 0 4px rgba(179,233,228,.2); }
.fhint { color:var(--on-sea-soft); font-size:14px; margin:6px 2px 0; }
.flegal { color:var(--on-sea-soft); font-size:13px; margin:22px 0 0; text-align:center; } .flegal a { color:var(--on-sea); }
.fpoints, .fchanges { list-style:none; padding:0; margin:14px 0 0; display:grid; gap:10px; }
.fpoints li, .fchanges li { position:relative; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:14px; padding:12px 16px 12px 16px; padding-inline-start:44px; font-size:16px; line-height:1.6; }
.fpoints li::before, .fchanges li::before { content:""; position:absolute; inset-inline-start:14px; top:16px; width:18px; height:18px; border-radius:50%; background:var(--brass) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-6.5' fill='none' stroke='%231E1400' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat; }
.fbuild { list-style:none; padding:0; margin:18px 0 0; display:grid; gap:10px; } .fbuild li { color:var(--on-sea-soft); animation:rise .35s ease-out both; font-size:17px; }
.pearl.big { --s:84px; display:block; margin:14px 0 6px; } .pearl.spin { animation:form 1.1s cubic-bezier(.2,.9,.3,1.2) both, float 4s 1.1s ease-in-out infinite; }
.fun-nav { position:fixed; inset-inline:0; bottom:0; z-index:5; padding:12px 18px calc(12px + env(safe-area-inset-bottom)); background:linear-gradient(to top, var(--sea) 62%, rgba(10,20,51,0)); display:flex; justify-content:center; }
.fun-nav .main { max-width:560px; margin:0; background:var(--brass); color:var(--on-brass); }
.flogin { color:var(--on-sea-soft); display:block; margin:16px auto 0; }
@media (min-width:900px) { .fun-body { padding-top:48px; } }