/* leier apps store. Always dark: deep forest with lime light. (The apps and the console keep their own light look.) */
:root{
  --bg:#040806; --surface:#0A120D; --raise:#0F1A13; --line:#1B2A20; --line2:#2A4132; --ink:#EEF4EA; --muted:#94A39A;
  --forest:#163A26; --green:#4FA36A; --lime:#C6EE5A; --soft:#D9F58A; --link:#B9E67A;
  --glow:198,238,90;                          /* lime, as r,g,b for glows */
  --mark-a:#4FA36A; --mark-b:#8CC96A; --mark-c:#C6EE5A;
  --rs:#2FB3A6; --r:#F0627A; --g:#5FCF8A; --y:#F2CB3D; --o:#F59A4A;
  --display:'Poppins','Avenir Next','Segoe UI',system-ui,sans-serif; --text:'Inter',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--bg)}
body{font-family:var(--text);color:var(--ink);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;min-height:100vh;overflow-x:hidden;
  background:radial-gradient(900px 620px at 82% -6%,rgba(34,96,60,.5),transparent 62%),radial-gradient(760px 560px at -8% 34%,rgba(22,58,38,.55),transparent 60%),var(--bg);background-attachment:fixed}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
button{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--display);letter-spacing:-.025em;text-wrap:balance;line-height:1.08}
.wrap{max-width:1160px;margin:0 auto;padding-left:max(22px,env(safe-area-inset-left,0px));padding-right:max(22px,env(safe-area-inset-right,0px))}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px;border-radius:8px}
.lime{color:var(--lime)} .soft{color:var(--soft)}
.neon{color:var(--lime);text-shadow:0 0 22px rgba(var(--glow),.55),0 0 60px rgba(var(--glow),.25)}

/* ---------- top bar: outlined tabs lit by the orb ---------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(4,8,6,.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid rgba(var(--glow),.08)}
.nav .wrap{display:flex;align-items:center;gap:14px;min-height:68px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.logo svg{width:28px;height:28px;flex:none;filter:drop-shadow(0 0 8px rgba(var(--glow),.35))}
.logo b{font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:-.03em;white-space:nowrap}
.logo b i{font-style:normal;color:var(--lime)}
.tabs{margin-left:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tab{position:relative;display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 15px;border-radius:13px;font-weight:600;font-size:14.5px;text-decoration:none;cursor:pointer;
  color:var(--ink);background:linear-gradient(180deg,rgba(31,82,54,.34),rgba(10,18,13,.5));border:1px solid rgba(var(--glow),.26);
  box-shadow:inset 0 1px 0 rgba(217,245,138,.12),0 0 0 rgba(var(--glow),0);transition:border-color .25s,box-shadow .25s,color .25s,background .25s}
.tab:hover,.tab[aria-expanded="true"]{border-color:rgba(var(--glow),.75);box-shadow:inset 0 1px 0 rgba(217,245,138,.2),0 0 22px rgba(var(--glow),.28);color:var(--soft)}
.tab svg{width:12px;height:12px;transition:transform .2s}
.tab[aria-expanded="true"] svg{transform:rotate(180deg)}
/* before the orb's light reaches them the tabs have no outline; .lit draws it */
.nav.dim .tab,.nav.dim .getapp{border-color:transparent;box-shadow:none;background:transparent}
.nav .tab.lit,.nav .getapp.lit{animation:tab-lit 1.25s ease-out both}
@keyframes tab-lit{0%{border-color:transparent;box-shadow:0 0 0 rgba(var(--glow),0)}28%{border-color:var(--soft);box-shadow:0 0 34px rgba(var(--glow),.85),inset 0 0 18px rgba(var(--glow),.35)}100%{border-color:rgba(var(--glow),.26);box-shadow:inset 0 1px 0 rgba(217,245,138,.12)}}
.dd{position:relative}
.menu{position:absolute;top:calc(100% + 10px);left:0;min-width:350px;padding:8px;border-radius:18px;background:rgba(10,18,13,.96);border:1px solid rgba(var(--glow),.3);
  box-shadow:0 24px 60px rgba(0,0,0,.6),0 0 40px rgba(var(--glow),.12);z-index:5}
.menu[hidden]{display:none}
.menu a,.menu div.row{display:flex;gap:12px;align-items:center;padding:10px 12px;border-radius:12px;text-decoration:none}
.menu a:hover{background:rgba(var(--glow),.09)}
.menu img,.menu .ph{width:44px;height:44px;border-radius:12px;flex:none}
.menu .ph{border:1px dashed var(--line2);display:grid;place-items:center;color:var(--muted);font-size:20px}
.menu b{display:block;font-family:var(--display);font-size:16px}
.menu span{display:block;font-size:13px;color:var(--muted);white-space:nowrap}
.menu .row span{white-space:normal}
.menu b span{display:inline;font-size:inherit;color:var(--lime)}
.menu em{margin-left:auto;font-style:normal;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#0B140D;background:var(--lime);border-radius:999px;padding:3px 9px}
.menu em.soon{background:transparent;color:var(--muted);border:1px solid var(--line2)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:50px;padding:0 24px;border-radius:15px;border:1px solid rgba(var(--glow),.3);background:rgba(15,26,19,.6);
  font-weight:600;font-size:15.5px;text-decoration:none;white-space:nowrap;cursor:pointer;transition:border-color .2s,box-shadow .2s,transform .15s}
.btn:hover{border-color:rgba(var(--glow),.8);box-shadow:0 0 24px rgba(var(--glow),.25)}
.btn.lg{min-height:58px;padding:0 30px;font-size:17px;border-radius:18px}
/* the "get the app" button: the orb as a button. Soft glass square corners, the L inside, and an aura that radiates every few seconds */
.getapp{position:relative;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px 0 12px;border-radius:15px;font-weight:700;font-size:14.5px;text-decoration:none;white-space:nowrap;cursor:pointer;color:#F4FFDE;
  background:radial-gradient(120% 160% at 22% 0%,#3C9A62 0%,#1B4A31 46%,#07140C 100%);border:1px solid rgba(217,245,138,.6);
  box-shadow:inset 0 0 14px rgba(217,245,138,.4),inset 0 -8px 16px rgba(3,10,6,.7),0 0 18px rgba(var(--glow),.35);transition:transform .15s,box-shadow .2s}
.getapp:hover{transform:translateY(-1px);box-shadow:inset 0 0 18px rgba(217,245,138,.6),inset 0 -8px 16px rgba(3,10,6,.7),0 0 34px rgba(var(--glow),.6)}
.getapp.lg{min-height:58px;padding:0 28px 0 18px;font-size:17px;border-radius:19px}
.getapp .l{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;width:20px;height:20px;flex:none}
.getapp.lg .l{width:26px;height:26px;gap:3px}
.getapp .l i{border-radius:28%;background:rgba(240,255,214,.14)}
.getapp .l i.on{background:#F4FFDE;box-shadow:0 0 6px rgba(217,245,138,.95);animation:l-step 5.2s ease-in-out infinite}
.getapp .l i.on:nth-child(4){animation-delay:.12s} .getapp .l i.on:nth-child(7){animation-delay:.24s}
.getapp .l i.on:nth-child(8){animation-delay:.36s;background:#C6EE5A} .getapp .l i.on:nth-child(9){animation-delay:.48s;background:#D9F58A}
@keyframes l-step{0%,72%,100%{opacity:1;transform:scale(1)}80%{opacity:.35;transform:scale(.7)}88%{opacity:1;transform:scale(1.18)}}
.getapp::before,.getapp::after{content:"";position:absolute;inset:-1px;border-radius:inherit;border:1px solid rgba(var(--glow),.9);opacity:0;pointer-events:none;animation:aura 5.2s ease-out infinite}
.getapp::after{animation-delay:.28s}
@keyframes aura{0%,76%{opacity:0;transform:scale(1)}80%{opacity:.9}100%{opacity:0;transform:scale(1.5,2.1)}}

/* ---------- home: the orb is the star ---------- */
.hero{position:relative;overflow:hidden;min-height:min(calc(100vh - 170px),780px);min-height:min(calc(100svh - 170px),780px);display:flex;align-items:center;padding:34px 0 40px}
#field{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.hero .wrap{position:relative;width:100%;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:30px;align-items:center}
.kicker{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--lime);margin-bottom:18px}
.kicker::before{content:"";width:8px;height:8px;border-radius:3px;background:var(--lime);box-shadow:0 0 12px rgba(var(--glow),.9)}
.hero h1{font-size:clamp(40px,6vw,76px);font-weight:700}
.lead{font-size:clamp(18px,1.7vw,22px);color:var(--ink);margin-top:20px;max-width:30em}
.say{margin-top:26px;display:grid;gap:10px;max-width:34em;list-style:none}
.say li{position:relative;padding-left:22px;font-size:17px;color:var(--muted)}
.say li::before{content:"";position:absolute;left:0;top:.52em;width:9px;height:9px;border-radius:3px;background:var(--forest);border:1px solid rgba(var(--glow),.55)}
.say li b{color:var(--ink);font-weight:600}
.cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:30px}
.fine{font-size:14px;color:var(--muted);margin-top:16px}
.stage{position:relative;display:grid;place-items:center;min-height:420px}
.stage::before{content:"";position:absolute;width:118%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(var(--glow),.2),rgba(79,163,106,.1) 46%,transparent 72%);animation:stage-breathe 7s ease-in-out infinite;pointer-events:none}
@keyframes stage-breathe{0%,100%{transform:scale(.94);opacity:.8}50%{transform:scale(1.06);opacity:1}}
.hero-orb{position:relative;display:block;background:none;border:0;padding:0;cursor:pointer;border-radius:30%;-webkit-tap-highlight-color:transparent;outline:0;will-change:transform}
.hero-orb:focus-visible{outline:2px solid var(--lime);outline-offset:14px}
.ringset{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.ringset i{position:absolute;width:var(--d);aspect-ratio:1;border-radius:34%;border:1px solid rgba(var(--glow),.16);animation:ring-turn 40s linear infinite}
.ringset i:nth-child(2){animation-duration:64s;animation-direction:reverse;border-color:rgba(var(--glow),.1)}
.ringset i:nth-child(3){animation-duration:90s;border-style:dashed;border-color:rgba(var(--glow),.12)}
@keyframes ring-turn{to{transform:rotate(360deg)}}

/* the newest app, right under the fold */
.next{padding:8px 0 70px}
.feature{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:22px;align-items:center;padding:26px;border-radius:28px;text-decoration:none;overflow:hidden;
  background:linear-gradient(135deg,rgba(31,82,54,.5),rgba(10,18,13,.85) 55%);border:1px solid rgba(var(--glow),.28);box-shadow:0 0 0 rgba(var(--glow),0);transition:border-color .25s,box-shadow .25s,transform .2s}
.feature:hover{border-color:rgba(var(--glow),.8);box-shadow:0 0 50px rgba(var(--glow),.2);transform:translateY(-2px)}
.feature::after{content:"";position:absolute;inset:0;background:radial-gradient(420px 220px at var(--mx,80%) var(--my,0%),rgba(var(--glow),.16),transparent 70%);pointer-events:none}
.feature img{width:92px;height:92px;border-radius:24px;box-shadow:0 0 30px rgba(var(--glow),.3)}
.feature .tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#0B140D;background:var(--lime);border-radius:999px;padding:3px 10px;margin-bottom:8px}
.feature h2{font-size:30px}
.feature p{color:var(--muted);margin-top:4px;max-width:36em}
.feature .go{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--lime);white-space:nowrap;font-size:17px}
.feature .go::after{content:"→";transition:transform .2s}
.feature:hover .go::after{transform:translateX(5px)}
.soonline{margin-top:16px;color:var(--muted);font-size:14.5px;text-align:center}

/* two apps, side by side */
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.appcard{position:relative;display:flex;flex-direction:column;gap:6px;padding:28px;border-radius:30px;text-decoration:none;overflow:hidden;min-height:330px;
  background:linear-gradient(150deg,rgba(31,82,54,.5),rgba(10,18,13,.9) 58%);border:1px solid rgba(var(--glow),.28);transition:border-color .25s,box-shadow .25s,transform .2s}
.appcard:hover{border-color:rgba(var(--glow),.85);box-shadow:0 0 60px rgba(var(--glow),.2);transform:translateY(-3px)}
.appcard::after{content:"";position:absolute;inset:0;background:radial-gradient(420px 260px at var(--mx,80%) var(--my,0%),rgba(var(--glow),.17),transparent 70%);pointer-events:none}
.appcard .hd{display:flex;align-items:center;gap:16px}
.appcard img{width:84px;height:84px;border-radius:22px;box-shadow:0 0 34px rgba(var(--glow),.3);transition:transform .3s}
.appcard:hover img{transform:scale(1.06) rotate(-3deg)}
.appcard .tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#0B140D;background:var(--lime);border-radius:999px;padding:3px 10px}
.appcard .tag.soon{background:transparent;color:var(--soft);border:1px solid rgba(var(--glow),.5)}
.appcard h2{font-size:36px;margin-top:4px}
.appcard .kind{color:var(--lime);font-weight:600;font-size:14.5px}
.appcard p{color:#C9D3C7;margin-top:12px;font-size:17px;max-width:30em}
.appcard ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.appcard li{font-size:13px;font-weight:600;border:1px solid var(--line2);border-radius:999px;padding:4px 11px;color:var(--muted)}
.appcard .go{margin-top:auto;padding-top:20px;display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-weight:700;color:var(--lime);font-size:19px}
.appcard .go::after{content:"→";transition:transform .2s}
.appcard:hover .go::after{transform:translateX(6px)}
#field{-webkit-mask-image:linear-gradient(180deg,#000 50%,transparent 96%);mask-image:linear-gradient(180deg,#000 50%,transparent 96%)}
body.intro-out .hero-orb{z-index:70}

/* ---------- the opening: the orb alone, the name typed, then the store ---------- */
#intro{position:fixed;inset:0;z-index:60;background:radial-gradient(700px 520px at 50% 42%,rgba(22,58,38,.75),transparent 70%),#020503;display:none;transition:opacity .9s ease}
body.intro-on{overflow:hidden}
body.intro-on #intro{display:block}
body.intro-on .hero-orb{z-index:70}
body.intro-out #intro{display:block;opacity:0;pointer-events:none}
.intro-word{position:absolute;left:0;right:0;top:calc(42% + min(22vh,190px));text-align:center;font-family:var(--display);font-weight:700;font-size:clamp(40px,7vw,84px);letter-spacing:-.035em;line-height:1;transition:opacity .6s,transform .9s;white-space:nowrap}
.intro-word span{display:inline-block;animation:key-in .5s ease-out both;white-space:pre}
.intro-word span.dot{color:var(--lime)}
@keyframes key-in{0%{color:var(--soft);text-shadow:0 0 34px rgba(var(--glow),1),0 0 80px rgba(var(--glow),.7);transform:translateY(8px) scale(1.12);opacity:0}100%{text-shadow:0 0 0 rgba(var(--glow),0);transform:none;opacity:1}}
.intro-word .caret{display:inline-block;width:.09em;height:.86em;margin-left:.06em;background:var(--lime);box-shadow:0 0 18px rgba(var(--glow),.9);vertical-align:-.06em;animation:blink .7s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
body.intro-out .intro-word{opacity:0;transform:translateY(-26px)}
.intro-skip{position:absolute;right:22px;bottom:20px;background:none;border:1px solid var(--line2);color:var(--muted);border-radius:999px;padding:7px 14px;font-size:13px;cursor:pointer}
.intro-skip:hover{color:var(--ink);border-color:rgba(var(--glow),.6)}
/* the wash of light that leaves the orb, crosses the page and lights the tabs */
#wash{position:fixed;left:0;top:0;width:150vmax;height:150vmax;margin:-75vmax 0 0 -75vmax;border-radius:50%;z-index:55;pointer-events:none;opacity:0;display:none;
  background:radial-gradient(closest-side,rgba(217,245,138,.55),rgba(var(--glow),.3) 30%,rgba(79,163,106,.14) 55%,transparent 72%);mix-blend-mode:screen}
#wash.go{display:block;animation:wash 1.9s cubic-bezier(.2,.7,.2,1) both}
@keyframes wash{0%{opacity:0;transform:translate(var(--x0),var(--y0)) scale(.05)}22%{opacity:1}100%{opacity:0;transform:translate(var(--x1),var(--y1)) scale(1.05)}}
/* things on the home page arrive after the opening */
.rise{opacity:0;transform:translateY(18px)}
body.ready .rise{opacity:1;transform:none;transition:opacity .8s ease,transform .8s ease;transition-delay:calc(var(--i,0) * 110ms)}

/* ---------- shared sections ---------- */
section{padding:72px 0;scroll-margin-top:84px;position:relative}
h2{font-size:clamp(28px,3.6vw,44px);font-weight:700}
.sub{color:var(--muted);margin-top:12px;max-width:40em;font-size:17.5px}
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease;transition-delay:calc(var(--i,0) * 90ms)}
.rv.in{opacity:1;transform:none}
.card{background:linear-gradient(180deg,rgba(15,26,19,.9),rgba(10,18,13,.9));border:1px solid var(--line);border-radius:22px;padding:24px}
.card h3{font-size:20px}
.card p{color:var(--muted);margin-top:8px;font-size:15.5px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:28px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:28px}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:4px 10px;border:1px solid rgba(var(--glow),.4);color:var(--lime)}
.pill.way{border-color:var(--line2);color:var(--muted)}

/* ---------- the app page: like a store listing, with our own light ---------- */
.apphead{padding:44px 0 26px}
.apphead .top{display:grid;grid-template-columns:auto minmax(0,1fr);gap:26px;align-items:center}
.appicon{position:relative;width:148px;height:148px;border-radius:36px;box-shadow:0 0 60px rgba(var(--glow),.35),0 20px 50px rgba(0,0,0,.6)}
.appicon img{width:100%;height:100%;border-radius:inherit}
.appicon::after{content:"";position:absolute;inset:-10px;border-radius:44px;border:1px solid rgba(var(--glow),.3);animation:aura 5.2s ease-out infinite;pointer-events:none}
.apphead h1{font-size:clamp(44px,6vw,72px)}
.apphead .by{color:var(--lime);font-weight:600;margin-top:4px}
.apphead .cta{margin-top:18px}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:30px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.facts div{padding:16px 14px;text-align:center;border-left:1px solid var(--line)}
.facts div:first-child{border-left:0}
.facts small{display:block;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.facts b{display:block;font-family:var(--display);font-size:24px;margin-top:2px}
.facts span{display:block;font-size:13px;color:var(--muted)}
.facts span span,.facts b span{display:inline;font-size:inherit;color:inherit}
.pitch{font-family:var(--display);font-weight:700;font-size:clamp(30px,4.6vw,58px);letter-spacing:-.03em;line-height:1.06;margin-top:40px;max-width:15em}

.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:32px}
.step{position:relative;border-radius:24px;padding:26px 24px 24px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(15,26,19,.9),rgba(10,18,13,.9));overflow:hidden}
.step .n{font-family:var(--display);font-weight:700;font-size:96px;line-height:.9;color:transparent;-webkit-text-stroke:1.5px rgba(var(--glow),.55);text-shadow:0 0 36px rgba(var(--glow),.25)}
.step:nth-child(3) .n{color:var(--lime);-webkit-text-stroke:0;text-shadow:0 0 30px rgba(var(--glow),.6)}
.step h3{font-size:22px;margin-top:10px}
.step p{color:var(--muted);margin-top:8px}
.does{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:22px}
.do{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start;padding:18px;border-radius:18px;border:1px solid var(--line);background:rgba(10,18,13,.7)}
.do .ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:rgba(var(--glow),.1);border:1px solid rgba(var(--glow),.35);color:var(--lime)}
.do .ic svg{width:20px;height:20px}
.do b{display:block;font-family:var(--display);font-size:17.5px}
.do span{display:block;color:var(--muted);font-size:14.5px;margin-top:3px}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.chips i{font-style:normal;font-size:12px;font-weight:700;border-radius:7px;padding:2px 8px;color:#06100A}

/* the restorability tool */
.rr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;margin-top:30px;align-items:stretch}
.rr .pick{display:grid;gap:18px;align-content:start}
.rr h4{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.opts{display:flex;gap:8px;flex-wrap:wrap}
.opt{min-height:40px;padding:0 14px;border-radius:12px;border:1px solid var(--line2);background:rgba(15,26,19,.7);font-weight:600;font-size:14.5px;cursor:pointer;transition:border-color .2s,box-shadow .2s,background .2s}
.opt:hover{border-color:rgba(var(--glow),.6)}
.opt[aria-pressed="true"]{border-color:var(--lime);background:rgba(var(--glow),.12);color:var(--soft);box-shadow:0 0 18px rgba(var(--glow),.25)}
.rr .out{border-radius:24px;padding:24px;border:1px solid rgba(var(--glow),.3);background:linear-gradient(160deg,rgba(31,82,54,.4),rgba(10,18,13,.9) 60%);display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px;align-items:center;transition:border-color .3s,box-shadow .3s}
.rr .out.no{border-color:rgba(240,98,122,.5);background:linear-gradient(160deg,rgba(120,30,46,.3),rgba(10,18,13,.9) 60%)}
.gauge{position:relative;width:150px;height:150px}
.gauge svg{width:100%;height:100%;transform:rotate(-90deg)}
.gauge circle{fill:none;stroke-width:12}
.gauge .tr{stroke:rgba(255,255,255,.08)}
.gauge .vl{stroke:var(--g);stroke-linecap:round;transition:stroke-dashoffset .7s cubic-bezier(.2,.7,.2,1),stroke .3s;filter:drop-shadow(0 0 8px currentColor)}
.gauge b{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--display);font-size:38px}
.gauge small{position:absolute;left:0;right:0;bottom:30px;text-align:center;font-size:11px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.verdict{display:inline-block;font-family:var(--display);font-weight:700;font-size:26px;border-radius:12px;padding:4px 14px;color:#06100A;background:var(--g)}
.out.no .verdict{background:var(--r)}
.bars{display:grid;gap:8px;margin-top:14px}
.bar{display:grid;grid-template-columns:74px minmax(0,1fr) auto;gap:10px;align-items:center;font-size:13.5px;color:var(--muted)}
.bar i{display:block;height:10px;border-radius:6px;background:var(--rs);width:var(--w,0%);transition:width .6s cubic-bezier(.2,.7,.2,1);min-width:4px}
.bar.rep i{background:var(--r)}
.bar b{color:var(--ink);font-variant-numeric:tabular-nums}
.why{margin-top:12px;font-size:14.5px;color:var(--ink)}
.eg{font-size:13px;color:var(--muted);margin-top:14px}

/* the report */
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:40px;align-items:center}
.reportshot{border-radius:16px;border:1px solid rgba(var(--glow),.3);box-shadow:0 0 60px rgba(var(--glow),.16),0 30px 70px rgba(0,0,0,.6);transform:perspective(1400px) rotateY(-9deg) rotateX(3deg);transition:transform .5s}
.reportshot:hover{transform:perspective(1400px) rotateY(-3deg) rotateX(1deg)}

.faq{margin-top:22px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;font-weight:600;font-size:17px;list-style:none;display:flex;justify-content:space-between;gap:12px;padding:17px 0}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--lime);font-weight:400;font-size:22px;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{color:var(--muted);padding:0 0 18px;max-width:46em}
.band{position:relative;overflow:hidden;border-radius:30px;padding:44px 36px;display:flex;gap:22px;align-items:center;justify-content:space-between;flex-wrap:wrap;border:1px solid rgba(var(--glow),.35);
  background:radial-gradient(600px 300px at 85% 0%,rgba(var(--glow),.2),transparent 70%),linear-gradient(135deg,#143422,#07100B)}
.band p{color:var(--muted);margin-top:8px;max-width:34em}

/* "tell me when it is ready" */
.notify{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:28px;align-items:start;margin-top:34px;padding:30px;border-radius:28px;border:1px solid rgba(var(--glow),.3);background:linear-gradient(150deg,rgba(31,82,54,.42),rgba(10,18,13,.92) 58%);scroll-margin-top:90px}
.notify .fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.notify label{display:grid;gap:6px;font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--muted)}
.notify input,.notify select{min-height:48px;border-radius:13px;border:1px solid var(--line2);background:rgba(4,8,6,.7);color:var(--ink);font:inherit;font-size:16px;padding:0 14px;width:100%}
.notify input:focus,.notify select:focus{outline:0;border-color:var(--lime);box-shadow:0 0 0 3px rgba(var(--glow),.18)}
.notify .err{grid-column:1/-1;color:#FF9A8F;font-size:14.5px;min-height:1.2em}
.notify .getapp{grid-column:1/-1;justify-self:start;border:1px solid rgba(217,245,138,.6)}
.notify .fine{grid-column:1/-1;margin-top:0}
.notify .fine a{color:var(--link)}
.notify .done{grid-column:1/-1}
.notify.sent .fields,.notify.sent > div:first-child{display:none}

/* about */
.letter{max-width:760px}
.letter h1{font-size:clamp(38px,5.4vw,66px)}
.letter p{font-size:19px;color:#D5DED3;margin-top:20px}
.letter p.big{font-family:var(--display);font-weight:600;font-size:clamp(22px,2.6vw,30px);line-height:1.25;color:var(--ink);letter-spacing:-.01em}
.traps{display:grid;gap:14px;margin-top:22px}
.trap{border:1px solid var(--line);border-radius:22px;padding:24px 26px;background:linear-gradient(180deg,rgba(15,26,19,.9),rgba(10,18,13,.9))}
.trap h3{font-size:23px}
.letter .trap p{font-size:17px;margin-top:8px;color:#C9D3C7}
.letter .trap p.fix{margin-top:16px;padding-top:14px;border-top:1px dashed var(--line2);color:var(--ink)}
.trap .fix b{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--lime);margin-bottom:4px}
.sign{margin-top:28px;font-family:var(--display);font-weight:700;font-size:20px}
.sign span{display:block;font-family:var(--text);font-weight:500;font-size:14.5px;color:var(--muted)}
.sign span span{display:inline}

footer{border-top:1px solid var(--line);padding:26px 0 40px;color:var(--muted);font-size:14px}
footer .wrap{display:flex;gap:16px 24px;flex-wrap:wrap;align-items:center}
footer a{text-decoration:none}
footer a:hover{color:var(--ink)}
footer .sp{margin-left:auto}
.no-fab .lh-fab{display:none !important}

@media (max-width:920px){
  .hero{min-height:0;padding-top:24px}
  .hero .wrap{grid-template-columns:minmax(0,1fr)}
  .stage{order:-1;min-height:300px}
  .feature{grid-template-columns:auto minmax(0,1fr)} .feature .go{grid-column:1/-1}
  .steps,.grid3,.grid2,.does,.rr,.two,.split,.notify,.notify .fields{grid-template-columns:minmax(0,1fr)}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))} .facts div:nth-child(3){border-left:0} .facts div:nth-child(n+3){border-top:1px solid var(--line)}
  .reportshot{transform:none}
}
@media (max-width:640px){
  .tabs{gap:6px} .tab{padding:0 11px;font-size:13.5px;min-height:38px} .tab.hide-s{display:none}
  .logo b{font-size:19px}
  .apphead .top{grid-template-columns:minmax(0,1fr)} .appicon{width:104px;height:104px;border-radius:26px}
  .rr .out{grid-template-columns:minmax(0,1fr);justify-items:start}
  .menu{left:auto;right:-60px;min-width:270px}
  section{padding:54px 0}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .rv,.rise{opacity:1;transform:none}
}

/* ================= app pages (body.ap): a calmer type scale, more air, and glass islands that match the orb ================= */
:root{--isle-a:rgba(255,255,255,.075);--isle-b:rgba(255,255,255,.02);--isle-line:rgba(255,255,255,.1);--isle-hi:rgba(255,255,255,.14);--isle-shadow:0 18px 44px -22px rgba(0,0,0,.75);--isle-tint:rgba(var(--glow),.04);--isle-shine:rgba(255,255,255,.085)}
.ap{font-size:15px}
.ap .wrap{max-width:1060px}
.ap section{padding:58px 0}
.ap .apphead{padding:36px 0 18px}
.ap main::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(440px 340px at 14% 70%,rgba(var(--glow),.07),transparent 70%),radial-gradient(560px 400px at 90% 52%,rgba(79,163,106,.13),transparent 70%)}
.ap h2{font-size:clamp(23px,2.5vw,30px);letter-spacing:-.02em}
.ap .sub{font-size:16px;max-width:36em;line-height:1.6}
.ap .apphead h1{font-size:clamp(36px,4.4vw,52px)}
.ap .appicon{width:112px;height:112px;border-radius:28px}
.ap .appicon::after{border-radius:36px}
.ap .pitch{font-size:clamp(25px,3.2vw,38px);margin-top:30px;max-width:20em}
.ap .btn.lg,.ap .getapp.lg{min-height:50px;font-size:15.5px;border-radius:16px}
.ap .facts b{font-size:19px}
.ap .steps,.ap .grid3,.ap .grid2{gap:14px;margin-top:24px}
.ap .step{padding:20px 20px 20px}
.ap .step .n{font-size:58px}
.ap .step h3{font-size:18px;margin-top:8px}
.ap .step p,.ap .card p{font-size:14.5px;line-height:1.55}
.ap .card{padding:20px}
.ap .card h3{font-size:17.5px}
.ap .faq summary{font-size:15.5px;padding:15px 0}
.ap .faq p{font-size:14.5px}
.ap .band{padding:32px 30px;border-radius:26px}
.ap .rule3{font-size:clamp(15px,1.6vw,18px)}
.ap .calc{padding:22px;border-radius:22px}
.ap .calc h3{font-size:18.5px}
.ap .calc .big{font-size:clamp(42px,5vw,60px)}
.ap .gauge{width:132px;height:132px} .ap .gauge b{font-size:29px;padding-bottom:12px} .ap .gauge small{bottom:34px;font-size:9px;letter-spacing:.06em}
.ap .verdict{font-size:21px}
/* the island: glass with a rim and a shine, like the orb */
.ap .do,.ap .step,.ap .card,.ap .facts,.isle{position:relative;border:1px solid var(--isle-line);border-radius:20px;overflow:hidden;
  background:linear-gradient(155deg,var(--isle-a),var(--isle-b) 46%,var(--isle-tint));
  -webkit-backdrop-filter:blur(18px) saturate(1.25);backdrop-filter:blur(18px) saturate(1.25);
  box-shadow:inset 0 1px 0 var(--isle-hi),var(--isle-shadow);transition:border-color .3s,box-shadow .3s,transform .3s}
.ap .do::before,.ap .step::before,.ap .card::before,.isle::before{content:"";position:absolute;inset:0;background:radial-gradient(85% 70% at 16% 0%,var(--isle-shine),transparent 64%);pointer-events:none}
.ap .do:hover,.ap .do:focus,.ap .do:focus-within,.ap .step:hover,.ap .card:hover{border-color:rgba(var(--glow),.5);box-shadow:inset 0 1px 0 var(--isle-hi),var(--isle-shadow),0 0 36px -8px rgba(var(--glow),.35);transform:translateY(-2px)}
.ap .facts{border-radius:18px;margin-top:26px}
.ap .facts div{border-color:var(--isle-line)}
/* what "the rest" means: each island swaps its description for a worked example */
.ap .does{gap:14px}
.ap .do{padding:18px;cursor:default;outline:0}
.ap .do > div > b{font-size:16px;padding-right:76px}
.ap .do::after{content:"Example";position:absolute;right:12px;top:14px;font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);border:1px solid var(--isle-line);border-radius:999px;padding:2px 8px;transition:color .3s,border-color .3s,box-shadow .3s}
.ap .do:hover::after,.ap .do:focus::after,.ap .do:focus-within::after{color:var(--lime);border-color:rgba(var(--glow),.6);box-shadow:0 0 14px rgba(var(--glow),.3)}
.do .swap{display:grid;margin-top:4px}
.do .swap > *{grid-area:1/1;transition:opacity .3s ease,transform .38s cubic-bezier(.2,.7,.2,1)}
.do .base{color:var(--muted);font-size:14.5px;line-height:1.5}
.do .more{opacity:0;transform:translateY(10px);pointer-events:none}
.do:hover .base,.do:focus .base,.do:focus-within .base{opacity:0;transform:translateY(-10px)}
.do:hover .more,.do:focus .more,.do:focus-within .more{opacity:1;transform:none;pointer-events:auto}
.do .ic{transition:box-shadow .3s,transform .3s}
.do:hover .ic,.do:focus .ic{box-shadow:0 0 18px rgba(var(--glow),.45);transform:scale(1.06)}
.do .ex{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.do .ex i{font-style:normal;font-size:12.5px;font-weight:600;border:1px solid var(--isle-line);border-radius:8px;padding:3px 8px;background:var(--isle-b)}
.do .ex i.k{color:var(--lime);border-color:rgba(var(--glow),.45)}
.do .ex i.flag,.spec{color:#3D2A00;background:#FFD98A;border-color:#FFD98A}
.do .exn{font-size:13px;color:var(--muted);margin-top:6px}
.do .exn a{color:var(--link)}
.do .bars{margin-top:2px;gap:6px}
.do .bar span{margin:0;font-size:13px;color:var(--muted)} .do .bar b{display:inline;font-family:var(--text);font-size:13.5px}
.spec{display:inline-block;font-size:12.5px;font-weight:700;border-radius:999px;padding:3px 11px;margin-top:10px}
.spec[hidden]{display:none}
.specn{font-size:13.5px;color:var(--muted);margin-top:6px}
/* the report island: a glance that opens into the report itself */
.rep{margin-top:26px}
.rep-top{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:center;padding:22px 24px}
.rep-k{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.rep-stats{display:flex;gap:10px 30px;flex-wrap:wrap;margin-top:10px}
.rep-stats small{display:block;font-size:11.5px;color:var(--muted)}
.rep-stats b{display:block;font-family:var(--display);font-size:24px;line-height:1.1;font-variant-numeric:tabular-nums}
.rep-stats .tot b{color:var(--lime)}
.rep-cond{display:flex;height:8px;border-radius:6px;overflow:hidden;margin-top:14px;max-width:420px;gap:2px}
.rep-cond i{display:block;border-radius:3px}
.rep-body{position:relative;display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s cubic-bezier(.2,.7,.2,1)}
.rep[data-open="true"] .rep-body{grid-template-rows:1fr}
.rep-body > div{overflow:hidden;min-height:0}
.rep-seg{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:4px 24px 16px}
.rep-seg span{font-size:13.5px;color:var(--muted);flex:1 1 260px;min-width:0}
.rep{--pa:#163A26;--pa2:#C6EE5A}
.rep.brand{--pa:#1D4E89;--pa2:#F2B544}
.paper{--pf:var(--display);margin:0 24px 20px;background:#FCFDFB;color:#17211B;border-radius:14px;overflow:hidden;font-size:13.5px;line-height:1.45;box-shadow:0 22px 50px -22px rgba(0,0,0,.65);transition:box-shadow .3s}
.paper.brand{--pf:Georgia,'Times New Roman',serif}
.paper .p-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;padding:18px 20px;background:var(--pa);color:#fff;transition:background .4s}
.paper .p-head b{display:block;font-family:var(--pf);font-size:17px;letter-spacing:0}
.paper .p-head span{display:block;font-size:12px;opacity:.82;overflow-wrap:anywhere}
.paper .p-doc{text-align:right}
.paper .p-logo{width:46px;height:46px;border-radius:12px;background:rgba(255,255,255,.12);display:grid;place-items:center;font-family:var(--pf);font-weight:700;font-size:17px;color:var(--pa2)}
.paper .p-head .lm{display:grid;grid-template-columns:repeat(3,7px);gap:2px;opacity:1}
.paper .lm i{width:7px;height:7px;border-radius:2px;background:rgba(255,255,255,.16)} .paper .lm i.on{background:var(--pa2)}
.paper .p-sum{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid #E1E6DF}
.paper .p-sum div{padding:13px 20px;border-left:1px solid #E1E6DF} .paper .p-sum div:first-child{border-left:0}
.paper .p-sum small{display:block;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#5E6A62}
.paper .p-sum b{display:block;font-family:var(--pf);font-size:20px;color:var(--pa);font-variant-numeric:tabular-nums}
.paper .p-scroll{overflow:auto;max-height:430px}
.paper table{width:100%;border-collapse:collapse;min-width:700px}
.paper th{position:sticky;top:0;z-index:1;background:#F1F4EF;text-align:left;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#5E6A62;padding:9px 12px;white-space:nowrap}
.paper td{padding:10px 12px;border-top:1px solid #E8ECE6;vertical-align:middle}
.paper tr.it{cursor:pointer} .paper tr.it:hover td,.paper tr.it:focus td{background:#F3F7F1} .paper tr.it:focus{outline:0}
.paper .nm{font-weight:600} .paper .rm{display:block;font-size:12px;color:#5E6A62}
.paper .cd{display:inline-block;font-size:11.5px;font-weight:700;border-radius:6px;padding:2px 8px;color:#06100A}
.paper .cd.g{background:#5FCF8A} .paper .cd.y{background:#F2CB3D} .paper .cd.o{background:#F59A4A} .paper .cd.r{background:#F0627A}
.paper .pb{display:inline-block;width:62px;height:7px;border-radius:5px;background:#E3E8E1;vertical-align:middle;margin-right:8px;overflow:hidden}
.paper .pb i{display:block;height:100%;border-radius:5px}
.paper .call{display:inline-block;font-weight:700;font-size:12px;border-radius:999px;padding:3px 10px;white-space:nowrap}
.paper .call.re{background:#DDF3E5;color:#14653A} .paper .call.rp{background:#FBE1E6;color:#A3213B}
.paper .sx{display:inline-block;margin-left:6px;font-size:11px;font-weight:700;color:#5A3A00;background:#FFE3A6;border-radius:999px;padding:2px 8px;white-space:nowrap}
.paper tr.dt td{background:#F7F9F5;font-size:13px;color:#33413A;padding-top:12px;padding-bottom:14px}
.paper .n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.paper .p-foot{display:flex;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;padding:12px 20px;font-size:11.5px;color:#5E6A62;border-top:1px solid #E1E6DF}
@media (max-width:920px){.rep-top{grid-template-columns:minmax(0,1fr)} .paper .p-head{grid-template-columns:auto minmax(0,1fr)} .paper .p-doc{grid-column:1/-1;text-align:left} .paper .p-sum{grid-template-columns:repeat(2,minmax(0,1fr))} .paper .p-sum div:nth-child(3){border-left:0} .paper .p-sum div:nth-child(n+3){border-top:1px solid #E1E6DF}}
@media (max-width:640px){.ap section{padding:44px 0} .rep-top,.rep-seg{padding-left:16px;padding-right:16px} .paper{margin:0 12px 16px}}

/* ================= light look (every store page): neutral white, forest green for anything that was lime text ================= */
:root[data-look="light"]{--bg:#F8F8F7;--surface:#FFFFFF;--raise:#FFFFFF;--line:#E3E5E1;--line2:#CBD0CA;--ink:#141A16;--muted:#59635C;
  --lime:#1F6B3F;--soft:#17502F;--link:#1F6B3F;--glow:31,107,63;--g:#3DB36E;--y:#E0B21C;--o:#EE8C3A;--r:#E4567A;--rs:#1E9488;color-scheme:light;
  --isle-a:rgba(255,255,255,.96);--isle-b:rgba(255,255,255,.78);--isle-line:rgba(20,26,22,.11);--isle-hi:rgba(255,255,255,1);--isle-shadow:0 16px 40px -20px rgba(20,40,28,.3);--isle-tint:rgba(255,255,255,0);--isle-shine:rgba(255,255,255,0);
  --lh-bg:#F7F7F6;--lh-sunk:#EFF0EE;--lh-line:#E2E5E0}
:root[data-look="light"] body{background:var(--bg)}
:root[data-look="light"] .ap main::before{background:none}
:root[data-look="light"] #intro{background:var(--bg)}
:root[data-look="light"] #wash{mix-blend-mode:multiply;background:radial-gradient(closest-side,rgba(198,238,90,.5),rgba(79,163,106,.22) 40%,transparent 72%)}
:root[data-look="light"] .stage::before{background:radial-gradient(closest-side,rgba(198,238,90,.4),rgba(79,163,106,.12) 46%,transparent 72%)}
:root[data-look="light"] .kicker::before{box-shadow:none}
:root[data-look="light"] .appcard,:root[data-look="light"] .feature{background:linear-gradient(150deg,rgba(61,179,110,.14),#fff 58%);border-color:var(--line2);box-shadow:0 16px 40px -22px rgba(20,40,28,.3)}
:root[data-look="light"] .appcard:hover,:root[data-look="light"] .feature:hover{border-color:var(--lime);box-shadow:0 20px 46px -20px rgba(20,40,28,.4)}
:root[data-look="light"] .appcard p{color:var(--muted)}
:root[data-look="light"] .appcard .tag,:root[data-look="light"] .feature .tag{color:#fff}
:root[data-look="light"] .appcard .tag.soon{color:var(--lime)}
:root[data-look="light"] .appcard img,:root[data-look="light"] .feature img{box-shadow:0 12px 28px -12px rgba(20,40,28,.45)}
:root[data-look="light"] .letter p{color:#2E3B33}
:root[data-look="light"] .letter p.big{color:var(--ink)}
:root[data-look="light"] .letter .trap p{color:#3B4840}
:root[data-look="light"] .letter .trap p.fix{color:var(--ink)}
:root[data-look="light"] .trap{background:#fff;box-shadow:0 14px 36px -22px rgba(20,40,28,.28)}
:root[data-look="light"] .card{background:#fff}
:root[data-look="light"] .notify input,:root[data-look="light"] .notify select{background:#fff}
:root[data-look="light"] .notify .err{color:#B3261E}
:root[data-look="light"] .intro-skip{background:#fff}
:root[data-look="light"] .nav{background:rgba(248,248,247,.82);border-bottom-color:var(--line)}
:root[data-look="light"] .tab{background:#fff;border-color:var(--line2);box-shadow:0 1px 0 rgba(20,26,22,.04)}
:root[data-look="light"] .tab:hover,:root[data-look="light"] .tab[aria-expanded="true"]{border-color:var(--lime);box-shadow:0 0 0 3px rgba(31,107,63,.1)}
:root[data-look="light"] .nav .tab.lit,:root[data-look="light"] .nav .getapp.lit{animation:none}
:root[data-look="light"] .menu{background:#fff;border-color:var(--line2);box-shadow:0 24px 60px -20px rgba(20,40,28,.35)}
:root[data-look="light"] .menu em,:root[data-look="light"] .note{color:#fff}
:root[data-look="light"] .note.pts{color:var(--lime)}
:root[data-look="light"] .btn,:root[data-look="light"] .opt{background:#fff;border-color:var(--line2)}
:root[data-look="light"] .opt[aria-pressed="true"]{background:rgba(31,107,63,.08);box-shadow:none}
:root[data-look="light"] .neon,:root[data-look="light"] .calc .big,:root[data-look="light"] .rule3 b,:root[data-look="light"] .logo svg{text-shadow:none;filter:none}
:root[data-look="light"] .appicon{box-shadow:0 0 44px rgba(31,107,63,.22),0 16px 36px -12px rgba(20,40,28,.35)}
:root[data-look="light"] .step .n{-webkit-text-stroke-color:rgba(31,107,63,.5);text-shadow:none}
:root[data-look="light"] .rr .out{background:linear-gradient(160deg,rgba(61,179,110,.14),#fff 60%)}
:root[data-look="light"] .rr .out.no{background:linear-gradient(160deg,rgba(228,86,122,.13),#fff 60%)}
:root[data-look="light"] .gauge .tr{stroke:rgba(20,26,22,.09)}
:root[data-look="light"] .gauge .vl{filter:none}
:root[data-look="light"] .calc,:root[data-look="light"] .notify{background:linear-gradient(165deg,rgba(61,179,110,.12),#fff 58%);border-color:var(--line2)}
:root[data-look="light"] .meter{background:rgba(20,26,22,.08)}
:root[data-look="light"] .meter i{box-shadow:none}
:root[data-look="light"] .band{background:radial-gradient(600px 300px at 85% 0%,rgba(198,238,90,.35),transparent 70%),linear-gradient(135deg,#EAF4EC,#fff)}
:root[data-look="light"] .paper{box-shadow:0 22px 50px -24px rgba(20,40,28,.4),0 0 0 1px var(--line)}
:root[data-look="light"] .do .ex i.flag,:root[data-look="light"] .spec{background:#FFE3A6;border-color:#FFE3A6}

/* ---------- pricing: the four rules, and the bar that shows the limit and what runs past it ---------- */
.rules{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:22px}
.rule{padding:18px 18px 16px}
.rule small{display:block;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.rule b{display:block;font-family:var(--display);font-size:38px;line-height:1.1;letter-spacing:-.03em;color:var(--lime);margin-top:6px}
.rule p{font-size:14px;color:var(--muted);margin-top:6px;line-height:1.5}
.rule.over b{color:var(--over)}
:root{--over:#F5B544}
:root[data-look="light"]{--over:#B26A00}
.tier{position:relative;margin-top:2px}
.tier-track{position:relative;height:12px;border-radius:8px;background:rgba(128,140,132,.18);overflow:hidden}
.tier-track i{position:absolute;top:0;bottom:0;display:block;transition:width .3s cubic-bezier(.2,.7,.2,1)}
.tier-track .in{left:0;border-radius:8px 0 0 8px;background:linear-gradient(90deg,#4FA36A,#C6EE5A)}
.tier-track .ov{background:repeating-linear-gradient(135deg,var(--over) 0 6px,rgba(245,181,68,.55) 6px 10px)}
.tier-mark{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--ink);opacity:.75;transform:translateX(-1px)}
.tier-ends{position:relative;display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted);margin-top:5px;height:16px}
.tier-ends .at{position:absolute;transform:translateX(-50%);white-space:nowrap;color:var(--ink);font-weight:600}
.tier-ends span span{font:inherit;color:inherit}
.tier.past .tier-ends .at{color:var(--over)}
.note.over{background:var(--over);color:#1E1400;animation:over-in .35s cubic-bezier(.2,1.4,.4,1)}
@keyframes over-in{from{opacity:0;transform:translateY(6px) scale(.96)}to{opacity:1;transform:none}}
.calc.cap{border-color:var(--lime)}
@media (max-width:920px){.rules{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.rules{grid-template-columns:minmax(0,1fr)}}

/* the example report: item pictures, what sets it apart, and the ways to save it */
.rep .ph{display:block;flex:none;width:38px;height:38px;border-radius:9px}
.rep-thumbs{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px}
.rep-thumbs .ph{width:34px;height:34px;border-radius:9px;box-shadow:0 0 0 1px var(--isle-line)}
.paper .itw{display:flex;gap:10px;align-items:center}
.paper .dtl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:start}
.paper .dtl p{margin:0 0 5px}
.paper .shots{display:flex;gap:8px}
.paper .shots figure{margin:0;text-align:center;font-size:10.5px;color:#5E6A62}
.paper .shots .ph{width:66px;height:66px;border-radius:12px;margin-bottom:3px}
.paper .p-leg{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;padding:9px 20px;border-bottom:1px solid #E1E6DF;font-size:11.5px;color:#5E6A62}
.paper .p-leg .cd{font-size:10.5px;padding:1px 7px}
.rep-why{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0 24px 16px;margin:0}
.rep-why li{position:relative;font-size:13px;border:1px solid var(--isle-line);border-radius:999px;padding:5px 12px 5px 26px;background:var(--isle-b)}
.rep-why li::before{content:"";position:absolute;left:11px;top:50%;width:7px;height:7px;border-radius:50%;background:var(--lime);transform:translateY(-50%);box-shadow:0 0 8px rgba(var(--glow),.6)}
.rep-dl{display:flex;flex-wrap:wrap;gap:10px;padding:0 24px 22px}
.rep-dl-h{flex:1 1 100%;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.rep-dl .dl{flex:1 1 190px;display:flex;gap:12px;align-items:center;border:1px solid var(--isle-line);border-radius:14px;padding:11px 14px;background:var(--isle-b)}
.rep-dl .dl b{flex:none;font-family:var(--display);font-size:12.5px;letter-spacing:.05em;color:var(--lime);border:1px solid rgba(var(--glow),.5);border-radius:8px;padding:5px 8px}
.rep-dl .dl span{font-size:13.5px;color:var(--muted)}
@media (max-width:640px){.rep-why,.rep-dl{padding-left:16px;padding-right:16px} .paper .dtl{grid-template-columns:minmax(0,1fr)}}

/* ---------- hoxloc: the filing example and the space slider ---------- */
.rules.r3{grid-template-columns:repeat(3,minmax(0,1fr))}
.rules.r3 .rule b{font-size:clamp(24px,2.6vw,32px)}
.hx{display:grid;grid-template-columns:minmax(0,.8fr) auto minmax(0,1.5fr);gap:22px;align-items:center;padding:22px;margin-top:26px;min-height:330px}
.hx small,.hxp small{display:block;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.hx-drop{position:relative;height:150px;margin-top:10px;border:1.5px dashed rgba(var(--glow),.4);border-radius:16px;display:grid;place-items:center;overflow:hidden}
.hx-raw{position:absolute;max-width:86%;font-size:13.5px;font-weight:600;padding:9px 13px;border-radius:10px;border:1px solid var(--isle-line);background:var(--isle-b);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transform:translateY(-34px) rotate(-5deg);transition:opacity .35s,transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .3s,color .3s,border-color .3s}
.hx-raw.in{opacity:1;transform:none}
.hx-raw.read{color:var(--lime);border-color:rgba(var(--glow),.6);box-shadow:0 0 24px rgba(var(--glow),.35)}
.hx-raw.gone{opacity:0;transform:translateX(70px) scale(.8)}
.hx-mid{display:grid;justify-items:center;gap:8px;min-width:76px}
.hx-jobs{display:grid;gap:10px;margin-top:10px}
.hx-job{border:1px solid var(--isle-line);border-radius:14px;padding:11px 13px;background:var(--isle-b);transition:border-color .3s,box-shadow .4s}
.hx-job.hit{border-color:var(--lime);box-shadow:0 0 30px rgba(var(--glow),.28)}
.hx-job b{font-family:var(--display);font-size:15px}
.hx-job em{float:right;font-style:normal;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.hx-list{display:grid;gap:5px;margin-top:7px;min-height:58px;align-content:start}
.hx-file{display:flex;gap:8px;align-items:center;justify-content:space-between;font-size:13px;opacity:0;transform:translateX(-18px);transition:opacity .4s,transform .45s cubic-bezier(.2,.7,.2,1)}
.hx-file.in{opacity:1;transform:none}
.hx-file span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.hx-file i{font-style:normal;font-size:11.5px;font-weight:700;color:var(--lime);border:1px solid rgba(var(--glow),.45);border-radius:999px;padding:1px 8px;white-space:nowrap;flex-shrink:0}
.hxp{padding:22px;margin-top:16px}
.hxp-top{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.hxp-top b{display:block;font-family:var(--display);font-size:clamp(26px,3.6vw,44px);line-height:1.1;letter-spacing:-.03em;margin-top:4px;font-variant-numeric:tabular-nums}
.hxp-top b.lime{color:var(--lime);text-shadow:0 0 26px rgba(var(--glow),.4)}
.hxp input[type=range]{width:100%;margin-top:18px;height:30px;accent-color:var(--lime);cursor:pointer}
.hxp-ends{display:grid;grid-template-columns:1fr auto 1fr;font-size:12px;color:var(--muted)} .hxp-ends span:last-child{text-align:right}
.hxp-how{color:var(--muted);font-size:14.5px;margin-top:10px;min-height:1.5em}
:root[data-look="light"] .hx-file i{color:#1F6B3F;border-color:#9CC7A8}
:root[data-look="light"] .hx-raw.read{color:#1F6B3F}
@media (max-width:820px){.hx{grid-template-columns:minmax(0,1fr);gap:14px}.hx-mid{grid-auto-flow:column;justify-content:center;align-items:center}.hx-drop{height:96px}.rules.r3{grid-template-columns:minmax(0,1fr)}.hxp-top{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.hxp-top div:last-child{grid-column:1/-1}}
@media (prefers-reduced-motion:reduce){.hx-raw,.hx-file,.hx-job{transition:none}}

/* ---------- hoxloc: the vault ---------- */
.vault{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:30px;align-items:center;padding:26px;margin-top:22px}
.vault small{display:block;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.v-side{display:grid;grid-template-columns:auto minmax(0,1fr);gap:26px;align-items:start}
.v-dots{display:flex;gap:10px;margin:10px 0 12px}
.v-dots i{width:15px;height:15px;border-radius:50%;border:2px solid rgba(var(--glow),.5);transition:background .15s,box-shadow .15s}
.v-dots i.on{background:var(--lime);box-shadow:0 0 14px rgba(var(--glow),.7)}
.v-keys{display:grid;grid-template-columns:repeat(3,54px);gap:8px}
.v-key{appearance:none;height:48px;border-radius:13px;border:1px solid var(--isle-line);background:var(--isle-b);color:inherit;font:600 18px var(--display);cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .1s}
.v-key:hover,.v-key:focus-visible{border-color:var(--lime);box-shadow:0 0 16px rgba(var(--glow),.3);outline:0}.v-key:active{transform:scale(.95)}
.v-key.alt{font:600 12.5px var(--body,inherit);color:var(--muted)}
.v-pinbox .fine{margin-top:10px;max-width:180px}
.v-sw{display:flex;align-items:center;gap:10px;margin-top:9px;cursor:pointer;font-size:14.5px}
.v-sw input{position:absolute;opacity:0;width:1px;height:1px}
.v-sw span{width:38px;height:22px;border-radius:999px;background:rgba(127,127,127,.28);position:relative;flex-shrink:0;transition:background .2s}
.v-sw span::after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#EEF4EA;transition:transform .2s}
.v-sw input:checked + span{background:var(--lime)}.v-sw input:checked + span::after{transform:translateX(16px);background:#0B140D}
.v-sw input:focus-visible + span{box-shadow:0 0 0 3px rgba(var(--glow),.45)}.v-sw input:disabled + span{opacity:.6}
.v-sw b{font-weight:600}.v-sw em{font-style:normal;color:var(--muted);font-size:13px;margin-left:auto}
.v-seg{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.v-seg button{appearance:none;border:1px solid var(--isle-line);background:transparent;color:inherit;border-radius:999px;padding:7px 13px;font:600 13.5px inherit;cursor:pointer}
.v-seg button.on{background:var(--lime);border-color:var(--lime);color:#0B140D}
.v-sum{margin-top:14px;font-size:14px;color:var(--lime);min-height:2.8em}
:root[data-look="light"] .v-sum{color:#1F6B3F} :root[data-look="light"] .v-sw span::after{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3)}
@media (max-width:980px){.vault{grid-template-columns:minmax(0,1fr)}.v-stage{max-width:300px}}
@media (max-width:560px){.v-side{grid-template-columns:minmax(0,1fr)}.v-keys{grid-template-columns:repeat(3,minmax(0,1fr))}.v-pinbox .fine{max-width:none}}
@media (prefers-reduced-motion:reduce){.v-gate,.v-mark,.v-grid i,.v-seam{transition:none!important}.v-scan,.v-orbit,.vault.open .v-grid i{animation:none!important}}

/* hoxloc: how your files are protected */
.rules.sec .rule b{font-size:clamp(19px,1.9vw,23px);letter-spacing:-.01em;line-height:1.2}

/* ---------- the opening: the tabs and Get the app light up brightly enough to be seen, in both looks ---------- */
.nav .tab.lit{animation:tab-lit2 1.7s cubic-bezier(.2,.7,.2,1) both}
.nav .getapp.lit{animation:getapp-lit 1.9s cubic-bezier(.2,.7,.2,1) both}
@keyframes tab-lit2{0%{border-color:transparent;box-shadow:0 0 0 rgba(var(--glow),0);transform:scale(.94)}
  22%,40%{border-color:#E4F9A6;box-shadow:0 0 0 2px rgba(217,245,138,.55),0 0 44px rgba(var(--glow),1),0 0 90px rgba(var(--glow),.55),inset 0 0 22px rgba(var(--glow),.5);transform:scale(1.07)}
  100%{border-color:rgba(var(--glow),.26);box-shadow:inset 0 1px 0 rgba(217,245,138,.12);transform:none}}
@keyframes getapp-lit{0%{opacity:.25;transform:scale(.9);box-shadow:0 0 0 rgba(var(--glow),0)}
  20%,42%{opacity:1;transform:scale(1.13);border-color:#F4FFDE;box-shadow:0 0 0 3px rgba(228,249,166,.75),0 0 56px rgba(var(--glow),1),0 0 130px rgba(var(--glow),.7),inset 0 0 26px rgba(228,249,166,.85)}
  60%{transform:scale(.98)}
  100%{opacity:1;transform:none;box-shadow:inset 0 0 14px rgba(217,245,138,.4),inset 0 -8px 16px rgba(3,10,6,.7),0 0 18px rgba(var(--glow),.35)}}
:root[data-look="light"] .nav .tab.lit{animation:tab-lit-day 1.7s cubic-bezier(.2,.7,.2,1) both}
:root[data-look="light"] .nav .getapp.lit{animation:getapp-lit-day 1.9s cubic-bezier(.2,.7,.2,1) both}
@keyframes tab-lit-day{0%{border-color:transparent;box-shadow:none;transform:scale(.94)}
  22%,40%{border-color:#1F6B3F;box-shadow:0 0 0 3px rgba(31,107,63,.3),0 10px 30px rgba(31,107,63,.4);transform:scale(1.07)}
  100%{border-color:var(--line2);box-shadow:0 1px 0 rgba(20,26,22,.04);transform:none}}
@keyframes getapp-lit-day{0%{opacity:.25;transform:scale(.9)}
  20%,42%{opacity:1;transform:scale(1.13);box-shadow:0 0 0 4px rgba(31,107,63,.4),0 0 0 10px rgba(198,238,90,.55),0 14px 40px rgba(31,107,63,.55)}
  60%{transform:scale(.98)} 100%{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.nav .tab.lit,.nav .getapp.lit,:root[data-look="light"] .nav .tab.lit,:root[data-look="light"] .nav .getapp.lit{animation:none}}
/* before it lights, Get the app must still be readable in the light look; once lit it takes its real face */
.nav.dim .getapp.lit{background:radial-gradient(120% 160% at 22% 0%,#3C9A62 0%,#1B4A31 46%,#07140C 100%)}
:root[data-look="light"] .nav.dim .getapp:not(.lit){color:#1F6B3F}
:root[data-look="light"] .nav.dim .getapp:not(.lit) .l i{background:rgba(31,107,63,.16)}
:root[data-look="light"] .nav.dim .getapp:not(.lit) .l i.on{background:#1F6B3F;box-shadow:none}

/* the vault: two doors that part down the middle and are gone, and a clean lit core behind them */
.v-stage{position:relative;width:100%;max-width:360px;aspect-ratio:1;margin:0 auto;border-radius:30px;overflow:hidden;background:#020604;border:1px solid rgba(198,238,90,.34);box-shadow:0 22px 50px -18px rgba(0,0,0,.7),inset 0 0 0 6px #050B08,inset 0 0 0 7px rgba(198,238,90,.14)}
.v-core{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(circle at 50% 50%,rgba(198,238,90,.2),rgba(31,107,63,.1) 38%,transparent 66%)}
.v-orbit{position:absolute;width:74%;aspect-ratio:1;border-radius:50%;border:1px dashed rgba(198,238,90,.32);animation:ring-turn 40s linear infinite}
.v-orbit.b{width:92%;border-style:solid;border-color:rgba(198,238,90,.1);border-top-color:rgba(198,238,90,.5);animation-duration:14s;animation-direction:reverse}
.v-grid{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:11%;width:46%}
.v-grid i{aspect-ratio:1;border-radius:26%;border:1px solid rgba(198,238,90,.55);background:linear-gradient(150deg,rgba(198,238,90,.3),rgba(198,238,90,.05) 60%);box-shadow:0 0 18px rgba(198,238,90,.22),inset 0 1px 0 rgba(255,255,255,.25);opacity:0;transform:scale(.5);transition:opacity .45s,transform .55s cubic-bezier(.2,.9,.3,1.3)}
.v-grid i:nth-child(5){background:#C6EE5A;border-color:#E4F9A6;box-shadow:0 0 30px rgba(198,238,90,.85)}
.vault.open .v-grid i{opacity:1;transform:none;transition-delay:calc(.55s + var(--n) * .06s);animation:v-pulse 3.6s ease-in-out calc(1.6s + var(--n) * .25s) infinite}
@keyframes v-pulse{0%,100%{filter:none}50%{filter:brightness(1.5)}}
.v-gate{position:absolute;top:0;bottom:0;width:50.5%;background:repeating-linear-gradient(0deg,rgba(255,255,255,.028) 0 1px,transparent 1px 9px),linear-gradient(180deg,#12261A,#0A1710 55%,#07100B);transition:transform .95s cubic-bezier(.7,0,.2,1),opacity .45s ease .6s}
.v-l{left:0;border-right:1px solid rgba(198,238,90,.25);box-shadow:inset -18px 0 26px -18px rgba(198,238,90,.22)} .v-r{right:0;border-left:1px solid rgba(198,238,90,.25);box-shadow:inset 18px 0 26px -18px rgba(198,238,90,.22)}
.vault.open .v-l{transform:translateX(-101%);opacity:0} .vault.open .v-r{transform:translateX(101%);opacity:0}
.v-seam{position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:linear-gradient(180deg,transparent,rgba(198,238,90,.75) 18%,rgba(198,238,90,.75) 82%,transparent);box-shadow:0 0 12px rgba(198,238,90,.5);transition:opacity .4s,box-shadow .3s,width .3s,margin .3s}
.vault.spin .v-seam{width:4px;margin-left:-2px;box-shadow:0 0 30px 4px rgba(198,238,90,.9)} .vault.open .v-seam{opacity:0}
.v-scan{position:absolute;left:0;right:0;top:-12%;height:12%;background:linear-gradient(180deg,transparent,rgba(198,238,90,.34));border-bottom:1px solid rgba(228,249,166,.9);opacity:0}
.vault.spin:not(.open) .v-scan{opacity:1;animation:v-scan .8s linear both}
@keyframes v-scan{to{top:100%}}
.v-mark{position:absolute;left:50%;top:50%;width:30%;aspect-ratio:1;margin:-15% 0 0 -15%;border-radius:50%;background:#050B08;transition:transform .85s cubic-bezier(.5,0,.2,1),opacity .35s ease .5s}
.v-mark svg{display:block;width:100%;height:100%}
.v-mark circle{fill:none;stroke:#C6EE5A;stroke-width:3}
.v-mark .a{stroke-dasharray:46 23;stroke-linecap:round;opacity:.9} .v-mark .b{stroke-width:1.5;opacity:.5;stroke-dasharray:3 7} .v-mark .c{fill:#C6EE5A;stroke:none;transition:r .4s}
.vault.spin .v-mark{transform:rotate(270deg);box-shadow:0 0 34px rgba(198,238,90,.6)} .vault.open .v-mark{transform:rotate(270deg) scale(.2);opacity:0}
.v-cn{position:absolute;width:20px;height:20px;border:2px solid rgba(198,238,90,.7);pointer-events:none}
.v-cn.tl{left:14px;top:14px;border-right:0;border-bottom:0;border-radius:8px 0 0 0}.v-cn.tr{right:14px;top:14px;border-left:0;border-bottom:0;border-radius:0 8px 0 0}
.v-cn.bl{left:14px;bottom:14px;border-right:0;border-top:0;border-radius:0 0 0 8px}.v-cn.br{right:14px;bottom:14px;border-left:0;border-top:0;border-radius:0 0 8px 0}
@media (max-width:980px){.v-stage{max-width:300px}}

/* ---------- front page: every app is the same square tile ---------- */
.appgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.appgrid .appcard{aspect-ratio:1;min-height:0;padding:24px;border-radius:28px;gap:0;align-items:flex-start}
.appgrid .appcard img{width:76px;height:76px;border-radius:20px}
.appgrid .appcard .tag{margin-top:16px}
.appgrid .appcard h2{font-size:clamp(26px,2.6vw,34px);margin-top:8px}
.appgrid .appcard p{font-size:15px;margin-top:10px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.appgrid .appcard .go{font-size:16.5px;padding-top:12px}
@media (max-width:920px){.appgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
@media (max-width:560px){.appgrid .appcard{padding:16px;border-radius:22px}.appgrid .appcard img{width:52px;height:52px;border-radius:15px}.appgrid .appcard .tag{margin-top:12px;font-size:9.5px;padding:2px 8px}
  .appgrid .appcard h2{font-size:21px}.appgrid .appcard .kind{font-size:12.5px}.appgrid .appcard p,.appgrid .appcard .go{display:none}}
/* ---------- opening an app: the page you leave fades, the app page drops in from the top ---------- */
html.leaving body{opacity:0;transform:translateY(-10px) scale(.992);transition:opacity .24s ease,transform .24s ease}
.ap main{animation:page-fade .4s ease both}
@keyframes page-fade{from{opacity:0}to{opacity:1}}
.ap .apphead .wrap > *{animation:drop-in .65s cubic-bezier(.2,.8,.2,1) both}
.ap .apphead .wrap > *:nth-child(1){animation-delay:.05s}.ap .apphead .wrap > *:nth-child(2){animation-delay:.14s}.ap .apphead .wrap > *:nth-child(3){animation-delay:.23s}
.ap .apphead .wrap > *:nth-child(4){animation-delay:.32s}.ap .apphead .wrap > *:nth-child(5){animation-delay:.41s}.ap .apphead .wrap > *:nth-child(n+6){animation-delay:.5s}
@keyframes drop-in{from{opacity:0;transform:translateY(-34px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ap main,.ap .apphead .wrap > *{animation:none}html.leaving body{transition:none;opacity:1;transform:none}}

/* hoxloc security: a moving symbol on each fact, a still one on each thing we add */
.sec-ic{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;margin-bottom:13px;color:var(--lime);background:rgba(var(--glow),.1);border:1px solid rgba(var(--glow),.38);box-shadow:0 0 22px rgba(var(--glow),.14)}
.sec-ic svg{width:31px;height:31px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.sec-ic .dot,.sec-ic .blip{fill:currentColor;stroke:none}
.sec-ic .draw{stroke-dasharray:25;stroke-dashoffset:25;animation:sec-draw 3.8s ease-in-out infinite}
@keyframes sec-draw{0%,12%{stroke-dashoffset:25}38%,88%{stroke-dashoffset:0}100%{stroke-dashoffset:25}}
.sec-ic .shackle{animation:sec-lock 3.8s ease-in-out infinite}
@keyframes sec-lock{0%,14%{transform:translateY(-6px)}34%,90%{transform:none}100%{transform:translateY(-6px)}}
.sec-ic .dot{animation:sec-glow 3.8s ease-in-out infinite}
@keyframes sec-glow{0%,30%{opacity:.25}45%,90%{opacity:1}100%{opacity:.25}}
.sec-ic .flow{stroke-dasharray:3 5;animation:sec-flow .9s linear infinite}
@keyframes sec-flow{to{stroke-dashoffset:-16}}
.sec-ic .sweep{transform-origin:24px 24px;animation:ring-turn 3.2s linear infinite}
.sec-ic .blip{animation:sec-blip 3.2s linear infinite}
@keyframes sec-blip{0%,8%{opacity:1}40%,100%{opacity:.12}}
.card .sec-ic{width:46px;height:46px;border-radius:14px} .card .sec-ic svg{width:26px;height:26px}
.isle:hover .sec-ic,.card:hover .sec-ic{box-shadow:0 0 30px rgba(var(--glow),.4)}
@media (prefers-reduced-motion:reduce){.sec-ic *{animation:none!important}.sec-ic .draw{stroke-dashoffset:0}}

/* ---------- fasti: the day board ---------- */
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:22px}
.fb{padding:20px;margin-top:26px}
.fb small{display:block;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.fb-top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px;align-items:center}
.fb-top b{font-family:var(--display);font-size:19px}
.fb-leg{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.fb-leg i{font-style:normal;font-size:11.5px;font-weight:700;border-radius:999px;padding:2px 9px;border:1px solid}
.fb-orb{display:grid;grid-auto-flow:column;align-items:center;gap:10px}
.fb-grid{margin-top:16px;display:grid;gap:8px}
.fb-hours,.fb-row{display:grid;grid-template-columns:92px minmax(0,1fr);align-items:center;gap:10px}
.fb-hours{grid-template-columns:92px repeat(5,minmax(0,1fr)) 0}
.fb-hours em{font-style:normal;font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums;transform:translateX(-50%);width:0;white-space:nowrap}
.fb-row > span{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fb-lane{position:relative;height:42px;border-radius:11px;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(10% - 1px),var(--isle-line) calc(10% - 1px),var(--isle-line) 10%),var(--isle-b);border:1px solid var(--isle-line);overflow:hidden}
.fb-b{position:absolute;top:4px;bottom:4px;margin-left:2px;border-radius:8px;padding:0 9px;display:flex;align-items:center;font-size:12.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:1px solid;opacity:0;transform:translateY(-22px) scale(.92);transition:opacity .35s,transform .5s cubic-bezier(.2,.9,.3,1.25),box-shadow .6s}
.fb-b.in{opacity:1;transform:none;box-shadow:0 0 0 rgba(0,0,0,0)}
.fb-b.k-job,.fb-leg .k-job{color:#0B140D;background:#C6EE5A;border-color:#E4F9A6}
.fb-b.k-appt,.fb-leg .k-appt{color:#04201F;background:#6FD6D0;border-color:#A9EAE6}
.fb-b.k-equip,.fb-leg .k-equip{color:#3D2A00;background:#FFD98A;border-color:#FFE8B5}
.fb-b.k-sub,.fb-leg .k-sub{color:#EEF4EA;background:#2C6B45;border-color:#4FA36A}
.fb-note{margin-top:12px;font-size:14px;color:var(--lime);min-height:1.5em}
:root[data-look="light"] .fb-note{color:#1F6B3F}
@media (max-width:920px){.grid4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.fb-top{grid-template-columns:minmax(0,1fr) auto}.fb-leg{grid-column:1/-1;grid-row:2;justify-content:flex-start}.fb-hours,.fb-row{grid-template-columns:58px minmax(0,1fr)}.fb-hours{grid-template-columns:58px repeat(5,minmax(0,1fr)) 0}.fb-row > span{font-size:11.5px}.fb-b{font-size:10.5px;padding:0 5px}.fb-lane{height:38px}}
@media (prefers-reduced-motion:reduce){.fb-b{transition:none}}

/* four apps: four across on a wide screen, two by two below that */
@media (min-width:1101px){.appgrid.c4{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.appgrid.c4 .appcard{padding:20px;border-radius:26px}.appgrid.c4 .appcard img{width:62px;height:62px;border-radius:17px}
  .appgrid.c4 .appcard .tag{margin-top:13px}.appgrid.c4 .appcard h2{font-size:28px;margin-top:6px}.appgrid.c4 .appcard p{font-size:13.5px;margin-top:8px;-webkit-line-clamp:2}.appgrid.c4 .appcard .go{font-size:15px;padding-top:8px}}
@media (max-width:1100px){.appgrid.c4{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- islands open when you click them (every app page): the words stay, a picture or example opens underneath ---------- */
.ap .do{cursor:pointer}
.ap .do::after{content:"+";right:14px;top:12px;width:26px;height:26px;padding:0;display:grid;place-items:center;font-size:17px;font-weight:600;letter-spacing:0;line-height:1;color:var(--lime);border-color:rgba(var(--glow),.45);transition:transform .35s cubic-bezier(.2,.7,.2,1),background .3s,color .3s}
.ap .do.open::after{content:"+";transform:rotate(45deg);background:var(--lime);color:#0B140D;border-color:var(--lime)}
.ap .do > div > b{padding-right:40px}
.do .swap{display:block}
.do .swap > *{transition:none}
.do:hover .base,.do:focus .base,.do:focus-within .base{opacity:1;transform:none}
.do .more,.do:hover .more,.do:focus .more,.do:focus-within .more{opacity:1;transform:none;pointer-events:auto;display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.2,.7,.2,1)}
.do .more > .mi{overflow:hidden;min-height:0;opacity:0;transition:opacity .3s}
.do.open .more{grid-template-rows:1fr}
.do.open .more > .mi{opacity:1;transition-delay:.12s;padding-top:12px}
.ap .do.open{border-color:rgba(var(--glow),.6);box-shadow:inset 0 1px 0 var(--isle-hi),var(--isle-shadow),0 0 40px -8px rgba(var(--glow),.4)}
@media (prefers-reduced-motion:reduce){.do .more,.do .more > .mi,.ap .do::after{transition:none}}
/* ---------- small pictures inside an open island ---------- */
.mv{border:1px solid var(--isle-line);border-radius:14px;background:var(--isle-b);padding:12px;display:grid;gap:8px}
.mv svg{display:block;width:100%;height:auto}
.mv-cap{display:flex;flex-wrap:wrap;gap:6px}
.mv-cap i,.mv-t{font-style:normal;font-size:12.5px;font-weight:700;border-radius:8px;padding:3px 8px;border:1px solid var(--isle-line)}
.mv-cap i.k{color:var(--lime);border-color:rgba(var(--glow),.45)} .mv-cap i.flag{color:#3D2A00;background:#FFD98A;border-color:#FFD98A}
.mv-phone{width:170px;border:2px solid rgba(var(--glow),.45);border-radius:22px;padding:14px 10px 12px;display:grid;gap:6px;justify-self:start}
.mv-phone div{display:grid;grid-template-columns:44px 1fr;gap:8px;align-items:center;font-size:12px;font-weight:600;border-radius:9px;padding:6px 8px;background:rgba(var(--glow),.1)}
.mv-phone div:first-child{background:var(--lime);color:#0B140D} .mv-phone em{font-style:normal;font-variant-numeric:tabular-nums;opacity:.8}
.mv-chat{display:grid;gap:6px}
.mv-chat p{margin:0;max-width:82%;font-size:13px;line-height:1.35;padding:8px 11px;border-radius:14px 14px 14px 4px;background:rgba(127,127,127,.2);color:inherit}
.mv-chat p.me{justify-self:end;border-radius:14px 14px 4px 14px;background:var(--lime);color:#0B140D;font-weight:700}
.mv-eq{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.mv-eq span{width:26px;height:26px;border-radius:50%;border:2px solid var(--lime);position:relative;margin:0}.mv-eq span::after{content:"";position:absolute;inset:6px;border-radius:50%;background:var(--lime);opacity:.6}
.mv-eq span.sq{border-radius:7px}.mv-eq span.sq::after{border-radius:3px}
.mv-bar{height:9px;border-radius:6px;background:rgba(127,127,127,.25);overflow:hidden}.mv-bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#C6EE5A,#FFD98A)}
.mv-lanes{display:grid;gap:5px}
.mv-lanes div{height:20px;border-radius:6px;background:rgba(127,127,127,.2);position:relative;overflow:hidden}
.mv-lanes div.dim{filter:blur(2.5px);opacity:.55}
.mv-lanes b{position:absolute;top:0;bottom:0;border-radius:6px;font:700 11px/20px var(--text,inherit);padding:0 7px;white-space:nowrap;display:block}
.mv-lanes b.lit{background:#2C6B45;color:#EEF4EA;border:1px solid #4FA36A}
.mv-lanes b.g{background:rgba(127,127,127,.45)}
.mv-lanes b.bad{background:rgba(240,98,122,.25);border:1.5px solid #F0627A;color:inherit}

/* fasti: the automation switch and the tray for planning by hand */
.fb-auto{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:14px;padding-top:12px;border-top:1px solid var(--isle-line)}
.fb-auto .v-sw{margin-top:0}.fb-auto em{font-style:normal;font-size:13.5px;color:var(--muted)}
.fb-tray{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px;padding:12px;border:1.5px dashed rgba(var(--glow),.4);border-radius:14px}
.fb-tray[hidden]{display:none}
.fb-tray small{width:100%}
.fb-tray .fb-b{position:static;height:34px;margin:0;cursor:pointer;font:700 12.500px var(--text,inherit);transition:transform .15s,box-shadow .2s}
.fb-tray .fb-b:hover,.fb-tray .fb-b:focus-visible{transform:translateY(-2px);box-shadow:0 0 18px rgba(var(--glow),.5);outline:0}
.card .sec-ic + h3{margin-top:0}

/* fasti: the optional texts and calls add-on */
.fc{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:26px;align-items:center;padding:24px;margin-top:16px;transition:border-color .3s,box-shadow .4s}
.fc.on{border-color:var(--lime);box-shadow:0 0 44px -6px rgba(var(--glow),.45)}
.fc small{display:block;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.fc h3{font-size:24px;margin-top:4px}.fc-l > p{color:var(--muted);font-size:15px;margin:6px 0 12px;max-width:34em}
.fc-price{display:flex;gap:30px;margin:16px 0 12px;opacity:.5;transition:opacity .3s}
.fc.on .fc-price{opacity:1}
.fc-price b{display:block;font-family:var(--display);font-size:34px;line-height:1.1;letter-spacing:-.03em;color:var(--lime)}
.fc-phone{max-width:270px;margin:0 auto;border:2px solid rgba(var(--glow),.45);border-radius:28px;padding:18px 14px;display:grid;gap:8px;background:rgba(0,0,0,.18)}
.fc-phone p{margin:0;max-width:86%;font-size:13.5px;line-height:1.35;padding:9px 12px;border-radius:15px 15px 15px 4px;background:rgba(127,127,127,.22);opacity:.45;transition:opacity .4s,transform .4s;transform:translateY(4px)}
.fc-phone p.me{justify-self:end;border-radius:15px 15px 4px 15px;background:var(--lime);color:#0B140D;font-weight:700;transition-delay:.25s}
.fc.on .fc-phone p{opacity:1;transform:none}
.fc-call{display:flex;align-items:center;gap:12px;margin-top:6px;padding-top:12px;border-top:1px solid var(--isle-line)}
.fc-call .sec-ic{margin:0;width:44px;height:44px;flex-shrink:0}.fc-call .sec-ic svg{width:24px;height:24px}
.fc-wave{display:flex;align-items:center;gap:4px;height:34px;flex:1}
.fc-wave i{flex:1;max-width:8px;height:22%;border-radius:4px;background:var(--lime);opacity:.4}
.fc.on .fc-wave i{opacity:1;animation:fc-wave 1.1s ease-in-out calc(var(--n) * .09s) infinite}
@keyframes fc-wave{0%,100%{height:22%}50%{height:100%}}
@media (max-width:820px){.fc{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.fc.on .fc-wave i{animation:none;height:60%}.fc-phone p{transition:none}}

/* fasti: how many locations are scheduling this month */
.fp-loc{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;margin-top:16px;padding-top:14px;border-top:1px solid var(--isle-line)}
.fp-loc b{font-family:var(--display);font-size:28px;font-variant-numeric:tabular-nums;min-width:1.2em;text-align:right}
.fp-pins{display:flex;flex-wrap:wrap;gap:6px}
.fp-pin{appearance:none;width:38px;height:38px;border-radius:12px;border:1px solid var(--isle-line);background:transparent;color:var(--muted);display:grid;place-items:center;cursor:pointer;transition:transform .15s,border-color .2s,background .2s,color .2s,box-shadow .2s}
.fp-pin svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.200;stroke-linecap:round;stroke-linejoin:round}
.fp-pin:hover,.fp-pin:focus-visible{transform:translateY(-2px);border-color:var(--lime);outline:0}
.fp-pin.on{background:var(--lime);border-color:var(--lime);color:#0B140D;box-shadow:0 0 16px rgba(var(--glow),.4)}
@media (max-width:560px){.fp-loc{grid-template-columns:minmax(0,1fr) auto}.fp-loc small{grid-column:1/-1}}

/* ---------- fairbox: the three piles, the two ways in, and the domain add-on ---------- */
.kx-0{border-left:4px solid #C6EE5A}.kx-1{border-left:4px solid #6FD6D0}.kx-2{border-left:4px solid #8A968E}
.kx-0 b{color:var(--lime)}
.k2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:22px}
.kd-addr{display:grid;gap:8px;max-width:300px;margin:0 auto}
.kd-addr span{font:700 14.5px var(--display);border:1px solid var(--isle-line);border-radius:12px;padding:10px 13px;background:var(--isle-b);opacity:.4;transform:translateX(14px);transition:opacity .4s,transform .45s cubic-bezier(.2,.8,.2,1),border-color .3s}
.kd-addr em{font-style:normal;font-weight:500;color:var(--muted)}
#kd.on .kd-addr span{opacity:1;transform:none;border-color:rgba(var(--glow),.5)}
#kd.on .kd-addr span:nth-child(2){transition-delay:.08s}#kd.on .kd-addr span:nth-child(3){transition-delay:.16s}#kd.on .kd-addr span:nth-child(4){transition-delay:.24s}
@media (max-width:760px){.k2{grid-template-columns:minmax(0,1fr)}}
/* five or six apps: three across */

/* ---------- Industries, Your console and Leiertech pages ---------- */
.menu .links{display:flex;gap:6px;flex-wrap:wrap;padding:10px 10px 6px;border-top:1px solid var(--line);margin-top:6px}
.menu .links a{display:inline-flex;align-items:center;min-height:34px;padding:0 12px;border-radius:10px;border:1px solid var(--line2);font-weight:600;font-size:13.5px;color:var(--ink);text-decoration:none;grid-template-columns:none}
.menu .links a:hover{border-color:rgba(var(--glow),.7)}
.ex-chips{display:flex;gap:9px;flex-wrap:wrap;margin-top:26px}
.ex-chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:14px;border:1px solid var(--line2);background:var(--surface);color:var(--ink);font:600 14.5px var(--text);cursor:pointer;transition:transform .14s,border-color .14s,box-shadow .14s,background .14s}
.ex-chip svg{width:19px;height:19px;fill:none;stroke:var(--lime);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ex-chip:hover{transform:translateY(-2px);border-color:rgba(var(--glow),.6)}
.ex-chip.on{background:var(--lime);color:#0B1A0D;border-color:transparent;box-shadow:0 0 26px -4px rgba(var(--glow),.7)} .ex-chip.on svg{stroke:#0B1A0D}
.ex-stage{margin-top:26px;perspective:1600px;overflow:hidden;padding:26px 4px 34px;margin-left:-4px;margin-right:-4px}
.ex-combo{position:relative;overflow:hidden;padding:30px;border-radius:30px;min-height:330px}
.ex-combo.in{animation:ex-pan 1s cubic-bezier(.16,.84,.2,1) both}
.ex-combo::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(var(--glow),.16) 50%,transparent 65%);transform:translateX(-120%);pointer-events:none}
.ex-combo.in::after{animation:ex-sheen 1.5s .35s ease-out both}
@keyframes ex-pan{0%{opacity:0;transform:translateX(46%) rotateY(-18deg) scale(.9);filter:blur(8px)}60%{opacity:1;filter:blur(0)}100%{opacity:1;transform:none;filter:none}}
@keyframes ex-sheen{to{transform:translateX(120%)}}
@keyframes ex-pop{from{opacity:0;transform:translateY(18px) scale(.9)}to{opacity:1;transform:none}}
.ex-head{display:grid;grid-template-columns:64px minmax(0,1fr);gap:16px;align-items:center}
.ex-sym{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;background:rgba(var(--glow),.12);border:1px solid rgba(var(--glow),.35);box-shadow:0 0 30px -8px rgba(var(--glow),.6)}
.ex-sym svg{width:32px;height:32px;fill:none;stroke:var(--lime);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ex-head small{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--lime)} .ex-head h2{font-size:clamp(24px,3vw,34px);margin-top:2px} .ex-head p{color:var(--muted);margin-top:4px;max-width:46em}
.ex-apps{display:flex;gap:10px;align-items:stretch;margin-top:26px;flex-wrap:wrap}
.ex-app{flex:1 1 150px;max-width:230px;display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:16px;border-radius:20px;border:1px solid var(--line2);background:rgba(4,8,6,.45);text-decoration:none;color:var(--ink);transition:transform .16s,border-color .16s,box-shadow .16s}
.ex-combo.in .ex-app{animation:ex-pop .55s cubic-bezier(.2,1.4,.4,1) both;animation-delay:calc(.45s + var(--i,0)*110ms)}
.ex-app:hover{transform:translateY(-4px);border-color:rgba(var(--glow),.7);box-shadow:0 16px 34px -18px rgba(var(--glow),.7)}
.ex-app img{width:84px;height:84px;border-radius:20px;margin-bottom:8px} .ex-app b{font:700 20px var(--display)} .ex-app span{color:var(--lime);font-size:13px;font-weight:600} .ex-app p{color:var(--muted);font-size:13.5px;margin-top:6px;flex:1}
.ex-app em,.lt-tag{font-style:normal;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:999px;border:1px solid var(--line2);color:var(--muted);margin-top:10px}
.ex-app em.on,.lt-tag.on{color:#0B1A0D;background:var(--lime);border-color:transparent}
.ex-plus{align-self:center;font:700 26px var(--display);color:var(--lime);opacity:.8}
.ex-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:24px;padding-top:18px;border-top:1px dashed var(--line2)} .ex-foot span{color:var(--muted);font-weight:600}
.cz{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:18px;margin-top:30px;align-items:start}
.cz-q,.cz-mock{padding:24px;border-radius:26px} .cz-q h3{display:flex;align-items:center;gap:10px;font-size:18px}
.cz-n{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:var(--lime);color:#0B1A0D;font:700 15px var(--display)}
.cz-needs{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px} .cz-needs .ex-chip{min-height:40px;font-size:14px}
.cz-bar{display:flex;align-items:center;gap:10px;padding-bottom:14px;border-bottom:1px solid var(--line2)} .cz-bar b{font:600 15px var(--display)} .cz-bar em{font-style:normal;margin-left:auto;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--lime)}
.cz-dots{display:inline-flex;gap:5px} .cz-dots i{width:9px;height:9px;border-radius:3px;background:var(--line2)} .cz-dots i:last-child{background:var(--lime)}
.cz-apps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:16px;min-height:150px}
.cz-app{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;padding:14px 8px;border-radius:18px;border:1px solid var(--line2);background:rgba(4,8,6,.45)}
.cz-app.new{animation:ex-pop .5s cubic-bezier(.2,1.5,.4,1) both;box-shadow:0 0 30px -8px rgba(var(--glow),.8);border-color:rgba(var(--glow),.7)}
.cz-app img,.cz-lu{width:64px;height:64px;border-radius:16px;margin-bottom:6px} .cz-app b{font:700 16px var(--display)} .cz-app span{font-size:12px;color:var(--muted)}
.cz-lu{display:grid;place-items:center;background:linear-gradient(140deg,#163A26,#2C6B45);border:1px dashed rgba(var(--glow),.6);font:700 15px var(--display)!important;color:var(--lime)!important;letter-spacing:.04em}
.cz-add{border-style:dashed} .cz-empty{grid-column:1/-1;align-self:center;text-align:center;color:var(--muted)}
.cz-sum{margin-top:14px;color:var(--ink);font-weight:600;min-height:44px} .cz-sum span{color:var(--muted);font-weight:500;font-size:14px}
.lt-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:30px}
.lt{display:flex;flex-direction:column;align-items:flex-start;gap:8px;position:relative} .lt h3{font-size:19px;margin-top:6px} .lt p{color:var(--muted);flex:1} .lt .btn{min-height:42px;padding:0 16px;margin-top:6px}
.lt .lt-tag{position:absolute;top:22px;right:22px;margin:0}
.luaa{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:26px;padding:32px;border-radius:30px;align-items:center;box-shadow:0 0 0 1px rgba(var(--glow),.25),0 30px 70px -40px rgba(var(--glow),.6)}
.luaa h2{font-size:clamp(26px,3.2vw,38px)}
.luaa-tasks{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px} .luaa-tasks i{font-style:normal;font-size:13.5px;font-weight:600;padding:7px 12px;border-radius:12px;border:1px solid var(--line2);background:rgba(4,8,6,.4);animation:lu-float 5s ease-in-out infinite;animation-delay:calc(var(--k,0)*-1s)}
.luaa-tasks i:nth-child(2){--k:1}.luaa-tasks i:nth-child(3){--k:2}.luaa-tasks i:nth-child(4){--k:3}.luaa-tasks i:nth-child(5){--k:4}
@keyframes lu-float{0%,100%{transform:translateY(0);border-color:var(--line2)}50%{transform:translateY(-4px);border-color:rgba(var(--glow),.6)}}
.luaa-calc{padding:22px;border-radius:22px;border:1px solid var(--line2);background:rgba(4,8,6,.5);display:flex;flex-direction:column;gap:4px}
.luaa-calc small{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--lime)} .luaa-calc b{font:700 clamp(28px,3.4vw,40px) var(--display);color:var(--ink)} .luaa-calc>span{color:var(--muted);font-weight:600}
.luaa-calc label{margin-top:14px;font-size:13px;font-weight:600;color:var(--muted)} .luaa-calc input{width:100%;accent-color:var(--lime)}
:root[data-look="light"] .ex-app,:root[data-look="light"] .cz-app,:root[data-look="light"] .luaa-calc,:root[data-look="light"] .luaa-tasks i{background:#fff}
:root[data-look="light"] .ex-chip.on,:root[data-look="light"] .ex-app em.on,:root[data-look="light"] .lt-tag.on,:root[data-look="light"] .cz-n{color:#fff}
@media (max-width:920px){.cz,.luaa{grid-template-columns:minmax(0,1fr)} .lt-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.lt-grid{grid-template-columns:minmax(0,1fr)} .ex-combo{padding:20px} .ex-plus{display:none} .ex-app{flex-basis:100%;max-width:none;flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px 12px} .ex-app img{width:56px;height:56px;margin:0} .ex-app p{flex-basis:100%} .ex-app em{margin-top:0;margin-left:auto} .cz-apps{grid-template-columns:repeat(2,minmax(0,1fr))} .luaa{padding:22px}}
@media (prefers-reduced-motion:reduce){.ex-combo.in,.ex-combo.in::after,.ex-combo.in .ex-app,.cz-app.new,.luaa-tasks i{animation:none}}
.letter p.origin{border-left:3px solid var(--lime);padding:4px 0 4px 16px;font-size:17px;color:var(--ink)} .letter p.origin b{color:var(--lime)}

/* fun facts: the story behind a name, in bold italics */
.funfact{position:relative;margin:26px auto 0;max-width:820px;padding:18px 20px 18px 62px;border-radius:18px;border:1px solid color-mix(in srgb,var(--lime,#C6EE5A) 34%,transparent);background:linear-gradient(160deg,rgba(198,238,90,.09),rgba(198,238,90,.02));font-size:16.5px;line-height:1.55;text-align:left}
.funfact::before{content:"\2726";position:absolute;left:18px;top:13px;width:30px;height:30px;display:grid;place-items:center;font-size:24px;line-height:1;color:var(--lime,#C6EE5A);text-shadow:0 0 16px rgba(198,238,90,.7)}
.funfact b.ff-k{display:block;font:italic 800 13px Poppins,Inter,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--lime,#C6EE5A);margin-bottom:4px}
.funfact .ff-s{font-style:italic;font-weight:700;font-family:Poppins,Inter,sans-serif}
.funfact .ff-n{display:block;margin-top:8px;font-size:13px;font-weight:500;font-style:normal;opacity:.7}
html[data-look="light"] .funfact{border-color:#C4D1BE;background:#F4F7F0} html[data-look="light"] .funfact::before,html[data-look="light"] .funfact b.ff-k{color:#2C6B45;text-shadow:none}
/* the opening: the orb is moved to the middle of the screen, and on phones and unfolded phones that put its glow past the
   top edge of the hero, which cut it off in a straight line. While the opening runs, the hero no longer clips up and down. */
.intro-on .hero{overflow:visible}
@supports (overflow:clip){.intro-on .hero,.intro-out .hero{overflow-x:clip;overflow-y:visible}}

/* the closing band on every page: the whole set, in one app */
.setband{margin:70px 0 10px;padding:0 20px;text-align:center} .setband .wrap{position:relative;overflow:hidden;border-radius:34px;padding:46px 26px;border:1px solid rgba(var(--glow),.4);background:radial-gradient(700px 320px at 50% -10%,rgba(var(--glow),.16),transparent 70%),var(--surface,#0A120D);box-shadow:0 0 90px -40px rgba(var(--glow),.9)}
.sb-icons{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-bottom:22px} .sb-icons a{display:block;border-radius:16px;animation:sb-bob 4s ease-in-out infinite;animation-delay:calc(var(--i)*-.45s);transition:transform .15s} .sb-icons a:hover{transform:scale(1.14)} .sb-icons img{display:block;border-radius:16px;box-shadow:0 10px 26px -12px rgba(0,0,0,.7),0 0 22px -10px rgba(var(--glow),.9)}
@keyframes sb-bob{50%{translate:0 -6px}}
.setband h2{font:700 clamp(26px,4vw,42px)/1.1 Poppins,sans-serif;letter-spacing:-.03em} .setband h2 span{color:var(--lime);text-shadow:0 0 26px rgba(var(--glow),.5)} .setband p{max-width:44em;margin:12px auto 0;color:var(--muted);font-size:16px;line-height:1.55} .setband .cta{justify-content:center;margin-top:22px;display:flex;gap:12px;flex-wrap:wrap}
.have{margin-top:12px;font-size:14px;color:var(--muted)} .have a{color:var(--soft)}
@media (prefers-reduced-motion:reduce){.sb-icons a{animation:none}}

/* the pricing page: what a month would cost, and every price side by side */
.pr-head{padding:54px 0 18px;text-align:center} .pr-head h1{font-size:clamp(38px,6vw,68px);line-height:1.05;letter-spacing:-.03em;margin:14px 0 12px} .pr-head .sub{max-width:46em;margin:0 auto}
.pr-calc{border-radius:30px;padding:26px;border:1px solid rgba(var(--glow),.35);background:radial-gradient(800px 300px at 80% -20%,rgba(var(--glow),.12),transparent 70%),var(--surface,#0A120D);box-shadow:0 0 80px -44px rgba(var(--glow),.9)}
.pr-ch{display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:16px} .pr-ch h2{font:700 clamp(22px,3vw,30px) Poppins,sans-serif;letter-spacing:-.02em} .pr-ch p{color:var(--muted);margin-top:4px}
.pr-total{text-align:right;display:grid} .pr-total span,.pr-total small{font-size:13px;color:var(--muted)} .pr-total b{font:700 clamp(44px,6vw,64px)/1 Poppins,sans-serif;color:var(--lime);text-shadow:0 0 34px rgba(var(--glow),.6);font-variant-numeric:tabular-nums}
.pr-rows{display:grid;gap:10px} .pr-row{display:grid;grid-template-columns:230px minmax(0,1fr) 190px;gap:16px;align-items:center;padding:12px 14px;border-radius:20px;border:1px solid var(--isle-line,rgba(255,255,255,.1));border-left:5px solid var(--c);background:linear-gradient(160deg,var(--isle-a,rgba(255,255,255,.07)),var(--isle-b,rgba(255,255,255,.02)));transition:opacity .2s,border-color .2s}
.pr-row.off{opacity:.45;border-left-color:var(--muted)} .pr-row.cap{box-shadow:0 0 0 1px var(--c) inset}
.pr-sw{display:flex;align-items:center;gap:11px;text-align:left;background:none;border:0;color:inherit;cursor:pointer;font:inherit;min-width:0} .pr-sw img{border-radius:12px;flex:none} .pr-sw span{flex:1;min-width:0} .pr-sw b{display:block;font:700 16px Poppins,sans-serif} .pr-sw small{color:var(--muted);font-size:12.5px}
.pr-sw i{width:44px;height:26px;border-radius:999px;background:rgba(127,127,127,.35);position:relative;flex:none;transition:background .2s} .pr-sw i::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .2s} .pr-sw[aria-pressed="true"] i{background:var(--c);box-shadow:0 0 16px -2px var(--c)} .pr-sw[aria-pressed="true"] i::after{transform:translateX(18px)}
.pr-sl{display:grid;gap:6px;font-size:14px;color:var(--muted)} .pr-sl .pn{font:700 20px Poppins,sans-serif;color:var(--c);font-variant-numeric:tabular-nums} .pr-sl input{width:100%;accent-color:var(--c);height:28px}
.pr-amt{display:grid;justify-items:end;gap:2px} .pr-amt b{font:700 24px Poppins,sans-serif;font-variant-numeric:tabular-nums} .pr-amt small{font-size:12px;color:var(--muted);text-align:right} .pr-row.cap .pr-amt small{color:var(--c);font-weight:700}
.pr-bar{width:100%;height:6px;border-radius:999px;background:rgba(127,127,127,.22);overflow:hidden;margin-top:4px} .pr-bar i{display:block;height:100%;border-radius:999px;background:var(--c);box-shadow:0 0 10px var(--c);transition:width .25s}
.pr-note{color:var(--muted);font-size:13.5px;margin-top:14px;line-height:1.5} .pr-cta{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:16px} .pr-cta span{color:var(--muted);font-size:14px}
.pr-h{font:700 clamp(24px,3.4vw,36px) Poppins,sans-serif;letter-spacing:-.02em;margin:56px 0 16px}
.pr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.pr-card{display:grid;gap:8px;align-content:start;padding:16px;border-radius:22px;text-decoration:none;color:var(--ink,#EEF4EA);border:1px solid var(--isle-line,rgba(255,255,255,.1));border-top:4px solid var(--c);background:linear-gradient(160deg,var(--isle-a,rgba(255,255,255,.07)),var(--isle-b,rgba(255,255,255,.02)))} .pr-card:hover{box-shadow:0 22px 50px -30px var(--c);translate:0 -3px}
.pr-card header{display:grid;grid-template-columns:52px minmax(0,1fr);gap:4px 12px;align-items:center} .pr-card img{border-radius:14px;grid-row:1 / span 2} .pr-card header b{font:700 18px Poppins,sans-serif} .pr-card header small{color:var(--muted);font-size:12.5px;display:block}
.pr-card em{grid-column:2;justify-self:start;font:700 11px Inter,sans-serif;font-style:normal;padding:2px 9px;border-radius:999px;background:var(--c);color:#0C160F} .pr-card em.plan{background:transparent;border:1px solid var(--c);color:var(--c)}
.pr-card .big{font:700 22px/1.2 Poppins,sans-serif;color:var(--c)} .pr-card p{font-size:14px;color:var(--muted);line-height:1.5}
.pr-fine{color:var(--muted);font-size:13px;margin:18px 0 0;line-height:1.5}
@media (max-width:820px){.pr-row{grid-template-columns:minmax(0,1fr);gap:8px} .pr-amt{justify-items:start} .pr-amt small{text-align:left} .pr-total{text-align:left} .pr-calc{padding:18px 14px}}