@font-face{
  font-family:"Manrope";
  font-style:normal; font-weight:400 800; font-display:swap;
  src:url("fonts/manrope.woff2") format("woff2");
}

:root{
  --page:#FAFBFF;
  --white:#FFFFFF;
  --ink:#29334D;
  --ink2:#626C83;
  --line:#E3E7F2;
  --soft:#EFF2FF;
  --sky:#DBE8FF;
  --lav:#E8E0FF;
  --peach:#FFDDC7;
  /* Text-only accent. The brand --accent is 3.86:1 on the page wash,
     below the 4.5 WCAG AA needs for small text; this is the same hue at
     4.75:1. Use --accent for marks and fills, this for words. */
  --accent-text:#5A6CB8;
  --cloud:#F8FAFF;
  --accent:#667AD0;
  --btn:#DCE4FF;
  --btn-t:#354B92;
  --btn-b:#C6D2FC;
  --btn-s:#B6C4EF;

  --wrap:1160px;
  --pad:48px;
  --ease:cubic-bezier(.22,.7,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--page); color:var(--ink);
  font-family:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:16px; line-height:1.7; font-weight:500;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,p,ul,figure{margin:0}
ul{list-style:none; padding:0}
button{font:inherit; color:inherit}
svg{display:block}

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 var(--pad)}

.skip{position:absolute; left:-9999px; top:8px; z-index:99;
  background:var(--white); color:var(--ink); padding:10px 16px; border-radius:10px; border:1px solid var(--line)}
.skip:focus{left:16px}

:focus-visible{outline:2.5px solid #4A5FBF; outline-offset:3px; border-radius:6px}

/* ---------- typography ---------- */
.h1{
  font-size:clamp(44px,6.4vw,70px); font-weight:800; line-height:1.02;
  letter-spacing:-.045em; margin:22px 0 0;
}
.h1 span{display:block}
.h1 .l1{color:var(--ink)}
.h1 .l2{color:var(--accent)}

.h2{font-size:clamp(26px,3.4vw,34px); font-weight:800; letter-spacing:-.032em; line-height:1.12}
.h3{font-size:clamp(23px,2.7vw,29px); font-weight:800; letter-spacing:-.03em; line-height:1.16; margin:6px 0 0}

.eyebrow{
  font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:1.4px;
  color:var(--accent-text); margin:0 0 7px;
}
.label{font-size:12px; font-weight:600; color:var(--ink2); letter-spacing:.3px; margin:3px 0 0}
.lede{font-size:16.5px; line-height:1.72; color:var(--ink2); margin:20px 0 0; max-width:30em}
.note{font-size:12.5px; color:var(--ink2); margin:14px 0 0; font-weight:500}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px; justify-content:center;
  min-height:48px; padding:0 24px;
  background:var(--btn); color:var(--btn-t);
  border:1px solid var(--btn-b); border-radius:13px;
  box-shadow:0 4px 0 var(--btn-s);
  font-size:15.5px; font-weight:800; letter-spacing:-.01em;
  text-decoration:none; cursor:pointer;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.btn:hover{transform:translateY(-2px); box-shadow:0 6px 0 var(--btn-s); background:#E4EAFF}
.btn:active{transform:translateY(2px); box-shadow:0 1px 0 var(--btn-s)}
.btn-sm{min-height:44px; padding:0 19px; font-size:14px; border-radius:11px; flex:none}

.link-btn{
  background:none; border:0; padding:8px 2px; margin:16px 0 0;
  color:var(--accent-text); font-size:14px; font-weight:800; cursor:pointer;
  min-height:44px; display:inline-flex; align-items:center; gap:6px;
  transition:color .18s var(--ease);
}
.link-btn:hover{color:#4A5FBF}

/* ---------- 1. nav ---------- */
.nav{background:var(--white); border-bottom:1px solid var(--line); position:relative; z-index:5}
.nav-in{height:80px; display:flex; align-items:center; justify-content:space-between; gap:20px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--accent); min-height:44px}
.loop{width:31px; height:31px; flex:none}
.wordmark{font-size:30px; font-weight:800; letter-spacing:-.045em; color:var(--accent); line-height:1}
.wordmark.small{font-size:22px}
.tagline{font-size:13px; color:var(--ink2); font-weight:600}

/* ---------- 2. hero ---------- */
.hero{position:relative; overflow:hidden}
.hero-bg{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(70% 78% at 6% 2%,   #E2EDFF 0%, rgba(226,237,255,0) 62%),
    radial-gradient(66% 74% at 96% 0%,  #E9E1FF 0%, rgba(233,225,255,0) 60%),
    radial-gradient(76% 82% at 92% 104%,#FFE6D8 0%, rgba(255,230,216,0) 60%),
    linear-gradient(128deg, #F3F8FF 0%, #F9F5FF 52%, #FFF6ED 100%);
}
.hero-in{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1fr 1fr; gap:46px; align-items:center;
  padding-top:66px; padding-bottom:72px;
}
.pill{
  display:inline-block; padding:8px 16px; border-radius:999px;
  background:rgba(255,255,255,.72); border:1px solid rgba(255,255,255,.9);
  box-shadow:0 1px 3px rgba(41,51,77,.05);
  font-size:12.5px; font-weight:700; color:var(--btn-t); letter-spacing:.1px;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.cta-wrap{margin:28px 0 0}

/* ---------- 3D email scene ---------- */
.scene-wrap{display:flex; justify-content:center}
.scene{
  position:relative; width:100%; max-width:500px; height:400px;
  perspective:1100px;
}
.dots{
  position:absolute; inset:-6% -8%;
  background-image:radial-gradient(#A9A6CC 1.15px, transparent 1.15px);
  background-size:24px 24px; opacity:.55;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 42%, #000 100%);
  mask-image:linear-gradient(90deg, transparent 0%, #000 42%, #000 100%);
}
.halo{
  position:absolute; left:50%; top:50%; width:360px; height:360px; margin:-180px 0 0 -180px;
  border-radius:50%;
  background:radial-gradient(circle at 42% 36%, rgba(219,232,255,.92) 0%, rgba(232,224,255,.55) 52%, rgba(232,224,255,0) 74%);
}
.ring{
  position:absolute; left:50%; top:50%; border-radius:50%;
  border:1px solid rgba(135,150,205,.15);
}
.ring.r1{width:392px; height:392px; margin:-196px 0 0 -196px}
.ring.r2{width:452px; height:452px; margin:-226px 0 0 -226px; border-color:rgba(135,150,205,.09)}
.orbit{
  position:absolute; left:50%; top:52%; width:430px; height:190px; margin:-95px 0 0 -215px;
  border-radius:50%; border:1px solid rgba(146,132,200,.19);
  transform:rotate(-17deg);
}

.tilt{
  position:absolute; inset:0; transform-style:preserve-3d;
  transform:rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg));
  transition:transform .5s var(--ease);
}
.floatA,.floatB,.floatC{position:absolute; inset:0; transform-style:preserve-3d}
.floatA{animation:floaty 5s ease-in-out infinite}
.floatB{animation:floaty 5s ease-in-out infinite .9s}
.floatC{animation:floaty 5s ease-in-out infinite 1.7s}
@keyframes floaty{0%,100%{transform:translateY(-4px)}50%{transform:translateY(4.5px)}}

.stack{position:absolute; left:50%; top:50%; transform-style:preserve-3d}
.ecard{
  position:absolute; width:320px; border-radius:15px;
  border:1px solid rgba(220,226,244,.92);
  box-shadow:0 18px 38px -14px rgba(74,93,145,.3), 0 4px 12px -5px rgba(74,93,145,.16);
  transition:transform .85s var(--ease), opacity .85s var(--ease);
}
.ecard.back{
  height:184px; background:linear-gradient(150deg,#F0EAFF,#DFD6FA);
  transform:translate3d(-214px,-158px,-72px) rotateZ(16deg) rotateY(-18deg) rotateX(15deg);
}
.ecard.mid{
  height:188px; background:linear-gradient(150deg,#E9F1FF,#D4E3FF);
  transform:translate3d(-190px,-121px,-38px) rotateZ(-15deg) rotateY(-18deg) rotateX(12deg);
}
.ecard.front{
  background:var(--white); padding:17px 19px 19px;
  transform:translate3d(-156px,-80px,0) rotateZ(-8deg) rotateY(-15deg) rotateX(10deg);
}
.e-head{display:flex; align-items:center; gap:9px; margin-bottom:12px}
.avatar{
  width:27px; height:27px; border-radius:50%; flex:none;
  background:linear-gradient(145deg,#DCE4FF,#E8E0FF); color:var(--btn-t);
  font-size:12px; font-weight:800; display:grid; place-items:center;
}
.e-from{font-size:13px; font-weight:800; color:var(--ink)}
.e-time{font-size:11.5px; color:var(--ink2); margin-left:auto; font-weight:600}
.e-subj{font-size:14.5px; font-weight:800; letter-spacing:-.016em; line-height:1.34; color:var(--ink); padding-bottom:5px}
.e-line{display:block; height:7px; border-radius:4px; background:#EEF1F8; margin-top:13px}
.e-line.short{width:62%}
.e-mark{
  margin-top:15px; display:inline-block; padding:6px 11px; border-radius:8px;
  background:var(--peach); color:#7A4A26; font-size:12.5px; font-weight:800;
}

.floatB .sticker{
  position:absolute; right:-6px; top:16px; width:124px;
  padding:13px 14px; border-radius:13px;
  background:linear-gradient(150deg,#FFE8D6,#FFD2B4); color:#7A4423;
  font-size:13.5px; font-weight:800; line-height:1.28; letter-spacing:-.015em;
  transform:rotate(5.5deg);
  box-shadow:0 4px 0 #EFBE9D, 0 16px 26px -12px rgba(120,70,40,.34);
}
.floatC .confirm{
  position:absolute; right:-4px; bottom:6px; width:232px;
  display:flex; align-items:center; gap:11px;
  padding:13px 15px; border-radius:13px; background:var(--white);
  border:1px solid var(--line);
  box-shadow:0 16px 32px -14px rgba(74,93,145,.34);
  transform:rotate(-1.5deg);
  transition:transform .6s var(--ease), opacity .6s var(--ease);
}
.check{
  width:28px; height:28px; border-radius:9px; flex:none; display:grid; place-items:center;
  background:var(--lav); color:#5B4D9B;
}
.check svg{width:16px; height:16px}
.confirm-t{display:flex; flex-direction:column; line-height:1.3}
.confirm-t b{font-size:13px; font-weight:800; letter-spacing:-.015em}
.confirm-t i{font-size:11.5px; font-style:normal; color:var(--ink2); font-weight:600; margin-top:2px}

/* settled state after a sort completes */
.scene.settled .ecard.back{transform:translate3d(-196px,-140px,-88px) rotateZ(7deg) rotateY(-9deg) rotateX(7deg); opacity:.72}
.scene.settled .ecard.mid {transform:translate3d(-178px,-112px,-48px) rotateZ(-6deg) rotateY(-9deg) rotateX(6deg); opacity:.86}
.scene.settled .ecard.front{transform:translate3d(-156px,-82px,0) rotateZ(-2deg) rotateY(-6deg) rotateX(4deg)}
.scene.settled .confirm{animation:arrive .62s var(--ease)}
@keyframes arrive{
  0%{transform:translateY(16px) rotate(-1.5deg); opacity:0}
  62%{transform:translateY(-4px) rotate(-1.5deg); opacity:1}
  100%{transform:translateY(0) rotate(-1.5deg); opacity:1}
}

/* ---------- 3. benefit strip ---------- */
.strip{background:var(--white); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.strip-in{
  display:flex; flex-wrap:wrap; gap:18px 40px; justify-content:space-between;
  padding-top:22px; padding-bottom:22px;
}
.strip-in li{display:flex; align-items:center; gap:11px; font-size:14.5px; font-weight:700; letter-spacing:-.01em}
.ic{width:21px; height:21px; flex:none; fill:none; stroke:var(--accent); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}

/* ---------- sections ---------- */
.sec{padding:66px 0}
.sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:26px; flex-wrap:wrap}

.panel{
  background:var(--white); border:1px solid var(--line); border-radius:18px;
  box-shadow:0 12px 30px -18px rgba(74,93,145,.26);
}

/* ---------- 4. sorting demo ---------- */
.demo{display:grid; grid-template-columns:46% 54%; overflow:hidden}
.inbox{padding:26px 26px 28px; border-right:1px solid var(--line)}
.moves{padding:26px 26px 28px; background:linear-gradient(170deg,#FCFDFF 0%,#F2F6FF 100%); display:flex; flex-direction:column}
.col-head h3{font-size:15px; font-weight:800; letter-spacing:-.015em}
.col-head{margin-bottom:16px}

.mails .mail{
  display:flex; flex-direction:column; gap:3px;
  padding:13px 0; border-top:1px solid var(--line);
  transition:opacity .55s var(--ease), filter .55s var(--ease);
}
.mails .mail:first-child{border-top:0}
.m-from{font-size:11.5px; font-weight:700; color:var(--ink2); letter-spacing:.2px}
.m-subj{font-size:14px; font-weight:700; color:var(--ink); letter-spacing:-.012em; line-height:1.4}
.mail.faded{opacity:.42}

.moves-body{flex:1; min-height:218px; display:flex; flex-direction:column; justify-content:flex-start}

.idle{margin:auto 0; display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; color:var(--ink2); padding:18px 0}
.idle-ic{width:40px; height:40px; border-radius:12px; background:var(--soft); color:var(--accent); display:grid; place-items:center}
.idle-ic svg{width:21px; height:21px}
.idle p{font-size:14.5px; font-weight:700; color:var(--ink)}

/* spinner beside the status label */
.spin{
  display:inline-block; width:9px; height:9px; border-radius:3px;
  background:var(--accent); margin-right:7px; vertical-align:-1px;
  animation:turn 1.25s linear infinite;
}
@keyframes turn{to{transform:rotate(360deg)}}

.skel{height:58px; border-radius:12px; background:#EDF1FB; position:relative; overflow:hidden; margin-bottom:10px}
.skel::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, transparent 18%, rgba(255,255,255,.85) 50%, transparent 82%);
  transform:translateX(-100%); animation:shim 1.4s ease-in-out infinite;
}
@keyframes shim{to{transform:translateX(100%)}}

.res{
  display:flex; align-items:flex-start; gap:12px;
  background:var(--white); border:1px solid var(--line); border-radius:12px;
  padding:13px 14px; margin-bottom:10px;
  opacity:0; transform:translateY(14px);
  animation:rise .55s var(--ease) forwards;
}
@keyframes rise{to{opacity:1; transform:translateY(0)}}

.box{
  width:23px; height:23px; flex:none; margin-top:1px; border-radius:7px; cursor:pointer;
  border:1.8px solid #C9D2E8; background:var(--white); color:transparent;
  display:grid; place-items:center; padding:0;
  transition:background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
}
.box svg{width:13px; height:13px}
.box:hover{border-color:var(--btn-b)}
.box:active{transform:scale(.9)}
.res.done .box{background:var(--btn); border-color:var(--btn-b); color:var(--btn-t)}

.res-t{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.res-t b{font-size:14px; font-weight:800; letter-spacing:-.015em; line-height:1.35; transition:color .2s var(--ease)}
.res-t i{font-size:11.5px; font-style:normal; color:var(--ink2); font-weight:600}
.res.done .res-t b{color:var(--ink2); text-decoration:line-through}

.chip{
  flex:none; padding:5px 10px; border-radius:8px; font-size:11.5px; font-weight:800;
  background:var(--sky); color:#2F4680; white-space:nowrap; margin-top:1px;
}
.chip.soon{background:var(--peach); color:#7A4A26}

.fyi{font-size:12.5px; color:var(--ink2); font-weight:600; margin-top:12px}

/* ---------- 5. supporting panels ---------- */
.pair{display:grid; grid-template-columns:1fr 1fr; gap:22px}
.remind{
  padding:30px 30px 26px;
  background:linear-gradient(168deg,#E6EEFF 0%,#E9E3FF 58%,#FFE8DA 100%);
  border-color:#DFE4F6;
}
.notif-hold{margin-top:24px; min-height:128px; display:flex; align-items:center}
.notif{
  width:100%; background:var(--white); border-radius:14px; padding:15px 17px;
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 16px 34px -16px rgba(74,93,145,.4);
  transform:rotate(-2deg);
}
.notif.play{animation:notifIn .65s var(--ease)}
@keyframes notifIn{
  0%{transform:translateY(25px) rotate(-2deg); opacity:0}
  70%{transform:translateY(-4px) rotate(-2deg); opacity:1}
  100%{transform:translateY(0) rotate(-2deg); opacity:1}
}
.n-head{display:flex; justify-content:space-between; font-size:11.5px; font-weight:700; color:var(--ink2); margin-bottom:7px}
.n-msg{font-size:14.5px; font-weight:700; letter-spacing:-.014em; line-height:1.5}

.detail{padding:30px 30px 26px; background:linear-gradient(170deg,#FFFFFF 0%,#F8F5FF 100%)}
.d-rows{margin-top:24px; display:flex; flex-direction:column; gap:16px}
.d-rows li{display:flex; gap:13px; align-items:flex-start}
.tile{width:38px; height:38px; flex:none; border-radius:11px; display:grid; place-items:center}
.tile svg{width:19px; height:19px; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.tile-b{background:var(--sky); color:#3C589C} .tile-b svg{stroke:#3C589C}
.tile-l{background:var(--lav); color:#5B4D9B} .tile-l svg{stroke:#5B4D9B}
.tile-p{background:var(--peach); color:#8A5330} .tile-p svg{stroke:#8A5330}
.d-rows b{display:block; font-size:14.5px; font-weight:800; letter-spacing:-.015em}
.d-rows i{display:block; font-size:13.5px; font-style:normal; color:var(--ink2); line-height:1.6; margin-top:1px}

/* ---------- 7. get the extension ---------- */
.get{display:grid; grid-template-columns:1.05fr .95fr; gap:34px; padding:32px 34px;
  background:linear-gradient(165deg,#FFFFFF 0%,#F4F8FF 55%,#FFF4EC 100%)}
.get-p{font-size:15px; line-height:1.7; color:var(--ink2); margin-top:12px; max-width:34em}
.steps{display:flex; flex-direction:column; gap:14px; justify-content:center}
.steps li{display:flex; gap:13px; align-items:flex-start}
.step-n{width:28px; height:28px; flex:none; border-radius:9px; display:grid; place-items:center;
  background:var(--btn); color:var(--btn-t); font-size:13px; font-weight:800}
.steps b{display:block; font-size:14.5px; font-weight:800; letter-spacing:-.015em}
.steps i{display:block; font-size:13.5px; font-style:normal; color:var(--ink2); line-height:1.6; margin-top:1px}

/* ---------- 7. faq ---------- */
.faq{display:grid; grid-template-columns:1fr 1fr; gap:26px 44px}
.q h3{font-size:16px; font-weight:800; letter-spacing:-.018em; line-height:1.35}
.q p{margin-top:6px; font-size:14.5px; line-height:1.68; color:var(--ink2)}

/* ---------- 6. footer ---------- */
.foot{background:var(--white); border-top:1px solid var(--line); margin-top:10px}
.foot-in{padding-top:30px; padding-bottom:34px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.foot p{font-size:13px; color:var(--ink2); font-weight:600}

/* ---------- scroll reveal ---------- */
.js .reveal{opacity:0; transform:translateY(22px)}
.js .reveal.in{opacity:1; transform:none; transition:opacity .58s var(--ease), transform .58s var(--ease)}

/* ---------- responsive ---------- */
@media (max-width:980px){
  :root{--pad:32px}
  .hero-in{gap:34px}
  .scene{max-width:420px; height:350px}
}
@media (max-width:768px){
  :root{--pad:22px}
  .hero-in{grid-template-columns:1fr; padding-top:46px; padding-bottom:54px}
  .scene-wrap{order:2}
  .hero-text{order:1}
  .sec{padding:50px 0}
  .demo{grid-template-columns:1fr}
  .inbox{border-right:0; border-bottom:1px solid var(--line)}
  .pair{grid-template-columns:1fr}
  .faq{grid-template-columns:1fr; gap:22px}
  .get{grid-template-columns:1fr; gap:24px; padding:26px 22px}
  .tagline{display:none}
  .strip-in{gap:14px 26px}
  .strip-in li{font-size:13.5px}
}
@media (max-width:560px){
  .h1{font-size:clamp(40px,11.6vw,48px)}
  /* taller canvas so the confirmation card clears the stack instead of
     landing on top of the peach chip */
  .scene{height:366px; max-width:332px}
  .ecard{width:242px}
  .ecard.back{transform:translate3d(-166px,-152px,-62px) rotateZ(16deg) rotateY(-18deg) rotateX(15deg)}
  .ecard.mid{transform:translate3d(-146px,-124px,-30px) rotateZ(-15deg) rotateY(-18deg) rotateX(12deg)}
  .ecard.front{transform:translate3d(-121px,-98px,0) rotateZ(-8deg) rotateY(-15deg) rotateX(10deg)}
  .ecard.front{padding:14px 15px 16px}
  .e-subj{font-size:13.5px}
  .e-mark{font-size:11.5px; margin-top:12px}
  .floatB .sticker{width:104px; right:0; top:0; font-size:12.5px}
  .floatC .confirm{width:218px; right:0; bottom:0}
  .res{flex-wrap:wrap}
  .chip{margin-left:35px}
  .sec-head{align-items:flex-start}
  .strip-in{flex-direction:column}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .js .reveal{opacity:1; transform:none}
  .skel::after{display:none}
  .tilt{transform:none !important}
}

/* Footer links. The privacy page has to be reachable from the site: the Chrome
   Web Store listing needs a live URL for it, and a policy nobody can find is
   not a policy. */
.foot-links{margin-top:.35rem}
.foot-links a{color:var(--accent-text); text-decoration:none; font-size:.92rem}
.foot-links a:hover{text-decoration:underline}