/* Round 3 (Nov 2, 2026, 16:14), desktop from 1280 only: the voice profile and one-wedding sections laid out exactly like
   How it works: words, 96px, the card (236px), 48px with the gold arrow in its middle, the laptop to the content edge.
   The laptop width is the same formula as How it works (content width - 378px - 8.5 x the section headline size):
   590px at 1440. */
@media (min-width: 1280px) {
  html body #main#main#main :is(#example-brand-guide, #how) .wrap { box-sizing: border-box; max-width: 1664px !important; padding-left: 32px !important; padding-right: 32px !important; }
  html body #main#main#main :is(#example-brand-guide .wrap.v3col, #how .wrap.ow3col) { display: grid !important; grid-template-columns: minmax(0, 1fr) 96px 236px 48px calc(100% - 378px - 8.5 * clamp(32px, calc(2.2vw + 16.3px), 48px)) !important; column-gap: 0 !important; justify-content: stretch !important; align-items: center !important; }
  html body #main#main#main :is(#example-brand-guide .v3words, #how .owwords) { grid-column: 1 !important; grid-row: 1 !important; text-align: left !important; padding: 0 !important; margin: 0 !important; max-width: none !important; }
  html body #main#main#main :is(#example-brand-guide .vqcard, #how .owadd) { grid-column: 3 !important; grid-row: 1 !important; width: 236px !important; max-width: none !important; margin: 0 !important; transform: none !important; justify-self: start !important; }
  html body #main#main#main :is(#example-brand-guide, #how) .varrow { grid-column: 4 !important; grid-row: 1 !important; display: grid !important; place-items: center; width: 48px !important; margin: 0 !important; transform: none !important; justify-self: center !important; }
  html body #main#main#main :is(#example-brand-guide, #how) .varrow svg { width: 32px !important; height: 32px !important; transform: none !important; }
  html body #main#main#main :is(#example-brand-guide .vlaptop, #how .owlap) { grid-column: 5 !important; grid-row: 1 !important; width: 100% !important; margin: 0 !important; transform: none !important; }
  html body #main#main#main :is(#example-brand-guide .vlaptop, #how .owlap) .lapv33 { width: 100% !important; max-width: none !important; margin: 0 !important; }
  html body #main#main#main #how .ow3col > .owchecks { grid-column: 1 / -1 !important; grid-row: 2 !important; }
}

/* Round 5 (Kelly, Nov 2, 2026, 8:20pm: 922 was too tall). From 1280 every section after the hero is 736px, content centred:
   the smallest one height at which every section keeps about 64px above and below. Two-thirds of the hero (551) cannot hold
   the laptop sections (How it works needs 736 at 1848) or the marketing manager cards (728). The devices picture is drawn at
   79% and the founder photo is cropped to 608px so both fit. */
@media (min-width: 1280px) {
  html body #main#main#main > section:not(#top):not([hidden]) { box-sizing: border-box; height: 736px; min-height: 0; padding-top: 64px !important; padding-bottom: 64px !important; display: flex; flex-direction: column; justify-content: center; }
  html body #main#main#main #about .founder > img { height: 608px !important; object-position: 50% 12% !important; }
  html body #main#main#main #devices .devs2 { zoom: .79; }
}

/* B3: the gold arrow at its round-1 size (36px), centred in its column */
@media (min-width: 1280px) {
  html body #main#main#main :is(#example-brand-guide, #how) .varrow svg { width: 36px !important; height: 36px !important; transform: translateX(.75px) !important; }
}

/* C3: pricing cost list, a green bar on the left of each option, no gold lines */
html body #main#main #pricing .costline > div { border: 0 !important; border-left: 4px solid var(--green, #01a263) !important; padding: 4px 0 4px 18px !important; margin: 0 0 22px !important; }
html body #main#main #pricing .costline > div:last-child { border-bottom: 0 !important; margin-bottom: 0 !important; }
html body #main#main #pricing .costline .us dt, html body #main#main #pricing .costline .us dd:not(.costnote) { color: var(--green-text, #0a7a4f) !important; }
html body #main#main #pricing .costline .us dd:not(.costnote) { font-weight: 700; }
html body #main#main #pricing .costline .us .costnote { color: var(--slate, #454a52) !important; }

/* C4: the marketing manager cards, two-line questions, chips on one row, the row about as wide as the subline */
@media (min-width: 1024px) {
  html body #main#main #employee .emp3 { max-width: 1100px !important; column-gap: 28px !important; }
  html body #main#main #employee .emp3::before { left: calc((100% - 56px) / 6) !important; right: calc((100% - 56px) / 6) !important; }
  html body #main#main #employee .empcard { padding: 22px 14px !important; }
  html body #main#main #employee .empcard p { max-width: none !important; }
  html body #main#main #employee .empchips { flex-wrap: nowrap !important; gap: 6px !important; }
  html body #main#main #employee .empchips span { font-size: 12px !important; padding: 8px 9px !important; white-space: nowrap; }
}

/* Overnight Nov 2-3, 2026: between 900 and 1279 the devices picture touched the left edge (its 40px nudge); here it is centered with 48px each side. */
@media (min-width: 900px) and (max-width: 1279px) {
  html body #main #devices .devs2 { max-width: calc(100vw - 96px) !important; margin-inline: auto !important; transform: none !important; }
}

/* Overnight Nov 2-3, 2026: below 1280 the icon grid sat directly on "What it takes today"; 28px between them. */
@media (max-width: 1279px) {
  html body #main #everywhere .ebl { margin-bottom: 28px !important; }
}

/* Overnight Nov 2-3, 2026: on phones "of" sat alone in the founder heading; it scales a little so "of marketing weddings." stays one line. */
@media (max-width: 430px) {
  html body #main#main#main section#about h2 { font-size: min(32px, 7.2vw) !important; }
}

/* Overnight Nov 2-3, 2026: v50final made every heading at least 32px, which cut "Your marketing department," off on phones
   and left "The" alone above "marketing manager". These two scale to fit, as the 21px phone rule (v34b) meant them to. */
@media (max-width: 640px) {
  html body #main#main#main section#devices h2, html body #main#main#main section#employee h2 { font-size: clamp(21px, 6vw, 32px) !important; }
}

/* Overnight Nov 2-3, 2026, tablet widths: "20 pieces of content." ran under the form picture from 1024 to 1099; it may wrap there. */
@media (min-width: 1024px) and (max-width: 1099px) {
  html body #main#main #how .owwords h2 .owline1 { white-space: normal !important; }
}
/* From 900 to 1023 the founder stats ran past the right edge and "of" sat alone in the heading. */
@media (min-width: 900px) and (max-width: 1023px) {
  html body #main#main#main section#about h2 { font-size: 4vw !important; }
  html body #main#main #about .stats { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; column-gap: 24px !important; }
}

@media (min-width: 900px) and (max-width: 1099px) {
  html body #main#main#main section#about h2 { font-size: 3.5vw !important; }
}