/* HOMEPAGE REVIEW, Kelly, Oct 31, 2026 (2026-10-31 homepage-review.md). Loaded last on the home page only. */

/* Every section ends where the next one's circle-O sits; a section never lets its contents push the page sideways. */
#main > section { overflow-x: clip; }

/* VOICE (It actually gets to know you), before One wedding: tighter under the headline, the devices a bit smaller, the arrow centred
   in the gap between the interview card and the laptop's lid, the caption and the link centred under the pair, then three short,
   wide boxes in one row. */
#example-brand-guide .vblock { margin-top: 24px; }
#example-brand-guide .vcap { grid-column: 1 / -1; text-align: center; margin: 18px 0 0; }
#example-brand-guide .vlink { grid-column: 1 / -1; text-align: center; margin: 8px 0 0; font: 700 13px/1.4 Montserrat, sans-serif; }
#example-brand-guide .vlink a { color: var(--green-text, #0a7a4f); text-decoration: none; }
#example-brand-guide .vlink a:hover { text-decoration: underline; }
#example-brand-guide .vlink .vtag { letter-spacing: .12em; text-transform: uppercase; font-size: 11px; color: inherit; }
#example-brand-guide .vreplay { grid-column: 1 / -1; text-align: center; margin: 6px 0 0; }
#example-brand-guide .vreplay button { font: 600 12px Montserrat, sans-serif; color: var(--slate); background: none; border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; cursor: pointer; }
@media (min-width: 1024px) {
  #example-brand-guide .vblock { grid-template-columns: 300px 72px 660px; justify-content: center; max-width: none; }
  #example-brand-guide .vlaptop .lapv33 { width: 100%; max-width: none; margin-left: 0; }
  /* The frame's lid starts 3.7% in from its left edge, so the arrow moves right by half of that to sit centred between the card and the lid. */
  #example-brand-guide .varrow { transform: translateX(12px); }
}
#example-brand-guide .vshort { margin-top: 40px; }
#example-brand-guide .vshort .vbox { padding: 20px 22px; }
#example-brand-guide .vshort .vbox h3 { font-size: 17px; margin-bottom: 6px; }
#example-brand-guide .vshort .vbox p { font-size: 15px; line-height: 1.55; }

/* ONE WEDDING: "20 pieces of content." on one line; the interactive card is now one centred line under the laptop's caption. The
   words line up with the laptop's screen in assets/hero-align.js. */
#how .owline1 { white-space: nowrap; }
@media (min-width: 1024px) { #how .owwords { padding-top: 0; } }
#how .owlink { text-align: center; margin: 10px 0 0; font: 700 13px/1.4 Montserrat, sans-serif; }
#how .owlink a { color: var(--green-text, #0a7a4f); text-decoration: none; }
#how .owlink a:hover { text-decoration: underline; }
#how .owlink .vtag { letter-spacing: .12em; text-transform: uppercase; font-size: 11px; color: var(--navy); }
#how .owfig .srcnote2 { text-align: center; }

/* THE MARKETING MANAGER YOU'VE BEEN WAITING FOR: the three circles start pale and light up one after another, once, on scroll. */

/* WHAT MAKES IT DIFFERENT: a white icon in a solid green circle in place of the check (different-icons-mock-v2.png, option B),
   "See it →" on the same line at the right, every card two lines tall. */
#different .diffpopgrid li.dfi { grid-template-columns: 48px minmax(0, 1fr) auto; column-gap: 16px; padding: 20px 22px; min-height: 96px; align-items: center; }
#different .diffpopgrid li.dfi::before { display: none; }
#different .dic { width: 48px; height: 48px; border-radius: 50%; background: #01a263; display: grid; place-items: center; }
#different .dic svg { width: 22px; height: 22px; display: block; }
#different .dtx { text-wrap: balance; }
#different .diffpopgrid li.dfi .diffbtn { grid-column: 3; justify-self: end; white-space: nowrap; }

/* THE COST STRIP, now just above Pricing: the DIY card on one line, the joke smaller and gray. */
#pricing .coststrip { margin: 0 auto 88px; }
.costcells b.cfree { white-space: nowrap; }
.costcells b.cfree .cs { font: 500 14px/1.4 Montserrat, sans-serif; color: #6b7280; }
@media (min-width: 768px) and (max-width: 1100px) { .costcells b.cfree { white-space: normal; } }

/* FOUNDER: no count-up; the three numbers left-aligned with even spacing, white numbers, green labels, each label on one line. */
@media (min-width: 768px) {
  #about .stats { display: flex; justify-content: flex-start; gap: 0 48px; flex-wrap: nowrap; }
  #about .stats > div { flex: none; text-align: left; }
  #about .stats span { white-space: nowrap; }
}
#about .stats b { color: #fff; }
#about .stats span { color: #5fd39d; }

/* PRICING: one founding card, centred; the regular price a quiet line under the price. */
#pricing .prices.one { display: grid; grid-template-columns: minmax(0, 460px); justify-content: center; }
#pricing .price.f .regnote { margin: 8px 0 18px; font-size: 13px; color: #a9b6c3; }

/* CLOSING (closing-mock.png): the line sits above the button, and the email is one white pill with the green button inside it. */
.closer .beforebtn { max-width: 640px; margin: 0 auto 32px; color: #dbe3ea; font-size: 18px; line-height: 1.65; }
.closer .loop { display: flex; flex-wrap: nowrap; align-items: center; gap: 0; max-width: 560px; margin: 0 auto; background: #fff; border-radius: 999px; padding: 6px 6px 6px 22px; }
.closer .loop input[type=email] { flex: 1 1 auto; max-width: none; min-width: 0; min-height: 44px; padding: 0; border: 0; background: transparent; font-size: 16px; }
.closer .loop input[type=email]:focus { outline: none; }
.closer .loop:focus-within { box-shadow: 0 0 0 3px rgba(95, 211, 157, .6); }
.closer .loop .btn { flex: none; min-height: 48px; padding: 12px 24px; font-size: 15px; border-radius: 999px; }
@media (max-width: 420px) { .closer .loop { padding-left: 16px; } .closer .loop .btn { padding: 12px 16px; font-size: 14px; } }

/* THE WEBSITE OFFER: a white card with a gold left edge, centred above the footer, a monitor icon in a solid green circle. */
.agency { padding: 56px 0; }
.agency .offercard { max-width: 760px; margin: 0 auto; display: flex; gap: 18px; align-items: flex-start; text-align: left; background: #fff; border: 1.5px solid var(--line); border-left: 5px solid #c9a24a; border-radius: 14px; padding: 24px 26px; }
.agency .offic { flex: none; width: 44px; height: 44px; border-radius: 50%; background: #01a263; display: grid; place-items: center; }
.agency .offic svg { width: 22px; height: 22px; }
.agency .offercard p { margin: 0; font: 500 15px/1.6 Montserrat, sans-serif; color: var(--body, #454a52); }
.agency .offercard .offh { font: 700 17px/1.35 Montserrat, sans-serif; color: var(--navy); margin-bottom: 6px; }
.agency .offercard a { color: var(--green-text, #0a7a4f); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

@media (min-width: 1024px) and (max-width: 1180px) { #example-brand-guide .vblock { grid-template-columns: 280px 64px minmax(0, 1fr); } }
@media (min-width: 1024px) {
  #how .owwords h2 { margin-bottom: 18px; }
  #how .owwords .lede { margin-bottom: 0; }
  #how .owchecks { margin-top: 22px; gap: 10px 24px; font-size: 15px; }
}
@media (min-width: 1024px) { #different .diffgrid { max-width: 1240px; } #different .dtx { font-size: 16.5px; } }
@media (min-width: 1024px) { #different .dtx { text-wrap: wrap; font-size: 16px; } #different .diffpopgrid li.dfi { column-gap: 14px; padding: 20px 18px; } }