/* Eturnal Rest -- home page only. Hero, search box, map teaser, how-it-works,
   pricing. Real blue brand. Featured cards use the shared .cem-card photo
   treatment (see base.css); this file only adds page-specific craft + motion. */

/* ---- hero ---- */
.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--cream) 0%, var(--blue-50) 100%);
  border-bottom: 1px solid var(--line-cool);
}
/* soft, slow-drifting brand glow behind the headline (calm, never flashy) */
.hero__bg {
  position: absolute;
  inset: -20% -10% auto auto;
  width: 70%;
  height: 130%;
  background:
    radial-gradient(
      48% 60% at 78% 8%,
      rgba(70, 124, 153, 0.18),
      transparent 70%
    ),
    radial-gradient(
      40% 50% at 95% 40%,
      rgba(217, 140, 90, 0.12),
      transparent 70%
    );
  pointer-events: none;
  animation: heroDrift 22s var(--ease) infinite alternate;
}
@keyframes heroDrift {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(-3%, 2%, 0) scale(1.06);
  }
}

/* ---- hero layout v3 (client review 2026-06-04): readable logo + live map ----
   James asked for a bigger, readable logo and a national pin-map on the home
   page (the prior decorative cloud/dove read as sparse, esp. on mobile). Two
   columns on desktop: brand + copy + search (left), live presence map (right).
   On mobile they stack with the map as a compact band, so it never looks empty. */
.hero__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr; /* map column wider (client review 2026-06-04) */
  gap: var(--space-6);
  align-items: center;
  padding: var(--space-8) 0;
}
.hero__copy {
  max-width: 620px;
}
.hero__brand {
  height: 66px;
  width: auto;
  margin-bottom: var(--space-4);
}
/* the live national map panel; the whole panel is a link to /map.html */
.hero__map-wrap {
  position: relative;
  display: block;
  height: 460px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--blue-200);
  box-shadow: var(--shadow-lg);
  background: var(--blue-50);
  text-decoration: none;
  transition: box-shadow var(--dur-2) var(--ease-out);
}
.hero__map-wrap:hover {
  text-decoration: none;
  box-shadow: var(--shadow-xl, var(--shadow-lg));
}
.hero__map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0; /* own stacking context so Leaflet's panes stay below the overlays */
  pointer-events: none; /* the Leaflet canvas is decorative */
  background: var(--blue-50);
}
/* invisible click layer: tapping the map (anywhere but the search) opens /map.html */
.hero__map-link {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}
/* the search bar floats on the map (replaces the old count + browse button) */
.hero__map-search {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 2;
  max-width: none;
  margin: 0;
  box-shadow: var(--shadow-lg);
}
.hero__map-badge {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 500;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  padding: 11px 16px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--line-cool);
  border-radius: 999px;
  box-shadow: var(--shadow);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink-2);
  pointer-events: none;
}
.hero__map-badge strong {
  font-family: var(--font-serif);
  color: var(--blue-700);
  font-size: 1.05rem;
}
.hero__map-count {
  color: var(--ink-2);
}
/* the "Browse the map" CTA now lives on the map panel as an accent button */
.hero__map-cta {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--grad-accent, var(--accent));
  color: #fff;
  font-weight: 700;
  padding: 9px 18px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(217, 140, 90, 0.32);
}
.hero__map-wrap:hover .hero__map-cta {
  filter: brightness(1.05);
  text-decoration: none;
}
@media (max-width: 920px) {
  .hero__grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
    padding: var(--space-7) 0 var(--space-6);
  }
  .hero__copy {
    order: 1;
    max-width: none;
  }
  .hero__map-wrap {
    order: 2; /* map below the copy on mobile, never a blank top band */
    height: 320px;
  }
  .hero__brand {
    height: 54px;
  }
}
/* keep the on-map search bar a single row even on phones (the global .search
   rule stacks it; that looks odd floating on the map) */
@media (max-width: 720px) {
  .hero__map-search {
    flex-direction: row;
    align-items: center;
    border-radius: 999px;
    padding: 6px 6px 6px 14px;
    left: 12px;
    right: 12px;
    bottom: 12px;
  }
  .hero__map-search .search__icon {
    display: inline-flex;
  }
  .hero__map-search input {
    padding: 10px 6px;
  }
  .hero__map-search button {
    width: auto;
  }
}

/* ---- hero brand mark: the cloud stays, the dove flies away on scroll ----
   Two faint layers. The cloud (outline + rays + wordmark) is a calm tonal
   presence on the right. The dove rides on it, registered by percentage so it
   stays attached at any size (its source origin is 249,152 of the 565x360 art).
   On scroll the dove lifts off in a banking arc and fades out (driven by
   home.js). No-JS and reduced-motion keep the whole mark static and visible. */
.hero {
  isolation: isolate; /* own stacking context so the layers order predictably */
}
.hero__bg {
  z-index: 0;
}
.hero__logo {
  position: absolute;
  top: 60%; /* lowered so the fly-away stays in view as the user scrolls */
  left: 72%; /* centered in the right half: between the copy and the right edge */
  width: min(560px, 50vw);
  transform: translate(-50%, -50%);
  z-index: 1;
  pointer-events: none;
}
/* Warm gold light over the sunburst rays. Centered on the ray fan (gold pixels
   span x 27-70%, y 21-59%; centroid ~48%/43%). Dark by default; once the dove
   lifts off it ignites and shimmers (see .is-lit::after / @keyframes ray-glow).
   z-index 1 keeps it above the cloud art (so screen-blend lights the rays) but
   below the dove (z-index 2), so the bird itself is never gold-tinted. */
.hero__logo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(
    44% 40% at 48% 43%,
    rgba(255, 216, 142, 0.95) 0%,
    rgba(228, 158, 92, 0.6) 32%,
    rgba(216, 140, 90, 0) 70%
  );
  mix-blend-mode: screen;
  opacity: 0; /* unlit until the dove flies */
  transform: scale(0.86);
  transform-origin: 48% 43%;
  will-change: opacity, transform;
}
.hero__cloud {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0.1; /* the calm tonal backdrop */
}
/* The dove is TWO registered layers so the wing can beat on its own. .hero__dove
   is the positioned container (registered on the cloud) that GLIDES away smoothly;
   .hd-wing rotates around the shoulder joint to FLAP. Both layers are recolored
   white with a soft slate shadow so the dove reads on the light hero. */
.hero__dove {
  --dove-op: 0.95; /* the white dove is the focal bird, so it is clearly present */
  position: absolute;
  /* registered on the cloud: the padded 110x110 layers are centered on the dove
     so the white+shadow art (baked into the PNGs) sits where the bird belongs */
  left: 40.5%;
  top: 36.7%;
  width: 19.5%;
  aspect-ratio: 1 / 1;
  transform-origin: center center;
  opacity: var(--dove-op);
  transform: translateZ(0); /* promote to its own compositor layer */
  will-change: transform, opacity;
  z-index: 2; /* above the ray-glow overlay so the bird stays untinted */
}
.hd-body,
.hd-wing {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* white + soft slate shadow are BAKED into the PNGs -> NO runtime filter, so
     the fly-away is pure GPU transform/opacity compositing (smooth, no jank) */
}
.hd-wing {
  transform-origin: 47.3% 53.6%; /* shoulder joint within the padded canvas */
  will-change: transform;
  transform: translateZ(0);
}
/* One-shot on first scroll (home.js adds .is-flying once; fill:forwards keeps the
   bird gone). The BODY glides smoothly up and away; the WING beats a few times. */
.hero__dove.is-flying {
  /* ONE continuous transform interval (0 -> 100) so the motion has no velocity
     discontinuity (intermediate keyframes read as a lurch). The ease holds it
     slow at first -- where the wing beats are visible -- then accelerates it up
     and away. translate3d keeps it on the GPU. */
  animation: dove-flyaway 2.2s cubic-bezier(0.5, 0, 0.78, 0.6) forwards;
}
.hero__dove.is-flying .hd-wing {
  /* 6 beats over the slow takeoff, before the big sweep, so flap and glide do
     not overlap heavily */
  animation: wing-flap 0.2s ease-in-out 6;
}
@keyframes dove-flyaway {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
    opacity: var(--dove-op);
  }
  55% {
    opacity: var(--dove-op); /* stay visible through takeoff, then fade */
  }
  100% {
    transform: translate3d(26vw, -74vh, 0) rotate(-13deg) scale(0.5);
    opacity: 0;
  }
}
@keyframes wing-flap {
  0% {
    transform: rotate(-5deg); /* top of the upstroke */
  }
  50% {
    transform: rotate(44deg); /* downstroke */
  }
  100% {
    transform: rotate(-5deg);
  }
}
/* ---- brand mark lights up as the dove departs ----
   The cloud (outline + rays + wordmark) sits at a faint 0.1 tonal opacity while
   the dove rests on it. The instant the dove lifts off (home.js adds .is-lit to
   .hero__logo), the mark illuminates: it rises to FULL opacity and blooms with a
   soft halo -- cool brand-blue inner glow + a warmer gold outer halo -- then
   settles to a steady, fully-present glow. One-shot, fill held forwards. The
   tiny 0.15s stagger lets the bird get a beat of a head start while still
   reading as one moment with the takeoff. */
.hero__logo.is-lit .hero__cloud {
  will-change: opacity, transform, filter;
  animation: cloud-lightup 1.9s var(--ease-out) 0.15s both;
}
/* The sunburst rays catch light the instant the dove flies (no delay -- it
   happens AT THE SAME TIME as the takeoff): one single warm gold bloom that
   rises to a peak and eases down to a steady glow. No pulsing -- it happens
   once and holds. */
.hero__logo.is-lit::after {
  animation: ray-glow 2s var(--ease-out) both;
}
@keyframes ray-glow {
  0% {
    opacity: 0;
    transform: scale(0.86);
  }
  38% {
    opacity: 0.95;
    transform: scale(1.06);
  } /* single ignite / peak */
  100% {
    opacity: 0.62;
    transform: scale(1);
  } /* ease down to a steady, held glow */
}
@keyframes cloud-lightup {
  0% {
    opacity: 0.1;
    transform: scale(1);
    filter: drop-shadow(0 0 0 rgba(144, 176, 194, 0))
      drop-shadow(0 0 0 rgba(199, 164, 104, 0)) brightness(1);
  }
  55% {
    opacity: 1;
    transform: scale(1.025);
    filter: drop-shadow(0 0 26px rgba(144, 176, 194, 0.85))
      drop-shadow(0 0 52px rgba(199, 164, 104, 0.4)) brightness(1.15);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: drop-shadow(0 0 12px rgba(144, 176, 194, 0.45))
      drop-shadow(0 0 22px rgba(199, 164, 104, 0.18)) brightness(1.03);
  }
}
.hero__inner {
  position: relative;
  z-index: 2; /* headline + search sit above the mark */
  padding: var(--space-9) 0 var(--space-8);
  max-width: 780px;
}
@media (max-width: 720px) {
  .hero__logo {
    width: 76vw;
    left: 62%;
    top: 34%;
    transform: translate(-50%, -50%);
  }
  .hero__cloud {
    opacity: 0.07;
  }
  .hero__dove {
    --dove-op: 0.8;
  }
}
.hero h1 {
  margin-bottom: 0.35em;
}
.hero .lede {
  max-width: 56ch;
  margin-bottom: var(--space-6);
}

/* ---- search ---- */
.search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--white);
  border: 1.5px solid var(--line-cool);
  border-radius: 999px;
  padding: 7px 7px 7px 18px;
  box-shadow: var(--shadow);
  max-width: 600px;
  transition:
    border-color var(--dur-1) var(--ease),
    box-shadow var(--dur-1) var(--ease);
}
.search:focus-within {
  border-color: var(--blue-500);
  box-shadow:
    0 0 0 3px var(--blue-100),
    var(--shadow);
}
.search__icon {
  flex: 0 0 auto;
  display: inline-flex;
  color: var(--blue-500);
}
.search input {
  flex: 1;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 1.05rem;
  color: var(--ink);
  padding: 10px 6px 10px 10px;
  min-width: 0;
}
.search input:focus {
  outline: none;
}
.search input::placeholder {
  color: var(--ink-3);
}
.search button {
  flex: 0 0 auto;
}
.hero__ctas {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-5);
}
/* The note sits beside the hero's List-your-plot button on desktop and drops
   under it once the copy column narrows. */
.hero__ctas-note {
  font-size: 0.95rem;
  max-width: 30ch;
  line-height: 1.45;
}
@media (max-width: 640px) {
  .hero__ctas {
    gap: var(--space-3);
  }
  .hero__ctas .btn {
    width: 100%;
    text-align: center;
  }
  .hero__ctas-note {
    max-width: none;
  }
}
.hero__request a {
  font-weight: 600;
}

/* ---- stats band: count-up numbers ---- */
#er-stats .stat__num {
  color: var(--blue-700);
}

/* ---- map teaser (real brand blue) ---- */
.map-teaser {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--blue-700);
  box-shadow: var(--shadow-lg);
  background:
    radial-gradient(
      90% 120% at 12% 18%,
      rgba(121, 166, 190, 0.45),
      transparent 55%
    ),
    radial-gradient(
      70% 90% at 88% 84%,
      rgba(39, 80, 95, 0.55),
      transparent 55%
    ),
    var(--grad-deep);
  color: var(--blue-100);
  min-height: 360px;
  display: flex;
  align-items: center;
}
/* faint dotted "map" texture, evokes scattered pins; gentle parallax drift */
.map-teaser::before {
  content: "";
  position: absolute;
  inset: -10%;
  background-image: radial-gradient(
    rgba(255, 255, 255, 0.18) 1.4px,
    transparent 1.6px
  );
  background-size: 26px 26px;
  opacity: 0.55;
  pointer-events: none;
  animation: pinDrift 40s linear infinite;
}
@keyframes pinDrift {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(26px, 26px, 0);
  }
}
.map-teaser__body {
  position: relative;
  padding: var(--space-8);
  max-width: 620px;
}
.map-teaser h2 {
  color: var(--white);
}
.map-teaser p {
  color: var(--blue-100);
}
@media (max-width: 720px) {
  .map-teaser__body {
    padding: var(--space-6);
  }
}

/* ---- featured cards ---- */
/* Uses the shared .card.cem-card + .cem-card__photo treatment from base.css
   (real cemetery photo, branded initials fallback, hover image zoom). No
   page-specific override needed beyond the chip already in base.css. */

/* ---- how it works ---- */
.how__col {
  background: var(--white);
  border: 1px solid var(--line-cool);
  border-radius: var(--radius);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  height: 100%;
  transition:
    box-shadow var(--dur-2) var(--ease-out),
    transform var(--dur-2) var(--ease-out);
}
.how__col:hover {
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}
.how__steps {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  counter-reset: step;
}
.how__steps li {
  position: relative;
  padding: 0 0 var(--space-4) 46px;
  counter-increment: step;
}
.how__steps li:last-child {
  padding-bottom: 0;
}
.how__steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -2px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--blue-100);
  color: var(--blue-700);
  font-family: var(--font-serif);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.how__steps strong {
  display: block;
  color: var(--blue-900);
  font-size: 1.05rem;
}
.how__steps span {
  color: var(--ink-2);
  font-size: 0.96rem;
}
/* Seller column closes with the action it is describing. The buyer column has
   no button, so the two columns end at a similar height. */
.how__cta {
  margin-top: var(--space-5);
  padding-left: 46px;
}
@media (max-width: 640px) {
  .how__cta {
    padding-left: 0;
  }
  .how__cta .btn {
    display: block;
    text-align: center;
  }
}

/* ---- pricing ---- */
.plan {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line-cool);
  border-radius: var(--radius);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  height: 100%;
  display: flex;
  flex-direction: column;
  transition:
    box-shadow var(--dur-2) var(--ease-out),
    transform var(--dur-2) var(--ease-out);
}
.plan:hover {
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}
.plan--feature {
  border-color: var(--blue-400);
  box-shadow: var(--shadow);
}
.plan__flag {
  position: absolute;
  top: -13px;
  left: var(--space-6);
  background: linear-gradient(180deg, var(--blue-600), var(--blue-700));
  color: var(--white);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  box-shadow: var(--shadow-blue);
}
.plan__price {
  font-family: var(--font-serif);
  font-size: 2.4rem;
  color: var(--blue-700);
  line-height: 1;
  margin: var(--space-2) 0 var(--space-1);
}
.plan__price small {
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--ink-3);
  font-weight: 500;
}
.plan__list {
  list-style: none;
  margin: var(--space-4) 0 var(--space-5);
  padding: 0;
  flex: 1;
}
.plan__list li {
  position: relative;
  padding: 0 0 10px 26px;
  color: var(--ink-2);
}
.plan__list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--blue-600);
  font-weight: 700;
}

/* ---- closing CTA on blue section uses real palette ---- */
.section--green .lede {
  color: var(--blue-100);
}

/* small-screen polish */
@media (max-width: 720px) {
  .hero__inner {
    padding: var(--space-7) 0 var(--space-6);
  }
  .search {
    flex-direction: column;
    align-items: stretch;
    border-radius: var(--radius);
    padding: 10px;
  }
  .search__icon {
    display: none;
  }
  .search input {
    padding: 10px 12px;
  }
  .search button {
    width: 100%;
    justify-content: center;
  }
}

/* honor reduced motion for the ambient hero/map drifts */
@media (prefers-reduced-motion: reduce) {
  .hero__bg,
  .map-teaser::before {
    animation: none !important;
  }
  /* the dove fly-away (home.js) is also disabled under reduced motion, leaving
     the full mark static and visible. Defense-in-depth: even if .is-lit were
     present, skip the cloud light-up so the mark stays calm and static. */
  .hero__logo.is-lit .hero__cloud,
  .hero__logo.is-lit::after {
    animation: none !important;
  }
}

/* ---- newest listings strip (auto, its own small section under the
   cemeteries grid; plain on purpose -- the paid panel above is the one
   premium moment on the page) ---- */
.newest {
  margin-top: var(--space-8);
}
.newest--solo {
  margin-top: 0;
}
.newest__title {
  font-family: var(--font-serif);
  color: var(--blue-900);
  font-size: 1.45rem;
  margin: 0 0 var(--space-5);
}
.newest-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 230px;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 10px;
  -webkit-overflow-scrolling: touch;
}
.newest-card {
  background: var(--white);
  border: 1px solid var(--line-cool);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  transition:
    box-shadow var(--dur-2) var(--ease-out),
    transform var(--dur-2) var(--ease-out);
}
.newest-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.newest-card__photo {
  aspect-ratio: 16 / 10;
  background: var(--blue-50);
}
.newest-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.newest-card__body {
  padding: 10px 12px 12px;
}
.newest-card__price {
  font-weight: 800;
  color: var(--blue-900);
}
.newest-card__name {
  font-size: 0.88rem;
  color: var(--ink-2, var(--ink-3));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.newest-card__loc {
  font-size: 0.8rem;
  color: var(--ink-3);
}

/* ---- featured listings (paid home placements + launch seed) ----
   Reuses the newest-card component in a wrapping grid instead of the
   horizontal strip, with a small Featured tag on the photo. The whole
   section sits inside .feat-panel: one quiet premium frame -- white card
   on the page wash, warm accent keyline on top. Sellers pay for this
   placement, so the frame has to read as worth paying for without
   shouting in a grief context. */
.feat-panel {
  background: var(--white);
  border: 1px solid var(--accent-200);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-7) var(--space-6) var(--space-6);
}
@media (max-width: 640px) {
  .feat-panel {
    padding: var(--space-6) var(--space-4);
    border-radius: var(--radius);
  }
}
.feat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
}
.feat-card .newest-card__photo {
  position: relative;
}
.feat-card__tag {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--blue-900, #16323f);
  color: var(--white, #fff);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---- obituaries: the free pillar ---------------------------------------
   Sits between "how it works" and pricing. It carries real craft now (owner
   call, 2026-08-23), but the craft is typographic: warm ground, engraved line
   marks, gold hairlines, and a dignified count. Deliberately NOT the paid
   treatment used by .feat-panel and .plan above -- no price, no plan flag, no
   listing CTA -- because publishing here is free permanently and the section
   has to read that way. Warm linen ground rather than the cool --surface-2 of
   the selling bands, so it feels like a different kind of page entirely. */
.obit-home {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(
    180deg,
    var(--cream) 0%,
    var(--linen) 42%,
    var(--sand) 100%
  );
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
/* one slow warm bloom, high and centred, so the band has light in it rather
   than being a flat fill */
.obit-home__glow {
  position: absolute;
  inset: -30% -10% auto;
  height: 120%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(
      42% 52% at 50% 6%,
      rgba(217, 140, 90, 0.13),
      transparent 68%
    ),
    radial-gradient(
      50% 46% at 22% 62%,
      rgba(144, 176, 194, 0.16),
      transparent 70%
    );
}
.obit-home > .container {
  position: relative;
  z-index: 1;
}

/* ---- header: gold hairline, then the line, then generous measure ---- */
.obit-home__head {
  max-width: 46rem;
  margin: 0 auto;
  text-align: center;
}
.obit-home__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--accent-800);
}
/* a short gold rule either side of the free promise, the one flourish the
   section gets in place of a badge */
.obit-home__eyebrow::before,
.obit-home__eyebrow::after {
  content: "";
  width: 28px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-soft));
}
.obit-home__eyebrow::after {
  background: linear-gradient(90deg, var(--gold-soft), transparent);
}
.obit-home__title {
  font-size: clamp(1.9rem, 3.4vw, 2.85rem);
  line-height: 1.14;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-4);
  text-wrap: balance;
}
.obit-home__lede {
  color: var(--ink-2);
  max-width: 60ch;
  margin: 0 auto;
}

/* ---- the three points ---- */
.obit-home__points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-8);
}
.obit-home__point {
  position: relative;
  /* clips the gold inlay to the rounded corner. Without this the inlay sits
     outside the border-box and renders as a soft smudge above the card. */
  overflow: hidden;
  padding: var(--space-6) var(--space-5) var(--space-5);
  /* opaque enough at the foot that body copy keeps its contrast over --sand,
     translucent enough that the warm ground still shows through */
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.94) 0%,
    rgba(255, 255, 255, 0.74) 100%
  );
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  transition:
    box-shadow var(--dur-2) var(--ease-out),
    transform var(--dur-2) var(--ease-out),
    border-color var(--dur-2) var(--ease-out);
}
/* the gold keyline is a short centred inlay on the top edge, not a full
   border, so it reads as bookbinding rather than as a product card */
.obit-home__point::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--gold-soft) 30%,
    var(--gold) 50%,
    var(--gold-soft) 70%,
    transparent
  );
  opacity: 0.85;
}
.obit-home__point:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--blue-150);
}
.obit-home__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: var(--space-4);
  border-radius: 50%;
  color: var(--blue-600);
  background: radial-gradient(
    circle at 50% 38%,
    var(--white) 0%,
    var(--blue-50) 100%
  );
  border: 1px solid var(--blue-150);
  box-shadow: var(--shadow-inset-top);
  transition:
    color var(--dur-2) var(--ease-soft),
    transform var(--dur-2) var(--ease-soft);
}
.obit-home__icon svg {
  width: 22px;
  height: 22px;
}
.obit-home__point:hover .obit-home__icon {
  color: var(--blue-700);
  transform: translateY(-1px);
}
.obit-home__point h3 {
  font-size: 1.12rem;
  line-height: 1.3;
  margin: 0 0 var(--space-2);
  color: var(--blue-900);
}
.obit-home__point p {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.62;
  color: var(--ink-2);
}

/* ---- actions ---- */
.obit-home__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-8);
}

/* ---- the count: the proof, given room to be a moment ----
   2,009 real memorials already live here. Small grey type undersold it, so it
   is set in Merriweather between two gold hairlines. Still no CTA attached. */
.obit-home__count {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  margin: var(--space-8) auto 0;
  text-align: center;
}
.obit-home__count::before,
.obit-home__count::after {
  content: "";
  flex: 0 1 88px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong));
}
.obit-home__count::after {
  background: linear-gradient(90deg, var(--line-strong), transparent);
}
.obit-home__count-num {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 700;
  line-height: 1;
  color: var(--blue-700);
  letter-spacing: -0.01em;
}
.obit-home__count-label {
  font-size: 0.98rem;
  color: var(--ink-2);
}

@media (max-width: 900px) {
  .obit-home__points {
    grid-template-columns: 1fr;
    gap: var(--space-4);
    margin-top: var(--space-7);
  }
  .obit-home__point {
    display: grid;
    grid-template-columns: 46px 1fr;
    column-gap: var(--space-4);
    align-items: start;
    padding: var(--space-5);
  }
  /* the inlay moves to the leading edge once the card goes horizontal */
  .obit-home__point::before {
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 3px;
    height: 44px;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(
      180deg,
      transparent,
      var(--gold-soft) 30%,
      var(--gold) 50%,
      var(--gold-soft) 70%,
      transparent
    );
  }
  .obit-home__icon {
    margin-bottom: 0;
    grid-row: 1 / span 2;
  }
  .obit-home__count::before,
  .obit-home__count::after {
    flex-basis: 40px;
  }
}
@media (max-width: 560px) {
  .obit-home__actions .btn {
    width: 100%;
    text-align: center;
  }
}
@media (prefers-reduced-motion: reduce) {
  .obit-home__point,
  .obit-home__icon {
    transition: none;
  }
  .obit-home__point:hover {
    transform: none;
  }
}