/* Shared by the occasion pages (birthday-song, love-song, ...). Same tokens
   and type as the rest of the site, so they read as one product. */
:root {
  --bg:#0A201D; --bg2:#0F2B27; --ink:#F3EEDF; --muted:#93A69E;
  --gold:#E3A83E; --gold2:#F0C877; --line:rgba(243,238,223,.14); --card:rgba(255,255,255,.04);
  --bubble:#1F4A43;
}
:root[data-theme="light"] {
  --bg:#F5EFE1; --bg2:#EDE4CE; --ink:#17231F; --muted:#5E6E67;
  --gold:#B8842A; --gold2:#8F6520; --line:rgba(23,35,31,.13); --card:rgba(23,35,31,.035);
  --bubble:#DCEBDD;
}
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  background:radial-gradient(1100px 520px at 85% -8%, rgba(227,168,62,.14), transparent), var(--bg);
  color:var(--ink); line-height:1.6;
  font-family:'Space Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
}
a { color:var(--gold); }
.wrap { max-width:760px; margin:0 auto; padding:28px 22px 90px; }
nav.top { display:flex; justify-content:space-between; align-items:center; gap:16px; padding-bottom:28px; }
.brand { font-family:'Fraunces',serif; font-weight:600; font-style:italic; font-size:20px; color:var(--gold); text-decoration:none; }
.top-links { display:flex; gap:16px; font-size:14px; }
.top-links a { color:var(--muted); text-decoration:none; }
.top-links a:hover { color:var(--ink); }
.crumbs { font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--muted); margin-bottom:14px; letter-spacing:.03em; }
.crumbs a { color:var(--muted); text-decoration:none; }
.crumbs a:hover { color:var(--gold); }
h1 { font-family:'Fraunces',serif; font-weight:600; font-size:clamp(30px,6vw,46px); line-height:1.12; letter-spacing:-.015em; margin-bottom:16px; }
h1, h2 { text-wrap:balance; }
h1 em, h2 em { color:var(--gold); font-style:italic; }
h2 { font-family:'Fraunces',serif; font-weight:600; font-size:clamp(22px,4vw,28px); line-height:1.25; margin-bottom:14px; }
h3 { font-size:16px; font-weight:600; margin-bottom:4px; }
.lede { font-size:18px; color:var(--ink); max-width:60ch; margin-bottom:26px; }
.lede b { color:var(--gold); font-weight:600; }
section { margin-top:56px; }
.mark { font-family:'IBM Plex Mono',monospace; font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--gold); margin-bottom:10px; }
p + p { margin-top:12px; }
.muted { color:var(--muted); }

.wa-big {
  display:inline-flex; align-items:center; gap:10px; background:var(--gold); color:#1a1005;
  text-decoration:none; font-weight:700; font-size:17px; padding:15px 24px; border-radius:14px;
  box-shadow:0 10px 36px rgba(227,168,62,.3); transition:transform .15s ease, background .15s ease;
}
.wa-big:hover { background:var(--gold2); transform:translateY(-1px); }
.wa-big svg { width:22px; height:22px; fill:currentColor; }
.free-note { font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:var(--muted); margin-top:12px; letter-spacing:.04em; }
.free-note b { color:var(--gold); }

.sample { display:flex; gap:18px; align-items:center; background:var(--card); border:1px solid var(--line); border-radius:18px; padding:16px; }
.sample img { width:96px; height:96px; border-radius:12px; object-fit:cover; flex-shrink:0; }
.sample .t { font-family:'Fraunces',serif; font-weight:600; font-size:19px; }
.sample .g { color:var(--muted); font-size:13px; margin-bottom:6px; }
.sample .s { font-size:14.5px; font-style:italic; margin-bottom:10px; }
.sample audio { width:100%; height:36px; }
.sample + .sample { margin-top:14px; }

.bubbles { display:flex; flex-direction:column; gap:12px; }
.bubble { align-self:flex-start; max-width:88%; background:var(--bubble); border-radius:16px 16px 16px 4px; padding:12px 15px; font-size:15.5px; }
.bubble small { display:block; font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--muted); margin-top:6px; letter-spacing:.03em; }

.steps { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.step { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px; }
.step .num { font-family:'IBM Plex Mono',monospace; color:var(--gold); font-size:12px; margin-bottom:6px; }
.step span { color:var(--muted); font-size:14.5px; }

.prices { width:100%; border-collapse:collapse; margin-top:6px; font-size:15.5px; }
.prices td { padding:11px 4px; border-bottom:1px solid var(--line); }
.prices td:last-child { text-align:right; font-family:'Fraunces',serif; font-weight:600; color:var(--gold); }
.prices tr:first-child td { color:var(--ink); }

.note { background:var(--card); border:1px solid var(--line); border-left:3px solid var(--gold); border-radius:10px; padding:14px 16px; font-size:14.5px; }

details { border-bottom:1px solid var(--line); padding:16px 2px; }
details summary { cursor:pointer; font-weight:600; font-size:16.5px; list-style:none; display:flex; justify-content:space-between; gap:12px; }
details summary::-webkit-details-marker { display:none; }
details summary::after { content:"+"; color:var(--gold); font-weight:700; }
details[open] summary::after { content:"−"; }
details p { color:var(--muted); margin-top:10px; font-size:15.5px; }

.chips { display:flex; flex-wrap:wrap; gap:10px; }
.chips a { border:1px solid var(--line); border-radius:999px; padding:8px 15px; color:var(--ink); text-decoration:none; font-size:14.5px; background:var(--card); }
.chips a:hover { border-color:var(--gold); color:var(--gold); }

.uses { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.use { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px; }
.use p { color:var(--muted); font-size:14.5px; margin-bottom:10px; }
.use a { font-size:14.5px; font-weight:600; text-decoration:none; }

.closing { text-align:center; margin-top:72px; padding:40px 20px; border:1px solid var(--line); border-radius:22px; background:var(--card); }
.closing h2 { margin-bottom:10px; }
.closing p { color:var(--muted); margin-bottom:22px; }

footer { margin-top:56px; padding-top:22px; border-top:1px solid var(--line); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:13.5px; color:var(--muted); }
footer a { color:var(--muted); text-decoration:none; margin-left:14px; }
footer a:hover { color:var(--gold); }

@media (max-width:600px) {
  .steps, .uses { grid-template-columns:1fr; }
  .sample { flex-direction:column; align-items:flex-start; }
  .sample img { width:100%; height:auto; aspect-ratio:1/1; }
  .top-links { display:none; }
  footer a { margin-left:0; margin-right:14px; }
}