/* ============================================================================
   ShopNodes Go product page
   ----------------------------------------------------------------------------
   Page-specific layer for /shopnodes-go only. Everything structural comes from
   the established Partnigram public theme (partnigram.css + partnigram-public.css)
   - .container, .section, .section-intro, .section-title, .section-lead,
   .eyebrow, .prose, .button, .text-link. This file only adds the layout pieces
   the shared theme does not provide: a product hero, a two-column audience
   list, the fee figures, the numbered steps and the closing CTA.

   Colours and radii reuse the theme custom properties so the page reads as
   part of the same product-company site.
   ========================================================================== */

.sngo-hero {
    padding: 74px 0 66px;
    text-align: center;
    border-bottom: 1px solid var(--pn-border);
    background:
        radial-gradient(700px 320px at 50% -10%, rgba(9, 216, 255, .12), transparent 70%);
}

.sngo-hero__brand {
    display: flex;
    justify-content: center;
    margin: 6px 0 18px;
}

.sngo-hero__brand img {
    width: 132px;
    height: auto;
}

.sngo-hero__title {
    font-size: clamp(38px, 6vw, 62px);
    line-height: 1.06;
    letter-spacing: -.02em;
    margin: 0 0 16px;
}

.sngo-hero__lead {
    max-width: 720px;
    margin: 0 auto 28px;
    font-size: clamp(17px, 2vw, 20px);
    line-height: 1.6;
    color: var(--pn-text-muted);
}

.sngo-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    margin: 0;
}

/* Capability lists ---------------------------------------------------------- */
.sngo-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 34px;
    margin: 30px 0 0;
    padding: 0;
    list-style: none;
}

.sngo-list li {
    position: relative;
    padding: 18px 20px 18px 22px;
    border: 1px solid var(--pn-border);
    border-left: 3px solid var(--pn-cyan);
    border-radius: 12px;
    background: var(--pn-surface);
    color: var(--pn-text-muted);
    font-size: 15.5px;
    line-height: 1.6;
}

.sngo-list strong {
    display: block;
    color: var(--pn-text);
    margin-bottom: 4px;
    font-size: 16.5px;
}

.sngo-note {
    margin: 24px 0 0;
    font-size: 14.5px;
    color: var(--pn-text-muted);
    max-width: 78ch;
}

.sngo-note--intro {
    margin: 26px 0 0;
    font-size: 16px;
    color: var(--pn-text);
}

/* Fee figures --------------------------------------------------------------- */
.sngo-fees {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin: 28px 0 26px;
}

.sngo-fee {
    padding: 26px 24px;
    border: 1px solid var(--pn-border);
    border-radius: 14px;
    background: var(--pn-surface);
}

.sngo-fee__value {
    display: block;
    font-size: clamp(38px, 5vw, 52px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--pn-cyan);
}

.sngo-fee__label {
    display: block;
    margin-top: 10px;
    font-size: 15px;
    color: var(--pn-text-muted);
}

/* Numbered steps ------------------------------------------------------------ */
.sngo-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin: 30px 0 0;
    padding: 0;
    list-style: none;
    counter-reset: sngo;
}

.sngo-steps li {
    padding: 20px;
    border: 1px solid var(--pn-border);
    border-radius: 12px;
    background: var(--pn-surface);
}

.sngo-step__num {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    margin-bottom: 12px;
    border-radius: 50%;
    background: var(--pn-cyan);
    color: #00142c;
    font-weight: 800;
    font-size: 14px;
}

.sngo-steps strong {
    display: block;
    margin-bottom: 6px;
    font-size: 16.5px;
}

.sngo-steps p {
    margin: 0;
    color: var(--pn-text-muted);
    font-size: 15px;
    line-height: 1.55;
}

/* Product relationship ------------------------------------------------------ */
.sngo-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin: 28px 0 0;
}

.sngo-pair__item {
    padding: 24px 24px 20px;
    border: 1px solid var(--pn-border);
    border-radius: 14px;
    background: var(--pn-surface);
}

.sngo-pair__item h3 {
    margin: 0 0 10px;
    font-size: 19px;
}

.sngo-pair__item p {
    margin: 0 0 10px;
    color: var(--pn-text-muted);
    font-size: 15.5px;
    line-height: 1.6;
}

.sngo-pair__cta {
    margin: 14px 0 0;
    font-weight: 600;
}

/* Closing CTA --------------------------------------------------------------- */
.sngo-cta {
    padding: 70px 0 78px;
    text-align: center;
    border-top: 1px solid var(--pn-border);
    background: linear-gradient(180deg, rgba(9, 216, 255, .07), transparent 70%);
}

.sngo-cta h2 {
    margin: 0 0 12px;
    font-size: clamp(28px, 4vw, 40px);
}

.sngo-cta__lead {
    max-width: 640px;
    margin: 0 auto 26px;
    color: var(--pn-text-muted);
    font-size: 17px;
}

.sngo-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    margin: 0 0 22px;
}

.sngo-cta__links {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    justify-content: center;
    margin: 0;
    font-size: 15px;
}

/* Responsive ---------------------------------------------------------------- */
@media (max-width: 900px) {
    .sngo-list,
    .sngo-fees,
    .sngo-pair,
    .sngo-steps {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    .sngo-hero {
        padding: 52px 0 46px;
    }

    .sngo-hero__actions .button,
    .sngo-cta__actions .button {
        width: 100%;
    }
}