/* OneHaven site styles. Shared across all pages. */
:root{
  --blue:#1462E1; --blue-dark:#0F4FB8; --purple:#BF9AFE; --purple-soft:#F5F2FF;
  --ink:#1A1A2E; --dark:#0A1628; --muted:#6B7280; --neutral:#F5F7FA; --white:#fff;
  --radius:16px; --shadow:0 4px 24px rgba(16,30,54,.08); --shadow-lg:0 14px 44px rgba(16,30,54,.14);
  --maxw:1140px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
[id]{scroll-margin-top:92px}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;color:var(--ink);background:var(--white);line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,.display{font-family:'Rubik','Inter',sans-serif;font-weight:600;line-height:1.14;letter-spacing:-.01em}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--blue);color:#fff;font-weight:600;font-size:15px;padding:14px 26px;border-radius:999px;border:none;cursor:pointer;transition:.2s;box-shadow:0 6px 18px rgba(20,98,225,.28)}
.btn:hover{background:var(--blue-dark);transform:translateY(-1px)}
.btn.light{background:#fff;color:var(--blue);box-shadow:none}
.btn.ghost{background:rgba(255,255,255,.10);color:#fff;box-shadow:none;border:1px solid rgba(255,255,255,.28)}
.btn.outline{background:transparent;color:var(--blue);border:1.5px solid var(--blue);box-shadow:none}
.eyebrow{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--purple)}
section{padding:84px 0}
.muted{color:var(--muted)}
.micro{font-size:13px;color:var(--muted)}
.center{text-align:center}

/* Header / nav */
header.site{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.72);backdrop-filter:blur(16px) saturate(1.25);border-bottom:1px solid rgba(20,98,225,.10)}
.nav{display:flex;align-items:center;justify-content:space-between;height:76px;gap:16px}
.logo{display:flex;align-items:center;gap:9px}
.logo img{height:40px;width:auto;transition:transform .3s ease}
.logo:hover img{transform:scale(1.05)}
.navlinks{display:flex;gap:28px;font-size:15px;font-weight:500;align-items:center}
.navlinks a{position:relative;padding:6px 0;color:var(--ink);transition:color .2s}
.navlinks a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;border-radius:2px;background:linear-gradient(90deg,var(--blue),var(--purple));transition:width .28s ease}
.navlinks a:hover{color:var(--blue)}
.navlinks a:hover::after,.navlinks a.active::after{width:100%}
/* ============================================================
   NAV DROPDOWNS
   Hover-only menus do not exist on a touchscreen, and on desktop
   they are fiddly. So these are CLICK driven (app.js adds .open),
   with hover kept as a convenience on real mouse devices only.
   ============================================================ */
.navlinks .drop{position:relative}
.navlinks .drop>a{display:inline-flex;align-items:center;gap:5px;cursor:pointer;padding:10px 0}
.navlinks .drop>a i{transition:transform .2s ease}
.navlinks .drop.open>a i{transform:rotate(180deg)}
.navlinks .drop.open>a{color:var(--blue)}

/* Invisible bridge so the mouse can travel into the menu without losing hover. */
.navlinks .drop::before{content:"";position:absolute;left:-10px;right:-10px;top:100%;height:14px}

.navlinks .menu{position:absolute;top:calc(100% + 8px);left:0;background:#fff;border:1px solid #eef1f6;border-radius:12px;box-shadow:var(--shadow-lg);padding:8px;min-width:224px;display:none;flex-direction:column;gap:2px;z-index:70}
.navlinks .drop.open>.menu{display:flex}
@media(hover:hover) and (pointer:fine){
  .navlinks .drop:hover>.menu,.navlinks .drop:focus-within>.menu{display:flex}
}
.navlinks .menu a{padding:10px 12px;border-radius:8px;font-size:14px;font-weight:500;color:var(--ink);white-space:nowrap}
.navlinks .menu a::after{display:none}
.navlinks .menu a:hover{background:var(--purple-soft);color:var(--blue)}

.navlinks .menu .sub{position:relative}
.navlinks .menu .sub::before{content:"";position:absolute;top:0;bottom:0;left:100%;width:14px}
.navlinks .menu .sub>a{display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer}
.navlinks .menu .submenu{position:absolute;top:-8px;left:100%;background:#fff;border:1px solid #eef1f6;border-radius:12px;box-shadow:var(--shadow-lg);padding:8px;min-width:190px;display:none;flex-direction:column;gap:2px;z-index:80}
.navlinks .menu .sub.open>.submenu{display:flex}
@media(hover:hover) and (pointer:fine){
  .navlinks .menu .sub:hover>.submenu,.navlinks .menu .sub:focus-within>.submenu{display:flex}
}
.nav .btn{padding:11px 22px;background:linear-gradient(120deg,var(--blue),#6a2bd8);box-shadow:0 8px 22px rgba(20,98,225,.35);position:relative;overflow:hidden}
.nav .btn::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);animation:shine 5s ease-in-out 1.5s infinite}
@keyframes shine{0%,55%{left:-70%}75%,100%{left:140%}}
.navtoggle{display:none;background:none;border:none;cursor:pointer;color:var(--ink)}
/* ---------- MOBILE NAV ----------
   Previously every submenu was force-expanded at once, making one giant
   unusable list. Now it is a proper accordion: tap a section to open it. */
@media(max-width:940px){
  /* height uses dvh so the panel ends at the REAL bottom of the phone viewport,
     not underneath the browser's own chrome. bottom:0 was cutting the list off. */
  .navlinks{position:fixed;top:76px;left:0;right:0;height:calc(100dvh - 76px);flex-direction:column;background:#fff;padding:10px 20px 60px;gap:0;align-items:stretch;display:none;box-shadow:var(--shadow);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;font-size:16px;z-index:65}
  .navlinks.open{display:flex}
  /* flex children shrink by default, which squashed the list instead of
     letting it overflow, so nothing ever scrolled. Lock them. */
  .navlinks>*{flex:0 0 auto}
  .navtoggle{display:inline-flex;padding:8px;margin:-8px}
  body.navopen{overflow:hidden;touch-action:none}

  .navlinks>a,.navlinks .drop>a{display:flex;align-items:center;justify-content:space-between;width:100%;padding:16px 4px;border-bottom:1px solid #eef1f6;font-weight:600}
  .navlinks a::after{display:none}
  .navlinks .drop{width:100%;position:static}
  .navlinks .drop::before{display:none}

  /* collapsed by default, opened by tapping */
  .navlinks .menu{position:static;display:none;box-shadow:none;border:none;border-bottom:1px solid #eef1f6;border-radius:0;padding:4px 0 10px 14px;min-width:0;background:var(--neutral)}
  .navlinks .drop.open>.menu{display:flex}
  .navlinks .menu a{padding:13px 10px;white-space:normal;font-weight:500}

  .navlinks .menu .sub{position:static}
  .navlinks .menu .sub::before{display:none}
  .navlinks .menu .submenu{position:static;display:none;box-shadow:none;border:none;padding:2px 0 4px 16px;min-width:0;background:transparent}
  .navlinks .menu .sub.open>.submenu{display:flex}

  .nav .btn{display:none}
  .navlinks .mobilecta{display:block;margin-top:20px}
  .navlinks .mobilecta a{display:block;text-align:center;background:linear-gradient(120deg,var(--blue),#6a2bd8);color:#fff;padding:15px;border-radius:999px;font-weight:600;border:none}
}
@media(min-width:941px){ .navlinks .mobilecta{display:none} }

/* ============================================================
   COOKIE CONSENT BANNER
   Injected by app.js. Analytics does not run until Accept is clicked.
   ============================================================ */
#ckbar{position:fixed;left:16px;right:16px;bottom:16px;z-index:9999;background:#0A1628;color:#fff;border-radius:16px;box-shadow:0 20px 60px rgba(10,22,40,.35);padding:20px 24px;display:none;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap;max-width:1080px;margin:0 auto}
#ckbar.show{display:flex;animation:ckup .35s ease}
@keyframes ckup{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
#ckbar p{font-size:14.5px;line-height:1.55;color:#cdd7ea;margin:0;flex:1;min-width:260px}
#ckbar p strong{color:#fff;display:block;margin-bottom:3px;font-size:15px}
#ckbar a{color:var(--purple);text-decoration:underline}
#ckbar .ckbtns{display:flex;gap:10px;flex-wrap:wrap}
#ckbar button{font-family:inherit;font-size:14px;font-weight:600;padding:11px 20px;border-radius:999px;cursor:pointer;border:none;white-space:nowrap}
#ckbar .ckno{background:transparent;color:#cdd7ea;border:1.5px solid rgba(255,255,255,.28)}
#ckbar .ckno:hover{background:rgba(255,255,255,.08);color:#fff}
#ckbar .ckyes{background:linear-gradient(120deg,var(--blue),#6a2bd8);color:#fff;box-shadow:0 6px 18px rgba(20,98,225,.4)}
#ckbar .ckyes:hover{filter:brightness(1.08)}
@media(max-width:640px){#ckbar{padding:18px;left:10px;right:10px;bottom:10px}#ckbar .ckbtns{width:100%}#ckbar button{flex:1}}

/* Generic section head */
.sec-head{text-align:center;max-width:720px;margin:0 auto 52px}
.sec-head h2{font-size:clamp(28px,4vw,42px);margin-top:12px}
.sec-head p{margin-top:14px;font-size:17px;color:var(--muted)}
.alt{background:var(--neutral)}

/* Home hero */
.hero{position:relative;min-height:94vh;display:flex;align-items:center;background:#0A1628;color:#fff;overflow:hidden;padding:100px 0 80px}
.hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.12) 46%,transparent 60%);transform:translateX(-100%);animation:sweep 2.6s ease-in-out .35s 1 forwards;pointer-events:none}
@keyframes sweep{to{transform:translateX(100%)}}
.aurora{position:absolute;inset:-25% -12%;z-index:0;filter:blur(46px)}
.aurora b{position:absolute;border-radius:50%;mix-blend-mode:screen;animation:drift 26s ease-in-out infinite}
.aurora .a1{width:600px;height:600px;background:radial-gradient(circle,#1462E1,transparent 70%);top:-140px;left:-90px}
.aurora .a2{width:660px;height:660px;background:radial-gradient(circle,#8222DF,transparent 70%);bottom:-180px;right:-70px;animation-delay:-9s}
.aurora .a3{width:460px;height:460px;background:radial-gradient(circle,#3298FF,transparent 70%);top:26%;left:44%;animation-delay:-16s}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(70px,-46px) scale(1.14)}66%{transform:translate(-46px,56px) scale(.92)}}
.hero .wrap{position:relative;z-index:2}
.hero .grid2{display:grid;grid-template-columns:1.02fr .98fr;gap:52px;align-items:center}
@media(max-width:920px){.hero .grid2{grid-template-columns:1fr;gap:44px;text-align:center}}
.hero h1{font-size:clamp(36px,5.4vw,60px);font-weight:700;opacity:0;transform:translateY(18px);animation:rise .9s .1s forwards;background:linear-gradient(180deg,#fff 42%,#c7d4fb);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .sub{max-width:560px;margin:22px 0 0;color:#cdd7ea;font-size:19px;opacity:0;transform:translateY(18px);animation:rise .9s .35s forwards}
@media(max-width:920px){.hero .sub{margin-inline:auto}}
.rot{display:inline-block;color:var(--purple);font-weight:700;transition:.38s}
.rot.out{opacity:0;transform:translateY(-9px)}
.hero .cta-row{margin-top:30px;display:flex;gap:14px;flex-wrap:wrap;opacity:0;transform:translateY(18px);animation:rise .9s .55s forwards}
@media(max-width:920px){.hero .cta-row{justify-content:center}}
.reassure{margin-top:14px;font-size:13px;color:#aebbd4;display:flex;gap:16px;flex-wrap:wrap;opacity:0;animation:rise .9s .7s forwards}
@media(max-width:920px){.reassure{justify-content:center}}
.reassure span{display:flex;align-items:center;gap:6px}
.trustbar{margin-top:30px;display:flex;gap:22px;align-items:center;flex-wrap:wrap;color:#aebbd4;font-size:13px;opacity:0;animation:rise .9s .85s forwards}
@media(max-width:920px){.trustbar{justify-content:center}}
.badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);padding:8px 14px;border-radius:999px;font-weight:600;color:#fff}
@keyframes rise{to{opacity:1;transform:none}}

/* Hero device */
.heroart{position:relative;display:flex;justify-content:center}
@media(max-width:920px){.heroart{max-width:460px;margin:0 auto}}
.glow{position:absolute;inset:-34px;border-radius:34px;background:radial-gradient(circle at 50% 42%,rgba(20,98,225,.55),transparent 62%);filter:blur(34px);z-index:0;animation:pulse 5.5s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:.85;transform:scale(1.05)}}
.device{position:relative;z-index:1;width:300px;background:#0d1526;border-radius:44px;padding:12px;box-shadow:0 40px 90px rgba(0,0,0,.55);opacity:0;transform:translateY(24px) scale(.97);animation:rise 1.1s .4s forwards}
.device .notch{position:absolute;top:22px;left:50%;transform:translateX(-50%);width:118px;height:24px;background:#0d1526;border-radius:0 0 16px 16px;z-index:5}
.screen2{background:linear-gradient(180deg,#f4f7fc,#eaf0f9);border-radius:34px;overflow:hidden;height:600px;position:relative}
.statusbar{display:flex;justify-content:space-between;align-items:center;padding:16px 24px 4px;font-size:12px;font-weight:700;color:#1A1A2E}
.statusbar .r{display:flex;gap:5px;align-items:center}
.statusbar i{width:14px;color:#1A1A2E}
.appbody{padding:8px 16px 74px}
.greet{display:flex;align-items:center;justify-content:space-between;margin-top:6px}
.greet h5{font-family:'Rubik';font-size:16px;color:var(--ink)}
.protpill{display:inline-flex;align-items:center;gap:6px;background:rgba(34,197,94,.12);color:#16a34a;font-size:10.5px;font-weight:700;padding:5px 10px;border-radius:999px}
.protpill .pdot{width:7px;height:7px;border-radius:50%;background:#22c55e;animation:pmini 1.8s ease-in-out infinite}
@keyframes pmini{0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.5)}50%{box-shadow:0 0 0 5px rgba(34,197,94,0)}}
.fam{display:flex;gap:8px;margin:14px 0}
.fam .m{flex:1;background:#fff;border-radius:14px;padding:10px 4px;text-align:center;box-shadow:0 4px 14px rgba(16,30,54,.06)}
.fam .av{width:32px;height:32px;border-radius:50%;margin:0 auto 6px;display:grid;place-items:center;color:#fff;font-weight:700;font-size:12px;font-family:'Rubik'}
.fam .nm{font-size:11px;font-weight:600;color:var(--ink)}
.fam .st{font-size:9px;margin-top:2px}
.stat{display:flex;gap:8px;margin-bottom:12px}
.stat .s{flex:1;background:#fff;border-radius:14px;padding:12px;box-shadow:0 4px 14px rgba(16,30,54,.06);display:flex;align-items:center;justify-content:space-between}
.stat .s .lbl{font-size:10px;color:var(--muted);font-weight:600}
.stat .s .val{font-family:'Rubik';font-size:16px;color:var(--ink);margin-top:2px}
.rp{animation:ringfill 1.4s 1.5s ease forwards}
@keyframes ringfill{to{stroke-dashoffset:44}}
.feedttl{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin:2px 2px 8px}
.afeed{display:flex;flex-direction:column;gap:8px}
.arow{display:flex;gap:10px;background:#fff;border-radius:13px;padding:10px 11px;box-shadow:0 4px 14px rgba(16,30,54,.06);opacity:0;transform:translateY(10px);animation:rise .6s forwards}
.arow .ic{width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center;color:#fff}
.arow h6{font-family:'Inter';font-size:12px;color:var(--ink);font-weight:600}
.arow p{font-size:10.5px;color:var(--muted);line-height:1.3;margin-top:1px}
.a-warn .ic{background:#f59e0b}.a-info .ic{background:#1462E1}.a-ok .ic{background:#22c55e}
.ar1{animation-delay:1.1s}.ar2{animation-delay:1.5s}.ar3{animation-delay:1.9s}
.navbar{position:absolute;bottom:0;left:0;right:0;height:60px;background:#fff;border-top:1px solid #eef1f6;display:flex;justify-content:space-around;align-items:center;padding-bottom:6px}
.navbar i{color:#c2ccdb;width:21px}
.navbar .on{color:var(--blue)}

/* Interior page hero */
.page-hero{background:radial-gradient(900px 400px at 80% -20%,rgba(191,154,254,.25),transparent),linear-gradient(160deg,#0A1628,#123163);color:#fff;padding:72px 0 64px;text-align:center}
.page-hero h1{font-size:clamp(30px,4.4vw,48px)}
.page-hero p{max-width:620px;margin:16px auto 0;color:#cdd7ea;font-size:18px}
.crumbs{font-size:13px;color:#9fb0cd;margin-bottom:14px}
.crumbs a:hover{color:#fff}

/* Feature grid / cards */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid.two{grid-template-columns:repeat(2,1fr)}
@media(max-width:860px){.grid,.grid.two{grid-template-columns:1fr}}
.card{background:#fff;border-radius:var(--radius);padding:30px;box-shadow:var(--shadow);transition:.25s}
.card:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px)}
.card .ico{width:48px;height:48px;border-radius:12px;background:var(--purple-soft);display:grid;place-items:center;color:var(--blue);margin-bottom:18px}
.card h3{font-size:19px;margin-bottom:8px}
.card p{font-size:15px;color:var(--muted)}

/* Chooser */
.chooser{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:900px;margin:0 auto}
@media(max-width:800px){.chooser{grid-template-columns:1fr}}
.choice{background:#fff;border:1px solid #e8ecf3;border-radius:var(--radius);padding:22px;cursor:pointer;transition:.2s;text-align:center}
.choice:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.choice.on{border-color:var(--blue);box-shadow:0 0 0 3px rgba(20,98,225,.12)}
.choice .ico{width:44px;height:44px;border-radius:12px;background:var(--purple-soft);display:grid;place-items:center;color:var(--blue);margin:0 auto 12px}
.choice h3{font-size:17px}
.choice-panel{max-width:760px;margin:22px auto 0;background:var(--purple-soft);border-radius:var(--radius);padding:24px 28px;text-align:center;font-size:17px;color:var(--ink)}

/* Founder */
.founder{display:grid;grid-template-columns:auto 1fr;gap:32px;align-items:center;max-width:900px;margin:0 auto;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:36px}
@media(max-width:720px){.founder{grid-template-columns:1fr;text-align:center}}
.avatar{width:132px;height:132px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--purple));display:grid;place-items:center;color:#fff;font-family:'Rubik';font-size:44px;font-weight:700;justify-self:center}
.founder q{font-size:19px;font-style:normal;display:block;margin-bottom:16px;line-height:1.5}
.founder .name{font-weight:700}
.founder .role{color:var(--muted);font-size:14px}

/* Trust points */
.trustgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:860px;margin:0 auto}
@media(max-width:700px){.trustgrid{grid-template-columns:1fr}}
.tpoint{display:flex;gap:14px;align-items:flex-start}
.tpoint .ico{width:42px;height:42px;flex:none;border-radius:11px;background:rgba(20,98,225,.10);display:grid;place-items:center;color:var(--blue)}
.tpoint h3{font-size:17px;margin-bottom:4px}
.tpoint p{font-size:14px;color:var(--muted)}

/* Testimonials */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:860px){.quotes{grid-template-columns:1fr}}
.quote{background:#fff;border-radius:var(--radius);padding:26px;box-shadow:var(--shadow)}
.quote .stars{color:#f5b301;font-size:14px;margin-bottom:10px;letter-spacing:2px}
.quote p{font-size:15px;margin-bottom:16px}
.quote .who{display:flex;align-items:center;gap:12px}
.quote .who .pic{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--purple),var(--blue));display:grid;place-items:center;color:#fff;font-weight:700;font-size:14px}
.quote .who b{font-size:14px;display:block}
.quote .who span{color:var(--muted);font-size:13px}

/* Pricing */
.contrast{max-width:760px;margin:0 auto 44px;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.contrast .row{display:grid;grid-template-columns:1.4fr 1fr 1fr;font-size:14px}
.contrast .row>div{padding:15px 18px;border-bottom:1px solid #eef1f6}
.contrast .row.head>div{font-weight:700;background:var(--neutral)}
.contrast .row .oh{background:rgba(20,98,225,.05);font-weight:600;color:var(--ink)}
.contrast .row div:first-child{color:var(--muted)}
.contrast .row.head div:first-child{color:var(--ink)}
.toggle{display:inline-flex;background:#eef1f6;border-radius:999px;padding:5px;margin:0 auto 38px;gap:4px}
.toggle button{border:none;background:none;padding:9px 20px;border-radius:999px;font-weight:600;font-size:14px;cursor:pointer;color:var(--muted)}
.toggle button.on{background:#fff;color:var(--ink);box-shadow:0 2px 8px rgba(0,0,0,.08)}
.plans{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:820px;margin:0 auto}
@media(max-width:720px){.plans{grid-template-columns:1fr}}
.plan{background:#fff;border-radius:var(--radius);padding:32px;box-shadow:var(--shadow);border:1px solid #eef1f6}
.plan.feat{background:linear-gradient(160deg,#123163,#1650b8);color:#fff;border:none;position:relative}
.plan.feat .tagpill{position:absolute;top:18px;right:18px;background:var(--purple);color:#241a3a;font-size:11px;font-weight:700;padding:5px 11px;border-radius:999px;letter-spacing:.03em}
.plan h3{font-size:20px}
.price{font-size:44px;font-weight:700;font-family:'Rubik';margin:10px 0 2px}
.price small{font-size:16px;font-weight:400;color:var(--muted)}
.plan.feat .price small{color:#c9d6ee}
.per{font-size:13px;color:var(--muted);min-height:18px}
.plan.feat .per{color:#c9d6ee}
.plan ul{list-style:none;margin:22px 0}
.plan li{display:flex;gap:9px;align-items:flex-start;font-size:14px;padding:6px 0}
.plan li i{color:var(--blue);flex:none;width:18px;height:18px}
.plan.feat li i{color:var(--purple)}
.plan .btn{width:100%;justify-content:center;margin-top:8px}

/* ===== Real photography and app screens ===== */

/* Split section: image one side, copy the other */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;max-width:1060px;margin:0 auto}
.split.flip .splitimg{order:2}
@media(max-width:820px){.split{grid-template-columns:1fr;gap:32px}.split.flip .splitimg{order:0}}
.splitimg img{width:100%;border-radius:20px;box-shadow:var(--shadow-lg);display:block}
.splitcopy h2{font-size:clamp(24px,3vw,34px);margin-bottom:14px}
.splitcopy p{color:var(--muted);font-size:17px;margin-bottom:14px}
.splitcopy ul{list-style:none;margin:18px 0 0}
.splitcopy li{display:flex;gap:10px;align-items:flex-start;padding:7px 0;font-size:15.5px}
.splitcopy li i{color:var(--blue);flex:none;width:19px;height:19px;margin-top:2px}

/* Photo card: image on top of a card.
   aspect-ratio 4/3 (not 16/10) and object-position biased upward, because a
   centred crop on a 16/10 box was slicing the tops of people's heads off. */
.card .photo{width:calc(100% + 56px);margin:-28px -28px 20px;border-radius:var(--radius) var(--radius) 0 0;display:block;aspect-ratio:4/3;object-fit:cover;object-position:center 25%}

/* Phone screens row (real app screenshots).
   The three source images have different aspect ratios and different amounts
   of padding baked in, so a plain flex row rendered them at different sizes
   and heights. This gives every screen an identical box and centres the phone
   inside it, so the row reads as one clean set. */
.screens{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;align-items:start;max-width:900px;margin:0 auto}
.screens figure{margin:0;text-align:center;display:flex;flex-direction:column;align-items:center}
.screens .shot{width:100%;height:420px;display:flex;align-items:center;justify-content:center}
.screens img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;filter:drop-shadow(0 22px 46px rgba(16,30,54,.20))}
.screens figcaption{margin-top:20px;font-size:15px;color:var(--muted);line-height:1.5;max-width:230px}
@media(max-width:820px){
  .screens{grid-template-columns:1fr;gap:44px}
  .screens .shot{height:auto;max-height:460px}
  .screens figcaption{max-width:320px}
}

/* Full-bleed image band */
.band{position:relative;border-radius:24px;overflow:hidden;max-width:1060px;margin:0 auto;box-shadow:var(--shadow-lg)}
.band img{width:100%;display:block;aspect-ratio:16/7;object-fit:cover;object-position:center 30%}
.band .bandcopy{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:0 8%;background:linear-gradient(90deg,rgba(10,22,40,.86) 0%,rgba(10,22,40,.62) 45%,transparent 78%);color:#fff}
.band .bandcopy h2{font-size:clamp(22px,2.8vw,32px);max-width:520px}
.band .bandcopy p{margin-top:10px;color:#cdd7ea;max-width:460px;font-size:16px}
@media(max-width:700px){.band img{aspect-ratio:1/1}.band .bandcopy{background:linear-gradient(180deg,rgba(10,22,40,.35),rgba(10,22,40,.9))}}

/* Blog card thumbnails on the-haven.html: bias the crop upward so faces survive */
.grid a.card img{object-position:center 25%}

/* Social proof avatars */
.proof{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:26px}
.proof img{height:44px;width:auto}
.proof span{font-size:15px;color:var(--muted)}
.proof b{color:var(--ink)}

/* App store badges */
.stores{display:flex;justify-content:center;margin-top:22px}
.stores img{height:52px;width:auto}
.stores.dark img{filter:none}

/* Comparison chart image */
.chartimg{max-width:1060px;margin:0 auto;border-radius:18px;overflow:hidden;box-shadow:var(--shadow-lg);background:#fff}
.chartimg img{width:100%;display:block}

/* Backed-by badge strip (NVIDIA Inception, AWS) */
.backed{display:flex;align-items:center;justify-content:center;gap:26px;flex-wrap:wrap;padding:22px 0;margin-top:34px;border-top:1px solid rgba(255,255,255,.10)}
.backed .lbl{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#7f92b4}
.backed img{height:44px;width:auto;opacity:.95;border-radius:6px}
.backed .aws{display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:9px 14px}
.backed .aws b{font-family:'Rubik';font-size:15px;font-weight:700;color:#FF9900;letter-spacing:-.01em}
.backed .aws span{font-size:12px;color:#9fb0cd;line-height:1.3}
@media(max-width:640px){.backed{gap:16px}.backed img{height:36px}}

/* FAQ */
.faq{max-width:780px;margin:0 auto}
.faq details{background:#fff;border-radius:12px;box-shadow:var(--shadow);margin-bottom:12px;padding:4px 8px}
.faq summary{cursor:pointer;font-weight:600;padding:18px 12px;list-style:none;display:flex;justify-content:space-between;align-items:center;font-size:16px}
.faq summary::-webkit-details-marker{display:none}
.faq details[open] summary i{transform:rotate(180deg)}
.faq summary i{transition:.2s;color:var(--blue)}
.faq p{padding:0 12px 18px;color:var(--muted);font-size:15px}

/* Prose (blog, legal, generic content) */
.prose{max-width:760px;margin:0 auto}
.prose h2{font-size:26px;margin:34px 0 12px}
.prose h3{font-size:20px;margin:26px 0 10px}
.prose p{margin-bottom:16px;color:#374151}
.prose ul{margin:0 0 16px 20px;color:#374151}
.prose li{margin-bottom:6px}

/* Waitlist / form embeds */
.cta-final{background:linear-gradient(160deg,#123163,#1650b8);color:#fff;text-align:center}
.cta-final h2{font-size:clamp(28px,4vw,40px)}
.cta-final p{color:#cdd7ea;max-width:560px;margin:14px auto 0;font-size:17px}
.founding{max-width:640px;margin:22px auto 0;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.founding span{display:inline-flex;align-items:center;gap:7px;font-size:14px;color:#e6ecf7}
.founding i{color:var(--purple)}
.formwrap{max-width:560px;margin:30px auto 0;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-lg);overflow:hidden}
.formwrap iframe{width:100%;height:560px;border:0;display:block}
.form-slot{max-width:560px;margin:24px auto 0;background:#fff;border:2px dashed #c7d2e5;border-radius:var(--radius);padding:28px;text-align:center;color:var(--muted);font-size:14px}

/* Footer */
footer.site{background:var(--dark);color:#aebbd4;padding:56px 0 30px}
/* Footer columns. Now 5 columns (blurb + Product + Who it's for + Company +
   Get protected), so this is an explicit grid rather than a flex row that
   would leave the last column stranded. */
.fcols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr 1fr;gap:40px;align-items:start}
@media(max-width:1040px){.fcols{grid-template-columns:1fr 1fr 1fr;gap:34px}}
@media(max-width:700px){.fcols{grid-template-columns:1fr 1fr;gap:28px}}
@media(max-width:460px){.fcols{grid-template-columns:1fr;gap:26px}}
footer .logo img{height:46px}
footer h4{color:#fff;font-size:14px;margin-bottom:12px}
footer a{display:block;font-size:14px;padding:4px 0;color:#aebbd4}
footer a:hover{color:#fff}
.fbot{border-top:1px solid rgba(255,255,255,.1);margin-top:36px;padding-top:20px;font-size:13px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

/* Head-to-head prose blocks (compare page) */
.h2h{background:#fff;border-radius:var(--radius);padding:30px;box-shadow:var(--shadow);max-width:860px;margin:0 auto 22px;scroll-margin-top:100px}
.h2h h3{font-size:22px;margin-bottom:10px}
.h2h p{font-size:15.5px;color:var(--muted);margin-bottom:12px}
.h2h p:last-child{margin-bottom:0}
.h2h .verdict{color:var(--ink);font-weight:600}

/* Reveal on scroll */
.reveal{opacity:0;transform:translateY(16px);transition:.6s ease}
.reveal.in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  .hero h1,.hero .sub,.hero .cta-row,.reassure,.trustbar,.device,.arow,.reveal{opacity:1!important;transform:none!important;animation:none!important}
  .aurora b,.glow,.protpill .pdot,.rp,header.site,.nav .btn::after{animation:none!important}
  .hero::before{display:none}
}