/* =========================================================================
   Listune — marketing site stylesheet
   Plain CSS, no build step. Theming via CSS custom properties.
   Light is the base :root; dark is applied through [data-theme="dark"]
   and (when no explicit choice is stored) prefers-color-scheme: dark.
   ========================================================================= */

/* ---- Design tokens: light (cream) ---- */
:root {
  --bg:            #F2EDE3;  /* warm off-white / cream, never stark white */
  --bg-elev:       #EFE9DD;  /* slightly recessed cream for subtle bands  */
  --card:          #FFFFFF;  /* grouped-card surface                      */
  --card-2:        #FBF8F2;  /* secondary card / nested surface           */
  --text:          #2B2822;  /* warm near-black                           */
  --text-soft:     #5A544A;  /* body secondary                           */
  --muted:         #8C857A;  /* small uppercase labels, captions          */
  --divider:       #E7E0D2;  /* thin hairline dividers                    */
  --border:        #E4DCCC;  /* card borders                             */
  --accent:        #BE5E3C;  /* muted terracotta — CTAs & highlights      */
  --accent-strong: #A54C2D;  /* hover / pressed                          */
  --accent-tint:   #F3E3D9;  /* faint terracotta wash behind highlights   */
  --accent-ink:    #FFFFFF;  /* text on accent                           */
  --shadow:        0 1px 2px rgba(43, 40, 34, 0.04),
                   0 8px 24px rgba(43, 40, 34, 0.06);
  --shadow-soft:   0 1px 2px rgba(43, 40, 34, 0.03),
                   0 4px 14px rgba(43, 40, 34, 0.04);

  --radius:        18px;
  --radius-sm:     12px;
  --radius-lg:     26px;

  --maxw:          1080px;
  --gutter:        clamp(20px, 5vw, 40px);

  --font-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --font-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                Roboto, Helvetica, Arial, sans-serif;
}

/* ---- Design tokens: dark (warm near-black, not cold gray) ---- */
:root[data-theme="dark"] {
  --bg:            #17140F;
  --bg-elev:       #1C1813;
  --card:          #221E18;
  --card-2:        #2A251E;
  --text:          #EEE7DA;
  --text-soft:     #C4BBAB;
  --muted:         #948B7C;
  --divider:       #322C23;
  --border:        #322C23;
  --accent:        #D97C57;  /* terracotta lifted for dark contrast */
  --accent-strong: #E58E6B;
  --accent-tint:   #2E241C;
  --accent-ink:    #1B1710;
  --shadow:        0 1px 2px rgba(0, 0, 0, 0.35),
                   0 10px 30px rgba(0, 0, 0, 0.40);
  --shadow-soft:   0 1px 2px rgba(0, 0, 0, 0.30),
                   0 6px 18px rgba(0, 0, 0, 0.30);
}

/* Follow the OS only when the user hasn't made an explicit choice */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --bg:            #17140F;
    --bg-elev:       #1C1813;
    --card:          #221E18;
    --card-2:        #2A251E;
    --text:          #EEE7DA;
    --text-soft:     #C4BBAB;
    --muted:         #948B7C;
    --divider:       #322C23;
    --border:        #322C23;
    --accent:        #D97C57;
    --accent-strong: #E58E6B;
    --accent-tint:   #2E241C;
    --accent-ink:    #1B1710;
    --shadow:        0 1px 2px rgba(0, 0, 0, 0.35),
                     0 10px 30px rgba(0, 0, 0, 0.40);
    --shadow-soft:   0 1px 2px rgba(0, 0, 0, 0.30),
                     0 6px 18px rgba(0, 0, 0, 0.30);
  }
}

/* ---- Reset-ish base ---- */
*, *::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-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color 0.25s ease, color 0.25s ease;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-strong); text-decoration: underline; }

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0 0 0.5em;
}

p { margin: 0 0 1em; }

:focus-visible {
  outline: 2.5px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 10px 16px;
  border-radius: 0 0 10px 0;
  z-index: 200;
}
.skip-link:focus { left: 0; }

/* ---- Layout helpers ---- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.section { padding-block: clamp(56px, 9vw, 104px); }

.eyebrow {
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 14px;
}

.section-head { max-width: 640px; margin-bottom: clamp(32px, 5vw, 52px); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-title { font-size: clamp(1.9rem, 4vw, 2.9rem); }
.section-lede {
  color: var(--text-soft);
  font-size: clamp(1.02rem, 2vw, 1.18rem);
  margin: 0;
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 0.98rem;
  font-weight: 600;
  padding: 13px 24px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease,
              border-color 0.18s ease, transform 0.18s ease;
  text-decoration: none;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-strong); color: var(--accent-ink); }

.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* ---- Header / nav ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--divider);
}
.nav {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 66px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-serif);
  font-size: 1.42rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
}
.brand:hover { text-decoration: none; color: var(--text); }
.brand .mark { width: 26px; height: 26px; flex: none; }

.nav-links {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
}
.nav-links a {
  color: var(--text-soft);
  font-size: 0.95rem;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: 8px;
}
.nav-links a:hover { color: var(--text); background: var(--bg-elev); text-decoration: none; }

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.18s ease, background-color 0.18s ease;
}
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-moon { display: none; }
.theme-toggle .icon-sun  { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-sun  { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .theme-toggle .icon-moon { display: block; }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .theme-toggle .icon-sun  { display: none; }
}

.nav-cta { display: none; }
@media (min-width: 720px) { .nav-cta { display: inline-flex; } }

/* On narrow screens the inline nav would crowd out the theme toggle.
   Drop the text links (the footer carries full navigation) and keep the
   toggle pinned to the right so it's always reachable. */
@media (max-width: 600px) {
  .brand { font-size: 1.3rem; }
  .nav-links { display: none; }
  .theme-toggle { margin-left: auto; }
}

/* ---- Card primitive (mirrors app's grouped cards) ---- */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}

/* ---- Hero ---- */
.hero { padding-block: clamp(48px, 8vw, 96px); }
.hero-inner { max-width: 760px; }
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--accent);
  background: var(--accent-tint);
  border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 24px;
}
.hero-badge .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
}
.hero h1 {
  font-size: clamp(2.6rem, 7vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin-bottom: 22px;
}
.hero .lede {
  font-size: clamp(1.1rem, 2.4vw, 1.35rem);
  color: var(--text-soft);
  max-width: 560px;
  margin-bottom: 34px;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hero-note { font-size: 0.9rem; color: var(--muted); margin: 18px 0 0; }

/* Email capture */
.capture {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  max-width: 460px;
}
.capture input[type="email"] {
  flex: 1 1 220px;
  min-width: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  padding: 13px 18px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
}
.capture input[type="email"]::placeholder { color: var(--muted); }
.capture input[type="email"]:focus-visible { border-color: var(--accent); outline-offset: 1px; }
.capture .form-note {
  flex-basis: 100%;
  font-size: 0.86rem;
  color: var(--muted);
  margin: 4px 0 0;
}
.capture .form-note.success { color: var(--accent); font-weight: 600; }

/* ---- Pillars grid ---- */
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.pillar {
  padding: 22px 22px 24px;
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
}
.pillar .p-icon {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--accent-tint);
  color: var(--accent);
  margin-bottom: 16px;
}
.pillar .p-icon svg { width: 22px; height: 22px; }
.pillar h3 { font-size: 1.24rem; margin-bottom: 6px; }
.pillar p { color: var(--text-soft); font-size: 0.96rem; margin: 0; }

/* ---- Deep-dive feature sections ---- */
.feature {
  display: grid;
  gap: clamp(28px, 5vw, 56px);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 880px) {
  .feature { grid-template-columns: 1fr 1fr; }
  .feature.reverse .feature-visual { order: -1; }
}
.feature + .feature { margin-top: clamp(64px, 9vw, 112px); }
.feature h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); }
.feature .lede { color: var(--text-soft); font-size: 1.08rem; }
.feature-list { list-style: none; margin: 22px 0 0; padding: 0; }
.feature-list li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 13px;
  color: var(--text-soft);
}
.feature-list li strong { color: var(--text); font-weight: 600; }
.feature-list li::before {
  content: "";
  position: absolute;
  left: 4px; top: 9px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

/* ---- Phone mockup (pure CSS) ---- */
.phone {
  width: 100%;
  max-width: 300px;
  margin-inline: auto;
  aspect-ratio: 300 / 610;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 42px;
  padding: 14px;
  box-shadow: var(--shadow);
  position: relative;
}
.phone::before {
  content: "";
  position: absolute;
  top: 16px; left: 50%;
  transform: translateX(-50%);
  width: 92px; height: 6px;
  border-radius: 999px;
  background: var(--divider);
}
.phone-screen {
  height: 100%;
  border-radius: 30px;
  background: var(--bg-elev);
  border: 1px solid var(--divider);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 26px 16px 16px;
  gap: 12px;
}
.mock-eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.mock-title {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  color: var(--text);
  margin: -4px 0 4px;
}
.mock-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 13px;
  box-shadow: var(--shadow-soft);
}
.mock-line {
  height: 9px;
  border-radius: 5px;
  background: var(--divider);
  margin: 7px 0;
}
.mock-line.w-70 { width: 70%; }
.mock-line.w-50 { width: 50%; }
.mock-line.w-85 { width: 85%; }
.mock-line.accent { background: color-mix(in srgb, var(--accent) 55%, var(--divider)); }
.mock-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-tint);
  padding: 4px 10px;
  border-radius: 999px;
}
.mock-row { display: flex; align-items: center; gap: 9px; }
.mock-check {
  width: 17px; height: 17px; flex: none;
  border-radius: 6px;
  border: 1.5px solid var(--accent);
}
.mock-check.done { background: var(--accent); border-color: var(--accent); }
.mock-mood { display: flex; gap: 6px; margin-top: 2px; }
.mock-mood span {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--divider);
}
.mock-mood span.on { background: var(--accent); }

/* ---- Pricing ---- */
.pricing-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}
@media (min-width: 780px) {
  .pricing-grid { grid-template-columns: repeat(3, 1fr); align-items: start; }
}
.price-card {
  padding: 28px 26px 30px;
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.price-card.featured {
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  box-shadow: var(--shadow);
  position: relative;
}
.price-card.featured::after {
  content: "Most popular";
  position: absolute;
  top: -11px; left: 26px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-ink);
  background: var(--accent);
  padding: 4px 12px;
  border-radius: 999px;
}
.price-name { font-family: var(--font-serif); font-size: 1.4rem; margin-bottom: 4px; }
.price-tag { display: flex; align-items: baseline; gap: 6px; margin: 8px 0 6px; }
.price-tag .amount { font-family: var(--font-serif); font-size: 2.3rem; color: var(--text); }
.price-tag .per { color: var(--muted); font-size: 0.95rem; }
.price-blurb { color: var(--text-soft); font-size: 0.95rem; min-height: 42px; margin-bottom: 18px; }
.price-features { list-style: none; margin: 0 0 24px; padding: 0; flex: 1; }
.price-features li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 11px;
  font-size: 0.95rem;
  color: var(--text-soft);
}
.price-features li::before {
  content: "";
  position: absolute;
  left: 2px; top: 8px;
  width: 12px; height: 7px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}
.price-features li.muted { color: var(--muted); }
.price-features li.muted::before { border-color: var(--muted); }
.price-card .btn { width: 100%; }

/* ---- Simple prose (legal / support pages) ---- */
.page-head { padding-block: clamp(48px, 7vw, 80px) clamp(20px, 3vw, 32px); }
.page-head h1 { font-size: clamp(2.1rem, 5vw, 3.2rem); }
.page-head .updated { color: var(--muted); font-size: 0.92rem; }

.prose {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: clamp(26px, 5vw, 52px);
  max-width: 760px;
}
.prose h2 {
  font-size: 1.5rem;
  margin-top: 2em;
  padding-top: 1.4em;
  border-top: 1px solid var(--divider);
}
.prose h2:first-of-type { margin-top: 0.4em; padding-top: 0; border-top: none; }
.prose h3 { font-size: 1.14rem; margin-top: 1.6em; }
.prose p, .prose li { color: var(--text-soft); }
.prose strong { color: var(--text); }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1em; }
.prose li { margin-bottom: 0.5em; }
.prose .callout {
  background: var(--accent-tint);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  margin: 1.4em 0;
}
.prose .callout p { color: var(--text); margin: 0; font-size: 0.96rem; }

/* ---- FAQ ---- */
.faq { max-width: 760px; }
.faq details {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-soft);
  padding: 4px 22px;
  margin-bottom: 12px;
}
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 0;
  font-family: var(--font-serif);
  font-size: 1.14rem;
  color: var(--text);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  width: 11px; height: 11px; flex: none;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq details p { color: var(--text-soft); margin: 0 0 18px; }

/* ---- Contact block ---- */
.contact-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: clamp(28px, 5vw, 44px);
  max-width: 620px;
  text-align: center;
}
.contact-card .email {
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 4vw, 2rem);
  color: var(--accent);
  display: inline-block;
  margin: 10px 0 6px;
}

/* ---- Footer ---- */
.site-footer {
  border-top: 1px solid var(--divider);
  background: var(--bg-elev);
  padding-block: 48px;
  margin-top: 40px;
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 28px 40px;
  justify-content: space-between;
  align-items: flex-start;
}
.footer-brand { max-width: 280px; }
.footer-brand .brand { margin-bottom: 10px; }
.footer-brand p { color: var(--muted); font-size: 0.92rem; margin: 0; }
.footer-cols { display: flex; flex-wrap: wrap; gap: 40px; }
.footer-col h4 {
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 14px;
}
.footer-col a {
  display: block;
  color: var(--text-soft);
  font-size: 0.95rem;
  padding: 5px 0;
}
.footer-col a:hover { color: var(--accent); text-decoration: none; }
.footer-bottom {
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid var(--divider);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: space-between;
  color: var(--muted);
  font-size: 0.86rem;
}

/* ---- Utility ---- */
.center { text-align: center; }
.mt-s { margin-top: 14px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}