/* Keynote version B6 only, on top of the shared lp.css. Every version keeps its own changes here,
   so a new version never changes how an older one looks (Victor, 3 Nov 2026). */

/* Hero, built like the homepage's (https://christophefox.com/, measured 3 Nov 2026 at 1512px wide):
   banner video with its black left side, left-aligned text, 49px headline, 20px sub, logos, quote cards over the bottom edge. */
.hero2 { position: relative; background: #000; overflow: hidden; }
.hero2-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.hero2::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.42) 42%, rgba(0,0,0,0) 66%), linear-gradient(0deg, #000 0%, rgba(0,0,0,0) 26%); pointer-events: none; }
.hero2-inner { position: relative; z-index: 1; padding-top: 136px; padding-bottom: 196px; }
.hero2 .kicker { font-size: 18px; margin: 0 0 8px; }
.hero2 h1 { font: 700 49px/1.3 var(--serif); max-width: 860px; margin: 0 0 22px; text-wrap: pretty; }
.hero2 .sub { font: 400 20px/1.65 var(--sans); max-width: 640px; margin: 0 0 32px; }
.hero2-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; }
.hero2-featured { margin-top: 48px; text-align: center; }
.hero2-featured p { font: 700 20px var(--sans); margin: 0 0 18px; }
.hero2-featured img { width: 1097px; max-width: 100%; height: auto; margin: 0 auto; }

/* Carousels (b6.js): the row runs off both edges of the screen, like the homepage's */
.loop { position: relative; }
.loop-stage { position: relative; overflow: hidden; padding: 12px 0 34px; touch-action: pan-y; }
.loop-track { display: flex; gap: 28px; width: max-content; transition: transform .45s ease; cursor: grab; }
.loop-track.loop-still { transition: none; }
.loop-track.loop-drag { transition: none; cursor: grabbing; user-select: none; }
.loop-arrow { position: absolute; top: calc(50% - 11px); z-index: 2; width: 56px; height: 56px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--grad); box-shadow: 0 6px 18px rgba(0,0,0,.45); cursor: pointer; transform: translateY(-50%); }
.loop-arrow.prev { left: max(16px, calc(50% - 650px)); }
.loop-arrow.next { right: max(16px, calc(50% - 650px)); }
.loop-arrow.next svg { transform: scaleX(-1); }
.loop-bars { display: flex; justify-content: center; gap: 12px; }
.loop-bars button { width: 64px; height: 20px; padding: 8px 0; border: 0; background: rgba(255,255,255,.22); background-clip: content-box; cursor: pointer; }
.loop-bars button.on { background-color: var(--orange-2); }
@media (prefers-reduced-motion: reduce) { .loop-track { transition: none; } }

/* The portrait beside "One keynote, three layers": as tall as the text next to it, so its top sits level with the headline.
   It stays on the panel's bottom edge and runs off the right edge where it has to. On phones it stays in the flow. */
@media (min-width: 901px) {
  .portrait-fill { position: relative; align-self: stretch; }
  .portrait-fill img { position: absolute; left: 0; bottom: 0; width: auto; max-width: none; height: min(calc(100% - 48px), 62vw); }
}

/* Quote cards */
.t-band { position: relative; z-index: 2; margin-top: -150px; padding-bottom: 20px; }
.t-card { width: 380px; margin: 0; padding: 30px 28px; background: #fff; color: var(--ink-dark); border-radius: 10px; display: flex; flex-direction: column; box-shadow: 0 10px 24px rgba(0,0,0,.3); }
.t-card blockquote { margin: 0 0 16px; font-size: 15px; line-height: 1.55; font-style: italic; flex: 1; }
.t-card .t-stars { width: 110px; margin-bottom: 16px; }
.t-card figcaption { display: flex; align-items: center; gap: 12px; }
.t-card figcaption img { width: 52px; height: 52px; border-radius: 50%; flex: 0 0 52px; }
.t-card figcaption b { display: block; font: 700 16px/1.3 var(--serif); }
.t-card figcaption span { display: block; font-size: 13px; line-height: 1.35; color: var(--ink-dark-soft); }

/* Photo slider */
.loop-gallery { margin-top: 56px; }
.loop-gallery .loop-track { gap: 24px; }
.loop-gallery img { width: 300px; height: 300px; object-fit: cover; border-radius: 14px; }

/* Signature Cards as the upgrade */
.upgrade { padding: 96px 0; background: radial-gradient(ellipse 60% 70% at 74% 50%, rgba(220,76,10,.3) 0%, rgba(220,76,10,0) 72%), #0b0908; overflow: hidden; }
.upgrade-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 56px; align-items: center; }
.upgrade h2 { margin-bottom: 10px; }
.upgrade-sub { font: 400 26px/1.3 var(--serif); margin: 0 0 22px; }
.upgrade-lead { font: 700 20px/1.45 var(--sans); margin: 0 0 14px; }
.upgrade-text > p:not([class]) { font-size: 18px; line-height: 1.6; margin: 0 0 14px; color: var(--ink-soft); }
.upgrade-text .btn { margin-top: 14px; }
.deck-group img { width: 100%; height: auto; filter: drop-shadow(0 18px 34px rgba(0,0,0,.55)); }

/* The three questions, rethought: the answer first, no boxes */
.qa { display: grid; grid-template-columns: repeat(3, 1fr); margin: 48px 0; text-align: left; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.qa-item { padding: 34px 32px; }
.qa-item + .qa-item { border-left: 1px solid var(--line); }
.qa-q { margin: 0 0 12px; font: italic 400 20px/1.3 var(--serif); color: var(--accent-text); }
.qa-a { margin: 0 0 14px; font: 700 34px/1.2 var(--serif); }
.qa-item p:last-child { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink-soft); }

/* Stats: all three on one line each, same size */
.stats b { font-size: 48px; }
.stats span { font: 600 18px/1.35 var(--sans); }

/* Timeline: one line right across the screen, with the steps centred on it */
.steps { position: relative; text-align: center; gap: 40px; }
.steps::before { content: ""; position: absolute; top: 21px; left: 50%; width: 100vw; margin-left: -50vw; height: 3px; background: linear-gradient(90deg, rgba(220,76,10,0) 0%, #dc4c0a 10%, #f69562 90%, rgba(246,149,98,0) 100%); }
.step:not(:last-child)::before { display: none; }
.step-num { margin-left: auto; margin-right: auto; }

/* Above the reviews */
.ovation-line { margin: 0 0 14px; font: 700 20px/1.4 var(--sans); color: var(--accent-text); }

@media (max-width: 900px) {
  .hero2-video { object-position: 72% center; }
  .hero2::after { background: linear-gradient(0deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.58) 45%, rgba(0,0,0,.5) 100%); }
  .hero2-inner { padding-top: 104px; padding-bottom: 160px; }
  .hero2 .kicker { font-size: 16px; }
  .hero2 h1 { font-size: 32px; }
  .hero2 .sub { font-size: 17px; }
  .hero2-cta { gap: 18px; justify-content: center; }
  .hero2-cta .btn { width: 100%; max-width: none; }
  .hero2-featured p { font-size: 16px; }
  .t-band { margin-top: -120px; }
  .loop-arrow { display: none; }
  .loop-track { gap: 16px; }
  .loop-gallery .loop-track { gap: 14px; }
  .loop-gallery img { width: 260px; height: 260px; }
  .loop-bars button { width: 36px; }
  .upgrade { padding: 64px 0; }
  .upgrade-grid { grid-template-columns: 1fr; gap: 28px; }
  .upgrade-sub { font-size: 22px; }
  .qa { grid-template-columns: 1fr; }
  .qa-item { padding: 26px 4px; }
  .qa-item + .qa-item { border-left: 0; border-top: 1px solid var(--line); }
  .qa-a { font-size: 28px; }
  .steps { gap: 28px; }
  .steps::before { display: none; }
  .ovation-line { font-size: 18px; }
}
@media (max-width: 700px) {
  .t-card { width: 84vw; max-width: 380px; padding: 26px 24px; }
}