/* Sparkle: Photo Cleaner — shared styles
   Fonts (same as the app, only these two):
   - Headlines: Apple "New York" via ui-serif, Source Serif 4 as fallback
   - Everything else: "Avenir Next", Nunito Sans as fallback */

:root{
  --ink:#2A185B;
  --body:#5D4B86;
  --pink:#F45F9B;
  --purple:#7A46F5;
  --coral:#FF6578;
  --mint:#58C6AE;
  --aqua:#7FD2D0;
  --gold:#F5C967;
  --bg-top:#F4EEFF;
  --bg-bot:#FFFBFD;
  --card:rgba(255,255,255,.72);
  --line:rgba(122,70,245,.14);
  --shadow:0 18px 40px -18px rgba(122,70,245,.35);
  --keep:#0F9A66;
  --delete:#E8335F;
  --later:#7A46F5;
  --share:#D9890A;
  --serif:ui-serif,"New York","Source Serif 4",Georgia,serif;
  --sans:"Avenir Next",Avenir,"Nunito Sans",-apple-system,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);font-weight:400;font-size:17px;line-height:1.6;color:var(--body);
  background:linear-gradient(180deg,var(--bg-top) 0%,var(--bg-bot) 100%) fixed;
  min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
body::before{ /* gentle pink/purple glows */
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(520px 420px at 92% 6%,rgba(244,95,155,.16),transparent 70%),
    radial-gradient(620px 520px at 4% 38%,rgba(122,70,245,.14),transparent 70%),
    radial-gradient(560px 460px at 96% 78%,rgba(127,210,208,.14),transparent 70%);
}
img,video{max-width:100%;display:block}
a{color:var(--purple)}
:focus-visible{outline:3px solid var(--purple);outline-offset:3px;border-radius:10px}
.wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 20px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:#fff;color:var(--ink);padding:10px 16px;border-radius:12px;z-index:50;font-weight:600}
.skip:focus{left:12px}

h1,h2,h3{font-family:var(--serif);color:var(--ink);font-weight:700;letter-spacing:-.01em}
h1{font-size:clamp(36px,9.4vw,64px);line-height:1.04}
h2{font-size:clamp(30px,7vw,48px);line-height:1.08}
h3{font-size:clamp(22px,4.6vw,26px);line-height:1.15;font-weight:600}
.grad{background:linear-gradient(90deg,var(--pink),var(--purple));-webkit-background-clip:text;background-clip:text;color:var(--purple);-webkit-text-fill-color:transparent}
.lead{font-size:clamp(18px,4.4vw,21px);color:var(--body);max-width:30em}
.spark{color:var(--gold);font-family:var(--sans)}

/* ---------- header ---------- */
.site-header{padding:14px 0}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-family:var(--serif);font-weight:700;font-size:24px;min-height:44px}
.brand img{width:40px;height:40px;border-radius:22.4%;box-shadow:0 4px 10px -3px rgba(122,70,245,.45)}
.nav{display:none;gap:26px;font-weight:500}
.nav a{color:var(--ink);text-decoration:none;padding:10px 0}
.nav a:hover{color:var(--purple)}
.mini-store{font-weight:600;font-size:15px;text-decoration:none;color:var(--ink);background:rgba(255,255,255,.8);border:1px solid var(--line);border-radius:999px;padding:0 18px;min-height:44px;display:inline-flex;align-items:center}
.back-link{font-weight:600;font-size:15px;text-decoration:none;color:var(--ink);background:rgba(255,255,255,.85);border:1px solid var(--line);border-radius:999px;padding:0 18px;min-height:44px;display:inline-flex;align-items:center}
.back-link:hover{background:#fff;color:var(--purple)}
.mini-store.is-soon{color:var(--body);pointer-events:none}
.mini-store:not(.is-soon){background:var(--ink);color:#fff;border-color:var(--ink)}
@media (min-width:820px){.nav{display:flex}}

/* ---------- App Store button slot ---------- */
.store{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px}
.store-badge{display:inline-block;line-height:0;border-radius:10px}
.store-badge img{height:54px;width:auto}
.store-badge .missing{display:inline-flex;align-items:center;justify-content:center;height:54px;min-width:162px;padding:0 14px;border:2px dashed var(--purple);border-radius:10px;font-size:13px;line-height:1.2;color:var(--purple);text-align:center}
.store.is-soon .store-badge{opacity:.42;filter:grayscale(1);pointer-events:none}
.store-soon{display:none;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--ink);font-weight:600;font-size:15px;box-shadow:0 6px 16px -10px rgba(122,70,245,.5)}
.store.is-soon .store-soon{display:inline-flex}

/* ---------- hero ---------- */
.hero{padding:20px 0 64px}
.hero .wrap{display:grid;gap:40px;align-items:center}
.hero-copy{display:flex;flex-direction:column;gap:20px}
.motto{font-family:var(--sans);font-weight:700;font-size:clamp(26px,6.4vw,34px);line-height:1.1;letter-spacing:-.005em}
.m1{color:var(--coral)}.m2{color:var(--purple)}.m3{color:var(--aqua)}.m4{color:var(--gold)}
.tagline{font-family:var(--serif);font-style:italic;font-weight:600;font-size:20px;color:var(--ink)}
.hero-store{margin-top:6px;display:flex;flex-direction:column;gap:10px}
.hero-note{font-size:15px}
.hero-media{position:relative;display:flex;justify-content:center;padding:6px 0 20px}
.device{position:relative;width:min(290px,76vw);background:#1B1240;padding:9px;border-radius:46px;box-shadow:0 34px 60px -22px rgba(122,70,245,.55),0 0 0 1px rgba(27,18,64,.5)}
.device video{width:100%;aspect-ratio:886/1920;border-radius:37px;object-fit:cover;background:var(--bg-top)}
.hero-mascot{position:absolute;left:max(-4px,calc(50% - 215px));bottom:-6px;width:min(150px,36vw);filter:drop-shadow(0 14px 18px rgba(122,70,245,.3));animation:bob 5s ease-in-out infinite}
.s1,.s2,.s3{position:absolute;color:var(--gold);font-size:26px;line-height:1}
.s1{top:2%;right:7%}.s2{top:36%;left:5%;font-size:18px;color:var(--purple);opacity:.6}.s3{bottom:18%;right:6%;font-size:20px}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-12px) rotate(2deg)}}
@media (min-width:880px){
  .hero{padding:36px 0 96px}
  .hero .wrap{grid-template-columns:1.05fr .95fr;gap:56px}
  .device{width:310px}
  .hero-mascot{left:calc(50% - 250px);width:190px}
  .s1{right:calc(50% - 240px)}.s3{right:calc(50% - 235px)}.s2{left:calc(50% - 245px)}
}

/* ---------- sections ---------- */
section{padding:64px 0}
@media (min-width:880px){section{padding:96px 0}}
.sec-head{display:flex;flex-direction:column;gap:14px;margin-bottom:36px;max-width:40em}
.center{text-align:center;margin-left:auto;margin-right:auto;align-items:center}

/* how it works */
.swipes{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:560px){.swipes{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.swipes{grid-template-columns:repeat(4,1fr)}}
.swipe{position:relative;border-radius:28px;padding:22px 22px 26px;display:flex;flex-direction:column;gap:8px;box-shadow:var(--shadow);overflow:hidden;border:1px solid var(--line)}
.swipe img{height:150px;width:auto;margin:0 auto 4px;object-fit:contain;filter:drop-shadow(0 12px 14px rgba(122,70,245,.22))}
.swipe .dir{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;color:#fff;font-weight:700;font-size:24px;line-height:1}
.swipe h3 .k{display:inline}
.swipe p{font-size:16px}
.sw-keep{background:linear-gradient(180deg,rgba(88,198,174,.22),rgba(255,255,255,.7))}.sw-keep .dir{background:var(--mint)}.sw-keep h3 .k{color:var(--keep)}
.sw-del{background:linear-gradient(180deg,rgba(255,101,120,.2),rgba(255,255,255,.7))}.sw-del .dir{background:var(--coral)}.sw-del h3 .k{color:var(--delete)}
.sw-later{background:linear-gradient(180deg,rgba(122,70,245,.16),rgba(255,255,255,.7))}.sw-later .dir{background:var(--purple)}.sw-later h3 .k{color:var(--later)}
.sw-share{background:linear-gradient(180deg,rgba(245,201,103,.35),rgba(255,255,255,.7))}.sw-share .dir{background:var(--gold);color:var(--ink)}.sw-share h3 .k{color:var(--share)}
.swipe-note{margin-top:26px;display:flex;flex-wrap:wrap;gap:10px 22px;font-size:16px}
.swipe-note span{display:inline-flex;align-items:center;gap:8px}

/* features */
.feature{display:grid;gap:28px;align-items:center;padding:36px 0}
.feature-copy{display:flex;flex-direction:column;gap:14px;max-width:30em}
.feature-media{position:relative;display:flex;justify-content:center;padding:104px 16px 0}
.shot{width:min(270px,72vw);border-radius:15%/7%;box-shadow:0 30px 56px -24px rgba(122,70,245,.6);background:var(--bg-top)}
.f-mascot{position:absolute;width:min(130px,32vw);filter:drop-shadow(0 12px 16px rgba(122,70,245,.3))}
.f-mascot.r{right:6%;top:-6px}
.f-mascot.l{left:6%;top:-6px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.chip{background:#fff;border:1px solid var(--line);color:var(--ink);font-weight:500;font-size:14px;padding:6px 14px;border-radius:999px;min-height:32px;display:inline-flex;align-items:center}
.chip-label{font-weight:600;font-size:15px;color:var(--ink);align-self:center;width:100%}
@media (min-width:880px){
  .feature{grid-template-columns:1fr 1fr;gap:64px;padding:48px 0}
  .band.flip .feature-media{order:-1}
  .feature-copy{justify-self:center}
  .shot{width:300px}
  .f-mascot{width:150px}
  .feature-media{padding-top:60px}
  .f-mascot.r{right:calc(50% - 255px);top:8px}.f-mascot.l{left:calc(50% - 255px);top:8px}
}

/* privacy */
.privacy-panel{position:relative;border-radius:36px;padding:36px 22px;background:linear-gradient(135deg,rgba(255,255,255,.85),rgba(236,222,255,.85) 55%,rgba(255,228,242,.85));border:1px solid var(--line);box-shadow:var(--shadow);display:grid;gap:28px;align-items:center}
.privacy-mascot{width:min(230px,56vw);margin:0 auto;filter:drop-shadow(0 16px 20px rgba(122,70,245,.3))}
.priv-list{list-style:none;display:grid;gap:12px;margin-top:8px}
.priv-list li{display:flex;gap:14px;align-items:flex-start;background:rgba(255,255,255,.8);border-radius:20px;padding:14px 16px;border:1px solid var(--line)}
.priv-list .ic{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:rgba(122,70,245,.12);color:var(--purple)}
.priv-list b{display:block;color:var(--ink);font-weight:600}
.priv-list span{font-size:15.5px}
.privacy-link{margin-top:12px;display:inline-block;font-weight:600}
@media (min-width:880px){.privacy-panel{grid-template-columns:.8fr 1.2fr;padding:56px;gap:48px}}

/* pricing */
.plans{display:grid;gap:16px;max-width:760px;margin:0 auto}
@media (min-width:640px){.plans{grid-template-columns:1fr 1fr}}
.trial{max-width:760px;margin:0 auto 18px;text-align:center;border-radius:24px;padding:16px 20px;background:rgba(255,255,255,.7);border:1px solid var(--line);color:var(--ink);font-weight:600}
.plan{position:relative;border-radius:28px;padding:28px 24px;background:#fff;border:1.5px solid var(--line);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:6px}
.plan.best{border:2.5px solid transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,var(--pink),var(--purple)) border-box}
.plan h3{font-size:24px}
.price{font-family:var(--serif);font-weight:700;color:var(--ink);font-size:44px;line-height:1.05}
.price small{font-family:var(--sans);font-size:18px;font-weight:500;color:var(--body)}
.save{position:absolute;top:18px;right:18px;background:linear-gradient(90deg,var(--pink),var(--purple));color:#fff;font-weight:600;font-size:14px;padding:6px 14px;border-radius:999px}
.fine{text-align:center;margin-top:20px;font-size:15.5px}

/* final cta */
.final .box{text-align:center;border-radius:40px;padding:48px 22px 44px;background:linear-gradient(135deg,rgba(255,255,255,.85),rgba(236,222,255,.9) 50%,rgba(255,228,242,.9));border:1px solid var(--line);box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;gap:16px;position:relative;overflow:hidden}
.final .box img{width:min(150px,38vw);filter:drop-shadow(0 14px 18px rgba(122,70,245,.3))}
.final .motto{font-size:clamp(25px,7.2vw,56px);font-family:var(--serif);white-space:nowrap}
.final .store{justify-content:center}

/* footer */
.site-footer{padding:36px 0 48px;font-size:15px}
.site-footer .wrap{display:flex;flex-direction:column;gap:14px;border-top:1px solid var(--line);padding-top:26px}
.site-footer nav{display:flex;flex-wrap:wrap;gap:4px 22px}
.site-footer nav a{color:var(--ink);text-decoration:none;font-weight:500;min-height:44px;display:inline-flex;align-items:center}
.site-footer nav a:hover{color:var(--purple);text-decoration:underline}
@media (min-width:760px){.site-footer .wrap{flex-direction:row;justify-content:space-between;align-items:center}}

/* ---------- text pages (privacy, support, terms) ---------- */
.doc{padding:28px 0 56px}
.doc .paper{background:rgba(255,255,255,.82);border:1px solid var(--line);border-radius:32px;padding:30px 22px;box-shadow:var(--shadow);max-width:820px;margin:0 auto}
@media (min-width:700px){.doc .paper{padding:48px 56px}}
.doc h1{font-size:clamp(34px,8vw,50px);margin-bottom:8px}
.doc h2{font-size:clamp(23px,5vw,30px);margin:34px 0 10px}
.doc h3{font-size:20px;margin:22px 0 6px}
.doc p,.doc li{margin:10px 0}
.doc ul{padding-left:22px}
.doc .meta{font-size:15px}
.doc .callout{background:linear-gradient(135deg,rgba(236,222,255,.7),rgba(255,228,242,.6));border-radius:20px;padding:16px 20px;margin:18px 0;color:var(--ink)}
.doc strong{color:var(--ink);font-weight:600}
.faq details{border-top:1px solid var(--line);padding:4px 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;font-weight:600;color:var(--ink);padding:14px 36px 14px 0;min-height:44px;position:relative;display:flex;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;font-size:24px;color:var(--purple);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 14px}
.contact-btn{display:inline-flex;align-items:center;min-height:48px;padding:0 26px;border-radius:999px;background:var(--ink);color:#fff;text-decoration:none;font-weight:600;transition:background .15s,transform .15s}
.contact-btn:hover{background:var(--purple);transform:translateY(-1px)}
.doc-mascot{width:120px;float:right;margin:0 0 8px 12px;shape-outside:margin-box}

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

/* feature colour bands: each feature sits on a slightly deeper tint */
.band{padding:56px 0}
.band .feature{padding:0}
.b1{background:#F8F3FF}.b2{background:#F1E8FF}.b3{background:#EADCFF}.b4{background:#E6D2FB}.b5{background:#EFCDEB}
@media (min-width:880px){.band{padding:84px 0}}

/* Instagram pre-launch card */
.ig-card{display:flex;flex-direction:column;align-items:flex-start;gap:12px;max-width:520px;padding:22px 22px 24px;border-radius:28px;background:rgba(255,255,255,.85);border:1px solid var(--line);box-shadow:var(--shadow);text-align:left}
.ig-card h3{font-size:clamp(21px,5.4vw,26px);line-height:1.18}
.ig-card p{font-size:16.5px}
.ig-card strong{color:var(--ink);font-weight:700;letter-spacing:.02em}
.ig-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:999px;background:linear-gradient(90deg,#E0457E,#7A46F5);color:#fff;font-weight:700;font-size:17px;text-decoration:none;box-shadow:0 12px 24px -12px rgba(122,70,245,.8);transition:transform .15s,filter .15s}
.ig-btn:hover{transform:translateY(-1px);filter:brightness(1.06)}
.ig-btn svg{flex:none}
@media (max-width:560px){.ig-card{max-width:none;width:100%}.ig-btn{width:100%}}
.final .ig-card{text-align:center;align-items:center;margin-top:8px}

.ig-btn{white-space:nowrap;padding:0 18px;font-size:16.5px}