/* v34 round 1 (Oct 30, 2026; fix list items 67 to 96). Loaded last on Home and How it works. */

/* ---------- Hero (#67, #68) ---------- */
.hero h1 { line-height: 1.05; }
.hero h1 .h1b { margin-top: 0; }
.hero .lede2 b { color: var(--navy); font-weight: 700; }
/* The phone at real scale: about 70% of the laptop SCREEN's height (#67). Laptop 86% of the figure, the phone over its lower right
   by a quarter of the phone's width. Same rule for every laptop and phone pair. */
.pair > .lapv33 { width: 86% !important; }
.pair .pphone { width: 17.3%; left: calc(86% - 4.3%); }

/* ---------- Voice (#74, #91, #92) ---------- */
#example-brand-guide h2 i { font-style: italic; }
.vblock { margin-top: 48px; }
@media (min-width: 1024px) {
  .vlaptop .lapv33 { width: 100%; }
}
.vqcard .bar { display: flex; align-items: center; gap: 10px; }
.vqcard .bar .vmic { margin-left: auto; position: relative; width: 32px; height: 32px; border-radius: 50%; background: var(--green); display: grid; place-items: center; flex: none; }
.vqcard .bar .vmic svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; position: relative; z-index: 1; }
.vqcard .bar .vmic::before, .vqcard .bar .vmic::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--green); opacity: 0; }
.vqcard.typing .bar .vmic::before { animation: vring 1.6s ease-out infinite; }
.vqcard.typing .bar .vmic::after { animation: vring 1.6s ease-out .8s infinite; }
@keyframes vring { 0% { transform: scale(1); opacity: .35; } 100% { transform: scale(2.1); opacity: 0; } }
.vlaptop .lfscreen { position: absolute; }
.vglow { position: absolute; left: var(--gx, 48.06%); top: var(--gy, 47.56%); width: var(--gw, 5.49%); height: var(--gh, 5.56%); border-radius: 6px; box-shadow: 0 0 0 2px #01a263, 0 0 14px 4px rgba(1, 162, 99, .45); opacity: 0; pointer-events: none; transition: opacity .6s ease; }
.vglow.on { opacity: 1; }
.vcap { margin: 16px 0 0; font: 500 12px/1.45 Montserrat, sans-serif; color: var(--slate); text-align: center; }
@media (min-width: 1024px) { .vcap { grid-column: 1 / -1; } }
.vboxes { margin-top: 48px; }
.vboxes .vbox p { font-size: 16px; }
.vboxes .vbox { padding: 26px 24px; display: flex; flex-direction: column; }
.vboxes .vbox a.seecard { margin-top: 20px; padding: 14px 16px; border: 1.5px solid var(--line); border-left: 4px solid var(--gold); border-radius: 12px; align-self: stretch; display: flex; }
.vboxes .vbox a.seecard .gtx b { font-size: 15px; }
.vboxes .vbox a.seecard .gtx span { font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .vqcard.typing .bar .vmic::before, .vqcard.typing .bar .vmic::after { animation: none; } .vglow { transition: none; } }

/* ---------- What makes it different (#76, #77): only "See it" opens the pop-up ---------- */
.diffpopgrid li.dfi { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 14px; row-gap: 6px; align-items: center; padding: 20px 22px 16px; border: 1.5px solid var(--line); border-radius: 14px; background: #fff; font: 600 16px/1.4 Montserrat, sans-serif; color: var(--navy); }
.diffpopgrid li.dfi::before { display: block; content: ""; grid-row: 1; width: 30px; height: 30px; border-radius: 50%; background: #01a263 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 16px no-repeat; }
.diffpopgrid li.dfi .diffbtn { all: unset; grid-column: 2; justify-self: end; cursor: pointer; font: 700 13px/1 Montserrat, sans-serif; color: var(--green-text); padding: 6px 0; border-radius: 6px; }
.diffpopgrid li.dfi .diffbtn:hover { text-decoration: underline; text-underline-offset: 3px; }
.diffpopgrid li.dfi .diffbtn:focus-visible { outline: 2px solid var(--green-text); outline-offset: 3px; }
.costcells .us { background: #fff; border-color: var(--line); border-top: 4px solid var(--green); }
.costcells .us b { color: var(--green-text); }

/* ---------- Founder (#79) ---------- */
#about h2 .g { display: block; }
@media (min-width: 900px) { #about.founderbig .founder > div { max-width: 680px; } #about .lede { max-width: none; } }
#about .stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 16px; }
#about .stats > div:nth-child(2) { text-align: center; }
#about .stats > div:nth-child(3) { text-align: right; }

/* ---------- Pricing (#80) and closing (#81, #82) ---------- */
.closer .afterbtn { margin: 16px auto 0; max-width: 560px; font: 500 15px/1.55 Montserrat, sans-serif; color: #c9d3df; text-wrap: balance; }

/* ---------- How it works: header and the six steps (#85, #86, #86b) ---------- */
.hsteps { list-style: none; margin: 72px auto 0; padding: 0; max-width: 1200px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.hsteps li { position: relative; }
.hsteps li + li::before { content: ""; position: absolute; top: 38px; left: calc(-50% + 50px); right: calc(50% + 50px); border-top: 2px dashed #c9a24a; }
.hsteps a { display: grid; justify-items: center; gap: 0; text-decoration: none; color: var(--navy); padding: 0 6px; border-radius: 14px; }
.hsteps a:focus-visible { outline: 2px solid var(--green-text); outline-offset: 4px; }
.hsteps .hsc { width: 76px; height: 76px; border-radius: 50%; background: var(--green); display: grid; place-items: center; transition: transform .15s ease; }
.hsteps a:hover .hsc { transform: translateY(-2px); }
.hsteps .hsc svg { width: 28px; height: 28px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hsteps .hsn { margin-top: 16px; font: 700 12px/1.2 Montserrat, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #8a6d24; }
.hsteps .hsl { margin-top: 8px; font: 700 17px/1.3 Montserrat, sans-serif; text-align: center; text-wrap: balance; }
@media (max-width: 899px) {
  .hsteps { grid-template-columns: minmax(0, 1fr); max-width: 340px; gap: 28px; margin-top: 56px; }
  .hsteps li + li::before { top: auto; bottom: calc(100% + 0px); left: 38px; right: auto; height: 28px; border-top: 0; border-left: 2px dashed #c9a24a; }
  .hsteps a { grid-template-columns: 76px minmax(0, 1fr); justify-items: start; align-items: center; column-gap: 18px; text-align: left; }
  .hsteps .hsc { grid-row: 1 / 3; }
  .hsteps .hsn { margin-top: 0; align-self: end; }
  .hsteps .hsl { margin-top: 4px; text-align: left; align-self: start; }
}
@media (prefers-reduced-motion: reduce) { .hsteps .hsc { transition: none; } .hsteps a:hover .hsc { transform: none; } }

/* ---------- Search (#93 FINAL): gold outline on the screen's Keywords panel, the real panel enlarged below it ---------- */
#keywords .kwfig { position: relative; display: grid; gap: 0; }
#keywords .kwlap .lfscreen { position: absolute; }
#keywords .kwring { position: absolute; left: 67.6%; top: 12.3%; width: 31.7%; height: 44.4%; border: 2px solid #c9a24a; border-radius: 8px; pointer-events: none; }
#keywords .kwpanel { position: relative; z-index: 2; display: block; justify-self: end; width: 50%; height: auto; margin: -24% 0 0; background: #fff; border: 1.5px solid var(--line); border-top: 4px solid var(--green); border-radius: 12px; box-shadow: 0 18px 40px rgba(1, 34, 61, .16); }
#keywords .kwfig .srcnote2 { margin: 16px 0 0; justify-self: center; }
@media (max-width: 1023px) { #keywords .kwpanel { width: 70%; margin-top: -18%; } }
@media (max-width: 599px) { #keywords .kwpanel { width: 100%; margin-top: 16px; } }

/* ---------- Calendar linking (#96, #96f): WORKS WITH as logo tiles ---------- */
#calendar-link .lede { margin-bottom: 0; }
#calendar-link .wwk { margin: 40px 0 14px; }
#calendar-link .wwtiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 96px); gap: 14px; }
#calendar-link .wwtiles li { width: 96px; height: 92px; display: grid; grid-template-rows: 1fr auto; justify-items: center; align-items: center; padding: 14px 6px 10px; box-sizing: border-box; background: #fff; border: 1.5px solid #dcdbd5; border-radius: 16px; font: 600 11px/1.2 Montserrat, sans-serif; color: var(--navy); text-align: center; }
#calendar-link .wwtiles li.wwmore { grid-template-rows: 1fr; color: var(--slate); font: 600 13px/1.3 Montserrat, sans-serif; }
#calendar-link .wwtiles .wwlogo { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; }
#calendar-link .wwtiles .wwlogo.wwo { background: #0078d4; color: #fff; font: 800 17px/1 Montserrat, sans-serif; }
#calendar-link .wwtiles .wwlogo.wwa { background: #16181c; }
#calendar-link .wwtiles .wwlogo.wwimg { overflow: hidden; }
#calendar-link .wwtiles .wwlogo.wwimg img { display: block; width: 100%; height: 100%; object-fit: contain; }
#calendar-link .wwread { margin: 16px 0 0; font: 500 14px/1.5 Montserrat, sans-serif; color: var(--slate); }
@media (max-width: 420px) { #calendar-link .wwtiles { grid-template-columns: repeat(2, 96px); } }

/* founder stats on phones (Oct 30): the longer third label fits */
@media (max-width: 520px) { #about .stats { gap: 0 12px; } #about .stats b { font-size: 24px; } #about .stats span { font-size: 12px; } }

/* THE PHONE'S CAMERA IS THE iPHONE'S PILL (Dynamic Island), not a round dot (Kelly, Oct 31, 2026). In the phone's own container
   units, so it scales with every phone on the site. */
.phone .punch { top: 3cqw; width: 30cqw; height: 8.8cqw; margin-left: -15cqw; border-radius: 999px; }