/* Desktop Paka (/desktop-buddy) in the app's Ink & Paper, as the homepage: the hero on the floor, then flat bands
   of paper, floor, paper and the yellow tint (site.css's .band); the site's plain cards, flat. */

/* ---- the hero, on the floor ---- */
.buddy-hero .split { max-width: 1160px; margin: 0 auto; gap: clamp(28px, 5vw, 76px); }
.buddy-hero h1 { margin: 0 0 20px; font-size: clamp(40px, 2.6vw + 24px, 60px); line-height: 1.12; }
.buddy-hero .lead { max-width: 32em; }
.buddy-hero .note { margin: 16px 0 0; font-size: 15px; font-weight: 700; color: var(--ink2); }
.buddy-video { width: 100%; max-width: 640px; }
.buddy-video .embed-video { aspect-ratio: 16 / 9; overflow: hidden; border: 1.5px solid var(--ink2); border-radius: 16px; background: var(--paper); }
/* on phones, the phone promo: a Short, standing up */
.buddy-video.short { max-width: 300px; margin: 0 auto; }
.buddy-video.short .embed-video { aspect-ratio: 9 / 16; }

/* ---- the bands ---- */
main.buddy + .site-footer { margin-top: 0; } /* the yellow band runs into the footer */
.buddy .band .section-title { font-size: clamp(30px, 1.5vw + 22px, 44px); line-height: 1.15; }
/* every card in a tint (set in the page), so none is white on a white band */
.buddy :is(.shot, .paka, .step, .faq > div) { border: 1.5px solid var(--ink2); border-radius: 16px; }

/* what it does: the three shots */
.buddy .shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; max-width: 1080px; margin: 44px auto 0; }
.buddy .shot { padding: 12px 12px 18px; text-align: left; }
.buddy .shot img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }
.buddy .shot h3 { margin: 14px 4px 4px; font-size: 21px; line-height: 1.2; }
.buddy .shot p { margin: 0 4px; font-size: 16px; line-height: 1.45; color: var(--ink2); }

/* pick your Paka: tinted cards, each quote in the app's ink speech bubble, its tail pointing down at the Paka */
.buddy .meet { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; max-width: 1080px; margin: 44px auto 0; }
.buddy .paka { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 22px 20px 24px; }
.buddy .paka .say { position: relative; align-self: stretch; margin: 0 0 14px; padding: 12px 16px 14px; border: 2px solid var(--ink); border-radius: 16px; background: var(--paper); font: 700 17px/1.3 var(--voice); text-align: left; }
.buddy .paka .say::after, .buddy .paka .say::before { content: ""; position: absolute; left: 50%; top: 100%; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.buddy .paka .say::after { width: 14.78px; height: 9.5px; margin: 1.5px 0 0 -7.39px; background: var(--ink); }
.buddy .paka .say::before { z-index: 1; width: 12.82px; height: 8.24px; margin: -0.5px 0 0 -6.41px; background: var(--paper); }
.buddy .paka img { width: auto; height: 150px; margin-top: 4px; }
.buddy .paka h3 { margin: 0; font-size: 24px; }
.buddy .paka p:last-child { margin: 0; color: var(--ink2); }

/* set up: the two ways, their steps' numbers in round tags (as the homepage's), then the questions */
.buddy .setup { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; max-width: 980px; margin: 44px auto 0; text-align: left; }
.buddy .step { padding: 22px 26px 26px; }
.buddy .step h3 { margin: 0 0 14px; font-size: 24px; }
.buddy .step ol { margin: 0; padding: 0; list-style: none; counter-reset: step; font-size: 17px; }
.buddy .step li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start; margin: 10px 0; counter-increment: step; }
.buddy .step li::before { content: counter(step); display: grid; place-items: center; width: 30px; height: 30px; border: 2px solid var(--ink); border-radius: 50%; background: var(--yellow); font: 700 16px/1 var(--voice); }
.buddy .step li { line-height: 1.45; }
.buddy .step .btn { margin-top: 16px; }
.buddy .faq { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 980px; margin: 28px auto 0; text-align: left; }
.buddy .faq > div { padding: 16px 22px 18px; }
.buddy .faq b { display: block; margin-bottom: 8px; font: 700 19px/1.25 var(--voice); }
.buddy .faq p { margin: 0; color: var(--ink2); }

/* on your phone too: the store buttons on the yellow tint */
.buddy .phone-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin-top: 26px; }
.buddy .phone-cta img { width: auto; height: 56px; }

/* Touch devices without a mouse (phones and tablets) see the box instead of the download buttons, here and in Set up */
.on-phone { display: none; }
@media (hover: none) and (pointer: coarse) {
  .buddy-hero .buttons, .setup .btn { display: none; }
  .on-phone { display: block; margin-top: 24px; padding: 18px 18px 20px; border: 1.5px solid var(--ink2); border-radius: 16px; background: var(--tint-yellow); }
  .on-phone h2 { margin: 0 0 6px; font-size: 22px; }
  .on-phone p { margin: 0; font-size: 16px; }
  .on-phone .addr { display: block; margin: 10px 0 16px; font: 700 24px/1.2 var(--voice); }
  .on-phone .btn { width: 100%; }
  .on-phone small { display: block; margin: 8px 2px 16px; font-size: 13px; color: var(--ink2); }
}

@media (max-width: 767px) {
  .buddy :is(.meet, .setup, .faq, .shots) { grid-template-columns: 1fr; }
  .buddy .shots { gap: 24px; max-width: 440px; }
}