/* ==========================================================================
   Bramble — brambledaily.com
   Warm, calm, plainspoken. One accent (terracotta), one supporting tone (sage).
   Deliberately quiet: no urgency banners, no countdowns, no dark patterns —
   that would contradict the product.
   ========================================================================== */

:root {
  --bg-1: #f5f0eb;
  --bg-2: #e8e0d8;
  --bg-3: #ddd5cc;

  --ink: #3a3530;
  --muted: #5a534c;
  --dim: #8a837c;

  --surface: #fbf8f5;
  --surface-2: #f2ebe4;
  --line: #e0d6cb;
  --line-soft: #ebe2d9;

  --accent: #a25c45;
  --accent-deep: #874631;
  --accent-tint: #f3e5df;
  --sage: #6f7d6b;
  --sage-tint: #e6eae2;

  --radius: 16px;
  --radius-lg: 22px;
  --shadow: 0 1px 2px rgba(58, 53, 48, 0.05), 0 8px 28px rgba(58, 53, 48, 0.06);
  --maxw: 1080px;

  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --display: 'Fraunces', Georgia, 'Times New Roman', serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: linear-gradient(170deg, #f5f0eb 0%, #e8e0d8 55%, #ddd5cc 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }

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

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 0.5em;
}

h1 { font-size: clamp(2.1rem, 5.2vw, 3.35rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.25rem); }
h3 { font-size: 1.16rem; letter-spacing: -0.01em; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

.eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}

.lede { font-size: 1.12rem; color: var(--muted); max-width: 62ch; }

/* ---------- header ---------- */

header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(245, 240, 235, 0.88);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line-soft);
}

nav {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.logo:hover { text-decoration: none; }
.logo-mark { display: block; width: 30px; height: 30px; }

.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links a {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--muted);
}
.nav-links a:hover { color: var(--ink); text-decoration: none; }
.nav-links .nav-cta {
  background: var(--accent);
  color: #fff;
  padding: 9px 18px;
  border-radius: 999px;
  font-weight: 600;
}
.nav-links .nav-cta:hover { background: var(--accent-deep); color: #fff; }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  border: 1px solid transparent;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover { text-decoration: none; }

.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-deep); color: #fff; }

.btn-ghost {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
}
.btn-ghost:hover { border-color: var(--dim); color: var(--ink); }

.store-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* Official store badges. The artwork is Apple's and Google's, self-hosted
   verbatim — never recolour, crop or redraw it. Apple asks for a minimum web
   height of 40px and clear space of at least 1/4 the badge height on every
   side; the Apple badge renders at 48px, so 12px is the floor and the row's
   own gap adds to that. Google's PNG carries its own padding inside the file,
   which is why it is set taller (70px) to look the same size. */
.store-badge {
  display: inline-flex;
  align-items: center;
  margin: 12px 6px;
  transition: transform 0.18s, opacity 0.18s;
}
.store-badge:hover { transform: translateY(-2px); opacity: 0.9; }
.store-badge img { display: block; height: 48px; width: auto; }
.store-badge-play img { height: 70px; }

/* ---------- hero ---------- */

.hero { padding: 84px 0 64px; }
.hero h1 { max-width: 17ch; }
.hero .lede { font-size: 1.2rem; margin-bottom: 30px; }

.hero-tag {
  font-family: var(--display);
  font-size: 1.05rem;
  font-style: italic;
  color: var(--accent-deep);
  margin: 0 0 22px;
}

.hero-note { margin-top: 20px; font-size: 0.9rem; color: var(--muted); }

.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 56px;
  align-items: center;
}

/* ---------- phone frame (real app screenshots) ---------- */

/* Pure CSS: rounded rect, thin warm-dark bezel, no third-party frame image.
   Each screenshot keeps its own status bar, so nothing is masked over it. */
.phone {
  --phone-w: 300px;
  width: var(--phone-w);
  max-width: 100%;
  margin: 0 auto;
  padding: 8px;
  border-radius: 40px;
  background: linear-gradient(165deg, #4a423a 0%, #322c26 55%, #241f1a 100%);
  border: 1px solid rgba(58, 53, 48, 0.35);
  box-shadow: 0 2px 6px rgba(58, 53, 48, 0.10), 0 22px 50px rgba(58, 53, 48, 0.20);
}
.phone picture, .phone img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 33px;
}
.phone-cap {
  margin-top: 14px;
  text-align: center;
  font-size: 0.84rem;
  color: var(--dim);
}
.phone-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  align-items: start;
  margin-top: 26px;
}
.phone-row .phone { --phone-w: 100%; }
.phone-row .phone-cap { color: var(--muted); }

/* The hand-drawn "illustrative chat card" that used to sit in the hero (and
   the .bubble / .chat-foot rules that dressed it) is gone — the hero now shows
   a real screenshot, so the "not a real transcript" disclaimer it needed went
   with it. */

/* ---------- sections ---------- */

.section { padding: 68px 0; }
.section-alt { background: rgba(251, 248, 245, 0.6); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.section-head { max-width: 66ch; margin-bottom: 38px; }

.answer-block {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: 26px 28px;
  box-shadow: var(--shadow);
  max-width: 74ch;
  font-size: 1.08rem;
}

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

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 24px;
  box-shadow: var(--shadow);
}
.card h3 { margin-bottom: 8px; }
.card p { color: var(--muted); font-size: 0.98rem; }

.card-ico {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--sage-tint);
  color: var(--sage);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.card-ico svg { width: 21px; height: 21px; }
.card-ico.warm { background: var(--accent-tint); color: var(--accent); }

.step-num {
  font-family: var(--display);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 10px;
  display: block;
}

/* list with checks */
.tick-list { list-style: none; margin: 0; padding: 0; }
.tick-list li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 11px;
  color: var(--muted);
  font-size: 0.98rem;
}
.tick-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.62em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sage);
}
.tick-list li strong { color: var(--ink); font-weight: 600; }

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

.price-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; align-items: start; }
.price-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 30px 28px; box-shadow: var(--shadow); }
.price-card.featured { border-color: var(--accent); }
.price-name { font-family: var(--display); font-size: 1.3rem; font-weight: 600; margin-bottom: 6px; }
.price-amt { font-size: 2.1rem; font-family: var(--display); font-weight: 600; letter-spacing: -0.02em; }
.price-amt span { font-family: var(--sans); font-size: 0.95rem; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.price-alt { font-size: 0.95rem; color: var(--muted); margin: 4px 0 20px; }
.price-note { margin-top: 22px; font-size: 0.88rem; color: var(--muted); }

/* ---------- FAQ ---------- */

.faq-list { max-width: 78ch; }
.faq-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 4px 22px;
  margin-bottom: 12px;
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 30px 16px 0;
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--ink);
  position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -6px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg);
  transition: transform .18s ease;
}
.faq-item[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq-item p { color: var(--muted); font-size: 0.99rem; padding-bottom: 18px; margin: 0; }

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

.cta-band {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 48px 40px;
  text-align: center;
  box-shadow: var(--shadow);
}
.cta-band .store-row { justify-content: center; margin-top: 26px; }
.cta-band .lede { margin: 0 auto; }

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

.crisis-note {
  border: 1px solid var(--line);
  background: var(--surface-2);
  border-radius: var(--radius);
  padding: 20px 22px;
  font-size: 0.95rem;
  color: var(--muted);
  max-width: 74ch;
}
.crisis-note strong { color: var(--ink); }

footer {
  border-top: 1px solid var(--line-soft);
  background: rgba(251, 248, 245, 0.55);
  padding: 46px 0 40px;
  margin-top: 20px;
}
.footer-top { display: flex; flex-wrap: wrap; gap: 32px; justify-content: space-between; margin-bottom: 30px; }
.footer-brand { max-width: 38ch; }
.footer-brand p { font-size: 0.94rem; color: var(--muted); margin-top: 10px; }
.footer-cols { display: flex; flex-wrap: wrap; gap: 54px; }
.footer-col h4 {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
  margin: 0 0 12px;
  font-weight: 600;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 9px; }
.footer-col a { font-size: 0.95rem; color: var(--muted); }
.footer-col a:hover { color: var(--accent-deep); }
.footer-bottom {
  border-top: 1px solid var(--line-soft);
  padding-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  font-size: 0.88rem;
  color: var(--dim);
}

/* ---------- 404 ---------- */

.page-hero { padding: 92px 0 40px; text-align: center; }
.page-hero .lede { margin: 0 auto; }
.center-actions { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 28px; }

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .phone-row { grid-template-columns: 1fr; gap: 34px; max-width: 300px; margin-left: auto; margin-right: auto; }
}

@media (max-width: 720px) {
  body { font-size: 16.5px; }
  .nav-links { gap: 16px; }
  .nav-links a:not(.nav-cta) { display: none; }
  .hero { padding: 56px 0 48px; }
  .section { padding: 52px 0; }
  .grid-3, .grid-2, .price-grid { grid-template-columns: 1fr; }
  .cta-band { padding: 36px 24px; }
  .footer-cols { gap: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}