/*
  Moments — standalone wedding-product theme.

  Deliberately NOT sharing /index.css with the rest of scavvy.com: Moments is
  its own brand (sage + serif, no Scavvy blue), so everything it needs lives
  here. Palette and type are matched to the guest app at app.scavvy.com/wedding.

  Primary is sage green: --sage on white/--cream is ~4.9:1 contrast (passes
  WCAG AA for normal text), --sage-deep is ~7.2:1 (passes AAA), so both are
  safe for body text, not just large UI elements.
*/

:root {
  --ink: #241d1a;
  --ink-soft: #4a3f3a;
  --muted: #7d6f69;
  --line: #e2e9de;

  --sage-brand: #a8b5a2;
  --sage: #4f7a5b;
  --sage-deep: #3c5f45;
  --sage-tint: #eaf1ea;
  --amber-tint: #fdf1e7;
  --amber: #d98d4f;
  --lilac-tint: #f3eefa;
  --lilac: #8d6cb8;

  --ivory: #f9f4ea;
  --cream: #fffcfa;
  --shell: #f4f8f2;
  --card: #ffffff;

  --shadow-sm: 0 1px 2px rgba(80, 46, 40, 0.05), 0 6px 18px rgba(80, 46, 40, 0.05);
  --shadow-md: 0 2px 6px rgba(80, 46, 40, 0.06), 0 18px 44px rgba(80, 46, 40, 0.09);
  --shadow-lg: 0 30px 70px rgba(80, 46, 40, 0.14);

  --radius: 18px;
  --radius-lg: 26px;

  --display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --page: min(1120px, 100% - 48px);
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-soft);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a {
  color: inherit;
}

h1,
h2,
h3 {
  font-family: var(--display);
  color: var(--ink);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0;
  font-variation-settings: "SOFT" 0, "WONK" 0;
}

p {
  margin: 0;
}

.wrap {
  width: var(--page);
  margin-inline: auto;
}

.eyebrow {
  font-family: var(--display);
  font-style: italic;
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--sage);
  margin-bottom: 14px;
}

.amp {
  color: var(--sage);
  font-style: italic;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--body);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  padding: 16px 28px;
  border-radius: 999px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.btn-primary {
  background: var(--sage);
  color: #fff;
  box-shadow: 0 10px 24px rgba(79, 122, 91, 0.28);
}

.btn-primary:hover {
  background: var(--sage-deep);
  transform: translateY(-1px);
}

.btn-ghost {
  background: #fff;
  color: var(--ink);
  border-color: var(--line);
  box-shadow: var(--shadow-sm);
}

.btn-ghost:hover {
  transform: translateY(-1px);
}

/* ---------- header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 252, 250, 0.82);
  backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid rgba(226, 233, 222, 0.8);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 74px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
}

.wordmark-logo {
  display: block;
  width: auto;
  height: 28px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-soft);
}

.nav-links a {
  text-decoration: none;
  transition: color 0.15s ease;
}

.nav-links a:hover {
  color: var(--sage);
}

.nav-links a[aria-current="page"] {
  color: var(--sage);
}

.header-cta {
  display: flex;
  align-items: center;
  gap: 18px;
}

.nav-signin {
  white-space: nowrap;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.15s ease;
}

.nav-signin:hover {
  color: var(--sage);
}

/* ---------- "Get the app" menu ---------- */

/* A <details>/<summary>, so it opens, closes and is keyboard-reachable with
   no JavaScript. header.js only adds outside-click and Escape closing. */
.nav-dropdown {
  position: relative;
}

.nav-dropdown summary {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
  color: var(--ink-soft);
  transition: color 0.15s ease;
}

.nav-dropdown summary::-webkit-details-marker {
  display: none;
}

.nav-dropdown summary:hover,
.nav-dropdown[open] summary {
  color: var(--sage);
}

.nav-caret {
  transition: transform 0.15s ease;
}

.nav-dropdown[open] .nav-caret {
  transform: rotate(180deg);
}

.nav-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  display: flex;
  flex-direction: column;
  min-width: 232px;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}

/* The panel is absolutely positioned, so the gap between it and the summary is
   over no element at all and the pointer "leaves" the menu crossing it. This
   invisible strip belongs to the panel, so the trip stays inside the <details>.
   It reaches past both edges because the crossing is rarely straight down.
   header.js also holds the menu open briefly on exit, which covers the rest. */
.nav-menu::before {
  content: "";
  position: absolute;
  left: -24px;
  right: -24px;
  top: -14px;
  height: 14px;
}

.nav-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.nav-menu-item svg {
  flex: none;
  color: var(--sage);
}

a.nav-menu-item:hover {
  background: var(--shell);
  color: var(--sage);
}

.app-store-badge {
  display: inline-flex;
  align-items: center;
  flex: none;
}

.app-store-badge img {
  /* Apple's badge artwork is supplied at 40px tall and must not be redrawn,
     recolored or stretched; only the scale changes. */
  display: block;
  height: 40px;
  width: auto;
}

/* Screen-reader-only label. The badge img is decorative (alt=""), so this
   span carries the link's accessible name — and gives analytics.js a
   non-empty cta_label, which it reads from textContent. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.nav-toggle {
  /* Desktop is unchanged; this only ever appears below 860px. */
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.nav-toggle:hover {
  background: var(--shell);
}

@media (max-width: 860px) {
  /* The bar becomes the wordmark and the toggle. Everything else — the app
     menu, the links, Sign in, the App Store badge — moves into #mobile-menu. */
  .nav-links,
  .header-cta {
    display: none;
  }

  .nav-toggle {
    display: inline-flex;
  }
}

/* ---------- mobile menu ---------- */

/* Full screen, so there is no visible backdrop to click; closing is the X,
   Escape, or following one of the links. */
.mobile-menu {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--cream);
  color: var(--ink);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* showModal() makes the rest of the page inert but does not stop it
   scrolling underneath. */
html:has(.mobile-menu[open]) {
  overflow: hidden;
}

.mobile-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 74px;
  padding: 0 20px;
}

.mobile-menu-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.mobile-menu-close:hover {
  background: var(--shell);
}

.mobile-menu-nav {
  padding: 10px 20px 40px;
}

.mobile-menu-group {
  margin-bottom: 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  /* Keeps the first and last rows inside the rounded corners. */
  overflow: hidden;
}

.mobile-menu-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 17px 18px;
  border-top: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
  font-size: 17px;
  font-weight: 500;
}

.mobile-menu-item:first-child {
  border-top: 0;
}

.mobile-menu-item:active {
  background: var(--shell);
}

.mobile-menu-item-icon {
  display: inline-flex;
  flex: none;
  color: var(--sage);
}

.mobile-menu-chevron {
  flex: none;
  margin-left: auto;
  color: var(--muted);
}

/* Same discrete-display dance as the chooser; see the note there. */
.mobile-menu,
.mobile-menu::backdrop {
  transition:
    opacity 0.22s ease,
    transform 0.22s ease,
    overlay 0.22s ease allow-discrete,
    display 0.22s ease allow-discrete;
}

.mobile-menu {
  opacity: 0;
  transform: translateY(-10px);
}

.mobile-menu[open] {
  opacity: 1;
  transform: translateY(0);
}

@starting-style {
  .mobile-menu[open] {
    opacity: 0;
    transform: translateY(-10px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-menu,
  .mobile-menu::backdrop {
    transition: none;
  }

  .mobile-menu {
    transform: none;
  }

  @starting-style {
    .mobile-menu[open] {
      transform: none;
    }
  }
}

@media (max-width: 520px) {
  .site-header .wrap {
    gap: 12px;
  }

  .wordmark {
    gap: 8px;
    font-size: 21px;
  }

  .wordmark-logo {
    height: 24px;
  }

}

/* Narrowest phones: the mark carries the brand so both CTAs still fit. */
@media (max-width: 380px) {
  .wordmark-text {
    display: none;
  }
}

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

/*
  Warm ivory ground with two very soft sage shapes behind the phone. The shapes
  are blurred blobs on ::before/::after so the section needs no extra markup;
  .hero keeps overflow:hidden so their blur never widens the page.
*/

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 74px 0 86px;
  background:
    radial-gradient(1200px 760px at 76% 10%, #f3f0e6 0%, rgba(243, 240, 230, 0) 70%),
    linear-gradient(180deg, #fdfaf6 0%, var(--ivory) 48%, #f4ede1 82%, var(--cream) 100%);
}

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  border-radius: 46% 54% 58% 42% / 52% 44% 56% 48%;
  filter: blur(90px);
  will-change: transform;
}

.hero::before {
  width: 780px;
  height: 720px;
  right: -16%;
  top: -4%;
  background: rgba(168, 181, 162, 0.5);
  animation: drift-a 34s ease-in-out infinite alternate;
}

.hero::after {
  width: 700px;
  height: 520px;
  left: -18%;
  bottom: 16%;
  background: rgba(206, 184, 152, 0.42);
  animation: drift-b 42s ease-in-out infinite alternate;
}

@keyframes drift-a {
  to {
    transform: translate3d(-26px, 22px, 0) scale(1.06);
  }
}

@keyframes drift-b {
  to {
    transform: translate3d(24px, -18px, 0) scale(1.05);
  }
}

.hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
}

.hero h1 {
  font-size: clamp(42px, 5vw, 62px);
  text-wrap: balance;
}

.hero h1 em {
  font-style: italic;
  color: var(--sage);
}

.hero-sub {
  margin-top: 22px;
  font-size: 19px;
  color: var(--muted);
  max-width: 34ch;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

/* Get started is the hero's only button now, so give it some presence. */
.hero-actions .btn-primary {
  min-width: 260px;
  max-width: 100%;
}

.hero-note {
  margin-top: 18px;
  font-size: 14px;
  color: var(--muted);
}

.hero-figure {
  position: relative;
  justify-self: center;
}

/* ---------- "Get started" chooser ---------- */

/* A native <dialog>: showModal() gives the focus trap, the inert background
   and Escape-to-close, so none of that is reimplemented here. */
.chooser {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  overflow: visible;
}

/* Opening and closing.

   A dialog flips between display: none and block, which is not a transitionable
   pair on its own — hence allow-discrete, and the overlay line, which keeps it
   in the top layer for the length of the closing run instead of yanking it out
   on frame one. @starting-style supplies the "from" the element has never had,
   so the first frame after it opens is the faded one rather than the finished
   one. A browser without these simply shows and hides it, as before. */
.chooser,
.chooser::backdrop {
  transition:
    opacity 0.22s ease,
    transform 0.22s ease,
    overlay 0.22s ease allow-discrete,
    display 0.22s ease allow-discrete;
}

.chooser {
  opacity: 0;
  transform: translateY(10px) scale(0.98);
}

.chooser[open] {
  opacity: 1;
  transform: translateY(0) scale(1);
}

@starting-style {
  .chooser[open] {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
}

.chooser::backdrop {
  background: rgba(36, 29, 26, 0.48);
  backdrop-filter: blur(3px);
  opacity: 0;
}

.chooser[open]::backdrop {
  opacity: 1;
}

@starting-style {
  .chooser[open]::backdrop {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .chooser,
  .chooser::backdrop {
    transition: none;
  }

  .chooser {
    transform: none;
  }

  @starting-style {
    .chooser[open] {
      transform: none;
    }
  }
}

.chooser-panel {
  position: relative;
  width: min(520px, calc(100vw - 32px));
  padding: 34px 30px 30px;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.chooser-close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.chooser-close:hover {
  background: var(--shell);
  color: var(--ink);
}

.chooser-title {
  margin: 0 0 26px;
  font-family: var(--display);
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-align: center;
}

.chooser-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

/* Apple's badge is 50px tall here, and .web-app-badge is built to match, so
   the two sit level whatever the font does. */
.chooser-badges .app-store-badge img {
  height: 50px;
}

/* Our own badge. Deliberately NOT a copy of the Google Play artwork — no Play
   mark, no Play wording — but the same silhouette, so the pair reads as a row
   of two equals. */
.web-app-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 50px;
  padding: 0 16px;
  border-radius: 9px;
  background: #000;
  color: #fff;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.web-app-badge:hover {
  background: #1d1d1f;
}

.web-app-badge-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  text-align: left;
}

.web-app-badge-kicker {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.01em;
}

.web-app-badge-name {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.chooser-rule {
  width: 100%;
  height: 1px;
  margin: 26px 0;
  border: 0;
  background: var(--line);
}

.chooser-scan {
  display: flex;
  align-items: center;
  gap: 18px;
}

.chooser-qr {
  display: block;
  flex: none;
  padding: 8px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--line);
}

.chooser-qr img {
  display: block;
  width: 132px;
  height: 132px;
}

.chooser-scan-copy {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: 17px;
  color: var(--ink-soft);
}

.chooser-arrow {
  flex: none;
  color: var(--line);
}

/* Scanning versus tapping.

   A QR is useless on the device showing it, so a coarse pointer gets a button
   to the same URL instead — on an iPhone that is still what offers the App
   Clip. Keyed on pointer rather than width, both because a touch tablet is as
   unable to scan itself as a phone is, and to stay in step with the
   (pointer: fine) test header.js uses to decide the same question. */
.chooser-tap {
  display: none;
}

@media (pointer: coarse) {
  .chooser-qr,
  .chooser-scan-copy {
    display: none;
  }

  .chooser-tap {
    display: inline-flex;
  }

  .chooser-scan {
    justify-content: center;
  }
}

/* The App Clip dialog is the scan half on its own: narrower, and stacked at
   every width, since there is no badge row for the QR to sit beside. */
.chooser-compact .chooser-panel {
  width: min(360px, calc(100vw - 32px));
}

.chooser-compact .chooser-scan {
  flex-direction: column;
  gap: 16px;
  text-align: center;
}

.chooser-compact .chooser-qr img {
  width: 186px;
  height: 186px;
}

.chooser-compact .chooser-scan-copy {
  font-size: 16px;
}

@media (max-width: 520px) {
  .chooser-panel {
    padding: 30px 20px 22px;
  }

  .chooser-title {
    font-size: 23px;
  }

  .chooser-rule {
    margin: 20px 0;
  }

  /* The arrow points across a gap that no longer exists once this stacks. */
  .chooser-scan {
    flex-direction: column;
    gap: 14px;
    text-align: center;
  }

  .chooser-arrow {
    display: none;
  }
}

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

/*
  A styled phone rather than a device image: --phone-w drives the screen width
  and every other measurement (rail, bezel, radii, island, buttons) is a fraction
  of it, so one value per breakpoint resizes the whole device. Proportions are
  taken from a 393pt-wide iPhone: 54pt of status area, a 125x37pt island.
*/

.phone {
  --phone-w: clamp(250px, 24vw, 306px);
  --phone-radius: calc(var(--phone-w) * 0.158);
  --phone-rail: max(2px, calc(var(--phone-w) * 0.0095));
  --phone-bezel: calc(var(--phone-w) * 0.026);
  position: relative;
  margin: 0;
  width: var(--phone-w);
}

/* The soft ellipse the phone appears to sit above. */
.phone::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 8%;
  right: 8%;
  bottom: -34px;
  height: 46px;
  border-radius: 50%;
  background: rgba(96, 84, 62, 0.22);
  filter: blur(26px);
}

/* Outer band: the brushed titanium rail. */
.phone-shell {
  position: relative;
  padding: var(--phone-rail);
  border-radius: var(--phone-radius);
  background: linear-gradient(148deg, #9c958c 0%, #5d5851 26%, #857e75 52%, #4c4842 78%, #8b847b 100%);
  box-shadow:
    0 18px 30px -18px rgba(58, 46, 32, 0.4),
    0 48px 90px -34px rgba(58, 46, 32, 0.42);
}

/* Inner band: the black glass border the screen floats in. */
.phone-bezel {
  padding: var(--phone-bezel);
  border-radius: calc(var(--phone-radius) - var(--phone-rail));
  background: #100e0c;
}

/*
  Side buttons. Each rail is one sliver outside the shell whose gradient stops
  cut it into separate buttons, which keeps this to two empty elements.
*/

.phone-rail {
  position: absolute;
  width: max(2px, calc(var(--phone-w) * 0.0085));
  border-radius: 2px;
}

.phone-rail-left {
  left: calc(var(--phone-rail) * -0.7);
  top: 15%;
  height: 32%;
  background: linear-gradient(
    180deg,
    #79726a 0 17%,
    transparent 17% 31%,
    #79726a 31% 63%,
    transparent 63% 72%,
    #79726a 72% 100%
  );
}

.phone-rail-right {
  right: calc(var(--phone-rail) * -0.7);
  top: 24%;
  height: 14%;
  background: #79726a;
}

.phone-screen {
  position: relative;
  overflow: hidden;
  border-radius: calc(var(--phone-w) * 0.128);
  background: #f8f7f1;
}

/* Hairline where the glass meets the bezel — reads as depth, not decoration. */
.phone-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14) inset;
  pointer-events: none;
}

/*
  The recording's status bar is painted out in the encode — replaced by a stretch
  of the app background sampled from just below it, which tracks the dimming when
  the filter sheet opens — so the island can float straight on the video with no
  seam and nothing to colour-match.
*/

.phone-island {
  position: absolute;
  top: calc(var(--phone-w) * 0.028);
  left: 50%;
  width: calc(var(--phone-w) * 0.318);
  height: calc(var(--phone-w) * 0.094);
  transform: translateX(-50%);
  border-radius: 999px;
  background: #080706;
}

/* The lens, at the right end of the island. */
.phone-island::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 8%;
  width: calc(var(--phone-w) * 0.05);
  height: calc(var(--phone-w) * 0.05);
  transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #3a4457 0%, #171a22 58%, #0b0c0f 100%);
}

.phone-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 720 / 1558;
  object-fit: cover;
  background: #f8f7f1;
}

/* The video carries no `controls`, but mobile WebKit still paints its own
   play button over a video it has declined to autoplay. Hide it: the demo is
   decoration, and the script retries playback on the first gesture anyway. */
.phone-video::-webkit-media-controls,
.phone-video::-webkit-media-controls-panel,
.phone-video::-webkit-media-controls-overlay-play-button,
.phone-video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
  appearance: none;
}

/* Entrance: copy first, phone just behind it. */
.js .hero-copy,
.js .hero-figure {
  opacity: 0;
  transform: translateY(20px);
  animation: hero-in 0.9s cubic-bezier(0.22, 0.75, 0.3, 1) forwards;
}

.js .hero-figure {
  transform: translateY(30px);
  animation-delay: 0.14s;
}

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

@media (max-width: 900px) {
  .hero {
    padding: 46px 0 70px;
  }

  /*
    Single column, and .hero-copy goes display:contents so the note can be
    ordered below the phone while the headline, sub and CTAs stay above it.
    That drops hero-copy's box, so its max-width and entrance animation move
    to its children (below and in the .js block).
  */
  .hero .wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    text-align: center;
  }

  .hero-copy {
    display: contents;
  }

  .hero h1 {
    max-width: 560px;
  }

  .hero-figure {
    margin-top: 44px;
  }

  .hero-note {
    order: 1;
    margin-top: 30px;
    max-width: 44ch;
  }

  .hero h1 {
    font-size: clamp(34px, 7.4vw, 50px);
  }

  /* Move the sage shape down so it sits behind the phone, not the headline. */
  .hero::before {
    width: 460px;
    height: 480px;
    right: -24%;
    top: 38%;
  }

  .hero::after {
    width: 440px;
    height: 400px;
    left: -26%;
    bottom: 14%;
  }

  .hero-sub {
    margin-top: 18px;
    font-size: 17px;
    max-width: 42ch;
    margin-inline: auto;
  }

  .js .hero-copy > * {
    opacity: 0;
    transform: translateY(20px);
    animation: hero-in 0.9s cubic-bezier(0.22, 0.75, 0.3, 1) forwards;
  }

  .hero-actions {
    margin-top: 26px;
    justify-content: center;
  }

  .phone {
    --phone-w: min(clamp(280px, 42vw, 372px), calc(100vw - 76px));
  }
}

@media (max-width: 420px) {
  .hero-actions {
    gap: 10px;
  }

  .hero-actions .btn {
    padding-inline: 20px;
  }
}

/* ---------- generic section ---------- */

.section {
  padding: 96px 0;
}

.section-alt {
  background: var(--shell);
}

.section-head {
  max-width: 640px;
  margin-bottom: 52px;
}

.section-head.center {
  margin-inline: auto;
  text-align: center;
}

.section-head h2 {
  font-size: clamp(32px, 3.6vw, 44px);
}

.section-head p {
  margin-top: 16px;
  font-size: 18px;
  color: var(--muted);
}

@media (max-width: 900px) {
  .section {
    padding: 68px 0;
  }
}

/* ---------- how it works ---------- */

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.step {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 30px 28px 32px;
  box-shadow: var(--shadow-sm);
}

.step-num {
  font-family: var(--display);
  font-style: italic;
  font-size: 15px;
  color: var(--sage);
  margin-bottom: 12px;
}

.step h3 {
  font-size: 23px;
}

.step p {
  margin-top: 12px;
  margin-bottom: 26px;
  color: var(--muted);
  font-size: 16px;
}

.step img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  object-position: center top;
  margin-top: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}

.step img.step-art {
  /* The QR and storybook cards are graphics, not photos: cropping would cut
     the code or the layout. Letterbox them on the ground the SVGs paint. */
  object-fit: contain;
  background: var(--shell);
}

@media (max-width: 900px) {
  .steps {
    grid-template-columns: 1fr;
  }
}

/* ---------- prompt types ---------- */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}

.split.reverse .split-media {
  order: -1;
}

.split-media img {
  /* The portrait app screenshot is very tall; cap it so it does not tower
     over the copy beside it. */
  max-height: 620px;
  width: auto;
  margin-inline: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

@media (max-width: 900px) {
  .split {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .split.reverse .split-media {
    order: 0;
  }
}

.prompt-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.prompt-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
}

.prompt-icon {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  display: grid;
  place-items: center;
}

.prompt-icon.photo {
  background: var(--sage-tint);
  color: var(--sage);
}

.prompt-icon.video {
  background: var(--amber-tint);
  color: var(--amber);
}

.prompt-icon.text {
  background: var(--lilac-tint);
  color: var(--lilac);
}

.prompt-row h3 {
  font-size: 19px;
}

.prompt-row p {
  margin-top: 4px;
  font-size: 15px;
  color: var(--muted);
}

.lede {
  margin-top: 16px;
  color: var(--muted);
  font-size: 18px;
}

.prompt-list.stacked {
  margin-top: 32px;
}

/* ---------- quote ---------- */

.quote {
  text-align: center;
  max-width: 780px;
  margin-inline: auto;
}

.quote blockquote {
  margin: 0;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(26px, 3.2vw, 36px);
  line-height: 1.35;
  color: var(--ink);
}

.quote figcaption {
  margin-top: 22px;
  font-size: 15px;
  color: var(--muted);
  letter-spacing: 0.02em;
}

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

.pricing {
  display: grid;
  align-items: stretch;
}

.pricing-single {
  max-width: 420px;
  margin-inline: auto;
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  box-shadow: var(--shadow-sm);
}

.plan h3 {
  font-size: 24px;
}

.plan-price {
  font-family: var(--display);
  font-size: 42px;
  font-weight: 600;
  color: var(--ink);
  margin-top: 14px;
  line-height: 1;
}

.plan-price small {
  font-family: var(--body);
  font-size: 15px;
  font-weight: 500;
  color: var(--muted);
}

.plan-desc {
  margin-top: 10px;
  font-size: 15px;
  color: var(--muted);
}

.plan ul {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
  font-size: 15px;
  align-content: start;
}

.plan li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.plan li svg {
  flex: none;
  margin-top: 4px;
  color: var(--sage);
}

.plan .btn {
  margin-top: 28px;
  width: 100%;
}

.plan-foot {
  margin-top: auto;
}

/* ---------- faq ---------- */

.faq {
  max-width: 780px;
  margin-inline: auto;
  display: grid;
  gap: 12px;
}

.faq details {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 4px 24px;
  box-shadow: var(--shadow-sm);
}

.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 0;
  font-family: var(--display);
  font-size: 19px;
  font-weight: 600;
  color: var(--ink);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "";
  flex: none;
  width: 11px;
  height: 11px;
  border-right: 2px solid var(--sage);
  border-bottom: 2px solid var(--sage);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.2s ease;
}

.faq details[open] summary::after {
  transform: rotate(-135deg) translateY(-2px);
}

.faq details p {
  padding: 0 0 22px;
  color: var(--muted);
  font-size: 16px;
}

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

.site-footer {
  border-top: 1px solid var(--line);
  padding: 40px 0;
  background: var(--cream);
}

.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  color: var(--muted);
}

.site-footer a {
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--sage);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
}

/* ---------- scroll reveal ---------- */

.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

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

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

  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hero::before,
  .hero::after {
    animation: none;
  }

  .js .hero-copy,
  .js .hero-copy > *,
  .js .hero-figure {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* ---------- legal pages ---------- */
.legal {
  padding: 56px 0 96px;
}

.legal-wrap {
  width: min(720px, 100% - 48px);
  margin: 0 auto;
}

.legal-head {
  padding-bottom: 30px;
  border-bottom: 1px solid var(--line);
}

.legal-head h1 {
  font-family: var(--display);
  font-size: clamp(34px, 5vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 14px;
}

.legal-updated {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
}

.legal-intro {
  margin: 22px 0 0;
  font-size: 17px;
  color: var(--ink-soft);
}

.legal-toc {
  margin-top: 32px;
  padding: 22px 26px;
  background: var(--shell);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.legal-toc h2 {
  margin: 0 0 12px;
  font-family: var(--body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.legal-toc ol {
  margin: 0;
  padding-left: 20px;
  columns: 2;
  column-gap: 30px;
  font-size: 14.5px;
}

.legal-toc li {
  margin-bottom: 7px;
  break-inside: avoid;
}

.legal-toc a {
  color: var(--ink-soft);
}

.legal-toc a:hover {
  color: var(--sage-deep);
}

.legal-section {
  margin-top: 46px;
  scroll-margin-top: 96px;
}

.legal-section h2 {
  margin: 0 0 14px;
  font-family: var(--display);
  font-size: 24px;
  letter-spacing: -0.01em;
}

.legal-section h3 {
  margin: 28px 0 8px;
  font-family: var(--body);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}

.legal-section p,
.legal-section li {
  color: var(--ink-soft);
}

.legal-section p {
  margin: 0 0 14px;
}

.legal-section ul {
  margin: 0 0 16px;
  padding-left: 22px;
}

.legal-section li {
  margin-bottom: 8px;
}

.legal-section a {
  color: var(--sage-deep);
}

.legal-section strong {
  color: var(--ink);
  font-weight: 600;
}

.legal-callout {
  margin: 0 0 20px;
  padding: 18px 22px;
  background: var(--sage-tint);
  border: 1px solid #cfe0d1;
  border-radius: var(--radius);
}

.legal-callout p:last-child {
  margin-bottom: 0;
}

.legal-fill {
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--amber-tint);
  box-shadow: inset 0 -2px 0 var(--amber);
  font-weight: 600;
  color: var(--ink);
}

.legal-contact {
  margin-top: 52px;
  padding: 26px;
  background: var(--shell);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.legal-contact p:last-child {
  margin-bottom: 0;
}

@media (max-width: 640px) {
  .legal-wrap {
    width: min(720px, 100% - 32px);
  }

  .legal-toc ol {
    columns: 1;
  }
}

/* ---------- guide pages ---------- */

/* /qr-code-placement and /prompt-ideas: short how-to pages for couples. */
.guide {
  padding: 56px 0 96px;
}

.guide-wrap {
  width: min(760px, 100% - 48px);
  margin: 0 auto;
}

.guide-head h1 {
  font-family: var(--display);
  font-size: clamp(34px, 5vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

.guide-intro {
  margin: 18px 0 0;
  max-width: 58ch;
  font-size: 18px;
  color: var(--ink-soft);
}

.guide-principles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 40px;
}

.guide-principle {
  padding: 22px 24px;
  background: var(--sage-tint);
  border: 1px solid #cfe0d1;
  border-radius: var(--radius);
}

.guide-principle h2 {
  margin: 0 0 8px;
  font-family: var(--display);
  font-size: 20px;
  letter-spacing: -0.01em;
  color: var(--sage-deep);
}

.guide-principle p {
  margin: 0;
  font-size: 15px;
  color: var(--ink-soft);
}

.guide-section {
  margin-top: 64px;
  scroll-margin-top: 96px;
}

.guide-section > h2 {
  margin: 0 0 20px;
  font-family: var(--display);
  font-size: clamp(26px, 3.4vw, 32px);
  letter-spacing: -0.01em;
}

.guide-ideas {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.guide-idea {
  padding: 22px 24px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.guide-idea h3 {
  margin: 10px 0 6px;
  font-family: var(--body);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
}

.guide-idea p {
  margin: 0;
  color: var(--ink-soft);
}

.guide-size {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--amber-tint);
  font-size: 12.5px;
  font-weight: 600;
  color: #9a5a26;
}

.guide-callout {
  margin-top: 20px;
  padding: 24px 26px;
  background: var(--ivory);
  border-left: 4px solid var(--sage);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.guide-callout h3 {
  margin: 0 0 8px;
  font-family: var(--display);
  font-size: 21px;
  letter-spacing: -0.01em;
}

.guide-callout p {
  margin: 0;
  color: var(--ink-soft);
}

.guide-section-intro {
  margin: -8px 0 22px;
  color: var(--ink-soft);
}

.guide-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 32px;
}

.guide-jump a {
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  transition: border-color 0.18s ease, color 0.18s ease;
}

.guide-jump a:hover {
  border-color: var(--sage);
  color: var(--sage-deep);
}

.guide-type {
  display: inline-block;
  margin: 26px 0 12px;
  padding: 4px 11px;
  border-radius: 999px;
  font-family: var(--body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.guide-type:first-of-type {
  margin-top: 0;
}

.guide-type--photo {
  background: var(--sage-tint);
  color: var(--sage-deep);
}

.guide-type--video {
  background: var(--amber-tint);
  color: #9a5a26;
}

.guide-type--written {
  background: var(--lilac-tint);
  color: #654a8c;
}

.guide-prompts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.guide-prompt {
  padding: 18px 20px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.guide-prompt h4 {
  margin: 0 0 4px;
  font-family: var(--body);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}

.guide-prompt p {
  margin: 0;
  font-size: 15px;
  color: var(--ink-soft);
}

.guide-cta {
  margin-top: 72px;
  padding: 44px 28px;
  text-align: center;
  background: var(--sage-tint);
  border: 1px solid #cfe0d1;
  border-radius: var(--radius-lg);
}

.guide-cta h2 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(26px, 3.2vw, 34px);
  text-wrap: balance;
}

.guide-cta p {
  max-width: 48ch;
  margin: 12px auto 24px;
  color: var(--ink-soft);
}

@media (max-width: 640px) {
  .guide-wrap {
    width: min(760px, 100% - 32px);
  }

  .guide-principles,
  .guide-prompts {
    grid-template-columns: 1fr;
  }
}

/* ---------- blog ---------- */

/*
  /blog/ and /blog/<slug>/ are rendered by blog-tools/build-blog.mjs from the
  templates in blog-tools/templates/, never edited by hand. Post bodies are
  plain HTML fragments, so .blog-prose styles bare elements; the only custom
  markup a body may use is the .blog-prompts list.
*/

.blog-hero {
  padding: 52px 0 0;
  background: linear-gradient(180deg, #fdfaf6 0%, var(--ivory) 70%, var(--cream) 100%);
}

.blog-hero__inner {
  width: min(760px, 100% - 48px);
  margin-inline: auto;
}

.blog-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 26px;
  font-size: 14px;
  color: var(--muted);
}

.blog-breadcrumb a {
  text-decoration: none;
}

.blog-breadcrumb a:hover {
  color: var(--sage);
}

.blog-hero h1 {
  font-size: clamp(34px, 4.6vw, 52px);
  text-wrap: balance;
}

.blog-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 18px;
  font-size: 14px;
  color: var(--muted);
}

.blog-lede {
  margin-top: 22px;
  font-size: 19px;
  color: var(--ink-soft);
}

.blog-hero__media {
  width: min(1040px, 100% - 48px);
  margin: 40px auto 0;
}

.blog-hero__media img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.blog-prose {
  width: min(720px, 100% - 48px);
  margin: 64px auto 88px;
  font-size: 18px;
  line-height: 1.7;
}

.blog-prose > :first-child {
  margin-top: 0;
}

.blog-prose p {
  margin: 0 0 20px;
}

.blog-prose h2 {
  margin: 56px 0 16px;
  font-size: clamp(27px, 3vw, 34px);
}

.blog-prose h3 {
  margin: 34px 0 10px;
  font-size: 22px;
}

.blog-prose ul,
.blog-prose ol {
  margin: 0 0 22px;
  padding-left: 24px;
}

.blog-prose li {
  margin-bottom: 8px;
}

.blog-prose a {
  color: var(--sage-deep);
  text-underline-offset: 3px;
}

.blog-prose strong {
  color: var(--ink);
  font-weight: 600;
}

.blog-prose blockquote {
  margin: 32px 0;
  padding: 4px 0 4px 24px;
  border-left: 3px solid var(--sage-brand);
  font-family: var(--display);
  font-style: italic;
  font-size: 22px;
  line-height: 1.45;
  color: var(--ink);
}

.blog-prose blockquote p:last-child {
  margin-bottom: 0;
}

.blog-prose figure {
  margin: 32px 0;
}

.blog-prose figure img {
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.blog-prose figcaption {
  margin-top: 10px;
  font-size: 14px;
  color: var(--muted);
}

.blog-prose hr {
  margin: 48px 0;
  border: 0;
  border-top: 1px solid var(--line);
}

.blog-prose table {
  width: 100%;
  margin: 8px 0 28px;
  border-collapse: collapse;
  font-size: 16px;
  line-height: 1.5;
}

.blog-prose th,
.blog-prose td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.blog-prose th {
  font-weight: 600;
  color: var(--ink);
  background: var(--shell);
}

/* A list of prompts written out as a couple would type them, each tagged
   with its type in the same colours as the prompt icons on the homepage. */
.blog-prose .blog-prompts {
  list-style: none;
  margin: 8px 0 28px;
  padding: 0;
  display: grid;
  gap: 10px;
}

.blog-prose .blog-prompt {
  display: flex;
  gap: 14px;
  align-items: baseline;
  margin: 0;
  padding: 14px 18px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  font-size: 16px;
  line-height: 1.55;
}

.blog-prompt__type {
  flex: none;
  min-width: 72px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
}

.blog-prompt__type--photo {
  background: var(--sage-tint);
  color: var(--sage-deep);
}

.blog-prompt__type--video {
  background: var(--amber-tint);
  color: #8f5220;
}

.blog-prompt__type--written {
  background: var(--lilac-tint);
  color: #654a8c;
}

.blog-cta {
  max-width: 820px;
  margin-inline: auto;
  padding: 52px 32px;
  text-align: center;
  background: var(--sage-tint);
  border: 1px solid #cfe0d1;
  border-radius: var(--radius-lg);
}

.blog-cta h2 {
  font-size: clamp(28px, 3.2vw, 38px);
  text-wrap: balance;
}

.blog-cta p {
  max-width: 52ch;
  margin: 14px auto 0;
  color: var(--ink-soft);
}

.blog-cta__buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 28px;
}

.blog-list-section .section-head {
  margin-bottom: 44px;
}

.blog-list-section h1 {
  font-size: clamp(36px, 4.4vw, 52px);
  text-wrap: balance;
}

.blog-list {
  display: grid;
  gap: 24px;
}

.blog-related {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.blog-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.blog-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.blog-card__media img {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.blog-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 22px 24px;
}

.blog-card__date {
  font-size: 13px;
  color: var(--muted);
}

.blog-card__title {
  font-family: var(--display);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
}

.blog-card__desc {
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
}

.blog-card__more {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--sage);
}

@media (min-width: 760px) {
  .blog-card--wide {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  }

  .blog-card--wide .blog-card__body {
    justify-content: center;
    padding: 28px 32px;
  }

  .blog-card--wide .blog-card__title {
    font-size: 26px;
  }
}

.blog-empty {
  max-width: 640px;
  padding: 26px;
  background: var(--shell);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.blog-empty a {
  color: var(--sage-deep);
}

@media (max-width: 900px) {
  .blog-related {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .blog-hero {
    padding-top: 36px;
  }

  .blog-hero__inner,
  .blog-hero__media,
  .blog-prose {
    width: calc(100% - 32px);
  }

  .blog-prose {
    margin: 44px auto 64px;
    font-size: 17px;
  }

  .blog-prose .blog-prompt {
    flex-direction: column;
    gap: 8px;
  }

  .blog-prose table {
    display: block;
    overflow-x: auto;
  }

  .blog-cta {
    padding: 40px 22px;
  }
}