/* Kelly's final homepage pass, Mon Nov 2, 2026. Loaded last. */

/* 4. Manager section: more room between "It learns." / "It asks." / "It delivers." and their cards. */
.empcol h3 { margin-bottom: 36px; }

/* 8. Cost row: thicker gold dividers; the founding note sits under The Wedding CMO column. */
@media (min-width: 900px) { .costline > div { border-left-width: 2px; } }
@media (max-width: 899px) { .costline > div { border-top-width: 2px; } }
.costline .us dd.costnote { margin: 8px auto 0; max-width: 260px; font: 500 13px/1.5 Montserrat, sans-serif; color: var(--slate); }

/* 3. One wedding: "One wedding. 20 pieces of content." on one line above the card, the arrow and the laptop. */
@media (min-width: 1024px) {
  #how .ow3col { grid-template-columns: minmax(230px, 270px) 36px minmax(0, 760px) !important; justify-content: center; column-gap: 28px !important; row-gap: 40px !important; }
  #how .ow3col > .owwords { grid-column: 1 / -1; text-align: center; padding-top: 0; }
  #how .owwords h2 { white-space: nowrap; font-size: clamp(34px, 3vw, 48px) !important; }
  #how .owwords h2 br { display: none; }
  #how .owwords .lede { max-width: 720px; margin-left: auto; margin-right: auto; }
}
@media (min-width: 1600px) { #how .ow3col { grid-template-columns: 320px 44px minmax(0, 900px) !important; column-gap: 36px !important; } }


/* 11. FAQ: a gold dash before the eyebrow, like the blog's, and gold circles with a navy mark. */
.faqpage .k::before, main .k.faqk::before { content: ""; display: inline-block; width: 22px; height: 2px; margin: 0 10px 0 0; vertical-align: middle; background: #c9a24a; position: relative; top: -1px; }
.faq summary::after { background: #c9a24a !important; color: #01223d !important; }

/* Kelly's Nov 2 11:00 review, item 4: "You approve. It posts." and "Build on what's working" keep deploy-106's layout, so
   none of these rules reach #calendar or #part-results. */
/* BALANCE, NOT ALIGNMENT (Kelly, Nov 2, 2026): on How it works every two-column section is one centred group, words and device,
   with the same generous gap between them (96px at 1440). From 1280 up the columns have set widths so the pair sits in the
   middle; below that the columns share the width and the gap is 64px. */
@media (min-width: 1280px) {
  html body #main section:not(:where(#calendar, #part-results)) .wlgrid.hsec { grid-template-columns: minmax(0, 420px) minmax(0, 720px) !important; justify-content: center !important; column-gap: 96px !important; max-width: none; }
  html body #main section:not(:where(#calendar, #part-results)) .wlgrid.hsec.flip { grid-template-columns: minmax(0, 720px) minmax(0, 420px) !important; }
  html body #main section:not(:where(#calendar, #part-results)) .wlgrid.hsec > .lgwords { max-width: none !important; justify-self: stretch !important; }
  html body #main section:not(:where(#calendar, #part-results)) .wlgrid.hsec .lgfig .lapv33 { width: 100% !important; max-width: none !important; margin: 0 !important; }
  html body #main #part-create .wlgrid.hsec { grid-template-columns: minmax(0, 340px) minmax(0, 880px) !important; column-gap: 80px !important; }
  html body #main #part-plan .wlgrid.hsec { grid-template-columns: minmax(0, 440px) minmax(0, 720px) !important; }
  html body #main section:not(:where(#calendar, #part-results)) .wlgrid.hsec .calpair > .lapv33, html body #main section:not(:where(#calendar, #part-results)) .wlgrid.hsec .pair > .lapv33 { width: 82% !important; }
}
@media (min-width: 1600px) {
  html body #main section:not(:where(#calendar, #part-results)) .wlgrid.hsec { grid-template-columns: minmax(0, 460px) minmax(0, 820px) !important; column-gap: 120px !important; }
  html body #main section:not(:where(#calendar, #part-results)) .wlgrid.hsec.flip { grid-template-columns: minmax(0, 820px) minmax(0, 460px) !important; }
  html body #main #part-create .wlgrid.hsec { grid-template-columns: minmax(0, 360px) minmax(0, 1000px) !important; column-gap: 96px !important; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  html body #main section:not(:where(#calendar, #part-results)) .wlgrid.hsec { column-gap: 64px !important; }
  html body #main section:not(:where(#calendar, #part-results)) .wlgrid.hsec > .lgwords { justify-self: stretch !important; }
}

/* "It keeps learning": two balanced lines, the second sentence kept whole (Kelly, Nov 2). */
#learning .lede.learnlede { max-width: none !important; }
#learning .lede .nw { white-space: nowrap; }
@media (max-width: 599px) { #learning .lede .nw { white-space: normal; } #learning .lede.learnlede br { display: none; } }
/* "Built to be found": the Keywords callout card's border thinner. */
#keywords .kwpanel { border-width: 1px !important; box-shadow: inset 0 3px 0 #c9a24a, 0 18px 40px rgba(1, 34, 61, .14) !important; }
/* Tools: "Click a tab to see it" right above the tabs, and one soft pulse on the next tab until a tab is clicked. */
#tools .ttabhint { margin: 0 0 4px; font: 700 14px/1.4 Montserrat, sans-serif; color: var(--green-text, #0a7a4f); text-align: center; }
#tools .ttshot { gap: 10px !important; }
@keyframes ttpulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(1, 162, 99, 0); } 50% { box-shadow: 0 0 0 5px rgba(1, 162, 99, .28); } }
#tools .ttshot.tinview:not(.tseen) .ttab2[aria-selected="true"] + .ttab2 { animation: ttpulse 1.6s ease-in-out 1.2s 2; }
@media (prefers-reduced-motion: reduce) { #tools .ttshot .ttab2 { animation: none !important; } }

/* Nov 2, 2026 (Kelly): the FAQ links on How it works open their answer in place, same words as the FAQ page, gold + and -. */
.faqin { margin: 16px 0 0; max-width: 560px; }
.faqin summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; font: 600 15px/1.4 Montserrat, sans-serif; color: var(--green-text, #0a7a4f); }
.faqin summary::-webkit-details-marker { display: none; }
.faqin summary::after { content: "+"; flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #c9a24a; color: #c9a24a; display: grid; place-items: center; font: 700 16px/1 Montserrat, sans-serif; box-sizing: border-box; }
.faqin[open] summary::after { content: "\2212"; }
.faqin summary:hover, .faqin summary:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.faqin .faqina { margin-top: 10px; padding: 14px 18px; border-left: 3px solid #c9a24a; background: #fff; border-radius: 0 12px 12px 0; font: 400 15px/1.6 Montserrat, sans-serif; color: #454a52; }
.faqin .faqina p { margin: 0 0 10px; }
.faqin .faqina p:last-child { margin-bottom: 0; }
.faqin .faqina a { color: var(--green-text, #0a7a4f); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.faqin .faqina b { font-weight: 700; color: #01223d; }
.faqin .faqina .faqbtn { display: none; }
.faqin .faqmore { font-size: 14px; }
/* Balance on the homepage too (Kelly, Nov 2, 2026): the hero and the founder section keep their pair centred with the same 96px gap. */
@media (min-width: 1280px) {
  html body #top .wrap.wlgrid { column-gap: 96px !important; justify-content: center !important; }
  html body #about .wrap.founder { column-gap: 96px !important; justify-content: center !important; }
}

/* 1024 TO 1279 SPLIT (Nov 2, 2026): between laptop widths the words and the picture share the row 5 to 7, so no heading is cut off. */
@media (min-width: 1024px) and (max-width: 1279px) {
  html body #main section:not(#templates) .wlgrid.hsec:not(.flip) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr) !important; column-gap: 56px !important; }
  html body #main section:not(#templates) .wlgrid.hsec.flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr) !important; column-gap: 56px !important; }
  html body #main section:not(:where(#calendar, #part-results)) .wlgrid.hsec .lgfig .lapv33 { width: 100% !important; max-width: none !important; margin: 0 !important; }
  html body #main section:not(:where(#calendar, #part-results)) .wlgrid.hsec .lgfig .kwlap, html body #main section:not(:where(#calendar, #part-results)) .wlgrid.hsec .lgfig .calpair, html body #main section:not(:where(#calendar, #part-results)) .wlgrid.hsec .lgfig .pair { width: 100% !important; max-width: 100% !important; }
  html body #main section:not(:where(#calendar, #part-results)) .wlgrid.hsec .calpair > .lapv33, html body #main section:not(:where(#calendar, #part-results)) .wlgrid.hsec .pair > .lapv33 { width: 82% !important; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  html body #main section:not(:where(#calendar, #part-results)) .wlgrid.hsec .lgfig.wkfig { width: 100% !important; max-width: 100% !important; }
  html body #main section:not(:where(#calendar, #part-results)) .wlgrid.hsec .wkfig .lapv33 { width: 88% !important; }
  html body #main section:not(:where(#calendar, #part-results)) .wlgrid.hsec .wkfig .srcnote2 { width: 88% !important; }
  html body #main section:not(:where(#calendar, #part-results)) .wlgrid.hsec .wkfig .wkpanel { left: 62% !important; width: 40% !important; }
  html body #main .lede br.lbr2 { display: none; }
}
/* Founder stats at 1024 to 1279 (Nov 2): the third label wraps onto two lines instead of running off the edge. */
@media (min-width: 1024px) and (max-width: 1279px) {
  html body #about .stats { gap: 0 32px !important; }
  html body #about .stats span { white-space: normal !important; max-width: 170px; }
}
/* NEW CHAPTER ORDER (Kelly, Nov 2, 7:26am): "One wedding in" now sits words-right, so its own widths are mirrored. */
@media (min-width: 1280px) {
  html body #main #part-create .wlgrid.hsec.flip { grid-template-columns: minmax(0, 880px) minmax(0, 340px) !important; }
}
@media (min-width: 1600px) {
  html body #main #part-create .wlgrid.hsec.flip { grid-template-columns: minmax(0, 1000px) minmax(0, 360px) !important; }
}

/* Email 1 link: theweddingcmo.com/#stay-in-touch lands on the newsletter heading, clear of the sticky menu. */
#stay-in-touch { scroll-margin-top: 32px; }

/* Email 1 bullet links land on these headings, clear of the sticky menu. */
#gets-to-know-you, #one-wedding, #your-calendar, #quiet-months, #whats-working { scroll-margin-top: 32px; }

/* Kelly, Nov 2, 2026 (item 6): the photo credit's highlight in the See it pop-up, the yellow of the 'joyful' highlight. */
.diffpop .dpshot { position: relative; }
.diffpop .dphl { position: absolute; background: #e0cc92; mix-blend-mode: multiply; border-radius: 4px; pointer-events: none; }

/* Kelly, Nov 2, 2026 (item 1): from 1280 up the hero fills the first screen under the menu (73px), the top of the next section's O
   just showing at the bottom edge; the words and laptop keep their size, centred in the taller space. Phones keep their natural height. */
@media (min-width: 1280px) {
  html body .hero#top { min-height: calc(100svh - 73px); display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; }
  html body .hero#top > .wrap { width: 100%; box-sizing: border-box; }
}
@media (min-width: 1280px) {
  html body .hero#top { min-height: calc(100svh - 73px); display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; }
  html body #everywhere, html body #example-brand-guide, html body #how, html body #employee, html body #different, html body #about, html body #pricing, html body #devices, html body #join {
    min-height: var(--hsec, auto); display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; }
  html body .hero#top > .wrap, html body #everywhere > :not(.oseam), html body #example-brand-guide > :not(.oseam), html body #how > :not(.oseam), html body #employee > :not(.oseam), html body #different > :not(.oseam), html body #about > :not(.oseam), html body #pricing > :not(.oseam), html body #devices > :not(.oseam), html body #join > :not(.oseam) { width: 100%; box-sizing: border-box; }
  html body #example-brand-guide .wrap.v3col { grid-template-columns: min-content 284px 36px minmax(0, 1fr) !important; }
  html body #example-brand-guide .vqcard { margin-left: 48px !important; }
  html body #example-brand-guide .varrow { transform: translateX(3.2vw); }
  html body #employee .emp3 { max-width: 1120px; margin-left: auto; margin-right: auto; column-gap: 56px; }
  html body #employee .emp3::before { left: calc((100% - 112px) / 6); right: calc((100% - 112px) / 6); }
  html body #employee .empcol { align-content: start; grid-template-rows: auto auto 1fr; }
  html body #employee .empcard { min-height: 0; padding: 22px 20px; gap: 16px; }
  html body #how .wrap.ow3col { grid-template-columns: minmax(0, 1fr) 270px 36px calc(min(54.6vw, 873px) - 306px - 2 * var(--owgap, 28px)) minmax(0, 1fr) !important; }
  html body #how .owadd { grid-column: 2 !important; } html body #how .ow3col > .varrow { grid-column: 3 !important; } html body #how .owlap { grid-column: 4 !important; }
  html body #how .owchecks { justify-self: center; width: 100%; max-width: 1122px; }
}
@media (min-width: 1600px) { html body #how .owchecks { max-width: 1336px; } }
@media (min-width: 1600px) { html body #example-brand-guide .varrow { transform: translateX(4.2vw); } html body #how .wrap.ow3col { --owgap: 36px; } }

/* ===== MOCK Nov 2 (Kelly 14:21 and after): hero centred in one container, phone on the base, laptops, order, type scale ===== */
/* 1. HERO: words and laptop are one centred group with 64px between them. The laptop keeps its size; margins either side are equal. */
@media (min-width: 1280px) {
  html body #top .wrap.wlgrid {
    display: grid !important; width: 100% !important; max-width: none !important; box-sizing: border-box;
    grid-template-columns: min(560px, calc(390px + (100vw - 1280px) * .3625)) min(1008px, calc(682px + (100vw - 1280px) * .6375)) !important;
    column-gap: 64px !important; justify-content: center !important; align-items: center !important; padding-left: 0 !important; padding-right: 0 !important; }
  html body #top .lgwords { max-width: none !important; justify-self: stretch !important; align-self: center; }
  html body #top .lgfig { width: 100% !important; margin: 0 !important; }
  html body #top .pair.heropair { width: 100% !important; }
  html body #top .pair.heropair > .lapv33 { width: 100% !important; }
}
/* 2. HERO PHONE (round 2): straight, 4120 size, its centre on the laptop screen's right bezel (the screen ends at 87.6% of the frame). */
@media (min-width: 1024px) {
  html body #top .pair.heropair .pphone { width: 17.3% !important; left: 79.3% !important; bottom: 0 !important; transform: none !important; }
}

/* ---- laptop size: every homepage laptop picture except the hero's is the voice profile laptop as it renders on the live page ---- */
:root { --lap: 100%; }
@media (min-width: 1024px) { :root { --lap: calc(440px + (100vw - 1024px) * .5); --ptw: 220px; --card: 220px; } }
@media (min-width: 1280px) { :root { --lap: calc(570px + (100vw - 1280px) * .9125); --ptw: 260px; --card: 236px; } }
@media (min-width: 1440px) { :root { --lap: calc(716px + (100vw - 1440px) * .2); --ptw: 300px; } }
@media (min-width: 1600px) { :root { --lap: calc(748px + (100vw - 1600px) * .589); --ptw: 340px; --card: 280px; } }
@media (min-width: 1848px) { :root { --lap: 894px; } }

/* ---- 10. TYPE SCALE: hero h1 keeps its size; every other section headline 48px at 1440, 32px at 390, smooth between; one eyebrow, subline and body size ---- */
html body #main section:not(#top):not(#testimonials) h2 { font-size: clamp(32px, calc(32px + (100vw - 390px) * .01524), 48px) !important; line-height: 1.12 !important; }
html body #main section:not(#top):not(#testimonials) .k { font-size: 11px !important; }
html body #main section:not(#top):not(.agency) .lede, html body #main #about .lede, html body #main #join .beforebtn { font-size: 17px !important; line-height: 1.65 !important; }
html body #main section:not(#top) .v3pts span, html body #main #employee .empcard p, html body #main .diffgrid .dtx, html body #main #pricing .price p, html body #main #about .stats span, html body #main .costline dd:not(.costnote) .cs, html body #main .costline dt { font-size: 15px !important; line-height: 1.55 !important; }
html body #main #employee .lede, html body #main #everywhere .lede, html body #main #devices .lede, html body #main #how .owwords .lede { max-width: 760px; margin-left: auto; margin-right: auto; }
html body #main #how .owwords .lede { margin-left: 0; }

/* ---- 4/5 (round 2). VOICE PROFILE and ONE WEDDING share one three-column layout: words | card + gold arrow | laptop. Same column
   widths, card size, arrow gap and laptop position in both. Headline size follows the words column (container units). ---- */
@media (min-width: 1280px) {
  html body #main :is(#example-brand-guide .wrap.v3col, #how .wrap.ow3col) { display: grid !important; grid-template-columns: minmax(0, 520px) calc(var(--card) + 20px) var(--lap) !important; column-gap: 0 !important; row-gap: 40px !important; justify-content: center !important; align-items: center !important; max-width: none !important; width: 100%; box-sizing: border-box; padding-left: 32px !important; padding-right: 32px !important; }
  html body #main :is(#example-brand-guide .v3words, #how .owwords) { display: block !important; grid-column: 1 !important; grid-row: 1 !important; text-align: left !important; padding: 0 24px 0 0 !important; margin: 0 !important; container-type: inline-size; }
  html body #main :is(#example-brand-guide .v3words, #how .owwords) > :is(.k, h2, .lede, .owlink) { text-align: left !important; margin-left: 0 !important; margin-right: 0 !important; max-width: none; }
  html body #main :is(#example-brand-guide .v3words, #how .owwords) > .k { margin-bottom: 14px !important; }
  html body #main :is(#example-brand-guide .v3words, #how .owwords) > h2 { font-size: min(48px, 10.7cqw) !important; margin-bottom: 18px !important; white-space: normal !important; }
  html body #main #how .owwords h2 br { display: inline !important; }
  html body #how .owwords h2 .owline1 { white-space: normal !important; }
  html body #example-brand-guide .v3pts { margin: 24px 0 0 !important; }
  html body #how .owwords .owlink { margin: 22px 0 0 !important; position: static; }
  html body :is(#example-brand-guide .vqcard, #how .owadd) { grid-column: 2 !important; grid-row: 1 !important; width: var(--card) !important; max-width: none !important; justify-self: end; margin: 0 20px 0 0 !important; align-self: center; }
  html body :is(#example-brand-guide .varrow, #how .ow3col > .varrow) { display: grid !important; place-items: center; grid-column: 2 !important; grid-row: 1 !important; width: 36px; justify-self: end; transform: translateX(44px) !important; z-index: 3; align-self: center; }
  html body :is(#example-brand-guide .vlaptop, #how .owlap) { grid-column: 3 !important; grid-row: 1 !important; width: var(--lap); }
  html body :is(#example-brand-guide .vlaptop, #how .owlap) .lapv33 { width: 100% !important; max-width: none !important; margin: 0 !important; }
  html body #how .ow3col > .owchecks { grid-column: 1 / -1 !important; grid-row: 2 !important; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  html body #main :is(#example-brand-guide .wrap.v3col, #how .wrap.ow3col) { display: grid !important; grid-template-columns: minmax(0, 1fr) calc(var(--card) + 20px) var(--lap) !important; column-gap: 0 !important; align-items: center !important; max-width: none !important; padding-left: 24px !important; padding-right: 24px !important; row-gap: 40px !important; }
  html body #main :is(#example-brand-guide .v3words, #how .owwords) { display: block !important; grid-column: 1 !important; grid-row: 1 !important; text-align: left !important; padding: 0 20px 0 0 !important; margin: 0 !important; container-type: inline-size; }
  html body #main :is(#example-brand-guide .v3words, #how .owwords) > :is(.k, h2, .lede, .owlink) { text-align: left !important; margin-left: 0 !important; max-width: none; }
  html body #main :is(#example-brand-guide .v3words, #how .owwords) > h2 { font-size: min(40px, 10.7cqw) !important; white-space: normal !important; margin-bottom: 16px !important; }
  html body #main #how .owwords h2 br { display: inline !important; }
  html body :is(#example-brand-guide .vqcard, #how .owadd) { grid-column: 2 !important; grid-row: 1 !important; width: var(--card) !important; max-width: none !important; justify-self: end; margin: 0 20px 0 0 !important; }
  html body :is(#example-brand-guide .varrow, #how .ow3col > .varrow) { display: grid !important; place-items: center; grid-column: 2 !important; grid-row: 1 !important; width: 36px; justify-self: end; transform: translateX(44px) !important; z-index: 3; }
  html body :is(#example-brand-guide .vlaptop, #how .owlap) { grid-column: 3 !important; grid-row: 1 !important; width: var(--lap); }
  html body :is(#example-brand-guide .vlaptop, #how .owlap) .lapv33 { width: 100% !important; max-width: none !important; margin: 0 !important; }
  html body #how .ow3col > .owchecks { grid-column: 1 / -1 !important; grid-row: 2 !important; }
  html body #example-brand-guide .v3pts { margin: 20px 0 0 !important; }
  html body #how .owwords .owlink { margin: 20px 0 0 !important; position: static; }
}
@media (max-width: 1023px) { #how .owwords .owlink { margin: 20px 0 0; text-align: left; } }

/* ---- 6. MARKETING MANAGER: cards wide enough for two-line questions and the three chips on one row ---- */
@media (min-width: 1024px) {
  html body #employee .emp3 { max-width: min(100%, 1240px) !important; column-gap: 40px !important; }
  html body #employee .emp3::before { left: calc((100% - 80px) / 6) !important; right: calc((100% - 80px) / 6) !important; }
  html body #employee .empchips { flex-wrap: nowrap !important; white-space: nowrap; gap: 8px; justify-content: center; }
}
html body #employee .empcard p { text-wrap: pretty; }

/* ---- 7/8. FOUNDER: after the manager section; the photo is cropped to the standard section height, face and shoulders inside ---- */
@media (min-width: 1280px) {
  html body #about .founder > img { aspect-ratio: auto !important; height: 720px !important; object-fit: cover !important; object-position: 50% 14% !important; }
}

/* ---- 9. PRICING: two columns from 1024; left the words and the cost list, right the navy card. Phones: headline, list, card. ---- */
@media (min-width: 1024px) {
  html body #pricing > .wrap { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); column-gap: 56px; align-items: center; justify-content: center; text-align: left !important; max-width: 1240px; }
  html body #pricing > .wrap > .k { grid-column: 1; grid-row: 1; text-align: left !important; margin: 0 0 14px !important; }
  html body #pricing > .wrap > h2 { grid-column: 1; grid-row: 2; text-align: left !important; margin: 0 0 40px !important; }
  html body #pricing > .wrap > .costrow { grid-column: 1; grid-row: 3; margin: 0 !important; max-width: none !important; text-align: left !important; }
  html body #pricing > .wrap > .prices { grid-column: 2; grid-row: 1 / span 4; margin: 0 !important; max-width: none !important; grid-template-columns: minmax(0, 1fr) !important; justify-content: stretch !important; }
  html body #pricing > .wrap > a.more { grid-column: 1; grid-row: 4; justify-self: start; margin-top: 28px; }
}
html body #pricing .costrow .k { text-align: left !important; margin: 0 0 6px !important; }
html body #pricing .costline { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; margin: 0 !important; }
html body #pricing .costline > div { border: 0 !important; border-top: 1px solid #c9a24a !important; padding: 18px 0 !important; text-align: left !important; }
html body #pricing .costline > div:last-child { border-bottom: 1px solid #c9a24a !important; }
html body #pricing .costline dt { font: 600 14px/1.4 Montserrat, sans-serif !important; margin: 0 0 4px !important; }
html body #pricing .costline .us .costnote { margin: 8px 0 0 !important; max-width: none !important; }

/* ---- 3. MORE HANDS-ON HELP gets the same section height as the others (the hidden testimonials are exempt) ---- */
@media (min-width: 1280px) { html body section.agency { min-height: var(--hsec, auto); display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; } html body section.agency > .wrap { width: 100%; } }

html body #main #employee .lede, html body #main #everywhere .lede, html body #main #devices .lede { white-space: normal !important; text-wrap: balance; }
html body #main .diffgrid .dtx, html body #main .empcard p, html body #main .v3pts span { text-wrap: balance; }
@media (min-width: 1280px) { html body #top .lgwords { margin-bottom: 50px !important; } } /* centre the words on the laptop itself, not on laptop plus caption */

/* ---- round 2: section heights at 1280 and up are two thirds of the screen under the menu; content stays at its natural size, centred ---- */
@media (min-width: 1280px) { :root { --hsec: calc((100vh - 73px) * .667); } }
/* round 2 item 3: "Your couples are everywhere" on two lines at the standard headline size; the icon tiles are untouched (4120 size) */
@media (min-width: 1280px) { html body #everywhere .pmid { max-width: 760px !important; } html body #everywhere .pmid h2 { white-space: nowrap !important; } }
/* round 2: the two matching sections' headlines follow their words column (48px when it fits) */
@media (min-width: 1280px) { html body #main section:not(#top):not(#testimonials) :is(.v3words, .owwords) > h2 { font-size: min(48px, 10.7cqw) !important; } }
@media (min-width: 1024px) and (max-width: 1279px) { html body #main section:not(#top):not(#testimonials) :is(.v3words, .owwords) > h2 { font-size: min(40px, 10.7cqw) !important; } }