/* Mailotte marketing site — dark, vibrant theme + animation. */
:root{
  --bg:#0B0B0D; --bg-2:#141418;
  --surface:rgba(255,255,255,.038); --surface-2:rgba(255,255,255,.06);
  --border:rgba(255,255,255,.09); --border-2:rgba(255,255,255,.06);
  --ink:#F6F5F3; --ink-2:#E7E5E1; --muted:#A6A09A; --faint:#6E6862;
  --blue:#5B8CFF; --blue-ink:#9DBBFF; --blue-soft:rgba(91,140,255,.15);
  --violet:#A855F7; --cyan:#22D3EE; --amber:#FBBF24; --pink:#EC4899;
  --green:#34D399; --green-soft:rgba(52,211,153,.14); --green-ink:#6EE7B7;
  --grad:linear-gradient(120deg,#4F8CFF 0%,#9B5CF6 55%,#D65CF0 100%);
  --glow:0 18px 60px -22px rgba(123,108,246,.55);
  --maxw:1140px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Helvetica,Arial,sans-serif;
  color:var(--ink);background:var(--bg);line-height:1.5;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;position:relative;overflow-x:hidden;}
body::before{content:"";position:fixed;inset:-10%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60% 50% at 50% -8%, rgba(91,140,255,.22), transparent 70%),
    radial-gradient(45% 40% at 88% 8%, rgba(168,85,247,.18), transparent 70%),
    radial-gradient(40% 35% at 6% 14%, rgba(34,211,238,.10), transparent 70%);
  animation:drift 20s ease-in-out infinite alternate;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;height:auto;display:block;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}

.skip{position:absolute;left:-999px;top:0;background:var(--grad);color:#fff;padding:10px 16px;border-radius:0 0 10px 0;z-index:100;}
.skip:focus{left:0;}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px;}

.nav{position:sticky;top:0;z-index:50;background:rgba(11,11,13,.72);backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid var(--border-2);}
.nav .wrap{display:flex;align-items:center;height:64px;gap:28px;}
.brand{display:flex;align-items:center;gap:9px;font-weight:680;font-size:18px;letter-spacing:-.3px;}
.logo{width:28px;height:28px;border-radius:8px;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;box-shadow:0 4px 14px -4px rgba(123,108,246,.7);}
.navlinks{display:flex;gap:22px;margin-left:6px;}
.navlinks a{font-size:14.5px;color:var(--muted);font-weight:500;transition:color .15s;}
.navlinks a:hover{color:var(--ink);}
.navcta{margin-left:auto;display:flex;align-items:center;gap:14px;}
.navcta .signin{font-size:14.5px;color:var(--muted);font-weight:550;}
.navcta .signin:hover{color:var(--ink);}
.navcta .btn{white-space:nowrap;}

.btn{display:inline-flex;align-items:center;gap:8px;font-weight:620;font-size:15px;padding:12px 22px;border-radius:11px;border:1px solid var(--border);background:var(--surface);color:var(--ink);transition:transform .1s ease,box-shadow .2s ease,background .2s;cursor:pointer;backdrop-filter:blur(6px);}
.btn:hover{transform:translateY(-1px);background:var(--surface-2);}
.btn.dark{background:var(--grad);color:#fff;border-color:transparent;box-shadow:var(--glow);background-size:160% 100%;animation:gradShift 9s ease-in-out infinite;}
.btn.dark:hover{box-shadow:0 22px 70px -20px rgba(123,108,246,.8);transform:translateY(-2px);}
.btn.sm{padding:9px 16px;font-size:14px;border-radius:9px;}
.btn.block{width:100%;justify-content:center;}

.eyebrow{font-size:13px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block;background-size:220% 100%;animation:gradShift 9s ease-in-out infinite;}
.section{padding:84px 0;}
.section.tight{padding:56px 0;}
h1,h2,h3{letter-spacing:-.6px;line-height:1.08;color:var(--ink);text-wrap:balance;}
h1{font-size:clamp(40px,6.2vw,64px);font-weight:780;}
h2{font-size:clamp(27px,4vw,41px);font-weight:740;}
h3{font-size:19px;font-weight:660;letter-spacing:-.3px;}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:220% 100%;animation:gradShift 9s ease-in-out infinite;}
.lead{font-size:19px;color:var(--muted);font-weight:430;line-height:1.45;text-wrap:pretty;}
.chip{display:inline-flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--border);padding:7px 14px;border-radius:30px;font-size:13px;font-weight:600;color:var(--ink-2);backdrop-filter:blur(6px);}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:650;padding:3px 11px;border-radius:20px;}
.pill.blue{background:var(--blue-soft);color:var(--blue-ink);}
.shot{border-radius:16px;border:1px solid var(--border);overflow:hidden;aspect-ratio:1280/800;box-shadow:0 50px 130px -40px rgba(79,140,255,.45),0 16px 50px -24px rgba(168,85,247,.35);}

.hero{padding:78px 0 36px;text-align:center;}
.hero .lead{max-width:560px;margin:18px auto 28px;font-size:21px;}
.hero .ctas{display:flex;gap:13px;justify-content:center;flex-wrap:wrap;}
.proof{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin-top:24px;}
.heroshot{max-width:980px;width:100%;margin:48px auto 0;}

.feature{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
.feature.flip .copy{order:2;}
.feature .copy h2{margin:12px 0 14px;}
.feature .copy p{font-size:17px;color:var(--muted);margin-bottom:20px;}
.flist{list-style:none;display:flex;flex-direction:column;gap:12px;}
.flist li{display:flex;gap:11px;font-size:15.5px;color:var(--ink-2);align-items:center;}
.flist .tick{flex:0 0 22px;width:22px;height:22px;border-radius:7px;background:var(--blue-soft);color:var(--blue-ink);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;}
.feat-cta{display:inline-block;margin-top:22px;font-weight:650;font-size:15px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:220% 100%;animation:gradShift 9s ease-in-out infinite;}

.band{position:relative;border-radius:24px;padding:60px;margin:0 24px;overflow:hidden;background:linear-gradient(135deg,#1b1840,#3a2475 48%,#5a2a7a);border:1px solid rgba(255,255,255,.12);}
.band::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(50% 60% at 85% 10%, rgba(214,92,240,.35), transparent 60%),radial-gradient(40% 50% at 5% 90%, rgba(34,211,238,.2), transparent 60%);}
.band>*{position:relative;z-index:1;}
.band h2{color:#fff;}
.band .grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;margin-top:34px;}
.band .item{display:flex;gap:14px;}
.band .item .ic{flex:0 0 40px;width:40px;height:40px;border-radius:11px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;font-size:19px;}
.band .item h3{color:#fff;margin-bottom:3px;}
.band .item p{color:#D9D2EC;font-size:14.5px;}

.prices{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start;}
.price{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:28px;display:flex;flex-direction:column;gap:5px;backdrop-filter:blur(8px);}
.price.reco{border-color:transparent;position:relative;background:linear-gradient(var(--bg-2),var(--bg-2)) padding-box,var(--grad) border-box;border:1.5px solid transparent;box-shadow:var(--glow);}
.price.reco .tag{position:absolute;top:-12px;left:28px;background:var(--grad);color:#fff;font-size:11.5px;font-weight:700;letter-spacing:.5px;padding:4px 12px;border-radius:20px;box-shadow:0 6px 18px -6px rgba(123,108,246,.7);}
.price .pname{font-size:20px;font-weight:700;}
.price .pdesc{font-size:13.5px;color:var(--muted);min-height:38px;}
.price .pcost{font-size:38px;font-weight:780;letter-spacing:-1px;margin:6px 0;}
.price .pcost small{font-size:15px;font-weight:500;color:var(--faint);letter-spacing:0;}
.price ul{list-style:none;display:flex;flex-direction:column;gap:9px;margin:12px 0 20px;}
.price li{font-size:14px;color:var(--ink-2);display:flex;gap:10px;}
.price li .tick{color:var(--green-ink);font-weight:800;}
.price .btn{margin-top:auto;}

.faq{max-width:760px;margin:0 auto;}
.faq details{border-bottom:1px solid var(--border);padding:18px 4px;}
.faq summary{font-size:17px;font-weight:620;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;color:var(--ink);}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";color:var(--faint);font-weight:400;font-size:22px;line-height:1;transition:transform .2s;}
.faq details[open] summary::after{content:"\2013";}
.faq p{color:var(--muted);font-size:15.5px;margin-top:11px;}

.endcta{text-align:center;}
.endcta h2{margin-bottom:22px;}
.foot{border-top:1px solid var(--border-2);padding:50px 0 64px;color:var(--muted);font-size:14px;}
.foot .cols{display:flex;gap:60px;flex-wrap:wrap;}
.foot .col h4{font-size:13px;text-transform:uppercase;letter-spacing:.6px;color:var(--faint);margin-bottom:13px;}
.foot .col a{display:block;margin-bottom:8px;color:var(--muted);}
.foot .col a:hover{color:var(--ink);}
.foot .legal{margin-top:36px;font-size:13px;color:var(--faint);}

.subhero{padding:60px 0 36px;text-align:center;}
.subhero .lead{max-width:600px;margin:16px auto 0;}

/* the promise — two-column never/always */
.promise{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:880px;margin:0 auto;}
.promise .col2{border-radius:18px;padding:26px 28px;}
.promise .never{background:rgba(236,72,153,.07);border:1px solid rgba(236,72,153,.22);}
.promise .always{background:var(--green-soft);border:1px solid rgba(52,211,153,.25);}
.promise h3{font-size:15px;text-transform:uppercase;letter-spacing:.6px;margin-bottom:14px;}
.promise .never h3{color:#F0A6C8;} .promise .always h3{color:var(--green-ink);}
.promise ul{list-style:none;display:flex;flex-direction:column;gap:11px;}
.promise li{display:flex;gap:11px;font-size:15.5px;color:var(--ink-2);align-items:flex-start;}
.promise li span{flex:0 0 18px;font-weight:800;}
.promise .never li span{color:#EC4899;} .promise .always li span{color:var(--green-ink);}
/* ask example queries */
.queries{list-style:none;display:flex;flex-direction:column;gap:10px;}
.queries li{font-size:16px;color:var(--ink-2);background:var(--surface);border:1px solid var(--border);
  border-radius:12px;padding:12px 16px;display:flex;gap:10px;align-items:center;}
.queries li::before{content:"🔍";font-size:14px;opacity:.7;}
@media(max-width:880px){.promise{grid-template-columns:1fr;}}

/* interactive Ask demo */
.demo{max-width:720px;margin:0 auto;}
.demo .pills{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-bottom:22px;}
.demo .qpill{font-size:14px;font-weight:550;color:var(--ink-2);background:var(--surface);
  border:1px solid var(--border);border-radius:30px;padding:9px 15px;cursor:pointer;
  transition:transform .1s ease,border-color .2s,background .2s;backdrop-filter:blur(6px);}
.demo .qpill:hover{transform:translateY(-1px);background:var(--surface-2);}
.demo .qpill.active{border-color:transparent;color:#fff;background:var(--grad);background-size:160% 100%;animation:gradShift 9s ease-in-out infinite;}
.demo .panel{background:var(--bg-2);border:1px solid var(--border);border-radius:20px;overflow:hidden;
  box-shadow:0 40px 90px -40px rgba(79,140,255,.4),0 14px 40px -22px rgba(168,85,247,.3);}
.demo .bar{display:flex;align-items:center;gap:12px;padding:20px 22px;border-bottom:1px solid var(--border-2);font-size:17px;color:var(--ink);}
.demo .bar .mag{opacity:.6;}
.demo .bar .q{min-height:1.2em;}
.demo .bar .caret{display:inline-block;width:2px;height:1.05em;background:var(--blue);margin-left:1px;vertical-align:-2px;animation:blink 1s steps(1) infinite;}
@keyframes blink{50%{opacity:0}}
.demo .ansline{font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  padding:18px 22px 0;display:flex;align-items:center;gap:7px;}
.demo .answer{padding:8px 22px 18px;font-size:18px;line-height:1.6;color:var(--ink);}
.demo .answer b{color:#fff;}
.demo .srcs{padding:0 22px 20px;}
.demo .srclabel{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--faint);margin-bottom:10px;}
.demo .src{display:flex;align-items:center;gap:13px;padding:10px 0;border-top:1px solid var(--border-2);}
.demo .src .av{width:34px;height:34px;border-radius:50%;flex:0 0 34px;display:flex;align-items:center;justify-content:center;font-weight:650;font-size:13px;color:#fff;}
.demo .src .sm{font-size:14px;color:var(--ink-2);font-weight:600;}
.demo .src .ss{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.demo .src .sd{font-size:12px;color:var(--faint);margin-left:auto;flex:0 0 auto;}
.demo .reply{opacity:0;transform:translateY(8px);transition:opacity .45s ease,transform .45s ease;}
.demo .reply.show{opacity:1;transform:none;}
.a1{background:#7C9CBF;}.a2{background:#C08A6B;}.a3{background:#8AA17C;}.a4{background:#B08AAE;}.a5{background:#6B6560;}
@media(prefers-reduced-motion:reduce){.demo .caret{animation:none;}.demo .reply{opacity:1;transform:none;transition:none;}}

/* legal / long-form prose */
.prose{max-width:760px;margin:0 auto;}
.prose h1{font-size:clamp(30px,4vw,40px);margin:6px 0 6px;}
.prose h2{font-size:22px;margin:30px 0 10px;color:var(--ink);}
.prose h3{font-size:17px;margin:20px 0 6px;color:var(--ink-2);}
.prose p{color:var(--muted);margin:11px 0;line-height:1.7;font-size:15.5px;}
.prose ul,.prose ol{color:var(--muted);margin:11px 0 11px 22px;line-height:1.7;font-size:15.5px;}
.prose li{margin:5px 0;}
.prose a{color:var(--blue-ink);text-decoration:underline;text-underline-offset:2px;}
.prose strong,.prose b{color:var(--ink-2);}
.prose em{color:var(--faint);}
.prose hr{border:none;border-top:1px solid var(--border);margin:26px 0;}

@media(max-width:880px){
  .navlinks{display:none;}
  .feature{grid-template-columns:1fr;gap:30px;}
  .feature.flip .copy{order:0;}
  .band{padding:38px 24px;}
  .band .grid{grid-template-columns:1fr;}
  .prices{grid-template-columns:1fr;}
  .section{padding:60px 0;}
  .foot .cols{gap:34px;}
}

/* ============ ANIMATION ============ */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1);will-change:opacity,transform;}
.reveal.in{opacity:1;transform:none;}
.reveal.d1{transition-delay:.07s}.reveal.d2{transition-delay:.14s}.reveal.d3{transition-delay:.21s}
@keyframes gradShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-26px,0)}}
.hero .eyebrow{animation:fadeUp .7s both .05s,gradShift 9s ease-in-out infinite .7s;}
.hero h1{animation:fadeUp .8s both .12s;}
.hero .lead{animation:fadeUp .8s both .22s;}
.hero .ctas{animation:fadeUp .8s both .32s;}
.hero .proof{animation:fadeUp .8s both .42s;}
.hero .heroshot{animation:fadeUp 1s both .5s;}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

/* scroll-progress bar */
.progress{position:fixed;top:0;left:0;height:3px;width:100%;transform:scaleX(0);transform-origin:0 50%;
  background:var(--grad);background-size:220% 100%;z-index:60;animation:gradShift 9s ease-in-out infinite;
  box-shadow:0 1px 10px -2px rgba(123,108,246,.6);}

/* animated nav underline */
.navlinks a{position:relative;}
.navlinks a::after{content:"";position:absolute;left:0;right:100%;bottom:-5px;height:2px;border-radius:2px;
  background:var(--grad);transition:right .25s ease;}
.navlinks a:hover::after{right:0;}

/* reels — feature sections fill the screen and snap one-by-one */
html{scroll-snap-type:y proximity;}
.section.reel{scroll-snap-align:center;}
@media(min-width:881px){
  .section.reel{min-height:92vh;display:flex;flex-direction:column;justify-content:center;}
}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important;}
  .reveal{opacity:1!important;transform:none!important;}
  html{scroll-snap-type:none;}
  .section.reel{min-height:0;display:block;}
  .progress{display:none;}
}

/* --- Waitlist form (pre-GA early-access capture) --- */
.waitlist{max-width:460px;margin:0 auto;text-align:left;}
.wl-row{display:flex;gap:10px;flex-wrap:wrap;}
.waitlist input[type=email]{flex:1;min-width:200px;font-size:16px;color:var(--ink);
  background:var(--surface-2);border:1px solid var(--border);border-radius:13px;
  padding:14px 16px;transition:border-color .15s,background .15s;}
.waitlist input[type=email]::placeholder{color:var(--faint);}
.waitlist input[type=email]:focus{outline:none;border-color:var(--blue);background:rgba(91,140,255,.08);}
.waitlist .btn{white-space:nowrap;}
.waitlist .cf-slot:not(:empty){margin-top:14px;}
.wl-status{font-size:14px;margin-top:12px;min-height:1.2em;}
.wl-status.ok{color:var(--green-ink);}
.wl-status.err{color:#FCA5A5;}
.wl-fine{font-size:12.5px;color:var(--faint);margin-top:12px;}
.waitlist.done input[type=email],.waitlist.done .btn{opacity:.55;}
@media (max-width:520px){.wl-row{flex-direction:column;}.waitlist .btn{width:100%;}}

/* --- Official brand lockup (replaces the gradient "M") --- */
.brand .brandlogo{height:26px;width:auto;display:block;}
.foot .brand .brandlogo{height:24px;}
.brand .emblem{display:none;}  /* compact mark, shown only on the smallest screens */

/* --- Mobile nav: keep brand + "Sign in" + CTA on one line (navlinks hidden ≤880).
   Below 420px the wide wordmark is swapped for the compact emblem so the
   secondary "Sign in" link still fits, rather than being dropped. --- */
@media (max-width:560px){
  .nav .wrap{gap:14px;}
  .navcta{gap:12px;}
  .navcta .signin{white-space:nowrap;}
}
@media (max-width:420px){
  .nav .brand .wordmark{display:none;}
  .nav .brand .emblem{display:block;}
  .navcta{gap:10px;}
}