/* Love You, Bye — marketing site.
 *
 * The design package is the source of truth. Everything here is one of three
 * things and nothing else:
 *
 *   1. the design tokens, lifted verbatim out of each page's <style> block;
 *   2. real CSS for the hover/focus states the design prototype expressed as
 *      style-hover / style-focus attributes on its own runtime;
 *   3. the responsive rules. The design is desktop-first, and the page bodies
 *      keep their inline styles, so the mobile overrides use !important —
 *      that is the only way a stylesheet can beat an inline style.
 *
 * The nav and footer are the exception: they repeat on every page, so they are
 * plain classes rather than inline styles. Their values are unchanged.
 */

@import url("fonts.css");

/* ---------------------------------------------------------------- tokens -- */

body {
  margin: 0;
  font-family: 'Karla', system-ui, sans-serif;
  background: var(--bg);
  color: var(--ink);
  transition: background-color .35s, color .35s;
  color-scheme: light;
  --bg: #FDF7F1;
  --bg2: #F7EAE3;
  --card: #FFFFFF;
  --ink: #3A2730;
  --muted: #95747E;
  --accent: #D9536B;
  --accent-ink: #FFFFFF;
  --accent-soft: #FBE7EA;
  --line: #EEDBD6;
  --show-sun: none;
  --show-moon: block;
  --show-light: block;
  --show-dark: none;
}

body[data-theme="dark"] {
  color-scheme: dark;
  --bg: #201720;
  --bg2: #2A1F28;
  --card: #2D222B;
  --ink: #F6EAEE;
  --muted: #B18F9B;
  --accent: #F08CA2;
  --accent-ink: #331520;
  --accent-soft: #3C2833;
  --line: #3D2D38;
  --show-sun: block;
  --show-moon: none;
  --show-light: none;
  --show-dark: block;
}

@media (prefers-color-scheme: dark) {
  body:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #201720;
    --bg2: #2A1F28;
    --card: #2D222B;
    --ink: #F6EAEE;
    --muted: #B18F9B;
    --accent: #F08CA2;
    --accent-ink: #331520;
    --accent-soft: #3C2833;
    --line: #3D2D38;
    --show-sun: block;
    --show-moon: none;
    --show-light: none;
    --show-dark: block;
  }
}

a { color: var(--accent) }
a:hover { color: var(--ink) }
::selection { background: var(--accent-soft) }
summary::-webkit-details-marker { display: none }
input::placeholder { color: var(--muted) }
img { max-width: 100% }

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

/* Respect a reduced-motion preference — the theme cross-fade is decorative. */
@media (prefers-reduced-motion: reduce) {
  body { transition: none }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important }
}

.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;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: var(--accent-ink);
  padding: 12px 20px; border-radius: 0 0 12px 0;
  font-weight: 700; text-decoration: none;
}
.skip-link:focus { left: 0 }

/* ------------------------------------------------------- hover / focus -- */

.nav-link { color: var(--muted) }
.nav-link:hover { color: var(--ink) }
.nav-link[aria-current="page"] { color: var(--ink); font-weight: 700 }

.btn-primary:hover, .btn-dark:hover { filter: brightness(1.08) }
.btn-dark:hover { filter: brightness(1.15) }
.btn-ghost:hover { border-color: var(--accent) }
.field:focus { border-color: var(--accent) }

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

.site-nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.nav-wrap {
  max-width: 1100px; margin: 0 auto; padding: 0 24px;
  height: 68px; display: flex; align-items: center; gap: 26px;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--ink);
}
.brand:hover { color: var(--ink) }
.brand-name {
  font-family: 'Caveat', cursive;
  font-size: 27px; font-weight: 700; line-height: 1;
}
.nav-spacer { flex: 1 }
.nav-links { display: flex; align-items: center; gap: 26px }
.nav-links a { font-size: 15px; font-weight: 600; text-decoration: none }
.nav-cta-mobile { display: none }

.theme-toggle {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--card);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: var(--ink); padding: 0; flex: none;
}
.icon-moon { display: var(--show-moon) }
.icon-sun { display: var(--show-sun) }

.nav-cta {
  background: var(--accent); color: var(--accent-ink);
  padding: 10px 20px; border-radius: 999px;
  font-weight: 700; font-size: 15px; text-decoration: none;
  white-space: nowrap; flex: none;
}
.nav-cta:hover { filter: brightness(1.08); color: var(--accent-ink) }

.nav-toggle {
  display: none;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--card);
  color: var(--ink); cursor: pointer; padding: 0;
  align-items: center; justify-content: center; flex: none;
}

/* --------------------------------------------------------------- footer -- */

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--bg2);
  margin-top: auto;
}
.footer-wrap {
  max-width: 1100px; margin: 0 auto; padding: 44px 24px;
  display: flex; flex-wrap: wrap; gap: 28px; align-items: center;
}
.footer-brand { display: flex; flex-direction: column; gap: 4px }
.footer-brand-name { font-family: 'Caveat', cursive; font-size: 26px; font-weight: 700 }
.footer-tag { font-size: 14px; color: var(--muted) }
.footer-links { display: flex; gap: 20px; flex-wrap: wrap }
.footer-links a {
  font-size: 14.5px; font-weight: 600;
  color: var(--muted); text-decoration: none;
}
.footer-links a:hover { color: var(--ink) }
.footer-made { font-size: 13.5px; color: var(--muted) }

/* ----------------------------------------------------------- long-form -- */
/* Privacy, terms and support aren't in the design package. They wear the same
   clothes as the rest of the site so the footer links don't dump you somewhere
   that looks like a different company. */

.prose {
  max-width: 720px; margin: 0 auto;
  padding: 64px 24px 90px; width: 100%; box-sizing: border-box;
}
.prose h1 {
  font-family: 'Caveat', cursive; font-weight: 700;
  font-size: 58px; line-height: 1.02; margin: 0 0 6px;
}
.prose h2 {
  font-family: 'Caveat', cursive; font-weight: 700;
  font-size: 36px; line-height: 1.1; margin: 40px 0 12px;
}
.prose h3 { font-size: 18px; font-weight: 800; margin: 28px 0 8px }
.prose p, .prose li { font-size: 16.5px; line-height: 1.7; color: var(--muted) }
.prose p { margin: 0 0 16px }
.prose strong { color: var(--ink) }
.prose ul { padding-left: 20px; margin: 0 0 20px }
.prose li { margin-bottom: 8px }
.prose .lede { font-size: 17px; color: var(--muted); margin: 0 0 28px }
.prose .card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 18px; padding: 24px 26px; margin: 0 0 28px;
}
.prose .card p { margin: 0; color: var(--ink) }
.prose .table-wrap { overflow-x: auto; margin: 0 0 24px }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 520px }
.prose th, .prose td {
  border: 1px solid var(--line); padding: 10px 12px;
  text-align: left; vertical-align: top; color: var(--muted);
}
.prose th { color: var(--ink); font-weight: 800; background: var(--bg2) }
.prose .updated { font-size: 14px; margin-top: 32px }

/* ----------------------------------------------------------- responsive -- */
/* Everything below only ever makes the desktop design fit a narrower screen.
   No layout is changed above 1000px. */

@media (max-width: 1000px) {
  .cards-3 { grid-template-columns: repeat(2, 1fr) !important }
}

/* Nav collapses into a panel. 860px is where the links, the toggle and the
   CTA stop fitting on one line next to the wordmark. */
@media (max-width: 860px) {
  .nav-toggle { display: flex }
  .nav-links {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    padding: 8px 24px 18px;
    box-shadow: 0 18px 30px rgba(70, 30, 45, .10);
  }
  .nav-links[data-open="true"] { display: flex }
  .nav-links a {
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    font-size: 17px;
  }
  .nav-links a:last-child { border-bottom: none }
  .nav-cta-mobile {
    display: block; margin-top: 14px; text-align: center;
    background: var(--accent); color: var(--accent-ink);
    padding: 13px 24px; border-radius: 999px;
    font-weight: 800; border-bottom: none !important;
  }
  .nav-cta-mobile:hover { color: var(--accent-ink) }
}

@media (max-width: 900px) {
  /* Landing hero, and the alternating feature rows, become one column.
     minmax(0,1fr) rather than 1fr: a plain 1fr column refuses to shrink below
     its contents' min-content width, which is how a 360px page ends up 600px
     wide with everything running off the right-hand edge. */
  .hero, .feature-row {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 40px !important;
    text-align: center;
  }
  .hero > *, .feature-row > * {
    min-width: 0;
    max-width: 100% !important;
    justify-self: center;
  }
  .hero .hero-copy, .feature-row .row-copy { align-items: center }
  .hero .hero-actions, .feature-row .row-copy > div { justify-content: center }
  .feature-row .widget-pair { justify-content: center }
}

@media (max-width: 860px) {
  .dl-grid { grid-template-columns: 1fr !important }
}

@media (max-width: 700px) {
  /* Caveat headings are set very large for desktop; scale them with the
     viewport rather than letting a 68px line run off a 360px screen. */
  h1 { font-size: clamp(38px, 11.5vw, 68px) !important }
  h2 { font-size: clamp(30px, 8.5vw, 54px) !important }
  .no-feeds { font-size: clamp(30px, 8.5vw, 46px) !important }

  .cards-3 { grid-template-columns: 1fr !important }
  .section { padding-left: 20px !important; padding-right: 20px !important }
  .pad-lg { padding-top: 56px !important; padding-bottom: 60px !important }
  .card-lg { padding: 28px !important }
  .nav-wrap { padding: 0 20px }
  .footer-wrap { padding: 34px 20px }
}

@media (max-width: 560px) {
  /* The bar keeps the wordmark, the theme toggle and the menu button; the
     CTA moves into the panel. */
  .nav-cta { display: none }
  .nav-wrap { gap: 14px }
  .footer-wrap { flex-direction: column; align-items: flex-start; gap: 20px }
  .footer-spacer { display: none }
}

/* Phone frames and widget shots must scale, never overflow. */
@media (max-width: 700px) {
  .shot { width: auto !important; max-width: 100%; margin: 0 auto }
  .shot img { width: 100% !important; height: auto !important; max-width: 266px }
  .widget-img { width: 100% !important; height: auto !important }
  .widget-item { width: 100%; max-width: 320px }
  /* Two square widgets side by side: share the row rather than each claiming
     the full width. Only one of each light/dark pair is ever displayed. */
  .widget-pair { gap: 12px !important; max-width: 320px }
  .widget-pair .widget-img { flex: 1 1 0; width: auto !important; min-width: 0 }
  .waitlist-form { flex-wrap: wrap }
  .waitlist-form .field { flex: 1 1 100% !important }
  .waitlist-form button { flex: 1 1 100% }
}

/* Print: the whole site is a brochure, so make it behave like one. */
@media print {
  .site-nav, .nav-toggle, .theme-toggle { display: none !important }
  body { background: #fff; color: #000 }
}