/* VolūM marketing site chrome. Sits on the Nocturne tokens (styles.css). */
body { margin: 0; background: var(--canvas); color: var(--ink-hi); font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-bright); }
::selection { background: var(--accent-faint); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

/* Breathing background, reacts to scroll via --bg-glow (set in site.js) */
.site-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.site-bg .glow {
  position: absolute; inset: -25%;
  background:
    radial-gradient(55% 42% at 28% 10%, var(--accent-faint), transparent 70%),
    radial-gradient(45% 38% at 80% 34%, var(--accent-tint), transparent 70%),
    radial-gradient(70% 30% at 50% 100%, var(--accent-tint), transparent 75%);
  opacity: calc(var(--bg-glow, 1) * var(--glow-opacity, 1) * 0.9);
  animation: volum-drift var(--drift-period) ease-in-out infinite;
  transition: opacity 0.8s var(--ease-exhale);
}
.site-bg .breathe {
  position: absolute; inset: -25%;
  background: radial-gradient(40% 30% at 30% 12%, var(--accent-tint), transparent 65%);
  animation: volum-breathe var(--breathe-period) ease-in-out infinite;
  opacity: calc(var(--bg-glow, 1) * var(--glow-opacity, 1));
}
@media (prefers-reduced-motion: reduce) { .site-bg .glow, .site-bg .breathe { animation: none; } }

main { position: relative; z-index: 1; }
.wrap { max-width: 1060px; margin: 0 auto; padding: 0 28px; }

/* Wordmark: the macron on u is the alarm line */
.mark { position: relative; font: 700 21px/1 var(--font-display); letter-spacing: -0.02em; color: var(--ink-hi); text-decoration: none; white-space: nowrap; }
.mark i { font-style: normal; position: relative; }
.mark i::after { content: ''; position: absolute; left: 4%; right: 4%; top: -0.2em; height: 2px; border-radius: 4px; background: var(--accent-bright); box-shadow: 0 0 8px var(--accent-dim); opacity: var(--glow-opacity, 1); }

/* Nav */
.nav { position: sticky; top: 0; z-index: 20; backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-bottom: 1px solid var(--hairline); }
.nav::before { content: ''; position: absolute; inset: 0; background: var(--canvas); opacity: 0.72; z-index: -1; }
.nav .row { display: flex; align-items: center; gap: 26px; height: 64px; }
.nav .lnk { font-size: 14px; font-weight: 500; color: var(--ink-mid); text-decoration: none; padding: 6px 2px; }
.nav .lnk:hover { color: var(--ink-hi); }
.nav .lnk[aria-current="page"] { color: var(--ink-hi); box-shadow: 0 2px 0 var(--accent); }
.nav .spacer { flex: 1; }
.nav .themes { display: flex; gap: 8px; align-items: center; }
.nav .themes button { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--hairline-strong); cursor: pointer; padding: 0; transition: transform var(--dur-tick) var(--ease-settle); }
.nav .themes button:hover { transform: scale(1.2); }
.nav .themes button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--canvas), 0 0 0 3.5px var(--ink-low); }
.nav .cta { font-size: 14px; font-weight: 600; color: var(--on-accent); background: var(--accent); border: none; border-radius: 28px; padding: 10px 20px; cursor: pointer; text-decoration: none; transition: transform var(--dur-tick) var(--ease-settle); }
.nav .cta:hover { color: var(--on-accent); transform: scale(1.03); }
.nav .cta:active { transform: scale(0.98); }
@media (max-width: 760px) { .nav .lnk { display: none; } }

/* Type */
h1, h2, h3 { font-family: var(--font-display); color: var(--ink-hi); text-wrap: balance; margin: 0; }
.display { font-size: clamp(42px, 6.4vw, 76px); font-weight: 300; letter-spacing: -0.02em; line-height: 1.06; }
.display strong { font-weight: 700; }
h2 { font-size: clamp(28px, 3.6vw, 40px); font-weight: 700; letter-spacing: -0.015em; line-height: 1.15; }
h3 { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0; }
.lede { font-size: clamp(16px, 1.6vw, 19px); line-height: 1.6; color: var(--ink-mid); text-wrap: pretty; max-width: 54ch; }
.body { font-size: 16px; line-height: 1.6; color: var(--ink-mid); text-wrap: pretty; }
.label { font: 600 12px var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-low); }
.tnum { font-feature-settings: 'tnum' 1; }

/* Sections */
section.band { padding: 96px 0; border-top: 1px solid var(--hairline); }
section.band.first { border-top: none; }
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.9s var(--ease-exhale), transform 0.9s var(--ease-exhale); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { transition: none; opacity: 1; transform: none; } }

/* Cards */
.card { background: var(--surface-1); border: 1px solid var(--hairline); border-radius: 24px; padding: 26px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
@media (max-width: 860px) { .grid3, .grid2 { grid-template-columns: 1fr; } }

/* Buttons */
.btn { font: 600 15px var(--font-body); border-radius: 28px; padding: 15px 28px; cursor: pointer; border: 1px solid var(--hairline-strong); background: transparent; color: var(--ink-hi); transition: background var(--dur-tick) var(--ease-settle), transform var(--dur-tick) var(--ease-settle); }
.btn:hover { background: var(--surface-press); }
.btn:active { transform: scale(0.98); }
.btn.primary { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.btn.primary:hover { background: var(--accent-bright); }
.linkish { background: none; border: none; padding: 0; font: inherit; font-size: 13px; color: var(--ink-low); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.linkish:hover { color: var(--ink-mid); }

/* Sign-up */
.signup { max-width: 520px; }
.signup .row { display: flex; gap: 10px; }
.signup input[type="email"] { flex: 1; min-width: 0; font: 400 16px var(--font-body); color: var(--ink-hi); background: var(--surface-1); border: 1px solid var(--hairline-strong); border-radius: 28px; padding: 15px 22px; }
.signup input[type="email"]::placeholder { color: var(--ink-faint); }
.signup input[type="email"]:focus { outline: none; border-color: var(--accent-dim); box-shadow: 0 0 0 3px var(--accent-faint); }
.consent { display: flex; gap: 11px; align-items: flex-start; margin-top: 16px; font-size: 13px; line-height: 1.55; color: var(--ink-low); cursor: pointer; }
.consent input { margin: 2px 0 0; width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; flex: none; }
.consent a { color: var(--ink-mid); }
.signup-err { margin-top: 12px; font-size: 13px; color: var(--warn); }
.signup-done { border: 1px solid var(--accent-dim); background: var(--accent-tint); border-radius: 24px; padding: 24px 26px; }
.signup-done .place { font: 300 34px/1.2 var(--font-display); letter-spacing: -0.015em; color: var(--ink-hi); font-feature-settings: 'tnum' 1; }
.signup-done .place strong { font-weight: 700; color: var(--accent-bright); }
.signup-done p + p { margin-top: 10px; }
.signup-done .body { font-size: 14px; }
.signup-done .linkish { margin-top: 16px; }
@media (max-width: 560px) { .signup .row { flex-direction: column; } }

/* Night scrub */
.night { position: relative; touch-action: none; cursor: ew-resize; }
.night canvas { display: block; width: 100%; height: 200px; }
.night-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; margin-top: 14px; }
.night-caption { font-size: 15px; line-height: 1.5; color: var(--ink-mid); min-height: 3em; text-wrap: pretty; }
.night-time { font: 300 40px/1 var(--font-display); letter-spacing: -0.02em; font-feature-settings: 'tnum' 1; color: var(--ink-hi); flex: none; }

/* Footer */
footer.site { position: relative; z-index: 1; border-top: 1px solid var(--hairline); padding: 56px 0 40px; margin-top: 96px; }
footer.site .cols { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; }
footer.site h4 { font: 600 12px var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-low); margin: 0 0 14px; }
footer.site a { display: block; font-size: 14px; color: var(--ink-mid); text-decoration: none; padding: 4px 0; }
footer.site a:hover { color: var(--ink-hi); }
footer.site .fine { font-size: 12.5px; line-height: 1.6; color: var(--ink-low); max-width: 44ch; margin-top: 14px; }
footer.site .base { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--hairline); font-size: 12.5px; color: var(--ink-faint); }
footer.site .modes { display: flex; gap: 2px; border: 1px solid var(--hairline); border-radius: 20px; padding: 2px; }
footer.site .modes button { font: 500 12px var(--font-body); color: var(--ink-low); background: none; border: none; border-radius: 16px; padding: 5px 12px; cursor: pointer; }
footer.site .modes button[aria-pressed="true"] { background: var(--surface-press); color: var(--ink-hi); }
@media (max-width: 760px) { footer.site .cols { grid-template-columns: 1fr; } }

/* Cookie note */
.cookienote { position: fixed; z-index: 30; left: 50%; transform: translateX(-50%); bottom: 22px; display: flex; align-items: center; gap: 16px; background: var(--sheet-bg); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid var(--hairline-strong); border-radius: 28px; padding: 12px 14px 12px 22px; font-size: 13.5px; color: var(--ink-mid); max-width: min(92vw, 560px); }
.cookienote a { color: var(--ink-hi); }
.cookienote button { font: 600 13px var(--font-body); color: var(--ink-hi); background: var(--surface-press); border: none; border-radius: 20px; padding: 8px 16px; cursor: pointer; flex: none; }

/* FAQ accordions */
.faq details { border-top: 1px solid var(--hairline); }
.faq details:last-child { border-bottom: 1px solid var(--hairline); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 4px; cursor: pointer; list-style: none; font: 600 17px var(--font-body); color: var(--ink-hi); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font: 300 26px var(--font-display); color: var(--ink-low); transition: transform var(--dur-settle) var(--ease-settle); flex: none; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .a { padding: 0 4px 24px; max-width: 62ch; }
.faq .a p + p { margin-top: 10px; }

/* Privacy / legal prose */
.legal { max-width: 68ch; }
.legal h2 { font-size: 24px; margin: 44px 0 12px; scroll-margin-top: 90px; }
.legal p, .legal li { font-size: 15.5px; line-height: 1.65; color: var(--ink-mid); }
.legal p + p { margin-top: 12px; }
.legal ul { margin: 12px 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.legal .updated { font-size: 13px; color: var(--ink-low); }

/* Plus page */
.tier { display: flex; flex-direction: column; gap: 0; }
.tier .rowline { display: flex; justify-content: space-between; gap: 18px; padding: 14px 2px; border-top: 1px solid var(--hairline); font-size: 15px; color: var(--ink-mid); }
.tier .rowline span:last-child { color: var(--ink-hi); font-weight: 500; text-align: right; }
.themecard { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: var(--surface-1); border: 1px solid var(--hairline); border-radius: 20px; cursor: pointer; width: 100%; text-align: left; font: inherit; color: var(--ink-hi); transition: background var(--dur-tick) var(--ease-settle); }
.themecard:hover { background: var(--surface-press); }
.themecard[aria-pressed="true"] { border-color: var(--accent-dim); }
.themecard .dot { width: 26px; height: 26px; border-radius: 50%; flex: none; border: 1px solid var(--hairline-strong); }
.themecard .nm { font-weight: 600; font-size: 15px; }
.themecard .tag { font-size: 12px; color: var(--ink-low); }

/* Steps (how it works) */
.step { display: grid; grid-template-columns: 64px 1fr; gap: 24px; align-items: start; }
.step .no { font: 300 44px/1 var(--font-display); letter-spacing: -0.02em; color: var(--accent-dim); font-feature-settings: 'tnum' 1; }
.stage { display: flex; justify-content: center; align-items: center; padding: 30px; background: var(--surface-1); border: 1px solid var(--hairline); border-radius: 24px; min-height: 200px; }