:root{
  --cream:#FBF7F1; --card:#FFFFFF; --ink:#3A2E2A; --muted:#7A6E66;
  --gold:#C2895A; --gold-soft:#F3E2D4; --line:rgba(58,46,42,.12);
}
*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--cream); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.65; -webkit-font-smoothing:antialiased; position:relative;
}
/* faint paper grain - warms the flat cream, reads hand-made */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
nav, header, section, footer{position:relative; z-index:1}

a{color:var(--gold); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1060px; margin:0 auto; padding:0 24px}
.serif{font-family:Georgia,"Times New Roman",serif; font-weight:400}

/* nav: solid + hairline, no glassy blur */
nav{border-bottom:1px solid var(--line); background:var(--cream)}
nav .wrap{display:flex; align-items:center; justify-content:space-between; height:64px}
.brand{font-family:Georgia,serif; font-size:20px; color:var(--ink); letter-spacing:.2px}
.brand:hover{text-decoration:none}
nav .links a{color:var(--muted); font-size:15px; margin-left:24px}

/* hero: asymmetric */
.hero{display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center;
  padding:92px 24px 80px}
.hero h1{font-size:62px; line-height:1.04; letter-spacing:-.01em; color:var(--ink)}
.hero .tag{font-size:19px; color:var(--muted); margin:22px 0 30px; max-width:46ch}
.ul{position:relative; white-space:nowrap}
.ul::after{content:""; position:absolute; left:-2px; right:-2px; bottom:-10px; height:12px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12'%3E%3Cpath d='M3 7 C 38 2 78 11 118 5 S 182 3 197 6' stroke='%23C2895A' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat;
  background-size:100% 100%}
.cta{display:inline-block; background:var(--gold); color:#fff;
  padding:14px 28px; border-radius:999px; font-weight:600; font-size:16px}
.cta:hover{text-decoration:none; opacity:.93}
.soon{color:var(--muted); font-size:14px; margin-left:16px}
.promise{color:var(--muted); font-size:14px; margin-top:20px; letter-spacing:.01em}

/* device frame */
.phone{width:268px; border-radius:34px; overflow:hidden;
  box-shadow:0 28px 64px rgba(58,46,42,.20); border:1px solid var(--line); background:#fff}
.phone img{display:block; width:100%}
.hero-shot{justify-self:center}
.tilt{transform:rotate(-2.5deg)}

/* scripture pull-quote */
.quote{padding:64px 0}
.quote .verse{font-size:30px; line-height:1.4; font-style:italic; color:var(--ink);
  max-width:24ch; margin:0 auto; text-align:center}
.quote .drop{float:left; font-size:78px; line-height:.74; padding:6px 10px 0 0;
  color:var(--gold); font-style:normal}
.quote .ref{text-align:center; margin-top:22px; color:var(--gold);
  font-size:13px; letter-spacing:.16em; text-transform:uppercase}

/* story rows with real screenshots */
.story{padding:40px 24px}
.row{display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:center; padding:48px 0}
.row.reverse{direction:rtl}
.row.reverse .row-copy{direction:ltr}
.row.reverse .phone{direction:ltr; justify-self:end}
.row .phone{width:248px; justify-self:start}
.row-copy h2{font-size:30px; line-height:1.15; margin-bottom:14px}
.row-copy p{font-size:17px; color:var(--muted); max-width:42ch}

/* hairline feature list (no cards, no icons) */
.more{padding:24px 24px 72px}
.lines{max-width:760px; margin:0 auto; border-top:1px solid var(--line)}
.line{display:grid; grid-template-columns:96px 1fr; gap:22px; padding:24px 4px;
  border-bottom:1px solid var(--line); align-items:baseline}
.line .m{color:var(--gold); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  font-family:Georgia,serif}
.line h3{font-size:18px; margin-bottom:5px}
.line p{color:var(--muted); font-size:16px}

/* plus: flat warm panel, hairline (no gradient) */
.plus{background:var(--gold-soft); border:1px solid var(--line); border-radius:22px;
  padding:52px 32px; text-align:center; margin:32px 0 16px}
.plus h2{font-size:32px}
.plus-sub{color:var(--muted); margin-top:6px}
.plus ul{list-style:none; display:inline-block; text-align:left; margin:22px 0}
.plus li{margin:8px 0; padding-left:26px; position:relative; color:var(--ink)}
.plus li:before{content:"\2713"; color:var(--gold); position:absolute; left:0; font-weight:700}
.plus .price{font-size:20px; font-weight:600; margin-top:6px}
.plus .small{color:var(--muted); font-size:14px; margin-top:4px}

/* footer */
footer{border-top:1px solid var(--line); padding:34px 0 28px; margin-top:40px}
.foot-top{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px}
.made{font-family:Georgia,serif; font-style:italic; color:var(--ink); font-size:17px}
.foot-links a{color:var(--muted); margin-left:20px}
.copy{color:var(--muted); font-size:13px; margin-top:14px}

/* legal pages */
.legal{max-width:720px; margin:0 auto; padding:56px 24px}
.legal .back{display:inline-block; margin-bottom:26px}
.legal h1{font-family:Georgia,serif; font-size:36px; margin-bottom:6px}
.legal .meta{color:var(--muted); margin-bottom:30px}
.legal h2{font-size:20px; margin:28px 0 8px}
.legal p{margin-bottom:14px; color:#4b3f39}

@media(max-width:780px){
  .hero{grid-template-columns:1fr; text-align:center; padding:56px 24px 36px; gap:36px}
  .hero h1{font-size:42px}
  .hero .tag{margin-left:auto; margin-right:auto}
  .hero-copy{order:1} .hero-shot{order:2}
  .soon{display:block; margin:14px 0 0}
  .quote .verse{font-size:25px}
  .row, .row.reverse{grid-template-columns:1fr; direction:ltr; gap:24px; text-align:center; padding:36px 0}
  .row .phone, .row.reverse .phone{justify-self:center}
  .row-copy p{margin-left:auto; margin-right:auto}
  .line{grid-template-columns:1fr; gap:6px}
  .foot-top{flex-direction:column; text-align:center}
  .foot-links a{margin:0 10px}
}