/* ==========================================================================
   markXpand — Features page (/Features)
   --------------------------------------------------------------------------
   Rebuilt on the V-Retail /product layout: a LIGHT centred hero, a channel
   marquee, a long numbered "all features" run of glass cards, a book-a-demo
   split, an FAQ and a dark closing band.

   Two rules this file lives by:

   1. NOTHING here depends on GSAP. landing-page.js is still loaded (it owns the
      nav skin swap and the mobile menu) but every reveal on this page is a CSS
      transition gated by .is-in from an IntersectionObserver in product-page.js.
      A blocked CDN therefore leaves a fully readable page, never a blank one.
      For the same reason the page deliberately avoids .lp-eyebrow / .lp-h1-line
      / .lp-hero-sub / .lp-hero-actions — those are on landing-page.js's hero
      timeline, and borrowing them here would re-introduce that coupling.

   2. The reference was for LAYOUT ONLY. Its colour never entered (the palette
      is --brand / --brand-dark from landing-page.css throughout), and its
      TYPE and BUTTONS have since been replaced with markXpand's own — see §1
      and §2. What remains borrowed is structural: the 12px/68px asymmetric
      card corner, the glass card fill, the wide poster-like measure and the
      alternating numbered card run.
   ========================================================================== */


/* ==========================================================================
   0. PAGE GROUND + LOCAL TOKENS
   ========================================================================== */
.pr-page {
    /* The reference's body is a top-to-bottom wash from white into a warm grey.
       Ours goes white → the landing page's own --bg-alt so the footer's dark
       band lands on the deepest part of the ramp instead of on flat white. */
    /* AUDIT 11: background-color first, so the gradient has a defined ground
       under it. The shorthand alone left background-color at transparent, which
       is what the canvas falls back to on overscroll. */
    background-color: var(--bg);
    background-image: linear-gradient(180deg, #ffffff 0%, #f7fbfe 38%, #eaf3fa 100%);
    background-attachment: fixed;

    /* Asymmetric corner, straight from the reference's .features-card-holder. */
    /* AUDIT 05: was the reference's asymmetric 12px/68px corner, a shape the
       landing page never makes. Both now point at landing-page.css's own
       symmetric radius scale, so every card on the marketing site is cut the
       same way. Kept as tokens (rather than inlined) so the corner stays a
       single decision per page. */
    --pr-corner: var(--radius-lg);
    --pr-corner-sm: var(--radius);
    /* One easing for everything that moves on this page. */
    --pr-ease: cubic-bezier(.16, 1, .3, 1);
    --pr-glass: rgba(255, 255, 255, .55);
    --pr-glass-line: #dde7ef;

    /* AUDIT 04 — ONE dark blue for every band on the marketing site.
       .ct-hero and .cr-hero had this ramp written out twice already; it is now
       declared once and referenced by both, and by .pr-hero--band below.
       Pitched deep enough to carry text: the lightest stop #226f9f is 5.4:1
       against white and 4.4:1 against the inverted accent. */
    --pr-band: linear-gradient(146deg, #0f2c46 0%, #1a5c8c 48%, #226f9f 100%);
    --pr-band-accent: #cfeaff;
}

@media (max-width:991.98px) {
    /* background-attachment:fixed is a known repaint tax on mobile Safari and
       buys nothing at this height. */
    .pr-page { background-attachment: scroll; }
}

/* The hero is LIGHT now, so the nav wears its default dark-text skin here and
   only flips to the white skin over the closing band + footer (data-nav). */
.pr-page .lp-nav .nav-link.active { color: var(--brand); }
.pr-page .lp-nav .nav-link.active::after { transform: scaleX(1); }
.pr-page .lp-nav--light .nav-link.active { color: #fff; }

/* ...but the collapsed mobile menu is a white panel whatever skin the bar wears,
   so that white active link vanished into it and only its underline showed.
   Below the collapse breakpoint the active item is brand text on a brand tint,
   and the sliding underline is dropped (it read as a divider in a list). */
@media (max-width:991.98px) {
    .pr-page .lp-nav .navbar-nav .nav-link.active,
    .pr-page .lp-nav--light .navbar-nav .nav-link.active { color: var(--brand); }
    .pr-page .lp-nav .navbar-nav .nav-link.active { background: rgba(67,163,221,.10); }
    .pr-page .lp-nav .navbar-nav .nav-link.active::after { transform: scaleX(0); }
}

/* Anchor jumps clear the fixed navbar. */
.pr-page [id] { scroll-margin-top: var(--pr-navh, 88px); }

/* Shared shell. AUDIT 10: this was the reference's poster-like measure,
   min(1440px, 88%) — a fluid width that agreed with the landing page on a laptop
   and ran up to 120px wider than it on a large display, while the nav and footer
   ABOVE and BELOW it stayed at Bootstrap's 1320px on every page. The shared nav
   was the tell: it visibly failed to line up with the content beneath it.

   These are Bootstrap's own .container max-widths, so .pr-shell and the .container
   the nav and footer use are now the same measure at every breakpoint. The gutter
   token comes from landing-page.css, which also sets it on .container — one number
   for the whole marketing site. */
.pr-shell {
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--lp-gutter, 12px);
}

@media (min-width:576px)  { .pr-shell { max-width: 540px; } }
@media (min-width:768px)  { .pr-shell { max-width: 720px; } }
@media (min-width:992px)  { .pr-shell { max-width: 960px; } }
@media (min-width:1200px) { .pr-shell { max-width: 1140px; } }
@media (min-width:1400px) { .pr-shell { max-width: 1320px; } }


/* ==========================================================================
   1. TYPE — the markXpand landing-page voice
   ========================================================================== */

/* These were the reference's poster type — UPPERCASE at 6.6rem on a .95 line,
   with the accent phrase gradient-clipped to the glyphs. That is V-Retail's
   voice, borrowed for layout only. The values below are landing-page.css's own
   headings, so /Features and /Contact now speak in the site's voice:

     .pr-display      = .lp-hero-h1      clamp(2.1rem, 4.8vw, 3.5rem) / 1.12
     .pr-display--sm  = .lp-section-title clamp(1.9rem, 4.2vw, 3.25rem) / 1.08
     .pr-grad         = .lp-text-accent  a solid blue, no gradient

   Sentence case throughout — the caps went with the poster. */
.pr-display {
    font-family: var(--font-h);
    font-weight: 800;
    font-size: clamp(2.1rem, 4.8vw, 3.5rem);
    line-height: 1.12;
    letter-spacing: -.025em;
    color: var(--ink);
    margin: 0;
    text-wrap: balance;
}

.pr-display--sm {
    font-size: clamp(1.9rem, 4.2vw, 3.25rem);
    line-height: 1.08;
    letter-spacing: -.03em;
}

/* AUDIT 03 — ONE headline accent for the whole marketing site.
   --------------------------------------------------------------------------
   This was --brand-dark #2e7ba8, one shade below the landing page's own
   .lp-text-accent (--brand #43a3dd). The reasoning was a real contrast problem:
   #43a3dd is 2.79:1 on white and large text needs 3:1. But the effect was that
   the brand blue a visitor learns on the home page was never the blue they saw
   again on any interior page.

   The brief for this pass was to unify WITHOUT touching the landing page, so
   the interior pages come to the landing page's blue rather than the other way
   round. That inherits its contrast shortfall (2.79:1 vs the 3:1 large-text
   floor) on these headline accents — the same shortfall the home page has
   shipped all along, now consistent rather than isolated.

   Two things keep that shortfall contained, and both matter if this is ever
   revisited:
     - It applies to headline-sized display type ONLY. Small text keeps
       --brand-dark: .pr-kicker below, and every UI label on these pages.
     - On the dark bands the accent is inverted to #cfeaff (4.4:1) — see
       .pr-close and the hero bands, which are unaffected by this rule.
   The accessible resolution is to move BOTH to #2e7ba8; that is a landing-page
   change and so was out of scope here. */
.pr-grad {
    color: var(--brand);
}

/* Body measure, on landing-page.css's .lp-feat-p values. */
.pr-lede {
    font-family: var(--font-b);
    font-size: 1.063rem;
    line-height: 1.7;
    color: var(--text-body);
    text-wrap: pretty;
    margin: 0;
}

/* The mono eyebrow, on landing-page.css's .lp-eyebrow values so it reads as the
   same device as the one above every section of the home page. */
.pr-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-mono);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--brand-dark);
    margin: 0 0 16px;
}

.pr-kicker::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--brand);
    flex: 0 0 auto;
}


/* ==========================================================================
   2. BUTTONS — see landing-page.css
   --------------------------------------------------------------------------
   This page used to carry its own pill: two radial layers over a linear base
   for a lit-from-within look, uppercase at .17em tracking, and a label that
   slid up on hover off a data-hover attribute. All three were the reference's
   .radial-bg / .book-a-demo-animate motifs, borrowed for layout reference.

   The buttons here are now markXpand's own .lp-btn-cta and its variants,
   defined in landing-page.css and shared with the home and pricing pages:

     .lp-btn-cta              the brand pill      (was .pr-btn--grad)
     .lp-btn-cta--lg          the page-CTA size
     .lp-btn-cta--outline     secondary on light  (was .pr-btn--dark)
     .lp-btn-cta--white       primary on dark     (was .pr-btn--onblue)
     .lp-btn-cta--ghost       secondary on dark   (was .pr-btn--outline-w)

   Only .pr-actions — the row that lays them out — stays here.
   ========================================================================== */

.pr-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
}


/* ==========================================================================
   3. HERO — light, centred, screenshot below the fold line
   ========================================================================== */
.pr-hero {
    position: relative;
    isolation: isolate;
    overflow: clip;
    padding-top: clamp(140px, 15vh, 210px);
    /* AUDIT 04: deeper now that the shot has moved out from under the copy. */
    padding-bottom: clamp(72px, 9vw, 130px);
    text-align: center;
}

/* The reference paints decoration.png behind the screenshot. Two soft radials
   do the same job at zero bytes and stay crisp at any density. */
.pr-hero-glow {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(58% 44% at 50% 12%, rgba(67, 163, 221, .17), rgba(67, 163, 221, 0) 70%),
        radial-gradient(44% 36% at 12% 54%, rgba(67, 163, 221, .1), rgba(67, 163, 221, 0) 72%),
        radial-gradient(44% 34% at 90% 46%, rgba(67, 163, 221, .11), rgba(67, 163, 221, 0) 72%);
}

/* The reference stacks TWO poster lines here ("FEATURES" over "THAT FUEL
   V-RETAIL"). markXpand's hero is an eyebrow over one headline, so the markup
   uses .pr-kicker now and this rule only centres it. */
.pr-hero-eyebrow { justify-content: center; }

.pr-hero-h1 { margin: 6px 0 22px; }

.pr-hero .pr-lede {
    max-width: 74ch;
    margin: 0 auto 34px;
}

.pr-hero .pr-actions { justify-content: center; }

/* --------------------------------------------------------------------------
   AUDIT 04 — THE BAND HERO
   The marketing site had four interior heroes in three treatments: light and
   centred (/Features, /HowItWorks), blue and left (/Contact), blue and centred
   (/Careers). None of them was the landing page's, and they did not agree with
   each other either.

   They are all the blue band now. It is the closest relative of the landing
   page's dark photographic hero, so every page on the site opens dark, runs
   light through the middle and cuts to the dark footer at the end — one
   silhouette, five pages. The band also restores what the light heroes had
   lost: the white nav skin the landing page wears over its own hero.

   The section carrying this MUST also carry data-nav="light".
   ------------------------------------------------------------------------- */
.pr-hero--band {
    color: #fff;
    background: var(--pr-band);
}

/* Two soft radial lights so the blue never reads as flat fill — the same recipe
   .ct-hero and .cr-hero already used. */
.pr-hero--band::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(48% 58% at 82% 8%, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 66%),
        radial-gradient(44% 56% at 8% 92%, rgba(15, 36, 56, .34), rgba(15, 36, 56, 0) 70%);
}

/* The light hero's glow is a white-ground device; it has nothing to do on blue. */
.pr-hero--band .pr-hero-glow { display: none; }

/* Alphas set by contrast, not by eye: .92 on the mono eyebrow and .9 on the lede
   both clear 4.5:1 against the ramp's lightest stop. */
.pr-hero--band .pr-kicker { color: rgba(255, 255, 255, .92); }
.pr-hero--band .pr-kicker::before { background: #fff; }
.pr-hero--band .pr-display { color: #fff; }
.pr-hero--band .pr-grad { color: var(--pr-band-accent); }
.pr-hero--band .pr-lede { color: rgba(255, 255, 255, .9); }
.pr-hero--band .pr-hero-note { color: rgba(255, 255, 255, .58); }

/* The button pair, normalised for the band so all four heroes read the same
   whatever variant classes their markup happens to carry: a white primary and
   the ghost secondary. Without this the plain .lp-btn-cta is brand blue, which
   all but disappears against this ground. */
.pr-hero--band .lp-btn-cta {
    background: #fff;
    color: var(--brand-dark);
    border: 1.5px solid #fff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .15);
}

.pr-hero--band .lp-btn-cta:hover {
    color: var(--brand-dark);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
}

.pr-hero--band .lp-btn-cta--outline,
.pr-hero--band .lp-btn-cta--ghost {
    background: rgba(255, 255, 255, .06);
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, .55);
    box-shadow: none;
}

.pr-hero--band .lp-btn-cta--outline:hover,
.pr-hero--band .lp-btn-cta--ghost:hover {
    background: rgba(255, 255, 255, .14);
    border-color: #fff;
    color: #fff;
    box-shadow: none;
}

.pr-hero-note {
    margin: 18px 0 0;
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* AUDIT 04: the shot and the marquee used to live INSIDE the hero, which was
   light. The hero is the blue band now, so they sit in their own light section
   under it. The negative top margin lets the shot ride up over the seam, the
   way the landing page's first product mock overlaps its hero. */
.pr-showcase {
    position: relative;
    padding-bottom: var(--space-section);
}

.pr-showcase .pr-shot { margin-top: clamp(-88px, -6vw, -40px); }

/* ---- the product shot ---- */
.pr-shot {
    position: relative;
    margin: clamp(48px, 6vw, 92px) auto 0;
    max-width: 1240px;
}

.pr-shot-frame {
    position: relative;
    margin: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--pr-glass-line);
    box-shadow: 0 30px 80px -22px rgba(15, 31, 51, .3), 0 8px 22px -10px rgba(15, 31, 51, .16);
}

.pr-shot-bar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 12px 16px;
    background: linear-gradient(180deg, #fbfdff 0%, #f2f8fc 100%);
    border-bottom: 1px solid var(--pr-glass-line);
}

.pr-shot-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #dbe6ee;
    flex: 0 0 auto;
}

.pr-shot-addr {
    margin-inline-start: 12px;
    font-family: var(--font-mono);
    font-size: .68rem;
    letter-spacing: .06em;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pr-shot-frame img {
    display: block;
    width: 100%;
    height: auto;
}

/* Reveal — the shot rises and settles as it enters. */
.pr-shot {
    opacity: 0;
    translate: 0 34px;
    transition: opacity .8s var(--pr-ease), translate .8s var(--pr-ease);
}

.pr-shot.is-in { opacity: 1; translate: 0 0; }


/* ==========================================================================
   4. CHANNEL MARQUEE — the reference's brand-logo strip
   --------------------------------------------------------------------------
   We have no client logos to show, so the strip carries the nine launch
   channels instead. Two identical tracks scroll as one; the second exists only
   so the loop has something to hand over to at -50%.
   ========================================================================== */
.pr-marquee {
    position: relative;
    margin-top: clamp(44px, 5vw, 76px);
    padding: 22px 0;
    border-block: 1px solid var(--pr-glass-line);
    overflow: hidden;
    /* Fade both ends so items enter and leave instead of being chopped. */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

.pr-marquee-track {
    display: flex;
    width: max-content;
    animation: prMarquee 42s linear infinite;
}

.pr-marquee:hover .pr-marquee-track { animation-play-state: paused; }

.pr-marquee-group {
    display: flex;
    align-items: center;
    gap: clamp(30px, 4vw, 66px);
    padding-inline-end: clamp(30px, 4vw, 66px);
    flex: 0 0 auto;
}

.pr-chan {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    font-family: var(--font-h);
    font-weight: 600;
    font-size: .95rem;
    color: var(--text-muted);
    white-space: nowrap;
    transition: color .25s var(--pr-ease);
}

.pr-chan i {
    font-size: 1.12rem;
    color: var(--brand);
    opacity: .85;
}

.pr-marquee:hover .pr-chan { color: var(--text-body); }

@keyframes prMarquee {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-50%, 0, 0); }
}

[dir="rtl"] .pr-marquee-track { animation-direction: reverse; }


/* ==========================================================================
   5. ALL FEATURES — the numbered card run
   ========================================================================== */
.pr-all {
    position: relative;
    padding: var(--space-section) 0;
}

/* Soft off-axis blooms, the reference's .purple-element. Purely decorative. */
.pr-all::before,
.pr-all::after {
    content: '';
    position: absolute;
    z-index: -1;
    pointer-events: none;
    border-radius: 50%;
    filter: blur(90px);
}

.pr-all::before {
    inset-inline-start: -8%;
    top: 12%;
    width: 30vw;
    height: 30vw;
    max-width: 460px;
    max-height: 460px;
    background: rgba(67, 163, 221, .16);
}

.pr-all::after {
    inset-inline-end: -10%;
    bottom: 8%;
    width: 26vw;
    height: 26vw;
    max-width: 400px;
    max-height: 400px;
    background: rgba(67, 163, 221, .13);
}

/* ==========================================================================
   SECTION HEAD — AUDIT 02 + 08
   --------------------------------------------------------------------------
   Every section head on the marketing site now opens the same way the landing
   page's do: mono eyebrow, then the headline, then the lede, centred inside a
   fixed measure. This mirrors .lp-section-head in landing-page.css.

   What it replaces (AUDIT 08) is .pr-all-head — a 112px glass circle beside a
   left-aligned title, with no eyebrow. That was the reference's decorative
   sprite slot, and it had no landing-page equivalent. The count the circle
   carried has moved into the headline itself ("All 9 features", "6 open
   roles"), where it is a fact rather than an ornament.

   NOT applied to a head that is one COLUMN of a two-column section — the FAQ
   asides and the book-a-demo split. Those stay left-aligned, exactly as the
   landing page leaves its own two-column feature rows left-aligned. */
.pr-sechead {
    max-width: 760px;
    margin-inline: auto;
    margin-bottom: clamp(30px, 4vw, 62px);
    text-align: center;
}

/* .pr-kicker is inline-flex, so it centres on the text-align of its parent. */
.pr-sechead .pr-lede {
    max-width: 62ch;
    margin-inline: auto;
    margin-top: 14px;
}

/* ---- the card ---- */
.pr-fcard {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 2.85fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(20px, 3vw, 52px);
    padding: clamp(20px, 2.4vw, 40px);
    margin-block: clamp(24px, 3vw, 52px);
    border: 2px solid var(--pr-glass-line);
    border-radius: var(--pr-corner);
    background: var(--pr-glass);
    -webkit-backdrop-filter: blur(6.5px);
    backdrop-filter: blur(6.5px);
    transition: border-color .35s var(--pr-ease), box-shadow .35s var(--pr-ease), transform .35s var(--pr-ease);
}

.pr-fcard:hover {
    border-color: rgba(67, 163, 221, .5);
    box-shadow: 0 20px 54px -22px rgba(15, 31, 51, .26);
    transform: translateY(-3px);
}

/* Flip every second card so the run reads as a rhythm rather than a list.
   grid-template-columns is re-declared rather than using direction tricks, so
   RTL inherits the same alternation without a second rule. */
.pr-fcard:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 2.85fr); }
.pr-fcard:nth-child(even) .pr-fcard-media { order: 2; }
.pr-fcard:nth-child(even) .pr-fcard-body { order: 1; }
/* AUDIT 05: the corner is symmetric now, so the mirrored variant that used to
   flip it for the alternating cards has nothing left to flip. */

.pr-fcard-media {
    position: relative;
    min-width: 0;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--pr-glass-line);
    box-shadow: 0 18px 44px -20px rgba(15, 31, 51, .28);
}

.pr-fcard-media img {
    display: block;
    width: 100%;
    height: auto;
}

/* The creative triptych (feature 06) — three real generated ads at their true
   aspect ratios, so the card shows the point instead of describing it. */
.pr-trip {
    display: grid;
    grid-template-columns: .62fr 1fr 1.1fr;
    align-items: center;
    gap: clamp(10px, 1.4vw, 20px);
    padding: clamp(14px, 1.8vw, 28px);
    background: linear-gradient(135deg, #f4f9fd 0%, #eaf3fa 100%);
}

.pr-trip figure {
    margin: 0;
    border-radius: var(--radius-sm);
    overflow: hidden;
    box-shadow: 0 10px 26px -12px rgba(15, 31, 51, .32);
    background: #fff;
}

.pr-trip img { display: block; width: 100%; height: auto; }

.pr-trip figcaption {
    padding: 7px 10px;
    font-family: var(--font-mono);
    font-size: .58rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-muted);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pr-fcard-body { min-width: 0; }

.pr-fcard-no {
    display: block;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: clamp(1rem, 1.5vw, 1.5rem);
    line-height: 1;
    margin-bottom: 14px;
    /* Solid, not .pr-grad: at 16px/700 this is body text for contrast purposes and
       needs 4.5:1, which --brand-dark clears at 4.67 and no readable gradient does. */
    color: var(--brand-dark);
}

.pr-fcard-h {
    font-family: var(--font-h);
    font-weight: 700;
    font-size: clamp(1.12rem, 1.55vw, 1.62rem);
    line-height: 1.24;
    letter-spacing: -.015em;
    color: var(--ink);
    margin: 0 0 12px;
    text-wrap: pretty;
}

.pr-fcard-p {
    font-family: var(--font-b);
    font-size: .95rem;
    line-height: 1.68;
    color: var(--text-body);
    margin: 0;
    text-wrap: pretty;
}

.pr-fcard-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 16px;
}

.pr-tag {
    font-family: var(--font-mono);
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--brand-dark);
    background: rgba(67, 163, 221, .1);
    border: 1px solid rgba(67, 163, 221, .22);
    border-radius: var(--radius-pill);
    padding: 5px 11px;
    white-space: nowrap;
}

/* Reveal — each card fades and lifts once. */
.pr-fcard {
    opacity: 0;
    translate: 0 26px;
}

.pr-fcard.is-in {
    opacity: 1;
    translate: 0 0;
    transition: opacity .7s var(--pr-ease), translate .7s var(--pr-ease),
                border-color .35s var(--pr-ease), box-shadow .35s var(--pr-ease), transform .35s var(--pr-ease);
}


/* ==========================================================================
   6. BOOK A DEMO — the split
   ========================================================================== */
.pr-demo { padding: var(--space-section) 0; }

.pr-demo-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(32px, 4vw, 76px);
    align-items: start;
}

.pr-demo-h {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .3em;
    margin: 0 0 26px;
}

.pr-demo-list {
    list-style: none;
    padding: 0;
    margin: 0 0 34px;
    display: grid;
    gap: 14px;
}

.pr-demo-list li {
    position: relative;
    padding-inline-start: 34px;
    font-family: var(--font-b);
    font-size: 1.02rem;
    line-height: 1.62;
    color: var(--text-body);
}

.pr-demo-list li::before {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    inset-inline-start: 0;
    top: .16em;
    display: grid;
    place-items: center;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    font-size: .58rem;
    color: #fff;
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
}

.pr-trust {
    border: 2px solid var(--pr-glass-line);
    border-radius: var(--radius-lg);
    background: var(--pr-glass);
    -webkit-backdrop-filter: blur(6.5px);
    backdrop-filter: blur(6.5px);
    overflow: hidden;
}

.pr-trust-head {
    padding: 15px 20px;
    text-align: center;
    font-family: var(--font-mono);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
}

.pr-trust-body {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: var(--pr-glass-line);
}

.pr-trust-cell {
    background: rgba(255, 255, 255, .72);
    padding: 22px 14px;
    text-align: center;
}

.pr-trust-cell b {
    display: block;
    font-family: var(--font-h);
    font-weight: 800;
    font-size: clamp(1.5rem, 2.4vw, 2.3rem);
    line-height: 1;
    color: var(--ink);
}

.pr-trust-cell span {
    display: block;
    margin-top: 7px;
    font-family: var(--font-mono);
    font-size: .6rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* ---- the booking card ---- */
.pr-book {
    border: 2px solid var(--pr-glass-line);
    border-radius: var(--radius-lg);
    background: #fff;
    box-shadow: 0 28px 70px -26px rgba(15, 31, 51, .28);
    overflow: hidden;
}

.pr-book-top {
    display: grid;
    place-items: center;
    padding: 30px 24px 22px;
    border-bottom: 1px solid var(--pr-glass-line);
    background: linear-gradient(180deg, #fbfdff 0%, #f3f9fd 100%);
}

.pr-book-mark {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
    color: #fff;
    font-size: 1.4rem;
    box-shadow: 0 12px 28px -10px rgba(67, 163, 221, .6);
}

.pr-book-title {
    margin: 16px 0 0;
    font-family: var(--font-h);
    font-weight: 700;
    font-size: 1.22rem;
    color: var(--ink);
    text-align: center;
}

.pr-book-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 24px;
    padding: 18px 24px;
    border-bottom: 1px solid var(--pr-glass-line);
}

.pr-book-meta span {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-b);
    font-size: .875rem;
    color: var(--text-body);
}

.pr-book-meta i { color: var(--brand); font-size: .82rem; }

.pr-book-body { padding: 24px clamp(18px, 2.2vw, 30px) 28px; }


/* The card no longer holds a form. It used to run the /Contact form verbatim —
   same classes, same ids, so contact-page.css styled it and contact-page.js
   submitted it — and with it went the field-token overrides (--ct-field and
   friends) and the single-column .ct-grid this narrow column needed. Booking
   now happens on /BookDemo, where a real day and slot are picked; this card is
   the doorway to it, so all it needs is a line of copy and a button. */
.pr-book-lede {
    margin: 0 0 22px;
    text-align: center;
    font-family: var(--font-b);
    font-size: .938rem;
    line-height: 1.65;
    color: var(--text-body);
    text-wrap: pretty;
}

/* Full width inside the card: it is the only action here, and a centred pill
   floating in a 380px column reads as one option among several. */
.pr-book-go {
    display: flex;
    width: 100%;
    justify-content: center;
}

.pr-book-note {
    margin: 14px 0 0;
    text-align: center;
    font-family: var(--font-b);
    font-size: .8rem;
    color: var(--text-muted);
}


/* ==========================================================================
   7. FAQ
   ========================================================================== */
.pr-faq { padding: var(--space-section) 0; }

.pr-faq-grid {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.3fr);
    gap: clamp(32px, 4vw, 72px);
    align-items: start;
}

.pr-faq-aside { position: sticky; top: calc(var(--pr-navh, 88px) + 24px); }

.pr-faq-h { margin: 0 0 18px; }

.pr-faq-art {
    margin-top: 30px;
    border: 2px solid var(--pr-glass-line);
    border-radius: var(--radius-lg);
    background: var(--pr-glass);
    -webkit-backdrop-filter: blur(6.5px);
    backdrop-filter: blur(6.5px);
    padding: 26px;
    display: grid;
    gap: 16px;
}

.pr-faq-art-row {
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: var(--font-b);
    font-size: .92rem;
    color: var(--text-body);
}

.pr-faq-art-row i {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(67, 163, 221, .1);
    color: var(--brand-dark);
    font-size: .9rem;
}

/* Bootstrap accordion, restyled onto the page's card language. */
.pr-acc .accordion-item {
    border: 2px solid var(--pr-glass-line);
    border-radius: var(--radius-md) !important;
    background: rgba(255, 255, 255, .68);
    -webkit-backdrop-filter: blur(6.5px);
    backdrop-filter: blur(6.5px);
    margin-bottom: 12px;
    overflow: hidden;
    transition: border-color .3s var(--pr-ease), box-shadow .3s var(--pr-ease);
}

.pr-acc .accordion-item:has(.accordion-button:not(.collapsed)) {
    border-color: rgba(67, 163, 221, .48);
    box-shadow: 0 16px 40px -20px rgba(15, 31, 51, .24);
}

.pr-acc .accordion-button {
    background: transparent;
    border: none;
    box-shadow: none !important;
    padding: 20px clamp(18px, 2vw, 26px);
    font-family: var(--font-h);
    font-weight: 700;
    font-size: clamp(.98rem, 1.15vw, 1.1rem);
    line-height: 1.42;
    color: var(--ink);
    text-align: start;
}

.pr-acc .accordion-button:not(.collapsed) { color: var(--brand-dark); }

.pr-acc .accordion-button::after {
    width: 1rem;
    height: 1rem;
    background-size: 1rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M2 5l6 6 6-6' stroke='%232e7ba8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    flex: 0 0 auto;
    margin-inline-start: 16px;
}

[dir="rtl"] .pr-acc .accordion-button::after { margin-inline-start: 16px; margin-inline-end: 0; }

.pr-acc .accordion-button:focus-visible { outline: none; box-shadow: var(--focus-ring) !important; }

.pr-acc .accordion-body {
    padding: 0 clamp(18px, 2vw, 26px) 22px;
    font-family: var(--font-b);
    font-size: .95rem;
    line-height: 1.72;
    color: var(--text-body);
    text-wrap: pretty;
}

.pr-acc .accordion-body a { color: var(--brand-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* The handoff to /FAQ, in the sticky aside beneath the art rows. Every page
   carrying a .pr-faq section shows a SHORTLIST — six to eight answers chosen to
   close that page — and this is the way out to the full set. Written as a plain
   text link rather than a button: it is a "there is more" note, and a second
   filled CTA in a column that already ends on the page's real one would compete
   with it. */
.pr-faq-all {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 22px;
    font-family: var(--font-h);
    font-weight: 600;
    font-size: .89rem;
    color: var(--brand-dark);
    text-decoration: none;
}

.pr-faq-all i { font-size: .76rem; transition: transform .2s var(--pr-ease); }

/* The arrow points along the reading direction, so it flips with the document. */
[dir="rtl"] .pr-faq-all i { transform: scaleX(-1); }

.pr-faq-all:hover { color: var(--brand); }
.pr-faq-all:hover i { transform: translateX(4px); }
[dir="rtl"] .pr-faq-all:hover i { transform: scaleX(-1) translateX(4px); }

.pr-faq-all:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 6px; }

@media (prefers-reduced-motion: reduce) {
    .pr-faq-all i { transition: none; }
    .pr-faq-all:hover i { transform: none; }
    [dir="rtl"] .pr-faq-all:hover i { transform: scaleX(-1); }
}


/* ==========================================================================
   8. CLOSING BAND — AUDIT 01
   --------------------------------------------------------------------------
   This was a saturated navy slab: linear-gradient(135deg,#0f2438,#14395a,#1d5c8c)
   with white type. It was the loudest single reason the interior pages read as a
   different product — every one of them ended on a dark band the landing page
   never uses, and it was the last thing a visitor saw before the footer.

   It is now the landing page's own closing treatment: --ground-white (the seam
   ramp, so the band cannot show an edge against whatever section precedes it),
   ink headline, muted lede, and the brand accent the rest of the page uses. The
   footer below it still carries the dark ground, so the page's one hard cut into
   dark happens in exactly the place it happens on the home page.

   The sections carrying this class also dropped data-nav="light" — that
   attribute puts the nav in its white skin, which was correct over the navy and
   would be invisible over this. */
.pr-close {
    position: relative;
    isolation: isolate;
    overflow: clip;
    padding: var(--space-section) 0;
    text-align: center;
    color: var(--text-body);
    background: var(--ground-white);
}

.pr-close .pr-display { color: var(--ink); }
.pr-close .pr-grad { color: var(--brand); }

.pr-close .pr-lede {
    color: var(--text-muted);
    max-width: 62ch;
    margin: 22px auto 34px;
}

.pr-close .pr-actions { justify-content: center; }

.pr-close-note {
    margin: 20px 0 0;
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-muted);
}


/* ==========================================================================
   9. RESPONSIVE
   ========================================================================== */

/* --- tablet: the card's text column can no longer hold a 25% measure --- */
@media (max-width:1199.98px) {
    .pr-fcard,
    .pr-fcard:nth-child(even) { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.15fr); }
}

@media (max-width:991.98px) {
    .pr-fcard,
    .pr-fcard:nth-child(even) {
        grid-template-columns: minmax(0, 1fr);
        border-radius: var(--pr-corner-sm);
    }
    /* Stacked, the media always leads — the number rides above it so the run
       still reads as a numbered list on a phone. */
    .pr-fcard .pr-fcard-media,
    .pr-fcard:nth-child(even) .pr-fcard-media { order: 2; }

    .pr-fcard .pr-fcard-body,
    .pr-fcard:nth-child(even) .pr-fcard-body { order: 1; }

    .pr-demo-grid,
    .pr-faq-grid { grid-template-columns: minmax(0, 1fr); }

    .pr-faq-aside { position: static; }

    .pr-trip { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
}

@media (max-width:767.98px) {
    .pr-hero { padding-top: clamp(112px, 22vw, 150px); }

    .pr-actions { width: 100%; }
    .pr-actions .lp-btn-cta { flex: 1 1 220px; }

    .pr-shot-addr { display: none; }

    .pr-trust-body { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    .pr-trip { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .pr-trip figure:first-child { max-width: 220px; margin-inline: auto; }
}

@media (max-width:479.98px) {
    .pr-book-meta { flex-direction: column; align-items: center; gap: 10px; }
}


/* ==========================================================================
   10. MOTION + PRINT
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .pr-shot,
    .pr-fcard {
        opacity: 1 !important;
        translate: none !important;
        transition: none !important;
    }

    .pr-marquee-track { animation: none; }

    .lp-btn-cta,
    .pr-fcard { transition: none !important; }

    .lp-btn-cta:hover,
    .pr-fcard:hover { transform: none; }
}

@media print {
    .pr-marquee, .pr-close, .lp-nav { display: none !important; }
    .pr-page { background: #fff; }
    .pr-fcard { break-inside: avoid; opacity: 1; translate: none; }
}


/* ==========================================================================
   10. SMALL-SCREEN PASS
   Appended last so it wins on order alone. Everything is inside a max-width
   query except the accordion chevron, which is a straight alignment bug.
   ========================================================================== */

/* The chevron is Bootstrap's ::after, pushed to the end of the flex row by its
   own margin-left:auto. The 16px gap added in §7 replaced that auto, so on a
   short question ("What does it cost?") the chevron stopped mid-row while every
   longer question still pushed it to the edge. The push goes back on the margin
   and the gap moves onto the flex container, where it belongs. */
.pr-acc .accordion-button { gap: 16px; }
.pr-acc .accordion-button::after { margin-inline-start: auto; }
[dir="rtl"] .pr-acc .accordion-button::after { margin-inline-start: auto; margin-inline-end: 0; }

@media (max-width:991.98px) {
    /* Micro-labels sized for a wide desktop measure land between 9 and 10.5px
       on a phone. Each of these is a label a visitor is meant to read — the
       feature tags, the aspect-ratio captions, the call read-out and the
       booking form's field label — so they come up to ~11px. */
    .pr-tag { font-size: .7rem; }
    .pr-trip figcaption { font-size: .7rem; }
    .pr-trust-head { font-size: .72rem; letter-spacing: .1em; }
    .pr-trust-cell span { font-size: .7rem; }
}