/* =====================================================================
 * UIUX-009 homepage density (owner carry-over)
 *
 * Three homepage sections, evaluated together:
 *   A. Know What's Inside - image ~42% | content ~58%, compact ingredient
 *      discovery links (2x2) and one "Browse all ingredients" route.
 *   B. AANYA Connect - an ecosystem map: centred intro and one primary
 *      route, the owner-supplied artwork at the centre, the real registry
 *      destinations as pastel surfaces around it with thin connectors
 *      (map >=1280; a 2x2 of groups at 768-1279; one column on phones).
 *   C. Buying Guides - the seasonal editorial feature plus one compact row
 *      of real guide previews: one continuous module, one "View all".
 *
 * Every section keeps the canonical .container (--u8r-page-max /
 * --u8r-gutter). Charcoal focus via --color-focus. No !important; the
 * legacy homepage layers are out-specified, never forced.
 * ===================================================================== */

.home :is(.home-ingredients, .home-connect, .home-guides) {
    --color-focus: #1f2328;
}

/* ---------------------------------------------------------------------
 * A. Know What's Inside
 * ------------------------------------------------------------------- */
.home .home-ingredients {
    display: grid;
    gap: 1.25rem;
}

.home .home-ingredients__media .editorial-context-image {
    margin: 0;
}

.home .home-ingredients__media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border-radius: var(--u8r-radius-tile, 14px);
    object-fit: cover;
}

.home .home-ingredients__media figcaption {
    margin-top: .375rem;
    color: var(--u8r-muted, #59615c);
    font-size: .75rem;
}

.home .home-ingredients__content .section-heading {
    margin: 0 0 1rem;
}

.home .home-ingredients__content .section-description {
    max-width: 38rem;
    margin: .5rem 0 0;
}

.home .home-ingredients__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
}

.home .home-ingredients__link {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 3rem;
    padding: .5rem .75rem;
    border: 1px solid var(--u8r-rule, #d9deda);
    border-radius: 12px;
    background: transparent;
    color: var(--u8r-ink, #181a19);
    font-size: .9375rem;
    font-weight: 650;
    line-height: 1.3;
    text-decoration: none;
    transition: background-color .16s ease, border-color .16s ease;
}

.home .home-ingredients__link:hover,
.home .home-ingredients__link:focus-visible {
    border-color: var(--u8r-rule-strong, #b7bfb9);
    background: var(--u8r-surface-muted, #f2f2f2);
}

.home .home-ingredients__link:focus-visible,
.home .home-ingredients__all:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}

.home .home-ingredients__initial {
    display: inline-grid;
    flex: 0 0 2rem;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border: 1px solid var(--u8r-rule, #d9deda);
    border-radius: 50%;
    background: #fff;
    font-size: .8125rem;
    font-weight: 700;
}

.home .home-ingredients__name {
    min-width: 0;
    overflow-wrap: anywhere;
}

.home .home-ingredients__arrow {
    display: inline-flex;
    margin-left: auto;
    color: var(--u8r-muted, #59615c);
}

.home .home-ingredients__arrow svg,
.home .home-ingredients__all svg {
    width: 1rem;
    height: 1rem;
}

.home .home-ingredients__all {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    min-height: 1.5rem;
    color: var(--u8r-ink, #181a19);
    font-size: .9375rem;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: var(--u8r-rule-strong, #b7bfb9);
    text-underline-offset: 3px;
}

@media (prefers-reduced-motion: no-preference) {
    .home .home-ingredients__arrow svg {
        transition: transform .16s ease;
    }

    .home .home-ingredients__link:hover .home-ingredients__arrow svg,
    .home .home-ingredients__link:focus-visible .home-ingredients__arrow svg {
        transform: translateX(3px);
    }
}

@media (min-width: 768px) {
    .home .home-ingredients {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        align-items: center;
        gap: clamp(1.5rem, 3.5vw, 3.5rem);
    }

    .home .home-ingredients__media img {
        aspect-ratio: 3 / 2;
    }
}

@media (max-width: 767px) {
    .home .home-ingredients__link {
        gap: .5rem;
        padding: .5rem .625rem;
        font-size: .875rem;
    }

    .home .home-ingredients__initial {
        flex-basis: 1.75rem;
        width: 1.75rem;
        height: 1.75rem;
        font-size: .75rem;
    }
}

@media (max-width: 359px) {
    .home .home-ingredients__list {
        grid-template-columns: 1fr;
    }
}

/* ---------------------------------------------------------------------
 * B. AANYA Connect ecosystem map (owner-approved visual direction)
 *
 * Pastel semantic families (surface tint / icon disc / glyph / connector).
 * Type is always charcoal; no green text and no green CTA (owner). Measured
 * contrast: charcoal on every tint >= 15.6:1; secondary text (#4b524e) on
 * every tint >= 7.1:1; glyph on its disc >= 4.1:1 (non-text >= 3:1).
 * Connector accents are decorative only. The lavender, coral and aqua
 * families are softened from the existing --discovery-* accents.
 * ------------------------------------------------------------------- */
.home .home-connect {
    --hc-ink: var(--u8r-ink, #181a19);
    --hc-muted: #4b524e;
    --hc-brand-tint: #f0f6ee;
    --hc-brand-disc: #dcebd6;
    --hc-brand-glyph: #3f7a3a;
    --hc-brand-line: #7fae74;
    --hc-supplier-tint: #fdf4ea;
    --hc-supplier-disc: #f8e3c8;
    --hc-supplier-glyph: #8a5410;
    --hc-supplier-line: #e0a35a;
    --hc-farmer-tint: #edf7f1;
    --hc-farmer-disc: #d3ecdc;
    --hc-farmer-glyph: #2d6e45;
    --hc-farmer-line: #5fb07e;
    --hc-nutritionist-tint: #f4f1fb;
    --hc-nutritionist-disc: #e3dcf5;
    --hc-nutritionist-glyph: #584894;
    --hc-nutritionist-line: #9d8bd6;
    --hc-creator-tint: #fcf1f3;
    --hc-creator-disc: #f6dbe1;
    --hc-creator-glyph: #983a53;
    --hc-creator-line: #de8199;
    --hc-retailer-tint: #eff4fb;
    --hc-retailer-disc: #d9e5f6;
    --hc-retailer-glyph: #2f5d98;
    --hc-retailer-line: #6f9bd8;
    --hc-exim-tint: #ebf6f5;
    --hc-exim-disc: #d1ebe8;
    --hc-exim-glyph: #1d6962;
    --hc-exim-line: #4fb1a8;
    --hc-investor-tint: #f7f2e7;
    --hc-investor-disc: #efe2bf;
    --hc-investor-glyph: #806020;
    --hc-investor-line: #c2a45b;
    --connect-art: 180px;
    display: grid;
    gap: clamp(1.5rem, 3vw, 2.25rem);
}

.home .home-connect .home-connect__dest--brand { --hc-tint: var(--hc-brand-tint); --hc-disc: var(--hc-brand-disc); --hc-glyph: var(--hc-brand-glyph); }
.home .home-connect .home-connect__dest--supplier { --hc-tint: var(--hc-supplier-tint); --hc-disc: var(--hc-supplier-disc); --hc-glyph: var(--hc-supplier-glyph); }
.home .home-connect .home-connect__dest--farmer { --hc-tint: var(--hc-farmer-tint); --hc-disc: var(--hc-farmer-disc); --hc-glyph: var(--hc-farmer-glyph); }
.home .home-connect .home-connect__dest--nutritionist { --hc-tint: var(--hc-nutritionist-tint); --hc-disc: var(--hc-nutritionist-disc); --hc-glyph: var(--hc-nutritionist-glyph); }
.home .home-connect .home-connect__dest--creator { --hc-tint: var(--hc-creator-tint); --hc-disc: var(--hc-creator-disc); --hc-glyph: var(--hc-creator-glyph); }
.home .home-connect .home-connect__dest--retailer { --hc-tint: var(--hc-retailer-tint); --hc-disc: var(--hc-retailer-disc); --hc-glyph: var(--hc-retailer-glyph); }
.home .home-connect .home-connect__dest--exim { --hc-tint: var(--hc-exim-tint); --hc-disc: var(--hc-exim-disc); --hc-glyph: var(--hc-exim-glyph); }
.home .home-connect .home-connect__dest--investor { --hc-tint: var(--hc-investor-tint); --hc-disc: var(--hc-investor-disc); --hc-glyph: var(--hc-investor-glyph); }

.home .home-connect__link--brand { --hc-line: var(--hc-brand-line); }
.home .home-connect__link--supplier { --hc-line: var(--hc-supplier-line); }
.home .home-connect__link--farmer { --hc-line: var(--hc-farmer-line); }
.home .home-connect__link--nutritionist { --hc-line: var(--hc-nutritionist-line); }
.home .home-connect__link--creator { --hc-line: var(--hc-creator-line); }
.home .home-connect__link--retailer { --hc-line: var(--hc-retailer-line); }
.home .home-connect__link--exim { --hc-line: var(--hc-exim-line); }
.home .home-connect__link--investor { --hc-line: var(--hc-investor-line); }

/* Intro: centred, charcoal throughout. */
.home .home-connect__intro {
    display: grid;
    justify-items: center;
    text-align: center;
}

.home .home-connect__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    margin: 0 0 .75rem;
    color: var(--hc-muted);
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.home .home-connect__eyebrow::before,
.home .home-connect__eyebrow::after {
    content: "";
    width: 1.75rem;
    height: 1px;
    background: var(--u8r-rule-strong, #b7bfb9);
}

.home .home-connect .home-connect__intro h2 {
    max-width: 20ch;
    margin: 0 auto;
    color: var(--hc-ink);
    font-size: clamp(1.875rem, 2.8vw, 2.75rem);
    line-height: 1.08;
}

.home .home-connect__lede {
    max-width: 36rem;
    margin: .75rem auto 1.25rem;
    color: var(--hc-muted);
    line-height: 1.6;
}

.home .home-connect__primary {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 2.75rem;
    padding: .625rem 1.25rem;
    border-radius: 999px;
    background: var(--hc-ink);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
}

.home .home-connect__primary:hover {
    background: #2d302e;
    color: #fff;
}

.home .home-connect__primary:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 3px;
}

.home .home-connect__primary svg {
    width: 1rem;
    height: 1rem;
}

/* Artwork: the owner original's WebP (453x464), never upscaled; a subtle
   neutral ring and a very soft halo, never a card. */
.home .home-connect__art {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.home .home-connect__ring {
    position: relative;
    display: inline-grid;
    padding: .75rem;
    border: 1px solid #e4e6e4;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 .625rem rgb(240 244 238 / 70%);
}

.home .home-connect__ring img {
    display: block;
    width: var(--connect-art);
    height: auto;
    aspect-ratio: 453 / 464;
    object-fit: contain;
}

.home .home-connect__lines {
    display: none;
}

.home .home-connect__caption {
    display: grid;
    justify-items: center;
    text-align: center;
}

.home .home-connect__motto {
    margin: 0;
    color: var(--hc-muted);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.home .home-connect__statement {
    margin: .25rem 0 0;
    color: var(--hc-muted);
    font-size: .875rem;
}

.home .home-connect__network {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
}

.home .home-connect__group-title {
    margin: 0 0 .625rem;
    color: var(--hc-muted);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .16em;
    line-height: 1.3;
    text-transform: uppercase;
}

.home .home-connect__list {
    display: grid;
    gap: .625rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Destinations: shallow soft-tinted surfaces. Out-specifies the legacy
   .aanya-connect__route card rules that the stable hook still matches. */
.home .home-connect .home-connect__list .aanya-connect__route {
    display: flex;
    align-items: center;
    gap: .875rem;
    min-height: 4.75rem;
    max-width: none;
    margin: 0;
    padding: .625rem .875rem .625rem .75rem;
    border: 1px solid transparent;
    border-radius: 16px;
    background: var(--hc-tint, #f4f5f4);
    box-shadow: none;
    color: var(--hc-ink);
    text-decoration: none;
    transform: none;
    transition: background-color .16s ease, border-color .16s ease;
}

.home .home-connect .home-connect__list .aanya-connect__route:hover,
.home .home-connect .home-connect__list .aanya-connect__route:focus-visible {
    border-color: color-mix(in srgb, var(--hc-glyph, #59615c) 22%, transparent);
    background: color-mix(in srgb, var(--hc-disc, #e9ecea) 55%, var(--hc-tint, #f4f5f4));
    transform: none;
}

.home .home-connect .home-connect__list .aanya-connect__route:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}

.home .home-connect .home-connect__dest-icon {
    display: inline-grid;
    flex: 0 0 2.75rem;
    width: 2.75rem;
    height: 2.75rem;
    place-items: center;
    border-radius: 50%;
    background: var(--hc-disc, #e9ecea);
    color: var(--hc-glyph, #3b423e);
}

.home .home-connect .home-connect__dest-icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

.home .home-connect .home-connect__dest-text {
    display: grid;
    gap: .125rem;
    min-width: 0;
}

.home .home-connect .home-connect__dest-text strong {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
}

.home .home-connect .home-connect__dest-text small {
    color: var(--hc-muted);
    font-size: .8125rem;
    line-height: 1.4;
}

.home .home-connect .home-connect__planned {
    font-weight: 700;
}

.home .home-connect .home-connect__arrow {
    display: inline-grid;
    flex: 0 0 1.75rem;
    width: 1.75rem;
    height: 1.75rem;
    margin-left: auto;
    place-items: center;
    border-radius: 50%;
    color: var(--hc-glyph, #3b423e);
}

.home .home-connect .home-connect__arrow svg {
    width: 1rem;
    height: 1rem;
}

@media (prefers-reduced-motion: no-preference) {
    .home .home-connect .home-connect__arrow svg {
        transition: transform .16s ease;
    }

    .home .home-connect .aanya-connect__route:is(:hover, :focus-visible) .home-connect__arrow svg {
        transform: translateX(3px);
    }
}

@media (max-width: 767px) {
    .home .home-connect .home-connect__list {
        gap: .5rem;
    }

    .home .home-connect .home-connect__list .aanya-connect__route {
        min-height: 4.25rem;
        gap: .75rem;
    }

    .home .home-connect .home-connect__dest-icon {
        flex-basis: 2.5rem;
        width: 2.5rem;
        height: 2.5rem;
    }
}

/* Tablet: a deliberate 2x2 of groups under the artwork. */
@media (min-width: 768px) {
    .home .home-connect {
        --connect-art: 200px;
    }

    .home .home-connect__network {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.75rem clamp(1.5rem, 3vw, 2.5rem);
    }

    .home .home-connect__art,
    .home .home-connect__caption {
        grid-column: 1 / -1;
    }
}

/* 1024-1279: the groups sit left and right of a smaller artwork, without
   connectors - the full map needs a 420px centre plus two ~400px zones, so
   the lines are not squeezed in here. */
@media (min-width: 1024px) and (max-width: 1279px) {
    .home .home-connect__network {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        grid-template-areas:
            "supply art expertise"
            "grow caption trade";
        column-gap: 1.5rem;
        row-gap: 1.25rem;
    }

    .home .home-connect__art {
        grid-area: art;
        align-self: end;
    }

    .home .home-connect__caption {
        grid-area: caption;
        align-self: start;
    }

    .home .home-connect__group--supply { grid-area: supply; }
    .home .home-connect__group--grow { grid-area: grow; }
    .home .home-connect__group--expertise { grid-area: expertise; }
    .home .home-connect__group--trade { grid-area: trade; }
    .home .home-connect__group--more { grid-column: 1 / -1; }
}

/* Ecosystem map (>=1280): a fixed 420 x 428 centre column (artwork centred
   on 210,214) so the connector geometry is exact; destination rows are
   76px on a 10px rhythm; groups sit left and right, inner edges on the
   centre column. */
@media (min-width: 1280px) {
    .home .home-connect {
        --connect-art: 240px;
    }

    .home .home-connect__network {
        grid-template-columns: minmax(0, 1fr) 420px minmax(0, 1fr);
        grid-template-rows: 22px 76px 76px 20px 22px 76px 76px auto;
        column-gap: 0;
        row-gap: 10px;
    }

    .home .home-connect__art {
        grid-column: 2;
        grid-row: 1 / 8;
        width: 420px;
        height: 428px;
    }

    .home .home-connect__lines {
        position: absolute;
        inset: 0;
        display: block;
        width: 420px;
        height: 428px;
        overflow: visible;
        pointer-events: none;
    }

    .home .home-connect__link path {
        fill: none;
        stroke: var(--hc-line);
        stroke-width: 1.5;
        stroke-linecap: round;
        opacity: .7;
    }

    .home .home-connect__link circle {
        fill: var(--hc-line);
    }

    .home .home-connect__caption {
        grid-column: 2;
        grid-row: 8;
        padding-top: .5rem;
    }

    .home .home-connect__group {
        display: grid;
        align-content: start;
        width: min(100%, 26rem);
    }

    .home .home-connect__group-title {
        height: 22px;
        margin: 0 0 10px;
    }

    .home .home-connect__list {
        gap: 10px;
    }

    .home .home-connect .home-connect__list .aanya-connect__route {
        height: 76px;
        min-height: 0;
    }

    .home .home-connect__group--supply { grid-column: 1; grid-row: 1 / 4; justify-self: end; }
    .home .home-connect__group--grow { grid-column: 1; grid-row: 5 / 8; justify-self: end; }
    .home .home-connect__group--expertise { grid-column: 3; grid-row: 1 / 4; justify-self: start; }
    .home .home-connect__group--trade { grid-column: 3; grid-row: 5 / 8; justify-self: start; }
    .home .home-connect__group--more { grid-column: 1 / -1; grid-row: 9; }
}

/* Optional entrance: the connectors fade in once, only without a
   reduced-motion preference; layout is final from the first paint. */
@media (min-width: 1280px) and (prefers-reduced-motion: no-preference) {
    .home .home-connect__lines {
        animation: home-connect-lines-in .6s ease-out both;
    }

    @keyframes home-connect-lines-in {
        from { opacity: 0; }
        to { opacity: 1; }
    }
}

/* ---------------------------------------------------------------------
 * B2. Ecosystem interaction (owner amendment): calm at rest, no idle or
 * continuous motion. Only on the >= 1280 map, where the connectors exist.
 *
 * - Relationship: hovering (fine pointer) or keyboard-focusing a destination
 *   strengthens only its connector and nodes, tints the centre ring in its
 *   family accent and quietens the other paths. Colour/opacity/stroke only,
 *   so it also applies under reduced motion (instantly, no transitions).
 * - Central hover: every path and node together, a stronger ring and a very
 *   soft depth shadow.
 * - Pointer parallax (assets/js/homepage-connect-parallax.js writes clamped
 *   --hc-px/--hc-py in -1..1 inside the art region): the ring plane moves
 *   opposite by at most 1.25px, the artwork forward (net at most 4px) and the
 *   assembly scales to 1.02; the connector/node plane stays still. No tilt -
 *   rotating the bitmap in 3D softens it. Transforms and opacity only; the
 *   supplied artwork is never altered, the art stays decorative and never
 *   becomes focusable. Touch, coarse pointers, < 1280 and reduced motion get
 *   no transforms at all.
 * ------------------------------------------------------------------- */
@media (min-width: 1280px) {
    .home .home-connect__ring::before,
    .home .home-connect__ring::after {
        position: absolute;
        inset: -1px;
        border-radius: 50%;
        content: "";
        opacity: 0;
        pointer-events: none;
    }

    /* Ring emphasis: a firmer rim and a faint halo in the active accent. */
    .home .home-connect__ring::before {
        border: 1.5px solid color-mix(in srgb, var(--hc-ring-accent, var(--hc-brand-line)) 65%, transparent);
        box-shadow: 0 0 0 .625rem color-mix(in srgb, var(--hc-ring-accent, var(--hc-brand-line)) 16%, transparent);
    }

    /* Depth: a very soft organic shadow, central hover only. */
    .home .home-connect__ring::after {
        box-shadow: 0 16px 32px -18px rgb(38 56 40 / 30%);
    }

    .home .home-connect__link circle {
        stroke: color-mix(in srgb, var(--hc-line) 30%, transparent);
        stroke-width: 0;
    }

    /* Keyboard focus on a destination (any pointer type). */
    .home .home-connect__network:has(.home-connect__dest:focus-visible) .home-connect__link path { opacity: .35; }
    .home .home-connect__network:has(.home-connect__dest:focus-visible) .home-connect__ring::before { opacity: 1; }

    .home .home-connect__network:has(.home-connect__dest--brand:focus-visible) .home-connect__link--brand path,
    .home .home-connect__network:has(.home-connect__dest--supplier:focus-visible) .home-connect__link--supplier path,
    .home .home-connect__network:has(.home-connect__dest--farmer:focus-visible) .home-connect__link--farmer path,
    .home .home-connect__network:has(.home-connect__dest--nutritionist:focus-visible) .home-connect__link--nutritionist path,
    .home .home-connect__network:has(.home-connect__dest--creator:focus-visible) .home-connect__link--creator path,
    .home .home-connect__network:has(.home-connect__dest--retailer:focus-visible) .home-connect__link--retailer path,
    .home .home-connect__network:has(.home-connect__dest--exim:focus-visible) .home-connect__link--exim path,
    .home .home-connect__network:has(.home-connect__dest--investor:focus-visible) .home-connect__link--investor path {
        opacity: 1;
        stroke-width: 2.25;
    }

    .home .home-connect__network:has(.home-connect__dest--brand:focus-visible) .home-connect__link--brand circle,
    .home .home-connect__network:has(.home-connect__dest--supplier:focus-visible) .home-connect__link--supplier circle,
    .home .home-connect__network:has(.home-connect__dest--farmer:focus-visible) .home-connect__link--farmer circle,
    .home .home-connect__network:has(.home-connect__dest--nutritionist:focus-visible) .home-connect__link--nutritionist circle,
    .home .home-connect__network:has(.home-connect__dest--creator:focus-visible) .home-connect__link--creator circle,
    .home .home-connect__network:has(.home-connect__dest--retailer:focus-visible) .home-connect__link--retailer circle,
    .home .home-connect__network:has(.home-connect__dest--exim:focus-visible) .home-connect__link--exim circle,
    .home .home-connect__network:has(.home-connect__dest--investor:focus-visible) .home-connect__link--investor circle {
        stroke-width: 5;
    }

    .home .home-connect__network:has(.home-connect__dest--brand:focus-visible) { --hc-ring-accent: var(--hc-brand-line); }
    .home .home-connect__network:has(.home-connect__dest--supplier:focus-visible) { --hc-ring-accent: var(--hc-supplier-line); }
    .home .home-connect__network:has(.home-connect__dest--farmer:focus-visible) { --hc-ring-accent: var(--hc-farmer-line); }
    .home .home-connect__network:has(.home-connect__dest--nutritionist:focus-visible) { --hc-ring-accent: var(--hc-nutritionist-line); }
    .home .home-connect__network:has(.home-connect__dest--creator:focus-visible) { --hc-ring-accent: var(--hc-creator-line); }
    .home .home-connect__network:has(.home-connect__dest--retailer:focus-visible) { --hc-ring-accent: var(--hc-retailer-line); }
    .home .home-connect__network:has(.home-connect__dest--exim:focus-visible) { --hc-ring-accent: var(--hc-exim-line); }
    .home .home-connect__network:has(.home-connect__dest--investor:focus-visible) { --hc-ring-accent: var(--hc-investor-line); }
}

/* Pointer hover: the same relationship emphasis, plus the central hover.
   Never on touch or coarse pointers, so a tap stays one navigation. */
@media (min-width: 1280px) and (hover: hover) and (pointer: fine) {
    .home .home-connect__network:has(.home-connect__dest:hover) .home-connect__link path { opacity: .35; }
    .home .home-connect__network:has(.home-connect__dest:hover) .home-connect__ring::before { opacity: 1; }

    .home .home-connect__network:has(.home-connect__dest--brand:hover) .home-connect__link--brand path,
    .home .home-connect__network:has(.home-connect__dest--supplier:hover) .home-connect__link--supplier path,
    .home .home-connect__network:has(.home-connect__dest--farmer:hover) .home-connect__link--farmer path,
    .home .home-connect__network:has(.home-connect__dest--nutritionist:hover) .home-connect__link--nutritionist path,
    .home .home-connect__network:has(.home-connect__dest--creator:hover) .home-connect__link--creator path,
    .home .home-connect__network:has(.home-connect__dest--retailer:hover) .home-connect__link--retailer path,
    .home .home-connect__network:has(.home-connect__dest--exim:hover) .home-connect__link--exim path,
    .home .home-connect__network:has(.home-connect__dest--investor:hover) .home-connect__link--investor path {
        opacity: 1;
        stroke-width: 2.25;
    }

    .home .home-connect__network:has(.home-connect__dest--brand:hover) .home-connect__link--brand circle,
    .home .home-connect__network:has(.home-connect__dest--supplier:hover) .home-connect__link--supplier circle,
    .home .home-connect__network:has(.home-connect__dest--farmer:hover) .home-connect__link--farmer circle,
    .home .home-connect__network:has(.home-connect__dest--nutritionist:hover) .home-connect__link--nutritionist circle,
    .home .home-connect__network:has(.home-connect__dest--creator:hover) .home-connect__link--creator circle,
    .home .home-connect__network:has(.home-connect__dest--retailer:hover) .home-connect__link--retailer circle,
    .home .home-connect__network:has(.home-connect__dest--exim:hover) .home-connect__link--exim circle,
    .home .home-connect__network:has(.home-connect__dest--investor:hover) .home-connect__link--investor circle {
        stroke-width: 5;
    }

    .home .home-connect__network:has(.home-connect__dest--brand:hover) { --hc-ring-accent: var(--hc-brand-line); }
    .home .home-connect__network:has(.home-connect__dest--supplier:hover) { --hc-ring-accent: var(--hc-supplier-line); }
    .home .home-connect__network:has(.home-connect__dest--farmer:hover) { --hc-ring-accent: var(--hc-farmer-line); }
    .home .home-connect__network:has(.home-connect__dest--nutritionist:hover) { --hc-ring-accent: var(--hc-nutritionist-line); }
    .home .home-connect__network:has(.home-connect__dest--creator:hover) { --hc-ring-accent: var(--hc-creator-line); }
    .home .home-connect__network:has(.home-connect__dest--retailer:hover) { --hc-ring-accent: var(--hc-retailer-line); }
    .home .home-connect__network:has(.home-connect__dest--exim:hover) { --hc-ring-accent: var(--hc-exim-line); }
    .home .home-connect__network:has(.home-connect__dest--investor:hover) { --hc-ring-accent: var(--hc-investor-line); }

    /* Central hover: the whole connected ecosystem together. */
    .home .home-connect__art:hover .home-connect__link path { opacity: .95; stroke-width: 1.75; }
    .home .home-connect__art:hover .home-connect__link circle { stroke-width: 4; }
    .home .home-connect__art:hover .home-connect__ring::before,
    .home .home-connect__art:hover .home-connect__ring::after { opacity: 1; }
}

/* Motion: transitions and the parallax/scale planes, only without a
   reduced-motion preference. Return to rest ~420ms ease-out, no overshoot;
   while the pointer moves the planes ease toward each new target. */
@media (min-width: 1280px) and (prefers-reduced-motion: no-preference) {
    .home .home-connect__link path {
        transition: opacity .32s ease-out, stroke-width .32s ease-out;
    }

    .home .home-connect__link circle {
        transition: stroke-width .32s ease-out;
    }

    .home .home-connect__ring::before,
    .home .home-connect__ring::after {
        transition: opacity .32s ease-out;
    }
}

@media (min-width: 1280px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .home .home-connect__ring,
    .home .home-connect__ring img {
        transition: transform .42s cubic-bezier(.22, .61, .36, 1);
    }

    .home .home-connect__ring {
        transform: translate3d(calc(var(--hc-px, 0) * -1.25px), calc(var(--hc-py, 0) * -1.25px), 0) scale(var(--hc-scale, 1));
    }

    .home .home-connect__ring img {
        transform: translate3d(calc(var(--hc-px, 0) * 5.25px), calc(var(--hc-py, 0) * 5.25px), 0);
    }

    .home .home-connect__art:hover {
        --hc-scale: 1.02;
    }

    .home .home-connect__art.is-tracking .home-connect__ring,
    .home .home-connect__art.is-tracking .home-connect__ring img {
        transition-duration: .22s;
        will-change: transform;
    }
}

/* ---------------------------------------------------------------------
 * C. Buying Guides: one module (feature + compact previews)
 * ------------------------------------------------------------------- */
/* Directly after Featured Brands (both on the white surface): one quiet
   rule marks the section change instead of two stacked section paddings. */
.home .home-guides--with-feature .customer-promotion {
    padding-top: clamp(2rem, 4vw, 3.5rem);
    padding-bottom: clamp(1.5rem, 2.5vw, 2rem);
    border-top: 1px solid var(--u8r-rule, #d9deda);
}

/* With the feature, the previews continue it (no section gap or rule); the
   module's bottom and the no-feature case keep the homepage section rhythm. */
.home .home-guides--with-feature .home-guides__previews {
    padding-top: 0;
    border-top: 0;
}

.home .home-guides--with-feature .customer-promotion,
.home .home-guides--with-feature .home-guides__previews {
    background: var(--uiux7r2-surface, #fff);
}

.home .home-guides__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .875rem;
}

.home .home-guides .home-guides__title {
    margin: 0;
    color: var(--u8r-ink, #181a19);
    font-family: var(--font-body);
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.3;
}

.home .home-guides__all {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 1.5rem;
    color: var(--u8r-ink, #181a19);
    font-size: .875rem;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: var(--u8r-rule-strong, #b7bfb9);
    text-underline-offset: 3px;
}

.home .home-guides__all:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}

.home .home-guides__all svg {
    width: 1rem;
    height: 1rem;
}

.home .home-guides__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .75rem;
}

/* Compact previews on the canonical story card: shallow thumbnail, clamped
   title, type label, genuine metadata and the quiet action; no excerpt.
   The legacy homepage guide rules (first card spanning the row, forced
   borderless white) are out-specified here. */
.home .home-guides .home-guides__grid > .story-card {
    grid-column: auto;
    height: 100%;
    box-shadow: 0 0 0 1px var(--u8r-rule, #d9deda);
}

.home .home-guides .home-guides__grid > .story-card:hover {
    box-shadow: 0 0 0 1px var(--u8r-rule-strong, #b7bfb9), 0 6px 18px rgb(24 26 25 / 7%);
}

.home .home-guides .home-guides__grid > .story-card .story-card__link {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.home .home-guides .home-guides__grid .story-card__media {
    aspect-ratio: 2 / 1;
}

.home .home-guides .home-guides__grid .story-card__body {
    gap: .3rem;
    padding: .75rem .875rem .875rem;
}

.home .home-guides .home-guides__grid .story-card__type {
    font-size: .6875rem;
}

.home .home-guides .home-guides__grid .story-card__title {
    display: -webkit-box;
    overflow: hidden;
    font-size: 1rem;
    line-height: 1.3;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.home .home-guides .home-guides__grid .story-card__excerpt {
    display: none;
}

.home .home-guides .home-guides__grid .story-card__meta {
    padding-top: .125rem;
    font-size: .75rem;
}

.home .home-guides .home-guides__grid .story-card__action {
    font-size: .8125rem;
}

@media (min-width: 641px) {
    .home .home-guides__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }
}

@media (min-width: 1280px) {
    .home .home-guides__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .home .home-guides__grid[data-guide-count="3"] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Two-column widths (tablet, 1024): compact rows (thumbnail | copy), so a
   2x2 grid never becomes two rows of tall image cards. */
@media (min-width: 641px) and (max-width: 1279px) {
    .home .home-guides .home-guides__grid > .story-card .story-card__link {
        display: grid;
        grid-template-columns: 8.5rem minmax(0, 1fr);
        align-items: stretch;
    }

    .home .home-guides .home-guides__grid .story-card__media {
        aspect-ratio: auto;
        min-height: 100%;
    }
}

/* Phones: the canonical story-card row (thumbnail | copy). */
@media (max-width: 640px) {
    .home .home-guides .home-guides__grid > .story-card .story-card__link {
        display: grid;
        grid-template-columns: 5.5rem minmax(0, 1fr);
        align-items: start;
    }

    .home .home-guides .home-guides__grid .story-card__media {
        aspect-ratio: 1 / 1;
    }
}