/**
 * LIVZO — "Share your experience" (homepage module 9).
 *
 * The contribution composition: the message and its actions on the left, and on the
 * right one resident's experience travelling into the society it is about. The
 * curves and their travelling dots are drawn in the artwork's own 640×560 space so
 * they stay locked to the building at any width; every review shown is a preview of
 * the review experience, not a working form.
 *
 * Motion index
 *   reveal-on-scroll → [data-lz-inview] + .is-in (assets/js/societies.js)
 *   bubble ↔ connector → [data-lz-share-bubble] / [data-lz-share-link] (share-experience.js)
 *   ambient          → glow drift, floating pins, bubble float, data dot on the flow
 *   hover            → button lift + glow, bubble emphasis, chip accent, benefit nudge
 *
 * Layout
 *   ≥1000px : two columns — message (left) │ experience-to-insight composition (right)
 *   <1000px : stacked, in the order the section reads: message, illustration, preview
 */

/* ==========================================================================
   1. Shell + decorative background
   ========================================================================== */

.lz-share {
    position: relative;
    isolation: isolate;
    padding: clamp(64px, 7vw, 104px) 0 clamp(60px, 6.4vw, 92px);
    scroll-margin-top: calc(var(--lz-header-h) + 16px);
}

.lz-share__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.lz-share__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(76px);
}

.lz-share__glow--a {
    top: -10%;
    right: -6%;
    width: min(48vw, 560px);
    aspect-ratio: 1;
    background-image: radial-gradient(circle at 50% 50%, rgba(109, 74, 255, 0.15), rgba(109, 74, 255, 0) 70%);
    animation: lzDrift 27s ease-in-out infinite;
}

.lz-share__glow--b {
    bottom: -18%;
    left: -8%;
    width: min(44vw, 520px);
    aspect-ratio: 1;
    background-image: radial-gradient(circle at 50% 50%, rgba(109, 74, 255, 0.11), rgba(109, 74, 255, 0) 70%);
    animation: lzDrift 33s ease-in-out infinite reverse;
}

.lz-share__grid-lines {
    position: absolute;
    inset: -6% -6% 0;
    background-image: linear-gradient(rgba(11, 27, 51, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(11, 27, 51, 0.04) 1px, transparent 1px);
    background-size: 76px 76px;
    -webkit-mask-image: radial-gradient(ellipse 70% 62% at 50% 46%, #000 0%, transparent 76%);
    mask-image: radial-gradient(ellipse 70% 62% at 50% 46%, #000 0%, transparent 76%);
}

.lz-share__net {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    color: var(--lz-accent);
    opacity: 0.26;
}

/* Faint review quotation marks, rotated like a pair of speech marks. */
.lz-share__quotemark {
    position: absolute;
    color: var(--lz-accent);
}

.lz-share__quotemark .lz-icon { width: 100%; height: 100%; }

.lz-share__quotemark--a {
    top: 13%;
    left: 3%;
    width: 120px;
    opacity: 0.055;
}

.lz-share__quotemark--b {
    right: 5%;
    bottom: 12%;
    width: 92px;
    opacity: 0.045;
    transform: rotate(180deg);
}

.lz-share__bgpin {
    position: absolute;
    color: var(--lz-accent);
}

.lz-share__bgpin .lz-icon { width: 100%; height: 100%; }

.lz-share__bgpin--a {
    top: 62%;
    left: 5%;
    width: 18px;
    opacity: 0.08;
    animation: lzFloat 15s ease-in-out infinite;
}

.lz-share__bgpin--b {
    top: 18%;
    right: 26%;
    width: 14px;
    opacity: 0.06;
    animation: lzFloat 12s ease-in-out infinite reverse;
}

/* ==========================================================================
   2. Body composition
   ========================================================================== */

.lz-share__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(40px, 5vw, 64px);
}

/* Asymmetric: the composition, not the copy, carries the weight. Below this the
   columns would squeeze the artwork until the floating pieces had nowhere to sit,
   so the section stacks and the illustration gets the full width instead. */
@media (min-width: 1150px) {
    .lz-share__body {
        grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr);
        align-items: center;
        gap: clamp(40px, 4.4vw, 76px);
    }
}

/* ==========================================================================
   3. Intro
   ========================================================================== */

.lz-share__intro { min-width: 0; }

.lz-share__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--lz-accent);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.lz-share__eyebrow-ico {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: var(--lz-accent-soft);
    color: var(--lz-accent);
    animation: lzPulse 3.4s var(--lz-ease) infinite;
}

.lz-share__eyebrow-ico .lz-icon { width: 13px; height: 13px; }

.lz-share__title {
    margin-top: 14px;
    font-size: clamp(2rem, 1.3rem + 2.14vw, 3.05rem);
    letter-spacing: -0.036em;
    line-height: 1.1;
    text-wrap: balance;
}

.lz-share__title-accent {
    background-image: linear-gradient(100deg, var(--lz-accent-700) 0%, var(--lz-accent) 34%, #9C86FF 62%, var(--lz-accent) 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: var(--lz-accent);
    -webkit-text-fill-color: transparent;
    animation: lzAccentFlow 9s var(--lz-ease) infinite;
}

.lz-share__lead {
    margin-top: 16px;
    max-width: 46ch;
    color: var(--lz-navy-2);
    font-size: clamp(0.98rem, 0.95rem + 0.22vw, 1.06rem);
    line-height: 1.6;
}

.lz-share__text {
    margin-top: 12px;
    max-width: 48ch;
    color: var(--lz-body);
    font-size: 0.92rem;
    line-height: 1.68;
}

/* --- Actions ------------------------------------------------------------- */

.lz-share__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
}

/* The primary button's gradient comes from .lz-btn--primary; only the glow is
   this module's. */
.lz-share__action-primary:hover {
    box-shadow: 0 18px 34px -18px rgba(109, 74, 255, 0.95), 0 0 0 6px rgba(109, 74, 255, 0.10);
}

.lz-share__action-secondary {
    border-color: var(--lz-line-2);
    background-color: var(--lz-surface);
    color: var(--lz-navy);
    box-shadow: var(--lz-sh-1);
}

.lz-share__action-secondary:hover {
    border-color: rgba(109, 74, 255, 0.34);
    background-color: #FBFAFF;
    color: var(--lz-accent-700);
    transform: translateY(-2px);
    box-shadow: var(--lz-sh-2);
}

/* --- Contribution benefits ---------------------------------------------- */

.lz-share__benefits {
    display: grid;
    gap: 4px;
    margin-top: 26px;
}

.lz-share__benefit {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 9px 10px;
    border-radius: 13px;
    transition: background-color 0.28s var(--lz-ease);
}

.lz-share__benefit:hover { background-color: var(--lz-accent-soft); }

.lz-share__benefit-num {
    width: 20px;
    flex: none;
    padding-top: 3px;
    /* The documented "quiet" floor (≈6.2:1); --lz-muted is only ≈3.7:1. */
    color: #556275;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
}

.lz-share__benefit-ico {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    flex: none;
    color: var(--lz-accent);
    transition: transform 0.28s var(--lz-ease-out);
}

.lz-share__benefit-ico .lz-icon { width: 17px; height: 17px; }

/* The icon moves, the text never does. */
.lz-share__benefit:hover .lz-share__benefit-ico { transform: translateX(3px); }

.lz-share__benefit-body { display: grid; gap: 2px; min-width: 0; }

.lz-share__benefit-title {
    color: var(--lz-navy);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: -0.014em;
}

.lz-share__benefit-text {
    color: var(--lz-body);
    font-size: 0.82rem;
    line-height: 1.5;
}

/* ==========================================================================
   4. Experience-to-insight composition
   ========================================================================== */

/* The card overlaps the foot of the illustration, so the visual owns the
   overhang and the floating pieces never have to reach it. */
.lz-share__visual {
    position: relative;
    min-width: 0;
}

.lz-share__art { position: relative; }

.lz-share__art-img {
    display: block;
    width: 100%;
    height: auto;
}

/* --- Flow ----------------------------------------------------------------- */

.lz-share__flow-svg {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.lz-share__flow-line {
    stroke: var(--lz-accent);
    stroke-opacity: 0.34;
    stroke-width: 1.6;
    stroke-dasharray: 5 7;
    stroke-linecap: round;
}

.lz-share__flow-dot {
    fill: var(--lz-accent);
    fill-opacity: 0.9;
}

.lz-share__link {
    stroke: var(--lz-accent);
    stroke-opacity: 0.18;
    stroke-width: 1.4;
    stroke-dasharray: 4 8;
    stroke-linecap: round;
    transition: stroke-opacity 0.35s var(--lz-ease), stroke-width 0.35s var(--lz-ease);
}

.lz-share__link.is-linked {
    stroke-opacity: 0.62;
    stroke-width: 2;
}

.lz-share__flow {
    position: absolute;
    left: 0;
    top: 48%;
    z-index: 2;
    display: grid;
    justify-items: start;
    gap: 7px;
}

.lz-share__flow-avatar {
    display: block;
    border-radius: 50%;
    box-shadow: 0 0 0 3px var(--lz-bg), 0 10px 22px -12px rgba(11, 27, 51, 0.55);
}

.lz-share__flow-avatar .lz-avatar {
    width: 42px;
    height: 42px;
}

.lz-share__flow-steps {
    display: grid;
    gap: 6px;
}

.lz-share__flow-step {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px 5px 9px;
    border: 1px solid var(--lz-line);
    border-radius: var(--lz-r-pill);
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 1px 2px rgba(11, 27, 51, 0.05);
    color: var(--lz-navy);
    font-size: 0.71rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    white-space: nowrap;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.lz-share__flow-ico {
    display: grid;
    place-items: center;
    flex: none;
    color: var(--lz-accent);
}

.lz-share__flow-ico .lz-icon { width: 14px; height: 14px; }

/* --- Experience bubbles --------------------------------------------------- */

.lz-share__bubbles {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.lz-share__bubble {
    position: absolute;
    width: min(212px, 35%);
    padding: 11px 14px 12px;
    border: 1px solid var(--lz-line);
    border-radius: 18px;
    background-color: rgba(255, 255, 255, 0.97);
    box-shadow: 0 2px 5px rgba(11, 27, 51, 0.05), 0 20px 34px -26px rgba(11, 27, 51, 0.45);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    pointer-events: auto;
    animation: lzCardFloat 9s var(--lz-ease) infinite;
    transition: transform 0.32s var(--lz-ease-out), box-shadow 0.32s var(--lz-ease),
        border-color 0.32s var(--lz-ease);
}

.lz-share__bubble:hover,
.lz-share__bubble.is-linked {
    transform: translateY(-4px);
    border-color: rgba(109, 74, 255, 0.28);
    box-shadow: 0 2px 5px rgba(11, 27, 51, 0.05), 0 26px 44px -26px rgba(74, 40, 220, 0.55);
}

/* Two per side, in tight bands: a snippet can run to two lines, so the bands are
   spaced for the tallest one and the flow/rating take the space beneath. */
.lz-share__bubble--a { left: 0;  top: 0; }
.lz-share__bubble--b { right: 0; top: 0; }
.lz-share__bubble--c { left: 0;  top: 23%; }
.lz-share__bubble--d { right: 0; top: 23%; }

.lz-share__bubble-rating { display: flex; }

.lz-share__bubble-rating .lz-stars__layer .lz-icon { width: 12px; height: 12px; }

.lz-share__bubble-quote {
    margin: 7px 0 0;
    color: var(--lz-navy);
    font-size: 0.83rem;
    font-weight: 600;
    letter-spacing: -0.012em;
    line-height: 1.45;
}

.lz-share__bubble-who { margin-top: 9px; }

.lz-share__bubble-who .lz-avatar {
    width: 26px;
    height: 26px;
    box-shadow: 0 0 0 2px #fff;
}

/* --- Rating --------------------------------------------------------------- */

.lz-share__rating {
    position: absolute;
    right: 0;
    top: 48%;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: 10px 17px 10px 10px;
    border: 1px solid var(--lz-line);
    border-radius: 20px;
    background-color: rgba(255, 255, 255, 0.97);
    box-shadow: 0 2px 5px rgba(11, 27, 51, 0.05), 0 22px 36px -26px rgba(11, 27, 51, 0.45);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.lz-share__rating-ring {
    position: relative;
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    flex: none;
}

.lz-share__rating-ring svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.lz-share__rating-track {
    fill: none;
    stroke: var(--lz-accent-soft-2);
    stroke-width: 4;
}

.lz-share__rating-arc {
    fill: none;
    stroke: var(--lz-accent);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 100;
    transition: stroke-dashoffset 1.4s var(--lz-ease-out);
}

/* Rating band → arc colour (livzo_rating_tone). */
.lz-share__rating-ring--success .lz-share__rating-arc { stroke: var(--lz-band-success); }
.lz-share__rating-ring--warning .lz-share__rating-arc { stroke: var(--lz-band-warning); }
.lz-share__rating-ring--danger .lz-share__rating-arc { stroke: var(--lz-band-danger); }

.lz-share__rating-score {
    color: var(--lz-navy);
    font-size: 1.06rem;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.lz-share__rating-body {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.lz-share__rating-label {
    color: var(--lz-navy);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: -0.012em;
    white-space: nowrap;
}

.lz-share__rating-body .lz-stars__layer .lz-icon { width: 13px; height: 13px; }

.lz-share__rating-caption {
    color: var(--lz-body);
    font-size: 0.66rem;
    font-weight: 500;
    white-space: nowrap;
}

/* ==========================================================================
   5. Review preview card
   ========================================================================== */

/* The card overlaps the foot of the illustration by a fixed share of the
   artwork's own height (the negative margin resolves against the column width,
   which is the artwork's width). Fixing the overlap rather than the gap keeps it
   stable when the card grows — its topics wrap onto another line at some widths. */
.lz-share__card {
    position: relative;
    z-index: 4;
    margin: -12% 2% 0;
    padding: clamp(20px, 2.4vw, 28px) clamp(20px, 2.6vw, 30px);
    border: 1px solid var(--lz-line);
    border-radius: 26px;
    background-color: rgba(255, 255, 255, 0.985);
    box-shadow: 0 3px 8px rgba(11, 27, 51, 0.05), 0 34px 60px -34px rgba(74, 40, 220, 0.5);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: box-shadow 0.34s var(--lz-ease-out), transform 0.34s var(--lz-ease-out);
}

.lz-share__card:hover {
    transform: translateY(-3px);
    box-shadow: 0 3px 8px rgba(11, 27, 51, 0.05), 0 40px 70px -34px rgba(74, 40, 220, 0.62);
}

.lz-share__card-label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--lz-accent);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.lz-share__card-label-ico {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: var(--lz-accent-soft);
    color: var(--lz-accent);
}

.lz-share__card-label-ico .lz-icon { width: 14px; height: 14px; }

.lz-share__card-rating { margin-top: 12px; display: flex; }

.lz-share__card-rating .lz-stars__layer { gap: 3px; }

.lz-share__card-rating .lz-stars__layer .lz-icon { width: 17px; height: 17px; }

.lz-share__card-question {
    margin-top: 9px;
    color: var(--lz-navy);
    font-size: clamp(1.02rem, 0.96rem + 0.44vw, 1.26rem);
    font-weight: 700;
    letter-spacing: -0.026em;
    line-height: 1.35;
}

.lz-share__card-topics { margin-top: 16px; }

.lz-share__card-topics-label {
    color: var(--lz-body);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.lz-share__topics {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 9px;
}

.lz-share__topic {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border: 1px solid var(--lz-line-2);
    border-radius: var(--lz-r-pill);
    background-color: var(--lz-surface);
    color: var(--lz-body);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.25s var(--lz-ease),
        border-color 0.25s var(--lz-ease),
        color 0.25s var(--lz-ease),
        box-shadow 0.25s var(--lz-ease),
        transform 0.25s var(--lz-ease-out);
}

.lz-share__topic:hover {
    border-color: rgba(109, 74, 255, 0.30);
    background-color: var(--lz-accent-soft);
    color: var(--lz-accent-700);
    transform: translateY(-1px);
}

.lz-share__topic.is-active {
    border-color: transparent;
    background-image: linear-gradient(180deg, var(--lz-accent) 0%, var(--lz-accent-600) 100%);
    color: #fff;
    box-shadow: 0 12px 24px -16px rgba(109, 74, 255, 0.95);
}

.lz-share__card-foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--lz-line);
}

.lz-share__card-note {
    flex: 1 1 200px;
    min-width: 0;
    color: var(--lz-body);
    font-size: 0.71rem;
    line-height: 1.45;
}

/* ==========================================================================
   6. Community impact
   ========================================================================== */

.lz-share__impact {
    display: grid;
    justify-items: center;
    gap: 14px;
    margin-top: 20px;
    padding: 18px 22px;
    border: 1px solid var(--lz-line);
    border-radius: 20px;
    background-image: linear-gradient(135deg, rgba(109, 74, 255, 0.07), rgba(109, 74, 255, 0.02)),
        linear-gradient(180deg, var(--lz-surface), var(--lz-bg-2));
    box-shadow: 0 1px 2px rgba(11, 27, 51, 0.04);
}

.lz-share__impact-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--lz-navy);
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    text-align: center;
}

.lz-share__impact-title-ico {
    display: grid;
    place-items: center;
    flex: none;
    color: var(--lz-accent);
}

.lz-share__impact-title-ico .lz-icon { width: 16px; height: 16px; }

.lz-share__impact-steps {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.lz-share__impact-step {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 15px;
}

/* The thin line that makes the three steps read as one progression. */
.lz-share__impact-step + .lz-share__impact-step {
    border-left: 1px solid var(--lz-line-2);
}

.lz-share__impact-ico {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    flex: none;
    border-radius: 50%;
    background-color: var(--lz-accent-soft);
    color: var(--lz-accent);
}

.lz-share__impact-ico .lz-icon { width: 14px; height: 14px; }

.lz-share__impact-label {
    color: var(--lz-body);
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

/* ==========================================================================
   7. Trust line
   ========================================================================== */

.lz-share__trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: clamp(30px, 3.6vw, 46px);
    color: var(--lz-navy-2);
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: -0.012em;
    text-align: center;
}

.lz-share__trust-ico {
    display: grid;
    place-items: center;
    flex: none;
    color: var(--lz-accent);
}

.lz-share__trust-ico .lz-icon { width: 17px; height: 17px; }

/* ==========================================================================
   8. Closing strip
   ========================================================================== */

.lz-share__strip {
    position: relative;
    display: grid;
    gap: clamp(18px, 2.4vw, 28px);
    margin-top: clamp(20px, 2.6vw, 30px);
    padding: clamp(22px, 2.8vw, 34px) clamp(22px, 3vw, 38px);
    border: 1px solid var(--lz-line);
    border-radius: 28px;
    background-image: linear-gradient(135deg, rgba(109, 74, 255, 0.11), rgba(109, 74, 255, 0.03) 52%, rgba(109, 74, 255, 0.09)),
        linear-gradient(180deg, var(--lz-surface), var(--lz-bg-2));
    box-shadow: 0 1px 2px rgba(11, 27, 51, 0.04), 0 22px 46px -38px rgba(11, 27, 51, 0.32);
    overflow: hidden;
}

@media (min-width: 900px) {
    .lz-share__strip {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }
}

.lz-share__strip-skyline {
    position: absolute;
    right: 0;
    bottom: 0;
    width: min(48%, 520px);
    height: 100%;
    color: var(--lz-accent);
    opacity: 0.07;
    pointer-events: none;
}

.lz-share__strip-body { position: relative; min-width: 0; }

.lz-share__strip-title {
    font-size: clamp(1.08rem, 1rem + 0.5vw, 1.34rem);
    letter-spacing: -0.028em;
    text-wrap: balance;
}

.lz-share__strip-text {
    margin-top: 7px;
    max-width: 58ch;
    color: var(--lz-body);
    font-size: 0.88rem;
    line-height: 1.6;
}

.lz-share__strip-actions {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.lz-share__strip-link {
    border-color: var(--lz-line-2);
    background-color: var(--lz-surface);
    color: var(--lz-navy);
    box-shadow: var(--lz-sh-1);
}

.lz-share__strip-link:hover {
    border-color: rgba(109, 74, 255, 0.34);
    background-color: #FBFAFF;
    color: var(--lz-accent-700);
    transform: translateY(-2px);
    box-shadow: var(--lz-sh-2);
}

.lz-share__note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
    color: var(--lz-body);
    font-size: 0.76rem;
    line-height: 1.5;
    text-align: center;
}

.lz-share__note-ico {
    display: grid;
    place-items: center;
    flex: none;
    color: var(--lz-accent);
}

.lz-share__note-ico .lz-icon { width: 14px; height: 14px; }

/* ==========================================================================
   9. Reveal on scroll (scoped copy — the module stays self-contained)
   ========================================================================== */

.has-js .lz-share [data-lz-inview] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.7s var(--lz-ease-out) var(--lz-delay, 0ms),
        transform 0.85s var(--lz-ease-out) var(--lz-delay, 0ms);
    will-change: opacity, transform;
}

.has-js .lz-share [data-lz-inview].is-in {
    opacity: 1;
    transform: none;
    will-change: auto;
}

/* Staggered entrance for the floating pieces, once the composition arrives:
   the line flows in toward the building, the resident lands, then the snippets
   appear one by one. The card rises with the block itself (see the reveal above). */
.has-js .lz-share__visual [data-lz-inview].is-in .lz-share__flow-line {
    animation: lzShareDraw 1.5s var(--lz-ease-out) 0.2s both;
}

.has-js .lz-share__visual [data-lz-inview].is-in .lz-share__flow-avatar {
    animation: lzSharePop 0.5s var(--lz-ease-out) 0.15s both;
}

.has-js .lz-share__visual [data-lz-inview].is-in .lz-share__bubble {
    animation: lzShareIn 0.7s var(--lz-ease-out) both, lzCardFloat 9s var(--lz-ease) 0.7s infinite;
}

.has-js .lz-share__visual [data-lz-inview].is-in .lz-share__bubble--a { animation-delay: 0.18s, 0.88s; }
.has-js .lz-share__visual [data-lz-inview].is-in .lz-share__bubble--b { animation-delay: 0.34s, 1.04s; }
.has-js .lz-share__visual [data-lz-inview].is-in .lz-share__bubble--c { animation-delay: 0.5s, 1.2s; }
.has-js .lz-share__visual [data-lz-inview].is-in .lz-share__bubble--d { animation-delay: 0.66s, 1.36s; }

/* The dashes sweep along the path and settle, so the connector reads as drawn
   toward the society rather than simply switched on. */
@keyframes lzShareDraw {
    from { stroke-dashoffset: -58; opacity: 0; }
    to { stroke-dashoffset: 0; opacity: 1; }
}

@keyframes lzSharePop {
    from { opacity: 0; transform: scale(0.78); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes lzShareIn {
    from { opacity: 0; transform: translateY(16px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ==========================================================================
   10. Responsive
   ========================================================================== */

/* Stacked: no room to float, so every piece becomes a static block in the order
   the section reads — illustration, then the snippets, then the preview. */
@media (max-width: 1149px) {
    .lz-share__visual { padding-bottom: 0; }

    .lz-share__flow-svg { display: none; }

    .lz-share__art {
        display: grid;
        gap: 20px;
    }

    .lz-share__flow {
        position: static;
        justify-items: center;
    }

    .lz-share__flow-steps {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }

    /* Full-bleed swipe row: explicit width stops the row feeding its content width
       back into the column. */
    .lz-share__bubbles {
        position: static;
        display: flex;
        align-items: stretch;
        gap: 12px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin-inline: calc(var(--lz-gutter) * -1);
        padding: 4px var(--lz-gutter) 10px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .lz-share__bubbles::-webkit-scrollbar { display: none; }

    .lz-share__bubble {
        position: static;
        width: 208px;
        flex: none;
        animation: none;
    }

    .lz-share__rating {
        position: static;
        justify-self: center;
    }

    .lz-share__card {
        position: static;
        margin: 20px 0 0;
    }
}

@media (max-width: 620px) {
    .lz-share__actions .lz-btn { width: 100%; }

    .lz-share__impact-steps {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .lz-share__impact-step { padding: 0; }

    .lz-share__impact-step + .lz-share__impact-step {
        border-left: 0;
        border-top: 1px solid var(--lz-line-2);
        padding-top: 12px;
    }

    .lz-share__card { border-radius: 20px; }
    .lz-share__strip { border-radius: 22px; }
    .lz-share__strip-actions .lz-btn { width: 100%; }
}

/* ==========================================================================
   11. Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .has-js .lz-share [data-lz-inview] {
        opacity: 1;
        transform: none;
    }

    /* The travelling dot is SMIL, which CSS cannot pause — it is hidden instead. */
    .lz-share__flow-dot { display: none; }

    .lz-share__title-accent,
    .lz-share__eyebrow-ico,
    .lz-share__glow,
    .lz-share__bgpin,
    .lz-share__bubble,
    .lz-share__flow-line,
    .lz-share__flow-avatar,
    .has-js .lz-share__visual [data-lz-inview].is-in .lz-share__bubble {
        animation: none;
    }

    .lz-share__bubble,
    .lz-share__card,
    .lz-share__topic,
    .lz-share__action-secondary {
        transition: none;
    }
}