/* ---------------------------------------------------------------------
   Every-List marketing site - shared design system.

   Extracted 2026-08-26 from features.html's inline <style> block, which
   every page on this site had its own near-identical copy of. The three
   deep-dive pages (basic / premium / uses) link this instead of pasting a
   fourth, fifth, and sixth copy. The original six pages still carry their
   own inline styles and are deliberately untouched - migrating them onto
   this file is a safe follow-up, but doing it in the same pass as new
   content would put the waitlist form's styling at risk for no benefit.

   Anything below marked NEW has no equivalent in the inline blocks - it
   exists for the drilldown pages specifically.
   --------------------------------------------------------------------- */

:root {
  --bg: #fdf9f4;
  --bg-card: #f5e9d8;
  --bg-selected: #ecd3ab;
  --brand: #b3641e;
  --brand-text: #fdf9f4;
  --text-secondary: #c68f5c;
  --success: #5a9b6c;
  --ink: #4a3420;
  --ink-body: #6b4d30;
  --ink-soft: #7a5a3a;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Anchored <details> land below the sticky section nav rather than
     underneath it - see .jumpnav's position: sticky. */
  scroll-padding-top: 76px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a {
  color: var(--brand);
}

.wrap {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 24px;
}

.wrap-narrow {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 24px;
}

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

.topnav {
  padding: 22px 0;
  border-bottom: 1px solid var(--bg-selected);
}

.topnav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.topnav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  font-weight: 800;
  font-size: 1.05rem;
}

.topnav-brand img {
  width: 30px;
  height: 30px;
  border-radius: 8px;
}

.topnav-links {
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: 14px;
  font-weight: 600;
}

.topnav-links a {
  color: var(--ink);
  text-decoration: none;
  opacity: 0.75;
  white-space: nowrap;
}

.topnav-links a:hover {
  opacity: 1;
}

.topnav-links a.current {
  color: var(--brand);
  opacity: 1;
}

.topnav-cta {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--brand);
  color: var(--brand-text) !important;
  text-decoration: none;
  opacity: 1 !important;
  white-space: nowrap;
}

@media (max-width: 700px) {
  .topnav .wrap {
    flex-direction: column;
    gap: 14px;
  }

  .topnav-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;
  }
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  padding: 64px 0 48px;
  text-align: center;
  overflow: hidden;
}

.hero-glow {
  position: absolute;
  top: -180px;
  left: 50%;
  width: 640px;
  height: 640px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(179, 100, 30, 0.16) 0%, rgba(179, 100, 30, 0) 68%);
  pointer-events: none;
}

.section-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 10px;
}

h1 {
  position: relative;
  font-size: clamp(2.1rem, 4.8vw, 3.1rem);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
  text-wrap: balance;
}

.tagline {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
  font-size: clamp(1.02rem, 2vw, 1.18rem);
  line-height: 1.6;
  color: var(--ink-soft);
}

/* ---------- Generic section ---------- */

section {
  padding: 52px 0;
}

section.alt {
  background: var(--bg-card);
}

section.tight {
  padding: 34px 0;
}

section h2 {
  font-size: clamp(1.5rem, 3.2vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
}

.section-dek {
  max-width: 700px;
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 0 30px;
}

section.centered {
  text-align: center;
}

section.centered .section-dek {
  margin-left: auto;
  margin-right: auto;
}

/* ---------- NEW: sticky in-page jump nav ---------- */

.jumpnav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(253, 249, 244, 0.94);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--bg-selected);
  padding: 12px 0;
}

.jumpnav-inner {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.jumpnav-inner::-webkit-scrollbar {
  display: none;
}

.jumpnav a {
  flex: none;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  color: var(--ink);
  background: var(--bg-card);
  border: 1.5px solid transparent;
  border-radius: 999px;
  padding: 7px 14px;
  white-space: nowrap;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.jumpnav a:hover {
  border-color: var(--brand);
  color: var(--brand);
}

/* ---------- NEW: tier switcher ---------- */

.tierswitch {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 26px;
}

.tierswitch a {
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  color: var(--ink);
  background: var(--bg);
  border: 1.5px solid var(--bg-selected);
  border-radius: 999px;
  padding: 9px 20px;
}

.tierswitch a:hover {
  border-color: var(--brand);
}

.tierswitch a.current {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--brand-text);
}

/* ---------- NEW: drilldown list (<details>/<summary>) ----------
   Native disclosure elements rather than a scripted accordion: they work
   with JS disabled, are keyboard- and screen-reader-operable for free,
   expand automatically when the browser's own in-page find hits text
   inside a closed one (Chromium's hidden=until-found behaviour), and
   print fully expanded. The only script involved is the deep-link opener
   in each page's footer, which is purely additive.                       */

.drill-group {
  margin: 0 0 30px;
}

.drill-group > h3 {
  font-size: 1.16rem;
  font-weight: 800;
  margin: 0 0 4px;
  scroll-margin-top: 76px;
}

.drill-group > .drill-group-dek {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 16px;
}

details.drill {
  background: var(--bg);
  border: 1.5px solid var(--bg-selected);
  border-radius: 14px;
  margin-bottom: 10px;
  overflow: hidden;
  scroll-margin-top: 84px;
}

section.alt details.drill {
  background: var(--bg);
}

details.drill[open] {
  border-color: var(--brand);
}

details.drill > summary {
  list-style: none;
  cursor: pointer;
  padding: 15px 46px 15px 18px;
  position: relative;
  font-size: 0.99rem;
  font-weight: 700;
  color: var(--ink);
  display: block;
}

/* Safari/older WebKit still render the default triangle without this. */
details.drill > summary::-webkit-details-marker {
  display: none;
}

details.drill > summary:hover {
  color: var(--brand);
}

details.drill > summary:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}

details.drill > summary::after {
  content: '+';
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  color: var(--brand);
}

details.drill[open] > summary::after {
  content: '\2013'; /* en dash */
}

.drill-body {
  padding: 0 18px 17px;
  border-top: 1px solid var(--bg-selected);
  margin-top: -1px;
}

.drill-body p {
  font-size: 0.94rem;
  line-height: 1.68;
  color: var(--ink-body);
  margin: 14px 0 0;
}

.drill-body ul {
  margin: 12px 0 0;
  padding-left: 20px;
}

.drill-body li {
  font-size: 0.94rem;
  line-height: 1.62;
  color: var(--ink-body);
  margin-bottom: 6px;
}

.drill-body strong {
  color: var(--ink);
}

/* A short, plain-language "what this means in practice" note. */
.drill-note {
  margin-top: 14px;
  padding: 11px 14px;
  background: var(--bg-card);
  border-radius: 10px;
  font-size: 0.89rem;
  line-height: 1.6;
  color: var(--ink-body);
}

section.alt .drill-note {
  background: var(--bg-selected);
}

/* ---------- NEW: inline tier pills on a summary ---------- */

.pill {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  vertical-align: middle;
  margin-left: 8px;
  white-space: nowrap;
}

.pill-basic {
  background: var(--success);
  color: #fff;
}

.pill-premium {
  background: var(--brand);
  color: var(--brand-text);
}

.pill-household {
  background: #6a4b8c;
  color: #fff;
}

/* ---------- Feature grid ---------- */

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
}

.feature-card {
  background: var(--bg);
  border: 1.5px solid var(--bg-selected);
  border-radius: 18px;
  padding: 24px 22px;
  text-align: left;
}

.feature-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--brand);
  color: var(--brand-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 14px;
}

.feature-card h3 {
  margin: 0 0 6px;
  font-size: 1.02rem;
  font-weight: 700;
}

.feature-card p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* ---------- NEW: use-case (scenario) card ---------- */

.use-card {
  background: var(--bg);
  border: 1.5px solid var(--bg-selected);
  border-radius: 20px;
  padding: 28px 26px;
  margin-bottom: 20px;
  scroll-margin-top: 84px;
}

section.alt .use-card {
  background: var(--bg);
}

.use-card > h3 {
  font-size: 1.24rem;
  font-weight: 800;
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.use-who {
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0 0 14px;
}

.use-card > p {
  font-size: 0.97rem;
  line-height: 1.7;
  color: var(--ink-body);
  margin: 0 0 16px;
}

.use-steps {
  margin: 0 0 18px;
  padding-left: 20px;
}

.use-steps li {
  font-size: 0.94rem;
  line-height: 1.65;
  color: var(--ink-body);
  margin-bottom: 8px;
}

.use-foot {
  border-top: 1px solid var(--bg-selected);
  padding-top: 14px;
  font-size: 0.89rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

.use-foot strong {
  color: var(--ink);
}

/* ---------- Pricing cards ---------- */

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  text-align: left;
}

@media (max-width: 760px) {
  .pricing-grid {
    grid-template-columns: 1fr;
  }
}

.price-card {
  background: var(--bg);
  border: 1.5px solid var(--bg-selected);
  border-radius: 20px;
  padding: 30px 26px;
}

.price-card.highlight {
  border-color: var(--brand);
  box-shadow: 0 16px 32px rgba(179, 100, 30, 0.14);
  position: relative;
}

.price-card.highlight::before {
  content: 'Best for families';
  position: absolute;
  top: -13px;
  left: 26px;
  background: var(--brand);
  color: var(--brand-text);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 999px;
}

.price-card h3 {
  margin: 0 0 4px;
  font-size: 1.15rem;
  font-weight: 800;
}

.price-amount {
  font-size: 2.1rem;
  font-weight: 800;
  margin: 6px 0 2px;
}

.price-amount span {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.price-note {
  font-size: 0.86rem;
  color: var(--text-secondary);
  margin: 0 0 18px;
}

.price-card ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.price-card li {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ink-body);
  padding-left: 22px;
  position: relative;
  margin-bottom: 8px;
}

.price-card li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  color: var(--success);
  font-weight: 800;
}

/* ---------- NEW: free-trial banner ---------- */

.trial-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--bg-card);
  border: 1.5px solid var(--brand);
  border-radius: 18px;
  padding: 20px 24px;
  max-width: 720px;
  margin: 0 auto;
  text-align: left;
}

section.alt .trial-banner {
  background: var(--bg);
}

.trial-banner .trial-badge {
  flex: none;
  width: 62px;
  height: 62px;
  border-radius: 16px;
  background: var(--brand);
  color: var(--brand-text);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.trial-banner .trial-badge b {
  font-size: 1.5rem;
  font-weight: 800;
}

.trial-banner .trial-badge span {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 3px;
}

.trial-banner h3 {
  margin: 0 0 4px;
  font-size: 1.05rem;
  font-weight: 800;
}

.trial-banner p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ink-body);
}

@media (max-width: 560px) {
  .trial-banner {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---------- CTA ---------- */

.cta-band {
  text-align: center;
  padding: 58px 0;
}

.cta-band h2 {
  margin: 0 0 12px;
}

.premium-cta {
  display: inline-block;
  font-size: 15px;
  font-weight: 700;
  padding: 13px 28px;
  border-radius: 999px;
  background: var(--brand);
  color: var(--brand-text);
  text-decoration: none;
  transition: opacity 0.15s ease;
  margin-top: 10px;
}

.premium-cta:hover {
  opacity: 0.92;
}

.ghost-cta {
  display: inline-block;
  font-size: 15px;
  font-weight: 700;
  padding: 13px 28px;
  border-radius: 999px;
  background: transparent;
  border: 1.5px solid var(--bg-selected);
  color: var(--brand);
  text-decoration: none;
  margin-top: 10px;
  margin-left: 8px;
}

.ghost-cta:hover {
  border-color: var(--brand);
}

/* ---------- Footer ---------- */

footer {
  padding: 46px 0 40px;
  border-top: 1px solid var(--bg-selected);
  text-align: center;
}

footer .logo-small {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  margin-bottom: 12px;
}

footer p {
  margin: 4px 0;
  font-size: 13px;
  color: var(--text-secondary);
}

/* ---------- Print ---------- */

@media print {
  .topnav,
  .jumpnav,
  .tierswitch,
  .cta-band {
    display: none;
  }

  details.drill > summary::after {
    content: '';
  }

  .drill-body {
    display: block !important;
  }
}