/* Odd Hours Software. Design based on the INSTALANDING.AI "Fortix AI Money Copilot App Page",
   with its layout, design values and motion kept and the content replaced. */
:root{
  --ink:#1a1a1a;--ink65:rgba(26,26,26,.65);--ink50:rgba(26,26,26,.5);--ink10:rgba(26,26,26,.1);--ink05:rgba(26,26,26,.05);
  --bg:#fff;
  --purple:linear-gradient(225deg,#2e6b3f,#1d4a2c);
  --red:linear-gradient(225deg,#f85032,#e73827);
  --orange:linear-gradient(225deg,#fdc830,#f37335);
  --pink:linear-gradient(225deg,#e60b79,#990750);
  --green:linear-gradient(225deg,#50b224,#3f8c1c);
  --blue:linear-gradient(225deg,#3a8bff,#0d4fd1);
  --cyan:linear-gradient(225deg,#5ec4b6,#0e7490);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Inter,system-ui,sans-serif;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;overflow-x:hidden;font-feature-settings:"cv03","cv04","cv09","cv11","tnum"}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid #2e6b3f;outline-offset:3px}
::selection{background:#6a6a6a;color:#fff}
.wrap{max-width:800px;margin:0 auto;padding:0 24px}
h1{font-size:80px;font-weight:700;letter-spacing:-.04em;line-height:.96}
h2{font-size:48px;font-weight:700;letter-spacing:-.04em;line-height:1.04}
h3,.h3{font-size:36px;font-weight:700;letter-spacing:-.04em;line-height:1.04}
.lead{font-size:24px;font-weight:500;letter-spacing:-.02em;line-height:1.24;color:var(--ink65)}
.label{font-size:16px;font-weight:500;color:var(--ink50);letter-spacing:-.02em}
section{padding-top:240px}
@media(max-width:1159px){h1{font-size:68px}h2{font-size:40px}h3,.h3{font-size:32px}}
@media(max-width:767px){h1{font-size:44px}h2{font-size:36px}h3,.h3{font-size:28px}.lead{font-size:21px}section{padding-top:200px}}

.rv{opacity:0;transform:translateY(24px);filter:blur(2px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1),filter .8s}
.rv.in{opacity:1;transform:none;filter:none}
.pop{opacity:0;transform:scale(.6) translateY(20px);transition:opacity .5s,transform .6s cubic-bezier(.15,.45,.15,1.35)}
.pop.in{opacity:1;transform:none}

/* nav */
nav{position:fixed;top:0;left:0;right:0;z-index:50;padding:24px}
nav .bar{max-width:800px;margin:0 auto;display:flex;align-items:center;justify-content:center;gap:104px;position:relative}
nav .side{flex:1;display:flex;gap:24px}
nav .side.l{justify-content:flex-end}
nav a.ln{font-size:16px;font-weight:600;color:var(--ink65);padding:4px 10px;border-radius:100px;transition:.25s}
nav a.ln:hover{background:var(--ink05);color:var(--ink)}
.logo{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;transition:.25s}
.logo:hover{background:var(--ink)}
.logo:hover svg path{fill:#fff}
.logo svg{width:32px;height:32px}
.burger{display:none;width:40px;height:40px;border-radius:8px;background:var(--ink05);border:0;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.burger i{display:block;width:20px;height:2px;background:var(--ink);border-radius:1px;transition:.3s}
nav::before{content:"";position:absolute;inset:0 0 -20px;background:linear-gradient(#fff 50%,rgba(255,255,255,0));z-index:-1;pointer-events:none}
@media(max-width:767px){
  nav .bar{justify-content:space-between;gap:0}
  nav .side{display:none}
  .burger{display:flex}
  nav.open .menu{opacity:1;pointer-events:auto;visibility:visible}
  nav.open .burger i:nth-child(1){transform:translateY(6px) rotate(45deg)}
  nav.open .burger i:nth-child(2){opacity:0}
  nav.open .burger i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
}
/* visibility keeps the closed menu's links out of the tab order */
.menu{position:fixed;inset:0;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;opacity:0;visibility:hidden;pointer-events:none;transition:.3s;z-index:-1}
.menu a{font-size:28px;font-weight:700;letter-spacing:-.03em}

/* hero */
.hero{padding-top:168px;text-align:center}
.hero h1{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px 16px;max-width:720px;margin:0 auto}
.hero h1 span.w{display:inline-flex;align-items:center;gap:12px}
.ic{width:72px;height:72px;border-radius:24px;position:relative;display:grid;place-items:center;box-shadow:0 2px 4px rgba(0,0,0,.2);flex:none}
.ic::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.8),rgba(255,255,255,0))}
.ic::after{content:"";position:absolute;inset:1px;border-radius:inherit;background:inherit}
.ic svg{position:relative;z-index:1;width:40px;height:40px;filter:drop-shadow(0 2px 2px rgba(0,0,0,.2))}
.ic.p{background:var(--purple)}.ic.r{background:var(--red)}.ic.o{background:var(--orange)}
.mob-icons{display:none;gap:4px;justify-content:center;margin-bottom:28px}
.mob-icons .ic{width:48px;height:48px;border-radius:12px}
.mob-icons .ic svg{width:24px;height:24px}
@media(max-width:1159px){.ic{width:64px;height:64px;border-radius:20px}.ic svg{width:32px;height:32px}}
@media(max-width:767px){.hero h1 .ic{display:none}.mob-icons{display:flex}.hero h1{gap:0 10px}}
.hero .lead{max-width:640px;margin:24px auto 0;text-align:center}
.stores{display:flex;justify-content:center;gap:8px;margin-top:32px;flex-wrap:wrap}
.store{display:flex;align-items:center;gap:10px;background:#000;color:#fff;border:1px solid #a6a6a6;border-radius:10px;height:60px;padding:0 20px 0 16px;transition:transform .25s}
.store:hover{transform:translateY(-2px)}
.store svg{width:28px;height:28px}
.store small{display:block;font-size:11px;font-weight:500;opacity:.85;text-align:left}
.store b{display:block;font-size:20px;font-weight:600;letter-spacing:-.02em;line-height:1;text-align:left}
@media(max-width:767px){.store{height:50px}.store b{font-size:16px}}

.devices{position:relative;height:560px;margin-top:96px;overflow:hidden;padding-top:0}
.devices .phone{position:absolute;top:0;transform:translateX(-50%);width:295px}
.devices .phone.a{left:29%}
.devices .phone.b{left:74%;top:32px}
.devices .fade{position:absolute;left:0;right:0;bottom:0;height:200px;background:linear-gradient(rgba(255,255,255,0),#fff);z-index:3}
@media(max-width:1159px){.devices{height:640px}.devices .phone.a{left:33%}.devices .phone.b{left:70%}}
@media(max-width:767px){.devices{height:360px;margin-top:80px}.devices .phone{width:168px}.devices .phone.a{left:32%}.devices .phone.b{left:68%;top:20px}.devices .fade{height:160px}}
.rise{opacity:0;transform:translateX(-50%) translateY(400px);transition:opacity 1s,transform 1.2s cubic-bezier(.2,.8,.2,1)}
.rise.in{opacity:1;transform:translateX(-50%)}

/* ===== PREMIUM PHONE ===== */
.phone{aspect-ratio:.462;border-radius:16%/7.4%;padding:2.8%;position:relative;z-index:2;container-type:inline-size;
  background:linear-gradient(145deg,#4a4a52 0%,#16161a 22%,#2c2c33 48%,#0c0c0f 72%,#3a3a42 100%);
  box-shadow:0 50px 60px -10px rgba(12,30,20,.35),0 18px 24px rgba(0,0,0,.18),inset 0 0 0 1px rgba(255,255,255,.18),inset 0 0 0 3px #08080a}
.phone::before,.phone::after{content:"";position:absolute;width:1.2%;border-radius:2px;background:linear-gradient(90deg,#2a2a30,#55555d)}
.phone::before{left:-1%;top:22%;height:7%;box-shadow:0 160% 0 #3a3a42}
.phone::after{right:-1%;top:28%;height:11%}
.phone .scr{width:100%;height:100%;border-radius:13.5%/6.3%;overflow:hidden;position:relative;font-size:3.85cqw;text-align:left;color:#fff;
  background:radial-gradient(90% 45% at 15% -5%,rgba(46,107,63,.55),transparent 70%),radial-gradient(70% 40% at 105% 15%,rgba(31,122,140,.28),transparent 70%),radial-gradient(80% 40% at 50% 115%,rgba(232,121,43,.18),transparent 70%),#0c1712}
.phone .scr::before{content:"";position:absolute;top:1.9%;left:50%;transform:translateX(-50%);width:31%;height:4.1%;background:#000;border-radius:99px;z-index:6;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
.phone .scr::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.09) 0%,rgba(255,255,255,.02) 30%,transparent 31%);pointer-events:none;z-index:7}
.sb{display:flex;justify-content:space-between;align-items:center;padding:5.6% 9% 0;font-weight:600;font-size:.95em;letter-spacing:-.01em}
.sb svg{height:.85em}
.sc{padding:7% 6% 0}
.mu{color:rgba(255,255,255,.55);font-weight:500}
.gt{background:linear-gradient(90deg,#f6cf7a,#8fd8cc);-webkit-background-clip:text;background-clip:text;color:transparent}
.hdr{display:flex;justify-content:space-between;align-items:center}
.hdr b{font-size:1.15em;letter-spacing:-.02em}
.hdr .mu{font-size:.85em}
.av2{width:2.4em;height:2.4em;border-radius:50%;background:linear-gradient(135deg,#f6cf7a,#f2b33d);display:grid;place-items:center;font-weight:700;color:#1d3a2a;font-size:.85em;box-shadow:0 0 0 .15em rgba(255,255,255,.12)}
.orb{width:2.4em;height:2.4em;border-radius:50%;position:relative;background:conic-gradient(from 0deg,#2e6b3f,#5ec4b6,#e8792b,#2e6b3f);animation:spin 5s linear infinite;box-shadow:0 0 1.4em rgba(46,107,63,.7),0 0 .5em rgba(94,196,182,.6)}
.orb::after{content:"";position:absolute;inset:14%;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.9),rgba(255,255,255,.1) 45%,transparent 60%),radial-gradient(circle,#10241a,#0c1712);filter:blur(.04em)}
.orb.lg{width:7em;height:7em;margin:0 auto}
@keyframes spin{to{transform:rotate(360deg)}}
.bal{font-size:2.9em;font-weight:700;letter-spacing:-.05em;line-height:1;margin:.2em 0 .25em}
.bal span{font-size:.5em;letter-spacing:-.02em}
.up{display:inline-flex;align-items:center;gap:.3em;font-size:.8em;font-weight:600;color:#4ade80;background:rgba(74,222,128,.1);border:1px solid rgba(74,222,128,.2);padding:.25em .6em;border-radius:99px}
.g{background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.1);border-radius:1.2em;padding:.9em;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.ai{position:relative;overflow:hidden;margin-top:.8em}
.ai::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:linear-gradient(120deg,#f2b33d,#5ec4b6,#f39a5b);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.8}
.aihd{display:flex;align-items:center;gap:.4em;font-size:.75em;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:.4em}
.aihd .spk{color:#f6cf7a;font-size:1.2em}
.ai p{font-size:.92em;line-height:1.35;font-weight:500;color:rgba(255,255,255,.85)}
.ai b{font-weight:700}
.chart{width:100%;height:6.5em;display:block;margin:.6em 0 .2em;overflow:visible}
.chart .ln{fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 3px rgba(242,179,61,.9))}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:.45em;margin-top:.6em}
.tile{padding:.7em .65em}
.tile .k{font-size:.7em;color:rgba(255,255,255,.55);font-weight:600}
.tile .v{font-size:1.05em;font-weight:700;letter-spacing:-.03em;margin:.15em 0 .4em}
.pbar{height:.3em;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden}
.pbar i{display:block;height:100%;border-radius:inherit}
.tabbar{position:absolute;left:5%;right:5%;bottom:3.5%;height:4.6em;border-radius:2.3em;display:flex;justify-content:space-around;align-items:center;z-index:5}
.tabbar span{width:1.3em;height:1.3em;border-radius:.4em;border:.13em solid rgba(255,255,255,.4)}
.tabbar span.on{border:0;background:linear-gradient(135deg,#f2b33d,#5ec4b6);box-shadow:0 0 .8em rgba(242,179,61,.8);border-radius:50%}
/* chat */
.msgs{display:flex;flex-direction:column;gap:.6em;margin-top:1.2em}
.me{align-self:flex-end;max-width:78%;background:linear-gradient(135deg,#2e6b3f,#1d4a2c);padding:.7em .9em;border-radius:1.2em 1.2em .3em 1.2em;font-size:.92em;font-weight:500;line-height:1.3;box-shadow:0 .4em 1.2em rgba(46,107,63,.4)}
.bot{align-self:flex-start;max-width:90%;font-size:.92em;line-height:1.35;font-weight:500;color:rgba(255,255,255,.88);border-radius:1.2em 1.2em 1.2em .3em}
.plan{margin-top:.6em;display:flex;flex-direction:column;gap:.45em;font-size:.85em}
.plan .r{display:flex;justify-content:space-between;align-items:center;gap:.6em}
.plan .r .pbar{flex:1}
.typing{display:flex;gap:.3em;padding:.8em 1em!important;width:max-content}
.typing i{width:.45em;height:.45em;border-radius:50%;background:#f6cf7a;animation:blink 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-.2em)}}
.inputbar{position:absolute;left:5%;right:5%;bottom:4%;display:flex;align-items:center;gap:.6em;padding:.55em .55em .55em 1em;border-radius:99px;z-index:5;font-size:.9em}
.inputbar .mu{flex:1}
.inputbar .mic{width:2.3em;height:2.3em;border-radius:50%;background:linear-gradient(135deg,#f2b33d,#5ec4b6);display:grid;place-items:center;box-shadow:0 0 1em rgba(242,179,61,.7)}
.chips{display:flex;gap:.4em;flex-wrap:wrap;margin-top:.2em}
.chips span{font-size:.75em;font-weight:600;padding:.4em .7em;border-radius:99px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.05)}
/* autopilot */
.ring{position:relative;width:62%;margin:1em auto .6em}
.ring svg{width:100%;display:block;transform:rotate(-90deg);overflow:visible}
.ring .ctr{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.ring .ctr b{font-size:1.9em;letter-spacing:-.04em;line-height:1}
.ring .ctr small{font-size:.75em}
.rule{display:flex;align-items:center;gap:.7em;padding:.75em .8em;margin-bottom:.45em}
.rule .ri{width:2.2em;height:2.2em;border-radius:.7em;display:grid;place-items:center;flex:none;font-size:.95em}
.rule .rt{flex:1;font-size:.88em;font-weight:600;line-height:1.25}
.rule .rt small{display:block;font-weight:500;color:rgba(255,255,255,.5);font-size:.85em}
.tg{width:2.5em;height:1.45em;border-radius:99px;background:linear-gradient(90deg,#2e6b3f,#5ec4b6);position:relative;flex:none;box-shadow:0 0 .7em rgba(46,107,63,.6)}
.tg::after{content:"";position:absolute;right:.15em;top:.15em;width:1.15em;height:1.15em;border-radius:50%;background:#fff}
.tg.off{background:rgba(255,255,255,.15);box-shadow:none}.tg.off::after{right:auto;left:.15em}
/* forecast */
.bill{display:flex;align-items:center;gap:.7em;padding:.6em 0;border-bottom:1px solid rgba(255,255,255,.07);font-size:.88em}
.bill:last-child{border:0}
.bill .d{width:2.3em;text-align:center;line-height:1.05;font-weight:700;font-size:.85em}
.bill .d small{display:block;color:rgba(255,255,255,.5);font-weight:600;font-size:.75em}
.bill .n{flex:1;font-weight:600}
.bill .n small{display:block;color:rgba(255,255,255,.5);font-weight:500;font-size:.85em}
.seg{display:flex;gap:.3em;background:rgba(255,255,255,.06);padding:.25em;border-radius:99px;margin:.9em 0 .2em}
.seg span{flex:1;text-align:center;font-size:.75em;font-weight:600;padding:.4em 0;border-radius:99px;color:rgba(255,255,255,.55)}
.seg span.on{background:rgba(255,255,255,.14);color:#fff}
/* shield */
.alert{position:relative;border-radius:1.3em;padding:1em;margin-top:1em;background:linear-gradient(160deg,rgba(248,80,50,.25),rgba(248,80,50,.06));border:1px solid rgba(248,113,113,.35);box-shadow:0 0 2em rgba(248,80,50,.25)}
.alert .tag{display:inline-flex;align-items:center;gap:.35em;font-size:.7em;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fca5a5}
.alert .amt{font-size:1.9em;font-weight:700;letter-spacing:-.04em;margin:.25em 0 .1em;text-decoration:line-through;text-decoration-color:rgba(252,165,165,.7)}
.btns{display:flex;gap:.5em;margin-top:.8em}
.btns span{flex:1;text-align:center;font-weight:600;font-size:.85em;padding:.7em;border-radius:.9em;background:rgba(255,255,255,.08)}
.btns span.pri{background:#fff;color:#0c1712}
.sig{display:flex;align-items:center;gap:.6em;padding:.55em 0;font-size:.85em;font-weight:500;border-bottom:1px solid rgba(255,255,255,.07)}
.sig:last-child{border:0}
.sig i{width:1.5em;height:1.5em;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:.75em;font-weight:800}
.sig .s{margin-left:auto;font-weight:700}

/* logos */
.logos{padding-top:48px}
.logos .wrap{display:flex;justify-content:center;align-items:center;gap:40px}
.logos svg{height:48px;width:auto;opacity:.55;filter:grayscale(1);transition:.3s}
.logos svg:hover{opacity:1;filter:none}
@media(max-width:767px){.logos .wrap{gap:24px}.logos svg{height:32px}}

/* about */
.about p.big{font-size:48px;font-weight:700;letter-spacing:-.04em;line-height:1.04;color:var(--ink50)}
.about p.big b{color:var(--ink);font-weight:700}
.about .line{display:flex;flex-wrap:wrap;align-items:center;gap:0 12px;font-size:48px;font-weight:700;letter-spacing:-.04em;line-height:1.04}
.about .para+.para{margin-top:40px}
.star{width:40px;height:40px;color:#fca800}
.avs{display:flex}
.av{width:44px;height:44px;border-radius:12px;border:4px solid #fff;display:grid;place-items:center;color:#fff;font-size:15px;font-weight:700;margin-left:-22px}
.av:first-child{margin-left:0;transform:rotate(3deg)}
.av:nth-child(2){transform:rotate(-10deg)}
.av:nth-child(3){transform:rotate(5deg)}
.mini-orb{width:44px;height:44px;border-radius:50%;background:conic-gradient(#2e6b3f,#5ec4b6,#e8792b,#2e6b3f);position:relative;animation:spin 5s linear infinite;box-shadow:0 0 18px rgba(46,107,63,.5)}
.mini-orb::after{content:"";position:absolute;inset:6px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,rgba(255,255,255,.1) 45%,transparent 60%),#10241a}
@media(max-width:1159px){.about p.big,.about .line{font-size:40px}.star{width:32px;height:32px}.av{width:36px;height:36px;margin-left:-18px}.mini-orb{width:36px;height:36px}}
@media(max-width:767px){.about p.big,.about .line{font-size:36px;gap:0 6px}.star{width:28px;height:28px}.av{width:32px;height:32px;border-width:3px;margin-left:-16px}.mini-orb{width:32px;height:32px}.mini-orb::after{inset:5px}}

.stats{margin-top:64px;perspective:1200px;display:flex;justify-content:center;height:420px;position:relative}
.stat{position:absolute;width:240px;height:320px;border-radius:32px;padding:24px 24px 20px;color:#fff;display:flex;flex-direction:column;justify-content:space-between;box-shadow:8px 20px 32px rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.6);overflow:hidden;transition:transform 1s cubic-bezier(.3,.8,.3,1)}
.stat::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 70% at 20% 0%,rgba(255,255,255,.35),transparent 60%),radial-gradient(80% 60% at 100% 100%,rgba(0,0,0,.25),transparent 70%);pointer-events:none}
.stat svg.deco{position:absolute;right:-30px;bottom:60px;width:200px;opacity:.25}
.stat .t{font-size:24px;font-weight:500;opacity:.7;letter-spacing:-.02em}
.stat .v{font-size:48px;font-weight:700;letter-spacing:-.04em;line-height:1.04}
.stat .si{width:24px;height:24px}
.stat>*{position:relative;z-index:1}
@media(max-width:767px){
  .stats{height:auto;display:flex;gap:10px;overflow-x:auto;justify-content:flex-start;scroll-snap-type:x mandatory;padding:10px 24px 30px;margin:48px -24px 0;perspective:none}
  .stat{position:relative;flex:none;transform:none!important;width:240px;height:240px;border-radius:16px;scroll-snap-align:center}
  .stat .v{font-size:36px}
}

/* experience */
.exp-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.exp-grid+.exp-grid{margin-top:80px}
.dblock{aspect-ratio:1;border-radius:32px;background:var(--ink05);position:relative;overflow:hidden;padding:32px 24px 0}
.dblock .phone{width:100%;position:relative;z-index:2}
.blob{position:absolute;width:600px;height:600px;border-radius:50%;filter:blur(100px);transform:translate(-50%,-50%);z-index:1;pointer-events:none}
.tblock{padding-left:32px;display:flex;flex-direction:column;gap:16px}
.tblock .h3{max-width:280px}.tblock .lead{max-width:320px}
.more{display:inline-flex;align-items:center;gap:4px;font-size:18px;font-weight:600;padding:8px 0;letter-spacing:-.02em}
.more svg{width:12px;height:12px;transition:transform .25s}
.more:hover svg{transform:translateX(4px)}
@media(max-width:1159px){.dblock{border-radius:24px}}
@media(max-width:767px){
  .exp-grid{display:flex;flex-direction:column;gap:40px}
  .exp-grid.flip .dblock{order:2}
  .tblock{padding:0}
  .dblock{padding:24px 16px 0;width:100%}
}

/* message */
.msg .stage{height:560px;position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:16px}
.msg h2{max-width:400px}
/* centred with translate, not transform: the .pop reveal owns transform */
.badge{position:absolute;translate:-50% -50%;display:flex;align-items:center;gap:6px;color:#fff;font-size:14px;font-weight:500;padding:12px 16px;border-radius:100px;border:1px solid rgba(255,255,255,.2);box-shadow:0 8px 16px rgba(0,0,0,.2);white-space:nowrap}
.badge svg{width:16px;height:16px}
.fcoin{position:absolute;width:64px;height:64px;transform:translate(-50%,-50%);border-radius:20px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:26px;box-shadow:0 6px 14px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.4);animation:float 6s ease-in-out infinite}
@keyframes float{50%{margin-top:-12px}}
.bub{position:absolute;background:var(--ink);color:#fff;font-size:14px;font-weight:500;line-height:1.24;padding:12px 20px 12px 16px;border-radius:16px 16px 16px 0;box-shadow:0 8px 16px rgba(0,0,0,.2);white-space:pre;text-align:left}
.bub.rt{border-radius:16px 16px 0 16px}
.bub .pa{position:absolute;bottom:-15px;left:-46px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700}
.bub.rt .pa{left:auto;right:-46px}
.bub::before{content:"";position:absolute;bottom:0;left:-6px;width:6px;height:16px;background:var(--ink);clip-path:path("M6 0L.32 12.05C-.4 13.58.17 16 1.26 16H6Z")}
.bub.rt::before{left:auto;right:-6px;clip-path:path("M0 0L5.68 12.05C6.4 13.58 5.83 16 4.74 16H0Z")}
@media(max-width:767px){.msg .stage{height:520px}.fcoin,.hide-m{display:none}.badge{font-size:12px;padding:9px 12px}}

/* details */
.det{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.det .col{display:flex;flex-direction:column;gap:80px}
.det .tb{display:flex;flex-direction:column;gap:24px}
.chipa{display:inline-flex;align-items:center;gap:12px;background:var(--ink05);border-radius:100px;padding:8px 24px 8px 8px;font-weight:600;width:max-content}
.chipa .cs{display:flex}
.chipa .cs span{width:28px;height:28px;border-radius:50%;border:2px solid #fff;margin-left:-10px;display:grid;place-items:center;color:#fff;font-size:12px;font-weight:700}
.chipa .cs span:first-child{margin-left:0}
.chipg{display:inline-flex;align-items:center;gap:12px;background:var(--green);color:#fff;border-radius:100px;padding:12px 16px;font-weight:600;width:max-content}
.det .dv{padding:0 48px}
.det .dv .phone{width:248px}
@media(max-width:1159px){.det .dv{padding:0 32px}.det .dv .phone{width:216px}}
@media(max-width:767px){
  .det{display:flex;flex-direction:column;gap:120px}
  .det .col{gap:48px}
  .det .tb{align-items:center;text-align:center;order:2}
  .det .dv{display:flex;justify-content:center;padding:0}
  .det .dv .phone{width:184px}
}
.turn{opacity:0;transform:translateY(160px) rotateY(-80deg);transition:opacity 1s,transform 1.3s cubic-bezier(.2,.8,.2,1)}
.turn.r{transform:translateY(160px) rotateY(80deg)}
.turn.in{opacity:1;transform:none}
.persp{perspective:1200px}

/* wallet / landscape */
.center{text-align:center;display:flex;flex-direction:column;align-items:center;gap:64px}
.center .hd{display:flex;flex-direction:column;align-items:center;gap:8px}
.center .hd h2{max-width:420px}
.wide{width:100%;max-width:640px;aspect-ratio:2.16;container-type:inline-size;border-radius:7.4%/16%;padding:1.3%;position:relative;
  background:linear-gradient(145deg,#4a4a52 0%,#16161a 22%,#2c2c33 48%,#0c0c0f 72%,#3a3a42 100%);
  box-shadow:0 50px 60px -10px rgba(12,30,20,.35),0 18px 24px rgba(0,0,0,.18),inset 0 0 0 1px rgba(255,255,255,.18),inset 0 0 0 3px #08080a;
  opacity:0;transform:translateY(32px) scale(.8) rotateX(45deg);transition:1s cubic-bezier(.2,.8,.2,1)}
.wide.in{opacity:1;transform:none}
.wide .ws{height:100%;border-radius:6.3%/13.5%;overflow:hidden;position:relative;color:#fff;font-size:1.85cqw;
  background:radial-gradient(60% 80% at 10% 0%,rgba(46,107,63,.5),transparent 70%),radial-gradient(50% 70% at 100% 100%,rgba(31,122,140,.25),transparent 70%),#0c1712;
  display:grid;grid-template-columns:1fr 1.35fr 1fr;gap:3%;padding:5% 6% 5% 9%;align-items:center;text-align:left}
.wide .ws::before{content:"";position:absolute;left:2%;top:50%;transform:translateY(-50%);width:3.6%;height:28%;background:#000;border-radius:99px}
.wide .ws::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.08),transparent 35%);pointer-events:none}
.center .lead{max-width:440px}

/* features 3D */
.fx{width:100%;height:563px;perspective:1200px;position:relative;cursor:pointer;opacity:0;transform:translateY(64px) scale(.8);transition:1s cubic-bezier(.2,.8,.2,1)}
.fx.in{opacity:1;transform:none}
.fc{position:absolute;left:50%;top:50%;width:320px;aspect-ratio:.749;margin:-213px 0 0 -160px;border-radius:20px;border:1px solid rgba(255,255,255,.2);box-shadow:0 16px 24px rgba(0,0,0,.2);overflow:hidden;color:#fff;padding:28px;display:flex;flex-direction:column;justify-content:flex-end;text-align:left;transition:transform .9s cubic-bezier(.3,.8,.3,1),filter .9s}
.fc .ill{position:absolute;inset:0;display:grid;place-items:center;padding-bottom:80px}
.fc h3{font-size:32px;font-weight:700;letter-spacing:-.04em;position:relative}
.fc p{position:relative;font-size:15px;opacity:.8;margin-top:6px;font-weight:500}
.fc[data-pos="0"]{transform:none;z-index:4}
.fc[data-pos="1"]{transform:translateX(70%) translateZ(-220px) rotateY(-60deg);z-index:3;filter:brightness(.85)}
.fc[data-pos="2"]{transform:translateZ(-360px);z-index:1;filter:brightness(.7)}
.fc[data-pos="3"]{transform:translateX(-70%) translateZ(-220px) rotateY(60deg);z-index:3;filter:brightness(.85)}
.hint{font-size:14px;color:var(--ink50);margin-top:-40px}
@media(max-width:767px){.fx{height:300px}.fc{width:184px;margin:-123px 0 0 -92px;padding:16px;border-radius:16px}.fc h3{font-size:20px}.fc p{display:none}.fc .ill{padding-bottom:40px;transform:scale(.6)}.hint{margin-top:-20px}}

/* download */
.dl .dev{width:240px;height:240px;overflow:hidden;position:relative}
.dl .dev .phone{width:100%;position:relative}
.dl .dev::after{content:"";position:absolute;left:0;right:0;bottom:0;height:144px;background:linear-gradient(rgba(255,255,255,0),#fff);z-index:3}
.dl .dev .rise2{opacity:0;transform:translateY(200px);transition:1.2s cubic-bezier(.2,.8,.2,1)}
.dl .dev .rise2.in{opacity:1;transform:none}
@media(max-width:767px){.dl .dev{width:200px;height:200px}}

/* footer */
footer{padding:240px 24px 64px}
footer .in{max-width:800px;margin:0 auto;border-top:1px solid var(--ink10);padding-top:64px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
footer .info{display:flex;flex-direction:column;gap:20px}
footer .info p{max-width:224px;color:var(--ink65);font-weight:500;font-size:16px;line-height:1.24}
footer .legal a{font-size:14px;font-weight:600;color:var(--ink65);margin-right:16px}
footer .legal a:hover,footer .menu2 a:hover{color:var(--ink)}
footer .legal small{display:block;margin-top:8px;font-size:14px;color:var(--ink50);font-weight:500;max-width:300px;line-height:1.35}
footer .menu2{display:grid;grid-template-columns:1fr 1fr;gap:40px 16px}
footer .menu2 h2{font-size:14px;font-weight:500;letter-spacing:0;color:var(--ink50);margin-bottom:16px}
footer .menu2 a{display:block;padding:4px 0;font-weight:600;color:var(--ink65);transition:.2s}
@media(max-width:767px){footer{padding:200px 24px 48px}footer .in{display:flex;flex-direction:column-reverse;gap:48px}}
.blurbar{position:fixed;left:0;right:0;bottom:0;height:144px;pointer-events:none;z-index:40;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);mask-image:linear-gradient(transparent,#000);-webkit-mask-image:linear-gradient(transparent,#000)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}.rv,.pop,.rise,.rise2,.turn,.wide,.fx{opacity:1!important;transform:none!important;filter:none!important}.rise{transform:translateX(-50%)!important}}

/* ==========================================================
   ODD HOURS ADDITIONS: real screenshots in the phone frame,
   app icons, fine print and documents. Same tokens as above.
   ========================================================== */
.phone .scr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.logos a{display:block;line-height:0}
.logos img,.logos svg{height:48px;width:48px;border-radius:12px;opacity:.55;filter:grayscale(1);transition:.3s}
.logos a:hover img,.logos a:hover svg{opacity:1;filter:none}
@media(max-width:767px){.logos img,.logos svg{height:32px;width:32px;border-radius:8px}}
.av.img{background-size:cover;background-position:center}
.store{cursor:pointer}
.note{font-size:14px;color:var(--ink50);font-weight:500;margin-top:-40px}
@media(max-width:767px){.note{margin-top:-20px}}
.fine p{font-size:16px;line-height:1.5;color:var(--ink65);font-weight:500;max-width:640px}
.fine p+p{margin-top:16px}
.fine a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.doc{padding-top:168px}
.doc-body{max-width:640px;overflow-wrap:anywhere}
.doc-body h1{font-size:56px;font-weight:700;letter-spacing:-.04em;line-height:1}
.doc-body .updated{margin-top:16px;font-size:16px;color:var(--ink50);font-weight:500}
.doc-body h2{font-size:24px;font-weight:700;letter-spacing:-.03em;line-height:1.15;margin-top:48px;padding-top:24px;border-top:1px solid var(--ink10)}
.doc-body h3{font-size:18px;font-weight:700;letter-spacing:-.02em;margin-top:24px}
.doc-body p,.doc-body li{margin-top:12px;color:var(--ink65);font-size:17px;line-height:1.6}
.doc-body ul{padding-left:20px}
.doc-body a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.doc-body strong{color:var(--ink)}
.doc-links{display:flex;gap:24px;margin-bottom:40px}
@media(max-width:767px){.doc{padding-top:120px}.doc-body h1{font-size:40px}}
/* slimmer bezels (Ben, 2026-11-08) */
.phone{padding:1.2%}
.phone .scr{border-radius:14.8%/6.9%}
.wide{padding:.6%}
.wide .ws{border-radius:6.9%/14.8%}
/* app icons in the hero tiles (Ben, 2026-11-08) */
.ic.app{background-size:cover;background-position:center}
.ic.app::before,.ic.app::after{display:none}

/* ==========================================================
   OUTDOORS PASS (Ben, 2026-11-08): warm paper, bush and sea
   colours, topo contours, ridgelines and a condensed display
   face that matches the apps. Layout and motion unchanged.
   ========================================================== */
:root{
  --ink:#1c2620;--ink65:rgba(28,38,32,.68);--ink50:rgba(28,38,32,.52);--ink10:rgba(28,38,32,.12);--ink05:rgba(28,38,32,.06);
  --bg:#f1ede4;--paper0:rgba(241,237,228,0);--bush:#1d3a2a;--kowhai:#f2b33d;
  --purple:linear-gradient(225deg,#3f8c55,#1d4a2c);
  --red:linear-gradient(225deg,#e0533f,#a8222f);
  --orange:linear-gradient(225deg,#f6c445,#e8792b);
  --pink:linear-gradient(225deg,#e8792b,#9c3b1f);
  --green:linear-gradient(225deg,#6aa84f,#3f7d2c);
  --blue:linear-gradient(225deg,#2b8ca3,#0c4f63);
  --cyan:linear-gradient(225deg,#4fb8a8,#0c6f79);
  --display:"Barlow Condensed","Arial Narrow",Inter,sans-serif;
}
:focus-visible{outline-color:#2e6b3f}
::selection{background:#2e6b3f;color:#fff}

/* type: condensed and a touch bigger, like a trail sign */
h1,h2,h3,.h3,.about p.big,.about .line,.stat .v,.fc h3,.doc-body h1,.doc-body h2{font-family:var(--display);letter-spacing:-.01em}
h1{font-size:104px;font-weight:700;line-height:.92}
h2{font-size:60px;font-weight:700;line-height:.98}
h3,.h3{font-size:46px;font-weight:700;line-height:1}
.about p.big,.about .line{font-size:58px;font-weight:600;line-height:1}
.stat .v{font-size:64px;font-weight:700}
.fc h3{font-size:40px}
.doc-body h1{font-size:72px}
.doc-body h2{font-size:30px;font-weight:700}
@media(max-width:1159px){h1{font-size:88px}h2{font-size:52px}h3,.h3{font-size:40px}.about p.big,.about .line{font-size:50px}}
@media(max-width:767px){h1{font-size:58px}h2{font-size:44px}h3,.h3{font-size:34px}.about p.big,.about .line{font-size:42px}.stat .v{font-size:48px}.fc h3{font-size:26px}.doc-body h1{font-size:52px}}
.label{text-transform:uppercase;letter-spacing:.12em;font-size:13px;font-weight:700;color:#2e6b3f}

/* paper instead of white */
nav::before{background:linear-gradient(var(--bg) 50%,var(--paper0))}
.menu{background:var(--bg)}
.devices .fade,.dl .dev::after{background:linear-gradient(var(--paper0),var(--bg))}
.av,.chipa .cs span{border-color:var(--bg)}
.store{background:var(--bush);border-color:rgba(255,255,255,.18)}
.dblock{background:#e6e0d2}

/* topo contours behind the hero */
.hero{position:relative}
.hero::before{content:"";position:absolute;left:0;right:0;top:0;height:780px;background:url(assets/art/topo.svg) center top/1500px auto;opacity:.13;pointer-events:none;
  -webkit-mask-image:linear-gradient(#000 45%,transparent);mask-image:linear-gradient(#000 45%,transparent)}
.hero>.wrap{position:relative;z-index:1}
/* ridgelines and a sun behind the phones, fading into the page like mist */
.hero-land{position:absolute;left:0;right:0;bottom:0;height:470px;overflow:hidden;pointer-events:none}
.hero-land img{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:max(1600px,100%);height:auto;display:block}
.hero-land::after{content:"";position:absolute;left:0;right:0;bottom:0;height:230px;background:linear-gradient(var(--paper0),var(--bg))}
@media(max-width:767px){.hero-land{height:300px}.hero-land img{width:1000px}}

/* koru in place of the glowing orb */
.koru{width:44px;height:44px;color:#e8792b;flex:none}
@media(max-width:1159px){.koru{width:38px;height:38px}}
@media(max-width:767px){.koru{width:32px;height:32px}}
.fcoin{color:#fff}
.fcoin svg{display:block}

/* stat cards and feature cards: contour lines and a ridge on the colour */
.stat::before,.fc::before{content:"";position:absolute;inset:0;background:url(assets/art/topo-white.svg) center/700px auto;opacity:.16;pointer-events:none}
.fc::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46%;background:url(assets/art/ridge-card.svg) center bottom/cover no-repeat;pointer-events:none}
.fc>*{position:relative;z-index:1}
.fc .ill{position:absolute;z-index:1}
.stat{border-color:rgba(255,255,255,.35)}

/* phone UIs drawn in the page: night in the bush */
.wide .ws{background:radial-gradient(60% 80% at 10% 0%,rgba(46,107,63,.55),transparent 70%),radial-gradient(50% 70% at 100% 100%,rgba(31,122,140,.35),transparent 70%),#0c1712}

/* footer: the bush comes down to meet it */
footer{padding:200px 0 0;background:transparent}
.foot-land{position:relative;height:250px;overflow:hidden}
.foot-land img{position:absolute;left:50%;bottom:-1px;transform:translateX(-50%);width:max(1600px,100%);height:auto;display:block}
.foot-body{background:var(--bush);padding:56px 24px 72px;color:#f1ede4;position:relative}
.foot-body::before{content:"";position:absolute;inset:0;background:url(assets/art/topo-white.svg) center/1400px auto;opacity:.05;pointer-events:none}
footer .in{border-top:0;padding-top:0;position:relative}
footer .info p,footer .legal a,footer .menu2 a{color:rgba(241,237,228,.78)}
footer .legal small{color:rgba(241,237,228,.55)}
footer .menu2 h2{color:var(--kowhai);font-family:Inter,system-ui,sans-serif;text-transform:uppercase;letter-spacing:.12em;font-size:12px;font-weight:700}
footer .legal a:hover,footer .menu2 a:hover{color:#fff}
footer .logo svg path{fill:#f1ede4}
footer .logo:hover{background:#f1ede4}
footer .logo:hover svg path{fill:var(--bush)}
footer .made{max-width:800px;margin:48px auto 0;font-family:var(--display);font-size:22px;font-weight:600;letter-spacing:.02em;color:rgba(241,237,228,.6);position:relative}
@media(max-width:767px){footer{padding-top:140px}.foot-land{height:150px}.foot-land img{width:1000px}.foot-body{padding:40px 24px 56px}}

/* documents on paper */
.doc-body h2{border-top-color:var(--ink10)}
/* the phones fade into the hills instead of onto a paper box */
.devices .fade{display:none}
.devices{-webkit-mask-image:linear-gradient(#000 58%,transparent 96%);mask-image:linear-gradient(#000 58%,transparent 96%)}
.dl .dev{-webkit-mask-image:linear-gradient(#000 45%,transparent);mask-image:linear-gradient(#000 45%,transparent)}
.dl .dev::after{display:none}
.foot-land{height:300px}
.chipa .cs span{display:grid;place-items:center}
/* calmer intro (Ben: too much going on) */
.about p.big,.about .line{font-size:46px}
@media(max-width:1159px){.about p.big,.about .line{font-size:42px}}
@media(max-width:767px){.about p.big,.about .line{font-size:34px}}