/* Daily prayer plan: the product's screens on Quiet Amen's tokens (brand/brand.css, v2 dark warm + one gold).
   One job per phone screen (agent/SITE.md "A brand's look comes from its category"): a quiz screen is one question;
   the result is one visual and one line, then the paywall (plan cards, three ticks, the price, one button);
   the daily screen is the verse, a big play button and five one-line steps. Nothing moves on a tap. */
.hide { display: none !important; }
.micro { font-size: 18px; color: var(--ink-2); margin: 10px 0 0; }

/* ---------- landing ---------- */
.lp-hero { position: relative; min-height: min(92svh, 860px); display: flex; align-items: flex-end; overflow: hidden; }
.lp-hero img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.lp-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--night) 6%, rgb(23 18 15 / .78) 36%, rgb(23 18 15 / .15) 72%); }
.lp-hero .wrap { position: relative; z-index: 1; width: 100%; padding-bottom: clamp(36px, 7vw, 80px); }
.lp-hero h1 { max-width: 13ch; font-size: clamp(40px, 4vw + 24px, 68px); }
.lp-hero .lede { font-size: 18px; max-width: 34ch; }
@media (min-width: 960px) { .lp-hero::after { background: linear-gradient(90deg, rgb(23 18 15 / .92) 0%, rgb(23 18 15 / .6) 42%, rgb(23 18 15 / 0) 70%); } .lp-hero { align-items: center; } }
.lp-sec { padding: clamp(56px, 8vw, 104px) 0; }
.lp-sec + .lp-sec { padding-top: 0; }
.lp-sec h2 { max-width: 18ch; }
.lp-two { display: grid; gap: 36px; align-items: center; }
@media (min-width: 960px) { .lp-two { grid-template-columns: 1fr 1fr; gap: 72px; } }
.ticks { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 14px; }
.ticks li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; font-size: 18px; }
.ticks svg { width: 24px; height: 24px; color: var(--gold); margin-top: 2px; }
.ticks b { font-weight: 700; }

/* the daily screen, also shown on the landing as the product */
.today-card { position: relative; overflow: hidden; border-radius: var(--r-sheet); background: var(--surface); box-shadow: var(--shadow-2); max-width: 440px; width: 100%; justify-self: center; }
.today-card .art { position: relative; height: 210px; }
.today-card .art img { width: 100%; height: 100%; object-fit: cover; }
.today-card .art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--surface) 2%, rgb(43 34 29 / .2) 60%); }
.today-card .in { position: relative; padding: 0 22px 22px; margin-top: -54px; }
.today-card .kick { font-weight: 700; color: var(--gold); font-size: 18px; margin: 0 0 4px; }
.today-card h3 { font-size: 28px; margin: 0 0 12px; }
.today-card blockquote { margin: 0 0 16px; font: 400 28px/1.3 var(--serif); }
.today-card cite { display: block; margin-top: 6px; font: 700 18px var(--font); font-style: normal; color: var(--ink-2); }
.steps { list-style: none; margin: 0; padding: 0; }
.steps li { display: grid; grid-template-columns: 26px 1fr auto; gap: 12px; align-items: center; min-height: 46px; padding: 6px 0; border-top: 1px solid var(--hair); font-size: 18px; color: var(--ink-2); }
.steps li b { font-weight: 700; color: var(--ink); }
.steps li span:last-child { font-variant-numeric: tabular-nums; }
.steps li .n { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 16px; font-weight: 700; box-shadow: inset 0 0 0 1.5px var(--ring); color: var(--ink-2); }
.steps li.on { color: var(--ink); }
.steps li.on .n { background: var(--gold); color: var(--on-gold); box-shadow: none; }
.steps li.done .n { background: var(--surface-2); color: var(--gold); box-shadow: none; }
.playbig { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center; margin: 4px 0 14px; text-decoration: none; color: var(--ink); }
.playbig .p { width: 64px; height: 64px; border-radius: 50%; background: var(--gold); color: var(--on-gold); display: grid; place-items: center; }
.playbig .p svg { width: 28px; height: 28px; margin-left: 3px; }
.playbig b { display: block; font-size: 18px; }
.playbig span { color: var(--ink-2); font-size: 16px; }

/* ---------- app shell: quiz, player, home, result ---------- */
body.app { min-height: 100dvh; }
.shell { max-width: 560px; margin: 0 auto; min-height: 100dvh; display: flex; flex-direction: column; padding: 0 var(--gut); }
@media (min-width: 1024px) {
  .shell.split { max-width: 1080px; display: grid; grid-template-columns: minmax(0, 1fr) 420px; grid-template-rows: auto 1fr; column-gap: 64px; align-items: start; }
  .shell.split > .appbar { grid-column: 1 / -1; }
  .shell.split > .aside { grid-column: 2; grid-row: 2; position: sticky; top: 76px; padding-top: 12px; }
  .shell.split .dock { position: static; padding: 16px 0 0; background: none; }
  .shell.split > .qa-wrap { grid-column: 1; grid-row: 3; }
}
.appbar { position: sticky; top: 0; z-index: 10; display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 8px; min-height: 60px; background: var(--night); }
.appbar .icon { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 22px; background: transparent; color: var(--ink); cursor: pointer; text-decoration: none; }
@media (hover: hover) { .appbar .icon:hover { background: var(--night-2); } }
.appbar .icon svg { width: 24px; height: 24px; }
.appbar .mid { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.appbar .mid img { height: 20px; width: auto; }
.bar-track { width: 100%; max-width: 240px; height: 6px; border-radius: 99px; background: var(--surface); overflow: hidden; }
.bar-fill { height: 100%; width: 0; border-radius: 99px; background: var(--gold); transition: width 300ms var(--ease-out); }
.screen { display: flex; flex-direction: column; padding: 16px 0 calc(128px + env(safe-area-inset-bottom)); }
.screen h1, .screen .q { font: 400 clamp(30px, 2vw + 22px, 38px)/1.14 var(--serif); letter-spacing: -0.015em; margin: 8px 0 10px; color: var(--ink); }
.screen .help { color: var(--ink-2); margin: 0 0 20px; }
.opts { display: grid; gap: 10px; margin: 4px 0 0; }
.opt { display: grid; grid-template-columns: 1fr 26px; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 12px 22px; text-align: left;
  font: 700 18px/1.3 var(--font); color: var(--ink); background: var(--surface); border: 0; border-radius: var(--r-btn); cursor: pointer;
  box-shadow: inset 0 0 0 1.5px var(--hair); transition: box-shadow 160ms var(--ease-out), background-color 160ms; }
@media (hover: hover) { .opt:hover { box-shadow: inset 0 0 0 1.5px var(--ring); } }
.opt:active { transform: scale(.985); }
.opt .tick { width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--ring); display: grid; place-items: center; }
.opt.multi .tick { border-radius: 7px; }
.opt[aria-pressed="true"] { background: var(--surface-2); box-shadow: inset 0 0 0 2px var(--gold); }
.opt[aria-pressed="true"] .tick, .addon[aria-pressed="true"] .tick { background: var(--gold); box-shadow: none; }
.opt[aria-pressed="true"] .tick::after, .addon[aria-pressed="true"] .tick::after { content: ""; width: 10px; height: 6px; border: solid var(--on-gold); border-width: 0 0 2.5px 2.5px; rotate: -45deg; translate: 0 -1px; }
.opt small { display: block; color: var(--ink-2); font-size: 16px; font-weight: 400; margin-top: 2px; }
.dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: 14px var(--gut) calc(14px + env(safe-area-inset-bottom)); background: linear-gradient(to top, var(--night) 74%, rgb(23 18 15 / 0)); }
.dock-in { max-width: 560px; margin: 0 auto; display: grid; gap: 10px; }
.dock .btn { width: 100%; }
.dock .note { text-align: center; font-size: 16px; color: var(--ink-2); margin: 0; }
.fact { border-radius: var(--r-sheet); overflow: hidden; background: var(--surface); margin-top: 8px; }
.fact img { width: 100%; height: 220px; object-fit: cover; }
.fact .in { padding: 26px 24px 28px; }
.fact h2 { font-size: clamp(28px, 2vw + 20px, 34px); }
.fact p { color: var(--ink-2); margin: 0; }
.fact .scripture { color: var(--ink); margin: 16px 0 0; font-size: 21px; }
.fact cite { display: block; margin-top: 6px; color: var(--gold); font: 700 16px var(--font); font-style: normal; }
.loader { display: grid; gap: 18px; margin-top: 22px; }
.loader .row { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: center; font-size: 18px; color: var(--ink-2); min-height: 32px; }
.loader .dot { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--ring); }
.loader .row.on { color: var(--ink); font-weight: 700; }
.loader .row.on .dot { box-shadow: inset 0 0 0 3px var(--gold); }
.loader .row.done { color: var(--ink); }
.loader .row.done .dot { background: var(--gold); box-shadow: none; }
.field { display: grid; gap: 10px; margin-top: 8px; }
.err { color: var(--bad); font-weight: 700; margin: 6px 0 0; min-height: 1.5em; }
.err:empty { min-height: 0; margin: 0; }
.fine { font-size: 16px; color: var(--ink-2); margin: 10px 0 0; }

/* ---------- result: one visual and one line, then the paywall ---------- */
.res-head .who { font-weight: 700; color: var(--gold); margin: 8px 0 6px; }
.res-head .line { color: var(--ink-2); font-size: 19px; margin: 0; }
.path { margin: 24px 0 8px; padding: 22px 20px; border-radius: var(--r-card); background: var(--surface); }
.path .dots { display: grid; grid-template-columns: repeat(20, 1fr); gap: 5px; }
.path .dots i { aspect-ratio: 1; border-radius: 50%; background: var(--night-2); box-shadow: inset 0 0 0 1px var(--hair); }
.path .dots i.one { background: var(--gold); box-shadow: none; }
.path .ends { display: flex; justify-content: space-between; gap: 12px; margin-top: 14px; font-size: 16px; color: var(--ink-2); }
.path .ends b { color: var(--ink); display: block; font-size: 17px; }
.res-try { display: flex; gap: 12px; align-items: center; margin: 14px 0 6px; }
.paywall { margin-top: 26px; }
.paywall h2 { font-size: 30px; margin-bottom: 14px; }
.plans { display: grid; gap: 14px; margin: 18px 0 10px; }
.plan { position: relative; display: grid; grid-template-columns: 24px 1fr auto; gap: 14px; align-items: center; width: 100%; min-height: 80px; padding: 16px 20px; text-align: left;
  background: var(--surface); border: 0; border-radius: 20px; cursor: pointer; font: inherit; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--hair); }
.plan[aria-pressed="true"] { background: var(--surface-2); box-shadow: inset 0 0 0 2px var(--gold); }
.plan .tick { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--ring); }
.plan[aria-pressed="true"] .tick { box-shadow: inset 0 0 0 7px var(--gold); }
.plan .nm { font-weight: 700; font-size: 18px; display: block; }
.plan .sub { display: block; font-size: 16px; color: var(--ink-2); }
.plan .pr { text-align: right; font-weight: 700; font-size: 22px; font-variant-numeric: tabular-nums; }
.plan .pr s { display: block; font-size: 16px; font-weight: 400; color: var(--ink-2); }
.plan .flag { position: absolute; top: -12px; left: 18px; padding: 2px 10px; border-radius: 99px; background: var(--gold); color: var(--on-gold); font-size: 16px; font-weight: 700; }
.addon { display: grid; grid-template-columns: 24px 1fr auto; gap: 14px; align-items: center; width: 100%; padding: 14px 20px; margin: 0 0 6px; background: transparent; border: 0; border-radius: 18px; cursor: pointer; font: inherit; color: var(--ink); text-align: left; box-shadow: inset 0 0 0 1.5px var(--hair); }
.addon .tick { width: 22px; height: 22px; border-radius: 7px; box-shadow: inset 0 0 0 2px var(--ring); display: grid; place-items: center; }
.addon[aria-pressed="true"] { background: var(--surface-2); box-shadow: inset 0 0 0 2px var(--gold); }
.addon small { display: block; color: var(--ink-2); font-size: 16px; }
.gift { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 18px; border-radius: 16px; background: var(--gold-soft); color: var(--ink); font-weight: 700; margin: 4px 0 0; }
.gift .clock { font-variant-numeric: tabular-nums; color: var(--gold); }
.qa { margin-top: 30px; }
.qa-wrap { padding-bottom: 140px; }
@media (min-width: 1024px) { .qa-wrap { padding-bottom: 60px; } }

/* ---------- the player: verse + big play + five steps, the words below ---------- */
.pl-art { position: relative; height: 180px; margin: 4px calc(-1 * var(--gut)) 0; overflow: hidden; }
.pl-art img { width: 100%; height: 100%; object-fit: cover; }
.pl-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--night) 4%, rgb(23 18 15 / .25) 70%); }
.pl-head { position: relative; margin-top: -56px; }
.pl-head .kick { font-weight: 700; color: var(--gold); margin: 0 0 4px; }
.pl-head h1 { font: 400 clamp(30px, 2vw + 22px, 38px)/1.12 var(--serif); margin: 0 0 10px; }
.pl-verse { font: 400 21px/1.45 var(--serif); margin: 0 0 4px; }
.pl-ref { font-weight: 700; color: var(--ink-2); margin: 0 0 18px; font-size: 16px; }
.pl-play { display: grid; grid-template-columns: 76px 1fr; gap: 16px; align-items: center; margin: 4px 0 18px; }
.pl-btn { position: relative; width: 76px; height: 76px; border: 0; border-radius: 50%; background: var(--gold); color: var(--on-gold); display: grid; place-items: center; cursor: pointer; }
.pl-btn svg { width: 30px; height: 30px; }
.pl-btn .play-i { margin-left: 4px; }
.pl-btn:active { transform: scale(.96); }
.pl-play b { display: block; font-size: 19px; }
.pl-play span { color: var(--ink-2); font-size: 16px; }
.pl-words { margin-top: 16px; border-radius: var(--r-card); background: var(--surface); padding: 20px 20px 18px; min-height: 260px; }
.pl-words .stage { font-weight: 700; color: var(--gold); margin: 0 0 8px; font-size: 16px; }
.pl-words .say { margin: 0 0 12px; font-size: 19px; line-height: 1.6; }
.pl-words .say.scripture { font: 400 21px/1.55 var(--serif); }
.pl-words .q { font: 400 21px/1.4 var(--serif); margin: 6px 0 0; padding-top: 12px; border-top: 1px solid var(--hair); }
.pl-words .ref { font-weight: 700; color: var(--ink-2); margin: 0 0 8px; }
.quiet { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 28px; color: var(--ink-2); font-weight: 700; font-size: 16px; }
.ring { width: 28px; height: 28px; }
.ring circle { fill: none; stroke-width: 4; }
.ring .bg { stroke: var(--surface); }
.ring .fg { stroke: var(--gold); stroke-linecap: round; transform: rotate(-90deg); transform-origin: center; }
.ctrl { display: grid; grid-template-columns: 56px 1fr 56px; gap: 12px; align-items: center; }
.round { width: 56px; height: 56px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; background: var(--surface); color: var(--ink); }
.round svg { width: 24px; height: 24px; }
.round:active { transform: scale(.95); }
.round:disabled { opacity: .4; cursor: default; }
.versecard { border-radius: var(--r-card); background: var(--surface); padding: 26px 22px; margin: 16px 0; }
.versecard p { font: 400 22px/1.45 var(--serif); margin: 0; }
.versecard cite { display: block; margin-top: 10px; color: var(--gold); font: 700 16px var(--font); font-style: normal; }

/* ---------- the member's home ---------- */
.home-top h1 { font: 400 clamp(30px, 2vw + 22px, 38px)/1.12 var(--serif); margin: 8px 0 4px; }
.home-top p { margin: 0; color: var(--ink-2); }
.goal { border-radius: var(--r-card); background: var(--surface); padding: 22px; margin: 18px 0; }
.goal .row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.goal .n { font: 400 48px/1 var(--serif); font-variant-numeric: tabular-nums; }
.goal .of { color: var(--ink-2); font-weight: 700; }
.goal .bar-track { max-width: none; height: 10px; margin: 14px 0 10px; background: var(--night-2); }
.goal .streak { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.goal .streak svg { width: 20px; height: 20px; color: var(--gold); }
.goal .up { color: var(--ok); font-weight: 700; }
.goal p { margin: 0; color: var(--ink-2); }
.lentcard { border-radius: var(--r-card); background: var(--surface); padding: 20px 22px; margin: 18px 0; }
.lentcard .big { font: 400 40px/1 var(--serif); color: var(--gold); }
.lentcard p { color: var(--ink-2); }
.grid40 { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; margin: 12px 0 0; }
.grid40 a, .grid40 span { aspect-ratio: 1; min-height: 34px; display: grid; place-items: center; border-radius: 10px; font-size: 16px; font-weight: 700; text-decoration: none; color: var(--ink-2); background: var(--night-2); }
.grid40 .done { background: var(--gold); color: var(--on-gold); }
.grid40 .next { box-shadow: inset 0 0 0 2px var(--gold); color: var(--ink); background: var(--surface-2); }
.links { display: grid; margin: 18px 0 40px; }
.links svg { width: 22px; height: 22px; flex: none; color: var(--gold); }
.links a, .links button { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; border: 0; border-top: 1px solid var(--hair); background: none; padding: 0; color: var(--ink); text-decoration: none; font: 700 18px var(--font); cursor: pointer; text-align: left; }

/* ---------- journal (print: light paper) ---------- */
.jpage { background: #fffdf9; color: #221a1d; border-radius: 6px; padding: 36px 40px; margin: 0 auto 24px; max-width: 760px; min-height: 900px; display: flex; flex-direction: column; }
.jpage h2, .jpage .scripture, .jpage p { color: #221a1d; }
.jpage .jday { font-weight: 700; color: #8a5a12; }
.jpage .lines { flex: 1; margin-top: 18px; min-height: 480px; }
@media print {
  .top, .foot, .noprint { display: none !important; }
  html, body { background: #fff; }
  .jpage { border-radius: 0; margin: 0; page-break-after: always; min-height: 96vh; padding: 0; }
}
/* The offer after the free day 1 (pray.js offerAfterDay1): a plain card, not scripture type. */
.keepcard { margin-top: 18px; padding: 20px; border-radius: var(--r-card); background: var(--surface-2); border: 1px solid rgba(226,173,77,.35); }
.keepcard p { font: 400 16px/1.5 var(--font); color: inherit; }
.keepcard .stage { font-weight: 700; color: var(--gold); }
.keepcard .help { color: rgba(245,238,229,.78); font-size: 15px; }
.keepcard a { color: var(--gold); }

/* The kit's paywall sheet (kit/plans.js) is light: dark text on it, and dark text on the gold Pay button. */
body .kit-pw h2 { color: #1c140d; font-family: var(--serif); font-weight: 400; font-size: 22px; }
body .kit-pw .kit-pw-pay { color: var(--on-gold); }


/* ---------- desktop: never a phone column (material/design/layout.md "Desktop composition") ---------- */
.page-side { display: none; }
@media (min-width: 1024px) {
  .page:has(.page-side) { display: grid; grid-template-columns: minmax(0, 1fr) 320px; column-gap: 72px; align-items: start; max-width: 1120px; }
  .page:has(.page-side) > * { grid-column: 1; }
  .page-side { display: block; grid-column: 2 !important; grid-row: 1 / span 60; position: sticky; top: 96px; }
  /* quiz: the question left, its answers right */
  body.quiz .shell { max-width: 1040px; }
  body.quiz .screen:has(.opts) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 64px; align-items: start; padding-top: 48px; }
  body.quiz .screen:has(.opts) > :not(.opts) { grid-column: 1; }
  body.quiz .screen:has(.opts) > .opts { grid-column: 2; grid-row: 1 / span 3; }
  body.quiz .dock { left: 50%; right: auto; width: 520px; }
  /* the player and the home: two columns */
  body.pray .shell, body.home .shell { max-width: 1120px; }
  body.pray .screen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 56px; align-items: start; }
  body.pray .screen > .pl-art { grid-column: 1 / -1; margin: 0; border-radius: var(--r-card); height: 240px; }
  body.pray .screen > .pl-head, body.pray .screen > .steps { grid-column: 1; }
  body.pray .screen > .pl-words { grid-column: 2; grid-row: 2 / span 2; margin-top: 0; position: sticky; top: 76px; }
  body.pray .dock-in { max-width: 560px; }
  body.home #home { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; align-items: start; }
  body.home #home > .home-top { grid-column: 1 / -1; }
  body.home #lost:not(.hide) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 56px; align-items: center; min-height: 60vh; }
}
.page-side .card p { margin: 0 0 12px; }
/* v2 price moment (2026-11-02): free day first, timeline under the pay choice (Pray.com's "today / then"). */
.free-line { font-size: 16px; line-height: 1.5; color: var(--ink-2); margin: -4px 0 16px; }
.when { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 6px; font-size: 15px; color: var(--ink-2); }
.when li { display: grid; grid-template-columns: 112px 1fr; gap: 10px; }
.when b { color: var(--ink); font-weight: 700; }
.dock .btn--secondary { min-height: 48px; }
.renew-note { font-size: 15px; color: var(--ink-2); margin: 10px 0 0; }