/* Blue Hour website: shared look (frosted glass at dusk, bold Inter). */
:root{
  --dusk:#101A3C; --night:#0B0F1C; --blue:#3D5FC9; --blue-hi:#5B8CFF; --violet:#8E7FD0; --pink:#E27DA8; --ember:#F2A66E; --ember-hi:#F7CBA6;
  --frost:#A9C2E2; --mist:#E9EEF6; --ink:#101A3C; --white:#FFFFFF;
  --glass:rgba(255,255,255,.08); --glass-2:rgba(255,255,255,.14); --line:rgba(255,255,255,.16);
  --dawn:linear-gradient(110deg,#5B8CFF,#8E7FD0,#E27DA8,#F2A66E);
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--night);color:var(--white);font-family:var(--font);font-size:18px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:900;letter-spacing:-.045em;line-height:.98;text-wrap:balance}
p{margin:0}
.wrap{max-width:1200px;margin:0 auto;padding-inline:24px}
.nw{white-space:nowrap}
:focus-visible{outline:3px solid var(--ember);outline-offset:3px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:800 16px var(--font);padding:15px 26px;border-radius:999px;border:0;cursor:pointer;text-decoration:none;transition:transform .15s,box-shadow .2s}
.btn:active{transform:scale(.97)}
.btn-white{background:#fff;color:var(--ink)}
.btn-glow{background:var(--dawn);color:#fff;box-shadow:0 10px 40px -10px rgba(226,125,168,.7)}
.btn-ghost{background:var(--glass);color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35)}
.eyebrow{font-size:14px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ember-hi)}
.grain{position:absolute;inset:0;pointer-events:none;opacity:.13;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E")}
.blob{position:absolute;border-radius:50%;pointer-events:none;filter:none!important;-webkit-mask:radial-gradient(closest-side,#000 0%,rgba(0,0,0,.55) 45%,transparent 100%);mask:radial-gradient(closest-side,#000 0%,rgba(0,0,0,.55) 45%,transparent 100%);will-change:transform}
.glass{background:rgba(255,255,255,.075);border:1px solid rgba(255,255,255,.16);border-radius:24px}

/* nav */
.nav{position:fixed;left:0;right:0;top:0;z-index:50;padding-top:env(safe-area-inset-top,0px);transition:background .3s,border-color .3s;border-bottom:1px solid transparent}
.nav.solid{background:rgba(11,15,28,.72);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-color:var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;gap:16px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:900;font-size:20px;letter-spacing:-.03em}
.brand svg{width:34px;height:34px}
.links{display:flex;gap:28px;font-size:15px;font-weight:700}
.links a{text-decoration:none;opacity:.85}.links a:hover,.links a[aria-current]{opacity:1}
@media (max-width:900px){.links{display:none}}
.nav .sm{display:none}
@media (max-width:480px){.nav .lg{display:none}.nav .sm{display:inline}}

/* sections */
section{position:relative}
.sec{padding-block:120px}
@media (max-width:700px){.sec{padding-block:80px}}
.head{max-width:820px}
.head h2{font-size:clamp(38px,5.6vw,72px);margin-top:14px}
.head p{margin-top:18px;font-size:20px;font-weight:600;color:rgba(255,255,255,.82);max-width:640px;text-wrap:balance}
.center{text-align:center;margin-inline:auto}.center p{margin-inline:auto}

/* plans (home teaser + pricing page) */
.plans{margin-top:56px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch}
@media (max-width:940px){.plans{grid-template-columns:minmax(0,1fr);max-width:480px;margin-inline:auto}}
.plan{position:relative;padding:32px 28px;display:flex;flex-direction:column;gap:16px}
.plan h3{font-size:26px;letter-spacing:-.03em}
.plan .who{font-size:15px;font-weight:600;color:rgba(255,255,255,.75)}
.plan .amt{display:flex;align-items:baseline;gap:6px}
.plan .amt b{font-size:58px;font-weight:900;letter-spacing:-.05em;line-height:1}
.plan .amt span{font-size:16px;font-weight:700;color:rgba(255,255,255,.75)}
.plan ul{list-style:none;padding:0;margin:4px 0 8px;display:flex;flex-direction:column;gap:10px;font-size:16px;font-weight:600}
.plan li{display:flex;gap:10px;align-items:flex-start}
.plan li::before{content:"✓";flex:none;display:inline-flex;width:22px;height:22px;margin-top:1px;border-radius:50%;background:rgba(255,255,255,.9);color:var(--ink);font-size:12px;align-items:center;justify-content:center;font-weight:900}
.plan .btn{margin-top:auto}
.plan.feat{background:rgba(13,19,42,.92);border:0;transform:translateY(-14px)}
@media (max-width:940px){.plan.feat{transform:none}}
.plan.feat::before{content:"";position:absolute;inset:-2px;border-radius:26px;padding:2px;background:var(--dawn);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.plan.feat::after{content:"";position:absolute;inset:-18px;border-radius:40px;background:var(--dawn);filter:blur(34px);opacity:.45;z-index:-1;animation:breathe 4s ease-in-out infinite}
@keyframes breathe{50%{opacity:.7}}
.badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:13px;font-weight:900;letter-spacing:.06em;padding:7px 14px;border-radius:999px;background:var(--dawn);color:#fff}
.trial{margin:28px auto 0;display:flex;align-items:center;justify-content:center;gap:10px;font-size:17px;font-weight:800;text-align:center;flex-wrap:wrap}
.trial i{font-style:normal;padding:6px 12px;border-radius:999px;background:rgba(242,166,110,.2);color:var(--ember-hi)}

/* forms */
.formbox{position:relative;max-width:880px;margin:48px auto 0;padding:36px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:640px){.formbox{grid-template-columns:minmax(0,1fr);padding:22px}}
.formbox label{display:flex;flex-direction:column;gap:8px;font-size:14px;font-weight:800}
.formbox .full{grid-column:1/-1}
input,select,textarea{font:600 16px var(--font);color:#fff;padding:15px 16px;border-radius:16px;border:1.5px solid rgba(255,255,255,.25);background:rgba(11,15,28,.45);width:100%}
input::placeholder{color:rgba(255,255,255,.45)}
select option{color:#000}
.hp{position:absolute;left:-9999px}
.note{min-height:24px;font-weight:700;font-size:15px}

/* faq */
.faq{max-width:820px;margin:48px auto 0;display:flex;flex-direction:column;gap:12px}
details{padding:20px 24px}
summary{cursor:pointer;font-weight:800;font-size:19px;letter-spacing:-.02em;list-style:none;display:flex;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:24px;line-height:1}
details[open] summary::after{content:"–"}
details p{margin-top:12px;font-size:16px;font-weight:500;color:rgba(255,255,255,.85)}

footer{padding-block:48px 64px;border-top:1px solid var(--line);color:rgba(255,255,255,.75);font-size:14px;font-weight:600}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}
footer nav{display:flex;gap:20px}
footer a{text-decoration:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* savings calculator (calc.js) */
/* calculator */
.calc{position:relative;overflow:hidden;background:var(--mist);color:var(--ink)}
.calc .b1{width:800px;height:800px;left:-260px;top:100px;background:var(--blue);opacity:.55;filter:blur(150px)}
.calc .b2{width:700px;height:700px;right:-220px;bottom:-200px;background:var(--ember);opacity:.65;filter:blur(150px)}
.calc .head p{color:var(--ink);opacity:.85}
.cgrid{position:relative;margin-top:48px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:24px;align-items:start}
@media (max-width:940px){.cgrid{grid-template-columns:minmax(0,1fr)}}
.inputs,.result{padding:28px;border-radius:28px;background:rgba(16,26,60,.86);border:1.5px solid rgba(255,255,255,.3);color:#fff}
.inputs h3,.result h3{font-size:22px;letter-spacing:-.03em}
.field{margin-top:18px}
.field label{display:flex;justify-content:space-between;gap:12px;font-size:15px;font-weight:800}
.field label small{font-weight:600;color:rgba(255,255,255,.7)}
.field output{font-variant-numeric:tabular-nums}
input[type=range]{width:100%;margin-top:10px;padding:0;border:0;background:none;accent-color:#F2A66E;height:28px}
.tools-old{margin-top:18px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:520px){.tools-old{grid-template-columns:minmax(0,1fr)}}
.tool{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:800}
.tool small{font-weight:600;color:rgba(255,255,255,.75)}
.lg-app{display:inline-flex;align-items:center;gap:6px}
.lg-app img{width:20px;height:20px;border-radius:5px;background:#fff;object-fit:contain}
.money{position:relative}
.money::before{content:"$";position:absolute;left:14px;top:50%;transform:translateY(-50%);font-weight:800;color:rgba(255,255,255,.7)}
.money input{padding-left:28px}
.money span{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:13px;font-weight:700;color:rgba(255,255,255,.6)}
.result{position:sticky;top:96px}
.cmp{margin-top:20px;display:flex;flex-direction:column;gap:14px}
.cmp .row{display:flex;flex-direction:column;gap:6px}
.cmp .row div{display:flex;justify-content:space-between;font-weight:800;font-size:15px}
.cmp .row div b{font-variant-numeric:tabular-nums}
.track{height:14px;border-radius:7px;background:rgba(255,255,255,.12);overflow:hidden}
.track i{display:block;height:100%;border-radius:7px;transition:width .5s cubic-bezier(.2,1,.3,1)}
.track .now{background:rgba(255,255,255,.55)}
.track .bh{background:var(--dawn)}
.save{margin-top:24px;padding:22px;border-radius:22px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);text-align:center}
.save .k{font-size:13px;font-weight:900;letter-spacing:.12em;color:var(--ember-hi)}
.save .v{margin-top:6px;font-size:clamp(44px,6vw,64px);font-weight:900;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.save .m{margin-top:8px;font-size:15px;font-weight:700;color:rgba(255,255,255,.85)}
.result .btn{margin-top:20px;width:100%}
.plan-pick{margin-top:6px;font-size:14px;font-weight:700;color:rgba(255,255,255,.8)}

.field .logos{display:inline-flex;gap:4px}
.field .logos img{width:22px;height:22px;border-radius:6px;background:#fff;object-fit:contain}
.appgrid{margin-top:10px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (max-width:520px){.appgrid{grid-template-columns:minmax(0,1fr)}}
.apptog{position:relative;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:16px;background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.18);cursor:pointer;transition:background .2s,border-color .2s,opacity .2s}
.apptog input{position:absolute;opacity:0;pointer-events:none}
.apptog img{width:34px;height:34px;border-radius:9px;background:#fff;object-fit:contain;flex:none}
.apptog span{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.apptog b{font-size:15px;font-weight:800}
.apptog small{font-size:12px;font-weight:600;color:rgba(255,255,255,.7)}
.apptog em{margin-left:auto;font-style:normal;font-size:13px;font-weight:800;color:var(--ember-hi);white-space:nowrap}
.apptog::after{content:"";position:absolute;right:-6px;top:-6px;width:20px;height:20px;border-radius:50%;background:var(--dawn);opacity:0;transition:opacity .2s}
.apptog:has(input:checked){background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.55)}
.apptog:has(input:checked)::after{opacity:1}
.apptog:not(:has(input:checked)){opacity:.55}
.apptog:not(:has(input:checked)) em{text-decoration:line-through}
.apptog:focus-within{outline:3px solid var(--ember);outline-offset:2px}
.extras{margin-top:18px;font-size:15px}
.extras b{font-weight:800}
.extras ul{list-style:none;padding:0;margin:10px 0 0;display:flex;flex-direction:column;gap:8px}
.extras li{display:flex;gap:10px;font-weight:600;color:rgba(255,255,255,.9)}
.extras li::before{content:"✓";flex:none;width:20px;height:20px;border-radius:50%;background:var(--dawn);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:900}
.plan li.hl{font-weight:900}

.plan .bill{margin-top:-8px;font-size:13px;font-weight:700;color:rgba(255,255,255,.7)}
.tw{position:relative}
.nb{position:absolute;top:-8px;right:-8px;min-width:24px;height:24px;padding:0 7px;border-radius:12px;background:#FF3B30;color:#fff;font:800 13px var(--font);font-style:normal;display:flex;align-items:center;justify-content:center;border:2px solid #0B0F1C;box-shadow:0 4px 10px rgba(0,0,0,.4)}
[data-tip]{position:relative;cursor:help}
[data-tip]::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%) translateY(4px);width:max-content;max-width:240px;padding:10px 12px;border-radius:12px;background:#0B0F1C;color:#fff;font:600 13px/1.4 var(--font);text-align:left;text-decoration:none;box-shadow:0 12px 30px rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:opacity .15s,transform .15s;z-index:5;white-space:normal}
[data-tip]:hover::after,[data-tip]:focus::after{opacity:1;transform:translateX(-50%)}
