/* Product tour (SITE-28): the numbered tabs on the home page, right after How it works. The tidbits' own styles
   come from the product pages (tidbits.css, which brings Velo's). Layout mirrors the product pages' showcase. */
@import url("/assets/v2/product/tidbits.css");
@import url("/assets/v2/mascot/velo.css");

.tour__head { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
.tour__head > * { grid-column: 1; }
.tour__head .sec-head__lead { margin-top: 0; }
/* The frame's hairline closes the section, so a full section's padding under it read as an empty ruled strip between the
   rails (SITE-26 G3 advisory): half of it. */
.tour:has(> .wrap > .tour__frame:last-child) { padding-bottom: calc(var(--section-y) / 2); }
.tour__frame { margin-top: clamp(36px, 24px + 2vw, 56px); border-block: 1px solid var(--hairline); padding: 16px var(--inset) clamp(24px, 16px + 1.5vw, 40px); }
.tour__tabs { gap: clamp(20px, 12px + 1.5vw, 36px); }
.tour__tabs .tabs__list { margin-inline: -6px; }
.tour__panel { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: clamp(24px, 1rem + 3vw, 64px); align-items: center; }
.tour__copy { display: grid; justify-items: start; gap: 18px; }
.tour__chip { background: var(--tone-soft); border-color: transparent; color: var(--tone-ink); box-shadow: none; padding-left: 4px; }
.tour__chip .p-icon { width: 18px; height: 18px; border-radius: 5px; }
.tour__chip .p-icon svg { width: 10px; height: 10px; }
.tour__h { max-width: 14em; }
.tour__checks { display: grid; gap: 14px; margin-top: 6px; }
.tour__checks li { display: flex; align-items: center; gap: 12px; font-size: 16px; line-height: 1.4; color: var(--ink-80); }
.tour__checks i { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--tone-soft); color: var(--tone-ink); }
.tour__checks svg { width: 12px; height: 12px; }
.tour__link { margin-top: 8px; height: 44px; }
.tour__viz { position: relative; isolation: isolate; overflow: hidden; min-height: 440px; height: 100%; border-radius: var(--r-lg); background: var(--paper); box-shadow: inset 0 0 0 1px rgb(21 19 15 / .06); display: grid; place-items: center; }
.tour__viz::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(circle at center, rgb(21 19 15 / .11) .9px, transparent 1.3px); background-size: 22px 22px; background-position: center;
  -webkit-mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, #000 20%, transparent 100%); mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, #000 20%, transparent 100%); }
.tour__viz > .tb { min-height: 440px; }

/* Velo asleep on the Routines calendar (SITE-33 placement A): a perch over the day strip, headroom for his reactions. */
.tb-cal--velo { padding-top: calc(24px + 192px); }
.tb-cal__perch { position: relative; }
/* Two classes: velo.css (.velo { position: relative }) can load after this sheet (FAQ and footer load it when near), and
   a one-class rule would then lose and drop Velo into the perch, growing the tour 128 px under the reader (SITE-25, G3 CLS). */
.tb-cal__perch > .tb-cal__velo { position: absolute; z-index: 2; bottom: calc(100% - 1px); right: 24px; }

@media (max-width: 960px) {
  .tour__panel { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 24px; height: 100%; }   /* the well takes up any height the other tabs need: no dead space under a tab */
  .tour__viz { margin-inline: calc(-1 * var(--inset)); padding-inline: var(--inset); border-radius: 0; min-height: 400px; }
  .tour__frame { padding-bottom: 0; }
}
@media (max-width: 767px) { .tb-cal--velo { padding-top: calc(14px + 96px); } }
@media (max-width: 520px) { .tour__checks li { font-size: 15px; } .tour__viz, .tour__viz > .tb { min-height: 380px; } .tour__link { width: 100%; } }