/* ============================================================================
   Pray by PastSunday. The stylesheet for the /pray routes.

   THIS FILE IS DELIBERATELY NOT PART OF THE SITE BUNDLE.

   It is plain hand-written CSS served straight out of /public, and it is
   loaded by exactly one route: app/Route/Pray.elm links it itself. It is
   NOT @imported by style.css and NOT processed by Tailwind, so:

     - none of it ships to pastsunday.com's other pages, and
     - none of Pray's tokens, class names, or keyframes can reach them.

   Isolation contract, both directions:

     1. Every selector is scoped under `.pray-page` (the route's root
        wrapper), so nothing here can style another page even if the file
        were somehow loaded elsewhere.
     2. Every custom property is `--pray-*` / `--s-*` (shot-local) so it
        cannot collide with style.css's `--color-*` @theme tokens. Pray does
        NOT read the shared tokens: the page is a dark page by design, and
        `.dark` is only ever applied on /app + /watchtower, so reading
        `--color-surface` here would resolve to the LIGHT value.
     3. Every @keyframes is `pray-*`. Keyframe names are global in CSS and
        style.css already owns `glowPulse`, `pulse`, `ps-*`.

   The one thing it does borrow from style.css is the @font-face families
   (Newsreader, Geist), which are declared there and loaded on every page.

   Values are measured off the design reference (Direction D). Where the
   reference asked for a font we do not self-host (Hanken Grotesk for sans,
   JetBrains Mono for mono), this uses the repo's own stack instead rather
   than adding a Google Fonts request the CSP would block.
   ============================================================================ */

/* ── the ground ──────────────────────────────────────────────────────────── */

/* The page's own palette. `ink` is the shared --color-foreground (Pew #1b2746)
   used as a background; the on-ink text ramp below is what sits on it, and it
   is measured for WCAG 2.2 AA on that ground (contrast in the comments). */
.pray-page {
  --pray-ink: #1b2746; /* Pew. This page's ground */
  --pray-ink-deep: #0d1424; /* One step deeper, for the sticky nav bar. Same
                               value as `.dark`'s --color-background in
                               style.css and the phone screens' --s-bg. */
  --pray-paper: #f2f6fc; /* Mist. The one light band */
  --pray-surface: #ffffff;
  --pray-ink-body: #41507a; /* Pew · 70, for copy on the light band */
  --pray-ink-mute: #7e889f; /* placeholder on the light band */

  --pray-on-ink: #dce6f5; /* body + footer weight on ink, 12.9:1 */
  --pray-on-ink-muted: #a9bad6; /* section body copy, 7.5:1 */
  --pray-on-ink-subtle: #8ca3c4; /* notes, footer, 5.7:1 */

  --pray-sky: #4c8fcc;
  --pray-sky-deep: #2c6ba6; /* the italic clause on the LIGHT band */
  --pray-sky-tint: #bbd9f2; /* the italic clause on ink, 10:1 */
  --pray-flame: #e8662e;
  --pray-flame-lift: #f0793c; /* the dark-ground Flame (the Echo Arc) */
  --pray-flame-deep: #c24c1c; /* Ember. Keeps white labels at AA */
  --pray-flame-tint: #f6a675;

  --pray-rule: rgba(27, 39, 70, 0.15); /* on the light band */
  --pray-ink-rule: rgba(187, 217, 242, 0.16);
  --pray-ink-rule-strong: rgba(187, 217, 242, 0.3);

  --pray-serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --pray-sans: "Geist", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --pray-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  background: var(--pray-ink);
  color: var(--pray-on-ink);
  font-family: var(--pray-sans);
  font-size: 17px;
  line-height: 1.55;
}

/* style.css paints `body { background: var(--color-background) }`, i.e. Mist.
   Without this the overscroll gutter above/below the ink page flashes light.
   `:has()` keeps the rule inert on every other page. */
body:has(.pray-page) {
  background: #1b2746;
}

/* Fragment offset for the sticky nav. `scroll-padding-top` belongs to the
   scrollport, which is the root element, so it cannot be set from inside
   `.pray-page`; `:has()` scopes it to these pages and leaves the site's own
   48px alone everywhere else.

   The nav measures 103px at desktop and 85px once its padding tightens on a
   phone, so 136 clears the taller one with 33px to spare and the shorter one
   with 51px. This governs every in-page target on a Pray page, not just the
   signup form: the skip link's jump to `#main` clears the bar too.

   Note this only affects a scroll the browser actually performs, which today
   means a cold load of /pray#signup or arriving from one of the legal pages.
   A same-page click on "Get notified" does not scroll at all, because
   elm-pages intercepts bare fragment links and pushes the URL without
   scrolling, and its `onPageChange` does not fire when only the hash changes.
   That is site-wide (the homepage's own sticky CTA behaves the same) and the
   fix lives in shared plumbing, not here. */
html:has(.pray-page) {
  scroll-padding-top: 136px;
}

.pray-page a {
  color: var(--pray-sky-tint);
  text-decoration: none;
}

.pray-page a:hover {
  color: var(--pray-flame-tint);
}

/* A visible focus ring on the ink ground. The browser default outline is
   drawn in the OS accent and reads weakly against deep navy. */
.pray-page a:focus-visible,
.pray-page button:focus-visible,
.pray-page input:focus-visible {
  outline: 2px solid var(--pray-sky-tint);
  outline-offset: 2px;
  border-radius: 4px;
}

.pray-page ::selection {
  background: var(--pray-sky-tint);
  color: var(--pray-ink);
}

.pray-page .it {
  font-style: italic;
}

/* The page-width wrapper: 1180px max, like `UI.Container`, written locally so a
   Pray page depends on nothing from the site's stylesheet for its own layout.

   The gutter grows, which is where this departs from the site's flat 24px. Up
   to the 1180 cap the gutter IS the page's whole left margin, so a flat 24px
   left the copy 24px off the screen edge on every iPad Pro width (834, 1024,
   1032, 1194 all sit at or under the cap). 24px is right on a phone and much
   too tight on a 1024pt tablet. Past the cap the centring adds margin of its
   own, so the value only has to carry the range below it. */
.pray-page .wrap {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

@media (min-width: 641px) {
  .pray-page .wrap {
    padding: 0 48px;
  }
}

/* Visually hidden, still read aloud. Local rather than Tailwind's `sr-only`
   so this page's markup depends on nothing from the site bundle. */
.pray-page .sronly {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.pray-page .eyebrow {
  font-family: var(--pray-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pray-sky-tint);
}

/* Skip link. The page draws its own nav rather than the site header, so it
   carries its own skip-to-content affordance too. Off-canvas until focused. */
.pray-page .skip {
  position: absolute;
  left: 16px;
  top: 8px;
  z-index: 50;
  transform: translateY(-4rem);
  transition: transform 0.15s;
  background: var(--pray-sky-tint);
  color: var(--pray-ink);
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
}

.pray-page .skip:focus {
  transform: translateY(0);
  color: var(--pray-ink);
}

/* ── buttons ─────────────────────────────────────────────────────────────── */

.pray-page .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-family: inherit;
  font-weight: 600;
  font-size: 15.5px;
  padding: 12px 20px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
}

/* The reference drew this as a gradient from #F0793C, which measures 3.27:1
   for white at 15.5px/600, which is under AA. The gradient is pinned so no stop is
   lighter than Ember (#C24C1C, 4.84:1 with white), which keeps the lift
   without failing the label. */
.pray-page .btn.primary {
  background: linear-gradient(160deg, var(--pray-flame-deep), #ab4218);
  border-color: var(--pray-flame-deep);
  color: #fff;
  box-shadow:
    0 1px 2px rgba(194, 76, 28, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.26);
}

.pray-page .btn.primary:hover:not(:disabled) {
  background: linear-gradient(160deg, #ab4218, #8f3712);
  color: #fff;
}

.pray-page .btn.primary:disabled {
  opacity: 0.65;
  cursor: default;
}

.pray-page .btn.ghost {
  background: transparent;
  border: 1px solid var(--pray-ink-rule-strong);
  color: var(--pray-on-ink);
}

.pray-page .btn.ghost:hover {
  border-color: var(--pray-sky-tint);
  color: #fff;
}

/* ── nav ─────────────────────────────────────────────────────────────────── */

/* Sticky, on the deeper ground, so the bar reads darker than the Pew page and
   holds its own edge as the page scrolls under it. */
.pray-page .pray-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--pray-ink-deep);
  border-bottom: 1px solid var(--pray-ink-rule);
}

.pray-page .pray-nav .bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-block: 26px;
}

/* `flex: none`, NOT `min-width: 0`. Every child of the lockup is itself
   `flex: none`, so a `min-width: 0` container gets squeezed narrower than its
   own contents and the last child ("Pray") silently paints over the CTA beside
   it, while the container's own box still measures as if it fit. Refusing to
   shrink turns that into honest overflow, which a scrollWidth check catches. */
.pray-page .lock {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: none;
}

/* The PastSunday half of the lockup, now a link to the site. Its own flex row
   with the same 7px rhythm `.lock` uses between its three children, and
   `flex: none` for the same reason `.lock` has it: a shrinkable box would be
   squeezed narrower than its contents and overlap what sits beside it. */
.pray-page .lock .mark {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: none;
}

/* Both halves are links. A subtle dim rather than a colour change, because
   recolouring a wordmark fights the brand, and the generic `.pray-page a:hover`
   would otherwise turn the word "Pray" Flame tint. `ps-button-no-underline` on
   the markup opts out of style.css's blanket nav-link underline, which would
   underline "Pray" on hover. Focus rings come from the shared
   `a:focus-visible` rule, so both halves stay keyboard-visible. */
.pray-page .lock .mark,
.pray-page .lock .app {
  transition: opacity 0.15s;
}

.pray-page .lock .mark:hover,
.pray-page .lock .app:hover {
  opacity: 0.72;
  color: #fff;
}

.pray-page .lock .arcmark {
  display: block;
  flex: none;
}

/* 26px, not the reference's 30: the arc sits beside a 20px wordmark and 20px
   "Pray", and at 30 it read as the loudest thing in the bar. Its viewBox is
   wider than it is tall (176:124), so height drives the visual weight. */
.pray-page .lock .arcsvg {
  display: block;
  height: 26px;
  width: auto;
}

/* BRAND §4's one sanctioned mark motion. style.css animates the site's own
   spark on `svg[viewBox="27 72 166 95"] > circle:first-of-type`; this mark has
   a different viewBox and carries its own halo, so it animates itself. */
.pray-page .lock .pray-glow {
  transform-box: fill-box;
  transform-origin: center;
  animation: pray-glow-pulse 2.8s ease-in-out infinite;
}

@keyframes pray-glow-pulse {
  0%,
  100% {
    transform: scale(0.92);
    opacity: 0.55;
  }
  50% {
    transform: scale(1.12);
    opacity: 1;
  }
}

.pray-page .lock .words {
  display: block;
  flex: none;
}

.pray-page .lock .words img {
  display: block;
  height: 20px;
  width: auto;
}

.pray-page .lock .div {
  width: 1px;
  height: 20px;
  background: rgba(187, 217, 242, 0.28);
  flex: none;
}

.pray-page .lock .app {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--pray-serif);
  font-size: 20px;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
}

.pray-page .lock .app img {
  height: 24px;
  width: 24px;
  border-radius: 5.5px;
  display: block;
}

.pray-page .pray-nav .right {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 14.5px;
  color: var(--pray-on-ink-muted);
  flex: none;
}

/* ── the breath tide ─────────────────────────────────────────────────────── */

/* The app's own BreathTide on the app's own BreathClock, so the page and the
   app breathe on one 10s clock.

   Full-bleed (`left: 0; right: 0`), the way the app draws its own `.btide`,
   rather than the reference's fixed `width: 1200px`. That width stopped short
   of the viewport past ~1200px and left a hard vertical seam down each side of
   the gradient on any larger monitor.

   The horizontal mask feathers the outer 22% at each end, so a wide screen
   reads as light gathering under the section rather than a band running edge
   to edge. The vertical ramp is untouched, and stays a LINEAR gradient off the
   bottom rather than a radial bloom: that is the app's own tide, and matching
   it is what makes the page and the app look like one thing. */
.pray-page .tide {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 430px;
  background: linear-gradient(
    0deg,
    rgba(76, 143, 204, 0.26) 0,
    rgba(76, 143, 204, 0.08) 54%,
    rgba(76, 143, 204, 0) 100%
  );
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%, #000 78%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 22%, #000 78%, transparent 100%);
  transform-origin: 50% 100%;
  animation: pray-tide 10s ease-in-out infinite;
  pointer-events: none;
}

@keyframes pray-tide {
  0%,
  100% {
    transform: scaleY(0.34);
    opacity: 0.55;
  }
  45% {
    transform: scaleY(1);
    opacity: 1;
  }
}

/* The two headline halves ghost at .16 on the app's inhale/exhale tracks.
   Deliberately asymmetric, not a symmetrical fade. */
@keyframes pray-breath-in {
  0%,
  3% {
    opacity: 0.16;
  }
  38%,
  46% {
    opacity: 1;
  }
  56%,
  100% {
    opacity: 0.16;
  }
}

@keyframes pray-breath-out {
  0%,
  44% {
    opacity: 0.16;
  }
  58%,
  93% {
    opacity: 1;
  }
  100% {
    opacity: 0.16;
  }
}

/* ── hero ────────────────────────────────────────────────────────────────── */

.pray-page .hero {
  position: relative;
  overflow: hidden;
  padding: 70px 0 0;
  text-align: center;
}

.pray-page .hero .inner {
  position: relative;
  max-width: 860px;
  margin: 0 auto;
  padding-bottom: 74px;
}

.pray-page .hero h1 {
  font-family: var(--pray-serif);
  font-weight: 500;
  font-size: clamp(38px, 5.4vw, 62px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 26px 0 0;
}

.pray-page .hero h1 span {
  display: block;
}

.pray-page .hero h1 .in {
  animation: pray-breath-in 10s ease-in-out infinite;
}

.pray-page .hero h1 .out {
  font-style: italic;
  color: var(--pray-sky-tint);
  animation: pray-breath-out 10s ease-in-out infinite;
}

.pray-page .hero .lede {
  font-size: 19px;
  line-height: 1.62;
  color: var(--pray-on-ink-muted);
  max-width: 31em;
  margin: 24px auto 0;
  text-wrap: pretty;
}

.pray-page .flamemark {
  display: block;
  width: 104px;
  height: 104px;
  margin: 0 auto 6px;
}

/* ── the signup forms ────────────────────────────────────────────────────── */

.pray-page .signup {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 430px;
}

.pray-page .hero .signup,
.pray-page .close .signup {
  margin: 30px auto 0;
}

/* `flex-basis: auto`, deliberately: the field grows to fill the row next to the
   button, but basis resolves against the MAIN axis, and at <=640 this form
   becomes a column, where any fixed basis would set the field's HEIGHT. */
.pray-page .signup input {
  flex: 1 1 auto;
  min-width: 0;
  font-family: inherit;
  font-size: 15.5px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--pray-ink-rule-strong);
  border-radius: 8px;
  padding: 12px 14px;
  color: #fff;
}

.pray-page .signup input::placeholder {
  color: #7e90ae;
}

.pray-page .signup input:focus {
  outline: none;
  border-color: var(--pray-sky-tint);
  box-shadow: 0 0 0 3px rgba(187, 217, 242, 0.16);
}

.pray-page .signup input[aria-invalid="true"] {
  border-color: var(--pray-flame-tint);
}

/* The note and the consent line each take the full row under the field +
   button pair, so the visual order is: input + button, note, consent. */
.pray-page .note,
.pray-page .consent,
.pray-page .fielderror {
  flex-basis: 100%;
  font-size: 13px;
  line-height: 1.5;
  color: var(--pray-on-ink-subtle);
  margin: 12px 0 0;
}

.pray-page .consent {
  font-size: 12px;
  margin-top: 4px;
}

.pray-page .consent a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pray-page .consent a:hover,
.pray-page .consent a:focus-visible {
  color: #fff;
}

.pray-page .fielderror {
  margin-top: 4px;
  color: var(--pray-flame-tint);
}

/* Rendered in place of the form once a signup is accepted. */
.pray-page .signedup {
  max-width: 430px;
  margin: 30px auto 0;
  border: 1px solid var(--pray-ink-rule-strong);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  padding: 22px 24px;
  font-family: var(--pray-serif);
  font-size: 18.5px;
  line-height: 1.4;
  color: #fff;
}

/* The honeypot: a decoy field kept off-screen, out of the tab order, and
   hidden from assistive tech. A person never sees or fills it. */
.pray-page .honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── bands ───────────────────────────────────────────────────────────────── */

.pray-page .band {
  border-top: 1px solid var(--pray-ink-rule);
}

/* Copy left, phone right. The phone column measures the chassis rather than
   taking a share of the row, so the chassis lands on the same right-hand grid
   line the rest of the page uses, and `phoneEdgeClearance` below insets it a
   deliberate amount from there.

   Centring the chassis in an oversized fractional column is the tempting
   version and it is wrong: at 1180 it left the copy 24px from the viewport
   edge, in line with the nav lockup and the footer, while the phone floated
   143px in from the other side. The page read lopsided. Breathing room belongs
   in the gap between the columns, not in the page margin. */
.pray-page .band .grid {
  display: grid;
  grid-template-columns: 1fr max-content;
  gap: 56px;
  align-items: center;
  padding-block: 60px;
}

/* The flipped bands put the phone in column 1, and grid column sizes do not
   follow `order`, so the pair has to be mirrored explicitly here. */
.pray-page .band.flip .grid {
  grid-template-columns: max-content 1fr;
}

/* "Come back to it" sits copy-left / phone-right exactly like the two bands
   above it, so it needs no override at all: the base `.band .grid` rule gives
   it the same `1fr 1.05fr` split, and `justify-self: center` on the phone
   leaves the same air either side of the chassis. A `max-content` phone column
   would size to the chassis exactly and pin it against the page margin with
   nothing to breathe into. */

/* One measure for the whole copy block, so the heading, the body and the states
   key share a single right edge.

   Without this the copy column is whatever is left after the phone (635px at
   1101, 586px at 1024) while the body carries its own 31em cap and the states
   key another, so the heading ran a long single line 74px past the paragraph
   beneath it and the column read ragged. The leftover column width becomes
   quiet space before the gap instead, which is where it belongs. 512px is the
   body's own 31em measure at 16.5px, stated in px so every child lands on it
   regardless of its font size. */
.pray-page .band .copy,
.pray-page .breath .inner {
  max-width: 512px;
}

.pray-page .band .eyebrow {
  display: block;
  margin-bottom: 12px;
}

.pray-page .band h2 {
  font-family: var(--pray-serif);
  font-weight: 500;
  font-size: clamp(30px, 3.4vw, 38px);
  line-height: 1.08;
  letter-spacing: -0.016em;
  color: #fff;
  margin: 0;
}

.pray-page .band h2 .it {
  color: var(--pray-sky-tint);
}

.pray-page .band p {
  font-size: 16.5px;
  line-height: 1.62;
  color: var(--pray-on-ink-muted);
  margin: 15px 0 0;
  max-width: 31em;
  text-wrap: pretty;
}

/* Phone right, copy left by default; the flipped band puts the copy second in
   source order and pulls it back to column 2 at desktop, so copy always sits
   above its phone once the grid collapses. */
.pray-page .band.flip .copy {
  order: 2;
}

.pray-page .phone {
  background: #060b18;
  border-radius: 38px;
  padding: 9px;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.35),
    0 26px 60px rgba(0, 0, 0, 0.45);
  justify-self: center;
}

/* Edge clearance. The chassis carries a wide soft shadow, so sitting it exactly
   on the container's edge reads as clipped rather than aligned. 48px is enough
   for the shadow to fall and for the phone to feel placed, while staying close
   enough to the page's grid that the band does not look lopsided against the
   copy on the far side. It goes on the outer side only: the inner side already
   has the 56px column gap. */
.pray-page .band:not(.flip) .phone {
  margin-inline-end: 48px;
}

.pray-page .band.flip .phone,
.pray-page .breath .phone {
  margin-inline-start: 48px;
}

/* ── the three prayer states ─────────────────────────────────────────────── */

/* A key, not three cards. It reads as the legend for the Status control on the
   phone beside it, and cards at that size out-shouted the phone. */
.pray-page .states {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 28px;
  max-width: 31em;
}

.pray-page .st {
  display: grid;
  grid-template-columns: 11px 1fr;
  column-gap: 13px;
  align-items: start;
}

/* The dot treatments are the app's own: Praying is Sky, Answered is the one
   Flame fill, Yielded is the outline. The Yielded dot is never filled.
   `margin-top` sits it on the heading's cap line. */
.pray-page .st .dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--pray-sky-tint);
  margin-top: 8px;
}

.pray-page .st.a .dot {
  background: var(--pray-flame);
}

.pray-page .st.y .dot {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--pray-flame);
}

.pray-page .st h3 {
  font-family: var(--pray-serif);
  font-weight: 500;
  font-size: 19px;
  color: #fff;
  margin: 0;
  letter-spacing: -0.01em;
}

/* Second column, under the heading rather than under the dot. */
.pray-page .st p {
  grid-column: 2;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--pray-on-ink-muted);
  margin: 3px 0 0;
  max-width: none;
}

/* ── breathe and pray ────────────────────────────────────────────────────── */

.pray-page .breath {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--pray-ink-rule);
}

/* Phone left, copy right. Same column pair as every other band, with the copy
   moved to column 2 by `order` below, which is exactly how the flipped band
   above does it: all four phone bands then centre their chassis in an
   identically sized column and breathe the same amount. Never a pinned px
   column, because the chassis is --w + 18px (9px of bezel each side) and a
   column pinned to --w would leave the phone overhanging it. */
.pray-page .breath .grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 56px;
  align-items: center;
  padding-block: 66px 70px;
}

/* The copy keeps source order and moves to column 2 at desktop, so it lands
   above the phone once the grid collapses (see the 820 block). */
.pray-page .breath .inner {
  position: relative;
  order: 2;
}

.pray-page .breath .tide {
  height: 330px;
}

/* Both halves rest at full opacity here. The breathing is the app's job on
   this one, and the phone beside it is already doing it. */
.pray-page .breath .line {
  font-family: var(--pray-serif);
  font-weight: 500;
  font-size: clamp(34px, 4.2vw, 46px);
  line-height: 1.14;
  letter-spacing: -0.018em;
  color: #fff;
  margin: 22px 0 0;
}

.pray-page .breath .line span {
  display: block;
}

.pray-page .breath .line .out {
  font-style: italic;
  color: var(--pray-sky-tint);
}

.pray-page .breath .src {
  font-family: var(--pray-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pray-sky-tint);
  margin: 22px 0 0;
}

.pray-page .breath .note2 {
  font-size: 16.5px;
  line-height: 1.62;
  color: var(--pray-on-ink-muted);
  max-width: 29em;
  margin: 20px 0 0;
  text-wrap: pretty;
}

/* ── the pair: reminder / widget ─────────────────────────────────────────── */

.pray-page .two {
  border-top: 1px solid var(--pray-ink-rule);
}

.pray-page .two .grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  padding-block: 56px 60px;
}

.pray-page .two h3 {
  font-family: var(--pray-serif);
  font-weight: 500;
  font-size: clamp(24px, 2.4vw, 27px);
  line-height: 1.12;
  letter-spacing: -0.014em;
  color: #fff;
  margin: 10px 0 0;
}

.pray-page .two p {
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--pray-on-ink-muted);
  margin: 11px 0 0;
  text-wrap: pretty;
}

/* ── closing, on paper not ink ───────────────────────────────────────────── */

.pray-page .close {
  background: var(--pray-paper);
  color: var(--pray-ink);
  text-align: center;
}

.pray-page .close .inner {
  padding-block: 70px 74px;
}

.pray-page .close h2 {
  font-family: var(--pray-serif);
  font-weight: 500;
  font-size: clamp(32px, 3.8vw, 44px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 0;
}

/* Sky deep, not Sky tint: this clause is on the light ground. */
.pray-page .close h2 .it {
  color: var(--pray-sky-deep);
}

.pray-page .close p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--pray-ink-body);
  margin: 16px auto 0;
  max-width: 30em;
  text-wrap: pretty;
}

.pray-page .close .signup input {
  background: var(--pray-surface);
  border-color: var(--pray-rule);
  color: var(--pray-ink);
}

.pray-page .close .signup input::placeholder {
  color: var(--pray-ink-mute);
}

.pray-page .close .signup input:focus {
  border-color: var(--pray-sky-deep);
  box-shadow: 0 0 0 3px rgba(44, 107, 166, 0.18);
}

.pray-page .close .note,
.pray-page .close .consent {
  color: var(--pray-ink-body);
}

.pray-page .close .consent a:hover,
.pray-page .close .consent a:focus-visible {
  color: var(--pray-ink);
}

.pray-page .close .fielderror {
  color: #b5482c;
}

.pray-page .close .signedup {
  background: var(--pray-surface);
  border-color: var(--pray-rule);
  color: var(--pray-ink);
}

.pray-page .close a:focus-visible,
.pray-page .close button:focus-visible,
.pray-page .close input:focus-visible {
  outline-color: var(--pray-sky-deep);
}

/* ============================================================================
   LEGAL PAGES (/pray/privacy, /pray/terms)

   Long-form reading on the ink ground. One measure (680px, matching the site's
   own legal pages), generous leading, and body copy at `on-ink` rather than
   `on-ink-muted`: these are pages someone reads end to end, not section copy
   they skim beside a phone.
   ============================================================================ */

.pray-page .legal {
  max-width: 680px;
  margin: 0 auto;
  padding-block: 56px 88px;
}

/* No underline: the arrow is the affordance, and the rule below underlines
   inline prose links, which this is not. */
.pray-page .legal .back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  color: var(--pray-sky-tint);
  text-decoration: none;
}

.pray-page .legal .back:hover {
  color: var(--pray-flame-tint);
}

.pray-page .legal .stamp {
  display: block;
  margin-top: 34px;
  font-family: var(--pray-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pray-sky-tint);
}

.pray-page .legal h1 {
  font-family: var(--pray-serif);
  font-weight: 500;
  font-size: clamp(34px, 4.4vw, 46px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 14px 0 0;
}

.pray-page .legal .lede {
  font-size: 18.5px;
  line-height: 1.62;
  color: var(--pray-on-ink-muted);
  margin: 20px 0 0;
  text-wrap: pretty;
}

.pray-page .legal h2 {
  font-family: var(--pray-serif);
  font-weight: 500;
  font-size: clamp(21px, 2.2vw, 25px);
  line-height: 1.14;
  letter-spacing: -0.012em;
  color: #fff;
  margin: 42px 0 0;
}

.pray-page .legal p {
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--pray-on-ink);
  margin: 14px 0 0;
  text-wrap: pretty;
}

.pray-page .legal strong {
  color: #fff;
  font-weight: 600;
}

.pray-page .legal ul {
  margin: 14px 0 0;
  padding-left: 20px;
  list-style: none;
}

.pray-page .legal li {
  position: relative;
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--pray-on-ink);
  margin-top: 9px;
}

/* A Sky bullet rather than the UA disc, to match the states key. */
.pray-page .legal li::before {
  content: "";
  position: absolute;
  left: -18px;
  top: 11px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pray-sky-tint);
}

.pray-page .legal a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The standing caveat: these are plain-language pages, not counsel-reviewed
   contracts. Said once, at the top, rather than hedged through every clause. */
.pray-page .legal .caveat {
  margin-top: 28px;
  padding: 16px 18px;
  border: 1px solid var(--pray-ink-rule-strong);
  border-left: 2px solid var(--pray-flame);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
}

.pray-page .legal .caveat p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--pray-on-ink-muted);
}

.pray-page .legal .signoff {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--pray-ink-rule);
  font-family: var(--pray-serif);
  font-style: italic;
  font-size: 17px;
  color: var(--pray-on-ink-muted);
}

@media (max-width: 640px) {
  .pray-page .legal {
    padding-block: 36px 64px;
  }
}

/* ── footer ──────────────────────────────────────────────────────────────── */

.pray-page .pray-footer {
  border-top: 1px solid var(--pray-ink-rule);
}

.pray-page .pray-footer .bar {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  padding-block: 30px 34px;
}

.pray-page .pray-footer .fl {
  font-size: 13.5px;
  color: var(--pray-on-ink-subtle);
  line-height: 1.6;
}

.pray-page .pray-footer .fr {
  display: flex;
  gap: 20px;
  font-size: 13.5px;
}

/* ── the flame, moving (icons/Flame.html) ────────────────────────────────── */

.pray-page .pl-plume {
  width: 100%;
  height: 100%;
  display: block;
}

.pray-page .pl-flame {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation:
    pray-pl-rise 1.6s cubic-bezier(0.32, 0.72, 0, 1) both,
    pray-pl-breathe 6.2s ease-in-out 2s infinite;
}

.pray-page .pl-aura,
.pray-page .pl-aura2,
.pray-page .pl-spark,
.pray-page .pl-ember {
  transform-box: fill-box;
  transform-origin: center;
}

/* Two aura pulses on uneven periods, the second offset, so the glow never
   reads as a metronome. */
.pray-page .pl-aura {
  animation: pray-pl-pulse 7.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.pray-page .pl-aura2 {
  animation: pray-pl-pulse 10.2s cubic-bezier(0.4, 0, 0.6, 1) -1.6s infinite;
}

.pray-page .pl-spark {
  animation: pray-pl-glint 5s ease-in-out 1.6s infinite;
}

/* Each ember carries its own drift (--dx), period (--ed) and delay (--edl), so
   no two rise together. The reference set these as inline `style="--dx:…"`;
   they live here instead because Elm's `Html.Attributes.style` assigns to
   `element.style[key]`, which silently no-ops for a custom property (that
   needs `setProperty`). The six embers are the six `circle`s in their own `g`,
   in source order. */
.pray-page .pl-ember {
  opacity: 0;
  animation: pray-pl-ember var(--ed) cubic-bezier(0.42, 0.02, 0.58, 1) var(--edl) infinite;
}

.pray-page .pl-ember:nth-child(1) {
  --dx: -46px;
  --ed: 5.2s;
  --edl: 1.75s;
}

.pray-page .pl-ember:nth-child(2) {
  --dx: 42px;
  --ed: 6.4s;
  --edl: 2.4s;
}

.pray-page .pl-ember:nth-child(3) {
  --dx: -38px;
  --ed: 7.1s;
  --edl: 2.05s;
}

.pray-page .pl-ember:nth-child(4) {
  --dx: 36px;
  --ed: 5.8s;
  --edl: 3.2s;
}

.pray-page .pl-ember:nth-child(5) {
  --dx: -52px;
  --ed: 7.6s;
  --edl: 2.7s;
}

.pray-page .pl-ember:nth-child(6) {
  --dx: 30px;
  --ed: 6.7s;
  --edl: 3.75s;
}

@keyframes pray-pl-rise {
  from {
    opacity: 0;
    transform: scaleY(0.08) scaleX(0.62);
  }
  to {
    opacity: 1;
    transform: scaleY(1) scaleX(1);
  }
}

@keyframes pray-pl-breathe {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-2.5px) scale(1.035);
  }
}

@keyframes pray-pl-glint {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.24);
    opacity: 0.8;
  }
}

@keyframes pray-pl-pulse {
  0% {
    transform: scale(0.8);
    opacity: 0.62;
  }
  26% {
    transform: scale(1.08);
    opacity: 0.3;
  }
  47% {
    transform: scale(0.9);
    opacity: 0.55;
  }
  71% {
    transform: scale(1.17);
    opacity: 0.2;
  }
  88% {
    transform: scale(0.95);
    opacity: 0.44;
  }
  100% {
    transform: scale(0.8);
    opacity: 0.62;
  }
}

@keyframes pray-pl-ember {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.3);
  }
  14% {
    opacity: 0.9;
    transform: translate(calc(var(--dx) * 0.34), -9px) scale(1);
  }
  38% {
    opacity: 0.85;
    transform: translate(calc(var(--dx) * 0.92), -24px) scale(0.86);
  }
  62% {
    opacity: 0.6;
    transform: translate(calc(var(--dx) * 0.6), -42px) scale(0.7);
  }
  86% {
    opacity: 0.24;
    transform: translate(calc(var(--dx) * 1.14), -60px) scale(0.5);
  }
  100% {
    opacity: 0;
    transform: translate(calc(var(--dx) * 0.85), -72px) scale(0.34);
  }
}

/* ============================================================================
   THE PHONE SCREENS

   Ported from the design bundle's pray-shots.css, which took every value from
   the iOS build's prayer.css / Metrics.swift: --pad 20, card radius 14,
   hairline, 44pt targets. The screens are drawn at the iPhone's real 393x852
   and scaled with transform: scale(), so every number below is the app's own
   number rather than a redrawn approximation.

   Sizing contract: `.screen` takes --w (rendered width) and --s (scale), and
   --s MUST equal --w / 393. Set here, not inline, so the media queries at the
   bottom of this file can move them.

   The --s-* ladder is the app's dark palette, value for value. It is spelled
   out rather than read from style.css's `.dark` block because `.dark` is only
   applied on /app + /watchtower, so the shared tokens would resolve light
   here. Keeping it local is also what makes this file self-contained.
   ============================================================================ */

.pray-page .screen {
  position: relative;
  width: var(--w);
  height: calc(852px * var(--s));
  border-radius: 30px;
  overflow: hidden;
  flex: none;
}

.pray-page .shot {
  text-align: left;
  position: absolute;
  top: 0;
  left: 0;
  width: 393px;
  height: 852px;
  transform: scale(var(--s));
  transform-origin: top left;
  font-family: var(--pray-sans);
  background: var(--s-bg);
  color: var(--s-fg);
  --s-bg: #0d1424;
  --s-surface: #1a2440;
  --s-sunk: #0a101e;
  --s-muted: #222d4b;
  --s-fg: #eef3fb;
  --s-fg-muted: #c0cade;
  --s-fg-subtle: #a6b1c8;
  --s-accent: #357fbf;
  --s-accent-strong: #bbd9f2;
  --s-accent-tint: #1f3e60;
  --s-accent-soft: #18293f;
  --s-primary: #e8662e;
  --s-primary-ink: #ef6f37;
  --s-primary-soft: #34211a;
  --s-border: rgba(238, 243, 251, 0.18);
  --s-border-strong: rgba(238, 243, 251, 0.3);
  --s-onaccent: #0d1424;
}

.pray-page .shot .pad {
  padding: 0 20px;
}

.pray-page .shot .meta {
  font-family: var(--pray-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--s-fg-subtle);
  white-space: nowrap;
}

/* iPhone chrome, transcribed from the design set's ios-frame spec: island
   126x37 radius 24 at top 11; bar padding 21/24/19 with a 154px centre gap;
   clock in SF Pro 17px weight 590. */
.pray-page .shot .sb {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 154px;
  align-items: center;
  justify-content: center;
  padding: 21px 24px 19px;
  color: #fff;
}

.pray-page .shot .sb .time {
  flex: 1;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 1.5px;
  font-family: -apple-system, "SF Pro", system-ui, sans-serif;
  font-weight: 590;
  font-size: 17px;
  line-height: 22px;
}

.pray-page .shot .sb .rt {
  flex: 1;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 1px 1px 0 0;
}

.pray-page .shot .island {
  position: absolute;
  left: 50%;
  top: 11px;
  width: 126px;
  height: 37px;
  border-radius: 24px;
  background: #000;
  transform: translateX(-50%);
  z-index: 3;
}

.pray-page .shot .homebar {
  position: absolute;
  left: 50%;
  bottom: 9px;
  width: 134px;
  height: 5px;
  border-radius: 3px;
  background: var(--s-fg);
  opacity: 0.28;
  transform: translateX(-50%);
}

/* ── journal ─────────────────────────────────────────────────────────────── */

.pray-page .shot .jhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 6px;
  margin-right: -10px;
}

.pray-page .shot .gear {
  color: var(--s-accent-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
}

.pray-page .shot .praycard {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  padding: 14px 16px;
  background: var(--s-accent-soft);
  border: 1px solid var(--s-accent-tint);
  border-radius: 14px;
}

.pray-page .shot .pbtext {
  flex: 1;
  min-width: 0;
}

.pray-page .shot .pbt {
  display: block;
  font-family: var(--pray-serif);
  font-weight: 500;
  font-size: 19.5px;
  line-height: 1.2;
  letter-spacing: -0.008em;
  color: var(--s-accent-strong);
}

.pray-page .shot .pbs {
  display: block;
  margin-top: 3px;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--s-fg-muted);
}

.pray-page .shot .pbchev {
  color: var(--s-accent-strong);
  opacity: 0.55;
  display: flex;
}

.pray-page .shot .doors2 {
  margin-top: 6px;
}

.pray-page .shot .drow {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 11px 16px;
  color: var(--s-accent-strong);
  font-weight: 500;
  font-size: 14px;
}

.pray-page .shot .drow span:first-of-type {
  flex: 1;
  min-width: 0;
}

.pray-page .shot .dchev {
  opacity: 0.55;
  display: flex;
  flex: none;
}

.pray-page .shot .dhair {
  height: 1px;
  background: var(--s-border);
  margin-left: 16px;
}

.pray-page .shot .rail {
  display: flex;
  align-items: center;
  margin-top: 12px;
  padding: 3px;
  background: var(--s-sunk);
  border-radius: 10px;
}

.pray-page .shot .rail .seg {
  flex: 1;
  min-width: 0;
  display: flex;
}

.pray-page .shot .rail .seg span {
  flex: 1;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px 2px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--s-fg-muted);
  white-space: nowrap;
}

.pray-page .shot .rail .seg span.on {
  background: var(--s-accent-strong);
  color: var(--s-onaccent);
}

.pray-page .shot .raildiv {
  flex: none;
  width: 1px;
  height: 20px;
  margin: 0 3px;
  background: var(--s-border-strong);
}

.pray-page .shot .railbtn {
  flex: none;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: var(--s-accent-strong);
}

.pray-page .shot .list {
  margin-top: 16px;
  background: var(--s-surface);
  border: 1px solid var(--s-border-strong);
  border-radius: 14px;
  overflow: hidden;
}

.pray-page .shot .r {
  position: relative;
  padding: 10px 14px;
}

.pray-page .shot .r.pinned::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--s-accent-soft);
}

.pray-page .shot .rhair {
  height: 1px;
  background: var(--s-border);
}

.pray-page .shot .rhair.strong {
  background: var(--s-border-strong);
}

.pray-page .shot .rt2 {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--s-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pray-page .shot .rp {
  margin-top: 3px;
  font-family: var(--pray-serif);
  font-size: 15px;
  line-height: 1.45;
  color: var(--s-fg-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pray-page .shot .rm {
  margin-top: 5px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--pray-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.pray-page .shot .rm .pinm {
  color: var(--s-accent-strong);
  display: flex;
}

.pray-page .shot .rm .day,
.pray-page .shot .rm .sep {
  color: var(--s-fg-subtle);
}

.pray-page .shot .rm .ref {
  color: var(--s-accent-strong);
}

.pray-page .shot .addbtn {
  position: absolute;
  right: 20px;
  bottom: 44px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f0793c, #e8662e);
  border: 1px solid #c24c1c;
  box-shadow: 0 6px 10px rgba(194, 76, 28, 0.32);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0d1424;
}

/* ── praying mode ────────────────────────────────────────────────────────── */

.pray-page .shot .prayhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 22px 0;
}

.pray-page .shot .prayhead .music {
  color: var(--s-accent-strong);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pray-page .shot .prayhead .leave {
  color: var(--s-fg-subtle);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: -11px;
}

.pray-page .shot .praycardwrap {
  position: absolute;
  left: 0;
  right: 0;
  top: 112px;
  bottom: 0;
  padding: 0 30px;
  display: flex;
  flex-direction: column;
}

.pray-page .shot .prayinner {
  flex: 1;
  padding-top: 8px;
}

/* A div, not an h1: this screen is decoration inside a page that already has
   its own h1, so the drawn title must not land in the document outline. */
.pray-page .shot .praytitle {
  font-family: var(--pray-serif);
  font-weight: 500;
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -0.014em;
  color: var(--s-fg);
  margin: 16px 0 0;
}

.pray-page .shot .verselead {
  margin-top: 18px;
  padding-left: 16px;
  border-left: 1px solid var(--s-accent);
}

.pray-page .shot .verselead p {
  font-family: var(--pray-serif);
  font-style: italic;
  font-size: 19.5px;
  line-height: 1.5;
  color: var(--s-fg-muted);
  margin: 0;
}

.pray-page .shot .vref {
  font-family: var(--pray-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--s-accent-strong);
  margin-top: 11px;
}

.pray-page .shot .reveal {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  min-height: 44px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--s-fg-subtle);
}

.pray-page .shot .reveal .rchev {
  opacity: 0.6;
  display: flex;
}

.pray-page .shot .prayacts {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 0 34px;
}

.pray-page .shot .pact {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  font-weight: 500;
  font-size: 13.5px;
  color: var(--s-fg-subtle);
}

.pray-page .shot .psep {
  color: var(--s-border-strong);
  font-size: 13px;
}

/* ── a prayer, and its thread (the answered screen) ──────────────────────── */

.pray-page .shot .dtop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding-top: 6px;
  margin: 0 -10px;
}

.pray-page .shot .dwritten {
  font-family: var(--pray-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--s-accent-strong);
  margin-top: 10px;
  white-space: nowrap;
}

/* A div, not an h1, for the same reason as the praying screen's title. */
.pray-page .shot .dtitle {
  font-family: var(--pray-serif);
  font-weight: 500;
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -0.014em;
  color: var(--s-fg);
  margin: 6px 0 0;
}

.pray-page .shot .vchip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  padding: 6px 11px;
  border-radius: 999px;
  background: var(--s-accent-soft);
  color: var(--s-accent-strong);
  font-family: var(--pray-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.pray-page .shot .vquote {
  margin-top: 10px;
  padding-left: 13px;
  border-left: 2px solid var(--s-accent-tint);
  font-family: var(--pray-serif);
  font-size: 16.5px;
  line-height: 1.5;
  color: var(--s-fg-muted);
}

.pray-page .shot .dbody {
  font-family: var(--pray-serif);
  font-size: 17px;
  line-height: 1.5;
  color: var(--s-fg);
  margin: 10px 0 0;
}

.pray-page .shot .thread {
  margin-top: 24px;
  padding-left: 17px;
  border-left: 1px solid var(--s-border-strong);
}

.pray-page .shot .tentry {
  position: relative;
  padding-bottom: 20px;
}

.pray-page .shot .tentry:last-child {
  padding-bottom: 0;
}

/* On the thread a dot marks the KIND of entry (update, heard, answered); in the
   states key beside it the same three treatments mark the prayer's STATUS. The
   app means both, so don't collapse them into one legend. */
.pray-page .shot .tentry::before {
  content: "";
  position: absolute;
  left: -21px;
  top: 5px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--s-accent);
}

.pray-page .shot .tentry.heard::before {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--s-primary);
}

.pray-page .shot .tentry.ans::before {
  background: var(--s-primary);
}

.pray-page .shot .tmeta {
  font-family: var(--pray-mono);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--s-fg-subtle);
  white-space: nowrap;
}

.pray-page .shot .tmeta b {
  color: var(--s-primary-ink);
  font-weight: 500;
}

.pray-page .shot .tentry p {
  font-family: var(--pray-serif);
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--s-fg-muted);
  margin: 4px 0 0;
}

.pray-page .shot .addupd {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-top: 14px;
  color: var(--s-accent-strong);
  font-weight: 500;
  font-size: 15px;
}

.pray-page .shot .statuswrap {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--s-border);
}

.pray-page .shot .smeta {
  font-family: var(--pray-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--s-fg-subtle);
}

.pray-page .shot .statusctl {
  display: flex;
  margin-top: 9px;
  padding: 3px;
  background: var(--s-sunk);
  border-radius: 11px;
}

.pray-page .shot .statusctl span {
  flex: 1;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--s-fg-muted);
}

.pray-page .shot .statusctl span.on {
  background: var(--s-primary);
  color: #fff;
}

/* ── breathe and pray ────────────────────────────────────────────────────── */

.pray-page .shot .btide {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 560px;
  background: linear-gradient(
    0deg,
    rgba(76, 143, 204, 0.26) 0,
    rgba(76, 143, 204, 0.08) 54%,
    rgba(76, 143, 204, 0) 100%
  );
  transform-origin: 50% 100%;
  animation: pray-shot-tide 10s ease-in-out infinite;
}

@keyframes pray-shot-tide {
  0% {
    transform: scaleY(0.34);
    opacity: 0.55;
  }
  45% {
    transform: scaleY(1);
    opacity: 1;
  }
  100% {
    transform: scaleY(0.34);
    opacity: 0.55;
  }
}

.pray-page .shot .bbody {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  padding: 0 30px;
}

.pray-page .shot .bline {
  font-family: var(--pray-serif);
  font-weight: 500;
  font-size: 26px;
  line-height: 1.26;
  letter-spacing: -0.008em;
  color: var(--s-fg);
  margin: 0;
}

.pray-page .shot .bline span {
  display: block;
}

.pray-page .shot .bline .in {
  animation: pray-breath-in 10s ease infinite;
}

.pray-page .shot .bline .out {
  font-style: italic;
  color: var(--s-accent-strong);
  animation: pray-breath-out 10s ease infinite;
}

.pray-page .shot .bsrc {
  margin-top: 26px;
  font-size: 10px;
  color: var(--s-accent-strong);
}

/* ============================================================================
   RESPONSIVE. Two breakpoints, the same ones the rest of the site uses.
   ============================================================================ */

/* The default band: 641-1100px. Declared before the min-width override
   below, because both selectors have the same specificity and source order
   decides. */
.pray-page .phone .screen {
  --w: 268px;
  --s: 0.6819;
}

/* Wider than the grid: a larger phone. */
@media (min-width: 1101px) {
  .pray-page .phone .screen {
    --w: 296px;
    --s: 0.7532;
  }
}

/* Tablet: one column, copy always above its phone. */
@media (max-width: 820px) {
  .pray-page .pray-nav .bar {
    padding-block: 20px;
  }

  .pray-page .hero {
    padding: 44px 0 0;
  }

  .pray-page .hero .inner {
    padding-bottom: 52px;
  }

  .pray-page .flamemark {
    width: 86px;
    height: 86px;
  }

  /* `.band` covers `.band.solo`, which carries no grid of its own. `.band.flip`
     has to be named explicitly: its own two-column rule is a class more
     specific than `.pray-page .band .grid`, so it would otherwise win here and
     keep the flipped bands two-column on a phone. */
  .pray-page .band .grid,
  .pray-page .band.flip .grid,
  .pray-page .breath .grid,
  .pray-page .two .grid {
    grid-template-columns: 1fr;
    gap: 36px;
    padding-block: 48px;
  }

  /* Copy always above its phone on one column. */
  .pray-page .band.flip .copy,
  .pray-page .breath .inner {
    order: 0;
  }

  /* One column centres the phone, so the outer edge clearance has to go: a
     margin on one side only would shift the chassis off the page's centre.
     Selectors mirror the ones that set it, so specificity matches. */
  .pray-page .band:not(.flip) .phone,
  .pray-page .band.flip .phone,
  .pray-page .breath .phone {
    margin-inline: 0;
  }

  /* The column is the cap now, so drop the prose caps, including the copy
     block's own single measure. */
  .pray-page .band .copy,
  .pray-page .breath .inner,
  .pray-page .band p,
  .pray-page .hero .lede,
  .pray-page .breath .note2 {
    max-width: none;
  }

  .pray-page .breath .grid {
    padding-block: 52px 56px;
  }

  /* The key is already a column; it just sits closer under the copy. */
  .pray-page .states {
    margin-top: 24px;
  }

  .pray-page .close .inner {
    padding-block: 52px 56px;
  }
}

/* Phone: tighter, stacked, hero goes left-aligned. */
@media (max-width: 640px) {
  .pray-page .pray-nav .right .avail {
    display: none;
  }

  .pray-page .lock .words img {
    height: 17px;
  }

  /* The arc comes down with the type it sits beside, which drops to 17px here
     and 18px for "Pray". Left at its desktop size it dominated the bar even
     more on a phone than it did on a wide screen. */
  .pray-page .lock .arcsvg {
    height: 22px;
  }

  .pray-page .lock .app {
    font-size: 18px;
  }

  .pray-page .hero {
    text-align: left;
  }

  .pray-page .hero .signup,
  .pray-page .close .signup {
    flex-direction: column;
    max-width: none;
  }

  /* Belt and braces on the basis note above: in the stacked form the field is
     content-height and full-width, never a flex-sized block. */
  .pray-page .signup input {
    flex: none;
    width: 100%;
  }

  .pray-page .hero .signup .btn,
  .pray-page .close .signup .btn {
    width: 100%;
  }

  /* The lockup and the CTA both have to fit one bar on a phone. `Free · iOS`
     has already gone; this buys the rest of the room back by tightening the
     bar's gap and stepping the ghost button down a size, rather than letting
     the button crowd the word "Pray". */
  .pray-page .pray-nav .bar {
    gap: 12px;
  }

  .pray-page .pray-nav .right {
    gap: 14px;
  }

  .pray-page .pray-nav .btn.ghost {
    font-size: 14px;
    padding: 10px 14px;
  }

  .pray-page .flamemark {
    margin-left: 0;
  }

  .pray-page .phone .screen {
    --w: 236px;
    --s: 0.6005;
  }

  .pray-page .pray-footer .bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
}

/* Narrow phones: the PastSunday wordmark steps out of the lockup.
   Measured at the sizes above, the full lockup needs 187px (arc 43, wordmark
   77, divider 1, "Pray" 45, three 7px gaps) and the CTA needs 109px, so the
   bar needs 308px of the viewport's width minus its 48px of gutter. That fits
   from about 375px up. Below that something has to go, and it is the wordmark
   and its divider (85px with their gap) rather than the CTA: the nav is sticky
   now, so that button is the page's one persistent call to action, and
   PastSunday is still carried here by the Echo Arc (which holds the
   `PastSunday` accessible name) and spelled out in the footer.

   400px rather than 375px so the fit never depends on which font actually
   loaded: Newsreader is `font-display: optional`, so a first-time visitor can
   get Georgia instead, and Georgia sets "Pray" wider. */
@media (max-width: 400px) {
  .pray-page .lock .words,
  .pray-page .lock .div {
    display: none;
  }
}

/* ============================================================================
   REDUCED MOTION

   style.css already kills every animation globally with
   `* { animation: none !important }`, so nothing here needs stopping. What
   this block does is fix the RESTING state of the things that animate FROM a
   hidden value, which a blanket stop would otherwise freeze wrong:

     - the two headline halves animate from opacity .16, so they must be left
       at 1 rather than ghosted;
     - the embers rest at opacity 0 and should stay hidden, not frozen
       mid-drift;
     - the auras rest at their mid-pulse opacity instead of full strength.
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
  .pray-page .hero h1 .in,
  .pray-page .hero h1 .out,
  .pray-page .shot .bline .in,
  .pray-page .shot .bline .out {
    opacity: 1;
  }

  .pray-page .pl-flame {
    opacity: 1;
    transform: none;
  }

  .pray-page .pl-aura {
    opacity: 0.5;
  }

  .pray-page .pl-aura2 {
    opacity: 0.36;
  }

  .pray-page .pl-ember {
    display: none;
  }
}