/* ==========================================================================
   Via Catholic — viacatholic.app

   The web side of the app's printed-page look: parchment ground, forest ink,
   a gilt ornament, Bodoni for display. Every value below is lifted from the
   app so the site and the paywall read as the same object.
   Sources: ViaCatholic/Core/DesignSystem/LiturgicalPalette.swift
            ViaCatholic/Features/Paywall/PaywallTheme.swift
   ========================================================================== */

/* --- Display face -------------------------------------------------------
   Apple platforms have Bodoni 72 and Didot installed, so most visitors get
   the real face with no download at all. Everyone else falls to the bundled
   Bodoni Moda, then to Georgia. See web/scripts/fetch-fonts.sh.            */

@font-face {
  font-family: "Bodoni Moda";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/bodoni-moda.woff2") format("woff2");
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/cormorant-garamond-600.woff2") format("woff2");
}

@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/dm-sans-500.woff2") format("woff2");
}

:root {
  --parchment: #faf7ee;
  --card: #fefcf6;
  --card-raised: #f2f1e6;
  --hairline: #e2ddcb;
  --ink: #1b4529;
  --body: #2a2a26;
  --body-soft: #5a5a53;
  --forest: #217347;
  --gold: #af8c3c;
  --shadow: 27 69 41;

  --display: "Bodoni 72", "Bodoni Moda", Didot, "Bodoni MT", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  --serif: ui-serif, "New York", Georgia, Cambria, serif;

  --measure: 34rem;
  --page: 68rem;
  --gap: clamp(1rem, 4vw, 2rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    --parchment: #161512;
    --card: #22211d;
    --card-raised: #2b2d27;
    --hairline: #3d3b34;
    --ink: #7fc49e;
    --body: #e8e5db;
    --body-soft: #b3b1a6;
    --forest: #5fa97c;
    --gold: #c9a453;
    --shadow: 0 0 0;
  }
}

:root[data-theme="dark"] {
  --parchment: #161512;
  --card: #22211d;
  --card-raised: #2b2d27;
  --hairline: #3d3b34;
  --ink: #7fc49e;
  --body: #e8e5db;
  --body-soft: #b3b1a6;
  --forest: #5fa97c;
  --gold: #c9a453;
  --shadow: 0 0 0;
}

:root[data-theme="light"] {
  --parchment: #faf7ee;
  --card: #fefcf6;
  --card-raised: #f2f1e6;
  --hairline: #e2ddcb;
  --ink: #1b4529;
  --body: #2a2a26;
  --body-soft: #5a5a53;
  --forest: #217347;
  --gold: #af8c3c;
  --shadow: 27 69 41;
}

/* --- Base --------------------------------------------------------------- */

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--parchment);
  color: var(--body);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

a {
  color: var(--forest);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--forest);
  outline-offset: 3px;
  border-radius: 2px;
}

.wrap {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gap);
}

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 1rem;
  top: 1rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 8px;
}

/* --- Type --------------------------------------------------------------- */

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.12;
  letter-spacing: -0.005em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2.5rem, 7vw, 4rem); }
h2 { font-size: clamp(1.85rem, 4.2vw, 2.6rem); }
h3 { font-size: clamp(1.15rem, 2.2vw, 1.35rem); }

p { margin: 0 0 1.1em; max-width: var(--measure); }

.lede {
  font-size: clamp(1.1rem, 2.4vw, 1.3rem);
  color: var(--body-soft);
  line-height: 1.55;
}

.eyebrow {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--body-soft);
  margin: 0 0 0.9rem;
}

.scripture {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--body);
}

.scripture cite {
  display: block;
  margin-top: 0.7rem;
  font-style: normal;
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--body-soft);
}

/* The lozenge between two hairlines, ported from ScriptureRule in the app. */
.rule {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1.4rem;
  max-width: var(--measure);
}
.rule::before,
.rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--hairline);
}
.rule i {
  width: 5px;
  height: 5px;
  background: var(--gold);
  transform: rotate(45deg);
}

/* --- Header ------------------------------------------------------------- */

.site-head {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.35rem;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: 0.01em;
}

.wordmark svg { width: 0.85em; height: 0.85em; display: block; }

.site-head nav {
  display: flex;
  gap: clamp(1rem, 3vw, 1.75rem);
  font-size: 0.94rem;
}

.site-head nav a {
  color: var(--body-soft);
  text-decoration: none;
}
.site-head nav a:hover { color: var(--forest); }

/* Over the photograph the muted grey loses too much contrast, so the hero's
   nav steps up to the display ink. The veil at the top of .hero::before is
   what makes this reliable whatever the art underneath is doing. */
.hero .site-head nav a { color: var(--ink); }

/* --- Hero --------------------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  padding-bottom: clamp(3rem, 8vw, 5.5rem);
}

/* The art fades into the page rather than ending at an edge — the same seam
   the paywall hides, so photo and parchment read as one sheet.
   Three jobs in one gradient:
     0–14%  a veil under the header, so the wordmark and nav hold against a
            bright sky (and against a bright anything, if the art is swapped);
     14–34% clear, where the photograph is meant to be seen;
     34–86% the fade out, landing on solid parchment well before the element
            ends — the last stop must be opaque short of 100%, or the edge
            shows as a hairline across the page. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: clamp(360px, 58vw, 620px);
  background:
    linear-gradient(
      to bottom,
      rgb(from var(--parchment) r g b / 0.62) 0%,
      rgb(from var(--parchment) r g b / 0.14) 14%,
      rgb(from var(--parchment) r g b / 0) 34%,
      rgb(from var(--parchment) r g b / 0.74) 70%,
      var(--parchment) 86%
    ),
    url("/assets/hero.jpg") center 42% / cover no-repeat;
  z-index: -1;
}

/* Fallback for browsers without relative color syntax (Safari < 16.4). */
@supports not (color: rgb(from white r g b / 1)) {
  .hero::before {
    background:
      linear-gradient(to bottom, transparent 34%, var(--parchment) 86%),
      url("/assets/hero.jpg") center 42% / cover no-repeat;
  }
}

.hero-body {
  padding-top: clamp(11rem, 30vw, 19rem);
}

.hero h1 { margin-bottom: 1rem; }

.hero .lede { max-width: 30rem; }

/* On the photo, the heading needs its own ground on small screens where the
   text sits higher against a brighter part of the sky. */
@media (max-width: 34rem) {
  .hero-body { padding-top: clamp(9rem, 46vw, 13rem); }
}

/* --- Buttons ------------------------------------------------------------ */

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.25rem;
  margin-top: 1.9rem;
}

/* The App Store badge slot. Ships disabled until there is a real listing;
   swapping in the live link is the only change needed — see web/README.md. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 1.25rem 0.75rem;
  border-radius: 12px;
  border: 1px solid var(--hairline);
  background: var(--card);
  color: var(--ink);
  text-decoration: none;
  line-height: 1.15;
  box-shadow: 0 1px 2px rgb(var(--shadow) / 0.06);
}

.badge svg { width: 1.7rem; height: 1.7rem; flex: none; }

.badge span { display: block; }

.badge b {
  display: block;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.badge small {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--body-soft);
}

a.badge:hover {
  border-color: var(--forest);
  box-shadow: 0 2px 8px rgb(var(--shadow) / 0.1);
}

.badge[aria-disabled="true"] {
  cursor: default;
  opacity: 0.92;
}

.cta-note {
  font-size: 0.9rem;
  color: var(--body-soft);
  margin: 0;
}

/* --- Sections ----------------------------------------------------------- */

section { padding-block: clamp(3.25rem, 8vw, 5.5rem); }

.section-head { margin-bottom: clamp(2rem, 5vw, 3rem); }
.section-head p { margin-bottom: 0; }

/* Two-up: copy beside the device shot. */
.split {
  display: grid;
  gap: clamp(2rem, 6vw, 4rem);
  align-items: center;
  grid-template-columns: 1fr;
}

@media (min-width: 56rem) {
  .split { grid-template-columns: 1fr 0.85fr; }
  .split.flip > :first-child { order: 2; }
}

/* --- Device frame ------------------------------------------------------- */

.device {
  position: relative;
  width: min(320px, 78vw);
  margin-inline: auto;
  padding: 9px;
  border-radius: 46px;
  background: linear-gradient(160deg, #d8d5cc, #9c9a92 42%, #e4e1d8);
  box-shadow:
    0 24px 48px -18px rgb(var(--shadow) / 0.34),
    0 4px 14px rgb(var(--shadow) / 0.14);
}

@media (prefers-color-scheme: dark) {
  .device {
    background: linear-gradient(160deg, #4b4943, #2c2b27 42%, #56534c);
    box-shadow: 0 24px 48px -18px rgb(0 0 0 / 0.7);
  }
}

.device img {
  border-radius: 38px;
  display: block;
  width: 100%;
}

/* --- Feature list ------------------------------------------------------- */

.features {
  display: grid;
  gap: 1.5rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.features li {
  border-top: 1px solid var(--hairline);
  padding-top: 1.1rem;
}

.features h3 { margin-bottom: 0.45rem; }
.features p { margin-bottom: 0; color: var(--body-soft); font-size: 0.98rem; }

/* --- Cards -------------------------------------------------------------- */

.card {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: clamp(1.4rem, 3.5vw, 2rem);
}

.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }

/* A rendered Ask exchange. */
.exchange { display: grid; gap: 0.85rem; }

.bubble {
  border-radius: 16px;
  padding: 0.85rem 1.1rem;
  max-width: 92%;
  font-size: 1rem;
  line-height: 1.55;
}

.bubble p { margin: 0; max-width: none; }

.bubble.ask {
  justify-self: end;
  background: var(--forest);
  color: var(--parchment);
  border-bottom-right-radius: 5px;
}

@media (prefers-color-scheme: dark) {
  .bubble.ask { color: #10130f; }
}

.bubble.via {
  justify-self: start;
  background: var(--card-raised);
  border: 1px solid var(--hairline);
  color: var(--body);
  border-bottom-left-radius: 5px;
}

/* --- Translations ------------------------------------------------------- */

.editions {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.editions .card { height: 100%; }
.editions h3 { font-size: 1.1rem; margin-bottom: 0.35rem; }
.editions p { font-size: 0.94rem; color: var(--body-soft); margin: 0; }

/* --- Pro ---------------------------------------------------------------- */

.pro { background: var(--card-raised); border-block: 1px solid var(--hairline); }

.benefits {
  list-style: none;
  margin: 0 0 1.6rem;
  padding: 0;
  max-width: var(--measure);
}

.benefits li {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--hairline);
}

.benefits li::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  background: var(--gold);
  transform: rotate(45deg);
  translate: 0 -0.2em;
}

.price {
  font-family: var(--display);
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  color: var(--ink);
  font-weight: 700;
  /* Bodoni 72's numerals hang below the baseline in the Oldstyle cut; the
     lining figures are what a price wants. Matches PaywallTheme. */
  font-variant-numeric: lining-nums;
  margin-bottom: 0.3rem;
}

/* --- Prose pages (privacy, terms, support) ------------------------------ */

.prose { padding-block: clamp(2.5rem, 6vw, 4rem); }

.prose .wrap { max-width: 44rem; }

.prose h1 { margin-bottom: 0.6rem; }

.prose h2 {
  font-size: clamp(1.3rem, 3vw, 1.6rem);
  margin-top: 2.5rem;
  margin-bottom: 0.7rem;
}

.prose h3 {
  font-size: 1.08rem;
  margin-top: 1.7rem;
  margin-bottom: 0.4rem;
}

.prose p, .prose li { max-width: none; }

.prose ul, .prose ol { padding-left: 1.2rem; margin: 0 0 1.1em; }
.prose li { margin-bottom: 0.4rem; }

.updated {
  font-size: 0.88rem;
  color: var(--body-soft);
  margin-bottom: 2rem;
}

.prose .card { margin: 1.5rem 0; }

.contact-line {
  font-size: 1.05rem;
  font-weight: 500;
}

/* --- Footer ------------------------------------------------------------- */

.site-foot {
  border-top: 1px solid var(--hairline);
  padding-block: 2.25rem 3rem;
  font-size: 0.92rem;
  color: var(--body-soft);
}

.site-foot .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1.6rem;
  align-items: center;
  justify-content: space-between;
}

.site-foot nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.site-foot a { color: var(--body-soft); text-decoration: none; }
.site-foot a:hover { color: var(--forest); text-decoration: underline; }
.site-foot p { margin: 0; max-width: none; }

/* ==========================================================================
   Home — editorial launch page
   ========================================================================== */

.home {
  --home-display: "Cormorant Garamond", Georgia, serif;
  --home-sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --home-forest: #09140f;
  --home-forest-soft: #0e2519;
  --home-ivory: #f6f1e3;
  --home-paper: #fbf9f0;
  --home-gold: #c9a257;
  --home-gold-deep: #ad8038;
  --home-light-text: #f0ede0;
  --home-muted-light: #b5bab0;
  --home-ink: #0b1a13;
  --home-muted-ink: #474f4a;
  background: var(--home-forest);
  color: var(--home-light-text);
  font-family: var(--home-sans);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.55;
}

.home a { color: inherit; }

.home .home-shell {
  width: min(100% - 2.5rem, 1200px);
  margin-inline: auto;
}

.home-kicker {
  max-width: none;
  margin: 0 0 1.25rem;
  color: var(--home-gold);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.27em;
  text-transform: uppercase;
}

.home h1,
.home h2,
.home h3 {
  color: inherit;
  font-family: var(--home-display);
  font-weight: 600;
  letter-spacing: 0.005em;
  text-wrap: balance;
}

.home-nav {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 140px;
}

.home-wordmark {
  width: max-content;
  color: var(--home-gold) !important;
  font-family: var(--home-display);
  font-size: 2.125rem;
  font-weight: 600;
  letter-spacing: 0.235em;
  text-decoration: none;
}

.home-nav nav {
  display: flex;
  align-items: center;
  gap: 2.125rem;
}

.home-nav nav a,
.home-text-link,
.home-feature-links a,
.home-footer a {
  text-decoration: none;
}

.home-nav nav a {
  color: #c9cec6;
  font-size: 0.875rem;
  font-weight: 500;
}

.home-nav nav a:hover,
.home-text-link:hover,
.home-feature-links a:hover,
.home-footer nav a:hover { color: var(--home-gold); }

.home-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  min-height: 52px;
  padding: 0.94rem 1.625rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--home-gold);
  color: #172318 !important;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  transition: transform 180ms ease, background-color 180ms ease;
}

a.home-button:hover {
  background: #dab460;
  transform: translateY(-2px);
}

.home-button-small {
  justify-self: end;
  min-height: 44px;
  padding-inline: 1.375rem;
}

.home-hero {
  height: 1040px;
  overflow: hidden;
  background: var(--home-forest);
}

.home-hero-grid {
  display: grid;
  grid-template-columns: 650px minmax(0, 1fr);
  align-items: end;
  gap: clamp(2rem, 5vw, 6.5rem);
  height: 900px;
}

.home-hero-copy {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  padding: 65px 0 75px;
}

.home-hero h1 {
  margin: 0 0 1.25rem;
  color: var(--home-ivory);
  font-size: 6.5rem;
  line-height: 0.885;
  text-transform: uppercase;
}

.home-hero h1 span { color: var(--home-gold); }

.home-lede {
  max-width: 36rem;
  margin-bottom: 0;
  color: var(--home-light-text);
  font-size: 1.1875rem;
  line-height: 1.63;
  opacity: 0.9;
}

.home-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  margin-top: 2rem;
}

.home-text-link {
  color: var(--home-ivory);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.154em;
  text-transform: uppercase;
}

.home-text-link span { margin-left: 0.45rem; }

.home-feature-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.35rem;
}

.home-feature-links a,
.home-signoff {
  color: var(--home-gold-deep);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.155em;
  text-transform: uppercase;
}

.home-signoff {
  max-width: none;
  margin: auto 0 0;
  padding-top: 4rem;
}

.phone-stage {
  position: relative;
  display: flex;
  justify-content: center;
  min-width: 0;
}

.phone-stage-hero {
  align-items: flex-end;
  height: 100%;
}

.hero-halo {
  position: absolute;
  z-index: 0;
  width: 620px;
  max-width: none;
  right: -48px;
  top: 74px;
}

.figma-phone {
  position: relative;
  z-index: 1;
  width: 430px;
  height: 880px;
  margin: 0 -5px 24px auto;
}

.figma-phone-screen {
  position: absolute;
  left: 5.35%;
  top: 2.5%;
  width: 89.3%;
  height: 95%;
  border-radius: 34px;
  object-fit: cover;
  box-shadow: 0 24px 36px rgb(0 0 0 / 0.52);
}

.figma-phone-shell {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.rooted {
  position: relative;
  z-index: 2;
  height: 760px;
  padding: 86px 0 82px;
  background: var(--home-ivory);
  color: var(--home-ink);
}

.home-section-head {
  margin: 0 auto 34px;
  text-align: center;
}

.home-section-head .home-kicker { margin-bottom: 0.9rem; }

.home-section-head h2 {
  margin-bottom: 0.65rem;
  font-size: 3.625rem;
  line-height: 1.07;
  text-transform: uppercase;
}

.home-section-head > p:last-child {
  max-width: none;
  margin: 0;
  color: var(--home-muted-ink);
  font-size: 1rem;
}

.pillar-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pillar-grid li {
  display: flex;
  height: 390px;
  flex-direction: column;
  padding: 24px;
  border: 1px solid rgb(199 184 150 / 0.35);
  border-radius: 18px;
  background: var(--home-paper);
}

.pillar-number,
.pillar-label {
  color: var(--home-gold-deep);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.pillar-grid h3 {
  margin: 14px 0 0;
  font-size: 1.9375rem;
  line-height: 1.1;
  text-transform: uppercase;
}

.pillar-grid p {
  margin-bottom: 1.5rem;
  color: var(--home-muted-ink);
  font-size: 0.875rem;
  line-height: 1.57;
}

.pillar-label { margin-top: auto; }

.daily-story {
  overflow: hidden;
  min-height: 940px;
  padding: 70px 0 60px;
  background: var(--home-forest-soft);
}

.daily-story-grid {
  display: grid;
  grid-template-columns: 650px 520px;
  align-items: center;
  gap: 20px;
}

.phone-stage-pair {
  justify-content: flex-start;
  min-height: 810px;
}

.showcase-glow {
  position: absolute;
  z-index: 0;
  width: 670px;
  max-width: none;
  left: -50px;
  top: 30px;
}

.screen-carousel {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 810px;
}

.screen-carousel-track {
  position: relative;
  height: 735px;
  perspective: 1100px;
}

.carousel-slide {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 40px;
  width: 280px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) scale(0.58);
  transform-origin: center 58%;
  transition: opacity 520ms ease, transform 650ms cubic-bezier(0.22, 1, 0.36, 1), top 650ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}

.carousel-slide img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 30px;
  box-shadow: 0 22px 36px rgb(0 0 0 / 0.38);
}

.carousel-slide.is-current {
  z-index: 5;
  top: 0;
  width: 326px;
  opacity: 1;
  transform: translateX(-50%) scale(1) rotate(0deg);
}

.carousel-slide.is-prev,
.carousel-slide.is-next {
  z-index: 3;
  top: 48px;
  width: 284px;
  opacity: 0.52;
}

.carousel-slide.is-prev { transform: translateX(calc(-50% - 145px)) scale(0.82) rotate(-7deg); }
.carousel-slide.is-next { transform: translateX(calc(-50% + 145px)) scale(0.82) rotate(7deg); }

.carousel-slide.is-far-prev,
.carousel-slide.is-far-next {
  z-index: 2;
  top: 82px;
  width: 260px;
  opacity: 0.2;
}

.carousel-slide.is-far-prev { transform: translateX(calc(-50% - 235px)) scale(0.68) rotate(-11deg); }
.carousel-slide.is-far-next { transform: translateX(calc(-50% + 235px)) scale(0.68) rotate(11deg); }

.carousel-controls {
  position: absolute;
  z-index: 8;
  right: 62px;
  bottom: 0;
  left: 62px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
}

.carousel-step {
  min-height: 44px;
  padding: 0.55rem 0.9rem;
  border: 1px solid rgb(201 162 87 / 0.38);
  border-radius: 999px;
  background: rgb(9 20 15 / 0.55);
  color: var(--home-ivory);
  font: 500 0.7rem/1 var(--home-sans);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  cursor: pointer;
}

.carousel-step:first-child { justify-self: start; }
.carousel-step:last-child { justify-self: end; }

.carousel-step:hover {
  border-color: var(--home-gold);
  color: var(--home-gold);
}

.carousel-position {
  display: grid;
  min-width: 126px;
  justify-items: center;
  gap: 0.1rem;
  color: var(--home-ivory);
}

.carousel-current {
  font-family: var(--home-display);
  font-size: 1.05rem;
  line-height: 1.1;
}

.carousel-count {
  color: var(--home-gold);
  font-size: 0.58rem;
  letter-spacing: 0.18em;
}

.carousel-dots {
  position: absolute;
  z-index: 9;
  bottom: 51px;
  left: 50%;
  display: flex;
  gap: 0.42rem;
  translate: -50% 0;
}

.carousel-dot {
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.carousel-dot::before {
  display: block;
  width: 5px;
  height: 5px;
  margin: auto;
  border-radius: 50%;
  background: rgb(246 241 227 / 0.34);
  content: "";
  transition: width 180ms ease, background-color 180ms ease;
}

.carousel-dot[aria-current="true"]::before {
  width: 14px;
  border-radius: 999px;
  background: var(--home-gold);
}

.daily-story-copy h2,
.home-cta h2 {
  margin-bottom: 1.4rem;
  color: var(--home-ivory);
  font-size: 3.75rem;
  line-height: 1.02;
  text-transform: uppercase;
}

.home-cta h2 {
  font-size: 4.125rem;
  line-height: 0.97;
}

.daily-story-copy > p:not(.home-kicker),
.home-cta-grid > div > p:not(.home-kicker) {
  color: var(--home-muted-light);
  color: var(--home-light-text);
  font-size: 1.0625rem;
  line-height: 1.65;
  opacity: 0.9;
}

.story-steps {
  margin: 2.25rem 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgb(225 232 222 / 0.16);
}

.story-steps li {
  display: grid;
  grid-template-columns: 2.6rem 5.8rem 1fr;
  align-items: center;
  gap: 0.65rem;
  min-height: 57px;
  border-bottom: 1px solid rgb(225 232 222 / 0.16);
}

.story-steps span,
.story-steps b {
  color: var(--home-gold);
  font-size: 0.6875rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.story-steps p {
  margin: 0;
  color: #b6bdb4;
  font-size: 0.8125rem;
}

.home-cta {
  height: 600px;
  padding: 125px 0;
  background: var(--home-forest);
}

.home-cta-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);
  align-items: center;
  gap: 4rem;
}

.home-cta-grid > div > p:not(.home-kicker) { margin-bottom: 2rem; }

.home-cta-mark {
  justify-self: center;
  width: min(340px, 82%);
}

.home-footer {
  padding: 2.5rem 0;
  border-top: 1px solid rgb(225 232 222 / 0.08);
  background: #050907;
}

.home-footer .home-shell {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2rem;
}

.home-footer p {
  max-width: none;
  margin: 0;
  color: #707970;
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-align: center;
  text-transform: uppercase;
}

.home-footer nav {
  display: flex;
  justify-self: end;
  gap: 1rem;
}

.home-footer nav a {
  color: var(--home-gold-deep);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .home-nav { grid-template-columns: 1fr auto; }
  .home-nav nav { display: none; }

  .home-hero {
    height: 930px;
    min-height: auto;
  }

  .home-hero-grid {
    grid-template-columns: 1fr 0.72fr;
    height: 790px;
    min-height: 790px;
    gap: 2rem;
  }

  .home-hero-copy { padding-top: 4rem; }
  .home-hero h1 { font-size: clamp(4rem, 9vw, 5.5rem); }
  .home-signoff { padding-top: 3rem; }

  .figma-phone {
    width: min(340px, 100%);
    height: auto;
    aspect-ratio: 430 / 880;
    margin-bottom: 24px;
  }

  .hero-halo { width: 520px; right: -95px; }

  .rooted { height: auto; padding-block: 6rem; }
  .pillar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pillar-grid li { height: 320px; }

  .daily-story { height: auto; padding-block: 6rem; }
  .daily-story-grid { grid-template-columns: 0.9fr 1.1fr; gap: 2rem; }
  .phone-stage-pair { min-height: 680px; }
  .showcase-glow { width: 540px; left: -120px; }
  .screen-carousel { height: 680px; }
  .screen-carousel-track { height: 608px; }
  .carousel-slide.is-current { width: min(280px, 54vw); }
  .carousel-slide.is-prev,
  .carousel-slide.is-next { width: min(245px, 47vw); }
  .carousel-slide.is-prev { transform: translateX(calc(-50% - 105px)) scale(0.8) rotate(-7deg); }
  .carousel-slide.is-next { transform: translateX(calc(-50% + 105px)) scale(0.8) rotate(7deg); }
  .carousel-slide.is-far-prev,
  .carousel-slide.is-far-next { opacity: 0; }
  .carousel-controls { right: 0; left: 0; }
}

@media (max-width: 680px) {
  .home .home-shell { width: min(100% - 2rem, 1200px); }
  .home-nav { min-height: 88px; }
  .home-wordmark { font-size: 1.55rem; }
  .home-button-small { min-height: 38px; padding-inline: 1.1rem; }

  .home-hero { height: auto; }

  .home-hero-grid {
    grid-template-columns: 1fr;
    height: auto;
    min-height: auto;
  }

  .home-hero-copy {
    padding: 4rem 0 1rem;
    text-align: center;
  }

  .home-hero h1 { font-size: clamp(3.5rem, 18vw, 5.6rem); }
  .home-lede { margin-inline: auto; }
  .home-actions,
  .home-feature-links { justify-content: center; }
  .home-signoff { display: none; }

  .phone-stage-hero { min-height: 720px; padding-top: 1.5rem; }
  .figma-phone {
    width: min(330px, 88vw);
    height: auto;
    aspect-ratio: 430 / 880;
    margin-bottom: 24px;
  }
  .hero-halo { width: 470px; right: 50%; top: 25px; translate: 50% 0; }

  .rooted { height: auto; padding: 6rem 0; }
  .pillar-grid { grid-template-columns: 1fr; }
  .pillar-grid li { height: 300px; }

  .daily-story { height: auto; padding-block: 6rem; }
  .daily-story-grid { grid-template-columns: 1fr; }
  .phone-stage-pair { min-height: 675px; order: 2; }
  .showcase-glow { width: 560px; left: 50%; top: -15px; translate: -50% 0; }
  .screen-carousel { height: 675px; }
  .screen-carousel-track { height: 598px; }
  .carousel-slide.is-current { width: min(270px, 68vw); }
  .carousel-slide.is-prev,
  .carousel-slide.is-next { width: min(238px, 59vw); opacity: 0.4; }
  .carousel-slide.is-prev { transform: translateX(calc(-50% - 82px)) scale(0.78) rotate(-6deg); }
  .carousel-slide.is-next { transform: translateX(calc(-50% + 82px)) scale(0.78) rotate(6deg); }
  .carousel-controls { right: 0; left: 0; gap: 0.5rem; }
  .carousel-step { padding-inline: 0.7rem; font-size: 0.62rem; }
  .carousel-position { min-width: 104px; }
  .carousel-current { font-size: 0.95rem; }

  .daily-story-copy { text-align: center; }
  .story-steps { text-align: left; }

  .home-cta { height: auto; padding-block: 7rem; }
  .home-cta-grid { grid-template-columns: 1fr; text-align: center; }
  .home-cta h2 { font-size: clamp(3rem, 15vw, 4.125rem); }
  .home-cta .home-button { margin-inline: auto; }
  .home-cta-mark { width: 170px; }

  .home-footer .home-shell { grid-template-columns: 1fr; justify-items: center; }
  .home-footer nav { justify-self: center; flex-wrap: wrap; justify-content: center; }
}

@media (max-width: 420px) {
  .home-button:not(.home-button-small) { width: 100%; }
  .home-actions { align-items: stretch; }
  .story-steps li {
    grid-template-columns: 2rem 6.5rem 1fr;
    gap: 0.35rem;
  }
}