/* The Quiet Time site. One theme (dark, like the app), one accent, one shape system:
   pill buttons, 20px cards. Fonts are the app's own: Satoshi for UI, Fraunces for scripture. */

@font-face { font-family: "Satoshi"; src: url("fonts/satoshi_regular.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("fonts/satoshi_medium.otf") format("opentype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("fonts/satoshi_bold.otf") format("opentype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("fonts/satoshi_black.otf") format("opentype"); font-weight: 900; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("fonts/fraunces_regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }

:root {
  color-scheme: dark;
  --ink: #0b0e14;
  --ink-2: #12151e;
  --cream: #f2f0eb;
  --muted: #a3a3ab;
  --line: rgb(242 240 235 / 0.12);
  --dawn: #e9a86a;
  --radius: 20px;
  --max: 1160px;
  --pad: clamp(20px, 5vw, 48px);
}

* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--ink);
  color: var(--cream);
  font-family: "Satoshi", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }

/* Navigation: one line, 64px */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 10; height: 64px; background: rgb(11 14 20 / 0.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.nav .wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; }
.brand { font-weight: 900; font-size: 18px; letter-spacing: -0.3px; text-decoration: none; }
.nav nav { display: flex; gap: clamp(16px, 3vw, 32px); font-size: 15px; font-weight: 500; }
.nav nav a { color: var(--muted); text-decoration: none; transition: color 0.2s; }
.nav nav a:hover, .nav nav a:focus-visible { color: var(--cream); }

/* Buttons: pill */
.btn { display: inline-flex; align-items: center; justify-content: center; height: 54px; padding: 0 30px; border-radius: 999px; background: var(--cream); color: var(--ink); font-weight: 700; font-size: 16px; text-decoration: none; white-space: nowrap; transition: transform 0.2s, background 0.2s; }
.btn:hover { background: #fff; }
.btn:active { transform: scale(0.98); }
:focus-visible { outline: 2px solid var(--dawn); outline-offset: 3px; }

/* Hero */
.hero { position: relative; min-height: 100dvh; padding: 112px 0 64px; display: flex; align-items: center; overflow: hidden; isolation: isolate; }
.hero-photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(11 14 20 / 0.92), rgb(11 14 20 / 0.55) 55%, rgb(11 14 20 / 0.25)), linear-gradient(180deg, transparent 60%, var(--ink)); }
.hero-grid { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
h1 { font-weight: 900; font-size: clamp(44px, 5.4vw, 76px); line-height: 1; letter-spacing: -0.035em; max-width: 13ch; }
.hero p { margin-top: 24px; font-size: clamp(17px, 1.6vw, 20px); color: rgb(242 240 235 / 0.82); max-width: 34ch; }
.hero .btn { margin-top: 36px; }

/* Phone: the app's real screenshots */
.phone { width: min(300px, 100%); border-radius: 46px; padding: 9px; background: #1b1f29; box-shadow: 0 40px 80px rgb(0 0 0 / 0.55), inset 0 0 0 1px rgb(255 255 255 / 0.09); }
.phone img { border-radius: 38px; width: 100%; height: auto; }
.hero .phone { margin-left: auto; }

section { padding: clamp(72px, 11vw, 140px) 0; }
h2 { font-weight: 900; font-size: clamp(30px, 4vw, 52px); line-height: 1.05; letter-spacing: -0.03em; max-width: 18ch; }
.lead { margin-top: 18px; color: var(--muted); max-width: 46ch; }

/* The morning: sticky heading, eight steps in two columns */
.morning-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(32px, 7vw, 96px); align-items: start; }
.morning-grid .intro { position: sticky; top: 112px; }
.steps { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 40px 36px; }
.steps strong { display: block; font-size: 21px; font-weight: 700; letter-spacing: -0.01em; }
.steps span { display: block; margin-top: 6px; color: var(--muted); font-size: 16px; line-height: 1.5; }

/* What it does: bento, four cells */
.bento { margin-top: 56px; display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(280px, auto); gap: 16px; }
.cell { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--ink-2); border: 1px solid var(--line); padding: clamp(24px, 3vw, 36px); isolation: isolate; }
.cell h3 { font-size: clamp(22px, 2.4vw, 30px); font-weight: 900; letter-spacing: -0.02em; line-height: 1.12; max-width: 18ch; }
.cell p { margin-top: 12px; color: rgb(242 240 235 / 0.76); max-width: 40ch; font-size: 16px; }
.c-read { grid-column: span 3; grid-row: span 2; display: flex; flex-direction: column; justify-content: space-between; gap: 28px; }
.c-read .phone { width: min(270px, 80%); margin: 0 auto -90px; }
.c-verse { grid-column: span 3; display: flex; flex-direction: column; justify-content: flex-end; color: var(--cream); }
.c-keep { grid-column: span 3; display: grid; grid-template-columns: 1fr 150px; gap: 20px; }
.c-keep .phone { width: 150px; align-self: end; margin-bottom: -70px; border-radius: 30px; padding: 6px; }
.c-keep .phone img { border-radius: 24px; }
.c-nudge { grid-column: span 6; min-height: 300px; display: flex; flex-direction: column; justify-content: flex-end; }
.bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(11 14 20 / 0.15), rgb(11 14 20 / 0.82)); }
.cell .verse { max-width: 22ch; color: var(--cream); font-family: "Fraunces", Georgia, serif; font-size: clamp(24px, 2.8vw, 34px); line-height: 1.3; margin-bottom: 20px; }

/* What stays yours: three plain statements */
.yours { background: var(--ink-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.promises { margin-top: 48px; display: grid; gap: 0; max-width: 760px; }
.promises div { padding: 28px 0; border-top: 1px solid var(--line); }
.promises div:first-child { border-top: 0; padding-top: 0; }
.promises strong { display: block; font-size: clamp(22px, 2.6vw, 30px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.promises span { display: block; margin-top: 8px; color: var(--muted); max-width: 56ch; }
.link { display: inline-block; margin-top: 36px; font-weight: 700; text-decoration-color: var(--dawn); text-underline-offset: 6px; text-decoration-thickness: 2px; }

/* Closing */
.closing { position: relative; min-height: 70dvh; display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; padding: 0; }
.closing .wrap { width: 100%; padding-bottom: clamp(48px, 8vw, 96px); padding-top: 160px; }
.closing h2 { max-width: 12ch; }

footer { padding: 40px 0 56px; border-top: 1px solid var(--line); color: var(--muted); font-size: 15px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 16px 40px; justify-content: space-between; align-items: baseline; }
footer nav { display: flex; gap: 24px; }
footer a { text-decoration: none; }
footer a:hover { color: var(--cream); }
.credit { width: 100%; font-size: 13px; opacity: 0.8; }

/* Legal pages */
.doc { padding: 128px 0 96px; }
.doc .wrap { max-width: 740px; }
.doc h1 { font-size: clamp(36px, 5vw, 56px); max-width: none; }
.doc .updated { margin-top: 12px; color: var(--muted); font-size: 15px; }
.doc h2 { font-size: 24px; letter-spacing: -0.015em; margin-top: 52px; max-width: none; }
.doc p, .doc li { margin-top: 14px; color: rgb(242 240 235 / 0.86); }
.doc ul { padding-left: 22px; }
.doc li { margin-top: 8px; }
.doc a { text-decoration-color: var(--dawn); text-underline-offset: 3px; }
.doc .summary { margin-top: 28px; padding: 22px 26px; border-radius: var(--radius); background: var(--ink-2); border: 1px solid var(--line); }
.doc .summary p { margin-top: 0; }

/* Entrance: only where motion is welcome */
@media (prefers-reduced-motion: no-preference) {
  .hero-grid > * { animation: rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) both; }
  .hero-grid > :nth-child(2) { animation-delay: 0.12s; }
  @keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  .js .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
  .js .reveal.in { opacity: 1; transform: none; }
}

@media (max-width: 900px) {
  .hero { min-height: auto; padding-top: 104px; }
  .hero-grid, .morning-grid { grid-template-columns: 1fr; }
  .hero .phone { margin: 24px auto 0; }
  .morning-grid .intro { position: static; }
  .steps { grid-template-columns: 1fr; gap: 28px; }
  .bento { grid-template-columns: 1fr; }
  .c-read, .c-verse, .c-keep, .c-nudge { grid-column: auto; grid-row: auto; }
  .c-keep { grid-template-columns: 1fr; }
  .c-keep .phone { margin: 0 auto -70px; width: 190px; }
  .c-read .phone { margin-bottom: -60px; }
}
@media (max-width: 480px) {
  .nav nav a:first-child { display: none; }
}