/* Overnight Nov 3, 2026 (Kelly, items 16 and 18). Item 18: the thin gold line from the laptop's Keywords box to the big
   Keywords callout is back from 1280 up (review221.css had hidden it); the callout sits beside the laptop with room for it. */
@media (min-width: 1280px) {
  html body #main#main#main#main#main #keywords .kwline { display: block !important; }
  html body #main#main#main#main#main #keywords .kwfig { grid-template-columns: minmax(0, 1fr) 220px !important; column-gap: 44px !important; justify-content: end !important; }
  html body #main#main#main#main#main #keywords .kwpanel { width: 220px !important; transform: none !important; }
  html body #main#main#main#main#main #keywords .kwfig .kwlap { margin-left: auto !important; }
}
/* Item 16: captions centered under the laptop, whatever its width. */
@media (min-width: 1024px) {
  html body #main #photos figure.lgfig, html body #main #vendors figure.lgfig, html body #main #tools figure.lgfig { display: flex !important; flex-direction: column; align-items: center; }
  html body #main #photos figure .srcnote2, html body #main #vendors figure .srcnote2, html body #main #tools figure .srcnote2 { text-align: center !important; align-self: center !important; }
}
/* Item 17: "One wedding. 20 pieces of content." on How it works takes the homepage's own container measurements: the card, the gold
   arrow and the laptop at the homepage's sizes, all centred on one line with the words (review1353b.css #how .ow3col, nov3.css 1024). */
@media (min-width: 1280px) {
  html body #main#main#main#main#main#main #part-create .wrap.hk4 { --w: 30%; --c: clamp(280px, 21.5vw, 340px); --a: 72px; grid-template-columns: var(--w) 24px var(--c) var(--a) minmax(0, 1fr) !important; column-gap: 0 !important; align-items: center !important; justify-content: stretch !important; }
  html body #main#main#main#main#main#main #part-create .hk4 > .lgwords { grid-column: 1 !important; grid-row: 1 !important; }
  html body #main#main#main#main#main#main #part-create .hk4 > .lgwords .lede { max-width: none !important; }
  html body #main#main#main#main#main#main #part-create .hk4 > .hk4card { grid-column: 3 !important; grid-row: 1 !important; width: var(--c) !important; max-width: none !important; margin: 0 !important; transform: none !important; justify-self: stretch !important; }
  html body #main#main#main#main#main#main #part-create .hk4 > .varrow { grid-column: 4 !important; grid-row: 1 !important; display: grid !important; place-items: center; width: var(--a) !important; margin: 0 !important; transform: none !important; justify-self: stretch !important; }
  html body #main#main#main#main#main#main #part-create .hk4 > .varrow svg { width: 36px !important; height: 36px !important; transform: translateX(.375px) !important; }
  html body #main#main#main#main#main#main #part-create .hk4 > .hk4lap { grid-column: 5 !important; grid-row: 1 !important; width: 100% !important; margin: 0 !important; transform: none !important; }
}
@media (min-width: 1440px) { html body #main#main#main#main#main#main #part-create .wrap.hk4 { --a: 80px; } }
@media (min-width: 1280px) {
  html body #main#main#main#main#main#main #part-create .hk4 > .hk4lap { position: relative !important; }
  html body #main#main#main#main#main#main #part-create .hk4lap .srcnote2 { position: absolute !important; left: 0; right: 0; top: calc(100% + 5px); margin: 0 !important; text-align: center !important; }
}
@media (min-width: 1280px) {
  html body #main#main#main#main#main#main #part-create .hk4 > .lgwords > h2 { white-space: normal !important; font-size: clamp(34px, 3.067vw, 48px) !important; }
  html body #main#main#main#main#main#main #part-create .hk4 > .lgwords > h2 .g { white-space: normal !important; }
}
/* Item 21: "It keeps learning" is a 50/50 split; the picture is never wider than its half. */
@media (min-width: 1024px) {
  html body #main#main#main#main#main#main #learning .wrap.wlgrid.hsec { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
  html body #main#main#main#main#main#main #learning figure.lgfig { width: 100% !important; max-width: 100% !important; justify-self: stretch !important; }
  html body #main#main#main#main#main#main #learning .shotwrap, html body #main#main#main#main#main#main #learning .shotcard { max-width: 100% !important; }
}
/* Item 22: the "Tap a tool to see it" bar is only as wide as its content, from the label to the end of the description, and centred. */
@media (min-width: 900px) and (max-width: 1279px) {
  html body #main#main#main #tools .wrap > .tstrip { flex-direction: column; align-items: stretch; gap: 14px; width: fit-content !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; }
  html body #main#main#main #tools .tstrip .tswhy { padding: 14px 0 0 !important; border-left: 0 !important; border-top: 1px solid var(--line); max-width: none !important; width: auto !important; }
}
@media (min-width: 1280px) {
  html body #main#main#main #tools .wrap > .tstrip { width: fit-content !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; }
  html body #main#main#main #tools .tstrip .tswhy { flex: 0 1 auto !important; width: 500px; max-width: 500px !important; }
}