/* Round 3 (Nov 2, 2026, 16:14), desktop from 1280 only. One layout rule for every section after the top:
   one section height, one laptop width, the laptop group at the content edge.
   The laptop width is worked out from the content width (100% of each grid), so every laptop is the same width:
   L = content width - 378px - 8.5 x the section headline size (the words column of the 3-column sections needs about
   8.5 headline sizes for "One wedding in.").  At 1440: content 1376, headline 48px, L = 590px. */
@media (min-width: 1280px) {
  html body #main#main#main { --r3fs: clamp(32px, calc(2.2vw + 16.3px), 48px); --r3lap: calc(100% - 378px - 8.5 * var(--r3fs)); --r3h: 760px; }

  /* Every section the same height, its content centred in it. */
  html body #main#main#main section.hband:not(#templates):not(#learning):not(#vendors):not(#part-results) { box-sizing: border-box; height: auto; min-height: var(--r3h); padding: 40px 0 !important; display: flex; flex-direction: column; justify-content: center; }
  html body #main#main#main section.hband:not(#learning):not(#vendors):not(#part-results) > .hsecwrap { width: 100%; }
  html body #main#main#main section.hband:not(#learning):not(#vendors):not(#part-results) .chead { margin-bottom: 48px; }

  /* One container: 32px either side, content up to 1600px. */
  html body #main#main#main section.hband:not(#learning):not(#vendors):not(#part-results) .wrap { box-sizing: border-box; width: 100%; max-width: 1664px !important; padding-left: 32px !important; padding-right: 32px !important; margin-left: auto; margin-right: auto; }

  /* Two columns: words, 96px, laptop (or laptop, 96px, words). */
  html body #main#main#main section.hband:not(#learning):not(#vendors):not(#part-results) .wrap.wlgrid.hsec { display: grid !important; grid-template-columns: minmax(0, 1fr) var(--r3lap) !important; column-gap: 96px !important; align-items: center !important; justify-content: stretch !important; }
  html body #main#main#main section.hband:not(#learning):not(#vendors):not(#part-results) .wrap.wlgrid.hsec.flip { grid-template-columns: var(--r3lap) minmax(0, 1fr) !important; }
  html body #main#main#main section.hband:not(#learning):not(#vendors):not(#part-results) .wrap.wlgrid.hsec > .lgwords { grid-column: 1; grid-row: 1; max-width: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; }
  html body #main#main#main section.hband:not(#learning):not(#vendors):not(#part-results) .wrap.wlgrid.hsec > .lgfig { grid-column: 2; grid-row: 1; width: 100% !important; max-width: none !important; margin: 0 !important; justify-self: stretch !important; }
  html body #main#main#main section.hband:not(#learning):not(#vendors):not(#part-results) .wrap.wlgrid.hsec.flip > .lgwords { grid-column: 2; }
  html body #main#main#main section.hband:not(#learning):not(#vendors):not(#part-results) .wrap.wlgrid.hsec.flip > .lgfig { grid-column: 1; }
  html body #main#main#main section.hband:not(#learning):not(#vendors):not(#part-results) .lgfig .device.lapv33 { width: 100% !important; max-width: none !important; margin: 0 !important; }

  /* The conversation: words, 96px, card (216px), 48px with the arrow in its middle, laptop. */
  html body #main#main#main #part-know .wrap.hk4 { display: grid !important; grid-template-columns: minmax(0, 1fr) 96px 216px 48px var(--r3lap) !important; column-gap: 0 !important; justify-content: stretch !important; align-items: center !important; }
  html body #main#main#main #part-know .hk4 > .lgwords { grid-column: 1; grid-row: 1; }
  html body #main#main#main #part-know .hk4 > .vqcard { grid-column: 3; grid-row: 1; width: 216px !important; max-width: none !important; margin: 0 !important; }
  html body #main#main#main #part-know .hk4 > .varrow { grid-column: 4; grid-row: 1; display: grid !important; place-items: center; width: 48px; margin: 0 !important; transform: none !important; }
  html body #main#main#main #part-know .hk4 > .varrow svg { width: 30px !important; height: 30px !important; transform: none !important; }
  html body #main#main#main #part-know .hk4 > .hk4lap { grid-column: 5; grid-row: 1; width: 100% !important; margin: 0 !important; }
  html body #main#main#main #part-know .hk4lap .device.lapv33 { width: 100% !important; max-width: none !important; margin: 0 !important; }

  /* One wedding in: the same three columns, words on the left (the section's flip is undone here only). */
  html body #main#main#main #part-create .wrap.wlgrid.hsec, html body #main#main#main #part-create .wrap.wlgrid.hsec.flip { grid-template-columns: minmax(0, 1fr) calc(227px + 48px + var(--r3lap)) !important; }
  html body #main#main#main #part-create .wrap.wlgrid.hsec > .lgwords { grid-column: 1 !important; }
  html body #main#main#main #part-create .wrap.wlgrid.hsec > .ow3fig { grid-column: 2 !important; display: grid !important; grid-template-columns: 227px 48px minmax(0, 1fr) !important; column-gap: 0 !important; align-items: center !important; position: static !important; }
  html body #main#main#main #part-create .ow3fig > .owadd { grid-column: 1; grid-row: 1; width: 227px !important; max-width: none !important; margin: 0 !important; position: static !important; transform: none !important; }
  html body #main#main#main #part-create .ow3fig > .owarrow { grid-column: 2; grid-row: 1; display: grid !important; place-items: center; width: 48px !important; margin: 0 !important; position: static !important; transform: none !important; }
  html body #main#main#main #part-create .ow3fig > .owarrow svg { width: 36px !important; height: 36px !important; transform: none !important; }
  html body #main#main#main #part-create .ow3fig > .owlapc { grid-column: 3; grid-row: 1; width: 100% !important; max-width: none !important; margin: 0 !important; position: static !important; transform: none !important; }
  html body #main#main#main #part-create .ow3fig > .srcnote2 { grid-column: 3; grid-row: 2; }

  /* It knows when your weddings are: the callout overhangs the laptop by 40px, so the laptop sits 40px in. */
  html body #main#main#main #part-plan .wkfig { position: relative; width: 100% !important; }
  html body #main#main#main #part-plan .wkfig .device.lapv33 { width: calc(100% - 40px) !important; }
  html body #main#main#main #part-plan .wkfig .wkpanel { position: absolute !important; left: auto !important; right: 0 !important; top: 30% !important; bottom: auto !important; width: 240px !important; margin: 0 !important; }
  html body #main#main#main #part-plan .wkfig .srcnote2 { width: calc(100% - 40px) !important; }
  html body #main#main#main #part-plan .lgwords .lede { max-width: 690px !important; }
  html body #main#main#main #part-plan .wwtiles { display: grid !important; grid-template-columns: repeat(8, 56px) !important; justify-content: space-between !important; gap: 8px !important; max-width: none !important; width: 100% !important; }
  html body #main#main#main #part-plan .wwtiles li { width: 56px !important; height: 56px !important; }
  html body #main#main#main #part-plan .wwtiles li img { max-width: 34px !important; max-height: 34px !important; }

  /* Built to be found: the keyword card sits inside the laptop's right edge. */
  html body #main#main#main #keywords .kwfig { position: relative; }
  html body #main#main#main #keywords .kwfig .kwlap { width: 100% !important; margin: 0 !important; }
  html body #main#main#main #keywords .kwfig .kwlap .lapv33 { width: 100% !important; }
  html body #main#main#main #keywords .kwpanel { position: absolute !important; right: 0 !important; left: auto !important; top: 8% !important; width: 36% !important; margin: 0 !important; }

  /* You approve. It posts. (laptop left): the phone overlaps the laptop's right corner, towards the words. */
  html body #main#main#main #calendar .calpair { width: 100% !important; position: relative; }
  html body #main#main#main #calendar .calpair > .lapv33 { width: calc(100% - 64px) !important; }
  html body #main#main#main #calendar .calpair .pphone2 { width: 140px !important; right: 0 !important; left: auto !important; bottom: -12px !important; }
  html body #main#main#main #calendar .lgfig.calfig2 .srcnote2 { width: calc(100% - 64px); }

  /* Build on what's working (laptop right): the phone overlaps the laptop's left corner, towards the words. */

  /* Figures that are wider than one laptop take their extra width in the grid, never at the content edge. */
  /* Calendar section only: the laptop takes all the width left after the words column (440px, the logo tiles' width) and a 24px gap, so it is as tall as it can be; the callout still overhangs by 40px. */
  html body #main#main#main #part-plan .wrap.wlgrid.hsec { grid-template-columns: minmax(0, 1fr) calc(100% - 440px - 24px) !important; column-gap: 24px !important; }
  html body #main#main#main #part-plan .wkfig .device.lapv33 { margin-left: 0 !important; margin-right: auto !important; }
  html body #main#main#main #part-plan .lgwords .lede { max-width: none !important; }
  html body #main#main#main #calendar .wrap.wlgrid.hsec.flip { grid-template-columns: calc(var(--r3lap) + 64px) minmax(0, 1fr) !important; column-gap: 64px !important; }
}

/* Round B (Nov 2, 2026): one section height of 663px at 1440 (the height of "It keeps learning"); "It keeps learning" and "Your whole vendor team" are exactly round 1 (excluded from the rules above), with only the same minimum height. */
@media (min-width: 1280px) {
  html body #main#main#main section#learning, html body #main#main#main section#vendors, html body #main#main#main section#part-results { box-sizing: border-box; min-height: 760px; }
}

/* It knows when your weddings are: the paragraph breaks after "event" and after "email" from 1024px up. */
.hiwbr { display: none; }
@media (min-width: 1024px) { .hiwbr { display: inline; } }
@media (min-width: 1280px) { html body #main#main#main #part-plan#part-plan#part-plan .wwread { max-width: none !important; width: auto !important; text-wrap: balance; } }

/* Not every post needs a wedding: round-1 proportions (laptop 720px, words column 436px, 96px between), centred, so the whole tab row shows. */
@media (min-width: 1280px) {
  html body #main#main#main #tools#tools#tools#tools#tools .wrap.wlgrid.hsec.flip { grid-template-columns: 720px 436px !important; column-gap: 96px !important; justify-content: center !important; }
  html body #main#main#main #tools#tools#tools#tools#tools .wrap.wlgrid.hsec.flip > .lgfig { width: 720px !important; max-width: 720px !important; }
  html body #main#main#main #tools#tools#tools#tools#tools .lgfig .device.lapv33 { width: 720px !important; max-width: 720px !important; }
}

/* G1 (Nov 2, 2026, overnight): at 1600 and up the "It tells you what's working" laptop stays the size of every other laptop
   on the page (it grew to 1023px at 1848), and on a phone the app icon beside the closing phone stays 16px inside the screen. */
@media (min-width: 1600px) {
  html body #main #part-results .wlgrid.hsec .lgfig { width: 100% !important; max-width: 814px !important; margin-inline: auto !important; }
}
@media (max-width: 430px) {
  html body #main #join .clframe .clicon { transform: translateX(min(0px, calc((100vw - 16px - 393px) / 0.85))); }
}

/* Overnight Nov 2-3, 2026: the closing section at the standard 760 from 1280 up (Kelly, B1). The phone drops to 90%. */
@media (min-width: 1280px) {
  html body #main section#join { box-sizing: border-box; height: 760px; min-height: 0; padding-top: 64px !important; padding-bottom: 64px !important; display: flex; flex-direction: column; justify-content: center; }
  html body #main section#join .clph { zoom: .9; }
}

/* Overnight Nov 2-3, 2026: on phones a question that wraps kept its (+) at the far right; it now sits after the last word. */
@media (max-width: 600px) {
  html body #main section .faqin summary { display: block !important; }
  html body #main section .faqin summary::after { display: inline-grid !important; vertical-align: -5px; margin-left: 10px; }
}