/* Variant B: Matt's funnel. One sentence and a button first, short blocks, a button after
   each block. Uses tokens.css and kinect.css; only layout that B needs lives here. */
.b-nav { padding-top: 12px; padding-bottom: 12px; }
.b-nav .nav-actions .btn { display: inline-flex; }
/* Hero: a full bleed photo band with a slow carousel behind centred copy. The band is
   the only centred block on the page; everything under it stays left aligned at the
   container edge, so the hero reads as its own band rather than a stray narrow column. */
.b-hero-band { position: relative; isolation: isolate; overflow: hidden; }
.b-slides { position: absolute; inset: 0; z-index: -2; }
.b-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 900ms ease; }
.b-slide.is-on { opacity: 1; }
.b-scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,0.22) 0%, rgba(0,0,0,0.38) 60%, rgba(0,0,0,0.58) 100%), var(--k-hero-tint); }

.b-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--k-gap); padding-top: 64px; padding-bottom: 56px; min-height: 68vh; justify-content: center; }
.b-hero h1 { font-size: var(--k-h1-size); }
.b-hero .accent { color: var(--k-interactive-on-dark); }
.b-hero .lead { color: var(--k-text-on-dark); max-width: 620px; }
.b-hero .body { color: var(--k-text-on-dark-body); max-width: 560px; }
.b-hero .btn-lg { width: auto; min-width: 260px; }

.b-dots { display: flex; gap: 10px; padding-top: 6px; }
.b-dot { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.42); cursor: pointer; transition: background var(--k-ease), transform var(--k-ease); }
.b-dot:hover { background: rgba(255, 255, 255, 0.7); }
.b-dot.is-on { background: var(--k-text-on-dark); transform: scale(1.25); }
.b-dot:focus-visible { outline: 3px solid var(--k-text-on-dark); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .b-slide { transition: none; }
}
.btn-lg { font-size: var(--k-btn-size); padding: 16px 28px; width: 100%; }
.b-block { display: flex; flex-direction: column; gap: var(--k-gap); padding-top: var(--k-section-y-sm); padding-bottom: var(--k-section-y-sm); }
.b-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.b-card { background: var(--k-bg); border-radius: var(--k-radius-sm); padding: 14px; display: flex; flex-direction: column; gap: 6px; border-left: 3px solid var(--k-cta); transition: transform 200ms ease, box-shadow 200ms ease; }
.b-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(15, 23, 42, 0.07); }
.b-card .day { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--k-text-muted); }
.b-card h3 { font-size: var(--k-title-size); line-height: 1.2; }
.b-card .body { font-size: var(--k-body-sm-size); }
.b-card .badge { white-space: normal; text-align: right; }
.b-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.b-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 2px; }
.b-card-foot .btn-link { padding-left: 0; }
.b-card .next { font-size: 12px; color: var(--k-text-muted); }
.b-code { font-size: var(--k-meta-size); font-weight: 600; color: var(--k-on-brand-container); }
.b-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 4px; }
.b-cta-row .btn-cta { flex: 1 1 200px; }
.b-hidden-links { display: flex; gap: 14px; }
.b-hidden-links button { background: none; border: 0; padding: 0; color: var(--k-interactive); font-weight: 600; font-size: var(--k-meta-size); cursor: pointer; }
.b-guides { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.b-guide { display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; text-align: center; }
.b-guide .image-slot { width: 100%; aspect-ratio: 1 / 1; border-radius: var(--k-radius-md); font-size: 20px; }
.b-guide .name { font-family: var(--k-font-display); font-weight: 600; font-size: 14px; color: var(--k-text-on-dark); }
.b-guide .role { font-size: 11px; color: var(--k-text-on-dark-muted); }
.b-faq { border-bottom: 1px solid var(--k-border); padding: 10px 0; }
.b-faq summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.b-faq summary::-webkit-details-marker { display: none; }
.b-faq summary::after { content: "+"; color: var(--k-interactive); font-size: 20px; line-height: 1; }
.b-faq[open] summary::after { content: "\2013"; }
.b-faq p { padding-top: 8px; }
@media (min-width: 640px) {
  .btn-lg { width: auto; }
  .b-hero { padding-top: 96px; padding-bottom: 88px; max-width: 760px; min-height: 72vh; }
  /* Every block runs the full container and caps its own text, so each section starts at
     the same left edge. Capping the block itself instead would centre it as a narrow
     column, which is what made the calendar look stranded next to its neighbours. */
  .b-block > * { max-width: 760px; }
  .b-block > .prices, .b-block > .cal { max-width: none; }
  .b-cta-row .btn-cta { flex: none; }
  .b-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .b-card { padding: 16px; }
}