/* ============================================================================
   web2app v2 landing — built to Figma "web-2-app" v6 (Main 397:1934 + Paywall 397:3631)
   Dark mobile longread. Real HTML text (Google moderation) + exported PNGs for
   complex visuals (phone mockups, shield, laurels, timeline icons, stat bar, logo).
   ========================================================================== */

:root{
  --bg:#000;
  --panel:#0E0F12;
  --orange:#FF9500;
  --muted:#89898D;
  --grey:#6F7079;
  --fw:440px;
  --pad:22px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{margin:0;padding:0}
body{
  background:#000;color:#fff;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0}

/* ---- page column: black backdrop; each section is a rounded grey panel ---- */
.lp{
  position:relative;max-width:var(--fw);margin:0 auto;
  overflow-x:hidden;padding-bottom:98px;background:#000;
}

/* ============================ HERO ============================ */
.hero{
  padding:38px var(--pad) 30px;text-align:center;position:relative;
  border-radius:0 0 38px 38px;                 /* rounded panel bottom, on black */
  background:
    radial-gradient(circle 3.5px at 9% 44%,  rgba(255,149,0,1),   transparent 60%),
    radial-gradient(circle 2.5px at 39% 56%, rgba(255,149,0,.9),  transparent 60%),
    radial-gradient(circle 2.5px at 14% 25%, rgba(255,190,110,.85),transparent 60%),
    radial-gradient(circle 2.5px at 80% 60%, rgba(255,149,0,.9),  transparent 60%),
    radial-gradient(circle 2px at 88% 18%,   rgba(255,210,150,.7),transparent 60%),
    radial-gradient(circle 2.5px at 93% 76%, rgba(255,149,0,.8),  transparent 60%),
    radial-gradient(circle 2.5px at 12% 84%, rgba(255,149,0,.8),  transparent 60%),
    radial-gradient(circle 2px at 66% 30%,   rgba(255,200,140,.6),transparent 60%),
    radial-gradient(88% 26% at 50% 4%, rgba(255,149,0,.10), transparent 70%),
    radial-gradient(120% 40% at 50% 0%, #23242b 0%, rgba(35,36,43,0) 60%),
    linear-gradient(180deg,#0f1015 0%,#0b0c10 100%);
}
.hero .logo{width:92px;height:auto;margin:0 auto}
.h-title{font-size:42px;line-height:1.06;font-weight:800;letter-spacing:-1px;margin:16px 0 0}
.hero-mock{width:calc(100% + 28px);max-width:none;margin:18px -14px 0;
  -webkit-mask-image:linear-gradient(#000 87%,transparent 100%);
          mask-image:linear-gradient(#000 87%,transparent 100%);}
/* flat stat row (no frame) */
.stats{display:flex;align-items:center;justify-content:center;max-width:378px;margin:16px auto 0}
.stat{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px}
.stat b{font-size:24px;font-weight:800;color:#fff;line-height:1}
.stat .plats{display:flex;gap:8px;align-items:center;height:22px}
.stat .plats svg{width:19px;height:19px;fill:#F2F2F4}
.stat em{font-size:12px;font-weight:600;letter-spacing:1px;color:#8A8B90;font-style:normal}
.stat-sep{width:1px;height:36px;background:rgba(255,255,255,.13);flex:0 0 auto}

/* ============================ FEATURES (full-slide carousel) ============================ */
.features{padding:44px 0 28px;text-align:center;overflow:hidden;
  background:#0E0F12;border-radius:38px;margin:6px 0 0}
.h2{font-size:32px;line-height:1.1;font-weight:800;letter-spacing:-.3px;margin:0 var(--pad)}
.fcarousel{
  display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.fcarousel::-webkit-scrollbar{display:none}
.fslide{
  flex:0 0 100%;scroll-snap-align:center;scroll-snap-stop:always;   /* Android: no skipping multiple slides */
  display:flex;flex-direction:column;align-items:center;padding:0 var(--pad);
}
.fslide .h2{
  width:100%;min-height:92px;margin:0;font-size:29px;line-height:1.14;
  display:flex;flex-direction:column;justify-content:flex-end;   /* column-flex keeps wrapping + bottom-aligns */
}
.fslide .pcrop{width:min(290px,80%);margin-top:16px;position:relative}
.fslide .pcrop img{
  width:100%;display:block;aspect-ratio:290/366;object-fit:cover;object-position:top;
  -webkit-mask-image:linear-gradient(#000 84%,transparent 100%);
          mask-image:linear-gradient(#000 84%,transparent 100%);
}
.dots{display:flex;gap:6px;justify-content:center;margin-top:22px;align-items:center}
.dots i{width:7px;height:7px;border-radius:4px;background:#3A3B40;transition:width .2s}
.dots i.on{width:22px;background:#fff}

/* ============================ SOCIAL PROOF ============================ */
/* laurels live in the SECTION background, positioned in the side margins with a
   clear gap from the centered heading — never overlapping the text box (avoids a
   Blink/WebKit double-paint of text that shares/overlaps an image region). */
.proof{padding:58px var(--pad) 0;text-align:center}
.proof-badge{display:flex;align-items:center;justify-content:center;gap:12px}
.proof-badge .lau{width:42px;height:auto;flex:0 0 auto}
.proof-h{margin:0;flex:0 0 auto}
.reviews{margin-top:38px;display:flex;flex-direction:column;gap:16px}
.review{
  background:rgba(255,255,255,.055);
  -webkit-backdrop-filter:blur(24px) saturate(1.3);backdrop-filter:blur(24px) saturate(1.3);
  border:1px solid rgba(255,255,255,.1);
  border-radius:20px;padding:16px 18px;text-align:left;position:relative;
}
.review .rstars{color:var(--orange);font-size:15px;letter-spacing:1px}
.review .rname{
  position:absolute;top:15px;right:16px;color:#C7C7CC;font-size:14px;font-weight:600;
  display:flex;align-items:center;gap:7px;
}
.review .rname .plat{width:17px;height:17px;flex:0 0 auto;opacity:.9}
.review p{margin:10px 0 0;font-size:19px;line-height:1.32;font-weight:500}

/* ============================ FOOTER (rounded dark panel) ============================ */
.footer{
  margin-top:36px;
  padding:22px var(--pad) 18px;
  text-align:center;background:#0f1013;
  border-radius:28px 28px 0 0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.flinks{display:flex;gap:26px;justify-content:center}
.flinks a{font-size:13px;color:var(--grey);font-weight:500}
.copy{margin-top:14px;font-size:12px;color:var(--grey)}

/* ============================ SHARED CTA ============================ */
.cta{
  width:100%;height:60px;border-radius:16px;background:var(--orange);
  color:#fff;font-size:21px;font-weight:700;letter-spacing:.2px;
  box-shadow:0 8px 24px rgba(255,149,0,.28);
}
.cta:active{transform:translateY(1px)}

/* scroll affordance — animated chevron above the CTA, fades once the user scrolls */
.scroll-hint{
  position:fixed;left:0;right:0;bottom:108px;z-index:41;text-align:center;
  color:rgba(255,255,255,.5);pointer-events:none;
  animation:hintbob 1.5s ease-in-out infinite;transition:opacity .35s;
}
@keyframes hintbob{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
body.scrolled .scroll-hint{opacity:0}

.cta-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:40;pointer-events:none;
  padding:26px 0 calc(22px + env(safe-area-inset-bottom));
  background:linear-gradient(transparent,#000 42%);
  opacity:0;transition:opacity .35s;                 /* hidden until the user scrolls */
}
body.scrolled .cta-bar{opacity:1}
.cta-wrap{max-width:var(--fw);margin:0 auto;padding:0 var(--pad);pointer-events:auto}
.cta-bar .cta-wrap{pointer-events:none}                 /* landing CTA off until scrolled */
body.scrolled .cta-bar .cta-wrap{pointer-events:auto}

/* ============================ PAYWALL OVERLAY (screen 2) ============================ */
.pw{
  position:fixed;inset:0;z-index:60;display:none;overflow:hidden;
  background:
    radial-gradient(120% 32% at 50% 0%, #1d1e24 0%, rgba(29,30,36,0) 62%),
    linear-gradient(180deg,#050506,#0e0f12);
}
.pw.open{display:block}
.pw-inner{
  position:relative;max-width:var(--fw);margin:0 auto;
  height:100vh;height:100dvh;
  display:flex;flex-direction:column;
  padding:44px var(--pad) 104px;              /* bottom room for the pinned CTA bar */
  text-align:center;overflow:hidden;
}
.pw-x{position:absolute;top:14px;right:14px;background:none;color:#fff;
  font-size:30px;line-height:1;width:36px;height:36px;opacity:.85;z-index:2}
.pw-top{flex:0 0 auto}
.pw-mid{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center}
.pw-bottom{flex:0 0 auto}
.pw-shield{width:84px;height:auto;margin:6px auto 0}
.pw-title{font-size:30px;line-height:1.16;font-weight:800;margin:12px 0 0;letter-spacing:-.4px}

.timeline{position:relative;width:100%;max-width:322px;margin:0 auto;text-align:left}
.timeline::before{content:"";position:absolute;left:29px;top:42px;bottom:42px;width:10px;
  background:#2A2A2E;border-radius:6px}
.tl-row{position:relative;display:flex;align-items:flex-start;gap:18px;min-height:86px}
.tl-ic{width:60px;height:60px;flex:0 0 60px;position:relative;z-index:2}
.tl-txt{padding-top:6px}
.tl-txt b{display:block;font-size:20px;font-weight:700}
.tl-today{color:var(--orange)!important}
.tl-txt span{display:block;font-size:17px;font-weight:500;margin-top:2px}
.pw-price{margin:0;font-size:17px;font-weight:500;line-height:1.5}

/* pinned paywall CTA — same fixed pattern as the landing, always above browser chrome */
.pw-cta-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:61;
  padding:14px 0 calc(22px + env(safe-area-inset-bottom));
  background:linear-gradient(transparent,#0e0f12 44%);
}

#pw-demo{display:none;position:fixed;left:0;right:0;bottom:0;background:#111;
  color:#ccc;font-size:12px;padding:10px 16px;text-align:center;z-index:70}