/* Nov 4, 2026, Kelly's site list item 10: the "Want more from your website?" box on How it works matches the homepage's
   (the homepage rule from review1353.css: no gold top bar, no card, no border). */
html body #main .agency .offercard { background: transparent !important; border: 0 !important; border-left: 0 !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; }
html body #main#main#main#main > section.agency { padding-top: 64px !important; padding-bottom: 64px !important; height: auto !important; min-height: 0 !important; justify-content: flex-start !important; }

/* Nov 4, 2026, Kelly's How it works list. THE SIZE RULE: every left/right laptop is at least the vendor-team laptop's size
   (518px at 1024 and 1280, 635 at 1440, 770 at 1600). The vendors section keeps its own rule; these copy its numbers. */
@media (min-width: 1024px) {
  html body #main#main#main#main#main#main#main#main#main { --pic: max(518px, min(calc(100vw - 805px), 770px)); --picgap: 56px; --picpad: 40px; }
}
@media (min-width: 1280px) { html body #main#main#main#main#main#main#main#main#main { --picgap: 96px; --picpad: 56px; } }
@media (min-width: 1600px) { html body #main#main#main#main#main#main#main#main#main { --picgap: 120px; } }
@media (min-width: 1024px) {
  /* Items 3 and 5: "Never hunt for a photo again" and "Not every post needs a wedding", the mirror of the vendor team:
     laptop left at the vendor laptop's size, text right. */
  html body #main#main#main#main#main#main#main#main#main section#photos .wrap.wlgrid.hsec.flip,
  html body #main#main#main#main#main#main#main#main#main section#tools .wrap.wlgrid.hsec.flip { grid-template-columns: var(--pic) minmax(0, 1fr) !important; column-gap: var(--picgap) !important; padding-left: var(--picpad) !important; padding-right: var(--picpad) !important; max-width: none !important; }
  html body #main#main#main#main#main#main#main#main#main section#photos .wrap.wlgrid.hsec > .lgfig,
  html body #main#main#main#main#main#main#main#main#main section#tools .wrap.wlgrid.hsec > .lgfig { width: 100% !important; max-width: 100% !important; }
  html body #main#main#main#main#main#main#main#main#main section#photos .lgfig .device.lapv33,
  html body #main#main#main#main#main#main#main#main#main section#tools .lgfig .device.lapv33 { width: var(--pic) !important; max-width: none !important; }
  /* Item 4: "It keeps learning": the card no wider than the laptops, the paragraph about 560px, both centred together. */
  html body #main#main#main#main#main#main#main#main#main section#learning .wrap.wlgrid.hsec { grid-template-columns: var(--pic) minmax(0, 560px) !important; column-gap: var(--picgap) !important; justify-content: center !important; align-items: center !important; }
  html body #main#main#main#main#main#main#main#main#main section#learning .lgwords { max-width: 560px !important; }
  html body #main#main#main#main#main#main#main#main#main section#learning .lede.learnlede { max-width: 560px !important; }
  html body #main#main#main#main#main#main#main#main#main section#learning .shotwrap, html body #main#main#main#main#main#main#main#main#main section#learning .shotcard { max-width: var(--pic) !important; width: 100% !important; }
  /* Item 5: about 24px more room above the TAP A TOOL TO SEE IT bar (48 to 72). */
  html body #main#main#main#main#main#main#main#main#main section#tools .tstrip { margin-top: 72px !important; }
}
/* Item 2: "Built to be found": the bigger laptop shifted right, the Keywords callout floating to its RIGHT (the callout
   itself unchanged, 220px), the words and the laptop centred on each other. From 1280 up; below that there is no room. */
@media (min-width: 1280px) {
  html body #main#main#main#main#main#main#main#main#main section#keywords .wrap.wlgrid.hsec { grid-template-columns: calc(8.65 * var(--r3fs)) minmax(0, 1fr) !important; column-gap: 48px !important; align-items: center !important; }
  html body #main#main#main#main#main#main#main#main#main section#keywords .kwfig { display: grid !important; grid-template-columns: minmax(0, 1fr) 220px !important; column-gap: 24px !important; align-items: center !important; }
  html body #main#main#main#main#main#main#main#main#main section#keywords .kwfig > .kwlap { grid-column: 1; grid-row: 1; width: 100% !important; max-width: none !important; }
  html body #main#main#main#main#main#main#main#main#main section#keywords .kwfig > .kwpanel { grid-column: 2; grid-row: 1; position: static !important; transform: none !important; inset: auto !important; width: 220px !important; margin: 0 !important; }
  html body #main#main#main#main#main#main#main#main#main section#keywords .kwfig > .srcnote2 { grid-column: 1; grid-row: 2; }
}