/* v34 part two (Oct 29-30, 2026): the voice block (mock E4), the employee columns (mock 3), the pop-ups on "What makes it different",
   the phone pairing (#31), the tools tabs (#50/#52), the pocket phone and home-screen tile (#45), and the four devices (#41).
   Every laptop is images/laptop-frame-v33.png. Montserrat only, no italics. */

/* ---------- Voice (#24, mock E4) ---------- */
#example-brand-guide > .wrap:first-child { text-align: center; }
#example-brand-guide > .wrap:first-child .lede { margin-left: auto; margin-right: auto; }
.vblock { display: grid; gap: 20px; margin-top: 56px; align-items: center; }
.vqcard { padding: 0 22px 22px; overflow: hidden; border-top: 0; }
.vqcard .bar { margin: 0 -22px 16px; padding: 16px 22px 14px; border-top: 5px solid var(--green); }
.vqcard .baq, .vqcard .baa { font-size: 14px; }
.vperm { margin: 12px 0 0; font: 500 12px/1.45 Montserrat, sans-serif; color: var(--slate); }
.varrow { display: grid; place-items: center; }
.varrow svg { width: 40px; height: 40px; fill: none; stroke: #c9a24a; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transform: rotate(90deg); }
.vlaptop .lapv33 { margin: 0 auto; max-width: 780px; }
@media (min-width: 1024px) {
  /* Card over box 1 (less 72px), a 96px arrow column ending exactly at box 2's left edge, the laptop across boxes 2 and 3. */
  .vblock { gap: 0; grid-template-columns: calc((100% - 48px) / 3 - 72px) 96px calc((100% - 48px) * 2 / 3 + 24px); }
  .varrow svg { transform: none; }
  .vlaptop .lapv33 { width: 96%; max-width: none; }
}
.vboxes .vbox h3, .vboxes a.seecard .gtx b { font-size: 18px; line-height: 1.3; }
.vboxes a.seecard { align-self: stretch; margin-top: 0; padding: 28px 26px; gap: 16px; box-shadow: none; border-radius: 14px; }
.vboxes a.seecard .gtx { flex: 1; gap: 4px; }
.vboxes a.seecard .gtx span { font-size: 14px; }
.vboxes a.seecard .gprev { background: #eafaf2; }

/* ---------- Employee (#26, mock 3) ---------- */
.emp3 { position: relative; display: grid; gap: 40px; margin-top: 72px; }
.empcol { display: grid; justify-items: center; gap: 18px; }
.empic { position: relative; z-index: 1; width: 56px; height: 56px; border-radius: 50%; background: var(--green); display: grid; place-items: center; box-shadow: 0 0 0 14px var(--soft); }
.empic svg { width: 26px; height: 26px; }
.empcol h3 { font: 800 clamp(24px, 2.6vw, 30px)/1.15 Montserrat, sans-serif; color: var(--navy); margin: 0; letter-spacing: -.01em; }
.empcard { width: 100%; min-height: 220px; box-sizing: border-box; display: grid; align-content: center; justify-items: center; gap: 22px; padding: 36px 28px; background: #fff; border: 1.5px solid var(--line); border-left: 5px solid var(--gold); border-radius: 14px; text-align: center; }
.empcard p { margin: 0; font: 700 16px/1.55 Montserrat, sans-serif; color: var(--navy); max-width: 320px; }
.empcard p b { font-weight: 800; }
.empbtns, .empchips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ebtn { font: 700 13px/1 Montserrat, sans-serif; padding: 10px 16px; border-radius: 999px; border: 1.5px solid var(--line); color: var(--navy); background: #fff; }
.ebtn.g { background: var(--green); border-color: var(--green); color: #fff; }
.empchips span { font: 700 13px/1 Montserrat, sans-serif; padding: 9px 12px; border-radius: 8px; border: 1.5px solid var(--navy); color: var(--navy); background: #fff; }
@media (min-width: 900px) {
  .emp3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
  .emp3::before { content: ""; position: absolute; top: 27px; left: calc(100% / 6); right: calc(100% / 6); border-top: 2px dashed var(--gold); }
}

/* ---------- What makes it different: pop-ups (#60) ---------- */
.diffpopgrid li { padding: 0; display: block; }
.diffpopgrid li::before { display: none; }
.diffbtn { all: unset; box-sizing: border-box; width: 100%; height: 100%; 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; cursor: pointer; font: 600 16px/1.4 Montserrat, sans-serif; color: var(--navy); transition: border-color .15s ease; }
.diffpopgrid li { border: 0; background: none; }
.diffbtn::before { 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; }
.diffbtn:hover { border-color: var(--green); }
.diffbtn:focus-visible { outline: 2px solid var(--green-text); outline-offset: 3px; }
.diffbtn .seeit { grid-column: 2; justify-self: end; font: 700 13px/1 Montserrat, sans-serif; color: var(--green-text); }
dialog.diffpop { width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 48px); box-sizing: border-box; padding: 30px 30px 26px; border: 0; border-top: 6px solid var(--green); border-radius: 18px; box-shadow: 0 26px 64px rgba(1, 34, 61, .25); text-align: left; overflow: auto; }
dialog.diffpop::backdrop { background: rgba(1, 34, 61, .45); }
.diffpop .dpx { position: absolute; top: 12px; right: 14px; width: 40px; height: 40px; border: 0; background: none; font: 400 28px/1 Montserrat, sans-serif; color: var(--slate); cursor: pointer; border-radius: 50%; }
.diffpop .dpx:hover { background: var(--soft); }
.diffpop .dpk { margin: 0 0 6px; }
.diffpop .dpt { margin: 0 40px 18px 0; font: 700 21px/1.3 Montserrat, sans-serif; color: var(--navy); }
.diffpop .dpshot { border: 1.5px solid var(--line); border-radius: 12px; overflow: hidden; background: #fafbfc; }
.diffpop .dpshot img { display: block; width: 100%; height: auto; }
.diffpop .dpline { margin: 16px 0 0; font: 500 16px/1.55 Montserrat, sans-serif; color: var(--body); }

/* ---------- Phone pairing (#31): one baseline, the phone in front over the laptop's lower right by a quarter of its width,
   about 40% of the laptop's height. The laptop is 88% of the figure. ---------- */
.pair { position: relative; width: 100%; }
.pair > .lapv33 { width: 88% !important; max-width: none !important; margin: 0 !important; }
.pair .pphone { position: absolute; bottom: 0; width: 11.3%; max-width: none; left: calc(88% - 2.8%); z-index: 2; filter: drop-shadow(0 12px 22px rgba(1, 34, 61, .22)); }
.pair .pphone .screen img { display: block; width: 100%; flex: 1; min-height: 0; object-fit: cover; object-position: top; }
@media (max-width: 767px) {
  .pair > .lapv33 { width: 100% !important; }
  .pair .pphone { display: none; }
  .pair.heropair > .lapv33 { display: none; }
  .pair.heropair .pphone { display: block; position: static; width: 270px; max-width: 72vw; margin: 0 auto; }
}
.hero .wlgrid { align-items: center; }
.hero .herocap { margin: 16px 0 0; font: 500 12px/1.45 Montserrat, sans-serif; color: var(--slate); }

/* ---------- Tools tabs (#50/#52) ---------- */
.ttabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 32px; }
.ttab { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; font: 700 15px/1.25 Montserrat, sans-serif; color: var(--navy); }
.ttab svg { width: 26px; height: 26px; flex: none; }
.ttab .ttl { flex: 1; }
.ttab .ts { font: 700 12px/1 Montserrat, sans-serif; color: var(--green-text); }
.ttab .ta { color: var(--slate); font-weight: 600; }
.ttab:hover { border-color: var(--green); }
.ttab:focus-visible { outline: 2px solid var(--green-text); outline-offset: 3px; }
.ttab[aria-selected="true"] { border-color: var(--green); background: #eafaf2; }
.thint { margin: 14px 0 0; font: 500 14px/1.5 Montserrat, sans-serif; color: var(--slate); }
#tools .ttshot img { transition: opacity .2s ease; }
@media (min-width: 768px) and (max-width: 1023px) { .ttabs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .ttabs { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -16px; padding: 2px 16px 8px; }
  .ttab { flex: 0 0 auto; scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) { #tools .ttshot img { transition: none; } }

/* ---------- Pocket (#45): the phone, and the home-screen tile ---------- */
.pocketrow { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 48px 72px; margin-top: 56px; }
.pocketrow .phone { width: 270px; max-width: 72vw; }
.pocketrow .phone .screen img { display: block; width: 100%; flex: 1; min-height: 0; object-fit: cover; object-position: top; }
.pocketrow figure { margin: 0; display: grid; justify-items: center; gap: 14px; }
.pocketrow figcaption { font: 500 13px/1.45 Montserrat, sans-serif; color: var(--slate); max-width: 270px; text-align: center; }
.phone .screen.homescr { background: linear-gradient(160deg, #dfe8f1 0%, #c9d8e6 45%, #e9e1d6 100%); display: block !important; padding: 18cqw 7cqw 0; }
.homescr .hgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7cqw 5cqw; }
.homescr .hi { min-width: 0; width: 100%; display: grid; justify-items: center; gap: 1.6cqw; }
.homescr .hi i { display: block; width: 100%; aspect-ratio: 1; border-radius: 22%; }
.homescr .hi b { display: block; height: 1.8cqw; width: 70%; border-radius: 2px; background: rgba(1, 34, 61, .22); }
.homescr .hi.us i { background: #fff url("/images/home-tile-v34.png") center / 100% no-repeat; box-shadow: 0 2px 6px rgba(1, 34, 61, .18); }
.homescr .hi.us span { justify-self: center; width: 0; display: flex; justify-content: center; overflow: visible; font: 600 3.1cqw/1.1 Montserrat, sans-serif; color: #16181c; white-space: nowrap; }
.homescr .dock { position: absolute; left: 4cqw; right: 4cqw; bottom: 4cqw; height: 22cqw; border-radius: 9cqw; background: rgba(255, 255, 255, .45); display: grid; grid-template-columns: repeat(4, 1fr); gap: 5cqw; padding: 4.5cqw 6cqw; box-sizing: border-box; }
.homescr .dock i { border-radius: 22%; }

/* ---------- Four devices (#41), our own drawn frames ---------- */
.devs { position: relative; width: 100%; max-width: 1080px; margin: 56px auto 0; aspect-ratio: 1080 / 600; }
.devs .dmon { position: absolute; left: 19%; top: 0; width: 58%; }
.devs .dmon .mscr { background: #0e1013; border-radius: 1.4% / 2.2%; padding: 1.6% 1.6% 4.2%; }
.devs .dmon .mscr img { display: block; width: 100%; aspect-ratio: 1680 / 1050; object-fit: cover; object-position: top left; border-radius: 2px; }
.devs .dmon .neck { width: 12%; height: 13cqw; margin: 0 auto; background: linear-gradient(90deg, #b9bec5, #e6e9ed 50%, #b9bec5); }
.devs .dmon .foot { width: 30%; height: 1.4cqw; margin: 0 auto; border-radius: 4px 4px 2px 2px; background: linear-gradient(180deg, #d7dbe0, #a8adb4); }
.devs { container-type: inline-size; }
.devs .dmon .neck { height: 7cqw; }
.devs .dlap { position: absolute; left: 0; bottom: 0; width: 44%; z-index: 2; }
.devs .dlap .lapv33 { max-width: none; }
.devs .dtab { position: absolute; right: 0; bottom: 0; width: 20%; z-index: 2; }
.devs .dtab .tb { background: #16181c; border-radius: 7% / 5%; padding: 5.2%; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.devs .dtab .tb img { display: block; width: 100%; aspect-ratio: 820 / 1180; object-fit: cover; object-position: top; border-radius: 3%; }
.devs .dph { position: absolute; left: 42%; bottom: 0; width: 10.5%; z-index: 3; }
.devs .dph.phone { max-width: none; }
.devs .dph .screen img { display: block; width: 100%; flex: 1; min-height: 0; object-fit: cover; object-position: top; }
.devs > * { filter: drop-shadow(0 14px 24px rgba(1, 34, 61, .14)); }
@media (max-width: 767px) { .devs { aspect-ratio: 1080 / 640; } }

/* Employee subline on one line where it fits (#26). */
@media (min-width: 1200px) { #employee > .wrap > .lede { max-width: none; white-space: nowrap; } }
.diffpop .dpshot img { max-height: 62vh; object-fit: contain; }
/* Two-line headlines stay two lines on a phone (#33): line 1 navy, line 2 green, no word alone. */
@media (max-width: 480px) { #devices h2, #employee h2 { font-size: 21px; } }
@media (max-width: 480px) { #employee h2 .g { display: block; } }
/* Link your calendar (#58/#59, Oct 29, 2026): the WORKS WITH grid, confirmed calendars only, small and clean. */
#calendar-link .wwk { margin: 32px 0 12px; }
#calendar-link .wwgrid { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
#calendar-link .wwgrid li { display: inline-flex; align-items: center; gap: 9px; padding: 8px 14px 8px 8px; background: #fff; border: 1.5px solid var(--line); border-radius: 12px; font: 600 14px/1.2 Montserrat, sans-serif; color: var(--navy); white-space: nowrap; }
#calendar-link .wwgrid li.wwmore { padding: 8px 14px; color: var(--slate); font-weight: 500; }
#calendar-link .wwmark { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; flex: none; }
#calendar-link .wwg { background: #fff; border: 1.5px solid var(--line); }
#calendar-link .wwo { background: #0078d4; color: #fff; font: 800 13px/1 Montserrat, sans-serif; }
#calendar-link .wwa { background: #000; }

/* v34 (Oct 30, 2026): the One wedding section to Kelly's mock v2. The words start level with the top of the laptop's screen
   (screen top 9.12% of the frame's height; the frame is 7/5 of the words column wide), the gold card lower with room above it. */
.owgrid { align-items: start; }
.owwords h2 { margin-bottom: 24px; }
.owchecks { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; font: 700 16px/1.35 Montserrat, sans-serif; color: var(--navy); }
.owchecks li { display: flex; align-items: center; gap: 12px; }
.owck { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; }
.owck svg { width: 14px; height: 14px; }
.owcard { margin-top: 56px; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 24px 24px 24px 22px; background: #fff; border: 1.5px solid var(--line); border-left: 5px solid var(--gold); border-radius: 14px; text-decoration: none; color: var(--navy); }
.owcard:hover .owgo, .owcard:focus-visible .owgo { text-decoration: underline; }
.owcard:focus-visible { outline: 2px solid var(--green-text); outline-offset: 3px; }
.owo { width: 40px; height: 44px; }
.owtxt { display: grid; gap: 4px; justify-items: start; }
.owtag { font: 700 11px/1 Montserrat, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #6f5414; background: #f7efda; padding: 5px 9px; border-radius: 999px; margin-bottom: 4px; }
.owtitle { font: 700 17px/1.35 Montserrat, sans-serif; color: var(--navy); }
.owline { font: 500 14px/1.45 Montserrat, sans-serif; color: var(--slate); }
.owgo { font: 700 15px/1.3 Montserrat, sans-serif; color: var(--green-text); white-space: nowrap; }
.owfig .srcnote2 { margin: 0; }
@media (min-width: 1024px) { .owwords { padding-top: 8.18%; } }
@media (max-width: 520px) {
  .owchecks { grid-template-columns: minmax(0, 1fr); }
  .owcard { grid-template-columns: 34px minmax(0, 1fr); padding: 20px 18px; }
  .owo { width: 34px; height: 38px; }
  .owgo { grid-column: 2; }
}
@media (min-width: 1024px) and (max-width: 1279px) { .owchecks { grid-template-columns: minmax(0, 1fr); } .owcard { grid-template-columns: 40px minmax(0, 1fr); } .owgo { grid-column: 2; } }