/* SPDX-FileCopyrightText: 2026 Bluelabs Pty Ltd */
/* SPDX-License-Identifier: MIT */
/* giving: the welcome page people land on before they sign in, on the normal consensor page system
   (tokens.css + install.css: consensor nav, centred hero, h1 + .sub, footer). */
body.wl{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.wl .brand{text-decoration:none}
.wl .brand .mk{flex:none}
.wl-main{flex:1;display:grid;place-items:center;padding:24px 0 40px}
.wl .hero{padding-top:0;animation:wl-in .9s cubic-bezier(.16,1,.3,1) both}
.wl h1{font-size:clamp(40px,6.4vw,64px);line-height:1.04}
.wl .sub{max-width:520px;margin-top:18px;font-size:17px;line-height:26px;text-wrap:balance}
/* the typing ending: "Welcome to giving." never moves; only the grey word grows out to the right of the white full stop */
.wl h1 .wl-tld{position:relative}
.wl-roll{display:inline-block;width:0;overflow:visible;white-space:nowrap;text-align:left;vertical-align:baseline;color:var(--fg2)}
.wl-typed{white-space:pre}
.wl-ch{display:inline-block;white-space:pre}
.wl-caret{display:inline-block;width:3px;height:.78em;margin-left:3px;border-radius:2px;background:var(--cta,#306ff3);vertical-align:-.02em;animation:wl-blink 1.1s ease-in-out infinite}
.wl-roll.typing .wl-caret{animation:none;opacity:1}
.wl-roll[hidden]{display:none}
@keyframes wl-blink{0%,35%{opacity:1}50%,85%{opacity:0}100%{opacity:1}}
/* then the blue box comes up at the end of the line: people type at the headline's own size, one flashing cursor,
   a greyed-out tick at the box's right end that lights up once there's a word */
.wl-own{display:inline-block;width:0;overflow:visible;white-space:nowrap;vertical-align:baseline}
.wl-own[hidden]{display:none}
.wl-own.below{display:block;width:auto;margin-top:.2em}
.wl-box{position:relative;display:inline-flex;align-items:baseline;gap:.14em;margin-left:.16em;font:inherit;letter-spacing:inherit;line-height:1.04;
  padding:.06em calc(.1em + 4px) .12em .16em;border:2px dashed var(--cta,#306ff3);border-radius:.3em;animation:wl-up .6s cubic-bezier(.2,.9,.25,1.25) both}
.wl-own.below .wl-box{margin-left:0}
.wl-box input{width:2.6em;background:none;border:0;outline:0;padding:0;margin:0;font:inherit;letter-spacing:inherit;line-height:inherit;color:var(--cta,#306ff3);caret-color:transparent}
/* the box's own cursor: the same slim blue bar as the headline's, not the browser's full-height one */
.wl-base{display:inline-block;width:0;height:0;align-self:baseline}
.wl-cur{position:absolute;left:0;top:0;width:3px;height:.78em;border-radius:2px;background:var(--cta,#306ff3);pointer-events:none;opacity:0}
.wl-box:focus-within .wl-cur{opacity:1;animation:wl-blink 1.1s ease-in-out infinite}
.wl-box.keying .wl-cur{animation:none;opacity:1}
.wl-measure{position:absolute;left:0;top:0;visibility:hidden;white-space:pre;font:inherit;letter-spacing:inherit}
.wl-tick{align-self:baseline;position:relative;top:-.1em;width:.72em;height:.72em;flex:none;border:0;border-radius:50%;display:grid;place-items:center;background:#262626;color:#5c5c5c;cursor:default;
  transition:background .25s cubic-bezier(.2,.8,.2,1),color .25s cubic-bezier(.2,.8,.2,1),transform .35s cubic-bezier(.2,.9,.25,1.25)}
.wl-tick svg{width:.38em;height:.38em}
.wl-tick:not(:disabled){background:var(--cta,#306ff3);color:#fff;cursor:pointer}
.wl-tick:not(:disabled):hover{transform:scale(1.06)}
.wl-tick:not(:disabled):active{transform:scale(.94)}
.wl-tick:focus-visible{outline:2px solid #fff;outline-offset:2px}
@keyframes wl-up{from{opacity:0;transform:scale(.9)}}
.wl-go{margin-top:30px;display:flex;justify-content:center}
.wl-btn{height:48px;padding:0 7px 0 26px;border-radius:999px;display:inline-flex;align-items:center;gap:16px;background:#fff;color:#111;font-size:16px;font-weight:600;text-decoration:none;
  transition:background .2s cubic-bezier(.32,.72,0,1),transform .3s cubic-bezier(.2,.9,.25,1.25)}
.wl-btn i{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#111;color:#fff;transition:transform .3s cubic-bezier(.2,.9,.25,1.25)}
.wl-btn i svg{width:16px;height:16px}
.wl-btn:hover{background:#ededed}
.wl-btn:hover i{transform:translateX(2px)}
.wl-btn:active{transform:scale(.97)}
.wl-btn:focus-visible{outline:2px solid var(--blue,#306ff3);outline-offset:3px}
.wl-note{margin-top:14px;font-size:13px;color:var(--fg2)}
.wl .foot{margin:0;padding:22px 16px 26px}
@keyframes wl-in{from{opacity:0;transform:translateY(14px)}}
@media (prefers-reduced-motion:reduce){.wl .hero{animation:none}.wl-btn,.wl-btn i{transition:none}.wl-ch,.wl-box{animation:none}.wl-tick{transition:none}.wl-caret{display:none}}
/* day (the default) and night. Night is the consensor dark system as loaded; day swaps the tokens on the same page. */
html:not(.night) body.wl{--bg:#f7f7f5;--fg:#151515;--fg2:#8b8b88;--text:#3a3a3a;background:var(--bg);color:var(--fg)}
html:not(.night) .wl .foot{color:#8b8b88}
html:not(.night) .wl .foot a{color:#5f5f5c}
html:not(.night) .wl-btn{background:#151515;color:#fff}
html:not(.night) .wl-btn i{background:#fff;color:#151515}
html:not(.night) .wl-btn:hover{background:#2a2a2a}
html:not(.night) .wl-tick:disabled{background:#e7e7e4;color:#a9a9a5}
html:not(.night) .wl-tick:focus-visible{outline-color:#151515}
.wl .nav-in{justify-content:space-between}
.wl-mode{width:36px;height:36px;border:0;border-radius:50%;display:grid;place-items:center;background:none;color:var(--fg2);cursor:pointer;transition:color .2s cubic-bezier(.2,.8,.2,1),background .2s cubic-bezier(.2,.8,.2,1)}
.wl-mode:hover{color:var(--fg);background:rgba(127,127,127,.12)}
.wl-mode:focus-visible{outline:2px solid var(--cta,#306ff3);outline-offset:2px}
.wl-mode svg{width:18px;height:18px}
.wl-mode .sun{display:none}
html.night .wl-mode .sun{display:block}
html.night .wl-mode .moon{display:none}
/* signing in: the Google sign-in sits on a card over the welcome page, which blurs out behind it */
.wl-sheet{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:16px;background:rgba(18,18,18,.38);
  -webkit-backdrop-filter:blur(18px) saturate(1.1);backdrop-filter:blur(18px) saturate(1.1);animation:wl-fade .35s cubic-bezier(.2,.8,.2,1) both}
html:not(.night) .wl-sheet{background:rgba(247,247,245,.45)}
.wl-sheet[hidden]{display:none}
.wl-card{position:relative;width:min(380px,100%);padding:34px 28px 24px;border-radius:28px;text-align:center;background:#1a1a1a;color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 30px 80px -20px rgba(0,0,0,.6);animation:wl-rise .5s cubic-bezier(.2,.9,.25,1.1) both}
html:not(.night) .wl-card{background:#fff;color:#151515;box-shadow:0 1px 2px rgba(0,0,0,.04),0 30px 80px -24px rgba(0,0,0,.28)}
@supports (corner-shape:superellipse(1.84)){.wl-card{border-radius:44.8px;corner-shape:superellipse(1.84)}}
.wl-card h2{font-size:44px;line-height:1;font-weight:600;letter-spacing:-.04em;margin:0}
.wl-card h2 span{color:var(--cta,#306ff3)}
.wl-pledged{margin-top:12px;font-size:14px;color:var(--fg2)}
.wl-pledged b{font-weight:600;color:var(--cta,#306ff3)}
.wl-google{margin-top:26px;height:50px;border-radius:999px;display:flex;align-items:center;justify-content:center;gap:12px;font-size:16px;font-weight:500;text-decoration:none;
  background:#fff;color:#1f1f1f;transition:transform .3s cubic-bezier(.2,.9,.25,1.25),background .2s cubic-bezier(.2,.8,.2,1)}
html:not(.night) .wl-google{background:#151515;color:#fff}
.wl-google svg{width:20px;height:20px;flex:none;border-radius:50%;background:#fff;padding:2px;box-sizing:content-box}
.wl-google:hover{background:#ededed}
html:not(.night) .wl-google:hover{background:#2a2a2a}
.wl-google:active{transform:scale(.97)}
.wl-google:focus-visible{outline:2px solid var(--cta,#306ff3);outline-offset:3px}
.wl-fine{margin-top:14px;font-size:13px;color:var(--fg2)}
.wl-x{position:absolute;top:14px;right:14px;width:32px;height:32px;border:0;border-radius:50%;display:grid;place-items:center;background:none;color:var(--fg2);cursor:pointer}
.wl-x:hover{background:rgba(127,127,127,.14);color:inherit}
.wl-x svg{width:14px;height:14px}
.wl-x:focus-visible{outline:2px solid var(--cta,#306ff3);outline-offset:2px}
@keyframes wl-fade{from{opacity:0}}
@keyframes wl-rise{from{opacity:0;transform:translateY(14px) scale(.97)}}
@media (prefers-reduced-motion:reduce){.wl-sheet,.wl-card{animation:none}}