:root { --bg:#fff6f9; --card:#fffdfb; --ink:#5b3a44; --soft:#8a6b74; --pink:#f7a8c4; --lilac:#cdb8f0; --mint:#a8e6cf; --sun:#ffe08a; --line:#f1dde4; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:17px/1.6 "Nunito", system-ui, -apple-system, sans-serif;
  background-image: radial-gradient(circle at 12% 18%, #ffe3ee 0 120px, transparent 121px), radial-gradient(circle at 88% 8%, #e9e0ff 0 90px, transparent 91px),
                    radial-gradient(circle at 80% 92%, #dff6ea 0 140px, transparent 141px); background-attachment: fixed; }
a { color:#c2557f; } a:hover { color:#9c3a62; }
header { display:flex; align-items:center; justify-content:space-between; gap:16px; max-width:960px; margin:0 auto; padding:20px 20px 0; }
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink); font:600 24px "Fredoka", system-ui, sans-serif; }
.brand img { width:44px; height:44px; border-radius:12px; box-shadow:0 2px 8px #e7c2d1; }
nav { display:flex; gap:6px; flex-wrap:wrap; }
nav a { text-decoration:none; color:var(--ink); padding:8px 14px; border-radius:999px; font-weight:700; font-size:15px; }
nav a:hover, nav a.on { background:#ffe3ee; }
main { max-width:960px; margin:0 auto; padding:24px 20px 40px; }
.card { background:var(--card); border:2px solid var(--line); border-radius:28px; padding:28px 32px; box-shadow:0 6px 0 #f3dbe4; }
h1 { font:600 clamp(32px, 6vw, 52px)/1.1 "Fredoka", system-ui, sans-serif; margin:0 0 8px; }
h2 { font:600 22px "Fredoka", system-ui, sans-serif; margin:28px 0 6px; }
.hero { display:grid; grid-template-columns: 1.1fr 0.9fr; gap:28px; align-items:center; }
.hero img.claire { width:100%; max-width:320px; justify-self:center; filter: drop-shadow(0 10px 18px #efc3d3); animation: bob 3s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-10px) rotate(-2deg); } }
.lede { font-size:20px; color:var(--soft); }
.pill { display:inline-block; padding:12px 22px; border-radius:999px; background:var(--pink); color:#4a2633; font-weight:800; text-decoration:none; box-shadow:0 4px 0 #e58bae; }
.pill.quiet { background:#fff; border:2px solid var(--line); box-shadow:0 4px 0 var(--line); }
.row { display:flex; gap:12px; flex-wrap:wrap; margin-top:18px; }
.friends { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:28px; }
.friends img { width:64px; height:70px; object-fit:contain; filter: drop-shadow(0 4px 6px #f0d2dc); }
.features { display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; margin-top:24px; }
.feature { background:#fff; border:2px solid var(--line); border-radius:22px; padding:18px; }
.feature b { font-family:"Fredoka", system-ui, sans-serif; font-weight:600; font-size:18px; display:block; margin-bottom:4px; }
.feature:nth-child(1) { background:#fff2f7; } .feature:nth-child(2) { background:#f5f0ff; } .feature:nth-child(3) { background:#effbf5; }
.qa { border-top:2px dashed var(--line); padding-top:6px; }
.qa:first-of-type { border-top:none; }
.doc h2 { border-top:2px dashed var(--line); padding-top:18px; }
.doc ul { padding-left:22px; }
footer { max-width:960px; margin:0 auto; padding:0 20px 36px; color:var(--soft); font-size:14px; text-align:center; }
footer a { color:var(--soft); }
.gallery { display:grid; grid-template-columns: repeat(2, 1fr); gap:16px; margin-top:24px; }
.gallery figure { margin:0; background:#fff; border:2px solid var(--line); border-radius:22px; padding:10px; box-shadow:0 4px 0 #f3dbe4; }
.gallery img { width:100%; display:block; border-radius:14px; aspect-ratio: 2868 / 1320; object-fit:cover; }
.gallery figcaption { font-weight:700; font-size:15px; padding:8px 6px 2px; color:var(--soft); }
.soon { opacity:.85; border-style:dashed !important; }
.soon .mark { width:96px; height:96px; border-radius:22px; display:grid; place-items:center; background:#f5f0ff; font:600 44px "Fredoka", sans-serif; color:#a993d8; }
.apps { grid-template-columns: repeat(2, 1fr); }
.apps .soon { grid-column: 1 / -1; }
.app { display:flex; gap:18px; align-items:center; text-decoration:none; color:inherit; }
.app img { width:96px; height:96px; border-radius:22px; box-shadow:0 3px 10px #e7c2d1; flex:none; }
.app .go { font-weight:800; color:#c2557f; }
.gallery.tall { grid-template-columns: repeat(4, 1fr); }
.gallery.tall img { aspect-ratio:auto; object-fit:contain; }
.hero img.appicon { width:100%; max-width:240px; justify-self:center; border-radius:22%; box-shadow:0 12px 28px #c9d6ee; }
.prices .feature .price { font:600 30px "Fredoka", system-ui, sans-serif; display:block; margin:2px 0 6px; }
.fine { font-size:14px; color:var(--soft); }
.specs li { margin:4px 0; }
/* Local Keys: the same studio look, in cooler blues */
body.lk { --bg:#f5f8ff; --ink:#2f3d57; --soft:#66738c; --line:#dfe6f3;
  background-image: radial-gradient(circle at 12% 18%, #e3ecff 0 120px, transparent 121px), radial-gradient(circle at 88% 8%, #ece6ff 0 90px, transparent 91px),
                    radial-gradient(circle at 80% 92%, #def3f1 0 140px, transparent 141px); }
.lk a { color:#3b68b0; } .lk a:hover { color:#274d8a; }
.lk nav a:hover, .lk nav a.on { background:#e3ecff; }
.lk .card { box-shadow:0 6px 0 #dce5f4; }
.lk .brand img { box-shadow:0 2px 8px #c9d6ee; }
.lk .pill { background:#b9d3f7; color:#1f3557; box-shadow:0 4px 0 #8db3e8; }
.lk .pill.quiet { background:#fff; border:2px solid var(--line); box-shadow:0 4px 0 var(--line); }
.lk .feature:nth-child(3n+1) { background:#f0f5ff; } .lk .feature:nth-child(3n+2) { background:#f5f0ff; } .lk .feature:nth-child(3n) { background:#eefaf7; }
.lk .gallery figure { box-shadow:0 4px 0 #dce5f4; }
@media (max-width: 720px) { .gallery { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:12px; padding-bottom:6px; }
  .gallery figure { flex:0 0 86%; scroll-snap-align:center; } .gallery.tall figure { flex-basis:62%; } }
@media (max-width: 720px) { .hero, .features { grid-template-columns: 1fr; } .card { padding:22px 20px; } header { flex-direction:column; align-items:flex-start; } }