/**
 * [av8_listing_snapshot] - the opening block of the relaunch page.
 *
 * Every rule for a <button> is container-scoped (`.av8-snap .av8-snap__cta`, not
 * `.av8-snap__cta`). The Elementor Kit ships `.elementor-kit-9 button {...}` at specificity
 * (0,1,1), which outranks a bare class at (0,1,0) - and for a signed-in visitor both the CTA and
 * the rail arrows ARE buttons. The panel and the assign screen already carry this same fix.
 *
 * The rail is ours, built on scroll-snap, and deliberately NOT slick. Houzez registers `slick`
 * only inside the `js_all_in_one = 0` branch of register-scripts.php, so the handle is present
 * on this page today and would silently vanish the day that theme option is flipped - taking the
 * carousel with it. Scroll-snap needs no library, gives native touch swiping for free, and
 * degrades to a plain horizontally scrollable row if the JS never runs.
 */

.av8-snap {
    --av8-snap-navy: #1B449D;
    --av8-snap-green: #71B63B;
    --av8-snap-ink: #222222;
    --av8-snap-muted: #6b7280;
    --av8-snap-line: #e5e7eb;

    position: relative;
    margin: 0 auto;
    max-width: 1140px;
    padding: 8px 0 4px;
}

.av8-snap__heading {
    font-family: 'B612', sans-serif;
    font-size: 1.1rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--av8-snap-muted);
    margin: 0 0 14px;
}

/* ---------------------------------------------------------------------------------------------
   The card
   --------------------------------------------------------------------------------------------- */

.av8-snap__card {
    background: #fff;
    border: 1px solid var(--av8-snap-line);
    border-radius: 14px;
    padding: 28px 30px 30px;
    box-shadow: 0 2px 14px rgba(27, 68, 157, .06);
}

.av8-snap__eyebrow {
    font-family: 'B612', sans-serif;
    font-size: .78rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--av8-snap-navy);
    margin: 0 0 10px;
}

.av8-snap__headline {
    font-family: 'B612', sans-serif;
    font-size: clamp(1.45rem, 2.6vw, 2.1rem);
    line-height: 1.25;
    color: var(--av8-snap-ink);
    margin: 0 0 10px;
}

/* The number is the whole point of the block, so it is allowed to be loud. */
.av8-snap__figure {
    color: var(--av8-snap-navy);
    font-weight: 700;
    white-space: nowrap;
}

.av8-snap__title {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: rgba(27, 68, 157, .35);
    text-underline-offset: 3px;
}

.av8-snap__title:hover,
.av8-snap__title:focus {
    color: var(--av8-snap-navy);
    text-decoration-color: currentColor;
}

.av8-snap__sub {
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--av8-snap-muted);
    margin: 0 0 20px;
    max-width: 56ch;
}

.av8-snap .av8-snap__cta {
    display: inline-block;
    background: var(--av8-snap-green);
    border: 0;
    color: #fff;
    font-family: 'B612', sans-serif;
    font-size: 1rem;
    padding: 13px 26px;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease;
}

.av8-snap .av8-snap__cta:hover,
.av8-snap .av8-snap__cta:focus {
    background: #63a233;
    color: #fff;
    transform: translateY(-1px);
}

/* A footnote, never a gate - see render_generic(). */
.av8-snap__login {
    font-family: 'Montserrat', sans-serif;
    font-size: .9rem;
    margin: 16px 0 0;
}

.av8-snap__login a {
    color: var(--av8-snap-muted);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.av8-snap__login a:hover,
.av8-snap__login a:focus {
    color: var(--av8-snap-navy);
}

/* ---------------------------------------------------------------------------------------------
   The rail
   --------------------------------------------------------------------------------------------- */

.av8-snap__viewport {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    /* Room for the card shadow, which a plain overflow:hidden would clip flat. */
    padding: 6px 4px 14px;
    margin: 0 -4px;
}

.av8-snap__viewport::-webkit-scrollbar {
    display: none;
}

.av8-snap__track {
    display: flex;
    gap: 18px;
    align-items: stretch;
}

.av8-snap--rail .av8-snap__card {
    scroll-snap-align: start;
    flex: 0 0 min(560px, 88%);
    display: flex;
    flex-direction: column;
}

/* Push the button to the bottom so cards of different text lengths still line their CTAs up. */
.av8-snap--rail .av8-snap__cta {
    margin-top: auto;
    align-self: flex-start;
}

.av8-snap__nav {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 4px;
}

.av8-snap .av8-snap__arrow {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--av8-snap-line);
    background: #fff;
    color: var(--av8-snap-navy);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    transition: border-color .15s ease, opacity .15s ease;
}

.av8-snap .av8-snap__arrow:hover:not([disabled]),
.av8-snap .av8-snap__arrow:focus:not([disabled]) {
    border-color: var(--av8-snap-navy);
}

/* Disabled rather than hidden: arrows that disappear at the ends make the rail jump. */
.av8-snap .av8-snap__arrow[disabled] {
    opacity: .35;
    cursor: default;
}

@media (max-width: 767px) {
    .av8-snap__card {
        padding: 22px 20px 24px;
    }

    .av8-snap--rail .av8-snap__card {
        flex-basis: 90%;
    }

    /* Touch swiping is the primary control on mobile; the arrows are redundant there. */
    .av8-snap__nav {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .av8-snap__viewport {
        scroll-behavior: auto;
    }

    .av8-snap .av8-snap__cta:hover,
    .av8-snap .av8-snap__cta:focus {
        transform: none;
    }
}

/* =============================================================================================
   [av8_listing_card] - the hero card, real or stock
   =============================================================================================

   TWO LAYERS. The listing is the lower one and it dissolves downward; the statistic sits on top
   of where it dissolved. That ordering is the argument of the page in one image: the property is
   what they already have, the number is what they do not, and the number is what has to be
   legible from across the room.

   The dissolve is a MASK, not a white overlay. A gradient to #fff only works while the hero
   behind it is white - the moment marketing changes that background the card grows a pale
   rectangle. A mask thins the card against whatever is actually there. Browsers without mask
   support show the card at full opacity: a plainer hero, not a broken one.

   ONE CARD AT A TIME. The rail used to let the next card peek, which is the right cue when cards
   are a list to browse. Here each card is a complete argument about one property, and half of a
   second argument in the corner of the eye competes with the first. The arrows carry the "there
   are more" signal instead.

   Measurements are taken from the mock card in the source hero - 14px radius, the 16/11 media
   box, the navy shadow - rather than chosen afresh, because a signed-out reader has to see that
   card unchanged. Everything is scoped under .av8-lc so none of it reaches the text snapshot,
   which shares the .av8-snap rail but nothing else.
   ============================================================================================= */

.av8-lc {
    max-width: 460px;
    padding: 0;

    /* THE TOP STRIP OF PHOTOGRAPH IS NOT EMPTY, AND THAT IS WHAT MADE THE CARD LOOK LOPSIDED.
       The panel is centred on the media box, so the strip above and below it is identical by
       construction - and it still read heavy at the top, because the top strip is where the
       badges and the price sit while the bottom is clean photograph.

       Measured on production and on a real owner card, at a 460px card:

                        media   panel   strip   price pill ends   verdict
         stock card     306.7   228.7   39/39   39.2             touching
         owner card     306.7   238.7   34/34   39.2             5.2px UNDER the panel

       The pill was not merely crowded on the owner's own card: `.av8-lc__stats` carries
       `z-index: 2`, so their asking price was being drawn behind the panel.

       Two levers, and it takes both. Dropping the panel far enough on its own starves the owner
       card's bottom strip (17px, against the ~28px the media box's own comment establishes as
       the floor for reading as "a panel sitting on a photograph"), so the chrome comes up to
       meet it. Together: 8.8px of clear photograph under the pill on the owner card and 13.8px
       on the stock one, with 28px and 33px still below the panel.

       Both are declared here rather than inline so the three chips and the panel cannot drift
       apart one edit at a time. */
    --av8-lc-chrome-top: 8px;
    --av8-lc-panel-drop: 6px;
}

/* The rail's own card padding is for a block of text. This card's image reaches the edge, and
   the card is a positioning context for the panel centred over it. */
.av8-lc .av8-lc__card {
    position: relative;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    overflow: visible;
}

/* Exactly one card in view. Not a peek - see the header. */
.av8-lc--rail .av8-lc__card {
    flex: 0 0 100%;
}

/* --- the lower layer: the listing, dissolving downward ------------------------------------- */

.av8-lc__fade {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(27, 68, 157, .15);

    /* HALF A GHOST. Three settings were tried in order and the middle one is the answer: at 1 the
       photograph competes with the panel for the same glance and wins, because a photograph always
       beats a number; at .38 the reader's own property was washed out to the point where the hero
       read as a mock-up, and it is the one thing on this page she did not have to be persuaded of.
       .7 keeps it a place she recognises without it arguing for the foreground.

       NO MASK. This class is still called `fade` after the gradient it used to carry: the card
       dissolved downward so a panel overlapping its title had something to sit on. The panel no
       longer overlaps the title, and every version of that gradient took the bottom of the card -
       the chips, then the whole lower edge - with it. A card with a defined bottom edge and a
       shadow is a card; a card that evaporates is a rendering bug the reader has no name for.

       ONLY WHERE THERE IS A PANEL. With stats off (`.av8-lc--plain`, below) nothing competes
       with the photograph, and the card is back at 1. */
    opacity: .7;
}

.av8-lc__media {
    position: relative;
    display: block;
    /* 3/2, not the 16/11 a listing thumbnail would normally take and no longer the square this
       was for one build. The panel floats in the middle of this box and it is a block of content
       rather than a badge, so the box has to be taller than a thumbnail - but the whole card
       (photo + title + chips + arrows) also has to clear a laptop viewport without scrolling, and
       a square photo on a 460px card put it over 600px on its own.

       Measured, not guessed. On a 460px card the panel is 229px on the stock listing and about
       250px on a real one, where a two-column comparison replaces the single headline. At 4/3 the
       media box was 345px, which left a 58px strip of photograph above and below - more than the
       panel needs to read as floating, and 38px of card height nobody asked for. 3/2 puts the box
       at 307px and the strip at ~28px on the taller of the two panels, which still reads as a
       photograph the panel sits on rather than a white block with a border.

       KEEP THIS IN STEP WITH `.av8-lc__stats`'s `margin-top`. That margin centres the panel on
       this box by resolving a percentage against the container's WIDTH and converting through
       this ratio; the two lines only work as a pair, and changing one alone slides the panel off
       centre. */
    aspect-ratio: 3 / 2;
    background-color: #dfe5ef;
    background-size: cover;
    background-position: center;
    text-decoration: none;
}

/* A listing with no featured image would otherwise be a flat grey rectangle with a price floating
   in it; the wash at least reads as "photo missing" rather than "broken". */
.av8-lc__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .06) 0%, rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, .18) 100%);
    pointer-events: none;
}

/* Shares the top edge with the price, so it is capped and wraps rather than sliding under it. */
.av8-lc__badges {
    position: absolute;
    top: var(--av8-lc-chrome-top);
    left: 12px;
    max-width: calc(100% - 140px);
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    z-index: 1;
}

.av8-lc__badge,
.av8-lc__state {
    font-family: 'Montserrat', sans-serif;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: #fff;
    background: rgba(27, 68, 157, .92);
    border-radius: 999px;
    /* 4px, not 5: see the --av8-lc-chrome-top note. Every pixel the chips give back is a pixel
       of photograph between them and the panel. Keep in step with .av8-lc__featured, which
       shares their row. */
    padding: 4px 10px;
    line-height: 1;
    white-space: nowrap;
}

/* "On Basic" is a statement of fact about the reader's own listing, not a feature badge - it is
   the one chip on the real card where the stock card carries three. Muted on purpose: it is not
   something to be proud of, it is the thing the page is asking them to change. */
.av8-lc__state {
    position: absolute;
    top: var(--av8-lc-chrome-top);
    left: 12px;
    z-index: 1;
    background: rgba(34, 34, 34, .78);
}

/* Was top-right on the mock; the price took that corner, so it joins the badge row on the left.
   Same chip, same colour, one row over. */
.av8-lc__featured {
    font-family: 'Montserrat', sans-serif;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: #fff;
    background: #5A942F;
    border-radius: 999px;
    padding: 4px 10px;
    line-height: 1;
}

/* ONE RULE DECIDES EVERY BADGE: the top of the photo carries the badges, the bottom belongs to
   the stats panel. The source page's mock card puts the price bottom-right, which was right when
   nothing floated over the photo; with the panel centred low, a price in either bottom corner
   ends up half under it, and a price that is only half readable is worse than no price at all. */
.av8-lc__price {
    position: absolute;
    right: 12px;
    top: var(--av8-lc-chrome-top);
    z-index: 1;
    font-family: 'B612', sans-serif;
    font-size: .95rem;
    font-weight: 700;
    color: #fff;
    background: rgba(27, 68, 157, .9);
    border-radius: 8px;
    /* 4px, not 6. Paired with --av8-lc-chrome-top: together they take this pill's bottom edge
       from 39.2px to 31.2px, which is what puts it clear of the panel on the owner card. */
    padding: 4px 12px;
    line-height: 1;
}

.av8-lc__body {
    background: #fff;

    /* The 34px tail underneath used to be room for the mask to dissolve into. The mask is now a
       few percent, so the tail is just a gap between the card and its own arrows. */
    padding: 13px 18px 14px;
}

.av8-lc__title {
    display: block;
    font-family: 'B612', sans-serif;
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.3;
    color: var(--av8-snap-navy);
    text-decoration: none;
}

a.av8-lc__title:hover,
a.av8-lc__title:focus {
    color: var(--av8-snap-navy);
    text-decoration: underline;
}

.av8-lc__place {
    font-family: 'Montserrat', sans-serif;
    font-size: .85rem;
    color: var(--av8-snap-muted);
    margin-top: 4px;
}

.av8-lc__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}

.av8-lc__chip {
    font-family: 'Montserrat', sans-serif;
    font-size: .74rem;
    font-weight: 600;
    color: var(--av8-snap-ink);
    background: #f3f5f9;
    border-radius: 6px;
    padding: 5px 9px;
    line-height: 1;
}

/* --- the upper layer: the number ------------------------------------------------------------ */

/* Centred on the PHOTO, not on the card and not on its bottom edge. A panel pinned to the bottom
   reads as the card's own footer - one object with a caption. Floating it over the photo makes the
   two layers read as two things, which is the point: their property behind, our number in front.

   `top: 50%` would centre it on the whole card, which since the swap list moved in here means it
   lands across the listing title. There is no way to say "half the media box" directly, but a
   percentage margin resolves against the containing block's WIDTH - and the media's height is a
   known fraction of that width via its aspect-ratio. At 3/2 that is `50% * 2 / 3`. Keep this in
   step with `.av8-lc__media`'s ratio - the two lines only work as a pair. */
.av8-lc__stats {
    position: absolute;
    left: 50%;
    top: 0;
    /* The percentage half centres it; --av8-lc-panel-drop is a deliberate offset off that centre,
       added as its OWN term so the two ideas stay separable. Folding the drop into the ratio
       would hide it inside the number that has to track `aspect-ratio`, and the next person to
       change the media box would carry the offset along with it without knowing it was there. */
    margin-top: calc(50% * 2 / 3 + var(--av8-lc-panel-drop, 0px));
    transform: translate(-50%, -50%);
    /* Wider than it was as a badge, and re-measured every time the copy changes. The swap rows
       are two phrases and an arrow in three columns; at 372px half of them wrapped to a second
       line, and at 404px the longest pair of the current copy ("Missing from the homepage" /
       "Emailed to matched pilots") was about 10px over. A wrapped row breaks the one thing this
       layout is for - a single column of arrows the eye can run down - so the panel grows to fit
       the copy rather than the copy shrinking to fit the panel. 418px still leaves ~20px of the
       photograph either side of it on a 460px card. */
    width: calc(100% - 26px);
    max-width: 418px;
    z-index: 2;
    text-align: center;
    background: #fff;
    border: 1px solid var(--av8-snap-line);
    border-radius: 14px;

    /* Tight on purpose. This is a panel of short lines floating over a photograph, not a page
       section: generous padding here reads as empty white rather than as breathing room, and
       every pixel of it pushes the card further past the fold. */
    padding: 14px 18px 15px;
    box-shadow: 0 16px 40px rgba(27, 68, 157, .20);
}

/* The small heading over the panel. B612 caps in muted grey - the same eyebrow the Reach Block
   runway uses below the hero, so the card and the chart read as one system. Muted, because the
   figure under it is the line; this only says what kind of line it is. */
.av8-lc__kicker {
    display: block;
    font-family: 'B612', sans-serif;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--av8-snap-muted);
    margin: 0 0 6px;
}

.av8-lc__stathead {
    display: flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
}

.av8-lc__statnum {
    font-family: 'B612', sans-serif;
    font-size: 2.1rem;
    font-weight: 800;
    line-height: 1;
    color: var(--av8-snap-navy);
}

.av8-lc__statlabel {
    font-family: 'Montserrat', sans-serif;
    font-size: .84rem;
    font-weight: 600;
    color: var(--av8-snap-muted);
}

/* THE MULTIPLIER LINE, AND ONLY IT. Scoped to --mult because the same two classes render the
   lifetime view count one branch below, where green would praise the very number the sentence
   above it calls quiet.

   Green on the figure and navy on the words is the hero headline read back: there it is navy
   "Unlock Up To" and green "10x More Pilot Views", so the card repeats the pairing rather than
   introducing a third one. The label leaves grey for navy in the same move - once the figure is
   green, a muted caption beside it reads as disclaimer, and this line is the offer. */
.av8-lc__stathead--mult .av8-lc__statnum {
    color: var(--av8-snap-green);
}

/* "Up to" - the same weight and colour as the words after the figure, because it is the same
   sentence. Styling it as a separate eyebrow would break the line into a label and a claim, which
   is exactly the reading this wording exists to avoid. */
.av8-lc__stathead--mult .av8-lc__statpre {
    font-family: 'Montserrat', sans-serif;
    font-size: .84rem;
    font-weight: 600;
    color: var(--av8-snap-navy);
}

.av8-lc__stathead--mult .av8-lc__statlabel {
    color: var(--av8-snap-navy);
}

/* No number to lead with, so the sentence carries the line on its own. */
.av8-lc__statlabel--wide {
    font-size: .95rem;
    color: var(--av8-snap-ink);
}

/* `balance` so the sentence does not end on an orphaned "month." - the whole panel is three short
   lines and a one-word last line is the difference between a designed card and a wrapped one.
   Browsers without it simply wrap as before. */
.av8-lc__statnote {
    font-family: 'Montserrat', sans-serif;
    font-size: .86rem;
    line-height: 1.45;
    color: var(--av8-snap-ink);
    margin: 8px 0 0;
    text-wrap: balance;
}

.av8-lc__statnote b {
    color: var(--av8-snap-green);
    font-weight: 800;
}

/* THE CLAIM LINE. Smaller and quieter than the note above it, because it is the cheaper of the
   two acts on this card and does not compete with the plan button - it precedes it. Rendered
   only in the per-visitor response (Snapshot_Service::claim_line()), so this rule matches
   nothing in the cached page. */
.av8-lc__claim {
    font-family: 'Montserrat', sans-serif;
    font-size: .8rem;
    line-height: 1.45;
    color: var(--av8-snap-ink);
    margin: 10px 0 0;
    opacity: .85;
}

/* THE SAME LINE, ON A CARD THAT HAS NO PANEL. On /enhance-your-listing/ and
   /enhance-your-live-listing/ the card is rendered with stats="off", so this sentence is no longer
   inside the absolutely-positioned panel and has no placement of its own - it would sit flush
   against the card edge while the title and place above it are indented by the body's padding.
   These four declarations put it back in step with them and nothing else; every rule above still
   applies. */
.av8-lc__claim--flow {
    padding: 0 14px 14px;
    margin: 2px 0 0;
    text-align: left;
    opacity: 1;
}

.av8-lc__claim a {
    color: var(--av8-snap-ink);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.av8-lc__claim a:hover,
.av8-lc__claim a:focus {
    color: var(--av8-snap-green);
}

/* MUTED, AND NOT GREEN. This is the only link in the panel and it is a detour, not the
   conversion: green here would collide with the page's own green button and with the multiplier
   above, and a green thing on a pricing page reads as "buy" - so the one visitor who clicks it
   expecting checkout lands on wp-login instead. Navy is no better now that the label beside the
   figure is navy at the same weight; the two competed and the underline was carrying the whole
   distinction.

   With this the panel spends one colour per role - green states the offer, navy states the fact,
   grey offers the secondary action - and the underline is what makes it a link. */
.av8-lc__statnote a {
    color: var(--av8-snap-muted);
    font-weight: 600;
    text-decoration: underline;
}

.av8-lc__statnote a:hover,
.av8-lc__statnote a:focus {
    color: var(--av8-snap-navy);
}

/* THE FOOTNOTE UNDER THE ROWS. Deliberately the quietest thing in the panel: it is the only
   element here that leads AWAY from the decision, and it earns its place only by being available
   to the reader who goes looking for it - never by catching the eye of one who was not. Smaller
   than the swap rows, above a hairline that separates it from them, and no margin large enough to
   make it feel like a second call to action. */
.av8-lc__statnote--foot {
    margin: 10px 0 0;
    padding: 8px 0 0;
    border-top: 1px solid var(--av8-snap-line);
    font-size: .72rem;
    text-align: center;
}


/* WHAT CHANGES, ONE ROW PER THING - the left half is what makes the multiplier above checkable.
   Grey on the left and navy bold on the right, with the arrow doing the work a sentence would:
   the eye reads left to right and lands on the plan's side, which is the only reading order this
   panel wants. Right-aligning the left column pulls both halves against the arrow, so five rows
   of unequal length still read as one column of arrows rather than as ragged text. */
.av8-lc__swap {
    margin: 11px 0 0;
    padding: 11px 0 0;
    border-top: 1px solid var(--av8-snap-line);
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.av8-lc__swap li {
    display: grid;

    /* The ratio is measured, not chosen, and it has to be re-measured whenever either column's
       copy changes: a grid template is shared by every row, so each column is only ever as wide
       as its own longest line, and one line that wraps breaks the single column of arrows this
       whole layout exists for.

       At the current copy the extremes are "Missing from the homepage" (176px) on the left and
       "Emailed to matched pilots" (163px) on the right, so the left column is now the wider of
       the two. It was the other way round one revision ago, when Basic's side read "Nobody is
       told" - which is worth knowing before assuming either side is structurally longer. */
    grid-template-columns: 1.07fr auto 1fr;
    align-items: center;
    gap: 8px;
    font-family: 'Montserrat', sans-serif;

    /* .78rem, down from .82rem, and the 4%% is not cosmetic - it is what makes the current copy
       fit. At .82rem the two extremes need 391px of row and the panel offers 381px; the choice
       was a smaller panel margin over the photograph, a shorter phrase, or half a pixel of type.
       Half a pixel is the one nobody notices. If a future revision shortens either extreme, this
       goes back to .82rem. */
    font-size: .78rem;
    line-height: 1.25;
}

/* Muted, never struck through and never red: this is her listing as it stands today, described
   the way she would describe it, not a fault being pointed at. */
.av8-lc__swapa {
    text-align: right;
    color: var(--av8-snap-muted);
}

.av8-lc__swaparr {
    color: #cfd6e2;
    font-size: .9rem;
    line-height: 1;
}

.av8-lc__swapb {
    text-align: left;
    color: var(--av8-snap-navy);
    font-weight: 700;
}

/* THE ARROWS BELONG TO THE CARD, so they sit under its edge rather than a screen's worth below
   it. The text rail's viewport carries bottom padding for its own shadow; this card has its own,
   and the padding only pushed the controls out of the card's orbit. */
.av8-lc .av8-snap__viewport {
    padding-bottom: 0;
}

.av8-lc .av8-snap__nav {
    margin-top: 6px;
    justify-content: center;
}

/* ...BUT THE ARROWS ARE CONTROLS, NOT CONTENT, AND THE HERO ROW COULD NOT TELL THE DIFFERENCE.
   The card sits in a flex row beside the headline with `align-self: center`, so what gets centred
   is the widget's box - and in carousel mode that box is 6px of shadow room, then the card, then
   46px of arrows. Measured on a real owner card at 1707px:

     widget box   0 - 492.2      centre 246.1
     the card     6 - 446.2      centre 226.1   <- 20px above the row's centre

   Twenty pixels of invisible chrome hanging off the bottom, dragging the card up. A reader sees
   a card that floats high next to the headline and no reason why. Only owners with more than one
   listing ever saw it: without a carousel there is no nav, `:has()` does not match, and nothing
   here applies - which is also why the anonymous page measures perfectly centred and this went
   unnoticed.

   The counterweight goes above rather than the arrows coming out of flow: the Elementor wrapper
   the shortcode sits in carries `overflow: hidden`, so anything positioned outside the widget box
   is clipped - absolute arrows would simply disappear. It also squares the white frame around the
   card, which was tight at the top and open at the bottom for exactly the same reason.

   The two numbers below are one measurement: the nav's own height (40px arrow + its 6px margin)
   less the 6px of viewport padding already above the card. Change the arrow size and this moves
   with it. */
.av8-lc {
    --av8-lc-nav-h: 46px;
}

/* Desktop only, and not merely as a precaution: the arrows are `display: none` under 767px (touch
   swiping replaces them) while the markup stays, so an unscoped rule would pad against chrome
   that is not being drawn. The hero also stacks into one column there, which is what the
   counterweight exists to correct in the first place.

   Keyed on `--rail`, the class `card_shell()` already puts on the wrapper when there is more than
   one card, because that is the same condition that renders the nav - a single card gets neither.
   Reading the class beats matching on `:has(.av8-snap__nav)`: same result, and it cannot come
   apart from the markup that decides it. */
@media (min-width: 768px) {
    .av8-lc--rail {
        padding-top: calc(var(--av8-lc-nav-h) - 6px);
    }
}

@media (max-width: 767px) {
    .av8-lc {
        max-width: 100%;
    }

    /* NOT AN OVERLAY ON A PHONE. On a narrow card the panel is wider relative to the photo and
       its lines wrap more, so it grows while the photo it floats on shrinks - it would cover the
       photo entirely and still reach the title. Stacked instead: photo, listing, then the panel
       under it, which is also the reading order. It is the last child of the card already, so
       `static` is the whole change. */
    .av8-lc__stats {
        position: static;
        transform: none;
        margin: 12px 0 0;
        width: auto;
        max-width: none;
        padding: 16px 14px 18px;

        /* The swap rows below size their type off this element's width, not the viewport's.
           Stated as a container so the sum they have to fit inside - panel width minus this
           padding - is the number the browser measures rather than one hardcoded here. The
           previous attempt used vw and a constant for the page's gutters, which is a constant
           that stops being true the first time somebody edits the section's padding in
           Elementor. */
        container-type: inline-size;
    }

    /* Nothing floats over the card here, so it does not need to be faded down either. */
    .av8-lc__fade {
        opacity: 1;
    }

    /* Back to a thumbnail's proportions: the taller box existed to give the panel room to float
       in, and on a phone it no longer floats. */
    .av8-lc__media {
        aspect-ratio: 16 / 11;
    }

    /* ONE LINE PER PAIR, ON A PHONE TOO. These rows stacked - Basic on one line, the arrow on a
       second, the plan on a third - which cost 44px a row and, worse, broke the comparison: two
       phrases on separate lines read as two statements, and the whole point of the row is that
       they are one.

       Two changes make a pair fit across ~260-330px. First, drop the shared grid: its columns are
       as wide as the LONGEST phrase in each column, so every row paid for "Missing from the
       homepage" and "Emailed to matched pilots" at once - 343px of text before the arrow. As a
       flex row each pair is only as wide as itself, and the widest is 285px. The price is that
       the arrows no longer line up in a column; on a phone each row is centred on its own, which
       is the trade the single line is worth.

       Second, the type scales with the panel instead of being picked for one screen width. The
       widest pair needs about 23.96px of row per 1px of font, plus the arrow and its two gaps -
       so `4.17cqi` is that relationship solved for the font size, and the row is always just
       inside its container. Measured on production, not derived: 11.6px at a 390px viewport,
       10.9px at 375, 10.3px at 360, all five rows on one line. Below ~340px the floor takes over
       and the longest pair wraps again, which is the correct place to give up.

       If the copy changes, re-measure. A phrase longer than "Missing from the homepage → A
       homepage slot" makes 4.17 wrong, and the symptom is one row silently wrapping on a phone
       nobody in the office is holding. */
    .av8-lc__swap li {
        display: flex;
        justify-content: center;
        align-items: baseline;
        grid-template-columns: none;
        gap: 5px;
        font-size: clamp(.64rem, calc(4.17cqi - 0.5px), .78rem);
    }

    .av8-lc__swapa,
    .av8-lc__swapb {
        text-align: center;
    }

    /* `em`, so the arrow tracks the row it belongs to rather than staying one fixed size while
       the phrases either side of it shrink. */
    .av8-lc__swaparr {
        font-size: .9em;
    }

    .av8-lc__body {
        padding-bottom: 16px;
    }

    /* The number already clamps against the viewport; the panel just needs its padding back. */
    .av8-lc__cmp {
        column-gap: 7px;
    }

    /* The arrows stay on mobile here, unlike the text rail: with one card filling the viewport
       there is nothing peeking to suggest a swipe would do anything. */
    .av8-lc .av8-snap__nav {
        display: flex;
    }
}

/* THE COMPARISON - one row, two figures, the arithmetic between them.
   A grid rather than flex so the label / number / caption rows line up across both columns
   whatever the captions wrap to; the operator is placed into the number row explicitly. */
.av8-lc__cmp {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: 10px;
    row-gap: 2px;
}

/* The wrappers exist for the markup's sake only - `contents` lets their children become grid
   items directly, which is what makes the two columns share one row grid and line up. */
.av8-lc__cmpcol {
    display: contents;
}

.av8-lc__cmpcol > * {
    grid-column: 1;
}

/* Navy for what was measured, green for what is on offer - the same split the whole site uses,
   and the reason the left column must not be grey: grey reads as disabled, and their own number
   is the one thing on this card that is certain. */
.av8-lc__cmplabel {
    grid-row: 1;
    font-family: 'Montserrat', sans-serif;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--av8-snap-navy);
}

.av8-lc__cmpcol--plan .av8-lc__cmplabel {
    grid-column: 3;
    color: var(--av8-snap-green);
}

.av8-lc__cmpnum {
    grid-row: 2;
    font-family: 'B612', 'Montserrat', sans-serif;
    /* Both figures the same size: the gap is the digits' job, not the type's. Shrinks with the
       card so a five-figure projection never wraps mid-number. */
    font-size: clamp(1.55rem, 6.4vw, 2.05rem);
    font-weight: 800;
    line-height: 1.1;
    /* Grey for what was measured, blue for what is on offer - swapped from navy/green 2026-09-11
       so the brand blue lands on the plan being sold, not on the reader's own current count. */
    color: var(--av8-snap-muted);
    /* Tabular figures: without them every digit change during the count-up shifts the number's
       width, and a 1400ms animation spends most of it visibly jittering. */
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
}

.av8-lc__cmpcol--plan .av8-lc__cmpnum {
    grid-column: 3;
    color: var(--av8-snap-navy);
}

.av8-lc__cmpsub {
    grid-row: 3;
    font-family: 'Montserrat', sans-serif;
    font-size: .68rem;
    line-height: 1.35;
    color: var(--av8-snap-muted);
}

.av8-lc__cmpcol--plan .av8-lc__cmpsub {
    grid-column: 3;
    color: var(--av8-snap-ink);
}

/* The operator, on the number row so it reads as "127 x10 1,270" left to right. */
.av8-lc__cmpop {
    grid-column: 2;
    grid-row: 2;
    font-family: 'B612', 'Montserrat', sans-serif;
    font-size: .78rem;
    font-weight: 800;
    line-height: 1;
    color: var(--av8-snap-green);
    background: rgba(113, 182, 59, .12);
    border-radius: 999px;
    padding: 5px 8px;
    white-space: nowrap;
}

/* =============================================================================================
   .av8-lc--plain - the card with NO stats panel
   =============================================================================================

   /enhance-your-listing/ (44263) and /enhance-your-live-listing/ (49779) render this card with
   stats off, and card_shell() marks them `--plain`. Every rule above that bends the card around a
   panel floating over its photograph - the .7 opacity, the 3/2 box, the price moved to the top,
   Featured squeezed into the badge row - buys nothing on a card that has no panel, and on
   2026-09-10 it replaced a hero those two pages had carried as a hand-written mock: opaque, 16/11,
   badges stacked down the left with icons, Featured alone in the top-right corner, the price in
   the bottom-right.

   These values are that mock's inline styles, copied, not re-chosen. Source:
   deployments/2026-09-10_1230_claim-fixes-plantok-card/rollback/44263-pre-patch-rendered.html
   (identical in 0docs/backups/reach-block-live-push-20260910/{44263,49779}_elementor_data.before.json).

   `line-height: inherit` on the body text is deliberate: the mock set none there, so it took the
   theme's - and the only faithful way to reproduce an inherited value is to inherit it. The
   photo's chrome takes 1.6, which the mock set on its image box.

   /relaunch-your-listing/ (49490) keeps its stats panel, never gets this class, and nothing here
   reaches it. Two classes of specificity also outrank the phone breakpoint above without
   !important. The shell carries the class, so the reader's own listing swapped in by token gets
   the same look. */

.av8-lc--plain {
    max-width: 420px;
}

.av8-lc--plain .av8-lc__fade {
    opacity: 1;
}

.av8-lc--plain .av8-lc__media {
    aspect-ratio: 16 / 11;
    line-height: 1.6;
}

/* Warm light from above instead of the darkening wash - the mock's own glow. */
.av8-lc--plain .av8-lc__media::after {
    background: radial-gradient(120% 90% at 50% -8%, rgba(255, 232, 190, .95), rgba(255, 232, 190, 0) 62%);
    mix-blend-mode: soft-light;
}

.av8-lc--plain .av8-lc__badges {
    top: clamp(8px, 2.5vw, 13px);
    left: clamp(8px, 2.5vw, 13px);
    max-width: none;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 5px;
    z-index: 4;
}

.av8-lc--plain .av8-lc__badge,
.av8-lc--plain .av8-lc__state {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 9px;
    font-size: clamp(.54rem, 2.3vw, .64rem);
    letter-spacing: 0;
    line-height: inherit;
    border-radius: 6px;
}

/* "On Basic" on the reader's own listing takes the first badge's slot. */
.av8-lc--plain .av8-lc__state {
    top: clamp(8px, 2.5vw, 13px);
    left: clamp(8px, 2.5vw, 13px);
    z-index: 4;
}

.av8-lc--plain .av8-lc__featured {
    position: absolute;
    top: clamp(8px, 2.5vw, 13px);
    right: clamp(8px, 2.5vw, 13px);
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    font-size: clamp(.56rem, 2.3vw, .66rem);
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    line-height: inherit;
    white-space: nowrap;
    border-radius: 7px;
    box-shadow: 0 6px 16px rgba(90, 148, 47, .5);
}

.av8-lc--plain .av8-lc__icon {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

.av8-lc--plain .av8-lc__price {
    top: auto;
    right: clamp(8px, 2.5vw, 13px);
    bottom: clamp(8px, 2.5vw, 13px);
    z-index: 3;
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(.82rem, 3.6vw, 1.04rem);
    font-weight: 800;
    line-height: inherit;
    padding: 6px 12px;
    border-radius: 9px;
}

.av8-lc--plain .av8-lc__body {
    padding: 14px 16px 16px;
}

.av8-lc--plain .av8-lc__title {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 1.05rem;
    font-weight: 800;
    line-height: inherit;
    color: #1b449d;
}

.av8-lc--plain .av8-lc__place {
    font-size: .85rem;
    color: #6b7280;
    margin-top: 3px;
}

.av8-lc--plain .av8-lc__chips {
    gap: 8px;
    margin-top: 12px;
}

.av8-lc--plain .av8-lc__chip {
    display: inline-flex;
    white-space: nowrap;
    padding: 6px 12px;
    font-size: .8rem;
    font-weight: 700;
    line-height: inherit;
    color: #2b3550;
    background: #f7f9fc;
    border: 1px solid #e0e4ec;
    border-radius: 8px;
}

/* In step with the body's 16px sides. */
.av8-lc--plain .av8-lc__claim--flow {
    padding: 0 16px 16px;
}

/* ----------------------------------------------------------------------------------------------
   The token card, while it is being fetched

   The class lands on <html> from an inline script in <head>, so it applies before first paint and
   before the stock card has been drawn. Without it a recipient of the drip watches a hangar in
   Florida sit there for a moment and then dissolve into their own listing, which reads as the page
   correcting a mistake.

   HIDDEN, NOT REMOVED, AND THE BOX KEEPS ITS SIZE. visibility rather than display means the hero
   does not collapse and reflow when the real card lands - the layout is identical either way,
   because both cards are drawn by the same renderer.

   Every exit path in snapshot.js removes the class, including every failure. A visitor whose token
   is dead, whose network dropped, or who has JavaScript off must still see the stock card: with JS
   off the inline script never runs, so the class is never added and this rule never applies.
   ---------------------------------------------------------------------------------------------- */
.av8-lc-token .av8-lc[data-av8-mock] {
    visibility: hidden;
}

/* The shimmer sits on the container the card is hidden inside, so it occupies the same box and
   needs no markup of its own - there is nothing to inject and nothing to remove. */
.av8-lc-token .av8-lc[data-av8-mock] {
    position: relative;
}

.av8-lc-token .av8-lc[data-av8-mock]::after {
    content: '';
    visibility: visible;
    position: absolute;
    inset: 0;
    border-radius: 14px;
    background: linear-gradient(
        100deg,
        rgba(27, 68, 157, .05) 30%,
        rgba(27, 68, 157, .11) 50%,
        rgba(27, 68, 157, .05) 70%
    );
    background-size: 300% 100%;
    animation: av8-lc-shimmer 1.4s ease-in-out infinite;
}

@keyframes av8-lc-shimmer {
    from { background-position: 150% 0; }
    to   { background-position: -50% 0; }
}

/* A reader who asked for no motion gets the plain placeholder, not a still gradient mid-sweep. */
@media (prefers-reduced-motion: reduce) {
    .av8-lc-token .av8-lc[data-av8-mock]::after {
        animation: none;
    }
}