/* Interlude marketing site — shares the extension's own palette
   (docs/ui-guidelines.md): warm muted red accent, cream neutrals,
   humanist sans for UI, serif accent only for headlines/scripture.
   Deliberately light-only, same as the overlay itself (color-scheme:
   light) — the warm cream palette is the brand, not a default. */

:root {
  --accent: #b3574f;
  --accent-dark: #9c4941;
  --accent-soft: #efe2d0;
  --text: #4a3f38;
  --text-muted: #7a6f63;
  --text-faint: #a89787;
  --border: #d8c9b8;
  --card: #fffdf9;
  --bg-top: #fdf8f0;
  --bg-mid: #f7ecdc;
  --bg-bottom: #f0e2c9;
  --sans: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: "Lora", Georgia, "Times New Roman", serif;
  --shadow: 0 1px 3px rgba(74, 63, 56, 0.06), 0 8px 24px rgba(74, 63, 56, 0.06);
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: hidden;
  font-family: var(--sans);
  color: var(--text);
  background: linear-gradient(165deg, var(--bg-top) 0%, var(--bg-mid) 55%, var(--bg-bottom) 100%);
  background-attachment: fixed;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

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

/* Headings without their own line-height override otherwise inherit
   body's 1.55, which is much looser than a large heading needs and pads
   real, visible space above the glyphs (line-box leading scales with
   font-size) — that's what made the privacy section's h2 look shifted
   down against the tighter-leaded checklist beside it. */
h1,
h2,
h3 {
  line-height: 1.2;
}

a {
  color: inherit;
}

.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
}

/* Soft, low-opacity color blobs used behind a few sections to give wide
   desktop viewports something besides flat cream to look at — the kind
   of ambient depth Calm/Headspace-style pages lean on. Purely
   decorative: absolute, behind content (z-index 0), never interactive,
   and each host section gets position:relative + z-index:1 on its .wrap
   so real content always sits above them. */
.bg-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(50px);
  pointer-events: none;
  z-index: 0;
}

.hero .bg-blob-1 {
  top: -180px;
  right: -140px;
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(179, 87, 79, 0.16), transparent 70%);
}

.hero .bg-blob-2 {
  bottom: -220px;
  left: -160px;
  width: 460px;
  height: 460px;
  background: radial-gradient(circle, rgba(216, 201, 184, 0.55), transparent 70%);
}

.features .bg-blob-1 {
  top: 10%;
  left: -220px;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(179, 87, 79, 0.09), transparent 70%);
}

.final-cta .bg-blob-1 {
  top: -60%;
  left: 50%;
  transform: translateX(-50%);
  width: 720px;
  height: 720px;
  background: radial-gradient(circle, rgba(179, 87, 79, 0.12), transparent 70%);
}

/* ---------- Announcement bar ---------- */

.announce-bar {
  background: var(--accent);
  color: #fffdf9;
  text-align: center;
  padding: 11px 24px;
  font-size: 0.88rem;
}

.announce-bar .wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 10px;
}

.announce-bar a {
  color: #fffdf9;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.announce-bar a:hover {
  text-decoration: none;
}

/* ---------- Header ---------- */

.site-header {
  padding: 24px 0;
}

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

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
}

.brand img {
  width: 32px;
  height: 32px;
}

.brand-word {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.35rem;
  letter-spacing: -0.01em;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}

.lang-switch {
  display: flex;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.lang-switch a {
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 6px;
}

.lang-switch a[aria-current="page"] {
  color: var(--text);
  font-weight: 600;
  background: var(--accent-soft);
}

.lang-switch a:not([aria-current="page"]):hover {
  color: var(--text);
  text-decoration: underline;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: 8px;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
  white-space: nowrap;
}

.btn-primary {
  background: var(--accent);
  color: #fffdf9;
}

.btn-primary:hover {
  background: var(--accent-dark);
  transform: translateY(-1px);
}

.btn-secondary {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}

.btn-secondary:hover {
  background: var(--accent-soft);
  border-color: #c2ad95;
  transform: translateY(-1px);
}

.btn svg {
  width: 18px;
  height: 18px;
  flex: none;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.btn-note {
  margin-top: 14px;
  font-size: 0.85rem;
  color: var(--text-faint);
}

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

.hero {
  padding: 40px 0 88px;
  position: relative;
  overflow: hidden;
}

.hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
  z-index: 1;
}

.hero-eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 14px;
}

.coming-soon-badge {
  display: inline-block;
  padding: 7px 16px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 20px;
}

.hero h1 {
  font-family: var(--serif);
  font-size: clamp(2.1rem, 4vw, 3rem);
  line-height: 1.15;
  margin: 0 0 20px;
  text-wrap: balance;
}

.hero p.lead {
  font-size: 1.1rem;
  color: var(--text-muted);
  margin: 0 0 28px;
  max-width: 46ch;
}

.hero-media {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 12px 20px rgba(74, 63, 56, 0.1), 0 28px 56px rgba(74, 63, 56, 0.14);
  border: 1px solid var(--border);
}

/* A small mocked-up browser window (dots + URL bar) around the verse
   card — reads immediately as "this is what happens in your browser"
   instead of a plain floating card that blended into the page's own
   matching cream background. The verse content below it is real HTML
   text, not a screenshot image: a flattened screenshot placed next to
   genuinely crisp UI text (the URL bar) looked visibly softer by
   comparison, so this recreates the overlay's own styling live instead. */
.browser-chrome {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 16px;
  background: #efe6d8;
  border-bottom: 1px solid var(--border);
}

.browser-dots {
  display: flex;
  gap: 6px;
  flex: none;
}

.browser-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: block;
}

.browser-dots span:nth-child(1) {
  background: #e2a9a4;
}

.browser-dots span:nth-child(2) {
  background: #e6cb9a;
}

.browser-dots span:nth-child(3) {
  background: #a9c9a4;
}

.browser-url {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  background: #fffdf9;
  border: 1px solid var(--border);
  border-radius: 7px;
  font-size: 0.82rem;
  color: var(--text-faint);
}

.browser-url svg {
  width: 13px;
  height: 13px;
  flex: none;
}

.verse-screen {
  background: linear-gradient(165deg, var(--bg-top) 0%, var(--bg-mid) 55%, var(--bg-bottom) 100%);
  padding: 44px 40px 36px;
  text-align: center;
}

.verse-ref {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 18px;
}

.verse-text {
  font-family: var(--serif);
  font-size: 1.35rem;
  line-height: 1.55;
  color: var(--text);
  margin: 0 0 26px;
}

.verse-instruction {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin: 0 0 10px;
}

.verse-input {
  width: 220px;
  margin: 0 auto 16px;
  padding: 10px 14px;
  background: #fffdf9;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.85rem;
  color: var(--text-faint);
  text-align: center;
}

.verse-continue {
  display: inline-block;
  padding: 10px 24px;
  background: #d8c9b8;
  color: #7a6f63;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 18px;
}

.verse-links {
  display: flex;
  justify-content: center;
  gap: 16px;
  font-size: 0.78rem;
}

.verse-links span {
  text-decoration: underline;
  color: var(--text);
}

/* ---------- Section scaffolding ---------- */

section {
  padding: 56px 0;
}

/* Alternating white "bands" (used on How it works and Privacy) break
   the page into readable chunks instead of one continuous field of
   cream gradient with generic padding between everything — the section
   boundary itself becomes the visual cue, not just empty space. */
.section-band {
  background: var(--card);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.features {
  position: relative;
  overflow: hidden;
}

.features .wrap {
  z-index: 1;
}

.section-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 36px;
}

.section-eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 10px;
}

.section-head h2 {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  margin: 0 0 12px;
  text-wrap: balance;
}

.section-head p {
  color: var(--text-muted);
  margin: 0;
}

/* ---------- Value props (3-up) ---------- */

.value-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

.value-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px 24px;
  box-shadow: var(--shadow);
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.value-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(74, 63, 56, 0.07), 0 16px 32px rgba(74, 63, 56, 0.1);
}

.value-icon {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.value-icon svg {
  width: 24px;
  height: 24px;
}

.value-card h3 {
  font-size: 1.05rem;
  margin: 0 0 8px;
}

.value-card p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.95rem;
}

/* ---------- How it works ---------- */

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  counter-reset: step;
}

.step {
  position: relative;
  padding: 8px 0 0 28px;
  border-left: 2px solid var(--border);
}

/* First step's connector line has nothing to its left to lead in from,
   so it's cut to just the number's own height instead of running the
   full column — otherwise it reads as an orphaned line pointing at
   nothing. */
.step:first-child {
  border-left-color: transparent;
  background:
    linear-gradient(var(--border), var(--border)) no-repeat 0 0 / 2px 56px;
}

.step-number {
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 600;
  color: var(--accent);
  opacity: 0.7;
  display: block;
  margin-bottom: 10px;
}

.step h3 {
  font-size: 1.05rem;
  margin: 0 0 8px;
}

.step p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.95rem;
}

/* ---------- Feature rows ---------- */

.feature-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  padding: 40px 0;
}

.feature-row:not(:last-child) {
  border-bottom: 1px solid var(--border);
}

.feature-row.reverse .feature-media {
  order: 2;
}

/* A text-only row (no .feature-media sibling) still inherits the
   two-column grid above, so its lone child only fills the first cell
   and .no-media's own "margin: 0 auto" ends up centering it within that
   half-width cell rather than across the full row, reading as shifted
   left instead of centered. Collapsing to one column fixes it. */
.feature-row.text-only {
  grid-template-columns: minmax(0, 1fr);
}

.feature-media img {
  border-radius: 14px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.feature-text .feature-kicker {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0 0 8px;
}

.feature-text h3 {
  font-family: var(--serif);
  font-size: 1.5rem;
  margin: 0 0 14px;
  text-wrap: balance;
}

.feature-text p {
  color: var(--text-muted);
  margin: 0;
  max-width: 48ch;
}

.feature-text.no-media {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.feature-text.no-media p {
  max-width: none;
}

/* ---------- Privacy ---------- */

/* Originally a two-column layout (paragraph left, checklist right) —
   pairing one dense paragraph against four short list lines left the
   right column looking sparse and unbalanced regardless of how the top
   edges lined up, since the two columns just carry very different
   amounts of visual weight. Restructured as a centered intro (matching
   every other section-head on the page) followed by a 2x2 grid of
   compact cards, echoing the value-props cards up top instead of
   inventing a one-off layout for this section alone. */
.privacy .section-head {
  margin-bottom: 40px;
}

.privacy-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  max-width: 720px;
  margin: 0 auto;
}

.privacy-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: linear-gradient(165deg, var(--bg-top) 0%, var(--bg-mid) 100%);
  border: 1px solid var(--border);
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.95rem;
}

.privacy-card .privacy-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.privacy-card svg {
  width: 18px;
  height: 18px;
}

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

.faq-list {
  max-width: 760px;
  margin: 0 auto;
  display: grid;
  gap: 12px;
}

.faq-item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 4px 22px;
}

.faq-item summary {
  cursor: pointer;
  padding: 18px 0;
  font-weight: 600;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary .chev {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--text-faint);
  transition: transform 200ms ease;
}

.faq-item[open] summary .chev {
  transform: rotate(180deg);
}

.faq-item p {
  margin: 0 0 18px;
  color: var(--text-muted);
}

.faq-item p a {
  color: var(--accent-dark);
  font-weight: 600;
  text-decoration: underline;
}

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

.final-cta {
  text-align: center;
  position: relative;
  overflow: hidden;
}

.final-cta .wrap {
  z-index: 1;
}

.final-cta h2 {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin: 0 0 24px;
  text-wrap: balance;
}

.final-cta .btn-row {
  justify-content: center;
}

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

footer {
  padding: 40px 0 56px;
  border-top: 1px solid var(--border);
}

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

.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer-brand img {
  width: 22px;
  height: 22px;
}

.footer-brand-text {
  font-family: var(--serif);
  font-weight: 600;
}

.footer-tagline {
  color: var(--text-faint);
  font-size: 0.85rem;
  font-style: italic;
}

.footer-meta {
  color: var(--text-faint);
  font-size: 0.82rem;
  text-align: right;
}

.footer-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.footer-nav {
  display: flex;
  gap: 18px;
  font-size: 0.85rem;
}

.footer-nav a {
  color: var(--text-muted);
  text-decoration: none;
}

.footer-nav a:hover {
  color: var(--accent-dark);
  text-decoration: underline;
}

/* ---------- Responsive ---------- */

@media (max-width: 860px) {
  .hero .wrap {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .hero p.lead {
    max-width: none;
  }

  .value-grid,
  .steps {
    grid-template-columns: 1fr;
  }

  /* The step connector runs left-to-right across 3 columns on desktop;
     stacked into 1 column it needs to run top-to-bottom instead, or
     each step shows a floating vertical line down its own left edge
     that doesn't connect to anything. */
  .step {
    padding: 20px 0 0;
    border-left: none;
    border-top: 2px solid var(--border);
    background: none;
  }

  .step:first-child {
    border-top-color: transparent;
    background: linear-gradient(var(--border), var(--border)) no-repeat 0 0 / 56px 2px;
  }

  .feature-row,
  .feature-row.reverse {
    grid-template-columns: 1fr;
  }

  .feature-row.reverse .feature-media {
    order: 0;
  }

  .feature-text p {
    max-width: none;
  }

  .privacy-cards {
    grid-template-columns: 1fr;
  }

  .footer-meta {
    text-align: left;
  }

  .footer-right {
    align-items: flex-start;
  }
}

@media (max-width: 520px) {
  .cookie-banner-inner {
    flex-direction: column;
    align-items: stretch;
  }

  .cookie-banner-actions {
    justify-content: stretch;
  }

  .cookie-banner-actions .btn {
    flex: 1;
  }
}

@media (max-width: 520px) {
  .btn-row {
    flex-direction: column;
    align-items: stretch;
  }

  section {
    padding: 48px 0;
  }

  .header-actions {
    gap: 10px;
  }

  .brand-word {
    font-size: 1.15rem;
  }
}

/* Cookie consent banner. Analytics/Pixel scripts don't load at all until
   Accept is clicked (see cookie-consent.js) — this is just the UI, not
   the actual gate. Decline is styled identically to Accept (same .btn
   sizing), deliberately not downplayed — a banner that makes "no" harder
   to find than "yes" is exactly the dark pattern GDPR guidance calls out
   by name. */
.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  background: var(--card);
  border-top: 1px solid var(--border);
  box-shadow: 0 -4px 20px rgba(74, 63, 56, 0.08);
}

.cookie-banner[hidden] {
  display: none;
}

.cookie-banner-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 16px 24px;
}

.cookie-banner-inner p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--text-muted);
  max-width: 640px;
}

.cookie-banner-inner a {
  color: var(--accent-dark);
}

.cookie-banner-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.cookie-banner-actions .btn {
  padding: 9px 18px;
  font-size: 0.9rem;
}

/* Legal pages (privacy policy) — narrow reading column, reuses the
   existing type scale rather than inventing a new one. */
.legal {
  padding: 64px 0 96px;
}

.legal .wrap {
  max-width: 720px;
}

.legal .legal-eyebrow {
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0 0 8px;
}

.legal h1 {
  font-family: var(--serif);
  font-size: 2.1rem;
  margin: 0 0 8px;
}

.legal .legal-updated {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin: 0 0 40px;
}

.legal h2 {
  font-family: var(--serif);
  font-size: 1.4rem;
  margin: 40px 0 14px;
}

.legal p,
.legal li {
  color: var(--text);
  font-size: 1.02rem;
}

.legal ul {
  margin: 0 0 20px;
  padding-left: 22px;
}

.legal li {
  margin-bottom: 8px;
}

.legal a {
  color: var(--accent-dark);
  text-decoration: underline;
}