/* ============================================================================
   Flit — marketing site. Palette from the app, self-hosted Poppins + Playfair.
   Premium and calm: serif display headings (animated warm gradient), sans body,
   warm ground with depth (white feature cards + a brown trust card + soft shadows).
   ============================================================================ */

:root{
  --ink:#4a3f3a; --serif:#6d5147; --muted:#9a8a82; --soft:#a89890; --faint:#b7a89f;
  --line:#ece0d8; --brown:#8a5a3f; --deep:#3f342f; --rose:#a86e6e; --terra:#c08f5f;
  --wash:#faf6f3; --wash-2:#f4ede9; --card:#fff;
  --grad:linear-gradient(105deg,#6d4a49 0%,#8a604f 46%,#c39c7b 100%);
  --sans:'Poppins',-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --display:'Playfair Display',Georgia,serif;
  --shadow:0 24px 60px rgba(110,80,68,.16);
  --shadow-sm:0 10px 26px rgba(120,90,80,.12);
}

*{box-sizing:border-box;}
/* clip (not hidden) contains the decorative hero glows so the page can't drift sideways on a
   phone; clip keeps the sticky header working, unlike overflow:hidden. */
html{scroll-behavior:smooth; overflow-x:clip;}
body{overflow-x:clip; max-width:100%;

  margin:0; font-family:var(--sans); font-weight:400; color:var(--ink); font-size:16px; line-height:1.6;
  background:
    radial-gradient(80% 46% at 100% 0%, rgba(232,196,182,.10), transparent 55%),
    linear-gradient(180deg,#ffffff 0%,#fdf8f5 100%);
  min-height:100%; -webkit-font-smoothing:antialiased;
}
img,svg,video{display:block; max-width:100%;}
a{color:inherit; text-decoration:none;}
h1,h2,h3,h4{margin:0; color:var(--serif); letter-spacing:-.01em; line-height:1.1;}
.wrap{width:100%; max-width:1180px; margin-inline:auto; padding-inline:22px;}

/* --- animated warm gradient display type; padding+line-height keep descenders (y, p) whole --- */
.hero__title,.feature__body h2,.sync h2,.pricing__title,.trust__title,.faq__title,.plan__head h3{
  font-family:var(--sans); font-weight:600; letter-spacing:-.022em; line-height:1.14; padding-bottom:.02em;
  background:linear-gradient(100deg,#5a3f35 0%,#774c3c 28%,#b17b48 50%,#774c3c 72%,#5a3f35 100%);
  background-size:220% auto; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:shimmer 9s ease-in-out infinite;
}
@keyframes shimmer{0%{background-position:0% center;}50%{background-position:100% center;}100%{background-position:0% center;}}

/* ---------------------------------- buttons (premium) ---------------------------------- */
.btn{
  position:relative; overflow:hidden; isolation:isolate;
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--sans); font-weight:600; font-size:15px; letter-spacing:.01em; line-height:1;
  padding:14px 28px; border-radius:999px; border:0; cursor:pointer; white-space:nowrap;
  transition:transform .18s cubic-bezier(.2,.8,.25,1), box-shadow .25s ease;
}
.btn--primary{background:var(--grad); color:#fff; box-shadow:0 10px 26px rgba(120,80,64,.30);}
.btn--light{background:#fff; color:var(--serif); box-shadow:var(--shadow-sm);}
.btn--lg{padding:17px 36px; font-size:16px;}
.btn--block{width:100%;}
.btn::after{content:""; position:absolute; top:0; left:-130%; width:55%; height:100%; z-index:-1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);
  transform:skewX(-18deg); transition:left .6s cubic-bezier(.2,.8,.25,1);}
.btn:hover{transform:translateY(-2px); box-shadow:0 18px 34px rgba(120,80,64,.34);}
.btn:hover::after{left:135%;}
.btn:active{transform:translateY(0);}

.link{display:inline-block; background:none; border:0; padding:0; cursor:pointer; font-family:inherit;
  font-weight:600; color:var(--terra); font-size:14px; letter-spacing:.02em; margin-top:22px; transition:color .2s;}
.link:hover{color:var(--brown);}

/* ---------------------------------- header (full-width bar) ---------------------------------- */
.nav{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.95);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(236,224,216,.6); box-shadow:0 8px 26px rgba(120,90,80,.10);}
.nav__inner{display:flex; align-items:center; gap:18px; padding-block:14px;}
.brand__word{font-family:var(--display); font-weight:500; font-size:26px; color:var(--serif); line-height:1;}
.nav__links{display:flex; gap:28px; margin-left:26px;}
.nav__links a{font-weight:500; color:var(--serif); font-size:14px; opacity:.82;}
.nav__links a:hover{opacity:1;}
.nav__actions{display:flex; align-items:center; gap:12px; margin-left:auto;}
.burger{display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:8px;}
.burger span{width:22px; height:2px; background:var(--serif); border-radius:2px; transition:.25s;}

/* ---------------------------------- hero ---------------------------------- */
.hero{position:relative; text-align:center; padding-top:66px;}
.hero > *{position:relative; z-index:1;}
/* Simple.life-style top gradient: soft warm glows kept in the top corners (gold left, brown
   right) so the centre behind the headline stays clean and the text keeps its contrast. */
.hero::before{content:""; position:absolute; top:-140px; left:0; right:0; height:760px; z-index:0; pointer-events:none;
  background:
    radial-gradient(40% 44% at -6% -8%, rgba(226,178,116,.30), transparent 60%),   /* gold, deep top-left, wide */
    radial-gradient(30% 36% at 106% 3%, rgba(146,88,58,.24), transparent 62%);      /* brown, tucked top-right, smaller + lower */
  filter:blur(84px);}
.eyebrow{font-weight:600; letter-spacing:.16em; text-transform:uppercase; font-size:12px; color:var(--terra); margin:0 0 18px;}
.hero__title{font-size:clamp(32px,5vw,60px); line-height:1.12; margin:0 auto; max-width:18ch;}
.hero__tag{font-family:var(--sans); font-weight:600; color:#241d1a; font-size:clamp(17px,2.1vw,24px);
  letter-spacing:-.01em; line-height:1.2; margin:12px 0 0;}
.hero__cta{display:flex; flex-direction:column; align-items:center; gap:12px; margin-top:30px;}
.hero__stage{position:relative; margin-top:54px; display:flex; justify-content:center;}
.glow{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-46%);
  width:min(960px,138%); height:min(840px,128%); z-index:0; pointer-events:none;
  background:
    radial-gradient(38% 42% at 33% 38%, rgba(198,140,86,.60), transparent 70%),
    radial-gradient(40% 46% at 68% 44%, rgba(150,96,72,.55), transparent 72%),
    radial-gradient(52% 52% at 50% 66%, rgba(224,176,124,.52), transparent 72%),
    radial-gradient(62% 62% at 50% 50%, rgba(150,100,72,.28), transparent 76%);
  filter:blur(64px); opacity:.92; animation:drift 14s ease-in-out infinite alternate;
}
@keyframes drift{from{transform:translate(-52%,-46%) scale(1);}to{transform:translate(-48%,-44%) scale(1.06);}}

/* ---------------------------------- device ---------------------------------- */
.device{position:relative; z-index:1; background:linear-gradient(160deg,#2c2b30,#3a3940); border-radius:36px;
  padding:12px; box-shadow:0 36px 74px rgba(60,42,36,.38); width:100%;}
.device--tablet{max-width:360px; aspect-ratio:3/4;}
.device--hero{max-width:min(520px,88vw);}
.device__screen{position:relative; width:100%; height:100%; border-radius:26px; overflow:hidden;
  background:linear-gradient(165deg,#f4ede8,#efe6e2 55%,#f6efeb); display:flex; align-items:center; justify-content:center;}
.device__screen video, .device__screen img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.device__ph{font-size:13px; letter-spacing:.05em; color:var(--faint); font-weight:500;
  border:1px dashed rgba(160,140,130,.5); border-radius:12px; padding:10px 16px;}
.device--tablet::after{content:""; position:absolute; top:20px; left:50%; transform:translateX(-50%);
  width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.35); z-index:2;}

/* ---------------------------------- trust (brown card) ---------------------------------- */
.trust{text-align:center; margin:44px auto 0; padding:clamp(34px,4vw,52px) clamp(18px,3vw,40px);
  background:linear-gradient(155deg,#6b4e46 0%,#8a655a 55%,#b7907f 100%); border-radius:34px; box-shadow:var(--shadow);}
.trust__title{color:#fff; -webkit-text-fill-color:#fff; background:none; animation:none;
  font-family:var(--sans); font-weight:600; letter-spacing:-.02em; font-size:clamp(20px,2.8vw,30px); max-width:none; margin:0 auto; padding:0;}
.trust__row{display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-top:30px;}
.creator{margin:0; width:150px; display:flex; flex-direction:column; align-items:center; gap:8px;}
.creator__photo{width:100%; aspect-ratio:3/4; border-radius:18px;
  background:linear-gradient(160deg,#f1e3d9,#dbc6b9); box-shadow:0 10px 22px rgba(40,26,22,.28);}
.creator figcaption{font-weight:600; font-size:13px; color:#f4dfd2;}
.creator__stat{font-size:11px; color:rgba(255,255,255,.82);}

/* ---------------------------------- features (white cards, depth) ---------------------------------- */
.feature{display:grid; grid-template-columns:1.3fr 1fr; gap:min(6vw,64px); align-items:center;
  background:var(--card); border-radius:34px; box-shadow:var(--shadow); margin:26px auto;
  padding:clamp(30px,4vw,56px);}
.feature--reverse .feature__media{order:2;}
/* Try-on explainer: no media (the star video is the hero). Same card width as the others; only the
   text inside is centred and kept to a comfortable measure. */
.feature--intro{grid-template-columns:1fr; text-align:center;}
.feature--intro .feature__body{max-width:820px; margin-inline:auto;}
.feature--intro .flist--inline{display:flex; flex-wrap:wrap; justify-content:center; gap:10px 24px;}
.feature--intro .flist--inline li{padding-left:20px;}
.feature--intro .link{display:inline-block; margin-top:18px;}
.feature__media{display:flex; justify-content:center;}
.feature__media .device--tablet{max-width:560px;}
.kicker{font-weight:600; letter-spacing:.14em; text-transform:uppercase; font-size:11px; color:var(--terra); margin:0 0 14px;}
.feature__body h2{font-size:clamp(24px,2.7vw,36px); line-height:1.14;}
.feature__body p{margin:16px 0 0; color:var(--ink); font-size:15.5px;}
.flist{list-style:none; margin:18px 0 0; padding:0; display:grid; gap:10px;}
.flist li{position:relative; padding-left:22px; font-size:15px; color:var(--ink);}
.flist li::before{content:""; position:absolute; left:2px; top:.55em; width:6px; height:6px; border-radius:50%; background:var(--terra);}

/* ---------------------------------- sync ---------------------------------- */
.sync{text-align:center; padding:64px 22px;}
.sync h2{font-size:clamp(24px,3.2vw,40px);}
.sync p{max-width:54ch; margin:14px auto 0; color:var(--ink); font-size:15.5px;}
.sync__media{display:flex; justify-content:center; margin:42px 0 30px;}
/* The devices mockup sits on a transparent ground, so no card behind it: just cap its width. */
.sync__media img{width:min(1000px,100%); height:auto;}
.photo-slot{width:min(900px,100%); aspect-ratio:16/10; border-radius:26px;
  background:linear-gradient(160deg,#eee1d8,#ddcabd); display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow);}
.stores{display:flex; gap:16px; justify-content:center; flex-wrap:wrap;}
.store{display:inline-flex; flex-direction:column; justify-content:center; background:#1c1a1a; color:#fff;
  border-radius:14px; padding:10px 22px; min-width:178px; box-shadow:var(--shadow-sm);}
.store b{font-weight:400; font-size:11px; opacity:.8;}
.store span{font-weight:600; font-size:19px; line-height:1.1;}

/* ---------------------------------- pricing ---------------------------------- */
.pricing{text-align:center; padding:80px 22px 88px;}
.pricing__title{font-size:clamp(26px,3.6vw,44px);}
.pricing__sub{max-width:58ch; margin:16px auto 0; color:var(--muted); font-size:15px;}
.ptoggle{display:none;}   /* desktop shows both cards; the switch is a phone-only control */
.plans{display:grid; grid-template-columns:repeat(2,minmax(0,420px)); gap:26px; justify-content:center; margin-top:46px; text-align:left;}
.plan{position:relative; background:var(--card); border:1px solid var(--line); border-radius:30px; padding:34px; box-shadow:var(--shadow);}
.plan--featured{background:linear-gradient(160deg,#5c4441 0%,#7a564c 48%,#a9827a 100%); border:0; color:#fff;}
.plan--featured h3, .plan--featured .plan__note, .plan--featured .plan__price b, .plan--featured .plan__price span{color:#fff;}
.plan--featured .plan__head h3{-webkit-text-fill-color:#fff; background:none; animation:none;}
.plan__badge{position:absolute; top:-14px; right:26px; background:#fff; color:var(--rose); font-weight:700; font-size:13px;
  padding:7px 16px; border-radius:999px; box-shadow:var(--shadow-sm); border:1px solid #f6e1e1;}
.plan__head{display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding-bottom:22px; margin-bottom:22px; border-bottom:1px solid rgba(160,140,130,.18);}
.plan--featured .plan__head{border-color:rgba(255,255,255,.22);}
.plan__head h3{font-family:var(--sans); font-weight:600; letter-spacing:-.02em; font-size:26px; padding:0;}
.plan__note{margin:6px 0 0; font-size:13px; color:var(--muted);}
.plan__price{margin:0; text-align:right; white-space:nowrap;}
.plan__price b{font-size:38px; font-weight:700; color:var(--deep);}
.plan__price span{font-size:15px; color:var(--muted); font-weight:500;}
.ticks{list-style:none; margin:0 0 26px; padding:0; display:grid; gap:11px;}
.ticks li{position:relative; padding-left:32px; font-size:15px; font-weight:500; color:var(--ink);}
.ticks li::before{content:""; position:absolute; left:0; top:1px; width:21px; height:21px; border-radius:50%;
  background:#e8f3ec url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f7d54' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat;}
.ticks--light li{color:rgba(255,255,255,.94);}
.ticks--light li::before{background-color:rgba(255,255,255,.22);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");}

/* ---------------------------------- faq ---------------------------------- */
.faq{max-width:820px; padding:70px 22px 92px;}
.faq__title{font-size:clamp(24px,3vw,38px); text-align:center; margin-bottom:32px;}
.faq__item{border-bottom:1px solid var(--line);}
.faq__item summary{list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  gap:20px; padding:22px 4px; font-weight:600; color:var(--serif); font-size:16px;}
.faq__item summary::-webkit-details-marker{display:none;}
.faq__item summary::after{content:"+"; color:var(--terra); font-size:24px; line-height:1; font-weight:400; transition:transform .2s ease;}
.faq__item[open] summary::after{transform:rotate(45deg);}
.faq__item p{margin:0 4px 22px; color:var(--ink); font-size:15px; max-width:70ch;}

/* ---------------------------------- footer ---------------------------------- */
.foot{background:#fbf6f2; margin-top:20px; padding:56px 0 0; border-top:1px solid var(--line);}
.foot__inner{display:grid; grid-template-columns:2fr 1fr 1fr; gap:30px;}
.foot__brand p{color:var(--muted); margin:12px 0 0; max-width:28ch; font-size:14px;}
.foot__brand .brand__word{font-size:24px;}
.foot__col{display:flex; flex-direction:column; gap:10px;}
.foot__col h4{font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--soft); margin-bottom:4px;}
.foot__col a{color:var(--serif); font-size:14px; opacity:.85;}
.foot__col a:hover{opacity:1;}
.foot__base{border-top:1px solid var(--line); margin-top:40px; padding:22px; text-align:center; color:var(--muted); font-size:13px;}

/* ---------------------------------- legal pages ---------------------------------- */
.legal{max-width:800px; margin-inline:auto; padding:52px 22px 78px;}
.legal h1{font-family:var(--sans); font-weight:600; letter-spacing:-.02em; font-size:clamp(28px,4vw,42px); color:var(--serif); line-height:1.12;}
.legal .updated{color:var(--muted); font-size:13px; margin:12px 0 0;}
.legal .lead{color:var(--ink); font-size:16px; margin:20px 0 0; line-height:1.7;}
.legal h2{font-family:var(--sans); font-weight:600; font-size:19px; color:var(--serif); margin:42px 0 0; letter-spacing:-.01em;}
.legal p{margin:12px 0 0; color:var(--ink); font-size:15px; line-height:1.75;}
.legal ul{margin:12px 0 0; padding-left:20px;}
.legal li{margin:8px 0 0; color:var(--ink); font-size:15px; line-height:1.7;}
.legal a{color:var(--terra); text-decoration:underline; text-underline-offset:2px;}
.legal a:hover{color:var(--brown);}
.legal strong{color:var(--serif); font-weight:600;}
.legal__links{display:flex; gap:22px; flex-wrap:wrap; margin-top:18px;}
.legal__links a{color:var(--terra); font-weight:600; font-size:14px; text-decoration:none;}
.legal__links a:hover{color:var(--brown);}

/* ---------------------------------- 404 ---------------------------------- */
.oops{max-width:600px; margin-inline:auto; text-align:center; padding:90px 22px 110px;}
.oops h1{font-family:var(--display); font-weight:500; font-size:clamp(56px,12vw,96px); color:var(--serif); line-height:1;}
.oops p{margin:16px auto 0; color:var(--muted); font-size:16px; max-width:40ch;}
.oops .btn{margin-top:30px;}

/* ---------------------------------- interest modal ---------------------------------- */
.modal{position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:22px;}
.modal[hidden]{display:none;}
.modal__backdrop{position:absolute; inset:0; background:rgba(50,36,32,.5); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); animation:fade .25s ease;}
.modal__card{position:relative; width:100%; max-width:440px; background:#fff; border-radius:28px; padding:40px 34px 34px;
  box-shadow:0 44px 96px rgba(50,32,26,.42); animation:pop .3s cubic-bezier(.2,.8,.25,1);}
.modal__close{position:absolute; top:14px; right:16px; width:34px; height:34px; border:0; border-radius:50%;
  background:var(--wash); color:var(--serif); font-size:22px; line-height:1; cursor:pointer;}
.modal__close:hover{background:var(--wash-2);}
.modal__card h3{font-family:var(--sans); font-weight:600; letter-spacing:-.02em; font-size:27px; color:var(--serif); margin:4px 0 0;}
.modal__lead{color:var(--muted); margin:12px 0 22px; font-size:15px;}
#waitlist input{width:100%; font-family:inherit; font-size:16px; padding:14px 16px; border:1px solid var(--line);
  border-radius:14px; background:var(--wash); color:var(--ink); margin-bottom:12px;}
#waitlist input:focus{outline:none; border-color:var(--terra); background:#fff;}
.modal__err{color:#a2483a; font-size:13px; margin:8px 0 0;}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0; transform:translateY(12px) scale(.98)}to{opacity:1; transform:none}}

/* ---------------------------------- reveal ---------------------------------- */
.feature,.trust,.sync,.pricing,.faq,.hero__stage{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease;}
.reveal-in{opacity:1 !important; transform:none !important;}

/* ---------------------------------- responsive ---------------------------------- */
@media (max-width:900px){ .foot__inner{grid-template-columns:1fr 1fr;} }
@media (max-width:760px){
  .nav__links{position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:0; margin:0;
    background:#fff; border-bottom:1px solid var(--line); box-shadow:var(--shadow); display:none;}
  /* no hamburger on the phone: the header keeps only the logo and Get Started */
  .burger{display:none;}
  .nav__links{display:none;}
  /* trusted-by: one line you swipe left/right (from the mockup's phone view) */
  .trust__row{flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; gap:14px; padding:4px 2px 8px; margin:30px -6px 0;}
  .trust__row::-webkit-scrollbar{display:none;}
  .trust__row{scrollbar-width:none;}
  .creator{flex:0 0 44%; scroll-snap-align:start; width:auto;}

  /* side gutters on phone so the cards don't run edge to edge like the other sections.
     width:auto is needed because .wrap sets width:100%, which would otherwise push the margins
     off-screen instead of shrinking the card. */
  .feature{grid-template-columns:1fr; gap:30px; padding:30px 22px; margin:20px 16px; width:auto;}
  .trust{margin:34px 16px 0; width:auto;}
  .feature--reverse .feature__media, .feature__media{order:0;}
  /* pricing becomes a switch: one card at a time, Annual by default */
  .ptoggle{display:inline-flex; margin:26px auto 0; gap:4px; background:#fff; border:1px solid var(--line);
    border-radius:999px; padding:5px; box-shadow:var(--shadow-sm);}
  .ptoggle button{border:0; background:none; font-family:var(--sans); font-weight:600; font-size:14px;
    color:var(--muted); padding:9px 22px; border-radius:999px; cursor:pointer; transition:.2s;}
  .ptoggle button.on{background:var(--grad); color:#fff;}
  .plans{grid-template-columns:1fr; max-width:440px; margin:22px auto 0;}
  .plans[data-show="annual"] .plan[data-plan="monthly"]{display:none;}
  .plans[data-show="monthly"] .plan[data-plan="annual"]{display:none;}
  .foot__inner{grid-template-columns:1fr 1fr;}
}
@media (max-width:440px){ .foot__inner{grid-template-columns:1fr;} }
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .hero__title,.feature__body h2,.sync h2,.pricing__title,.trust__title,.faq__title,.plan__head h3,.glow{animation:none;}
  .feature,.trust,.sync,.pricing,.faq,.hero__stage{opacity:1; transform:none; transition:none;}
  .btn::after,.modal__backdrop,.modal__card{animation:none;}
}