/* ==========================================================================
   walkthrough.css
   Variant-only overrides for /walkthrough/ (page-walkthrough.php).

   Loads AFTER demo-v2.css (enqueued with array('demo-v2') as its dependency),
   so every rule here wins on load order as well as specificity.

   HARD RULE: never edit css/demo-v2.css to change this page. /demo/ carries
   518 of 525 browser bookings and must stay at zero regression risk. Everything
   variant-specific lives in this file, scoped to body.walkthrough-variant.
   ========================================================================== */

body.walkthrough-variant {
    background: #0a1628;
}

/* --------------------------------------------------------------------------
   Fixed-header clearance

   .il-header is position:fixed at top:var(--il-banner-height), so the hero has
   to clear banner + header. Desktop is 40px + 64px = 104px; under 1024px the
   banner drops to 36px, so 100px. demo-v2.css ships 5rem (80px) desktop and
   4rem (64px) at the 900px breakpoint, which tucks the eyebrow line under the
   fixed header on /demo/ today (measured on production: eyebrow at y=80,
   header occupies y=40 to y=104). This page pads past it.
   -------------------------------------------------------------------------- */

body.walkthrough-variant .demo-v2-hero {
    padding-top: 7.5rem;
}

/* --------------------------------------------------------------------------
   Animation + timer policy (adopted 2026-07-23, runaway-CPU incident)

   A page at rest must idle at ~0 CPU. demo-v2.css ships two perpetual
   animations that are NOT opacity-only: demo-v2-frame-ring animates box-shadow
   on the full Calendly card (continuous repaint of a large element) and
   demo-v2-screenshot-pulse animates a drop-shadow filter. Neither is gated on
   visibility or viewport. Both are switched off on this page. The opacity-only
   glow (demo-v2-glow) and the 7px live dot stay.
   -------------------------------------------------------------------------- */

body.walkthrough-variant .demo-v2-calendly-frame,
body.walkthrough-variant .demo-v2-screenshot {
    animation: none;
}

/* --------------------------------------------------------------------------
   One action: suppress the two auxiliary CTAs that ride inside the include

   schedule-demo.php opens with a .schedule-demo-aux-cta row carrying
   "Watch Recorded Demos" (anchored at #demo-v2-proof) and "Already a customer?
   Book training" (an off-site Calendly link). Both sit directly above the
   booking widget, which is the one place this page cannot afford a competing
   offer: the exit-intent modal's "Watch Recorded Demo" drew 251 body clicks on
   /demo/ and was interrupting sessions that went on to book anyway, and the
   customer-training link is wrong-audience for a prospect campaign.

   The #demo-v2-proof anchor is also dead here. This page's video section is
   #wt-proof, so the link would scroll nowhere.

   Suppressed in CSS rather than by forking the include. schedule-demo.php stays
   byte-identical to production, which is what keeps the Turnstile-era honeypot,
   the demo-cal-fallback escape hatch, the demo_booked dataLayer push, the
   ilResolveBooking identify hook, and the gclid passthrough that feeds the
   Google Ads offline-conversion upload intact.
   -------------------------------------------------------------------------- */

body.walkthrough-variant .schedule-demo-aux-cta {
    display: none;
}

/* --------------------------------------------------------------------------
   Hero left column: the scenario block

   This is the message-match engine and it mirrors the campaign email beat for
   beat, so it gets the visual weight the 2x2 stat grid used to take.
   -------------------------------------------------------------------------- */

.wt-scenario {
    border-left: 3px solid #FFA000;
    padding: 0.25rem 0 0.25rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.wt-scenario p {
    margin: 0;
    color: #cbd5e1;
    font-size: 0.95rem;
    line-height: 1.6;
}

.wt-scenario__lead {
    color: #f8fafc !important;
    font-size: 1.05rem !important;
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   Hero left column: screenshot with caption
   -------------------------------------------------------------------------- */

.wt-figure {
    margin: 0;
}

.wt-figure .demo-v2-screenshot {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* The registry asset is a full 2560x1440 application capture whose lower third
   is empty canvas below the chart. Scaled into a 622px hero column that dead
   space reads as a broken image. Cropped in CSS to the chart itself rather than
   by cutting a new derivative file, so the press-cleared registry asset ships
   byte-identical and there is no undocumented image in the theme.
   aspect-ratio is declared, so this crops without introducing layout shift. */
.wt-figure .demo-v2-screenshot img {
    aspect-ratio: 2560 / 980;
    object-fit: cover;
    object-position: top center;
}

.wt-figure__caption {
    margin: 0.65rem 0 0;
    color: #94a3b8;
    font-size: 0.8rem;
    line-height: 1.45;
}

/* --------------------------------------------------------------------------
   Hero left column: tier line and trust row
   -------------------------------------------------------------------------- */

.wt-tier-line {
    margin: 0;
    color: #FFA000;
    font-size: 0.95rem;
    font-weight: 600;
}

.wt-trust-row {
    list-style: none;
    margin: 0;
    padding: 0.9rem 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.5rem;
}

.wt-trust-row li {
    color: #cbd5e1;
    font-size: 0.78rem;
    line-height: 1.4;
    margin: 0;
    padding: 0;
}

.wt-trust-row li strong {
    color: #f8fafc;
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   Section 3: What the walkthrough covers

   Reuses the migration section's tile styling at three across instead of the
   2x2 the migration grid shipped, and drops the pricing line that used to sit
   under it.
   -------------------------------------------------------------------------- */

.wt-covers .demo-v2-migration__header {
    margin-bottom: 2.25rem;
}

.wt-covers__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Mid-page CTA: smooth-scrolls to the Calendly frame in the hero. */
.wt-midcta {
    margin: 2.5rem 0 0;
    text-align: center;
}

.wt-midcta__btn {
    display: inline-block;
    background: #FFA000;
    color: #041835;
    padding: 0.9rem 1.75rem;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease;
}

.wt-midcta__btn:hover,
.wt-midcta__btn:focus {
    background: #ffbf42;
    color: #041835;
    transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   Section 4: one advisor video, centred

   demo-v2.css lays the proof grid out as two equal columns for /demo/'s two
   videos. This page ships one.
   -------------------------------------------------------------------------- */

.wt-proof__grid {
    grid-template-columns: minmax(0, 680px);
    justify-content: center;
}

.wt-proof .demo-v2-proof__header {
    margin-bottom: 2.25rem;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
    .wt-covers__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    /* Under 1024px the announcement bar drops to 36px, so banner + header is
       100px. Extra room here because the mobile hero is the whole page. */
    body.walkthrough-variant .demo-v2-hero {
        padding-top: 8.5rem;
    }
    .wt-covers__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .wt-scenario {
        padding-left: 1rem;
    }
    .wt-scenario p {
        font-size: 0.92rem;
    }
    .wt-scenario__lead {
        font-size: 1rem !important;
    }
    .wt-trust-row {
        flex-direction: column;
        gap: 0.5rem;
    }
    .wt-midcta__btn {
        display: block;
        padding: 0.9rem 1.25rem;
        font-size: 0.95rem;
    }
}

/* --------------------------------------------------------------------------
   OPEN DECISION FOR AARON, deliberately left off

   The global header carries "Start Free Trial" (desktop .il-header__cta--trial
   at header.php:197, mobile .il-mobile-nav__cta--secondary at :271), both
   pointing at /pricing/. It draws 535 header_nav clicks against 350 for
   "Book a Walkthrough", so the loudest CTA on a booking page is not the
   booking CTA, and trial to paid is the known weak rung.

   Option A (shipped): leave it, measure the leak via cta_click with
   cta_location = header_nav.
   Option B (the build spec's recommendation): uncomment the block below. It is
   a page-scoped CSS suppression, so header.php is never edited for one page.

   This is a navigation change rather than a copy change, so it is Aaron's call.
   Uncommenting is the whole implementation.

body.walkthrough-variant .il-header__cta--trial,
body.walkthrough-variant .il-mobile-nav__cta--secondary {
    display: none;
}

   The announcement bar above the header also links to /demo/ ("Book a
   Walkthrough"). That is a lateral move to the other booking page rather than a
   leak to self-serve, so it is left alone. Suppress it with the same mechanism
   if Aaron wants the page fully single-exit:

body.walkthrough-variant .il-banner {
    display: none;
}

   -------------------------------------------------------------------------- */