/* Madali marketing pages. Legal pages keep styles.css; do not link this file from them. */
:root {
  --ink: #181B18;
  --ink2: #303B34;
  --ink3: #47534B;
  --mute: #636B62;
  --paper: #F4F5F4;
  --paper-elev: #F8F9F8;
  --card: #FFFFFF;
  --surface2: #ECEFEC;
  --hair: #D8DDD9;
  --on-color: #FFFFFF;
  /* Exact endpoints from the production Madali app-icon gradient. */
  --logo-green-top: #1DA466;
  --logo-green-bottom: #0F7A49;
  --green: var(--logo-green-top);
  --green-deep: var(--logo-green-bottom);
  --green-bright: var(--logo-green-top);
  --green-tint: #E3F1E8;
  --guava: #E1516B;
  --guava-tint: #FCE9EC;
  --guava-deep: #B03350; /* on --guava-tint this measures 5.24:1, passes WCAG AA */
  --radius: 16px;
  --maxw: 1080px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font: 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--green-deep); }
a:hover { text-decoration-thickness: 2px; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.wrap-narrow { max-width: 720px; margin: 0 auto; padding: 0 24px; }

h1 { font-size: clamp(38px, 6vw, 60px); line-height: 1.08; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 18px; }
h2 { font-size: clamp(26px, 3.4vw, 34px); line-height: 1.2; font-weight: 750; letter-spacing: -0.015em; margin: 0 0 14px; }
h3 { font-size: 21px; font-weight: 700; margin: 0 0 8px; }

.eyebrow {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 7px;
  font-size: 14px; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--guava-deep); margin-bottom: 18px;
}
.eyebrow::after {
  content: ""; width: 32px; height: 3px; border-radius: 3px;
  background: var(--guava);
}

/* The approved store palette uses flat guava and the original green on neutral gray. */
.h1-accent { color: var(--ink); }

/* Nav */
.nav { position: sticky; top: 0; z-index: 40; background: var(--paper); border-bottom: 3px solid var(--guava); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; max-width: var(--maxw); margin: 0 auto; }
.nav-brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 800; font-size: 21px; color: var(--logo-green-bottom); text-decoration: none;
  white-space: nowrap;
}
.brandmark { display: block; flex-shrink: 0; }
.wordmark-main {
  color: var(--logo-green-bottom);
  background: linear-gradient(180deg, var(--logo-green-top), var(--logo-green-bottom));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.wordmark-i { color: var(--guava); }
.nav-links { display: flex; gap: 26px; align-items: center; }
.nav-links > a,
.nav-links > .store-chooser > summary {
  color: var(--ink2); text-decoration: none; font-weight: 600; font-size: 15.5px; white-space: nowrap;
}
.nav-links > a:hover { color: var(--green-deep); }
.nav-links > a.btn-primary,
.nav-links > .store-chooser > summary.btn-primary { color: #fff; }
.nav-links > a.btn-primary:hover,
.nav-links > .store-chooser > summary.btn-primary:hover { color: #fff; }

/* Compact navigation. Guides and Support remain visible at every width; the
   two in-page section shortcuts collapse before they can crowd the product
   CTA. No hamburger and no script are needed for this small information
   architecture. */
@media (max-width: 860px) {
  .nav-links .nav-section { display: none; }
}
@media (max-width: 640px) {
  .nav-inner { padding: 12px 16px; gap: 12px; }
  .nav-brand { font-size: 19px; gap: 8px; }
  .nav-links { gap: 12px; }
  .nav-links > a,
  .nav-links > .store-chooser > summary { font-size: 15px; }
  .nav-links > a.btn-small,
  .nav-links > .store-chooser > summary.btn-small { padding: 9px 16px; font-size: 14.5px; }
}
@media (max-width: 370px) {
  .nav-inner { padding: 10px; gap: 6px; }
  .nav-brand { font-size: 17.5px; gap: 7px; }
  .nav-links { gap: 8px; }
  .nav-links > a,
  .nav-links > .store-chooser > summary { font-size: 14px; }
  .nav-links > a.btn-small,
  .nav-links > .store-chooser > summary.btn-small { padding: 8px 10px; font-size: 13.5px; }
}

/* Solid color bands take over the old decorative bunting. */
.bunting { display: none; }

/* Buttons */
.btn {
  display: inline-block; padding: 14px 26px; border-radius: 11px;
  font-weight: 650; font-size: 16.5px; text-decoration: none; border: 1px solid transparent;
  transition: transform .08s ease, box-shadow .08s ease, background-color .12s ease, border-color .12s ease;
}
.btn:active { transform: translateY(2px); }
.btn-primary {
  background: var(--green-deep); color: #fff;
  box-shadow: 0 3px 0 #0A6039, 0 9px 20px rgba(15,122,73,.16);
}
.btn-primary:active { box-shadow: 0 1px 0 #0A6039, 0 4px 10px rgba(15,122,73,.12); }
.btn-primary:hover { background: var(--logo-green-top); }
.btn-quiet {
  background: var(--card); color: var(--ink); border-color: var(--hair);
  box-shadow: 0 3px 0 rgba(71,83,75,.16), 0 8px 18px rgba(42,36,32,.06);
}
.btn-quiet:hover { border-color: var(--mute); }
.btn-quiet:active { box-shadow: 0 1px 0 rgba(71,83,75,.16), 0 3px 8px rgba(42,36,32,.05); }
.btn-small { padding: 10px 20px; font-size: 15px; }

/* Store availability. Both links use unmodified official store badges. */
.store-badges {
  /* Google Play's supplied badge includes transparent artwork framing. Keep the
     clickable frames equal while centering Apple's unframed artwork within its
     frame, so the two visible official marks share one 48px height. */
  --store-badge-height: 71.428571px;
  --store-badge-visible-height: 48px;
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center; scroll-margin-top: 92px;
}
.app-store-badge,
.play-store-badge { display: inline-flex; flex: 0 0 auto; align-items: center; height: var(--store-badge-height); line-height: 0; }
.app-store-badge { border-radius: 9px; }
.app-store-badge img,
.play-store-badge img { display: block; width: auto; height: var(--store-badge-height); }
.app-store-badge img {
  box-sizing: border-box;
  padding-block: calc((var(--store-badge-height) - var(--store-badge-visible-height)) / 2);
}
.app-store-badge:focus-visible { outline: 3px solid var(--guava); outline-offset: 3px; }
.play-store-badge { border-radius: 8px; }
.play-store-badge:focus-visible { outline: 3px solid var(--guava); outline-offset: 3px; }
@media (max-width: 420px) {
  .store-badges { gap: 6px; }
}

/* Every generic download CTA opens this native disclosure instead of guessing
   the visitor's device. <details> supplies the keyboard semantics without
   adding a script to the marketing site. */
.store-chooser { position: relative; display: inline-block; }
.store-chooser > summary { list-style: none; cursor: pointer; }
.store-chooser > summary::-webkit-details-marker { display: none; }
.store-chooser > summary::marker { content: ""; }
.store-chooser > summary.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.store-chooser[open] > summary { box-shadow: 0 0 0 3px var(--green-tint); }
.store-chooser-arrow { font-size: .9em; line-height: 1; transition: transform .12s ease; }
.store-chooser[open] .store-chooser-arrow { transform: rotate(180deg); }
.store-chooser-menu {
  position: absolute; z-index: 70; top: calc(100% + 10px); left: 0;
  display: grid; gap: 8px; width: min(300px, calc(100vw - 32px));
  padding: 14px; border: 1px solid var(--hair); border-radius: 14px;
  background: var(--paper-elev); box-shadow: 0 16px 36px rgba(42,36,32,.18);
  text-align: left;
}
.store-chooser--nav .store-chooser-menu { right: 0; left: auto; }
.store-chooser-title { margin: 0 0 2px; color: var(--ink3); font-size: 14px; font-weight: 700; }
.store-choice {
  display: grid; gap: 2px; padding: 11px 12px; border: 1px solid var(--hair);
  border-radius: 10px; color: var(--ink); background: var(--card); text-decoration: none;
  font-weight: 750; line-height: 1.25;
}
.store-choice:hover { border-color: var(--green-bright); color: var(--green-deep); }
.store-choice:focus-visible { outline: 3px solid var(--guava); outline-offset: 2px; }
.store-choice-store { color: var(--ink3); font-size: 13px; font-weight: 600; }

/* Sections */
section { padding: 72px 0; }
section[id] { scroll-margin-top: 76px; }
section.tight { padding: 44px 0; }
/* The homepage has many successive story beats. A slightly tighter rhythm
   keeps each one distinct without turning the scroll into empty bands. */
#browser-rsvp,
#the-problem,
#proofs,
#change,
#circles,
#how-it-works,
#not-doing,
#pricing,
#for-guests,
#for-planners,
#faq {
  padding: 56px 0;
}
.section-alt {
  background: var(--surface2);
  border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
}

/* Hero */
.hero { padding: 56px 0 64px; background: var(--guava); }
.hero h1 { color: var(--on-color); }
.hero .eyebrow { color: var(--ink); }
.hero .eyebrow::after { background: var(--ink); }
.hero .hero-sub, .hero .hero-trust { color: var(--ink); }
.hero .btn-quiet {
  position: relative; padding: 5px 25px 5px 0; border: 0; border-bottom: 2px solid var(--ink);
  border-radius: 0; background: transparent; box-shadow: none; color: var(--ink);
}
.hero .btn-quiet::after {
  content: "\2192"; position: absolute; right: 0; top: 50%;
  transform: translateY(-50%); font-size: 20px; line-height: 1;
  transition: transform .12s ease;
}
.hero .btn-quiet:hover { background: transparent; border-color: var(--ink); }
.hero .btn-quiet:hover::after { transform: translate(3px, -50%); }
.hero .btn-quiet:active { transform: translateY(1px); box-shadow: none; }
.hero a:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 48px; align-items: center; }
@media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; } }
.hero-sub { font-size: 19.5px; color: var(--ink3); max-width: 560px; }
.hero-ctas { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 26px 0 18px; }
.hero-android { font-size: 15.5px; color: var(--ink3); }
.hero-trust { font-size: 14.5px; color: var(--mute); margin-top: 18px; }
.notify-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.phone-shot {
  border: 5px solid #18191C; border-radius: 32px;
  box-shadow: 0 18px 44px rgba(42,36,32,0.14); background: #18191C;
  margin-left: auto; margin-right: auto;
}
.shot-tilt-left { transform: rotate(-4deg); }
.shot-tilt-right { transform: rotate(4deg); }
/* The same unmodified app capture used in the approved guava screenshots. */
.hero-device {
  position: relative; width: min(100%, 320px); margin: 0 auto;
  border: 6px solid #18191C; border-radius: 39px; background: #18191C;
  transform: rotate(4deg); box-shadow: 0 22px 42px rgba(57, 21, 29, .22);
}
.hero-device img { width: 100%; border-radius: 32px; }
.hero-device::after {
  content: ""; position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  width: 60px; height: 14px; border-radius: 999px; background: #101115;
}
.proof .phone-shot { max-width: 300px; }

/* Hero on small screens: the shot has to come before the Android notify line
   and the trust line, otherwise it sits entirely below the fold. The copy
   column is flattened with display: contents so its children and the media
   column become siblings in one flex column, then order does the work.
   No markup is duplicated. */
@media (max-width: 640px) {
  .hero { padding: 40px 0 48px; }
  .hero-grid { display: flex; flex-direction: column; gap: 0; align-items: stretch; }
  .hero-grid > div:first-child { display: contents; }
  .hero-grid .eyebrow { order: 1; align-self: flex-start; }
  .hero-grid h1 { order: 2; }
  .hero-grid .hero-sub { order: 3; }
  .hero-grid .hero-ctas { order: 4; }
  .hero-grid > div:last-child { order: 5; margin: 20px 0 4px; }
  .hero-grid .hero-android { order: 6; }
  .hero-grid .hero-trust { order: 7; }
  .hero-device { width: min(100%, 260px); }
}

/* Guest strip */
.guest-strip { background: var(--green-deep); padding: 20px 0; }
.guest-strip p { margin: 0; font-size: 16px; color: var(--on-color); }
.guest-strip a { color: var(--on-color); text-underline-offset: 3px; }

/* The home page stays concise. Product videos live on durable Guide pages;
   these compact cards lead people to the one story they need without loading
   six video players into the landing page. Poster art always uses contain so
   the phone frame is never stretched or cropped. */
.featured-guides { padding: 56px 0; }
.featured-guides-heading { max-width: 760px; margin: 0 0 28px; }
.featured-guides-heading > p { max-width: 680px; margin-bottom: 0; color: var(--ink3); font-size: 18.5px; }
.featured-guide-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.featured-guide-card {
  display: grid; grid-template-rows: 230px 1fr; min-width: 0; overflow: hidden;
  border: 1px solid var(--hair); border-radius: 22px; background: var(--card);
  box-shadow: 0 12px 30px rgba(42,36,32,.08); color: inherit; text-decoration: none;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.featured-guide-card:hover { transform: translateY(-3px); border-color: var(--green); box-shadow: 0 18px 38px rgba(42,36,32,.11); }
.featured-guide-card:focus-visible { outline: 3px solid var(--guava); outline-offset: 4px; }
.featured-guide-media { display: grid; place-items: center; overflow: hidden; border-bottom: 1px solid var(--hair); background: var(--green-tint); }
.featured-guide-card:nth-child(2) .featured-guide-media { background: var(--guava-tint); }
.featured-guide-card:nth-child(3) .featured-guide-media { background: var(--card); }
.featured-guide-media img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.featured-guide-copy { display: flex; flex-direction: column; padding: 22px; }
.featured-guide-copy > strong { font-size: 21px; line-height: 1.25; }
.featured-guide-copy > span:not(.guide-kicker):not(.featured-guide-link) { margin-top: 9px; color: var(--ink3); font-size: 15.5px; line-height: 1.5; }
.featured-guide-link { margin-top: auto; padding-top: 18px; color: var(--green-deep); font-weight: 750; }
.featured-guides-more { margin: 24px 0 0; font-weight: 750; }
.featured-guides-more a {
  display: inline-flex; align-items: center; gap: 10px;
  padding-bottom: 3px; border-bottom: 2px solid currentColor; text-decoration: none;
}
.featured-guides-more a::after { content: "\2192"; font-size: 19px; transition: transform .12s ease; }
.featured-guides-more a:hover::after { transform: translateX(3px); }
@media (max-width: 820px) {
  .featured-guide-grid { grid-template-columns: 1fr; }
  .featured-guide-card { grid-template-columns: minmax(150px, .7fr) 1.3fr; grid-template-rows: 250px; }
}
@media (max-width: 560px) {
  .featured-guides { padding: 44px 0; }
  .featured-guides-heading { margin-bottom: 24px; }
  .featured-guides-heading > p { font-size: 17px; }
  .featured-guide-card { grid-template-columns: 1fr; grid-template-rows: 220px 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .featured-guide-card { transition: none; }
  .featured-guide-card:hover { transform: none; }
}

/* Event-photo story. This sits near the top because ownership of the media is
   one of Madali's clearest product differences, not a secondary gallery perk. */
.photo-feature { padding: 52px 0; }
.photo-showcase {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  grid-template-areas:
    "intro visual"
    "flow visual"
    "details visual";
  column-gap: 44px;
  row-gap: 22px;
  align-items: start;
}
.photo-intro { grid-area: intro; max-width: 760px; }
.photo-intro .eyebrow { margin-bottom: 14px; }
.photo-lede { max-width: 720px; margin: 0; color: var(--ink3); font-size: 19px; }
.photo-visual { grid-area: visual; align-self: center; }
.photo-visual .phone-shot { width: 100%; max-width: 300px; }
.photo-caption { max-width: 320px; margin: 10px auto 0; color: var(--mute); font-size: 13px; text-align: center; }
.photo-flow {
  grid-area: flow;
  counter-reset: photo-step; list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: 1fr; gap: 12px;
}
.photo-flow li {
  counter-increment: photo-step; position: relative; min-height: 0;
  background: var(--card); border: 1px solid var(--hair); border-radius: var(--radius);
  padding: 16px 18px 16px 58px;
}
.photo-flow li::before {
  content: counter(photo-step); position: absolute; top: 16px; left: 16px;
  width: 28px; height: 28px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: var(--green-deep); color: #fff; font-weight: 750;
}
.photo-flow strong { display: block; margin-bottom: 3px; font-size: 17.5px; }
.photo-flow span { color: var(--ink3); }
.photo-details { grid-area: details; }
.photo-note { max-width: 820px; margin: 0; color: var(--mute); font-size: 14.5px; }
.photo-details .feature-guide-link { margin-top: 12px; }
@media (max-width: 760px) {
  .photo-feature { padding: 44px 0; }
  .photo-showcase {
    grid-template-columns: 1fr;
    grid-template-areas:
      "intro"
      "visual"
      "flow"
      "details";
    gap: 28px;
  }
  .photo-visual .phone-shot { max-width: 280px; }
}

/* Proof blocks */
.proof { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: start; margin-top: 36px; }
.proof.proof--flush { margin-top: 0; }
.proof.proof--center { align-items: center; }
.proof:nth-of-type(even) .proof-media { order: -1; }
.proof-media img { max-width: 260px; margin: 0 auto; }
.circle-video-figure {
  width: min(100%, 360px);
  margin: 0 auto;
  text-align: center;
}
.circle-video {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  border: 1px solid var(--hair);
  border-radius: 24px;
  box-shadow: 0 18px 44px rgba(42,36,32,0.12);
  background: #000;
  object-fit: cover;
}
.circle-video:focus-visible {
  outline: 3px solid var(--guava);
  outline-offset: 4px;
}
.circle-video-figure figcaption {
  max-width: 34ch;
  margin: 12px auto 0;
  color: var(--mute);
  font-size: 14px;
  line-height: 1.45;
}
.circle-video-poster-link {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid var(--hair);
  border-radius: 24px;
  background: #111;
  box-shadow: 0 18px 44px rgba(42,36,32,.12);
}
.circle-video-poster { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; }
.circle-video-play {
  position: absolute;
  right: 16px;
  bottom: 16px;
  left: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 14px;
  border-radius: 11px;
  background: var(--green-deep);
  color: #fff;
  font-size: 14px;
  font-weight: 750;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(0,0,0,.22);
}
.circle-video-poster-link:hover .circle-video-play { background: var(--green-deep); }
.circle-video-poster-link:focus-visible { outline: 4px solid var(--guava); outline-offset: 4px; }
.feature-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 30px; }
.feature-card {
  display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--hair); border-radius: var(--radius);
  padding: 26px;
}
.feature-card-media { margin-top: auto; padding-top: 24px; }
.feature-card-media img { width: 100%; max-width: 230px; margin: 0 auto; }
@media (max-width: 860px) {
  .proof { grid-template-columns: 1fr; gap: 28px; margin-top: 28px; }
  .proof.proof--center { align-items: stretch; }
  .proof.proof--flush { margin-top: 0; }
  .proof:nth-of-type(even) .proof-media { order: 0; }
  .circle-video-figure { width: min(100%, 320px); }
}
@media (max-width: 700px) {
  .feature-pair { grid-template-columns: 1fr; gap: 18px; margin-top: 24px; }
  .feature-card { padding: 24px 22px; }
  .feature-card-media img { max-width: 230px; }
}
.smallprint { font-size: 14.5px; color: var(--mute); margin-top: 10px; }

/* A second strong guava moment connects Circles to the approved store art. */
#circles { background: var(--guava); border-color: var(--guava); }
#circles h2 { color: var(--on-color); }
#circles p, #circles .feature-guide-link a,
#circles .circle-video-figure figcaption { color: var(--ink); }
#circles .callout { background: var(--card); border-color: var(--card); color: var(--green-deep); }
#circles .circle-video-poster-link:focus-visible { outline-color: var(--ink); }

@media (max-width: 640px) {
  #browser-rsvp,
  #the-problem,
  #proofs,
  #change,
  #circles,
  #how-it-works,
  #not-doing,
  #pricing,
  #for-guests,
  #for-planners,
  #faq {
    padding: 44px 0;
  }
}

/* Cards and lists */
.card { background: var(--card); border: 1px solid var(--hair); border-radius: var(--radius); padding: 28px; }
.callout { background: var(--green-tint); border: 1px solid var(--green-bright); border-radius: var(--radius); padding: 18px 22px; font-weight: 600; color: var(--green-deep); margin-top: 22px; }

.steps { counter-reset: step; list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 18px; }
.steps li { position: relative; padding-left: 58px; }
.steps li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: 2px;
  width: 40px; height: 40px; border-radius: 999px;
  background: var(--guava); color: var(--ink); font-weight: 750;
  display: flex; align-items: center; justify-content: center;
}

.notdo { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 14px; }
.notdo li { background: var(--card); border: 1px solid var(--hair); border-radius: var(--radius); padding: 18px 22px; }

/* Pricing */
.price-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 36px; max-width: 780px; margin-left: auto; margin-right: auto; }
@media (max-width: 700px) { .price-grid { grid-template-columns: 1fr; } }
.price-card { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--hair); border-radius: var(--radius); padding: 32px 28px; }
.price-card:last-child { border-top: 5px solid var(--guava); padding-top: 28px; }
.price-amount { font-size: 40px; font-weight: 800; letter-spacing: -0.02em; }
.price-line { color: var(--ink3); margin-top: 2px; }
.pro-price-options { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: end; margin: 10px 0 12px; }
.pro-price-option { display: grid; line-height: 1.15; }
.pro-price-option strong { font-size: 30px; letter-spacing: -0.02em; }
.pro-price-option span { margin-top: 4px; color: var(--ink3); font-size: 14.5px; }
.pro-price-or { padding-bottom: 2px; color: var(--mute); font-size: 14.5px; }
.price-card ul { list-style: none; padding: 0; margin: 20px 0; display: grid; gap: 10px; }
.price-card li { padding-left: 26px; position: relative; }
.price-card li::before { content: ""; position: absolute; left: 0; top: 7px; width: 14px; height: 14px; border-radius: 999px; background: var(--green-tint); border: 2px solid var(--green); }
.price-card .btn { align-self: flex-start; margin-top: auto; }
.price-note { font-size: 14.5px; color: var(--mute); text-align: center; margin-top: 18px; }
.plan-disclosure { max-width: 780px; margin: 18px auto 0; color: var(--mute); font-size: 13.5px; text-align: center; }
.section-heading-center { text-align: center; }
.section-intro-center { margin-left: auto; margin-right: auto; text-align: center; color: var(--ink3); }
.flush-copy { margin: 0; }
.section-action { margin: 26px 0 0; }
.planner-offer { margin-top: 24px; padding: 28px; background: var(--card); border: 1px solid var(--hair); border-radius: var(--radius); }
.planner-offer .eyebrow { margin-bottom: 12px; }
.planner-price { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: baseline; margin: 0 0 12px; }
.planner-price strong { font-size: clamp(25px, 4vw, 32px); letter-spacing: -0.02em; }
.planner-price span { color: var(--mute); }
.planner-route { padding: 16px 18px; background: var(--green-tint); border-radius: 12px; color: var(--green-deep); }
.planner-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
@media (max-width: 430px) {
  .pro-price-option strong { font-size: 27px; }
  .planner-offer { padding: 24px 20px; }
  .planner-actions .btn { width: 100%; text-align: center; }
}

/* FAQ */
.faq-item { border-bottom: 1px solid var(--hair); padding: 6px 0; }
.faq-item summary { font-weight: 700; font-size: 17.5px; padding: 14px 0; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.faq-item summary::after { content: "+"; font-size: 22px; color: var(--guava-deep); font-weight: 400; }
.faq-item[open] summary::after { content: "\2212"; }
.faq-item p { margin: 0 0 16px; color: var(--ink2); }

/* Q&A guests */
.qa { display: grid; gap: 16px; margin: 26px 0; }
.qa dt { font-weight: 700; }
.qa dd { margin: 4px 0 0; color: var(--ink2); }

/* Footer */
footer { border-top: 6px solid var(--guava); background: var(--green-deep); color: var(--on-color); padding: 44px 0; }
footer .nav-brand { padding: 8px 12px; border-radius: 14px; background: var(--card); }
footer .btn-quiet { background: var(--card); border-color: var(--card); }
.foot-grid { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: flex-start; }
.foot-links { display: flex; gap: 20px; flex-wrap: wrap; }
.foot-links a { color: var(--on-color); text-decoration: none; font-size: 15.5px; }
.foot-links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.foot-note { color: var(--on-color); font-size: 14.5px; margin-top: 14px; }
.apple-credit { max-width: 720px; color: var(--on-color); font-size: 11.5px; line-height: 1.45; margin: 24px 0 0; }

/* Blog */
.guide-index { padding: 0 0 76px; }
.guide-index-header { padding: 56px 0 44px; background: var(--guava); }
.guide-index-header h1 { color: var(--on-color); }
.guide-index-header .hero-sub { color: var(--ink); margin-bottom: 0; }
.guide-index-header .eyebrow { color: var(--ink); }
.guide-index-header .eyebrow::after { background: var(--ink); }
.guide-index-wrap { max-width: 1040px; }
.post-list { display: grid; gap: 20px; margin-top: 36px; }
.guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.guide-card {
  display: grid; grid-template-rows: 220px 1fr; min-width: 0; padding: 0; overflow: hidden;
  color: inherit; text-decoration: none;
  box-shadow: 0 10px 30px rgba(42,36,32,0.06);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.guide-card--featured { grid-column: 1 / -1; grid-template-columns: minmax(300px, .92fr) 1.08fr; grid-template-rows: 420px; }
.guide-card-visual {
  position: relative; display: block; min-width: 0; min-height: 0; overflow: hidden;
  background: var(--surface2); border-bottom: 1px solid var(--hair);
}
.guide-card-visual > img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.guide-card-visual--photos { background: var(--green-tint); }
.guide-card-visual--photos > img { object-fit: cover; object-position: center 54%; }
.guide-card-visual--headcount { background: var(--green-tint); }
.guide-card-visual--headcount > img { object-fit: cover; object-position: center; }
.guide-card-visual--quick { background: var(--green-tint); }
.guide-card-visual--group { background: var(--guava-tint); }
.guide-card-visual--circles { background: var(--guava-tint); }
.guide-card-visual--rsvp { background: var(--guava-tint); }
.guide-card-visual--pro { background: var(--card); }
.guide-card-visual--eventsync {
  display: flex; align-items: center; justify-content: center;
  padding: 34px; background: var(--surface2);
}
.guide-card-visual--eventsync > img { width: min(300px, 86%); height: auto; object-fit: contain; }
.guide-visual-note {
  position: absolute; left: 14px; bottom: 14px; padding: 5px 10px;
  border-radius: 999px; background: rgba(255,255,255,.94); color: var(--ink3);
  font-size: 12px; font-weight: 650;
}
.guide-card-body { display: flex; flex-direction: column; padding: 26px; }
.guide-card-body h2 { margin-bottom: 10px; font-size: clamp(22px, 2.5vw, 28px); }
.guide-card-body p { color: var(--ink2); margin: 0; }
.guide-kicker {
  display: inline-block; align-self: flex-start; margin-bottom: 10px;
  color: var(--guava-deep); font-size: 13px; font-weight: 750;
  letter-spacing: .075em; text-transform: uppercase;
}
.guide-card-link { margin-top: auto; padding-top: 22px; color: var(--green-deep); font-weight: 750; }
.guide-card:hover { transform: translateY(-3px); border-color: var(--green); box-shadow: 0 18px 38px rgba(42,36,32,.11); }
.guide-card:focus-visible { outline: 3px solid var(--guava); outline-offset: 4px; }
@media (max-width: 760px) {
  .guide-index { padding: 0 0 58px; }
  .guide-index-header { padding: 40px 0 36px; }
  .guide-grid { grid-template-columns: 1fr; gap: 20px; }
  .guide-card--featured { grid-column: auto; grid-template-columns: 1fr; grid-template-rows: 240px 1fr; }
  .guide-card { grid-template-rows: 220px 1fr; }
}
@media (max-width: 430px) {
  .guide-card--featured, .guide-card { grid-template-rows: 200px 1fr; }
  .guide-card-body { padding: 22px 20px 24px; }
  .guide-card-visual--eventsync { padding: 28px; }
  .guide-visual-note { left: 14px; right: 14px; border-radius: 12px; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .guide-card { transition: none; }
  .guide-card:hover { transform: none; }
}
article.post { max-width: 720px; margin: 0 auto; padding: 56px 24px 80px; }
article.post h1 { font-size: clamp(30px, 4.6vw, 42px); }
article.post h1::before { content: ""; display: block; width: 72px; height: 6px; margin-bottom: 22px; border-radius: 3px; background: var(--guava); }
article.post h2 { font-size: clamp(22px, 3vw, 27px); margin-top: 40px; }
article.post h3 { margin-top: 26px; }
article.post blockquote {
  margin: 20px 0; padding: 16px 22px;
  background: var(--guava-tint); border-left: 4px solid var(--guava);
  border-radius: 0 var(--radius) var(--radius) 0; color: var(--ink2);
}
.post-meta { color: var(--ink3); font-size: 15px; margin-bottom: 26px; }
.post-method { color: var(--ink2); font-size: 15px; }
.post-cta { margin-top: 44px; background: var(--guava-tint); border: 1px solid var(--hair); border-top: 5px solid var(--guava); border-radius: var(--radius); padding: 24px 28px; }
.post-figure { margin: 34px auto; text-align: center; }
.post-figure img { display: block; width: min(320px, 100%); height: auto; margin: 0 auto; }
.post-figure figcaption { max-width: 420px; margin: 12px auto 0; color: var(--ink3); font-size: 14px; line-height: 1.5; }
.post-figure--wide img { width: 100%; border: 1px solid var(--hair); border-radius: var(--radius); }
.post-figure--wide figcaption { max-width: 620px; }
.post-video-figure { margin: 34px auto 40px; text-align: center; }
.post-video {
  display: block; width: min(360px, 100%); height: auto; aspect-ratio: 9 / 16;
  margin: 0 auto; border: 1px solid var(--hair); border-radius: 24px;
  background: #111; box-shadow: 0 18px 44px rgba(42,36,32,.12); object-fit: contain;
}
.post-video:focus-visible { outline: 4px solid var(--guava); outline-offset: 4px; }
.post-video-figure figcaption { max-width: 540px; margin: 12px auto 0; color: var(--ink3); font-size: 14px; line-height: 1.5; }
.post-store-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.post-store-links .btn { padding: 11px 18px; font-size: 15px; }
.post-related { display: grid; gap: 8px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--hair); }
.post-related p { margin: 0; }
.post-inline-phone { width: min(300px, 100%); margin: 26px auto; }
.post-last { margin-bottom: 0; }
.feature-guide-link { margin: 22px 0 0; font-weight: 700; }

.analytics-choice {
  position: fixed;
  z-index: 100;
  right: 20px;
  bottom: 20px;
  left: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: 920px;
  margin: 0 auto;
  padding: 18px 20px;
  border: 1px solid var(--hair);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(33, 51, 40, .2);
}
.analytics-choice p { margin: 4px 0 0; color: var(--ink2); font-size: 14px; line-height: 1.5; }
.analytics-choice-actions { display: flex; flex: 0 0 auto; gap: 10px; }
.analytics-preferences {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink2);
  font: inherit;
  font-size: 15.5px;
  text-decoration: none;
  cursor: pointer;
}
.analytics-preferences:hover { color: var(--green-deep); }
footer .analytics-preferences { color: var(--on-color); }
footer .analytics-preferences:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 760px) {
  .analytics-choice { align-items: stretch; flex-direction: column; gap: 14px; }
  .analytics-choice-actions { align-items: stretch; flex-direction: column; }
}

/* Product boundary. Madali stays focused on small personal gatherings; this
   bridge gives wedding teams a clear route to the purpose-built sibling app. */
.product-bridge { padding: 24px 0 56px; }
.product-bridge-card { border-left: 5px solid var(--guava); background: linear-gradient(135deg, var(--paper-elev) 0%, var(--card) 100%); }
.product-bridge-card p { color: var(--ink2); }
.product-bridge-logo { display: block; width: min(280px, 100%); height: auto; margin: 16px 0 22px; }
.product-bridge-logo--article { width: min(230px, 65%); margin: 0 0 28px; }
.bridge-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }


/* ==========================================================================
   Madali display face. Append to site.css.

   Nunito, SIL Open Font License 1.1, self hosted. One file, no network calls
   beyond this origin. Subset to the Latin characters the site actually uses
   and clipped to the 700 to 800 weight range that site.css already asks for,
   so h1 800, h2 750 and h3 700 all come from this single 11.2 KB file.

   Body copy is untouched and stays in the system sans stack.
   ========================================================================== */

@font-face {
  font-family: "Nunito";
  src: url("/assets/fonts/madali-display.woff2") format("woff2");
  font-weight: 700 800;   /* variable range, matches the weights site.css uses */
  font-style: normal;
  font-display: swap;
}

:root {
  /* Any character missing from the subset falls back per glyph to the stack
     below, so an unexpected heading character degrades to system sans
     rather than rendering as a tofu box. */
  --font-display: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
}

.nav-brand,
h1,
h2,
h3 {
  font-family: var(--font-display);
}