/* Moonfox — site tokens. These are MoonlyTheme.swift's values: the site is the
   app's midnight ground, one lavender accent for actions, gold only for moons
   and stars, Fraunces for the storybook voice, the system face for everything else. */
@font-face { font-family:"Fraunces"; src:url("/fonts/Fraunces.ttf") format("truetype"); font-weight:100 900; font-style:normal; font-display:swap; }
@font-face { font-family:"Fraunces"; src:url("/fonts/Fraunces-Italic.ttf") format("truetype"); font-weight:100 900; font-style:italic; font-display:swap; }

:root {
  --midnight:#0C1231; --surface:#161D44; --raised:#1F2756; --hairline:#2B3468;
  --lavender:#B9A8F7; --on-lavender:#15113A; --violet:#6C5CB0; --gold:#E8CB8C;
  --cream:#F4EFE6; --cream2:#B7B4CF; --cream3:#8E8BAB;
  --measure:min(1120px, 92vw);
  --display:"Fraunces", ui-serif, Georgia, serif;
  --sans:-apple-system, BlinkMacSystemFont, "SF Pro Rounded", "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --settle:cubic-bezier(.22,1,.36,1);
  color-scheme: dark;
}
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } *{ animation:none!important; transition:none!important; } }
body { margin:0; background:var(--midnight); color:var(--cream); font:400 17px/1.6 var(--sans); -webkit-font-smoothing:antialiased; }
img { max-width:100%; height:auto; display:block; }
a { color:inherit; }
h1,h2,h3 { font-family:var(--display); font-weight:600; letter-spacing:-.01em; line-height:1.08; margin:0; }
.wrap { width:var(--measure); margin:0 auto; }
.eyebrow { font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--cream3); margin:0 0 14px; }
.gold { color:var(--gold); }

/* Header */
.top { display:flex; align-items:center; justify-content:space-between; padding:22px 0; }
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; }
.brand img { width:40px; height:40px; border-radius:10px; }
.brand span { font-family:var(--display); font-weight:600; font-size:22px; }
.top nav { display:flex; gap:22px; font-size:15px; color:var(--cream2); }
.top nav a { text-decoration:none; }
.top nav a:hover { color:var(--cream); }
@media (max-width:640px){ .top nav { display:none; } }

/* Hero */
.hero { position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; padding:40px 0 80px; }
.hero::before { content:""; position:absolute; inset:-120px -20vw auto; height:520px; background:radial-gradient(closest-side, #3B347088, transparent); z-index:-1; }
.hero h1 { font-size:clamp(40px,6vw,68px); }
.hero h1 em { font-style:italic; font-weight:500; color:var(--gold); }
.hero p.lead { font-size:clamp(18px,2vw,21px); color:var(--cream2); max-width:34em; margin:22px 0 30px; }
.hero .art { position:relative; }
.hero .art img { border-radius:28px; box-shadow:0 30px 80px #0008; border:1px solid var(--hairline); }
.hero .icon { position:absolute; left:-28px; bottom:-26px; width:112px; border-radius:26px; box-shadow:0 18px 40px #0009; border:none!important; }
@media (max-width:860px){ .hero { grid-template-columns:1fr; } .hero .art { max-width:420px; } }

.cta { display:inline-flex; align-items:center; gap:10px; background:var(--lavender); color:var(--on-lavender); padding:15px 26px; border-radius:999px; font-weight:600; text-decoration:none; box-shadow:0 10px 30px #b9a8f740; }
.cta.quiet { background:var(--raised); color:var(--cream); box-shadow:none; border:1px solid var(--hairline); }
.note { font-size:14px; color:var(--cream3); margin-top:12px; }

/* Sections */
section { padding:84px 0; border-top:1px solid var(--hairline); }
section h2 { font-size:clamp(30px,4vw,44px); margin-bottom:14px; }
section p.sub { color:var(--cream2); max-width:40em; margin:0 0 40px; font-size:18px; }

.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; counter-reset:step; }
.step { background:var(--surface); border:1px solid var(--hairline); border-radius:22px; padding:26px; }
.step::before { counter-increment:step; content:counter(step); display:inline-grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--raised); color:var(--gold); font-weight:700; margin-bottom:14px; }
.step h3 { font-size:22px; margin-bottom:8px; }
.step p { color:var(--cream2); margin:0; }
@media (max-width:860px){ .steps { grid-template-columns:1fr; } }

.features { display:grid; grid-template-columns:repeat(2,1fr); gap:44px 56px; }
.feature h3 { font-size:24px; margin-bottom:8px; }
.feature p { color:var(--cream2); margin:0; }
@media (max-width:760px){ .features { grid-template-columns:1fr; } }

.friends { display:flex; gap:12px; overflow-x:auto; padding:6px 2px 18px; scrollbar-width:none; margin-top:34px; }
.friends img { width:92px; height:92px; border-radius:50%; border:2px solid #e8cb8c99; flex:none; }

.shots { display:flex; gap:18px; overflow-x:auto; padding:8px 2px 24px; scroll-snap-type:x mandatory; scrollbar-width:thin; }
.shots figure { margin:0; flex:none; width:230px; scroll-snap-align:start; }
.shots img { border-radius:26px; border:1px solid var(--hairline); box-shadow:0 20px 50px #0007; }
.shots figcaption { font-size:14px; color:var(--cream2); margin-top:12px; text-align:center; }

.promises { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.promise { padding:22px; border-radius:18px; background:var(--surface); border:1px solid var(--hairline); }
.promise strong { display:block; font-size:17px; margin-bottom:4px; }
.promise span { color:var(--cream2); font-size:15px; }
@media (max-width:860px){ .promises { grid-template-columns:1fr; } }

.price { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.plan { padding:30px; border-radius:24px; background:var(--surface); border:1px solid var(--hairline); }
.plan.featured { border-color:#b9a8f7aa; background:linear-gradient(180deg, #1F2756, #161D44); }
.plan h3 { font-size:26px; margin-bottom:8px; }
.plan ul { margin:14px 0 0; padding-left:20px; color:var(--cream2); }
.plan li { margin-bottom:8px; }
@media (max-width:760px){ .price { grid-template-columns:1fr; } }

details { border-bottom:1px solid var(--hairline); padding:18px 0; }
summary { cursor:pointer; font-weight:600; font-size:18px; list-style:none; }
summary::-webkit-details-marker { display:none; }
summary::after { content:"+"; float:right; color:var(--cream3); }
details[open] summary::after { content:"–"; }
details p { color:var(--cream2); margin:10px 0 0; }

footer.site { border-top:1px solid var(--hairline); padding:40px 0 60px; color:var(--cream3); font-size:14px; display:flex; flex-wrap:wrap; gap:14px 28px; justify-content:space-between; }
footer.site a { text-decoration:none; color:var(--cream2); }
footer.site nav { display:flex; gap:22px; flex-wrap:wrap; }

/* Prose: /privacy, /terms, /support */
.prose { width:min(740px,92vw); margin:0 auto; padding:48px 0 96px; }
.prose h1 { font-size:clamp(34px,5vw,48px); margin:0 0 8px; }
.prose h2 { font-size:24px; margin:44px 0 10px; }
.prose p, .prose li { color:var(--cream); }
.prose li { margin-bottom:8px; }
.prose .updated { color:var(--cream3); font-size:14px; margin:0 0 30px; }
.prose a { color:var(--lavender); text-underline-offset:3px; }
.prose table { border-collapse:collapse; width:100%; font-size:15px; margin:16px 0; }
.prose th,.prose td { text-align:left; padding:10px 12px; border-bottom:1px solid var(--hairline); vertical-align:top; }
.prose th { color:var(--cream3); font-weight:600; font-size:13px; }
.prose .callout { background:var(--surface); border:1px solid var(--hairline); border-radius:18px; padding:18px 22px; margin:22px 0; }