/* HOW IT WORKS, REBUILT (Kelly's Oct 31 review, built Nov 1, 2026; 2026-10-31 how-it-works-review.md and its mocks).
   Loaded last on How it works. Four parts, no step numbers; each part opens with the circle-O and a gold part label; every
   section is a two-tone headline, a line or two and one picture, text and picture alternating. */

/* The four icons at the top: no numbers, no dotted line, no animation. */
.hsteps.hparts { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1200px; }
/* 4 (Nov 1, round 2): the still gold dotted line between the icons, no animation. */
.hsteps.hparts li + li::before { display: block; top: 37px; left: calc(-50% + 38px); right: calc(50% + 38px); border-top: 2px dashed #c9a24a; }
/* 5: every title on one line. */
@media (min-width: 900px) { .hsteps.hparts .hsl { white-space: nowrap; text-wrap: nowrap; } }
.hsteps.hparts .hsc { transition: none; }
.hsteps.hparts a:hover .hsc { transform: none; }
.hsteps.hparts .hsl { margin-top: 16px; }
@media (max-width: 767px) {
  .hsteps.hparts { grid-template-columns: minmax(0, 1fr); max-width: 340px; gap: 20px; }
  .hsteps.hparts a { grid-template-columns: 64px minmax(0, 1fr); }
  .hsteps.hparts .hsc { width: 64px; height: 64px; grid-row: auto; }
  .hsteps.hparts .hsl { margin-top: 0; align-self: center; }
  .hsteps.hparts li + li::before { top: auto; bottom: 100%; left: 37px; right: auto; height: 20px; border-top: 0; border-left: 2px dashed #c9a24a; }
}

/* The part label under each part's circle-O. Gold text alone fails contrast, so it is the darker gold ink. */
.partk { margin: 0 0 8px; text-align: center; font: 700 13px/1.3 Montserrat, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #8a6d24; }

/* Sections inside a part: the same room above each, the words centred on the picture, each section fits one 1440x900 screen. */
.hpart .hsec { margin-top: 72px; align-items: center; }
.hpart .wrap:first-child + .hsec { margin-top: 40px; }
@media (min-width: 1024px) {
  .hpart .hsec .lgfig .lapv33 { max-width: 700px !important; }
  .hpart .hsec { min-height: 520px; }
}

/* 1a. The interview card over the laptop's left side. */
.convfig { position: relative; }
.convfig .vqcard { position: relative; z-index: 2; }
@media (min-width: 1024px) {
  .convfig { padding-top: 24px; }
  .convfig .vqcard { position: absolute; left: -8%; top: 14%; width: 33%; max-width: 260px; font-size: 12px; }
  .convfig .vqcard .baq, .convfig .vqcard .baa { font-size: 13px; line-height: 1.45; }
  .convfig .lapv33 { margin-left: 24% !important; width: 80% !important; }
}
@media (max-width: 1023px) { .convfig .vqcard { max-width: 420px; margin: 0 auto 20px; } }
.convfig .srcnote2 { text-align: center; }

/* 1b. The edit question, as its own card. */
.cardfig .shotcard { display: block; width: 100%; max-width: 640px; height: auto; margin: 0 auto; border-radius: 18px; border: 1.5px solid var(--line); background: #fff; box-shadow: 0 26px 64px rgba(1, 34, 61, .10); }

/* 2a. Three small inputs, an arrow, then the results. */
.owinfig { display: grid; gap: 16px; }
.owins { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.owins li { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #fff; border: 1.5px solid var(--line); border-radius: 12px; box-shadow: inset 0 4px 0 #01a263; font: 600 14px/1.3 Montserrat, sans-serif; color: var(--navy); }
.owins svg { flex: none; width: 20px; height: 20px; fill: none; stroke: #01a263; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.owarrow svg { width: 28px; height: 28px; fill: none; stroke: #c9a24a; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; display: block; margin: 0 auto; transform: rotate(90deg); }
.owinfig .srcnote2 { text-align: center; }
@media (min-width: 1024px) {
  .owinfig { grid-template-columns: 170px 32px minmax(0, 1fr); align-items: center; column-gap: 10px; }
  .owarrow svg { transform: none; }
  .owinfig .srcnote2 { grid-column: 1 / -1; }
  .owinfig .lapv33 { max-width: none !important; }
}

/* 2b. The keyword card to the right of the laptop, level with the outlined Keywords panel, with a gold top edge; nothing below. */
#keywords .kwring { border-width: 3px; }
@media (min-width: 1024px) {
  #keywords .kwfig { position: relative; display: block; }
  #keywords .kwfig .kwlap { width: 68%; }
  #keywords .kwfig .kwlap .lapv33 { max-width: none !important; margin: 0 !important; }
  #keywords .kwpanel { position: absolute; right: -2%; top: 6%; width: 33%; margin: 0; border-top: 1.5px solid var(--line); box-shadow: inset 0 5px 0 #c9a24a, 0 18px 40px rgba(1, 34, 61, .14); border-radius: 14px; }
}

/* 2f. The tools: tabs built into the laptop screen; the card under the words changes its top bar and words with the tab. */
.tscreen { flex-direction: column; background: #fff; }
.ttabbar { flex: none; display: flex; gap: 1.2%; padding: 1.6% 2% 0; background: #fff; border-bottom: 1.5px solid var(--line); }
.ttab2 { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1.5px solid var(--line); border-bottom: 0; border-radius: 9px 9px 0 0; background: #fff; font: 700 clamp(9px, 1.05vw, 13px)/1.2 Montserrat, sans-serif; color: var(--navy); cursor: pointer; margin-bottom: -1.5px; }
.ttab2[aria-selected="true"] { border-color: #01a263; color: var(--green-text, #0a7a4f); border-bottom: 1.5px solid #fff; }
.ttab2:focus-visible { outline: 2px solid var(--green-text, #0a7a4f); outline-offset: 2px; }
.ttab2 svg { width: 15px; height: 15px; flex: none; }
.ttab2 .tpen { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lapx .tscreen img.tshot { flex: 1; min-height: 0; height: auto; width: 100%; object-fit: cover; object-position: left top; }
.tcard { margin: 24px 0 0; padding: 22px 22px 18px; background: #fff; border: 1.5px solid var(--line); border-radius: 14px; font: 700 17px/1.55 Montserrat, sans-serif; color: var(--navy); box-shadow: inset 0 5px 0 0 var(--tc, #01a263); }
.tcard[data-tone="blog"] { --tc: #01a263; }
.tcard[data-tone="pins"] { --tc: #e60023; }
.tcard[data-tone="google"] { --tc: #4285f4; }
.tcard[data-tone="social"] { box-shadow: none; background: linear-gradient(90deg, #e1306c 50%, #1877f2 50%) top / 100% 5px no-repeat, #fff; }
.thint { margin: 14px 0 0; font: 700 15px/1.4 Montserrat, sans-serif; color: var(--green-text, #0a7a4f); }
#tools .srcnote2 { text-align: center; }

/* 3b. The calendar with the week on a phone beside it, and one drag from Tuesday to Thursday. */
.calpair { position: relative; width: 100%; }
.calpair > .lapv33 { width: 82% !important; max-width: none !important; margin: 0 !important; }
.calpair .pphone2 { position: absolute; right: 0; bottom: 0; width: 19%; z-index: 2; filter: drop-shadow(0 12px 22px rgba(1, 34, 61, .22)); }
.calpair .pphone2 .screen img { display: block; width: 100%; flex: 1; min-height: 0; object-fit: cover; object-position: top; }
@media (max-width: 599px) { .calpair > .lapv33 { width: 100% !important; } .calpair .pphone2 { position: static; width: 46%; margin: 16px auto 0; } }
.calfig2 .srcnote2 { text-align: center; }
.dragdemo { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.dragdemo .dpatch, .dragdemo .dchip { position: absolute; left: 50.5%; top: 52.3%; width: 8.0%; height: 19.75%; }
.dragdemo .dpatch { background: #fff; opacity: 0; }
.dragdemo .dchip { opacity: 0; border-radius: 6px; box-shadow: 0 10px 24px rgba(1, 34, 61, .22); }
.dragdemo .dcur { position: absolute; left: 54%; top: 60%; width: 2.6%; height: auto; opacity: 0; }
.dragdemo.run .dpatch { animation: dpatch 2.4s ease forwards; }
.dragdemo.run .dchip { animation: dchip 2.4s ease forwards; }
.dragdemo.run .dcur { animation: dcur 2.4s ease forwards; }
@keyframes dpatch { 0%, 15% { opacity: 0; } 20%, 100% { opacity: 1; } }
@keyframes dchip { 0%, 15% { opacity: 0; transform: none; } 20% { opacity: 1; transform: translate(0, -2%) scale(1.04); } 80% { opacity: 1; transform: translate(244%, 108%) scale(1.04); } 92%, 100% { opacity: 1; transform: translate(244%, 108%) scale(1); box-shadow: none; } }
@keyframes dcur { 0% { opacity: 0; } 10% { opacity: 1; transform: none; } 20% { transform: translate(0, -2%); } 80% { transform: translate(750%, 512%); opacity: 1; } 100% { transform: translate(750%, 512%); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .dragdemo { display: none; } }

/* Wherever you are: the first line ends at "desk" on a laptop; on a phone it wraps on its own. */
#devices .devlede { max-width: 1100px; }
#devices .devlede br { display: none; }
@media (min-width: 900px) { #devices .devlede br { display: inline; } }

/* 3a. Works with: a short row of small logos (Kelly, Oct 31 review), six, an even number. Aisle Planner its own mark, white
   rings on a dark tile. */
#calendar-link .wwtiles { display: flex; flex-wrap: wrap; gap: 8px; grid-template-columns: none; max-width: 480px; }
#calendar-link .wwtiles li { width: auto; height: auto; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; font: 600 13px/1.2 Montserrat, sans-serif; }
#calendar-link .wwtiles li.wwmore { display: none; }
#calendar-link .wwtiles .wwlogo { width: 28px; height: 28px; border-radius: 7px; }
#calendar-link .wwtiles .wwlogo svg { width: 18px; height: 18px; }
#calendar-link .wwtiles .wwlogo.wwo { font-size: 14px; }
#calendar-link .wwtiles li:nth-child(5) .wwlogo { background: #16181c; padding: 3px; }
#calendar-link .wwtiles li:nth-child(5) .wwlogo img { filter: invert(1) brightness(1.6); }

/* ROUND 2 (Kelly, Nov 1, 2026, ~11am). */
/* 2. One band per section, gray and white alternating; the part label only where a part starts. */
.hband { padding: 96px 0; }
.hband.hpart { padding-top: 120px; }
.hband .hsec, .hband .hsecwrap > .hsec { margin-top: 0 !important; }
.hband.hpart .hsecwrap { margin-top: 36px; }
.hband .hsec { min-height: 0; }
/* 1. Every laptop the same size: 640px at most, as "It starts with a conversation". */
@media (min-width: 1024px) {
  .hband .wlgrid { grid-template-columns: minmax(0, 1fr) 640px !important; column-gap: 64px; }
  .hband .wlgrid.flip { grid-template-columns: 640px minmax(0, 1fr) !important; }
  .hband .lgfig .lapv33, .hband .convfig .lapv33, .hband .calpair > .lapv33, .hband .pair > .lapv33, #keywords .kwfig .kwlap .lapv33 { width: 640px !important; max-width: 640px !important; margin: 0 !important; }
  .hband .owinfig { grid-template-columns: 1fr; }
  .hband .owinfig .owins { display: flex; gap: 10px; justify-content: center; }
  .hband .owinfig .owarrow svg { transform: rotate(90deg); }
  .hband .convfig { padding-top: 0; }
  .hband .convfig .vqcard { left: -150px; top: 12%; width: 220px; }
  #keywords .wlgrid.flip { grid-template-columns: 900px minmax(0, 1fr) !important; }
  #keywords .kwfig .kwlap { width: 640px; }
  #keywords .kwpanel { right: 0; top: 8%; width: 240px; }
  #calendar .calpair, #part-results .pair { width: 640px; }
  #calendar .wlgrid.flip { grid-template-columns: 760px minmax(0, 1fr) !important; }
  #calendar .calpair { width: 760px; }
  #calendar .calpair .pphone2 { width: 150px; right: 0; }
  #part-results .wlgrid { grid-template-columns: minmax(0, 1fr) 760px !important; }
  #part-results .pair { width: 760px; position: relative; }
  #part-results .pair .pphone { width: 150px; left: auto; right: 0; }
}
/* 7. "It keeps learning": a thin border and a green top bar, no soft shadow. */
.cardfig .shotwrap { max-width: 640px; margin: 0 auto; background: #fff; border: 1.5px solid var(--line); border-radius: 14px; box-shadow: inset 0 5px 0 0 #01a263; padding-top: 5px; overflow: hidden; }
.cardfig .shotwrap .shotcard { box-shadow: none !important; border: 0 !important; border-radius: 0 !important; max-width: none; }

#keywords .kwring { left: 74.6%; top: 23.4%; width: 24.2%; height: 41%; border-radius: 10px; border: 4px solid #c9a24a; }
/* 16. "Your week" and the plan, up close beside the laptop, with a gold outline on that spot in the screen. */
.wkfig { position: relative; }
.wkfig .lfscreen { position: absolute; }
.wkring { position: absolute; left: 19.8%; top: 14.2%; width: 79.6%; height: 19.2%; border: 4px solid #c9a24a; border-radius: 8px; z-index: 2; pointer-events: none; }
.wkpanel { display: block; width: 100%; height: auto; margin: 18px 0 0; background: #fff; border: 1.5px solid var(--line); border-radius: 14px; box-shadow: inset 0 5px 0 #c9a24a, 0 18px 40px rgba(1, 34, 61, .14); padding-top: 5px; }
@media (min-width: 1024px) {
  #calendar-link .wlgrid { grid-template-columns: minmax(0, 1fr) 640px !important; }
  .wkfig .wkpanel { position: absolute; left: -38%; right: auto; bottom: -4%; width: 92%; margin: 0; z-index: 3; }
}
/* 15. Works with, Option A: 12 logo-only rounded tiles, two rows of six. */
#calendar-link .wwtiles.ww12 { display: grid; grid-template-columns: repeat(6, 64px); gap: 12px; max-width: none; }
#calendar-link .wwtiles.ww12 li { width: 64px; height: 64px; padding: 0; display: grid; place-items: center; background: #fff; border: 1.5px solid var(--line); border-radius: 16px; box-shadow: none; }
#calendar-link .wwtiles.ww12 li img { width: 40px; height: 40px; object-fit: contain; border-radius: 9px; display: block; }
#calendar-link .wwread { margin-top: 14px; font-size: 14px; color: var(--slate); }
@media (max-width: 480px) { #calendar-link .wwtiles.ww12 { grid-template-columns: repeat(4, 64px); } }
@media (min-width: 1024px) {
  #keywords .kwfig .kwlap { margin: 0 !important; }
  .hband .convfig .vqcard { left: -56px; top: 14%; width: 210px; }
}
/* Round 2 fixes: the tool icon in the card at its own size; the week callout to the right of the laptop; a bigger calendar phone. */
.tcard .tchead { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font: 800 15px/1.2 Montserrat, sans-serif; color: var(--navy); }
.tcard .tchead svg { width: 20px; height: 20px; flex: none; }
.tcard .tcwhy { margin: 0; }
.tcard { font-weight: 600; }
.wkpanel { box-shadow: 0 18px 40px rgba(1, 34, 61, .16) !important; border: 0 !important; padding: 0 !important; background: transparent !important; border-radius: 14px; }
@media (min-width: 1024px) {
  #calendar-link .wlgrid { grid-template-columns: minmax(0, 1fr) 880px !important; }
  .wkfig { width: 880px; }
  .wkfig .lapv33 { width: 640px !important; }
  .wkfig .wkpanel { left: 600px; right: auto; top: 6%; bottom: auto; width: 280px; }
  .wkfig .srcnote2 { width: 640px; }
  #calendar .calpair .pphone2 { width: 210px; }
}
@media (min-width: 1024px) {
  #calendar-link .wlgrid { grid-template-columns: minmax(0, 1fr) 640px !important; }
  .wkfig { width: 640px; }
  .wkfig .wkpanel { left: auto; right: -96px; top: 34%; width: 270px; }
  .wkfig .srcnote2 { width: 640px; }
}
@media (min-width: 1024px) and (max-width: 1299px) { .wkfig .wkpanel { right: -20px; } }
/* The drag chip and patch keep their own small size (the screen's own img rule made them fill the screen). */
.lapx .lfscreen .dragdemo img.dchip { width: 8.0% !important; height: 19.75% !important; object-fit: cover; }

/* FINAL REVIEW 1, rule 1 on How it works: the laptops fill the wider device column (the 640px cap is gone), all the same size. */
@media (min-width: 1200px) {
  .hband .wlgrid { grid-template-columns: minmax(380px, 1fr) minmax(0, 1.75fr) !important; column-gap: 72px; }
  .hband .wlgrid.flip, #keywords .wlgrid.flip, #calendar .wlgrid.flip { grid-template-columns: minmax(0, 1.75fr) minmax(380px, 1fr) !important; }
  #calendar-link .wlgrid, #part-results .wlgrid { grid-template-columns: minmax(380px, 1fr) minmax(0, 1.75fr) !important; }
  .hband .lgfig .lapv33, .hband .convfig .lapv33, .hband .calpair > .lapv33, .hband .pair > .lapv33, #keywords .kwfig .kwlap .lapv33, .wkfig .lapv33 { width: 100% !important; max-width: none !important; margin: 0 !important; }
  .hband .convfig .lapv33 { width: 80% !important; margin-left: 20% !important; }
  .hband .convfig .vqcard { left: 0; top: 14%; width: 30%; max-width: 280px; }
  #keywords .kwfig .kwlap { width: 74%; }
  #keywords .kwpanel { right: 0; top: 6%; width: 29%; }
  #calendar .calpair, #part-results .pair, .wkfig { width: 100%; }
  #calendar .calpair > .lapv33, #part-results .pair > .lapv33 { width: 80% !important; }
  #calendar .calpair .pphone2, #part-results .pair .pphone { width: 22%; right: 0; left: auto; }
  .wkfig .lapv33 { width: 80% !important; }
  .wkfig .wkpanel { right: 0; left: auto; top: 30%; width: 32%; }
  .wkfig .srcnote2 { width: 80%; }
  .cardfig .shotwrap { max-width: 860px; }
}
/* Every laptop the same size as the others in its column (callouts and phones overlap its edge instead of shrinking it). */
@media (min-width: 1200px) {
  .hpart .hsec .lgfig .lapv33, .hband .lgfig .lapv33 { max-width: none !important; }
  .hband .convfig .lapv33, #calendar .calpair > .lapv33, #part-results .pair > .lapv33, .wkfig .lapv33 { width: 100% !important; margin-left: 0 !important; }
  .hband .convfig .vqcard { left: -12%; top: 18%; width: 27%; }
  #keywords .kwfig .kwlap { width: 100%; }
  #keywords .kwpanel { right: -9%; top: 4%; width: 27%; }
  #calendar .calpair .pphone2, #part-results .pair .pphone { width: 19%; right: -7%; bottom: -4%; }
  .wkfig .wkpanel { right: -9%; top: 32%; width: 30%; }
  .wkfig .srcnote2 { width: 100%; }
}
@media (min-width: 1200px) {
  #calendar-link .wwtiles.ww12 { grid-template-columns: repeat(6, 52px); gap: 10px; }
  #calendar-link .wwtiles.ww12 li { width: 52px; height: 52px; border-radius: 13px; }
  #calendar-link .wwtiles.ww12 li img { width: 32px; height: 32px; }
  .hband .owinfig { display: block; position: relative; }
  .hband .owinfig .owins { position: absolute; left: 0; right: 0; bottom: calc(100% + 14px); }
  .hband .owinfig .owarrow { display: none; }
}
@media (min-width: 1200px) {
  #calendar-link .wwtiles.ww12 { grid-template-columns: repeat(6, 44px); gap: 8px; }
  #calendar-link .wwtiles.ww12 li { width: 44px; height: 44px; border-radius: 11px; }
  #calendar-link .wwtiles.ww12 li img { width: 28px; height: 28px; border-radius: 7px; }
  #calendar-link .wwk { margin-top: 18px; margin-bottom: 8px; }
  #calendar-link .wwread { margin-top: 8px; }
  #calendar-link .lgwords h2 { margin-bottom: 16px; }
}
@media (min-width: 1200px) { #tools .thint { margin-top: 10px; } #tools .tcard { margin-top: 14px; } }
@media (min-width: 1200px) {
  #part-create .hsecwrap { margin-top: 96px !important; }
  #keywords .kwfig .kwlap { width: 76%; }
  #keywords .kwfig .kwlap .lapv33 { width: 100% !important; }
  #keywords .kwpanel { right: 0; top: 2%; width: 27%; }
}
@media (min-width: 1200px) {
  .wkfig .wkpanel { right: -4%; }
  #calendar .calpair .pphone2, #part-results .pair .pphone { right: -4%; }
  #calendar .calpair .pphone2 { right: auto; left: -4%; }
}
@media (min-width: 1200px) { #calendar .calpair .pphone2 { left: auto; right: -7%; } }

/* 1 (batch 3). HOW IT WORKS CLOSING, two columns: words left, the phone right. */
.closer2 .cl2 { display: grid; gap: 56px; align-items: center; text-align: left; }
.closer2 .cltext h2, .closer2 .cltext .beforebtn, .closer2 .cltext .loophead, .closer2 .cltext .loopnote { text-align: left !important; margin-left: 0 !important; margin-right: 0 !important; white-space: normal !important; }
.closer2 .cltext .loop { margin-left: 0 !important; }
.closer2 .cltext hr { margin-left: 0; max-width: 560px; }
.clph { margin: 0 auto; width: 300px; position: relative; }
.clframe { position: relative; padding: 11px; background: #0b0d12; border-radius: 52px; box-shadow: 0 30px 60px rgba(0, 0, 0, .35); }
.clscr { border-radius: 42px; overflow: hidden; line-height: 0; }
.clscr img { width: 100%; height: auto; display: block; }
.clbeam { position: absolute; left: 11px; top: 11px; width: calc(100% - 22px); height: calc(100% - 22px); pointer-events: none; overflow: visible; }
.clicon { position: absolute; left: calc(11px + 238px); top: calc(11px + 218px); width: 150px; height: 150px; border-radius: 34px; background: #fff; box-shadow: 0 18px 40px rgba(0, 0, 0, .35); }
.clcap { margin: 26px 0 0; text-align: center; font: 700 18px/1.35 Montserrat, sans-serif; color: #fff; }
.clcap .g { color: var(--green-on-navy, #5fd39d); }
@media (min-width: 1024px) { .closer2 .cl2 { grid-template-columns: minmax(0, 1fr) 420px; column-gap: 96px; } .clph { margin: 0; } }
@media (max-width: 600px) { .clph { transform: scale(.85); transform-origin: top center; } .clicon { left: calc(11px + 200px); width: 120px; height: 120px; } }
.clicon { left: calc(11px + 252px); top: calc(11px + 184px); }
.clcap { width: 460px; margin-left: -80px; margin-right: -80px; }
@media (max-width: 600px) { .clcap { width: auto; margin-left: 0; margin-right: 0; } }

/* 2 (batch 3). It starts with a conversation: a narrower paragraph; the interview card sits off the screen (over the gap and the
   laptop's bezel only), so it never covers the app's sidebar. */
#part-know .lgwords .lede { max-width: 330px; }
#part-know .lgwords .lede .lbr2 { display: inline; }
@media (min-width: 1200px) {
  .hband .convfig .vqcard { left: -230px !important; top: 16% !important; width: 240px !important; max-width: none !important; }
  .hband .convfig .vqcard .baq, .hband .convfig .vqcard .baa { font-size: 12.5px; }
}
@media (min-width: 1200px) { #part-know .wlgrid .lgwords .lede { max-width: 420px !important; } }
/* 8 (batch 3). Tools: more room above "Click a tool..."; the card's words regular, the tool's name bold. */
#tools .thint { margin-top: 28px !important; }
#tools .tcard { font-weight: 400 !important; }
#tools .tcard .tcwhy { font-weight: 400; }
#tools .tcard .tchead { font-weight: 800; }

/* 9 (batch 3). Calendar link: the whole group (words, laptop, callout) pulled in; logos in three rows of four, about 100px. */
@media (min-width: 1200px) {
  #part-plan .wlgrid { max-width: 1480px; margin-left: auto; margin-right: auto; }
  #calendar-link .wwtiles.ww12 { grid-template-columns: repeat(4, 96px) !important; gap: 12px !important; }
  #calendar-link .wwtiles.ww12 li { width: 96px !important; height: 96px !important; border-radius: 20px !important; }
  #calendar-link .wwtiles.ww12 li img { width: 56px !important; height: 56px !important; border-radius: 12px !important; }
  .wkfig .wkpanel { right: -4% !important; }
}
/* 10. Posting calendar: more room between the phone and the words. */
@media (min-width: 1200px) { #calendar .wlgrid.flip { column-gap: 140px !important; } }
/* 11. Analytics: more room at the top. 12. Event idea: caption centred. */
#part-results .hsecwrap { margin-top: 64px !important; }
#beyond .srcnote2, .hband .srcnote2 { text-align: center !important; }
/* 5, 7. Built to be found and the vendor team: centred on the laptop screen. */
@media (min-width: 1200px) { #keywords .wlgrid, #vendors .wlgrid { align-items: center !important; } }
/* 10. The drag now moves Tuesday's Google post to Thursday. */
.dragdemo .dpatch, .dragdemo .dchip { left: 50.6% !important; top: 73.0% !important; width: 7.9% !important; height: 19.3% !important; }
.lapx .lfscreen .dragdemo img.dchip { width: 7.9% !important; height: 19.3% !important; }
.dragdemo .dcur { left: 54% !important; top: 80% !important; }
@keyframes dchip2 { 0%, 15% { opacity: 0; transform: none; } 20% { opacity: 1; transform: translate(0, -2%) scale(1.04); } 80% { opacity: 1; transform: translate(246%, 0) scale(1.04); } 92%, 100% { opacity: 1; transform: translate(246%, 0) scale(1); box-shadow: none; } }
@keyframes dcur2 { 0% { opacity: 0; } 10% { opacity: 1; transform: none; } 20% { transform: translate(0, -2%); } 80% { transform: translate(750%, 0); opacity: 1; } 100% { transform: translate(750%, 0); opacity: 0; } }
.dragdemo.run .dchip { animation-name: dchip2 !important; }
.dragdemo.run .dcur { animation-name: dcur2 !important; }
@media (min-width: 1200px) {
  #calendar-link .wwtiles.ww12 { grid-template-columns: repeat(4, 72px) !important; gap: 10px !important; }
  #calendar-link .wwtiles.ww12 li { width: 72px !important; height: 72px !important; border-radius: 16px !important; }
  #calendar-link .wwtiles.ww12 li img { width: 44px !important; height: 44px !important; }
}
/* Calendar link, final (Nov 1): the paragraph in four lines at 1440 and up. */
@media (min-width: 1200px) { #calendar-link .lgwords { max-width: 540px; } #calendar-link .lgwords .lede { max-width: 540px !important; } }
/* Calendar link, 24 tiles (works-with-24-v2.png): a wider words column, six 72px tiles a row, four rows. */
@media (min-width: 1200px) {
  #calendar-link .wlgrid { grid-template-columns: minmax(500px, 0.9fr) minmax(0, 1.6fr) !important; column-gap: 56px !important; align-items: center !important; }
  #calendar-link .lgwords { max-width: 520px !important; }
  #calendar-link .lgwords .lede { max-width: 500px !important; }
  #calendar-link .wwtiles.ww12 { grid-template-columns: repeat(6, 72px) !important; gap: 10px !important; }
  #calendar-link .wwtiles.ww12 li { width: 72px !important; height: 72px !important; border-radius: 16px !important; }
  #calendar-link .wwtiles.ww12 li img { width: 42px !important; height: 42px !important; border-radius: 10px !important; }
}

/* B5 (Kelly, Nov 1 evening): each part's gold label sits left-aligned directly above its headline. */
.lgwords .partk { text-align: left; margin: 0 0 14px; }

/* B6 (Kelly, Nov 1 evening; closing-phone-mock-v10b-full.png): the box sits just outside the phone, beside it, covering no icon;
   the beam runs from the box's bottom-left corner to the right edge of the phone's Wedding CMO icon (polygon in the page). */
.clicon { left: 296px; top: 264px; width: 136px; height: 136px; border-radius: 30px; }
@media (max-width: 600px) {
  .clph { transform: scale(.85); transform-origin: top left; margin-left: 10px; }
  .clicon { left: 296px; top: 264px; width: 136px; height: 136px; }
}

/* LinkedIn ships Dec 11 (Kelly, Nov 1, 2026): the LinkedIn Post Creator is the fifth tool. Its card edge is LinkedIn's blue; five tabs fit the screen's bar. */
.tcard[data-tone="linkedin"] { --tc: #0a66c2; }
.ttabbar { gap: .8%; }
.ttab2 { padding: 6px 10px; }
/* Five tabs, each label on one line (Nov 1, 2026): the bar is about 614px wide at 1440. */
#tools .ttab2 { white-space: nowrap; flex: 0 1 auto; font-size: clamp(9px, .83vw, 14px) !important; gap: 5px; padding: 6px 9px; }
#tools .ttab2 svg { width: 14px; height: 14px; }
/* On a phone the five tabs are their marks alone (the names stay for screen readers); the card under the laptop names the tool. */
@media (max-width: 600px) { #tools .ttabbar { justify-content: space-between; } #tools .ttab2 { padding: 7px 10px; } #tools .ttab2 .tl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
/* Nov 2 (Kelly): the interview card back on the LEFT, over the laptop's left bezel only: never over the words, never over the
   app's sidebar; centred on the laptop screen's height. */
@media (min-width: 1200px) {
  .hband .convfig .vqcard { left: -150px !important; right: auto !important; top: 50% !important; transform: translateY(-58%); width: 228px !important; }
  #part-know .wlgrid .lgwords .lede { max-width: 360px !important; }
}
@media (min-width: 1200px) and (max-width: 1599px) { #part-know .wlgrid .lgwords .lede { max-width: 330px !important; } }
@media (min-width: 1600px) { .hband .convfig .vqcard { left: -112px !important; width: 236px !important; } }
@media (min-width: 1200px) and (max-width: 1599px) { #part-know .lgwords .lede .lbr2 { display: none !important; } }
/* Nov 2 (Kelly): One wedding in, 20 pieces out, laid out like the homepage: the Add a wedding card, the arrow and the laptop in
   three columns with equal gaps; no floating chips. */
.ow3fig .owadd { display: block; width: 100%; max-width: 340px; height: auto; margin: 0 auto 20px; border-radius: 18px; box-shadow: 0 22px 50px rgba(1, 34, 61, .14); }
.ow3fig .owarrow { display: none; }
@media (min-width: 1024px) {
  .hband .ow3fig { display: grid !important; grid-template-columns: 30% 36px minmax(0, 1fr); column-gap: 22px; align-items: center; padding-top: 0 !important; }
  .hband .ow3fig .owadd { max-width: none; margin: 0; }
  .hband .ow3fig .owarrow { display: grid; place-items: center; position: static !important; transform: none !important; margin: 0 !important; }
  .hband .ow3fig .owarrow svg { width: 36px; height: 36px; fill: none; stroke: #c9a24a; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transform: none; }
  .hband .ow3fig .owlapc .lapv33 { width: 100% !important; max-width: none !important; margin: 0 !important; }
  .hband .ow3fig .srcnote2 { grid-column: 3; }
}
.hband .ow3fig, .ow3fig { display: grid !important; grid-template-columns: minmax(0, 1fr); position: static !important; }
.ow3fig .owlapc { width: 100%; min-width: 0; }
.ow3fig .owlapc .lapv33 { width: 100% !important; max-width: 640px !important; margin: 0 auto !important; }
@media (min-width: 1024px) {
  .hband .ow3fig { grid-template-columns: 30% 36px minmax(0, 1fr) !important; }
  .hband .ow3fig .owlapc .lapv33 { max-width: none !important; }
}
@media (min-width: 1200px) {
  #one-wedding .wlgrid { grid-template-columns: 340px minmax(0, 1fr) !important; column-gap: 56px !important; max-width: 1480px; margin-left: auto; margin-right: auto; }
  .hband .ow3fig { grid-template-columns: 27% 36px minmax(0, 1fr) !important; column-gap: 24px !important; }
}
.hband .ow3fig .srcnote2 { position: static !important; transform: none !important; margin: 12px 0 0 !important; text-align: center !important; }
@media (min-width: 1024px) { .hband .ow3fig .srcnote2 { grid-column: 3 !important; } #part-create .hsecwrap { margin-top: 40px !important; } }
.wkring { border-width: 2px !important; }
/* Nov 2: each section's FAQ answer, one small link under its paragraph. */
.faqlink { margin: 16px 0 0; font: 600 15px/1.4 Montserrat, sans-serif; }
.faqlink a { color: var(--green-deep, #0a7a4f); text-decoration: none; }
.faqlink a:hover, .faqlink a:focus-visible { text-decoration: underline; }

/* Kelly's Nov 2 11:00 review, item 3: these headline halves stay on one line on a laptop or wider. */
@media (min-width: 1280px) {
  .nwd { white-space: nowrap; }
  /* The words column grows to the one-line half; the picture gives up the difference. */
  html body #main section .wlgrid.hsec:has(.nwd):not(.flip) { grid-template-columns: minmax(min-content, 440px) minmax(0, 720px) !important; }
  html body #main section .wlgrid.hsec.flip:has(.nwd) { grid-template-columns: minmax(0, 720px) minmax(min-content, 420px) !important; }
}
@media (min-width: 1600px) {
  html body #main section .wlgrid.hsec:has(.nwd):not(.flip) { grid-template-columns: minmax(min-content, 460px) minmax(0, 820px) !important; }
  html body #main section .wlgrid.hsec.flip:has(.nwd) { grid-template-columns: minmax(0, 820px) minmax(min-content, 460px) !important; }
}

@media (min-width: 1280px) {
  html body #main #part-plan .wlgrid.hsec:has(.nwd) { grid-template-columns: minmax(min-content, 440px) minmax(0, 720px) !important; }
}

/* Kelly's Nov 2 11:00 review, item 6: the Works with tiles about 22% smaller, six to a row on a laptop. */
html body #main #calendar-link .wwtiles.ww12 { gap: 9px !important; }
html body #main #calendar-link .wwtiles.ww12 li { width: 50px !important; height: 50px !important; border-radius: 12px !important; }
html body #main #calendar-link .wwtiles.ww12 li img { width: 31px !important; height: 31px !important; border-radius: 7px !important; }
html body #main #calendar-link .wwtiles.ww12 { grid-template-columns: repeat(4, 50px) !important; }
@media (min-width: 1024px) {
  html body #main #calendar-link .wwtiles.ww12 { grid-template-columns: repeat(6, 56px) !important; gap: 8px !important; }
  html body #main #calendar-link .wwtiles.ww12 li { width: 56px !important; height: 56px !important; border-radius: 13px !important; }
  html body #main #calendar-link .wwtiles.ww12 li img { width: 33px !important; height: 33px !important; border-radius: 8px !important; }
}