/* Madali marketing pages. Legal pages keep styles.css; do not link this file from them. */
:root {
  --ink: #2A2420;
  --ink2: #3B332C;
  --ink3: #55483E;
  --mute: #877B6E;
  --paper: #FBF6F1;
  --paper-elev: #FDFBF8;
  --card: #FFFFFF;
  --surface2: #F5EEE6;
  --hair: #EBE0D6;
  /* 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 */
  --mango: #E0961F;
  --mango-tint: #FDF2E0;
  --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-block;
  font-size: 14px; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--guava-deep); background: var(--guava-tint);
  padding: 6px 14px; border-radius: 999px; margin-bottom: 18px;
}

/* Guava bar behind the second sentence of the H1.
   This is painted as a background layer on the inline box rather than as an
   absolutely positioned ::after. An absolutely positioned pseudo element is a
   single box, so once the span breaks over two lines it either detaches from
   the wrapped words or needs white-space: nowrap, which overflows a 390px
   viewport. A background layer is painted once per line fragment, so the bar
   follows the words on every line and never reaches the line below. */
.h1-accent {
  background-image: linear-gradient(rgba(225,81,107,0.22), rgba(225,81,107,0.22));
  background-image: linear-gradient(
    color-mix(in srgb, var(--guava) 22%, transparent),
    color-mix(in srgb, var(--guava) 22%, transparent));
  background-repeat: no-repeat;
  /* Sized in em so the bar keeps its relationship to the type: 10px against
     the 38px mobile H1, a little more against the 60px desktop one. Anchored
     to the bottom of the inline box so the rounding actually renders and so
     the bar sits on the baseline rather than hanging below it. */
  background-size: 100% clamp(7px, 0.15em, 11px);
  background-position: 0 calc(100% - 0.04em);
  border-radius: 999px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Nav */
.nav { position: sticky; top: 0; z-index: 40; background: rgba(251,246,241,0.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--hair); }
.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 { 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 { color: #fff; }
.nav-links a.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 { font-size: 15px; }
  .nav-links a.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 { font-size: 14px; }
  .nav-links a.btn-small { padding: 8px 10px; font-size: 13.5px; }
}

/* Banderitas. The markup pins preserveAspectRatio="none", so the strand always
   spans the full width and height is the only lever on how squashed the flags
   look. A flat 26px leaves the flags as shallow arrowheads at 1280 and wider,
   so the height tracks the viewport: about 41px at 1280, about 26px at tablet
   widths, and a deliberately modest 20px floor on phones so a strip of bunting
   never eats the top of a 390 or 360 screen. */
.bunting {
  display: block; width: 100%; margin: 0; border: 0;
  height: clamp(26px, 3.2vw, 44px);
  background-color: var(--paper);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20120%2026%22%3E%3Cpath%20d%3D%22M0%203%20Q30%2012%2060%203%20Q90%2012%20120%203%22%20fill%3D%22none%22%20stroke%3D%22%23D9CCBE%22%20stroke-width%3D%221.1%22%2F%3E%3Cpolygon%20points%3D%224%2C6%2026%2C6%2015%2C23%22%20fill%3D%22%231DA466%22%2F%3E%3Cpolygon%20points%3D%2234%2C6%2056%2C6%2045%2C23%22%20fill%3D%22%23F5C9D2%22%2F%3E%3Cpolygon%20points%3D%2264%2C6%2086%2C6%2075%2C23%22%20fill%3D%22%23F7DDB0%22%2F%3E%3Cpolygon%20points%3D%2294%2C6%20116%2C6%20105%2C23%22%20fill%3D%22%23E1516B%22%20fill-opacity%3D%22.85%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
  background-position: left top;
  background-size: auto 100%;
}
.bunting--faint { opacity: .35; }

/* Buttons */
.btn {
  display: inline-block; padding: 14px 26px; border-radius: 999px;
  font-weight: 650; font-size: 16.5px; text-decoration: none; border: 1px solid transparent;
  transition: transform 0.06s ease;
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--green-deep); color: #fff; }
.btn-primary:hover { background: var(--green-deep); }
.btn-quiet { background: transparent; color: var(--ink); border-color: var(--hair); }
.btn-quiet:hover { border-color: var(--mute); }
.btn-small { padding: 10px 20px; font-size: 15px; }

/* Store availability. Apple's artwork is the unmodified official badge. The
   Android card is intentionally neutral and noninteractive until Play is public. */
.store-badges { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.app-store-badge { display: inline-flex; width: 180px; line-height: 0; border-radius: 9px; }
.app-store-badge img { width: 180px; height: auto; }
.app-store-badge:focus-visible { outline: 3px solid var(--guava); outline-offset: 3px; }
.store-coming-badge {
  display: inline-flex; align-items: center; gap: 11px;
  width: 180px; min-height: 60px; padding: 8px 16px;
  color: #655E57; background: #E9E5E0; border: 1px solid #D8D1C9;
  border-radius: 9px; cursor: not-allowed; user-select: none;
}
.store-coming-badge svg {
  width: 27px; height: 27px; flex: 0 0 auto; fill: none;
  stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.store-coming-badge span { display: grid; line-height: 1.08; }
.store-coming-badge small { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.store-coming-badge strong { margin-top: 4px; font-size: 16px; }

/* 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;
}
/* The faintest guava wash. Enough that alternating sections read as
   alternating, not enough to read as pink. */
.section-alt {
  background: #FDF6F5;
  background: color-mix(in srgb, var(--guava-tint) 42%, var(--paper-elev));
  border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
}

/* Hero */
.hero { padding: 84px 0 64px; }
.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; 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: 1px solid var(--hair); border-radius: 24px;
  box-shadow: 0 18px 44px rgba(42,36,32,0.12); background: var(--card);
  margin-left: auto; margin-right: auto;
}
/* Sized per context, not globally: the hero shot is the page's main image and
   was shrinking to the proof-row size. */
.hero .phone-shot { width: 100%; max-width: 400px; }
.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 .phone-shot { max-width: 260px; }
}

/* Guest strip */
.guest-strip { background: var(--green-tint); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); padding: 16px 0; }
.guest-strip p { margin: 0; font-size: 16px; color: var(--ink2); }

/* 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;
}
.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; }

@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(--green-deep); color: #fff; 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-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(--green-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: 1px solid var(--hair); background: var(--paper-elev); padding: 44px 0; }
.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(--ink2); text-decoration: none; font-size: 15.5px; }
.foot-links a:hover { color: var(--green-deep); }
.foot-note { color: var(--ink3); font-size: 14.5px; margin-top: 14px; }
.apple-credit { max-width: 720px; color: var(--mute); font-size: 11.5px; line-height: 1.45; margin: 24px 0 0; }

/* Blog */
.guide-index { padding: 64px 0 76px; }
.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--circles { background: var(--mango-tint); }
.guide-card-visual--rsvp { background: var(--guava-tint); }
.guide-card-visual--eventsync {
  display: flex; align-items: center; justify-content: center;
  padding: 34px; background: #F1E9E0;
}
.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(253,251,248,.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: 44px 0 58px; }
  .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 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(--surface2); border-left: 4px solid var(--green);
  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(--green-tint); border: 1px solid var(--green-bright); 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-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); }

@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 #C4956A; background: linear-gradient(135deg, var(--paper-elev) 0%, #fffaf6 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);
}