/* SlumberBrew site styles.
   Palette lifted from Sources/Shared/Theme.swift so the web and the app read as
   the same product. Dark is the default here because the app's default theme
   (Roasted Beans) is dark; light mode follows the same Ink values. */

:root {
  --bg-top: #1a0f07;
  --bg-mid: #0f0806;
  --bg-bottom: #050302;
  --bg: #0a0605;
  --bg-lift: #160d07;
  --card: rgba(38, 22, 13, 0.82);
  --card-solid: #241610;
  --stroke: rgba(255, 214, 168, 0.16);
  --stroke-strong: rgba(255, 214, 168, 0.28);
  --text: #f9f1e8;
  --dim: rgba(249, 241, 232, 0.68);
  --faint: rgba(249, 241, 232, 0.46);
  --amber: #ffb13c;
  --ember: #ff6a3d;
  --mint: #53ddb4;
  --violet: #9c8ff5;

  --radius: 20px;
  --radius-sm: 12px;
  --maxw: 1080px;
  --serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg-top: #fff6e9;
    --bg-mid: #fdefe0;
    --bg-bottom: #f7e6d4;
    --bg: #fbf3e8;
    --bg-lift: #fffbf4;
    --card: rgba(255, 252, 247, 0.86);
    --card-solid: #fffcf7;
    --stroke: rgba(107, 74, 42, 0.16);
    --stroke-strong: rgba(107, 74, 42, 0.3);
    --text: #2b1a0e;
    --dim: rgba(43, 26, 14, 0.66);
    --faint: rgba(43, 26, 14, 0.46);
    --amber: #a8620a;
    --ember: #c0421b;
    --mint: #0e6b51;
    --violet: #5344b8;
  }
}

:root[data-theme="light"] {
  --bg-top: #fff6e9;
  --bg-mid: #fdefe0;
  --bg-bottom: #f7e6d4;
  --bg: #fbf3e8;
  --bg-lift: #fffbf4;
  --card: rgba(255, 252, 247, 0.86);
  --card-solid: #fffcf7;
  --stroke: rgba(107, 74, 42, 0.16);
  --stroke-strong: rgba(107, 74, 42, 0.3);
  --text: #2b1a0e;
  --dim: rgba(43, 26, 14, 0.66);
  --faint: rgba(43, 26, 14, 0.46);
  --amber: #a8620a;
  --ember: #c0421b;
  --mint: #0e6b51;
  --violet: #5344b8;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
  /* Solid, always. The gradient is a separate fixed layer below. */
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* The warm gradient the app opens with, as a fixed layer rather than
   `background-attachment: fixed` on the body.
   Two reasons: iOS Safari has never handled fixed attachment properly, and this
   site's whole audience is on iPhones; and on a long page it forces a full
   repaint on every scroll frame. A pinned pseudo-element composites once and
   stays put. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, var(--bg-top) 0%, var(--bg-mid) 45%, var(--bg-bottom) 100%);
}

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }
.narrow { max-width: 720px; }

/* ---------- type ---------- */

h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.15; margin: 0 0 0.5em; letter-spacing: -0.015em; }
h1 { font-size: clamp(2.1rem, 5.5vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.3rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1.1em; }
a { color: var(--amber); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ember); }
.lede { font-size: clamp(1.08rem, 2.2vw, 1.3rem); color: var(--dim); }
.eyebrow {
  font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--amber); font-weight: 600; margin-bottom: 14px;
}
.fine { font-size: 0.87rem; color: var(--faint); }
code { font-family: var(--mono); font-size: 0.9em; background: var(--card); padding: 2px 6px; border-radius: 6px; }

/* ---------- nav ---------- */

.nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  border-bottom: 1px solid var(--stroke);
}
.nav-in { display: flex; align-items: center; gap: 20px; height: 62px; min-width: 0; }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--serif); font-size: 1.12rem; font-weight: 600; color: var(--text); text-decoration: none; }
.brand:hover { color: var(--text); }
.brand-mark { width: 26px; height: 26px; flex: 0 0 26px; }
.nav-links { display: flex; gap: 20px; margin-left: auto; align-items: center; }
.nav-links a { color: var(--dim); text-decoration: none; font-size: 0.94rem; }
.nav-links a:hover { color: var(--text); }
@media (max-width: 680px) {
  .nav-links a.hide-sm { display: none; }
  .nav-links { gap: 14px; }
  .brand { font-size: 1rem; }
}
@media (max-width: 340px) {
  /* Below this the brand and one pill are genuinely all that fit. Everything
     hidden here is still in the footer. */
  .nav-links a:not(.btn) { display: none; }
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 22px; border-radius: 999px; border: 1px solid transparent;
  font-size: 1rem; font-weight: 600; text-decoration: none; cursor: pointer;
  font-family: inherit; transition: transform 0.14s ease, filter 0.14s ease;
  /* A pill that wraps stops being a pill. */
  white-space: nowrap; flex: 0 0 auto;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--amber); color: #1a0f07; }
.btn-primary:hover { filter: brightness(1.08); color: #1a0f07; }
.btn-ghost { background: transparent; border-color: var(--stroke-strong); color: var(--text); }
.btn-ghost:hover { border-color: var(--amber); color: var(--text); }
.btn-sm { padding: 9px 16px; font-size: 0.9rem; }

/* ---------- layout blocks ---------- */

section { padding: clamp(56px, 9vw, 104px) 0; }
.section-head { max-width: 640px; margin-bottom: 44px; }

.card {
  background: var(--card); border: 1px solid var(--stroke);
  border-radius: var(--radius); padding: 26px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}

.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.hero { padding-top: clamp(44px, 7vw, 78px); padding-bottom: clamp(40px, 6vw, 70px); }
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(30px, 5vw, 60px); align-items: center; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 16px; }

/* ---------- dial ---------- */

.dial-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.dial { width: min(320px, 82vw); height: min(320px, 82vw); position: relative; }
.dial svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.dial-track { fill: none; stroke: var(--stroke); stroke-width: 14; }
.dial-arc { fill: none; stroke: var(--amber); stroke-width: 14; stroke-linecap: round; transition: stroke-dashoffset 0.6s cubic-bezier(0.22, 1, 0.36, 1), stroke 0.4s ease; }
.dial-face {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; gap: 2px;
}
.dial-mg { font-family: var(--serif); font-size: clamp(2.8rem, 12vw, 4.2rem); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.dial-unit { font-size: 0.9rem; color: var(--faint); letter-spacing: 0.08em; text-transform: uppercase; }
.dial-sub { font-size: 0.95rem; color: var(--dim); margin-top: 8px; max-width: 76%; }

/* ---------- tracker ---------- */

.tracker-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 26px; align-items: start; }
@media (max-width: 940px) { .tracker-grid { grid-template-columns: 1fr; } }

/* The dial is the answer; the drink list is the question. Keep the answer on
   screen while you scroll the list looking for what you just drank. Only when
   the column actually fits, and only at desktop widths where there are two
   columns to keep in step. */
@media (min-width: 941px) and (min-height: 760px) {
  .tracker-sticky { position: sticky; top: 80px; }
}

.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; }
.stat { text-align: center; padding: 12px 8px; border-radius: var(--radius-sm); background: var(--bg-lift); border: 1px solid var(--stroke); }
.stat-v { font-family: var(--serif); font-size: 1.24rem; font-weight: 600; font-variant-numeric: tabular-nums; display: block; }
.stat-k { font-size: 0.72rem; color: var(--faint); text-transform: uppercase; letter-spacing: 0.07em; }

.tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--stroke); margin-bottom: 20px; flex-wrap: wrap; }
.tab {
  background: none; border: none; border-bottom: 2px solid transparent;
  padding: 10px 14px; font: inherit; font-size: 0.95rem; color: var(--faint);
  cursor: pointer; margin-bottom: -1px;
}
.tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--amber); font-weight: 600; }

.drink-group-label { font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); margin: 20px 0 10px; }
.drink-group-label:first-child { margin-top: 0; }
.drinks { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 9px; }
.drink {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  text-align: left; padding: 12px 14px; border-radius: var(--radius-sm);
  background: var(--bg-lift); border: 1px solid var(--stroke);
  color: var(--text); font: inherit; cursor: pointer;
  transition: border-color 0.15s ease, transform 0.1s ease;
}
.drink:hover { border-color: var(--amber); transform: translateY(-1px); }
.drink-name { font-weight: 600; font-size: 0.95rem; }
.drink-meta { font-size: 0.8rem; color: var(--faint); }
.drink-call { font-size: 0.78rem; margin-top: 4px; font-variant-numeric: tabular-nums; }
.drink-call.ok { color: var(--mint); }
.drink-call.warn { color: var(--ember); }

.log-list { list-style: none; margin: 0; padding: 0; }
.log-item { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--stroke); }
.log-item:last-child { border-bottom: none; }
.log-main { flex: 1; min-width: 0; }
.log-name { font-weight: 600; font-size: 0.96rem; }
.log-meta { font-size: 0.82rem; color: var(--faint); }
.log-mg { font-variant-numeric: tabular-nums; color: var(--dim); font-size: 0.95rem; }
.icon-btn {
  background: none; border: 1px solid var(--stroke); color: var(--faint);
  width: 30px; height: 30px; border-radius: 8px; cursor: pointer; font: inherit;
  display: grid; place-items: center; flex: 0 0 30px;
}
.icon-btn:hover { border-color: var(--ember); color: var(--ember); }

.field { margin-bottom: 18px; }
.field label { display: block; font-size: 0.88rem; color: var(--dim); margin-bottom: 6px; }
.field input[type="time"], .field input[type="number"], .field select {
  width: 100%; padding: 10px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--stroke); background: var(--bg-lift);
  color: var(--text); font: inherit; font-size: 0.98rem;
}
.field input[type="range"] { width: 100%; accent-color: var(--amber); }
.field-row { display: flex; gap: 14px; }
.field-row > * { flex: 1; }
.range-value { font-variant-numeric: tabular-nums; color: var(--amber); font-weight: 600; }

.curve { width: 100%; height: 150px; display: block; margin-top: 6px; }

.result {
  border-radius: var(--radius-sm); border: 1px solid var(--stroke-strong);
  background: var(--bg-lift); padding: 18px; text-align: center; margin: 18px 0;
}
.result-mg { font-family: var(--serif); font-size: 2.3rem; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.result-range { color: var(--faint); font-size: 0.9rem; margin-top: 6px; }

.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  background: var(--card-solid); border: 1px solid var(--stroke-strong);
  border-radius: 999px; padding: 12px 18px; display: flex; align-items: center; gap: 14px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45); z-index: 100; font-size: 0.94rem;
  max-width: calc(100vw - 32px);
}
.toast[hidden] { display: none; }
.toast button { background: none; border: none; color: var(--amber); font: inherit; font-weight: 600; cursor: pointer; }

/* ---------- pricing ---------- */

.price-card { text-align: center; position: relative; }
.price-card.featured { border-color: var(--amber); }
.price-tag { font-family: var(--serif); font-size: 2.6rem; font-weight: 600; line-height: 1; }
.price-per { color: var(--faint); font-size: 0.92rem; }
.badge {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: var(--amber); color: #1a0f07; font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 12px; border-radius: 999px;
}
.tick-list { list-style: none; margin: 18px 0 0; padding: 0; text-align: left; }
.tick-list li { padding: 7px 0 7px 26px; position: relative; font-size: 0.95rem; color: var(--dim); }
.tick-list li::before { content: "✓"; position: absolute; left: 0; color: var(--amber); font-weight: 700; }

/* ---------- misc ---------- */

.feature-icon { font-size: 1.5rem; margin-bottom: 10px; display: block; }

details.faq { border-bottom: 1px solid var(--stroke); padding: 4px 0; }
details.faq summary { cursor: pointer; padding: 15px 0; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: "+"; color: var(--amber); font-size: 1.3rem; line-height: 1; flex: 0 0 auto; }
details.faq[open] summary::after { content: "−"; }
details.faq .faq-body { padding-bottom: 14px; color: var(--dim); }
details.faq .faq-body p:last-child { margin-bottom: 0; }

.legal { padding: clamp(40px, 6vw, 72px) 0 90px; }
.legal h2 { margin-top: 2em; font-size: 1.35rem; }
.legal h3 { margin-top: 1.6em; }
.legal table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: 0.92rem; display: block; overflow-x: auto; }
.legal th, .legal td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--stroke); vertical-align: top; }
.legal th { color: var(--amber); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.07em; }
.legal ul { padding-left: 20px; }
.legal li { margin-bottom: 0.5em; }
.updated { color: var(--faint); font-size: 0.9rem; }

.callout { border-left: 3px solid var(--amber); padding: 4px 0 4px 18px; margin: 1.5em 0; color: var(--dim); }

.disclaimer { border: 1px solid var(--stroke); border-radius: var(--radius-sm); padding: 16px 18px; font-size: 0.88rem; color: var(--faint); margin-top: 30px; }

footer { border-top: 1px solid var(--stroke); padding: 40px 0 56px; margin-top: 30px; }
.foot-grid { display: flex; flex-wrap: wrap; gap: 26px 40px; align-items: flex-start; justify-content: space-between; }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.foot-links a { color: var(--dim); text-decoration: none; font-size: 0.92rem; }
.foot-links a:hover { color: var(--amber); }

.skip {
  position: absolute; left: -9999px; top: 0; background: var(--amber); color: #1a0f07;
  padding: 10px 16px; border-radius: 0 0 8px 0; z-index: 200; font-weight: 600;
}
.skip:focus { left: 0; }

:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; border-radius: 4px; }

/* Feature icons are inline SVG rather than emoji: emoji render as colour glyphs
   on some platforms and monochrome on others, so a row of three looked like
   three different design decisions. */
svg.feature-icon { display: block; margin-bottom: 12px; }