/* HOW IT WORKS IN SIX CHAPTERS (mock, Nov 2, 2026; Kelly's brief items 12 to 20). Loaded last on How it works only.
   Chapter bands with a gold line, a green number and the chapter's name; a green tag above each section's headline; gray and
   white sections alternating from each band; six circles at the top; a chapter bar that sticks under the nav. */

/* ---------- The page top (the circle-O seams are gone; the band's gold line is the divider) ---------- */
html body #top.pagetop { padding-bottom: 72px; }
@media (min-width: 1024px) { html body #top.pagetop { padding-bottom: 96px; } }
html body #top .lede { max-width: 760px; }

/* ---------- Six circles at the top ---------- */
html body .hsteps.hparts6 { grid-template-columns: repeat(6, minmax(0, 1fr)); max-width: 1240px; column-gap: 0; }
html body .hsteps.hparts6 li + li::before { display: block; top: 37px; left: calc(-50% + 38px); right: calc(50% + 38px); bottom: auto; height: 0; border-top: 2px dashed #c9a24a; border-left: 0; }
html body .hsteps.hparts6 .hsl { white-space: normal; text-wrap: balance; max-width: 190px; }
@media (max-width: 1023px) {
  html body .hsteps.hparts6 .hsc { width: 64px; height: 64px; }
  html body .hsteps.hparts6 li + li::before { top: 31px; left: calc(-50% + 32px); right: calc(50% + 32px); }
  html body .hsteps.hparts6 .hsl { font-size: 15px; }
}
@media (max-width: 767px) {
  html body .hsteps.hparts6 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 380px; row-gap: 28px; column-gap: 0; margin-top: 48px; }
  html body .hsteps.hparts6 a { grid-template-columns: none; justify-items: center; text-align: center; padding: 0 2px; }
  html body .hsteps.hparts6 .hsc { grid-row: auto; }
  html body .hsteps.hparts6 .hsl { margin-top: 10px; text-align: center; align-self: start; font-size: 14px; }
  html body .hsteps.hparts6 li:nth-child(4)::before { display: none; }
}

/* ---------- Chapter heading: an icon in a green circle and the chapter's name, at the top of the chapter's first section ---------- */
.chead { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 64px; }
.chead .chic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #01a263; }
.chead .chic svg { width: 28px; height: 28px; fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
html body #main section.hband .chead h2.cbname { margin: 16px 0 0; font: 700 clamp(22px, calc(0.57vw + 19.8px), 28px)/1.2 Montserrat, sans-serif !important; letter-spacing: -.01em; color: #01223d; text-transform: none; }
@media (max-width: 767px) { .chead { margin-bottom: 44px; } .chead .chic { width: 48px; height: 48px; } .chead .chic svg { width: 24px; height: 24px; } }

/* ---------- Sections: one rhythm, the stripes come from the page (soft = gray) ---------- */
html body #main .hband { padding: 96px 0; }
html body #main .hband .hsecwrap { margin-top: 0 !important; }
@media (max-width: 767px) { html body #main .hband { padding: 64px 0; } }

/* The green tag above each headline. White on #01A263 is 3.25:1, so it is green deep on the pale green tint (5.2:1). */
.ctag { display: inline-block; margin: 0 0 18px; padding: 0; background: none; color: #0a7a4f; font: 700 12px/1.3 Montserrat, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
html body #main .k { font-size: 12px; }

/* One headline size: about 48px at 1440, smaller to 1024, 32px on a phone. */
html body #main section.hband h2 { font-size: clamp(32px, calc(2.2vw + 16.3px), 48px) !important; line-height: 1.12 !important; }
/* One subline size, one body size. */
html body #main section.hband .lede { font-size: 17px !important; }
html body #main section.hband .faqin summary, html body #main section.hband .faqina p { font-size: 15px !important; }

/* Jumping to a band or a section lands under the nav and the chapter bar. */
html body #main :is(section, .hsecwrap, h2, .chead)[id] { scroll-margin-top: 40px; }

/* ---------- It starts with a conversation: words, the interview card, a gold arrow, the laptop (as on the homepage) ---------- */
.hk4 { display: grid; gap: 28px; }
.hk4 .lgwords .lede { max-width: none !important; }
html body #part-know .hk4 .lede br.lbr2 { display: none !important; }
.hk4 .vqcard { width: 100%; max-width: 420px; margin: 0 auto; }
.hk4 .varrow { display: none; }
.hk4lap { margin: 0; min-width: 0; }
.hk4lap .lapv33 { width: 100% !important; max-width: 780px !important; margin: 0 auto !important; }
.hk4lap .srcnote2 { text-align: center; }
@media (min-width: 1200px) {
  html body #main .wrap.hk4 { max-width: none; padding-left: 28px; padding-right: 28px; grid-template-columns: minmax(min-content, 400px) 40px 216px 12px 30px 12px calc(91.25vw - 614px); column-gap: 0; justify-content: center; align-items: center; }
  .hk4 .lgwords { grid-column: 1; } .hk4 .vqcard { grid-column: 3; } .hk4 .varrow { grid-column: 5; } .hk4lap { grid-column: 7; }
  .hk4 .vqcard { margin: 0; max-width: none; }
  .hk4 .vqcard .baq, .hk4 .vqcard .baa { font-size: 13px; line-height: 1.45; }
  .hk4 .varrow { display: grid; place-items: center; }
  .hk4 .varrow svg { width: 30px; height: 30px; transform: none; stroke-width: 2.2; }
  .hk4lap .lapv33 { max-width: none !important; }
}
@media (min-width: 1600px) {
  html body #main .wrap.hk4 { grid-template-columns: minmax(min-content, 420px) 56px 260px 20px 36px 20px min(870px, calc(58.9vw - 218px)); }
  .hk4 .varrow svg { width: 36px; height: 36px; }
}

/* At 48px each two-line headline keeps its own two lines from 1280 up, and its words column may grow to the longer line (the
   page's centred word and picture widths stay; the picture gives up the difference). */
@media (min-width: 1280px) {
  html body #main section.hband .lgwords h2:has(br) { white-space: nowrap; }
  html body #main section.hband:not(#calendar, #part-results) .wrap.wlgrid.hsec:not(.flip) { grid-template-columns: minmax(min-content, 420px) minmax(0, 720px) !important; }
  html body #main section.hband:not(#calendar, #part-results) .wrap.wlgrid.hsec.flip { grid-template-columns: minmax(0, 720px) minmax(min-content, 420px) !important; }
  html body #main section#part-plan.hband .wrap.wlgrid.hsec { grid-template-columns: minmax(min-content, 440px) minmax(0, 720px) !important; }
  html body #main section#part-create.hband .wrap.wlgrid.hsec.flip { grid-template-columns: minmax(0, 880px) minmax(min-content, 340px) !important; }
}
@media (min-width: 1600px) {
  html body #main section.hband:not(#calendar, #part-results) .wrap.wlgrid.hsec:not(.flip) { grid-template-columns: minmax(min-content, 460px) minmax(0, 820px) !important; }
  html body #main section.hband:not(#calendar, #part-results) .wrap.wlgrid.hsec.flip { grid-template-columns: minmax(0, 820px) minmax(min-content, 460px) !important; }
  html body #main section#part-plan.hband .wrap.wlgrid.hsec { grid-template-columns: minmax(min-content, 460px) minmax(0, 820px) !important; }
  html body #main section#part-create.hband .wrap.wlgrid.hsec.flip { grid-template-columns: minmax(0, 1000px) minmax(min-content, 360px) !important; }
}
/* 1024 to 1199: the analytics laptop and phone stay inside their column (they ran off the right edge before this mock too). */
@media (min-width: 1024px) and (max-width: 1199px) {
  html body #main #part-results .pair { width: 100% !important; }
  html body #main #part-results .pair > .lapv33 { width: 82% !important; }
  html body #main #part-results .pair .pphone { width: 20% !important; right: 0 !important; left: auto !important; }
}
@media (min-width: 600px) and (max-width: 1279px) { html body #main #learning .lede .nw { white-space: normal; } }
@media (max-width: 767px) { html body .hsteps.hparts6 .hsl { font-size: 13px; text-wrap: wrap; } }
/* On a phone the line break in "It keeps learning" is hidden, so a space stands in for it ("remember. Say yes"). */
@media (max-width: 599px) { html body #main #learning .lede.learnlede .nw::before { content: " "; } }

/* Round 2 (15:49): the Keywords callout ring is a thin light-gray stroke; the paste card has a gold left edge. */
html body #keywords .kwring { border: 1px solid #e6e9ed; border-radius: 10px; }
html body #vendors .pastebox.gold { box-shadow: none !important; border-left: 4px solid #c9a24a !important; }