/* Partners (brands) landing page */
html { background-color: #E8F2F4 !important; scroll-behavior: smooth; }
body { background-color: transparent !important; }

/* extra left/right cushion on the band containers */
@media (min-width: 992px) {
    .pw-hero .container,
    .pw-band-grad .container,
    .pw-band-white .container,
    .pw-band-navy .container { padding-left: 3.5rem; padding-right: 3.5rem; }
}

:root {
    --pw-navy: #033365;
    --pw-teal: #E8F2F4;
    --pw-coral: #EF8E82;
    --pw-purple: #9952F9;
    --pw-green: #2E9865;
    --pw-ink-50: rgba(3, 51, 101, .5);
    --pw-ink-75: rgba(3, 51, 101, .75);
}

/* ---------- layout rhythm ---------- */
.pw-section { padding-top: 5.5rem; padding-bottom: 5.5rem; }
.pw-band-white { background: #fff; }
.pw-band-navy { background: var(--pw-navy); }
.pw-band-navy, .pw-band-navy * { color: #fff; }
.pw-band-grad { background: linear-gradient(90deg, #E7D6FB 0%, #F9C99B 100%); }
@media (max-width: 768px) { .pw-band-grad { background: linear-gradient(160deg, #E7D6FB 0%, #F9C99B 100%); } }
@media (max-width: 768px) { .pw-section { padding-top: 3.5rem; padding-bottom: 3.5rem; } }

/* sub-hero: light gradient as a layered backdrop so the diagonal header band
   (.base-header-background, z-index -1, later in the DOM) can paint on top of it
   and the pastel slides under the diagonal cut, like the tutorials page sections */
.pw-hero { position: relative; }
.pw-hero-bg {
    position: absolute;
    /* extends far above the section: when the hero copy wraps at narrow widths the
       section starts below the band's diagonal, and without this the page background
       would show through the wedge between them. The band paints over the overlap,
       so the extension is only ever visible inside that wedge. */
    top: -36rem;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    background: linear-gradient(90deg, #E7D6FB 0%, #F9C99B 100%);
}
@media (max-width: 768px) { .pw-hero-bg { background: linear-gradient(160deg, #E7D6FB 0%, #F9C99B 100%); } }

/* hero CTA pill — same treatment as home.css/tutorials.css, which aren't loaded here */
.home-header-button {
    width: fit-content;
    border-radius: 50px !important;
    box-shadow: 4px 5px #D355FF;
    transition: box-shadow 0.3s ease;
}

.home-header-button:hover {
    box-shadow: none;
}

.pw-eyebrow {
    display: inline-block;
    letter-spacing: .16em;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    color: #7C3AED;
    margin-bottom: 1rem;
}

.pw-band-navy .pw-eyebrow { color: #C4A5FF; }
.pw-h { color: var(--pw-navy); font-weight: 600; line-height: 1.12; letter-spacing: -.01em; }
.pw-band-navy .pw-h { color: #fff; }
.pw-lead { color: var(--pw-ink-75); font-size: 21px; line-height: 1.5; }
.pw-band-navy .pw-lead { color: rgba(255, 255, 255, .85); }

/* reveal */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s cubic-bezier(.16, 1, .3, 1), transform .6s cubic-bezier(.16, 1, .3, 1); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- buttons ---------- */
.pw-btn-primary {
    background: var(--pw-navy);
    color: #fff;
    border: none;
    border-radius: 3rem;
    padding: 1rem 2.25rem;
    font-size: 19px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    text-decoration: none;
    transition: transform .16s cubic-bezier(.16, 1, .3, 1), box-shadow .16s;
    box-shadow: 0 8px 24px rgba(3, 51, 101, .22);
    cursor: pointer;
}

.pw-btn-primary:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 12px 30px rgba(3, 51, 101, .3); }
.pw-btn-primary:disabled { opacity: .7; transform: none; cursor: default; }

.pw-btn-ghost {
    background: transparent;
    color: var(--pw-navy);
    border: 2px solid rgba(3, 51, 101, .35);
    border-radius: 3rem;
    padding: calc(1rem - 2px) 2.25rem;
    font-size: 19px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    text-decoration: none;
    transition: border-color .16s, background-color .16s;
}

.pw-btn-ghost:hover { color: var(--pw-navy); border-color: var(--pw-navy); background: rgba(3, 51, 101, .05); }
.pw-band-navy .pw-btn-primary { background: #fff; color: var(--pw-navy); box-shadow: 0 8px 24px rgba(0, 0, 0, .25); }
.pw-band-navy .pw-btn-primary:hover { color: var(--pw-navy); }
/* the button sits on a white fill inside the navy band, but `.pw-band-navy *`
   forces color:#fff directly on the <svg> AND its <path> children (beating the
   button's inherited navy), so the currentColor icon paints white-on-white.
   Re-assert navy on the svg and its descendants (the paths carry the stroke). */
.pw-band-navy .pw-btn-primary svg,
.pw-band-navy .pw-btn-primary svg * { color: var(--pw-navy); }

/* Mobile submit button: the inline min-width:300px plus the leading icon made
   a fixed ~336px button that overflowed narrow phones and, once constrained,
   wrapped the label onto a second line. Below 576px drop the icon, let the
   button fill the form column (min-width can't be met on a phone), and trim
   padding + font so "Request my campaign plan" stays on one line down to
   ~360px. Tablet/desktop (>=576px) keep the icon and the centred pill. */
@media (max-width: 575.98px) {
    #lead .pw-btn-primary svg { display: none; }
    #lead .pw-btn-primary {
        min-width: 0 !important;
        width: 100%;
        padding-left: 1rem;
        padding-right: 1rem;
        font-size: 17px;
    }
}
.pw-band-navy .pw-btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .5); }
.pw-band-navy .pw-btn-ghost:hover { color: #fff; border-color: #fff; background: rgba(255, 255, 255, .1); }

/* ---------- hero flow visual ---------- */
.flow-card {
    background: #fff;
    border-radius: 1.5rem;
    padding: 1.15rem 1.35rem;
    box-shadow: 0 1px 2px rgba(3, 51, 101, .05), 0 22px 50px rgba(3, 51, 101, .14);
    display: flex;
    align-items: center;
    gap: 1rem;
    position: relative;
    z-index: 2;
    border: 1px solid transparent;
    transition: transform .18s cubic-bezier(.16, 1, .3, 1), box-shadow .18s, border-color .18s;
}

.flow-card:hover { transform: translateY(-6px); box-shadow: 0 1px 2px rgba(3, 51, 101, .05), 0 28px 60px rgba(3, 51, 101, .2); border-color: rgba(3, 51, 101, .16); }
.flow-ico { width: 52px; height: 52px; border-radius: 999px; flex: none; display: flex; align-items: center; justify-content: center; transition: background-color .18s; }
.flow-card:hover .flow-ico { background: var(--pw-navy) !important; }
.flow-card:hover .flow-ico svg path, .flow-card:hover .flow-ico svg circle { stroke: #fff; }
.flow-connector { width: 2px; height: 26px; margin-left: 2.6rem; background: repeating-linear-gradient(to bottom, rgba(3, 51, 101, .35) 0 5px, transparent 5px 10px); }
.flow-label { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--pw-ink-50); }
.flow-title { font-size: 18px; font-weight: 600; color: var(--pw-navy); line-height: 1.25; }
.flow-badge { margin-left: auto; font-size: 14px; font-weight: 700; padding: .3rem .7rem; border-radius: 999px; white-space: nowrap; }
.mini-bars { display: flex; align-items: flex-end; gap: 5px; height: 40px; margin-left: auto; }
.mini-bars span { width: 8px; border-radius: 3px; background: var(--pw-navy); opacity: .85; }

/* ---------- stat cards ---------- */
.stat-card { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); border-radius: 1.5rem; padding: 2.25rem 1.5rem; height: 100%; text-align: center; }
.stat-num { font-size: 54px; font-weight: 700; line-height: 1; letter-spacing: -.02em; color: #fff; }
.stat-label { color: rgba(255, 255, 255, .8); font-size: 17px; margin-top: .85rem; line-height: 1.35; }

/* ---------- benefit cards ---------- */
.benefit-card {
    background: #fff;
    border: 1px solid rgba(3, 51, 101, .08);
    border-radius: 1.5rem;
    padding: 2rem 1.85rem;
    height: 100%;
    transition: transform .18s cubic-bezier(.16, 1, .3, 1), box-shadow .18s, border-color .18s;
}

.benefit-card:hover { transform: translateY(-6px); box-shadow: 0 20px 44px rgba(3, 51, 101, .12); border-color: rgba(3, 51, 101, .16); }
.benefit-ico { width: 62px; height: 62px; border-radius: 1rem; display: flex; align-items: center; justify-content: center; color: var(--pw-navy); background: rgba(141, 192, 202, .2); margin-bottom: 1.35rem; transition: background-color .18s, color .18s; }
.benefit-card:hover .benefit-ico { background: var(--pw-navy); color: #fff; }
.benefit-h { color: var(--pw-navy); font-size: 22px; font-weight: 600; margin-bottom: .6rem; }
.benefit-p { color: var(--pw-ink-75); font-size: 16px; line-height: 1.5; margin: 0; }

/* ---------- steps ---------- */
.steps-wrap { position: relative; }
.step-card { background: #fff; border-radius: 1.5rem; padding: 2.25rem 1.9rem; height: 100%; box-shadow: 0 1px 2px rgba(3, 51, 101, .05), 0 14px 34px rgba(3, 51, 101, .07); position: relative; z-index: 1; border: 1px solid transparent; transition: transform .18s cubic-bezier(.16, 1, .3, 1), box-shadow .18s, border-color .18s; }
.step-card:hover { transform: translateY(-6px); box-shadow: 0 20px 44px rgba(3, 51, 101, .14); border-color: rgba(3, 51, 101, .16); }
.step-num { width: 46px; height: 46px; border-radius: 999px; background: rgba(141, 192, 202, .2); color: var(--pw-navy); font-weight: 700; font-size: 20px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem; transition: background-color .18s, color .18s; }
.step-card:hover .step-num { background: var(--pw-navy); color: #fff; }
.step-h { color: var(--pw-navy); font-size: 22px; font-weight: 600; margin-bottom: .6rem; }
.step-p { color: var(--pw-ink-75); font-size: 16px; line-height: 1.5; margin: 0; }

/* ---------- form ---------- */
.lead-panel { background: #fff; border-radius: 2rem; padding: 3rem; box-shadow: 0 30px 70px rgba(0, 0, 0, .28); }
@media (max-width: 768px) { .lead-panel { padding: 1.75rem; } }
/* the panel is white, so re-assert dark text inside the navy band */
.lead-panel .pw-h { color: var(--pw-navy); }

.custom-text-input textarea {
    width: 100%;
    display: block;
    border: 0.15rem solid rgba(3, 51, 101, .4);
    background: #fff;
    color: var(--pw-navy);
    border-radius: 1.5rem;
    outline: 0;
    line-height: 1.42;
    padding: 1.1rem;
    font-size: 18px;
    resize: vertical;
    min-height: 120px;
}

.custom-select-input select {
    width: 100%;
    display: block;
    border: 0.15rem solid rgba(3, 51, 101, .4);
    background: #fff;
    border-radius: 3rem;
    outline: 0;
    padding: 1.1rem 3rem 1.1rem 1.1rem;
    font-size: 18px;
    color: var(--pw-navy);
    appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='10' viewBox='0 0 17 10' fill='none'%3E%3Cpath d='M8.09 9.37a1.11 1.11 0 0 1-.51-.22L.31 1.88A.9.9 0 1 1 1.59.6l6.5 6.5L14.6.6a.9.9 0 1 1 1.28 1.28L8.6 9.15a1.11 1.11 0 0 1-.51.22Z' fill='%23033365'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1.4rem center;
}

.custom-select-input select option { color: var(--pw-navy); background: #fff; }
.custom-select-input select option:disabled { color: var(--pw-ink-50); }
.custom-text-input input { font-size: 18px !important; padding: 1.1rem !important; color: var(--pw-navy) !important; }

/* multi-select dropdown (objectives, marketplaces) */
.multiselect { position: relative; }

.multiselect-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border: 0.15rem solid rgba(3, 51, 101, .4);
    background: #fff;
    border-radius: 3rem;
    padding: 1.1rem;
    font-size: 18px;
    color: var(--pw-navy);
    cursor: pointer;
    text-align: left;
}

.multiselect-toggle:focus { outline: 0; border-color: #59B2C4; box-shadow: inset 0 0 0 .08rem #59B2C4; }
.multiselect-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--pw-navy); }
.multiselect-value.is-placeholder { color: var(--pw-ink-50); }
.multiselect-toggle svg { flex: none; transition: transform .16s; }
.multiselect.open .multiselect-toggle svg { transform: rotate(180deg); }

.multiselect-menu {
    display: none;
    position: absolute;
    z-index: 20;
    left: 0;
    right: 0;
    top: calc(100% + .5rem);
    background: #fff;
    border: 1px solid rgba(3, 51, 101, .18);
    border-radius: 1.25rem;
    box-shadow: 0 18px 44px rgba(3, 51, 101, .18);
    padding: .5rem;
    max-height: 320px;
    overflow-y: auto;
}

.multiselect.open .multiselect-menu { display: block; }
.multiselect-option { display: flex; align-items: center; gap: .75rem; padding: .8rem .9rem; border-radius: .75rem; cursor: pointer; font-size: 17px; color: var(--pw-navy); margin: 0; }
.multiselect-option span { color: var(--pw-navy); }
.multiselect-option:hover { background: rgba(3, 51, 101, .05); }
.multiselect-option input { width: 20px; height: 20px; accent-color: var(--pw-navy); flex: none; cursor: pointer; margin: 0; }
.multiselect.field-error .multiselect-toggle { border-color: var(--pw-coral); box-shadow: inset 0 0 0 .08rem var(--pw-coral); }

.custom-text-input textarea:focus, .custom-select-input select:focus, .custom-text-input input:focus { border-color: #59B2C4 !important; box-shadow: inset 0 0 0 .08rem #59B2C4; }
.lead-panel .form-label { font-weight: 500; }
/* spans inside labels (e.g. "(optional)") are matched directly by `.pw-band-navy *`,
   which would paint them white-on-white inside the white panel */
.lead-panel .form-label span { color: inherit; }
.field-error { border-color: var(--pw-coral) !important; box-shadow: inset 0 0 0 .08rem var(--pw-coral) !important; }
.error-msg { color: #C6533F; font-size: 14px; font-weight: 600; margin-top: .3rem; display: none; }
.error-msg.show { display: block; }