/* Life of Prayer landing page. Parchment, ink, burgundy and gold, as in the app. */

:root {
  --bg: #faf5ec;
  --paper: #fffbf5;
  --tint: #f3eadc;
  --edge: #ebddc8;
  --ink: #3b2b23;
  --soft: #7d6857;
  --wine: #8c3d47;
  --wine-dark: #74323b;
  --gold: #a97e3e;
  --gold-text: #8a6530;
  --night: #1b1310;
  --cream: #f6ecdd;
  --cream-soft: #cdb9a8;

  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Manrope", system-ui, -apple-system, sans-serif;
  --radius: 28px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
h1, h2 { font-family: var(--serif); font-weight: 500; letter-spacing: -0.01em; }
h2 { font-size: clamp(36px, 4.6vw, 56px); line-height: 1.05; }
h2 span, h1 span { color: var(--wine); font-style: italic; }
h3 { font-size: 19px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; }

.wrap { width: min(1160px, 100% - 40px); margin: 0 auto; }
section { padding: clamp(72px, 10vw, 120px) 0; }
.head { max-width: 640px; margin-bottom: clamp(36px, 5vw, 56px); }
.head p { margin-top: 14px; font-size: 19px; color: var(--soft); }
.fine { font-size: 14px; color: var(--soft); }
.fine a { color: var(--soft); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; font-weight: 700; text-decoration: none; transition: background 0.2s, transform 0.2s; }
.btn-wine { background: var(--wine); color: var(--paper); }
.btn-wine:hover { background: var(--wine-dark); }
.btn-sm { padding: 10px 18px; font-size: 14px; }
.store { display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 22px 0 18px; border-radius: 14px; text-decoration: none; transition: transform 0.2s; }
.store:hover { transform: translateY(-2px); }
.store svg { width: 22px; height: 26px; }
.store span { display: grid; font-size: 22px; font-weight: 600; line-height: 1; letter-spacing: -0.02em; text-align: left; }
.store small { font-size: 11px; font-weight: 500; letter-spacing: 0; margin-bottom: 3px; }
.store-dark { background: #000; color: #fff; }
.store-light { background: var(--cream); color: #000; }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--wine); outline-offset: 3px; border-radius: 8px; }

/* Nav */
.nav { position: sticky; top: 0; z-index: 10; background: rgba(250, 245, 236, 0.85); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: border-color 0.3s; }
.nav.is-scrolled { border-color: var(--edge); }
.nav-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--serif); font-size: 23px; font-weight: 600; text-decoration: none; }
.brand img { border-radius: 8px; }
.nav-links { display: flex; gap: 28px; font-size: 15px; font-weight: 500; color: var(--soft); }
.nav-links a { text-decoration: none; }
.nav-links a:hover { color: var(--ink); }

/* Phone frame around a real screenshot */
.phone { margin: 0; border-radius: 44px; padding: 7px; background: #241a16; box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, 0 30px 60px -24px rgba(59, 43, 35, 0.45); }
.phone img { width: 100%; border-radius: 37px; aspect-ratio: 645 / 1402; object-fit: cover; }
.phone-sm { border-radius: 30px; padding: 5px; }
.phone-sm img { border-radius: 25px; }

/* Hero */
.hero { padding: clamp(40px, 6vw, 72px) 0 clamp(56px, 7vw, 88px); overflow: hidden; }
.hero-in { display: grid; grid-template-columns: 1fr 1.05fr; gap: 24px; align-items: center; }
.hero h1 { font-size: clamp(50px, 6.2vw, 84px); line-height: 0.98; }
.hero-sub { margin-top: 24px; font-size: clamp(18px, 1.6vw, 21px); color: var(--soft); max-width: 30ch; }
.cta-row { display: flex; align-items: center; gap: 16px; margin-top: 32px; flex-wrap: wrap; }
.cta-note { font-size: 15px; font-weight: 600; color: var(--soft); }
.chips { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { font-size: 14px; font-weight: 600; padding: 7px 14px; border-radius: 999px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--edge); }
.hero-phones { position: relative; height: clamp(480px, 46vw, 600px); }
.hero-phones .phone { position: absolute; width: clamp(190px, 17vw, 240px); }
.phone-front { left: 50%; top: 0; transform: translateX(-50%); z-index: 2; }
.phone-back { top: 56px; opacity: 0.97; }
.phone-left { left: 50%; transform: translateX(-108%) rotate(-6deg); }
.phone-right { left: 50%; transform: translateX(8%) rotate(6deg); }

/* Facts */
.facts { padding: 0; }
.facts-in { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--paper); border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--edge); }
.fact { padding: 26px 24px; display: grid; gap: 2px; }
.fact + .fact { border-left: 1px solid var(--edge); }
.fact b { font-family: var(--serif); font-size: 44px; font-weight: 600; line-height: 1; color: var(--wine); }
.fact span { font-size: 15px; color: var(--soft); }

/* Problem */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.quotes blockquote { margin: 0; padding: 28px; border-radius: var(--radius); background: var(--paper); box-shadow: inset 0 0 0 1px var(--edge); font-family: var(--serif); font-size: 25px; line-height: 1.25; }
.problem .fine { margin-top: 20px; max-width: 70ch; }


.num { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--wine); color: var(--paper); font-weight: 700; font-size: 15px; margin-bottom: 12px; }

/* Kicker above a section title */
.kicker { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-text); margin-bottom: 12px; }
.head-center { margin-left: auto; margin-right: auto; text-align: center; }

/* The two parts */
.split-intro { padding-top: 0; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.two-card { display: grid; gap: 8px; align-content: start; padding: 32px; border-radius: var(--radius); text-decoration: none; transition: transform 0.2s; }
.two-card:hover { transform: translateY(-3px); }
.two-card b { font-family: var(--serif); font-size: 34px; font-weight: 600; line-height: 1.1; }
.two-card p { font-size: 17px; }
.two-card .go { margin-top: 12px; font-size: 15px; font-weight: 700; }
.two-me { background: var(--night); color: var(--cream); }
.two-me .kicker { color: #d5b578; }
.two-me p { color: var(--cream-soft); }
.two-others { background: var(--paper); box-shadow: inset 0 0 0 1px var(--edge); }
.two-others p { color: var(--soft); }
.two-others .go { color: var(--wine); }

/* The two flows */
.flow-me { background: var(--night); color: var(--cream); }
.flow-me .head p, .flow-me .flow-grid p, .flow-me .fine { color: var(--cream-soft); }
.flow-me .kicker { color: #d5b578; }
.flow-me .phone { background: #0e0907; box-shadow: 0 0 0 1px rgba(246,236,221,0.12), 0 30px 60px -24px rgba(0,0,0,0.7); }
.flow-me .num { background: var(--cream); color: var(--night); }
.flow-others { background: var(--paper); border-bottom: 1px solid var(--edge); }
.flow-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 48px 28px; }
.flow-grid-3 { grid-template-columns: repeat(3, 1fr); }
.flow-grid-3 .phone { max-width: 270px; }
.flow-grid-3 p { max-width: 34ch; }
.flow-grid .phone { width: 100%; max-width: 230px; margin-bottom: 20px; }
.flow-grid h3 { font-family: var(--serif); font-size: 28px; font-weight: 600; line-height: 1.1; letter-spacing: 0; }
.flow-grid p { margin-top: 6px; font-size: 15px; color: var(--soft); }
.flow .example { margin-top: 32px; }

.tried { margin-top: clamp(72px, 9vw, 110px); display: grid; grid-template-columns: 0.7fr 1.3fr; gap: 16px 40px; align-items: start; }
.tried-title { font-family: var(--serif); font-size: clamp(32px, 3.6vw, 44px); font-weight: 500; line-height: 1.05; letter-spacing: 0; }
.tried .table { grid-column: 2; grid-row: 1 / span 2; }
.tried .fine { grid-column: 1; grid-row: 2; }
.flow-me .table { background: rgba(246,236,221,0.05); box-shadow: inset 0 0 0 1px rgba(246,236,221,0.12); }
.flow-me .row + .row { border-color: rgba(246,236,221,0.12); }
.flow-me .no { color: var(--cream-soft); }
.flow-me .no::before { color: rgba(246,236,221,0.4); }
.flow-me .row-us { background: var(--cream); color: var(--night); }

/* Comparison table */
.table { border-radius: var(--radius); overflow: hidden; background: var(--paper); box-shadow: inset 0 0 0 1px var(--edge); max-width: 820px; }
.row { display: grid; grid-template-columns: 1fr 1.4fr; gap: 20px; padding: 20px 28px; align-items: center; }
.row + .row { border-top: 1px solid var(--edge); }
.row span:first-child { font-weight: 700; }
.no { color: var(--soft); }
.no::before { content: "✕"; margin-right: 10px; color: #b9a596; }
.row-us { background: var(--wine); color: var(--paper); }
.row-us span:first-child { font-family: var(--serif); font-size: 24px; font-weight: 600; }
.yes { font-weight: 600; }
.yes::before { content: "✓"; margin-right: 10px; }

/* Features */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tile-art { grid-row: span 2; }
.tile { padding: 28px; border-radius: var(--radius); background: var(--paper); box-shadow: inset 0 0 0 1px var(--edge); display: flex; flex-direction: column; gap: 8px; }
.tile p { color: var(--soft); font-size: 16px; }
.ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--tint); color: var(--wine); font-size: 22px; margin-bottom: 10px; }
.art-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.art-pair img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 20%; border-radius: 16px; }

/* FAQ */
.faq-in { display: grid; grid-template-columns: 0.7fr 1.3fr; gap: 40px; align-items: start; }
.faq-list details { border-bottom: 1px solid var(--edge); }
.faq-list details:first-child { border-top: 1px solid var(--edge); }
.faq-list summary { list-style: none; cursor: pointer; padding: 22px 40px 22px 0; position: relative; font-size: 19px; font-weight: 700; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 26px; font-weight: 400; color: var(--wine); transition: transform 0.2s; }
.faq-list details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-list details p { padding: 0 0 22px; color: var(--soft); max-width: 60ch; }

/* Final */
.final { background: var(--night); color: var(--cream); text-align: center; }
.final-in { display: grid; justify-items: center; gap: 16px; }
.final-icon { border-radius: 20px; box-shadow: 0 20px 40px -16px rgba(0,0,0,0.6); margin-bottom: 8px; }
.final h2 { font-size: clamp(42px, 6vw, 72px); }
.final p { color: var(--cream-soft); font-size: 19px; }
.cta-center { justify-content: center; margin-top: 12px; }
.final-line { font-size: 14px !important; font-weight: 600; margin-top: 8px; }

/* Legal pages */
.legal { padding: clamp(48px, 7vw, 88px) 0 clamp(72px, 10vw, 120px); }
.legal-in { max-width: 720px; }
.legal h1 { font-size: clamp(44px, 6vw, 68px); line-height: 1; }
.legal-date { margin-top: 10px; color: var(--soft); font-size: 15px; }
.legal h2 { font-size: 30px; margin: 44px 0 12px; }
.legal p, .legal li { font-size: 17px; line-height: 1.65; }
.legal p + p { margin-top: 12px; }
.legal ul { margin: 12px 0 0; padding-left: 22px; display: grid; gap: 8px; }
.legal a { color: var(--wine); }
.legal-summary { margin-top: 32px; padding: 24px 28px; border-radius: var(--radius); background: var(--paper); box-shadow: inset 0 0 0 1px var(--edge); }
.legal-summary h2 { margin-top: 0; font-size: 26px; }

/* Footer */
.foot { background: var(--night); color: var(--cream-soft); border-top: 1px solid rgba(246,236,221,0.1); padding: 32px 0 40px; font-size: 14px; }
.foot-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; }
.foot .brand { color: var(--cream); font-size: 20px; }
.foot nav { display: flex; gap: 24px; }
.foot nav a { text-decoration: none; }
.foot nav a:hover { color: var(--cream); }
.foot p { flex-basis: 100%; }

/* Fade-in as each block reaches the screen */
.rise { opacity: 0; transform: translateY(20px); transition: opacity 0.7s ease, transform 0.7s ease; }
.rise.is-in { opacity: 1; transform: none; }

/* Tablet and phone */
@media (max-width: 920px) {
  .nav-links { display: none; }
  .hero-in, .faq-in { grid-template-columns: 1fr; }
  .two { grid-template-columns: 1fr; }
  .flow-grid, .flow-grid-3 { grid-template-columns: 1fr 1fr; gap: 40px 16px; }
  .flow-grid h3 { font-size: 21px; }
  .tried { grid-template-columns: 1fr; }
  .tried .table, .tried .fine { grid-column: 1; grid-row: auto; }
  .hero-copy { text-align: center; display: grid; justify-items: center; }
  .hero-phones { height: clamp(400px, 100vw, 520px); }
  .hero-phones .phone { width: clamp(170px, 44vw, 230px); }
  .facts-in { grid-template-columns: 1fr 1fr; }
  .fact:nth-child(3) { border-left: 0; }
  .fact:nth-child(n + 3) { border-top: 1px solid var(--edge); }
  .quotes, .grid { grid-template-columns: 1fr; }
  .tile-art { grid-row: auto; }
  .row { grid-template-columns: 1fr; gap: 4px; padding: 18px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rise { opacity: 1; transform: none; transition: none; }
}