/*
 * The palmsend marketing site, open sign-up with the first offer
 * (docs/design/screens.md §13, frames woEot at 1440 and Z7Jyvm at 390).
 *
 * Hand-written, like marketing.css: no Tailwind, none of the app's
 * variables. Every class starts with site- and every variable with --site-,
 * so the legal pages can load this beside marketing.css for the nav without
 * either touching the other. Base styles hang on body.site-body, which only
 * the home page's root layout sets.
 *
 * The layout changes at 900px: above it the 1440 layout, fluid down to
 * there; below it the 390 layout, every band stacked, copy first. Under
 * 1200px only the gutter and a few gaps tighten.
 *
 * Bands alternate white and grey down the page, from the tinted hero to
 * the mint close, so each reads as its own section.
 */

:root {
  --site-navy: #0b2149;
  --site-ink: #13233f;
  --site-soft: #5b6b82;
  --site-quiet: #5c6f8a;
  --site-green: #10a37f;
  --site-green-hover: #0d8a6a;
  --site-tick: #e3f4ec;
  --site-rule: #e4e8ee;
  --site-line: #dde6ef;
  --site-grey: #f7f9fc;
  --site-blue: #0b6fbf;
  --site-shadow: 0 12px 32px rgba(11, 33, 73, 0.12);
  --site-card-shadow: 0 18px 44px rgba(11, 33, 73, 0.1);

  --site-heading: "Crimson Text", Georgia, serif;
  --site-text: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --site-wordmark: "Vollkorn", Georgia, serif;

  --site-gutter: 96px;
  --site-measure: 1248px;
  --site-nav-height: 81px;
}

@media (max-width: 1200px) {
  :root {
    --site-gutter: 56px;
  }
}

@media (max-width: 900px) {
  :root {
    --site-gutter: 22px;
    --site-nav-height: 69px;
  }
}

body.site-body {
  margin: 0;
  background: #fff;
  color: var(--site-ink);
  font-family: var(--site-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.site-body *,
.site-body *::before,
.site-body *::after,
.site-nav *,
.site-nav *::before,
.site-nav *::after {
  box-sizing: border-box;
}

.site-body img {
  max-width: 100%;
}

.site-body a:focus-visible,
.site-nav a:focus-visible,
.site-faq__q:focus-visible {
  outline: 2px solid var(--site-blue);
  outline-offset: 3px;
  border-radius: 4px;
}

.site-glyph {
  width: 20px;
  height: 20px;
  flex: none;
}

/* ------------------------------------------------------------ the frame */

.site-band__inner {
  max-width: calc(var(--site-measure) + 2 * var(--site-gutter));
  margin: 0 auto;
  padding-inline: var(--site-gutter);
}

.site-band {
  padding-block: 136px;
}

.site-band--grey {
  background: var(--site-grey);
}

.site-band--short-foot {
  padding-bottom: 96px;
}

.site-band--compact {
  padding-block: 128px;
}

.site-split {
  display: flex;
  align-items: center;
  gap: 96px;
}

.site-split--art-first {
  flex-direction: row-reverse;
}

.site-split > * {
  flex: 1 1 0;
  min-width: 0;
}

.site-split__copy {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* A list or callout after the words gets a little more air than a line. */
.site-split__copy > .site-ticks,
.site-split__copy > .site-callout {
  margin-top: 8px;
}

.site-split__art {
  display: flex;
  justify-content: center;
}

.site-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
}

.site-center__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}

/* The checks under a centered head may run wider than its words. */
.site-center__head > .site-title,
.site-center__head > .site-lede {
  max-width: 760px;
}

.site-eyebrow {
  margin: 0;
  color: var(--site-green);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.site-title {
  margin: 0;
  color: var(--site-navy);
  font-family: var(--site-heading);
  font-size: 48px;
  font-weight: 600;
  line-height: 51px;
  letter-spacing: -0.7px;
}

.site-lede {
  margin: 0;
  color: var(--site-soft);
  font-size: 19px;
  line-height: 30px;
}

.site-card {
  background: #fff;
  border-radius: 18px;
  box-shadow: var(--site-card-shadow);
  padding: 26px;
}

@media (max-width: 900px) {
  .site-band,
  .site-band--short-foot,
  .site-band--compact {
    padding-block: 96px;
  }

  .site-split,
  .site-split--art-first {
    flex-direction: column;
    align-items: stretch;
    gap: 72px;
  }

  .site-split__copy {
    gap: 24px;
  }

  .site-center {
    align-items: stretch;
    gap: 56px;
  }

  .site-center__head {
    align-items: flex-start;
    gap: 20px;
    max-width: none;
    text-align: left;
  }

  .site-title {
    font-size: 32px;
    line-height: 34px;
  }

  .site-lede {
    font-size: 17px;
    line-height: 27px;
  }

  .site-card {
    padding: 20px;
  }

}

/* ----------------------------------------------------- Start for $1 */

.site-start {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 12px;
  background: var(--site-green);
  color: #fff;
  font-family: var(--site-text);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease;
}

.site-start:hover {
  background: var(--site-green-hover);
}

.site-start--small {
  padding: 10px 18px;
  font-size: 15px;
}

.site-start--large {
  padding: 17px 30px;
  font-size: 18px;
}

.site-start--wide {
  width: 100%;
  padding: 15px 24px;
  font-size: 17px;
}

.site-terms {
  margin: 0;
  color: var(--site-soft);
  font-size: 14px;
  line-height: 22px;
}

@media (max-width: 900px) {
  .site-start--large {
    padding: 15px 26px;
  }

  .site-terms {
    font-size: 13px;
    line-height: 20px;
  }
}

/* --------------------------------------------------------------- ticks */

.site-ticks {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-ticks__item {
  display: flex;
  gap: 10px;
  color: var(--site-ink);
  font-size: 16px;
  line-height: 24px;
  text-align: left;
}

.site-ticks__tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 999px;
  background: var(--site-tick);
  color: var(--site-green);
}

.site-ticks__tick .site-glyph {
  width: 13px;
  height: 13px;
  stroke-width: 3;
}

.site-ticks--row {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 28px;
}

@media (max-width: 900px) {
  .site-ticks--row {
    flex-direction: column;
  }
}

/* ----------------------------------------------------------------- nav */

.site-nav {
  /* Pinned, so "Start for $1" is always on screen. */
  position: sticky;
  top: 0;
  z-index: 10;
  background: #fff;
  border-bottom: 1px solid var(--site-rule);
  font-family: var(--site-text);
}

/* A soft shadow once the page has scrolled, driven by the scroll itself so
   the pages need no script; browsers without scroll timelines keep just the
   hairline. */
@supports (animation-timeline: scroll()) {
  .site-nav {
    animation: site-nav-lift linear both;
    animation-timeline: scroll(root);
    animation-range: 0 24px;
  }
}

@keyframes site-nav-lift {
  to {
    box-shadow: 0 6px 18px rgba(11, 33, 73, 0.1);
  }
}

/* In-page links land with the band just under the nav, not behind it. */
.site-body section[id] {
  scroll-margin-top: var(--site-nav-height);
}

.site-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: calc(var(--site-measure) + 2 * var(--site-gutter));
  margin: 0 auto;
  padding: 20px var(--site-gutter);
}

.site-nav__links,
.site-nav__right {
  display: flex;
  align-items: center;
}

.site-nav__links {
  gap: 36px;
}

.site-nav__right {
  gap: 20px;
}

.site-nav__link {
  color: var(--site-ink);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
}

.site-nav__link:hover {
  color: var(--site-green);
}

.site-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.site-logo__mark {
  width: 18px;
  height: 25px;
}

.site-logo__word {
  color: var(--site-navy);
  font-family: var(--site-wordmark);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.4px;
}

.site-logo--small .site-logo__mark {
  width: 15px;
  height: 21px;
}

.site-logo--small .site-logo__word {
  font-size: 18px;
  letter-spacing: -0.3px;
}

@media (max-width: 900px) {
  .site-nav__inner {
    padding-block: 14px;
  }

  .site-nav__links,
  .site-nav__login {
    display: none;
  }
}

/* ---------------------------------------------------------------- hero */

.site-hero {
  position: relative;
  /* Its own layer, so the rings and the fade sit behind the words. */
  isolation: isolate;
  overflow: hidden;
  /* Ends in a tint, not white, so the white band after it has an edge. */
  background: linear-gradient(180deg, #eef4fb 0%, var(--site-grey) 100%);
  padding-block: 120px 136px;
}

/* The rings fade out over the last 180px. */
.site-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: -1;
  height: 180px;
  background: linear-gradient(180deg, rgba(247, 249, 252, 0), var(--site-grey));
}

.site-hero .site-split {
  gap: 72px;
}

.site-hero__copy {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.site-hero__title {
  margin: 0;
  color: var(--site-navy);
  font-family: var(--site-heading);
  font-size: 72px;
  font-weight: 600;
  line-height: 76px;
  letter-spacing: -0.7px;
}

.site-hero__action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding-top: 8px;
}

.site-hero__reassure {
  margin: 0;
  color: var(--site-soft);
  font-size: 14px;
}

.site-dot {
  margin-inline: 0.45em;
}

.site-hero__art {
  display: flex;
  justify-content: center;
}

@media (max-width: 900px) {
  .site-hero {
    padding-block: 64px 96px;
  }

  .site-hero .site-split {
    gap: 80px;
  }

  .site-hero__copy {
    gap: 28px;
  }

  .site-hero__title {
    font-size: 42px;
    line-height: 45px;
  }

  .site-hero__reassure {
    font-size: 13px;
  }
}

/* ------------------------------------------------ What churches send */

@media (min-width: 901px) {
  .site-cases > .site-center {
    gap: 72px;
  }
}

/* Each row is a split with a picture. */
.site-cases__list {
  display: flex;
  flex-direction: column;
  gap: 120px;
  width: 100%;
}

.site-case__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.site-case__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 13px;
  background: #e7f4fb;
  color: var(--site-blue);
}

.site-case__icon .site-glyph {
  width: 24px;
  height: 24px;
}

.site-case__title {
  margin: 0;
  color: var(--site-navy);
  font-family: var(--site-heading);
  font-size: 40px;
  font-weight: 600;
  line-height: 44px;
  letter-spacing: -0.5px;
}

.site-case__body {
  margin: 0;
  color: var(--site-soft);
  font-size: 18px;
  line-height: 29px;
}

.site-case__art {
  display: flex;
  justify-content: center;
}

/* A picture of a send, exported at twice its widest size; it scales down
   with its column rather than restacking at phone width. */
.site-case__image {
  display: block;
  width: 100%;
  height: auto;
}

.site-cases__more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.site-cases__label {
  margin: 0;
  color: var(--site-navy);
  font-size: 15px;
  font-weight: 600;
}

.site-cases__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-cases__chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--site-rule);
  border-radius: 999px;
  background: var(--site-grey);
  color: var(--site-navy);
  font-size: 14px;
  font-weight: 500;
}

.site-cases__chip .site-glyph {
  width: 15px;
  height: 15px;
  color: var(--site-blue);
}

@media (max-width: 900px) {
  .site-cases__list {
    gap: 88px;
  }

  .site-case.site-split {
    gap: 40px;
  }

  .site-case__copy {
    gap: 16px;
  }

  .site-case__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
  }

  .site-case__icon .site-glyph {
    width: 22px;
    height: 22px;
  }

  .site-case__title {
    font-size: 30px;
    line-height: 33px;
    letter-spacing: -0.4px;
  }

  .site-case__body {
    font-size: 16px;
    line-height: 26px;
  }

  .site-cases__more {
    align-items: flex-start;
  }

  .site-cases__chips {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* ------------------------------------------ the iPhone Messages picture */

/* An SMS thread as iOS Messages shows it (PalmsendWeb.Marketing.Components'
   phone), in the system font so Apple devices draw it in SF Pro. Sized in
   em so the 390 phone is the same drawing at 86%. */
.site-ios {
  width: 31em;
  height: 60em;
  padding: 1.1em;
  border-radius: 4.6em;
  background: #06112a;
  box-shadow: 0 24px 60px rgba(11, 33, 73, 0.25);
  font-size: 10px;
}

.site-ios__screen {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: 3.6em;
  background: #fff;
  color: #000;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif;
}

.site-ios__app {
  display: contents;
}

.site-ios__screen p {
  margin: 0;
}

.site-ios__glass {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0.2em 1em rgba(0, 0, 0, 0.12);
}

.site-ios__status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.07em 1.73em 0.27em 2.13em;
  font-size: 1.5em;
  font-weight: 600;
}

.site-ios__icons {
  display: inline-flex;
  align-items: center;
  gap: 0.33em;
}

.site-ios__icons .site-glyph {
  width: 1em;
  height: 1em;
}

.site-ios__icons .site-ios__battery {
  width: 1.27em;
  height: 1.27em;
}

.site-ios__head {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 0.2em 1.2em 0.4em;
}

.site-ios__back {
  position: absolute;
  top: 0.2em;
  left: 1.2em;
  width: 3.4em;
  height: 3.4em;
}

.site-ios__back .site-glyph {
  width: 2em;
  height: 2em;
}

.site-ios__contact {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.site-ios__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.74em;
  height: 2.74em;
  border-radius: 999px;
  background: linear-gradient(#a3ace6, #727fcb);
  color: #fff;
  font-size: 1.9em;
  font-weight: 600;
}

.site-ios__name {
  position: relative;
  gap: 0.17em;
  margin-top: -0.83em;
  padding: 0.33em 0.75em 0.33em 0.92em;
  font-size: 1.2em;
  font-weight: 600;
}

.site-ios__name .site-glyph {
  width: 0.92em;
  height: 0.92em;
  color: #8e8e93;
}

.site-ios__thread {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.5em;
  min-height: 0;
  padding: 0 1.4em 0.4em;
  overflow: hidden;
}

.site-ios__when {
  padding: 0.55em 0 0.18em;
  color: #8e8e93;
  font-size: 1.1em;
  text-align: center;
}

.site-ios__when strong {
  font-weight: 600;
}

.site-ios__in,
.site-ios__out {
  max-width: 16.3em;
  padding: 0.59em 0.89em;
  border-radius: 1.33em;
  font-size: 1.35em;
  line-height: 1.3;
}

.site-ios__in {
  align-self: flex-start;
  background: #e9e9eb;
}

.site-ios__out {
  align-self: flex-end;
  background: #6cd36e;
  color: #fff;
}

/* Two or three photos arrive as a loose collage, each overlapping the one
   before, with the Save button beside them. */
.site-ios__collage {
  position: relative;
  flex: none;
  height: 28.2em;
}

.site-ios__photo {
  position: absolute;
  width: 15.2em;
  height: 10.6em;
  border-radius: 1.8em;
  object-fit: cover;
}

.site-ios__photo:nth-child(1) {
  top: 0;
  left: 3.8em;
}

.site-ios__photo:nth-child(2) {
  top: 8.8em;
  left: 0;
}

.site-ios__photo:nth-child(3) {
  top: 17.6em;
  left: 2.6em;
}

.site-ios__save {
  position: absolute;
  top: 12.4em;
  left: 20.6em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3em;
  height: 3em;
  border-radius: 999px;
  background: #ededf0;
  color: #0a84ff;
}

.site-ios__save .site-glyph {
  width: 1.5em;
  height: 1.5em;
}

.site-ios__input {
  display: flex;
  align-items: center;
  gap: 0.8em;
  padding: 0.6em 1.2em;
}

.site-ios__plus {
  flex: none;
  width: 3.4em;
  height: 3.4em;
}

.site-ios__plus .site-glyph {
  width: 1.8em;
  height: 1.8em;
}

.site-ios__field {
  flex: 1;
  justify-content: space-between;
  height: 2.62em;
  padding: 0 0.77em 0 1em;
  color: #a3a3a8;
  font-size: 1.3em;
}

.site-ios__field .site-glyph {
  width: 1.23em;
  height: 1.23em;
  color: #8e8e93;
}

.site-ios__home {
  align-self: center;
  width: 11em;
  height: 0.5em;
  margin: 0.4em 0 0.8em;
  border-radius: 999px;
  background: #000;
}

@media (max-width: 900px) {
  .site-ios {
    font-size: 8.6px;
  }
}

/* ------------------------------------------------------ the hero phone */

/* The Messages phone at 300×630, its screen an image of Palmsend's Send
   screen, over rings spreading from behind it. */
.site-hero-phone {
  position: relative;
}

.site-hero-phone__rings {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: 1760px;
  height: 1760px;
  transform: translate(-50%, -50%);
}

.site-hero-phone__narrow {
  display: none;
}

.site-ios.site-ios--hero {
  width: 30em;
  height: 63em;
  padding: 0.95em;
  border-radius: 3.96em;
  font-size: 10px;
}

.site-ios--hero .site-ios__screen {
  position: relative;
  /* Keeps the sliding layers inside the rounded corners in Safari. */
  isolation: isolate;
  border-radius: 3.1em;
}

.site-hero-phone__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*
 * The send animation (the hero_animation flag): one 9.9s loop, each layer
 * keyed to the storyboard's seconds as a share of it (1.4s is 14.14%).
 * Every layer rests at the first keyframe, so with reduced motion the
 * phone shows the Send screen still.
 *
 *  0–1.4s  the Send screen          5.6–6.2s  Messages out right, Inbox in
 *  1.4–1.8s  Send now is tapped     6.2–6.5s  the reply crossfades in
 *  1.8–2.4s  Messages slides in     9.5–9.9s  back to the Send screen
 *  2.4–2.75s  the text arrives
 *  4.2–4.55s  Maria replies
 */
.site-ios--animated .site-ios__app {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
}

.site-hero-phone__press,
.site-hero-phone__tap {
  position: absolute;
  pointer-events: none;
}

/* Over the Send now button in the image: 16, 716, 358×44 of 390×844. */
.site-hero-phone__press {
  top: 84.83%;
  left: 4.1%;
  width: 91.8%;
  height: 5.21%;
  border-radius: 0.8em;
}

.site-hero-phone__tap {
  top: 87.44%;
  left: 50%;
  width: 4.4em;
  height: 4.4em;
  border-radius: 50%;
  background: rgba(11, 33, 73, 0.18);
  opacity: 0;
}

.site-hero-phone__inbox {
  transform: translateX(-100%);
}

.site-hero-phone__reply-in {
  opacity: 0;
}

.site-hero-phone__arrive {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

.site-hero-phone__arrive,
.site-hero-phone__reply {
  max-height: 0;
  opacity: 0;
  transform: translateY(2.4em);
}

.site-ios__out.site-hero-phone__reply {
  padding-block: 0;
}

@keyframes site-hero-send {
  0%,
  18.18% {
    transform: none;
    opacity: 1;
    animation-timing-function: ease-in-out;
  }

  24.24% {
    transform: translateX(-100%);
    opacity: 1;
  }

  /* Back in place, hidden, until the Inbox covers it. */
  24.25%,
  62.62% {
    transform: none;
    opacity: 0;
  }

  62.63%,
  100% {
    transform: none;
    opacity: 1;
  }
}

@keyframes site-hero-press {
  0%,
  14.14% {
    background: rgba(11, 33, 73, 0);
  }

  15.66% {
    background: rgba(11, 33, 73, 0.12);
  }

  17.17% {
    background: rgba(11, 33, 73, 0.12);
  }

  18.18%,
  100% {
    background: rgba(11, 33, 73, 0);
  }
}

@keyframes site-hero-tap {
  0%,
  14.14% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.3);
  }

  14.15% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.3);
    animation-timing-function: ease-out;
  }

  18.18%,
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.4);
  }
}

@keyframes site-hero-messages {
  0%,
  18.18% {
    transform: translateX(100%);
    animation-timing-function: ease-in-out;
  }

  24.24%,
  56.57% {
    transform: none;
    animation-timing-function: ease-in-out;
  }

  62.63%,
  100% {
    transform: translateX(100%);
  }
}

@keyframes site-hero-arrive {
  0%,
  24.24% {
    max-height: 0;
    opacity: 0;
    transform: translateY(2.4em);
    animation-timing-function: ease-out;
  }

  27.78%,
  100% {
    max-height: 20em;
    opacity: 1;
    transform: none;
  }
}

@keyframes site-hero-reply {
  0%,
  42.42% {
    max-height: 0;
    padding-block: 0;
    opacity: 0;
    transform: translateY(2.4em);
    animation-timing-function: ease-out;
  }

  45.96%,
  100% {
    max-height: 10em;
    padding-block: 0.59em;
    opacity: 1;
    transform: none;
  }
}

@keyframes site-hero-inbox {
  0%,
  56.57% {
    transform: translateX(-100%);
    opacity: 1;
    animation-timing-function: ease-in-out;
  }

  62.63%,
  95.96% {
    transform: none;
    opacity: 1;
  }

  100% {
    transform: none;
    opacity: 0;
  }
}

@keyframes site-hero-reply-in {
  0%,
  62.63% {
    opacity: 0;
  }

  65.66%,
  95.96% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

/* Only for those who haven't asked for less motion; everyone else keeps
   the layers at rest, on the Send screen. */
@media (prefers-reduced-motion: no-preference) {
  .site-ios--animated .site-ios__app {
    animation: site-hero-messages 9.9s infinite;
  }

  .site-ios--animated .site-hero-phone__send {
    animation: site-hero-send 9.9s infinite;
  }

  .site-hero-phone__press {
    animation: site-hero-press 9.9s infinite;
  }

  .site-hero-phone__tap {
    animation: site-hero-tap 9.9s infinite;
  }

  .site-hero-phone__inbox {
    animation: site-hero-inbox 9.9s infinite;
  }

  .site-hero-phone__reply-in {
    animation: site-hero-reply-in 9.9s infinite;
  }

  .site-hero-phone__arrive {
    animation: site-hero-arrive 9.9s infinite;
  }

  .site-hero-phone__reply {
    animation: site-hero-reply 9.9s infinite;
  }
}

@media (max-width: 900px) {
  .site-hero-phone__narrow {
    display: inline;
  }
}

/* ------------------------------------------------ the Send screenshots */

.site-screens {
  position: relative;
  width: min(1016px, 100%);
  aspect-ratio: 1016 / 560;
}

.site-screens img {
  position: absolute;
  height: auto;
}

.site-screens__desktop {
  left: 19.49%;
  top: 12.68%;
  width: 72.93%;
  border-radius: 10px;
  box-shadow: 0 4px 26px rgba(0, 0, 0, 0.25);
}

.site-screens__phone {
  left: 38.98%;
  top: 0;
  width: 34.35%;
}

@media (max-width: 900px) {
  .site-screens {
    width: 300px;
    max-width: 100%;
    margin-inline: auto;
    aspect-ratio: auto;
  }

  .site-screens .site-screens__desktop {
    display: none;
  }

  .site-screens .site-screens__phone {
    position: static;
    width: 100%;
  }
}

/* -------------------------------------------------- the QR and inbox cards */

.site-qr {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 380px;
  max-width: 100%;
}

.site-qr__code {
  flex: none;
  width: 120px;
  height: 120px;
  padding: 4px;
}

.site-qr__how {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--site-quiet);
  font-size: 15px;
}

.site-qr__how strong {
  color: var(--site-navy);
  font-size: 17px;
  font-weight: 600;
}

.site-qr__how .site-qr__scan {
  font-size: 21px;
}

.site-inbox {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 420px;
  max-width: 100%;
}

.site-inbox__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  color: var(--site-navy);
  font-size: 19px;
}

.site-inbox__head strong {
  font-weight: 600;
}

.site-inbox__new {
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--site-green);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}

.site-inbox__row {
  display: flex;
  gap: 12px;
  padding-block: 12px;
  border-bottom: 1px solid var(--site-line);
}

.site-inbox__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: #e3eaf4;
  color: var(--site-navy);
  font-size: 13px;
  font-weight: 600;
}

.site-inbox__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 3px;
  color: var(--site-quiet);
  font-size: 14px;
}

.site-inbox__top {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
}

.site-inbox__top strong {
  color: var(--site-navy);
  font-size: 15px;
  font-weight: 600;
}

.site-callout {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  background: #f4f7fb;
}

/* On a grey band the callout is white, or it would vanish into it. */
.site-band--grey .site-callout {
  background: #fff;
  box-shadow: 0 0 0 1px var(--site-line);
}

.site-callout__icon {
  color: var(--site-navy);
}

.site-callout p {
  margin: 0;
  color: var(--site-quiet);
  font-size: 15px;
  line-height: 23px;
}

.site-callout strong {
  display: block;
  margin-bottom: 2px;
  color: var(--site-navy);
  font-size: 16px;
  font-weight: 600;
}

@media (max-width: 900px) {
  .site-inbox {
    width: 100%;
  }
}

/* ----------------------------------------------------- Build your list */

/* Four ways in, two by two; three across without Planning Center. Every
   picture is centred in an area of one height, so the titles line up. */
@media (min-width: 901px) {
  .site-contacts > .site-center {
    gap: 72px;
  }
}

.site-contacts .site-center__head > .site-title,
.site-contacts .site-center__head > .site-lede {
  max-width: 800px;
}

.site-ways {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 88px 80px;
  width: 100%;
}

/* Three across only where a column still fits the pictures (about 330px);
   narrower, the three sit two by two. */
@media (min-width: 1200px) {
  .site-ways--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 56px;
  }
}

.site-way {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.site-way__art {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 380px;
}

/* The pictures fill a three-across column, up to their own width. */
.site-way__art > * {
  width: 100%;
}

.site-way__copy {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.site-way__head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.site-way__icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: #e7f4fb;
  color: var(--site-blue);
}

.site-way__title {
  margin: 0;
  color: var(--site-navy);
  font-family: var(--site-heading);
  font-size: 30px;
  font-weight: 600;
  line-height: 33px;
  letter-spacing: -0.3px;
}

.site-way__body {
  margin: 0;
  color: var(--site-soft);
  font-size: 17px;
  line-height: 27px;
}

/* The join thread: a text and the church's reply, as Messages shows them. */
.site-join {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 380px;
  padding: 18px;
  border: 1px solid var(--site-rule);
  border-radius: 22px;
  background: #fff;
  box-shadow: var(--site-shadow);
  color: #000;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif;
}

.site-join p {
  margin: 0;
}

.site-join__when {
  color: #8e8e93;
  font-size: 11px;
  text-align: center;
}

.site-join__when strong {
  font-weight: 600;
}

.site-join__in,
.site-join__out {
  padding: 8px 12px;
  border-radius: 18px;
  font-size: 13.5px;
  line-height: 1.3;
}

.site-join__in {
  align-self: flex-start;
  max-width: 270px;
  background: #e9e9eb;
}

.site-join__out {
  align-self: flex-end;
  background: #6cd36e;
  color: #fff;
}

.site-way .site-qr {
  max-width: 380px;
}

/* Pictures of the app's own cards: Planning Center and the import review. */
.site-app {
  display: flex;
  flex-direction: column;
  max-width: 400px;
  padding: 18px;
  border: 1px solid var(--site-rule);
  border-radius: 22px;
  background: #fff;
  box-shadow: var(--site-shadow);
  color: var(--site-navy);
}

.site-app p {
  margin: 0;
}

.site-app .site-glyph {
  color: var(--site-quiet);
}

.site-app__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  color: var(--site-quiet);
  font-size: 13px;
  line-height: 1.3;
}

.site-app__text strong {
  color: var(--site-navy);
  font-size: 14px;
  font-weight: 600;
}

.site-app__text .site-app__small {
  font-size: 12px;
}

/* Grey, like every button in a picture of the app. */
.site-app__button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 10px;
  background: var(--site-rule);
  color: var(--site-navy);
  font-size: 14px;
}

.site-app__button .site-glyph {
  width: 16px;
  height: 16px;
  color: var(--site-navy);
}

.site-badge {
  flex: none;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
}

.site-badge--ok {
  background: rgba(13, 138, 106, 0.12);
  color: #0d8a6a;
}

.site-badge--fixed {
  background: #e7f4fb;
  color: var(--site-navy);
}

.site-badge--duplicate {
  background: #f1f6fa;
  color: var(--site-quiet);
}

.site-badge--invalid {
  background: rgba(220, 38, 38, 0.12);
  color: #dc2626;
}

.site-pco {
  gap: 6px;
}

.site-pco__connection,
.site-pco__list {
  display: flex;
  align-items: center;
  gap: 12px;
}

.site-pco__connection {
  padding: 14px;
  border: 1px solid var(--site-line);
  border-radius: 10px;
}

.site-pco__link {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(13, 138, 106, 0.12);
}

.site-pco .site-pco__link .site-glyph {
  width: 18px;
  height: 18px;
  color: #0d8a6a;
}

.site-pco__list {
  padding: 12px 14px;
  border-bottom: 1px solid var(--site-line);
}

.site-pco__sync {
  align-self: flex-end;
  height: 36px;
  margin-top: 6px;
  padding: 0 16px;
  font-weight: 500;
}

.site-import {
  gap: 12px;
}

.site-import__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-import__head strong {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
}

.site-import .site-import__head .site-glyph {
  width: 16px;
  height: 16px;
  color: var(--site-navy);
}

.site-import__head span,
.site-import__summary {
  color: var(--site-soft);
  font-size: 13px;
}

.site-import__head span {
  font-size: 12px;
  font-weight: 600;
}

.site-import__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--site-rule);
}

.site-import__add {
  height: 40px;
  border-radius: 8px;
  font-weight: 600;
}

@media (max-width: 900px) {
  .site-ways,
  .site-ways--three {
    grid-template-columns: minmax(0, 1fr);
    gap: 64px;
  }

  .site-way__art {
    min-height: 0;
  }

  .site-way__title {
    font-size: 26px;
    line-height: 29px;
  }

  .site-way__body {
    font-size: 15px;
    line-height: 24px;
  }
}

/* ------------------------------------------------------------- pricing */

.site-plan__badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #e8f6f0;
  color: #0b6b52;
  font-size: 14px;
  font-weight: 600;
}

.site-plan__badge .site-glyph {
  width: 15px;
  height: 15px;
  color: var(--site-green);
}

.site-plan__check {
  width: 17px;
  height: 17px;
  color: var(--site-green);
}

/* The plans as one table: prices across the top, what you get down the
   side, one start button under it. */
.site-prices {
  width: 900px;
  max-width: 100%;
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(var(--site-green) 0 6px, #fff 6px);
  box-shadow: 0 24px 60px rgba(11, 33, 73, 0.12);
  text-align: left;
}

.site-prices__table {
  width: 100%;
  border-collapse: collapse;
  color: var(--site-navy);
  font-size: 16px;
}

.site-prices__table th,
.site-prices__table td {
  padding: 16px 32px;
  border-bottom: 1px solid var(--site-rule);
}

.site-prices__table tbody th {
  font-weight: 400;
  text-align: left;
}

.site-prices__table tbody td {
  width: 220px;
  font-weight: 600;
  text-align: center;
}

.site-prices__table td small {
  display: block;
  color: var(--site-quiet);
  font-size: 13px;
  font-weight: 400;
}

.site-prices__table thead td,
.site-prices__table thead th {
  padding-top: 34px;
  padding-bottom: 28px;
  vertical-align: bottom;
}

.site-prices__plan {
  color: var(--site-quiet);
  font-size: 14px;
  font-weight: 500;
  text-align: center;
}

.site-prices__plan strong {
  display: block;
  color: var(--site-navy);
  font-size: 46px;
  font-weight: 600;
  line-height: 50px;
  letter-spacing: -1.4px;
}

.site-prices__table .site-prices__texts th {
  font-weight: 600;
}

.site-prices__table .site-plan__check {
  vertical-align: middle;
}

.site-prices__badge {
  margin: 0;
}

.site-prices__foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 28px 32px;
  background: var(--site-grey);
}

.site-prices__foot .site-start {
  width: 420px;
  max-width: 100%;
}

.site-prices__foot .site-terms {
  margin: 0;
  color: var(--site-quiet);
  font-size: 13px;
  line-height: 20px;
  text-align: center;
}

.site-prices__badge--foot {
  display: none;
}

.site-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 900px) {
  .site-prices__table {
    font-size: 14px;
  }

  .site-prices__table th,
  .site-prices__table td {
    padding: 14px 16px;
  }

  .site-prices__table tbody td {
    width: 76px;
    padding-inline: 4px;
  }

  .site-prices__table td small {
    font-size: 11px;
  }

  .site-prices__table .site-prices__plan {
    padding-inline: 4px;
    font-size: 12px;
    white-space: nowrap;
  }

  .site-prices__plan strong {
    font-size: 28px;
    line-height: 32px;
  }

  .site-prices__table thead .site-prices__lead .site-prices__badge {
    display: none;
  }

  .site-prices__badge--foot {
    display: inline-flex;
    align-self: center;
  }

  .site-prices__foot {
    padding: 20px 16px;
  }
}

/* Getting started's call to sign up, under its lede. */
.site-getting-started__action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 8px;
}

.site-getting-started__action .site-terms {
  margin: 0;
  text-align: center;
}

@media (max-width: 900px) {
  .site-getting-started__action {
    align-items: flex-start;
  }

  .site-getting-started__action .site-terms {
    text-align: left;
  }
}

/* ----------------------------------------------------------------- FAQ */

.site-faq__inner {
  display: flex;
  align-items: flex-start;
  gap: 96px;
}

.site-faq__main {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 32px;
  min-width: 0;
}

.site-faq__list {
  border-top: 1px solid var(--site-rule);
}

.site-faq__item {
  border-bottom: 1px solid var(--site-rule);
}

.site-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 20px;
  color: var(--site-navy);
  font-size: 18px;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

.site-faq__q::-webkit-details-marker {
  display: none;
}

.site-faq__icon {
  color: var(--site-soft);
}

/* Open, the plus loses its upright and reads as a minus. */
.site-faq__item[open] .site-faq__icon path:nth-child(2) {
  display: none;
}

.site-faq__a {
  margin: -10px 0 0;
  padding-bottom: 20px;
  color: var(--site-soft);
  font-size: 16px;
  line-height: 26px;
}

/* The message card (PalmsendWeb.Marketing.QuestionForm), beside the FAQ
   and on the support page. Scoped to those two, because its class names
   have no site- prefix. */
:is(.site-faq, .site-support) .ask {
  flex: none;
  width: 440px;
  padding: 32px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 14px 36px rgba(11, 33, 73, 0.18);
}

:is(.site-faq, .site-support) .ask__title {
  margin: 0;
  color: var(--site-navy);
  font-size: 20px;
  font-weight: 700;
}

:is(.site-faq, .site-support) .ask__body {
  margin: 4px 0 18px;
  color: var(--site-quiet);
  font-size: 15px;
  line-height: 23px;
}

:is(.site-faq, .site-support) .form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

:is(.site-faq, .site-support) .form__row {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

:is(.site-faq, .site-support) .form__label {
  color: var(--site-navy);
  font-size: 13px;
  font-weight: 600;
}

:is(.site-faq, .site-support) .form__input {
  width: 100%;
  min-height: 44px;
  padding: 11px 14px;
  border: 1px solid var(--site-line);
  border-radius: 10px;
  background: #fff;
  color: var(--site-navy);
  font-family: inherit;
  font-size: 16px;
}

:is(.site-faq, .site-support) .form__input::placeholder {
  color: var(--site-quiet);
}

:is(.site-faq, .site-support) .form__input:focus {
  border-color: var(--site-blue);
  outline: 2px solid rgba(11, 111, 191, 0.2);
  outline-offset: 0;
}

:is(.site-faq, .site-support) .form__input--long {
  min-height: 110px;
  resize: vertical;
}

:is(.site-faq, .site-support) .form__input--bad {
  border-color: #dc2626;
}

:is(.site-faq, .site-support) .form__error {
  margin: 0;
  color: #dc2626;
  font-size: 13px;
}

:is(.site-faq, .site-support) .form__notice {
  margin: 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(217, 119, 6, 0.12);
  color: #92400e;
  font-size: 15px;
  line-height: 1.5;
}

:is(.site-faq, .site-support) .form__submit {
  width: 100%;
  min-height: 48px;
  border: 0;
  border-radius: 10px;
  background: var(--site-green);
  color: #fff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

:is(.site-faq, .site-support) .form__submit:hover {
  background: var(--site-green-hover);
}

/* Off-screen rather than display:none: some bots skip hidden inputs. */
:is(.site-faq, .site-support) .form__trap {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

:is(.site-faq, .site-support) .sent {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

:is(.site-faq, .site-support) .sent__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: var(--site-tick);
  color: var(--site-green);
}

:is(.site-faq, .site-support) .sent__title {
  margin: 0;
  color: var(--site-navy);
  font-family: var(--site-heading);
  font-size: 26px;
  font-weight: 600;
}

:is(.site-faq, .site-support) .sent__body {
  margin: 0;
  color: var(--site-soft);
  line-height: 1.6;
}

:is(.site-faq, .site-support) .sent__body strong {
  color: var(--site-navy);
  font-weight: 500;
}

@media (max-width: 1200px) {
  .site-faq__inner {
    gap: 48px;
  }

  :is(.site-faq, .site-support) .ask {
    flex: 0 1 440px;
    min-width: 340px;
  }
}

@media (max-width: 900px) {
  .site-faq__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 64px;
  }

  .site-faq__main {
    gap: 24px;
  }

  :is(.site-faq, .site-support) .ask {
    flex: none;
    width: 100%;
    min-width: 0;
    padding: 20px;
  }

  :is(.site-faq, .site-support) .ask__title {
    font-size: 19px;
  }
}

/* ------------------------------------------------------------- support */

/* The /support page (PalmsendWeb.Marketing.SupportLive), one grey band:
   the heading over the quick answers, the card beside them. On a phone
   the card comes between the two. */
.site-support {
  display: block;
  padding-block: 96px 136px;
  background: var(--site-grey);
}

.site-support__inner {
  display: grid;
  grid-template-areas:
    "head card"
    "answers card";
  grid-template-columns: minmax(0, 1fr) 440px;
  grid-template-rows: auto 1fr;
  align-items: start;
  gap: 48px 96px;
}

.site-support__head {
  display: flex;
  grid-area: head;
  flex-direction: column;
  gap: 20px;
}

.site-support .ask {
  grid-area: card;
  width: auto;
  border: 1px solid var(--site-line);
}

.site-support__answers {
  display: flex;
  grid-area: answers;
  flex-direction: column;
  gap: 12px;
}

.site-support__answers-title {
  margin: 0;
  color: var(--site-navy);
  font-family: var(--site-heading);
  font-size: 26px;
  font-weight: 600;
}

@media (max-width: 1200px) {
  .site-support__inner {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 440px);
    column-gap: 48px;
  }
}

@media (max-width: 900px) {
  .site-support {
    padding-block: 48px 96px;
  }

  .site-support__inner {
    grid-template-areas:
      "head"
      "card"
      "answers";
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    row-gap: 32px;
  }

  .site-support__head {
    gap: 12px;
  }

  .site-support__answers {
    padding-top: 16px;
  }

  .site-support__answers-title {
    font-size: 24px;
  }
}

/* ------------------------------------------------------------- closing */

.site-closing {
  padding-block: 144px;
  background: #ecf6f1 url("/marketing/images/waves.webp") center / cover no-repeat;
}

.site-closing .site-center {
  gap: 32px;
}

.site-closing__title {
  margin: 0;
  color: var(--site-navy);
  font-family: var(--site-heading);
  font-size: 64px;
  font-weight: 600;
  line-height: 68px;
  letter-spacing: -0.7px;
  text-align: center;
}

.site-closing .site-terms {
  max-width: 520px;
  text-align: center;
}

@media (max-width: 900px) {
  .site-closing {
    padding-block: 104px;
    background-image: url("/marketing/images/waves-mobile.webp");
  }

  .site-closing .site-center {
    align-items: center;
    gap: 24px;
  }

  .site-closing__title {
    font-size: 36px;
    line-height: 38px;
  }
}

/* -------------------------------------------------------------- footer */

/* Navy, like the legal pages' footer, with the wordmark and links light. */
.site-footer {
  background: var(--site-navy);
}

.site-footer .site-logo__word {
  color: #f2f7fb;
}

.site-footer a:focus-visible {
  outline-color: #fff;
}

.site-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: calc(var(--site-measure) + 2 * var(--site-gutter));
  margin: 0 auto;
  padding: 36px var(--site-gutter) 44px;
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
}

.site-footer__links a {
  color: #c5cfdf;
  font-size: 14px;
  text-decoration: none;
}

.site-footer__links a:hover {
  color: #fff;
}

.site-footer__fine {
  color: #8e9cb5;
  font-size: 13px;
}

@media (max-width: 900px) {
  .site-footer__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 28px var(--site-gutter) 36px;
  }
}