/* Hallmark · pre-emit critique: P5 H5 E5 S5 R4 V5
 * macrostructure: Split Studio (kept) · tone: quiet, warm, reverent · anchor hue: clay
 * design-system: design.md · designed-as-app
 * redesign 2026-08-18: motion elevation — Motion Primitives ports (fade-in-blur hero words,
 * staggered in-view group reveals) + Watermelon UI surface recipes (soft card radii,
 * single soft shadow, pill CTA with arrow nudge) · studied: calm.com / opalapp.com /
 * one-sec.app / lectio365.com — reference-led, not copied
 * motion primitives (3): hero entrance orchestration · one-shot in-view group reveal ·
 * ambient breath on the mark · reduced-motion: full collapse · no-JS: content fully visible
 * honest: pass — no invented metrics, ratings or testimonials · chrome: real screenshots,
 * hairline only · tokens: pass · responsive: pass (320/375/414/768)
 */
@import url("/tokens.css");

@font-face {
  font-family: "Newsreader";
  src: url("/fonts/Newsreader-VariableFont.ttf") format("truetype");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("/fonts/InstrumentSans-VariableFont.ttf") format("truetype");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  overflow-x: clip;
}

html {
  scroll-behavior: smooth;
  background: var(--color-paper);
}

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

a,
summary {
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}

a {
  text-decoration-thickness: var(--rule-hair);
  text-underline-offset: 0.2em;
}

a:focus-visible,
summary:focus-visible {
  outline: var(--rule-fine) solid var(--color-focus);
  outline-offset: var(--space-2xs);
}

.privacy-section a:focus-visible {
  outline-color: var(--color-accent-soft);
}

a[aria-disabled="true"],
a[data-state="loading"] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

a[data-state="error"] {
  text-decoration-style: wavy;
}

a[data-state="success"]::after {
  content: " ✓";
}

h1,
h2,
h3,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

h1,
h2,
h3 {
  min-width: 0;
  overflow-wrap: anywhere;
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 430;
  letter-spacing: -0.025em;
}

h1 {
  font-size: var(--text-display);
  line-height: 0.98;
  max-width: 10ch;
}

h2 {
  font-size: clamp(var(--text-2xl), 4vw, var(--text-3xl));
  line-height: 1.04;
}

h3 {
  font-size: var(--text-lg);
  line-height: 1.15;
}

.skip-link {
  position: fixed;
  inset-block-start: var(--space-sm);
  inset-inline-start: var(--space-sm);
  z-index: var(--z-sticky);
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-ink);
  color: var(--color-paper);
  transform: translateY(-180%);
  transition: transform var(--dur-short) var(--ease-out);
  white-space: nowrap;
}

.skip-link:focus {
  transform: translateY(0);
}

.nav-edge {
  width: min(var(--content-max), 100%);
  min-height: 4.75rem;
  margin-inline: auto;
  padding-inline: var(--page-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.wordmark,
.language-link {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  text-decoration: none;
}

.wordmark {
  gap: var(--space-xs);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 560;
  letter-spacing: -0.02em;
}

.language-link {
  font-size: var(--text-sm);
  text-decoration: underline;
  text-decoration-color: var(--color-rule-2);
}

/* The mark carries the page's only ambient motion: a slow, quiet breath. */
.breath-mark {
  width: 1.5rem;
  height: 1.5rem;
  display: inline-block;
  border: var(--rule-hair) solid var(--color-accent);
  border-radius: var(--radius-pill);
  position: relative;
  animation: mark-breathe calc(var(--dur-breath) * 2) var(--ease-in-out) var(--dur-long) infinite alternate;
}

.breath-mark::before,
.breath-mark::after {
  content: "";
  position: absolute;
  inset-block: 0.25rem;
  width: var(--rule-hair);
  background: var(--color-accent);
}

.breath-mark::before { inset-inline-start: 0.48rem; transform: rotate(-12deg); }
.breath-mark::after { inset-inline-end: 0.48rem; transform: rotate(12deg); }

.hero {
  width: min(var(--content-max), 100%);
  min-height: clamp(34rem, 76dvh, 52rem);
  margin-inline: auto;
  padding: var(--space-xl) var(--page-gutter) var(--space-2xl);
}

.hero-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2xl);
  align-items: center;
}

.hero-art,
.hero-copy {
  opacity: 0;
  animation: hero-arrive var(--dur-long) var(--ease-out) forwards;
}

.hero-art {
  min-height: clamp(25rem, 62dvh, 42rem);
  position: relative;
  overflow: clip;
  display: grid;
  align-content: center;
  padding: var(--space-xl);
  background: var(--color-prayer);
  color: var(--color-prayer-ink);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
}

/* Soft light falling from above — the night surface receives, it does not glow. */
.hero-art::before {
  content: "";
  position: absolute;
  inset: -18% -12% auto;
  height: 72%;
  background: radial-gradient(
    ellipse 62% 52% at 50% 0%,
    color-mix(in oklch, var(--color-accent-soft) 17%, transparent),
    transparent 72%
  );
  pointer-events: none;
}

.hero-art__marks {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--color-accent-soft);
  opacity: 0.55;
  animation: edge-settle var(--dur-breath) var(--ease-out) var(--dur-short) both;
}

.hero-art__marks path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.hero-art__leaf {
  fill: color-mix(in oklch, var(--color-accent-soft) 14%, transparent) !important;
}

.prayer-glimpse {
  position: relative;
  z-index: var(--z-raised);
  display: grid;
  gap: var(--space-xs);
  max-width: 22rem;
  margin-inline: auto;
  font-family: var(--font-display);
  font-size: clamp(var(--text-md), 3vw, var(--text-xl));
  line-height: 1.25;
  text-align: center;
}

/* The prayer arrives line by line, exactly as it does in the app.
 * Delays live in nth-child rules, not style attributes: the production
 * CSP (style-src 'self') strips inline styles. */
.prayer-glimpse p {
  opacity: 0;
  transform: translateY(0.4rem);
  animation: line-in 0.9s var(--ease-out) forwards;
  animation-delay: calc(0.6s + var(--i, 0) * 0.7s);
}

.prayer-glimpse p:nth-child(2) { --i: 1; }
.prayer-glimpse p:nth-child(3) { --i: 2; }
.prayer-glimpse p:nth-child(4) { --i: 3; }

.prayer-glimpse p:last-child {
  margin-block-start: var(--space-sm);
  color: var(--color-accent-soft);
}

.hero-art figcaption {
  position: absolute;
  inset-inline: var(--space-lg);
  inset-block-end: var(--space-md);
  z-index: var(--z-raised);
  color: var(--color-prayer-ink);
  font-size: var(--text-sm);
  text-align: center;
  opacity: 0;
  animation: line-in 0.9s var(--ease-out) 3.6s forwards;
}

.hero-copy {
  display: grid;
  justify-items: start;
  gap: var(--space-lg);
  animation-delay: var(--dur-short);
}

/* Motion Primitives “fade-in-blur”, per word, ported to CSS. */
.hero-title .w {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.35em);
  filter: blur(10px);
  animation: word-in 0.9s var(--ease-out) forwards;
  animation-delay: calc(280ms + var(--i, 0) * 110ms);
}

.hero-title .w:nth-child(2) { --i: 1; }
.hero-title .w:nth-child(3) { --i: 2; }
.hero-title .w:nth-child(4) { --i: 3; }
.hero-title .w:nth-child(5) { --i: 4; }
.hero-title .w:nth-child(6) { --i: 5; }

.hero-lede {
  max-width: 36rem;
  color: var(--color-neutral);
  font-size: clamp(var(--text-base), 1.5vw, var(--text-md));
  line-height: 1.55;
}

.text-cta {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-accent);
  font-weight: 650;
  text-decoration-line: underline;
  text-decoration-color: var(--color-rule-2);
  text-decoration-thickness: var(--rule-hair);
  text-underline-offset: 0.35em;
  transition: color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);
  white-space: nowrap;
}

.text-cta:active {
  transform: translateY(1px);
}

.pill-cta {
  min-height: 3.25rem;
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-2xs) var(--space-2xs) var(--space-2xs) var(--space-md);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-weight: 650;
  text-decoration: none;
  border-radius: var(--radius-pill);
  transition: transform var(--dur-micro) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);
}

.pill-cta__arrow {
  width: 2.4rem;
  height: 2.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in oklch, var(--color-accent-ink) 16%, transparent);
  border-radius: var(--radius-pill);
  transition: transform var(--dur-short) var(--ease-out);
}

.pill-cta:active {
  transform: translateY(1px);
}

.wordmark:active,
.language-link:active,
.foot-stmt a:active,
.faq-list summary:active {
  color: var(--color-accent);
}

.store-status {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  padding-block-start: var(--space-sm);
}

.store-badge {
  min-width: 12rem;
  min-height: 3.5rem;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-2xs) var(--space-sm);
  border: var(--rule-hair) solid var(--color-rule-2);
  border-radius: var(--radius-input);
  color: var(--color-muted);
  cursor: default;
  user-select: none;
  white-space: nowrap;
}

.store-badge svg {
  width: 1.55rem;
  height: 1.55rem;
  flex: 0 0 auto;
  fill: currentColor;
}

.store-badge > span {
  display: grid;
  line-height: 1.05;
}

.store-badge small {
  font-size: var(--text-xs);
}

.store-badge strong {
  color: var(--color-neutral);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 650;
}

.section-wrap {
  width: min(var(--content-max), 100%);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

/* Honest proof, in place of ratings we do not have. */
.quiet-proof {
  width: min(var(--content-max), 100%);
  margin-inline: auto;
  padding: 0 var(--page-gutter) var(--space-2xl);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-lg);
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.quiet-proof span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

.quiet-proof span::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border: var(--rule-hair) solid var(--color-accent);
  border-radius: var(--radius-pill);
}

.statement-band {
  background: var(--color-prayer);
  color: var(--color-prayer-ink);
}

.statement-band__inner {
  padding-block: var(--space-3xl) var(--space-2xl);
  display: grid;
  gap: var(--space-xl);
}

.statement-band h2 {
  max-width: 13ch;
}

.statement-band p {
  max-width: 34rem;
  color: var(--color-prayer-ink);
  font-size: var(--text-md);
}

/* One screenshot, shown the way Opal shows a phone: centred on the night
 * surface, a soft clay light behind it, nothing else competing. */
.showcase {
  background: var(--color-prayer);
  color: var(--color-prayer-ink);
}

.showcase__inner {
  padding-block: var(--space-3xl);
  display: grid;
  gap: var(--space-2xl);
  justify-items: center;
  text-align: center;
}

.showcase__head {
  display: grid;
  gap: var(--space-md);
  justify-items: center;
}

.showcase__head h2 {
  max-width: 22ch;
  text-wrap: balance;
}

.showcase__head p {
  max-width: var(--measure);
  color: var(--color-prayer-ink);
}

.showcase__shot {
  position: relative;
  width: min(100%, 20rem);
  margin: 0;
}

.showcase__shot::before {
  content: "";
  position: absolute;
  inset: -12% -30%;
  background: radial-gradient(
    ellipse 56% 50% at 50% 42%,
    color-mix(in oklch, var(--color-accent-soft) 34%, transparent),
    transparent 74%
  );
  pointer-events: none;
}

.showcase__shot img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  background: var(--color-paper-2);
  border: var(--rule-hair) solid color-mix(in oklch, var(--color-prayer-ink) 22%, transparent);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
}

.head-hang {
  padding-block: var(--space-3xl) var(--space-xl);
  display: grid;
  gap: var(--space-md);
}

.head-hang h2 {
  max-width: 16ch;
}

.head-hang p {
  max-width: var(--measure);
  color: var(--color-neutral);
}

.flow-section {
  padding-block-end: var(--space-4xl);
}

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}

.steps li {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: var(--space-md);
  padding-block: var(--space-lg);
  border-block-start: var(--rule-hair) solid var(--color-rule);
}

.steps li:last-child {
  border-block-end: var(--rule-hair) solid var(--color-rule);
}

.steps p {
  max-width: 40rem;
  margin-block-start: var(--space-xs);
  color: var(--color-neutral);
}

.stage {
  color: var(--color-accent);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-variant-numeric: tabular-nums;
}

.feature-row {
  width: min(var(--content-max), 100%);
  margin-inline: auto;
  padding-block: var(--space-3xl);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2xl);
  align-items: center;
}

.feature-row:not(.section-wrap) {
  padding-inline: var(--page-gutter);
}

.feature-row--dark {
  width: 100%;
  max-width: none;
  padding-inline: max(var(--page-gutter), calc((100% - var(--content-max)) / 2 + var(--page-gutter)));
  background: var(--color-prayer);
  color: var(--color-prayer-ink);
}

.feature-row__copy {
  display: grid;
  gap: var(--space-md);
}

.feature-row__copy h2 {
  max-width: 15ch;
}

.feature-row__copy p {
  max-width: 38rem;
  color: var(--color-neutral);
}

.feature-row--dark .feature-row__copy p {
  color: var(--color-prayer-ink);
}

.availability-note {
  padding-block-start: var(--space-sm);
  border-block-start: var(--rule-hair) solid var(--color-accent-soft);
  font-size: var(--text-sm);
}

.pause-path {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-sm);
  color: var(--color-prayer-ink);
  font-family: var(--font-display);
  font-size: var(--text-md);
}

.pause-path span,
.pause-path strong {
  min-height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 430;
}

.pause-path span:not([aria-hidden]) {
  border: var(--rule-hair) solid var(--color-muted);
  border-radius: var(--radius-input);
}

.pause-path strong {
  color: var(--color-accent-soft);
  border: var(--rule-hair) solid var(--color-accent-soft);
  border-radius: var(--radius-input);
}

.pause-path span[aria-hidden] {
  min-height: auto;
  color: var(--color-accent-soft);
  transform: rotate(90deg);
}

.mode-list {
  display: grid;
  border-block: var(--rule-hair) solid var(--color-rule);
}

.mode-list span {
  min-height: 5rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-md);
  border-block-start: var(--rule-hair) solid var(--color-rule);
}

.mode-list span:first-child { border-block-start: 0; }
.mode-list b { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 430; }
.mode-list small { color: var(--color-muted); font-size: var(--text-sm); }

.quiet-list {
  display: grid;
  gap: var(--space-lg);
}

.quiet-list > div {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: var(--space-md);
  align-items: start;
}

.quiet-list > div > span {
  color: var(--color-accent);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: 1;
}

.quiet-list strong {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 520;
}

.privacy-section {
  padding-block: var(--space-3xl);
  background: var(--color-ink);
  color: var(--color-paper);
}

.privacy-section__grid {
  display: grid;
  gap: var(--space-2xl);
}

.privacy-section h2 {
  max-width: 15ch;
}

.text-cta--light {
  margin-block-start: var(--space-lg);
  color: var(--color-accent-soft);
  text-decoration-color: var(--color-muted);
}

.privacy-facts {
  display: grid;
}

.privacy-facts > div {
  padding-block: var(--space-md);
  border-block-start: var(--rule-hair) solid var(--color-muted);
}

.privacy-facts dt {
  font-family: var(--font-display);
  font-size: var(--text-md);
}

.privacy-facts dd {
  margin-block-start: var(--space-2xs);
  color: var(--color-paper-3);
}

.faq-section {
  padding-block-end: var(--space-4xl);
}

.faq-list {
  border-block-start: var(--rule-hair) solid var(--color-rule);
}

.faq-list details {
  border-block-end: var(--rule-hair) solid var(--color-rule);
}

.faq-list summary {
  min-height: 4.5rem;
  padding-block: var(--space-md);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-md);
  align-items: center;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 520;
  list-style: none;
  transition: color var(--dur-short) var(--ease-out);
}

.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; color: var(--color-accent); font-family: var(--font-body); }
.faq-list details[open] summary::after { content: "−"; }

.faq-list details p {
  max-width: var(--measure);
  padding-block-end: var(--space-lg);
  color: var(--color-neutral);
}

.faq-list details[open] p {
  animation: faq-in var(--dur-short) var(--ease-out);
}

.foot-stmt {
  padding: var(--space-3xl) var(--page-gutter) var(--space-xl);
  display: grid;
  gap: var(--space-2xl);
  background: var(--color-paper-2);
  color: var(--color-ink);
}

.foot-stmt__line {
  max-width: 28ch;
  font-family: var(--font-display);
  font-size: clamp(var(--text-xl), 5vw, var(--text-3xl));
  line-height: 1.05;
  letter-spacing: -0.025em;
}

.foot-stmt__meta {
  padding-block-start: var(--space-md);
  border-block-start: var(--rule-hair) solid var(--color-rule-2);
  display: grid;
  gap: var(--space-md);
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.foot-stmt__meta nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-md);
}

.foot-stmt__meta nav a {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

/* In-view reveals (Motion Primitives `in-view` / `animated-group`, ported).
 * Gated behind the `js` class: without JavaScript nothing is ever hidden. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

.js [data-reveal="group"] {
  opacity: 1;
  transform: none;
  transition: none;
}

.js [data-reveal="group"] > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
  transition-delay: calc(var(--n, 0) * var(--stagger, 110ms));
}

.js [data-reveal="group"].is-visible > * {
  opacity: 1;
  transform: none;
}

.js [data-reveal="group"] > :nth-child(1) { --n: 0; }
.js [data-reveal="group"] > :nth-child(2) { --n: 1; }
.js [data-reveal="group"] > :nth-child(3) { --n: 2; }
.js [data-reveal="group"] > :nth-child(4) { --n: 3; }
.js [data-reveal="group"] > :nth-child(5) { --n: 4; }
.js [data-reveal="group"] > :nth-child(6) { --n: 5; }
.js [data-reveal="group"] > :nth-child(7) { --n: 6; }
.js [data-reveal="group"] > :nth-child(8) { --n: 7; }

/* The pause path tells a sequence; let it arrive as one. */
.js .pause-path[data-reveal="group"] {
  --stagger: 240ms;
}

@keyframes hero-arrive {
  from { opacity: 0; transform: translateY(0.5rem); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes word-in {
  to { opacity: 1; transform: none; filter: blur(0); }
}

@keyframes line-in {
  to { opacity: 1; transform: none; }
}

@keyframes faq-in {
  from { opacity: 0; transform: translateY(-4px); }
}

@keyframes mark-breathe {
  from { opacity: 0.72; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1.04); }
}

@keyframes edge-settle {
  from { opacity: 0.18; transform: translateY(0.25rem); }
  to { opacity: 0.55; transform: translateY(0); }
}

@media (hover: hover) and (pointer: fine) {
  .language-link:hover,
  .foot-stmt a:hover {
    color: var(--color-accent);
  }

  .text-cta:hover {
    color: var(--color-ink);
    transform: translateY(-1px);
  }

  .text-cta--light:hover {
    color: var(--color-paper);
  }

  .pill-cta:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-soft);
  }

  .pill-cta:hover .pill-cta__arrow {
    transform: translateX(2px);
  }

  .faq-list summary:hover {
    color: var(--color-accent);
  }
}

@media (min-width: 40rem) {
  .statement-band__inner,
  .privacy-section__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: start;
  }

  .foot-stmt__meta {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
  }

  .foot-stmt__meta nav {
    justify-content: center;
  }
}

@media (min-width: 60rem) {
  .hero-split {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }

  .feature-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-3xl);
  }

  .feature-row--reverse > :first-child { grid-column: 2; grid-row: 1; }
  .feature-row--reverse > :last-child { grid-column: 1; grid-row: 1; }

  .pause-path {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
  }

  .pause-path span[aria-hidden] {
    transform: none;
  }

  .showcase__inner {
    padding-block: var(--space-4xl);
  }
}

@media (min-width: 90rem) {
  .hero {
    gap: var(--space-3xl);
  }
}

@media (pointer: coarse) {
  .wordmark,
  .language-link,
  .text-cta,
  .foot-stmt__meta nav a {
    min-height: 3rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 150ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 150ms !important;
    transition-delay: 0ms !important;
  }

  .hero-art,
  .hero-copy {
    animation-name: hero-arrive-reduced;
  }

  .hero-title .w,
  .prayer-glimpse p,
  .hero-art figcaption {
    animation-name: none !important;
    opacity: 1;
    transform: none;
    filter: none;
  }

  .breath-mark,
  .hero-art__marks {
    animation-name: none !important;
  }

  .js [data-reveal],
  .js [data-reveal="group"] > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

@keyframes hero-arrive-reduced {
  from { opacity: 0; }
  to { opacity: 1; }
}