/* RenewShot — golden-hour photo lab identity (deliberate single dark theme,
   matching the app). Tokens mirror the app's theme.ts. */
:root{
  --ink:#f2efe8; --muted:#8e94a5; --faint:#5c6272;
  --ground:#0b0d13; --raised:#12151e; --card:#191e2a; --card2:#1f2533; --line:#272e3d;
  --ember:#ff6a3d; --honey:#ffc46b; --leaf:#74c98e;
  --grad:linear-gradient(120deg,#ff6a3d,#ffc46b);
  --serif:"Didot","Bodoni MT","Playfair Display",Georgia,"Times New Roman",serif;
  --sans:"SF Pro Text","Segoe UI",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(1000px 520px at 72% -8%, rgba(255,106,61,.14), transparent 62%),
    radial-gradient(700px 500px at 4% 30%, rgba(255,196,107,.05), transparent 60%),
    var(--ground);
  color:var(--ink); font-family:var(--sans); line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1060px; margin:0 auto; padding:0 22px}

/* wordmark */
.wm{font-family:var(--serif); font-style:italic; font-size:1.5rem; color:var(--ink); text-decoration:none}
.wm b{font-family:var(--sans); font-style:normal; font-weight:800; letter-spacing:-.02em;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}

/* nav */
nav{display:flex; align-items:center; justify-content:space-between; padding:26px 0}
nav .links{display:flex; gap:26px; align-items:center}
nav a{color:var(--muted); text-decoration:none; font-size:.9rem; transition:color .15s}
nav a:hover{color:var(--ink)}
.btn{display:inline-block; background:var(--grad); color:#1d1006; font-weight:800;
  padding:13px 26px; border-radius:14px; text-decoration:none; font-size:.95rem;
  box-shadow:0 10px 30px -10px rgba(255,106,61,.5); transition:filter .15s, transform .1s}
.btn:hover{filter:brightness(1.07)} .btn:active{transform:scale(.98)}
.btn.ghost{background:var(--card); color:var(--ink); border:1px solid var(--line); box-shadow:none; font-weight:600}

/* hero */
.hero{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; padding:52px 0 84px}
@media(max-width:860px){ .hero{grid-template-columns:1fr; gap:36px} }
.eyebrow{font-size:.68rem; letter-spacing:.24em; color:var(--honey); font-weight:700; margin-bottom:14px}
h1{font-family:var(--serif); font-style:italic; font-weight:400; font-size:clamp(2.1rem,4.6vw,3.3rem);
  line-height:1.15; letter-spacing:.005em; text-wrap:balance; margin-bottom:18px}
.sub{color:var(--muted); font-size:1.05rem; max-width:46ch; margin-bottom:28px}
.cta-row{display:flex; gap:14px; align-items:center; flex-wrap:wrap}
.store-note{color:var(--faint); font-size:.8rem; margin-top:14px}

/* before/after slider */
.ba{position:relative; border-radius:22px; overflow:hidden; touch-action:none; user-select:none;
  cursor:ew-resize; box-shadow:0 40px 90px -30px rgba(0,0,0,.8), 0 20px 50px -20px rgba(255,106,61,.15);
  border:1px solid var(--line); background:var(--raised)}
.ba img{display:block; width:100%; pointer-events:none}
.ba .before{position:absolute; inset:0; clip-path:inset(0 calc(100% - var(--cut,50%)) 0 0)}
.ba .before img{width:100%; height:100%; object-fit:cover}
.ba .handle{position:absolute; top:0; bottom:0; left:var(--cut,50%); width:2px;
  background:rgba(255,249,236,.95); z-index:5; box-shadow:0 0 14px rgba(255,196,107,.65); pointer-events:none}
.ba .knob{position:absolute; top:50%; left:var(--cut,50%); transform:translate(-50%,-50%);
  width:42px; height:42px; border-radius:50%; background:#fff9ec; z-index:6;
  display:flex; align-items:center; justify-content:center; pointer-events:none;
  color:#1d1006; font-weight:800; box-shadow:0 4px 18px rgba(0,0,0,.55)}
.ba .tag{position:absolute; bottom:12px; z-index:4; font-size:.6rem; letter-spacing:.18em;
  font-weight:700; padding:5px 11px; border-radius:999px; background:rgba(8,9,13,.72); color:var(--ink)}
.ba .tag.l{left:12px} .ba .tag.r{right:12px; color:var(--honey)}

/* sections */
section{padding:64px 0}
.sec-head{margin-bottom:36px; max-width:56ch}
h2{font-family:var(--serif); font-style:italic; font-weight:400; font-size:clamp(1.5rem,3vw,2.1rem); margin-bottom:10px}
.sec-head p{color:var(--muted)}

/* tools grid */
.tools{display:grid; grid-template-columns:repeat(auto-fit,minmax(185px,1fr)); gap:14px}
.tool-card{border-radius:18px; overflow:hidden; border:1px solid var(--line); background:var(--card);
  transition:transform .2s, border-color .2s}
.tool-card:hover{transform:translateY(-4px); border-color:rgba(255,196,107,.5)}
.tool-card .split{position:relative; aspect-ratio:4/5}
.tool-card .split img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.tool-card .split .b{clip-path:inset(0 50% 0 0)}
.tool-card .split .seam{position:absolute; left:50%; top:0; bottom:0; width:1.5px; background:rgba(255,249,236,.85)}
.tool-card .split .mini{position:absolute; bottom:8px; font-size:.52rem; letter-spacing:.14em; font-weight:800;
  padding:3px 8px; border-radius:999px; background:rgba(8,9,13,.72)}
.tool-card .split .mini.l{left:8px} .tool-card .split .mini.r{right:8px; color:var(--honey)}
.tool-card .meta{padding:13px 14px}
.tool-card .meta b{display:block; font-size:.95rem; margin-bottom:2px}
.tool-card .meta span{color:var(--muted); font-size:.8rem}
.tool-plain{display:flex; flex-direction:column; justify-content:center; gap:6px; padding:22px;
  border-radius:18px; border:1px solid var(--line); background:var(--card2)}
.tool-plain b{font-size:.95rem}
.tool-plain span{color:var(--muted); font-size:.8rem}

/* steps */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media(max-width:720px){ .steps{grid-template-columns:1fr} }
.step{background:var(--card); border:1px solid var(--line); border-radius:18px; padding:24px}
.step .n{font-family:var(--serif); font-style:italic; font-size:1.6rem; color:var(--honey); margin-bottom:10px}
.step b{display:block; margin-bottom:6px}
.step p{color:var(--muted); font-size:.9rem}

/* trust */
.trust{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px}
.trust .t{display:flex; gap:12px; align-items:flex-start; background:var(--raised);
  border:1px solid var(--line); border-radius:16px; padding:18px}
.trust .t .ico{color:var(--leaf); font-size:1.1rem}
.trust .t b{display:block; font-size:.92rem; margin-bottom:3px}
.trust .t span{color:var(--muted); font-size:.82rem}

/* pricing */
.plans{display:grid; grid-template-columns:1fr 1fr; gap:18px; max-width:720px}
@media(max-width:680px){ .plans{grid-template-columns:1fr} }
.plan{border:1.5px solid var(--line); border-radius:20px; padding:28px; background:var(--card); position:relative}
.plan.pro{border-color:var(--ember); background:linear-gradient(160deg, rgba(255,106,61,.10), rgba(255,196,107,.04))}
.plan .badge{position:absolute; top:-11px; right:22px; background:var(--grad); color:#1d1006;
  font-size:.62rem; font-weight:800; letter-spacing:.08em; padding:4px 12px; border-radius:999px}
.plan h3{font-size:1.05rem; margin-bottom:4px}
.plan .price{font-size:1.9rem; font-weight:800; margin:10px 0 2px}
.plan .per{color:var(--muted); font-size:.8rem; margin-bottom:16px}
.plan ul{list-style:none}
.plan li{padding:7px 0; color:#d8dbe2; font-size:.9rem; border-bottom:1px solid rgba(39,46,61,.5)}
.plan li:last-child{border-bottom:none}
.plan li.no{color:var(--faint)}
.plan .alt{color:var(--faint); font-size:.78rem; margin-top:12px}

/* faq */
.faq{max-width:720px}
.faq details{border:1px solid var(--line); border-radius:14px; background:var(--card); margin-bottom:10px}
.faq summary{padding:16px 20px; cursor:pointer; font-weight:600; font-size:.95rem; list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; float:right; color:var(--honey); font-weight:400}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 20px 16px; color:var(--muted); font-size:.9rem}

/* footer */
footer{border-top:1px solid var(--line); margin-top:40px; padding:36px 0 56px}
footer .cols{display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; align-items:flex-start}
footer .links{display:flex; gap:22px; flex-wrap:wrap}
footer a{color:var(--muted); text-decoration:none; font-size:.85rem}
footer a:hover{color:var(--ink)}
footer .fine{color:var(--faint); font-size:.75rem; margin-top:18px}

/* legal pages */
.legal{max-width:760px; padding:24px 0 80px}
.legal h1{font-size:2rem; margin-bottom:6px}
.legal .updated{color:var(--faint); font-size:.8rem; margin-bottom:34px}
.legal h2{font-size:1.25rem; margin:34px 0 10px}
.legal p, .legal li{color:#c9cdd8; font-size:.95rem; margin-bottom:10px}
.legal ul{padding-inline-start:22px; margin-bottom:12px}
.legal strong{color:var(--ink)}
.legal a{color:var(--honey)}