@import "https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700;800&family=Nunito+Sans:wght@400;500;600;700;800;900&display=swap";

@layer theme {

    :root,
    :host {
        --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        --spacing: .25rem;
        --default-font-family: var(--font-sans);
        --default-mono-font-family: var(--font-mono)
    }
}

@layer base {

    *,
    :after,
    :before,
    ::backdrop {
        box-sizing: border-box;
        border: 0 solid;
        margin: 0;
        padding: 0
    }

    ::file-selector-button {
        box-sizing: border-box;
        border: 0 solid;
        margin: 0;
        padding: 0
    }

    html,
    :host {
        -webkit-text-size-adjust: 100%;
        tab-size: 4;
        line-height: 1.5;
        font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
        font-feature-settings: var(--default-font-feature-settings, normal);
        font-variation-settings: var(--default-font-variation-settings, normal);
        -webkit-tap-highlight-color: transparent
    }

    hr {
        height: 0;
        color: inherit;
        border-top-width: 1px
    }

    abbr:where([title]) {
        -webkit-text-decoration: underline dotted;
        text-decoration: underline dotted
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-size: inherit;
        font-weight: inherit
    }

    a {
        color: inherit;
        -webkit-text-decoration: inherit;
        -webkit-text-decoration: inherit;
        -webkit-text-decoration: inherit;
        -webkit-text-decoration: inherit;
        text-decoration: inherit
    }

    b,
    strong {
        font-weight: bolder
    }

    code,
    kbd,
    samp,
    pre {
        font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
        font-feature-settings: var(--default-mono-font-feature-settings, normal);
        font-variation-settings: var(--default-mono-font-variation-settings, normal);
        font-size: 1em
    }

    small {
        font-size: 80%
    }

    sub,
    sup {
        vertical-align: baseline;
        font-size: 75%;
        line-height: 0;
        position: relative
    }

    sub {
        bottom: -.25em
    }

    sup {
        top: -.5em
    }

    table {
        text-indent: 0;
        border-color: inherit;
        border-collapse: collapse
    }

    :-moz-focusring {
        outline: auto
    }

    progress {
        vertical-align: baseline
    }

    summary {
        display: list-item
    }

    ol,
    ul,
    menu {
        list-style: none
    }

    img,
    svg,
    video,
    canvas,
    audio,
    iframe,
    embed,
    object {
        vertical-align: middle;
        display: block
    }

    img,
    video {
        max-width: 100%;
        height: auto
    }

    button,
    input,
    select,
    optgroup,
    textarea {
        font: inherit;
        font-feature-settings: inherit;
        font-variation-settings: inherit;
        letter-spacing: inherit;
        color: inherit;
        opacity: 1;
        background-color: #0000;
        border-radius: 0
    }

    ::file-selector-button {
        font: inherit;
        font-feature-settings: inherit;
        font-variation-settings: inherit;
        letter-spacing: inherit;
        color: inherit;
        opacity: 1;
        background-color: #0000;
        border-radius: 0
    }

    :where(select:is([multiple], [size])) optgroup {
        font-weight: bolder
    }

    :where(select:is([multiple], [size])) optgroup option {
        padding-inline-start: 20px
    }

    ::file-selector-button {
        margin-inline-end: 4px
    }

    ::placeholder {
        opacity: 1
    }

    @supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px) {
        ::placeholder {
            color: currentColor
        }

        @supports (color:color-mix(in lab, red, red)) {
            ::placeholder {
                color: color-mix(in oklab, currentcolor 50%, transparent)
            }
        }
    }

    textarea {
        resize: vertical
    }

    ::-webkit-search-decoration {
        -webkit-appearance: none
    }

    ::-webkit-date-and-time-value {
        min-height: 1lh;
        text-align: inherit
    }

    ::-webkit-datetime-edit {
        display: inline-flex
    }

    ::-webkit-datetime-edit-fields-wrapper {
        padding: 0
    }

    ::-webkit-datetime-edit {
        padding-block: 0
    }

    ::-webkit-datetime-edit-year-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-month-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-day-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-hour-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-minute-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-second-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-millisecond-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-meridiem-field {
        padding-block: 0
    }

    ::-webkit-calendar-picker-indicator {
        line-height: 1
    }

    :-moz-ui-invalid {
        box-shadow: none
    }

    button,
    input:where([type=button], [type=reset], [type=submit]) {
        appearance: button
    }

    ::file-selector-button {
        appearance: button
    }

    ::-webkit-inner-spin-button {
        height: auto
    }

    ::-webkit-outer-spin-button {
        height: auto
    }

    [hidden]:where(:not([hidden=until-found])) {
        display: none !important
    }
}

@layer components;

@layer utilities {
    .absolute {
        position: absolute
    }

    .relative {
        position: relative
    }

    .start {
        inset-inline-start: var(--spacing)
    }

    .block {
        display: block
    }

    .table {
        display: table
    }
}

:root {
    --orange: #f47c2b;
    --orange-dark: #e85f16;
    --amber: #ffb347;
    --peach: #ffdfa6;
    --cream: #fff3e4;
    --paper: #fffaf3;
    --brown: #5a3b21;
    --brown-dark: #28170c;
    --gray: #6b6d76;
    --line: #eadbc8;
    --green: #3f8d3a
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    background: var(--paper);
    color: var(--brown-dark);
    -webkit-font-smoothing: antialiased;
    margin: 0;
    font-family: Nunito Sans, Arial, sans-serif;
    font-size: 18px
}

a {
    color: inherit;
    text-decoration: none
}

img {
    max-width: 100%;
    display: block
}

svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8px;
    stroke-linecap: round;
    stroke-linejoin: round
}

h1,
h2,
h3,
p {
    margin-top: 0
}

h1,
h2,
h3,
.brand {
    font-family: "Baloo 2", Nunito Sans, sans-serif
}

.announcement {
    background: var(--brown-dark);
    color: #fff;
    letter-spacing: .02em;
    justify-content: center;
    align-items: center;
    gap: 12px;
    min-height: 38px;
    padding: 8px 24px;
    font-size: 14px;
    display: flex
}

.announcement strong {
    color: var(--amber)
}

.announcement-dot {
    background: var(--orange);
    border-radius: 50%;
    width: 4px;
    height: 4px
}

.site-header {
    z-index: 50;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    background: #fffaf3f0;
    border-bottom: 1px solid #5a3b211a;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 36px;
    height: 78px;
    padding: 0 clamp(22px, 5vw, 78px);
    display: grid;
    position: sticky;
    top: 0
}

.brand {
    color: var(--brown-dark);
    align-items: center;
    gap: 8px;
    width: fit-content;
    font-size: 27px;
    font-weight: 800;
    line-height: 1;
    display: inline-flex
}

.brand>span:last-child>span {
    color: var(--orange)
}

nav {
    align-items: center;
    gap: 32px;
    display: flex
}

nav a,
.text-link {
    font-size: 16px;
    font-weight: 800;
    transition: color .2s
}

nav a:hover,
.text-link:hover {
    color: var(--orange-dark)
}

.header-actions {
    justify-content: flex-end;
    align-items: center;
    gap: 22px;
    display: flex
}

.button {
    border: 1px solid var(--orange);
    background: linear-gradient(135deg, var(--orange), #ff6819);
    color: #fff;
    border-radius: 12px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 24px;
    font-size: 16px;
    font-weight: 900;
    transition: transform .2s, box-shadow .2s;
    display: inline-flex;
    box-shadow: 0 10px 28px #f47c2b38
}

.button:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px #f47c2b4d
}

.button svg,
.inline-link svg,
.footer-email svg {
    width: 18px;
    height: 18px
}

.button-small {
    border-radius: 10px;
    min-height: 46px;
    padding: 0 19px;
    font-size: 15px
}

.button-secondary {
    border-color: var(--line);
    box-shadow: none;
    color: var(--brown-dark);
    background: #fff
}

.button-secondary:hover {
    border-color: var(--orange);
    box-shadow: 0 10px 25px #5a3b2114
}

.hero {
    background: radial-gradient(circle at 88% 10%, #ffb3472e, #0000 27%), linear-gradient(#fffaf3 0%, #fff6e9 100%);
    grid-template-columns: minmax(0, .94fr) minmax(480px, 1.06fr);
    align-items: center;
    gap: clamp(44px, 7vw, 100px);
    min-height: 650px;
    padding: 72px clamp(24px, 6vw, 96px) 62px;
    display: grid;
    position: relative;
    overflow: hidden
}

.hero:before {
    content: "";
    opacity: .25;
    pointer-events: none;
    background-image: radial-gradient(var(--amber) .7px, transparent .7px);
    background-size: 24px 24px;
    position: absolute;
    inset: 0;
    -webkit-mask-image: linear-gradient(90deg, #0000 48%, #000 100%);
    mask-image: linear-gradient(90deg, #0000 48%, #000 100%)
}

.hero-copy {
    z-index: 2;
    max-width: 610px;
    position: relative
}

.eyebrow,
.kicker {
    color: var(--orange-dark);
    letter-spacing: .12em;
    font-size: 12px;
    font-weight: 900
}

.eyebrow {
    letter-spacing: .035em;
    background: #ffb34726;
    border-radius: 99px;
    width: fit-content;
    padding: 8px 12px
}

.eyebrow span {
    color: var(--amber);
    margin-right: 4px
}

h1 {
    letter-spacing: -.045em;
    margin: 22px 0 25px;
    font-size: clamp(53px, 5.1vw, 76px);
    line-height: .96
}

h1 em {
    color: var(--orange);
    font-style: normal;
    display: block
}

.hero-lede {
    max-width: 560px;
    color: var(--gray);
    font-size: 21px;
    line-height: 1.6
}

.hero-actions {
    gap: 12px;
    margin: 32px 0 28px;
    display: flex
}

.hero-checks {
    color: var(--brown);
    flex-wrap: wrap;
    gap: 18px;
    font-size: 15px;
    font-weight: 800;
    display: flex
}

.hero-checks span {
    align-items: center;
    gap: 7px;
    display: inline-flex
}

.hero-checks i {
    width: 19px;
    height: 19px;
    color: var(--green);
    background: #eaf5e7;
    border-radius: 50%;
    place-items: center;
    display: grid
}

.hero-checks svg {
    stroke-width: 2.6px;
    width: 12px;
    height: 12px
}

.hero-visual {
    z-index: 2;
    place-items: center;
    min-height: 510px;
    display: grid;
    position: relative
}

.product-image-frame {
    aspect-ratio: 1;
    background: linear-gradient(150deg, #fff, #ffe8c8);
    border: 1px solid #ffffffe6;
    border-radius: 38px;
    width: min(100%, 545px);
    padding: 15px;
    overflow: hidden;
    transform: rotate(.6deg);
    box-shadow: 0 30px 70px #5a3b2124
}

.product-image-frame img {
    object-fit: contain;
    border-radius: 27px;
    width: 100%;
    height: 100%
}

.hero-stars {
    width: 135px;
    color: var(--orange);
    fill: var(--amber);
    stroke-width: 1.4px;
    z-index: 3;
    position: absolute;
    top: -6px;
    right: -8px
}

.hero-stars .trail,
.launch-stars .trail {
    fill: none;
    stroke-dasharray: 5 7
}

.sky-cloud {
    filter: drop-shadow(0 10px 22px #5a3b210f);
    background: #fffc;
    border-radius: 99px;
    position: absolute
}

.sky-cloud:before,
.sky-cloud:after {
    content: "";
    background: inherit;
    border-radius: 50%;
    position: absolute
}

.cloud-one {
    width: 75px;
    height: 23px;
    top: 70px;
    left: -30px
}

.cloud-one:before {
    width: 35px;
    height: 35px;
    bottom: 0;
    left: 13px
}

.cloud-one:after {
    width: 27px;
    height: 27px;
    bottom: 0;
    left: 38px
}

.cloud-two {
    opacity: .7;
    width: 54px;
    height: 17px;
    bottom: 70px;
    right: -8px
}

.cloud-two:before {
    width: 25px;
    height: 25px;
    bottom: 0;
    left: 9px
}

.cloud-two:after {
    width: 18px;
    height: 18px;
    bottom: 0;
    left: 30px
}

.impact-card,
.shipping-card {
    z-index: 4;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    background: #fffffff2;
    border: 1px solid #5a3b2114;
    align-items: center;
    display: flex;
    position: absolute;
    box-shadow: 0 18px 38px #5a3b2126
}

.impact-card {
    border-radius: 16px;
    gap: 12px;
    padding: 13px 18px 13px 12px;
    bottom: 62px;
    left: -30px
}

.impact-heart {
    width: 41px;
    height: 41px;
    color: var(--orange);
    background: #fff0e8;
    border-radius: 13px;
    place-items: center;
    display: grid
}

.impact-heart svg {
    width: 22px
}

.impact-card div {
    flex-direction: column;
    display: flex
}

.impact-card strong {
    font-family: "Baloo 2";
    font-size: 25px;
    line-height: .9
}

.impact-card div span {
    color: var(--gray);
    font-size: 12px;
    font-weight: 800
}

.shipping-card {
    color: var(--orange);
    border-radius: 14px;
    gap: 10px;
    padding: 12px 15px;
    top: 80px;
    right: -28px
}

.shipping-card>svg {
    width: 27px
}

.shipping-card span {
    color: var(--gray);
    flex-direction: column;
    font-size: 12px;
    display: flex
}

.shipping-card strong {
    color: var(--brown-dark);
    font-size: 13px
}

.trust-strip {
    background: var(--brown-dark);
    border-top: 1px solid #ffffff14;
    border-bottom: 1px solid #ffffff14;
    grid-template-columns: 1.35fr repeat(4, 1fr);
    gap: 12px;
    margin: 0;
    padding: 34px clamp(24px, 5vw, 76px);
    display: grid
}

.trust-intro,
.trust-stat {
    border-radius: 20px;
    min-height: 150px
}

.trust-intro {
    background: linear-gradient(145deg, #f47c2b47, #ffb34717);
    border: 1px solid #ffb34738;
    flex-direction: column;
    justify-content: center;
    padding: 28px 30px;
    display: flex
}

.trust-intro .kicker {
    color: var(--amber);
    font-size: 11px
}

.trust-intro strong {
    color: #fff;
    max-width: 240px;
    margin-top: 10px;
    font-family: "Baloo 2";
    font-size: 27px;
    line-height: 1.05
}

.trust-stat {
    background: #ffffff12;
    border: 1px solid #ffffff1c;
    flex-direction: column;
    justify-content: flex-end;
    padding: 26px 22px 22px;
    transition: transform .2s, background .2s;
    display: flex;
    position: relative;
    overflow: hidden
}

.trust-stat:after {
    content: "";
    background: #ffb3471a;
    border-radius: 50%;
    width: 86px;
    height: 86px;
    position: absolute;
    top: -35px;
    right: -35px
}

.trust-stat:hover {
    background: #ffffff1a;
    transform: translateY(-4px)
}

.trust-icon {
    background: var(--orange);
    color: #fff;
    border-radius: 11px;
    place-items: center;
    width: 34px;
    height: 34px;
    font-size: 17px;
    font-weight: 900;
    display: grid;
    position: absolute;
    top: 20px;
    left: 22px;
    box-shadow: 0 8px 20px #f47c2b3d
}

.trust-stat strong {
    color: #fff;
    white-space: nowrap;
    font-family: "Baloo 2";
    font-size: 27px;
    line-height: 1
}

.trust-stat p {
    color: #ffffffa6;
    margin: 6px 0 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35
}

.section {
    padding: 105px clamp(24px, 6vw, 96px)
}

.section-heading {
    margin-bottom: 54px
}

.section-heading.centered {
    text-align: center;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto
}

.section-heading.narrow {
    max-width: 570px
}

.section-heading h2,
.product-copy h2,
.why-copy h2,
.launch-section h2 {
    letter-spacing: -.035em;
    margin: 12px 0 15px;
    font-size: clamp(38px, 4vw, 57px);
    line-height: 1.05
}

.section-heading p,
.product-copy>p,
.why-copy>p,
.launch-section>p {
    color: var(--gray);
    font-size: 19px;
    line-height: 1.65
}

.how {
    background: #fff
}

.steps {
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: center;
    gap: 20px;
    max-width: 1180px;
    margin: 0 auto;
    display: grid
}

.step-card {
    border: 1px solid var(--line);
    background: var(--paper);
    border-radius: 22px;
    min-height: 300px;
    padding: 35px 30px;
    transition: transform .2s, box-shadow .2s;
    position: relative
}

.step-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 40px #5a3b2114
}

.feature-step {
    background: var(--cream);
    border-color: var(--peach)
}

.step-number {
    color: #f47c2b40;
    font-family: "Baloo 2";
    font-size: 33px;
    font-weight: 800;
    position: absolute;
    top: 18px;
    right: 22px
}

.icon-badge {
    width: 58px;
    height: 58px;
    color: var(--orange);
    background: #fff;
    border-radius: 17px;
    place-items: center;
    display: grid;
    box-shadow: 0 8px 22px #5a3b2112
}

.icon-badge svg {
    width: 30px;
    height: 30px
}

.step-card h3,
.audience-card h3,
.why-grid h3 {
    margin: 25px 0 9px;
    font-size: 23px
}

.step-card p,
.audience-card p,
.why-grid p {
    color: var(--gray);
    margin: 0;
    font-size: 16px;
    line-height: 1.65
}

.step-arrow {
    color: var(--orange);
    font-size: 26px;
    font-weight: 900
}

.products {
    background: var(--cream);
    overflow: hidden
}

.product-showcase {
    grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
    align-items: center;
    gap: clamp(55px, 8vw, 120px);
    max-width: 1240px;
    margin: 0 auto;
    display: grid
}

.product-photo {
    position: relative
}

.product-photo:before {
    content: "";
    background: var(--amber);
    opacity: .22;
    filter: blur(5px);
    border-radius: 50%;
    width: 90%;
    height: 90%;
    position: absolute;
    bottom: -6%;
    left: -5%;
    transform: rotate(-6deg)
}

.product-photo img {
    border-radius: 32px;
    width: 100%;
    position: relative;
    box-shadow: 0 28px 60px #5a3b2124
}

.product-photo-label {
    background: #fffffff0;
    border-radius: 99px;
    padding: 11px 16px;
    font-size: 13px;
    font-weight: 900;
    position: absolute;
    bottom: 25px;
    left: 25px;
    box-shadow: 0 10px 25px #5a3b2124
}

.product-photo-label span {
    color: var(--orange)
}

.product-copy {
    max-width: 510px
}

.product-pills {
    flex-wrap: wrap;
    gap: 9px;
    margin: 26px 0 28px;
    display: flex
}

.product-pill {
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 99px;
    padding: 8px 13px;
    font-size: 13px;
    font-weight: 900
}

.product-pill.orange {
    color: #d95f00;
    background: #fff3e6
}

.product-pill.red {
    color: #d83a32;
    background: #fff0ef
}

.product-pill.blue {
    color: #377cb4;
    background: #edf6ff
}

.product-pill.purple {
    color: #8d4a9f;
    background: #faeffc
}

.inline-link {
    color: var(--orange-dark);
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 900;
    display: inline-flex
}

.audience-section {
    background: #fff
}

.split-heading {
    grid-template-columns: 1.2fr .8fr;
    align-items: end;
    gap: 80px;
    display: grid
}

.split-heading h2 {
    max-width: 700px;
    margin-bottom: 0
}

.split-heading>p {
    max-width: 450px
}

.audience-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    display: grid
}

.audience-card {
    border: 1px solid var(--line);
    background: var(--paper);
    border-radius: 20px;
    align-items: center;
    gap: 20px;
    min-height: 150px;
    padding: 16px;
    display: flex;
    box-shadow: 0 10px 26px #5a3b210d
}

.audience-image {
    border-radius: 15px;
    flex: 0 0 122px;
    width: 122px;
    height: 112px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 18px #5a3b211c
}

.audience-card h3 {
    margin: 0 0 4px;
    font-size: 20px
}

.why-section {
    color: #fff;
    background: linear-gradient(120deg, #f36c1d, #ff8b28);
    grid-template-columns: .7fr 1.3fr;
    align-items: center;
    gap: 54px;
    padding: 88px clamp(24px, 6vw, 96px);
    display: grid;
    position: relative;
    overflow: hidden
}

.why-section:after {
    content: "";
    background: radial-gradient(circle, #ffffff2e, #fff0 68%);
    border-radius: 50%;
    width: 460px;
    height: 460px;
    position: absolute;
    top: -220px;
    right: -160px
}

.kicker.light {
    color: #fff3df
}

.why-copy h2 {
    max-width: 470px
}

.why-copy>p {
    color: #ffffffd6;
    max-width: 410px
}

.why-grid {
    z-index: 2;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    display: grid;
    position: relative
}

.why-grid article {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    background: #ffffff21;
    border-radius: 22px;
    min-height: 250px;
    padding: 28px 22px 24px;
    transition: transform .22s, background .22s;
    box-shadow: 0 18px 38px #702a042e
}

.why-grid article:hover {
    background: #fff3;
    transform: translateY(-6px)
}

.why-icon {
    width: 58px;
    height: 58px;
    color: var(--orange-dark);
    background: #fff;
    border-radius: 18px;
    place-items: center;
    display: grid;
    box-shadow: 0 12px 26px #702a0433
}

.why-icon svg {
    stroke-width: 2px;
    width: 29px;
    height: 29px
}

.why-icon.why-percent {
    font-family: "Baloo 2";
    font-size: 19px;
    font-weight: 800
}

.why-grid h3 {
    margin: 28px 0 7px;
    font-size: 19px
}

.why-grid p {
    color: #ffffffd1;
    font-size: 14px
}

.community-photo {
    background: var(--cream);
    position: absolute;
    inset: 0;
    overflow: hidden
}

.community-photo:before {
    content: "";
    aspect-ratio: 1;
    background-image: url(/fundraiser-community-grid.png);
    background-repeat: no-repeat;
    background-size: 300% 200%;
    width: 104%;
    position: absolute;
    top: 50%;
    left: -2%;
    transform: translateY(-50%)
}

.community-photo.tile-1:before {
    background-position: 0 0
}

.community-photo.tile-2:before {
    background-position: 50% 0
}

.community-photo.tile-3:before {
    background-position: 100% 0
}

.community-photo.tile-4:before {
    background-position: 0 100%
}

.community-photo.tile-5:before {
    background-position: 50% 100%
}

.community-photo.tile-6:before {
    background-position: 100% 100%
}

.live-fundraisers {
    background: #fff;
    position: relative;
    overflow: hidden
}

.live-fundraisers:before {
    content: "";
    border: 90px solid #ffb3471f;
    border-radius: 50%;
    width: 460px;
    height: 460px;
    position: absolute;
    top: 160px;
    left: -290px
}

.live-heading {
    z-index: 2;
    position: relative;
    max-width: 820px !important
}

.fundraiser-grid {
    z-index: 2;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    max-width: 1240px;
    margin: 0 auto;
    display: grid;
    position: relative
}

.fundraiser-card {
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 26px;
    transition: transform .25s, box-shadow .25s;
    overflow: hidden;
    box-shadow: 0 16px 42px #5a3b2117
}

.fundraiser-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 24px 54px #5a3b2124
}

.fundraiser-image {
    height: 285px;
    position: relative;
    overflow: hidden
}

.fundraiser-image:after {
    content: "";
    background: linear-gradient(#28170c05, #28170c3d);
    position: absolute;
    inset: 0
}

.live-badge {
    z-index: 3;
    color: var(--brown-dark);
    background: #fffffff0;
    border-radius: 99px;
    align-items: center;
    gap: 7px;
    padding: 8px 11px;
    font-size: 12px;
    font-weight: 900;
    display: flex;
    position: absolute;
    top: 18px;
    left: 18px;
    box-shadow: 0 8px 24px #28170c26
}

.live-badge i {
    background: var(--orange);
    border-radius: 50%;
    width: 8px;
    height: 8px;
    box-shadow: 0 0 0 4px #f47c2b2b
}

.share-bubble {
    z-index: 3;
    background: var(--orange);
    color: #fff;
    border-radius: 50%;
    place-items: center;
    width: 42px;
    height: 42px;
    font-size: 22px;
    font-weight: 900;
    display: grid;
    position: absolute;
    bottom: 16px;
    right: 18px;
    box-shadow: 0 10px 25px #f47c2b5c
}

.fundraiser-content {
    padding: 24px 24px 22px
}

.fundraiser-title {
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    display: flex
}

.fundraiser-title>div>span {
    color: var(--orange-dark);
    text-transform: uppercase;
    letter-spacing: .07em;
    font-size: 12px;
    font-weight: 900
}

.fundraiser-title h3 {
    margin: 3px 0 17px;
    font-size: 24px;
    line-height: 1.1
}

.fundraiser-title>strong {
    color: var(--brown-dark);
    font-family: "Baloo 2";
    font-size: 25px
}

.progress-row,
.fundraiser-total {
    color: var(--gray);
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    font-weight: 700;
    display: flex
}

.progress-row span:last-child {
    color: var(--orange-dark);
    font-weight: 900
}

.progress-track {
    background: var(--cream);
    border-radius: 99px;
    height: 9px;
    margin: 8px 0 13px;
    overflow: hidden
}

.progress-track span {
    border-radius: inherit;
    background: linear-gradient(90deg, var(--amber), var(--orange));
    height: 100%;
    display: block;
    box-shadow: 0 0 15px #f47c2b59
}

.fundraiser-total strong {
    color: var(--brown-dark)
}

.success-section {
    background: var(--brown-dark);
    color: #fff;
    overflow: hidden
}

.success-heading {
    grid-template-columns: 1.2fr .8fr;
    align-items: end;
    gap: 80px;
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
    display: grid
}

.success-heading h2 {
    max-width: 780px;
    margin-bottom: 0
}

.success-heading>p {
    color: #ffffffad;
    max-width: 470px
}

.success-section .kicker {
    color: var(--amber)
}

.story-grid {
    grid-template-rows: repeat(2, 275px);
    grid-template-columns: 1.12fr .88fr;
    gap: 20px;
    max-width: 1240px;
    margin: 0 auto;
    display: grid
}

.story-card {
    background: #4b3525;
    border-radius: 24px;
    min-height: 0;
    position: relative;
    overflow: hidden
}

.story-featured {
    grid-row: 1/3
}

.story-card .community-photo {
    transition: transform .45s
}

.story-card:hover .community-photo {
    transform: scale(1.035)
}

.story-shade {
    background: linear-gradient(#0000 25%, #190d06e6 100%);
    position: absolute;
    inset: 0
}

.story-content {
    z-index: 2;
    padding: 30px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0
}

.story-content h3 {
    margin: 10px 0 5px;
    font-size: 30px;
    line-height: 1
}

.story-content p {
    color: #ffffffb8;
    max-width: 570px;
    margin: 0;
    font-size: 15px;
    line-height: 1.5
}

.raised-badge {
    background: var(--amber);
    width: fit-content;
    color: var(--brown-dark);
    text-transform: uppercase;
    letter-spacing: .04em;
    border-radius: 99px;
    align-items: center;
    gap: 7px;
    padding: 8px 11px;
    font-size: 12px;
    font-weight: 900;
    display: flex
}

.raised-badge svg {
    stroke-width: 2.3px;
    width: 15px;
    height: 15px
}

.reviews-section {
    background: linear-gradient(#fff9f0, #fff3e4)
}

.review-heading {
    max-width: 800px !important
}

.reviews-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    max-width: 1240px;
    margin: 0 auto;
    display: grid
}

.review-card {
    border: 1px solid #5a3b2114;
    border-radius: 28px;
    flex-direction: column;
    min-height: 405px;
    padding: 34px;
    display: flex;
    box-shadow: 0 18px 46px #5a3b2117
}

.review-card.sunny {
    background: var(--amber)
}

.review-card.green {
    color: #fff;
    background: #4b9948
}

.review-card.cream {
    background: #fff
}

.quote-mark {
    color: var(--orange-dark);
    font-family: Georgia, serif;
    font-size: 68px;
    line-height: .7
}

.review-card.green .quote-mark {
    color: #dff4d4
}

.review-card blockquote {
    margin: 26px 0 38px;
    font-family: "Baloo 2";
    font-size: 26px;
    font-weight: 700;
    line-height: 1.25
}

.review-person {
    align-items: center;
    gap: 13px;
    margin-top: auto;
    display: flex
}

.review-person>span {
    background: var(--brown-dark);
    color: #fff;
    border-radius: 50%;
    place-items: center;
    width: 52px;
    height: 52px;
    font-family: "Baloo 2";
    font-size: 16px;
    font-weight: 800;
    display: grid
}

.review-card.green .review-person>span {
    color: var(--green);
    background: #fff
}

.review-person div {
    flex-direction: column;
    display: flex
}

.review-person strong {
    text-transform: capitalize;
    font-family: "Baloo 2";
    font-size: 18px
}

.faq {
    background: var(--paper)
}

.faq-grid {
    border-top: 1px solid var(--line);
    max-width: 860px;
    margin: 0 auto
}

.faq details {
    border-bottom: 1px solid var(--line)
}

.faq summary {
    cursor: pointer;
    justify-content: space-between;
    align-items: center;
    padding: 25px 5px;
    font-family: "Baloo 2";
    font-size: 20px;
    font-weight: 700;
    list-style: none;
    display: flex
}

.faq summary::-webkit-details-marker {
    display: none
}

.faq summary span {
    color: var(--orange);
    font-family: Nunito Sans;
    font-size: 26px;
    font-weight: 400;
    transition: transform .2s
}

.faq details[open] summary span {
    transform: rotate(45deg)
}

.faq details p {
    max-width: 720px;
    color: var(--gray);
    margin: -7px 0 25px 5px;
    font-size: 16px;
    line-height: 1.7
}

.launch-section {
    text-align: center;
    background: linear-gradient(#fff4df, #ffead0);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 430px;
    padding: 80px 24px;
    display: flex;
    position: relative;
    overflow: hidden
}

.launch-section:before,
.launch-section:after {
    content: "";
    filter: blur(2px);
    background: #ffffff8c;
    border-radius: 50%;
    width: 270px;
    height: 110px;
    position: absolute
}

.launch-section:before {
    bottom: -48px;
    left: -100px
}

.launch-section:after {
    top: -50px;
    right: -70px
}

.launch-section h2 {
    margin: 7px 0 12px
}

.launch-section>p {
    max-width: 590px
}

.button-dark {
    background: var(--brown-dark);
    border-color: var(--brown-dark);
    margin-top: 17px;
    box-shadow: 0 10px 28px #28170c2e
}

.launch-stars {
    width: 140px;
    color: var(--orange);
    fill: var(--amber);
    position: absolute;
    top: 20%;
    left: 9%
}

footer {
    background: var(--brown-dark);
    color: #fff;
    padding: 72px clamp(24px, 6vw, 96px) 24px
}

.footer-top {
    grid-template-columns: 1.6fr .8fr .8fr 1.2fr;
    gap: 60px;
    padding-bottom: 55px;
    display: grid
}

.footer-brand .brand {
    color: #fff
}

.footer-brand p {
    color: var(--amber);
    text-transform: uppercase;
    letter-spacing: .14em;
    margin: 17px 0 0;
    font-size: 12px;
    font-weight: 900
}

.footer-top h4 {
    margin: 7px 0 17px;
    font-family: "Baloo 2";
    font-size: 18px
}

.footer-top>div:not(.footer-brand)>a {
    color: #ffffffa3;
    width: fit-content;
    margin: 9px 0;
    font-size: 14px;
    display: block
}

.footer-top>div:not(.footer-brand)>a:hover {
    color: var(--amber)
}

.footer-top>div>p {
    color: #fff9;
    font-size: 14px
}

.footer-email {
    border-bottom: 1px solid #ffffff38;
    align-items: center;
    gap: 8px;
    padding: 11px 0;
    color: var(--amber) !important;
    display: flex !important
}

.footer-bottom {
    color: #ffffff6b;
    border-top: 1px solid #ffffff1f;
    justify-content: space-between;
    padding-top: 22px;
    font-size: 12px;
    display: flex
}

.footer-bottom>span:last-child {
    gap: 20px;
    display: flex
}

.reveal-item {
    --reveal-delay: 0s;
    opacity: 0;
    filter: blur(3px);
    transition: opacity .72s cubic-bezier(.2, .75, .25, 1), translate .72s cubic-bezier(.2, .75, .25, 1), filter .72s cubic-bezier(.2, .75, .25, 1);
    transition-delay: var(--reveal-delay);
    will-change: opacity, translate;
    translate: 0 30px
}

.reveal-item.is-visible {
    opacity: 1;
    filter: blur();
    translate: 0
}

@media (width<=1080px) {
    .site-header {
        grid-template-columns: 1fr auto
    }

    nav {
        display: none
    }

    .hero {
        grid-template-columns: .9fr 1.1fr;
        gap: 35px
    }

    .hero h1 {
        font-size: 55px
    }

    .shipping-card {
        right: 0
    }

    .impact-card {
        left: 0
    }

    .why-section {
        grid-template-columns: 1fr;
        gap: 35px
    }

    .why-grid {
        width: 100%;
        max-width: 900px
    }

    .trust-strip {
        grid-template-columns: 1.3fr repeat(2, 1fr)
    }

    .trust-intro {
        grid-row: 1/3
    }

    .fundraiser-image {
        height: 245px
    }

    .fundraiser-content {
        padding: 21px
    }

    .success-heading {
        gap: 45px
    }
}

@media (width<=820px) {

    .announcement>span:first-child,
    .announcement-dot {
        display: none
    }

    .site-header {
        height: 68px;
        padding: 0 20px
    }

    .header-actions .text-link {
        display: none
    }

    .button-small {
        min-height: 39px;
        padding: 0 13px
    }

    .button-small svg {
        display: none
    }

    .hero {
        text-align: center;
        grid-template-columns: 1fr;
        padding: 57px 22px 70px
    }

    .hero-copy,
    .eyebrow {
        margin: auto
    }

    h1 {
        font-size: clamp(46px, 12vw, 64px) !important
    }

    .hero-actions,
    .hero-checks {
        justify-content: center
    }

    .hero-visual {
        width: 100%;
        max-width: 620px;
        min-height: 480px;
        margin: auto
    }

    .trust-strip {
        grid-template-columns: repeat(2, 1fr);
        padding: 26px 20px
    }

    .trust-intro {
        grid-area: auto/1/auto/-1;
        min-height: 125px
    }

    .trust-intro strong {
        max-width: none
    }

    .steps {
        grid-template-columns: 1fr
    }

    .step-arrow {
        text-align: center;
        line-height: 1;
        transform: rotate(90deg)
    }

    .product-showcase,
    .split-heading {
        grid-template-columns: 1fr;
        gap: 45px
    }

    .product-copy {
        max-width: none
    }

    .audience-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .why-grid {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 35px
    }

    .why-grid article {
        min-height: 250px
    }

    .fundraiser-grid,
    .reviews-grid {
        grid-template-columns: 1fr;
        max-width: 600px
    }

    .fundraiser-image {
        height: 340px
    }

    .success-heading {
        grid-template-columns: 1fr;
        gap: 18px
    }

    .story-grid {
        grid-template-rows: 430px repeat(2, 300px);
        grid-template-columns: 1fr
    }

    .story-featured {
        grid-row: auto
    }

    .review-card {
        min-height: 330px
    }

    .footer-top {
        grid-template-columns: 1.3fr 1fr 1fr
    }

    .footer-top>div:last-child {
        grid-column: 1/-1
    }
}

@media (width<=540px) {
    .brand {
        font-size: 23px
    }

    .button-small {
        font-size: 13px
    }

    .hero {
        min-height: auto
    }

    .hero-actions {
        flex-direction: column
    }

    .hero-actions .button {
        width: 100%
    }

    .hero-checks {
        gap: 9px 14px
    }

    .hero-visual {
        min-height: 365px
    }

    .product-image-frame {
        padding: 10px
    }

    .impact-card {
        bottom: 24px;
        left: -4px
    }

    .shipping-card {
        top: 38px;
        right: -4px
    }

    .hero-stars {
        width: 95px
    }

    .trust-strip {
        grid-template-columns: 1fr;
        gap: 10px
    }

    .trust-intro {
        grid-column: auto;
        min-height: 115px;
        padding: 24px
    }

    .trust-stat {
        justify-content: center;
        min-height: 118px;
        padding: 22px 20px 20px 75px
    }

    .trust-icon {
        top: 41px;
        left: 20px
    }

    .trust-stat strong {
        font-size: 25px
    }

    .trust-stat p {
        font-size: 13px
    }

    .section {
        padding: 78px 20px
    }

    .section-heading h2,
    .product-copy h2,
    .why-copy h2,
    .launch-section h2 {
        font-size: 38px
    }

    .audience-grid {
        grid-template-columns: 1fr
    }

    .audience-card {
        min-height: 142px
    }

    .audience-image {
        flex-basis: 112px;
        width: 112px;
        height: 104px
    }

    .fundraiser-image {
        height: 285px
    }

    .fundraiser-title h3 {
        font-size: 22px
    }

    .story-grid {
        grid-template-rows: 390px repeat(2, 310px)
    }

    .story-content {
        padding: 24px
    }

    .story-content h3 {
        font-size: 27px
    }

    .review-card {
        min-height: 350px;
        padding: 28px
    }

    .review-card blockquote {
        font-size: 23px
    }

    .why-section {
        padding: 72px 20px
    }

    .why-grid {
        grid-template-columns: 1fr 1fr
    }

    .why-grid article {
        min-height: 245px;
        padding: 24px 18px 22px
    }

    .faq summary {
        gap: 20px;
        font-size: 18px
    }

    .launch-stars {
        opacity: .5;
        top: 13%;
        left: -25px
    }

    .footer-top {
        grid-template-columns: 1fr 1fr;
        gap: 38px 25px
    }

    .footer-brand {
        grid-column: 1/-1
    }

    .footer-bottom {
        flex-direction: column;
        gap: 12px
    }
}

@media (prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }

    *,
    :before,
    :after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important
    }

    .reveal-item {
        opacity: 1 !important;
        filter: none !important;
        translate: none !important
    }
}

.public-page {
    background: var(--paper)
}

.public-header nav a[aria-current=page] {
    color: var(--orange-dark)
}

.public-footer {
    margin-top: 0
}

.footer-legal-links {
    border-top: 1px solid #ffffff1f;
    border-bottom: 1px solid #ffffff1f;
    flex-wrap: wrap;
    gap: 12px 26px;
    padding: 22px 0;
    display: flex
}

.footer-legal-links a {
    color: #ffffff9e;
    font-size: 13px;
    font-weight: 700
}

.footer-legal-links a:hover {
    color: var(--amber)
}

.public-footer .footer-bottom {
    border-top: 0
}

.info-hero {
    background: radial-gradient(circle at 15% 5%, #ffb34733, #0000 30%), linear-gradient(#fffaf3, #fff2df);
    grid-template-columns: .9fr 1.1fr;
    align-items: center;
    gap: clamp(48px, 7vw, 100px);
    min-height: 680px;
    padding: 74px clamp(24px, 6vw, 96px);
    display: grid;
    overflow: hidden
}

.info-hero-copy {
    max-width: 650px
}

.info-hero h1,
.support-hero h1,
.tracking-page h1,
.legal-hero h1 {
    letter-spacing: -.045em;
    margin: 16px 0 24px;
    font-size: clamp(50px, 5vw, 76px);
    line-height: .98
}

.info-hero-copy>p,
.support-hero>p,
.tracking-copy>p,
.legal-hero>p {
    color: var(--gray);
    font-size: 20px;
    line-height: 1.65
}

.info-actions {
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 31px;
    display: flex
}

.about-hero-photo {
    border-radius: 36px;
    min-height: 520px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 34px 80px #5a3b212e
}

.about-hero-photo:after {
    content: "";
    pointer-events: none;
    background: linear-gradient(#0000 55%, #28170c45);
    position: absolute;
    inset: 0
}

.about-hero-photo img {
    object-fit: cover;
    object-position: 47% center;
    width: 100%;
    height: 100%;
    min-height: 520px
}

.photo-callout {
    z-index: 2;
    background: #ffffffed;
    border-radius: 18px;
    align-items: center;
    gap: 14px;
    max-width: 320px;
    padding: 14px 18px;
    display: flex;
    position: absolute;
    bottom: 24px;
    left: 24px;
    box-shadow: 0 14px 35px #28170c2e
}

.photo-callout strong {
    color: var(--orange-dark);
    font-family: "Baloo 2";
    font-size: 30px
}

.photo-callout span {
    color: var(--brown);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.35
}

.story-band {
    background: var(--brown-dark);
    color: #fff;
    grid-template-columns: .8fr 1.2fr;
    gap: clamp(50px, 9vw, 130px);
    padding: 96px clamp(24px, 8vw, 130px);
    display: grid
}

.story-band h2,
.quality-section h2,
.commitment-band h2,
.contact-copy h2,
.tracking-help h2 {
    letter-spacing: -.035em;
    margin: 12px 0 0;
    font-size: clamp(38px, 4vw, 58px);
    line-height: 1.05
}

.story-band .kicker {
    color: var(--amber)
}

.story-band p {
    color: #ffffffb3;
    font-size: 18px;
    line-height: 1.75
}

.info-section {
    padding: 105px clamp(24px, 6vw, 96px)
}

.mission-section {
    background: #fff
}

.value-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 1180px;
    margin: 0 auto;
    display: grid
}

.value-grid article {
    background: linear-gradient(145deg, #fff8ed, #fff1da);
    border-radius: 26px;
    min-height: 270px;
    padding: 32px;
    box-shadow: 0 18px 48px #5a3b2114
}

.value-grid article>span {
    color: var(--orange);
    font-family: "Baloo 2";
    font-size: 30px;
    font-weight: 800
}

.value-grid h3 {
    margin: 31px 0 8px;
    font-size: 26px
}

.value-grid p {
    color: var(--gray);
    font-size: 16px;
    line-height: 1.7
}

.quality-section {
    background: var(--cream);
    grid-template-columns: .85fr 1.15fr;
    align-items: center;
    gap: clamp(55px, 9vw, 130px);
    padding: 100px clamp(24px, 7vw, 112px);
    display: grid
}

.quality-section>div:last-child {
    max-width: 650px
}

.quality-section>div:last-child>p,
.commitment-band>p {
    color: var(--gray);
    font-size: 18px;
    line-height: 1.72
}

.quality-product {
    border-radius: 34px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 30px 70px #5a3b2121
}

.quality-product img {
    aspect-ratio: 1;
    object-fit: cover;
    width: 100%
}

.check-list {
    gap: 13px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
    display: grid
}

.check-list li {
    color: var(--brown);
    padding-left: 34px;
    font-weight: 800;
    position: relative
}

.check-list li:before {
    content: "✓";
    width: 23px;
    height: 23px;
    color: var(--green);
    background: #e8f4e5;
    border-radius: 50%;
    place-items: center;
    font-size: 13px;
    display: grid;
    position: absolute;
    top: -1px;
    left: 0
}

.commitment-band {
    text-align: center;
    background: linear-gradient(145deg, #ffdfad, #fff2d8);
    padding: 110px 24px
}

.commitment-band h2 {
    max-width: 830px;
    margin: 12px auto 17px
}

.commitment-band>p {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto
}

.support-hero {
    text-align: center;
    background: radial-gradient(circle at 50% -20%, #ffb34747, #0000 48%), #fff;
    padding: 92px clamp(24px, 6vw, 96px) 105px
}

.support-hero>p {
    max-width: 700px;
    margin: 0 auto
}

.support-paths {
    text-align: left;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 1180px;
    margin: 62px auto 0;
    display: grid
}

.support-paths article {
    background: var(--paper);
    border-radius: 25px;
    min-height: 270px;
    padding: 30px;
    box-shadow: 0 18px 48px #5a3b2114
}

.support-paths article>span {
    color: var(--orange);
    letter-spacing: .08em;
    font-size: 13px;
    font-weight: 900
}

.support-paths h3 {
    margin: 31px 0 8px;
    font-size: 27px
}

.support-paths p {
    color: var(--gray);
    font-size: 16px;
    line-height: 1.65
}

.support-paths a {
    color: var(--orange-dark);
    font-size: 15px;
    font-weight: 900
}

.contact-section {
    background: var(--cream);
    grid-template-columns: .7fr 1.3fr;
    gap: clamp(55px, 8vw, 110px);
    padding: 105px clamp(24px, 7vw, 112px);
    display: grid
}

.contact-copy>p {
    color: var(--gray);
    font-size: 17px;
    line-height: 1.7
}

.response-card {
    background: var(--brown-dark);
    color: #fff;
    border-radius: 20px;
    margin-top: 35px;
    padding: 24px
}

.response-card strong,
.response-card a {
    display: block
}

.response-card a {
    color: var(--amber);
    margin: 7px 0 15px;
    font-weight: 900
}

.response-card p {
    color: #ffffffa6;
    margin: 0;
    font-size: 14px;
    line-height: 1.55
}

.support-form {
    background: #fff;
    border-radius: 28px;
    padding: 36px;
    box-shadow: 0 24px 60px #5a3b211c
}

.field-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    display: grid
}

.support-form label,
.tracker-panel label {
    color: var(--brown-dark);
    gap: 8px;
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 900;
    display: grid
}

.support-form label span {
    color: var(--gray);
    font-weight: 600
}

.support-form input,
.support-form select,
.support-form textarea,
.tracker-panel input {
    border: 1px solid var(--line);
    background: var(--paper);
    width: 100%;
    color: var(--brown-dark);
    font: inherit;
    border-radius: 12px;
    outline: none;
    padding: 14px 15px;
    font-size: 16px
}

.support-form textarea {
    resize: vertical;
    min-height: 145px
}

.support-form input:focus,
.support-form select:focus,
.support-form textarea:focus,
.tracker-panel input:focus {
    border-color: var(--orange);
    box-shadow: 0 0 0 3px #f47c2b21
}

.form-submit {
    align-items: center;
    gap: 20px;
    display: flex
}

.form-submit p {
    color: var(--gray);
    margin: 0;
    font-size: 13px;
    line-height: 1.4
}

.form-note {
    color: #2d6d29;
    background: #edf6e9;
    border-radius: 10px;
    margin: 18px 0 0;
    padding: 12px 14px;
    font-size: 14px
}

.form-note a {
    font-weight: 800;
    text-decoration: underline
}

.support-faq {
    background: #fff;
    padding: 105px clamp(24px, 7vw, 112px)
}

.faq-list {
    border-top: 1px solid var(--line);
    max-width: 900px;
    margin: 0 auto
}

.faq-list details {
    border-bottom: 1px solid var(--line)
}

.faq-list summary {
    cursor: pointer;
    justify-content: space-between;
    gap: 25px;
    padding: 25px 0;
    font-family: "Baloo 2";
    font-size: 21px;
    font-weight: 700;
    list-style: none;
    display: flex
}

.faq-list summary::-webkit-details-marker {
    display: none
}

.faq-list summary span {
    color: var(--orange);
    font-size: 25px
}

.faq-list details[open] summary span {
    transform: rotate(45deg)
}

.faq-list details p {
    max-width: 760px;
    color: var(--gray);
    margin: -5px 0 25px;
    line-height: 1.7
}

.tracking-page {
    background: linear-gradient(135deg, #fff9f0 5%, #ffe8c3 100%);
    grid-template-columns: .9fr 1.1fr;
    align-items: center;
    gap: clamp(55px, 8vw, 110px);
    min-height: 670px;
    padding: 95px clamp(24px, 7vw, 112px);
    display: grid
}

.tracking-copy {
    max-width: 650px
}

.tracking-tips {
    gap: 12px;
    margin-top: 35px;
    display: grid
}

.tracking-tips div {
    flex-direction: column;
    padding-left: 30px;
    display: flex;
    position: relative
}

.tracking-tips div:before {
    content: "";
    background: var(--orange);
    border-radius: 50%;
    width: 11px;
    height: 11px;
    position: absolute;
    top: 6px;
    left: 4px;
    box-shadow: 0 0 0 5px #f47c2b24
}

.tracking-tips div:not(:last-child):after {
    content: "";
    background: #f47c2b59;
    width: 1px;
    height: 30px;
    position: absolute;
    top: 25px;
    left: 9px
}

.tracking-tips strong {
    font-size: 16px
}

.tracking-tips span {
    color: var(--gray);
    font-size: 14px
}

.tracker-panel {
    background: #fffffff0;
    border-radius: 30px;
    width: 100%;
    max-width: 620px;
    padding: 42px;
    box-shadow: 0 28px 70px #5a3b2126
}

.tracker-panel input {
    min-height: 54px
}

.tracker-panel .button {
    width: 100%;
    margin-top: 4px
}

.tracking-result {
    background: #fff5e6;
    border: 1px solid #f2d9b4;
    border-radius: 15px;
    gap: 15px;
    margin-top: 24px;
    padding: 19px;
    display: flex
}

.tracking-result>span {
    background: var(--amber);
    width: 35px;
    height: 35px;
    color: var(--brown-dark);
    border-radius: 50%;
    flex: 0 0 35px;
    place-items: center;
    font-weight: 900;
    display: grid
}

.tracking-result p {
    color: var(--gray);
    margin: 5px 0 10px;
    font-size: 14px;
    line-height: 1.5
}

.tracking-result a {
    color: var(--orange-dark);
    font-size: 14px;
    font-weight: 900
}

.tracking-help {
    background: #fff;
    grid-template-columns: 1.2fr .8fr;
    align-items: center;
    gap: 70px;
    padding: 90px clamp(24px, 8vw, 130px);
    display: grid
}

.tracking-help>div:first-child {
    max-width: 700px
}

.tracking-help p {
    color: var(--gray);
    font-size: 17px;
    line-height: 1.7
}

.tracking-help>div:last-child {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    display: flex
}

.tracking-help>div:last-child>a:not(.button) {
    color: var(--orange-dark);
    font-size: 14px;
    font-weight: 900
}

.legal-hero {
    background: radial-gradient(circle at 80% 0, #ffb3473b, transparent 35%), var(--cream);
    padding: 88px clamp(24px, 10vw, 170px) 70px
}

.legal-hero h1 {
    max-width: 850px
}

.legal-hero>p {
    max-width: 780px
}

.legal-meta {
    color: var(--brown);
    text-transform: uppercase;
    letter-spacing: .06em;
    flex-wrap: wrap;
    gap: 12px 28px;
    margin-top: 28px;
    font-size: 13px;
    font-weight: 900;
    display: flex
}

.legal-layout {
    background: #fff;
    grid-template-columns: 240px minmax(0, 780px);
    align-items: start;
    gap: clamp(55px, 8vw, 120px);
    padding: 85px clamp(24px, 10vw, 170px) 110px;
    display: grid
}

.legal-layout aside {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 18px;
    gap: 9px;
    padding: 23px;
    display: grid;
    position: sticky;
    top: 110px
}

.legal-layout aside strong {
    margin-bottom: 7px;
    font-family: "Baloo 2";
    font-size: 18px
}

.legal-layout aside a {
    color: var(--gray);
    font-size: 13px;
    line-height: 1.4
}

.legal-layout aside a:hover {
    color: var(--orange-dark)
}

.legal-content article {
    border-bottom: 1px solid var(--line);
    margin: 0 0 38px;
    padding: 0 0 38px;
    scroll-margin-top: 115px
}

.legal-content h2 {
    margin: 0 0 14px;
    font-size: 31px
}

.legal-content p,
.legal-content li {
    color: #555962;
    font-size: 16px;
    line-height: 1.75
}

.legal-content p {
    margin-bottom: 15px
}

.legal-content ul {
    margin: 12px 0;
    padding-left: 23px
}

.legal-content li {
    margin: 8px 0
}

.legal-content a {
    color: var(--orange-dark);
    font-weight: 800;
    text-decoration: underline
}

.legal-contact {
    background: var(--cream);
    border-radius: 19px;
    padding: 27px
}

.legal-contact strong {
    font-family: "Baloo 2";
    font-size: 20px
}

.legal-contact p {
    margin: 6px 0 0
}

.cookie-consent {
    z-index: 1000;
    color: #fff;
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    background: #28170cf7;
    border-radius: 18px;
    justify-content: space-between;
    align-items: center;
    gap: 28px;
    max-width: 1120px;
    margin: auto;
    padding: 20px 22px;
    display: flex;
    position: fixed;
    bottom: 22px;
    left: 22px;
    right: 22px;
    box-shadow: 0 24px 70px #28170c59
}

.cookie-consent strong {
    font-family: "Baloo 2";
    font-size: 20px;
    display: block
}

.cookie-consent p {
    color: #ffffffb8;
    max-width: 700px;
    margin: 4px 0;
    font-size: 14px;
    line-height: 1.45
}

.cookie-consent a {
    color: var(--amber);
    font-size: 13px;
    font-weight: 900
}

.cookie-actions {
    flex: none;
    gap: 10px;
    display: flex
}

.cookie-actions button {
    border: 1px solid var(--orange);
    background: var(--orange);
    color: #fff;
    min-height: 44px;
    font: inherit;
    cursor: pointer;
    border-radius: 10px;
    padding: 0 16px;
    font-size: 14px;
    font-weight: 900
}

.cookie-actions .cookie-secondary {
    background: 0 0;
    border-color: #ffffff47
}

@media (width<=1080px) {

    .info-hero,
    .tracking-page {
        grid-template-columns: 1fr
    }

    .about-hero-photo {
        min-height: 500px
    }

    .contact-section {
        grid-template-columns: 1fr
    }

    .contact-copy {
        max-width: 700px
    }

    .legal-layout {
        grid-template-columns: 210px minmax(0, 1fr);
        gap: 55px
    }
}

@media (width<=820px) {

    .info-hero,
    .tracking-page {
        padding: 68px 22px
    }

    .story-band,
    .quality-section,
    .tracking-help {
        grid-template-columns: 1fr;
        gap: 38px
    }

    .value-grid,
    .support-paths {
        grid-template-columns: 1fr;
        max-width: 610px
    }

    .support-hero,
    .contact-section,
    .support-faq {
        padding: 78px 22px
    }

    .legal-hero {
        padding: 70px 24px 55px
    }

    .legal-layout {
        grid-template-columns: 1fr;
        padding: 60px 24px 85px
    }

    .legal-layout aside {
        grid-template-columns: repeat(2, 1fr);
        position: static
    }

    .legal-layout aside strong {
        grid-column: 1/-1
    }

    .cookie-consent {
        flex-direction: column;
        align-items: stretch
    }

    .cookie-actions {
        justify-content: flex-end
    }
}

@media (width<=540px) {

    .info-hero h1,
    .support-hero h1,
    .tracking-page h1,
    .legal-hero h1 {
        font-size: 44px !important
    }

    .info-actions {
        flex-direction: column
    }

    .about-hero-photo,
    .about-hero-photo img {
        min-height: 410px
    }

    .photo-callout {
        bottom: 15px;
        left: 15px;
        right: 15px
    }

    .story-band,
    .quality-section,
    .tracking-help {
        padding: 72px 20px
    }

    .value-grid article,
    .support-paths article {
        min-height: auto
    }

    .field-row {
        grid-template-columns: 1fr;
        gap: 0
    }

    .support-form,
    .tracker-panel {
        padding: 25px 20px
    }

    .form-submit {
        flex-direction: column;
        align-items: stretch
    }

    .tracking-page {
        gap: 42px
    }

    .legal-layout aside {
        grid-template-columns: 1fr
    }

    .legal-layout aside strong {
        grid-column: auto
    }

    .footer-legal-links {
        gap: 11px 18px
    }

    .cookie-consent {
        padding: 17px;
        bottom: 10px;
        left: 10px;
        right: 10px
    }

    .cookie-actions {
        flex-direction: column-reverse
    }

    .cookie-actions button {
        width: 100%
    }
}

.hiw-page {
    background: #fffaf3
}

.hiw-page nav a[aria-current=page] {
    color: var(--orange-dark)
}

.hiw-hero {
    background: radial-gradient(circle at 87% 14%, #ffb3473d, #0000 27%), linear-gradient(#fffaf3, #fff1dd);
    grid-template-columns: .92fr 1.08fr;
    align-items: center;
    gap: clamp(54px, 8vw, 120px);
    min-height: 720px;
    padding: 80px clamp(24px, 6vw, 96px);
    display: grid;
    position: relative;
    overflow: hidden
}

.hiw-hero:before {
    content: "";
    opacity: .22;
    background-image: radial-gradient(var(--amber) .8px, transparent .8px);
    background-size: 27px 27px;
    position: absolute;
    inset: 0;
    -webkit-mask-image: linear-gradient(90deg, #0000 35%, #000);
    mask-image: linear-gradient(90deg, #0000 35%, #000)
}

.hiw-hero-copy {
    z-index: 2;
    max-width: 590px;
    position: relative
}

.hiw-pill {
    color: var(--orange-dark);
    letter-spacing: .09em;
    background: #ffb34729;
    border-radius: 99px;
    padding: 9px 13px;
    font-size: 12px;
    font-weight: 900;
    display: inline-flex
}

.hiw-hero h1 {
    margin: 22px 0 25px;
    font-size: clamp(60px, 6vw, 88px);
    line-height: .88
}

.hiw-hero h1 em {
    color: var(--orange);
    font-style: normal;
    display: block
}

.hiw-hero-copy>p {
    max-width: 560px;
    color: var(--gray);
    font-size: 21px;
    line-height: 1.65
}

.hiw-actions {
    gap: 12px;
    margin: 32px 0 28px;
    display: flex
}

.hiw-hero-points {
    color: var(--brown);
    flex-wrap: wrap;
    gap: 18px;
    font-size: 15px;
    font-weight: 800;
    display: flex
}

.hiw-hero-points span {
    align-items: center;
    gap: 7px;
    display: flex
}

.hiw-hero-points i {
    width: 21px;
    height: 21px;
    color: var(--green);
    background: #e7f4e4;
    border-radius: 50%;
    place-items: center;
    font-size: 12px;
    font-style: normal;
    display: grid
}

.hiw-hero-stage {
    z-index: 2;
    place-items: center;
    min-height: 560px;
    display: grid;
    position: relative
}

.hiw-stage-orbit {
    border: 1px dashed #f47c2b57;
    border-radius: 50%;
    position: absolute
}

.orbit-one {
    width: 510px;
    height: 510px
}

.orbit-two {
    width: 390px;
    height: 390px
}

.hiw-phone {
    z-index: 3;
    background: #fff;
    border: 9px solid #28170c;
    border-radius: 42px;
    width: 290px;
    min-height: 500px;
    padding: 25px 22px;
    position: relative;
    transform: rotate(-3deg);
    box-shadow: 0 34px 75px #5a3b2138
}

.hiw-phone:before {
    content: "";
    background: #28170c;
    border-radius: 0 0 15px 15px;
    width: 94px;
    height: 22px;
    position: absolute;
    top: -2px;
    left: 50%;
    translate: -50%
}

.hiw-phone-top {
    justify-content: space-between;
    align-items: center;
    margin: 6px 0 30px;
    font-family: "Baloo 2";
    font-size: 18px;
    font-weight: 800;
    display: flex
}

.hiw-phone-top>span>span {
    color: var(--orange)
}

.hiw-phone-top i {
    color: var(--gray);
    font-size: 12px;
    font-style: normal
}

.hiw-phone>p {
    color: var(--gray);
    margin: 0 0 4px;
    font-size: 12px
}

.hiw-phone>h3 {
    margin: 0 0 25px;
    font-size: 23px
}

.hiw-phone-total {
    background: var(--cream);
    border-radius: 18px;
    flex-direction: column;
    padding: 20px;
    display: flex
}

.hiw-phone-total>span,
.hiw-phone-total>small {
    color: var(--gray);
    font-size: 11px
}

.hiw-phone-total strong {
    margin: 5px 0 0;
    font-family: "Baloo 2";
    font-size: 35px;
    line-height: 1
}

.hiw-phone-track,
.hiw-large-track {
    background: #f4e4cf;
    border-radius: 99px;
    height: 10px;
    overflow: hidden
}

.hiw-phone-track {
    margin: 16px 0 22px
}

.hiw-phone-track span,
.hiw-large-track span {
    border-radius: inherit;
    background: linear-gradient(90deg, var(--amber), var(--orange));
    width: 77%;
    height: 100%;
    display: block
}

.hiw-phone-stats {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    display: grid
}

.hiw-phone-stats div {
    background: #fffaf3;
    border-radius: 14px;
    flex-direction: column;
    padding: 14px;
    display: flex
}

.hiw-phone-stats strong {
    font-family: "Baloo 2";
    font-size: 22px
}

.hiw-phone-stats span {
    color: var(--gray);
    font-size: 10px
}

.hiw-store-link {
    color: var(--gray);
    background: #f6f3ef;
    border-radius: 12px;
    justify-content: space-between;
    align-items: center;
    margin-top: 22px;
    padding: 12px;
    font-size: 10px;
    display: flex
}

.hiw-store-link strong {
    background: var(--orange);
    color: #fff;
    border-radius: 8px;
    padding: 6px 8px
}

.hiw-product-card {
    z-index: 4;
    background: #fff;
    border-radius: 22px;
    width: 200px;
    padding: 9px;
    position: absolute;
    bottom: 35px;
    right: -15px;
    transform: rotate(5deg);
    box-shadow: 0 22px 45px #5a3b212e
}

.hiw-product-image {
    aspect-ratio: 1;
    background: url(/cubsky-products.png) 50%/contain no-repeat;
    border-radius: 15px
}

.hiw-product-card span {
    padding: 9px 7px 4px;
    font-size: 11px;
    font-weight: 900;
    display: block
}

.hiw-float-card {
    z-index: 5;
    background: #fff;
    border-radius: 15px;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    display: flex;
    position: absolute;
    box-shadow: 0 17px 38px #5a3b212b
}

.hiw-float-card>span {
    width: 37px;
    height: 37px;
    color: var(--orange-dark);
    background: #fff0e7;
    border-radius: 12px;
    place-items: center;
    font-weight: 900;
    display: grid
}

.hiw-float-card div {
    flex-direction: column;
    display: flex
}

.hiw-float-card strong {
    font-size: 13px
}

.hiw-float-card small {
    color: var(--gray);
    font-size: 9px
}

.hiw-float-sales {
    top: 75px;
    left: -25px
}

.hiw-float-share {
    bottom: 72px;
    left: 4px
}

.hiw-proof {
    background: var(--brown-dark);
    color: #fff;
    grid-template-columns: repeat(4, 1fr);
    padding: 0 clamp(24px, 6vw, 96px);
    display: grid
}

.hiw-proof>div {
    border-right: 1px solid #ffffff24;
    flex-direction: column;
    justify-content: center;
    min-height: 130px;
    padding: 28px 24px;
    display: flex
}

.hiw-proof>div:first-child {
    border-left: 1px solid #ffffff24
}

.hiw-proof strong {
    color: var(--amber);
    font-family: "Baloo 2";
    font-size: 31px;
    line-height: 1
}

.hiw-proof span {
    color: #ffffffa6;
    max-width: 180px;
    margin-top: 7px;
    font-size: 13px;
    line-height: 1.4
}

.hiw-section {
    padding: 115px clamp(24px, 6vw, 96px)
}

.hiw-heading {
    max-width: 770px;
    margin-bottom: 70px
}

.hiw-heading h2,
.hiw-tools-copy>h2,
.hiw-cta h2 {
    letter-spacing: -.035em;
    margin: 12px 0 16px;
    font-size: clamp(42px, 4.3vw, 62px);
    line-height: 1.02
}

.hiw-heading>p,
.hiw-tools-copy>p,
.hiw-cta>p {
    color: var(--gray);
    font-size: 19px;
    line-height: 1.65
}

.hiw-process {
    background: #fff
}

.hiw-process>.hiw-heading {
    text-align: center;
    margin-left: auto;
    margin-right: auto
}

.hiw-step {
    grid-template-columns: .87fr 1.13fr;
    align-items: center;
    gap: clamp(65px, 9vw, 130px);
    max-width: 1240px;
    margin: 0 auto 120px;
    display: grid
}

.hiw-step:last-child {
    margin-bottom: 0
}

.hiw-step-reverse .hiw-step-copy {
    order: 2
}

.hiw-step-reverse .hiw-step-visual {
    order: 1
}

.hiw-step-copy {
    position: relative
}

.hiw-step-number {
    color: #f47c2b2e;
    margin-bottom: 12px;
    font-family: "Baloo 2";
    font-size: 75px;
    font-weight: 800;
    line-height: .8;
    display: block
}

.hiw-step-copy h3 {
    margin: 11px 0 15px;
    font-size: clamp(34px, 3.4vw, 49px);
    line-height: 1.03
}

.hiw-step-copy>p {
    color: var(--gray);
    font-size: 18px;
    line-height: 1.7
}

.hiw-step-copy ul {
    gap: 11px;
    margin: 25px 0 0;
    padding: 0;
    list-style: none;
    display: grid
}

.hiw-step-copy li {
    color: var(--brown);
    padding-left: 31px;
    font-size: 15px;
    font-weight: 800;
    position: relative
}

.hiw-step-copy li:before {
    content: "✓";
    width: 21px;
    height: 21px;
    color: var(--green);
    background: #e8f4e5;
    border-radius: 50%;
    place-items: center;
    font-size: 11px;
    display: grid;
    position: absolute;
    top: -1px;
    left: 0
}

.hiw-step-visual {
    background: var(--cream);
    border-radius: 34px;
    min-height: 520px;
    position: relative;
    overflow: hidden
}

.hiw-setup-visual {
    background: linear-gradient(145deg, #fff0dc, #ffdca8);
    place-items: center;
    display: grid
}

.hiw-setup-card {
    background: #fff;
    border-radius: 25px;
    width: min(78%, 470px);
    padding: 30px;
    transform: rotate(-2deg);
    box-shadow: 0 26px 65px #5a3b2129
}

.hiw-ui-heading {
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    display: flex
}

.hiw-ui-heading span {
    font-family: "Baloo 2";
    font-size: 22px;
    font-weight: 700
}

.hiw-ui-heading strong {
    color: var(--orange-dark);
    font-size: 11px
}

.hiw-setup-card label {
    color: var(--gray);
    flex-direction: column;
    gap: 7px;
    margin: 14px 0;
    font-size: 11px;
    font-weight: 800;
    display: flex
}

.hiw-setup-card label span {
    color: var(--brown-dark);
    background: #faf7f2;
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 13px
}

.hiw-setup-card button,
.hiw-store-card button {
    background: var(--orange);
    color: #fff;
    width: 100%;
    font: inherit;
    border: 0;
    border-radius: 11px;
    padding: 13px;
    font-size: 13px;
    font-weight: 900
}

.hiw-tip-card {
    background: var(--brown-dark);
    color: #ffffffb3;
    border-radius: 15px;
    width: 190px;
    padding: 14px;
    font-size: 10px;
    line-height: 1.45;
    position: absolute;
    bottom: 28px;
    right: 15px;
    transform: rotate(3deg);
    box-shadow: 0 16px 35px #28170c38
}

.hiw-tip-card strong {
    color: #fff;
    font-size: 13px;
    display: block
}

.hiw-site-photo {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    inset: 0
}

.hiw-share-visual .hiw-site-photo {
    filter: saturate(.92)contrast(1.02)
}

.hiw-share-visual:after {
    content: "";
    background: linear-gradient(90deg, #28170c14, #28170c7a);
    position: absolute;
    inset: 0
}

.hiw-store-card {
    z-index: 2;
    background: #fffffff5;
    border-radius: 22px;
    width: 260px;
    padding: 25px;
    position: absolute;
    top: 50%;
    right: 30px;
    translate: 0 -50%;
    box-shadow: 0 25px 55px #28170c40
}

.hiw-store-card>span {
    color: var(--orange-dark);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 10px;
    font-weight: 900
}

.hiw-store-card>strong {
    margin: 8px 0;
    font-family: "Baloo 2";
    font-size: 24px;
    line-height: 1.05;
    display: block
}

.hiw-store-card>small {
    color: var(--gray);
    margin-bottom: 18px;
    font-size: 11px;
    line-height: 1.45;
    display: block
}

.hiw-share-chips {
    z-index: 3;
    gap: 8px;
    display: flex;
    position: absolute;
    bottom: 22px;
    left: 22px
}

.hiw-share-chips span {
    color: var(--brown-dark);
    background: #fff;
    border-radius: 99px;
    padding: 8px 11px;
    font-size: 10px;
    font-weight: 900;
    box-shadow: 0 7px 18px #28170c2e
}

.hiw-progress-visual {
    background: linear-gradient(145deg, #fff7ec, #ffe0b6);
    place-items: center;
    display: grid
}

.hiw-progress-card {
    background: #fff;
    border-radius: 24px;
    width: min(80%, 490px);
    padding: 29px;
    box-shadow: 0 25px 60px #5a3b2129
}

.hiw-progress-head {
    justify-content: space-between;
    display: flex
}

.hiw-progress-head span {
    font-family: "Baloo 2";
    font-size: 18px;
    font-weight: 700
}

.hiw-progress-head small {
    color: var(--green);
    font-size: 10px;
    font-weight: 900
}

.hiw-big-total {
    margin-top: 22px;
    font-family: "Baloo 2";
    font-size: 43px;
    line-height: 1;
    display: block
}

.hiw-progress-label {
    color: var(--gray);
    font-size: 11px
}

.hiw-large-track {
    margin: 12px 0 22px
}

.hiw-progress-list {
    gap: 8px;
    display: grid
}

.hiw-progress-list>div {
    background: #fffaf3;
    border-radius: 11px;
    align-items: center;
    gap: 10px;
    padding: 10px;
    display: flex
}

.hiw-progress-list i {
    background: var(--cream);
    width: 25px;
    height: 25px;
    color: var(--orange-dark);
    border-radius: 9px;
    place-items: center;
    font-size: 10px;
    font-style: normal;
    font-weight: 900;
    display: grid
}

.hiw-progress-list span {
    flex-direction: column;
    flex: 1;
    display: flex
}

.hiw-progress-list span strong {
    font-size: 11px
}

.hiw-progress-list span small {
    color: var(--gray);
    font-size: 9px
}

.hiw-progress-list b {
    color: var(--orange-dark);
    font-size: 10px
}

.hiw-payout-card {
    background: var(--brown-dark);
    color: #fff;
    border-radius: 16px;
    align-items: center;
    gap: 10px;
    padding: 13px 16px;
    display: flex;
    position: absolute;
    bottom: 22px;
    right: 16px;
    box-shadow: 0 15px 35px #28170c40
}

.hiw-payout-card>span {
    background: var(--orange);
    border-radius: 11px;
    place-items: center;
    width: 35px;
    height: 35px;
    font-weight: 900;
    display: grid
}

.hiw-payout-card div {
    flex-direction: column;
    display: flex
}

.hiw-payout-card strong {
    font-size: 11px
}

.hiw-payout-card small {
    color: #fff9;
    font-size: 8px
}

.hiw-benefits {
    color: #fff;
    background: linear-gradient(125deg, #f36c1d, #ff932e);
    padding: 105px clamp(24px, 6vw, 96px);
    position: relative;
    overflow: hidden
}

.hiw-benefits:after {
    content: "";
    background: radial-gradient(circle, #ffffff2e, #0000 67%);
    border-radius: 50%;
    width: 520px;
    height: 520px;
    position: absolute;
    top: -270px;
    right: -190px
}

.hiw-heading-light {
    max-width: 780px
}

.hiw-heading-light .kicker {
    color: #fff0d5
}

.hiw-heading-light>p {
    color: #ffffffc7
}

.hiw-benefit-grid {
    z-index: 2;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    display: grid;
    position: relative
}

.hiw-benefit {
    background: #ffffff24;
    border-radius: 22px;
    min-height: 280px;
    padding: 28px;
    box-shadow: 0 16px 36px #7d320826
}

.hiw-benefit>span {
    width: 51px;
    height: 51px;
    color: var(--orange-dark);
    background: #fff;
    border-radius: 16px;
    place-items: center;
    font-size: 21px;
    font-weight: 900;
    display: grid
}

.hiw-box-icon {
    border: 2px solid;
    border-radius: 2px 2px 4px 4px;
    width: 23px;
    height: 16px;
    margin-top: 5px;
    display: block;
    position: relative
}

.hiw-box-icon:before {
    content: "";
    background: #fff;
    border: 2px solid;
    border-radius: 3px 3px 1px 1px;
    height: 7px;
    position: absolute;
    top: -8px;
    left: -4px;
    right: -4px;
    transform: skew(-10deg)
}

.hiw-box-icon:after {
    content: "";
    border-left: 2px solid;
    height: 22px;
    position: absolute;
    top: -8px;
    left: 50%
}

.hiw-benefit h3 {
    margin: 36px 0 9px;
    font-size: 24px
}

.hiw-benefit p {
    color: #fffc;
    font-size: 15px;
    line-height: 1.6
}

.hiw-tools-section {
    background: var(--paper);
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: clamp(65px, 9vw, 125px);
    display: grid
}

.hiw-tools-photo {
    border-radius: 34px;
    min-height: 660px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 28px 65px #5a3b2129
}

.hiw-tools-photo .community-photo:before {
    aspect-ratio: auto;
    background-position: 0 0;
    background-size: auto 200%;
    width: 100%;
    height: 100%;
    inset: 0;
    transform: none
}

.hiw-tools-photo-card {
    background: #fffffff0;
    border-radius: 19px;
    padding: 20px;
    position: absolute;
    bottom: 25px;
    left: 25px;
    right: 25px;
    box-shadow: 0 15px 35px #28170c33
}

.hiw-tools-photo-card>span {
    color: var(--gray);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 10px;
    font-weight: 900
}

.hiw-tools-photo-card>strong {
    margin: 4px 0 11px;
    font-family: "Baloo 2";
    font-size: 25px;
    display: block
}

.hiw-tools-photo-card>div {
    background: var(--cream);
    border-radius: 99px;
    height: 9px;
    overflow: hidden
}

.hiw-tools-photo-card i {
    border-radius: inherit;
    background: var(--orange);
    width: 77%;
    height: 100%;
    display: block
}

.hiw-tools-copy>p {
    max-width: 610px
}

.hiw-tool-grid {
    grid-template-columns: 1fr 1fr;
    gap: 13px;
    margin-top: 35px;
    display: grid
}

.hiw-tool {
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 18px;
    align-items: flex-start;
    gap: 13px;
    min-height: 185px;
    padding: 21px;
    display: flex
}

.hiw-tool>span {
    color: var(--orange);
    font-family: "Baloo 2";
    font-size: 16px;
    font-weight: 800
}

.hiw-tool h3 {
    margin: 0 0 7px;
    font-size: 21px
}

.hiw-tool p {
    color: var(--gray);
    margin: 0;
    font-size: 15px;
    line-height: 1.6
}

.hiw-audiences {
    background: #fff;
    padding: 105px clamp(24px, 6vw, 96px)
}

.hiw-audiences>.hiw-heading {
    text-align: center;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto
}

.hiw-audience-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    display: grid
}

.hiw-audience-card {
    background: var(--paper);
    border-radius: 22px;
    padding: 12px 12px 25px;
    box-shadow: 0 14px 35px #5a3b2114
}

.hiw-audience-photo {
    border-radius: 15px;
    height: 210px;
    position: relative;
    overflow: hidden
}

.hiw-audience-card h3 {
    margin: 22px 10px 5px;
    font-size: 22px
}

.hiw-audience-card p {
    color: var(--gray);
    margin: 0 10px;
    font-size: 14px;
    line-height: 1.55
}

.hiw-faq-section {
    background: var(--cream);
    grid-template-columns: .75fr 1.25fr;
    gap: 90px;
    display: grid
}

.hiw-faq {
    border-top: 1px solid #5a3b2133
}

.hiw-faq details {
    border-bottom: 1px solid #5a3b2133
}

.hiw-faq summary {
    cursor: pointer;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 24px 0;
    font-family: "Baloo 2";
    font-size: 20px;
    font-weight: 700;
    list-style: none;
    display: flex
}

.hiw-faq summary::-webkit-details-marker {
    display: none
}

.hiw-faq summary span {
    color: var(--orange);
    font-family: Nunito Sans;
    font-size: 26px;
    font-weight: 400;
    transition: rotate .2s
}

.hiw-faq details[open] summary span {
    rotate: 45deg
}

.hiw-faq details p {
    max-width: 680px;
    color: var(--gray);
    margin: -6px 0 24px;
    font-size: 15px;
    line-height: 1.7
}

.hiw-cta {
    text-align: center;
    color: #fff;
    isolation: isolate;
    background: linear-gradient(120deg, #28170c 0%, #53250f 58%, #a84614 100%);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 460px;
    padding: 85px 24px;
    display: flex;
    position: relative;
    overflow: hidden
}

.hiw-cta:before {
    content: "";
    z-index: -1;
    opacity: .22;
    background-image: radial-gradient(#ffffffb3 1px, #0000 1px);
    background-size: 24px 24px;
    position: absolute;
    inset: 0;
    -webkit-mask-image: linear-gradient(110deg, #0000 10%, #000 75%);
    mask-image: linear-gradient(110deg, #0000 10%, #000 75%)
}

.hiw-cta:after {
    content: "";
    z-index: -1;
    border: 70px solid #ffb34733;
    border-radius: 50%;
    width: 520px;
    height: 520px;
    position: absolute;
    top: -250px;
    right: -180px;
    box-shadow: 0 0 0 70px #f47c2b14
}

.hiw-cta h2 {
    max-width: 800px
}

.hiw-cta .kicker {
    color: var(--amber)
}

.hiw-cta>p {
    color: #ffffffbd;
    max-width: 570px
}

.hiw-cta .button {
    z-index: 2;
    margin-top: 17px;
    position: relative
}

.hiw-cta .button-dark {
    color: var(--brown-dark);
    background: #fff;
    box-shadow: 0 16px 38px #0000003b
}

@media (width<=1080px) {
    .hiw-hero {
        grid-template-columns: .9fr 1.1fr;
        gap: 35px
    }

    .hiw-product-card {
        right: 0
    }

    .hiw-float-sales {
        left: 0
    }

    .hiw-step {
        gap: 55px
    }

    .hiw-benefit-grid,
    .hiw-audience-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .hiw-tools-section {
        gap: 55px
    }

    .hiw-tool-grid {
        grid-template-columns: 1fr
    }

    .hiw-tool {
        min-height: auto
    }
}

@media (width<=820px) {
    .hiw-hero {
        text-align: center;
        grid-template-columns: 1fr;
        padding: 65px 22px 80px
    }

    .hiw-hero-copy {
        margin: auto
    }

    .hiw-hero-copy>p {
        margin-left: auto;
        margin-right: auto
    }

    .hiw-actions,
    .hiw-hero-points {
        justify-content: center
    }

    .hiw-hero-stage {
        width: 100%;
        max-width: 620px;
        min-height: 580px;
        margin: auto
    }

    .hiw-proof {
        grid-template-columns: repeat(2, 1fr);
        padding: 0 20px
    }

    .hiw-proof>div:nth-child(3) {
        border-left: 1px solid #ffffff24
    }

    .hiw-section {
        padding: 85px 22px
    }

    .hiw-step,
    .hiw-tools-section,
    .hiw-faq-section {
        grid-template-columns: 1fr
    }

    .hiw-step {
        margin-bottom: 85px
    }

    .hiw-step-reverse .hiw-step-copy,
    .hiw-step-reverse .hiw-step-visual {
        order: initial
    }

    .hiw-step-reverse .hiw-step-copy {
        order: 1
    }

    .hiw-step-reverse .hiw-step-visual {
        order: 2
    }

    .hiw-benefits,
    .hiw-audiences {
        padding: 85px 22px
    }

    .hiw-tools-photo {
        min-height: 560px
    }

    .hiw-tool-grid {
        grid-template-columns: 1fr 1fr
    }

    .hiw-faq-section {
        gap: 0
    }
}

@media (width<=540px) {
    .hiw-hero h1 {
        font-size: 57px
    }

    .hiw-actions {
        flex-direction: column
    }

    .hiw-actions .button {
        width: 100%
    }

    .hiw-hero-stage {
        min-height: 500px
    }

    .hiw-phone {
        width: 250px;
        min-height: 450px;
        padding: 22px 18px
    }

    .hiw-product-card {
        width: 145px;
        bottom: 0
    }

    .hiw-float-sales {
        top: 45px
    }

    .hiw-float-share {
        bottom: 32px;
        left: -3px
    }

    .hiw-proof {
        grid-template-columns: 1fr 1fr
    }

    .hiw-proof>div {
        min-height: 112px;
        padding: 22px 15px
    }

    .hiw-proof strong {
        font-size: 26px
    }

    .hiw-heading {
        margin-bottom: 48px
    }

    .hiw-heading h2,
    .hiw-tools-copy>h2,
    .hiw-cta h2 {
        font-size: 39px
    }

    .hiw-step {
        gap: 36px
    }

    .hiw-step-visual {
        min-height: 450px
    }

    .hiw-setup-card,
    .hiw-progress-card {
        width: 90%;
        padding: 22px
    }

    .hiw-tip-card,
    .hiw-payout-card {
        bottom: 12px;
        right: 8px
    }

    .hiw-store-card {
        width: 235px;
        right: 16px
    }

    .hiw-benefit-grid,
    .hiw-audience-grid,
    .hiw-tool-grid {
        grid-template-columns: 1fr
    }

    .hiw-benefit {
        min-height: 235px
    }

    .hiw-tools-photo {
        min-height: 470px
    }

    .hiw-audience-photo {
        height: 270px
    }
}