/* Homepage-only presentation. Shared public/catalog tokens remain unchanged. */
.page-shopnodes{--sn-home-green:#008b5c;--sn-home-green-dark:#006d49;--sn-home-navy:#10316b;--sn-home-copy:#354f78;--sn-home-line:#dcece7;background:#fff}
.page-shopnodes .site-header{background:rgba(255,255,255,.97);border-bottom-color:#edf4f1}
.page-shopnodes .site-header .brand-logo{filter:brightness(.55)}
.page-shopnodes .nav-shell,.home-shopnodes .container{width:min(calc(100% - 64px),1240px)}
.page-shopnodes .site-nav{color:var(--sn-home-navy);gap:24px}
.page-shopnodes .site-nav a:hover,.page-shopnodes .site-nav a:focus-visible{color:var(--sn-home-green-dark)}
.page-shopnodes .site-nav .button{background:var(--sn-home-green);color:#fff;box-shadow:none}
.page-shopnodes .nav-signin{padding:8px 18px;border:1px solid #83c9b1;border-radius:8px}
.page-shopnodes .nav-toggle span:not(.sr-only){background:var(--sn-home-navy)}
.page-shopnodes :is(a,button):focus-visible{outline:3px solid #008b5c;outline-offset:4px}
.home-shopnodes{background:#fff;color:var(--sn-home-navy)}
.home-shopnodes .shopnodes-eyebrow{margin:0 0 12px;color:var(--sn-home-green-dark);font-size:12px;font-weight:750;letter-spacing:.12em;text-transform:uppercase}
.home-shopnodes .shopnodes-section-lead{max-width:680px;margin:0 auto;color:var(--sn-home-copy);font-size:18px;line-height:1.65}
.home-shopnodes .shopnodes-btn{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:12px 32px;border-radius:9px;font-size:16px;font-weight:750;transition:background .18s ease}
.home-shopnodes .shopnodes-btn-primary{background:var(--sn-home-green);color:#fff;box-shadow:0 5px 14px rgba(0,139,92,.12)}
.home-shopnodes .shopnodes-btn-primary:hover{background:var(--sn-home-green-dark)}
.home-shopnodes .shopnodes-btn-secondary{color:var(--sn-home-green-dark);text-decoration:underline;text-underline-offset:4px}

/* Layered hero: the town scene is the hero's environment, not an image after the copy. */
.home-shopnodes .shopnodes-hero{position:relative;overflow:hidden;min-height:min(790px,86vh);padding:22px 0 0;background:linear-gradient(180deg,#fff 0 45%,#f4fbf7 74%,#eef6fc 100%)}
.home-shopnodes .shopnodes-hero__scenery{position:absolute;left:50%;bottom:-2px;z-index:0;width:min(1500px,110vw);transform:translateX(-50%);pointer-events:none}
.home-shopnodes .shopnodes-hero__scenery img{display:block;width:100%;height:auto;border:0;border-radius:0;box-shadow:none;-webkit-mask-image:linear-gradient(to right,transparent,#000 3%,#000 97%,transparent),linear-gradient(to top,transparent,#000 4%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent,#000 3%,#000 97%,transparent),linear-gradient(to top,transparent,#000 4%);mask-composite:intersect}
.home-shopnodes .shopnodes-hero__content{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;max-width:880px;min-height:inherit;padding-bottom:clamp(150px,22vh,215px);text-align:center}
.home-shopnodes .shopnodes-hero__content::before{content:"";position:absolute;inset:3% -24% 28%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 62% 56% at 50% 45%,rgba(255,255,255,.95),rgba(255,255,255,.7) 45%,rgba(255,255,255,0) 76%)}
.home-shopnodes .shopnodes-hero-logo{width:116px;height:auto;margin:0 auto 14px;clip-path:polygon(0 30%,0 100%,100% 100%,100% 0,15% 0,15% 30%)}
.home-shopnodes .shopnodes-hero h1{max-width:880px;margin:0 auto 20px;font-size:clamp(40px,4.8vw,64px);line-height:1.06;letter-spacing:-.045em;color:var(--sn-home-navy);text-wrap:balance}
.home-shopnodes .shopnodes-hero h1 span,.home-shopnodes .explainer-copy h2 span{color:var(--sn-home-green)}
.home-shopnodes .shopnodes-hero-lead{max-width:670px;margin:0 auto;font-size:19px;line-height:1.6;color:var(--sn-home-copy)}
.home-shopnodes .shopnodes-feature-row{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;max-width:700px;width:100%;margin:25px auto 0;padding:0;list-style:none}
.home-shopnodes .shopnodes-feature-row li{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:14px;font-weight:600;line-height:1.35}
.home-shopnodes .shopnodes-feature-row svg{width:32px;height:32px;fill:none;stroke:var(--sn-home-green);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.home-shopnodes .shopnodes-hero-actions{position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;margin-top:24px}
/* Discovery reuses the hero's layering: the directory artwork is a bottom-anchored
   scenery layer behind the copy, so the section reads as one illustrated
   environment rather than copy followed by a picture. It is unframed (no card,
   border, radius or shadow).
   It also reuses the hero's centered scenery wrapper, and that wrapper -- never the
   image -- owns the width strategy: .shopnodes-hero__scenery is
   width:min(1500px,110vw), centered with left:50% + translateX(-50%), and its image
   is simply width:100% of it. Mirroring the same wrapper here is what puts the hero
   and discovery artwork on identical left/right boundaries at every desktop width,
   so the artwork below must not carry a px/vw width of its own.
   The artwork (1983x793, 2.5:1, transparent sky, mint foreground curves) has real
   alpha at the top and bottom but straight canvas edges along its lower half, so the
   layer stays a little wider than the viewport (110vw) until the hero's own 1500px
   cap takes over; the long horizontal alpha fade then dissolves the remaining
   straight edges into the pale mint section background. The vertical fade is gone on
   purpose: the sky is already transparent and the mint curves at the bottom are
   artwork that must survive. */
.home-shopnodes .shopnodes-discovery__scenery{position:absolute;left:50%;bottom:0;z-index:0;width:min(1500px,110vw);max-width:none;transform:translateX(-50%);pointer-events:none}
.home-shopnodes .shopnodes-discovery__scenery img{display:block;width:100%;height:auto;border:0;border-radius:0;box-shadow:none;-webkit-mask-image:linear-gradient(to right,transparent,#000 5.5%,#000 94.5%,transparent);mask-image:linear-gradient(to right,transparent,#000 5.5%,#000 94.5%,transparent)}
.home-shopnodes .explainer-visual img{display:block;width:100%;height:auto;border:0;border-radius:0;box-shadow:none}

/* The section is tall enough (min 600-700px desktop) for the scenery. Its wash
   starts on the hero's own bottom tone, stays near white through the artwork's
   open sky and pale clouds, then settles into the very light mint sampled from
   the outer/bottom edges of the replacement artwork (#e4f9f4 family) so the
   transparent canvas edges have nothing to reveal. It finishes on the exact
   mint (#f5fcf9) the next explainer uses, so the hand-off to Direct Chat is
   continuous. */
.home-shopnodes .shopnodes-discovery{position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:min(720px,92vh);padding:62px 0 0;background:linear-gradient(180deg,#eef7fc 0,#f7fdfb 14%,#fff 30%,#fdfefd 42%,#f6fcf9 56%,#eff9f5 74%,#f0faf6 88%,#f5fcf9 100%);text-align:center;scroll-margin-top:96px}
.home-shopnodes .shopnodes-discovery__content{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;max-width:880px;padding-bottom:clamp(240px,32vh,330px)}
/* Faint glow keeps the copy readable where it floats over the artwork's sky,
   clouds and distant mountains. It fades to zero inside the content box, so no
   panel, card or oval edge is ever visible. */
.home-shopnodes .shopnodes-discovery__content::before{content:"";position:absolute;inset:0 -14% 22%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 98% 50% at 50% 40%,rgba(255,255,255,.88),rgba(255,255,255,.55) 47%,rgba(255,255,255,0) 79%)}
.home-shopnodes .shopnodes-discovery h2,.home-shopnodes .explainer-copy h2,.home-shopnodes .more-from-partnigram h2{margin:0 0 18px;font-size:clamp(36px,4vw,54px);line-height:1.1;letter-spacing:-.04em;color:var(--sn-home-navy);text-wrap:balance}
.home-shopnodes .shopnodes-category-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));max-width:840px;gap:28px;margin:32px auto 0;padding:0;list-style:none}
.home-shopnodes .shopnodes-category-row li{display:grid;justify-items:center;align-content:start;gap:10px;color:var(--sn-home-navy);font-size:16px;font-weight:700;line-height:1.3}
.home-shopnodes .shopnodes-category-row svg{width:38px;height:38px;fill:none;stroke:var(--sn-home-green);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.home-shopnodes .shopnodes-category-row li::after{content:'';width:30px;height:2px;border-radius:2px;background:#7ed3b6}
/* Explicit variants preserve the alternating desktop composition. */
.home-shopnodes .explainer{padding:58px 0}
.home-shopnodes .explainer.illustration-left{background:#f5fcf9}
.home-shopnodes .explainer.illustration-right + .explainer{background:#f3fafc}
.home-shopnodes .explainer-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:center}
.home-shopnodes .explainer-visual{width:100%;max-width:600px;margin:0}
.home-shopnodes .explainer-visual img{mix-blend-mode:multiply}
.home-shopnodes .explainer-copy{max-width:520px;min-width:0}
.home-shopnodes .illustration-right .explainer-copy{order:-1;justify-self:end}
.home-shopnodes .explainer-copy h2 span{display:block}
.home-shopnodes .explainer-copy > p:not(.shopnodes-eyebrow){margin:0;color:var(--sn-home-copy);font-size:18px;line-height:1.65}
.home-shopnodes .explainer-list{margin:23px 0 0;padding:0;list-style:none;display:grid;gap:12px}
.home-shopnodes .explainer-list li{position:relative;padding-left:35px;font-size:16px;line-height:1.5}
.home-shopnodes .explainer-list li::before{content:'\2713';position:absolute;left:0;top:1px;width:23px;height:23px;display:grid;place-items:center;border-radius:50%;background:var(--sn-home-green);color:#fff;font-size:14px;font-weight:750}

/* Cards belong to the catalog, not to the illustrated story. */
.home-shopnodes .more-from-partnigram{padding:66px 0 80px;background:#fff;text-align:center;border-top:1px solid var(--sn-home-line)}
.home-shopnodes .more-from-partnigram .shopnodes-eyebrow{display:flex;align-items:center;gap:24px}
.home-shopnodes .more-from-partnigram .shopnodes-eyebrow::before,.home-shopnodes .more-from-partnigram .shopnodes-eyebrow::after{content:'';flex:1;height:1px;background:var(--sn-home-line)}
.home-shopnodes .more-from-partnigram h2{font-size:clamp(32px,3.3vw,46px)}
.home-shopnodes .more-from-partnigram .shopnodes-section-lead{margin-bottom:32px}
.home-shopnodes .more-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;text-align:left}
.home-shopnodes .product-card{background:#fff;border-color:var(--sn-home-line);box-shadow:0 6px 24px rgba(16,49,107,.06)}
.home-shopnodes .product-card:hover{transform:none;border-color:#83c9b1}
.home-shopnodes .product-visual{height:230px;background:#f2faf8}
.home-shopnodes .product-visual img{object-fit:contain}
.home-shopnodes .product-body{padding:26px 28px 18px}
.home-shopnodes .product-body h3{color:var(--sn-home-navy);font-size:26px}
.home-shopnodes .product-body p,.home-shopnodes .card-meta{color:var(--sn-home-copy)}
.home-shopnodes .ai-badge{color:var(--sn-home-navy);background:#eef7ff;border-color:#c5def2}
.home-shopnodes .product-footer{padding:20px 28px 26px;border-color:var(--sn-home-line)}
.home-shopnodes .product-card .button{background:var(--sn-home-green);color:#fff;box-shadow:none}
.home-shopnodes .text-link{color:var(--sn-home-green-dark)}
.home-shopnodes .more-link{margin:28px 0 0}
.home-shopnodes .empty-state{background:#f5fcf9;border:1px solid var(--sn-home-line);border-radius:16px;padding:36px;color:var(--sn-home-copy)}

@media(max-width:980px){
    .page-shopnodes .site-nav{background:#fff;border-color:var(--sn-home-line);box-shadow:0 12px 28px rgba(16,49,107,.1)}
    .page-shopnodes .nav-signin{margin-left:0}
    .home-shopnodes .shopnodes-hero{min-height:min(740px,84vh)}
    .home-shopnodes .shopnodes-hero__content{padding-bottom:clamp(148px,30vh,235px)}
    .home-shopnodes .explainer-grid{gap:36px}
    .home-shopnodes .explainer{padding:46px 0}
    .home-shopnodes .explainer-copy h2{font-size:clamp(32px,4.3vw,44px)}
    .home-shopnodes .explainer-copy > p:not(.shopnodes-eyebrow){font-size:17px}
}
@media(max-width:680px){
    .page-shopnodes .nav-shell,.home-shopnodes .container{width:calc(100% - 40px)}
    .home-shopnodes .shopnodes-hero{display:flex;flex-direction:column;min-height:0;padding:26px 0 0}
    .home-shopnodes .shopnodes-hero__content{order:1;min-height:0;padding-bottom:28px}
    .home-shopnodes .shopnodes-hero__content::before{display:none}
    .home-shopnodes .shopnodes-hero-logo{width:100px;clip-path:none}
    .home-shopnodes .shopnodes-hero h1{font-size:clamp(36px,7.8vw,50px)}
    .home-shopnodes .shopnodes-hero-lead,.home-shopnodes .shopnodes-section-lead{font-size:17px}
    .home-shopnodes .shopnodes-feature-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 16px;max-width:380px}
    .home-shopnodes .shopnodes-feature-row li{flex-direction:row;text-align:left;font-size:13px}
    .home-shopnodes .shopnodes-feature-row svg{flex:0 0 27px;width:27px;height:27px}
    .home-shopnodes .shopnodes-hero-actions{flex-direction:column}
    .home-shopnodes .shopnodes-btn{width:100%;max-width:340px}
    .home-shopnodes .shopnodes-hero__scenery{order:2;position:static;width:min(100%,1150px);transform:none;margin:10px auto 0}
    .home-shopnodes .shopnodes-hero__scenery img{-webkit-mask-image:linear-gradient(to right,transparent,#000 2%,#000 98%,transparent);mask-image:linear-gradient(to right,transparent,#000 2%,#000 98%,transparent)}
    /* Mobile stacks the scenery under the copy instead of layering it. */
    .home-shopnodes .shopnodes-discovery{min-height:0;padding:40px 0 20px}
    .home-shopnodes .shopnodes-discovery__content{order:1;padding-bottom:0}
    .home-shopnodes .shopnodes-discovery__content::before{display:none}
    .home-shopnodes .shopnodes-discovery__scenery{order:2;position:static;width:100%;max-width:100%;transform:none;margin:14px auto 0}
    .home-shopnodes .shopnodes-discovery__scenery img{-webkit-mask-image:linear-gradient(to right,transparent,#000 5.5%,#000 94.5%,transparent),linear-gradient(to bottom,transparent,#000 10%,#000 96%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent,#000 5.5%,#000 94.5%,transparent),linear-gradient(to bottom,transparent,#000 10%,#000 96%,transparent);mask-composite:intersect}
    .home-shopnodes .shopnodes-category-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 16px;margin-top:24px}
    .home-shopnodes .shopnodes-category-row li{font-size:15px}
    .home-shopnodes .shopnodes-category-row svg{width:32px;height:32px}
    .home-shopnodes .explainer{padding:40px 0}
    .home-shopnodes .explainer-grid{grid-template-columns:minmax(0,1fr);gap:24px}
    .home-shopnodes .explainer-copy,.home-shopnodes .illustration-right .explainer-copy{order:-1;max-width:520px;justify-self:center;width:100%}
    .home-shopnodes .explainer-visual{justify-self:center}
    .home-shopnodes .explainer-copy h2{font-size:clamp(34px,7vw,44px)}
    .home-shopnodes .more-from-partnigram{padding:44px 0 52px}
    .home-shopnodes .more-grid{grid-template-columns:minmax(0,1fr)}
    .home-shopnodes .more-from-partnigram .shopnodes-eyebrow{gap:12px;letter-spacing:.08em}
}
@media(max-width:390px){
    .page-shopnodes .nav-shell,.home-shopnodes .container{width:calc(100% - 32px)}
    .home-shopnodes .shopnodes-hero h1{font-size:35px}
    .home-shopnodes .explainer-list li{font-size:15px}
    .home-shopnodes .product-body,.home-shopnodes .product-footer{padding-left:20px;padding-right:20px}
}
@media(prefers-reduced-motion:reduce){html:has(.page-shopnodes){scroll-behavior:auto}.home-shopnodes .shopnodes-btn,.home-shopnodes .product-card{transition:none}}