/* Colours are taken from the app itself: the sage header, the
   "All prayer" pill, and the orange flame button. */
:root {
  --paper: #f2f3ee;
  --ink: #1f261d;
  --moss: #33412e;
  --sage: #7f9f73;
  --lichen: #d6e0cd;
  --ember: #e4801f;
  --ember-deep: #c4640c;
  --muted: #5b6556;
  --line: #d3d8cc;
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

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

/* Scroll reveal: .reveal-on is only set when the observer can run and
   motion is allowed, so without it everything is simply visible. --i
   staggers items within a section. */
.reveal-on [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.7s ease,
    transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: calc(var(--i, 0) * 110ms);
}

.reveal-on [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--ember);
  outline-offset: 3px;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.02;
  text-wrap: balance;
}

h2 {
  font-size: clamp(2.25rem, 4.6vw, 3.5rem);
}

h3 {
  font-size: 1.25rem;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

p {
  margin: 0;
}

.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

section {
  padding: 120px 0;
}

section[id] {
  scroll-margin-top: 84px;
}

/* Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.btn-ember {
  background: var(--ember);
  color: #1d1305;
  padding: 16px 28px;
  font-size: 1rem;
}

.btn-ember:hover {
  background: #ee8c2c;
}

.btn-ember:disabled {
  opacity: 0.6;
  cursor: progress;
}

.btn-small {
  padding: 10px 18px;
  font-size: 0.9375rem;
}

/* Header */

/* A full-width frosted-glass bar. The negative margin lets the page run
   up underneath it, so the hero's sage (and later the fire) shows through. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  margin-bottom: -72px;
  background: rgba(246, 244, 236, 0.9);
  border-bottom: 1px solid rgba(31, 38, 29, 0.08);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .site-header {
    background: rgba(246, 244, 236, 0.6);
    -webkit-backdrop-filter: blur(8px) saturate(1.3);
    backdrop-filter: blur(8px) saturate(1.3);
  }
}

.header-inner {
  height: 72px;
  display: flex;
  align-items: center;
  gap: 32px;
}

.logo img {
  height: 26px;
  width: auto;
}

.nav {
  display: flex;
  gap: 28px;
  margin-left: auto;
}

.nav a {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
}

.nav a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Menu button: only shown on narrow screens, where the nav drops down under the bar. */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 11px;
  margin-right: -11px;
  border: 0;
  background: none;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--ink);
  border-radius: 1px;
  transition: transform 200ms ease, opacity 200ms ease;
}

.nav-open .nav-toggle span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-open .nav-toggle span:nth-child(2) {
  opacity: 0;
}

.nav-open .nav-toggle span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Hero: the phone stands across the line where the sage header meets the dark About section. */

.hero {
  padding: 0;
  background: linear-gradient(var(--sage) 0, var(--sage) calc(100% - 180px), var(--moss) calc(100% - 180px));
}

.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 56px;
  align-items: end;
  padding-top: 144px;
}

.hero-text {
  padding-bottom: 240px;
}

.hero h1 {
  font-size: clamp(3rem, 7.4vw, 6.25rem);
  letter-spacing: -0.045em;
  line-height: 0.94;
  color: var(--ink);
}

.hero .lede {
  margin-top: 28px;
  max-width: 30em;
  font-size: 1.25rem;
  line-height: 1.5;
  color: #243021;
}

.stores {
  margin-top: 40px;
}

.store-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.store {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px 10px 16px;
  border-radius: 12px;
  background: rgba(31, 38, 29, 0.14);
  color: rgba(31, 38, 29, 0.55);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.1;
  cursor: not-allowed;
  user-select: none;
}

.store img {
  width: 22px;
  height: 22px;
  opacity: 0.45;
  filter: grayscale(1);
}

.store small {
  display: block;
  font-size: 0.6875rem;
  font-weight: 500;
}

.store-note {
  margin-top: 12px;
  font-size: 0.9375rem;
  color: #243021;
}

.store-note a {
  font-weight: 700;
  text-underline-offset: 3px;
}

/* Phones: the screenshots are cropped to the device frame, so the
   radius only has to trim the corners outside it. */

.phone {
  margin: 0;
}

.phone img {
  width: 100%;
  height: auto;
  border-radius: 13% / 6.2%;
  box-shadow: 0 30px 60px -24px rgba(31, 38, 29, 0.45);
}

.phone-hero {
  max-width: 400px;
  justify-self: end;
  width: 100%;
  margin-bottom: 64px;
}

/* About: the fire photo's background is #050505 right to its edges, so
   the section uses the same black and the photo sits in the right half
   with no visible seam. The top fades in from the hero's moss.

   Scrolling drives two custom properties (set in index.html): --glow
   brightens the fire as the section arrives, and each word's --lit comes
   up as it reaches the middle of the screen. Both default to 1, so with
   no script or with reduced motion the section is simply fully lit. */

.about {
  --glow: 1;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #eef1ea;
  background: #050505;
  padding: 160px 0;
}

/* The moss fade sits above the fire so dimming the fire never shows a
   seam against the hero. */
.about::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 200px;
  z-index: -1;
  background: linear-gradient(var(--moss), rgba(5, 5, 5, 0));
  pointer-events: none;
}

.about::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  right: 0;
  z-index: -1;
  background: #050505 url("/assets/landing/images/fire.webp") center bottom / auto 100% no-repeat;
  opacity: calc(0.25 + 0.75 * var(--glow));
  transform: scale(calc(1.06 - 0.06 * var(--glow)));
  transform-origin: center bottom;
}

.about-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 96px;
  align-items: center;
}

.verse {
  margin: 0;
  max-width: 22em;
}

.verse p {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #eef1ea;
  text-indent: -0.4em;
}

.verse cite {
  display: block;
  margin-top: 10px;
  font-style: normal;
  font-size: 0.9375rem;
  color: #a9a296;
}

.about .name {
  margin-top: 88px;
  font-size: clamp(2.5rem, 4.6vw, 3.5rem);
  letter-spacing: -0.04em;
}

.definition {
  margin-top: 6px;
  font-size: 1.25rem;
  color: #a9a296;
}

.definition i {
  color: #eef1ea;
}

/* The one loud moment in the section: three words, stacked, warming from
   the app's sage green through candlelight to the flame's orange. */
.triad {
  margin-top: 56px;
  font-size: clamp(3.5rem, 8vw, 6.5rem);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.045em;
  color: #fff;
}

.triad span {
  --lit: 1;
  opacity: calc(0.14 + 0.86 * var(--lit));
}

.t-walk {
  color: #9dbb8f;
}

.t-pray {
  color: #f3e3c3;
}

.t-burn {
  color: #f08a24;
}

.mission {
  margin-top: 56px;
  max-width: 26em;
  font-size: 1.1875rem;
  color: #d8d2c6;
}

/* How a walk works */

/* The sun in the photo is top right, behind the steps, so shade that
   side hardest. */

.walk {
  color: #fff;
  background:
    linear-gradient(90deg, rgba(20, 16, 10, 0.45) 0%, rgba(20, 16, 10, 0.8) 45%, rgba(20, 16, 10, 0.9) 100%),
    #3a2f22 url("/assets/landing/images/walkers.webp") center 30% / cover no-repeat;
}

.walk-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 96px;
  align-items: center;
}

.walk .phone {
  max-width: 360px;
}

.steps {
  list-style: none;
  counter-reset: step;
  margin: 48px 0 0;
  padding: 0;
}

.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 56px 1fr;
  column-gap: 8px;
  padding: 28px 0;
  border-top: 2px solid rgba(255, 255, 255, 0.7);
}

.steps li::before {
  content: counter(step);
  grid-row: span 2;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  color: var(--ember);
}

.steps p {
  margin-top: 8px;
  max-width: 34em;
  color: #e6e1d8;
}

/* Together */

.together {
  background: var(--lichen);
}

.together-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 96px;
  align-items: center;
}

.together-text p {
  margin-top: 20px;
  max-width: 30em;
  font-size: 1.125rem;
  color: #2c3829;
}

.together-text h2 + p {
  margin-top: 28px;
  font-size: 1.3125rem;
  color: var(--ink);
}

.together .phone {
  max-width: 360px;
  justify-self: end;
  width: 100%;
}

/* Privacy */

.privacy h2 {
  max-width: 14em;
}

.privacy-intro {
  margin-top: 24px;
  max-width: 34em;
  font-size: 1.25rem;
  color: var(--muted);
}

.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 64px;
  margin: 56px 0 0;
}

.facts div {
  padding: 28px 0 32px;
  border-top: 1px solid var(--line);
}

.facts dt {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.facts dd {
  margin: 8px 0 0;
  max-width: 30em;
  color: var(--muted);
}

.privacy-more {
  margin-top: 24px;
  font-weight: 700;
}

.privacy-more a {
  text-underline-offset: 4px;
}

/* Testimonial */

.testimonial {
  padding: 40px 0 120px;
}

.testimonial figure {
  margin: 0 auto;
}

.testimonial blockquote {
  margin: 0;
  max-width: 24em;
  font-size: clamp(1.625rem, 3.2vw, 2.5rem);
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -0.02em;
  text-indent: -0.42em;
}

.testimonial figcaption {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.testimonial figcaption span {
  color: var(--muted);
}

/* Beta */

.beta {
  background: var(--moss);
  color: #eef1ea;
}

.beta-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 96px;
  align-items: start;
}

.beta-text p {
  margin-top: 24px;
  max-width: 28em;
  font-size: 1.1875rem;
  color: #c9d3c3;
}

.beta-form {
  display: flex;
  flex-direction: column;
}

.beta-form label {
  font-size: 0.9375rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.beta-form input {
  font: inherit;
  color: var(--ink);
  background: #fbfcf9;
  border: 2px solid transparent;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 20px;
}

.beta-form input:focus-visible {
  outline: none;
  border-color: var(--ember);
}

.beta-form .honey {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
}

.beta-form .btn {
  align-self: flex-start;
  margin-top: 4px;
}

.form-status {
  min-height: 1.55em;
  margin-top: 16px;
  font-size: 1rem;
}

.form-status.is-ok {
  color: #bfe0ae;
  font-weight: 700;
}

.form-status.is-error {
  color: #ffc19a;
}

/* Feedback */

.feedback {
  padding: 88px 0;
  background: var(--lichen);
}

.feedback-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
}

.feedback h2 {
  font-size: clamp(2rem, 3.6vw, 2.75rem);
}

.feedback-text p {
  margin-top: 16px;
  max-width: 32em;
  font-size: 1.125rem;
  color: #2c3829;
}

.btn-outline {
  flex-shrink: 0;
  padding: 14px 26px;
  font-size: 1rem;
  color: var(--ink);
  border: 2px solid var(--ink);
}

.btn-outline:hover {
  background: var(--ink);
  color: var(--lichen);
}

/* Donate */

.donate {
  padding: 100px 0;
}

.donate-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  text-align: center;
}

.donate-text p {
  margin: 24px auto 0;
  max-width: 30em;
  font-size: 1.1875rem;
  color: var(--muted);
}

.bank {
  margin: 0;
  border-top: 2px solid var(--ink);
}

.bank div {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: 16px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.bank dt {
  font-size: 0.9375rem;
  color: var(--muted);
}

.bank dd {
  margin: 0;
  font-weight: 700;
}

.bank-number {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.copy {
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--ink);
  background: transparent;
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 4px 14px;
  cursor: pointer;
}

.copy:hover {
  background: var(--ink);
  color: var(--paper);
}

/* Donate page */

.donate-page {
  padding: 168px 0 120px;
}

.donate-page .wrap > * {
  max-width: 640px;
}

.donate-page h1 {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  letter-spacing: -0.04em;
  line-height: 0.98;
}

.donate-lede {
  margin: 24px 0 48px;
  font-size: 1.25rem;
  color: var(--muted);
}

.donate-note {
  margin-top: 20px;
  font-size: 0.9375rem;
  color: var(--muted);
}

.donate-note a,
.donate-back a {
  color: var(--ink);
  text-underline-offset: 3px;
}

.donate-back {
  margin-top: 40px;
  font-weight: 700;
}

/* Footer */

.site-footer {
  background: var(--moss);
  color: #c9d3c3;
  font-size: 0.9375rem;
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  padding-top: 40px;
  padding-bottom: 48px;
  border-top: 1px solid rgba(238, 241, 234, 0.15);
}

.footer-inner img {
  width: auto;
  filter: brightness(0) invert(0.92);
}

.footer-logo {
  height: 22px;
  margin-bottom: 12px;
}

.footer-brand p + p {
  margin-top: 2px;
}

.supporter p {
  font-size: 0.8125rem;
}

.supporter img {
  height: 40px;
  margin-top: 6px;
}

.site-footer a {
  text-underline-offset: 3px;
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

/* Narrow screens */

@media (max-width: 880px) {
  section {
    padding: 80px 0;
  }

  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 8px 24px 16px;
    background: rgba(246, 244, 236, 0.97);
    border-bottom: 1px solid rgba(31, 38, 29, 0.08);
  }

  .nav-open .nav {
    display: flex;
  }

  .nav a {
    padding: 14px 0;
    font-size: 1.0625rem;
  }

  .nav a + a {
    border-top: 1px solid var(--line);
  }

  .nav-toggle {
    display: flex;
  }

  .site-header {
    margin-bottom: -64px;
  }

  .header-inner {
    height: 64px;
    gap: 16px;
  }

  .header-inner .btn {
    margin-left: auto;
  }

  .hero {
    background: linear-gradient(var(--sage) 0, var(--sage) calc(100% - 140px), var(--moss) calc(100% - 140px));
  }

  .hero-inner,
  .about-inner,
  .walk-inner,
  .together-inner,
  .beta-inner {
    grid-template-columns: 1fr;
    gap: 56px;
  }

  .hero-inner {
    padding-top: 112px;
  }

  .hero-text {
    padding-bottom: 0;
  }

  .phone-hero,
  .together .phone {
    justify-self: center;
    max-width: 300px;
    margin-bottom: 0;
  }

  .about {
    padding: 100px 0;
  }

  .about::before {
    left: 0;
    background:
      linear-gradient(rgba(5, 5, 5, 0.7), rgba(5, 5, 5, 0.55)),
      #050505 url("/assets/landing/images/fire.webp") center / cover no-repeat;
  }

  .walk {
    background:
      linear-gradient(rgba(20, 16, 10, 0.82), rgba(20, 16, 10, 0.72)),
      #3a2f22 url("/assets/landing/images/walkers.webp") 30% center / cover no-repeat;
  }

  .walk .phone {
    order: 2;
    justify-self: center;
    max-width: 300px;
    width: 100%;
  }

  .facts {
    grid-template-columns: 1fr;
  }

  .testimonial {
    padding: 0 0 80px;
  }

  .bank div {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .bank-number span {
    white-space: nowrap;
  }

  .feedback-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
  }

  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}