/* MID-WIDTH ROWS (Kelly, Nov 4, 2026): from 900px to 1439px every text + image row stays side by side, laid out exactly as
 at 1440 with the columns scaled down; images top-aligned with the headline. Generated from each row's own 1440 grid. Below
 900 the tablet and phone layouts are untouched, and nothing at 1440 and up changes. */
@media (min-width: 900px) and (max-width: 1439.98px) {
  html body #main#main#main#main#main#main#main#main #example-brand-guide > div.wrap.v3col:nth-child(2) { display: grid !important; grid-template-columns: minmax(0, 3.92fr) minmax(0, 0.64fr) minmax(0, 2.90fr) minmax(0, 0.76fr) minmax(0, 5.54fr) !important; column-gap: 0px !important; align-items: start !important; max-width: 100% !important; }
  html body #main#main#main#main#main#main#main#main #example-brand-guide > div.wrap.v3col:nth-child(2) > :nth-child(1) { grid-column: 1 !important; grid-row: 1 !important; min-width: 0 !important; max-width: 100% !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !important; align-self: start !important; }
  html body #main#main#main#main#main#main#main#main #example-brand-guide > div.wrap.v3col:nth-child(2) > :nth-child(2) { grid-column: 3 !important; grid-row: 1 !important; min-width: 0 !important; max-width: 100% !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !important; align-self: start !important; }
  html body #main#main#main#main#main#main#main#main #example-brand-guide > div.wrap.v3col:nth-child(2) > :nth-child(3) { grid-column: 4 !important; grid-row: 1 !important; min-width: 0 !important; max-width: 100% !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !important; align-self: center !important; }
  html body #main#main#main#main#main#main#main#main #example-brand-guide > div.wrap.v3col:nth-child(2) > :nth-child(4) { grid-column: 5 !important; grid-row: 1 !important; min-width: 0 !important; max-width: 100% !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !important; align-self: start !important; }
  html body #main#main#main#main#main#main#main#main #how > div.wrap.ow3col:nth-child(2) { display: grid !important; grid-template-columns: minmax(0, 3.92fr) minmax(0, 0.64fr) minmax(0, 2.90fr) minmax(0, 0.76fr) minmax(0, 5.54fr) !important; column-gap: 0px !important; align-items: start !important; max-width: 100% !important; }
  html body #main#main#main#main#main#main#main#main #how > div.wrap.ow3col:nth-child(2) > :nth-child(1) { grid-column: 1 !important; grid-row: 1 !important; min-width: 0 !important; max-width: 100% !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !important; align-self: start !important; }
  html body #main#main#main#main#main#main#main#main #how > div.wrap.ow3col:nth-child(2) > :nth-child(2) { grid-column: 3 !important; grid-row: 1 !important; min-width: 0 !important; max-width: 100% !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !important; align-self: start !important; }
  html body #main#main#main#main#main#main#main#main #how > div.wrap.ow3col:nth-child(2) > :nth-child(3) { grid-column: 4 !important; grid-row: 1 !important; min-width: 0 !important; max-width: 100% !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !important; align-self: center !important; }
  html body #main#main#main#main#main#main#main#main #how > div.wrap.ow3col:nth-child(2) > :nth-child(4) { grid-column: 5 !important; grid-row: 1 !important; min-width: 0 !important; max-width: 100% !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !important; align-self: start !important; }
  html body #main#main#main#main#main#main#main#main #how > div.wrap.ow3col:nth-child(2) > :nth-child(5) { grid-column: 1 / -1 !important; grid-row: 2 !important; min-width: 0 !important; max-width: 100% !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !important; }
  html body #main#main#main#main#main#main#main#main #about > div.wrap.founder:nth-child(2) { display: grid !important; grid-template-columns: minmax(0, 4.93fr) minmax(0, 7.39fr) !important; column-gap: 58px !important; align-items: start !important; max-width: 100% !important; }
  html body #main#main#main#main#main#main#main#main #about > div.wrap.founder:nth-child(2) > :nth-child(1) { grid-column: 1 !important; grid-row: 1 !important; min-width: 0 !important; max-width: 100% !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !important; align-self: start !important; }
  html body #main#main#main#main#main#main#main#main #about > div.wrap.founder:nth-child(2) > :nth-child(2) { grid-column: 2 !important; grid-row: 1 !important; min-width: 0 !important; max-width: 100% !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !important; align-self: start !important; }
  html body #main#main#main#main#main#main#main#main #devices > div.wrap:nth-child(2) { display: grid !important; grid-template-columns: minmax(0, 3.60fr) minmax(0, 9.92fr) !important; column-gap: 14px !important; align-items: start !important; max-width: 100% !important; }
  html body #main#main#main#main#main#main#main#main #devices > div.wrap:nth-child(2) > :nth-child(1) { grid-column: 1 !important; grid-row: auto !important; min-width: 0 !important; max-width: 100% !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !important; align-self: start !important; }
  html body #main#main#main#main#main#main#main#main #devices > div.wrap:nth-child(2) > :nth-child(2) { grid-column: 1 !important; grid-row: auto !important; min-width: 0 !important; max-width: 100% !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !important; align-self: start !important; }
  html body #main#main#main#main#main#main#main#main #devices > div.wrap:nth-child(2) > :nth-child(3) { grid-column: 1 !important; grid-row: auto !important; min-width: 0 !important; max-width: 100% !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !important; align-self: start !important; }
  html body #main#main#main#main#main#main#main#main #conversation > div.wrap.hk4:nth-child(2) { display: grid !important; grid-template-columns: minmax(0, 5.18fr) minmax(0, 0.24fr) minmax(0, 2.50fr) minmax(0, 0.48fr) minmax(0, 5.36fr) !important; column-gap: 0px !important; align-items: start !important; max-width: 100% !important; }
  html body #main#main#main#main#main#main#main#main #conversation > div.wrap.hk4:nth-child(2) > :nth-child(1) { grid-column: 1 !important; grid-row: 1 !important; min-width: 0 !important; max-width: 100% !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !important; align-self: start !important; }
  html body #main#main#main#main#main#main#main#main #conversation > div.wrap.hk4:nth-child(2) > :nth-child(2) { grid-column: 3 !important; grid-row: 1 !important; min-width: 0 !important; max-width: 100% !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !important; align-self: start !important; }
  html body #main#main#main#main#main#main#main#main #conversation > div.wrap.hk4:nth-child(2) > :nth-child(3) { grid-column: 4 !important; grid-row: 1 !important; min-width: 0 !important; max-width: 100% !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !important; align-self: center !important; }
  html body #main#main#main#main#main#main#main#main #conversation > div.wrap.hk4:nth-child(2) > :nth-child(4) { grid-column: 5 !important; grid-row: 1 !important; min-width: 0 !important; max-width: 100% !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !important; align-self: start !important; }
  html body #main#main#main#main#main#main#main#main #calendar-link > div.wrap.wlgrid.hsec:nth-child(1) { display: grid !important; grid-template-columns: minmax(0, 5.12fr) minmax(0, 7.68fr) !important; column-gap: 58px !important; align-items: start !important; max-width: 100% !important; }
  html body #main#main#main#main#main#main#main#main #calendar-link > div.wrap.wlgrid.hsec:nth-child(1) > :nth-child(1) { grid-column: 1 !important; grid-row: 1 !important; min-width: 0 !important; max-width: 100% !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !important; align-self: start !important; }
  html body #main#main#main#main#main#main#main#main #calendar-link > div.wrap.wlgrid.hsec:nth-child(1) > :nth-child(2) { grid-column: 2 !important; grid-row: 1 !important; min-width: 0 !important; max-width: 100% !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !important; align-self: start !important; }
  html body #main#main#main#main#main#main#main#main #one-wedding > div.wrap.hk4.hk4w:nth-child(2) { display: grid !important; grid-template-columns: minmax(0, 4.13fr) minmax(0, 0.24fr) minmax(0, 3.10fr) minmax(0, 0.80fr) minmax(0, 5.50fr) !important; column-gap: 0px !important; align-items: start !important; max-width: 100% !important; }
  html body #main#main#main#main#main#main#main#main #one-wedding > div.wrap.hk4.hk4w:nth-child(2) > :nth-child(1) { grid-column: 1 !important; grid-row: 1 !important; min-width: 0 !important; max-width: 100% !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !important; align-self: start !important; }
  html body #main#main#main#main#main#main#main#main #one-wedding > div.wrap.hk4.hk4w:nth-child(2) > :nth-child(2) { grid-column: 3 !important; grid-row: 1 !important; min-width: 0 !important; max-width: 100% !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !important; align-self: start !important; }
  html body #main#main#main#main#main#main#main#main #one-wedding > div.wrap.hk4.hk4w:nth-child(2) > :nth-child(3) { grid-column: 4 !important; grid-row: 1 !important; min-width: 0 !important; max-width: 100% !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !important; align-self: center !important; }
  html body #main#main#main#main#main#main#main#main #one-wedding > div.wrap.hk4.hk4w:nth-child(2) > :nth-child(4) { grid-column: 5 !important; grid-row: 1 !important; min-width: 0 !important; max-width: 100% !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !important; align-self: start !important; }
  html body #main#main#main#main#main#main#main#main #one-wedding > div.wrap.hk4.hk4w:nth-child(2) > :nth-child(5) { grid-column: 1 / -1 !important; grid-row: 2 !important; min-width: 0 !important; max-width: 100% !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !important; }
  html body #main#main#main#main#main#main#main#main #keywords > div.wrap.wlgrid.hsec:nth-child(1) { display: grid !important; grid-template-columns: minmax(0, 4.15fr) minmax(0, 9.13fr) !important; column-gap: 29px !important; align-items: start !important; max-width: 100% !important; }
  html body #main#main#main#main#main#main#main#main #keywords > div.wrap.wlgrid.hsec:nth-child(1) > :nth-child(1) { grid-column: 1 !important; grid-row: 1 !important; min-width: 0 !important; max-width: 100% !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !important; align-self: start !important; }
  html body #main#main#main#main#main#main#main#main #keywords > div.wrap.wlgrid.hsec:nth-child(1) > :nth-child(2) { grid-column: 2 !important; grid-row: 1 !important; min-width: 0 !important; max-width: 100% !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !important; align-self: start !important; }
  html body #main#main#main#main#main#main#main#main #photos > div.wrap.wlgrid.flip.hsec:nth-child(1) { display: grid !important; grid-template-columns: minmax(0, 6.35fr) minmax(0, 5.97fr) !important; column-gap: 58px !important; align-items: start !important; max-width: 100% !important; }
  html body #main#main#main#main#main#main#main#main #photos > div.wrap.wlgrid.flip.hsec:nth-child(1) > :nth-child(1) { grid-column: 2 !important; grid-row: 1 !important; min-width: 0 !important; max-width: 100% !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !important; align-self: start !important; }
  html body #main#main#main#main#main#main#main#main #photos > div.wrap.wlgrid.flip.hsec:nth-child(1) > :nth-child(2) { grid-column: 1 !important; grid-row: 1 !important; min-width: 0 !important; max-width: 100% !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !important; align-self: start !important; }
  html body #main#main#main#main#main#main#main#main #vendors > div.wrap.wlgrid.hsec:nth-child(1) { display: grid !important; grid-template-columns: minmax(0, 5.97fr) minmax(0, 6.35fr) !important; column-gap: 58px !important; align-items: start !important; max-width: 100% !important; }
  html body #main#main#main#main#main#main#main#main #vendors > div.wrap.wlgrid.hsec:nth-child(1) > :nth-child(1) { grid-column: 1 !important; grid-row: 1 !important; min-width: 0 !important; max-width: 100% !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !important; align-self: start !important; }
  html body #main#main#main#main#main#main#main#main #vendors > div.wrap.wlgrid.hsec:nth-child(1) > :nth-child(2) { grid-column: 2 !important; grid-row: 1 !important; min-width: 0 !important; max-width: 100% !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !important; align-self: start !important; }
  html body #main#main#main#main#main#main#main#main #learning > div.wrap.wlgrid.flip.hsec:nth-child(2) { display: grid !important; grid-template-columns: minmax(0, 6.35fr) minmax(0, 5.60fr) !important; column-gap: 58px !important; align-items: start !important; max-width: 100% !important; }
  html body #main#main#main#main#main#main#main#main #learning > div.wrap.wlgrid.flip.hsec:nth-child(2) > :nth-child(1) { grid-column: 1 !important; grid-row: 1 !important; min-width: 0 !important; max-width: 100% !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !important; align-self: start !important; }
  html body #main#main#main#main#main#main#main#main #learning > div.wrap.wlgrid.flip.hsec:nth-child(2) > :nth-child(2) { grid-column: 2 !important; grid-row: 1 !important; min-width: 0 !important; max-width: 100% !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !important; align-self: start !important; }
  html body #main#main#main#main#main#main#main#main #calendar > div.wrap.wlgrid.flip.hsec:nth-child(2) { display: grid !important; grid-template-columns: minmax(0, 7.68fr) minmax(0, 5.12fr) !important; column-gap: 58px !important; align-items: start !important; max-width: 100% !important; }
  html body #main#main#main#main#main#main#main#main #calendar > div.wrap.wlgrid.flip.hsec:nth-child(2) > :nth-child(1) { grid-column: 2 !important; grid-row: 1 !important; min-width: 0 !important; max-width: 100% !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !important; align-self: start !important; }
  html body #main#main#main#main#main#main#main#main #calendar > div.wrap.wlgrid.flip.hsec:nth-child(2) > :nth-child(2) { grid-column: 1 !important; grid-row: 1 !important; min-width: 0 !important; max-width: 100% !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !important; align-self: start !important; }
  html body #main#main#main#main#main#main#main#main #tools > div.wrap.wlgrid.flip.hsec.tools15:nth-child(2) { display: grid !important; grid-template-columns: minmax(0, 6.35fr) minmax(0, 5.97fr) !important; column-gap: 58px !important; align-items: start !important; max-width: 100% !important; }
  html body #main#main#main#main#main#main#main#main #tools > div.wrap.wlgrid.flip.hsec.tools15:nth-child(2) > :nth-child(1) { grid-column: 1 !important; grid-row: 1 !important; min-width: 0 !important; max-width: 100% !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !important; align-self: start !important; }
  html body #main#main#main#main#main#main#main#main #tools > div.wrap.wlgrid.flip.hsec.tools15:nth-child(2) > :nth-child(2) { grid-column: 2 !important; grid-row: 1 !important; min-width: 0 !important; max-width: 100% !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !important; align-self: start !important; }
  html body #main#main#main#main#main#main#main#main #beyond > div.wrap.wlgrid.hsec:nth-child(1) { display: grid !important; grid-template-columns: minmax(0, 5.12fr) minmax(0, 7.68fr) !important; column-gap: 58px !important; align-items: start !important; max-width: 100% !important; }
  html body #main#main#main#main#main#main#main#main #beyond > div.wrap.wlgrid.hsec:nth-child(1) > :nth-child(1) { grid-column: 1 !important; grid-row: 1 !important; min-width: 0 !important; max-width: 100% !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !important; align-self: start !important; }
  html body #main#main#main#main#main#main#main#main #beyond > div.wrap.wlgrid.hsec:nth-child(1) > :nth-child(2) { grid-column: 2 !important; grid-row: 1 !important; min-width: 0 !important; max-width: 100% !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !important; align-self: start !important; }
  html body #main#main#main#main#main#main#main#main #analytics > div.wrap.wlgrid.hsec:nth-child(2) { display: grid !important; grid-template-columns: minmax(0, 4.57fr) minmax(0, 7.99fr) !important; column-gap: 43px !important; align-items: start !important; max-width: 100% !important; }
  html body #main#main#main#main#main#main#main#main #analytics > div.wrap.wlgrid.hsec:nth-child(2) > :nth-child(1) { grid-column: 1 !important; grid-row: 1 !important; min-width: 0 !important; max-width: 100% !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !important; align-self: start !important; }
  html body #main#main#main#main#main#main#main#main #analytics > div.wrap.wlgrid.hsec:nth-child(2) > :nth-child(2) { grid-column: 2 !important; grid-row: 1 !important; min-width: 0 !important; max-width: 100% !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !important; align-self: start !important; }
}
/* The three-part rows (words, the card, the arrow, the laptop): a wider text column, a readable card, and headlines sized to
   the column so no word is cut off. */
@media (min-width: 900px) and (max-width: 1439.98px) {
  html body #main#main#main#main#main#main#main#main #example-brand-guide > div.wrap.v3col:nth-child(2),
  html body #main#main#main#main#main#main#main#main #how > div.wrap.ow3col:nth-child(2),
  html body #main#main#main#main#main#main#main#main #conversation > div.wrap.hk4:nth-child(2),
  html body #main#main#main#main#main#main#main#main #one-wedding > div.wrap.hk4.hk4w:nth-child(2) {
    grid-template-columns: minmax(0, 1.15fr) 20px minmax(0, .78fr) 40px minmax(0, 1.12fr) !important; column-gap: 0 !important; }
  html body #main#main#main#main#main#main#main#main #example-brand-guide .v3words h2 { font-size: clamp(26px, 3.2vw, 40px) !important; }
  html body #main#main#main#main#main#main#main#main #how .owwords h2 { font-size: clamp(24px, 2.55vw, 36px) !important; }
  html body #main#main#main#main#main#main#main#main #devices > div.wrap:nth-child(2) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) !important; }
  html body #main#main#main#main#main#main#main#main #devices > div.wrap:nth-child(2) h2 { font-size: clamp(26px, 2.6vw, 34px) !important; white-space: normal !important; }
  html body #main#main#main#main#main#main#main#main #devices > div.wrap:nth-child(2) h2 br.dbr { display: inline !important; }
  html body #main#main#main#main#main#main#main#main #analytics h2 { font-size: clamp(30px, 3.5vw, 40px) !important; }
  html body #main#main#main#main#main#main#main#main :is(#example-brand-guide, #how, #conversation, #one-wedding) .varrow svg { width: 26px !important; height: 26px !important; }
}
/* The calendar row's "Works with" logos (24 of them): eight to a row as at 1440, each tile sized to the column so the row never runs
   past it (at 1280 a row of eight 56px tiles ran 48px over) and the column stays three rows deep instead of four to six. */
@media (min-width: 900px) and (max-width: 1439.98px) {
  html body #main#main#main#main#main#main#main#main #calendar-link .wwtiles.ww12 { grid-template-columns: repeat(8, minmax(0, 56px)) !important; gap: 7px !important; max-width: 100% !important; }
  html body #main#main#main#main#main#main#main#main #calendar-link .wwtiles.ww12 li { width: auto !important; height: auto !important; aspect-ratio: 1 / 1 !important; min-width: 0 !important; display: grid !important; place-items: center !important; border-radius: 22% !important; }
  html body #main#main#main#main#main#main#main#main #calendar-link .wwtiles.ww12 li img { width: 60% !important; height: auto !important; aspect-ratio: 1 / 1 !important; border-radius: 16% !important; }
}
/* Homepage, mid widths (Kelly, Nov 4: done right, not fast). */
@media (min-width: 700px) and (max-width: 1439.98px) {
  /* "It learns / It asks / It delivers": the three columns stretched to one height and shared the slack between their rows, so the
     titles and cards stepped down. Titles start level; the cards fill the rest and end level. */
  html body #main#main#main#main#main#main#main#main #employee .empcol { align-content: start !important; grid-template-rows: auto auto 1fr !important; }
}
@media (min-width: 900px) and (max-width: 1439.98px) {
  /* The founder's three figures: the last label ran past the edge. Labels wrap inside their own column. */
  html body #main#main#main#main#main#main#main#main #about .stats { grid-template-columns: repeat(3, minmax(0, auto)) !important; column-gap: 32px !important; }
  html body #main#main#main#main#main#main#main#main #about .stats span { white-space: normal !important; max-width: 170px !important; }
  /* "Your marketing department, wherever you are.": words left-aligned as at 1440, the devices beside them and level with the eyebrow. */
  html body #main#main#main#main#main#main#main#main #devices > div.wrap:nth-child(2) { align-items: start !important; align-content: start !important; text-align: left !important; column-gap: 40px !important; }
  html body #main#main#main#main#main#main#main#main #devices > div.wrap:nth-child(2) > .devs2 { grid-column: 2 !important; grid-row: 1 / span 3 !important; align-self: start !important; }
  html body #main#main#main#main#main#main#main#main #devices > div.wrap:nth-child(2) > :is(.k, h2, .lede) { text-align: left !important; justify-self: start !important; align-self: start !important; }
}
@media (min-width: 900px) and (max-width: 1023.98px) {
  /* Pricing: the 1440 layout (the costs on the left, the founding card on the right) kept down to 900. */
  html body #main#main#main#main#main#main#main#main #pricing > .wrap { display: grid !important; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) !important; column-gap: 40px !important; align-items: center !important; text-align: left !important; }
  html body #main#main#main#main#main#main#main#main #pricing > .wrap > :not(.prices) { grid-column: 1 !important; text-align: left !important; justify-self: start !important; }
  html body #main#main#main#main#main#main#main#main #pricing > .wrap > .prices { grid-column: 2 !important; grid-row: 1 / span 4 !important; width: auto !important; max-width: 100% !important; margin: 0 !important; }
  html body #main#main#main#main#main#main#main#main #pricing > .wrap > .prices > .price { width: auto !important; max-width: 100% !important; margin: 0 !important; }
  html body #main#main#main#main#main#main#main#main #pricing h2 { font-size: clamp(30px, 3.6vw, 40px) !important; }
}
@media (min-width: 900px) and (max-width: 1439.98px) {
  html body #main#main#main#main#main#main#main#main #about .stats { align-items: start !important; }
  html body #main#main#main#main#main#main#main#main #about .stats > div { justify-items: start !important; text-align: left !important; align-content: start !important; align-self: start !important; }
}
@media (min-width: 900px) and (max-width: 1023.98px) {
  html body #main#main#main#main#main#main#main#main #pricing > .wrap > .costrow { margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; }
}
/* Where a long column of words sits beside a shorter picture (the calendar row and the vendor library), the
   picture starts level with the eyebrow and stays in view while the words are read, instead of leaving a tall blank space under it. */
@media (min-width: 900px) and (max-width: 1439.98px) {
  html body #main#main#main#main#main#main#main#main :is(#calendar-link > .wlgrid > figure, #vendors > .wrap > :not(:has(h2))) { position: sticky !important; top: 112px !important; }
}
/* The two voice rows ("It actually gets to know you", "It starts with a conversation") between 900 and 1279: three across squeezed
   the interview card to three words a line. Here the words keep the left half and the right half reads top to bottom: the interview,
   an arrow pointing down, then the voice profile on the laptop. */
@media (min-width: 900px) and (max-width: 1279.98px) {
  html body #main#main#main#main#main#main#main#main :is(#example-brand-guide > div.wrap.v3col:nth-child(2), #conversation > div.wrap.hk4:nth-child(2)) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; column-gap: 56px !important; grid-template-rows: auto auto auto 1fr !important; align-content: start !important; }
  html body #main#main#main#main#main#main#main#main :is(#example-brand-guide > div.wrap.v3col:nth-child(2) > .v3words, #conversation > div.wrap.hk4:nth-child(2) > .lgwords) { grid-column: 1 !important; grid-row: 1 / span 4 !important; }
  html body #main#main#main#main#main#main#main#main :is(#example-brand-guide > div.wrap.v3col:nth-child(2), #conversation > div.wrap.hk4:nth-child(2)) > .vqcard { grid-column: 2 !important; grid-row: 1 !important; justify-self: center !important; width: min(100%, 380px) !important; }
  html body #main#main#main#main#main#main#main#main :is(#example-brand-guide > div.wrap.v3col:nth-child(2), #conversation > div.wrap.hk4:nth-child(2)) > .varrow { display: grid !important; grid-column: 2 !important; grid-row: 2 !important; justify-self: center !important; align-self: center !important; margin: 18px 0 !important; transform: none !important; }
  html body #main#main#main#main#main#main#main#main :is(#example-brand-guide > div.wrap.v3col:nth-child(2), #conversation > div.wrap.hk4:nth-child(2)) > .varrow svg { transform: rotate(90deg) !important; animation: none !important; }
  html body #main#main#main#main#main#main#main#main :is(#example-brand-guide > div.wrap.v3col:nth-child(2) > .vlaptop, #conversation > div.wrap.hk4:nth-child(2) > .hk4lap) { grid-column: 2 !important; grid-row: 3 !important; justify-self: center !important; width: min(100%, 460px) !important; }
}
/* Three across (the one-wedding rows everywhere from 900, the voice rows from 1280): the arrow sits level with the middle of the
   laptop it points at, since the pictures now start at the top instead of the row's middle. */
@media (min-width: 900px) and (max-width: 1439.98px) {
  html body #main#main#main#main#main#main#main#main :is(#how > div.wrap.ow3col:nth-child(2), #one-wedding > div.wrap.hk4.hk4w:nth-child(2)) > .varrow { align-self: start !important; margin-top: calc(9.6vw - 13px) !important; }
}
@media (min-width: 1280px) and (max-width: 1439.98px) {
  html body #main#main#main#main#main#main#main#main :is(#example-brand-guide > div.wrap.v3col:nth-child(2), #conversation > div.wrap.hk4:nth-child(2)) > .varrow { align-self: start !important; margin-top: calc(9.6vw - 13px) !important; }
}
/* Single-line headlines (kept on one line by design) that ran into the picture beside them at 1280: sized to their column. */
@media (min-width: 1024px) and (max-width: 1439.98px) {
    html body #main#main#main#main#main#main#main#main #analytics h2 { font-size: clamp(28px, 2.66vw, 40px) !important; }
  html body #main#main#main#main#main#main#main#main #vendors h2 { font-size: clamp(28px, 3.3vw, 48px) !important; }
}
/* "You approve. It posts.": between 1024 and 1279 the phone kept a fixed 160px and stood 63px above the laptop, touching "It posts
   for you". Sized with the laptop as at 1280 and 900 (a fifth of the pair's width), sitting at the laptop's foot. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  html body #main#main#main#main#main#main#main#main #calendar .calpair > .pphone2 { width: 20% !important; height: auto !important; aspect-ratio: 140 / 289 !important; top: auto !important; bottom: -12px !important; }
}
/* "Built to be found on Google and in AI search": at 1440's proportions the words column fell to 247-286px and the headline broke
   into five short lines. Between 900 and 1279 the words get two fifths of the row. */
@media (min-width: 900px) and (max-width: 1279.98px) {
  html body #main#main#main#main#main#main#main#main #keywords > div.wrap.wlgrid.hsec:nth-child(1) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr) !important; column-gap: 40px !important; }
}
/* Headlines that broke badly at mid widths (one word alone on a line, or a line running out): each sized so it keeps its
   own lines, measured at 900, 1000, 1024, 1100, 1279 and 1439. */
@media (min-width: 900px) and (max-width: 1439.98px) {
  html body #main#main#main#main#main#main#main#main #everywhere h2 { font-size: clamp(39px, 5vw - 24px, 48px) !important; }
}
@media (min-width: 900px) and (max-width: 1199.98px) {
  html body #main#main#main#main#main#main#main#main #calendar-link h2 { font-size: clamp(30px, 4.5vw - 10.5px, 39px) !important; }
  /* "Helps keep your calendar full year-round." on three even lines here instead of two cramped ones. */
  html body #main#main#main#main#main#main#main#main #quiet-months { white-space: normal !important; font-size: 34px !important; }
}
@media (min-width: 1200px) and (max-width: 1439.98px) {
  html body #main#main#main#main#main#main#main#main #quiet-months { font-size: calc(3.75vw - 15px) !important; }
}
@media (min-width: 1024px) and (max-width: 1150px) {
  html body #main#main#main#main#main#main#main#main #pricing h2 { font-size: clamp(32px, 7.9vw - 45px, 42px) !important; }
}