/* KELLY'S 2:21 HOW IT WORKS REVIEW (Nov 3, 2026). Loaded last on how-it-works only. */

/* 4: about 24px more room under the chapter title. */
html body #main#main#main #part-know .chead { margin-bottom: 72px !important; }

/* 10: One wedding: a narrower words column (the paragraph), a bigger card, the laptop moved right. From 1440 up: the five columns need about 1,425px, so below that the earlier layout stands. */
@media (min-width: 1440px) {
  html body #main#main#main#main #part-create .wrap.hk4 { grid-template-columns: max-content minmax(16px, 1fr) 290px 44px 536px !important; }
  html body #main#main#main#main #part-create .hk4 > .lgwords .lede { max-width: 400px !important; }
  html body #main#main#main#main #part-create .hk4 > .hk4card { width: 290px !important; }
}

/* 13: the keywords group. Gold only on the ring inside the screen; the callout is a plain card 24px from the laptop;
   the laptop bigger; "Example blog" centred under the laptop. */
html body #main#main#main#main#main section#keywords#keywords .kwpanel.kwpanel { outline: 0 !important; box-shadow: 0 18px 40px rgba(1, 34, 61, .14) !important; border: 1px solid var(--line) !important; }
html body #main#main #keywords .kwline { display: none !important; }
html body #main#main #keywords .kwring { left: 74.6% !important; top: 23.4% !important; width: 24.2% !important; height: 23.6% !important; }
@media (min-width: 1280px) {
  html body #main#main#main#main #keywords .wlgrid.hsec { grid-template-columns: minmax(0, 416px) minmax(0, 1fr) !important; }
  html body #main#main#main#main #keywords .kwfig { display: grid !important; grid-template-columns: minmax(0, 650px) 250px; column-gap: 24px; align-items: center; justify-content: end; }
  html body #main#main#main#main #keywords .kwfig .kwlap { width: min(650px, calc(100% + 20px)) !important; margin-left: calc(100% - min(650px, calc(100% + 20px))) !important; grid-column: 1; grid-row: 1; }
  html body #main#main#main#main #keywords .kwfig .kwlap .lapv33 { width: 100% !important; max-width: none !important; }
  html body #main#main#main#main #keywords .kwpanel { position: static !important; grid-column: 2; grid-row: 1; width: 250px !important; margin: 0 !important; transform: translate(var(--kwpull, -60px), -40px); }
  html body #main#main#main#main #keywords .kwfig .srcnote2 { grid-column: 1; grid-row: 2; justify-self: stretch !important; width: auto !important; text-align: center !important; margin: 16px 0 0 !important; }
}

/* 15: the photo library laptop and words centred as one group. */
@media (min-width: 1280px) {
  html body #main#main#main#main section#photos#photos#photos .wlgrid.hsec.flip { grid-template-columns: 720px 440px !important; justify-content: center !important; column-gap: 72px !important; }
  html body #main#main#main#main section#photos#photos#photos .wlgrid.hsec.flip > .lgfig { width: 720px !important; max-width: none !important; margin: 0 !important; }
}

/* 22: the tool strip from just left of the laptop to just past the words; each pill with its icon; the chosen one filled. */
#tools .tpill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 8px; }
#tools .tpi { display: inline-flex; gap: 3px; }
#tools .tpi svg { width: 22px; height: 22px; padding: 3px; border-radius: 999px; background: #fff; box-sizing: border-box; }
#tools .tpill[aria-pressed="true"] { background: #01a263; border: 2px solid #01a263; color: #fff; }
#tools .tpill[aria-pressed="true"]:hover { background: #0a7a4f; border-color: #0a7a4f; }
@media (min-width: 1280px) {
  html body #main#main #tools .wrap > .tstrip { margin-left: 56px !important; margin-right: 40px !important; }
}

/* 27: the closing words and the phone centred as one group. 29: the form's foot level with the phone's dock row. From 1280 up; below that the earlier layout stands (at 1024 the two columns don't fit). */
@media (min-width: 1280px) {
  html body #main#main section#join.closer2 .cl2, html body section#join.closer2#join .cl2 { grid-template-columns: minmax(0, 560px) 300px !important; justify-content: center !important; column-gap: clamp(48px, 8vw, 112px) !important; align-items: end !important; }
  html body #main#main section#join.closer2 .cltext, html body section#join.closer2#join .cltext { padding-bottom: var(--dockpad, 34px); }
}

/* "It posts for you" at 1024 to 1279 (Kelly, Nov 3, 2026, yes to Needs Kelly 9): the laptop and phone fit their own column,
   so the phone no longer covers "You approve. It posts." From 1280 up nothing changes. */
@media (min-width: 1024px) and (max-width: 1279px) {
  html body #main#main#main section#calendar .calfig2 .calpair { width: 100% !important; max-width: 100% !important; }
  html body #main#main#main section#calendar .calfig2 .calpair .lapx { width: 86% !important; max-width: none !important; }
  html body #main#main#main section#calendar .calfig2 .calpair .pphone2 { width: min(30%, 160px) !important; left: auto !important; right: 0 !important; }
}